/* ═══════════════════════════════════════════════════════════════
   Accueil — l'étiquette de la boutique (essai)
   Une étiquette cadeau pend au logo rond du haut de page, au bout d'un fil
   d'or, tant qu'on est en haut de la page : nuit et or au recto (comme la
   carte cadeau), or et nuit au verso (comme la carte de l'audio). Elle
   tombe du logo à l'arrivée, se balance, se retourne au survol, et remonte
   dans le logo quand on descend ; une pastille d'or s'allume alors sur le
   bouton du menu jusqu'à son ouverture, où « La Boutique » porte « Nouveau ».
   Le mouvement est calculé par assets/js/etiquette-boutique.js.
   ═══════════════════════════════════════════════════════════════ */

/* le point d'attache : le milieu du bas du logo (style.css, header nav .logo : 60 px de haut, à 8 px du haut,
   à 3 % du bord ; l'image fait 300 × 297, donc 60,6 px de large) ;
   --eb-fil : la longueur du fil, en px, lue par le script */
.eb { position: fixed; top: 67px; left: calc(3% + 30.3px); width: 0; height: 0; z-index: 997; pointer-events: none; font-size: 16px; --eb-fil: 52; }
.eb[hidden] { display: none; }
.eb-pendule { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }

.eb-fil {
    position: absolute; left: -0.5px; top: 0; width: 1px; height: 1px;
    transform-origin: 50% 0; transform: scaleY(0);
    background: linear-gradient(var(--gold-dim), var(--gold) 55%, var(--gold-light));
    box-shadow: 0 0 4px rgba(240, 208, 96, 0.35);
}

/* l'étiquette : son œillet (à 0,75 em du haut) au bout du fil */
.eb-etiquette {
    position: absolute; left: -3em; top: -0.75em; width: 6em; height: 7.75em;
    display: block; text-decoration: none; pointer-events: auto; outline: none;
    transform-origin: 50% 0.75em; transform-style: preserve-3d; opacity: 0;
    -webkit-tap-highlight-color: transparent;
}
.eb-face {
    position: absolute; inset: 0; z-index: 0;
    display: flex; flex-direction: column; align-items: center;
    padding: 1.6em 0.35em 0.55em; text-align: center; line-height: 1.2;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    filter: drop-shadow(0 0.45em 0.55em rgba(0, 0, 0, 0.5));
}
.eb-verso { transform: rotateY(180deg); }
.eb-forme { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; overflow: visible; }
.eb-face > span { display: block; }

