/* =============================================================
   BS AGENCY — feuille de style unique
   Direction artistique : le site se lit comme une séquence de
   montage. Règle de timeline collante, playhead rouge qui suit
   le scroll, timecodes en monospace, points de coupe entre
   sections. Fond graphite (pas noir), un seul accent vif.
   ============================================================= */

/* ---------- 1. Variables de marque ---------- */
:root {
  /* Couleurs */
  --bg:        #14151C; /* fond général, graphite */
  --bg-2:      #101117; /* fond plus profond (règle, pied de page) */
  --surface:   #1E202B; /* panneaux, cartes */
  --surface-2: #262935; /* survol de carte, champs de formulaire */
  --line:      #313545; /* filets, bordures */
  --text:      #ECEDF2; /* texte principal */
  --muted:     #8B90A3; /* timecodes, labels de piste, légendes */
  --playhead:  #FF4438; /* playhead + action primaire, UNIQUEMENT */
  --playhead-ink: #14151C; /* texte posé sur le rouge */
  --wave:      #4FD8E4; /* motif forme d'onde (hero, formats) */
  --ok:        #4FE0A8; /* confirmation formulaire */

  /* Typographie */
  --font-sans: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, monospace;

  /* Rythme */
  --wrap: 1160px;
  --gutter: clamp(20px, 5vw, 56px);
  --ruler-h: 40px;
  --header-h: 64px;
  --radius: 4px;

  /* Mouvement */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: .18s;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul { list-style: none; padding: 0; }
h1, h2, h3 { line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; }

/* ---------- 3. Utilitaires ---------- */
.wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.section {
  position: relative;
  padding-block: clamp(64px, 10vw, 128px);
  border-top: 1px solid var(--line);
}
/* Point de coupe : petit repère triangulaire au début de chaque section */
.section::before {
  content: "";
  position: absolute;
  top: -1px; left: var(--gutter);
  width: 0; height: 0;
  border-left: 7px solid var(--playhead);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}
.section__head { max-width: 62ch; margin-bottom: clamp(32px, 5vw, 56px); }
.section__head h2 { font-size: clamp(28px, 4.6vw, 44px); margin-top: 12px; }
.section__head p { color: var(--muted); margin-top: 14px; }

/* Timecode + label de piste posés en marge de section */
.slate {
  display: flex;
  gap: 14px;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.slate b { color: var(--playhead); font-weight: 700; }

/* ---------- 4. Boutons ---------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: var(--line);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--dur) var(--ease),
              background var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.btn:hover { transform: translateX(2px); border-color: var(--text); }
.btn:active { transform: translateX(0); }
.btn--primary {
  --btn-bg: var(--playhead);
  --btn-fg: var(--playhead-ink);
  --btn-bd: var(--playhead);
  font-weight: 700;
}
.btn--primary:hover { background: #ff5a50; border-color: #ff5a50; }
.btn__mark { /* petit chevron "lecture" */
  width: 0; height: 0;
  border-left: 7px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

/* ---------- 5. En-tête ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 16px;
}
.logo__cut { /* deux traits = point de coupe */
  display: inline-block;
  width: 14px; height: 20px;
  background:
    linear-gradient(var(--playhead), var(--playhead)) 0 0 / 3px 100% no-repeat,
    linear-gradient(var(--wave), var(--wave)) 11px 0 / 3px 100% no-repeat;
}

.nav { display: flex; align-items: center; gap: 28px; }
.nav a {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--muted);
  transition: color var(--dur) var(--ease);
}
.nav a:hover, .nav a[aria-current="true"] { color: var(--text); }
.nav a.btn { color: var(--text); }
.nav a.btn--primary { color: var(--playhead-ink); }

.nav-toggle { display: none; }

