/* ═══ Axolo Design Manager · page de teasing (brief du 06/10, allégée le 07/10) ═════════════
   Sur main-2026.css : mêmes jetons, mêmes composants. Registre « précis comme le produit » : un
   titre, une ligne, une image par section ; le produit montré en traits fins, jamais en pavés.
   Code couleur du produit : --encre en TIRETÉ = exploration, --conforme = conforme au DS. */
.p-manager { --dm-tiret: 1px dashed var(--encre); }

/* ═══ DA sombre du logiciel (Figma « axolo » 596:1087, 13/10/2026) ═══════════════════════════════
   Le site des services est beige, le logiciel est noir. Les sections .blanc, la FAQ et le pied
   restent blancs : la page alterne, comme la maquette. Les zones sombres REDÉFINISSENT les jetons
   de rôle (encre, texte faible, filets, surlignage, accent) et le reste des règles suit sans être
   réécrit ; une carte blanche posée dans une zone sombre rappelle les jetons clairs. */
.p-manager {
  --background: #100F0F;
  --peche: #FFA691;
  --peche-clair: #FFC99F;
  --encre-sur-peche: #171717;
  --encre-clair: #3B2922; --text-weak-clair: #63666D; --filet-clair: #ECE8E1;
  --lueur-logo-1: rgba(255, 166, 145, .45); --lueur-logo-2: rgba(248, 144, 168, .24);
  --ombre-produit: 0 1px 2px rgba(0, 0, 0, .5), 0 24px 60px rgba(0, 0, 0, .55);
}
.p-manager .entete, .p-manager .dm-hero, .p-manager .dm-section:not(.blanc), .p-manager .final {
  --encre: #FFFFFF; --encre-press: #FFFFFF;
  --text-weak: rgba(249, 242, 237, .72);
  --filet: rgba(249, 242, 237, .16); --stroke-weak: rgba(249, 242, 237, .12); --stroke-strong: rgba(249, 242, 237, .34);
  --surligne: rgba(255, 166, 145, .12);
  --corail: var(--peche); --brand: var(--peche);
  --accent-ink: var(--encre-sur-peche);
  color: var(--encre);
}
/* Un grain léger sur le noir (la texture de la maquette) : une tuile SVG de bruit, même origine.
   Les sections blanches posent leur propre fond opaque, le grain ne les touche pas. */
.p-manager { background-image: url("/a/fonds/grain.svg?v=e3e4bca8"); }
.p-manager .entete.colle { background: var(--background) url("/a/fonds/grain.svg?v=e3e4bca8"); }
/* Deux halos pêche fixés derrière la page (les deux ellipses floutées de la maquette) */
.p-manager::before, .p-manager::after { content: ""; position: fixed; z-index: -1; pointer-events: none; width: 72vw; height: 50vw; border-radius: 50%; background: radial-gradient(closest-side, rgba(209, 147, 123, .22), rgba(209, 147, 123, 0)); }
.p-manager::before { right: -26vw; top: -22vw; }
.p-manager::after { left: -32vw; top: 42vh; }
/* L'appel à l'action du logiciel est pêche, texte sombre ; il s'éclaircit au survol */
.p-manager .entete .pilule-noire, .p-manager .dm-hero .pilule-noire, .p-manager .final .pilule-noire, .p-manager .liste-second .pilule-noire { background: var(--peche); color: var(--encre-sur-peche); }
.p-manager .entete .pilule-noire:hover, .p-manager .dm-hero .pilule-noire:hover, .p-manager .final .pilule-noire:hover, .p-manager .liste-second .pilule-noire:hover { background: var(--peche-clair); }
.p-manager .dm-hero .lede { color: var(--peche-clair); }
.p-manager .tag-ia { color: var(--encre-sur-peche); }
.p-manager .hero-image { box-shadow: var(--ombre-produit); }
/* Les champs et la carte du second temps restent clairs : on y rappelle les jetons clairs */
.p-manager .liste input, .p-manager .liste select { color: var(--encre-clair); }
.p-manager .liste input:focus-visible, .p-manager .liste select:focus-visible { border-color: var(--peche); }
.p-manager .liste-second, .p-manager .liste-merci { --encre: var(--encre-clair); --text-weak: var(--text-weak-clair); --filet: var(--filet-clair); color: var(--encre); }

.p-manager .produit-nom { font-family: var(--mono); font-size: var(--type-chip); letter-spacing: var(--track-data); text-transform: uppercase; color: var(--text-weak); margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--filet); white-space: nowrap; }
.p-manager .wordmark { align-items: center; }
/* La page est en anglais : l-étiquette du mot cadré aussi (la feuille de marque dit « IA ready »). */
.p-manager .tag-ia::after { content: "AI ready"; }

/* Hero */
.p-manager .dm-hero { text-align: center; padding: var(--espace-hero) 0 var(--espace-section); }
.p-manager .dm-hero .eyebrow { margin-bottom: var(--espace-bloc); }
.p-manager .dm-hero h1 { font-size: var(--type-hero); line-height: 1.08; max-width: var(--width-contenu); margin: 0 auto var(--espace-grille); }
.p-manager .dm-hero .lede { color: var(--text-weak); font-size: var(--type-lede); line-height: 1.33; max-width: var(--width-etroit); margin: 0 auto calc(var(--espace-grille) * 1.5); text-wrap: balance; }
.p-manager .reassurance { font-family: var(--mono); font-size: var(--type-legende); letter-spacing: var(--track-data); text-transform: uppercase; color: var(--text-weak); margin-top: var(--espace-bloc); }
.p-manager .reassurance span + span::before { content: "·"; margin: 0 10px; }

/* Formulaire en deux temps */
.p-manager .liste { max-width: 520px; margin: 0 auto; text-align: left; }
.p-manager .liste-ligne { display: flex; gap: 10px; }
.p-manager .liste input, .p-manager .liste select { flex: 1; min-width: 0; height: 48px; padding: 0 18px; border: 1px solid var(--stroke-champ); border-radius: var(--r-pill); background: var(--paper); color: var(--encre); font: inherit; font-size: var(--type-body); transition: border-color var(--motion-micro) ease, box-shadow var(--motion-micro) ease; }
.p-manager .liste input:focus-visible, .p-manager .liste select:focus-visible { outline: none; border-color: var(--encre); box-shadow: 0 0 0 3px var(--surligne); }
/* Un <button> garde une bordure navigateur que la pilule-lien n-a pas : on l-enlève. */
.p-manager .liste .pilule-noire { height: 48px; display: inline-flex; align-items: center; padding: 0 22px; white-space: nowrap; border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.p-manager .liste-second { display: grid; gap: 10px; margin-top: var(--espace-bloc); padding: var(--espace-carte); background: var(--paper); border: 1px solid var(--filet); border-radius: var(--r-lg); }
.p-manager .liste-second p { color: var(--text-weak); font-size: var(--type-small); }
.p-manager .liste-second label { display: grid; gap: 6px; font-size: var(--type-small); color: var(--encre); font-weight: 600; }
.p-manager .liste-second input, .p-manager .liste-second select { height: 44px; border-radius: var(--r-md); }
.p-manager .liste-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.p-manager .liste-actions .pilule-noire { height: 44px; }
.p-manager .lien-calme { background: none; border: 0; font: inherit; font-size: var(--type-small); color: var(--text-weak); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0; }
.p-manager .lien-calme:hover { color: var(--encre); }
.p-manager .liste-merci { margin-top: var(--espace-bloc); padding: var(--espace-carte); border-radius: var(--r-lg); background: var(--conforme-fond); color: var(--conforme); font-weight: 600; }
.p-manager .liste-merci small { display: block; margin-top: 6px; font-weight: 400; color: var(--encre); }
.p-manager .liste-alerte { margin-top: var(--espace-bloc); padding: 14px var(--espace-bloc); border: 1px solid var(--brand); border-radius: var(--r-md); color: var(--brand); font-size: var(--type-small); }
.p-manager .liste [hidden] { display: none !important; }

/* Le produit en hero : une image, 2× la largeur de la colonne, posée à nu. Elle porte déjà sa
   fenêtre et son fond : pas de cadre par-dessus. */
.p-manager .produit { max-width: var(--width-console); margin: calc(var(--espace-grille) * 2.5) auto 0; }
.p-manager .hero-image { display: block; width: 100%; height: auto; border-radius: var(--r-xl); box-shadow: var(--ombre-carte); }

/* Sections : un titre, une ligne, une image */
.p-manager .dm-section { padding: var(--espace-section) 0; }
.p-manager .dm-section.blanc { background: var(--paper); border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.p-manager .section-tete { max-width: var(--width-argument); }
.p-manager .section-tete h2 { line-height: 1.12; }
.p-manager .section-tete p { max-width: var(--width-etroit); margin-inline: auto; font-size: var(--type-argument); line-height: 1.45; }

/* Trois constats : une ligne chacun */
.p-manager .constats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--espace-colonnes); margin-top: calc(var(--espace-grille) * 2.5); }
.p-manager .constat { border-top: 1px solid var(--filet); padding-top: 18px; display: grid; gap: 8px; }
.p-manager .constat .etiquette { font-family: var(--mono); font-size: var(--type-legende); letter-spacing: var(--track-data); text-transform: uppercase; color: var(--corail); }
.p-manager .constat p { font-size: var(--type-argument); line-height: 1.4; color: var(--encre); font-weight: 500; }

/* Étapes (reprend .etapes de la landing) : titre seul, une ligne faible */
.p-manager .etape p { font-size: var(--type-body); }

