/* ============================================================
   INTELUXURY · System
   Composants & blocks. Dépend de tokens.css.
   ============================================================ */

/* ------------------------------------------------------------
   RESET & BASE
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

/* Le header est fixe : une ancre ne doit pas déposer la cible dessous. */
:target,
section[id] { scroll-margin-top: clamp(4rem, 10vh, 6.5rem); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-decoration: none; }

/* Focus clavier : visible partout, y compris sur fond sombre.
   Les boutons .btn définissent leur propre contour plus bas. */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

::selection { background: var(--ix-ink-900); color: var(--ix-white); }

/* Grain : texture argentique sur tout le site */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------
   TYPOGRAPHIE
   ------------------------------------------------------------ */
.display-2xl, .display-xl, .display-lg, .display-md, .display-sm,
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

.display-2xl, h1 { font-size: var(--text-display-2xl); }
.display-xl,  h2 { font-size: var(--text-display-xl); }
.display-lg,  h3 { font-size: var(--text-display-lg); line-height: var(--leading-tight); }
.display-md,  h4 { font-size: var(--text-display-md); line-height: var(--leading-tight); }
.display-sm,  h5 { font-size: var(--text-display-sm); line-height: var(--leading-tight); }

.serif-italic { font-style: italic; }

.body-xl { font-size: var(--text-body-xl); line-height: 1.5; font-weight: var(--weight-light); }
.body-lg { font-size: var(--text-body-lg); }
.body-sm { font-size: var(--text-body-sm); }

.text-secondary { color: var(--color-text-secondary); }
.text-tertiary  { color: var(--color-text-tertiary); }

/* Label mono, signature graphique : ( LABEL ) */
.label-mono {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.label-mono--bracket::before { content: '(\00a0'; }
.label-mono--bracket::after  { content: '\00a0)'; }

.index-mono {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-mono);
  color: var(--color-text-tertiary);
}

/* ------------------------------------------------------------
   LAYOUT
   ------------------------------------------------------------ */
.container        { max-width: var(--container);        margin-inline: auto; padding-inline: var(--margin); }
.container-wide   { max-width: var(--container-wide);   margin-inline: auto; padding-inline: var(--margin); }
.container-narrow { max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--margin); }

.section { padding-block: var(--section-gap); }

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}

