/* ============================================
   Pulpy Agency — Frédéric Juglard
   Repris depuis la maquette Framer, contenu réel
   ============================================ */

/* Polices auto-hébergées via css/fonts.css (RGPD : plus d'appel à Google Fonts) */

/* ---------- Tokens ---------- */
:root {
  /* Couleurs */
  --color-bg: #f0f0f0;
  --color-black: #000000;
  --color-dark: #323232;
  --color-dark-2: #1a1a20;
  --color-muted: #7c7c7c;
  --color-muted-light: #989898;
  --color-muted-2: #777777;
  --color-white: #ffffff;
  --color-off-white: #f8f8f8;
  --color-border: #e4e4e4;

  --color-accent-green: #3af27b;
  --color-green-dot: #1dcc5d;
  --color-whatsapp: #4ec739;
  --color-linkedin: #0078b5;

  --color-tag-red: #f37f7f;
  --color-tag-green: #7ff3a7;
  --color-tag-blue: #7fbbf3;
  --color-tag-yellow: #f3d47f;
  --color-tag-orange: #ffa319;

  /* Typo */
  --font-sans: 'Inter', sans-serif;
  --font-serif: 'Source Serif 4', serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Espacements / rayons */
  --radius-s: 16px;
  --radius-m: 26px;
  --radius-l: 50px;
  --container-max: 1140px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  color: var(--color-dark);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

.accent {
  font-family: var(--font-serif);
  font-style: italic;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 20px;
}

.a-ecrire {
  outline: 2px dashed var(--color-tag-orange);
  outline-offset: 4px;
  background: rgba(255, 163, 25, 0.08);
}

section {
  padding: 60px 0;
}

/* ---------- Apparitions au scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-group .reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal-group .reveal:nth-child(3) { transition-delay: 0.16s; }
.reveal-group .reveal:nth-child(4) { transition-delay: 0.24s; }
.reveal-group .reveal:nth-child(5) { transition-delay: 0.32s; }
.reveal-group .reveal:nth-child(6) { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Parallax hero ---------- */
[data-parallax] {
  will-change: transform;
}

/* ---------- Navigation ---------- */
/* Le header flotte au-dessus du hero (fixé en haut de la page) */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.nav {
  position: relative;
  margin: 13px auto 0;
  width: calc(100% - 32px);
  max-width: 960px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px 10px 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.55));
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-l);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 8px 30px rgba(0, 0, 0, 0.08);
  transition: max-width 0.35s ease, box-shadow 0.35s ease;
}

/* Au scroll : la barre se resserre légèrement (sans faire déborder le CTA) */
.site-header.is-scrolled .nav {
  max-width: 912px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 10px 34px rgba(0, 0, 0, 0.12);
}

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

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

.nav__links {
  display: none;
  align-items: center;
  gap: 22px;
  list-style: none;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.nav__links a:hover {
  opacity: 0.6;
}

.nav__whatsapp {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-whatsapp);
  color: var(--color-white);
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.nav__whatsapp svg {
  width: 20px;
  height: 20px;
}

.nav__whatsapp:hover {
  transform: scale(1.08);
}

.nav .nav__cta {
  display: none;
}

.nav__toggle {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
}

.nav__toggle span {
  width: 22px;
  height: 2px;
  background: var(--color-dark);
  border-radius: 2px;
}

.nav__mobile {
  display: none;
  flex-direction: column;
  gap: 4px;
  list-style: none;
  background: var(--color-white);
  border-radius: 20px;
  margin: 8px auto 0;
  width: calc(100% - 32px);
  max-width: 900px;
  padding: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

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

.nav__mobile a {
  display: block;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 500;
  border-radius: 12px;
}

.nav__mobile a:hover {
  background: var(--color-off-white);
}

@media (min-width: 1040px) {
  .nav__links {
    display: flex;
  }
  .nav .nav__cta {
    display: inline-flex;
  }
  .nav__toggle {
    display: none;
  }
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.03em;
  padding: 16px 28px;
  border-radius: var(--radius-l);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, background-color 0.25s ease;
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

.btn:active {
  transform: translateY(0);
  transition-duration: 0.1s;
}

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

.btn--primary:hover {
  background: #1a1a1a;
}

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

.btn--white {
  background: var(--color-white);
  color: var(--color-black);
  border: 1px solid var(--color-dark);
}

.btn--whatsapp {
  background: var(--color-whatsapp);
  color: var(--color-white);
}

.btn--book {
  background: var(--color-white);
  color: var(--color-dark);
  border: 4px solid var(--color-off-white);
  box-shadow: 0 4px 16px rgba(108, 113, 128, 0.12);
  padding: 8px 24px 8px 8px;
  border-radius: var(--radius-l);
}

.btn--book img {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn--book:hover img {
  transform: scale(1.08);
}

.btn--book:hover {
  box-shadow: 0 10px 24px rgba(108, 113, 128, 0.2);
}

.btn--book img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.btn--book .btn__meta {
  text-align: left;
  line-height: 1.3;
}

.btn--book .btn__meta strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
}

.btn--book .btn__status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--color-muted-light);
}

.btn--book .btn__status .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-green-dot);
}

/* ---------- Hero ---------- */
.hero {
  background: var(--color-bg);
  border-radius: 0 0 var(--radius-m) var(--radius-m);
  width: 98%;
  margin: 0 auto;
  padding: 130px 24px 60px;
  position: relative;
  overflow: hidden;
}

.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
}

/* Dégradé qui fond le carrousel derrière le texte pour garder la lisibilité */
.hero__content::before {
  content: '';
  position: absolute;
  inset: -130px -24px -60px;
  z-index: 2;
  background: linear-gradient(90deg, var(--color-bg) 34%, rgba(240, 240, 240, 0) 72%);
  pointer-events: none;
  display: none;
}

