/* Ludifi · feuille de style commune
   Palette claire : blanc bleuté, bleu principal, touches de vert.
   (Les noms de variables historiques sont conservés : --bordeaux = bleu principal, --or = vert.) */
:root {
  /* Style « Joaillerie » : ivoire, bleu saphir, émeraude, rubis, ambre, améthyste.
     (Noms de variables historiques : --bordeaux = saphir principal, --or = émeraude.) */
  --creme: #FBF8F3;
  --creme-2: #F3EDE3;
  --carte: #FFFFFF;
  --trait: #E9E1D4;
  --trait-2: #D6CBB8;
  --prune: #1B2A4A;
  --prune-2: #2A3B60;
  --texte-doux: #5E6479;
  --bordeaux: #1E4E8C;
  --bordeaux-fonce: #163B6B;
  --bordeaux-clair: #E6EEF8;
  --or: #1F7A5C;
  --or-fonce: #17604A;
  --or-clair: #E3F2EC;
  --rubis: #A3354B;
  --rubis-clair: #F7E6EA;
  --ambre: #C08A2E;
  --ambre-fonce: #94661C;
  --ambre-clair: #F8EFDC;
  --amethyste: #5B4B9A;
  --amethyste-clair: #ECE8F6;
  --f-titre: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --f-texte: "Figtree", "Segoe UI", Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body::before { content: ""; display: block; height: 5px; background: linear-gradient(90deg, var(--bordeaux) 0 20%, var(--or) 20% 40%, var(--rubis) 40% 60%, var(--ambre) 60% 80%, var(--amethyste) 80% 100%); }
body { background: var(--creme); color: var(--prune); font-family: var(--f-texte); font-size: 17px; line-height: 1.45; }
[hidden] { display: none !important; }
a { color: var(--bordeaux); }
a:hover { color: var(--bordeaux-fonce); }
h1, h2, h3 { font-family: var(--f-titre); font-weight: 700; line-height: 1.1; margin: 0; text-wrap: balance; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; }

.logo { font-family: var(--f-titre); font-weight: 800; color: var(--bordeaux); text-decoration: none; letter-spacing: -0.5px; }
.logo span { color: var(--rubis); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; padding: 14px 22px; font-weight: 700; text-decoration: none; min-height: 48px; }
.btn-main { background: var(--bordeaux); color: #FFFFFF; }
.btn-main:hover { background: var(--bordeaux-fonce); color: #FFFFFF; }
.btn-or { background: var(--or); color: #FFFFFF; }
.btn-line { background: transparent; border: 2px solid var(--trait-2); color: var(--prune); }
.btn-line:hover { border-color: var(--bordeaux); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-sm { padding: 8px 14px; min-height: 38px; font-size: 15px; border-radius: 10px; }

.card { background: var(--carte); border: 1px solid var(--trait); border-radius: 20px; }
.pill { display: inline-block; font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--creme-2); color: var(--texte-doux); }
.pill-bx { background: var(--bordeaux); color: var(--creme); }
.pill-or { background: var(--or-fonce); color: #FFFFFF; }
.eyebrow { font-size: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--or-fonce); }
.muted { color: var(--texte-doux); }

.field { display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: var(--texte-doux); }
.field input, .field textarea { font-size: 19px; padding: 14px 16px; border-radius: 12px; border: 2px solid var(--trait); background: var(--carte); color: var(--prune); width: 100%; }
.field input:focus, .field textarea:focus { border-color: var(--bordeaux); outline: none; }
.code-input { font-family: var(--f-titre) !important; font-weight: 800; font-size: 40px !important; letter-spacing: 8px; text-align: center; }

.msg { border-radius: 12px; padding: 12px 16px; font-size: 16px; }
.msg-err { background: var(--bordeaux-clair); color: var(--bordeaux-fonce); }
.msg-ok { background: var(--or-clair); color: var(--prune); }

.swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.swatch { width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--creme); box-shadow: 0 0 0 2px var(--trait); }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--prune); }

.tabnum { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* photos: blurred low-res placeholder under the full image */
.photo { position: relative; overflow: hidden; background: var(--creme-2); isolation: isolate; }
.photo .mini { position: absolute; inset: -12px; background-position: center; background-size: cover; background-repeat: no-repeat; filter: blur(5px) saturate(1.05); transform: scale(1.03); }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
.rise.d1 { animation-delay: .08s; } .rise.d2 { animation-delay: .16s; } .rise.d3 { animation-delay: .24s; }