:root{--wine:#8d1238;--wine2:#b21f4d;--ink:#18222b;--muted:#6f7780;--bg:#f5f1ec;--card:#fff;--line:#e7e0d8;}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;}
.app{display:flex;min-height:100vh}.sidebar{width:255px;background:#18232c;color:white;padding:22px 16px;position:fixed;inset:0 auto 0 0}.brand{display:flex;align-items:center;gap:12px;margin:4px 10px 30px}.brand span{font-size:34px}.brand b{display:block;font-size:20px}.brand small{color:#aeb7be}.nav{display:block;width:100%;border:0;background:transparent;color:#d9e0e4;text-align:left;padding:12px 13px;border-radius:10px;margin:4px 0;font-size:14px;cursor:pointer}.nav.active,.nav:hover{background:var(--wine);color:#fff}.side-card{background:#25333d;border-radius:14px;padding:16px;margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:5px 10px}.side-card strong{font-size:22px}.side-card span{font-size:12px;color:#aeb7be}
main{margin-left:255px;width:calc(100% - 255px);}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.mobile-brand{font-size:22px;font-weight:750}.primary{background:var(--wine);color:#fff;border:0;border-radius:10px;padding:11px 16px;font-weight:700;cursor:pointer}.primary:hover{background:var(--wine2)}
h1{font-size:30px;margin:0 0 5px}.sub{color:var(--muted);margin:0 0 22px}.hero,.card,.bottle,.form-card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 2px 10px #3a281208}.hero{padding:24px;display:flex;justify-content:space-between;align-items:center}.hero-number{font-size:36px;font-weight:800}.hero-label{color:var(--muted)}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0 24px}.metric{padding:18px;background:var(--card);border:1px solid var(--line);border-radius:14px}.metric b{font-size:25px;display:block}.metric span{color:var(--muted);font-size:13px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:14px}.bottle{padding:16px;cursor:pointer}.bottle:hover{transform:translateY(-1px)}.bottle-top{display:flex;gap:12px}.bottle-icon{width:54px;height:86px;border-radius:7px 7px 12px 12px;background:linear-gradient(90deg,#343434,#111,#383838);position:relative;flex:none}.bottle-icon:before{content:"";position:absolute;left:18px;top:-16px;width:18px;height:19px;background:#222;border-radius:4px 4px 2px 2px}.bottle h3{margin:0 0 4px;font-size:16px}.qty{margin-left:auto;background:#eef7ee;color:#3c7b3d;border-radius:20px;padding:7px 11px;font-weight:800;height:max-content}.input,.select{border:1px solid var(--line);border-radius:10px;background:#fff;padding:11px 12px;font:inherit}.input{flex:1}.section-title{margin:24px 0 12px}
.form-card{max-width:850px;padding:22px}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px}.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:9px;padding:10px;font:inherit;background:#fff}.field textarea{min-height:100px;resize:vertical}.full{grid-column:1/-1}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.detail{display:grid;grid-template-columns:240px 1fr;gap:28px}.detail-photo{height:360px;border-radius:18px;background:linear-gradient(90deg,#292929,#0e0e0e,#333);position:relative}.detail-photo:before{content:"";position:absolute;left:88px;top:-42px;width:64px;height:48px;background:#222;border-radius:9px 9px 3px 3px}.detail h1{margin-top:0}.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}
.rack{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;background:#e9efe8;padding:18px;border-radius:15px;max-width:850px}.slot{min-height:72px;border:1px solid #d3dfd1;border-radius:8px;background:#f8fff7;display:flex;align-items:center;justify-content:center;cursor:pointer}.slot.occupied{background:#8d1238;color:#fff;border-color:#8d1238}.slot.partial{background:#f7d78e}.slot span{font-size:11px}
.stat-box{padding:20px}.bar{height:13px;background:#eee;border-radius:10px;overflow:hidden;margin:7px 0 15px}.bar i{display:block;height:100%;background:var(--wine);border-radius:10px}
.modal{background:#0008;display:flex;align-items:center;justify-content:center;padding:20px}.modal.hidden{display:none}.modal-box{background:#fff;border-radius:18px;max-width:520px;width:100%;padding:24px;}.close{position:absolute;right:14px;top:10px;border:0;background:transparent;font-size:28px;cursor:pointer}
@media(max-width:850px){.sidebar{display:none}main{margin-left:0;width:100%;}.metrics{grid-template-columns:repeat(2,1fr)}.detail{grid-template-columns:1fr}.detail-photo{height:280px}.form-grid{grid-template-columns:1fr}.full{grid-column:auto}.input{min-width:180px}}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#18232c;color:#fff;padding:12px 18px;border-radius:10px;z-index:10000;box-shadow:0 5px 20px #0004}

.label-scan{max-width:850px;margin-bottom:14px}.confidence{background:#edf7ed;color:#3d7e40;padding:5px 9px;border-radius:20px;font-size:12px;font-weight:700}

.autocomplete-box{position:absolute;z-index:1000;left:0;right:0;top:100%;background:#fff;border:1px solid #ddd;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);overflow:hidden}.autocomplete-item{display:block;width:100%;padding:10px 12px;text-align:left;border:0;background:#fff;cursor:pointer}.autocomplete-item:hover{background:#f4f1eb}.autocomplete-item small{display:block;color:#777;margin-top:3px}

/* ============================================================
   MA CAVE — nouvelle interface visuelle
   Aucun changement de logique/API : uniquement présentation.
   ============================================================ */
:root{--ui-wine:#701247;--ui-bg:#fbfaf9;--ui-text:#28252a;--ui-line:#eee9ec;--ui-card:#fff}
body{background:var(--ui-bg);color:var(--ui-text)}
main{padding:0 34px 50px;background:var(--ui-bg)}
header{height:72px;margin:0 -34px 0;padding:0 34px;background:#fff;border-bottom:1px solid var(--ui-line)}
.mobile-brand{color:var(--ui-wine)}

.cellar-page{padding:24px 0 50px}
.cellar-header{position:relative;height:56px;}
.cellar-title{display:flex;align-items:baseline;gap:8px}
.cellar-title h1{line-height:1;font-weight:800;color:#363238}
.cellar-title span{font-weight:500}
.back-button,.icon-button{position:absolute;width:44px;height:44px;border:1px solid #e6dfe4;background:#fff;border-radius:14px;color:var(--ui-wine);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:29px;line-height:1}
.back-button{left:0;font-family:Georgia,serif;font-size:38px;padding-bottom:5px}
.icon-button{right:0;font-family:Georgia,serif}
.cellar-actions{align-items:center;height:55px;}
.cellar-actions button{font:inherit}
.sort-button,.pair-button{font-size:16px;display:flex;gap:7px;align-items:center}
.sort-button{font-size:0}.sort-button:first-letter{font-size:25px}.sort-button b,.pair-button b{font-size:16px}
.pair-button{font-size:20px}.add-wine-button{margin-left:auto;font-weight:700;font-size:16px!important;color:#363238!important}.add-wine-button span{display:inline-flex;border:1px solid #ddd6db;border-radius:13px;align-items:center;justify-content:center;color:var(--ui-wine);vertical-align:middle}
.color-chips{display:flex;gap:12px;overflow-x:auto;padding:8px 0 18px;scrollbar-width:none}.color-chips::-webkit-scrollbar{display:none}
.color-chip{white-space:nowrap;padding:12px 23px;border:1px solid #e5dfe3;border-radius:14px;background:#fff;color:#8e858c;font-size:15px;font-weight:600;cursor:pointer}.color-chip b{margin-left:5px;font-weight:500;color:#9d969b}.color-chip.active{background:#fff;border-color:var(--ui-wine);color:var(--ui-wine);box-shadow:0 2px 8px #70124712}
.wine-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.wine-card{background:var(--ui-card);border:1px solid #eee9eb;border-radius:20px;padding:20px 20px 17px;box-shadow:0 4px 18px #2d172008;cursor:pointer;transition:.15s ease;overflow:hidden}.wine-card:hover{transform:translateY(-2px);box-shadow:0 7px 24px #2d172012}.wine-card-main{display:flex;gap:18px;position:relative;min-height:166px}.wine-photo{width:128px;height:166px;flex:0 0 128px;border-radius:12px;background:linear-gradient(90deg,#4a2527,#120e0e 50%,#4b2527);background-size:cover;background-position:center;box-shadow:0 3px 10px #0002;position:relative}.wine-photo:not(.has-photo):after{content:"";position:absolute;left:48px;top:-18px;width:31px;height:30px;background:#201718;border-radius:5px 5px 2px 2px}.wine-info{min-width:0;padding-top:2px;padding-right:25px}.wine-type{display:flex;align-items:center;gap:10px;color:#aaa7aa;font-size:13px;font-weight:700;letter-spacing:.2px;margin-bottom:7px}.wine-dot{width:14px;height:14px;border-radius:50%;display:inline-block;background:var(--ui-wine)}.wine-dot.sparkling{background:#d6a64e}.wine-info h3{margin:0;color:#272329;font-size:22px;line-height:1.12;font-weight:800;letter-spacing:-.4px}.wine-subline{color:#9b969a;font-size:15px;margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wine-year{margin-right:5px}.sep{padding:0 2px}.wine-appellation{font-size:15px;color:#6e686e;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wine-country{font-size:15px;color:#242125;margin-top:8px}.wine-more{position:absolute;right:0;top:-1px;border:0;background:none;color:var(--ui-wine);font-weight:900;font-size:17px;letter-spacing:2px;cursor:pointer;padding:0 0 8px}
.wine-pairings{display:flex;gap:19px;color:#34303a;font-size:25px;margin:14px 0 12px;padding-left:2px}.wine-pairings span{width:28px;height:28px;display:flex;align-items:center;justify-content:center}
.wine-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}.wine-meta{display:flex;gap:26px;align-items:center}.wine-meta-item{display:flex;gap:8px;align-items:center}.wine-meta-item small{display:block;color:#aaa5aa;font-size:12px;margin-bottom:2px}.wine-meta-item strong{display:block;font-size:18px;color:#272329;font-weight:700}.meta-icon{width:29px;height:29px;display:flex;align-items:center;justify-content:center;color:var(--ui-wine);font-size:22px}.qty-control{display:flex;align-items:center;gap:18px;background:#f0eff0;border-radius:11px;padding:7px 9px}.qty-control button{border:0;background:#fff;color:var(--ui-wine);width:28px;height:28px;border-radius:50%;font-size:25px;line-height:24px;cursor:pointer}.qty-control span{font-size:17px;font-weight:700;min-width:12px;text-align:center;color:#28252a}
.empty-cave{background:#fff;border:1px solid var(--ui-line);border-radius:18px;padding:35px;text-align:center;color:#999}

/* Sur mobile, on reproduit le rythme et les proportions de la référence. */
@media(max-width:850px){
  main{padding:0 12px 35px}.app{background:var(--ui-bg)}header{display:none}
  .cellar-page{padding:15px 9px 35px}.cellar-header{height:50px;margin-bottom:10px}.cellar-title{gap:5px}.cellar-title h1{font-size:24px}.cellar-title span{font-size:16px}.back-button,.icon-button{width:43px;height:43px;border-radius:13px}.back-button{left:0}.icon-button{right:0}
  .cellar-actions{height:53px;gap:20px;margin-bottom:2px}.sort-button b,.pair-button b,.add-wine-button{font-size:15px!important}.add-wine-button{white-space:nowrap}.add-wine-button span{width:42px;height:42px}
  .color-chips{margin-left:-9px;margin-right:-9px;padding-left:9px;padding-right:9px}.color-chip{padding:11px 20px;font-size:15px}
  .wine-list{grid-template-columns:1fr;gap:16px}.wine-card{border-radius:18px;padding:18px 15px 15px}.wine-card-main{gap:14px;min-height:156px}.wine-photo{width:108px;height:156px;flex-basis:108px;border-radius:11px}.wine-photo:not(.has-photo):after{left:40px}.wine-info h3{font-size:21px}.wine-subline,.wine-appellation,.wine-country{font-size:14px}.wine-pairings{margin:12px 0 10px;gap:15px}.wine-bottom{align-items:center}.wine-meta{gap:15px}.wine-meta-item{gap:5px}.wine-meta-item small{font-size:11px}.wine-meta-item strong{font-size:17px}.meta-icon{width:25px;font-size:20px}.qty-control{gap:12px;padding:6px 7px}.qty-control button{width:29px;height:29px}
}
@media(max-width:390px){.wine-photo{width:96px;height:150px;flex-basis:96px}.wine-card-main{gap:12px}.wine-info h3{font-size:19px}.wine-meta{gap:8px}.wine-meta-item:nth-child(3){display:none}.qty-control{gap:9px}.cellar-actions{gap:14px}.add-wine-button{font-size:14px!important}}

/* ===== Ma Cave V2 : menu des types en haut ===== */
.cellar-page{max-width:1180px;margin:0 auto}
.cellar-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.cellar-title h1{margin:0;font-size:30px;letter-spacing:-.02em}
.cellar-title span{display:block;margin-top:3px;color:var(--muted);font-size:13px}
.cellar-top-actions{display:flex;align-items:center;gap:8px}
.cellar-top-actions .icon-button{width:42px;height:42px;border-radius:50%;background:#fff;border:1px solid var(--line);font-size:22px;display:grid;place-items:center;cursor:pointer}
.cellar-top-actions .add-top{background:var(--wine);border-color:var(--wine);color:#fff;font-size:25px}
.wine-type-menu{display:flex;gap:9px;overflow-x:auto;scrollbar-width:none;padding:2px 0 12px;margin:0 0 8px}
.wine-type-menu::-webkit-scrollbar{display:none}
.wine-type-menu .color-chip{flex:0 0 auto;border:0;background:transparent;color:#777;padding:9px 13px;border-radius:999px;font-size:14px;white-space:nowrap;cursor:pointer}
.wine-type-menu .color-chip b{font-weight:650;margin-left:3px}
.wine-type-menu .color-chip.active{background:var(--wine);color:#fff}
.cellar-actions{display:flex;gap:8px;margin:0 0 16px}
.cellar-actions button{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:10px;padding:9px 13px;cursor:pointer}
@media(max-width:700px){
  main{padding:18px 14px 28px}
  .cellar-title h1{font-size:26px}
  .wine-type-menu{margin-left:-2px;margin-right:-2px}
  .cellar-actions{margin-bottom:12px}
}

/* Les boutons restent fonctionnels et deviennent des boutons texte. */

.icon-button {
    font-size: 0 !important;
}

.icon-button:not(:empty) {
    font-size: inherit !important;
}

/* Aucun pictogramme décoratif */
.fa,
.fas,
.far,
.fab{
    display: none !important;
}

/* Suppression de la barre supérieure */
body > header,
header {
    display: none !important;
}

/* MOBILE MENU CSS START */

/*
 * Le bouton n'existe visuellement que sur téléphone.
 */

/*
 * Fond derrière le menu.
 */

#mobile-menu-overlay {
    display: none;
}

@media (max-width: 700px) {

    /*
     * Bouton Menu en haut à gauche.
     */

    /*
     * Menu caché par défaut.
     */

    .mobile-sidebar {

        position: fixed !important;

        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;

        width: min(320px, 85vw) !important;

        height: 100vh !important;

        z-index: 10000 !important;

        transform: translateX(-105%) !important;

        transition:
            transform .25s ease !important;

        overflow-y: auto !important;

        box-shadow:
            8px 0 30px rgba(0,0,0,.18);

    }

    /*
     * Menu ouvert.
     */

    .mobile-sidebar.mobile-menu-open {

        transform: translateX(0) !important;

    }

    /*
     * Fond sombre derrière le menu.
     */

    #mobile-menu-overlay {

        position: fixed;

        inset: 0;

        z-index: 9999;

        background:
            rgba(0,0,0,.35);

        backdrop-filter:
            blur(2px);

    }

    #mobile-menu-overlay.mobile-menu-overlay-open {

        display: block;

    }

    /*
     * Le contenu de l'application garde
     * toute la largeur disponible.
     */

    main,
    #content,
    .content {

        width: 100%;

    }

}

/* MOBILE MENU CSS END */

/* ============================================================
   CAVE — MOBILE — MISE EN PAGE
   ============================================================ */

@media (max-width: 700px) {

  #mobile-menu-button * {
    font-size: inherit !important;
  }

  .cellar-page .sort-button,

  .cellar-page .wine-type-menu {
    margin-top: 4px !important;
  }

}
.cellar-page .cellar-header,
.cellar-page .cellar-actions,
.cellar-page .wine-type-menu {
    display: none !important;
}
.cellar-page .wine-type-menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
}

.cellar-page .wine-type-menu::-webkit-scrollbar {
    display: none !important;
}

.cellar-page .wine-type-menu .color-chip {
    flex: 0 0 auto !important;
}

/* =========================================================
   CAVE — BANDEAU D'ACTIONS AU-DESSUS DES CATÉGORIES
   ========================================================= */

.cellar-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 43px;
    margin: 0 0 12px;
    padding: 0;
}

.cellar-action-left {
    display: flex;
    align-items: center;
    gap: 26px;
}

.cellar-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 43px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #151b25;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.cellar-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    margin: 0;
    padding: 0;
    color: #151b25;
    font-family: inherit;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
}

.cellar-sort-icon {
    font-size: 22px;
    transform: scaleX(.82);
}

.cellar-pair-icon {
    font-size: 20px;
    letter-spacing: -2px;
}

.cellar-action-bar .cellar-add-button {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: auto;
    height: 43px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #151b25;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.cellar-action-bar .cellar-add-button > span {
    display: inline;
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
}

.cellar-action-bar .cellar-add-button > strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 43px;
    margin: 0;
    padding: 0;
    border: 1px solid #d9dce2;
    border-radius: 13px;
    background: #fff;
    color: #151b25;
    font-family: inherit;
    font-weight: 400;
}

@media (max-width: 700px) {
    .cellar-action-bar {
        height: 43px;
        margin-bottom: 12px;
    }

    .cellar-action-left {
        gap: 20px;
    }

    .cellar-action,
    .cellar-action-bar .cellar-add-button,
    .cellar-action-bar .cellar-add-button > span {
        font-size: 16px;
        font-weight: 400;
    }

    .cellar-action-icon {
        font-size: 21px;
    }

    .cellar-action-bar .cellar-add-button > strong {
        width: 43px;
        height: 43px;
        flex-basis: 43px;
        font-size: 27px;
    }
}

/* ==========================================================
   BANDEAU MA CAVE — AU-DESSUS DES CATEGORIES
   ========================================================== */

.cellar-reference-header {
    height: 54px;
    justify-content: space-between;
    box-sizing: border-box;
    margin: 0 0 12px;
}

.cellar-reference-back,
.cellar-reference-search {
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0;
    border: 1px solid #dedadd;
    border-radius: 50%;
    background: #fff;
    color: #363238;
    cursor: pointer;
}

.cellar-reference-back span {
    font-family: inherit;
    font-weight: 300;
    line-height: 1;
    transform: translateY(-2px);
}

.cellar-reference-title {
    white-space: nowrap;
}

.cellar-reference-title strong {
    color: #363238;
    font-family: inherit;
    font-weight: 700;
    line-height: 1;
}

.cellar-reference-title > span {
    color: #aaa6aa;
    font-family: inherit;
    font-weight: 400;
    line-height: 1;
}

.cellar-reference-title > span > span {
    font: inherit;
}

.cellar-reference-search span {
    display: block;
    font-family: Arial, sans-serif;
    font-weight: 300;
    line-height: 1;
    transform: rotate(-20deg) translateY(-1px);
}

@media (max-width: 700px) {

    .cellar-reference-header {
        margin-bottom: 10px;
    }

    .cellar-reference-back,
    .cellar-reference-search {
        width: 43px;
        height: 43px;
        flex-basis: 43px;
    }

    .cellar-reference-back span {
        font-size: 35px;
    }

    .cellar-reference-title {
        gap: 4px;
        padding: 0 6px;
    }

    .cellar-reference-title strong {
        font-size: 24px;
    }

    .cellar-reference-title > span {
        font-size: 16px;
    }

    .cellar-reference-search span {
        font-size: 29px;
    }
}

    .cellar-reference-back,
    .cellar-reference-search {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
    }

    .cellar-reference-back span {
        font-size: 40px;
    }

    .cellar-reference-title {
        gap: 5px;
        padding: 0 8px;
    }

    .cellar-reference-title strong {
        font-size: 27px;
        letter-spacing: -0.5px;
    }

    .cellar-reference-title > span {
        font-size: 21px;
    }

    .cellar-reference-search span {
        font-size: 36px;
    }

/* ============================================================
   MA CAVE — SUPPRESSION DU BOUTON RETOUR ET DU MENU
   ============================================================ */

.cellar-page .back-button {
    display: none !important;
}

.cellar-page .menu-button,
.cellar-page [aria-label="Menu"],
.cellar-page [title="Menu"] {
    display: none !important;
}

/* ============================================================
   MA CAVE — SUPPRESSION DEFINITIVE RETOUR + MENU MOBILE
   ============================================================ */

/* Bouton retour */
.cellar-page button[aria-label="Retour"],
.cellar-page .back-button {
    display: none !important;
}

/* Bouton Menu généré dynamiquement par app.js */
.cellar-page #mobile-menu-button {
    display: none !important;
}

/* ============================================================
   MA CAVE — MASQUER LE BOUTON MENU MOBILE
   ============================================================ */

#mobile-menu-button {
    display: none !important;
}

/* ============================================================
   WINE DETAIL V1
   Fiche bouteille inspirée de la référence fournie
   ============================================================ */

.wine-detail-page{
  background:#fff;
  width:100%;
  min-height:100%;
  color:#161616;
}

.wine-detail-top{
  position:relative;
  display:grid;
  grid-template-columns:190px 1fr;
  gap:34px;
  padding:34px 34px 24px;
  min-height:300px;
}

.wine-detail-photo{
  width:190px;
  height:265px;
  border-radius:18px;
  box-shadow:0 4px 15px rgba(0,0,0,.13);
}

.wine-detail-main{
  position:relative;
  padding-top:42px;
}

.wine-detail-actions{
  position:absolute;
  right:0;
  top:0;
  display:flex;
  gap:12px;
}

.wine-detail-edit,
.wine-detail-close{
  width:58px;
  height:58px;
  border-radius:50%;
  border:0;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:Arial,sans-serif;
}

.wine-detail-edit{
  font-size:30px;
}

.wine-detail-type{
  display:flex;
  align-items:center;
  gap:14px;
  color:#9b9b9b;
  font-size:22px;
  font-weight:800;
  margin-bottom:10px;
}

.wine-detail-dot{
  width:30px;
  height:30px;
  border-radius:50%;
  display:block;
}

.wine-detail-dot.red{
  background:#701247;
}

.wine-detail-dot.white{
  background:#e8dfaa;
}

.wine-detail-dot.rose{
  background:#d88c9d;
}

.wine-detail-dot.sparkling{
  background:#d3a54d;
}

.wine-detail-main h1{
  margin:0;
  font-size:40px;
  line-height:1.08;
  font-weight:800;
  color:#111;
  letter-spacing:-1px;
}

.wine-detail-producer{
  margin-top:8px;
  font-size:22px;
  color:#777;
}

.wine-detail-vintage{
  margin-top:14px;
  font-size:25px;
  color:#aaa;
}

.wine-detail-appellation{
  margin-top:8px;
  font-size:23px;
  color:#999;
}

.wine-detail-country{
  margin-top:10px;
  font-size:22px;
  color:#222;
}

/* Ajouter à */

.wine-detail-section-title{
  padding:12px 34px 12px;
  color:#701247;
  font-size:29px;
  font-weight:800;
}

.wine-detail-actions-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  padding:0 34px 30px;
}

.wine-detail-action-card{
  min-height:135px;
  border:2px solid #e5e5e5;
  border-radius:18px;
  background:#fff;
  display:flex;
  align-items:center;
  gap:18px;
  padding:25px;
  text-align:left;
  cursor:pointer;
}

.wine-detail-action-card:hover{
  border-color:#d7c0cf;
}

.wine-detail-action-card:nth-child(2){
  background:#f4f4f6;
}

.wine-detail-action-icon{
  width:54px;
  height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#701247;
  font-size:34px;
  flex:none;
}

.wine-detail-action-card strong{
  display:block;
  font-size:20px;
  color:#701247;
}

.wine-detail-action-card small{
  display:block;
  margin-top:5px;
  color:#777;
  font-size:18px;
}

/* Onglets */

.wine-detail-tabs{
  display:flex;
  gap:55px;
  border-bottom:1px solid #d7d7d7;
  padding:0 34px;
}

.wine-detail-tab{
  position:relative;
  border:0;
  background:none;
  padding:18px 0;
  font-size:23px;
  color:#333;
  cursor:pointer;
}

.wine-detail-tab.active{
  color:#701247;
  font-weight:800;
}

.wine-detail-tab.active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:4px;
  background:#701247;
}

/* Informations */

.wine-detail-info{
  width:100%;
}

.wine-detail-row{
  display:grid;
  grid-template-columns:78px 1fr;
  gap:20px;
  padding:27px 34px;
  border-bottom:1px solid #ddd;
}

.wine-detail-icon{
  width:58px;
  height:58px;
  border-radius:15px;
  background:#f3e4ed;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#701247;
  font-size:27px;
}

.wine-detail-row small{
  display:block;
  color:#aaa;
  font-size:17px;
  margin-bottom:8px;
}

.wine-detail-value{
  color:#111;
  font-size:25px;
  line-height:1.25;
}

.wine-edit-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:25px;
}

.wine-edit-header h1{
  margin:0;
  color:#701247;
}

.wine-edit-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.wine-edit-grid .full{
  grid-column:1 / -1;
}

.wine-edit-cancel{
  border:1px solid #ddd;
  background:#fff;
  border-radius:10px;
  padding:11px 18px;
  cursor:pointer;
}

/* Mobile */

@media(max-width:700px){

  .wine-detail-top{
    padding:24px 22px 20px;
  }

  .wine-detail-photo{
    margin:0 auto;
  }

  .wine-detail-main{
    padding-top:65px;
  }

  .wine-detail-actions-grid{
    grid-template-columns:1fr;
    padding:0 22px 24px;
  }

  .wine-detail-section-title{
    padding:10px 22px;
  }

  .wine-detail-tabs{
    padding:0 22px;
  }

  .wine-detail-row{
    padding:22px;
  }

  .wine-edit-grid{
    grid-template-columns:1fr;
  }

  .wine-edit-grid .full{
    grid-column:auto;
  }

}

/* ============================================================
   WINE DETAIL — CORRECTION MOBILE
   ============================================================ */

@media (max-width:700px){

  .wine-detail-page{
    min-height:100vh;
  }

}

/* WINE DETAIL V2 — MISE EN PAGE MOBILE */

@media (max-width:700px){

  /* ----------------------------------------------------------
     Fiche complète
     ---------------------------------------------------------- */

  .modal{
    padding:0 !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
  }

  .modal-box{
    width:100% !important;
    max-width:none !important;
    height:100vh !important;
    max-height:100vh !important;
    padding:0 !important;
    border-radius:0 !important;
    overflow-y:auto !important;
  }


  /* ----------------------------------------------------------
     En-tête : photo à gauche / description à droite
     ---------------------------------------------------------- */

  .wine-detail-top{

    display:grid !important;

    grid-template-columns:165px minmax(0,1fr) !important;

    gap:18px !important;

    align-items:start !important;

    padding:
      20px
      18px
      24px !important;

    min-height:0 !important;

  }

  .wine-detail-photo{

    width:165px !important;

    height:235px !important;

    margin:0 !important;

    border-radius:16px !important;

    background-size:cover !important;

    background-position:center !important;

    box-shadow:
      0 3px 12px rgba(0,0,0,.14) !important;

  }

  .wine-detail-main{

    position:relative !important;

    padding:
      48px
      0
      0 !important;

    min-width:0 !important;

  }

  /* ----------------------------------------------------------
     Boutons modifier / fermer
     ---------------------------------------------------------- */

  .wine-detail-actions{

    position:absolute !important;

    top:0 !important;

    right:0 !important;

    display:flex !important;

    gap:7px !important;

  }

  .wine-detail-edit,
  .wine-detail-close{

    border-radius:50% !important;

    flex:none !important;

  }


  /* ----------------------------------------------------------
     Texte à droite de la photo
     ---------------------------------------------------------- */

  .wine-detail-type{

    display:flex !important;

    align-items:center !important;

    margin:0 0 7px !important;

    line-height:1 !important;

  }

  .wine-detail-dot{

    flex:none !important;

  }

  .wine-detail-main h1{

    margin:0 !important;

    letter-spacing:-.5px !important;

    word-break:normal !important;

  }

  .wine-detail-producer{

    margin-top:5px !important;

    line-height:1.2 !important;

    color:#8f8f8f !important;

  }

  .wine-detail-vintage{

    line-height:1 !important;

    color:#aaa !important;

  }

  .wine-detail-appellation{

    margin-top:8px !important;

    line-height:1.1 !important;

    color:#999 !important;

  }

  .wine-detail-country{

    margin-top:7px !important;

    line-height:1.1 !important;

    color:#222 !important;

  }

  /* ----------------------------------------------------------
     Onglets : sous l'en-tête
     ---------------------------------------------------------- */

  .wine-detail-tabs{

    display:flex !important;

    gap:0 !important;

    padding:
      0
      18px !important;

    border-bottom:
      1px solid #d7d7d7 !important;

    width:100% !important;

  }

  .wine-detail-tab{

    flex:0 0 50% !important;


    text-align:center !important;

    line-height:1.1 !important;

  }

  .wine-detail-tab.active::after{

    height:4px !important;

  }

  /* ----------------------------------------------------------
     Fiche technique
     ---------------------------------------------------------- */

  .wine-detail-info{

    width:100% !important;

  }

  .wine-detail-row{

    display:grid !important;


    border-bottom:
      1px solid #dedede !important;

    align-items:center !important;

  }

  .wine-detail-row small{

    display:block !important;

    margin:0 0 4px !important;

    line-height:1.1 !important;

    color:#aaa !important;

  }

  .wine-detail-value{

    color:#111 !important;

  }

  .wine-edit-header h1{
    font-size:25px !important;
  }

}

/* --------------------------------------------------------------
   Très petits écrans
   -------------------------------------------------------------- */

@media (max-width:380px){

  .wine-detail-top{

    grid-template-columns:
      145px
      minmax(0,1fr) !important;

    gap:14px !important;

    padding:
      18px
      14px
      20px !important;

  }

  .wine-detail-photo{

    width:145px !important;

    height:215px !important;

  }

  .wine-detail-main{

    padding-top:44px !important;

  }

  .wine-detail-edit,
  .wine-detail-close{

    width:40px !important;

    height:40px !important;

  }

}

/* WINE DETAIL V3 — TYPO MOBILE */

@media (max-width:700px){

  .wine-detail-main h1{
    line-height:1.05 !important;
  }

  .wine-detail-appellation{
    font-size:15px !important;
  }

  .wine-detail-country{
    font-size:15px !important;
  }

}


/* WINE DETAIL V4 — TYPO MOBILE */

@media (max-width:700px){

  .wine-detail-main h1{
    font-size:21px !important;
    font-weight:750 !important;
  }

  .wine-detail-type{
    font-size:11px !important;
    gap:6px !important;
    margin-bottom:5px !important;
  }

  .wine-detail-dot{
    width:11px !important;
    height:11px !important;
  }

  .wine-detail-producer{
    font-size:11px !important;
  }

  .wine-detail-vintage{
    font-size:16px !important;
    margin-top:9px !important;
  }

  .wine-detail-appellation,
  .wine-detail-country{
    font-size:13px !important;
    margin-top:5px !important;
  }

  .wine-detail-tab{
    font-size:14px !important;
    padding:10px 0 9px !important;
  }

  .wine-detail-row{
    grid-template-columns:44px minmax(0,1fr) !important;
    gap:12px !important;
    padding:14px 18px !important;
  }

  .wine-detail-icon{
    width:38px !important;
    height:38px !important;
    border-radius:10px !important;
    font-size:17px !important;
  }

  .wine-detail-row small{
    font-size:11px !important;
    margin-bottom:2px !important;
  }

  .wine-detail-value{
    font-size:14px !important;
    line-height:1.2 !important;
  }

  .wine-detail-edit,
  .wine-detail-close{
    width:36px !important;
    height:36px !important;
  }

  .wine-detail-edit{
    font-size:16px !important;
  }


}

@media (max-width:380px){

  .wine-detail-main h1{
    font-size:19px !important;
  }

  .wine-detail-vintage{
    font-size:15px !important;
  }

  .wine-detail-appellation,
  .wine-detail-country{
    font-size:12px !important;
  }

  .wine-detail-tab{
    font-size:13px !important;
  }

  .wine-detail-value{
    font-size:13px !important;
  }

}

/* FERMETURE UNIFIEE V1 */

/* Ancienne croix générique du modal : masquée */
#modal > .modal-box > .close{
  display:none !important;
}

/* Croix de fermeture standard */
.wine-detail-close{
  width:44px !important;
  height:44px !important;
  border-radius:50% !important;
  border:0 !important;
  background:#701247 !important;
  color:#fff !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  font-family:Arial,sans-serif !important;
  font-size:30px !important;
  font-weight:400 !important;
  line-height:1 !important;

  cursor:pointer !important;
  box-shadow:none !important;
}

/* Bouton d'édition juste à côté */
.wine-detail-edit{
  width:44px !important;
  height:44px !important;
  border-radius:50% !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  background:#fff !important;
  color:#701247 !important;
  border:2px solid #701247 !important;

  cursor:pointer !important;
}

/* Mobile */
@media(max-width:700px){

  .wine-detail-close{
    width:40px !important;
    height:40px !important;
    font-size:27px !important;
  }

  .wine-detail-edit{
    width:40px !important;
    height:40px !important;
  }

}

/* BOUTON FERMER PAGE AJOUT */

#content button[aria-label="Fermer"]{
  width:40px !important;
  height:40px !important;

  padding:0 !important;

  border:0 !important;
  border-radius:50% !important;

  background:#701247 !important;
  color:#fff !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  font-family:Arial,sans-serif !important;
  font-size:27px !important;
  font-weight:400 !important;
  line-height:1 !important;

  cursor:pointer !important;
}

/* MODAL FICHE BOUTEILLE — SCROLL UNIQUE */

body:has(#modal:not(.hidden)){
  overflow:hidden !important;
  position:fixed !important;
  width:100% !important;
}

#modal{
  overflow:hidden !important;
}

#modal > .modal-box{
  max-height:100vh !important;
  overflow-y:auto !important;
  overscroll-behavior:contain !important;
  -webkit-overflow-scrolling:touch !important;
}

/* REDUCTION PLUS AJOUTER VIN */

.add-wine-button span{
  width:36px !important;
  height:36px !important;
  font-size:22px !important;
  margin-left:7px !important;
}


/* PLUS AJOUT VIN V3 */

.cellar-action-bar .cellar-add-button > strong{
  width:32px !important;
  height:32px !important;
  flex-basis:32px !important;
  font-size:18px !important;
  line-height:32px !important;
}

/* PHOTOS BOUTEILLES V1 */

.wine-photo.has-photo{
  background-color:#f5f3f2 !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;
}

.wine-photo:not(.has-photo){
  background-size:cover !important;
}

.wine-detail-photo{
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;
  background-color:#f5f3f2 !important;
}

/* PHOTO FICHE BOUTEILLE IMG */

.wine-detail-photo{
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#f5f3f2 !important;
}

/* PHOTO FICHE BOUTEILLE IMG V2 */

/* La case de la fiche conserve exactement sa taille */


/* La photo doit entièrement tenir dans la case */
.wine-detail-photo-img{
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
}

/* ============================================================
   CELLAR SORT V1
   ============================================================ */

#cellar-sort-modal{
  position:fixed;
  inset:0;
  z-index:999999;
  background:rgba(20,20,20,.38);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:70px 18px 20px;
}

.cellar-sort-box{
  width:100%;
  max-width:520px;
  background:#fff;
  border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  overflow:hidden;
}

.cellar-sort-title{
  padding:22px;
  text-align:center;
  font-size:21px;
  font-weight:700;
  color:#28252a;
  border-bottom:1px solid #eee9ec;
}

.cellar-sort-row{
  min-height:72px;
  padding:0 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #eee9ec;
  cursor:pointer;
  font-size:16px;
  color:#3c3940;
}

.cellar-sort-row span{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.cellar-sort-row small{
  color:#9e999e;
  font-size:13px;
  font-weight:400;
}

.cellar-sort-row input{
  width:20px;
  height:20px;
  accent-color:#701247;
  flex:none;
}

.cellar-sort-actions{
  display:flex;
  gap:10px;
  padding:18px 22px 22px;
}

.cellar-sort-actions button{
  flex:1;
  min-height:48px;
  border-radius:10px;
  padding:0 16px;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}

.cellar-sort-cancel{
  border:1px solid #ddd6dc;
  background:#fff;
  color:#555;
}

.cellar-sort-apply{
  border:0;
  background:#701247;
  color:#fff;
}

@media(max-width:700px){

  #cellar-sort-modal{
    align-items:flex-end;
    padding:12px;
  }

  .cellar-sort-box{
    max-width:none;
    border-radius:18px;
  }

}


/* ============================================================
   MAKAVAVIN — PLAN DE RANGEMENT
   ============================================================ */

.mk-rack-page{
  width:100%;
  max-width:1120px;
  margin:0 auto;
  padding:24px 0 50px;
}

.mk-rack-header{
  margin-bottom:20px;
}

.mk-rack-header h1{
  margin:0 0 5px;
}

.mk-rack-card{
  background:#fff;
  border:1px solid #eee9ec;
  border-radius:18px;
  padding:28px 24px;
  overflow-x:auto;
}

.mk-rack-columns{
  display:grid;
  grid-template-columns:
    36px
    repeat(12,52px);
  width:max-content;
  margin-bottom:8px;
}

.mk-rack-column-number{
  width:52px;
  text-align:center;
  font-size:15px;
  font-weight:600;
  color:#20b5c7;
}

.mk-rack-grid{
  width:max-content;
}

.mk-rack-row{
  display:grid;
  grid-template-columns:
    36px
    auto;
  align-items:end;
  margin-bottom:5px;
}

.mk-rack-row-letter{
  width:36px;
  text-align:center;
  padding-bottom:20px;
  color:#cf8998;
  font-size:15px;
  font-weight:600;
}

.mk-rack-row-cells{
  display:grid;
  grid-template-columns:
    repeat(12,52px);
  height:64px;
  align-items:end;
}

.mk-rack-space{
  width:52px;
  height:64px;
}

/* ============================================================
   EMPLACEMENT / DEMI-LUNE
   ============================================================ */

.mk-rack-slot{
  position:relative;
  width:52px;
  height:64px;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  cursor:pointer;
}

.mk-rack-slot::before{
  content:"";
  position:absolute;
  left:5px;
  right:5px;
  bottom:4px;
  height:35px;

  border-left:3px solid #111;
  border-right:3px solid #111;
  border-bottom:3px solid #111;

  border-radius:0 0 32px 32px;

  z-index:1;
}

/* ============================================================
   CONTENEUR BOUTEILLE
   ============================================================ */

.mk-rack-bottle{
  position:absolute;
  left:50%;
  bottom:7px;

  width:42px;
  height:42px;

  transform:translateX(-50%);

  pointer-events:none;
  z-index:2;
}

/* ============================================================
   CUL DE BOUTEILLE
   Gros cercle + anneau blanc + petit arc noir
   ============================================================ */

.mk-rack-cul .mk-rack-body,
.mk-rack-bottom-end .mk-rack-body{

  display:block;

  position:absolute;

  left:50%;
  top:2px;

  width:42px;
  height:42px;

  transform:translateX(-50%);

  border-radius:50%;

  background:#d5d5d5;

  border:0;

  box-sizing:border-box;

}

.mk-rack-cul .mk-rack-body::before,
.mk-rack-bottom-end .mk-rack-body::before{

  content:"";

  position:absolute;

  left:50%;
  top:50%;

  width:22px;
  height:22px;

  transform:translate(-50%,-50%);

  border-radius:50%;

  background:#fff;

}

.mk-rack-cul .mk-rack-body::after,
.mk-rack-bottom-end .mk-rack-body::after{

  content:"";

  position:absolute;

  left:50%;
  top:50%;

  width:8px;
  height:5px;

  transform:translate(-50%,-5%);

  border-left:2px solid #111;
  border-right:2px solid #111;
  border-bottom:2px solid #111;

  border-radius:0 0 8px 8px;

  box-sizing:border-box;

}

.mk-rack-cul .mk-rack-cork,
.mk-rack-bottom-end .mk-rack-cork{

  display:none !important;

}

/* ============================================================
   BOUCHON
   Petit cercle seul + petit arc noir
   ============================================================ */

.mk-rack-bouchon .mk-rack-body,
.mk-rack-cork-end .mk-rack-body{

  display:none !important;

}

.mk-rack-bouchon .mk-rack-cork,
.mk-rack-cork-end .mk-rack-cork{

  display:block !important;

  position:absolute;

  left:50%;
  top:50%;

  width:20px;
  height:20px;

  transform:translate(-50%,-50%);

  border-radius:50%;

  background:#d5d5d5;

  border:0;

  box-sizing:border-box;

}

.mk-rack-bouchon .mk-rack-cork::after,
.mk-rack-cork-end .mk-rack-cork::after{

  content:"";

  position:absolute;

  left:50%;
  top:50%;

  width:6px;
  height:4px;

  transform:translate(-50%,-5%);

  border-left:2px solid #111;
  border-right:2px solid #111;
  border-bottom:2px solid #111;

  border-radius:0 0 7px 7px;

  box-sizing:border-box;

}

/* ============================================================
   SUPPRESSION DES ANCIENNES ROTATIONS
   ============================================================ */

.mk-rack-cork-end,
.mk-rack-bottom-end{
  transform:translateX(-50%) !important;
  rotate:none !important;
}

/* ============================================================
   MOBILE
   ============================================================ */


/* ============================================================
   ESPACEMENT ENTRE LES GROUPES DU RACK
   B → C
   E → F
   H → I
   K → L
   N → O
   Q → R
   ============================================================ */

.mk-rack-row:nth-child(2),
.mk-rack-row:nth-child(5),
.mk-rack-row:nth-child(8),
.mk-rack-row:nth-child(11),
.mk-rack-row:nth-child(14),
.mk-rack-row:nth-child(17){
  margin-bottom:42px !important;
}

/*
 * Rosé
 */

.wine-dot.rose{
  background:#cf8194;
}

/*
 * Champagne rosé
 * volontairement plus clair
 */

.wine-dot.champagne-rose{
  background:#e8a8b8;
}

/* ============================================================
   COULEURS DES POINTS DE VIN
   ============================================================ */

/* Vin blanc : presque blanc */
.wine-dot.wine-white{
  background:#f7f7f3 !important;
}

/* Champagne / Blanc de blancs / Effervescent */
.wine-dot.white{
  background:#e8dfaa !important;
}

/* ============================================================
   BOUTON MOBILE — PLAN DE RANGEMENT
   ============================================================ */

.mobile-rack-button{
  display:none;
}

@media(max-width:700px){

  .mobile-rack-button{

    background:#fff;

    border:1px solid #e6dfe4;

    border-radius:13px;

    color:var(--ui-wine);

    box-shadow:
      0 3px 12px rgba(0,0,0,.12);

    cursor:pointer;

    font-size:22px;

  }

  .mobile-rack-button:active{

    transform:scale(.95);

  }

}

/* ============================================================
   FIN BOUTON MOBILE — PLAN DE RANGEMENT
   ============================================================ */

/* ============================================================
   ICONE PLAN DE RANGEMENT
   Cul de bouteille rouge
   ============================================================ */

.mobile-rack-button .rack-icon{

  position:relative;

  display:block;

  width:28px;
  height:28px;

  border-radius:50%;

  background:#b21f4d;

  box-sizing:border-box;

}

/*
 * Cercle blanc intérieur
 */

.mobile-rack-button .rack-icon::before{

  content:"";

  position:absolute;

  left:50%;
  top:50%;

  width:16px;
  height:16px;

  transform:
    translate(-50%,-50%);

  border-radius:50%;

  background:#fff;

}

/*
 * Petit motif central
 */

.mobile-rack-button .rack-icon::after{

  content:"";

  position:absolute;

  left:50%;
  top:50%;

  width:7px;
  height:5px;

  transform:
    translate(-50%,-20%);

  border-left:2px solid #222;
  border-right:2px solid #222;
  border-bottom:2px solid #222;

  border-radius:
    0 0 7px 7px;

  box-sizing:border-box;

}


/* === MOBILE RACK ICON VECTOR V1 === */

/*
 * Icône du plan de rangement :
 * cul de bouteille rouge
 * cercle blanc intérieur
 * petit arc central
 *
 * Aucun fichier image utilisé.
 */

@media(max-width:700px){

  .mobile-rack-button .rack-icon{


    flex:none;

  }

  /*
   * Cercle blanc intérieur
   */

  .mobile-rack-button .rack-icon-inner{

    position:absolute;

    left:50%;
    top:50%;

    width:16px;
    height:16px;

    transform:
      translate(-50%,-50%);

    border-radius:50%;

    background:#fff;

  }

  /*
   * Petit motif central
   */

  .mobile-rack-button .rack-icon-mark{

    position:absolute;

    left:50%;
    top:50%;

    width:7px;
    height:5px;

    transform:
      translate(-50%,-15%);

    border-left:2px solid #222;
    border-right:2px solid #222;
    border-bottom:2px solid #222;

    border-radius:
      0 0 7px 7px;

    box-sizing:border-box;

  }

}


/* ============================================================
   CORRECTION MOBILE DU PLAN DE RANGEMENT
   ============================================================ */

@media(max-width:700px){

  /*
   * Décalage du titre pour laisser la place au bouton.
   */
  .mk-rack-page{
    width:100% !important;
    max-width:none !important;
    padding:62px 0 30px !important;
    overflow:hidden !important;
  }

  .mk-rack-header{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .mk-rack-header h1{
    font-size:25px !important;
    line-height:1.15 !important;
  }

  .mk-rack-header .sub{
    font-size:14px !important;
  }

  /*
   * Le rack doit tenir entièrement dans la largeur
   * disponible sur téléphone.
   *
   * On réduit proportionnellement le plan complet.
   */
  .mk-rack-card{
    padding:14px 6px 16px !important;
  }

  .mk-rack-columns,
  .mk-rack-grid{
    transform-origin:top left;
  }

  /*
   * Largeur théorique du rack :
   * 36px + 12 x 52px = 660px
   *
   * Sur un téléphone ~390px :
   * facteur ~0.57
   */

  /*
   * On réduit l'espace vertical après chaque rangée
   * pour compenser le scale.
   */
  .mk-rack-row{
    margin-bottom:3px !important;
  }

  .mk-rack-row-gap{
    margin-bottom:24px !important;
  }

}

@media(max-width:390px){

  .mk-rack-columns,
  .mk-rack-grid{
    transform:scale(.52);
  }

  .mk-rack-grid{
    margin-bottom:-48% !important;
  }

}


/* ============================================================
   CORRECTION HAUTEUR DU RACK SUR MOBILE
   ============================================================ */

@media(max-width:700px){

  /*
   * Le rack fait environ :
   * 19 rangées x 64 px
   * + les espacements entre groupes.
   *
   * Avec l'échelle .57, sa hauteur visuelle est
   * d'environ 700 px.
   *
   * On fixe donc la hauteur du bloc transformé
   * pour supprimer l'espace blanc restant.
   */


  .mk-rack-grid{
    height:700px !important;
    overflow:visible !important;
  }

  .mk-rack-columns{
    height:34px !important;
    overflow:visible !important;
  }

}

@media(max-width:390px){

  .mk-rack-grid{
    height:650px !important;
  }

}


/* ============================================================
   CORRECTION MOBILE FINALE
   - bouton rack
   - taille réelle du rack
   - suppression du débordement vertical
   ============================================================ */

@media (max-width:700px){

  /* ----------------------------------------------------------
     BOUTON RACK
     ---------------------------------------------------------- */

  .mobile-rack-button{

    top:calc(env(safe-area-inset-top) + 12px) !important;
    left:16px !important;

    width:44px !important;
    height:44px !important;

    margin:0 !important;
    padding:0 !important;

    z-index:20000 !important;
    align-items:center !important;
    justify-content:center !important;

    transform:none !important;
  }

  /* ----------------------------------------------------------
     ESPACE SUPPLEMENTAIRE EN HAUT
     pour que le bouton ne recouvre pas le contenu
     ---------------------------------------------------------- */


  .mk-rack-page{
    padding-top:72px !important;
  }

  /* ----------------------------------------------------------
     RACK MOBILE

     Le rack réel fait :
     36px + (12 × 52px) = 660px

     On le réduit avec zoom :
     rendu final ≈ 363px sur un téléphone.

     Contrairement à transform:scale(),
     zoom réduit aussi la hauteur occupée dans la page.
     ---------------------------------------------------------- */

  .mk-rack-card{

    transform:none !important;

    width:
      calc(100% / 0.55) !important;

    max-width:none !important;

    zoom:0.55 !important;

    height:auto !important;

    min-height:0 !important;

    margin:0 !important;

    box-sizing:border-box !important;
  }

  /* ----------------------------------------------------------
     ANNULATION DES ANCIENS SCALES
     ---------------------------------------------------------- */

  .mk-rack-columns,
  .mk-rack-grid{

    transform:none !important;

    width:max-content !important;

    height:auto !important;

    margin:0 !important;

    overflow:visible !important;
  }

  .mk-rack-grid{
    margin-bottom:0 !important;
  }

  /* ----------------------------------------------------------
     ANNULATION DES ANCIENS HACKS DE HAUTEUR
     ---------------------------------------------------------- */

  .mk-rack-card{
    overflow:visible !important;
  }

}

@media (max-width:390px){

  .mk-rack-card{

    width:
      calc(100% / 0.52) !important;

    zoom:0.52 !important;

  }

}

/* ============================================================
   BOUTON RACK DANS LE BANDEAU "MA CAVE"
   ============================================================ */

.cellar-rack-button{
  display:none;
}

@media(max-width:700px){

  /*
   * Le bouton fait partie du bandeau.
   * Il N'est PAS fixed.
   */

  .cellar-reference-header .cellar-rack-button{

    margin:0 !important;
    padding:0 !important;

    border:1px solid #e6dfe4 !important;

    background:#fff !important;

    cursor:pointer !important;

  }

  /*
   * On neutralise toutes les anciennes règles
   * éventuelles sur l'ancien bouton.
   */

  .mobile-rack-button{
    display:none !important;
    position:static !important;
  }

  /*
   * Titre centré dans l'espace restant.
   */

  .cellar-reference-title{
    margin:0 auto !important;
    text-align:center !important;
    white-space:nowrap !important;
  }

  /*
   * Icône vectorielle.
   */

  .cellar-rack-button .rack-icon{

    position:relative;

    display:block;

    border-radius:50%;

    background:#b21f4d;

    box-sizing:border-box;

  }

  .cellar-rack-button .rack-icon-inner{

    position:absolute;

    left:50%;
    top:50%;

    width:16px;
    height:16px;

    transform:
      translate(-50%,-50%);

    border-radius:50%;

    background:#fff;

  }

  .cellar-rack-button .rack-icon-mark{

    position:absolute;

    left:50%;
    top:50%;

    width:7px;
    height:5px;

    transform:
      translate(-50%,-15%);

    border-left:2px solid #222;
    border-right:2px solid #222;
    border-bottom:2px solid #222;

    border-radius:
      0 0 7px 7px;

    box-sizing:border-box;

  }

}

/* ============================================================
   FIN BOUTON RACK BANDEAU
   ============================================================ */

/* ============================================================
   POSITION FINALE DU BANDEAU MA CAVE
   ============================================================ */

@media(max-width:700px){

  /*
   * On annule les anciens padding-top ajoutés pour le bouton.
   */
  .cellar-page{
    padding-top:15px !important;
  }

  /*
   * Bandeau "Ma Cave"
   */
  .cellar-reference-header{

    position:relative !important;

    padding:0 58px !important;

    margin:0 !important;

  }

  /*
   * Bouton rack : dans le bandeau,
   * jamais fixed.
   */
  .cellar-reference-header .cellar-rack-button{

    position:absolute !important;

    left:0 !important;
    top:50% !important;

    width:44px !important;
    height:44px !important;

    transform:translateY(-50%) !important;


    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    border-radius:13px !important;

    box-shadow:0 3px 12px rgba(0,0,0,.10) !important;

    z-index:5 !important;

  }

  /*
   * Titre centré.
   */
  

  /*
   * Recherche à droite.
   */
  .cellar-reference-search{

    position:absolute !important;

    right:0 !important;
    top:50% !important;

    transform:translateY(-50%) !important;

  }

  
  

}

/* ============================================================
   BOUTON FERMER — PLAN DE RANGEMENT
   ============================================================ */

.mk-rack-header{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
}

.mk-rack-close{

  width:44px !important;
  height:44px !important;

  flex:0 0 44px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  padding:0 !important;
  margin:0 !important;

  border:1px solid #e6dfe4 !important;
  border-radius:13px !important;

  background:#fff !important;

  color:var(--ui-wine) !important;

  font-family:Arial,sans-serif !important;
  font-size:32px !important;
  font-weight:300 !important;
  line-height:1 !important;

  cursor:pointer !important;

  box-shadow:
    0 3px 12px rgba(0,0,0,.08) !important;
}

.mk-rack-close:hover{
  background:#f8f2f5 !important;
}

.mk-rack-close:active{
  transform:scale(.95);
}

/* Mobile : bouton légèrement plus compact */
@media(max-width:700px){

  .mk-rack-close{

    width:42px !important;
    height:42px !important;

    flex-basis:42px !important;

    border-radius:12px !important;

    font-size:30px !important;

  }

}

/* ============================================================
   BOUTON FERMER DU PLAN DE RANGEMENT
   Même apparence que la page Ajouter une bouteille
   ============================================================ */

.mk-rack-header .mk-rack-close{

  width:58px !important;
  height:58px !important;

  flex:0 0 58px !important;

  border-radius:50% !important;

  border:0 !important;

  background:#701247 !important;

  color:#fff !important;

  font-family:Arial,sans-serif !important;

  font-size:42px !important;

  line-height:1 !important;

  display:flex !important;

  align-items:center !important;
  justify-content:center !important;

  padding:0 !important;

  cursor:pointer !important;

  box-shadow:none !important;

}

.mk-rack-header .mk-rack-close:hover{

  background:#701247 !important;

}

.mk-rack-header .mk-rack-close:active{

  transform:scale(.96);

}

/* Mobile */
@media(max-width:700px){

  .mk-rack-header .mk-rack-close{

    flex-basis:48px !important;

  }

}

/* ============================================================
   ALIGNEMENT VERTICAL DES PAGES
   Référence : "Ajouter une bouteille"
   ============================================================ */

/*
 * La page Ajouter utilise directement le padding de <main>.
 * Les autres pages ne doivent donc pas ajouter un espace
 * supplémentaire au-dessus.
 */

/* Accueil / Cave / Rack / Edition */
.cellar-page,
.mk-rack-page,
.wine-edit-page{
  padding-top:0 !important;
}


/*
 * Sur téléphone :
 * <main> fournit l'espace supérieur commun.
 */
@media(max-width:700px){

  main{
    padding-top:18px !important;
  }

}

/*
 * Sur ordinateur :
 * même principe : les pages ne rajoutent pas
 * d'espace au-dessus.
 */
@media(min-width:701px){

  main{
    padding-top:0 !important;
  }

}

/* ============================================================
   CROIX DU RACK = MEME TAILLE QUE LA PAGE MODIFICATION
   ============================================================ */

@media(max-width:700px){

  .mk-rack-header .mk-rack-close{

    width:40px !important;
    height:40px !important;

    flex:0 0 40px !important;

    font-size:27px !important;

    border-radius:50% !important;

  }

}

/* ============================================================
   ICONE RACK : SUPPRESSION DU FOND BLANC AUTOUR
   ============================================================ */

@media(max-width:700px){

  .cellar-rack-button{

    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;

    width:28px !important;
    height:28px !important;

    padding:0 !important;
    margin:0 !important;

  }

  .cellar-rack-button .rack-icon{

    width:28px !important;
    height:28px !important;

  }

}

/* ============================================================
   BOUTON RACK MOBILE
   LE BOUTON EST TRANSPARENT :
   seul le rond rouge de l'icône reste visible
   ============================================================ */

@media (max-width:700px){

  /*
   * Ancien bouton intégré à Ma Cave
   */
  .cellar-reference-header .cellar-rack-button,

  /*
   * Ancien bouton global éventuel
   */
  .mobile-rack-button,

  /*
   * Sécurité si le bouton porte les deux classes
   */
  button.cellar-rack-button,
  button.mobile-rack-button{

    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;

    width:28px !important;
    height:28px !important;

    min-width:28px !important;
    min-height:28px !important;

    padding:0 !important;
    margin:0 !important;

    border-radius:0 !important;

  }

  /*
   * Supprime d'éventuels pseudo-éléments
   * qui pourraient créer le fond blanc.
   */

  .cellar-reference-header .cellar-rack-button::before,
  .cellar-reference-header .cellar-rack-button::after,
  .mobile-rack-button::before,
  .mobile-rack-button::after{

    content:none !important;

    display:none !important;

  }

  /*
   * L'icône elle-même reste exactement inchangée.
   */

  .cellar-reference-header .rack-icon,
  .mobile-rack-button .rack-icon{

    display:block !important;

    width:28px !important;
    height:28px !important;

    margin:0 !important;
    padding:0 !important;

  }

}

/* ============================================================
   MODALE FICHE BOUTEILLE
   Toujours au-dessus du rack
   ============================================================ */

.modal{
  position:fixed !important;
  inset:0 !important;

  z-index:1000000 !important;
}

.modal-box{
  position:relative !important;

  z-index:1000001 !important;
}

/* ============================================================
   CHOIX EMPLACEMENT RACK DEPUIS AJOUT
   ============================================================ */

.rack-position-field{
  grid-column:1 / -1;
}

.add-rack-position-button{

  width:100%;
  min-height:48px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:0 14px;

  border:1px solid var(--line);
  border-radius:9px;

  background:#fff;
  color:var(--ink);

  font:inherit;
  text-align:left;

  cursor:pointer;
}

.add-rack-position-button:hover{
  border-color:#701247;
}

#addRackPositionText{
  color:#777;
}

#addRackPositionText.selected{
  color:#222;
  font-weight:600;
}

.add-rack-position-arrow{
  color:#701247;
  font-size:26px;
  line-height:1;
}

/* ============================================================
   AJOUT / MODIFICATION — APPARENCE IDENTIQUE
   Bloc final prioritaire
   ============================================================ */

/*
 * Page modification :
 * même fond, même largeur de contenu et même rythme
 * que la page d'ajout.
 */

.wine-edit-page{
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  color:var(--ink) !important;
}

/*
 * Le titre de modification reprend exactement
 * le rendu du h1 de la page d'ajout.
 */

.wine-edit-page h1{
  margin:0 !important;
  color:var(--ink) !important;
  font-size:30px !important;
  line-height:1.2 !important;
  font-weight:700 !important;
}

/*
 * Même cadre que la page d'ajout.
 */

.wine-edit-page .form-card{
  padding:22px !important;
  background:#fff !important;
  border:1px solid var(--line) !important;
  border-radius:16px !important;
  box-shadow:0 2px 10px #3a281208 !important;
}

/*
 * Même grille.
 */

.wine-edit-page .form-grid{
  display:grid !important;
  grid-template-columns:repeat(2,1fr) !important;
  gap:13px !important;
}

/*
 * Même apparence des labels.
 */

.wine-edit-page .field label{
  display:block !important;
  font-size:12px !important;
  color:var(--muted) !important;
  margin-bottom:5px !important;
}

/*
 * Même taille des champs.
 */

.wine-edit-page .field input,
.wine-edit-page .field select,
.wine-edit-page .field textarea{
  width:100% !important;
  border:1px solid var(--line) !important;
  border-radius:9px !important;
  padding:10px !important;
  font:inherit !important;
  background:#fff !important;
  color:var(--ink) !important;
}

/*
 * Notes.
 */

.wine-edit-page .field textarea{
  min-height:100px !important;
  resize:vertical !important;
}

/*
 * Même pied que la page d'ajout.
 */

.wine-edit-page .form-actions{
  display:flex !important;
  justify-content:flex-end !important;
  gap:10px !important;
  padding:0 !important;
}

/*
 * Bouton Annuler.
 */

.wine-edit-page .form-actions .wine-edit-cancel{
  border:1px solid var(--line) !important;
  background:#fff !important;
  color:var(--ink) !important;
  border-radius:10px !important;
  padding:11px 16px !important;
  min-height:44px !important;
  font:inherit !important;
  cursor:pointer !important;
}

/*
 * Bouton Enregistrer.
 */

.wine-edit-page .form-actions .primary{
  background:var(--wine) !important;
  color:#fff !important;
  border:0 !important;
  border-radius:10px !important;
  padding:11px 16px !important;
  min-height:44px !important;
  font-weight:700 !important;
  cursor:pointer !important;
}

/*
 * Mobile :
 * exactement le même rythme de page que l'ajout.
 */

@media(max-width:700px){
  .wine-edit-page h1{
    font-size:30px !important;
  }
  .wine-edit-page .form-grid{
    grid-template-columns:1fr !important;
    gap:13px !important;
  }

  .wine-edit-page .form-grid .full{
    grid-column:auto !important;
  }

  .wine-edit-page .form-actions button{
    width:auto !important;
    min-height:44px !important;
    padding:11px 16px !important;
  }

}

/*
 * Le modal de modification ne doit pas ajouter
 * son propre encadrement autour du formulaire.
 */

#modal .modal-box:has(.wine-edit-page){
  padding:0 !important;
  max-width:850px !important;
  width:100% !important;
  background:transparent !important;
  box-shadow:none !important;
}