@media (min-width: 960px) {
  .hero__content::before {
    display: block;
  }
}

.hero__inner {
  position: relative;
  z-index: 3;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.hero__badge {
  position: relative;
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(31px, 6vw, 40px);
  margin-bottom: 16px;
}

.hero__badge .highlight-text {
  position: relative;
  z-index: 1;
}

.hero__badge .highlight-bg {
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: 6%;
  height: 55%;
  background: var(--color-accent-green);
  border-radius: 20px;
  transform: rotate(-3deg);
  z-index: 0;
}

.hero__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(43px, 7vw, 56px);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 20px;
}

.hero__subtitle {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--color-muted);
  max-width: 480px;
  margin: 0 auto 32px;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.hero__logos {
  margin-top: 48px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  opacity: 0.8;
}

.hero__logos img {
  height: 22px;
  width: auto;
  object-fit: contain;
}

@media (min-width: 860px) {
  .hero {
    padding: 140px 60px 80px;
  }
  .hero__inner {
    max-width: 720px;
  }
}

@media (min-width: 960px) {
  .hero {
    min-height: 640px;
    display: flex;
    align-items: stretch;
  }
  /* Le conteneur remplit toute la hauteur du hero : son ::before (le
     dégradé) couvre donc tout le hero, et le texte reste centré. */
  .hero__content {
    display: flex;
    align-items: center;
  }
  /* Débordements calés sur le padding du hero (140 haut / 80 bas / 60 côtés)
     pour que le dégradé atteigne exactement les bords du hero. */
  .hero__content::before {
    inset: -140px -60px -80px;
  }
  .hero__inner {
    text-align: left;
    margin: 0;
    max-width: 560px;
  }
  .hero__subtitle {
    margin: 0 0 32px;
  }
  .hero__ctas {
    justify-content: flex-start;
  }
}

/* ---------- Bandeau de confiance ---------- */
.trustbar {
  padding: 32px 0;
  text-align: center;
}

.trustbar__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: var(--color-muted);
  margin-bottom: 20px;
}

.trustbar__label .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-tag-orange);
}

.logo-strip img {
  height: 43px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.75;
  flex-shrink: 0;
}

/* ---------- Ticker (bandeaux défilants) ---------- */
.ticker {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.ticker__track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 32px;
  animation: ticker-scroll 32s linear infinite;
}

.ticker--reverse .ticker__track {
  animation-direction: reverse;
}

.ticker--fast .ticker__track {
  animation-duration: 18s;
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

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

/* Carrousel d'aperçus de sites dans le hero (colonnes qui défilent) */
/* Les colonnes débordent volontairement hors du cadre (top/right/bottom
   négatifs) pour donner l'impression que les images sortent du cadre,
   coupées net par l'overflow:hidden du hero. */
.hero__gallery {
  position: absolute;
  top: 50%;
  right: -40px;
  transform: translateY(-50%);
  width: 52%;
  height: 172%;
  pointer-events: none;
  z-index: 1;
  display: none;
}

/* Inclinaison positive : les images arrivent du haut-droite et descendent
   vers le centre-bas (et non vers le bas-gauche). */
.hero__gallery-tilt {
  display: flex;
  gap: 16px;
  width: 100%;
  height: 100%;
  transform: rotate(13deg);
  transform-origin: center;
}

.hero__col {
  flex: 1;
  /* Pas d'overflow ici : c'est le hero (overflow:hidden) qui découpe en
     haut/bas, ce qui laisse les ombres des images déborder latéralement. */
}

.hero__col--last {
  display: none;
}

/* Toutes les colonnes descendent (flux haut → bas), à des vitesses
   légèrement différentes pour un rendu organique. */
.hero__col-track {
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: hero-scroll-down 45s linear infinite;
}

.hero__col:nth-child(1) .hero__col-track { animation-duration: 50s; }
.hero__col:nth-child(2) .hero__col-track { animation-duration: 40s; }
.hero__col:nth-child(3) .hero__col-track { animation-duration: 58s; }

.hero__col-track img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
  border: 5px solid var(--color-white);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.14);
}

@keyframes hero-scroll-down {
  from { transform: translateY(-50%); }
  to { transform: translateY(0); }
}

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

@media (min-width: 960px) {
  .hero__gallery {
    display: block;
  }
}

@media (min-width: 1200px) {
  .hero__gallery {
    width: 820px;
    right: -140px;
  }
  .hero__col--last {
    display: block;
  }
}

/* Rangées de tags défilantes (gamme de contenu) */
.tag-ticker-rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
}

.tag-ticker-rows .ticker__track {
  gap: 14px;
}

.tag-ticker-rows .tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 20px;
  border-radius: 40px;
  background: var(--color-white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-dark);
  white-space: nowrap;
}

/* Rangée mise en avant, puis fondu progressif vers le bas */
.tag-row--main { opacity: 1; }
.tag-row--faded { opacity: 0.5; }
.tag-row--faded-more { opacity: 0.28; }

/* ---------- Titres de section ---------- */
.section-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(28px, 5vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--color-dark);
  margin-bottom: 16px;
}

