/* VIZARNE — fenêtre de détail des expertises (accueil) */
.xp-tile { cursor: pointer; }
.xp-tile:focus-visible { outline: 2px solid #ff3d5a; outline-offset: 4px; }
.xp-tile figcaption::after {
  content: 'En savoir plus →'; display: block; margin-top: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: #ff3d5a; opacity: .75; transition: opacity .3s, transform .4s cubic-bezier(.19,1,.22,1);
}
.xp-tile:hover figcaption::after { opacity: 1; transform: translateX(4px); }

.xp-modal { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 24px; }
.xp-modal[hidden] { display: none; }
.xp-modal { --c: #3d5afe; }
.xp-modal[data-c="coral"] { --c: #ff3d5a; }
.xp-modal[data-c="ice"] { --c: #cbe1f8; }
.xp-modal[data-c="white"] { --c: #ffffff; }

/* fond : voile bleu nuit + léger flou, en fondu */
.xp-backdrop {
  position: absolute; inset: 0; background: rgba(8, 19, 32, .72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .45s ease;
}
.is-open .xp-backdrop { opacity: 1; }

/* fenêtre : monte légèrement depuis la tuile cliquée et se pose */
.xp-dialog {
  position: relative; width: min(880px, 100%); max-height: min(86vh, 760px);
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  background: #0d1a2b; color: #fff; border-radius: 22px; overflow: hidden;
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(203, 225, 248, .14);
  opacity: 0; transform: translate(var(--fx, 0), var(--fy, 24px)) scale(.96);
  transition: opacity .4s ease, transform .6s cubic-bezier(.19, 1, .22, 1);
  outline: none;
}
.is-open .xp-dialog { opacity: 1; transform: none; }
.is-closing .xp-dialog { opacity: 0; transform: translateY(14px) scale(.98); transition-duration: .3s, .4s; }
.is-closing .xp-backdrop { transition-duration: .35s; }

.xp-media { position: relative; background: var(--c); min-height: 100%; overflow: hidden; }
.xp-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(8, 19, 32, .25)); pointer-events: none; }
.xp-media img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06); transition: transform 1.2s cubic-bezier(.19, 1, .22, 1); }
.is-open .xp-media img { transform: none; }

.xp-body { padding: clamp(26px, 4vw, 48px); overflow-y: auto; overscroll-behavior: contain; }
.xp-kicker { color: var(--c); margin-bottom: 14px; }
.xp-modal[data-c="white"] .xp-kicker { color: #cbe1f8; }
.xp-title { font-weight: 700; font-stretch: 80%; letter-spacing: -.035em; line-height: .95; font-size: clamp(36px, 4.4vw, 60px); }
.xp-title .it { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; color: #cbe1f8; }
.xp-text { margin-top: 20px; color: rgba(203, 225, 248, .82); font-size: 17px; line-height: 1.55; max-width: 40ch; }
.xp-list { list-style: none; margin-top: 22px; display: grid; gap: 0; border-top: 1px solid rgba(203, 225, 248, .14); }
.xp-list li {
  display: flex; align-items: center; gap: 12px; padding: 11px 0; font-size: 15px;
  border-bottom: 1px solid rgba(203, 225, 248, .14);
}
.xp-list li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }
.xp-modal[data-c="white"] .xp-list li::before { background: #ff3d5a; }
.xp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 28px; }
.xp-cta {
  display: inline-flex; gap: 10px; align-items: center; padding: 14px 22px; border-radius: 999px;
  background: #ff3d5a; color: #fff; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  transition: background-color .3s, color .3s;
}
.xp-cta:hover { background: #fff; color: #081320; }
.xp-more { font-size: 14px; color: rgba(203, 225, 248, .8); border-bottom: 1px solid rgba(203, 225, 248, .3); padding-bottom: 2px; transition: color .3s, border-color .3s; }
.xp-more:hover { color: #fff; border-color: #fff; }

/* contenu : arrive en léger décalé, une fois la fenêtre posée */
.xp-body > *, .xp-list li { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .6s cubic-bezier(.19, 1, .22, 1); }
.is-open .xp-body > *, .is-open .xp-list li { opacity: 1; transform: none; }
.is-open .xp-kicker { transition-delay: .12s; }
.is-open .xp-title { transition-delay: .17s; }
.is-open .xp-text { transition-delay: .22s; }
.is-open .xp-list { transition-delay: .26s; }
.is-open .xp-list li { transition-delay: calc(.3s + var(--k, 0) * .04s); }
.is-open .xp-actions { transition-delay: .4s; }
.is-closing .xp-body > *, .is-closing .xp-list li { transition-delay: 0s !important; }

/* bouton fermer */
.xp-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 999px;
  background: rgba(8, 19, 32, .65); color: #fff; border: 1px solid rgba(203, 225, 248, .2);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
  transition: background-color .3s, border-color .3s;
}
.xp-close i { position: relative; width: 22px; height: 22px; border-radius: 50%; background: #cbe1f8; transition: transform .4s cubic-bezier(.19, 1, .22, 1), background-color .3s; }
.xp-close i::before, .xp-close i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: #081320; transform: translate(-50%, -50%) rotate(45deg); }
.xp-close i::after { transform: translate(-50%, -50%) rotate(-45deg); }
.xp-close:hover { border-color: #ff3d5a; }
.xp-close:hover i { transform: rotate(90deg); background: #ff3d5a; }
.xp-close:hover i::before, .xp-close:hover i::after { background: #fff; }
.xp-close:focus-visible { outline: 2px solid #ff3d5a; outline-offset: 3px; }

/* le texte défile dans la fenêtre au lieu d'être coupé quand il est long */
.xp-dialog { grid-template-rows: minmax(0, 1fr); }
.xp-body { min-height: 0; }

@media (max-width: 760px) {
  .xp-modal { padding: 12px; }
  .xp-dialog { grid-template-columns: 1fr; grid-template-rows: 160px minmax(0, 1fr); max-height: 90vh; }
  .xp-body { padding: 24px 22px 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .xp-dialog, .xp-backdrop, .xp-body > *, .xp-list li, .xp-media img { transition: none !important; transform: none !important; }
}