/*
 * Sur téléphone le contenu prend exactement la largeur
 * disponible, comme la page d'ajout.
 */

@media(max-width:700px){

  #modal .modal-box:has(.wine-edit-page){
    width:100% !important;
    max-width:none !important;
    min-height:100vh !important;
    border-radius:0 !important;
    padding:18px 14px 28px !important;
    background:var(--bg) !important;
    overflow-y:auto !important;
  }

}

/* ============================================================
   MODIFICATION — HAUTEUR IDENTIQUE À LA PAGE AJOUT
   ============================================================ */

/*
 * La fiche de modification doit occuper toute la hauteur
 * disponible du conteneur, comme la page d'ajout.
 */

.wine-edit-page{
  min-height:calc(100vh - 36px) !important;

  display:flex !important;
  flex-direction:column !important;

}

/*
 * Le formulaire reste le même cadre que l'ajout
 * mais s'étend jusqu'en bas de la page.
 */

.wine-edit-page .form-card{
  width:100% !important;
  max-width:850px !important;

  flex:1 1 auto !important;

  display:flex !important;
  flex-direction:column !important;

}

/*
 * Le formulaire prend toute la hauteur disponible.
 */

.wine-edit-page .form-card form{
  display:flex !important;
  flex-direction:column !important;

  flex:1 1 auto !important;
}

