/* ============================================================
   REFONTE 2026 — Module Rachat
   Styles dédiés au parcours de rachat de livres.
   Préfixe : .rachat-*
   Utilise les tokens --r26-* du design system.

   Ce module a son propre layout (layoutRachat.php) distinct du
   layout e-commerce. Pas de sidebar, pas de panier e-commerce,
   header et footer épurés.
   ============================================================ */

/* ============== Body rachat ============== */

.rachat-body {
    background: var(--r26-bg);
    font-family: var(--r26-font);
    color: var(--r26-text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ============== Header rachat (dédié) ============== */

.rachat-site-header {
    background: var(--r26-primary-dark);
    color: var(--r26-text-on-primary);
    position: sticky;
    top: 0;
    z-index: var(--r26-z-header);
    box-shadow: var(--r26-shadow-md);
}

.rachat-site-header__inner {
    max-width: var(--r26-max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: var(--r26-space-lg);
    padding: 0 var(--r26-space-lg);
    height: 64px;
}

.rachat-site-header__logo img {
    height: 46px;
    width: auto;
    filter: brightness(0) invert(1);
}

.rachat-site-header__title {
    display: flex;
    align-items: center;
    gap: var(--r26-space-sm);
    font-size: var(--r26-fs-md);
    font-weight: var(--r26-fw-bold);
    color: var(--r26-secondary-light);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.rachat-site-header__nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--r26-space-sm);
}

.rachat-site-header__link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--r26-radius);
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    font-size: var(--r26-fs-sm);
    font-weight: var(--r26-fw-medium);
    transition: var(--r26-transition-fast);
    white-space: nowrap;
}

.rachat-site-header__link:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

.rachat-site-header__link--back {
    opacity: 0.7;
    font-size: var(--r26-fs-xs);
}

.rachat-site-header__link--back:hover {
    opacity: 1;
}

/* Le bouton "Signaler un bug" est rendu via <button>. Reset du style natif
   pour qu'il hérite du look des autres liens du header. */
.rachat-site-header__bug {
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
}
.rachat-site-header__bug:hover {
    background: rgba(255,255,255,0.1);
}

/* ============== Footer rachat (simplifié) ============== */

.rachat-site-footer {
    margin-top: auto;
    background: var(--r26-bg-footer);
    color: rgba(255,255,255,0.6);
    padding: var(--r26-space-lg) 0;
    font-size: var(--r26-fs-xs);
}

.rachat-site-footer__inner {
    max-width: var(--r26-max-width);
    margin: 0 auto;
    padding: 0 var(--r26-space-lg);
    text-align: center;
}

.rachat-site-footer__info {
    margin-bottom: var(--r26-space-sm);
}

.rachat-site-footer__info a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
}

.rachat-site-footer__info a:hover {
    color: #fff;
    text-decoration: underline;
}

.rachat-site-footer__sep {
    margin: 0 var(--r26-space-sm);
    opacity: 0.3;
}

.rachat-site-footer__copy {
    opacity: 0.4;
}

/* Responsive header rachat */
@media (max-width: 600px) {
    .rachat-site-header__inner {
        padding: 0 var(--r26-space-md);
        gap: var(--r26-space-sm);
    }
    .rachat-site-header__title {
        display: none;
    }
    .rachat-site-header__link span {
        display: none;
    }
    .rachat-site-header__link {
        padding: 8px;
        font-size: var(--r26-fs-md);
    }
    .rachat-site-footer__sep { display: none; }
    .rachat-site-footer__info a { display: block; margin: 4px 0; }
}

/* ============== Layout général des pages ============== */

/* Garde-fou ultime : aucun élément des pages rachat ne doit faire scroller
   la page horizontalement, quel que soit le contenu (titre long, etc.).
   On cible html + body.rachat-body pour ne pas perturber le reste du site. */
body.rachat-body {
    overflow-x: hidden;
    max-width: 100vw;
}

.rachat-page {
    background: var(--r26-bg);
    min-height: calc(100vh - 64px - 80px);
    padding: var(--r26-space-2xl) 0 var(--r26-space-3xl);
    font-family: var(--r26-font);
    color: var(--r26-text);
    overflow-x: hidden;
    max-width: 100vw;
}

.rachat-container {
    max-width: var(--r26-content-width);
    margin: 0 auto;
    padding: 0 var(--r26-space-lg);
}

.rachat-container--narrow {
    max-width: 760px;
}

/* ============== Header de page ============== */

.rachat-header {
    text-align: center;
    margin-bottom: var(--r26-space-2xl);
}

.rachat-header__titre {
    font-size: var(--r26-fs-3xl);
    font-weight: var(--r26-fw-extrabold);
    color: var(--r26-primary);
    margin: 0 0 var(--r26-space-md);
    line-height: var(--r26-lh-tight);
}

.rachat-header__sous-titre {
    font-size: var(--r26-fs-md);
    color: var(--r26-text-secondary);
    max-width: 640px;
    margin: 0 auto;
    line-height: var(--r26-lh);
}

.rachat-header--success .rachat-header__titre {
    color: var(--r26-success);
}

.rachat-success-icon {
    width: 80px;
    height: 80px;
    border-radius: var(--r26-radius-full);
    background: var(--r26-success);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin: 0 auto var(--r26-space-lg);
    box-shadow: var(--r26-shadow-md);
}

/* ============== Stepper (4 étapes) ============== */

.rachat-stepper {
    margin: 0 0 var(--r26-space-2xl);
}

.rachat-stepper__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
}

.rachat-stepper__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 0;
    min-width: 70px;
    position: relative;
    text-align: center;
}

.rachat-stepper__item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 18px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--r26-border);
    z-index: 0;
}

.rachat-stepper__item--done:not(:last-child)::after {
    background: var(--r26-primary);
}

.rachat-stepper__bullet {
    width: 36px;
    height: 36px;
    border-radius: var(--r26-radius-full);
    background: var(--r26-bg-card);
    border: 2px solid var(--r26-border);
    color: var(--r26-text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--r26-fw-bold);
    font-size: var(--r26-fs-sm);
    z-index: 1;
    transition: var(--r26-transition);
}

.rachat-stepper__item--current .rachat-stepper__bullet {
    background: var(--r26-primary);
    border-color: var(--r26-primary);
    color: var(--r26-text-on-primary);
    box-shadow: 0 0 0 4px rgba(27, 67, 50, 0.15);
}

.rachat-stepper__item--done .rachat-stepper__bullet {
    background: var(--r26-primary);
    border-color: var(--r26-primary);
    color: var(--r26-text-on-primary);
}

.rachat-stepper__label {
    margin-top: var(--r26-space-sm);
    font-size: var(--r26-fs-xs);
    color: var(--r26-text-light);
    font-weight: var(--r26-fw-medium);
}

.rachat-stepper__item--current .rachat-stepper__label,
.rachat-stepper__item--done .rachat-stepper__label {
    color: var(--r26-primary);
    font-weight: var(--r26-fw-semibold);
}

/* ============== Cards ============== */

.rachat-card {
    background: var(--r26-bg-card);
    border: 1px solid var(--r26-border-light);
    border-radius: var(--r26-radius-lg);
    padding: var(--r26-space-xl);
    box-shadow: var(--r26-shadow);
    margin-bottom: var(--r26-space-lg);
}

.rachat-card--info {
    background: #F0FDF4;
    border-color: #BBF7D0;
}

.rachat-card__titre {
    font-size: var(--r26-fs-lg);
    font-weight: var(--r26-fw-bold);
    color: var(--r26-primary);
    margin: 0 0 var(--r26-space-md);
    display: flex;
    align-items: center;
    gap: var(--r26-space-sm);
}

.rachat-card__titre i {
    color: var(--r26-secondary);
}

/* ============== Grid scanner (2 colonnes) ============== */

.rachat-grid {
    display: grid;
    gap: var(--r26-space-lg);
}

.rachat-grid--scanner {
    /* minmax(0, ...) au lieu de simple 1fr : sans ça, un enfant avec
       du contenu intrinsèquement large (ex: video HD, texte non-cassable)
       fait gonfler le grid item au-delà de la viewport sur mobile. */
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: start;
}