.section-title--center {
  text-align: center;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.section-lede {
  font-size: 16px;
  color: var(--color-muted);
  max-width: 480px;
}

.section-lede--center {
  margin: 0 auto 32px;
  text-align: center;
}

/* ---------- Bénéfices / à propos ---------- */
.benefits {
  padding: 70px 0;
  background: var(--color-bg);
}

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

/* Enveloppe des cartes : reçoit les lignes décoratives en fond */
.cards-wrap {
  position: relative;
  margin-bottom: 24px;
}

/* Les lignes décoratives débordent le conteneur et occupent
   toute la largeur de l'écran (centrées sur le viewport). */
.benefits__flow {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: calc(100% + 40px);
  z-index: 0;
  opacity: 0.85;
  pointer-events: none;
}

.cards-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

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

.feature-card {
  background: var(--color-white);
  border-radius: 20px;
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 14px 30px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05), 0 20px 40px rgba(0, 0, 0, 0.09);
}

.feature-card__icon {
  width: 36px;
  height: 36px;
  color: var(--color-black);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.feature-card h3 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.feature-card p {
  font-size: 15px;
  color: var(--color-muted);
}

.about-card {
  background: var(--color-black);
  border-radius: 24px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  text-align: center;
}

.about-card img {
  width: 100%;
  max-width: 320px;
  height: 200px;
  border-radius: 18px;
  object-fit: cover;
  object-position: center;
}

.about-card h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 28px;
  color: var(--color-muted-light);
  margin-bottom: 12px;
}

.about-card__body p {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  color: var(--color-white);
  max-width: 800px;
}

.benefits__cta {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

@media (min-width: 720px) {
  .about-card {
    flex-direction: row;
    text-align: left;
    padding: 20px;
    gap: 32px;
  }
  .about-card img {
    width: 220px;
    height: 200px;
    flex-shrink: 0;
  }
}

/* ---------- Gamme de contenu ---------- */
.content-range {
  position: relative;
  text-align: center;
  padding: 40px 0;
  overflow: hidden;
}

.content-range__label {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
  color: var(--color-muted-2);
  margin-bottom: 16px;
}

.content-range__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
  margin-bottom: 24px;
}

.content-range__legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-dark);
}

.content-range__legend .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.dot--web { background: var(--color-tag-red); }
.dot--ecommerce { background: var(--color-tag-green); }
.dot--marketing { background: var(--color-tag-blue); }
.dot--print { background: var(--color-tag-yellow); }

/* Titre "outils" : même style que le label, avec de l'espace au-dessus */
.content-range__label--tools {
  margin-top: 44px;
  margin-bottom: 24px;
}

/* Bandeau de logos d'outils : noir au repos, vraie couleur de marque au survol.
   Base (mobile/tablette) : logos en ligne, centrés, qui reviennent à la ligne. */
.tools-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 26px 34px;
  max-width: 760px;
  margin: 0 auto;
}

/* Desktop : logos sur une seule ligne, disposés en arc de "sourire"
   (le décalage vertical --arc-y est calculé par le JS). */
@media (min-width: 1024px) {
  .tools-strip {
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    max-width: none;
    gap: 0 24px;
    padding-bottom: 130px;
  }
}

.tools-strip__item {
  position: relative; /* ancre le tooltip */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-black);
  transform: translateY(var(--arc-y, 0px));
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease;
}

.tools-strip__item svg {
  width: 34px;
  height: 34px;
  fill: currentColor; /* = noir au repos, --brand au survol */
}

/* Les logos en image sont en niveaux de gris (assombris) au repos, puis
   reprennent leur vraie couleur au survol. Le grayscale (et non brightness 0)
   garde lisibles les logos "tuile" type Photoshop/Illustrator. */
.tools-strip__item img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: grayscale(1) brightness(0.45) contrast(1.1);
  transition: filter 0.25s ease;
}

/* Logos "duo" (Photoshop, Illustrator, InDesign, ChatGPT) : version noire
   (tuile noire + lettre en bg-color) au repos, vraie couleur au survol via
   un fondu entre les deux images superposées. */
.tools-strip__item--duo img {
  filter: none;
}

.tools-strip__item--duo .tool-mono {
  transition: opacity 0.25s ease;
}

.tools-strip__item--duo .tool-color {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.tools-strip__item--duo:hover .tool-mono {
  opacity: 0;
}

.tools-strip__item--duo:hover .tool-color {
  opacity: 1;
}

/* Survol : léger soulèvement + couleur de marque révélée */
.tools-strip__item:hover {
  transform: translateY(calc(var(--arc-y, 0px) - 4px));
  color: var(--brand, var(--color-black));
}

.tools-strip__item:hover img {
  filter: none;
}

/* Tooltip : le nom de l'outil apparaît au survol */
.tools-strip__item::after {
  content: attr(data-name);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--color-black);
  color: var(--color-white);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Petite flèche sous le tooltip */
.tools-strip__item::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--color-black);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.tools-strip__item:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.tools-strip__item:hover::before {
  opacity: 1;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.tag-row .tag {
  padding: 8px 16px;
  border-radius: 20px;
  background: var(--color-off-white);
  font-size: 13px;
  font-weight: 500;
}

/* ---------- Les étapes ---------- */
.steps {
  padding: 60px 0;
  text-align: center;
}

.steps__title {
  max-width: 700px;
  margin: 0 auto 80px;
}

.steps__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  text-align: left;
}

@media (min-width: 860px) {
  .steps__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
}

/* Cellule = carte + forme décorative derrière (frère, pas enfant) */
.step-cell {
  position: relative;
  display: flex;
}

.step-card {
  position: relative;
  z-index: 1;
  flex: 1; /* toutes les colonnes prennent la même hauteur */
  background: var(--color-white);
  border: 6px solid var(--color-off-white);
  border-radius: 22px;
  padding: 44px 25px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: box-shadow 0.25s ease;
}

.step-cell:hover .step-card {
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.1);
}

/* Badge numéro : centré sur le bord haut de la carte */
.step-card__number {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-black);
  color: var(--color-white);
  font-weight: 700;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Formes décoratives colorées : derrière la carte (z-index sous .step-card) */
