/* ==========================================================================
   COMPONENTS.CSS — Composants réutilisables
   ========================================================================== */

/* ---- Boutons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 0.9rem 1.6rem;
  border-radius: var(--radius-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
  white-space: nowrap;
}

.btn--primary {
  background: var(--color-trust-blue);
  color: #fff;
}
.btn--primary:hover {
  background: var(--color-trust-blue-dark);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn--outline {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-border);
}
.btn--outline:hover {
  border-color: var(--color-ink);
  transform: translateY(-1px);
}

.btn--ghost-light {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
}
.btn--ghost-light:hover {
  border-color: #fff;
  background: rgba(255,255,255,0.08);
}

.btn--sm {
  padding: 0.6rem 1.1rem;
  font-size: var(--fs-xs);
}

.cta-group {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* ---- Hero ---- */
.hero {
  position: relative;
  padding-block: var(--space-3xl) var(--space-2xl);
  overflow: hidden;
  background: var(--color-ink);
  color: #fff;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-2xl);
  align-items: center;
}

.hero__eyebrow {
  color: var(--color-accent);
}
.hero__eyebrow::before { background: var(--gradient-growth); }

.hero h1 {
  color: #fff;
  font-size: var(--fs-4xl);
  margin-bottom: var(--space-md);
}

.hero__lead {
  color: #cbd5e1;
  font-size: var(--fs-md);
  max-width: 46ch;
  margin-bottom: var(--space-lg);
}

.hero__meta {
  display: flex;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255,255,255,0.12);
}

.hero__meta strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: #fff;
}
.hero__meta span {
  font-size: var(--fs-xs);
  color: #94a3b8;
}

/* ---- Signature element: courbe de croissance animée ---- */
.growth-curve {
  width: 100%;
  height: auto;
}

.growth-curve__path {
  fill: none;
  stroke: url(#growthGradient);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw-growth 2.4s var(--ease-standard) forwards 0.3s;
}

.growth-curve__dot {
  opacity: 0;
  animation: fade-in-dot 0.6s ease forwards 2.4s;
}

@keyframes draw-growth {
  to { stroke-dashoffset: 0; }
}
@keyframes fade-in-dot {
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .growth-curve__path { animation: none; stroke-dashoffset: 0; }
  .growth-curve__dot { animation: none; opacity: 1; }
}

/* ---- Bande logos clients (marquee défilant, compact) ---- */
.logo-strip {
  padding-block: var(--space-md);
}

.logo-strip__label {
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-sm);
}

.logo-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.logo-marquee__track {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
  width: max-content;
  /* Pas d'animation par défaut : assets/js/main.js calcule le nombre de
     répétitions nécessaires selon la largeur d'écran réelle, puis applique
     l'animation. Sans JS, on obtient une rangée statique (dégradation
     propre) plutôt qu'un défilement incomplet qui laisse un vide. */
}

.logo-marquee:hover .logo-marquee__track {
  animation-play-state: paused;
}

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

@media (prefers-reduced-motion: reduce) {
  .logo-marquee__track { animation: none !important; }
  .logo-marquee { overflow-x: auto; }
}

.logo-mark-item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.logo-mark-item img {
  height: 30px;
  width: auto;
  opacity: 0.9;
  transform: translateY(0);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.logo-mark-item:hover img {
  opacity: 1;
  transform: translateY(-2px);
}

/* ---- Grille de cartes services ---- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.service-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-lg);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-trust-blue);
}

.service-card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--gradient-growth);
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.service-card h3 { margin-bottom: var(--space-2xs); }

.service-card p {
  font-size: var(--fs-sm);
  flex-grow: 1;
  margin-bottom: var(--space-sm);
}

.service-card__link {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-trust-blue);
}

/* ---- Méthode / process (étapes réellement séquentielles) ---- */
.process-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  counter-reset: step;
}

.process-step {
  position: relative;
  padding-top: var(--space-lg);
  border-top: 2px solid var(--color-border);
}

.process-step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--color-trust-blue);
  display: block;
  margin-bottom: var(--space-sm);
}

.process-step h3 { margin-bottom: var(--space-2xs); font-size: var(--fs-md); }
.process-step p { font-size: var(--fs-sm); }

