/* ==========================================================================
   CREXO — Feuille de styles
   --------------------------------------------------------------------------
   01. Polices (auto-hébergées)
   02. Tokens de design
   03. Base & accessibilité
   04. En-tête & navigation
   05. Hero
   06. Bandeau défilant
   07. Titres de section
   08. Services
   09. Méthode
   10. Étude de cas
   11. IA & direction
   12. Impact
   13. FAQ
   14. Contact
   15. Pied de page
   16. Page 404
   17. Animations
   18. Responsive
   ========================================================================== */


/* 01. POLICES ============================================================= */
/* Inter est auto-hébergée : aucune requête vers un serveur tiers (RGPD). */

@font-face {
  font-family: "Inter var";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter var";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* 02. TOKENS DE DESIGN ==================================================== */

:root {
  /* Surfaces */
  --bg: #080808;
  --bg-soft: #0d0d0d;
  --bg-raised: #111111;
  --panel: #151515;
  --paper: #efeee9;          /* sections claires */
  --paper-soft: #f4f1ec;     /* formulaire */

  /* Texte */
  --text: #f7f7f4;
  --muted: #aaa8a3;          /* 8.6:1 sur --bg */
  --faint: #93908a;          /* 5.3:1 sur --bg — mentions légères */
  --ink: #0b0603;            /* texte sombre sur aplat orange */
  --ink-soft: #3a3630;
  --paper-text: #0a0a0a;
  --paper-muted: #5d5b55;

  /* Traits */
  --line: rgba(255, 255, 255, .14);
  --line-strong: rgba(255, 255, 255, .28);
  --line-dark: rgba(0, 0, 0, .16);

  /* Marque */
  --orange: #e85f24;
  --orange-bright: #ff6f30;
  --orange-deep: #c2440f;    /* variante lisible pour texte orange sur clair */
  --orange-glow: rgba(232, 95, 36, .19);

  /* Typographie fluide */
  --font: "Inter var", Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --t-micro: 11px;
  --t-small: 13px;
  --t-body: clamp(15px, .25vw + 14px, 17px);
  --t-lead: clamp(17px, .5vw + 15px, 21px);
  --t-h3: clamp(24px, 1.2vw + 20px, 30px);
  --t-h2: clamp(34px, 4.4vw, 66px);
  --t-h1: clamp(46px, 6.4vw, 90px);
  --track-tight: -.035em;
  --track-display: -.045em;
  --track-wide: .16em;

  /* Espacements */
  --space-1: 8px;
  --space-2: 14px;
  --space-3: 22px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 68px;
  --space-section: clamp(76px, 9vw, 128px);
  --gutter: clamp(20px, 4vw, 48px);

  /* Formes */
  --max: 1240px;
  --radius-sm: 12px;
  --radius: 22px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* Mouvement */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --speed: .22s;

  /* En-tête (utilisé aussi par scroll-margin-top) */
  --header-h: 86px;
}


/* 03. BASE & ACCESSIBILITÉ ================================================ */

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

html {
  scroll-behavior: smooth;
  /* Compense l'en-tête fixe quand on saute vers une ancre. */
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.6;
  /* Chiffres alignés : les listes 01–06 restent parfaitement verticales. */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

body.menu-open { overflow: hidden; }

::selection { color: #fff; background: var(--orange); }

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

figure { margin: 0; }

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

button,
input,
textarea,
select { font: inherit; color: inherit; }

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Un anneau de focus unique et visible sur toutes les surfaces. */
:focus-visible {
  outline: 2px solid var(--orange-bright);
  outline-offset: 3px;
  border-radius: 4px;
}
.contact :focus-visible,
.ticker :focus-visible { outline-color: #fff; }

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

.skip-link {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 1000;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  background: var(--orange);
  color: var(--ink);
  font-weight: 700;
  transition: top var(--speed) var(--ease);
}
.skip-link:focus-visible { top: 16px; }

.container {
  width: min(100% - (var(--gutter) * 2), var(--max));
  margin-inline: auto;
}

.section { padding: var(--space-section) 0; }

/* Boutons ---------------------------------------------------------------- */

.button {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.005em;
  cursor: pointer;
  transition: transform var(--speed) var(--ease),
              background var(--speed) var(--ease),
              border-color var(--speed) var(--ease),
              color var(--speed) var(--ease);
}
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0); }

/* Texte sombre sur orange : 6:1 au lieu de 3:1 en blanc. */
.button-primary { background: var(--orange); color: var(--ink); }
.button-primary:hover { background: var(--orange-bright); }

.button-ghost { border-color: var(--line-strong); color: #e5e3df; }
.button-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .04); }


/* 04. EN-TÊTE & NAVIGATION ================================================ */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: border-color var(--speed) var(--ease);
}