.step-deco {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
}

.step-deco--circle {
  top: -22px;
  width: 82px;
  height: 41px;
  background: #ffd30e;
  border-radius: 82px 82px 0 0;
}

.step-deco--arch {
  top: -26px;
  width: 112px;
  height: 56px;
  border: 16px solid #7ff3a8;
  border-bottom: 0;
  border-radius: 112px 112px 0 0;
}

.step-deco--arrow {
  top: -38px;
  left: auto;
  right: -14px;
  transform: rotate(4deg);
  width: 78px;
  color: #7fbbf3;
}

.step-deco--arrow svg {
  width: 100%;
  height: auto;
}

/* Flèche orange décorative en bas à gauche */
.steps__flourish {
  position: absolute;
  left: -6px;
  bottom: -78px;
  width: 120px;
  color: #f3b45e;
  z-index: 0;
  pointer-events: none;
  display: none;
}

.steps__flourish svg {
  width: 100%;
  height: auto;
}

@media (min-width: 860px) {
  .steps__flourish {
    display: block;
  }
}

/* Scène multi-visuels : chaque carte compose plusieurs images superposées */
.step-card__stage {
  position: relative;
  width: 100%;
  height: 178px;
  margin-bottom: 4px;
}

.step-img {
  position: absolute;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
  will-change: transform;
}

/* ---- Carte 1 : visio + boutons d'appel ---------------------------------
   Au repos la visio est un peu penchée à gauche ; au survol elle grandit
   et se redresse. Les boutons passent de la droite vers la gauche. */
.step-img--video { width: 76%; left: 0; top: 24px; border-radius: 12px; z-index: 1; transform: rotate(-5deg); }
.step-img--btn { border-radius: 40px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.22); z-index: 2; }
.step-img--cam { width: 26%; right: 0; top: 34px; transform: rotate(9deg); }
.step-img--hang { width: 21%; right: 8%; top: 98px; transform: rotate(7deg); }

.step-cell:hover .step-img--video { transform: rotate(0deg) scale(1.07); }
.step-cell:hover .step-img--cam { transform: rotate(-4deg); }
.step-cell:hover .step-img--hang { transform: rotate(-6deg); }

/* ---- Carte 2 : collage Notion -------------------------------------------
   Petits blocs empilés au repos ; au survol ils se rangent côte à côte
   sur la largeur, sous l'en-tête "Gestion de la campagne". */
.step-img--n-header { width: 92%; left: 4%; top: 0; z-index: 1; }
.step-img--n-a,
.step-img--n-b,
.step-img--n-c {
  width: 31%;
  height: 100px;
  object-fit: cover;
  object-position: top left;
  transition: left 0.45s cubic-bezier(0.16, 1, 0.3, 1), top 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.step-img--n-a { left: 15%; top: 44px; z-index: 3; }
.step-img--n-b { left: 34%; top: 58px; z-index: 2; }
.step-img--n-c { left: 53%; top: 46px; z-index: 4; }

.step-cell:hover .step-img--n-a { left: 2%; top: 50px; }
.step-cell:hover .step-img--n-b { left: 34.5%; top: 50px; }
.step-cell:hover .step-img--n-c { left: 67%; top: 50px; }

/* ---- Carte 3 : deux sites superposés -------------------------------------
   Au survol le site (devant) pivote vers la droite et grandit, le
   second se réduit et se rééquilibre. */
.step-img--site-back { width: 64%; height: 128px; object-fit: cover; object-position: top; left: 0; top: 16px; z-index: 1; transform: rotate(-5deg); }
.step-img--site-front { width: 64%; height: 128px; object-fit: cover; object-position: top; right: 0; top: 34px; z-index: 2; transform: rotate(4deg); }

.step-cell:hover .step-img--site-front { transform: rotate(9deg) scale(1.08); }
.step-cell:hover .step-img--site-back { transform: rotate(-2deg) scale(0.9) translateX(-6%); }

.step-card h3 {
  font-size: 22px;
  font-weight: 700;
}

.step-card p {
  font-size: 15px;
  color: var(--color-muted-light);
}

.steps__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 56px;
}

.steps__wa {
  gap: 10px;
}

.steps__wa svg {
  width: 22px;
  height: 22px;
  color: var(--color-whatsapp);
}

/* ---------- Portfolio ---------- */
/* Carte noire pleine largeur ; le padding vertical seul, pour que le
   carrousel puisse déborder jusqu'aux bords de la carte. */
.portfolio {
  background: var(--color-black);
  color: var(--color-white);
  border-radius: var(--radius-m);
  width: calc(100% - 40px);
  max-width: var(--container-max);
  margin: 20px auto;
  padding: 56px 0;
  overflow: hidden;
}

/* En-tête : titre (avec l'œil) à gauche, texte à droite sur grand écran.
   Valeurs mobile-first plus compactes, agrandies ensuite en desktop. */
.portfolio__header {
  max-width: var(--container-max);
  margin: 0 auto 30px;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.portfolio__heading {
  display: flex;
  align-items: center;
  gap: 14px;
}

.portfolio__eye {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  color: var(--color-white);
}

.portfolio__eye svg {
  width: 100%;
  height: 100%;
}

.portfolio__title {
  color: var(--color-white);
  font-size: clamp(23px, 6.5vw, 40px);
  line-height: 1.15;
  margin-bottom: 0;
}

.portfolio__lede {
  color: rgba(255, 255, 255, 0.75);
  max-width: 600px;
  font-size: 15px;
  line-height: 1.55;
}

@media (min-width: 860px) {
  .portfolio__header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 48px;
    padding: 0 40px;
    margin-bottom: 44px;
  }
  .portfolio__heading {
    align-items: flex-start;
    gap: 20px;
  }
  .portfolio__eye {
    width: 64px;
    height: 64px;
  }
  .portfolio__lede {
    font-size: 18px;
    padding-top: 6px;
  }
}

