/* ============================================================
   INFINI Stratégies - Site styles
   Static recreation of the Claude Design bundle. Tokens are linked
   separately (tokens/*.css); this file consumes them only. No new
   color/spacing/type values are invented here.
   ============================================================ */

/* Site-level override of the bundle token: widen the content column so large
   displays (27"+) don't show oversized side gutters. Token files stay verbatim;
   this single override flows to every container-bound block (header, hero,
   sections, bands, footer). */
:root {
  --container-max: 1600px;
  /* Marquee ralenti d'environ 30 % par rapport au token du bundle (28s -> 36s). */
  --dur-marquee: 36s;
  /* Le 0.92 du bundle rogne les accents français d'Anton (É, È, Â) sur les
     titres multilignes en majuscules. 1.1 laisse passer les accents tout en
     gardant le rendu compressé de la marque. */
  --leading-display: 1.1;
}

/* ---- Layout primitives ---- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.section { padding-block: var(--space-9); }
.section--flush-top { padding-top: 0; }

/* Cible d'ancre : le header sticky masquerait le titre de la section
   visée (#services). On réserve sa hauteur plus une respiration. */
:target,
section[id],
[id^="section-"] {
  scroll-margin-top: clamp(104px, 14vh, 152px);
}
html { scroll-behavior: smooth; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

img { max-width: 100%; display: block; }

.bw {
  filter: grayscale(1) contrast(1.05);
}

/* ============================================================
   Eyebrow (overline) - extends .eyebrow from base.css
   ============================================================ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow--rule::before {
  content: "";
  width: 28px;
  height: 2px;
  background: currentColor;
  display: inline-block;
  flex: none;
}
.eyebrow--accent { color: var(--accent); }
.eyebrow--mute { color: var(--ink-300); }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  padding: 13px 26px;
  min-height: 46px;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 12px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn .icon { flex: none; }

.btn--sm { padding: 8px 16px; min-height: 34px; font-size: 11px; gap: 8px; }
.btn--lg { padding: 18px 38px; min-height: 58px; font-size: 13px; gap: 12px; }

.btn--primary {
  background: var(--accent);
  color: var(--text-on-accent);
  border-color: var(--accent);
}
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn--secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.btn--secondary:hover {
  background: var(--text-primary);
  color: var(--text-on-accent);
  border-color: var(--text-primary);
}

.btn--link {
  background: transparent;
  color: var(--text-primary);
  border: 0;
  padding: 0;
  min-height: auto;
  text-decoration: underline;
  text-underline-offset: 0.3em;
  text-decoration-thickness: 2px;
}
.btn--link:hover { text-decoration: underline; color: var(--accent); }
.btn--link:active { transform: none; }

/* ============================================================
   Header / Navigation  (structural - NOT a CMS region)
   ============================================================ */
.site-header {
  background: var(--ink-950);
  color: #fff;
  border-bottom: 1px solid var(--ink-800);
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  /* Se rétracte vers le haut au défilement descendant (classe posée
     par site.js), revient dès qu'on remonte. */
  transition: transform var(--dur-base) var(--ease-standard);
  will-change: transform;
}
.site-header.is-hidden {
  transform: translateY(-100%);
}
/* Menu mobile ouvert : le header doit rester visible quoi qu'il arrive. */
.site-header:has(.nav.is-open) {
  transform: none;
}
.site-header__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.8;
  color: #fff;
  display: inline-block;
  user-select: none;
}
.brand { display: inline-flex; align-items: center; }
.site-header .logo { font-size: 44px; }

.nav {
  display: flex;
  align-items: center;
  gap: 36px;
}
.nav__link {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--ink-300);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.nav__link:hover { color: #fff; text-decoration: none; }
.nav__link[aria-current="page"] { color: #fff; border-bottom-color: #fff; }

.header__actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* Sélecteur de langue — lien vers la version équivalente de la page
   dans l'autre langue. Le libellé affiche la langue CIBLE (« EN » sur
   une page française), convention la plus lisible d'un coup d'œil.
   Structural, jamais une région CMS. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--ink-300);
  background: transparent;
  border: 1px solid var(--ink-700);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.lang-switch:hover {
  color: #fff;
  border-color: var(--ink-400);
  text-decoration: none;
}
.lang-switch .icon { width: 13px; height: 13px; opacity: 0.75; }

