/* Pages Panier, Livraison et paiement, Confirmation */
.panier-page {
    max-width: 1080px;
}

.panier-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--or);
    padding-bottom: 1rem;
}

.panier-heading h1 {
    margin: 0;
}

/* Étapes de la commande : cercles numérotés reliés par un trait (fait → coché, en cours → plein) */
.panier-etapes {
    display: flex;
    flex: 1 1 360px;
    max-width: 480px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.panier-etapes li {
    position: relative;
    flex: 1;
    color: var(--brun-cuir-clair);
    font-size: 0.85rem;
    text-align: center;
}

/* Trait vers l'étape précédente */
.panier-etapes li + li::before {
    content: '';
    position: absolute;
    top: 15px;
    right: calc(50% + 20px);
    left: calc(-50% + 20px);
    height: 2px;
    background: var(--beige-fonce);
}

.panier-etapes li.is-fait + li::before {
    background: var(--or);
}

.panier-etape {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    color: inherit;
    text-decoration: none;
}

.panier-etape-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 2px solid var(--beige-fonce);
    border-radius: 50%;
    background: var(--beige-clair);
    font-weight: 700;
}

.panier-etapes li.is-active {
    color: var(--brun-nuit);
    font-weight: 700;
}

.panier-etapes li.is-active .panier-etape-num {
    border-color: var(--rouille);
    background: var(--rouille);
    color: var(--white);
}

.panier-etapes li.is-fait {
    color: var(--brun-cuir);
}

.panier-etapes li.is-fait .panier-etape-num {
    border-color: var(--or);
    background: var(--or);
    color: transparent;
    position: relative;
}

/* Étape faite : coche à la place du numéro */
.panier-etapes li.is-fait .panier-etape-num::after {
    content: '✓';
    position: absolute;
    color: var(--brun-nuit);
}

.panier-etapes li.is-fait a:hover .panier-etape-libelle {
    text-decoration: underline;
}

/* États et alertes */
.panier-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2.5rem 1rem;
    color: var(--brun-cuir);
    text-align: center;
}

.panier-state[hidden],
.panier-alerte[hidden] {
    display: none;
}

.panier-state--error {
    color: #9b3d2e;
}

.panier-alerte {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-bottom: 1rem;
    border-left: 4px solid var(--or);
    border-radius: 6px;
    background: var(--beige-clair);
    padding: 0.75rem 1rem;
    color: var(--encre);
}

.panier-alerte--erreur {
    border-left-color: var(--rouge-banni);
    color: #7c2418;
}

/* Visiteur : invitation à se connecter */
.panier-connexion {
    justify-content: space-between;
}

.panier-connexion-liens {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.panier-connexion .panier-btn {
    padding: 0.3rem 0.85rem;
}

.panier-btn--connexion {
    gap: 0.45rem;
    background: var(--white);
}

/* Boutons */
.panier-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--brun-cuir);
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.panier-btn--primaire {
    border-color: var(--rouille);
    background: var(--rouille);
    color: var(--white);
}

.panier-btn--primaire:hover,
.panier-btn--primaire:focus-visible {
    background: var(--brun-cuir);
    border-color: var(--brun-cuir);
    color: var(--white);
}

.panier-btn--secondaire {
    background: var(--beige);
    color: var(--brun-nuit);
}

.panier-btn--large {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1.05rem;
}

.panier-btn.is-disabled,
.panier-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.panier-lien-retour {
    display: block;
    margin-top: 0.75rem;
    color: var(--brun-cuir);
    text-align: center;
}

.panier-lien-retour--bouton {
    width: 100%;
    border: none;
    background: none;
    text-decoration: underline;
    cursor: pointer;
}

/* Mise en page : contenu + récapitulatif */
.panier-grille {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: 1.5rem;
}

.panier-grille[hidden] {
    display: none;
}

