diff --git a/src/admin/gallery/index.html b/src/admin/gallery/index.html
index 89f82aa..3bd72d4 100644
--- a/src/admin/gallery/index.html
+++ b/src/admin/gallery/index.html
@@ -13,6 +13,8 @@
fichier front, à mettre en place lors du déploiement.
-->
+
+
@@ -30,6 +32,7 @@
+
Chargement de la galerie…
@@ -42,8 +45,21 @@
diff --git a/src/admin/gallery/style.css b/src/admin/gallery/style.css
index eacdd18..44fe166 100644
--- a/src/admin/gallery/style.css
+++ b/src/admin/gallery/style.css
@@ -1,38 +1,58 @@
/* Page galerie admin — mobile-first mais utilisable au clavier/souris sur
desktop (l'admin peut consulter depuis un ordinateur), sans dépendance
- externe. Mêmes tokens de couleur/rayon/ombre que la page invité
+ externe. Mêmes tokens de couleur/rayon/ombre/police que la page invité
(src/e/style.css) pour rester cohérent visuellement — c'est aussi l'écran
que verront les prospects (photographes, wedding planners) lors d'une
- démo, donc soigné au même niveau que la page invité. */
+ démo, donc soigné au même niveau que la page invité. Palette et police
+ Fraunces alignées sur la passe 2 (2026-09-16) : voir src/e/style.css pour
+ la justification complète de la direction créative. */
+
+@font-face {
+ font-family: "Fraunces";
+ src: url("/vendor/fonts/fraunces-latin-600-normal.woff2") format("woff2");
+ font-weight: 600;
+ font-style: normal;
+ font-display: swap;
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
+ U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
:root {
color-scheme: light;
- --color-bg: #faf8f5;
+ --color-bg: #fff8f0;
--color-surface: #ffffff;
- --color-surface-muted: #f2ede4;
- --color-text: #262420;
- --color-muted: #6f6a62;
- --color-border: #e3ddd2;
+ --color-surface-muted: #fdecdd;
+ --color-text: #2b2016;
+ --color-muted: #8a7869;
+ --color-border: #f1ddc6;
- --color-accent: #8a5a44;
- --color-accent-hover: #6e4735;
- --color-accent-soft: #f1e3d8;
- --color-accent-contrast: #ffffff;
+ --color-accent: #e35f2b;
+ --color-accent-hover: #c74c1e;
+ --color-accent-light: #ff8a52;
+ --color-accent-soft: #ffe3d0;
+ --color-accent-contrast: #fffaf6;
- --color-error-bg: #fbeceb;
- --color-error-text: #7a1f14;
- --color-warning-bg: #fbf1de;
- --color-warning-text: #7a5a14;
+ --color-plum: #7c2f56;
+ --color-plum-soft: #f8e3ee;
- --radius-sm: 8px;
- --radius: 14px;
+ --color-error-bg: #fdeae6;
+ --color-error-text: #a3341c;
+ --color-warning-bg: #fbe9d8;
+ --color-warning-text: #8a4a10;
- --shadow-sm: 0 1px 2px rgba(38, 36, 32, 0.06);
- --shadow-md: 0 6px 20px rgba(38, 36, 32, 0.10);
+ --radius-sm: 12px;
+ --radius: 20px;
+ --radius-pill: 999px;
+
+ --shadow-sm: 0 2px 6px rgba(163, 78, 30, 0.1);
+ --shadow-md: 0 10px 28px rgba(163, 78, 30, 0.16);
+
+ --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
+ --font-display: "Fraunces", Georgia, "Times New Roman", serif;
}
* {
@@ -87,10 +107,16 @@ body {
}
.page__header h1 {
- font-size: 1.5rem;
- font-weight: 700;
+ font-family: var(--font-display);
+ font-size: 1.7rem;
+ font-weight: 600;
letter-spacing: -0.01em;
margin: 0.15rem 0 0;
+ color: var(--color-accent);
+ background: linear-gradient(100deg, var(--color-accent) 20%, var(--color-plum) 100%);
+ -webkit-background-clip: text;
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
}
.event-meta {
@@ -119,6 +145,23 @@ body {
margin-bottom: 0;
}
+.spinner {
+ display: inline-block;
+ width: 26px;
+ height: 26px;
+ margin-bottom: 0.6rem;
+ border: 3px solid var(--color-accent-soft);
+ border-top-color: var(--color-accent);
+ border-radius: 50%;
+ animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+ to {
+ transform: rotate(360deg);
+ }
+}
+
.status-banner {
background: var(--color-warning-bg);
color: var(--color-warning-text);
@@ -136,22 +179,33 @@ body {
}
.btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.45rem;
font: inherit;
- font-weight: 600;
+ font-weight: 700;
border: none;
- border-radius: var(--radius-sm);
- padding: 0.75rem 1rem;
- min-height: 44px;
+ border-radius: var(--radius-pill);
+ padding: 0.75rem 1.15rem;
+ min-height: 46px;
cursor: pointer;
- background: var(--color-accent);
+ background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent));
color: var(--color-accent-contrast);
box-shadow: var(--shadow-sm);
+ transition: transform 0.12s var(--ease-bounce), background 0.12s ease;
+}
+
+.btn-icon {
+ width: 18px;
+ height: 18px;
+ flex-shrink: 0;
}
.btn--secondary {
background: var(--color-surface);
- color: var(--color-accent);
- border: 1px solid var(--color-accent);
+ color: var(--color-plum);
+ border: 1.5px solid var(--color-plum);
box-shadow: none;
}
@@ -161,18 +215,18 @@ body {
}
.btn:active:not(:disabled) {
- background: var(--color-accent-hover);
- transform: translateY(1px);
+ background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
+ transform: scale(0.97);
}
.btn--secondary:active:not(:disabled) {
- background: var(--color-accent-soft);
+ background: var(--color-plum-soft);
}
.btn:focus-visible,
a:focus-visible {
- outline: 3px solid var(--color-accent);
- outline-offset: 1px;
+ outline: 3px solid var(--color-plum);
+ outline-offset: 2px;
}
.zip-status {
@@ -201,13 +255,13 @@ a:focus-visible {
display: flex;
flex-direction: column;
box-shadow: var(--shadow-sm);
- transition: box-shadow 0.15s ease, transform 0.15s ease;
+ transition: box-shadow 0.15s var(--ease-bounce), transform 0.15s var(--ease-bounce);
}
@media (hover: hover) {
.photo-card:hover {
box-shadow: var(--shadow-md);
- transform: translateY(-2px);
+ transform: translateY(-3px) rotate(-0.6deg);
}
}
@@ -284,3 +338,12 @@ a:focus-visible {
.photo-card__download:hover {
background: var(--color-accent-hover);
}
+
+@media (prefers-reduced-motion: reduce) {
+ .spinner,
+ .photo-card,
+ .btn {
+ animation: none !important;
+ transition: none !important;
+ }
+}
diff --git a/src/admin/print-template/index.html b/src/admin/print-template/index.html
index 16b5dbc..591f003 100644
--- a/src/admin/print-template/index.html
+++ b/src/admin/print-template/index.html
@@ -17,21 +17,51 @@
tables lors de l'événement.
-->