/* ---- Témoignages ---- */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.testimonial-card {
  padding: var(--space-lg);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.testimonial-card p {
  color: var(--color-ink-soft);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-md);
  line-height: 1.6;
}

.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.testimonial-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gradient-growth);
  flex-shrink: 0;
}

.testimonial-card__author strong {
  display: block;
  font-size: var(--fs-sm);
}
.testimonial-card__author span {
  font-size: var(--fs-xs);
  color: var(--color-text-faint);
}

/* ---- CTA final (bande pleine largeur) ---- */
.cta-band {
  background: var(--color-ink);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  text-align: center;
}

.cta-band h2 { color: #fff; margin-bottom: var(--space-sm); }
.cta-band p { color: #cbd5e1; margin-bottom: var(--space-lg); }
.cta-band .cta-group { justify-content: center; }

/* ---- Bannière image de page (photo pleine largeur sous le page-header) ---- */
.page-banner {
  margin-top: var(--space-xl);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.page-banner img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  display: block;
}

/* ---- Bloc texte + image (media-split) ---- */
.media-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}
.media-split--reverse .media-split__media { order: 2; }
.media-split--reverse .media-split__text { order: 1; }

.media-split__media img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

/* ---- Liste éditoriale de services (alternative aux cartes) ---- */
.feature-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-border);
}

.feature-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: var(--space-lg);
  align-items: center;
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition-fast);
}

.feature-row:hover {
  background: var(--color-bg-alt);
}

.feature-row__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--gradient-growth);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-sm);
  flex-shrink: 0;
}

.feature-row__body h3 {
  font-size: var(--fs-md);
  margin-bottom: var(--space-3xs);
}

.feature-row__body p {
  font-size: var(--fs-sm);
  max-width: 62ch;
}

.feature-row__link {
  white-space: nowrap;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-trust-blue);
}

/* ---- Bande de chiffres clés (preuve d'expérience) ---- */
.stats-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  text-align: center;
  padding-block: var(--space-xl);
}

.stats-band strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-2xl);
  color: var(--color-trust-blue);
}

.stats-band span {
  font-size: var(--fs-xs);
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ---- Tags cliquables (industries, etc.) ---- */
a.tag {
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
a.tag:hover {
  background: var(--color-trust-blue);
  border-color: var(--color-trust-blue);
  color: #fff;
}

/* ==========================================================================
   HERO PRO — nouvelle direction (fond clair, panneau data encadré)
   Composant autonome, n'affecte pas .hero utilisé ailleurs.
   ========================================================================== */

.hero-pro {
  background: var(--color-bg);
  padding-block: var(--space-2xl) var(--space-xl);
  position: relative;
  overflow: hidden;
}

/* Texture subtile en fond — grille de points, référence data/analytics, jamais dominante */
.hero-pro::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--color-border) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent 70%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent 70%);
  pointer-events: none;
}

.hero-pro__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-2xl);
  align-items: center;
  position: relative;
}

.hero-pro__title {
  font-size: clamp(2.1rem, 3.6vw, 3rem);
  line-height: 1.12;
  color: var(--color-ink);
  max-width: 19ch;
  margin-block: var(--space-sm);
}

.hero-pro__lead {
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  max-width: 52ch;
  margin-bottom: var(--space-lg);
  line-height: 1.6;
}

.hero-pro__stats {
  display: flex;
  gap: var(--space-xl);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.stat-counter strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-2xl);
  color: var(--color-trust-blue);
  font-variant-numeric: tabular-nums;
}

.stat-counter span {
  font-size: var(--fs-xs);
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ---- Panneau data encadré (élément signature) ---- */
.hero-pro__panel {
  background: var(--color-ink);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}

.hero-pro__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 5%, rgba(20, 184, 166, 0.18), transparent 60%);
  pointer-events: none;
}

.hero-pro__panel-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
  position: relative;
}

.hero-pro__panel-label {
  font-size: var(--fs-xs);
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hero-pro__panel-badge {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--color-accent);
  background: rgba(20, 184, 166, 0.14);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}

.hero-pro__chart {
  width: 100%;
  height: auto;
  position: relative;
  display: block;
}