/* Méthode : le menu et trois mots reliés en tireté */
.p-manager .methode { display: grid; grid-template-columns: 1fr 1fr; gap: var(--espace-colonnes); align-items: center; margin-top: calc(var(--espace-grille) * 2.5); }
.p-manager .skills { font-size: 13px; }
.p-manager .skills .saisie { padding: 12px 16px; border-bottom: 1px solid var(--stroke-produit); font-family: var(--mono); color: var(--encre-produit); background: var(--fill); }
.p-manager .skills li { list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--stroke-weak); color: var(--text-weak); }
.p-manager .skills li:last-child { border-bottom: 0; }
.p-manager .skills li.actif { background: var(--surligne); }
.p-manager .skills code { font-family: var(--mono); color: var(--encre); white-space: nowrap; }
.p-manager .schema { display: flex; align-items: center; justify-content: center; gap: 18px; font-family: var(--display); font-weight: 700; font-variation-settings: "opsz" 14; font-size: var(--type-argument); color: var(--encre); }
.p-manager .schema .mcp { font-family: var(--mono); font-weight: 500; font-size: var(--type-small); letter-spacing: var(--track-data); color: var(--text-weak); border: var(--dm-tiret); border-radius: var(--r-pill); padding: 6px 14px; }
.p-manager .schema i { flex: 1; max-width: 72px; height: 0; border-top: var(--dm-tiret); }

/* Code et données : quatre lignes */
.p-manager .garanties { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--espace-colonnes); margin-top: calc(var(--espace-grille) * 2.5); }
.p-manager .garantie { border-top: 1px solid var(--filet); padding-top: 18px; font-size: var(--type-argument); line-height: 1.4; color: var(--encre); font-weight: 500; }
.p-manager .bientot-ligne { margin-top: calc(var(--espace-grille) * 2); text-align: center; font-size: var(--type-small); color: var(--text-weak); }
.p-manager .bientot { font-family: var(--mono); font-size: var(--type-chip); letter-spacing: var(--track-data); text-transform: uppercase; color: var(--text-weak); border: 1px solid var(--stroke-strong); border-radius: var(--r-pill); padding: 3px 8px; margin-right: 10px; }

/* Derrière et final */
.p-manager .derriere p { max-width: var(--width-etroit); margin: calc(var(--espace-grille) * 1.5) auto 0; text-align: center; font-size: var(--type-argument); line-height: 1.5; color: var(--text-weak); }
.p-manager .derriere p strong { color: var(--encre); font-weight: 600; }
.p-manager .derriere .fondateur-liens { justify-content: center; margin-top: var(--espace-grille); }
.p-manager .final { text-align: center; padding: var(--espace-section) 0; }
.p-manager .final .eyebrow { margin-bottom: var(--espace-bloc); }
.p-manager .final h2 { margin-bottom: calc(var(--espace-grille) * 1.5); }

@media (max-width: 900px) { .p-manager .constats, .p-manager .garanties { grid-template-columns: 1fr 1fr; } .p-manager .methode { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .p-manager .produit-nom { display: none; }
  .p-manager .mot-cadre { margin-top: 1em; }
  .p-manager .constats, .p-manager .garanties { grid-template-columns: 1fr; }
  .p-manager .liste-ligne { flex-direction: column; } .p-manager .liste .pilule-noire { justify-content: center; }
  .p-manager .schema { flex-direction: column; } .p-manager .schema i { width: 0; height: 22px; border-top: 0; border-left: var(--dm-tiret); }
}

/* ═══ Refonte du 13/10 : structure inspirée de xirp.spotify.com ═══════════════════════════════
   Un manifeste qui s'allume au défilement, puis six fonctions en rangées alternées : à gauche
   l'étiquette mono, le titre, un paragraphe ; à droite un fragment du produit refait en HTML,
   posé sur un panneau hachuré et coupé par son bord. Les fragments sont des cartes CLAIRES :
   elles rappellent les jetons clairs, comme le second temps du formulaire. */
.p-manager {
  --hachure: rgba(249, 242, 237, .07);
  --panneau: #181615;
  --ui-fond: #FBF9F6;
  --ui-carte: #FFFFFF;
  --ui-filet: #ECE8E1;
  --ui-faible: #63666D;
  --conforme-sombre: #7FD1A4;
}

/* Le surtitre du hero se « déchiffre » au chargement (manager.js) */
.p-manager .dm-hero .eyebrow { color: var(--peche); min-height: 1.4em; margin-bottom: calc(var(--espace-bloc) * 2.4); }

/* Manifeste : de grandes phrases, mot à mot, qui passent du gris au blanc au défilement */
.p-manager .dm-manifeste { padding-top: calc(var(--espace-section) * .6); }
.p-manager .manifeste { max-width: 760px; margin: 0 auto; display: grid; gap: 1.1em; }
.p-manager .manifeste p { font-family: var(--display); font-weight: 700; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.24; letter-spacing: -.01em; color: var(--encre); text-wrap: pretty; }
.js .p-manager .manifeste .mot { color: rgba(249, 242, 237, .22); transition: color 260ms ease; }
.js .p-manager .manifeste .mot.allume { color: var(--encre); }
.p-manager .manifeste p:last-child .allume { color: var(--peche-clair); }

/* Rangées de fonctions */
.p-manager .dm-fonctions { padding-top: calc(var(--espace-section) * .5); }
.p-manager .dm-fonctions .page { max-width: var(--width-large); }
.p-manager .fonction { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.p-manager .fonction + .fonction { margin-top: clamp(80px, 11vw, 150px); }
.p-manager .fonction.inverse .fonction-texte { order: 2; }
.p-manager .fonction-texte { max-width: 460px; }
.p-manager .fonction-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: var(--type-legende); letter-spacing: var(--track-data); text-transform: uppercase; color: var(--peche); margin-bottom: var(--espace-bloc); }
.p-manager .fonction-tag i { width: 9px; height: 9px; border-radius: 2px; background: var(--peche); transform: rotate(45deg); box-shadow: 0 0 0 3px rgba(255, 166, 145, .18); margin-right: 4px; }
.p-manager .fonction h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.1; margin-bottom: var(--espace-bloc); text-wrap: balance; }
.p-manager .fonction-texte p { color: var(--text-weak); font-size: var(--type-argument); line-height: 1.5; }
.p-manager .fonction-texte p code { font-family: var(--mono); font-size: .85em; color: var(--peche-clair); }

/* Le panneau hachuré, et le fragment coupé par son bord */
.p-manager .fonction-visuel { position: relative; aspect-ratio: 6 / 5; min-height: 420px; border-radius: 32px; overflow: hidden; background: repeating-linear-gradient(135deg, var(--hachure) 0 1.5px, transparent 1.5px 9px), var(--panneau); border: 1px solid var(--stroke-weak); display: grid; place-items: center; padding: 8%; }
.p-manager .ui { --encre: var(--encre-clair); color: var(--encre-clair); background: var(--ui-fond); border-radius: 18px; box-shadow: var(--ombre-produit); font-size: 14px; line-height: 1.4; width: 100%; }
.p-manager .ui-coin { position: absolute; left: 9%; top: 50%; transform: translateY(-50%); width: 94%; border-bottom-right-radius: 0; }
.p-manager .ui-barre { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--ui-filet); font-size: 13px; }
.p-manager .pastilles { display: flex; gap: 6px; }
.p-manager .pastilles i { width: 10px; height: 10px; border-radius: 50%; background: var(--ui-filet); }
.p-manager .pastilles i:first-child { background: var(--peche); }
.p-manager .ui-pilule { margin-left: auto; font-family: var(--mono); font-size: 11px; letter-spacing: var(--track-data); text-transform: uppercase; padding: 3px 10px; border-radius: var(--r-pill); background: var(--conforme-fond); color: var(--conforme); }
.p-manager .ui-corps { padding: 18px; }

/* 1 · l'agent et ses étapes */
.p-manager .bulle { background: var(--encre-produit); color: var(--ui-fond); padding: 10px 14px; border-radius: 14px 14px 4px 14px; width: fit-content; max-width: 62%; margin-left: 20%; font-size: 13.5px; }
.p-manager .etapes-agent { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; font-size: 12.5px; }
.p-manager .etapes-agent li { display: flex; gap: 10px; align-items: baseline; padding-left: 20px; position: relative; color: var(--ui-faible); }
.p-manager .etapes-agent li::before { content: "✓"; position: absolute; left: 0; color: var(--conforme); font-weight: 700; }
.p-manager .etapes-agent li.en-cours::before { content: ""; top: 4px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--peche); border-right-color: transparent; animation: dm-tourne 1s linear infinite; }
.p-manager .etapes-agent code { font-family: var(--mono); color: var(--encre-clair); }
.p-manager .verdict { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--ui-filet); color: var(--ui-faible); font-size: 13px; }
.p-manager .verdict b { color: var(--conforme); }
@keyframes dm-tourne { to { transform: rotate(360deg); } }

/* 2 · le choix de liberté, façon menu déroulant */
.p-manager .choix { display: grid; gap: 8px; width: min(100%, 320px); margin-top: -12px; }
.p-manager .choix-carte { display: flex; align-items: center; gap: 14px; padding: 9px 14px; border-radius: 16px; background: var(--ui-carte); color: var(--encre-clair); box-shadow: var(--ombre-produit); }
.p-manager .choix-carte b { display: block; font-family: var(--display); font-size: 18px; }
.p-manager .choix-carte small { color: var(--ui-faible); font-size: 13px; }
.p-manager .choix-carte.actif { outline: 2px solid var(--peche); outline-offset: 2px; }
.p-manager .choix-carte.attenue { opacity: .7; }
.p-manager .choix-icone { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--encre-produit); color: var(--peche-clair); font-size: 18px; flex: none; }
.p-manager .choix-bouton { position: relative; justify-self: center; margin-top: 8px; padding: 12px 22px; border-radius: var(--r-pill); background: var(--peche); color: var(--encre-sur-peche); font-family: var(--display); font-weight: 700; font-size: 18px; }
.p-manager .choix-bouton span { margin-left: 8px; }
.p-manager .curseur { position: absolute; right: -26px; bottom: -26px; width: 34px; height: 34px; fill: var(--encre-produit); stroke: var(--ui-carte); stroke-width: 1.5; stroke-linejoin: round; }

