/* Compagnon de ui-v2-acces.js — « Nouvel utilisateur », cartes à faire défiler */
html.ui-v2 .v2ac h2 { margin-bottom: 4px; }
html.ui-v2 .v2ac-rail-cadre { display: flex; align-items: stretch; gap: 6px; margin: 12px -4px 0; }
html.ui-v2 .v2ac-fleche {
  flex: none; width: 32px; border: 0; background: transparent; color: var(--texte-attenue);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
html.ui-v2 .v2ac-fleche svg { width: 20px; height: 20px; }
/* Le rail : une carte par écran, alignée au centre, et le doigt s'arrête
   toujours sur une carte entière — c'est `scroll-snap` qui fait le
   « swipe », pas un script. */
html.ui-v2 .v2ac-rail {
  flex: 1; display: flex; gap: 12px; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-padding: 0 8px;
  padding: 4px 8px 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
html.ui-v2 .v2ac-rail::-webkit-scrollbar { display: none; }
html.ui-v2 .v2ac-rail:focus-visible { outline: 2px solid var(--sobria-cuivre); outline-offset: 2px; border-radius: 12px; }
html.ui-v2 .v2ac-carte {
  flex: 0 0 88%; scroll-snap-align: center;
  background: var(--fond-surface); border: 1px solid var(--v2-bordure-douce);
  border-radius: 14px; padding: 14px 16px; box-shadow: 0 1px 3px rgba(20,33,59,.08);
}
html.ui-v2 .v2ac-carte-tete { display: flex; align-items: baseline; gap: 10px; }
html.ui-v2 .v2ac-carte-rang { font-size: 11.5px; color: var(--texte-attenue); letter-spacing: .04em; }
html.ui-v2 .v2ac-carte-nom { margin: 0; font-family: var(--font-head, "PT Serif", Georgia, serif); font-size: 19px; }
html.ui-v2 .v2ac-carte-resume { margin: 8px 0 0; font-size: 14px; line-height: 1.45; }
html.ui-v2 .v2ac-carte-detail { margin-top: 10px; }
html.ui-v2 .v2ac-carte-detail summary { cursor: pointer; color: var(--sobria-cuivre); font-weight: 600; font-size: 13px; }
html.ui-v2 .v2ac-carte-adonner { font-size: 13px; line-height: 1.45; margin: 10px 0 6px; }
html.ui-v2 .v2ac-liste { list-style: none; margin: 6px 0 0; padding: 0; }
html.ui-v2 .v2ac-liste li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.4; padding: 3px 0; }
html.ui-v2 .v2ac-liste svg { width: 15px; height: 15px; flex: none; margin-top: 3px; }
html.ui-v2 .v2ac-peut svg { color: #2f7a4a; }
html.ui-v2 .v2ac-nepeutpas svg { color: #b3352b; }
html.ui-v2 .v2ac-points { display: flex; justify-content: center; gap: 6px; margin: 8px 0 2px; }
html.ui-v2 .v2ac-point { width: 7px; height: 7px; border-radius: 50%; background: var(--v2-bordure-douce); cursor: pointer; }
html.ui-v2 .v2ac-point-actif { background: var(--sobria-cuivre); }
html.ui-v2 .v2ac-choix { text-align: center; font-size: 14px; margin: 4px 0 10px; }
@media (min-width: 768px) {
  html.ui-v2 .v2ac-carte { flex-basis: 70%; }
}
/* Téléphone : le doigt fait défiler, les flèches n'ont plus d'objet et
   mangeaient 76 px d'un rail de 362 — la carte tombait à 201 px, illisible
   (mesuré à 390 px le 06/09/2026). Le rail déborde jusqu'aux bords de la
   modale, et une carte prend presque toute la largeur. */
@media (max-width: 767px) {
  html.ui-v2 .v2ac-fleche { display: none; }
  html.ui-v2 .v2ac-rail-cadre { margin: 12px -16px 0; }
  html.ui-v2 .v2ac-rail { padding: 4px 16px 8px; scroll-padding: 0 16px; }
  html.ui-v2 .v2ac-carte { flex-basis: 86%; }
}