/* ============================================================
   AXIS FINANCE — SA
   Système de design « Institutional Light »

   Direction : clarté, respiration, autorité tranquille.
   Référence de registre : maisons de conseil financier
   internationales — fond clair dominant, bleu profond réservé
   au texte et aux ponctuations, or employé avec parcimonie.

   Robustesse : aucun contenu ne dépend de JavaScript pour être
   visible. Les animations sont conditionnées à la classe .js
   posée par le script ; sans script, tout s'affiche.
   ============================================================ */

/* ---------- 0. Polices auto-hébergées ---------- */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family:'Playfair Display'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/playfair-display-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Playfair Display'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/playfair-display-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }

/* ---------- 1. Jetons ---------- */
:root {
  /* Surfaces — le clair domine */
  --surface:        #FFFFFF;
  --surface-soft:   #F8F9FB;
  --surface-tint:   #F1F4F9;
  --surface-deep:   #0B244A;   /* navy AXIS FINANCE — pied de page et bandes d'appel */

  /* Encre */
  --ink:            #0A1F38;   /* encre alignée sur le navy AXIS FINANCE */
  --ink-body:       #4A5468;
  --ink-muted:      #636C83;   /* >= 4,57:1 sur tous les fonds employés */

  /* ---- Palette de marque — pilotée par le logo institutionnel AXIS FINANCE ----
     Couleurs relevées sur la planche de marque officielle (navy + vert).
     KANU conserve sa propre identité (teal + or, relevés sur son propre
     logo) via des jetons --kanu-* totalement indépendants : les deux
     marques ne se mélangent pas, chacune garde la couleur de son logo.

     Contrastes mesurés sur blanc :
       navy AXIS  #0B244A → 15,38:1 (texte)
       vert AXIS  #78B936 →  2,39:1 (décoratif seul ; 6,44:1 sur le navy AXIS)
       vert texte #548226 →  4,57:1 */
  --blue:           #0B244A;   /* navy AXIS FINANCE — boutons, liens, titres */
  --blue-deep:      #071830;   /* survol des boutons */
  --blue-bright:    #1A3E73;   /* liens au survol */
  --blue-wash:      #EAEEF4;

  --green:          #78B936;   /* vert AXIS FINANCE — puces, filets, barres, aplats */
  --green-light:    #9AD35E;   /* vert clair — sur fonds sombres */
  --green-ink:      #548226;   /* vert accessible — surtitres et libellés */
  --green-deep:     #466E20;   /* vert foncé — texte sur lavis vert */
  --green-wash:     #F2F8EB;

  --teal:           #0F3F69;   /* bleu de l'arc du symbole AXIS — accent secondaire */
  --axis-navy:      #0B244A;

  /* KANU garde ses propres couleurs, relevées sur son logo — indépendantes
     de la palette institutionnelle ci-dessus. C'est ce découplage qui permet
     aux deux marques de cohabiter sans se neutraliser l'une l'autre. */
  --kanu-teal:      #137170;   /* 5,80:1 sur blanc */
  --kanu-gold:      #E0A01E;   /* décoratif ; 6,12:1 sur navy KANU */
  --kanu-gold-ink:  #916813;   /* 5,01:1 sur blanc */
  --kanu-navy:      #071E2C;
  --kanu-wash:      #FCF6E8;
  --kanu-teal-wash: #E8F1F1;

  --border:         #E3E7EE;
  --border-strong:  #CFD6E2;

  --danger:         #A03426;
  --success:        #2F6B4F;

  --font-serif: "Playfair Display", Georgia, serif;
  --font-sans:  "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono:  "IBM Plex Mono", ui-monospace, monospace;

  --step-7: clamp(2.6rem, 1.6rem + 3.9vw, 4.4rem);
  --step-6: clamp(2rem, 1.45rem + 2.3vw, 3rem);
  --step-5: clamp(1.5rem, 1.2rem + 1.3vw, 2.05rem);
  --step-4: 1.5rem;
  --step-3: 1.125rem;

  --wrap: 1220px;
  --wrap-narrow: 760px;
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 14px;

  --shadow-sm: 0 1px 2px rgba(10,26,51,.05);
  --shadow-md: 0 2px 4px rgba(10,26,51,.04), 0 10px 28px rgba(10,26,51,.07);
  --shadow-lg: 0 4px 8px rgba(10,26,51,.05), 0 22px 52px rgba(10,26,51,.10);

  --ease: cubic-bezier(.2,.7,.3,1);
  --header-h: 80px;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px);
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;   /* empeche toute barre de defilement horizontale parasite */
}
body {
  margin: 0; font-family: var(--font-sans); font-size: 1.0625rem; line-height: 1.56;
  color: var(--ink-body); background: var(--surface); -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3 { font-family: var(--font-serif); font-weight: 500; line-height: 1.14; letter-spacing: -.015em; margin: 0 0 .5em; color: var(--ink); }
h1 { font-size: var(--step-7); }
h2 { font-size: var(--step-6); }
h3 { font-size: var(--step-5); font-weight: 600; letter-spacing: -.01em; }
h4 { font-family: var(--font-sans); font-size: 1.0625rem; font-weight: 600; line-height: 1.4; margin: 0 0 .5em; color: var(--ink); letter-spacing: -.005em; }
p { margin: 0 0 .85em; max-width: 72ch; }
ul, ol { margin: 0 0 .85em; padding-left: 1.25em; }
li { margin-bottom: .5em; }
hr { border: 0; border-top: 1px solid var(--border); margin: 3rem 0; }
strong { font-weight: 600; color: var(--ink); }
code { font-family: var(--font-mono); font-size: .86em; background: var(--surface-tint); color: var(--blue-deep); padding: .15em .45em; border-radius: 4px; }
abbr[title] { text-decoration: underline dotted; cursor: help; }
:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 3px; border-radius: 2px; }

