/* Marque Maquette 3D : celle du site (site/index.html), pour les écrans du parcours (Commencer, Mes
   projets). Encre et or, titres en Fraunces, texte en Inter. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..600;1,9..144,300..500&family=Inter:wght@400;500;600&display=swap');

:root {
  --ink: #15171a; --ink-2: #1d2023; --ink-3: #24282b; --line-d: rgba(233, 225, 210, .14); --line-d2: rgba(233, 225, 210, .26);
  --cream: #e9e1d2; --text-d: #d7d0c0; --muted-d: #a7a493;
  --gold: #c9a35c; --gold-2: #b48a3e; --wine: #8c2f3f; --green: #6fae72; --red: #e0604f;
  --serif: 'Fraunces', Georgia, serif; --sans: 'Inter', system-ui, sans-serif;
  --r: 14px; --gutter: clamp(16px, 4vw, 40px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; background: var(--ink); color: var(--cream); font: 15.5px/1.55 var(--sans); }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; line-height: 1.12; margin: 0; text-wrap: balance; }
h1 em, h2 em { font-style: italic; color: var(--gold); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* barre du haut */
.topbar { display: flex; align-items: center; gap: 18px; height: 64px; padding: 0 var(--gutter); border-bottom: 1px solid var(--line-d); }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 500 18px/1 var(--serif); color: var(--cream); }
.logo i { width: 24px; height: 24px; border-radius: 7px; background: linear-gradient(135deg, var(--gold), #8c6a2f); position: relative; flex: none; }
.logo i::after { content: ''; position: absolute; inset: 6px 5px 5px; border: 2px solid #17140d; border-top-width: 0; clip-path: polygon(0 35%, 50% 0, 100% 35%, 100% 100%, 0 100%); background: #17140d22; }
.topbar nav { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.topbar nav a { color: var(--muted-d); text-decoration: none; font-size: 14px; font-weight: 500; padding: 7px 12px; border-radius: 999px; }
.topbar nav a:hover, .topbar nav a.on { color: var(--cream); background: rgba(233, 225, 210, .06); }

/* boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line-d); border-radius: 999px; padding: 12px 20px; background: none; color: var(--cream); font: 600 15px/1 var(--sans); text-decoration: none; transition: transform .15s, background .15s, border-color .15s; white-space: nowrap; }
.btn:hover { border-color: var(--line-d2); background: rgba(233, 225, 210, .05); }
.btn.gold { background: var(--gold); border-color: var(--gold); color: #17140d; box-shadow: 0 8px 24px -12px rgba(201, 163, 92, .8); }
.btn.gold:hover { background: #d6b26c; transform: translateY(-1px); }
.btn.small { padding: 8px 14px; font-size: 13.5px; }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.link { background: none; border: 0; padding: 0; color: var(--gold); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }

.eyebrow { font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.muted { color: var(--muted-d); }
.card { background: var(--ink-2); border: 1px solid var(--line-d); border-radius: var(--r); }
input[type=text], input[type=number], input[type=email], input[type=password], input:not([type]), select { background: var(--ink); color: var(--cream); border: 1px solid var(--line-d2); border-radius: 10px; padding: 11px 13px; font: 15px var(--sans); min-width: 0; }
input:focus, select:focus { outline: none; border-color: var(--gold); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }