/* ==========================================================================
   MYADVAI — Système graphique officiel
   Prolonge la direction artistique du PDF de présentation :
   fonds clairs blanc-bleuté + sections bleu nuit, dégradé signature
   cyan → magenta, formes organiques arrondies, anneaux dégradés.
   ========================================================================== */

/* ---------- Polices auto-hébergées (conformité RGPD/CNIL) ---------- */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  /* Palette Myadvai (PDF + brief) */
  --cyan: #00c2ff;
  --cyan-soft: #7fe3ff;
  --magenta: #c93dff;
  --violet: #7a5cff;
  --navy: #0b1f5c;          /* titres / texte fort sur fond clair */
  --ink: #23305c;           /* corps de texte sur fond clair */
  --ink-soft: #4c5a85;      /* texte secondaire sur fond clair */
  --night: #1a1a2e;         /* bleu nuit du brief */
  --night-deep: #12122b;
  --night-soft: #232447;
  --bg-light: #f5f8fb;
  --bg-white: #ffffff;
  --line-light: #dde6f2;
  --line-dark: rgba(127, 227, 255, 0.14);
  --on-dark: #f4f7ff;
  --on-dark-soft: #b8c2e6;

  /* Dégradé signature */
  --grad: linear-gradient(120deg, var(--cyan) 0%, var(--violet) 55%, var(--magenta) 100%);
  --grad-soft: linear-gradient(120deg, rgba(0, 194, 255, 0.12), rgba(201, 61, 255, 0.12));

  /* Typo */
  --font-title: "Montserrat", "Avenir Next", "Segoe UI", sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Rythme */
  --radius: 20px;
  --radius-sm: 12px;
  --radius-lg: 28px;
  --container: 1180px;
  --section-y: clamp(4rem, 9vw, 7rem);
  --shadow-card: 0 10px 40px rgba(11, 31, 92, 0.08);
  --shadow-card-hover: 0 18px 60px rgba(11, 31, 92, 0.14);
  --header-h: 76px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset & base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg-white);
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1, h2, h3, h4 {
  font-family: var(--font-title);
  color: var(--navy);
  line-height: 1.18;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 800; }
h3 { font-size: clamp(1.15rem, 2vw, 1.35rem); font-weight: 700; }

p { margin: 0 0 1em; }
ul { padding-left: 1.2em; }
li { margin-bottom: 0.45em; }

a {
  color: var(--navy);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

strong { color: var(--navy); }

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

::selection {
  background: rgba(0, 194, 255, 0.28);
}

.container {
  width: min(var(--container), 100% - 2.5rem);
  margin-inline: auto;
}

/* Lien d'évitement (accessibilité) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--navy);
  color: #fff;
  padding: 0.8rem 1.4rem;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
  left: 0;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background 0.35s var(--ease-out), box-shadow 0.35s, backdrop-filter 0.35s;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Sur le hero sombre : transparent, logo blanc. Une fois scrollé : verre clair. */
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line-light), 0 8px 30px rgba(11, 31, 92, 0.06);
}

.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.brand img {
  height: 40px;
  width: auto;
}
.brand .logo-dark { display: none; }
.site-header.is-scrolled .logo-light { display: none; }
.site-header.is-scrolled .logo-dark { display: block; }

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2rem);
}
.main-nav a:not(.btn) {
  font-family: var(--font-title);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--on-dark);
  padding: 0.4rem 0.1rem;
  position: relative;
  white-space: nowrap;
}
.site-header.is-scrolled .main-nav a:not(.btn) {
  color: var(--navy);
}
.main-nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 3px;
  width: 100%;
  border-radius: 2px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}
.main-nav a:not(.btn):hover::after,
.main-nav a:not(.btn)[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Burger mobile */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.55rem;
  border-radius: var(--radius-sm);
  z-index: 130;
}
.nav-toggle .bar {
  display: block;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--on-dark);
  margin: 5px 0;
  transition: transform 0.3s var(--ease-out), opacity 0.2s, background 0.3s;
}
.site-header.is-scrolled .nav-toggle .bar {
  background: var(--navy);
}
/* Menu ouvert : la croix doit rester blanche, car le fond visible derriere
   elle n'est plus le header clair mais le menu sombre. Le selecteur est
   double volontairement : la regle .site-header.is-scrolled ci-dessus pese
   0-4-0 et l'emportait sur 0-3-0, ce qui donnait une croix bleu nuit sur
   fond bleu nuit (contraste mesure 1,19:1). Meme procede que pour les liens
   du menu plus bas. Corrige le 09/08/2026. */