@media (max-width: 760px) {
  .grid-12 { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* En-tête de section : label mono + filet */
.section-heading {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
}

.section-heading .line {
  flex: 1;
  height: 1px;
  background: var(--color-line);
}

@media (max-width: 640px) {
  .section-heading .line { display: none; }
}

.theme-dark .section-heading .line { background: var(--color-line-inverse); }
.theme-dark .section-heading .label-mono { color: var(--ix-white-55); }

/* Thème sombre */
.theme-dark {
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}

.theme-dark .text-secondary { color: var(--ix-white-80); }
.theme-dark .text-tertiary  { color: var(--ix-white-55); }
.theme-dark ::selection { background: var(--ix-white); color: var(--ix-ink-900); }

/* Panneau brume */
.theme-panel { background: var(--color-bg-panel); }

/* ------------------------------------------------------------
   HEADER
   ------------------------------------------------------------ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-header);
  transition: background var(--duration-fast) ease, color var(--duration-fast) ease,
              box-shadow var(--duration-fast) ease, transform var(--duration-base) var(--ease-luxe);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding-block: var(--space-6);
}

.site-header--light { color: var(--ix-white); }

.site-header--solid {
  background: var(--ix-white);
  color: var(--ix-ink-900);
}

.site-header--solid .site-header__inner { padding-block: var(--space-4); }

.site-header--hidden { transform: translateY(-100%); }

.brand {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
}

/* L'enso : logo au pinceau, en <img> (fiable partout : cache,
   file://, print, email). Trois variantes de couleur :
   icon-logo.min.svg (encre) · icon-logo-white.min.svg ·
   icon-logo-brass.min.svg. Remplace le ® à droite du nom,
   centré verticalement ; s'utilise seul en poinçon. */
.brand-logo {
  width: 0.5em;
  height: 0.5em;
  flex: none;
  align-self: center;
}

/* Header : logo un peu plus grand et plus léger qu'ailleurs */
.site-header .brand {
  font-size: 1.75rem;
  font-weight: var(--weight-thin);
}

/* Header : bascule encre/blanc selon l'état (transparent sur héro
   → blanc ; solide après défilement → encre) */
.site-header--light .brand-logo--ink { display: none; }
.site-header:not(.site-header--light) .brand-logo--white { display: none; }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

/* Sélecteur de langue : FR / EN en mono, hérite la couleur du header
   (blanc sur le héro, encre une fois solide). La langue courante est
   pleine, l'autre en retrait. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  line-height: 1;
}

.lang-switch__item {
  opacity: 0.5;
  padding-block: 0.25em;
  transition: opacity var(--duration-fast) var(--ease-luxe);
}

.lang-switch__item:hover,
.lang-switch__item[aria-current="page"] { opacity: 1; }

.lang-switch__sep { opacity: 0.3; }

.nav { display: flex; align-items: center; gap: var(--space-8); }

.nav__link {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-regular);
  position: relative;
  padding-block: 0.25em;
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--duration-base) var(--ease-luxe);
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

@media (max-width: 900px) {
  .nav { display: none; }
}

/* Mobile : le bouton Contact quitte le header collant (il mangeait la
   largeur du sélecteur de langue). Le CTA reste accessible dans le
   corps de page et dans le pied de page. */
@media (max-width: 760px) {
  .site-header__actions > .btn { display: none; }
}

/* ------------------------------------------------------------
   BOUTONS
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-regular);
  line-height: 1;
  padding: 1em 1.75em;
  border: 1px solid var(--ix-ink-900);
  border-radius: var(--radius-pill);
  background: var(--ix-ink-900);
  color: var(--ix-white);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-luxe),
              color var(--duration-fast) var(--ease-luxe),
              border-color var(--duration-fast) var(--ease-luxe);
}

.btn:hover { background: transparent; color: var(--ix-ink-900); }

.btn:focus-visible {
  outline: 1px solid var(--ix-ink-900);
  outline-offset: 3px;
}

.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.35;
  pointer-events: none;
}

.btn--outline {
  background: transparent;
  color: var(--ix-ink-900);
}

.btn--outline:hover { background: var(--ix-ink-900); color: var(--ix-white); }

.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: inherit;
  padding-inline: 0.5em;
}

.btn--ghost:hover { background: transparent; color: var(--color-text-secondary); }

.btn--on-dark {
  background: var(--ix-white);
  border-color: var(--ix-white);
  color: var(--ix-ink-900);
}

.btn--on-dark:hover { background: transparent; color: var(--ix-white); }

/* Le header passe au blanc au défilement : le bouton s'inverse en encre,
   sinon le survol donnerait du blanc sur blanc. */
.site-header--solid .btn--on-dark:hover {
  color: var(--ix-ink-900);
  border-color: var(--ix-ink-900);
}

.btn--lg { font-size: var(--text-body); padding: 1.1em 2em; }
.btn--sm { font-size: var(--text-caption); padding: 0.8em 1.4em; }

/* Flèche du bouton : glisse au survol */
.btn .arrow { transition: transform var(--duration-fast) var(--ease-luxe); }
.btn:hover .arrow { transform: translateX(4px); }

/* Bouton icône circulaire */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid var(--ix-ink-900);
  border-radius: 50%;
  background: transparent;
  color: var(--ix-ink-900);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-luxe),
              color var(--duration-fast) var(--ease-luxe);
}

.btn-icon:hover { background: var(--ix-ink-900); color: var(--ix-white); }

.theme-dark .btn-icon { border-color: var(--ix-white-55); color: var(--ix-white); }
.theme-dark .btn-icon:hover { background: var(--ix-white); color: var(--ix-ink-900); border-color: var(--ix-white); }

/* Lien fléché */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--text-body-sm);
  font-weight: var(--weight-regular);
}

.link-arrow .arrow { transition: transform var(--duration-fast) var(--ease-luxe); }
.link-arrow:hover .arrow { transform: translateX(5px); }

/* Lien souligné */
.link-underline {
  position: relative;
  padding-bottom: 2px;
}

.link-underline::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform-origin: right;
  transition: transform var(--duration-base) var(--ease-luxe);
}

.link-underline:hover::after {
  transform: scaleX(0);
  transform-origin: left;
}

/* ------------------------------------------------------------
   TAGS & BADGES
   ------------------------------------------------------------ */
.tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  padding: 0.5em 1em;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  color: var(--color-text-secondary);
}

.tag--solid {
  background: var(--ix-ink-900);
  border-color: var(--ix-ink-900);
  color: var(--ix-white);
}

.tag--brass {
  border-color: var(--ix-brass-300);
  color: var(--ix-brass-600);
}

.theme-dark .tag { border-color: var(--ix-white-15); color: var(--ix-white-80); }

/* ------------------------------------------------------------
   FORMULAIRES · champs filet, minimalisme absolu
   ------------------------------------------------------------ */
.field { display: flex; flex-direction: column; gap: var(--space-3); }

