/* Origin - feuille de style générée par tools/build.mjs.
   Ne pas modifier ce fichier : éditer src/styles/ puis relancer le build. */

/* =============================================================
   ORIGIN - Design tokens
   -------------------------------------------------------------
   Point d'entree unique de la charte graphique.
   Pour re-charter le site plus tard, seules les 3 couleurs de
   marque ci-dessous (--c-ink, --c-paper, --c-accent) et la pile
   typographique ont besoin d'etre modifiees.
   ============================================================= */

@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/satoshi-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/satoshi-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/satoshi-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/satoshi-900.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono-var.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/clash-display-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/clash-display-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/clash-display-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- 1. Couleurs de marque « AZUR » (teal + degrades) ----------
     Base blanc / menthe, signal teal, aplats en degrade. Le teal vif est
     CLAIR : il sert d'aplat, de bouton et de motif, jamais de texte sur
     fond clair (le texte accent utilise --c-accent-ink). */
  --c-paper: #edfffd;         /* menthe tres pale : fond de page */
  --c-accent: #13bfb3;        /* teal vif : aplats, boutons, motifs */
  --c-accent-ink: #087066;    /* teal fonce : texte / liens accent (AA sur clair) */
  --c-accent-light: #84e1d9;  /* teal clair : tuiles douces */
  --c-ink: #0d0d0d;           /* encre : texte principal */

  /* Degrades signature (aplats pleins). */
  --grad-brand: linear-gradient(118deg, #00ab9e 0%, #38a3dc 100%);
  --grad-dark: linear-gradient(160deg, #1c1c1c 0%, #000000 100%);

  /* ---------- 2. Palette derivee ---------- */
  --c-surface: #ffffff;              /* cartes : blanc pur, lift sur le menthe */
  --c-surface-sunk: #dcf7f3;         /* bande menthe soutenue (rythme) */
  --c-text: var(--c-ink);
  --c-text-soft: #4a5654;            /* texte secondaire (7.4:1) */
  --c-text-faint: #5f6b68;           /* metadonnees (4.9:1 sur bande) */
  --c-on-ink: #f2fbfa;               /* texte sur les aplats sombres */
  --c-on-ink-soft: #c2cfcc;          /* secondaire sur aplats sombres */
  --c-accent-hover: #0f9f95;         /* survol teal (reserve) */
  --c-accent-soft: rgba(19, 191, 179, 0.14);

  --c-line: rgba(13, 13, 13, 0.12);  /* filets sur clair */
  --c-line-strong: rgba(13, 13, 13, 0.22);
  --c-line-on-ink: rgba(242, 251, 250, 0.16);

  --c-danger: #c0362b;               /* erreurs de formulaire uniquement */
  --c-success: #0a7d73;

  /* ---------- 3. Typographie ---------- */
  --font-display: 'Clash Display', 'Satoshi', system-ui, sans-serif;  /* affichage a caractere */
  --font-sans: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Echelle fluide : min 360px -> max 1440px. Volontairement demesuree :
     les titres remplissent l'ecran (registre affiche / poster). */
  --t-mega: clamp(3.25rem, 0.5rem + 13vw, 13.5rem);   /* titres plein ecran */
  --t-display: clamp(3rem, 1.2rem + 7.6vw, 8.5rem);
  --t-h1: clamp(2.5rem, 1.5rem + 4.4vw, 5.5rem);
  --t-h2: clamp(1.75rem, 1.25rem + 2.2vw, 3rem);
  --t-h3: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  --t-h4: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --t-body-lg: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
  --t-body: 1rem;
  --t-small: 0.875rem;
  --t-micro: 0.75rem;

  --lh-tight: 1.03;
  --lh-snug: 1.16;
  --lh-body: 1.62;

  --ls-display: -0.035em;
  --ls-heading: -0.022em;
  --ls-label: 0.14em;

  /* ---------- 4. Espacement (base 4px) ---------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  /* Rythme vertical des sections (VISUAL_DENSITY 3 : aere) */
  --section-y: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  --section-y-lg: clamp(4.5rem, 3rem + 6vw, 8rem);

  /* ---------- 5. Grille ---------- */
  --container: 78rem;      /* 1248px */
  --container-wide: 90rem; /* 1440px */
  --container-text: 38rem; /* ~62ch pour la lecture longue */
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);

  /* ---------- 6. Formes ---------- */
  /* Systeme de rayon unique : quasi-net, editorial.
     Regle : 4px sur tout element de surface, 2px sur les micro-elements.
     Aucun element en pilule sur le site. */
  --r: 4px;
  --r-sm: 2px;

  /* ---------- 7. Ombres (teintees encre, jamais noir pur) ---------- */
  --shadow-sm: 0 1px 2px rgba(27, 19, 16, 0.06);
  --shadow-md: 0 12px 32px -12px rgba(27, 19, 16, 0.18);
  --shadow-lg: 0 32px 64px -24px rgba(27, 19, 16, 0.24);

  /* ---------- 8. Mouvement ---------- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast: 180ms;
  --d-base: 320ms;
  --d-slow: 640ms;

  /* ---------- 9. Couches z ---------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 300;
  --z-modal: 400;
}

/* =============================================================
   Mise a l'echelle sur grands ecrans
   -------------------------------------------------------------
   Tout le systeme est exprime en rem + clamp. Plutot que de
   laisser le contenu fige a 1248px au centre d'un vide lateral
   sur les ecrans 1440p / ultrawide, on augmente la taille de la
   racine : le conteneur, la typographie et les espacements
   grandissent ensemble, de facon homogene. Le conteneur est
   aussi elargi pour reduire les marges laterales.
   ============================================================= */
@media (min-width: 1600px) {
  :root { font-size: 17px; }
}
@media (min-width: 1920px) {
  :root {
    font-size: 18px;
    --container: 82rem;      /* ~1476px @18px */
    --container-wide: 94rem;
  }
}
@media (min-width: 2400px) {
  :root {
    font-size: 19px;
    --container: 90rem;      /* ~1710px @19px */
    --container-wide: 104rem;
  }
}


/* =============================================================
   ORIGIN - Reset et fondations typographiques
   ============================================================= */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem; /* compense l'en-tete colle */
}

body {
  background-color: var(--c-paper);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

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

button {
  background: none;
  border: 0;
  cursor: pointer;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

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

/* ---------- Titres ---------- */

.display,
h1,
h2,
h3,
h4 {
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-snug);
  text-wrap: balance;
}

/* Grands titres : Clash Display, du caractere. Les h3/h4 restent en
   Satoshi pour la lisibilite aux petites tailles. */
.display,
h1, .h1,
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 600;
}

.display {
  font-size: var(--t-display);
  font-weight: 700;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
}

h1,
.h1 {
  font-size: var(--t-h1);
  font-weight: 700;
  letter-spacing: var(--ls-display);
  line-height: 0.98;
}

h2,
.h2 {
  font-size: var(--t-h2);
}

h3, h4 {
  font-weight: 700;
}

h3,
.h3 {
  font-size: var(--t-h3);
}

h4,
.h4 {
  font-size: var(--t-h4);
}

/* ---------- Corps de texte ---------- */

.lead {
  font-size: var(--t-body-lg);
  line-height: 1.5;
  color: var(--c-text-soft);
  max-width: 46ch;
  text-wrap: pretty;
}

.prose {
  max-width: var(--container-text);
  color: var(--c-text-soft);
}

.prose > * + * {
  margin-top: var(--s-4);
}

.prose h2,
.prose h3 {
  color: var(--c-text);
  margin-top: var(--s-7);
  margin-bottom: calc(var(--s-4) * -1 + var(--s-4));
}

.prose strong {
  color: var(--c-text);
  font-weight: 700;
}

.prose a {
  color: var(--c-accent-ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

.text-soft {
  color: var(--c-text-soft);
}

.text-faint {
  color: var(--c-text-faint);
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* Intitule court au-dessus d'une liste ou d'une colonne.
   Contrairement a .eyebrow, il n'introduit pas une section
   entiere et n'entre donc pas dans le quota de sur-titres. */
.label {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-text-faint);
  margin-bottom: var(--s-4);
}

/* Label typographique en petites capitales.
   Usage rationne : au maximum un par groupe de trois sections. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-text-faint);
}

/* ---------- Accessibilite ---------- */

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

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

.skip-link {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  z-index: var(--z-modal);
  padding: var(--s-3) var(--s-4);
  background: var(--c-ink);
  color: var(--c-on-ink);
  border-radius: var(--r);
  transform: translateY(-200%);
  transition: transform var(--d-fast) var(--ease);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

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

/* -------------------------------------------------------------
   Barre de defilement native : volontairement discrete et neutre.
   L'element distinctif est l'indicateur circulaire (voir .scrolltop).
   ------------------------------------------------------------- */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(13, 13, 13, 0.28) transparent;
}
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(13, 13, 13, 0.2);
  border-radius: 999px;
  border: 2px solid var(--c-paper);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(13, 13, 13, 0.34);
  background-clip: padding-box;
}


/* =============================================================
   ORIGIN - Grille et mise en page
   Grille editoriale 12 colonnes, conteneur 1248px.
   Toute mise en page asymetrique se replie en colonne unique
   sous 768px (voir la requete media en fin de fichier).
   ============================================================= */

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

.container--wide {
  max-width: var(--container-wide);
}

.container--text {
  max-width: calc(var(--container-text) + var(--gutter) * 2);
}

.section {
  padding-block: var(--section-y);
  position: relative;
}

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

.section--tight {
  padding-block: clamp(3rem, 2rem + 4vw, 5rem);
}

/* Fonds de section. Le site est verrouille en mode clair :
   seules les surfaces encre servent de rupture, jamais un
   changement de theme complet. */
.section--sunk {
  background: var(--c-surface-sunk);
}

/* Bloc fort = aplat nuit (degrade gris tres sombre -> noir), texte clair. */
.section--ink {
  --c-on-ink: #f2fbfa;
  --c-on-ink-soft: #c2cfcc;
  --c-line-on-ink: rgba(242, 251, 250, 0.18);
  background: var(--grad-dark);
  color: var(--c-on-ink);
}

.section--ink .lead,
.section--ink .text-soft,
.section--ink .eyebrow,
.section--ink .tag {
  color: var(--c-on-ink-soft);
}

/* ---------- Grille 12 colonnes ---------- */

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

.grid--gapless {
  gap: 0;
}

.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-12 { grid-column: span 12; }

.start-2 { grid-column-start: 2; }
.start-6 { grid-column-start: 6; }
.start-7 { grid-column-start: 7; }
.start-8 { grid-column-start: 8; }
.start-9 { grid-column-start: 9; }

/* ---------- Piles et files ---------- */

.stack {
  display: flex;
  flex-direction: column;
}

.stack--2 { gap: var(--s-2); }
.stack--3 { gap: var(--s-3); }
.stack--4 { gap: var(--s-4); }
.stack--5 { gap: var(--s-5); }
.stack--6 { gap: var(--s-6); }
.stack--7 { gap: var(--s-7); }

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

.row--between {
  justify-content: space-between;
}

.row--end {
  justify-content: flex-end;
}

/* ---------- En-tete de section ---------- */

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  max-width: 34ch;
  margin-bottom: var(--s-8);
}

.section-head--wide {
  max-width: 52ch;
}

.section-head p {
  color: var(--c-text-soft);
  font-size: var(--t-body-lg);
  line-height: 1.5;
  max-width: 48ch;
}

/* ---------- Filets ---------- */

.rule {
  border: 0;
  border-top: 1px solid var(--c-line);
  width: 100%;
}

.section--ink .rule {
  border-color: var(--c-line-on-ink);
}

/* ---------- Repli mobile ---------- */

@media (max-width: 1023px) {
  .grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .col-2, .col-3, .col-4 { grid-column: span 3; }
  .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-12 { grid-column: span 6; }
  .start-2, .start-6, .start-7, .start-8, .start-9 { grid-column-start: auto; }
}

@media (max-width: 767px) {
  .grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-5);
  }

  .col-2, .col-3, .col-4, .col-5, .col-6,
  .col-7, .col-8, .col-9, .col-10, .col-12 {
    grid-column: 1 / -1;
  }

  .section-head {
    margin-bottom: var(--s-6);
  }
}


/* =============================================================
   ORIGIN - Composants reutilisables
   Chaque bloc est autonome : il peut etre copie dans n'importe
   quelle page sans dependance a une section particuliere.
   ============================================================= */

/* -------------------------------------------------------------
   1. Marque
   Le logotype est un mot en Satoshi 900 precede du "point
   d'origine", carre plein de 8px a l'accent de marque.
   ------------------------------------------------------------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: 1.0625rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

.brand__point {
  width: 0.5em;
  height: 0.5em;
  background: var(--c-accent);
  border-radius: var(--r-sm);
  flex: none;
  transition: transform var(--d-base) var(--ease);
}

.brand:hover .brand__point {
  transform: scale(1.5);
}

.brand--footer {
  font-size: 1.25rem;
}

/* -------------------------------------------------------------
   2. En-tete
   ------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--c-paper) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--d-base) var(--ease),
              background-color var(--d-base) var(--ease);
}

.site-header[data-stuck='true'] {
  border-bottom-color: var(--c-line);
  background: color-mix(in srgb, var(--c-paper) 94%, transparent);
}

@supports not (backdrop-filter: blur(1px)) {
  .site-header {
    background: var(--c-paper);
  }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  height: 72px;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
}

.nav__link {
  position: relative;
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--c-text-soft);
  padding-block: var(--s-2);
  transition: color var(--d-fast) var(--ease);
  white-space: nowrap;
}

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

.nav__link:hover {
  color: var(--c-text);
}

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

.nav__link[aria-current='page'] {
  color: var(--c-text);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

/* L'action reprise dans le panneau mobile reste masquée tant que
   le bouton d'en-tête est visible. */