@media (max-width: 900px) {
    .rachat-grid--scanner {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Tous les enfants directs des grids et les cards doivent pouvoir shrink
   à 0 — sinon leur min-width auto (contenu) gonfle leur parent grid item. */
.rachat-card {
    min-width: 0;
}

/* ============== Scanner (caméra) ============== */

.rachat-scanner__viewport {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #000;
    border-radius: var(--r26-radius);
    overflow: hidden;
    margin-bottom: var(--r26-space-md);
}

.rachat-scanner__viewport video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Mode desktop : facecam → effet miroir attendu (cf. Zoom/FaceTime). */
.rachat-scanner__viewport--mirrored video {
    transform: scaleX(-1);
}

.rachat-scanner__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.7);
    background: linear-gradient(135deg, #1a1a2e, #143326);
    text-align: center;
    padding: var(--r26-space-lg);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.rachat-scanner__placeholder:hover,
.rachat-scanner__placeholder:focus-visible {
    color: rgba(255,255,255,0.95);
    background: linear-gradient(135deg, #232347, #195139);
    outline: none;
}

.rachat-scanner__placeholder i {
    font-size: 3rem;
    margin-bottom: var(--r26-space-sm);
}

.rachat-scanner__placeholder p {
    margin: 0;
    font-size: var(--r26-fs-sm);
}

.rachat-scanner__guide {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rachat-scanner__guide-line {
    display: block;
    width: 80%;
    height: 2px;
    background: var(--r26-secondary);
    box-shadow: 0 0 12px rgba(231, 111, 81, 0.8);
    opacity: 0;
}

.rachat-scanner__viewport.is-active .rachat-scanner__placeholder {
    display: none;
}

.rachat-scanner__viewport.is-active .rachat-scanner__guide-line {
    opacity: 1;
    animation: rachat-scan-line 2s ease-in-out infinite;
}

/* ===== Brackets de cadrage (4 équerres aux coins) ===== */
.rachat-scanner__brackets {
    position: absolute;
    inset: 12%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.rachat-scanner__viewport.is-active .rachat-scanner__brackets {
    opacity: 1;
}

.rachat-scanner__brackets > span {
    position: absolute;
    width: 28px;
    height: 28px;
    border-color: rgba(255, 255, 255, 0.92);
    border-style: solid;
    border-width: 0;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.45));
}

.rachat-scanner__brackets > span:nth-child(1) { /* haut-gauche */
    top: 0; left: 0;
    border-top-width: 3px; border-left-width: 3px;
    border-top-left-radius: 6px;
}
.rachat-scanner__brackets > span:nth-child(2) { /* haut-droite */
    top: 0; right: 0;
    border-top-width: 3px; border-right-width: 3px;
    border-top-right-radius: 6px;
}
.rachat-scanner__brackets > span:nth-child(3) { /* bas-gauche */
    bottom: 0; left: 0;
    border-bottom-width: 3px; border-left-width: 3px;
    border-bottom-left-radius: 6px;
}
.rachat-scanner__brackets > span:nth-child(4) { /* bas-droite */
    bottom: 0; right: 0;
    border-bottom-width: 3px; border-right-width: 3px;
    border-bottom-right-radius: 6px;
}

/* Sur mobile, on resserre encore l'équerre pour bien cadrer un EAN-13. */
@media (max-width: 900px) {
    .rachat-scanner__brackets {
        inset: 18% 8%;
    }
    .rachat-scanner__brackets > span {
        width: 32px;
        height: 32px;
    }
}

@keyframes rachat-scan-line {
    0%, 100% { transform: translateY(-80px); }
    50%      { transform: translateY(80px); }
}

.rachat-scanner__controls {
    display: flex;
    gap: var(--r26-space-sm);
    margin-bottom: var(--r26-space-lg);
}

.rachat-scanner__manual {
    border-top: 1px solid var(--r26-border-light);
    padding-top: var(--r26-space-md);
}

.rachat-scanner__manual-label {
    display: block;
    font-size: var(--r26-fs-sm);
    color: var(--r26-text-secondary);
    margin-bottom: var(--r26-space-sm);
}

.rachat-scanner__manual-row {
    display: flex;
    gap: var(--r26-space-sm);
}

.rachat-scanner__manual-row .rachat-input {
    flex: 1;
}

/* Lien « Un doute sur un livre ? » → ouvre le guide de rachat (slideshow) */
.rachat-scanner__doute {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: var(--r26-space-md);
    padding: 10px 8px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--r26-fs-sm);
    font-weight: 600;
    color: var(--r26-primary);
    transition: color 0.15s ease;
}

.rachat-scanner__doute:hover {
    text-decoration: underline;
}

.rachat-scanner__doute i {
    color: var(--r26-secondary);
}

.rachat-scanner__feedback {
    margin-top: var(--r26-space-md);
    min-height: 1.5em;
    font-size: var(--r26-fs-sm);
}

.rachat-scanner__feedback.is-success { color: var(--r26-success); font-weight: var(--r26-fw-semibold); }
.rachat-scanner__feedback.is-error   { color: var(--r26-danger);  font-weight: var(--r26-fw-semibold); }

/* ============== Panier (colonne droite scanner) ============== */

.rachat-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    background: var(--r26-secondary);
    color: #fff;
    border-radius: var(--r26-radius-full);
    font-size: var(--r26-fs-xs);
    font-weight: var(--r26-fw-bold);
    margin-left: auto;
}

.rachat-panier__list {
    min-height: 200px;
    max-height: 480px;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0 calc(-1 * var(--r26-space-md));
    padding: 0 var(--r26-space-md);
    min-width: 0;
}

.rachat-panier__empty {
    text-align: center;
    color: var(--r26-text-light);
    padding: var(--r26-space-2xl) 0;
    margin: 0;
    font-size: var(--r26-fs-sm);
}

.rachat-panier__empty span {
    color: var(--r26-text-muted);
    font-size: var(--r26-fs-xs);
}

.rachat-panier__header {
    margin-bottom: var(--r26-space-md);
    padding-bottom: var(--r26-space-md);
    border-bottom: 1px solid var(--r26-border-light);
}

.rachat-panier__footer {
    margin-top: var(--r26-space-md);
    padding-top: var(--r26-space-md);
    border-top: 1px solid var(--r26-border-light);
}

.rachat-panier__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: var(--r26-space-sm);
    font-size: var(--r26-fs-md);
}

.rachat-panier__total strong {
    font-size: var(--r26-fs-2xl);
    color: var(--r26-secondary);
    font-weight: var(--r26-fw-extrabold);
}

.rachat-panier__min {
    text-align: right;
    font-size: var(--r26-fs-xs);
    color: var(--r26-text-light);
    margin: 4px 0 0;
}

/* ============== Carte livre ============== */

.rachat-carte-livre {
    display: flex;
    align-items: center;
    gap: var(--r26-space-md);
    padding: var(--r26-space-md);
    border-radius: var(--r26-radius);
    background: var(--r26-bg);
    margin-bottom: var(--r26-space-sm);
    transition: var(--r26-transition);
    border: 1px solid transparent;
    /* Sans min-width:0, un titre très long fait déborder toute la chaîne
       parent (grid scanner → card → page) et casse le layout sur mobile. */
    min-width: 0;
}

.rachat-carte-livre:hover {
    border-color: var(--r26-border);
    transform: translateX(2px);
}

.rachat-carte-livre__cover {
    width: 48px;
    height: 64px;
    background: var(--r26-bg-alt);
    border-radius: var(--r26-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--r26-text-muted);
    font-size: var(--r26-fs-lg);
    overflow: hidden;
}

.rachat-carte-livre__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--r26-radius-sm);
}

.rachat-carte-livre__body {
    flex: 1;
    min-width: 0;
}

.rachat-carte-livre__titre {
    margin: 0;
    font-size: var(--r26-fs-sm);
    font-weight: var(--r26-fw-semibold);
    color: var(--r26-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rachat-carte-livre__auteur {
    margin: 2px 0 0;
    font-size: var(--r26-fs-xs);
    color: var(--r26-text-light);
}

.rachat-carte-livre__ean {
    margin: 2px 0 0;
    font-size: 0.6875rem;
    color: var(--r26-text-muted);
    font-family: ui-monospace, monospace;
}

.rachat-carte-livre__action {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--r26-space-sm);
    flex-shrink: 0;
}

.rachat-carte-livre__prix {
    font-size: var(--r26-fs-md);
    font-weight: var(--r26-fw-bold);
    color: var(--r26-secondary);
}

.rachat-carte-livre__remove {
    background: none;
    border: none;
    color: var(--r26-text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--r26-radius-sm);
    transition: var(--r26-transition-fast);
}

.rachat-carte-livre__remove:hover {
    color: var(--r26-danger);
    background: rgba(220, 38, 38, 0.08);
}

.rachat-carte-livre--refused {
    opacity: 0.6;
}

.rachat-carte-livre--refused .rachat-carte-livre__prix {
    color: var(--r26-text-muted);
    font-size: var(--r26-fs-sm);
    font-weight: var(--r26-fw-medium);
}

/* ============== Boutons ============== */

.rachat-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--r26-space-sm);
    padding: 0.625rem 1.25rem;
    border-radius: var(--r26-radius);
    font-family: var(--r26-font);
    font-size: var(--r26-fs-base);
    font-weight: var(--r26-fw-semibold);
    border: none;
    cursor: pointer;
    transition: var(--r26-transition);
    text-decoration: none;
    line-height: 1;
}

.rachat-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.rachat-btn--primary {
    background: var(--r26-primary);
    color: var(--r26-text-on-primary);
}

.rachat-btn--primary:hover:not(:disabled) {
    background: var(--r26-primary-light);
    transform: translateY(-1px);
    box-shadow: var(--r26-shadow-md);
}

.rachat-btn--secondary {
    background: var(--r26-secondary);
    color: #fff;
}