.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  color: #fff;
  padding: 8px;
  cursor: pointer;
  line-height: 0;
}

/* ============================================================
   Marquee - the signature running verbs (structural, not editable)
   ============================================================ */
.marquee {
  overflow: hidden;
  display: flex;
  width: 100%;
}
.marquee__track {
  display: flex;
  flex: none;
  animation: infini-marquee var(--dur-marquee) linear infinite;
}
.marquee__run { display: flex; flex: none; }
.marquee__item,
.marquee__sep {
  font-family: var(--font-display);
  text-transform: uppercase;
  /* Plafonné aussi en vh : le marquee doit tenir dans le premier fold. */
  font-size: clamp(44px, min(9.5vw, 7.5vh), 130px);
  /* Roomier line box so Anton's accents (É, Î) are not clipped by the band. */
  line-height: 1.3;
  white-space: nowrap;
}
.marquee__item { color: var(--text-primary); padding: 0 28px; }
.marquee__sep { color: var(--text-muted); }

@keyframes infini-marquee {
  to { transform: translateX(-50%); }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  background: var(--ink-950);
  color: #fff;
  overflow: hidden;
  /* Le hero occupe le premier écran (moins le header sticky de 76px) et le
     marquee est poussé au pli : il termine toujours le premier fold. */
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 76px);
  min-height: calc(100svh - 76px);
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1);
  opacity: 0.42;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.35) 45%, rgba(10,10,10,.92) 100%);
}
.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: clamp(40px, 7vh, 120px) var(--container-pad) 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero__title {
  /* Plafonné aussi par la hauteur d'écran : le contenu du hero ne doit
     jamais repousser le marquee sous le premier fold. */
  font-size: clamp(44px, min(8vw, 8.5vh), 104px);
  margin: 0;
  max-width: 14ch;
  text-wrap: balance;
}
.hero__actions {
  display: flex;
  gap: 16px;
  margin-top: clamp(24px, 4vh, 40px);
  flex-wrap: wrap;
}
.hero__marquee {
  position: relative;
  border-top: 1px solid var(--ink-800);
  margin-top: clamp(20px, 4vh, 64px);
  padding: clamp(12px, 2.5vh, 26px) 0 clamp(10px, 2.2vh, 22px);
}

/* ============================================================
   About (media + text)
   ============================================================ */
.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.about__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--ink-950);
}
.about__media img { width: 100%; height: 100%; object-fit: cover; }
.section-title { font-size: var(--text-3xl); }
.lead { font: var(--font-lead); color: var(--text-secondary); }
.text-secondary { color: var(--text-secondary); }

/* ============================================================
   Services grid + cards
   ============================================================ */
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: border-color var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-out);
}
.card:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  text-decoration: none;
}
.card__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--ink-950);
}
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: transform var(--dur-slow) var(--ease-out);
}
.card:hover .card__media img { transform: scale(1.04); }
.card__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}
.card__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.card__title {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin: 0;
}
.card__text {
  font: var(--fw-regular) var(--text-sm)/var(--leading-normal) var(--font-sans);
  color: var(--text-secondary);
}
.card__footer { margin-top: auto; padding-top: var(--space-2); }

/* ============================================================
   Noir band (contact CTA on home / generic dark band)
   ============================================================ */