.nav .btn {
  display: none;
}

/* Accès à l'espace interne. Présent uniquement dans la génération
   locale. Volontairement discret : il ne doit pas concurrencer
   l'action principale du site. */
/* Connexion : meme gabarit que « Prendre rendez-vous » (paire unifiee),
   en version contour. */
.header__login {
  padding: 0.62rem 1.35rem;
  font-weight: 700;
  color: var(--c-text);
}

.header__login:hover {
  color: var(--c-accent-ink);
  border-color: var(--c-accent);
}

/* Sa reprise dans le panneau mobile n'apparaît que sur petit écran. */
.nav__link--login {
  display: none;
}

/* Bouton hamburger, visible sous 1024px uniquement */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  margin-right: -0.5rem;
}

.nav-toggle__bars {
  position: relative;
  width: 20px;
  height: 12px;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--c-text);
  transition: transform var(--d-base) var(--ease);
}

.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars::after { bottom: 0; }

[data-nav-open='true'] .nav-toggle__bars::before {
  transform: translateY(5.25px) rotate(45deg);
}

[data-nav-open='true'] .nav-toggle__bars::after {
  transform: translateY(-5.25px) rotate(-45deg);
}

/* -------------------------------------------------------------
   3. Boutons
   Un seul intitule par intention sur tout le site :
   l'action principale est toujours "Prendre rendez-vous".
   ------------------------------------------------------------- */

.btn {
  --btn-bg: var(--c-accent);
  --btn-fg: var(--c-ink);
  --btn-border: var(--c-accent);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.875rem 1.5rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-border);
  border-radius: var(--r);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--d-fast) var(--ease),
              background-color var(--d-base) var(--ease),
              border-color var(--d-base) var(--ease),
              color var(--d-base) var(--ease),
              box-shadow var(--d-base) var(--ease);
}

/* Survol : teal un cran plus profond + leger soulevement.
   Pas de degrade, pas de glow, pas d'inversion noire. */
.btn:hover {
  --btn-bg: var(--c-accent-hover);
  --btn-border: var(--c-accent-hover);
  transform: translateY(-2px);
  box-shadow: none;
}

.btn:active {
  transform: translateY(1px);
}

.btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--c-text);
  --btn-border: var(--c-line-strong);
}

.btn--secondary:hover {
  --btn-bg: transparent;
  --btn-fg: var(--c-accent-ink);
  --btn-border: var(--c-accent);
  box-shadow: none;
}

/* Bouton pose sur un aplat orange : blanc a froid, passe au sombre au survol
   (contraste garanti, il ne se fond pas dans l'orange). */
.btn--on-ink {
  --btn-bg: #ffffff;
  --btn-fg: var(--c-ink);
  --btn-border: #ffffff;
}

.btn--on-ink:hover {
  --btn-bg: var(--c-ink);
  --btn-fg: #ffffff;
  --btn-border: var(--c-ink);
}

.btn--ghost-on-ink {
  --btn-bg: transparent;
  --btn-fg: var(--c-on-ink);
  --btn-border: var(--c-line-on-ink);
}

.btn--ghost-on-ink:hover {
  --btn-bg: transparent;
  --btn-fg: var(--c-on-ink);
  --btn-border: var(--c-on-ink);
  box-shadow: none;
}

.btn--lg {
  padding: 1.0625rem 1.875rem;
  font-size: var(--t-body);
}

.btn--block {
  width: 100%;
}

.btn__arrow {
  transition: transform var(--d-base) var(--ease);
}

.btn:hover .btn__arrow {
  transform: translateX(3px);
}

/* Lien flechee, alternative legere au bouton */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--c-text);
  transition: color var(--d-fast) var(--ease), gap var(--d-base) var(--ease);
}

.link-arrow:hover {
  color: var(--c-accent-ink);
  gap: 0.85em;
}

/* -------------------------------------------------------------
   4. Icones
   Jeu d'icones inline minimal, trace 1.5px, herite currentColor.
   ------------------------------------------------------------- */

.icon {
  width: 1em;
  height: 1em;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--lg {
  width: 1.5rem;
  height: 1.5rem;
}

/* -------------------------------------------------------------
   5. Cartes
   ------------------------------------------------------------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  padding: var(--s-5);
  transition: border-color var(--d-base) var(--ease),
              transform var(--d-base) var(--ease),
              box-shadow var(--d-base) var(--ease);
}

.card:hover {
  border-color: var(--c-line-strong);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* Carte service : ligne d'accent qui se remplit au survol */
.card-service {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6) 0 var(--s-6) var(--s-5);
  border-left: 1px solid var(--c-line);
  transition: border-color var(--d-base) var(--ease);
}

.card-service::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0;
  width: 2px;
  height: 100%;
  background: var(--c-accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--d-slow) var(--ease);
}

.card-service:hover::before {
  transform: scaleY(1);
}

.card-service__title {
  font-size: var(--t-h4);
  font-weight: 700;
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
}

.card-service__index {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: var(--c-text-faint);
}

.card-service p {
  color: var(--c-text-soft);
  font-size: var(--t-small);
  max-width: 42ch;
}

.card-service__more {
  margin-top: auto;
  padding-top: var(--s-4);
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--c-accent-ink);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--d-base) var(--ease), transform var(--d-base) var(--ease);
}

.card-service:hover .card-service__more,
.card-service:focus-within .card-service__more {
  opacity: 1;
  transform: translateY(0);
}

/* Toute la carte est cliquable via un lien en superposition */
.stretch-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Carte projet */
.card-project {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.card-project__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--c-surface-sunk);
  aspect-ratio: 4 / 3;
}

.card-project__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--d-slow) var(--ease), filter var(--d-slow) var(--ease);
}

.card-project:hover .card-project__media img {
  transform: scale(1.04);
}

.card-project__title {
  font-size: var(--t-h3);
  font-weight: 700;
}

.card-project__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* Carte article */
.card-post {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-block: var(--s-5);
  border-top: 1px solid var(--c-line);
}

/* -------------------------------------------------------------
   6. Etiquettes
   ------------------------------------------------------------- */

.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: var(--c-text-soft);
  white-space: nowrap;
}

.section--ink .tag {
  border-color: var(--c-line-on-ink);
  color: var(--c-on-ink-soft);
}

/* -------------------------------------------------------------
   7. Chiffres cles
   ------------------------------------------------------------- */

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.stat__value {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat__label {
  font-size: var(--t-small);
  color: var(--c-text-soft);
  max-width: 24ch;
}

/* -------------------------------------------------------------
   8. Accordeon (FAQ, etapes detaillees)
   ------------------------------------------------------------- */

.accordion {
  border-top: 1px solid var(--c-line);
}

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

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  width: 100%;
  padding: var(--s-5) 0;
  text-align: left;
  font-size: var(--t-h4);
  font-weight: 700;
  letter-spacing: var(--ls-heading);
  transition: color var(--d-fast) var(--ease);
}

.accordion__trigger:hover {
  color: var(--c-accent-ink);
}

.accordion__sign {
  position: relative;
  width: 14px;
  height: 14px;
  flex: none;
}

.accordion__sign::before,
.accordion__sign::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--d-base) var(--ease);
}

.accordion__sign::after {
  transform: rotate(90deg);
}

.accordion__trigger[aria-expanded='true'] .accordion__sign::after {
  transform: rotate(0deg);
}

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--d-base) var(--ease-inout);
}

.accordion__panel[data-open='true'] {
  grid-template-rows: 1fr;
}

.accordion__panel > div {
  overflow: hidden;
}

.accordion__panel p {
  color: var(--c-text-soft);
  max-width: 62ch;
  padding-bottom: var(--s-5);
}

/* -------------------------------------------------------------
   9. Formulaire
   Libelle au-dessus, aide facultative, erreur en dessous.
   ------------------------------------------------------------- */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.field__label {
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--c-text);
}

.field__req {
  color: var(--c-accent-ink);
}

.field__hint {
  font-size: var(--t-micro);
  color: var(--c-text-faint);
}

.field__control {
  width: 100%;
  padding: 0.8125rem 1rem;
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r);
  transition: border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}

.field__control::placeholder {
  color: var(--c-text-faint);
}

.field__control:hover {
  border-color: var(--c-text-faint);
}

.field__control:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
}

textarea.field__control {
  min-height: 8.5rem;
  resize: vertical;
}

select.field__control {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--c-text-soft) 50%),
                    linear-gradient(135deg, var(--c-text-soft) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.75rem;
}

/* Case à cocher : reprend le jeton d'accent, sans le cadre des
   champs de saisie. */
.field__control[type='checkbox'] {
  width: 1rem;
  height: 1rem;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  accent-color: var(--c-accent);
  flex: none;
  margin-top: 0.25rem;
}

.field__control[type='checkbox']:hover {
  border: 0;
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--t-small);
  color: var(--c-text-soft);
  cursor: pointer;
  max-width: 60ch;
}

.field__error {
  font-size: var(--t-micro);
  color: var(--c-danger);
  min-height: 1rem;
}

.field[data-invalid='true'] .field__control {
  border-color: var(--c-danger);
}

/* Groupe de choix (budget, type de projet) */
.choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.choice {
  position: relative;
}

.choice input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.choice span {
  display: block;
  padding: 0.5rem 0.9375rem;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r);
  font-size: var(--t-small);
  color: var(--c-text-soft);
  transition: all var(--d-fast) var(--ease);
}

.choice input:checked + span {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-on-ink);
}

.choice input:focus-visible + span {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* Etats du formulaire */
.form__status {
  display: none;
  padding: var(--s-4);
  border-radius: var(--r);
  font-size: var(--t-small);
}

.form__status[data-state='error'] {
  display: block;
  background: rgba(179, 38, 30, 0.08);
  color: var(--c-danger);
}

.form__status[data-state='success'] {
  display: block;
  background: rgba(28, 107, 66, 0.1);
  color: var(--c-success);
}

.btn[data-loading='true'] {
  pointer-events: none;
  opacity: 0.7;
}

/* -------------------------------------------------------------
   10. Etat vide
   ------------------------------------------------------------- */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-8) var(--s-6);
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--r);
  background: var(--c-surface);
}

.empty-state h3 {
  font-size: var(--t-h4);
}

.empty-state p {
  color: var(--c-text-soft);
  max-width: 52ch;
}

/* -------------------------------------------------------------
   11. Pied de page
   ------------------------------------------------------------- */

.site-footer {
  background: var(--c-ink);
  color: var(--c-on-ink);
  padding-block: var(--s-9) var(--s-6);
}

.site-footer a {
  color: var(--c-on-ink-soft);
  transition: color var(--d-fast) var(--ease);
}

.site-footer a:hover {
  color: var(--c-on-ink);
}

.footer__title {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-on-ink-soft);
  margin-bottom: var(--s-4);
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  font-size: var(--t-small);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line-on-ink);
  font-size: var(--t-micro);
  color: var(--c-on-ink-soft);
}

/* -------------------------------------------------------------
   12. Fil d'Ariane
   ------------------------------------------------------------- */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-micro);
  color: var(--c-text-faint);
  font-family: var(--font-mono);
}

.breadcrumb a:hover {
  color: var(--c-text);
}

/* -------------------------------------------------------------
   13. Repli mobile des composants
   ------------------------------------------------------------- */

@media (max-width: 1023px) {
  .nav-toggle {
    display: inline-flex;
  }

  /* Specificite volontairement relevee (.header__actions ...) : .cta-group,
     defini plus loin dans 07-experience.css (donc plus bas dans la cascade),
     remet sinon un display: inline-flex a specificite egale et ferait
     reapparaitre le CTA sur mobile. */
  .header__actions .header__cta-desktop,
  .header__actions .header__login {
    display: none;
  }

  .nav__link--login {
    display: block;
  }

  .nav {
    position: fixed;
    inset: 72px 0 0 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: var(--s-5) var(--gutter) var(--s-8);
    background: var(--c-paper);
    border-top: 1px solid var(--c-line);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--d-base) var(--ease),
                transform var(--d-base) var(--ease),
                visibility var(--d-base);
    overflow-y: auto;
  }

  [data-nav-open='true'] .nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav__link {
    font-size: var(--t-h3);
    font-weight: 700;
    color: var(--c-text);
    padding-block: var(--s-4);
    border-bottom: 1px solid var(--c-line);
    letter-spacing: var(--ls-heading);
  }

  .nav__link::after {
    display: none;
  }

  .nav .btn {
    display: inline-flex;
    margin-top: var(--s-6);
    width: 100%;
    padding-block: 1.0625rem;
  }
}

@media (max-width: 767px) {
  .form__row {
    grid-template-columns: 1fr;
  }
}


/* =============================================================
   ORIGIN - Sections de page
   Chaque famille de mise en page n'apparait qu'une fois par page
   afin d'eviter la repetition de rythme.
   ============================================================= */

/* -------------------------------------------------------------
   1. Hero - split asymetrique 7/5
   Contrainte : tient dans le premier ecran, titre sur 2 lignes
   maximum, sous-titre de 20 mots maximum.
   ------------------------------------------------------------- */

.hero {
  padding-top: clamp(3rem, 1.5rem + 5vw, 6rem);
  padding-bottom: var(--section-y);
  overflow: hidden;
}

.hero__grid {
  align-items: center;
  row-gap: var(--s-7);
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

/* L'échelle du titre est calée sur la largeur de la colonne :
   deux lignes au maximum sur grand écran, jamais plus. */
.hero__title {
  font-size: clamp(2.25rem, 1.5rem + 2.9vw, 3.75rem);
  font-weight: 900;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  max-width: 20ch;
}

.hero__title em {
  font-style: normal;
  color: var(--c-accent-ink);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-2);
}