/* ---------- 3. Structure ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 32px; }
.wrap--narrow { max-width: var(--wrap-narrow); }
.section { padding-block: clamp(44px, 6vw, 84px); }
.section--tight { padding-block: clamp(28px, 3.5vw, 48px); }
.section--soft { background: var(--surface-soft); }
.section--tint { background: var(--surface-tint); }
.section--deep { background: var(--surface-deep); color: #C3CEE0; }
.section--deep h1, .section--deep h2, .section--deep h3, .section--deep h4 { color: #FFFFFF; }
.section--deep .footer-title { color: #FFFFFF; }
.section--line-top { border-top: 1px solid var(--border); }
.section--line-bottom { border-bottom: 1px solid var(--border); }

.grid { display: grid; gap: 32px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid--tight { gap: 24px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 76px); align-items: start; }
.split--center { align-items: center; }

/* ---------- 4. Titrage ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-mono);
  font-size: .72rem; font-weight: 500; text-transform: uppercase; letter-spacing: .15em;
  color: var(--green-ink); margin-bottom: 22px;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--green); flex-shrink: 0; }
.eyebrow--center { justify-content: center; }
.section--deep .eyebrow { color: var(--green-light); }

.section-head { max-width: 660px; margin-bottom: clamp(22px, 3vw, 38px); }
.section-head--wide { max-width: 860px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--ink-muted); font-size: var(--step-3); margin-bottom: 0; }
.section--deep .section-head p { color: #9FADC6; }
.section-head--split { display: flex; justify-content: space-between; align-items: flex-end; max-width: none; flex-wrap: wrap; gap: 28px; }
.section-head--split > div { max-width: 640px; margin-bottom: 0; }

.lede {
  font-size: 1.25rem; line-height: 1.55; color: var(--ink-body); font-weight: 400;
  border-left: 3px solid var(--green); padding-left: 22px;
}
.section--deep .lede { color: #DCE4F0; }

/* Variantes de couleur pour repérer visuellement les paragraphes clés dans un
   texte long — sans recolorer le corps de texte lui-même, ce qui nuirait à la
   lecture. Le filet de couleur sert de repère de lecture, la teinte varie
   selon le rôle du paragraphe pour aider à distinguer les sections entre
   elles au premier coup d'œil. */
.p-accent {
  border-left: 3px solid var(--blue); padding-left: 22px; color: var(--ink-body);
}
.p-accent--teal { border-left-color: var(--teal); }
.p-accent--green { border-left-color: var(--green); }
.p-accent--gold { border-left-color: var(--kanu-gold); }
.section--deep .p-accent, .section--deep .p-accent--teal,
.section--deep .p-accent--green, .section--deep .p-accent--gold { color: #DCE4F0; }

.muted { color: var(--ink-muted); }
.section--deep .muted { color: #9FADC6; }
.small { font-size: .875rem; }
.mono { font-family: var(--font-mono); }

/* ---------- 5. Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px; border: 1px solid transparent; border-radius: var(--r-sm);
  font-size: .94rem; font-weight: 500; cursor: pointer; text-align: center;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease),
              transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--blue); color: #FFFFFF; border-color: var(--blue); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--blue-deep); border-color: var(--blue-deep); box-shadow: var(--shadow-md); }
.btn--outline { background: var(--surface); color: var(--blue); border-color: var(--border-strong); }
.btn--outline:hover { border-color: var(--blue); background: var(--blue-wash); }
.btn--ghost { background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,.35); }
.btn--ghost:hover { border-color: #FFFFFF; background: rgba(255,255,255,.08); }
.btn--sm { padding: 10px 20px; font-size: .86rem; }
.btn--block { width: 100%; }

.link {
  display: inline-flex; align-items: center; gap: 9px; font-size: .94rem; font-weight: 500;
  color: var(--blue); background: none; border: 0; padding: 0; cursor: pointer;
  transition: color .2s var(--ease);
}
.link span { transition: transform .25s var(--ease); }
.link:hover { color: var(--blue-bright); }
.link:hover span { transform: translateX(4px); }
.link--plain { color: var(--ink-body); }
.section--deep .link { color: var(--green-light); }
.section--deep .link:hover { color: #FFFFFF; }

/* ---------- 6. Bandeau et en-tête ---------- */
.topbar { background: var(--surface-soft); border-bottom: 1px solid var(--border); color: var(--ink-muted); font-size: .78rem; font-family: var(--font-mono); }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; height: 40px; }
.topbar a:hover { color: var(--blue); }
.topbar-list { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.topbar-list li { margin: 0; }
.topbar-right { display: flex; align-items: center; gap: 18px; }

.site-header {
  position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.88);
  backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--border);
  transition: box-shadow .3s var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); }
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: var(--header-h); flex-wrap: nowrap; min-width: 0;
  max-width: 1440px;   /* l'en-tete respire au-dela de la grille de contenu */
}

.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand__logo { height: 34px; width: auto; flex-shrink: 0; }
.brand picture, .footer-brand picture { display: contents; }   /* le picture ne doit pas casser l'alignement flex */
/* Volontairement PAS de display:contents sur les pictures en contexte grille
   (.kanu-promo, .kanu-hero__grid) : l'interaction avec le placement
   automatique de CSS Grid est peu fiable. La balise picture s'y comporte
   comme une boîte normale, ce qui suffit et reste robuste. */

.nav { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; min-width: 0; list-style: none; margin: 0; padding: 0; }
.nav > li { position: relative; margin: 0; flex-shrink: 0; }
.nav ul { list-style: none; }
.nav__link {
  display: flex; align-items: center; gap: 6px; white-space: nowrap; padding: 9px 12px;
  border-radius: var(--r-sm); font-size: .875rem; font-weight: 500; color: var(--ink-body);
  transition: color .18s, background .18s;
}
.nav__link:hover { color: var(--blue); background: var(--surface-soft); }
.nav__link[aria-current="page"] { color: var(--blue); font-weight: 600; }
.nav__caret { width: 9px; height: 9px; transition: transform .25s var(--ease); }
.nav > li:hover .nav__caret, .nav > li.is-open .nav__caret { transform: rotate(180deg); }

.dropdown {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 310px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: var(--shadow-lg); padding: 8px; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.nav > li:hover .dropdown, .nav > li.is-open .dropdown, .dropdown:focus-within { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown li { margin: 0; }
.dropdown a { display: block; padding: 11px 14px; border-radius: var(--r-sm); transition: background .18s; }
.dropdown a:hover { background: var(--blue-wash); }
.dropdown strong { display: block; font-size: .9rem; font-weight: 600; color: var(--ink); }
.dropdown small { color: var(--ink-muted); font-size: .78rem; }

.header-cta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.header-cta .btn { white-space: nowrap; }
.nav-toggle {
  display: none; width: 42px; height: 42px; border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface); cursor: pointer; align-items: center; justify-content: center;
}
.nav-toggle span { display: block; width: 18px; height: 1.5px; background: var(--ink); position: relative; border-radius: 2px; }
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--ink); border-radius: 2px; transition: transform .25s var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

.read-progress { position: absolute; bottom: -1px; left: 0; height: 2px; background: var(--green); width: 0; }

/* ---------- 7. Hero clair ---------- */
.hero { position: relative; background: var(--surface); overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--border); }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(1100px 620px at 88% 8%, rgba(30,95,168,.07), transparent 62%),
    radial-gradient(760px 520px at 4% 96%, rgba(176,138,62,.06), transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, #F8FAFD 100%);
}
.hero__axes { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: .28; }
.hero__inner {
  padding-block: clamp(88px, 11vw, 156px); position: relative;
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr);
  gap: clamp(48px, 7vw, 104px); align-items: center;
}
.hero__text { min-width: 0; }
.hero h1 { max-width: 13ch; }
.hero h1 em { font-style: normal; color: var(--blue); }
.hero__lede { font-size: clamp(1.1rem, .95rem + .6vw, 1.34rem); color: var(--ink-body); max-width: 54ch; margin-top: 26px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }

/* Panneau institutionnel — occupe la colonne droite du hero */
.hero__panel {
  background: rgba(255,255,255,.72); backdrop-filter: blur(6px);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 34px 32px; box-shadow: var(--shadow-md);
}
.hero__panel-title {
  font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--ink-muted); margin: 0 0 22px;
  padding-bottom: 16px; border-bottom: 1px solid var(--border);
}
.hero__panel dl { margin: 0; display: grid; gap: 20px; }
.hero__panel dt { font-family: var(--font-mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .11em; color: var(--ink-muted); margin-bottom: 5px; }
.hero__panel dd { margin: 0; font-family: var(--font-serif); font-size: 1.12rem; color: var(--ink); line-height: 1.3; }
.hero__panel-foot { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--border); font-size: .78rem; color: var(--ink-muted); }

/* Bandeau de repères */
.hero-strip { border-top: 1px solid var(--border); background: var(--surface-soft); }
.hero-strip .wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.hero-strip__item { padding: 28px 32px 28px 0; border-right: 1px solid var(--border); }
.hero-strip__item:last-child { border-right: 0; }
.hero-strip dt { font-family: var(--font-mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-muted); margin-bottom: 9px; }
.hero-strip dd { margin: 0; font-family: var(--font-serif); font-size: 1.08rem; color: var(--ink); line-height: 1.35; }

/* En-tête de page interne */
.page-hero { position: relative; background: var(--surface-soft); border-bottom: 1px solid var(--border); overflow: hidden; }
.page-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(900px 420px at 92% 0%, rgba(30,95,168,.07), transparent 62%);
}
.page-hero .wrap { padding-block: clamp(60px, 7vw, 96px); max-width: 900px; position: relative; }
.page-hero p { color: var(--ink-body); margin-bottom: 0; font-size: var(--step-3); max-width: 62ch; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 26px; font-family: var(--font-mono); font-size: .74rem; color: var(--ink-muted); }
.breadcrumb li { margin: 0; }
.breadcrumb a:hover { color: var(--blue); }
.breadcrumb li + li::before { content: "/"; margin-right: 8px; color: var(--border-strong); }

