/* ===== tokens.css ===== */
/* ==========================================================================
   Jetons de conception, DJUMS Universal
   Source de verite visuelle. Aucune valeur brute de couleur, de taille ou
   de duree ne doit apparaitre ailleurs que dans ce fichier.
   Reference, section 6 du brief.
   ========================================================================== */

:root {
  /* --- Couleurs de marque, section 6 -------------------------------------- */
  --blue: #1F5AE0;            /* bleu marque, signature */
  --blue-bright: #3B82F6;     /* bleu vif, reserve aux degrades d'animation */
  --blue-pale: #EAF1FF;       /* bleu pale, fonds de sections */
  --white: #FFFFFF;           /* blanc dominant */
  --grey-light: #F4F6FB;      /* gris clair, alternance */
  --ink: #0C1633;             /* encre, texte principal */
  --ink-muted: #55607A;       /* encre secondaire */

  /* Nuances derivees, toutes issues des sept couleurs ci-dessus. */
  --blue-dark: #1747B4;       /* etat actif des boutons pleins */
  --blue-tint: #F5F8FF;       /* voile bleu tres leger */
  --ink-on-dark: #FFFFFF;
  --ink-on-dark-muted: #A8B2CC;  /* contraste 8.4:1 sur l'encre */
  --hairline: #E4E9F3;        /* filets et separateurs */
  --hairline-strong: #D3DBEC;
  --focus: #1F5AE0;

  /* Signalement d'erreur de saisie. Le brief ne fixe pas cette couleur,
     ce rouge sobre s'accorde a l'encre et tient le niveau AA sur blanc,
     6.57:1, comme sur son propre fond teinte. */
  --error: #B42318;
  --error-ink: #8A1C12;

  /* --- Roles ------------------------------------------------------------- */
  --bg: var(--white);
  --bg-alt: var(--grey-light);
  --bg-accent: var(--blue-pale);
  --bg-deep: var(--ink);
  --text: var(--ink);
  --text-muted: var(--ink-muted);
  --link: var(--blue);

  /* --- Typographie, section 6 -------------------------------------------- */
  --font-display: 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace;

  --fs-hero: clamp(44px, 7vw, 92px);
  --fs-h2: clamp(30px, 4.5vw, 56px);
  --fs-h3: clamp(21px, 2.1vw, 28px);
  --fs-h4: 19px;
  --fs-lead: clamp(18px, 1.6vw, 22px);
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-eyebrow: 13px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  --lh-hero: 1.04;
  --lh-title: 1.12;
  --lh-lead: 1.5;
  --lh-body: 1.65;

  --ls-hero: -0.032em;   /* interlettrage resserre sur les tailles hero */
  --ls-title: -0.02em;
  --ls-eyebrow: 0.13em;

  /* --- Espacements, echelle de 4 pixels ---------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Respiration entre sections, marqueur cle du niveau corporate vise. */
  --section-y: clamp(76px, 9vw, 148px);
  --section-y-tight: clamp(56px, 6vw, 96px);

  /* --- Mise en page ------------------------------------------------------ */
  --container: 1200px;
  --container-wide: 1360px;
  --container-narrow: 760px;
  --gutter: clamp(20px, 5vw, 48px);
  --header-h: 76px;

  /* --- Formes, section 6 ------------------------------------------------- */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Ombres douces et diffuses, discretes, autorisees sur fond clair. */
  --shadow-sm: 0 1px 2px rgba(12, 22, 51, .04), 0 2px 8px rgba(12, 22, 51, .04);
  --shadow: 0 2px 4px rgba(12, 22, 51, .04), 0 12px 32px rgba(12, 22, 51, .07);
  --shadow-lg: 0 4px 8px rgba(12, 22, 51, .05), 0 24px 56px rgba(12, 22, 51, .10);
  --shadow-blue: 0 10px 30px rgba(31, 90, 224, .20);

  /* --- Mouvement, section 7 ---------------------------------------------- */
  --dur-fast: 160ms;
  --dur: 260ms;
  --dur-slow: 560ms;          /* entree de page, 500 a 600 ms */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --reveal-stagger: 70ms;     /* decalage discret entre les lignes */

  --z-header: 100;
  --z-menu: 200;
  --z-skip: 300;
}

/* Confort, section 7. Si le visiteur a demande la reduction des animations,
   toutes les durees tombent a une valeur imperceptible. Les composants
   s'appuient sur ces variables, il n'y a donc rien a desactiver ailleurs. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
    --dur-slow: 1ms;
    --reveal-stagger: 0ms;
  }
}


/* ===== fonts.css ===== */
/* ==========================================================================
   Polices auto-hebergees
   Montserrat porte l'identite corporate, Inter assure la lecture longue.
   Les deux sont des polices variables, un seul fichier couvre toutes les
   graisses, ce qui limite le poids et supprime les sauts de graisse.
   font-display: swap, exige par la section 13 du brief.
   ========================================================================== */

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

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

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

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


/* ===== base.css ===== */
/* ==========================================================================
   Socle. Remise a zero, typographie de base, accessibilite au clavier.
   ========================================================================== */

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

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--ink);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-hero);
  font-weight: var(--fw-black);
  line-height: var(--lh-hero);
  letter-spacing: var(--ls-hero);
}

h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); letter-spacing: -0.01em; }

p { margin: 0 0 var(--space-5); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--link);
  text-decoration-color: color-mix(in srgb, var(--link) 35%, transparent);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1.5px;
  transition: color var(--dur-fast) var(--ease),
              text-decoration-color var(--dur-fast) var(--ease);
}

a:hover { text-decoration-color: currentColor; }

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

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

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

button { cursor: pointer; }

strong, b { font-weight: var(--fw-semibold); }

::selection {
  background: color-mix(in srgb, var(--blue) 18%, transparent);
  color: var(--ink);
}