.rachat-btn--secondary:hover:not(:disabled) {
    background: var(--r26-secondary-dark);
}

.rachat-btn--ghost {
    background: transparent;
    color: var(--r26-primary);
    border: 1px solid var(--r26-border);
}

.rachat-btn--ghost:hover:not(:disabled) {
    background: var(--r26-bg-alt);
    border-color: var(--r26-primary);
}

.rachat-btn--lg {
    padding: 0.875rem 1.75rem;
    font-size: var(--r26-fs-md);
    width: 100%;
    margin-top: var(--r26-space-sm);
}

/* ============== Forms ============== */

.rachat-form {
    display: flex;
    flex-direction: column;
    gap: var(--r26-space-sm);
}

.rachat-label {
    font-size: var(--r26-fs-sm);
    font-weight: var(--r26-fw-semibold);
    color: var(--r26-text-secondary);
    margin-top: var(--r26-space-sm);
}

.rachat-input {
    padding: 0.75rem 1rem;
    border: 1px solid var(--r26-border);
    border-radius: var(--r26-radius);
    font-family: var(--r26-font);
    font-size: var(--r26-fs-base);
    color: var(--r26-text);
    background: #fff;
    transition: var(--r26-transition-fast);
    width: 100%;
}

.rachat-input:focus {
    outline: none;
    border-color: var(--r26-border-focus);
    box-shadow: 0 0 0 3px rgba(27, 67, 50, 0.12);
}

.rachat-input--otp {
    text-align: center;
    font-size: var(--r26-fs-2xl);
    font-weight: var(--r26-fw-bold);
    letter-spacing: 0.5em;
    padding-left: 1.5em;
}

/* Actions secondaires sous le bouton "Valider" du tunnel OTP */
.rachat-otp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--r26-space-sm);
    justify-content: space-between;
    margin-top: var(--r26-space-sm);
}
.rachat-otp-actions .rachat-btn {
    flex: 1 1 auto;
}

/* Stepper input numérique (nb colis) */

.rachat-stepper-input {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--r26-border);
    border-radius: var(--r26-radius);
    overflow: hidden;
    background: #fff;
}

.rachat-stepper-input__btn {
    background: var(--r26-bg-alt);
    border: none;
    width: 44px;
    height: 44px;
    cursor: pointer;
    color: var(--r26-primary);
    font-size: var(--r26-fs-md);
    transition: var(--r26-transition-fast);
}

.rachat-stepper-input__btn:hover {
    background: var(--r26-primary);
    color: #fff;
}

.rachat-stepper-input__value {
    width: 60px;
    border: none;
    text-align: center;
    font-size: var(--r26-fs-lg);
    font-weight: var(--r26-fw-bold);
    color: var(--r26-text);
    background: #fff;
}

/* Radio group */

.rachat-radio-group {
    display: flex;
    gap: var(--r26-space-sm);
    flex-wrap: wrap;
}

.rachat-radio {
    flex: 1;
    min-width: 160px;
    cursor: pointer;
}

.rachat-radio input {
    position: absolute;
    opacity: 0;
}

.rachat-radio span {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 18px 14px;
    border: 2px solid var(--r26-border);
    border-radius: var(--r26-radius);
    background: #fff;
    color: var(--r26-text-secondary);
    font-weight: var(--r26-fw-semibold);
    text-align: center;
    transition: var(--r26-transition-fast);
    height: 100%;
}

.rachat-radio span > i {
    font-size: 1.5rem;
    margin-bottom: 4px;
    color: var(--r26-primary);
    opacity: 0.85;
}

.rachat-radio input:checked + span > i {
    opacity: 1;
}

.rachat-radio input:checked + span {
    border-color: var(--r26-primary);
    background: #F0FDF4;
    color: var(--r26-primary);
}

/* ============== Récap panier (étape 2) ============== */

.rachat-recap {
    margin-bottom: var(--r26-space-md);
    max-height: 280px;
    overflow-y: auto;
}

.rachat-recap__loading {
    text-align: center;
    color: var(--r26-text-muted);
    padding: var(--r26-space-xl) 0;
    margin: 0;
}

.rachat-recap__totaux {
    border-top: 1px solid var(--r26-border-light);
    padding-top: var(--r26-space-md);
    margin-top: var(--r26-space-md);
}

.rachat-recap__ligne {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--r26-space-sm) 0;
    color: var(--r26-text-secondary);
}

.rachat-recap__ligne--total {
    border-top: 1px solid var(--r26-border-light);
    margin-top: var(--r26-space-sm);
    padding-top: var(--r26-space-md);
    font-size: var(--r26-fs-md);
    color: var(--r26-text);
}

.rachat-recap__ligne--total strong {
    font-size: var(--r26-fs-2xl);
    color: var(--r26-secondary);
    font-weight: var(--r26-fw-extrabold);
}

/* ============== Confirmation ============== */

.rachat-conf-list {
    display: flex;
    flex-direction: column;
    gap: var(--r26-space-md);
}

.rachat-conf-item {
    display: flex;
    align-items: center;
    gap: var(--r26-space-md);
    padding: var(--r26-space-md);
    background: var(--r26-bg);
    border-radius: var(--r26-radius);
    border: 1px solid var(--r26-border-light);
}

.rachat-conf-item__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--r26-radius);
    background: var(--r26-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--r26-fs-lg);
    flex-shrink: 0;
}

.rachat-conf-item__body {
    flex: 1;
    min-width: 0;
}

.rachat-conf-item__num {
    font-weight: var(--r26-fw-bold);
    color: var(--r26-text);
    margin: 0;
}

.rachat-conf-item__details {
    margin: 2px 0 0;
    font-size: var(--r26-fs-sm);
    color: var(--r26-text-light);
}

.rachat-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rachat-checklist li {
    display: flex;
    align-items: flex-start;
    gap: var(--r26-space-sm);
    padding: var(--r26-space-sm) 0;
    color: var(--r26-text-secondary);
    font-size: var(--r26-fs-sm);
    line-height: var(--r26-lh);
}

.rachat-checklist i {
    color: var(--r26-success);
    margin-top: 4px;
    flex-shrink: 0;
}

/* ============== Espace compte / onglets ============== */

.rachat-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--r26-border);
    margin-bottom: var(--r26-space-lg);
    overflow-x: auto;
}

.rachat-tabs__btn {
    background: none;
    border: none;
    padding: var(--r26-space-md) var(--r26-space-lg);
    font-family: var(--r26-font);
    font-size: var(--r26-fs-base);
    font-weight: var(--r26-fw-semibold);
    color: var(--r26-text-light);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    display: flex;
    align-items: center;
    gap: var(--r26-space-sm);
    white-space: nowrap;
    transition: var(--r26-transition-fast);
}

.rachat-tabs__btn:hover {
    color: var(--r26-primary);
}

.rachat-tabs__btn--active {
    color: var(--r26-primary);
    border-bottom-color: var(--r26-primary);
}

.rachat-tab-panel { display: none; }
.rachat-tab-panel--active { display: block; }

.rachat-iban-display {
    padding: var(--r26-space-md);
    background: var(--r26-bg);
    border-radius: var(--r26-radius);
    font-family: ui-monospace, monospace;
    font-size: var(--r26-fs-md);
    margin-bottom: var(--r26-space-md);
}

/* ============== Actions / divers ============== */

.rachat-actions {
    display: flex;
    gap: var(--r26-space-sm);
    justify-content: center;
    margin-top: var(--r26-space-lg);
    flex-wrap: wrap;
}

.rachat-actions .rachat-btn {
    flex: 1 1 auto;
    min-width: 200px;
    margin-top: 0;
}

.rachat-text-secondary {
    color: var(--r26-text-secondary);
    font-size: var(--r26-fs-sm);
    line-height: var(--r26-lh);
    margin: 0 0 var(--r26-space-md);
}

.rachat-feedback {
    min-height: 1.5em;
    margin-top: var(--r26-space-md);
    padding: var(--r26-space-sm) var(--r26-space-md);
    border-radius: var(--r26-radius);
    font-size: var(--r26-fs-sm);
    text-align: center;
}

.rachat-feedback:empty { display: none; }

.rachat-feedback.is-success {
    background: #F0FDF4;
    color: var(--r26-success);
    border: 1px solid #BBF7D0;
}

.rachat-feedback.is-error {
    background: #FEF2F2;
    color: var(--r26-danger);
    border: 1px solid #FECACA;
}

.rachat-feedback.is-info {
    background: #EFF6FF;
    color: #1e40af;
    border: 1px solid #BFDBFE;
}

/* ============== Responsive mobile ============== */

@media (max-width: 600px) {
    .rachat-page {
        padding: var(--r26-space-lg) 0 var(--r26-space-2xl);
    }
    .rachat-container {
        padding: 0 var(--r26-space-md);
    }
    .rachat-header__titre {
        font-size: var(--r26-fs-2xl);
    }
    .rachat-card {
        padding: var(--r26-space-md);
    }
    .rachat-stepper__label {
        font-size: 0.6875rem;
    }
    .rachat-stepper__bullet {
        width: 30px;
        height: 30px;
    }
    .rachat-stepper__item:not(:last-child)::after {
        top: 15px;
    }
    .rachat-actions .rachat-btn {
        min-width: 100%;
    }
}