/*
  Le flou vit sur un pseudo-élément, jamais sur .site-header.
  `backdrop-filter` sur l'en-tête en ferait un bloc conteneur : le menu mobile
  en `position: fixed` se retrouverait dimensionné sur l'en-tête (~160px) au
  lieu du viewport, et ne pourrait plus sortir de l'écran.
*/
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(8, 8, 8, .96), rgba(8, 8, 8, .6), transparent);
  transition: background var(--speed) var(--ease), backdrop-filter var(--speed) var(--ease);
}
.site-header.scrolled { border-bottom-color: var(--line); }
.site-header.scrolled::before {
  background: rgba(8, 8, 8, .82);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.nav-shell {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.brand { display: inline-flex; }
.brand img { width: 158px; height: auto; }

.main-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 14px;
  font-weight: 600;
}
.main-nav a {
  color: #d7d7d3;
  transition: color var(--speed) var(--ease);
}
.main-nav a:hover { color: #fff; }
.main-nav a[aria-current="true"] { color: #fff; }

.nav-cta {
  border: 1px solid var(--line-strong);
  padding: 11px 18px;
  border-radius: var(--radius-pill);
  transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease);
}
.nav-cta:hover { border-color: var(--orange); background: rgba(232, 95, 36, .12); }

.menu-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
  border-radius: 50%;
  cursor: pointer;
}
.menu-toggle span:not(.sr-only) {
  display: block;
  width: 18px;
  height: 1.5px;
  background: #fff;
  margin: 5px auto;
  border-radius: 2px;
  transition: transform var(--speed) var(--ease), opacity var(--speed) var(--ease);
}

/* Sélecteur de langue : 4 codes courts, pas de drapeaux. Un drapeau associe
   une langue à un pays (le néerlandais n'est pas que la Belgique, l'espagnol
   n'est pas que l'Espagne) — le code ISO reste neutre et se comprend partout. */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding-left: 20px;
  border-left: 1px solid var(--line);
}
.lang-switch a {
  padding: 5px 9px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--faint);
  border: 1px solid transparent;
  transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease), background var(--speed) var(--ease);
}
.lang-switch a:hover { color: #fff; border-color: var(--line-strong); }
.lang-switch a[aria-current="true"] {
  color: var(--ink);
  background: var(--orange);
  border-color: var(--orange);
}


/* 05. HERO ================================================================ */

.hero {
  position: relative;
  isolation: isolate;
  /* Le halo déborde volontairement à droite : on le clippe ici plutôt que
     de masquer le débordement au niveau de <body>. */
  overflow: clip;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding: calc(var(--header-h) + 64px) 0 var(--space-6);
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  width: min(560px, 60vw);
  aspect-ratio: 1;
  right: -8%;
  top: 18%;
  background: radial-gradient(circle, var(--orange-glow), transparent 68%);
  filter: blur(10px);
}

.hero-grid-bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  opacity: .38;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, #000, transparent 92%);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 92%);
}

.hero-layout {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(40px, 5vw, 76px);
  align-items: center;
}

.eyebrow,
.kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--space-3);
  color: #d4d2cd;
}
.eyebrow span {
  width: 34px;
  height: 2px;
  background: var(--orange);
  flex: 0 0 auto;
}
.kicker { margin: 0 0 18px; color: var(--orange); }

.hero h1 {
  margin: 0;
  max-width: 15ch;
  font-size: var(--t-h1);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--track-display);
}
.hero h1 em { color: var(--orange); font-style: normal; }
.hero-subline {
  display: block;
  margin-top: .12em;
  font-size: .74em;
  line-height: 1.04;
}

