/* ==========================================================================
   Styles principaux — Puply Website
   Organisation : Base → Layout → Header → Hero → Sections placeholder → Footer
   ========================================================================== */


/* --------------------------------------------------------------------------
   BASE
   -------------------------------------------------------------------------- */

body {
  font-family: var(--font-corps);
  font-size: var(--fs-body);
  color: var(--color-texte);
  background-color: var(--color-fond);
}

h1, h2, h3 {
  font-family: var(--font-titre);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-texte);
}

p {
  font-family: var(--font-corps);
  line-height: 1.65;
}


/* --------------------------------------------------------------------------
   LAYOUT — Conteneur centré réutilisable
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}


/* --------------------------------------------------------------------------
   HEADER & NAVIGATION
   -------------------------------------------------------------------------- */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: var(--color-fond);
  border-bottom: 1px solid var(--color-bordure);
  transition: box-shadow var(--transition-base);
}

/* Ombre portée après scroll */
.header.scrolled {
  box-shadow: 0 2px 12px rgba(63, 65, 78, 0.08);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

/* Logo */
.nav__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.nav__logo img {
  height: 36px;
  width: auto;
}

/* Liens de navigation — masqués sur mobile */
.nav__links {
  display: none;
  gap: var(--space-lg);
  align-items: center;
}

.nav__links a {
  font-family: var(--font-corps);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--color-texte);
  transition: color var(--transition-base);
}

.nav__links a:hover {
  color: var(--color-turquoise);
}

/* CTA dans la nav */
.nav__cta {
  display: none;
}

/* Variante CTA nav — plus discret que le CTA hero, touch target 44px mini */
.btn--nav {
  font-size: 0.875rem;   /* 14px vs 16px du btn standard */
  padding: 0.625rem 1.25rem;
  min-height: 44px;       /* WCAG 2.5.5 touch target */
  box-shadow: none;
}

.btn--nav:hover {
  box-shadow: var(--shadow-cta);
}

/* Bouton burger — visible sur mobile */
.nav__burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  padding: 4px;
  background: none;
  border: none;
  cursor: pointer;
}

.nav__burger span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-texte);
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

/* État ouvert du burger */
.nav__burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav__burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav__burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Menu mobile déroulant */
.nav__mobile-menu {
  display: none;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md) var(--container-gutter) var(--space-lg);
  border-top: 1px solid var(--color-bordure);
  background-color: var(--color-fond);
}

.nav__mobile-menu.is-open {
  display: flex;
}

.nav__mobile-menu a {
  font-family: var(--font-corps);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--color-texte);
  padding-block: var(--space-xs);
  transition: color var(--transition-base);
}

.nav__mobile-menu a:hover {
  color: var(--color-turquoise);
}

.nav__mobile-menu .btn {
  margin-top: var(--space-xs);
  text-align: center;
  width: 100%;
  min-height: 54px;
  padding: 0.875rem 1.25rem;
  line-height: 1.25;
  white-space: normal;
}

.nav__mobile-menu .btn--primary {
  color: var(--color-blanc);
  background-color: var(--color-turquoise);
  box-shadow: var(--shadow-cta);
}

.nav__mobile-menu .btn--primary:hover {
  color: var(--color-blanc);
  background-color: var(--color-turquoise-hover);
}

/* Desktop : affichage des liens et masquage du burger */
@media (min-width: 768px) {
  .nav__logo img {
    height: 44px;
  }

  .nav__links {
    display: flex;
  }

  .nav__cta {
    display: block;
  }

  .nav__burger {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   BOUTONS — Système de CTA réutilisable
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-corps);
  font-weight: 700;
  font-size: var(--fs-body);
  border-radius: var(--radius-pill);
  padding: 0.75rem 1.75rem;
  transition: background-color var(--transition-base),
              color var(--transition-base),
              box-shadow var(--transition-base),
              transform var(--transition-base);
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

/* Focus clavier — visible sur tous les CTA */
.btn:focus-visible {
  outline: 2.5px solid var(--color-turquoise);
  outline-offset: 3px;
}

/* CTA principal — fond turquoise */
.btn--primary {
  background-color: var(--color-turquoise);
  color: var(--color-blanc);
  box-shadow: var(--shadow-cta);
}

.btn--primary:hover {
  background-color: var(--color-turquoise-hover);
  box-shadow: 0 6px 24px rgba(121, 197, 182, 0.45);
}

/* CTA secondaire — contour turquoise */
.btn--secondary {
  background-color: transparent;
  color: var(--color-texte);
  border: 2px solid var(--color-turquoise);
}

.btn--secondary:hover {
  background-color: rgba(121, 197, 182, 0.08);
}

/* Variante pleine largeur (mobile) */
.btn--full {
  width: 100%;
}

/* Variante CTA avec flèche directionnelle (hero, questionnaire) */
.btn--with-arrow {
  gap: 0.55rem;
}

.btn--with-arrow .btn__arrow {
  transition: transform var(--transition-base);
}

.btn--with-arrow:hover .btn__arrow {
  transform: translateX(3px);
}


/* --------------------------------------------------------------------------
   FOCUS CLAVIER GLOBAL — Accessibilité WCAG 2.4.7
   Indique visiblement la cible du focus pour tous les éléments interactifs.
   -------------------------------------------------------------------------- */

.nav__links a:focus-visible,
.nav__mobile-menu a:focus-visible,
.footer__links a:focus-visible,
.nav__logo:focus-visible,
.home-next-card:focus-visible,
.faq-item summary:focus-visible {
  outline: 2.5px solid var(--color-turquoise);
  outline-offset: 3px;
  border-radius: 4px;
}

.nav__burger:focus-visible {
  outline: 2.5px solid var(--color-turquoise);
  outline-offset: 4px;
}


/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  /* Compense la hauteur du header fixe */
  padding-top: calc(64px + var(--space-lg));
  /* Padding bas à 0 : la vague de fin colle directement, pas de gap crème */
  padding-bottom: 0;
  overflow: hidden;
}

