/* ==========================================================================
   HAPPYCOMM — Feuille de styles principale
   Direction : gestes typographiques d'adncomm.com (type géante ajourée,
   minuscules, angles vifs, interlignage serré) sur une base claire, avec la
   palette de marque extraite de signaturehappycomm.png.
   --------------------------------------------------------------------------
   Sommaire
   01. Design tokens
   02. Reset & base
   03. Typographie & display ajouré
   04. Composants — boutons, logo
   05. Header & navigation
   06. Hero
   07. Ticker d'expertises
   08. Sections génériques
   09. Histoire
   10. Ce qui nous anime (piliers)
   11. Services
   12. Clientèle
   13. CTA
   14. Footer
   15. Animations d'apparition
   16. Media queries
   ========================================================================== */


/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */

:root {
  /* --- Palette de marque (relevée au pixel sur signaturehappycomm.png) ----
     Vert profond  #072622 — fond du logo, 46,7 % de l'image
     Cyan vif      #34E0CF — le mot « Happy », 1,6 %
     Blanc         #FFFFFF — le mot « comm », 50,8 %
     ------------------------------------------------------------------------
     ⚠ Contraste : le cyan sur blanc ne fait que 1,65:1. Il ne sert JAMAIS de
     couleur de texte sur fond clair — seulement en aplat (fond de bouton,
     point de titre, filet) ou sur fond foncé (9,7:1). Pour du texte cyan
     lisible sur clair, utiliser --c-cyan-deep.
  */
  --c-ink:        #072622;
  --c-ink-deep:   #041A17;
  --c-ink-soft:   #0E3B34;
  --c-ink-70:     rgba(7, 38, 34, 0.70);
  --c-ink-55:     rgba(7, 38, 34, 0.55);
  --c-ink-12:     rgba(7, 38, 34, 0.12);
  --c-ink-06:     rgba(7, 38, 34, 0.06);

  --c-paper:      #FFFFFF;
  --c-paper-alt:  #F1F5F4;

  --c-cyan:       #34E0CF;
  --c-cyan-deep:  #12554D;

  --c-line:       rgba(7, 38, 34, 0.14);
  --c-line-light: rgba(255, 255, 255, 0.18);

  /* --- Typographie -------------------------------------------------------
     Poppins : géométrique, contreformes circulaires — c'est la famille qui
     tient le mieux en contour et qui colle aux lettres du logo.
     Karla : nav et corps de texte, comme sur adncomm.com.
  */
  --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Épaisseur du contour : 2px desktop, ramenée à 1px en mobile (cf. ADN). */
  --outline-w: 2px;

  /* 14vw place le mot le plus long à ~180px sur 1280 — le calibre d'ADN.
     Le plancher de 3.5rem garantit que « Simplifier » tient dans 375px. */
  --fs-hero:      clamp(3.5rem, 14vw, 13rem);
  --fs-cta:       clamp(2.75rem, 9vw, 7.5rem);
  --fs-ticker:    clamp(2rem, 6vw, 4.875rem);
  --fs-h2:        clamp(1.85rem, 1.1rem + 3.2vw, 3.5rem);
  --fs-h3:        clamp(1.15rem, 1.02rem + 0.6vw, 1.45rem);
  --fs-lead-xl:   clamp(1.25rem, 1rem + 1.1vw, 1.95rem);
  --fs-lead:      clamp(1.02rem, 0.96rem + 0.35vw, 1.2rem);
  --fs-body:      1.0625rem;
  --fs-small:     0.875rem;
  --fs-eyebrow:   0.75rem;

  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1.25rem;
  --space-md:  2rem;
  --space-lg:  3.5rem;
  --space-xl:  5rem;
  --section-y: clamp(4.5rem, 2.5rem + 8vw, 9rem);

  --container:      1280px;
  --container-pad:  clamp(1.25rem, 0.6rem + 3vw, 4rem);
  --radius-pill: 999px;

  /* Pente de la diagonale du logo : dx/dy = 0,277, soit 15,5° de la verticale. */
  --brand-skew: -15.5deg;

  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  180ms;
  --dur:       360ms;
  --dur-slow:  760ms;
}


/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */

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

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

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  color: var(--c-ink);
  background-color: var(--c-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

:focus-visible {
  outline: 2px solid var(--c-cyan-deep);
  outline-offset: 3px;
}

::selection { background: var(--c-cyan); color: var(--c-ink); }

.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;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-sm);
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--c-ink);
  color: var(--c-cyan);
  font-size: var(--fs-small);
}
.skip-link:focus { top: var(--space-sm); }

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