/* Carrousel : bande qui défile en continu, débordant sur les côtés. Le
   fondu (.ticker) masque les bords ; le padding aligne la 1re carte sur
   l'en-tête. */
.portfolio__carousel {
  padding: 10px 0;
}

.portfolio__track {
  gap: 24px;
  padding: 0 40px;
  animation-duration: 55s;
}

/* On laisse l'utilisateur admirer une carte : le défilement se met en pause */
.portfolio__carousel:hover .portfolio__track {
  animation-play-state: paused;
}

.portfolio__item {
  flex-shrink: 0;
  width: min(80vw, 300px);
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-white);
  border: 6px solid var(--color-white);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.portfolio__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.portfolio__item:hover {
  transform: translateY(-6px);
}

/* ---------- Nos services (liste en lignes) ---------- */
.services {
  padding: 70px 0;
}

.services__header {
  max-width: 640px;
  margin-bottom: 28px;
}

.services__title {
  margin-bottom: 16px;
}

.services__lede {
  max-width: 620px;
}

/* La liste : des lignes façon sommaire éditorial, séparées par un filet.
   Le filet du haut est plus marqué pour "ouvrir" la liste. */
.services__list {
  border-top: 1px solid var(--color-dark);
}

.service-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px 40px;
  padding: 26px 0;
  border-bottom: 1px solid var(--color-border);
}

/* Filet vert qui se dessine de gauche à droite au survol (rappel de l'accent) */
.service-row::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0;
  background: var(--color-green-dot);
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-row:hover::after {
  width: 100%;
}

/* Une couleur de filet par service (au survol) */
.service-row:nth-child(1)::after { background: #ffd30e; }
.service-row:nth-child(2)::after { background: #7ff3a8; }
.service-row:nth-child(3)::after { background: #7fbbf3; }
.service-row:nth-child(4)::after { background: #ff9b0e; }

.service-row__label {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.service-row__num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-muted);
}

.service-row__name {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.service-row__lead {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
}

.service-row__desc {
  font-size: 15px;
  color: var(--color-muted);
  margin-bottom: 14px;
}

.service-row__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-black);
}

.service-row__arrow {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* La flèche avance au survol de la ligne ou du lien */
.service-row:hover .service-row__arrow,
.service-row__link:hover .service-row__arrow {
  transform: translateX(6px);
}

/* Icône : en haut sur mobile (order -1), remise à droite en desktop */
.service-row__icon {
  order: -1;
  color: var(--color-black);
}

.service-row__icon svg {
  width: 46px;
  height: 46px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-row:hover .service-row__icon svg {
  transform: rotate(-6deg) scale(1.06);
}

/* Desktop : 3 colonnes — titre | contenu | icône alignée à droite */
@media (min-width: 860px) {
  .service-row {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.7fr) 64px;
    align-items: start;
    gap: 40px;
    padding: 30px 0;
  }
  .service-row__icon {
    order: 0;
    justify-self: end;
  }
  .service-row__icon svg {
    width: 56px;
    height: 56px;
  }
}

/* CTA de fin de section */
.services__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 40px;
}

.services__cta-text {
  font-size: clamp(22px, 3.5vw, 30px);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ---------- Témoignages ---------- */
.testimonials {
  padding: 60px 0 130px;
  text-align: center;
}

/* En-tête : badge "pilule" + gros titre centré */
.testimonials__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-bottom: 44px;
}

.testimonials__title {
  margin-bottom: 0;
  font-size: clamp(32px, 6vw, 56px);
  font-weight: 700;
  line-height: 1.05;
}

/* Badge réutilisable (fond blanc, coins ronds) */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  border-radius: var(--radius-l);
  background: var(--color-white);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-black);
}

.testimonial-grid {
  position: relative;
  z-index: 1; /* les cartes passent au-dessus de l'ovale de fond */
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  text-align: left;
}

@media (min-width: 640px) {
  .testimonial-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.testimonial-card {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius-m);
  padding: 26px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03), 0 18px 40px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04), 0 26px 50px rgba(0, 0, 0, 0.1);
}

/* Ligne du haut : avatar à gauche, guillemet décoratif à droite */
.testimonial-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

/* Logo de l'entreprise : carré arrondi, logo entier visible (contain) sur fond blanc */
.testimonial-card__avatar {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  object-fit: contain;
  padding: 8px;
  flex-shrink: 0;
}

.testimonial-card__mark {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: 56px;
  line-height: 1;
  color: var(--color-border);
}

.testimonial-card__id {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.testimonial-card__name {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-black);
}

.testimonial-card__role {
  font-size: 14px;
  color: var(--color-muted-light);
}

.testimonial-card__text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-muted);
  margin-top: auto;
}

.testimonial-card__stars {
  font-size: 20px;
  letter-spacing: 4px;
  color: var(--color-tag-orange);
}

/* Zone cartes : repère de positionnement pour l'ovale de fond */
.testimonials__body {
  position: relative;
}

/* Ovale décoratif (SVG Framer) : en arrière-plan, ancré vers le bas pour que
   l'arc vert du dégradé dépasse sous les cartes et reste bien visible */
.testimonials__flourish {
  position: absolute;
  left: 50%;
  bottom: -60px;
  transform: translateX(-50%);
  width: min(1060px, 112%);
  z-index: 0;
  pointer-events: none;
}

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