/* --- Focus clavier, section 13 -------------------------------------------
   Contour visible en bleu, jamais supprime. Le focus a la souris reste
   discret grace a focus-visible. */
:focus { outline: none; }

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

.on-dark :focus-visible,
.footer :focus-visible {
  outline-color: var(--white);
}

/* --- Lien d'evitement ----------------------------------------------------- */
.skip-link {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: var(--z-skip);
  padding: var(--space-3) var(--space-5);
  background: var(--blue);
  color: var(--white);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-decoration: none;
  transform: translateY(calc(-100% - var(--space-6)));
  transition: transform var(--dur) var(--ease);
}

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

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

[hidden] { display: none !important; }


/* ===== layout.css ===== */
/* ==========================================================================
   Mise en page. Conteneurs, rythme des sections, grilles.
   Espacements genereux, marges larges, section 6 du brief.
   ========================================================================== */

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

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

/* --- Sections et alternance de fonds --------------------------------------
   Le blanc domine. Le gris clair et le bleu pale rythment la page sans
   jamais la noyer de bleu. */
.section {
  position: relative;
  padding-block: var(--section-y);
}

.section--tight { padding-block: var(--section-y-tight); }
.section--white { background: var(--bg); }
.section--alt { background: var(--bg-alt); }
.section--accent { background: var(--bg-accent); }

.section--deep {
  background: var(--bg-deep);
  color: var(--ink-on-dark);
}

.section--deep h1,
.section--deep h2,
.section--deep h3,
.section--deep h4 { color: var(--ink-on-dark); }

.section--deep p { color: var(--ink-on-dark-muted); }

/* En-tete de section, surtitre, titre, chapeau. */
.section-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 72px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head > * + * { margin-top: var(--space-5); }
.section-head .lead { margin-top: var(--space-6); }

/* --- Grilles --------------------------------------------------------------- */
.grid {
  display: grid;
  gap: clamp(var(--space-6), 2.4vw, var(--space-10));
}

.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Colonne de contenu et colonne laterale, pour les pages editoriales. */
.grid--aside { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }

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

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

@media (max-width: 620px) {
  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* --- Pile verticale -------------------------------------------------------- */
.stack > * + * { margin-top: var(--space-5); }
.stack-sm > * + * { margin-top: var(--space-3); }
.stack-lg > * + * { margin-top: var(--space-8); }

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

/* --- Filet de separation --------------------------------------------------- */
.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--hairline);
}

.section--deep .rule { background: color-mix(in srgb, var(--white) 14%, transparent); }


/* ===== components.css ===== */
/* ==========================================================================
   Composants, section 11 du brief.
   ========================================================================== */

/* --- Surtitre, chapeau ----------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--blue);
}

.eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  flex: none;
}

.eyebrow--plain::before { display: none; }
.section--deep .eyebrow { color: var(--blue-bright); }

.lead {
  font-size: var(--fs-lead);
  font-weight: var(--fw-medium);
  line-height: var(--lh-lead);
  color: var(--text-muted);
  letter-spacing: -0.005em;
}

.section--deep .lead { color: var(--ink-on-dark-muted); }

/* --- Boutons ---------------------------------------------------------------
   Un bouton principal plein bleu par ecran, un bouton secondaire en texte
   avec fleche animee. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: 15px var(--space-8);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

.btn__arrow {
  flex: none;
  transition: transform var(--dur) var(--ease-out-expo);
}

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

.btn--primary {
  background: var(--blue);
  color: var(--white);
  box-shadow: var(--shadow-blue);
}

.btn--primary:hover {
  background: var(--blue-dark);
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(31, 90, 224, .28);
}

.btn--primary:active { transform: translateY(0); }

.btn--outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--hairline-strong);
}

.btn--outline:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-tint);
}

.btn--on-dark { background: var(--white); color: var(--ink); }
.btn--on-dark:hover { background: var(--blue-pale); transform: translateY(-2px); }

/* Bouton secondaire en texte, soulignement qui se deploie. */
.btn-text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  color: var(--blue);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  position: relative;
}

.btn-text::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out-expo);
}

.btn-text:hover::after { transform: scaleX(1); }
.btn-text:hover .btn__arrow { transform: translateX(4px); }

/* Etat inerte, utilise tant qu'un lien sortant n'est pas renseigne.
   Voir src/config/links.mjs, aucun lien mort n'est produit. */
.btn.is-pending,
.btn-text.is-pending {
  pointer-events: none;
  background: var(--grey-light);
  color: var(--text-muted);
  /* Contour en tirets plutot qu'une opacite reduite. L'element se lit
     clairement comme a venir, et non comme un bouton mal affiche. */
  border-style: dashed;
  border-color: var(--hairline-strong);
  box-shadow: none;
}

/* --- En-tete ---------------------------------------------------------------
   Transparent au chargement, fond blanc avec leger flou au defilement,
   fine ligne de separation. */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

.site-header.is-scrolled {
  background: color-mix(in srgb, var(--white) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--hairline);
}

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

/* Logo. Le sceau rond bleu est fourni par le client. Tant qu'il n'est pas
   depose, le mot DJUMS en Montserrat tient seul, comme prevu section 6. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--ink);
  flex: none;
}

.brand__mark { width: 36px; height: 36px; flex: none; border-radius: 50%; }

.brand__word {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: var(--fw-black);
  letter-spacing: 0.01em;
  line-height: 1;
}

.brand:hover { color: var(--blue); }

/* Navigation principale. */
.nav {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-4), 2vw, var(--space-8));
}

.nav__link {
  position: relative;
  padding: var(--space-2) 0;
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  text-decoration: none;
  white-space: nowrap;
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out-expo);
}

.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--blue); font-weight: var(--fw-semibold); }

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

/* Selecteur de langue, groupe segmente. Ce sont de vrais liens, la bascule
   fonctionne sans JavaScript et mene toujours a la page equivalente. */