.band {
  position: relative;
  background: var(--ink-950);
  color: #fff;
  overflow: hidden;
}
.band__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  /* Assez présent pour distinguer la skyline ; le scrim protège le texte à gauche. */
  opacity: 0.55;
}
.band__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10,10,10,.88), rgba(10,10,10,.35));
}
.band__inner {
  position: relative;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-9) var(--container-pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

/* ============================================================
   Forms (line variant - matches the brand contact form)
   ============================================================ */
.form { display: flex; flex-direction: column; gap: 26px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field__label {
  font: var(--fw-bold) var(--text-2xs)/1 var(--font-sans);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.field__req { color: var(--signal-danger); margin-left: 4px; }
.field__control {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--border);
  border-radius: 0;
  padding: 10px 2px;
  outline: none;
  transition: border-color var(--dur-base) var(--ease-standard);
}
.field__control::placeholder { color: var(--text-muted); }
.field__control:focus { border-bottom-color: var(--border-strong); }
textarea.field__control { resize: vertical; }
select.field__control {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 16px;
  padding-right: 28px;
}

/* ============================================================
   V2 - Formulaire : piège à robots + retour d'envoi
   ============================================================ */

/* Sorti de l'écran plutôt que display:none : certains robots
   ignorent les champs masqués par display, pas ceux-ci. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__feedback {
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: var(--border-hairline) solid var(--border);
  font: var(--fw-medium) var(--text-sm)/var(--leading-normal) var(--font-sans);
}
.form__feedback--success {
  border-color: var(--signal-success);
  background: var(--signal-success-soft);
  color: var(--signal-success);
}
.form__feedback--error {
  border-color: var(--signal-danger);
  background: var(--signal-danger-soft);
  color: var(--signal-danger);
}

.btn:disabled { opacity: 0.6; cursor: progress; }

/* ============================================================
   Contact page - split layout
   ============================================================ */
.contact-split {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  min-height: calc(100vh - 76px);
}
.contact-info {
  position: relative;
  background: var(--ink-950);
  color: #fff;
  overflow: hidden;
}
.contact-info__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  /* Skyline nettement visible ; le scrim dégradé garde le texte lisible. */
  opacity: 0.55;
}
.contact-info__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(10,10,10,.55), rgba(10,10,10,.85));
}
.contact-info__inner {
  position: relative;
  padding: 88px var(--container-pad);
  max-width: 520px;
  margin-left: auto;
}
.contact-info__title { font-size: clamp(44px, 5vw, 76px); margin: 0 0 24px; }
.contact-form-panel {
  background: var(--surface);
  display: flex;
  align-items: center;
  padding: 64px var(--container-pad);
}
.contact-form-panel__inner { width: 100%; max-width: 480px; margin-right: auto; }

.info-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 22px;
}
.info-row__icon { color: var(--ink-300); margin-top: 2px; flex: none; }
.info-row__label {
  font: var(--fw-bold) var(--text-2xs)/1 var(--font-sans);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: 6px;
}
.info-row__value {
  font: var(--fw-medium) var(--text-base)/1.4 var(--font-sans);
  color: #fff;
}
.info-row__value a { color: #fff; }

/* ============================================================
   Service page sections
   ============================================================ */
.service-hero {
  position: relative;
  background: var(--ink-950);
  color: #fff;
  overflow: hidden;
}
.service-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1);
  opacity: 0.4;
}
.service-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,.6) 0%, rgba(10,10,10,.45) 40%, rgba(10,10,10,.95) 100%);
}
.service-hero__inner {
  position: relative;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 120px var(--container-pad) 96px;
}
.service-hero__title { font-size: clamp(48px, 6.5vw, 88px); margin: 0; max-width: 16ch; text-wrap: balance; }
.service-hero__lead { color: var(--ink-300); max-width: 52ch; margin-top: 20px; font-size: var(--text-md); }

.split2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.feature-list { list-style: none; margin: 0; padding: 0; }
.feature-list li {
  position: relative;
  padding: 18px 0 18px 38px;
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
}
.feature-list li:last-child { border-bottom: 1px solid var(--border); }
.feature-list li .icon {
  position: absolute;
  left: 0; top: 18px;
  color: var(--accent);
}
.feature-list li strong { color: var(--text-primary); display: block; margin-bottom: 4px; font-weight: var(--fw-bold); }

/* ============================================================
   Footer  (structural - NOT a CMS region)
   ============================================================ */