/* ---------- FAQ ---------- */
.faq {
  padding: 40px 20px 70px;
  position: relative; /* ancre la ligne animée en arrière-plan */
}

/* Ligne décorative en fond, inspirée de celle des bénéfices mais tracée
   dans l'autre sens (droite → gauche, direction portée par le path).
   Bande de hauteur fixe centrée sur la carte : la ligne touche les deux
   bords de l'écran à mi-hauteur et reste visible pendant la lecture. */
.faq__flow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 460px;
  z-index: 0;
  opacity: 0.7;
  pointer-events: none;
}

/* Toute la FAQ tient dans un grand bloc blanc arrondi */
.faq__card {
  position: relative; /* passe au-dessus de la ligne de fond */
  z-index: 1;
  max-width: 700px;
  margin: 0 auto;
  background: var(--color-white);
  border-radius: 40px;
  padding: 48px 56px 52px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.06);
}

/* En-tête aligné à gauche : badge + titre sur 2 lignes */
.faq__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 24px;
}

/* Sur fond blanc, la pilule passe en gris (au lieu du blanc + ombre) */
.faq .pill {
  background: var(--color-bg);
  box-shadow: none;
}

.faq__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(32px, 4.5vw, 50px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-black);
}

/* Ligne contact : email à gauche, bouton noir à droite */
.faq__contact {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}

.faq__email span {
  display: block;
  font-size: 14px;
  color: var(--color-muted-light);
  margin-bottom: 4px;
}

.faq__email a {
  font-size: 18px;
  color: var(--color-muted);
  transition: color 0.2s ease;
}

.faq__email a:hover {
  color: var(--color-black);
}

@media (min-width: 620px) {
  .faq__contact {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Accordéons : barres grises compactes dans le bloc blanc */
.faq-item {
  background: #f4f4f4;
  border-radius: 16px;
  padding: 15px 20px;
  transition: background-color 0.2s ease;
}

.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  color: var(--color-black);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

/* Bouton rond +/- à droite ; devient noir quand la question est ouverte */
.faq-item summary::after {
  content: '+';
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  color: var(--color-dark);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.faq-item[open] summary::after {
  content: '–';
  background: var(--color-black);
  border-color: var(--color-black);
  color: var(--color-white);
}

.faq-item p {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-muted);
}

@media (max-width: 620px) {
  .faq__card {
    padding: 32px 22px 36px;
    border-radius: 28px;
  }
}

/* ---------- RDV / Cal.com ---------- */
/* Bandeau blanc pleine largeur (bord à bord) qui fait ressortir le calendrier sombre */
.booking-section {
  background: linear-gradient(180deg, var(--color-white) 60%, var(--color-bg) 100%);
  padding: 80px 0;
}

.booking {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}

@media (min-width: 860px) {
  .booking {
    grid-template-columns: 1fr 1fr;
    gap: 60px;
  }
}

.booking__content h2 {
  margin-bottom: 16px;
}

.booking__content p {
  color: var(--color-muted);
  font-size: 16px;
  max-width: 420px;
  margin-bottom: 24px;
}

.booking__embed {
  /* Fond sombre pour accueillir le calendrier Cal.com en thème "dark" */
  background: var(--color-dark-2);
  border-radius: var(--radius-s);
  padding: 8px;
  overflow: hidden;
}

/* Conteneur du calendrier Cal.com : le widget ajuste sa hauteur tout seul,
   min-height sert de garde-fou pendant le chargement */
.booking__cal {
  width: 100%;
  min-height: 560px;
  border-radius: 12px;
  overflow: auto;
}

/* Aperçu RGPD affiché tant que le visiteur n'a pas chargé Cal.com */
.booking__consent {
  min-height: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 20px;
  padding: 40px 28px;
  color: var(--color-white);
}

/* Une fois le calendrier chargé, l'aperçu disparaît complètement
   (l'attribut hidden doit primer sur le display:flex ci-dessus). */
.booking__consent[hidden] {
  display: none;
}

.booking__consent-icon {
  width: 46px;
  height: 46px;
  opacity: 0.85;
}

.booking__consent-text {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  max-width: 380px;
}

.booking__consent-text strong {
  color: var(--color-white);
}

.booking__consent-text a {
  color: var(--color-white);
  text-decoration: underline;
}

.booking__embed iframe {
  width: 100%;
  border: none;
  border-radius: 8px;
}

/* ---------- Footer ---------- */
.footer {
  background: var(--color-black);
  color: var(--color-white);
  border-radius: 60px 60px 0 0;
  margin-top: 40px;
  padding: 64px 24px 32px;
}

/* Zone haute : 3 colonnes (logo · nav+réseaux · newsletter) */
.footer__main {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  text-align: center;
  margin-bottom: 48px;
}

.footer__logo {
  display: inline-flex;
}

/* Fond noir du footer : le logo (noir) est inversé en blanc */
.footer__logo img {
  height: 68px;
  width: auto;
  filter: brightness(0) invert(1);
}

/* Colonne centrale : navigation empilée au-dessus des réseaux */
.footer__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  list-style: none;
  font-family: var(--font-body);
  font-size: 15px;
}

.footer__nav a {
  color: var(--color-white);
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.footer__nav a:hover {
  opacity: 1;
}

/* Réseaux sociaux : pastilles rondes aux couleurs de marque */
.footer__socials {
  display: flex;
  gap: 14px;
}

.footer__social {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.footer__social svg {
  width: 20px;
  height: 20px;
}

.footer__social--wa {
  background: var(--color-whatsapp);
}

.footer__social--in {
  background: var(--color-linkedin);
}

.footer__social:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}

/* Colonne newsletter */
.footer__newsletter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.footer__newsletter p {
  font-family: var(--font-body);
  font-size: 15px;
}

.footer__newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__newsletter-row {
  display: flex;
  gap: 8px;
}

/* Case de consentement newsletter */
.footer__newsletter-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}

.footer__newsletter-consent input {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  flex-shrink: 0;
  accent-color: var(--color-accent-green);
  cursor: pointer;
}

.footer__newsletter-consent a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
}