/* ============================================================
   LANDING PAGE RACHAT
   ============================================================ */

/* ============== Hero ============== */

.rachat-hero {
    text-align: center;
    padding: var(--r26-space-3xl) 0 var(--r26-space-2xl);
}

.rachat-hero__titre {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: var(--r26-fw-extrabold);
    color: var(--r26-text);
    line-height: var(--r26-lh-tight);
    margin: 0 0 var(--r26-space-lg);
}

.rachat-hero__accent {
    color: var(--r26-primary);
}

.rachat-hero__sous-titre {
    font-size: var(--r26-fs-lg);
    color: var(--r26-text-secondary);
    max-width: 560px;
    margin: 0 auto var(--r26-space-xl);
    line-height: var(--r26-lh);
}

.rachat-btn--xl {
    padding: 1rem 2.5rem;
    font-size: var(--r26-fs-lg);
    border-radius: var(--r26-radius-lg);
}

.rachat-btn--lg-inline {
    padding: 0.75rem 1.5rem;
    white-space: nowrap;
}

/* ============== Sections ============== */

.rachat-section {
    padding: var(--r26-space-3xl) 0;
}

.rachat-section--alt {
    background: var(--r26-bg-alt);
}

.rachat-section__titre {
    text-align: center;
    font-size: var(--r26-fs-2xl);
    font-weight: var(--r26-fw-extrabold);
    color: var(--r26-primary);
    margin: 0 0 var(--r26-space-sm);
}

.rachat-section__sous-titre {
    text-align: center;
    font-size: var(--r26-fs-md);
    color: var(--r26-text-secondary);
    margin: 0 0 var(--r26-space-xl);
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

/* ============== Step cards (4 colonnes) ============== */

.rachat-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--r26-space-lg);
    margin-top: var(--r26-space-xl);
}

.rachat-step-card {
    background: var(--r26-bg-card);
    border-radius: var(--r26-radius-lg);
    padding: var(--r26-space-xl) var(--r26-space-lg);
    text-align: center;
    box-shadow: var(--r26-shadow);
    position: relative;
    transition: var(--r26-transition);
}

.rachat-step-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--r26-shadow-hover);
}

.rachat-step-card__num {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 28px;
    border-radius: var(--r26-radius-full);
    background: var(--r26-primary);
    color: #fff;
    font-size: var(--r26-fs-xs);
    font-weight: var(--r26-fw-bold);
    display: flex;
    align-items: center;
    justify-content: center;
}

.rachat-step-card__icon {
    width: 56px;
    height: 56px;
    border-radius: var(--r26-radius-full);
    background: linear-gradient(135deg, var(--r26-primary), var(--r26-primary-light));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--r26-fs-xl);
    margin: 0 auto var(--r26-space-md);
}

.rachat-step-card h3 {
    font-size: var(--r26-fs-base);
    font-weight: var(--r26-fw-bold);
    color: var(--r26-text);
    margin: 0 0 var(--r26-space-sm);
}

.rachat-step-card p {
    font-size: var(--r26-fs-sm);
    color: var(--r26-text-secondary);
    line-height: var(--r26-lh);
    margin: 0;
}

@media (max-width: 900px) {
    .rachat-steps-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
    .rachat-steps-grid { grid-template-columns: 1fr; }
}

/* ============== Mini-scanner test (landing) ============== */

.rachat-card--test {
    max-width: 540px;
    margin: 0 auto;
    padding: var(--r26-space-xl);
}

.rachat-input--lg {
    padding: 1rem 1.25rem;
    font-size: var(--r26-fs-lg);
}

.rachat-test-result {
    display: flex;
    align-items: center;
    gap: var(--r26-space-md);
    margin-top: var(--r26-space-lg);
    padding: var(--r26-space-md);
    background: var(--r26-bg);
    border-radius: var(--r26-radius);
    border: 1px solid var(--r26-border-light);
    animation: rachat-fade-in 0.3s ease;
}

@keyframes rachat-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.rachat-test-result__cover {
    width: 56px;
    height: 76px;
    background: var(--r26-bg-alt);
    border-radius: var(--r26-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--r26-text-muted);
    font-size: var(--r26-fs-xl);
    flex-shrink: 0;
    overflow: hidden;
}

.rachat-test-result__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rachat-test-result__info {
    flex: 1;
    min-width: 0;
}

.rachat-test-result__info h3 {
    margin: 0;
    font-size: var(--r26-fs-base);
    font-weight: var(--r26-fw-bold);
    color: var(--r26-text);
}

.rachat-test-result__info p {
    margin: 2px 0 0;
    font-size: var(--r26-fs-sm);
    color: var(--r26-text-light);
}

.rachat-test-result__prix {
    font-size: var(--r26-fs-2xl);
    font-weight: var(--r26-fw-extrabold);
    color: var(--r26-secondary);
    white-space: nowrap;
}

.rachat-test-result--refused .rachat-test-result__prix {
    font-size: var(--r26-fs-sm);
    color: var(--r26-text-muted);
    font-weight: var(--r26-fw-medium);
}

/* ============== Réassurance ============== */

.rachat-reassurance-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--r26-space-lg);
    text-align: center;
}

.rachat-reassurance-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--r26-space-sm);
}

.rachat-reassurance-item i {
    font-size: 2rem;
    color: var(--r26-primary);
}

.rachat-reassurance-item strong {
    font-size: var(--r26-fs-base);
    color: var(--r26-text);
}

.rachat-reassurance-item span {
    font-size: var(--r26-fs-sm);
    color: var(--r26-text-light);
}