.hero-lead {
  max-width: 54ch;
  margin: var(--space-3) 0 0;
  color: var(--muted);
  font-size: var(--t-lead);
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

.hero-proof {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin: var(--space-5) 0 0;
  padding: var(--space-3) 0 0;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

/* Visuel du hero ---------------------------------------------------------
   Le graphique est un SVG à viewBox : il se met à l'échelle exactement.
   Les nœuds sont positionnés en pourcentage dans un cadre à ratio fixe,
   donc ils restent alignés sur la courbe à toutes les largeurs.
   ------------------------------------------------------------------------ */

.hero-visual { min-width: 0; }

.visual-frame {
  position: relative;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
  box-shadow: 0 30px 100px rgba(0, 0, 0, .4);
}
.visual-frame::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: calc(var(--radius-lg) - 8px);
  pointer-events: none;
}

.visual-topline {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #a5a29c;
  font-size: clamp(8px, 2.1vw, 10px);
  font-weight: 600;
  letter-spacing: .14em;
}
/* Le libellé du cadre doit tenir sur une seule ligne, y compris sur mobile. */
.visual-topline span { white-space: nowrap; }

.visual-center {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: var(--space-2) 0 var(--space-3);
}
.visual-chart {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.brand-node {
  position: absolute;
  z-index: 3;
  width: 5.6%;
  aspect-ratio: 1;
  background: var(--node-color, #fff);
  -webkit-mask: url("assets/logo-crexo-mark.webp") center / contain no-repeat;
  mask: url("assets/logo-crexo-mark.webp") center / contain no-repeat;
  filter: drop-shadow(0 6px 15px rgba(255, 255, 255, .18));
  opacity: var(--node-opacity, 1);
  transform: translate(-50%, -50%);
}
.node-1 { left: 18.33%; top: 59.72%; --node-color: #ffffff; --node-opacity: .8; }
.node-2 { left: 34.17%; top: 49.44%; --node-color: #f4d9cd; --node-opacity: .86; }
.node-3 { left: 50%;    top: 38.89%; --node-color: #efaa8c; --node-opacity: .92; }
.node-4 { left: 65.83%; top: 25.56%; --node-color: #ec7d4f; }
.node-5 {
  left: 81.67%;
  top: 12.5%;
  width: 8.4%;
  --node-color: var(--orange);
  filter: drop-shadow(0 8px 22px rgba(232, 95, 36, .48));
}

/* ------------------------------------------------------------------------
   Mise en mouvement du graphique.
   Les animations se déclenchent avec la classe `.visible` posée par
   l'observateur d'apparition : les barres montent, la courbe se trace,
   puis les nœuds arrivent un à un le long du tracé.
   ------------------------------------------------------------------------ */

.chart-bar {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
/*
  Longueur mesurée du tracé : 349 unités, arrondie au-dessus.
  L'état par défaut est « tracé visible » : si le JavaScript ne s'exécute
  pas, la courbe reste dessinée au lieu de disparaître.
*/
.chart-line { stroke-dasharray: 360; }

/* Segment court de 16 unités qui glisse le long des 360 du tracé. Invisible
   tant que l'animation n'a pas démarré. */
.chart-pulse {
  stroke-dasharray: 16 344;
  stroke-dashoffset: 360;
  opacity: 0;
  filter: drop-shadow(0 0 7px var(--orange-bright));
  will-change: stroke-dashoffset, opacity;
}

.hero-visual.visible .chart-bar { animation: barRise .85s var(--ease) backwards; }
.hero-visual.visible .chart-bar:nth-child(1) { animation-delay: .10s; }
.hero-visual.visible .chart-bar:nth-child(2) { animation-delay: .20s; }
.hero-visual.visible .chart-bar:nth-child(3) { animation-delay: .30s; }
.hero-visual.visible .chart-bar:nth-child(4) { animation-delay: .40s; }
.hero-visual.visible .chart-bar:nth-child(5) { animation-delay: .50s; }

.hero-visual.visible .chart-line { animation: drawLine 1.5s var(--ease) .45s forwards; }

/*
  Le voyage. La comète met 4s à parcourir la route ; chaque jalon s'allume
  au moment précis où elle le dépasse, puis le cycle recommence. Les délais
  ci-dessous correspondent à la position réelle de chaque nœud sur le tracé
  (0 %, 24 %, 49 %, 75 %, 100 % de la longueur).
*/
.hero-visual.visible .chart-pulse { animation: travel 4s linear 2s infinite; }

.hero-visual.visible .brand-node {
  animation: nodeIn .5s var(--ease) backwards,
             nodeStep 4s linear infinite;
}
.hero-visual.visible .node-1 { animation-delay: .70s, 2.00s; }
.hero-visual.visible .node-2 { animation-delay: .90s, 2.96s; }
.hero-visual.visible .node-3 { animation-delay: 1.10s, 3.96s; }
.hero-visual.visible .node-4 { animation-delay: 1.30s, 5.00s; }
.hero-visual.visible .node-5 {
  /* Point d'arrivée : il s'allume au passage de la comète et flotte ensuite. */
  animation: nodeIn .5s var(--ease) 1.50s backwards,
             nodeStep 4s linear 6.00s infinite,
             nodeFloat 3.6s ease-in-out 2.1s infinite;
}

.hero-visual.visible .chart-ring { animation: ringBreathe 9s ease-in-out 1.8s infinite; }
.hero-visual.visible .chart-ring-b { animation-duration: 11s; animation-delay: 2.4s; }
.hero-visual.visible .chart-glow { animation: glowPulse 7s ease-in-out 1.5s infinite; }

.visual-tags {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  position: relative;
  z-index: 2;
}
.visual-tags span {
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 10px 4px;
  text-align: center;
  color: #c9c7c1;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
}

.visual-caption {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--space-3);
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 18px var(--orange);
  flex: 0 0 auto;
}


/* 06. BANDEAU DÉFILANT ==================================================== */

.ticker {
  overflow: hidden;
  border-block: 1px solid rgba(0, 0, 0, .18);
  background: var(--orange);
  /* Encre sombre sur orange : 6:1 (le blanc plafonnait à 3:1). */
  color: var(--ink);
}
.ticker-track {
  width: max-content;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 15px 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  animation: ticker 34s linear infinite;
  will-change: transform;
}
.ticker-track b { font-size: 22px; font-weight: 400; opacity: .55; }
.ticker:hover .ticker-track { animation-play-state: paused; }


/* 07. TITRES DE SECTION ===================================================
   Un seul composant de titre pour toutes les sections : la page respire
   sur la même grille au lieu d'alterner deux et trois colonnes.
   ========================================================================= */

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(240px, .8fr);
  gap: var(--space-3) clamp(32px, 6vw, 80px);
  align-items: end;
  margin-bottom: var(--space-6);
}
.section-heading .kicker { grid-column: 1 / -1; margin-bottom: 0; }
.section-heading h2 { max-width: 18ch; }
.section-heading > p:last-child {
  max-width: 44ch;
  margin: 0 0 5px;
  color: var(--muted);
  line-height: 1.65;
}

h2 {
  margin: 0;
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: var(--track-display);
}
h3 {
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: var(--track-tight);
}


/* 08. SERVICES ============================================================ */

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

/*
  Colonne flex : le numéro reste en haut, le bloc titre + texte est poussé
  en bas. Les cartes d'une même rangée s'alignent donc sur la même ligne de
  base, quelle que soit la longueur du titre.
*/
.service-card {
  display: flex;
  flex-direction: column;
  min-height: 320px;
  padding: var(--space-3);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  background: rgba(255, 255, 255, .012);
  transition: background var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.service-card:hover {
  background: rgba(232, 95, 36, .07);
  transform: translateY(-3px);
}
.service-card .service-index {
  margin: 0;
  color: var(--faint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .15em;
}
.service-card h3 {
  max-width: 14ch;
  margin: auto 0 12px;
  padding-top: var(--space-5);
}
.service-card p:not(.service-index) {
  max-width: 38ch;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.62;
}
.card-mark {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 22px;
  height: 22px;
  object-fit: contain;
  opacity: .9;
  filter: drop-shadow(0 10px 22px rgba(232, 95, 36, .18));
}


/* 09. MÉTHODE ============================================================= */

.method { background: var(--paper); color: var(--paper-text); }
.method .kicker { color: var(--orange-deep); }

.method-layout {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(48px, 7vw, 95px);
}
.method-intro { position: relative; }
.method-intro > p:not(.kicker) {
  max-width: 46ch;
  color: var(--paper-muted);
  font-size: var(--t-lead);
  line-height: 1.65;
}

.method-stamp {
  width: clamp(160px, 18vw, 220px);
  aspect-ratio: 1;
  margin-top: var(--space-6);
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .15);
  display: grid;
  place-items: center;
  position: relative;
  background: radial-gradient(circle at 50% 50%, rgba(232, 95, 36, .12), transparent 62%);
}
.method-stamp::after {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .08);
}

/* Arc orange détaché du cercle : c'est lui qui rend la rotation lisible.
   Le masque radial évide le disque pour ne garder qu'un anneau de 2px. */
.method-stamp::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
              transparent 0 58%,
              var(--orange) 68% 80%,
              transparent 88% 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  animation: stampSpin 14s linear infinite;
}

.method-stamp img {
  width: 47%;
  /* Sans cette ligne, l'attribut height="150" du HTML l'emporte et la
     flèche est étirée en hauteur (74 × 150 au lieu d'un carré). */
  height: auto;
  position: relative;
  z-index: 1;
  animation: stampBreathe 5s ease-in-out infinite;
}

/*
  Progressive enhancement : là où les animations liées au défilement sont
  disponibles (Chrome, Edge), le sceau se pilote à la molette — l'arc tourne
  et la flèche grandit au rythme exact du scroll. Ailleurs, la boucle
  temporelle ci-dessus reste en place.
*/
@supports (animation-timeline: view()) {
  .method-stamp::before {
    animation: stampSpin linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
  .method-stamp img {
    animation: stampScroll linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 60%;
  }
}

.process-list { list-style: none; padding: 0; margin: 0; }
.process-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--space-3);
  padding: var(--space-3) 0 var(--space-4);
  border-top: 1px solid var(--line-dark);
}
.process-item:last-child { border-bottom: 1px solid var(--line-dark); }
.process-item > span {
  color: var(--orange-deep);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
}
.process-item h3 { margin: 0 0 6px; }
.process-item p { margin: 0; color: var(--paper-muted); line-height: 1.6; }


/* 10. ÉTUDE DE CAS ======================================================== */

.case-study { background: var(--bg-soft); }

.case-shell {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.case-meta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.case-meta .kicker { margin: 0; }

.case-headline {
  display: grid;
  grid-template-columns: 1.5fr .8fr;
  gap: clamp(32px, 5vw, 80px);
  padding: clamp(40px, 5vw, 70px) clamp(24px, 4vw, 50px);
}
.case-headline h2 { max-width: 17ch; }
.case-headline p {
  margin: 0;
  max-width: 42ch;
  color: var(--muted);
  line-height: 1.7;
  align-self: end;
}

.case-board { display: grid; grid-template-columns: 1.25fr .75fr; }
.case-panel {
  display: flex;
  flex-direction: column;
  min-height: 250px;
  padding: var(--space-4);
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  position: relative;
}
.case-panel:nth-child(even) { border-right: 0; }
.case-panel-main {
  min-height: 420px;
  background: radial-gradient(circle at 20% 20%, rgba(232, 95, 36, .22), transparent 46%), var(--panel);
}
.panel-label {
  margin: 0 0 var(--space-5);
  color: #9d9a94;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
}
.case-panel h3 {
  margin: 0;
  font-size: clamp(34px, 5vw, 68px);
  letter-spacing: var(--track-display);
}
.case-panel > p:not(.panel-label) {
  max-width: 48ch;
  color: #c5c3bd;
  line-height: 1.7;
}
/* La liste occupe toute la hauteur restante : les filets se répartissent
   régulièrement au lieu de laisser un vide sous le dernier élément. */
.case-panel ul {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.case-panel li {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  color: #d8d6d0;
  font-size: 15px;
}
.case-panel li:last-child { border-bottom: 0; }

/* Forme d'onde : large et basse, elle traverse tout le panneau. */
.sound-bars {
  margin-top: auto;
  width: 100%;
  height: clamp(56px, 7vw, 78px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(2px, .5vw, 5px);
  opacity: .9;
}
.sound-bars i {
  display: block;
  flex: 1 1 0;
  min-width: 2px;
  height: 22%;
  border-radius: 2px;
  background: linear-gradient(to top, var(--orange-deep), var(--orange-bright));
  animation: sound 1.5s ease-in-out infinite alternate;
}

/*
  Décalages irréguliers sans écrire une règle par barre : en superposant
  des cycles premiers entre eux (2, 3, 5, 7, 11), le motif ne se répète
  visuellement qu'au bout de 2310 barres. Le résultat se lit comme un vrai
  signal audio plutôt que comme une vague régulière.
*/
.sound-bars i:nth-child(2n)  { animation-delay: -.35s; animation-duration: 1.7s; }
.sound-bars i:nth-child(3n)  { animation-delay: -.70s; animation-duration: 1.2s; }
.sound-bars i:nth-child(5n)  { animation-delay: -1.10s; animation-duration: 1.9s; }
.sound-bars i:nth-child(7n)  { animation-delay: -.50s; animation-duration: 1.35s; }
.sound-bars i:nth-child(11n) { animation-delay: -1.45s; animation-duration: 1.6s; }

/* Enveloppe : les barres du centre montent plus haut que celles des bords,
   comme sur une piste audio réelle. */
.sound-bars i:nth-child(-n+5),
.sound-bars i:nth-child(n+40) { --peak: 42%; opacity: .6; }
.sound-bars i:nth-child(n+6):nth-child(-n+12),
.sound-bars i:nth-child(n+33):nth-child(-n+39) { --peak: 68%; opacity: .8; }

.case-panel-accent { background: var(--orange); color: var(--ink); }
.case-panel-accent .panel-label { color: rgba(11, 6, 3, .72); }
.case-panel-accent > p:not(.panel-label) { color: var(--ink); font-weight: 500; }

/* Le symbole CREXO répété, du sombre vers le blanc : la progression de la
   notoriété racontée avec la marque elle-même. */
.accent-trail {
  margin-top: auto;
  align-self: flex-end;
  display: flex;
  align-items: center;
  gap: clamp(2px, .6vw, 6px);
}
.accent-step {
  width: clamp(32px, 4.4vw, 54px);
  aspect-ratio: 1;
  background: var(--step-color);
  opacity: var(--step-opacity, 1);
  -webkit-mask: url("assets/logo-crexo-mark.webp") center / contain no-repeat;
  mask: url("assets/logo-crexo-mark.webp") center / contain no-repeat;
}
.accent-step-1 { --step-color: #1a0d05; }
.accent-step-2 { --step-color: #6d4025; }
.accent-step-3 { --step-color: #c9a48c; }
.accent-step-4 { --step-color: #ffffff; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .22)); }
/* Les deux derniers ne sont que la trace lumineuse de la jauge. */
.accent-step-5 { --step-color: #ffffff; --step-opacity: 0; }
.accent-step-6 { --step-color: #ffffff; --step-opacity: 0; }

/*
  Deux temps : les symboles arrivent en cascade à l'entrée à l'écran, puis
  une vague blanche les parcourt en boucle — l'effet « ça se charge ».
*/
.case-shell.visible .accent-step {
  animation: stepIn .6s var(--ease) backwards,
             charge 2.8s ease-in-out infinite;
}
.case-shell.visible .accent-step-1 { animation-delay: .30s, 1.20s; }
.case-shell.visible .accent-step-2 { animation-delay: .42s, 1.34s; }
.case-shell.visible .accent-step-3 { animation-delay: .54s, 1.48s; }
.case-shell.visible .accent-step-4 { animation-delay: .66s, 1.62s; }
.case-shell.visible .accent-step-5 { animation-delay: .78s, 1.76s; }
.case-shell.visible .accent-step-6 { animation-delay: .90s, 1.90s; }

.case-panel-credits { background: rgba(255, 255, 255, .015); }
.credits-list { display: grid; gap: var(--space-2); }
.credits-list div { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.credits-list div:last-child { padding-bottom: 0; border-bottom: 0; }
.credits-list strong,
.credits-list span { display: block; }
.credits-list strong { font-size: 14px; margin-bottom: 6px; color: #f3f1ec; }
.credits-list span { color: var(--muted); font-size: 12px; line-height: 1.5; }


/* 11. IA & DIRECTION ====================================================== */

.ai-section { background: var(--bg-raised); }
.ai-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 76px);
  align-items: center;
}
.ai-copy > p:not(.kicker) {
  max-width: 52ch;
  color: var(--muted);
  font-size: var(--t-lead);
  line-height: 1.7;
}
.ai-note {
  border-left: 2px solid var(--orange);
  padding-left: 18px;
  font-size: var(--t-body) !important;
}

.ai-console {
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: #090909;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
.console-header {
  height: 48px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid var(--line);
}
.console-header span { width: 8px; height: 8px; border-radius: 50%; background: #3a3a3a; }
.console-header span:first-child { background: var(--orange); }
.console-header b {
  margin-left: auto;
  color: #8d8d88;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
}
.console-line {
  display: grid;
  grid-template-columns: 40px 1fr;
  min-height: 58px;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  padding: 0 18px;
  font-family: var(--font-mono);
  font-size: 13px;
}
.console-line > span { color: #7a7a75; }
.console-line p { margin: 0; color: #b4b4af; }
.console-line b { color: #f1f1ed; font-weight: 600; }
.console-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px;
  color: var(--muted);
  font-size: 12px;
}
.console-status span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 14px var(--orange);
  flex: 0 0 auto;
}


/* 12. IMPACT ============================================================== */

.impact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.impact-card {
  display: flex;
  flex-direction: column;
  min-height: 290px;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, .008));
  overflow: hidden;
  transition: border-color var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.impact-card:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.impact-card::after {
  content: "";
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 0;
  height: 2px;
  background: linear-gradient(to right, var(--orange), transparent 72%);
  opacity: .8;
}
.impact-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.impact-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, .14);
  color: var(--orange);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
}
.impact-mark { width: 18px; height: 18px; opacity: .9; }
.impact-card h3 { margin: auto 0 10px; padding-top: var(--space-5); }
.impact-card p { margin: 0; max-width: 30ch; color: var(--muted); font-size: 15px; line-height: 1.6; }


/* 13. FAQ ==================================================================
   <details>/<summary> natifs : accordéon accessible sans JavaScript,
   name="faq" en HTML regroupe les items pour qu'un seul reste ouvert.
   ========================================================================= */

.faq-list {
  max-width: 760px;
  border-top: 1px solid var(--line);
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 4px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: color var(--speed) var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item:hover summary { color: var(--orange); }
.faq-item[open] summary { color: var(--orange); }

.faq-icon {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--speed) var(--ease);
}
.faq-icon::before { width: 14px; height: 2px; }
.faq-icon::after { width: 2px; height: 14px; }
.faq-item[open] .faq-icon::after { transform: rotate(90deg) scaleX(0); }

.faq-item p {
  margin: 0;
  padding: 0 4px var(--space-3);
  max-width: 60ch;
  color: var(--muted);
  line-height: 1.7;
}
.faq-item a { color: var(--orange-deep); text-decoration: underline; text-underline-offset: 3px; }


/* 14. CONTACT =============================================================
   Fond sombre + accent orange : le blanc sur aplat orange plein plafonnait
   à 3:1 et un écran entier de saturation faisait perdre l'accent de marque.
   ========================================================================= */

.contact {
  position: relative;
  isolation: isolate;
  background: var(--bg-raised);
  overflow: hidden;
}
.contact::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -20% -10% auto -10%;
  height: 70%;
  background: radial-gradient(ellipse at 20% 0%, rgba(232, 95, 36, .22), transparent 62%);
}

.contact-layout {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}
.contact-copy > p:not(.kicker) {
  max-width: 46ch;
  color: var(--muted);
  line-height: 1.7;
}
.contact-copy strong { color: var(--text); }

.handle-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: min(100%, 420px);
  margin-top: var(--space-4);
  padding: 16px 20px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .03);
  cursor: pointer;
  transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease);
}
.handle-copy:hover { border-color: var(--orange); background: rgba(232, 95, 36, .1); }
.handle-copy b {
  flex: 0 0 auto;
  color: var(--orange);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.contact-alt {
  margin-top: var(--space-3);
  color: var(--faint);
  font-size: var(--t-small);
}
.contact-alt a { color: var(--text); border-bottom: 1px solid var(--line-strong); }
.contact-alt a:hover { color: var(--orange); border-color: var(--orange); }

/* Formulaire ------------------------------------------------------------- */

.brief-form {
  padding: var(--space-4);
  border-radius: var(--radius);
  background: var(--paper-soft);
  color: var(--paper-text);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .45);
}
.brief-form label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }

/* Piège à robots : ce champ n'existe que pour être rempli par un robot.
   `display: none` le retire aussi de l'ordre de tabulation et des lecteurs
   d'écran — aucun visiteur ne peut le cocher par accident. */
.brief-form .honeypot { display: none; }

.brief-form input,
.brief-form textarea,
.brief-form select {
  width: 100%;
  margin-top: 7px;
  border: 1px solid rgba(0, 0, 0, .18);
  background: #fff;
  border-radius: var(--radius-sm);
  color: #111;
  font-size: 15px;
  font-weight: 400;
  padding: 13px 15px;
  outline: none;
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.brief-form ::placeholder { color: #8b8781; }
.brief-form input:focus,
.brief-form textarea:focus,
.brief-form select:focus {
  border-color: var(--orange-deep);
  box-shadow: 0 0 0 3px rgba(232, 95, 36, .18);
}
.brief-form textarea { resize: vertical; min-height: 128px; line-height: 1.55; }

.brief-form select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230a0a0a' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px;
}

.form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-1);
}
.form-footer p {
  max-width: 34ch;
  margin: 0;
  color: #6b675f;
  font-size: 12px;
  line-height: 1.5;
}
.form-footer .button { border: 0; flex: 0 0 auto; }

.form-message {
  margin-top: var(--space-2);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
}
.form-message:empty { display: none; }
.form-message.is-error { color: #a32d10; }


/* 15. PIED DE PAGE ======================================================== */

.site-footer {
  padding: 0 0 var(--space-4);
  border-top: 1px solid var(--line);
  background: #090909;
}
.footer-cta { padding: var(--space-6) 0 var(--space-5); border-bottom: 1px solid var(--line); }
.footer-cta .kicker { margin-bottom: var(--space-3); }
.footer-cta-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
}
.footer-cta h2 { font-size: clamp(38px, 5.6vw, 80px); line-height: .98; }
.footer-email {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-strong);
  color: #f3f1ec;
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 600;
  letter-spacing: -.02em;
  transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.footer-email:hover { color: var(--orange); border-color: var(--orange); }

.footer-main {
  display: grid;
  grid-template-columns: 1.5fr .7fr 1fr;
  gap: clamp(36px, 5vw, 80px);
  padding: var(--space-5) 0;
}
.footer-brand-wordmark { width: 168px; height: auto; margin-bottom: var(--space-3); }
.footer-brand p { max-width: 44ch; margin: 0; color: var(--muted); line-height: 1.7; font-size: 14px; }
.footer-brand-note { margin: 0; font-size: 14px; }
.footer-brand-note a {
  color: #d5d3cd;
  border-bottom: 1px solid var(--line);
  transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.footer-brand-note a:hover { color: var(--orange); border-color: var(--orange); }

.footer-label {
  margin: 0 0 18px;
  color: var(--faint);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}
/* Le libellé "Navigation" est un frère du bloc de liens, pas un membre de
   la grille : sinon il occupe la première cellule et décale tout le reste. */
.footer-nav-links {
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  column-gap: clamp(20px, 3vw, 40px);
  row-gap: 11px;
  justify-content: start;
}
.footer-nav-links a {
  color: #d5d3cd;
  font-size: 14px;
  white-space: nowrap;
  transition: color var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.footer-nav-links a:hover { color: #fff; transform: translateX(3px); }

/* Carré 2 × 2 : icône et nom seulement. minmax(0, 1fr) et non 1fr, sinon
   un nom long impose sa largeur à la colonne et fait déborder la grille. */
.social-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.social-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px 7px 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .02);
  color: #d6d3cc;
  transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease),
              background var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.social-link:hover {
  color: #fff;
  border-color: var(--orange);
  background: rgba(232, 95, 36, .1);
  transform: translateY(-2px);
}
.social-link span {
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.social-link svg {
  flex: none;
  width: 30px;
  height: 30px;
  padding: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .05);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: background var(--speed) var(--ease);
}
.social-link:hover svg { background: rgba(232, 95, 36, .22); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: 12px;
}
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.footer-bottom a {
  color: #bbb8b1;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.footer-bottom a:hover { color: var(--orange); border-color: var(--orange); }


/* 14b. PAGES LÉGALES ====================================================== */

.legal { padding: calc(var(--header-h) + var(--space-6)) 0 var(--space-section); }
.legal-inner { width: min(100% - (var(--gutter) * 2), 74ch); margin-inline: auto; }
.legal h1 {
  margin: 0 0 var(--space-2);
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: var(--track-display);
}
.legal-updated { margin: 0 0 var(--space-6); color: var(--faint); font-size: var(--t-small); }
.legal h2 {
  margin: var(--space-5) 0 var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: var(--track-tight);
}
.legal p,
.legal li { color: var(--muted); line-height: 1.75; }
.legal p { margin: 0 0 var(--space-2); }
.legal ul { margin: 0 0 var(--space-2); padding-left: 1.15em; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--text); border-bottom: 1px solid var(--line-strong); }
.legal a:hover { color: var(--orange); border-color: var(--orange); }
.legal strong { color: var(--text); }

/* Repère visible pour les informations que CREXO doit renseigner. */
.legal mark {
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(232, 95, 36, .18);
  color: var(--orange-bright);
  font-weight: 600;
}

.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-4);
  color: var(--muted);
  font-size: var(--t-small);
  font-weight: 600;
}
.legal-back:hover { color: var(--orange); }


/* 16. PAGE 404 ============================================================= */

.notfound {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--gutter);
  text-align: center;
}
.notfound-brand { display: inline-flex; margin-bottom: var(--space-3); }
.notfound-brand img { width: 168px; height: auto; }
.notfound-code {
  margin: 0;
  font-size: clamp(90px, 16vw, 200px);
  font-weight: 800;
  line-height: .85;
  letter-spacing: var(--track-display);
  color: var(--line-strong);
}
.notfound h1 {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700;
  letter-spacing: var(--track-tight);
}
.notfound p {
  margin: 0;
  max-width: 42ch;
  color: var(--muted);
  line-height: 1.7;
}
.notfound .button { margin-top: var(--space-3); }


/* 17. ANIMATIONS ========================================================== */

.reveal {
  opacity: 0;
  /* Léger recul en profondeur en plus de la montée : l'élément « arrive »
     vers le lecteur au lieu de simplement glisser. */
  transform: translateY(28px) scale(.985);
  transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease);
  filter: blur(6px);
}
.reveal.visible { opacity: 1; transform: none; filter: none; }
.reveal-delay-1 { transition-delay: .09s; }
.reveal-delay-2 { transition-delay: .18s; }
.reveal-delay-3 { transition-delay: .27s; }

/*
  Cartes en cascade : chaque carte d'une grille entre légèrement après la
  précédente. Le décalage est porté par --stagger, posé par script.js, ce qui
  évite d'écrire une règle par carte.
*/
.service-card.reveal,
.impact-card.reveal,
.process-item.reveal,
.faq-item.reveal { transition-delay: calc(var(--stagger, 0) * .07s); }

/*
  Parallaxe liée au défilement, réservée aux éléments qui ne passent PAS par
  `.reveal` : les deux systèmes animent opacity et transform, les cumuler
  ferait clignoter l'élément.
*/
@supports (animation-timeline: view()) {
  .visual-frame,
  .brief-form {
    animation: driftIn linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 70%;
  }
}
@keyframes driftIn {
  from { transform: translateY(26px); }
  to   { transform: none; }
}

@keyframes ticker { to { transform: translateX(-50%); } }
@keyframes sound { from { height: 12%; } to { height: var(--peak, 100%); } }

/* Le symbole répété du panneau « Objectif » */
@keyframes stepIn {
  from { opacity: 0; transform: translateX(-10px) scale(.86); }
  to   { opacity: var(--step-opacity, 1); transform: none; }
}
/* La vague de « charge » : chaque symbole s'allume en blanc, puis retombe
   à son état de repos. Décalés, ils donnent une jauge qui se remplit. */
@keyframes charge {
  0%   { background: var(--step-color); opacity: var(--step-opacity, 1); transform: none; }
  8%   { background: #fff; opacity: 1; transform: translateX(3px) scale(1.08); }
  30%  { background: var(--step-color); opacity: var(--step-opacity, 1); transform: none; }
  100% { background: var(--step-color); opacity: var(--step-opacity, 1); transform: none; }
}

/* Graphique du hero */
@keyframes barRise {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}
@keyframes drawLine {
  from { stroke-dashoffset: 360; }
  to   { stroke-dashoffset: 0; }
}
@keyframes nodeIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.35); }
  to   { opacity: var(--node-opacity, 1); transform: translate(-50%, -50%) scale(1); }
}
@keyframes nodeFloat {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -58%) scale(1.06); }
}

