/* ==========================================================================
   LP Alexis Sevrin - Expert Google & Meta Ads
   Palette et typo reprises du site d'origine (Lovable)
   ========================================================================== */

:root {
  --primary: hsl(241, 97%, 46%);
  --primary-dark: hsl(241, 97%, 38%);
  --primary-foreground: hsl(248, 0.3%, 98.4%);
  --background: hsl(0, 0%, 100%);
  --foreground: hsl(265, 4%, 12.9%);
  --muted: hsl(248, 0.7%, 96.8%);
  --muted-foreground: hsl(257, 4.6%, 55.4%);
  --border: hsl(256, 1.3%, 92.9%);
  --card: hsl(0, 0%, 100%);
  --destructive: hsl(0, 84%, 60%);
  --star: #facc15;
  --radius: 0.5rem;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Reduit le rebond elastique horizontal natif de Safari iOS, la sensation
     de "jeu" ressentie en glissant le doigt sur les cotes de l'ecran */
  overscroll-behavior-x: none;
}
body { overscroll-behavior-x: none; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--foreground);
  background: var(--background);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* Navigation clavier : indicateur visible sur l'element actif.
   :focus-visible ne se declenche pas au clic souris, seulement au clavier. */
:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Sur fond bleu, un contour blanc reste lisible */
.contact :focus-visible {
  outline-color: #fff;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}
.container.narrow { max-width: 760px; }

section { padding: 3.5rem 0; }
@media (min-width: 640px) { section { padding: 5rem 0; } }
section[id] { scroll-margin-top: 1.5rem; }

h1 {
  font-size: clamp(2rem, 6vw, 3.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
h2 {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  margin-bottom: 1rem;
}
h3 { font-weight: 700; }

.text-primary { color: var(--primary); }

.kicker {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.75rem;
}

/* Toutes les sections (hors hero) partagent la meme echelle de titre */
.testimonials h2,
.for-who h2,
.case-studies h2,
.method h2,
.faq h2,
.about h2 {
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
  letter-spacing: -0.02em;
}

/* Apparition au scroll */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    transition-delay: var(--reveal-delay, 0s);
  }
  .reveal.revealed { opacity: 1; transform: none; }
}

/* Kicker en pastille (sections retravaillées) */
.kicker-pill {
  display: table;
  margin: 0 auto 1rem;
  background: hsla(241, 97%, 46%, 0.08);
  border-radius: 9999px;
  padding: 0.45rem 1.1rem;
}

/* Sous-titre en pastille grise */
.sub-pill {
  display: table;
  margin: 0 auto 2.75rem;
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: 9999px;
  padding: 0.45rem 1.1rem;
  font-size: 0.9rem;
  color: var(--muted-foreground);
  font-weight: 500;
}

.section-sub {
  text-align: center;
  color: var(--muted-foreground);
  margin-bottom: 2.5rem;
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.875rem 2rem;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn .arrow { transition: transform 0.15s ease; }
.btn:hover .arrow { transform: translateX(4px); }

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

.btn-hero {
  background: var(--primary);
  color: #fff;
  font-size: 1.05rem;
  padding: 1rem 2.5rem;
  box-shadow: 0 10px 30px rgba(7, 4, 231, 0.3);
}
.btn-hero:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 14px 36px rgba(7, 4, 231, 0.35); }

.btn-outline {
  background: transparent;
  color: var(--foreground);
  border: 1px solid var(--border);
}
.btn-outline:hover { background: var(--muted); }

.btn-lg { font-size: 1.05rem; padding: 1rem 2.25rem; }


/* ---------- Cards ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   HERO - mise en page centree, fond blanc avec lueur bleue, visuel en dessous
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--background);
  color: var(--foreground);
  padding: 4rem 0 3.5rem;
}
@media (min-width: 768px) { .hero { padding: 5.5rem 0 4.5rem; } }
@media (min-width: 1024px) { .hero { padding: 6.5rem 0 5rem; } }

/* Lueur bleue floutee, comme la reference : rien en haut (blanc pur),
   les deux lueurs remontent depuis le bas, a gauche et a droite.
   Teinte volontairement plus franche/azur (hue 217) que le bleu de marque
   (hue 241, qui blanchi et flou finit par lire "violet") + forte opacite.
   Tailles mobile-first : des blobs a taille fixe (580px) chevauchent
   presque tout un ecran de 375px et se rejoignent au centre, pile derriere
   le texte centre. On les reduit donc sur petit ecran pour qu'ils restent
   sur les cotes, et on les regrandit progressivement plus l'ecran s'elargit. */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  bottom: -110px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  filter: blur(38px);
  pointer-events: none;
  z-index: 0;
}
.hero::before {
  left: -140px;
  background: hsla(217, 91%, 55%, 0.5);
}
.hero::after {
  right: -140px;
  background: hsla(217, 91%, 55%, 0.5);
}
@media (min-width: 480px) {
  .hero::before, .hero::after { bottom: -100px; width: 260px; height: 260px; filter: blur(50px); }
  .hero::before { left: -130px; }
  .hero::after { right: -130px; }
}
@media (min-width: 640px) {
  .hero::before, .hero::after { bottom: -120px; width: 380px; height: 380px; filter: blur(65px); }
  .hero::before { left: -140px; }
  .hero::after { right: -140px; }
}
@media (min-width: 1024px) {
  .hero::before, .hero::after { bottom: -160px; width: 580px; height: 580px; filter: blur(75px); }
  .hero::before { left: -160px; }
  .hero::after { right: -160px; }
}