/* 3 · la règle */
.p-manager .regle-tag { font-family: var(--mono); font-size: 11px; letter-spacing: var(--track-data); text-transform: uppercase; color: var(--brand); }
.p-manager .regle-titre { margin: 10px 0 16px; font-size: 16px; line-height: 1.4; color: var(--encre-clair); }
.p-manager .regle-choix { display: grid; gap: 8px; }
.p-manager .regle-choix span { padding: 10px 14px; border-radius: 12px; border: 1px solid var(--ui-filet); background: var(--ui-carte); font-size: 13.5px; }
.p-manager .regle-choix span.actif { border-color: var(--encre-produit); background: var(--encre-produit); color: var(--ui-fond); }
.p-manager .regle-note { margin-top: 14px; font-size: 12px; color: var(--ui-faible); }

/* 4 · le graphe de versions */
.p-manager .graphe { position: relative; width: 100%; height: 100%; }
.p-manager .graphe-liens { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--stroke-strong); stroke-width: 1.5; }
.p-manager .graphe-liens .tirets { stroke-dasharray: 5 5; }
.p-manager .noeud { position: absolute; transform: translate(-50%, -50%); background: var(--ui-carte); color: var(--encre-clair); border-radius: 12px; padding: 10px 14px; font-size: 13px; font-weight: 600; box-shadow: var(--ombre-produit); white-space: nowrap; }
.p-manager .noeud span { display: block; font-family: var(--mono); font-size: 10.5px; font-weight: 500; color: var(--ui-faible); letter-spacing: var(--track-data); }
.p-manager .noeud em { font-style: normal; margin-left: 8px; font-size: 11px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--conforme-fond); color: var(--conforme); }
.p-manager .noeud.retenu { outline: 2px solid var(--conforme-sombre); }
.p-manager .noeud.explore { background: transparent; color: var(--encre); border: 1px dashed var(--stroke-strong); box-shadow: none; }
.p-manager .noeud.explore span { color: var(--text-weak); }
.p-manager .n1 { left: 22%; top: 50%; } .p-manager .n2 { left: 68%; top: 23%; } .p-manager .n3 { left: 68%; top: 50%; } .p-manager .n4 { left: 68%; top: 77%; }
.p-manager .presence { position: absolute; font-family: var(--mono); font-size: 11px; padding: 3px 8px; border-radius: 6px 6px 6px 0; }
.p-manager .p-pm { left: 82%; top: 12%; background: var(--peche); color: var(--encre-sur-peche); }
.p-manager .p-agent { left: 50%; top: 86%; background: var(--conforme-sombre); color: var(--encre-produit); }

