nice-metropole: add cell-small-title class for cell (#89452)

static/nice-metropole/_custom.scss

@@ -30,8 +30,8 @@
 		&::after {
 			content: "";
 			display: block;
-			height: 3px;
-			width: 100px;
+			height: 2px;
+			width: 50px;
 			background-color: currentColor;
 			margin-top: 1rem;
 		}
@@ -59,6 +59,23 @@
 	}
 }
 
+@supports (mask-size: contain) {
+	a.external-link {
+		&::after {
+			content: "";
+			display: inline-block;
+			width: 0.625em;
+			height: 0.625em;
+			transform: translateY(-0.25em);
+			background-color: currentColor;
+			margin-left: 0.25em;
+			mask-image: url(img/icon-lien-externe.svg);
+			mask-size: contain;
+		}
+	}
+}
+
+
 //
 //	BUTTONS
 //
@@ -148,6 +165,52 @@
 	}
 }
 
+//
+// Detail / summary / for FAQ
+//
+
+details {
+	background-color: $gray-xlight;
+	padding: 1em;
+	padding-left: 3em;
+	border: 1px solid transparent;
+}
+summary {
+	display: block;
+	color: $blue;
+	font-weight: 500;
+	font-size: $fz-3;
+	list-style-position: outside;
+	position: relative;
+
+	&:hover {
+		cursor: pointer;
+	}
+
+	&::before {
+		content: "+";
+		font-size: $fz-2;
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		right: calc(100% + .33em);
+		font-weight: 600;
+		margin: auto;
+		line-height: 1;
+		height: 1em;
+	}
+}
+
+details[open] {
+		border-color: $blue;
+		summary::before {
+			content: "-";
+		}
+}
+
+details + details {
+	margin-top: 0.5em;
+}
 
 //
 //	LAYOUT
@@ -208,10 +271,10 @@ $top-mobile-height : calc( #{nth($header-logo-size, 2)} + 2rem);
 		border: 2px solid transparent;
 		@media ($min-desktop-viewport) {
 			&:not(.account-link) {
-				color: hsla(0, 0%, 100%, 0.85);
+				color: white;
 				background-color: $red;
 				&:hover, &:focus	 {
-					color: white;
+					color: hsla(0, 0%, 100%, 0.85);
 					text-decoration: none;
 				}
 				&:focus-visible {
@@ -272,11 +335,11 @@ $top-mobile-height : calc( #{nth($header-logo-size, 2)} + 2rem);
 			&::after {
 				content: "";
 				display: block;
-				height: 3px;
+				height: 2px;
 				width: 25px;
 				background-color: currentColor;
 				margin-top: 1rem;
-				transition: width 400ms;
+				transition: width 200ms;
 			}
 		}
 		&--item {
@@ -447,6 +510,13 @@ main {
 		}
 	}
 }
+.cell-small-title {
+	&%cell {
+		h2:first-child {
+			@extend .h3;
+		}
+	}	
+}
 .cell-blue-border {
 	&%cell {
 		border: 1px solid $blue;
@@ -455,7 +525,6 @@ main {
 .cell-gray {
 	&%cell {
 		background-color: $gray-xlight;
-		@extend .cell-blue-title;
 	}
 }
 .cell-list {

static/nice-metropole/img/icon-lien-externe.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="10.917" height="10.875" version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <path d="m7.3965-0.0039062c-0.75743 0.083867-0.78129 1.2741-0.024829 1.3844 0.37655 0.014477 0.75641 0.0020737 1.1342 0.0062072l-3.3262 3.3262c-0.45043 0.46838 0.090657 1.3578 0.71057 1.1372 0.38072-0.16491 0.61551-0.53756 0.92252-0.80544l2.6677-2.6677c0.015956 0.41626-0.035051 0.83948 0.031728 1.2506 0.14547 0.5373 0.94137 0.66346 1.2428 0.19339 0.22367-0.35422 0.09588-0.79193 0.12974-1.1876-0.0088-0.69221 0.01814-1.3867-0.01443-2.0774-0.0766-0.43242-0.53662-0.61441-0.93101-0.55988-0.84755-2.734e-5 -1.6955 5.468e-5 -2.5428-4.1e-5zm-6.1152 1.291c-0.74639-0.02059-1.3694 0.70202-1.2812 1.4351 0.0043341 2.3338-0.0086791 4.6682 0.0065255 7.0016 0.055558 0.71023 0.76417 1.2388 1.4593 1.1511 2.2067-0.0056 4.4141 0.01133 6.6203-0.0086 0.90249-0.07114 1.5993-0.95881 1.5017-1.8499-0.0014857-1.3228 0.0029742-2.6457-0.0022346-3.9684-0.010837-0.61323-0.88952-0.84211-1.241-0.37322-0.189 0.26505-0.14125 0.49316-0.14736 0.79603v3.7323c-0.034341 0.38614-0.47654 0.25665-0.74097 0.2793h-6.0656v-6.8047h4.3789c0.50912 0.053954 0.92301-0.71072 0.5293-1.1484-0.33597-0.36911-0.86724-0.20559-1.3066-0.24219-1.237 5.3e-6 -2.4741-1.07e-5 -3.7111 8e-6z"/>
+</svg>