.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}

.hero h1 { margin-bottom: 1.75rem; }
.h1-hook {
  display: block;
  font-size: clamp(2.3rem, 4.8vw, 3.7rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--primary);
}
.h1-hook .amp { font-weight: 400; opacity: 0.45; }
.h1-x { color: var(--star); }
.h1-sub {
  display: block;
  margin-top: 0.6rem;
  font-size: clamp(1.25rem, 2.5vw, 1.85rem);
  font-weight: 700;
  color: hsl(230, 45%, 14%);
}
/* Plus d'accent colore : toute la phrase reste uniforme, en gras noir.
   font-style:normal necessaire car <em> est italique par defaut. */
.h1-accent {
  font-style: normal;
}

.hero-sub {
  max-width: 42rem;
  font-size: clamp(0.95rem, 1.35vw, 1.05rem);
  line-height: 1.55;
  color: var(--muted-foreground);
  margin-bottom: 2rem;
}
/* Retour au noir : le bleu ici entrait en concurrence avec le titre */
.hero-sub strong { color: hsl(230, 45%, 14%); font-weight: 700; }

/* CTA juste apres le texte, bien visible */
.hero-cta { margin-bottom: 2.25rem; }

/* Preuve sociale : logos clients + Trustpilot, centres */
.hero-social-proof {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 2.5rem;
}
@media (min-width: 640px) {
  .hero-social-proof { flex-direction: row; gap: 1rem; }
}

.avatars { display: flex; }
.avatar-logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  /* fin et discret plutot qu'un cerclage epais et sature */
  border: 1px solid var(--border);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.avatar-logo img {
  width: 68%;
  height: 68%;
  object-fit: contain;
}
.avatar-logo + .avatar-logo { margin-left: -10px; }

.avatars-caption {
  font-size: 0.85rem;
  color: var(--muted-foreground);
}

.trustpilot-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-size: 0.9rem;
  color: var(--foreground);
}

.tp-logo { width: 18px; height: 18px; flex-shrink: 0; }
/* Pas de gras, pas de bleu : discret, comme la legende au-dessus */
.tp-claim { white-space: nowrap; font-weight: 500; color: var(--muted-foreground); }

.stars { color: var(--star); letter-spacing: 2px; font-size: 1rem; }

/* Visuel : photo + icones flottantes, format compact centre sous le texte */
.hero-visual {
  position: relative;
  width: 100%;
  max-width: 280px;
  padding: 1.5rem;
}

.hero-photo-square {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 1.25rem;
  box-shadow: 0 16px 40px rgba(7, 4, 231, 0.18);
}

.float-icon {
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  animation: float 5s ease-in-out infinite;
}
.float-icon svg { width: 19px; height: 19px; }