/*
 * La zone des champs occupe l'espace disponible.
 */

.wine-edit-page .form-grid{
  flex:0 0 auto !important;
}

/*
 * Les boutons restent en bas du même cadre,
 * comme sur la page d'ajout.
 */

.wine-edit-page .form-actions{
  margin-top:auto !important;
  padding-top:18px !important;
}

/*
 * Mobile : le cadre doit aller jusqu'au bas
 * du contenu visible, sans hauteur artificiellement courte.
 */

@media(max-width:700px){
  .wine-edit-page .form-card{
    max-width:none !important;


  }
  .wine-edit-page .form-actions{
    padding-bottom:0 !important;
  }

}

/* ============================================================
   MODIFICATION — CORRECTION DEFINITIVE DU BAS DE PAGE
   ============================================================ */

/*
 * Le modal de modification devient un conteneur de page
 * réellement scrollable.
 */

#modal.edit-modal{
  overflow-y:auto !important;
  overflow-x:hidden !important;

  align-items:flex-start !important;
  justify-content:center !important;

  padding:
    18px 20px 120px !important;

  -webkit-overflow-scrolling:touch !important;
}

/*
 * Le modal-box ne doit plus couper le contenu à 100vh.
 */

#modal.edit-modal > .modal-box{
  width:100% !important;
  max-width:850px !important;

  height:auto !important;
  max-height:none !important;

  min-height:calc(100vh - 36px) !important;

  overflow:visible !important;

  padding:0 !important;

  margin:0 auto !important;

  border-radius:0 !important;

  background:transparent !important;

  box-shadow:none !important;
}