/* 5 · skills et MCP */
.p-manager .ui-skills .saisie { font-family: var(--mono); font-size: 15px; padding-bottom: 12px; border-bottom: 1px solid var(--ui-filet); }
.p-manager .caret { display: inline-block; width: 2px; height: 1em; vertical-align: -2px; margin-left: 2px; background: var(--brand); animation: dm-clignote 1s steps(1) infinite; }
@keyframes dm-clignote { 50% { opacity: 0; } }
.p-manager .ui-skills ul { margin: 6px 0 0; padding: 0; }
.p-manager .ui-skills li { list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 10px 8px; border-radius: 8px; font-size: 13px; color: var(--ui-faible); }
.p-manager .ui-skills li.actif { background: var(--surligne-clair, #F9F1F1); }
.p-manager .ui-skills code { font-family: var(--mono); color: var(--encre-clair); }
.p-manager .clients-mcp { position: absolute; right: 7%; bottom: 7%; display: flex; gap: 8px; z-index: 1; }
.p-manager .clients-mcp span { padding: 8px 14px; border-radius: var(--r-pill); background: var(--encre-produit); color: var(--ui-fond); font-size: 13px; font-weight: 600; border: 1px solid var(--stroke-strong); }
.p-manager .clients-mcp .mcp { background: var(--peche); color: var(--encre-sur-peche); font-family: var(--mono); font-weight: 500; letter-spacing: var(--track-data); border: 0; }

/* 6 · les pull requests */
.p-manager .pr-titre { display: block; font-family: var(--mono); font-size: 13px; letter-spacing: var(--track-data); text-transform: uppercase; margin-bottom: 12px; }
.p-manager .pr-titre em { font-style: normal; color: var(--ui-faible); }
.p-manager .pr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 16px; border-radius: 14px; background: var(--ui-carte); box-shadow: 0 1px 2px rgba(23, 24, 27, .06); }
.p-manager .pr + .pr { margin-top: 8px; }
.p-manager .pr b { font-size: 14.5px; }
.p-manager .pr small { grid-column: 1; display: flex; align-items: center; gap: 8px; color: var(--ui-faible); font-size: 12.5px; }
.p-manager .pr .pt { width: 8px; height: 8px; border-radius: 50%; background: var(--ui-filet); border: 1.5px solid var(--ui-faible); }
.p-manager .pr .pt.ok { background: var(--conforme); border-color: var(--conforme); }
.p-manager .pr-etat { grid-column: 2; grid-row: 1 / 3; align-self: center; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: var(--track-data); padding: 4px 10px; border-radius: var(--r-pill); background: var(--conforme-fond); color: var(--conforme); }
.p-manager .pr-etat.neutre { background: var(--ui-filet); color: var(--ui-faible); }

@media (max-width: 900px) {
  .p-manager .fonction { grid-template-columns: 1fr; }
  .p-manager .fonction.inverse .fonction-texte { order: 0; }
  .p-manager .fonction-texte { max-width: none; }
}
@media (max-width: 520px) {
  .p-manager .fonction-visuel { aspect-ratio: 4 / 5; border-radius: 24px; }
  .p-manager .ui-coin { left: 6%; width: 110%; }
  .p-manager .noeud { padding: 8px 10px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .p-manager .caret, .p-manager .etapes-agent li.en-cours::before { animation: none; }
}

/* ═══ Panneaux texturés (13/10, retour d'Arnaud) ═══════════════════════════════════════════════
   Le hachuré sombre se perdait dans le noir. Les panneaux reprennent la matière du visuel hero :
   des traînées peintes, floutées, sous le grain de la marque — une teinte par rangée, comme les
   tuiles « creux » de l'accueil. Le panneau est CLAIR : il rappelle les jetons clairs. */
.p-manager .fonction-visuel {
  --encre: var(--encre-clair); --text-weak: var(--text-weak-clair);
  --stroke-strong: rgba(59, 41, 34, .38); --stroke-weak: rgba(59, 41, 34, .12);
  --t1: #F7A27C; --t2: #FBD9B8; --t3: #A9CBEB; --t4: #FFF4E8;
  isolation: isolate; border: 0; background: var(--t4);
  box-shadow: 0 30px 80px -30px rgba(255, 166, 145, .28);
}
.p-manager .fonction-visuel::before {
  content: ""; position: absolute; inset: -12%; z-index: -2;
  background:
    radial-gradient(55% 45% at 70% 88%, var(--t4) 0%, transparent 72%),
    radial-gradient(35% 30% at 18% 22%, var(--t3) 0%, transparent 70%),
    radial-gradient(40% 35% at 88% 18%, var(--t1) 0%, transparent 70%),
    repeating-linear-gradient(118deg, transparent 0 9%, color-mix(in srgb, var(--t2) 70%, transparent) 13% 16%, transparent 21% 27%),
    linear-gradient(98deg, var(--t1) 0%, var(--t2) 14%, var(--t3) 27%, var(--t4) 38%, var(--t1) 52%, var(--t2) 63%, var(--t3) 78%, var(--t4) 100%);
  filter: blur(22px) saturate(1.15);
}
.p-manager .fonction-visuel::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("/a/fonds/grain.svg?v=e3e4bca8"); opacity: .55; mix-blend-mode: multiply;
}
.p-manager .fonction:nth-child(3) .fonction-visuel { --t1: #9CC4EA; --t2: #FFF2E3; --t3: #FFB49A; --t4: #EAF2FA; }
.p-manager .fonction:nth-child(4) .fonction-visuel { --t1: #F48C8C; --t2: #FFD3C2; --t3: #F9B8D0; --t4: #FFF1EA; }
.p-manager .fonction:nth-child(5) .fonction-visuel { --t1: #B9D3B0; --t2: #F6EBD3; --t3: #9FC7C9; --t4: #F7F4EA; }
.p-manager .fonction:nth-child(6) .fonction-visuel { --t1: #C4B5F0; --t2: #FFE1CC; --t3: #FFA691; --t4: #F7F1FB; }
.p-manager .fonction:nth-child(7) .fonction-visuel { --t1: #FFA14F; --t2: #FFE3C4; --t3: #8DB8E8; --t4: #FFF5EA; }
.p-manager .fonction-visuel .ui, .p-manager .fonction-visuel .choix-carte, .p-manager .fonction-visuel .noeud:not(.explore) { box-shadow: 0 1px 2px rgba(23, 24, 27, .08), 0 24px 50px -12px rgba(59, 41, 34, .28); }
.p-manager .fonction-visuel .noeud.explore { background: rgba(255, 255, 255, .45); backdrop-filter: blur(6px); }
.p-manager .fonction-visuel .choix-carte.attenue { opacity: 1; background: rgba(255, 255, 255, .6); backdrop-filter: blur(8px); }
.p-manager .fonction-visuel .choix-bouton { background: var(--encre-produit); color: var(--ui-fond); }
.p-manager .fonction-visuel .graphe-liens { stroke-width: 2; }
.p-manager .fonction-visuel .clients-mcp span { border: 0; }

/* Retour du 13/10 (2) : le fragment prend plus de place, comme chez la source (il déborde à
   droite et en bas), et le grain passe PAR-DESSUS les cartes aussi, en plus léger. */
.p-manager .fonction-visuel { padding: 5%; }
.p-manager .ui-coin { left: 8%; top: 12%; width: 100%; transform: scale(1.24); transform-origin: top left; }
.p-manager .choix { transform: scale(1.16); margin-top: 0; }
.p-manager .graphe { transform: scale(1.12); }
.p-manager .noeud { font-size: 15px; padding: 12px 16px; }
.p-manager .noeud span { font-size: 11.5px; }
.p-manager .presence { font-size: 12.5px; }
.p-manager .clients-mcp { right: 5%; bottom: 5%; transform: scale(1.12); transform-origin: bottom right; }
.p-manager .fonction-visuel::after { z-index: 2; opacity: .4; }
@media (max-width: 520px) {
  .p-manager .ui-coin { left: 6%; top: 10%; width: 100%; transform: scale(1.08); }
  .p-manager .choix, .p-manager .graphe { transform: none; }
}
.p-manager .fonction-visuel .bulle { margin-left: 8%; }
.p-manager .choix { transform: scale(1.09); }
.p-manager .ui-skills li { justify-content: flex-start; }
.p-manager .ui-skills li code { min-width: 13em; }

/* ═══ Graphe animé (13/10, retour 3) ═════════════════════════════════════════════════════════
   Les nœuds ont une largeur en % : les liens (viewBox 0–100) partent du bord droit de V1 (33 %)
   et touchent le bord gauche des versions (58 %). Une boucle de 9 s : le curseur Designer
   survole V3, clique V2, qui devient « Kept ». PM, PO et Dev dérivent ; l'agent rédige V4. */
.p-manager .fonction-visuel:has(.graphe) { padding: 0; }
.p-manager .graphe { transform: none; position: relative; width: 100%; height: 100%; --boucle: 9s;
  --c-designer: #FF7A45; --c-pm: #E8576B; --c-po: #F5C451; --c-dev: #8B6CF2; }
.p-manager .graphe-liens path { vector-effect: non-scaling-stroke; }
.p-manager .graphe-liens .l2 { animation: dm-lien var(--boucle) infinite; }
.p-manager .graphe .noeud { transform: translateY(-50%); width: 25%; box-sizing: border-box; }
.p-manager .graphe .n1 { left: 9%; top: 50%; width: 24%; }
.p-manager .graphe .n2 { left: 58%; top: 22%; width: 30%; animation: dm-retenu var(--boucle) infinite; }
.p-manager .graphe .n3 { left: 58%; top: 50%; width: 30%; animation: dm-survol var(--boucle) infinite; }
.p-manager .graphe .n4 { left: 58%; top: 78%; width: 30%; }
.p-manager .graphe .n2 em { animation: dm-badge var(--boucle) infinite; }
.p-manager .points { display: inline-flex; gap: 3px; margin-left: 8px; vertical-align: middle; }
.p-manager .points b { width: 5px; height: 5px; border-radius: 50%; background: var(--conforme); animation: dm-point 1.2s infinite; }
.p-manager .points b:nth-child(2) { animation-delay: .2s; } .p-manager .points b:nth-child(3) { animation-delay: .4s; }
.p-manager .graphe .n4 { animation: dm-respire 2.4s ease-in-out infinite; }

/* Curseurs de présence : la flèche, puis l'étiquette au nom de la personne */
.p-manager .pres { position: absolute; z-index: 3; display: flex; align-items: flex-start; pointer-events: none; }
.p-manager .pres > svg { width: 18px; height: 18px; fill: var(--c); stroke: var(--ui-carte); stroke-width: 1.5; stroke-linejoin: round; }
.p-manager .pres b { margin: 14px 0 0 -2px; padding: 3px 9px; border-radius: 4px 8px 8px 8px; background: var(--c); color: var(--ui-carte); font-family: var(--sans); font-size: 12.5px; font-weight: 600; white-space: nowrap; box-shadow: 0 4px 12px -4px rgba(23, 24, 27, .35); }
.p-manager .c-designer { --c: var(--c-designer); animation: dm-designer var(--boucle) cubic-bezier(.6, .05, .3, 1) infinite; }
.p-manager .c-pm { --c: var(--c-pm); left: 84%; top: 8%; animation: dm-derive-a 5s ease-in-out infinite; }
.p-manager .c-po { --c: var(--c-po); left: 12%; top: 66%; animation: dm-derive-b 6s ease-in-out infinite; }
.p-manager .c-po b { color: var(--encre-produit); }
.p-manager .c-dev { --c: var(--c-dev); left: 30%; top: 10%; animation: dm-derive-a 7s ease-in-out infinite reverse; }
.p-manager .c-agent { left: 58%; top: 92%; }
.p-manager .c-agent b { margin: 0; background: var(--conforme-sombre); color: var(--encre-produit); font-family: var(--mono); font-weight: 500; }

@keyframes dm-designer {
  0%   { left: 22%; top: 88%; transform: scale(1); }
  16%  { left: 76%; top: 54%; }
  32%  { left: 76%; top: 54%; }
  46%  { left: 74%; top: 25%; transform: scale(1); }
  49%  { transform: scale(.82); }
  52%  { left: 74%; top: 25%; transform: scale(1); }
  86%  { left: 74%; top: 25%; }
  100% { left: 22%; top: 88%; }
}
@keyframes dm-survol { 0%, 14%, 36%, 100% { outline: 2px solid transparent; outline-offset: 2px; } 18%, 32% { outline: 2px solid var(--c-designer); outline-offset: 2px; } }
@keyframes dm-retenu { 0%, 48%, 96%, 100% { outline: 2px solid transparent; outline-offset: 2px; } 51%, 92% { outline: 2px solid var(--conforme-sombre); outline-offset: 2px; } }
@keyframes dm-badge { 0%, 49%, 96%, 100% { opacity: 0; transform: scale(.6); } 53%, 92% { opacity: 1; transform: scale(1); } }
@keyframes dm-lien { 0%, 49%, 96%, 100% { stroke: var(--stroke-strong); } 52%, 92% { stroke: var(--conforme); } }
@keyframes dm-derive-a { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-14px, 10px); } }
@keyframes dm-derive-b { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(16px, -12px); } }
@keyframes dm-point { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
@keyframes dm-respire { 0%, 100% { border-color: var(--stroke-strong); } 50% { border-color: var(--conforme); } }
.p-manager .graphe .noeud em { display: inline-block; }
@media (prefers-reduced-motion: reduce) {
  .p-manager .graphe *, .p-manager .graphe-liens path { animation: none !important; }
  .p-manager .c-designer { left: 74%; top: 25%; }
  .p-manager .graphe .n2 { outline: 2px solid var(--conforme-sombre); outline-offset: 2px; }
}
@media (max-width: 520px) { .p-manager .graphe .noeud { font-size: 12px; padding: 8px 10px; } .p-manager .pres b { font-size: 11px; } }

/* ═══ Les Axolo (13/10) : mascottes du logiciel, portées de packages/ui/AxolotlButton ═══════════
   Palettes = jetons --ui-mascot-* de l'app (mêmes valeurs). Le dessin vient de a/axolos.js. */
.p-manager {
  --mascotte-oeil: #FFFFFF; --mascotte-ombre: #5A1640;
}
.axolo { --taille: 32px; --boucle: 240ms; display: inline-block; flex: none; width: var(--taille); height: var(--taille); --regard-x: 0px; --regard-y: 0px; }
.axolo[data-axolo="guide"]   { --m-base: #FF9DB4; --m-light: #FFC79A; --m-low: #C59BFF; --m-accent: #FF7FA8; --m-ombre: #5A1640; --m-pupille: #7A2457; }
.axolo[data-axolo="ui"]      { --m-base: #9AA8FF; --m-light: #B9F0FF; --m-low: #C08BFF; --m-accent: #7C8CFF; }
.axolo[data-axolo="ux"]      { --m-base: #5FD9C0; --m-light: #E4FF9E; --m-low: #4FA8FF; --m-accent: #2CC8A8; }
.axolo[data-axolo="produit"] { --m-base: #FFB45E; --m-light: #FFE69A; --m-low: #FF7A7A; --m-accent: #FF9640; }
.axolo[data-axolo="dev"]     { --m-base: #8F80FF; --m-light: #A8F6FF; --m-low: #B9A6FF; --m-accent: #C08BFF; }
.axolo:not([data-axolo="guide"]) { --m-ombre: color-mix(in oklch, var(--m-accent) 45%, var(--mascotte-ombre)); --m-pupille: color-mix(in oklch, var(--m-accent) 40%, var(--mascotte-ombre)); }
.axolo-sm { --taille: 22px; } .axolo-md { --taille: 30px; } .axolo-lg { --taille: 44px; } .axolo-xl { --taille: 96px; }
.ax-art { width: 100%; height: 100%; overflow: visible; display: block; }
.ax-base { fill: var(--m-base); }
.ax-light { stop-color: var(--m-light); } .ax-low { stop-color: var(--m-low); } .ax-accent { stop-color: var(--m-accent); }
.ax-brillant { stop-color: var(--mascotte-oeil); stop-opacity: .28; }
.ax-clair { stop-opacity: 0; }
.ax-ombre { stop-color: var(--m-ombre); } .ax-ombre.ax-bord { stop-opacity: .45; }
.ax-reflet { mix-blend-mode: plus-lighter; }
.ax-blanc { fill: var(--mascotte-oeil); }
.ax-ferme { fill: none; stroke: var(--mascotte-oeil); stroke-width: 1.8; stroke-linecap: round; }
.ax-pupille { fill: var(--m-pupille); transform: translate(var(--regard-x), var(--regard-y)); transition: transform 120ms ease-out; }
.ax-corps { transform-box: view-box; transform-origin: 50% 75%; animation: ax-balance calc(var(--boucle) * 25) ease-in-out infinite; }
.ax-tache { transform-box: view-box; animation: ax-derive calc(var(--boucle) * 32) ease-in-out infinite alternate; }
.ax-tache.lente { animation-duration: calc(var(--boucle) * 40); animation-direction: alternate-reverse; }
.ax-tache.plus-lente { animation-duration: calc(var(--boucle) * 46); }
.ax-oeil { transform-box: fill-box; transform-origin: center; animation: ax-cligne calc(var(--boucle) * 21) infinite; }
/* Il travaille : yeux plissés, la lumière accélère, il respire */
.axolo[data-etat="travaille"] .ax-oeil { animation: none; transform: scaleY(.3); }
.axolo[data-etat="travaille"] .ax-pupille { opacity: 0; }
.axolo[data-etat="travaille"] .ax-corps { animation: ax-respire calc(var(--boucle) * 6) ease-in-out infinite; }
.axolo[data-etat="travaille"] .ax-tache { animation-duration: calc(var(--boucle) * 9); }
@keyframes ax-balance { 0%, 100% { transform: rotate(-2.5deg); } 25% { transform: rotate(0) scale(1.02, .98); } 50% { transform: rotate(2.5deg); } 75% { transform: rotate(0) scale(.985, 1.015); } }
@keyframes ax-derive { 0% { transform: translate(-8%, -4%); } 50% { transform: translate(6%, 5%); } 100% { transform: translate(-3%, 8%); } }
@keyframes ax-cligne { 0%, 95%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.12); } }
@keyframes ax-respire { 50% { transform: scale(1.03, .97); } }
@media (prefers-reduced-motion: reduce) { .ax-corps, .ax-tache, .ax-oeil, .axolo[data-etat="travaille"] .ax-corps { animation: none; } .ax-pupille { transform: none; } }

/* La famille : cinq cartes d'identité, chacune dans la lumière de son Axolo */
.p-manager .dm-equipe { text-align: center; }
.p-manager .dm-equipe .section-tete { margin: 0 auto; }
.p-manager .dm-equipe .section-tete p { color: var(--text-weak); margin-top: var(--espace-bloc); }
.p-manager .equipe { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: calc(var(--espace-grille) * 2.5); max-width: var(--width-large); margin-inline: auto; }
.p-manager .dm-equipe .page { max-width: var(--width-large); }
.p-manager .axo-carte { position: relative; isolation: isolate; overflow: hidden; text-align: left; padding: 22px 18px 20px; border-radius: 24px; color: var(--encre-clair); background: #FFFBF6; display: flex; flex-direction: column; gap: 6px; transition: transform var(--motion-hover) var(--ease-console); }
.p-manager .axo-carte:hover { transform: translateY(-4px); }
.p-manager .axo-carte::before { content: ""; position: absolute; inset: -30% -30% 40% -30%; z-index: -2; background: radial-gradient(50% 60% at 50% 60%, var(--m-light) 0%, transparent 70%), radial-gradient(40% 50% at 20% 40%, var(--m-base) 0%, transparent 70%), radial-gradient(40% 50% at 85% 50%, var(--m-low) 0%, transparent 70%); filter: blur(18px); opacity: .85; }
.p-manager .axo-carte::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: url("/a/fonds/grain.svg?v=e3e4bca8"); opacity: .4; mix-blend-mode: multiply; pointer-events: none; }
.p-manager .axo-carte[data-axolo="guide"] { --m-base: #FF9DB4; --m-light: #FFC79A; --m-low: #C59BFF; }
.p-manager .axo-carte[data-axolo="ui"] { --m-base: #9AA8FF; --m-light: #B9F0FF; --m-low: #C08BFF; }
.p-manager .axo-carte[data-axolo="ux"] { --m-base: #5FD9C0; --m-light: #E4FF9E; --m-low: #4FA8FF; }
.p-manager .axo-carte[data-axolo="produit"] { --m-base: #FFB45E; --m-light: #FFE69A; --m-low: #FF7A7A; }
.p-manager .axo-carte[data-axolo="dev"] { --m-base: #8F80FF; --m-light: #A8F6FF; --m-low: #B9A6FF; }
.p-manager .axo-carte .axolo { align-self: center; margin: 18px 0 26px; filter: drop-shadow(0 14px 18px rgba(59, 41, 34, .22)); }
.p-manager .axo-num { font-family: var(--mono); font-size: 11px; letter-spacing: var(--track-data); text-transform: uppercase; color: var(--encre-clair); opacity: .6; }
.p-manager .axo-carte h3 { font-family: var(--display); font-size: 19px; line-height: 1.15; color: var(--encre-clair); }
.p-manager .axo-role { font-family: var(--mono); font-size: 11px; letter-spacing: var(--track-data); text-transform: uppercase; color: var(--text-weak-clair); }
.p-manager .axo-carte p:not(.axo-role) { font-size: 14px; line-height: 1.45; color: var(--encre-clair); }
.p-manager .axo-carte q { margin-top: auto; padding-top: 12px; border-top: 1px dashed rgba(59, 41, 34, .2); font-size: 13px; font-style: italic; color: var(--text-weak-clair); }

/* Dans les fragments, comme dans l'app */
.p-manager .ui-barre .axolo { margin-left: 4px; margin-right: -4px; }
.p-manager .regle-qui { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px dashed var(--ui-filet); font-size: 13.5px; color: var(--ui-faible); }
.p-manager .regle-qui b { color: var(--encre-clair); }
.p-manager .regle-tag { display: block; }
.p-manager .ui-skills .saisie { display: flex; align-items: center; gap: 10px; }
.p-manager .pr-titre { display: flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--ui-faible); }
.p-manager .pr-titre b { color: var(--encre-clair); }
.p-manager .c-agent { display: flex; align-items: center; gap: 6px; }
.p-manager .choix-axolo { position: absolute; left: -54px; bottom: 2px; }
.p-manager .choix { position: relative; }

@media (max-width: 1100px) { .p-manager .equipe { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .p-manager .equipe { grid-template-columns: 1fr 1fr; } .p-manager .axolo-xl { --taille: 72px; } .p-manager .choix-axolo { display: none; } }
.p-manager .choix-bouton { display: inline-flex; align-items: center; gap: 10px; padding-left: 12px; }
.p-manager .choix-bouton .axolo { margin: -6px 0; }

/* ═══ Axolo vivants (13/10, retour 5) : lueur, respiration, survol, clic ═══════════════════════
   La lueur reprend le halo de la carte d'identité de l'app : leurs propres couleurs, floutées,
   qui pulsent au rythme de la respiration. */
.axolo { position: relative; isolation: isolate; cursor: pointer; pointer-events: auto; }
.axolo::before { content: ""; position: absolute; inset: -55%; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--m-light) 85%, transparent), color-mix(in srgb, var(--m-base) 45%, transparent) 45%, transparent 75%);
  filter: blur(4px); opacity: .75; animation: ax-lueur 3.6s ease-in-out infinite; }
.axolo-xl::before { inset: -35%; filter: blur(10px); }
.ax-art { transform-origin: 50% 85%; animation: ax-souffle 3.6s ease-in-out infinite; }
.axolo { transition: transform 260ms cubic-bezier(.3, 1.6, .5, 1); }
.axolo:hover { transform: scale(1.14) translateY(-4%); }
.axolo:hover::before { opacity: 1; inset: -70%; }
.axolo-xl:hover::before { inset: -45%; }
.axolo:hover .ax-oeil { animation: none; }
.axolo.saute .ax-art { animation: ax-saut 650ms cubic-bezier(.3, 1.4, .5, 1); }
.axolo.saute .ax-oeil { transform: scaleY(.25); animation: none; }
.axolo.saute::before { animation: ax-eclat 650ms ease-out; }
.ax-etincelle { position: absolute; left: 50%; top: 40%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; pointer-events: none;
  background: var(--m-light); box-shadow: 0 0 6px var(--m-base); animation: ax-etincelle 800ms ease-out forwards; }
.ax-etincelle:nth-child(2n) { background: var(--m-accent); width: 4px; height: 4px; }
.axolo-sm .ax-etincelle, .axolo-md .ax-etincelle { width: 4px; height: 4px; }
@keyframes ax-souffle { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.045, .965) translateY(1%); } }
@keyframes ax-lueur { 0%, 100% { opacity: .55; transform: scale(.92); } 50% { opacity: .9; transform: scale(1.06); } }
@keyframes ax-saut { 0% { transform: scale(1); } 20% { transform: scale(1.18, .8); } 45% { transform: translateY(-28%) scale(.92, 1.1) rotate(-6deg); } 70% { transform: translateY(0) scale(1.08, .92); } 100% { transform: scale(1); } }
@keyframes ax-eclat { 0% { opacity: .7; transform: scale(1); } 35% { opacity: 1; transform: scale(1.4); } 100% { opacity: .7; transform: scale(1); } }
@keyframes ax-etincelle { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1); } }
/* Dans le graphe, l'étiquette de curseur reste inerte mais l'Axolo répond */
.p-manager .pres.c-agent { pointer-events: auto; }
/* Dans une ligne de texte, la lueur ne doit pas écraser les voisins */
.p-manager .ui-barre .axolo, .p-manager .regle-qui .axolo, .p-manager .pr-titre .axolo, .p-manager .saisie .axolo, .p-manager .choix-bouton .axolo, .p-manager .c-agent .axolo { margin-inline: 4px; }
.p-manager .choix-bouton .axolo::before { opacity: .45; }
@media (prefers-reduced-motion: reduce) {
  .axolo::before, .ax-art, .axolo.saute .ax-art, .axolo.saute::before { animation: none; }
  .ax-etincelle { display: none; }
}

/* ═══ Bring your own AI (13/10) : le connecteur MCP, et l'absence de second abonnement ════════ */
.p-manager .dm-mcp .page { max-width: var(--width-large); }
.p-manager .mcp-grille { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.p-manager .mcp-texte h2 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.05; margin-bottom: var(--espace-bloc); }
.p-manager .mcp-texte > p { color: var(--text-weak); font-size: var(--type-argument); line-height: 1.5; max-width: 480px; }
.p-manager .modes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: calc(var(--espace-grille) * 1.5); }
.p-manager .mode { padding: 18px; border-radius: 18px; border: 1px solid var(--stroke-weak); background: rgba(249, 242, 237, .03); display: grid; gap: 8px; align-content: start; }
.p-manager .mode.actif { border-color: var(--peche); background: rgba(255, 166, 145, .07); }
.p-manager .mode-tag { font-family: var(--mono); font-size: 11px; letter-spacing: var(--track-data); text-transform: uppercase; color: var(--text-weak); }
.p-manager .mode.actif .mode-tag { color: var(--peche); }
.p-manager .mode b { font-family: var(--display); font-size: 18px; line-height: 1.2; }
.p-manager .mode ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.p-manager .mode li { position: relative; padding-left: 16px; font-size: 14px; line-height: 1.4; color: var(--text-weak); }
.p-manager .mode li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 2px; background: var(--stroke-strong); }
.p-manager .mode.actif li::before { background: var(--peche); }

/* Le visuel : trois clients, le fil MCP où passent des paquets, et Axolo qui reçoit */
.p-manager .mcp-visuel { aspect-ratio: auto; min-height: 0; display: flex; flex-direction: column; align-items: center; padding: 40px 32px; gap: 0; }
.p-manager .mcp-visuel .clients { display: grid; gap: 10px; width: min(100%, 360px); }
.p-manager .client { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 16px; background: var(--ui-carte); color: var(--encre-clair); box-shadow: 0 1px 2px rgba(23, 24, 27, .08), 0 20px 40px -14px rgba(59, 41, 34, .3); }
.p-manager .client b { display: block; font-family: var(--display); font-size: 18px; line-height: 1.1; }
.p-manager .client small { color: var(--ui-faible); font-size: 13px; }
.p-manager .client-logo { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--encre-produit); color: var(--peche-clair); font-family: var(--mono); font-weight: 500; font-size: 15px; }
.p-manager .client-etat { margin-left: auto; font-family: var(--mono); font-size: 10.5px; letter-spacing: var(--track-data); text-transform: uppercase; padding: 3px 9px; border-radius: var(--r-pill); background: var(--conforme-fond); color: var(--conforme); }
.p-manager .client.attenue { background: rgba(255, 255, 255, .55); backdrop-filter: blur(8px); box-shadow: none; border: 1px dashed rgba(59, 41, 34, .25); }
.p-manager .client.attenue .client-logo { background: transparent; color: var(--encre-clair); border: 1px dashed rgba(59, 41, 34, .35); }
.p-manager .fil { position: relative; width: 2px; height: 86px; margin: 4px 0; background: repeating-linear-gradient(180deg, rgba(23, 24, 27, .45) 0 5px, transparent 5px 10px); }
.p-manager .fil span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 5px 12px; border-radius: var(--r-pill); background: var(--peche); color: var(--encre-sur-peche); font-family: var(--mono); font-size: 12px; letter-spacing: var(--track-data); box-shadow: 0 8px 18px -8px rgba(59, 41, 34, .5); }
.p-manager .fil i { position: absolute; left: 50%; top: 0; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--encre-produit); box-shadow: 0 0 0 3px rgba(255, 255, 255, .6); animation: dm-paquet 2.4s cubic-bezier(.5, 0, .5, 1) infinite; }
.p-manager .fil i:nth-child(2) { animation-delay: .8s; } .p-manager .fil i:nth-child(3) { animation-delay: 1.6s; }
@keyframes dm-paquet { 0% { top: -4px; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: calc(100% - 4px); opacity: 0; } }
.p-manager .cible { display: flex; align-items: center; gap: 14px; width: min(100%, 400px); padding: 16px 18px; border-radius: 20px; background: var(--encre-produit); color: var(--ui-fond); box-shadow: 0 30px 60px -20px rgba(23, 24, 27, .55); }
.p-manager .cible b { display: block; font-family: var(--display); font-size: 20px; }
.p-manager .cible small { color: rgba(249, 242, 237, .7); font-size: 13px; }
.p-manager .cible-ok { margin-left: auto; font-family: var(--mono); font-size: 10.5px; letter-spacing: var(--track-data); text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-pill); background: var(--conforme-sombre); color: var(--encre-produit); white-space: nowrap; }
@media (max-width: 900px) { .p-manager .mcp-grille { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .p-manager .modes { grid-template-columns: 1fr; } .p-manager .cible { flex-wrap: wrap; } .p-manager .cible-ok { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .p-manager .fil i { animation: none; display: none; } }

/* Retour du 13/10 (6) : cartes de l'équipe moins hautes (axolo et numéro sur une ligne) ;
   le sélecteur de liberté respire en haut et en bas, le panneau suit son contenu. */
.p-manager .axo-carte { padding: 20px 20px 18px; gap: 4px; }
.p-manager .axo-tete { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.p-manager .axo-carte .axo-tete .axolo { --taille: 68px; align-self: auto; margin: 4px 0 0 2px; }
.p-manager .axo-carte .axo-tete .axolo::before { inset: -45%; }
.p-manager .axo-carte h3 { font-size: 18px; }
.p-manager .axo-role { margin-bottom: 6px; }
.p-manager .axo-carte p:not(.axo-role) { font-size: 13.5px; }
.p-manager .axo-carte q { padding-top: 10px; margin-top: auto; font-size: 12.5px; }
.p-manager .axo-carte::before { inset: -30% -30% 55% -30%; }
.p-manager .fonction-visuel:has(.choix) { aspect-ratio: auto; min-height: 0; padding: 56px 40px 64px; }
.p-manager .fonction-visuel .choix { transform: none; width: min(100%, 380px); gap: 10px; margin: 0; }
.p-manager .fonction-visuel .choix-carte { padding: 12px 16px; }
.p-manager .fonction-visuel .choix-bouton { margin-top: 14px; }

/* Logo (13/10) : la mascotte du logo SVG (un flou rastérisé en <img>, pixelisé à 32 px) est
   remplacée par l'Axolo guide vectoriel de l'app ; les lettres restent celles du logo. */
.p-manager .wordmark { display: inline-flex; align-items: center; gap: 4px; }
.p-manager .axolo-logo { --taille: 34px; margin: -4px 0; }
.p-manager .axolo-logo::before { opacity: .35; }
.p-manager .wordmark .marque-lettres { display: block; height: 22px; width: auto; }
@media (max-width: 640px) { .p-manager .axolo-logo { --taille: 30px; } .p-manager .wordmark .marque-lettres { height: 19px; } }
/* Logo, suite : la mascotte vient du logo Figma (596:518), exportée en 4× et détourée — nette sur
   écran Retina ; proportions du logo : mascotte 26/31,65 de la hauteur des lettres, écart 10,4. */
.p-manager .wordmark { gap: 7px; }
.p-manager .mascotte-logo { display: block; height: 18px; width: auto; transform: translateY(3px); }
@media (max-width: 640px) { .p-manager .mascotte-logo { height: 15.6px; } }
/* La mascotte du logo vit comme les Axolo : balancement, respiration, lueur ; au survol du logo,
   un petit saut. En-tête (sombre) et pied (blanc). */
.p-manager .wordmark { position: relative; }
.p-manager .mascotte-logo { transform-origin: 50% 90%; animation: logo-vie 4.8s ease-in-out infinite; filter: drop-shadow(0 0 6px rgba(255, 157, 180, .45)); }
.p-manager footer .mascotte-logo { filter: drop-shadow(0 2px 5px rgba(248, 144, 168, .35)); }
.p-manager .wordmark:hover .mascotte-logo { animation: logo-saut 600ms cubic-bezier(.3, 1.4, .5, 1); }
@keyframes logo-vie {
  0%, 100% { transform: translateY(3px) rotate(-3deg) scale(1, 1); }
  25% { transform: translateY(3px) rotate(0) scale(1.04, .96); }
  50% { transform: translateY(3px) rotate(3deg) scale(1, 1); }
  75% { transform: translateY(3px) rotate(0) scale(.97, 1.03); }
}
@keyframes logo-saut {
  0% { transform: translateY(3px) scale(1); }
  20% { transform: translateY(3px) scale(1.15, .85); }
  50% { transform: translateY(-4px) scale(.94, 1.08) rotate(-8deg); }
  75% { transform: translateY(3px) scale(1.06, .95); }
  100% { transform: translateY(3px) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .p-manager .mascotte-logo, .p-manager .wordmark:hover .mascotte-logo { animation: none; } }

/* Logo final (13/10) : tout en vecteurs, mascotte #FBC1AD (variante G de la planche), lettres
   en currentColor ; balancement, lumière qui dérive, clignement, pupilles qui suivent (manager.js). */
.p-manager .logo-svg { display: block; height: 30px; width: auto; overflow: visible; }
.p-manager .entete .wordmark { color: #F9F2ED; }
.p-manager footer .wordmark { color: var(--encre-clair); }
.p-manager .logo-corps { transform-box: fill-box; transform-origin: 50% 90%; animation: logo-corps 4.8s ease-in-out infinite; filter: drop-shadow(0 0 2.5px rgba(251, 193, 173, .55)); }
.p-manager footer .logo-corps { filter: none; }
.p-manager .wordmark:hover .logo-corps { animation: logo-bond 600ms cubic-bezier(.3, 1.4, .5, 1); }
.p-manager .logo-oeil { transform-box: fill-box; transform-origin: center; animation: logo-cligne 5s infinite; }
.p-manager .logo-pup { fill: #6E2A2A; transform: translate(var(--rx, 0), var(--ry, 0)); transition: transform 120ms ease-out; }
.p-manager .logo-t1, .p-manager .logo-t2, .p-manager .logo-t3 { transform-box: view-box; animation: logo-derive 9s ease-in-out infinite alternate; }
.p-manager .logo-t2 { animation-duration: 12s; animation-direction: alternate-reverse; } .p-manager .logo-t3 { animation-duration: 14s; }
@keyframes logo-corps { 0%, 100% { transform: rotate(-3deg); } 25% { transform: scale(1.04, .96); } 50% { transform: rotate(3deg); } 75% { transform: scale(.97, 1.03); } }
@keyframes logo-bond { 20% { transform: scale(1.15, .85); } 50% { transform: translateY(-12%) scale(.94, 1.08) rotate(-8deg); } 75% { transform: scale(1.06, .95); } }
@keyframes logo-cligne { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes logo-derive { 0% { transform: translate(-3px, -2px); } 50% { transform: translate(3px, 2px); } 100% { transform: translate(-1px, 3px); } }
@media (max-width: 640px) { .p-manager .logo-svg { height: 26px; } }
@media (prefers-reduced-motion: reduce) { .p-manager .logo-corps, .p-manager .logo-oeil, .p-manager .logo-t1, .p-manager .logo-t2, .p-manager .logo-t3 { animation: none; } }
/* Survol du logo : la lueur reste sur la mascotte seule, plus diffuse et plus dense */
.p-manager .logo-corps { transition: filter 300ms ease; }
.p-manager .wordmark:hover .logo-corps { filter: drop-shadow(0 0 6px rgba(251, 193, 173, .9)) drop-shadow(0 0 14px rgba(251, 193, 173, .6)); }
.p-manager footer .wordmark:hover .logo-corps { filter: drop-shadow(0 0 6px rgba(247, 160, 143, .7)) drop-shadow(0 0 14px rgba(251, 193, 173, .55)); }
.p-manager .wordmark::before { display: none; }

/* Essai du 13/10 : l'Axolo guide prend la couleur du logo (#FBC1AD) partout sur la page */
.axolo[data-axolo="guide"] { --m-base: #FBC1AD; --m-light: #FFEADF; --m-low: #E9837A; --m-accent: #F9A27E; --m-ombre: #7A2E2A; --m-pupille: #6E2A2A; }
.p-manager .axo-carte[data-axolo="guide"] { --m-base: #FBC1AD; --m-light: #FFEADF; --m-low: #F9A27E; }

/* Chaque panneau prend la couleur de l'Axolo qu'il montre : Rules → Axolo UX (menthe, citron, ciel) */
.p-manager .fonction:nth-child(4) .fonction-visuel { --t1: #8FE3CF; --t2: #EEFFC4; --t3: #9CCBF6; --t4: #F2FBF6; }
/* L'étiquette de l'Axolo UX dans le graphe prend sa couleur, pour ne plus se confondre avec « Kept » */
.p-manager .c-agent b { background: #5FD9C0; color: #0E3B33; }

/* Hero : l'étiquette « AI ready » passe à droite du mot cadré, les deux lignes du titre se rapprochent */
.p-manager .dm-hero .mot-cadre { margin-top: .12em; }
.p-manager .dm-hero .tag-ia { left: calc(100% + 10px); bottom: auto; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
  .p-manager .dm-hero .mot-cadre { margin-top: 1em; }
  .p-manager .dm-hero .tag-ia { left: -1.5px; top: auto; bottom: calc(100% + 8px); transform: none; }
}
/* Branches : plus de vert (Rules l'a déjà) — palette pervenche de l'Axolo UI */
.p-manager .fonction:nth-child(5) .fonction-visuel { --t1: #B7C1FF; --t2: #E6F8FF; --t3: #D6BCFF; --t4: #F5F5FF; }

/* Hero, espacements revus (13/10) : sans l'étiquette, le surtitre se rapproche du titre ;
   rythme 20 / 20 / 36 / 18 entre surtitre, titre, accroche, formulaire et mentions. */
.p-manager .dm-hero .eyebrow { margin-bottom: 20px; }
.p-manager .dm-hero h1 { margin-bottom: 20px; line-height: 1.1; }
.p-manager .dm-hero .mot-cadre { margin-top: .08em; }
.p-manager .dm-hero .lede { margin-bottom: 36px; }
.p-manager .dm-hero .reassurance { margin-top: 18px; }
.p-manager .dm-hero h1 { margin-bottom: 28px; }
.p-manager .entete .wordmark { color: #F2ECE5; }
.p-manager footer .wordmark { color: #2A201D; }

/* Accueil (14/10) : la page logiciel devient l'accueil ; le blanc des sections claires, de la FAQ et
   du pied passe en #F7F6F6. Le second temps du formulaire et les cartes produit restent blancs. */
.p-manager { --fond-clair: #F7F6F6; }
.p-manager .dm-section.blanc, .p-manager .faq, .p-manager footer { background: var(--fond-clair); }

/* Retour du 14/10 : pas de hauteur minimale sur les panneaux (elle débordait sur le texte entre
   900 et 1100 px) ; le graphe des branches dans une fenêtre blanche, fond texturé sobre. */
.p-manager .fonction, .p-manager .mcp-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.p-manager .fonction-visuel { min-height: 0; }
.p-manager .fonction:nth-child(5) .fonction-visuel { --t1: #F3D9C6; --t2: #FFF4EA; --t3: #CFDCEB; --t4: #FBF7F2; padding: 6%; }
.p-manager .ui-graphe { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; }
.p-manager .ui-graphe .ui-barre b { font-weight: 600; }
.p-manager .ui-onglet { margin-left: auto; font-family: var(--mono); font-size: 11px; letter-spacing: var(--track-data); text-transform: uppercase; padding: 3px 10px; border-radius: var(--r-pill); background: var(--ui-filet); color: var(--ui-faible); }
.p-manager .ui-graphe .graphe { flex: 1; background-image: radial-gradient(rgba(59, 41, 34, .12) 1px, transparent 1.2px); background-size: 18px 18px; }
.p-manager .ui-graphe .graphe-liens { stroke: rgba(59, 41, 34, .35); }
.p-manager .ui-graphe .noeud { box-shadow: 0 1px 2px rgba(23, 24, 27, .06), 0 8px 20px -8px rgba(59, 41, 34, .25); border: 1px solid var(--ui-filet); }
.p-manager .ui-graphe .noeud.explore { background: rgba(255, 255, 255, .6); color: var(--encre-clair); border: 1px dashed rgba(59, 41, 34, .3); }
.p-manager .ui-graphe .noeud.explore span { color: var(--ui-faible); }
.p-manager .ui-graphe .noeud { font-size: 13.5px; padding: 10px 13px; }
@media (max-width: 900px) { .p-manager .fonction, .p-manager .mcp-grille { grid-template-columns: minmax(0, 1fr); } .p-manager .fonction:nth-child(5) .fonction-visuel { aspect-ratio: 4 / 3; } }
@media (max-width: 520px) { .p-manager .fonction:nth-child(5) .fonction-visuel { aspect-ratio: 4 / 5; padding: 4%; } .p-manager .ui-graphe .noeud { font-size: 11.5px; padding: 7px 9px; } .p-manager .pres b { font-size: 10.5px; padding: 2px 7px; } }
@media (min-width: 901px) and (max-width: 1150px) { .p-manager .fonction:nth-child(5) .fonction-visuel { aspect-ratio: 1 / 1; } }
.p-manager .ui-graphe .c-agent { top: 86%; }
/* Mobile : en colonne, flex: 1 écrasait la hauteur du champ ; il garde ses 48 px, comme le bouton */
@media (max-width: 640px) { .p-manager .liste-ligne input:not(.sr) { flex: none; height: 52px; } .p-manager .liste-ligne .pilule-noire { height: 52px; } }
/* Les nœuds du graphe s'ajustent à leur libellé (« V4 · drafting » sortait du cadre en étroit) */
.p-manager .graphe .n2, .p-manager .graphe .n3, .p-manager .graphe .n4 { width: auto; min-width: 26%; max-width: 40%; }
.p-manager .graphe .noeud span { white-space: nowrap; }

/* Retour du 14/10 : les Axolo ressortent mieux (ils se fondaient dans leur halo sur fond clair) —
   ombre de bord plus marquée, un peu plus de saturation, ombre portée nette ; halo réduit sur clair. */
.ax-ombre.ax-bord { stop-opacity: .62; }
.ax-art { filter: saturate(1.2) contrast(1.05); }
.ui .axolo::before, .regle-qui .axolo::before, .pr-titre .axolo::before, .choix-bouton .axolo::before, .ch-carte .axolo::before, .ch-visuel .axolo::before, .axo-carte .axolo::before { opacity: .22; inset: -30%; filter: blur(6px); }
.ui .axolo .ax-art, .regle-qui .axolo .ax-art, .pr-titre .axolo .ax-art, .saisie .axolo .ax-art { filter: saturate(1.25) contrast(1.05) drop-shadow(0 1.5px 2px rgba(59, 41, 34, .35)); }
.axo-carte .axolo .ax-art, .ch-carte .axolo .ax-art, .ch-visuel .axolo .ax-art { filter: saturate(1.2) contrast(1.05); }

/* Netteté (14/10) : aucun filtre CSS sur le dessin animé (il était repeint flou) ; un contour
   vectoriel fin, toujours à 1 px, dessine la silhouette. */
.ax-art, .ui .axolo .ax-art, .regle-qui .axolo .ax-art, .pr-titre .axolo .ax-art, .saisie .axolo .ax-art, .axo-carte .axolo .ax-art, .ch-carte .axolo .ax-art, .ch-visuel .axolo .ax-art { filter: none; }
.ax-contour { fill: none; stroke: var(--m-ombre); stroke-opacity: .38; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.axolo-xl .ax-contour, .ch-visuel .ax-contour { stroke-width: 1.5px; }
.ax-ombre.ax-bord { stop-opacity: .55; }

/* Netteté dans les cartes : plus de filtre drop-shadow sur l axolo (il le rendait flou) ;
   une ombre de contact dessinée sous lui, sans filtre. */
.axo-carte .axolo, .ch-carte .axolo, .ch-v-agent .axolo, .p-manager .axo-carte .axolo { filter: none !important; }
.axo-carte .axolo::after, .ch-carte .axolo::after, .ch-v-agent .axolo::after { content: ""; position: absolute; z-index: -1; left: 18%; right: 18%; bottom: 4%; height: 14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(59, 41, 34, .28), rgba(59, 41, 34, 0)); pointer-events: none; }
.ax-contour { stroke-opacity: .26; }

/* Petites tailles (barres, en-têtes, bouton) : contour diffus, modelé plus contrasté ;
   le guide prend un pêche plus soutenu (même teinte que #FBC1AD, plus de profondeur). */
.axolo-sm .ax-contour, .axolo-md .ax-contour, .axolo-lg .ax-contour { stroke-opacity: .12; }
.axolo-sm .ax-ombre.ax-bord, .axolo-md .ax-ombre.ax-bord, .axolo-lg .ax-ombre.ax-bord { stop-opacity: .78; }
.axolo-sm[data-axolo="guide"], .axolo-md[data-axolo="guide"], .axolo-lg[data-axolo="guide"] { --m-base: #F7A58C; --m-light: #FFE3D4; --m-low: #E0645C; --m-accent: #F2875F; --m-ombre: #7A2E2A; }
.axolo-sm::before, .axolo-md::before { opacity: 0 !important; }

/* Ombre interne au lieu du contour (14/10) : la silhouette tracée épaisse, floutée et découpée
   dans le corps, légèrement décalée vers le bas — elle fonce les bords et donne du volume. */
.ax-contour { display: none; }
.ax-interne { fill: none; stroke: var(--m-ombre); stroke-opacity: .5; stroke-width: 7; }
.axolo-sm .ax-interne, .axolo-md .ax-interne { stroke-opacity: .6; stroke-width: 8; }
.ax-ombre.ax-bord, .axolo-sm .ax-ombre.ax-bord, .axolo-md .ax-ombre.ax-bord, .axolo-lg .ax-ombre.ax-bord { stop-opacity: .4; }

/* Ombre interne au lieu du contour (14/10) : la silhouette tracée épaisse, floutée et découpée
   dans le corps, légèrement décalée vers le bas — elle fonce les bords et donne du volume. */
.ax-contour { display: none; }
.ax-interne { fill: none; stroke: var(--m-ombre); stroke-opacity: .5; stroke-width: 7; }
.axolo-sm .ax-interne, .axolo-md .ax-interne { stroke-opacity: .6; stroke-width: 8; }
.ax-ombre.ax-bord, .axolo-sm .ax-ombre.ax-bord, .axolo-md .ax-ombre.ax-bord, .axolo-lg .ax-ombre.ax-bord { stop-opacity: .4; }

/* Volume des tests Figma (623:9948) : un dégradé radial sur tout le corps, transparent au centre,
   saturé sur les bords, d une couleur propre à chaque Axolo. Remplace l ombre interne. */
.ax-interne { display: none; }
.ax-bord-0 { stop-color: var(--m-bord); stop-opacity: 0; }
.ax-bord-1 { stop-color: var(--m-bord); stop-opacity: 1; }
.axolo[data-axolo="guide"]   { --m-bord: #BF17A6; }
.axolo[data-axolo="produit"] { --m-bord: #E8451C; }
.axolo[data-axolo="ui"]      { --m-bord: #4B4BE8; }
.axolo[data-axolo="ux"]      { --m-bord: #3A5BA8; }
.axolo[data-axolo="dev"]     { --m-bord: #6A3FD6; }
.ax-ombre.ax-bord, .axolo-sm .ax-ombre.ax-bord, .axolo-md .ax-ombre.ax-bord, .axolo-lg .ax-ombre.ax-bord { stop-opacity: .3; }

/* 14/10 : petits Axolo plus grands et sans ombre (plus nets) ; logo sans drop-shadow au repos */
.axolo-sm { --taille: 28px; } .axolo-md { --taille: 36px; }
.axolo-sm .ax-ombre, .axolo-md .ax-ombre { stop-opacity: 0 !important; }
.axolo-sm::after, .axolo-md::after { display: none; }
.logo-corps, .ch-tete .logo-corps, .p-manager .logo-corps { filter: none; }

/* Guide aux couleurs primaires (pêche #FFA691 des boutons, bord corail) — 14/10 */
.axolo[data-axolo="guide"], .axolo-sm[data-axolo="guide"], .axolo-md[data-axolo="guide"], .axolo-lg[data-axolo="guide"] { --m-base: #FFA691; --m-light: #FFDCCB; --m-low: #F47E68; --m-accent: #FF9A7A; --m-ombre: #7A2E2A; --m-pupille: #6E2A2A; --m-bord: #E04A35; }
.axo-carte[data-axolo="guide"], .ch-carte[data-axolo="guide"], .ch-visuel[data-axolo="guide"] { --m-base: #FFA691; --m-light: #FFDCCB; --m-low: #F9A27E; }

/* « The team », piste C retenue (14/10) : carte sombre sobre, axolo centré en grand, lueur douce ;
   « No. 01 » et le nom gardent le style d'origine ; pas de filet coloré. */
.p-manager .axo-carte { background: #191716; border: 1px solid rgba(255, 255, 255, .07); color: #F2ECE5; padding: 20px 20px 18px; }
.p-manager .axo-carte::before { inset: 0; border-radius: inherit; filter: none; opacity: 1; background: radial-gradient(60% 36% at 50% 28%, color-mix(in srgb, var(--m-base) 14%, transparent), transparent 72%); }
.p-manager .axo-carte::after { display: none; }
.p-manager .axo-tete { position: relative; justify-content: center; margin: 10px 0 18px; }
.p-manager .axo-tete .axo-num { position: absolute; right: 0; top: -2px; color: #F2ECE5; opacity: .55; }
.p-manager .axo-carte .axo-tete .axolo { --taille: 120px; margin: 18px 0 4px; }
.p-manager .axo-carte .axo-tete .axolo::before { opacity: .3 !important; inset: -20% !important; filter: blur(14px) !important; }
.p-manager .axo-carte .axolo::after { background: radial-gradient(closest-side, rgba(0, 0, 0, .5), transparent); }
.p-manager .axo-carte h3 { color: #F2ECE5; }
.p-manager .axo-role { color: var(--m-light); }
.p-manager .axo-carte p:not(.axo-role) { color: rgba(242, 236, 229, .72); }
.p-manager .axo-carte q { color: rgba(242, 236, 229, .5); border-top-color: rgba(255, 255, 255, .12); }

/* Hero : la vidéo Vimeo à la place de l'image (15/10) */
.p-manager .hero-video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-xl); overflow: hidden; background: #000; box-shadow: var(--ombre-produit); }
.p-manager .hero-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Rangée « Design system » (15/10) */
.p-manager .fonction:nth-child(1) .fonction-visuel { --t1: #B7C1FF; --t2: #E6F8FF; --t3: #FFC9B5; --t4: #F5F5FF; }
.p-manager .ds-sources { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.p-manager .ds-sources span { font-family: var(--mono); font-size: 11.5px; padding: 4px 10px; border-radius: var(--r-pill); border: 1px solid var(--ui-filet); color: var(--ui-faible); }
.p-manager .ds-sources span.on { background: var(--encre-produit); border-color: var(--encre-produit); color: var(--ui-fond); }
.p-manager .ds-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.p-manager .ds-liste li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 12px; border-radius: 12px; background: var(--ui-carte); border: 1px solid var(--ui-filet); }
.p-manager .ds-liste b { font-family: var(--mono); font-weight: 500; font-size: 13px; color: var(--encre-clair); }
.p-manager .ds-liste small { grid-column: 1; font-size: 12px; color: var(--ui-faible); }
.p-manager .ds-liste em { grid-column: 2; grid-row: 1 / 3; align-self: center; font-style: normal; font-family: var(--mono); font-size: 10.5px; letter-spacing: var(--track-data); text-transform: uppercase; padding: 3px 9px; border-radius: var(--r-pill); }
.p-manager .ds-liste em.ok { background: var(--conforme-fond); color: var(--conforme); }
.p-manager .ds-liste em.draft { background: #FFF1EC; color: #C2410C; border: 1px dashed rgba(194, 65, 12, .4); }
.p-manager .ds-pied { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: 12.5px; color: var(--ui-faible); }
.p-manager .ds-pied b { padding: 8px 14px; border-radius: var(--r-pill); background: var(--peche); color: var(--encre-sur-peche); font-size: 13px; }
.p-manager .fonction:nth-child(1) .fonction-visuel { aspect-ratio: auto; padding: 7% 7%; }
.p-manager .ui-ds { position: relative; left: auto; top: auto; transform: none; width: 100%; border-bottom-right-radius: 18px; }
.p-manager .ui-ds .ds-liste li { padding: 8px 12px; }
/* Hero rééquilibré (15/10) */
.p-manager .dm-hero .eyebrow { margin-bottom: 30px; }
.p-manager .dm-hero h1 { margin-bottom: 26px; }
.p-manager .dm-hero .lede { font-size: 20px; line-height: 1.5; max-width: 620px; margin-bottom: 34px; }
.p-manager .reassurance { margin-top: 20px; opacity: .8; }
/* Hero : titre plus affirmé, rythme 24 / 28 / 36 / 16 (15/10, retour 2) */
.p-manager .dm-hero h1 { font-size: clamp(40px, 4.6vw, 66px); line-height: 1.04; letter-spacing: -.025em; margin-bottom: 28px; }
.p-manager .dm-hero .eyebrow { margin-bottom: 24px; }
.p-manager .dm-hero .lede { margin-bottom: 36px; }
.p-manager .reassurance { margin-top: 16px; }
.p-manager .dm-hero .mot-cadre { margin-top: .06em; }