/* Démos XR (demo/xr/_commun/xr.css) : liste et fiches de visite (jetons de la charte 2026 de site.css seulement). */
.xr-hero h1{max-width:22ch}
.xr-fam{display:inline-block;margin-top:22px;font-size:14px;font-weight:600;color:var(--charcoal);background:var(--sable);border-radius:8px;padding:5px 11px}
.xr-fam+h1{margin-top:16px}
.xr-note{margin-top:18px;max-width:58ch;font-size:15.5px;line-height:1.55;color:var(--c-second);padding-left:14px;border-left:2px solid var(--sable)}

.xr-creux{background:var(--creux)}

/* cartes de la liste */
.xr-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:36px}
.xr-carte{display:flex;flex-direction:column;min-width:0;background:var(--blanc);border-radius:18px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--filet);color:var(--encre);
  transition:transform var(--t-court) var(--ease),box-shadow var(--t-court)}
.xr-carte:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--sable-trait),0 16px 28px -20px rgba(34,32,31,.55)}
.xr-carte:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.xr-carte img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--charcoal)}
.xr-carte .b{display:flex;flex-direction:column;gap:8px;padding:20px 22px 24px;flex:1}
.xr-carte .k{font-size:14px;font-weight:500;color:var(--gris)}
.xr-carte .t{font-family:var(--titre);font-size:22px;font-weight:700;line-height:1.2}
.xr-carte .d{font-size:16px;line-height:1.55;color:var(--graphite)}
.xr-carte .go{margin-top:auto;padding-top:8px;font-weight:600;color:var(--acc)}
.xr-carte .go::after{content:" →"}

/* captures d'une visite : une grande, les autres dessous */
.xr-caps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:32px}
.xr-cap{margin:0;border-radius:14px;overflow:hidden;background:var(--charcoal)}
.xr-cap img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.xr-cap.une{grid-column:1/-1}

/* navigation + fiche */
.xr-deux{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,5vw,80px);align-items:start}
.xr-nav{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px;counter-reset:n}
.xr-nav li{background:var(--blanc);border-radius:14px;padding:18px 20px 20px 58px;position:relative;box-shadow:inset 0 0 0 1px var(--filet)}
.xr-nav li::before{counter-increment:n;content:counter(n);position:absolute;left:18px;top:17px;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;font-size:14px;font-weight:700;background:var(--brume);color:var(--sauge-profonde)}
.xr-nav li:last-child::before{background:var(--sable);color:var(--charcoal)}
.xr-nav h3{font-size:18px;font-weight:600;line-height:1.3}
.xr-nav p{margin-top:6px;font-size:16px;line-height:1.55;color:var(--graphite)}
.xr-fiche{margin:28px 0 0;border-top:1px solid var(--filet-liste)}
.xr-fiche div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:13px 0;border-bottom:1px solid var(--filet)}
.xr-fiche dt{font-size:15px;color:var(--gris)}
.xr-fiche dd{margin:0;font-size:16px;font-weight:500;color:var(--encre)}
.xr-casque{margin:22px 0 24px;font-size:15.5px;line-height:1.55;color:var(--graphite)}

@media (max-width:900px){
  .xr-grille,.xr-deux{grid-template-columns:1fr}
  .xr-caps{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .xr-caps{grid-template-columns:1fr}
  .xr-fiche div{grid-template-columns:1fr;gap:2px}
}

/* avec un formateur, démos privées (page de liste ; comportement dans xr-poste.js) */
.xr-form{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:flex-end;margin-top:22px}
.xr-form label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:var(--graphite)}
.xr-form input{font:500 16px var(--corps,inherit);color:var(--encre);background:var(--blanc);border:1px solid var(--filet);border-radius:10px;padding:10px 12px;min-width:0;width:13em}
.xr-form input:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.xr-form button{min-height:44px}
button.lien{background:none;border:0;padding:0;font:inherit;font-weight:600;cursor:pointer}
.xr-etat{margin-top:12px;font-size:15px;color:var(--graphite)}
.xr-etat:empty{display:none}
.xr-prive-liste{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.xr-prive-liste:empty{display:none}
.xr-prive-demo{font-weight:600;color:var(--acc)}
.xr-prive-demo::after{content:" →"}
@media (max-width:760px){.xr-form input{width:100%}.xr-form label{flex:1 1 100%}}
.xr-bascule{display:flex;gap:22px;border:0;padding:0;margin:22px 0 0;font-size:16px}
.xr-bascule legend{font-size:14px;font-weight:600;color:var(--graphite);margin-bottom:8px;padding:0}
.xr-bascule label{display:flex;gap:8px;align-items:center;font-weight:600;cursor:pointer}
.xr-bascule input{accent-color:var(--sable-trait,#B48434);width:18px;height:18px}
.xr-prive-box{margin-top:6px;padding-left:14px;border-left:2px solid var(--sable)}

/* le suivi des démos, en clair */
.xr-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:28px}
.xr-mode{background:var(--blanc);border-radius:16px;padding:20px 22px;box-shadow:inset 0 0 0 1px var(--filet)}
.xr-mode h3,.xr-deux h3{font-family:var(--titre);font-size:19px;line-height:1.3;margin:0 0 8px}
.xr-mode p{margin:0;font-size:16px;line-height:1.55;color:var(--graphite)}
.xr-liste{margin:10px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:16px;line-height:1.55;color:var(--graphite)}
@media (max-width:860px){.xr-modes{grid-template-columns:1fr}}