.hero-pro__panel-caption {
  font-size: var(--fs-xs);
  color: #64748b;
  margin-top: var(--space-sm);
  position: relative;
}

.hero-pro__legend {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-sm);
  position: relative;
}
.hero-pro__legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-xs);
  color: #94a3b8;
}
.hero-pro__legend span::before {
  content: "";
  width: 10px;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
}
.hero-pro__legend span.is-spend { color: #64748b; }
.hero-pro__legend span.is-revenue { color: var(--color-accent); }

.chart-line-spend {
  fill: none;
  stroke: #475569;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: draw-line 1.6s var(--ease-standard) forwards 0.2s;
}

.chart-line-revenue {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: draw-line 1.8s var(--ease-standard) forwards 0.5s;
}

.chart-dot {
  opacity: 0;
  animation: fade-in-dot 0.5s ease forwards 2.1s;
}

@keyframes draw-line { to { stroke-dashoffset: 0; } }
@keyframes fade-in-dot { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .chart-line-spend, .chart-line-revenue { animation: none; stroke-dashoffset: 0; }
  .chart-dot { animation: none; opacity: 1; }
}

/* ==========================================================================
   PLACEHOLDER VISUEL — emplacement photo à remplacer par le client
   ========================================================================== */

.placeholder-visual {
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 320px;
  padding: var(--space-lg);
  text-align: center;
  color: var(--color-text-faint);
}

.placeholder-visual svg {
  width: 36px;
  height: 36px;
  opacity: 0.55;
}

.placeholder-visual span {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ==========================================================================
   SERVICE EN AVANT (asymétrique) — casse la monotonie liste/carte
   ========================================================================== */

.service-feature {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-lg);
  align-items: center;
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-alt);
  margin-bottom: var(--space-lg);
}

.service-feature__icon {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-md);
  background: var(--gradient-growth);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-md);
  flex-shrink: 0;
}

.service-feature__body h3 {
  font-size: var(--fs-lg);
  margin-bottom: var(--space-2xs);
}

.service-feature__body p {
  font-size: var(--fs-sm);
  max-width: 60ch;
}

/* ==========================================================================
   CITATION UNIQUE (remplace la grille de témoignages identiques)
   ========================================================================== */

.quote-feature {
  position: relative;
  padding: var(--space-xl) var(--space-2xl);
  background: var(--color-ink);
  border-radius: var(--radius-xl);
  color: #fff;
}

.quote-feature__mark {
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.55;
  display: block;
  margin-bottom: var(--space-sm);
}

.quote-feature p {
  font-size: var(--fs-xl);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.4;
  max-width: 58ch;
}

.quote-feature__author {
  margin-top: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.quote-feature__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gradient-growth);
  flex-shrink: 0;
}

.quote-feature__author strong {
  display: block;
  color: #fff;
  font-size: var(--fs-sm);
}

.quote-feature__author span {
  color: #94a3b8;
  font-size: var(--fs-xs);
}

.quote-logos {
  display: flex;
  gap: var(--space-xl);
  margin-top: var(--space-lg);
  flex-wrap: wrap;
  color: var(--color-text-faint);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
}

/* ---- Séparateur discret entre sections (remplace les blocs de fond) ---- */
.section-rule {
  border-top: 1px solid var(--color-border);
}

/* ==========================================================================
   HERO PHOTO — direction "photo vivante" : une vraie photo statique,
   habillée d'éléments SVG animés qui donnent l'illusion de mouvement.
   Deux variantes : --bars-ring (FR) et --network (DE).
   ========================================================================== */

.hero-photo-section {
  background: var(--color-bg);
  padding-block: var(--space-2xl) var(--space-xl);
}

.hero-photo-section__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

.hero-photo-section__title {
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  line-height: 1.15;
  color: var(--color-ink);
  max-width: 21ch;
  margin-block: var(--space-sm);
}

.hero-photo-section__lead {
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  max-width: 50ch;
  margin-bottom: var(--space-lg);
  line-height: 1.6;
}

.hero-photo {
  position: relative;
}

