dsfr: add fr-callout classes (#61344)

static/dsfr/_custom.scss

@@ -387,6 +387,51 @@ div.gru-content div#rub_service {
 			}
 		}
 	}
+
+	.fr-callout {
+		color: $font-color;
+		background-color: $background-contrast-grey;
+		box-shadow: inset .25rem 0 0 $border-default-blue-france;
+		padding: 2rem 3rem;
+		@media screen and ($max-mobile-viewport) {
+			padding: 1.5rem;
+		}
+		&__title {
+			color: $font-color;
+			font-weight: 700;
+			font-size: 1.5rem;
+			line-height: 2rem;
+			@media screen and ($max-mobile-viewport) {
+				font-size: 1.375rem;
+				line-height: 1.75rem;
+			}
+		}
+		&__text {
+			font-size: 1.25rem;
+			line-height: 2rem;
+			@media screen and ($max-mobile-viewport) {
+				font-size: 1.125rem;
+				line-height: 1.75rem;
+			}
+			margin: 0;
+		}
+		p + p {
+			/* may be a small deviation from dsfr but useful
+			   for multiparagraphs callouts */
+			margin-top: 0.5rem;
+		}
+		&.fr-fi-information-line::before {
+			display: block;
+			content: "";
+			height: 1.5rem;
+			margin: -1rem 0 -1rem -2rem;
+			@media screen and ($max-mobile-viewport) {
+				margin: -1rem 0;
+				margin: -.5rem 0 .5rem;
+			}
+			background: url(information-line.svg) left center no-repeat;
+		}
+	}
 }
 
 div.comment-field,

static/dsfr/_vars.scss

@@ -20,6 +20,10 @@ $warning: #fa5c00;
 $error: #e10600;
 $color-focus: #2a7ffe;
 
+// other colours
+$background-contrast-grey: #eeeeee;
+$border-default-blue-france: #6a6af4;
+
 @import '../includes/fonts/marianne';
 @import '../includes/fonts/spectral';
 

static/dsfr/information-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="currentColor" d="M12 22C6.48 22 2 17.52 2 12S6.48 2 12 2s10 4.48 10 10-4.48 10-10 10zm0-2c4.42 0 8-3.58 8-8s-3.58-8-8-8-8 3.58-8 8 3.58 8 8 8zM11 7h2v2h-2V7zm0 4h2v6h-2v-6z"/></svg>