.field__label {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.field__input {
  font-family: var(--font-sans);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-light);
  color: var(--color-text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-line);
  padding-block: var(--space-3);
  border-radius: 0;
  transition: border-color var(--duration-fast) ease;
}

.field__input::placeholder { color: var(--ix-ink-400); }

.field__input:focus {
  outline: none;
  border-bottom-color: var(--ix-ink-900);
}

.field--error .field__input { border-bottom-color: var(--ix-error); }

.field__hint { font-size: var(--text-body-sm); color: var(--color-text-tertiary); }
.field--error .field__hint { color: var(--ix-error); }

textarea.field__input { resize: vertical; min-height: 6rem; }

select.field__input { appearance: none; cursor: pointer; }

.theme-dark .field__input { color: var(--ix-white); border-bottom-color: var(--ix-white-15); }
.theme-dark .field__input:focus { border-bottom-color: var(--ix-white); }
.theme-dark .field__label { color: var(--ix-white-55); }

/* Cases & radios */
.choice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-body-sm);
  cursor: pointer;
}

.choice input {
  appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  border: 1px solid var(--ix-ink-300);
  border-radius: var(--radius-xs);
  display: grid;
  place-content: center;
  transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

.choice input[type="radio"] { border-radius: 50%; }

.choice input:checked { background: var(--ix-ink-900); border-color: var(--ix-ink-900); }

.choice input:checked::before {
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  background: var(--ix-white);
  border-radius: inherit;
}

/* ------------------------------------------------------------
   CARTE PROJET
   ------------------------------------------------------------ */
.project-card { display: block; }

.project-card__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  aspect-ratio: 4 / 3;
  background: var(--ix-mist-100);
}

.project-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-luxe);
}

.project-card:hover .project-card__media img { transform: scale(1.05); }

.project-card__body {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-4);
}

.project-card__title {
  font-family: var(--font-display);
  font-size: var(--text-display-sm);
  font-weight: var(--weight-light);
}

