/* ---------- Mes cartes custom (cartes enregistrées depuis l'éditeur de carte) ---------- */

.cartes-custom-entete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem 1.5rem;
    margin: 1rem 0 1.2rem;
}

.cartes-custom-entete p {
    flex: 1 1 22rem;
    margin: 0;
}

.cartes-custom-actions-page {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.cartes-custom-compte {
    color: var(--brun-cuir-clair);
    font-weight: 700;
}

.cartes-custom-etat {
    margin: 0.5rem 0 1rem;
    color: var(--brun-cuir-clair);
}

.cartes-custom-etat--erreur {
    color: var(--rouille);
}

.cartes-custom-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: 1rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}

.carte-custom {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--beige-fonce);
    border-radius: var(--radius-card);
    background: var(--beige-clair);
}

.carte-custom-apercu {
    display: block;
    padding: 0.8rem 0.8rem 0;
}

.carte-custom-apercu img,
.carte-custom-sans-apercu {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 400 / 559;
    border-radius: 0.5rem;
}

.carte-custom-sans-apercu {
    display: grid;
    place-items: center;
    color: var(--brun-cuir-clair);
    background: var(--beige);
}

.carte-custom-corps {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.7rem 0.8rem 0.8rem;
}

.carte-custom-nom {
    overflow-wrap: anywhere;
    font-family: var(--font-titre, inherit);
}

.carte-custom-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.5rem;
    color: var(--brun-cuir-clair);
    font-size: 0.85rem;
}

.carte-custom-badge {
    padding: 0 0.45rem;
    border-radius: var(--radius-small);
    color: var(--white);
    background: var(--rouille);
    font-weight: 700;
}

.carte-custom-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: auto;
    padding-top: 0.5rem;
}

.cartes-custom-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--brun-cuir);
    border-radius: var(--radius-small);
    color: var(--brun-cuir);
    background: transparent;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.1;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color 0.15s,
        color 0.15s,
        border-color 0.15s;
}

.cartes-custom-btn .icone {
    flex-shrink: 0;
}

.cartes-custom-btn:hover,
.cartes-custom-btn:focus-visible {
    color: var(--beige-clair);
    background: var(--brun-cuir);
}

/* Icône seule (télécharger, supprimer) */
.cartes-custom-btn--icone {
    width: 2rem;
    padding: 0;
}

/* Commander : toute la largeur de la carte */
.cartes-custom-btn--large {
    flex: 1 1 100%;
}

.cartes-custom-btn--plein {
    color: var(--beige-clair);
    background: var(--brun-cuir);
}

.cartes-custom-btn--plein:hover,
.cartes-custom-btn--plein:focus-visible {
    background: var(--brun-nuit);
}

.cartes-custom-btn--secondaire {
    border-color: var(--beige-fonce);
    background: var(--beige-clair);
}

/* Commander, générer le PDF, joindre un verso : doré */
.cartes-custom-btn--or {
    border-color: var(--or);
    color: var(--brun-nuit);
    background: var(--or);
}

.cartes-custom-btn--or:hover,
.cartes-custom-btn--or:focus-visible {
    border-color: var(--or-clair);
    color: var(--brun-nuit);
    background: var(--or-clair);
}

/* Créer une carte : vert, comme « Enregistrer comme nouvelle carte » de l'éditeur */
.cartes-custom-btn--vert {
    border-color: #2f7d3a;
    color: var(--white);
    background: #2f7d3a;
}

.cartes-custom-btn--vert:hover,
.cartes-custom-btn--vert:focus-visible {
    border-color: #24642d;
    color: var(--white);
    background: #24642d;
}

.cartes-custom-btn--bleu {
    border-color: var(--promo-fonce);
    color: var(--promo-fonce);
}

.cartes-custom-btn--bleu:hover,
.cartes-custom-btn--bleu:focus-visible {
    color: var(--white);
    background: var(--promo-fonce);
}

.cartes-custom-btn--danger {
    border-color: var(--rouille);
    color: var(--rouille);
}

.cartes-custom-btn--danger:hover,
.cartes-custom-btn--danger:focus-visible {
    color: var(--white);
    background: var(--rouille);
}

.cartes-custom-btn--danger-plein {
    border-color: var(--rouge-banni);
    color: var(--white);
    background: var(--rouge-banni);
}

