/* ==========================================================================
   LE MUSCLÉ DU WEB — Stitch Design Overrides
   Chargé EN DERNIER pour écraser les composants génériques
   ========================================================================== */

/* ═══════════════════════════════════════════════
   HERO SECTION — Stitch Redesign
   ═══════════════════════════════════════════════ */
.hero-stitch {
  padding-top: calc(var(--space-32) + 80px);
  padding-bottom: var(--space-16);
  position: relative;
  overflow: hidden;
}
.hero-stitch--dark { background: var(--color-bg-darkest); }
.hero-stitch--alt { background: var(--color-bg-dark); }

/* ── Geometric tension: angled shape behind text ── */
.hero-stitch__geo {
  position: absolute;
  top: 0;
  left: 0;
  width: 62%;
  height: 100%;
  background: rgba(255, 138, 0, 0.025);
  clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
  pointer-events: none;
  z-index: 0;
}

/* ── Diagonal accent line ── */
.hero-stitch__line {
  position: absolute;
  top: 60px;
  right: 38%;
  width: 2px;
  height: 120%;
  background: linear-gradient(to bottom, transparent, rgba(255, 138, 0, 0.15) 30%, rgba(255, 138, 0, 0.08) 70%, transparent);
  transform: rotate(12deg);
  transform-origin: top center;
  pointer-events: none;
  z-index: 0;
}

/* ── Grid: asymmetric 1.25fr / 0.75fr ── */
.hero-stitch__inner {
  display: grid !important;
  grid-template-columns: 1.25fr 0.75fr;
  gap: var(--space-12);
  align-items: center;
  position: relative;
  z-index: 1;
}

/* ── Badge ── */
.hero-stitch .hero-stitch__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 6px 16px;
  border: 1px solid rgba(255, 138, 0, 0.3);
  border-radius: 2px;
  margin-bottom: var(--space-6);
  background: rgba(255, 138, 0, 0.06);
}

/* ── Title: extreme weight contrast ── */
.hero-stitch__title {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5.5vw, 4.2rem) !important;
  line-height: 1.05 !important;
  margin-bottom: var(--space-6);
  letter-spacing: -1px;
}
.hero-stitch__title-light {
  display: block;
  font-weight: 300;
  color: var(--color-text-primary);
}
.hero-stitch__title-heavy {
  font-weight: 900;
  color: var(--color-accent);
  letter-spacing: -2px;
}
.hero-stitch__title-rest {
  font-weight: 800;
  color: var(--color-text-primary);
}

/* ── Subtitle ── */
.hero-stitch .hero-stitch__subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  max-width: 580px;
  margin-bottom: var(--space-8);
  line-height: 1.7;
  border-left: 3px solid rgba(255, 138, 0, 0.3);
  padding-left: var(--space-5);
}

/* ── Buttons: strict hierarchy ── */
.hero-stitch__actions {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}
a.hero-stitch__cta-primary {
  display: inline-flex !important;
  align-items: center;
  gap: var(--space-3);
  background: linear-gradient(135deg, #FF8A00 0%, #D67400 100%) !important;
  color: #fff !important;
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 1px;
  padding: var(--space-4) var(--space-8) !important;
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 20px rgba(255, 138, 0, 0.3);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
a.hero-stitch__cta-primary svg {
  transition: transform 0.3s ease;
  width: 18px;
  height: 18px;
  display: inline-block;
}
a.hero-stitch__cta-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 35px rgba(255, 138, 0, 0.45);
  color: #fff !important;
}
a.hero-stitch__cta-primary:hover svg {
  transform: translateX(4px);
}

a.hero-stitch__cta-secondary {
  display: inline-flex !important;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted) !important;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.9rem;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding: 0 0 2px 0 !important;
  background: transparent !important;
  border-radius: 0;
  box-shadow: none;
  transition: all 0.3s ease;
}
a.hero-stitch__cta-secondary:hover {
  color: var(--color-accent) !important;
  border-bottom-color: var(--color-accent);
}
.hero-stitch__arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}
a.hero-stitch__cta-secondary:hover .hero-stitch__arrow {
  transform: translateX(5px);
}