.fi-facebook  { background: #1877F2; top: 0; left: 0; animation-delay: 0s; }
.fi-google    { background: #fff; top: 8%; right: -6px; animation-delay: 1.2s; }
.fi-instagram { background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); left: -10px; top: 52%; animation-delay: 2.1s; }
.fi-tiktok    { background: #000; bottom: 2%; left: 16%; animation-delay: 0.6s; }
.fi-linkedin  { background: #0A66C2; right: -4px; bottom: 14%; animation-delay: 1.7s; }

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

@media (prefers-reduced-motion: reduce) {
  .float-icon { animation: none; }
}

/* ==========================================================================
   TÉMOIGNAGES
   ========================================================================== */
.testimonials {
  position: relative;
  overflow: hidden;
  background: var(--background);
}
/* Prolonge la lueur du hero pour que la jonction entre les 2 sections
   soit invisible. Symetrique au blob du hero a chaque palier (meme taille,
   meme opacite, meme distance a la ligne de jonction : "top" ici, "bottom"
   cote hero) pour que la couleur se raccorde exactement des deux cotes. */
.testimonials::before,
.testimonials::after {
  content: "";
  position: absolute;
  top: -110px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  filter: blur(38px);
  pointer-events: none;
  z-index: 0;
  background: hsla(217, 91%, 55%, 0.5);
}
.testimonials::before { left: -140px; }
.testimonials::after { right: -140px; }
@media (min-width: 480px) {
  .testimonials::before, .testimonials::after { top: -100px; width: 260px; height: 260px; filter: blur(50px); }
  .testimonials::before { left: -130px; }
  .testimonials::after { right: -130px; }
}
@media (min-width: 640px) {
  .testimonials::before, .testimonials::after { top: -120px; width: 380px; height: 380px; filter: blur(65px); }
  .testimonials::before { left: -140px; }
  .testimonials::after { right: -140px; }
}
@media (min-width: 1024px) {
  .testimonials::before, .testimonials::after { top: -160px; width: 580px; height: 580px; filter: blur(75px); }
  .testimonials::before { left: -160px; }
  .testimonials::after { right: -160px; }
}
.testimonials .container { position: relative; z-index: 1; }

.testimonials h2 { margin-bottom: 2rem; }

/* Bande récap Trustpilot au-dessus des avis */
.testimonial-band {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: 9999px;
  padding: 0.55rem 1.1rem;
  /* la pastille epouse son contenu au lieu de s'etirer */
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 2.5rem;
  font-size: 0.9rem;
}
.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}
@media (min-width: 640px) { .testimonial-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .testimonial-grid { grid-template-columns: repeat(4, 1fr); } }

.testimonial-card {
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  border-radius: 0.9rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.testimonial-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.08);
}

/* En-tête : avatar initiales + nom + entreprise */
.t-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.t-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
}
.t-av-1 { background: #7c8ba1; }
.t-av-2 { background: #a08b73; }
.t-av-3 { background: #6f86a8; }
.t-av-4 { background: #8d7ba6; }

.t-id { display: flex; flex-direction: column; line-height: 1.3; }
.t-id strong { font-size: 0.9rem; }
.t-id span { font-size: 0.8rem; color: var(--muted-foreground); }

.testimonial-card .stars { font-size: 0.9rem; margin-bottom: 0.75rem; }

.testimonial-card blockquote {
  font-size: 0.9rem;
  color: var(--foreground);
  margin-bottom: 1rem;
  flex: 1;
}

/* Badge de vérification Trustpilot */
.t-verified {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  font-weight: 600;
  color: #00B67A;
}
.t-verified .tp-logo { width: 16px; height: 16px; }

/* Marquee logos */
.logo-marquee {
  overflow: hidden;
  position: relative;
  padding: 0.5rem 0;
  margin-top: 3rem;
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.logo-track {
  display: flex;
  align-items: center;
  gap: 3rem;
  width: max-content;
  animation: marquee 30s linear infinite;
}
.logo-track img {
  height: 48px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.75;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ==========================================================================
   POUR QUI
   ========================================================================== */
.for-who { background: var(--muted); }

.for-who .kicker { margin-bottom: 0.5rem; }
.for-who h2 { margin-bottom: 2rem; }

/* Layout éditorial : titre à gauche (sticky), liste numérotée à droite */
.for-who-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}
@media (min-width: 900px) {
  .for-who-grid { grid-template-columns: 0.9fr 1.1fr; gap: 4.5rem; align-items: start; }
  .for-who-head { position: sticky; top: 3rem; }
  .for-who-head h2 { text-align: left; }
  .for-who-head .kicker-pill { margin-left: 0; }
}

.pain-list {
  list-style: none;
  display: flex;
  flex-direction: column;
}
.pain-list li {
  display: flex;
  align-items: baseline;
  gap: 1.4rem;
  padding: 1.15rem 0.5rem;
  border-bottom: 1px solid hsl(256, 8%, 87%);
  transition: transform 0.2s ease;
}
.pain-list li:first-child { border-top: 1px solid hsl(256, 8%, 87%); }
.pain-list li:hover { transform: translateX(8px); }

.pain-num {
  font-size: 1.45rem;
  font-weight: 300;
  color: var(--primary);
  min-width: 2.4rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}
.pain-list p {
  font-weight: 500;
  font-size: 1rem;
  color: var(--foreground);
  transition: color 0.2s ease;
}
.pain-list li:hover p { color: var(--primary); }

/* Transition visuelle : des problèmes vers la solution */
.pain-transition {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1.25rem;
}
.pain-line {
  width: 2px;
  height: 26px;
  background: linear-gradient(to bottom, transparent, var(--primary));
  border-radius: 2px;
}
.pain-chevron {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: hsla(241, 97%, 46%, 0.08);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.35rem;
}
.pain-chevron svg { width: 18px; height: 18px; }

.for-who-cta { text-align: center; }

/* ==========================================================================
   ÉTUDES DE CAS
   ========================================================================== */
.case-studies { background: var(--background); }

.case-studies h2 { margin-bottom: 2.5rem; }

.case-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}
@media (min-width: 640px) { .case-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .case-grid { grid-template-columns: repeat(3, 1fr); } }

.case-card {
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  border-radius: 0.9rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.case-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.08);
}

.case-channel {
  /* enfant d'un conteneur flex : sans cela la pastille s'etire sur toute la largeur */
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--primary);
  background: hsla(241, 97%, 46%, 0.08);
  border-radius: 9999px;
  padding: 0.3rem 0.75rem;
  margin-bottom: 0.85rem;
}
.case-emoji { font-size: 1.1em; margin-right: 0.15rem; }

.case-card h3 {
  font-size: clamp(0.85rem, 0.95vw, 0.95rem);
  margin-bottom: 0.6rem;
  white-space: nowrap;
}

.case-card .case-metric {
  font-size: clamp(1.5rem, 2vw, 1.7rem);
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 0.5rem;
  line-height: 1.2;
  white-space: nowrap;
}

.case-card p { font-size: 0.9rem; line-height: 1.5; color: var(--muted-foreground); }

/* Ligne "Impact" detachee du reste, comme les etiquettes des cartes process */
.case-card .case-impact {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  color: var(--foreground);
}
.case-card .case-impact strong {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: 0.3rem;
}

.confidentiality {
  text-align: center;
  font-style: italic;
  color: var(--muted-foreground);
  max-width: 720px;
  margin: 0 auto;
  font-size: 0.9rem;
}

/* ==========================================================================
   MÉTHODOLOGIE
   ========================================================================== */
.method { background: var(--muted); }

.method-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  position: relative;
}
@media (min-width: 768px) {
  .method-grid { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
  /* Ligne de progression qui relie les 3 étapes */
  .method-grid::before {
    content: "";
    position: absolute;
    top: 26px;
    left: 16.5%;
    right: 16.5%;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(to right, hsla(241, 97%, 46%, 0.15), var(--primary), hsla(241, 97%, 46%, 0.15));
  }
}

.method-step {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.step-number {
  position: relative;
  z-index: 1;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-weight: 800;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
  box-shadow: 0 0 0 6px hsla(241, 97%, 46%, 0.12), 0 8px 20px rgba(7, 4, 231, 0.25);
}

.step-body {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  padding: 2rem 1.75rem;
  width: 100%;
  flex: 1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
}

/* Numéro fantôme géant en filigrane */
.step-body::before {
  content: attr(data-step);
  position: absolute;
  top: -2.4rem;
  right: 0.3rem;
  font-size: 8rem;
  font-weight: 800;
  line-height: 1;
  color: var(--primary);
  opacity: 0.05;
  pointer-events: none;
}

/* Étape 3 : le crescendo, carte pleine couleur */
.method-goal .step-body {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 18px 40px rgba(7, 4, 231, 0.3);
}
.method-goal .step-body::before { color: #fff; opacity: 0.1; }
.method-goal .step-body h3 { color: #fff; }
.method-goal .step-body li { color: rgba(255, 255, 255, 0.92); }
.method-goal .step-body li::before {
  background: rgba(255, 255, 255, 0.16);
  color: #3ddc97;
}
.goal-badge {
  position: absolute;
  top: 14px;
  right: 16px;
  background: #00B67A;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  z-index: 1;
}

/* Connecteur vertical entre les étapes (mobile) */
.method-step:not(:last-child)::after {
  content: "";
  width: 2px;
  height: 30px;
  margin: 0.9rem auto;
  border-radius: 2px;
  background: linear-gradient(to bottom, var(--primary), hsla(241, 97%, 46%, 0.15));
}
@media (min-width: 768px) { .method-step:not(:last-child)::after { display: none; } }

.method-step h3 { margin-bottom: 1.15rem; font-size: 1.1rem; }

.method-step ul { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.method-step li {
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--foreground);
  padding-left: 1.9rem;
  position: relative;
}
/* Coche dans une pastille bleue pâle */
.method-step li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 0.35rem;
  background: hsla(241, 97%, 46%, 0.08);
  color: var(--primary);
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   PROCESS / VISION
   ========================================================================== */
/* Les 4 piliers, sous la timeline 3-C */

.process-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  margin-top: 4.5rem;
  /* resserre et centre : les cartes restent proches de la largeur
     des 3 etapes ci-dessus au lieu d'occuper toute la page */
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px) { .process-grid { margin-top: 5.5rem; } }
@media (min-width: 768px) { .process-grid { grid-template-columns: repeat(2, 1fr); } }

.process-card {
  padding: 1.9rem 1.75rem;
  border-top: 3px solid var(--primary);
  border-radius: 0.9rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.process-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.08);
}

.process-title {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1rem;
}
.process-icon {
  width: 48px;
  height: 48px;
  border-radius: 0.85rem;
  background: hsla(241, 97%, 46%, 0.08);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(7, 4, 231, 0.1);
}
.process-icon svg { width: 24px; height: 24px; }

.process-card h3 { color: var(--primary); font-size: 1.15rem; }
/* Etiquette qui introduit la liste, volontairement discrete */
.process-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
  margin-bottom: 0.9rem;
}

.process-card ul { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; }
.process-card li {
  font-size: 0.92rem;
  line-height: 1.45;
  padding-left: 1.9rem;
  position: relative;
  color: var(--foreground);
}
/* Coche verte : l'engagement tenu, rappel des avis vérifiés */
.process-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 0.35rem;
  background: rgba(0, 182, 122, 0.12);
  color: #00B67A;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   CONTACT / FORMULAIRE
   ========================================================================== */
.contact {
  background: var(--primary);
  color: var(--primary-foreground);
  position: relative;
  overflow: hidden;
}
/* Halo discret pour donner de la profondeur au bloc bleu */
.contact::before {
  content: "";
  position: absolute;
  top: -220px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 460px;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.13), transparent 70%);
  pointer-events: none;
}
.contact .container { position: relative; z-index: 1; }