/* Vague de fin de hero — transition douce vers .services */
.hero-end-wave {
  display: block;
  width: 100%;
  height: 32px;
  margin: 0;
  margin-top: var(--space-md);
}

@media (min-width: 768px) {
  .hero-end-wave {
    height: 60px;
    margin-top: var(--space-lg);
  }
}

/* Halos décoratifs derrière l'illustration (Figma : 2 spots flous) */
.hero::before,
.hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  opacity: 0.7;
  filter: blur(64px);
  pointer-events: none;
  z-index: 0;
}

/* Halo top-right — mint pâle (Figma #E8F5F1) */
.hero::before {
  width: 160px;
  height: 160px;
  background: #E8F5F1;
  top: 32%;
  right: -8%;
}

/* Halo bottom — pêche poudrée (Figma #F3DDD6) */
.hero::after {
  width: 140px;
  height: 140px;
  background: #F3DDD6;
  top: 68%;
  left: -8%;
}

/* Le contenu reste au-dessus des halos */
.hero > .container {
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .hero::before {
    width: 224px;
    height: 224px;
    top: 18%;
    right: 4%;
    left: auto;
  }

  .hero::after {
    width: 192px;
    height: 192px;
    top: 55%;
    right: 28%;
    left: auto;
  }
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

/* Bloc texte */
.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
  max-width: 640px;
}

/* Sur-ligne expertise — au-dessus du H1 — gris-bleu foncé Figma */
.hero__overline {
  font-family: var(--font-corps);
  font-size: 0.75rem;       /* 12px mobile */
  font-weight: 500;
  letter-spacing: 2px;       /* Renforce l'effet majuscules */
  text-transform: uppercase;
  text-align: center;
  color: #6B6E7D;
  margin-bottom: var(--space-xs);
}

/* Desktop : alignée à gauche comme le reste du hero */
@media (min-width: 768px) {
  .hero__overline {
    font-size: 0.8125rem;   /* 13px desktop */
    text-align: left;
  }
}

/* H1 — Dongle Bold, noir presque pur (#1E1E1E) avec accent turquoise */
.hero__title {
  /* 64px mobile fixe pour que le H1 domine le hero */
  font-size: 4rem;
  font-weight: 700;
  line-height: 0.85;
  color: #1E1E1E;
}

@media (min-width: 768px) {
  .hero__title {
    /* Reprend le clamp global sur desktop (jusqu'à 72px) */
    font-size: var(--fs-h1);
  }
}

.hero__title .accent {
  color: var(--color-turquoise);
}

/* Sous-titre */
.hero__subtitle {
  font-size: var(--fs-body-lg);
  font-weight: 400;
  color: var(--color-texte-leger);
  max-width: 520px;
  line-height: 1.7;
}

/* Groupe de CTA */
.hero__cta-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 100%;
  max-width: 360px;
}

/* Boutons pleine largeur sur mobile (layout vertical) */
.hero__cta-group .btn {
  width: 100%;
}

/* Badge de réassurance — mention sous les CTA */
.hero__badge {
  font-size: 0.875rem;       /* 14px */
  font-weight: 400;
  color: var(--color-texte-leger);
  letter-spacing: 0.02em;
}

/* Illustration */
.hero__illustration {
  width: 100%;
  /* Limité sur mobile pour ne pas écraser le texte */
  max-width: 280px;
}

.hero__illustration img {
  width: 100%;
  height: auto;
}

/* Desktop : layout côte à côte */
@media (min-width: 768px) {
  .hero {
    /* Padding-bottom 0 : la vague de fin colle directement à la section Services */
    padding-top: calc(64px + var(--space-xl));
    padding-bottom: 0;
  }

  .hero__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
  }

  .hero__content {
    align-items: flex-start;
    text-align: left;
    gap: var(--space-md);
    flex: 1;
  }

  .hero__cta-group {
    flex-direction: row;
    width: auto;
    max-width: none;
  }

  /* Remet la largeur naturelle sur desktop (layout horizontal) */
  .hero__cta-group .btn {
    width: auto;
  }

  .hero__illustration {
    flex-shrink: 0;
    max-width: 460px;
  }
}

@media (min-width: 1024px) {
  .hero__illustration {
    max-width: 520px;
  }
}


/* --------------------------------------------------------------------------
   SECTIONS COMMUNES — Titres et introductions réutilisables
   -------------------------------------------------------------------------- */

.section-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}

.section-intro::before {
  content: '';
  display: block;
  width: 48px;
  height: 2px;
  background: rgba(121, 197, 182, 0.5);
  border-radius: 1px;
  margin-bottom: var(--space-xs);
}

.section-label {
  font-family: var(--font-corps);   /* Roboto */
  font-size: 0.8125rem;              /* 13px (Figma) */
  font-weight: 500;                  /* Roboto Medium */
  color: #6B6E7D;                    /* gris-bleu foncé (Figma confirmé) */
  letter-spacing: 2px;
  text-transform: uppercase;
}

.section-title {
  font-size: clamp(1.75rem, 5vw, 3rem);
  color: var(--color-texte);
  max-width: 720px;
  line-height: 0.9;
}

.section-subtitle {
  font-size: var(--fs-body-lg);
  color: var(--color-texte-leger);
  max-width: 680px;
  line-height: 1.7;
}


/* --------------------------------------------------------------------------
   SERVICES — Phase 1B v3
   -------------------------------------------------------------------------- */