/* ── Visual (right column) ── */
.hero-stitch__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .hero-stitch { padding-top: calc(var(--space-28) + 60px); padding-bottom: var(--space-10); }
  .hero-stitch__inner { grid-template-columns: 1fr !important; gap: var(--space-8); }
  .hero-stitch__geo { width: 100%; clip-path: none; }
  .hero-stitch__line { display: none; }
  .hero-stitch__visual { display: none; }
  .hero-stitch__title { font-size: clamp(2rem, 8vw, 3rem) !important; }
  .hero-stitch .hero-stitch__subtitle { border-left: none; padding-left: 0; }
  .hero-stitch__actions { flex-direction: column; align-items: flex-start; }
}

/* ═══════════════════════════════════════════════
   STATS BAND — Stitch Redesign
   Rôle : bande chiffrée entre Hero et contenu
   Dépendances : --color-accent, --font-heading
   ═══════════════════════════════════════════════ */
.stats-band {
  padding-block: var(--space-8) !important;
  border-bottom: 1px solid rgba(255, 138, 0, 0.08);
}
.stats-band .stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.stats-band .stat {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  position: relative;
}
/* Séparateur vertical entre stats (pas sur le dernier) */
.stats-band .stat:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 25%;
  height: 50%;
  width: 1px;
  background: rgba(255, 138, 0, 0.15);
}
.stats-band .stat__value {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3vw, 2.5rem) !important;
  font-weight: 900 !important;
  color: var(--color-accent) !important;
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: var(--space-2);
}
.stats-band .stat__label {
  font-size: 0.7rem !important;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 500;
}
@media (max-width: 768px) {
  .stats-band .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .stats-band .stat:nth-child(2)::after { display: none; }
}

/* ═══════════════════════════════════════════════
   PITCH BLOCK "POURQUOI MOI" — Stitch Redesign
   Rôle : argumentaire texte avec accroche visuelle
   ═══════════════════════════════════════════════ */