.nav-toggle[aria-expanded="true"] .bar,
.site-header.is-scrolled .nav-toggle[aria-expanded="true"] .bar { background: var(--on-dark); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .main-nav {
    position: fixed;
    inset: 0;
    z-index: 120;
    flex-direction: column;
    /* "safe center" : tant que les liens tiennent, identique a "center".
       Des que le contenu depasse (telephone en paysage, viewport court),
       l'alignement retombe sur "start" au lieu de deborder symetriquement.
       Sans cela, la partie qui sortait par le haut etait inatteignable au
       defilement : le premier lien "Accueil" restait coupe et hors de portee.
       La declaration "center" au-dessus sert de repli pour les navigateurs
       qui ne connaissent pas le mot-cle "safe". Corrige le 09/08/2026. */
    justify-content: center;
    justify-content: safe center;
    padding-block: 1.25rem;
    gap: 1.6rem;
    background:
      radial-gradient(60rem 40rem at 15% 0%, rgba(0, 194, 255, 0.16), transparent 60%),
      radial-gradient(50rem 36rem at 90% 100%, rgba(201, 61, 255, 0.16), transparent 60%),
      var(--night-deep);
    transform: translateY(-102%);
    transition: transform 0.45s var(--ease-out);
    visibility: hidden;
    /* 100dvh suit la hauteur reelle du viewport mobile quand la barre
       d'outils du navigateur se retracte. inset: 0 reste le repli. */
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .main-nav.is-open {
    transform: translateY(0);
    visibility: visible;
  }
  /* Le header scrolle applique un backdrop-filter. Or filter et backdrop-filter
     creent un bloc conteneur pour les descendants en position: fixed : le menu
     plein ecran se retrouvait alors confine dans la hauteur du header (76 px)
     des que la page etait defilee. On neutralise l'effet le temps de
     l'ouverture. Bug remonte sur mobile le 08/08/2026. */
  .site-header.nav-open {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }
  .main-nav a:not(.btn),
  .site-header.is-scrolled .main-nav a:not(.btn) {
    color: var(--on-dark);
    font-size: 1.35rem;
  }
}

/* ==========================================================================
   BOUTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1;
  padding: 0.95rem 1.7rem;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), background 0.25s;
}
.btn-primary {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 8px 26px rgba(122, 92, 255, 0.38);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(122, 92, 255, 0.5);
}
.btn-ghost {
  background: transparent;
  color: var(--navy);
  box-shadow: inset 0 0 0 2px var(--line-light);
}
.btn-ghost:hover {
  box-shadow: inset 0 0 0 2px var(--cyan);
  transform: translateY(-2px);
}
.on-dark .btn-ghost,
.btn-ghost.btn-ghost-dark {
  color: var(--on-dark);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}
.on-dark .btn-ghost:hover,
.btn-ghost.btn-ghost-dark:hover {
  box-shadow: inset 0 0 0 2px var(--cyan);
}
.btn-lg {
  padding: 1.15rem 2.2rem;
  font-size: 1.05rem;
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section {
  padding-block: var(--section-y);
  position: relative;
}
/* --------------------------------------------------------------------------
   Fonds clairs « aurore »
   Les sections claires etaient en aplat uni. On y pose des nappes radiales
   tres diluees (11 a 17 %) dans les trois teintes de la charte. Trois
   compositions se relaient d'une section a l'autre : repetees a l'identique
   elles formeraient un motif, alors qu'en tournant elles donnent l'impression
   d'une lumiere qui se deplace au fil du defilement.
   Tout est en CSS : aucune image, aucun octet supplementaire.
   Les sections a photo de fond sont exclues, elles ont deja leur traitement.
   Ajoute le 13/08/2026.
   -------------------------------------------------------------------------- */
.section-light { background-color: var(--bg-light); }
.section-white { background-color: var(--bg-white); }

.section-light:not(.section-photo),
.section-white:not(.section-photo) {
  background-image:
    radial-gradient(58rem 40rem at 8% -12%, rgba(0, 194, 255, 0.16), transparent 62%),
    radial-gradient(50rem 36rem at 96% 16%, rgba(201, 61, 255, 0.13), transparent 64%),
    radial-gradient(44rem 32rem at 60% 110%, rgba(122, 92, 255, 0.12), transparent 62%);
}
section:nth-of-type(3n + 2).section-light:not(.section-photo),
section:nth-of-type(3n + 2).section-white:not(.section-photo) {
  background-image:
    radial-gradient(54rem 38rem at 92% -10%, rgba(0, 194, 255, 0.17), transparent 62%),
    radial-gradient(46rem 34rem at 4% 26%, rgba(201, 61, 255, 0.12), transparent 64%),
    radial-gradient(40rem 30rem at 38% 112%, rgba(122, 92, 255, 0.11), transparent 62%);
}
section:nth-of-type(3n).section-light:not(.section-photo),
section:nth-of-type(3n).section-white:not(.section-photo) {
  background-image:
    radial-gradient(50rem 36rem at 50% -14%, rgba(122, 92, 255, 0.15), transparent 62%),
    radial-gradient(46rem 32rem at 8% 58%, rgba(0, 194, 255, 0.13), transparent 64%),
    radial-gradient(44rem 32rem at 92% 98%, rgba(201, 61, 255, 0.12), transparent 62%);
}

/* --------------------------------------------------------------------------
   Sections a photo de fond
   Le voile global est volontairement tres leger (28 a 18 %) : la photo doit
   rester visible. La lisibilite n'est donc pas assuree par le voile mais la
   ou le texte se trouve reellement — halo blanc degrade sous le bloc de titre
   (voir plus bas), et cartes opaques pour le reste. L'image est choisie par
   media query selon la largeur d'ecran, pour ne pas envoyer 144 Ko a un
   telephone. Ajoute le 13/08/2026.
   -------------------------------------------------------------------------- */
.section-photo {
  background-image:
    /* 1. bande claire sur le haut de la section, la ou se trouve le bloc de
       titre pose directement sur la photo. Mesure faite de 320 a 1920 px : le
       titre occupe entre 4 % et 34 % de la hauteur de section, la bande couvre
       donc jusqu'a 36 % puis s'eteint. Integree au fond plutot qu'en element
       separe : pleine largeur par nature, aucun risque de debordement. */
    linear-gradient(to bottom,
      rgba(255, 255, 255, 0.78) 0%,
      rgba(255, 255, 255, 0.78) 36%,
      rgba(255, 255, 255, 0) 50%),
    /* 2. voile general tres leger : la photo doit rester visible. */
    linear-gradient(rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.18)),
    var(--fond);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.section-photo--modules   { --fond: url("../img/sections/fond-section-modules-v2-900.webp"); }
.section-photo--expertise { --fond: url("../img/sections/fond-section-expertise-900.webp"); }
@media (min-width: 901px) {
  .section-photo--modules   { --fond: url("../img/sections/fond-section-modules-v2-1280.webp"); }
  .section-photo--expertise { --fond: url("../img/sections/fond-section-expertise-1440.webp"); }
}
/* Le visuel Modules plafonne a 1536 px : c'est la taille native du fichier
   fourni. L'agrandir au-dela degraderait la nettete sans rien apporter. */
@media (min-width: 1281px) {
  .section-photo--modules   { --fond: url("../img/sections/fond-section-modules-v2-1536.webp"); }
}
@media (min-width: 1441px) {
  .section-photo--expertise { --fond: url("../img/sections/fond-section-expertise-1920.webp"); }
}

/* Le visuel Modules est plus sombre que celui d'Expertise (luminance moyenne
   0,135 contre 0,236), sa bande de titre est donc un peu plus soutenue. Les
   valeurs sont le reglage le plus leger encore confortable : mesure sur les
   lignes de texte reelles, pire contraste 6,02 pour un seuil de 4,5. Voile
   volontairement minimal pour que la photo reste bien visible. */
.section-photo--modules {
  background-image:
    linear-gradient(to bottom,
      rgba(255, 255, 255, 0.64) 0%,
      rgba(255, 255, 255, 0.62) 36%,
      rgba(255, 255, 255, 0) 52%),
    linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.14)),
    var(--fond);
}
/* Les cartes se detachent du fond photo : legerement translucides et floutees,
   comme dans la maquette. Elles ne contiennent aucun element en position fixed,
   le backdrop-filter est donc sans risque ici (cf. bug du menu du 08/08). */
