/* Check-in qui se valide (18/10) : les quatre étapes se cochent l'une après l'autre quand la liste arrive à
   l'écran, un trait relie chaque étape à la suivante, puis « Prêt pour l'arrivée ». Armé par checkin-valide.js
   (classe cv-armed) : sans JS, la liste numérotée d'origine. Pour retirer : supprimer ce fichier,
   checkin-valide.js et leurs deux lignes dans index.html. */
.checkin-steps.cv-armed{gap:0}
.checkin-steps.cv-armed li{position:relative;grid-template-columns:28px minmax(0,1fr);gap:14px;padding:0 0 18px;border-top:0}
.checkin-steps.cv-armed li:last-child{padding-bottom:0}
.checkin-steps.cv-armed p{padding-top:2px}

/* Le rond : numéro au départ, coche une fois validé */
.checkin-steps.cv-armed .cv-dot{position:relative;z-index:1;display:grid;place-items:center;width:28px;height:28px;padding:0;border:1.5px solid #72596f66;border-radius:50%;background:#fffaf2;font-size:11px;letter-spacing:0;color:#72596f;transition:background-color .35s,border-color .35s,color .2s}
.cv-dot svg{position:absolute;inset:6px;width:14px;height:14px;fill:none;stroke:var(--cream);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.cv-dot path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .4s cubic-bezier(.2,.75,.2,1) .15s}
.checkin-steps.cv-armed li.cv-done .cv-dot{border-color:var(--forest);background:var(--forest);color:transparent}
.checkin-steps.cv-armed li.cv-done .cv-dot path{stroke-dashoffset:0}

/* Le trait qui descend vers l'étape suivante */
.checkin-steps.cv-armed li:not(:last-child):before,.checkin-steps.cv-armed li:not(:last-child):after{content:"";position:absolute;left:13px;top:30px;bottom:2px;width:2px;border-radius:2px;background:#2f382d1f}
.checkin-steps.cv-armed li:not(:last-child):after{background:var(--forest);transform:scaleY(0);transform-origin:top;transition:transform .45s ease-out .2s}
.checkin-steps.cv-armed li.cv-done:not(:last-child):after{transform:scaleY(1)}

/* L'étiquette de fin */
.cv-ready{display:inline-flex;align-items:center;gap:8px;margin:16px 0 0;padding:8px 14px 8px 10px;border-radius:99px;background:#5f8f5b1f;font-size:13.5px;font-weight:500;color:#3f6b3c;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s cubic-bezier(.2,.75,.2,1)}
.cv-ready svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cv-ready.cv-on{opacity:1;transform:none}

/* Grand écran : plus d'air à côté du téléphone */
@media(min-width:760px){.checkin-steps.cv-armed li{padding-bottom:26px}.checkin-steps.cv-armed p{font-size:15px}.checkin-steps.cv-armed li:not(:last-child):before,.checkin-steps.cv-armed li:not(:last-child):after{bottom:4px}}

/* Calme : tout est déjà coché, sans transition */
.no-motion .checkin-steps.cv-armed *,.no-motion .checkin-steps.cv-armed li:after,.no-motion .cv-ready{transition:none!important}
@media(prefers-reduced-motion:reduce){.checkin-steps.cv-armed *,.checkin-steps.cv-armed li:after,.cv-ready{transition:none!important}}
