/**
 * ENCHERES MYSO -- feuille de style
 * ================================
 *
 * ECRITE POUR LE TELEPHONE D'ABORD
 * Les regles de base valent pour un petit ecran ; les media queries
 * ajoutent ce qui n'a de sens qu'au-dela. C'est l'ordre inverse de
 * l'habitude, et c'est le bon : l'ecran etroit est la contrainte, pas
 * l'exception.
 *
 * CHARTE
 *   terracotta       #C4674A
 *   terracotta fonce #A85440
 *   creme            #FAF8F5
 *   brun texte       #3D2817
 *   gris texte       #5A5A52
 *   bordure          #EADFD6
 *
 * ACCESSIBILITE
 *   - toutes les cibles tactiles font 44 px de haut minimum
 *   - le champ de saisie est en 16 px : en dessous, les navigateurs
 *     mobiles zooment a la mise au point et decalent toute la page
 *   - les contrastes respectent le niveau AA
 */

.ench-page {
    max-width: 1080px;
    margin: 0 auto;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #3D2817;
}

/* ====================================================================
   EN-TETE
   ==================================================================== */

.ench-entete {
    text-align: center;
    padding: 8px 0 20px;
}

.ench-theme {
    margin: 0 0 6px;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #A85440;
}

.ench-titre {
    margin: 0 0 14px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 1.15;
    color: #3D2817;
}

.ench-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

.ench-tag {
    display: inline-block;
    padding: 5px 12px;
    background: #FAF8F5;
    border: 1px solid #EADFD6;
    border-radius: 14px;
    font-size: .78rem;
    color: #5A5A52;
}

.ench-tag-valeur {
    background: #FDF2EE;
    border-color: #E8C4B0;
    color: #A85440;
    font-weight: 600;
}

/* -- Le j'aime -- */
.ench-like {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 32px;
    padding: 5px 13px;
    background: #fff;
    border: 1px solid #EADFD6;
    border-radius: 16px;
    font-family: inherit;
    font-size: .82rem;
    color: #5A5A52;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.ench-like:hover { border-color: #D89B84; }

.ench-like-actif {
    background: #FDF2EE;
    border-color: #C4674A;
    color: #A85440;
    font-weight: 600;
}

.ench-like-coeur { font-size: 1rem; line-height: 1; }
.ench-like-actif .ench-like-coeur::before { content: '\2665'; }
.ench-like-actif .ench-like-coeur { font-size: 0; }
.ench-like-actif .ench-like-coeur::before { font-size: 1rem; }

/* ====================================================================
   LE BLOC D'ENCHERE

   Place haut dans le document : sur un ecran de 6 pouces, ce qui est
   en bas n'est jamais vu.
   ==================================================================== */

.ench-bloc {
    background: linear-gradient(135deg, #C4674A, #A85440);
    color: #fff;
    border-radius: 16px;
    padding: 22px 18px;
    margin-bottom: 26px;
}

/* -- Compte a rebours -- */
.ench-rebours {
    text-align: center;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,.22);
}

.ench-rebours-label {
    display: block;
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.92);
    margin-bottom: 4px;
}

.ench-rebours-valeur {
    display: block;
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.1;
    /* Chiffres a largeur fixe : sans cela, le compte a rebours
       tressaute a chaque seconde. */
    font-variant-numeric: tabular-nums;
}

.ench-rebours-fini .ench-rebours-valeur {
    font-size: 1.15rem;
    font-weight: 600;
    opacity: .9;
}

/* Derniere heure : le rouge n'est pas necessaire, l'animation suffit
   et reste lisible pour les daltoniens. */
.ench-rebours-urgent .ench-rebours-valeur {
    animation: ench-pulse 1.6s ease-in-out infinite;
}

@keyframes ench-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .62; }
}

@media (prefers-reduced-motion: reduce) {
    .ench-rebours-urgent .ench-rebours-valeur { animation: none; }
}

/* -- Montants -- */
.ench-montants {
    display: flex;
    gap: 14px;
    padding: 16px 0;
}

.ench-montant {
    flex: 1;
    text-align: center;
}

.ench-montant-label {
    display: block;
    font-size: .74rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255,255,255,.92);
    margin-bottom: 3px;
}