.section-photo .card {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 44px rgba(11, 31, 92, 0.16);
}

.section-dark {
  background:
    radial-gradient(55rem 38rem at 82% -10%, rgba(201, 61, 255, 0.14), transparent 60%),
    radial-gradient(60rem 42rem at 8% 110%, rgba(0, 194, 255, 0.13), transparent 60%),
    linear-gradient(160deg, var(--night-deep) 0%, var(--night) 60%, #1d1d38 100%);
  color: var(--on-dark-soft);
}
.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark strong {
  color: var(--on-dark);
}
.section-dark a { color: var(--cyan-soft); }

.section-head {
  max-width: 780px;
  margin-bottom: clamp(2.2rem, 5vw, 3.6rem);
}
.section-head.center {
  margin-inline: auto;
  text-align: center;
}
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-title);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.kicker::before {
  content: "";
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--grad);
}
.section-head.center .kicker::after {
  content: "";
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--grad);
}
.lead {
  font-size: clamp(1.08rem, 1.6vw, 1.22rem);
  color: var(--ink-soft);
}
.section-dark .lead { color: var(--on-dark-soft); }

/* ==========================================================================
   HERO / SLIDER
   ========================================================================== */
.hero {
  position: relative;
  min-height: clamp(600px, 92svh, 860px);
  display: flex;
  align-items: stretch;
  background: var(--night-deep);
  color: var(--on-dark);
  overflow: hidden;
  isolation: isolate;
}
.hero-slides {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
}
/* Cadrage mobile. Les visuels sont en 16:9 alors que l'ecran d'un telephone
   est un portrait : seule une bande centrale d'environ 28 % de la largeur
   reste visible. Les sujets des diapositives 3 et 4 se trouvant a droite du
   cadre, ils disparaissaient. On decale le point de cadrage pour ces deux
   visuels uniquement. Sur ordinateur l'image est vue sur toute sa largeur,
   la regle n'y a donc aucun effet. Ajoute le 13/08/2026. */