.hero__media {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--c-surface-sunk);
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 767px) {
  .hero__media {
    aspect-ratio: 3 / 2;
  }
}

/* -------------------------------------------------------------
   2. Bande defilante
   Un seul bandeau de ce type par page.
   ------------------------------------------------------------- */

.marquee {
  --marquee-duration: 42s;
  position: relative;
  display: flex;
  overflow: hidden;
  padding-block: var(--s-4);
  border-block: 1px solid var(--c-line);
  background: var(--c-surface-sunk);
  user-select: none;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.marquee__track {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--s-6);
  padding-right: var(--s-6);
  animation: marquee-slide var(--marquee-duration) linear infinite;
}

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: var(--c-text-soft);
  white-space: nowrap;
}

.marquee__item::before {
  content: '';
  width: 4px;
  height: 4px;
  background: var(--c-accent);
  border-radius: var(--r-sm);
}

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

/* -------------------------------------------------------------
   3. Piliers - colonnes separees par des filets verticaux
   ------------------------------------------------------------- */

.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--c-line);
}

.pillar {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-5) 0 0;
  border-right: 1px solid var(--c-line);
}

.pillar:last-child {
  border-right: 0;
  padding-right: 0;
}

.pillar:not(:first-child) {
  padding-left: var(--s-5);
}

.pillar__icon {
  color: var(--c-accent-ink);
  margin-bottom: var(--s-2);
}

.pillar h3 {
  font-size: var(--t-h4);
}

.pillar p {
  color: var(--c-text-soft);
  font-size: var(--t-small);
}

@media (max-width: 767px) {
  .pillars {
    grid-template-columns: 1fr;
  }

  .pillar {
    border-right: 0;
    border-bottom: 1px solid var(--c-line);
    padding: var(--s-5) 0;
  }

  .pillar:not(:first-child) {
    padding-left: 0;
  }

  .pillar:last-child {
    border-bottom: 0;
  }
}

/* -------------------------------------------------------------
   4. Poles de services
   ------------------------------------------------------------- */

.poles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-8) var(--s-7);
}

.pole__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--c-line-strong);
  margin-bottom: var(--s-2);
}

.pole__num {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: var(--c-accent-ink);
}

.pole__title {
  font-size: var(--t-h3);
}

.pole__list {
  display: flex;
  flex-direction: column;
}

.pole__item {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--c-line);
  transition: padding-left var(--d-base) var(--ease), color var(--d-base) var(--ease);
}

a.pole__item:hover {
  padding-left: var(--s-3);
  color: var(--c-accent-ink);
}

.pole__item strong {
  font-size: var(--t-body);
  font-weight: 700;
}

.pole__item span {
  font-size: var(--t-small);
  color: var(--c-text-faint);
  text-align: right;
  max-width: 22ch;
}

a.pole__item:hover span {
  color: inherit;
}

@media (max-width: 767px) {
  .poles {
    grid-template-columns: 1fr;
    gap: var(--s-7);
  }

  .pole__item span {
    display: none;
  }
}

/* -------------------------------------------------------------
   5. Realisations - bento a nombre de cellules exact
   ------------------------------------------------------------- */

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

.work-grid > *:nth-child(1) {
  grid-column: span 12;
}

.work-grid > *:nth-child(1) .card-project__media {
  aspect-ratio: 16 / 9;
}

.work-grid > *:nth-child(2),
.work-grid > *:nth-child(3) {
  grid-column: span 6;
}

/* Grille du portfolio complet : rythme 6/6 puis 4/4/4 */
.work-grid--index > * {
  grid-column: span 6;
}

.work-grid--index > *:nth-child(n + 3) {
  grid-column: span 4;
}

.work-grid--index > *:nth-child(n + 3) .card-project__media {
  aspect-ratio: 1 / 1;
}

@media (max-width: 1023px) {
  .work-grid > *,
  .work-grid--index > *,
  .work-grid--index > *:nth-child(n + 3) {
    grid-column: span 6;
  }
}

@media (max-width: 767px) {
  .work-grid > *,
  .work-grid--index > *,
  .work-grid--index > *:nth-child(n + 3) {
    grid-column: 1 / -1;
  }

  .work-grid > *:nth-child(1) .card-project__media,
  .work-grid--index > *:nth-child(n + 3) .card-project__media {
    aspect-ratio: 4 / 3;
  }
}

/* -------------------------------------------------------------
   6. Processus - colonne collee a gauche, etapes a droite
   Justification du mouvement : la colonne fixe garde le contexte
   pendant que l'utilisateur parcourt les etapes.
   ------------------------------------------------------------- */

.process {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--gutter);
}

.process__aside {
  position: sticky;
  top: 8rem;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.process__steps {
  display: flex;
  flex-direction: column;
}

.step {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--s-4);
  padding: var(--s-6) 0;
  border-top: 1px solid var(--c-line);
}

/* Sur fond encre, le filet passe sur la palette claire. */
.section--ink .step {
  border-color: var(--c-line-on-ink);
}

.step:first-child {
  border-top: 0;
  padding-top: 0;
}

.step__num {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: var(--c-accent-ink);
  padding-top: 0.35rem;
}

.section--ink .step__num {
  color: #ffffff;
}

.step h3 {
  font-size: var(--t-h3);
  margin-bottom: var(--s-3);
}

.step p {
  color: var(--c-text-soft);
  max-width: 58ch;
}

.section--ink .step p {
  color: var(--c-on-ink-soft);
}

.step__meta {
  margin-top: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: var(--c-text-faint);
}

.section--ink .step__meta {
  color: var(--c-on-ink-soft);
}

@media (max-width: 1023px) {
  .process {
    grid-template-columns: 1fr;
    gap: var(--s-7);
  }

  .process__aside {
    position: static;
  }
}

@media (max-width: 767px) {
  .step {
    grid-template-columns: 1fr;
    gap: var(--s-2);
  }
}

/* -------------------------------------------------------------
   7. Bande d'engagements
   ------------------------------------------------------------- */

.commitments {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-6) var(--gutter);
}

.commitment {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-4);
}

/* Cercle statistique : anneau de progression + valeur au centre. */
.stat {
  width: clamp(7rem, 5rem + 6vw, 9.5rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.stat > * { grid-area: 1 / 1; }
.stat__svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.stat__bg { fill: none; stroke: var(--c-line-strong); stroke-width: 7; }
.stat__fg {
  fill: none;
  stroke: var(--c-accent);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.5s var(--ease);
}
.commitment.is-drawn .stat__fg { stroke-dashoffset: calc(100 - var(--ring, 0)); }
.stat__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h3);
  letter-spacing: -0.02em;
  color: var(--c-ink);
}
.stat__label {
  margin: 0;
  font-size: var(--t-small);
  color: var(--c-text-soft);
  max-width: 24ch;
}

@media (max-width: 1023px) {
  .commitments {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 519px) {
  .commitments {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------
   8. Bande d'appel a l'action
   ------------------------------------------------------------- */

.cta-band {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s-7) var(--gutter);
  align-items: end;
}

.cta-band__title {
  font-size: var(--t-h2);
  max-width: 16ch;
}

.cta-band__side {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  align-items: flex-start;
}

@media (max-width: 767px) {
  .cta-band {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------
   9. En-tete de page interieure
   ------------------------------------------------------------- */

.page-header {
  padding-top: clamp(3rem, 2rem + 4vw, 5.5rem);
  padding-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  border-bottom: 1px solid var(--c-line);
}

.page-header__title {
  font-size: var(--t-h1);
  max-width: 18ch;
  margin-top: var(--s-5);
}

.page-header__lead {
  margin-top: var(--s-5);
  max-width: 52ch;
  font-size: var(--t-body-lg);
  color: var(--c-text-soft);
  line-height: 1.5;
}

/* -------------------------------------------------------------
   10. Etude de cas
   ------------------------------------------------------------- */

.case-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-5) var(--gutter);
  padding-block: var(--s-6);
  border-block: 1px solid var(--c-line);
}

.case-fact dt {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-text-faint);
  margin-bottom: var(--s-2);
}

.case-fact dd {
  margin: 0;
  font-size: var(--t-body);
  font-weight: 500;
}

.case-media {
  border-radius: var(--r);
  overflow: hidden;
  background: var(--c-surface-sunk);
}

@media (max-width: 767px) {
  .case-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* -------------------------------------------------------------
   11. Article
   ------------------------------------------------------------- */

.article-body {
  max-width: 40rem;
  font-size: 1.0625rem;
}

.article-body > * + * {
  margin-top: var(--s-5);
}

.article-body h2 {
  font-size: var(--t-h3);
  margin-top: var(--s-7);
}

.article-body ul {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-left: var(--s-5);
}

.article-body li {
  position: relative;
  color: var(--c-text-soft);
}

.article-body li::before {
  content: '';
  position: absolute;
  left: calc(var(--s-5) * -1);
  top: 0.7em;
  width: 5px;
  height: 1px;
  background: var(--c-accent);
}

/* -------------------------------------------------------------
   12. Page 404
   ------------------------------------------------------------- */

.notfound {
  min-height: calc(100dvh - 72px);
  display: flex;
  align-items: center;
  padding-block: var(--s-9);
}

.notfound__code {
  font-family: var(--font-mono);
  font-size: clamp(4rem, 2rem + 12vw, 11rem);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--c-line-strong);
}

/* -------------------------------------------------------------
   13. Filtres du portfolio
   ------------------------------------------------------------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-7);
}

.filter {
  padding: 0.4375rem 0.9375rem;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r);
  font-size: var(--t-small);
  color: var(--c-text-soft);
  transition: all var(--d-fast) var(--ease);
}

.filter:hover {
  border-color: var(--c-text-faint);
  color: var(--c-text);
}

.filter[aria-pressed='true'] {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-on-ink);
}


/* =============================================================
   ORIGIN - Mouvement
   MOTION_INTENSITY 6 : reveal au defilement, transitions de page
   natives, micro-interactions au pointeur.
   Toute animation est justifiee par une intention :
   - reveal      : hierarchiser l'ordre de lecture
   - transition  : conserver la continuite entre deux pages
   - pointeur    : accuser reception d'une action
   Seules les proprietes transform et opacity sont animees.
   ============================================================= */

/* -------------------------------------------------------------
   1. Reveal au defilement
   Pilote par IntersectionObserver (assets/js/origin.js).
   L'etat initial n'est applique que si le script est actif, afin
   que le contenu reste visible sans JavaScript.
   ------------------------------------------------------------- */

html[data-js='true'] [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--d-slow) var(--ease),
              transform var(--d-slow) var(--ease);
  transition-delay: calc(var(--reveal-index, 0) * 70ms);
}

html[data-js='true'] [data-reveal='fade'] {
  transform: none;
}

html[data-js='true'] [data-reveal][data-revealed='true'] {
  opacity: 1;
  transform: none;
}

/* Rideau typographique : le titre du hero monte derriere un masque */
html[data-js='true'] .reveal-mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
}

html[data-js='true'] .reveal-mask > span {
  display: block;
  transform: translateY(105%);
  transition: transform 900ms var(--ease);
  transition-delay: calc(var(--reveal-index, 0) * 90ms);
}

html[data-js='true'] .reveal-mask[data-revealed='true'] > span {
  transform: translateY(0);
}

/* -------------------------------------------------------------
   2. Transitions de page (View Transitions API)
   Degradation naturelle : les navigateurs sans support affichent
   une navigation classique, sans effet de bord.
   ------------------------------------------------------------- */

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: vt-out 220ms var(--ease-inout) both;
}

::view-transition-new(root) {
  animation: vt-in 380ms var(--ease) both;
}