/* ==========================================================================
   03. TYPOGRAPHIE & DISPLAY AJOURÉ
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

p { text-wrap: pretty; }

/* --- Le geste signature -------------------------------------------------
   Contour seul, remplissage transparent. Appliqué directement au texte réel
   (et non à un ::before dupliqué comme chez ADN) : le texte reste
   sélectionnable et restitué tel quel par les lecteurs d'écran.
   Réservé aux grandes tailles — sous ~48px les contreformes se referment.
   ------------------------------------------------------------------------ */
.display-outline {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.03em;
  -webkit-text-stroke: var(--outline-w) var(--c-ink);
  -webkit-text-fill-color: transparent;
}
.display-outline::after {
  content: '.';
  -webkit-text-stroke: 0;
  -webkit-text-fill-color: var(--c-cyan);
}

/* Variante pour les titres de section : plus petite, en minuscules. */
.display-outline--sm {
  font-size: var(--fs-h2);
  text-transform: lowercase;
}

/* Variante sur fond foncé. */
.display-outline--light { -webkit-text-stroke-color: #FFFFFF; }

/* Repli si -webkit-text-stroke n'est pas supporté : texte plein, jamais
   invisible. (Firefox < 49, navigateurs anciens.) */
@supports not (-webkit-text-stroke: 1px black) {
  .display-outline { -webkit-text-fill-color: currentColor; color: var(--c-ink); }
  .display-outline--light { color: #FFFFFF; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-cyan-deep);
}
.eyebrow::before {
  content: '';
  width: 1.75rem;
  height: 3px;
  background: var(--c-cyan);
  transform: skewX(var(--brand-skew));
}
.eyebrow--light { color: rgba(255, 255, 255, 0.7); }

.lead-xl {
  font-family: var(--font-display);
  font-size: var(--fs-lead-xl);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.025em;
}


/* ==========================================================================
   04. COMPOSANTS — BOUTONS, LOGO
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 2px solid transparent;
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    transform var(--dur-fast) var(--ease);
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Format généreux d'ADN : padding 24px 48px. */
.btn--lg { padding: 1.5rem 3rem; font-size: 0.9375rem; }

/* Cyan en aplat + texte foncé : 9,7:1, conforme AA. */
.btn--accent {
  background: var(--c-cyan);
  border-color: var(--c-cyan);
  color: var(--c-ink);
}
.btn--accent:hover { background: transparent; color: var(--c-ink); }

.btn--ghost { color: var(--c-ink); border-color: var(--c-ink-12); }
.btn--ghost:hover { border-color: var(--c-ink); }

.btn--outline-light { color: #FFFFFF; border-color: var(--c-line-light); }
.btn--outline-light:hover { border-color: var(--c-cyan); color: var(--c-cyan); }

/* Sur fond foncé, la variante fantôme doit rester lisible. */
.section--dark .btn--ghost,
.cta .btn--ghost { color: #FFFFFF; border-color: var(--c-line-light); }

/* --- Logo -------------------------------------------------------------
   Deux fichiers, tirés de signaturehappycomm.png :
     logo-on-light.png — « Happy » teal, « comm » encre  → fond clair
     logo-on-dark.png  — « Happy » cyan,  « comm » blanc → fond foncé
   Les attributs width/height sur le <img> réservent la place et évitent
   le décalage de mise en page au chargement.
   --------------------------------------------------------------------- */
.logo {
  display: inline-flex;
  align-items: center;
  transition: opacity var(--dur) var(--ease);
}
.logo:hover { opacity: 0.7; }

.logo img {
  width: auto;
  height: 1.85rem;
}


/* ==========================================================================
   05. HEADER & NAVIGATION
   ========================================================================== */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-block: 1.25rem;
  transition:
    background-color var(--dur) var(--ease-soft),
    box-shadow var(--dur) var(--ease-soft),
    padding var(--dur) var(--ease-soft);
}
.site-header.is-scrolled {
  padding-block: 0.7rem;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 0 var(--c-line);
}

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

.nav {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(88vw, 380px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-xl) var(--space-md);
  background: var(--c-ink);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease), visibility var(--dur-slow);
}
.nav.is-open { transform: translateX(0); visibility: visible; }

.nav__list { display: flex; flex-direction: column; gap: var(--space-sm); }

/* Minuscules et graisse légère : la signature de la nav d'ADN. */
.nav__link {
  position: relative;
  font-family: var(--font-body);
  font-size: 1.6rem;
  font-weight: 300;
  text-transform: lowercase;
  color: #FFFFFF;
  transition: color var(--dur) var(--ease);
}
.nav__link:hover { color: var(--c-cyan); }

.nav-toggle {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.5rem;
  z-index: 102;
  transition: background-color var(--dur) var(--ease);
}
.nav-toggle:hover { background: var(--c-ink-06); }

.nav-toggle__bars { display: block; width: 1.35rem; }
.nav-toggle__bars span {
  display: block;
  height: 2px;
  background: var(--c-ink);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.nav-toggle__bars span:first-child { margin-bottom: 5px; }

.nav-toggle[aria-expanded='true'] .nav-toggle__bars span { background: #FFFFFF; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:first-child {
  transform: translateY(3.5px) rotate(45deg);
}
.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
}

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(4, 26, 23, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.nav-overlay.is-visible { opacity: 1; visibility: visible; }

body.is-locked { overflow: hidden; }


/* ==========================================================================
   06. HERO
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(620px, 100svh, 1000px);
  padding-block: calc(var(--space-xl) + 3rem) var(--space-lg);
}

/* Décor de marque (sourire + diagonale du logo).
   Porté par un pseudo-élément plutôt que par `background` sur .hero : cela
   permet de régler l'opacité au breakpoint, ce qu'une background-image ne
   permet pas. La composition est calée à droite — sa moitié gauche est vide,
   c'est là que passe la typographie ajourée. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Calé en bas à droite et limité à 72% de la hauteur : c'est le quadrant
     que les trois verbes ne touchent pas. Vérifié — aucun arc ne remonte
     dans la zone de lecture. */
  background: url('../img/hero-bg.svg') no-repeat right bottom / auto 72%;
  pointer-events: none;
}

.hero__title {
  margin-block: var(--space-md) var(--space-lg);
}
.hero__title .display-outline { font-size: var(--fs-hero); }

.hero__foot {
  display: grid;
  gap: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--c-line);
}

.hero__lead {
  max-width: 52ch;
  font-size: var(--fs-lead);
  color: var(--c-ink-70);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

.hero__stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.stat { display: flex; align-items: baseline; gap: 0.75rem; }
.stat__value {
  order: -1;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}
.stat__value span { color: var(--c-cyan-deep); }
.stat__label {
  font-size: var(--fs-small);
  line-height: 1.35;
  color: var(--c-ink-55);
  max-width: 22ch;
}


/* ==========================================================================
   07. TICKER D'EXPERTISES
   Type géante en minuscules, interlignage serré — l'équivalent du bandeau
   Swiper d'ADN, mais en CSS pur (voir initMarquee dans main.js).
   ========================================================================== */

.marquee {
  padding-block: var(--space-md);
  border-block: 1px solid var(--c-line);
  overflow: hidden;
  user-select: none;
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: scroll-x var(--marquee-duration, 42s) linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__group {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-right: 2rem;
  font-family: var(--font-display);
  font-size: var(--fs-ticker);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.035em;
  text-transform: lowercase;
  color: var(--c-ink);
  white-space: nowrap;
}

/* Séparateur : le losange diagonal du logo, en cyan. */
.marquee__group i {
  flex: none;
  width: 0.45em;
  height: 0.45em;
  background: var(--c-cyan);
  transform: skewX(var(--brand-skew));
}

/* Le track contient N groupes identiques ; -50% ramène exactement au point de
   départ. main.js garantit un nombre pair de groupes. */
@keyframes scroll-x {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ==========================================================================
   08. SECTIONS GÉNÉRIQUES
   ========================================================================== */

.section { padding-block: var(--section-y); }
.section--alt { background: var(--c-paper-alt); }

.section--dark {
  background: var(--c-ink);
  color: #FFFFFF;
}
.section--dark .section__index { color: var(--c-cyan); }
.section--dark .section__intro { color: rgba(255, 255, 255, 0.7); }
.section--dark .section__head { border-color: var(--c-line-light); }
.section--dark .display-outline { -webkit-text-stroke-color: #FFFFFF; }

.section__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--c-line);
}
.section__index {
  flex: none;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-cyan-deep);
}
.section__title { font-size: var(--fs-h2); }

.section__intro {
  max-width: 62ch;
  margin-bottom: var(--space-lg);
  font-size: var(--fs-lead);
  color: var(--c-ink-70);
}


/* ==========================================================================
   09. HISTOIRE
   ========================================================================== */

.histoire__grid { display: grid; gap: var(--space-lg); }
.histoire__lead .lead-xl { max-width: 20ch; }

.histoire__body > p + p { margin-top: var(--space-sm); }
.histoire__body > p { max-width: 62ch; color: var(--c-ink-70); }

.timeline {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--c-line);
}
.timeline__item { position: relative; padding-left: 1.5rem; }
.timeline__dot {
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 0.5rem;
  height: 0.75rem;
  background: var(--c-cyan);
  transform: skewX(var(--brand-skew));
}
.timeline__title {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.15rem;
}
.timeline__item p { font-size: var(--fs-small); color: var(--c-ink-55); }


/* ==========================================================================
   10. CE QUI NOUS ANIME — PILIERS
   ========================================================================== */

.pillars { display: grid; border-top: 1px solid var(--c-line-light); }

.pillar {
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--c-line-light);
  transition: background-color var(--dur) var(--ease);
}
.pillar__num {
  display: block;
  margin-bottom: var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-cyan);
}
.pillar__title { font-size: var(--fs-h3); margin-bottom: var(--space-xs); }
.pillar__text { max-width: 46ch; color: rgba(255, 255, 255, 0.68); }