@media (max-width: 900px) {
  .hero-slide:nth-child(3) img { object-position: 76% center; }
  .hero-slide:nth-child(4) img { object-position: 70% center; }
}
.hero-slide.is-active {
  opacity: 1;
}
.hero-slide.is-active img {
  animation: kenburns 9s var(--ease-out) forwards;
}
@keyframes kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.07); }
}

/* Voile bleu nuit : lisibilité + continuité de marque */
.hero-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(78deg, rgba(13, 14, 38, 0.92) 0%, rgba(18, 18, 43, 0.78) 38%, rgba(20, 22, 52, 0.42) 68%, rgba(22, 24, 58, 0.55) 100%),
    linear-gradient(to top, rgba(13, 14, 38, 0.85) 0%, transparent 34%);
}
.hero-veil::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(42rem 30rem at 88% 12%, rgba(201, 61, 255, 0.2), transparent 60%),
    radial-gradient(46rem 34rem at 4% 88%, rgba(0, 194, 255, 0.18), transparent 60%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(var(--header-h) + 2rem);
  padding-bottom: 7.5rem;
  position: relative;
}
.hero-content {
  max-width: 640px;
  display: grid;
}
.hero-copy {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease-out) 0.35s, transform 0.9s var(--ease-out) 0.35s, visibility 0s linear 1.25s;
  visibility: hidden;
  pointer-events: none;
}
.hero-copy.is-active {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: opacity 0.9s var(--ease-out) 0.35s, transform 0.9s var(--ease-out) 0.35s, visibility 0s linear 0s;
  pointer-events: auto;
}
.hero-copy .kicker {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--cyan-soft);
}
.hero-copy h1,
.hero-copy h2 {
  color: #fff;
  font-size: clamp(2.1rem, 4.8vw, 3.35rem);
  font-weight: 800;
  margin-bottom: 0.5em;
}
.hero-copy .grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-copy p {
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  color: var(--on-dark-soft);
  max-width: 54ch;
  margin-bottom: 1.8em;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

/* Contrôles du slider */
.hero-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2.2rem;
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
.hero-dots {
  display: flex;
  gap: 0.6rem;
}
.hero-dot {
  width: 42px;
  height: 30px;
  padding: 13px 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.hero-dot span {
  display: block;
  height: 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.28);
  overflow: hidden;
  position: relative;
}
.hero-dot.is-active span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad);
  transform-origin: left;
  animation: dotprogress var(--slide-ms, 8000ms) linear forwards;
}
@keyframes dotprogress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.hero-arrows {
  display: flex;
  gap: 0.55rem;
  margin-left: auto;
}
.hero-arrow {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  background: rgba(18, 18, 43, 0.35);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.25s, background 0.25s, transform 0.25s var(--ease-out);
}
.hero-arrow:hover {
  border-color: var(--cyan);
  background: rgba(0, 194, 255, 0.16);
  transform: translateY(-2px);
}
.hero-arrow svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   CARTES & COMPOSANTS
   ========================================================================== */