.pitch-block {
  background: var(--color-bg-card) !important;
  border: 1px solid var(--color-border) !important;
  border-left: 4px solid var(--color-accent) !important;
  border-radius: var(--radius-sm) !important;
  padding: var(--space-10) var(--space-8) !important;
  position: relative;
  height: 100% !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.pitch-block::before {
  content: '"';
  position: absolute;
  top: var(--space-4);
  right: var(--space-6);
  font-family: Georgia, serif;
  font-size: 5rem;
  color: rgba(255, 138, 0, 0.06);
  line-height: 1;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════
   SERVICE CARDS — Stitch Redesign
   Rôle : 4 cards services avec 1 featured
   ═══════════════════════════════════════════════ */
/* Override de la grille pour les services - grille uniforme 2x2 */
#services .grid.grid--2 {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: var(--space-5);
}
/* Cards toutes égales : plus de span ni de taille différente */
#services .grid.grid--2 .service-card:first-child {
  grid-row: span 1 !important;
  border-color: rgba(255, 138, 0, 0.2);
  background: linear-gradient(165deg, var(--color-bg-card) 0%, rgba(255, 138, 0, 0.03) 100%);
}
/* Toutes les cards : border-radius réduit, hover distinctif */
.service-card {
  border-radius: var(--radius-sm) !important;
  border-left: 3px solid transparent !important;
  transition: all 0.3s ease !important;
}
.service-card:hover {
  border-left-color: var(--color-accent) !important;
  transform: translateX(4px) !important;
  box-shadow: -4px 0 20px rgba(255, 138, 0, 0.08) !important;
}
.service-card__icon-wrap {
  border-radius: var(--radius-xs, 4px) !important;
}
@media (max-width: 768px) {
  #services .grid.grid--2 {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════
   DOUBLE STRATEGY (SEO + GEO) — Stitch Redesign
   Rôle : mise en avant stratégie combinée
   ═══════════════════════════════════════════════ */
.double-grid {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  gap: var(--space-6);
  align-items: center !important;
}
.double-card {
  border-radius: var(--radius-sm) !important;
  border-left: 3px solid transparent;
  transition: all 0.3s ease;
  height: 100% !important;
}
.double-card:not(.double-card--plus):hover {
  border-left-color: var(--color-accent);
  transform: translateX(4px);
}
.double-card--plus {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  background: none !important;
  border: none !important;
  padding: 0 var(--space-4) !important;
  flex: none !important;
  max-width: none !important;
  width: 60px !important;
}
.double-card--plus span {
  font-family: var(--font-heading);
  font-size: 3rem !important;
  font-weight: 900;
  color: var(--color-accent);
  opacity: 0.65 !important;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.double-caption {
  text-align: left !important;
  border-left: 3px solid rgba(255, 138, 0, 0.2);
  padding-left: var(--space-4);
  margin-top: var(--space-8);
  font-style: normal !important;
  font-weight: 500;
  color: var(--color-text-secondary) !important;
}
@media (max-width: 768px) {
  .double-grid {
    grid-template-columns: 1fr !important;
  }
  .double-card--plus { padding: var(--space-2) 0 !important; width: auto !important; }
  .double-card--plus span { font-size: 2rem !important; }
}

/* ═══════════════════════════════════════════════
   USE CASE CARDS — Stitch Redesign
   Rôle : cards résultats clients
   ═══════════════════════════════════════════════ */
.card-case {
  border-radius: var(--radius-sm) !important;
  overflow: hidden;
  border-left: 3px solid transparent !important;
}
.card-case:hover {
  border-left-color: var(--color-accent) !important;
  transform: translateX(4px) translateY(-2px) !important;
}
.card-case__img {
  aspect-ratio: 16/9;
  background: linear-gradient(
    135deg,
    rgba(255, 138, 0, 0.05) 0%,
    var(--color-bg-elevated) 100%
  ) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: rgba(255, 255, 255, 0.15);
  letter-spacing: -1px;
}
.card-case .badge {
  border-radius: var(--radius-xs, 4px) !important;
  background: rgba(255, 138, 0, 0.08) !important;
  border: 1px solid rgba(255, 138, 0, 0.2);
}

/* ═══════════════════════════════════════════════
   PROCESS STEPS — Stitch Redesign
   Rôle : 4 étapes process, pas de grid symétrique
   ═══════════════════════════════════════════════ */
.steps {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 !important;
  counter-reset: step;
}
.step {
  text-align: left !important;
  padding: var(--space-6) var(--space-5) !important;
  position: relative;
  border-top: 2px solid var(--color-border);
  transition: all 0.3s ease !important;
  background: transparent;
}
/* Etape 1 surlignée par défaut, MAIS supprimée si le conteneur est survolé  */
.step:first-child {
  border-top-color: var(--color-accent);
}
.steps:hover .step:first-child {
  border-top-color: var(--color-border);
}
/* Quand UNE étape est survolée, elle prend le highlight */
.step:hover {
  background: var(--color-bg-card);
  border-top-color: var(--color-accent) !important;
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  z-index: 2;
  border-radius: var(--radius-sm);
}
.step__number {
  font-size: var(--text-3xl) !important;
  color: rgba(255, 138, 0, 0.15) !important;
  margin-bottom: var(--space-3);
  line-height: 1;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  display: inline-block;
}
.step:hover .step__number {
  color: var(--color-accent) !important;
  transform: scale(1.1) translateX(5px);
  text-shadow: 0 0 15px rgba(255,138,0,0.4);
}
.step__title {
  font-size: var(--text-base) !important;
  margin-bottom: var(--space-2);
}
.step__text {
  line-height: 1.6;
}
@media (max-width: 1024px) {
  .steps { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  .steps { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════
   COMPARISON LIST — Stitch Redesign
   Rôle : liste Consultant vs Agence
   ═══════════════════════════════════════════════ */
.comparison-list {
  max-width: 680px;
}
.comparison-item {
  border-radius: var(--radius-sm) !important;
  border-left: 3px solid transparent !important;
  transition: all 0.3s ease;
}
.comparison-item:hover {
  border-left-color: var(--color-accent) !important;
  transform: translateX(4px);
}
.comparison-item__icon--good {
  border-radius: 3px !important;
}

/* ═══════════════════════════════════════════════
   PILLAR LINKS — Stitch Redesign
   Rôle : maillage interne vers pages pilier
   ═══════════════════════════════════════════════ */
.pillar-link {
  border-radius: var(--radius-sm) !important;
  border-left: 3px solid transparent !important;
  transition: all 0.3s ease !important;
}
.pillar-link:hover {
  border-left-color: var(--color-accent) !important;
  transform: translateX(4px) !important;
}

/* ═══════════════════════════════════════════════
   CTA BLOCK — Stitch Redesign
   Rôle : bloc CTA final, rupture visuelle
   ═══════════════════════════════════════════════ */
.cta-block {
  text-align: left !important;
  border-radius: var(--radius-sm) !important;
  padding: var(--space-12) var(--space-10) !important;
  border: 1px solid rgba(255, 138, 0, 0.12) !important;
  background: var(--color-bg-card) !important;
  position: relative;
  overflow: hidden;
}
.cta-block--with-avatar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: var(--space-10) !important;
}
.cta-block__content {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  position: relative;
  z-index: 2;
  text-align: left !important;
}
.cta-block__avatar {
  flex: 0 0 auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  position: relative;
  z-index: 2;
}
@media (max-width: 768px) {
  .cta-block--with-avatar {
    flex-direction: column-reverse; /* Put avatar below text on mobile */
    text-align: center !important;
  }
}
.cta-block::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 45% !important;
  height: 100% !important;
  background: rgba(255, 138, 0, 0.02) !important;
  clip-path: polygon(0 0, 100% 0, 70% 100%, 0% 100%) !important;
  transform: none !important;
  border-radius: 0 !important;
}
.cta-block__title {
  text-align: left !important;
  font-size: clamp(1.8rem, 3.5vw, 2.5rem) !important;
  line-height: 1.15 !important;
  position: relative;
}
.cta-block__text {
  text-align: left !important;
  margin-inline: 0 !important;
  max-width: 520px !important;
  position: relative;
}
.cta-block__actions {
  justify-content: flex-start !important;
  position: relative;
}
/* Le CTA primaire dans le cta-block */
.cta-block__actions a.btn--primary {
  display: inline-flex !important;
  background: linear-gradient(135deg, #FF8A00 0%, #D67400 100%) !important;
  color: #fff !important;
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 1px;
  padding: var(--space-4) var(--space-8) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 6px 20px rgba(255, 138, 0, 0.3);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.cta-block__actions a.btn--primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 35px rgba(255, 138, 0, 0.45);
  color: #fff !important;
}
.cta-block__actions a.btn--secondary {
  background: transparent !important;
  border: 1px solid rgba(255, 138, 0, 0.25) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--color-text-secondary) !important;
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  padding: calc(var(--space-4) - 2px) var(--space-6) !important;
  transition: all 0.3s ease;
}
.cta-block__actions a.btn--secondary:hover {
  border-color: var(--color-accent) !important;
  color: var(--color-accent) !important;
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════
   SECTION HEADERS — Stitch Redesign
   Rôle : titres de sections alignés gauche
   ═══════════════════════════════════════════════ */
.section-header {
  text-align: left !important;
  margin-inline: 0 !important;
  max-width: none !important;
  margin-bottom: var(--space-10) !important;
}
.section-header--with-avatar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-8);
}
.section-header__avatar {
  flex-shrink: 0;
  display: flex;
  margin-bottom: var(--space-4);
}
@media (max-width: 768px) {
  .section-header--with-avatar {
    flex-direction: column-reverse; /* Put avatar above text on mobile */
    align-items: flex-start;
  }
  .section-header__avatar {
    margin-bottom: var(--space-6);
  }
}
.section-header__overtitle::before {
  width: 24px !important;
  height: 3px !important;
  background: var(--color-accent) !important;
  border-radius: 0 !important;
}
.section-header__description {
  max-width: 600px;
}

/* ═══════════════════════════════════════════════
   PILLAR PAGES — Stitch Overrides
   ═══════════════════════════════════════════════ */

/* ── Hero Pilier ── */
.hero {
  padding-top: calc(var(--space-32) + 80px) !important;
  padding-bottom: var(--space-16) !important;
  position: relative;
  overflow: hidden;
  background: var(--color-bg-darkest) !important;
}
.hero::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 55% !important;
  height: 100% !important;
  background: rgba(255, 138, 0, 0.02) !important;
  clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%) !important;
  border-radius: 0 !important;
  pointer-events: none;
}
.hero__inner {
  display: grid !important;
  grid-template-columns: 1.2fr 0.8fr !important;
  gap: var(--space-12) !important;
}
.hero h1 {
  font-family: var(--font-heading) !important;
  font-size: clamp(2.5rem, 5vw, 4rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -1px !important;
}
.hero h1 .text-accent {
  font-weight: 900 !important;
}
.hero__stats-card {
  border-radius: 4px !important;
  background: linear-gradient(145deg, var(--color-bg-card) 0%, rgba(255, 138, 0, 0.03) 100%) !important;
  border: 1px solid rgba(255, 138, 0, 0.1) !important;
  position: relative;
}
.hero__stats-card::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px; bottom: -1px; right: -1px;
  background: linear-gradient(to bottom right, rgba(255,138,0,0.2), transparent);
  border-radius: 4px;
  z-index: -1;
}

