/* ==========================================================================
   xSOM Consulting — Socle : reset, typographie, layout, utilitaires
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text-mid);
  background: var(--ink-900);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Grain global : matière imprimée plutôt qu'aplat numérique. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background-image: var(--grain);
  opacity: .03;
  mix-blend-mode: overlay;
}

img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }

::selection { background: var(--copper); color: var(--ink-950); }

/* ---- Focus : visible partout, jamais supprimé --------------------------- */
:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: 200;
  padding: var(--sp-3) var(--sp-6);
  background: var(--copper);
  color: var(--ink-950);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: var(--r-md);
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: calc(var(--header-h) + var(--sp-2)); }

/* ==========================================================================
   Typographie
   ========================================================================== */

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--text-hi);
  font-weight: 700;
  text-wrap: balance;
}

.t-display {
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -.008em;
  font-weight: 800;
}
.t-h1 {
  font-size: var(--fs-h1);
  line-height: 1.08;
  letter-spacing: -.006em;
  font-weight: 800;
}
.t-h2 {
  font-size: var(--fs-h2);
  line-height: 1.14;
  letter-spacing: -.004em;
}
.t-h3 {
  font-size: var(--fs-h3);
  line-height: 1.25;
  letter-spacing: -.002em;
}

/* Les titres tiennent sur une seule teinte et un seul caractère.

   `.em` portait un italique serif en cuivre. C'est la composition la plus
   reconnaissable des pages générées automatiquement, au point de dater un site
   avant qu'on en ait lu une ligne. La classe reste dans le balisage — elle
   marque toujours le mot porteur du titre — mais elle ne change plus ni la
   fonte, ni le style, ni la couleur. */
.em {
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  color: inherit;
}

/* Les titres sont posés en couleur pleine. Tout ce qui suit n'ajoute que de la
   lumière par-dessus : si rien de tout cela ne s'applique, le titre reste
   exactement lisible. */
.t-display, .t-h1, .t-h2 { color: var(--title-ink); }

@supports (background-clip: text) or (-webkit-background-clip: text) {
  /* Un balayage lumineux traverse le titre et suit le curseur.

     Il est porté par chaque mot et non par le titre : quand motion.js découpe
     un titre pour l'animer, il déplace le texte dans des spans `inline-block`.
     Or `background-clip: text` ne clippe le fond d'un élément que sur SON
     propre texte — un descendant inline-block crée sa propre boîte, que le
     fond du parent ne traverse pas, et le mot disparaîtrait en héritant de
     `color: transparent`.

     La continuité du balayage d'un mot à l'autre est rétablie par motion.js,
     qui donne à chaque mot la taille du titre en `background-size` et son
     propre décalage en `background-position` : les mots échantillonnent alors
     un dégradé unique au lieu d'en répéter un chacun. */
  .js .split-ready .word {
    /* Le dégradé est écrit ici et pas dans tokens.css : un `var()` imbriqué
       dans une custom property se résout à la déclaration, si bien qu'un
       dégradé défini dans :root y figerait --title-sheen-pos à 50 % avant
       d'hériter. Écrit au point d'usage, il lit la valeur du titre. */
    background-image: linear-gradient(94deg,
      var(--title-ink)        0%,
      var(--title-ink)        calc(var(--title-sheen-pos) - 24%),
      var(--title-glint)      calc(var(--title-sheen-pos) - 3%),
      var(--title-glint-warm) calc(var(--title-sheen-pos) + 3%),
      var(--title-ink)        calc(var(--title-sheen-pos) + 24%),
      var(--title-ink)        100%);
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  /* Sur fond clair, ajouter de la lumière ferait chuter le contraste au lieu
     de le creuser. Le titre y reste en aplat. */
  .section--light .split-ready .word {
    background-image: none;
    -webkit-text-fill-color: var(--text-hi);
    color: var(--text-hi);
  }
}

/* Sans le balayage, le titre ne doit pas rester en teinte de repos plus pâle
   que prévu sur fond clair. */
.section--light .t-display,
.section--light .t-h1,
.section--light .t-h2 { color: var(--text-hi); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: var(--text-mid);
  max-width: 56ch;
}

.muted { color: var(--text-low); }
.small { font-size: var(--fs-sm); }

p { max-width: 68ch; }

/* ---- Label mono : numérotations, étiquettes, badges --------------------- */
.label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-low);
}

/* ==========================================================================
   Layout
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

.grid { display: grid; gap: var(--sp-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.stack { display: flex; flex-direction: column; }
.stack-2 { gap: var(--sp-2); }
.stack-4 { gap: var(--sp-4); }
.stack-6 { gap: var(--sp-6); }
.stack-8 { gap: var(--sp-8); }

.row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }

/* ==========================================================================
   Signature visuelle
   ========================================================================== */

/* Le filet cuivre : ouvre chaque section, remplace les séparateurs gris. */
.rule {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, var(--copper-line), transparent 65%);
  margin-block: var(--sp-4);
}
.rule--full {
  background: linear-gradient(90deg, transparent, var(--copper-line) 20%, var(--copper-line) 80%, transparent);
}

/* La numérotation de section : [ 01 ] NOTRE OFFRE */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-low);
}
.eyebrow::before {
  content: '[ ' attr(data-num) ' ]';
  color: var(--copper-text);
}

/* En-tête de section */
.sec-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); max-width: 62ch; }
.sec-head .rule { margin-block: var(--sp-4) var(--sp-6); max-width: 180px; }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .eyebrow { justify-content: center; }
.sec-head--center .rule { margin-inline: auto; }
.sec-head--center .lead { margin-inline: auto; }
.sec-head .lead { margin-top: var(--sp-4); }

/* ==========================================================================
   Révélation au défilement
   L'état masqué n'est appliqué que si JS est actif (.js sur <html>).
   Sans JavaScript, tout le contenu est visible.
   ========================================================================== */

.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--t-reveal) var(--ease-out),
              transform var(--t-reveal) var(--ease-out);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

.js .reveal[data-delay="1"] { transition-delay: 60ms; }
.js .reveal[data-delay="2"] { transition-delay: 120ms; }
.js .reveal[data-delay="3"] { transition-delay: 180ms; }
.js .reveal[data-delay="4"] { transition-delay: 240ms; }
.js .reveal[data-delay="5"] { transition-delay: 300ms; }

/* ==========================================================================
   Contenu non encore fourni.
   Retirer l'attribut data-requires-content pour activer la section.
   ========================================================================== */

[data-requires-content] { display: none !important; }

/* ==========================================================================
   Utilitaires
   ========================================================================== */

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

.center { text-align: center; }
.no-wrap { white-space: nowrap; }
.full { width: 100%; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :root { --header-h: 64px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Mouvement réduit — règle absolue, aucune exception
   ========================================================================== */

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

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .js .reveal { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   Impression
   ========================================================================== */

@media print {
  body { background: #fff; color: #000; }
  body::before, .site-header, .site-footer, .hero-canvas { display: none; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
}