.lang {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--white) 70%, transparent);
}

.lang__item {
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

.lang__item:hover { color: var(--ink); }
.lang__item[aria-current="true"] { background: var(--blue); color: var(--white); }

/* Bouton du menu mobile. */
.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--white) 70%, transparent);
  color: var(--ink);
}

.menu-toggle__bar {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}

.menu-toggle__bar + .menu-toggle__bar { margin-top: 4px; }

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 980px) {
  .site-header__nav { display: none; }
  .site-header__cta { display: none; }
  .menu-toggle { display: inline-flex; flex-direction: column; }
}

/* Panneau mobile. */
.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-10) var(--gutter) var(--space-12);
  background: var(--white);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  /* visibility est une propriete discrete. Sans delai, elle basculerait
     a la fin de la transition, le panneau resterait donc invisible et non
     focusable pendant toute l'ouverture. On la retarde uniquement a la
     fermeture, le temps que le fondu se termine. */
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility 0s linear var(--dur);
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility 0s linear 0s;
}

.mobile-menu__link {
  display: block;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-title);
  color: var(--ink);
  text-decoration: none;
}

.mobile-menu__link[aria-current="page"] { color: var(--blue); }
body.menu-open { overflow: hidden; }

/* --- Pied de page ----------------------------------------------------------
   Quatre colonnes, selecteur de langue, bloc legal complet, en encre foncee
   pour contraster avec le corps lumineux du site. */
.site-footer {
  background: var(--bg-deep);
  color: var(--ink-on-dark);
  padding-block: clamp(64px, 7vw, 104px) var(--space-10);
}

.site-footer a { color: var(--ink-on-dark); text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: clamp(var(--space-8), 4vw, var(--space-16));
  padding-bottom: clamp(48px, 5vw, 72px);
}

.site-footer__intro { max-width: 340px; }
.site-footer__intro .brand { color: var(--white); }
.site-footer__intro .brand:hover { color: var(--blue-bright); }

.site-footer__tagline {
  margin-top: var(--space-5);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-on-dark-muted);
}

.footer-col__title {
  margin-bottom: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--blue-bright);
}

.footer-col__list { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-col__list a { font-size: var(--fs-small); color: var(--ink-on-dark-muted); }
.footer-col__list a:hover { color: var(--white); }

@media (max-width: 1080px) {
  .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__intro { grid-column: 1 / -1; max-width: 460px; }
}

@media (max-width: 520px) {
  .site-footer__top { grid-template-columns: minmax(0, 1fr); }
}

/* Bloc legal obligatoire, section 10 du brief. Presente en liste de
   definitions, ce qui donne au lecteur d'ecran le couple libelle et valeur. */
.legal-block {
  padding-block: clamp(32px, 4vw, 48px);
  border-top: 1px solid color-mix(in srgb, var(--white) 12%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--white) 12%, transparent);
}

.legal-block__title {
  margin-bottom: var(--space-6);
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--blue-bright);
}

.legal-block__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-6) var(--space-10);
  margin: 0;
}

.legal-block__item { min-width: 0; }

.legal-block__label {
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink-on-dark-muted) 85%, transparent);
}

.legal-block__value {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-on-dark);
  overflow-wrap: anywhere;
}

.legal-block__value--mono {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.01em;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-top: var(--space-8);
}

.site-footer__copyright {
  font-size: 14px;
  color: var(--ink-on-dark-muted);
}

.site-footer .lang {
  border-color: color-mix(in srgb, var(--white) 18%, transparent);
  background: color-mix(in srgb, var(--white) 6%, transparent);
}

.site-footer .lang__item { color: var(--ink-on-dark-muted); }
.site-footer .lang__item:hover { color: var(--white); text-decoration: none; }
.site-footer .lang__item[aria-current="true"] { background: var(--blue); color: var(--white); }

/* --- Carte -----------------------------------------------------------------
   Coins arrondis moderes, ombre douce et diffuse, elevation et halo bleu
   au survol. Sections 6 et 7 du brief. */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(var(--space-6), 2.4vw, var(--space-10));
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-out-expo),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

.card__index {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.06em;
  color: var(--blue);
}

/* Titre de carte. Plus petit que le h3 de pleine largeur, un mot long
   comme Accompagnement doit tenir dans une colonne de grille a quatre. */
.card__title {
  margin-top: var(--space-5);
  font-size: clamp(17px, 1.2vw, 19px);
  line-height: 1.3;
  /* balance repartit les lignes mais coupe les mots longs dans une colonne
     etroite, pretty se contente de soigner la derniere ligne. */
  text-wrap: pretty;
  overflow-wrap: break-word;
}
.card__text { margin-top: var(--space-4); color: var(--text-muted); font-size: 16px; }
.card__foot { margin-top: auto; padding-top: var(--space-6); }

.card--link:hover,
.card--link:focus-within {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--blue) 30%, var(--hairline));
  box-shadow: var(--shadow-lg), 0 0 0 4px color-mix(in srgb, var(--blue) 8%, transparent);
}

/* Lien qui couvre toute la carte, en gardant un seul element focusable. */
.card__cover {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.card__cover::after { content: ''; position: absolute; inset: 0; }

/* --- Etiquette de statut ---------------------------------------------------- */
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px 11px 5px 9px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  background: var(--blue-pale);
  color: var(--blue);
}

.status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.status--to-validate { background: var(--grey-light); color: var(--ink-muted); }

/* --- Bloc de statistique ---------------------------------------------------
   Grand chiffre, libelle dessous, comptage anime. Trois au maximum par page,
   section 11 du brief. */
.stat__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(44px, 5.2vw, 68px);
  font-weight: var(--fw-black);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}

.stat__suffix {
  font-size: 0.52em;
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
}

