.mode-switch {
    margin-top: 1.1rem;
}

.mode-switch .btn[aria-selected="true"] {
    background: linear-gradient(140deg, var(--c2), var(--c5));
    color: #1f1a29;
}

.mode-switch .btn[aria-selected="false"] {
    background: rgba(255, 255, 255, 0.72);
    color: var(--text);
}

.cartes-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.carte-compteur {
    min-width: 8ch;
    text-align: center;
}

.flip-card-viewport {
    max-width: 720px;
    margin: 0 auto;
    overflow: hidden;
    padding: 2px;
}

.flip-card {
    perspective: 1600px;
    cursor: pointer;
    transition: transform 260ms ease, opacity 260ms ease;
}

.flip-card.slide-out-left {
    transform: translateX(-60px);
    opacity: 0;
}

.flip-card.slide-out-right {
    transform: translateX(60px);
    opacity: 0;
}

.flip-card.slide-in-from-right {
    transition: none;
    transform: translateX(60px);
    opacity: 0;
}

.flip-card.slide-in-from-left {
    transition: none;
    transform: translateX(-60px);
    opacity: 0;
}

.flip-card-inner {
    display: grid;
    width: 100%;
    transition: transform 600ms cubic-bezier(0.4, 0.2, 0.2, 1);
    transform-style: preserve-3d;
}

.flip-card.is-flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-face {
    grid-row: 1;
    grid-column: 1;
    backface-visibility: hidden;
    border-radius: var(--radius-md);
    background: #fff;
    border: 1px solid rgba(43, 42, 53, 0.08);
    box-shadow: var(--shadow);
    padding: 1.3rem 1.2rem;
}

.flip-card-back {
    transform: rotateY(180deg);
}

.recto-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 0.8rem;
}

.recto-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.recto-item img {
    width: auto;
    max-width: 100%;
    height: 200px;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(35, 32, 54, 0.14);
}

.recto-item p {
    margin: 0.5rem 0 0;
    font-size: 0.92rem;
    text-wrap: balance;
}

.recto-item .titre-film {
    font-weight: 700;
}

.flip-hint {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.85rem;
}

.verso-content {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 1.1rem;
    margin-top: 0.8rem;
}

.verso-content img {
    width: 100%;
    height: 220px;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(35, 32, 54, 0.14);
}

.verso-content h3 {
    margin-bottom: 0.3rem;
}

.verso-meta p {
    margin: 0.15rem 0;
}

.verso-meta .synopsis {
    margin-top: 0.6rem;
}

.checklist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.6rem;
    margin: 1.2rem 0;
}

.checklist-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.7);
    border: 2px solid rgba(43, 42, 53, 0.08);
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: center;
    transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}

.checklist-item:hover {
    transform: translateY(-2px);
}

.checklist-item img {
    width: 100%;
    max-width: 110px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 6px 14px rgba(35, 32, 54, 0.14);
}

.checklist-item span {
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.25;
}

.checklist-item.is-selected {
    background: linear-gradient(140deg, rgba(246, 165, 167, 0.32), rgba(180, 174, 233, 0.32));
    border-color: var(--c5);
}

.checklist-item.is-selected::after {
    content: "✓ vu et aimé";
    font-size: 0.72rem;
    font-weight: 700;
    color: #4a3f63;
}

.checklist-results h3 {
    font-size: 1.1rem;
}

.checklist-results .list-clean li {
    margin-bottom: 0.4rem;
}

.checklist-results .empty {
    color: var(--muted);
    list-style: none;
    margin-left: -1.1rem;
}

.resultat-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    list-style: none;
    margin-left: -1.1rem;
    padding: 0.4rem 0;
}

.resultat-item img {
    width: 42px;
    height: 58px;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(35, 32, 54, 0.14);
    flex-shrink: 0;
}

.resultat-titre {
    flex: 1;
    font-weight: 600;
}

.resultat-lien {
    font-size: 0.82rem;
    white-space: nowrap;
    color: inherit;
    text-decoration: underline;
}

.result-card.result-deux {
    background: linear-gradient(145deg, rgba(215, 227, 200, 0.55), rgba(255, 255, 255, 0.95));
}

.result-card.result-un {
    background: linear-gradient(145deg, rgba(247, 225, 168, 0.5), rgba(255, 255, 255, 0.95));
}

.resultat-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.9rem;
    margin-top: 1.4rem;
}

.resultat-mail-form {
    max-width: 420px;
    margin: 1rem auto 0;
    text-align: center;
}