@media (max-width: 768px) {
  .hero__inner {
    grid-template-columns: 1fr !important;
  }
  .hero::before {
    width: 100% !important;
    clip-path: none !important;
  }
}

/* ── Definition Block ── */
.definition-block {
  border-radius: 4px !important;
  border-left: 4px solid var(--color-accent) !important;
  background: linear-gradient(90deg, rgba(255,138,0,0.03) 0%, transparent 100%) !important;
}

/* ── Missions Grid ── */
.missions-grid .mission-card {
  border-radius: 4px !important;
  border-left: 3px solid transparent !important;
  transition: all 0.3s ease !important;
  padding: var(--space-7) !important;
}
.missions-grid .mission-card:hover {
  border-left-color: var(--color-accent) !important;
  transform: translateX(4px) !important;
  box-shadow: -4px 0 20px rgba(255, 138, 0, 0.05) !important;
}
.mission-card__icon {
  background: rgba(255, 138, 0, 0.05);
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px;
  margin-bottom: var(--space-4);
}

/* ── Missions With Side Avatar Layout ── */
/* Flex row: grille 2-cols à gauche, avatar collé à droite */
.missions-with-avatar {
  display: flex !important;
  gap: var(--space-12);
  align-items: flex-start;
}
.missions-with-avatar .missions-grid {
  flex: 1 !important;
  min-width: 0;
  grid-template-columns: repeat(2, 1fr) !important;
}
.missions-avatar {
  flex-shrink: 0;
  width: 300px;
  position: sticky;
  top: 110px;
}
@media (max-width: 1200px) {
  .missions-avatar { width: 240px; }
}
@media (max-width: 1024px) {
  .missions-with-avatar { flex-direction: column; }
  .missions-with-avatar .missions-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    width: 100%;
  }
  .missions-avatar { display: none; }
}
@media (max-width: 640px) {
  .missions-with-avatar .missions-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Global: padding interne cohérent sur tous les blocs-card ── */
/* Empêche le texte d'être collé aux bordures */
.reddit-card,
.urgency-card,
.sector-card {
  padding: var(--space-7) !important;
}
.no-list__item {
  padding: var(--space-5) var(--space-6) !important;
}
/* Renforcement du padding-left sur les blocs avec border-left */
.missions-grid .mission-card,
.cases-grid .case-card,
.no-list__item {
  padding-left: var(--space-7) !important;
}

/* ── Ce que je ne fais pas (No List) ── */
.no-list__item {
  border-radius: 4px !important;
  border-left: 3px solid transparent !important;
  transition: all 0.3s ease;
}
.no-list__item:hover {
  border-left-color: #ef4444 !important;
  transform: translateX(4px);
}
.no-list__icon {
  border-radius: 3px !important;
}

/* ── Comparison Table ── */
.comparison-table table {
  border-radius: 4px !important;
}
.comparison-table th {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.8rem !important;
}
.comparison-table td, .comparison-table th {
  padding: var(--space-5) var(--space-6) !important;
}

/* ── Offer Steps (Processus) pillar pages ── */
.offer-steps {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: var(--space-5) !important;
}
.offer-step {
  border: 1px solid var(--color-border) !important;
  border-top: 2px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
  padding: var(--space-8) var(--space-6) var(--space-6) var(--space-6) !important;
  background: var(--color-bg-card) !important;
  position: relative;
  transition: all 0.3s ease !important;
}
/* Étape 1 highlight, si conteneur non-survolé */
.offer-step:first-child {
  border-top-color: var(--color-accent) !important;
}
.offer-steps:hover .offer-step:first-child {
  border-top-color: var(--color-border) !important;
}
.offer-step:hover {
  border-top-color: var(--color-accent) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
  transform: translateY(-3px) !important;
}
.offer-step__number {
  position: static !important;
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-4xl) !important;
  font-weight: 900 !important;
  color: var(--color-accent) !important;
  opacity: 0.25 !important;
  line-height: 1;
  margin-bottom: var(--space-4) !important;
  transition: all 0.3s ease !important;
}
.offer-step:hover .offer-step__number {
  opacity: 0.8 !important;
  transform: scale(1.05) !important;
}
@media (max-width: 1024px) {
  .offer-steps { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  .offer-steps { grid-template-columns: 1fr !important; }
}

/* ── Cases Grid (Pillar pages) ── */
.cases-grid .case-card {
  border-radius: 4px !important;
  border-left: 3px solid transparent !important;
  padding: var(--space-7) !important;
}
.cases-grid .case-card:hover {
  border-left-color: var(--color-accent) !important;
  transform: translateX(4px) translateY(-2px) !important;
}

/* ── FAQ ── */
.faq-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}
.faq-item__question {
  padding: var(--space-6) var(--space-4) !important;
  font-size: var(--text-base) !important;
}
.faq-item__answer-inner {
  padding: 0 var(--space-4) var(--space-6) !important;
}