.contact-kicker {
  text-align: center;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  margin: 0 auto 1.1rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 9999px;
  padding: 0.4rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
/* Pastille clignotante facon "disponible" */
.contact-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3ddc97;
  box-shadow: 0 0 0 3px rgba(61, 220, 151, 0.25);
}

.contact h2 {
  color: #fff;
  margin-bottom: 2.25rem;
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
  letter-spacing: -0.02em;
}

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  max-width: 820px;
  margin: 0 auto 2rem;
}
@media (min-width: 640px) { .benefit-grid { gap: 1rem; } }

.benefit-card {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius);
  text-align: center;
  padding: 0.75rem 0.4rem;
}
@media (min-width: 640px) { .benefit-card { padding: 0.9rem 0.75rem; } }
.benefit-card svg {
  width: 20px;
  height: 20px;
  color: #fff;
  margin: 0 auto;
  display: block;
}
@media (min-width: 640px) { .benefit-card svg { width: 24px; height: 24px; } }
.benefit-card p { font-size: 0.72rem; font-weight: 500; margin-top: 0.4rem; }
@media (min-width: 640px) {
  /* Le libelle doit tenir sur une seule ligne */
  .benefit-card p { font-size: 0.85rem; margin-top: 0.45rem; white-space: nowrap; }
}

