/* ════════════════════════════════════════════════════════════════════════════
* CHAMPAGNE GARDET — Polish CSS
*
* Micro-améliorations à charger en COMPLÉMENT (jamais en remplacement) des
* fichiers homepage.css / concierge.css / connexion.css / create.css /
* onboarding-success.css / style.css existants. N'écrase rien : ajoute
* uniquement de l'accessibilité, des micro-interactions, du focus visible et
* du smooth-scrolling.
*
* Pour activer, ajouter dans de tes pages existantes :
*
* ════════════════════════════════════════════════════════════════════════ */
html { scroll-behavior: smooth; }
/* ─── Cart icon + badge dans le header dashboard client ──────────────────
Couleurs et tokens directement hérités de style.css (var(--gold),
var(--text-muted), etc.). Ne dépend d'aucun framework et ne casse aucune
classe Stitch existante. */
.header-cart {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px; height: 32px;
margin-left: 18px;
color: var(--text-muted);
transition: color .22s ease, transform .22s ease;
}
.header-cart:hover { color: var(--gold); transform: translateY(-1px); }
.header-cart svg { width: 20px; height: 20px; display: block; }
.header-cart-badge {
position: absolute;
top: -4px;
right: -6px;
min-width: 17px;
height: 17px;
padding: 0 5px;
background: var(--gold);
color: var(--bg-main);
border-radius: 9px;
font-family: 'Jost', sans-serif;
font-size: 10px;
font-weight: 600;
letter-spacing: 0;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
box-shadow: 0 0 0 2px var(--bg-main);
transform-origin: center;
animation: cartBadgeIn .25s cubic-bezier(.34,1.56,.64,1) backwards;
}
.header-cart-badge[hidden] { display: none; }
.header-cart-badge.bump { animation: cartBadgeBump .35s ease; }
/* Badge compteur dans la sidebar (ex. « Demande de devis » → nb d'articles du
devis actif). Même pastille or que .header-cart-badge, mais INLINE : poussée
à droite du nav-item via margin-left:auto. */
.nav-badge {
margin-left: auto;
min-width: 18px;
height: 18px;
padding: 0 6px;
background: var(--gold);
color: var(--bg-main);
border-radius: 9px;
font-family: 'Jost', sans-serif;
font-size: 10px;
font-weight: 600;
letter-spacing: 0;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.nav-badge[hidden] { display: none; }
.nav-badge.bump { animation: cartBadgeBump .35s ease; }
@keyframes cartBadgeIn {
from { transform: scale(0); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
@keyframes cartBadgeBump {
0% { transform: scale(1); }
40% { transform: scale(1.35); }
100% { transform: scale(1); }
}
.header-logout-link {
margin-left: 14px;
color: var(--text-muted);
font-size: 11px;
letter-spacing: .12em;
text-transform: uppercase;
text-decoration: none;
transition: color .22s ease;
}
.header-logout-link:hover { color: var(--gold); }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
/* Focus visible accessible — uniquement clavier */
*:focus { outline: none; }
*:focus-visible {
outline: 2px solid #c9a55b;
outline-offset: 2px;
border-radius: 3px;
}
button:focus-visible, a:focus-visible {
outline-offset: 3px;
box-shadow: 0 0 0 4px rgba(201,165,91,.18);
}
/* Selection */
::selection { background: rgba(201,165,91,.35); color: #1a1208; }
/* Images fade-in OPT-IN (data-fade), pour éviter qu'une image lazy sans JS
reste invisible à jamais. Utiliser ![]()
côté HTML pour activer. */
img[data-fade] {
opacity: 0;
transition: opacity .35s ease-out;
}
img[data-fade].loaded,
img[data-fade][data-loaded] {
opacity: 1;
}
/* Hover subtil sur les boutons existants — opt-in, n'altère pas les styles */
button:not(:disabled),
a[role="button"],
.btn,
.cta,
.hero-cta,
.nav-portal {
will-change: transform;
transition:
transform .2s cubic-bezier(.22,.61,.36,1),
box-shadow .2s ease,
background .2s ease,
color .2s ease,
opacity .2s ease;
}
button:not(:disabled):active,
.btn:not(:disabled):active,
.cta:active,
.hero-cta:active,
.nav-portal:active {
transform: translateY(1px);
}
/* …SAUF les boutons « stepper » / flèches de format : pressés en rafale, ce ne sont
pas des CTA → le nudge `translateY(1px)` ci-dessus les faisait « descendre » de 1px
au clic. On l'annule ici. Spécificité (0,0,3,0) pour battre le sélecteur
`button:not(:disabled):active` ci-dessus (0,0,2,1). */
.acc-qty-btn:not(:disabled):active,
.col-qty-btn:not(:disabled):active,
.ac-qty-btn:not(:disabled):active,
.qty-btn:not(:disabled):active,
.qr-qty-step:not(:disabled):active,
.fmt-arrow:not(:disabled):active {
transform: none;
}
/* Liens externes : icône de cible discrète */
a[href^="http"]:not([href*="diechampagnerkoenige.com"]):not([href*="champagne-gardet"]):not(.no-ext-icon)::after {
content: " ↗";
font-size: .85em;
opacity: .6;
}
/* Stabilisation : éviter le layout shift sur les inputs autofill (Chrome) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
-webkit-text-fill-color: inherit;
transition: background-color 5000s ease-in-out 0s;
}
/* Skeleton générique (utilisable par data-attribute) */
[data-skeleton] {
background: linear-gradient(90deg,
rgba(201,165,91,.10) 0%,
rgba(201,165,91,.18) 50%,
rgba(201,165,91,.10) 100%);
background-size: 200% 100%;
animation: g-skel 1.25s ease-in-out infinite;
border-radius: 4px;
color: transparent !important;
}
@keyframes g-skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
/* Print : économies d'encre */
@media print {
body { background: white !important; color: black !important; }
nav, header, footer, video, .hero-video, .cookie-banner, .age-gate { display: none !important; }
a { color: black; text-decoration: underline; }
a[href]::after { content: " (" attr(href) ")"; font-size: .85em; }
}