/* Site v2 : page Assistant IA (logiciel-ia-syndic-copropriete.php), scènes des cinq panneaux.
   Grammaire des cartes du hero de l'accueil (css/v2-accueil.css) : feuilles blanches flottantes, ombre douce,
   pastilles d'initiales, coches vertes, soleil pêche derrière. Sous 760 px, les cartes s'empilent sans rotation. */

.pm-encart:has(> .ia-scene) { padding: clamp(20px, 3vw, 36px); overflow: hidden; background: radial-gradient(circle at 62% 58%, #f6dfc4 0 30%, transparent 30.2%), linear-gradient(180deg, #f4f6f9, #eef2f7); }
[data-theme="nuit"] .pm-encart:has(> .ia-scene) { background: radial-gradient(circle at 62% 58%, rgba(252, 136, 34, .16) 0 30%, transparent 30.2%), var(--s-bg3); }

.ia-scene { position: relative; height: 380px; font-family: var(--texte); }
.ia-c { position: absolute; z-index: 2; background: #fff; border-radius: 16px; padding: 14px; color: #13284b; font-size: 12px; line-height: 1.35;
    box-shadow: 0 0 0 1px rgba(19, 40, 75, .06), 0 2px 4px rgba(19, 40, 75, .04), 0 24px 44px -18px rgba(19, 40, 75, .32); }
[data-theme="nuit"] .ia-c { box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 28px 50px -16px rgba(0, 0, 0, .55); }
.ia-c svg, .ia-pastille svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ia-scene p { max-width: none; margin: 0; font-size: 12px; line-height: 1.4; color: inherit; }

/* Briques communes : tête à pastille, étiquette, coche, bouton, progression */
.ia-tete { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ia-tete b { display: block; font: 700 13px/1.25 var(--titre); letter-spacing: -.01em; }
.ia-tete small { display: block; font-size: 11px; color: #6484a3; }
.ia-m { width: 32px; height: 32px; border-radius: 9px; flex: none; display: grid; place-items: center; font: 800 9.5px/1 var(--titre); letter-spacing: .04em; }
.ia-m--rond { border-radius: 50%; width: 30px; height: 30px; }
.ia-m--ia { background: #13284b; color: #fff; }
.ia-m--asc { background: #eef2f7; color: #13284b; }
.ia-m--bq { background: #e6f1eb; color: #437a56; }
.ia-m--mb { background: #fff1e3; color: #b85400; }
.ia-m--tm { background: #e5eefb; color: #24508f; }
.ia-m--doc { background: #fff1e3; color: #b85400; font-size: 8.5px; }
.ia-m--gris { background: #f1f3f6; color: #8a9bb0; }
.ia-etiq { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; font-size: 10.5px; font-weight: 600; color: #6484a3; }
.ia-etiq i { width: 6px; height: 6px; border-radius: 50%; background: #fc8822; }
.ia-coche { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #437a56; color: #fff; font: 800 11px/1 var(--titre); }
.ia-coche svg { width: 11px; height: 11px; stroke-width: 3.4; }
.ia-champ { display: flex; align-items: center; gap: 10px; padding: 7px 0; font: 600 12px/1.25 var(--texte); }
.ia-champ + .ia-champ { border-top: 1px dashed #e3e8ef; }
.ia-champ small { display: block; font-weight: 500; font-size: 11px; color: #6484a3; }
.ia-champ--av .ia-coche { background: #fc8822; color: #13284b; }
.ia-champ--av small { color: #b85400; font-weight: 600; }
.ia-btn { display: inline-flex; align-items: center; padding: 8px 13px; border-radius: 9px; background: linear-gradient(180deg, #ffa24a, #fc8822); color: #13284b; font: 700 11.5px/1 var(--titre); box-shadow: 0 2px 0 #c4600c; white-space: nowrap; }
.ia-pied { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; }
.ia-prog { display: flex; align-items: center; gap: 8px; margin: -2px 0 8px; font-size: 11px; font-weight: 700; color: #437a56; white-space: nowrap; }
.ia-prog i { flex: 1; height: 5px; border-radius: 3px; background: #edf1f5; overflow: hidden; position: relative; }
.ia-prog i::after { content: ""; position: absolute; inset: 0; background: #437a56; transform: scaleX(var(--v, .43)); transform-origin: 0 50%; }
.ia-pastille { position: absolute; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 7px 14px 7px 7px; border-radius: 999px; background: #437a56; color: #fff; font: 700 12.5px/1 var(--titre); white-space: nowrap; box-shadow: 0 0 0 4px #fff, 0 14px 26px -10px rgba(67, 122, 86, .75); }
.ia-pastille svg { width: 22px; height: 22px; padding: 5px; border-radius: 50%; background: #fff; color: #437a56; stroke-width: 3.2; }

/* ─── 1. Communication : fiche épurée (modèle .sb-chat des bénévoles), filets fins, sans rotation ni ombre lourde ─── */
.pm-encart:has(> :is(.ia-scene--com, .ia-scene--plat, .ia-scene--rag, .ia-scene--mcp)) { background: var(--c-vis); box-shadow: inset 0 0 0 1px var(--c-trait); }
.ia-scene:is(.ia-scene--com, .ia-scene--plat) { height: auto; display: grid; place-items: center; padding: 8px 0; }
.ia-fiche { width: min(520px, 100%); padding: 16px; border-radius: 20px; background: var(--c-bg); color: var(--c-txt); box-shadow: inset 0 0 0 1px var(--c-trait), 0 1px 2px rgba(19, 40, 75, .04), 0 30px 60px -40px rgba(19, 40, 75, .35); }
@media (min-width: 521px) { .ia-scene--com .ia-fiche { zoom: .82; } }
.ia-fiche-t { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--c-trait); }
.ia-fiche-t img { width: 24px; height: 24px; flex: none; }
.ia-fiche-t b { display: block; font: 700 13.5px/1.3 var(--titre); }
.ia-fiche-t small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--c-doux); }
.ia-fiche-t > span { margin-left: auto; padding: 4px 9px; border-radius: 999px; background: var(--c-vis); box-shadow: inset 0 0 0 1px var(--c-trait); font-size: 11px; font-weight: 600; color: var(--c-doux); white-space: nowrap; }
.ia-fil { display: grid; gap: 10px; padding: 14px 0; }
.ia-scene .ia-b { margin: 0; font-size: 13px; line-height: 1.5; }
.ia-scene .ia-b--moi { justify-self: end; max-width: 80%; padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: #193451; color: #fff; }
[data-theme="nuit"] .ia-scene .ia-b--moi { background: #fff; color: #13284b; }
.ia-b--ia { max-width: 92%; padding: 11px 14px; border-radius: 14px 14px 14px 4px; background: var(--c-vis); box-shadow: inset 0 0 0 1px var(--c-trait); }
.ia-scene .ia-b--ia > p { color: var(--c-txt); font-size: 13px; }
.ia-t { display: grid; grid-template-columns: 1fr auto; width: min(300px, 100%); margin-top: 6px; border-radius: 8px; background: var(--c-bg); box-shadow: inset 0 0 0 1px var(--c-trait); font-size: 11.5px; }
.ia-t > * { padding: 4px 10px; border-top: 1px solid var(--c-trait); color: var(--c-doux); }
.ia-t > :nth-child(-n+2) { border-top: 0; }
.ia-t b { font-weight: 700; color: var(--c-txt); text-align: right; font-variant-numeric: tabular-nums; }
.ia-t .ia-t-tot { font-weight: 700; color: var(--c-txt); }
.ia-sources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.ia-sources span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 7px; border-radius: 999px; background: #fff1e3; color: #a24f05; font-size: 11.5px; font-weight: 600; }
.ia-sources svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Le PDF préparé : aperçu de page, nom, et les trois gestes (ouvrir, modifier, envoyer) */
.ia-pdf { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; margin-top: 8px; padding: 10px; border-radius: 10px; background: var(--c-bg); box-shadow: inset 0 0 0 1px var(--c-trait); }
.ia-pdf-page { grid-row: span 2; display: grid; align-content: start; gap: 3px; width: 38px; height: 50px; padding: 7px 6px; border-radius: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(19, 40, 75, .12), 0 4px 10px -4px rgba(19, 40, 75, .3); }
.ia-pdf-page i { height: 2px; border-radius: 1px; background: #d5dbe3; }
.ia-pdf-page i:first-child { width: 60%; height: 3px; background: #fc8822; }
.ia-pdf-page i:nth-child(3) { width: 70%; }
.ia-pdf-nom b { display: block; font-size: 12px; font-weight: 700; }
.ia-pdf-nom small { display: block; font-size: 11px; color: var(--c-doux); }
.ia-pdf-act { display: flex; flex-wrap: wrap; gap: 6px; }
.ia-pdf-act span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 7px; box-shadow: inset 0 0 0 1px var(--c-trait); font-size: 11px; font-weight: 600; color: var(--c-txt); white-space: nowrap; }
.ia-pdf-act em { font-style: normal; }
.ia-pdf-act span.on { background: #fc8822; box-shadow: none; color: #13284b; }
.ia-pdf-act svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 520px) {
    .ia-scene .ia-b--ia { max-width: 100%; }
    .ia-t > * { white-space: nowrap; }
    .ia-pdf { gap: 8px 10px; }
    .ia-pdf-page { grid-row: auto; width: 30px; height: 40px; padding: 5px; }
    .ia-pdf-act { grid-column: 1 / -1; }
    .ia-pdf-act span { padding: 4px 7px; }
    .ia-pdf-act em { display: none; }
}
.ia-saisie { display: flex; align-items: center; justify-content: space-between; padding: 9px 9px 9px 14px; border-radius: 12px; background: var(--c-bg); box-shadow: inset 0 0 0 1px var(--c-trait); font-size: 12.5px; color: var(--c-doux); }
.ia-saisie i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: #fc8822; color: #fff; }
.ia-saisie svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }

/* ─── 2. Fil de traitement ─── */
.ia-file { position: absolute; left: 2%; top: 10%; display: grid; gap: 12px; width: min(280px, 46%); }
.ia-file .ia-c { position: relative; }
.ia-doc { display: flex; align-items: center; gap: 10px; padding: 12px; }
.ia-doc b { display: block; font: 700 12.5px/1.25 var(--titre); }
.ia-doc small { display: block; font-size: 11px; color: #6484a3; }
.ia-doc > div { flex: 1; min-width: 0; }
.ia-doc:nth-child(1) { transform: translateX(18px) rotate(-1deg); box-shadow: 0 0 0 2px #fc8822, 0 24px 44px -18px rgba(19, 40, 75, .32); }
.ia-doc:nth-child(2) { transform: rotate(1deg); }
.ia-doc:nth-child(3) { transform: translateX(10px) rotate(-.5deg); opacity: .92; }
.ia-st { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 4px 8px; border-radius: 999px; font: 700 10.5px/1 var(--texte); }
.ia-st--val { background: #fc8822; color: #13284b; }
.ia-st--lit { background: #e5eefb; color: #24508f; }
.ia-st--lit i { width: 9px; height: 9px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: ia-tourne 1s linear infinite; }
.ia-st--ok { background: #e6f1eb; color: #437a56; }
.ia-prop { right: 3%; top: 3%; width: min(290px, 48%); transform: rotate(1.5deg); }
.ia-kbd { display: inline-flex; gap: 4px; }
.ia-kbd kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px #c9d6e3, 0 2px 0 #c9d6e3; font: 700 11px/1 var(--titre); color: #13284b; }

.ia-laser { position: absolute; left: 0; right: 0; top: 0; height: 26px; background: linear-gradient(180deg, transparent, rgba(252, 136, 34, .22) 70%, #fc8822 72%, transparent 76%); animation: ia-balaye 4s ease-in-out infinite; }

@keyframes ia-tourne { to { transform: rotate(360deg); } }
@keyframes ia-balaye { 0%, 100% { transform: translateY(-30px); } 50% { transform: translateY(300px); } }
@keyframes ia-jaillit { 0%, 20% { opacity: 0; transform: translateY(8px) scale(.7); } 26% { opacity: 1; transform: translateY(0) scale(1.06); } 30%, 92% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.9); } }
@media (prefers-reduced-motion: reduce) { .ia-st--lit i, .ia-laser, .ia-pastille { animation: none !important; } .ia-laser { display: none; } }

/* Téléphone et tablette étroite : les cartes s'empilent, sans rotation ni position absolue */
@media (max-width: 760px) {
    .ia-scene { height: auto; display: grid; gap: 14px; }
    .ia-scene > *, .ia-file { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; transform: none !important; }
    .ia-pastille { justify-self: start; animation: none !important; }
    .ia-doc:nth-child(1), .ia-doc:nth-child(3) { transform: none; }
    .ia-laser { display: none; }
}

/* ─── Hero : l'astre respire, le trait de lecture descend le faisceau, les points lus remontent ─── */
.ia-halo { transform-box: fill-box; transform-origin: center; animation: ia-respire 4s ease-in-out infinite; }
.ia-halo--2 { animation-delay: -2s; }
.ia-trait { animation: ia-descend 3.2s ease-in infinite; }
.ia-lu { opacity: 0; animation: ia-monte 3.2s ease-out infinite; animation-delay: calc(var(--k) * .45s); }
@keyframes ia-respire { 50% { transform: scale(1.12); opacity: .12; } }
@keyframes ia-descend { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .8; } 100% { transform: translateY(280px); opacity: 0; } }
@keyframes ia-monte { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-180px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ia-halo, .ia-trait, .ia-lu { animation: none; } .ia-trait, .ia-lu { display: none; } }
/* Le projecteur passe d'une maison à l'autre : centre, gauche, droite, immeuble vert, en pivotant autour de l'astre */
.ia-projecteur { transform-box: view-box; transform-origin: 248px 80px; animation: ia-balaye-maisons 14s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes ia-balaye-maisons {
    0%, 18% { transform: rotate(0deg); }
    25%, 43% { transform: rotate(29deg); }
    50%, 68% { transform: rotate(-26deg); }
    75%, 93% { transform: rotate(-17deg); }
    100% { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) { .ia-projecteur { animation: none; } }

/* ─── 4. Compteurs : relevé PDF du prestataire balayé par la lecture (grammaire de la scène 5), proposition de relevé ─── */
.ia-rel-scan { position: relative; display: grid; place-items: center; padding: 10px 0; overflow: hidden; }
.ia-rel-scan .ia-laser { z-index: 2; }
.ia-rel-doc { width: min(250px, 100%); padding: 16px 16px 12px; border-radius: 3px; background: #fff; color: #33373d; font: 11px/1.35 ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif; transform: rotate(-2deg); box-shadow: 0 1px 2px rgba(19, 40, 75, .12), 0 24px 44px -18px rgba(19, 40, 75, .4); }
.ia-rel-doc-t { display: flex; align-items: center; gap: 8px; padding-bottom: 9px; border-bottom: 2px solid #2c5d8f; }
.ia-rel-doc-t i { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 4px; background: #2c5d8f; color: #fff; font: 800 9.5px/1 ui-sans-serif, sans-serif; font-style: normal; }
.ia-rel-doc-t b { display: block; font-size: 12px; }
.ia-rel-doc-t small { display: block; font-size: 10px; color: #6b7178; }
.ia-scene .ia-rel-doc p { margin: 8px 0; font-size: 10px; line-height: 1.3; color: #6b7178; }
.ia-scene .ia-rel-doc p:last-child { margin-bottom: 0; text-align: right; }
.ia-rel-doc-l { display: grid; grid-template-columns: 1fr auto; font: 11px/1.3 ui-monospace, Menlo, monospace; }
.ia-rel-doc-l > * { padding: 4px 3px; border-bottom: 1px solid #eceef1; }
.ia-rel-doc-l b { text-align: right; font-weight: 600; }
.ia-rel-doc-l > :nth-child(-n+2) { font: 700 9.5px/1.6 ui-sans-serif, sans-serif; color: #6b7178; }
/* Les deux index suspects s'allument quand la lecture est passée */
.ia-rel-doc-l b.x { border-radius: 3px; animation: ia-rel-x 4s ease-in-out infinite; }
@keyframes ia-rel-x { 0%, 40% { background: transparent; color: inherit; } 55%, 100% { background: #fff1e3; color: #a24f05; } }

/* La proposition : index rattachés aux lots, anomalies et leur suggestion, validation */
.ia-rel-t { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, auto) 18px; align-items: center; column-gap: 14px; padding-top: 6px; font-size: 12px; color: var(--c-txt); }
.ia-rel-t > span { overflow: hidden; padding: 6px 0; border-top: 1px solid var(--c-trait); white-space: nowrap; text-overflow: ellipsis; font-weight: 600; }
.ia-rel-t > .h { border-top: 0; color: var(--c-doux); font-size: 10.5px; }
.ia-rel-t > .n { text-align: right; font-variant-numeric: tabular-nums; }
.ia-rel-t > .a { color: #a24f05; }
.ia-rel-t > i { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; font: 800 10.5px/1 var(--titre); font-style: normal; }
.ia-rel-t > i.ok { background: #437a56; color: #fff; }
.ia-rel-t > i.ok svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.ia-rel-t > i.av { background: #fc8822; color: #13284b; }
.ia-scene .ia-rel-sug { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 0 0 5px; padding: 5px 6px 5px 10px; border-left: 2px solid #fc8822; border-radius: 0 7px 7px 0; background: #fff6ec; color: #13284b; font-size: 11px; line-height: 1.3; }
.ia-rel-sug em { margin-left: auto; padding: 3px 8px; border-radius: 6px; box-shadow: inset 0 0 0 1px #fc8822; font-style: normal; font-weight: 700; white-space: nowrap; }
.ia-rel-t > .ia-rel-plus { grid-column: 1 / -1; color: var(--c-doux); font-weight: 500; font-size: 11px; }
.ia-rel-pied { display: flex; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--c-trait); font-size: 11px; color: var(--c-doux); }
.ia-rel-pied b { margin-left: auto; padding: 7px 12px; border-radius: 9px; background: #fc8822; color: #13284b; font: 700 11.5px/1 var(--titre); box-shadow: inset 0 -3px 0 #c9620c; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .ia-rel-doc-l b.x { animation: none; background: #fff1e3; color: #a24f05; } }
@media (max-width: 760px) { .ia-rel-doc { transform: none; zoom: .8; } .ia-rel-scan .ia-laser { display: block; } }
@media (max-width: 420px) {
    .ia-rel-t { grid-template-columns: minmax(0, 1fr) repeat(2, auto) 18px; column-gap: 10px; }
    .ia-rel-t > .o { display: none; }
    .ia-rel-pied { flex-wrap: wrap; }
}

/* ─── 5. Recherche (RAG) : pages anciennes en éventail balayées par la lecture, recherche et passages cités ─── */
.ia-scene--rag { height: auto; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: 28px; }
.ia-pages { position: relative; height: 300px; }
.ia-page { position: absolute; width: 62%; height: 78%; padding: 16px 14px; border-radius: 3px; color: #4d4a42; font-family: "Courier New", Courier, monospace;
    background: repeating-linear-gradient(0deg, rgba(90, 80, 60, .035) 0 1px, transparent 1px 3px), linear-gradient(160deg, #f7f1e1, #ece2c9 70%, #e4d8bb);
    box-shadow: 0 1px 2px rgba(19, 40, 75, .12), 0 24px 44px -18px rgba(19, 40, 75, .4); }
.ia-page b { display: block; font-size: 11px; letter-spacing: .06em; }
.ia-page small { display: block; margin-bottom: 12px; font-size: 10px; }
.ia-page i { display: block; height: 5px; margin: 9px 0; border-radius: 1px; background: rgba(77, 74, 66, .26); }
.ia-page i.c { width: 55%; }
.ia-page i.hl { background: rgba(252, 136, 34, .55); box-shadow: 0 0 0 3px rgba(252, 136, 34, .18); animation: ia-trouve 4s ease-in-out infinite; }
.ia-page--1 { left: 0; top: 8%; transform: rotate(-7deg); }
.ia-page--2 { left: 18%; top: 2%; transform: rotate(2deg); background: repeating-linear-gradient(0deg, rgba(90, 80, 60, .03) 0 1px, transparent 1px 3px), linear-gradient(160deg, #f4f1ea, #e7e1d3); }
.ia-page--3 { left: 36%; top: 12%; transform: rotate(8deg); }
.ia-annot { position: absolute; right: 10px; bottom: 26px; color: #2f5fb3; font: italic 600 12px/1 "Brush Script MT", "Segoe Script", cursive; transform: rotate(-6deg); }
.ia-pages .ia-laser { z-index: 2; }
.ia-fiche--rag { width: 100%; }
.ia-recherche { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; background: var(--c-bg); box-shadow: inset 0 0 0 1.5px #fc8822, 0 0 0 4px rgba(252, 136, 34, .12); font-size: 13px; font-weight: 600; color: var(--c-txt); }
.ia-recherche svg { width: 17px; height: 17px; flex: none; fill: none; stroke: #fc8822; stroke-width: 2.2; stroke-linecap: round; }
.ia-portee { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 0 12px; border-bottom: 1px solid var(--c-trait); }
.ia-portee span { padding: 4px 9px; border-radius: 999px; background: var(--c-vis); box-shadow: inset 0 0 0 1px var(--c-trait); font-size: 11px; font-weight: 600; color: var(--c-doux); }
.ia-portee .on { background: #13284b; color: #fff; box-shadow: none; }
.ia-res { padding: 11px 0; }
.ia-res + .ia-res { border-top: 1px solid var(--c-trait); }
.ia-res-t { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; }
.ia-res-t em { grid-row: span 2; padding: 4px 7px; border-radius: 6px; background: var(--c-vis); box-shadow: inset 0 0 0 1px var(--c-trait); font: 700 10px/1 var(--texte); font-style: normal; color: var(--c-doux); text-transform: uppercase; }
.ia-res-t em.scan { background: #fff1e3; color: #a24f05; box-shadow: none; }
.ia-res-t b { font: 700 12.5px/1.25 var(--titre); color: var(--c-txt); }
.ia-res-t small { font-size: 11px; color: var(--c-doux); }
.ia-scene .ia-res p { margin-top: 7px; padding-left: 10px; border-left: 2px solid #fc8822; font-size: 12px; line-height: 1.5; color: var(--c-doux); font-style: italic; }
.ia-res mark { padding: 0 3px; border-radius: 4px; background: #fff1e3; color: #a24f05; font-style: normal; font-weight: 700; }
@keyframes ia-trouve { 0%, 40% { background: rgba(77, 74, 66, .26); box-shadow: none; } 55%, 100% { background: rgba(252, 136, 34, .55); box-shadow: 0 0 0 3px rgba(252, 136, 34, .18); } }


@media (max-width: 760px) {
    .ia-scene--rag { grid-template-columns: minmax(0, 1fr); }
    .ia-pages { height: 220px; }
}
@media (max-width: 420px) { .ia-fiche-t > span:not(.ia-llm) { display: none; } .ia-cpt { gap: 0 10px; } }

/* ─── 3. Mails : messagerie en deux volets, le tri en petit texte, le mail ouvert et son brouillon ─── */
.ia-mx { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); width: min(620px, 100%); overflow: hidden; border-radius: 18px; background: var(--c-bg); color: var(--c-txt); box-shadow: inset 0 0 0 1px var(--c-trait), 0 1px 2px rgba(19, 40, 75, .04), 0 30px 60px -40px rgba(19, 40, 75, .35); }
.ia-mx-liste { padding: 14px 8px; border-right: 1px solid var(--c-trait); background: var(--c-vis); }
.ia-mx-t { padding: 0 8px 10px; }
.ia-mx-t b { display: block; font: 700 13px/1.3 var(--titre); }
.ia-mx-t small { font-size: 11px; color: var(--c-doux); }
.ia-mx-l { display: grid; gap: 1px; padding: 9px 10px; border-radius: 10px; font-size: 11.5px; }
.ia-mx-l b { font: 700 12px/1.3 var(--titre); }
.ia-mx-l span { overflow: hidden; color: var(--c-doux); white-space: nowrap; text-overflow: ellipsis; }
.ia-mx-l small { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 10.5px; font-weight: 600; color: var(--c-doux); }
.ia-mx-l small::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #b5c2d1; }
.ia-mx-l .c-fac::before { background: #2f6fd0; }
.ia-mx-l .c-rep::before { background: #fc8822; }
.ia-mx-l .c-sig::before { background: #437a56; }
.ia-mx-l.on { background: var(--c-bg); box-shadow: 0 1px 3px rgba(19, 40, 75, .1), inset 0 0 0 1px var(--c-trait); }
.ia-mx-l.lu { opacity: .55; }
.ia-mx-ouvert { display: grid; align-content: start; gap: 12px; padding: 16px 18px 18px; }
.ia-mx-de b { display: block; font: 700 13.5px/1.3 var(--titre); }
.ia-mx-de small { font-size: 11px; color: var(--c-doux); }
.ia-scene .ia-mx-q { padding-bottom: 12px; border-bottom: 1px solid var(--c-trait); font-size: 12.5px; line-height: 1.5; color: var(--c-doux); }
.ia-mx-brouillon { padding: 12px 14px; border-radius: 12px; background: linear-gradient(180deg, rgba(252, 136, 34, .07), transparent 60%), var(--c-bg); box-shadow: inset 0 0 0 1px rgba(252, 136, 34, .35); }
.ia-mx-brouillon > small { display: block; margin-bottom: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #b85400; }
.ia-scene .ia-mx-brouillon p { font-size: 12.5px; line-height: 1.55; }
.ia-mx-brouillon mark { padding: 0 3px; border-radius: 4px; background: #fff1e3; color: #a24f05; font-weight: 700; }
.ia-mx-pied { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.ia-mx-pied span { margin-right: auto; font-size: 10.5px; color: var(--c-doux); }
.ia-mx-pied em, .ia-mx-pied b { padding: 7px 12px; border-radius: 9px; font: 700 11.5px/1 var(--titre); font-style: normal; white-space: nowrap; }
.ia-mx-pied em { box-shadow: inset 0 0 0 1px var(--c-trait); }
.ia-mx-pied b { background: #fc8822; color: #13284b; box-shadow: inset 0 -3px 0 #c9620c; }
@media (max-width: 560px) {
    .ia-mx { grid-template-columns: minmax(0, 1fr); }
    .ia-mx-liste { border-right: 0; border-bottom: 1px solid var(--c-trait); }
    .ia-mx-l:not(.on) { display: none; }
    .ia-mx-pied span { display: none; }
}

/* ─── 6. Autorisations : réglages façon système, listes groupées en encart ─── */
.ia-av { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #eef2f7; color: #6484a3; font: 800 9.5px/1 var(--titre); letter-spacing: .04em; }
.ia-av--b { background: #e5eefb; color: #24508f; }
.ia-av--o { background: #fff1e3; color: #b85400; }
.ia-av--v { background: #e6f1eb; color: #437a56; }
.ia-av--n { background: #13284b; color: #fff; }
.ia-reg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; width: min(640px, 100%); }
.ia-scene .ia-reg-t { margin: 0 0 6px 14px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #8a9bb0; }
.ia-grp + .ia-reg-t { margin-top: 18px; }
.ia-grp { overflow: hidden; border-radius: 14px; background: var(--c-bg); box-shadow: inset 0 0 0 1px var(--c-trait), 0 1px 2px rgba(19, 40, 75, .04), 0 30px 60px -44px rgba(19, 40, 75, .35); }
.ia-ln { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--c-txt); }
.ia-ln + .ia-ln { box-shadow: inset 52px 1px 0 -51px var(--c-trait); }
.ia-ln > span:nth-child(2) { flex: 1; }
.ia-ln small { font-size: 12px; font-weight: 500; color: #8a9bb0; }
.ia-ico { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 7px; color: #fff; }
.ia-ico svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ia-ico--n { background: #13284b; }
.ia-ico--o { background: #fc8822; }
.ia-ico--v { background: #437a56; }
.ia-sw { position: relative; flex: none; width: 40px; height: 24px; border-radius: 999px; background: #d6dde6; }
.ia-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(19, 40, 75, .3); }
.ia-sw.on { background: #437a56; }
.ia-sw.on::after { left: 18px; }
.ia-chev { width: 7px; height: 7px; flex: none; border-top: 2px solid #b5c2d1; border-right: 2px solid #b5c2d1; transform: rotate(45deg); }
.ia-ln--jauge { display: grid; grid-template-columns: 1fr auto; row-gap: 8px; padding: 12px 14px; }
.ia-ln--jauge b { font: 800 13px/1 var(--titre); }
.ia-ln--jauge i { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: linear-gradient(90deg, #fc8822 calc(var(--v) * 100%), #e8edf3 0); }
.ia-scene .ia-reg-n { display: flex; gap: 8px; margin: 12px 4px 0; font-size: 11.5px; line-height: 1.45; color: var(--c-doux); }
.ia-reg-n svg { width: 14px; height: 14px; flex: none; margin-top: 1px; fill: none; stroke: #437a56; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 760px) {
    .ia-reg { grid-template-columns: minmax(0, 1fr); }
}
.ia-fiche { min-width: 0; max-width: 100%; }

/* ─── 7. Connexion : Insuleo (dessin des écrans .sm-* de l'accueil), flux MCP, fenêtre Claude ; en em ─── */
.ia-scene--mcp { height: auto; }
.ia-mcp { width: 80%; margin-inline: auto; container-type: inline-size; }
@media (max-width: 760px) { .ia-mcp { width: 100%; } }
.ia-mcp-in { --e: calc(100cqw / 76); position: relative; height: 50em; font-size: var(--e); perspective: 110em; }
/* Les deux fenêtres pivotent l'une vers l'autre, décalées en hauteur */
.ia-mcp-ins { position: absolute; left: 1em; top: 19em; width: 25em; transform: rotateY(16deg) rotateX(4deg); transform-origin: 0 50%; }
.ia-mcp-llm { position: absolute; right: .5em; top: 0; width: 36em; transform: rotateY(-9deg); transform-origin: 100% 50%; }

/* Insuleo */
.ia-mcp-ins { display: grid; grid-template-columns: 3.8em 1fr; overflow: hidden; border-radius: 1.1em; background: #eef1f5; color: #13284b; font-family: var(--jakarta); line-height: 1.4; box-shadow: 0 0 0 1px rgba(19, 40, 75, .08), 0 2em 4em -2.6em rgba(19, 40, 75, .45); }
.ia-mcp-sb { display: grid; gap: .45em; align-content: start; justify-items: center; padding: 1.1em 0; }
.ia-mcp-sb img { width: 2em; height: 2em; margin-bottom: .7em; }
.ia-mcp-sb i { width: 2.3em; height: 2.3em; display: grid; place-items: center; border-radius: .65em; color: #5d6f86; }
.ia-mcp-sb i.on { background: #fff; color: #fc8822; }
.ia-mcp-sb svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ia-mcp-win { margin-top: .8em; padding: 1.3em 1.3em 1.4em; border-radius: 1em 0 0 0; background: #fff; font-size: 1.05em; }
.ia-mcp-ph { margin-bottom: 1em; }
.ia-mcp-ph b { display: block; font-size: 1.45em; font-weight: 700; letter-spacing: -.01em; }
.ia-mcp-ph small { display: block; margin-top: .15em; color: #5f6770; }
.ia-mcp-win table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid #fc8822; border-radius: .8em; box-shadow: 0 0 0 .3em rgba(252, 136, 34, .14); }
.ia-mcp-win th { padding: .6em .8em; border-bottom: 1px solid #e3e7ec; background: #f6f8fa; color: #5f6770; font-size: .92em; font-weight: 600; text-align: left; }
.ia-mcp-win td { padding: .6em .8em; border-bottom: 1px solid #e3e7ec; font-weight: 600; white-space: nowrap; }
.ia-mcp-win tfoot td { border-bottom: 0; background: #f6f8fa; font-weight: 700; }
.ia-mcp-win .n { text-align: right; font-variant-numeric: tabular-nums; }

/* Flux : une courbe d'Insuleo vers Claude, une traînée et des données qui y circulent, une capsule de connexion au milieu */
.ia-mcp-trajet { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ia-mcp-rail { fill: none; stroke: #fc8822; stroke-width: 1.5; stroke-dasharray: 2 5; stroke-linecap: round; opacity: .5; }
.ia-mcp-trace { fill: none; stroke: url(#ia-mcp-degrade); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 16 84; animation: ia-mcp-trace 1.8s linear infinite; filter: drop-shadow(0 0 4px rgba(252, 136, 34, .6)); }
.ia-mcp-paquet rect { fill: #fff; stroke: rgba(252, 136, 34, .55); filter: drop-shadow(0 4px 8px rgba(19, 40, 75, .18)); }
.ia-mcp-paquet text { fill: #13284b; font: 700 11px var(--jakarta); text-anchor: middle; }
.ia-mcp-noeud { position: absolute; z-index: 3; left: 32.8em; top: 21.5em; display: grid; justify-items: center; gap: .6em; transform: translate(-50%, -4.25em); }
.ia-mcp-prise { position: relative; display: flex; align-items: center; gap: .45em; padding: .55em .7em; border-radius: 2em; background: #fff; box-shadow: 0 0 0 1px rgba(19, 40, 75, .08), 0 1.4em 2.4em -1em rgba(19, 40, 75, .4); }
.ia-mcp-prise::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: 0 0 0 0 rgba(252, 136, 34, .45); animation: ia-mcp-onde 2.4s ease-out infinite; }
.ia-mcp-prise img, .ia-mcp-prise .ia-mcp-claude { width: 2.4em; height: 2.4em; padding: .35em; border-radius: 50%; background: #f6f8fa; }
.ia-mcp-prise .ia-mcp-claude { background: #faf9f5; }
.ia-mcp-prise i { width: .4em; height: .4em; border-radius: 50%; background: #fc8822; animation: ia-mcp-sync 1.2s ease-in-out infinite; }
.ia-mcp-prise i:nth-of-type(2) { animation-delay: .2s; }
.ia-mcp-prise i:nth-of-type(3) { animation-delay: .4s; background: #d97757; }
.ia-mcp-noeud small { order: -1; padding: .3em .7em; border-radius: 1em; background: rgba(255, 255, 255, .85); color: #13284b; font: 700 1.05em/1.2 var(--titre); white-space: nowrap; }
.ia-scene .ia-mcp-outil { animation: ia-mcp-recu 1.8s ease-out infinite; }
@keyframes ia-mcp-trace { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes ia-mcp-onde { to { box-shadow: 0 0 0 1.4em rgba(252, 136, 34, 0); } }
@keyframes ia-mcp-sync { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes ia-mcp-recu { 0%, 60%, 100% { box-shadow: 0 0 0 0 rgba(217, 119, 87, 0); } 80% { box-shadow: 0 0 0 .35em rgba(217, 119, 87, .25); } }
@media (prefers-reduced-motion: reduce) {
    .ia-mcp-trace, .ia-mcp-prise::before, .ia-mcp-prise i, .ia-scene .ia-mcp-outil { animation: none; }
    .ia-mcp-paquet { display: none; }
}

/* Claude : fenêtre de l'application, ses couleurs et sa typographie de réponse */
.ia-mcp-llm { display: grid; overflow: hidden; border-radius: 1.1em; background: #faf9f5; color: #141413; font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.45; box-shadow: 0 0 0 1px rgba(20, 20, 19, .1), 0 3em 5em -2.4em rgba(20, 20, 19, .4); }
.ia-mcp-bar { display: flex; align-items: center; gap: .45em; padding: .85em 1.1em; border-bottom: 1px solid #e8e6dc; }
.ia-mcp-bar > i { width: .8em; height: .8em; border-radius: 50%; background: #dcd9ce; }
.ia-mcp-bar span { display: inline-flex; align-items: center; gap: .45em; margin: 0 auto; padding-right: 2.4em; font: 600 1.25em/1 ui-serif, Georgia, serif; }
.ia-mcp-claude { width: 1.25em; height: 1.25em; fill: #d97757; }
.ia-mcp-fil { display: grid; align-content: start; gap: .9em; padding: 1.3em 1.7em .4em; font-size: 1.12em; }
.ia-scene .ia-mcp-fil p { font: 1em/1.5 ui-serif, Georgia, serif; }
.ia-scene .ia-mcp-fil .ia-mcp-q { justify-self: end; max-width: 82%; padding: .65em 1em; border-radius: 1em; background: #f0eee6; font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif; }
.ia-scene .ia-mcp-fil .ia-mcp-outil { justify-self: start; display: flex; align-items: center; gap: .45em; padding: .45em .7em; border: 1px solid #e8e6dc; border-radius: .7em; background: #fff; color: #73726c; font: .88em/1.2 ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif; }
.ia-mcp-outil img { width: 1.3em; height: 1.3em; }
.ia-mcp-outil b { color: #141413; }
.ia-mcp-outil em { margin-left: .3em; padding: .15em .5em; border-radius: .4em; background: #13284b; color: #fff; font-style: normal; font-size: .85em; font-weight: 700; }
.ia-mcp-tb { padding: .9em 1em 1em; border: 1px solid #e8e6dc; border-radius: .9em; background: #fff; font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif; }
.ia-mcp-tb-t { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .8em; }
.ia-mcp-tb-t small { color: #73726c; font-size: .8em; }
.ia-mcp-chiffres { display: grid; grid-template-columns: 1.3fr 1fr 1fr; padding-bottom: .8em; border-bottom: 1px solid #ece9df; }
.ia-mcp-chiffres div + div { padding-left: .9em; border-left: 1px solid #ece9df; }
.ia-mcp-chiffres small { display: block; font-size: .78em; color: #73726c; }
.ia-mcp-chiffres b { font-size: 1.1em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ia-mcp-tb ul { display: grid; gap: .5em; margin: .8em 0 0; padding: 0; list-style: none; font-size: .8em; }
.ia-mcp-tb li { display: grid; grid-template-columns: 8.5em 1fr 6.4em; align-items: center; gap: .7em; }
.ia-mcp-tb li i { height: .7em; border-radius: .2em; background: linear-gradient(90deg, #d97757 calc(var(--v) * 100%), transparent 0); }
.ia-mcp-tb li b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ia-mcp-saisie { display: flex; align-items: center; gap: .6em; margin: .9em 1.3em 1.2em; padding: .65em .7em .65em .8em; border: 1px solid #e0ddd2; border-radius: 1.1em; background: #fff; color: #9a988f; font-size: 1.05em; }
.ia-mcp-saisie > span { width: 1.6em; height: 1.6em; display: grid; place-items: center; border-radius: 50%; border: 1px solid #e0ddd2; color: #73726c; }
.ia-mcp-saisie em { display: inline-flex; align-items: center; gap: .4em; margin-left: auto; padding: .3em .65em; border-radius: .8em; background: #f0eee6; color: #141413; font-style: normal; font-size: .9em; font-weight: 600; }
.ia-mcp-saisie img { width: 1.15em; height: 1.15em; }
.ia-mcp-saisie > i { width: 1.8em; height: 1.8em; display: grid; place-items: center; border-radius: .5em; background: #d97757; color: #fff; font-style: normal; font-weight: 700; }