{ "name": "Lit d'images à fond perdu et incrustation", "family": "layout", "ref": "ref-10-campaign-board-red", "intent": "Faire porter une slide entière par les IMAGES, sans marge ni carte : deux photos à fond perdu qui touchent les quatre bords de la scène, séparées par une COUTURE unique de la couleur de page — jamais une gouttière symétrique —, et une troisième image beaucoup plus petite posée par-dessus l'une d'elles, sans partager une seule arête avec le lit. C'est cette incrustation flottante, et elle seule, qui donne de la profondeur à une composition entièrement plate.", "when_to_use": "Slide de campagne, d'ouverture de chapitre ou de moodboard, où l'image EST le propos et le texte se pose dessus. Vaut aussi pour un hero web plein écran. La typographie ne fait pas partie de ce pattern : elle se pose par-dessus, avec title-02-condensed-overlay-stack.", "avoid_when": "Les images n'ont pas de casting couleur commun — deux photos qui ne partagent aucune dominante à fond perdu se lisent comme deux slides collées, et la couture ne les rattrape pas. Écarter aussi quand il faut légender chaque image : ce lit n'a de place pour aucun texte sous les images, seulement dessus.", "media": [ "slide", "web" ], "tags": [ "image", "photo", "collage", "fond-perdu", "bleed", "incrustation", "overlay", "colonnes", "hero", "campagne", "moodboard" ], "vars": [ { "name": "--vl-slide", "role": "couleur de page — c'est elle qui apparaît dans la couture entre les deux colonnes", "default": "#EDEAE3" }, { "name": "--vl-gutter", "role": "largeur de la couture entre les deux colonnes (un filet, pas une gouttière)", "default": "8px" } ], "slots": [ "image-a", "image-b", "inset" ], "geometry": { "root": ".vl-bci", "frame": [ 1600, 900 ], "ratios": { "col_a_over_frame": 0.47, "seam_over_frame": 0.005, "inset_left_over_frame": 0.65, "inset_w_over_frame": 0.28, "inset_h_over_frame": 0.31, "inset_area_over_frame": 0.0868 }, "type_px": {}, "pad_ratio": { "top": 0, "x": 0, "bottom": 0 } }, "benchmarks": [ { "name": "colonne A à fond perdu : elle touche le bord haut de la scène", "measure": "box('.vl-bci__col--a').top / H", "expect": 0, "tol": 0.001 }, { "name": "colonne A à fond perdu : elle touche le bord bas de la scène", "measure": "(H - box('.vl-bci__col--a').bottom) / H", "expect": 0, "tol": 0.001 }, { "name": "colonne A à fond perdu : elle touche le bord gauche de la scène", "measure": "box('.vl-bci__col--a').left / W", "expect": 0, "tol": 0.001 }, { "name": "colonne B à fond perdu : elle touche le bord droit de la scène", "measure": "(W - box('.vl-bci__col--b').right) / W", "expect": 0, "tol": 0.001 }, { "name": "les deux colonnes couvrent toute la hauteur de la scène", "measure": "(box('.vl-bci__col--a').h + box('.vl-bci__col--b').h) / (2 * H)", "expect": 1, "tol": 0.002 }, { "name": "la couture est un FILET : ≤ 1 % de la largeur de scène", "measure": "(box('.vl-bci__col--b').left - box('.vl-bci__col--a').right) / W", "max": 0.01 }, { "name": "la couture existe : les colonnes ne se touchent pas et ne se chevauchent pas", "measure": "(box('.vl-bci__col--b').left - box('.vl-bci__col--a').right) / W", "min": 0.002 }, { "name": "colonnes de largeurs INÉGALES : un lit coupé, pas un diptyque", "measure": "box('.vl-bci__col--a').w / box('.vl-bci__col--b').w", "min": 0.8, "max": 0.96 }, { "name": "l'incrustation reste une incrustation : ≤ 12 % de l'aire de la scène", "measure": "(box('.vl-bci__inset').w * box('.vl-bci__inset').h) / (W * H)", "max": 0.12 }, { "name": "l'incrustation est visible : ≥ 5 % de l'aire de la scène", "measure": "(box('.vl-bci__inset').w * box('.vl-bci__inset').h) / (W * H)", "min": 0.05 }, { "name": "l'incrustation FLOTTE : elle ne touche aucun bord de la scène", "measure": "Math.min(box('.vl-bci__inset').left, box('.vl-bci__inset').top, W - box('.vl-bci__inset').right, H - box('.vl-bci__inset').bottom) / W", "min": 0.02 }, { "name": "l'incrustation ne partage aucune arête verticale avec la couture", "measure": "Math.min(Math.abs(box('.vl-bci__inset').left - box('.vl-bci__col--b').left), Math.abs(box('.vl-bci__inset').right - box('.vl-bci__col--b').left)) / W", "min": 0.05 }, { "name": "l'incrustation est posée SUR une colonne : entièrement dans la colonne B", "measure": "(box('.vl-bci__inset').left - box('.vl-bci__col--b').left) / W", "min": 0 }, { "name": "l'incrustation est en format paysage, comme le lit qui la porte", "measure": "box('.vl-bci__inset').w / box('.vl-bci__inset').h", "min": 1.2, "max": 2.2 }, { "name": "scène au format 16:9 — c'est une slide, pas une vignette", "measure": "W / H", "expect": 1.7778, "tol": 0.01 }, { "name": "aucune marge de scène : les images occupent toute la largeur, couture comprise", "measure": "(box('.vl-bci__col--a').w + box('.vl-bci__col--b').w) / W", "min": 0.985 } ], "notes": "Trois choses se mesurent ici et une seule se voit. (1) La COUTURE n'est pas une gouttière : elle vaut un demi-pour-cent de la largeur de scène. Doublée, elle devient un blanc de mise en page et les deux images redeviennent deux vignettes posées côte à côte — c'est le défaut le plus courant quand on refait ce lit de mémoire. (2) Les colonnes sont INÉGALES (47 % / 52,5 %). À parts égales, la couture tombe sur l'axe de la slide et la composition se lit comme un diptyque symétrique, ce qui interdit ensuite d'y poser un titre sans le déséquilibrer. (3) L'incrustation ne touche rien : ni un bord de scène, ni la couture. Alignée sur l'une ou l'autre, elle cesse d'être posée DESSUS et redevient une troisième colonne — le seul geste de profondeur du système disparaît alors sans qu'aucun alignement ne casse. Le pattern ne porte PAS la typographie : sur ref-10 elle vient de title-02-condensed-overlay-stack, qui s'y superpose. Les images sont des compositions SVG génératives, sans URL distante ; ce qui compte pour le pattern est leur cadrage, pas leur sujet.", "id": "layout-10-bleed-column-inset" }