@media (max-width: 700px) {
    .rachat-reassurance-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============== FAQ ============== */

.rachat-faq {
    background: var(--r26-bg-card);
    border: 1px solid var(--r26-border-light);
    border-radius: var(--r26-radius);
    margin-bottom: var(--r26-space-sm);
    overflow: hidden;
}

.rachat-faq summary {
    padding: var(--r26-space-md) var(--r26-space-lg);
    font-weight: var(--r26-fw-semibold);
    color: var(--r26-text);
    cursor: pointer;
    transition: var(--r26-transition-fast);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rachat-faq summary::after {
    content: '\f078'; /* fa-chevron-down */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: var(--r26-fs-xs);
    color: var(--r26-text-light);
    transition: transform 0.2s;
}

.rachat-faq[open] summary::after {
    transform: rotate(180deg);
}

.rachat-faq summary::-webkit-details-marker { display: none; }

.rachat-faq summary:hover {
    background: var(--r26-bg-alt);
}

.rachat-faq p {
    padding: 0 var(--r26-space-lg) var(--r26-space-md);
    font-size: var(--r26-fs-sm);
    color: var(--r26-text-secondary);
    line-height: var(--r26-lh);
    margin: 0;
}

/* ============================================================
   MODAL RÉSULTAT SCAN
   ============================================================ */

.rachat-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: var(--r26-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--r26-space-lg);
    animation: rachat-fade-in 0.2s ease;
}

.rachat-modal {
    background: var(--r26-bg-card);
    border-radius: var(--r26-radius-xl);
    box-shadow: var(--r26-shadow-lg);
    max-width: 400px;
    width: 100%;
    padding: var(--r26-space-2xl);
    position: relative;
    text-align: center;
    animation: rachat-modal-in 0.3s ease;
}

@keyframes rachat-modal-in {
    from { opacity: 0; transform: scale(0.9) translateY(20px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.rachat-modal__close {
    position: absolute;
    top: var(--r26-space-md);
    right: var(--r26-space-md);
    background: none;
    border: none;
    color: var(--r26-text-muted);
    font-size: var(--r26-fs-lg);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--r26-radius-sm);
    transition: var(--r26-transition-fast);
}

.rachat-modal__close:hover {
    color: var(--r26-text);
    background: var(--r26-bg-alt);
}

.rachat-modal__cover {
    width: 120px;
    height: 170px;
    margin: 0 auto var(--r26-space-lg);
    background: var(--r26-bg-alt);
    border-radius: var(--r26-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--r26-text-muted);
    font-size: 3rem;
    overflow: hidden;
    box-shadow: var(--r26-shadow-md);
}

.rachat-modal__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rachat-modal__titre {
    font-size: var(--r26-fs-lg);
    font-weight: var(--r26-fw-bold);
    color: var(--r26-text);
    margin: 0 0 4px;
}

.rachat-modal__auteur {
    font-size: var(--r26-fs-sm);
    color: var(--r26-text-light);
    margin: 0 0 2px;
}

.rachat-modal__ean {
    font-size: var(--r26-fs-xs);
    color: var(--r26-text-muted);
    font-family: ui-monospace, monospace;
    margin: 0 0 var(--r26-space-lg);
}

/* Prix block (accepté) */
.rachat-modal__prix-block {
    margin-top: var(--r26-space-md);
    padding-top: var(--r26-space-md);
    border-top: 1px solid var(--r26-border-light);
}

.rachat-modal__prix-label {
    font-size: var(--r26-fs-sm);
    color: var(--r26-text-secondary);
    margin-bottom: var(--r26-space-sm);
}

.rachat-modal__prix {
    font-size: var(--r26-fs-3xl);
    font-weight: var(--r26-fw-extrabold);
    color: var(--r26-secondary);
    margin-bottom: var(--r26-space-lg);
}

/* Refusé */
.rachat-modal__refused-block {
    margin-top: var(--r26-space-lg);
    padding-top: var(--r26-space-md);
    border-top: 1px solid var(--r26-border-light);
}

.rachat-modal__refused-icon {
    font-size: 2.5rem;
    color: var(--r26-text-muted);
    margin-bottom: var(--r26-space-sm);
}

.rachat-modal__refused-text {
    color: var(--r26-text-primary);
    font-size: var(--r26-fs-md);
    font-weight: var(--r26-fw-semibold);
    margin: 0 0 4px;
}

/* Détail explicatif sous le titre du refus (algo verbal) */
.rachat-modal__refused-reason {
    color: var(--r26-text-secondary);
    font-size: var(--r26-fs-sm);
    margin: 0;
    line-height: 1.5;
}

/* Bloc "Donner ce livre" affiché sous un refus quand le livre est identifié */
.rachat-modal__donate-block {
    margin-top: var(--r26-space-lg);
    padding-top: var(--r26-space-md);
    border-top: 1px dashed var(--r26-border-light);
    text-align: center;
}
.rachat-modal__donate-text {
    color: var(--r26-text-secondary);
    font-size: var(--r26-fs-sm);
    line-height: 1.5;
    margin: 0 0 var(--r26-space-md);
}
.rachat-modal__donate-text i {
    color: #ef4444;
    margin-right: 4px;
}

/* ===== Refresh des prix du panier (page panier étape 2) ===== */
.rachat-recap__refresh {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
    border-radius: var(--r26-radius);
    padding: 10px 14px;
    margin-bottom: var(--r26-space-md);
    font-size: var(--r26-fs-sm);
    font-weight: var(--r26-fw-semibold);
}
.rachat-recap__refresh-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #bfdbfe;
    border-top-color: #1e40af;
    border-radius: 50%;
    animation: rachat-spin 0.7s linear infinite;
    flex-shrink: 0;
}
@keyframes rachat-spin { to { transform: rotate(360deg); } }

#rachat-recap { transition: opacity 0.2s ease; }

/* Prix réactualisé dans le récap : ancien barré + nouveau + badge */
.rachat-carte-livre__prix--updated {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.3;
}
.rachat-carte-livre__prix-old {
    color: var(--r26-text-light);
    font-size: var(--r26-fs-xs);
    font-weight: var(--r26-fw-normal);
}
.rachat-carte-livre__prix-badge {
    display: inline-block;
    margin-top: 2px;
    font-size: 0.6875rem;
    font-weight: var(--r26-fw-semibold);
    color: #1e40af;
    background: #eff6ff;
    border-radius: 4px;
    padding: 1px 6px;
}
.rachat-carte-livre--updated {
    border-left: 3px solid #3b82f6;
    background: #eff6ff;
}
.rachat-carte-livre__prix--don {
    color: #b91c1c;
    font-weight: var(--r26-fw-semibold);
}

/* Liste dans un message de feedback (livres retirés) */
.rachat-feedback__list {
    margin: 6px 0 0;
    padding-left: 20px;
    font-weight: var(--r26-fw-normal);
}
.rachat-feedback__list li { margin: 2px 0; }

/* Badge statut de colis dans Mon compte (Colis traité / Paiement en attente / Payé) */
.rachat-colis-status {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 4px;
    font-size: var(--r26-fs-xs);
    font-weight: var(--r26-fw-semibold);
}
.rachat-colis-status--created { background: #fef3c7; color: #92400e; }
.rachat-colis-status--transit { background: #dbeafe; color: #1e40af; }
.rachat-colis-status--treated { background: #e0e7ff; color: #3730a3; }
.rachat-colis-status--pending { background: #ffedd5; color: #9a3412; }
.rachat-colis-status--paid    { background: #d1fae5; color: #065f46; }
.rachat-colis-status--expired { background: #fee2e2; color: #991b1b; }

/* Modal "Code-barres non reconnu" — proposition de réessayer le scan */
.rachat-modal__retry-block {
    text-align: center;
    padding: var(--r26-space-md) 0;
}
.rachat-modal__retry-icon {
    font-size: 2.5rem;
    color: #f59e0b;
    margin-bottom: var(--r26-space-sm);
}
.rachat-modal__retry-text {
    color: var(--r26-text-primary);
    font-size: var(--r26-fs-md);
    font-weight: var(--r26-fw-semibold);
    margin: 0 0 4px;
}
.rachat-modal__retry-reason {
    color: var(--r26-text-secondary);
    font-size: var(--r26-fs-sm);
    margin: 0 0 var(--r26-space-md);
    line-height: 1.5;
}

/* Carte livre en mode "don" dans la colonne panier */
.rachat-carte-livre--donated {
    border-left: 3px solid #ef4444;
    background: #fef2f2;
}
.rachat-carte-livre--donated .rachat-carte-livre__prix,
.rachat-carte-livre--donated .js-prix {
    color: #b91c1c;
    font-weight: var(--r26-fw-semibold);
}
.rachat-carte-livre--donated .js-prix i {
    margin-right: 4px;
}

/* ============== Recherche + liste des points relais (page expedition) ============== */

/* Ligne CP + bouton, dimensionnée comme un champ de formulaire normal */
.rachat-relais-search {
    display: flex;
    gap: var(--r26-space-sm);
    align-items: stretch;
    flex-wrap: wrap;
    margin-top: var(--r26-space-sm);
}
.rachat-relais-search .rachat-input {
    flex: 1 1 200px;
    width: auto;       /* annule le 100% global de .rachat-input */
}
.rachat-relais-search .rachat-btn {
    flex: 0 0 auto;
}

.rachat-relais-list {
    margin-top: var(--r26-space-md);
    display: flex;
    flex-direction: column;
    gap: var(--r26-space-sm);
}
.rachat-relais-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--r26-space-md);
    padding: 12px 14px;
    background: var(--r26-bg-soft, #f8f9fa);
    border-radius: var(--r26-radius);
    border: 1px solid var(--r26-border-light);
}
.rachat-relais-item__body {
    flex: 1 1 auto;
    min-width: 0;
}
.rachat-relais-item__nom {
    display: block;
    color: var(--r26-text-primary);
    font-size: var(--r26-fs-sm);
}
.rachat-relais-item__adr {
    margin: 4px 0 0;
    color: var(--r26-text-secondary);
    font-size: var(--r26-fs-xs);
}
.rachat-relais-item__dist {
    margin: 4px 0 0;
    color: var(--r26-primary);
    font-size: var(--r26-fs-xs);
    font-weight: var(--r26-fw-semibold);
}
.rachat-relais-item__action {
    flex-shrink: 0;
    font-size: var(--r26-fs-xs);
    padding: 6px 12px;
}
@media (max-width: 600px) {
    .rachat-relais-item {
        flex-direction: column;
        align-items: stretch;
    }
    .rachat-relais-item__action {
        align-self: flex-start;
    }
}

/* Duplicate */
.rachat-modal__duplicate-block {
    margin-top: var(--r26-space-lg);
    padding-top: var(--r26-space-md);
    border-top: 1px solid var(--r26-border-light);
}

.rachat-modal__duplicate-text {
    color: var(--r26-primary);
    font-weight: var(--r26-fw-semibold);
    font-size: var(--r26-fs-sm);
    margin: 0;
}

.rachat-modal__duplicate-text i {
    margin-right: 4px;
}

@media (max-width: 500px) {
    .rachat-modal {
        padding: var(--r26-space-lg);
        border-radius: var(--r26-radius-lg);
    }
    .rachat-modal__cover {
        width: 100px;
        height: 140px;
    }
}

/* ============== Loader scan ============== */

.rachat-loader {
    text-align: center;
    color: #fff;
}

.rachat-loader p {
    margin: var(--r26-space-md) 0 0;
    font-size: var(--r26-fs-md);
    font-weight: var(--r26-fw-medium);
}

.rachat-loader__spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255,255,255,0.25);
    border-top-color: #fff;
    border-radius: 50%;
    margin: 0 auto;
    animation: rachat-spin 0.7s linear infinite;
}

@keyframes rachat-spin {
    to { transform: rotate(360deg); }
}

/* ============== Radio avec sous-texte ============== */

.rachat-radio span small {
    display: block;
    font-size: var(--r26-fs-xs);
    font-weight: var(--r26-fw-normal);
    color: var(--r26-text-light);
    margin-top: 4px;
    line-height: 1.4;
    max-width: 100%;
}

.rachat-radio input:checked + span small {
    color: var(--r26-primary-light);
}

/* Sur les écrans très étroits, on bascule en 1 colonne pour garder
   la lisibilité (sinon le titre "J'en fais don à la Bouquinerie" se
   coupe sur 3-4 lignes inutilement). */
@media (max-width: 600px) {
    .rachat-radio-group {
        flex-direction: column;
    }
    .rachat-radio {
        min-width: 0;
    }
    .rachat-radio span {
        flex-direction: row;
        align-items: center;
        text-align: left;
        padding: 14px;
    }
    .rachat-radio span > i {
        margin-bottom: 0;
        font-size: 1.3rem;
        flex-shrink: 0;
    }
    .rachat-radio span small {
        text-align: left;
    }
}

/* ============== IBAN form expedition ============== */

.rachat-iban-form {
    margin-top: var(--r26-space-lg);
    padding-top: var(--r26-space-lg);
    border-top: 1px solid var(--r26-border-light);
    animation: rachat-fade-in 0.3s ease;
}

/* ============== Mon compte — Panier recap ============== */

.rachat-panier-recap {
    margin-bottom: var(--r26-space-lg);
}

.rachat-panier-recap__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--r26-space-sm);
    margin-bottom: var(--r26-space-md);
}

.rachat-panier-recap__header strong {
    font-size: var(--r26-fs-md);
    color: var(--r26-primary);
}

.rachat-panier-recap__status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--r26-radius-full);
    font-size: var(--r26-fs-xs);
    font-weight: var(--r26-fw-semibold);
    margin-left: var(--r26-space-sm);
    background: var(--r26-bg-alt);
    color: var(--r26-text-secondary);
}

.rachat-panier-recap__status--1 { background: #DBEAFE; color: #1e40af; }
.rachat-panier-recap__status--2 { background: #FEF3C7; color: #92400e; }
.rachat-panier-recap__status--3 { background: #D1FAE5; color: #065f46; }
.rachat-panier-recap__status--4 { background: #D1FAE5; color: #065f46; }
.rachat-panier-recap__status--9 { background: #FEE2E2; color: #991b1b; }

.rachat-panier-recap__meta {
    display: flex;
    gap: var(--r26-space-lg);
    font-size: var(--r26-fs-sm);
    color: var(--r26-text-light);
}

.rachat-panier-recap__colis {
    margin-top: var(--r26-space-md);
    padding-top: var(--r26-space-md);
    border-top: 1px solid var(--r26-border-light);
    display: flex;
    flex-direction: column;
    gap: var(--r26-space-sm);
}

.rachat-conf-item__action {
    flex-shrink: 0;
}

.rachat-panier-recap__actions {
    margin-top: var(--r26-space-md);
    padding-top: var(--r26-space-md);
    border-top: 1px solid var(--r26-border-light);
    display: flex;
    flex-wrap: wrap;
    gap: var(--r26-space-sm);
}

/* ============== Mon compte — Sessions ============== */

.rachat-session-item {
    display: flex;
    align-items: center;
    gap: var(--r26-space-md);
    padding: var(--r26-space-md);
    border-radius: var(--r26-radius);
    background: var(--r26-bg);
    margin-bottom: var(--r26-space-sm);
    border: 1px solid transparent;
    transition: var(--r26-transition);
}

.rachat-session-item--current {
    border-color: var(--r26-primary);
    background: #F0FDF4;
}

.rachat-session-item__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--r26-radius-full);
    background: var(--r26-bg-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--r26-primary);
    font-size: var(--r26-fs-md);
    flex-shrink: 0;
}

.rachat-session-item--current .rachat-session-item__icon {
    background: var(--r26-primary);
    color: #fff;
}

.rachat-session-item__body {
    flex: 1;
    min-width: 0;
}

.rachat-session-item__device {
    margin: 0;
    font-weight: var(--r26-fw-semibold);
    font-size: var(--r26-fs-sm);
    color: var(--r26-text);
}

.rachat-session-item__device em {
    font-weight: var(--r26-fw-normal);
    color: var(--r26-success);
    font-style: normal;
    font-size: var(--r26-fs-xs);
}

.rachat-session-item__meta {
    margin: 2px 0 0;
    font-size: var(--r26-fs-xs);
    color: var(--r26-text-light);
}

/* ============== Mon compte — IBAN current ============== */

.rachat-iban-current {
    padding: var(--r26-space-md);
    background: var(--r26-bg);
    border-radius: var(--r26-radius);
    font-family: ui-monospace, monospace;
    font-size: var(--r26-fs-sm);
}

.rachat-iban-current strong {
    font-family: var(--r26-font);
    color: var(--r26-text-secondary);
    margin-right: var(--r26-space-sm);
}

/* ============== Scanner caméra (html5-qrcode overrides) ============== */

#rachat-scanner-reader {
    width: 100%;
    height: 100%;
}

/* Cacher les éléments UI natifs de html5-qrcode qu'on ne veut pas */
#rachat-scanner-reader img[alt="Info icon"],
#rachat-scanner-reader__dashboard_section,
#rachat-scanner-reader__dashboard_section_csr,
#rachat-scanner-reader__dashboard_section_swaplink {
    display: none !important;
}

/* Le scan region doit remplir le viewport */
#rachat-scanner-reader video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: var(--r26-radius);
}

/* Zone de scan (le carré qui s'affiche) */
#rachat-scanner-reader__scan_region {
    min-height: 280px;
}

