Écran en verre dépoli — fond dégradé + modules

{
  "name": "Écran en verre dépoli — fond dégradé + modules",
  "family": "layout",
  "ref": "ref-13-glass-fintech-dashboard",
  "intent": "Emboîter les surfaces d'un écran dense en DEUX couches seulement, sans un trait ni une couleur de séparation : un fond en dégradé qui accueille, et des modules de blanc translucide posés dessus, flou d'arrière-plan compris.",
  "when_to_use": "Dashboard, écran produit ou slide de démo où l'on veut de la profondeur sans ajouter de matière graphique — et où le fond doit rester visible à travers les modules (c'est lui qui donne la couleur de l'ensemble).",
  "avoid_when": "Le support ne rend pas le flou d'arrière-plan (export .pptx, mailing, impression) : le verre s'aplatit en deux gris presque identiques et toute la hiérarchie disparaît. Éviter aussi sur un fond uni — sans dégradé derrière, le dépoli ne se voit pas.",
  "media": [
    "slide",
    "web"
  ],
  "tags": [
    "ecran",
    "verre",
    "glassmorphism",
    "depoli",
    "flou",
    "backdrop",
    "degrade",
    "deux-couches",
    "dashboard",
    "translucide",
    "profondeur"
  ],
  "vars": [
    {
      "name": "--vl-grad-1",
      "role": "extrémité lavande du dégradé de fond",
      "default": "#A3B0DA"
    },
    {
      "name": "--vl-grad-3",
      "role": "extrémité claire du dégradé de fond",
      "default": "#C8CEDA"
    },
    {
      "name": "--vl-surface-glass",
      "role": "verre d'un module (blanc à 45 %)",
      "default": "rgba(255, 255, 255, 0.45)"
    },
    {
      "name": "--vl-surface-glass-strong",
      "role": "verre d'un sous-bloc (blanc à 68 %)",
      "default": "rgba(255, 255, 255, 0.68)"
    },
    {
      "name": "--vl-sheen",
      "role": "liseré de lumière qui remplace la bordure",
      "default": "rgba(255, 255, 255, 0.45)"
    },
    {
      "name": "--vl-blur",
      "role": "rayon du flou d'arrière-plan",
      "default": "18px"
    },
    {
      "name": "--vl-margin",
      "role": "marge de fond autour des modules",
      "default": "44px"
    }
  ],
  "slots": [
    "modules",
    "sub"
  ],
  "geometry": {
    "root": ".vl-glass-board",
    "frame": [
      1600,
      900
    ],
    "ratios": {
      "margin_over_width": 0.0275,
      "gap_over_width": 0.01375,
      "modules_over_width": 0.945
    },
    "type_px": {
      "label": 15,
      "figure": 44,
      "sub": 12
    },
    "pad_ratio": {
      "top": 0.0275,
      "x": 0.0275,
      "bottom": 0.0275
    }
  },
  "benchmarks": [
    {
      "name": "le module est translucide : le dégradé passe au travers",
      "measure": "Number((cs('.vl-glass-board__card','backgroundColor').match(/[\\d.]+/g)||[0,0,0,1])[3]) || 1",
      "max": 0.55
    },
    {
      "name": "le sous-bloc est plus blanc que le module (≥ 12 points d'alpha)",
      "measure": "(Number((cs('.vl-glass-board__sub','backgroundColor').match(/[\\d.]+/g)||[0,0,0,1])[3]) || 1) - (Number((cs('.vl-glass-board__card','backgroundColor').match(/[\\d.]+/g)||[0,0,0,1])[3]) || 1)",
      "min": 0.12
    },
    {
      "name": "le rayon décroît avec l'imbrication : module > sous-bloc",
      "measure": "num('.vl-glass-board__card','borderTopLeftRadius') - num('.vl-glass-board__sub','borderTopLeftRadius')",
      "min": 6
    },
    {
      "name": "le flou d'arrière-plan est bien posé sur le module (sinon ce n'est pas du verre)",
      "measure": "/blur/.test(cs('.vl-glass-board__card','backdropFilter') + cs('.vl-glass-board__card','webkitBackdropFilter')) ? 1 : 0",
      "expect": 1,
      "tol": 0
    },
    {
      "name": "aucune bordure dessinée : c'est le liseré de lumière qui découpe",
      "measure": "num('.vl-glass-board__card','borderTopWidth') + num('.vl-glass-board__sub','borderTopWidth')",
      "max": 0
    },
    {
      "name": "DEUX couches et pas trois : aucun panneau intermédiaire entre le fond et un module",
      "measure": "[...document.querySelectorAll('.vl-glass-board__card')].filter((e) => e.parentElement.classList.contains('vl-glass-board') || e.parentElement.classList.contains('vl-glass-board__row')).length - document.querySelectorAll('.vl-glass-board__card').length",
      "expect": 0,
      "tol": 0
    },
    {
      "name": "marge de fond ≥ gouttière (le liseré de dégradé qui fait flotter les modules)",
      "measure": "num('.vl-glass-board','paddingLeft') - num('.vl-glass-board','rowGap')",
      "min": 0
    },
    {
      "name": "les modules laissent respirer le fond : ils tiennent sous 95 % de la largeur",
      "measure": "box('.vl-glass-board__card--wide').w / W",
      "max": 0.95
    },
    {
      "name": "format PPT : la scène est en 16:9",
      "measure": "W / H",
      "expect": 1.7778,
      "tol": 0.01
    },
    {
      "name": "contraste du libellé sur le verre ≥ 7 (fond effectif = le dégradé composité)",
      "measure": "contrast('.vl-glass-board__label')",
      "min": 7
    },
    {
      "name": "aucun débordement du contenu hors d'un module",
      "measure": "overflow('.vl-glass-board__card--wide')",
      "max": 0
    }
  ],
  "notes": "Le contrôle d'alpha est le cœur du pattern : c'est la seule chose qui porte la hiérarchie, et c'est la première à disparaître quand quelqu'un « nettoie » les rgba en couleurs pleines. Le benchmark « deux couches et pas trois » est là parce que la faute est tentante et invisible à la mesure classique : glisser un panneau translucide de plus entre le fond et les modules ne casse aucun alignement, il écrase juste la profondeur — le fond n'est alors plus jamais vu à nu, et les modules cessent de flotter. Deux pièges payés en plus : (1) `bgOf()` du harnais COMPOSITE les couches translucides pour établir le fond effectif d'une mesure de contraste — un verre à 0,45 n'est ni ignoré ni traité comme opaque ; (2) un dégradé posé en `background` seul laisse `backgroundColor` transparent, les fonds colorés déclarent donc `background-color` ET `background-image`, sinon aucune mesure de contraste n'est possible.",
  "id": "layout-03-glass-board"
}