/* La comète parcourt la route, s'estompe à l'arrivée, puis repart. */
@keyframes travel {
  0%        { stroke-dashoffset: 360; opacity: 0; }
  8%        { opacity: .95; }
  82%       { opacity: .95; }
  100%      { stroke-dashoffset: 0; opacity: 0; }
}

/* Chaque jalon s'illumine au passage de la comète. N'anime ni la position
   ni l'échelle : le flottement du dernier nœud reste indépendant. */
@keyframes nodeStep {
  0%   { opacity: var(--node-opacity, 1); filter: drop-shadow(0 6px 15px rgba(255, 255, 255, .18)); }
  4%   { opacity: 1; filter: drop-shadow(0 0 16px rgba(255, 168, 110, .95)) brightness(1.45); }
  18%  { opacity: var(--node-opacity, 1); filter: drop-shadow(0 6px 15px rgba(255, 255, 255, .18)); }
  100% { opacity: var(--node-opacity, 1); filter: drop-shadow(0 6px 15px rgba(255, 255, 255, .18)); }
}

/* Sceau de la section Méthode */
@keyframes stampSpin { to { transform: rotate(360deg); } }
@keyframes stampBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
@keyframes stampScroll {
  from { transform: scale(.72) rotate(-14deg); opacity: .45; }
  to   { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes ringBreathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}
@keyframes glowPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .6; }
}