.stat__label {
  margin-top: var(--space-4);
  max-width: 30ch;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-muted);
}

/* Mention des elements encore soumis a validation du client. */
.pending-note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 10px;
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

/* --- Carte de plateforme ---------------------------------------------------
   Libelle de statut, nom, accroche, mention conçue et développée par DJUMS.
   Le motif geometrique en filigrane varie selon la plateforme. */
.platform-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 300px;
  padding: clamp(var(--space-6), 2.4vw, var(--space-10));
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-out-expo),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

.platform-card:hover,
.platform-card:focus-within {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--blue) 30%, var(--hairline));
  box-shadow: var(--shadow-lg), 0 0 0 4px color-mix(in srgb, var(--blue) 8%, transparent);
}

.platform-card__pattern {
  position: absolute;
  top: -30px;
  right: -30px;
  width: 190px;
  height: 190px;
  color: var(--blue);
  opacity: .10;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur-slow) var(--ease-out-expo);
}

.platform-card:hover .platform-card__pattern {
  opacity: .16;
  transform: rotate(8deg) scale(1.04);
}

.platform-card__name {
  margin-top: var(--space-5);
  font-size: clamp(22px, 1.9vw, 27px);
}

.platform-card__tagline {
  margin-top: var(--space-4);
  color: var(--text-muted);
  font-size: 16px;
}

.platform-card__foot {
  margin-top: auto;
  padding-top: var(--space-8);
}

.platform-card__credit {
  display: block;
  margin-bottom: var(--space-4);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Le lien couvre la carte entiere, un seul element reste focusable. */
.platform-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* Le pied de carte porte un indice visuel, pas un second lien. Le survol de
   la carte anime donc le soulignement a la place de l'element lui meme. */
.platform-card:hover .btn-text::after,
.platform-card:focus-within .btn-text::after { transform: scaleX(1); }

/* La carte est un conteneur flex en colonne, ses enfants directs sont donc
   etires sur toute la largeur. L'etiquette de statut doit garder la largeur
   de son contenu. */
.platform-card > .status { align-self: flex-start; }

/* Le nom porte le lien, mais c'est la carte entiere qui est cliquable. Un
   soulignement permanent donnerait l'impression d'un lien dans le texte. */
.platform-card__link {
  color: var(--ink);
  text-decoration: none;
}

.platform-card:hover .platform-card__link,
.platform-card__link:focus-visible { color: var(--blue); }

/* Sur un bloc de profondeur, l'etat inerte se rend en contour discret. Un
   aplat gris y formerait une tache. */
.section--deep .btn.is-pending {
  background: transparent;
  border-color: color-mix(in srgb, var(--white) 28%, transparent);
  color: color-mix(in srgb, var(--white) 62%, transparent);
  opacity: 1;
}

/* --- Cadre de maquette, section 11 ------------------------------------------
   Emplacement des captures de plateforme, a remplir par le client. Vide, il
   affiche un aplat calme et une mention explicite, jamais une image de
   remplacement qui pourrait passer pour le produit. */
/* Resserre tant que le cadre est vide, un aplat de 1200 px de large
   ecraserait la page pour ne rien montrer. */
.mockup {
  margin: 0 auto;
  max-width: 940px;
}

.mockup__frame {
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow);
}

.mockup__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 13px var(--space-5);
  border-bottom: 1px solid var(--hairline);
  background: var(--grey-light);
}

.mockup__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--hairline-strong);
}

.mockup__screen {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(60% 70% at 70% 20%, color-mix(in srgb, var(--blue-bright) 10%, transparent) 0%, transparent 70%),
    var(--blue-tint);
}

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

.mockup__placeholder {
  padding: var(--space-4) var(--space-6);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

/* --- Formulaire, section 11 ---------------------------------------------------- */
.contact-form__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-6);
  margin: 0;
  padding: 0;
  border: 0;
}

.field { display: flex; flex-direction: column; min-width: 0; }
.field--full { grid-column: 1 / -1; }

@media (max-width: 620px) {
  .contact-form__fields { grid-template-columns: minmax(0, 1fr); }
}

.field__label {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--ink);
}

.field__flag {
  font-size: 12px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--blue);
}

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

.field__input {
  width: 100%;
  padding: 13px var(--space-5);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.45;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.field__input::placeholder { color: color-mix(in srgb, var(--ink-muted) 72%, transparent); }

.field__input:hover { border-color: color-mix(in srgb, var(--blue) 40%, var(--hairline-strong)); }

.field__input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 12%, transparent);
}

.field__input--area { resize: vertical; min-height: 150px; font-family: inherit; }

.field__input--select {
  appearance: none;
  padding-right: var(--space-10);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%),
    linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* Message d'erreur. Il reste dans le flux mais sans hauteur tant qu'il est
   vide, la mise en page ne bouge donc pas quand il apparait. */
.field__error {
  margin: 0;
  min-height: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--error);
}

.field__error:not(:empty) { margin-top: var(--space-3); }

.field--invalid .field__input { border-color: var(--error); }
.field--invalid .field__input:focus {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--error) 14%, transparent);
}

/* Champ piege. Hors de l'ecran plutot qu'en display none, que certains
   automates savent reperer. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin-top: clamp(var(--space-8), 3vw, var(--space-10));
}

.contact-form__notice {
  flex: 1 1 260px;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
}

.contact-form__status:not(:empty) {
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius);
  font-size: var(--fs-small);
  line-height: 1.55;
}

.contact-form__status--error {
  background: color-mix(in srgb, var(--error) 8%, var(--white));
  border: 1px solid color-mix(in srgb, var(--error) 30%, transparent);
  color: var(--error-ink);
}

.contact-form__status--info {
  background: var(--blue-pale);
  border: 1px solid color-mix(in srgb, var(--blue) 22%, transparent);
  color: var(--ink);
}

.contact-form__status--success {
  background: var(--blue-pale);
  border: 1px solid color-mix(in srgb, var(--blue) 26%, transparent);
  color: var(--ink);
  padding: clamp(var(--space-6), 3vw, var(--space-10));
}

.contact-form__success-title {
  margin-bottom: var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-title);
}

.contact-form__status--success p:last-child { margin: 0; color: var(--text-muted); }

/* --- Bloc de citation, section 11 ---------------------------------------------
   Texte large, filet bleu a gauche, fond clair. Il sert a detacher une
   phrase qui porte le propos, pas a decorer un paragraphe ordinaire. */