/* ── Pillar Cards (Cross-linking) ── */
.pillar-card {
  border-radius: 4px !important;
  border-left: 3px solid transparent !important;
}
.pillar-card:hover {
  border-left-color: var(--color-accent) !important;
  transform: translateX(4px) !important;
}

/* ═══════════════════════════════════════════════
   CONTACT PAGE — Stitch Overrides
   ═══════════════════════════════════════════════ */

/* ── Hero Contact ── */
.hero-section {
  padding-top: 140px !important;
  padding-bottom: var(--space-16) !important;
}
.hero-section::before {
  border-radius: 0 !important;
  clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%) !important;
  background: rgba(255, 138, 0, 0.02) !important;
  width: 60% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
}
.hero-section h1 {
  font-family: var(--font-heading) !important;
  font-size: clamp(2.5rem, 5vw, 4rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -1px !important;
  margin-bottom: var(--space-6) !important;
}
.hero-section h1 .text-accent {
  font-weight: 900 !important;
}

/* ── Formulaire (dans CTAContact) ── */
.cta-form {
  margin-top: var(--space-10) !important;
  position: relative;
  z-index: 2; /* Pour rester cliquable au-dessus du background shape */
}
.cta-form__field label {
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: var(--color-text-muted) !important;
}
.cta-form__field input,
.cta-form__field select,
.cta-form__field textarea {
  border-radius: 3px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--color-text-primary) !important;
  padding: 14px 16px !important;
  transition: all 0.3s ease !important;
}
.cta-form__field input:focus,
.cta-form__field select:focus,
.cta-form__field textarea:focus {
  border-color: var(--color-accent) !important;
  background: rgba(255, 138, 0, 0.02) !important;
  box-shadow: 4px 4px 0 rgba(255, 138, 0, 0.1) !important;
  outline: none !important;
}
.cta-form button[type="submit"] {
  border-radius: 3px !important;
  background: linear-gradient(135deg, #FF8A00 0%, #D67400 100%) !important;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding: 16px 32px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 6px 20px rgba(255, 138, 0, 0.3) !important;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
.cta-form button[type="submit"]:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 35px rgba(255, 138, 0, 0.45) !important;
}

/* Fix CTA Block layout when contains form */
.cta-block:not(.cta-block--with-avatar) {
  display: flex !important;
  flex-direction: column !important;
}
@media (min-width: 1024px) {
  /* Si la page Contact gère le form, on veut peut-être le placer à côté du texte ? */
  /* Sur un design premium, on laisse souvent le form prendre de la place */
  .cta-form {
    max-width: 100% !important;
  }
}

/* ── Contact Cards ── */
.contact-card {
  border-radius: 4px !important;
  border-left: 3px solid transparent !important;
  background: linear-gradient(145deg, var(--color-bg-card) 0%, rgba(255, 138, 0, 0.02) 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  transition: all 0.3s ease !important;
}
.contact-card:hover {
  border-left-color: var(--color-accent) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}
.contact-card__icon {
  background: rgba(255, 138, 0, 0.05) !important;
  width: 60px; height: 60px;
  display: inline-flex !important; align-items: center; justify-content: center;
  border-radius: 4px !important;
  font-size: 1.5rem !important;
  margin: 0 auto var(--space-5) !important;
}

/* ═══════════════════════════════════════════════
   ABOUT PAGE — Stitch Overrides
   ═══════════════════════════════════════════════ */

/* ── Hero About ── */
.hero-about__photo-placeholder {
  border-radius: 4px !important;
  background: var(--color-bg-elevated) !important;
  border: 1px dashed rgba(255, 138, 0, 0.3) !important;
  position: relative;
}
.hero-about__photo-placeholder::after {
  content: '';
  position: absolute;
  top: 10px; right: 10px; bottom: -10px; left: -10px;
  background: rgba(255, 138, 0, 0.05);
  border-radius: 4px;
  z-index: -1;
}

/* ── Story Content ── */
.story-content {
  border-left: 4px solid var(--color-accent) !important;
  padding-left: var(--space-8) !important;
  margin-left: 0 !important;
}

/* ── Timeline ── */
.timeline {
  border-left-color: rgba(255, 138, 0, 0.2) !important;
}
.timeline__item::before {
  background: var(--color-bg-darkest) !important;
  border-color: var(--color-accent) !important;
  border-radius: 0 !important;
  width: 12px !important;
  height: 12px !important;
  left: -7px !important;
  box-shadow: 0 0 10px rgba(255,138,0,0.4) !important;
}
.timeline__year {
  color: var(--color-accent) !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

/* ── Diff Cards & Value Cards ── */
.diff-card, .value-card {
  border-radius: 4px !important;
  border-left: 3px solid transparent !important;
  transition: all 0.3s ease !important;
}
.diff-card:hover, .value-card:hover {
  border-left-color: var(--color-accent) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}
.diff-card__icon, .value-card__icon {
  border-radius: 4px !important;
  background: rgba(255, 138, 0, 0.05) !important;
}

/* ── Skills / Stack d'expertise ── */
.skills-container {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-12) !important;
}
.skill-group__title {
  font-family: var(--font-heading) !important;
  font-size: 1.5rem !important;
  margin-bottom: var(--space-6) !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--space-4) !important;
}
.skill-group__title::before {
  content: '';
  display: block;
  width: 20px;
  height: 3px;
  background: var(--color-accent);
}
.skill-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--space-4) !important;
}
.skill-tag {
  border-radius: 3px !important;
  padding: 8px 16px !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
  transition: all 0.3s ease !important;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: var(--color-bg-card);
  display: flex !important;
  align-items: center !important;
  gap: var(--space-3) !important;
}
.skill-tag:hover {
  border-color: rgba(255, 138, 0, 0.3) !important;
  background: rgba(255, 138, 0, 0.05) !important;
  transform: translateY(-2px) !important;
}
.skill-tag--accent {
  background: rgba(255, 138, 0, 0.1) !important;
  border-color: rgba(255, 138, 0, 0.2) !important;
  color: var(--color-text-primary) !important;
}
.skill-tag--accent:hover {
  background: rgba(255, 138, 0, 0.2) !important;
}
.skill-tag--logo {
  padding: 8px 16px 8px 8px !important;
}