.services {
  /* Pas de border-top : transition fluide depuis le hero sur le même fond crème */
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-sm);   /* Compression mockups → fonctionnalités (mobile) */
}

@media (min-width: 768px) {
  .services {
    padding-bottom: var(--space-lg);  /* Compression mockups → fonctionnalités (desktop) */
  }
}

/* Introduction */
.services__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}

/* Séparateur fin au-dessus du label — entrée visuelle de section */
.services__intro::before {
  content: '';
  display: block;
  width: 48px;
  height: 2px;
  background: rgba(121, 197, 182, 0.5);
  border-radius: 1px;
  margin-bottom: var(--space-xs);
}

.services__label {
  font-family: var(--font-corps);
  font-size: 0.8125rem;
  font-weight: 500;
  color: #6B6E7D;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.services__title {
  font-size: clamp(1.75rem, 5vw, 3rem);
  color: var(--color-texte);
  max-width: 600px;
}

.services__subtitle {
  font-size: var(--fs-body-lg);
  color: var(--color-texte-leger);
  max-width: 100%;
  line-height: 1.7;
}

@media (min-width: 768px) {
  .services__subtitle {
    max-width: 560px;
  }
}


/* --- Galerie mockups — fond crème uni (vague décorative supprimée, fidèle Figma) --- */
.mockup-gallery {
  position: relative;
  margin-top: var(--space-xl);
  margin-bottom: 0;
  padding-top: var(--space-xl);
  padding-bottom: 0;
}

/* MOBILE : scroll horizontal snap */
.mockup-gallery__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: var(--space-md);
  /* Bord à bord dans le container */
  margin-inline: calc(-1 * var(--container-gutter));
  padding-inline: var(--container-gutter);
  padding-bottom: var(--space-sm);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.mockup-gallery__inner::-webkit-scrollbar {
  display: none;
}

/* Chaque mockup = un slide (image + pilule label) */
.mockup-gallery__item {
  flex-shrink: 0;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;                 /* reset figure */
}

/* Parcours (centre) en premier sur mobile */
.mockup-gallery__item--center { order: -1; }
.mockup-gallery__item--left   { order:  0; }
.mockup-gallery__item--right  { order:  1; }

.mockup-gallery__item img {
  display: block;
  height: 340px;
  width: auto;
}

/* Légende italique sous les 3 mockups — fidèle Figma (6740:7615) */
.mockup-gallery__caption {
  text-align: center;
  font-family: var(--font-corps);
  font-size: 0.85rem;          /* 13.6px Figma */
  font-style: italic;
  color: #6B6E7D;              /* gris-bleu foncé Figma */
  margin-top: var(--space-md);
}

/* DESKTOP : 3 mockups côte à côte avec rotations */
@media (min-width: 768px) {
  .mockup-gallery {
    padding-top: var(--space-2xl);
    padding-bottom: 0;
  }

  .mockup-gallery__inner {
    overflow-x: visible;
    scroll-snap-type: none;
    margin-inline: 0;
    justify-content: center;
    align-items: flex-end;
    gap: 0;
    padding-inline: 0;
  }

  .mockup-gallery__item--center,
  .mockup-gallery__item--left,
  .mockup-gallery__item--right {
    order: 0;
    scroll-snap-align: none;
  }

  .mockup-gallery__item img {
    height: 520px;
  }

  .mockup-gallery__item--left {
    transform: rotate(-6deg) translateY(-20px);
    z-index: 2;
    margin-right: -32px;
  }

  .mockup-gallery__item--center {
    position: relative;
    z-index: 4;
    transform: translateY(15px);   /* centre légèrement plus bas (Figma) */
  }

  .mockup-gallery__item--right {
    transform: rotate(6deg) translateY(-20px);
    z-index: 2;
    margin-left: -32px;
  }
}


/* --- 4 Piliers --- */
.services__pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

@media (min-width: 768px) {
  .services__pillars {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
  }
}

