/* Vitrine Duck Instruments — planche de bord. Feuille séparée de style.css
   (espace membres) ; aucune règle n'est partagée. */

@font-face { font-family: 'Rajdhani'; font-weight: 500; font-display: swap; src: url('fonts/rajdhani-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Rajdhani'; font-weight: 600; font-display: swap; src: url('fonts/rajdhani-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Rajdhani'; font-weight: 700; font-display: swap; src: url('fonts/rajdhani-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-display: swap; src: url('fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-display: swap; src: url('fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); }

:root {
  --accent: #f2a93b;          /* rétroéclairage des aiguilles */
  --sky-top: #3e86d1;
  --sky-bottom: #a9d3f2;
  --night: #0f1114;
  --shield: #15171a;
  --panel: #2b2f35;
  --ink: #f4f1ea;
  --ink-soft: #c9ccd1;
  --paper: #f4f1ea;
  --paper-ink: #1a1d21;
  --display: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  --body: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }
body.vitrine { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--night); color: var(--ink); font: 16px/1.5 var(--body); }
.vitrine a { color: var(--accent); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Ciel ---------- */
.sky { position: relative; height: 150px; overflow: hidden; background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 100%); }
.cloud { position: absolute; border-radius: 40px; background: #fff; }
.c1 { left: 8%;  top: 38px; width: 220px; height: 46px; opacity: .75; filter: blur(10px); }
.c2 { left: 13%; top: 26px; width: 120px; height: 40px; opacity: .8;  filter: blur(8px); }
.c3 { right: 12%; top: 56px; width: 280px; height: 40px; opacity: .6; filter: blur(12px); }
.c4 { left: 46%; top: 18px; width: 160px; height: 28px; opacity: .45; filter: blur(10px); }

/* ---------- Planche de bord ---------- */
.dash { position: relative; margin-top: -110px; background: linear-gradient(180deg, transparent 0, transparent 60px, var(--night) 60px); }
.shield { background: var(--shield); border-radius: 50% 50% 0 0 / 130px 130px 0 0; padding-top: 16px; box-shadow: 0 -2px 0 rgba(255,255,255,.06); }
.panel { position: relative; background: var(--panel); border-radius: 50% 50% 0 0 / 120px 120px 0 0; padding: 40px clamp(16px, 4vw, 64px) 44px; box-shadow: inset 0 2px 0 rgba(255,255,255,.07), inset 0 -30px 60px rgba(0,0,0,.35); }
/* Colonnes : logo | instruments | compte. Les côtés prennent leur largeur
   réelle (max-content) : les instruments ne peuvent plus passer dessous. */
.dash-grid { --g: clamp(120px, 11.5vw, 168px); max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; align-items: start; gap: 24px; }
.side-left { padding-top: 96px; justify-self: start; }
.side-right { padding-top: 80px; justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
.logo { display: block; }
.logo img { display: block; width: clamp(150px, 15vw, 230px); height: auto; }

/* ---------- Instruments (menu) ---------- */
.gauges { display: flex; justify-content: center; align-items: flex-start; gap: clamp(14px, 2.2vw, 36px); }
.g-outer { margin-top: 64px; }
.g-inner { margin-top: 0; }
.gauge { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; border-radius: 50%; outline-offset: 6px; }
.vitrine .gauge { color: var(--ink); }
.bezel { position: relative; display: flex; align-items: center; justify-content: center; width: var(--g); height: var(--g); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a5058 0%, #1b1e22 70%);
  box-shadow: 0 10px 22px rgba(0,0,0,.55), inset 0 0 0 3px #111316, inset 0 0 0 5px #575d66; transition: transform .25s ease; }
.screw { position: absolute; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #6b717a; }
.screw-t { top: 12px; } .screw-b { bottom: 12px; }
.face { position: relative; display: block; width: calc(var(--g) * 0.82); height: calc(var(--g) * 0.82); border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #121417 0%, #07080a 100%);
  box-shadow: inset 0 0 0 1px #000, inset 0 6px 14px rgba(0,0,0,.8); transition: box-shadow .25s ease; }
.ticks { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(135deg); }
.ticks circle { fill: none; }
.t-minor { stroke: #e9e6df; stroke-width: 7; opacity: .55; }
.t-major { stroke: #e9e6df; stroke-width: 10; opacity: .9; }
.arc { stroke: var(--accent); stroke-width: 3; }
.needle { position: absolute; left: 50%; bottom: 50%; width: 3px; height: calc(var(--g) * 0.3); border-radius: 2px; background: var(--accent);
  transform-origin: 50% 100%; box-shadow: 0 0 6px rgba(242,169,59,.6); transition: transform .5s cubic-bezier(.3,1.6,.5,1); }
.n1 { transform: translateX(-50%) rotate(-55deg); }
.n2 { transform: translateX(-50%) rotate(-15deg); }
.n3 { transform: translateX(-50%) rotate(20deg); }
.n4 { transform: translateX(-50%) rotate(60deg); }
.hub { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #2a2d31; box-shadow: inset 0 0 0 2px #5a6068; }
.code { position: absolute; left: 0; right: 0; bottom: 22%; text-align: center; font: 600 12px/1 var(--display); letter-spacing: .2em; color: #b4b9c0; }
.plate { display: inline-block; padding: 6px 14px; border-radius: 4px; background: #16181b; box-shadow: inset 0 0 0 1px #4a5058;
  font: 700 16px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }

.gauge:hover .bezel, .gauge:focus-visible .bezel { transform: translateY(-3px); }
.gauge:hover .face, .gauge:focus-visible .face,
.gauge[aria-current="page"] .face { box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 28px rgba(242,169,59,.28); }
.gauge:hover .needle.needle, .gauge:focus-visible .needle.needle { transform: translateX(-50%) rotate(48deg); }
.gauge[aria-current="page"] .plate { background: var(--accent); color: var(--paper-ink); box-shadow: none; }
.gauge:focus-visible { outline: 2px solid var(--accent); }

/* ---------- Mon compte ---------- */
.account { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px 0 14px; border-radius: 999px; background: #22262b;
  box-shadow: inset 0 0 0 1.5px #5a6068, 0 4px 10px rgba(0,0,0,.4); text-decoration: none; font: 600 17px/1 var(--display); letter-spacing: .06em; }
.vitrine .account { color: var(--ink); }
.account:hover { background: #3a3f46; }

/* ---------- Interrupteur à bascule FR / EN ---------- */
.rocker { display: inline-flex; padding: 5px; border-radius: 9px; background: #0d0e10; box-shadow: inset 0 0 0 1.5px #5a6068, 0 4px 10px rgba(0,0,0,.45); }
.rk { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; text-decoration: none;
  font: 700 15px/1 var(--display); letter-spacing: .08em; transition: transform .12s ease, box-shadow .12s ease; }
.rk.left { border-radius: 6px 0 0 6px; }
.rk.right { border-radius: 0 6px 6px 0; }
.vitrine .rk.up { background: linear-gradient(180deg, #535963 0%, #2c3036 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 4px 0 #0a0b0d; transform: translateY(-2px); color: var(--ink-soft); }
.vitrine .rk.down { background: linear-gradient(180deg, #121417 0%, #1f2327 100%); box-shadow: inset 0 3px 7px rgba(0,0,0,.8); transform: translateY(1px); color: var(--ink); }
.rk.up:hover { background: linear-gradient(180deg, #5e646e 0%, #33373e 100%); }
.led { display: block; width: 7px; height: 7px; border-radius: 50%; background: #3a3f46; }
.rk.down .led { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.rk:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.flag-fr { display: flex; width: 26px; height: 18px; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.5); }
.flag-fr span { flex: 1; }
.flag-fr span:nth-child(1) { background: #002395; }
.flag-fr span:nth-child(2) { background: #fff; }
.flag-fr span:nth-child(3) { background: #ed2939; }
.flag-uk { display: block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.5); }

/* ---------- Accueil ---------- */
.hero { flex: 1; background: var(--paper); color: var(--paper-ink); padding: 72px clamp(16px, 4vw, 64px); }
.hero-in { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.eyebrow { margin: 0; font: 600 15px/1.2 var(--display); letter-spacing: .2em; text-transform: uppercase; }
.hero .eyebrow { color: #8a5a10; }
.hero h1 { margin: 0; font: 700 clamp(36px, 5vw, 60px)/1.05 var(--display); }
.lead { margin: 0; max-width: 640px; font-size: 18px; line-height: 1.6; }
.hero .lead { color: #3d4248; }

/* ---------- Pages « En construction » ---------- */
.chantier { flex: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(32px, 6vw, 96px); padding: 64px clamp(16px, 4vw, 64px); }
.chantier .eyebrow { color: var(--accent); }
.chantier h1 { margin: 0; font: 700 clamp(40px, 5vw, 64px)/1.02 var(--display); }
.chantier .lead { color: var(--ink-soft); }
.chantier-text { display: flex; flex-direction: column; gap: 16px; max-width: 520px; }
.chantier-text p { margin: 0; }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: 6px; background: var(--accent); text-decoration: none;
  font: 700 17px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.vitrine .btn { color: var(--paper-ink); }
.btn:hover { background: #ffc56b; }
.off-gauge { display: flex; align-items: center; justify-content: center; width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a5058 0%, #1b1e22 70%);
  box-shadow: 0 14px 30px rgba(0,0,0,.6), inset 0 0 0 4px #111316, inset 0 0 0 7px #575d66; }
.off-face { position: relative; width: 214px; height: 214px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #121417 0%, #07080a 100%); box-shadow: inset 0 8px 18px rgba(0,0,0,.85); }
.off-face .t-minor { stroke-width: 10; opacity: .45; }
.off-face .t-major { stroke-width: 14; opacity: .8; }
.off-needle { position: absolute; left: 50%; bottom: 50%; width: 4px; height: 78px; margin-left: -2px; border-radius: 2px; background: #6b717a; transform-origin: 50% 100%; transform: rotate(-135deg); }
.off-hub { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: #2a2d31; box-shadow: inset 0 0 0 2px #5a6068; }
.off-flag { position: absolute; right: 22px; top: 70px; display: flex; align-items: center; justify-content: center; width: 70px; height: 34px; transform: rotate(-12deg);
  background: repeating-linear-gradient(45deg, #d7262e 0 9px, #f4f1ea 9px 18px); box-shadow: 0 2px 6px rgba(0,0,0,.6); }
.off-flag span { padding: 1px 6px; background: var(--night); font: 700 16px/1.2 var(--display); letter-spacing: .12em; color: var(--ink); }

/* ---------- Pied de page ---------- */
.vfoot { padding: 18px clamp(16px, 4vw, 64px); background: var(--night); color: #9aa0a8; font-size: 14px; text-align: center; }
.vfoot p { margin: 0; }

/* ---------- Écran moyen : logo et compte au-dessus, instruments en dessous ---------- */
@media (max-width: 1100px) {
  .dash-grid { --g: clamp(118px, 15vw, 150px); grid-template-columns: max-content max-content; justify-content: space-between; row-gap: 18px; }
  .side-left { padding-top: 70px; align-self: center; }
  .side-right { padding-top: 70px; flex-direction: row; align-items: center; gap: 14px; }
  .gauges { grid-column: 1 / -1; grid-row: 2; }
  .g-outer { margin-top: 40px; }
  .logo img { width: 190px; }
  .panel { border-radius: 50% 50% 0 0 / 90px 90px 0 0; }
  .shield { border-radius: 50% 50% 0 0 / 100px 100px 0 0; }
}

/* ---------- Téléphone ---------- */
@media (max-width: 820px) {
  .dash-grid { --g: 150px; grid-template-columns: 1fr; justify-content: stretch; row-gap: 20px; }
  .side-left { padding-top: 56px; justify-self: center; }
  .side-right { padding-top: 0; justify-self: center; flex-wrap: wrap; justify-content: center; }
  .gauges { grid-row: 3; padding-top: 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: center; gap: 22px; }
  .g-outer, .g-inner { margin-top: 0; }
  .panel { border-radius: 50% 50% 0 0 / 56px 56px 0 0; }
  .shield { border-radius: 50% 50% 0 0 / 64px 64px 0 0; }
  .logo img { width: 170px; }
  .rk { padding: 0 9px; }
}
@media (max-width: 420px) {
  .dash-grid { --g: 136px; }
  .plate { font-size: 14px; padding: 6px 10px; }
}