/* La palette composee (21 octobre 2026). Tout est borne a .compo : rien ne deborde sur le reste du site. */
.compo{--nuit:#0c1a2b;--nuit2:#13263d;--creme:#f6f1e7;--doux:#aebccd;--ligne:#ffffff24;
  --encre:#1b2330;--papier:#f6f1e7;--rouge:#b8152d;
  position:relative;margin:14px calc(50% - 50vw);border-radius:0;color:#fff;font-family:inherit;
  background:radial-gradient(900px 320px at 50% 0,#1d3f63 0,transparent 70%),var(--nuit);
  padding:44px clamp(14px,4vw,48px) 0}
.compo>*{max-width:1120px;margin-left:auto;margin-right:auto}
.compo *{box-sizing:border-box}
.compo-haut small{color:var(--doux);letter-spacing:.14em;text-transform:uppercase;font-size:.72rem}
.compo-haut h1{font-size:2rem;line-height:1.08;margin:.2rem 0 .4rem;font-weight:800;letter-spacing:-.02em;color:var(--creme)}
.compo-haut h1 em{font-style:normal;color:#f4c542}
.compo-regle{text-align:center;font-size:.98rem;color:var(--doux);margin:0 auto 1.6rem}
.compo-regle strong{color:var(--creme)}
.compo .alerte{margin:.6rem 0}
.compo-carte-info{background:var(--nuit2);border-radius:18px;padding:1.2rem}
.compo-carte-info h2{margin:0 0 .5rem;color:var(--creme)}
.compo-carte-info p{color:#d9d6cd}

/* le carton en cours, colle en haut pendant qu'on choisit */
.plateau{max-width:520px;margin:0 auto 2rem;background:#ffffff0f;border:1px solid var(--ligne);border-radius:22px;padding:16px 18px}
.plateau .titre{display:flex;justify-content:space-between;align-items:baseline;font-size:.9rem;color:var(--doux);margin-bottom:10px}
.plateau .titre strong{color:var(--creme);font-size:1.05rem}
.carton-vue{position:relative;border-radius:14px;padding:10px;background:#b98b57;box-shadow:inset 0 -6px 0 #0002;overflow:hidden}
.carton-vue .alv{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.alveole{aspect-ratio:1;border-radius:50%;background:#7a5a35;box-shadow:inset 0 3px 5px #0006;display:grid;place-items:center}
.alveole i{display:block;width:78%;height:78%;border-radius:50%;background:var(--c);border:3px solid #fff8;box-shadow:0 2px 3px #0006;transform:scale(0);transition:transform .22s cubic-bezier(.3,1.7,.5,1)}
.alveole.on i{transform:scale(1)}
.scelle{position:absolute;inset:0;background:repeating-linear-gradient(90deg,#c9a06a 0 18px,#c29760 18px 36px);display:grid;place-items:center;font-weight:800;color:#3a2a14;letter-spacing:.12em;transform:translateY(-110%);transition:transform .35s}
.carton-vue.ferme .scelle{transform:none}

/* les cartes de bieres : le vitrail de la biere, sa couleur */
/* les cartes de bieres : le vitrail dans son cadre sombre, un halo de la couleur de la biere, un corps blanc */
.grille-bieres{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,12.5rem),1fr));gap:18px;padding-bottom:2.2rem}
.biere{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;background:#fff;color:#444;
  border-radius:20px;border-top:5px solid var(--c);transition:transform .2s,box-shadow .2s}
.biere:hover{transform:translateY(-4px);box-shadow:0 18px 34px -18px #000c}
.biere .vitrail{display:flex;justify-content:center;height:210px;padding:10px;overflow:hidden;background:var(--nuit);
  box-shadow:inset 0 -50px 70px -40px var(--c)}
.biere .vitrail img{display:block;height:100%;width:auto;max-width:100%;object-fit:contain}
.sans-vitrail{align-self:center;width:90px;height:90px;border-radius:50%;background:var(--c);border:6px solid #fff8}
.biere .corps{display:flex;flex-direction:column;flex:1;padding:14px 16px 16px}
.biere h2{margin:0;font:600 1.3rem/1.2 var(--affichage);color:var(--encre)}
.biere .style{margin:.1rem 0 0;font-size:.82rem;color:#777}
.biere .prix{margin:.5rem 0 .7rem;font-size:.88rem;color:#555;line-height:1.35}
.biere .prix strong{font-size:1.25rem;color:var(--encre)}.biere .prix span{color:#888;font-size:.78rem}
.biere .compte{position:absolute;top:10px;right:10px;z-index:2;background:var(--nuit);color:#fff;border-radius:99px;font-size:.78rem;font-weight:800;padding:.2rem .6rem}
.biere .gestes{margin-top:auto;display:flex;flex-direction:column;gap:8px;align-items:stretch}
.biere .carton12{min-height:44px;border:1.5px solid var(--encre);border-radius:99px;background:transparent;color:var(--encre);font-weight:700;cursor:pointer;font-size:.9rem;transition:background .15s,color .15s}
.biere .carton12:hover:not(:disabled){background:var(--encre);color:#fff}
.biere .qte{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--papier);border-radius:99px;padding:4px}
.biere .qte button{width:40px;height:40px;min-height:40px;flex:none;border-radius:50%;border:0;background:var(--c);color:var(--t,#fff);font-size:1.4rem;font-weight:700;cursor:pointer;line-height:1}
.biere .qte .n{font-weight:700;font-size:1.1rem;color:var(--encre)}
.biere button:focus-visible{outline:3px solid var(--bleu,#004c8d);outline-offset:2px}
.biere button:disabled{opacity:.35;cursor:not-allowed}
.biere.epuisee{filter:grayscale(.8);opacity:.7}
.biere .epuise,.biere .precommande{margin:.2rem 0 .4rem;font-weight:700;font-size:.82rem;color:var(--rouge)}
.lien-fiche{color:var(--rouge);text-decoration:underline;font-weight:600;white-space:nowrap}

/* la palette : quatre quarts de 6 rangs de 5 cartons */
.vue-palette{margin-top:22px}
.vue-palette h2{color:var(--creme);margin:0 0 .6rem}
.pal-bloc{background:#caa66d;border-radius:18px;padding:12px 10px 18px;margin:0 0 16px;box-shadow:0 8px 0 #8a6a3a}
.pal-bloc h3{margin:0 0 .6rem;font-size:.95rem;color:#3a2a14;display:flex;justify-content:space-between}
.pal-quart{margin:0 0 10px}
.pal-quart .rep{font-size:.62rem;letter-spacing:.14em;color:#5a4222;text-transform:uppercase;display:flex;align-items:center;gap:8px;margin:0 0 5px}
.pal-quart .rep::after{content:"";flex:1;border-top:2px dotted #7a5a35}
.pal-cases{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
.pal-case{aspect-ratio:1.15;border-radius:8px;border:2px dashed #7a5a35;background:#0001;display:grid;place-items:center;padding:3px}
.pal-case.plein{border:0;background:#b98b57;box-shadow:inset 0 -4px 0 #0003;padding:5px 5px 7px;min-width:0;overflow:hidden}
.pal-case.ouvert{border:2px solid #fff9;background:#0002}
.pal-case.neuf{animation:tombe .5s cubic-bezier(.3,1.5,.5,1)}
@keyframes tombe{from{transform:translateY(-60px) scale(.6);opacity:0}to{transform:none;opacity:1}}
.cmini{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;width:100%;max-width:100%}
.cmini u{display:block;aspect-ratio:1;border-radius:50%;background:var(--c);text-decoration:none}
.legende{display:flex;flex-wrap:wrap;gap:6px 14px;color:var(--doux);font-size:.8rem;margin:.2rem 0 .8rem}
.legende span::before{content:"";display:inline-block;width:.7em;height:.7em;border-radius:50%;background:var(--c);margin-right:.35em}
.recap{display:grid;gap:8px}
.rang{display:flex;align-items:center;gap:10px;background:var(--nuit2);border-radius:16px;padding:10px 12px}
.rang .cmini{width:56px;flex:none}
.rang .n{flex:1;font-size:.88rem;min-width:0}.rang .n b{display:block}
.rang .gest{display:flex;gap:6px}
.rang .gest button{width:44px;height:44px;border-radius:50%;border:0;background:#2d313a;color:#fff;font-size:1.2rem;cursor:pointer}
.vide{color:var(--doux);text-align:center;padding:1.2rem;background:var(--nuit2);border-radius:16px}
.vider{background:transparent;border:1px solid var(--ligne);color:var(--creme);border-radius:99px;min-height:44px;padding:0 1.1rem;cursor:pointer}

/* la barre du bas : collee au bas de l'ecran tant que la section est a l'ecran, puis s'arrete avec elle */
.compo>.compo-barre{position:sticky;bottom:0;z-index:30;max-width:none;margin:0 calc(-1 * clamp(14px,4vw,48px));
  background:#fff;color:var(--encre);border-top:3px solid var(--rouge);box-shadow:0 -12px 30px -14px #0007;
  padding:14px max(clamp(14px,4vw,48px),calc((100% - 1120px) / 2)) 16px}
.compo-barre .l1{display:flex;justify-content:space-between;align-items:baseline;font-size:.95rem;color:#555}
.compo-barre .l1 strong{color:var(--encre)}
.compo-barre #total{font:600 1.4rem var(--affichage)}
.compo-barre .jauge{height:8px;background:#e4e4e4;border-radius:99px;margin:8px 0 8px;position:relative;overflow:hidden}
.compo-barre #jauge-seg{display:flex;height:100%;width:100%}
.compo-barre #jauge-seg i{display:block;height:100%;transition:width .35s}
.compo-barre .jauge>i{position:absolute;top:0;bottom:0;width:2px;background:#fff}
.compo-barre .l3{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.compo-barre .msg{font-size:.85rem;color:#666;flex:1;min-width:12rem}.compo-barre .msg.ok{color:#2f7d32}
.compo-barre .bouton{min-height:48px;margin:0}
.compo-barre .bouton:disabled{opacity:.35;cursor:not-allowed}
.vol{position:fixed;width:18px;height:18px;border-radius:50%;z-index:99;pointer-events:none;border:2px solid #0006}
.palette-rappel{background:#eef6ee;border:1px solid #cfe3cf;border-radius:10px;padding:.7rem .9rem}
.palette-rappel.modifiee{background:#fff6e5;border-color:#f0d9a8}
@media (max-width:480px){.compo{padding-top:30px}.compo-haut h1{font-size:1.7rem}.biere .vitrail{height:170px}}
@media (prefers-reduced-motion:reduce){.compo *{transition:none!important;animation:none!important}}

/* la boutique : le meme composeur, a la bouteille */

.compo[data-mode="libre"] .compo-barre .jauge>i{display:none}

/* petits ecrans : deux cartes de front, une barre plus basse */
@media (max-width:560px){
  .grille-bieres{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .biere .vitrail{height:150px;padding:8px}
  .biere .corps{padding:10px 10px 12px}
  .biere h2{font-size:1.1rem}
  .biere .prix{font-size:.8rem}.biere .prix strong{font-size:1.1rem}
  .biere .qte button{width:36px;height:36px;min-height:36px}
  .compo>.compo-barre{padding-top:10px;padding-bottom:12px}
  .compo-barre .l3{flex-wrap:nowrap;gap:10px}
  .compo-barre .msg{min-width:0;font-size:.75rem}
  .compo-barre .bouton{min-height:44px;padding:.5rem 1rem;font-size:.9rem;white-space:nowrap}
}