.pilier {
  position: relative;
  overflow: hidden;      /* Coins arrondis propres, illustration à l'intérieur */
  border-radius: 26px;
  padding: var(--space-lg);
  /* Padding-top généreux pour que l'illustration domine le haut de la carte */
  padding-top: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transition: opacity 0.6s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

/* Fonds pastel distincts */
.services__pillars .pilier:nth-child(1) {
  background: #E2EEDD;
  box-shadow: 0 4px 20px rgba(120, 167, 107, 0.13);
}
.services__pillars .pilier:nth-child(2) {
  background: #FFF4E0;
  box-shadow: 0 4px 20px rgba(253, 187, 100, 0.13);
}
.services__pillars .pilier:nth-child(3) {
  background: #E8F5F1;
  box-shadow: 0 4px 20px rgba(121, 197, 182, 0.15);
}
.services__pillars .pilier:nth-child(4) {
  background: #D9E8DF;
  box-shadow: 0 4px 20px rgba(100, 160, 130, 0.13);
}

/* Blob décoratif — positionné DANS la carte, pas de clipping nécessaire */
.pilier::before {
  content: '';
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  top: 12px;
  right: 12px;
  opacity: 0.32;
  pointer-events: none;
}

.services__pillars .pilier:nth-child(1)::before { background: #B5CFA8; }
.services__pillars .pilier:nth-child(2)::before { background: #FFDDA8; }
.services__pillars .pilier:nth-child(3)::before { background: #A8DDD1; }
.services__pillars .pilier:nth-child(4)::before { background: #A8C8B5; }

/* Stagger fade-in */
.services__pillars .pilier:nth-child(1) { transition-delay: 0s; }
.services__pillars .pilier:nth-child(2) { transition-delay: 0.1s; }
.services__pillars .pilier:nth-child(3) { transition-delay: 0.2s; }
.services__pillars .pilier:nth-child(4) { transition-delay: 0.3s; }

/* Hover souris uniquement */
@media (hover: hover) {
  .pilier:hover {
    transform: translateY(-4px);
    transition-delay: 0s;
  }
  .services__pillars .pilier:nth-child(1):hover { box-shadow: 0 10px 36px rgba(120, 167, 107, 0.25); }
  .services__pillars .pilier:nth-child(2):hover { box-shadow: 0 10px 36px rgba(253, 187, 100, 0.25); }
  .services__pillars .pilier:nth-child(3):hover { box-shadow: 0 10px 36px rgba(121, 197, 182, 0.28); }
  .services__pillars .pilier:nth-child(4):hover { box-shadow: 0 10px 36px rgba(100, 160, 130, 0.25); }
}

/* Illustration — grande, centrée en haut de carte, sans débordement */
.pilier__illu {
  width: 200px;
  height: 200px;
  align-self: center;
  /* Margin négatif léger pour remonter l'illustration vers le haut de la carte
     sans la faire sortir (overflow: hidden protège les bords) */
  margin-top: calc(-1 * var(--space-md));
  margin-bottom: var(--space-xs);
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .pilier__illu {
    width: 240px;
    height: 240px;
  }
}

.pilier__illu img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Titre H3 en Dongle (charte graphique) */
.pilier__title {
  font-family: var(--font-titre);
  font-size: 2.25rem;   /* 36px mobile */
  font-weight: 700;
  color: var(--color-texte);
  line-height: 1.1;
}

@media (min-width: 768px) {
  .pilier__title {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
  }
}

.pilier__desc {
  font-size: var(--fs-body);
  color: var(--color-texte-leger);
  line-height: 1.65;
}

.pilier__bullets {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.pilier__bullets li {
  position: relative;
  padding-left: 1.25rem;
  font-size: 0.9375rem;
  color: var(--color-texte);
  line-height: 1.55;
}

.pilier__bullets li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--color-turquoise);
  font-weight: 700;
  line-height: 1.55;
}


/* --- Bridge quiz --- */
.services__bridge {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  padding: var(--space-xl) var(--space-lg) 0;
  background:
    linear-gradient(135deg, rgba(121, 197, 182, 0.17) 0%, rgba(255, 244, 224, 0.92) 100%);
  border: 1.5px solid rgba(121, 197, 182, 0.28);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
}

.services__bridge::before {
  content: '';
  position: absolute;
  inset: auto -12% -18% -12%;
  height: 44%;
  background: rgba(255, 255, 255, 0.46);
  border-radius: 54% 46% 0 0 / 36% 40% 0 0;
  pointer-events: none;
}

.services__bridge-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
}

.services__bridge-kicker {
  font-family: var(--font-corps);
  font-size: var(--fs-small);
  font-weight: 700;
  color: #6B6E7D;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.services__bridge-title {
  font-size: var(--fs-h2);
  color: var(--color-texte);
  max-width: 620px;
  line-height: 0.8;
}

.services__bridge-subtitle {
  font-size: var(--fs-body-lg);
  color: var(--color-texte-leger);
  max-width: 580px;
  line-height: 1.65;
}

.services__bridge-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

.services__bridge-visual {
  position: relative;
  z-index: 1;
  min-height: 280px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.services__bridge-shape {
  position: absolute;
  left: 50%;
  bottom: -12px;
  width: min(92%, 390px);
  aspect-ratio: 1.18 / 1;
  transform: translateX(-50%);
  background: #79C5B6;
  border-radius: 48% 52% 18% 18% / 58% 58% 26% 26%;
  opacity: 0.26;
}

.services__bridge-dog {
  position: relative;
  z-index: 2;
  width: min(88%, 340px);
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 28px rgba(63, 65, 78, 0.16));
}

.services__bridge-chip {
  position: absolute;
  z-index: 3;
  max-width: 180px;
  padding: 0.55rem 0.8rem;
  border: 1px solid rgba(121, 197, 182, 0.32);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-card);
  color: var(--color-texte);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.services__bridge-chip--top {
  top: 28px;
  right: 4%;
}

.services__bridge-chip--bottom {
  left: 4%;
  bottom: 44px;
}

@media (min-width: 768px) {
  .services__bridge {
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
    align-items: center;
    padding: var(--space-xl) var(--space-xl) 0;
  }

  .services__bridge::before {
    inset: -20% auto -20% 46%;
    width: 68%;
    height: auto;
    border-radius: 45% 0 0 55% / 42% 0 0 58%;
  }

  .services__bridge-content {
    align-items: flex-start;
    text-align: left;
    padding-bottom: var(--space-xl);
  }

  .services__bridge-actions {
    align-items: flex-start;
  }

  .services__bridge-visual {
    min-height: 360px;
  }

  .services__bridge-shape {
    width: min(92%, 430px);
  }

  .services__bridge-dog {
    width: min(96%, 390px);
  }

  .services__bridge-chip--top {
    top: 50px;
    right: 0;
  }

  .services__bridge-chip--bottom {
    left: 0;
    bottom: 78px;
  }
}


/* --------------------------------------------------------------------------
   PARTENARIATS
   -------------------------------------------------------------------------- */

.partnerships {
  padding-block: var(--space-2xl);
  border-top: 1px solid var(--color-bordure);
}

.partnerships__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.partnership-card {
  background: var(--color-blanc);
  border: 1px solid var(--color-bordure);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

.partnership-card--b2b {
  background: #E8F5F1;
}

.partnership-card--affiliate {
  background: #FFF4E0;
}

.partnership-card__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.partnership-card__tag {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--color-texte-leger);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.partnership-card__title {
  font-size: clamp(2rem, 5vw, 2.75rem);
  line-height: 0.9;
}

.partnership-card__text {
  color: var(--color-texte-leger);
  font-size: var(--fs-body-lg);
}

.partnership-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.partnership-card__list li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--color-texte);
  line-height: 1.55;
}

.partnership-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-turquoise);
}

