/* =================================================================
   ClaudyApps Studio — « Bloc & grille »
   Deux blocs bleu outremer pleine page (hero, contact) encadrent
   des sections blanc pur. Grotesque étendue en capitales (Archivo),
   annotations monospace (IBM Plex Mono), filets noirs 2px.
   Angles droits partout. Orange de marque en accent chirurgical.
   ================================================================= */

:root {
  --white: #ffffff;
  --ink: #0a0a0a;
  --muted: #555550;
  --faint: #8a8a84;
  --gray: #f2f2ef;              /* bande studio */
  --rule: #0a0a0a;              /* filets : noir franc, 2px */
  --rule-thin: rgba(10, 10, 10, 0.18);

  --blue: #1c2bee;              /* outremer — la couleur d'engagement */
  --blue-deep: #1421c4;
  --on-blue-muted: rgba(255, 255, 255, 0.72);
  --on-blue-faint: rgba(255, 255, 255, 0.45);
  --on-blue-rule: rgba(255, 255, 255, 0.28);

  --orange: #e55f03;            /* marque */
  --orange-bright: #ff7a1f;     /* orange sur bleu */

  --sans: "Archivo", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", "SF Mono", Menlo, monospace;

  --container: 1280px;
  --pad: clamp(20px, 4vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }

body {
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--blue); color: #fff; }

/* display : grotesque étendue, capitales, graisse maximale */
h1, h2 {
  font-family: var(--sans);
  font-variation-settings: "wdth" 122;
  font-weight: 860;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: -0.01em;
}
h3 {
  font-variation-settings: "wdth" 112;
  font-weight: 750;
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: 0;
}
h2 em, h1 em { font-style: normal; }
h2 em { color: var(--blue); }

/* ---------- helpers ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); }
section { padding-block: clamp(76px, 10vw, 140px); }

.mono-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* tête de section : numéro mono bleu + filet noir + titre caps */
.section-head { margin-bottom: clamp(48px, 6vw, 84px); }
.section-no {
  display: flex; align-items: center; gap: 18px;
  color: var(--blue);
}
.section-no::after { content: ""; flex: 1; height: 2px; background: var(--rule); }
.section-head h2 {
  font-size: clamp(2rem, 4.6vw, 3.8rem);
  margin-top: 28px;
  max-width: 22ch;
}

/* ---------- liens & bouton cadre ---------- */
.link-arrow {
  font-family: var(--mono); font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 2px solid currentColor;
  padding-bottom: 4px;
  transition: color .18s ease;
}
.link-arrow:hover { color: var(--orange); }

.btn-frame {
  display: inline-block;
  font-family: var(--mono); font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  white-space: nowrap;
  padding: 16px 30px;
  border: 2px solid currentColor;
  border-radius: 0;
  transition: background .18s ease, color .18s ease;
}

/* ---------- nav : blanche sur bleu, s'inverse au scroll ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: 68px;
  display: flex; align-items: center;
  color: #fff;
  border-bottom: 2px solid transparent;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.nav.scrolled {
  background: var(--white);
  color: var(--ink);
  border-bottom-color: var(--rule);
}
.nav .container { display: flex; align-items: center; justify-content: space-between; }

.wordmark {
  font-variation-settings: "wdth" 122;
  font-weight: 860;
  text-transform: uppercase;
  font-size: 1.05rem;
  letter-spacing: 0;
}
.wordmark sup { font-size: 0.55em; font-weight: 600; color: var(--orange-bright); margin-left: 2px; }
.nav.scrolled .wordmark sup { color: var(--orange); }

.nav-links { display: flex; align-items: center; gap: clamp(18px, 3vw, 38px); }
.nav-links a {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-blue-muted);
  transition: color .18s ease;
}
.nav-links a:hover { color: #fff; }
.nav.scrolled .nav-links a { color: var(--muted); }
.nav.scrolled .nav-links a:hover { color: var(--ink); }
.nav-links .nav-contact { color: var(--orange-bright); }
.nav-links .nav-contact:hover { color: #fff; }
.nav.scrolled .nav-links .nav-contact { color: var(--blue); }
.nav.scrolled .nav-links .nav-contact:hover { color: var(--ink); }

/* ---------- hero : bloc bleu pleine page ---------- */
.hero {
  background: var(--blue);
  color: #fff;
  padding-top: clamp(140px, 22vh, 220px);
  padding-bottom: 0;
}
.hero-meta { display: block; margin-bottom: clamp(22px, 3vw, 36px); color: var(--on-blue-muted); }
.hero h1 {
  font-size: clamp(2.5rem, 7.2vw, 6.6rem);
}
.hero h1 em { color: var(--orange-bright); }
.hero-foot {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 32px;
  margin-top: clamp(40px, 5vw, 64px);
}
.hero .lead { color: var(--on-blue-muted); font-size: 1.08rem; max-width: 52ch; }
.hero-actions { display: flex; align-items: center; gap: 28px; flex-shrink: 0; }
.hero .btn-frame:hover { background: #fff; color: var(--blue); }
.hero .link-arrow:hover { color: var(--orange-bright); }

/* faits vérifiables, bande filetée dans le bleu */
.hero-facts {
  margin-top: clamp(56px, 7vw, 96px);
  border-top: 2px solid var(--on-blue-rule);
}
.hero-facts .container {
  display: flex; flex-wrap: wrap; gap: 12px clamp(28px, 4vw, 64px);
  padding-block: 18px;
}
.hero-facts .mono-label { color: var(--on-blue-muted); display: contents; }
.hero-facts span { display: inline-flex; align-items: center; gap: 10px; }
.hero-facts span::before { content: ""; width: 6px; height: 6px; background: var(--orange-bright); }

/* ---------- travaux : l'index ---------- */
.work-index { border-top: 2px solid var(--rule); }

.work-row {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1.4fr) minmax(0, 0.7fr) 9.5rem;
  align-items: baseline;
  gap: 8px 24px;
  padding-block: clamp(22px, 3vw, 34px);
  padding-inline: 0;
  border-bottom: 2px solid var(--rule);
  position: relative;
  transition: background .18s ease, color .18s ease, padding .18s ease;
}
.work-no { color: var(--blue); }
.work-main h3 { font-size: clamp(1.25rem, 2.2vw, 1.7rem); }
.work-main p { color: var(--muted); font-size: 0.92rem; max-width: 52ch; margin-top: 8px; text-transform: none; }
.work-stack { color: var(--faint); letter-spacing: 0.08em; text-transform: none; }
.work-cat { text-align: right; }

/* survol : inversion complète de la ligne — la signature */
@media (hover: hover) and (pointer: fine) {
  a.work-row:hover {
    background: var(--blue);
    color: #fff;
    padding-inline: 18px;
    border-bottom-color: var(--blue);
  }
  a.work-row:hover .work-no,
  a.work-row:hover .work-cat { color: var(--orange-bright); }
  a.work-row:hover .work-main p { color: var(--on-blue-muted); }
  a.work-row:hover .work-stack { color: var(--on-blue-faint); }
  .work-row[data-img]:not(a):hover .work-no { color: var(--orange); }
}

/* vignette : cachée sur desktop (l'aperçu flottant s'en charge) */
.work-thumb { display: none; }

/* aperçu flottant qui suit le curseur */
.work-preview {
  position: fixed; z-index: 90; top: 0; left: 0;
  width: min(340px, 26vw);
  aspect-ratio: 16 / 11;
  border: 2px solid var(--rule);
  overflow: hidden;
  background: var(--white);
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease;
}
.work-preview.on { opacity: 1; }
.work-preview img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- services : lignes ---------- */
.service-list { border-top: 2px solid var(--rule); }
.service-row {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: baseline;
  gap: 8px 24px;
  padding-block: clamp(26px, 3.4vw, 40px);
  border-bottom: 2px solid var(--rule);
}
.service-row > .mono-label { color: var(--blue); }
.service-row h3 { font-size: clamp(1.2rem, 2vw, 1.55rem); }
.service-row p { color: var(--muted); font-size: 0.95rem; max-width: 46ch; }

/* ---------- studio : bande grise ---------- */
#studio { background: var(--gray); border-block: 2px solid var(--rule); }
.studio-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 80px); align-items: start;
}
.studio-grid .section-head { margin-bottom: 0; }
.studio-body p { color: var(--muted); font-size: 1.05rem; max-width: 54ch; }
.studio-stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  margin-top: clamp(32px, 4vw, 48px);
  border-top: 2px solid var(--rule);
}
.studio-stats > div {
  padding-block: 20px;
  border-bottom: 1px solid var(--rule-thin);
}
.studio-stats > div:nth-child(odd) { padding-right: 24px; }
.studio-stats > div:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--rule-thin); }
.studio-stats dt { color: var(--faint); }
.studio-stats dd {
  font-variation-settings: "wdth" 122;
  font-weight: 860;
  font-size: clamp(1.6rem, 2.8vw, 2.3rem);
  color: var(--blue);
  margin-top: 4px;
}