@media (max-width: 860px) {
    .panier-grille {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Lignes du panier */
.panier-lignes {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.panier-ligne {
    display: grid;
    /* Quantité et prix en largeur fixe : colonnes alignées d'une ligne à l'autre, stables quand le panier change */
    grid-template-columns: 72px minmax(0, 1fr) 6.5rem 14.5rem 28px;
    align-items: center;
    gap: 0.75rem 1rem;
    border: 1px solid rgba(91, 58, 37, 0.24);
    border-radius: 6px;
    background: var(--beige);
    padding: 0.75rem;
    transition: opacity 0.2s ease;
}

.panier-ligne.is-chargement {
    opacity: 0.55;
    pointer-events: none;
}

.panier-ligne--probleme {
    border-color: var(--rouge-banni);
}

.panier-ligne-image img {
    width: 72px;
    height: 72px;
    border-radius: 4px;
    background: var(--beige-clair);
    object-fit: contain;
}

/* Première photo réelle de l'état à la place de l'image de l'article : ouvre la visionneuse */
.panier-ligne-image--reelle {
    position: relative;
    align-self: start;
    padding: 0;
    border: 2px solid var(--or);
    border-radius: 6px;
    background: none;
    cursor: zoom-in;
}

.panier-ligne-image--reelle img {
    display: block;
    object-fit: cover;
}

.panier-ligne-image--reelle:hover,
.panier-ligne-image--reelle:focus-visible {
    border-color: var(--rouille);
}

.panier-ligne-image-badge {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0 4px;
    border-top-left-radius: 4px;
    background: var(--brun-nuit);
    color: var(--or-clair);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
}

.panier-ligne-infos {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.panier-ligne-nom {
    color: var(--brun-nuit);
    font-weight: 700;
    text-decoration: none;
}

.panier-ligne-nom:hover {
    text-decoration: underline;
}

/* Variante de socle d'une figurine, à côté de son nom (panier, récapitulatif) */
.panier-socle {
    display: inline-block;
    padding: 0 0.45em;
    border: 1px solid;
    border-radius: 999px;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1.5;
    vertical-align: 0.1em;
    white-space: nowrap;
}

.panier-socle--rouge {
    background: #8a1616;
    border-color: #7a2e14;
    color: var(--beige-clair);
}

.panier-socle--dore {
    background: linear-gradient(180deg, var(--or-clair), #d4b05a);
    border-color: var(--or-terne);
    color: var(--brun-nuit);
}

.panier-ligne-etat,
.panier-ligne-note {
    color: var(--brun-cuir);
    font-size: 0.875rem;
}

/* Message pour la fabrication d'un article à la demande (renderMessage()) */
.panier-ligne-message {
    display: grid;
    gap: 0.2rem;
    margin: 0.3rem 0 0;
    max-width: 32rem;
}

.panier-ligne-message-libelle {
    color: var(--brun-cuir);
    font-size: 0.85rem;
    font-weight: 700;
}

.panier-ligne-message-libelle small {
    font-weight: 400;
}

.panier-ligne-message textarea {
    width: 100%;
    min-height: 3.2em;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--or-terne);
    border-radius: 8px;
    background: var(--beige-clair);
    color: var(--encre);
    font: inherit;
    font-size: 0.9rem;
    resize: vertical;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.panier-ligne-message textarea:focus-visible {
    border-color: var(--or);
    outline: none;
    box-shadow: 0 0 0 3px rgba(201, 154, 60, 0.3);
}

.panier-ligne-message-etat {
    min-height: 0;
    color: var(--brun-cuir-clair);
    font-size: 0.8rem;
}

.panier-ligne-message-etat.is-erreur {
    color: var(--rouge-banni);
    font-weight: 700;
}

.panier-ligne-probleme {
    color: var(--rouge-banni);
    font-size: 0.875rem;
    font-weight: 700;
}

.panier-ligne-probleme[hidden] {
    display: none;
}

.panier-quantite {
    display: inline-flex;
    justify-self: center;
    align-items: center;
    border: 1px solid var(--brun-cuir-clair);
    border-radius: var(--radius-small);
    background: var(--beige-clair);
}

.panier-quantite-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    color: var(--brun-nuit);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
}

.panier-quantite-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.panier-quantite-valeur {
    min-width: 1.75rem;
    font-weight: 700;
    text-align: center;
}

/* Montant (ancien prix barré devant le prix payé), aligné à droite d'une ligne à l'autre,
   puis étiquette du type de remise (avec le taux appliqué) */
.panier-ligne-prix {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
    min-width: 0;
}

.panier-ligne-montants {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: baseline;
    gap: 0 0.45rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.panier-ligne-montants strong {
    font-size: 1.05rem;
}

.panier-ligne-montants s {
    color: var(--brun-cuir);
    font-size: 0.85rem;
}

.panier-ligne-retirer {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--brun-cuir);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.panier-ligne-retirer:hover {
    background: var(--beige-fonce);
    color: var(--rouge-banni);
}

/* Liste étroite (récapitulatif à côté sur un écran moyen, ou petit écran) : quantité sous les infos,
   prix à droite centré sur la hauteur de la ligne */
@media (min-width: 861px) and (max-width: 1040px), (max-width: 700px) {
    .panier-ligne {
        grid-template-columns: 72px minmax(0, 1fr) auto 28px;
    }

    .panier-ligne-image,
    .panier-ligne-prix,
    .panier-ligne-retirer {
        grid-row: 1 / 3;
    }

    .panier-quantite {
        grid-column: 2;
        grid-row: 2;
        justify-self: start;
    }

    .panier-ligne-prix {
        grid-column: 3;
        max-width: 14.5rem;
    }

    .panier-ligne-retirer {
        grid-column: 4;
    }
}

/* Petit écran : image, infos et croix en haut ; quantité et montant dessous ; étiquette de remise en bas à droite */
@media (max-width: 560px) {
    .panier-ligne {
        grid-template-columns: 56px minmax(0, 1fr) auto 28px;
        grid-template-areas:
            'image infos infos retirer'
            'quantite quantite montants montants'
            'groupe groupe groupe groupe';
        align-items: start;
        gap: 0.6rem 0.75rem;
    }

    .panier-ligne-image img {
        width: 56px;
        height: 56px;
    }

    .panier-ligne-image,
    .panier-ligne-infos,
    .panier-ligne-retirer,
    .panier-quantite {
        grid-row: auto;
        grid-column: auto;
    }

    .panier-ligne-image {
        grid-area: image;
    }

    .panier-ligne-infos {
        grid-area: infos;
    }

    .panier-ligne-retirer {
        grid-area: retirer;
        margin: -0.25rem -0.25rem 0 0;
    }

    .panier-quantite {
        grid-area: quantite;
        align-self: center;
    }

    .panier-ligne-prix {
        display: contents;
    }

    .panier-ligne-montants {
        grid-area: montants;
        align-self: center;
    }

    .panier-ligne-groupe {
        grid-area: groupe;
        justify-self: end;
        margin-top: -0.2rem;
    }
}

/* Remises */
.panier-remises:empty {
    display: none;
}

.panier-remises {
    margin-top: 1rem;
    border: 1px dashed var(--or-terne);
    border-radius: 6px;
    background: var(--beige-clair);
    padding: 0.75rem 1rem;
}

.panier-remises h2 {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
}

.panier-remises-intro {
    margin: 0 0 0.75rem;
    color: var(--brun-cuir);
    font-size: 0.875rem;
}

.panier-remises-groupes {
    display: grid;
    /* Colonne bornée au cadre : un tableau large défile dans .remise-apercu-defilement au lieu de déborder */
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Couleur de chaque type de remise (classe remise-couleur-N posée par le JS d'après l'identifiant du type) */
.remise-couleur-0 { --remise-couleur: #a34d27; }
.remise-couleur-1 { --remise-couleur: #3f6e8c; }
.remise-couleur-2 { --remise-couleur: #4f7a3a; }
.remise-couleur-3 { --remise-couleur: #7a4f8c; }
.remise-couleur-4 { --remise-couleur: #9a7420; }
.remise-couleur-5 { --remise-couleur: #2e7d73; }

.panier-remise-groupe {
    border-left: 4px solid var(--remise-couleur, var(--or));
    padding-left: 0.75rem;
}

.panier-remise-nom {
    color: var(--remise-couleur, var(--brun-nuit));
    font-weight: 700;
}

.panier-remise-etat {
    margin: 0;
    font-size: 0.875rem;
}

/* Type de remise d'un article, dans la couleur du type */
.panier-ligne-groupe {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid var(--remise-couleur, var(--beige-fonce));
    border-radius: var(--radius-small);
    background: var(--beige-clair);
    padding: 0.05rem 0.55rem;
    color: var(--remise-couleur, var(--brun-cuir));
    font-size: 0.75rem;
    font-weight: 700;
}

/* Remise appliquée : le taux en tête, sur fond de la couleur du type */
.panier-ligne-groupe.is-remisee {
    background: var(--remise-couleur, var(--rouille));
    border-color: var(--remise-couleur, var(--rouille));
    color: var(--white);
}

.panier-ligne-groupe--exclu {
    background: transparent;
    border: 1px dashed var(--brun-cuir-clair);
    font-weight: 400;
}

/* Récapitulatif */
.panier-recap {
    position: sticky;
    top: 1rem;
    border: 1px solid rgba(91, 58, 37, 0.24);
    border-top: 4px solid var(--or);
    border-radius: 6px;
    background: var(--beige);
    padding: 1rem;
}

.panier-recap h2 {
    margin: 0 0 0.75rem;
    font-size: 1.2rem;
}

.panier-totaux {
    display: grid;
    gap: 0.35rem;
    margin: 0 0 0.75rem;
}

.panier-totaux div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.panier-totaux dt {
    font-weight: 400;
}

.panier-totaux dd {
    margin: 0;
    font-weight: 700;
}

.panier-totaux-remise dd {
    color: var(--rouille);
}

.panier-totaux-total {
    margin-top: 0.25rem;
    border-top: 1px solid var(--beige-fonce);
    padding-top: 0.5rem;
    font-size: 1.1rem;
}

.panier-recap-note {
    margin: 0 0 0.75rem;
    color: var(--brun-cuir);
    font-size: 0.875rem;
}

.panier-recap-note--alerte {
    color: var(--rouge-banni);
    font-weight: 700;
}

.panier-recap-note--pays {
    font-size: 0.8125rem;
}

.panier-recap-note--pays a {
    color: inherit;
    font-weight: 700;
}

.panier-recap-note:empty,
.panier-recap-note[hidden] {
    display: none;
}

/* Jauge de la livraison offerte */
.panier-franco {
    margin: 0 0 0.75rem;
    border: 1px solid var(--beige-fonce);
    border-radius: 6px;
    background: var(--beige-clair);
    padding: 0.6rem 0.75rem;
}

.panier-franco[hidden] {
    display: none;
}

.panier-franco-texte {
    margin: 0 0 0.4rem;
    color: var(--brun-cuir);
    font-size: 0.9rem;
}

.panier-franco-jauge {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--beige-fonce);
}

.panier-franco-jauge span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--or);
    transition: width 0.4s ease;
}

.panier-franco.is-atteint {
    border-color: var(--or);
}

.panier-franco.is-atteint .panier-franco-texte strong {
    color: var(--rouille);
}

/* Livraison et paiement */
.commande-bloc {
    margin: 0 0 1rem;
    border: 1px solid rgba(91, 58, 37, 0.24);
    border-radius: 6px;
    background: var(--beige);
    padding: 1rem;
}

.commande-bloc[hidden],
.commande-form[hidden],
#commande-valider[hidden] {
    display: none;
}

.commande-bloc legend,
.commande-bloc-titre {
    float: none;
    width: auto;
    margin: 0 0 0.25rem;
    font-size: 1.15rem;
    font-weight: 700;
}

.commande-aide {
    margin: 0 0 0.75rem;
    color: var(--brun-cuir);
    font-size: 0.9rem;
}

.commande-champs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.commande-champ {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.9rem;
    font-weight: 700;
}

.commande-champ--large {
    grid-column: 1 / -1;
}

/* Adresse postale : seulement pour une livraison à domicile */
.commande-champs + .commande-champs {
    margin-top: 0.75rem;
}

.commande-champs[hidden] {
    display: none;
}

/* Erreurs de saisie signalées par commande.js */
.commande-champ.is-invalide input,
.commande-champ.is-invalide select {
    border-color: var(--rouge-banni);
    box-shadow: 0 0 0 1px var(--rouge-banni);
}

.commande-champ-erreur {
    color: var(--rouge-banni);
    font-weight: 400;
}

.commande-bloc.is-invalide {
    border-color: var(--rouge-banni);
    box-shadow: 0 0 0 1px var(--rouge-banni);
}

.commande-cgv.is-invalide {
    color: var(--rouge-banni);
    font-weight: 700;
}

.commande-erreur {
    margin: 0.75rem 0 0;
}

.commande-champ input,
.commande-champ select,
.commande-champ textarea {
    border: 1px solid var(--brun-cuir-clair);
    border-radius: 6px;
    background: var(--beige-clair);
    padding: 0.5rem 0.65rem;
    font-weight: 400;
}

.commande-champ input:focus,
.commande-champ select:focus,
.commande-champ textarea:focus {
    outline: 2px solid var(--or);
    outline-offset: 1px;
}

/* Case « Enregistrer ces coordonnées » */
.commande-enregistrer {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.85rem;
    font-size: 0.9rem;
    cursor: pointer;
}

.commande-enregistrer input {
    margin-top: 0.2rem;
    accent-color: var(--rouille);
}

.commande-enregistrer small {
    color: var(--brun-cuir);
}

.commande-cgv {
    margin: 0 0 0.75rem;
}

.commande-cgv[hidden] {
    display: none;
}

@media (max-width: 560px) {
    .commande-champs {
        grid-template-columns: minmax(0, 1fr);
    }
}

.commande-modes {
    display: grid;
    gap: 0.5rem;
}

.commande-mode {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid var(--beige-fonce);
    border-radius: 6px;
    background: var(--beige-clair);
    padding: 0.65rem 0.85rem;
    cursor: pointer;
}

.commande-mode:has(input:checked) {
    border-color: var(--rouille);
    box-shadow: 0 0 0 1px var(--rouille);
}

.commande-mode.is-indisponible {
    opacity: 0.55;
    cursor: not-allowed;
}

.commande-mode-nom {
    display: flex;
    flex-direction: column;
    font-weight: 700;
}

.commande-mode-nom small {
    color: var(--brun-cuir);
    font-weight: 400;
}

.commande-mode-prix {
    font-weight: 700;
    white-space: nowrap;
}

.commande-relais {
    margin-top: 1rem;
}

.commande-relais[hidden] {
    display: none;
}

/* Point relais : recherche (pays, code postal, position), liste des points et carte Leaflet (commande.js) */
.relais-recherche {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.6rem;
}

.relais-recherche .commande-champ[hidden] {
    display: none;
}

.relais-recherche-pays {
    flex: 1 1 10rem;
}

.relais-recherche-cp {
    flex: 1 1 8rem;
}

.relais-recherche .panier-btn {
    padding-block: 0.55rem;
}

.relais-autour {
    border: 0;
    background: none;
    padding: 0.55rem 0.25rem;
    color: var(--rouille);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.relais-autour::before {
    content: '';
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    margin-right: 0.4rem;
    border: 2px solid currentColor;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px var(--beige), inset 0 0 0 4px currentColor;
    vertical-align: -0.05rem;
}

.relais-autour[hidden] {
    display: none;
}

.relais-autour:disabled {
    opacity: 0.5;
    cursor: wait;
}

/* Liste et carte à hauteur fixe, toujours affichées : la page ne bouge pas pendant la recherche */
.relais-resultats {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 18rem 16rem;
    gap: 0.75rem;
    margin-top: 0.85rem;
}

@media (min-width: 768px) {
    .relais-resultats {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: 24rem;
    }
}

.relais-liste-bloc {
    position: relative;
    min-height: 0;
}

/* Bandeau par-dessus les résultats (recherche en cours, code postal invalide…) */
.relais-etat {
    position: absolute;
    top: 0;
    right: 0.25rem;
    left: 0;
    z-index: 2;
    margin: 0;
    border-radius: 6px;
    background: var(--brun-cuir);
    padding: 0.45rem 0.75rem;
    color: var(--white);
    font-size: 0.88rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.relais-etat.is-erreur {
    background: var(--rouge-banni);
    font-weight: 700;
}

.relais-etat[hidden] {
    display: none;
}

/* Liste vide : invitation à chercher, ou message (aucun résultat, erreur), sur toute la hauteur de la zone */
.relais-liste:has(.relais-vide) {
    align-content: stretch;
}

.relais-vide {
    display: grid;
    place-items: center;
    border: 1px dashed var(--beige-fonce);
    border-radius: 6px;
    padding: 1rem;
    color: var(--brun-cuir);
    font-size: 0.9rem;
    text-align: center;
}

.relais-vide.is-erreur {
    border-color: var(--rouge-banni);
    color: var(--rouge-banni);
    font-weight: 700;
}

.relais-liste {
    display: grid;
    align-content: start;
    gap: 0.45rem;
    height: 100%;
    margin: 0;
    padding: 0 0.25rem 0 0;
    overflow-y: auto;
    list-style: none;
    overscroll-behavior: contain;
}

.relais-point {
    border: 1px solid var(--beige-fonce);
    border-radius: 6px;
    background: var(--beige-clair);
}

.relais-point.is-choisi {
    border-color: var(--rouille);
    box-shadow: 0 0 0 1px var(--rouille);
    background: var(--white);
}

.relais-point-choix {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.65rem;
    padding: 0.6rem 0.75rem 0.4rem;
    cursor: pointer;
}

/* Bouton radio gardé pour le clavier et les lecteurs d'écran ; le numéro (repère de la carte) le remplace à l'écran */
.relais-point-choix input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.relais-point-choix:has(input:focus-visible) {
    outline: 2px solid var(--or);
    outline-offset: 2px;
    border-radius: 6px;
}

.relais-point-numero {
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border: 2px solid var(--rouille);
    border-radius: 50%;
    background: var(--white);
    color: var(--rouille);
    font-size: 0.85rem;
    font-weight: 800;
}

.relais-point.is-choisi .relais-point-numero {
    background: var(--rouille);
    color: var(--white);
}

.relais-point-texte {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: 0.9rem;
}

.relais-point-texte strong {
    color: var(--brun-nuit);
    font-size: 0.95rem;
}

.relais-point-texte small {
    color: var(--brun-cuir);
}

.relais-point-infos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    margin-top: 0.2rem;
    color: var(--brun-cuir);
    font-size: 0.82rem;
}

.relais-badge {
    border-radius: 999px;
    background: var(--or-clair);
    padding: 0.05rem 0.5rem;
    color: var(--brun-nuit);
    font-weight: 700;
}

.relais-ferme {
    color: var(--rouge-banni);
}

.relais-horaires {
    padding: 0 0.75rem 0.5rem calc(0.75rem + 1.7rem + 0.65rem);
    font-size: 0.82rem;
}

.relais-horaires summary {
    width: fit-content;
    color: var(--rouille);
    font-weight: 700;
    cursor: pointer;
}

.relais-horaires dl {
    display: grid;
    gap: 0.1rem;
    margin: 0.35rem 0 0;
}

.relais-horaires dl div {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: 0.5rem;
}

.relais-horaires dt {
    font-weight: 400;
    text-transform: capitalize;
}

.relais-horaires dd {
    margin: 0;
}

.relais-horaires .is-aujourdhui {
    font-weight: 700;
}

.relais-carte-bloc {
    position: relative;
    min-height: 0;
}

.relais-carte-bloc[hidden] {
    display: none;
}

.relais-carte {
    height: 100%;
    border: 1px solid var(--beige-fonce);
    border-radius: 6px;
    background: var(--beige-clair);
}

.relais-zone {
    position: absolute;
    top: 0.6rem;
    left: 50%;
    z-index: 500;
    transform: translateX(-50%);
    border: 1px solid var(--brun-cuir);
    border-radius: 999px;
    background: var(--white);
    padding: 0.35rem 0.9rem;
    color: var(--brun-nuit);
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    cursor: pointer;
}

.relais-zone[hidden] {
    display: none;
}

/* Marqueurs numérotés de la carte (L.divIcon) */
.relais-marqueur {
    background: none;
    border: 0;
}

.relais-marqueur span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 2px solid var(--white);
    border-radius: 50% 50% 50% 0;
    background: var(--brun-cuir);
    color: var(--white);
    font: 800 0.8rem/1 Nunito, sans-serif;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    transform: rotate(-45deg);
}

/* Goutte tournée de 45° ; le numéro est redressé */
.relais-marqueur b {
    transform: rotate(45deg);
}

.relais-marqueur.is-choisi span {
    background: var(--rouille);
    transform: rotate(-45deg) scale(1.2);
}

/* Hauteur stable (deux lignes) : choisir un point ne fait pas bouger la page */
.commande-relais-choisi {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 4.5rem;
    margin: 0.75rem 0 0;
    border-left: 4px solid var(--rouille);
    background: var(--beige-clair);
    padding: 0.5rem 0.75rem;
}

.commande-relais-choisi.is-vide {
    border-left-color: var(--beige-fonce);
    color: var(--brun-cuir);
    font-style: italic;
}

/* Nom et adresse sur une ligne chacun, coupés si trop longs (libellé complet en infobulle) */
.commande-relais-choisi > span,
.commande-relais-choisi small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.commande-relais-choisi small {
    margin-top: 0.15rem;
    color: var(--brun-cuir);
}

.commande-articles {
    display: grid;
    gap: 0.35rem;
    margin: 0 0 0.75rem;
    padding: 0 0 0.75rem;
    border-bottom: 1px solid var(--beige-fonce);
    list-style: none;
    font-size: 0.9rem;
}

.commande-articles:empty {
    display: none;
}

.commande-articles li {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

.commande-articles small {
    color: var(--brun-cuir);
}

/* Message pour la fabrication d'un article à la demande */
.commande-articles .commande-article-message {
    display: block;
    font-style: italic;
    white-space: pre-line;
}

#paiement-element {
    margin-bottom: 1rem;
}

/* Confirmation */
.confirmation-carte {
    max-width: 640px;
    margin: 0 auto;
    border: 1px solid rgba(91, 58, 37, 0.24);
    border-top: 4px solid var(--or);
    border-radius: 6px;
    background: var(--beige);
    padding: 1.5rem;
    text-align: center;
}

.confirmation-carte h2 {
    margin-top: 0;
}

/* --- Demande des photos des exemplaires réels (sous le récapitulatif) --- */
.panier-demande-photos {
    margin-top: 1rem;
    border-top: 1px dashed rgba(91, 58, 37, 0.35);
    padding-top: 0.85rem;
    font-size: 0.875rem;
}

.panier-demande-photos[hidden] {
    display: none;
}

.panier-demande-photos p {
    margin: 0 0 0.6rem;
    color: var(--brun-cuir);
}

.panier-demande-photos .panier-demande-photos-titre {
    margin-bottom: 0.25rem;
    color: var(--brun-nuit);
    font-size: 1rem;
    font-weight: 800;
}

.panier-demande-photos.is-conseillee {
    margin-top: 1rem;
    border: 2px solid var(--or);
    border-radius: 8px;
    background: var(--beige-clair);
    padding: 0.75rem;
}

/* --- Conseil de demander les photos des exemplaires avant de payer (étape Livraison) --- */
.commande-photo-conseil {
    margin: 0 0 10px;
    padding: 8px 12px;
    border-left: 4px solid var(--or);
    border-radius: 6px;
    background: var(--beige-clair);
    font-size: 14px;
}

.commande-photo-conseil[hidden] {
    display: none;
}

/* Délai de fabrication des articles réalisés à la demande (récapitulatif) */
.commande-fabrication {
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.75rem;
    border-left: 4px solid var(--or);
    border-radius: 6px;
    background: var(--beige-clair);
    font-size: 0.875rem;
}

.commande-fabrication[hidden] {
    display: none;
}

/* Options d'une ligne (ex. version de la carte de profil), modifiables dans le panier */
.panier-ligne-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    margin: 0.2rem 0 0.1rem;
}

.panier-option {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    max-width: 100%;
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.3;
}

.panier-option-libelle {
    color: var(--brun-cuir);
    font-weight: 600;
}

.panier-option-libelle::after {
    content: '\00a0:'; /* espace insécable : les deux-points ne passent pas seuls à la ligne */
}

.panier-option-select {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.panier-option-select::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 11px;
    width: 6px;
    height: 6px;
    border-right: 2px solid var(--brun-cuir);
    border-bottom: 2px solid var(--brun-cuir);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}

.panier-option-select select {
    max-width: 100%;
    appearance: none;
    padding: 0.1rem 1.9rem 0.1rem 0.6rem;
    border: 1px solid var(--or-terne);
    border-radius: 6px;
    background: var(--beige-clair);
    color: var(--encre);
    font: inherit;
    font-weight: 600;
    text-overflow: ellipsis;
    cursor: pointer;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.panier-option-select select:hover {
    border-color: var(--or);
}

.panier-option-select select:focus-visible {
    outline: none;
    border-color: var(--or);
    box-shadow: 0 0 0 3px rgba(201, 154, 60, 0.3);
}

/* Proposition d'appliquer le même choix aux autres articles */
.panier-proposition {
    justify-content: space-between;
    background: var(--beige-clair);
    animation: panier-proposition-entree 0.25s ease;
}

.panier-proposition.is-chargement {
    opacity: 0.6;
    pointer-events: none;
}

.panier-proposition-texte {
    flex: 1 1 18rem;
}

.panier-proposition-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@keyframes panier-proposition-entree {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Photos réelles des exemplaires (récapitulatif en fin de liste, visionneuse : modules/photos-reelles) */
.panier-ligne-photos {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: none;
    color: var(--promo-fonce);
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: underline;
    cursor: zoom-in;
}

.panier-photos:empty {
    display: none;
}

.panier-photos {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--or-terne);
    border-radius: 6px;
    background: var(--beige-clair);
}

.panier-photos h2 {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
}

.panier-photos-intro {
    margin: 0 0 0.75rem;
    color: var(--brun-cuir);
    font-size: 0.875rem;
}

.panier-photos-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.panier-photos-article {
    padding: 0.6rem;
    border-radius: 6px;
    background: var(--beige-fonce);
}

.panier-photos-nom {
    font-size: 0.9rem;
}

.panier-photos-legende {
    margin: 2px 0 6px;
    color: var(--brun-cuir);
    font-size: 0.8rem;
}

.panier-photos-vignettes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.panier-photos-vignette {
    position: relative;
    width: 64px;
    height: 64px;
    padding: 0;
    border: 2px solid var(--or);
    border-radius: 6px;
    background: none;
    overflow: hidden;
    cursor: zoom-in;
}

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

.panier-photos-vignette span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(28, 17, 10, 0.6);
    color: var(--white);
    font-weight: 700;
}

.panier-photos-texte {
    margin: 2px 0 6px;
    font-size: 0.85rem;
    font-style: italic;
    white-space: pre-line;
}

/* Page Panier sur grand écran : plus de largeur pour le descriptif des articles (nom, état, options),
   colonne du montant resserrée, options l'une sous l'autre */
.panier-page--liste {
    max-width: 1240px;
}

@media (min-width: 1041px) {
    .panier-page--liste .panier-ligne {
        grid-template-columns: 72px minmax(0, 1fr) 6.5rem 11rem 28px;
    }

    /* Une option par ligne, en tableau serré : libellés alignés, drapeau éventuel, puis le choix */
    .panier-page--liste .panier-ligne-options {
        display: grid;
        grid-template-columns: max-content auto minmax(0, 22rem);
        align-items: center;
        gap: 0.2rem 0.5rem;
        margin: 0.25rem 0 0.1rem;
    }

    .panier-page--liste .panier-option {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: subgrid;
        gap: 0.1rem 0.5rem;
    }

    .panier-page--liste .panier-option-libelle {
        grid-column: 1;
    }

    .panier-page--liste .panier-option-drapeau {
        grid-column: 2;
    }

    .panier-page--liste .panier-option-select {
        grid-column: 3;
        min-width: 0;
    }

    .panier-page--liste .panier-option-aide {
        grid-column: 2 / -1;
    }
}

/* Choix d'une option : largeur minimale lisible quelle que soit la place laissée par la ligne ; faute de place à
   côté du libellé, il passe dessous (sans dépasser la ligne sur un très petit écran) */
.panier-option {
    display: flex;
}

.panier-option-select {
    flex: 0 1 auto;
    min-width: min(12rem, 100%);
}

.panier-option-select select {
    width: 100%;
}

/* Langue de la carte pas encore réalisée (option de langue « à préparer ») */
.panier-option-aide {
    flex-basis: 100%;
    font-size: 0.8rem;
    font-style: italic;
    color: var(--brun-cuir);
}

.panier-option-drapeau {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    object-fit: contain;
}

/* Réservation de la boutique (/commande?reservation=) : mot de la boutique sous le rappel de la date */
.commande-reservation-mot {
    display: block;
    flex-basis: 100%;
    font-style: italic;
}

#panier-reservations {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

#panier-reservations[hidden] {
    display: none;
}

#panier-reservations .panier-alerte {
    margin-bottom: 0;
}

/* --- Google Avis clients (confirmation de commande) --- */
.confirmation-avis {
    margin-top: 1.25rem;
    border-top: 1px dashed rgba(91, 58, 37, 0.35);
    padding-top: 1rem;
}

.confirmation-avis [data-avis-google] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.confirmation-avis small {
    display: block;
    margin-top: 0.5rem;
    opacity: 0.75;
}

/* Impression de carte custom : nom de la carte (lien vers l'éditeur), aperçu en image de la ligne */
.panier-ligne-carte {
    color: var(--rouille);
    font-weight: 700;
}

.panier-ligne-image--carte img {
    object-fit: contain;
}

/* Image jointe à la ligne (valeur d'option « image obligatoire ») */
.panier-ligne-image-jointe {
    display: grid;
    gap: 4px;
    margin-top: 6px;
}

.panier-ligne-image-jointe-zone {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.panier-ligne-image-jointe-zone img {
    max-width: 56px;
    max-height: 56px;
    border-radius: 6px;
}

.panier-ligne-image-jointe.is-manquante .panier-ligne-message-libelle {
    color: var(--rouille);
}

/* Carte custom : détail du prix (création + impression, exemplaires supplémentaires) et verso joint par le client */
.panier-ligne-carte-tarif {
    display: grid;
    gap: 2px;
    margin: 2px 0;
    font-size: 0.875rem;
    color: var(--brun-cuir);
    font-variant-numeric: tabular-nums;
}

/* Texte suivi : prix barré, prix actuel et « (remise par quantité) » restent sur la même ligne */
.carte-tarif-ligne {
    display: block;
}

.carte-tarif-reduction--quantite {
    white-space: nowrap;
}

.carte-tarif-ligne s {
    color: var(--brun-cuir-clair);
}

.carte-tarif-reduction {
    color: var(--promo-fonce);
    font-size: 0.8rem;
    font-weight: 700;
}

.panier-ligne-carte-verso {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
}

.panier-ligne-carte-verso img {
    width: 24px;
    height: auto;
    border-radius: 3px;
}

.panier-ligne-note--delai {
    font-weight: 700;
    color: var(--rouille);
}