/* DataFish V4.3 : page « Relation client » / "Customer relations" (clé clients, préfixe xr). Créée le 13/10/2026.
   Chargée après v3-home.css et v3-expert.css sur la page, et sur le garde-manger (PANTRY_CSS de build.mjs) : aucune règle sur un
   sélecteur général, tout est sous .xr ou préfixé xr-. Pas de contour autour des blocs : ils se distinguent par leur fond. */

/* ================= Premier bloc : de la demande d'un client à votre équipe =================
   Trois canaux (téléphone, site ou application, WhatsApp), l'assistant (ce qu'il fait, dans l'ordre), puis ce que reçoit
   votre équipe : la demande notée, le rendez-vous, le résumé, et le relais vers un conseiller. 258 px de haut sur ordinateur, comme
   les visuels compacts des autres pages (repère : la section tient dans une fenêtre de 1366 x 650). Hauteur et largeurs des tracés
   à garder en phase avec M dans .claude/exp/clients.mjs. Le visuel suit les étapes « Ce que nous faisons » (js/exp-clients.js) :
   data-step = étape en cours (0 à 4), data-s = étape à partir de laquelle un élément s'allume (1 canaux, 2 assistant, 3 ce que
   reçoit l'équipe, 4 relais). Sans script, ou mouvement réduit : état final. Aucune donnée d'exemple : les valeurs de la fiche sont
   des barres (ni nom, ni numéro).
   14/10 (direction « premium sobre », DIRECTION-STYLE-14-10.md, sections 7 et 9) : liaisons en filets pleins d'un pixel (avant :
   pointillés de 2 px qui défilaient) ; pictogrammes nus, sans tuile (avant : carrés blancs, écume ou marine, pictogrammes #74C3EE) ;
   l'assistant porte un pictogramme d'agent au lieu du poisson (clients.mjs) ; coches au trait, sans rond ; relais vers un conseiller
   en bloc à rayon 6 (avant : pilule 999px) ; rayons à 6 px (avant 13 à 18) ; titres en 600. */