/* ---------- 6. Règle de timeline + playhead ---------- */
.ruler {
  position: sticky;
  top: var(--header-h);
  z-index: 55;
  height: var(--ruler-h);
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.ruler__track {
  position: relative;
  height: 100%;
  width: min(var(--wrap), 100% - var(--gutter) * 2);
  margin-inline: auto;
  display: flex;
  align-items: center;
  /* graduations */
  background-image: repeating-linear-gradient(
    to right, var(--line) 0 1px, transparent 1px 40px);
  background-position: 0 100%;
  background-size: 100% 8px;
  background-repeat: repeat-x;
}
.ruler__marks { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; }
.ruler__marks::-webkit-scrollbar { display: none; }
.ruler__mark {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 4px 0;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.ruler__mark:hover { color: var(--text); }
.ruler__mark[aria-current="true"] { color: var(--playhead); }

/* Playhead : poignée pleine dans la règle + hairline plein écran très discrète */
.playhead {
  position: fixed;
  top: var(--header-h);
  left: 0;
  z-index: 56;
  width: 12px;
  height: calc(100vh - var(--header-h));
  pointer-events: none;
  transform: translateX(0);
  transition: transform .08s linear;
  will-change: transform;
}
.playhead::after { /* hairline discrète qui traverse la page */
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 100%;
  background: var(--playhead);
  opacity: 0.16;
}
.playhead::before { /* poignée triangulaire pleine, alignée sur la règle */
  content: "";
  position: absolute;
  top: calc(var(--ruler-h) - 8px);
  left: -6px;
  border-top: 9px solid var(--playhead);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}

/* ---------- 7. Hero ---------- */
.hero { padding-block: clamp(56px, 9vw, 104px); position: relative; }
.hero h1 {
  font-size: clamp(34px, 7vw, 68px);
  max-width: 16ch;
  margin-top: 20px;
}
.hero__sub {
  margin-top: 22px;
  max-width: 54ch;
  color: var(--muted);
  font-size: clamp(16px, 2.2vw, 19px);
}
.hero__sub b { color: var(--text); font-weight: 500; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* Forme d'onde : barres CSS, animation légère et facultative */
.wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 60px;
  margin-top: 48px;
  --bars: 64;
}
.wave span {
  flex: 1;
  min-width: 2px;
  background: var(--wave);
  opacity: 0.5;
  height: 20%;
  border-radius: 1px;
  animation: wave 1.6s var(--ease) infinite alternate;
}
@keyframes wave { to { height: 100%; opacity: 0.9; } }

/* ---------- 8. Services ---------- */
.grid-services {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.service {
  background: var(--surface);
  padding: clamp(24px, 3.4vw, 36px);
  transition: background var(--dur) var(--ease);
}
.service:hover { background: var(--surface-2); }
.service__no {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--playhead);
  letter-spacing: 0.1em;
}
.service h3 { font-size: 21px; margin: 10px 0 16px; }
.service ul { display: grid; gap: 9px; }
.service li {
  position: relative;
  padding-left: 22px;
  color: var(--muted);
  font-size: 15px;
}
.service li::before { /* crochet d'entrée */
  content: "[";
  position: absolute;
  left: 4px;
  color: var(--wave);
  font-family: var(--font-mono);
}

/* ---------- 9. Méthode (timeline horizontale) ---------- */
.method {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  position: relative;
  list-style: none;
  padding: 0;
  counter-reset: step;
}
.method::before { /* axe */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 7px;
  height: 2px;
  background: var(--line);
}
.step { position: relative; padding-top: 30px; }
.step::before { /* keyframe */
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 16px; height: 16px;
  background: var(--bg);
  border: 2px solid var(--playhead);
  transform: rotate(45deg);
}
.step__tc {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--playhead);
  letter-spacing: 0.04em;
}
.step h3 { font-size: 16px; margin: 8px 0 6px; }
.step p { font-size: 14px; color: var(--muted); }

/* ---------- 10. Formats (ratios) ---------- */
.ratios { display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 44px); align-items: flex-end; }
.ratio { text-align: center; }
.ratio__box {
  position: relative;
  width: clamp(120px, 26vw, 190px);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  background:
    linear-gradient(var(--surface), var(--surface));
}
.ratio--vertical .ratio__box { aspect-ratio: 9 / 16; }
.ratio--square   .ratio__box { aspect-ratio: 1 / 1; }
.ratio--wide     .ratio__box { aspect-ratio: 16 / 9; width: clamp(200px, 44vw, 340px); }
.ratio__subject { /* sujet recadré, constant d'un ratio à l'autre */
  width: 64px; height: 64px;
  border: 2px solid var(--wave);
  border-radius: 50%;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--wave) 18%, transparent);
}
.ratio__tag {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.08em;
}
.ratios__note { margin-top: 28px; color: var(--muted); max-width: 52ch; font-size: 15px; }

/* ---------- 11. Tarifs ---------- */
.grid-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.plan {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 34px);
  display: flex;
  flex-direction: column;
}
.plan--feature { border-color: var(--playhead); }
.plan__tag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--playhead);
  border: 1px solid var(--playhead);
  padding: 3px 8px;
  border-radius: 999px;
  margin-bottom: 16px;
  visibility: hidden;
}
.plan--feature .plan__tag { visibility: visible; }
.plan h3 { font-size: 20px; }
.plan__price {
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 700;
  margin: 12px 0 4px;
}
.plan__price small { font-size: 13px; color: var(--muted); font-weight: 400; }
.plan__note { color: var(--muted); font-size: 13px; min-height: 1.2em; }
.plan ul { display: grid; gap: 10px; margin: 22px 0 26px; }
.plan li { padding-left: 22px; position: relative; font-size: 15px; color: var(--muted); }
.plan li::before {
  content: "+";
  position: absolute; left: 4px;
  color: var(--wave);
  font-family: var(--font-mono);
}
.plan .btn { margin-top: auto; justify-content: center; }
.pricing__foot { margin-top: 22px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); letter-spacing: 0.06em; }