/* ═══════════════════════════════════════════════
   COMPREHENSIVE RESPONSIVE — Mobile & Tablet
   ═══════════════════════════════════════════════ */

/* ── Global: fix CTA button text overflow ── */
.btn {
  white-space: normal !important;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.btn--primary, .btn--secondary, .btn--lg {
  max-width: 100%;
}

/* ── Tablet (769px — 1024px) ── */
@media (max-width: 1024px) {
  /* Hero sections reduce vertical padding */
  .hero-stitch { padding-top: calc(var(--space-20) + 80px); }
  .hero { padding-top: calc(var(--space-20) + 80px) !important; }
  .hero-section { padding-top: 120px !important; }

  /* CTA block: allow wrapping on tablet */
  .cta-block--with-avatar {
    gap: var(--space-6) !important;
  }

  /* Comparison table: responsive overflow */
  .comparison-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .comparison-table table { min-width: 600px; }
}

/* ── Mobile (max 768px) ── */
@media (max-width: 768px) {
  /* Hero stitch: reduce vertical padding, keep visual */
  .hero-stitch { padding-top: calc(var(--space-16) + 60px); padding-bottom: var(--space-8); }
  .hero-stitch__inner { grid-template-columns: 1fr !important; gap: var(--space-6) !important; text-align: center; }
  .hero-stitch__geo { width: 100%; clip-path: none; }
  .hero-stitch__line { display: none; }
  /* Visual (video/avatar) centered smaller */
  .hero-stitch__visual { display: flex !important; justify-content: center; max-width: 280px; margin-inline: auto; }
  .hero-stitch .hero-stitch__subtitle { border-left: none; padding-left: 0; }
  .hero-stitch__actions { flex-direction: column; align-items: center; }

  /* Pillar hero: reduce padding */
  .hero { padding-top: calc(var(--space-16) + 60px) !important; padding-bottom: var(--space-8) !important; }
  .hero__inner { grid-template-columns: 1fr !important; text-align: center; }

  /* Genre hero-section (contact etc.) */
  .hero-section { padding-top: 100px !important; padding-bottom: var(--space-8) !important; }

  /* Hero h1: reduce size on mobile */
  .hero h1 { font-size: clamp(1.75rem, 7vw, 2.5rem) !important; }
  .hero-section h1 { font-size: clamp(1.75rem, 7vw, 2.5rem) !important; }
  .hero-stitch__title { font-size: clamp(1.75rem, 7vw, 2.5rem) !important; }

  /* Stats band: 2 cols, tighter padding */
  .stats-band .stat { padding: var(--space-4) var(--space-3) !important; }
  .stats-band .stat__value { font-size: clamp(1.4rem, 5vw, 1.8rem) !important; }

  /* Pitch block: less padding */
  .pitch-block { padding: var(--space-6) var(--space-5) !important; }

  /* CTA block: stack vertically, center, show avatar smaller */
  .cta-block { padding: var(--space-8) var(--space-5) !important; }
  .cta-block--with-avatar {
    flex-direction: column !important;
    text-align: center !important;
    gap: var(--space-6) !important;
  }
  .cta-block__title { text-align: center !important; font-size: clamp(1.5rem, 6vw, 2rem) !important; }
  .cta-block__text { text-align: center !important; margin-inline: auto !important; }
  .cta-block__actions { justify-content: center !important; flex-direction: column !important; align-items: center !important; }
  .cta-block__actions a { width: 100% !important; text-align: center !important; justify-content: center !important; white-space: normal !important; }
  .cta-block__avatar { order: -1; max-width: 200px; margin-inline: auto; }

  /* Section headers: center on mobile */
  .section-header { text-align: center !important; }
  .section-header__description { margin-inline: auto; }

  /* Offer steps: 1 col */
  .offer-steps { grid-template-columns: 1fr !important; }

  /* Mission avatar: still visible but smaller */
  .missions-avatar { width: 160px; position: static; }
  .missions-with-avatar { flex-direction: column; align-items: center; }

  /* Pillar links: stack */
  .pillar-link { flex-direction: row; }

  /* Contact cards: center icons */
  .contact-card { text-align: center; padding: var(--space-5) !important; }
  .contact-card__icon { margin: 0 auto var(--space-4) !important; }

  /* Reduce font sizes */
  .double-card__title { font-size: var(--text-lg) !important; }

  /* Comparison table */
  .comparison-table td, .comparison-table th { padding: var(--space-3) var(--space-4) !important; font-size: var(--text-sm) !important; }

  /* Definition with badge: stack */
  .def-with-badge { grid-template-columns: 1fr !important; }
  .def-with-badge__aside { position: static !important; }

  /* Text overflow fix: ensure long text wraps properly */
  .definition-block,
  .no-list__item,
  .mission-card,
  .ctx-card,
  .strat-card {
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }
}

/* ── Small Mobile (max 480px) ── */
@media (max-width: 480px) {
  /* Global container padding */
  .container { padding-inline: var(--space-4) !important; }

  /* Stats: single column */
  .stats-band .stats-grid { grid-template-columns: 1fr !important; }
  .stats-band .stat:not(:last-child)::after { display: none; }

  /* Hero titles even smaller */
  .hero h1, .hero-section h1, .hero-stitch__title { font-size: clamp(1.5rem, 8vw, 2rem) !important; }

  /* Buttons: full width, allow text wrap */
  .btn--lg { width: 100%; text-align: center; justify-content: center; }
  a.hero-stitch__cta-primary { width: 100% !important; text-align: center !important; justify-content: center !important; }

  /* FAQ smaller paddings */
  .faq-item__question { padding: var(--space-4) !important; font-size: var(--text-sm) !important; }
  .faq-item__answer-inner { padding: 0 var(--space-4) var(--space-4) !important; }

  /* Hero visuals: even smaller */
  .hero-stitch__visual { max-width: 200px; }

  /* Footer: center brand column */
  .footer-col:first-child { text-align: center; }
  .footer-col__socials { justify-content: center; }
  .footer-col__logo { display: flex; justify-content: center; }

  /* Mission avatar hide on very small */
  .missions-avatar { display: none; }
}