.card {
  background: var(--bg-white);
  border-radius: var(--radius);
  padding: 1.8rem 1.7rem;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(221, 230, 242, 0.8);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
  position: relative;
}
a.card { text-decoration: none; display: block; }
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
}

/* Filet dégradé supérieur (signature PDF) */
.card-grad-top::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1.4rem;
  right: 1.4rem;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: var(--grad);
}

/* Carte sur fond sombre */
.section-dark .card {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line-dark);
  box-shadow: none;
  backdrop-filter: blur(4px);
}
.section-dark .card:hover {
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
  border-color: rgba(127, 227, 255, 0.3);
}

/* Anneau numéroté dégradé (01–04, signature du PDF) */
.ring-num {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--navy);
  background:
    linear-gradient(var(--bg-white), var(--bg-white)) padding-box,
    var(--grad) border-box;
  border: 3px solid transparent;
  flex-shrink: 0;
}
.section-dark .ring-num {
  color: #fff;
  background:
    linear-gradient(var(--night-soft), var(--night-soft)) padding-box,
    var(--grad) border-box;
}

/* En-tête de carte module : icône + numéro */
.module-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

/* Icône en tête de carte simple */
.card-icon {
  margin-bottom: 1rem;
}

/* Parcours client : icône + numéro côte à côte, centrés */
.parcours-head {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
}

/* Pastilles d'icônes sur fonds sombres */
.section-dark .icon-chip {
  background: rgba(255, 255, 255, 0.08);
}

/* Icône pastille dégradée */
.icon-chip {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-soft);
  flex-shrink: 0;
}
.icon-chip svg {
  width: 26px;
  height: 26px;
}

/* Grilles */
.grid-2, .grid-3, .grid-4 {
  display: grid;
  gap: clamp(1.2rem, 2.4vw, 1.8rem);
}
/* Les enfants de grille doivent pouvoir rétrécir (tableaux défilants, textes longs) */
.grid-2 > *, .grid-3 > *, .grid-4 > *, .split > * {
  min-width: 0;
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* Liste à coches */
.check-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.check-list li {
  padding-left: 2.1rem;
  position: relative;
  margin-bottom: 0.85rem;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4 9-10"/></svg>') center / 62% no-repeat,
    var(--grad);
}

/* Statistiques / chiffres clés */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(1.2rem, 3vw, 2.5rem);
  text-align: center;
}
.stat-value {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: clamp(2rem, 4.4vw, 3rem);
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.1;
}
.stat-label {
  color: var(--on-dark-soft);
  font-size: 0.98rem;
  margin-top: 0.3rem;
}

/* ==========================================================================
   BANDEAU LOGOS CLIENTS (marquee)
   ========================================================================== */
.logo-marquee {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.logo-track {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 4vw, 3.5rem);
  width: max-content;
  animation: marquee 46s linear infinite;
  padding-block: 0.5rem;
}
.logo-marquee:hover .logo-track,
.logo-track:focus-within {
  animation-play-state: paused;
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}
.logo-chip {
  background: #fff;
  border: 1px solid var(--line-light);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 82px;
  min-width: 150px;
  box-shadow: 0 4px 18px rgba(11, 31, 92, 0.06);
}
.logo-chip img {
  max-height: 48px;
  max-width: 170px;
  width: auto;
  object-fit: contain;
}