/* Message de retour après inscription newsletter (masqué tant qu'il est vide) */
.footer__newsletter-status {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}

.footer__newsletter-status:empty {
  display: none;
}

.footer__newsletter-status.is-success {
  color: var(--color-accent-green);
}

.footer__newsletter-status.is-error {
  color: #ff8a8a;
}

.footer__newsletter input[type="email"] {
  flex: 1;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  padding: 11px 14px;
  color: var(--color-white);
  font-size: 14px;
  font-family: var(--font-body);
  min-width: 140px;
}

.footer__newsletter input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.footer__newsletter input[type="email"]:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.6);
}

.footer__newsletter button {
  background: var(--color-white);
  color: var(--color-black);
  border-radius: 10px;
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 600;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.footer__newsletter button:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

/* Preuve sociale : avatars empilés + compteur d'inscrits */
.footer__proof {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer__avatars {
  display: flex;
}

.footer__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--color-black);
  margin-left: -10px;
  background-size: cover;
  background-position: center;
}

.footer__avatar:first-child {
  margin-left: 0;
}

/* Photos des inscrits (preuve sociale) */
.footer__avatar:nth-child(1) { background-image: url(../images/visage-news/1550270310835.jpeg); }
.footer__avatar:nth-child(2) { background-image: url(../images/visage-news/1604999651151.jpeg); }
.footer__avatar:nth-child(3) { background-image: url(../images/visage-news/1736287115883.jpeg); }
.footer__avatar:nth-child(4) { background-image: url(../images/visage-news/1736507883566.jpeg); }
.footer__avatar:nth-child(5) { background-image: url(../images/visage-news/1740426548100.jpeg); }

.footer__count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  padding: 4px 16px 4px 4px;
  font-family: var(--font-body);
  font-size: 13px;
}

.footer__count strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-black);
  font-size: 12px;
  font-weight: 700;
}

/* Bas de footer : CTA + copyright, centrés */
.footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 32px;
}

.footer__contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-white);
  transition: background 0.2s ease, color 0.2s ease;
}

.footer__contact-arrow {
  width: 22px;
  height: 22px;
}

.footer__contact-btn:hover {
  background: var(--color-white);
  color: var(--color-black);
}

.footer__copyright {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.footer__copyright a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
}

@media (min-width: 860px) {
  .footer__main {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    text-align: left;
  }
  /* La colonne newsletter aligne son contenu à gauche tout en restant à droite */
  .footer__newsletter {
    align-items: flex-start;
  }
}

/* ---------- Popup formulaire de contact ---------- */
.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* Ouverte : on l'affiche en flex (centrée) */
.contact-modal.is-open {
  display: flex;
}

/* Voile sombre cliquable pour fermer */
.contact-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* Le panneau noir qui contient le formulaire */
.contact-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--color-black);
  color: var(--color-white);
  border-radius: var(--radius-m);
  padding: 44px 44px 40px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
  animation: contact-pop 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes contact-pop {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.contact-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: background 0.2s ease;
}

.contact-modal__close:hover {
  background: rgba(255, 255, 255, 0.12);
}

.contact-modal__title {
  font-family: var(--font-sans);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.contact-modal__lede {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 26px;
}

/* Grille 2 colonnes : les champs "half" font 50 %, les autres toute la largeur */
.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.contact-form__field {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-form__field--half {
  grid-column: span 1;
}

.contact-form__field label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

.contact-form__field .req {
  color: var(--color-accent-green);
}

.contact-form input,
.contact-form textarea {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 12px 14px;
  width: 100%;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--color-accent-green);
  background: rgba(255, 255, 255, 0.1);
}

.contact-form textarea {
  resize: vertical;
  min-height: 96px;
}

.contact-form__submit {
  grid-column: 1 / -1;
  margin-top: 4px;
}

/* Case de consentement RGPD (obligatoire avant envoi) */
.contact-form__consent {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
}

.contact-form__consent input {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  flex-shrink: 0;
  accent-color: var(--color-accent-green);
  cursor: pointer;
}

.contact-form__consent a {
  color: var(--color-white);
  text-decoration: underline;
}

/* Message de retour après envoi (masqué tant qu'il est vide) */
.contact-form__status {
  grid-column: 1 / -1;
  font-size: 14px;
  line-height: 1.4;
}

.contact-form__status:empty {
  display: none;
}

.contact-form__status.is-success {
  color: var(--color-accent-green);
}

.contact-form__status.is-error {
  color: #ff8a8a;
}

/* Écran de confirmation : masqué par défaut, affiché quand le panneau
   passe en état "is-sent" (et le formulaire est alors masqué). */
.contact-modal__success {
  display: none;
  text-align: center;
  padding: 8px 0 4px;
}

.contact-modal__panel.is-sent .contact-modal__title,
.contact-modal__panel.is-sent .contact-modal__lede,
.contact-modal__panel.is-sent .contact-form {
  display: none;
}

.contact-modal__panel.is-sent .contact-modal__success {
  display: block;
  animation: contact-pop 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-modal__success-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-accent-green);
  color: var(--color-black);
  margin-bottom: 20px;
}

.contact-modal__success-check svg {
  width: 32px;
  height: 32px;
}

.contact-modal__success-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.contact-modal__success-text {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.65);
  max-width: 340px;
  margin: 0 auto 24px;
}