.quote {
  margin: 0;
  padding: clamp(var(--space-6), 2.6vw, var(--space-8)) clamp(var(--space-6), 3vw, var(--space-10));
  border-left: 3px solid var(--blue);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: var(--blue-pale);
}

.quote__text {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(19px, 1.8vw, 24px);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  letter-spacing: -.015em;
  color: var(--ink);
  text-wrap: pretty;
}

.quote__source {
  display: block;
  margin-top: var(--space-4);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
}


/* ===== pages.css ===== */
/* ==========================================================================
   Styles propres aux pages.
   ========================================================================== */

/* --- Hero -------------------------------------------------------------------
   Compense l'en-tete fixe. Le halo bleu pose l'ambiance technologique et
   sert d'arriere plan a la constellation. */
.hero {
  position: relative;
  isolation: isolate;
  padding-top: calc(var(--header-h) + clamp(56px, 8vw, 112px));
  padding-bottom: clamp(72px, 9vw, 132px);
  overflow: hidden;
}

.hero__visual {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58% 62% at 78% 12%, color-mix(in srgb, var(--blue-bright) 16%, transparent) 0%, transparent 68%),
    radial-gradient(46% 54% at 6% 88%, color-mix(in srgb, var(--blue) 11%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, var(--blue-tint) 0%, var(--white) 62%);
}

/* Le hero partage la grille du reste du site. La largeur de lecture est
   posee sur le titre et le chapeau, jamais sur le conteneur, sans quoi le
   bloc se recentrerait et perdrait l alignement des sections suivantes. */
.hero__title { margin-top: var(--space-6); max-width: 15ch; }
.hero__lead { margin-top: var(--space-8); max-width: 62ch; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin-top: clamp(var(--space-10), 4vw, var(--space-12));
}

/* --- Bande de credibilite -----------------------------------------------------
   Une ligne de reperes juste sous le hero, separee par un filet fin plutot
   que par un changement de fond, pour ne pas hacher le haut de page. */
.credibility {
  padding-block: clamp(48px, 5vw, 76px);
  border-top: 1px solid var(--hairline);
}

.credibility__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--space-8), 4vw, var(--space-16));
}

.credibility__note { margin-top: clamp(var(--space-8), 3vw, var(--space-10)); }

@media (max-width: 780px) {
  .credibility__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
}

/* --- Accueil, ce que nous faisons ---------------------------------------------- */
.what-we-do__grid { margin-top: clamp(40px, 4vw, 64px); }
.section--alt .card { border-color: transparent; box-shadow: var(--shadow); }

/* --- Accueil, plateformes ------------------------------------------------------ */
.home-platforms__grid { margin-top: clamp(40px, 4vw, 64px); }
.home-platforms__more { margin-top: clamp(var(--space-10), 4vw, var(--space-12)); }

/* --- Bandeau forum --------------------------------------------------------------
   Bloc de profondeur en encre foncee, autorise par la section 6 du brief.
   Il isole le forum du reste de la page et prepare le contraste du pied. */
.forum-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.forum-band__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(52% 70% at 82% 18%, color-mix(in srgb, var(--blue) 55%, transparent) 0%, transparent 66%),
    radial-gradient(40% 60% at 8% 92%, color-mix(in srgb, var(--blue-bright) 26%, transparent) 0%, transparent 70%);
}

.forum-band__inner { max-width: 720px; }
.forum-band__title { margin-top: var(--space-6); }
.forum-band__text { margin-top: var(--space-6); }

.forum-band__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin-top: clamp(var(--space-8), 3vw, var(--space-10));
}

.forum-band .btn-text { color: var(--white); }
.forum-band .btn-text:hover { color: var(--blue-pale); }

/* --- Pourquoi DJUMS --------------------------------------------------------------
   Trois arguments en colonnes, ouverts par un filet bleu. Pas de carte ici,
   pour varier le rythme apres deux grilles de cartes. */
.why__grid { margin-top: clamp(40px, 4vw, 64px); }

.why-item { padding-top: var(--space-6); border-top: 2px solid var(--blue); }
.why-item__title { font-size: clamp(19px, 1.5vw, 22px); }
.why-item__text { margin-top: var(--space-4); color: var(--text-muted); font-size: 16px; }

/* --- Appel final ------------------------------------------------------------------ */
.final-cta { text-align: center; }
.final-cta__inner { max-width: 640px; margin-inline: auto; }
.final-cta__text { margin-top: var(--space-6); }
.final-cta__actions { margin-top: clamp(var(--space-8), 3vw, var(--space-10)); justify-content: center; }

/* --- Hero des pages interieures ------------------------------------------------
   Plus compact que celui de l'accueil, sans constellation. */
.hero--page {
  padding-top: calc(var(--header-h) + clamp(48px, 6vw, 88px));
  padding-bottom: clamp(56px, 6vw, 92px);
}