.project-card__meta {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

/* ------------------------------------------------------------
   CARTE SERVICE · rangée éditoriale
   ------------------------------------------------------------ */
.service-row {
  display: grid;
  grid-template-columns: 5rem 1fr 1.2fr;
  gap: var(--space-8);
  padding-block: var(--space-12);
  border-top: 1px solid var(--color-line);
  align-items: start;
}

.service-row:last-child { border-bottom: 1px solid var(--color-line); }

.service-row__title {
  font-family: var(--font-display);
  font-size: var(--text-display-lg);
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
}

.service-row__poetry {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
  margin-top: var(--space-3);
}

.service-row__desc { color: var(--color-text-secondary); max-width: 46ch; }

.service-row__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

@media (max-width: 900px) {
  .service-row { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ------------------------------------------------------------
   TÉMOIGNAGE
   ------------------------------------------------------------ */
.testimonial { max-width: 60rem; }

.testimonial__quote {
  font-family: var(--font-display);
  font-size: var(--text-display-md);
  font-weight: var(--weight-light);
  line-height: 1.35;
}

.testimonial__quote::before { content: '«\00a0'; }
.testimonial__quote::after  { content: '\00a0»'; }

.testimonial__author {
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.testimonial__name { font-weight: var(--weight-regular); font-size: var(--text-body-lg); }

/* Avec portrait : médaillon rond à gauche, nom à droite */
.testimonial__author--portrait {
  flex-direction: row;
  align-items: center;
  gap: var(--space-4);
}

.testimonial__portrait {
  width: 6rem;
  height: 6rem;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(1);
}

.testimonial__role {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.theme-dark .testimonial__role { color: var(--ix-white-55); }

/* ------------------------------------------------------------
   ACCORDÉON
   ------------------------------------------------------------ */
.accordion { border-top: 1px solid var(--color-line); }

.accordion__item { border-bottom: 1px solid var(--color-line); }

.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-6);
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--text-display-sm);
  font-weight: var(--weight-light);
  color: var(--color-text);
  text-align: left;
}

.accordion__icon {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  display: grid;
  place-content: center;
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: var(--weight-regular);
  transition: transform var(--duration-base) var(--ease-luxe), background var(--duration-fast) ease, color var(--duration-fast) ease;
}

.accordion__item[open] .accordion__icon,
.accordion__trigger[aria-expanded="true"] .accordion__icon {
  transform: rotate(45deg);
  background: var(--ix-ink-900);
  color: var(--ix-white);
  border-color: var(--ix-ink-900);
}

.accordion__panel {
  padding-bottom: var(--space-8);
  color: var(--color-text-secondary);
  max-width: 60ch;
}

details.accordion__item summary { list-style: none; }
details.accordion__item summary::-webkit-details-marker { display: none; }

/* ------------------------------------------------------------
   LISTE VERTICALES (« Avec qui nous travaillons »)
   ------------------------------------------------------------ */
.vertical-row {
  display: grid;
  grid-template-columns: 5rem 1fr 1fr;
  gap: var(--space-8);
  align-items: baseline;
  padding-block: var(--space-8);
  border-top: 1px solid var(--color-line);
}

.vertical-row:last-child { border-bottom: 1px solid var(--color-line); }

.vertical-row__name {
  font-family: var(--font-display);
  font-size: var(--text-display-md);
  font-weight: var(--weight-light);
}

.vertical-row__desc { color: var(--color-text-secondary); max-width: 44ch; }

@media (max-width: 900px) {
  .vertical-row { grid-template-columns: 3rem 1fr; }
  .vertical-row__desc { grid-column: 2; }
}

/* ------------------------------------------------------------
   LOGO WALL
   ------------------------------------------------------------ */
.logo-wall {
  background: var(--color-bg-panel);
  border-radius: var(--radius-md);
  padding: clamp(2.5rem, 6vw, 5rem);
  overflow: hidden;
}

.logo-marquee {
  display: flex;
  gap: clamp(3rem, 8vw, 7rem);
  width: max-content;
  animation: marquee 36s linear infinite;
}

.logo-marquee:hover { animation-play-state: paused; }

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

.logo-item {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: var(--weight-light);
  color: var(--ix-ink-500);
  white-space: nowrap;
  transition: color var(--duration-fast) ease;
}

.logo-item:hover { color: var(--ix-ink-900); }

.logo-item em { font-style: italic; }

.logo-item .small-caps {
  font-family: var(--font-mono);
  font-size: 0.6em;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  vertical-align: middle;
}

/* ------------------------------------------------------------
   STATS
   ------------------------------------------------------------ */
.stat__value {
  font-family: var(--font-display);
  font-size: var(--text-display-xl);
  font-weight: var(--weight-thin);
  line-height: 1;
}

.stat__label {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  color: var(--ix-white);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: hero-zoom 12s var(--ease-luxe) both;
}

@keyframes hero-zoom {
  from { transform: scale(1.12); }
  to   { transform: scale(1); }
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ix-overlay-hero);
}

.hero__label {
  color: var(--ix-white-80);
  margin-bottom: var(--space-6);
}

.hero__title {
  max-width: 16ch;
  margin-inline: auto;
}

.hero__scroll {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  color: var(--ix-white-80);
}

.hero__scroll-line {
  width: 1px;
  height: 3rem;
  background: var(--ix-white-55);
  overflow: hidden;
  position: relative;
}

.hero__scroll-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ix-white);
  animation: scroll-hint 2.2s var(--ease-inout) infinite;
}

@keyframes scroll-hint {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */
.site-footer {
  background: var(--ix-ink-900);
  color: var(--ix-white);
  padding-block: var(--space-24) var(--space-8);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-12);
  padding-bottom: var(--space-24);
}

.site-footer__col h2 {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--ix-white-55);
  margin-bottom: var(--space-6);
}

.site-footer__col ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }

.site-footer__col a {
  font-size: var(--text-body-sm);
  color: var(--ix-white-80);
  transition: color var(--duration-fast) ease;
}

.site-footer__col a:hover { color: var(--ix-white); }

.site-footer__legal {
  border-top: 1px solid var(--ix-white-15);
  padding-top: var(--space-8);
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  font-size: var(--text-body-sm);
  color: var(--ix-white-55);
}

@media (max-width: 900px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    padding-bottom: var(--space-16);
  }

  /* Cibles tactiles confortables : le padding va sur le lien lui-même,
     sinon la zone touchable reste la hauteur d'une ligne. */
  .site-footer__col ul { gap: 0; }
  .site-footer__col li { padding-block: var(--space-2); }
  .site-footer__col li a { display: inline-block; padding-block: var(--space-3); }
}

/* ------------------------------------------------------------
   REVEALS · apparition au scroll
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(2.5rem);
    transition: opacity var(--duration-reveal) var(--ease-luxe),
                transform var(--duration-reveal) var(--ease-luxe);
    transition-delay: var(--reveal-delay, 0s);
  }

  .reveal.is-inview {
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------------------------------------
   UTILITAIRES
   ------------------------------------------------------------ */
.flow > * + * { margin-top: var(--space-6); }
.mt-0  { margin-top: 0; }
.mt-4  { margin-top: var(--space-4); }
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }
.mb-8  { margin-bottom: var(--space-8); }
.text-center { text-align: center; }
.hr { border: 0; height: 1px; background: var(--color-line); }