/*
 * Espace participant (Ma commande, historique, export) : mobile d'abord.
 * Tout est limité à body.espace pour ne pas toucher à l'administration (app.css).
 * Une colonne sous 56rem ; au-delà, le choix des vins à gauche et la commande à droite.
 */
.espace {
    --vin: #6d1a36;
    --vin-fonce: #5e1630;
    --vin-clair: #f7ecef;
    --fond: #f6f2ec;
    --surface: #fff;
    --texte: #2b2124;
    --texte-doux: #6e6266;
    --bord: #e7dfd7;
    --ambre: #a6520a;
    --ambre-fond: #fff3e2;
    --vert: #1d6b45;
    --vert-fond: #e6f3eb;
    --bleu-fond: #e8f0f8;
    --rayon: 14px;
    --ombre: 0 1px 2px rgb(60 20 30 / 6%), 0 4px 14px rgb(60 20 30 / 6%);
    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;

    min-height: 100vh;
    margin: 0;
    background: var(--fond);
    color: var(--texte);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 1rem;
    line-height: 1.45;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

.espace *,
.espace *::before,
.espace *::after {
    box-sizing: border-box;
}

.espace .page {
    max-width: 72rem;
    margin: 0 auto;
    padding: 1rem 1rem 6rem;
}

.espace h1,
.espace h2,
.espace h3 {
    font-family: var(--serif);
    line-height: 1.15;
    color: var(--texte);
}

.espace h1 {
    margin: 0;
    font-size: 1.9rem;
    color: var(--vin);
}

.espace p {
    margin: 0;
}

.espace a {
    color: var(--vin);
    text-underline-offset: 2px;
}

.espace .discret,
.espace .aide {
    color: var(--texte-doux);
    font-size: 0.9rem;
}

.espace .aide {
    margin: 0.6rem 0 1rem;
}

.espace .vide {
    padding: 1rem;
    border: 1px dashed var(--bord);
    border-radius: var(--rayon);
    color: var(--texte-doux);
    text-align: center;
}

.espace .retour {
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}

.espace .retour a {
    text-decoration: none;
}

.espace :focus-visible {
    outline: 3px solid color-mix(in srgb, var(--vin) 45%, transparent);
    outline-offset: 2px;
}

/* En-tête : titre et salutation, puis deux onglets pleine largeur */
.espace .entete {
    background: var(--vin-fonce);
    color: #fff;
}

.espace .entete-haut,
.espace .entete-onglets {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1rem;
}

.espace .entete-haut {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.25rem;
}

.espace .entete-titre {
    margin: 0;
    font-family: var(--serif);
    font-size: 1.15rem;
    font-weight: 600;
    white-space: nowrap;
}

.espace .entete-texte {
    overflow: hidden;
    color: rgb(255 255 255 / 80%);
    font-size: 0.85rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.espace .entete-onglets {
    display: flex;
}

.espace .entete-onglets a {
    flex: 1;
    padding: 0.7rem 0.5rem;
    border-bottom: 3px solid transparent;
    color: rgb(255 255 255 / 75%);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.espace .entete-onglets a[aria-current="page"] {
    border-bottom-color: #fff;
    color: #fff;
}

/* Messages */
.espace .alerte {
    margin: 0 0 1rem;
    padding: 0.75rem 0.9rem;
    border: 0;
    border-radius: 10px;
    font-size: 0.95rem;
}

.espace .alerte-succes { background: var(--vert-fond); color: var(--vert); }
.espace .alerte-info { background: var(--bleu-fond); color: #1d4f80; }
.espace .alerte-erreur { background: #fdecea; color: #a12020; }
.espace .alerte-avertissement { background: var(--ambre-fond); color: var(--ambre); }

.espace .alerte-avertissement::before {
    content: "⚠ ";
}

/* Boutons : 44 px de haut au moins (cible tactile) */
.espace .bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.75rem;
    padding: 0.55rem 1.1rem;
    border: 1.5px solid var(--vin);
    border-radius: 999px;
    background: var(--vin);
    color: #fff;
    font: inherit;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
}

.espace .bouton:active {
    transform: scale(0.98);
}

.espace .bouton-secondaire {
    background: var(--surface);
    color: var(--vin);
}

.espace .bouton-large {
    width: 100%;
    min-height: 3.1rem;
    font-size: 1.05rem;
}

.espace .bouton[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Numéro de lot */
.espace .numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4rem;
    height: 1.6rem;
    padding: 0 0.4rem;
    border-radius: 6px;
    background: var(--vin-clair);
    color: var(--vin);
    font-size: 0.85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.espace .pastille {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--vin);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Pages simples (accueil, lien invalide, aucune commande) */
.espace .message-page {
    max-width: 28rem;
    margin: 2rem auto;
    padding: 2rem 1.25rem;
    border-radius: var(--rayon);
    background: var(--surface);
    box-shadow: var(--ombre);
    text-align: center;
}

.espace .message-page > * + * {
    margin-top: 0.8rem;
}

.espace .message-icone {
    font-size: 2.5rem;
    line-height: 1;
}

/* En-tête de la campagne */
.espace .campagnes {
    display: flex;
    gap: 0.5rem;
    margin: 0 -1rem 1rem;
    padding: 0 1rem 0.25rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.espace .campagnes a {
    flex: none;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--bord);
    border-radius: 999px;
    background: var(--surface);
    font-size: 0.9rem;
    text-decoration: none;
}

.espace .campagnes a[aria-current="page"] {
    border-color: var(--vin);
    background: var(--vin);
    color: #fff;
}

.espace .campagne-entete {
    margin: 0.25rem 0 1.25rem;
    text-align: center;
}

.espace .echeance {
    display: block;
    margin-top: 0.5rem;
    padding: 0.35rem 0.75rem;
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--ombre);
    font-size: 0.9rem;
}

.espace .echeance::before {
    content: "⏰ ";
}

.espace .echeance-close {
    background: var(--bleu-fond);
    box-shadow: none;
}

.espace .echeance-close::before {
    content: "🔒 ";
}

.espace .documents {
    display: flex;
    gap: 0.5rem;
    margin: 0.75rem 0 0;
    padding: 0 0 0.25rem;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}

.espace .documents li {
    flex: 1 0 auto;
}

/* Sur mobile, les boutons se partagent toute la largeur, sur une seule ligne */
.espace .documents a {
    display: block;
    text-align: center;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--bord);
    border-radius: 999px;
    background: var(--surface);
    font-size: min(0.85rem, 3.5vw);
    text-decoration: none;
    white-space: nowrap;
}

/* Disposition */
.espace .disposition {
    display: grid;
    gap: 1.5rem;
}

.espace .colonne-choix,
.espace .colonne-commande {
    min-width: 0;
}

.espace .titre-section {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    font-size: 1.3rem;
}

.espace .compteur {
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: var(--ambre-fond);
    color: var(--ambre);
    font-family: system-ui, sans-serif;
    font-size: 0.8rem;
}

/* Lots à compléter : carrousel horizontal */
.espace .encart {
    margin-bottom: 1.5rem;
}

.espace .carrousel {
    display: flex;
    gap: 0.75rem;
    margin: 0 -1rem;
    padding: 0.25rem 1rem 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1rem;
    scrollbar-width: none;
}

.espace .carte-lot {
    display: flex;
    flex: 0 0 min(82%, 18rem);
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    border-radius: var(--rayon);
    background: var(--surface);
    box-shadow: var(--ombre);
    scroll-snap-align: start;
}

.espace .carte-lot-nom {
    font-weight: 600;
}

.espace .carte-lot form {
    margin-top: auto;
    padding-top: 0.25rem;
}

.espace .carte-lot .bouton-large {
    font-size: 1rem;
    white-space: nowrap;
}

.espace .carte-lot .vignette-page {
    width: 100%;
    height: 9rem;
    border: 0;
    border-radius: 8px;
    object-fit: cover;
    object-position: top;
}

.espace .jauge {
    height: 0.5rem;
    border-radius: 999px;
    background: #efe8e1;
    overflow: hidden;
}

.espace .jauge span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #e07b1a;
}

.espace .jauge-texte {
    font-size: 0.9rem;
}

/* Recherche, collée en haut de l'écran pendant qu'on parcourt le catalogue */
/* Zone d'ajout : carte mise en évidence, pour qu'on la trouve d'un coup d'œil. */
.espace .recherche {
    padding: 1rem;
    border: 2px solid var(--vin);
    border-radius: var(--rayon);
    background: var(--vin-clair);
    box-shadow: var(--ombre);
}

.espace .recherche .titre-section {
    margin-bottom: 0.25rem;
    color: var(--vin);
}

.espace .recherche-icone {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--vin);
    color: #fff;
    font-family: system-ui, sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
}

.espace .recherche-aide {
    margin: 0 0 0.25rem;
    color: var(--texte-doux);
    font-size: 0.9rem;
}

.espace .champ-recherche-conteneur {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0 -1rem;
    padding: 0.5rem 1rem;
    background: var(--vin-clair);
}

.espace .champ-recherche {
    width: 100%;
    min-height: 3rem;
    padding: 0.7rem 1rem 0.7rem 2.75rem;
    border: 2px solid var(--vin);
    border-radius: 999px;
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6266' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 1rem center / 1.15rem;
    color: var(--texte);
    font: inherit;
    font-size: 1rem; /* 16 px : pas de zoom automatique sur iOS */
    box-shadow: var(--ombre);
    appearance: none;
}

.espace .champ-recherche:focus {
    outline: 3px solid rgb(109 26 54 / 25%);
    outline-offset: 1px;
}

/* Catalogue */
.espace .catalogue {
    margin-top: 0.5rem;
}

.espace .catalogue > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 3rem;
    padding: 0.75rem 1rem;
    border-radius: var(--rayon);
    background: var(--surface);
    box-shadow: var(--ombre);
    color: var(--vin);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

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

.espace .catalogue > summary::after,
.espace .lot-catalogue summary::after {
    content: "";
    flex: none;
    width: 0.55rem;
    height: 0.55rem;
    margin-left: 0.75rem;
    border-right: 2px solid currentcolor;
    border-bottom: 2px solid currentcolor;
    margin-top: -0.3rem;
    transform: rotate(45deg);
    transition: transform 0.15s;
}

.espace details[open] > summary::after {
    margin-top: 0.3rem;
    transform: rotate(-135deg);
}

.espace .catalogue[open] > summary {
    margin-bottom: 0.5rem;
}

.espace .catalogue .vide {
    margin-top: 0.75rem;
}

.espace .categorie {
    margin-top: 1rem;
}

.espace .categorie h3 {
    margin: 0 0 0.5rem 0.25rem;
    color: var(--texte-doux);
    font-family: system-ui, sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.espace .lots-catalogue {
    margin: 0;
    padding: 0;
    border-radius: var(--rayon);
    background: var(--surface);
    box-shadow: var(--ombre);
    list-style: none;
    overflow: hidden;
}

.espace .lot-catalogue + .lot-catalogue {
    border-top: 1px solid var(--bord);
}

.espace .lot-catalogue summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.5rem;
    padding: 0.7rem 1rem;
    color: var(--texte-doux);
    cursor: pointer;
    list-style: none;
}

.espace .lot-catalogue .lot-nom {
    flex: 1;
    min-width: 0;
    color: var(--texte);
}

.espace .lot-catalogue .lot-prix {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.espace .lot-choisi {
    box-shadow: inset 3px 0 0 var(--vin);
}

.espace .lot-catalogue details[open] {
    background: #fcfaf8;
}

.espace .fiche-lot {
    display: grid;
    gap: 0.75rem;
    padding: 0 1rem 1rem;
    font-size: 0.95rem;
}

.espace .fiche-groupe {
    color: var(--ambre);
}

.espace .fiche-actions {
    display: grid;
    gap: 0.6rem;
}

.espace .fiche-actions .bouton {
    width: 100%;
}

.espace .apercu-page {
    margin: 0;
}

/* Image cliquable : ouvre la page en plein écran pour en lire les détails */
.espace .apercu-agrandir {
    position: relative;
    display: block;
    width: 100%;
    max-width: 40rem;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

.espace .apercu-agrandir img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--bord);
    border-radius: 8px;
}

.espace .apercu-agrandir[hidden] {
    display: none;
}

.espace .apercu-loupe {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: rgb(43 33 36 / 75%);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Plein écran : l'image garde sa taille réelle et défile dans les deux sens */
.espace .apercu-plein-ecran {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: #fff;
    overflow: auto;
    overscroll-behavior: contain;
}

.espace .apercu-plein-ecran::backdrop {
    background: rgb(0 0 0 / 70%);
}

.espace .apercu-plein-ecran img {
    display: block;
    width: auto;
    max-width: none;
    min-width: 100%;
    height: auto;
}

.espace .apercu-fermer {
    position: fixed;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 1;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 50%;
    background: var(--vin);
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
}

.espace .apercu-page figcaption {
    margin-top: 0.4rem;
    font-size: 0.9rem;
}

/* Sélecteur de quantité − / + */
.espace .quantite {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--bord);
    border-radius: 999px;
    background: var(--surface);
}

.espace .quantite-bouton {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--vin);
    font: inherit;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
}

