/* ================================================================
A l'Antica — Feuille de style principale
Palette rouge / or / crème / brun — spirit corso-premium
Structure :
1. Tokens (vars) + reset
2. Primitives (.icon, .container, boutons)
3. Navbar / Hero / Banner / Trust
4. Produits (cards, images, recherche, filtres)
5. Commander / Histoire / Marché / Contact / Footer
6. Panier (flottant + panneau + formulaire)
7. Décors (aurora, fougère, feuilles, carte Corse, montagnes)
8. Animations & micro-interactions
9. Responsive (XL → 480)
10. prefers-reduced-motion
================================================================ */
/* ============================================================
1. TOKENS + RESET
============================================================ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
/* --- Palette (thème clair par défaut) --- */
--rouge: #D4580A;
--rouge-cl: #E8700F;
--rouge-dk: #A8440A;
--or: #F4A827;
--or-cl: #F7B948;
--or-dk: #D68E13;
--creme: #FAF6EE;
--creme-dk: #F0EADE;
--brun: #2C1A0E;
--brun-cl: #3F2817;
--gris: #6B6B6B;
--gris-cl: #9A9088;
--gris-xcl: #D5CEC4;
--blanc: #FFFFFF;
--bg-soft: #FFFCF7;
/* --on-accent : toujours blanc, JAMAIS inversé en dark.
À utiliser pour le texte sur les boutons CTA accent (rouge/or/vert/bleu)
car var(--blanc) s'inverse en dark et casse la lisibilité du texte. */
--on-accent: #FFFFFF;
}
/* --- Thème sombre : inversion des variables principales ---
Activé via data-theme="dark" sur ou (toggle utilisateur ou prefers-color-scheme).
Garde les accents rouge/or (marchent bien sur fond sombre), inverse les neutres. */
[data-theme="dark"] {
--creme: #1B1410; /* fond principal page (était #FAF6EE) */
--creme-dk: #221912; /* sections plus sombres */
--brun: #F4ECE0; /* texte principal (était #2C1A0E) */
--brun-cl: #E8DCC8;
--gris: #B5ADA4; /* texte secondaire */
--gris-cl: #948C82;
--gris-xcl: #4A4239;
--blanc: #2A1F18; /* cards / fonds clairs (était #FFFFFF) */
--bg-soft: #1F1610; /* fond très clair (était #FFFCF7) */
/* Légère adaptation des accents pour meilleur contraste sur sombre */
--rouge-cl: #F47020;
--or: #FFB835;
--or-cl: #FFC966;
/* Alphas neutres réajustés pour ombre sur fond sombre */
--brun-a04: rgba(0,0,0,.20);
--brun-a06: rgba(0,0,0,.30);
--brun-a08: rgba(0,0,0,.40);
--brun-a12: rgba(0,0,0,.50);
color-scheme: dark;
}
/* Restaure le bloc original pour les variables non-thématisées */
:root {
/* Accents Corse */
--blu-mare: #1F5A8A;
--blu-cielo: #6FA8D6;
--verde-maquis:#4A7F3E;
--granit: #8A8175;
--noir-testa: #1A1A1A;
/* --- Alphas rouges/or réutilisables (remplacent rgba inline) --- */
--or-a06: rgba(244,168,39,.06);
--or-a10: rgba(244,168,39,.10);
--or-a14: rgba(244,168,39,.14);
--or-a18: rgba(244,168,39,.18);
--or-a22: rgba(244,168,39,.22);
--or-a30: rgba(244,168,39,.30);
--or-a45: rgba(244,168,39,.45);
--rouge-a06: rgba(212,88,10,.06);
--rouge-a08: rgba(212,88,10,.08);
--rouge-a12: rgba(212,88,10,.12);
--rouge-a18: rgba(212,88,10,.18);
--rouge-a25: rgba(212,88,10,.25);
--rouge-a35: rgba(212,88,10,.35);
--rouge-a45: rgba(212,88,10,.45);
--brun-a04: rgba(44,26,14,.04);
--brun-a06: rgba(44,26,14,.06);
--brun-a08: rgba(44,26,14,.08);
--brun-a12: rgba(44,26,14,.12);
/* --- Elevation (box-shadows en couches) --- */
--sh-xs: 0 1px 2px var(--brun-a06);
--sh-sm: 0 2px 4px var(--brun-a06), 0 1px 2px var(--brun-a04);
--sh-md: 0 4px 12px var(--brun-a08), 0 2px 4px rgba(44,26,14,.05);
--sh-lg: 0 12px 32px var(--brun-a12), 0 4px 12px var(--brun-a06);
--sh-xl: 0 24px 64px rgba(44,26,14,.18), 0 8px 24px var(--brun-a08);
--sh-glow-or: 0 6px 24px var(--rouge-a35);
--sh-glow-rouge: 0 8px 28px var(--rouge-a35);
/* --- Rayons --- */
--r-xs: 4px;
--r-sm: 8px;
--r-md: 12px;
--r-lg: 16px;
--r-xl: 24px;
--r-full: 999px;
/* --- Easing --- */
--ease-out: cubic-bezier(.22, 1, .36, 1);
--ease-soft: cubic-bezier(.4, 0, .2, 1);
--ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
/* --- Status colors (unifiés) --- */
--success: #27ae60;
--success-cl: #2ecc71;
--success-bg: rgba(39,174,96,.08);
--success-bd: rgba(39,174,96,.3);
--warning: #f0ad4e;
--warning-bg: rgba(240,173,78,.08);
--warning-bd: rgba(240,173,78,.3);
--error: #e74c3c;
--error-dk: #c0392b;
--error-bg: rgba(231,76,60,.08);
--error-bd: rgba(231,76,60,.3);
--info: #3498db;
--info-bg: rgba(52,152,219,.08);
--info-bd: rgba(52,152,219,.3);
/* Rétrocompat */
--ombre: rgba(0,0,0,.18);
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
/* Safe area insets (iPhone notch / home indicator) */
--safe-top: env(safe-area-inset-top, 0);
--safe-bottom: env(safe-area-inset-bottom, 0);
--safe-left: env(safe-area-inset-left, 0);
--safe-right: env(safe-area-inset-right, 0);
}
body {
font-family: 'Lato', sans-serif;
color: var(--brun);
background: var(--creme);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
line-height: 1.55;
/* Tap delay éliminé + pas de callout long-press iOS (confort app) */
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
/* Inertie scroll iOS type app native */
-webkit-overflow-scrolling: touch;
/* Pull-to-refresh désactivé (évite comportement bizarre sur mobile PWA) */
overscroll-behavior-y: contain;
}
/* Mobile : font-size ≥ 16px sur inputs pour EMPÊCHER le zoom auto iOS Safari */
@media (max-width: 768px) {
input, select, textarea {
font-size: 16px !important;
}
/* Boutons hauteur ≥ 48px : confort tactile (WCAG touch target) */
button, .btn, a.btn {
min-height: 44px;
touch-action: manipulation;
}
/* Cliquables : feedback visuel au tap (type app native) */
button:active, .btn:active, a.btn:active, .produit-card:active {
transform: scale(0.97);
transition: transform .08s ease-out;
}
}
/* ─── Images produits : aspect-ratio pour éliminer CLS (Core Web Vitals) */
.produit-img, .produit-no-img {
aspect-ratio: 4 / 3;
background: linear-gradient(135deg, var(--creme) 0%, var(--creme-dk) 100%);
}
.produit-img--bouteille { aspect-ratio: 3 / 4; }
/* ─── Skeleton loader (shimmer) : pendant chargement produits */
.skel-card {
border-radius: var(--r-md);
overflow: hidden;
background: #fff;
box-shadow: 0 2px 10px rgba(44,26,14,.06);
}
.skel-img, .skel-line {
background: linear-gradient(90deg, var(--creme) 0%, var(--creme-dk) 50%, var(--creme) 100%);
background-size: 200% 100%;
animation: skel-shimmer 1.3s ease-in-out infinite;
}
.skel-img { aspect-ratio: 4 / 3; }
.skel-line { height: 14px; border-radius: 7px; margin: 8px 14px; }
.skel-line--short { width: 40%; }
.skel-line--medium { width: 70%; }
@keyframes skel-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ─── Flying add-to-cart (ghost qui vole vers icône panier) */
.cart-ghost {
position: fixed;
z-index: 9999;
pointer-events: none;
background: var(--rouge);
border-radius: 8px;
box-shadow: 0 6px 20px rgba(212, 88, 10, .45);
will-change: transform, opacity;
transition: transform .75s cubic-bezier(.22, 1, .36, 1), opacity .6s .15s ease-out;
}
@keyframes panier-badge-pop {
0% { transform: scale(1); }
40% { transform: scale(1.45); }
70% { transform: scale(.92); }
100% { transform: scale(1); }
}
.panier-badge.pop { animation: panier-badge-pop .45s cubic-bezier(.34, 1.56, .64, 1); }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
/* Scrollbar (desktop) */
@media (pointer: fine) {
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--creme-dk); }
::-webkit-scrollbar-thumb {
background: var(--or-dk);
border-radius: var(--r-full);
border: 2px solid var(--creme-dk);
}
::-webkit-scrollbar-thumb:hover { background: var(--rouge); }
}
::selection { background: var(--or); color: var(--brun); }
/* Focus accessible uniforme (WCAG 2.4.7 — rouge visible sur fond crème) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: 3px solid var(--rouge);
outline-offset: 2px;
border-radius: var(--r-xs);
}
/* Bloc prix total dans le panier (si client autorisé) */
.panier-prix-box {
background: linear-gradient(135deg, var(--or-a06) 0%, var(--rouge-a06) 100%);
border: 1.5px solid var(--or);
border-radius: var(--r-md);
padding: 14px 16px;
margin-top: 10px;
font-size: .9rem;
color: var(--brun);
}
.panier-prix-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 0;
font-size: .88rem;
}
.panier-prix-row--remise {
color: var(--success);
font-weight: 600;
}
.panier-prix-row--total {
border-top: 2px solid var(--or);
margin-top: 6px;
padding-top: 10px;
font-size: 1.1rem;
font-weight: 700;
}
.panier-prix-row--total strong {
color: var(--rouge);
font-size: 1.25rem;
font-family: 'Playfair Display', serif;
}
.btn-facture-pdf {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
margin-top: 12px;
padding: 10px 18px;
background: var(--brun);
color: var(--or);
border: 1.5px solid var(--or);
border-radius: var(--r-sm);
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: .82rem;
letter-spacing: .06em;
text-transform: uppercase;
cursor: pointer;
transition: background .2s var(--ease-out), color .2s var(--ease-out), transform .15s var(--ease-out);
min-height: 44px;
}
.btn-facture-pdf:hover {
background: var(--or);
color: var(--brun);
transform: translateY(-1px);
}
.btn-facture-pdf:active { transform: translateY(0); }
.panier-prix-hint {
font-size: .72rem;
color: var(--gris);
margin-top: 8px;
line-height: 1.4;
font-style: italic;
}
/* Skip link accessibilité — cachée sauf au focus clavier */
.skip-link {
position: absolute;
top: -48px;
left: 12px;
background: var(--brun);
color: var(--or);
padding: 10px 20px;
border-radius: var(--r-sm);
font-weight: 700;
font-size: .86rem;
letter-spacing: .04em;
text-decoration: none;
z-index: 100000;
transition: top .2s var(--ease-out);
box-shadow: var(--sh-lg);
border: 2px solid var(--or);
}
.skip-link:focus-visible {
top: 12px;
outline: 3px solid var(--or-cl);
outline-offset: 2px;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 32px;
}
/* ============================================================
2. PRIMITIVES
============================================================ */
/* Icônes SVG (Lucide) */
.icon {
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.125em;
stroke-width: 2;
flex-shrink: 0;
overflow: visible;
color: currentColor;
}
.icon-sm { width: 14px; height: 14px; }
.icon-md { width: 18px; height: 18px; }
.icon-lg { width: 22px; height: 22px; }
.icon-xl { width: 32px; height: 32px; }
/* --- Boutons --- */
.btn-primary {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: linear-gradient(135deg, var(--rouge) 0%, var(--rouge-cl) 100%);
background-size: 200% 100%;
background-position: 0% 0%;
color: var(--blanc);
padding: 15px 38px;
border-radius: var(--r-sm);
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 1rem;
letter-spacing: .08em;
text-transform: uppercase;
border: none;
cursor: pointer;
box-shadow: var(--sh-glow-rouge);
overflow: hidden;
transition:
transform .3s var(--ease-out),
box-shadow .3s var(--ease-out),
filter .2s,
background-position .45s var(--ease-out);
}
.btn-primary::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 60%);
opacity: 0;
transition: opacity .3s var(--ease-out);
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 14px 40px var(--rouge-a45);
filter: brightness(1.05);
background-position: 60% 0%;
}
.btn-primary:hover::after { opacity: 1; }
.btn-primary:active { transform: translateY(-1px); filter: brightness(.98); }
.btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: rgba(255,255,255,.08);
color: var(--blanc);
padding: 15px 38px;
border-radius: var(--r-sm);
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 1rem;
letter-spacing: .08em;
text-transform: uppercase;
border: 2px solid rgba(255,255,255,.55);
cursor: pointer;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition:
background .3s var(--ease-out),
border-color .3s var(--ease-out),
transform .3s var(--ease-out);
}
.btn-secondary:hover {
background: rgba(255,255,255,.18);
border-color: var(--blanc);
transform: translateY(-3px);
}
.btn-secondary:active { transform: translateY(-1px); }
.btn-commander {
margin-top: auto;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
padding: 12px 16px;
background: linear-gradient(135deg, var(--rouge) 0%, var(--rouge-cl) 100%);
color: var(--blanc);
border: none;
border-radius: var(--r-sm);
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: .86rem;
letter-spacing: .06em;
text-transform: uppercase;
cursor: pointer;
box-shadow: 0 4px 12px var(--rouge-a25);
transition:
box-shadow .25s var(--ease-out),
transform .15s var(--ease-out),
filter .2s;
}
.btn-commander:hover {
box-shadow: 0 8px 22px rgba(212,88,10,.4);
filter: brightness(1.05);
transform: translateY(-1px);
}
.btn-commander:active { transform: scale(.97); }
.btn-commander.ajoute {
background: linear-gradient(135deg, #2e7d32 0%, #43a047 100%);
box-shadow: 0 4px 12px rgba(46,125,50,.3);
}
.btn-envoyer {
width: 100%;
padding: 15px;
background: linear-gradient(135deg, var(--rouge) 0%, var(--rouge-cl) 100%);
color: var(--blanc);
border: none;
border-radius: var(--r-sm);
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 1rem;
letter-spacing: .04em;
cursor: pointer;
box-shadow: 0 6px 20px var(--rouge-a35);
margin-top: 10px;
text-transform: uppercase;
transition:
box-shadow .25s var(--ease-out),
transform .2s var(--ease-out),
filter .2s;
}
.btn-envoyer:hover {
box-shadow: 0 10px 28px var(--rouge-a45);
filter: brightness(1.05);
transform: translateY(-2px);
}
.btn-envoyer:active { transform: translateY(0); }
.btn-envoyer:disabled {
background: var(--gris-xcl);
color: var(--gris);
box-shadow: none;
cursor: not-allowed;
filter: none;
transform: none;
}
/* Boutons — ripple + overflow partagé */
.btn-primary,
.btn-secondary,
.btn-commander,
.btn-envoyer {
position: relative;
overflow: hidden;
}
.ripple {
position: absolute;
border-radius: 50%;
background: rgba(255,255,255,.45);
pointer-events: none;
transform: scale(0);
animation: ripple-out .65s ease-out;
z-index: 2;
}
@keyframes ripple-out {
to { transform: scale(2.6); opacity: 0; }
}
/* ============================================================
2bis. UI KIT UNIFIÉ — composants partagés
(utilisés sur accueil, compte, login, panier, modals)
============================================================ */
/* -----------------------------------------------------------
BOUTONS — variantes unifiées (btn + modifier)
Toutes les variantes partagent la géométrie et les transitions
----------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 28px;
border: 2px solid transparent;
border-radius: var(--r-sm);
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: .95rem;
letter-spacing: .08em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
min-height: 44px;
line-height: 1.2;
position: relative;
overflow: hidden;
transition:
transform .25s var(--ease-out),
box-shadow .25s var(--ease-out),
background-color .25s var(--ease-out),
border-color .25s var(--ease-out),
color .25s var(--ease-out),
filter .2s;
user-select: none;
white-space: nowrap;
}
.btn:disabled,
.btn[aria-disabled="true"] {
opacity: .55;
cursor: not-allowed;
filter: grayscale(.3);
transform: none !important;
box-shadow: none !important;
}
.btn .icon { flex-shrink: 0; }
/* Taille compact */
.btn--sm {
padding: 9px 18px;
font-size: .82rem;
min-height: 38px;
letter-spacing: .06em;
}
.btn--lg {
padding: 16px 36px;
font-size: 1.05rem;
min-height: 52px;
}
.btn--block {
width: 100%;
}
/* ── Variante PRIMARY (rouge gradient) ── */
.btn--primary {
background: linear-gradient(135deg, var(--rouge) 0%, var(--rouge-cl) 100%);
color: var(--blanc);
border-color: transparent;
box-shadow: 0 6px 20px var(--rouge-a35);
}
.btn--primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 28px var(--rouge-a45);
filter: brightness(1.05);
}
.btn--primary:active { transform: translateY(0); filter: brightness(.98); }
/* ── Variante SECONDARY (contour rouge, fill au hover) ── */
.btn--secondary-rouge {
background: transparent;
color: var(--rouge);
border-color: var(--rouge);
}
.btn--secondary-rouge:hover {
background: var(--rouge);
color: var(--blanc);
transform: translateY(-2px);
box-shadow: 0 8px 20px var(--rouge-a25);
}
.btn--secondary-rouge:active { transform: translateY(0); }
/* ── Variante SUCCESS (vert) ── */
.btn--success {
background: linear-gradient(135deg, var(--success) 0%, var(--success-cl) 100%);
color: var(--blanc);
border-color: transparent;
box-shadow: 0 6px 20px rgba(39,174,96,.3);
}
.btn--success:hover {
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(39,174,96,.4);
filter: brightness(1.05);
}
.btn--success:active { transform: translateY(0); }
/* ── Variante DANGER (rouge vif, pour actions destructrices) ── */
.btn--danger {
background: var(--error);
color: var(--blanc);
border-color: transparent;
box-shadow: 0 4px 14px rgba(231,76,60,.3);
}
.btn--danger:hover {
background: var(--error-dk);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(231,76,60,.4);
}
.btn--danger:active { transform: translateY(0); }
/* ── Variante DANGER OUTLINE ── */
.btn--danger-outline {
background: transparent;
color: var(--error);
border-color: var(--error);
}
.btn--danger-outline:hover {
background: var(--error);
color: var(--blanc);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(231,76,60,.25);
}
/* ── Variante NEUTRE (annuler, retour) ── */
.btn--neutral {
background: var(--blanc);
color: var(--gris);
border-color: var(--gris-xcl);
}
.btn--neutral:hover {
border-color: var(--gris-cl);
color: var(--brun);
transform: translateY(-1px);
box-shadow: var(--sh-sm);
}
/* ── Variante GHOST/LIEN (juste texte) ── */
.btn--ghost {
background: transparent;
color: var(--rouge);
border-color: transparent;
padding: 8px 14px;
text-transform: none;
letter-spacing: .01em;
font-weight: 600;
box-shadow: none;
min-height: auto;
}
.btn--ghost:hover {
color: var(--rouge-dk);
background: var(--rouge-a06);
transform: none;
}
/* -----------------------------------------------------------
CARDS — conteneur partagé (produit, info, stat, etc.)
----------------------------------------------------------- */
.card {
background: var(--blanc);
border: 1px solid rgba(212,88,10,.1);
border-radius: var(--r-md);
box-shadow: var(--sh-sm);
padding: 22px 24px;
transition:
transform .25s var(--ease-out),
box-shadow .25s var(--ease-out),
border-color .25s var(--ease-out);
}
.card--hover:hover {
transform: translateY(-3px);
box-shadow: var(--sh-md);
border-color: var(--or-a22);
}
.card--accent {
border-left: 4px solid var(--rouge);
}
.card--muted {
background: var(--bg-soft);
}
/* -----------------------------------------------------------
INPUTS / FORMS — cohérence totale
Classe .ui-input peut être appliquée à ,