/* 18. RESPONSIVE ========================================================== */

@media (max-width: 1060px) {
  .hero-layout,
  .method-layout,
  .ai-layout,
  .contact-layout { grid-template-columns: 1fr; }

  .hero { min-height: 0; padding-top: calc(var(--header-h) + 48px); }
  .hero-visual { max-width: 680px; width: 100%; }
  .hero h1 { max-width: 18ch; }

  .section-heading { grid-template-columns: minmax(0, 1.3fr) minmax(230px, .8fr); }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .case-headline { grid-template-columns: 1fr; gap: var(--space-3); }
  .impact-grid { grid-template-columns: repeat(2, 1fr); }

  .footer-main { grid-template-columns: 1.2fr .8fr; }
  .footer-socials { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  :root { --header-h: 72px; }

  /* Le logo et le bouton restent au-dessus du panneau plein écran :
     l'utilisateur garde un repère de marque et une sortie visible. */
  .brand { position: relative; z-index: 102; }
  .menu-toggle { display: block; position: relative; z-index: 102; }

  /*
    Le panneau plein écran est fixé au viewport. `100dvh` suit la barre
    d'URL mobile, et la translation en `vh` garantit qu'il sort de l'écran
    même si la hauteur du contenu change.
  */
  .main-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100dvh;
    z-index: 101;
    padding: calc(var(--header-h) + 40px) var(--gutter) 40px;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(-110vh);
    visibility: hidden;
    transition: transform .35s var(--ease), visibility 0s linear .35s;
  }
  .main-nav.open {
    transform: translateY(0);
    visibility: visible;
    transition: transform .35s var(--ease), visibility 0s;
  }
  .main-nav a {
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -.03em;
  }
  /* `.main-nav a` est plus spécifique que `.nav-cta` : on qualifie le
     sélecteur pour que l'appel à l'action garde la couleur de marque. */
  .main-nav .nav-cta {
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    color: var(--orange);
  }
  .main-nav .nav-cta:hover { background: none; color: var(--orange-bright); }

  .lang-switch {
    border-left: 0;
    border-top: 1px solid var(--line);
    margin: 18px 0 0;
    padding: 22px 0 0;
    justify-content: flex-start;
    gap: 8px;
  }
  .lang-switch a {
    padding: 9px 16px;
    font-size: 13px;
    border: 1px solid var(--line-strong);
  }

  .menu-open .menu-toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-open .menu-toggle span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

  .hero { padding: calc(var(--header-h) + 44px) 0 var(--space-5); }
  .hero-layout { gap: var(--space-5); }
  .hero-actions .button { width: 100%; }

  .visual-frame { padding: var(--space-2); }
  .visual-tags { grid-template-columns: repeat(2, 1fr); }

  .section-heading { grid-template-columns: 1fr; gap: var(--space-2); }
  .section-heading .kicker { grid-column: auto; }
  .section-heading h2,
  .hero h1 { max-width: none; }

  .service-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 0; }
  .service-card h3 { padding-top: var(--space-4); }

  .process-item { grid-template-columns: 48px 1fr; gap: var(--space-2); }

  .case-board { grid-template-columns: 1fr; }
  .case-panel { border-right: 0; min-height: 220px; }
  .case-panel-main { min-height: 360px; }

  .impact-grid { grid-template-columns: 1fr; }
  .impact-card { min-height: 0; }
  .impact-card h3 { padding-top: var(--space-4); }

  .field-row { grid-template-columns: 1fr; gap: 0; }
  .brief-form { padding: var(--space-3); }
  .form-footer { align-items: stretch; flex-direction: column-reverse; }
  .form-footer .button { width: 100%; }

  .footer-cta-row { align-items: flex-start; flex-direction: column; gap: var(--space-3); }
  .footer-main { grid-template-columns: 1fr; gap: var(--space-5); padding: var(--space-5) 0; }
  .footer-socials { grid-column: auto; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@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;
  }
  .reveal { opacity: 1; transform: none; filter: none; }
  /* Le bandeau reste lisible et immobile au lieu de sauter à mi-course. */
  .ticker-track { animation: none; }
  /* La comète et la jauge sont purement décoratives : on les retire. */
  .chart-pulse { animation: none; opacity: 0; }
  .accent-step-5,
  .accent-step-6 { display: none; }
}