.partnerships__proof {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.proof-item {
  border-top: 1px solid var(--color-bordure);
  padding-top: var(--space-md);
  display: flex;
  gap: var(--space-sm);
}

.proof-item__number {
  flex-shrink: 0;
  font-family: var(--font-titre);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-orange);
  line-height: 0.9;
}

.proof-item__text {
  color: var(--color-texte);
  font-size: 0.9375rem;
  line-height: 1.6;
}

@media (min-width: 768px) {
  .partnerships__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
  }

  .partnership-card {
    min-height: 100%;
  }

  .partnership-card .btn {
    margin-top: auto;
  }

  .partnerships__proof {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
  }
}


/* --------------------------------------------------------------------------
   ÉQUIPE
   -------------------------------------------------------------------------- */

.team {
  padding-block: var(--space-2xl);
  border-top: 1px solid var(--color-bordure);
}

.team__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.team-card {
  background: var(--color-blanc);
  border: 1px solid var(--color-bordure);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.team-card__role {
  font-size: var(--fs-small);
  font-weight: 700;
  color: #6B6E7D;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.team-card__title {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  line-height: 0.95;
}

.team-card__text {
  color: var(--color-texte-leger);
}

@media (min-width: 768px) {
  .team__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* --------------------------------------------------------------------------
   CONTACT
   -------------------------------------------------------------------------- */

.contact {
  padding-block: var(--space-2xl);
  border-top: 1px solid var(--color-bordure);
}

.contact__intro {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.contact-form {
  background: var(--color-blanc);
  border: 1px solid var(--color-bordure);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 640px;
  margin-inline: auto;
}

.contact-form__honeypot {
  display: none;
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}

@media (min-width: 640px) {
  .contact-form__row {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.contact-form__field label {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--color-texte);
}

.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {
  width: 100%;
  border: 1.5px solid var(--color-bordure);
  border-radius: var(--radius-sm);
  background: var(--color-fond);
  color: var(--color-texte);
  font-family: var(--font-corps);
  font-size: var(--fs-body);
  padding: 0.875rem 1rem;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.contact-form__field textarea {
  resize: vertical;
  min-height: 140px;
}

.contact-form__field input:focus-visible,
.contact-form__field select:focus-visible,
.contact-form__field textarea:focus-visible {
  outline: 2.5px solid var(--color-turquoise);
  outline-offset: 1px;
  border-color: var(--color-turquoise);
  box-shadow: none;
}

.contact-form .btn {
  border: 0;
  cursor: pointer;
}

.contact-form__note {
  font-size: var(--fs-small);
  color: var(--color-texte-leger);
  text-align: center;
  line-height: 1.5;
}

/* --- Page de confirmation --- */
.success-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-fond);
  padding: var(--space-xl) var(--container-gutter);
}

.success-page__container {
  text-align: center;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.success-page__title {
  font-family: var(--font-titre);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 700;
  color: var(--color-texte);
  line-height: 0.9;
}

.success-page__text {
  font-size: var(--fs-body-lg);
  color: var(--color-texte-leger);
  line-height: 1.6;
}


/* --------------------------------------------------------------------------
   PAGES DÉDIÉES — Layout commun
   -------------------------------------------------------------------------- */

.page-hero {
  padding-top: calc(64px + var(--space-xl));
  padding-bottom: var(--space-xl);
  overflow: hidden;
}

.page-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: center;
}

.page-hero__inner--center {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}

.page-hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.page-hero__inner--center .page-hero__content {
  align-items: center;
}

.page-hero__title {
  font-size: 3rem;
  line-height: 0.86;
  max-width: 760px;
}

.page-hero__text {
  font-size: var(--fs-body-lg);
  color: var(--color-texte-leger);
  max-width: 640px;
}

.page-hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
}

.page-hero__inner--center .page-hero__actions {
  align-items: center;
}

.page-hero__visual {
  position: relative;
  min-height: 300px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.page-hero__shape {
  position: absolute;
  width: min(88%, 420px);
  aspect-ratio: 1.15 / 1;
  border-radius: 48% 52% 20% 20% / 58% 58% 24% 24%;
  background: rgba(121, 197, 182, 0.24);
  bottom: 0;
}

.page-hero__visual img {
  position: relative;
  z-index: 1;
  width: min(90%, 380px);
  height: auto;
  filter: drop-shadow(0 18px 28px rgba(63, 65, 78, 0.16));
}

.page-section {
  padding-block: var(--space-2xl);
  border-top: 1px solid var(--color-bordure);
}

.page-section--soft {
  background: rgba(255, 255, 255, 0.35);
}

.info-grid,
.audience-grid,
.home-next__grid,
.founders-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.info-card,
.audience-card,
.home-next-card,
.founder-card,
.faq-item,
.page-cta__inner {
  background: var(--color-blanc);
  border: 1px solid var(--color-bordure);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.info-card,
.audience-card,
.home-next-card {
  padding: var(--space-lg);
}

.info-card__number,
.home-next-card__label,
.founder-card__role {
  font-size: var(--fs-small);
  font-weight: 700;
  color: #6B6E7D;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.info-card__title,
.audience-card__title,
.home-next-card__title {
  font-family: var(--font-titre);
  font-size: 2rem;
  font-weight: 700;
  line-height: 0.95;
  color: var(--color-texte);
  margin-top: var(--space-xs);
}

.info-card__text,
.audience-card p,
.home-next-card__text,
.founder-card p,
.faq-item p {
  color: var(--color-texte-leger);
}

.home-next {
  padding-block: var(--space-2xl);
  border-top: 1px solid var(--color-bordure);
}

.home-next-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  color: var(--color-texte);
  transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}

@media (hover: hover) {
  .home-next-card:hover {
    border-color: var(--color-turquoise);
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(63, 65, 78, 0.1);
  }
}

.audience-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 820px;
  margin-inline: auto;
}

.faq-item {
  padding: var(--space-md);
}

.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--color-texte);
}

.faq-item p {
  margin-top: var(--space-sm);
}

.founder-card {
  overflow: hidden;
}

.founder-card__photo {
  aspect-ratio: 4 / 3;
  background: #E8F5F1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-titre);
  font-size: 4rem;
  font-weight: 700;
  color: var(--color-turquoise);
}

.founder-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.founder-card__body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.founder-card__name {
  font-size: 2.25rem;
  line-height: 0.9;
}

.page-cta {
  padding-block: var(--space-2xl);
}

.page-cta__inner {
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  background: #E2EEDD;
}

.page-cta__title {
  font-size: 2.5rem;
  line-height: 0.9;
  max-width: 640px;
}

/* Groupe de boutons du bloc CTA — côte à côte, repli en colonne sur mobile */
.page-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}