.site-footer {
  background: var(--ink-950);
  color: #fff;
  border-top: 1px solid var(--ink-800);
}
.site-footer__top {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 64px var(--container-pad) 40px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: 40px;
}
.site-footer .logo { font-size: 32px; }
.footer__tagline {
  margin-top: 14px;
  max-width: 280px;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 14px;
  /* Même raison que --leading-display : les accents d'Anton ont besoin d'air. */
  line-height: 1.15;
  letter-spacing: 0.04em;
  color: var(--ink-400);
}
.footer__col-title {
  font: var(--fw-bold) var(--text-2xs)/1 var(--font-sans);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: 18px;
}
.footer__link {
  display: block;
  margin-bottom: 12px;
  font: var(--fw-medium) var(--text-sm)/1.2 var(--font-sans);
  color: var(--ink-200);
}
.footer__link:hover { color: #fff; text-decoration: none; }
.footer__contact { font: var(--fw-medium) var(--text-sm)/1.5 var(--font-sans); color: var(--ink-200); }
.footer__contact a:hover { text-decoration: underline; }
.footer__social {
  display: flex;
  gap: 14px;
  margin-top: 20px;
  color: var(--ink-300);
}
.footer__social a { display: flex; }
.footer__social a:hover { color: #fff; }
.site-footer__bottom { border-top: 1px solid var(--ink-800); }
.site-footer__bottom-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 20px var(--container-pad);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font: var(--fw-medium) var(--text-xs)/1 var(--font-sans);
  color: var(--ink-500);
}
.site-footer__bottom-inner a { color: var(--ink-500); }
.site-footer__bottom-inner a:hover { color: #fff; text-decoration: none; }

/* ============================================================
   Prose / legal (privacy policy)
   ============================================================ */
.prose { max-width: 72ch; }
.prose h2 { font-size: var(--text-2xl); margin-top: var(--space-7); }
.prose h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
  text-transform: none;
  line-height: var(--leading-tight);
  margin: var(--space-6) 0 var(--space-3);
}
.prose p, .prose li { color: var(--text-secondary); line-height: var(--leading-relaxed); }
.prose ul, .prose ol { padding-left: 1.25rem; margin: 0 0 var(--space-4); }
.prose li { margin-bottom: var(--space-2); }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.18em; }
.page-head { padding-top: var(--space-8); }
.page-head .eyebrow { margin-bottom: 16px; }

/* ---- Generic spacing helpers used in markup ---- */
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.maxw-prose { max-width: 60ch; }

/* ---- Inline SVG icon sizing ---- */
.icon { width: 20px; height: 20px; flex: none; }
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 22px; height: 22px; }

/* ============================================================
   Scroll reveal
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  /* Révélation douce : plus long que --dur-slow, easing très amorti.
     --reveal-delay est posé par site.js pour échelonner les éléments
     d'une même grille (cartes, étapes). */
  transition: opacity 750ms var(--ease-out),
              transform 750ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  .site-footer__top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .about { grid-template-columns: 1fr; gap: 32px; }
  .services__grid { grid-template-columns: 1fr; }
  .band__inner { grid-template-columns: 1fr; gap: 32px; }
  .split2 { grid-template-columns: 1fr; gap: 32px; }
  .contact-split { grid-template-columns: 1fr; min-height: 0; }
  .contact-info__inner { max-width: none; padding: 64px var(--container-pad); }
  .contact-form-panel { padding: 48px var(--container-pad); }
  .contact-form-panel__inner { max-width: none; }

  .nav, .header__actions .btn { display: none; }
  .nav-toggle { display: inline-flex; }
  .header__actions { gap: 12px; }

  /* Mobile drop panel */
  .nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    position: absolute;
    top: 76px; left: 0; right: 0;
    background: var(--ink-950);
    border-bottom: 1px solid var(--ink-800);
    padding: 12px var(--container-pad) 24px;
  }
  .nav.is-open .nav__link {
    padding: 12px 0;
    border-bottom: 1px solid var(--ink-800);
    width: 100%;
  }
  .nav.is-open .nav__link[aria-current="page"] { color: #fff; }
}

@media (max-width: 560px) {
  .site-footer__top { grid-template-columns: 1fr; }
  .hero__title { font-size: clamp(40px, min(12vw, 7vh), 104px); }
  .marquee__item, .marquee__sep { font-size: clamp(40px, min(16vw, 6.5vh), 90px); }
}

/* ============================================================
   V2 - Points focaux des images (object-position par visuel)
   Les sujets de ces visuels ne sont pas centrés dans le fichier
   source ; on aligne le recadrage object-fit:cover sur eux, peu
   importe le format du conteneur. Ciblé par nom de fichier pour
   que le cadrage suive l'image dans tous ses usages (hero, carte,
   bande, 4:3). À ajuster si un visuel est remplacé via le CMS.
   ============================================================ */
