/* Scene geometry is expressed in percentages of the 1536 × 1024 background plate.
   Native link hit areas stay fixed; only the artwork moves in perspective.

   Deux palettes cohabitent volontairement :
   - l'ENVELOPPE (bandeau, barre d'outils, sections editoriales) suit le theme du site,
     avec les deux couleurs de la marque — rose #BC70A4 et citron vert #BFD641 ;
   - la SCENE reste sombre dans les deux themes. C'est une photographie de bar de nuit :
     on ne peut pas l'eclaircir, seulement l'encadrer pour que la rupture soit voulue. */
.h3-home{
    /* Marque, identiques dans les deux themes */
    --h3-pink: #BC70A4;
    --h3-lime: #BFD641;

    /* Enveloppe — theme clair (defaut, comme site.css : `:root` = clair) */
    --h3-surface: #ffffff;
    --h3-surface-2: #faf6fb;
    --h3-ink: #1d1a24;
    --h3-ink-soft: #6b6376;
    --h3-line: rgba(25, 18, 34, .12);
    --h3-line-soft: rgba(25, 18, 34, .07);
    /* Le citron vert de la marque est illisible sur blanc (contraste 1.6:1) :
       sur fond clair on descend la meme teinte jusqu'a un rapport conforme. */
    --h3-accent: #6f7f18;
    --h3-pink-ink: #97497c;
    --h3-tint: rgba(188, 112, 164, .07);

    position: relative;
    isolation: isolate;
    height: auto;
    min-height: 0;
    margin: 18px 0 32px;
    border: 1px solid var(--h3-line);
    border-radius: 18px;
    overflow: hidden;
    background: var(--h3-surface);
    color: var(--h3-ink);
    font-family: Arial, Helvetica, sans-serif;
    container-type: inline-size;
    container-name: h3-page;
}

/* Le theme est pose par setThemeAttribute() sur <html>. */
[data-theme="dark"] .h3-home{
    --h3-surface: #14141c;
    --h3-surface-2: #1b1b26;
    --h3-ink: #f3eef4;
    --h3-ink-soft: #b3aabd;
    --h3-line: rgba(255, 255, 255, .13);
    --h3-line-soft: rgba(255, 255, 255, .07);
    --h3-accent: #BFD641;
    --h3-pink-ink: #dfa3c9;
    --h3-tint: rgba(188, 112, 164, .12);
}

.h3-home *{ box-sizing: border-box; }
.h3-home a{ color: inherit; text-decoration: none; }
.h3-home button{ font: inherit; }
.h3-home h1,
.h3-home h2,
.h3-home h3,
.h3-home p{ margin: 0; }
.h3-home h1,
.h3-home h2,
.h3-home h3{ color: inherit !important; }
.h3-home h2{ font: 400 clamp(28px, 3.5cqw, 40px)/1.15 Georgia, serif; letter-spacing: -.035em; }
.h3-home em{ font-family: Georgia, serif; font-weight: 400; }
.h3-home a:focus-visible,
.h3-home button:focus-visible{ outline: 3px solid var(--h3-pink); outline-offset: 5px; }
.h3-home .h3-eyebrow{ font-size: 10px; font-weight: 700; letter-spacing: .16em; line-height: 1.7; }
.h3-home .h3-textlink{ display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 12px; color: var(--h3-pink-ink); }
.h3-home .h3-textlink:hover{ text-decoration: underline; text-underline-offset: 5px; }
.h3-home .h3-button{ display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 13px 20px; gap: 20px; border: 1px solid var(--h3-pink); border-radius: 6px; font-size: 12px; font-weight: 700; }
.h3-home .h3-skip{ position: absolute; z-index: 20; top: -100px; left: 16px; padding: 14px; background: var(--h3-surface-2); color: var(--h3-ink); border: 1px solid var(--h3-pink); border-radius: 8px; }
.h3-home .h3-skip:focus{ top: 16px; }