@media (min-width: 768px) {
  .page-hero__inner {
    grid-template-columns: 1fr 0.8fr;
  }

  .page-hero__inner--center {
    display: block;
  }

  .page-hero__title {
    font-size: 4rem;
  }

  .page-hero__visual {
    min-height: 380px;
  }

  .info-grid--3,
  .home-next__grid,
  .founders-grid {
    grid-template-columns: repeat(3, 1fr);
  }

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

  .page-cta__title {
    font-size: 3rem;
  }
}


/* --- Animations fade-in au scroll --- */

.fade-in {
  opacity: 1;
  transform: none;
}

.js-ready .fade-in {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js-ready .fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js-ready .fade-in,
  .js-ready .fade-in.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

.footer {
  background-color: var(--color-blanc);
  border-top: 1px solid var(--color-bordure);
  padding-block: var(--space-lg);
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
}

.footer__logo img {
  height: 32px;
  width: auto;
  margin-inline: auto;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
}

.footer__links a {
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--color-texte-leger);
  transition: color var(--transition-base);
}

.footer__links a:hover {
  color: var(--color-turquoise);
}

.footer__copy {
  font-size: var(--fs-small);
  color: var(--color-texte-leger);
}

@media (min-width: 768px) {
  .footer__inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }

  .footer__logo img {
    margin-inline: 0;
  }
}


/* ==========================================================================
   REFONTE HOME — Section "Fonctionnalités" (4 cartes pastel 2×2)
   ========================================================================== */

.features {
  padding-top: var(--space-lg);       /* Compression mockups → fonctionnalités (mobile) */
  padding-bottom: 28px;                /* Compression fonctionnalités → quiz (mobile) */
}

@media (min-width: 768px) {
  .features {
    padding-top: var(--space-xl);     /* Compression mockups → fonctionnalités (desktop) */
    padding-bottom: 48px;              /* Compression fonctionnalités → quiz (desktop) */
  }
}

.features__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .features__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
  }
}

/* Carte — fond pastel, hauteur uniforme, illustration flush à gauche (Figma 6740:7624) */
.feature-card {
  position: relative;
  border-radius: 24px;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  overflow: hidden;        /* L'illu remplit, dépassements clippés par les rounded corners */
}

@media (min-width: 600px) {
  /* Tablette et desktop : illu colle au bord gauche, contenu padded à droite, hauteur uniforme */
  .feature-card {
    flex-direction: row;
    align-items: stretch;       /* illu remplit toute la hauteur de la carte */
    text-align: left;
    gap: 0;
    padding: 0 32px 0 0;        /* pas de padding gauche : illu flush */
    min-height: 340px;          /* hauteur uniforme entre les 4 cartes (Figma 343.35) */
  }
}

@media (hover: hover) {
  .feature-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.08);
  }
}

/* Pastels — 4 variantes (tokens définis dans variables.css) */
.feature-card--vert  { background: var(--color-pastel-vert); }
.feature-card--bleu  { background: var(--color-pastel-bleu); }
.feature-card--peche { background: var(--color-pastel-peche); }
.feature-card--jaune { background: var(--color-pastel-jaune); }

/* Zone illustration uniforme — taille fixe, l'image remplit au maximum la zone gauche */
.feature-card__illu {
  flex-shrink: 0;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 600px) {
  .feature-card__illu {
    width: 210px;             /* zone gauche fixe (Figma ~160-200px réservés) */
    height: 100%;             /* remplit toute la hauteur de la carte (340px) */
    align-self: stretch;
  }
}

.feature-card__illu img {
  width: 100%;
  height: 100%;
  object-fit: contain;        /* l'image grossit au max tout en gardant son ratio */
  transform: scale(var(--illu-scale, 1));
}

/* Ajustements visuels par carte — équilibre des présences visuelles */
.feature-card--vert  { --illu-scale: 1.08; }   /* Parcours +8% */
.feature-card--bleu  { --illu-scale: 0.88; }   /* Carnet -12% (paraissait trop gros) */
.feature-card--jaune { --illu-scale: 1.08; }   /* Messagerie +8% */
/* Bibliothèque (peche) reste à scale 1 (référence) */