.form-card {
  max-width: 640px;
  margin: 0 auto;
  padding: 1.5rem;
  border: none;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  color: var(--foreground);
}
@media (min-width: 640px) { .form-card { padding: 2rem; } }

#lead-form { display: flex; flex-direction: column; gap: 1.4rem; }

/* Champ piège anti-spam : reste dans le flux normal (pas de position
   absolue hors ecran, pour ne jamais pouvoir influencer le scroll de la
   page), juste reduit a 1x1px et invisible. Technique standard "visually
   hidden". Certains robots evitent aussi les champs display:none. */
.honeypot-field {
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
}
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }

.form-field { display: flex; flex-direction: column; gap: 0.45rem; }
/* Le groupe de budget est un fieldset : on neutralise son style natif */
fieldset.form-field { border: none; padding: 0; margin: 0; min-width: 0; }
fieldset.form-field > legend { padding: 0; }

.form-field label,
.form-field .label {
  font-size: 0.875rem;
  font-weight: 500;
}

.form-field input,
.form-field select,
.form-field textarea {
  font-family: inherit;
  /* 1rem = 16px : en dessous, iOS zoome automatiquement a la saisie */
  font-size: 1rem;
  padding: 0.7rem 0.85rem;
  /* cible tactile confortable (recommandation Apple et Google) */
  min-height: 46px;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  background: var(--background);
  color: var(--foreground);
  width: 100%;
}
.form-field textarea { resize: vertical; min-height: 90px; }

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  border-color: transparent;
}

