/* web/connexion-marque.css — le panneau de marque des pages de connexion, de code, de mot de passe oublié, de réinitialisation et de confirmation.
   Grand écran (≥ 1000 px) : la carte à gauche, le panneau de marque à droite. Téléphone et tablette : rien ne change, le panneau n'est pas affiché.
   Chargé après connexion.css. Jetons de systeme.css seulement ; les mêmes règles valent en clair et en sombre (le panneau est toujours vert nuit). */
#acces .porte.porte-seule .marque-panneau { display: none; }

@media (min-width: 1000px) {
  #acces .porte.porte-seule {
    display: grid; grid-template-columns: minmax(440px, 5fr) 6fr; grid-template-rows: 1fr auto auto 1fr; row-gap: 28px; column-gap: 0;
    grid-template-areas: "vide panneau" "logo panneau" "carte panneau" "bas panneau";
    justify-items: center; align-items: start; padding: 16px; overflow: hidden;
  }
  #acces .porte.porte-seule::before { left: 27%; width: 56vmin; height: 56vmin; }
  #acces .porte.porte-seule .porte-seule-logo { grid-area: logo; align-self: end; }
  #acces .porte.porte-seule > .porte-carte { grid-area: carte; align-self: start; }
  #acces .porte.porte-seule .marque-panneau { grid-area: panneau; justify-self: stretch; align-self: start; position: sticky; top: 16px; height: calc(100dvh - 32px); }

  #acces .porte.porte-seule .marque-panneau {
    display: flex; flex-direction: column; justify-content: center; gap: 48px; padding: 56px; position: relative; overflow: hidden; isolation: isolate;
    border-radius: var(--r-panneau); border: var(--trait) solid oklch(1 0 0 / .14); box-shadow: var(--ombre-haute);
    background: radial-gradient(70% 60% at 80% 8%, oklch(.40 .10 165 / .75), transparent 70%),
                radial-gradient(60% 50% at 8% 95%, oklch(.36 .09 60 / .35), transparent 70%),
                linear-gradient(160deg, oklch(.24 .05 165), var(--vert-nuit));
    color: oklch(.97 .01 150);
  }
  .marque-haut { display: flex; flex-direction: column; gap: 28px; max-width: 520px; }
  .marque-logo { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 24px; background: oklch(1 0 0 / .07); border: var(--trait) solid oklch(1 0 0 / .16);
    box-shadow: 0 0 0 10px oklch(.78 .14 165 / .06), 0 0 64px 8px oklch(.72 .15 165 / .45), 0 1px 0 oklch(1 0 0 / .2) inset; }
  .marque-logo img { display: block; width: 44px; height: 44px; filter: drop-shadow(0 0 10px oklch(.80 .15 165 / .8)); }
  .marque-phrase { margin: 0; font-size: clamp(32px, 3.2vw, 46px); line-height: 1.08; letter-spacing: -.03em; font-weight: 600; text-wrap: balance; }

  /* l'aperçu du tableau de bord : fait en CSS, marqué « exemple » */
  .marque-apercu { display: grid; gap: 14px; max-width: 520px; padding: 20px; border-radius: var(--r-carte); background: oklch(1 0 0 / .06); border: var(--trait) solid oklch(1 0 0 / .14);
    -webkit-backdrop-filter: var(--flou); backdrop-filter: var(--flou); box-shadow: 0 1px 0 oklch(1 0 0 / .1) inset, 0 30px 60px -30px oklch(0 0 0 / .7); }
  .marque-exemple { margin: 0; justify-self: start; padding: 3px 12px; border-radius: var(--r-pleine); font-size: var(--t-1); font-weight: 600; color: oklch(.97 .01 150); border: var(--trait) dashed oklch(1 0 0 / .45); }
  .mp-etiq { font-size: var(--t-1); color: oklch(.86 .02 150); }
  .mp-heros { display: grid; gap: 6px; padding: 18px 20px; border-radius: 18px; color: var(--sur-vert);
    background: linear-gradient(150deg, oklch(.52 .11 165), oklch(.40 .08 165)); border: var(--trait) solid oklch(1 0 0 / .22); box-shadow: 0 1px 0 oklch(1 0 0 / .25) inset; }
  .mp-heros .mp-etiq { color: oklch(1 0 0 / .88); }
  .mp-grand { font-size: 44px; line-height: 1; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
  .mp-note { font-size: var(--t-1); color: oklch(1 0 0 / .88); }
  .mp-carte { display: grid; gap: 14px; padding: 16px 18px 14px; border-radius: 18px; background: oklch(1 0 0 / .06); border: var(--trait) solid oklch(1 0 0 / .1); }
  .mp-graph { display: flex; align-items: flex-end; gap: 10px; height: 116px; }
  .mp-graph > i { flex: 1; display: block; position: relative; }
  .mp-graph > .b { height: var(--h, 100%); border-radius: 8px 8px 4px 4px; max-width: 34px; margin-inline: auto; }
  .mp-graph > .v { flex: 1; height: 9px; max-width: 9px; margin-inline: auto; border-radius: 50%; border: 1.5px solid oklch(.80 .02 150); }
  .b.r { background: oklch(.80 .13 165); }
  .b.r.hier { background: oklch(.86 .15 165); box-shadow: 0 0 22px oklch(.78 .15 165 / .55); }
  .b.e { background: repeating-linear-gradient(135deg, oklch(.80 .13 165) 0 4px, oklch(.80 .13 165 / .25) 4px 8px); }
  /* inconnu : pleine hauteur et fondu vers le haut, sans bord supérieur, pour ne suggérer aucune valeur */
  .mp-graph > .b.i { height: 100%; border-radius: 8px; border: var(--trait) dashed oklch(1 0 0 / .3); border-bottom: 0; background: repeating-linear-gradient(135deg, oklch(1 0 0 / .20) 0 4px, transparent 4px 8px);
    -webkit-mask: linear-gradient(to top, #000, transparent 85%); mask: linear-gradient(to top, #000, transparent 85%); }
  .mp-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: oklch(.86 .02 150); }
  .mp-legende span { display: inline-flex; align-items: center; gap: 6px; }
  .mp-legende i { display: block; width: 10px; height: 10px; flex: none; }
  .mp-legende i.b { border-radius: 3px; height: 10px; }
  .mp-legende i.v { border-radius: 50%; border: 1.5px solid oklch(.80 .02 150); width: 9px; height: 9px; }
  .mp-legende i.b.i { -webkit-mask: none; mask: none; border: var(--trait) dashed oklch(1 0 0 / .45); }
}
@media (min-width: 1000px) and (prefers-reduced-motion: no-preference) {
  .marque-panneau { animation: marque-entre 800ms var(--ease-out) 120ms both; }
  .mp-graph > .b { transform-origin: bottom; animation: marque-pousse 900ms var(--ease-out) 500ms both; }
  @keyframes marque-entre { from { opacity: 0; transform: translateX(24px); } }
  @keyframes marque-pousse { from { transform: scaleY(0); } }
}
@media (min-width: 1000px) and (prefers-reduced-transparency: reduce) { .marque-apercu { -webkit-backdrop-filter: none; backdrop-filter: none; background: oklch(.26 .04 165); } }