/*
 * La page de modification prend toute la hauteur,
 * comme la page d'ajout.
 */

#modal.edit-modal .wine-edit-page{
  width:100% !important;

  min-height:calc(100vh - 36px) !important;


}

/*
 * Le cadre blanc doit aller jusqu'en bas.
 */

#modal.edit-modal .wine-edit-page .form-card{
  width:100% !important;

  min-height:calc(100vh - 130px) !important;

  max-width:850px !important;


  display:flex !important;
  flex-direction:column !important;
}

/*
 * Le formulaire garde son contenu naturel.
 */

#modal.edit-modal .wine-edit-page form{
  display:flex !important;
  flex-direction:column !important;

  min-height:100% !important;
}

/*
 * Le pied reste après les champs et dispose
 * d'un vrai espace inférieur.
 */

#modal.edit-modal .wine-edit-page .form-actions{
  margin-top:18px !important;

  padding-top:18px !important;

  padding-bottom:40px !important;
}

/*
 * IMPORTANT :
 * le bas supplémentaire existe physiquement dans la page,
 * donc Safari ne masque plus les boutons derrière sa barre.
 */

@media(max-width:700px){

  #modal.edit-modal{
    padding:
      18px 14px 140px !important;

    align-items:flex-start !important;
  }
  #modal.edit-modal .wine-edit-page{
    min-height:
      calc(100vh - 36px) !important;
  }
  #modal.edit-modal .wine-edit-page .form-actions{
    padding-bottom:50px !important;
  }

}