.resultat-mail-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.resultat-mail-form .inline-actions {
    justify-content: center;
}

.resultat-mail-form input[type="email"] {
    flex: 1;
    min-width: 0;
    padding: 0.6rem 0.8rem;
    border-radius: 999px;
    border: 1px solid rgba(43, 42, 53, 0.18);
    font: inherit;
}

.mail-disclaimer {
    font-size: 0.8rem;
    margin-top: 0.6rem;
}

.mail-statut {
    margin-top: 0.5rem;
    font-weight: 600;
}

.mail-statut.succes {
    color: #2f7a3d;
}

.mail-statut.erreur {
    color: #b23b3b;
}

.swipe-progress {
    text-align: center;
}

.swipe-viewport {
    position: relative;
    width: min(320px, 90vw);
    height: 460px;
    margin: 0 auto;
    overflow: hidden;
}

.swipe-card {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border-radius: var(--radius-md);
    border: 1px solid rgba(43, 42, 53, 0.08);
    box-shadow: var(--shadow);
    padding: 1rem;
    touch-action: none;
    user-select: none;
    cursor: grab;
    will-change: transform;
}

.swipe-card:active {
    cursor: grabbing;
}

.swipe-card.est-dessus {
    z-index: 2;
}

.swipe-card.est-dessous {
    z-index: 1;
    transform: scale(0.94) translateY(10px);
    cursor: default;
    pointer-events: none;
}

.swipe-card[hidden] {
    display: none;
}

.swipe-card img {
    width: 100%;
    height: 340px;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(35, 32, 54, 0.14);
    pointer-events: none;
    -webkit-user-drag: none;
}

.swipe-card p {
    margin: 0.7rem 0 0;
    font-weight: 700;
    text-align: center;
}

.swipe-badge {
    /* Centrés plutôt que collés au bord du côté vers lequel la carte part :
       à un bord, le badge est la première chose que le cadre (overflow:
       hidden) découpe pendant l'envol, donc quasi invisible. Au centre, il
       reste visible pendant toute l'animation. */
    position: absolute;
    top: 32%;
    left: 50%;
    z-index: 2;
    padding: 0.4rem 0.9rem;
    border-radius: 8px;
    font-weight: 800;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border: 3px solid;
    background: rgba(255, 255, 255, 0.85);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    transition: opacity 150ms ease;
}

.swipe-badge-oui {
    color: #2f7a3d;
    border-color: #2f7a3d;
    transform: translateX(-50%) rotate(10deg);
}

.swipe-badge-non {
    color: #b23b3b;
    border-color: #b23b3b;
    transform: translateX(-50%) rotate(-10deg);
}

.swipe-done {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    text-align: center;
    background: rgba(255, 255, 255, 0.9);
    border-radius: var(--radius-md);
    border: 1px solid rgba(43, 42, 53, 0.08);
    box-shadow: var(--shadow);
    padding: 1.2rem;
}

/* Un sélecteur de classe avec display:flex l'emporte sur la règle par défaut
   [hidden] { display:none } du navigateur (spécificité plus forte) : sans
   cette règle, .swipe-card et .swipe-done resteraient visibles en permanence
   même quand JS positionne l'attribut hidden. */
.swipe-card[hidden],
.swipe-done[hidden] {
    display: none;
}

.swipe-actions {
    display: flex;
    justify-content: center;
    gap: 1.4rem;
    margin-top: 1.2rem;
}

.swipe-actions .btn {
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 50%;
    font-size: 1.3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.swipe-btn-non {
    color: #b23b3b;
}

.swipe-btn-oui {
    color: #2f7a3d;
}

.swipe-undo-wrap {
    justify-content: center;
    margin-top: 0.7rem;
}

.swipe-btn-annuler {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    padding: 0.45rem 0.9rem;
    width: auto;
    height: auto;
    border-radius: 999px;
    color: var(--muted);
}

.swipe-btn-annuler:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* La carte flip et la carte swipe sont volontairement en blanc opaque (sinon
   on verrait la face arrière pendant la rotation / les cartes empilées se
   confondraient), contrairement au fond translucide de .section : ça créait
   un bloc blanc net qui tranchait au milieu de ces deux sections, absent en
   mode checklist (pas de gros bloc opaque, juste une grille de tuiles). On
   rend ces deux sections elles-mêmes opaques pour que tout soit uniforme. */
#mode-cartes,
#mode-swipe {
    background: #fff;
}

@media (max-width: 640px) {
    .verso-content {
        grid-template-columns: 120px 1fr;
    }
}