.hero__visual--page {
  background:
    radial-gradient(48% 58% at 88% 6%, color-mix(in srgb, var(--blue-bright) 13%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, var(--blue-tint) 0%, var(--white) 74%);
}

.hero--page .hero__title { max-width: 20ch; }

/* --- Colonne de texte suivi ------------------------------------------------------ */
.prose > p + p { margin-top: var(--space-5); }
.prose p { color: var(--text-muted); font-size: 17px; }

/* En disposition a deux colonnes, l'en-tete de section n'a pas besoin de sa
   marge basse, la grille assure deja l'ecart. */
.section-head--flush { margin-bottom: 0; }

/* --- Societe, activites et reperes ----------------------------------------------- */
.activities__grid { margin-top: clamp(40px, 4vw, 64px); }

.leader__role {
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--blue);
}

.facts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-8) var(--space-10);
  margin: clamp(32px, 3vw, 48px) 0 0;
}

.facts__item { padding-top: var(--space-5); border-top: 1px solid var(--hairline); }

.facts__label {
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.facts__value {
  margin: var(--space-3) 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
}

.facts__more { margin-top: clamp(var(--space-8), 3vw, var(--space-10)); }

/* --- Page Expertises ---------------------------------------------------------------
   Chaque expertise occupe une bande, ouverte par un filet et numerotee.
   Le titre reste a gauche, les trois volets se lisent a droite. */
.expertise-item {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 2fr);
  gap: clamp(var(--space-6), 4vw, var(--space-16));
  padding-block: clamp(48px, 5vw, 76px);
  border-top: 1px solid var(--hairline);
}

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

/* Aucune marge de defilement ici. html porte deja scroll-padding-top pour
   degager l'en-tete fixe, et les deux valeurs s'additionneraient. */

.expertise-item__index {
  display: block;
  margin-bottom: var(--space-4);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  color: var(--blue);
}

.expertise-item__title { font-size: clamp(24px, 2.6vw, 34px); }

.expertise-item__body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(var(--space-6), 2.4vw, var(--space-8));
  margin: 0;
}

.expertise-facet__label {
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
}

.expertise-facet__text {
  margin: var(--space-3) 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .expertise-item { grid-template-columns: minmax(0, 1fr); }
}

/* --- Hub et pages de plateforme ----------------------------------------------- */
.platforms-hub__grid { margin-top: 0; }

.platforms-more { text-align: center; }
.platforms-more__text { margin-top: var(--space-6); }
.platforms-more__action { margin-top: clamp(var(--space-8), 3vw, var(--space-10)); }

.hero__badge { margin-bottom: var(--space-6); }

/* Liste des apports de la plateforme. Chaque entree s'ouvre sur une puce
   geometrique, jamais un emoji. */
.feature-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5) clamp(var(--space-8), 4vw, var(--space-12));
  margin-top: clamp(32px, 3vw, 48px);
}

.feature-list__item {
  position: relative;
  padding: var(--space-5) 0 var(--space-5) var(--space-8);
  border-top: 1px solid var(--hairline-strong);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
}

.feature-list__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(var(--space-5) + 0.55em);
  width: 10px;
  height: 10px;
  border: 2px solid var(--blue);
  border-radius: 2px;
  transform: rotate(45deg);
}

.feature-list__note { margin-top: clamp(var(--space-8), 3vw, var(--space-10)); }

.platform-preview__notes { margin-top: clamp(var(--space-8), 3vw, var(--space-10)); }
.platform-preview__note + .platform-preview__note { margin-top: var(--space-4); }

/* Autres plateformes, en fin de page dediee. */
.others__grid { margin-top: clamp(32px, 3vw, 48px); }

.other-platform {
  padding: clamp(var(--space-6), 2.4vw, var(--space-8));
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  transition: transform var(--dur) var(--ease-out-expo), box-shadow var(--dur) var(--ease);
}

.other-platform:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.other-platform__name { margin-top: var(--space-4); font-size: clamp(20px, 1.7vw, 24px); }
.other-platform__name a { color: var(--ink); text-decoration: none; }
.other-platform:hover .other-platform__name a { color: var(--blue); }
.other-platform__tagline { margin-top: var(--space-3); color: var(--text-muted); font-size: 16px; }

/* --- Page Contact ------------------------------------------------------------- */
.contact__grid { align-items: start; gap: clamp(var(--space-10), 5vw, var(--space-20)); }

.contact-details {
  padding: clamp(var(--space-6), 2.6vw, var(--space-10));
  background: var(--bg-alt);
  border-radius: var(--radius-lg);
}

.contact-details__title {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--blue);
}

.contact-details__list { margin: var(--space-6) 0 0; }
.contact-details__item + .contact-details__item { margin-top: var(--space-6); }

.contact-details__item dt {
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.contact-details__item dd {
  margin: var(--space-2) 0 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.contact-details__more { margin-top: var(--space-8); }

/* --- Page Collaborer ------------------------------------------------------------ */
.collaborate__grid { margin-top: 0; }

.collaborate-card {
  display: flex;
  flex-direction: column;
  padding: clamp(var(--space-6), 2.6vw, var(--space-10));
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-out-expo), box-shadow var(--dur) var(--ease);
}

.collaborate-card:hover,
.collaborate-card:focus-within { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.collaborate-card__title { margin-top: var(--space-5); font-size: clamp(21px, 1.8vw, 26px); }
.collaborate-card__text { margin-top: var(--space-4); color: var(--text-muted); font-size: 16px; }
.collaborate-card__action { margin: auto 0 0; padding-top: var(--space-8); }

/* --- Page Forum ------------------------------------------------------------------ */
.forum-experience__grid { margin-top: clamp(40px, 4vw, 64px); }
.forum-editions__text { margin-top: var(--space-6); }
.forum-editions__note { margin-top: var(--space-8); }
.forum-gallery__grid { margin-top: clamp(40px, 4vw, 64px); }
.forum-gallery__note { margin-top: clamp(var(--space-8), 3vw, var(--space-10)); }

/* Les cadres de la galerie sont carres, ils accueilleront des photographies
   d'evenement et non des captures d'ecran. */
.forum-gallery__slot .mockup { max-width: none; }
.forum-gallery__slot .mockup__bar { display: none; }
.forum-gallery__slot .mockup__screen { aspect-ratio: 4 / 3; }

/* --- Page de mentions legales ---------------------------------------------------
   Sommaire a gauche, qui suit le defilement sur grand ecran, contenu en
   colonne de lecture a droite. */
.legal-page__grid {
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 2fr);
  gap: clamp(var(--space-10), 5vw, var(--space-16));
  align-items: start;
}

@media (max-width: 900px) {
  .legal-page__grid { grid-template-columns: minmax(0, 1fr); }
}

.legal-summary {
  position: sticky;
  top: calc(var(--header-h) + var(--space-6));
  padding: var(--space-6);
  background: var(--bg-alt);
  border-radius: var(--radius-lg);
}

@media (max-width: 900px) {
  .legal-summary { position: static; }
}

.legal-summary__title {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--blue);
}