.hero-photo__img {
  width: 100%;
  aspect-ratio: 4 / 3.3;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

/* ---- Cartes flottantes (effet "photo vivante") ---- */
.floating-card {
  position: absolute;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-sm) var(--space-md);
  animation: float-bob 4.5s ease-in-out infinite;
}

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

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

.floating-card__label {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
}

/* ---- Variante barres (FR) ---- */
.floating-card--bars {
  top: 7%;
  left: 6%;
}

.mini-bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 34px;
}

.mini-bars span {
  width: 7px;
  border-radius: 2px 2px 0 0;
  background: var(--gradient-growth);
  transform: scaleY(0);
  transform-origin: bottom;
  animation: bar-grow 0.9s var(--ease-standard) forwards;
}
.mini-bars span:nth-child(1) { height: 40%; animation-delay: 0.15s; }
.mini-bars span:nth-child(2) { height: 62%; animation-delay: 0.3s; }
.mini-bars span:nth-child(3) { height: 48%; animation-delay: 0.45s; }
.mini-bars span:nth-child(4) { height: 85%; animation-delay: 0.6s; }
.mini-bars span:nth-child(5) { height: 100%; animation-delay: 0.75s; }

@keyframes bar-grow { to { transform: scaleY(1); } }

@media (prefers-reduced-motion: reduce) {
  .mini-bars span { animation: none; transform: scaleY(1); }
}

/* ---- Bandeau légende photo (une ligne, ancré en bas, visible sur mobile) ---- */
.photo-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(17, 24, 39, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  text-align: center;
  padding: 0.7rem var(--space-sm);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  font-size: var(--fs-xs);
  white-space: nowrap;
}
.photo-caption strong {
  font-family: var(--font-display);
  font-weight: 800;
  color: #fff;
}

/* ---- Variante position bas-droite (badge stat seule, sans ring/bars) ---- */
.floating-card--bottom-right {
  top: auto;
  left: auto;
  bottom: 7%;
  right: 6%;
}