/* ---------- 8. Cartes ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 34px 32px; display: flex; flex-direction: column;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card__index { font-family: var(--font-mono); font-size: .76rem; color: var(--green-ink); margin-bottom: 18px; letter-spacing: .1em; }
.card h3 { font-size: 1.32rem; margin-bottom: .5em; }
.card p { color: var(--ink-muted); font-size: .96rem; margin-bottom: 0; }
.card .link { margin-top: 22px; align-self: flex-start; }
.card--pad-lg { padding: 38px 36px; }
.card--panel { background: var(--surface-soft); border-color: var(--border); }
.card--panel:hover { transform: none; box-shadow: none; }
.card--flat:hover { transform: none; box-shadow: none; border-color: var(--border); }

/* Grille des pôles */
.pole-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pole-grid > * {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 32px 28px; display: flex; flex-direction: column; position: relative; overflow: hidden;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.pole-grid > *::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.pole-grid > *:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.pole-grid > *:hover::before { transform: scaleX(1); }
.pole-grid h3 { font-size: 1.24rem; }
.pole-grid p { color: var(--ink-muted); font-size: .93rem; margin-bottom: 0; }
.pole-grid .link { margin-top: auto; padding-top: 22px; align-self: flex-start; }

/* Barre d'ancres */
.anchor-bar { display: grid; gap: 12px; }
.anchor-bar--4 { grid-template-columns: repeat(4, 1fr); }
.anchor-bar--5 { grid-template-columns: repeat(5, 1fr); }
.anchor-bar a {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 18px 20px; font-size: .88rem; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; gap: 10px; transition: border-color .2s, background .2s, transform .2s;
}
.anchor-bar a:hover { border-color: var(--blue); background: var(--blue-wash); transform: translateY(-2px); }
.anchor-bar .idx { font-family: var(--font-mono); font-size: .72rem; color: var(--green-ink); font-weight: 400; }
.anchor-bar--stack { margin-top: 12px; }

/* ---------- 9. Listes ---------- */
.service-list { list-style: none; padding: 0; margin: 0; }
.service-list li {
  padding: 24px 0; border-top: 1px solid var(--border);
  display: grid; grid-template-columns: 20px 1fr; column-gap: 18px; row-gap: 5px;
}
.service-list li:last-child { border-bottom: 1px solid var(--border); }
/* La puce occupe la premiere colonne ; TOUT le texte occupe la seconde.
   Sans cette regle, le second element textuel retombe dans la colonne
   de 20 px et le texte s'affiche a raison d'un mot par ligne. */
.service-list li > * { grid-column: 2; }
.service-list li::before {
  content: ""; grid-column: 1; grid-row: 1;
  width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-top: .55em;
}
.service-list strong { display: block; color: var(--ink); margin-bottom: 4px; }
.service-list span { color: var(--ink-muted); font-size: .94rem; }
.section--deep .service-list li { border-color: rgba(255,255,255,.13); }
.section--deep .service-list strong { color: #FFFFFF; }
.section--deep .service-list span { color: #9FADC6; }

.principles { counter-reset: principle; }
.principle { counter-increment: principle; padding: 32px 0; border-top: 1px solid var(--border); }
.principles .principle:last-child { border-bottom: 1px solid var(--border); }
.principle__num { font-family: var(--font-mono); font-size: .78rem; color: var(--green-ink); }
.principle__num::before { content: "0" counter(principle); }
.principle h3 { margin-top: 10px; font-size: 1.28rem; }
.principle p { color: var(--ink-muted); margin-bottom: 0; }

/* ---------- 10. Repères chiffrés ---------- */
.figures { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.figure { padding: 32px 30px; border-left: 1px solid var(--border); }
.figure:first-child { border-left: 0; padding-left: 0; }
.figure dt { font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted); margin-bottom: 10px; }
.figure dd { margin: 0; font-family: var(--font-serif); font-size: 1.18rem; color: var(--ink); line-height: 1.35; }

/* ---------- 11. Visualisations ---------- */
.chart-block { border: 1px solid var(--border); border-radius: var(--r); padding: 34px 32px; background: var(--surface); }
.chart-block__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 30px; flex-wrap: wrap; }
.chart-block__title { font-family: var(--font-sans); font-size: 1.02rem; font-weight: 600; color: var(--ink); margin: 0 0 6px; }
.chart-block__sub { font-family: var(--font-mono); font-size: .71rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .08em; margin: 0; }
.chart-block__note { font-size: .82rem; color: var(--ink-muted); margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--border); max-width: none; }
.chart-legend { display: flex; gap: 18px; flex-wrap: wrap; font-family: var(--font-mono); font-size: .71rem; color: var(--ink-muted); }
.chart-legend span { display: inline-flex; align-items: center; gap: 7px; }
.chart-legend i { width: 14px; height: 3px; display: block; border-radius: 2px; }
.legend-blue { background: var(--blue); }
.legend-teal { background: var(--teal); }

.bar-chart { display: grid; gap: 20px; }
.bar-row { display: grid; grid-template-columns: 200px 1fr 66px; gap: 20px; align-items: center; }
.bar-row__label { font-size: .9rem; color: var(--ink-body); }
.bar-row__track { height: 10px; background: var(--surface-tint); border-radius: 99px; position: relative; overflow: hidden; }
.bar-row__fill { height: 100%; background: var(--blue); border-radius: 99px; display: block; }
.js .bar-row__fill { width: 0; transition: width .95s var(--ease); }
.bar-row__fill--alt { background: var(--teal); }
.bar-row__fill--accent { background: var(--green); }
.bar-row__val { font-family: var(--font-mono); font-size: .84rem; color: var(--ink); text-align: right; font-weight: 500; }

/* Largeurs de repli — le graphique reste lisible sans JavaScript */
.w-12{width:12%} .w-30{width:30%} .w-41{width:41%} .w-52{width:52%} .w-57{width:57%}
.w-58{width:58%} .w-64{width:64%} .w-82{width:82%} .w-95{width:95%}

/* ---------- 12. Matrice clientèle ---------- */
.matrix { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 660px; }
.matrix th, .matrix td { padding: 18px 20px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.matrix thead th { background: var(--surface-soft); font-family: var(--font-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink); font-weight: 500; }
.matrix tbody tr:last-child td { border-bottom: 0; }
.matrix tbody tr { transition: background .18s; }
.matrix tbody tr:hover { background: var(--blue-wash); }
.matrix td:first-child { font-weight: 600; color: var(--ink); }
.matrix td:last-child { white-space: nowrap; }   /* les étiquettes de pôle ne doivent jamais se replier au milieu d'une cellule */
.pole-tag {
  display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 24px; padding: 0 8px;
  font-family: var(--font-mono); font-size: .72rem; color: var(--blue); background: var(--blue-wash);
  border-radius: 4px; margin-right: 5px;
}

/* ---------- 13. Différenciation ---------- */
.diff-list { counter-reset: diff; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.diff-item {
  counter-increment: diff; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 30px 28px; display: grid; grid-template-columns: 46px 1fr; gap: 20px;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.diff-item:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.diff-item__num {
  font-family: var(--font-mono); font-size: .78rem; color: var(--green-deep);
  width: 40px; height: 40px; border-radius: 50%; background: var(--green-wash);
  display: grid; place-items: center;
}
.diff-item__num::before { content: "0" counter(diff); }
.diff-item h3 { font-size: 1.16rem; margin-bottom: .45em; }
.diff-item p { color: var(--ink-muted); margin-bottom: 0; font-size: .94rem; }

/* ---------- 14. Chronologie ---------- */
.timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.timeline__step {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 26px 24px; position: relative; transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.timeline__step:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.timeline__step h3 { font-size: .98rem; margin-bottom: 9px; }
.timeline__step p { font-size: .86rem; color: var(--ink-muted); margin: 0; }
.timeline__phase { font-family: var(--font-mono); font-size: .67rem; color: var(--green-ink); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 14px; display: block; }
.timeline__step::after {
  content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 3px;
  background: var(--blue); border-radius: var(--r) var(--r) 0 0;
}
.js .timeline__step::after { transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.js .timeline__step.is-in::after { transform: scaleX(1); }

/* ---------- 15. Questions et références ---------- */
.qa-list { list-style: none; padding: 0; margin: 0; }
.qa-list li {
  padding: 18px 22px 18px 50px; background: var(--surface-soft); border: 1px solid var(--border);
  border-radius: var(--r-sm); margin-bottom: 12px; color: var(--ink-body); font-size: .95rem; position: relative;
}
.qa-list li::before {
  content: "?"; position: absolute; left: 18px; top: 17px; width: 22px; height: 22px;
  background: var(--green-wash); color: var(--green-deep); border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-serif); font-weight: 600; font-size: .85rem;
}

.reference { border: 1px solid var(--border); border-left: 3px solid var(--green); border-radius: var(--r-sm); padding: 26px 28px; background: var(--surface-soft); }
.reference__meta { font-family: var(--font-mono); font-size: .71rem; text-transform: uppercase; letter-spacing: .08em; color: var(--teal); margin-bottom: 12px; }
.reference p { margin-bottom: 0; font-size: .95rem; color: var(--ink-body); }

/* ---------- 16. Publications ---------- */
.pub {
  border: 1px solid var(--border); border-radius: var(--r); padding: 28px 30px; margin-bottom: 14px;
  display: grid; grid-template-columns: 140px 1fr auto; gap: 28px; align-items: center;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.pub:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.pub__meta { font-family: var(--font-mono); font-size: .73rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .06em; }
.pub h3 { font-size: 1.18rem; margin-bottom: .35em; }
.pub p { color: var(--ink-muted); font-size: .92rem; margin-bottom: 0; }
.pub__tag {
  display: inline-block; font-family: var(--font-mono); font-size: .67rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--teal); background: #E7F3F1; border-radius: 99px; padding: 5px 11px; margin-bottom: 11px;
}

/* ---------- 17. Formulaires ---------- */
.form { display: grid; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: .83rem; font-weight: 500; color: var(--ink); }
.field label .req { color: var(--danger); }
.field input, .field select, .field textarea {
  padding: 13px 15px; border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface); font-size: .95rem; transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(30,95,168,.12);
}
.field textarea { resize: vertical; min-height: 130px; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--danger); }
.field__error { font-size: .78rem; color: var(--danger); display: none; }
.field.has-error .field__error { display: block; }
.field__hint { font-size: .77rem; color: var(--ink-muted); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.form__feedback { display: none; padding: 15px 18px; border-radius: var(--r-sm); font-size: .89rem; border: 1px solid; }
.form__feedback.is-visible { display: block; }
.form__feedback[data-state="ok"] { background: #EDF5F0; border-color: var(--success); color: var(--success); }
.form__feedback[data-state="ko"] { background: #FBEDEB; border-color: var(--danger); color: var(--danger); }
.form__note { font-size: .8rem; color: var(--ink-muted); margin: 0; }

/* ---------- 18. Bandeaux ---------- */
.cta-band {
  background: var(--surface-deep); color: #C3CEE0; padding: clamp(52px, 6.5vw, 80px);
  text-align: center; border-radius: var(--r-lg); position: relative; overflow: hidden;
}
.cta-band::after {
  content: ""; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px;
  border-radius: 50%; border: 1px solid rgba(129,188,69,.28); box-shadow: 0 0 0 30px rgba(129,188,69,.06);
}
.cta-band h2 { color: #FFFFFF; position: relative; }
.cta-band p { color: #9FADC6; max-width: 54ch; margin-inline: auto; position: relative; }
.cta-band .hero__actions { justify-content: center; margin-top: 32px; position: relative; }

.callout { border-left: 3px solid var(--green); background: var(--green-wash); padding: 22px 26px; font-size: .94rem; border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.callout p { max-width: none; }
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--ink); }
.callout--dark { background: rgba(255,255,255,.05); border-left-color: var(--green-light); }
.callout--dark p { color: #9FADC6; }
.callout--dark strong { color: #FFFFFF; }

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r); }
table { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 520px; }
th, td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--border); }
thead th { background: var(--surface-soft); font-family: var(--font-mono); font-size: .71rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink); font-weight: 500; }
tbody tr:last-child td { border-bottom: 0; }

/* ---------- 19. Gouvernance ---------- */
.governance-org { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.governance-org li { border: 1px solid var(--border); border-radius: var(--r); padding: 26px 28px; background: var(--surface); }
.governance-org h3 { font-size: 1.12rem; margin-bottom: .45em; }
.governance-org p { color: var(--ink-muted); font-size: .94rem; margin-bottom: 0; }

.leader {
  display: grid; grid-template-columns: 96px 1fr; column-gap: 22px; row-gap: 4px;
  padding: 24px 0; border-top: 1px solid var(--border);
}
.leader > *:not(.leader__photo) { grid-column: 2; }
.leader__photo { grid-column: 1; grid-row: 1 / -1; }
.leader:last-child { border-bottom: 1px solid var(--border); }
.leader__photo {
  width: 96px; height: 118px; background: var(--surface-tint); border: 1px dashed var(--border-strong);
  border-radius: var(--r-sm); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; overflow: hidden; color: var(--ink-muted);
}
.leader__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.leader__photo svg { width: 26px; height: 26px; opacity: .55; }
.leader__photo span { font-family: var(--font-mono); font-size: .58rem; text-transform: uppercase; letter-spacing: .05em; text-align: center; line-height: 1.3; padding: 0 6px; }
.leader h3 { margin-bottom: 2px; }
.leader__role { font-family: var(--font-mono); font-size: .73rem; color: var(--teal); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; display: block; }
.leader p { font-size: .9rem; color: var(--ink-muted); margin-bottom: 0; }
.leader--pending h3 { color: var(--ink-muted); font-style: italic; }

/* ---------- 20. Sécurité ---------- */
.sec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sec-item {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 30px 28px;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.sec-item:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.sec-item__icon {
  width: 42px; height: 42px; padding: 9px; color: var(--blue); background: var(--blue-wash);
  border-radius: var(--r-sm); margin-bottom: 20px;
}
.sec-item h3 { font-size: 1.05rem; font-family: var(--font-sans); font-weight: 600; margin-bottom: .5em; }
.sec-item p { font-size: .91rem; color: var(--ink-muted); margin: 0; }
.sec-item code { font-size: .79rem; }

.status-list { list-style: none; padding: 0; margin: 0; }
.status-list li { display: grid; grid-template-columns: 1fr auto; gap: 20px; padding: 17px 0; border-top: 1px solid var(--border); align-items: center; font-size: .94rem; }
.status-list li:last-child { border-bottom: 1px solid var(--border); }
.status { font-family: var(--font-mono); font-size: .71rem; text-transform: uppercase; letter-spacing: .07em; padding: 5px 12px; border-radius: 99px; white-space: nowrap; }
.status--active { color: var(--success); background: #EDF5F0; }
.status--pending { color: var(--green-deep); background: var(--green-wash); }

/* ---------- 21. Pied de page ---------- */
.site-footer { background: var(--surface-deep); color: #8D9AB4; font-size: .92rem; }
.footer-top { padding-block: clamp(56px, 6.5vw, 84px); border-bottom: 1px solid rgba(255,255,255,.09); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 44px; }
.site-footer .footer-title { color: #FFFFFF; font-family: var(--font-mono); font-size: .71rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 22px; font-weight: 500; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 12px; }
.site-footer a { transition: color .18s; }
.site-footer a:hover { color: #FFFFFF; }
.footer-brand .brand__logo { height: 40px; }
.footer-brand p { margin-top: 22px; font-size: .88rem; line-height: 1.7; max-width: 32ch; color: #8D9AB4; }
.footer-legal-block { padding-block: 28px; border-bottom: 1px solid rgba(255,255,255,.09); font-size: .78rem; color: #6E7B96; line-height: 1.75; }
.footer-legal-block strong { color: #A9B5CC; }
.footer-disclaimer { padding-block: 24px; font-size: .75rem; color: #5F6B85; line-height: 1.75; max-width: none; }
.footer-bottom { padding-block: 24px; font-size: .8rem; border-top: 1px solid rgba(255,255,255,.09); }
.footer-bottom .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; align-items: center; }
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 22px; }


/* ---------- 22. Utilitaires ---------- */
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--blue);
  color: #FFFFFF; padding: 11px 20px; border-radius: var(--r-sm); font-weight: 500; transition: top .2s;
}
.skip-link:focus { top: 16px; }

/* Révélation — conditionnée à la présence de JavaScript.
   Sans script, aucun élément n'est masqué. */
/* Aucune apparition au defilement : le contenu est visible immediatement,
   quel que soit l'etat du JavaScript. La classe .reveal est conservee dans
   le balisage mais n'a plus d'effet de masquage. */
.reveal { opacity: 1; transform: none; }

.fab--top {
  position: fixed; right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 90; width: 46px; height: 46px;
  border-radius: var(--r-sm); background: var(--blue); color: #FFFFFF; border: 0; cursor: pointer;
  display: grid; place-items: center; box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s, background .2s;
}
.fab--top:hover { background: var(--blue-deep); }
.fab--top.is-visible { opacity: 1; visibility: visible; }
.fab--top svg { width: 18px; height: 18px; }

.mt-0{margin-top:0} .mt-1{margin-top:12px} .mt-2{margin-top:26px} .mt-3{margin-top:36px} .mt-4{margin-top:48px}
.mb-0{margin-bottom:0} .mb-2{margin-bottom:26px} .mb-3{margin-bottom:36px}
.center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.sub-h { font-size: 1.06rem; font-family: var(--font-sans); font-weight: 600; color: var(--ink); margin-bottom: .6em; }
.u-underline { text-decoration: underline; }
.u-inherit { color: inherit; }
.u-w-full { width: 100%; }
.u-my-2 { margin: 26px 0; }

.contact-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 20px; }
.contact-list li { margin: 0; }
.contact-list strong { display: block; color: var(--ink); font-size: .84rem; margin-bottom: 3px; }
.contact-list a, .contact-list span.v { color: var(--ink-body); font-size: .93rem; }
.contact-list a:hover { color: var(--blue); }

/* ---------- 23. Adaptatif ---------- */
@media (max-width: 1300px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 1180px) {
  .topbar-list li:nth-child(3) { display: none; }
  .nav__link { padding: 9px 10px; font-size: .85rem; }
  .figures, .hero-strip .wrap { grid-template-columns: repeat(2, 1fr); }
  .figure:nth-child(3) { border-left: 0; padding-left: 0; }
  .hero-strip__item:nth-child(2) { border-right: 0; }
  .pole-grid, .sec-grid { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: repeat(3, 1fr); }
  .anchor-bar--5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1500px) {
  .header-cta [data-secondary] { display: none; }
}
@media (max-width: 1280px) {
  .hero__inner { grid-template-columns: 1fr; gap: 44px; }
  .hero__text { max-width: none; }
  .nav-toggle { display: flex; }
  /* backdrop-filter sur .site-header crée un nouveau bloc de confinement pour
     tout descendant en position:fixed (spécification CSS Filter Effects) :
     le panneau de menu mobile, fixed et cense couvrir tout l'ecran, se
     retrouvait ainsi positionne et redimensionne par rapport a la hauteur de
     l'en-tete (~70 px) au lieu du viewport — reduit a une bande de quelques
     dizaines de pixels, invisible en pratique. Corrige en desactivant l'effet
     de flou uniquement sous ce seuil, la ou le menu devient fixed. */
  .site-header { backdrop-filter: none; background: var(--surface); }
  .nav {
    position: fixed; inset: var(--header-h) 0 0 auto; width: min(380px, 90vw);
    background: var(--surface); border-left: 1px solid var(--border); flex-direction: column;
    align-items: stretch; gap: 0; padding: 20px; overflow-y: auto;
    transform: translateX(105%); transition: transform .3s var(--ease), visibility .3s;
    box-shadow: var(--shadow-lg); visibility: hidden;
  }
  .nav.is-open { transform: translateX(0); visibility: visible; }
  .nav__link { padding: 15px 12px; font-size: 1rem; border-bottom: 1px solid var(--border); border-radius: 0; justify-content: space-between; }
  .dropdown { position: static; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; padding: 0 0 0 14px; display: none; min-width: 0; }
  .nav > li.is-open .dropdown { display: block; }
  .header-cta .btn { display: none; }
  .split { grid-template-columns: 1fr; }
  .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .diff-list { grid-template-columns: 1fr; }
  .pub { grid-template-columns: 1fr; gap: 12px; }
  .topbar-list li:nth-child(2) { display: none; }
  .bar-row { grid-template-columns: 150px 1fr 58px; gap: 14px; }
}
@media (max-width: 720px) {
  :root { --header-h: 66px; }
  .wrap { padding-inline: 20px; }
  .grid-2, .grid-3, .grid-4, .pole-grid, .sec-grid { grid-template-columns: 1fr; }
  .figures, .hero-strip .wrap { grid-template-columns: 1fr; }
  .figure { border-left: 0; border-top: 1px solid var(--border); padding-left: 0; }
  .figure:first-child { border-top: 0; }
  .hero-strip__item { border-right: 0; border-bottom: 1px solid var(--border); padding-right: 0; }
  .hero-strip__item:last-child { border-bottom: 0; }
  .timeline, .anchor-bar--4, .anchor-bar--5 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .leader { grid-template-columns: 72px 1fr; }
  .leader__photo { width: 72px; height: 90px; }
  .diff-item { grid-template-columns: 40px 1fr; gap: 16px; }
  .bar-row { grid-template-columns: 1fr; gap: 7px; }
  .bar-row__val { text-align: left; }
  .btn { width: 100%; }
  .hero__actions .btn, .cta-band .btn { width: auto; }
  .section-head--split { flex-direction: column; align-items: flex-start; }
  .cta-band { border-radius: var(--r); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .js .timeline__step::after { transform: scaleX(1); }
}

@media print {
  .site-header, .topbar, .fab--top, .site-footer, .hero__axes { display: none !important; }
  body { color: #000; font-size: 11pt; background: #fff; }
  .section { padding-block: 16px; }
  .card, .pub, .sec-item, .timeline__step { box-shadow: none !important; border: 1px solid #ccc; }
}

/* ============================================================
   25. KANU — application portefeuille du groupe
   Le produit dispose de sa propre identité (teal + or) tout en
   restant hébergé dans le cadre institutionnel d'AXIS FINANCE.
   ============================================================ */

/* Bandeau produit dans le hero */
.kanu-hero { position: relative; background: var(--kanu-navy); color: #BFD4D4; overflow: hidden; }
.kanu-hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(900px 520px at 82% 10%, rgba(224,160,30,.16), transparent 60%),
    radial-gradient(700px 480px at 8% 90%, rgba(19,113,112,.30), transparent 62%);
}
.kanu-hero .wrap { position: relative; padding-block: clamp(64px, 8vw, 104px); }
.kanu-hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.kanu-hero h1, .kanu-hero h2 { color: #FFFFFF; }
.kanu-hero p { color: #BFD4D4; }
.kanu-hero .lede { border-left-color: var(--kanu-gold); }
.kanu-hero .eyebrow { color: var(--kanu-gold); }
.kanu-hero .eyebrow::before { background: var(--kanu-gold); }
.kanu-logo-lg { max-width: 340px; width: 100%; margin-inline: auto; }
.center picture { max-width: 340px; margin-inline: auto; }
.kanu-baseline {
  font-family: var(--font-mono); font-size: .78rem; text-transform: uppercase;
  letter-spacing: .18em; color: var(--kanu-gold); margin-top: 8px;
}

/* Grille des fonctions du portefeuille */
.kanu-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.kanu-feature {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 30px 28px; transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.kanu-feature:hover { border-color: var(--kanu-teal); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.kanu-feature__icon {
  width: 46px; height: 46px; padding: 11px; border-radius: var(--r-sm);
  background: var(--kanu-teal-wash); color: var(--kanu-teal); margin-bottom: 20px;
}
.kanu-feature h3 { font-family: var(--font-sans); font-size: 1.06rem; font-weight: 600; margin-bottom: .45em; }
.kanu-feature p { font-size: .92rem; color: var(--ink-muted); margin: 0; }
.kanu-feature__tag {
  display: inline-block; font-family: var(--font-mono); font-size: .64rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--kanu-gold-ink); background: var(--kanu-wash);
  padding: 4px 10px; border-radius: 99px; margin-bottom: 14px;
}

/* Boutons de téléchargement */
.store-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.store-btn {
  display: flex; align-items: center; gap: 14px; padding: 15px 20px;
  border: 1px solid var(--border-strong); border-radius: var(--r); background: var(--surface);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.store-btn:hover { border-color: var(--kanu-teal); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.store-btn svg { width: 26px; height: 26px; flex-shrink: 0; color: var(--ink); }
.store-btn__txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.store-btn__sur { font-family: var(--font-mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted); }
.store-btn__nom { font-size: .96rem; font-weight: 600; color: var(--ink); }
.store-btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }

/* Variante sur fond sombre */
.kanu-hero .store-btn { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); }
.kanu-hero .store-btn:hover { background: rgba(255,255,255,.11); border-color: var(--kanu-gold); }
.kanu-hero .store-btn svg, .kanu-hero .store-btn__nom { color: #FFFFFF; }
.kanu-hero .store-btn__sur { color: #9FB6B6; }

/* Encart USSD — essentiel sur téléphones simples */
.ussd {
  border: 1px solid var(--border); border-left: 3px solid var(--kanu-gold);
  border-radius: 0 var(--r) var(--r) 0; background: var(--kanu-wash); padding: 26px 28px;
}
.ussd__code {
  font-family: var(--font-mono); font-size: 1.5rem; font-weight: 500; color: var(--kanu-navy);
  display: block; margin: 10px 0 8px; letter-spacing: .02em;
}

@media (max-width: 1010px) {
  .kanu-hero__grid { grid-template-columns: 1fr; }
  .kanu-features, .store-grid { grid-template-columns: repeat(2, 1fr); }
  .kanu-promo { grid-template-columns: 120px 1fr; gap: 24px; }
  .kanu-promo > div { grid-column: 2; }
  .kanu-promo > .btn { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
}
@media (max-width: 720px) {
  .kanu-features, .store-grid { grid-template-columns: 1fr; }
  .kanu-promo { grid-template-columns: 1fr; text-align: left; }
  .kanu-promo picture, .kanu-promo > img, .kanu-promo > div, .kanu-promo > .btn { grid-column: 1; }
  .kanu-promo > div { grid-row: 2; } .kanu-promo > .btn { grid-row: 3; }
  .kanu-promo img { max-width: 120px; }
}

/* ============================================================
   26. Composants inspirés des parcours grand public
   (structure de page produit : bénéfices, preuves, tarifs, FAQ)
   ============================================================ */

/* Grille « bento » : cartes de tailles inégales, plus vivante qu'une grille régulière */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bento__item {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 34px 32px; display: flex; flex-direction: column; justify-content: space-between;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.bento__item:hover { border-color: var(--blue); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.bento__item--wide { grid-column: span 2; }
.bento__item--dark { background: var(--surface-deep); border-color: transparent; color: #BFD4D4; }
.bento__item--dark h3 { color: #FFFFFF; }
.bento__item--dark p { color: #A7C0C0; }
.bento__item--gold { background: var(--green-wash); border-color: #F0E4C6; }
.bento h3 { font-size: 1.34rem; margin-bottom: .45em; }
.bento p { color: var(--ink-muted); font-size: .96rem; margin-bottom: 0; }
.bento__item--dark p { color: #A7C0C0; }
.bento__list { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 11px; }
.bento__list li { display: flex; align-items: flex-start; gap: 11px; font-size: .93rem; margin: 0; }
.bento__list svg { width: 17px; height: 17px; color: var(--blue); flex-shrink: 0; margin-top: .2em; }
.bento__item--dark .bento__list svg { color: var(--green-light); }

/* Bloc de téléchargement avec code QR */
.dl-panel {
  display: grid; grid-template-columns: auto 1fr; gap: 34px; align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 34px 36px;
}
.dl-panel__qr { width: 148px; height: 148px; border: 1px solid var(--border); border-radius: var(--r); padding: 10px; background: #fff; }
.dl-panel h3 { font-size: 1.2rem; margin-bottom: .35em; }
.dl-panel p { font-size: .93rem; color: var(--ink-muted); margin-bottom: 18px; }

/* Tarifs */
.tarifs { width: 100%; border-collapse: collapse; font-size: .94rem; min-width: 520px; }
.tarifs th, .tarifs td { padding: 16px 20px; border-bottom: 1px solid var(--border); text-align: left; }
.tarifs thead th { background: var(--surface-soft); font-family: var(--font-mono); font-size: .71rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--ink); font-weight: 500; }
.tarifs td:last-child { text-align: right; font-family: var(--font-mono); font-weight: 500; color: var(--ink); white-space: nowrap; }
.tarifs .gratuit { color: var(--blue); }
.tarifs tbody tr:last-child td { border-bottom: 0; }

/* FAQ dépliante — sans JavaScript, par <details> natif */
.faq { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  cursor: pointer; padding: 22px 44px 22px 0; position: relative; list-style: none;
  font-family: var(--font-sans); font-size: 1.04rem; font-weight: 600; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 11px; height: 11px;
  border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue);
  transform: translateY(-70%) rotate(45deg); transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq summary:hover { color: var(--blue); }
.faq__a { padding: 0 44px 24px 0; color: var(--ink-muted); font-size: .96rem; }
.faq__a p { margin-bottom: 0; max-width: 70ch; }

/* Avis clients */
.avis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.avis__carte { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 28px 26px; }
.avis__note { display: flex; gap: 3px; margin-bottom: 14px; }
.avis__note svg { width: 15px; height: 15px; color: var(--green); }
.avis__carte h3 { font-size: 1rem; margin-bottom: .5em; }
.avis__carte p { font-size: .93rem; color: var(--ink-muted); margin-bottom: 18px; }
.avis__pers { display: flex; align-items: center; gap: 12px; font-size: .88rem; }
.avis__init {
  width: 38px; height: 38px; border-radius: 50%; background: var(--blue-wash); color: var(--blue);
  display: grid; place-items: center; font-weight: 600; font-size: .82rem; flex-shrink: 0;
}

/* Bandeau de chiffres produit */
.stats-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat-item { text-align: center; padding: 26px 20px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
.stat-item dt { font-family: var(--font-serif); font-size: 2rem; color: var(--blue); line-height: 1; margin-bottom: 8px; }
.stat-item dd { margin: 0; font-size: .86rem; color: var(--ink-muted); }

@media (max-width: 1010px) {
  .bento, .avis { grid-template-columns: repeat(2, 1fr); }
  .bento__item--wide { grid-column: span 2; }
  .stats-band { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .bento, .avis, .stats-band { grid-template-columns: 1fr; }
  .bento__item--wide { grid-column: span 1; }
  .dl-panel { grid-template-columns: 1fr; gap: 24px; justify-items: center; text-align: center; }
}

/* ============================================================
   27. Vitrine KANU sur l'accueil
   Section de promotion du premier produit du groupe : visuel de
   marque, fonctions clés, téléchargement direct sans quitter la page.

   Note technique : la balise <picture> n'est ici jamais placée en
   enfant direct d'un conteneur CSS Grid (elle est toujours enveloppée
   dans un <div>), pour éviter l'anomalie de placement rencontrée
   précédemment avec display:contents en contexte grille.
   ============================================================ */
.kanu-vitrine {
  display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(36px, 5vw, 72px); align-items: center;
  background: var(--kanu-navy); border-radius: var(--r-lg); padding: clamp(32px, 4vw, 48px);
  position: relative; overflow: hidden; color: #BFD4D4;
}
.kanu-vitrine::after {
  content: ""; position: absolute; right: -90px; top: -90px; width: 320px; height: 320px;
  border-radius: 50%; border: 1px solid rgba(224,160,30,.20);
}
.kanu-vitrine__visual { position: relative; }
.kanu-vitrine__visual picture { display: block; }
.kanu-vitrine__visual img { border-radius: var(--r); width: 100%; height: auto; box-shadow: var(--shadow-lg); }

.kanu-vitrine__body { position: relative; }
.kanu-vitrine__body .eyebrow { color: var(--green-light); }
.kanu-vitrine__body h2, .kanu-vitrine__body h3 { color: #FFFFFF; }
.kanu-vitrine__body p { color: #A7C0C0; }

.kanu-vitrine__features { list-style: none; padding: 0; margin: 24px 0 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.kanu-vitrine__features li {
  display: flex; align-items: center; gap: 9px; margin: 0; font-size: .86rem; font-weight: 500; color: #E4EDED;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 99px; padding: 9px 14px;
}
.kanu-vitrine__features svg { width: 15px; height: 15px; color: var(--green-light); flex-shrink: 0; }

.kanu-vitrine__dl {
  border-top: 1px solid rgba(255,255,255,.14); padding-top: 26px; margin-top: 4px;
}
.kanu-vitrine__dl-label {
  font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--green-light); margin: 0 0 14px;
}
.kanu-vitrine__stores { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.kanu-vitrine__stores .store-btn { padding: 11px 18px; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); }
.kanu-vitrine__stores .store-btn:hover { background: rgba(255,255,255,.12); border-color: var(--green); }
.kanu-vitrine__stores .store-btn svg, .kanu-vitrine__stores .store-btn__nom { color: #FFFFFF; }
.kanu-vitrine__stores .store-btn__sur { color: #8FADAD; }
.kanu-vitrine__more { font-size: .87rem; color: #9FC3C3; }
.kanu-vitrine__more:hover { color: #FFFFFF; }

@media (max-width: 1010px) {
  .kanu-vitrine { grid-template-columns: 1fr; }
  .kanu-vitrine__visual { max-width: 380px; margin-inline: auto; }
}
@media (max-width: 640px) {
  .kanu-vitrine__features { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   28. Badge de confiance réciproque — « Un produit d'AXIS FINANCE »
   KANU renvoie systématiquement vers AXIS FINANCE ; ce badge fait
   le chemin inverse, visible dès le premier regard sur les deux
   points d'entrée du produit (page KANU et vitrine d'accueil),
   plutôt que relégué en bas de page dans la section Sécurité.
   ============================================================ */
.trust-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 16px 7px 7px; border-radius: 99px;
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06);
  font-size: .84rem; color: #E4EDED; margin-bottom: 22px;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.trust-badge:hover { border-color: var(--green-light); background: rgba(255,255,255,.1); }
.trust-badge__mark {
  width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF;
  display: grid; place-items: center; flex-shrink: 0; overflow: hidden;
}
.trust-badge__mark img { width: 17px; height: 17px; object-fit: contain; }
.trust-badge strong { color: #FFFFFF; font-weight: 600; }

/* ============================================================
   29. Bouton flottant de téléchargement KANU
   Visible sur tout le site (sauf sur kanu.html, déjà riche en
   appels à l'action) pour que le produit reste trouvable en un
   coup d'œil depuis n'importe quelle page, sans avoir à ouvrir
   le menu ou faire défiler jusqu'à la vitrine d'accueil.
   ============================================================ */
.kanu-fab {
  position: fixed; left: max(24px, env(safe-area-inset-left)); bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 90;
  display: inline-flex; align-items: center; gap: 11px;
  background: var(--kanu-navy); color: #FFFFFF; border-radius: 99px;
  padding: 10px 20px 10px 10px; box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,.14); font-size: .87rem; font-weight: 600;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.kanu-fab:hover { transform: translateY(-2px); background: #0A2836; box-shadow: 0 10px 28px rgba(0,0,0,.28); }
.kanu-fab__icon {
  width: 32px; height: 32px; border-radius: 50%; background: #FFFFFF;
  display: grid; place-items: center; flex-shrink: 0; overflow: hidden;
}
.kanu-fab__icon img { width: 19px; height: 19px; object-fit: contain; }

@media (max-width: 640px) {
  /* Réduit à une simple pastille ronde : moins de surface couvrant le texte
     qui défile derrière, et alignée sur les tailles de cible tactile usuelles
     (44 px minimum) sans les dépasser inutilement. */
  .kanu-fab {
    left: max(14px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom));
    padding: 0; gap: 0; width: 46px; height: 46px; justify-content: center;
  }
  .kanu-fab__icon { width: 46px; height: 46px; }
  .kanu-fab__icon img { width: 22px; height: 22px; }
  .kanu-fab__label { display: none; }
  /* Sous ce seuil, le bouton retour en haut se déplace pour ne jamais
     se superposer au bouton KANU (les deux seraient sinon côte à côte
     sur une largeur d'écran réduite). */
  .fab--top { width: 44px; height: 44px; }
}

/* Lien reseau social discret dans une fiche dirigeant */
.leader__links { display: flex; gap: 8px; margin-top: 10px; }
.leader__links a {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border-strong);
  display: grid; place-items: center; color: var(--ink-muted); transition: border-color .2s, color .2s;
}
.leader__links a:hover { border-color: var(--blue); color: var(--blue); }
.leader__links svg { width: 13px; height: 13px; }

/* Liste nue generique — utilisee pour envelopper des composants deja stylises
   (fiches dirigeants, etc.) sans style en attribut, incompatible avec la CSP. */
.list-bare { list-style: none; padding: 0; margin: 0; }