.legal-summary__list {
  counter-reset: legal;
  margin-top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.legal-summary__list li { counter-increment: legal; }

.legal-summary__list a {
  display: flex;
  gap: var(--space-3);
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--text-muted);
  text-decoration: none;
}

.legal-summary__list a::before {
  content: counter(legal, decimal-leading-zero);
  flex: none;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--blue);
}

.legal-summary__list a:hover { color: var(--ink); }

/* Corps de la page legale. Colonne de lecture, sections separees par un
   filet, et bloc d'identite en fond clair. */
.legal-section + .legal-section {
  margin-top: clamp(40px, 4vw, 64px);
  padding-top: clamp(40px, 4vw, 64px);
  border-top: 1px solid var(--hairline);
}

.legal-section__title { font-size: clamp(22px, 2.2vw, 30px); }

.legal-section__subtitle {
  margin-top: var(--space-8);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
}

.legal-section p {
  margin-top: var(--space-5);
  max-width: 68ch;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-muted);
}

.legal-list {
  margin-top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.legal-list li {
  position: relative;
  padding-left: var(--space-6);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
}

.legal-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border: 1.6px solid var(--blue);
  border-radius: 2px;
  transform: rotate(45deg);
}

.legal-section__pending { margin-top: var(--space-5); }

/* Le bloc d'identite reprend ici les couleurs du corps de page, alors qu'il
   herite de celles de l'encre dans le pied. */
.legal-section .legal-block {
  margin-top: var(--space-6);
  padding: clamp(var(--space-5), 2.4vw, var(--space-8));
  background: var(--bg-alt);
  border-radius: var(--radius-lg);
  border: 0;
}

.legal-section .legal-block__grid { gap: var(--space-6) var(--space-8); }
.legal-section .legal-block__label { color: var(--text-muted); }
.legal-section .legal-block__value { color: var(--ink); }
.legal-section .legal-block__value a { color: var(--blue); }

/* Presence dediee du studio, section 4 du brief. */
.studio-note { text-align: center; }
.studio-note__text { margin-top: var(--space-6); }
.studio-note__action { margin-top: clamp(var(--space-8), 3vw, var(--space-10)); }

/* La citation du fil conducteur suit les paragraphes de Qui nous sommes. */
.prose .quote { margin-top: var(--space-8); }

/* --- Page servie sur adresse inconnue ------------------------------------------ */
.not-found__title {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--blue);
}

.not-found__links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 var(--space-8);
  margin-top: var(--space-6);
}

.not-found__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
  font-weight: var(--fw-medium);
  text-decoration: none;
}

.not-found__links a:hover { color: var(--blue); }
.not-found__other { margin-top: clamp(var(--space-8), 3vw, var(--space-10)); }


/* ===== motion.css ===== */
/* ==========================================================================
   Mouvement, section 7 du brief.

   Regle de securite. Rien n'est masque tant que la racine ne porte pas la
   classe has-js, posee par un script en ligne avant le premier affichage.
   Si le JavaScript echoue, aucun contenu ne reste invisible.

   Toutes les durees passent par les jetons, qui tombent a une valeur
   imperceptible sous reduction des animations. Le bloc de neutralisation en
   fin de fichier ne fait que supprimer les etats initiaux.
   ========================================================================== */

/* --- Entree de page --------------------------------------------------------
   Fondu avec legere translation, autour de 560 ms. Elle joue en CSS pur,
   sans attendre le JavaScript, et se decale a peine d'un element a l'autre
   pour donner de la tenue sans retarder l'affichage. */
@keyframes enter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero .eyebrow,
.hero__title,
.hero__lead,
.hero__actions {
  animation: enter var(--dur-slow) var(--ease-out-expo) both;
}

.hero .eyebrow    { animation-delay: 0ms; }
.hero__title      { animation-delay: 60ms; }
.hero__lead       { animation-delay: 140ms; }
.hero__actions    { animation-delay: 220ms; }

/* --- Constellation ----------------------------------------------------------
   Purement decorative, elle apparait plus lentement que le texte pour ne
   jamais capter l'attention avant lui. */
.constellation {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: fade-in 1200ms var(--ease) both;
  animation-delay: 160ms;
}

/* --- Apparition au defilement ----------------------------------------------- */
.has-js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
}

.has-js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-slow) var(--ease-out-expo),
              transform var(--dur-slow) var(--ease-out-expo);
}

/* Decalage discret entre les elements d'un meme groupe, cartes d'une grille
   ou blocs d'une liste. L'index vient du rang dans le parent, aucun script
   n'a besoin de l'ecrire. */
.has-js [data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
}

.has-js [data-reveal-stagger].is-revealed > * {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-slow) var(--ease-out-expo),
              transform var(--dur-slow) var(--ease-out-expo);
  transition-delay: calc(var(--reveal-stagger) * var(--reveal-index, 0));
}