/* Masquer le header html5-qrcode "Scanning..." */
#rachat-scanner-reader__header_message {
    display: none !important;
}

/* ===== Encadré IBAN déjà enregistré (page expedition) ===== */
.rachat-iban-known {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--r26-space-md);
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: var(--r26-radius);
    padding: 12px 16px;
    margin-top: var(--r26-space-md);
    flex-wrap: wrap;
}
.rachat-iban-known__msg {
    margin: 0;
    color: #065f46;
    font-size: var(--r26-fs-sm);
    line-height: 1.5;
}
.rachat-iban-known__msg i {
    margin-right: 4px;
}
.rachat-iban-known__num {
    font-family: ui-monospace, monospace;
    color: #047857;
    margin-left: 4px;
}
.rachat-iban-known__edit {
    background: transparent;
    border: 1px solid #a7f3d0;
    color: #047857;
    border-radius: var(--r26-radius-sm);
    padding: 6px 12px;
    font-size: var(--r26-fs-xs);
    cursor: pointer;
    transition: var(--r26-transition-fast);
    white-space: nowrap;
}
.rachat-iban-known__edit:hover {
    background: #d1fae5;
    color: #065f46;
}

/* ============================================================
   FAQ
   ============================================================ */

.rachat-faq__intro {
    color: var(--r26-text-secondary);
    font-size: var(--r26-fs-sm);
    line-height: 1.6;
    text-align: left;
    margin-top: var(--r26-space-md);
}
.rachat-faq__intro p { margin: 0 0 var(--r26-space-sm); }

/* Barre de recherche */
.rachat-faq__search {
    position: relative;
    display: flex;
    align-items: center;
    margin: var(--r26-space-lg) 0 var(--r26-space-md);
}
.rachat-faq__search > i {
    position: absolute;
    left: 14px;
    color: var(--r26-text-muted);
    pointer-events: none;
}
.rachat-faq__search .rachat-input {
    width: 100%;
    padding-left: 40px;
    padding-right: 40px;
}
.rachat-faq__search button {
    position: absolute;
    right: 8px;
    background: transparent;
    border: none;
    color: var(--r26-text-muted);
    cursor: pointer;
    padding: 6px;
    font-size: var(--r26-fs-md);
}
.rachat-faq__search button:hover { color: var(--r26-text); }

.rachat-faq__noresult {
    text-align: center;
    color: var(--r26-text-secondary);
    padding: var(--r26-space-xl) 0;
    font-style: italic;
}

/* Sommaire */
.rachat-faq__toc {
    display: flex;
    flex-wrap: wrap;
    gap: var(--r26-space-sm);
    margin-bottom: var(--r26-space-2xl);
}
.rachat-faq__toc-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--r26-bg-alt, #f3f4f6);
    border-radius: 999px;
    font-size: var(--r26-fs-sm);
    color: var(--r26-text-secondary);
    text-decoration: none;
    transition: var(--r26-transition-fast);
}
.rachat-faq__toc-link:hover {
    background: var(--r26-primary);
    color: #fff;
}
.rachat-faq__toc-count {
    font-size: var(--r26-fs-xs);
    background: rgba(0,0,0,0.08);
    border-radius: 999px;
    padding: 1px 7px;
}
.rachat-faq__toc-link:hover .rachat-faq__toc-count {
    background: rgba(255,255,255,0.25);
}

/* Catégorie */
.rachat-faq__cat {
    margin-bottom: var(--r26-space-2xl);
    scroll-margin-top: 80px; /* compense le header sticky lors des ancres */
}
.rachat-faq__cat-titre {
    font-size: var(--r26-fs-xl);
    color: var(--r26-primary);
    font-weight: var(--r26-fw-bold);
    padding-bottom: var(--r26-space-sm);
    border-bottom: 2px solid var(--r26-border-light);
    margin-bottom: var(--r26-space-md);
}
.rachat-faq__sub {
    font-size: var(--r26-fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--r26-text-muted);
    margin: var(--r26-space-lg) 0 var(--r26-space-sm);
}