.xr { --xr-off: #DCE3EA; position: relative; } /* 14/10 : avant #CADBE9 */
.xr-stage { display: grid; grid-template-columns: 200px 72px 236px 40px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: 258px; }
/* vos canaux */
.xr-src { display: flex; flex-direction: column; justify-content: space-between; margin: 0; padding: 0; list-style: none; }
.xr-src li { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 14px; border-radius: var(--b-r-card); background: var(--sea); }
.xr-src i { display: grid; place-items: center; flex: none; width: 20px; height: 20px; color: var(--tide); transition: color .35s var(--ease-out); }
.xr-src i svg { width: 19px; height: 19px; }
.xr-src b { font-size: 14.5px; line-height: 1.25; color: var(--ink); }
/* tracés : filets pleins (14/10 ; avant : pointillés, stroke-width 2, stroke-dasharray 4 5) */
.xr-w { display: block; width: 100%; height: 258px; overflow: visible; }
.xr-w path { fill: none; stroke: var(--tide); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke .4s var(--ease-out); }
/* l'assistant */
.xr-hub { align-self: center; display: grid; gap: 12px; padding: 16px 16px 18px; border-radius: var(--b-r-card); background: var(--ink); color: #fff; }
.xr-hub-h { display: flex; align-items: center; gap: 10px; margin: 0; }
.xr-hub-h i { display: grid; place-items: center; flex: none; width: 22px; height: 22px; color: var(--b-accent-dark); }
.xr-hub-h i svg { display: block; width: 21px; height: 21px; }
.xr-hub-h b { font: 600 15px/1.2 var(--f-display); }
.xr-chk { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.xr-chk li { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; line-height: 1.35; color: rgba(255, 255, 255, .88); }
.xr-chk li i { display: grid; place-items: center; flex: none; width: 18px; height: 18px; color: var(--b-accent-dark); transition: color .35s var(--ease-out); } /* 14/10 : coche nue (avant : rond plein) */
.xr-chk li:nth-child(2) i { transition-delay: .12s; }
.xr-chk li:nth-child(3) i { transition-delay: .24s; }
.xr-chk li i svg { width: 16px; height: 16px; }
/* ce que reçoit votre équipe */
.xr-out { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; padding: 12px 14px; border-radius: var(--b-r-card); background: var(--sea); }
.xr-out-h { display: flex; align-items: center; gap: 10px; margin: 0; }
.xr-out-h > i { display: grid; place-items: center; flex: none; width: 20px; height: 20px; color: var(--tide); }
.xr-out-h > i svg { width: 19px; height: 19px; }
.xr-out-h > b { font: 600 15px/1.2 var(--f-display); color: var(--ink); }
.xr-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; flex: 1; min-height: 0; }
.xr-fiche { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px 12px; border-radius: var(--b-r-card); background: #fff; }
.xr-fiche > small { font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--muted); }
.xr-fiche ul { display: grid; align-content: space-evenly; gap: 6px; flex: 1; margin: 0; padding: 0; list-style: none; }
.xr-fiche li { display: grid; gap: 4px; }
.xr-fiche li span { font-size: 12.5px; font-weight: 600; line-height: 1.2; color: var(--ink); }
.xr-fiche li i { display: block; width: var(--w, 60%); height: 7px; border-radius: 2px; background: #B9D0E4; transform-origin: 0 50%; transition: transform .55s var(--ease-out) calc(var(--i, 0) * 90ms); }
.xr-acts { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.xr-acts li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 12px; border-radius: var(--b-r-card); background: #fff; transition: opacity .45s var(--ease-out) calc(var(--i, 0) * 140ms); }
.xr-acts li i { display: grid; place-items: center; flex: none; width: 20px; height: 20px; color: var(--tide); }
.xr-acts li i svg { width: 18px; height: 18px; }
.xr-acts li span { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.xr-relay { display: flex; align-items: center; gap: 10px; margin: 0; padding: 7px 12px; border-radius: var(--b-r-card); background: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.3; color: #fff; transition: opacity .45s var(--ease-out); }
.xr-relay i { display: grid; place-items: center; flex: none; width: 18px; height: 18px; color: var(--b-accent-dark); }
.xr-relay i svg { width: 17px; height: 17px; }
/* lecture armée : ce qui n'est pas encore allumé à l'étape en cours */
.xr.is-armed[data-step="0"] .xr-w1 path, .xr.is-armed:is([data-step="0"], [data-step="1"], [data-step="2"]) .xr-w2 path { stroke: var(--xr-off); }
.xr.is-armed[data-step="0"] .xr-src i { color: #9DB9D3; }
.xr.is-armed:is([data-step="0"], [data-step="1"]) .xr-chk li i { color: rgba(255, 255, 255, .2); transition-delay: 0s; }
.xr.is-armed:is([data-step="0"], [data-step="1"], [data-step="2"]) .xr-fiche li i { transform: scaleX(0); transition-delay: 0s; }
.xr.is-armed:is([data-step="0"], [data-step="1"], [data-step="2"]) .xr-acts li { opacity: 0; transition-delay: 0s; }
.xr.is-armed:not([data-step="4"]) .xr-relay { opacity: 0; }
/* 14/10 : plus de pointillés qui défilent (.is-flow reste posé par js/exp-clients.js, sans effet). Avant :
   .xr.is-flow .xr-w path { animation: xr-flow .9s linear infinite; } et @keyframes xr-flow { to { stroke-dashoffset: -18; } } */
/* tablette : colonnes plus étroites */
@media (max-width: 1100px) {
    .xr-stage { grid-template-columns: 176px 72px 208px 40px minmax(0, 1fr); }
}
/* petite tablette : la fiche seule (le rendez-vous et le résumé sont dits par les étapes, juste dessous) */
@media (min-width: 761px) and (max-width: 920px) {
    .xr-stage { grid-template-columns: 164px 56px 196px 32px minmax(0, 1fr); }
    .xr-body { grid-template-columns: minmax(0, 1fr); }
    .xr-acts { display: none; }
}
/* téléphone : empilé (canaux, assistant, ce que reçoit l'équipe), reliés par un trait vertical */
@media (max-width: 760px) {
    .xr-stage { display: flex; flex-direction: column; gap: 22px; height: auto; }
    .xr-w { display: none; }
    .xr-src { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .xr-src li { height: 48px; }
    .xr-hub, .xr-out { position: relative; }
    .xr-hub::before, .xr-out::before { content: ""; position: absolute; left: 50%; top: -20px; height: 18px; border-left: 1px solid var(--tide); } /* 14/10 : avant 2px dashed */
    .xr-hub { align-self: stretch; }
    .xr-fiche ul { gap: 10px; }
    .xr-acts li { padding: 10px 12px; }
    .xr-relay { padding: 8px 12px; }
}
@media (max-width: 560px) {
    .xr-src { grid-template-columns: minmax(0, 1fr); }
    .xr-body { grid-template-columns: minmax(0, 1fr); }
}