/* ==========================================================================
   11. SERVICES — grille à angles vifs
   ========================================================================== */

.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-md);
  background: var(--c-paper-alt);
  transition: background-color var(--dur) var(--ease);
}
.service-card::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--c-cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease);
}
.service-card:hover { background: #FFFFFF; }
.service-card:hover::after { transform: scaleX(1); }

.service-card__index {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-cyan-deep);
}
.service-card__title {
  font-size: var(--fs-h3);
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: -0.03em;
}
.service-card__text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--c-ink-55);
}


/* ==========================================================================
   12. CLIENTÈLE
   ========================================================================== */

.clientele__intro { max-width: 22ch; margin-bottom: var(--space-lg); }

.audience-grid { display: grid; gap: var(--space-sm); }

.audience-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.audience-card:hover {
  border-color: var(--c-ink);
  transform: translateY(-4px);
}

/* Étiquette : aplat cyan, texte encre (9,7:1). Pas de skew ici — il
   déformerait aussi le texte ; la diagonale de marque est portée par le
   bord droit, découpé en biais. */
.audience-card__tag {
  align-self: flex-start;
  padding: 0.4rem 1.6rem 0.4rem 1rem;
  background: var(--c-cyan);
  color: var(--c-ink);
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.6rem) 100%, 0 100%);
}
.audience-card__tag--alt { background: var(--c-ink); color: var(--c-cyan); }