/* ---------- 12. FAQ ---------- */
.faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 4px 0;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 40px 20px 0;
  position: relative;
  font-size: 17px;
  font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute; right: 4px; top: 18px;
  font-family: var(--font-mono);
  font-size: 22px;
  color: var(--playhead);
  transition: transform var(--dur) var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { padding: 0 40px 22px 0; color: var(--muted); }

/* ---------- 13. Contact ---------- */
.contact__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 6vw, 72px); }
.offer {
  align-self: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--playhead);
  border-radius: var(--radius);
  padding: clamp(22px, 3vw, 30px);
}
.offer h3 { font-size: 19px; margin-bottom: 10px; }
.offer p { color: var(--muted); font-size: 15px; }
.offer p + p { margin-top: 10px; }

.form { display: grid; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input, .field select, .field textarea {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  transition: border-color var(--dur) var(--ease);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--wave);
}
.field--hp { position: absolute; left: -9999px; opacity: 0; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form__submit { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.form__status { font-family: var(--font-mono); font-size: 13px; line-height: 1.5; }
.form__status[data-state="sending"] { color: var(--muted); }
.form__status[data-state="error"] { color: var(--playhead); }
.form__status[data-state="success"] { color: var(--ok); }
.form__status a { text-decoration: underline; }

.form-done {
  border: 1px solid var(--ok);
  border-radius: var(--radius);
  padding: 24px;
  color: var(--ok);
}
.form-done h3 { color: var(--text); font-size: 18px; margin-bottom: 8px; }
.form-done p { color: var(--muted); }
[hidden] { display: none !important; }

/* ---------- 14. Pied de page ---------- */
.site-footer {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  padding-block: 48px;
  font-size: 14px;
}
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: space-between; align-items: center; }
.site-footer nav { display: flex; gap: 24px; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--text); }
.site-footer .muted { color: var(--muted); font-family: var(--font-mono); font-size: 12px; }

/* ---------- 15. Pages légales ---------- */
.legal { padding-block: clamp(56px, 9vw, 104px); }
.legal h1 { font-size: clamp(28px, 5vw, 44px); margin-bottom: 8px; }
.legal .updated { color: var(--muted); font-family: var(--font-mono); font-size: 12px; margin-bottom: 40px; }
.legal h2 { font-size: 20px; margin: 36px 0 12px; }
.legal p, .legal li { color: var(--muted); }
.legal ul { list-style: disc; padding-left: 22px; display: grid; gap: 6px; margin-top: 10px; }
.legal a { color: var(--wave); text-decoration: underline; }
.legal .back { display: inline-block; margin-top: 48px; }

/* ---------- 16. Accessibilité : focus visible ---------- */
:focus-visible {
  outline: 2px solid var(--wave);
  outline-offset: 3px;
  border-radius: 2px;
}
.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  background: var(--playhead);
  color: var(--playhead-ink);
  padding: 10px 16px;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 13px;
  z-index: 100;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 12px; }

/* ---------- 17. Responsive ---------- */
@media (max-width: 900px) {
  :root { --gutter: 20px; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--bg-2);
    border-bottom: 1px solid var(--line);
    padding: 8px 20px 20px;
    transform: translateY(-120%);
    transition: transform var(--dur) var(--ease);
  }
  .nav[data-open="true"] { transform: translateY(0); }
  .nav a { padding: 14px 0; width: 100%; border-bottom: 1px solid var(--line); font-size: 15px; }
  .nav .btn { margin-top: 14px; }
  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px;
    cursor: pointer;
  }
  .nav-toggle span { width: 18px; height: 2px; background: var(--text); display: block; }

  .grid-services { grid-template-columns: 1fr; }
  .method { grid-template-columns: 1fr; gap: 4px; }
  .method::before { left: 7px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .step { padding-top: 8px; padding-left: 34px; }
  .step::before { top: 6px; }
  .grid-pricing { grid-template-columns: 1fr; }
  .plan__tag { visibility: hidden; position: absolute; }
  .plan--feature .plan__tag { position: static; }
  .contact__grid { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .playhead { display: none; } /* pas de scrub sur mobile, écran trop étroit */
}
@media (max-width: 520px) {
  .ratios { gap: 24px; }
}

/* ---------- 18. Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .wave span { height: 60%; opacity: 0.7; }
  .playhead { transition: none; }
}