/* ============================================================
   QUANTITE FICHE VIN — POSITION SOUS LES INFOS A DROITE V2
   ============================================================ */

.wine-detail-quantity-control{
  display:flex !important;
  justify-content:flex-start !important;
  align-items:center !important;

  /* même colonne que les infos à droite de la photo */
  margin-left:252px !important;

  /* remonte dans l'espace sous France */
  margin-top:-78px !important;
  margin-bottom:28px !important;

  width:auto !important;
  position:relative !important;
  z-index:5 !important;
}

.wine-detail-quantity-control .qty-control{
  width:auto !important;
  margin:0 !important;
  display:inline-flex !important;
}


/* ============================================================
   QUANTITE FICHE VIN — DANS LA COLONNE DROITE
   ============================================================ */

.wine-detail-main .wine-detail-quantity-control{
  display:flex !important;
  justify-content:flex-start !important;
  align-items:center !important;
  margin-top:18px !important;
  margin-left:0 !important;
  margin-bottom:0 !important;
  width:auto !important;
}

.wine-detail-main .wine-detail-quantity-control .qty-control{
  display:inline-flex !important;
  width:auto !important;
  margin:0 !important;
}

/* ============================================================
   FICHE DETAIL BOUTEILLE — ASCENSEUR VERTICAL
   ============================================================ */