.feature-card__illu img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.feature-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);             /* 16px uniforme : titre→desc→bullets */
  flex: 1;
  min-width: 0;
}

@media (min-width: 600px) {
  .feature-card__body {
    /* Top-aligned (Figma : titres tous à top=36px) — pas de justify-content:center */
    padding-block: 36px;
  }
}

/* Titre — Dongle Bold, plus présent (responsive 26→30px) */
.feature-card__title {
  font-family: var(--font-titre);
  font-size: clamp(1.625rem, 2.4vw, 1.875rem);   /* 26→30px */
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #1D1D1B;
}

.feature-card__desc {
  font-family: var(--font-corps);
  font-size: 0.9375rem;      /* 15px (Figma 15.2px) */
  color: #6B6E7D;            /* gris-bleu foncé Figma */
  line-height: 1.55;
}

/* Liste à puces avec coche turquoise ronde — gap 12px uniforme entre items */
.feature-card__bullets {
  display: flex;
  flex-direction: column;
  gap: 12px;                          /* gap interne bullets (Figma ~8-12px) */
  margin-top: 0;                       /* parent .feature-card__body gère via gap */
}

.feature-card__bullets li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-family: var(--font-corps);
  font-size: 0.90625rem;               /* 14.5px (Figma 14.72) */
  color: #1D1D1B;                      /* noir presque pur (Figma) */
  line-height: 1.45;
}

/* Coche turquoise circulaire — 20×20px fidèle Figma (6740:7777) */
.feature-card__check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--color-turquoise);
  position: relative;
}

.feature-card__check::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translate(-60%, -65%) rotate(45deg);
}


/* ==========================================================================
   REFONTE HOME — Section "Questionnaire" (bridge vers le quiz)
   ========================================================================== */

.questionnaire {
  /* Section compacte : moins de respiration verticale autour de la carte */
  padding-block: 28px var(--space-xl);
}

@media (min-width: 768px) {
  .questionnaire {
    padding-block: 40px var(--space-xl);
  }
}

.questionnaire__bridge {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;            /* mobile : empilé */
  background: #E8F5F1;                    /* Figma — mint pâle uniforme */
  border-radius: 32px;
}

/* Accents décoratifs sur la carte quiz — cercles cream subtils qui débordent
   (clippés par overflow:hidden) — remplacent l'ancien blob jugé "bizarre" */
.questionnaire__bridge::before,
.questionnaire__bridge::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: #FFF8ED;
  pointer-events: none;
  z-index: 0;
}

.questionnaire__bridge::before {
  width: 120px;
  height: 120px;
  top: 8%;
  right: -40px;
  opacity: 0.55;
}

.questionnaire__bridge::after {
  width: 60px;
  height: 60px;
  top: 32%;
  left: -20px;
  opacity: 0.45;
}

@media (min-width: 768px) {
  .questionnaire__bridge::before {
    width: 180px;
    height: 180px;
    top: -40px;
    right: -60px;
    opacity: 0.65;
  }

  .questionnaire__bridge::after {
    width: 100px;
    height: 100px;
    top: auto;
    bottom: -30px;
    left: 38%;
    opacity: 0.5;
  }
}

.questionnaire__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-md);   /* mobile : compact (40px / 24px) */
}

.questionnaire__kicker {
  margin-bottom: 0;
}

/* Titre carte quiz — Dongle Bold agrandi pour plus d'impact */
.questionnaire .section-title {
  font-size: clamp(1.875rem, 4vw, 2.5rem);   /* 30→40px responsive */
  color: #1D1D1B;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.questionnaire__desc {
  font-size: var(--fs-body-lg);
  color: var(--color-texte-leger);
  max-width: 580px;
  line-height: 1.65;
}

/* Visuel — photo golden ENTIÈREMENT visible + badges flottants */
.questionnaire__visual {
  position: relative;
  z-index: 1;
}

.questionnaire__shape {
  display: none;
}

.questionnaire__photo {
  display: block;
  width: 100%;
  height: auto;            /* mobile : aspect ratio natif (440×389), pas de crop */
}

/* Badges blancs flottants — fidèle Figma : rounded 16px, sans rotation, icon-circle pastel */
.questionnaire__badge {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--color-blanc);
  border-radius: 16px;
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.08);
  color: #1D1D1B;
  font-family: var(--font-corps);
  font-size: 0.85rem;          /* 13.6px Figma */
  font-weight: 500;            /* Roboto Medium */
  line-height: 1.25;
  white-space: nowrap;
}

.questionnaire__badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1rem;
  flex-shrink: 0;
}

.questionnaire__badge--top .questionnaire__badge-icon {
  background: #F3DDD6;          /* pêche poudrée (Figma) */
}

.questionnaire__badge--bottom .questionnaire__badge-icon {
  background: #E8F5F1;          /* mint pâle (Figma) */
}

/* Badges positionnés sur la photo — top-left (rose) + bottom-middle (mint) */
.questionnaire__badge--top {
  top: 16px;
  left: 16px;
}

.questionnaire__badge--bottom {
  bottom: 24px;
  left: 30%;
}

@media (min-width: 768px) {
  .questionnaire__bridge {
    grid-template-columns: 1fr 1fr;       /* 2 colonnes égales */
    align-items: stretch;                  /* photo remplit toute la hauteur */
  }

  .questionnaire__content {
    align-items: flex-start;
    text-align: left;
    padding: var(--space-xl) var(--space-lg);   /* 64px / 40px (au lieu de 96/64) */
  }

  .questionnaire__visual {
    min-height: 380px;                     /* compact desktop */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Desktop : photo s'inscrit dans le cell, entièrement visible (object-fit:contain) */
  .questionnaire__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
  }

  .questionnaire__badge--top {
    top: 30px;
    left: 30px;
  }

  .questionnaire__badge--bottom {
    bottom: 40px;
    left: 35%;
  }
}