.audience-card__title { font-size: var(--fs-h3); max-width: 20ch; }
.audience-card__text {
  font-size: 0.9375rem;
  color: var(--c-ink-55);
  max-width: 46ch;
}

.audience-card__list {
  display: grid;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--c-line);
}
.audience-card__list li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.9rem;
  color: var(--c-ink-70);
}
.audience-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 0.5rem;
  height: 0.6rem;
  background: var(--c-cyan);
  transform: skewX(var(--brand-skew));
}


/* ==========================================================================
   13. CTA
   ========================================================================== */

.cta {
  padding-block: var(--section-y);
  background: var(--c-ink);
  color: #FFFFFF;
}
.cta__inner { max-width: 62rem; }

.cta__title { margin-block: var(--space-sm); }
.cta__title .display-outline { font-size: var(--fs-cta); }

.cta__text {
  max-width: 52ch;
  font-size: var(--fs-lead);
  color: rgba(255, 255, 255, 0.7);
}
.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-md);
}


/* ==========================================================================
   14. FOOTER
   ========================================================================== */

.site-footer {
  padding-block: var(--space-lg) var(--space-md);
  background: var(--c-ink-deep);
  color: #FFFFFF;
}

.site-footer__top {
  display: grid;
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
}

.site-footer__baseline {
  margin-top: var(--space-xs);
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.6);
}

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-md);
}

.footer-col__title {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-cyan);
  margin-bottom: var(--space-xs);
}
.footer-col ul { display: grid; gap: 0.5rem; }
.footer-col a {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.72);
  transition: color var(--dur) var(--ease);
}
.footer-col a:hover { color: var(--c-cyan); }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-xs);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--c-line-light);
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.5);
}