@keyframes vt-out {
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@keyframes vt-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

/* L'en-tete et le pied de page ne participent pas au fondu :
   ils restent stables d'une page a l'autre. */
.site-header {
  view-transition-name: site-header;
}

.site-footer {
  view-transition-name: site-footer;
}

/* -------------------------------------------------------------
   3. Interactions au pointeur
   Actif uniquement sur pointeur fin (souris), jamais au toucher.
   ------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  [data-magnetic] {
    transition: transform var(--d-base) var(--ease);
    will-change: transform;
  }
}

/* -------------------------------------------------------------
   4. Compteur de chiffres
   ------------------------------------------------------------- */

[data-count] {
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------
   5. Respect de prefers-reduced-motion
   Tout se fige : reveals affiches, bandeaux arretes, transitions
   de page desactivees.
   ------------------------------------------------------------- */

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

  /* NOTE : le site est volontairement construit autour du mouvement
     (logo qui tourne, entrees, bandeaux, illustration animee). On ne
     coupe donc PAS les animations de marque, meme en reduced-motion.
     On garde seulement un filet de securite pour que rien ne reste
     masque si un reveal ne se declenche pas, et un scroll non anime. */
  html[data-js='true'] [data-reveal],
  html[data-js='true'] .reveal-mask > span {
    opacity: 1;
    transform: none;
  }

  @view-transition {
    navigation: none;
  }
}


/* =============================================================
   CORE - Langue visuelle « MANIFESTE AZUR »
   -------------------------------------------------------------
   Le site est une succession d'AFFICHES pleine largeur qui
   alternent menthe clair, degrade teal->bleu et nuit. Typographie
   demesuree (Clash Display), motion signature.

   Regle couleur : le teal vif est un APLAT (jamais du texte sur
   clair). Le texte accent utilise --c-accent-ink (teal fonce).
   VARIANCE 9 / MOTION 8 / DENSITY 3.
   ============================================================= */

/* -------------------------------------------------------------
   1. Panneaux pleine largeur
   ------------------------------------------------------------- */
.panel {
  position: relative;
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
  overflow: clip;
  /* Optimisation : une section hors ecran n'est ni mise en page ni
     peinte tant qu'on ne s'en approche pas. Gros gain sur page longue. */
  content-visibility: auto;
  contain-intrinsic-size: auto 640px;
}

.panel--full {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Aplat signature : degrade menthe -> bleu, TEXTE FONCE (le degrade
   est trop clair pour du blanc). */
.panel--brand {
  --c-text: var(--c-ink);
  --c-text-soft: var(--c-ink);
  --c-text-faint: rgba(13, 13, 13, 0.66);
  --c-line: rgba(13, 13, 13, 0.20);
  --c-line-strong: rgba(13, 13, 13, 0.42);
  background: var(--grad-brand);
  color: var(--c-ink);
}

.panel--brand .eyebrow,
.panel--brand .overline { color: rgba(13, 13, 13, 0.72); }

.panel--brand .accent,
.panel--brand .poster .accent,
.panel--brand .claim__t em { color: var(--c-ink); }

/* Nuit chaude (degrade gris tres sombre -> noir). */
.panel--ink {
  --c-text: var(--c-on-ink);
  --c-text-soft: #b7c3c0;
  --c-text-faint: #8a9793;
  --c-line: rgba(242, 251, 250, 0.16);
  --c-line-strong: rgba(242, 251, 250, 0.34);
  background: var(--grad-dark);
  color: var(--c-on-ink);
}

.panel--ink .eyebrow { color: var(--c-text-soft); }
.panel--ink .claim__t em { color: var(--c-accent); }   /* teal vif ressort sur nuit */

/* -------------------------------------------------------------
   2. Le point (motif de marque, vivant)
   ------------------------------------------------------------- */
.pt {
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  background: var(--c-accent);
  border-radius: 999px;
  vertical-align: baseline;
  transform: translateY(0.02em);
}

html[data-js='true'] .pt--live {
  animation: pt-pulse 2.6s var(--ease-inout) infinite;
}

@keyframes pt-pulse {
  0%, 100% { transform: translateY(0.02em) scale(1); opacity: 1; }
  50%      { transform: translateY(0.02em) scale(0.6); opacity: 0.7; }
}

/* -------------------------------------------------------------
   3. Marque : badge + mot-symbole
   ------------------------------------------------------------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  line-height: 1;
}

.brand__mark {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  flex: none;
}

.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--c-text);
}

.brand--footer .brand__mark { width: 2.1rem; height: 2.1rem; }
.brand--footer .brand__name { font-size: 1.6rem; }

/* -------------------------------------------------------------
   4. Hero manifeste
   ------------------------------------------------------------- */
.hero-x {
  position: relative;
  overflow: clip;
  min-height: calc(100dvh - 4rem);
  display: flex;
  align-items: center;
  padding-top: clamp(4rem, 3.5rem + 1.5vw, 5.5rem);
  padding-bottom: clamp(2rem, 1rem + 3vw, 4rem);
}

.hero-x__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(1.6rem, 1rem + 2vw, 2.75rem);
  max-width: min(36rem, 92%);
}

/* Hero en deux colonnes : discours a gauche, maquette du produit a droite.
   La colonne visuelle se replie sous le texte en dessous de 900px
   (voir la media query dediee plus bas). */
.hero-x__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.18fr);
  align-items: center;
  gap: clamp(1.5rem, 0.5rem + 3vw, 4rem);
  width: 100%;
}

.hero-x__grid .hero-x__inner { max-width: 36rem; }

.hero-x__visual {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 46rem;
}

.hero-x__shot {
  display: block;
  width: 100%;
  height: auto;
}

/* Fond du hero : carte du monde pointillee animee, poussee a droite,
   fondue a gauche pour laisser le texte respirer. */
.hero-x__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: clip;
  -webkit-mask-image: linear-gradient(90deg, transparent 6%, #000 46%);
  mask-image: linear-gradient(90deg, transparent 6%, #000 46%);
}

/* Carte STATIQUE (rasterisee une fois). Le dynamisme vient d'un
   basculement 3D qui reagit a la souris : uniquement des transformes
   (composites par le GPU), donc aucun repaint, tres fluide. */
.worldmap {
  width: clamp(32rem, 58vw, 50rem);
  max-width: none;
  height: auto;
  opacity: 0.6;
  transform:
    translateX(14%)
    perspective(1400px)
    rotateX(var(--ry, 0deg))
    rotateY(var(--rx, 0deg))
    scale(var(--ms, 1));
  transition: transform 0.5s var(--ease),
              filter 0.5s var(--ease),
              opacity 0.5s var(--ease);
}

.hero-x:hover .worldmap {
  opacity: 1;
  filter: saturate(1.3) brightness(1.06);
  --ms: 1.03;
}

@media (max-width: 900px) {
  .worldmap { transform: translateX(26%); opacity: 0.55; }
}

/* Motif de marque « C » dans le hero (remplace la carte). */
.heromark {
  width: clamp(24rem, 46vw, 40rem);
  height: auto;
  opacity: 0.92;
  transform: translateX(14%) perspective(1400px)
             rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
  transition: transform 0.5s var(--ease), opacity 0.4s var(--ease);
}
.heromark__ring { fill: none; stroke: var(--c-accent); stroke-width: 1.5; opacity: 0.22; }
.heromark__c {
  fill: none;
  stroke: var(--c-accent);
  stroke-width: 34;
  stroke-linecap: round;
  transform: rotate(45deg);
  transform-origin: 200px 200px;
}
.heromark__dot { fill: var(--c-accent); transform-origin: 200px 200px; }
html[data-js='true'] .heromark__dot { animation: mark-pulse 3s var(--ease-inout) infinite; }
@media (max-width: 900px) { .heromark { transform: translateX(24%); opacity: 0.7; } }
@media (prefers-reduced-motion: reduce) { .heromark__dot { animation: none; } }

/* -------------------------------------------------------------
   STYLE CLEAN (inspiration clef2web) : cartes douces, aere.
   ------------------------------------------------------------- */
.softgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
.softgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.softcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  color: var(--c-text);
  transition: transform var(--d-base) var(--ease),
              box-shadow var(--d-base) var(--ease),
              border-color var(--d-base) var(--ease);
}
.softcard:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--c-line-strong);
}
.softcard h3 { font-size: var(--t-h4); font-weight: 700; }
.softcard p { font-size: var(--t-small); color: var(--c-text-soft); flex: 1; }
.softcard__i { font-family: var(--font-mono); font-size: var(--t-micro); color: var(--c-accent-ink); }
.softcard__badge {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: var(--c-accent-soft);
  color: var(--c-accent-ink);
  margin-bottom: var(--s-2);
}
.softcard__badge svg { width: 22px; height: 22px; }
.softcard__badge {
  transition: background-color var(--d-base) var(--ease),
              color var(--d-base) var(--ease),
              transform var(--d-base) var(--ease);
}
.softcard:hover .softcard__badge {
  background: var(--c-accent);
  color: var(--c-ink);
  transform: rotate(-6deg) scale(1.08);
}
/* Cartes « Nos expertises » : numéro en coin + halo teal au survol. */
.softcard--service { overflow: hidden; }
.softcard--service .softcard__i {
  position: absolute;
  top: var(--s-6);
  right: var(--s-6);
  color: var(--c-text-faint);
}
.softcard--service::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(130% 90% at 100% 0%, var(--c-accent-soft), transparent 55%);
  opacity: 0;
  transition: opacity var(--d-base) var(--ease);
  pointer-events: none;
}
.softcard--service:hover::after { opacity: 1; }
.softcard--service > * { position: relative; z-index: 1; }

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

/* Engagements sur fond clair. */
.stats-light .commitment { border-top-color: var(--c-line-strong); }
.stats-light .commitment dt { color: var(--c-ink); }
.stats-light .commitment dd { color: var(--c-text-soft); }

/* Bande d'appel claire (CTA non sombre). */
.cta-clean {
  background: var(--c-surface-sunk);
  border-radius: 22px;
  padding: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--s-6) var(--gutter);
  align-items: center;
}
.cta-clean__t {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 1rem + 3vw, 3.2rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 18ch;
}
.cta-clean__t .accent { color: var(--c-accent-ink); }
@media (max-width: 767px) { .cta-clean { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------
   Indicateur de progression circulaire + retour en haut.
   Progression pilotee par scroll-timeline CSS (zero JS, composite) ;
   le clic remonte la page.
   ------------------------------------------------------------- */
.scrolltop {
  position: fixed;
  right: clamp(1rem, 0.5rem + 1vw, 1.75rem);
  bottom: clamp(1rem, 0.5rem + 1vw, 1.75rem);
  width: 50px;
  height: 50px;
  z-index: 240;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-paper) 68%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: transform var(--d-fast) var(--ease);
}
.scrolltop:hover { transform: translateY(-2px); }

.scrolltop__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.scrolltop__track { fill: none; stroke: var(--c-line); stroke-width: 3; }
.scrolltop__bar {
  fill: none;
  stroke: var(--c-accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: scrolltop-fill linear both;
  animation-timeline: scroll(root);
}
.scrolltop__arrow {
  position: relative;
  width: 15px;
  height: 15px;
  color: var(--c-accent-ink);
}

@keyframes scrolltop-fill { to { stroke-dashoffset: 0; } }
@supports not (animation-timeline: scroll()) {
  .scrolltop__bar { stroke-dashoffset: 72; }
}
@media (max-width: 600px) { .scrolltop { width: 44px; height: 44px; } }

.orbit-bg {
  width: clamp(30rem, 66vw, 62rem);
  height: auto;
  transform: translateX(24%);
}
.orbit-bg .orbit__ring { stroke: var(--c-accent); opacity: 0.22; }
.orbit-bg .orbit__dot { fill: var(--c-accent); }
.orbit-bg .orbit__dot--ink { fill: var(--c-accent-light); }
.orbit-bg .orbit__spin { transform-origin: 300px 300px; }
.orbit-bg .orbit__core { fill: var(--c-accent); opacity: 0.85; transform-origin: 300px 300px; }

@media (max-width: 767px) {
  .orbit-bg { transform: translateX(38%); opacity: 0.6; }
}

.hero-x__label {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: var(--c-text-soft);
}

/* Rotateur de mots : le descripteur change tout seul (element unique
   du hero, purement CSS, fige sous mouvement reduit). */
.rotator {
  display: inline-block;
  height: 1.5em;
  overflow: hidden;
  vertical-align: bottom;
  color: var(--c-accent-ink);
  font-weight: 500;
}

.rotator__list {
  display: flex;
  flex-direction: column;
  line-height: 1.5em;
}

html[data-js='true'] .rotator__list {
  animation: rotate-words 10s var(--ease-inout) infinite;
}

@keyframes rotate-words {
  0%, 17%   { transform: translateY(0); }
  22%, 39%  { transform: translateY(-1.5em); }
  44%, 61%  { transform: translateY(-3em); }
  66%, 83%  { transform: translateY(-4.5em); }
  88%, 100% { transform: translateY(-6em); }
}

.hero-x__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.6rem, 1rem + 6vw, 6.5rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  max-width: 16ch;
  margin: 0;
}

.hero-x__title .accent { color: var(--c-accent-ink); }

/* Fin de phrase qui change toutes les 3 s (transition composite). */
/* Ligne rotative : hauteur réservée (2 lignes) pour éviter que la
   saisie/effacement du mot ne fasse sauter la mise en page. */
.rotate { display: block; min-height: 2.1em; }
/* Curseur de saisie (effet machine a ecrire). */
.rotate--type::after {
  content: '';
  display: inline-block;
  width: 0.06em;
  height: 0.86em;
  margin-left: 0.04em;
  background: currentColor;
  vertical-align: -0.06em;
  animation: caret-blink 1s steps(1, end) infinite;
}
@keyframes caret-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* Entree du hero : animations AU CHARGEMENT (fill both).
   L'etat final est toujours visible, meme si un observateur ne se
   declenche pas : plus de risque de texte qui reste masque. */
html[data-js='true'] .hero-x__inner > * {
  animation: hero-rise 0.8s var(--ease) both;
}
html[data-js='true'] .hero-x__sub { animation-delay: 0.12s; }
html[data-js='true'] .hero-x__actions { animation-delay: 0.22s; }

html[data-js='true'] .hero-x__title {
  animation: hero-title 0.95s var(--ease) both;
}

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes hero-title {
  from { opacity: 0; transform: translateY(0.4em); clip-path: inset(-0.14em 0 100% 0); }
  to   { opacity: 1; transform: none; clip-path: inset(-0.14em 0 -0.28em 0); }
}

/* L'entree du hero (titre en reveal + montee du sous-titre et des
   actions) est volontairement conservee : c'est un effet demande
   explicitement, joue dans tous les cas. */

.hero-x__sub {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-width: 46ch;
}
.hero-x__kws {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: var(--t-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-accent-ink);
}
.hero-x__kws i {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--c-accent);
  animation: kw-pulse 2.4s ease-in-out infinite;
}
.hero-x__kws i:nth-of-type(2) { animation-delay: .5s; }
@keyframes kw-pulse { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.6); } }
.hero-x__tag {
  font-size: var(--t-h4);
  font-weight: 500;
  line-height: 1.35;
  color: var(--c-ink);
}

.hero-x__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
}

/* -------------------------------------------------------------
   HEADER CAPSULE (flottant) + marque animee en SVG
   ------------------------------------------------------------- */
.site-header {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
  padding-top: clamp(0.75rem, 0.5rem + 0.5vw, 1.25rem);
}