/* ==========================================================================
   REFONTE HOME — Section "Approfondir l'univers Puply"
   Fond beige plus foncé avec courbe SVG en haut.
   ========================================================================== */

.deeper {
  position: relative;
  background: var(--color-beige-fonce);
  /* Padding symétrique : plus de vague, transition par changement de couleur direct */
  padding-block: var(--space-2xl);
}

.deeper__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .deeper__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
  }
}

/* Carte blanche avec flèche diagonale — fidèle Figma 6740:7910/7921/7932 */
.deeper-card {
  position: relative;
  background: var(--color-blanc);
  border: 1px solid rgba(0, 0, 0, 0.05);   /* bordure subtile Figma */
  border-radius: 20px;                       /* Figma : rounded-[20px] */
  padding: 28px;                             /* Figma : top 28, left 28 */
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03); /* shadow Figma */
  color: var(--color-texte);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

@media (hover: hover) {
  .deeper-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(63, 65, 78, 0.10);
  }

  .deeper-card:hover .deeper-card__arrow {
    transform: translate(3px, -3px);
  }
}

.deeper-card__label {
  font-family: var(--font-corps);
  font-size: 0.75rem;        /* 12px */
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #6B6E7D;            /* gris-bleu foncé (Figma confirmé) */
}

.deeper-card__title {
  font-family: var(--font-titre);   /* Dongle Bold (Figma 6740:7915) */
  font-size: 1.5rem;                 /* 24px (Dongle compresse, Figma 20px ≈ 24px Dongle) */
  font-weight: 700;
  color: #1D1D1B;
  line-height: 1.1;
  letter-spacing: -0.01em;
  padding-right: 2rem;               /* Évite le chevauchement avec la flèche */
}

.deeper-card__text {
  font-family: var(--font-corps);
  font-size: 0.875rem;        /* 14px */
  color: var(--color-texte-leger);
  line-height: 1.55;
}

.deeper-card__arrow {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  color: var(--color-turquoise);
  transition: transform var(--transition-base);
}


/* Vague de transition Approfondir → Contact — fidèle Figma 6740:7943 */
.deeper-end-wave {
  position: relative;
  width: 100%;
  height: 125px;
  background: var(--color-beige-fonce);   /* beige continue de .deeper */
  overflow: hidden;
}

.deeper-end-wave__back,
.deeper-end-wave__front {
  position: absolute;
  left: 0;
  width: 100%;
  display: block;
}

/* Layer back : mint pâle (Figma Icon 6740:7944) */
.deeper-end-wave__back {
  top: 0;
  height: 72px;
}

/* Layer front : crème (Figma Icon 6740:7946) — recouvre partiellement le mint */
.deeper-end-wave__front {
  top: 68px;
  height: 57px;
}


/* ==========================================================================
   REFONTE HOME — Contact (override partiel : vague + bg inputs)
   ========================================================================== */

/* Override de la .contact existante : la vague est désormais à la fin de
   la section précédente (.deeper) et non en entrée de .contact, donc
   pas de border-top ni de padding supplémentaire. */
.contact {
  position: relative;
  border-top: none !important;
}

/* Inputs : fond crème plus chaud (#FDF1DF) — surface du formulaire de contact */
.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {
  background: var(--color-input-bg);
  border-color: transparent;
}


/* Vague de transition générique — placée en bas d'une section, fill = couleur
   de la section suivante. Bord à bord, sans gap, courbe Bézier ample asymétrique. */
.wave-divider {
  display: block;
  width: 100%;
  height: 50px;
  margin: 0;
}

@media (min-width: 768px) {
  .wave-divider {
    height: 100px;
  }
}


/* ==========================================================================
   REFONTE HOME — Footer 4 colonnes + bordures pointillées
   (Coexistent avec l'ancien footer simple utilisé par les autres pages.
    :has() cible uniquement le footer 4 cols pour ne pas modifier les autres pages.)
   ========================================================================== */

.footer:has(.footer__cols) {
  border-top: 1px dashed rgba(121, 197, 182, 0.45);
  border-bottom: 1px dashed rgba(121, 197, 182, 0.45);
}

.footer__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  padding-block: var(--space-md);
}

@media (min-width: 768px) {
  .footer__cols {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--space-xl);
    align-items: start;
  }
}

.footer__col--brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer__col .footer__logo,
.footer__col--brand .footer__logo {
  display: inline-block;
}

.footer__col--brand .footer__logo img {
  height: 36px;
  width: auto;
}

.footer__tagline {
  font-family: var(--font-corps);
  font-size: 0.875rem;
  color: var(--color-texte-leger);
  line-height: 1.55;
  max-width: 280px;
}

/* Titre de colonne footer */
.footer__title {
  font-family: var(--font-corps);
  font-size: 0.75rem;         /* 12px uppercase */
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-texte);
  margin-bottom: var(--space-xs);
}

.footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer__col ul a {
  font-family: var(--font-corps);
  font-size: 0.875rem;
  color: var(--color-texte-leger);
  transition: color var(--transition-base);
}

.footer__col ul a:hover {
  color: var(--color-turquoise);
}

/* Ligne basse : copyright à gauche, devise à droite */
.footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding-block: var(--space-md);
  border-top: 1px dashed rgba(121, 197, 182, 0.30);
}

.footer__bottom p {
  font-family: var(--font-corps);
  font-size: 0.8125rem;       /* 13px */
  color: var(--color-texte-leger);
  text-align: center;
}

@media (min-width: 768px) {
  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
  }

  .footer__bottom p {
    text-align: left;
  }
}