/* Bandeau outils LLM */
.tools-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.6rem, 4vw, 3.2rem);
}
.tools-row img {
  height: 40px;
  width: auto;
  opacity: 0.92;
}

/* ==========================================================================
   TÉMOIGNAGES
   ========================================================================== */
.quote-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.quote-card blockquote {
  margin: 0 0 1.3rem;
  font-size: 1.04rem;
  line-height: 1.7;
  color: var(--ink);
  flex-grow: 1;
}
.quote-card blockquote::before {
  content: "";
  display: block;
  width: 34px;
  height: 26px;
  margin-bottom: 0.9rem;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 26"><path d="M0 26V14.6C0 6.9 4.6 1.6 12.4 0l2 4.4c-4.3 1.4-6.6 4-7 7.6H14V26H0zm20 0V14.6C20 6.9 24.6 1.6 32.4 0l2 4.4c-4.3 1.4-6.6 4-7 7.6H34V26H20z" fill="%2300c2ff" opacity="0.55"/></svg>') no-repeat;
}
.section-dark .quote-card blockquote {
  color: #e2e8ff;
}
.quote-author {
  border-top: 1px solid var(--line-light);
  padding-top: 1rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.section-dark .quote-author {
  border-top-color: rgba(255, 255, 255, 0.12);
}
.section-dark .quote-name { color: #fff; }
.section-dark .quote-role { color: var(--on-dark-soft); }
.quote-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 1.7rem;
  line-height: 0.4;
  padding-top: 0.55em;
  color: #fff;
  background: var(--grad);
}
.quote-name {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--navy);
}
.quote-role {
  font-size: 0.88rem;
  color: var(--ink-soft);
}

/* Carrousel témoignages */
.quotes-viewport {
  overflow: hidden;
}
.quotes-track {
  display: flex;
  gap: 1.5rem;
  transition: transform 0.6s var(--ease-out);
}
.quotes-track > * {
  flex: 0 0 calc((100% - 3rem) / 3);
}
@media (max-width: 980px) {
  .quotes-track > * { flex-basis: calc((100% - 1.5rem) / 2); }
}
@media (max-width: 640px) {
  .quotes-track > * { flex-basis: 100%; }
}
.quotes-nav {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 2rem;
}
.quotes-nav .hero-arrow {
  border-color: var(--line-light);
  background: #fff;
  color: var(--navy);
}
.quotes-nav .hero-arrow:hover {
  border-color: var(--cyan);
  background: rgba(0, 194, 255, 0.08);
}

/* ==========================================================================
   MÉTHODE (timeline 3 étapes)
   ========================================================================== */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem, 3vw, 2.2rem);
  counter-reset: step;
}
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; }
}
.step {
  position: relative;
  padding-top: 1.4rem;
}
.step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 3px;
  background: linear-gradient(to right, rgba(0, 194, 255, 0.25), rgba(201, 61, 255, 0.25));
}
.step .ring-num {
  margin-bottom: 1.1rem;
}

/* ==========================================================================
   COORDONNÉES
   ========================================================================== */