/* Mobile : tout passe sur une seule colonne */
@media (max-width: 560px) {
  .contact-form {
    grid-template-columns: 1fr;
  }
  .contact-form__field--half {
    grid-column: 1 / -1;
  }
  .contact-modal__panel {
    padding: 40px 22px 32px;
  }
}

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

/* ---------- Pages légales (mentions légales, confidentialité) ---------- */
.legal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 820px;
  margin: 0 auto;
  padding: 24px 20px;
}

.legal-header__logo img {
  height: 32px;
  width: auto;
}

.legal-header__back {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-dark);
}

.legal-header__back:hover {
  text-decoration: underline;
}

.legal {
  max-width: 820px;
  margin: 0 auto;
  padding: 16px 20px 80px;
}

.legal h1 {
  font-size: clamp(30px, 5vw, 42px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 8px;
}

.legal__updated {
  color: var(--color-muted);
  font-size: 14px;
  margin-bottom: 32px;
}

.legal h2 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 38px 0 12px;
}

.legal p,
.legal li {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-dark);
}

.legal p {
  margin-bottom: 12px;
}

.legal ul {
  padding-left: 20px;
  margin-bottom: 12px;
}

.legal li {
  margin-bottom: 6px;
}

.legal a {
  color: var(--color-dark);
  text-decoration: underline;
}

/* Champ à compléter par l'éditeur (mis en évidence en orange) */
.legal .todo {
  background: rgba(255, 163, 25, 0.16);
  border: 1px dashed var(--color-tag-orange);
  border-radius: 4px;
  padding: 0 6px;
  font-style: italic;
  color: var(--color-dark);
}

.legal-footer {
  border-top: 1px solid var(--color-border);
  padding: 24px 20px;
  text-align: center;
  font-size: 13px;
  color: var(--color-muted);
}

.legal-footer a {
  color: var(--color-muted);
  text-decoration: underline;
}

/* ---------- Bannière RGPD (information) ---------- */
.privacy-banner {
  display: none; /* affichée par le JS si non fermée */
  position: fixed;
  z-index: 90; /* sous la popup contact (100) */
  left: 20px;
  bottom: 20px;
  width: min(420px, calc(100vw - 40px));
  flex-direction: column;
  gap: 14px;
  background: var(--color-black);
  color: var(--color-white);
  border-radius: var(--radius-s);
  padding: 20px 22px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.privacy-banner.is-visible {
  display: flex;
  animation: privacy-slide 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes privacy-slide {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.privacy-banner__text {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}

.privacy-banner__text strong {
  color: var(--color-white);
}

.privacy-banner__text a {
  color: var(--color-white);
  text-decoration: underline;
}

.privacy-banner__ok {
  align-self: flex-start;
  padding: 10px 24px;
  font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .privacy-banner.is-visible {
    animation: none;
  }
}

/* ---------- Sélecteur de langue (FR · EN · ES) ---------- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.lang-switch button {
  color: inherit;
  opacity: 0.5;
  padding: 2px 1px;
  transition: opacity 0.2s ease;
}

.lang-switch button:hover {
  opacity: 0.85;
}

.lang-switch button.is-active {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lang-switch__sep {
  opacity: 0.3;
}

/* Header : visible seulement en desktop (comme les liens de nav) */
.lang-switch--nav {
  display: none;
}

@media (min-width: 1040px) {
  .lang-switch--nav {
    display: inline-flex;
    transform: translateY(2px); /* léger décalage pour aligner avec la nav */
  }
}

/* Mobile : centré en bas du menu déroulant */
.nav__mobile-lang {
  display: flex;
  justify-content: center;
  padding: 14px 16px 6px;
  margin-top: 4px;
  border-top: 1px solid var(--color-border);
}

.nav__mobile-lang:hover {
  background: none;
}

/* Footer : un peu d'espace au-dessus */
.lang-switch--footer {
  margin-top: 10px;
}

/* Pages légales : le sélecteur est regroupé avec le lien « Retour » à droite */
.legal-header__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.lang-switch--legal {
  color: var(--color-dark);
}

/* ---------- Sélecteur de langue en menu déroulant (header desktop) ---------- */
.lang-dropdown {
  position: relative;
  display: none; /* visible en desktop seulement (comme la nav) */
  flex-shrink: 0;
}

@media (min-width: 1040px) {
  .lang-dropdown--nav {
    display: block;
  }
}

.lang-dropdown__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-dark);
  padding: 6px 9px;
  border-radius: 9px;
  transition: background 0.2s ease;
}

.lang-dropdown__toggle:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* Le chevron pivote quand le menu est ouvert */
.lang-dropdown__toggle svg {
  transition: transform 0.2s ease;
}

.lang-dropdown.is-open .lang-dropdown__toggle svg {
  transform: rotate(180deg);
}

.lang-dropdown__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 150px;
  list-style: none;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14);
  padding: 6px;
  display: none;
  z-index: 20;
}

.lang-dropdown.is-open .lang-dropdown__menu {
  display: block;
  animation: lang-menu-in 0.16s ease;
}

@keyframes lang-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.lang-dropdown__option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-dark);
  transition: background 0.15s ease;
}

.lang-dropdown__option:hover {
  background: var(--color-off-white);
}

.lang-dropdown__option.is-active {
  font-weight: 700;
  background: var(--color-off-white);
}

@media (prefers-reduced-motion: reduce) {
  .lang-dropdown.is-open .lang-dropdown__menu {
    animation: none;
  }
}

/* ---------- Champ anti-spam (honeypot) ---------- */
/* Invisible pour les humains (hors flux, non focusable) mais rempli par
   certains robots — Formspree ignore alors l'envoi. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}