.modal:not(.edit-modal) .modal-box{
  max-height:100dvh !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;

  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}

/* Mobile */
@media (max-width:700px){

  .modal:not(.edit-modal) .modal-box{
    height:100dvh !important;
    padding-bottom:
      calc(30px + env(safe-area-inset-bottom)) !important;
  }

}

/* ============================================================
   PHOTO FICHE VIN — AGRANDISSEMENT
   ============================================================ */

.wine-detail-photo-img{
  cursor:zoom-in !important;
}

#wine-photo-lightbox{
  position:fixed;
  inset:0;
  z-index:2000000;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:30px;

  background:rgba(0,0,0,.88);
}

#wine-photo-lightbox img{
  display:block;

  max-width:95vw;
  max-height:92vh;

  width:auto;
  height:auto;

  object-fit:contain;

  border-radius:10px;

  cursor:default;
}

.wine-photo-lightbox-close{
  position:fixed;
  top:18px;
  right:22px;

  width:48px;
  height:48px;

  border:0;
  border-radius:50%;

  background:#fff;
  color:#701247;

  font-size:34px;
  line-height:1;

  cursor:pointer;

  z-index:2000001;
}

@media(max-width:700px){

  #wine-photo-lightbox{
    padding:12px;
  }

  #wine-photo-lightbox img{
    max-width:98vw;
    max-height:90vh;
  }

}