.has-js [data-reveal-stagger] > *:nth-child(1) { --reveal-index: 0; }
.has-js [data-reveal-stagger] > *:nth-child(2) { --reveal-index: 1; }
.has-js [data-reveal-stagger] > *:nth-child(3) { --reveal-index: 2; }
.has-js [data-reveal-stagger] > *:nth-child(4) { --reveal-index: 3; }
.has-js [data-reveal-stagger] > *:nth-child(5) { --reveal-index: 4; }
.has-js [data-reveal-stagger] > *:nth-child(6) { --reveal-index: 5; }
.has-js [data-reveal-stagger] > *:nth-child(n + 7) { --reveal-index: 6; }

/* --- Revelation d'un titre ligne par ligne -----------------------------------
   Les mots sont enveloppes par motion.js, qui leur attribue leur numero de
   ligne reel. Sans JavaScript, aucun mot n'est enveloppe et le titre
   s'affiche normalement. */
.has-js [data-reveal-lines] .reveal-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.42em);
}

.has-js [data-reveal-lines].is-revealed .reveal-word {
  opacity: 1;
  transform: none;
  transition: opacity 620ms var(--ease-out-expo),
              transform 620ms var(--ease-out-expo);
  transition-delay: calc(var(--reveal-line, 0) * var(--reveal-stagger));
}

/* --- Confort, section 7 -------------------------------------------------------
   La constellation se fige sur une image propre, les decalages disparaissent
   et il ne reste que des fondus tres courts, portes par les jetons. */
@media (prefers-reduced-motion: reduce) {
  .hero .eyebrow,
  .hero__title,
  .hero__lead,
  .hero__actions,
  .constellation {
    animation-delay: 0ms;
  }

  .has-js [data-reveal],
  .has-js [data-reveal-stagger] > *,
  .has-js [data-reveal-lines] .reveal-word {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   Animation d'entree et transition de page, reprises du site precedent.
   ========================================================================== */

/* --- Voile d'entree ---------------------------------------------------------
   Il ne s'affiche que si le script en ligne dans le head a retire l'attribut
   hidden, c'est a dire premiere arrivee de la session, JavaScript actif et
   animations non reduites. */
.intro {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  background: var(--ink);
  animation: introExit .55s cubic-bezier(.76, 0, .24, 1) 1.35s forwards;
}

.intro__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

/* Le trace se dessine. pathLength ramene chaque forme a une longueur de 1,
   la meme animation sert donc au grand cercle comme au plus petit noeud. */
.intro__draw {
  width: clamp(84px, 14vw, 118px);
  height: auto;
  overflow: visible;
}

.intro__draw circle {
  fill: none;
  stroke: var(--white);
  /* Epaisseur en unites du viewBox, qui en compte 64. Avec
     non-scaling-stroke, la meme valeur aurait donne un trait d'un
     vingtieme de pixel, invisible a l'ecran. */
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: introDraw .95s cubic-bezier(.65, 0, .35, 1) forwards;
}

/* Les trois noeuds en orbite, plus epais pour rester lisibles. */
.intro__draw circle:nth-child(n + 4) { stroke-width: 2.4; }

.intro__word {
  font-family: var(--font-display);
  font-size: clamp(21px, 3vw, 27px);
  font-weight: var(--fw-black);
  letter-spacing: .02em;
  color: var(--white);
  opacity: 0;
  animation: introWord .5s var(--ease-out-expo) .55s forwards;
}

.intro__rule {
  display: block;
  width: clamp(120px, 26vw, 260px);
  height: 2px;
  border-radius: 2px;
  background: var(--blue-bright);
  transform: scaleX(0);
  transform-origin: 0;
  animation: introRule .6s cubic-bezier(.76, 0, .24, 1) .75s forwards;
}

@keyframes introDraw { to { stroke-dashoffset: 0; } }
@keyframes introWord { to { opacity: 1; } }
@keyframes introRule { to { transform: scaleX(1); } }
@keyframes introExit { to { transform: translateY(-101%); } }

/* Le defilement est bloque le temps du voile, sinon la page bouge derriere. */
html.intro-open, html.intro-open body { overflow: hidden; }

/* --- Voile des changements de page -------------------------------------------
   Il monte du bas, se fige sur le mot, puis sort par le haut. Meme geste et
   meme duree que sur l'ancien site, 0,66 s. Inerte tant que le script ne
   pose pas l'une des deux classes. */
.route-overlay {
  position: fixed;
  inset: 0;
  z-index: 380;
  display: grid;
  place-items: center;
  background: var(--ink);
  transform: translateY(100%);
  pointer-events: none;
  visibility: hidden;
}

.route-overlay__mark {
  font-family: var(--font-display);
  font-size: clamp(30px, 6vw, 60px);
  font-weight: var(--fw-black);
  letter-spacing: -.03em;
  color: var(--white);
  opacity: 0;
}

/* Depart, le voile monte et se fige. */
.route-overlay.is-covering {
  visibility: visible;
  animation: routeCover .33s cubic-bezier(.76, 0, .24, 1) forwards;
}

/* Arrivee sur la nouvelle page, le voile sort par le haut. */
.route-overlay.is-uncovering {
  visibility: visible;
  transform: translateY(0);
  animation: routeUncover .33s cubic-bezier(.76, 0, .24, 1) forwards;
}

.route-overlay.is-covering .route-overlay__mark,
.route-overlay.is-uncovering .route-overlay__mark {
  animation: routeMark .33s ease-out forwards;
}

@keyframes routeCover {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes routeUncover {
  from { transform: translateY(0); }
  to   { transform: translateY(-101%); }
}

@keyframes routeMark {
  0%   { opacity: 0; }
  55%  { opacity: 1; }
  100% { opacity: 1; }
}

/* Sous reduction des animations, ni voile d'entree ni voile de transition.
   Le script ne les declenche pas, cette regle est la ceinture de securite. */
@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  .route-overlay { display: none; }
}