/* ---------- méthode : colonnes ---------- */
.steps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 44px);
}
.step { border-top: 2px solid var(--rule); padding-top: 22px; }
.step .mono-label { color: var(--blue); }
.step h3 { font-size: 1.2rem; margin: 12px 0 10px; }
.step p { color: var(--muted); font-size: 0.92rem; }

/* ---------- contact : second bloc bleu ---------- */
.contact-band {
  background: var(--blue);
  color: #fff;
  padding-bottom: 0;
}
.contact-band .section-no { color: var(--orange-bright); }
.contact-band .section-no::after { background: var(--on-blue-rule); }
.contact-band h2 {
  font-size: clamp(2.6rem, 6.6vw, 5.4rem);
  margin-top: 30px;
}
.contact-note { color: var(--on-blue-muted); margin-top: 22px; max-width: 46ch; }

.contact-mail {
  display: inline-block;
  font-variation-settings: "wdth" 112;
  font-weight: 750;
  font-size: clamp(1.3rem, 3.2vw, 2.4rem);
  letter-spacing: -0.01em;
  margin-top: clamp(30px, 4vw, 46px);
  border-bottom: 3px solid var(--orange-bright);
  padding-bottom: 6px;
  transition: color .2s ease, border-color .2s ease;
}
.contact-mail:hover { color: var(--orange-bright); }