.espace .quantite-bouton:active {
    background: var(--vin-clair);
}

.espace .quantite-bouton[disabled] {
    opacity: 0.3;
    cursor: not-allowed;
}

.espace .quantite-valeur {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 4.5rem;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.espace .quantite-valeur small {
    color: var(--texte-doux);
    font-size: 0.78rem;
}

/* Ma commande */
.espace .ma-commande {
    padding: 1.1rem 1rem 1.25rem;
    border-radius: var(--rayon);
    background: var(--surface);
    box-shadow: var(--ombre);
    scroll-margin-top: 1rem;
}

.espace .lignes-commande {
    margin: 0;
    padding: 0;
    list-style: none;
}

.espace .ligne-commande {
    display: grid;
    gap: 0.6rem;
    padding: 0.9rem 0;
    border-top: 1px solid var(--bord);
}

.espace .ligne-partielle {
    margin: 0 -1rem;
    padding-inline: 1rem;
    background: linear-gradient(90deg, #e07b1a 3px, var(--ambre-fond) 3px);
}

.espace .ligne-retiree {
    display: block;
    color: var(--texte-doux);
    font-size: 0.9rem;
}

.espace .ligne-tete {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.espace .ligne-nom {
    font-weight: 600;
}

.espace .ligne-meta {
    color: var(--texte-doux);
    font-size: 0.85rem;
}

.espace .ligne-pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.espace .ligne-droite {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.espace .montant {
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

.espace .lien-retirer {
    min-height: 2rem;
    padding: 0.25rem 0;
    border: 0;
    background: none;
    color: var(--texte-doux);
    font: inherit;
    font-size: 0.85rem;
    text-decoration: underline;
    cursor: pointer;
}

.espace .avertissement {
    margin: 0;
    color: var(--ambre);
    font-size: 0.88rem;
}

.espace .avertissement::before {
    content: "⚠ ";
}

.espace .total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0 1rem;
    padding-top: 1rem;
    border-top: 2px solid var(--texte);
    font-size: 1.1rem;
}

.espace .total small {
    margin-left: 0.4rem;
    color: var(--texte-doux);
    font-size: 0.9rem;
}

.espace .total strong {
    font-family: var(--serif);
    font-size: 1.6rem;
    font-variant-numeric: tabular-nums;
}

.espace .ma-commande .alerte {
    margin: 0 0 0.75rem;
}

.espace .ma-commande .aide {
    margin: 0.5rem 0 1rem;
    text-align: center;
}

.espace .paiement-details {
    margin-top: 0.75rem;
    border: 1px solid var(--bord);
    border-radius: 10px;
}

.espace .paiement-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 2.75rem;
    padding: 0.6rem 0.9rem;
    color: var(--vin);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.espace .paiement-details summary::after {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    margin-top: -0.3rem;
    border-right: 2px solid currentcolor;
    border-bottom: 2px solid currentcolor;
    transform: rotate(45deg);
}

.espace .paiement-details[open] summary::after {
    margin-top: 0.3rem;
    transform: rotate(-135deg);
}

.espace .paiement-details > :not(summary) {
    margin: 0 0.9rem 0.9rem;
}

.espace .paiement-details,
.espace .export {
    container-type: inline-size;
}

/* Étroit : libellé au-dessus de la valeur, pour laisser toute la largeur à l'IBAN */
.espace .paiement {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.1rem 1rem;
}

.espace .paiement dt {
    color: var(--texte-doux);
    font-size: 0.85rem;
}

.espace .paiement dd {
    margin: 0 0 0.5rem;
    overflow-wrap: anywhere;
}

/* IBAN et BIC sur une seule ligne : la taille suit la largeur disponible */
.espace .paiement code {
    font-size: min(0.9rem, 4.3cqi);
    white-space: nowrap;
}

@container (min-width: 26rem) {
    .espace .paiement {
        grid-template-columns: max-content 1fr;
    }

    .espace .paiement dt {
        color: inherit;
        font-size: inherit;
    }

    .espace .paiement dd {
        margin: 0;
    }
}

/* Barre récapitulative fixée en bas de l'écran (mobile uniquement) */
.espace .barre-commande {
    position: fixed;
    right: 0.75rem;
    bottom: calc(0.75rem + env(safe-area-inset-bottom));
    left: 0.75rem;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.25rem;
    padding: 0.6rem 0.75rem 0.6rem 1.1rem;
    border-radius: 999px;
    background: var(--vin-fonce);
    box-shadow: 0 6px 24px rgb(60 20 30 / 35%);
    color: #fff;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.2s, opacity 0.2s;
}

.espace .barre-commande-masquee {
    opacity: 0;
    pointer-events: none;
    transform: translateY(150%);
}

.espace .barre-commande-action {
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    background: rgb(255 255 255 / 16%);
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Tableaux (historique, export) : une carte par ligne sur mobile */
.espace .table-cartes {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.espace .table-cartes thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.espace .table-cartes tbody,
.espace .table-cartes tfoot {
    display: grid;
    gap: 0.75rem;
}

.espace .table-cartes tbody tr {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 0.75rem;
    padding: 0.9rem 1rem;
    border-radius: var(--rayon);
    background: var(--surface);
    box-shadow: var(--ombre);
}

.espace .table-cartes td,
.espace .table-cartes th {
    padding: 0;
    text-align: left;
}

.espace .table-cartes tbody td {
    display: block;
    grid-column: 1 / -1;
}

.espace .table-cartes tbody td[data-label]::before {
    content: attr(data-label);
    float: left;
    color: var(--texte-doux);
    font-size: 0.85rem;
}

.espace .table-cartes td.nombre {
    text-align: right;
}

.espace .table-cartes td.nombre br {
    display: none;
}

.espace .table-cartes td.nombre small {
    margin-left: 0.3rem;
    color: var(--texte-doux);
}

.espace .table-cartes .cellule-numero {
    grid-column: 1;
}

.espace .table-cartes .cellule-numero + .cellule-titre {
    grid-column: 2;
}

.espace .table-cartes .cellule-titre {
    margin-bottom: 0.35rem;
    font-weight: 600;
}

.espace .table-saisons .cellule-titre a {
    font-family: var(--serif);
    font-size: 1.15rem;
}

.espace .table-cartes .cellule-action {
    display: block;
    margin-top: 0.4rem;
}

.espace .table-cartes .cellule-action .bouton {
    width: 100%;
}

.espace .table-cartes .deja {
    color: var(--vert);
}

.espace .table-cartes tfoot tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1rem;
    padding: 1rem;
    border-radius: var(--rayon);
    background: var(--vin-fonce);
    color: #fff;
}

.espace .table-cartes tfoot th {
    margin-right: auto;
    font-family: var(--serif);
    font-size: 1.15rem;
}

.espace .table-cartes tfoot strong {
    font-size: 1.2rem;
}

.espace .table-cartes .cellule-vide {
    display: none;
}

.espace .table-cartes small.incomplet {
    color: var(--ambre);
}

/* Export imprimable */
.espace .export-actions {
    display: grid;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.espace .export h1 {
    margin-bottom: 0.4rem;
}

.espace .export-sous-titre {
    margin-bottom: 1.25rem;
    color: var(--texte-doux);
}

.espace .export .alerte {
    margin-top: 1rem;
}

.espace .export h2 {
    margin: 1.5rem 0 0.75rem;
    font-size: 1.3rem;
}

.espace .export .paiement {
    padding: 1rem;
    border-radius: var(--rayon);
    background: var(--surface);
    box-shadow: var(--ombre);
}

.espace .export .paiement-texte {
    margin-top: 0.75rem;
}

/* Ordinateur et tablette en paysage */
@media (min-width: 40rem) {
    .espace .page {
        padding: 1.5rem 1.5rem 3rem;
    }

    .espace h1 {
        font-size: 2.3rem;
    }

    .espace .entete-onglets {
        gap: 0.5rem;
    }

    .espace .entete-onglets a {
        flex: none;
        padding-inline: 1rem;
    }

    .espace .carrousel,
    .espace .campagnes,
    .espace .documents {
        margin-inline: 0;
        padding-inline: 0;
    }

    .espace .campagne-entete {
        text-align: left;
    }

    .espace .echeance {
        display: inline-block;
    }

    .espace .documents li {
        flex: none;
    }

    .espace .carte-lot {
        flex-basis: 17.5rem;
    }

    /* Retour au vrai tableau */
    .espace .table-cartes {
        border-collapse: separate;
        border-spacing: 0;
        border-radius: var(--rayon);
        background: var(--surface);
        box-shadow: var(--ombre);
        overflow: hidden;
    }

    .espace .table-cartes thead {
        position: static;
        display: table-header-group;
        width: auto;
        height: auto;
        clip-path: none;
    }

    .espace .table-cartes tbody { display: table-row-group; }
    .espace .table-cartes tfoot { display: table-footer-group; }

    .espace .table-cartes tbody tr,
    .espace .table-cartes tfoot tr {
        display: table-row;
        border-radius: 0;
        background: none;
        box-shadow: none;
        color: inherit;
    }

    .espace .table-cartes th,
    .espace .table-cartes td,
    .espace .table-cartes tbody td,
    .espace .table-cartes .cellule-action,
    .espace .table-cartes .cellule-vide {
        display: table-cell;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--bord);
        vertical-align: top;
    }

    .espace .table-cartes thead th {
        background: #faf6f2;
        color: var(--texte-doux);
        font-size: 0.8rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .espace .table-cartes th.nombre,
    .espace .table-cartes td.nombre {
        text-align: right;
    }

    .espace .table-cartes tbody td[data-label]::before {
        content: none;
    }

    .espace .table-cartes td.nombre br {
        display: inline;
    }

    .espace .table-cartes td.nombre small {
        margin: 0;
    }

    .espace .table-cartes .cellule-titre {
        margin: 0;
        font-weight: 400;
    }

    .espace .table-cartes .cellule-action .bouton {
        width: auto;
        min-height: 2.25rem;
        padding-block: 0.3rem;
        font-size: 0.9rem;
    }

    .espace .table-cartes tfoot tr {
        background: #faf6f2;
    }

    .espace .table-cartes tfoot th,
    .espace .table-cartes tfoot td,
    .espace .table-cartes tfoot .cellule-vide {
        border-bottom: 0;
        font-family: inherit;
        font-size: 1rem;
    }

    .espace .export-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .espace .export-actions .retour {
        margin: 0;
    }

    .espace .export-actions .bouton-large {
        width: auto;
    }
}

@media (min-width: 56rem) {
    .espace .disposition {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
        align-items: start;
        gap: 2rem;
    }

    .espace .colonne-commande {
        position: sticky;
        top: 1rem;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
        border-radius: var(--rayon);
        scrollbar-width: thin;
    }

    .espace .barre-commande {
        display: none;
    }

    .espace .recherche {
        padding: 1.25rem;
    }

    .espace .champ-recherche-conteneur {
        margin: 0;
        padding-inline: 0;
    }
}

@media (hover: hover) {
    .espace .lot-catalogue summary:hover {
        background: #fcfaf8;
    }

    .espace .quantite-bouton:hover {
        background: var(--vin-clair);
    }

    .espace .bouton:hover {
        background: var(--vin-fonce);
        color: #fff;
    }

    .espace .bouton-secondaire:hover {
        background: var(--vin-clair);
        color: var(--vin);
    }
}

@media (prefers-reduced-motion: reduce) {
    .espace * {
        transition: none !important;
    }
}

@media print {
    .espace {
        background: #fff;
    }

    .espace .page {
        max-width: none;
        padding: 0;
    }

    .espace .entete,
    .espace .ecran-seulement,
    .espace .barre-commande {
        display: none;
    }

    .espace .export .alerte {
        display: block;
        padding: 0;
        background: none;
        color: #000;
    }

    .espace .export h1,
    .espace .table-cartes tfoot tr {
        color: #000;
    }

    .espace .numero {
        padding: 0;
        background: none;
        color: #000;
    }

    .espace .table-cartes,
    .espace .export .paiement {
        box-shadow: none;
    }

    .espace .table-cartes thead th,
    .espace .table-cartes tfoot tr {
        background: none;
        color: #000;
    }
}