/* ===================================================
   Inline overrides — styles extraits des HTML
   pour supprimer unsafe-inline de la CSP
   =================================================== */

/* Utilitaires de transition delay (hero) */
.td-05  { transition-delay: .05s; }
.td-10  { transition-delay: .1s; }
.td-15  { transition-delay: .15s; }
.td-18  { transition-delay: .18s; }
.td-20  { transition-delay: .20s; }
.td-26  { transition-delay: .26s; }
.td-34  { transition-delay: .34s; }

/* Sections padding */
.section-clients    { padding-top: 0; padding-bottom: 64px; }
.section-no-pt      { padding-top: 0; }
.section-bg-card-alt { background: var(--bg-card-alt); }
.section-bg-section  { background: var(--bg-section); }

/* Page headers */
.page-header-services { padding-top: calc(64px + 72px); padding-bottom: 48px; }
.page-header-portfolio { padding-top: calc(64px + 72px); padding-bottom: 40px; }
.page-header-legal  { padding-top: calc(64px + 72px); padding-bottom: 32px; }
.header-inner-narrow { max-width: 680px; }
.header-inner-narrow-720 { max-width: 720px; }

/* Text colors */
.text-violet-hl { color: var(--violet); }
.text-muted-color { color: var(--text-muted); }
.text-white     { color: #fff; }
.text-white-72  { color: rgba(255,255,255,0.72); }
.text-light-color { color: var(--text-light); }
.text-coral     { color: var(--coral); }
.text-sm-coral  { font-size: 0.85rem; color: var(--coral); }

/* Font size */
.fs-105 { font-size: 1.05rem; }

/* Flex / layout helpers */
.flex-col-gap-24 { display: flex; flex-direction: column; gap: 24px; }
.flex-wrap-gap-16 { display: flex; gap: 16px; flex-wrap: wrap; }
.flex-center-wrap { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.flex-col-gap-16  { display: flex; flex-direction: column; gap: 16px; }

/* Grid gaps */
.grid-2-gap-72  { gap: 72px; align-items: center; }
.grid-2-gap-64  { gap: 64px; align-items: center; }
.grid-2-gap-48  { gap: 48px; align-items: start; }
.grid-3-max-860 { max-width: 860px; margin: 0 auto; }

/* Cards */
.card-flex-col    { display: flex; flex-direction: column; justify-content: space-between; }
.card-pad-40      { padding: 40px; }
.card-pad-56-48   { padding: 56px 48px; max-width: 640px; margin: 0 auto; }
.card-cta-pad     { padding: 72px 48px; max-width: 720px; margin: 0 auto; }
.card-border-violet { border-color: rgba(108, 79, 240, 0.25); }
.card-scroll-margin { scroll-margin-top: 90px; margin-bottom: 24px; }
.card-last-scroll  { scroll-margin-top: 90px; }

/* Service list */
.service-inner { flex: 1; }
.service-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 24px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.84rem; font-weight: 700;
  color: var(--violet);
}
.service-example-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 18px; font-size: 0.84rem; color: var(--text-muted);
}

/* Service card CTA */
.cta-card-btn {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.3);
  font-size: 0.84rem;
  padding: 10px 20px;
  width: fit-content;
}
.cta-card-subtitle { color: rgba(255,255,255,0.72); font-size: 0.95rem; margin-bottom: 14px; }
.cta-card-title    { color: #fff; }
.cta-final-btn-white { background: #fff; color: var(--violet); font-weight: 700; }
.cta-final-btn-ghost {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.3);
}

/* Badge CTA */
.badge-cta {
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.2);
  margin-bottom: 0;
}
.badge-dot-white   { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,0.2); }

/* About section */
.about-grid-card { border-bottom: 1px solid var(--border); padding-bottom: 24px; }
.about-skills-row { display: flex; flex-direction: column; gap: 24px; }

/* Services detail - feature list label */
.features-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.features-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}
.features-list li { display: flex; gap: 10px; }
.features-list .check { color: var(--violet); }

