/* DataSAI - Cartes experts v2 (aperçu) : papier clair, liseré d'encre par domaine, accroche courte en serif,
   trois repères, lien discret. Balisage : experts_v2.py. */
.xp-entete { display: flex; align-items: baseline; gap: 14px; margin: 46px 0 18px; }
.xp-entete span { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: #5b6475; }
.xp-entete b { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: 44px; line-height: 1; color: #c59864; }
.xp-entete::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, #d9c9a6, transparent); align-self: center; }

.xp-grille { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px !important; margin: 0 !important; }
.xp-grille.xp-n2, .xp-grille.xp-n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1200px) { .xp-grille.xp-n7, .xp-grille.xp-n8 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .xp-grille, .xp-grille.xp-n7, .xp-grille.xp-n8 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .xp-grille, .xp-grille.xp-n2, .xp-grille.xp-n4, .xp-grille.xp-n7, .xp-grille.xp-n8 { grid-template-columns: 1fr; } }

.xp { --encre: #1677b8; --teinte: #eaf4fc; position: relative; display: flex; flex-direction: column; gap: 16px; padding: 24px 22px 20px;
  border-radius: 20px; background: #fffdf8; border: 1px solid #ece3d0; overflow: hidden;
  box-shadow: 0 1px 0 #fff inset, 0 12px 30px rgba(20, 30, 50, .07); transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s; }
.xp::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--encre); }
.xp:hover { transform: translateY(-6px); box-shadow: 0 1px 0 #fff inset, 0 26px 46px rgba(20, 30, 50, .14); }
.xp-sai { --encre: #1677b8; --teinte: #eaf4fc; }
.xp-or { --encre: #b8863b; --teinte: #faf1de; }
.xp-emeraude { --encre: #12865f; --teinte: #e5f5ee; }
.xp-nuit { --encre: #1a2440; --teinte: #e9ecf3; }

.xp-tete { display: flex; align-items: center; gap: 14px; }
.xp-photo { flex: none; width: 76px; height: 76px; border-radius: 22px; object-fit: cover; display: block;
  box-shadow: 0 0 0 3px #fffdf8, 0 0 0 5px var(--encre), 0 10px 20px rgba(20, 30, 50, .18); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.xp:hover .xp-photo { transform: rotate(-4deg) scale(1.05); }
.xp-initiales { display: grid; place-items: center; font-family: 'Instrument Serif', Georgia, serif; font-size: 30px; color: #fffdf8;
  background: linear-gradient(160deg, #d8ad5a, #a87727); }
.xp-nom { font-family: 'Instrument Serif', Georgia, serif !important; font-weight: 400; font-size: 24px; line-height: 1.1; color: #0b1426 !important; margin: 0 0 4px; }
.xp-nom em { font-style: italic; color: var(--encre); background: none !important; -webkit-text-fill-color: currentColor; animation: none !important; }
.xp-titre { margin: 0; font-size: 13px; line-height: 1.4; color: #5b6475; }
.xp-accroche { flex: 1; margin: 0; font-family: 'Instrument Serif', Georgia, serif; font-size: 22px; line-height: 1.28; color: #0b1426; }
.xp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.xp-tags li { padding: 6px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1.2; color: var(--encre); background: var(--teinte); }
.xp-lien { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding-top: 14px; width: 100%;
  border-top: 1px solid #ece3d0; font-size: 13.5px; font-weight: 700; color: #0b1426 !important; text-decoration: none; }
.xp-lien svg { width: 15px; height: 15px; color: var(--encre); transition: transform .3s; }
.xp-lien:hover svg { transform: translate(3px, -3px); }

@media (max-width: 640px) {
  .xp { padding: 20px 18px 16px; gap: 12px; }
  .xp-photo { width: 64px; height: 64px; border-radius: 18px; }
  .xp-accroche { font-size: 20px; }
  .xp-entete { margin-top: 34px; }
}
@media (prefers-reduced-motion: reduce) { .xp, .xp-photo, .xp-lien svg { transition: none; } }
.xp-demande { margin: 18px 0 0; text-align: center; font-size: 14.5px; color: #5b6475; }
.xp-demande a { color: #1677b8 !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* Une seule couleur pour tous les experts : le doré champagne du logo (demande du 4 nov. 2026) */
.xp-grille .xp { --encre: #b8863b; --teinte: #f7ecd6; }
.xp-grille .xp-nom em { color: #a87727; }
.xp-grille .xp-tags li { color: #8a5d1c; }
.xp-entete span { color: #0b1426; font-weight: 500; }
.xp-demande { color: #0b1426; }


/* Cartes en blanc pur pour plus de netteté sur le fond clair de la page (4 nov. 2026) */
.xp-grille .xp { background: #fff; border-color: #eadfc8; }
.xp-grille .xp-photo { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--encre), 0 10px 20px rgba(20, 30, 50, .18); }