/* =====================================================================
AEY Mobile — Design Tokens & Utility Layer
Refonte v1 · 2026-05-20
---------------------------------------------------------------------
Direction artistique : "Revolut-inspired" — dark forward, accent bleu
de marque AEY, cream comme contrepartie chaude (travel warmth).
---------------------------------------------------------------------
USAGE (PHP / HTML statique) :
---------------------------------------------------------------------
NOTES DE NAMING :
· La variable accent principale s'appelle --mint mais contient le
bleu de marque (#0A7BFF). Hérité du proto Claude Design — on ne
renomme pas pour garder la cohérence avec les exports JSX. Si tu
veux un alias clair, utilise --brand (déjà défini en alias).
· --paper / --ink suivent la convention typographique
(paper = couleur sur fond sombre, ink = couleur sur fond clair).
===================================================================== */
/* ---------------------------------------------------------------------
1 · Polices
--------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");
/* ---------------------------------------------------------------------
2 · Tokens (CSS Custom Properties)
--------------------------------------------------------------------- */
:root {
/* ---- Surfaces dark ---- */
--bg-dark: #0A0A0F;
--surface-dark: #14141C;
--surface-elev: #1E1E2A;
--border-dark: #2A2A38;
--border-dark-strong: #3A3A4A;
/* ---- Surfaces cream (alternative chaude) ---- */
--bg-cream: #F4EEE2;
--surface-cream: #ECE4D2;
--border-cream: #D9CFB8;
/* ---- Textes sombres (sur fond clair) ---- */
--ink: #0A0A0F;
--ink-2: #4A4A55;
--ink-3: #8A8A99;
/* ---- Textes clairs (sur fond sombre) ---- */
--paper: #FAFAFA;
--paper-2: #B8B8C5;
--paper-3: #6F6F7F;
/* ---- Accents marque ---- */
--mint: #0A7BFF;
--mint-deep: #0561D6;
--mint-soft: #DDEBFF;
--brand: #0A7BFF;
--brand-deep: #0561D6;
/* ---- Signaux ---- */
--signal-red: #FF6B5C;
--signal-amber: #FFB454;
--signal-green: #5DF4B8;
--sparkle: #5DF4B8;
/* ---- Radii ---- */
--r-xs: 8px; --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px;
/* ---- Shadows ---- */
--shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.18);
--shadow-md: 0 12px 32px rgba(0, 0, 0, 0.25);
--shadow-lg: 0 30px 60px rgba(0, 0, 0, 0.35);
--shadow-xl: 0 30px 80px rgba(0, 0, 0, 0.50);
--shadow-brand: 0 16px 40px rgba(10, 123, 255, 0.28);
/* ---- Typographies ---- */
--font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-ui: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
/* ---- Z-index stack ---- */
--z-base: 1; --z-overlay: 10; --z-dropdown: 20; --z-sticky: 30; --z-modal: 50; --z-toast: 60;
/* ---- Durées de transition ---- */
--t-fast: .12s; --t-base: .25s; --t-slow: .45s;
--ease: cubic-bezier(.2, .8, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html, body {
margin: 0; padding: 0;
font-family: var(--font-ui);
color: var(--paper);
background: var(--bg-dark);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "ss01", "ss02";
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; padding: 0; }
input, textarea, select { font-family: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
:focus-visible {
outline: 2px solid var(--mint);
outline-offset: 3px;
border-radius: var(--r-xs);
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
* { scrollbar-width: thin; scrollbar-color: var(--border-dark-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: var(--border-dark-strong);
border-radius: var(--r-pill);
border: 2px solid var(--bg-dark);
}
::-webkit-scrollbar-thumb:hover { background: var(--mint); }
.aey-logo {
font-family: var(--font-display); font-weight: 800; letter-spacing: -0.04em;
display: inline-flex; align-items: center; gap: 6px;
font-size: 22px; color: var(--paper);
}
.aey-logo .dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--mint); display: inline-block;
box-shadow: 0 0 0 4px rgba(10, 123, 255, 0.18);
animation: aey-pulse 2.4s ease-in-out infinite;
}
@keyframes aey-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .6; transform: scale(.85); }
}
.display { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.045em; line-height: 0.94; }
.display--xl { font-size: clamp(48px, 8vw, 86px); }
.display--lg { font-size: clamp(36px, 5vw, 56px); }
.display--md { font-size: clamp(28px, 3.5vw, 44px); }
.display--sm { font-size: clamp(22px, 2.5vw, 28px); }
.label-mono {
font-family: var(--font-mono); font-size: 11px; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.12em;
}
.text-muted { color: var(--paper-2); }
.text-faint { color: var(--paper-3); }
.text-brand { color: var(--mint); }
.text-sparkle { color: var(--sparkle); }
.chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px; border-radius: var(--r-pill);
font-size: 13px; font-weight: 500;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.10);
color: var(--paper); line-height: 1;
}
.chip--mint { background: var(--mint); color: #fff; border-color: transparent; }
.chip--sparkle { background: var(--sparkle); color: var(--ink); border-color: transparent; }
.chip--ghost-light { background: transparent; border: 1px solid rgba(10, 10, 15, 0.15); color: var(--ink); }
.chip--dot::before {
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: var(--mint);
box-shadow: 0 0 0 3px rgba(10, 123, 255, 0.25);
animation: aey-pulse 2.4s ease-in-out infinite;
}
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: 10px; padding: 14px 22px; border-radius: var(--r-pill);
font-family: inherit; font-weight: 600; font-size: 15px;
line-height: 1; white-space: nowrap;
border: 1px solid transparent;
transition: transform var(--t-fast) var(--ease),
background var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease),
box-shadow var(--t-fast) var(--ease);
cursor: pointer; user-select: none;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.btn--mint { background: var(--mint); color: #fff; box-shadow: var(--shadow-brand); }
.btn--mint:hover { background: #2A8FFF; }
.btn--ghost-dark { background: transparent; color: var(--paper); border-color: rgba(255, 255, 255, 0.18); }
.btn--ghost-dark:hover { background: rgba(255, 255, 255, 0.06); }
.btn--ghost-light { background: transparent; color: var(--ink); border-color: rgba(10, 10, 15, 0.15); }
.btn--ghost-light:hover { background: rgba(10, 10, 15, 0.04); }
.btn--solid-dark { background: var(--ink); color: var(--paper); }
.btn--solid-dark:hover { background: #1A1A22; }
.btn--solid-cream { background: var(--bg-cream); color: var(--ink); }
.btn--solid-cream:hover { background: #E8E0CC; }
.btn--sm { padding: 10px 16px; font-size: 13px; gap: 8px; }
.btn--lg { padding: 18px 28px; font-size: 17px; gap: 12px; }
.placeholder {
background-color: var(--surface-elev);
background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 8px, rgba(255, 255, 255, 0.0) 8px 16px);
border: 1px solid var(--border-dark); border-radius: var(--r-lg);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-mono); font-size: 11px; color: var(--paper-3);
letter-spacing: 0.08em; text-transform: uppercase;
}
.placeholder--cream {
background-color: var(--surface-cream); border-color: var(--border-cream); color: var(--ink-2);
background-image: repeating-linear-gradient(135deg, rgba(10, 10, 15, 0.04) 0 8px, rgba(10, 10, 15, 0.0) 8px 16px);
}
.card {
background: var(--surface-dark); border: 1px solid var(--border-dark);
border-radius: var(--r-lg); padding: 24px;
transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.card--elev { background: var(--surface-elev); }
.card--cream { background: var(--surface-cream); border-color: var(--border-cream); color: var(--ink); }
.card--glass {
background: rgba(20, 20, 28, 0.78);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.12);
}
.card--hover:hover { transform: translateY(-3px); border-color: rgba(10, 123, 255, 0.4); }
.bg-aurora {
background:
radial-gradient(ellipse 80% 60% at 20% 0%, rgba(10, 123, 255, 0.15) 0%, transparent 50%),
radial-gradient(ellipse 60% 50% at 80% 30%, rgba(93, 244, 184, 0.06) 0%, transparent 60%),
radial-gradient(ellipse 70% 50% at 50% 100%, rgba(10, 123, 255, 0.08) 0%, transparent 50%),
linear-gradient(180deg, #0E0E18 0%, #14141C 60%, #0E0E14 100%);
}
.bg-dotted {
background-color: var(--surface-dark);
background-image: radial-gradient(circle at 1px 1px, rgba(10, 123, 255, 0.12) 1px, transparent 0);
background-size: 24px 24px;
}
.mascot-frame {
width: 52px; height: 52px; border-radius: 14px;
background: linear-gradient(135deg, var(--mint) 0%, var(--mint-deep) 100%);
border: 1px solid rgba(10, 123, 255, 0.4);
display: inline-flex; align-items: center; justify-content: center;
overflow: hidden; flex-shrink: 0;
}
.mascot-frame img { width: 150%; height: 150%; object-fit: cover; object-position: center 14%; }
.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 36px; }
@media (max-width: 768px) {
/* AEY-MOBILE-V2: comprehensive mobile responsive layer */
.container { padding: 0 20px; }
/* === LOGO : taille adaptée mobile + override inline style === */
.aey-logo {
font-size: 18px !important;
}
.aey-logo img {
height: 44px !important;
width: auto !important;
max-width: 130px !important;
object-fit: contain !important;
display: block !important;
}
/* === HEADER : padding réduit mobile === */
.aey-header__inner,
header__inner,
header .aey-header__inner {
padding: 10px 16px !important;
gap: 12px !important;
}
.aey-header {
backdrop-filter: blur(16px);
}
/* === HEADER ACTIONS : compactes === */
.aey-header__actions {
gap: 8px !important;
}
.aey-header__lang {
font-size: 12px !important;
padding: 6px 4px !important;
}
/* === STORE/CATALOG : 1 colonne sur mobile === */
.catalog__grid {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
.country-card {
max-width: 100%;
}
.country-card__photo {
aspect-ratio: 16/10;
min-height: 160px;
}
/* === Page produit : adapter spacing === */
.product__hero-title {
font-size: clamp(28px, 7vw, 42px) !important;
line-height: 1.05 !important;
}
.product__hero {
flex-direction: column;
}
/* === Catalog page : header subtitle + filters === */
.catalog__filters {
flex-wrap: wrap !important;
gap: 8px !important;
}
.catalog__title h1 {
font-size: clamp(28px, 8vw, 40px) !important;
}
/* === Footer : 1 col mobile === */
.footer__cols {
grid-template-columns: 1fr !important;
gap: 24px !important;
}
}
@media (max-width: 480px) {
/* AEY-MOBILE-V2: tweaks pour très petits écrans */
.aey-logo img {
height: 38px !important;
max-width: 110px !important;
}
.aey-header__inner {
padding: 8px 12px !important;
}
.container {
padding: 0 14px !important;
}
.country-card__name {
font-size: 16px !important;
}
.product__hero-title {
font-size: clamp(24px, 8vw, 36px) !important;
}
}
.stack-xs > * + * { margin-top: 8px; }
.stack-sm > * + * { margin-top: 14px; }
.stack-md > * + * { margin-top: 22px; }
.stack-lg > * + * { margin-top: 36px; }
.stack-xl > * + * { margin-top: 64px; }
.stat-num {
font-family: var(--font-display); font-size: 32px; font-weight: 700;
letter-spacing: -0.04em; color: var(--paper);
}
.stat-label {
font-size: 12px; color: var(--paper-3);
text-transform: uppercase; letter-spacing: 0.6px; margin-top: 2px;
}
@keyframes aey-fade-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes aey-shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.fade-in { animation: aey-fade-in var(--t-slow) var(--ease) both; }
.delay-100 { animation-delay: .10s; }
.delay-200 { animation-delay: .20s; }
.delay-300 { animation-delay: .30s; }
.delay-400 { animation-delay: .40s; }
@media print {
:root { --paper: #000; --paper-2: #333; --paper-3: #666; }
body { background: #fff; color: #000; }
.no-print { display: none !important; }
}
/* === AEY-HEADER-RULES-GLOBAL : règles header partagées (déplacées depuis home.css pour être chargées sur toutes les pages) === */
.aey-header {
position: sticky;
top: 0;
z-index: var(--z-sticky);
background: rgba(10, 10, 15, 0.78);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border-dark);
}
.aey-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 18px 36px;
}
.aey-nav { display: flex; gap: 28px; }
.aey-nav__link { font-size: 14px; color: var(--paper-2); font-weight: 500; transition: color var(--t-fast) var(--ease); text-decoration: none; }
.aey-nav__link:hover { color: var(--paper); }
.aey-nav__link.is-active { color: var(--paper); font-weight: 600; }
.aey-header__actions { display: flex; align-items: center; gap: 12px; }
.aey-header__lang { font-size: 13px; color: var(--paper-2); display: inline-flex; align-items: center; gap: 4px; padding: 8px 4px; cursor: pointer; background: transparent; border: none; transition: color var(--t-fast) var(--ease); }
.aey-header__lang:hover { color: var(--paper); }
.aey-header__actions .btn { white-space: nowrap; }
@media (max-width: 1024px) { .aey-nav { display: none; } }
@media (max-width: 640px) { .aey-header__inner { padding: 14px 20px; } .aey-header__actions .btn { display: none; } .aey-header__actions .btn--mint { display: inline-flex; } }
/* === END AEY-HEADER-RULES-GLOBAL === */
/* AEY i18n switcher fix v2 -- surface language toggle on mobile (reuses working header switcher) */
.aey-header .aey-header__lang-wrap .aey-header__lang{display:inline-flex !important}
@media (max-width:768px){
.aey-header__lang-wrap{position:relative}
.aey-header__lang-menu{right:0;left:auto}
}
/* AEY i18n -- hide untranslated languages in switcher menu (fr/en/de/es only) */
.aey-header__lang-menu [data-lang="it"],
.aey-header__lang-menu [data-lang="pt"],
.aey-header__lang-menu [data-lang="nl"],
.aey-header__lang-menu [data-lang="tr"],
.aey-header__lang-menu [data-lang="ja"],
.aey-header__lang-menu [data-lang="ko"],
.aey-header__lang-menu [data-lang="zh"]{display:none !important}