diff --git a/src/admin/gallery/index.html b/src/admin/gallery/index.html
index e709cc2..64a93cb 100644
--- a/src/admin/gallery/index.html
+++ b/src/admin/gallery/index.html
@@ -13,9 +13,10 @@
fichier front, à mettre en place lors du déploiement.
-->
-
-
-
+
+
+
diff --git a/src/admin/gallery/style.css b/src/admin/gallery/style.css
index 97eac82..9d4f3b1 100644
--- a/src/admin/gallery/style.css
+++ b/src/admin/gallery/style.css
@@ -1,100 +1,70 @@
-/* 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/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é. 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.
+/* Galerie admin — direction artistique "Polaroid Néon"
+ (.claude/skills/photobooth-da/SKILL.md), variante "écran admin" du skill :
+ sobre, sombre, data-first. Pas de confettis, pas de rotation façon
+ polaroid sur les cartes photo (grille classique) — l'accent corail est
+ réservé aux CTA (boutons), jamais décoratif.
- Passe 3 (2026-09-16) : mode sombre + finitions "type iPhone" (hover
- desktop, entrées en fondu, halo de couleur en fond) alignés sur
- src/e/style.css — voir ce fichier pour le détail complet des choix et
- des vérifications de contraste. Cet écran est celui que verront le plus
- souvent les prospects en démo depuis un ordinateur : les états hover
- comptent ici au moins autant que sur la page invité. */
+ Tokens repris de src/galerie/style.css (écran de référence de cette DA)
+ pour la cohérence de couleurs/typo entre écrans invité et admin ; les
+ cartes utilisent #1E1B18 comme demandé par l'exception admin du skill
+ (plus clair que --color-bg, pour distinguer une "carte" du fond de
+ page, sans jamais recourir au blanc cassé des polaroids invité).
+
+ Contrastes vérifiés par calcul WCAG AA (même méthode que
+ src/galerie/style.css) : texte clair sur #12100E et sur #1E1B18 passe
+ très largement ; texte sombre (#12100E) sur les couleurs d'accent
+ pleines (utilisé uniquement sur les CTA .btn) passe confortablement
+ (6.3:1 à 13.2:1). */
@font-face {
- font-family: "Fraunces";
- src: url("/vendor/fonts/fraunces-latin-600-normal.woff2") format("woff2");
- font-weight: 600;
+ font-family: "General Sans";
+ src: url("/vendor/fonts/generalsans-700.woff2") format("woff2");
+ font-weight: 700;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: "Inter";
+ src: url("/vendor/fonts/inter-latin-variable.woff2") format("woff2");
+ font-weight: 400 700;
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 dark;
+ color-scheme: dark;
- --color-bg: #fff8f0;
- --color-surface: #ffffff;
- --color-surface-muted: #fdecdd;
- --color-text: #2b2016;
- --color-muted: #8a7869;
- --color-border: #f1ddc6;
+ --color-bg: #12100e;
+ --color-ink: #12100e;
+ --color-text: #faf6f0;
+ --color-muted: #e8dfd3;
+ --color-muted-2: #a89e90;
- --color-accent: #e35f2b;
- --color-accent-hover: #c74c1e;
- --color-accent-light: #ff8a52;
- --color-accent-soft: #ffe3d0;
- --color-accent-contrast: #fffaf6;
+ --color-coral: #ff5e5b;
+ --color-yellow: #ffd166;
+ --color-mint: #06d6a0;
- --color-plum: #7c2f56;
- --color-plum-soft: #f8e3ee;
+ /* Exception admin du skill : cartes en #1E1B18. */
+ --color-card: #1e1b18;
+ --color-card-muted: #262220;
+ --color-border-ui: rgba(250, 246, 240, 0.14);
+ --color-border-ui-strong: rgba(250, 246, 240, 0.26);
- --color-error-bg: #fdeae6;
- --color-error-text: #a3341c;
- --color-warning-bg: #fbe9d8;
- --color-warning-text: #8a4a10;
+ --color-error-bg: rgba(255, 94, 91, 0.14);
+ --color-warning-bg: rgba(255, 209, 102, 0.16);
- --radius-sm: 12px;
- --radius: 20px;
+ --radius-ui: 14px;
--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);
+ --shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.35);
+ --shadow-card: 0 6px 16px rgba(0, 0, 0, 0.4);
- --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
+ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
- --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
- "Helvetica Neue", Arial, sans-serif;
- --font-display: "Fraunces", Georgia, "Times New Roman", serif;
-}
-
-/* Thème sombre — mêmes valeurs et même raisonnement que src/e/style.css
- (fond brun quasi-noir, pas d'inversion, contrastes vérifiés WCAG AA). */
-@media (prefers-color-scheme: dark) {
- :root {
- --color-bg: #1b120b;
- --color-surface: #26190f;
- --color-surface-muted: #32211a;
- --color-text: #f7ead9;
- --color-muted: #b39d84;
- --color-border: #40291a;
-
- --color-accent: #ff7a42;
- --color-accent-hover: #ffa06e;
- --color-accent-light: #ffab7a;
- --color-accent-soft: rgba(255, 122, 66, 0.18);
- --color-accent-contrast: #241206;
-
- --color-plum: #f0b8d8;
- --color-plum-soft: rgba(240, 184, 216, 0.14);
-
- --color-error-bg: #3a1712;
- --color-error-text: #ff9b86;
- --color-warning-bg: #3a2a12;
- --color-warning-text: #ffd98a;
-
- --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
- --shadow-md: 0 14px 36px rgba(0, 0, 0, 0.55);
- }
-
- body::before {
- opacity: 0.35;
- }
+ --font-display: "General Sans", -apple-system, BlinkMacSystemFont, sans-serif;
+ --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* {
@@ -106,28 +76,13 @@ html {
}
body {
- position: relative;
margin: 0;
- font-family: var(--font-sans);
+ font-family: var(--font-ui);
background: var(--color-bg);
color: var(--color-text);
line-height: 1.45;
}
-/* Halo de couleur en fond — même principe que src/e/style.css : "plus de
- couleur" en réutilisant la palette existante (corail + prune), jamais
- une nouvelle teinte, purement décoratif (CSS pur, poids nul). */
-body::before {
- content: "";
- position: fixed;
- inset: 0;
- z-index: -1;
- pointer-events: none;
- background: radial-gradient(55% 32% at 50% -8%, var(--color-accent-soft) 0%, transparent 72%),
- radial-gradient(40% 26% at 100% 100%, var(--color-plum-soft) 0%, transparent 70%);
- opacity: 0.7;
-}
-
.page {
max-width: 960px;
margin: 0 auto;
@@ -138,18 +93,6 @@ body::before {
.page__header {
text-align: center;
margin-bottom: 1.5rem;
- animation: fade-rise 0.5s var(--ease-standard) both;
-}
-
-@keyframes fade-rise {
- from {
- opacity: 0;
- transform: translateY(10px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
}
.brand {
@@ -158,14 +101,14 @@ body::before {
justify-content: center;
gap: 0.4rem;
margin-bottom: 0.6rem;
- color: var(--color-muted);
+ color: var(--color-muted-2);
}
.brand__mark {
width: 16px;
height: 16px;
flex-shrink: 0;
- color: var(--color-accent);
+ color: var(--color-coral);
}
.brand__name {
@@ -175,21 +118,19 @@ body::before {
text-transform: uppercase;
}
+/* Écran admin = data-first, sobre : titre en texte plein (pas de dégradé
+ décoratif), contrairement à ce que faisait l'ancienne DA. */
.page__header h1 {
font-family: var(--font-display);
- font-size: 1.7rem;
- font-weight: 600;
+ font-size: 1.5rem;
+ font-weight: 700;
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;
+ color: var(--color-text);
}
.event-meta {
- color: var(--color-muted);
+ color: var(--color-muted-2);
font-size: 0.9rem;
margin: 0.4rem 0 0;
}
@@ -197,13 +138,14 @@ body::before {
.state-block {
text-align: center;
padding: 1.25rem 1rem;
- border-radius: var(--radius);
+ border-radius: var(--radius-ui);
margin-bottom: 1rem;
+ background: var(--color-card);
}
.state-block--error {
background: var(--color-error-bg);
- color: var(--color-error-text);
+ color: var(--color-text);
}
.state-block p {
@@ -219,8 +161,8 @@ body::before {
width: 26px;
height: 26px;
margin-bottom: 0.6rem;
- border: 3px solid var(--color-accent-soft);
- border-top-color: var(--color-accent);
+ border: 3px solid rgba(255, 94, 91, 0.22);
+ border-top-color: var(--color-coral);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@@ -233,8 +175,8 @@ body::before {
.status-banner {
background: var(--color-warning-bg);
- color: var(--color-warning-text);
- border-radius: var(--radius);
+ color: var(--color-text);
+ border-radius: var(--radius-ui);
padding: 0.85rem 1rem;
margin: 0 0 1.25rem;
font-size: 0.9rem;
@@ -247,6 +189,8 @@ body::before {
margin-bottom: 0.75rem;
}
+/* Boutons — l'accent corail est réservé au CTA principal (télécharger le
+ ZIP) ; le bouton secondaire (Actualiser) reste sobre, sans couleur. */
.btn {
display: inline-flex;
align-items: center;
@@ -259,10 +203,10 @@ body::before {
padding: 0.75rem 1.15rem;
min-height: 46px;
cursor: pointer;
- 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;
+ background: var(--color-coral);
+ color: var(--color-ink);
+ box-shadow: var(--shadow-card);
+ transition: transform 0.12s var(--ease-standard), background 0.12s ease, box-shadow 0.12s ease;
}
.btn-icon {
@@ -272,52 +216,53 @@ body::before {
}
.btn--secondary {
- background: var(--color-surface);
- color: var(--color-plum);
- border: 1.5px solid var(--color-plum);
+ background: var(--color-card);
+ color: var(--color-text);
+ border: 1.5px solid var(--color-border-ui-strong);
box-shadow: none;
}
.btn:disabled {
- opacity: 0.55;
+ opacity: 0.5;
cursor: not-allowed;
}
.btn:active:not(:disabled) {
- background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
+ background: #ff7673;
transform: scale(0.97);
}
.btn--secondary:active:not(:disabled) {
- background: var(--color-plum-soft);
+ background: var(--color-card-muted);
}
@media (hover: hover) {
.btn:hover:not(:disabled) {
transform: translateY(-1px);
- box-shadow: var(--shadow-md);
+ box-shadow: var(--shadow-soft);
}
.btn--secondary:hover:not(:disabled) {
- background: var(--color-plum-soft);
+ background: var(--color-card-muted);
+ border-color: var(--color-coral);
box-shadow: none;
}
}
.btn:focus-visible,
a:focus-visible {
- outline: 3px solid var(--color-plum);
+ outline: 3px solid var(--color-coral);
outline-offset: 2px;
}
.zip-status {
font-size: 0.85rem;
- color: var(--color-muted);
+ color: var(--color-muted-2);
margin: 0 0 1.25rem;
}
.zip-status--error {
- color: var(--color-error-text);
+ color: var(--color-coral);
}
.photo-grid {
@@ -329,26 +274,29 @@ a:focus-visible {
gap: 1rem;
}
+/* Exception admin explicite : grille classique, cartes rectangulaires,
+ AUCUNE rotation façon polaroid (contrairement à src/galerie/style.css)
+ ni glow/neon — juste une carte sobre en #1E1B18. */
.photo-card {
position: relative;
- background: var(--color-surface);
- border-radius: var(--radius);
+ background: var(--color-card);
+ border-radius: var(--radius-ui);
overflow: hidden;
display: flex;
flex-direction: column;
- box-shadow: var(--shadow-sm);
+ box-shadow: var(--shadow-card);
transition: box-shadow 0.2s var(--ease-standard), transform 0.2s var(--ease-standard);
}
-/* Liseré de couleur en haut de carte : discret au repos, affirmé au survol
- — encore de la "couleur" réutilisant la palette existante, appliquée à
- un endroit où elle valorise le contenu (la photo) sans le concurrencer. */
+/* Liseré corail en haut de carte au survol desktop uniquement : seule
+ touche décorative de couleur tolérée ici, et encore, discrète et
+ réactive au hover plutôt que permanente. */
.photo-card::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 3px;
- background: linear-gradient(90deg, var(--color-accent), var(--color-plum));
+ background: var(--color-coral);
opacity: 0;
transition: opacity 0.2s var(--ease-standard);
z-index: 1;
@@ -356,8 +304,8 @@ a:focus-visible {
@media (hover: hover) {
.photo-card:hover {
- box-shadow: var(--shadow-md);
- transform: translateY(-3px) rotate(-0.6deg);
+ box-shadow: var(--shadow-soft);
+ transform: translateY(-3px);
}
.photo-card:hover::before {
@@ -369,7 +317,7 @@ a:focus-visible {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
- background: var(--color-surface-muted);
+ background: var(--color-card-muted);
}
.photo-card__thumb {
@@ -387,7 +335,7 @@ a:focus-visible {
justify-content: center;
text-align: center;
font-size: 0.75rem;
- color: var(--color-muted);
+ color: var(--color-muted-2);
padding: 0.5rem;
}
@@ -409,17 +357,18 @@ a:focus-visible {
font-size: 0.85rem;
margin: 0 0 0.2rem;
word-break: break-word;
+ color: var(--color-text);
}
.photo-card__message {
- color: var(--color-text);
+ color: var(--color-muted);
font-size: 0.8rem;
margin: 0 0 0.35rem;
word-break: break-word;
}
.photo-card__date {
- color: var(--color-muted);
+ color: var(--color-muted-2);
font-size: 0.72rem;
margin: 0;
}
@@ -428,23 +377,22 @@ a:focus-visible {
display: block;
text-align: center;
padding: 0.6rem;
- background: var(--color-accent);
- color: var(--color-accent-contrast);
+ background: var(--color-coral);
+ color: var(--color-ink);
text-decoration: none;
font-size: 0.82rem;
- font-weight: 600;
+ font-weight: 700;
}
.photo-card__download:hover {
- background: var(--color-accent-hover);
+ background: #ff7673;
}
@media (prefers-reduced-motion: reduce) {
.spinner,
.photo-card,
.photo-card::before,
- .btn,
- .page__header {
+ .btn {
animation: none !important;
transition: none !important;
}
diff --git a/src/admin/print-template/index.html b/src/admin/print-template/index.html
index 591f003..f414804 100644
--- a/src/admin/print-template/index.html
+++ b/src/admin/print-template/index.html
@@ -17,51 +17,62 @@
tables lors de l'événement.
-->