/* ---------------------------------------------------------------- raccord

   L'en-tete du site est clair et la scene est noire : posees bout a bout, les deux se
   heurtaient. Ce bandeau tient lieu de transition — il appartient au theme de la page,
   et son filet degrade amene les couleurs de la marque jusqu'au bord de la photo. */
.h3-home .h3-ribbon{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 4%;
    background: linear-gradient(90deg, var(--h3-tint), transparent 60%), var(--h3-surface-2);
    border-bottom: 1px solid var(--h3-line);
    color: var(--h3-ink-soft);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    white-space: nowrap;
}

.h3-home .h3-ribbon-dot{
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--h3-lime);
    box-shadow: 0 0 0 3px rgba(191, 214, 65, .25);
}

.h3-home .h3-ribbon b{ flex: 1 1 auto; height: 1px; min-width: 20px; background: linear-gradient(90deg, var(--h3-pink), var(--h3-lime) 55%, transparent); }

/* ---------------------------------------------------------------- scene */

.h3-home .h3-bar{ --mx: 0; --my: 0; background: #16171e; color: #f6f1f7; }
.h3-home .h3-stage{ position: relative; aspect-ratio: 3 / 2; overflow: hidden; perspective: 1100px; contain: layout paint; background: #172218; }
.h3-home .h3-backdrop{ position: absolute; inset: -1%; transform: translate3d(calc(var(--mx) * -4px), calc(var(--my) * -3px), 0); }
.h3-home .h3-backdrop img{ display: block; width: 100%; height: 100%; object-fit: cover; }

/* Le plateau de marbre renvoie des reflets roses vifs : une etiquette posee dessus y
   perdait son contraste. Ce voile eteint la moitie basse du decor, comme le ferait
   l'eclairage d'un vrai comptoir, sans toucher aux objets (qui sont au-dessus). */
/* PLANS DE LA SCENE — a lire ensemble, l'ordre de peinture depend de chacun :
     0  le decor (.h3-backdrop)
     1  le voile du comptoir (ci-dessous)
     2  le halo d'ambiance et ses poussieres
     3  l'enseigne neon et la signature du comptoir
     4  les objets cliquables et leurs etiquettes — TOUJOURS au-dessus du reste

   .h3-objects porte `transform-style: preserve-3d`, ce qui cree un CONTEXTE D'EMPILEMENT :
   le `z-index: 2` de chaque .h3-object ne vaut qu'a l'interieur de ce conteneur et ne se
   compare pas aux plans ci-dessus. Sans z-index explicite sur .h3-objects, le conteneur
   restait en `auto` — donc peint AVANT tout ce qui a un z-index positif, et le voile
   passait par-dessus les trois etiquettes du comptoir. Elles paraissaient delavees alors
   que celles des tonics et du Top 10, hors de portee du voile, restaient nettes. */
.h3-home .h3-counter-scrim{
    position: absolute;
    inset: auto 0 0;
    z-index: 1;
    height: 52%;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 0%, rgba(9, 11, 14, .26) 32%, rgba(9, 11, 14, .60) 62%, rgba(9, 11, 14, .42) 100%);
}

.h3-home .h3-atmosphere{ position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse at 24% 30%, #bfd64119, transparent 38%), radial-gradient(ellipse at 73% 53%, #dc80c12c, transparent 53%); mix-blend-mode: screen; }
.h3-home .h3-atmosphere i{ position: absolute; left: 22%; top: 35%; width: 3px; height: 3px; border-radius: 50%; background: #f2d0e8; box-shadow: 0 0 9px 2px #e798d65e; opacity: 0; }
.h3-home .h3-atmosphere i:nth-child(2){ left: 70%; top: 26%; animation-delay: -3s !important; }
.h3-home .h3-atmosphere i:nth-child(3){ left: 48%; top: 48%; animation-delay: -6s !important; }
.h3-home .h3-atmosphere i:nth-child(4){ left: 80%; top: 64%; animation-delay: -9s !important; }

.h3-home .h3-neon{ position: absolute; z-index: 3; top: 10%; left: 35%; width: 30%; text-align: center; pointer-events: none; transform: translate3d(calc(var(--mx) * -2px), calc(var(--my) * -2px), 0); }
.h3-home .h3-neon p{ font-size: clamp(8px, 1cqw, 14px); font-weight: 500; letter-spacing: .2em; color: #ebddea; }
.h3-home .h3-neon h1{ margin: 8px -15%; font: 500 clamp(25px, 5.1cqw, 80px)/1.2 Georgia, serif; letter-spacing: -.055em; color: #f4bde3 !important; text-shadow: 0 0 2px #ffe6f7, 0 0 14px #e088bc99, 0 0 35px #ba458774; }
.h3-home .h3-neon h1 span{ color: #d7e981; text-shadow: 0 0 14px #bfd641b0; }
.h3-home .h3-neon-rule{ display: block; width: 34%; height: 1px; margin: 12px auto 0; background: #d1e66d; box-shadow: 0 0 12px #b4d544; }
.h3-home .h3-objects{ position: absolute; inset: 0; z-index: 4; transform-style: preserve-3d; }

/* Geometrie des objets.

   Regle de composition : deux etiquettes ne doivent JAMAIS se croiser. Chacune est donc
   posee au-dessus ou en dessous de son objet selon la place disponible, et sa largeur est
   plafonnee pour qu'elle ne deborde pas sur la voisine. Les commentaires donnent la bande
   verticale occupee, en pourcentage depuis le haut du plateau. */
.h3-home .h3-object{ --object-accent: var(--h3-pink); --lift: 0px; --label-gap: 10px; --label-max: 120%; position: absolute; display: block; z-index: 2; border-radius: 10px; transform-style: preserve-3d; -webkit-tap-highlight-color: #bc70a433; }
.h3-home .h3-object--gins{ left: 11%; bottom: 30%; width: 25%; height: 31%; --depth: 10px; }                                   /* art 39→70, etiquette 70→81 */
.h3-home .h3-object--tonics{ left: 14%; bottom: 63%; width: 17%; height: 13%; --depth: 3px; --object-accent: var(--h3-lime); --label-max: 145%; } /* art 24→37, etiquette AU-DESSUS — releve pour ne plus toucher les gins (art 39→70) */
.h3-home .h3-object--serves{ left: 44.5%; bottom: 29%; width: 24%; height: 30%; --depth: 14px; --object-accent: var(--h3-lime); }  /* art 41→71, etiquette 71→82 */
.h3-home .h3-object--news{ left: 74%; bottom: 33%; width: 21%; height: 16%; --depth: 10px; --label-max: 125%; }                /* art 51→67, etiquette 67→78 */
.h3-home .h3-object--top10{ left: 72.5%; top: 8%; width: 14%; height: 22%; --depth: 3px; --label-max: 175%; }                  /* art 8→30, etiquette 30→41 */

.h3-home .h3-object-art{ position: absolute; display: block; inset: 0; transform: translate3d(calc(var(--mx) * var(--depth)), calc(var(--my) * var(--depth) + var(--lift)), 0) rotateY(calc(var(--mx) * 1.2deg)) rotateX(calc(var(--my) * -.8deg)); transform-origin: center bottom; transition: filter .3s, translate .3s; }
.h3-home .h3-object-art img{ position: absolute; object-fit: contain; user-select: none; -webkit-user-drag: none; filter: drop-shadow(6px 6px 4px #07070790); }

.h3-home .h3-object-label{
    position: absolute;
    top: calc(100% + var(--label-gap));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    width: max-content;
    max-width: var(--label-max);
    min-height: 48px;
    padding: 9px 13px 9px 11px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-left: 2px solid var(--object-accent);
    border-radius: 9px;
    /* Fond OPAQUE, sans backdrop-filter.
       Un fond translucide floute ce qui est derriere lui : sur le marbre du comptoir,
       clair et couvert de reflets roses, les trois etiquettes du bas viraient au voile
       laiteux, alors que celles des tonics et du Top 10 — posees sur du sombre — restaient
       nettes. D'ou une page qui paraissait floue par endroits seulement.
       Un aplat regle le contraste une fois pour toutes, et evite au passage de faire
       recalculer le flou du decor a chaque image pendant la parallaxe. */
    background: #12141a;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .55), inset 0 1px rgba(255, 255, 255, .08);
    color: #f8f0f6;
    text-align: left;
    line-height: 1.2;
    transition: border-color .2s, background .2s, box-shadow .2s;
}

/* Une seule etiquette est posee AU-DESSUS de son objet : celle des tonics. Sous elle il y
   a les bouteilles de gin — c'est le chevauchement que la mise en page precedente subissait.
   Les trois objets du comptoir (gins, perfect serve, journal) gardent la leur en dessous :
   elles forment une ligne reguliere sur le marbre, et leurs largeurs plafonnees les
   empechent de se toucher, y compris quand les textes anglais s'allongent. */
.h3-home .h3-object--tonics .h3-object-label{ top: auto; bottom: calc(100% + var(--label-gap)); }

.h3-home .h3-object-label strong{ display: block; font-size: clamp(12px, 1.65cqw, 21px); font-weight: 600; white-space: nowrap; }
.h3-home .h3-object-label small{ display: block; margin-top: 4px; font-size: clamp(9px, 1cqw, 13px); color: #d2c7d0; white-space: nowrap; }
.h3-home .h3-object-label b{ margin-left: 3px; font-size: 16px; font-weight: 400; color: var(--object-accent); }
.h3-home .h3-object-dot{ width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--object-accent); box-shadow: 0 0 10px var(--object-accent); }
.h3-home .h3-object:focus-visible{ outline: none !important; }
.h3-home .h3-object:is(:hover, :focus-visible) { z-index: 5; }
.h3-home .h3-object:is(:hover, :focus-visible) .h3-object-art { translate: 0 -6px; filter: drop-shadow(0 0 12px #bc70a445) brightness(1.08); }
.h3-home .h3-object:is(:hover, :focus-visible) .h3-object-label { background: #201f2b; color: #fff; border-color: var(--object-accent); box-shadow: 0 0 0 2px #171821, 0 0 0 3px var(--object-accent), 0 0 28px #bc70a433; }
.h3-home .h3-object:active .h3-object-art{ translate: 0 -2px; }

.h3-home .h3-contact-shadow{ position: absolute; left: 4%; right: 4%; height: 9%; bottom: -2%; border-radius: 50%; background: #070808bb; filter: blur(6px); }
.h3-home .h3-bottles img{ bottom: 0; max-width: 48%; }
.h3-home .h3-bottle-left{ left: 2%; height: 82%; rotate: -5deg; }
.h3-home .h3-bottle-right{ right: 0; height: 84%; rotate: 5deg; }
.h3-home .h3-bottle-center{ left: 29%; height: 100%; z-index: 1; }
.h3-home .h3-object-glint{ position: absolute; top: 25%; left: 51%; z-index: 2; width: 3%; height: 43%; border-radius: 100%; background: linear-gradient(transparent, #ffffff65, transparent); filter: blur(2px); pointer-events: none; }
.h3-home .h3-tonic-bottles{ display: flex; align-items: flex-end; justify-content: center; gap: 5%; }
.h3-home .h3-tonic-bottles img{ position: relative; width: 26%; height: 100%; }
.h3-home .h3-tonic-bottles img:nth-child(2){ height: 93%; }
.h3-home .h3-tonic-bottles img:nth-child(3){ height: 97%; }
.h3-home .h3-tonic-bottles:after{ content: ''; position: absolute; bottom: -3%; left: -9%; right: -9%; height: 3%; background: #d1e594; box-shadow: 0 4px 10px #bfd64166; }
.h3-home .h3-serving-mat{ position: absolute; bottom: -2%; left: 5%; width: 96%; height: 15%; background: repeating-linear-gradient(0deg, #171b18 0 2px, #242b22 3px 4px); border: 1px solid #9eaa655c; border-radius: 50%; box-shadow: 5px 8px 8px #0008; rotate: -5deg; }
.h3-home .h3-glass-back{ bottom: 8%; left: 3%; height: 99%; max-width: 57%; }
.h3-home .h3-glass-front{ bottom: 0; right: 3%; height: 83%; max-width: 62%; rotate: 4deg; }
.h3-home .h3-lime{ position: absolute; bottom: 0; left: 4%; width: 16%; height: 8%; border: 3px solid #839b37; border-radius: 50%; background: repeating-conic-gradient(#dce998 0 28deg, #f6f4bd 29deg 32deg); rotate: -18deg; box-shadow: 3px 5px 5px #0009; }

.h3-home .h3-newspaper{ inset: 7% 0 1%; padding: 7%; background: #eee7d9; color: #272729; border: 1px solid #c9baa9; box-shadow: 1px 3px #bdb8aa, 2px 5px #e7dfcf, 3px 7px #a29d91, 7px 15px 15px #0009; rotate: -9deg; border-radius: 1px 4px 3px 1px; }
.h3-home .h3-paper-masthead{ display: block; padding-bottom: 4%; border-bottom: 2px solid #3e3a36; font: 700 clamp(7px, 1.4cqw, 21px)/1.2 Georgia, serif; letter-spacing: -.04em; text-align: center; white-space: nowrap; }
.h3-home .h3-paper-content{ display: flex; gap: 6%; height: 66%; padding-top: 6%; }
.h3-home .h3-paper-content img{ position: relative; width: 46%; height: 100%; object-fit: cover; filter: sepia(.3); }
.h3-home .h3-paper-content>span{ width: 48%; overflow: hidden; }
.h3-home .h3-paper-content b{ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font: 600 clamp(6px, .9cqw, 14px)/1.12 Georgia, serif; }
.h3-home .h3-paper-content i{ display: block; height: 1px; margin-top: 7%; background: #797263; }
.h3-home .h3-paper-foot{ display: block; margin-top: 5%; font-size: clamp(4px, .5cqw, 8px); letter-spacing: .05em; text-align: center; }

.h3-home .h3-frame{ inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; border: clamp(4px, .65cqw, 9px) ridge #95677e; background: radial-gradient(ellipse at 30% 10%, #583c503d, transparent 70%), #191e22; color: #f6e9f3; box-shadow: inset 0 0 0 1px #dcb3cb63, inset 0 0 20px #0009, 6px 9px 15px #0008; }
.h3-home .h3-frame:after{ content: ''; position: absolute; inset: 0; background: linear-gradient(130deg, #ffffff12, transparent 40%, #ffffff06 41%, transparent 60%); pointer-events: none; }
.h3-home .h3-frame-kicker{ font-size: clamp(5px, .68cqw, 11px); letter-spacing: .15em; }
.h3-home .h3-frame-ten{ display: flex; align-items: center; gap: .3em; margin-top: 3%; font: 400 clamp(9px, 1.4cqw, 22px)/1 Georgia, serif; }
.h3-home .h3-frame-ten b{ font: italic 400 clamp(28px, 5.4cqw, 76px)/1 Georgia, serif; color: #dbb4ce; }
.h3-home .h3-frame-heart{ color: var(--h3-lime); font: 400 clamp(14px, 2.8cqw, 35px)/1.1 Georgia, serif; }

/* Le visage du membre, dans le cadre accroche au mur : c'est ce qui fait comprendre
   d'un coup d'oeil que la selection appartient a quelqu'un et non au site.
   Photo et pseudo sur une meme ligne — le cadre est trop etroit pour les empiler. */
.h3-home .h3-frame-by{ display: flex; align-items: center; justify-content: center; gap: 6%; max-width: 92%; margin-top: 5%; }

/* Selecteurs portes par .h3-object-art : sans ca, la regle generique
   `.h3-object-art img` (plus specifique) rendait l'avatar absolu, donc superpose au « 10 ». */
.h3-home .h3-object-art .h3-frame-avatar{
    position: relative;
    flex: 0 0 auto;
    width: clamp(18px, 2.9cqw, 42px);
    height: clamp(18px, 2.9cqw, 42px);
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #e3bcd5a8;
    box-shadow: 0 0 0 2px #191e22, 0 3px 8px #000000a8;
    background: #2a2230;
    filter: none;
}

.h3-home .h3-object-art .h3-frame-avatar--initial{ display: grid; place-items: center; font: 600 clamp(9px, 1.4cqw, 20px) Georgia, serif; color: #f0d5e6; }
.h3-home .h3-frame-member{ min-width: 0; overflow: hidden; white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font: italic clamp(6px, .83cqw, 13px) Georgia, serif; color: #e0d7dd; }

.h3-home .h3-counter-sign{ position: absolute; z-index: 3; bottom: 7%; left: 20%; right: 20%; text-align: center; font: 500 clamp(7px, 1cqw, 14px) Arial, sans-serif; letter-spacing: .4em; color: #dcc5d3; text-shadow: 0 1px #000; pointer-events: none; }

.h3-home .h3-scene-toolbar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 4%;
    background: var(--h3-surface-2);
    border-top: 1px solid var(--h3-line);
    border-bottom: 1px solid var(--h3-line);
    color: var(--h3-ink-soft);
}

.h3-home .h3-scene-toolbar p{ font-size: 12px; line-height: 1.5; }
.h3-home .h3-scene-toolbar p>span{ display: inline-block; margin-right: 7px; color: var(--h3-pink); font-size: 20px; }
.h3-home .h3-motion{ flex-shrink: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--h3-line); border-radius: 7px; color: var(--h3-ink-soft); background: transparent; font-size: 10px !important; cursor: pointer; }
.h3-home .h3-motion:before{ content: '◉'; color: var(--h3-pink); margin-right: 7px; }
.h3-home .h3-motion:hover{ border-color: var(--h3-pink); color: var(--h3-ink); }

.h3-home .h3-bar[data-motion='on'] .h3-atmosphere i{ animation: h3-motes 12s ease-in-out infinite; }
.h3-home .h3-bar[data-motion='on'] .h3-neon-rule{ animation: h3-neon-breathe 6s ease-in-out infinite; }
@keyframes h3-motes { 0%, 100% { opacity: 0; transform: translateY(0); } 35% { opacity: .45; } 80% { opacity: 0; transform: translateY(-35px); } }
@keyframes h3-neon-breathe { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }

/* Palier intermediaire : la scene se resserre avant de passer en portrait. */
@container h3-page (max-width: 800px){
    .h3-home .h3-object-label { gap: 8px; padding: 8px 10px; border-radius: 8px; }
    .h3-home .h3-object-label small{ margin-top: 3px; }
}

/* Scene en portrait : les cinq objets sont conserves, mais la composition est REFAITE,
   pas reduite. Une etiquette garde une hauteur tactile fixe (44 px) alors que la scene
   retrecit : en pourcentage elle occupe donc bien plus de place qu'en paysage, et une
   simple mise a l'echelle les empilait les unes sur les autres et sur l'enseigne.

   Les etiquettes sont donc reparties sur QUATRE bandes horizontales, aucune ne pouvant
   croiser une voisine ni l'enseigne, meme quand les textes anglais s'allongent :
     3→20 %   l'enseigne neon
     21→38 %  tonics (gauche) et top 10 (droite)
     39→50 %  leurs deux etiquettes, cote a cote
     46→67 %  gins (gauche) et journal (droite), 61→83 % les verres, plus bas
     68→78 %  etiquettes gins et journal ; 84→94 % celle des verres, sur sa propre ligne */
@container h3-page (max-width: 620px){
    .h3-home .h3-stage { aspect-ratio: 4 / 5; }
    /* Un plateau 3/2 recadre en 4/5 ne laisse voir que 53 % de sa largeur. Centre, cette
       fenetre tombait sur l'arche du fond — un mur vert plat, sans etageres ni comptoir,
       et le decor disparaissait. Decalee vers la gauche, elle cadre l'arche eclairee et
       le marbre, c'est-a-dire exactement la ou les objets sont poses. */
    .h3-home .h3-backdrop img{ object-position: 30% center; }
    .h3-home .h3-counter-scrim{ height: 46%; }
    .h3-home .h3-neon{ top: 3%; left: 26%; width: 48%; }
    .h3-home .h3-neon p{ font-size: 8px; }
    .h3-home .h3-neon h1{ font-size: clamp(28px, 8cqw, 46px); margin: 5px -15%; }
    .h3-home .h3-neon-rule{ margin-top: 6px; }

    .h3-home .h3-object{ --label-gap: 8px; --label-max: 125%; }
    .h3-home .h3-object--tonics{ top: 21%; bottom: auto; left: 4%; width: 29%; height: 13%; }
    .h3-home .h3-object--top10{ top: 21%; left: 63%; width: 25%; height: 17%; --label-max: 150%; }
    .h3-home .h3-object--gins{ left: 3%; bottom: 33%; width: 29%; height: 21%; --label-max: 120%; }
    .h3-home .h3-object--news{ left: 68%; bottom: 33%; width: 26%; height: 12%; --label-max: 130%; }
    /* Les verres descendent d'un cran : leur etiquette prend ainsi sa propre ligne
       sous celles des gins et du journal, au lieu de se battre avec elles. */
    .h3-home .h3-object--serves{ left: 35%; bottom: 17%; width: 31%; height: 22%; --label-max: 140%; }

    /* En portrait, l'etiquette des tonics repasse EN DESSOUS : au-dessus il y a
       desormais l'enseigne, et les gins ont recule assez bas pour liberer la place. */
    .h3-home .h3-object--tonics .h3-object-label{ top: calc(100% + var(--label-gap)); bottom: auto; }

    /* La ligne du comptoir est occupee par l'etiquette des verres. */
    .h3-home .h3-counter-sign{ display: none; }

    .h3-home .h3-object-label{ min-height: 44px; padding: 7px 9px 7px 8px; gap: 6px; border-radius: 7px; }
    .h3-home .h3-object-label strong{ font-size: clamp(11px, 3cqw, 16px); }
    .h3-home .h3-object-label small{ display: none; }
    .h3-home .h3-object-label b{ font-size: 12px; margin-left: 0; }
    .h3-home .h3-object-dot{ width: 4px; height: 4px; flex-basis: 4px; }

    .h3-home .h3-frame-kicker{ font-size: 6px; }
    .h3-home .h3-frame-ten{ font-size: 10px; }
    .h3-home .h3-frame-ten b{ font-size: clamp(28px, 8.4cqw, 46px); }
    .h3-home .h3-frame-heart{ font-size: 17px; }
    .h3-home .h3-object-art .h3-frame-avatar{ width: 20px; height: 20px; }
    .h3-home .h3-object-art .h3-frame-avatar--initial{ font-size: 10px; }
    .h3-home .h3-frame-member{ font-size: 7px; }
    .h3-home .h3-paper-masthead{ font-size: 7px; }
    .h3-home .h3-paper-content b{ font-size: 6px; }
    .h3-home .h3-ribbon{ padding: 10px 7%; font-size: 9px; letter-spacing: .16em; }
    .h3-home .h3-scene-toolbar{ flex-wrap: wrap; justify-content: center; gap: 1px; padding: 10px 4%; text-align: center; }
    .h3-home .h3-scene-toolbar p{ font-size: 11px; }
    .h3-home .h3-motion{ min-height: 44px; }
}

@media (prefers-reduced-motion: reduce){
    .h3-home *, .h3-home *:before, .h3-home *:after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .h3-home .h3-backdrop,
.h3-home .h3-object-art,
.h3-home .h3-neon{ transform: none !important; }
    .h3-home .h3-object:is(:hover, :focus-visible) .h3-object-art { translate: none; }
}