/* === MAKAVAVIN GLOBAL WINE COLORS CSS V1 === */

/*
 * ============================================================
 * PALETTE UNIQUE DE TOUTE L'APPLICATION
 * ============================================================
 *
 * Rouge              #9b174f
 * Blanc              #d6a64e
 * Rosé               #cf8194
 * Bulles             #6fa9cf
 * Champagne rosé     #e8a8b8
 */

/* ROUGE */
.wine-dot.red,
.wine-detail-dot.red,
.mk-rack-bottle.red,
.mk-rack-wine.red {
  background:#9b174f !important;
}

/* BLANC TRANQUILLE */
.wine-dot.wine-white,
.wine-detail-dot.wine-white,
.mk-rack-bottle.wine-white,
.mk-rack-wine.wine-white {
  background:#d6a64e !important;
}

/* ROSÉ */
.wine-dot.rose,
.wine-detail-dot.rose,
.mk-rack-bottle.rose,
.mk-rack-wine.rose {
  background:#cf8194 !important;
}

/*
 * CHAMPAGNE
 * BLANC DE BLANCS
 * EFFERVESCENT
 */
.wine-dot.sparkling,
.wine-detail-dot.sparkling,
.mk-rack-bottle.sparkling,
.mk-rack-wine.sparkling {
  background:#6fa9cf !important;
}

/* CHAMPAGNE ROSÉ */
.wine-dot.champagne-rose,
.wine-detail-dot.champagne-rose,
.mk-rack-bottle.champagne-rose,
.mk-rack-wine.champagne-rose {
  background:#e8a8b8 !important;
}

/*
 * FICHE DETAIL
 */
.wine-detail-dot{
  background:var(--wine-color, #777777);
}

/*
 * CATÉGORIES
 */
.wine-type-menu .color-chip{
  transition:
    background .15s ease,
    color .15s ease,
    border-color .15s ease !important;
}

/* === END MAKAVAVIN GLOBAL WINE COLORS CSS V1 === */

/* === RACK MOVE FROM EDIT V1 === */

/*
 * Première étape :
 * seules les bouteilles du vin à déplacer restent visuellement
 * mises en valeur.
 */
.mk-rack-slot.mk-rack-move-disabled{
  opacity:.16 !important;
  filter:grayscale(1) !important;
  cursor:default !important;
}

.mk-rack-slot.mk-rack-move-target{
  opacity:1 !important;
  filter:none !important;
  transform:scale(1.08);
  z-index:5;
  cursor:pointer !important;
}

.mk-rack-slot.mk-rack-move-target
.mk-rack-bottle{
  filter:
    drop-shadow(0 0 5px rgba(112,18,71,.55))
    drop-shadow(0 0 10px rgba(112,18,71,.22));
}

/*
 * Deuxième étape :
 * les emplacements libres sont les destinations possibles.
 */
.mk-rack-slot.mk-rack-move-destination{
  opacity:1 !important;
}

.mk-rack-slot.mk-rack-move-destination:hover{
  transform:scale(1.08);
}

/* === END RACK MOVE FROM EDIT V1 === */

/* ============================================================
   MODIFICATION DIRECTE DU RACK
   ============================================================ */

.mk-rack-header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-shrink:0;
}

.mk-rack-edit-button{
  width:42px !important;
  height:42px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  padding:0 !important;
  margin:0 !important;

  border-radius:50% !important;

  font-size:20px !important;
  line-height:1 !important;

  cursor:pointer;
}

.mk-rack-edit-button.active{
  background:#701247 !important;
  color:#fff !important;
}

/* ============================================================
   RACK — CONFIRMATION DEPLACEMENT
   ============================================================ */

.rack-direct-confirm-overlay{
  position:fixed;
  inset:0;

  z-index:3000000;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:20px;

  background:rgba(20,20,20,.42);
}

.rack-direct-confirm-box{
  width:100%;
  max-width:380px;

  padding:22px;

  background:#fff;

  border-radius:16px;

  box-shadow:
    0 20px 60px rgba(0,0,0,.25);

  text-align:left;
}

.rack-direct-confirm-title{
  margin-bottom:6px;

  font-size:20px;
  font-weight:700;

  color:#28252a;
}

.rack-direct-confirm-line{
  margin-top:2px;

  font-size:14px;

  color:#666;
}

.rack-direct-confirm-position{
  margin-top:16px;
  padding:11px 12px;

  background:#f5f3f2;

  border-radius:9px;

  font-size:14px;
}

.rack-direct-confirm-position strong{
  color:#701247;
}

.rack-direct-confirm-question{
  margin-top:18px;

  font-weight:600;
}

.rack-direct-confirm-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;

  margin-top:20px;
}

.rack-direct-confirm-actions button{
  min-height:42px;
  padding:10px 16px;
}

/* Destination :
   les cases libres deviennent visuellement sélectionnables. */

.mk-rack-slot.mk-rack-move-destination{
  cursor:pointer !important;
}

/* === MAKAVAVIN ICON LOCATION BOTTLE === */

/*
 * Petit cul de bouteille pour la ligne Emplacement.
 * Le cadre rose extérieur reste celui de .wine-detail-icon.
 */

.wine-location-bottle {
  width: 24px;
  height: 24px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  position: relative;

  border-radius: 50%;

  background: #b51f57;
}

/* Cercle blanc intérieur */

.wine-location-bottle::before {
  content: "";

  width: 12px;
  height: 12px;

  position: absolute;

  border-radius: 50%;

  background: #fff;
}

/* Petit creux du cul de bouteille */

.wine-location-hole {
  width: 6px;
  height: 5px;

  position: relative;
  z-index: 1;

  box-sizing: border-box;

  border-left: 2px solid #242424;
  border-right: 2px solid #242424;
  border-bottom: 2px solid #242424;

  border-radius: 0 0 5px 5px;
}

/* === MAKAVAVIN ICON QUANTITY NUMBERS === */

/*
 * Quantité :
 *
 *       1
 *     2   3
 *
 * Le cadre rose existant est conservé.
 */

.wine-quantity-numbers {
  position: relative;
  display: block;

  width: 30px;
  height: 30px;

  margin: auto;
}

.wine-quantity-numbers .qnum {
  position: absolute;

  color: #9b174f;

  font-size: 11px;
  font-weight: 800;
  line-height: 1;

  font-family:
    Arial,
    Helvetica,
    sans-serif;
}

/* 1 en haut */

.wine-quantity-numbers .qnum-1 {
  top: 3px;
  left: 50%;

  transform: translateX(-50%);
}

/* 2 en bas à gauche */

.wine-quantity-numbers .qnum-2 {
  bottom: 3px;
  left: 5px;
}

/* 3 en bas à droite */

.wine-quantity-numbers .qnum-3 {
  bottom: 3px;
  right: 5px;
}

/* ============================================================
   AUTOCOMPLÉTION PRODUCTEUR
   ============================================================ */

.producer-autocomplete-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 2px);
  z-index: 10000;
  background: white;
  border: 1px solid #d8d8d8;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  max-height: 360px;
  overflow-y: auto;
}

.producer-autocomplete-item {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.producer-autocomplete-item:hover,
.producer-autocomplete-item.active {
  background: #f2f2f2;
}

/* ============================================================
   MA CAVE — RECHERCHE INLINE UNIQUE
   ============================================================ */

/*
 * Le bandeau est un conteneur flex.
 */

.cellar-reference-header{
    display:flex !important;
    align-items:center !important;
    width:100% !important;
}

/*
 * Zone centrale.
 */

.cellar-reference-title{
    position:relative !important;

    flex:1 1 auto !important;

    min-width:0 !important;

    height:100% !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    overflow:hidden !important;

    box-sizing:border-box !important;
}

/*
 * "Ma Cave - XX bouteilles"
 */

#cellar-reference-normal{
    display:flex !important;

    align-items:baseline !important;

    justify-content:center !important;

    white-space:nowrap !important;

    width:100% !important;
}

/*
 * Quand la recherche est ouverte,
 * le texte disparaît complètement.
 */

