@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/img/POLICES/inter.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url('/img/POLICES/plus-jakarta-sans.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('/img/POLICES/manrope.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  :root {
    --bg: #050a14;
    --panel: #0a1120;
    --panel-border: #1b2740;
    --card: #0d1526;
    --text: #e8ecf5;
    --muted: #93a0b8;
    --accent: #67e8f9;
    --blue: #3b82f6;
    --blue-light: #60a5fa;
    --header-h: 80px;
  }
  /* Palette par catégorie : teintes de bleu, cyan, violet, turquoise */
  .cat-cyan   { --cat: #22d3ee; --cat-bg: rgba(34, 211, 238, 0.14); }
  .cat-sky    { --cat: #4f8ef7; --cat-bg: rgba(79, 142, 247, 0.16); }
  .cat-indigo { --cat: #8b7bff; --cat-bg: rgba(139, 123, 255, 0.16); }
  .cat-violet { --cat: #c084fc; --cat-bg: rgba(192, 132, 252, 0.15); }
  .cat-teal   { --cat: #2dd4bf; --cat-bg: rgba(45, 212, 191, 0.13); }
  /* Teintes dédiées aux 9 bulles de La méthode */
  /* Palette par sens (psychologie des couleurs) : une couleur = un message */
  .tint-1 { --cat: #3b82f6; --cat-bg: rgba(37, 99, 235, 0.30); }     /* Presence en ligne : bleu confiance/web */
  .tint-2 { --cat: #fbbf24; --cat-bg: rgba(251, 191, 36, 0.16); }    /* Assistant RH : ambre, la chaleur de l equipe */
  .tint-3 { --cat: #fb923c; --cat-bg: rgba(249, 115, 22, 0.18); }    /* Gestion planning : orange action */
  .tint-4 { --cat: #f05252; --cat-bg: rgba(220, 38, 38, 0.2); }      /* Fidéliser : rouge, demande de Noa du 07/08 */
  .tint-5 { --cat: #818cf8; --cat-bg: rgba(99, 102, 241, 0.26); }    /* Paperasse : indigo productivité */
  .tint-6 { --cat: #c084fc; --cat-bg: rgba(168, 85, 247, 0.26); }    /* IA : violet innovation */
  .tint-7 { --cat: #4ade80; --cat-bg: rgba(34, 197, 94, 0.16); }     /* Encaisser : vert argent/croissance */
  .tint-8 { --cat: #22d3ee; --cat-bg: rgba(6, 182, 212, 0.18); }     /* Connecter : turquoise fluidité */
  .tint-9 { --cat: #b6c2d6; --cat-bg: rgba(148, 163, 184, 0.16); }   /* Piloter : gris argenté données */

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    font-family: 'Inter', system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
  }
  h1, h2, h3 { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

  /* ---------- HEADER ---------- */
  .header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(5, 10, 20, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--panel-border);
  }
  .topbar {
    display: flex; justify-content: flex-end; align-items: center;
    padding: 8px 18px 0;
  }
  .topbar .lang { font-size: 12px; }
  /* Lot 2.54.7 (demande de Noa) : telephone et mail pro dans la barre
     du haut, a gauche de FR / EN, separes par un filet. Sur telephone,
     seuls les deux pictogrammes restent (la place manque). */
  .topbar-contact { display: inline-flex; align-items: center; gap: 16px; margin-right: 14px; padding-right: 14px; border-right: 1px solid var(--panel-border); }
  .topbar-contact a {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 0;
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; font-weight: 600;
    color: var(--muted); transition: color .15s ease;
  }
  .topbar-contact a:hover { color: var(--text); }
  .topbar-contact svg { width: 13px; height: 13px; flex: none; color: var(--blue-light); }
  @media (max-width: 1023px) {
    .topbar-contact { gap: 12px; margin-right: 10px; padding-right: 10px; }
    .topbar-contact span { display: none; }
    .topbar-contact svg { width: 16px; height: 16px; }
  }
  .header-inner {
    max-width: none; margin: 0 auto;
    height: var(--header-h);
    display: flex; align-items: center; gap: 8px;
    padding: 0 18px;
  }
  .header-inner > .logo { flex: 1 1 0; min-width: 0; }
  .header-inner > .nav { flex: none; justify-content: center; }
  .header-inner > .header-right { flex: 1 1 0; min-width: 0; justify-content: flex-end; }
  .logo { display: flex; align-items: center; gap: 14px; flex-shrink: 0; position: relative; top: -13px; }
  .logo-img { width: 60px; height: 60px; display: block; object-fit: contain; }
  .logo-word { height: 26px; width: auto; display: block; object-fit: contain; align-self: center; }
  @media (max-width: 1023px) { .logo-word { height: 22px; } }

  .nav { display: flex; align-items: center; gap: 2px; }
  .nav-btn {
    position: relative; top: -11px;
    display: flex; align-items: center; gap: 6px;
    padding: 9px 14px; border-radius: 10px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600; font-size: 14.5px; color: var(--text);
    transition: background 0.15s ease;
    text-decoration: none; cursor: pointer;
  }

  /* v2.40.3 : LE FILET ANIME SOUS LES TITRES DU HEADER, au survol.
     Meme geste et meme duree que dans le menu deroulant, 0,75 s, du
     milieu vers les deux cotes. Le texte est enveloppe dans un span
     pour que le filet s arrete au dernier mot et ne passe pas sous le
     chevron. Pose a 4 px sous le texte, dans le padding du bouton :
     aucune hauteur ajoutee. Il reste affiche tant que le menu est
     ouvert, et il repond au focus clavier.
     Couleur : le bleu Atlas #3b82f6, celui du logo, et non la couleur
     du texte. Demande de Noa. */
  .nav-btn .nb-t { position: relative; display: inline-block; }
  .nav-btn .nb-t::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -4px;
    height: 1px; background: #3b82f6;
    transform: scaleX(0); transform-origin: center;
    transition: transform 0.75s cubic-bezier(0.22, 0.9, 0.3, 1);
  }
  .nav-btn:hover .nb-t::after,
  .nav-btn:focus-visible .nb-t::after,
  .nav-item.open > .nav-btn .nb-t::after { transform: scaleX(1); }
  @media (prefers-reduced-motion: reduce) {
    .nav-btn .nb-t::after { transition: none; }
  }
  .nav-btn:hover,
  .nav-item.open > .nav-btn {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04));
    backdrop-filter: blur(10px) saturate(1.4);
    -webkit-backdrop-filter: blur(10px) saturate(1.4);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.16),
      0 0 0 1px rgba(255, 255, 255, 0.09);
  }
  .nav-btn .chev { transform: rotate(180deg); transition: transform 0.2s ease, color 0.15s ease; color: var(--muted); }
  .nav-btn:hover .chev,
  .nav-item.open > .nav-btn .chev { color: var(--blue-light); }
  .nav-item.open .chev { transform: rotate(0deg); }

  .nav-ext .ext-ico { color: var(--muted); transition: color 0.15s ease; }
  .nav-ext:hover .ext-ico { color: var(--accent); }
  .topbar-ext {
    display: none; margin-right: auto;
    align-items: center; gap: 6px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px; font-weight: 600;
    color: var(--muted);
    padding: 4px 2px;
    transition: color 0.15s ease;
  }
  .topbar-ext:hover { color: var(--text); }
  /* Lot 2.58.0 (demande de Noa) : en-tete telephone et tablette (moins de
     1024 px). Site sur mesure retire, logo centre verticalement dans la
     banniere (meme marge en haut et en bas) ; a droite, mail et FR / EN
     au-dessus, Espace client en dessous. Le PC ne change pas. */
  @media (max-width: 1023px) {
    .topbar-ext { display: none; }
    .header {
      display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto;
      align-items: center; column-gap: 12px; row-gap: 8px;
      padding: 14px 18px;
    }
    .header > .topbar { grid-column: 2; grid-row: 1; justify-self: end; padding: 0; }
    .header > .header-inner { display: contents; }
    .header-inner > .logo { grid-column: 1; grid-row: 1 / 3; align-self: center; top: 0; }
    .header-inner > .header-right { grid-column: 2; grid-row: 2; justify-self: end; margin-left: 0; }
  }
  .header-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
  .lang { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; }
  .lang a { color: var(--muted); padding: 4px 2px; }
  /* Lot 2.55.8 (demande de Noa) : la langue affichee (FR ou EN) est en
     bleu, soulignee d un filet fin du meme bleu. */
  .lang a.active {
    color: var(--blue-light);
    text-decoration: underline; text-decoration-color: var(--blue-light);
    text-decoration-thickness: 1px; text-underline-offset: 4px;
  }
  .lang .sep { color: var(--muted); margin: 0 2px; }
  .link-espace {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600; font-size: 14px; color: var(--text);
    transition: color 0.15s ease;
  }
  .link-espace:hover { color: #2563eb; }
  .link-espace svg { flex-shrink: 0; display: block; }
  .btn-cta {
    padding: 10px 18px; border-radius: 10px;
    background: linear-gradient(135deg, #3b82f6, #38bdf8);
    color: #04101f;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700; font-size: 14px;
    box-shadow: 0 0 18px rgba(59, 130, 246, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .btn-cta:hover { transform: translateY(-1px); box-shadow: 0 0 26px rgba(59, 130, 246, 0.5); }
  /* Lot 2.57.0 (decision de Noa, variante A) : EN-TETE DE 1024 A 1279 PX
     (iPad a l horizontale). Le menu chevauchait le logo et Espace client.
     Symbole du logo seul (le mot ATLAS masque), Site sur mesure passe dans
     la barre du haut (.topbar-ext) et quitte le menu, menu resserre, bouton
     bleu et Espace client sur une ligne, le menu prend la place restante.
     Regles limitees au header : le logo du pied et le bouton .sch-cta de
     l accueil ne bougent pas. Rien ne change sous 1024 ni des 1280 px. */
  @media (min-width: 1024px) and (max-width: 1279px) {
    .header .nav-ext { display: none; }
    .header .topbar-ext { display: inline-flex; }
    .header .nav-btn { padding: 9px 10px; font-size: 14px; }
    .header .btn-cta { white-space: nowrap; padding: 10px 14px; }
    .header .link-espace { white-space: nowrap; }
    .header .logo-word { display: none; }
    .header-inner { gap: 6px; }
    .header-inner > .logo { flex: none; margin-right: 18px; }
    .header-inner > .nav { flex: 1 1 auto; }
    .header-inner > .header-right { flex: none; }
  }

  /* ---------- MEGA MENUS (desktop) ---------- */
  .mega {
    position: absolute; left: 0; right: 0; top: 100%;
    display: none;
    padding: 18px 20px 28px;
  }
  .nav-item.open .mega { display: block; }
  .mega-panel {
    max-width: 1280px; margin: 0 auto;
    background: linear-gradient(180deg, #0a1120, #080e1b);
    border: 1px solid var(--panel-border);
    border-radius: 18px;
    padding: 28px 32px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    animation: megaIn 0.18s ease;
  }
  /* Effet verre : les 3 panneaux */
  .mega-panel {
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02) 40%, rgba(255, 255, 255, 0.01)),
      rgba(8, 14, 27, 0.72);
  }
  .nav-item .mega-panel {
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    border-color: rgba(255, 255, 255, 0.09);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 24px 60px rgba(0, 0, 0, 0.55);
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02) 290px, transparent 600px),
      radial-gradient(1480px 430px at 50% 0%, rgba(96, 165, 250, 0.10), transparent 70%),
      rgba(8, 15, 32, 0.985);
    backdrop-filter: blur(28px) saturate(1.6);
    -webkit-backdrop-filter: blur(28px) saturate(1.6);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      inset 0 -1px 0 rgba(255, 255, 255, 0.04),
      0 24px 60px rgba(0, 0, 0, 0.55);
  }
  .dom-link .mega-ico {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
  @keyframes megaIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .mega-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
  .mega-cols-flat3 .mega-ico { width: 44px; height: 44px; }
  .mega-cols-flat3 .mega-ico svg { width: 19px; height: 19px; }
  .mega-cols-flat3 .mega-link .mega-t { font-size: 15.5px; }
  .mega-cols-flat3 .mega-link p { font-size: 13px; }
  .mega-cols-flat3 { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  @keyframes cardIn {
    from { opacity: 0; transform: translateY(7px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .nav-item.open .mega-cols-flat3 .dom-link { animation: cardIn 0.32s ease backwards; }
  .mega-cols-flat3 .dom-link:nth-child(1) { animation-delay: 0.02s; }
  .mega-cols-flat3 .dom-link:nth-child(2) { animation-delay: 0.05s; }
  .mega-cols-flat3 .dom-link:nth-child(3) { animation-delay: 0.08s; }
  .mega-cols-flat3 .dom-link:nth-child(4) { animation-delay: 0.11s; }
  .mega-cols-flat3 .dom-link:nth-child(5) { animation-delay: 0.14s; }
  .mega-cols-flat3 .dom-link:nth-child(6) { animation-delay: 0.17s; }
  .mega-cols-flat3 .dom-link:nth-child(7) { animation-delay: 0.20s; }
  .mega-cols-flat3 .dom-link:nth-child(8) { animation-delay: 0.23s; }
  .mega-cols-flat3 .dom-link:nth-child(9) { animation-delay: 0.26s; }
  .mega-cols-flat3 .dom-link { margin: 0; }
  .mega-cols-flat3 .mega-link + .mega-link { border-top: none; margin-top: 0; }
  .dom-link {
    position: relative;
    padding: 20px 18px;
    margin: 0;
    border-radius: 14px;
    background:
      linear-gradient(135deg, var(--cat-bg, rgba(255, 255, 255, 0.06)), rgba(255, 255, 255, 0.015) 60%),
      rgba(10, 17, 32, 0.45);
    border: 1px solid color-mix(in srgb, var(--cat, #ffffff) 28%, rgba(255, 255, 255, 0.08));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  }
  .dom-link::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, color-mix(in srgb, var(--cat, #ffffff) 3%, transparent), transparent 50%);
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: none;
  }
  .dom-link:hover::after { opacity: 0.4; }
  /* Selecteurs a 2 classes exprès : la regle generique .mega-link:hover
     (plus bas) ecrasait le degrade par un aplat, la carte perdait sa
     couleur au survol. Meme precision que .mega-cols-5 .mega-link:hover. */
  .mega-cols-flat3 .dom-link:hover,
  .hero-res .dom-link:hover {
    border-color: color-mix(in srgb, var(--cat, #ffffff) 55%, rgba(255, 255, 255, 0.08));
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--cat, #60a5fa) 34%, transparent), color-mix(in srgb, var(--cat, #60a5fa) 10%, transparent) 70%),
      rgba(10, 17, 32, 0.45);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.2),
      inset 0 0 30px color-mix(in srgb, var(--cat, #60a5fa) 16%, transparent),
      0 0 20px 1px color-mix(in srgb, var(--cat, #60a5fa) 14%, transparent);
  }
  .dom-link .mega-ico { width: 38px; height: 38px; }
  .dom-link .mega-ico svg { width: 17px; height: 17px; }
  .dom-link .mega-t { font-size: 14px; }
  .mega-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
  .mega-cols-5 .mega-sec {
    background:
      linear-gradient(165deg, color-mix(in srgb, var(--cat, #60a5fa) 9%, transparent), transparent 75%),
      rgba(255, 255, 255, 0.02);
    border: 1px solid color-mix(in srgb, var(--cat, #ffffff) 18%, rgba(255, 255, 255, 0.05));
    border-radius: 14px;
    padding: 16px 14px 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  }
  /* v1.311 : Nos modules est devenu DEUX menus, cinq colonnes chacun. */
  .nav-item[data-menu="interne"] .mega-panel,
  .nav-item[data-menu="vitrine"] .mega-panel {
    max-width: 900px;
    max-height: none;
    overflow: visible;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* LE MENU EN CASCADE (1.4.0). Les menus Optimiser l interne et La
     vitrine ne montrent plus les cinq colonnes d un coup : d abord les
     cinq titres de familles a la verticale, avec une fleche vers la
     droite, puis le survol d un titre affiche ses modules a droite,
     dans leurs couleurs habituelles. Les liens ne changent pas. */
  .mega-cascade { display: flex; flex-direction: column; gap: 0;
    position: relative; width: 872px; padding: 0; }
  /* LA PREMIERE PLAQUE DE VERRE : le rail des cinq familles, et rien
     d autre. Elle s arrete exactement sous le dernier titre, il n y a
     plus de vide en dessous. */
  .mega-cascade::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 348px;
    border-radius: 18px; z-index: -2;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02) 200px, transparent 420px),
      rgba(8, 15, 32, 0.985);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 24px 60px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(28px) saturate(1.6);
    -webkit-backdrop-filter: blur(28px) saturate(1.6);
  }
  /* La regle .mega-cols-5 .mega-sec, plus bas, remettait un rembourrage
     de 15 et 9 pixels : c est ce qui laissait une reserve de 33 pixels
     sous chaque famille et decalait le texte entre ses deux filets. Le
     selecteur ci-dessous est plus precis, il gagne donc. */
  .mega-cols-5.mega-cascade .mega-sec { position: static; margin: 0;
    background: none; border: none; box-shadow: none; width: 348px; }
  /* LE RAIL : rien que du texte. Chaque famille garde SA couleur,
     c est elle qui differencie ; un filet gris tres fin separe les
     lignes. Aucune bulle, aucun cadre : la matiere de verre du rail
     suffit. Ceci ne vaut que pour le premier menu, la bulle des
     modules garde son habillage. */
  .mega-cascade .mega-col-title {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    text-align: left; white-space: normal; cursor: default;
    font-size: 12.5px; letter-spacing: 0.09em;
    padding: 28px 30px; margin: 0; border-radius: 0;
    background: none; box-shadow: none;
    border: none; border-top: 1px solid transparent;
    text-decoration: none; cursor: pointer;
  }
  .mega-cascade .mega-sec + .mega-sec .mega-col-title {
    border-top: 1px solid rgba(148, 163, 184, 0.16);
  }

  /* v2.39.2 : LA TAILLE DES NOMS DE FAMILLES DANS LE RAIL DU MENU.
     Le rail fait 348 px de large, moins 30 px de marge de chaque cote
     et la place du chevron : il reste environ 264 px pour le texte.
     Mesure faite dans le navigateur sur les deux noms les plus longs,
     Encaissement & Suivi des Chiffres et Factures & Documents
     Automatises : a 0,02 em d interlettrage, la ligne casse a 15,5 px.
     On se pose a 15 px, un demi-point sous la limite.
     L interlettrage passe de 0,09 a 0,02 em : le large espacement
     servait a aerer des capitales, il n a plus lieu d etre en
     capitales de titre, et il rend la place qui permet de grossir.
     Trois classes dans le selecteur, pour gagner sur les regles
     .mega-cols-5 qui viennent plus bas et sur celle du media 1279 px. */
  .mega-cols-5.mega-cascade .mega-col-title {
    font-size: 15px; letter-spacing: 0.02em;
  }

  /* v2.40.1 : LE FILET ANIME SOUS LE NOM DE FAMILLE, AU SURVOL.
     Meme principe que sur les titres de section : il part du milieu et
     s ouvre vers les deux cotes, en 0,75 s. Une premiere version etait a
     0,42 s, Noa l a trouvee trop rapide.
     Le texte du rang est enveloppe dans un span pour que le filet fasse
     la largeur des mots et non celle du rang, qui va jusqu au chevron.
     Il se pose a 6 px sous le texte, dans le padding du rang : aucune
     hauteur ajoutee. La couleur est celle du texte, donc celle de la
     famille, sans avoir a la redire. */
  /* v2.55.3 : LE FILET SUIT CHAQUE LIGNE (demande Noa). Un nom long
     (version anglaise, petit ecran) peut passer sur deux lignes : le
     filet est desormais dessine sous le texte lui-meme (.mct-l, en
     ligne), donc sous chacune des lignes. Meme rendu qu avant sur une
     ligne : 1 px, couleur du texte, 6 px sous les lettres, ouverture du
     milieu vers les cotes en 0,75 s. */
  .mega-cascade .mega-col-title .mct-t { display: block; }
  .mega-cascade .mega-col-title .mct-l {
    display: inline; padding-bottom: 6px;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat; background-position: 50% 100%;
    background-size: 0% 1px;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
    transition: background-size 0.75s cubic-bezier(0.22, 0.9, 0.3, 1);
  }
  .mega-cascade .mega-sec:hover .mega-col-title .mct-l,
  .mega-cascade .mega-sec.ouvert .mega-col-title .mct-l,
  .mega-cascade .mega-col-title:hover .mct-l,
  .mega-cascade .mega-col-title:focus-visible .mct-l { background-size: 100% 1px; }
  @media (prefers-reduced-motion: reduce) {
    .mega-cascade .mega-col-title .mct-l { transition: none; }
  }
  .mega-cascade .mega-col-title::after { content: none; }
  .mega-fleche { width: 8px; height: 8px; flex: 0 0 auto;
    border-right: 1.6px solid currentColor; border-top: 1.6px solid currentColor;
    transform: translate(-2px, 0) rotate(45deg); opacity: 0.6; }
  /* Au survol, la ligne s eclaire dans sa couleur : pas de cadre,
     juste le texte qui monte en lumiere et un souffle tres doux. */
  /* Les coins du premier et du dernier epousent ceux de la plaque. */
  .mega-cascade .mega-sec:first-child .mega-col-title { border-radius: 18px 18px 0 0; }
  .mega-cascade .mega-sec:last-child .mega-col-title { border-radius: 0 0 18px 18px; }
  .mega-cascade .mega-sec:hover .mega-col-title,
  .mega-cascade .mega-sec.ouvert .mega-col-title {
    background: linear-gradient(90deg, color-mix(in srgb, var(--cat, #60a5fa) 13%, transparent), transparent 78%);
    color: color-mix(in srgb, var(--cat, #60a5fa) 55%, #ffffff);
    text-shadow: 0 0 16px color-mix(in srgb, var(--cat, #60a5fa) 45%, transparent);
  }
  .mega-cascade .mega-sec:hover .mega-fleche,
  .mega-cascade .mega-sec.ouvert .mega-fleche { opacity: 1; transform: translate(-2px, 0) rotate(45deg) scale(1.15); }
  .mega-cascade .mega-sous { display: none; position: absolute;
    left: 344px; top: 0; width: 534px; max-height: calc(100vh - 150px);
    padding: 12px 14px 12px 51px; flex-direction: column; gap: 2px;
    overflow-y: auto; scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
  }
  /* Le corps de la bulle : une carte de verre teintee, decollee du
     rail de 16 pixels, dessinee sous les liens. */
  /* LA SECONDE PLAQUE DE VERRE : la bulle des modules. Meme matiere
     que le rail, teintee a la couleur de la famille. */
  .mega-cascade .mega-sous::before {
    content: ""; position: absolute; inset: 0 0 0 27px; z-index: -1;
    border-radius: 16px;
    background:
      linear-gradient(165deg, color-mix(in srgb, var(--cat, #60a5fa) 12%, transparent), transparent 70%),
      linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02) 240px, transparent 520px),
      rgba(8, 15, 32, 0.975);
    border: 1px solid color-mix(in srgb, var(--cat, #ffffff) 24%, rgba(255, 255, 255, 0.07));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09),
      0 24px 60px rgba(0, 0, 0, 0.55),
      0 0 30px color-mix(in srgb, var(--cat, #60a5fa) 12%, transparent);
    backdrop-filter: blur(28px) saturate(1.6);
    -webkit-backdrop-filter: blur(28px) saturate(1.6);
  }
  /* L ENTONNOIR, a l horizontale. Il part du titre en un trait de deux
     pixels, colle au rail, et s ouvre sur toute la hauteur de la bulle
     en seize pixels a peine. Tres leger, presque imperceptible : c est
     ce qui fait comprendre que la liste sort de CE titre la.
     --ty est le centre du titre, mesure sur le rendu reel. */
  .mega-cascade .mega-sous::after {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 27px;
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--cat, #60a5fa) 92%, #ffffff),
      color-mix(in srgb, var(--cat, #60a5fa) 55%, transparent) 45%,
      color-mix(in srgb, var(--cat, #60a5fa) 16%, rgba(8, 15, 32, 0.4)));
    opacity: 0.9;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--cat, #60a5fa) 55%, transparent));
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    clip-path: polygon(
      0 calc(var(--ty, 50%) - 1px),
      100% calc(var(--ty, 50%) - 16.5px),
      100% calc(var(--ty, 50%) + 16.5px),
      0 calc(var(--ty, 50%) + 1px));
  }
  .mega-cascade .mega-sec.ouvert .mega-sous { display: flex; }
  /* Le jaillissement : la bulle sort de SON titre, comme le genie de
     sa lampe. L origine et la pointe suivent la ligne du titre. */
  /* LA POSITION DE LA POINTE N EST PLUS ECRITE EN DUR (1.6.4).
     Elle etait figee en pixels pour chacune des cinq familles : au
     moindre changement de hauteur de ligne, de police ou de zoom, la
     pointe se decalait, et le decalage grandissait en descendant. Elle
     est desormais MESUREE sur la position reelle de chaque titre, a
     l ouverture du menu et a chaque changement de taille de fenetre.
     La valeur ci-dessous n est qu un filet de secours si le script ne
     tourne pas. */
  .mega-cascade .mega-sec .mega-sous { --ty: 35px; }
  @media (prefers-reduced-motion: no-preference) {
    .mega-cascade .mega-sec.ouvert .mega-sous {
      transform-origin: 0 var(--ty, 35px);
      animation: megaGenie 0.22s cubic-bezier(.2, .9, .3, 1.15);
    }
    @keyframes megaGenie {
      from { opacity: 0; transform: scaleX(0.18) scaleY(0.5); }
      to { opacity: 1; transform: scaleX(1) scaleY(1); }
    }
  }
  @media (max-width: 1439px) { .mega-cols-5 .mega-link .mega-t { font-size: 13px; } .mega-cols-5 .mega-link p { font-size: 12px; } .mega-cols-5 { gap: 16px; } }
  .mega-cols-5 .mega-sec + .mega-sec { margin-top: 0; }
  .mega-cols-5 .mega-link { gap: 9px; padding: 10px; }
  .mega-cols-5 .mega-link:hover {
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--cat, #60a5fa) 20%, transparent), color-mix(in srgb, var(--cat, #60a5fa) 6%, transparent) 70%),
      rgba(255, 255, 255, 0.03);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.16),
      inset 0 0 22px color-mix(in srgb, var(--cat, #60a5fa) 8%, transparent);
    border-radius: 10px;
  }
  .mega-cols-5 .mega-ico { width: 32px; height: 32px; }
  .mega-cols-5 .mega-ico svg { width: 15px; height: 15px; }
  .mega-cols-5 .mega-link .mega-t { font-size: 14px; white-space: normal; overflow: visible; text-overflow: clip; }
  .mega-cols-5 .mega-link p { font-size: 12.5px; }
  .mega-cols-5 .mega-col-title { font-size: 10.5px; letter-spacing: 0.09em; }
  /* v1.311 : lignes resserrees, la colonne la plus haute fait dix
     modules cote interne. */
  .mega-cols-5 .mega-sec { padding: 15px 14px 9px; }
  .mega-cols-5 .mega-link { padding: 8px 9px; gap: 10px; }
  .mega-cols-5 .mega-link .mega-t { margin-bottom: 2px; }
  .mega-cols-5 .mega-link p { line-height: 1.4; }
  /* v1.312 : le menu INTERNE seul est resserre d un cran, texte et
     icones plus petits, pour que ses colonnes de dix modules restent
     legeres. Ces regles gagnent sur celles des grands ecrans grace au
     selecteur data-menu, la vitrine garde ses tailles validees. */
  /* v1.315 : le menu interne reprend EXACTEMENT les tailles de la
     vitrine, demande de Noa. Seul reste le resserrage lateral des
     petits ecrans, qui elargit les colonnes sans toucher la police. */
  @media (max-width: 1619px) {
    .nav-item[data-menu="interne"] .mega-panel,
    .nav-item[data-menu="vitrine"] .mega-panel { padding: 20px 22px; }
    .nav-item[data-menu="interne"] .mega-cols-5,
    .nav-item[data-menu="vitrine"] .mega-cols-5 { gap: 14px; }
    .nav-item[data-menu="interne"] .mega-sec,
    .nav-item[data-menu="vitrine"] .mega-sec { padding: 12px 11px 7px; }
    .nav-item[data-menu="interne"] .mega-link,
    .nav-item[data-menu="vitrine"] .mega-link { padding: 7px 7px; gap: 9px; }
  }
  @media (max-width: 1279px) {
    .mega-cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 28px; }
    .mega-cols-5 .mega-sec + .mega-sec { margin-top: 0; }
  }
  @media (max-width: 1279px) {
    .mega-cols-5 { gap: 14px; }
    .mega-cols-5 .mega-ico { width: 28px; height: 28px; }
    .mega-cols-5 .mega-ico svg { width: 13px; height: 13px; }
    .mega-cols-5 .mega-link .mega-t { font-size: 12px; }
    .mega-cols-5 .mega-link p { font-size: 11px; }
    .mega-cols-5 .mega-col-title { font-size: 9.5px; letter-spacing: 0.08em; }
  }
  /* grands ecrans : panneau Nos modules plus large et texte plus lisible */
  @media (min-width: 1440px) {
    .mega-cols-5 { gap: 24px; }
    .mega-cols-5 .mega-sec { padding: 18px 16px 10px; }
    .mega-cols-5 .mega-link { gap: 11px; padding: 11px 10px; }
    .mega-cols-5 .mega-ico { width: 36px; height: 36px; }
    .mega-cols-5 .mega-ico svg { width: 17px; height: 17px; }
    .mega-cols-5 .mega-link .mega-t { font-size: 15.5px; }
    .mega-cols-5 .mega-link p { font-size: 13.5px; line-height: 1.5; }
    .mega-cols-5 .mega-col-title { font-size: 11.5px; letter-spacing: 0.085em; }
  }
  .mega-sec + .mega-sec { margin-top: 24px; }
  .mega-col-title {
    text-align: center;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11px; font-weight: 700; letter-spacing: 0.11em; color: var(--cat, var(--accent));
    white-space: nowrap;
    position: relative;
    padding-bottom: 11px; margin-bottom: 10px;
  }
  .mega-col-title::after {
    content: "";
    position: absolute; left: 50%; bottom: 0;
    transform: translateX(-50%);
    width: 48px; height: 1.5px; border-radius: 2px;
    background: var(--cat, var(--panel-border));
  }
  .mega-link { display: flex; align-items: center; gap: 11px; padding: 10px; margin: 0 -10px; border-radius: 10px; transition: background 0.13s ease; }
  .mega-link + .mega-link { border-top: 1px solid rgba(75, 90, 120, 0.18); }
  .mega-link + .mega-link { margin-top: 1px; }
  .mega-link:hover { background: var(--cat-bg, rgba(255,255,255,0.05)); }
  .mega-ico {
    flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px;
    border: 1px solid var(--panel-border); background: var(--cat-bg, rgba(59, 130, 246, 0.08));
    display: flex; align-items: center; justify-content: center;
    color: var(--cat, var(--blue-light));
  }
  .mega-ico svg { width: 15px; height: 15px; }
  .mega-txt { min-width: 0; }
  /* Lot 2.36.6 : les intitules des menus etaient des titres (h4). Pour
     Google et les robots IA, une page commencait donc par 9 titres de
     menu avant son vrai titre. Ce sont maintenant de simples textes
     (.mega-t) qui gardent exactement la meme apparence : le bloc et la
     graisse du titre d origine sont repris ici, tout le reste par les
     regles existantes, ou h4 est simplement remplace par .mega-t. */
  .mega-t { display: block; font-weight: bold; }
  .mega-link .mega-t { font-size: 13.5px; font-weight: 600; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mega-link p {
    font-size: 12px; line-height: 1.45; color: var(--muted);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }

  /* Cartes immersion */
  .mega-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: start; }
  .im-card {
    display: block; position: relative;
    background:
      linear-gradient(165deg, color-mix(in srgb, var(--cat, #60a5fa) 9%, transparent), transparent 75%),
      rgba(255, 255, 255, 0.02);
    border: 1px solid color-mix(in srgb, var(--cat, #ffffff) 18%, rgba(255, 255, 255, 0.05));
    border-radius: 14px; padding: 24px 24px 52px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .im-card:hover {
    transform: scale(1.025);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.07),
      0 0 46px color-mix(in srgb, var(--cat, #60a5fa) 32%, transparent);
  }
  .im-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; }
  .im-ico {
    width: 44px; height: 44px; border-radius: 11px;
    border: 1px solid var(--panel-border); background: var(--cat-bg, rgba(59, 130, 246, 0.08));
    display: flex; align-items: center; justify-content: center; color: var(--cat, var(--blue-light));
  }
  .im-ico svg { width: 19px; height: 19px; }
  .im-tag {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em;
    padding: 5px 10px; border-radius: 999px;
    border: 1px solid var(--panel-border); color: var(--cat, var(--muted));
  }
  .im-card .mega-t { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16.5px; font-weight: 700; margin-bottom: 10px; white-space: nowrap; }
  .im-card p {
    font-size: 13px; line-height: 1.5; color: var(--muted);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .im-arrow {
    position: absolute; right: 16px; bottom: 14px;
    width: 28px; height: 28px; border-radius: 8px;
    border: 1px solid var(--panel-border);
    display: flex; align-items: center; justify-content: center; color: var(--muted);
  }
  .im-card:hover .im-arrow { color: var(--cat, var(--accent)); border-color: #2e3f63; }
  .im-card.has-sub { cursor: pointer; }
  .im-card.has-gauge { padding-left: 58px; }
  .im-jg { position: absolute; left: 22px; top: 24px; bottom: 46px; width: 6px; border-radius: 6px; background: rgba(255,255,255,0.08); overflow: hidden; }
  .im-jg span { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 6px; background: linear-gradient(180deg, var(--cat), color-mix(in srgb, var(--cat) 40%, transparent)); }
  .im-jg-pct { position: absolute; left: 15px; bottom: 18px; font-size: 12px; font-weight: 800; color: var(--cat); }
  .m-pct { color: var(--cat); font-weight: 800; font-size: 12px; margin-left: 8px; }
  .im-chev svg { transition: transform 0.25s ease; }
  .im-card.has-sub.open .im-chev svg { transform: rotate(180deg); }
  .im-sub a:last-child { margin-bottom: 2px; }
  .im-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; }
  .im-card.open .im-sub { grid-template-rows: 1fr; }
  .im-sub-in { overflow: hidden; padding: 0 12px; margin: 0 -12px; }
  .im-card.open .im-sub-in { padding-bottom: 16px; margin-bottom: -16px; }
  .im-sub a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 12px; margin-top: 7px;
    border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 9px;
    background: rgba(255, 255, 255, 0.015);
    font-size: 13px; font-weight: 600;
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
  }
  .im-sub a:first-child { margin-top: 14px; }
  .im-sub a:hover {
    border-color: color-mix(in srgb, var(--cat, #60a5fa) 60%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--cat, #60a5fa) 30%, transparent);
  }
  .im-sub a svg { color: var(--muted); }
  .im-sub a:hover svg { color: var(--cat); }

  .overlay {
    position: fixed; inset: 0; top: var(--header-h);
    background: rgba(2, 5, 10, 0.55);
    opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
    z-index: 90;
  }
  body.menu-open .overlay { opacity: 1; pointer-events: auto; }

  /* ---------- HERO ---------- */
  .hero {
    position: relative;
    min-height: calc(100vh - var(--header-h));
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center;
    padding: clamp(52px, 8vh, 86px) 24px clamp(56px, 9vh, 96px);
    background:
      radial-gradient(1250px 620px at 50% -12%, rgba(37, 99, 235, 0.22), transparent 70%),
      radial-gradient(820px 520px at 6% -4%, rgba(59, 130, 246, 0.22), transparent 66%),
      radial-gradient(820px 520px at 94% -4%, rgba(56, 189, 248, 0.17), transparent 66%),
      linear-gradient(180deg, #071322 0%, #050c18 55%, #04080f 100%);
  }
  .hero-arcs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
  .hero-arcs i {
    position: absolute; display: block; border-radius: 50%;
    border: 1px solid rgba(96, 165, 250, 0.055);
  }
  .hero-arcs i:nth-child(1) { width: 2200px; height: 2200px; left: -900px; bottom: -1990px; }
  .hero-arcs i:nth-child(2) { width: 2600px; height: 2600px; right: -1000px; bottom: -2360px; }
  .hero > *:not(.hero-arcs) { position: relative; z-index: 1; }

  .hero h1 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: clamp(32px, 4.8vw, 62px);
    line-height: 1.14;
    letter-spacing: -0.012em;
    max-width: 1060px;
    margin-bottom: clamp(20px, 3.2vh, 34px);
  }
  .hero h1 .accent {
    color: #6fb0ff;
    -webkit-text-fill-color: #6fb0ff;
  }
  .h1-tour {
    display: block; position: relative;
    height: calc(2.28em + 5px);
    overflow: hidden;
    contain: layout style paint;
  }
  .h1-phrase {
    position: absolute; left: 0; right: 0; top: 0;
    pointer-events: none;
    transform: translate3d(0, -115%, 0);
    transition: transform 0.95s cubic-bezier(0.25, 0.8, 0.3, 1);
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
  }
  .h1-phrase.on, .h1-phrase.sort { will-change: transform; }
  .h1-phrase.on { transform: translate3d(0, 0, 0); }
  .h1-phrase.sort { transform: translate3d(0, 115%, 0); }
  @media (prefers-reduced-motion: reduce) {
    .h1-phrase { transition: none; }
  }

  .hero-sub {
    max-width: 760px; margin-bottom: clamp(28px, 4.6vh, 48px);
    font-size: 16.5px; line-height: 1.68; color: #a9b6cc;
  }
  .hero-sub p.hs-strong { color: var(--text); font-weight: 600; margin: 3px 0 5px; }
  .hero-sub .hs-soft { color: #a9b6cc; font-weight: 400; }

  /* barre de recherche : pilule avec halo bleu */
  .hero .hero-searchwrap { position: relative; z-index: 5; width: 100%; max-width: 950px; }
  .hero-search {
    width: 100%;
    display: flex; align-items: center; gap: 14px;
    padding: 8px 8px 8px 26px;
    border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.28);
    background: rgba(6, 14, 28, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 0 0 6px rgba(59, 130, 246, 0.045),
      0 22px 60px rgba(37, 99, 235, 0.22);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .hero-search:focus-within {
    border-color: rgba(96, 165, 250, 0.60);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 0 0 6px rgba(59, 130, 246, 0.10),
      0 22px 70px rgba(37, 99, 235, 0.34);
  }
  .hero-field { flex: 1; display: flex; align-items: center; gap: 14px; min-width: 0; height: 62px; }
  .hero-field > svg { flex-shrink: 0; color: #7c8ca6; }
  .hero-field input {
    flex: 1; min-width: 0; height: 100%;
    background: none; border: none; outline: none;
    color: var(--text); font-family: 'Inter', sans-serif; font-size: 17px;
  }
  .hero-field input::placeholder { color: #7f8da3; }
  .hero-div { width: 1px; height: 30px; background: rgba(255, 255, 255, 0.11); flex-shrink: 0; }
  .hero-go {
    flex-shrink: 0; height: 62px; padding: 0 30px; border-radius: 999px;
    background: linear-gradient(120deg, #2563eb, #38bdf8);
    color: #07121f;
    font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 15.5px;
    box-shadow: 0 6px 22px rgba(37, 99, 235, 0.42);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  }
  .hero-go:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 8px 30px rgba(37, 99, 235, 0.58); }

  .hero-ghost {
    position: absolute; left: 59px; right: 20px; top: 0; bottom: 0;
    display: flex; align-items: center;
    color: #7f8da3; font-size: 17px; text-align: left;
    pointer-events: none; overflow: hidden; white-space: nowrap;
    transition: opacity 0.18s ease;
    contain: layout style paint;
  }
  .hero-tw::after {
    content: ""; display: inline-block;
    width: 1.5px; height: 18px; background: var(--blue-light);
    margin-left: 3px; vertical-align: middle;
    animation: twBlink 1.05s steps(1) infinite;
  }
  @keyframes twBlink { 50% { opacity: 0; } }
  .hero-field.hide-ghost .hero-ghost { opacity: 0; }

  /* panneau de suggestions sous la barre */
  .hero-res {
    position: absolute; top: calc(100% + 12px); left: 0; right: 0;
    display: none; text-align: left; z-index: 20;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    background:
      linear-gradient(135deg, rgba(96, 165, 250, 0.07), rgba(37, 99, 235, 0.02) 45%, transparent),
      rgba(9, 18, 40, 0.95);
    backdrop-filter: blur(26px) saturate(1.5);
    -webkit-backdrop-filter: blur(26px) saturate(1.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 26px 60px rgba(0, 0, 0, 0.6);
    max-height: 62vh; overflow-y: auto;
  }
  .hero-res.on { display: block; }
  .hero-res-sec + .hero-res-sec { margin-top: 18px; }
  .hero-res-cap {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--muted);
    padding: 2px 4px 11px;
  }
  .hero-res-note {
    display: block; margin-top: 5px;
    font-family: 'Inter', sans-serif;
    font-size: 12px; font-weight: 400; letter-spacing: 0;
    text-transform: none; color: #7f8da3;
  }
  .hero-res-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .hero-res .mega-link + .mega-link { border-top: none; margin-top: 0; }
  .hero-res .dom-link { margin: 0; padding: 16px 15px; }
  /* Lot 2.61.12 (retour de Noa) : les modules gardent la forme du menu,
     lignes a plat separees d un filet, sans degrade ; le survol reprend
     celui du menu. Approches et familles restent en cartes. */
  .hero-res-grid.hero-res-liste { row-gap: 0; }
  .hero-res .hero-mod { margin: 0; padding: 12px 10px; border-radius: 10px; }
  .hero-res .hero-mod .mega-t { font-size: 14px; white-space: normal; overflow: visible; text-overflow: clip; }
  .hero-res-liste .hero-mod:nth-child(n+3) { border-top: 1px solid rgba(75, 90, 120, 0.18); }
  .hero-res .hero-mod:hover {
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--cat, #60a5fa) 20%, transparent), color-mix(in srgb, var(--cat, #60a5fa) 6%, transparent) 70%),
      rgba(255, 255, 255, 0.03);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.16),
      inset 0 0 22px color-mix(in srgb, var(--cat, #60a5fa) 8%, transparent);
  }
  .hero-res-empty { padding: 16px; text-align: center; color: var(--muted); font-size: 13px; }

  /* les 3 arguments sous la barre */
  .hero-args {
    display: flex; align-items: stretch; justify-content: center;
    gap: 0; margin-top: clamp(34px, 6vh, 64px);
    width: 100%; max-width: 1040px;
  }
  .hero-arg {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    text-align: center; padding: 4px 26px;
  }
  .hero-arg > svg {
    flex-shrink: 0; width: 34px; height: 34px; color: #3b82f6;
    margin-bottom: 18px;
    filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.45));
  }
  .hero-arg h2 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 17px; font-weight: 600; color: var(--text);
    margin-bottom: 9px;
  }
  .hero-arg p { font-size: 13.5px; line-height: 1.5; color: #8494ab; }
  .arg-sep { width: 1px; background: rgba(255, 255, 255, 0.09); flex-shrink: 0; align-self: stretch; }

  /* pastille de bas de hero */
  .hero-badge {
    display: inline-flex; align-items: center; gap: 10px;
    margin-top: clamp(28px, 5vh, 54px); padding: 13px 26px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.035);
    font-size: 14px; color: #c3cddd;
  }
  .hero-badge svg { flex-shrink: 0; color: #4f9dfb; }
  .hero-badge .hb-num { color: #4f9dfb; font-weight: 700; }

  @media (max-width: 1023px) {
    .hero { padding: 40px 18px 52px; min-height: 0; }
    .hero h1 { margin-bottom: 16px; }
    .hero-arcs i:nth-child(1) { width: 900px; height: 900px; left: -300px; bottom: -700px; }
    .hero-arcs i:nth-child(2) { width: 1050px; height: 1050px; right: -340px; bottom: -830px; }
    .hero h1 { font-size: clamp(23px, 6.4vw, 30px); line-height: 1.2; margin-bottom: 16px; }
    .h1-tour { height: calc(3.6em + 5px); }
    .hero-sub { font-size: 13.5px; line-height: 1.6; margin-bottom: 24px; max-width: 420px; }
    .hero-search {
      flex-direction: column; align-items: stretch; gap: 9px;
      padding: 9px; border-radius: 22px; max-width: 460px;
    }
    .hero-field { position: relative; height: 40px; padding-left: 12px; gap: 10px; }
    .hero-ghost { left: 37px; right: 0; font-size: 14px; }
    .hero-tw::after { height: 14px; }
    .hero-res { position: static; margin-top: 12px; max-height: 52vh; padding: 12px; border-radius: 16px; }
    .hero-res-grid { grid-template-columns: 1fr; gap: 10px; }
    .hero-res-grid.hero-res-liste { row-gap: 0; }
    .hero-res-liste .hero-mod:nth-child(2) { border-top: 1px solid rgba(75, 90, 120, 0.18); }
    .hero-field > svg { width: 15px; height: 15px; }
    .hero-field input { font-size: 14px; }
    .hero-div { display: none; }
    .hero-go { width: 100%; height: 44px; padding: 0 18px; font-size: 14px; border-radius: 999px; }
    .hero-args {
      flex-direction: column; align-items: stretch;
      gap: 14px; margin-top: 30px; max-width: 340px;
    }
    .hero-arg { flex-direction: row; align-items: center; text-align: left; padding: 0; gap: 13px; }
    .hero-arg > svg { width: 25px; height: 25px; margin-bottom: 0; }
    .hero-arg h2 { font-size: 14px; margin-bottom: 2px; }
    .hero-arg p { font-size: 12px; }
    .arg-sep { width: 100%; height: 1px; align-self: auto; }
    .hero-badge { margin-top: 30px; padding: 10px 18px; font-size: 12.5px; }
  }
  /* ---------- SECTION SCHEMA ---------- */
  .sec-schema {
    position: relative;
    padding: clamp(70px, 9vh, 110px) 24px clamp(80px, 10vh, 120px);
    background: linear-gradient(180deg, #04080f 0%, #061020 45%, #04080f 100%);
    text-align: center;
    overflow: hidden;
  }
  .sec-schema::before {
    content: ""; position: absolute; pointer-events: none;
    top: -180px; left: 50%; transform: translateX(-50%);
    width: 1100px; height: 480px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(37, 99, 235, 0.14), transparent 75%);
    filter: blur(50px);
  }
  .sec-inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; }
  .sec-kicker {
    display: block;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11px; font-weight: 600; letter-spacing: 0.32em; color: #6f7f99;
    margin-bottom: 22px;
  }
  .sec-schema h2 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: clamp(26px, 3.4vw, 44px);
    line-height: 1.2; letter-spacing: -0.015em;
    color: var(--text);
    margin-bottom: 22px;
  }
  .sec-schema h2 .h2-bleu {
    color: var(--text);
    background: linear-gradient(90deg, #3b82f6, #38bdf8) bottom / 100% 3px no-repeat;
    padding: 0 0 3px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
  .sec-intro {
    max-width: 1060px; margin: 0 auto clamp(44px, 6vh, 68px);
    font-size: 16px; line-height: 1.65; color: #a2b0c6;
    transform: translateY(20px);
  }

  .sch-cards {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 26px; align-items: stretch;
  }
  .sch-card {
    display: flex; flex-direction: column; align-items: center;
    padding: 30px 16px 30px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background:
      linear-gradient(160deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012) 42%, rgba(255, 255, 255, 0.028)),
      linear-gradient(180deg, rgba(96, 165, 250, 0.04), rgba(96, 165, 250, 0.01) 40%, transparent),
      rgba(6, 13, 26, 0.62);
    backdrop-filter: blur(14px) saturate(1.25);
    -webkit-backdrop-filter: blur(14px) saturate(1.25);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      0 10px 30px rgba(0, 0, 0, 0.35);
    transition: border-color 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .sch-card:hover {
    border-color: rgba(96, 165, 250, 0.38);
    transform: translateY(-4px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      0 10px 30px rgba(0, 0, 0, 0.35),
      0 0 40px 2px rgba(59, 130, 246, 0.16);
  }
  .sch-ico {
    height: 132px; display: block; width: 100%;
    margin-bottom: 20px;
    overflow: hidden;
    color: #5aa4ff;
    filter: drop-shadow(0 0 16px rgba(59, 130, 246, 0.55));
  }
  .sch-ico img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .sch-ico svg { width: 112px; height: 84px; }
  .sch-ico svg { display: block; }
  .sch-card h3 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 21px; font-weight: 700; letter-spacing: 0.045em;
    text-transform: uppercase;
    color: var(--text);
    padding: 0.34em 0.6em;
    margin-bottom: 22px;
    position: relative;
    isolation: isolate;
    background-image:
      linear-gradient(rgba(74, 141, 235, 0.92),rgba(74, 141, 235, 0.92)), linear-gradient(rgba(74, 141, 235, 0.92),rgba(74, 141, 235, 0.92)),
      linear-gradient(rgba(74, 141, 235, 0.92),rgba(74, 141, 235, 0.92)), linear-gradient(rgba(74, 141, 235, 0.92),rgba(74, 141, 235, 0.92)),
      linear-gradient(rgba(74, 141, 235, 0.92),rgba(74, 141, 235, 0.92)), linear-gradient(rgba(74, 141, 235, 0.92),rgba(74, 141, 235, 0.92)),
      linear-gradient(rgba(74, 141, 235, 0.92),rgba(74, 141, 235, 0.92)), linear-gradient(rgba(74, 141, 235, 0.92),rgba(74, 141, 235, 0.92)),
      radial-gradient(ellipse at center, rgba(59, 130, 246, 0.07), transparent 72%);
    background-size:
      8px 1.5px, 1.5px 8px,
      8px 1.5px, 1.5px 8px,
      8px 1.5px, 1.5px 8px,
      8px 1.5px, 1.5px 8px,
      100% 100%;
    background-position:
      left top, left top,
      right top, right top,
      left bottom, left bottom,
      right bottom, right bottom,
      center;
    background-repeat: no-repeat;
  }
  .sch-card h3::before {
    content: "";
    position: absolute;
    inset: -6px -10px;
    z-index: -1;
    pointer-events: none;
    background-image:
      radial-gradient(ellipse 60% 70% at 34% 50%, rgba(59, 130, 246, 0.20), transparent 70%),
      radial-gradient(ellipse 55% 65% at 68% 52%, rgba(96, 165, 250, 0.16), transparent 72%);
    background-repeat: no-repeat;
    opacity: 0.55;
    animation: haloTitre 6s ease-in-out infinite;
  }
  .sch-card:nth-child(2) h3::before { animation-delay: -2s; }
  .sch-card:nth-child(3) h3::before { animation-delay: -4s; }
  @keyframes haloTitre {
    0%, 100% { opacity: 0.42; transform: scale(0.97); }
    50%      { opacity: 0.95; transform: scale(1.04); }
  }
  @media (prefers-reduced-motion: reduce) {
    .sch-card h3::before { animation: none; opacity: 0.6; }
  }
  .sch-rule {
    display: none; width: 46px; height: 1.5px; border-radius: 2px;
    background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.85), transparent);
    margin-bottom: 18px;
  }
  .sch-card p {
    font-size: 14.5px; line-height: 1.62; color: #9aa8bf;
    max-width: 340px;
  }
  .sch-card .hl { color: #6fb0ff; font-weight: 500; }
  .sch-card p + p { margin-top: 12px; }
  .sch-card p.sch-lead { color: #c3cee0; }

  .sch-close {
    max-width: 1320px; margin: clamp(50px, 6.5vh, 76px) auto 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(14px, 1.22vw, 18px); font-weight: 600;
    line-height: 1.6; color: #d6dfec;
  }
  .sch-close .hl { color: #6fb0ff; }
  /* Lot 2.54.8 (demande de Noa) : le bouton du haut de page, repris
     sous la phrase de conclusion, en plus grand. */
  .sch-cta { text-align: center; margin-top: 30px; }
  .sch-btn { display: inline-block; padding: 14px 28px; border-radius: 12px; font-size: 15.5px; }


  /* ---------- BANDE DES OUTILS ---------- */
  .sec-outils {
    position: relative;
    padding: calc(clamp(46px, 6vh, 70px) - 50px) 0 clamp(54px, 7vh, 82px);
    background: #04080f;
    text-align: center;
  }
  .outils-titre {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
    color: #7d8ca6;
    margin-bottom: 30px;
  }
  .outils-bande {
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    background:
      linear-gradient(160deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012) 42%, rgba(255, 255, 255, 0.028)),
      rgba(6, 13, 26, 0.62);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      0 10px 30px rgba(0, 0, 0, 0.35);
    padding: 26px 0;
  }
  .outils-fenetre {
    position: relative;
    overflow: hidden;
  }
  .outils-fenetre {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  }
  .outils-piste {
    display: flex; align-items: center; width: max-content;
    will-change: transform;
    backface-visibility: hidden;
    animation: outilsDefile 62s linear infinite;
  }
  .outils-piste img {
    height: 46px; width: auto; margin: 0;
    opacity: 0.66;
    transition: opacity 0.25s ease;
  }
  .outils-piste img:hover { opacity: 1; }
  @keyframes outilsDefile {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .outils-piste { animation: none; }
  }








  /* ---------- LES TROIS PORTES D ENTREE ---------- */
  .sec-portes {
    position: relative;
    min-height: 851px;
    padding: 34px 0 53px;
    overflow: hidden;
    font-family: 'Manrope', 'Inter', system-ui, sans-serif;
    background: #000512;
  }
  .sec-portes::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.5'/%3E%3C/svg%3E");
    mix-blend-mode: soft-light;
  }
  .portes-conteneur { width: min(1480px, calc(100% - 80px)); margin: 0 auto; position: relative; }
  .portes-entete { max-width: 900px; margin: 0 auto 34px; text-align: center; }
  .portes-surtitre {
    font-size: 13.8px; font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase;
    color: #acbdc9; margin-bottom: 18px;
  }
  .portes-titre {
    font-size: clamp(39px, 3.44vw, 57px);
    font-weight: 700; letter-spacing: -0.045em; line-height: 1.06;
    color: #f2f5fb;
  }
  .portes-accent { color: #4399ef; text-shadow: 0 0 20px rgba(52, 122, 220, 0.14); }

  .voies {
    position: relative;
    display: flex; flex-direction: column; gap: 20px;
    margin-left: -2.79%; margin-right: 2.79%;
    padding-left: 17.88%;
  }
  .voies.numeros-dehors { padding-right: 11.03%; }
  .portes-conteneur > .bande-site { position: relative; }

  .bulles-svg {
    position: absolute; left: -3.07%; top: 0;
    width: 100%; height: 100%;
    overflow: visible; pointer-events: none;
  }
  .bulle-lustre, .bulle-fond, .brume, .queue, .arete { pointer-events: none; }
  .arete {
    stroke-width: 1.1;
    vector-effect: non-scaling-stroke;
    filter: blur(0.4px);
  }
  .areteq { stroke-width: 0.9; }
  .queue {
    stroke-width: 1.25;
    vector-effect: non-scaling-stroke;
    animation: bullePouls 5s ease-in-out infinite;
  }
  .q1 { filter: drop-shadow(0 0 5px rgba(77, 160, 255, 0.85)) drop-shadow(0 0 13px rgba(60, 140, 255, 0.42)); }
  .q2 { filter: drop-shadow(0 0 5px rgba(139, 109, 255, 0.8)) drop-shadow(0 0 13px rgba(110, 80, 240, 0.4)); animation-delay: 0.7s; }
  .q3 { filter: drop-shadow(0 0 5px rgba(36, 223, 247, 0.75)) drop-shadow(0 0 13px rgba(25, 175, 215, 0.38)); animation-delay: 1.4s; }
  .bulle-bas { stroke-opacity: 0.17; }
  .halo-large {
    stroke-width: 6;
    stroke-opacity: 0.2;
    vector-effect: non-scaling-stroke;
    animation: bullePouls 5s ease-in-out infinite;
  }
  .halo-l1 { filter: blur(20px); }
  .halo-l2 { filter: blur(20px); animation-delay: 0.7s; }
  .halo-l3 { filter: blur(20px); animation-delay: 1.4s; }
  .halo {
    stroke-width: 3.2;
    stroke-opacity: 0.32;
    vector-effect: non-scaling-stroke;
    animation: bullePouls 5s ease-in-out infinite;
  }
  .halo-1 { filter: blur(14px) drop-shadow(0 0 22px rgba(61, 148, 255, 0.6)) drop-shadow(0 0 44px rgba(47, 130, 255, 0.35)); }
  .halo-2 { filter: blur(14px) drop-shadow(0 0 22px rgba(130, 92, 255, 0.55)) drop-shadow(0 0 44px rgba(121, 80, 255, 0.32)); animation-delay: 0.7s; }
  .halo-3 { filter: blur(14px) drop-shadow(0 0 22px rgba(30, 222, 246, 0.52)) drop-shadow(0 0 44px rgba(22, 205, 239, 0.3)); animation-delay: 1.4s; }
  .bulle {
    stroke-width: 1.1;
    stroke-opacity: 0.6;
    vector-effect: non-scaling-stroke;
    animation: bullePouls 5s ease-in-out infinite;
  }
  .bulle-1 { filter: drop-shadow(0 0 4px rgba(61, 148, 255, 0.7)) drop-shadow(0 0 12px rgba(47, 130, 255, 0.26)); }
  .bulle-2 { filter: drop-shadow(0 0 4px rgba(130, 92, 255, 0.65)) drop-shadow(0 0 12px rgba(121, 80, 255, 0.24)); animation-delay: 0.7s; }
  .bulle-3 { filter: drop-shadow(0 0 4px rgba(30, 222, 246, 0.63)) drop-shadow(0 0 12px rgba(22, 205, 239, 0.22)); animation-delay: 1.4s; }
  @keyframes bullePouls {
    0%, 100% { opacity: 0.85; }
    50%      { opacity: 1; }
  }

  .voie {
    position: relative;
    height: 142px; min-height: 0;
    display: grid;
    grid-template-columns: 20.93% 38.6% 1fr;
    align-items: center;
    padding: 20px 3.34% 20px 0;
    border-radius: 82px 42px 42px 82px;
  }
  .voie::after {
    content: ""; position: absolute; inset: 0 0 0 auto; width: 260px;
    border-radius: inherit;
    background-image: radial-gradient(circle, rgba(128, 181, 255, 0.22) 0.7px, transparent 0.8px);
    background-size: 9px 9px;
    opacity: 0.10;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000);
    mask-image: linear-gradient(90deg, transparent, #000);
    pointer-events: none;
  }
  .voie-methode { color: #57a9ff; }
  .voie-modules { color: #9277ff; }
  .voie-immersion { color: #20dcef; }
  .voie-modules .voie-lien { color: #ad74f3; }
  .voie-immersion .voie-lien { color: #04e8ef; }

  .voie-icone {
    position: relative; top: -10px;
    width: 126px; height: 126px;
    justify-self: center;
    display: grid; place-items: center;
    border-radius: 50%;
  }
  .voie-icone::before {
    content: ""; position: absolute; inset: 4px; border-radius: inherit;
    border: 1.5px solid color-mix(in srgb, currentColor 78%, #ffffff); opacity: 1;
    box-shadow: 0 0 7px currentColor, 0 0 15px color-mix(in srgb, currentColor 17%, transparent), inset 0 0 15px rgba(255, 255, 255, 0.03);
  }
  .voie-icone::after {
    content: ""; position: absolute; inset: 19px; border-radius: inherit;
    border: 1px solid currentColor; opacity: 0.30;
  }
  .voie-icone > svg,
  .voie-icone > .voie-glyphe { width: 52px; height: 52px; position: relative; }
  .voie-icone {
    background:
      radial-gradient(circle at 50% 118%, color-mix(in srgb, currentColor 20%, transparent), transparent 58%),
      radial-gradient(circle at 50% 50%, rgba(3, 9, 20, 0.85), rgba(3, 9, 20, 0.4) 70%, transparent);
  }
  /* arc lumineux dans la partie basse du cercle */
  .voie-icone > .icone-arc {
    position: absolute; inset: 4px; border-radius: 50%;
    background: conic-gradient(from 128deg,
      transparent 0deg,
      color-mix(in srgb, currentColor 60%, #ffffff) 18deg,
      color-mix(in srgb, currentColor 25%, #ffffff) 52deg,
      color-mix(in srgb, currentColor 60%, #ffffff) 86deg,
      transparent 104deg);
    -webkit-mask: radial-gradient(circle, transparent 70%, #000 71.5%, #000 79%, transparent 80.5%);
    mask: radial-gradient(circle, transparent 70%, #000 71.5%, #000 79%, transparent 80.5%);
    filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 10px currentColor);
    pointer-events: none;
  }
  /* quatre graduations aux points cardinaux */
  .voie-icone > .icone-grad {
    position: absolute; inset: -2px; border-radius: 50%;
    background:
      linear-gradient(currentColor, currentColor) 50% 0 / 1px 5px no-repeat,
      linear-gradient(currentColor, currentColor) 50% 100% / 1px 5px no-repeat,
      linear-gradient(currentColor, currentColor) 0 50% / 5px 1px no-repeat,
      linear-gradient(currentColor, currentColor) 100% 50% / 5px 1px no-repeat;
    opacity: 0.3;
    pointer-events: none;
  }
  .icone-orbite {
    position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(from 20deg,
      transparent 0deg, transparent 70deg, currentColor 90deg, transparent 110deg,
      transparent 250deg, currentColor 270deg, transparent 292deg);
    -webkit-mask: radial-gradient(circle, transparent 61%, #000 62%, #000 65%, transparent 66%);
    mask: radial-gradient(circle, transparent 61%, #000 62%, #000 65%, transparent 66%);
    opacity: 0.75;
    filter: drop-shadow(0 0 5px currentColor);
    animation: orbiteTour 18s linear infinite;
  }
  @keyframes orbiteTour { to { transform: rotate(360deg); } }

  .voie-corps { position: relative; top: -8px; }
  .voie-corps h3 {
    display: flex; align-items: center; gap: 12px;
    font-size: 26.3px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15;
    color: #e9ebef;
    margin-bottom: 4px;
  }
  .voie-corps p::before {
    content: ""; position: absolute;
    left: -15px; top: 3px; bottom: 3px; width: 1.5px;
    border-radius: 2px;
    background: linear-gradient(180deg,
      color-mix(in srgb, currentColor 70%, transparent),
      color-mix(in srgb, currentColor 45%, transparent));
    box-shadow: 0 0 6px color-mix(in srgb, currentColor 35%, transparent);
  }
  .voie-corps p {
    position: relative;
    max-width: none;
    font-size: min(14.86px, calc(1.005vw - 0.81px)); font-weight: 400; line-height: 1.60; letter-spacing: -0.008em;
    color: #c5c4c9;
  }
  .voie-lien {
    position: relative; top: -9px;
    justify-self: start;
    margin-left: 29.4%;
    width: max-content;
    display: inline-flex; align-items: center; gap: 30px;
    padding: 12px 0;
    font-size: 17.5px; font-weight: 600; letter-spacing: -0.015em;
    color: currentColor;
  }
  .voie-lien::after {
    content: ""; position: absolute; left: -30px; right: 30px; bottom: -3px; height: 1.4px;
    background: linear-gradient(90deg, transparent 2%, currentColor 32%, currentColor 68%, transparent 98%);
    opacity: 1;
    box-shadow: 0 0 10px currentColor;
  }
  .voie-lien svg { width: 24px; height: 24px; transition: transform 220ms ease; }
  .voie-lien:hover { filter: brightness(1.18); }
  .voie-lien:hover svg { transform: translateX(5px); }

  .voie-num {
    position: absolute; left: 108.43%; top: 50%;
    transform: translateY(-50%);
    transform-origin: left center;
    width: auto; text-align: left; white-space: nowrap;
    font-size: 95px; font-weight: 200; letter-spacing: -0.04em; line-height: 1;
    -webkit-text-fill-color: currentColor;
    -webkit-text-stroke: 0;
    opacity: 0.17;
    pointer-events: none; user-select: none;
  }
  .voies:not(.numeros-dehors) .voie-num {
    position: static; transform: none; justify-self: end; opacity: 0.085; width: auto;
  }

  .bande-site {
    position: relative;
    display: block;
    width: 85.9%;
    margin-left: 7.05%;
    margin-top: 52px;
    height: 9.06%;
    aspect-ratio: 11.03;
    border-radius: 30px;
    border: 1px solid rgba(58, 110, 178, 0.55);
    background:
      radial-gradient(ellipse 40% 120% at 0% 50%, rgba(48, 110, 200, 0.10), transparent 70%),
      linear-gradient(100deg, rgba(6, 16, 34, 0.9), rgba(2, 9, 26, 0.95));
    box-shadow: inset 0 1px 0 rgba(150, 199, 255, 0.10), 0 0 26px rgba(40, 100, 190, 0.10);
    overflow: hidden;
    transition: filter 0.25s ease;
  }
  .bande-site:hover { filter: brightness(1.1); }

  .bs-ico {
    position: absolute; left: 2.2%; top: 50%;
    height: 56%; aspect-ratio: 1;
    transform: translateY(-50%);
    display: grid; place-items: center;
    border-radius: 50%;
    color: #4ba4ff;
    background:
      radial-gradient(circle at 50% 32%, rgba(70, 140, 235, 0.16), rgba(4, 12, 28, 0.9) 68%);
    box-shadow:
      inset 0 1px 0 rgba(160, 205, 255, 0.28),
      inset 0 0 0 1px rgba(72, 132, 210, 0.35),
      0 0 22px rgba(45, 110, 210, 0.18);
  }
  .bs-ico svg,
  .bs-ico .bs-glyphe { width: 52%; height: 52%; }

  .bs-filet {
    position: absolute; left: calc(8.4% + 7px); top: 24%; bottom: 24%;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(96, 150, 225, 0.5), transparent);
  }

  .bs-txt {
    position: absolute; left: calc(9.5% + 15px); right: 23%; top: 50%;
    transform: translateY(-50%);
    display: flex; flex-direction: column;
  }
  .bs-titre {
    color: #dbdde2;
    font-size: clamp(17px, 1.62vw, 25px);
    font-weight: 700; letter-spacing: -0.01em;
  }
  .bs-desc {
    margin-top: 14px;
    color: #949aa2;
    font-size: clamp(12.5px, 1.12vw, 17px);
    line-height: 1.45;
  }

  .bs-panneau {
    position: absolute; top: 0; bottom: 0; right: 0; width: 24%;
    clip-path: polygon(27% 0, 100% 0, 100% 100%, 8.75% 100%);
    background:
      radial-gradient(circle, rgba(125, 180, 250, 0.55) 0.7px, transparent 0.8px) 0 0 / 7.5px 7.5px,
      linear-gradient(115deg, rgba(30, 78, 150, 0.2), rgba(10, 30, 62, 0.05) 60%, transparent);
    opacity: 0.62;
  }
  .bs-diag {
    position: absolute; top: 0; bottom: 0; left: 78.1%;
    width: 0;
    border-left: 1.2px solid rgba(96, 160, 255, 0.75);
    box-shadow: 0 0 10px rgba(70, 140, 255, 0.4);
    transform: skewX(-24.1deg);
    transform-origin: bottom left;
  }
  .bs-cta {
    position: absolute; right: 4.4%; top: 50%;
    transform: translateY(-50%);
    display: inline-flex; align-items: center; gap: 18px;
    color: #4ba4ff;
    font-size: clamp(14px, 1.32vw, 20px); font-weight: 600;
  }
  .bs-cta svg { width: 1.2em; height: 1.2em; transition: transform 220ms ease; }
  .bande-site:hover .bs-cta svg { transform: translateX(5px); }

  /* entree en cascade de la section Par ou commencer.
     On anime seulement le titre, les trois cartes et la bande.
     Le conteneur .voies et le SVG du verre depoli ne sont jamais
     touches en opacite, pour ne pas casser le rendu du verre. */
  .sec-portes .portes-entete,
  .sec-portes .voie,
  .sec-portes .bande-site {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.62s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .sec-portes .bande-site {
    transition: opacity 0.62s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.62s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.25s ease;
  }
  .sec-portes.portes-vu .portes-entete,
  .sec-portes.portes-vu .voie,
  .sec-portes.portes-vu .bande-site {
    opacity: 1;
    transform: translateY(0);
  }
  .sec-portes.portes-vu .portes-entete  { transition-delay: 0.05s; }
  .sec-portes.portes-vu .voie-methode   { transition-delay: 0.18s; }
  .sec-portes.portes-vu .voie-modules   { transition-delay: 0.31s; }
  .sec-portes.portes-vu .voie-immersion { transition-delay: 0.44s; }
  .sec-portes.portes-vu .bande-site     { transition-delay: 0.57s; }
  /* le logo de chaque carte glisse tres legerement de gauche a droite */
  .sec-portes .voie-icone {
    transform: translateX(-14px);
    transition: transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .sec-portes.portes-vu .voie-icone { transform: translateX(0); }
  .sec-portes.portes-vu .voie-methode   .voie-icone { transition-delay: 0.24s; }
  .sec-portes.portes-vu .voie-modules   .voie-icone { transition-delay: 0.37s; }
  .sec-portes.portes-vu .voie-immersion .voie-icone { transition-delay: 0.50s; }
  @media (prefers-reduced-motion: reduce) {
    .sec-portes .portes-entete,
    .sec-portes .voie,
    .sec-portes .bande-site {
      opacity: 1; transform: none; transition: none;
    }
    .sec-portes .voie-icone { transform: none; transition: none; }
    .flux, .icone-orbite { animation: none; }
  }

  @media (min-width: 1024px) and (max-width: 1150px) {
    .voies { padding-left: 12%; }
    .voies.numeros-dehors { padding-right: 9%; }
    .voie { padding-right: 3%; grid-template-columns: 21% 40% 1fr; }
    .voie-corps { top: 12px; }
    .voie-corps h3 { font-size: clamp(19px, 1.75vw, 24px); }
    .voie-corps p { font-size: clamp(10px, calc(1.091vw - 0.87px), 14px); }
    .voie-lien { margin-left: 15%; font-size: 15px; gap: 18px; }
    .voie-lien::after { right: -6px; }
    .voie-num { font-size: 76px; left: calc(100% + 20px); }
    .bulles-svg { left: -30px; }
        .voie-icone { width: 88px; height: 88px; }
    .voie-icone::after { inset: 15px; }
    .voie-icone > svg,
    .voie-icone > .voie-glyphe { width: 34px; height: 34px; }
    .bande-site { width: 88%; margin-left: 5%; grid-template-columns: 70px 1px minmax(0, 1fr) 150px; padding: 10px 24px; }
  }

  /* ---------- PASTILLE D OUVERTURE DE LA DISCUSSION ---------- */
  .chatpuce {
    position: fixed; right: 16px; bottom: 16px; z-index: 299;
    display: flex; align-items: center; gap: 11px;
    padding: 9px 18px 9px 9px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      0 12px 34px rgba(37, 99, 235, 0.42);
    color: #ffffff;
    transform-origin: right bottom;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.2s ease, opacity 0.28s ease;
  }
  .chatpuce:hover { transform: translateY(-2px); filter: brightness(1.06); }
  .chatpuce-bulle {
    position: relative;
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #ffffff; color: #2563eb;
    flex-shrink: 0;
  }
  .chatpuce-bulle svg { width: 21px; height: 21px; }
  .chatpuce-notif {
    position: absolute; top: -4px; right: -4px;
    min-width: 18px; height: 18px; padding: 0 4px;
    border-radius: 999px;
    background: #ef4444; color: #ffffff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11px; font-weight: 700; line-height: 18px;
    text-align: center;
    border: 2px solid #2563eb;
  }
  .chatpuce-txt {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px; font-weight: 600; white-space: nowrap;
  }
  .chatpuce.cache {
    opacity: 0; transform: translateY(10px) scale(0.9); pointer-events: none;
  }
  /* BULLE SEULE (lot 2.34.0), demande de Noa : sur les pages Methode,
     Immersion et les pages de modules, seule l icone reste, sans le
     texte Posez-moi une question. La classe est posee par le worker
     (chatCompact), selon l adresse de la page. */
  .chatpuce.chatpuce-mini { padding: 9px; gap: 0; }
  .chatpuce.chatpuce-mini .chatpuce-txt { display: none; }
  /* Toute la bulle en bleu, le dessin en blanc (demande de Noa). */
  .chatpuce.chatpuce-mini .chatpuce-bulle { background: transparent; color: #ffffff; }
  .chatpuce.chatpuce-mini .chatpuce-bulle svg { width: 24px; height: 24px; }
  @media (max-width: 1023px) {
    .chatpuce {
      right: 12px; bottom: calc(84px + env(safe-area-inset-bottom));
      padding: 8px 15px 8px 8px; gap: 9px;
    }
    .chatpuce-bulle { width: 34px; height: 34px; }
    .chatpuce-txt { font-size: 13px; }
  }

  /* ---------- FENETRE DE DISCUSSION ATLAS® ---------- */
  .chatbox {
    position: fixed; right: 0; bottom: 0; z-index: 300;
    width: 31.25vw; min-width: 425px; max-width: 100vw;
    height: 50vh; min-height: 400px; max-height: calc(100vh - 16px);
    display: flex; flex-direction: column;
    /* colle au coin bas droit de l ecran (lot 2.53.76) : seul le coin
       haut gauche reste arrondi, pas de bordure contre les bords */
    border-radius: 20px 0 0 0;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-right: 0; border-bottom: 0;
    background:
      linear-gradient(160deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012) 42%, rgba(255, 255, 255, 0.03)),
      rgba(7, 13, 26, 0.94);
    backdrop-filter: blur(22px) saturate(1.4);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.16),
      0 26px 70px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    opacity: 0; transform: translateY(18px) scale(0.96);
    pointer-events: none;
    transition: opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1), transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .chatbox.on { opacity: 1; transform: none; pointer-events: auto; }
  .chatbox-tete {
    display: flex; align-items: center; gap: 9px;
    padding: 13px 12px 13px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent);
  }
  .chatbox-pastille {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
    background: #34d399;
    box-shadow: 0 0 10px rgba(52, 211, 153, 0.8);
  }
  .chatbox-nom {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px; font-weight: 700; letter-spacing: 0.01em;
    color: var(--text);
    margin-right: auto;
    white-space: nowrap;
  }
  .chatbox-cta {
    font-size: 12px; font-weight: 600;
    color: #ffffff;
    padding: 7px 13px; border-radius: 999px;
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.45);
    white-space: nowrap;
    transition: filter 0.2s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .chatbox-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
  .chatbox-btn {
    width: 28px; height: 28px; border-radius: 9px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: #9aa8bf;
    transition: color 0.18s ease, background 0.18s ease;
  }
  .chatbox-btn svg { width: 15px; height: 15px; }
  .chatbox-btn:hover { color: var(--text); background: rgba(255, 255, 255, 0.08); }
  .chatbox-fil {
    padding: 18px 16px 20px;
    display: flex; flex-direction: column; gap: 14px;
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    scrollbar-width: thin;
  }
  .chatbox-fil::-webkit-scrollbar { width: 6px; }
  .chatbox-fil::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.14); border-radius: 3px;
  }
  .chatbox {
    transition: opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
                height 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .chatbox.reduit { height: 58px; min-height: 0; cursor: pointer; }
  .chatbox-fil, .chatbox-saisie, .chatbox-humain { transition: opacity 0.22s ease; }
  .chatbox.reduit .chatbox-fil,
  .chatbox.reduit .chatbox-saisie,
  .chatbox.reduit .chatbox-humain { opacity: 0; pointer-events: none; }
  /* Lot 2.56.0 : fermee, la fenetre sort du parcours clavier et des
     lecteurs d ecran une fois son fondu termine (meme animation). */
  .chatbox {
    visibility: hidden;
    transition: opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
                height 0.38s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s linear 0.34s;
  }
  .chatbox.on { visibility: visible; transition-delay: 0s; }
  .chatbox-ligne { display: flex; align-items: flex-end; gap: 9px; }
  .chatbox-ligne.moi { flex-direction: row-reverse; }
  .chatbox-ligne.moi .chatbox-bulle {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    border-color: rgba(255, 255, 255, 0.16);
    border-radius: 18px 18px 5px 18px;
    color: #ffffff;
    transform-origin: right bottom;
  }
  .chatbox-cartes {
    display: flex; flex-direction: column; gap: 8px;
    margin-left: 39px;
  }
  .chatbox-cartes .mega-link {
    margin: 0; padding: 11px 12px;
    border-radius: 13px;
    background:
      linear-gradient(135deg, var(--cat-bg, rgba(255, 255, 255, 0.06)), rgba(255, 255, 255, 0.015) 60%),
      rgba(10, 17, 32, 0.55);
    border: 1px solid color-mix(in srgb, var(--cat, #ffffff) 30%, rgba(255, 255, 255, 0.08));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
    transition: border-color 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    animation: bulleIn 0.42s cubic-bezier(0.22, 1.15, 0.36, 1) backwards;
  }
  .chatbox-cartes .mega-link:hover {
    border-color: color-mix(in srgb, var(--cat, #ffffff) 55%, rgba(255, 255, 255, 0.08));
    transform: translateX(3px);
  }
  .chatbox-cartes .mega-link + .mega-link { border-top: 1px solid color-mix(in srgb, var(--cat, #ffffff) 30%, rgba(255, 255, 255, 0.08)); margin-top: 0; }
  .chatbox-cartes .mega-ico { width: 28px; height: 28px; border-radius: 8px; }
  .chatbox-cartes .mega-ico svg { width: 14px; height: 14px; }
  .chatbox-cartes .mega-link .mega-t { font-size: 13px; margin-bottom: 2px; white-space: normal; }
  .chatbox-cartes .mega-link p { font-size: 11.5px; line-height: 1.4; }
  .chatbox-saisie {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 12px 13px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.035), transparent);
  }
  .chatbox-champ {
    flex: 1 1 auto; min-width: 0;
    height: 38px; padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.045);
    color: var(--text);
    font-family: inherit; font-size: 13.5px;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease;
  }
  .chatbox-champ::placeholder { color: #7f8da3; }
  .chatbox-champ:focus {
    border-color: rgba(96, 165, 250, 0.5);
    background: rgba(255, 255, 255, 0.07);
  }
  .chatbox-envoi {
    width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.42);
    transition: filter 0.2s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .chatbox-envoi svg { width: 17px; height: 17px; }
  .chatbox-envoi:hover { filter: brightness(1.08); transform: translateY(-1px); }
  /* Bouton "Parler a un conseiller" : toujours visible sous la saisie,
     discret, pour que le visiteur puisse demander un humain a tout moment
     (pas seulement quand le chatbot coince). Meme esprit que le lien
     "Discuter sur WhatsApp" du bloc de relais automatique, en plus sobre
     puisqu il est present en permanence. */
  /* Lot 2.61.6 : au-dessus de la saisie (on ne le remarquait pas dessous).
     Lot 2.61.7 (retour de Noa : la pastille etait trop visible) : texte
     blanc simple, souligne d un trait fin. */
  .chatbox-humain {
    display: block; align-self: center; flex-shrink: 0;
    margin: 6px auto 8px; padding: 6px 12px;
    border: none; background: none;
    font-family: inherit; font-size: 12px; font-weight: 500;
    color: #ffffff; text-align: center;
    text-decoration: underline; text-decoration-thickness: 1px;
    text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: opacity 0.22s ease, text-decoration-color 0.18s ease;
  }
  .chatbox-humain:hover { text-decoration-color: #ffffff; }
  /* Lot 2.61.14 (demande de Noa) : Laisser un message, memes signaux qu au
     diagnostic (.dg-afaire, .dg-ok, .dg-etat) : lisere rouge et A remplir,
     puis vert et Rempli ; halo rouge si on clique sur Envoyer trop tot. */
  .chatbox-contact.chat-afaire, .chatbox-contact.chat-afaire:focus { border-color: rgba(239, 68, 68, 0.45) !important; box-shadow: inset 3px 0 0 #ef4444; }
  .chatbox-contact.chat-ok, .chatbox-contact.chat-ok:focus { border-color: rgba(34, 197, 94, 0.45) !important; box-shadow: inset 3px 0 0 #22c55e; }
  .chatbox-contact.chat-afaire.chat-manque { border-color: #ef4444 !important; box-shadow: inset 3px 0 0 #ef4444, 0 0 0 3px rgba(239, 68, 68, 0.18); }
  .chatbox-etat { margin: -2px 0 2px 2px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; color: #f87171; min-height: 14px; }
  .chatbox-etat.ok { color: #4ade80; }
  .chatbox-envoi-incomplet { opacity: 0.4; cursor: not-allowed !important; }
  .chatbox-manque { margin: 2px 0 0; font-size: 12px; font-weight: 600; color: #f87171; }
  .chatbox-manque[hidden] { display: none; }
  /* Lot 2.61.17 (demande de Noa) : le formulaire Laisser un message se
     detache du fil, sur un fond plus fonce, comme une carte. */
  .chatbox-ticket {
    padding: 14px 14px 12px;
    border-radius: 16px;
    background: rgba(2, 6, 18, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 24px rgba(0, 0, 0, 0.28);
  }
  /* Lot 2.61.18 (demande de Noa) : la phrase va a la ligne avant e-mail ;
     sur telephone, trop etroit pour deux lignes, elle coule normalement. */
  .chatbox-ticket-ligne { display: block; }
  @media (max-width: 600px) { .chatbox-ticket-ligne { display: inline; } }

  .chatbox-pp {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    overflow: hidden; display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  .chatbox-pp img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .chatbox-bulle {
    max-width: 78%;
    padding: 11px 14px;
    border-radius: 18px 18px 18px 5px;
    background:
      linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02) 60%),
      rgba(19, 29, 48, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.09);
    font-size: 14px; line-height: 1.5; color: #dbe3f0;
    transform-origin: left bottom;
    animation: bulleIn 0.42s cubic-bezier(0.22, 1.15, 0.36, 1) backwards;
  }
  @keyframes bulleIn {
    from { opacity: 0; transform: translateY(9px) scale(0.9); }
    to   { opacity: 1; transform: none; }
  }
  .chatbox-points { display: flex; align-items: center; gap: 4px; padding: 13px 15px; }
  .chatbox-points span {
    width: 7px; height: 7px; border-radius: 50%;
    background: #8ba3c7;
    animation: pointSaut 1.15s ease-in-out infinite;
  }
  .chatbox-points span:nth-child(2) { animation-delay: 0.16s; }
  .chatbox-points span:nth-child(3) { animation-delay: 0.32s; }
  @keyframes pointSaut {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
    30%           { transform: translateY(-4px); opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .chatbox, .chatbox-bulle, .chatbox-points span { animation: none; transition: none; }
  }
  @media (max-width: 1023px) {
    .chatbox {
      right: 0; left: 0; width: auto; min-width: 0;
      /* Lot 2.58.3 (demande de Noa) : la discussion s ouvre en grand, de
         la barre du bas jusque sous l en-tete (89 px de haut). dvh : la
         hauteur reellement visible, barres de Safari comprises. */
      height: calc(100vh - 89px - 61px - env(safe-area-inset-bottom));
      height: calc(100dvh - 89px - 61px - env(safe-area-inset-bottom));
      min-height: 280px;
      bottom: calc(61px + env(safe-area-inset-bottom));
      border-radius: 20px 20px 0 0; border-left: 0; border-right: 0;
    }
    .chatbox-cta { font-size: 11.5px; padding: 6px 11px; }
    /* le nom cede la place : les boutons reduire et fermer restent dans la fenetre (lot 2.53.75) */
    .chatbox-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .chatbox-tete { gap: 7px; }
  }

  /* ---------- PIED DE PAGE ---------- */
  .pied {
    position: relative;
    background: #000000;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    overflow: hidden;
  }
  .pied-halo {
    position: absolute; top: -260px; left: 50%;
    width: 900px; height: 460px; transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.07), transparent 68%);
    pointer-events: none;
  }
  .pied-in {
    position: relative;
    max-width: 1320px; margin: 0 auto;
    padding: clamp(52px, 7vh, 78px) 24px clamp(40px, 5vh, 56px);
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: clamp(28px, 4vw, 64px);
  }
  .pied-logo {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 14px;
  }
  .pied-logo img { display: block; object-fit: contain; }
  .pied-logo .logo-img { width: 46px; height: 46px; }
  .pied-logo .logo-word { height: 20px; width: auto; }
  .pied-phrase {
    font-size: 14px; line-height: 1.6; color: #9aa8bf;
    max-width: 290px; margin-bottom: 16px;
  }
  .pied-lieu {
    display: flex; align-items: flex-start; gap: 7px; max-width: 330px;
    font-size: 13.5px; line-height: 1.55; color: #7d8ca6; margin-bottom: 22px;
  }
  .pied-lieu svg { width: 15px; height: 15px; flex-shrink: 0; color: #6fb0ff; margin-top: 2px; }
  /* Lot 2.54.9 (demande de Noa) : telephone et mail dans le pied de
     page, sous la ligne des villes, meme couleur, cliquables. */
  /* Lot 2.55.0 : les villes de la ligne du pied de page menent a leur page. */
  .pied-lieu a { color: inherit; text-decoration: underline; text-decoration-color: rgba(125, 140, 166, 0.45); text-underline-offset: 3px; transition: color .15s ease; }
  .pied-lieu a:hover { color: #e8ecf5; }
  .pied-contact { display: flex; flex-direction: column; gap: 9px; margin: -8px 0 22px; }
  .pied-contact a { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: #7d8ca6; transition: color .15s ease; }
  .pied-contact a:hover { color: #e8ecf5; }
  .pied-contact svg { width: 15px; height: 15px; flex-shrink: 0; color: #6fb0ff; }
  .pied-reseaux { display: flex; gap: 10px; }
  .pied-reseaux a {
    width: 38px; height: 38px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    color: #9aa8bf;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background:
      linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012) 60%),
      rgba(6, 13, 26, 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
    transition: color 0.2s ease, border-color 0.2s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .pied-reseaux a svg { width: 17px; height: 17px; }
  .pied-reseaux a:hover {
    color: #6fb0ff;
    border-color: rgba(96, 165, 250, 0.4);
    transform: translateY(-2px);
  }
  .pied-col { display: flex; flex-direction: column; align-items: flex-start; }
  .pied-titre {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
    color: #6fb0ff;
    margin-bottom: 18px;
  }
  .pied-col a {
    font-size: 14px; line-height: 1.5; color: #9aa8bf;
    padding: 6px 0;
    transition: color 0.18s ease;
  }
  .pied-col a:hover { color: var(--text); }
  .pied-bas {
    position: relative;
    max-width: 1320px; margin: 0 auto;
    padding: 20px 24px 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    font-size: 12.5px; color: #7a879f;
  }

  @media (max-width: 1023px) {
    .pied-in {
      grid-template-columns: 1fr 1fr;
      gap: 34px 24px;
      padding: 44px 18px 34px;
    }
    .pied-marque { grid-column: 1 / -1; }
    .pied-bas {
      flex-direction: column; align-items: flex-start; gap: 6px;
      padding: 18px 18px 44px; font-size: 12px;
    }
  }

  /* ---------- SECTION CHIFFRES ---------- */
  .sec-chiffres {
    position: relative;
    padding: clamp(64px, 9vh, 104px) 24px clamp(64px, 9vh, 100px);
    background: linear-gradient(180deg, #04080f 0%, #071224 55%, #04080f 100%);
    overflow: hidden;
  }
  .chf-halo {
    position: absolute; top: -180px; right: -140px;
    width: 560px; height: 560px; border-radius: 50%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.13), transparent 65%);
    pointer-events: none;
  }
  .chf-in { position: relative; max-width: 1320px; margin: 0 auto; }
  .chf-kicker { text-align: left; }
  .chf-titre {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: clamp(26px, 3.2vw, 42px);
    letter-spacing: -0.015em;
    color: var(--text);
    margin: 10px 0 clamp(40px, 6vh, 64px);
  }
  .chf-grille {
    display: grid;
    grid-template-columns: auto 1px auto;
    justify-content: space-between;
    align-items: center;
  }
  .chf-sep { width: 1px; align-self: stretch;
    background: linear-gradient(180deg, transparent, rgba(96, 165, 250, 0.35), transparent); }
  .chf-nombre {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 200; letter-spacing: -0.01em; line-height: 0.95;
    color: var(--text);
    font-size: clamp(58px, 6.4vw, 92px);
  }
  .chf-grand .chf-nombre, .chf-nombre.chf-grand {
    font-size: clamp(128px, 15.5vw, 244px);
  }
  .chf-nombre {
    transition: transform 1.15s cubic-bezier(0.25, 0.8, 0.3, 1), clip-path 1.15s cubic-bezier(0.25, 0.8, 0.3, 1);
  }
  .sec-chiffres:not(.chfon) .chf-nombre {
    transform: translateY(0.32em);
    clip-path: inset(-10% -15% 0.302em -15%);
  }
  .sec-chiffres.chfon .chf-nombre {
    transform: translateY(0);
    clip-path: inset(-10% -15% -10% -15%);
  }
  @media (prefers-reduced-motion: reduce) {
    .chf-nombre { transition: none; }
    .sec-chiffres:not(.chfon) .chf-nombre { transform: none; clip-path: none; }
  }
  .chf-val {
    display: inline-block;
    font-variant-numeric: tabular-nums;
  }
  .chf-val[data-cible="31"], .chf-val[data-cible="70"] { min-width: 2ch; }
  .chf-val[data-cible="9"] { min-width: 2ch; text-align: center; }
  .chf-unite {
    font-size: 0.42em; font-weight: 300;
    color: #6fb0ff; margin-left: 0.1em;
  }
  .chf-moyen .chf-unite { margin-left: calc(0.1em - 10px); }
  .chf-trait {
    display: block; position: relative; overflow: visible;
    height: 1.5px; border-radius: 2px;
    margin: 12px 0 0;
    background: linear-gradient(90deg, transparent, rgba(148, 197, 255, 0.95), transparent);
  }
  .chf-trait::after {
    content: ""; position: absolute;
    left: -14%; right: -14%; bottom: 0;
    height: 44px;
    background: radial-gradient(ellipse 62% 150% at 50% 100%, rgba(222, 237, 255, 0.30), rgba(165, 203, 255, 0.08) 48%, transparent 74%);
    filter: blur(6px);
    pointer-events: none;
  }
  .chf-gauche .chf-trait {
    height: 2.5px;
    margin-top: 20px; margin-bottom: 16px;
  }
  .chf-gauche .chf-trait::after { height: 104px; }
  .chf-bloc .chf-trait-7 {
    height: 2px;
    margin-top: 13px;
  }
  .chf-bloc .chf-trait-7::after { height: 66px; }
  .chf-bloc .chf-trait-60 {
    height: 1.75px;
    margin-top: 18px;
  }
  .chf-texte {
    font-size: clamp(14.5px, 1.15vw, 17px); line-height: 1.6;
    color: #9aa8bf;
  }
  .chf-texte .hl { color: #6fb0ff; font-weight: 500; }
  .chf-gauche .chf-texte { font-size: clamp(17px, 1.5vw, 22px); }
  .chf-bloc-7 .chf-texte { font-size: clamp(15.5px, 1.28vw, 19px); }
  .chf-droite { display: flex; flex-direction: column; gap: 34px; }
  .chf-ligne { height: 1px;
    background: linear-gradient(90deg, rgba(96, 165, 250, 0.3), transparent); }
  .chf-bloc {
    display: flex; align-items: center;
    gap: clamp(20px, 2.2vw, 36px);
  }
  .chf-num-col { flex-shrink: 0; }
  .chf-nombre.chf-moyen { font-size: clamp(96px, 11vw, 152px); }
  .chf-bloc .chf-trait { margin: 8px 0 0; }
  .chf-bloc .chf-trait.chf-trait-7 { margin-top: 13px; }
  .chf-bloc .chf-trait.chf-trait-60 { margin-top: 15px; }
  .chf-sources {
    margin-top: clamp(44px, 6vh, 64px);
    font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
    color: #55627a;
  }
  .chf-sources a {
    color: #55627a;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(96, 165, 250, 0.35);
    transition: color 0.2s ease;
  }
  .chf-sources a:hover { color: #6fb0ff; }

  @media (max-width: 1023px) {
    .sec-schema { padding: 54px 18px 62px; }
    .sec-portes { min-height: auto; padding: 72px 0; }
    .portes-conteneur { width: calc(100% - 32px); }
    .portes-entete { margin-bottom: 40px; }
    .portes-titre { font-size: 38px; line-height: 1.08; }
    .portes-titre br { display: none; }
    /* Lot 2.58.0 (demande de Noa) : version compacte des trois portes.
       Le dessin du PC (bulles-svg), etire sur telephone, chevauchait le
       texte : il est masque ici et chaque carte reprend ses codes en CSS
       (verre, contour lumineux degrade a la couleur de la porte, extremite
       droite arrondie, halo), reliees par un fil lumineux vertical. */
    .bulles-svg { display: none; }
    .voies, .voies.numeros-dehors { padding: 0; margin: 0; gap: 18px; }
    .voies::before {
      content: ""; position: absolute; left: 52px; top: 48px; bottom: 48px; width: 1.5px;
      background: linear-gradient(180deg, #57a9ff, #9277ff 50%, #20dcef);
      box-shadow: 0 0 8px rgba(96, 165, 250, 0.55);
      pointer-events: none;
    }
    .voie {
      height: auto;
      min-height: auto;
      grid-template-columns: 68px 1fr;
      gap: 16px 30px;
      padding: 23px 28px 23px 18px;
      border: 0;
      border-radius: 24px 56px 56px 24px;
      background:
        radial-gradient(120% 70% at 22% 0%, rgba(255, 255, 255, 0.07), transparent 62%),
        linear-gradient(90deg, color-mix(in srgb, currentColor 10%, rgb(7, 15, 30)), rgb(6, 13, 26) 46%, rgb(6, 12, 24));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 12px 30px rgba(0, 0, 0, 0.42),
        0 0 30px -10px currentColor;
    }
    .voie::before {
      content: ""; position: absolute; inset: 0; border-radius: inherit;
      padding: 1.2px;
      background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.9) 0%,
        currentColor 16%,
        color-mix(in srgb, currentColor 40%, transparent) 58%,
        color-mix(in srgb, currentColor 85%, transparent) 100%);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      mask-composite: exclude;
      opacity: 0.8;
      pointer-events: none;
    }
    .voie::after { width: 160px; }
    .voie-methode { border-left-color: rgba(65, 151, 255, 0.74); }
    .voie-modules { border-left-color: rgba(133, 100, 255, 0.68); }
    .voie-immersion { border-left-color: rgba(26, 218, 243, 0.65); }
    .voie-icone { width: 68px; height: 68px; grid-row: 1; align-self: center; top: 0; }
    .voie-icone::after { inset: 12px; }
    .voie-icone > svg,
    .voie-icone > .voie-glyphe { width: 28px; height: 28px; }
    .voie-corps { grid-column: 2; grid-row: 1; top: 0; }
    /* Lot 2.58.2 : le filet vertical longe le titre et le texte, au meme
       niveau que le pictogramme ; le lien reste en dessous. Meme filet que
       sur PC (couleur du texte), seulement plus haut. */
    .voie-corps p::before { display: none; }
    .voie-corps::before {
      content: ""; position: absolute;
      left: -15px; top: 3px; bottom: 3px; width: 1.5px;
      border-radius: 2px;
      background: linear-gradient(180deg,
        color-mix(in srgb, #c5c4c9 70%, transparent),
        color-mix(in srgb, #c5c4c9 45%, transparent));
      box-shadow: 0 0 6px color-mix(in srgb, #c5c4c9 35%, transparent);
    }
    .voie-corps h3 { font-size: 20px; }
    .voie-corps p { font-size: 14px; line-height: 1.6; }
    .voie-corps p br { display: none; }
    .voie-lien { grid-column: 2; grid-row: 2; justify-self: start; margin-left: 0; margin-top: 2px; }
    .voie-num { display: none; }
    .bande-site {
      width: 100%;
      margin-left: 0;
      margin-top: 24px;
      height: auto;
      aspect-ratio: auto;
      border-radius: 22px;
      padding: 22px 22px 22px 92px;
      display: block;
    }
    .bs-ico { left: 20px; width: 56px; height: 56px; }
    .bs-filet, .bs-panneau, .bs-diag { display: none; }
    .bs-txt { position: static; transform: none; }
    .bs-titre { font-size: 17px; }
    .bs-desc { font-size: 13.5px; margin-top: 8px; }
    .bs-cta { position: static; transform: none; margin-top: 14px; display: inline-flex; font-size: 15px; }
    .sec-chiffres { padding: 48px 18px 52px; }
    .chf-titre { margin-bottom: 30px; }
    .chf-grille { grid-template-columns: 1fr; gap: 30px 0; }
    .chf-sep { display: none; }
    .chf-nombre.chf-grand { font-size: 96px; }
    .chf-nombre { font-size: 56px; }
    .chf-nombre.chf-moyen { font-size: 74px; }
    .chf-texte br { display: none; }
    .chf-droite { gap: 26px; }
    .chf-bloc { gap: 18px; }
    .chf-sources { margin-top: 36px; font-size: 10px; }
    .sec-outils { padding: 0 0 44px; }
    .outils-titre { font-size: 10px; letter-spacing: 0.18em; margin-bottom: 20px; padding: 0 18px; }
    .outils-bande { padding: 18px 0; }
    .outils-piste { animation-duration: 42s; }
    .outils-piste img { height: 32px; margin: 0; }
    .sec-kicker { font-size: 10px; letter-spacing: 0.26em; margin-bottom: 16px; }
    .sec-schema h2 { font-size: clamp(22px, 5.6vw, 28px); margin-bottom: 16px; }
    .sec-schema h2 br { display: none; }
    .sec-intro { font-size: 14px; margin-bottom: 34px; max-width: 460px; }
    .sec-intro br { display: none; }
    .sch-cards { grid-template-columns: 1fr; gap: 16px; max-width: 460px; margin: 0 auto; }
    .sch-card { padding: 30px 24px 28px; border-radius: 18px; }
    .sch-ico { height: 74px; margin-bottom: 24px; }
    .sch-ico img { width: 100%; max-width: 210px; height: 100%; object-fit: cover; margin: 0 auto; }
    .sch-ico svg { width: 66px; height: 52px; }
    .sch-card h3 { font-size: 17px; letter-spacing: 0.04em; margin-bottom: 12px; }
    .sch-rule { margin-bottom: 18px; }
    .sch-card p { font-size: 13.5px; max-width: 320px; }
    .sch-card p br { display: none; }
    .sch-close { font-size: 14px; margin-top: 36px; max-width: 460px; }
  }

  /* ---------- MOBILE : tab bar en bas + feuilles ---------- */
  @media (max-width: 1023px) {
    .nav, .header-right .btn-cta { display: none; }
    .link-espace { font-size: 13px; }
    body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }

    .tabbar {
      position: fixed; bottom: 0; left: 0; right: 0; z-index: 120;
      display: flex; align-items: stretch;
      background: rgba(8, 14, 27, 0.96);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-top: 1px solid var(--panel-border);
      padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
    }
    .tab {
      flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
      padding: 4px 2px; border-radius: 12px;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 10.5px; font-weight: 600; color: var(--muted);
      transition: color 0.15s ease;
    }
    .tab svg { width: 21px; height: 21px; }
    .tab.active { color: var(--accent); }
    .tab-diag { color: var(--blue-light); }
    .tab-diag .tab-ico-wrap {
      width: 34px; height: 34px; margin-top: -14px; border-radius: 12px;
      background: linear-gradient(135deg, #3b82f6, #38bdf8);
      display: flex; align-items: center; justify-content: center;
      color: #04101f;
      box-shadow: 0 0 16px rgba(59, 130, 246, 0.45);
    }

    .sheet-backdrop {
      position: fixed; inset: 0; z-index: 110;
      background: rgba(2, 5, 10, 0.6);
      opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
    }
    body.sheet-open .sheet-backdrop { opacity: 1; pointer-events: auto; }
    .sheet {
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 115;
      background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02) 20%, transparent 40%),
        radial-gradient(120% 60% at 50% 0%, rgba(96, 165, 250, 0.10), transparent 60%),
        rgba(9, 16, 31, 0.985);
      backdrop-filter: blur(28px) saturate(1.6);
      -webkit-backdrop-filter: blur(28px) saturate(1.6);
      border: 1px solid rgba(255, 255, 255, 0.14); border-bottom: none;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 -18px 50px rgba(0, 0, 0, 0.5);
      border-radius: 20px 20px 0 0;
      max-height: 72vh; overflow-y: auto;
      transform: translateY(105%); transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
      padding: 0 20px calc(90px + env(safe-area-inset-bottom));
      box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.5);
    }
    .sheet.open { transform: translateY(0); }
    /* Lot 2.56.0 : une feuille fermee sort du parcours clavier et de
       VoiceOver, une fois descendue (meme animation qu avant). */
    .sheet { visibility: hidden; transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0.28s; }
    .sheet.open { visibility: visible; transition-delay: 0s; }
    .sheet-handle {
      width: 40px; height: 4px; border-radius: 999px; background: #2e3f63;
      margin: 10px auto 14px;
    }
    .sheet-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 19px; font-weight: 800; margin-bottom: 4px;
    }
    /* v1.311 : la feuille Modules porte deux groupes. */
    .sheet-title-2 { margin-top: 30px; }
    .sheet[data-sheet="modules"] .m-sec {
      background:
        linear-gradient(165deg, color-mix(in srgb, var(--cat, #60a5fa) 9%, transparent), transparent 75%),
        rgba(255, 255, 255, 0.02);
      border: 1px solid color-mix(in srgb, var(--cat, #ffffff) 18%, rgba(255, 255, 255, 0.05));
      border-radius: 14px;
      padding: 4px 14px 10px;
      margin-top: 14px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
    }
    .m-cat {
      text-align: center;
      font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
      position: relative;
      padding-bottom: 9px; color: var(--cat, var(--accent));
      margin: 18px 0 8px;
    }
    .m-cat::after {
      content: "";
      position: absolute; left: 50%; bottom: 0;
      transform: translateX(-50%);
      width: 48px; height: 1.5px; border-radius: 2px;
      background: var(--cat, var(--panel-border));
    }
    .m-link {
      display: flex; align-items: center; gap: 12px;
      padding: 8px 0; border-bottom: 1px solid rgba(27, 39, 64, 0.55);
    }
    .sheet[data-sheet="methode"] > .m-link {
      border: 1px solid color-mix(in srgb, var(--cat, #ffffff) 28%, rgba(255, 255, 255, 0.08));
      border-radius: 14px;
      background:
        linear-gradient(135deg, var(--cat-bg, rgba(255, 255, 255, 0.06)), rgba(255, 255, 255, 0.015) 60%),
        rgba(10, 17, 32, 0.45);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
      padding: 14px; margin-bottom: 12px;
    }
    .sheet[data-sheet="methode"] > .m-link .m-ico {
      border-color: rgba(255, 255, 255, 0.16);
      background: rgba(255, 255, 255, 0.07);
    }
    .m-ico {
      flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px;
      border: 1px solid var(--panel-border); background: var(--cat-bg, rgba(59, 130, 246, 0.08));
      display: flex; align-items: center; justify-content: center;
      color: var(--cat, var(--blue-light));
    }
    .m-ico svg { width: 15px; height: 15px; }
    .m-link .mega-t { font-size: 14.5px; font-weight: 600; }
    .m-link p { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
    .m-link-desc { align-items: flex-start; padding: 12px 0; }
    .m-link-desc .m-ico { margin-top: 2px; }
    .m-expand { cursor: pointer; }
    .m-expand .m-chev { margin-left: auto; color: var(--muted); flex-shrink: 0; transition: transform 0.25s ease; }
    .m-expand.open .m-chev { transform: rotate(180deg); }
    .m-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; }
    .m-expand.open + .m-sub { grid-template-rows: 1fr; }
    .m-sub-in { overflow: hidden; }
    .m-sub a {
      display: flex; align-items: center; justify-content: space-between;
      /* Lot 2.58.3 (demande de Noa) : pleine largeur, comme les cartes
         du dessus (plus de retrait de 44 px a gauche), meme hauteur. */
      padding: 10px 12px; margin: 0 0 7px;
      border: 1px solid var(--panel-border); border-radius: 9px;
      font-size: 13.5px; font-weight: 600;
    }
    .m-sub a:first-child { margin-top: 10px; }
    .m-sub a svg { color: var(--muted); }
    .sheet[data-sheet="immersion"] .m-link-desc {
      background:
        linear-gradient(165deg, color-mix(in srgb, var(--cat, #60a5fa) 9%, transparent), transparent 75%),
        rgba(255, 255, 255, 0.02);
      border: 1px solid color-mix(in srgb, var(--cat, #ffffff) 18%, rgba(255, 255, 255, 0.05));
      border-radius: 14px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
      padding: 14px; margin-top: 12px;
    }
  }
  @media (min-width: 1024px) {
    .tabbar, .sheet, .sheet-backdrop { display: none !important; }
  }
  /* DERNIER MOT SUR LE RAIL. Plusieurs regles plus haut, dont une
     reservee au menu de La vitrine, remettaient un rembourrage sur
     les familles : c est ce qui laissait une reserve de 33 pixels
     sous chaque ligne et decalait le texte entre ses deux filets.
     Ces trois lignes sont posees a la toute fin du gabarit, elles
     ont donc le dernier mot, quel que soit l ecran. */
  .nav-item .mega-cols-5.mega-cascade .mega-sec,
  .nav-item[data-menu="vitrine"] .mega-cols-5.mega-cascade .mega-sec,
  .nav-item[data-menu="interne"] .mega-cols-5.mega-cascade .mega-sec {
    padding: 0;
  }
  /* Meme histoire pour l ecart entre familles et le rembourrage du
     panneau : des regles d ecran plus etroit les remettaient. */
  .nav-item .mega-cols-5.mega-cascade,
  .nav-item[data-menu="vitrine"] .mega-cols-5.mega-cascade,
  .nav-item[data-menu="interne"] .mega-cols-5.mega-cascade {
    gap: 0;
  }
  .nav-item[data-menu="interne"] .mega-panel,
  .nav-item[data-menu="vitrine"] .mega-panel {
    padding: 0;
  }
  /* LE PREMIER MENU TOMBE PILE SOUS SON BOUTON. Le panneau etait
     centre sur la page entiere : le rail des familles se retrouvait
     loin du bouton qui l ouvre. Ici le deroulant est ancre sur son
     bouton, et decale de la moitie du rail (174 px) : le centre du
     rail tombe donc exactement au centre des mots du menu. */
  .nav-item[data-menu="interne"],
  .nav-item[data-menu="vitrine"] { position: relative; }
  .nav-item[data-menu="interne"] .mega,
  .nav-item[data-menu="vitrine"] .mega {
    left: 50%; right: auto; width: 912px; margin-left: -208px;
    padding: 18px 20px 28px;
  }
  .nav-item[data-menu="interne"] .mega-panel,
  .nav-item[data-menu="vitrine"] .mega-panel { max-width: none; margin: 0; }
  /* Sur un ecran etroit, on ne laisse pas le deroulant sortir de la
     page : il se recale a gauche. */
  @media (max-width: 1500px) {
    .nav-item[data-menu="interne"] .mega,
    .nav-item[data-menu="vitrine"] .mega { left: auto; right: 0; margin-left: 0; }
  }

  /* ============================================================
     LA FLECHE RETOUR (lot 2.33.0), sur toutes les pages sauf l accueil.
     Decision de Noa du 21/09/2026 : en haut a gauche, dans l esprit de
     l ancienne pastille mo-retour mais SANS contour, la fleche et le mot
     Retour souligne, le meme texte partout, couleur adaptee au fond.
     Elle est posee PAR-DESSUS la page (barre de hauteur nulle, lien en
     position absolue) : rien de ce qui est deja en place ne bouge.
     ============================================================ */
  .retour-barre { position: relative; height: 0; z-index: 20; }
  .retour-lien {
    position: absolute; top: 18px; left: 36px;
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 14.5px; font-weight: 600; line-height: 1;
    color: var(--muted); text-decoration: none;
    padding: 6px 0; transition: color .16s ease;
  }
  .retour-lien span {
    text-decoration: underline; text-decoration-thickness: 1px;
    text-underline-offset: 4px;
  }
  .retour-lien:hover { color: var(--text); }
  .retour-lien svg { width: 16px; height: 16px; flex: none; transition: transform .16s ease; }
  .retour-lien:hover svg { transform: translateX(-3px); }
  /* Pages Methode : le haut de page porte un fond colore, le gris y
     ressortirait mal. On passe au blanc legerement adouci. La fleche y
     remonte de 14 pixels : les visuels du haut de ces pages (cartes de
     Gestion planning notamment) commencent tres pres de l en-tete. */
  .retour-lien.retour-clair { color: rgba(255, 255, 255, .86); top: 4px; }
  .retour-lien.retour-clair:hover { color: #fff; }
  /* L ancienne pastille des sections et des familles laisse la place a
     la fleche commune : un seul texte partout. */
  .mo-retour { display: none !important; }
  @media (max-width: 768px) {
    .retour-lien { top: 12px; left: 18px; font-size: 14px; }
  }

  /* ============================================================
     LES BANDEROLES (lot 2.53.83, fleches au 2.53.84, demandes de Noa)
     Bandes pleine largeur en bas des pages La methode et des pages de
     modules. La piste defile au doigt ; une fleche de chaque cote la
     fait glisser d un ecran de cartes, et revient au debut une fois au
     bout (JS_BANDEROLE, accueil.js). Chaque carte porte la couleur de
     son volet ou de la page de son module (--c, en r, g, b).
     ============================================================ */
  main:has(.ban) { overflow-x: clip; }
  .ban { position: relative; width: 100vw; margin-left: calc(50% - 50vw); }
  /* .ban .ban-piste : passe devant la remise a zero .md-da2 * des pages
     de modules, qui retirait la marge des cartes (lot 2.53.85). */
  .ban .ban-piste {
    /* Lot 2.53.86 : bande sans fin, la carte active se cale au milieu.
       Plus de marge de depart : des cartes de chaque cote. */
    --ban-marge: 0px;
    display: flex; gap: 18px; overflow-x: auto; scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    /* Lot 2.54.2 : plus d air en haut (les anneaux depassent des cartes)
       et en bas (l ombre n est plus coupee net). */
    padding: 30px var(--ban-marge) 52px; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  }
  .ban-piste::-webkit-scrollbar { display: none; }
  .ban-fl {
    position: absolute; top: calc(50% - 5px); z-index: 2; transform: translateY(-50%);
    width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: #ffffff; color: #0b1220; border: 1px solid rgba(11, 18, 32, 0.12);
    box-shadow: 0 8px 22px rgba(15, 30, 60, 0.16);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  }
  .ban-fl svg { width: 20px; height: 20px; }
  .ban-fl:hover { transform: translateY(-50%) scale(1.07); box-shadow: 0 12px 28px rgba(15, 30, 60, 0.22); }
  .ban-fl:focus-visible { outline: 2px solid #3b82f6; outline-offset: 3px; }
  .ban-prec { left: 20px; }
  .ban-suiv { right: 20px; }
  .ban a {
    position: relative; overflow: visible; flex: none; width: 290px; text-decoration: none;
    scroll-snap-align: center;
    display: flex; flex-direction: column; gap: 8px;
    border-radius: 22px; padding: 34px 22px 20px;
    border: 1px solid rgba(var(--c), 0.50);
    background: linear-gradient(160deg, rgba(var(--c), 0.26) 0%, rgba(var(--c), 0.10) 55%, #ffffff 100%);
    box-shadow: 0 10px 24px rgba(var(--c), 0.18), 0 1px 2px rgba(15, 30, 60, 0.06);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  }
  /* Lot 2.54.2 (demande de Noa, photo d un carnet a spirale) : chaque
     carte porte une reliure, dessinee en dur (pas une photo detouree) :
     une rangee de trous perces pres du bord haut et, dans chacun, un
     anneau double en fil noir qui depasse au-dessus de la carte : la
     patte avant plonge dans le trou (levre basse redessinee par-dessus),
     la patte arriere passe derriere le bord. Le
     motif se repete tous les 36 px. Remplace le filet de couleur. */
  .ban a::before {
    content: ""; position: absolute; left: 24px; right: 24px; top: -15px; height: 34px;
    pointer-events: none;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='36' height='34' viewBox='0 0 36 34'><rect x='5.8' y='19.5' width='15' height='10' rx='2.6' fill='%23eef1f6'/><rect x='5.8' y='19.5' width='15' height='3.4' rx='2.6' fill='%230b1220' fill-opacity='.16'/><g fill='none' stroke-linecap='round' stroke='%2314171f' stroke-width='2.1'><path d='M11.3 26 L11.3 8.5 A3.6 3.6 0 0 1 18.5 8.5 L18.5 15'/><path d='M15.3 26 L15.3 8.5 A3.6 3.6 0 0 1 22.5 8.5 L22.5 15'/></g><g fill='none' stroke-linecap='round' stroke='%23ffffff' stroke-opacity='.4' stroke-width='.7'><path d='M11.9 22 L11.9 8.6 A3 3 0 0 1 14.2 5.7'/><path d='M15.9 22 L15.9 8.6 A3 3 0 0 1 18.2 5.7'/></g><path d='M5.8 25 L20.8 25 L20.8 26.9 A2.6 2.6 0 0 1 18.2 29.5 L8.4 29.5 A2.6 2.6 0 0 1 5.8 26.9 Z' fill='%23eef1f6'/><rect x='5.8' y='19.5' width='15' height='10' rx='2.6' fill='none' stroke='%230b1220' stroke-opacity='.22'/></svg>") left top / 36px 34px space no-repeat;
  }
  .ban a:hover {
    transform: translateY(-3px); border-color: rgba(var(--c), 0.85);
    box-shadow: 0 16px 32px rgba(var(--c), 0.28), 0 1px 2px rgba(15, 30, 60, 0.06);
  }
  .ban b { display: block; font-size: 15.5px; font-weight: 700; line-height: 1.3; color: #0b1220; }
  .ban span { display: block; flex: 1; font-size: 13.5px; line-height: 1.5; color: #33415f; }
  .ban em {
    font-style: normal; font-size: 13px; font-weight: 700;
    color: color-mix(in srgb, rgb(var(--c)) 55%, #0b1220);
  }
  .ban em::after { content: " \2192"; }
  .ban .ban-tag {
    flex: none; align-self: flex-start; font-size: 10.5px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; line-height: 1;
    padding: 6px 10px; border-radius: 999px;
    color: color-mix(in srgb, rgb(var(--c)) 55%, #0b1220);
    background: rgba(var(--c), 0.16);
  }
  .ban-m a { width: 268px; }
  /* Lot 2.54.4 (demande de Noa) : la reliure a spirale reste aux cartes
     de MODULES ; les cartes des volets de La methode (.ban-v) gardent
     leur aspect d avant, filet de couleur en haut et marge de 22 px. */
  .ban-v a { padding-top: 22px; }
  .ban-v a::before {
    left: 22px; right: 22px; top: 0; height: 4px;
    border-radius: 0 0 4px 4px; background: rgb(var(--c));
  }
  .ban-ico {
    flex: none; width: 44px; height: 44px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    color: #ffffff; background: rgb(var(--c));
    box-shadow: 0 6px 16px rgba(var(--c), 0.40);
  }
  .ban-ico svg { width: 21px; height: 21px; }
  .ban .ban-pd {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    border-top: 1px solid rgba(var(--c), 0.30); padding-top: 10px; color: inherit;
  }
  .ban .ban-pd::after { content: none; }
  .ban .ban-px { font-size: 12.5px; font-weight: 700; color: #0b1220; }
  .ban-px small { font-size: 11.5px; font-weight: 600; color: #4d5f85; }
  .ban .ban-go { flex: none; font-size: 12.5px; font-weight: 700; color: color-mix(in srgb, rgb(var(--c)) 55%, #0b1220); }
  .ban-go::after { content: " \2192"; }
  @media (max-width: 560px) {
    .ban a { width: 256px; }
    .ban-m a { width: 240px; }
    /* Lot 2.58.3 (demande de Noa) : sur telephone, les fleches reviennent
       SUR la bande, aux deux extremites, a mi-hauteur des cartes. Elles se
       posent sur le bord des cartes voisines, jamais sur la carte du
       milieu. */
    .ban-fl { top: calc(50% - 11px); width: 40px; height: 40px; }
    .ban-fl svg { width: 17px; height: 17px; }
    .ban-prec { left: 8px; }
    .ban-suiv { right: 8px; }
  }

  /* ============================================================
     LES CHAMPS NON VALIDES (lot 2.54.4, demande de Noa)
     Un nom ou un prenom qui contient un caractere refuse par l etat
     civil passe en rouge, avec un message dessous (JS_CHAMPS).
     ============================================================ */
  .champ-faux, .champ-faux:focus {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18) !important;
  }
  .champ-faux-msg { display: block; margin-top: 7px; font-size: 12.5px; font-weight: 600; color: #f87171; }
  .champ-faux-msg[hidden] { display: none; }
  .fo .champ-faux-msg { color: #c62828; }

  /* ============================================================
     Lot 2.56.0 : CHAMPS A 16 PX SUR ECRAN TACTILE (audit du 07/10/2026)
     Sur ecran tactile, Safari agrandit la page des qu on touche un
     champ ecrit en moins de 16 px, et ne la ramene pas. Le texte saisi
     dans le chat et dans la recherche de l accueil passe donc a 16 px
     sur ecran tactile ; rien ne change a la souris.
     ============================================================ */
  @media (hover: none) and (pointer: coarse) {
    .chatbox-champ, .hero-field input { font-size: 16px; }
    /* Lot 2.58.6 : sur iPhone, le flou d arriere-plan de la barre de
       recherche faisait dessiner le curseur au mauvais endroit pendant
       l ouverture du clavier. Fond un peu plus opaque a la place : meme
       rendu a l oeil sur le fond sombre de l accueil. */
    .hero-search { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(6, 14, 28, 0.9); }
  }
  /* Lot 2.56.0 : en anglais, le titre de L immersion (style de base dans
     worker.js, .ch-titre sur une seule ligne) passe a la ligne au lieu
     de sortir de l ecran a 1024 et 1280 px. */
  html[lang="en"] .ch-titre { white-space: normal; text-wrap: balance; }

  /* ============================================================
     REDUIRE LES ANIMATIONS (lot 2.60.0, choix de Noa). Un visiteur qui
     a coche Reduire les animations sur son iPhone (ou son ordinateur)
     ne voit plus rien bouger : chaque animation saute directement a son
     etat final, le defilement n est plus glisse. Le contenu reste le
     meme. Les autres visiteurs ne voient aucune difference. Les
     animations pilotees par script (machine a ecrire, titre, compteurs)
     sont arretees dans leurs scripts.
     ============================================================ */
  @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;
      scroll-behavior: auto !important;
    }
  }