/* Item (accordéon natif <details>) */
.rachat-faq__item {
    border: 1px solid var(--r26-border-light);
    border-radius: var(--r26-radius);
    margin-bottom: var(--r26-space-md);
    background: #fff;
    overflow: hidden;
}
.rachat-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--r26-space-md);
    padding: 18px 22px;
    cursor: pointer;
    font-weight: var(--r26-fw-semibold);
    color: var(--r26-text);
    list-style: none;
}
.rachat-faq__q::-webkit-details-marker { display: none; }
.rachat-faq__item[open] .rachat-faq__q {
    background: var(--r26-bg-alt, #f8f9fa);
}
.rachat-faq__chevron {
    flex-shrink: 0;
    color: var(--r26-text-muted);
    transition: transform 0.2s ease;
}
.rachat-faq__item[open] .rachat-faq__chevron {
    transform: rotate(180deg);
}
.rachat-faq__a {
    padding: 20px 22px 24px;
    color: var(--r26-text-secondary);
    font-size: var(--r26-fs-base);
    line-height: 1.85;
    border-top: 1px solid var(--r26-border-light);
}
.rachat-faq__a p { margin: 0 0 1.1em; }
.rachat-faq__a p:last-child { margin-bottom: 0; }
.rachat-faq__todo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #b45309;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--r26-radius-sm);
    padding: 6px 12px;
    font-style: italic;
}

/* ── Avertissement DEV dans la modale scan (doublon détecté mais compte
   exempté du blocage). Visible uniquement pour les comptes de test. ── */
.rachat-modal__devwarn {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 14px;
    padding: 10px 14px;
    background: #fff7ed;
    border: 1px dashed #f59e0b;
    border-radius: var(--r26-radius-sm);
    color: #7c2d12;
    font-size: 13px;
    line-height: 1.4;
    text-align: left;
}
.rachat-modal__devwarn i {
    color: #f59e0b;
    margin-top: 2px;
    flex-shrink: 0;
}

/* ── Mode d'envoi : encart "dépôt à Lomme" (adresse + horaires)
   sur la page expédition, affiché sous le radio quand l'user sélectionne
   "Dépôt à Lomme". ── */
.rachat-depot-info {
    margin-top: 14px;
    padding: 14px 18px;
    background: #f0fdf4;
    border-left: 4px solid #16a34a;
    border-radius: 8px;
    color: #1f2937;
}
.rachat-depot-info__line {
    margin: 4px 0;
    font-size: 14px;
    line-height: 1.4;
}
.rachat-depot-info__line i {
    color: #16a34a;
    margin-right: 6px;
}
.rachat-depot-info__hint {
    margin: 8px 0 0;
    font-size: 13px;
    color: #4b5563;
    font-style: italic;
}

/* ============================================================
   LANDING 2026 — Hero vidéo, section "Pourquoi nous", Modal carousel
   ============================================================ */

/* Landing avec hero vidéo : on supprime le padding-top par défaut de
   .rachat-page pour que la vidéo soit collée au header sticky. */
.rachat-page--landing { padding-top: 0; }

/* ── Hero vidéo (variante) ── */
.rachat-hero--video {
    position: relative;
    overflow: hidden;
    padding: clamp(80px, 14vw, 160px) 16px;
    color: #fff;
    text-align: center;
    /* Tient compte du header global qui occupe le top */
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rachat-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    pointer-events: none;
}
.rachat-hero__overlay {
    position: absolute;
    inset: 0;
    /* Voile sombre pour garantir le contraste du texte sur n'importe quelle frame */
    background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.65) 100%);
    z-index: 2;
}
.rachat-hero__content {
    position: relative;
    z-index: 3;
}
.rachat-hero--video .rachat-hero__titre {
    color: #fff;
    font-size: clamp(2rem, 5.5vw, 3.8rem);
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.rachat-hero--video .rachat-hero__sous-titre {
    color: rgba(255,255,255,0.92);
    font-size: var(--r26-fs-xl);
    max-width: 640px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* ── Section "Pourquoi choisir La Bouquinerie" ── */
.rachat-why-header {
    text-align: center;
    margin-bottom: var(--r26-space-2xl);
}
.rachat-why-header__logo {
    display: block;
    margin: 0 auto var(--r26-space-lg);
    max-width: 140px;
    height: auto;
}
.rachat-why-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--r26-space-xl);
}
@media (max-width: 900px) {
    .rachat-why-grid { grid-template-columns: 1fr; }
}
.rachat-why-card {
    background: var(--r26-bg-card, #fff);
    border-radius: var(--r26-radius-md, 12px);
    padding: var(--r26-space-xl) var(--r26-space-lg);
    text-align: center;
    box-shadow: var(--r26-shadow-sm, 0 2px 8px rgba(0,0,0,0.06));
}
.rachat-why-card__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--r26-space-md);
    border-radius: 50%;
    background: var(--r26-primary-soft, #ecfdf5);
    color: var(--r26-primary, #16a34a);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}
.rachat-why-card h3 {
    margin: 0 0 var(--r26-space-sm);
    font-size: var(--r26-fs-lg);
    color: var(--r26-text);
}
.rachat-why-card p {
    margin: 0;
    color: var(--r26-text-secondary);
    line-height: var(--r26-lh);
}

/* ── Modal Carousel "Guide de rachat" ──
   Réutilise .rachat-modal-overlay (déjà défini ailleurs). Ici on ajoute
   la variante carousel : image en plein cadre + flèches + dots. */
.rachat-modal--guide {
    max-width: min(960px, 95vw);
    width: 100%;
    padding: 0;
    background: #0f172a; /* fond sombre pour mettre l'image en valeur */
    color: #fff;
}
.rachat-modal--guide .rachat-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    background: rgba(0,0,0,0.5);
    color: #fff;
    border: none;
    width: 36px; height: 36px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rachat-modal--guide .rachat-modal__close:hover { background: rgba(0,0,0,0.75); }

.rachat-guide-carousel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    /* Hauteur adaptative selon le device : portrait sur mobile, landscape sur desktop */
    min-height: 60vh;
}
.rachat-guide-pic { display: block; width: 100%; }
.rachat-guide-pic img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 80vh;
    object-fit: contain;
    margin: 0 auto;
}
.rachat-guide-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    color: #fff;
    border: none;
    width: 44px; height: 44px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: background .15s ease;
}
.rachat-guide-nav:hover { background: rgba(0,0,0,0.8); }
.rachat-guide-nav--prev { left: 12px; }
.rachat-guide-nav--next { right: 12px; }

.rachat-guide-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 12px 0 6px;
}
.rachat-guide-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.rachat-guide-dot:hover { background: rgba(255,255,255,0.6); }
.rachat-guide-dot.is-active {
    background: #fff;
    transform: scale(1.2);
}
.rachat-guide-counter {
    text-align: center;
    margin: 0 0 12px;
    font-size: 13px;
    color: rgba(255,255,255,0.75);
}

/* ============================================================
   LANDING — Section "Pourquoi nous" (ré-skin doux/illustré)
   Fontes : Fredoka (titre) · Patrick Hand SC (sous-titres) · Nunito Sans (corps)
   Scoping strict à .rachat-why pour ne pas écraser le reste du site.
   ============================================================ */

.rachat-why {
    background: #fbf7f1; /* crème doux */
    padding: clamp(48px, 6vw, 96px) 0;
    font-family: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* En-tête : titre principal + petits "squiggles" + sous-titre handwritten */
.rachat-why__header {
    text-align: center;
    margin-bottom: clamp(32px, 4vw, 56px);
    padding: 0 16px;
}
.rachat-why__title {
    font-family: 'Fredoka', system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    color: #1b4332;
    letter-spacing: 0.02em;
    margin: 0 0 12px;
    line-height: 1.2;
}
.rachat-why__title-accent {
    color: #ea6a32; /* orange chaleureux */
}
.rachat-why__title-squiggle {
    display: inline-block;
    color: #1b4332;
    opacity: 0.55;
    transform: rotate(-8deg);
    margin: 0 10px;
    font-weight: 500;
    font-size: 0.9em;
}
.rachat-why__subtitle {
    font-family: 'Nunito Sans', sans-serif;
    color: #4b5563;
    font-size: 1rem;
    margin: 0;
}

/* Grille des 3 cards illustrées */
.rachat-why__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 40px);
    padding: 0 16px;
}
@media (max-width: 900px) { .rachat-why__grid { grid-template-columns: 1fr; } }

