/* Même style que la page d'accueil (index.html) : noir profond, gris métal,
   en-tête transparent, boutons argentés. Aucun doré. Sombre uniquement. */
:root {
  --bg: #0a0a0b; --surface-1: rgba(255,255,255,.04); --surface-2: rgba(255,255,255,.02);
  --fg: #ededeb; --muted: #9a9ca0; --line: rgba(255,255,255,.14); --line-strong: rgba(255,255,255,.28);
  --silver-1: #f3f4f5; --silver-2: #d9dbdd; --on-silver: #141517;
  --ok: #9fc0a8; --err: #e39aa0;
  --edge: 3px;
  --sans: "Avenir Next", "Avenir", "Century Gothic", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark; font-synthesis: none;

  /* Nombre d'or φ = 1,618 — mêmes valeurs que l'accueil (index.html).
     Texte : base 16 px, chaque cran ×1,272 (√φ). Espaces : suite de Fibonacci.
     Interlignes : φ (texte), ⁴√φ (titres). Lettres : puissances de 1/φ. */
  --fs-1: 10px; --fs-2: 12.6px; --fs-3: 16px; --fs-4: 20.4px;
  --fs-5: 26px; --fs-6: 33px; --fs-7: 42px; --fs-8: 54px;
  --s-1: 5px; --s-2: 8px; --s-3: 13px; --s-4: 21px;
  --s-5: 34px; --s-6: 55px; --s-7: 89px; --s-8: 144px;
  --lh: 1.618; --lh-titre: 1.128;
  --ls-0: .021em; --ls-1: .056em; --ls-2: .146em; --ls-3: .236em; --ls-4: .382em;
  --w-page: 1180px; --w-video: 927px; --w-texte: 729px; --w-form: 451px;
  --gouttiere: calc(100% - 2 * var(--s-4));
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-padding-top: calc(var(--s-7) + var(--s-4)); }
body {
  min-height: 100vh; display: flex; flex-direction: column;
  background: radial-gradient(130% 92% at 50% 0%, #1c1e21 0%, #0a0a0b 58%, #000 100%) fixed, #000;
  color: var(--fg); font-family: var(--sans); font-size: var(--fs-3); line-height: var(--lh); font-weight: 400;
}
main { flex: 1; }
a { color: inherit; text-decoration: none; }
.shell { width: min(var(--w-texte), var(--gouttiere)); margin: auto; }

/* En-tête identique à l'accueil, collé en haut au défilement */
.hero-bar {
  position: sticky; top: 0; z-index: 40;
  padding: max(var(--s-3), env(safe-area-inset-top)) clamp(var(--s-4), 4vw, var(--s-5)) var(--s-3);
  background: rgba(8, 8, 9, 0.82);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.hero-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; row-gap: var(--s-2); gap: var(--s-3); }
.brand-row { display: flex; align-items: center; gap: var(--s-4); min-width: 0; }
.brand { display: flex; align-items: center; gap: var(--s-3); }
.langues { display: flex; align-items: center; gap: var(--s-2); flex-shrink: 0; }
.langues button {
  font-family: var(--sans); font-size: var(--fs-1); letter-spacing: var(--ls-2); text-transform: uppercase;
  background: none; border: 0; padding: 0; cursor: pointer; color: rgba(231, 232, 234, 0.32);
}
.langues button[aria-pressed="true"] { color: rgba(231, 232, 234, 0.78); }
.langues button:hover { color: rgba(231, 232, 234, 0.55); }
#nav-compte[hidden] { display: none !important; }
.brand-mark { width: var(--s-5); height: var(--s-5); display: block; flex-shrink: 0; }
.brand-name { font-size: var(--fs-2); font-weight: 500; letter-spacing: var(--ls-4); text-transform: uppercase; color: #e7e8ea; }
.top-nav { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.top-link {
  font-size: var(--fs-1); letter-spacing: var(--ls-3); text-transform: uppercase; color: #cfd0d2;
  border: 1px solid rgba(255,255,255,.22); border-radius: var(--edge); padding: var(--s-2) var(--s-3);
  background: transparent; font-family: var(--sans); cursor: pointer;
}
.top-link:hover { border-color: #fff; color: #fff; }
.top-link.ghost { border-color: transparent; color: #9a9ca0; }
.top-link.ghost:hover { color: #fff; }
.top-link.ghost[aria-current="page"] { color: #f2f3f4; box-shadow: inset 0 -1px 0 #d9dbdd; }
.top-link.primary { background: linear-gradient(180deg, var(--silver-1), var(--silver-2)); color: var(--on-silver); border-color: #000; }
.top-link.primary:hover { border-color: #fff; color: var(--on-silver); }
/* Lien Connexion/Déconnexion invisible tant que la session n'est pas connue (pas de mot faux) */
#nav-auth[data-auth="attente"] { visibility: hidden; }
/* Téléphone : logo et liens tiennent sur une ligne */
@media (max-width: 480px) {
  .brand { gap: var(--s-2); }
  .brand-mark { width: var(--fs-5); height: var(--fs-5); }
  .brand-name { letter-spacing: var(--ls-3); }
  .top-nav { flex-wrap: wrap; gap: 0; justify-content: flex-end; }
  .top-link { padding: var(--s-2); letter-spacing: var(--ls-2); }
}

/* Boutons de l'accueil : argenté (principal) et contour (secondaire) */
.btn-metal {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: var(--fs-2); font-weight: 500; letter-spacing: var(--ls-2); text-transform: uppercase;
  padding: var(--s-3) var(--s-5); border-radius: var(--edge); cursor: pointer;
  border: 1px solid var(--line-strong); background: transparent; color: var(--fg);
}
.btn-metal:hover { border-color: #fff; }
.btn-metal.primary {
  background: linear-gradient(180deg, var(--silver-1), var(--silver-2)); color: var(--on-silver); border-color: #000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 var(--s-3) var(--s-4) rgba(0,0,0,.35);
}
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Panneau sombre (comme le cadre de la démo sur l'accueil) */
.plaque {
  background: linear-gradient(180deg, var(--surface-1), var(--surface-2));
  border: 1px solid var(--line); border-radius: var(--edge);
  box-shadow: 0 var(--s-5) var(--s-6) rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
}
.plaque-head { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
.plaque-head h2 { font-size: var(--fs-1); margin: 0; font-weight: 500; letter-spacing: var(--ls-4); text-transform: uppercase; color: var(--fg); }
.plaque-body { padding: var(--s-4); }

.legal { padding-block: clamp(var(--s-5), 6vw, var(--s-6)); }
.legal h1 { font-size: clamp(var(--fs-5), 4vw, var(--fs-6)); line-height: var(--lh-titre); font-weight: 300; letter-spacing: var(--ls-0); margin: 0 0 var(--s-2); }
.legal .meta { color: var(--muted); font-size: var(--fs-1); letter-spacing: var(--ls-4); text-transform: uppercase; margin: 0 0 var(--s-5); }
.legal h2 { font-size: var(--fs-1); font-weight: 500; letter-spacing: var(--ls-3); text-transform: uppercase; margin: var(--s-5) 0 var(--s-3); }
.legal p, .legal li { font-size: var(--fs-3); font-weight: 300; color: var(--muted); line-height: var(--lh); }
.legal strong { color: var(--fg); font-weight: 500; }
.legal ul { padding-left: 1.236em; }
.legal a { text-decoration: underline; text-underline-offset: 3px; }
/* Bloc repliable (identité de l'éditeur) */
.legal details { margin: var(--s-3) 0 0; border: 1px solid var(--line); border-radius: var(--edge); padding: 0 var(--s-4); }
.legal summary { cursor: pointer; padding: var(--s-3) 0; font-size: var(--fs-1); letter-spacing: var(--ls-3); text-transform: uppercase; color: var(--muted); }
.legal summary:hover { color: var(--fg); }
.legal details ul { margin: 0 0 var(--s-3); }
footer { border-top: 1px solid rgba(255,255,255,.08); }
.foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3);
  padding-block: var(--s-5) var(--s-4); color: #6f7175; font-size: var(--fs-1); letter-spacing: var(--ls-3); text-transform: uppercase;
  width: min(var(--w-page), var(--gouttiere)); margin: auto;
}
.foot a:hover { color: var(--fg); }
.foot-liens { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.foot-note { margin: 0 auto; padding: 0 0 var(--s-5); width: min(var(--w-page), var(--gouttiere)); font-size: var(--fs-2); font-weight: 300; line-height: var(--lh); color: #7a7c80; }

/* ---------- Pages « Votre compte » et « Créer mon compte » : même langage que l'accueil ----------
   Colonnes 1 : φ, grand titre fin avec partie argentée, points numérotés à icône, carte qui pivote. */
.espace { flex: 1; display: grid; place-items: center; padding-block: clamp(var(--s-6), 8vw, var(--s-7)); }
.espace-grille { width: min(var(--w-page), var(--gouttiere)); display: grid; grid-template-columns: 1fr 1.618fr; gap: clamp(var(--s-5), 6vw, var(--s-7)); align-items: center; }
.espace-tete, .espace-corps { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.surtitre { margin: 0; font-size: var(--fs-1); letter-spacing: var(--ls-4); text-transform: uppercase; color: var(--muted); }
.grand-titre { margin: 0; font-size: clamp(var(--fs-6), 4.4vw, var(--fs-8)); line-height: var(--lh-titre); font-weight: 300; letter-spacing: var(--ls-0); text-wrap: balance; }
.grand-titre .strong, .point h3 .strong { font-weight: 400; background: linear-gradient(180deg, #ffffff 0%, #dcdee1 52%, #a9abb0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.chapo { margin: 0; max-width: var(--w-form); font-size: var(--fs-3); font-weight: 300; line-height: var(--lh); color: var(--muted); }
.points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-4); }
.point { display: flex; flex-direction: column; gap: var(--s-2); padding-left: var(--s-4); border-left: 1px solid var(--line); }
.point .point-num { margin: 0; display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-1); letter-spacing: var(--ls-4); text-transform: uppercase; color: var(--muted); }
.point .point-num svg { width: var(--fs-3); height: var(--fs-3); color: #d9dbdd; flex-shrink: 0; }
.point h3 { margin: 0; font-size: var(--fs-4); line-height: var(--lh-titre); font-weight: 300; letter-spacing: var(--ls-0); }
.point p { margin: 0; font-size: var(--fs-3); font-weight: 300; line-height: var(--lh); color: var(--muted); }
.carte-pivot { display: grid; place-items: center; perspective: 1400px; }
.carte-pivot .carte { width: min(var(--w-form), 100%); aspect-ratio: 1.586; border-radius: 16px; background: #16181b center / cover; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 var(--s-6) var(--s-7) calc(-1 * var(--s-4)) rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.18); transform: rotateY(-14deg) rotateX(6deg); transition: transform .6s cubic-bezier(.2,.7,.2,1); position: relative; overflow: hidden; }
.carte-pivot .carte::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,.24), transparent 38.2%, transparent 61.8%, rgba(255,255,255,.08)); }
.lien-bas { margin: 0; font-size: var(--fs-3); font-weight: 300; color: var(--muted); }
.lien-bas a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .espace-grille { grid-template-columns: 1fr; gap: var(--s-5); }
  .carte-pivot .carte { width: min(300px, 74vw); }
}
@media (prefers-reduced-motion: reduce) { .carte-pivot .carte { transition: none; } }