.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea { border-color: var(--destructive); }
.form-field.has-error label,
.form-field.has-error .label { color: var(--destructive); }

.field-error {
  font-size: 0.75rem;
  color: var(--destructive);
  min-height: 0;
  display: none;
}
.form-field.has-error .field-error { display: block; }

.budget-options {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
@media (min-width: 640px) { .budget-options { flex-direction: row; } }

.budget-option {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.budget-option:hover { border-color: var(--muted-foreground); }
.budget-option:has(input:checked) {
  border-color: var(--primary);
  background: hsla(241, 97%, 46%, 0.05);
}
.budget-option input {
  accent-color: var(--primary);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
}
.budget-option span { white-space: nowrap; }

.form-global-error {
  color: var(--destructive);
  font-size: 0.875rem;
  text-align: center;
}

.btn-submit { width: 100%; border-radius: var(--radius); }
.btn-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.form-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  padding: 3rem 1rem;
}
/* L'attribut hidden doit toujours gagner sur display:flex */
.form-success[hidden],
#lead-form[hidden] { display: none; }
.success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: hsla(241, 97%, 46%, 0.1);
  color: var(--primary);
  font-size: 2rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.form-success-title { font-size: 1.5rem; font-weight: 700; color: var(--foreground); }
.form-success p { color: var(--muted-foreground); }

.contact-reassurance {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.5rem;
  margin-top: 2rem;
}
.contact-reassurance li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}
.contact-reassurance svg {
  width: 15px;
  height: 15px;
  color: #3ddc97;
  flex-shrink: 0;
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { background: var(--background); }

.faq h2 { margin-bottom: 2.5rem; }

.accordion { display: flex; flex-direction: column; gap: 1rem; }

.accordion-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  padding: 0 1.5rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.accordion-item:hover { border-color: hsla(241, 97%, 46%, 0.35); }
.accordion-item[open] {
  border-color: var(--primary);
  box-shadow: 0 10px 28px rgba(7, 4, 231, 0.08);
}

.accordion-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  font-weight: 600;
  padding: 1.35rem 0;
  list-style: none;
  font-size: 0.98rem;
  transition: color 0.15s ease;
}
.accordion-item summary::-webkit-details-marker { display: none; }