/* Au scroll : seule la capsule arrondie reste visible. On neutralise
   le fond/la bordure pleine largeur herites de 04-components (sinon
   une bande blanchatre apparait derriere la capsule). */
.site-header[data-stuck='true'] {
  border-bottom: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.header-cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  height: 60px;
  padding: 0 0.5rem 0 1.25rem;
  border: 0;
  border-radius: 999px;
  background: var(--c-surface);
  box-shadow: none;
}

/* Au scroll : capsule pleine, sans ombre. */
.site-header[data-stuck='true'] .header-cap {
  background: var(--c-surface);
  box-shadow: none;
}

@supports not (backdrop-filter: blur(1px)) {
  .header-cap { background: var(--c-paper); }
}

.btn--pill { border-radius: 999px; }

/* Box arrondie contenant DEUX boutons eux-memes arrondis. */
.cta-group {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem;
  border-radius: 999px;
  background: var(--c-surface-sunk);
  line-height: 1;
}
.cta-group__login {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-soft);
  transition: color var(--d-fast) var(--ease),
              background-color var(--d-fast) var(--ease);
}
.cta-group__login:hover {
  color: var(--c-accent-ink);
  background: rgba(255, 255, 255, 0.75);
}
.cta-group__main {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1.25rem;
  border-radius: 999px;
  background: var(--c-accent);
  color: var(--c-ink);
  font-size: var(--t-small);
  font-weight: 700;
  white-space: nowrap;
  transition: background-color var(--d-base) var(--ease),
              transform var(--d-fast) var(--ease);
}
.cta-group__main:hover { background: var(--c-accent-hover); transform: translateY(-1px); }

/* Marque animee : anneau ouvert (le "C") qui tourne + point qui bat. */
.mark { width: 1.85rem; height: 1.85rem; overflow: visible; flex: none; }
.mark__ring {
  fill: none;
  stroke: var(--c-accent);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 66 94;
  transform-origin: 24px 24px;
}
.mark__dot { fill: var(--c-accent); transform-origin: 24px 24px; }
/* Le logo tourne en continu sur lui-meme, plus vite au survol. */
.mark__ring { animation: mark-spin 6s linear infinite; }
.brand:hover .mark__ring { animation-duration: 1.8s; }
.brand:hover .mark__dot { animation: mark-pulse 2s var(--ease-inout) infinite; }

@keyframes mark-spin { to { transform: rotate(360deg); } }
@keyframes mark-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.55); } }

/* -------------------------------------------------------------
   VISUEL HERO : orbite animee dans un cadre degrade
   ------------------------------------------------------------- */
.hero-visual {
  position: relative;
  border-radius: 26px;
  background: var(--grad-brand);
  aspect-ratio: 1 / 1;
  max-width: 34rem;
  margin-inline: auto;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.orbit { width: 100%; height: 100%; display: block; }
.orbit__ring { fill: none; stroke: rgba(255, 255, 255, 0.32); stroke-width: 1.5; }
.orbit__spin { transform-origin: 200px 200px; }
html[data-js='true'] .orbit__spin--1 { animation: orbit-spin 16s linear infinite; }
html[data-js='true'] .orbit__spin--2 { animation: orbit-spin 11s linear infinite reverse; }
html[data-js='true'] .orbit__spin--3 { animation: orbit-spin 22s linear infinite; }
.orbit__dot { fill: #ffffff; }
.orbit__dot--ink { fill: var(--c-ink); }
.orbit__core { fill: #ffffff; transform-origin: 200px 200px; }
html[data-js='true'] .orbit__core { animation: core-pulse 3.2s var(--ease-inout) infinite; }

@keyframes orbit-spin { to { transform: rotate(360deg); } }
@keyframes core-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(0.84); opacity: 0.9; }
}

/* Repli : sous 900px le hero passe en colonne, le visuel se reduit. */
@media (max-width: 900px) {
  .hero-x__grid { grid-template-columns: 1fr; gap: clamp(2rem, 1rem + 3vw, 3rem); }
  .hero-x__grid .hero-x__inner { max-width: 100%; }
  .hero-x__visual { max-width: 34rem; justify-self: center; }
}

/* -------------------------------------------------------------
   5. Ticker des expertises (le seul marquee de la page)
   ------------------------------------------------------------- */
.ticker-band { background: var(--grad-dark); }

.ticker-band .marquee {
  background: transparent;
  border-color: var(--c-line-on-ink);
  padding-block: clamp(0.9rem, 0.6rem + 1vw, 1.5rem);
}

.ticker-band .marquee__item {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 1rem + 2vw, 2.6rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--c-on-ink);
}

.ticker-band .marquee__item::before {
  width: 8px;
  height: 8px;
  background: var(--c-accent);
}

/* Bande d'expertises : chips statiques (remplace le texte defilant).
   Aucune animation continue -> plus leger. */
.caps-band {
  background: var(--grad-dark);
  content-visibility: auto;
  contain-intrinsic-size: auto 200px;
}

.caps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: center;
  padding-block: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}

.cap-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--c-line-on-ink);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: var(--c-on-ink);
  transition: background-color var(--d-fast) var(--ease),
              border-color var(--d-fast) var(--ease),
              color var(--d-fast) var(--ease);
}
.cap-chip:hover {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-ink);
}

/* -------------------------------------------------------------
   6. Titre-affiche demesure
   ------------------------------------------------------------- */
.poster {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--t-mega);
  line-height: 0.86;
  letter-spacing: -0.04em;
  margin: 0;
  text-wrap: balance;
}

.poster--tight { max-width: 12ch; }
.poster .accent { color: var(--c-accent-ink); }

/* Enonce : une phrase forte sur un panneau. Plus compact qu'un poster,
   il ne casse pas en deux mots pour remplir l'ecran. */
.statement {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h1);
  line-height: 1.0;
  letter-spacing: -0.03em;
  max-width: 18ch;
  margin: 0;
  text-wrap: balance;
}
.statement .accent { color: var(--c-accent-ink); }
.panel--brand .statement .accent,
.panel--brand .statement { color: var(--c-ink); }

.overline {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  letter-spacing: 0.02em;
  color: var(--c-text-soft);
  max-width: 44ch;
}

/* -------------------------------------------------------------
   7. Strip horizontal des services
   ------------------------------------------------------------- */
.hstrip-wrap { position: relative; }

.hstrip {
  display: flex;
  gap: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: var(--s-2) var(--gutter) var(--s-5);
  margin-inline: calc(var(--gutter) * -1);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.hstrip::-webkit-scrollbar { display: none; }

.hcard {
  position: relative;
  flex: 0 0 min(78vw, 25rem);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-height: 22rem;
  padding: var(--s-6);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r);
  background: var(--c-surface);
  color: var(--c-ink);
  overflow: hidden;
  transition: background-color var(--d-base) var(--ease),
              color var(--d-base) var(--ease),
              transform var(--d-base) var(--ease),
              border-color var(--d-base) var(--ease);
}

.hcard:hover {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-ink);
  transform: translateY(-4px);
}

.hcard__num {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: var(--c-accent-ink);
  transition: color var(--d-base) var(--ease);
}

.hcard:hover .hcard__num { color: var(--c-ink); }

.hcard__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-top: auto;
}

.hcard p {
  font-size: var(--t-small);
  color: var(--c-text-soft);
  transition: color var(--d-base) var(--ease);
}

.hcard:hover p { color: rgba(13, 13, 13, 0.78); }

.hcard__go {
  position: absolute;
  top: var(--s-6);
  right: var(--s-6);
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity var(--d-base) var(--ease), transform var(--d-base) var(--ease);
}

.hcard:hover .hcard__go { opacity: 1; transform: none; }

.hstrip__hint {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-text-faint);
  margin-top: var(--s-3);
}

.hstrip__hint svg { width: 1.4rem; }

/* -------------------------------------------------------------
   8. Realisations sur nuit
   ------------------------------------------------------------- */
.panel--ink .card-project__title a { color: var(--c-on-ink); }
.panel--ink .card-project__media { background: #14201e; }
.panel--ink .tag { border-color: var(--c-line); color: var(--c-text-soft); }

/* Realisations en index editorial : des lignes, pas des cartes stock. */
.works { border-top: 1px solid var(--c-line-strong); }

.work-row {
  display: grid;
  grid-template-columns: 3rem 1fr auto auto;
  align-items: center;
  gap: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  padding: clamp(1.3rem, 0.9rem + 1.5vw, 2.1rem) var(--s-4) clamp(1.3rem, 0.9rem + 1.5vw, 2.1rem) 0;
  border-bottom: 1px solid var(--c-line);
  color: var(--c-text);
  transition: background-color var(--d-base) var(--ease),
              padding-left var(--d-base) var(--ease);
}

.work-row:hover { background: var(--c-accent-soft); padding-left: var(--s-4); }

.work-row__n {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: var(--c-accent-ink);
}

.work-row__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 1rem + 2.2vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

.work-row__meta {
  display: block;
  margin-top: 0.45rem;
  font-size: var(--t-small);
  color: var(--c-text-soft);
}

.work-row__tags { display: flex; gap: var(--s-2); }

.work-row__go {
  color: var(--c-accent-ink);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--d-base) var(--ease), transform var(--d-base) var(--ease);
}

.work-row:hover .work-row__go { opacity: 1; transform: none; }

@media (max-width: 767px) {
  .work-row { grid-template-columns: 2.25rem 1fr; }
  .work-row__tags,
  .work-row__go { display: none; }
}

/* -------------------------------------------------------------
   9. Colonne de manifeste (grandes phrases)
   ------------------------------------------------------------- */
.claims {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--c-line);
}

.claim {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: var(--s-5);
  align-items: baseline;
  padding: clamp(1.75rem, 1rem + 2vw, 3rem) 0;
  border-bottom: 1px solid var(--c-line);
}

.claim__n {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: var(--c-accent-ink);
}

.claim__t {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 1rem + 2.4vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.claim__t em { font-style: normal; color: var(--c-accent-ink); }

.claim p {
  grid-column: 2;
  margin-top: var(--s-3);
  color: var(--c-text-soft);
  max-width: 52ch;
}

/* « Vos besoins » (inspiration clef2web) : une carte par situation. */
.needs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
}
.need {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-top: var(--s-5);
  border-top: 2px solid var(--c-ink);
  transition: border-color var(--d-base) var(--ease);
}
.need:hover { border-color: var(--c-accent); }
.need__k {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-accent-ink);
}
.need__t {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h4);
  line-height: 1.12;
}
.need p {
  font-size: var(--t-small);
  color: var(--c-text-soft);
  flex: 1;
}
.need .link-arrow { font-size: var(--t-small); margin-top: var(--s-2); }
@media (max-width: 900px) { .needs { grid-template-columns: repeat(2, 1fr); gap: var(--s-6) var(--gutter); } }
@media (max-width: 520px) { .needs { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------
   10. Bloc d'appel final demesure
   ------------------------------------------------------------- */
.bigcta {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  align-items: flex-start;
}

.bigcta__title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--t-mega);
  line-height: 0.84;
  letter-spacing: -0.04em;
  margin: 0;
}

/* -------------------------------------------------------------
   11. Bouton demesure + bouton sur aplat clair/degrade
   ------------------------------------------------------------- */
.btn--xl {
  padding: 1.25rem 2.25rem;
  font-size: var(--t-h4);
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  border-radius: var(--r);
}

/* Sur le degrade menthe->bleu : bouton encre (fort contraste). */
.panel--brand .btn {
  --btn-bg: var(--c-ink);
  --btn-fg: #ffffff;
  --btn-border: var(--c-ink);
}
.panel--brand .btn:hover {
  --btn-bg: #ffffff;
  --btn-fg: var(--c-ink);
  --btn-border: #ffffff;
  box-shadow: none;
}

/* -------------------------------------------------------------
   12. Navigation editoriale (mono capitales)
   ------------------------------------------------------------- */
.nav__link {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Desktop : onglets en pastille teal au survol (plus de soulignement). */
@media (min-width: 1024px) {
  .nav__link {
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    transition: background-color var(--d-fast) var(--ease),
                color var(--d-fast) var(--ease);
  }
  .nav__link::after { display: none; }
  .nav__link:hover,
  .nav__link[aria-current='page'] {
    background: var(--c-accent-soft);
    color: var(--c-accent-ink);
  }
}

@media (max-width: 1023px) {
  .nav__link {
    font-family: var(--font-display);
    font-size: var(--t-h3);
    text-transform: uppercase;
    letter-spacing: -0.02em;
  }
}

/* -------------------------------------------------------------
   13. Reveals renforces
   ------------------------------------------------------------- */
html[data-js='true'] .lines > * { display: block; overflow: hidden; }
html[data-js='true'] .lines .ln {
  display: block;
  transform: translateY(110%);
  transition: transform 0.9s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
html[data-js='true'] .lines[data-revealed='true'] .ln { transform: translateY(0); }

[data-scramble] { font-variant-ligatures: none; }

/* -------------------------------------------------------------
   14. Grand pied de page affiche
   ------------------------------------------------------------- */
.footer-x__word {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.5rem, 1rem + 6vw, 6.5rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--c-on-ink);
  margin: 0;
  border-bottom: 1px solid var(--c-line-on-ink);
  padding-bottom: 0.15em;
}

.footer-x__word .pt { background: var(--c-accent); }

/* -------------------------------------------------------------
   Bande « Ils nous font confiance » : ruban de logos clients
   qui defile en continu, fondu sur les bords.
   ------------------------------------------------------------- */
.trust {
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  overflow: hidden;
}
.trust__label {
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-text-faint);
  margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}