/* ==========================================================================
   15. ANIMATIONS D'APPARITION
   Le contenu est visible par défaut. C'est main.js qui pose `.js-reveal` sur
   <html> pour armer l'animation — ainsi, si le JS échoue ou est désactivé,
   la page reste entièrement lisible au lieu de rester à opacity: 0.
   ========================================================================== */

.reveal {
  transition:
    opacity var(--dur-slow) var(--ease),
    transform var(--dur-slow) var(--ease);
}
.js-reveal .reveal { opacity: 0; transform: translateY(22px); }
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }

.reveal[data-delay='1'] { transition-delay: 90ms; }
.reveal[data-delay='2'] { transition-delay: 180ms; }
.reveal[data-delay='3'] { transition-delay: 270ms; }
.reveal[data-delay='4'] { transition-delay: 360ms; }


/* ==========================================================================
   16. MEDIA QUERIES
   ========================================================================== */

/* --- ≥ 600px ------------------------------------------------------------ */
@media (min-width: 600px) {
  .hero__stats { grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
  .stat { flex-direction: column; gap: 0.35rem; }
  .stat__value { font-size: 2.5rem; }
  .timeline { grid-template-columns: repeat(3, 1fr); }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .audience-grid { grid-template-columns: repeat(2, 1fr); }
  .audience-card--wide { grid-column: 1 / -1; }
}

/* --- ≥ 900px : navigation horizontale, contour à pleine épaisseur -------- */
@media (min-width: 900px) {
  :root { --outline-w: 2px; }

  .nav {
    position: static;
    flex-direction: row;
    align-items: center;
    width: auto;
    padding: 0;
    background: none;
    transform: none;
    visibility: visible;
  }
  .nav__list { flex-direction: row; gap: var(--space-md); }
  .nav__link { font-size: 1rem; color: var(--c-ink); }
  .nav__link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 2px;
    background: var(--c-cyan);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--dur) var(--ease);
  }
  .nav__link:hover { color: var(--c-ink); }
  .nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
  .nav-toggle, .nav-overlay { display: none; }

  .hero__foot { grid-template-columns: 1fr auto; align-items: center; gap: var(--space-lg); }

  .histoire__grid { grid-template-columns: 5fr 7fr; gap: var(--space-xl); }
  .histoire__lead { position: sticky; top: 7rem; align-self: start; }

  .pillars { grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--c-line-light); }
  .pillar { padding: var(--space-md); background: var(--c-ink); border-bottom: none; }
  .pillar:hover { background: var(--c-ink-soft); }

  .audience-grid { gap: var(--space-md); }
  .audience-card { padding: var(--space-lg) var(--space-md) var(--space-md); }

  .site-footer__top { grid-template-columns: 4fr 8fr; }
}

/* --- < 900px : contour plus fin, sinon le trait mange la contreforme ----- */
@media (max-width: 899px) {
  :root { --outline-w: 1px; }

  /* Le décor est repoussé en bas et atténué : à 1px de contour, la
     typographie ajourée ne supporte pas d'avoir un motif derrière elle. */
  .hero::before {
    opacity: 0.5;
    background-position: right -25% bottom -5%;
    background-size: 155% auto;
  }
}

/* --- ≥ 1100px : la grille services passe à 4 colonnes ------------------- */
@media (min-width: 1100px) {
  .services-grid { grid-template-columns: repeat(4, 1fr); }
  .service-card { padding: var(--space-md) var(--space-sm) var(--space-lg); min-height: 19rem; }
  .clientele__intro { max-width: 26ch; }
}

/* --- Accessibilité : mouvement réduit -----------------------------------
   Neutralisé si <html data-motion="always"> — voir le README.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion='always']) { scroll-behavior: auto; }

  html:not([data-motion='always']) *,
  html:not([data-motion='always']) *::before,
  html:not([data-motion='always']) *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  html:not([data-motion='always']).js-reveal .reveal { opacity: 1; transform: none; }

  html:not([data-motion='always']) .marquee__track {
    animation: none;
    width: 100%;
    justify-content: center;
  }
  html:not([data-motion='always']) .marquee__group {
    flex-wrap: wrap;
    justify-content: center;
    padding-right: 0;
    white-space: normal;
  }
  html:not([data-motion='always']) .marquee__group ~ .marquee__group { display: none; }
}