.contact-meta {
  display: flex; flex-wrap: wrap; gap: 14px clamp(28px, 4vw, 56px);
  margin-top: clamp(36px, 5vw, 56px);
  color: var(--on-blue-muted);
}
.contact-meta a { transition: color .18s ease; }
.contact-meta a:hover { color: var(--orange-bright); }

/* colophon */
.footer {
  margin-top: clamp(64px, 8vw, 110px);
  border-top: 2px solid var(--on-blue-rule);
  padding-block: 30px;
}
.footer .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.footer .wordmark { color: #fff; font-size: 0.95rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 22px; color: var(--on-blue-muted); }
.footer-links a:hover { color: #fff; }
.footer .copy { color: var(--on-blue-muted); letter-spacing: 0.08em; text-transform: none; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .studio-grid { grid-template-columns: 1fr; }
  .work-row { grid-template-columns: 3rem minmax(0, 1fr) 8rem; }
  .work-stack { display: none; }
}

@media (max-width: 700px) {
  /* nav resserrée : wordmark + Travaux + Contact seulement */
  .nav-optional, .nav-links a[href="#services"] { display: none; }
  .nav-links { gap: 20px; }
  .wordmark { font-size: 0.92rem; }

  .hero h1 { font-size: clamp(2rem, 9.6vw, 3.2rem); }
  .hero-foot { flex-direction: column; align-items: flex-start; }
  .hero-actions { flex-wrap: wrap; gap: 18px 28px; }

  /* l'index devient une liste illustrée : vignette visible, pas d'aperçu curseur */
  .work-preview { display: none; }
  .work-row {
    grid-template-columns: 3rem minmax(0, 1fr);
    grid-template-areas:
      "no    cat"
      "thumb thumb"
      "main  main";
    align-items: center;
  }
  .work-no { grid-area: no; }
  .work-cat { grid-area: cat; }
  .work-main { grid-area: main; }
  .work-thumb {
    display: block; grid-area: thumb;
    margin-top: 14px;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 2px solid var(--rule);
    background: var(--gray);
  }
  .work-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .work-main { margin-top: 14px; }

  .service-row { grid-template-columns: 3rem minmax(0, 1fr); }
  .service-row p { grid-column: 2; }

  .steps { grid-template-columns: 1fr; }
  .studio-stats > div:nth-child(odd) { padding-right: 16px; }
  .studio-stats > div:nth-child(even) { padding-left: 16px; }
}