.trust__marquee {
  display: flex;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.trust__track {
  display: flex;
  flex: none;
  align-items: center;
  gap: clamp(2.5rem, 1rem + 4vw, 6rem);
  padding-right: clamp(2.5rem, 1rem + 4vw, 6rem);
  animation: trust-scroll 34s linear infinite;
}
.trust:hover .trust__track { animation-play-state: paused; }
.trust__logo {
  display: inline-flex;
  align-items: center;
  flex: none;
}
.trust__logo img {
  height: clamp(1.9rem, 1.4rem + 1.4vw, 2.8rem);
  width: auto;
  opacity: 0.55;
  transition: opacity var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}
.trust__logo:hover img { opacity: 1; transform: translateY(-2px); }
@keyframes trust-scroll { to { transform: translateX(-100%); } }

/* -------------------------------------------------------------
   Solutions phares : 3 produits avec mini-maquette.
   ------------------------------------------------------------- */
.flagship {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
}
.flagship__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  transition: transform var(--d-base) var(--ease), border-color var(--d-base) var(--ease);
}
.flagship__card:hover {
  transform: translateY(-4px);
  border-color: var(--c-accent);
}
.flagship__card h3 { font-size: var(--t-h4); }
.flagship__card p { color: var(--c-text-soft); font-size: var(--t-small); }
.flagship__shot {
  background: transparent;
  border: 0;
  overflow: visible;
  margin: 0;
}
.flagship__shot svg { display: block; width: 100%; height: auto; }

/* -------------------------------------------------------------
   Réassurance : quatre piliers de confiance.
   ------------------------------------------------------------- */
.reassure {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
}
.reassure__item { display: flex; flex-direction: column; gap: var(--s-3); }
.reassure__item h3 { font-size: var(--t-h4); }
.reassure__item p { color: var(--c-text-soft); font-size: var(--t-small); max-width: 30ch; }
.reassure__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--r);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  color: var(--c-accent-ink);
}
.reassure__icon svg { width: 1.5rem; height: 1.5rem; }

/* -------------------------------------------------------------
   Cartes réalisations : traitement « étude de cas ».
   ------------------------------------------------------------- */
.card-project__media { position: relative; }
.card-project__badge {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 1;
  padding: 0.3rem 0.7rem;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink);
  background: var(--c-accent);
  border-radius: var(--r-sm);
}
.card-project__phare {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h4);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--c-accent-ink);
}

@media (max-width: 900px) {
  .flagship { grid-template-columns: 1fr; }
  .reassure { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .reassure { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------
   Avis clients : carrousel horizontal defilant.
   ------------------------------------------------------------- */
.reviews { overflow: hidden; }
.reviews__marquee {
  display: flex;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.reviews__marquee { animation: reviews-in .9s var(--ease) both; }
@keyframes reviews-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.reviews__track {
  display: flex;
  flex: none;
  gap: var(--gutter);
  padding-right: var(--gutter);
  animation: reviews-scroll 52s linear infinite;
}
/* Le défilement ne s'arrête PAS au survol (demande explicite). */
@keyframes reviews-scroll { to { transform: translateX(-100%); } }
.review-card {
  flex: none;
  width: min(24rem, 82vw);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin: 0;
  padding: var(--s-6);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.review-card:hover { transform: translateY(-8px) scale(1.015); border-color: var(--c-accent); }
.review-card__stars { color: var(--c-accent); letter-spacing: 0.12em; font-size: 1.05rem; }
.review-card__stars { display: inline-flex; }
.review-card:hover .review-card__stars { animation: rev-star .6s var(--ease); }
@keyframes rev-star { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.15) rotate(-4deg); } }

/* Pied de section : certification Trustpilot + boutons d'avis. */
.reviews__foot {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3.2rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--s-5) clamp(1.5rem, 1rem + 3vw, 3.5rem);
}
.tpilot {
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); border-radius: var(--r);
  background: var(--c-surface); border: 1px solid var(--c-line);
  color: var(--c-ink); text-decoration: none;
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.tpilot:hover { transform: translateY(-3px); border-color: #00b67a; }
.tpilot__brand { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.tpilot__logo { width: 20px; height: 20px; animation: tpilot-spin 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes tpilot-spin { 0%, 70%, 100% { transform: rotate(0); } 80% { transform: rotate(-18deg); } 90% { transform: rotate(18deg); } }
.tpilot__stars { display: inline-flex; gap: 3px; }
.tpilot__stars i {
  width: 22px; height: 22px; border-radius: 3px; background: #00b67a;
  display: grid; place-items: center; color: #fff; font-size: 13px; font-style: normal;
  animation: tpilot-pop 2.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .12s);
}
.tpilot__stars i:nth-child(2) { animation-delay: .12s; }
.tpilot__stars i:nth-child(3) { animation-delay: .24s; }
.tpilot__stars i:nth-child(4) { animation-delay: .36s; }
.tpilot__stars i:nth-child(5) { animation-delay: .48s; }
@keyframes tpilot-pop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.tpilot__score { font-size: var(--t-small); color: var(--c-text-soft); }
.tpilot__score b { color: var(--c-ink); }
.reviews__btns { display: inline-flex; flex-wrap: wrap; gap: var(--s-3); }
.review-card__stars-off { color: var(--c-line-strong); }
.review-card__text { color: var(--c-text); line-height: 1.55; }
.review-card__who { display: flex; flex-direction: column; margin-top: auto; }
.review-card__name { font-weight: 700; }
.review-card__role { font-size: var(--t-small); color: var(--c-text-faint); }

/* -------------------------------------------------------------
   Nos references : grille de logos de sites clients.
   ------------------------------------------------------------- */
.reflogos {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: stretch;
}
.reflogos__item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-5) var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  transition: transform var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.reflogos__item:hover { transform: translateY(-3px); border-color: var(--c-accent); }
.reflogos__item img { height: 1.9rem; width: auto; max-width: 100%; opacity: 0.7; }
.reflogos__item:hover img { opacity: 1; }

/* -------------------------------------------------------------
   Page contact : coordonnees + carte.
   ------------------------------------------------------------- */
.contact-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: stretch;
}
.contact-list { margin-top: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); }
.contact-list li { display: flex; align-items: center; gap: var(--s-4); }
.contact-list a { color: var(--c-text); }
.contact-list a:hover { color: var(--c-accent-ink); }
.contact-list__ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  flex: none;
  border-radius: var(--r);
  background: var(--c-surface-sunk);
  color: var(--c-accent-ink);
}
.contact-list__ic svg { width: 1.3rem; height: 1.3rem; }
.contact-info__map {
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--c-line);
  min-height: 24rem;
}
.contact-info__map iframe { display: block; width: 100%; height: 100%; min-height: 24rem; }

/* -------------------------------------------------------------
   Footer : icone devant chaque titre de colonne.
   ------------------------------------------------------------- */
.footer__title { display: flex; align-items: center; gap: var(--s-2); }
.footer__title-ic { display: inline-flex; color: var(--c-accent); }
.footer__title-ic svg { width: 1.05rem; height: 1.05rem; }