/* le recto : la nuit */
.eb-nouveau { font-family: var(--font-body); font-weight: bold; font-size: 0.52em; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); padding-left: 0.3em; }
.eb-titre {
    margin-top: 0.4em; font-family: var(--font-display); font-size: 1em; line-height: 1.1;
    background: linear-gradient(180deg, var(--gold-pale), var(--gold) 70%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.eb-titre small { display: block; font-size: 0.72em; }
.eb-filet { position: relative; width: 2.8em; height: 1px; margin: 0.6em auto 0.55em; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.eb-filet::after { content: ''; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; transform: rotate(45deg); background: var(--gold); }
.eb-icones { display: flex !important; gap: 0.6em; color: var(--gold); }
.eb-icones svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* le verso : l'or */
.eb-verso { color: #0c0d30; }
.eb-offrir { font-family: var(--font-display); font-size: 1em; }
.eb-ou { margin-top: 0.15em; font-family: var(--font-body); font-size: 0.8em; letter-spacing: 0.08em; }
.eb-verso .eb-filet { margin: 0.5em auto 0.45em; background: linear-gradient(90deg, transparent, #0c0d30, transparent); opacity: 0.7; }
.eb-verso .eb-filet::after { background: #0c0d30; }
.eb-produits { font-family: var(--font-body); font-size: 0.5em; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.6; }
.eb-entrer { display: flex !important; align-items: center; gap: 0.4em; margin-top: auto; font-family: var(--font-body); font-weight: bold; font-size: 0.5em; letter-spacing: 0.24em; text-transform: uppercase; padding-left: 0.24em; }
.eb-entrer svg { width: 1.3em; height: 1.3em; fill: none; stroke: currentColor; stroke-width: 1.6; }

/* un reflet passe sur le recto quand l'étiquette se pose */
.eb-recto::after {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    clip-path: polygon(23% 0, 77% 0, 100% 16%, 100% 100%, 0 100%, 0 16%);
    background: linear-gradient(115deg, transparent 35%, rgba(255, 240, 200, 0.28) 48%, transparent 60%) -150% 0 / 250% 100% no-repeat;
}
.eb.is-reflet .eb-recto::after { animation: ebReflet 1.4s ease-in-out; }
@keyframes ebReflet { to { background-position: 250% 0; } }

/* au clavier : le contour s'éclaire */
.eb-etiquette:focus-visible .eb-contour { stroke: var(--gold-light); stroke-width: 2; }

/* la pastille d'or sur le bouton du menu, une fois l'étiquette remontée */
.toggle-btn.eb-pastille::after {
    content: ''; position: absolute; top: -5px; right: -5px; width: 10px; height: 10px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, var(--gold-pale), var(--gold) 55%, var(--gold-dim));
    box-shadow: 0 0 0 2px var(--navy-deepest), 0 0 10px rgba(240, 208, 96, 0.6);
    animation: ebPastille 0.7s var(--ease-expo) both;
}
@keyframes ebPastille { from { transform: scale(0); } 55% { transform: scale(1.4); } to { transform: scale(1); } }

/* dans le menu : « Nouveau », à droite de « La Boutique », qui reste centré */
.menu-overlay .menu-links a.eb-menu { position: relative; }
.eb-menu-nouveau {
    position: absolute; left: 100%; top: 50%; margin: -0.95em 0 0 0.7em; padding: 0.3em 0.6em 0.25em;
    font-family: var(--font-body); font-size: 0.4em; letter-spacing: 0.22em; line-height: 1.2; text-transform: uppercase; white-space: nowrap;
    color: var(--navy-deepest); background: linear-gradient(135deg, var(--gold), var(--gold-light)); border-radius: 1px;
}

/* tablette et téléphone : le fil part toujours du milieu du logo ; l'étiquette (6 em de large) se règle
   sur la place entre lui et le bord de l'écran (3 % + 30 px), pour s'arrêter à 3 px du bord */
@media (max-width: 768px) {
    .eb { font-size: min(14px, calc(1vw + 9px)); --eb-fil: 34; }
    /* le verso : les navigateurs intégrés aux applications d'Android (Facebook…) imposent au moins 8 px de texte.
       Tout y est donc prévu à 8 px et resserré pour tenir dans la carte (« Cartes cadeaux » y prend deux lignes).
       Si le texte est encore agrandi par le téléphone, ce qui ne tient plus passe dans une seconde colonne,
       hors de la carte et masquée : « Entrer » disparaît au lieu de pendre dessous. */
    .eb-verso { padding: 1.35em 0 0.45em; flex-wrap: wrap; overflow: hidden; }
    .eb-offrir { width: 100%; line-height: 1.1; }
    .eb-ou { margin-top: 0; line-height: 1.1; }
    .eb-verso .eb-filet { margin: 0.3em auto; }
    .eb-produits { max-width: 88%; font-size: 8px; letter-spacing: 0.08em; line-height: 1.15; }
    .eb-entrer { font-size: 8px; letter-spacing: 0.16em; padding-left: 0.16em; }
    .eb-entrer svg { width: 1.05em; height: 1.05em; }
}
@media (max-width: 400px) {
    .eb { --eb-fil: 30; }
    .eb-menu-nouveau { margin-left: 0.5em; letter-spacing: 0.14em; }
}
@media (prefers-reduced-motion: reduce) {
    .eb.is-reflet .eb-recto::after, .toggle-btn.eb-pastille::after { animation: none; }
    .eb-etiquette { transition: opacity 0.5s, visibility 0.5s; }   /* sans mouvement, elle apparaît et disparaît en fondu */
}