.contact-direct {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.contact-line {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 1.05rem;
}
.contact-line a { text-decoration: none; font-weight: 600; }
/* L'adresse email est un mot insecable : sur tres petit ecran (320 px),
   elle debordait de 9 px du viewport. On autorise la cesure en dernier
   recours plutot que de laisser filer un defilement horizontal.
   Corrige le 10/08/2026. */
.contact-line div { min-width: 0; }
.contact-line a { overflow-wrap: anywhere; }
.contact-line .icon-chip { width: 46px; height: 46px; border-radius: 14px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background:
    radial-gradient(50rem 30rem at 90% 0%, rgba(201, 61, 255, 0.1), transparent 55%),
    linear-gradient(180deg, var(--night-deep), #101024);
  color: var(--on-dark-soft);
  padding: 4rem 0 2rem;
  font-size: 0.97rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
@media (max-width: 820px) {
  .footer-grid { grid-template-columns: 1fr; }
}
.site-footer h4 {
  color: #fff;
  font-size: 1rem;
  margin-bottom: 1rem;
}
.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-footer li { margin-bottom: 0.6rem; }
.site-footer a {
  color: var(--on-dark-soft);
  text-decoration: none;
}
.site-footer a:hover { color: var(--cyan-soft); }
.footer-brand img { height: 44px; width: auto; aspect-ratio: 480 / 190; margin-bottom: 1rem; }
.footer-baseline {
  font-style: italic;
  color: var(--on-dark-soft);
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  padding-top: 1.6rem;
  font-size: 0.88rem;
  color: #7d87b4;
}

/* ==========================================================================
   CTA FINAL
   ========================================================================== */
.cta-banner {
  border-radius: var(--radius-lg);
  padding: clamp(2.4rem, 5vw, 4rem);
  text-align: center;
  background:
    radial-gradient(38rem 24rem at 12% 0%, rgba(0, 194, 255, 0.22), transparent 60%),
    radial-gradient(38rem 26rem at 90% 100%, rgba(201, 61, 255, 0.22), transparent 60%),
    linear-gradient(150deg, #171735, #1e1e40);
  color: var(--on-dark-soft);
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(120deg, rgba(0, 194, 255, 0.55), rgba(201, 61, 255, 0.4));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.cta-banner h2 { color: #fff; }
.cta-banner .lead { color: var(--on-dark-soft); }

/* ==========================================================================
   PAGES INTERNES
   ========================================================================== */
.page-hero {
  padding: calc(var(--header-h) + clamp(3rem, 7vw, 5.5rem)) 0 clamp(3rem, 6vw, 4.5rem);
  background:
    radial-gradient(46rem 30rem at 85% -20%, rgba(201, 61, 255, 0.16), transparent 60%),
    radial-gradient(50rem 34rem at 0% 120%, rgba(0, 194, 255, 0.14), transparent 60%),
    linear-gradient(160deg, var(--night-deep), var(--night) 70%, #1e1e3e);
  color: var(--on-dark-soft);
}
.page-hero h1 { color: #fff; }
.page-hero strong { color: #fff; }
.page-hero a:not(.btn) { color: var(--cyan-soft); }
.page-hero .lead { color: var(--on-dark-soft); max-width: 720px; }
.page-hero .kicker {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--cyan-soft);
}

/* Pages légales */
.prose {
  max-width: 780px;
}
.prose h2 { font-size: 1.45rem; margin-top: 2.2em; }
.prose h3 { font-size: 1.12rem; margin-top: 1.6em; }

/* Média arrondi signature */
.media-rounded {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card-hover);
  position: relative;
}
.media-rounded::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.25);
  pointer-events: none;
}

/* Duo texte + média */
.split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ANIMATIONS D'APPARITION
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Sans JS : tout doit rester visible */
.no-js .reveal {
  opacity: 1;
  transform: none;
}
.no-js .hero-copy {
  opacity: 1;
  transform: none;
  visibility: visible;
  position: static;
}
.no-js .hero-copy ~ .hero-copy { display: none; }
.no-js .hero-slide:first-child { opacity: 1; }

/* ==========================================================================
   ACCESSIBILITÉ — MOUVEMENT RÉDUIT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  .hero-slide.is-active img { animation: none; }
  .logo-track {
    animation: none;
    flex-wrap: wrap;
    width: auto;
    justify-content: center;
  }
  .logo-track > .logo-clone { display: none; }
}

/* ==========================================================================
   IMPRESSION
   ========================================================================== */
@media print {
  .site-header, .hero-controls, .nav-toggle, .cta-banner, .site-footer { display: none; }
  body { color: #000; }
}


/* ==== Ajouts audit 07/08/2026 ==== */
/* Zone tactile confortable pour les puces du slider (WCAG 2.5.8) */
.hero-dot { position: relative; }
.hero-dot::after { content: ""; position: absolute; inset: -6px -4px; }

/* Reserve la place des logos clients : evite tout decalage de mise en page */
.logo-chip img { height: auto; }

/* Titre de section accessible aux lecteurs d ecran, invisible a l ecran */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}