img[src$="hero_sincity.jpg"]       { object-position: 50% 85%; } /* personnes aux postes, bas de l'image   */
img[src$="about.jpg"]              { object-position: 50% 80%; } /* homme à l'ordinateur, moitié basse     */
img[src$="cityscape.jpg"]          { object-position: 50% 42%; } /* skyline et soleil, moitié haute        */
img[src$="service_consulting.jpg"] { object-position: 50% 45%; } /* homme au bureau, centre                */
img[src$="service_cmo.jpg"]        { object-position: 50% 40%; } /* visage de la stratège, tiers haut      */
img[src$="service_workshops.jpg"]  { object-position: 50% 35%; } /* homme debout, tiers haut               */

/* La cityscape est intrinsèquement très sombre : coup de clarté partout où
   elle sert de fond (bande CTA, page contact, héro À propos). */
img[src$="cityscape.jpg"] { filter: grayscale(1) contrast(1.05) brightness(1.4); }
.service-hero__bg[src$="cityscape.jpg"] { opacity: 0.55; }

/* ============================================================
   V2 - Hero lead (sous-titre sous le H1 de l'accueil)
   ============================================================ */
.hero__lead {
  color: var(--ink-300);
  max-width: 52ch;
  margin: 20px 0 0;
  font-size: var(--text-md);
}

/* ============================================================
   V2 - Étapes numérotées (déroulement / jalons)
   ============================================================ */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.step {
  border-top: var(--border-bold) solid var(--border-strong);
  padding-top: var(--space-4);
}
.step__num {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-none);
  color: var(--accent);
  display: block;
  margin-bottom: var(--space-3);
}
.step__title {
  font: var(--fw-bold) var(--text-base)/var(--leading-tight) var(--font-sans);
  color: var(--text-primary);
  margin: 0 0 var(--space-2);
}
.step__text {
  font: var(--fw-regular) var(--text-sm)/var(--leading-normal) var(--font-sans);
  color: var(--text-secondary);
  margin: 0;
}

/* ============================================================
   V2 - Grilles génériques de cartes sans image
   ============================================================ */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ============================================================
   V2 - Infolettre (bande pré-footer)
   ============================================================ */
.newsletter {
  border-top: var(--border-hairline) solid var(--border);
  background: var(--surface-sunken);
}
.newsletter__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-8) var(--container-pad);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
}
.newsletter__title { margin: 0 0 var(--space-2); font-size: var(--text-2xl); }
.newsletter__form {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}
.newsletter__form .field { flex: 1; }

/* ---- Responsive (V2) ---- */
@media (max-width: 900px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .newsletter__inner { grid-template-columns: 1fr; gap: 28px; }
  .newsletter__form { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   V2 - Grands écrans (27-32 pouces)
   Le site est tokenisé en rem : augmenter la taille de base fait
   grossir d'un coup la typo, les espacements et les composants.
   On élargit aussi la colonne de contenu et on relève les plafonds
   des titres héros (leurs clamp() étaient calibrés pour ~1600px).
   Les images grossissent d'elles-mêmes : elles remplissent leurs
   colonnes (cartes 3:2, blocs 4:3, fonds cover).
   ============================================================ */
@media (min-width: 1800px) {
  html { font-size: 18px; }
  :root { --container-max: 1920px; }

  .site-header__inner { height: 88px; }
  .site-header .logo { font-size: 52px; }
  .btn { font-size: 13px; }
  .btn--sm { font-size: 12px; }
  .btn--lg { font-size: 15px; }

  .hero { min-height: calc(100vh - 88px); min-height: calc(100svh - 88px); }
  .hero__inner { padding-top: clamp(64px, 8vh, 150px); }
  .hero__title { font-size: clamp(56px, min(6.5vw, 10vh), 148px); }
  .marquee__item, .marquee__sep { font-size: clamp(64px, min(8.5vw, 8.5vh), 190px); }

  .service-hero__inner { padding: 150px var(--container-pad) 120px; }
  .service-hero__title { font-size: clamp(48px, 5.5vw, 124px); }
  .service-hero__lead { font-size: var(--text-lg); max-width: 56ch; }
  .hero__lead { font-size: var(--text-lg); max-width: 56ch; }

  .contact-info__title { font-size: clamp(44px, 4.5vw, 104px); }
  .contact-info__inner { max-width: 660px; }
  .contact-form-panel__inner { max-width: 620px; }
}

@media (min-width: 2300px) {
  html { font-size: 20px; }
  :root { --container-max: 2240px; }
  .site-header .logo { font-size: 58px; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .card, .btn, .card__media img { transition: none; }
  html { scroll-behavior: auto; }
}