.rachat-why__card {
    background: transparent;
    text-align: center;
    box-shadow: none;
    padding: 0;
}
.rachat-why__card-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 16px;
    min-height: 56px;
}
.rachat-why__card-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #e6f0e6;
    color: #1b4332;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.rachat-why__card-title {
    font-family: 'Patrick Hand SC', cursive;
    font-size: clamp(1.6rem, 2.4vw, 2rem);
    font-weight: 400;
    line-height: 1;
    margin: 0;
    letter-spacing: 0.03em;
    text-align: left;
}
.rachat-why__card-title-dark   { color: #1b4332; }
.rachat-why__card-title-accent { color: #ea6a32; }

.rachat-why__card-illu {
    margin: 0 0 18px;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 12px rgba(31, 41, 55, 0.06);
}
.rachat-why__card-illu img {
    display: block;
    width: 100%;
    height: auto;
}

.rachat-why__card-text {
    font-family: 'Nunito Sans', sans-serif;
    color: #4b5563;
    font-size: 0.95rem;
    line-height: 1.55;
    max-width: 38ch;
    margin: 0 auto;
}

/* Bandeau "Merci !" en bas : 4 mini-items + remerciement */
.rachat-why__strip {
    margin: clamp(40px, 5vw, 64px) 16px 0;
    padding: 18px 22px;
    background: #f5efe2;
    border: 1px dashed #d8c9a4;
    border-radius: 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 24px 32px;
}
.rachat-why__strip-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.rachat-why__strip-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}
.rachat-why__strip-icon--dark   { background: #1b4332; color: #fff; }
.rachat-why__strip-icon--accent { background: #ea6a32; color: #fff; }
.rachat-why__strip-label {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 1.2;
    color: #1f2937;
    letter-spacing: 0.04em;
}

.rachat-why__strip-merci {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 12px;
    border-left: 1px dashed #d8c9a4;
}
@media (max-width: 700px) {
    .rachat-why__strip-merci { border-left: none; padding-left: 0; width: 100%; justify-content: center; }
}
.rachat-why__strip-heart {
    color: #1b4332;
    font-size: 22px;
}
.rachat-why__strip-merci strong {
    font-family: 'Patrick Hand SC', cursive;
    color: #1b4332;
    font-size: 1.5rem;
    font-weight: 400;
}
.rachat-why__strip-merci small {
    font-family: 'Nunito Sans', sans-serif;
    color: #4b5563;
    font-size: 12px;
    line-height: 1.3;
}

/* ============================================================
   Conditions Générales de Rachat (page texte longue)
   ============================================================ */

.rachat-page--cgr { padding-bottom: clamp(48px, 6vw, 80px); }

/* TOC en haut : encadré beige, liste à puces compacte */
.rachat-cgr__toc {
    background: #f5efe2;
    border: 1px dashed #d8c9a4;
    border-radius: 12px;
    padding: 16px 22px;
    margin: 0 0 var(--r26-space-xl);
    font-size: 14px;
    line-height: 1.6;
}
.rachat-cgr__toc strong {
    display: block;
    margin-bottom: 8px;
    color: #1b4332;
    font-size: 15px;
}
.rachat-cgr__toc ol {
    columns: 2;
    column-gap: 32px;
    margin: 0;
    padding-left: 20px;
    color: #4b5563;
}
@media (max-width: 700px) { .rachat-cgr__toc ol { columns: 1; } }
.rachat-cgr__toc a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted transparent;
}
.rachat-cgr__toc a:hover {
    color: #1b4332;
    border-bottom-color: currentColor;
}

/* Corps des CGR : sections espacées, listes claires */
.rachat-cgr section {
    scroll-margin-top: 80px; /* pour que l'ancre ne se cache pas sous le header sticky */
    margin-bottom: var(--r26-space-xl);
}
.rachat-cgr h2 {
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    color: #1b4332;
    border-bottom: 2px solid #ecfdf5;
    padding-bottom: 8px;
    margin: 0 0 16px;
}
.rachat-cgr h3 {
    font-size: 1.05rem;
    color: #1b4332;
    margin: 18px 0 10px;
}
.rachat-cgr p {
    color: #374151;
    line-height: 1.65;
    margin: 0 0 12px;
}
.rachat-cgr ul,
.rachat-cgr ol {
    margin: 0 0 14px;
    padding-left: 22px;
    color: #374151;
    line-height: 1.65;
}
.rachat-cgr ul ul,
.rachat-cgr ul ol {
    margin-top: 8px;
    margin-bottom: 4px;
}
.rachat-cgr li { margin-bottom: 6px; }
.rachat-cgr strong { color: #1f2937; }

/* Note d'information contextuelle (ex : timing de paiement sur la page expédition) */
.rachat-note-info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 14px 0 0;
    padding: 10px 14px;
    background: #eff6ff;
    border-left: 3px solid #3b82f6;
    border-radius: 8px;
    color: #1e40af;
    font-size: 13px;
    line-height: 1.45;
}
.rachat-note-info i { margin-top: 2px; flex-shrink: 0; }

/* ===== Top des rachats du moment (landing) ===== */
.rachat-top__intro {
    text-align: center;
    color: var(--r26-text-secondary);
    margin: -8px 0 26px;
}

.rachat-top__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 22px;
}

.rachat-top__card {
    text-align: center;
}

.rachat-top__cover {
    position: relative;
    border-radius: var(--r26-radius);
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    aspect-ratio: 3 / 4;
    background: #f3f4f6;
}

.rachat-top__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rachat-top__prix {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: var(--r26-primary);
    color: #fff;
    font-weight: 700;
    font-size: var(--r26-fs-sm);
    padding: 4px 11px;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.rachat-top__card-titre {
    font-size: var(--r26-fs-sm);
    font-weight: 600;
    margin: 10px 0 2px;
    color: var(--r26-text-primary);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rachat-top__card-auteur {
    font-size: 0.8rem;
    color: var(--r26-text-secondary);
    margin: 0;
}

.rachat-top__note {
    text-align: center;
    font-size: 0.8rem;
    color: var(--r26-text-secondary);
    margin-top: 24px;
    font-style: italic;
}

@media (max-width: 600px) {
    .rachat-top__grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 14px;
    }
}

/* ===== Badge « boost » dans le modal de scan (argument marketing) ===== */
.rachat-modal__boost {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    padding: 6px 14px;
    background: linear-gradient(135deg, var(--r26-secondary), #f4a261);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 999px;
    box-shadow: 0 3px 10px rgba(231, 111, 81, 0.35);
}

.rachat-modal__boost i { font-size: 0.95rem; }

.rachat-modal__prix-base {
    color: var(--r26-text-muted);
    font-size: 0.85rem;
    text-decoration: line-through;
    margin-top: 2px;
}

/* ===== Page enquête de satisfaction (vote par 4 boutons de couleur) ===== */
.satisfaction-notes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 16px;
}

@media (max-width: 480px) {
    .satisfaction-notes { grid-template-columns: repeat(2, 1fr); }
}

.satisfaction-note {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 6px;
    border: 2px solid var(--c);
    border-radius: var(--r26-radius);
    background: #fff;
    color: var(--c);
    font-family: inherit;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.satisfaction-note:hover { transform: translateY(-2px); }

.satisfaction-note__emoji { font-size: 1.8rem; line-height: 1; }

.satisfaction-note.is-selected {
    background: var(--c);
    color: #fff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

/* ===== Panier vide → top des rachats du moment (carousel) ===== */
.rachat-panier-top {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--r26-border-light);
}

.rachat-panier-top__titre {
    font-weight: 700;
    color: var(--r26-primary);
    font-size: 0.98rem;
    margin: 0;
    text-align: center;
}

.rachat-panier-top__sub {
    color: var(--r26-text-muted);
    font-size: 0.82rem;
    margin: 2px 0 12px;
    text-align: center;
}

.rachat-panier-top__scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.rachat-panier-top__card {
    flex: 0 0 auto;
    width: 138px;
    scroll-snap-align: start;
}

.rachat-panier-top__cover {
    position: relative;
    width: 138px;
    height: 184px;
    border-radius: var(--r26-radius);
    overflow: hidden;
    background: #f0ede6;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.rachat-panier-top__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rachat-panier-top__prix {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: var(--r26-primary);
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
    padding: 3px 9px;
    border-radius: 999px;
}

.rachat-panier-top__livre {
    font-size: 0.82rem;
    color: var(--r26-text-secondary);
    margin-top: 7px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Pré-remplissage depuis une commande de l'espace client */
.rachat-prefill {
    background: #fff;
    border: 1px solid rgba(27, 67, 50, .14);
    border-left: 4px solid var(--r26-secondary, #E76F51);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 0 0 18px;
    font-size: .92rem;
    line-height: 1.6;
}
.rachat-prefill--ok   { border-left-color: #1B4332; background: #f2f8f4; }
.rachat-prefill--vide { border-left-color: #b8b3a8; background: #faf9f6; }
.rachat-prefill b { color: #1B4332; }
.rachat-prefill a { color: #1B4332; font-weight: 600; }
.rachat-prefill__spin {
    display: inline-block; width: 13px; height: 13px; margin-right: 6px;
    border: 2px solid rgba(27, 67, 50, .25); border-top-color: #1B4332;
    border-radius: 50%; animation: rachatPrefillSpin .7s linear infinite;
    vertical-align: -2px;
}
@keyframes rachatPrefillSpin { to { transform: rotate(360deg); } }