#cellar-reference-normal.search-normal-hidden{
    display:none !important;
}

/*
 * Recherche fermée.
 */

#cellar-reference-search-inline.hidden{
    display:none !important;
}

/*
 * Recherche ouverte.
 */

#cellar-reference-search-inline.search-inline-open{
    display:flex !important;

    align-items:center !important;

    width:100% !important;

    height:100% !important;

    min-width:0 !important;

    margin:0 !important;

    padding:0 !important;

    background:transparent !important;

    border:0 !important;

    box-shadow:none !important;

    visibility:visible !important;

    opacity:1 !important;

    box-sizing:border-box !important;

    z-index:100 !important;
}

/*
 * Loupe à gauche du champ.
 */

#cellar-reference-search-inline
.cellar-inline-search-icon{

    flex:0 0 auto !important;

    width:24px !important;

    margin:0 5px 0 0 !important;

    padding:0 !important;

    font-family:Arial,sans-serif !important;

    font-size:21px !important;

    line-height:1 !important;

    color:var(--wine,#701247) !important;

    visibility:visible !important;

    opacity:1 !important;
}

/*
 * Champ.
 */

#cellar-reference-search-inline
input#search{

    display:block !important;

    flex:1 1 auto !important;

    width:100% !important;

    min-width:0 !important;

    height:38px !important;

    margin:0 !important;

    padding:0 4px !important;

    border:0 !important;

    outline:none !important;

    box-shadow:none !important;

    background:transparent !important;

    color:inherit !important;

    font-family:inherit !important;

    font-size:16px !important;

    line-height:38px !important;

    -webkit-appearance:none !important;

    appearance:none !important;

    visibility:visible !important;

    opacity:1 !important;

}

/*
 * Pas de grosse barre blanche.
 */

#cellar-reference-search-inline
input#search:focus{

    border:0 !important;

    outline:none !important;

    box-shadow:none !important;

}

/*
 * Placeholder.
 */

#cellar-reference-search-inline
input#search::placeholder{

    color:#aaa6aa !important;

    opacity:1 !important;

}

/*
 * Mobile.
 */

@media(max-width:700px){

    .cellar-reference-header{

        min-height:58px !important;

        height:58px !important;

        padding-left:58px !important;

        padding-right:58px !important;

        box-sizing:border-box !important;

    }

    .cellar-reference-title{

        min-width:0 !important;

        width:auto !important;

        padding:0 5px !important;

    }

    #cellar-reference-search-inline.search-inline-open{

        width:100% !important;

        max-width:none !important;

    }


}

/*
 * Petit téléphone.
 */

@media(max-width:390px){

    .cellar-reference-header{

        padding-left:50px !important;

        padding-right:50px !important;

    }

    .cellar-reference-title{

        padding:0 3px !important;

    }

}

/* === FIN RECHERCHE INLINE UNIQUE === */

/* === ESPACE MA CAVE / COMPTEUR === */

#cellar-reference-normal{
    gap:6px !important;
}

/* === SUPPRESSION LOUPE DANS LA BARRE INLINE === */

#cellar-reference-search-inline .cellar-inline-search-icon {
    display: none !important;
}

/* ============================================================
   RECHERCHE — CROIX ROUGE COMME PAGE MODIFICATION
   Ne modifie pas la loupe.
   ============================================================ */

#cellarSearchButtonIcon{
    color: var(--ui-wine, #701247) !important;
    font-family: Georgia, serif !important;
    font-size: 30px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
}

/* ============================================================
   FIN CORRECTION
   ============================================================ */

/* ============================================================
   SEARCH — .wine-detail-close EXACT
   ============================================================ */

/*
 * Pendant la recherche ouverte, le bouton est réellement
 * un .wine-detail-close.
 *
 * On ne touche donc PAS à l'apparence de la loupe fermée.
 */

button.wine-detail-close#cellarSearchButton{

    width:44px !important;
    height:44px !important;

    min-width:44px !important;
    min-height:44px !important;

    flex:0 0 44px !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    padding:0 !important;
    margin:0 !important;

    border:0 !important;
    border-radius:50% !important;

    background:#701247 !important;
    color:#fff !important;

    font-family:Arial,sans-serif !important;
    font-size:30px !important;
    font-weight:400 !important;
    line-height:1 !important;

    box-shadow:none !important;

    outline:none !important;

    appearance:none !important;
    -webkit-appearance:none !important;

}

@media(max-width:700px){

    button.wine-detail-close#cellarSearchButton{

        width:40px !important;
        height:40px !important;

        min-width:40px !important;
        min-height:40px !important;

        flex-basis:40px !important;

        font-size:27px !important;

    }

}

#cellar-reference-search-inline.search-inline-open
.cellar-inline-search-icon{
    display:none !important;
}

/* ============================================================
   RECHERCHE — CROIX TOUJOURS À DROITE
   ============================================================ */

#cellar-reference-search-inline.search-inline-open{
    position:relative !important;
    justify-content:center !important;
}

#cellar-reference-search-inline.search-inline-open #search{
    position:absolute !important;

    left:50% !important;
    transform:translateX(-50%) !important;

    width:70% !important;
    max-width:500px !important;

    text-align:center !important;
}

#cellarSearchButton.wine-detail-close{
    position:absolute !important;

    right:0 !important;
    top:50% !important;

    transform:translateY(-50%) !important;

    z-index:1000 !important;
}

/* === RETRAIT — MASQUAGE DES AUTRES BOUTEILLES === */

/*
 * Uniquement pendant le mode retrait.
 *
 * On conserve la structure du rack afin de ne rien casser,
 * mais les emplacements des autres bouteilles deviennent
 * invisibles.
 */

.rack-plan-slot.rack-consume-hide{
    visibility:hidden !important;
}

.rack-plan-slot.rack-consume-hide *{
    visibility:hidden !important;
}

/* === FIN RETRAIT — MASQUAGE DES AUTRES BOUTEILLES === */

/* ============================================================
   RETRAIT — MASQUER LES AUTRES EMPLACEMENTS
   ============================================================ */

.rack-plan-slot.mk-consume-hidden{
    visibility:hidden !important;
    pointer-events:none !important;
}

.rack-plan-slot.mk-consume-hidden *{
    visibility:hidden !important;
    pointer-events:none !important;
}

.mk-rack-slot.mk-rack-consume-hidden * {
    visibility: hidden !important;
    pointer-events: none !important;
}

.mk-rack-slot.mk-rack-consume-target {
    pointer-events: auto !important;
}

/* === FIN MK RACK CONSUME FILTER DIRECT === */

/* ============================================================
   MODE RETRAIT — AUTRES EMPLACEMENTS EN GRIS
   ============================================================ */

/*
 * Les emplacements des autres bouteilles restent présents
 * dans la grille, mais leur contenu est remplacé visuellement
 * par un emplacement gris.
 */

.mk-rack-slot.mk-rack-consume-hidden {


    border-color: #b8b8b8 !important;
}

/*
 * On masque uniquement la bouteille à l'intérieur.
 * Le slot lui-même reste gris et visible.
 */

.mk-rack-slot.mk-rack-consume-hidden > * {

    visibility: hidden !important;

}

/*
 * On s'assure que le gris reste uniforme même si
 * des règles de couleur du rack ciblent les éléments internes.
 */

.mk-rack-slot.mk-rack-consume-hidden::before,
.mk-rack-slot.mk-rack-consume-hidden::after {

    visibility: visible !important;

    background: transparent !important;

}

/*
 * La bouteille sélectionnée conserve son apparence normale.
 */

.mk-rack-slot.mk-rack-consume-target {

    visibility: visible !important;

    opacity: 1 !important;

}

/*
 * On force le bouton à utiliser l'apparence
 * d'un emplacement vide existant.
 */

.mk-rack-slot.mk-rack-consume-hidden {


    color: inherit !important;

}

/* ============================================================
   FIN
   ============================================================ */

/* ============================================================
   MODE RETRAIT — AUTRES BOUTEILLES = EMPLACEMENTS VIDES
   ============================================================ */

/*
 * On ne cache PAS le slot.
 * On transforme uniquement son apparence pour reprendre
 * exactement celle d'un emplacement vide.
 */

.mk-rack-slot.mk-rack-consume-hidden {

    visibility: visible !important;

    pointer-events: none !important;

    opacity: 1 !important;

    /*
     * Apparence neutre du rack.
     */
    background: #eeeeee !important;

}

/*
 * Les éléments internes de décoration ne doivent pas
 * réintroduire l'apparence de la bouteille.
 */

.mk-rack-slot.mk-rack-consume-hidden
.mk-rack-body,
.mk-rack-slot.mk-rack-consume-hidden
.mk-rack-cork {

    visibility: hidden !important;

}

/* ============================================================
   MODE RETRAIT — AUTRES EMPLACEMENTS = APPARENCE VIDE
   ============================================================ */

/*
 * On conserve exactement le slot du rack.
 * On masque uniquement la bouteille.
 * Le slot reprend l'apparence visuelle d'un emplacement vide.
 */


/*
 * La bouteille et son contenu sont invisibles.
 * Aucun fond supplémentaire, aucun pseudo-élément.
 */

.mk-rack-slot.mk-rack-consume-hidden
.mk-rack-bottle {

    visibility: hidden !important;

}

/*
 * On force le bouton à utiliser l'apparence
 * d'un emplacement vide existant.
 */


/* ============================================================
   FIN
   ============================================================ */

/* ==========================================================================
   MULTI-CAVES — DO / MAWO
   ========================================================================== */

.cellar-switch-button{
  gap:7px !important;
}

.cellar-switch-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:25px;
  font-size:23px;
  line-height:1;
}

.cellar-switch-overlay{
  position:fixed;
  inset:0;
  z-index:30000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(2px);
}

.cellar-switch-box{
  width:min(360px,calc(100vw - 32px));
  padding:22px;
  border:1px solid #eee9ec;
  border-radius:18px;
  background:#fff;
  box-shadow:0 12px 40px rgba(0,0,0,.18);
}

.cellar-switch-title{
  margin:0 0 17px;
  color:#363238;
  font-size:21px;
  font-weight:800;
}

.cellar-switch-choice{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:52px;
  margin:8px 0;
  padding:0 14px;
  border:1px solid #e6dfe4;
  border-radius:13px;
  background:#fff;
  color:#363238;
  font:inherit;
  font-size:16px;
  text-align:left;
  cursor:pointer;
}

.cellar-switch-choice.active{
  border-color:var(--ui-wine);
  color:var(--ui-wine);
  font-weight:700;
}

.cellar-switch-radio{
  width:22px;
  color:var(--ui-wine);
  font-size:18px;
  text-align:center;
}

.cellar-switch-cancel{
  display:block;
  margin:18px auto 0;
  padding:8px 14px;
  border:0;
  background:transparent;
  color:#777;
  font:inherit;
  cursor:pointer;
}




/* === MAWO : AUCUN ESPACE APRÈS B E H === */
/*
 * Priorité supérieure à l'ancienne règle nth-child
 * qui impose 42 px après les lignes 2, 5 et 8.
 */
.mk-rack-grid .mk-rack-row.mk-rack-row-mawo-no-gap {
  margin-bottom: 0 !important;
}