.ench-montant-valeur {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.ench-montant-valeur em {
    font-style: normal;
    font-size: .8rem;
    font-weight: 500;
    margin-left: 3px;
    opacity: .8;
}

/* -- Solde -- */
.ench-solde {
    background: rgba(255,255,255,.16);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: .88rem;
    text-align: center;
}

/* -- Formulaire de mise -- */
.ench-form-label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    margin-bottom: 7px;
}

.ench-form-ligne {
    display: flex;
    gap: 9px;
}

.ench-input {
    flex: 1;
    min-width: 0;
    height: 48px;
    padding: 0 14px;
    border: none;
    border-radius: 24px;
    /* 16px imperatif : en dessous, les navigateurs mobiles zooment a la
       mise au point et decalent toute la page. */
    font-size: 16px;
    font-family: inherit;
    color: #3D2817;
    text-align: center;
    font-weight: 600;
    -webkit-appearance: none;
    appearance: none;
}

/* Les fleches natives volent de la place sur un champ etroit. */
.ench-input::-webkit-outer-spin-button,
.ench-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.ench-input[type=number] { -moz-appearance: textfield; }

.ench-input:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.ench-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 26px;
    background: #fff;
    color: #A85440;
    border: none;
    border-radius: 24px;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform .12s;
}

.ench-btn:hover { color: #A85440; text-decoration: none; }
.ench-btn:active { transform: scale(.97); }

.ench-btn-miser { flex-shrink: 0; }

.ench-btn[disabled] {
    opacity: .55;
    cursor: not-allowed;
}

.ench-aide {
    margin: 9px 0 0;
    font-size: .76rem;
    line-height: 1.45;
    color: rgba(255,255,255,.92);
    text-align: center;
}

/* -- Retour apres une mise -- */
.ench-retour {
    margin-top: 12px;
    padding: 0;
    font-size: .86rem;
    line-height: 1.5;
    text-align: center;
}

.ench-retour:not(:empty) {
    padding: 11px 14px;
    border-radius: 10px;
    background: rgba(255,255,255,.18);
}

.ench-retour-erreur {
    background: rgba(0,0,0,.22) !important;
}

/* -- Invitation faite a une visiteuse non connectee --

   Un fond blanc sur le bloc terracotta : le texte devient franchement
   lisible, la ou du blanc sur terracotta passait sous le seuil.

   C'est aussi le moment ou se joue la conversion : cette carte doit se
   detacher du reste du bloc, pas s'y fondre. */
.ench-invite {
    background: #fff;
    border-radius: 12px;
    padding: 18px 16px;
    text-align: center;
}

.ench-invite-fort {
    margin: 0 0 10px;
    font-size: 1rem;
    line-height: 1.5;
    color: #3D2817;
}

.ench-invite-fort strong {
    color: #A85440;
    font-weight: 700;
}

.ench-invite-texte {
    margin: 0 0 16px;
    font-size: .85rem;
    line-height: 1.55;
    color: #5A5A52;
}

.ench-invite .ench-btn {
    background: #C4674A;
    color: #fff !important;
    width: 100%;
}

.ench-invite .ench-btn:hover {
    background: #A85440;
    color: #fff !important;
}

.ench-invite-lien {
    margin: 12px 0 0;
    font-size: .82rem;
    color: #7A7268;
}

.ench-invite-lien a {
    color: #A85440;
    font-weight: 600;
    text-decoration: underline;
}

/* -- Messages d'etat -- */
.ench-message {
    text-align: center;
    padding: 4px 0;
}

.ench-message p {
    margin: 0 0 10px;
    font-size: .95rem;
    line-height: 1.55;
}

/* CONTRASTE CORRIGE -- 29/08/2026.
   Ce texte etait en blanc a 82 % d'opacite sur fond terracotta : sous le
   seuil de lisibilite, particulierement sur telephone en plein jour.
   Passe a 95 %, il reste discret sans devenir illisible. */
.ench-message-note {
    font-size: .86rem !important;
    color: rgba(255,255,255,.95);
}

/* Le cas central : la cliente n'a pas assez de Coins.

   Fond BLANC et non translucide -- corrige le 29/08/2026. Sur fond
   terracotta, un texte blanc passait sous le seuil de lisibilite,
   particulierement sur telephone en plein jour.

   C'est le moment ou elle decide de deposer ou non : ce bloc doit se
   lire sans effort. */
.ench-message-manque {
    background: #fff;
    border-radius: 12px;
    padding: 18px 16px;
}

.ench-message-manque p { color: #3D2817; }
.ench-message-manque strong { color: #A85440; }

.ench-message-manque .ench-message-note {
    color: #5A5A52 !important;
}

.ench-message-manque .ench-btn {
    background: #C4674A;
    color: #fff !important;
    width: 100%;
    margin-top: 4px;
}

.ench-message-manque .ench-btn:hover {
    background: #A85440;
    color: #fff !important;
}

/* Meme traitement pour la personne en tete : le message doit se lire
   d'un coup d'oeil, c'est une bonne nouvelle. */
.ench-message-tete {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
}

.ench-message-tete p { color: #3D2817; }
.ench-message-tete strong { color: #6B8E5A; }

.ench-message-tete .ench-message-note {
    color: #5A5A52 !important;
}

/* ====================================================================
   LE LOT
   ==================================================================== */

.ench-h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.4rem;
    font-weight: 500;
    color: #3D2817;
    margin: 0 0 14px;
}

.ench-description {
    font-size: .95rem;
    line-height: 1.65;
    color: #5A5A52;
    margin-bottom: 18px;
}

.ench-lot,
.ench-lookbook,
.ench-historique,
.ench-regles {
    margin-bottom: 30px;
}

.ench-pieces {
    display: grid;
    /* Sur telephone : deux colonnes. Une seule gaspillerait la largeur,
       trois rendraient les photos illisibles. */
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ench-piece {
    background: #FAF8F5;
    border: 1px solid #EADFD6;
    border-radius: 12px;
    overflow: hidden;
}

.ench-piece-photo {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: zoom-in;
}

.ench-piece-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.ench-piece-texte { padding: 10px 12px 12px; }

.ench-piece-nom {
    margin: 0 0 3px;
    font-size: .84rem;
    font-weight: 600;
    line-height: 1.3;
    color: #3D2817;
}

.ench-piece-prix {
    margin: 0;
    font-size: .82rem;
    color: #A85440;
    font-weight: 600;
}

/* ====================================================================
   J'AIME ET PARTAGE

   Place sous les pieces : c'est la que l'oeil s'arrete apres avoir
   regarde le lot, et le moment ou l'envie de le montrer se presente.
   ==================================================================== */

.ench-social {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px;
    background: #FAF8F5;
    border: 1px solid #EADFD6;
    border-radius: 12px;
    margin-bottom: 30px;
}

/* -- Suivre l'enchere --
   Le pas d'engagement entre regarder et jouer. Mis en avant plus que le
   j'aime : c'est lui qui ramene du monde sur la boutique. */
.ench-suivre {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 50px;
    padding: 0 20px;
    background: #C4674A;
    border: none;
    border-radius: 25px;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: background .15s;
}

.ench-suivre:hover { background: #A85440; }

/* Une fois suivi, le bouton s'efface : l'action est faite, il ne doit plus
   attirer l'oeil au detriment du reste. */
.ench-suivre-actif {
    background: #fff;
    border: 1.5px solid #C4674A;
    color: #A85440;
}

.ench-suivre-actif:hover { background: #FDF2EE; }

.ench-suivre-icone { font-size: 1.1rem; line-height: 1; }

.ench-suivre-nb {
    background: rgba(255,255,255,.24);
    padding: 2px 10px;
    border-radius: 12px;
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
}

.ench-suivre-actif .ench-suivre-nb {
    background: #FDF2EE;
    color: #A85440;
}

.ench-suivre-note {
    margin: -8px 0 0;
    font-size: .8rem;
    line-height: 1.45;
    color: #7A7268;
    text-align: center;
}

/* -- J'aime -- */
.ench-jaime {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    /* 48px : cible tactile confortable, plus large que le minimum de 44. */
    min-height: 48px;
    padding: 0 20px;
    background: #fff;
    border: 1.5px solid #EADFD6;
    border-radius: 24px;
    font-family: inherit;
    font-size: .92rem;
    font-weight: 600;
    color: #5A5A52;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.ench-jaime:hover { border-color: #D89B84; }

.ench-jaime-actif {
    background: #FDF2EE;
    border-color: #C4674A;
    color: #A85440;
}

.ench-jaime-icone { font-size: 1.2rem; line-height: 1; }

/* Coeur plein une fois aime : le changement de forme se voit mieux qu'un
   simple changement de couleur, et reste lisible pour les daltoniens. */
.ench-jaime-actif .ench-jaime-icone { font-size: 0; }
.ench-jaime-actif .ench-jaime-icone::before {
    content: '\2665';
    font-size: 1.2rem;
}

.ench-jaime-nb {
    background: #EADFD6;
    color: #5A5A52;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
}

.ench-jaime-actif .ench-jaime-nb { background: #C4674A; color: #fff; }

/* -- Partage -- */
.ench-partage {
    padding-top: 14px;
    border-top: 1px solid #EADFD6;
}

.ench-partage-label {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #7A7268;
    margin-bottom: 10px;
    text-align: center;
}

.ench-partage-liens {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.ench-partage-lien {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 16px;
    background: #fff;
    border: 1px solid #EADFD6;
    border-radius: 21px;
    font-family: inherit;
    font-size: .85rem;
    font-weight: 600;
    color: #5A5A52;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

.ench-partage-lien:hover {
    border-color: #C4674A;
    color: #A85440;
    text-decoration: none;
}

/* WhatsApp en premier et en couleur : c'est par la qu'on envoie une piece
   a une amie, et de loin le canal le plus utilise. */
.ench-partage-wa {
    background: #25D366;
    border-color: #25D366;
    color: #fff;
}

.ench-partage-wa:hover {
    background: #1FB955;
    border-color: #1FB955;
    color: #fff;
}

/* -- Concurrence -- */
.ench-concurrence {
    margin: 12px 0 0;
    padding: 9px 12px;
    background: rgba(255,255,255,.18);
    border-radius: 10px;
    font-size: .88rem;
    text-align: center;
    color: #fff;
}

.ench-concurrence strong { font-weight: 700; }

/* ====================================================================
   VIDEO

   Le cadre garde le rapport 16/9 quelle que soit la largeur : sans lui,
   l'iframe aurait une hauteur fixe et se deformerait sur telephone.
   ==================================================================== */

.ench-video { margin-bottom: 30px; }

.ench-video-cadre {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background: #1D140C;
}

.ench-video-cadre iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Repli pour les navigateurs anciens qui ignorent aspect-ratio. */
@supports not (aspect-ratio: 16 / 9) {
    .ench-video-cadre {
        height: 0;
        padding-bottom: 56.25%;
    }
}

/* ====================================================================
   LOOKBOOK
   ==================================================================== */

.ench-galerie {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ench-galerie-photo {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    border-radius: 10px;
    overflow: hidden;
    cursor: zoom-in;
}

.ench-galerie-photo img {
    display: block;
    width: 100%;
    height: auto;
}

.ench-galerie-legende {
    margin: 6px 0 0;
    font-size: .78rem;
    line-height: 1.4;
    color: #7A7268;
}

/* ====================================================================
   HISTORIQUE
   ==================================================================== */

.ench-mises {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #EADFD6;
    border-radius: 12px;
    overflow: hidden;
}

.ench-mise {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    font-size: .88rem;
    border-bottom: 1px solid #F2EAE3;
}

.ench-mise:last-child { border-bottom: none; }

/* La mise en tete se distingue : c'est celle qui compte. */
.ench-mise:first-child {
    background: #FDF2EE;
    font-weight: 600;
}

.ench-mise-qui { color: #5A5A52; }
.ench-mise-combien {
    color: #A85440;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ====================================================================
   LE PRINCIPE
   ==================================================================== */

.ench-regles-liste {
    margin: 0;
    padding-left: 20px;
    counter-reset: ench;
}

.ench-regles-liste li {
    margin-bottom: 12px;
    font-size: .9rem;
    line-height: 1.6;
    color: #5A5A52;
}

.ench-regles-liste strong { color: #3D2817; }
.ench-regles-liste a { color: #A85440; text-decoration: underline; }

/* ====================================================================
   LES RESEAUX

   Place en dernier : le visiteur venu d'un partage a d'abord vu le lot.
   C'est le moment ou on lui propose de rester en contact.

   Chaque reseau porte SA couleur : on reconnait Instagram a son rose,
   YouTube a son rouge, sans avoir besoin d'un logo. C'est plus leger
   qu'un jeu d'icones a charger, et ca reste identifiable.
   ==================================================================== */

.ench-reseaux {
    background: #FAF8F5;
    border: 1px solid #EADFD6;
    border-radius: 12px;
    padding: 22px 18px;
    margin-bottom: 30px;
}

.ench-reseaux-texte {
    margin: 0 0 18px;
    font-size: .9rem;
    line-height: 1.6;
    color: #5A5A52;
}

.ench-reseaux-liste {
    display: grid;
    /* Deux colonnes sur telephone : cinq reseaux empiles feraient une
       colonne interminable. */
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
}

.ench-reseau {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    /* 52px : cible tactile confortable. Le sous-titre ayant disparu, une
       seule ligne de texte suffit. */
    min-height: 52px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #EADFD6;
    border-radius: 10px;
    text-decoration: none !important;
    transition: border-color .15s, transform .12s;
}

.ench-reseau:hover { transform: translateY(-2px); }
.ench-reseau:active { transform: none; }

/* Le logo prend la couleur du reseau des le repos : c'est ce qui le rend
   reconnaissable au premier coup d'oeil, sans avoir a lire le nom. */
.ench-reseau-logo {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.ench-reseau-logo svg { display: block; width: 22px; height: 22px; }

/* Le nom ne doit jamais deborder du cadre : sur une colonne etroite,
   "Instagram" et "Pinterest" sont longs. On reduit legerement plutot
   que de laisser le texte sortir. */
.ench-reseau-nom {
    font-size: .86rem;
    font-weight: 600;
    line-height: 1.2;
    color: #3D2817;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Couleurs officielles de chaque reseau. Le logo les porte en permanence,
   la bordure et le nom les prennent au survol. */
.ench-reseau-ig .ench-reseau-logo { color: #C13584; }
.ench-reseau-ig:hover { border-color: #C13584; }
.ench-reseau-ig:hover .ench-reseau-nom { color: #C13584; }

.ench-reseau-tt .ench-reseau-logo { color: #010101; }
.ench-reseau-tt:hover { border-color: #010101; }
.ench-reseau-tt:hover .ench-reseau-nom { color: #010101; }

.ench-reseau-yt .ench-reseau-logo { color: #FF0000; }
.ench-reseau-yt:hover { border-color: #FF0000; }
.ench-reseau-yt:hover .ench-reseau-nom { color: #C4302B; }

.ench-reseau-fb .ench-reseau-logo { color: #1877F2; }
.ench-reseau-fb:hover { border-color: #1877F2; }
.ench-reseau-fb:hover .ench-reseau-nom { color: #1877F2; }

.ench-reseau-pi .ench-reseau-logo { color: #BD081C; }
.ench-reseau-pi:hover { border-color: #BD081C; }
.ench-reseau-pi:hover .ench-reseau-nom { color: #BD081C; }

/* L'ecosysteme, pour qui decouvre la boutique par cette page et ignore
   qu'il y a plusieurs boutiques derriere. */
.ench-eco {
    padding-top: 16px;
    border-top: 1px solid #EADFD6;
}

.ench-eco-texte {
    margin: 0 0 12px;
    font-size: .84rem;
    line-height: 1.6;
    color: #5A5A52;
}

.ench-eco-texte strong { color: #A85440; }
.ench-eco-texte a { color: #A85440; text-decoration: underline; }

.ench-eco-lien {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 22px;
    background: #C4674A;
    color: #fff !important;
    border-radius: 22px;
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none !important;
}

.ench-eco-lien:hover { background: #A85440; color: #fff !important; }

/* ====================================================================
   PAGE VIDE
   ==================================================================== */

.ench-vide {
    max-width: 560px;
    margin: 0 auto;
    padding: 34px 20px;
    text-align: center;
    background: #FAF8F5;
    border: 1px solid #EADFD6;
    border-radius: 16px;
}

.ench-vide-titre {
    margin: 0 0 14px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.5rem;
    color: #3D2817;
}

.ench-vide-texte {
    margin: 0 0 12px;
    font-size: .95rem;
    line-height: 1.65;
    color: #5A5A52;
}

.ench-vide .ench-btn {
    margin-top: 10px;
    background: #C4674A;
    color: #fff;
}

.ench-vide .ench-btn:hover { color: #fff; }

/* ====================================================================
   VISIONNEUSE
   ==================================================================== */

.ench-visionneuse {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(29, 20, 12, .93);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.ench-visionneuse[hidden] { display: none; }

.ench-visionneuse img {
    max-width: 100%;
    max-height: 82vh;
    border-radius: 8px;
}

.ench-visionneuse-legende {
    margin: 12px 0 0;
    color: rgba(255,255,255,.85);
    font-size: .85rem;
    text-align: center;
}

.ench-visionneuse-fermer {
    position: absolute;
    top: 14px;
    right: 14px;
    /* 44px : la cible tactile minimale recommandee. */
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,.16);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
}

/* ====================================================================
   AU-DELA DU TELEPHONE
   ==================================================================== */

@media (min-width: 600px) {
    .ench-titre { font-size: 2.1rem; }
    .ench-rebours-valeur { font-size: 2.1rem; }
    .ench-bloc { padding: 26px 24px; }
    .ench-pieces { grid-template-columns: repeat(3, 1fr); }
    .ench-galerie { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
    /* DEUX COLONNES

       Le bloc d'enchere reste fixe au defilement : la cliente garde le
       compte a rebours et le formulaire sous les yeux pendant qu'elle
       regarde les pieces.

       LE CHEVAUCHEMENT EN BAS DE PAGE -- corrige le 29/08/2026.
       Le bloc debordait sur la section "Le principe" en fin de page.

       Cause : sa zone de grille s'arretait a l'historique, mais son
       comportement colle continuait de le maintenir visible pendant que
       la page defilait au-dela.

       Correction : la zone du bloc va desormais JUSQU'A la derniere
       section, et "Le principe" passe sous la colonne de gauche
       uniquement. Le bloc ne peut plus deborder de sa colonne. */
    .ench-page {
        display: grid;
        grid-template-columns: 1fr 400px;
        grid-template-areas:
            "entete  bloc"
            "lot     bloc"
            "social  bloc"
            "video   bloc"
            "look    bloc"
            "histo   bloc"
            "regles  bloc"
            "reseaux bloc";
        gap: 0 36px;
        align-items: start;
    }

    /* Le texte cale a gauche et justifie jusqu'a la limite de la colonne :
       une page de contenu se lit mieux alignee qu'centree. */
    .ench-entete { grid-area: entete; text-align: left; }
    .ench-entete .ench-meta { justify-content: flex-start; }

    .ench-description,
    .ench-regles-liste li { text-align: justify; }

    .ench-bloc {
        grid-area: bloc;
        position: sticky;
        top: 20px;
        padding: 30px 26px;
        /* La zone s'etend sur toute la hauteur, mais le bloc ne doit pas
           s'etirer avec elle : il garde sa hauteur naturelle en haut de
           colonne. */
        align-self: start;
    }

    /* Le compte a rebours et la mise gagnent en presence sur grand ecran :
       ce sont les deux chiffres qui font revenir. */
    .ench-bloc .ench-rebours-valeur { font-size: 2.3rem; }
    .ench-bloc .ench-montant-valeur { font-size: 1.7rem; }

    .ench-social { grid-area: social; }
    .ench-video { grid-area: video; }
    .ench-lot { grid-area: lot; }
    .ench-lookbook { grid-area: look; }
    .ench-historique { grid-area: histo; }
    .ench-regles { grid-area: regles; }
    .ench-reseaux { grid-area: reseaux; }

    .ench-pieces { grid-template-columns: repeat(3, 1fr); }

    /* Les cinq reseaux sur une ligne : ils tiennent, et la rangee se lit
       d'un coup d'oeil. */
    .ench-reseaux-liste { grid-template-columns: repeat(5, 1fr); }

    /* J'aime et partage cote a cote : sur grand ecran, les empiler
       gaspillerait la largeur. Suivre reste en pleine largeur au-dessus :
       c'est l'action la plus importante, elle ne doit pas se noyer dans
       une rangee de boutons. */
    .ench-social { flex-wrap: wrap; flex-direction: row; align-items: center; }
    .ench-suivre { width: 100%; }
    .ench-suivre-note { width: 100%; }
    .ench-jaime { width: auto; flex-shrink: 0; }
    .ench-partage {
        flex: 1;
        padding-top: 0;
        padding-left: 18px;
        border-top: none;
        border-left: 1px solid #EADFD6;
    }
    .ench-partage-label { text-align: left; }
    .ench-partage-liens { justify-content: flex-start; }
}

/* ====================================================================
   IMPRESSION
   ==================================================================== */

@media print {
    .ench-bloc, .ench-like, .ench-visionneuse { display: none; }
}