/* Chevron dans une pastille, comme les autres icones du site */
.accordion-item summary::after {
  content: "";
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 0.55rem;
  background: hsla(241, 97%, 46%, 0.08)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230704e7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / 15px no-repeat;
  transition: transform 0.2s ease;
}
.accordion-item[open] summary::after { transform: rotate(180deg); }
.accordion-item summary:hover { color: var(--primary); }
.accordion-item[open] summary { color: var(--primary); }

.accordion-item p {
  color: var(--muted-foreground);
  font-size: 0.92rem;
  line-height: 1.6;
  padding-top: 1.1rem;
  padding-bottom: 1.4rem;
  border-top: 1px solid var(--border);
}

/* ==========================================================================
   À PROPOS
   ========================================================================== */
.about { background: var(--muted); }

.about .kicker { margin-bottom: 0.5rem; }
.about h2 { margin-bottom: 3rem; }

.about-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  max-width: 1000px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1.5rem;
  padding: 2rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.08);
}
@media (min-width: 900px) {
  .about-card {
    grid-template-columns: 300px 1fr;
    gap: 3rem;
    padding: 2.75rem;
    align-items: center;
  }
}

/* Colonne photo */
.about-photo-col {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
@media (min-width: 900px) { .about-photo-col { display: block; } }
.about-photo-frame {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}
.about-photo-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, transparent 55%, rgba(7, 4, 231, 0.12));
  z-index: 1;
}
.about-photo {
  width: min(300px, 80vw);
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}
.about-stat {
  background: #fff;
  color: var(--primary);
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  padding: 0.7rem 1.1rem;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
  text-align: center;
}
@media (min-width: 900px) {
  .about-stat {
    position: absolute;
    bottom: -18px;
    right: -18px;
  }
}
.about-stat-num { display: block; font-size: 1.4rem; font-weight: 800; line-height: 1; color: var(--primary); }
.about-stat-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--foreground);
  margin-top: 0.3rem;
}
@media (min-width: 900px) { .about-stat-label { max-width: 150px; } }

/* Colonne texte */
.about-text { text-align: center; }
@media (min-width: 900px) { .about-text { text-align: left; } }

.about-text h3 {
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  margin-bottom: 0.3rem;
}
.about-wave { display: inline-block; }
/* Sous-titre : meme traitement que le nom, en plus petit.
   Selecteur renforce pour passer devant la regle generale des paragraphes. */
.about-text > .about-role {
  color: var(--foreground);
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 1.35rem;
}

/* Corps de texte homogene : un seul poids, pour eviter l'effet de pave */
.about-text > p {
  font-size: 0.97rem;
  line-height: 1.65;
  margin-bottom: 1rem;
  color: var(--muted-foreground);
}

/* Seule phrase mise en avant du bloc */
/* Bouton remonte, sans filet de separation au-dessus */
.about-cta { margin-top: 1.5rem; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  background: var(--foreground);
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  padding: 2.5rem 0;
  font-size: 0.85rem;
}
.fb-disclaimer {
  margin-top: 1rem;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.45);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   CTA STICKY MOBILE
   ========================================================================== */
.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
  background: #fff;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
  z-index: 50;
  transform: translateY(110%);
  transition: transform 0.25s ease;
}
.sticky-cta.visible { transform: translateY(0); }
.sticky-cta .btn { width: 100%; border-radius: var(--radius); }

@media (min-width: 768px) {
  .sticky-cta { display: none; }
}