@media (max-width: 900px) {
  .reflogos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .contact-info { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .reflogos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -------------------------------------------------------------
   Circuit du processus : contact -> livraison, en boucle.
   Un signal parcourt le trace et allume chaque noeud a son passage.
   ------------------------------------------------------------- */
.circuit { margin-top: var(--s-6); overflow-x: auto; }
.circuit__svg { display: block; width: 100%; min-width: 680px; height: auto; overflow: visible; }
.circuit__trace { fill: none; stroke: var(--c-line-strong); stroke-width: 3; }
.circuit__stubs path { fill: none; stroke: var(--c-line-strong); stroke-width: 2.5; stroke-linecap: round; }
.circuit__stubs circle { fill: var(--c-line-strong); }
.circuit__flow {
  fill: none;
  stroke: var(--c-accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: circuit-draw 6s linear infinite;
}
@keyframes circuit-draw {
  0%  { stroke-dashoffset: 1000; }
  83% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}
.circuit__ring {
  fill: var(--c-surface);
  stroke: var(--c-accent);
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: center;
  animation: circuit-node 6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 1.25s);
}
@keyframes circuit-node {
  0%   { fill: var(--c-accent); transform: scale(1.16); }
  8%   { fill: var(--c-accent); transform: scale(1); }
  26%  { fill: var(--c-surface); transform: scale(1); }
  100% { fill: var(--c-surface); transform: scale(1); }
}
.circuit__num {
  fill: var(--c-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  text-anchor: middle;
  dominant-baseline: central;
}
.circuit__label {
  fill: var(--c-text-soft);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 19px;
  text-anchor: middle;
}
.circuit__dot {
  fill: var(--c-accent);
  filter: drop-shadow(0 0 5px rgba(19, 191, 179, 0.85));
}

/* -------------------------------------------------------------
   Circuit de course : piste + pilote qui tourne, étapes qui
   s'allument à son passage.
   ------------------------------------------------------------- */
/* Processus : timeline linéaire horizontale animée (ligne qui se
   remplit + point qui avance de gauche à droite). */
.flow { position: relative; margin-top: var(--s-7); }
.flow__rail {
  position: absolute; top: 30px; left: 10%; right: 10%; height: 3px;
  border-radius: 3px; background: var(--c-line-strong); z-index: 0;
}
.flow__fill {
  position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 3px;
  background: var(--c-accent); animation: flow-fill 7s ease-in-out infinite;
}
.flow__dot {
  position: absolute; top: 50%; left: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%; background: var(--c-accent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-accent) 22%, transparent);
  animation: flow-dot 7s ease-in-out infinite;
}
@keyframes flow-fill { 0% { width: 0; } 86%, 100% { width: 100%; } }
@keyframes flow-dot { 0% { left: 0; } 86%, 100% { left: 100%; } }
.flow__steps {
  position: relative; z-index: 1;
  display: flex; list-style: none; margin: 0; padding: 0;
}
.flow__step {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: var(--s-2); padding-inline: var(--s-2);
}
.flow__num {
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center;
  /* Vide par défaut : ne se remplit que quand l'étape est franchie. */
  background: var(--c-surface); color: var(--c-accent-ink);
  border: 3px solid var(--c-line-strong);
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-h4);
  box-shadow: 0 0 0 6px var(--c-paper);
  animation: 7s ease-in-out infinite;
}
.flow__step:nth-child(1) .flow__num { animation-name: flow-n1; }
.flow__step:nth-child(2) .flow__num { animation-name: flow-n2; }
.flow__step:nth-child(3) .flow__num { animation-name: flow-n3; }
.flow__step:nth-child(4) .flow__num { animation-name: flow-n4; }
.flow__step:nth-child(5) .flow__num { animation-name: flow-n5; }
/* Remplissage synchronisé avec l'avancée du point (comme un
   téléchargement) : chaque bulle passe pleine à son tour, tient,
   puis se vide en fin de cycle. */
@keyframes flow-n1 {
  0%          { background: var(--c-surface); color: var(--c-accent-ink); border-color: var(--c-line-strong); transform: scale(1); }
  3%          { background: var(--c-accent); color: #fff; border-color: var(--c-accent); transform: scale(1.14); }
  6%, 92%     { background: var(--c-accent); color: #fff; border-color: var(--c-accent); transform: scale(1); }
  97%, 100%   { background: var(--c-surface); color: var(--c-accent-ink); border-color: var(--c-line-strong); transform: scale(1); }
}
@keyframes flow-n2 {
  0%, 21%     { background: var(--c-surface); color: var(--c-accent-ink); border-color: var(--c-line-strong); transform: scale(1); }
  24%         { background: var(--c-accent); color: #fff; border-color: var(--c-accent); transform: scale(1.14); }
  27%, 92%    { background: var(--c-accent); color: #fff; border-color: var(--c-accent); transform: scale(1); }
  97%, 100%   { background: var(--c-surface); color: var(--c-accent-ink); border-color: var(--c-line-strong); transform: scale(1); }
}
@keyframes flow-n3 {
  0%, 43%     { background: var(--c-surface); color: var(--c-accent-ink); border-color: var(--c-line-strong); transform: scale(1); }
  46%         { background: var(--c-accent); color: #fff; border-color: var(--c-accent); transform: scale(1.14); }
  49%, 92%    { background: var(--c-accent); color: #fff; border-color: var(--c-accent); transform: scale(1); }
  97%, 100%   { background: var(--c-surface); color: var(--c-accent-ink); border-color: var(--c-line-strong); transform: scale(1); }
}
@keyframes flow-n4 {
  0%, 64%     { background: var(--c-surface); color: var(--c-accent-ink); border-color: var(--c-line-strong); transform: scale(1); }
  67%         { background: var(--c-accent); color: #fff; border-color: var(--c-accent); transform: scale(1.14); }
  70%, 92%    { background: var(--c-accent); color: #fff; border-color: var(--c-accent); transform: scale(1); }
  97%, 100%   { background: var(--c-surface); color: var(--c-accent-ink); border-color: var(--c-line-strong); transform: scale(1); }
}
@keyframes flow-n5 {
  0%, 85%     { background: var(--c-surface); color: var(--c-accent-ink); border-color: var(--c-line-strong); transform: scale(1); }
  88%         { background: var(--c-accent); color: #fff; border-color: var(--c-accent); transform: scale(1.14); }
  91%, 93%    { background: var(--c-accent); color: #fff; border-color: var(--c-accent); transform: scale(1); }
  97%, 100%   { background: var(--c-surface); color: var(--c-accent-ink); border-color: var(--c-line-strong); transform: scale(1); }
}
.flow__label { font-family: var(--font-display); font-weight: 600; font-size: var(--t-body-lg); margin-top: var(--s-2); }
.flow__desc { font-size: var(--t-small); color: var(--c-text-soft); max-width: 20ch; }
@media (max-width: 720px) {
  .flow__rail { left: 30px; right: auto; top: 30px; bottom: 30px; width: 3px; height: auto; }
  .flow__fill { inset: 0 0 auto 0; width: 100%; height: 0; animation: flow-fill-v 7s ease-in-out infinite; }
  .flow__dot { top: 0; left: 50%; animation: flow-dot-v 7s ease-in-out infinite; }
  @keyframes flow-fill-v { 0% { height: 0; } 86%, 100% { height: 100%; } }
  @keyframes flow-dot-v { 0% { top: 0; } 86%, 100% { top: 100%; } }
  .flow__steps { flex-direction: column; gap: var(--s-6); }
  .flow__step { flex-direction: row; text-align: left; gap: var(--s-4); align-items: center; }
  .flow__desc { max-width: none; }
}

/* -------------------------------------------------------------
   Notre parti pris : 2 colonnes + illustration « écosystème ».
   Téléphone (menu+QR), carte Wallet et mini-site connectés par des
   flux de données, anneaux orbitaux, halo et flottement.
   ------------------------------------------------------------- */
.parti {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}
.parti__visual { width: 100%; }
.eco__svg { display: block; width: 100%; height: auto; overflow: visible; }
.eco__glow { transform-box: fill-box; transform-origin: center; animation: eco-glow 5s ease-in-out infinite; }
.eco__ring { transform-box: fill-box; transform-origin: center; animation: eco-spin 40s linear infinite; }
.eco__ring--2 { animation-duration: 30s; animation-direction: reverse; }
.eco__ring-c { fill: none; stroke: var(--c-accent); stroke-opacity: 0.25; stroke-width: 1.5; stroke-dasharray: 2 10; }
.eco__ringdot { fill: var(--c-accent); }
.eco__link { fill: none; stroke: var(--c-accent); stroke-opacity: 0.4; stroke-width: 2; stroke-dasharray: 1 8; stroke-linecap: round; }
.eco__spark { fill: var(--c-accent); filter: drop-shadow(0 0 5px rgba(19, 191, 179, 0.9)); }
.eco__phone { transform-box: fill-box; transform-origin: center; animation: eco-float 6s ease-in-out infinite; }
.eco__card { transform-box: fill-box; transform-origin: center; }
.eco__card--wallet { animation: eco-float 5s ease-in-out infinite; animation-delay: -1.4s; }
.eco__card--browser { animation: eco-float 5.6s ease-in-out infinite; animation-delay: -3s; }
.eco__qr { transform-box: fill-box; transform-origin: center; animation: eco-pulse 3s ease-in-out infinite; }
@keyframes eco-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes eco-spin { to { transform: rotate(360deg); } }
@keyframes eco-glow { 0%, 100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.05); } }
@keyframes eco-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* Illustration « boutique locale équipée » : boutique + badges flottants. */
.shop__svg { display: block; width: 100%; height: auto; overflow: visible; }
.shop__glow { transform-box: fill-box; transform-origin: center; animation: shop-glow 6s ease-in-out infinite; }
@keyframes shop-glow { 0%, 100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }
.shop__wave { stroke: var(--c-accent); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: shop-wave 4s ease-out infinite; }
.shop__wave--2 { animation-delay: 2s; }
@keyframes shop-wave { 0% { opacity: .45; transform: scale(.68); } 100% { opacity: 0; transform: scale(1.18); } }
.shop__awning { transform-box: fill-box; transform-origin: center top; animation: shop-sway 5s ease-in-out infinite; }
@keyframes shop-sway { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-1.3deg); } }
/* Assemblage : la boutique et chaque badge se construisent bloc par
   bloc puis se retirent — boucle infinie (comme Illustration.svg). */
.shop__build { transform-box: fill-box; transform-origin: center; animation: shop-assemble 6.5s ease-in-out infinite; }
.shop__badge { transform-box: fill-box; transform-origin: center; animation: shop-assemble 6.5s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes shop-assemble {
  0%   { opacity: 0; transform: scale(.3) rotate(-6deg); }
  6%   { opacity: 1; transform: scale(1.06) rotate(1deg); }
  11%  { opacity: 1; transform: none; }
  86%  { opacity: 1; transform: none; }
  94%  { opacity: 0; transform: scale(.34) rotate(5deg); }
  100% { opacity: 0; transform: scale(.3) rotate(-6deg); }
}
.shop__star { fill: var(--c-accent); transform-box: fill-box; transform-origin: center; animation: shop-twinkle 2.2s ease-in-out infinite; animation-delay: calc(var(--s, 0) * .2s); }
@keyframes shop-twinkle { 0%, 100% { opacity: .5; transform: scale(.82); } 50% { opacity: 1; transform: scale(1.12); } }
.shop__trend { stroke-dasharray: 170; stroke-dashoffset: 170; animation: shop-draw 3.4s ease-in-out infinite; }
@keyframes shop-draw { 0% { stroke-dashoffset: 170; } 45%, 100% { stroke-dashoffset: 0; } }
.shop__spark { fill: var(--c-accent); filter: drop-shadow(0 0 5px rgba(19, 191, 179, 0.9)); }

@media (max-width: 860px) {
  .parti { grid-template-columns: 1fr; }
  .parti__visual { max-width: 26rem; margin-inline: auto; order: 2; }
}

/* -------------------------------------------------------------
   Solutions phares : mockups animés en boucle.
   ------------------------------------------------------------- */
.flagship__shot svg { display: block; width: 100%; height: auto; }
.fx-fid .fx-stamp { fill: #13bfb3; }
/* Assemblage : chaque pièce du mockup surgit à son tour, tient
   assemblée, puis se retire — boucle infinie, identique pour les 3. */
.fx-asm > * {
  transform-box: fill-box; transform-origin: center;
  opacity: 0;
  animation: fx-assemble 5s ease-in-out infinite;
}
.fx-asm > *:nth-child(1)  { animation-delay: 0s; }
.fx-asm > *:nth-child(2)  { animation-delay: .06s; }
.fx-asm > *:nth-child(3)  { animation-delay: .12s; }
.fx-asm > *:nth-child(4)  { animation-delay: .18s; }
.fx-asm > *:nth-child(5)  { animation-delay: .24s; }
.fx-asm > *:nth-child(6)  { animation-delay: .30s; }
.fx-asm > *:nth-child(7)  { animation-delay: .36s; }
.fx-asm > *:nth-child(8)  { animation-delay: .42s; }
.fx-asm > *:nth-child(9)  { animation-delay: .48s; }
.fx-asm > *:nth-child(10) { animation-delay: .54s; }
.fx-asm > *:nth-child(11) { animation-delay: .60s; }
.fx-asm > *:nth-child(12) { animation-delay: .66s; }
.fx-asm > *:nth-child(13) { animation-delay: .72s; }
.fx-asm > *:nth-child(14) { animation-delay: .78s; }
@keyframes fx-assemble {
  0%   { opacity: 0; transform: scale(.4) translateY(8px); }
  8%   { opacity: 1; transform: scale(1.05) translateY(0); }
  13%  { opacity: 1; transform: none; }
  86%  { opacity: 1; transform: none; }
  93%  { opacity: 0; transform: scale(.45) translateY(6px); }
  100% { opacity: 0; transform: scale(.4) translateY(8px); }
}

/* -------------------------------------------------------------
   L'agence : présentation + stats chiffrées.
   ------------------------------------------------------------- */
.agency {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}
.agency__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
.astat {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-6);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  transition: transform var(--d-base) var(--ease), border-color var(--d-base) var(--ease);
}
.astat:hover { transform: translateY(-4px); border-color: var(--c-accent); }
.astat__num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.6rem);
  letter-spacing: -0.03em; line-height: 1; color: var(--c-ink);
}
.astat__label { font-size: var(--t-small); color: var(--c-text-soft); }
@media (max-width: 860px) { .agency { grid-template-columns: 1fr; } }
@media (max-width: 460px) { .agency__stats { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------
   Avis clients : guillemet + avatar initiales.
   ------------------------------------------------------------- */
.review-card__top { display: flex; align-items: center; justify-content: space-between; }
.review-card__quote { font-family: var(--font-display); font-size: 3rem; line-height: 0.5; color: var(--c-accent); }
.review-card__who { flex-direction: row; align-items: center; gap: var(--s-3); }
.review-card__id { display: flex; flex-direction: column; }
.review-card__avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.7rem; height: 2.7rem; flex: none;
  border-radius: 50%;
  background: var(--c-accent); color: var(--c-ink);
  font-weight: 700; font-size: var(--t-small);
}

/* -------------------------------------------------------------
   Bandeau cookies.
   ------------------------------------------------------------- */
.cookie {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-modal);
  display: flex; align-items: center; gap: var(--s-5);
  padding: var(--s-4) clamp(1rem, 3vw, 2.5rem);
  background: color-mix(in srgb, var(--c-surface) 90%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  color: var(--c-text);
  border-top: 1px solid var(--c-line);
  box-shadow: 0 -8px 28px -18px rgba(27, 19, 16, 0.25);
  animation: cookie-in .45s var(--ease) both;
}
.cookie[hidden] { display: none; }
@keyframes cookie-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
.cookie__text { font-size: var(--t-small); line-height: 1.5; color: var(--c-text-soft); flex: 1; min-width: 0; }
.cookie__text a { color: var(--c-text); text-decoration: underline; text-underline-offset: .15em; }
.cookie__text a:hover { color: var(--c-accent-ink); }
.cookie__actions { display: flex; align-items: center; gap: var(--s-4); flex: none; }
.cookie__btn { border-radius: var(--r-sm); font-size: var(--t-small); font-weight: 600; white-space: nowrap; transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease); }
.cookie__btn--ghost { color: var(--c-text-faint); background: transparent; border: 0; padding: .4rem .2rem; }
.cookie__btn--ghost:hover { color: var(--c-text); }
.cookie__btn--accept { background: var(--c-ink); color: var(--c-on-ink); padding: .55rem 1.4rem; }
.cookie__btn--accept:hover { background: var(--c-accent); color: var(--c-ink); }
/* « En savoir plus » : bouton stylé comme un lien, ouvre le panneau. */
.cookie__link { background: none; border: 0; padding: 0; font: inherit; color: var(--c-text); text-decoration: underline; text-underline-offset: .15em; cursor: pointer; }
.cookie__link:hover { color: var(--c-accent-ink); }
@media (max-width: 600px) {
  .cookie { flex-direction: column; align-items: stretch; gap: var(--s-3); }
  .cookie__actions { justify-content: flex-end; }
}

/* Panneau de paramétrage des cookies (modale). */
.cprefs { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: var(--s-4); }
.cprefs[hidden] { display: none; }
.cprefs__backdrop { position: absolute; inset: 0; background: rgba(13, 13, 13, .5); }
.cprefs__panel {
  position: relative; width: min(31rem, 100%); max-height: 90dvh; overflow: auto;
  background: var(--c-surface); border-radius: 16px;
  padding: clamp(1.5rem, 1rem + 2vw, 2.2rem);
  box-shadow: 0 30px 60px rgba(8, 112, 102, .18);
  animation: cprefs-in .3s var(--ease) both;
}
@keyframes cprefs-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.cprefs__x { position: absolute; top: .7rem; right: 1rem; background: none; border: 0; font-size: 1.7rem; line-height: 1; color: var(--c-text-soft); cursor: pointer; }
.cprefs__x:hover { color: var(--c-ink); }
.cprefs__title { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h4); padding-right: 2rem; }
.cprefs__intro { margin-top: var(--s-2); font-size: var(--t-small); color: var(--c-text-soft); line-height: 1.5; }
.cprefs__intro a { color: var(--c-accent-ink); text-decoration: underline; text-underline-offset: .15em; }
.cprefs__row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) 0; border-top: 1px solid var(--c-line); }
.cprefs__row:first-of-type { margin-top: var(--s-4); }
.cprefs__meta h3 { font-size: var(--t-body); }
.cprefs__meta p { margin-top: 2px; font-size: var(--t-small); color: var(--c-text-soft); line-height: 1.45; }
.cprefs__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.cprefs__actions .cookie__btn--ghost { border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); padding: .55rem 1rem; color: var(--c-text); flex: 1 1 auto; }
.cprefs__actions .cookie__btn--ghost:hover { border-color: var(--c-ink); }
.cprefs__actions .cookie__btn--accept { flex: 1 1 auto; text-align: center; }

/* Interrupteur ON/OFF. */
.cswitch { position: relative; flex: none; width: 44px; height: 26px; }
.cswitch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cswitch__ui { position: absolute; inset: 0; border-radius: 999px; background: var(--c-line-strong); transition: background .2s var(--ease); }
.cswitch__ui::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s var(--ease); }
.cswitch input:checked + .cswitch__ui { background: var(--c-accent); }
.cswitch input:checked + .cswitch__ui::after { transform: translateX(18px); }
.cswitch input:disabled { cursor: default; }
.cswitch--locked .cswitch__ui { opacity: .55; }

/* -------------------------------------------------------------
   Curseur personnalisé (pointeur fin uniquement, GPU only).
   ------------------------------------------------------------- */

/* -------------------------------------------------------------
   Écran de chargement : logo Core + révélation du lettrage.
   ------------------------------------------------------------- */
.preloader {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: var(--c-paper);
  transition: opacity .6s var(--ease), visibility .6s;
}
.preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
/* Déjà vu cette session : jamais affiché (évite le loader à chaque page/onglet). */
html.intro-seen .preloader { display: none; }
.preloader__inner { display: flex; flex-direction: column; align-items: center; gap: var(--s-6); animation: pl-in .5s var(--ease) both; }
@keyframes pl-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.preloader__logo { width: min(260px, 62vw); height: auto; display: block; }
.preloader__bar { position: relative; width: min(200px, 46vw); height: 2px; border-radius: 2px; background: rgba(13, 13, 13, 0.10); overflow: hidden; }
.preloader__bar::after {
  content: ''; position: absolute; inset: 0;
  background: var(--c-accent);
  transform: translateX(-100%);
  animation: pl-bar 1.35s var(--ease) .3s forwards;
}
@keyframes pl-bar { to { transform: translateX(0); } }
html:has(.preloader:not(.is-done)) { overflow: hidden; }

/* -------------------------------------------------------------
   FAQ : layout 2 colonnes (intro sticky + questions numérotées),
   barre d'accent qui monte à l'ouverture.
   ------------------------------------------------------------- */
.faqx { display: grid; grid-template-columns: 0.85fr 1.45fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.faqx__intro { display: flex; flex-direction: column; }
@media (min-width: 861px) { .faqx__intro { position: sticky; top: 6rem; } }
.faqx__list.accordion { border-top: 0; }
.faqx__list .accordion__item {
  position: relative;
  padding-left: var(--s-5);
  border-bottom: 1px solid var(--c-line);
}
.faqx__list .accordion__item:first-child { border-top: 1px solid var(--c-line); }
.faqx__list .accordion__item::before {
  content: ''; position: absolute; left: 0; top: 18px; bottom: 18px;
  width: 2px; background: var(--c-accent);
  transform: scaleY(0); transform-origin: top;
  transition: transform var(--d-base) var(--ease);
}
.faqx__list .accordion__item:has([aria-expanded="true"])::before { transform: scaleY(1); }
.faqx__q { display: inline-flex; align-items: baseline; gap: var(--s-3); }
.faqx__num { font-family: var(--font-mono); font-size: var(--t-small); color: var(--c-text-faint); transition: color var(--d-fast) var(--ease); }
.accordion__trigger[aria-expanded="true"] .faqx__num { color: var(--c-accent-ink); }
@media (max-width: 860px) { .faqx { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------
   Carrousel de réalisations : vitrine premium, DA claire.
   ------------------------------------------------------------- */
.rcar { position: relative; }
.rcar__viewport { overflow: hidden; }
.rcar__track { display: flex; transition: transform .55s var(--ease); will-change: transform; }
.rslide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items: center;
  padding-inline: 2px;
}
.rslide__media {
  position: relative;
  display: block;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--c-surface-sunk);
}
.rslide__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.rslide__badge {
  position: absolute; top: var(--s-3); left: var(--s-3);
  padding: .3rem .7rem;
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-ink); background: var(--c-accent); border-radius: var(--r-sm);
}
.rslide__body { display: flex; flex-direction: column; gap: var(--s-3); }
.rslide__meta { display: flex; gap: var(--s-4); font-size: var(--t-micro); color: var(--c-text-faint); }
.rslide__phare { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h4); color: var(--c-accent-ink); line-height: 1.2; }
.rslide__title { font-size: var(--t-h3); }
.rslide__resume { color: var(--c-text-soft); font-size: var(--t-small); max-width: 46ch; }
.rslide__tags { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.rcar__nav { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-4); margin-top: var(--s-6); }
.rcar__count { font-family: var(--font-mono); font-size: var(--t-small); color: var(--c-text-soft); }
.rcar__count [data-carousel-index] { color: var(--c-ink); font-weight: 700; }
.rcar__btn {
  width: 3rem; height: 3rem; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--c-line-strong); border-radius: 50%;
  color: var(--c-ink);
  transition: background-color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}