.cartes-custom-btn--danger-plein:hover,
.cartes-custom-btn--danger-plein:focus-visible {
    border-color: #8f1a1a;
    color: var(--white);
    background: #8f1a1a;
}

.cartes-custom-btn:disabled,
.cartes-custom-btn.is-desactive {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.cartes-custom-note {
    color: var(--brun-cuir-clair);
    font-size: 0.9rem;
}

/* Verso : lien discret à droite de la rangée des boutons, ouvre la fenêtre #cartes-custom-verso */
.carte-custom-verso-lien {
    display: inline-flex;
    align-self: center;
    align-items: center;
    gap: 0.3rem;
    margin-left: auto;
    padding: 0;
    border: 0;
    color: var(--brun-cuir-clair);
    background: none;
    font: inherit;
    font-size: 0.8rem;
    text-decoration: underline dotted;
    text-underline-offset: 0.2em;
    cursor: pointer;
}

.carte-custom-verso-lien:hover,
.carte-custom-verso-lien:focus-visible {
    color: var(--brun-cuir);
}

.carte-custom-verso-lien img {
    width: auto;
    height: 2rem;
    border-radius: 2px;
}

/* Fenêtres (verso, suppression) */
.cartes-custom-fenetre {
    width: min(28rem, calc(100vw - 2rem));
    padding: 0;
    color: var(--encre);
    background: var(--beige-clair);
    border: 2px solid var(--or);
    border-radius: var(--radius-card);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.cartes-custom-fenetre.is-danger {
    border-color: var(--rouge-banni);
}

.cartes-custom-fenetre::backdrop {
    background: rgba(28, 17, 10, 0.55);
}

.cartes-custom-fenetre-contenu {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem 1.4rem;
}

.cartes-custom-fenetre h2 {
    margin: 0;
    color: var(--brun-nuit);
    font-family: 'Grandstander', cursive;
    font-size: 1.2rem;
    overflow-wrap: anywhere;
}

.cartes-custom-fenetre.is-danger h2 {
    color: var(--rouge-banni);
}

.cartes-custom-fenetre p {
    margin: 0;
    line-height: 1.45;
}

.cartes-custom-fenetre-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.cartes-custom-verso-apercu {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0;
    color: var(--brun-cuir-clair);
    font-size: 0.85rem;
}

.cartes-custom-verso-apercu[hidden] {
    display: none;
}

.cartes-custom-verso-apercu img {
    width: 72px;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* ---------- Sélection PDF (même principe que Ressources › Cartes de profil) ---------- */
.cartes-custom-pdf {
    position: sticky;
    top: 0.5rem;
    z-index: 5;
    margin: 0 0 1rem;
    padding: 0.7rem 0.9rem;
    border: 2px solid var(--or);
    border-radius: var(--radius-card);
    background: var(--beige-clair);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.cartes-custom-pdf-ligne {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.7rem;
}

.cartes-custom-pdf-compte {
    margin-right: auto;
    color: var(--brun-nuit);
}

.cartes-custom-pdf-fermer {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--brun-cuir);
    background: transparent;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.cartes-custom-pdf-fermer:hover,
.cartes-custom-pdf-fermer:focus-visible {
    background: var(--beige);
}

.cartes-custom-pdf-aide {
    margin: 0.4rem 0 0;
    color: var(--brun-cuir-clair);
    font-size: 0.82rem;
}

.cartes-custom-pdf-rapport {
    margin-top: 0.5rem;
    color: var(--rouille);
    font-size: 0.85rem;
}

.cartes-custom-pdf-rapport p,
.cartes-custom-pdf-rapport ul {
    margin: 0;
}

.carte-custom {
    position: relative;
}

.carte-custom-pdf-case {
    position: absolute;
    top: 1.2rem;
    left: 1.2rem;
    display: none;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-small);
    background: var(--beige-clair);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
    cursor: pointer;
}

.carte-custom-pdf-case input {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    accent-color: var(--or);
    cursor: pointer;
}

.carte-custom-pdf-case:has(input:disabled) {
    opacity: 0.4;
    cursor: not-allowed;
}

.is-selection-pdf .carte-custom-pdf-case {
    display: grid;
}

.is-selection-pdf .carte-custom-apercu {
    cursor: copy;
}

.is-selection-pdf .carte-custom.is-selectionnee {
    border-color: var(--or);
    box-shadow: 0 0 0 2px var(--or);
}