/* ---- Variante anneau de progression (FR) ---- */
.floating-card--ring {
  bottom: 7%;
  right: 6%;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.floating-ring {
  width: 52px;
  height: 52px;
  transform: rotate(-90deg);
  flex-shrink: 0;
}
.floating-ring__bg {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 5;
}
.floating-ring__fg {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  animation: ring-fill 1.6s var(--ease-standard) forwards 0.4s;
}
@keyframes ring-fill { to { stroke-dashoffset: 22; } }

@media (prefers-reduced-motion: reduce) {
  .floating-ring__fg { animation: none; stroke-dashoffset: 22; }
}

.floating-card__stat strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-lg);
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}
.floating-card__stat span {
  font-size: 0.65rem;
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ---- Variante donut multi-segments (DE) ---- */
.floating-card--donut {
  top: 8%;
  right: 6%;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.donut-chart {
  width: 64px;
  height: 64px;
  transform: rotate(-90deg);
  flex-shrink: 0;
}
.donut-chart circle {
  fill: none;
  stroke-width: 6;
}
.donut-chart__bg { stroke: var(--color-border); }
.donut-chart__seg1 {
  stroke: var(--color-trust-blue);
  stroke-dasharray: 175;
  stroke-dashoffset: 175;
  animation: donut-fill 1s var(--ease-standard) forwards 0.2s;
}
.donut-chart__seg2 {
  stroke: var(--color-accent);
  stroke-dasharray: 175;
  stroke-dashoffset: 175;
  transform-origin: 32px 32px;
  transform: rotate(144deg);
  animation: donut-fill-2 1s var(--ease-standard) forwards 0.9s;
}
@keyframes donut-fill { to { stroke-dashoffset: 105; } }
@keyframes donut-fill-2 { to { stroke-dashoffset: 131; } }

@media (prefers-reduced-motion: reduce) {
  .donut-chart__seg1 { animation: none; stroke-dashoffset: 105; }
  .donut-chart__seg2 { animation: none; stroke-dashoffset: 131; }
}

/* ---- Points de réseau flottants (DE) ---- */
.network-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 0 rgba(20, 184, 166, 0.5);
  animation: dot-pulse 2.4s ease-out infinite;
}
.network-dot--1 { top: 12%; left: 10%; animation-delay: 0s; }
.network-dot--2 { bottom: 22%; left: 4%; background: var(--color-trust-blue); box-shadow: 0 0 0 0 rgba(29, 78, 216, 0.5); animation-delay: 0.8s; }
.network-dot--3 { bottom: 8%; left: 40%; animation-delay: 1.6s; }

@keyframes dot-pulse {
  0% { box-shadow: 0 0 0 0 rgba(20, 184, 166, 0.5); }
  70% { box-shadow: 0 0 0 10px rgba(20, 184, 166, 0); }
  100% { box-shadow: 0 0 0 0 rgba(20, 184, 166, 0); }
}

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

.network-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.network-lines line {
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

/* ---- Breadcrumb ---- */
.breadcrumb {
  font-size: var(--fs-xs);
  color: var(--color-text-faint);
  padding-block: var(--space-md);
}
.breadcrumb a { color: var(--color-text-faint); }
.breadcrumb a:hover { color: var(--color-trust-blue); }
.breadcrumb span { margin-inline: var(--space-2xs); }

/* ---- Page header (pages internes) ---- */
.page-header {
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-xl);
}
.page-header h1 { font-size: var(--fs-3xl); }
.page-header .lead { margin-top: var(--space-sm); }

/* ---- Bloc problème / solution ---- */
.split-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

.split-block__panel {
  padding: var(--space-lg);
  border-radius: var(--radius-md);
}
.split-block__panel--problem {
  background: var(--color-bg-alt);
  border-left: 3px solid var(--color-text-faint);
}
.split-block__panel--solution {
  background: rgba(29, 78, 216, 0.05);
  border-left: 3px solid var(--color-trust-blue);
}
.split-block__panel h3 { margin-bottom: var(--space-sm); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.06em; }
.split-block__panel p { font-size: var(--fs-sm); }

/* ---- Liste bénéfices (check) ---- */
.benefit-list li {
  display: flex;
  gap: var(--space-xs);
  padding-block: var(--space-2xs);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.benefit-list li::before {
  content: "";
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--color-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2l-3.5-3.5-1.4 1.4L9 19 20 8l-1.4-1.4z'/%3E%3C/svg%3E") center/60% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2l-3.5-3.5-1.4 1.4L9 19 20 8l-1.4-1.4z'/%3E%3C/svg%3E") center/60% no-repeat;
}

/* ---- Grille industries ---- */
.industry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.industry-card {
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.industry-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}
.industry-card h3 { margin-bottom: var(--space-2xs); font-size: var(--fs-md); }
.industry-card p { font-size: var(--fs-sm); }

/* ---- Articles / Insights ---- */
.article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.article-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.article-card__thumb {
  height: 160px;
  background: var(--gradient-growth);
}
.article-card__body { padding: var(--space-md); }
.article-card__tag {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-trust-blue);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.article-card h3 { font-size: var(--fs-md); margin-block: var(--space-2xs); }
.article-card p { font-size: var(--fs-sm); }

/* ---- FAQ (accordéon) ---- */
.faq-item {
  border-bottom: 1px solid var(--color-border);
}
.faq-item__question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: var(--space-md);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-md);
  text-align: left;
}
.faq-item__icon {
  flex-shrink: 0;
  width: 20px; height: 20px;
  position: relative;
}
.faq-item__icon::before, .faq-item__icon::after {
  content: "";
  position: absolute;
  background: var(--color-ink);
  transition: transform var(--transition-fast);
}
.faq-item__icon::before { top: 9px; left: 2px; width: 16px; height: 2px; }
.faq-item__icon::after { top: 2px; left: 9px; width: 2px; height: 16px; }
.faq-item.is-open .faq-item__icon::after { transform: rotate(90deg); opacity: 0; }

.faq-item__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-base);
}
.faq-item__answer p {
  font-size: var(--fs-sm);
  padding-bottom: var(--space-md);
}

/* ---- Formulaire de contact ---- */
.form-field {
  margin-bottom: var(--space-md);
}
.form-field label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  margin-bottom: var(--space-2xs);
  color: var(--color-ink-soft);
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  background: var(--color-bg);
  transition: border-color var(--transition-fast);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--color-trust-blue);
  outline: none;
}
.form-field textarea { resize: vertical; min-height: 120px; }