/* Service price block */
.price-block {
  border-top: 1px solid var(--border);
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.price-from { font-family: 'Space Grotesk', sans-serif; font-size: 1.6rem; font-weight: 700; color: var(--violet); margin-top: 4px; }

/* How to order steps */
.order-step       { text-align: center; padding: 24px; }
.order-step-num   { font-family: 'Space Grotesk', sans-serif; font-size: 3rem; font-weight: 700; color: var(--violet); opacity: 0.2; line-height: 1; }
.order-step-desc  { font-size: 0.9rem; }
.order-cta        { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* Portfolio - sportify logo */
.logo-sportify    { background: #0d0d1a; border-radius: 50%; padding: 4px; }

/* Portfolio - CTA card */
.portfolio-cta-card { padding: 56px 48px; max-width: 640px; margin: 0 auto; }
.portfolio-cta-p    { max-width: 420px; margin-left: auto; margin-right: auto; }
.portfolio-cta-btn  { display: inline-flex; }

/* Contact page */
.contact-about-link { color: var(--violet); font-weight: 700; }
.contact-skill-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--violet-glow);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  color: var(--violet);
  flex-shrink: 0;
}
.contact-skill-item { display: flex; gap: 16px; align-items: flex-start; }
.contact-skill-desc { font-size: 0.9rem; }

/* 404 page */
.page-404 { min-height: 86vh; display: flex; align-items: center; }
.page-404-inner { max-width: 520px; margin: 0 auto; }

/* Bot section infinite symbol */
.bot-infinity-bg {
  position: absolute; bottom: 16px; right: 24px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 3rem; font-weight: 800;
  color: var(--coral); opacity: 0.07; line-height: 1;
}

/* CTA final section */
.cta-final-section { text-align: center; }
.cta-final-p { max-width: 420px; margin-left: auto; margin-right: auto; }

/* Loader button */
.btn-loader-hidden { display: none; }

/* Form feedback */
.form-feedback-hidden { display: none; }

/* Honey field */
.honey-field { display: none; }

/* Section about label */
.mb-12 { margin-bottom: 12px; }
.label-section { margin-bottom: 24px; }

/* Bot feature lists */
.feat-list      { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.feat-item      { display: flex; gap: 10px; align-items: flex-start; }
.feat-bullet-v  { color: var(--violet); font-weight: 800; margin-top: 1px; }
.feat-bullet-c  { color: var(--coral);  font-weight: 800; margin-top: 1px; }
.feat-label-v   { color: var(--text-muted); }
.feat-label-c   { color: var(--coral); }
.feat-text-sm   { font-size: 0.92rem; }
.skills-tags    { display: flex; flex-wrap: wrap; gap: 8px; }
.approach-text  { font-size: 0.92rem; }
.service-link-violet { color: var(--violet); font-weight: 700; }
/* About card inner */
.about-card-inner { padding: 40px; }
.about-card-body  { display: flex; flex-direction: column; gap: 24px; }
.about-card-skills-block { border-bottom: 1px solid var(--border); padding-bottom: 24px; }
/* card-relative for bot section */
.card-relative  { position: relative; overflow: hidden; }

.about-card-inner-pad { padding: 40px; }

/* Portfolio modal styles */
.modal-hidden { display: none; }
.modal-block-rfootball {
  background: linear-gradient(135deg, rgba(180,20,20,0.07) 0%, rgba(108,79,240,0.05) 100%);
}
.modal-label-red { color: #c0392b; }
.modal-label-coral { color: var(--coral); }
.modal-block-sportify {
  background: linear-gradient(135deg, rgba(240,106,63,0.07) 0%, rgba(108,79,240,0.05) 100%);
}
.logo-sportify-modal { background: #0d0d1a; border-radius: 50%; padding: 6px; }
.sportify-tags { flex-wrap: wrap; margin-top: 14px; margin-bottom: 18px; }
.sportify-cmds-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.modal-block-label-xs { font-size: 0.66rem; }
.modal-block-mt { margin-top: 24px; }
.modal-block-p-mb { margin-bottom: 16px; }
.btn-inline-flex { display: inline-flex; }

.td-08 { transition-delay: .08s; }
.td-14 { transition-delay: .14s; }

.about-grid-gap { gap: 64px; align-items: center; }
.section-legal-content { padding-top: 0; padding-bottom: 96px; }

/* Index — home page cleanup (services shortcut + about section) */
.max-w-800 { max-width: 800px; }
.about-grid-founder { grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: stretch; }
.about-card-center { padding: 36px 40px; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.fs-09 { font-size: 0.9rem; }
.about-cta-block { text-align: center; max-width: 960px; margin: 56px auto 0; }
.fs-098-tal { font-size: 0.98rem; text-align-last: center; }
.mt-36 { margin-top: 36px; }

/* Index — services shortcut card (subtle, not a duplicate violet CTA) */
.services-shortcut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  text-decoration: none;
  cursor: pointer;
  background: var(--violet-glow) !important;
  border-color: var(--border-strong) !important;
}
.services-shortcut:hover { border-color: var(--violet) !important; }
.services-shortcut h3 { color: var(--text); }
.services-shortcut p { margin: 0; }
.services-shortcut-arrow {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--violet);
  flex-shrink: 0;
  transition: transform 0.2s;
}
.services-shortcut:hover .services-shortcut-arrow { transform: translateX(5px); }

@media (max-width: 600px) {
  .services-shortcut { gap: 14px; }
  .services-shortcut-arrow { display: none; }
}

/* Page headers (services / portfolio / mentions légales) — n'étaient
   jamais réduits sur mobile, contrairement au hero et au contact-hero */
@media (max-width: 600px) {
  .page-header-services,
  .page-header-portfolio,
  .page-header-legal {
    padding-top: calc(64px + 48px);
    padding-bottom: 32px;
  }
}