.rcar__btn:hover { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-ink); transform: translateY(-2px); }
.rcar__btn .icon { width: 20px; height: 20px; }
@media (max-width: 760px) { .rslide { grid-template-columns: 1fr; } }

/* Slides « Solutions phares » (mockup animé + texte). */
.fslide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: center;
  padding-inline: 2px;
}
.fslide .flagship__shot { border: 0; }
.fslide .flagship__shot svg { filter: drop-shadow(0 22px 44px rgba(8, 112, 102, .16)); }
.fslide__body { display: flex; flex-direction: column; gap: var(--s-3); }
.fslide__body h3 { font-size: var(--t-h2); }
.fslide__body > p:not(.overline) { color: var(--c-text-soft); max-width: 42ch; }
/* Alternance : slides pairs → illustration à droite, texte à gauche. */
.fslide:nth-child(even) .flagship__shot { order: 2; }
.fslide:nth-child(even) .fslide__body { order: 1; }
@media (max-width: 760px) {
  .fslide { grid-template-columns: 1fr; }
  .fslide:nth-child(even) .flagship__shot,
  .fslide:nth-child(even) .fslide__body { order: 0; }
}

/* -------------------------------------------------------------
   Nos expertises : vignettes arrondies, hover animé, icône 3D
   animée sans fond.
   ------------------------------------------------------------- */
.vgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.vign {
  position: relative;
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-6);
  border-radius: 18px;
  background: var(--c-surface);
  color: var(--c-text);
  transition: transform var(--d-base) var(--ease);
}
.vign:hover { transform: translateY(-6px); }
.vign > * { position: relative; z-index: 1; }
.vign__ic { width: 3.2rem; height: 3.2rem; color: var(--c-accent-ink); }
.vign__ic svg { width: 100%; height: 100%; overflow: visible; }
/* Assemblage : chaque forme de l'icône surgit à son tour, tient
   assemblée, puis se retire — boucle infinie (pas de rotation). */
.vign__ic svg > * {
  transform-box: fill-box; transform-origin: center;
  animation: icon-assemble 3.8s ease-in-out infinite;
  animation-delay: calc(var(--cd, 0s) + var(--si, 0) * .11s);
}
.vign__ic svg > *:nth-child(1) { --si: 0; }
.vign__ic svg > *:nth-child(2) { --si: 1; }
.vign__ic svg > *:nth-child(3) { --si: 2; }
.vign__ic svg > *:nth-child(4) { --si: 3; }
.vign__ic svg > *:nth-child(5) { --si: 4; }
.vign__ic svg > *:nth-child(6) { --si: 5; }
.vign:hover .vign__ic svg > * { animation-duration: 2.2s; }
@keyframes icon-assemble {
  0%       { opacity: 0; transform: scale(.2) rotate(-8deg); }
  10%      { opacity: 1; transform: scale(1.12) rotate(2deg); }
  16%      { opacity: 1; transform: none; }
  82%      { opacity: 1; transform: none; }
  92%      { opacity: 0; transform: scale(.25) rotate(6deg); }
  100%     { opacity: 0; transform: scale(.2) rotate(-8deg); }
}
/* Décalage de la vague d'assemblage par vignette (cascade). */
.vgrid .vign:nth-child(2) .vign__ic { --cd: .4s; }
.vgrid .vign:nth-child(3) .vign__ic { --cd: .8s; }
.vgrid .vign:nth-child(4) .vign__ic { --cd: 1.2s; }
.vgrid .vign:nth-child(5) .vign__ic { --cd: 1.6s; }
.vgrid .vign:nth-child(6) .vign__ic { --cd: 2s; }
.vign__title { font-size: var(--t-h4); margin-top: var(--s-2); }
.vign__tag { font-size: var(--t-small); color: var(--c-text-soft); flex: 1; }
.vign__go { color: var(--c-accent-ink); margin-top: var(--s-2); }
@media (max-width: 1023px) { .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .vgrid { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------
   Engagements compacts : bande 2 colonnes, petits anneaux.
   ------------------------------------------------------------- */
/* Barres à GAUCHE, intitulé à DROITE (alterne avec L'agence). */
.engage { display: grid; grid-template-columns: 2.15fr 0.85fr; gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: center; }
.engage__stats { order: 1; }
.engage__head { order: 2; }
.engage__head h2 { margin: 0; }

/* Graphique en barres : chaque engagement se remplit au scroll. */
.bars { display: flex; flex-direction: column; gap: clamp(1.1rem, 0.8rem + 1vw, 1.7rem); }
.bar {
  opacity: 0; transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.bar.is-drawn { opacity: 1; transform: none; }
.bars .bar:nth-child(2) { transition-delay: .12s; }
.bars .bar:nth-child(3) { transition-delay: .24s; }
.bars .bar:nth-child(4) { transition-delay: .36s; }
.bar__head { display: flex; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-2); }
.bar__value {
  flex: none;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-h4); letter-spacing: -0.02em; color: var(--c-ink);
  min-width: 3.4ch;
}
.bar__label { font-size: var(--t-small); color: var(--c-text-soft); line-height: 1.35; }
.bar__track {
  position: relative;
  height: 10px; border-radius: 999px;
  background: var(--c-line-strong);
  overflow: hidden;
}
.bar__fill {
  position: absolute; inset: 0 auto 0 0;
  width: 0; border-radius: 999px; overflow: hidden;
  background: linear-gradient(90deg, var(--c-accent-ink), var(--c-accent));
  transition: width 1.4s var(--ease) .2s;
}
.bar__fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: translateX(-100%);
  animation: bar-shine 2.6s ease-in-out 1.4s infinite;
}
@keyframes bar-shine { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(220%); } }
.bar__cap {
  position: absolute; top: 50%; left: 0;
  width: 4px; height: 4px; transform: translate(-50%, -50%); opacity: 0;
  border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 45%, transparent);
  transition: left 1.4s var(--ease), opacity .4s var(--ease) 1s;
}
.bar.is-drawn .bar__fill { width: calc(var(--ring, 0) * 1%); }
.bar.is-drawn .bar__cap { left: calc(var(--ring, 0) * 1%); opacity: 1; }
@media (max-width: 860px) {
  .engage { grid-template-columns: 1fr; }
  .engage__head { order: 0; }
  .engage__stats { order: 1; }
}

/* -------------------------------------------------------------
   L'agence : graphique de croissance (SVG, dessin au scroll).
   ------------------------------------------------------------- */
.agency__chart { width: 100%; }
.chart { display: block; width: 100%; height: auto; overflow: visible; }
.chart__grid { stroke: var(--c-line); stroke-width: 1; }
.chart__area { fill: url(#chart-grad); animation: chart-area 5s ease-in-out infinite; }
@keyframes chart-area { 0% { opacity: 0; } 28% { opacity: 1; } 72% { opacity: 1; } 100% { opacity: 0; } }
.chart__line {
  fill: none; stroke: var(--c-accent); stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100;
  animation: chart-draw 5s ease-in-out infinite;
}
@keyframes chart-draw { 0% { stroke-dashoffset: 100; } 42% { stroke-dashoffset: 0; } 72% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -100; } }
.chart__dot { fill: var(--c-surface); stroke: var(--c-accent); stroke-width: 3; opacity: 0; animation: chart-dot 5s ease-in-out infinite; }
@keyframes chart-dot { 0%, 22% { opacity: 0; } 46% { opacity: 1; } 72% { opacity: 1; } 92%, 100% { opacity: 0; } }
.chart__spark { fill: var(--c-accent); filter: drop-shadow(0 0 5px rgba(19, 191, 179, .9)); }
.chart__xlabel { fill: var(--c-text-faint); font-family: var(--font-mono); font-size: 13px; text-anchor: middle; }
.chart__caption { display: flex; gap: clamp(1.5rem, 1rem + 2vw, 3rem); margin-top: var(--s-5); flex-wrap: wrap; }
.chart__fig { display: flex; flex-direction: column; }
.chart__fig b { font-family: var(--font-display); font-weight: 700; font-size: var(--t-h3); letter-spacing: -0.02em; }
.chart__fig span { font-size: var(--t-small); color: var(--c-text-soft); }

/* Reseaux sociaux : boutons ronds, pictogramme centre. */
.footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  color: var(--c-on-ink-soft);
  border: 1px solid var(--c-line-on-ink);
  border-radius: var(--r);
  transition: color var(--d-fast) var(--ease),
              background-color var(--d-fast) var(--ease),
              border-color var(--d-fast) var(--ease),
              transform var(--d-fast) var(--ease);
}
.footer__social-link svg { width: 1.2rem; height: 1.2rem; }
.footer__social-link:hover {
  color: var(--c-ink);
  background: var(--c-accent);
  border-color: var(--c-accent);
  transform: translateY(-2px);
}

/* -------------------------------------------------------------
   Devis & budget : trois assurances + appels au devis / audit.
   ------------------------------------------------------------- */
.quote-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: stretch;
}
.quote-tile {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 16px;
}
.quote-tile__ic {
  width: 2.4rem; height: 2.4rem; color: var(--c-accent-ink);
}
.quote-tile__ic svg { width: 100%; height: 100%; }
.quote-tile h3 { font-size: var(--t-h4); }
.quote-tile p { font-size: var(--t-small); color: var(--c-text-soft); line-height: 1.5; }
.pricing__cta { margin-top: var(--s-7); display: flex; flex-direction: column; align-items: center; gap: var(--s-4); text-align: center; }
.quote-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; }
.pricing__cta-note { max-width: 48ch; font-size: var(--t-small); color: var(--c-text-soft); }
@media (max-width: 860px) {
  .quote-grid { grid-template-columns: 1fr; max-width: 26rem; margin-inline: auto; }
}

/* -------------------------------------------------------------
   15. Responsive
   ------------------------------------------------------------- */
@media (max-width: 767px) {
  .claim { grid-template-columns: 1fr; gap: var(--s-2); }
  .claim p { grid-column: 1; }
  .hero-x__title { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-js='true'] .lines .ln { transform: none; }
  .pt--live,
  .orbit__spin,
  .orbit__core { animation: none; }
}