.form-status {
  font-size: var(--fs-sm);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  margin-top: var(--space-sm);
  display: none;
}
.form-status.is-success {
  display: block;
  background: rgba(20, 184, 166, 0.1);
  color: var(--color-accent-dark);
}
.form-status.is-error {
  display: block;
  background: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
}

.contact-info-card {
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}
.contact-info-card dt {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-faint);
  margin-top: var(--space-md);
}
.contact-info-card dt:first-child { margin-top: 0; }
.contact-info-card dd {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--color-ink);
}

/* ---- Fil d'expertise (tags) ---- */
.lang-flags {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: var(--space-3xs);
}
.lang-flags__item {
  display: flex;
  align-items: center;
  gap: 5px;
}
.lang-flags__item svg {
  width: 20px;
  height: 14px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px var(--color-border);
  flex-shrink: 0;
}
.lang-flags__item span {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}
.tag {
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  color: var(--color-ink-soft);
}

/* ==========================================================================
   SIGNATURE DE MARQUE — phrase forte réutilisée dans le Hero et le CTA final
   ========================================================================== */
.brand-signature {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.25;
  color: var(--color-ink);
  max-width: 18ch;
  margin-block: var(--space-md) var(--space-lg);
}
.brand-signature em {
  font-style: normal;
  background: linear-gradient(to top, rgba(20,184,166,0.28) 42%, transparent 42%);
}
.brand-signature--light {
  color: #fff;
  max-width: 22ch;
}
.brand-signature--light em {
  background: linear-gradient(to top, rgba(20,184,166,0.4) 42%, transparent 42%);
}
.brand-signature--sm {
  font-size: var(--fs-lg);
  max-width: 26ch;
  margin-block: 0 var(--space-lg);
  margin-inline: auto;
}

/* ---- Liens en ligne dans un paragraphe (visibles, pas juste du texte) ---- */
.text-links a {
  color: var(--color-trust-blue);
  font-weight: 600;
}
.text-links a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   LES PROBLÈMES QUE JE RÉSOUS — reconnaissance directe, pas un bloc de texte
   ========================================================================== */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.problem-card {
  background: var(--color-bg);
  padding: var(--space-lg);
  transition: background var(--transition-fast);
}
.problem-card:hover {
  background: var(--color-bg-alt);
}
.problem-card__mark {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-xl);
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}
.problem-card h3 {
  font-size: var(--fs-md);
  line-height: 1.35;
  margin-bottom: var(--space-xs);
}
.problem-card p {
  font-size: var(--fs-sm);
}

/* ==========================================================================
   COMMENT JE PENSE — philosophie, très épurée typographiquement
   ========================================================================== */
.principle-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.principle {
  padding-inline: var(--space-lg);
  border-left: 1px solid var(--color-border);
}
.principle:first-child {
  padding-left: 0;
  border-left: none;
}
.principle h3 {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  margin-bottom: var(--space-sm);
}
.principle p {
  font-size: var(--fs-sm);
  line-height: 1.7;
}

/* ==========================================================================
   EXPÉRIENCE — statistique typographique géante (rythme visuel : texte pur)
   ========================================================================== */
.big-figure-block {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2xl);
  align-items: center;
}
.big-figure {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4.5rem, 9vw, 7.5rem);
  line-height: 0.9;
  color: var(--color-trust-blue);
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.big-figure span {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: var(--space-xs);
}

/* ---- Système de services (timeline horizontale, 5 étapes réelles) ---- */
.process-list--5 {
  grid-template-columns: repeat(5, 1fr);
}

/* ---- Timeline (parcours pro - page About) ---- */
.timeline {
  border-left: 2px solid var(--color-border);
  padding-left: var(--space-lg);
}
.timeline-item {
  position: relative;
  padding-bottom: var(--space-lg);
}
.timeline-item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-lg) - 5px);
  top: 4px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--color-trust-blue);
}
.timeline-item__meta {
  font-size: var(--fs-xs);
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.timeline-item h3 { font-size: var(--fs-md); margin-block: var(--space-3xs) var(--space-2xs); }
.timeline-item p { font-size: var(--fs-sm); }