/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg,
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	}

.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-tile {
	will-change: opacity;
	}
.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	}
.leaflet-zoom-anim .leaflet-zoom-animated {
	will-change: transform;
	}
.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline: 0;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-container a.leaflet-active {
	outline: 2px solid orange;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a,
.leaflet-bar a:hover {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url(/vsa/consult/app/a6137456ed160d7606981aa57c559898-a6137456ed160d7606981aa57c559898.png);
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(/vsa/consult/app/4f0283c6ce28e888000e978e537a6a56-4f0283c6ce28e888000e978e537a6a56.png);
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */
.leaflet-default-icon-path {
	background-image: url(/vsa/consult/app/2273e3d8ad9264b7daa5bdbf8e6b47f8-2273e3d8ad9264b7daa5bdbf8e6b47f8.png);
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.7);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover {
	text-decoration: underline;
	}
.leaflet-container .leaflet-control-attribution,
.leaflet-container .leaflet-control-scale {
	font-size: 11px;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	font-size: 11px;
	white-space: nowrap;
	overflow: hidden;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;

	background: #fff;
	background: rgba(255, 255, 255, 0.5);
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 19px;
	line-height: 1.4;
	}
.leaflet-popup-content p {
	margin: 18px 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	padding: 4px 4px 0 0;
	border: none;
	text-align: center;
	width: 18px;
	height: 14px;
	font: 16px/14px Tahoma, Verdana, sans-serif;
	color: #c3c3c3;
	text-decoration: none;
	font-weight: bold;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover {
	color: #999;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	border-bottom: 1px solid #ddd;
	border-top: 1px solid #ddd;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}
.leaflet-oldie .leaflet-popup-tip-container {
	margin-top: -1px;
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-clickable {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}
@charset "UTF-8";
/*
  Thème OUI ORANGE
  ----------------
  Chargé depuis une URL en "oui.sncf"
*/
/* code-app, utile pour les composants CSS Tools */
/* dependances node_modules */
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
Mixins

Installation :
`@import "/css-tools/mixins";`

Styleguide 8.0
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
arrow-lazy()

```css
.tooltip {
  position: relative;
  display: inline-block;
  ...
  @include arrow-lazy($size:0.5em, $color: $COLOR_PRIMARY);
}
```

<b>Paramètres</b><br>
$direction: top, $size: 1em, $color: #ccc, $color-highlight:"", $center: 50%, $margin: -1px, $pseudo: before

Markup:
<div class="tooltip">Tooltip</div>

Styleguide 8.1
*/
/*
focus()

Applique le style focus

```css
.test-button {
  @include focus($color: $COLOR_PRIMARY, $offset: -0.5em);
}
```

<b>Paramètres par défaut</b><br>
$color: #FFF, $opacity: 0.8, $offset: 3px, $width: thin, $style: dotted, $important: ''

Markup:
<button class="test-button">Button</div>

Styleguide 8.2
*/
/*
pseudoFocus

Applique le style focus sur un pseudo élément quand l'effet focus sur l'outline pose problème

```css
.tricky-focus {
  position: relative;
  &:focus { outline:0;}
  @include pseudoFocus($color: $COLOR_PRIMARY, $right: -5em, $top: -0.3em, $left: -0.3em, $bottom: -0.3em);
}
```

<b>Paramètres</b><br>
$pseudo: after, $top: -0.5em, $right: -0.5em, $bottom: -0.5em, $left: -0.5em, $color: #FFF, $opacity: 0.8, $style-line: dotted, $width: 1px

Markup:
<button class="test-button ico-train tricky-focus"><span>train</span></button>
<span>focus un peu tricky</span>

Styleguide 8.3
*/
/*
em()

Convertisseur pixel vers em

```css
.font-24-pixel { font-size: em(24); }
.font-16-pixel { font-size: em(16); }
.font-12-pixel { font-size: em(12); }
```

Markup:
<p class="font-24-pixel">24 pixels</p>
<p class="font-16-pixel">16 pixels</p>
<p class="font-12-pixel">12 pixels</p>

Styleguide 8.4
*/
/*
color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-color-title { @include color($COLOR_PRIMARY); }
.mixin-color-subtitle { @include color($COLOR_PETITS_PRIX, '', !important); }
.mixin-color-subtitle-2 { @include color( $color: #db70e6, $color-high: #830790, $important: '!important'); }
.mixin-color-subtitle-3 { @include color($color: #f97230, $color-high: 30%); }
```

Markup:
<div class="mixin-color-title">Titre 1</div>
<div class="mixin-color-subtitle">Sous-titre 1</div>
<div class="mixin-color-subtitle-2">Sous-titre 2</div>
<div class="mixin-color-subtitle-3">Sous-titre 3</div>

Styleguide 8.5
*/
/*
border-color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.
 - $alpha (optionnel) : rajoute le mode rgba. Si aucune valeur n'est entrée, le couleur passe en mode rgb, donc pas de transparence

```css
.mixin-bdcolor-1 { border:3px solid; @include border-color($COLOR_PRIMARY); }

.mixin-bdcolor-2 { border:3px solid; @include border-color($COLOR_OUIGO); }

.mixin-bdcolor-3 { border:3px solid; @include border-color($color: #73f351, $color-high: #329c15); }

.mixin-bdcolor-4 { border:3px solid; @include border-color($color: #51d7f3, $color-high: 20%); }

.mixin-bdcolor-5 { border:3px solid; @include border-color($color: $COLOR_PRIMARY, $alpha: 0.3); }
```

Markup:
<div class="block mixin-bdcolor-1">Block 1</div>
<div class="block mixin-bdcolor-2">Block 2</div>
<div class="block mixin-bdcolor-3">Block 3</div>
<div class="block mixin-bdcolor-4">Block 4</div>
<div class="block mixin-bdcolor-5">Block 5</div>

Styleguide 8.6
*/
/*
background-color()

Mixin pour gérer les contrastes accentués des couleurs en background. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-bgcolor-1 { @include background-color($COLOR_PRIMARY); }
.mixin-bgcolor-2 { @include background-color($COLOR_OUIGO); }
.mixin-bgcolor-3 { @include background-color($color: #73f351, $color-high: #329c15); }
.mixin-bgcolor-4 { @include background-color($color: #51d7f3, $color-high: 20%); }
```

Markup:
<div class="block mixin-bgcolor-1">Block 1</div>
<div class="block mixin-bgcolor-2">Block 2</div>
<div class="block mixin-bgcolor-3">Block 3</div>
<div class="block mixin-bgcolor-4">Block 4</div>

Styleguide 8.7
*/
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
fill()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c, la couleur est tirée de la map $ALT_COLORS.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Par défaut, on récupère la valeur correspondante dans la table ALT COLORS
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-fill-1 {
  @include fill($COLOR_PRIMARY);
}
.mixin-fill-2 {
  @include fill(#51d7f3, #3858ee);
}
.mixin-fill-3 {
  @include fill($COLOR_PETITS_PRIX, 20%);
}
```

Markup:
<div class="mixin-fill-1">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-2">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-3">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>

Styleguide 8.8
*/
/*
background-linear-gradient()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11y-high-c, la couleur est tirée de la map $ALT_COLORS.

Paramètres :
- $gradient-start : obligatoire, on peut utiliser une oui-colors
- $gradient-end : obligatoire, on peut utiliser une oui-colors
- direction (optionnel, par défaut : "to right")
- $darken (optionnel) : un pourcentage. Si l'argument est utilisé, il remplace les couleurs de substitution
- !important (optionnel)

```css
.mixin-background-linear-gradient {
  @include background-linear-gradient($COLOR_PRIMARY, $COLOR_SECONDARY);
  ...
}
.mixin-background-linear-gradient-darken {
  @include background-linear-gradient(#cc7b27, #e2bd97, $direction: 'to bottom', $darken: 30%);
  ...
}
```

Markup:
<div class="block mixin-background-linear-gradient"></div>
<div class="block mixin-background-linear-gradient-darken"></div>

Styleguide 8.10
*/
/* a11y-line-spacing() */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
breakpoint()

Mixin pour les mediaqueries.

Paramètres :
- $grid : obligatoire, si vous avez importer grid/global, vous pouvez utiliser les valeurs suivantes :
- $small-up : tous les écrans
- $medium-up : > 40em
- $large-up : > 54em

```css
.mixin-breakpoint {
  @include breakpoint($small-up) { // totalement facultatif
    background-color: $COLOR_PRIMARY;
  }
  @include breakpoint($medium-up) {
    background-color: $COLOR_SKIN_LIGHT;
  }
  @include breakpoint($large-up) {
    background-color: $COLOR_SECONDARY;
  }
}
```

Markup:
<div class="mixin-breakpoint"></div>

Styleguide 8.11
*/
/*
radioColorCustom()

Mixin pour les couleurs appliquées sur les radio & checkbox.

Paramètres :
- $inputColor : Couleur de l'input
- $inputColorHighC : (optionel) Couleur de l'input en contrasts accentués



```css
.radio-color-mea {
  @include radioColorCustom($COLOR_MEA_POSITIF);
}

.radio-color-custom {
  @include radioColorCustom(#594fd2, #090352);
}
```

Markup:
<div class="block">
  <p>Using MEA positive color</p>
  <label for="test-mea-1" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-mea-2" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-mea-3" class="vsc__radio radio-color-mea vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-mea-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>
<div class="block">
  <p>Using custom colors</p>
  <label for="test-custom-1" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-custom-2" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-custom-3" class="vsc__radio radio-color-custom vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-custom-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>

Styleguide 8.12
*/
/*
buttonColorCustom()

Permet de surcharger de la couleur d'un CTA conformément à la charte.

Paramètres :
- $color : couleur, obligatoirement issue des [Oui Colors](section-9.html#kssref-9-2), ou une [Custom Color](section-9.html#kssref-9-4).
- $secondary : false par défaut ; pour générer un style de bouton secondaire (bordure de couleur, fond blanc)

```css

@import "../../mixins";
@import "../../colors/oui-colors";

@include export('button--info') {
  .\$code-app {
    &-button {
      &--info {
        @include buttonColorCustom($color:$COLOR_MEA_INFO);
      }
    }
  }
}
```

N.B. supprimez le \ dans le code ci-dessus , qui a été rajouté pour contourner un problème de compilation sass.

Exemples d'usage du mixin :
- [vsc-button--smallPrice](section-6.html#vsc-button--smallPrice)
- [vsc-button--smallPrice-secondary](section-6.html#vsc-button--smallPrice-secondary)
- [vsc-button--info](section-6.html#vsc-button--info)
- [vsc-button--info-secondary](section-6.html#vsc-button--info-secondary)

Styleguide 8.13
*/
.vsa__radio {
  display: inline-block;
  position: relative;
  cursor: pointer;
  font-size: 0.875em; }
  .vsa__radio label {
    color: #000;
    cursor: pointer; }
  .vsa__radio input[type="radio"], .vsa__radio input[type="checkbox"] {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    color: #999082 ;
    box-sizing: border-box; }
    .a11y-high-c .vsa__radio input[type="radio"], .a11y-high-c .vsa__radio input[type="checkbox"] {
      color: #7b7162 ; }
  .vsa__radio [type="radio"] + span, .vsa__radio [type="checkbox"] + span {
    position: relative;
    display: inline-block;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    font-family: AvenirBook, Arial, Helvetica, sans-serif;
    box-sizing: border-box;
    padding-left: 1.4em;
    line-height: 1.2em;
    height: 1.1em; }
  .vsa__radio [type="radio"] + span:before, .vsa__radio [type="checkbox"] + span:before {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 1em;
    height: 1em;
    border: 1px solid #999082;
    transition: background 0.25s ease-out;
    box-sizing: border-box;
    transform: translateZ(0); }
    .a11y-inv-c .vsa__radio [type="radio"] + span:before, .a11y-inv-c .vsa__radio [type="checkbox"] + span:before {
      border: 2px solid #ff0 !important; }
    .a11y-dys-line-spacing .vsa__radio [type="radio"] + span:before, .a11y-dys-line-spacing .vsa__radio [type="checkbox"] + span:before {
      top: 0.2em; }
  .vsa__radio input[type="radio"]:hover + span:before, .vsa__radio input[type="checkbox"]:hover + span:before {
    border-color: #ea5330; }
  .vsa__radio [type="radio"] + span:before {
    border-radius: 50%; }
  .vsa__radio [type="radio"]:checked + span, .vsa__radio [type="checkbox"]:checked + span {
    color: #000; }
  .vsa__radio [type="radio"]:checked + span:before, .vsa__radio [type="checkbox"]:checked + span:before {
    background-color: #ea5330 ;
    color: #ea5330 ;
    border-color: #ea5330; }
    .a11y-high-c .vsa__radio [type="radio"]:checked + span:before, .a11y-high-c .vsa__radio [type="checkbox"]:checked + span:before {
      background-color: #d93914 ; }
    .a11y-high-c .vsa__radio [type="radio"]:checked + span:before, .a11y-high-c .vsa__radio [type="checkbox"]:checked + span:before {
      color: #d93914 ; }
    @media screen and (-ms-high-contrast: active) {
      .vsa__radio [type="radio"]:checked + span:before, .vsa__radio [type="checkbox"]:checked + span:before {
        background-color: windowText; } }
    .a11y-inv-c .vsa__radio [type="radio"]:checked + span:before, .a11y-inv-c .vsa__radio [type="checkbox"]:checked + span:before {
      background-color: #ff0 !important;
      color: #ff0 !important;
      border-color: #ff0 !important; }
  .vsa__radio [type="checkbox"]:checked + span i {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3E%3Cpath d='M 390.12301,97.382005 190.04401,309.637 111.67701,231.274 59.948014,283 191.56601,414.618 l 25.859,-27.385 225.949,-239.64 z' style='fill:%23ffffff' /%3E%3C/svg%3E");
    position: absolute;
    top: -0.035em;
    left: 0;
    display: block;
    width: 1em;
    height: 1em;
    background-size: 100%; }
    @media screen and (-ms-high-contrast: active) {
      .vsa__radio [type="checkbox"]:checked + span i {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3E%3Cpath d='M 390.12301,97.382005 190.04401,309.637 111.67701,231.274 59.948014,283 191.56601,414.618 l 25.859,-27.385 225.949,-239.64 z' style='fill:window' /%3E%3C/svg%3E"); } }
    .a11y-inv-c .vsa__radio [type="checkbox"]:checked + span i {
      background: transparent !important; }
  .vsa__radio [type="checkbox"]:focus + span, .vsa__radio [type="radio"]:focus + span {
    outline-color: #ea5330;
    outline-style: dashed;
    outline-width: thin;
    outline-offset: 3px; }
    .a11y-inv-c .vsa__radio [type="checkbox"]:focus + span, .a11y-inv-c .vsa__radio [type="radio"]:focus + span {
      outline-color: #ff0 !important; }
    .vsa__radio [type="checkbox"]:focus + span:before, .vsa__radio [type="radio"]:focus + span:before {
      border-color: #ea5330; }
  .a11y-high-c .vsa__radio [type="checkbox"]:focus:before, .a11y-high-c .vsa__radio [type="radio"]:focus:before {
    border-color: #b51742; }

/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
Mixins

Installation :
`@import "/css-tools/mixins";`

Styleguide 8.0
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
arrow-lazy()

```css
.tooltip {
  position: relative;
  display: inline-block;
  ...
  @include arrow-lazy($size:0.5em, $color: $COLOR_PRIMARY);
}
```

<b>Paramètres</b><br>
$direction: top, $size: 1em, $color: #ccc, $color-highlight:"", $center: 50%, $margin: -1px, $pseudo: before

Markup:
<div class="tooltip">Tooltip</div>

Styleguide 8.1
*/
/*
focus()

Applique le style focus

```css
.test-button {
  @include focus($color: $COLOR_PRIMARY, $offset: -0.5em);
}
```

<b>Paramètres par défaut</b><br>
$color: #FFF, $opacity: 0.8, $offset: 3px, $width: thin, $style: dotted, $important: ''

Markup:
<button class="test-button">Button</div>

Styleguide 8.2
*/
/*
pseudoFocus

Applique le style focus sur un pseudo élément quand l'effet focus sur l'outline pose problème

```css
.tricky-focus {
  position: relative;
  &:focus { outline:0;}
  @include pseudoFocus($color: $COLOR_PRIMARY, $right: -5em, $top: -0.3em, $left: -0.3em, $bottom: -0.3em);
}
```

<b>Paramètres</b><br>
$pseudo: after, $top: -0.5em, $right: -0.5em, $bottom: -0.5em, $left: -0.5em, $color: #FFF, $opacity: 0.8, $style-line: dotted, $width: 1px

Markup:
<button class="test-button ico-train tricky-focus"><span>train</span></button>
<span>focus un peu tricky</span>

Styleguide 8.3
*/
/*
em()

Convertisseur pixel vers em

```css
.font-24-pixel { font-size: em(24); }
.font-16-pixel { font-size: em(16); }
.font-12-pixel { font-size: em(12); }
```

Markup:
<p class="font-24-pixel">24 pixels</p>
<p class="font-16-pixel">16 pixels</p>
<p class="font-12-pixel">12 pixels</p>

Styleguide 8.4
*/
/*
color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-color-title { @include color($COLOR_PRIMARY); }
.mixin-color-subtitle { @include color($COLOR_PETITS_PRIX, '', !important); }
.mixin-color-subtitle-2 { @include color( $color: #db70e6, $color-high: #830790, $important: '!important'); }
.mixin-color-subtitle-3 { @include color($color: #f97230, $color-high: 30%); }
```

Markup:
<div class="mixin-color-title">Titre 1</div>
<div class="mixin-color-subtitle">Sous-titre 1</div>
<div class="mixin-color-subtitle-2">Sous-titre 2</div>
<div class="mixin-color-subtitle-3">Sous-titre 3</div>

Styleguide 8.5
*/
/*
border-color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.
 - $alpha (optionnel) : rajoute le mode rgba. Si aucune valeur n'est entrée, le couleur passe en mode rgb, donc pas de transparence

```css
.mixin-bdcolor-1 { border:3px solid; @include border-color($COLOR_PRIMARY); }

.mixin-bdcolor-2 { border:3px solid; @include border-color($COLOR_OUIGO); }

.mixin-bdcolor-3 { border:3px solid; @include border-color($color: #73f351, $color-high: #329c15); }

.mixin-bdcolor-4 { border:3px solid; @include border-color($color: #51d7f3, $color-high: 20%); }

.mixin-bdcolor-5 { border:3px solid; @include border-color($color: $COLOR_PRIMARY, $alpha: 0.3); }
```

Markup:
<div class="block mixin-bdcolor-1">Block 1</div>
<div class="block mixin-bdcolor-2">Block 2</div>
<div class="block mixin-bdcolor-3">Block 3</div>
<div class="block mixin-bdcolor-4">Block 4</div>
<div class="block mixin-bdcolor-5">Block 5</div>

Styleguide 8.6
*/
/*
background-color()

Mixin pour gérer les contrastes accentués des couleurs en background. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-bgcolor-1 { @include background-color($COLOR_PRIMARY); }
.mixin-bgcolor-2 { @include background-color($COLOR_OUIGO); }
.mixin-bgcolor-3 { @include background-color($color: #73f351, $color-high: #329c15); }
.mixin-bgcolor-4 { @include background-color($color: #51d7f3, $color-high: 20%); }
```

Markup:
<div class="block mixin-bgcolor-1">Block 1</div>
<div class="block mixin-bgcolor-2">Block 2</div>
<div class="block mixin-bgcolor-3">Block 3</div>
<div class="block mixin-bgcolor-4">Block 4</div>

Styleguide 8.7
*/
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
fill()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c, la couleur est tirée de la map $ALT_COLORS.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Par défaut, on récupère la valeur correspondante dans la table ALT COLORS
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-fill-1 {
  @include fill($COLOR_PRIMARY);
}
.mixin-fill-2 {
  @include fill(#51d7f3, #3858ee);
}
.mixin-fill-3 {
  @include fill($COLOR_PETITS_PRIX, 20%);
}
```

Markup:
<div class="mixin-fill-1">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-2">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-3">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>

Styleguide 8.8
*/
/*
background-linear-gradient()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11y-high-c, la couleur est tirée de la map $ALT_COLORS.

Paramètres :
- $gradient-start : obligatoire, on peut utiliser une oui-colors
- $gradient-end : obligatoire, on peut utiliser une oui-colors
- direction (optionnel, par défaut : "to right")
- $darken (optionnel) : un pourcentage. Si l'argument est utilisé, il remplace les couleurs de substitution
- !important (optionnel)

```css
.mixin-background-linear-gradient {
  @include background-linear-gradient($COLOR_PRIMARY, $COLOR_SECONDARY);
  ...
}
.mixin-background-linear-gradient-darken {
  @include background-linear-gradient(#cc7b27, #e2bd97, $direction: 'to bottom', $darken: 30%);
  ...
}
```

Markup:
<div class="block mixin-background-linear-gradient"></div>
<div class="block mixin-background-linear-gradient-darken"></div>

Styleguide 8.10
*/
/* a11y-line-spacing() */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
breakpoint()

Mixin pour les mediaqueries.

Paramètres :
- $grid : obligatoire, si vous avez importer grid/global, vous pouvez utiliser les valeurs suivantes :
- $small-up : tous les écrans
- $medium-up : > 40em
- $large-up : > 54em

```css
.mixin-breakpoint {
  @include breakpoint($small-up) { // totalement facultatif
    background-color: $COLOR_PRIMARY;
  }
  @include breakpoint($medium-up) {
    background-color: $COLOR_SKIN_LIGHT;
  }
  @include breakpoint($large-up) {
    background-color: $COLOR_SECONDARY;
  }
}
```

Markup:
<div class="mixin-breakpoint"></div>

Styleguide 8.11
*/
/*
radioColorCustom()

Mixin pour les couleurs appliquées sur les radio & checkbox.

Paramètres :
- $inputColor : Couleur de l'input
- $inputColorHighC : (optionel) Couleur de l'input en contrasts accentués



```css
.radio-color-mea {
  @include radioColorCustom($COLOR_MEA_POSITIF);
}

.radio-color-custom {
  @include radioColorCustom(#594fd2, #090352);
}
```

Markup:
<div class="block">
  <p>Using MEA positive color</p>
  <label for="test-mea-1" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-mea-2" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-mea-3" class="vsc__radio radio-color-mea vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-mea-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>
<div class="block">
  <p>Using custom colors</p>
  <label for="test-custom-1" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-custom-2" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-custom-3" class="vsc__radio radio-color-custom vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-custom-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>

Styleguide 8.12
*/
/*
buttonColorCustom()

Permet de surcharger de la couleur d'un CTA conformément à la charte.

Paramètres :
- $color : couleur, obligatoirement issue des [Oui Colors](section-9.html#kssref-9-2), ou une [Custom Color](section-9.html#kssref-9-4).
- $secondary : false par défaut ; pour générer un style de bouton secondaire (bordure de couleur, fond blanc)

```css

@import "../../mixins";
@import "../../colors/oui-colors";

@include export('button--info') {
  .\$code-app {
    &-button {
      &--info {
        @include buttonColorCustom($color:$COLOR_MEA_INFO);
      }
    }
  }
}
```

N.B. supprimez le \ dans le code ci-dessus , qui a été rajouté pour contourner un problème de compilation sass.

Exemples d'usage du mixin :
- [vsc-button--smallPrice](section-6.html#vsc-button--smallPrice)
- [vsc-button--smallPrice-secondary](section-6.html#vsc-button--smallPrice-secondary)
- [vsc-button--info](section-6.html#vsc-button--info)
- [vsc-button--info-secondary](section-6.html#vsc-button--info-secondary)

Styleguide 8.13
*/
/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
Mixins

Installation :
`@import "/css-tools/mixins";`

Styleguide 8.0
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
arrow-lazy()

```css
.tooltip {
  position: relative;
  display: inline-block;
  ...
  @include arrow-lazy($size:0.5em, $color: $COLOR_PRIMARY);
}
```

<b>Paramètres</b><br>
$direction: top, $size: 1em, $color: #ccc, $color-highlight:"", $center: 50%, $margin: -1px, $pseudo: before

Markup:
<div class="tooltip">Tooltip</div>

Styleguide 8.1
*/
/*
focus()

Applique le style focus

```css
.test-button {
  @include focus($color: $COLOR_PRIMARY, $offset: -0.5em);
}
```

<b>Paramètres par défaut</b><br>
$color: #FFF, $opacity: 0.8, $offset: 3px, $width: thin, $style: dotted, $important: ''

Markup:
<button class="test-button">Button</div>

Styleguide 8.2
*/
/*
pseudoFocus

Applique le style focus sur un pseudo élément quand l'effet focus sur l'outline pose problème

```css
.tricky-focus {
  position: relative;
  &:focus { outline:0;}
  @include pseudoFocus($color: $COLOR_PRIMARY, $right: -5em, $top: -0.3em, $left: -0.3em, $bottom: -0.3em);
}
```

<b>Paramètres</b><br>
$pseudo: after, $top: -0.5em, $right: -0.5em, $bottom: -0.5em, $left: -0.5em, $color: #FFF, $opacity: 0.8, $style-line: dotted, $width: 1px

Markup:
<button class="test-button ico-train tricky-focus"><span>train</span></button>
<span>focus un peu tricky</span>

Styleguide 8.3
*/
/*
em()

Convertisseur pixel vers em

```css
.font-24-pixel { font-size: em(24); }
.font-16-pixel { font-size: em(16); }
.font-12-pixel { font-size: em(12); }
```

Markup:
<p class="font-24-pixel">24 pixels</p>
<p class="font-16-pixel">16 pixels</p>
<p class="font-12-pixel">12 pixels</p>

Styleguide 8.4
*/
/*
color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-color-title { @include color($COLOR_PRIMARY); }
.mixin-color-subtitle { @include color($COLOR_PETITS_PRIX, '', !important); }
.mixin-color-subtitle-2 { @include color( $color: #db70e6, $color-high: #830790, $important: '!important'); }
.mixin-color-subtitle-3 { @include color($color: #f97230, $color-high: 30%); }
```

Markup:
<div class="mixin-color-title">Titre 1</div>
<div class="mixin-color-subtitle">Sous-titre 1</div>
<div class="mixin-color-subtitle-2">Sous-titre 2</div>
<div class="mixin-color-subtitle-3">Sous-titre 3</div>

Styleguide 8.5
*/
/*
border-color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.
 - $alpha (optionnel) : rajoute le mode rgba. Si aucune valeur n'est entrée, le couleur passe en mode rgb, donc pas de transparence

```css
.mixin-bdcolor-1 { border:3px solid; @include border-color($COLOR_PRIMARY); }

.mixin-bdcolor-2 { border:3px solid; @include border-color($COLOR_OUIGO); }

.mixin-bdcolor-3 { border:3px solid; @include border-color($color: #73f351, $color-high: #329c15); }

.mixin-bdcolor-4 { border:3px solid; @include border-color($color: #51d7f3, $color-high: 20%); }

.mixin-bdcolor-5 { border:3px solid; @include border-color($color: $COLOR_PRIMARY, $alpha: 0.3); }
```

Markup:
<div class="block mixin-bdcolor-1">Block 1</div>
<div class="block mixin-bdcolor-2">Block 2</div>
<div class="block mixin-bdcolor-3">Block 3</div>
<div class="block mixin-bdcolor-4">Block 4</div>
<div class="block mixin-bdcolor-5">Block 5</div>

Styleguide 8.6
*/
/*
background-color()

Mixin pour gérer les contrastes accentués des couleurs en background. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-bgcolor-1 { @include background-color($COLOR_PRIMARY); }
.mixin-bgcolor-2 { @include background-color($COLOR_OUIGO); }
.mixin-bgcolor-3 { @include background-color($color: #73f351, $color-high: #329c15); }
.mixin-bgcolor-4 { @include background-color($color: #51d7f3, $color-high: 20%); }
```

Markup:
<div class="block mixin-bgcolor-1">Block 1</div>
<div class="block mixin-bgcolor-2">Block 2</div>
<div class="block mixin-bgcolor-3">Block 3</div>
<div class="block mixin-bgcolor-4">Block 4</div>

Styleguide 8.7
*/
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
fill()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c, la couleur est tirée de la map $ALT_COLORS.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Par défaut, on récupère la valeur correspondante dans la table ALT COLORS
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-fill-1 {
  @include fill($COLOR_PRIMARY);
}
.mixin-fill-2 {
  @include fill(#51d7f3, #3858ee);
}
.mixin-fill-3 {
  @include fill($COLOR_PETITS_PRIX, 20%);
}
```

Markup:
<div class="mixin-fill-1">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-2">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-3">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>

Styleguide 8.8
*/
/*
background-linear-gradient()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11y-high-c, la couleur est tirée de la map $ALT_COLORS.

Paramètres :
- $gradient-start : obligatoire, on peut utiliser une oui-colors
- $gradient-end : obligatoire, on peut utiliser une oui-colors
- direction (optionnel, par défaut : "to right")
- $darken (optionnel) : un pourcentage. Si l'argument est utilisé, il remplace les couleurs de substitution
- !important (optionnel)

```css
.mixin-background-linear-gradient {
  @include background-linear-gradient($COLOR_PRIMARY, $COLOR_SECONDARY);
  ...
}
.mixin-background-linear-gradient-darken {
  @include background-linear-gradient(#cc7b27, #e2bd97, $direction: 'to bottom', $darken: 30%);
  ...
}
```

Markup:
<div class="block mixin-background-linear-gradient"></div>
<div class="block mixin-background-linear-gradient-darken"></div>

Styleguide 8.10
*/
/* a11y-line-spacing() */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
breakpoint()

Mixin pour les mediaqueries.

Paramètres :
- $grid : obligatoire, si vous avez importer grid/global, vous pouvez utiliser les valeurs suivantes :
- $small-up : tous les écrans
- $medium-up : > 40em
- $large-up : > 54em

```css
.mixin-breakpoint {
  @include breakpoint($small-up) { // totalement facultatif
    background-color: $COLOR_PRIMARY;
  }
  @include breakpoint($medium-up) {
    background-color: $COLOR_SKIN_LIGHT;
  }
  @include breakpoint($large-up) {
    background-color: $COLOR_SECONDARY;
  }
}
```

Markup:
<div class="mixin-breakpoint"></div>

Styleguide 8.11
*/
/*
radioColorCustom()

Mixin pour les couleurs appliquées sur les radio & checkbox.

Paramètres :
- $inputColor : Couleur de l'input
- $inputColorHighC : (optionel) Couleur de l'input en contrasts accentués



```css
.radio-color-mea {
  @include radioColorCustom($COLOR_MEA_POSITIF);
}

.radio-color-custom {
  @include radioColorCustom(#594fd2, #090352);
}
```

Markup:
<div class="block">
  <p>Using MEA positive color</p>
  <label for="test-mea-1" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-mea-2" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-mea-3" class="vsc__radio radio-color-mea vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-mea-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>
<div class="block">
  <p>Using custom colors</p>
  <label for="test-custom-1" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-custom-2" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-custom-3" class="vsc__radio radio-color-custom vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-custom-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>

Styleguide 8.12
*/
/*
buttonColorCustom()

Permet de surcharger de la couleur d'un CTA conformément à la charte.

Paramètres :
- $color : couleur, obligatoirement issue des [Oui Colors](section-9.html#kssref-9-2), ou une [Custom Color](section-9.html#kssref-9-4).
- $secondary : false par défaut ; pour générer un style de bouton secondaire (bordure de couleur, fond blanc)

```css

@import "../../mixins";
@import "../../colors/oui-colors";

@include export('button--info') {
  .\$code-app {
    &-button {
      &--info {
        @include buttonColorCustom($color:$COLOR_MEA_INFO);
      }
    }
  }
}
```

N.B. supprimez le \ dans le code ci-dessus , qui a été rajouté pour contourner un problème de compilation sass.

Exemples d'usage du mixin :
- [vsc-button--smallPrice](section-6.html#vsc-button--smallPrice)
- [vsc-button--smallPrice-secondary](section-6.html#vsc-button--smallPrice-secondary)
- [vsc-button--info](section-6.html#vsc-button--info)
- [vsc-button--info-secondary](section-6.html#vsc-button--info-secondary)

Styleguide 8.13
*/
.vsa__radio--toggler {
  font-size: 1rem; }
  .vsa__radio--toggler [type='checkbox'] + span {
    padding-left: 4em;
    height: 2em;
    display: table-cell;
    vertical-align: middle; }
    .vsa__radio--toggler [type='checkbox'] + span::before {
      background-color: #999082 ;
      content: '';
      display: block;
      width: 3.5em;
      height: 2em;
      border-radius: 3em;
      border: 0; }
      .a11y-high-c .vsa__radio--toggler [type='checkbox'] + span::before {
        background-color: #7b7162 ; }
      .a11y-inv-c .vsa__radio--toggler [type='checkbox'] + span::before {
        background-color: #ff0 !important; }
    .vsa__radio--toggler [type='checkbox'] + span::after {
      content: '';
      display: block;
      width: 1.75em;
      height: 1.75em;
      position: absolute;
      top: 0.125em;
      left: 0.125em;
      background-color: #fff;
      border-radius: 50%;
      transition: left .2s ease-out; }
      .a11y-inv-c .vsa__radio--toggler [type='checkbox'] + span::after {
        background-color: #000080 !important;
        border-color: 2px solid #000080 !important; }
    .vsa__radio--toggler [type='checkbox'] + span:hover::before, .vsa__radio--toggler [type='checkbox'] + span:active::before, .vsa__radio--toggler [type='checkbox'] + span:focus::before {
      border: 0; }
  .vsa__radio--toggler [type='checkbox']:checked + span {
    border: 0; }
    .vsa__radio--toggler [type='checkbox']:checked + span::before {
      background-color: #ea5330 ; }
      .a11y-high-c .vsa__radio--toggler [type='checkbox']:checked + span::before {
        background-color: #d93914 ; }
    .vsa__radio--toggler [type='checkbox']:checked + span::after {
      left: 1.625em; }
    .vsa__radio--toggler [type='checkbox']:checked + span i {
      display: none; }
    .vsa__radio--toggler [type='checkbox']:checked + span:hover::before, .vsa__radio--toggler [type='checkbox']:checked + span:active::before, .vsa__radio--toggler [type='checkbox']:checked + span:focus::before {
      border: 0; }

/*
Mixins

Installation :
`@import "/css-tools/mixins";`

Styleguide 8.0
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
arrow-lazy()

```css
.tooltip {
  position: relative;
  display: inline-block;
  ...
  @include arrow-lazy($size:0.5em, $color: $COLOR_PRIMARY);
}
```

<b>Paramètres</b><br>
$direction: top, $size: 1em, $color: #ccc, $color-highlight:"", $center: 50%, $margin: -1px, $pseudo: before

Markup:
<div class="tooltip">Tooltip</div>

Styleguide 8.1
*/
/*
focus()

Applique le style focus

```css
.test-button {
  @include focus($color: $COLOR_PRIMARY, $offset: -0.5em);
}
```

<b>Paramètres par défaut</b><br>
$color: #FFF, $opacity: 0.8, $offset: 3px, $width: thin, $style: dotted, $important: ''

Markup:
<button class="test-button">Button</div>

Styleguide 8.2
*/
/*
pseudoFocus

Applique le style focus sur un pseudo élément quand l'effet focus sur l'outline pose problème

```css
.tricky-focus {
  position: relative;
  &:focus { outline:0;}
  @include pseudoFocus($color: $COLOR_PRIMARY, $right: -5em, $top: -0.3em, $left: -0.3em, $bottom: -0.3em);
}
```

<b>Paramètres</b><br>
$pseudo: after, $top: -0.5em, $right: -0.5em, $bottom: -0.5em, $left: -0.5em, $color: #FFF, $opacity: 0.8, $style-line: dotted, $width: 1px

Markup:
<button class="test-button ico-train tricky-focus"><span>train</span></button>
<span>focus un peu tricky</span>

Styleguide 8.3
*/
/*
em()

Convertisseur pixel vers em

```css
.font-24-pixel { font-size: em(24); }
.font-16-pixel { font-size: em(16); }
.font-12-pixel { font-size: em(12); }
```

Markup:
<p class="font-24-pixel">24 pixels</p>
<p class="font-16-pixel">16 pixels</p>
<p class="font-12-pixel">12 pixels</p>

Styleguide 8.4
*/
/*
color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-color-title { @include color($COLOR_PRIMARY); }
.mixin-color-subtitle { @include color($COLOR_PETITS_PRIX, '', !important); }
.mixin-color-subtitle-2 { @include color( $color: #db70e6, $color-high: #830790, $important: '!important'); }
.mixin-color-subtitle-3 { @include color($color: #f97230, $color-high: 30%); }
```

Markup:
<div class="mixin-color-title">Titre 1</div>
<div class="mixin-color-subtitle">Sous-titre 1</div>
<div class="mixin-color-subtitle-2">Sous-titre 2</div>
<div class="mixin-color-subtitle-3">Sous-titre 3</div>

Styleguide 8.5
*/
/*
border-color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.
 - $alpha (optionnel) : rajoute le mode rgba. Si aucune valeur n'est entrée, le couleur passe en mode rgb, donc pas de transparence

```css
.mixin-bdcolor-1 { border:3px solid; @include border-color($COLOR_PRIMARY); }

.mixin-bdcolor-2 { border:3px solid; @include border-color($COLOR_OUIGO); }

.mixin-bdcolor-3 { border:3px solid; @include border-color($color: #73f351, $color-high: #329c15); }

.mixin-bdcolor-4 { border:3px solid; @include border-color($color: #51d7f3, $color-high: 20%); }

.mixin-bdcolor-5 { border:3px solid; @include border-color($color: $COLOR_PRIMARY, $alpha: 0.3); }
```

Markup:
<div class="block mixin-bdcolor-1">Block 1</div>
<div class="block mixin-bdcolor-2">Block 2</div>
<div class="block mixin-bdcolor-3">Block 3</div>
<div class="block mixin-bdcolor-4">Block 4</div>
<div class="block mixin-bdcolor-5">Block 5</div>

Styleguide 8.6
*/
/*
background-color()

Mixin pour gérer les contrastes accentués des couleurs en background. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-bgcolor-1 { @include background-color($COLOR_PRIMARY); }
.mixin-bgcolor-2 { @include background-color($COLOR_OUIGO); }
.mixin-bgcolor-3 { @include background-color($color: #73f351, $color-high: #329c15); }
.mixin-bgcolor-4 { @include background-color($color: #51d7f3, $color-high: 20%); }
```

Markup:
<div class="block mixin-bgcolor-1">Block 1</div>
<div class="block mixin-bgcolor-2">Block 2</div>
<div class="block mixin-bgcolor-3">Block 3</div>
<div class="block mixin-bgcolor-4">Block 4</div>

Styleguide 8.7
*/
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
fill()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c, la couleur est tirée de la map $ALT_COLORS.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Par défaut, on récupère la valeur correspondante dans la table ALT COLORS
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-fill-1 {
  @include fill($COLOR_PRIMARY);
}
.mixin-fill-2 {
  @include fill(#51d7f3, #3858ee);
}
.mixin-fill-3 {
  @include fill($COLOR_PETITS_PRIX, 20%);
}
```

Markup:
<div class="mixin-fill-1">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-2">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-3">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>

Styleguide 8.8
*/
/*
background-linear-gradient()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11y-high-c, la couleur est tirée de la map $ALT_COLORS.

Paramètres :
- $gradient-start : obligatoire, on peut utiliser une oui-colors
- $gradient-end : obligatoire, on peut utiliser une oui-colors
- direction (optionnel, par défaut : "to right")
- $darken (optionnel) : un pourcentage. Si l'argument est utilisé, il remplace les couleurs de substitution
- !important (optionnel)

```css
.mixin-background-linear-gradient {
  @include background-linear-gradient($COLOR_PRIMARY, $COLOR_SECONDARY);
  ...
}
.mixin-background-linear-gradient-darken {
  @include background-linear-gradient(#cc7b27, #e2bd97, $direction: 'to bottom', $darken: 30%);
  ...
}
```

Markup:
<div class="block mixin-background-linear-gradient"></div>
<div class="block mixin-background-linear-gradient-darken"></div>

Styleguide 8.10
*/
/* a11y-line-spacing() */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
breakpoint()

Mixin pour les mediaqueries.

Paramètres :
- $grid : obligatoire, si vous avez importer grid/global, vous pouvez utiliser les valeurs suivantes :
- $small-up : tous les écrans
- $medium-up : > 40em
- $large-up : > 54em

```css
.mixin-breakpoint {
  @include breakpoint($small-up) { // totalement facultatif
    background-color: $COLOR_PRIMARY;
  }
  @include breakpoint($medium-up) {
    background-color: $COLOR_SKIN_LIGHT;
  }
  @include breakpoint($large-up) {
    background-color: $COLOR_SECONDARY;
  }
}
```

Markup:
<div class="mixin-breakpoint"></div>

Styleguide 8.11
*/
/*
radioColorCustom()

Mixin pour les couleurs appliquées sur les radio & checkbox.

Paramètres :
- $inputColor : Couleur de l'input
- $inputColorHighC : (optionel) Couleur de l'input en contrasts accentués



```css
.radio-color-mea {
  @include radioColorCustom($COLOR_MEA_POSITIF);
}

.radio-color-custom {
  @include radioColorCustom(#594fd2, #090352);
}
```

Markup:
<div class="block">
  <p>Using MEA positive color</p>
  <label for="test-mea-1" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-mea-2" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-mea-3" class="vsc__radio radio-color-mea vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-mea-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>
<div class="block">
  <p>Using custom colors</p>
  <label for="test-custom-1" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-custom-2" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-custom-3" class="vsc__radio radio-color-custom vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-custom-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>

Styleguide 8.12
*/
/*
buttonColorCustom()

Permet de surcharger de la couleur d'un CTA conformément à la charte.

Paramètres :
- $color : couleur, obligatoirement issue des [Oui Colors](section-9.html#kssref-9-2), ou une [Custom Color](section-9.html#kssref-9-4).
- $secondary : false par défaut ; pour générer un style de bouton secondaire (bordure de couleur, fond blanc)

```css

@import "../../mixins";
@import "../../colors/oui-colors";

@include export('button--info') {
  .\$code-app {
    &-button {
      &--info {
        @include buttonColorCustom($color:$COLOR_MEA_INFO);
      }
    }
  }
}
```

N.B. supprimez le \ dans le code ci-dessus , qui a été rajouté pour contourner un problème de compilation sass.

Exemples d'usage du mixin :
- [vsc-button--smallPrice](section-6.html#vsc-button--smallPrice)
- [vsc-button--smallPrice-secondary](section-6.html#vsc-button--smallPrice-secondary)
- [vsc-button--info](section-6.html#vsc-button--info)
- [vsc-button--info-secondary](section-6.html#vsc-button--info-secondary)

Styleguide 8.13
*/
/*
CTA buttons

<div class="sg-info">
Installation complète :
`@import "[...]/css-tools/src/forms/button/button-full";`

Installer des styles spécifiques :
`@import "[...]/css-tools/src/forms/button/button--large";
@import "[...]/css-tools/src/forms/button/button--small";
@import "[...]/css-tools/src/forms/button/button--white";
@import "[...]/css-tools/src/forms/button/button--secondary";
@import "[...]/css-tools/src/forms/button/button--uppercase";
@import "[...]/css-tools/src/forms/button/button--ghost";
@import "[...]/css-tools/src/forms/button/button--smallPrice";
@import "[...]/css-tools/src/forms/button/button--smallPrice-secondary";
@import "[...]/css-tools/src/forms/button/button--info";
@import "[...]/css-tools/src/forms/button/button--info-secondary";`

`Classe = vsc-button
2 types de boutons, default et ghost : vsc-button--default et vsc-button--ghost
3 tailles : Medium [pas de modifier, taille par défaut], Large [vsc-button--large] et Small [vsc-button--small]`
</div>

Markup: styleguide/tpl/button-default.hbs

Styleguide 6.1
*/
/*
Icon button

<div class="sg-info">
Installation :
`@import "[...]/css-tools/src/forms/button/button--icon";`
</div>

Markup: styleguide/tpl/button--icon.hbs

Styleguide 6.2
*/
/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
Mixins

Installation :
`@import "/css-tools/mixins";`

Styleguide 8.0
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
arrow-lazy()

```css
.tooltip {
  position: relative;
  display: inline-block;
  ...
  @include arrow-lazy($size:0.5em, $color: $COLOR_PRIMARY);
}
```

<b>Paramètres</b><br>
$direction: top, $size: 1em, $color: #ccc, $color-highlight:"", $center: 50%, $margin: -1px, $pseudo: before

Markup:
<div class="tooltip">Tooltip</div>

Styleguide 8.1
*/
/*
focus()

Applique le style focus

```css
.test-button {
  @include focus($color: $COLOR_PRIMARY, $offset: -0.5em);
}
```

<b>Paramètres par défaut</b><br>
$color: #FFF, $opacity: 0.8, $offset: 3px, $width: thin, $style: dotted, $important: ''

Markup:
<button class="test-button">Button</div>

Styleguide 8.2
*/
/*
pseudoFocus

Applique le style focus sur un pseudo élément quand l'effet focus sur l'outline pose problème

```css
.tricky-focus {
  position: relative;
  &:focus { outline:0;}
  @include pseudoFocus($color: $COLOR_PRIMARY, $right: -5em, $top: -0.3em, $left: -0.3em, $bottom: -0.3em);
}
```

<b>Paramètres</b><br>
$pseudo: after, $top: -0.5em, $right: -0.5em, $bottom: -0.5em, $left: -0.5em, $color: #FFF, $opacity: 0.8, $style-line: dotted, $width: 1px

Markup:
<button class="test-button ico-train tricky-focus"><span>train</span></button>
<span>focus un peu tricky</span>

Styleguide 8.3
*/
/*
em()

Convertisseur pixel vers em

```css
.font-24-pixel { font-size: em(24); }
.font-16-pixel { font-size: em(16); }
.font-12-pixel { font-size: em(12); }
```

Markup:
<p class="font-24-pixel">24 pixels</p>
<p class="font-16-pixel">16 pixels</p>
<p class="font-12-pixel">12 pixels</p>

Styleguide 8.4
*/
/*
color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-color-title { @include color($COLOR_PRIMARY); }
.mixin-color-subtitle { @include color($COLOR_PETITS_PRIX, '', !important); }
.mixin-color-subtitle-2 { @include color( $color: #db70e6, $color-high: #830790, $important: '!important'); }
.mixin-color-subtitle-3 { @include color($color: #f97230, $color-high: 30%); }
```

Markup:
<div class="mixin-color-title">Titre 1</div>
<div class="mixin-color-subtitle">Sous-titre 1</div>
<div class="mixin-color-subtitle-2">Sous-titre 2</div>
<div class="mixin-color-subtitle-3">Sous-titre 3</div>

Styleguide 8.5
*/
/*
border-color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.
 - $alpha (optionnel) : rajoute le mode rgba. Si aucune valeur n'est entrée, le couleur passe en mode rgb, donc pas de transparence

```css
.mixin-bdcolor-1 { border:3px solid; @include border-color($COLOR_PRIMARY); }

.mixin-bdcolor-2 { border:3px solid; @include border-color($COLOR_OUIGO); }

.mixin-bdcolor-3 { border:3px solid; @include border-color($color: #73f351, $color-high: #329c15); }

.mixin-bdcolor-4 { border:3px solid; @include border-color($color: #51d7f3, $color-high: 20%); }

.mixin-bdcolor-5 { border:3px solid; @include border-color($color: $COLOR_PRIMARY, $alpha: 0.3); }
```

Markup:
<div class="block mixin-bdcolor-1">Block 1</div>
<div class="block mixin-bdcolor-2">Block 2</div>
<div class="block mixin-bdcolor-3">Block 3</div>
<div class="block mixin-bdcolor-4">Block 4</div>
<div class="block mixin-bdcolor-5">Block 5</div>

Styleguide 8.6
*/
/*
background-color()

Mixin pour gérer les contrastes accentués des couleurs en background. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-bgcolor-1 { @include background-color($COLOR_PRIMARY); }
.mixin-bgcolor-2 { @include background-color($COLOR_OUIGO); }
.mixin-bgcolor-3 { @include background-color($color: #73f351, $color-high: #329c15); }
.mixin-bgcolor-4 { @include background-color($color: #51d7f3, $color-high: 20%); }
```

Markup:
<div class="block mixin-bgcolor-1">Block 1</div>
<div class="block mixin-bgcolor-2">Block 2</div>
<div class="block mixin-bgcolor-3">Block 3</div>
<div class="block mixin-bgcolor-4">Block 4</div>

Styleguide 8.7
*/
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
fill()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c, la couleur est tirée de la map $ALT_COLORS.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Par défaut, on récupère la valeur correspondante dans la table ALT COLORS
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-fill-1 {
  @include fill($COLOR_PRIMARY);
}
.mixin-fill-2 {
  @include fill(#51d7f3, #3858ee);
}
.mixin-fill-3 {
  @include fill($COLOR_PETITS_PRIX, 20%);
}
```

Markup:
<div class="mixin-fill-1">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-2">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-3">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>

Styleguide 8.8
*/
/*
background-linear-gradient()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11y-high-c, la couleur est tirée de la map $ALT_COLORS.

Paramètres :
- $gradient-start : obligatoire, on peut utiliser une oui-colors
- $gradient-end : obligatoire, on peut utiliser une oui-colors
- direction (optionnel, par défaut : "to right")
- $darken (optionnel) : un pourcentage. Si l'argument est utilisé, il remplace les couleurs de substitution
- !important (optionnel)

```css
.mixin-background-linear-gradient {
  @include background-linear-gradient($COLOR_PRIMARY, $COLOR_SECONDARY);
  ...
}
.mixin-background-linear-gradient-darken {
  @include background-linear-gradient(#cc7b27, #e2bd97, $direction: 'to bottom', $darken: 30%);
  ...
}
```

Markup:
<div class="block mixin-background-linear-gradient"></div>
<div class="block mixin-background-linear-gradient-darken"></div>

Styleguide 8.10
*/
/* a11y-line-spacing() */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
breakpoint()

Mixin pour les mediaqueries.

Paramètres :
- $grid : obligatoire, si vous avez importer grid/global, vous pouvez utiliser les valeurs suivantes :
- $small-up : tous les écrans
- $medium-up : > 40em
- $large-up : > 54em

```css
.mixin-breakpoint {
  @include breakpoint($small-up) { // totalement facultatif
    background-color: $COLOR_PRIMARY;
  }
  @include breakpoint($medium-up) {
    background-color: $COLOR_SKIN_LIGHT;
  }
  @include breakpoint($large-up) {
    background-color: $COLOR_SECONDARY;
  }
}
```

Markup:
<div class="mixin-breakpoint"></div>

Styleguide 8.11
*/
/*
radioColorCustom()

Mixin pour les couleurs appliquées sur les radio & checkbox.

Paramètres :
- $inputColor : Couleur de l'input
- $inputColorHighC : (optionel) Couleur de l'input en contrasts accentués



```css
.radio-color-mea {
  @include radioColorCustom($COLOR_MEA_POSITIF);
}

.radio-color-custom {
  @include radioColorCustom(#594fd2, #090352);
}
```

Markup:
<div class="block">
  <p>Using MEA positive color</p>
  <label for="test-mea-1" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-mea-2" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-mea-3" class="vsc__radio radio-color-mea vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-mea-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>
<div class="block">
  <p>Using custom colors</p>
  <label for="test-custom-1" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-custom-2" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-custom-3" class="vsc__radio radio-color-custom vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-custom-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>

Styleguide 8.12
*/
/*
buttonColorCustom()

Permet de surcharger de la couleur d'un CTA conformément à la charte.

Paramètres :
- $color : couleur, obligatoirement issue des [Oui Colors](section-9.html#kssref-9-2), ou une [Custom Color](section-9.html#kssref-9-4).
- $secondary : false par défaut ; pour générer un style de bouton secondaire (bordure de couleur, fond blanc)

```css

@import "../../mixins";
@import "../../colors/oui-colors";

@include export('button--info') {
  .\$code-app {
    &-button {
      &--info {
        @include buttonColorCustom($color:$COLOR_MEA_INFO);
      }
    }
  }
}
```

N.B. supprimez le \ dans le code ci-dessus , qui a été rajouté pour contourner un problème de compilation sass.

Exemples d'usage du mixin :
- [vsc-button--smallPrice](section-6.html#vsc-button--smallPrice)
- [vsc-button--smallPrice-secondary](section-6.html#vsc-button--smallPrice-secondary)
- [vsc-button--info](section-6.html#vsc-button--info)
- [vsc-button--info-secondary](section-6.html#vsc-button--info-secondary)

Styleguide 8.13
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
.vsa-button {
  display: inline-block;
  font-family: AvenirMedium, Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 0.875em;
  line-height: 1.075em;
  text-decoration: none;
  text-align: center;
  margin: 0;
  padding: 0.825em 1.01em;
  border-radius: 2.5em;
  border: 1px solid #ea5330;
  background-color: #ea5330 ;
  min-width: 10.3em;
  color: #fff;
  transition: all 0.2s ease;
  cursor: pointer;
  vertical-align: bottom; }
  .a11y-high-c .vsa-button {
    background-color: #d93914 ; }
  .a11y-inv-c .vsa-button {
    border-color: #ff0 !important; }
  .vsa-button:hover {
    background-color: #b51742 ;
    transition: background ease 0.2s;
    color: #fff;
    border-color: #b51742; }
    .a11y-high-c .vsa-button:hover {
      background-color: #b51742 ; }
  .vsa-button:active, .vsa-button:active:hover, .vsa-button:focus:hover {
    color: #fff;
    background-color: #9e143a;
    border-color: #9e143a; }
  .vsa-button:focus {
    outline-color: rgba(255, 255, 255, 0.8) ;
    outline-style: dashed ;
    outline-width: thin ;
    outline-offset: -0.7em ;
    box-shadow: none ; }
  .a11y-high-c .vsa-button:focus {
    outline-color: #FFF ;
    outline-width: thin ;
    outline-offset: -0.7em ; }
  .vsa-button[disabled] {
    background-color: #ecedeb ;
    color: #999082 ;
    border-color: #ecedeb;
    cursor: default; }
    .a11y-high-c .vsa-button[disabled] {
      background-color: #ecedeb ; }
    .a11y-high-c .vsa-button[disabled] {
      color: #6b6b6b ; }
    .vsa-button[disabled]:hover {
      background-color: #ecedeb ;
      border-color: #ecedeb; }
      .a11y-high-c .vsa-button[disabled]:hover {
        background-color: #ecedeb ; }
  .vsa-button--dark:hover {
    color: #FFF;
    border-color: #FFF; }

.vsa-button--large {
  font-family: AvenirBook, Arial, Helvetica, sans-serif;
  font-size: 1em;
  line-height: 1.25em;
  padding: 0.875em 1.25em;
  min-width: 9.4em; }

/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
Mixins

Installation :
`@import "/css-tools/mixins";`

Styleguide 8.0
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
arrow-lazy()

```css
.tooltip {
  position: relative;
  display: inline-block;
  ...
  @include arrow-lazy($size:0.5em, $color: $COLOR_PRIMARY);
}
```

<b>Paramètres</b><br>
$direction: top, $size: 1em, $color: #ccc, $color-highlight:"", $center: 50%, $margin: -1px, $pseudo: before

Markup:
<div class="tooltip">Tooltip</div>

Styleguide 8.1
*/
/*
focus()

Applique le style focus

```css
.test-button {
  @include focus($color: $COLOR_PRIMARY, $offset: -0.5em);
}
```

<b>Paramètres par défaut</b><br>
$color: #FFF, $opacity: 0.8, $offset: 3px, $width: thin, $style: dotted, $important: ''

Markup:
<button class="test-button">Button</div>

Styleguide 8.2
*/
/*
pseudoFocus

Applique le style focus sur un pseudo élément quand l'effet focus sur l'outline pose problème

```css
.tricky-focus {
  position: relative;
  &:focus { outline:0;}
  @include pseudoFocus($color: $COLOR_PRIMARY, $right: -5em, $top: -0.3em, $left: -0.3em, $bottom: -0.3em);
}
```

<b>Paramètres</b><br>
$pseudo: after, $top: -0.5em, $right: -0.5em, $bottom: -0.5em, $left: -0.5em, $color: #FFF, $opacity: 0.8, $style-line: dotted, $width: 1px

Markup:
<button class="test-button ico-train tricky-focus"><span>train</span></button>
<span>focus un peu tricky</span>

Styleguide 8.3
*/
/*
em()

Convertisseur pixel vers em

```css
.font-24-pixel { font-size: em(24); }
.font-16-pixel { font-size: em(16); }
.font-12-pixel { font-size: em(12); }
```

Markup:
<p class="font-24-pixel">24 pixels</p>
<p class="font-16-pixel">16 pixels</p>
<p class="font-12-pixel">12 pixels</p>

Styleguide 8.4
*/
/*
color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-color-title { @include color($COLOR_PRIMARY); }
.mixin-color-subtitle { @include color($COLOR_PETITS_PRIX, '', !important); }
.mixin-color-subtitle-2 { @include color( $color: #db70e6, $color-high: #830790, $important: '!important'); }
.mixin-color-subtitle-3 { @include color($color: #f97230, $color-high: 30%); }
```

Markup:
<div class="mixin-color-title">Titre 1</div>
<div class="mixin-color-subtitle">Sous-titre 1</div>
<div class="mixin-color-subtitle-2">Sous-titre 2</div>
<div class="mixin-color-subtitle-3">Sous-titre 3</div>

Styleguide 8.5
*/
/*
border-color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.
 - $alpha (optionnel) : rajoute le mode rgba. Si aucune valeur n'est entrée, le couleur passe en mode rgb, donc pas de transparence

```css
.mixin-bdcolor-1 { border:3px solid; @include border-color($COLOR_PRIMARY); }

.mixin-bdcolor-2 { border:3px solid; @include border-color($COLOR_OUIGO); }

.mixin-bdcolor-3 { border:3px solid; @include border-color($color: #73f351, $color-high: #329c15); }

.mixin-bdcolor-4 { border:3px solid; @include border-color($color: #51d7f3, $color-high: 20%); }

.mixin-bdcolor-5 { border:3px solid; @include border-color($color: $COLOR_PRIMARY, $alpha: 0.3); }
```

Markup:
<div class="block mixin-bdcolor-1">Block 1</div>
<div class="block mixin-bdcolor-2">Block 2</div>
<div class="block mixin-bdcolor-3">Block 3</div>
<div class="block mixin-bdcolor-4">Block 4</div>
<div class="block mixin-bdcolor-5">Block 5</div>

Styleguide 8.6
*/
/*
background-color()

Mixin pour gérer les contrastes accentués des couleurs en background. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-bgcolor-1 { @include background-color($COLOR_PRIMARY); }
.mixin-bgcolor-2 { @include background-color($COLOR_OUIGO); }
.mixin-bgcolor-3 { @include background-color($color: #73f351, $color-high: #329c15); }
.mixin-bgcolor-4 { @include background-color($color: #51d7f3, $color-high: 20%); }
```

Markup:
<div class="block mixin-bgcolor-1">Block 1</div>
<div class="block mixin-bgcolor-2">Block 2</div>
<div class="block mixin-bgcolor-3">Block 3</div>
<div class="block mixin-bgcolor-4">Block 4</div>

Styleguide 8.7
*/
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
fill()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c, la couleur est tirée de la map $ALT_COLORS.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Par défaut, on récupère la valeur correspondante dans la table ALT COLORS
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-fill-1 {
  @include fill($COLOR_PRIMARY);
}
.mixin-fill-2 {
  @include fill(#51d7f3, #3858ee);
}
.mixin-fill-3 {
  @include fill($COLOR_PETITS_PRIX, 20%);
}
```

Markup:
<div class="mixin-fill-1">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-2">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-3">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>

Styleguide 8.8
*/
/*
background-linear-gradient()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11y-high-c, la couleur est tirée de la map $ALT_COLORS.

Paramètres :
- $gradient-start : obligatoire, on peut utiliser une oui-colors
- $gradient-end : obligatoire, on peut utiliser une oui-colors
- direction (optionnel, par défaut : "to right")
- $darken (optionnel) : un pourcentage. Si l'argument est utilisé, il remplace les couleurs de substitution
- !important (optionnel)

```css
.mixin-background-linear-gradient {
  @include background-linear-gradient($COLOR_PRIMARY, $COLOR_SECONDARY);
  ...
}
.mixin-background-linear-gradient-darken {
  @include background-linear-gradient(#cc7b27, #e2bd97, $direction: 'to bottom', $darken: 30%);
  ...
}
```

Markup:
<div class="block mixin-background-linear-gradient"></div>
<div class="block mixin-background-linear-gradient-darken"></div>

Styleguide 8.10
*/
/* a11y-line-spacing() */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
breakpoint()

Mixin pour les mediaqueries.

Paramètres :
- $grid : obligatoire, si vous avez importer grid/global, vous pouvez utiliser les valeurs suivantes :
- $small-up : tous les écrans
- $medium-up : > 40em
- $large-up : > 54em

```css
.mixin-breakpoint {
  @include breakpoint($small-up) { // totalement facultatif
    background-color: $COLOR_PRIMARY;
  }
  @include breakpoint($medium-up) {
    background-color: $COLOR_SKIN_LIGHT;
  }
  @include breakpoint($large-up) {
    background-color: $COLOR_SECONDARY;
  }
}
```

Markup:
<div class="mixin-breakpoint"></div>

Styleguide 8.11
*/
/*
radioColorCustom()

Mixin pour les couleurs appliquées sur les radio & checkbox.

Paramètres :
- $inputColor : Couleur de l'input
- $inputColorHighC : (optionel) Couleur de l'input en contrasts accentués



```css
.radio-color-mea {
  @include radioColorCustom($COLOR_MEA_POSITIF);
}

.radio-color-custom {
  @include radioColorCustom(#594fd2, #090352);
}
```

Markup:
<div class="block">
  <p>Using MEA positive color</p>
  <label for="test-mea-1" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-mea-2" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-mea-3" class="vsc__radio radio-color-mea vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-mea-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>
<div class="block">
  <p>Using custom colors</p>
  <label for="test-custom-1" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-custom-2" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-custom-3" class="vsc__radio radio-color-custom vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-custom-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>

Styleguide 8.12
*/
/*
buttonColorCustom()

Permet de surcharger de la couleur d'un CTA conformément à la charte.

Paramètres :
- $color : couleur, obligatoirement issue des [Oui Colors](section-9.html#kssref-9-2), ou une [Custom Color](section-9.html#kssref-9-4).
- $secondary : false par défaut ; pour générer un style de bouton secondaire (bordure de couleur, fond blanc)

```css

@import "../../mixins";
@import "../../colors/oui-colors";

@include export('button--info') {
  .\$code-app {
    &-button {
      &--info {
        @include buttonColorCustom($color:$COLOR_MEA_INFO);
      }
    }
  }
}
```

N.B. supprimez le \ dans le code ci-dessus , qui a été rajouté pour contourner un problème de compilation sass.

Exemples d'usage du mixin :
- [vsc-button--smallPrice](section-6.html#vsc-button--smallPrice)
- [vsc-button--smallPrice-secondary](section-6.html#vsc-button--smallPrice-secondary)
- [vsc-button--info](section-6.html#vsc-button--info)
- [vsc-button--info-secondary](section-6.html#vsc-button--info-secondary)

Styleguide 8.13
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
.vsa-button--small {
  font-size: 0.81em;
  padding: 0.48em 1em;
  line-height: 1.2em;
  min-width: 9.65em; }

/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
Mixins

Installation :
`@import "/css-tools/mixins";`

Styleguide 8.0
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
arrow-lazy()

```css
.tooltip {
  position: relative;
  display: inline-block;
  ...
  @include arrow-lazy($size:0.5em, $color: $COLOR_PRIMARY);
}
```

<b>Paramètres</b><br>
$direction: top, $size: 1em, $color: #ccc, $color-highlight:"", $center: 50%, $margin: -1px, $pseudo: before

Markup:
<div class="tooltip">Tooltip</div>

Styleguide 8.1
*/
/*
focus()

Applique le style focus

```css
.test-button {
  @include focus($color: $COLOR_PRIMARY, $offset: -0.5em);
}
```

<b>Paramètres par défaut</b><br>
$color: #FFF, $opacity: 0.8, $offset: 3px, $width: thin, $style: dotted, $important: ''

Markup:
<button class="test-button">Button</div>

Styleguide 8.2
*/
/*
pseudoFocus

Applique le style focus sur un pseudo élément quand l'effet focus sur l'outline pose problème

```css
.tricky-focus {
  position: relative;
  &:focus { outline:0;}
  @include pseudoFocus($color: $COLOR_PRIMARY, $right: -5em, $top: -0.3em, $left: -0.3em, $bottom: -0.3em);
}
```

<b>Paramètres</b><br>
$pseudo: after, $top: -0.5em, $right: -0.5em, $bottom: -0.5em, $left: -0.5em, $color: #FFF, $opacity: 0.8, $style-line: dotted, $width: 1px

Markup:
<button class="test-button ico-train tricky-focus"><span>train</span></button>
<span>focus un peu tricky</span>

Styleguide 8.3
*/
/*
em()

Convertisseur pixel vers em

```css
.font-24-pixel { font-size: em(24); }
.font-16-pixel { font-size: em(16); }
.font-12-pixel { font-size: em(12); }
```

Markup:
<p class="font-24-pixel">24 pixels</p>
<p class="font-16-pixel">16 pixels</p>
<p class="font-12-pixel">12 pixels</p>

Styleguide 8.4
*/
/*
color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-color-title { @include color($COLOR_PRIMARY); }
.mixin-color-subtitle { @include color($COLOR_PETITS_PRIX, '', !important); }
.mixin-color-subtitle-2 { @include color( $color: #db70e6, $color-high: #830790, $important: '!important'); }
.mixin-color-subtitle-3 { @include color($color: #f97230, $color-high: 30%); }
```

Markup:
<div class="mixin-color-title">Titre 1</div>
<div class="mixin-color-subtitle">Sous-titre 1</div>
<div class="mixin-color-subtitle-2">Sous-titre 2</div>
<div class="mixin-color-subtitle-3">Sous-titre 3</div>

Styleguide 8.5
*/
/*
border-color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.
 - $alpha (optionnel) : rajoute le mode rgba. Si aucune valeur n'est entrée, le couleur passe en mode rgb, donc pas de transparence

```css
.mixin-bdcolor-1 { border:3px solid; @include border-color($COLOR_PRIMARY); }

.mixin-bdcolor-2 { border:3px solid; @include border-color($COLOR_OUIGO); }

.mixin-bdcolor-3 { border:3px solid; @include border-color($color: #73f351, $color-high: #329c15); }

.mixin-bdcolor-4 { border:3px solid; @include border-color($color: #51d7f3, $color-high: 20%); }

.mixin-bdcolor-5 { border:3px solid; @include border-color($color: $COLOR_PRIMARY, $alpha: 0.3); }
```

Markup:
<div class="block mixin-bdcolor-1">Block 1</div>
<div class="block mixin-bdcolor-2">Block 2</div>
<div class="block mixin-bdcolor-3">Block 3</div>
<div class="block mixin-bdcolor-4">Block 4</div>
<div class="block mixin-bdcolor-5">Block 5</div>

Styleguide 8.6
*/
/*
background-color()

Mixin pour gérer les contrastes accentués des couleurs en background. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-bgcolor-1 { @include background-color($COLOR_PRIMARY); }
.mixin-bgcolor-2 { @include background-color($COLOR_OUIGO); }
.mixin-bgcolor-3 { @include background-color($color: #73f351, $color-high: #329c15); }
.mixin-bgcolor-4 { @include background-color($color: #51d7f3, $color-high: 20%); }
```

Markup:
<div class="block mixin-bgcolor-1">Block 1</div>
<div class="block mixin-bgcolor-2">Block 2</div>
<div class="block mixin-bgcolor-3">Block 3</div>
<div class="block mixin-bgcolor-4">Block 4</div>

Styleguide 8.7
*/
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
fill()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c, la couleur est tirée de la map $ALT_COLORS.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Par défaut, on récupère la valeur correspondante dans la table ALT COLORS
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-fill-1 {
  @include fill($COLOR_PRIMARY);
}
.mixin-fill-2 {
  @include fill(#51d7f3, #3858ee);
}
.mixin-fill-3 {
  @include fill($COLOR_PETITS_PRIX, 20%);
}
```

Markup:
<div class="mixin-fill-1">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-2">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-3">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>

Styleguide 8.8
*/
/*
background-linear-gradient()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11y-high-c, la couleur est tirée de la map $ALT_COLORS.

Paramètres :
- $gradient-start : obligatoire, on peut utiliser une oui-colors
- $gradient-end : obligatoire, on peut utiliser une oui-colors
- direction (optionnel, par défaut : "to right")
- $darken (optionnel) : un pourcentage. Si l'argument est utilisé, il remplace les couleurs de substitution
- !important (optionnel)

```css
.mixin-background-linear-gradient {
  @include background-linear-gradient($COLOR_PRIMARY, $COLOR_SECONDARY);
  ...
}
.mixin-background-linear-gradient-darken {
  @include background-linear-gradient(#cc7b27, #e2bd97, $direction: 'to bottom', $darken: 30%);
  ...
}
```

Markup:
<div class="block mixin-background-linear-gradient"></div>
<div class="block mixin-background-linear-gradient-darken"></div>

Styleguide 8.10
*/
/* a11y-line-spacing() */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
breakpoint()

Mixin pour les mediaqueries.

Paramètres :
- $grid : obligatoire, si vous avez importer grid/global, vous pouvez utiliser les valeurs suivantes :
- $small-up : tous les écrans
- $medium-up : > 40em
- $large-up : > 54em

```css
.mixin-breakpoint {
  @include breakpoint($small-up) { // totalement facultatif
    background-color: $COLOR_PRIMARY;
  }
  @include breakpoint($medium-up) {
    background-color: $COLOR_SKIN_LIGHT;
  }
  @include breakpoint($large-up) {
    background-color: $COLOR_SECONDARY;
  }
}
```

Markup:
<div class="mixin-breakpoint"></div>

Styleguide 8.11
*/
/*
radioColorCustom()

Mixin pour les couleurs appliquées sur les radio & checkbox.

Paramètres :
- $inputColor : Couleur de l'input
- $inputColorHighC : (optionel) Couleur de l'input en contrasts accentués



```css
.radio-color-mea {
  @include radioColorCustom($COLOR_MEA_POSITIF);
}

.radio-color-custom {
  @include radioColorCustom(#594fd2, #090352);
}
```

Markup:
<div class="block">
  <p>Using MEA positive color</p>
  <label for="test-mea-1" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-mea-2" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-mea-3" class="vsc__radio radio-color-mea vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-mea-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>
<div class="block">
  <p>Using custom colors</p>
  <label for="test-custom-1" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-custom-2" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-custom-3" class="vsc__radio radio-color-custom vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-custom-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>

Styleguide 8.12
*/
/*
buttonColorCustom()

Permet de surcharger de la couleur d'un CTA conformément à la charte.

Paramètres :
- $color : couleur, obligatoirement issue des [Oui Colors](section-9.html#kssref-9-2), ou une [Custom Color](section-9.html#kssref-9-4).
- $secondary : false par défaut ; pour générer un style de bouton secondaire (bordure de couleur, fond blanc)

```css

@import "../../mixins";
@import "../../colors/oui-colors";

@include export('button--info') {
  .\$code-app {
    &-button {
      &--info {
        @include buttonColorCustom($color:$COLOR_MEA_INFO);
      }
    }
  }
}
```

N.B. supprimez le \ dans le code ci-dessus , qui a été rajouté pour contourner un problème de compilation sass.

Exemples d'usage du mixin :
- [vsc-button--smallPrice](section-6.html#vsc-button--smallPrice)
- [vsc-button--smallPrice-secondary](section-6.html#vsc-button--smallPrice-secondary)
- [vsc-button--info](section-6.html#vsc-button--info)
- [vsc-button--info-secondary](section-6.html#vsc-button--info-secondary)

Styleguide 8.13
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
.vsa-button--white {
  background-color: #FFF ;
  color: #ea5330 ;
  border-color: #FFF; }
  .a11y-high-c .vsa-button--white {
    background-color: #FFF ; }
  .a11y-high-c .vsa-button--white {
    color: #d93914 ; }
  .vsa-button--white:hover {
    background-color: #f2f2f2 ;
    color: #b51742 ;
    border-color: #f2f2f2; }
    .a11y-high-c .vsa-button--white:hover {
      background-color: #f2f2f2 ; }
    .a11y-high-c .vsa-button--white:hover {
      color: #b51742 ; }
  .vsa-button--white:active, .vsa-button--white:focus:hover {
    color: #fff;
    background-color: #9e143a; }
  .vsa-button--white:focus {
    outline-color: rgba(234, 83, 48, 0.8) ;
    outline-style: dashed ;
    outline-width: thin ;
    outline-offset: -0.7em ;
    box-shadow: none ; }
  .a11y-high-c .vsa-button--white:focus {
    outline-color: #ea5330 ;
    outline-width: thin ;
    outline-offset: -0.7em ; }

/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
Mixins

Installation :
`@import "/css-tools/mixins";`

Styleguide 8.0
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
arrow-lazy()

```css
.tooltip {
  position: relative;
  display: inline-block;
  ...
  @include arrow-lazy($size:0.5em, $color: $COLOR_PRIMARY);
}
```

<b>Paramètres</b><br>
$direction: top, $size: 1em, $color: #ccc, $color-highlight:"", $center: 50%, $margin: -1px, $pseudo: before

Markup:
<div class="tooltip">Tooltip</div>

Styleguide 8.1
*/
/*
focus()

Applique le style focus

```css
.test-button {
  @include focus($color: $COLOR_PRIMARY, $offset: -0.5em);
}
```

<b>Paramètres par défaut</b><br>
$color: #FFF, $opacity: 0.8, $offset: 3px, $width: thin, $style: dotted, $important: ''

Markup:
<button class="test-button">Button</div>

Styleguide 8.2
*/
/*
pseudoFocus

Applique le style focus sur un pseudo élément quand l'effet focus sur l'outline pose problème

```css
.tricky-focus {
  position: relative;
  &:focus { outline:0;}
  @include pseudoFocus($color: $COLOR_PRIMARY, $right: -5em, $top: -0.3em, $left: -0.3em, $bottom: -0.3em);
}
```

<b>Paramètres</b><br>
$pseudo: after, $top: -0.5em, $right: -0.5em, $bottom: -0.5em, $left: -0.5em, $color: #FFF, $opacity: 0.8, $style-line: dotted, $width: 1px

Markup:
<button class="test-button ico-train tricky-focus"><span>train</span></button>
<span>focus un peu tricky</span>

Styleguide 8.3
*/
/*
em()

Convertisseur pixel vers em

```css
.font-24-pixel { font-size: em(24); }
.font-16-pixel { font-size: em(16); }
.font-12-pixel { font-size: em(12); }
```

Markup:
<p class="font-24-pixel">24 pixels</p>
<p class="font-16-pixel">16 pixels</p>
<p class="font-12-pixel">12 pixels</p>

Styleguide 8.4
*/
/*
color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-color-title { @include color($COLOR_PRIMARY); }
.mixin-color-subtitle { @include color($COLOR_PETITS_PRIX, '', !important); }
.mixin-color-subtitle-2 { @include color( $color: #db70e6, $color-high: #830790, $important: '!important'); }
.mixin-color-subtitle-3 { @include color($color: #f97230, $color-high: 30%); }
```

Markup:
<div class="mixin-color-title">Titre 1</div>
<div class="mixin-color-subtitle">Sous-titre 1</div>
<div class="mixin-color-subtitle-2">Sous-titre 2</div>
<div class="mixin-color-subtitle-3">Sous-titre 3</div>

Styleguide 8.5
*/
/*
border-color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.
 - $alpha (optionnel) : rajoute le mode rgba. Si aucune valeur n'est entrée, le couleur passe en mode rgb, donc pas de transparence

```css
.mixin-bdcolor-1 { border:3px solid; @include border-color($COLOR_PRIMARY); }

.mixin-bdcolor-2 { border:3px solid; @include border-color($COLOR_OUIGO); }

.mixin-bdcolor-3 { border:3px solid; @include border-color($color: #73f351, $color-high: #329c15); }

.mixin-bdcolor-4 { border:3px solid; @include border-color($color: #51d7f3, $color-high: 20%); }

.mixin-bdcolor-5 { border:3px solid; @include border-color($color: $COLOR_PRIMARY, $alpha: 0.3); }
```

Markup:
<div class="block mixin-bdcolor-1">Block 1</div>
<div class="block mixin-bdcolor-2">Block 2</div>
<div class="block mixin-bdcolor-3">Block 3</div>
<div class="block mixin-bdcolor-4">Block 4</div>
<div class="block mixin-bdcolor-5">Block 5</div>

Styleguide 8.6
*/
/*
background-color()

Mixin pour gérer les contrastes accentués des couleurs en background. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-bgcolor-1 { @include background-color($COLOR_PRIMARY); }
.mixin-bgcolor-2 { @include background-color($COLOR_OUIGO); }
.mixin-bgcolor-3 { @include background-color($color: #73f351, $color-high: #329c15); }
.mixin-bgcolor-4 { @include background-color($color: #51d7f3, $color-high: 20%); }
```

Markup:
<div class="block mixin-bgcolor-1">Block 1</div>
<div class="block mixin-bgcolor-2">Block 2</div>
<div class="block mixin-bgcolor-3">Block 3</div>
<div class="block mixin-bgcolor-4">Block 4</div>

Styleguide 8.7
*/
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
fill()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c, la couleur est tirée de la map $ALT_COLORS.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Par défaut, on récupère la valeur correspondante dans la table ALT COLORS
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-fill-1 {
  @include fill($COLOR_PRIMARY);
}
.mixin-fill-2 {
  @include fill(#51d7f3, #3858ee);
}
.mixin-fill-3 {
  @include fill($COLOR_PETITS_PRIX, 20%);
}
```

Markup:
<div class="mixin-fill-1">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-2">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-3">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>

Styleguide 8.8
*/
/*
background-linear-gradient()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11y-high-c, la couleur est tirée de la map $ALT_COLORS.

Paramètres :
- $gradient-start : obligatoire, on peut utiliser une oui-colors
- $gradient-end : obligatoire, on peut utiliser une oui-colors
- direction (optionnel, par défaut : "to right")
- $darken (optionnel) : un pourcentage. Si l'argument est utilisé, il remplace les couleurs de substitution
- !important (optionnel)

```css
.mixin-background-linear-gradient {
  @include background-linear-gradient($COLOR_PRIMARY, $COLOR_SECONDARY);
  ...
}
.mixin-background-linear-gradient-darken {
  @include background-linear-gradient(#cc7b27, #e2bd97, $direction: 'to bottom', $darken: 30%);
  ...
}
```

Markup:
<div class="block mixin-background-linear-gradient"></div>
<div class="block mixin-background-linear-gradient-darken"></div>

Styleguide 8.10
*/
/* a11y-line-spacing() */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
breakpoint()

Mixin pour les mediaqueries.

Paramètres :
- $grid : obligatoire, si vous avez importer grid/global, vous pouvez utiliser les valeurs suivantes :
- $small-up : tous les écrans
- $medium-up : > 40em
- $large-up : > 54em

```css
.mixin-breakpoint {
  @include breakpoint($small-up) { // totalement facultatif
    background-color: $COLOR_PRIMARY;
  }
  @include breakpoint($medium-up) {
    background-color: $COLOR_SKIN_LIGHT;
  }
  @include breakpoint($large-up) {
    background-color: $COLOR_SECONDARY;
  }
}
```

Markup:
<div class="mixin-breakpoint"></div>

Styleguide 8.11
*/
/*
radioColorCustom()

Mixin pour les couleurs appliquées sur les radio & checkbox.

Paramètres :
- $inputColor : Couleur de l'input
- $inputColorHighC : (optionel) Couleur de l'input en contrasts accentués



```css
.radio-color-mea {
  @include radioColorCustom($COLOR_MEA_POSITIF);
}

.radio-color-custom {
  @include radioColorCustom(#594fd2, #090352);
}
```

Markup:
<div class="block">
  <p>Using MEA positive color</p>
  <label for="test-mea-1" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-mea-2" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-mea-3" class="vsc__radio radio-color-mea vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-mea-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>
<div class="block">
  <p>Using custom colors</p>
  <label for="test-custom-1" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-custom-2" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-custom-3" class="vsc__radio radio-color-custom vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-custom-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>

Styleguide 8.12
*/
/*
buttonColorCustom()

Permet de surcharger de la couleur d'un CTA conformément à la charte.

Paramètres :
- $color : couleur, obligatoirement issue des [Oui Colors](section-9.html#kssref-9-2), ou une [Custom Color](section-9.html#kssref-9-4).
- $secondary : false par défaut ; pour générer un style de bouton secondaire (bordure de couleur, fond blanc)

```css

@import "../../mixins";
@import "../../colors/oui-colors";

@include export('button--info') {
  .\$code-app {
    &-button {
      &--info {
        @include buttonColorCustom($color:$COLOR_MEA_INFO);
      }
    }
  }
}
```

N.B. supprimez le \ dans le code ci-dessus , qui a été rajouté pour contourner un problème de compilation sass.

Exemples d'usage du mixin :
- [vsc-button--smallPrice](section-6.html#vsc-button--smallPrice)
- [vsc-button--smallPrice-secondary](section-6.html#vsc-button--smallPrice-secondary)
- [vsc-button--info](section-6.html#vsc-button--info)
- [vsc-button--info-secondary](section-6.html#vsc-button--info-secondary)

Styleguide 8.13
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
.vsa-button--secondary {
  background-color: #999082 ;
  border-color: #999082; }
  .a11y-high-c .vsa-button--secondary {
    background-color: #645c51 ; }
  .vsa-button--secondary:hover, .vsa-button--secondary:focus:hover {
    background-color: #645c51 ;
    border-color: #999082; }
    .a11y-high-c .vsa-button--secondary:hover, .a11y-high-c .vsa-button--secondary:focus:hover {
      background-color: #2c2823 ; }
  .vsa-button--secondary:focus {
    border-color: #807768; }

/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
Mixins

Installation :
`@import "/css-tools/mixins";`

Styleguide 8.0
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
arrow-lazy()

```css
.tooltip {
  position: relative;
  display: inline-block;
  ...
  @include arrow-lazy($size:0.5em, $color: $COLOR_PRIMARY);
}
```

<b>Paramètres</b><br>
$direction: top, $size: 1em, $color: #ccc, $color-highlight:"", $center: 50%, $margin: -1px, $pseudo: before

Markup:
<div class="tooltip">Tooltip</div>

Styleguide 8.1
*/
/*
focus()

Applique le style focus

```css
.test-button {
  @include focus($color: $COLOR_PRIMARY, $offset: -0.5em);
}
```

<b>Paramètres par défaut</b><br>
$color: #FFF, $opacity: 0.8, $offset: 3px, $width: thin, $style: dotted, $important: ''

Markup:
<button class="test-button">Button</div>

Styleguide 8.2
*/
/*
pseudoFocus

Applique le style focus sur un pseudo élément quand l'effet focus sur l'outline pose problème

```css
.tricky-focus {
  position: relative;
  &:focus { outline:0;}
  @include pseudoFocus($color: $COLOR_PRIMARY, $right: -5em, $top: -0.3em, $left: -0.3em, $bottom: -0.3em);
}
```

<b>Paramètres</b><br>
$pseudo: after, $top: -0.5em, $right: -0.5em, $bottom: -0.5em, $left: -0.5em, $color: #FFF, $opacity: 0.8, $style-line: dotted, $width: 1px

Markup:
<button class="test-button ico-train tricky-focus"><span>train</span></button>
<span>focus un peu tricky</span>

Styleguide 8.3
*/
/*
em()

Convertisseur pixel vers em

```css
.font-24-pixel { font-size: em(24); }
.font-16-pixel { font-size: em(16); }
.font-12-pixel { font-size: em(12); }
```

Markup:
<p class="font-24-pixel">24 pixels</p>
<p class="font-16-pixel">16 pixels</p>
<p class="font-12-pixel">12 pixels</p>

Styleguide 8.4
*/
/*
color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-color-title { @include color($COLOR_PRIMARY); }
.mixin-color-subtitle { @include color($COLOR_PETITS_PRIX, '', !important); }
.mixin-color-subtitle-2 { @include color( $color: #db70e6, $color-high: #830790, $important: '!important'); }
.mixin-color-subtitle-3 { @include color($color: #f97230, $color-high: 30%); }
```

Markup:
<div class="mixin-color-title">Titre 1</div>
<div class="mixin-color-subtitle">Sous-titre 1</div>
<div class="mixin-color-subtitle-2">Sous-titre 2</div>
<div class="mixin-color-subtitle-3">Sous-titre 3</div>

Styleguide 8.5
*/
/*
border-color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.
 - $alpha (optionnel) : rajoute le mode rgba. Si aucune valeur n'est entrée, le couleur passe en mode rgb, donc pas de transparence

```css
.mixin-bdcolor-1 { border:3px solid; @include border-color($COLOR_PRIMARY); }

.mixin-bdcolor-2 { border:3px solid; @include border-color($COLOR_OUIGO); }

.mixin-bdcolor-3 { border:3px solid; @include border-color($color: #73f351, $color-high: #329c15); }

.mixin-bdcolor-4 { border:3px solid; @include border-color($color: #51d7f3, $color-high: 20%); }

.mixin-bdcolor-5 { border:3px solid; @include border-color($color: $COLOR_PRIMARY, $alpha: 0.3); }
```

Markup:
<div class="block mixin-bdcolor-1">Block 1</div>
<div class="block mixin-bdcolor-2">Block 2</div>
<div class="block mixin-bdcolor-3">Block 3</div>
<div class="block mixin-bdcolor-4">Block 4</div>
<div class="block mixin-bdcolor-5">Block 5</div>

Styleguide 8.6
*/
/*
background-color()

Mixin pour gérer les contrastes accentués des couleurs en background. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-bgcolor-1 { @include background-color($COLOR_PRIMARY); }
.mixin-bgcolor-2 { @include background-color($COLOR_OUIGO); }
.mixin-bgcolor-3 { @include background-color($color: #73f351, $color-high: #329c15); }
.mixin-bgcolor-4 { @include background-color($color: #51d7f3, $color-high: 20%); }
```

Markup:
<div class="block mixin-bgcolor-1">Block 1</div>
<div class="block mixin-bgcolor-2">Block 2</div>
<div class="block mixin-bgcolor-3">Block 3</div>
<div class="block mixin-bgcolor-4">Block 4</div>

Styleguide 8.7
*/
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
fill()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c, la couleur est tirée de la map $ALT_COLORS.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Par défaut, on récupère la valeur correspondante dans la table ALT COLORS
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-fill-1 {
  @include fill($COLOR_PRIMARY);
}
.mixin-fill-2 {
  @include fill(#51d7f3, #3858ee);
}
.mixin-fill-3 {
  @include fill($COLOR_PETITS_PRIX, 20%);
}
```

Markup:
<div class="mixin-fill-1">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-2">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-3">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>

Styleguide 8.8
*/
/*
background-linear-gradient()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11y-high-c, la couleur est tirée de la map $ALT_COLORS.

Paramètres :
- $gradient-start : obligatoire, on peut utiliser une oui-colors
- $gradient-end : obligatoire, on peut utiliser une oui-colors
- direction (optionnel, par défaut : "to right")
- $darken (optionnel) : un pourcentage. Si l'argument est utilisé, il remplace les couleurs de substitution
- !important (optionnel)

```css
.mixin-background-linear-gradient {
  @include background-linear-gradient($COLOR_PRIMARY, $COLOR_SECONDARY);
  ...
}
.mixin-background-linear-gradient-darken {
  @include background-linear-gradient(#cc7b27, #e2bd97, $direction: 'to bottom', $darken: 30%);
  ...
}
```

Markup:
<div class="block mixin-background-linear-gradient"></div>
<div class="block mixin-background-linear-gradient-darken"></div>

Styleguide 8.10
*/
/* a11y-line-spacing() */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
breakpoint()

Mixin pour les mediaqueries.

Paramètres :
- $grid : obligatoire, si vous avez importer grid/global, vous pouvez utiliser les valeurs suivantes :
- $small-up : tous les écrans
- $medium-up : > 40em
- $large-up : > 54em

```css
.mixin-breakpoint {
  @include breakpoint($small-up) { // totalement facultatif
    background-color: $COLOR_PRIMARY;
  }
  @include breakpoint($medium-up) {
    background-color: $COLOR_SKIN_LIGHT;
  }
  @include breakpoint($large-up) {
    background-color: $COLOR_SECONDARY;
  }
}
```

Markup:
<div class="mixin-breakpoint"></div>

Styleguide 8.11
*/
/*
radioColorCustom()

Mixin pour les couleurs appliquées sur les radio & checkbox.

Paramètres :
- $inputColor : Couleur de l'input
- $inputColorHighC : (optionel) Couleur de l'input en contrasts accentués



```css
.radio-color-mea {
  @include radioColorCustom($COLOR_MEA_POSITIF);
}

.radio-color-custom {
  @include radioColorCustom(#594fd2, #090352);
}
```

Markup:
<div class="block">
  <p>Using MEA positive color</p>
  <label for="test-mea-1" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-mea-2" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-mea-3" class="vsc__radio radio-color-mea vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-mea-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>
<div class="block">
  <p>Using custom colors</p>
  <label for="test-custom-1" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-custom-2" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-custom-3" class="vsc__radio radio-color-custom vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-custom-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>

Styleguide 8.12
*/
/*
buttonColorCustom()

Permet de surcharger de la couleur d'un CTA conformément à la charte.

Paramètres :
- $color : couleur, obligatoirement issue des [Oui Colors](section-9.html#kssref-9-2), ou une [Custom Color](section-9.html#kssref-9-4).
- $secondary : false par défaut ; pour générer un style de bouton secondaire (bordure de couleur, fond blanc)

```css

@import "../../mixins";
@import "../../colors/oui-colors";

@include export('button--info') {
  .\$code-app {
    &-button {
      &--info {
        @include buttonColorCustom($color:$COLOR_MEA_INFO);
      }
    }
  }
}
```

N.B. supprimez le \ dans le code ci-dessus , qui a été rajouté pour contourner un problème de compilation sass.

Exemples d'usage du mixin :
- [vsc-button--smallPrice](section-6.html#vsc-button--smallPrice)
- [vsc-button--smallPrice-secondary](section-6.html#vsc-button--smallPrice-secondary)
- [vsc-button--info](section-6.html#vsc-button--info)
- [vsc-button--info-secondary](section-6.html#vsc-button--info-secondary)

Styleguide 8.13
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
.vsa-button--ghost, .vsa-button--ghost-secondary, .vsa-button--ghost-white {
  background-color: rgba(255, 255, 255, 0) ;
  color: #ea5330 ;
  border-color: #ea5330; }
  .a11y-high-c .vsa-button--ghost, .a11y-high-c .vsa-button--ghost-secondary, .a11y-high-c .vsa-button--ghost-white {
    background-color: rgba(255, 255, 255, 0) ; }
  .a11y-high-c .vsa-button--ghost, .a11y-high-c .vsa-button--ghost-secondary, .a11y-high-c .vsa-button--ghost-white {
    color: #d93914 ; }
  .vsa-button--ghost:hover, .vsa-button--ghost-secondary:hover, .vsa-button--ghost-white:hover, .vsa-button--ghost:active, .vsa-button--ghost-secondary:active, .vsa-button--ghost-white:active {
    color: #ea5330 ;
    background-color: rgba(0, 0, 0, 0.035) ;
    border-color: #ea5330; }
    .a11y-high-c .vsa-button--ghost:hover, .a11y-high-c .vsa-button--ghost-secondary:hover, .a11y-high-c .vsa-button--ghost-white:hover, .a11y-high-c .vsa-button--ghost:active, .a11y-high-c .vsa-button--ghost-secondary:active, .a11y-high-c .vsa-button--ghost-white:active {
      color: #d93914 ; }
    .a11y-high-c .vsa-button--ghost:hover, .a11y-high-c .vsa-button--ghost-secondary:hover, .a11y-high-c .vsa-button--ghost-white:hover, .a11y-high-c .vsa-button--ghost:active, .a11y-high-c .vsa-button--ghost-secondary:active, .a11y-high-c .vsa-button--ghost-white:active {
      background-color: rgba(0, 0, 0, 0.035) ; }
  .vsa-button--ghost:focus:hover, .vsa-button--ghost-secondary:focus:hover, .vsa-button--ghost-white:focus:hover, .vsa-button--ghost:active, .vsa-button--ghost-secondary:active, .vsa-button--ghost-white:active {
    background-color: rgba(0, 0, 0, 0.05) ;
    color: #ea5330 ;
    outline-color: #ea5330; }
    .a11y-high-c .vsa-button--ghost:focus:hover, .a11y-high-c .vsa-button--ghost-secondary:focus:hover, .a11y-high-c .vsa-button--ghost-white:focus:hover, .a11y-high-c .vsa-button--ghost:active, .a11y-high-c .vsa-button--ghost-secondary:active, .a11y-high-c .vsa-button--ghost-white:active {
      background-color: rgba(0, 0, 0, 0.05) ; }
    .a11y-high-c .vsa-button--ghost:focus:hover, .a11y-high-c .vsa-button--ghost-secondary:focus:hover, .a11y-high-c .vsa-button--ghost-white:focus:hover, .a11y-high-c .vsa-button--ghost:active, .a11y-high-c .vsa-button--ghost-secondary:active, .a11y-high-c .vsa-button--ghost-white:active {
      color: #d93914 ; }
    .a11y-high-c .vsa-button--ghost:focus:hover, .a11y-high-c .vsa-button--ghost-secondary:focus:hover, .a11y-high-c .vsa-button--ghost-white:focus:hover, .a11y-high-c .vsa-button--ghost:active, .a11y-high-c .vsa-button--ghost-secondary:active, .a11y-high-c .vsa-button--ghost-white:active {
      outline-color: #ea5330; }
  .vsa-button--ghost:focus, .vsa-button--ghost-secondary:focus, .vsa-button--ghost-white:focus {
    outline-color: rgba(234, 83, 48, 0.8) ;
    outline-style: dashed ;
    outline-width: thin ;
    outline-offset: -0.7em ;
    box-shadow: none ; }
  .a11y-high-c .vsa-button--ghost:focus, .a11y-high-c .vsa-button--ghost-secondary:focus, .a11y-high-c .vsa-button--ghost-white:focus {
    outline-color: #ea5330 ;
    outline-width: thin ;
    outline-offset: -0.7em ; }
  .vsa-button--ghost-secondary {
    border: 1px solid #000;
    color: #000 ; }
    .a11y-high-c .vsa-button--ghost-secondary {
      color: #000 ; }
    .vsa-button--ghost-secondary:hover {
      background-color: rgba(0, 0, 0, 0.1) ;
      border-color: #000;
      color: #000 ; }
      .a11y-high-c .vsa-button--ghost-secondary:hover {
        background-color: rgba(0, 0, 0, 0.1) ; }
      .a11y-high-c .vsa-button--ghost-secondary:hover {
        color: #000 ; }
    .vsa-button--ghost-secondary:focus, .vsa-button--ghost-secondary:active, .vsa-button--ghost-secondary:focus:hover {
      border-color: #000;
      color: #000 ;
      outline-color: #000; }
      .a11y-high-c .vsa-button--ghost-secondary:focus, .a11y-high-c .vsa-button--ghost-secondary:active, .a11y-high-c .vsa-button--ghost-secondary:focus:hover {
        color: #000 ; }
      .a11y-high-c .vsa-button--ghost-secondary:focus, .a11y-high-c .vsa-button--ghost-secondary:active, .a11y-high-c .vsa-button--ghost-secondary:focus:hover {
        outline-color: #000; }
  .vsa-button--ghost-white {
    border: 1px solid rgba(255, 255, 255, 0.8);
    color: #fff ; }
    .a11y-high-c .vsa-button--ghost-white {
      color: #fff ; }
    .vsa-button--ghost-white:hover {
      background-color: rgba(0, 0, 0, 0.1) ;
      color: #fff ;
      border-color: #fff; }
      .a11y-high-c .vsa-button--ghost-white:hover {
        background-color: rgba(0, 0, 0, 0.1) ; }
      .a11y-high-c .vsa-button--ghost-white:hover {
        color: #fff ; }
    .vsa-button--ghost-white:focus, .vsa-button--ghost-white:active, .vsa-button--ghost-white:focus:hover {
      border-color: #fff;
      color: #fff ;
      outline-color: #fff; }
      .a11y-high-c .vsa-button--ghost-white:focus, .a11y-high-c .vsa-button--ghost-white:active, .a11y-high-c .vsa-button--ghost-white:focus:hover {
        color: #fff ; }
      .a11y-high-c .vsa-button--ghost-white:focus, .a11y-high-c .vsa-button--ghost-white:active, .a11y-high-c .vsa-button--ghost-white:focus:hover {
        outline-color: #fff; }
  .vsa-button--ghost[disabled], .vsa-button--ghost-secondary[disabled], .vsa-button--ghost-white[disabled] {
    color: #999082 ;
    border-color: #ecedeb;
    background-color: transparent;
    cursor: default; }
    .a11y-high-c .vsa-button--ghost[disabled], .a11y-high-c .vsa-button--ghost-secondary[disabled], .a11y-high-c .vsa-button--ghost-white[disabled] {
      color: #6b6b6b ; }
    .vsa-button--ghost[disabled]:hover, .vsa-button--ghost-secondary[disabled]:hover, .vsa-button--ghost-white[disabled]:hover {
      background-color: transparent;
      border-color: #ecedeb; }

/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
Mixins

Installation :
`@import "/css-tools/mixins";`

Styleguide 8.0
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
arrow-lazy()

```css
.tooltip {
  position: relative;
  display: inline-block;
  ...
  @include arrow-lazy($size:0.5em, $color: $COLOR_PRIMARY);
}
```

<b>Paramètres</b><br>
$direction: top, $size: 1em, $color: #ccc, $color-highlight:"", $center: 50%, $margin: -1px, $pseudo: before

Markup:
<div class="tooltip">Tooltip</div>

Styleguide 8.1
*/
/*
focus()

Applique le style focus

```css
.test-button {
  @include focus($color: $COLOR_PRIMARY, $offset: -0.5em);
}
```

<b>Paramètres par défaut</b><br>
$color: #FFF, $opacity: 0.8, $offset: 3px, $width: thin, $style: dotted, $important: ''

Markup:
<button class="test-button">Button</div>

Styleguide 8.2
*/
/*
pseudoFocus

Applique le style focus sur un pseudo élément quand l'effet focus sur l'outline pose problème

```css
.tricky-focus {
  position: relative;
  &:focus { outline:0;}
  @include pseudoFocus($color: $COLOR_PRIMARY, $right: -5em, $top: -0.3em, $left: -0.3em, $bottom: -0.3em);
}
```

<b>Paramètres</b><br>
$pseudo: after, $top: -0.5em, $right: -0.5em, $bottom: -0.5em, $left: -0.5em, $color: #FFF, $opacity: 0.8, $style-line: dotted, $width: 1px

Markup:
<button class="test-button ico-train tricky-focus"><span>train</span></button>
<span>focus un peu tricky</span>

Styleguide 8.3
*/
/*
em()

Convertisseur pixel vers em

```css
.font-24-pixel { font-size: em(24); }
.font-16-pixel { font-size: em(16); }
.font-12-pixel { font-size: em(12); }
```

Markup:
<p class="font-24-pixel">24 pixels</p>
<p class="font-16-pixel">16 pixels</p>
<p class="font-12-pixel">12 pixels</p>

Styleguide 8.4
*/
/*
color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-color-title { @include color($COLOR_PRIMARY); }
.mixin-color-subtitle { @include color($COLOR_PETITS_PRIX, '', !important); }
.mixin-color-subtitle-2 { @include color( $color: #db70e6, $color-high: #830790, $important: '!important'); }
.mixin-color-subtitle-3 { @include color($color: #f97230, $color-high: 30%); }
```

Markup:
<div class="mixin-color-title">Titre 1</div>
<div class="mixin-color-subtitle">Sous-titre 1</div>
<div class="mixin-color-subtitle-2">Sous-titre 2</div>
<div class="mixin-color-subtitle-3">Sous-titre 3</div>

Styleguide 8.5
*/
/*
border-color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.
 - $alpha (optionnel) : rajoute le mode rgba. Si aucune valeur n'est entrée, le couleur passe en mode rgb, donc pas de transparence

```css
.mixin-bdcolor-1 { border:3px solid; @include border-color($COLOR_PRIMARY); }

.mixin-bdcolor-2 { border:3px solid; @include border-color($COLOR_OUIGO); }

.mixin-bdcolor-3 { border:3px solid; @include border-color($color: #73f351, $color-high: #329c15); }

.mixin-bdcolor-4 { border:3px solid; @include border-color($color: #51d7f3, $color-high: 20%); }

.mixin-bdcolor-5 { border:3px solid; @include border-color($color: $COLOR_PRIMARY, $alpha: 0.3); }
```

Markup:
<div class="block mixin-bdcolor-1">Block 1</div>
<div class="block mixin-bdcolor-2">Block 2</div>
<div class="block mixin-bdcolor-3">Block 3</div>
<div class="block mixin-bdcolor-4">Block 4</div>
<div class="block mixin-bdcolor-5">Block 5</div>

Styleguide 8.6
*/
/*
background-color()

Mixin pour gérer les contrastes accentués des couleurs en background. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-bgcolor-1 { @include background-color($COLOR_PRIMARY); }
.mixin-bgcolor-2 { @include background-color($COLOR_OUIGO); }
.mixin-bgcolor-3 { @include background-color($color: #73f351, $color-high: #329c15); }
.mixin-bgcolor-4 { @include background-color($color: #51d7f3, $color-high: 20%); }
```

Markup:
<div class="block mixin-bgcolor-1">Block 1</div>
<div class="block mixin-bgcolor-2">Block 2</div>
<div class="block mixin-bgcolor-3">Block 3</div>
<div class="block mixin-bgcolor-4">Block 4</div>

Styleguide 8.7
*/
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
fill()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c, la couleur est tirée de la map $ALT_COLORS.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Par défaut, on récupère la valeur correspondante dans la table ALT COLORS
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-fill-1 {
  @include fill($COLOR_PRIMARY);
}
.mixin-fill-2 {
  @include fill(#51d7f3, #3858ee);
}
.mixin-fill-3 {
  @include fill($COLOR_PETITS_PRIX, 20%);
}
```

Markup:
<div class="mixin-fill-1">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-2">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-3">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>

Styleguide 8.8
*/
/*
background-linear-gradient()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11y-high-c, la couleur est tirée de la map $ALT_COLORS.

Paramètres :
- $gradient-start : obligatoire, on peut utiliser une oui-colors
- $gradient-end : obligatoire, on peut utiliser une oui-colors
- direction (optionnel, par défaut : "to right")
- $darken (optionnel) : un pourcentage. Si l'argument est utilisé, il remplace les couleurs de substitution
- !important (optionnel)

```css
.mixin-background-linear-gradient {
  @include background-linear-gradient($COLOR_PRIMARY, $COLOR_SECONDARY);
  ...
}
.mixin-background-linear-gradient-darken {
  @include background-linear-gradient(#cc7b27, #e2bd97, $direction: 'to bottom', $darken: 30%);
  ...
}
```

Markup:
<div class="block mixin-background-linear-gradient"></div>
<div class="block mixin-background-linear-gradient-darken"></div>

Styleguide 8.10
*/
/* a11y-line-spacing() */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
breakpoint()

Mixin pour les mediaqueries.

Paramètres :
- $grid : obligatoire, si vous avez importer grid/global, vous pouvez utiliser les valeurs suivantes :
- $small-up : tous les écrans
- $medium-up : > 40em
- $large-up : > 54em

```css
.mixin-breakpoint {
  @include breakpoint($small-up) { // totalement facultatif
    background-color: $COLOR_PRIMARY;
  }
  @include breakpoint($medium-up) {
    background-color: $COLOR_SKIN_LIGHT;
  }
  @include breakpoint($large-up) {
    background-color: $COLOR_SECONDARY;
  }
}
```

Markup:
<div class="mixin-breakpoint"></div>

Styleguide 8.11
*/
/*
radioColorCustom()

Mixin pour les couleurs appliquées sur les radio & checkbox.

Paramètres :
- $inputColor : Couleur de l'input
- $inputColorHighC : (optionel) Couleur de l'input en contrasts accentués



```css
.radio-color-mea {
  @include radioColorCustom($COLOR_MEA_POSITIF);
}

.radio-color-custom {
  @include radioColorCustom(#594fd2, #090352);
}
```

Markup:
<div class="block">
  <p>Using MEA positive color</p>
  <label for="test-mea-1" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-mea-2" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-mea-3" class="vsc__radio radio-color-mea vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-mea-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>
<div class="block">
  <p>Using custom colors</p>
  <label for="test-custom-1" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-custom-2" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-custom-3" class="vsc__radio radio-color-custom vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-custom-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>

Styleguide 8.12
*/
/*
buttonColorCustom()

Permet de surcharger de la couleur d'un CTA conformément à la charte.

Paramètres :
- $color : couleur, obligatoirement issue des [Oui Colors](section-9.html#kssref-9-2), ou une [Custom Color](section-9.html#kssref-9-4).
- $secondary : false par défaut ; pour générer un style de bouton secondaire (bordure de couleur, fond blanc)

```css

@import "../../mixins";
@import "../../colors/oui-colors";

@include export('button--info') {
  .\$code-app {
    &-button {
      &--info {
        @include buttonColorCustom($color:$COLOR_MEA_INFO);
      }
    }
  }
}
```

N.B. supprimez le \ dans le code ci-dessus , qui a été rajouté pour contourner un problème de compilation sass.

Exemples d'usage du mixin :
- [vsc-button--smallPrice](section-6.html#vsc-button--smallPrice)
- [vsc-button--smallPrice-secondary](section-6.html#vsc-button--smallPrice-secondary)
- [vsc-button--info](section-6.html#vsc-button--info)
- [vsc-button--info-secondary](section-6.html#vsc-button--info-secondary)

Styleguide 8.13
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
.vsa-button--uppercase {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  text-transform: uppercase;
  padding: 0.786em 1.01em;
  line-height: 1.143em; }
  .vsa-button--uppercase.vsa-button--large {
    padding: 0.938em 1.25em;
    line-height: 1.125em; }
  .vsa-button--uppercase.vsa-button--small {
    padding: 0.5em 0.7em;
    line-height: 1.2em; }

/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
Mixins

Installation :
`@import "/css-tools/mixins";`

Styleguide 8.0
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
arrow-lazy()

```css
.tooltip {
  position: relative;
  display: inline-block;
  ...
  @include arrow-lazy($size:0.5em, $color: $COLOR_PRIMARY);
}
```

<b>Paramètres</b><br>
$direction: top, $size: 1em, $color: #ccc, $color-highlight:"", $center: 50%, $margin: -1px, $pseudo: before

Markup:
<div class="tooltip">Tooltip</div>

Styleguide 8.1
*/
/*
focus()

Applique le style focus

```css
.test-button {
  @include focus($color: $COLOR_PRIMARY, $offset: -0.5em);
}
```

<b>Paramètres par défaut</b><br>
$color: #FFF, $opacity: 0.8, $offset: 3px, $width: thin, $style: dotted, $important: ''

Markup:
<button class="test-button">Button</div>

Styleguide 8.2
*/
/*
pseudoFocus

Applique le style focus sur un pseudo élément quand l'effet focus sur l'outline pose problème

```css
.tricky-focus {
  position: relative;
  &:focus { outline:0;}
  @include pseudoFocus($color: $COLOR_PRIMARY, $right: -5em, $top: -0.3em, $left: -0.3em, $bottom: -0.3em);
}
```

<b>Paramètres</b><br>
$pseudo: after, $top: -0.5em, $right: -0.5em, $bottom: -0.5em, $left: -0.5em, $color: #FFF, $opacity: 0.8, $style-line: dotted, $width: 1px

Markup:
<button class="test-button ico-train tricky-focus"><span>train</span></button>
<span>focus un peu tricky</span>

Styleguide 8.3
*/
/*
em()

Convertisseur pixel vers em

```css
.font-24-pixel { font-size: em(24); }
.font-16-pixel { font-size: em(16); }
.font-12-pixel { font-size: em(12); }
```

Markup:
<p class="font-24-pixel">24 pixels</p>
<p class="font-16-pixel">16 pixels</p>
<p class="font-12-pixel">12 pixels</p>

Styleguide 8.4
*/
/*
color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-color-title { @include color($COLOR_PRIMARY); }
.mixin-color-subtitle { @include color($COLOR_PETITS_PRIX, '', !important); }
.mixin-color-subtitle-2 { @include color( $color: #db70e6, $color-high: #830790, $important: '!important'); }
.mixin-color-subtitle-3 { @include color($color: #f97230, $color-high: 30%); }
```

Markup:
<div class="mixin-color-title">Titre 1</div>
<div class="mixin-color-subtitle">Sous-titre 1</div>
<div class="mixin-color-subtitle-2">Sous-titre 2</div>
<div class="mixin-color-subtitle-3">Sous-titre 3</div>

Styleguide 8.5
*/
/*
border-color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.
 - $alpha (optionnel) : rajoute le mode rgba. Si aucune valeur n'est entrée, le couleur passe en mode rgb, donc pas de transparence

```css
.mixin-bdcolor-1 { border:3px solid; @include border-color($COLOR_PRIMARY); }

.mixin-bdcolor-2 { border:3px solid; @include border-color($COLOR_OUIGO); }

.mixin-bdcolor-3 { border:3px solid; @include border-color($color: #73f351, $color-high: #329c15); }

.mixin-bdcolor-4 { border:3px solid; @include border-color($color: #51d7f3, $color-high: 20%); }

.mixin-bdcolor-5 { border:3px solid; @include border-color($color: $COLOR_PRIMARY, $alpha: 0.3); }
```

Markup:
<div class="block mixin-bdcolor-1">Block 1</div>
<div class="block mixin-bdcolor-2">Block 2</div>
<div class="block mixin-bdcolor-3">Block 3</div>
<div class="block mixin-bdcolor-4">Block 4</div>
<div class="block mixin-bdcolor-5">Block 5</div>

Styleguide 8.6
*/
/*
background-color()

Mixin pour gérer les contrastes accentués des couleurs en background. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-bgcolor-1 { @include background-color($COLOR_PRIMARY); }
.mixin-bgcolor-2 { @include background-color($COLOR_OUIGO); }
.mixin-bgcolor-3 { @include background-color($color: #73f351, $color-high: #329c15); }
.mixin-bgcolor-4 { @include background-color($color: #51d7f3, $color-high: 20%); }
```

Markup:
<div class="block mixin-bgcolor-1">Block 1</div>
<div class="block mixin-bgcolor-2">Block 2</div>
<div class="block mixin-bgcolor-3">Block 3</div>
<div class="block mixin-bgcolor-4">Block 4</div>

Styleguide 8.7
*/
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
fill()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c, la couleur est tirée de la map $ALT_COLORS.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Par défaut, on récupère la valeur correspondante dans la table ALT COLORS
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-fill-1 {
  @include fill($COLOR_PRIMARY);
}
.mixin-fill-2 {
  @include fill(#51d7f3, #3858ee);
}
.mixin-fill-3 {
  @include fill($COLOR_PETITS_PRIX, 20%);
}
```

Markup:
<div class="mixin-fill-1">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-2">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-3">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>

Styleguide 8.8
*/
/*
background-linear-gradient()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11y-high-c, la couleur est tirée de la map $ALT_COLORS.

Paramètres :
- $gradient-start : obligatoire, on peut utiliser une oui-colors
- $gradient-end : obligatoire, on peut utiliser une oui-colors
- direction (optionnel, par défaut : "to right")
- $darken (optionnel) : un pourcentage. Si l'argument est utilisé, il remplace les couleurs de substitution
- !important (optionnel)

```css
.mixin-background-linear-gradient {
  @include background-linear-gradient($COLOR_PRIMARY, $COLOR_SECONDARY);
  ...
}
.mixin-background-linear-gradient-darken {
  @include background-linear-gradient(#cc7b27, #e2bd97, $direction: 'to bottom', $darken: 30%);
  ...
}
```

Markup:
<div class="block mixin-background-linear-gradient"></div>
<div class="block mixin-background-linear-gradient-darken"></div>

Styleguide 8.10
*/
/* a11y-line-spacing() */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
breakpoint()

Mixin pour les mediaqueries.

Paramètres :
- $grid : obligatoire, si vous avez importer grid/global, vous pouvez utiliser les valeurs suivantes :
- $small-up : tous les écrans
- $medium-up : > 40em
- $large-up : > 54em

```css
.mixin-breakpoint {
  @include breakpoint($small-up) { // totalement facultatif
    background-color: $COLOR_PRIMARY;
  }
  @include breakpoint($medium-up) {
    background-color: $COLOR_SKIN_LIGHT;
  }
  @include breakpoint($large-up) {
    background-color: $COLOR_SECONDARY;
  }
}
```

Markup:
<div class="mixin-breakpoint"></div>

Styleguide 8.11
*/
/*
radioColorCustom()

Mixin pour les couleurs appliquées sur les radio & checkbox.

Paramètres :
- $inputColor : Couleur de l'input
- $inputColorHighC : (optionel) Couleur de l'input en contrasts accentués



```css
.radio-color-mea {
  @include radioColorCustom($COLOR_MEA_POSITIF);
}

.radio-color-custom {
  @include radioColorCustom(#594fd2, #090352);
}
```

Markup:
<div class="block">
  <p>Using MEA positive color</p>
  <label for="test-mea-1" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-mea-2" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-mea-3" class="vsc__radio radio-color-mea vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-mea-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>
<div class="block">
  <p>Using custom colors</p>
  <label for="test-custom-1" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-custom-2" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-custom-3" class="vsc__radio radio-color-custom vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-custom-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>

Styleguide 8.12
*/
/*
buttonColorCustom()

Permet de surcharger de la couleur d'un CTA conformément à la charte.

Paramètres :
- $color : couleur, obligatoirement issue des [Oui Colors](section-9.html#kssref-9-2), ou une [Custom Color](section-9.html#kssref-9-4).
- $secondary : false par défaut ; pour générer un style de bouton secondaire (bordure de couleur, fond blanc)

```css

@import "../../mixins";
@import "../../colors/oui-colors";

@include export('button--info') {
  .\$code-app {
    &-button {
      &--info {
        @include buttonColorCustom($color:$COLOR_MEA_INFO);
      }
    }
  }
}
```

N.B. supprimez le \ dans le code ci-dessus , qui a été rajouté pour contourner un problème de compilation sass.

Exemples d'usage du mixin :
- [vsc-button--smallPrice](section-6.html#vsc-button--smallPrice)
- [vsc-button--smallPrice-secondary](section-6.html#vsc-button--smallPrice-secondary)
- [vsc-button--info](section-6.html#vsc-button--info)
- [vsc-button--info-secondary](section-6.html#vsc-button--info-secondary)

Styleguide 8.13
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
.vsa-button--icon {
  padding-right: 1em;
  padding-left: 2.8em;
  position: relative; }

.vsa-button__icon {
  font-size: 1.65em;
  position: absolute;
  top: 50%;
  left: 0.4em;
  margin-top: -0.53em; }
  .a11y-dys-line-spacing .vsa-button__icon {
    line-height: initial !important; }
  .vsa-button__icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor; }

.vsa-button--default .vsa-button__icon {
  top: 0.35em; }

/*
Mixins

Installation :
`@import "/css-tools/mixins";`

Styleguide 8.0
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
arrow-lazy()

```css
.tooltip {
  position: relative;
  display: inline-block;
  ...
  @include arrow-lazy($size:0.5em, $color: $COLOR_PRIMARY);
}
```

<b>Paramètres</b><br>
$direction: top, $size: 1em, $color: #ccc, $color-highlight:"", $center: 50%, $margin: -1px, $pseudo: before

Markup:
<div class="tooltip">Tooltip</div>

Styleguide 8.1
*/
/*
focus()

Applique le style focus

```css
.test-button {
  @include focus($color: $COLOR_PRIMARY, $offset: -0.5em);
}
```

<b>Paramètres par défaut</b><br>
$color: #FFF, $opacity: 0.8, $offset: 3px, $width: thin, $style: dotted, $important: ''

Markup:
<button class="test-button">Button</div>

Styleguide 8.2
*/
/*
pseudoFocus

Applique le style focus sur un pseudo élément quand l'effet focus sur l'outline pose problème

```css
.tricky-focus {
  position: relative;
  &:focus { outline:0;}
  @include pseudoFocus($color: $COLOR_PRIMARY, $right: -5em, $top: -0.3em, $left: -0.3em, $bottom: -0.3em);
}
```

<b>Paramètres</b><br>
$pseudo: after, $top: -0.5em, $right: -0.5em, $bottom: -0.5em, $left: -0.5em, $color: #FFF, $opacity: 0.8, $style-line: dotted, $width: 1px

Markup:
<button class="test-button ico-train tricky-focus"><span>train</span></button>
<span>focus un peu tricky</span>

Styleguide 8.3
*/
/*
em()

Convertisseur pixel vers em

```css
.font-24-pixel { font-size: em(24); }
.font-16-pixel { font-size: em(16); }
.font-12-pixel { font-size: em(12); }
```

Markup:
<p class="font-24-pixel">24 pixels</p>
<p class="font-16-pixel">16 pixels</p>
<p class="font-12-pixel">12 pixels</p>

Styleguide 8.4
*/
/*
color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-color-title { @include color($COLOR_PRIMARY); }
.mixin-color-subtitle { @include color($COLOR_PETITS_PRIX, '', !important); }
.mixin-color-subtitle-2 { @include color( $color: #db70e6, $color-high: #830790, $important: '!important'); }
.mixin-color-subtitle-3 { @include color($color: #f97230, $color-high: 30%); }
```

Markup:
<div class="mixin-color-title">Titre 1</div>
<div class="mixin-color-subtitle">Sous-titre 1</div>
<div class="mixin-color-subtitle-2">Sous-titre 2</div>
<div class="mixin-color-subtitle-3">Sous-titre 3</div>

Styleguide 8.5
*/
/*
border-color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.
 - $alpha (optionnel) : rajoute le mode rgba. Si aucune valeur n'est entrée, le couleur passe en mode rgb, donc pas de transparence

```css
.mixin-bdcolor-1 { border:3px solid; @include border-color($COLOR_PRIMARY); }

.mixin-bdcolor-2 { border:3px solid; @include border-color($COLOR_OUIGO); }

.mixin-bdcolor-3 { border:3px solid; @include border-color($color: #73f351, $color-high: #329c15); }

.mixin-bdcolor-4 { border:3px solid; @include border-color($color: #51d7f3, $color-high: 20%); }

.mixin-bdcolor-5 { border:3px solid; @include border-color($color: $COLOR_PRIMARY, $alpha: 0.3); }
```

Markup:
<div class="block mixin-bdcolor-1">Block 1</div>
<div class="block mixin-bdcolor-2">Block 2</div>
<div class="block mixin-bdcolor-3">Block 3</div>
<div class="block mixin-bdcolor-4">Block 4</div>
<div class="block mixin-bdcolor-5">Block 5</div>

Styleguide 8.6
*/
/*
background-color()

Mixin pour gérer les contrastes accentués des couleurs en background. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-bgcolor-1 { @include background-color($COLOR_PRIMARY); }
.mixin-bgcolor-2 { @include background-color($COLOR_OUIGO); }
.mixin-bgcolor-3 { @include background-color($color: #73f351, $color-high: #329c15); }
.mixin-bgcolor-4 { @include background-color($color: #51d7f3, $color-high: 20%); }
```

Markup:
<div class="block mixin-bgcolor-1">Block 1</div>
<div class="block mixin-bgcolor-2">Block 2</div>
<div class="block mixin-bgcolor-3">Block 3</div>
<div class="block mixin-bgcolor-4">Block 4</div>

Styleguide 8.7
*/
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
fill()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c, la couleur est tirée de la map $ALT_COLORS.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Par défaut, on récupère la valeur correspondante dans la table ALT COLORS
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-fill-1 {
  @include fill($COLOR_PRIMARY);
}
.mixin-fill-2 {
  @include fill(#51d7f3, #3858ee);
}
.mixin-fill-3 {
  @include fill($COLOR_PETITS_PRIX, 20%);
}
```

Markup:
<div class="mixin-fill-1">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-2">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-3">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>

Styleguide 8.8
*/
/*
background-linear-gradient()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11y-high-c, la couleur est tirée de la map $ALT_COLORS.

Paramètres :
- $gradient-start : obligatoire, on peut utiliser une oui-colors
- $gradient-end : obligatoire, on peut utiliser une oui-colors
- direction (optionnel, par défaut : "to right")
- $darken (optionnel) : un pourcentage. Si l'argument est utilisé, il remplace les couleurs de substitution
- !important (optionnel)

```css
.mixin-background-linear-gradient {
  @include background-linear-gradient($COLOR_PRIMARY, $COLOR_SECONDARY);
  ...
}
.mixin-background-linear-gradient-darken {
  @include background-linear-gradient(#cc7b27, #e2bd97, $direction: 'to bottom', $darken: 30%);
  ...
}
```

Markup:
<div class="block mixin-background-linear-gradient"></div>
<div class="block mixin-background-linear-gradient-darken"></div>

Styleguide 8.10
*/
/* a11y-line-spacing() */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
breakpoint()

Mixin pour les mediaqueries.

Paramètres :
- $grid : obligatoire, si vous avez importer grid/global, vous pouvez utiliser les valeurs suivantes :
- $small-up : tous les écrans
- $medium-up : > 40em
- $large-up : > 54em

```css
.mixin-breakpoint {
  @include breakpoint($small-up) { // totalement facultatif
    background-color: $COLOR_PRIMARY;
  }
  @include breakpoint($medium-up) {
    background-color: $COLOR_SKIN_LIGHT;
  }
  @include breakpoint($large-up) {
    background-color: $COLOR_SECONDARY;
  }
}
```

Markup:
<div class="mixin-breakpoint"></div>

Styleguide 8.11
*/
/*
radioColorCustom()

Mixin pour les couleurs appliquées sur les radio & checkbox.

Paramètres :
- $inputColor : Couleur de l'input
- $inputColorHighC : (optionel) Couleur de l'input en contrasts accentués



```css
.radio-color-mea {
  @include radioColorCustom($COLOR_MEA_POSITIF);
}

.radio-color-custom {
  @include radioColorCustom(#594fd2, #090352);
}
```

Markup:
<div class="block">
  <p>Using MEA positive color</p>
  <label for="test-mea-1" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-mea-2" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-mea-3" class="vsc__radio radio-color-mea vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-mea-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>
<div class="block">
  <p>Using custom colors</p>
  <label for="test-custom-1" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-custom-2" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-custom-3" class="vsc__radio radio-color-custom vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-custom-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>

Styleguide 8.12
*/
/*
buttonColorCustom()

Permet de surcharger de la couleur d'un CTA conformément à la charte.

Paramètres :
- $color : couleur, obligatoirement issue des [Oui Colors](section-9.html#kssref-9-2), ou une [Custom Color](section-9.html#kssref-9-4).
- $secondary : false par défaut ; pour générer un style de bouton secondaire (bordure de couleur, fond blanc)

```css

@import "../../mixins";
@import "../../colors/oui-colors";

@include export('button--info') {
  .\$code-app {
    &-button {
      &--info {
        @include buttonColorCustom($color:$COLOR_MEA_INFO);
      }
    }
  }
}
```

N.B. supprimez le \ dans le code ci-dessus , qui a été rajouté pour contourner un problème de compilation sass.

Exemples d'usage du mixin :
- [vsc-button--smallPrice](section-6.html#vsc-button--smallPrice)
- [vsc-button--smallPrice-secondary](section-6.html#vsc-button--smallPrice-secondary)
- [vsc-button--info](section-6.html#vsc-button--info)
- [vsc-button--info-secondary](section-6.html#vsc-button--info-secondary)

Styleguide 8.13
*/
/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
.vsa-button--smallPrice {
  border-color: #209e67 ;
  background-color: #209e67 ; }
  .a11y-high-c .vsa-button--smallPrice {
    border-color: #1f7d63 ; }
  .a11y-high-c .vsa-button--smallPrice {
    background-color: #1f7d63 ; }
  .vsa-button--smallPrice:hover, .vsa-button--smallPrice:focus:hover {
    border-color: #1f7d63 ;
    color: #fff ;
    background-color: #1f7d63 ; }
    .a11y-high-c .vsa-button--smallPrice:hover, .a11y-high-c .vsa-button--smallPrice:focus:hover {
      border-color: #1f7d63 ; }
    .a11y-high-c .vsa-button--smallPrice:hover, .a11y-high-c .vsa-button--smallPrice:focus:hover {
      color: #1f7d63 ; }
    .a11y-high-c .vsa-button--smallPrice:hover, .a11y-high-c .vsa-button--smallPrice:focus:hover {
      background-color: #fff ; }
  .vsa-button--smallPrice:focus {
    border-color: #209e67 ;
    background-color: #209e67 ; }
    .a11y-high-c .vsa-button--smallPrice:focus {
      border-color: #1f7d63 ; }
    .a11y-high-c .vsa-button--smallPrice:focus {
      background-color: #1f7d63 ; }

/*
Mixins

Installation :
`@import "/css-tools/mixins";`

Styleguide 8.0
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
arrow-lazy()

```css
.tooltip {
  position: relative;
  display: inline-block;
  ...
  @include arrow-lazy($size:0.5em, $color: $COLOR_PRIMARY);
}
```

<b>Paramètres</b><br>
$direction: top, $size: 1em, $color: #ccc, $color-highlight:"", $center: 50%, $margin: -1px, $pseudo: before

Markup:
<div class="tooltip">Tooltip</div>

Styleguide 8.1
*/
/*
focus()

Applique le style focus

```css
.test-button {
  @include focus($color: $COLOR_PRIMARY, $offset: -0.5em);
}
```

<b>Paramètres par défaut</b><br>
$color: #FFF, $opacity: 0.8, $offset: 3px, $width: thin, $style: dotted, $important: ''

Markup:
<button class="test-button">Button</div>

Styleguide 8.2
*/
/*
pseudoFocus

Applique le style focus sur un pseudo élément quand l'effet focus sur l'outline pose problème

```css
.tricky-focus {
  position: relative;
  &:focus { outline:0;}
  @include pseudoFocus($color: $COLOR_PRIMARY, $right: -5em, $top: -0.3em, $left: -0.3em, $bottom: -0.3em);
}
```

<b>Paramètres</b><br>
$pseudo: after, $top: -0.5em, $right: -0.5em, $bottom: -0.5em, $left: -0.5em, $color: #FFF, $opacity: 0.8, $style-line: dotted, $width: 1px

Markup:
<button class="test-button ico-train tricky-focus"><span>train</span></button>
<span>focus un peu tricky</span>

Styleguide 8.3
*/
/*
em()

Convertisseur pixel vers em

```css
.font-24-pixel { font-size: em(24); }
.font-16-pixel { font-size: em(16); }
.font-12-pixel { font-size: em(12); }
```

Markup:
<p class="font-24-pixel">24 pixels</p>
<p class="font-16-pixel">16 pixels</p>
<p class="font-12-pixel">12 pixels</p>

Styleguide 8.4
*/
/*
color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-color-title { @include color($COLOR_PRIMARY); }
.mixin-color-subtitle { @include color($COLOR_PETITS_PRIX, '', !important); }
.mixin-color-subtitle-2 { @include color( $color: #db70e6, $color-high: #830790, $important: '!important'); }
.mixin-color-subtitle-3 { @include color($color: #f97230, $color-high: 30%); }
```

Markup:
<div class="mixin-color-title">Titre 1</div>
<div class="mixin-color-subtitle">Sous-titre 1</div>
<div class="mixin-color-subtitle-2">Sous-titre 2</div>
<div class="mixin-color-subtitle-3">Sous-titre 3</div>

Styleguide 8.5
*/
/*
border-color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.
 - $alpha (optionnel) : rajoute le mode rgba. Si aucune valeur n'est entrée, le couleur passe en mode rgb, donc pas de transparence

```css
.mixin-bdcolor-1 { border:3px solid; @include border-color($COLOR_PRIMARY); }

.mixin-bdcolor-2 { border:3px solid; @include border-color($COLOR_OUIGO); }

.mixin-bdcolor-3 { border:3px solid; @include border-color($color: #73f351, $color-high: #329c15); }

.mixin-bdcolor-4 { border:3px solid; @include border-color($color: #51d7f3, $color-high: 20%); }

.mixin-bdcolor-5 { border:3px solid; @include border-color($color: $COLOR_PRIMARY, $alpha: 0.3); }
```

Markup:
<div class="block mixin-bdcolor-1">Block 1</div>
<div class="block mixin-bdcolor-2">Block 2</div>
<div class="block mixin-bdcolor-3">Block 3</div>
<div class="block mixin-bdcolor-4">Block 4</div>
<div class="block mixin-bdcolor-5">Block 5</div>

Styleguide 8.6
*/
/*
background-color()

Mixin pour gérer les contrastes accentués des couleurs en background. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-bgcolor-1 { @include background-color($COLOR_PRIMARY); }
.mixin-bgcolor-2 { @include background-color($COLOR_OUIGO); }
.mixin-bgcolor-3 { @include background-color($color: #73f351, $color-high: #329c15); }
.mixin-bgcolor-4 { @include background-color($color: #51d7f3, $color-high: 20%); }
```

Markup:
<div class="block mixin-bgcolor-1">Block 1</div>
<div class="block mixin-bgcolor-2">Block 2</div>
<div class="block mixin-bgcolor-3">Block 3</div>
<div class="block mixin-bgcolor-4">Block 4</div>

Styleguide 8.7
*/
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
fill()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c, la couleur est tirée de la map $ALT_COLORS.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Par défaut, on récupère la valeur correspondante dans la table ALT COLORS
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-fill-1 {
  @include fill($COLOR_PRIMARY);
}
.mixin-fill-2 {
  @include fill(#51d7f3, #3858ee);
}
.mixin-fill-3 {
  @include fill($COLOR_PETITS_PRIX, 20%);
}
```

Markup:
<div class="mixin-fill-1">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-2">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-3">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>

Styleguide 8.8
*/
/*
background-linear-gradient()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11y-high-c, la couleur est tirée de la map $ALT_COLORS.

Paramètres :
- $gradient-start : obligatoire, on peut utiliser une oui-colors
- $gradient-end : obligatoire, on peut utiliser une oui-colors
- direction (optionnel, par défaut : "to right")
- $darken (optionnel) : un pourcentage. Si l'argument est utilisé, il remplace les couleurs de substitution
- !important (optionnel)

```css
.mixin-background-linear-gradient {
  @include background-linear-gradient($COLOR_PRIMARY, $COLOR_SECONDARY);
  ...
}
.mixin-background-linear-gradient-darken {
  @include background-linear-gradient(#cc7b27, #e2bd97, $direction: 'to bottom', $darken: 30%);
  ...
}
```

Markup:
<div class="block mixin-background-linear-gradient"></div>
<div class="block mixin-background-linear-gradient-darken"></div>

Styleguide 8.10
*/
/* a11y-line-spacing() */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
breakpoint()

Mixin pour les mediaqueries.

Paramètres :
- $grid : obligatoire, si vous avez importer grid/global, vous pouvez utiliser les valeurs suivantes :
- $small-up : tous les écrans
- $medium-up : > 40em
- $large-up : > 54em

```css
.mixin-breakpoint {
  @include breakpoint($small-up) { // totalement facultatif
    background-color: $COLOR_PRIMARY;
  }
  @include breakpoint($medium-up) {
    background-color: $COLOR_SKIN_LIGHT;
  }
  @include breakpoint($large-up) {
    background-color: $COLOR_SECONDARY;
  }
}
```

Markup:
<div class="mixin-breakpoint"></div>

Styleguide 8.11
*/
/*
radioColorCustom()

Mixin pour les couleurs appliquées sur les radio & checkbox.

Paramètres :
- $inputColor : Couleur de l'input
- $inputColorHighC : (optionel) Couleur de l'input en contrasts accentués



```css
.radio-color-mea {
  @include radioColorCustom($COLOR_MEA_POSITIF);
}

.radio-color-custom {
  @include radioColorCustom(#594fd2, #090352);
}
```

Markup:
<div class="block">
  <p>Using MEA positive color</p>
  <label for="test-mea-1" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-mea-2" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-mea-3" class="vsc__radio radio-color-mea vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-mea-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>
<div class="block">
  <p>Using custom colors</p>
  <label for="test-custom-1" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-custom-2" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-custom-3" class="vsc__radio radio-color-custom vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-custom-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>

Styleguide 8.12
*/
/*
buttonColorCustom()

Permet de surcharger de la couleur d'un CTA conformément à la charte.

Paramètres :
- $color : couleur, obligatoirement issue des [Oui Colors](section-9.html#kssref-9-2), ou une [Custom Color](section-9.html#kssref-9-4).
- $secondary : false par défaut ; pour générer un style de bouton secondaire (bordure de couleur, fond blanc)

```css

@import "../../mixins";
@import "../../colors/oui-colors";

@include export('button--info') {
  .\$code-app {
    &-button {
      &--info {
        @include buttonColorCustom($color:$COLOR_MEA_INFO);
      }
    }
  }
}
```

N.B. supprimez le \ dans le code ci-dessus , qui a été rajouté pour contourner un problème de compilation sass.

Exemples d'usage du mixin :
- [vsc-button--smallPrice](section-6.html#vsc-button--smallPrice)
- [vsc-button--smallPrice-secondary](section-6.html#vsc-button--smallPrice-secondary)
- [vsc-button--info](section-6.html#vsc-button--info)
- [vsc-button--info-secondary](section-6.html#vsc-button--info-secondary)

Styleguide 8.13
*/
/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
.vsa-button--smallPrice-secondary {
  border-color: #209e67 ;
  background-color: #fff ;
  color: #209e67 ; }
  .a11y-high-c .vsa-button--smallPrice-secondary {
    border-color: #1f7d63 ; }
  .a11y-high-c .vsa-button--smallPrice-secondary {
    background-color: #fff ; }
  .a11y-high-c .vsa-button--smallPrice-secondary {
    color: #1f7d63 ; }
  .vsa-button--smallPrice-secondary:hover, .vsa-button--smallPrice-secondary:focus:hover {
    border-color: #1f7d63 ;
    color: #fff ;
    background-color: #1f7d63 ; }
    .a11y-high-c .vsa-button--smallPrice-secondary:hover, .a11y-high-c .vsa-button--smallPrice-secondary:focus:hover {
      border-color: #1f7d63 ; }
    .a11y-high-c .vsa-button--smallPrice-secondary:hover, .a11y-high-c .vsa-button--smallPrice-secondary:focus:hover {
      color: #fff ; }
    .a11y-high-c .vsa-button--smallPrice-secondary:hover, .a11y-high-c .vsa-button--smallPrice-secondary:focus:hover {
      background-color: #1f7d63 ; }
  .vsa-button--smallPrice-secondary:focus {
    border-color: #209e67 ;
    color: #209e67 ;
    outline-color: #209e67 ;
    background-color: #fff ; }
    .a11y-high-c .vsa-button--smallPrice-secondary:focus {
      border-color: #1f7d63 ; }
    .a11y-high-c .vsa-button--smallPrice-secondary:focus {
      color: #1f7d63 ; }
    .a11y-high-c .vsa-button--smallPrice-secondary:focus {
      outline-color: #1f7d63 ; }
    .a11y-high-c .vsa-button--smallPrice-secondary:focus {
      background-color: #fff ; }

/*
Mixins

Installation :
`@import "/css-tools/mixins";`

Styleguide 8.0
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
arrow-lazy()

```css
.tooltip {
  position: relative;
  display: inline-block;
  ...
  @include arrow-lazy($size:0.5em, $color: $COLOR_PRIMARY);
}
```

<b>Paramètres</b><br>
$direction: top, $size: 1em, $color: #ccc, $color-highlight:"", $center: 50%, $margin: -1px, $pseudo: before

Markup:
<div class="tooltip">Tooltip</div>

Styleguide 8.1
*/
/*
focus()

Applique le style focus

```css
.test-button {
  @include focus($color: $COLOR_PRIMARY, $offset: -0.5em);
}
```

<b>Paramètres par défaut</b><br>
$color: #FFF, $opacity: 0.8, $offset: 3px, $width: thin, $style: dotted, $important: ''

Markup:
<button class="test-button">Button</div>

Styleguide 8.2
*/
/*
pseudoFocus

Applique le style focus sur un pseudo élément quand l'effet focus sur l'outline pose problème

```css
.tricky-focus {
  position: relative;
  &:focus { outline:0;}
  @include pseudoFocus($color: $COLOR_PRIMARY, $right: -5em, $top: -0.3em, $left: -0.3em, $bottom: -0.3em);
}
```

<b>Paramètres</b><br>
$pseudo: after, $top: -0.5em, $right: -0.5em, $bottom: -0.5em, $left: -0.5em, $color: #FFF, $opacity: 0.8, $style-line: dotted, $width: 1px

Markup:
<button class="test-button ico-train tricky-focus"><span>train</span></button>
<span>focus un peu tricky</span>

Styleguide 8.3
*/
/*
em()

Convertisseur pixel vers em

```css
.font-24-pixel { font-size: em(24); }
.font-16-pixel { font-size: em(16); }
.font-12-pixel { font-size: em(12); }
```

Markup:
<p class="font-24-pixel">24 pixels</p>
<p class="font-16-pixel">16 pixels</p>
<p class="font-12-pixel">12 pixels</p>

Styleguide 8.4
*/
/*
color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-color-title { @include color($COLOR_PRIMARY); }
.mixin-color-subtitle { @include color($COLOR_PETITS_PRIX, '', !important); }
.mixin-color-subtitle-2 { @include color( $color: #db70e6, $color-high: #830790, $important: '!important'); }
.mixin-color-subtitle-3 { @include color($color: #f97230, $color-high: 30%); }
```

Markup:
<div class="mixin-color-title">Titre 1</div>
<div class="mixin-color-subtitle">Sous-titre 1</div>
<div class="mixin-color-subtitle-2">Sous-titre 2</div>
<div class="mixin-color-subtitle-3">Sous-titre 3</div>

Styleguide 8.5
*/
/*
border-color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.
 - $alpha (optionnel) : rajoute le mode rgba. Si aucune valeur n'est entrée, le couleur passe en mode rgb, donc pas de transparence

```css
.mixin-bdcolor-1 { border:3px solid; @include border-color($COLOR_PRIMARY); }

.mixin-bdcolor-2 { border:3px solid; @include border-color($COLOR_OUIGO); }

.mixin-bdcolor-3 { border:3px solid; @include border-color($color: #73f351, $color-high: #329c15); }

.mixin-bdcolor-4 { border:3px solid; @include border-color($color: #51d7f3, $color-high: 20%); }

.mixin-bdcolor-5 { border:3px solid; @include border-color($color: $COLOR_PRIMARY, $alpha: 0.3); }
```

Markup:
<div class="block mixin-bdcolor-1">Block 1</div>
<div class="block mixin-bdcolor-2">Block 2</div>
<div class="block mixin-bdcolor-3">Block 3</div>
<div class="block mixin-bdcolor-4">Block 4</div>
<div class="block mixin-bdcolor-5">Block 5</div>

Styleguide 8.6
*/
/*
background-color()

Mixin pour gérer les contrastes accentués des couleurs en background. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-bgcolor-1 { @include background-color($COLOR_PRIMARY); }
.mixin-bgcolor-2 { @include background-color($COLOR_OUIGO); }
.mixin-bgcolor-3 { @include background-color($color: #73f351, $color-high: #329c15); }
.mixin-bgcolor-4 { @include background-color($color: #51d7f3, $color-high: 20%); }
```

Markup:
<div class="block mixin-bgcolor-1">Block 1</div>
<div class="block mixin-bgcolor-2">Block 2</div>
<div class="block mixin-bgcolor-3">Block 3</div>
<div class="block mixin-bgcolor-4">Block 4</div>

Styleguide 8.7
*/
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
fill()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c, la couleur est tirée de la map $ALT_COLORS.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Par défaut, on récupère la valeur correspondante dans la table ALT COLORS
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-fill-1 {
  @include fill($COLOR_PRIMARY);
}
.mixin-fill-2 {
  @include fill(#51d7f3, #3858ee);
}
.mixin-fill-3 {
  @include fill($COLOR_PETITS_PRIX, 20%);
}
```

Markup:
<div class="mixin-fill-1">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-2">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-3">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>

Styleguide 8.8
*/
/*
background-linear-gradient()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11y-high-c, la couleur est tirée de la map $ALT_COLORS.

Paramètres :
- $gradient-start : obligatoire, on peut utiliser une oui-colors
- $gradient-end : obligatoire, on peut utiliser une oui-colors
- direction (optionnel, par défaut : "to right")
- $darken (optionnel) : un pourcentage. Si l'argument est utilisé, il remplace les couleurs de substitution
- !important (optionnel)

```css
.mixin-background-linear-gradient {
  @include background-linear-gradient($COLOR_PRIMARY, $COLOR_SECONDARY);
  ...
}
.mixin-background-linear-gradient-darken {
  @include background-linear-gradient(#cc7b27, #e2bd97, $direction: 'to bottom', $darken: 30%);
  ...
}
```

Markup:
<div class="block mixin-background-linear-gradient"></div>
<div class="block mixin-background-linear-gradient-darken"></div>

Styleguide 8.10
*/
/* a11y-line-spacing() */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
breakpoint()

Mixin pour les mediaqueries.

Paramètres :
- $grid : obligatoire, si vous avez importer grid/global, vous pouvez utiliser les valeurs suivantes :
- $small-up : tous les écrans
- $medium-up : > 40em
- $large-up : > 54em

```css
.mixin-breakpoint {
  @include breakpoint($small-up) { // totalement facultatif
    background-color: $COLOR_PRIMARY;
  }
  @include breakpoint($medium-up) {
    background-color: $COLOR_SKIN_LIGHT;
  }
  @include breakpoint($large-up) {
    background-color: $COLOR_SECONDARY;
  }
}
```

Markup:
<div class="mixin-breakpoint"></div>

Styleguide 8.11
*/
/*
radioColorCustom()

Mixin pour les couleurs appliquées sur les radio & checkbox.

Paramètres :
- $inputColor : Couleur de l'input
- $inputColorHighC : (optionel) Couleur de l'input en contrasts accentués



```css
.radio-color-mea {
  @include radioColorCustom($COLOR_MEA_POSITIF);
}

.radio-color-custom {
  @include radioColorCustom(#594fd2, #090352);
}
```

Markup:
<div class="block">
  <p>Using MEA positive color</p>
  <label for="test-mea-1" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-mea-2" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-mea-3" class="vsc__radio radio-color-mea vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-mea-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>
<div class="block">
  <p>Using custom colors</p>
  <label for="test-custom-1" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-custom-2" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-custom-3" class="vsc__radio radio-color-custom vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-custom-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>

Styleguide 8.12
*/
/*
buttonColorCustom()

Permet de surcharger de la couleur d'un CTA conformément à la charte.

Paramètres :
- $color : couleur, obligatoirement issue des [Oui Colors](section-9.html#kssref-9-2), ou une [Custom Color](section-9.html#kssref-9-4).
- $secondary : false par défaut ; pour générer un style de bouton secondaire (bordure de couleur, fond blanc)

```css

@import "../../mixins";
@import "../../colors/oui-colors";

@include export('button--info') {
  .\$code-app {
    &-button {
      &--info {
        @include buttonColorCustom($color:$COLOR_MEA_INFO);
      }
    }
  }
}
```

N.B. supprimez le \ dans le code ci-dessus , qui a été rajouté pour contourner un problème de compilation sass.

Exemples d'usage du mixin :
- [vsc-button--smallPrice](section-6.html#vsc-button--smallPrice)
- [vsc-button--smallPrice-secondary](section-6.html#vsc-button--smallPrice-secondary)
- [vsc-button--info](section-6.html#vsc-button--info)
- [vsc-button--info-secondary](section-6.html#vsc-button--info-secondary)

Styleguide 8.13
*/
/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
.vsa-button--info {
  border-color: #0099b4 ;
  background-color: #0099b4 ; }
  .a11y-high-c .vsa-button--info {
    border-color: #007a89 ; }
  .a11y-high-c .vsa-button--info {
    background-color: #007a89 ; }
  .vsa-button--info:hover, .vsa-button--info:focus:hover {
    border-color: #007a89 ;
    color: #fff ;
    background-color: #007a89 ; }
    .a11y-high-c .vsa-button--info:hover, .a11y-high-c .vsa-button--info:focus:hover {
      border-color: #007a89 ; }
    .a11y-high-c .vsa-button--info:hover, .a11y-high-c .vsa-button--info:focus:hover {
      color: #007a89 ; }
    .a11y-high-c .vsa-button--info:hover, .a11y-high-c .vsa-button--info:focus:hover {
      background-color: #fff ; }
  .vsa-button--info:focus {
    border-color: #0099b4 ;
    background-color: #0099b4 ; }
    .a11y-high-c .vsa-button--info:focus {
      border-color: #007a89 ; }
    .a11y-high-c .vsa-button--info:focus {
      background-color: #007a89 ; }

/*
Mixins

Installation :
`@import "/css-tools/mixins";`

Styleguide 8.0
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
arrow-lazy()

```css
.tooltip {
  position: relative;
  display: inline-block;
  ...
  @include arrow-lazy($size:0.5em, $color: $COLOR_PRIMARY);
}
```

<b>Paramètres</b><br>
$direction: top, $size: 1em, $color: #ccc, $color-highlight:"", $center: 50%, $margin: -1px, $pseudo: before

Markup:
<div class="tooltip">Tooltip</div>

Styleguide 8.1
*/
/*
focus()

Applique le style focus

```css
.test-button {
  @include focus($color: $COLOR_PRIMARY, $offset: -0.5em);
}
```

<b>Paramètres par défaut</b><br>
$color: #FFF, $opacity: 0.8, $offset: 3px, $width: thin, $style: dotted, $important: ''

Markup:
<button class="test-button">Button</div>

Styleguide 8.2
*/
/*
pseudoFocus

Applique le style focus sur un pseudo élément quand l'effet focus sur l'outline pose problème

```css
.tricky-focus {
  position: relative;
  &:focus { outline:0;}
  @include pseudoFocus($color: $COLOR_PRIMARY, $right: -5em, $top: -0.3em, $left: -0.3em, $bottom: -0.3em);
}
```

<b>Paramètres</b><br>
$pseudo: after, $top: -0.5em, $right: -0.5em, $bottom: -0.5em, $left: -0.5em, $color: #FFF, $opacity: 0.8, $style-line: dotted, $width: 1px

Markup:
<button class="test-button ico-train tricky-focus"><span>train</span></button>
<span>focus un peu tricky</span>

Styleguide 8.3
*/
/*
em()

Convertisseur pixel vers em

```css
.font-24-pixel { font-size: em(24); }
.font-16-pixel { font-size: em(16); }
.font-12-pixel { font-size: em(12); }
```

Markup:
<p class="font-24-pixel">24 pixels</p>
<p class="font-16-pixel">16 pixels</p>
<p class="font-12-pixel">12 pixels</p>

Styleguide 8.4
*/
/*
color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-color-title { @include color($COLOR_PRIMARY); }
.mixin-color-subtitle { @include color($COLOR_PETITS_PRIX, '', !important); }
.mixin-color-subtitle-2 { @include color( $color: #db70e6, $color-high: #830790, $important: '!important'); }
.mixin-color-subtitle-3 { @include color($color: #f97230, $color-high: 30%); }
```

Markup:
<div class="mixin-color-title">Titre 1</div>
<div class="mixin-color-subtitle">Sous-titre 1</div>
<div class="mixin-color-subtitle-2">Sous-titre 2</div>
<div class="mixin-color-subtitle-3">Sous-titre 3</div>

Styleguide 8.5
*/
/*
border-color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.
 - $alpha (optionnel) : rajoute le mode rgba. Si aucune valeur n'est entrée, le couleur passe en mode rgb, donc pas de transparence

```css
.mixin-bdcolor-1 { border:3px solid; @include border-color($COLOR_PRIMARY); }

.mixin-bdcolor-2 { border:3px solid; @include border-color($COLOR_OUIGO); }

.mixin-bdcolor-3 { border:3px solid; @include border-color($color: #73f351, $color-high: #329c15); }

.mixin-bdcolor-4 { border:3px solid; @include border-color($color: #51d7f3, $color-high: 20%); }

.mixin-bdcolor-5 { border:3px solid; @include border-color($color: $COLOR_PRIMARY, $alpha: 0.3); }
```

Markup:
<div class="block mixin-bdcolor-1">Block 1</div>
<div class="block mixin-bdcolor-2">Block 2</div>
<div class="block mixin-bdcolor-3">Block 3</div>
<div class="block mixin-bdcolor-4">Block 4</div>
<div class="block mixin-bdcolor-5">Block 5</div>

Styleguide 8.6
*/
/*
background-color()

Mixin pour gérer les contrastes accentués des couleurs en background. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-bgcolor-1 { @include background-color($COLOR_PRIMARY); }
.mixin-bgcolor-2 { @include background-color($COLOR_OUIGO); }
.mixin-bgcolor-3 { @include background-color($color: #73f351, $color-high: #329c15); }
.mixin-bgcolor-4 { @include background-color($color: #51d7f3, $color-high: 20%); }
```

Markup:
<div class="block mixin-bgcolor-1">Block 1</div>
<div class="block mixin-bgcolor-2">Block 2</div>
<div class="block mixin-bgcolor-3">Block 3</div>
<div class="block mixin-bgcolor-4">Block 4</div>

Styleguide 8.7
*/
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
fill()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c, la couleur est tirée de la map $ALT_COLORS.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Par défaut, on récupère la valeur correspondante dans la table ALT COLORS
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-fill-1 {
  @include fill($COLOR_PRIMARY);
}
.mixin-fill-2 {
  @include fill(#51d7f3, #3858ee);
}
.mixin-fill-3 {
  @include fill($COLOR_PETITS_PRIX, 20%);
}
```

Markup:
<div class="mixin-fill-1">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-2">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-3">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>

Styleguide 8.8
*/
/*
background-linear-gradient()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11y-high-c, la couleur est tirée de la map $ALT_COLORS.

Paramètres :
- $gradient-start : obligatoire, on peut utiliser une oui-colors
- $gradient-end : obligatoire, on peut utiliser une oui-colors
- direction (optionnel, par défaut : "to right")
- $darken (optionnel) : un pourcentage. Si l'argument est utilisé, il remplace les couleurs de substitution
- !important (optionnel)

```css
.mixin-background-linear-gradient {
  @include background-linear-gradient($COLOR_PRIMARY, $COLOR_SECONDARY);
  ...
}
.mixin-background-linear-gradient-darken {
  @include background-linear-gradient(#cc7b27, #e2bd97, $direction: 'to bottom', $darken: 30%);
  ...
}
```

Markup:
<div class="block mixin-background-linear-gradient"></div>
<div class="block mixin-background-linear-gradient-darken"></div>

Styleguide 8.10
*/
/* a11y-line-spacing() */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
breakpoint()

Mixin pour les mediaqueries.

Paramètres :
- $grid : obligatoire, si vous avez importer grid/global, vous pouvez utiliser les valeurs suivantes :
- $small-up : tous les écrans
- $medium-up : > 40em
- $large-up : > 54em

```css
.mixin-breakpoint {
  @include breakpoint($small-up) { // totalement facultatif
    background-color: $COLOR_PRIMARY;
  }
  @include breakpoint($medium-up) {
    background-color: $COLOR_SKIN_LIGHT;
  }
  @include breakpoint($large-up) {
    background-color: $COLOR_SECONDARY;
  }
}
```

Markup:
<div class="mixin-breakpoint"></div>

Styleguide 8.11
*/
/*
radioColorCustom()

Mixin pour les couleurs appliquées sur les radio & checkbox.

Paramètres :
- $inputColor : Couleur de l'input
- $inputColorHighC : (optionel) Couleur de l'input en contrasts accentués



```css
.radio-color-mea {
  @include radioColorCustom($COLOR_MEA_POSITIF);
}

.radio-color-custom {
  @include radioColorCustom(#594fd2, #090352);
}
```

Markup:
<div class="block">
  <p>Using MEA positive color</p>
  <label for="test-mea-1" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-mea-2" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-mea-3" class="vsc__radio radio-color-mea vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-mea-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>
<div class="block">
  <p>Using custom colors</p>
  <label for="test-custom-1" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-custom-2" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-custom-3" class="vsc__radio radio-color-custom vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-custom-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>

Styleguide 8.12
*/
/*
buttonColorCustom()

Permet de surcharger de la couleur d'un CTA conformément à la charte.

Paramètres :
- $color : couleur, obligatoirement issue des [Oui Colors](section-9.html#kssref-9-2), ou une [Custom Color](section-9.html#kssref-9-4).
- $secondary : false par défaut ; pour générer un style de bouton secondaire (bordure de couleur, fond blanc)

```css

@import "../../mixins";
@import "../../colors/oui-colors";

@include export('button--info') {
  .\$code-app {
    &-button {
      &--info {
        @include buttonColorCustom($color:$COLOR_MEA_INFO);
      }
    }
  }
}
```

N.B. supprimez le \ dans le code ci-dessus , qui a été rajouté pour contourner un problème de compilation sass.

Exemples d'usage du mixin :
- [vsc-button--smallPrice](section-6.html#vsc-button--smallPrice)
- [vsc-button--smallPrice-secondary](section-6.html#vsc-button--smallPrice-secondary)
- [vsc-button--info](section-6.html#vsc-button--info)
- [vsc-button--info-secondary](section-6.html#vsc-button--info-secondary)

Styleguide 8.13
*/
/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
.vsa-button--info-secondary {
  border-color: #0099b4 ;
  background-color: #fff ;
  color: #0099b4 ; }
  .a11y-high-c .vsa-button--info-secondary {
    border-color: #007a89 ; }
  .a11y-high-c .vsa-button--info-secondary {
    background-color: #fff ; }
  .a11y-high-c .vsa-button--info-secondary {
    color: #007a89 ; }
  .vsa-button--info-secondary:hover, .vsa-button--info-secondary:focus:hover {
    border-color: #007a89 ;
    color: #fff ;
    background-color: #007a89 ; }
    .a11y-high-c .vsa-button--info-secondary:hover, .a11y-high-c .vsa-button--info-secondary:focus:hover {
      border-color: #007a89 ; }
    .a11y-high-c .vsa-button--info-secondary:hover, .a11y-high-c .vsa-button--info-secondary:focus:hover {
      color: #fff ; }
    .a11y-high-c .vsa-button--info-secondary:hover, .a11y-high-c .vsa-button--info-secondary:focus:hover {
      background-color: #007a89 ; }
  .vsa-button--info-secondary:focus {
    border-color: #0099b4 ;
    color: #0099b4 ;
    outline-color: #0099b4 ;
    background-color: #fff ; }
    .a11y-high-c .vsa-button--info-secondary:focus {
      border-color: #007a89 ; }
    .a11y-high-c .vsa-button--info-secondary:focus {
      color: #007a89 ; }
    .a11y-high-c .vsa-button--info-secondary:focus {
      outline-color: #007a89 ; }
    .a11y-high-c .vsa-button--info-secondary:focus {
      background-color: #fff ; }

/*
Label et Input

<div class="sg-info">
Installation :
`@import "../vendors/css-tools/src/forms/input";`
<b>IE :</b> pour les select, on utilise un patch IE. Il faut s'assurer qu'un parent affiche bien les classes IE, IE9, IE10, IE11.<br><br>
</div>

Markup: ../styleguide/tpl/input.hbs

Styleguide 6.5
*/
/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
Mixins

Installation :
`@import "/css-tools/mixins";`

Styleguide 8.0
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
arrow-lazy()

```css
.tooltip {
  position: relative;
  display: inline-block;
  ...
  @include arrow-lazy($size:0.5em, $color: $COLOR_PRIMARY);
}
```

<b>Paramètres</b><br>
$direction: top, $size: 1em, $color: #ccc, $color-highlight:"", $center: 50%, $margin: -1px, $pseudo: before

Markup:
<div class="tooltip">Tooltip</div>

Styleguide 8.1
*/
/*
focus()

Applique le style focus

```css
.test-button {
  @include focus($color: $COLOR_PRIMARY, $offset: -0.5em);
}
```

<b>Paramètres par défaut</b><br>
$color: #FFF, $opacity: 0.8, $offset: 3px, $width: thin, $style: dotted, $important: ''

Markup:
<button class="test-button">Button</div>

Styleguide 8.2
*/
/*
pseudoFocus

Applique le style focus sur un pseudo élément quand l'effet focus sur l'outline pose problème

```css
.tricky-focus {
  position: relative;
  &:focus { outline:0;}
  @include pseudoFocus($color: $COLOR_PRIMARY, $right: -5em, $top: -0.3em, $left: -0.3em, $bottom: -0.3em);
}
```

<b>Paramètres</b><br>
$pseudo: after, $top: -0.5em, $right: -0.5em, $bottom: -0.5em, $left: -0.5em, $color: #FFF, $opacity: 0.8, $style-line: dotted, $width: 1px

Markup:
<button class="test-button ico-train tricky-focus"><span>train</span></button>
<span>focus un peu tricky</span>

Styleguide 8.3
*/
/*
em()

Convertisseur pixel vers em

```css
.font-24-pixel { font-size: em(24); }
.font-16-pixel { font-size: em(16); }
.font-12-pixel { font-size: em(12); }
```

Markup:
<p class="font-24-pixel">24 pixels</p>
<p class="font-16-pixel">16 pixels</p>
<p class="font-12-pixel">12 pixels</p>

Styleguide 8.4
*/
/*
color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-color-title { @include color($COLOR_PRIMARY); }
.mixin-color-subtitle { @include color($COLOR_PETITS_PRIX, '', !important); }
.mixin-color-subtitle-2 { @include color( $color: #db70e6, $color-high: #830790, $important: '!important'); }
.mixin-color-subtitle-3 { @include color($color: #f97230, $color-high: 30%); }
```

Markup:
<div class="mixin-color-title">Titre 1</div>
<div class="mixin-color-subtitle">Sous-titre 1</div>
<div class="mixin-color-subtitle-2">Sous-titre 2</div>
<div class="mixin-color-subtitle-3">Sous-titre 3</div>

Styleguide 8.5
*/
/*
border-color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.
 - $alpha (optionnel) : rajoute le mode rgba. Si aucune valeur n'est entrée, le couleur passe en mode rgb, donc pas de transparence

```css
.mixin-bdcolor-1 { border:3px solid; @include border-color($COLOR_PRIMARY); }

.mixin-bdcolor-2 { border:3px solid; @include border-color($COLOR_OUIGO); }

.mixin-bdcolor-3 { border:3px solid; @include border-color($color: #73f351, $color-high: #329c15); }

.mixin-bdcolor-4 { border:3px solid; @include border-color($color: #51d7f3, $color-high: 20%); }

.mixin-bdcolor-5 { border:3px solid; @include border-color($color: $COLOR_PRIMARY, $alpha: 0.3); }
```

Markup:
<div class="block mixin-bdcolor-1">Block 1</div>
<div class="block mixin-bdcolor-2">Block 2</div>
<div class="block mixin-bdcolor-3">Block 3</div>
<div class="block mixin-bdcolor-4">Block 4</div>
<div class="block mixin-bdcolor-5">Block 5</div>

Styleguide 8.6
*/
/*
background-color()

Mixin pour gérer les contrastes accentués des couleurs en background. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-bgcolor-1 { @include background-color($COLOR_PRIMARY); }
.mixin-bgcolor-2 { @include background-color($COLOR_OUIGO); }
.mixin-bgcolor-3 { @include background-color($color: #73f351, $color-high: #329c15); }
.mixin-bgcolor-4 { @include background-color($color: #51d7f3, $color-high: 20%); }
```

Markup:
<div class="block mixin-bgcolor-1">Block 1</div>
<div class="block mixin-bgcolor-2">Block 2</div>
<div class="block mixin-bgcolor-3">Block 3</div>
<div class="block mixin-bgcolor-4">Block 4</div>

Styleguide 8.7
*/
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
fill()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c, la couleur est tirée de la map $ALT_COLORS.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Par défaut, on récupère la valeur correspondante dans la table ALT COLORS
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-fill-1 {
  @include fill($COLOR_PRIMARY);
}
.mixin-fill-2 {
  @include fill(#51d7f3, #3858ee);
}
.mixin-fill-3 {
  @include fill($COLOR_PETITS_PRIX, 20%);
}
```

Markup:
<div class="mixin-fill-1">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-2">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-3">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>

Styleguide 8.8
*/
/*
background-linear-gradient()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11y-high-c, la couleur est tirée de la map $ALT_COLORS.

Paramètres :
- $gradient-start : obligatoire, on peut utiliser une oui-colors
- $gradient-end : obligatoire, on peut utiliser une oui-colors
- direction (optionnel, par défaut : "to right")
- $darken (optionnel) : un pourcentage. Si l'argument est utilisé, il remplace les couleurs de substitution
- !important (optionnel)

```css
.mixin-background-linear-gradient {
  @include background-linear-gradient($COLOR_PRIMARY, $COLOR_SECONDARY);
  ...
}
.mixin-background-linear-gradient-darken {
  @include background-linear-gradient(#cc7b27, #e2bd97, $direction: 'to bottom', $darken: 30%);
  ...
}
```

Markup:
<div class="block mixin-background-linear-gradient"></div>
<div class="block mixin-background-linear-gradient-darken"></div>

Styleguide 8.10
*/
/* a11y-line-spacing() */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
breakpoint()

Mixin pour les mediaqueries.

Paramètres :
- $grid : obligatoire, si vous avez importer grid/global, vous pouvez utiliser les valeurs suivantes :
- $small-up : tous les écrans
- $medium-up : > 40em
- $large-up : > 54em

```css
.mixin-breakpoint {
  @include breakpoint($small-up) { // totalement facultatif
    background-color: $COLOR_PRIMARY;
  }
  @include breakpoint($medium-up) {
    background-color: $COLOR_SKIN_LIGHT;
  }
  @include breakpoint($large-up) {
    background-color: $COLOR_SECONDARY;
  }
}
```

Markup:
<div class="mixin-breakpoint"></div>

Styleguide 8.11
*/
/*
radioColorCustom()

Mixin pour les couleurs appliquées sur les radio & checkbox.

Paramètres :
- $inputColor : Couleur de l'input
- $inputColorHighC : (optionel) Couleur de l'input en contrasts accentués



```css
.radio-color-mea {
  @include radioColorCustom($COLOR_MEA_POSITIF);
}

.radio-color-custom {
  @include radioColorCustom(#594fd2, #090352);
}
```

Markup:
<div class="block">
  <p>Using MEA positive color</p>
  <label for="test-mea-1" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-mea-2" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-mea-3" class="vsc__radio radio-color-mea vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-mea-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>
<div class="block">
  <p>Using custom colors</p>
  <label for="test-custom-1" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-custom-2" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-custom-3" class="vsc__radio radio-color-custom vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-custom-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>

Styleguide 8.12
*/
/*
buttonColorCustom()

Permet de surcharger de la couleur d'un CTA conformément à la charte.

Paramètres :
- $color : couleur, obligatoirement issue des [Oui Colors](section-9.html#kssref-9-2), ou une [Custom Color](section-9.html#kssref-9-4).
- $secondary : false par défaut ; pour générer un style de bouton secondaire (bordure de couleur, fond blanc)

```css

@import "../../mixins";
@import "../../colors/oui-colors";

@include export('button--info') {
  .\$code-app {
    &-button {
      &--info {
        @include buttonColorCustom($color:$COLOR_MEA_INFO);
      }
    }
  }
}
```

N.B. supprimez le \ dans le code ci-dessus , qui a été rajouté pour contourner un problème de compilation sass.

Exemples d'usage du mixin :
- [vsc-button--smallPrice](section-6.html#vsc-button--smallPrice)
- [vsc-button--smallPrice-secondary](section-6.html#vsc-button--smallPrice-secondary)
- [vsc-button--info](section-6.html#vsc-button--info)
- [vsc-button--info-secondary](section-6.html#vsc-button--info-secondary)

Styleguide 8.13
*/
.vsa-input {
  position: relative;
  font-family: AvenirBook, Arial, Helvetica, sans-serif; }
  .vsa-input__label {
    font-size: 1em;
    white-space: nowrap;
    display: block;
    color: #000;
    margin-bottom: 0.3em ; }
    .a11y-dys-line-spacing .vsa-input__label {
      margin-bottom: calc(0.3em * 1.6) ; }
  .vsa-input__select {
    color: #000 ; }
    .a11y-high-c .vsa-input__select {
      color: #000 ; }
  .vsa-input__select, .vsa-input__text, .vsa-input__file {
    font-family: AvenirBook, Arial, Helvetica, sans-serif;
    position: relative;
    width: 100%;
    border: 1px solid #fff;
    background-color: #fff;
    font-size: 1em;
    padding: 0 1em;
    height: 3.125em;
    outline: none;
    border-radius: 0;
    border: 1px solid #999082;
    transition: border-color 0.2s ease;
    appearance: none;
    -ms-progress-appearance: unset; }
    .vsa-input__select::placeholder, .vsa-input__text::placeholder, .vsa-input__file::placeholder {
      color: #999082; }
    .a11y-inv-c .vsa-input__select, .a11y-inv-c .vsa-input__text, .a11y-inv-c .vsa-input__file {
      border-color: #ff0 !important; }
    .vsa-input__select:focus, .vsa-input__text:focus, .vsa-input__file:focus {
      border-color: #ea5330; }
      .a11y-high-c .vsa-input__select:focus, .a11y-high-c .vsa-input__text:focus, .a11y-high-c .vsa-input__file:focus {
        border-color: #b51742; }
      .a11y-inv-c .vsa-input__select:focus, .a11y-inv-c .vsa-input__text:focus, .a11y-inv-c .vsa-input__file:focus {
        border-width: 3px; }
    .vsa-input__select:hover, .vsa-input__text:hover, .vsa-input__file:hover {
      border-color: rgba(234, 83, 48, 0.8); }
    .vsa-input__select:disabled, .vsa-input__text:disabled, .vsa-input__file:disabled {
      background: rgba(245, 245, 245, 0.89);
      color: #ecedeb ;
      border-color: #ecedeb;
      cursor: default;
      z-index: 1;
      color: #999082; }
      .a11y-high-c .vsa-input__select:disabled, .a11y-high-c .vsa-input__text:disabled, .a11y-high-c .vsa-input__file:disabled {
        color: #000 ; }
      .vsa-input__select:disabled::placeholder, .vsa-input__text:disabled::placeholder, .vsa-input__file:disabled::placeholder {
        color: #999082 ; }
        .a11y-high-c .vsa-input__select:disabled::placeholder, .a11y-high-c .vsa-input__text:disabled::placeholder, .a11y-high-c .vsa-input__file:disabled::placeholder {
          color: #000 ; }
      .a11y-inv-c .vsa-input__select:disabled, .a11y-inv-c .vsa-input__text:disabled, .a11y-inv-c .vsa-input__file:disabled {
        background: rgba(255, 255, 0, 0.3);
        color: rgba(255, 255, 0, 0.7); }
    .a11y-high-c .vsa-input__select, .a11y-high-c .vsa-input__text, .a11y-high-c .vsa-input__file {
      border-color: #645c51; }
  .vsa-input__select {
    padding-right: 2.45em;
    appearance: none;
    cursor: pointer; }
    .vsa-input__select:-moz-focusring {
      color: transparent;
      text-shadow: 0 0 0 #ea5330; }
    .vsa-input__select::-ms-expand {
      display: none; }
  .vsa-input__text:-ms-input-placeholder {
    color: #999082 ; }
    .a11y-high-c .vsa-input__text:-ms-input-placeholder {
      color: #7b7162 ; }
  .vsa-input__text::-ms-clear {
    display: none; }
  .vsa-input__file {
    padding: 0.66em; }

/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
Mixins

Installation :
`@import "/css-tools/mixins";`

Styleguide 8.0
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
arrow-lazy()

```css
.tooltip {
  position: relative;
  display: inline-block;
  ...
  @include arrow-lazy($size:0.5em, $color: $COLOR_PRIMARY);
}
```

<b>Paramètres</b><br>
$direction: top, $size: 1em, $color: #ccc, $color-highlight:"", $center: 50%, $margin: -1px, $pseudo: before

Markup:
<div class="tooltip">Tooltip</div>

Styleguide 8.1
*/
/*
focus()

Applique le style focus

```css
.test-button {
  @include focus($color: $COLOR_PRIMARY, $offset: -0.5em);
}
```

<b>Paramètres par défaut</b><br>
$color: #FFF, $opacity: 0.8, $offset: 3px, $width: thin, $style: dotted, $important: ''

Markup:
<button class="test-button">Button</div>

Styleguide 8.2
*/
/*
pseudoFocus

Applique le style focus sur un pseudo élément quand l'effet focus sur l'outline pose problème

```css
.tricky-focus {
  position: relative;
  &:focus { outline:0;}
  @include pseudoFocus($color: $COLOR_PRIMARY, $right: -5em, $top: -0.3em, $left: -0.3em, $bottom: -0.3em);
}
```

<b>Paramètres</b><br>
$pseudo: after, $top: -0.5em, $right: -0.5em, $bottom: -0.5em, $left: -0.5em, $color: #FFF, $opacity: 0.8, $style-line: dotted, $width: 1px

Markup:
<button class="test-button ico-train tricky-focus"><span>train</span></button>
<span>focus un peu tricky</span>

Styleguide 8.3
*/
/*
em()

Convertisseur pixel vers em

```css
.font-24-pixel { font-size: em(24); }
.font-16-pixel { font-size: em(16); }
.font-12-pixel { font-size: em(12); }
```

Markup:
<p class="font-24-pixel">24 pixels</p>
<p class="font-16-pixel">16 pixels</p>
<p class="font-12-pixel">12 pixels</p>

Styleguide 8.4
*/
/*
color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-color-title { @include color($COLOR_PRIMARY); }
.mixin-color-subtitle { @include color($COLOR_PETITS_PRIX, '', !important); }
.mixin-color-subtitle-2 { @include color( $color: #db70e6, $color-high: #830790, $important: '!important'); }
.mixin-color-subtitle-3 { @include color($color: #f97230, $color-high: 30%); }
```

Markup:
<div class="mixin-color-title">Titre 1</div>
<div class="mixin-color-subtitle">Sous-titre 1</div>
<div class="mixin-color-subtitle-2">Sous-titre 2</div>
<div class="mixin-color-subtitle-3">Sous-titre 3</div>

Styleguide 8.5
*/
/*
border-color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.
 - $alpha (optionnel) : rajoute le mode rgba. Si aucune valeur n'est entrée, le couleur passe en mode rgb, donc pas de transparence

```css
.mixin-bdcolor-1 { border:3px solid; @include border-color($COLOR_PRIMARY); }

.mixin-bdcolor-2 { border:3px solid; @include border-color($COLOR_OUIGO); }

.mixin-bdcolor-3 { border:3px solid; @include border-color($color: #73f351, $color-high: #329c15); }

.mixin-bdcolor-4 { border:3px solid; @include border-color($color: #51d7f3, $color-high: 20%); }

.mixin-bdcolor-5 { border:3px solid; @include border-color($color: $COLOR_PRIMARY, $alpha: 0.3); }
```

Markup:
<div class="block mixin-bdcolor-1">Block 1</div>
<div class="block mixin-bdcolor-2">Block 2</div>
<div class="block mixin-bdcolor-3">Block 3</div>
<div class="block mixin-bdcolor-4">Block 4</div>
<div class="block mixin-bdcolor-5">Block 5</div>

Styleguide 8.6
*/
/*
background-color()

Mixin pour gérer les contrastes accentués des couleurs en background. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-bgcolor-1 { @include background-color($COLOR_PRIMARY); }
.mixin-bgcolor-2 { @include background-color($COLOR_OUIGO); }
.mixin-bgcolor-3 { @include background-color($color: #73f351, $color-high: #329c15); }
.mixin-bgcolor-4 { @include background-color($color: #51d7f3, $color-high: 20%); }
```

Markup:
<div class="block mixin-bgcolor-1">Block 1</div>
<div class="block mixin-bgcolor-2">Block 2</div>
<div class="block mixin-bgcolor-3">Block 3</div>
<div class="block mixin-bgcolor-4">Block 4</div>

Styleguide 8.7
*/
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
fill()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c, la couleur est tirée de la map $ALT_COLORS.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Par défaut, on récupère la valeur correspondante dans la table ALT COLORS
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-fill-1 {
  @include fill($COLOR_PRIMARY);
}
.mixin-fill-2 {
  @include fill(#51d7f3, #3858ee);
}
.mixin-fill-3 {
  @include fill($COLOR_PETITS_PRIX, 20%);
}
```

Markup:
<div class="mixin-fill-1">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-2">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-3">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>

Styleguide 8.8
*/
/*
background-linear-gradient()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11y-high-c, la couleur est tirée de la map $ALT_COLORS.

Paramètres :
- $gradient-start : obligatoire, on peut utiliser une oui-colors
- $gradient-end : obligatoire, on peut utiliser une oui-colors
- direction (optionnel, par défaut : "to right")
- $darken (optionnel) : un pourcentage. Si l'argument est utilisé, il remplace les couleurs de substitution
- !important (optionnel)

```css
.mixin-background-linear-gradient {
  @include background-linear-gradient($COLOR_PRIMARY, $COLOR_SECONDARY);
  ...
}
.mixin-background-linear-gradient-darken {
  @include background-linear-gradient(#cc7b27, #e2bd97, $direction: 'to bottom', $darken: 30%);
  ...
}
```

Markup:
<div class="block mixin-background-linear-gradient"></div>
<div class="block mixin-background-linear-gradient-darken"></div>

Styleguide 8.10
*/
/* a11y-line-spacing() */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
breakpoint()

Mixin pour les mediaqueries.

Paramètres :
- $grid : obligatoire, si vous avez importer grid/global, vous pouvez utiliser les valeurs suivantes :
- $small-up : tous les écrans
- $medium-up : > 40em
- $large-up : > 54em

```css
.mixin-breakpoint {
  @include breakpoint($small-up) { // totalement facultatif
    background-color: $COLOR_PRIMARY;
  }
  @include breakpoint($medium-up) {
    background-color: $COLOR_SKIN_LIGHT;
  }
  @include breakpoint($large-up) {
    background-color: $COLOR_SECONDARY;
  }
}
```

Markup:
<div class="mixin-breakpoint"></div>

Styleguide 8.11
*/
/*
radioColorCustom()

Mixin pour les couleurs appliquées sur les radio & checkbox.

Paramètres :
- $inputColor : Couleur de l'input
- $inputColorHighC : (optionel) Couleur de l'input en contrasts accentués



```css
.radio-color-mea {
  @include radioColorCustom($COLOR_MEA_POSITIF);
}

.radio-color-custom {
  @include radioColorCustom(#594fd2, #090352);
}
```

Markup:
<div class="block">
  <p>Using MEA positive color</p>
  <label for="test-mea-1" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-mea-2" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-mea-3" class="vsc__radio radio-color-mea vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-mea-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>
<div class="block">
  <p>Using custom colors</p>
  <label for="test-custom-1" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-custom-2" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-custom-3" class="vsc__radio radio-color-custom vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-custom-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>

Styleguide 8.12
*/
/*
buttonColorCustom()

Permet de surcharger de la couleur d'un CTA conformément à la charte.

Paramètres :
- $color : couleur, obligatoirement issue des [Oui Colors](section-9.html#kssref-9-2), ou une [Custom Color](section-9.html#kssref-9-4).
- $secondary : false par défaut ; pour générer un style de bouton secondaire (bordure de couleur, fond blanc)

```css

@import "../../mixins";
@import "../../colors/oui-colors";

@include export('button--info') {
  .\$code-app {
    &-button {
      &--info {
        @include buttonColorCustom($color:$COLOR_MEA_INFO);
      }
    }
  }
}
```

N.B. supprimez le \ dans le code ci-dessus , qui a été rajouté pour contourner un problème de compilation sass.

Exemples d'usage du mixin :
- [vsc-button--smallPrice](section-6.html#vsc-button--smallPrice)
- [vsc-button--smallPrice-secondary](section-6.html#vsc-button--smallPrice-secondary)
- [vsc-button--info](section-6.html#vsc-button--info)
- [vsc-button--info-secondary](section-6.html#vsc-button--info-secondary)

Styleguide 8.13
*/
/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
Mixins

Installation :
`@import "/css-tools/mixins";`

Styleguide 8.0
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
arrow-lazy()

```css
.tooltip {
  position: relative;
  display: inline-block;
  ...
  @include arrow-lazy($size:0.5em, $color: $COLOR_PRIMARY);
}
```

<b>Paramètres</b><br>
$direction: top, $size: 1em, $color: #ccc, $color-highlight:"", $center: 50%, $margin: -1px, $pseudo: before

Markup:
<div class="tooltip">Tooltip</div>

Styleguide 8.1
*/
/*
focus()

Applique le style focus

```css
.test-button {
  @include focus($color: $COLOR_PRIMARY, $offset: -0.5em);
}
```

<b>Paramètres par défaut</b><br>
$color: #FFF, $opacity: 0.8, $offset: 3px, $width: thin, $style: dotted, $important: ''

Markup:
<button class="test-button">Button</div>

Styleguide 8.2
*/
/*
pseudoFocus

Applique le style focus sur un pseudo élément quand l'effet focus sur l'outline pose problème

```css
.tricky-focus {
  position: relative;
  &:focus { outline:0;}
  @include pseudoFocus($color: $COLOR_PRIMARY, $right: -5em, $top: -0.3em, $left: -0.3em, $bottom: -0.3em);
}
```

<b>Paramètres</b><br>
$pseudo: after, $top: -0.5em, $right: -0.5em, $bottom: -0.5em, $left: -0.5em, $color: #FFF, $opacity: 0.8, $style-line: dotted, $width: 1px

Markup:
<button class="test-button ico-train tricky-focus"><span>train</span></button>
<span>focus un peu tricky</span>

Styleguide 8.3
*/
/*
em()

Convertisseur pixel vers em

```css
.font-24-pixel { font-size: em(24); }
.font-16-pixel { font-size: em(16); }
.font-12-pixel { font-size: em(12); }
```

Markup:
<p class="font-24-pixel">24 pixels</p>
<p class="font-16-pixel">16 pixels</p>
<p class="font-12-pixel">12 pixels</p>

Styleguide 8.4
*/
/*
color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-color-title { @include color($COLOR_PRIMARY); }
.mixin-color-subtitle { @include color($COLOR_PETITS_PRIX, '', !important); }
.mixin-color-subtitle-2 { @include color( $color: #db70e6, $color-high: #830790, $important: '!important'); }
.mixin-color-subtitle-3 { @include color($color: #f97230, $color-high: 30%); }
```

Markup:
<div class="mixin-color-title">Titre 1</div>
<div class="mixin-color-subtitle">Sous-titre 1</div>
<div class="mixin-color-subtitle-2">Sous-titre 2</div>
<div class="mixin-color-subtitle-3">Sous-titre 3</div>

Styleguide 8.5
*/
/*
border-color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.
 - $alpha (optionnel) : rajoute le mode rgba. Si aucune valeur n'est entrée, le couleur passe en mode rgb, donc pas de transparence

```css
.mixin-bdcolor-1 { border:3px solid; @include border-color($COLOR_PRIMARY); }

.mixin-bdcolor-2 { border:3px solid; @include border-color($COLOR_OUIGO); }

.mixin-bdcolor-3 { border:3px solid; @include border-color($color: #73f351, $color-high: #329c15); }

.mixin-bdcolor-4 { border:3px solid; @include border-color($color: #51d7f3, $color-high: 20%); }

.mixin-bdcolor-5 { border:3px solid; @include border-color($color: $COLOR_PRIMARY, $alpha: 0.3); }
```

Markup:
<div class="block mixin-bdcolor-1">Block 1</div>
<div class="block mixin-bdcolor-2">Block 2</div>
<div class="block mixin-bdcolor-3">Block 3</div>
<div class="block mixin-bdcolor-4">Block 4</div>
<div class="block mixin-bdcolor-5">Block 5</div>

Styleguide 8.6
*/
/*
background-color()

Mixin pour gérer les contrastes accentués des couleurs en background. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-bgcolor-1 { @include background-color($COLOR_PRIMARY); }
.mixin-bgcolor-2 { @include background-color($COLOR_OUIGO); }
.mixin-bgcolor-3 { @include background-color($color: #73f351, $color-high: #329c15); }
.mixin-bgcolor-4 { @include background-color($color: #51d7f3, $color-high: 20%); }
```

Markup:
<div class="block mixin-bgcolor-1">Block 1</div>
<div class="block mixin-bgcolor-2">Block 2</div>
<div class="block mixin-bgcolor-3">Block 3</div>
<div class="block mixin-bgcolor-4">Block 4</div>

Styleguide 8.7
*/
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
fill()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c, la couleur est tirée de la map $ALT_COLORS.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Par défaut, on récupère la valeur correspondante dans la table ALT COLORS
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-fill-1 {
  @include fill($COLOR_PRIMARY);
}
.mixin-fill-2 {
  @include fill(#51d7f3, #3858ee);
}
.mixin-fill-3 {
  @include fill($COLOR_PETITS_PRIX, 20%);
}
```

Markup:
<div class="mixin-fill-1">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-2">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-3">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>

Styleguide 8.8
*/
/*
background-linear-gradient()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11y-high-c, la couleur est tirée de la map $ALT_COLORS.

Paramètres :
- $gradient-start : obligatoire, on peut utiliser une oui-colors
- $gradient-end : obligatoire, on peut utiliser une oui-colors
- direction (optionnel, par défaut : "to right")
- $darken (optionnel) : un pourcentage. Si l'argument est utilisé, il remplace les couleurs de substitution
- !important (optionnel)

```css
.mixin-background-linear-gradient {
  @include background-linear-gradient($COLOR_PRIMARY, $COLOR_SECONDARY);
  ...
}
.mixin-background-linear-gradient-darken {
  @include background-linear-gradient(#cc7b27, #e2bd97, $direction: 'to bottom', $darken: 30%);
  ...
}
```

Markup:
<div class="block mixin-background-linear-gradient"></div>
<div class="block mixin-background-linear-gradient-darken"></div>

Styleguide 8.10
*/
/* a11y-line-spacing() */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
breakpoint()

Mixin pour les mediaqueries.

Paramètres :
- $grid : obligatoire, si vous avez importer grid/global, vous pouvez utiliser les valeurs suivantes :
- $small-up : tous les écrans
- $medium-up : > 40em
- $large-up : > 54em

```css
.mixin-breakpoint {
  @include breakpoint($small-up) { // totalement facultatif
    background-color: $COLOR_PRIMARY;
  }
  @include breakpoint($medium-up) {
    background-color: $COLOR_SKIN_LIGHT;
  }
  @include breakpoint($large-up) {
    background-color: $COLOR_SECONDARY;
  }
}
```

Markup:
<div class="mixin-breakpoint"></div>

Styleguide 8.11
*/
/*
radioColorCustom()

Mixin pour les couleurs appliquées sur les radio & checkbox.

Paramètres :
- $inputColor : Couleur de l'input
- $inputColorHighC : (optionel) Couleur de l'input en contrasts accentués



```css
.radio-color-mea {
  @include radioColorCustom($COLOR_MEA_POSITIF);
}

.radio-color-custom {
  @include radioColorCustom(#594fd2, #090352);
}
```

Markup:
<div class="block">
  <p>Using MEA positive color</p>
  <label for="test-mea-1" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-mea-2" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-mea-3" class="vsc__radio radio-color-mea vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-mea-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>
<div class="block">
  <p>Using custom colors</p>
  <label for="test-custom-1" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-custom-2" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-custom-3" class="vsc__radio radio-color-custom vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-custom-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>

Styleguide 8.12
*/
/*
buttonColorCustom()

Permet de surcharger de la couleur d'un CTA conformément à la charte.

Paramètres :
- $color : couleur, obligatoirement issue des [Oui Colors](section-9.html#kssref-9-2), ou une [Custom Color](section-9.html#kssref-9-4).
- $secondary : false par défaut ; pour générer un style de bouton secondaire (bordure de couleur, fond blanc)

```css

@import "../../mixins";
@import "../../colors/oui-colors";

@include export('button--info') {
  .\$code-app {
    &-button {
      &--info {
        @include buttonColorCustom($color:$COLOR_MEA_INFO);
      }
    }
  }
}
```

N.B. supprimez le \ dans le code ci-dessus , qui a été rajouté pour contourner un problème de compilation sass.

Exemples d'usage du mixin :
- [vsc-button--smallPrice](section-6.html#vsc-button--smallPrice)
- [vsc-button--smallPrice-secondary](section-6.html#vsc-button--smallPrice-secondary)
- [vsc-button--info](section-6.html#vsc-button--info)
- [vsc-button--info-secondary](section-6.html#vsc-button--info-secondary)

Styleguide 8.13
*/
.vsa-input--noborder .vsa-input__select, .vsa-input--noborder .vsa-input__text {
  border: 1px solid transparent; }
  .a11y-high-c .vsa-input--noborder .vsa-input__select, .a11y-high-c .vsa-input--noborder .vsa-input__text {
    border-color: #ea5330; }
  .vsa-input--noborder .vsa-input__select:hover, .vsa-input--noborder .vsa-input__text:hover {
    border-color: rgba(234, 83, 48, 0.8); }
  .vsa-input--noborder .vsa-input__select:focus, .vsa-input--noborder .vsa-input__text:focus {
    border-color: rgba(234, 83, 48, 0.5); }
    .a11y-high-c .vsa-input--noborder .vsa-input__select:focus, .a11y-high-c .vsa-input--noborder .vsa-input__text:focus {
      border-color: #b51742; }

/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
Mixins

Installation :
`@import "/css-tools/mixins";`

Styleguide 8.0
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
arrow-lazy()

```css
.tooltip {
  position: relative;
  display: inline-block;
  ...
  @include arrow-lazy($size:0.5em, $color: $COLOR_PRIMARY);
}
```

<b>Paramètres</b><br>
$direction: top, $size: 1em, $color: #ccc, $color-highlight:"", $center: 50%, $margin: -1px, $pseudo: before

Markup:
<div class="tooltip">Tooltip</div>

Styleguide 8.1
*/
/*
focus()

Applique le style focus

```css
.test-button {
  @include focus($color: $COLOR_PRIMARY, $offset: -0.5em);
}
```

<b>Paramètres par défaut</b><br>
$color: #FFF, $opacity: 0.8, $offset: 3px, $width: thin, $style: dotted, $important: ''

Markup:
<button class="test-button">Button</div>

Styleguide 8.2
*/
/*
pseudoFocus

Applique le style focus sur un pseudo élément quand l'effet focus sur l'outline pose problème

```css
.tricky-focus {
  position: relative;
  &:focus { outline:0;}
  @include pseudoFocus($color: $COLOR_PRIMARY, $right: -5em, $top: -0.3em, $left: -0.3em, $bottom: -0.3em);
}
```

<b>Paramètres</b><br>
$pseudo: after, $top: -0.5em, $right: -0.5em, $bottom: -0.5em, $left: -0.5em, $color: #FFF, $opacity: 0.8, $style-line: dotted, $width: 1px

Markup:
<button class="test-button ico-train tricky-focus"><span>train</span></button>
<span>focus un peu tricky</span>

Styleguide 8.3
*/
/*
em()

Convertisseur pixel vers em

```css
.font-24-pixel { font-size: em(24); }
.font-16-pixel { font-size: em(16); }
.font-12-pixel { font-size: em(12); }
```

Markup:
<p class="font-24-pixel">24 pixels</p>
<p class="font-16-pixel">16 pixels</p>
<p class="font-12-pixel">12 pixels</p>

Styleguide 8.4
*/
/*
color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-color-title { @include color($COLOR_PRIMARY); }
.mixin-color-subtitle { @include color($COLOR_PETITS_PRIX, '', !important); }
.mixin-color-subtitle-2 { @include color( $color: #db70e6, $color-high: #830790, $important: '!important'); }
.mixin-color-subtitle-3 { @include color($color: #f97230, $color-high: 30%); }
```

Markup:
<div class="mixin-color-title">Titre 1</div>
<div class="mixin-color-subtitle">Sous-titre 1</div>
<div class="mixin-color-subtitle-2">Sous-titre 2</div>
<div class="mixin-color-subtitle-3">Sous-titre 3</div>

Styleguide 8.5
*/
/*
border-color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.
 - $alpha (optionnel) : rajoute le mode rgba. Si aucune valeur n'est entrée, le couleur passe en mode rgb, donc pas de transparence

```css
.mixin-bdcolor-1 { border:3px solid; @include border-color($COLOR_PRIMARY); }

.mixin-bdcolor-2 { border:3px solid; @include border-color($COLOR_OUIGO); }

.mixin-bdcolor-3 { border:3px solid; @include border-color($color: #73f351, $color-high: #329c15); }

.mixin-bdcolor-4 { border:3px solid; @include border-color($color: #51d7f3, $color-high: 20%); }

.mixin-bdcolor-5 { border:3px solid; @include border-color($color: $COLOR_PRIMARY, $alpha: 0.3); }
```

Markup:
<div class="block mixin-bdcolor-1">Block 1</div>
<div class="block mixin-bdcolor-2">Block 2</div>
<div class="block mixin-bdcolor-3">Block 3</div>
<div class="block mixin-bdcolor-4">Block 4</div>
<div class="block mixin-bdcolor-5">Block 5</div>

Styleguide 8.6
*/
/*
background-color()

Mixin pour gérer les contrastes accentués des couleurs en background. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-bgcolor-1 { @include background-color($COLOR_PRIMARY); }
.mixin-bgcolor-2 { @include background-color($COLOR_OUIGO); }
.mixin-bgcolor-3 { @include background-color($color: #73f351, $color-high: #329c15); }
.mixin-bgcolor-4 { @include background-color($color: #51d7f3, $color-high: 20%); }
```

Markup:
<div class="block mixin-bgcolor-1">Block 1</div>
<div class="block mixin-bgcolor-2">Block 2</div>
<div class="block mixin-bgcolor-3">Block 3</div>
<div class="block mixin-bgcolor-4">Block 4</div>

Styleguide 8.7
*/
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
fill()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c, la couleur est tirée de la map $ALT_COLORS.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Par défaut, on récupère la valeur correspondante dans la table ALT COLORS
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-fill-1 {
  @include fill($COLOR_PRIMARY);
}
.mixin-fill-2 {
  @include fill(#51d7f3, #3858ee);
}
.mixin-fill-3 {
  @include fill($COLOR_PETITS_PRIX, 20%);
}
```

Markup:
<div class="mixin-fill-1">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-2">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-3">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>

Styleguide 8.8
*/
/*
background-linear-gradient()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11y-high-c, la couleur est tirée de la map $ALT_COLORS.

Paramètres :
- $gradient-start : obligatoire, on peut utiliser une oui-colors
- $gradient-end : obligatoire, on peut utiliser une oui-colors
- direction (optionnel, par défaut : "to right")
- $darken (optionnel) : un pourcentage. Si l'argument est utilisé, il remplace les couleurs de substitution
- !important (optionnel)

```css
.mixin-background-linear-gradient {
  @include background-linear-gradient($COLOR_PRIMARY, $COLOR_SECONDARY);
  ...
}
.mixin-background-linear-gradient-darken {
  @include background-linear-gradient(#cc7b27, #e2bd97, $direction: 'to bottom', $darken: 30%);
  ...
}
```

Markup:
<div class="block mixin-background-linear-gradient"></div>
<div class="block mixin-background-linear-gradient-darken"></div>

Styleguide 8.10
*/
/* a11y-line-spacing() */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
breakpoint()

Mixin pour les mediaqueries.

Paramètres :
- $grid : obligatoire, si vous avez importer grid/global, vous pouvez utiliser les valeurs suivantes :
- $small-up : tous les écrans
- $medium-up : > 40em
- $large-up : > 54em

```css
.mixin-breakpoint {
  @include breakpoint($small-up) { // totalement facultatif
    background-color: $COLOR_PRIMARY;
  }
  @include breakpoint($medium-up) {
    background-color: $COLOR_SKIN_LIGHT;
  }
  @include breakpoint($large-up) {
    background-color: $COLOR_SECONDARY;
  }
}
```

Markup:
<div class="mixin-breakpoint"></div>

Styleguide 8.11
*/
/*
radioColorCustom()

Mixin pour les couleurs appliquées sur les radio & checkbox.

Paramètres :
- $inputColor : Couleur de l'input
- $inputColorHighC : (optionel) Couleur de l'input en contrasts accentués



```css
.radio-color-mea {
  @include radioColorCustom($COLOR_MEA_POSITIF);
}

.radio-color-custom {
  @include radioColorCustom(#594fd2, #090352);
}
```

Markup:
<div class="block">
  <p>Using MEA positive color</p>
  <label for="test-mea-1" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-mea-2" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-mea-3" class="vsc__radio radio-color-mea vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-mea-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>
<div class="block">
  <p>Using custom colors</p>
  <label for="test-custom-1" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-custom-2" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-custom-3" class="vsc__radio radio-color-custom vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-custom-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>

Styleguide 8.12
*/
/*
buttonColorCustom()

Permet de surcharger de la couleur d'un CTA conformément à la charte.

Paramètres :
- $color : couleur, obligatoirement issue des [Oui Colors](section-9.html#kssref-9-2), ou une [Custom Color](section-9.html#kssref-9-4).
- $secondary : false par défaut ; pour générer un style de bouton secondaire (bordure de couleur, fond blanc)

```css

@import "../../mixins";
@import "../../colors/oui-colors";

@include export('button--info') {
  .\$code-app {
    &-button {
      &--info {
        @include buttonColorCustom($color:$COLOR_MEA_INFO);
      }
    }
  }
}
```

N.B. supprimez le \ dans le code ci-dessus , qui a été rajouté pour contourner un problème de compilation sass.

Exemples d'usage du mixin :
- [vsc-button--smallPrice](section-6.html#vsc-button--smallPrice)
- [vsc-button--smallPrice-secondary](section-6.html#vsc-button--smallPrice-secondary)
- [vsc-button--info](section-6.html#vsc-button--info)
- [vsc-button--info-secondary](section-6.html#vsc-button--info-secondary)

Styleguide 8.13
*/
/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
Mixins

Installation :
`@import "/css-tools/mixins";`

Styleguide 8.0
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
arrow-lazy()

```css
.tooltip {
  position: relative;
  display: inline-block;
  ...
  @include arrow-lazy($size:0.5em, $color: $COLOR_PRIMARY);
}
```

<b>Paramètres</b><br>
$direction: top, $size: 1em, $color: #ccc, $color-highlight:"", $center: 50%, $margin: -1px, $pseudo: before

Markup:
<div class="tooltip">Tooltip</div>

Styleguide 8.1
*/
/*
focus()

Applique le style focus

```css
.test-button {
  @include focus($color: $COLOR_PRIMARY, $offset: -0.5em);
}
```

<b>Paramètres par défaut</b><br>
$color: #FFF, $opacity: 0.8, $offset: 3px, $width: thin, $style: dotted, $important: ''

Markup:
<button class="test-button">Button</div>

Styleguide 8.2
*/
/*
pseudoFocus

Applique le style focus sur un pseudo élément quand l'effet focus sur l'outline pose problème

```css
.tricky-focus {
  position: relative;
  &:focus { outline:0;}
  @include pseudoFocus($color: $COLOR_PRIMARY, $right: -5em, $top: -0.3em, $left: -0.3em, $bottom: -0.3em);
}
```

<b>Paramètres</b><br>
$pseudo: after, $top: -0.5em, $right: -0.5em, $bottom: -0.5em, $left: -0.5em, $color: #FFF, $opacity: 0.8, $style-line: dotted, $width: 1px

Markup:
<button class="test-button ico-train tricky-focus"><span>train</span></button>
<span>focus un peu tricky</span>

Styleguide 8.3
*/
/*
em()

Convertisseur pixel vers em

```css
.font-24-pixel { font-size: em(24); }
.font-16-pixel { font-size: em(16); }
.font-12-pixel { font-size: em(12); }
```

Markup:
<p class="font-24-pixel">24 pixels</p>
<p class="font-16-pixel">16 pixels</p>
<p class="font-12-pixel">12 pixels</p>

Styleguide 8.4
*/
/*
color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-color-title { @include color($COLOR_PRIMARY); }
.mixin-color-subtitle { @include color($COLOR_PETITS_PRIX, '', !important); }
.mixin-color-subtitle-2 { @include color( $color: #db70e6, $color-high: #830790, $important: '!important'); }
.mixin-color-subtitle-3 { @include color($color: #f97230, $color-high: 30%); }
```

Markup:
<div class="mixin-color-title">Titre 1</div>
<div class="mixin-color-subtitle">Sous-titre 1</div>
<div class="mixin-color-subtitle-2">Sous-titre 2</div>
<div class="mixin-color-subtitle-3">Sous-titre 3</div>

Styleguide 8.5
*/
/*
border-color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.
 - $alpha (optionnel) : rajoute le mode rgba. Si aucune valeur n'est entrée, le couleur passe en mode rgb, donc pas de transparence

```css
.mixin-bdcolor-1 { border:3px solid; @include border-color($COLOR_PRIMARY); }

.mixin-bdcolor-2 { border:3px solid; @include border-color($COLOR_OUIGO); }

.mixin-bdcolor-3 { border:3px solid; @include border-color($color: #73f351, $color-high: #329c15); }

.mixin-bdcolor-4 { border:3px solid; @include border-color($color: #51d7f3, $color-high: 20%); }

.mixin-bdcolor-5 { border:3px solid; @include border-color($color: $COLOR_PRIMARY, $alpha: 0.3); }
```

Markup:
<div class="block mixin-bdcolor-1">Block 1</div>
<div class="block mixin-bdcolor-2">Block 2</div>
<div class="block mixin-bdcolor-3">Block 3</div>
<div class="block mixin-bdcolor-4">Block 4</div>
<div class="block mixin-bdcolor-5">Block 5</div>

Styleguide 8.6
*/
/*
background-color()

Mixin pour gérer les contrastes accentués des couleurs en background. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-bgcolor-1 { @include background-color($COLOR_PRIMARY); }
.mixin-bgcolor-2 { @include background-color($COLOR_OUIGO); }
.mixin-bgcolor-3 { @include background-color($color: #73f351, $color-high: #329c15); }
.mixin-bgcolor-4 { @include background-color($color: #51d7f3, $color-high: 20%); }
```

Markup:
<div class="block mixin-bgcolor-1">Block 1</div>
<div class="block mixin-bgcolor-2">Block 2</div>
<div class="block mixin-bgcolor-3">Block 3</div>
<div class="block mixin-bgcolor-4">Block 4</div>

Styleguide 8.7
*/
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
fill()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c, la couleur est tirée de la map $ALT_COLORS.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Par défaut, on récupère la valeur correspondante dans la table ALT COLORS
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-fill-1 {
  @include fill($COLOR_PRIMARY);
}
.mixin-fill-2 {
  @include fill(#51d7f3, #3858ee);
}
.mixin-fill-3 {
  @include fill($COLOR_PETITS_PRIX, 20%);
}
```

Markup:
<div class="mixin-fill-1">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-2">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-3">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>

Styleguide 8.8
*/
/*
background-linear-gradient()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11y-high-c, la couleur est tirée de la map $ALT_COLORS.

Paramètres :
- $gradient-start : obligatoire, on peut utiliser une oui-colors
- $gradient-end : obligatoire, on peut utiliser une oui-colors
- direction (optionnel, par défaut : "to right")
- $darken (optionnel) : un pourcentage. Si l'argument est utilisé, il remplace les couleurs de substitution
- !important (optionnel)

```css
.mixin-background-linear-gradient {
  @include background-linear-gradient($COLOR_PRIMARY, $COLOR_SECONDARY);
  ...
}
.mixin-background-linear-gradient-darken {
  @include background-linear-gradient(#cc7b27, #e2bd97, $direction: 'to bottom', $darken: 30%);
  ...
}
```

Markup:
<div class="block mixin-background-linear-gradient"></div>
<div class="block mixin-background-linear-gradient-darken"></div>

Styleguide 8.10
*/
/* a11y-line-spacing() */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
breakpoint()

Mixin pour les mediaqueries.

Paramètres :
- $grid : obligatoire, si vous avez importer grid/global, vous pouvez utiliser les valeurs suivantes :
- $small-up : tous les écrans
- $medium-up : > 40em
- $large-up : > 54em

```css
.mixin-breakpoint {
  @include breakpoint($small-up) { // totalement facultatif
    background-color: $COLOR_PRIMARY;
  }
  @include breakpoint($medium-up) {
    background-color: $COLOR_SKIN_LIGHT;
  }
  @include breakpoint($large-up) {
    background-color: $COLOR_SECONDARY;
  }
}
```

Markup:
<div class="mixin-breakpoint"></div>

Styleguide 8.11
*/
/*
radioColorCustom()

Mixin pour les couleurs appliquées sur les radio & checkbox.

Paramètres :
- $inputColor : Couleur de l'input
- $inputColorHighC : (optionel) Couleur de l'input en contrasts accentués



```css
.radio-color-mea {
  @include radioColorCustom($COLOR_MEA_POSITIF);
}

.radio-color-custom {
  @include radioColorCustom(#594fd2, #090352);
}
```

Markup:
<div class="block">
  <p>Using MEA positive color</p>
  <label for="test-mea-1" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-mea-2" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-mea-3" class="vsc__radio radio-color-mea vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-mea-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>
<div class="block">
  <p>Using custom colors</p>
  <label for="test-custom-1" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-custom-2" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-custom-3" class="vsc__radio radio-color-custom vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-custom-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>

Styleguide 8.12
*/
/*
buttonColorCustom()

Permet de surcharger de la couleur d'un CTA conformément à la charte.

Paramètres :
- $color : couleur, obligatoirement issue des [Oui Colors](section-9.html#kssref-9-2), ou une [Custom Color](section-9.html#kssref-9-4).
- $secondary : false par défaut ; pour générer un style de bouton secondaire (bordure de couleur, fond blanc)

```css

@import "../../mixins";
@import "../../colors/oui-colors";

@include export('button--info') {
  .\$code-app {
    &-button {
      &--info {
        @include buttonColorCustom($color:$COLOR_MEA_INFO);
      }
    }
  }
}
```

N.B. supprimez le \ dans le code ci-dessus , qui a été rajouté pour contourner un problème de compilation sass.

Exemples d'usage du mixin :
- [vsc-button--smallPrice](section-6.html#vsc-button--smallPrice)
- [vsc-button--smallPrice-secondary](section-6.html#vsc-button--smallPrice-secondary)
- [vsc-button--info](section-6.html#vsc-button--info)
- [vsc-button--info-secondary](section-6.html#vsc-button--info-secondary)

Styleguide 8.13
*/
.vsa-input--inline {
  display: table;
  width: 100%; }
  .vsa-input--inline .vsa-input__label {
    display: table-cell;
    margin: 0;
    padding: 0;
    width: 0.1em;
    padding-right: 0.5em;
    vertical-align: middle; }
  .vsa-input--inline .vsa-input__select, .vsa-input--inline .vsa-input__text {
    display: table-cell;
    width: 100%;
    vertical-align: middle; }

/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
Mixins

Installation :
`@import "/css-tools/mixins";`

Styleguide 8.0
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
arrow-lazy()

```css
.tooltip {
  position: relative;
  display: inline-block;
  ...
  @include arrow-lazy($size:0.5em, $color: $COLOR_PRIMARY);
}
```

<b>Paramètres</b><br>
$direction: top, $size: 1em, $color: #ccc, $color-highlight:"", $center: 50%, $margin: -1px, $pseudo: before

Markup:
<div class="tooltip">Tooltip</div>

Styleguide 8.1
*/
/*
focus()

Applique le style focus

```css
.test-button {
  @include focus($color: $COLOR_PRIMARY, $offset: -0.5em);
}
```

<b>Paramètres par défaut</b><br>
$color: #FFF, $opacity: 0.8, $offset: 3px, $width: thin, $style: dotted, $important: ''

Markup:
<button class="test-button">Button</div>

Styleguide 8.2
*/
/*
pseudoFocus

Applique le style focus sur un pseudo élément quand l'effet focus sur l'outline pose problème

```css
.tricky-focus {
  position: relative;
  &:focus { outline:0;}
  @include pseudoFocus($color: $COLOR_PRIMARY, $right: -5em, $top: -0.3em, $left: -0.3em, $bottom: -0.3em);
}
```

<b>Paramètres</b><br>
$pseudo: after, $top: -0.5em, $right: -0.5em, $bottom: -0.5em, $left: -0.5em, $color: #FFF, $opacity: 0.8, $style-line: dotted, $width: 1px

Markup:
<button class="test-button ico-train tricky-focus"><span>train</span></button>
<span>focus un peu tricky</span>

Styleguide 8.3
*/
/*
em()

Convertisseur pixel vers em

```css
.font-24-pixel { font-size: em(24); }
.font-16-pixel { font-size: em(16); }
.font-12-pixel { font-size: em(12); }
```

Markup:
<p class="font-24-pixel">24 pixels</p>
<p class="font-16-pixel">16 pixels</p>
<p class="font-12-pixel">12 pixels</p>

Styleguide 8.4
*/
/*
color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-color-title { @include color($COLOR_PRIMARY); }
.mixin-color-subtitle { @include color($COLOR_PETITS_PRIX, '', !important); }
.mixin-color-subtitle-2 { @include color( $color: #db70e6, $color-high: #830790, $important: '!important'); }
.mixin-color-subtitle-3 { @include color($color: #f97230, $color-high: 30%); }
```

Markup:
<div class="mixin-color-title">Titre 1</div>
<div class="mixin-color-subtitle">Sous-titre 1</div>
<div class="mixin-color-subtitle-2">Sous-titre 2</div>
<div class="mixin-color-subtitle-3">Sous-titre 3</div>

Styleguide 8.5
*/
/*
border-color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.
 - $alpha (optionnel) : rajoute le mode rgba. Si aucune valeur n'est entrée, le couleur passe en mode rgb, donc pas de transparence

```css
.mixin-bdcolor-1 { border:3px solid; @include border-color($COLOR_PRIMARY); }

.mixin-bdcolor-2 { border:3px solid; @include border-color($COLOR_OUIGO); }

.mixin-bdcolor-3 { border:3px solid; @include border-color($color: #73f351, $color-high: #329c15); }

.mixin-bdcolor-4 { border:3px solid; @include border-color($color: #51d7f3, $color-high: 20%); }

.mixin-bdcolor-5 { border:3px solid; @include border-color($color: $COLOR_PRIMARY, $alpha: 0.3); }
```

Markup:
<div class="block mixin-bdcolor-1">Block 1</div>
<div class="block mixin-bdcolor-2">Block 2</div>
<div class="block mixin-bdcolor-3">Block 3</div>
<div class="block mixin-bdcolor-4">Block 4</div>
<div class="block mixin-bdcolor-5">Block 5</div>

Styleguide 8.6
*/
/*
background-color()

Mixin pour gérer les contrastes accentués des couleurs en background. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-bgcolor-1 { @include background-color($COLOR_PRIMARY); }
.mixin-bgcolor-2 { @include background-color($COLOR_OUIGO); }
.mixin-bgcolor-3 { @include background-color($color: #73f351, $color-high: #329c15); }
.mixin-bgcolor-4 { @include background-color($color: #51d7f3, $color-high: 20%); }
```

Markup:
<div class="block mixin-bgcolor-1">Block 1</div>
<div class="block mixin-bgcolor-2">Block 2</div>
<div class="block mixin-bgcolor-3">Block 3</div>
<div class="block mixin-bgcolor-4">Block 4</div>

Styleguide 8.7
*/
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
fill()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c, la couleur est tirée de la map $ALT_COLORS.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Par défaut, on récupère la valeur correspondante dans la table ALT COLORS
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-fill-1 {
  @include fill($COLOR_PRIMARY);
}
.mixin-fill-2 {
  @include fill(#51d7f3, #3858ee);
}
.mixin-fill-3 {
  @include fill($COLOR_PETITS_PRIX, 20%);
}
```

Markup:
<div class="mixin-fill-1">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-2">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-3">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>

Styleguide 8.8
*/
/*
background-linear-gradient()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11y-high-c, la couleur est tirée de la map $ALT_COLORS.

Paramètres :
- $gradient-start : obligatoire, on peut utiliser une oui-colors
- $gradient-end : obligatoire, on peut utiliser une oui-colors
- direction (optionnel, par défaut : "to right")
- $darken (optionnel) : un pourcentage. Si l'argument est utilisé, il remplace les couleurs de substitution
- !important (optionnel)

```css
.mixin-background-linear-gradient {
  @include background-linear-gradient($COLOR_PRIMARY, $COLOR_SECONDARY);
  ...
}
.mixin-background-linear-gradient-darken {
  @include background-linear-gradient(#cc7b27, #e2bd97, $direction: 'to bottom', $darken: 30%);
  ...
}
```

Markup:
<div class="block mixin-background-linear-gradient"></div>
<div class="block mixin-background-linear-gradient-darken"></div>

Styleguide 8.10
*/
/* a11y-line-spacing() */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
breakpoint()

Mixin pour les mediaqueries.

Paramètres :
- $grid : obligatoire, si vous avez importer grid/global, vous pouvez utiliser les valeurs suivantes :
- $small-up : tous les écrans
- $medium-up : > 40em
- $large-up : > 54em

```css
.mixin-breakpoint {
  @include breakpoint($small-up) { // totalement facultatif
    background-color: $COLOR_PRIMARY;
  }
  @include breakpoint($medium-up) {
    background-color: $COLOR_SKIN_LIGHT;
  }
  @include breakpoint($large-up) {
    background-color: $COLOR_SECONDARY;
  }
}
```

Markup:
<div class="mixin-breakpoint"></div>

Styleguide 8.11
*/
/*
radioColorCustom()

Mixin pour les couleurs appliquées sur les radio & checkbox.

Paramètres :
- $inputColor : Couleur de l'input
- $inputColorHighC : (optionel) Couleur de l'input en contrasts accentués



```css
.radio-color-mea {
  @include radioColorCustom($COLOR_MEA_POSITIF);
}

.radio-color-custom {
  @include radioColorCustom(#594fd2, #090352);
}
```

Markup:
<div class="block">
  <p>Using MEA positive color</p>
  <label for="test-mea-1" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-mea-2" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-mea-3" class="vsc__radio radio-color-mea vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-mea-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>
<div class="block">
  <p>Using custom colors</p>
  <label for="test-custom-1" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-custom-2" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-custom-3" class="vsc__radio radio-color-custom vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-custom-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>

Styleguide 8.12
*/
/*
buttonColorCustom()

Permet de surcharger de la couleur d'un CTA conformément à la charte.

Paramètres :
- $color : couleur, obligatoirement issue des [Oui Colors](section-9.html#kssref-9-2), ou une [Custom Color](section-9.html#kssref-9-4).
- $secondary : false par défaut ; pour générer un style de bouton secondaire (bordure de couleur, fond blanc)

```css

@import "../../mixins";
@import "../../colors/oui-colors";

@include export('button--info') {
  .\$code-app {
    &-button {
      &--info {
        @include buttonColorCustom($color:$COLOR_MEA_INFO);
      }
    }
  }
}
```

N.B. supprimez le \ dans le code ci-dessus , qui a été rajouté pour contourner un problème de compilation sass.

Exemples d'usage du mixin :
- [vsc-button--smallPrice](section-6.html#vsc-button--smallPrice)
- [vsc-button--smallPrice-secondary](section-6.html#vsc-button--smallPrice-secondary)
- [vsc-button--info](section-6.html#vsc-button--info)
- [vsc-button--info-secondary](section-6.html#vsc-button--info-secondary)

Styleguide 8.13
*/
/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
Mixins

Installation :
`@import "/css-tools/mixins";`

Styleguide 8.0
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
arrow-lazy()

```css
.tooltip {
  position: relative;
  display: inline-block;
  ...
  @include arrow-lazy($size:0.5em, $color: $COLOR_PRIMARY);
}
```

<b>Paramètres</b><br>
$direction: top, $size: 1em, $color: #ccc, $color-highlight:"", $center: 50%, $margin: -1px, $pseudo: before

Markup:
<div class="tooltip">Tooltip</div>

Styleguide 8.1
*/
/*
focus()

Applique le style focus

```css
.test-button {
  @include focus($color: $COLOR_PRIMARY, $offset: -0.5em);
}
```

<b>Paramètres par défaut</b><br>
$color: #FFF, $opacity: 0.8, $offset: 3px, $width: thin, $style: dotted, $important: ''

Markup:
<button class="test-button">Button</div>

Styleguide 8.2
*/
/*
pseudoFocus

Applique le style focus sur un pseudo élément quand l'effet focus sur l'outline pose problème

```css
.tricky-focus {
  position: relative;
  &:focus { outline:0;}
  @include pseudoFocus($color: $COLOR_PRIMARY, $right: -5em, $top: -0.3em, $left: -0.3em, $bottom: -0.3em);
}
```

<b>Paramètres</b><br>
$pseudo: after, $top: -0.5em, $right: -0.5em, $bottom: -0.5em, $left: -0.5em, $color: #FFF, $opacity: 0.8, $style-line: dotted, $width: 1px

Markup:
<button class="test-button ico-train tricky-focus"><span>train</span></button>
<span>focus un peu tricky</span>

Styleguide 8.3
*/
/*
em()

Convertisseur pixel vers em

```css
.font-24-pixel { font-size: em(24); }
.font-16-pixel { font-size: em(16); }
.font-12-pixel { font-size: em(12); }
```

Markup:
<p class="font-24-pixel">24 pixels</p>
<p class="font-16-pixel">16 pixels</p>
<p class="font-12-pixel">12 pixels</p>

Styleguide 8.4
*/
/*
color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-color-title { @include color($COLOR_PRIMARY); }
.mixin-color-subtitle { @include color($COLOR_PETITS_PRIX, '', !important); }
.mixin-color-subtitle-2 { @include color( $color: #db70e6, $color-high: #830790, $important: '!important'); }
.mixin-color-subtitle-3 { @include color($color: #f97230, $color-high: 30%); }
```

Markup:
<div class="mixin-color-title">Titre 1</div>
<div class="mixin-color-subtitle">Sous-titre 1</div>
<div class="mixin-color-subtitle-2">Sous-titre 2</div>
<div class="mixin-color-subtitle-3">Sous-titre 3</div>

Styleguide 8.5
*/
/*
border-color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.
 - $alpha (optionnel) : rajoute le mode rgba. Si aucune valeur n'est entrée, le couleur passe en mode rgb, donc pas de transparence

```css
.mixin-bdcolor-1 { border:3px solid; @include border-color($COLOR_PRIMARY); }

.mixin-bdcolor-2 { border:3px solid; @include border-color($COLOR_OUIGO); }

.mixin-bdcolor-3 { border:3px solid; @include border-color($color: #73f351, $color-high: #329c15); }

.mixin-bdcolor-4 { border:3px solid; @include border-color($color: #51d7f3, $color-high: 20%); }

.mixin-bdcolor-5 { border:3px solid; @include border-color($color: $COLOR_PRIMARY, $alpha: 0.3); }
```

Markup:
<div class="block mixin-bdcolor-1">Block 1</div>
<div class="block mixin-bdcolor-2">Block 2</div>
<div class="block mixin-bdcolor-3">Block 3</div>
<div class="block mixin-bdcolor-4">Block 4</div>
<div class="block mixin-bdcolor-5">Block 5</div>

Styleguide 8.6
*/
/*
background-color()

Mixin pour gérer les contrastes accentués des couleurs en background. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-bgcolor-1 { @include background-color($COLOR_PRIMARY); }
.mixin-bgcolor-2 { @include background-color($COLOR_OUIGO); }
.mixin-bgcolor-3 { @include background-color($color: #73f351, $color-high: #329c15); }
.mixin-bgcolor-4 { @include background-color($color: #51d7f3, $color-high: 20%); }
```

Markup:
<div class="block mixin-bgcolor-1">Block 1</div>
<div class="block mixin-bgcolor-2">Block 2</div>
<div class="block mixin-bgcolor-3">Block 3</div>
<div class="block mixin-bgcolor-4">Block 4</div>

Styleguide 8.7
*/
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
fill()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c, la couleur est tirée de la map $ALT_COLORS.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Par défaut, on récupère la valeur correspondante dans la table ALT COLORS
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-fill-1 {
  @include fill($COLOR_PRIMARY);
}
.mixin-fill-2 {
  @include fill(#51d7f3, #3858ee);
}
.mixin-fill-3 {
  @include fill($COLOR_PETITS_PRIX, 20%);
}
```

Markup:
<div class="mixin-fill-1">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-2">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-3">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>

Styleguide 8.8
*/
/*
background-linear-gradient()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11y-high-c, la couleur est tirée de la map $ALT_COLORS.

Paramètres :
- $gradient-start : obligatoire, on peut utiliser une oui-colors
- $gradient-end : obligatoire, on peut utiliser une oui-colors
- direction (optionnel, par défaut : "to right")
- $darken (optionnel) : un pourcentage. Si l'argument est utilisé, il remplace les couleurs de substitution
- !important (optionnel)

```css
.mixin-background-linear-gradient {
  @include background-linear-gradient($COLOR_PRIMARY, $COLOR_SECONDARY);
  ...
}
.mixin-background-linear-gradient-darken {
  @include background-linear-gradient(#cc7b27, #e2bd97, $direction: 'to bottom', $darken: 30%);
  ...
}
```

Markup:
<div class="block mixin-background-linear-gradient"></div>
<div class="block mixin-background-linear-gradient-darken"></div>

Styleguide 8.10
*/
/* a11y-line-spacing() */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
breakpoint()

Mixin pour les mediaqueries.

Paramètres :
- $grid : obligatoire, si vous avez importer grid/global, vous pouvez utiliser les valeurs suivantes :
- $small-up : tous les écrans
- $medium-up : > 40em
- $large-up : > 54em

```css
.mixin-breakpoint {
  @include breakpoint($small-up) { // totalement facultatif
    background-color: $COLOR_PRIMARY;
  }
  @include breakpoint($medium-up) {
    background-color: $COLOR_SKIN_LIGHT;
  }
  @include breakpoint($large-up) {
    background-color: $COLOR_SECONDARY;
  }
}
```

Markup:
<div class="mixin-breakpoint"></div>

Styleguide 8.11
*/
/*
radioColorCustom()

Mixin pour les couleurs appliquées sur les radio & checkbox.

Paramètres :
- $inputColor : Couleur de l'input
- $inputColorHighC : (optionel) Couleur de l'input en contrasts accentués



```css
.radio-color-mea {
  @include radioColorCustom($COLOR_MEA_POSITIF);
}

.radio-color-custom {
  @include radioColorCustom(#594fd2, #090352);
}
```

Markup:
<div class="block">
  <p>Using MEA positive color</p>
  <label for="test-mea-1" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-mea-2" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-mea-3" class="vsc__radio radio-color-mea vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-mea-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>
<div class="block">
  <p>Using custom colors</p>
  <label for="test-custom-1" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-custom-2" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-custom-3" class="vsc__radio radio-color-custom vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-custom-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>

Styleguide 8.12
*/
/*
buttonColorCustom()

Permet de surcharger de la couleur d'un CTA conformément à la charte.

Paramètres :
- $color : couleur, obligatoirement issue des [Oui Colors](section-9.html#kssref-9-2), ou une [Custom Color](section-9.html#kssref-9-4).
- $secondary : false par défaut ; pour générer un style de bouton secondaire (bordure de couleur, fond blanc)

```css

@import "../../mixins";
@import "../../colors/oui-colors";

@include export('button--info') {
  .\$code-app {
    &-button {
      &--info {
        @include buttonColorCustom($color:$COLOR_MEA_INFO);
      }
    }
  }
}
```

N.B. supprimez le \ dans le code ci-dessus , qui a été rajouté pour contourner un problème de compilation sass.

Exemples d'usage du mixin :
- [vsc-button--smallPrice](section-6.html#vsc-button--smallPrice)
- [vsc-button--smallPrice-secondary](section-6.html#vsc-button--smallPrice-secondary)
- [vsc-button--info](section-6.html#vsc-button--info)
- [vsc-button--info-secondary](section-6.html#vsc-button--info-secondary)

Styleguide 8.13
*/
.vsa-input--medium .vsa-input__select, .vsa-input--medium .vsa-input__text {
  height: 2.5em ;
  padding: 0 0.7em; }
  .a11y-dys-line-spacing .vsa-input--medium .vsa-input__select, .a11y-dys-line-spacing .vsa-input--medium .vsa-input__text {
    height: calc(2.5em * 1.6) ; }

.vsa-input--medium.vsa-input--select .vsa-input__select {
  padding-right: 2em; }

.vsa-input--medium.vsa-input--select:after {
  right: 0.6em;
  bottom: 0.85em; }

/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
Mixins

Installation :
`@import "/css-tools/mixins";`

Styleguide 8.0
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
arrow-lazy()

```css
.tooltip {
  position: relative;
  display: inline-block;
  ...
  @include arrow-lazy($size:0.5em, $color: $COLOR_PRIMARY);
}
```

<b>Paramètres</b><br>
$direction: top, $size: 1em, $color: #ccc, $color-highlight:"", $center: 50%, $margin: -1px, $pseudo: before

Markup:
<div class="tooltip">Tooltip</div>

Styleguide 8.1
*/
/*
focus()

Applique le style focus

```css
.test-button {
  @include focus($color: $COLOR_PRIMARY, $offset: -0.5em);
}
```

<b>Paramètres par défaut</b><br>
$color: #FFF, $opacity: 0.8, $offset: 3px, $width: thin, $style: dotted, $important: ''

Markup:
<button class="test-button">Button</div>

Styleguide 8.2
*/
/*
pseudoFocus

Applique le style focus sur un pseudo élément quand l'effet focus sur l'outline pose problème

```css
.tricky-focus {
  position: relative;
  &:focus { outline:0;}
  @include pseudoFocus($color: $COLOR_PRIMARY, $right: -5em, $top: -0.3em, $left: -0.3em, $bottom: -0.3em);
}
```

<b>Paramètres</b><br>
$pseudo: after, $top: -0.5em, $right: -0.5em, $bottom: -0.5em, $left: -0.5em, $color: #FFF, $opacity: 0.8, $style-line: dotted, $width: 1px

Markup:
<button class="test-button ico-train tricky-focus"><span>train</span></button>
<span>focus un peu tricky</span>

Styleguide 8.3
*/
/*
em()

Convertisseur pixel vers em

```css
.font-24-pixel { font-size: em(24); }
.font-16-pixel { font-size: em(16); }
.font-12-pixel { font-size: em(12); }
```

Markup:
<p class="font-24-pixel">24 pixels</p>
<p class="font-16-pixel">16 pixels</p>
<p class="font-12-pixel">12 pixels</p>

Styleguide 8.4
*/
/*
color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-color-title { @include color($COLOR_PRIMARY); }
.mixin-color-subtitle { @include color($COLOR_PETITS_PRIX, '', !important); }
.mixin-color-subtitle-2 { @include color( $color: #db70e6, $color-high: #830790, $important: '!important'); }
.mixin-color-subtitle-3 { @include color($color: #f97230, $color-high: 30%); }
```

Markup:
<div class="mixin-color-title">Titre 1</div>
<div class="mixin-color-subtitle">Sous-titre 1</div>
<div class="mixin-color-subtitle-2">Sous-titre 2</div>
<div class="mixin-color-subtitle-3">Sous-titre 3</div>

Styleguide 8.5
*/
/*
border-color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.
 - $alpha (optionnel) : rajoute le mode rgba. Si aucune valeur n'est entrée, le couleur passe en mode rgb, donc pas de transparence

```css
.mixin-bdcolor-1 { border:3px solid; @include border-color($COLOR_PRIMARY); }

.mixin-bdcolor-2 { border:3px solid; @include border-color($COLOR_OUIGO); }

.mixin-bdcolor-3 { border:3px solid; @include border-color($color: #73f351, $color-high: #329c15); }

.mixin-bdcolor-4 { border:3px solid; @include border-color($color: #51d7f3, $color-high: 20%); }

.mixin-bdcolor-5 { border:3px solid; @include border-color($color: $COLOR_PRIMARY, $alpha: 0.3); }
```

Markup:
<div class="block mixin-bdcolor-1">Block 1</div>
<div class="block mixin-bdcolor-2">Block 2</div>
<div class="block mixin-bdcolor-3">Block 3</div>
<div class="block mixin-bdcolor-4">Block 4</div>
<div class="block mixin-bdcolor-5">Block 5</div>

Styleguide 8.6
*/
/*
background-color()

Mixin pour gérer les contrastes accentués des couleurs en background. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-bgcolor-1 { @include background-color($COLOR_PRIMARY); }
.mixin-bgcolor-2 { @include background-color($COLOR_OUIGO); }
.mixin-bgcolor-3 { @include background-color($color: #73f351, $color-high: #329c15); }
.mixin-bgcolor-4 { @include background-color($color: #51d7f3, $color-high: 20%); }
```

Markup:
<div class="block mixin-bgcolor-1">Block 1</div>
<div class="block mixin-bgcolor-2">Block 2</div>
<div class="block mixin-bgcolor-3">Block 3</div>
<div class="block mixin-bgcolor-4">Block 4</div>

Styleguide 8.7
*/
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
fill()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c, la couleur est tirée de la map $ALT_COLORS.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Par défaut, on récupère la valeur correspondante dans la table ALT COLORS
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-fill-1 {
  @include fill($COLOR_PRIMARY);
}
.mixin-fill-2 {
  @include fill(#51d7f3, #3858ee);
}
.mixin-fill-3 {
  @include fill($COLOR_PETITS_PRIX, 20%);
}
```

Markup:
<div class="mixin-fill-1">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-2">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-3">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>

Styleguide 8.8
*/
/*
background-linear-gradient()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11y-high-c, la couleur est tirée de la map $ALT_COLORS.

Paramètres :
- $gradient-start : obligatoire, on peut utiliser une oui-colors
- $gradient-end : obligatoire, on peut utiliser une oui-colors
- direction (optionnel, par défaut : "to right")
- $darken (optionnel) : un pourcentage. Si l'argument est utilisé, il remplace les couleurs de substitution
- !important (optionnel)

```css
.mixin-background-linear-gradient {
  @include background-linear-gradient($COLOR_PRIMARY, $COLOR_SECONDARY);
  ...
}
.mixin-background-linear-gradient-darken {
  @include background-linear-gradient(#cc7b27, #e2bd97, $direction: 'to bottom', $darken: 30%);
  ...
}
```

Markup:
<div class="block mixin-background-linear-gradient"></div>
<div class="block mixin-background-linear-gradient-darken"></div>

Styleguide 8.10
*/
/* a11y-line-spacing() */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
breakpoint()

Mixin pour les mediaqueries.

Paramètres :
- $grid : obligatoire, si vous avez importer grid/global, vous pouvez utiliser les valeurs suivantes :
- $small-up : tous les écrans
- $medium-up : > 40em
- $large-up : > 54em

```css
.mixin-breakpoint {
  @include breakpoint($small-up) { // totalement facultatif
    background-color: $COLOR_PRIMARY;
  }
  @include breakpoint($medium-up) {
    background-color: $COLOR_SKIN_LIGHT;
  }
  @include breakpoint($large-up) {
    background-color: $COLOR_SECONDARY;
  }
}
```

Markup:
<div class="mixin-breakpoint"></div>

Styleguide 8.11
*/
/*
radioColorCustom()

Mixin pour les couleurs appliquées sur les radio & checkbox.

Paramètres :
- $inputColor : Couleur de l'input
- $inputColorHighC : (optionel) Couleur de l'input en contrasts accentués



```css
.radio-color-mea {
  @include radioColorCustom($COLOR_MEA_POSITIF);
}

.radio-color-custom {
  @include radioColorCustom(#594fd2, #090352);
}
```

Markup:
<div class="block">
  <p>Using MEA positive color</p>
  <label for="test-mea-1" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-mea-2" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-mea-3" class="vsc__radio radio-color-mea vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-mea-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>
<div class="block">
  <p>Using custom colors</p>
  <label for="test-custom-1" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-custom-2" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-custom-3" class="vsc__radio radio-color-custom vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-custom-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>

Styleguide 8.12
*/
/*
buttonColorCustom()

Permet de surcharger de la couleur d'un CTA conformément à la charte.

Paramètres :
- $color : couleur, obligatoirement issue des [Oui Colors](section-9.html#kssref-9-2), ou une [Custom Color](section-9.html#kssref-9-4).
- $secondary : false par défaut ; pour générer un style de bouton secondaire (bordure de couleur, fond blanc)

```css

@import "../../mixins";
@import "../../colors/oui-colors";

@include export('button--info') {
  .\$code-app {
    &-button {
      &--info {
        @include buttonColorCustom($color:$COLOR_MEA_INFO);
      }
    }
  }
}
```

N.B. supprimez le \ dans le code ci-dessus , qui a été rajouté pour contourner un problème de compilation sass.

Exemples d'usage du mixin :
- [vsc-button--smallPrice](section-6.html#vsc-button--smallPrice)
- [vsc-button--smallPrice-secondary](section-6.html#vsc-button--smallPrice-secondary)
- [vsc-button--info](section-6.html#vsc-button--info)
- [vsc-button--info-secondary](section-6.html#vsc-button--info-secondary)

Styleguide 8.13
*/
/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
Mixins

Installation :
`@import "/css-tools/mixins";`

Styleguide 8.0
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
arrow-lazy()

```css
.tooltip {
  position: relative;
  display: inline-block;
  ...
  @include arrow-lazy($size:0.5em, $color: $COLOR_PRIMARY);
}
```

<b>Paramètres</b><br>
$direction: top, $size: 1em, $color: #ccc, $color-highlight:"", $center: 50%, $margin: -1px, $pseudo: before

Markup:
<div class="tooltip">Tooltip</div>

Styleguide 8.1
*/
/*
focus()

Applique le style focus

```css
.test-button {
  @include focus($color: $COLOR_PRIMARY, $offset: -0.5em);
}
```

<b>Paramètres par défaut</b><br>
$color: #FFF, $opacity: 0.8, $offset: 3px, $width: thin, $style: dotted, $important: ''

Markup:
<button class="test-button">Button</div>

Styleguide 8.2
*/
/*
pseudoFocus

Applique le style focus sur un pseudo élément quand l'effet focus sur l'outline pose problème

```css
.tricky-focus {
  position: relative;
  &:focus { outline:0;}
  @include pseudoFocus($color: $COLOR_PRIMARY, $right: -5em, $top: -0.3em, $left: -0.3em, $bottom: -0.3em);
}
```

<b>Paramètres</b><br>
$pseudo: after, $top: -0.5em, $right: -0.5em, $bottom: -0.5em, $left: -0.5em, $color: #FFF, $opacity: 0.8, $style-line: dotted, $width: 1px

Markup:
<button class="test-button ico-train tricky-focus"><span>train</span></button>
<span>focus un peu tricky</span>

Styleguide 8.3
*/
/*
em()

Convertisseur pixel vers em

```css
.font-24-pixel { font-size: em(24); }
.font-16-pixel { font-size: em(16); }
.font-12-pixel { font-size: em(12); }
```

Markup:
<p class="font-24-pixel">24 pixels</p>
<p class="font-16-pixel">16 pixels</p>
<p class="font-12-pixel">12 pixels</p>

Styleguide 8.4
*/
/*
color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-color-title { @include color($COLOR_PRIMARY); }
.mixin-color-subtitle { @include color($COLOR_PETITS_PRIX, '', !important); }
.mixin-color-subtitle-2 { @include color( $color: #db70e6, $color-high: #830790, $important: '!important'); }
.mixin-color-subtitle-3 { @include color($color: #f97230, $color-high: 30%); }
```

Markup:
<div class="mixin-color-title">Titre 1</div>
<div class="mixin-color-subtitle">Sous-titre 1</div>
<div class="mixin-color-subtitle-2">Sous-titre 2</div>
<div class="mixin-color-subtitle-3">Sous-titre 3</div>

Styleguide 8.5
*/
/*
border-color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.
 - $alpha (optionnel) : rajoute le mode rgba. Si aucune valeur n'est entrée, le couleur passe en mode rgb, donc pas de transparence

```css
.mixin-bdcolor-1 { border:3px solid; @include border-color($COLOR_PRIMARY); }

.mixin-bdcolor-2 { border:3px solid; @include border-color($COLOR_OUIGO); }

.mixin-bdcolor-3 { border:3px solid; @include border-color($color: #73f351, $color-high: #329c15); }

.mixin-bdcolor-4 { border:3px solid; @include border-color($color: #51d7f3, $color-high: 20%); }

.mixin-bdcolor-5 { border:3px solid; @include border-color($color: $COLOR_PRIMARY, $alpha: 0.3); }
```

Markup:
<div class="block mixin-bdcolor-1">Block 1</div>
<div class="block mixin-bdcolor-2">Block 2</div>
<div class="block mixin-bdcolor-3">Block 3</div>
<div class="block mixin-bdcolor-4">Block 4</div>
<div class="block mixin-bdcolor-5">Block 5</div>

Styleguide 8.6
*/
/*
background-color()

Mixin pour gérer les contrastes accentués des couleurs en background. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-bgcolor-1 { @include background-color($COLOR_PRIMARY); }
.mixin-bgcolor-2 { @include background-color($COLOR_OUIGO); }
.mixin-bgcolor-3 { @include background-color($color: #73f351, $color-high: #329c15); }
.mixin-bgcolor-4 { @include background-color($color: #51d7f3, $color-high: 20%); }
```

Markup:
<div class="block mixin-bgcolor-1">Block 1</div>
<div class="block mixin-bgcolor-2">Block 2</div>
<div class="block mixin-bgcolor-3">Block 3</div>
<div class="block mixin-bgcolor-4">Block 4</div>

Styleguide 8.7
*/
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
fill()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c, la couleur est tirée de la map $ALT_COLORS.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Par défaut, on récupère la valeur correspondante dans la table ALT COLORS
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-fill-1 {
  @include fill($COLOR_PRIMARY);
}
.mixin-fill-2 {
  @include fill(#51d7f3, #3858ee);
}
.mixin-fill-3 {
  @include fill($COLOR_PETITS_PRIX, 20%);
}
```

Markup:
<div class="mixin-fill-1">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-2">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-3">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>

Styleguide 8.8
*/
/*
background-linear-gradient()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11y-high-c, la couleur est tirée de la map $ALT_COLORS.

Paramètres :
- $gradient-start : obligatoire, on peut utiliser une oui-colors
- $gradient-end : obligatoire, on peut utiliser une oui-colors
- direction (optionnel, par défaut : "to right")
- $darken (optionnel) : un pourcentage. Si l'argument est utilisé, il remplace les couleurs de substitution
- !important (optionnel)

```css
.mixin-background-linear-gradient {
  @include background-linear-gradient($COLOR_PRIMARY, $COLOR_SECONDARY);
  ...
}
.mixin-background-linear-gradient-darken {
  @include background-linear-gradient(#cc7b27, #e2bd97, $direction: 'to bottom', $darken: 30%);
  ...
}
```

Markup:
<div class="block mixin-background-linear-gradient"></div>
<div class="block mixin-background-linear-gradient-darken"></div>

Styleguide 8.10
*/
/* a11y-line-spacing() */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
breakpoint()

Mixin pour les mediaqueries.

Paramètres :
- $grid : obligatoire, si vous avez importer grid/global, vous pouvez utiliser les valeurs suivantes :
- $small-up : tous les écrans
- $medium-up : > 40em
- $large-up : > 54em

```css
.mixin-breakpoint {
  @include breakpoint($small-up) { // totalement facultatif
    background-color: $COLOR_PRIMARY;
  }
  @include breakpoint($medium-up) {
    background-color: $COLOR_SKIN_LIGHT;
  }
  @include breakpoint($large-up) {
    background-color: $COLOR_SECONDARY;
  }
}
```

Markup:
<div class="mixin-breakpoint"></div>

Styleguide 8.11
*/
/*
radioColorCustom()

Mixin pour les couleurs appliquées sur les radio & checkbox.

Paramètres :
- $inputColor : Couleur de l'input
- $inputColorHighC : (optionel) Couleur de l'input en contrasts accentués



```css
.radio-color-mea {
  @include radioColorCustom($COLOR_MEA_POSITIF);
}

.radio-color-custom {
  @include radioColorCustom(#594fd2, #090352);
}
```

Markup:
<div class="block">
  <p>Using MEA positive color</p>
  <label for="test-mea-1" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-mea-2" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-mea-3" class="vsc__radio radio-color-mea vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-mea-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>
<div class="block">
  <p>Using custom colors</p>
  <label for="test-custom-1" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-custom-2" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-custom-3" class="vsc__radio radio-color-custom vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-custom-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>

Styleguide 8.12
*/
/*
buttonColorCustom()

Permet de surcharger de la couleur d'un CTA conformément à la charte.

Paramètres :
- $color : couleur, obligatoirement issue des [Oui Colors](section-9.html#kssref-9-2), ou une [Custom Color](section-9.html#kssref-9-4).
- $secondary : false par défaut ; pour générer un style de bouton secondaire (bordure de couleur, fond blanc)

```css

@import "../../mixins";
@import "../../colors/oui-colors";

@include export('button--info') {
  .\$code-app {
    &-button {
      &--info {
        @include buttonColorCustom($color:$COLOR_MEA_INFO);
      }
    }
  }
}
```

N.B. supprimez le \ dans le code ci-dessus , qui a été rajouté pour contourner un problème de compilation sass.

Exemples d'usage du mixin :
- [vsc-button--smallPrice](section-6.html#vsc-button--smallPrice)
- [vsc-button--smallPrice-secondary](section-6.html#vsc-button--smallPrice-secondary)
- [vsc-button--info](section-6.html#vsc-button--info)
- [vsc-button--info-secondary](section-6.html#vsc-button--info-secondary)

Styleguide 8.13
*/
.vsa-input--mini .vsa-input__label {
  font-size: 0.9em; }

.vsa-input--mini .vsa-input__select, .vsa-input--mini .vsa-input__text {
  font-size: 0.8em;
  padding: 0 0.5em;
  height: 2.344em ; }
  .a11y-dys-line-spacing .vsa-input--mini .vsa-input__select, .a11y-dys-line-spacing .vsa-input--mini .vsa-input__text {
    height: calc(2.344em * 1.6) ; }

.vsa-input--mini .vsa-input__select {
  padding-right: 2.15em; }

.vsa-input--mini.vsa-input--select:after {
  right: 0.5em;
  bottom: 0.5em;
  width: 0.8em;
  height: 0.8em; }
  .a11y-dys-line-spacing .vsa-input--mini.vsa-input--select:after {
    bottom: 1.1em; }

/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
Mixins

Installation :
`@import "/css-tools/mixins";`

Styleguide 8.0
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
arrow-lazy()

```css
.tooltip {
  position: relative;
  display: inline-block;
  ...
  @include arrow-lazy($size:0.5em, $color: $COLOR_PRIMARY);
}
```

<b>Paramètres</b><br>
$direction: top, $size: 1em, $color: #ccc, $color-highlight:"", $center: 50%, $margin: -1px, $pseudo: before

Markup:
<div class="tooltip">Tooltip</div>

Styleguide 8.1
*/
/*
focus()

Applique le style focus

```css
.test-button {
  @include focus($color: $COLOR_PRIMARY, $offset: -0.5em);
}
```

<b>Paramètres par défaut</b><br>
$color: #FFF, $opacity: 0.8, $offset: 3px, $width: thin, $style: dotted, $important: ''

Markup:
<button class="test-button">Button</div>

Styleguide 8.2
*/
/*
pseudoFocus

Applique le style focus sur un pseudo élément quand l'effet focus sur l'outline pose problème

```css
.tricky-focus {
  position: relative;
  &:focus { outline:0;}
  @include pseudoFocus($color: $COLOR_PRIMARY, $right: -5em, $top: -0.3em, $left: -0.3em, $bottom: -0.3em);
}
```

<b>Paramètres</b><br>
$pseudo: after, $top: -0.5em, $right: -0.5em, $bottom: -0.5em, $left: -0.5em, $color: #FFF, $opacity: 0.8, $style-line: dotted, $width: 1px

Markup:
<button class="test-button ico-train tricky-focus"><span>train</span></button>
<span>focus un peu tricky</span>

Styleguide 8.3
*/
/*
em()

Convertisseur pixel vers em

```css
.font-24-pixel { font-size: em(24); }
.font-16-pixel { font-size: em(16); }
.font-12-pixel { font-size: em(12); }
```

Markup:
<p class="font-24-pixel">24 pixels</p>
<p class="font-16-pixel">16 pixels</p>
<p class="font-12-pixel">12 pixels</p>

Styleguide 8.4
*/
/*
color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-color-title { @include color($COLOR_PRIMARY); }
.mixin-color-subtitle { @include color($COLOR_PETITS_PRIX, '', !important); }
.mixin-color-subtitle-2 { @include color( $color: #db70e6, $color-high: #830790, $important: '!important'); }
.mixin-color-subtitle-3 { @include color($color: #f97230, $color-high: 30%); }
```

Markup:
<div class="mixin-color-title">Titre 1</div>
<div class="mixin-color-subtitle">Sous-titre 1</div>
<div class="mixin-color-subtitle-2">Sous-titre 2</div>
<div class="mixin-color-subtitle-3">Sous-titre 3</div>

Styleguide 8.5
*/
/*
border-color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.
 - $alpha (optionnel) : rajoute le mode rgba. Si aucune valeur n'est entrée, le couleur passe en mode rgb, donc pas de transparence

```css
.mixin-bdcolor-1 { border:3px solid; @include border-color($COLOR_PRIMARY); }

.mixin-bdcolor-2 { border:3px solid; @include border-color($COLOR_OUIGO); }

.mixin-bdcolor-3 { border:3px solid; @include border-color($color: #73f351, $color-high: #329c15); }

.mixin-bdcolor-4 { border:3px solid; @include border-color($color: #51d7f3, $color-high: 20%); }

.mixin-bdcolor-5 { border:3px solid; @include border-color($color: $COLOR_PRIMARY, $alpha: 0.3); }
```

Markup:
<div class="block mixin-bdcolor-1">Block 1</div>
<div class="block mixin-bdcolor-2">Block 2</div>
<div class="block mixin-bdcolor-3">Block 3</div>
<div class="block mixin-bdcolor-4">Block 4</div>
<div class="block mixin-bdcolor-5">Block 5</div>

Styleguide 8.6
*/
/*
background-color()

Mixin pour gérer les contrastes accentués des couleurs en background. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-bgcolor-1 { @include background-color($COLOR_PRIMARY); }
.mixin-bgcolor-2 { @include background-color($COLOR_OUIGO); }
.mixin-bgcolor-3 { @include background-color($color: #73f351, $color-high: #329c15); }
.mixin-bgcolor-4 { @include background-color($color: #51d7f3, $color-high: 20%); }
```

Markup:
<div class="block mixin-bgcolor-1">Block 1</div>
<div class="block mixin-bgcolor-2">Block 2</div>
<div class="block mixin-bgcolor-3">Block 3</div>
<div class="block mixin-bgcolor-4">Block 4</div>

Styleguide 8.7
*/
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
fill()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c, la couleur est tirée de la map $ALT_COLORS.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Par défaut, on récupère la valeur correspondante dans la table ALT COLORS
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-fill-1 {
  @include fill($COLOR_PRIMARY);
}
.mixin-fill-2 {
  @include fill(#51d7f3, #3858ee);
}
.mixin-fill-3 {
  @include fill($COLOR_PETITS_PRIX, 20%);
}
```

Markup:
<div class="mixin-fill-1">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-2">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-3">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>

Styleguide 8.8
*/
/*
background-linear-gradient()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11y-high-c, la couleur est tirée de la map $ALT_COLORS.

Paramètres :
- $gradient-start : obligatoire, on peut utiliser une oui-colors
- $gradient-end : obligatoire, on peut utiliser une oui-colors
- direction (optionnel, par défaut : "to right")
- $darken (optionnel) : un pourcentage. Si l'argument est utilisé, il remplace les couleurs de substitution
- !important (optionnel)

```css
.mixin-background-linear-gradient {
  @include background-linear-gradient($COLOR_PRIMARY, $COLOR_SECONDARY);
  ...
}
.mixin-background-linear-gradient-darken {
  @include background-linear-gradient(#cc7b27, #e2bd97, $direction: 'to bottom', $darken: 30%);
  ...
}
```

Markup:
<div class="block mixin-background-linear-gradient"></div>
<div class="block mixin-background-linear-gradient-darken"></div>

Styleguide 8.10
*/
/* a11y-line-spacing() */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
breakpoint()

Mixin pour les mediaqueries.

Paramètres :
- $grid : obligatoire, si vous avez importer grid/global, vous pouvez utiliser les valeurs suivantes :
- $small-up : tous les écrans
- $medium-up : > 40em
- $large-up : > 54em

```css
.mixin-breakpoint {
  @include breakpoint($small-up) { // totalement facultatif
    background-color: $COLOR_PRIMARY;
  }
  @include breakpoint($medium-up) {
    background-color: $COLOR_SKIN_LIGHT;
  }
  @include breakpoint($large-up) {
    background-color: $COLOR_SECONDARY;
  }
}
```

Markup:
<div class="mixin-breakpoint"></div>

Styleguide 8.11
*/
/*
radioColorCustom()

Mixin pour les couleurs appliquées sur les radio & checkbox.

Paramètres :
- $inputColor : Couleur de l'input
- $inputColorHighC : (optionel) Couleur de l'input en contrasts accentués



```css
.radio-color-mea {
  @include radioColorCustom($COLOR_MEA_POSITIF);
}

.radio-color-custom {
  @include radioColorCustom(#594fd2, #090352);
}
```

Markup:
<div class="block">
  <p>Using MEA positive color</p>
  <label for="test-mea-1" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-mea-2" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-mea-3" class="vsc__radio radio-color-mea vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-mea-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>
<div class="block">
  <p>Using custom colors</p>
  <label for="test-custom-1" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-custom-2" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-custom-3" class="vsc__radio radio-color-custom vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-custom-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>

Styleguide 8.12
*/
/*
buttonColorCustom()

Permet de surcharger de la couleur d'un CTA conformément à la charte.

Paramètres :
- $color : couleur, obligatoirement issue des [Oui Colors](section-9.html#kssref-9-2), ou une [Custom Color](section-9.html#kssref-9-4).
- $secondary : false par défaut ; pour générer un style de bouton secondaire (bordure de couleur, fond blanc)

```css

@import "../../mixins";
@import "../../colors/oui-colors";

@include export('button--info') {
  .\$code-app {
    &-button {
      &--info {
        @include buttonColorCustom($color:$COLOR_MEA_INFO);
      }
    }
  }
}
```

N.B. supprimez le \ dans le code ci-dessus , qui a été rajouté pour contourner un problème de compilation sass.

Exemples d'usage du mixin :
- [vsc-button--smallPrice](section-6.html#vsc-button--smallPrice)
- [vsc-button--smallPrice-secondary](section-6.html#vsc-button--smallPrice-secondary)
- [vsc-button--info](section-6.html#vsc-button--info)
- [vsc-button--info-secondary](section-6.html#vsc-button--info-secondary)

Styleguide 8.13
*/
/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
Mixins

Installation :
`@import "/css-tools/mixins";`

Styleguide 8.0
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
arrow-lazy()

```css
.tooltip {
  position: relative;
  display: inline-block;
  ...
  @include arrow-lazy($size:0.5em, $color: $COLOR_PRIMARY);
}
```

<b>Paramètres</b><br>
$direction: top, $size: 1em, $color: #ccc, $color-highlight:"", $center: 50%, $margin: -1px, $pseudo: before

Markup:
<div class="tooltip">Tooltip</div>

Styleguide 8.1
*/
/*
focus()

Applique le style focus

```css
.test-button {
  @include focus($color: $COLOR_PRIMARY, $offset: -0.5em);
}
```

<b>Paramètres par défaut</b><br>
$color: #FFF, $opacity: 0.8, $offset: 3px, $width: thin, $style: dotted, $important: ''

Markup:
<button class="test-button">Button</div>

Styleguide 8.2
*/
/*
pseudoFocus

Applique le style focus sur un pseudo élément quand l'effet focus sur l'outline pose problème

```css
.tricky-focus {
  position: relative;
  &:focus { outline:0;}
  @include pseudoFocus($color: $COLOR_PRIMARY, $right: -5em, $top: -0.3em, $left: -0.3em, $bottom: -0.3em);
}
```

<b>Paramètres</b><br>
$pseudo: after, $top: -0.5em, $right: -0.5em, $bottom: -0.5em, $left: -0.5em, $color: #FFF, $opacity: 0.8, $style-line: dotted, $width: 1px

Markup:
<button class="test-button ico-train tricky-focus"><span>train</span></button>
<span>focus un peu tricky</span>

Styleguide 8.3
*/
/*
em()

Convertisseur pixel vers em

```css
.font-24-pixel { font-size: em(24); }
.font-16-pixel { font-size: em(16); }
.font-12-pixel { font-size: em(12); }
```

Markup:
<p class="font-24-pixel">24 pixels</p>
<p class="font-16-pixel">16 pixels</p>
<p class="font-12-pixel">12 pixels</p>

Styleguide 8.4
*/
/*
color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-color-title { @include color($COLOR_PRIMARY); }
.mixin-color-subtitle { @include color($COLOR_PETITS_PRIX, '', !important); }
.mixin-color-subtitle-2 { @include color( $color: #db70e6, $color-high: #830790, $important: '!important'); }
.mixin-color-subtitle-3 { @include color($color: #f97230, $color-high: 30%); }
```

Markup:
<div class="mixin-color-title">Titre 1</div>
<div class="mixin-color-subtitle">Sous-titre 1</div>
<div class="mixin-color-subtitle-2">Sous-titre 2</div>
<div class="mixin-color-subtitle-3">Sous-titre 3</div>

Styleguide 8.5
*/
/*
border-color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.
 - $alpha (optionnel) : rajoute le mode rgba. Si aucune valeur n'est entrée, le couleur passe en mode rgb, donc pas de transparence

```css
.mixin-bdcolor-1 { border:3px solid; @include border-color($COLOR_PRIMARY); }

.mixin-bdcolor-2 { border:3px solid; @include border-color($COLOR_OUIGO); }

.mixin-bdcolor-3 { border:3px solid; @include border-color($color: #73f351, $color-high: #329c15); }

.mixin-bdcolor-4 { border:3px solid; @include border-color($color: #51d7f3, $color-high: 20%); }

.mixin-bdcolor-5 { border:3px solid; @include border-color($color: $COLOR_PRIMARY, $alpha: 0.3); }
```

Markup:
<div class="block mixin-bdcolor-1">Block 1</div>
<div class="block mixin-bdcolor-2">Block 2</div>
<div class="block mixin-bdcolor-3">Block 3</div>
<div class="block mixin-bdcolor-4">Block 4</div>
<div class="block mixin-bdcolor-5">Block 5</div>

Styleguide 8.6
*/
/*
background-color()

Mixin pour gérer les contrastes accentués des couleurs en background. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-bgcolor-1 { @include background-color($COLOR_PRIMARY); }
.mixin-bgcolor-2 { @include background-color($COLOR_OUIGO); }
.mixin-bgcolor-3 { @include background-color($color: #73f351, $color-high: #329c15); }
.mixin-bgcolor-4 { @include background-color($color: #51d7f3, $color-high: 20%); }
```

Markup:
<div class="block mixin-bgcolor-1">Block 1</div>
<div class="block mixin-bgcolor-2">Block 2</div>
<div class="block mixin-bgcolor-3">Block 3</div>
<div class="block mixin-bgcolor-4">Block 4</div>

Styleguide 8.7
*/
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
fill()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c, la couleur est tirée de la map $ALT_COLORS.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Par défaut, on récupère la valeur correspondante dans la table ALT COLORS
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-fill-1 {
  @include fill($COLOR_PRIMARY);
}
.mixin-fill-2 {
  @include fill(#51d7f3, #3858ee);
}
.mixin-fill-3 {
  @include fill($COLOR_PETITS_PRIX, 20%);
}
```

Markup:
<div class="mixin-fill-1">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-2">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-3">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>

Styleguide 8.8
*/
/*
background-linear-gradient()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11y-high-c, la couleur est tirée de la map $ALT_COLORS.

Paramètres :
- $gradient-start : obligatoire, on peut utiliser une oui-colors
- $gradient-end : obligatoire, on peut utiliser une oui-colors
- direction (optionnel, par défaut : "to right")
- $darken (optionnel) : un pourcentage. Si l'argument est utilisé, il remplace les couleurs de substitution
- !important (optionnel)

```css
.mixin-background-linear-gradient {
  @include background-linear-gradient($COLOR_PRIMARY, $COLOR_SECONDARY);
  ...
}
.mixin-background-linear-gradient-darken {
  @include background-linear-gradient(#cc7b27, #e2bd97, $direction: 'to bottom', $darken: 30%);
  ...
}
```

Markup:
<div class="block mixin-background-linear-gradient"></div>
<div class="block mixin-background-linear-gradient-darken"></div>

Styleguide 8.10
*/
/* a11y-line-spacing() */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
breakpoint()

Mixin pour les mediaqueries.

Paramètres :
- $grid : obligatoire, si vous avez importer grid/global, vous pouvez utiliser les valeurs suivantes :
- $small-up : tous les écrans
- $medium-up : > 40em
- $large-up : > 54em

```css
.mixin-breakpoint {
  @include breakpoint($small-up) { // totalement facultatif
    background-color: $COLOR_PRIMARY;
  }
  @include breakpoint($medium-up) {
    background-color: $COLOR_SKIN_LIGHT;
  }
  @include breakpoint($large-up) {
    background-color: $COLOR_SECONDARY;
  }
}
```

Markup:
<div class="mixin-breakpoint"></div>

Styleguide 8.11
*/
/*
radioColorCustom()

Mixin pour les couleurs appliquées sur les radio & checkbox.

Paramètres :
- $inputColor : Couleur de l'input
- $inputColorHighC : (optionel) Couleur de l'input en contrasts accentués



```css
.radio-color-mea {
  @include radioColorCustom($COLOR_MEA_POSITIF);
}

.radio-color-custom {
  @include radioColorCustom(#594fd2, #090352);
}
```

Markup:
<div class="block">
  <p>Using MEA positive color</p>
  <label for="test-mea-1" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-mea-2" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-mea-3" class="vsc__radio radio-color-mea vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-mea-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>
<div class="block">
  <p>Using custom colors</p>
  <label for="test-custom-1" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-custom-2" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-custom-3" class="vsc__radio radio-color-custom vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-custom-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>

Styleguide 8.12
*/
/*
buttonColorCustom()

Permet de surcharger de la couleur d'un CTA conformément à la charte.

Paramètres :
- $color : couleur, obligatoirement issue des [Oui Colors](section-9.html#kssref-9-2), ou une [Custom Color](section-9.html#kssref-9-4).
- $secondary : false par défaut ; pour générer un style de bouton secondaire (bordure de couleur, fond blanc)

```css

@import "../../mixins";
@import "../../colors/oui-colors";

@include export('button--info') {
  .\$code-app {
    &-button {
      &--info {
        @include buttonColorCustom($color:$COLOR_MEA_INFO);
      }
    }
  }
}
```

N.B. supprimez le \ dans le code ci-dessus , qui a été rajouté pour contourner un problème de compilation sass.

Exemples d'usage du mixin :
- [vsc-button--smallPrice](section-6.html#vsc-button--smallPrice)
- [vsc-button--smallPrice-secondary](section-6.html#vsc-button--smallPrice-secondary)
- [vsc-button--info](section-6.html#vsc-button--info)
- [vsc-button--info-secondary](section-6.html#vsc-button--info-secondary)

Styleguide 8.13
*/
.vsa-input--nolabel .vsa-input__label {
  display: none; }

.vsa-input--nolabel .vsa-input__text::placeholder {
  opacity: 1; }

.vsa-input--nolabel .vsa-input__text:focus::placeholder {
  opacity: 0.5; }

/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
Mixins

Installation :
`@import "/css-tools/mixins";`

Styleguide 8.0
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
arrow-lazy()

```css
.tooltip {
  position: relative;
  display: inline-block;
  ...
  @include arrow-lazy($size:0.5em, $color: $COLOR_PRIMARY);
}
```

<b>Paramètres</b><br>
$direction: top, $size: 1em, $color: #ccc, $color-highlight:"", $center: 50%, $margin: -1px, $pseudo: before

Markup:
<div class="tooltip">Tooltip</div>

Styleguide 8.1
*/
/*
focus()

Applique le style focus

```css
.test-button {
  @include focus($color: $COLOR_PRIMARY, $offset: -0.5em);
}
```

<b>Paramètres par défaut</b><br>
$color: #FFF, $opacity: 0.8, $offset: 3px, $width: thin, $style: dotted, $important: ''

Markup:
<button class="test-button">Button</div>

Styleguide 8.2
*/
/*
pseudoFocus

Applique le style focus sur un pseudo élément quand l'effet focus sur l'outline pose problème

```css
.tricky-focus {
  position: relative;
  &:focus { outline:0;}
  @include pseudoFocus($color: $COLOR_PRIMARY, $right: -5em, $top: -0.3em, $left: -0.3em, $bottom: -0.3em);
}
```

<b>Paramètres</b><br>
$pseudo: after, $top: -0.5em, $right: -0.5em, $bottom: -0.5em, $left: -0.5em, $color: #FFF, $opacity: 0.8, $style-line: dotted, $width: 1px

Markup:
<button class="test-button ico-train tricky-focus"><span>train</span></button>
<span>focus un peu tricky</span>

Styleguide 8.3
*/
/*
em()

Convertisseur pixel vers em

```css
.font-24-pixel { font-size: em(24); }
.font-16-pixel { font-size: em(16); }
.font-12-pixel { font-size: em(12); }
```

Markup:
<p class="font-24-pixel">24 pixels</p>
<p class="font-16-pixel">16 pixels</p>
<p class="font-12-pixel">12 pixels</p>

Styleguide 8.4
*/
/*
color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-color-title { @include color($COLOR_PRIMARY); }
.mixin-color-subtitle { @include color($COLOR_PETITS_PRIX, '', !important); }
.mixin-color-subtitle-2 { @include color( $color: #db70e6, $color-high: #830790, $important: '!important'); }
.mixin-color-subtitle-3 { @include color($color: #f97230, $color-high: 30%); }
```

Markup:
<div class="mixin-color-title">Titre 1</div>
<div class="mixin-color-subtitle">Sous-titre 1</div>
<div class="mixin-color-subtitle-2">Sous-titre 2</div>
<div class="mixin-color-subtitle-3">Sous-titre 3</div>

Styleguide 8.5
*/
/*
border-color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.
 - $alpha (optionnel) : rajoute le mode rgba. Si aucune valeur n'est entrée, le couleur passe en mode rgb, donc pas de transparence

```css
.mixin-bdcolor-1 { border:3px solid; @include border-color($COLOR_PRIMARY); }

.mixin-bdcolor-2 { border:3px solid; @include border-color($COLOR_OUIGO); }

.mixin-bdcolor-3 { border:3px solid; @include border-color($color: #73f351, $color-high: #329c15); }

.mixin-bdcolor-4 { border:3px solid; @include border-color($color: #51d7f3, $color-high: 20%); }

.mixin-bdcolor-5 { border:3px solid; @include border-color($color: $COLOR_PRIMARY, $alpha: 0.3); }
```

Markup:
<div class="block mixin-bdcolor-1">Block 1</div>
<div class="block mixin-bdcolor-2">Block 2</div>
<div class="block mixin-bdcolor-3">Block 3</div>
<div class="block mixin-bdcolor-4">Block 4</div>
<div class="block mixin-bdcolor-5">Block 5</div>

Styleguide 8.6
*/
/*
background-color()

Mixin pour gérer les contrastes accentués des couleurs en background. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-bgcolor-1 { @include background-color($COLOR_PRIMARY); }
.mixin-bgcolor-2 { @include background-color($COLOR_OUIGO); }
.mixin-bgcolor-3 { @include background-color($color: #73f351, $color-high: #329c15); }
.mixin-bgcolor-4 { @include background-color($color: #51d7f3, $color-high: 20%); }
```

Markup:
<div class="block mixin-bgcolor-1">Block 1</div>
<div class="block mixin-bgcolor-2">Block 2</div>
<div class="block mixin-bgcolor-3">Block 3</div>
<div class="block mixin-bgcolor-4">Block 4</div>

Styleguide 8.7
*/
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
fill()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c, la couleur est tirée de la map $ALT_COLORS.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Par défaut, on récupère la valeur correspondante dans la table ALT COLORS
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-fill-1 {
  @include fill($COLOR_PRIMARY);
}
.mixin-fill-2 {
  @include fill(#51d7f3, #3858ee);
}
.mixin-fill-3 {
  @include fill($COLOR_PETITS_PRIX, 20%);
}
```

Markup:
<div class="mixin-fill-1">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-2">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-3">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>

Styleguide 8.8
*/
/*
background-linear-gradient()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11y-high-c, la couleur est tirée de la map $ALT_COLORS.

Paramètres :
- $gradient-start : obligatoire, on peut utiliser une oui-colors
- $gradient-end : obligatoire, on peut utiliser une oui-colors
- direction (optionnel, par défaut : "to right")
- $darken (optionnel) : un pourcentage. Si l'argument est utilisé, il remplace les couleurs de substitution
- !important (optionnel)

```css
.mixin-background-linear-gradient {
  @include background-linear-gradient($COLOR_PRIMARY, $COLOR_SECONDARY);
  ...
}
.mixin-background-linear-gradient-darken {
  @include background-linear-gradient(#cc7b27, #e2bd97, $direction: 'to bottom', $darken: 30%);
  ...
}
```

Markup:
<div class="block mixin-background-linear-gradient"></div>
<div class="block mixin-background-linear-gradient-darken"></div>

Styleguide 8.10
*/
/* a11y-line-spacing() */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
breakpoint()

Mixin pour les mediaqueries.

Paramètres :
- $grid : obligatoire, si vous avez importer grid/global, vous pouvez utiliser les valeurs suivantes :
- $small-up : tous les écrans
- $medium-up : > 40em
- $large-up : > 54em

```css
.mixin-breakpoint {
  @include breakpoint($small-up) { // totalement facultatif
    background-color: $COLOR_PRIMARY;
  }
  @include breakpoint($medium-up) {
    background-color: $COLOR_SKIN_LIGHT;
  }
  @include breakpoint($large-up) {
    background-color: $COLOR_SECONDARY;
  }
}
```

Markup:
<div class="mixin-breakpoint"></div>

Styleguide 8.11
*/
/*
radioColorCustom()

Mixin pour les couleurs appliquées sur les radio & checkbox.

Paramètres :
- $inputColor : Couleur de l'input
- $inputColorHighC : (optionel) Couleur de l'input en contrasts accentués



```css
.radio-color-mea {
  @include radioColorCustom($COLOR_MEA_POSITIF);
}

.radio-color-custom {
  @include radioColorCustom(#594fd2, #090352);
}
```

Markup:
<div class="block">
  <p>Using MEA positive color</p>
  <label for="test-mea-1" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-mea-2" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-mea-3" class="vsc__radio radio-color-mea vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-mea-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>
<div class="block">
  <p>Using custom colors</p>
  <label for="test-custom-1" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-custom-2" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-custom-3" class="vsc__radio radio-color-custom vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-custom-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>

Styleguide 8.12
*/
/*
buttonColorCustom()

Permet de surcharger de la couleur d'un CTA conformément à la charte.

Paramètres :
- $color : couleur, obligatoirement issue des [Oui Colors](section-9.html#kssref-9-2), ou une [Custom Color](section-9.html#kssref-9-4).
- $secondary : false par défaut ; pour générer un style de bouton secondaire (bordure de couleur, fond blanc)

```css

@import "../../mixins";
@import "../../colors/oui-colors";

@include export('button--info') {
  .\$code-app {
    &-button {
      &--info {
        @include buttonColorCustom($color:$COLOR_MEA_INFO);
      }
    }
  }
}
```

N.B. supprimez le \ dans le code ci-dessus , qui a été rajouté pour contourner un problème de compilation sass.

Exemples d'usage du mixin :
- [vsc-button--smallPrice](section-6.html#vsc-button--smallPrice)
- [vsc-button--smallPrice-secondary](section-6.html#vsc-button--smallPrice-secondary)
- [vsc-button--info](section-6.html#vsc-button--info)
- [vsc-button--info-secondary](section-6.html#vsc-button--info-secondary)

Styleguide 8.13
*/
/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
Mixins

Installation :
`@import "/css-tools/mixins";`

Styleguide 8.0
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
arrow-lazy()

```css
.tooltip {
  position: relative;
  display: inline-block;
  ...
  @include arrow-lazy($size:0.5em, $color: $COLOR_PRIMARY);
}
```

<b>Paramètres</b><br>
$direction: top, $size: 1em, $color: #ccc, $color-highlight:"", $center: 50%, $margin: -1px, $pseudo: before

Markup:
<div class="tooltip">Tooltip</div>

Styleguide 8.1
*/
/*
focus()

Applique le style focus

```css
.test-button {
  @include focus($color: $COLOR_PRIMARY, $offset: -0.5em);
}
```

<b>Paramètres par défaut</b><br>
$color: #FFF, $opacity: 0.8, $offset: 3px, $width: thin, $style: dotted, $important: ''

Markup:
<button class="test-button">Button</div>

Styleguide 8.2
*/
/*
pseudoFocus

Applique le style focus sur un pseudo élément quand l'effet focus sur l'outline pose problème

```css
.tricky-focus {
  position: relative;
  &:focus { outline:0;}
  @include pseudoFocus($color: $COLOR_PRIMARY, $right: -5em, $top: -0.3em, $left: -0.3em, $bottom: -0.3em);
}
```

<b>Paramètres</b><br>
$pseudo: after, $top: -0.5em, $right: -0.5em, $bottom: -0.5em, $left: -0.5em, $color: #FFF, $opacity: 0.8, $style-line: dotted, $width: 1px

Markup:
<button class="test-button ico-train tricky-focus"><span>train</span></button>
<span>focus un peu tricky</span>

Styleguide 8.3
*/
/*
em()

Convertisseur pixel vers em

```css
.font-24-pixel { font-size: em(24); }
.font-16-pixel { font-size: em(16); }
.font-12-pixel { font-size: em(12); }
```

Markup:
<p class="font-24-pixel">24 pixels</p>
<p class="font-16-pixel">16 pixels</p>
<p class="font-12-pixel">12 pixels</p>

Styleguide 8.4
*/
/*
color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-color-title { @include color($COLOR_PRIMARY); }
.mixin-color-subtitle { @include color($COLOR_PETITS_PRIX, '', !important); }
.mixin-color-subtitle-2 { @include color( $color: #db70e6, $color-high: #830790, $important: '!important'); }
.mixin-color-subtitle-3 { @include color($color: #f97230, $color-high: 30%); }
```

Markup:
<div class="mixin-color-title">Titre 1</div>
<div class="mixin-color-subtitle">Sous-titre 1</div>
<div class="mixin-color-subtitle-2">Sous-titre 2</div>
<div class="mixin-color-subtitle-3">Sous-titre 3</div>

Styleguide 8.5
*/
/*
border-color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.
 - $alpha (optionnel) : rajoute le mode rgba. Si aucune valeur n'est entrée, le couleur passe en mode rgb, donc pas de transparence

```css
.mixin-bdcolor-1 { border:3px solid; @include border-color($COLOR_PRIMARY); }

.mixin-bdcolor-2 { border:3px solid; @include border-color($COLOR_OUIGO); }

.mixin-bdcolor-3 { border:3px solid; @include border-color($color: #73f351, $color-high: #329c15); }

.mixin-bdcolor-4 { border:3px solid; @include border-color($color: #51d7f3, $color-high: 20%); }

.mixin-bdcolor-5 { border:3px solid; @include border-color($color: $COLOR_PRIMARY, $alpha: 0.3); }
```

Markup:
<div class="block mixin-bdcolor-1">Block 1</div>
<div class="block mixin-bdcolor-2">Block 2</div>
<div class="block mixin-bdcolor-3">Block 3</div>
<div class="block mixin-bdcolor-4">Block 4</div>
<div class="block mixin-bdcolor-5">Block 5</div>

Styleguide 8.6
*/
/*
background-color()

Mixin pour gérer les contrastes accentués des couleurs en background. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-bgcolor-1 { @include background-color($COLOR_PRIMARY); }
.mixin-bgcolor-2 { @include background-color($COLOR_OUIGO); }
.mixin-bgcolor-3 { @include background-color($color: #73f351, $color-high: #329c15); }
.mixin-bgcolor-4 { @include background-color($color: #51d7f3, $color-high: 20%); }
```

Markup:
<div class="block mixin-bgcolor-1">Block 1</div>
<div class="block mixin-bgcolor-2">Block 2</div>
<div class="block mixin-bgcolor-3">Block 3</div>
<div class="block mixin-bgcolor-4">Block 4</div>

Styleguide 8.7
*/
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
fill()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c, la couleur est tirée de la map $ALT_COLORS.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Par défaut, on récupère la valeur correspondante dans la table ALT COLORS
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-fill-1 {
  @include fill($COLOR_PRIMARY);
}
.mixin-fill-2 {
  @include fill(#51d7f3, #3858ee);
}
.mixin-fill-3 {
  @include fill($COLOR_PETITS_PRIX, 20%);
}
```

Markup:
<div class="mixin-fill-1">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-2">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-3">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>

Styleguide 8.8
*/
/*
background-linear-gradient()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11y-high-c, la couleur est tirée de la map $ALT_COLORS.

Paramètres :
- $gradient-start : obligatoire, on peut utiliser une oui-colors
- $gradient-end : obligatoire, on peut utiliser une oui-colors
- direction (optionnel, par défaut : "to right")
- $darken (optionnel) : un pourcentage. Si l'argument est utilisé, il remplace les couleurs de substitution
- !important (optionnel)

```css
.mixin-background-linear-gradient {
  @include background-linear-gradient($COLOR_PRIMARY, $COLOR_SECONDARY);
  ...
}
.mixin-background-linear-gradient-darken {
  @include background-linear-gradient(#cc7b27, #e2bd97, $direction: 'to bottom', $darken: 30%);
  ...
}
```

Markup:
<div class="block mixin-background-linear-gradient"></div>
<div class="block mixin-background-linear-gradient-darken"></div>

Styleguide 8.10
*/
/* a11y-line-spacing() */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
breakpoint()

Mixin pour les mediaqueries.

Paramètres :
- $grid : obligatoire, si vous avez importer grid/global, vous pouvez utiliser les valeurs suivantes :
- $small-up : tous les écrans
- $medium-up : > 40em
- $large-up : > 54em

```css
.mixin-breakpoint {
  @include breakpoint($small-up) { // totalement facultatif
    background-color: $COLOR_PRIMARY;
  }
  @include breakpoint($medium-up) {
    background-color: $COLOR_SKIN_LIGHT;
  }
  @include breakpoint($large-up) {
    background-color: $COLOR_SECONDARY;
  }
}
```

Markup:
<div class="mixin-breakpoint"></div>

Styleguide 8.11
*/
/*
radioColorCustom()

Mixin pour les couleurs appliquées sur les radio & checkbox.

Paramètres :
- $inputColor : Couleur de l'input
- $inputColorHighC : (optionel) Couleur de l'input en contrasts accentués



```css
.radio-color-mea {
  @include radioColorCustom($COLOR_MEA_POSITIF);
}

.radio-color-custom {
  @include radioColorCustom(#594fd2, #090352);
}
```

Markup:
<div class="block">
  <p>Using MEA positive color</p>
  <label for="test-mea-1" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-mea-2" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-mea-3" class="vsc__radio radio-color-mea vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-mea-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>
<div class="block">
  <p>Using custom colors</p>
  <label for="test-custom-1" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-custom-2" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-custom-3" class="vsc__radio radio-color-custom vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-custom-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>

Styleguide 8.12
*/
/*
buttonColorCustom()

Permet de surcharger de la couleur d'un CTA conformément à la charte.

Paramètres :
- $color : couleur, obligatoirement issue des [Oui Colors](section-9.html#kssref-9-2), ou une [Custom Color](section-9.html#kssref-9-4).
- $secondary : false par défaut ; pour générer un style de bouton secondaire (bordure de couleur, fond blanc)

```css

@import "../../mixins";
@import "../../colors/oui-colors";

@include export('button--info') {
  .\$code-app {
    &-button {
      &--info {
        @include buttonColorCustom($color:$COLOR_MEA_INFO);
      }
    }
  }
}
```

N.B. supprimez le \ dans le code ci-dessus , qui a été rajouté pour contourner un problème de compilation sass.

Exemples d'usage du mixin :
- [vsc-button--smallPrice](section-6.html#vsc-button--smallPrice)
- [vsc-button--smallPrice-secondary](section-6.html#vsc-button--smallPrice-secondary)
- [vsc-button--info](section-6.html#vsc-button--info)
- [vsc-button--info-secondary](section-6.html#vsc-button--info-secondary)

Styleguide 8.13
*/
.vsa-input--select:after {
  content: "";
  position: absolute;
  display: block;
  right: 1em;
  bottom: 1.15em;
  width: 1.125em;
  height: 1em;
  background-size: 100%;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3E%3Cpath d='M60.74 139.035l-38.097 41.669 233.346 207.154 233.346-207.154-38.097-41.669-195.249 173.819-195.249-173.819z' style='fill: %23000'%3E%3C/path%3E%3C/svg%3E");
  pointer-events: none; }
  .a11y-high-c .vsa-input--select:after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3E%3Cpath d='M60.74 139.035l-38.097 41.669 233.346 207.154 233.346-207.154-38.097-41.669-195.249 173.819-195.249-173.819z' style='fill: %23000'%3E%3C/path%3E%3C/svg%3E"); }
  .a11y-inv-c .vsa-input--select:after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3E%3Cpath d='M60.74 139.035l-38.097 41.669 233.346 207.154 233.346-207.154-38.097-41.669-195.249 173.819-195.249-173.819z' style='fill: %23ff0'%3E%3C/path%3E%3C/svg%3E"); }

.vsa-input--select .vsa-input__select:-moz-focusring,
.vsa-input--select .vsa-input__select::-moz-focus-inner {
  color: transparent;
  text-shadow: 0 0 0 #000;
  background-image: none; }

/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
Mixins

Installation :
`@import "/css-tools/mixins";`

Styleguide 8.0
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
arrow-lazy()

```css
.tooltip {
  position: relative;
  display: inline-block;
  ...
  @include arrow-lazy($size:0.5em, $color: $COLOR_PRIMARY);
}
```

<b>Paramètres</b><br>
$direction: top, $size: 1em, $color: #ccc, $color-highlight:"", $center: 50%, $margin: -1px, $pseudo: before

Markup:
<div class="tooltip">Tooltip</div>

Styleguide 8.1
*/
/*
focus()

Applique le style focus

```css
.test-button {
  @include focus($color: $COLOR_PRIMARY, $offset: -0.5em);
}
```

<b>Paramètres par défaut</b><br>
$color: #FFF, $opacity: 0.8, $offset: 3px, $width: thin, $style: dotted, $important: ''

Markup:
<button class="test-button">Button</div>

Styleguide 8.2
*/
/*
pseudoFocus

Applique le style focus sur un pseudo élément quand l'effet focus sur l'outline pose problème

```css
.tricky-focus {
  position: relative;
  &:focus { outline:0;}
  @include pseudoFocus($color: $COLOR_PRIMARY, $right: -5em, $top: -0.3em, $left: -0.3em, $bottom: -0.3em);
}
```

<b>Paramètres</b><br>
$pseudo: after, $top: -0.5em, $right: -0.5em, $bottom: -0.5em, $left: -0.5em, $color: #FFF, $opacity: 0.8, $style-line: dotted, $width: 1px

Markup:
<button class="test-button ico-train tricky-focus"><span>train</span></button>
<span>focus un peu tricky</span>

Styleguide 8.3
*/
/*
em()

Convertisseur pixel vers em

```css
.font-24-pixel { font-size: em(24); }
.font-16-pixel { font-size: em(16); }
.font-12-pixel { font-size: em(12); }
```

Markup:
<p class="font-24-pixel">24 pixels</p>
<p class="font-16-pixel">16 pixels</p>
<p class="font-12-pixel">12 pixels</p>

Styleguide 8.4
*/
/*
color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-color-title { @include color($COLOR_PRIMARY); }
.mixin-color-subtitle { @include color($COLOR_PETITS_PRIX, '', !important); }
.mixin-color-subtitle-2 { @include color( $color: #db70e6, $color-high: #830790, $important: '!important'); }
.mixin-color-subtitle-3 { @include color($color: #f97230, $color-high: 30%); }
```

Markup:
<div class="mixin-color-title">Titre 1</div>
<div class="mixin-color-subtitle">Sous-titre 1</div>
<div class="mixin-color-subtitle-2">Sous-titre 2</div>
<div class="mixin-color-subtitle-3">Sous-titre 3</div>

Styleguide 8.5
*/
/*
border-color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.
 - $alpha (optionnel) : rajoute le mode rgba. Si aucune valeur n'est entrée, le couleur passe en mode rgb, donc pas de transparence

```css
.mixin-bdcolor-1 { border:3px solid; @include border-color($COLOR_PRIMARY); }

.mixin-bdcolor-2 { border:3px solid; @include border-color($COLOR_OUIGO); }

.mixin-bdcolor-3 { border:3px solid; @include border-color($color: #73f351, $color-high: #329c15); }

.mixin-bdcolor-4 { border:3px solid; @include border-color($color: #51d7f3, $color-high: 20%); }

.mixin-bdcolor-5 { border:3px solid; @include border-color($color: $COLOR_PRIMARY, $alpha: 0.3); }
```

Markup:
<div class="block mixin-bdcolor-1">Block 1</div>
<div class="block mixin-bdcolor-2">Block 2</div>
<div class="block mixin-bdcolor-3">Block 3</div>
<div class="block mixin-bdcolor-4">Block 4</div>
<div class="block mixin-bdcolor-5">Block 5</div>

Styleguide 8.6
*/
/*
background-color()

Mixin pour gérer les contrastes accentués des couleurs en background. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-bgcolor-1 { @include background-color($COLOR_PRIMARY); }
.mixin-bgcolor-2 { @include background-color($COLOR_OUIGO); }
.mixin-bgcolor-3 { @include background-color($color: #73f351, $color-high: #329c15); }
.mixin-bgcolor-4 { @include background-color($color: #51d7f3, $color-high: 20%); }
```

Markup:
<div class="block mixin-bgcolor-1">Block 1</div>
<div class="block mixin-bgcolor-2">Block 2</div>
<div class="block mixin-bgcolor-3">Block 3</div>
<div class="block mixin-bgcolor-4">Block 4</div>

Styleguide 8.7
*/
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
fill()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c, la couleur est tirée de la map $ALT_COLORS.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Par défaut, on récupère la valeur correspondante dans la table ALT COLORS
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-fill-1 {
  @include fill($COLOR_PRIMARY);
}
.mixin-fill-2 {
  @include fill(#51d7f3, #3858ee);
}
.mixin-fill-3 {
  @include fill($COLOR_PETITS_PRIX, 20%);
}
```

Markup:
<div class="mixin-fill-1">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-2">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-3">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>

Styleguide 8.8
*/
/*
background-linear-gradient()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11y-high-c, la couleur est tirée de la map $ALT_COLORS.

Paramètres :
- $gradient-start : obligatoire, on peut utiliser une oui-colors
- $gradient-end : obligatoire, on peut utiliser une oui-colors
- direction (optionnel, par défaut : "to right")
- $darken (optionnel) : un pourcentage. Si l'argument est utilisé, il remplace les couleurs de substitution
- !important (optionnel)

```css
.mixin-background-linear-gradient {
  @include background-linear-gradient($COLOR_PRIMARY, $COLOR_SECONDARY);
  ...
}
.mixin-background-linear-gradient-darken {
  @include background-linear-gradient(#cc7b27, #e2bd97, $direction: 'to bottom', $darken: 30%);
  ...
}
```

Markup:
<div class="block mixin-background-linear-gradient"></div>
<div class="block mixin-background-linear-gradient-darken"></div>

Styleguide 8.10
*/
/* a11y-line-spacing() */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
breakpoint()

Mixin pour les mediaqueries.

Paramètres :
- $grid : obligatoire, si vous avez importer grid/global, vous pouvez utiliser les valeurs suivantes :
- $small-up : tous les écrans
- $medium-up : > 40em
- $large-up : > 54em

```css
.mixin-breakpoint {
  @include breakpoint($small-up) { // totalement facultatif
    background-color: $COLOR_PRIMARY;
  }
  @include breakpoint($medium-up) {
    background-color: $COLOR_SKIN_LIGHT;
  }
  @include breakpoint($large-up) {
    background-color: $COLOR_SECONDARY;
  }
}
```

Markup:
<div class="mixin-breakpoint"></div>

Styleguide 8.11
*/
/*
radioColorCustom()

Mixin pour les couleurs appliquées sur les radio & checkbox.

Paramètres :
- $inputColor : Couleur de l'input
- $inputColorHighC : (optionel) Couleur de l'input en contrasts accentués



```css
.radio-color-mea {
  @include radioColorCustom($COLOR_MEA_POSITIF);
}

.radio-color-custom {
  @include radioColorCustom(#594fd2, #090352);
}
```

Markup:
<div class="block">
  <p>Using MEA positive color</p>
  <label for="test-mea-1" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-mea-2" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-mea-3" class="vsc__radio radio-color-mea vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-mea-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>
<div class="block">
  <p>Using custom colors</p>
  <label for="test-custom-1" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-custom-2" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-custom-3" class="vsc__radio radio-color-custom vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-custom-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>

Styleguide 8.12
*/
/*
buttonColorCustom()

Permet de surcharger de la couleur d'un CTA conformément à la charte.

Paramètres :
- $color : couleur, obligatoirement issue des [Oui Colors](section-9.html#kssref-9-2), ou une [Custom Color](section-9.html#kssref-9-4).
- $secondary : false par défaut ; pour générer un style de bouton secondaire (bordure de couleur, fond blanc)

```css

@import "../../mixins";
@import "../../colors/oui-colors";

@include export('button--info') {
  .\$code-app {
    &-button {
      &--info {
        @include buttonColorCustom($color:$COLOR_MEA_INFO);
      }
    }
  }
}
```

N.B. supprimez le \ dans le code ci-dessus , qui a été rajouté pour contourner un problème de compilation sass.

Exemples d'usage du mixin :
- [vsc-button--smallPrice](section-6.html#vsc-button--smallPrice)
- [vsc-button--smallPrice-secondary](section-6.html#vsc-button--smallPrice-secondary)
- [vsc-button--info](section-6.html#vsc-button--info)
- [vsc-button--info-secondary](section-6.html#vsc-button--info-secondary)

Styleguide 8.13
*/
/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
Mixins

Installation :
`@import "/css-tools/mixins";`

Styleguide 8.0
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
arrow-lazy()

```css
.tooltip {
  position: relative;
  display: inline-block;
  ...
  @include arrow-lazy($size:0.5em, $color: $COLOR_PRIMARY);
}
```

<b>Paramètres</b><br>
$direction: top, $size: 1em, $color: #ccc, $color-highlight:"", $center: 50%, $margin: -1px, $pseudo: before

Markup:
<div class="tooltip">Tooltip</div>

Styleguide 8.1
*/
/*
focus()

Applique le style focus

```css
.test-button {
  @include focus($color: $COLOR_PRIMARY, $offset: -0.5em);
}
```

<b>Paramètres par défaut</b><br>
$color: #FFF, $opacity: 0.8, $offset: 3px, $width: thin, $style: dotted, $important: ''

Markup:
<button class="test-button">Button</div>

Styleguide 8.2
*/
/*
pseudoFocus

Applique le style focus sur un pseudo élément quand l'effet focus sur l'outline pose problème

```css
.tricky-focus {
  position: relative;
  &:focus { outline:0;}
  @include pseudoFocus($color: $COLOR_PRIMARY, $right: -5em, $top: -0.3em, $left: -0.3em, $bottom: -0.3em);
}
```

<b>Paramètres</b><br>
$pseudo: after, $top: -0.5em, $right: -0.5em, $bottom: -0.5em, $left: -0.5em, $color: #FFF, $opacity: 0.8, $style-line: dotted, $width: 1px

Markup:
<button class="test-button ico-train tricky-focus"><span>train</span></button>
<span>focus un peu tricky</span>

Styleguide 8.3
*/
/*
em()

Convertisseur pixel vers em

```css
.font-24-pixel { font-size: em(24); }
.font-16-pixel { font-size: em(16); }
.font-12-pixel { font-size: em(12); }
```

Markup:
<p class="font-24-pixel">24 pixels</p>
<p class="font-16-pixel">16 pixels</p>
<p class="font-12-pixel">12 pixels</p>

Styleguide 8.4
*/
/*
color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-color-title { @include color($COLOR_PRIMARY); }
.mixin-color-subtitle { @include color($COLOR_PETITS_PRIX, '', !important); }
.mixin-color-subtitle-2 { @include color( $color: #db70e6, $color-high: #830790, $important: '!important'); }
.mixin-color-subtitle-3 { @include color($color: #f97230, $color-high: 30%); }
```

Markup:
<div class="mixin-color-title">Titre 1</div>
<div class="mixin-color-subtitle">Sous-titre 1</div>
<div class="mixin-color-subtitle-2">Sous-titre 2</div>
<div class="mixin-color-subtitle-3">Sous-titre 3</div>

Styleguide 8.5
*/
/*
border-color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.
 - $alpha (optionnel) : rajoute le mode rgba. Si aucune valeur n'est entrée, le couleur passe en mode rgb, donc pas de transparence

```css
.mixin-bdcolor-1 { border:3px solid; @include border-color($COLOR_PRIMARY); }

.mixin-bdcolor-2 { border:3px solid; @include border-color($COLOR_OUIGO); }

.mixin-bdcolor-3 { border:3px solid; @include border-color($color: #73f351, $color-high: #329c15); }

.mixin-bdcolor-4 { border:3px solid; @include border-color($color: #51d7f3, $color-high: 20%); }

.mixin-bdcolor-5 { border:3px solid; @include border-color($color: $COLOR_PRIMARY, $alpha: 0.3); }
```

Markup:
<div class="block mixin-bdcolor-1">Block 1</div>
<div class="block mixin-bdcolor-2">Block 2</div>
<div class="block mixin-bdcolor-3">Block 3</div>
<div class="block mixin-bdcolor-4">Block 4</div>
<div class="block mixin-bdcolor-5">Block 5</div>

Styleguide 8.6
*/
/*
background-color()

Mixin pour gérer les contrastes accentués des couleurs en background. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-bgcolor-1 { @include background-color($COLOR_PRIMARY); }
.mixin-bgcolor-2 { @include background-color($COLOR_OUIGO); }
.mixin-bgcolor-3 { @include background-color($color: #73f351, $color-high: #329c15); }
.mixin-bgcolor-4 { @include background-color($color: #51d7f3, $color-high: 20%); }
```

Markup:
<div class="block mixin-bgcolor-1">Block 1</div>
<div class="block mixin-bgcolor-2">Block 2</div>
<div class="block mixin-bgcolor-3">Block 3</div>
<div class="block mixin-bgcolor-4">Block 4</div>

Styleguide 8.7
*/
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
fill()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c, la couleur est tirée de la map $ALT_COLORS.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Par défaut, on récupère la valeur correspondante dans la table ALT COLORS
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-fill-1 {
  @include fill($COLOR_PRIMARY);
}
.mixin-fill-2 {
  @include fill(#51d7f3, #3858ee);
}
.mixin-fill-3 {
  @include fill($COLOR_PETITS_PRIX, 20%);
}
```

Markup:
<div class="mixin-fill-1">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-2">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-3">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>

Styleguide 8.8
*/
/*
background-linear-gradient()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11y-high-c, la couleur est tirée de la map $ALT_COLORS.

Paramètres :
- $gradient-start : obligatoire, on peut utiliser une oui-colors
- $gradient-end : obligatoire, on peut utiliser une oui-colors
- direction (optionnel, par défaut : "to right")
- $darken (optionnel) : un pourcentage. Si l'argument est utilisé, il remplace les couleurs de substitution
- !important (optionnel)

```css
.mixin-background-linear-gradient {
  @include background-linear-gradient($COLOR_PRIMARY, $COLOR_SECONDARY);
  ...
}
.mixin-background-linear-gradient-darken {
  @include background-linear-gradient(#cc7b27, #e2bd97, $direction: 'to bottom', $darken: 30%);
  ...
}
```

Markup:
<div class="block mixin-background-linear-gradient"></div>
<div class="block mixin-background-linear-gradient-darken"></div>

Styleguide 8.10
*/
/* a11y-line-spacing() */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
breakpoint()

Mixin pour les mediaqueries.

Paramètres :
- $grid : obligatoire, si vous avez importer grid/global, vous pouvez utiliser les valeurs suivantes :
- $small-up : tous les écrans
- $medium-up : > 40em
- $large-up : > 54em

```css
.mixin-breakpoint {
  @include breakpoint($small-up) { // totalement facultatif
    background-color: $COLOR_PRIMARY;
  }
  @include breakpoint($medium-up) {
    background-color: $COLOR_SKIN_LIGHT;
  }
  @include breakpoint($large-up) {
    background-color: $COLOR_SECONDARY;
  }
}
```

Markup:
<div class="mixin-breakpoint"></div>

Styleguide 8.11
*/
/*
radioColorCustom()

Mixin pour les couleurs appliquées sur les radio & checkbox.

Paramètres :
- $inputColor : Couleur de l'input
- $inputColorHighC : (optionel) Couleur de l'input en contrasts accentués



```css
.radio-color-mea {
  @include radioColorCustom($COLOR_MEA_POSITIF);
}

.radio-color-custom {
  @include radioColorCustom(#594fd2, #090352);
}
```

Markup:
<div class="block">
  <p>Using MEA positive color</p>
  <label for="test-mea-1" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-mea-2" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-mea-3" class="vsc__radio radio-color-mea vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-mea-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>
<div class="block">
  <p>Using custom colors</p>
  <label for="test-custom-1" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-custom-2" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-custom-3" class="vsc__radio radio-color-custom vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-custom-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>

Styleguide 8.12
*/
/*
buttonColorCustom()

Permet de surcharger de la couleur d'un CTA conformément à la charte.

Paramètres :
- $color : couleur, obligatoirement issue des [Oui Colors](section-9.html#kssref-9-2), ou une [Custom Color](section-9.html#kssref-9-4).
- $secondary : false par défaut ; pour générer un style de bouton secondaire (bordure de couleur, fond blanc)

```css

@import "../../mixins";
@import "../../colors/oui-colors";

@include export('button--info') {
  .\$code-app {
    &-button {
      &--info {
        @include buttonColorCustom($color:$COLOR_MEA_INFO);
      }
    }
  }
}
```

N.B. supprimez le \ dans le code ci-dessus , qui a été rajouté pour contourner un problème de compilation sass.

Exemples d'usage du mixin :
- [vsc-button--smallPrice](section-6.html#vsc-button--smallPrice)
- [vsc-button--smallPrice-secondary](section-6.html#vsc-button--smallPrice-secondary)
- [vsc-button--info](section-6.html#vsc-button--info)
- [vsc-button--info-secondary](section-6.html#vsc-button--info-secondary)

Styleguide 8.13
*/
.vsa-input--white .vsa-input__label {
  color: #fff; }

.vsa-input--white .vsa-input__select, .vsa-input--white .vsa-input__text {
  background: transparent;
  border-color: #fff;
  color: #fff; }
  .vsa-input--white .vsa-input__select:hover, .vsa-input--white .vsa-input__text:hover {
    background: rgba(255, 255, 255, 0.08); }
  .vsa-input--white .vsa-input__select:focus, .vsa-input--white .vsa-input__text:focus {
    outline: 1px solid rgba(255, 255, 255, 0.7); }
    .a11y-high-c .vsa-input--white .vsa-input__select:focus, .a11y-high-c .vsa-input--white .vsa-input__text:focus {
      outline-style: solid;
      outline-color: #fff;
      border-color: #fff; }

.vsa-input--white .vsa-input__select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #fff; }

.vsa-input--white .vsa-input__select option, .vsa-input--white .vsa-input__select optgroup {
  color: #ea5330 ;
  background-color: #fff; }
  .a11y-high-c .vsa-input--white .vsa-input__select option, .a11y-high-c .vsa-input--white .vsa-input__select optgroup {
    color: #d93914 ; }

.vsa-input--white .vsa-input__text::placeholder {
  color: #fff;
  opacity: 0.5; }

.vsa-input--white.vsa-input--select:before {
  display: none; }

.vsa-input--white.vsa-input--select:after {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3E%3Cpath d='M60.74 139.035l-38.097 41.669 233.346 207.154 233.346-207.154-38.097-41.669-195.249 173.819-195.249-173.819z' style='fill: %23fff'%3E%3C/path%3E%3C/svg%3E"); }

/*
MEA

Styleguide 2.0
*/
/*
MEA principaux

Permet d'afficher des messages d'information et de mise en avant.
Ces messages peuvent vivre avec ou sans titre et CTA. Il y a une hiérarchisation des messages par le picto et la couleur.

<div class="sg-info">
Installer tous les MEA :
`@import "[...]/css-tools/src/MEA/MEA";`

Il est possible d'installer un MEA spécifique. Vous devez importer aussi les pictos compilés :
`@import "[...]/css-tools/src/icons/icons-compiled"

@import "[...]/css-tools/src/MEA/MEA--default
@import "[...]/css-tools/src/MEA/MEA--broken
@import "[...]/css-tools/src/MEA/MEA--capsule
@import "[...]/css-tools/src/MEA/MEA--capsule-tiny
@import "[...]/css-tools/src/MEA/MEA--happy
@import "[...]/css-tools/src/MEA/MEA--noface
@import "[...]/css-tools/src/MEA/MEA--noradius
@import "[...]/css-tools/src/MEA/MEA--light
@import "[...]/css-tools/src/MEA/MEA--tiny
@import "[...]/css-tools/src/MEA/MEA--top
@import "[...]/css-tools/src/MEA/MEA--warning`
</div>

.vsc__MEA--broken - ...
.vsc__MEA--broken.vsc__MEA--light - ...
.vsc__MEA--happy - ...
.vsc__MEA--happy.vsc__MEA--light - ...
.vsc__MEA--warning - ...
.vsc__MEA--warning.vsc__MEA--light - ...
.vsc__MEA--info - ...
.vsc__MEA--info.vsc__MEA--light - ...
.vsc__MEA--noface - ...
.vsc__MEA--noradius - Affichage du MEA sans border-radius
.vsc__MEA--tiny - ...
.vsc__MEA--capsule - Affichage du MEA en capsule
.vsc__MEA--capsule-tiny - Affichage du MEA en petite capsule

Markup: styleguide/tpl/MEA.hbs

Styleguide 2.1
*/
/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
Extends

Installation :
`@import "../vendors/css-tools/extends";`

Styleguide 7.0
*/
/*
%focus--opacity

```css
a:focus .img-focus { @extend %focus--opacity; }
```

Markup:
<div>
  <a href="">
    <img src="http://www.voyages-sncf.com/sites/default/files/imagecache/hermes-300x230/3271692_large_10_bonnes_raisons_de_choisir_le_cap_d_agde_0.jpg" class="img-focus">
    <br>effet focus--opacity sur l'image
  </a>
</div>

Styleguide 7.1
*/
/* effect on focus image */
/*
%clearFloat

Ajuste la hateur d'une div contenant des enfants flottants

```css
.parent { @extend %clearFloat; }
```

Markup:
<div class="parent">
  <div class="child1">child 1</div>
  <div class="child2">child 2</div>
</div>

Styleguide 7.2
*/
/*
%clearButton

Reset style par défaut de l'élément button

```css
.test-button {
  @extend %clearButton;
  padding: 1em;
  border: 1px solid #000;
  border-radius: 6px;
}
```

Markup:
<button class="test-button">
  bouton
</button>

Styleguide 7.3
*/
.ItineraryTab {
  background-color: transparent;
  border: 0;
  padding: 0;
  cursor: pointer; }

/*
%outscreen

Masque un élément DOM qui reste accessible à un lecteur écran

```css
.test-button span { @extend %outscreen; }
```

Markup:
<button class="test-button ico-train"><span>train<span></button>

Styleguide 7.4
*/
/* crée une flèche (TODO à remplacer par le mixin) */
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
Mixins

Installation :
`@import "/css-tools/mixins";`

Styleguide 8.0
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
arrow-lazy()

```css
.tooltip {
  position: relative;
  display: inline-block;
  ...
  @include arrow-lazy($size:0.5em, $color: $COLOR_PRIMARY);
}
```

<b>Paramètres</b><br>
$direction: top, $size: 1em, $color: #ccc, $color-highlight:"", $center: 50%, $margin: -1px, $pseudo: before

Markup:
<div class="tooltip">Tooltip</div>

Styleguide 8.1
*/
/*
focus()

Applique le style focus

```css
.test-button {
  @include focus($color: $COLOR_PRIMARY, $offset: -0.5em);
}
```

<b>Paramètres par défaut</b><br>
$color: #FFF, $opacity: 0.8, $offset: 3px, $width: thin, $style: dotted, $important: ''

Markup:
<button class="test-button">Button</div>

Styleguide 8.2
*/
/*
pseudoFocus

Applique le style focus sur un pseudo élément quand l'effet focus sur l'outline pose problème

```css
.tricky-focus {
  position: relative;
  &:focus { outline:0;}
  @include pseudoFocus($color: $COLOR_PRIMARY, $right: -5em, $top: -0.3em, $left: -0.3em, $bottom: -0.3em);
}
```

<b>Paramètres</b><br>
$pseudo: after, $top: -0.5em, $right: -0.5em, $bottom: -0.5em, $left: -0.5em, $color: #FFF, $opacity: 0.8, $style-line: dotted, $width: 1px

Markup:
<button class="test-button ico-train tricky-focus"><span>train</span></button>
<span>focus un peu tricky</span>

Styleguide 8.3
*/
/*
em()

Convertisseur pixel vers em

```css
.font-24-pixel { font-size: em(24); }
.font-16-pixel { font-size: em(16); }
.font-12-pixel { font-size: em(12); }
```

Markup:
<p class="font-24-pixel">24 pixels</p>
<p class="font-16-pixel">16 pixels</p>
<p class="font-12-pixel">12 pixels</p>

Styleguide 8.4
*/
/*
color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-color-title { @include color($COLOR_PRIMARY); }
.mixin-color-subtitle { @include color($COLOR_PETITS_PRIX, '', !important); }
.mixin-color-subtitle-2 { @include color( $color: #db70e6, $color-high: #830790, $important: '!important'); }
.mixin-color-subtitle-3 { @include color($color: #f97230, $color-high: 30%); }
```

Markup:
<div class="mixin-color-title">Titre 1</div>
<div class="mixin-color-subtitle">Sous-titre 1</div>
<div class="mixin-color-subtitle-2">Sous-titre 2</div>
<div class="mixin-color-subtitle-3">Sous-titre 3</div>

Styleguide 8.5
*/
/*
border-color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.
 - $alpha (optionnel) : rajoute le mode rgba. Si aucune valeur n'est entrée, le couleur passe en mode rgb, donc pas de transparence

```css
.mixin-bdcolor-1 { border:3px solid; @include border-color($COLOR_PRIMARY); }

.mixin-bdcolor-2 { border:3px solid; @include border-color($COLOR_OUIGO); }

.mixin-bdcolor-3 { border:3px solid; @include border-color($color: #73f351, $color-high: #329c15); }

.mixin-bdcolor-4 { border:3px solid; @include border-color($color: #51d7f3, $color-high: 20%); }

.mixin-bdcolor-5 { border:3px solid; @include border-color($color: $COLOR_PRIMARY, $alpha: 0.3); }
```

Markup:
<div class="block mixin-bdcolor-1">Block 1</div>
<div class="block mixin-bdcolor-2">Block 2</div>
<div class="block mixin-bdcolor-3">Block 3</div>
<div class="block mixin-bdcolor-4">Block 4</div>
<div class="block mixin-bdcolor-5">Block 5</div>

Styleguide 8.6
*/
/*
background-color()

Mixin pour gérer les contrastes accentués des couleurs en background. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-bgcolor-1 { @include background-color($COLOR_PRIMARY); }
.mixin-bgcolor-2 { @include background-color($COLOR_OUIGO); }
.mixin-bgcolor-3 { @include background-color($color: #73f351, $color-high: #329c15); }
.mixin-bgcolor-4 { @include background-color($color: #51d7f3, $color-high: 20%); }
```

Markup:
<div class="block mixin-bgcolor-1">Block 1</div>
<div class="block mixin-bgcolor-2">Block 2</div>
<div class="block mixin-bgcolor-3">Block 3</div>
<div class="block mixin-bgcolor-4">Block 4</div>

Styleguide 8.7
*/
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
fill()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c, la couleur est tirée de la map $ALT_COLORS.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Par défaut, on récupère la valeur correspondante dans la table ALT COLORS
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-fill-1 {
  @include fill($COLOR_PRIMARY);
}
.mixin-fill-2 {
  @include fill(#51d7f3, #3858ee);
}
.mixin-fill-3 {
  @include fill($COLOR_PETITS_PRIX, 20%);
}
```

Markup:
<div class="mixin-fill-1">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-2">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-3">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>

Styleguide 8.8
*/
/*
background-linear-gradient()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11y-high-c, la couleur est tirée de la map $ALT_COLORS.

Paramètres :
- $gradient-start : obligatoire, on peut utiliser une oui-colors
- $gradient-end : obligatoire, on peut utiliser une oui-colors
- direction (optionnel, par défaut : "to right")
- $darken (optionnel) : un pourcentage. Si l'argument est utilisé, il remplace les couleurs de substitution
- !important (optionnel)

```css
.mixin-background-linear-gradient {
  @include background-linear-gradient($COLOR_PRIMARY, $COLOR_SECONDARY);
  ...
}
.mixin-background-linear-gradient-darken {
  @include background-linear-gradient(#cc7b27, #e2bd97, $direction: 'to bottom', $darken: 30%);
  ...
}
```

Markup:
<div class="block mixin-background-linear-gradient"></div>
<div class="block mixin-background-linear-gradient-darken"></div>

Styleguide 8.10
*/
/* a11y-line-spacing() */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
breakpoint()

Mixin pour les mediaqueries.

Paramètres :
- $grid : obligatoire, si vous avez importer grid/global, vous pouvez utiliser les valeurs suivantes :
- $small-up : tous les écrans
- $medium-up : > 40em
- $large-up : > 54em

```css
.mixin-breakpoint {
  @include breakpoint($small-up) { // totalement facultatif
    background-color: $COLOR_PRIMARY;
  }
  @include breakpoint($medium-up) {
    background-color: $COLOR_SKIN_LIGHT;
  }
  @include breakpoint($large-up) {
    background-color: $COLOR_SECONDARY;
  }
}
```

Markup:
<div class="mixin-breakpoint"></div>

Styleguide 8.11
*/
/*
radioColorCustom()

Mixin pour les couleurs appliquées sur les radio & checkbox.

Paramètres :
- $inputColor : Couleur de l'input
- $inputColorHighC : (optionel) Couleur de l'input en contrasts accentués



```css
.radio-color-mea {
  @include radioColorCustom($COLOR_MEA_POSITIF);
}

.radio-color-custom {
  @include radioColorCustom(#594fd2, #090352);
}
```

Markup:
<div class="block">
  <p>Using MEA positive color</p>
  <label for="test-mea-1" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-mea-2" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-mea-3" class="vsc__radio radio-color-mea vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-mea-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>
<div class="block">
  <p>Using custom colors</p>
  <label for="test-custom-1" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-custom-2" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-custom-3" class="vsc__radio radio-color-custom vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-custom-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>

Styleguide 8.12
*/
/*
buttonColorCustom()

Permet de surcharger de la couleur d'un CTA conformément à la charte.

Paramètres :
- $color : couleur, obligatoirement issue des [Oui Colors](section-9.html#kssref-9-2), ou une [Custom Color](section-9.html#kssref-9-4).
- $secondary : false par défaut ; pour générer un style de bouton secondaire (bordure de couleur, fond blanc)

```css

@import "../../mixins";
@import "../../colors/oui-colors";

@include export('button--info') {
  .\$code-app {
    &-button {
      &--info {
        @include buttonColorCustom($color:$COLOR_MEA_INFO);
      }
    }
  }
}
```

N.B. supprimez le \ dans le code ci-dessus , qui a été rajouté pour contourner un problème de compilation sass.

Exemples d'usage du mixin :
- [vsc-button--smallPrice](section-6.html#vsc-button--smallPrice)
- [vsc-button--smallPrice-secondary](section-6.html#vsc-button--smallPrice-secondary)
- [vsc-button--info](section-6.html#vsc-button--info)
- [vsc-button--info-secondary](section-6.html#vsc-button--info-secondary)

Styleguide 8.13
*/
/* Wrapper pour la solution d'inlining SVG*/
.vsa__MEA {
  overflow: hidden;
  background-color: #0099b4 ;
  border-radius: 10px; }
  .a11y-high-c .vsa__MEA {
    background-color: #007a89 ; }
  .vsa__MEA-content {
    position: relative;
    padding: 1.25em;
    max-width: 60em;
    margin: 0 auto;
    color: #FFF; }
    .a11y-inv-c .vsa__MEA-content {
      background: transparent !important; }
  .a11y-inv-c .vsa__MEA {
    border: 1px solid #ff0; }
  .a11y-inv-c .vsa__MEA-picto, .vsa__MEA-picto {
    position: absolute;
    top: 0;
    left: 1.25em;
    width: 1.875em;
    height: 100%;
    background-size: 120%;
    background-color: transparent !important;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20fill%3D%22rgb%28255%2C255%2C255%29%22%20style%3D%22%22%3E%3Cpath%20d%3D%22M23.849%2C19.458a1.217%2C1.217%2C0%2C0%2C0-1.215%2C1.215V33.432a1.215%2C1.215%2C0%2C1%2C0%2C2.431%2C0V20.673A1.217%2C1.217%2C0%2C0%2C0%2C23.849%2C19.458Zm0-13.291A17.906%2C17.906%2C0%2C1%2C0%2C41.755%2C24.073%2C17.926%2C17.926%2C0%2C0%2C0%2C23.849%2C6.167Zm0%2C33.382A15.476%2C15.476%2C0%2C1%2C1%2C39.326%2C24.073%2C15.493%2C15.493%2C0%2C0%2C1%2C23.849%2C39.549Zm0-25.407a1.994%2C1.994%2C0%2C1%2C0%2C1.994%2C1.994A2%2C2%2C0%2C0%2C0%2C23.849%2C14.142Z%22%2F%3E%3C%2Fsvg%3E); }
  .a11y-inv-c .vsa__MEA-close, .vsa__MEA-close {
    display: block;
    position: absolute;
    top: 0.25em;
    right: 0.25em;
    text-decoration: none;
    background-color: transparent;
    border: 0;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='svg2' xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath id='path4' d='M26.1 24l12-12c1.4-1.4-.8-3.5-2.1-2.1l-12 12-12-12c-1.4-1.4-3.5.8-2.1 2.1l12 12-12 12c-1.4 1.4.8 3.5 2.1 2.1l12-12 12 12c1.4 1.4 3.5-.8 2.1-2.1l-12-12z' fill='%23fff'/%3E%3C/svg%3E") !important;
    background-size: 1.3em !important;
    background-position: 50% 50% !important;
    background-repeat: no-repeat !important;
    width: 1.3em;
    height: 1.3em;
    padding: 1em; }
    .a11y-inv-c .vsa__MEA-close span, .vsa__MEA-close span {
      position: absolute;
      left: -10000px;
      top: auto;
      width: 1px;
      height: 1px;
      overflow: hidden; }
    .a11y-inv-c .vsa__MEA-close:hover, .a11y-inv-c .vsa__MEA-close:focus, .vsa__MEA-close:hover, .vsa__MEA-close:focus {
      color: rgba(255, 255, 255, 0.75); }
    .a11y-inv-c .vsa__MEA-close:active, .a11y-inv-c .vsa__MEA-close:focus, .vsa__MEA-close:active, .vsa__MEA-close:focus {
      transform: rotate(180deg);
      transition: transform ease 0.3s; }
  .vsa__MEA-message {
    display: table;
    font-family: AvenirBook, Arial, Helvetica, sans-serif;
    font-size: 0.9em;
    line-height: 1.2em;
    animation: vsa-fadeIn 0.3s ease-in;
    padding-left: 3.475em; }
    .a11y-inv-c .vsa__MEA-message {
      background: transparent !important; }
    .vsa__MEA-message-content {
      display: table-cell;
      padding-right: 2em;
      vertical-align: middle;
      width: 100%; }
      .vsa__MEA-message-content > h2 {
        font-weight: normal;
        margin: 0;
        font-size: 1.5em;
        line-height: 1.3em; }
      .vsa__MEA-message-content > p {
        position: relative;
        margin: 0; }
    .vsa__MEA-message-button {
      display: table-cell;
      white-space: nowrap;
      vertical-align: middle; }
      @media only screen and (max-width: 40em) {
        .vsa__MEA-message-button {
          display: inline-block;
          padding-top: 1em; } }
    .vsa__MEA-message strong {
      font-family: AvenirMedium, Arial, Helvetica, sans-serif; }
    .vsa__MEA-message a {
      color: #FFF; }
  .vsa__MEA-button {
    display: inline-block;
    padding: 0.5em 1em;
    border: 1px solid #FFF;
    border-radius: 4px;
    text-decoration: none;
    white-space: nowrap; }
    .vsa__MEA-button:focus {
      outline-color: rgba(255, 255, 255, 0.8) ;
      outline-style: dashed ;
      outline-width: thin ;
      outline-offset: -0.4em ;
      box-shadow: none ; }
    .a11y-high-c .vsa__MEA-button:focus {
      outline-color: #FFF ;
      outline-width: thin ;
      outline-offset: -0.4em ; }
  .vsa__MEA + .vsa__MEA {
    position: relative; }
    .vsa__MEA + .vsa__MEA:before {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      height: 0.5em;
      right: 0;
      left: 0;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
      z-index: 1; }
  .vsa__MEA .vsa__button {
    font-size: 0.8em;
    vertical-align: middle; }

@media only screen and (max-width: 20em) {
  .vsa__MEA-content:before, .vsa__MEA .vsa__MEA-picto {
    display: none; }
  .vsa__MEA .vsa__MEA-message {
    padding-left: 0 !important; } }

.vsa__MEA--broken {
  background-color: #d9002e ; }
  .a11y-high-c .vsa__MEA--broken {
    background-color: #b51742 ; }
  .vsa__MEA--broken .vsa__MEA-message {
    font-family: AvenirMedium, Arial, Helvetica, sans-serif; }
  .a11y-inv-c .vsa__MEA--broken .vsa__MEA-picto, .vsa__MEA--broken .vsa__MEA-picto {
    background-size: 110%;
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20fill%3D%22rgb%28255%2C255%2C255%29%22%20style%3D%22%22%3E%3Cpath%20d%3D%22M44.094%2C35.507%2C28.061%2C7.738A4.041%2C4.041%2C0%2C0%2C0%2C24.523%2C5.7h0a4.043%2C4.043%2C0%2C0%2C0-3.537%2C2.042L4.954%2C35.507A4.084%2C4.084%2C0%2C0%2C0%2C8.49%2C41.634H40.556a4.085%2C4.085%2C0%2C0%2C0%2C3.538-6.127Zm-2.166%2C2.835a1.554%2C1.554%2C0%2C0%2C1-1.372.792H8.49a1.584%2C1.584%2C0%2C0%2C1-1.371-2.377L23.151%2C8.988a1.585%2C1.585%2C0%2C0%2C1%2C2.744%2C0l16.032%2C27.77A1.557%2C1.557%2C0%2C0%2C1%2C41.928%2C38.342Zm-11.1-15.326a1.25%2C1.25%2C0%2C0%2C0-1.768%2C0l-4.541%2C4.541-4.541-4.541a1.25%2C1.25%2C0%2C0%2C0-1.768%2C1.768l4.541%2C4.541-4.541%2C4.541a1.25%2C1.25%2C0%2C1%2C0%2C1.768%2C1.768l4.541-4.541%2C4.541%2C4.541a1.25%2C1.25%2C0%2C0%2C0%2C1.768-1.768l-4.541-4.541%2C4.541-4.541A1.25%2C1.25%2C0%2C0%2C0%2C30.832%2C23.016Z%22%2F%3E%3C%2Fsvg%3E); }

/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
Extends

Installation :
`@import "../vendors/css-tools/extends";`

Styleguide 7.0
*/
/*
%focus--opacity

```css
a:focus .img-focus { @extend %focus--opacity; }
```

Markup:
<div>
  <a href="">
    <img src="http://www.voyages-sncf.com/sites/default/files/imagecache/hermes-300x230/3271692_large_10_bonnes_raisons_de_choisir_le_cap_d_agde_0.jpg" class="img-focus">
    <br>effet focus--opacity sur l'image
  </a>
</div>

Styleguide 7.1
*/
/* effect on focus image */
/*
%clearFloat

Ajuste la hateur d'une div contenant des enfants flottants

```css
.parent { @extend %clearFloat; }
```

Markup:
<div class="parent">
  <div class="child1">child 1</div>
  <div class="child2">child 2</div>
</div>

Styleguide 7.2
*/
/*
%clearButton

Reset style par défaut de l'élément button

```css
.test-button {
  @extend %clearButton;
  padding: 1em;
  border: 1px solid #000;
  border-radius: 6px;
}
```

Markup:
<button class="test-button">
  bouton
</button>

Styleguide 7.3
*/
.ItineraryTab {
  background-color: transparent;
  border: 0;
  padding: 0;
  cursor: pointer; }

/*
%outscreen

Masque un élément DOM qui reste accessible à un lecteur écran

```css
.test-button span { @extend %outscreen; }
```

Markup:
<button class="test-button ico-train"><span>train<span></button>

Styleguide 7.4
*/
/* crée une flèche (TODO à remplacer par le mixin) */
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
Mixins

Installation :
`@import "/css-tools/mixins";`

Styleguide 8.0
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
arrow-lazy()

```css
.tooltip {
  position: relative;
  display: inline-block;
  ...
  @include arrow-lazy($size:0.5em, $color: $COLOR_PRIMARY);
}
```

<b>Paramètres</b><br>
$direction: top, $size: 1em, $color: #ccc, $color-highlight:"", $center: 50%, $margin: -1px, $pseudo: before

Markup:
<div class="tooltip">Tooltip</div>

Styleguide 8.1
*/
/*
focus()

Applique le style focus

```css
.test-button {
  @include focus($color: $COLOR_PRIMARY, $offset: -0.5em);
}
```

<b>Paramètres par défaut</b><br>
$color: #FFF, $opacity: 0.8, $offset: 3px, $width: thin, $style: dotted, $important: ''

Markup:
<button class="test-button">Button</div>

Styleguide 8.2
*/
/*
pseudoFocus

Applique le style focus sur un pseudo élément quand l'effet focus sur l'outline pose problème

```css
.tricky-focus {
  position: relative;
  &:focus { outline:0;}
  @include pseudoFocus($color: $COLOR_PRIMARY, $right: -5em, $top: -0.3em, $left: -0.3em, $bottom: -0.3em);
}
```

<b>Paramètres</b><br>
$pseudo: after, $top: -0.5em, $right: -0.5em, $bottom: -0.5em, $left: -0.5em, $color: #FFF, $opacity: 0.8, $style-line: dotted, $width: 1px

Markup:
<button class="test-button ico-train tricky-focus"><span>train</span></button>
<span>focus un peu tricky</span>

Styleguide 8.3
*/
/*
em()

Convertisseur pixel vers em

```css
.font-24-pixel { font-size: em(24); }
.font-16-pixel { font-size: em(16); }
.font-12-pixel { font-size: em(12); }
```

Markup:
<p class="font-24-pixel">24 pixels</p>
<p class="font-16-pixel">16 pixels</p>
<p class="font-12-pixel">12 pixels</p>

Styleguide 8.4
*/
/*
color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-color-title { @include color($COLOR_PRIMARY); }
.mixin-color-subtitle { @include color($COLOR_PETITS_PRIX, '', !important); }
.mixin-color-subtitle-2 { @include color( $color: #db70e6, $color-high: #830790, $important: '!important'); }
.mixin-color-subtitle-3 { @include color($color: #f97230, $color-high: 30%); }
```

Markup:
<div class="mixin-color-title">Titre 1</div>
<div class="mixin-color-subtitle">Sous-titre 1</div>
<div class="mixin-color-subtitle-2">Sous-titre 2</div>
<div class="mixin-color-subtitle-3">Sous-titre 3</div>

Styleguide 8.5
*/
/*
border-color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.
 - $alpha (optionnel) : rajoute le mode rgba. Si aucune valeur n'est entrée, le couleur passe en mode rgb, donc pas de transparence

```css
.mixin-bdcolor-1 { border:3px solid; @include border-color($COLOR_PRIMARY); }

.mixin-bdcolor-2 { border:3px solid; @include border-color($COLOR_OUIGO); }

.mixin-bdcolor-3 { border:3px solid; @include border-color($color: #73f351, $color-high: #329c15); }

.mixin-bdcolor-4 { border:3px solid; @include border-color($color: #51d7f3, $color-high: 20%); }

.mixin-bdcolor-5 { border:3px solid; @include border-color($color: $COLOR_PRIMARY, $alpha: 0.3); }
```

Markup:
<div class="block mixin-bdcolor-1">Block 1</div>
<div class="block mixin-bdcolor-2">Block 2</div>
<div class="block mixin-bdcolor-3">Block 3</div>
<div class="block mixin-bdcolor-4">Block 4</div>
<div class="block mixin-bdcolor-5">Block 5</div>

Styleguide 8.6
*/
/*
background-color()

Mixin pour gérer les contrastes accentués des couleurs en background. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-bgcolor-1 { @include background-color($COLOR_PRIMARY); }
.mixin-bgcolor-2 { @include background-color($COLOR_OUIGO); }
.mixin-bgcolor-3 { @include background-color($color: #73f351, $color-high: #329c15); }
.mixin-bgcolor-4 { @include background-color($color: #51d7f3, $color-high: 20%); }
```

Markup:
<div class="block mixin-bgcolor-1">Block 1</div>
<div class="block mixin-bgcolor-2">Block 2</div>
<div class="block mixin-bgcolor-3">Block 3</div>
<div class="block mixin-bgcolor-4">Block 4</div>

Styleguide 8.7
*/
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
fill()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c, la couleur est tirée de la map $ALT_COLORS.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Par défaut, on récupère la valeur correspondante dans la table ALT COLORS
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-fill-1 {
  @include fill($COLOR_PRIMARY);
}
.mixin-fill-2 {
  @include fill(#51d7f3, #3858ee);
}
.mixin-fill-3 {
  @include fill($COLOR_PETITS_PRIX, 20%);
}
```

Markup:
<div class="mixin-fill-1">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-2">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-3">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>

Styleguide 8.8
*/
/*
background-linear-gradient()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11y-high-c, la couleur est tirée de la map $ALT_COLORS.

Paramètres :
- $gradient-start : obligatoire, on peut utiliser une oui-colors
- $gradient-end : obligatoire, on peut utiliser une oui-colors
- direction (optionnel, par défaut : "to right")
- $darken (optionnel) : un pourcentage. Si l'argument est utilisé, il remplace les couleurs de substitution
- !important (optionnel)

```css
.mixin-background-linear-gradient {
  @include background-linear-gradient($COLOR_PRIMARY, $COLOR_SECONDARY);
  ...
}
.mixin-background-linear-gradient-darken {
  @include background-linear-gradient(#cc7b27, #e2bd97, $direction: 'to bottom', $darken: 30%);
  ...
}
```

Markup:
<div class="block mixin-background-linear-gradient"></div>
<div class="block mixin-background-linear-gradient-darken"></div>

Styleguide 8.10
*/
/* a11y-line-spacing() */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
breakpoint()

Mixin pour les mediaqueries.

Paramètres :
- $grid : obligatoire, si vous avez importer grid/global, vous pouvez utiliser les valeurs suivantes :
- $small-up : tous les écrans
- $medium-up : > 40em
- $large-up : > 54em

```css
.mixin-breakpoint {
  @include breakpoint($small-up) { // totalement facultatif
    background-color: $COLOR_PRIMARY;
  }
  @include breakpoint($medium-up) {
    background-color: $COLOR_SKIN_LIGHT;
  }
  @include breakpoint($large-up) {
    background-color: $COLOR_SECONDARY;
  }
}
```

Markup:
<div class="mixin-breakpoint"></div>

Styleguide 8.11
*/
/*
radioColorCustom()

Mixin pour les couleurs appliquées sur les radio & checkbox.

Paramètres :
- $inputColor : Couleur de l'input
- $inputColorHighC : (optionel) Couleur de l'input en contrasts accentués



```css
.radio-color-mea {
  @include radioColorCustom($COLOR_MEA_POSITIF);
}

.radio-color-custom {
  @include radioColorCustom(#594fd2, #090352);
}
```

Markup:
<div class="block">
  <p>Using MEA positive color</p>
  <label for="test-mea-1" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-mea-2" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-mea-3" class="vsc__radio radio-color-mea vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-mea-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>
<div class="block">
  <p>Using custom colors</p>
  <label for="test-custom-1" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-custom-2" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-custom-3" class="vsc__radio radio-color-custom vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-custom-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>

Styleguide 8.12
*/
/*
buttonColorCustom()

Permet de surcharger de la couleur d'un CTA conformément à la charte.

Paramètres :
- $color : couleur, obligatoirement issue des [Oui Colors](section-9.html#kssref-9-2), ou une [Custom Color](section-9.html#kssref-9-4).
- $secondary : false par défaut ; pour générer un style de bouton secondaire (bordure de couleur, fond blanc)

```css

@import "../../mixins";
@import "../../colors/oui-colors";

@include export('button--info') {
  .\$code-app {
    &-button {
      &--info {
        @include buttonColorCustom($color:$COLOR_MEA_INFO);
      }
    }
  }
}
```

N.B. supprimez le \ dans le code ci-dessus , qui a été rajouté pour contourner un problème de compilation sass.

Exemples d'usage du mixin :
- [vsc-button--smallPrice](section-6.html#vsc-button--smallPrice)
- [vsc-button--smallPrice-secondary](section-6.html#vsc-button--smallPrice-secondary)
- [vsc-button--info](section-6.html#vsc-button--info)
- [vsc-button--info-secondary](section-6.html#vsc-button--info-secondary)

Styleguide 8.13
*/
/* Wrapper pour la solution d'inlining SVG*/
.vsa__MEA--happy {
  background-color: #209e67 ; }
  .a11y-high-c .vsa__MEA--happy {
    background-color: #1f7d63 ; }
  .a11y-inv-c .vsa__MEA--happy .vsa__MEA-picto, .vsa__MEA--happy .vsa__MEA-picto {
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20fill%3D%22rgb%28255%2C255%2C255%29%22%20style%3D%22%22%3E%3Cpath%20d%3D%22M14.071%2C16.326a1.013%2C1.013%2C0%2C0%2C0%2C0-1.433L11.282%2C12.1a1.037%2C1.037%2C0%2C0%2C0-1.433%2C0%2C1.013%2C1.013%2C0%2C0%2C0%2C0%2C1.433l2.789%2C2.789a1.013%2C1.013%2C0%2C0%2C0%2C1.433%2C0Zm8.721-4.188a1.015%2C1.015%2C0%2C0%2C0%2C1.013-1.014V7.18a1.013%2C1.013%2C0%2C1%2C0-2.026%2C0v3.943A1.015%2C1.015%2C0%2C0%2C0%2C22.792%2C12.137Zm1.972%2C27.815H20.82a1.013%2C1.013%2C0%2C1%2C0%2C0%2C2.026h3.944a1.013%2C1.013%2C0%2C1%2C0%2C0-2.026ZM29.51%2C15.795A10.063%2C10.063%2C0%2C1%2C0%2C16.28%2C30.96a1.59%2C1.59%2C0%2C0%2C1%2C.541%2C1.222v.433a3.548%2C3.548%2C0%2C0%2C0%2C3.544%2C3.544h4.854a3.549%2C3.549%2C0%2C0%2C0%2C3.545-3.544v-.431a1.57%2C1.57%2C0%2C0%2C1%2C.524-1.21%2C10.066%2C10.066%2C0%2C0%2C0%2C.222-15.179ZM27.978%2C29.427a3.588%2C3.588%2C0%2C0%2C0-1.241%2C2.756v.431a1.52%2C1.52%2C0%2C0%2C1-1.518%2C1.518H20.365a1.52%2C1.52%2C0%2C0%2C1-1.518-1.518v-.433a3.613%2C3.613%2C0%2C0%2C0-1.254-2.765%2C7.982%2C7.982%2C0%2C0%2C1-2.81-6.8A8.114%2C8.114%2C0%2C0%2C1%2C21.891%2C15.3a8.418%2C8.418%2C0%2C0%2C1%2C.914-.05A7.893%2C7.893%2C0%2C0%2C1%2C28.156%2C17.3a8.039%2C8.039%2C0%2C0%2C1-.178%2C12.124ZM35.734%2C12.1a1.015%2C1.015%2C0%2C0%2C0-1.433%2C0l-2.789%2C2.789a1.013%2C1.013%2C0%2C1%2C0%2C1.433%2C1.433l2.789-2.789a1.013%2C1.013%2C0%2C0%2C0%2C0-1.433ZM26.269%2C37.254H19.315a1.013%2C1.013%2C0%2C1%2C0%2C0%2C2.026h6.954a1.013%2C1.013%2C0%2C1%2C0%2C0-2.026Z%22%2F%3E%3C%2Fsvg%3E); }

/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
Extends

Installation :
`@import "../vendors/css-tools/extends";`

Styleguide 7.0
*/
/*
%focus--opacity

```css
a:focus .img-focus { @extend %focus--opacity; }
```

Markup:
<div>
  <a href="">
    <img src="http://www.voyages-sncf.com/sites/default/files/imagecache/hermes-300x230/3271692_large_10_bonnes_raisons_de_choisir_le_cap_d_agde_0.jpg" class="img-focus">
    <br>effet focus--opacity sur l'image
  </a>
</div>

Styleguide 7.1
*/
/* effect on focus image */
/*
%clearFloat

Ajuste la hateur d'une div contenant des enfants flottants

```css
.parent { @extend %clearFloat; }
```

Markup:
<div class="parent">
  <div class="child1">child 1</div>
  <div class="child2">child 2</div>
</div>

Styleguide 7.2
*/
/*
%clearButton

Reset style par défaut de l'élément button

```css
.test-button {
  @extend %clearButton;
  padding: 1em;
  border: 1px solid #000;
  border-radius: 6px;
}
```

Markup:
<button class="test-button">
  bouton
</button>

Styleguide 7.3
*/
.ItineraryTab {
  background-color: transparent;
  border: 0;
  padding: 0;
  cursor: pointer; }

/*
%outscreen

Masque un élément DOM qui reste accessible à un lecteur écran

```css
.test-button span { @extend %outscreen; }
```

Markup:
<button class="test-button ico-train"><span>train<span></button>

Styleguide 7.4
*/
/* crée une flèche (TODO à remplacer par le mixin) */
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
Mixins

Installation :
`@import "/css-tools/mixins";`

Styleguide 8.0
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
arrow-lazy()

```css
.tooltip {
  position: relative;
  display: inline-block;
  ...
  @include arrow-lazy($size:0.5em, $color: $COLOR_PRIMARY);
}
```

<b>Paramètres</b><br>
$direction: top, $size: 1em, $color: #ccc, $color-highlight:"", $center: 50%, $margin: -1px, $pseudo: before

Markup:
<div class="tooltip">Tooltip</div>

Styleguide 8.1
*/
/*
focus()

Applique le style focus

```css
.test-button {
  @include focus($color: $COLOR_PRIMARY, $offset: -0.5em);
}
```

<b>Paramètres par défaut</b><br>
$color: #FFF, $opacity: 0.8, $offset: 3px, $width: thin, $style: dotted, $important: ''

Markup:
<button class="test-button">Button</div>

Styleguide 8.2
*/
/*
pseudoFocus

Applique le style focus sur un pseudo élément quand l'effet focus sur l'outline pose problème

```css
.tricky-focus {
  position: relative;
  &:focus { outline:0;}
  @include pseudoFocus($color: $COLOR_PRIMARY, $right: -5em, $top: -0.3em, $left: -0.3em, $bottom: -0.3em);
}
```

<b>Paramètres</b><br>
$pseudo: after, $top: -0.5em, $right: -0.5em, $bottom: -0.5em, $left: -0.5em, $color: #FFF, $opacity: 0.8, $style-line: dotted, $width: 1px

Markup:
<button class="test-button ico-train tricky-focus"><span>train</span></button>
<span>focus un peu tricky</span>

Styleguide 8.3
*/
/*
em()

Convertisseur pixel vers em

```css
.font-24-pixel { font-size: em(24); }
.font-16-pixel { font-size: em(16); }
.font-12-pixel { font-size: em(12); }
```

Markup:
<p class="font-24-pixel">24 pixels</p>
<p class="font-16-pixel">16 pixels</p>
<p class="font-12-pixel">12 pixels</p>

Styleguide 8.4
*/
/*
color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-color-title { @include color($COLOR_PRIMARY); }
.mixin-color-subtitle { @include color($COLOR_PETITS_PRIX, '', !important); }
.mixin-color-subtitle-2 { @include color( $color: #db70e6, $color-high: #830790, $important: '!important'); }
.mixin-color-subtitle-3 { @include color($color: #f97230, $color-high: 30%); }
```

Markup:
<div class="mixin-color-title">Titre 1</div>
<div class="mixin-color-subtitle">Sous-titre 1</div>
<div class="mixin-color-subtitle-2">Sous-titre 2</div>
<div class="mixin-color-subtitle-3">Sous-titre 3</div>

Styleguide 8.5
*/
/*
border-color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.
 - $alpha (optionnel) : rajoute le mode rgba. Si aucune valeur n'est entrée, le couleur passe en mode rgb, donc pas de transparence

```css
.mixin-bdcolor-1 { border:3px solid; @include border-color($COLOR_PRIMARY); }

.mixin-bdcolor-2 { border:3px solid; @include border-color($COLOR_OUIGO); }

.mixin-bdcolor-3 { border:3px solid; @include border-color($color: #73f351, $color-high: #329c15); }

.mixin-bdcolor-4 { border:3px solid; @include border-color($color: #51d7f3, $color-high: 20%); }

.mixin-bdcolor-5 { border:3px solid; @include border-color($color: $COLOR_PRIMARY, $alpha: 0.3); }
```

Markup:
<div class="block mixin-bdcolor-1">Block 1</div>
<div class="block mixin-bdcolor-2">Block 2</div>
<div class="block mixin-bdcolor-3">Block 3</div>
<div class="block mixin-bdcolor-4">Block 4</div>
<div class="block mixin-bdcolor-5">Block 5</div>

Styleguide 8.6
*/
/*
background-color()

Mixin pour gérer les contrastes accentués des couleurs en background. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-bgcolor-1 { @include background-color($COLOR_PRIMARY); }
.mixin-bgcolor-2 { @include background-color($COLOR_OUIGO); }
.mixin-bgcolor-3 { @include background-color($color: #73f351, $color-high: #329c15); }
.mixin-bgcolor-4 { @include background-color($color: #51d7f3, $color-high: 20%); }
```

Markup:
<div class="block mixin-bgcolor-1">Block 1</div>
<div class="block mixin-bgcolor-2">Block 2</div>
<div class="block mixin-bgcolor-3">Block 3</div>
<div class="block mixin-bgcolor-4">Block 4</div>

Styleguide 8.7
*/
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
fill()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c, la couleur est tirée de la map $ALT_COLORS.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Par défaut, on récupère la valeur correspondante dans la table ALT COLORS
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-fill-1 {
  @include fill($COLOR_PRIMARY);
}
.mixin-fill-2 {
  @include fill(#51d7f3, #3858ee);
}
.mixin-fill-3 {
  @include fill($COLOR_PETITS_PRIX, 20%);
}
```

Markup:
<div class="mixin-fill-1">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-2">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-3">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>

Styleguide 8.8
*/
/*
background-linear-gradient()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11y-high-c, la couleur est tirée de la map $ALT_COLORS.

Paramètres :
- $gradient-start : obligatoire, on peut utiliser une oui-colors
- $gradient-end : obligatoire, on peut utiliser une oui-colors
- direction (optionnel, par défaut : "to right")
- $darken (optionnel) : un pourcentage. Si l'argument est utilisé, il remplace les couleurs de substitution
- !important (optionnel)

```css
.mixin-background-linear-gradient {
  @include background-linear-gradient($COLOR_PRIMARY, $COLOR_SECONDARY);
  ...
}
.mixin-background-linear-gradient-darken {
  @include background-linear-gradient(#cc7b27, #e2bd97, $direction: 'to bottom', $darken: 30%);
  ...
}
```

Markup:
<div class="block mixin-background-linear-gradient"></div>
<div class="block mixin-background-linear-gradient-darken"></div>

Styleguide 8.10
*/
/* a11y-line-spacing() */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
breakpoint()

Mixin pour les mediaqueries.

Paramètres :
- $grid : obligatoire, si vous avez importer grid/global, vous pouvez utiliser les valeurs suivantes :
- $small-up : tous les écrans
- $medium-up : > 40em
- $large-up : > 54em

```css
.mixin-breakpoint {
  @include breakpoint($small-up) { // totalement facultatif
    background-color: $COLOR_PRIMARY;
  }
  @include breakpoint($medium-up) {
    background-color: $COLOR_SKIN_LIGHT;
  }
  @include breakpoint($large-up) {
    background-color: $COLOR_SECONDARY;
  }
}
```

Markup:
<div class="mixin-breakpoint"></div>

Styleguide 8.11
*/
/*
radioColorCustom()

Mixin pour les couleurs appliquées sur les radio & checkbox.

Paramètres :
- $inputColor : Couleur de l'input
- $inputColorHighC : (optionel) Couleur de l'input en contrasts accentués



```css
.radio-color-mea {
  @include radioColorCustom($COLOR_MEA_POSITIF);
}

.radio-color-custom {
  @include radioColorCustom(#594fd2, #090352);
}
```

Markup:
<div class="block">
  <p>Using MEA positive color</p>
  <label for="test-mea-1" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-mea-2" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-mea-3" class="vsc__radio radio-color-mea vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-mea-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>
<div class="block">
  <p>Using custom colors</p>
  <label for="test-custom-1" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-custom-2" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-custom-3" class="vsc__radio radio-color-custom vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-custom-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>

Styleguide 8.12
*/
/*
buttonColorCustom()

Permet de surcharger de la couleur d'un CTA conformément à la charte.

Paramètres :
- $color : couleur, obligatoirement issue des [Oui Colors](section-9.html#kssref-9-2), ou une [Custom Color](section-9.html#kssref-9-4).
- $secondary : false par défaut ; pour générer un style de bouton secondaire (bordure de couleur, fond blanc)

```css

@import "../../mixins";
@import "../../colors/oui-colors";

@include export('button--info') {
  .\$code-app {
    &-button {
      &--info {
        @include buttonColorCustom($color:$COLOR_MEA_INFO);
      }
    }
  }
}
```

N.B. supprimez le \ dans le code ci-dessus , qui a été rajouté pour contourner un problème de compilation sass.

Exemples d'usage du mixin :
- [vsc-button--smallPrice](section-6.html#vsc-button--smallPrice)
- [vsc-button--smallPrice-secondary](section-6.html#vsc-button--smallPrice-secondary)
- [vsc-button--info](section-6.html#vsc-button--info)
- [vsc-button--info-secondary](section-6.html#vsc-button--info-secondary)

Styleguide 8.13
*/
/* Wrapper pour la solution d'inlining SVG*/
.vsa__MEA--warning {
  background-color: #d97201 ; }
  .a11y-high-c .vsa__MEA--warning {
    background-color: #bb4a00 ; }
  .a11y-inv-c .vsa__MEA--warning .vsa__MEA-picto, .vsa__MEA--warning .vsa__MEA-picto {
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20fill%3D%22rgb%28255%2C255%2C255%29%22%20style%3D%22%22%3E%3Cpath%20transform%3D%22rotate%28180%2024%2024%29%22%20d%3D%22M23.849%2C19.458a1.217%2C1.217%2C0%2C0%2C0-1.215%2C1.215V33.432a1.215%2C1.215%2C0%2C1%2C0%2C2.431%2C0V20.673A1.217%2C1.217%2C0%2C0%2C0%2C23.849%2C19.458Zm0-13.291A17.906%2C17.906%2C0%2C1%2C0%2C41.755%2C24.073%2C17.926%2C17.926%2C0%2C0%2C0%2C23.849%2C6.167Zm0%2C33.382A15.476%2C15.476%2C0%2C1%2C1%2C39.326%2C24.073%2C15.493%2C15.493%2C0%2C0%2C1%2C23.849%2C39.549Zm0-25.407a1.994%2C1.994%2C0%2C1%2C0%2C1.994%2C1.994A2%2C2%2C0%2C0%2C0%2C23.849%2C14.142Z%22%2F%3E%3C%2Fsvg%3E); }

/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
Extends

Installation :
`@import "../vendors/css-tools/extends";`

Styleguide 7.0
*/
/*
%focus--opacity

```css
a:focus .img-focus { @extend %focus--opacity; }
```

Markup:
<div>
  <a href="">
    <img src="http://www.voyages-sncf.com/sites/default/files/imagecache/hermes-300x230/3271692_large_10_bonnes_raisons_de_choisir_le_cap_d_agde_0.jpg" class="img-focus">
    <br>effet focus--opacity sur l'image
  </a>
</div>

Styleguide 7.1
*/
/* effect on focus image */
/*
%clearFloat

Ajuste la hateur d'une div contenant des enfants flottants

```css
.parent { @extend %clearFloat; }
```

Markup:
<div class="parent">
  <div class="child1">child 1</div>
  <div class="child2">child 2</div>
</div>

Styleguide 7.2
*/
/*
%clearButton

Reset style par défaut de l'élément button

```css
.test-button {
  @extend %clearButton;
  padding: 1em;
  border: 1px solid #000;
  border-radius: 6px;
}
```

Markup:
<button class="test-button">
  bouton
</button>

Styleguide 7.3
*/
.ItineraryTab {
  background-color: transparent;
  border: 0;
  padding: 0;
  cursor: pointer; }

/*
%outscreen

Masque un élément DOM qui reste accessible à un lecteur écran

```css
.test-button span { @extend %outscreen; }
```

Markup:
<button class="test-button ico-train"><span>train<span></button>

Styleguide 7.4
*/
/* crée une flèche (TODO à remplacer par le mixin) */
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
Mixins

Installation :
`@import "/css-tools/mixins";`

Styleguide 8.0
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
arrow-lazy()

```css
.tooltip {
  position: relative;
  display: inline-block;
  ...
  @include arrow-lazy($size:0.5em, $color: $COLOR_PRIMARY);
}
```

<b>Paramètres</b><br>
$direction: top, $size: 1em, $color: #ccc, $color-highlight:"", $center: 50%, $margin: -1px, $pseudo: before

Markup:
<div class="tooltip">Tooltip</div>

Styleguide 8.1
*/
/*
focus()

Applique le style focus

```css
.test-button {
  @include focus($color: $COLOR_PRIMARY, $offset: -0.5em);
}
```

<b>Paramètres par défaut</b><br>
$color: #FFF, $opacity: 0.8, $offset: 3px, $width: thin, $style: dotted, $important: ''

Markup:
<button class="test-button">Button</div>

Styleguide 8.2
*/
/*
pseudoFocus

Applique le style focus sur un pseudo élément quand l'effet focus sur l'outline pose problème

```css
.tricky-focus {
  position: relative;
  &:focus { outline:0;}
  @include pseudoFocus($color: $COLOR_PRIMARY, $right: -5em, $top: -0.3em, $left: -0.3em, $bottom: -0.3em);
}
```

<b>Paramètres</b><br>
$pseudo: after, $top: -0.5em, $right: -0.5em, $bottom: -0.5em, $left: -0.5em, $color: #FFF, $opacity: 0.8, $style-line: dotted, $width: 1px

Markup:
<button class="test-button ico-train tricky-focus"><span>train</span></button>
<span>focus un peu tricky</span>

Styleguide 8.3
*/
/*
em()

Convertisseur pixel vers em

```css
.font-24-pixel { font-size: em(24); }
.font-16-pixel { font-size: em(16); }
.font-12-pixel { font-size: em(12); }
```

Markup:
<p class="font-24-pixel">24 pixels</p>
<p class="font-16-pixel">16 pixels</p>
<p class="font-12-pixel">12 pixels</p>

Styleguide 8.4
*/
/*
color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-color-title { @include color($COLOR_PRIMARY); }
.mixin-color-subtitle { @include color($COLOR_PETITS_PRIX, '', !important); }
.mixin-color-subtitle-2 { @include color( $color: #db70e6, $color-high: #830790, $important: '!important'); }
.mixin-color-subtitle-3 { @include color($color: #f97230, $color-high: 30%); }
```

Markup:
<div class="mixin-color-title">Titre 1</div>
<div class="mixin-color-subtitle">Sous-titre 1</div>
<div class="mixin-color-subtitle-2">Sous-titre 2</div>
<div class="mixin-color-subtitle-3">Sous-titre 3</div>

Styleguide 8.5
*/
/*
border-color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.
 - $alpha (optionnel) : rajoute le mode rgba. Si aucune valeur n'est entrée, le couleur passe en mode rgb, donc pas de transparence

```css
.mixin-bdcolor-1 { border:3px solid; @include border-color($COLOR_PRIMARY); }

.mixin-bdcolor-2 { border:3px solid; @include border-color($COLOR_OUIGO); }

.mixin-bdcolor-3 { border:3px solid; @include border-color($color: #73f351, $color-high: #329c15); }

.mixin-bdcolor-4 { border:3px solid; @include border-color($color: #51d7f3, $color-high: 20%); }

.mixin-bdcolor-5 { border:3px solid; @include border-color($color: $COLOR_PRIMARY, $alpha: 0.3); }
```

Markup:
<div class="block mixin-bdcolor-1">Block 1</div>
<div class="block mixin-bdcolor-2">Block 2</div>
<div class="block mixin-bdcolor-3">Block 3</div>
<div class="block mixin-bdcolor-4">Block 4</div>
<div class="block mixin-bdcolor-5">Block 5</div>

Styleguide 8.6
*/
/*
background-color()

Mixin pour gérer les contrastes accentués des couleurs en background. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-bgcolor-1 { @include background-color($COLOR_PRIMARY); }
.mixin-bgcolor-2 { @include background-color($COLOR_OUIGO); }
.mixin-bgcolor-3 { @include background-color($color: #73f351, $color-high: #329c15); }
.mixin-bgcolor-4 { @include background-color($color: #51d7f3, $color-high: 20%); }
```

Markup:
<div class="block mixin-bgcolor-1">Block 1</div>
<div class="block mixin-bgcolor-2">Block 2</div>
<div class="block mixin-bgcolor-3">Block 3</div>
<div class="block mixin-bgcolor-4">Block 4</div>

Styleguide 8.7
*/
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
fill()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c, la couleur est tirée de la map $ALT_COLORS.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Par défaut, on récupère la valeur correspondante dans la table ALT COLORS
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-fill-1 {
  @include fill($COLOR_PRIMARY);
}
.mixin-fill-2 {
  @include fill(#51d7f3, #3858ee);
}
.mixin-fill-3 {
  @include fill($COLOR_PETITS_PRIX, 20%);
}
```

Markup:
<div class="mixin-fill-1">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-2">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-3">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>

Styleguide 8.8
*/
/*
background-linear-gradient()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11y-high-c, la couleur est tirée de la map $ALT_COLORS.

Paramètres :
- $gradient-start : obligatoire, on peut utiliser une oui-colors
- $gradient-end : obligatoire, on peut utiliser une oui-colors
- direction (optionnel, par défaut : "to right")
- $darken (optionnel) : un pourcentage. Si l'argument est utilisé, il remplace les couleurs de substitution
- !important (optionnel)

```css
.mixin-background-linear-gradient {
  @include background-linear-gradient($COLOR_PRIMARY, $COLOR_SECONDARY);
  ...
}
.mixin-background-linear-gradient-darken {
  @include background-linear-gradient(#cc7b27, #e2bd97, $direction: 'to bottom', $darken: 30%);
  ...
}
```

Markup:
<div class="block mixin-background-linear-gradient"></div>
<div class="block mixin-background-linear-gradient-darken"></div>

Styleguide 8.10
*/
/* a11y-line-spacing() */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
breakpoint()

Mixin pour les mediaqueries.

Paramètres :
- $grid : obligatoire, si vous avez importer grid/global, vous pouvez utiliser les valeurs suivantes :
- $small-up : tous les écrans
- $medium-up : > 40em
- $large-up : > 54em

```css
.mixin-breakpoint {
  @include breakpoint($small-up) { // totalement facultatif
    background-color: $COLOR_PRIMARY;
  }
  @include breakpoint($medium-up) {
    background-color: $COLOR_SKIN_LIGHT;
  }
  @include breakpoint($large-up) {
    background-color: $COLOR_SECONDARY;
  }
}
```

Markup:
<div class="mixin-breakpoint"></div>

Styleguide 8.11
*/
/*
radioColorCustom()

Mixin pour les couleurs appliquées sur les radio & checkbox.

Paramètres :
- $inputColor : Couleur de l'input
- $inputColorHighC : (optionel) Couleur de l'input en contrasts accentués



```css
.radio-color-mea {
  @include radioColorCustom($COLOR_MEA_POSITIF);
}

.radio-color-custom {
  @include radioColorCustom(#594fd2, #090352);
}
```

Markup:
<div class="block">
  <p>Using MEA positive color</p>
  <label for="test-mea-1" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-mea-2" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-mea-3" class="vsc__radio radio-color-mea vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-mea-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>
<div class="block">
  <p>Using custom colors</p>
  <label for="test-custom-1" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-custom-2" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-custom-3" class="vsc__radio radio-color-custom vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-custom-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>

Styleguide 8.12
*/
/*
buttonColorCustom()

Permet de surcharger de la couleur d'un CTA conformément à la charte.

Paramètres :
- $color : couleur, obligatoirement issue des [Oui Colors](section-9.html#kssref-9-2), ou une [Custom Color](section-9.html#kssref-9-4).
- $secondary : false par défaut ; pour générer un style de bouton secondaire (bordure de couleur, fond blanc)

```css

@import "../../mixins";
@import "../../colors/oui-colors";

@include export('button--info') {
  .\$code-app {
    &-button {
      &--info {
        @include buttonColorCustom($color:$COLOR_MEA_INFO);
      }
    }
  }
}
```

N.B. supprimez le \ dans le code ci-dessus , qui a été rajouté pour contourner un problème de compilation sass.

Exemples d'usage du mixin :
- [vsc-button--smallPrice](section-6.html#vsc-button--smallPrice)
- [vsc-button--smallPrice-secondary](section-6.html#vsc-button--smallPrice-secondary)
- [vsc-button--info](section-6.html#vsc-button--info)
- [vsc-button--info-secondary](section-6.html#vsc-button--info-secondary)

Styleguide 8.13
*/
/* Wrapper pour la solution d'inlining SVG*/
.vsa__MEA--noface .vsa__MEA-picto {
  display: none; }

.vsa__MEA--noface .vsa__MEA-message {
  padding-left: 0; }

/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
Extends

Installation :
`@import "../vendors/css-tools/extends";`

Styleguide 7.0
*/
/*
%focus--opacity

```css
a:focus .img-focus { @extend %focus--opacity; }
```

Markup:
<div>
  <a href="">
    <img src="http://www.voyages-sncf.com/sites/default/files/imagecache/hermes-300x230/3271692_large_10_bonnes_raisons_de_choisir_le_cap_d_agde_0.jpg" class="img-focus">
    <br>effet focus--opacity sur l'image
  </a>
</div>

Styleguide 7.1
*/
/* effect on focus image */
/*
%clearFloat

Ajuste la hateur d'une div contenant des enfants flottants

```css
.parent { @extend %clearFloat; }
```

Markup:
<div class="parent">
  <div class="child1">child 1</div>
  <div class="child2">child 2</div>
</div>

Styleguide 7.2
*/
/*
%clearButton

Reset style par défaut de l'élément button

```css
.test-button {
  @extend %clearButton;
  padding: 1em;
  border: 1px solid #000;
  border-radius: 6px;
}
```

Markup:
<button class="test-button">
  bouton
</button>

Styleguide 7.3
*/
.ItineraryTab {
  background-color: transparent;
  border: 0;
  padding: 0;
  cursor: pointer; }

/*
%outscreen

Masque un élément DOM qui reste accessible à un lecteur écran

```css
.test-button span { @extend %outscreen; }
```

Markup:
<button class="test-button ico-train"><span>train<span></button>

Styleguide 7.4
*/
/* crée une flèche (TODO à remplacer par le mixin) */
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
Mixins

Installation :
`@import "/css-tools/mixins";`

Styleguide 8.0
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
arrow-lazy()

```css
.tooltip {
  position: relative;
  display: inline-block;
  ...
  @include arrow-lazy($size:0.5em, $color: $COLOR_PRIMARY);
}
```

<b>Paramètres</b><br>
$direction: top, $size: 1em, $color: #ccc, $color-highlight:"", $center: 50%, $margin: -1px, $pseudo: before

Markup:
<div class="tooltip">Tooltip</div>

Styleguide 8.1
*/
/*
focus()

Applique le style focus

```css
.test-button {
  @include focus($color: $COLOR_PRIMARY, $offset: -0.5em);
}
```

<b>Paramètres par défaut</b><br>
$color: #FFF, $opacity: 0.8, $offset: 3px, $width: thin, $style: dotted, $important: ''

Markup:
<button class="test-button">Button</div>

Styleguide 8.2
*/
/*
pseudoFocus

Applique le style focus sur un pseudo élément quand l'effet focus sur l'outline pose problème

```css
.tricky-focus {
  position: relative;
  &:focus { outline:0;}
  @include pseudoFocus($color: $COLOR_PRIMARY, $right: -5em, $top: -0.3em, $left: -0.3em, $bottom: -0.3em);
}
```

<b>Paramètres</b><br>
$pseudo: after, $top: -0.5em, $right: -0.5em, $bottom: -0.5em, $left: -0.5em, $color: #FFF, $opacity: 0.8, $style-line: dotted, $width: 1px

Markup:
<button class="test-button ico-train tricky-focus"><span>train</span></button>
<span>focus un peu tricky</span>

Styleguide 8.3
*/
/*
em()

Convertisseur pixel vers em

```css
.font-24-pixel { font-size: em(24); }
.font-16-pixel { font-size: em(16); }
.font-12-pixel { font-size: em(12); }
```

Markup:
<p class="font-24-pixel">24 pixels</p>
<p class="font-16-pixel">16 pixels</p>
<p class="font-12-pixel">12 pixels</p>

Styleguide 8.4
*/
/*
color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-color-title { @include color($COLOR_PRIMARY); }
.mixin-color-subtitle { @include color($COLOR_PETITS_PRIX, '', !important); }
.mixin-color-subtitle-2 { @include color( $color: #db70e6, $color-high: #830790, $important: '!important'); }
.mixin-color-subtitle-3 { @include color($color: #f97230, $color-high: 30%); }
```

Markup:
<div class="mixin-color-title">Titre 1</div>
<div class="mixin-color-subtitle">Sous-titre 1</div>
<div class="mixin-color-subtitle-2">Sous-titre 2</div>
<div class="mixin-color-subtitle-3">Sous-titre 3</div>

Styleguide 8.5
*/
/*
border-color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.
 - $alpha (optionnel) : rajoute le mode rgba. Si aucune valeur n'est entrée, le couleur passe en mode rgb, donc pas de transparence

```css
.mixin-bdcolor-1 { border:3px solid; @include border-color($COLOR_PRIMARY); }

.mixin-bdcolor-2 { border:3px solid; @include border-color($COLOR_OUIGO); }

.mixin-bdcolor-3 { border:3px solid; @include border-color($color: #73f351, $color-high: #329c15); }

.mixin-bdcolor-4 { border:3px solid; @include border-color($color: #51d7f3, $color-high: 20%); }

.mixin-bdcolor-5 { border:3px solid; @include border-color($color: $COLOR_PRIMARY, $alpha: 0.3); }
```

Markup:
<div class="block mixin-bdcolor-1">Block 1</div>
<div class="block mixin-bdcolor-2">Block 2</div>
<div class="block mixin-bdcolor-3">Block 3</div>
<div class="block mixin-bdcolor-4">Block 4</div>
<div class="block mixin-bdcolor-5">Block 5</div>

Styleguide 8.6
*/
/*
background-color()

Mixin pour gérer les contrastes accentués des couleurs en background. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-bgcolor-1 { @include background-color($COLOR_PRIMARY); }
.mixin-bgcolor-2 { @include background-color($COLOR_OUIGO); }
.mixin-bgcolor-3 { @include background-color($color: #73f351, $color-high: #329c15); }
.mixin-bgcolor-4 { @include background-color($color: #51d7f3, $color-high: 20%); }
```

Markup:
<div class="block mixin-bgcolor-1">Block 1</div>
<div class="block mixin-bgcolor-2">Block 2</div>
<div class="block mixin-bgcolor-3">Block 3</div>
<div class="block mixin-bgcolor-4">Block 4</div>

Styleguide 8.7
*/
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
fill()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c, la couleur est tirée de la map $ALT_COLORS.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Par défaut, on récupère la valeur correspondante dans la table ALT COLORS
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-fill-1 {
  @include fill($COLOR_PRIMARY);
}
.mixin-fill-2 {
  @include fill(#51d7f3, #3858ee);
}
.mixin-fill-3 {
  @include fill($COLOR_PETITS_PRIX, 20%);
}
```

Markup:
<div class="mixin-fill-1">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-2">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-3">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>

Styleguide 8.8
*/
/*
background-linear-gradient()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11y-high-c, la couleur est tirée de la map $ALT_COLORS.

Paramètres :
- $gradient-start : obligatoire, on peut utiliser une oui-colors
- $gradient-end : obligatoire, on peut utiliser une oui-colors
- direction (optionnel, par défaut : "to right")
- $darken (optionnel) : un pourcentage. Si l'argument est utilisé, il remplace les couleurs de substitution
- !important (optionnel)

```css
.mixin-background-linear-gradient {
  @include background-linear-gradient($COLOR_PRIMARY, $COLOR_SECONDARY);
  ...
}
.mixin-background-linear-gradient-darken {
  @include background-linear-gradient(#cc7b27, #e2bd97, $direction: 'to bottom', $darken: 30%);
  ...
}
```

Markup:
<div class="block mixin-background-linear-gradient"></div>
<div class="block mixin-background-linear-gradient-darken"></div>

Styleguide 8.10
*/
/* a11y-line-spacing() */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
breakpoint()

Mixin pour les mediaqueries.

Paramètres :
- $grid : obligatoire, si vous avez importer grid/global, vous pouvez utiliser les valeurs suivantes :
- $small-up : tous les écrans
- $medium-up : > 40em
- $large-up : > 54em

```css
.mixin-breakpoint {
  @include breakpoint($small-up) { // totalement facultatif
    background-color: $COLOR_PRIMARY;
  }
  @include breakpoint($medium-up) {
    background-color: $COLOR_SKIN_LIGHT;
  }
  @include breakpoint($large-up) {
    background-color: $COLOR_SECONDARY;
  }
}
```

Markup:
<div class="mixin-breakpoint"></div>

Styleguide 8.11
*/
/*
radioColorCustom()

Mixin pour les couleurs appliquées sur les radio & checkbox.

Paramètres :
- $inputColor : Couleur de l'input
- $inputColorHighC : (optionel) Couleur de l'input en contrasts accentués



```css
.radio-color-mea {
  @include radioColorCustom($COLOR_MEA_POSITIF);
}

.radio-color-custom {
  @include radioColorCustom(#594fd2, #090352);
}
```

Markup:
<div class="block">
  <p>Using MEA positive color</p>
  <label for="test-mea-1" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-mea-2" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-mea-3" class="vsc__radio radio-color-mea vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-mea-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>
<div class="block">
  <p>Using custom colors</p>
  <label for="test-custom-1" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-custom-2" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-custom-3" class="vsc__radio radio-color-custom vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-custom-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>

Styleguide 8.12
*/
/*
buttonColorCustom()

Permet de surcharger de la couleur d'un CTA conformément à la charte.

Paramètres :
- $color : couleur, obligatoirement issue des [Oui Colors](section-9.html#kssref-9-2), ou une [Custom Color](section-9.html#kssref-9-4).
- $secondary : false par défaut ; pour générer un style de bouton secondaire (bordure de couleur, fond blanc)

```css

@import "../../mixins";
@import "../../colors/oui-colors";

@include export('button--info') {
  .\$code-app {
    &-button {
      &--info {
        @include buttonColorCustom($color:$COLOR_MEA_INFO);
      }
    }
  }
}
```

N.B. supprimez le \ dans le code ci-dessus , qui a été rajouté pour contourner un problème de compilation sass.

Exemples d'usage du mixin :
- [vsc-button--smallPrice](section-6.html#vsc-button--smallPrice)
- [vsc-button--smallPrice-secondary](section-6.html#vsc-button--smallPrice-secondary)
- [vsc-button--info](section-6.html#vsc-button--info)
- [vsc-button--info-secondary](section-6.html#vsc-button--info-secondary)

Styleguide 8.13
*/
/* Wrapper pour la solution d'inlining SVG*/
.vsa__MEA--noradius {
  border-radius: 0; }

/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
Extends

Installation :
`@import "../vendors/css-tools/extends";`

Styleguide 7.0
*/
/*
%focus--opacity

```css
a:focus .img-focus { @extend %focus--opacity; }
```

Markup:
<div>
  <a href="">
    <img src="http://www.voyages-sncf.com/sites/default/files/imagecache/hermes-300x230/3271692_large_10_bonnes_raisons_de_choisir_le_cap_d_agde_0.jpg" class="img-focus">
    <br>effet focus--opacity sur l'image
  </a>
</div>

Styleguide 7.1
*/
/* effect on focus image */
/*
%clearFloat

Ajuste la hateur d'une div contenant des enfants flottants

```css
.parent { @extend %clearFloat; }
```

Markup:
<div class="parent">
  <div class="child1">child 1</div>
  <div class="child2">child 2</div>
</div>

Styleguide 7.2
*/
/*
%clearButton

Reset style par défaut de l'élément button

```css
.test-button {
  @extend %clearButton;
  padding: 1em;
  border: 1px solid #000;
  border-radius: 6px;
}
```

Markup:
<button class="test-button">
  bouton
</button>

Styleguide 7.3
*/
.ItineraryTab {
  background-color: transparent;
  border: 0;
  padding: 0;
  cursor: pointer; }

/*
%outscreen

Masque un élément DOM qui reste accessible à un lecteur écran

```css
.test-button span { @extend %outscreen; }
```

Markup:
<button class="test-button ico-train"><span>train<span></button>

Styleguide 7.4
*/
/* crée une flèche (TODO à remplacer par le mixin) */
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
Mixins

Installation :
`@import "/css-tools/mixins";`

Styleguide 8.0
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
arrow-lazy()

```css
.tooltip {
  position: relative;
  display: inline-block;
  ...
  @include arrow-lazy($size:0.5em, $color: $COLOR_PRIMARY);
}
```

<b>Paramètres</b><br>
$direction: top, $size: 1em, $color: #ccc, $color-highlight:"", $center: 50%, $margin: -1px, $pseudo: before

Markup:
<div class="tooltip">Tooltip</div>

Styleguide 8.1
*/
/*
focus()

Applique le style focus

```css
.test-button {
  @include focus($color: $COLOR_PRIMARY, $offset: -0.5em);
}
```

<b>Paramètres par défaut</b><br>
$color: #FFF, $opacity: 0.8, $offset: 3px, $width: thin, $style: dotted, $important: ''

Markup:
<button class="test-button">Button</div>

Styleguide 8.2
*/
/*
pseudoFocus

Applique le style focus sur un pseudo élément quand l'effet focus sur l'outline pose problème

```css
.tricky-focus {
  position: relative;
  &:focus { outline:0;}
  @include pseudoFocus($color: $COLOR_PRIMARY, $right: -5em, $top: -0.3em, $left: -0.3em, $bottom: -0.3em);
}
```

<b>Paramètres</b><br>
$pseudo: after, $top: -0.5em, $right: -0.5em, $bottom: -0.5em, $left: -0.5em, $color: #FFF, $opacity: 0.8, $style-line: dotted, $width: 1px

Markup:
<button class="test-button ico-train tricky-focus"><span>train</span></button>
<span>focus un peu tricky</span>

Styleguide 8.3
*/
/*
em()

Convertisseur pixel vers em

```css
.font-24-pixel { font-size: em(24); }
.font-16-pixel { font-size: em(16); }
.font-12-pixel { font-size: em(12); }
```

Markup:
<p class="font-24-pixel">24 pixels</p>
<p class="font-16-pixel">16 pixels</p>
<p class="font-12-pixel">12 pixels</p>

Styleguide 8.4
*/
/*
color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-color-title { @include color($COLOR_PRIMARY); }
.mixin-color-subtitle { @include color($COLOR_PETITS_PRIX, '', !important); }
.mixin-color-subtitle-2 { @include color( $color: #db70e6, $color-high: #830790, $important: '!important'); }
.mixin-color-subtitle-3 { @include color($color: #f97230, $color-high: 30%); }
```

Markup:
<div class="mixin-color-title">Titre 1</div>
<div class="mixin-color-subtitle">Sous-titre 1</div>
<div class="mixin-color-subtitle-2">Sous-titre 2</div>
<div class="mixin-color-subtitle-3">Sous-titre 3</div>

Styleguide 8.5
*/
/*
border-color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.
 - $alpha (optionnel) : rajoute le mode rgba. Si aucune valeur n'est entrée, le couleur passe en mode rgb, donc pas de transparence

```css
.mixin-bdcolor-1 { border:3px solid; @include border-color($COLOR_PRIMARY); }

.mixin-bdcolor-2 { border:3px solid; @include border-color($COLOR_OUIGO); }

.mixin-bdcolor-3 { border:3px solid; @include border-color($color: #73f351, $color-high: #329c15); }

.mixin-bdcolor-4 { border:3px solid; @include border-color($color: #51d7f3, $color-high: 20%); }

.mixin-bdcolor-5 { border:3px solid; @include border-color($color: $COLOR_PRIMARY, $alpha: 0.3); }
```

Markup:
<div class="block mixin-bdcolor-1">Block 1</div>
<div class="block mixin-bdcolor-2">Block 2</div>
<div class="block mixin-bdcolor-3">Block 3</div>
<div class="block mixin-bdcolor-4">Block 4</div>
<div class="block mixin-bdcolor-5">Block 5</div>

Styleguide 8.6
*/
/*
background-color()

Mixin pour gérer les contrastes accentués des couleurs en background. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-bgcolor-1 { @include background-color($COLOR_PRIMARY); }
.mixin-bgcolor-2 { @include background-color($COLOR_OUIGO); }
.mixin-bgcolor-3 { @include background-color($color: #73f351, $color-high: #329c15); }
.mixin-bgcolor-4 { @include background-color($color: #51d7f3, $color-high: 20%); }
```

Markup:
<div class="block mixin-bgcolor-1">Block 1</div>
<div class="block mixin-bgcolor-2">Block 2</div>
<div class="block mixin-bgcolor-3">Block 3</div>
<div class="block mixin-bgcolor-4">Block 4</div>

Styleguide 8.7
*/
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
fill()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c, la couleur est tirée de la map $ALT_COLORS.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Par défaut, on récupère la valeur correspondante dans la table ALT COLORS
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-fill-1 {
  @include fill($COLOR_PRIMARY);
}
.mixin-fill-2 {
  @include fill(#51d7f3, #3858ee);
}
.mixin-fill-3 {
  @include fill($COLOR_PETITS_PRIX, 20%);
}
```

Markup:
<div class="mixin-fill-1">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-2">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-3">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>

Styleguide 8.8
*/
/*
background-linear-gradient()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11y-high-c, la couleur est tirée de la map $ALT_COLORS.

Paramètres :
- $gradient-start : obligatoire, on peut utiliser une oui-colors
- $gradient-end : obligatoire, on peut utiliser une oui-colors
- direction (optionnel, par défaut : "to right")
- $darken (optionnel) : un pourcentage. Si l'argument est utilisé, il remplace les couleurs de substitution
- !important (optionnel)

```css
.mixin-background-linear-gradient {
  @include background-linear-gradient($COLOR_PRIMARY, $COLOR_SECONDARY);
  ...
}
.mixin-background-linear-gradient-darken {
  @include background-linear-gradient(#cc7b27, #e2bd97, $direction: 'to bottom', $darken: 30%);
  ...
}
```

Markup:
<div class="block mixin-background-linear-gradient"></div>
<div class="block mixin-background-linear-gradient-darken"></div>

Styleguide 8.10
*/
/* a11y-line-spacing() */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
breakpoint()

Mixin pour les mediaqueries.

Paramètres :
- $grid : obligatoire, si vous avez importer grid/global, vous pouvez utiliser les valeurs suivantes :
- $small-up : tous les écrans
- $medium-up : > 40em
- $large-up : > 54em

```css
.mixin-breakpoint {
  @include breakpoint($small-up) { // totalement facultatif
    background-color: $COLOR_PRIMARY;
  }
  @include breakpoint($medium-up) {
    background-color: $COLOR_SKIN_LIGHT;
  }
  @include breakpoint($large-up) {
    background-color: $COLOR_SECONDARY;
  }
}
```

Markup:
<div class="mixin-breakpoint"></div>

Styleguide 8.11
*/
/*
radioColorCustom()

Mixin pour les couleurs appliquées sur les radio & checkbox.

Paramètres :
- $inputColor : Couleur de l'input
- $inputColorHighC : (optionel) Couleur de l'input en contrasts accentués



```css
.radio-color-mea {
  @include radioColorCustom($COLOR_MEA_POSITIF);
}

.radio-color-custom {
  @include radioColorCustom(#594fd2, #090352);
}
```

Markup:
<div class="block">
  <p>Using MEA positive color</p>
  <label for="test-mea-1" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-mea-2" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-mea-3" class="vsc__radio radio-color-mea vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-mea-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>
<div class="block">
  <p>Using custom colors</p>
  <label for="test-custom-1" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-custom-2" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-custom-3" class="vsc__radio radio-color-custom vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-custom-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>

Styleguide 8.12
*/
/*
buttonColorCustom()

Permet de surcharger de la couleur d'un CTA conformément à la charte.

Paramètres :
- $color : couleur, obligatoirement issue des [Oui Colors](section-9.html#kssref-9-2), ou une [Custom Color](section-9.html#kssref-9-4).
- $secondary : false par défaut ; pour générer un style de bouton secondaire (bordure de couleur, fond blanc)

```css

@import "../../mixins";
@import "../../colors/oui-colors";

@include export('button--info') {
  .\$code-app {
    &-button {
      &--info {
        @include buttonColorCustom($color:$COLOR_MEA_INFO);
      }
    }
  }
}
```

N.B. supprimez le \ dans le code ci-dessus , qui a été rajouté pour contourner un problème de compilation sass.

Exemples d'usage du mixin :
- [vsc-button--smallPrice](section-6.html#vsc-button--smallPrice)
- [vsc-button--smallPrice-secondary](section-6.html#vsc-button--smallPrice-secondary)
- [vsc-button--info](section-6.html#vsc-button--info)
- [vsc-button--info-secondary](section-6.html#vsc-button--info-secondary)

Styleguide 8.13
*/
/* Wrapper pour la solution d'inlining SVG*/
.vsa__MEA--light.vsa__MEA--happy {
  background-color: #e8f5f0 ; }
  .a11y-high-c .vsa__MEA--light.vsa__MEA--happy {
    background-color: #f1f5f3 ; }
  .vsa__MEA--light.vsa__MEA--happy .vsa__MEA-picto {
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20fill%3D%22rgb%2832%2C158%2C103%29%22%20style%3D%22%22%3E%3Cpath%20d%3D%22M14.071%2C16.326a1.013%2C1.013%2C0%2C0%2C0%2C0-1.433L11.282%2C12.1a1.037%2C1.037%2C0%2C0%2C0-1.433%2C0%2C1.013%2C1.013%2C0%2C0%2C0%2C0%2C1.433l2.789%2C2.789a1.013%2C1.013%2C0%2C0%2C0%2C1.433%2C0Zm8.721-4.188a1.015%2C1.015%2C0%2C0%2C0%2C1.013-1.014V7.18a1.013%2C1.013%2C0%2C1%2C0-2.026%2C0v3.943A1.015%2C1.015%2C0%2C0%2C0%2C22.792%2C12.137Zm1.972%2C27.815H20.82a1.013%2C1.013%2C0%2C1%2C0%2C0%2C2.026h3.944a1.013%2C1.013%2C0%2C1%2C0%2C0-2.026ZM29.51%2C15.795A10.063%2C10.063%2C0%2C1%2C0%2C16.28%2C30.96a1.59%2C1.59%2C0%2C0%2C1%2C.541%2C1.222v.433a3.548%2C3.548%2C0%2C0%2C0%2C3.544%2C3.544h4.854a3.549%2C3.549%2C0%2C0%2C0%2C3.545-3.544v-.431a1.57%2C1.57%2C0%2C0%2C1%2C.524-1.21%2C10.066%2C10.066%2C0%2C0%2C0%2C.222-15.179ZM27.978%2C29.427a3.588%2C3.588%2C0%2C0%2C0-1.241%2C2.756v.431a1.52%2C1.52%2C0%2C0%2C1-1.518%2C1.518H20.365a1.52%2C1.52%2C0%2C0%2C1-1.518-1.518v-.433a3.613%2C3.613%2C0%2C0%2C0-1.254-2.765%2C7.982%2C7.982%2C0%2C0%2C1-2.81-6.8A8.114%2C8.114%2C0%2C0%2C1%2C21.891%2C15.3a8.418%2C8.418%2C0%2C0%2C1%2C.914-.05A7.893%2C7.893%2C0%2C0%2C1%2C28.156%2C17.3a8.039%2C8.039%2C0%2C0%2C1-.178%2C12.124ZM35.734%2C12.1a1.015%2C1.015%2C0%2C0%2C0-1.433%2C0l-2.789%2C2.789a1.013%2C1.013%2C0%2C1%2C0%2C1.433%2C1.433l2.789-2.789a1.013%2C1.013%2C0%2C0%2C0%2C0-1.433ZM26.269%2C37.254H19.315a1.013%2C1.013%2C0%2C1%2C0%2C0%2C2.026h6.954a1.013%2C1.013%2C0%2C1%2C0%2C0-2.026Z%22%2F%3E%3C%2Fsvg%3E); }
  .vsa__MEA--light.vsa__MEA--happy .vsa-button--ghost, .vsa__MEA--light.vsa__MEA--happy .vsa-button--ghost-secondary, .vsa__MEA--light.vsa__MEA--happy .vsa-button--ghost-white {
    border-color: #209e67 ; }
    .a11y-high-c .vsa__MEA--light.vsa__MEA--happy .vsa-button--ghost, .a11y-high-c .vsa__MEA--light.vsa__MEA--happy .vsa-button--ghost-secondary, .a11y-high-c .vsa__MEA--light.vsa__MEA--happy .vsa-button--ghost-white {
      border-color: #1f7d63 ; }
    .vsa__MEA--light.vsa__MEA--happy .vsa-button--ghost:active, .vsa__MEA--light.vsa__MEA--happy .vsa-button--ghost-secondary:active, .vsa__MEA--light.vsa__MEA--happy .vsa-button--ghost-white:active, .vsa__MEA--light.vsa__MEA--happy .vsa-button--ghost:hover, .vsa__MEA--light.vsa__MEA--happy .vsa-button--ghost-secondary:hover, .vsa__MEA--light.vsa__MEA--happy .vsa-button--ghost-white:hover {
      border-color: #209e67 ;
      color: #209e67 ; }
      .a11y-high-c .vsa__MEA--light.vsa__MEA--happy .vsa-button--ghost:active, .a11y-high-c .vsa__MEA--light.vsa__MEA--happy .vsa-button--ghost-secondary:active, .a11y-high-c .vsa__MEA--light.vsa__MEA--happy .vsa-button--ghost-white:active, .a11y-high-c .vsa__MEA--light.vsa__MEA--happy .vsa-button--ghost:hover, .a11y-high-c .vsa__MEA--light.vsa__MEA--happy .vsa-button--ghost-secondary:hover, .a11y-high-c .vsa__MEA--light.vsa__MEA--happy .vsa-button--ghost-white:hover {
        border-color: #1f7d63 ; }
      .a11y-high-c .vsa__MEA--light.vsa__MEA--happy .vsa-button--ghost:active, .a11y-high-c .vsa__MEA--light.vsa__MEA--happy .vsa-button--ghost-secondary:active, .a11y-high-c .vsa__MEA--light.vsa__MEA--happy .vsa-button--ghost-white:active, .a11y-high-c .vsa__MEA--light.vsa__MEA--happy .vsa-button--ghost:hover, .a11y-high-c .vsa__MEA--light.vsa__MEA--happy .vsa-button--ghost-secondary:hover, .a11y-high-c .vsa__MEA--light.vsa__MEA--happy .vsa-button--ghost-white:hover {
        color: #1f7d63 ; }
  .vsa__MEA--light.vsa__MEA--happy a, .vsa__MEA--light.vsa__MEA--happy .vsa__MEA-content {
    color: #209e67 ; }
    .a11y-high-c .vsa__MEA--light.vsa__MEA--happy a, .a11y-high-c .vsa__MEA--light.vsa__MEA--happy .vsa__MEA-content {
      color: #1f7d63 ; }

.vsa__MEA--light.vsa__MEA--warning {
  background-color: #fbf1e5 ; }
  .a11y-high-c .vsa__MEA--light.vsa__MEA--warning {
    background-color: #fbf1e5 ; }
  .vsa__MEA--light.vsa__MEA--warning .vsa__MEA-picto {
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20fill%3D%22rgb%28217%2C114%2C1%29%22%20style%3D%22%22%3E%3Cpath%20transform%3D%22rotate%28180%2024%2024%29%22%20d%3D%22M23.849%2C19.458a1.217%2C1.217%2C0%2C0%2C0-1.215%2C1.215V33.432a1.215%2C1.215%2C0%2C1%2C0%2C2.431%2C0V20.673A1.217%2C1.217%2C0%2C0%2C0%2C23.849%2C19.458Zm0-13.291A17.906%2C17.906%2C0%2C1%2C0%2C41.755%2C24.073%2C17.926%2C17.926%2C0%2C0%2C0%2C23.849%2C6.167Zm0%2C33.382A15.476%2C15.476%2C0%2C1%2C1%2C39.326%2C24.073%2C15.493%2C15.493%2C0%2C0%2C1%2C23.849%2C39.549Zm0-25.407a1.994%2C1.994%2C0%2C1%2C0%2C1.994%2C1.994A2%2C2%2C0%2C0%2C0%2C23.849%2C14.142Z%22%2F%3E%3C%2Fsvg%3E); }
  .vsa__MEA--light.vsa__MEA--warning .vsa-button--ghost, .vsa__MEA--light.vsa__MEA--warning .vsa-button--ghost-secondary, .vsa__MEA--light.vsa__MEA--warning .vsa-button--ghost-white {
    border-color: #d97201 ; }
    .a11y-high-c .vsa__MEA--light.vsa__MEA--warning .vsa-button--ghost, .a11y-high-c .vsa__MEA--light.vsa__MEA--warning .vsa-button--ghost-secondary, .a11y-high-c .vsa__MEA--light.vsa__MEA--warning .vsa-button--ghost-white {
      border-color: #bb4a00 ; }
    .vsa__MEA--light.vsa__MEA--warning .vsa-button--ghost:active, .vsa__MEA--light.vsa__MEA--warning .vsa-button--ghost-secondary:active, .vsa__MEA--light.vsa__MEA--warning .vsa-button--ghost-white:active, .vsa__MEA--light.vsa__MEA--warning .vsa-button--ghost:hover, .vsa__MEA--light.vsa__MEA--warning .vsa-button--ghost-secondary:hover, .vsa__MEA--light.vsa__MEA--warning .vsa-button--ghost-white:hover {
      border-color: #d97201 ;
      color: #d97201 ; }
      .a11y-high-c .vsa__MEA--light.vsa__MEA--warning .vsa-button--ghost:active, .a11y-high-c .vsa__MEA--light.vsa__MEA--warning .vsa-button--ghost-secondary:active, .a11y-high-c .vsa__MEA--light.vsa__MEA--warning .vsa-button--ghost-white:active, .a11y-high-c .vsa__MEA--light.vsa__MEA--warning .vsa-button--ghost:hover, .a11y-high-c .vsa__MEA--light.vsa__MEA--warning .vsa-button--ghost-secondary:hover, .a11y-high-c .vsa__MEA--light.vsa__MEA--warning .vsa-button--ghost-white:hover {
        border-color: #bb4a00 ; }
      .a11y-high-c .vsa__MEA--light.vsa__MEA--warning .vsa-button--ghost:active, .a11y-high-c .vsa__MEA--light.vsa__MEA--warning .vsa-button--ghost-secondary:active, .a11y-high-c .vsa__MEA--light.vsa__MEA--warning .vsa-button--ghost-white:active, .a11y-high-c .vsa__MEA--light.vsa__MEA--warning .vsa-button--ghost:hover, .a11y-high-c .vsa__MEA--light.vsa__MEA--warning .vsa-button--ghost-secondary:hover, .a11y-high-c .vsa__MEA--light.vsa__MEA--warning .vsa-button--ghost-white:hover {
        color: #bb4a00 ; }
  .vsa__MEA--light.vsa__MEA--warning a, .vsa__MEA--light.vsa__MEA--warning .vsa__MEA-content {
    color: #d97201 ; }
    .a11y-high-c .vsa__MEA--light.vsa__MEA--warning a, .a11y-high-c .vsa__MEA--light.vsa__MEA--warning .vsa__MEA-content {
      color: #bb4a00 ; }

.vsa__MEA--light.vsa__MEA--broken {
  background-color: #fbe5ea ; }
  .a11y-high-c .vsa__MEA--light.vsa__MEA--broken {
    background-color: #fbe5ea ; }
  .vsa__MEA--light.vsa__MEA--broken .vsa__MEA-picto {
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20fill%3D%22rgb%28217%2C0%2C46%29%22%20style%3D%22%22%3E%3Cpath%20d%3D%22M44.094%2C35.507%2C28.061%2C7.738A4.041%2C4.041%2C0%2C0%2C0%2C24.523%2C5.7h0a4.043%2C4.043%2C0%2C0%2C0-3.537%2C2.042L4.954%2C35.507A4.084%2C4.084%2C0%2C0%2C0%2C8.49%2C41.634H40.556a4.085%2C4.085%2C0%2C0%2C0%2C3.538-6.127Zm-2.166%2C2.835a1.554%2C1.554%2C0%2C0%2C1-1.372.792H8.49a1.584%2C1.584%2C0%2C0%2C1-1.371-2.377L23.151%2C8.988a1.585%2C1.585%2C0%2C0%2C1%2C2.744%2C0l16.032%2C27.77A1.557%2C1.557%2C0%2C0%2C1%2C41.928%2C38.342Zm-11.1-15.326a1.25%2C1.25%2C0%2C0%2C0-1.768%2C0l-4.541%2C4.541-4.541-4.541a1.25%2C1.25%2C0%2C0%2C0-1.768%2C1.768l4.541%2C4.541-4.541%2C4.541a1.25%2C1.25%2C0%2C1%2C0%2C1.768%2C1.768l4.541-4.541%2C4.541%2C4.541a1.25%2C1.25%2C0%2C0%2C0%2C1.768-1.768l-4.541-4.541%2C4.541-4.541A1.25%2C1.25%2C0%2C0%2C0%2C30.832%2C23.016Z%22%2F%3E%3C%2Fsvg%3E); }
  .vsa__MEA--light.vsa__MEA--broken .vsa-button--ghost, .vsa__MEA--light.vsa__MEA--broken .vsa-button--ghost-secondary, .vsa__MEA--light.vsa__MEA--broken .vsa-button--ghost-white {
    border-color: #d9002e ; }
    .a11y-high-c .vsa__MEA--light.vsa__MEA--broken .vsa-button--ghost, .a11y-high-c .vsa__MEA--light.vsa__MEA--broken .vsa-button--ghost-secondary, .a11y-high-c .vsa__MEA--light.vsa__MEA--broken .vsa-button--ghost-white {
      border-color: #b51742 ; }
    .vsa__MEA--light.vsa__MEA--broken .vsa-button--ghost:active, .vsa__MEA--light.vsa__MEA--broken .vsa-button--ghost-secondary:active, .vsa__MEA--light.vsa__MEA--broken .vsa-button--ghost-white:active, .vsa__MEA--light.vsa__MEA--broken .vsa-button--ghost:hover, .vsa__MEA--light.vsa__MEA--broken .vsa-button--ghost-secondary:hover, .vsa__MEA--light.vsa__MEA--broken .vsa-button--ghost-white:hover {
      border-color: #d9002e ;
      color: #d9002e ; }
      .a11y-high-c .vsa__MEA--light.vsa__MEA--broken .vsa-button--ghost:active, .a11y-high-c .vsa__MEA--light.vsa__MEA--broken .vsa-button--ghost-secondary:active, .a11y-high-c .vsa__MEA--light.vsa__MEA--broken .vsa-button--ghost-white:active, .a11y-high-c .vsa__MEA--light.vsa__MEA--broken .vsa-button--ghost:hover, .a11y-high-c .vsa__MEA--light.vsa__MEA--broken .vsa-button--ghost-secondary:hover, .a11y-high-c .vsa__MEA--light.vsa__MEA--broken .vsa-button--ghost-white:hover {
        border-color: #b51742 ; }
      .a11y-high-c .vsa__MEA--light.vsa__MEA--broken .vsa-button--ghost:active, .a11y-high-c .vsa__MEA--light.vsa__MEA--broken .vsa-button--ghost-secondary:active, .a11y-high-c .vsa__MEA--light.vsa__MEA--broken .vsa-button--ghost-white:active, .a11y-high-c .vsa__MEA--light.vsa__MEA--broken .vsa-button--ghost:hover, .a11y-high-c .vsa__MEA--light.vsa__MEA--broken .vsa-button--ghost-secondary:hover, .a11y-high-c .vsa__MEA--light.vsa__MEA--broken .vsa-button--ghost-white:hover {
        color: #b51742 ; }
  .vsa__MEA--light.vsa__MEA--broken a, .vsa__MEA--light.vsa__MEA--broken .vsa__MEA-content {
    color: #d9002e ; }
    .a11y-high-c .vsa__MEA--light.vsa__MEA--broken a, .a11y-high-c .vsa__MEA--light.vsa__MEA--broken .vsa__MEA-content {
      color: #b51742 ; }

.vsa__MEA--light.vsa__MEA--info {
  background-color: #e5f5f7 ; }
  .a11y-high-c .vsa__MEA--light.vsa__MEA--info {
    background-color: #e5f5f7 ; }
  .vsa__MEA--light.vsa__MEA--info .vsa__MEA-picto {
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20fill%3D%22rgb%280%2C153%2C180%29%22%20style%3D%22%22%3E%3Cpath%20d%3D%22M23.849%2C19.458a1.217%2C1.217%2C0%2C0%2C0-1.215%2C1.215V33.432a1.215%2C1.215%2C0%2C1%2C0%2C2.431%2C0V20.673A1.217%2C1.217%2C0%2C0%2C0%2C23.849%2C19.458Zm0-13.291A17.906%2C17.906%2C0%2C1%2C0%2C41.755%2C24.073%2C17.926%2C17.926%2C0%2C0%2C0%2C23.849%2C6.167Zm0%2C33.382A15.476%2C15.476%2C0%2C1%2C1%2C39.326%2C24.073%2C15.493%2C15.493%2C0%2C0%2C1%2C23.849%2C39.549Zm0-25.407a1.994%2C1.994%2C0%2C1%2C0%2C1.994%2C1.994A2%2C2%2C0%2C0%2C0%2C23.849%2C14.142Z%22%2F%3E%3C%2Fsvg%3E); }
  .vsa__MEA--light.vsa__MEA--info .vsa-button--ghost, .vsa__MEA--light.vsa__MEA--info .vsa-button--ghost-secondary, .vsa__MEA--light.vsa__MEA--info .vsa-button--ghost-white {
    border-color: #0099b4 ; }
    .a11y-high-c .vsa__MEA--light.vsa__MEA--info .vsa-button--ghost, .a11y-high-c .vsa__MEA--light.vsa__MEA--info .vsa-button--ghost-secondary, .a11y-high-c .vsa__MEA--light.vsa__MEA--info .vsa-button--ghost-white {
      border-color: #007a89 ; }
    .vsa__MEA--light.vsa__MEA--info .vsa-button--ghost:active, .vsa__MEA--light.vsa__MEA--info .vsa-button--ghost-secondary:active, .vsa__MEA--light.vsa__MEA--info .vsa-button--ghost-white:active, .vsa__MEA--light.vsa__MEA--info .vsa-button--ghost:hover, .vsa__MEA--light.vsa__MEA--info .vsa-button--ghost-secondary:hover, .vsa__MEA--light.vsa__MEA--info .vsa-button--ghost-white:hover {
      border-color: #0099b4 ;
      color: #0099b4 ; }
      .a11y-high-c .vsa__MEA--light.vsa__MEA--info .vsa-button--ghost:active, .a11y-high-c .vsa__MEA--light.vsa__MEA--info .vsa-button--ghost-secondary:active, .a11y-high-c .vsa__MEA--light.vsa__MEA--info .vsa-button--ghost-white:active, .a11y-high-c .vsa__MEA--light.vsa__MEA--info .vsa-button--ghost:hover, .a11y-high-c .vsa__MEA--light.vsa__MEA--info .vsa-button--ghost-secondary:hover, .a11y-high-c .vsa__MEA--light.vsa__MEA--info .vsa-button--ghost-white:hover {
        border-color: #007a89 ; }
      .a11y-high-c .vsa__MEA--light.vsa__MEA--info .vsa-button--ghost:active, .a11y-high-c .vsa__MEA--light.vsa__MEA--info .vsa-button--ghost-secondary:active, .a11y-high-c .vsa__MEA--light.vsa__MEA--info .vsa-button--ghost-white:active, .a11y-high-c .vsa__MEA--light.vsa__MEA--info .vsa-button--ghost:hover, .a11y-high-c .vsa__MEA--light.vsa__MEA--info .vsa-button--ghost-secondary:hover, .a11y-high-c .vsa__MEA--light.vsa__MEA--info .vsa-button--ghost-white:hover {
        color: #007a89 ; }
  .vsa__MEA--light.vsa__MEA--info a, .vsa__MEA--light.vsa__MEA--info .vsa__MEA-content {
    color: #0099b4 ; }
    .a11y-high-c .vsa__MEA--light.vsa__MEA--info a, .a11y-high-c .vsa__MEA--light.vsa__MEA--info .vsa__MEA-content {
      color: #007a89 ; }

/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
Extends

Installation :
`@import "../vendors/css-tools/extends";`

Styleguide 7.0
*/
/*
%focus--opacity

```css
a:focus .img-focus { @extend %focus--opacity; }
```

Markup:
<div>
  <a href="">
    <img src="http://www.voyages-sncf.com/sites/default/files/imagecache/hermes-300x230/3271692_large_10_bonnes_raisons_de_choisir_le_cap_d_agde_0.jpg" class="img-focus">
    <br>effet focus--opacity sur l'image
  </a>
</div>

Styleguide 7.1
*/
/* effect on focus image */
/*
%clearFloat

Ajuste la hateur d'une div contenant des enfants flottants

```css
.parent { @extend %clearFloat; }
```

Markup:
<div class="parent">
  <div class="child1">child 1</div>
  <div class="child2">child 2</div>
</div>

Styleguide 7.2
*/
/*
%clearButton

Reset style par défaut de l'élément button

```css
.test-button {
  @extend %clearButton;
  padding: 1em;
  border: 1px solid #000;
  border-radius: 6px;
}
```

Markup:
<button class="test-button">
  bouton
</button>

Styleguide 7.3
*/
.ItineraryTab {
  background-color: transparent;
  border: 0;
  padding: 0;
  cursor: pointer; }

/*
%outscreen

Masque un élément DOM qui reste accessible à un lecteur écran

```css
.test-button span { @extend %outscreen; }
```

Markup:
<button class="test-button ico-train"><span>train<span></button>

Styleguide 7.4
*/
/* crée une flèche (TODO à remplacer par le mixin) */
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
Mixins

Installation :
`@import "/css-tools/mixins";`

Styleguide 8.0
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
arrow-lazy()

```css
.tooltip {
  position: relative;
  display: inline-block;
  ...
  @include arrow-lazy($size:0.5em, $color: $COLOR_PRIMARY);
}
```

<b>Paramètres</b><br>
$direction: top, $size: 1em, $color: #ccc, $color-highlight:"", $center: 50%, $margin: -1px, $pseudo: before

Markup:
<div class="tooltip">Tooltip</div>

Styleguide 8.1
*/
/*
focus()

Applique le style focus

```css
.test-button {
  @include focus($color: $COLOR_PRIMARY, $offset: -0.5em);
}
```

<b>Paramètres par défaut</b><br>
$color: #FFF, $opacity: 0.8, $offset: 3px, $width: thin, $style: dotted, $important: ''

Markup:
<button class="test-button">Button</div>

Styleguide 8.2
*/
/*
pseudoFocus

Applique le style focus sur un pseudo élément quand l'effet focus sur l'outline pose problème

```css
.tricky-focus {
  position: relative;
  &:focus { outline:0;}
  @include pseudoFocus($color: $COLOR_PRIMARY, $right: -5em, $top: -0.3em, $left: -0.3em, $bottom: -0.3em);
}
```

<b>Paramètres</b><br>
$pseudo: after, $top: -0.5em, $right: -0.5em, $bottom: -0.5em, $left: -0.5em, $color: #FFF, $opacity: 0.8, $style-line: dotted, $width: 1px

Markup:
<button class="test-button ico-train tricky-focus"><span>train</span></button>
<span>focus un peu tricky</span>

Styleguide 8.3
*/
/*
em()

Convertisseur pixel vers em

```css
.font-24-pixel { font-size: em(24); }
.font-16-pixel { font-size: em(16); }
.font-12-pixel { font-size: em(12); }
```

Markup:
<p class="font-24-pixel">24 pixels</p>
<p class="font-16-pixel">16 pixels</p>
<p class="font-12-pixel">12 pixels</p>

Styleguide 8.4
*/
/*
color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-color-title { @include color($COLOR_PRIMARY); }
.mixin-color-subtitle { @include color($COLOR_PETITS_PRIX, '', !important); }
.mixin-color-subtitle-2 { @include color( $color: #db70e6, $color-high: #830790, $important: '!important'); }
.mixin-color-subtitle-3 { @include color($color: #f97230, $color-high: 30%); }
```

Markup:
<div class="mixin-color-title">Titre 1</div>
<div class="mixin-color-subtitle">Sous-titre 1</div>
<div class="mixin-color-subtitle-2">Sous-titre 2</div>
<div class="mixin-color-subtitle-3">Sous-titre 3</div>

Styleguide 8.5
*/
/*
border-color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.
 - $alpha (optionnel) : rajoute le mode rgba. Si aucune valeur n'est entrée, le couleur passe en mode rgb, donc pas de transparence

```css
.mixin-bdcolor-1 { border:3px solid; @include border-color($COLOR_PRIMARY); }

.mixin-bdcolor-2 { border:3px solid; @include border-color($COLOR_OUIGO); }

.mixin-bdcolor-3 { border:3px solid; @include border-color($color: #73f351, $color-high: #329c15); }

.mixin-bdcolor-4 { border:3px solid; @include border-color($color: #51d7f3, $color-high: 20%); }

.mixin-bdcolor-5 { border:3px solid; @include border-color($color: $COLOR_PRIMARY, $alpha: 0.3); }
```

Markup:
<div class="block mixin-bdcolor-1">Block 1</div>
<div class="block mixin-bdcolor-2">Block 2</div>
<div class="block mixin-bdcolor-3">Block 3</div>
<div class="block mixin-bdcolor-4">Block 4</div>
<div class="block mixin-bdcolor-5">Block 5</div>

Styleguide 8.6
*/
/*
background-color()

Mixin pour gérer les contrastes accentués des couleurs en background. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-bgcolor-1 { @include background-color($COLOR_PRIMARY); }
.mixin-bgcolor-2 { @include background-color($COLOR_OUIGO); }
.mixin-bgcolor-3 { @include background-color($color: #73f351, $color-high: #329c15); }
.mixin-bgcolor-4 { @include background-color($color: #51d7f3, $color-high: 20%); }
```

Markup:
<div class="block mixin-bgcolor-1">Block 1</div>
<div class="block mixin-bgcolor-2">Block 2</div>
<div class="block mixin-bgcolor-3">Block 3</div>
<div class="block mixin-bgcolor-4">Block 4</div>

Styleguide 8.7
*/
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
fill()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c, la couleur est tirée de la map $ALT_COLORS.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Par défaut, on récupère la valeur correspondante dans la table ALT COLORS
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-fill-1 {
  @include fill($COLOR_PRIMARY);
}
.mixin-fill-2 {
  @include fill(#51d7f3, #3858ee);
}
.mixin-fill-3 {
  @include fill($COLOR_PETITS_PRIX, 20%);
}
```

Markup:
<div class="mixin-fill-1">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-2">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-3">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>

Styleguide 8.8
*/
/*
background-linear-gradient()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11y-high-c, la couleur est tirée de la map $ALT_COLORS.

Paramètres :
- $gradient-start : obligatoire, on peut utiliser une oui-colors
- $gradient-end : obligatoire, on peut utiliser une oui-colors
- direction (optionnel, par défaut : "to right")
- $darken (optionnel) : un pourcentage. Si l'argument est utilisé, il remplace les couleurs de substitution
- !important (optionnel)

```css
.mixin-background-linear-gradient {
  @include background-linear-gradient($COLOR_PRIMARY, $COLOR_SECONDARY);
  ...
}
.mixin-background-linear-gradient-darken {
  @include background-linear-gradient(#cc7b27, #e2bd97, $direction: 'to bottom', $darken: 30%);
  ...
}
```

Markup:
<div class="block mixin-background-linear-gradient"></div>
<div class="block mixin-background-linear-gradient-darken"></div>

Styleguide 8.10
*/
/* a11y-line-spacing() */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
breakpoint()

Mixin pour les mediaqueries.

Paramètres :
- $grid : obligatoire, si vous avez importer grid/global, vous pouvez utiliser les valeurs suivantes :
- $small-up : tous les écrans
- $medium-up : > 40em
- $large-up : > 54em

```css
.mixin-breakpoint {
  @include breakpoint($small-up) { // totalement facultatif
    background-color: $COLOR_PRIMARY;
  }
  @include breakpoint($medium-up) {
    background-color: $COLOR_SKIN_LIGHT;
  }
  @include breakpoint($large-up) {
    background-color: $COLOR_SECONDARY;
  }
}
```

Markup:
<div class="mixin-breakpoint"></div>

Styleguide 8.11
*/
/*
radioColorCustom()

Mixin pour les couleurs appliquées sur les radio & checkbox.

Paramètres :
- $inputColor : Couleur de l'input
- $inputColorHighC : (optionel) Couleur de l'input en contrasts accentués



```css
.radio-color-mea {
  @include radioColorCustom($COLOR_MEA_POSITIF);
}

.radio-color-custom {
  @include radioColorCustom(#594fd2, #090352);
}
```

Markup:
<div class="block">
  <p>Using MEA positive color</p>
  <label for="test-mea-1" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-mea-2" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-mea-3" class="vsc__radio radio-color-mea vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-mea-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>
<div class="block">
  <p>Using custom colors</p>
  <label for="test-custom-1" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-custom-2" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-custom-3" class="vsc__radio radio-color-custom vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-custom-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>

Styleguide 8.12
*/
/*
buttonColorCustom()

Permet de surcharger de la couleur d'un CTA conformément à la charte.

Paramètres :
- $color : couleur, obligatoirement issue des [Oui Colors](section-9.html#kssref-9-2), ou une [Custom Color](section-9.html#kssref-9-4).
- $secondary : false par défaut ; pour générer un style de bouton secondaire (bordure de couleur, fond blanc)

```css

@import "../../mixins";
@import "../../colors/oui-colors";

@include export('button--info') {
  .\$code-app {
    &-button {
      &--info {
        @include buttonColorCustom($color:$COLOR_MEA_INFO);
      }
    }
  }
}
```

N.B. supprimez le \ dans le code ci-dessus , qui a été rajouté pour contourner un problème de compilation sass.

Exemples d'usage du mixin :
- [vsc-button--smallPrice](section-6.html#vsc-button--smallPrice)
- [vsc-button--smallPrice-secondary](section-6.html#vsc-button--smallPrice-secondary)
- [vsc-button--info](section-6.html#vsc-button--info)
- [vsc-button--info-secondary](section-6.html#vsc-button--info-secondary)

Styleguide 8.13
*/
/* Wrapper pour la solution d'inlining SVG*/
.vsa__MEA--tiny .vsa__MEA-content, .vsa__MEA--capsule-tiny .vsa__MEA-content {
  padding: 0.7em; }
  .vsa__MEA--tiny .vsa__MEA-content:before, .vsa__MEA--capsule-tiny .vsa__MEA-content:before {
    top: -0.2em;
    left: -5.6em; }

.vsa__MEA--tiny .vsa__MEA-message, .vsa__MEA--capsule-tiny .vsa__MEA-message {
  padding-right: 0.5em;
  padding-left: 3.975em; }

.vsa__MEA--tiny .vsa__MEA-close, .vsa__MEA--capsule-tiny .vsa__MEA-close {
  top: -0.1em;
  right: -0.1em; }

/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
Extends

Installation :
`@import "../vendors/css-tools/extends";`

Styleguide 7.0
*/
/*
%focus--opacity

```css
a:focus .img-focus { @extend %focus--opacity; }
```

Markup:
<div>
  <a href="">
    <img src="http://www.voyages-sncf.com/sites/default/files/imagecache/hermes-300x230/3271692_large_10_bonnes_raisons_de_choisir_le_cap_d_agde_0.jpg" class="img-focus">
    <br>effet focus--opacity sur l'image
  </a>
</div>

Styleguide 7.1
*/
/* effect on focus image */
/*
%clearFloat

Ajuste la hateur d'une div contenant des enfants flottants

```css
.parent { @extend %clearFloat; }
```

Markup:
<div class="parent">
  <div class="child1">child 1</div>
  <div class="child2">child 2</div>
</div>

Styleguide 7.2
*/
/*
%clearButton

Reset style par défaut de l'élément button

```css
.test-button {
  @extend %clearButton;
  padding: 1em;
  border: 1px solid #000;
  border-radius: 6px;
}
```

Markup:
<button class="test-button">
  bouton
</button>

Styleguide 7.3
*/
.ItineraryTab {
  background-color: transparent;
  border: 0;
  padding: 0;
  cursor: pointer; }

/*
%outscreen

Masque un élément DOM qui reste accessible à un lecteur écran

```css
.test-button span { @extend %outscreen; }
```

Markup:
<button class="test-button ico-train"><span>train<span></button>

Styleguide 7.4
*/
/* crée une flèche (TODO à remplacer par le mixin) */
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
Mixins

Installation :
`@import "/css-tools/mixins";`

Styleguide 8.0
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
arrow-lazy()

```css
.tooltip {
  position: relative;
  display: inline-block;
  ...
  @include arrow-lazy($size:0.5em, $color: $COLOR_PRIMARY);
}
```

<b>Paramètres</b><br>
$direction: top, $size: 1em, $color: #ccc, $color-highlight:"", $center: 50%, $margin: -1px, $pseudo: before

Markup:
<div class="tooltip">Tooltip</div>

Styleguide 8.1
*/
/*
focus()

Applique le style focus

```css
.test-button {
  @include focus($color: $COLOR_PRIMARY, $offset: -0.5em);
}
```

<b>Paramètres par défaut</b><br>
$color: #FFF, $opacity: 0.8, $offset: 3px, $width: thin, $style: dotted, $important: ''

Markup:
<button class="test-button">Button</div>

Styleguide 8.2
*/
/*
pseudoFocus

Applique le style focus sur un pseudo élément quand l'effet focus sur l'outline pose problème

```css
.tricky-focus {
  position: relative;
  &:focus { outline:0;}
  @include pseudoFocus($color: $COLOR_PRIMARY, $right: -5em, $top: -0.3em, $left: -0.3em, $bottom: -0.3em);
}
```

<b>Paramètres</b><br>
$pseudo: after, $top: -0.5em, $right: -0.5em, $bottom: -0.5em, $left: -0.5em, $color: #FFF, $opacity: 0.8, $style-line: dotted, $width: 1px

Markup:
<button class="test-button ico-train tricky-focus"><span>train</span></button>
<span>focus un peu tricky</span>

Styleguide 8.3
*/
/*
em()

Convertisseur pixel vers em

```css
.font-24-pixel { font-size: em(24); }
.font-16-pixel { font-size: em(16); }
.font-12-pixel { font-size: em(12); }
```

Markup:
<p class="font-24-pixel">24 pixels</p>
<p class="font-16-pixel">16 pixels</p>
<p class="font-12-pixel">12 pixels</p>

Styleguide 8.4
*/
/*
color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-color-title { @include color($COLOR_PRIMARY); }
.mixin-color-subtitle { @include color($COLOR_PETITS_PRIX, '', !important); }
.mixin-color-subtitle-2 { @include color( $color: #db70e6, $color-high: #830790, $important: '!important'); }
.mixin-color-subtitle-3 { @include color($color: #f97230, $color-high: 30%); }
```

Markup:
<div class="mixin-color-title">Titre 1</div>
<div class="mixin-color-subtitle">Sous-titre 1</div>
<div class="mixin-color-subtitle-2">Sous-titre 2</div>
<div class="mixin-color-subtitle-3">Sous-titre 3</div>

Styleguide 8.5
*/
/*
border-color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.
 - $alpha (optionnel) : rajoute le mode rgba. Si aucune valeur n'est entrée, le couleur passe en mode rgb, donc pas de transparence

```css
.mixin-bdcolor-1 { border:3px solid; @include border-color($COLOR_PRIMARY); }

.mixin-bdcolor-2 { border:3px solid; @include border-color($COLOR_OUIGO); }

.mixin-bdcolor-3 { border:3px solid; @include border-color($color: #73f351, $color-high: #329c15); }

.mixin-bdcolor-4 { border:3px solid; @include border-color($color: #51d7f3, $color-high: 20%); }

.mixin-bdcolor-5 { border:3px solid; @include border-color($color: $COLOR_PRIMARY, $alpha: 0.3); }
```

Markup:
<div class="block mixin-bdcolor-1">Block 1</div>
<div class="block mixin-bdcolor-2">Block 2</div>
<div class="block mixin-bdcolor-3">Block 3</div>
<div class="block mixin-bdcolor-4">Block 4</div>
<div class="block mixin-bdcolor-5">Block 5</div>

Styleguide 8.6
*/
/*
background-color()

Mixin pour gérer les contrastes accentués des couleurs en background. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-bgcolor-1 { @include background-color($COLOR_PRIMARY); }
.mixin-bgcolor-2 { @include background-color($COLOR_OUIGO); }
.mixin-bgcolor-3 { @include background-color($color: #73f351, $color-high: #329c15); }
.mixin-bgcolor-4 { @include background-color($color: #51d7f3, $color-high: 20%); }
```

Markup:
<div class="block mixin-bgcolor-1">Block 1</div>
<div class="block mixin-bgcolor-2">Block 2</div>
<div class="block mixin-bgcolor-3">Block 3</div>
<div class="block mixin-bgcolor-4">Block 4</div>

Styleguide 8.7
*/
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
fill()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c, la couleur est tirée de la map $ALT_COLORS.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Par défaut, on récupère la valeur correspondante dans la table ALT COLORS
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-fill-1 {
  @include fill($COLOR_PRIMARY);
}
.mixin-fill-2 {
  @include fill(#51d7f3, #3858ee);
}
.mixin-fill-3 {
  @include fill($COLOR_PETITS_PRIX, 20%);
}
```

Markup:
<div class="mixin-fill-1">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-2">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-3">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>

Styleguide 8.8
*/
/*
background-linear-gradient()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11y-high-c, la couleur est tirée de la map $ALT_COLORS.

Paramètres :
- $gradient-start : obligatoire, on peut utiliser une oui-colors
- $gradient-end : obligatoire, on peut utiliser une oui-colors
- direction (optionnel, par défaut : "to right")
- $darken (optionnel) : un pourcentage. Si l'argument est utilisé, il remplace les couleurs de substitution
- !important (optionnel)

```css
.mixin-background-linear-gradient {
  @include background-linear-gradient($COLOR_PRIMARY, $COLOR_SECONDARY);
  ...
}
.mixin-background-linear-gradient-darken {
  @include background-linear-gradient(#cc7b27, #e2bd97, $direction: 'to bottom', $darken: 30%);
  ...
}
```

Markup:
<div class="block mixin-background-linear-gradient"></div>
<div class="block mixin-background-linear-gradient-darken"></div>

Styleguide 8.10
*/
/* a11y-line-spacing() */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
breakpoint()

Mixin pour les mediaqueries.

Paramètres :
- $grid : obligatoire, si vous avez importer grid/global, vous pouvez utiliser les valeurs suivantes :
- $small-up : tous les écrans
- $medium-up : > 40em
- $large-up : > 54em

```css
.mixin-breakpoint {
  @include breakpoint($small-up) { // totalement facultatif
    background-color: $COLOR_PRIMARY;
  }
  @include breakpoint($medium-up) {
    background-color: $COLOR_SKIN_LIGHT;
  }
  @include breakpoint($large-up) {
    background-color: $COLOR_SECONDARY;
  }
}
```

Markup:
<div class="mixin-breakpoint"></div>

Styleguide 8.11
*/
/*
radioColorCustom()

Mixin pour les couleurs appliquées sur les radio & checkbox.

Paramètres :
- $inputColor : Couleur de l'input
- $inputColorHighC : (optionel) Couleur de l'input en contrasts accentués



```css
.radio-color-mea {
  @include radioColorCustom($COLOR_MEA_POSITIF);
}

.radio-color-custom {
  @include radioColorCustom(#594fd2, #090352);
}
```

Markup:
<div class="block">
  <p>Using MEA positive color</p>
  <label for="test-mea-1" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-mea-2" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-mea-3" class="vsc__radio radio-color-mea vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-mea-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>
<div class="block">
  <p>Using custom colors</p>
  <label for="test-custom-1" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-custom-2" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-custom-3" class="vsc__radio radio-color-custom vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-custom-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>

Styleguide 8.12
*/
/*
buttonColorCustom()

Permet de surcharger de la couleur d'un CTA conformément à la charte.

Paramètres :
- $color : couleur, obligatoirement issue des [Oui Colors](section-9.html#kssref-9-2), ou une [Custom Color](section-9.html#kssref-9-4).
- $secondary : false par défaut ; pour générer un style de bouton secondaire (bordure de couleur, fond blanc)

```css

@import "../../mixins";
@import "../../colors/oui-colors";

@include export('button--info') {
  .\$code-app {
    &-button {
      &--info {
        @include buttonColorCustom($color:$COLOR_MEA_INFO);
      }
    }
  }
}
```

N.B. supprimez le \ dans le code ci-dessus , qui a été rajouté pour contourner un problème de compilation sass.

Exemples d'usage du mixin :
- [vsc-button--smallPrice](section-6.html#vsc-button--smallPrice)
- [vsc-button--smallPrice-secondary](section-6.html#vsc-button--smallPrice-secondary)
- [vsc-button--info](section-6.html#vsc-button--info)
- [vsc-button--info-secondary](section-6.html#vsc-button--info-secondary)

Styleguide 8.13
*/
/* Wrapper pour la solution d'inlining SVG*/
.vsa__MEA--capsule, .vsa__MEA--capsule-tiny {
  background-color: #209e67 ;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.5);
  border-radius: 3.5em;
  overflow: visible; }
  .a11y-high-c .vsa__MEA--capsule, .a11y-high-c .vsa__MEA--capsule-tiny {
    background-color: #1f7d63 ; }
  .vsa__MEA--capsule .vsa__MEA-message, .vsa__MEA--capsule-tiny .vsa__MEA-message {
    padding-left: 3.125em; }
  .vsa__MEA--capsule .vsa__MEA-content::before, .vsa__MEA--capsule-tiny .vsa__MEA-content::before {
    background: transparent; }
  .vsa__MEA--capsule .vsa__MEA-content, .vsa__MEA--capsule-tiny .vsa__MEA-content {
    background: transparent; }
    .vsa__MEA--capsule .vsa__MEA-content::after, .vsa__MEA--capsule-tiny .vsa__MEA-content::after {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      margin-left: -0.35em;
      bottom: -1.3em;
      right: 20%;
      box-sizing: border-box;
      border: 0.7em solid;
      border-color: transparent transparent #209e67 #209e67;
      transform-origin: 0 0;
      transform: rotate(-45deg);
      box-shadow: -3px 3px 4px 0 rgba(0, 0, 0, 0.32); }
      .a11y-high-c .vsa__MEA--capsule .vsa__MEA-content::after, .a11y-high-c .vsa__MEA--capsule-tiny .vsa__MEA-content::after {
        border-color: transparent transparent #1f7d63 #1f7d63; }
      .a11y-inv-c .vsa__MEA--capsule .vsa__MEA-content::after, .a11y-inv-c .vsa__MEA--capsule-tiny .vsa__MEA-content::after {
        border-color: transparent transparent #ff0 #ff0; }
  .vsa__MEA--capsule .vsa__MEA-close, .vsa__MEA--capsule-tiny .vsa__MEA-close {
    top: 0.65em;
    right: 1.35em; }

/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
Extends

Installation :
`@import "../vendors/css-tools/extends";`

Styleguide 7.0
*/
/*
%focus--opacity

```css
a:focus .img-focus { @extend %focus--opacity; }
```

Markup:
<div>
  <a href="">
    <img src="http://www.voyages-sncf.com/sites/default/files/imagecache/hermes-300x230/3271692_large_10_bonnes_raisons_de_choisir_le_cap_d_agde_0.jpg" class="img-focus">
    <br>effet focus--opacity sur l'image
  </a>
</div>

Styleguide 7.1
*/
/* effect on focus image */
/*
%clearFloat

Ajuste la hateur d'une div contenant des enfants flottants

```css
.parent { @extend %clearFloat; }
```

Markup:
<div class="parent">
  <div class="child1">child 1</div>
  <div class="child2">child 2</div>
</div>

Styleguide 7.2
*/
/*
%clearButton

Reset style par défaut de l'élément button

```css
.test-button {
  @extend %clearButton;
  padding: 1em;
  border: 1px solid #000;
  border-radius: 6px;
}
```

Markup:
<button class="test-button">
  bouton
</button>

Styleguide 7.3
*/
.ItineraryTab {
  background-color: transparent;
  border: 0;
  padding: 0;
  cursor: pointer; }

/*
%outscreen

Masque un élément DOM qui reste accessible à un lecteur écran

```css
.test-button span { @extend %outscreen; }
```

Markup:
<button class="test-button ico-train"><span>train<span></button>

Styleguide 7.4
*/
/* crée une flèche (TODO à remplacer par le mixin) */
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
Mixins

Installation :
`@import "/css-tools/mixins";`

Styleguide 8.0
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
arrow-lazy()

```css
.tooltip {
  position: relative;
  display: inline-block;
  ...
  @include arrow-lazy($size:0.5em, $color: $COLOR_PRIMARY);
}
```

<b>Paramètres</b><br>
$direction: top, $size: 1em, $color: #ccc, $color-highlight:"", $center: 50%, $margin: -1px, $pseudo: before

Markup:
<div class="tooltip">Tooltip</div>

Styleguide 8.1
*/
/*
focus()

Applique le style focus

```css
.test-button {
  @include focus($color: $COLOR_PRIMARY, $offset: -0.5em);
}
```

<b>Paramètres par défaut</b><br>
$color: #FFF, $opacity: 0.8, $offset: 3px, $width: thin, $style: dotted, $important: ''

Markup:
<button class="test-button">Button</div>

Styleguide 8.2
*/
/*
pseudoFocus

Applique le style focus sur un pseudo élément quand l'effet focus sur l'outline pose problème

```css
.tricky-focus {
  position: relative;
  &:focus { outline:0;}
  @include pseudoFocus($color: $COLOR_PRIMARY, $right: -5em, $top: -0.3em, $left: -0.3em, $bottom: -0.3em);
}
```

<b>Paramètres</b><br>
$pseudo: after, $top: -0.5em, $right: -0.5em, $bottom: -0.5em, $left: -0.5em, $color: #FFF, $opacity: 0.8, $style-line: dotted, $width: 1px

Markup:
<button class="test-button ico-train tricky-focus"><span>train</span></button>
<span>focus un peu tricky</span>

Styleguide 8.3
*/
/*
em()

Convertisseur pixel vers em

```css
.font-24-pixel { font-size: em(24); }
.font-16-pixel { font-size: em(16); }
.font-12-pixel { font-size: em(12); }
```

Markup:
<p class="font-24-pixel">24 pixels</p>
<p class="font-16-pixel">16 pixels</p>
<p class="font-12-pixel">12 pixels</p>

Styleguide 8.4
*/
/*
color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-color-title { @include color($COLOR_PRIMARY); }
.mixin-color-subtitle { @include color($COLOR_PETITS_PRIX, '', !important); }
.mixin-color-subtitle-2 { @include color( $color: #db70e6, $color-high: #830790, $important: '!important'); }
.mixin-color-subtitle-3 { @include color($color: #f97230, $color-high: 30%); }
```

Markup:
<div class="mixin-color-title">Titre 1</div>
<div class="mixin-color-subtitle">Sous-titre 1</div>
<div class="mixin-color-subtitle-2">Sous-titre 2</div>
<div class="mixin-color-subtitle-3">Sous-titre 3</div>

Styleguide 8.5
*/
/*
border-color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.
 - $alpha (optionnel) : rajoute le mode rgba. Si aucune valeur n'est entrée, le couleur passe en mode rgb, donc pas de transparence

```css
.mixin-bdcolor-1 { border:3px solid; @include border-color($COLOR_PRIMARY); }

.mixin-bdcolor-2 { border:3px solid; @include border-color($COLOR_OUIGO); }

.mixin-bdcolor-3 { border:3px solid; @include border-color($color: #73f351, $color-high: #329c15); }

.mixin-bdcolor-4 { border:3px solid; @include border-color($color: #51d7f3, $color-high: 20%); }

.mixin-bdcolor-5 { border:3px solid; @include border-color($color: $COLOR_PRIMARY, $alpha: 0.3); }
```

Markup:
<div class="block mixin-bdcolor-1">Block 1</div>
<div class="block mixin-bdcolor-2">Block 2</div>
<div class="block mixin-bdcolor-3">Block 3</div>
<div class="block mixin-bdcolor-4">Block 4</div>
<div class="block mixin-bdcolor-5">Block 5</div>

Styleguide 8.6
*/
/*
background-color()

Mixin pour gérer les contrastes accentués des couleurs en background. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-bgcolor-1 { @include background-color($COLOR_PRIMARY); }
.mixin-bgcolor-2 { @include background-color($COLOR_OUIGO); }
.mixin-bgcolor-3 { @include background-color($color: #73f351, $color-high: #329c15); }
.mixin-bgcolor-4 { @include background-color($color: #51d7f3, $color-high: 20%); }
```

Markup:
<div class="block mixin-bgcolor-1">Block 1</div>
<div class="block mixin-bgcolor-2">Block 2</div>
<div class="block mixin-bgcolor-3">Block 3</div>
<div class="block mixin-bgcolor-4">Block 4</div>

Styleguide 8.7
*/
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
fill()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c, la couleur est tirée de la map $ALT_COLORS.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Par défaut, on récupère la valeur correspondante dans la table ALT COLORS
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-fill-1 {
  @include fill($COLOR_PRIMARY);
}
.mixin-fill-2 {
  @include fill(#51d7f3, #3858ee);
}
.mixin-fill-3 {
  @include fill($COLOR_PETITS_PRIX, 20%);
}
```

Markup:
<div class="mixin-fill-1">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-2">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-3">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>

Styleguide 8.8
*/
/*
background-linear-gradient()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11y-high-c, la couleur est tirée de la map $ALT_COLORS.

Paramètres :
- $gradient-start : obligatoire, on peut utiliser une oui-colors
- $gradient-end : obligatoire, on peut utiliser une oui-colors
- direction (optionnel, par défaut : "to right")
- $darken (optionnel) : un pourcentage. Si l'argument est utilisé, il remplace les couleurs de substitution
- !important (optionnel)

```css
.mixin-background-linear-gradient {
  @include background-linear-gradient($COLOR_PRIMARY, $COLOR_SECONDARY);
  ...
}
.mixin-background-linear-gradient-darken {
  @include background-linear-gradient(#cc7b27, #e2bd97, $direction: 'to bottom', $darken: 30%);
  ...
}
```

Markup:
<div class="block mixin-background-linear-gradient"></div>
<div class="block mixin-background-linear-gradient-darken"></div>

Styleguide 8.10
*/
/* a11y-line-spacing() */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
breakpoint()

Mixin pour les mediaqueries.

Paramètres :
- $grid : obligatoire, si vous avez importer grid/global, vous pouvez utiliser les valeurs suivantes :
- $small-up : tous les écrans
- $medium-up : > 40em
- $large-up : > 54em

```css
.mixin-breakpoint {
  @include breakpoint($small-up) { // totalement facultatif
    background-color: $COLOR_PRIMARY;
  }
  @include breakpoint($medium-up) {
    background-color: $COLOR_SKIN_LIGHT;
  }
  @include breakpoint($large-up) {
    background-color: $COLOR_SECONDARY;
  }
}
```

Markup:
<div class="mixin-breakpoint"></div>

Styleguide 8.11
*/
/*
radioColorCustom()

Mixin pour les couleurs appliquées sur les radio & checkbox.

Paramètres :
- $inputColor : Couleur de l'input
- $inputColorHighC : (optionel) Couleur de l'input en contrasts accentués



```css
.radio-color-mea {
  @include radioColorCustom($COLOR_MEA_POSITIF);
}

.radio-color-custom {
  @include radioColorCustom(#594fd2, #090352);
}
```

Markup:
<div class="block">
  <p>Using MEA positive color</p>
  <label for="test-mea-1" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-mea-2" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-mea-3" class="vsc__radio radio-color-mea vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-mea-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>
<div class="block">
  <p>Using custom colors</p>
  <label for="test-custom-1" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-custom-2" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-custom-3" class="vsc__radio radio-color-custom vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-custom-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>

Styleguide 8.12
*/
/*
buttonColorCustom()

Permet de surcharger de la couleur d'un CTA conformément à la charte.

Paramètres :
- $color : couleur, obligatoirement issue des [Oui Colors](section-9.html#kssref-9-2), ou une [Custom Color](section-9.html#kssref-9-4).
- $secondary : false par défaut ; pour générer un style de bouton secondaire (bordure de couleur, fond blanc)

```css

@import "../../mixins";
@import "../../colors/oui-colors";

@include export('button--info') {
  .\$code-app {
    &-button {
      &--info {
        @include buttonColorCustom($color:$COLOR_MEA_INFO);
      }
    }
  }
}
```

N.B. supprimez le \ dans le code ci-dessus , qui a été rajouté pour contourner un problème de compilation sass.

Exemples d'usage du mixin :
- [vsc-button--smallPrice](section-6.html#vsc-button--smallPrice)
- [vsc-button--smallPrice-secondary](section-6.html#vsc-button--smallPrice-secondary)
- [vsc-button--info](section-6.html#vsc-button--info)
- [vsc-button--info-secondary](section-6.html#vsc-button--info-secondary)

Styleguide 8.13
*/
/* Wrapper pour la solution d'inlining SVG*/
/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
Extends

Installation :
`@import "../vendors/css-tools/extends";`

Styleguide 7.0
*/
/*
%focus--opacity

```css
a:focus .img-focus { @extend %focus--opacity; }
```

Markup:
<div>
  <a href="">
    <img src="http://www.voyages-sncf.com/sites/default/files/imagecache/hermes-300x230/3271692_large_10_bonnes_raisons_de_choisir_le_cap_d_agde_0.jpg" class="img-focus">
    <br>effet focus--opacity sur l'image
  </a>
</div>

Styleguide 7.1
*/
/* effect on focus image */
/*
%clearFloat

Ajuste la hateur d'une div contenant des enfants flottants

```css
.parent { @extend %clearFloat; }
```

Markup:
<div class="parent">
  <div class="child1">child 1</div>
  <div class="child2">child 2</div>
</div>

Styleguide 7.2
*/
/*
%clearButton

Reset style par défaut de l'élément button

```css
.test-button {
  @extend %clearButton;
  padding: 1em;
  border: 1px solid #000;
  border-radius: 6px;
}
```

Markup:
<button class="test-button">
  bouton
</button>

Styleguide 7.3
*/
.ItineraryTab {
  background-color: transparent;
  border: 0;
  padding: 0;
  cursor: pointer; }

/*
%outscreen

Masque un élément DOM qui reste accessible à un lecteur écran

```css
.test-button span { @extend %outscreen; }
```

Markup:
<button class="test-button ico-train"><span>train<span></button>

Styleguide 7.4
*/
/* crée une flèche (TODO à remplacer par le mixin) */
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
Mixins

Installation :
`@import "/css-tools/mixins";`

Styleguide 8.0
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
arrow-lazy()

```css
.tooltip {
  position: relative;
  display: inline-block;
  ...
  @include arrow-lazy($size:0.5em, $color: $COLOR_PRIMARY);
}
```

<b>Paramètres</b><br>
$direction: top, $size: 1em, $color: #ccc, $color-highlight:"", $center: 50%, $margin: -1px, $pseudo: before

Markup:
<div class="tooltip">Tooltip</div>

Styleguide 8.1
*/
/*
focus()

Applique le style focus

```css
.test-button {
  @include focus($color: $COLOR_PRIMARY, $offset: -0.5em);
}
```

<b>Paramètres par défaut</b><br>
$color: #FFF, $opacity: 0.8, $offset: 3px, $width: thin, $style: dotted, $important: ''

Markup:
<button class="test-button">Button</div>

Styleguide 8.2
*/
/*
pseudoFocus

Applique le style focus sur un pseudo élément quand l'effet focus sur l'outline pose problème

```css
.tricky-focus {
  position: relative;
  &:focus { outline:0;}
  @include pseudoFocus($color: $COLOR_PRIMARY, $right: -5em, $top: -0.3em, $left: -0.3em, $bottom: -0.3em);
}
```

<b>Paramètres</b><br>
$pseudo: after, $top: -0.5em, $right: -0.5em, $bottom: -0.5em, $left: -0.5em, $color: #FFF, $opacity: 0.8, $style-line: dotted, $width: 1px

Markup:
<button class="test-button ico-train tricky-focus"><span>train</span></button>
<span>focus un peu tricky</span>

Styleguide 8.3
*/
/*
em()

Convertisseur pixel vers em

```css
.font-24-pixel { font-size: em(24); }
.font-16-pixel { font-size: em(16); }
.font-12-pixel { font-size: em(12); }
```

Markup:
<p class="font-24-pixel">24 pixels</p>
<p class="font-16-pixel">16 pixels</p>
<p class="font-12-pixel">12 pixels</p>

Styleguide 8.4
*/
/*
color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-color-title { @include color($COLOR_PRIMARY); }
.mixin-color-subtitle { @include color($COLOR_PETITS_PRIX, '', !important); }
.mixin-color-subtitle-2 { @include color( $color: #db70e6, $color-high: #830790, $important: '!important'); }
.mixin-color-subtitle-3 { @include color($color: #f97230, $color-high: 30%); }
```

Markup:
<div class="mixin-color-title">Titre 1</div>
<div class="mixin-color-subtitle">Sous-titre 1</div>
<div class="mixin-color-subtitle-2">Sous-titre 2</div>
<div class="mixin-color-subtitle-3">Sous-titre 3</div>

Styleguide 8.5
*/
/*
border-color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.
 - $alpha (optionnel) : rajoute le mode rgba. Si aucune valeur n'est entrée, le couleur passe en mode rgb, donc pas de transparence

```css
.mixin-bdcolor-1 { border:3px solid; @include border-color($COLOR_PRIMARY); }

.mixin-bdcolor-2 { border:3px solid; @include border-color($COLOR_OUIGO); }

.mixin-bdcolor-3 { border:3px solid; @include border-color($color: #73f351, $color-high: #329c15); }

.mixin-bdcolor-4 { border:3px solid; @include border-color($color: #51d7f3, $color-high: 20%); }

.mixin-bdcolor-5 { border:3px solid; @include border-color($color: $COLOR_PRIMARY, $alpha: 0.3); }
```

Markup:
<div class="block mixin-bdcolor-1">Block 1</div>
<div class="block mixin-bdcolor-2">Block 2</div>
<div class="block mixin-bdcolor-3">Block 3</div>
<div class="block mixin-bdcolor-4">Block 4</div>
<div class="block mixin-bdcolor-5">Block 5</div>

Styleguide 8.6
*/
/*
background-color()

Mixin pour gérer les contrastes accentués des couleurs en background. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-bgcolor-1 { @include background-color($COLOR_PRIMARY); }
.mixin-bgcolor-2 { @include background-color($COLOR_OUIGO); }
.mixin-bgcolor-3 { @include background-color($color: #73f351, $color-high: #329c15); }
.mixin-bgcolor-4 { @include background-color($color: #51d7f3, $color-high: 20%); }
```

Markup:
<div class="block mixin-bgcolor-1">Block 1</div>
<div class="block mixin-bgcolor-2">Block 2</div>
<div class="block mixin-bgcolor-3">Block 3</div>
<div class="block mixin-bgcolor-4">Block 4</div>

Styleguide 8.7
*/
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
fill()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c, la couleur est tirée de la map $ALT_COLORS.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Par défaut, on récupère la valeur correspondante dans la table ALT COLORS
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-fill-1 {
  @include fill($COLOR_PRIMARY);
}
.mixin-fill-2 {
  @include fill(#51d7f3, #3858ee);
}
.mixin-fill-3 {
  @include fill($COLOR_PETITS_PRIX, 20%);
}
```

Markup:
<div class="mixin-fill-1">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-2">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-3">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>

Styleguide 8.8
*/
/*
background-linear-gradient()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11y-high-c, la couleur est tirée de la map $ALT_COLORS.

Paramètres :
- $gradient-start : obligatoire, on peut utiliser une oui-colors
- $gradient-end : obligatoire, on peut utiliser une oui-colors
- direction (optionnel, par défaut : "to right")
- $darken (optionnel) : un pourcentage. Si l'argument est utilisé, il remplace les couleurs de substitution
- !important (optionnel)

```css
.mixin-background-linear-gradient {
  @include background-linear-gradient($COLOR_PRIMARY, $COLOR_SECONDARY);
  ...
}
.mixin-background-linear-gradient-darken {
  @include background-linear-gradient(#cc7b27, #e2bd97, $direction: 'to bottom', $darken: 30%);
  ...
}
```

Markup:
<div class="block mixin-background-linear-gradient"></div>
<div class="block mixin-background-linear-gradient-darken"></div>

Styleguide 8.10
*/
/* a11y-line-spacing() */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
breakpoint()

Mixin pour les mediaqueries.

Paramètres :
- $grid : obligatoire, si vous avez importer grid/global, vous pouvez utiliser les valeurs suivantes :
- $small-up : tous les écrans
- $medium-up : > 40em
- $large-up : > 54em

```css
.mixin-breakpoint {
  @include breakpoint($small-up) { // totalement facultatif
    background-color: $COLOR_PRIMARY;
  }
  @include breakpoint($medium-up) {
    background-color: $COLOR_SKIN_LIGHT;
  }
  @include breakpoint($large-up) {
    background-color: $COLOR_SECONDARY;
  }
}
```

Markup:
<div class="mixin-breakpoint"></div>

Styleguide 8.11
*/
/*
radioColorCustom()

Mixin pour les couleurs appliquées sur les radio & checkbox.

Paramètres :
- $inputColor : Couleur de l'input
- $inputColorHighC : (optionel) Couleur de l'input en contrasts accentués



```css
.radio-color-mea {
  @include radioColorCustom($COLOR_MEA_POSITIF);
}

.radio-color-custom {
  @include radioColorCustom(#594fd2, #090352);
}
```

Markup:
<div class="block">
  <p>Using MEA positive color</p>
  <label for="test-mea-1" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-mea-2" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-mea-3" class="vsc__radio radio-color-mea vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-mea-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>
<div class="block">
  <p>Using custom colors</p>
  <label for="test-custom-1" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-custom-2" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-custom-3" class="vsc__radio radio-color-custom vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-custom-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>

Styleguide 8.12
*/
/*
buttonColorCustom()

Permet de surcharger de la couleur d'un CTA conformément à la charte.

Paramètres :
- $color : couleur, obligatoirement issue des [Oui Colors](section-9.html#kssref-9-2), ou une [Custom Color](section-9.html#kssref-9-4).
- $secondary : false par défaut ; pour générer un style de bouton secondaire (bordure de couleur, fond blanc)

```css

@import "../../mixins";
@import "../../colors/oui-colors";

@include export('button--info') {
  .\$code-app {
    &-button {
      &--info {
        @include buttonColorCustom($color:$COLOR_MEA_INFO);
      }
    }
  }
}
```

N.B. supprimez le \ dans le code ci-dessus , qui a été rajouté pour contourner un problème de compilation sass.

Exemples d'usage du mixin :
- [vsc-button--smallPrice](section-6.html#vsc-button--smallPrice)
- [vsc-button--smallPrice-secondary](section-6.html#vsc-button--smallPrice-secondary)
- [vsc-button--info](section-6.html#vsc-button--info)
- [vsc-button--info-secondary](section-6.html#vsc-button--info-secondary)

Styleguide 8.13
*/
/* Wrapper pour la solution d'inlining SVG*/
/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
Extends

Installation :
`@import "../vendors/css-tools/extends";`

Styleguide 7.0
*/
/*
%focus--opacity

```css
a:focus .img-focus { @extend %focus--opacity; }
```

Markup:
<div>
  <a href="">
    <img src="http://www.voyages-sncf.com/sites/default/files/imagecache/hermes-300x230/3271692_large_10_bonnes_raisons_de_choisir_le_cap_d_agde_0.jpg" class="img-focus">
    <br>effet focus--opacity sur l'image
  </a>
</div>

Styleguide 7.1
*/
/* effect on focus image */
/*
%clearFloat

Ajuste la hateur d'une div contenant des enfants flottants

```css
.parent { @extend %clearFloat; }
```

Markup:
<div class="parent">
  <div class="child1">child 1</div>
  <div class="child2">child 2</div>
</div>

Styleguide 7.2
*/
/*
%clearButton

Reset style par défaut de l'élément button

```css
.test-button {
  @extend %clearButton;
  padding: 1em;
  border: 1px solid #000;
  border-radius: 6px;
}
```

Markup:
<button class="test-button">
  bouton
</button>

Styleguide 7.3
*/
.ItineraryTab {
  background-color: transparent;
  border: 0;
  padding: 0;
  cursor: pointer; }

/*
%outscreen

Masque un élément DOM qui reste accessible à un lecteur écran

```css
.test-button span { @extend %outscreen; }
```

Markup:
<button class="test-button ico-train"><span>train<span></button>

Styleguide 7.4
*/
/* crée une flèche (TODO à remplacer par le mixin) */
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
Mixins

Installation :
`@import "/css-tools/mixins";`

Styleguide 8.0
*/
/*
 * Fonction utilisée par les mixins color(), background-color(), fill(), background-linear-gradient()
 * La fonction renvoie la variante de couleur issue de la map ou de la map custom le cas échéant.
 */
/*
svg-uri()

Fonction permettant de facilement utiliser du code SVG en inline dans un fichier CSS sans l'encoder en base64

Installation :
`@import "../vendors/css-tools/functions";`

Paramètres :
  - le code XML du fichier svg

```css
.mixin-svg-uri {
    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" id="Calque_1" width="48" height="48" viewBox="0 0 48 48">
    <path d="M41.6 11.4c-1.2-1.2-3.1-1.2-4.2 0L19.5 29.3l-7.9-7.9c-2.7-2.7-7 1.5-4.2 4.2l12.1 12.1 22.1-22.1c1.2-1.2 1.2-3 0-4.2-1.2-1.2 1.2 1.2 0 0z" id="path3"/>
    </svg>')
}
```

Markup:
<div class="mixin-svg-uri"></div>

Styleguide 8.9
*/
/*
arrow-lazy()

```css
.tooltip {
  position: relative;
  display: inline-block;
  ...
  @include arrow-lazy($size:0.5em, $color: $COLOR_PRIMARY);
}
```

<b>Paramètres</b><br>
$direction: top, $size: 1em, $color: #ccc, $color-highlight:"", $center: 50%, $margin: -1px, $pseudo: before

Markup:
<div class="tooltip">Tooltip</div>

Styleguide 8.1
*/
/*
focus()

Applique le style focus

```css
.test-button {
  @include focus($color: $COLOR_PRIMARY, $offset: -0.5em);
}
```

<b>Paramètres par défaut</b><br>
$color: #FFF, $opacity: 0.8, $offset: 3px, $width: thin, $style: dotted, $important: ''

Markup:
<button class="test-button">Button</div>

Styleguide 8.2
*/
/*
pseudoFocus

Applique le style focus sur un pseudo élément quand l'effet focus sur l'outline pose problème

```css
.tricky-focus {
  position: relative;
  &:focus { outline:0;}
  @include pseudoFocus($color: $COLOR_PRIMARY, $right: -5em, $top: -0.3em, $left: -0.3em, $bottom: -0.3em);
}
```

<b>Paramètres</b><br>
$pseudo: after, $top: -0.5em, $right: -0.5em, $bottom: -0.5em, $left: -0.5em, $color: #FFF, $opacity: 0.8, $style-line: dotted, $width: 1px

Markup:
<button class="test-button ico-train tricky-focus"><span>train</span></button>
<span>focus un peu tricky</span>

Styleguide 8.3
*/
/*
em()

Convertisseur pixel vers em

```css
.font-24-pixel { font-size: em(24); }
.font-16-pixel { font-size: em(16); }
.font-12-pixel { font-size: em(12); }
```

Markup:
<p class="font-24-pixel">24 pixels</p>
<p class="font-16-pixel">16 pixels</p>
<p class="font-12-pixel">12 pixels</p>

Styleguide 8.4
*/
/*
color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-color-title { @include color($COLOR_PRIMARY); }
.mixin-color-subtitle { @include color($COLOR_PETITS_PRIX, '', !important); }
.mixin-color-subtitle-2 { @include color( $color: #db70e6, $color-high: #830790, $important: '!important'); }
.mixin-color-subtitle-3 { @include color($color: #f97230, $color-high: 30%); }
```

Markup:
<div class="mixin-color-title">Titre 1</div>
<div class="mixin-color-subtitle">Sous-titre 1</div>
<div class="mixin-color-subtitle-2">Sous-titre 2</div>
<div class="mixin-color-subtitle-3">Sous-titre 3</div>

Styleguide 8.5
*/
/*
border-color()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut, la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.
 - $alpha (optionnel) : rajoute le mode rgba. Si aucune valeur n'est entrée, le couleur passe en mode rgb, donc pas de transparence

```css
.mixin-bdcolor-1 { border:3px solid; @include border-color($COLOR_PRIMARY); }

.mixin-bdcolor-2 { border:3px solid; @include border-color($COLOR_OUIGO); }

.mixin-bdcolor-3 { border:3px solid; @include border-color($color: #73f351, $color-high: #329c15); }

.mixin-bdcolor-4 { border:3px solid; @include border-color($color: #51d7f3, $color-high: 20%); }

.mixin-bdcolor-5 { border:3px solid; @include border-color($color: $COLOR_PRIMARY, $alpha: 0.3); }
```

Markup:
<div class="block mixin-bdcolor-1">Block 1</div>
<div class="block mixin-bdcolor-2">Block 2</div>
<div class="block mixin-bdcolor-3">Block 3</div>
<div class="block mixin-bdcolor-4">Block 4</div>
<div class="block mixin-bdcolor-5">Block 5</div>

Styleguide 8.6
*/
/*
background-color()

Mixin pour gérer les contrastes accentués des couleurs en background. Génère les surcharges avec le sélecteur .a11-high-c. Par défaut la couleur est tirée de la map $ALT_COLORS, qui peut être complétée en créant une map $custom-colors dans votre projet.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Si aucune valeur n'est entrée, la valeur correspondante dans la table ALT COLORS est utilisée. On peut saisir la valeur d'une couleur de substitution, ou un pourcentage permettant d'assombrir d'autant la couleur originale.
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-bgcolor-1 { @include background-color($COLOR_PRIMARY); }
.mixin-bgcolor-2 { @include background-color($COLOR_OUIGO); }
.mixin-bgcolor-3 { @include background-color($color: #73f351, $color-high: #329c15); }
.mixin-bgcolor-4 { @include background-color($color: #51d7f3, $color-high: 20%); }
```

Markup:
<div class="block mixin-bgcolor-1">Block 1</div>
<div class="block mixin-bgcolor-2">Block 2</div>
<div class="block mixin-bgcolor-3">Block 3</div>
<div class="block mixin-bgcolor-4">Block 4</div>

Styleguide 8.7
*/
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
fill()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11-high-c, la couleur est tirée de la map $ALT_COLORS.

Vous devez importer les maps de couleurs pour faire fonctionner ce mixin :

```css
@import "/css-tools/src/colors/_branding-colors.scss";
@import "/css-tools/src/colors/_oui-colors.scss";
```

Paramètres :
 - $color : couleur correspondant à l'affichage par défaut
 - $color-high (optionnel) : Couleur correspondant au mode contraste avancé. Par défaut, on récupère la valeur correspondante dans la table ALT COLORS
 - $important: '!important' (optionnel) : rajoute le !important dans la valeur de la propriété.

```css
.mixin-fill-1 {
  @include fill($COLOR_PRIMARY);
}
.mixin-fill-2 {
  @include fill(#51d7f3, #3858ee);
}
.mixin-fill-3 {
  @include fill($COLOR_PETITS_PRIX, 20%);
}
```

Markup:
<div class="mixin-fill-1">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-2">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>
<div class="mixin-fill-3">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59.1 55.1" enable-background="new 0 0 59.1 55.1" xml:space="preserve"><g><path d="M26.1,22.4H10.6c-1.8,0-3.3,1.5-3.3,3.3v15.5c0,1.8,1.5,3.3,3.3,3.3h15.5c1.8,0,3.3-1.5,3.3-3.3V25.6C29.3,23.8,27.8,22.4,26.1,22.4z M27.4,41.1c0,0.7-0.6,1.3-1.3,1.3H10.6c-0.7,0-1.3-0.6-1.3-1.3V25.6c0-0.7,0.6-1.3,1.3-1.3h15.5c0.7,0,1.3,0.6,1.3,1.3V41.1z"></path></g><g></g><g><circle cx="23.6" cy="27.7" r="1.9"></circle></g><g><circle cx="13.1" cy="39.1" r="1.9"></circle></g><g><circle cx="23.6" cy="39.1" r="1.9"></circle></g><g><path d="M51.6,27.5l-5.1-14.6c-0.5-1.3-1.7-2.2-3.1-2.2c-0.4,0-0.7,0.1-1.1,0.2L27.7,16c-0.8,0.3-1.5,0.9-1.9,1.7c-0.4,0.8-0.4,1.7-0.1,2.5l5.1,14.6c0.5,1.3,1.7,2.2,3.1,2.2c0.4,0,0.7-0.1,1.1-0.2l14.6-5.1c0.8-0.3,1.5-0.9,1.9-1.7C51.8,29.2,51.8,28.3,51.6,27.5z M49.7,29.2c-0.2,0.3-0.4,0.6-0.8,0.7l-14.6,5.1c-0.7,0.2-1.5-0.1-1.7-0.8l-5.1-14.6c-0.1-0.3-0.1-0.7,0.1-1c0.2-0.3,0.4-0.6,0.8-0.7L43,12.7c0.1,0,0.3-0.1,0.4-0.1c0.6,0,1.1,0.4,1.3,0.9l5.1,14.6C49.9,28.5,49.8,28.8,49.7,29.2z"></path></g><g><circle cx="41.9" cy="17.1" r="1.9"></circle></g><g><circle cx="35.4" cy="30.5" r="1.9"></circle></g><g><circle cx="13" cy="33.3" r="1.9"></circle></g><g><circle cx="23.6" cy="33.3" r="1.9"></circle></g></svg>
</div>

Styleguide 8.8
*/
/*
background-linear-gradient()

Mixin pour les contrastes accentués. Génère les surcharges avec le sélecteur .a11y-high-c, la couleur est tirée de la map $ALT_COLORS.

Paramètres :
- $gradient-start : obligatoire, on peut utiliser une oui-colors
- $gradient-end : obligatoire, on peut utiliser une oui-colors
- direction (optionnel, par défaut : "to right")
- $darken (optionnel) : un pourcentage. Si l'argument est utilisé, il remplace les couleurs de substitution
- !important (optionnel)

```css
.mixin-background-linear-gradient {
  @include background-linear-gradient($COLOR_PRIMARY, $COLOR_SECONDARY);
  ...
}
.mixin-background-linear-gradient-darken {
  @include background-linear-gradient(#cc7b27, #e2bd97, $direction: 'to bottom', $darken: 30%);
  ...
}
```

Markup:
<div class="block mixin-background-linear-gradient"></div>
<div class="block mixin-background-linear-gradient-darken"></div>

Styleguide 8.10
*/
/* a11y-line-spacing() */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/* DEPRECATED - A retirer si personne ne l'utilise */
/*
breakpoint()

Mixin pour les mediaqueries.

Paramètres :
- $grid : obligatoire, si vous avez importer grid/global, vous pouvez utiliser les valeurs suivantes :
- $small-up : tous les écrans
- $medium-up : > 40em
- $large-up : > 54em

```css
.mixin-breakpoint {
  @include breakpoint($small-up) { // totalement facultatif
    background-color: $COLOR_PRIMARY;
  }
  @include breakpoint($medium-up) {
    background-color: $COLOR_SKIN_LIGHT;
  }
  @include breakpoint($large-up) {
    background-color: $COLOR_SECONDARY;
  }
}
```

Markup:
<div class="mixin-breakpoint"></div>

Styleguide 8.11
*/
/*
radioColorCustom()

Mixin pour les couleurs appliquées sur les radio & checkbox.

Paramètres :
- $inputColor : Couleur de l'input
- $inputColorHighC : (optionel) Couleur de l'input en contrasts accentués



```css
.radio-color-mea {
  @include radioColorCustom($COLOR_MEA_POSITIF);
}

.radio-color-custom {
  @include radioColorCustom(#594fd2, #090352);
}
```

Markup:
<div class="block">
  <p>Using MEA positive color</p>
  <label for="test-mea-1" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-mea-2" class="vsc__radio radio-color-mea">
    <input type="checkbox" name="test-checkbox" id="test-mea-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-mea-3" class="vsc__radio radio-color-mea vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-mea-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>
<div class="block">
  <p>Using custom colors</p>
  <label for="test-custom-1" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-1" value="1">
    <span><i></i>Checkbox 1</span>
  </label>
  <label for="test-custom-2" class="vsc__radio radio-color-custom">
    <input type="checkbox" name="test-checkbox" id="test-custom-2" value="2">
    <span><i></i>Checkbox 2</span>
  </label>
  <label for="test-custom-3" class="vsc__radio radio-color-custom vsc__radio--disabled">
    <input type="checkbox" name="test-checkbox" id="test-custom-3" value="3" disabled>
    <span><i></i>Checkbox 3 disabled</span>
  </label>
</div>

Styleguide 8.12
*/
/*
buttonColorCustom()

Permet de surcharger de la couleur d'un CTA conformément à la charte.

Paramètres :
- $color : couleur, obligatoirement issue des [Oui Colors](section-9.html#kssref-9-2), ou une [Custom Color](section-9.html#kssref-9-4).
- $secondary : false par défaut ; pour générer un style de bouton secondaire (bordure de couleur, fond blanc)

```css

@import "../../mixins";
@import "../../colors/oui-colors";

@include export('button--info') {
  .\$code-app {
    &-button {
      &--info {
        @include buttonColorCustom($color:$COLOR_MEA_INFO);
      }
    }
  }
}
```

N.B. supprimez le \ dans le code ci-dessus , qui a été rajouté pour contourner un problème de compilation sass.

Exemples d'usage du mixin :
- [vsc-button--smallPrice](section-6.html#vsc-button--smallPrice)
- [vsc-button--smallPrice-secondary](section-6.html#vsc-button--smallPrice-secondary)
- [vsc-button--info](section-6.html#vsc-button--info)
- [vsc-button--info-secondary](section-6.html#vsc-button--info-secondary)

Styleguide 8.13
*/
/* Wrapper pour la solution d'inlining SVG*/
.vsa__MEA--capsule-tiny .vsa__MEA-content::after {
  border-width: 0.6em;
  bottom: -1.1em;
  margin-left: -0.3em;
  right: 3.3em; }

.vsa__MEA--capsule-tiny .vsa__MEA-message {
  padding: 0.4em 2em 0.4em 3.975em; }

.vsa__MEA--capsule-tiny .vsa__MEA-message {
  padding-right: 2em; }

.vsa__MEA--capsule-tiny .vsa__MEA-close {
  top: 0.1em;
  right: 1em; }

/*
Autres pictos SVG pour les MEA et colorisation des pictos.

Pour afficher un picto MEA différent, ou d'une couleur différente, générez le code dans votre projet à l'aide du mixin inline-svg. inline-svg prend en premier paramètre le nom de l'icône sans l'extension, parmis les icones du dossier src/icons. Le second paramètre, optionnel spécifie la couleur du tracé (par défaut, blanc).

`@import("[...]/css-tools/src/icons/inline-svg");
.works-icon {
  background-image: inline-svg('traffic-cone', $COLOR_MEA_WARNING) !important;
}`

Markup: styleguide/tpl/inline-svg.hbs

Styleguide 2.1.1
*/
/*
Capsule nouveauté

Permet d'afficher des messages pour annoncer un bloc ou une nouvelle fonctionnalité.

Installation :
`@import "[...]/css-tools/src/MEA/capsule";`

Markup: styleguide/tpl/capsule.hbs

Styleguide 2.2
*/
/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
.vsa-capsule {
  font-size: 0.8125rem;
  font-family: AvenirMedium, Arial, Helvetica, sans-serif;
  line-height: 1;
  display: inline-block;
  color: #fff;
  background-color: #b51742 ;
  padding: 0.6923em 0.8462em;
  border-radius: 5em;
  white-space: nowrap; }
  .a11y-high-c .vsa-capsule {
    background-color: #b51742 ; }
  .a11y-inv-c .vsa-capsule {
    color: #000080 !important;
    background-color: #ff0 !important;
    font-weight: bold; }

/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
/*
Icon-list

Mise en forme d'une liste de svg dans une bulle.

Une image, un svg, une font ou un background-image peut être passé dans la balise &lt;li&gt;

Installation :
`@import "../vendors/css-tools/src/iconList";`

Markup: styleguide/tpl/iconList.hbs

Styleguide 10.0
*/
.vsa-icon-list {
  border-color: #999082 ;
  border-radius: 3.75em;
  padding: 0.3125em 0.625em;
  position: relative;
  display: inline-block;
  border-width: 1px;
  border-style: solid; }
  .a11y-high-c .vsa-icon-list {
    border-color: #7b7162 ; }
  .a11y-inv-c .vsa-icon-list {
    border: 2px solid #ff0; }
    .a11y-inv-c .vsa-icon-list svg {
      fill: #ff0 !important; }
  .vsa-icon-list__list {
    margin: 0;
    padding: 0; }
    .a11y-inv-c .vsa-icon-list__list {
      background-color: transparent !important; }
  .vsa-icon-list.vsa-icon-list--tiny::before {
    left: 1.25em; }
  .vsa-icon-list__background-icon {
    display: inline-block;
    width: 1.625em;
    height: 1.625em; }
  .vsa-icon-list__icon {
    padding: 0.3125em;
    display: inline-block;
    text-align: center;
    max-width: 7.5em; }
    .a11y-inv-c .vsa-icon-list__icon {
      background-color: transparent !important; }
    .vsa-icon-list__icon svg, .vsa-icon-list__icon img {
      width: 1.625em;
      height: 1.625em; }
    .vsa-icon-list__icon svg {
      margin: 0 auto; }
    .vsa-icon-list__icon .font-icon {
      font-size: 1.625em; }
    .vsa-icon-list__icon:first-child {
      border-left: 0; }
  .vsa-icon-list__desc {
    font-family: AvenirBook, Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    display: inline-block;
    max-width: 7.5em;
    color: #999082 ; }
    .a11y-high-c .vsa-icon-list__desc {
      color: #7b7162 ; }

/*
COLORS

Styleguide 9.0
*/
/*
OUI COLORS

Installation :
`@import "../vendors/css-tools/src/oui-colors";`

<div class="colors-demo">
    <div class="COLOR_PRIMARY"><input type="text" value="$COLOR_PRIMARY" /></div>
    <div class="COLOR_SECONDARY"><input type="text" value="$COLOR_SECONDARY" /></div>
    <div class="COLOR_GREY_PRIMARY"><input type="text" value="$COLOR_GREY_PRIMARY" /></div>
    <div class="COLOR_GREY_SECONDARY"><input type="text" value="$COLOR_GREY_SECONDARY" /></div>
    <div class="COLOR_SKIN"><input type="text" value="$COLOR_SKIN" /></div>
    <div class="COLOR_SKIN_LIGHT"><input type="text" value="$COLOR_SKIN_LIGHT" /></div>
    <div class="COLOR_PRO"><input type="text" value="$COLOR_PRO" /></div>
    <div class="COLOR_IDTGV"><input type="text" value="$COLOR_IDTGV" /></div>
    <div class="COLOR_OUIGO"><input type="text" value="$COLOR_OUIGO" /></div>
    <div class="COLOR_PROMO"><input type="text" value="$COLOR_PROMO" /></div>
    <div class="COLOR_PETITS_PRIX"><input type="text" value="$COLOR_PETITS_PRIX" /></div>
    <div class="COLOR_1ST_CLASS"><input type="text" value="$COLOR_1ST_CLASS" /></div>
</div>

Styleguide 9.1
*/
/*
OUI COLORS - MEA

<div class="colors-demo">
 <div class="mea-demo">
    <div class="COLOR_MEA_ALERT"><input type="text" value="$COLOR_MEA_ALERT" /></div>
    <div class="COLOR_MEA_ALERT_LIGHT"><input type="text" value="$COLOR_MEA_ALERT_LIGHT" /></div>
    <div class="COLOR_MEA_WARNING"><input type="text" value="$COLOR_MEA_WARNING" /></div>
    <div class="COLOR_MEA_WARNING_LIGHT"><input type="text" value="$COLOR_MEA_WARNING_LIGHT" /></div>
    <div class="COLOR_MEA_POSITIF"><input type="text" value="$COLOR_MEA_POSITIF" /></div>
    <div class="COLOR_MEA_POSITIF_LIGHT"><input type="text" value="$COLOR_MEA_POSITIF_LIGHT" /></div>
    <div class="COLOR_MEA_INFO"><input type="text" value="$COLOR_MEA_INFO" /></div>
    <div class="COLOR_MEA_INFO_LIGHT"><input type="text" value="$COLOR_MEA_INFO_LIGHT" /></div>
    <div class="COLOR_MEA_CRITIC"><input type="text" value="$COLOR_MEA_CRITIC" /></div>
  </div>
</div>

Styleguide 9.2
*/
/*
Couleurs transporteurs et produits

<div class="colors-demo">
    <div class="OUIGO-pink"><input type="text" value="$OUIGO-pink" /></div>
    <div class="OUIGO-blue"><input type="text" value="$OUIGO-blue" /></div>
    <div class="OUIBUS-pink"><input type="text" value="$OUIBUS-pink" /></div>
    <div class="OUIBUS-blue"><input type="text" value="$OUIBUS-blue" /></div>
    <div class="TGVMAX-duck-green"><input type="text" value="$TGVMAX-duck-green" /></div>
    <div class="TGVMAX-lime-green"><input type="text" value="$TGVMAX-lime-green" /></div>
    <div class="ALLIANZ-assurance-blue"><input type="text" value="$ALLIANZ-assurance-blue" /></div>
</div>

Styleguide 9.3
*/
/* OUIGO */
/* OUIBUS */
/* HAPPYCARD/ TGVMAX */
/* Assurance Allianz*/
/* Mapping contrastes accentués*/
.grid-row {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  max-width: 62.5em;
  *zoom: 1; }
  .grid-row:before, .grid-row:after {
    content: " ";
    display: table; }
  .grid-row:after {
    clear: both; }

.grid-left, .grid-right {
  position: relative;
  padding-left: 0.9375em;
  padding-right: 0.9375em;
  width: 100%;
  float: left; }

.grid-col {
  position: relative;
  padding-left: 0.9375em;
  padding-right: 0.9375em;
  width: 50%;
  float: left; }

@media only screen and (min-width: 40.063em) {
  .grid-right, .grid-offset {
    position: relative;
    padding-left: 0.9375em;
    padding-right: 0.9375em;
    width: 75%;
    float: left; } }

@media only screen and (min-width: 40.063em) {
  .grid-col, .grid-left {
    position: relative;
    padding-left: 0.9375em;
    padding-right: 0.9375em;
    width: 25%;
    float: left; } }

@media only screen and (min-width: 54em) {
  .grid-offset {
    position: relative;
    padding-left: 0.9375em;
    padding-right: 0.9375em;
    width: 58.33333%;
    float: left; } }

@media only screen and (min-width: 54em) {
  .grid-col {
    position: relative;
    padding-left: 0.9375em;
    padding-right: 0.9375em;
    width: 8.33333%;
    float: left; } }

@media only screen and (min-width: 40.063em) {
  .grid-offset {
    margin-left: 25%; } }

@media only screen and (min-width: 54em) {
  .grid-offset {
    margin-left: 41.66667%; } }

/*
Grille

Récupération de la grille Foundation (http://foundation.zurb.com/sites/docs/grid.html) avec des placeholders

Installation :
`@import "../vendors/css-tools/grid/main";`

On utilise la grille directement dans le CSS avec des extends :
```css
%block {
  padding: 0.5em;
  border: 1px solid #000;
}
.grid-row {
  @extend %row-main;
  margin-bottom: 0.5em;
}
.grid-col {
  @extend %small-6;
  @extend %medium-3;
  @extend %large-1;
  @extend %block;
  font-size: 0.7em;
  background: #e0e0e0;
}
.grid-left {
  @extend %small-12;
  @extend %medium-3;
  @extend %block;
  background: #0088ce;
}
.grid-right {
  @extend %small-12;
  @extend %medium-9;
  @extend %block;
  background: #a0c413;
}
.grid-offset {
  @extend %large-7;
  @extend %medium-9;
  @extend %large-offset-5;
  @extend %medium-offset-3;
  @extend %block;
  background: #f7ab01;
}```

Markup:
<div class="grid-row">
  <div class="grid-col">small-6<br>medium-3<br>large-1</div>
  <div class="grid-col">small-6<br>medium-3<br>large-1</div>
  <div class="grid-col">small-6<br>medium-3<br>large-1</div>
  <div class="grid-col">small-6<br>medium-3<br>large-1</div>
  <div class="grid-col">small-6<br>medium-3<br>large-1</div>
  <div class="grid-col">small-6<br>medium-3<br>large-1</div>
  <div class="grid-col">small-6<br>medium-3<br>large-1</div>
  <div class="grid-col">small-6<br>medium-3<br>large-1</div>
  <div class="grid-col">small-6<br>medium-3<br>large-1</div>
  <div class="grid-col">small-6<br>medium-3<br>large-1</div>
  <div class="grid-col">small-6<br>medium-3<br>large-1</div>
  <div class="grid-col">small-6<br>medium-3<br>large-1</div>
</div>
<div class="grid-row">
  <div class="grid-left">
    small-12<br>
    medium-3
  </div>
  <div class="grid-right">
    small-12<br>
    medium-9
  </div>
</div>
<div class="grid-row">
  <div class="grid-offset">large-7 / large-offset-5<br>medium-9 / medium-offset-3</div>
</div>

Il est possible de surcharger les media-queries foundation
```css
// Media Query Ranges
$small-range: (0em, 40em) !default;
$medium-range: (40.063em, 53.99em) !default;
$large-range: (54em, 90em) !default;
$xlarge-range: (90.063em, 120em) !default;
$xxlarge-range: (120.063em) !default;
```

Styleguide 4.0
*/
.grid-col, .grid-left, .grid-right, .grid-offset {
  padding: 0.5em;
  border: 1px solid #000; }

.grid-row {
  margin-bottom: 0.5em; }

.grid-col {
  font-size: 0.7em;
  background: #e0e0e0; }

.grid-left {
  background: #ea5330; }

.grid-right {
  background: #a0c413; }

.grid-offset {
  background: #f7ab01; }

/*
Têtière

Affichage de la têtière

Installation :
`@import "../vendors/css-tools/src/tetiere";`

Markup: styleguide/tpl/tetiere.hbs

Styleguide 13.0
*/
.vsa-tetiere {
  display: flex;
  position: relative;
  align-items: center;
  flex-direction: column;
  background-color: #b51742;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position-y: -40em; }
  @media only screen and (min-width: 54em) {
    .vsa-tetiere {
      height: 16.25em;
      background-position: top right;
      overflow: hidden; } }
  .vsa-tetiere__link {
    max-width: 25em; }
  .vsa-tetiere__cache {
    display: none;
    position: relative;
    height: 0;
    width: 100%;
    max-width: 60rem; }
    @media only screen and (min-width: 40.063em) {
      .vsa-tetiere__cache {
        display: block; } }
    .vsa-tetiere__cache-sablier {
      position: absolute; }
      @media only screen and (min-width: 54em) {
        .vsa-tetiere__cache-sablier {
          width: 187.5em;
          height: 16.25em;
          right: -14em;
          background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAC7gAAAEECAMAAACPs4kLAAAAeFBMVEUAAACqGkivF0S3E0G0FEKxF0SqGki4E0G2E0GqGkiqGkiuGEaqGkiqGki2E0GqGkizFUOqGkiqGki1FEKtGUeqGkiqGkiqGkisGUiqGkiyFUOqGkiqGkiqGkiqGkiqGkiqGkiwF0SqGkiqGki2E0GqGki3EkC4E0HlSR62AAAAJnRSTlMAmbT318Cb/PIhEK0DCO2W0Y1W4qV/bjCfRcmSGGaGd126PSfpTTgLzuEAAA6rSURBVHja7NpLSgNBFEDRKiPiJ6IJqIiaDMR++9+hU0uEdEOwXxXnrOIObpkAACCb+Omu5vNxX/6ZcAcAIJX47bqm8/BaThLuAACMKv70WLM53JTThDsAAAOKRu5TZt4mI9wBABhKtNKfMnM3GeEOAMAootXFKXP4LPMIdwAABhCtbk6Z59syk3AHAKBv0ejrlPkqswl3AAC6FY3uTpndkk1GuAMA0KNodHnKHBdtMsIdAIDORKPbU2a/LUsIdwAA+hGNnk+Z3UtZRrgDANCFOIuLmsPyTUa4AwCQXJzPpuaw35bVTQAAkLDZE50yb6tvMsIdAICszZ7nlHl6LxlMAACQMdqznDIZNhnhDgBA5nK/rKvLsckIdwAAMof7+qfMMccmI9wBAEgc7purutiYm4xwB77Zu2McBEIAiKJLqCyMsTGx0MbI/Y/oFaDBWXjvFL+YZAAgONyHlzLLzmSEOwAAweU+vJRZ7nRJuAMAkB/utQxadyYj3AEAyA33vy5l7lEzGeEOAEBuuA8tZdaeyQh3AABiw72WEWvPZIQ7AACx5T6ylFl9JiPcAQCIDff+pcz6MxnhDgBAarjX0m39mYxwBwAgNdy7lzI7zGSEOwAAqeXeuZTZYyYj3AEACA33WvrsMZMR7gAAhIZ731Jml5mMcAcAIDTce5Yy+8xkhDsAAJnlXst03+CZjHAHACAz3KcvZe6fI1wDAIC4cJ+9lHlkz2SEOwAAkeFey1S355GvAQBAWrnPXcq8L8cJNAAASAv3qUuZ1/U4gwYA8GPnDlIaCKIoilZRMxFEQRwoKoq1/yWabjJIOknPUvzin7OKO3g8CBbure5JOJMR7gAARAz3vaVMypmMcAcAIGK57y1lUs5khDsAAAHDvdVB3n/KPDoAAMQK91FLmdePMpEOAACxwn3QUublscykAwBAqHJvdYTntzKXDgAAocJ9yFLm66FMpgMAQKhwH7CUefqbayYj3AEACBfurd7d52+ZTwcAgEjlfmspk/K8XbgDAHAQMtyvL2WSnrcLdwAADiKGe6vXZD1vF+4AACwClvudlzLfU85khDsAANHC/WIpk/q8XbgDALCIF+6tbqU+bxfuAAAs4oX7ZimT/bxduAMAsApX7pulTPbzduEOAMAqWri3eib9ebtwBwBgFS3cz5YyztuFOwAAR8HK/XQp47z9n507SGkgCMIwOmU2kYE4BBWMiiLS9z+imwxmkenNdEhN894pvkX9JdwBAJjlCvdd3MRx06tU4Q4AQCm5wv3iUsbzduEOAMC/XOH+EO29bvl5u3AHAOAsU7nvormnt6ETBQAAkoT7FK29PA69KAAAkCTcm1/KfG/9ebtwBwBglqfc9xFWqcIdAIDr8oT7ZJUq3AEAWJIn3EerVOEOAMCiLOW+t0oV7gAALMsS7pNVqnAHAGBZlnAfrVKFOwAAFTnK/WCVKtwBAKjJEe6TVapwBwCgJke4j1apwh0AgKoM5X6IJo79rVKFOwAAZxnC/WSVKtwBAKjLEO7Psd5nl6tU4Q4AwOz+5f4bq73/DD0rAABw/3A/xVpfH0PXCsAfe/e20kAMhWE08VAVCxV1RFGrIs37P2Kv5r5pdyYwWespPsLmDwD0D/fXfJndYZvWrQAAQLyFL2X2ax2BFO4AADS17KXM72pHIIU7AABN1V7KGIEU7gAABIsv95d8gbc1j0AKdwAAAkSF+60RSOEOAECw+HC/ezcCKdwBAOij5lLGCKRwBwCgkwUuZab1j0AKdwAAWmt+KfM8wAikcAcAoLXGlzL7/zSUAgAAsz7h/pfP8D3Uc7twBwCgnVMvZTb+XBLuAAAEiw/3G38uCXcAAKLFh/uVP5eEOwAAweLL/XqT6/wM+Nwu3AEAqBMf7k+5yudHGlMBAIBZj3J/zDWmrzSoAgAAsw7hfp8r7A7bNKoCAACtBF/KTA9pXAUA4MjevaA0DAVhGL2jtgHFVtv6qhrf+9+iCzC3uYGRBnrOKj5+Bgb+TcOljLlduAMAkCw/3FfmduEOAMDxjYX7PtqsNyc9twt3AACmyA/3nblduAMAMAOHu/07mpz83C7cAQCYID/cF9GgN7cLdwAA2uWXe/cY4zbXBeEOAECz/HDfxqj+qyDcAQCYID/cP2LMu7lduAMAMEl+uXdLc7twBwBgJurhfuG6XbgDADAb1XA/i0PuzO3CHQCAyfLD/XzpVapwBwBgPirhfuNVqnAHAGBGKuF+FTXrH3O7cAcAIEFCua+i5u2lINwBAEiQEO77GPb8ZG4X7gAAJMgp910Mur8sCHcAABKkhPs2htx+FoQ7AAAJksp9EQNeze3CHQCABGnh3i3jj/6h8MvevatEDEVhGD0n6phGMUwQHQQvzf/+byhCHBOwEIvJLtZ6iq/YF+EOAMCekq3rX14u3TWEOwAA+8rW4OWScAcAoKBsjG5ACncAAErK2skNSOEOAEBJWZstpQp3AABqyo+jpVThDgBAVTl772evllKFOwAApeTb1aEvpueGcAcAoJYsHvrizVKqcAcAoJ7la+rsdLtwBwCgsPVq6uR0u3AHAKCofBlMyQh3AABqS3JvSka4AwBQXJKbPn00hDsAAJVl9HFJuAMAUN/TS0O4AwBQTtbGuSHcAQDYS/7k9nTwKlW4AwBwKfmf49y7K5DCHQCARZVQ3xqH3vtjQ7gDn+zc7UoCQRTH4Tm5toVQkltIFhQJc/93WLG+rIJ+nhmf5yp+H87/AEBZqX52JRN/PIIU7gAAlJXqJ7oh/m18ghTuAACU1eoTT3cx+koIdwAACmr1idn8PnYeE8IdAIByYn2iW8fea0K4AwBQTqwfbRdx5Im7cAcAoJxYP5rNY+LZNFW4AwDcqFyyfrmOqc+EcAcAuCG5DqshTv0khDsAQOtyZQ4vIE1ThTsAQPNyrQ4vIE1ThTsAQKty9fr9C0jTVOEOANCY3JDVIkamqcIdAKANuUEP3zEyTRXuAAB1yw3r33fH7aapwh0AoFL5BnRDjExThTsAQK1y87aLuGRjmircAQAqkRs3m8dlLwnhDgBQidyyfrmOKz4Swh0AoBK5Yd0Q17wlhDsA8MveveQkEERhGK0CkY5tUNMSGPlAzd3/Dp0Y0pDQNsxu5ZxVfIOq+5NFNOu7r9N2BeEOAJBFNKpb1X+8FYQ7AEAa0aTx5Xa3IP8IdwCAzKJFo8ftbkEeCXcAgMyiPUNfZ/goCHcAgDyiNd1nPXILcky4AwBkFm1Zjh63uwV5SrgDAGQWLVnf7etMXwXhDgCQSDRk6Otc24JwBwDIJJqxWdT5DgXhDgCQSTRiubqv8708FoQ7AEAm0YT1875e46cg3AEAUokWDK/1Kk8PBeEOAJBK5Hf6uN340iXCHQAgs8iuW9UR40uXCXcAgNQitbPBJeNLE4Q7AEBqkdjZ4JLxpUnCHQAgtchr6Ost3gvCHQAgnchqs6i32RWEOwBAOpFTt6o32haEOwBAPpHRevJP6rRD4Ze9e0lpKAjCMFodEozGRGMiGnwiaO1/h4KDO3SQ20IXnrOKj4L+W7gDANST9UxvUs+xvw6EOwBAPVnOYdNmOAXCHQCgoCxmt2hz7LeBcAcAKChLWa/aPHeBcAcAqCgLmf5JPdvNVSDcAQAqyjIubh/bXO+BcAcAKCmrWB7bfM+BcAcAKClrOGxaBy+BcAcAqCkr2C1aF5eBcAcAqCnHt161Pt4C4Q4AUFSObpqSme8hEO4AAEXl2KYpmQ7uA+EOAFBWjmx5bP18BMIdAKCsHNdh0zp6vQ6EOwBAWTmq3aJ1dQqEOwBAXTmm9ar1tXdwF+4AAJXliH6mZBzcx/YFAMAv/kO4T1MyHe23gXAHACgsR3OxPLb+PgPhDgBQWQ7msGl/4MnBXbgD3+zdS0pDQRRF0So14gcSkCDiBxRC1fxnKLGlEssQeMk7Ya1RbE7jXgCy9VnZ3NdJPBSEOwBAtD4jy486jZe7gnAHAIjWZ+NmUafyXhDuAADZ+kxsL0BOZWVwL0W4AwBk67Pw8wKkwT1BAwBg4CzDfdpsr6vXQhHuAADZ+uldreuk3gqlCHcAgGz9MHM/3P6dwX1LuAMAZOsHCDjcbnD/TbgDAITrJ7S8qDsY3CM0AABGzijcdx9uN7iHaAAAjJxNuF8urusx3Ba2hDsAQLh+EpfPT/UoHgtfhDsAQLi+p6DD7Qb3HYQ7AEC4Polxtq/rXwzuMRoAACP54T7+t2RwT9EAABhJD/fxvyWDe44GAMBIdrj/m+0G9xgNAICR5HDfXNQxg3uQBgDASG647/Mm1eCeowEAfLJ3BykNQ2EURvtsJYJQCzqQomBBXve/Q+dN+E2wYG44ZxUfd3KppIb78dJ+ZXBP0gEAqGSG+9O8m1SDe5AOAEAlMdz351nZbnCP0gEAqOSF+/783uYxuCfpAABU0sJ9OM3NdoN7lg4AQCUr3Bdlu8E9SgcAoJIU7sPprc1mcA/TAQAoxZT7cFiW7Qb3LB0AgFJIuC/NdoN7mg4AQCkj3A/PbSGDe5gOAEApIdxfF2e7wT1OBwCgtP5w//9sN7iPCXcAgHQbzHaD+5hwBwBId72n74e2Bgb3EeEOAJBue9nePnfcEu4AAOmu93K8tJX42HFLuAMApNtcthvcpwh3AIB0W8t2g/sk4Q4AkG5r2W5wnyTcAQDSbSzb24vBfYpwBwBI99dsf2zr8rVjgnD/acfeUhoGgACKzvghIj5QEJGCoCjZ/w67gUwILZTMcM4qLhcAoLtZ2Z6vj8EK4Q4A0N1yuYfDZbvhXhHuAADdXZHt93k4J8N9nXAHAGhvULZnvgerhDsAQHuDst1wLwl3AID25mS74V4T7gAA7c3J9jw9B+uEOwBAe2OyPfM/KAh3AID2xmR7vhnuJeEOANDelGzP/Aoqwh0AoL0p2Z7fT0FFuAMAtLfs8nL0bM/8DUrCHQCgvX3ZnodnuG8R7gAA7e3I9p9s4DOoCXcAgPZmZHt+BBuEOwBAe8umv7vswXC/qTP0HKSOIE975gAAAABJRU5ErkJggg=="); } }
  .vsa-tetiere__text-wrapper {
    position: relative;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    width: 100%;
    max-width: 62.5rem;
    padding: 0 1.25rem; }
    @media only screen and (min-width: 40.063em) {
      .vsa-tetiere__text-wrapper {
        height: 16.3em;
        padding: 0 1.25rem; } }
  .vsa-tetiere__body {
    max-width: 25em;
    text-align: center;
    color: #fff;
    font-family: AvenirBook, Arial, Helvetica, sans-serif;
    font-size: 1em;
    margin: 0 0 1.25rem 0;
    z-index: 1;
    padding: 0 1em;
    line-height: 1.3; }
    @media only screen and (min-width: 40.063em) {
      .vsa-tetiere__body {
        margin: 0;
        padding: 0; } }
  .vsa-tetiere .vsa-breadcrumb {
    z-index: 1;
    width: 100%;
    margin-bottom: 1.25rem; }
    @media only screen and (min-width: 40.063em) {
      .vsa-tetiere .vsa-breadcrumb {
        margin: 1.25rem 0;
        width: auto; } }
  .vsa-tetiere .vsa-heading {
    padding: 0 1em;
    margin-bottom: 1.25rem;
    z-index: 1; }
    @media only screen and (min-width: 40.063em) {
      .vsa-tetiere .vsa-heading {
        padding: 0; } }

/* Slider */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent; }

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0; }
  .slick-list:focus {
    outline: none; }
  .slick-list.dragging {
    cursor: pointer;
    cursor: hand; }

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto; }
  .slick-track:before, .slick-track:after {
    content: "";
    display: table; }
  .slick-track:after {
    clear: both; }
  .slick-loading .slick-track {
    visibility: hidden; }

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none; }
  [dir="rtl"] .slick-slide {
    float: right; }
  .slick-slide img {
    display: block; }
  .slick-slide.slick-loading img {
    display: none; }
  .slick-slide.dragging img {
    pointer-events: none; }
  .slick-initialized .slick-slide {
    display: block; }
  .slick-loading .slick-slide {
    visibility: hidden; }
  .slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent; }

.slick-arrow.slick-hidden {
  display: none; }

/* stylelint-disable property-blacklist */
/** @define utilities */
.oui-u-typo {
  /* A déclarer en fin de fichier, ces classes devant être prioritaires par rapport aux classes de typo précédentes */ }
  .oui-u-typo-h1 {
    font-size: 1.875rem;
    line-height: 2.1875rem;
    font-family: AvenirRoman, AvenirBook, Arial, Helvetica, sans-serif;
    font-weight: normal; }
    @media (min-width: 40.063em) {
      .oui-u-typo-h1 {
        font-size: 2.25rem;
        line-height: 2.5rem; } }
  .oui-u-typo-h1-important {
    font-size: 2.25rem;
    line-height: 2.1875rem;
    font-family: Baloo, AvenirBlack, AvenirHeavy, Arial, Helvetica, sans-serif;
    font-weight: normal; }
    @media (min-width: 40.063em) {
      .oui-u-typo-h1-important {
        font-size: 3rem;
        line-height: 3rem; } }
  .oui-u-typo-h2 {
    font-size: 1.625rem;
    line-height: 1.875rem;
    font-family: AvenirRoman, AvenirBook, Arial, Helvetica, sans-serif;
    font-weight: normal; }
    @media (min-width: 40.063em) {
      .oui-u-typo-h2 {
        font-size: 1.875rem;
        line-height: 2.1875rem; } }
  .oui-u-typo-h2-important {
    font-size: 1.625rem;
    line-height: 1.875rem;
    font-family: AvenirRoman, AvenirBook, Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-family: Baloo, AvenirBlack, AvenirHeavy, Arial, Helvetica, sans-serif; }
    @media (min-width: 40.063em) {
      .oui-u-typo-h2-important {
        font-size: 1.875rem;
        line-height: 2.1875rem; } }
  .oui-u-typo-h3 {
    font-size: 1.25rem;
    line-height: 1.625rem;
    font-family: AvenirRoman, AvenirBook, Arial, Helvetica, sans-serif;
    font-weight: normal; }
  .oui-u-typo-subheading {
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-family: AvenirRoman, AvenirBook, Arial, Helvetica, sans-serif;
    font-weight: normal; }
  .oui-u-typo-body-1 {
    font-size: 1rem;
    line-height: 1.375rem;
    font-family: AvenirRoman, AvenirBook, Arial, Helvetica, sans-serif;
    font-weight: normal; }
  .oui-u-typo-body {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-family: AvenirRoman, AvenirBook, Arial, Helvetica, sans-serif;
    font-weight: normal; }
  .oui-u-typo-note {
    font-size: 0.75rem;
    line-height: 1.125rem;
    font-family: AvenirRoman, AvenirBook, Arial, Helvetica, sans-serif;
    font-weight: normal; }
  .oui-u-typo-highlight {
    font-family: Baloo, AvenirBlack, AvenirHeavy, Arial, Helvetica, sans-serif; }
  .oui-u-typo-bold {
    font-family: AvenirHeavy, Arial, Helvetica, sans-serif;
    font-weight: normal; }
  .oui-u-typo-bolder {
    font-family: AvenirBlack, AvenirHeavy, Arial, Helvetica, sans-serif;
    font-weight: normal; }

/* stylelint-disable property-blacklist */
.oui-u-hidden {
  visibility: hidden; }

.oui-u-no-display {
  display: none; }

.oui-u-visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap; }

/* stylelint-disable property-blacklist */
/* Couleurs spécifiques au logo à ne pas utiliser en dehors */
/* stylelint-disable color-no-hex */
/* stylelint-enable */
/** @define oui-loader */
.oui-loader {
  font-size: 3.5rem;
  /* stylelint-disable-line property-blacklist */
  /* Déclaration d'une taille de fonte pour pouvoir utiliser l'unité em (pour pouvoir adapter le contenu du loader) */
  position: relative;
  width: 1em;
  height: 0.7125em;
  overflow: hidden; }
  .oui-loader__background, .oui-loader__arc {
    position: absolute;
    top: 0.05em;
    left: 0.05em;
    width: 0.9em;
    height: 0.9em;
    border: 0.15em solid transparent;
    border-radius: 50%; }
  .oui-loader__background {
    -webkit-animation: oui-loader-background-toggle 2.4s linear 0.66s infinite;
    animation: oui-loader-background-toggle 2.4s linear 0.66s infinite; }
  .oui-loader__arc {
    -webkit-animation: oui-loader-arc-rotate 1.2s linear infinite;
    animation: oui-loader-arc-rotate 1.2s linear infinite; }
  .oui-loader__arc::before {
    content: '';
    display: block;
    position: absolute;
    top: 79%;
    width: 0.15em;
    height: 0.15em;
    border-radius: 100% 25% 0;
    left: -9%;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg); }
  .oui-loader__arc--1 {
    border-bottom-color: #ea4d94;
    -webkit-animation-delay: 0s;
    animation-delay: 0s; }
  .oui-loader__arc--1::before {
    background-color: #ea4d94;
    /* stylelint-disable-line property-blacklist */
    /* Pas de gestion de couleurs accessibles sur le loader */ }
  .oui-loader__arc--2 {
    border-bottom-color: #b51742;
    -webkit-animation-delay: 0.132s;
    animation-delay: 0.132s; }
  .oui-loader__arc--2::before {
    background-color: #b51742;
    /* stylelint-disable-line property-blacklist */
    /* Pas de gestion de couleurs accessibles sur le loader */ }
  .oui-loader__arc--3 {
    border-bottom-color: #e73b27;
    -webkit-animation-delay: 0.264s;
    animation-delay: 0.264s; }
  .oui-loader__arc--3::before {
    background-color: #e73b27;
    /* stylelint-disable-line property-blacklist */
    /* Pas de gestion de couleurs accessibles sur le loader */ }
  .oui-loader__arc--4 {
    border-bottom-color: #f28a2c;
    -webkit-animation-delay: 0.396s;
    animation-delay: 0.396s; }
  .oui-loader__arc--4::before {
    background-color: #f28a2c;
    /* stylelint-disable-line property-blacklist */
    /* Pas de gestion de couleurs accessibles sur le loader */ }
  .oui-loader__arc--5 {
    border-bottom-color: #f7a62b;
    -webkit-animation-delay: 0.528s;
    animation-delay: 0.528s; }
  .oui-loader__arc--5::before {
    background-color: #f7a62b;
    /* stylelint-disable-line property-blacklist */
    /* Pas de gestion de couleurs accessibles sur le loader */ }
  .oui-loader__arc--6 {
    border-bottom-color: #fbcc24;
    -webkit-animation-delay: 0.66s;
    animation-delay: 0.66s; }
  .oui-loader__arc--6::before {
    background-color: #fbcc24;
    /* stylelint-disable-line property-blacklist */
    /* Pas de gestion de couleurs accessibles sur le loader */ }
  .oui-loader__arc--6::after {
    content: '';
    display: block;
    position: absolute;
    top: 79%;
    width: 0.15em;
    height: 0.15em;
    border-radius: 100% 25% 0;
    right: -9%;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    background-color: #fbcc24;
    /* stylelint-disable-line property-blacklist */
    /* Pas de gestion de couleurs accessibles sur le loader */ }

/* Pas de gestion de couleurs accessibles sur le loader */
/* stylelint-disable property-blacklist */
@-webkit-keyframes oui-loader-background-toggle {
  0% {
    border-color: transparent; }
  12.5% {
    border-color: transparent transparent transparent #fbcc24; }
  25% {
    border-color: #fbcc24 #fbcc24 transparent #fbcc24; }
  50% {
    border-color: #fbcc24 #fbcc24 transparent #fbcc24; }
  60% {
    border-color: #fbcc24 #fbcc24 transparent transparent; }
  70% {
    border-color: transparent #fbcc24 transparent transparent; }
  90% {
    border-color: transparent; }
  100% {
    border-color: transparent; } }

@keyframes oui-loader-background-toggle {
  0% {
    border-color: transparent; }
  12.5% {
    border-color: transparent transparent transparent #fbcc24; }
  25% {
    border-color: #fbcc24 #fbcc24 transparent #fbcc24; }
  50% {
    border-color: #fbcc24 #fbcc24 transparent #fbcc24; }
  60% {
    border-color: #fbcc24 #fbcc24 transparent transparent; }
  70% {
    border-color: transparent #fbcc24 transparent transparent; }
  90% {
    border-color: transparent; }
  100% {
    border-color: transparent; } }

/* stylelint-enable */
@-webkit-keyframes oui-loader-arc-rotate {
  from {
    -webkit-transform: rotate(0);
    transform: rotate(0); }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes oui-loader-arc-rotate {
  from {
    -webkit-transform: rotate(0);
    transform: rotate(0); }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

/* stylelint-disable property-blacklist */
/** @define oui-breadcrumbs */
.oui-breadcrumbs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* Utilisation de flex pour supprimer les whitespaces indésirables entre les <li>*/
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  color: #000;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-family: AvenirRoman, AvenirBook, Arial, Helvetica, sans-serif;
  font-weight: normal;
  /* Uniquement sur mobile : affichage du numéro de l'étape en cours avant le label (ex : "1/4 <étape active>")*/ }
  .a11y-high-c .oui-breadcrumbs {
    color: #000; }
  .oui-breadcrumbs__item {
    display: none;
    /* Les items sont masqués sur mobile en dehors de l'item actif*/
    border-radius: 2rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0.1875rem 0.875rem;
    background-color: #fff;
    border-width: 0.0625rem;
    border-style: solid;
    border-color: #000; }
    .a11y-high-c .oui-breadcrumbs__item {
      background-color: #fff; }
    .a11y-high-c .oui-breadcrumbs__item {
      border-color: #000; }
  .oui-breadcrumbs--with-numerotation .oui-breadcrumbs__item::before {
    content: attr(data-position) "/" attr(data-total);
    margin-right: 0.375rem;
    white-space: nowrap; }
  .oui-breadcrumbs__item--active {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-family: AvenirHeavy, Arial, Helvetica, sans-serif;
    font-weight: normal; }
  @media (min-width: 40.063em) {
    .oui-breadcrumbs {
      color: #ea5330;
      /* Uniquement sur desktop : affichage des flèches intermédiaires entre les labels*/ }
      .a11y-high-c .oui-breadcrumbs {
        color: #d93914; }
      .oui-breadcrumbs__item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        border-radius: 0;
        border-right-width: 0;
        border-left-width: 0;
        padding-right: 0;
        padding-left: 0.5rem;
        border-color: #fff;
        /* Fix pour IE11 et Edge */
        margin-right: -0.0625rem; }
        .a11y-high-c .oui-breadcrumbs__item {
          border-color: #fff; }
      .oui-breadcrumbs__item:first-child {
        padding-left: 1.25rem;
        border-top-left-radius: 2rem;
        border-bottom-left-radius: 2rem;
        border-left-width: 0.0625rem; }
      .oui-breadcrumbs__item:last-child {
        padding-right: 1.25rem;
        border-top-right-radius: 2rem;
        border-bottom-right-radius: 2rem;
        border-right-width: 0.0625rem; }
      .oui-breadcrumbs__item::before {
        display: none; }
      .oui-breadcrumbs__item::after {
        content: '';
        margin-left: 0.5rem;
        width: 1.125rem;
        height: 1.125rem;
        background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cpath%20d%3D%22M31.41 22.9L18.81 9.3c-1.3-1.4-3.5.6-2.2 2l11.7 12.6-11.7 12.8c-1.3 1.4.9 3.4 2.2 2l12.6-13.8c.5-.6.5-1.5 0-2z%22%20style%3D%22fill%3A%20%23ea5330%22%2F%3E%3C%2Fsvg%3E") center no-repeat;
        background-size: cover; } }
    @media screen and (min-width: 40.063em) and (-ms-high-contrast: active) {
      .oui-breadcrumbs__item::after {
        background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cpath%20d%3D%22M31.41 22.9L18.81 9.3c-1.3-1.4-3.5.6-2.2 2l11.7 12.6-11.7 12.8c-1.3 1.4.9 3.4 2.2 2l12.6-13.8c.5-.6.5-1.5 0-2z%22%20style%3D%22fill%3A%20windowText%22%2F%3E%3C%2Fsvg%3E") center no-repeat; } }
  @media (min-width: 40.063em) {
      .oui-breadcrumbs__item:last-child::after {
        display: none; }
      .oui-breadcrumbs__item--active {
        border-top-right-radius: 2rem;
        border-bottom-right-radius: 2rem;
        margin-right: -0.875rem;
        padding-right: 1.25rem; } }
    @media screen and (min-width: 40.063em) and (-ms-high-contrast: active) {
      .oui-breadcrumbs__item--active {
        background: windowText; } }
  @media (min-width: 40.063em) {
      .oui-breadcrumbs__item--active::after {
        display: none; }
      .oui-breadcrumbs__item--active ~ .oui-breadcrumbs__item {
        background: none;
        color: #fff; }
        .a11y-high-c .oui-breadcrumbs__item--active ~ .oui-breadcrumbs__item {
          color: #fff; }
      .oui-breadcrumbs__item--active ~ .oui-breadcrumbs__item::after {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cpath%20d%3D%22M31.41 22.9L18.81 9.3c-1.3-1.4-3.5.6-2.2 2l11.7 12.6-11.7 12.8c-1.3 1.4.9 3.4 2.2 2l12.6-13.8c.5-.6.5-1.5 0-2z%22%20style%3D%22fill%3A%20%23fff%22%2F%3E%3C%2Fsvg%3E"); } }
    @media screen and (min-width: 40.063em) and (-ms-high-contrast: active) {
      .oui-breadcrumbs__item--active ~ .oui-breadcrumbs__item::after {
        background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cpath%20d%3D%22M31.41 22.9L18.81 9.3c-1.3-1.4-3.5.6-2.2 2l11.7 12.6-11.7 12.8c-1.3 1.4.9 3.4 2.2 2l12.6-13.8c.5-.6.5-1.5 0-2z%22%20style%3D%22fill%3A%20windowText%22%2F%3E%3C%2Fsvg%3E") center no-repeat; } }
  @media (min-width: 40.063em) {
      .oui-breadcrumbs__item--active + .oui-breadcrumbs__item {
        padding-left: 1.875rem; } }

/* stylelint-disable property-blacklist */
/* Espace reservé pour pouvoir caler les cards (ou autre élément) en superposition du header*/
/** @define oui-immersive-header */
.oui-immersive-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  min-height: 5.9375rem;
  padding: 0 1.25rem;
  background-color: #ea5330;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTI4MCA4MDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibSAtMSwwIGggMTI4MiBsIDAsNzY4IGMgMCwwIC0yNzguNSw0MCAtNjQxLDQwIEMgMjc3LjUsODA4IC0xLDc2OCAtMSw3NjggWiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+");
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTI4MCA4MDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibSAtMSwwIGggMTI4MiBsIDAsNzY4IGMgMCwwIC0yNzguNSw0MCAtNjQxLDQwIEMgMjc3LjUsODA4IC0xLDc2OCAtMSw3NjggWiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+");
  -webkit-mask-position: center bottom;
  mask-position: center bottom;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  mask-size: cover;
  /* Utilisation d'un wrapper pour contourner le bug https://github.com/philipwalton/flexbugs#flexbug-3 sous IE*/ }
  .a11y-high-c .oui-immersive-header {
    background-color: #d93914; }
  .oui-immersive-header--with-bottom-card {
    padding-bottom: 1.25rem; }
  .oui-immersive-header__content-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1; }
  .oui-immersive-header__breadcrumb {
    display: none; }
  .oui-immersive-header__title, .oui-immersive-header__small-title {
    color: #fff;
    margin: 1.25rem 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center; }
    .a11y-high-c .oui-immersive-header__title, .a11y-high-c .oui-immersive-header__small-title {
      color: #fff; }
  .oui-immersive-header__title {
    display: none; }
  .oui-immersive-header__sr-only-title {
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap; }
  .oui-immersive-header__body {
    position: relative;
    width: 100%; }
  @media (min-width: 40.063em) {
    .oui-immersive-header {
      min-height: 9.375rem;
      padding: 0 1.875rem; }
      .oui-immersive-header--with-bottom-card {
        padding-bottom: 1.875rem; }
      .oui-immersive-header__breadcrumb {
        display: block;
        margin-top: 2.5rem; }
      .oui-immersive-header__title {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        max-width: 60rem;
        margin: 1.875rem 1.25rem; }
      .oui-immersive-header__small-title {
        display: none; } }
  @media (min-width: 64.0625em) {
    .oui-immersive-header {
      min-height: 13.4375rem; }
      .oui-immersive-header--with-bottom-card {
        padding-bottom: 2.5rem; } }

/* stylelint-disable property-blacklist */
/* Espace reservé pour pouvoir caler les cards (ou autre élément) en superposition du header*/
/** @define oui-immersive-header */
.oui-immersive-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  min-height: 5.9375rem;
  padding: 0 1.25rem;
  background-color: #ea5330;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTI4MCA4MDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibSAtMSwwIGggMTI4MiBsIDAsNzY4IGMgMCwwIC0yNzguNSw0MCAtNjQxLDQwIEMgMjc3LjUsODA4IC0xLDc2OCAtMSw3NjggWiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+");
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTI4MCA4MDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibSAtMSwwIGggMTI4MiBsIDAsNzY4IGMgMCwwIC0yNzguNSw0MCAtNjQxLDQwIEMgMjc3LjUsODA4IC0xLDc2OCAtMSw3NjggWiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+");
  -webkit-mask-position: center bottom;
  mask-position: center bottom;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  mask-size: cover;
  /* Utilisation d'un wrapper pour contourner le bug https://github.com/philipwalton/flexbugs#flexbug-3 sous IE*/ }
  .a11y-high-c .oui-immersive-header {
    background-color: #d93914; }
  .oui-immersive-header--with-bottom-card {
    padding-bottom: 1.25rem; }
  .oui-immersive-header__content-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1; }
  .oui-immersive-header__breadcrumb {
    display: none; }
  .oui-immersive-header__title, .oui-immersive-header__small-title {
    color: #fff;
    margin: 1.25rem 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center; }
    .a11y-high-c .oui-immersive-header__title, .a11y-high-c .oui-immersive-header__small-title {
      color: #fff; }
  .oui-immersive-header__title {
    display: none; }
  .oui-immersive-header__sr-only-title {
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap; }
  .oui-immersive-header__body {
    position: relative;
    width: 100%; }
  @media (min-width: 40.063em) {
    .oui-immersive-header {
      min-height: 9.375rem;
      padding: 0 1.875rem; }
      .oui-immersive-header--with-bottom-card {
        padding-bottom: 1.875rem; }
      .oui-immersive-header__breadcrumb {
        display: block;
        margin-top: 2.5rem; }
      .oui-immersive-header__title {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        max-width: 60rem;
        margin: 1.875rem 1.25rem; }
      .oui-immersive-header__small-title {
        display: none; } }
  @media (min-width: 64.0625em) {
    .oui-immersive-header {
      min-height: 13.4375rem; }
      .oui-immersive-header--with-bottom-card {
        padding-bottom: 2.5rem; } }

/*
Colors

Liste des **couleurs custom** du projet VSA (hors charte OUI).

Les couleurs (et variables SASS) de la charte OUI sont héritées de CSS-Tools.
Elles sont visibles sur le [styleguide de CSS-Tools](https://gaspachi.socrate.vsct.fr:50080/jenkins/view/DWM-TOOLS/job/CSS-Tools/StyleGuide/section-9.html).

Markup: color.hbs

#DD0012 - $color-idavis
#4DA400 - $color-monChauffeur

Styleguide 12
*/
/*
Mixins

Bouts de code CSS réutilisables.

Styleguide 16
*/
/*
buttonCustom

Permet de créer un bouton avec couleur personnalisée

```
.Button.mainNav {
  @include buttonCustom($COLOR_MEA_INFO);
}
```

Styleguide 16.1
*/
/*
expandContainer

Permet de plier/déplier un contenu.

Basé sur les classes ajoutées par angular-animate, le contenu qui doit être plié/déplié doit avoir la classe `ng-animate-enabled'.

```
.FolderInfo-tickets {
  @include expandContainer("rem(2600)", ".5s");
}
```

Styleguide 16.2
*/
/*
Placeholders

Bouts de code CSS réutilisables.

Styleguide 17
*/
/*
pseudoOutline

Remplace l'outline de base par un outline sur un pseudo-élément, lors du focus sur un élement.

Solution la plus propre pour contourner un bug connu de Firefox (quand un élément contient un noeud en position absolute, l'outline de cet élément peut déborder de son contour réel).

```
.Button.mainNav {
  @extend %pseudoOutline;
}
```

Markup:
<button class="Button mainNav">
  <svg class="Button-picto"><use xlink:href="#vsa-menu-ticket"></use></svg>
  <span class="out">Ceci est un texte hors de l'ecran qui devrait casser l'outline sous Firefox</span>
  <span>Cliquez-moi</span>
</button>

Styleguide 17.1
*/
.Slider.folderPicker .slide, .PageSection-wrapper {
  /*
  TEMP : desactivé pour corriger un bug de prod (autocompletion pre-post qui passe sous le contenu)

  @media only screen and (min-width: 40.063em) {
    position: relative;   // necessaire pour le bon affichage du pseudo-element ::before

    &:focus {
      outline: none;

      &::before {
        @include outline-color($COLOR_PRIMARY);
        outline-width: 1px;
        outline-style: dotted;
        content: '';
        margin: 0;
        padding: 0;
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }
    }
  }
  */ }
  .Slider.folderPicker .slide:focus, .PageSection-wrapper:focus {
    outline: none; }

/*
shadowOutline

Remplace l'outline de base par un "box-shadow" lors du focus sur un élément.

Solution alternative pour contourner le bug outline de Firefox (quand un élément contient un noeud en position absolute, l'outline de cet élément peut déborder de son contour réel).

Permet également d'avoir un outline qui suit réellement les contours de l'élement (radius, etc...).

```
.Button.mainNav {
  @extend %shadowOutline;
}
```

Markup:
<div class="PageSection mainNav iata">
  <div tabindex="0" class="PageSection-wrapper">
    <h2 class="Title consultation">
      <span class="Title-text">
        <span>Cliquez-moi</span> pour voir l'outline
      </span>
    </h2>
  </div>
</div>

Styleguide 17.2
*/
@media only screen and (min-width: 40.063em) {
  .PageSection.iata .PageSection-wrapper:focus, .PassengerCard:focus {
    outline: none;
    box-shadow: 0 0 1px 1px rgba(234, 83, 48, 0.5); }
  .a11y-high-c .PageSection.iata .PageSection-wrapper:focus, .PageSection.iata .a11y-high-c .PageSection-wrapper:focus, .a11y-high-c .PassengerCard:focus {
    box-shadow: 0 0 1px 1px #ea5330; } }

/*
outOfScreen

Contenu complémentaire utile pour les lecteurs d'écran (mais masqué sur les écrans classiques).

```
.toto {
  @extend %outOfScreen;
}
```

Markup:
<span class="out">
  Ce texte ne s'affiche pas à l'écran mais sera lu par un lecteur d'écran.
</span>

Styleguide 17.3
*/
main .out, #progressBar, .List.buttons.multipleButtons .hideIfMultipleButtons {
  position: absolute;
  left: -9999px;
  max-width: 9000px; }

/*
TODO
printHidden:  Contenu masqué lors de l'impression
printOnly:    Contenu affiché lors de l'impression uniquement
*/
.Newrest {
  display: flex;
  align-items: center;
  justify-content: flex-start; }
  .Newrest-icon {
    flex-shrink: 0; }
  .Newrest-text {
    padding-bottom: 0.1875rem;
    flex-grow: 1; }
  .Newrest-link {
    flex-shrink: 0; }

/*
Structure du bloc déplié dans la section "Mon Billet" (billets Eurostar, formulaire Eurstar, etc.)
*/
@media only screen and (min-width: 40.063em) {
  .TicketsEurostar, .PassengersCheck {
    border-color: #ecedeb;
    border-width: 1px 0;
    border-style: solid;
    margin-top: 1.5625rem;
    position: relative;
    padding-bottom: 2.5rem; }
    .a11y-high-c .TicketsEurostar, .a11y-high-c .PassengersCheck {
      border-color: #ecedeb; } }

.TicketsEurostar-close svg, .PassengersCheck-close svg {
  width: 1.5625rem;
  height: 1.5625rem; }

@media only screen and (min-width: 40.063em) {
  .TicketsEurostar-close, .PassengersCheck-close {
    position: absolute;
    top: 0.9375rem;
    right: -0.3125rem; } }

@media only screen and (min-width: 40.063em) {
  .TicketsEurostar-wrapper, .PassengersCheck-wrapper {
    width: 43.75rem; } }

@media only screen and (min-width: 64.0625em) {
  .TicketsEurostar-wrapper, .PassengersCheck-wrapper {
    width: auto;
    padding: 0 3.75rem; } }

.TicketsEurostar-title, .PassengersCheck-title {
  font-size: 1.25rem;
  font-weight: normal;
  text-align: center;
  margin: 1.6875rem 0 0; }

.TicketsEurostar-intro, .PassengersCheck-intro {
  color: #0099b4;
  margin-top: 1.25rem; }
  .a11y-high-c .TicketsEurostar-intro, .a11y-high-c .PassengersCheck-intro {
    color: #007a89; }
  @media only screen and (min-width: 40.063em) {
    .TicketsEurostar-intro, .PassengersCheck-intro {
      color: #000;
      text-align: center;
      margin-top: 1.0625rem; } }

.TicketsEurostar-errorMessage {
  margin-top: 0.9375rem; }
  @media only screen and (min-width: 40.063em) {
    .TicketsEurostar-errorMessage {
      margin-top: 2.1875rem; } }

/*
iconText

Affiche un texte accompagné d'une icone.

```
.Link.arrow {
  @extend %iconText;

  .Link-icon {
    @extend %iconText-icon;
  }

  .Link-text {
    @extend %iconText-text;
  }
}
```

Markup:
<div style="width: 250px;">
  <a class="Link arrow">
    <div class="Link-icon">
      <svg><use xlink:href="#flashcode"></use></svg>
    </div>
    <div class="Link-text">
      <div class="Link-text-title">E-billet</div>
      <div>Accéder à mon e-billet</div>
    </div>
  </a>
</div>

Styleguide 17.6
*/
.Link.arrow, .MessageInfo-message, .FolderPickerItem-date, .DeliveryMode-title, .DeliveryMode-solutions-item, .DeliveryMode.tkd_eurostar .DeliveryMode-infoBoarding, .Tickets-info {
  display: flex;
  align-items: center; }
  .Link.arrow .Link-text, .MessageInfo-text, .FolderPickerItem-date-text, .DeliveryMode-title-text, .DeliveryMode-solutions-item-text, .DeliveryMode.tkd_eurostar .DeliveryMode-infoBoarding-text, .Tickets-info-text {
    flex-grow: 1; }
  .Link.arrow .Link-icon, .Link.arrow .Link-arrow, .MessageInfo-icon, .FolderPickerItem-date-icon, .DeliveryMode-title-icon, .DeliveryMode-solutions-item-icon, .DeliveryMode.tkd_eurostar .DeliveryMode-infoBoarding-icon, .Tickets-info-icon {
    flex-shrink: 0; }
    .Link.arrow .Link-icon svg, .Link.arrow .Link-arrow svg, .MessageInfo-icon svg, .FolderPickerItem-date-icon svg, .DeliveryMode-title-icon svg, .DeliveryMode-solutions-item-icon svg, .DeliveryMode.tkd_eurostar .DeliveryMode-infoBoarding-icon svg, .Tickets-info-icon svg {
      fill: currentColor;
      display: block; }

/*
pageSection-component

Ajoute la marge haute sur un composant à l'intérieur de .PageSection

margin-top: 35px (mobile) / 45px (desktop)

```
.MonComposant {
  @extend %pageSection-component;
}
```

Styleguide 17.4
*/
.Travel-message, .Travel-link, .Travel-details, .IDAvis, .XsellWidget, .Weather, .AftersaleValidation-email, .AftersaleQuote-panel, .PartialCancellationStep, .Confirmation-status, .Confirmation-status-account, .Confirmation-status-warnings, .Confirmation-folderSummary, .Confirmation-busConditions, .Confirmation-securityGate, .Confirmation-transaction #megabanner.show-ad-vsc {
  margin-top: 2.1875rem; }
  @media only screen and (min-width: 40.063em) {
    .Travel-message, .Travel-link, .Travel-details, .IDAvis, .XsellWidget, .Weather, .AftersaleValidation-email, .AftersaleQuote-panel, .PartialCancellationStep, .Confirmation-status, .Confirmation-status-account, .Confirmation-status-warnings, .Confirmation-folderSummary, .Confirmation-busConditions, .Confirmation-securityGate, .Confirmation-transaction #megabanner.show-ad-vsc {
      margin-top: 2.8125rem; } }

/*
pageSection-buttons

Ajoute la marge haute sur les boutons d'action à l'intérieur de .PageSection

margin-top: 30px (mobile) / 40px (desktop)

```
.MonComposant {
  @extend %pageSection-buttons;
}
```

Styleguide 17.5
*/
.List.buttons, .List.buttons.aftersaleActions, .AftersaleValidation-quoteButtons-homeButton, .AftersaleValidation-quoteButtons-refreshButton, .Confirmation-aftersaleLink {
  margin-top: 1.875rem; }
  @media only screen and (min-width: 40.063em) {
    .List.buttons, .List.buttons.aftersaleActions, .AftersaleValidation-quoteButtons-homeButton, .AftersaleValidation-quoteButtons-refreshButton, .Confirmation-aftersaleLink {
      margin-top: 2.5rem; } }

/*
TODO: a commenter pour KSS
*/
.FolderInfo, .CancellationConfirmation-refund, .AftersaleQuote-panel, .FolderSummary {
  border-color: #ecedeb;
  border-style: solid;
  border-width: 1px;
  border-radius: 0.5rem;
  overflow: auto; }
  .a11y-high-c .FolderInfo, .a11y-high-c .CancellationConfirmation-refund, .a11y-high-c .AftersaleQuote-panel, .a11y-high-c .FolderSummary {
    border-color: #ecedeb; }
  .FolderSummary-details, .FolderSummary-conditions, .FolderSummary-addToCalendar {
    padding: 0 0.9375rem; }
    @media only screen and (min-width: 40.063em) {
      .FolderSummary-details, .FolderSummary-conditions, .FolderSummary-addToCalendar {
        padding: 0 1.875rem; } }
  .AftersaleQuote-panel-initialPrice, .AftersaleQuote-panel-refundFees, .AftersaleQuote-panel-noRefund,
  .AftersaleQuote-panel .AftersaleQuote-yourSelection, .AftersaleQuote-panel-refundAmount, .FolderSummary-addToCalendar {
    padding-top: 0.9375rem; }
    @media only screen and (min-width: 40.063em) {
      .AftersaleQuote-panel-initialPrice, .AftersaleQuote-panel-refundFees, .AftersaleQuote-panel-noRefund,
      .AftersaleQuote-panel .AftersaleQuote-yourSelection, .AftersaleQuote-panel-refundAmount, .FolderSummary-addToCalendar {
        padding-top: 1.5625rem; } }
  .FolderInfo-footer, .AftersaleQuote-panel-sum, .FolderSummary-conditions {
    border-color: #ecedeb;
    border-style: none;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    margin: 1.5625rem 0 0; }
    .a11y-high-c .FolderInfo-footer, .a11y-high-c .AftersaleQuote-panel-sum, .a11y-high-c .FolderSummary-conditions {
      border-color: #ecedeb; }
  .FolderInfo-header, .FolderSummary-title {
    background-color: #ea5330;
    color: #fff; }
    .a11y-high-c .FolderInfo-header, .a11y-high-c .FolderSummary-title {
      background-color: #d93914; }

/* surcharges Drupal, CSS Tools & partenaires */
/* surcharge du canvas */
.vsc__header,
.vsc__menu,
.vsc__footer,
.vsc__MEA {
  font-size: 16px; }

.vsc__header {
  position: absolute; }
  .vsc__header--tiny {
    height: 55px; }
    .vsc__header--tiny .vsc__header-table {
      height: 55px; }

.vsc__container {
  background: none;
  margin-top: 0;
  padding-top: 0; }
  .vsc__container--tiny {
    padding-top: 0; }

@media only screen and (max-width: 50em) {
  .vsc__footer-links {
    display: none; } }

/* Mentions légales */
.contentML__header::after {
  transform: rotate(0); }

.contentML__inner, .contentML__details {
  max-width: 60rem; }

.contentML__inner--open .contentML__header::after {
  transform: rotate(180deg); }

.contentML a {
  color: inherit; }

@media print {
  .vsc__header {
    box-shadow: none; }
  .vsc__header-table > * {
    visibility: hidden; }
  .vsc__header-table .vsc__header-logo {
    visibility: visible; }
  .vsc__main {
    background-color: #fff; }
  .vsc__footer,
  #cookie-policy-popin {
    display: none; }
  .contentML {
    display: none; } }

.resetFontSize {
  font-size: 16px; }

/*
Surcharge CSS Tools

Modifiers complémentaires pour le [composant .vsc-button de CSS Tools](http://argos-hp.groupevsc.com/css-tools/styleguide/section-1.html).

Rendu pour les affichages suivants :
> - **affichage de base**
> - **.vsa-button--ghost**
> - **.vsa-button--icon-flex** (evolution de "vsc-button--icon" en display:flex, pour centrer le contenu d'un bouton avec largeur fixe)

Markup: css-tools-button.hbs

.vsa-button--full-width             - bouton sur toute la largeur du conteneur
.vsa-button--no-horizontal-padding  - bouton sans marge sur les côtés (push voiture)
.vsa-button--info                   - bouton info (taxi...)
.vsa-button--idavis                 - bouton rouge iDAvis
.vsa-button--monChauffeur           - bouton vert monChauffeur
.vsa-button--link                   - bouton dans le cas d'un lien

Styleguide 2.3
*/
.vsa-button {
  align-self: center;
  margin: 0 auto;
  font-size: 0.875rem;
  /*
  Loader .vsc-button

  Loader basé sur le bouton de css tools possédant 3 états.

  Markup: css-tools-button-loader.hbs

  .vsa-button--loader-loading     - bouton avec une animation en cours de chargement et 3 points animés
  .vsa-button--loader-loaded      - bouton avec une animation qui rem(NaN)plit toute la barre
  .vsa-button--loader-success     - bouton qui se tranforme en smiley vert
  .vsa-button--loader-error       - bouton qui se tranforme en smiley rouge
  .vsa-button--loader-reset       - bouton qui se retransforme de smiley à bouton

  Styleguide 2.4
  */
  /* Fix button ghost disabled quand c'est un div et pas un button (merci le tracking) */ }
  .vsa-button--large {
    font-size: 1rem; }
  .vsa-button--small {
    font-size: 0.8125rem; }
  .vsa-button--full-width {
    width: 100%; }
  .vsa-button--no-horizontal-padding {
    padding-left: 0;
    padding-right: 0; }
    .vsa-button--no-horizontal-padding span {
      letter-spacing: -0.03125rem; }
  .vsa-button--icon-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .5em 1em; }
    .vsa-button--icon-flex .vsa-button__icon-flex {
      font-size: 1.65em;
      padding-right: .2em; }
      .vsa-button--icon-flex .vsa-button__icon-flex svg {
        width: 1em;
        height: 1em;
        fill: currentColor; }
  .vsa-button--info {
    border-color: #0099b4;
    background-color: #0099b4; }
    .a11y-high-c .vsa-button--info {
      border-color: #006e81; }
    .a11y-high-c .vsa-button--info {
      background-color: #006e81; }
    .vsa-button--info:hover, .vsa-button--info:focus, .vsa-button--info:active, .vsa-button--info:active:hover, .vsa-button--info:focus:hover {
      border-color: #006e81;
      background-color: #006e81;
      color: #0099b4; }
    .a11y-high-c .vsa-button--info:hover,
    .a11y-high-c .vsa-button--info:focus,
    .a11y-high-c .vsa-button--info:active,
    .a11y-high-c .vsa-button--info:active:hover,
    .a11y-high-c .vsa-button--info:focus:hover {
      background-color: #00424e; }
    .vsa-button--info.vsa-button--ghost, .vsa-button--info.vsa-button--ghost-secondary, .vsa-button--info.vsa-button--ghost-white {
      color: #0099b4;
      background-color: transparent; }
      .a11y-high-c .vsa-button--info.vsa-button--ghost, .a11y-high-c .vsa-button--info.vsa-button--ghost-secondary, .a11y-high-c .vsa-button--info.vsa-button--ghost-white {
        color: #006e81; }
      .vsa-button--info.vsa-button--ghost:hover, .vsa-button--info.vsa-button--ghost-secondary:hover, .vsa-button--info.vsa-button--ghost-white:hover, .vsa-button--info.vsa-button--ghost:focus, .vsa-button--info.vsa-button--ghost-secondary:focus, .vsa-button--info.vsa-button--ghost-white:focus, .vsa-button--info.vsa-button--ghost:active, .vsa-button--info.vsa-button--ghost-secondary:active, .vsa-button--info.vsa-button--ghost-white:active, .vsa-button--info.vsa-button--ghost:active:hover, .vsa-button--info.vsa-button--ghost-secondary:active:hover, .vsa-button--info.vsa-button--ghost-white:active:hover, .vsa-button--info.vsa-button--ghost:focus:hover, .vsa-button--info.vsa-button--ghost-secondary:focus:hover, .vsa-button--info.vsa-button--ghost-white:focus:hover {
        background-color: rgba(0, 0, 0, 0.05);
        border-color: currentColor;
        outline-color: currentColor; }
      .a11y-high-c .vsa-button--info.vsa-button--ghost, .a11y-high-c .vsa-button--info.vsa-button--ghost-secondary, .a11y-high-c .vsa-button--info.vsa-button--ghost-white {
        background-color: transparent; }
      .a11y-high-c .vsa-button--info.vsa-button--ghost:hover, .a11y-high-c .vsa-button--info.vsa-button--ghost-secondary:hover, .a11y-high-c .vsa-button--info.vsa-button--ghost-white:hover,
      .a11y-high-c .vsa-button--info.vsa-button--ghost:focus,
      .a11y-high-c .vsa-button--info.vsa-button--ghost-secondary:focus,
      .a11y-high-c .vsa-button--info.vsa-button--ghost-white:focus,
      .a11y-high-c .vsa-button--info.vsa-button--ghost:active,
      .a11y-high-c .vsa-button--info.vsa-button--ghost-secondary:active,
      .a11y-high-c .vsa-button--info.vsa-button--ghost-white:active,
      .a11y-high-c .vsa-button--info.vsa-button--ghost:active:hover,
      .a11y-high-c .vsa-button--info.vsa-button--ghost-secondary:active:hover,
      .a11y-high-c .vsa-button--info.vsa-button--ghost-white:active:hover,
      .a11y-high-c .vsa-button--info.vsa-button--ghost:focus:hover,
      .a11y-high-c .vsa-button--info.vsa-button--ghost-secondary:focus:hover,
      .a11y-high-c .vsa-button--info.vsa-button--ghost-white:focus:hover {
        background-color: rgba(0, 0, 0, 0.05) !important; }
  .vsa-button--idavis {
    border-color: #dd0012;
    background-color: #dd0012; }
    .a11y-high-c .vsa-button--idavis {
      border-color: #aa000e; }
    .a11y-high-c .vsa-button--idavis {
      background-color: #aa000e; }
    .vsa-button--idavis:hover, .vsa-button--idavis:focus, .vsa-button--idavis:active, .vsa-button--idavis:active:hover, .vsa-button--idavis:focus:hover {
      border-color: #aa000e;
      background-color: #aa000e;
      color: #dd0012; }
    .a11y-high-c .vsa-button--idavis:hover,
    .a11y-high-c .vsa-button--idavis:focus,
    .a11y-high-c .vsa-button--idavis:active,
    .a11y-high-c .vsa-button--idavis:active:hover,
    .a11y-high-c .vsa-button--idavis:focus:hover {
      background-color: #77000a; }
    .vsa-button--idavis.vsa-button--ghost, .vsa-button--idavis.vsa-button--ghost-secondary, .vsa-button--idavis.vsa-button--ghost-white {
      color: #dd0012;
      background-color: transparent; }
      .a11y-high-c .vsa-button--idavis.vsa-button--ghost, .a11y-high-c .vsa-button--idavis.vsa-button--ghost-secondary, .a11y-high-c .vsa-button--idavis.vsa-button--ghost-white {
        color: #aa000e; }
      .vsa-button--idavis.vsa-button--ghost:hover, .vsa-button--idavis.vsa-button--ghost-secondary:hover, .vsa-button--idavis.vsa-button--ghost-white:hover, .vsa-button--idavis.vsa-button--ghost:focus, .vsa-button--idavis.vsa-button--ghost-secondary:focus, .vsa-button--idavis.vsa-button--ghost-white:focus, .vsa-button--idavis.vsa-button--ghost:active, .vsa-button--idavis.vsa-button--ghost-secondary:active, .vsa-button--idavis.vsa-button--ghost-white:active, .vsa-button--idavis.vsa-button--ghost:active:hover, .vsa-button--idavis.vsa-button--ghost-secondary:active:hover, .vsa-button--idavis.vsa-button--ghost-white:active:hover, .vsa-button--idavis.vsa-button--ghost:focus:hover, .vsa-button--idavis.vsa-button--ghost-secondary:focus:hover, .vsa-button--idavis.vsa-button--ghost-white:focus:hover {
        background-color: rgba(0, 0, 0, 0.05);
        border-color: currentColor;
        outline-color: currentColor; }
      .a11y-high-c .vsa-button--idavis.vsa-button--ghost, .a11y-high-c .vsa-button--idavis.vsa-button--ghost-secondary, .a11y-high-c .vsa-button--idavis.vsa-button--ghost-white {
        background-color: transparent; }
      .a11y-high-c .vsa-button--idavis.vsa-button--ghost:hover, .a11y-high-c .vsa-button--idavis.vsa-button--ghost-secondary:hover, .a11y-high-c .vsa-button--idavis.vsa-button--ghost-white:hover,
      .a11y-high-c .vsa-button--idavis.vsa-button--ghost:focus,
      .a11y-high-c .vsa-button--idavis.vsa-button--ghost-secondary:focus,
      .a11y-high-c .vsa-button--idavis.vsa-button--ghost-white:focus,
      .a11y-high-c .vsa-button--idavis.vsa-button--ghost:active,
      .a11y-high-c .vsa-button--idavis.vsa-button--ghost-secondary:active,
      .a11y-high-c .vsa-button--idavis.vsa-button--ghost-white:active,
      .a11y-high-c .vsa-button--idavis.vsa-button--ghost:active:hover,
      .a11y-high-c .vsa-button--idavis.vsa-button--ghost-secondary:active:hover,
      .a11y-high-c .vsa-button--idavis.vsa-button--ghost-white:active:hover,
      .a11y-high-c .vsa-button--idavis.vsa-button--ghost:focus:hover,
      .a11y-high-c .vsa-button--idavis.vsa-button--ghost-secondary:focus:hover,
      .a11y-high-c .vsa-button--idavis.vsa-button--ghost-white:focus:hover {
        background-color: rgba(0, 0, 0, 0.05) !important; }
  .vsa-button--monChauffeur {
    border-color: #9A1E3A;
    background-color: #9A1E3A; }
    .a11y-high-c .vsa-button--monChauffeur {
      border-color: #6f162a; }
    .a11y-high-c .vsa-button--monChauffeur {
      background-color: #6f162a; }
    .vsa-button--monChauffeur:hover, .vsa-button--monChauffeur:focus, .vsa-button--monChauffeur:active, .vsa-button--monChauffeur:active:hover, .vsa-button--monChauffeur:focus:hover {
      border-color: #6f162a;
      background-color: #6f162a;
      color: #9A1E3A; }
    .a11y-high-c .vsa-button--monChauffeur:hover,
    .a11y-high-c .vsa-button--monChauffeur:focus,
    .a11y-high-c .vsa-button--monChauffeur:active,
    .a11y-high-c .vsa-button--monChauffeur:active:hover,
    .a11y-high-c .vsa-button--monChauffeur:focus:hover {
      background-color: #450d1a; }
    .vsa-button--monChauffeur.vsa-button--ghost, .vsa-button--monChauffeur.vsa-button--ghost-secondary, .vsa-button--monChauffeur.vsa-button--ghost-white {
      color: #9A1E3A;
      background-color: transparent; }
      .a11y-high-c .vsa-button--monChauffeur.vsa-button--ghost, .a11y-high-c .vsa-button--monChauffeur.vsa-button--ghost-secondary, .a11y-high-c .vsa-button--monChauffeur.vsa-button--ghost-white {
        color: #6f162a; }
      .vsa-button--monChauffeur.vsa-button--ghost:hover, .vsa-button--monChauffeur.vsa-button--ghost-secondary:hover, .vsa-button--monChauffeur.vsa-button--ghost-white:hover, .vsa-button--monChauffeur.vsa-button--ghost:focus, .vsa-button--monChauffeur.vsa-button--ghost-secondary:focus, .vsa-button--monChauffeur.vsa-button--ghost-white:focus, .vsa-button--monChauffeur.vsa-button--ghost:active, .vsa-button--monChauffeur.vsa-button--ghost-secondary:active, .vsa-button--monChauffeur.vsa-button--ghost-white:active, .vsa-button--monChauffeur.vsa-button--ghost:active:hover, .vsa-button--monChauffeur.vsa-button--ghost-secondary:active:hover, .vsa-button--monChauffeur.vsa-button--ghost-white:active:hover, .vsa-button--monChauffeur.vsa-button--ghost:focus:hover, .vsa-button--monChauffeur.vsa-button--ghost-secondary:focus:hover, .vsa-button--monChauffeur.vsa-button--ghost-white:focus:hover {
        background-color: rgba(0, 0, 0, 0.05);
        border-color: currentColor;
        outline-color: currentColor; }
      .a11y-high-c .vsa-button--monChauffeur.vsa-button--ghost, .a11y-high-c .vsa-button--monChauffeur.vsa-button--ghost-secondary, .a11y-high-c .vsa-button--monChauffeur.vsa-button--ghost-white {
        background-color: transparent; }
      .a11y-high-c .vsa-button--monChauffeur.vsa-button--ghost:hover, .a11y-high-c .vsa-button--monChauffeur.vsa-button--ghost-secondary:hover, .a11y-high-c .vsa-button--monChauffeur.vsa-button--ghost-white:hover,
      .a11y-high-c .vsa-button--monChauffeur.vsa-button--ghost:focus,
      .a11y-high-c .vsa-button--monChauffeur.vsa-button--ghost-secondary:focus,
      .a11y-high-c .vsa-button--monChauffeur.vsa-button--ghost-white:focus,
      .a11y-high-c .vsa-button--monChauffeur.vsa-button--ghost:active,
      .a11y-high-c .vsa-button--monChauffeur.vsa-button--ghost-secondary:active,
      .a11y-high-c .vsa-button--monChauffeur.vsa-button--ghost-white:active,
      .a11y-high-c .vsa-button--monChauffeur.vsa-button--ghost:active:hover,
      .a11y-high-c .vsa-button--monChauffeur.vsa-button--ghost-secondary:active:hover,
      .a11y-high-c .vsa-button--monChauffeur.vsa-button--ghost-white:active:hover,
      .a11y-high-c .vsa-button--monChauffeur.vsa-button--ghost:focus:hover,
      .a11y-high-c .vsa-button--monChauffeur.vsa-button--ghost-secondary:focus:hover,
      .a11y-high-c .vsa-button--monChauffeur.vsa-button--ghost-white:focus:hover {
        background-color: rgba(0, 0, 0, 0.05) !important; }
  .vsa-button--newrest, .vsa-button--monChauffeur {
    min-width: 0; }
  .vsa-button--link {
    color: #fff; }
    .a11y-high-c .vsa-button--link {
      color: #fff; }
  .vsa-button--ouibus {
    margin-top: 1.25rem; }
  .vsa-button--loader {
    /* Variables for loader */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding: calc(.875em + 0.0625rem) calc(1.25em + 0.0625rem);
    border: 0;
    transition: width 0.4s ease-in-out; }
    .vsa-button--loader .vsa-button__progress-bar {
      background-color: #ea5330;
      position: absolute;
      top: 0;
      left: -0.3125rem;
      height: 100%;
      transform: skew(-10deg);
      width: 0;
      transition: width 32s ease-out, background-color 0.4s linear; }
      .a11y-high-c .vsa-button--loader .vsa-button__progress-bar {
        background-color: #d93914; }
    .vsa-button--loader .vsa-button__wave-animation {
      position: absolute;
      left: calc((100% - 2rem) / 2);
      top: calc((100% - 2.5rem) / 2);
      height: 2.5rem;
      width: 2rem;
      display: flex;
      justify-content: space-between; }
      .vsa-button--loader .vsa-button__wave-animation .circle {
        border-color: #ea5330;
        background-color: #fff;
        border-style: solid;
        border-width: 1px;
        border-radius: 0.625rem;
        width: 0.5rem;
        height: 0.5rem;
        position: relative;
        top: 40%;
        opacity: 0;
        transition: opacity .2s linear;
        animation-name: none;
        animation-duration: 1333ms;
        animation-timing-function: linear;
        animation-iteration-count: infinite; }
        .a11y-high-c .vsa-button--loader .vsa-button__wave-animation .circle {
          border-color: #d93914; }
        .a11y-high-c .vsa-button--loader .vsa-button__wave-animation .circle {
          background-color: #fff; }
      .vsa-button--loader .vsa-button__wave-animation .c2 {
        animation-delay: 167ms; }
      .vsa-button--loader .vsa-button__wave-animation .c3 {
        animation-delay: 333ms; }
    .vsa-button--loader svg {
      position: absolute;
      height: 50%;
      width: 2rem;
      left: calc((100% - 2rem) / 2);
      top: 25%;
      fill: #fff;
      opacity: 0;
      transition: opacity .2s linear; }
      .a11y-high-c .vsa-button--loader svg {
        fill: #fff; }
    .vsa-button--loader .vsa-button__fade-text {
      white-space: nowrap;
      color: #fff;
      transition: opacity .2s linear; }
      .a11y-high-c .vsa-button--loader .vsa-button__fade-text {
        color: #fff; }
    .vsa-button--loader-loading, .vsa-button--loader-loading:hover {
      border-color: #ea5330 !important;
      border-style: solid;
      border-width: 1px;
      background-color: #fff !important; }
      .vsa-button--loader-loading .vsa-button__progress-bar, .vsa-button--loader-loading:hover .vsa-button__progress-bar {
        width: 50%; }
      .vsa-button--loader-loading .vsa-button__wave-animation .circle, .vsa-button--loader-loading:hover .vsa-button__wave-animation .circle {
        opacity: 1;
        transition-delay: .2s;
        animation-name: wave; }
      .vsa-button--loader-loading .vsa-button__fade-text, .vsa-button--loader-loading:hover .vsa-button__fade-text {
        opacity: 0; }
    .vsa-button--loader-loaded, .vsa-button--loader-loaded:hover {
      background-color: #fff;
      border-color: #ea5330;
      border-width: 1px;
      border-style: solid; }
      .a11y-high-c .vsa-button--loader-loaded, .a11y-high-c .vsa-button--loader-loaded:hover {
        background-color: #fff; }
      .a11y-high-c .vsa-button--loader-loaded, .a11y-high-c .vsa-button--loader-loaded:hover {
        border-color: #d93914; }
      .vsa-button--loader-loaded .vsa-button__progress-bar, .vsa-button--loader-loaded:hover .vsa-button__progress-bar {
        width: 150%;
        transition: width 0.4s linear; }
      .vsa-button--loader-loaded .vsa-button__wave-animation, .vsa-button--loader-loaded:hover .vsa-button__wave-animation {
        width: 1.875rem;
        left: calc((100% - 1.875rem) / 2); }
        .vsa-button--loader-loaded .vsa-button__wave-animation .circle, .vsa-button--loader-loaded:hover .vsa-button__wave-animation .circle {
          animation-name: wave;
          opacity: 1;
          width: 0.375rem;
          height: 0.375rem;
          border: 0; }
      .vsa-button--loader-loaded .vsa-button__fade-text, .vsa-button--loader-loaded:hover .vsa-button__fade-text {
        opacity: 0; }
    .vsa-button--loader-success .vsa-button__progress-bar, .vsa-button--loader-success:hover .vsa-button__progress-bar, .vsa-button--loader-error .vsa-button__progress-bar, .vsa-button--loader-error:hover .vsa-button__progress-bar {
      transition: background-color 0.4s linear; }
    .vsa-button--loader-success .vsa-button__wave-animation .circle, .vsa-button--loader-success:hover .vsa-button__wave-animation .circle, .vsa-button--loader-error .vsa-button__wave-animation .circle, .vsa-button--loader-error:hover .vsa-button__wave-animation .circle {
      animation-name: wave; }
    .vsa-button--loader-success svg, .vsa-button--loader-success:hover svg, .vsa-button--loader-error svg, .vsa-button--loader-error:hover svg {
      opacity: 1;
      transition-delay: .3s; }
    .vsa-button--loader-success .vsa-button__fade-text, .vsa-button--loader-success:hover .vsa-button__fade-text, .vsa-button--loader-error .vsa-button__fade-text, .vsa-button--loader-error:hover .vsa-button__fade-text {
      opacity: 0; }
    .vsa-button--loader-success, .vsa-button--loader-success:hover {
      background-color: #209e67;
      transition: width 0.4s ease-in-out; }
      .a11y-high-c .vsa-button--loader-success, .a11y-high-c .vsa-button--loader-success:hover {
        background-color: #1f7d63; }
      .vsa-button--loader-success .vsa-button__progress-bar, .vsa-button--loader-success:hover .vsa-button__progress-bar {
        background-color: #209e67;
        width: 120%; }
        .a11y-high-c .vsa-button--loader-success .vsa-button__progress-bar, .a11y-high-c .vsa-button--loader-success:hover .vsa-button__progress-bar {
          background-color: #1f7d63; }
    .vsa-button--loader-error, .vsa-button--loader-error:hover {
      background-color: #d9002e;
      transition: width 0.4s ease-in-out, background-color 0.4s linear; }
      .a11y-high-c .vsa-button--loader-error, .a11y-high-c .vsa-button--loader-error:hover {
        background-color: #b51742; }
      .vsa-button--loader-error .vsa-button__progress-bar, .vsa-button--loader-error:hover .vsa-button__progress-bar {
        background-color: #d9002e; }
        .a11y-high-c .vsa-button--loader-error .vsa-button__progress-bar, .a11y-high-c .vsa-button--loader-error:hover .vsa-button__progress-bar {
          background-color: #b51742; }
    .vsa-button--loader-reset, .vsa-button--loader-reset:hover {
      transition: width 0.4s ease-in-out, background-color 0.4s linear; }
      .vsa-button--loader-reset .vsa-button__progress-bar, .vsa-button--loader-reset:hover .vsa-button__progress-bar {
        display: none; }
      .vsa-button--loader-reset svg, .vsa-button--loader-reset:hover svg {
        opacity: 0; }
      .vsa-button--loader-reset .vsa-button__fade-text, .vsa-button--loader-reset:hover .vsa-button__fade-text {
        opacity: 1;
        transition-delay: .2s; }

@keyframes wave {
  0%,
  40%,
  100% {
    top: 40%; }
  20% {
    top: 30%; } }
  .vsa-button--ghost[disabled]:active, .vsa-button--ghost-secondary[disabled]:active, .vsa-button--ghost-white[disabled]:active {
    color: #999082; }
    .a11y-high-c .vsa-button--ghost[disabled]:active, .a11y-high-c .vsa-button--ghost-secondary[disabled]:active, .a11y-high-c .vsa-button--ghost-white[disabled]:active {
      color: #7b7162; }

/*
Surcharge .vsc-icon-list

Modifier **--services** pour adapter l'affichage des services sur mobile (4 services par ligne)

.vsa-icon-list--services   - 4 services max par ligne sur mobile
*/
.vsa-icon-list--services {
  border-color: #999082;
  border-radius: 1.5625rem;
  padding: 0.3125rem;
  max-width: 11.25rem; }
  .a11y-high-c .vsa-icon-list--services {
    border-color: #7b7162; }
  @media only screen and (min-width: 40.063em) {
    .vsa-icon-list--services {
      border-radius: 1.875rem;
      padding: 0.3125rem 0.625rem; } }
  @media only screen and (min-width: 40.063em) and (max-width: 64em) {
    .vsa-icon-list--services {
      max-width: 14.0625rem; } }
  @media only screen and (min-width: 64.0625em) {
    .vsa-icon-list--services {
      max-width: inherit; } }
  .vsa-icon-list--services .vsa-icon-list__icon {
    padding: 0.1875rem 0.5625rem;
    margin: 0.1875rem 0; }
    @media only screen and (min-width: 40.063em) {
      .vsa-icon-list--services .vsa-icon-list__icon {
        padding: 0.1875rem 0.75rem;
        margin: 0.3125rem 0; } }
    .vsa-icon-list--services .vsa-icon-list__icon svg {
      width: 1.375rem;
      height: 1.375rem; }
      @media only screen and (min-width: 40.063em) {
        .vsa-icon-list--services .vsa-icon-list__icon svg {
          width: 1.625rem;
          height: 1.625rem; } }

.vsa-icon-list--ouigo {
  border-color: #0099b4;
  border-width: 1px;
  border-style: solid;
  background-color: #fff;
  border-radius: 1.5625rem;
  padding: 0.5625rem 0.3125rem;
  display: flex;
  align-items: center; }
  .a11y-high-c .vsa-icon-list--ouigo {
    border-color: #007a89; }
  @media only screen and (min-width: 40.063em), print {
    .vsa-icon-list--ouigo {
      border-radius: 1.875rem;
      padding: 0.6875rem 0.625rem; } }
  .vsa-icon-list--ouigo .vsa-icon-list__list {
    border-color: #0099b4;
    border-width: 0 0 0 1px;
    border-style: solid; }
    .a11y-high-c .vsa-icon-list--ouigo .vsa-icon-list__list {
      border-color: #007a89; }
  .vsa-icon-list--ouigo .vsa-icon-list__desc {
    color: #01a0d0;
    text-align: center;
    padding: 0.125rem 0.625rem 0.125rem 0.3125rem;
    align-self: flex-start;
    font-size: 0.625rem;
    max-width: 100%; }
    .a11y-high-c .vsa-icon-list--ouigo .vsa-icon-list__desc {
      color: #01799d; }
    @media only screen and (min-width: 40.063em), print {
      .vsa-icon-list--ouigo .vsa-icon-list__desc {
        padding: 0.25rem 0.625rem 0.25rem 0.3125rem;
        font-size: 0.75rem; } }
    .vsa-icon-list--ouigo .vsa-icon-list__desc span {
      color: #e5006d;
      display: block;
      font-weight: bold;
      letter-spacing: 0.0375rem; }
      .a11y-high-c .vsa-icon-list--ouigo .vsa-icon-list__desc span {
        color: #af0158; }
  .vsa-icon-list--ouigo .vsa-icon-list__icon {
    display: inline-flex;
    align-items: center;
    padding: 0 0.625rem;
    margin: 0.3125rem 0; }
    @media only screen and (min-width: 40.063em), print {
      .vsa-icon-list--ouigo .vsa-icon-list__icon {
        padding: 0 0.8125rem; } }
    .vsa-icon-list--ouigo .vsa-icon-list__icon--quantity {
      padding: 0 0.375rem; }
      @media only screen and (min-width: 40.063em), print {
        .vsa-icon-list--ouigo .vsa-icon-list__icon--quantity {
          padding: 0 0.5625rem; } }
    .vsa-icon-list--ouigo .vsa-icon-list__icon svg {
      width: 1.25rem;
      height: 1.25rem; }
      @media only screen and (min-width: 40.063em), print {
        .vsa-icon-list--ouigo .vsa-icon-list__icon svg {
          width: 1.5rem;
          height: 1.5rem; } }
    .vsa-icon-list--ouigo .vsa-icon-list__icon span {
      margin-top: 0.1875rem;
      margin-left: 0.1875rem; }

/*
Surcharge .vsc-input

Modifier **--input-error** pour ajouter un border rouge en cas d'erreur dans l'input e-mail
Modifier **--text-error** pour afficher un message d'erreur en rouge
*/
.vsa-input--input-error {
  border-color: #d9002e;
  border-width: 2px;
  border-style: solid; }
  .a11y-high-c .vsa-input--input-error {
    border-color: #b51742; }

.vsa-input--text-error {
  color: #d9002e;
  font-size: 0.875rem;
  margin: 0; }
  .a11y-high-c .vsa-input--text-error {
    color: #b51742; }
  input + .vsa-input--text-error {
    margin-top: 0.3125rem; }

@media only screen and (min-width: 64.0625em), only screen and (min-width: 40.063em) and (max-width: 64em) {
  .vsa__MEA--home .vsc__MEA-picto {
    background-position-y: 1.5625rem; }
  .vsa__MEA--home .vsc__MEA-content {
    padding-top: 3.125rem; } }

.vsa__MEA--payment {
  margin-top: 1.875rem; }
  .vsa__MEA--payment .vsa__MEA-content {
    display: inline-flex;
    align-items: center; }
  .vsa__MEA--payment .vsa__MEA-picto {
    background-image: none !important;
    display: none; }
    @media only screen and (min-width: 40.063em), print {
      .vsa__MEA--payment .vsa__MEA-picto {
        display: block; } }
    .vsa__MEA--payment .vsa__MEA-picto svg {
      fill: currentColor;
      width: 2rem;
      height: 2rem;
      margin-top: -0.3125rem; }
  .vsa__MEA--payment .vsa__MEA-message {
    padding: 0;
    margin: auto; }
    .vsa__MEA--payment .vsa__MEA-message-content {
      padding-right: 0; }

.vsa__MEA--no-background {
  background-color: #fff !important; }
  @media only screen and (min-width: 40.063em) {
    .vsa__MEA--no-background .vsa__MEA-content,
    .vsa__MEA--no-background .vsa__MEA-message-content {
      padding-right: 0 !important; } }

.vsa__MEA--in-block .vsa__MEA-content {
  max-width: inherit;
  margin: inherit; }

.vsa__MEA--disruption {
  margin-bottom: 1.25rem; }
  .vsa__MEA--disruption strong {
    display: block; }
  .vsa__MEA--disruption p {
    line-height: 1.25rem; }
  .vsa__MEA--disruption .vsc__MEA-picto {
    display: none; }
    @media only screen and (min-width: 40.063em) {
      .vsa__MEA--disruption .vsc__MEA-picto {
        display: block; } }
  .vsa__MEA--disruption .vsc__MEA-message {
    padding-left: 0; }
    @media only screen and (min-width: 40.063em) {
      .vsa__MEA--disruption .vsc__MEA-message {
        padding-left: 3.475em; } }

.vsa__MEA-message {
  font-size: 0.875rem; }
  .a11y-high-c .vsa__MEA-message a {
    color: #fff; }

.vsc__MEA + .vsc__MEA::before {
  display: none; }

#vsa .vsa__MEA-picto {
  display: none; }
  @media only screen and (min-width: 40.063em) {
    #vsa .vsa__MEA-picto {
      display: unset; } }

#vsa .vsa__MEA-message {
  padding-left: 0; }
  @media only screen and (min-width: 40.063em) {
    #vsa .vsa__MEA-message {
      padding-left: 3.475em; } }

#vsa .vsa__MEA-message-content {
  display: block;
  padding-right: 0;
  line-height: 1.25rem; }
  @media only screen and (min-width: 64.0625em), only screen and (min-width: 40.063em) and (max-width: 64em) {
    #vsa .vsa__MEA-message-content {
      display: table-cell; } }

#vsa .vsa__MEA-message-button {
  display: block;
  text-align: center; }
  #vsa .vsa__MEA-message-button:empty {
    display: none; }
  @media only screen and (min-width: 64.0625em), only screen and (min-width: 40.063em) and (max-width: 64em) {
    #vsa .vsa__MEA-message-button {
      display: flex;
      text-align: left;
      height: 100%;
      align-items: center;
      margin-left: 1.25rem; } }

#vsa .vsa__MEA--no-background-icon .vsa__MEA-picto {
  background: none;
  display: flex;
  align-items: center; }
  #vsa .vsa__MEA--no-background-icon .vsa__MEA-picto svg {
    width: 1.5625rem;
    height: 1.5625rem;
    fill: currentColor; }

#vsa .vsa__MEA--no-background-icon .vsa__MEA-message {
  padding-left: 2.1875rem; }

@media only screen and (min-width: 40.063em) {
  #vsa .vsa__MEA--payment .vsa__MEA-picto {
    display: flex;
    align-items: center; } }

.vsa-capsule {
  font-size: .8125em; }
  .vsa-capsule--ouigo {
    background-color: #e5006d;
    font-size: .55em;
    font-weight: bold;
    padding: .4em .58em;
    border-radius: 50%; }
    .a11y-high-c .vsa-capsule--ouigo {
      background-color: #af0158; }
    @media print {
      .vsa-capsule--ouigo {
        color: #e5006d;
        border-color: #e5006d;
        border-style: solid;
        border-width: 1px;
        background-color: #fff; }
        .a11y-high-c .vsa-capsule--ouigo {
          color: #af0158; }
        .a11y-high-c .vsa-capsule--ouigo {
          border-color: #af0158; } }

/*
Surcharge CSS Tools
*/
.vsa-tetiere {
  background-position: top; }
  .vsa-tetiere__cache {
    max-width: 60em; }
  .vsa-tetiere__text-wrapper {
    max-width: none; }
  @media print {
    .vsa-tetiere {
      background: none; } }

.csc-widget .csc__button {
  font-size: 0.9375rem; }

.csc-widget .csc-text--medium {
  font-size: 0.875rem; }

.csc-widget .csc-text--small {
  font-size: 0.8125rem; }

.Travel .feasible .oui-message,
.Tickets .feasible .oui-message {
  text-align: center; }
  @media only screen and (min-width: 40.063em) {
    .Travel .feasible .oui-message,
    .Tickets .feasible .oui-message {
      text-align: left;
      display: inline-flex; } }

@media only screen and (min-width: 40.063em) {
  .Travel .oui-message,
  .Tickets .oui-message {
    display: inline-flex; } }

.Confirmation .Confirmation-warning {
  text-align: left; }
  .Confirmation .Confirmation-warning .oui-message {
    margin-bottom: 2.5rem;
    padding: 0.9375rem; }
    @media only screen and (min-width: 40.063em) {
      .Confirmation .Confirmation-warning .oui-message {
        display: inline-flex;
        padding: 0.625rem;
        margin-bottom: 0; } }
    @media only screen and (min-width: 40.063em) {
      .Confirmation .Confirmation-warning .oui-message .oui-message__icon {
        margin-right: 0.9375rem;
        margin-left: 0.625rem; } }

@media only screen and (min-width: 40.063em) {
  .oui-message__content {
    flex: auto !important; } }

.oui-message-info section {
  color: #ea5330; }
  .a11y-high-c .oui-message-info section {
    color: #d93914; }

.oui-message-alert section {
  color: #d9002e; }
  .a11y-high-c .oui-message-alert section {
    color: #b51742; }

.OuiButtonVsa-fullWidth {
  width: 100%; }
  @media only screen and (min-width: 40.063em) {
    .OuiButtonVsa-fullWidth {
      width: auto; } }

/* styles de base */
/*
Générique

Styles génériques applicables à divers éléments du DOM (`<div>`, `<a>`, `<svg>`, `<img>`, etc.)

Styleguide 1
*/
body {
  position: relative;
  height: auto;
  margin: 0;
  min-height: 100%;
  font-family: AvenirRoman, AvenirBook, Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 0.875rem;
  color: #000; }

main {
  display: block;
  /*
  Texte

  *Modifiers* de base pour la mise en page du texte.

  .center         - centrer du texte
  .left           - texte aligné a gauche
  .right          - texte aligné a droite
  .ellipsis       - couper un texte trop long avec une ellipse
  .noWrap         - supprime les passages a la ligne automatique entre chaque mot

  Markup: base-text.hbs

  Styleguide 1.1
  */
  /*
  Masquage

  Les exemples ci-dessous n'apparaissent pas à l'écran (c'est le but), inspecter le DOM pour plus de détails.

  .hidden       - masquer un élément (display: none)
  .hidden2      - masquer un élément (opacity: 0), permet de faire des calculs JS sur un de ses éléments fils
  .out          - déplacer un élément en dehors de la zone de l'écran afin qu'il ne soit "visible" que des lecteurs d'écran
  .printOnly    - élément affiché en mode print uniquement
  .printHidden  - élément masqué en mode print

  Markup: base-hiding.hbs

  Styleguide 1.2
  */
  /*
  Transformation 2D

  Applicable sur les balises `<img>` ou `<svg>`.

  En integrant la classe directement sur le picto, **ou sur son parent direct**.

  .flipH   - inverser un picto horizontalement
  .flipV   - inverser un picto verticalement

  Markup: base-transformation.hbs

  Styleguide 1.4
  */ }
  main :focus {
    outline-width: 1px;
    outline-style: dashed; }
  main * {
    box-sizing: border-box; }
  main p {
    margin: 0; }
  main ol,
  main ul {
    list-style: none;
    padding: 0;
    margin: 0; }
  main a {
    color: #ea5330;
    cursor: pointer; }
    .a11y-high-c main a {
      color: #d93914; }
    main a:focus {
      outline-color: #ea5330;
      outline-offset: 0.125rem; }
      .a11y-high-c main a:focus {
        outline-color: #d93914; }
  main button:focus {
    outline-color: #ea5330; }
    .a11y-high-c main button:focus {
      outline-color: #d93914; }
  main label {
    margin: 0; }
  main sup {
    bottom: .4em;
    font-size: 0.5rem; }
  main strong {
    font-family: AvenirHeavy, Arial, Helvetica, sans-serif;
    font-weight: normal; }
  main .center {
    text-align: center; }
  main .left {
    text-align: left; }
  main .right {
    text-align: right; }
  main .ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  main .noWrap {
    white-space: nowrap; }
  main .flexCenter {
    display: flex;
    justify-content: center; }
  main .hidden {
    display: none; }
  main .hidden2 {
    height: 0;
    overflow: hidden;
    opacity: 0; }
  main .printOnly {
    display: none; }
    @media print {
      main .printOnly {
        display: block; } }
  @media print {
    main .printHidden,
    main .out,
    main .mobile {
      display: none !important; } }
  main .flipH,
  main .flipH > svg,
  main .flipH > img {
    transform: scaleX(-1); }
  main .flipV,
  main .flipV > img,
  main .flipV > svg {
    transform: scaleY(-1); }
  @media only screen and (max-width: 40em) {
    main .tablet,
    main .desktop {
      display: none !important; } }
  @media only screen and (min-width: 40.063em) {
    main .mobile {
      display: none !important; } }
  main .dot-separator {
    display: inline-block;
    height: 0.375rem;
    width: 0.375rem;
    margin: -0.1875rem 0.3125rem 0;
    background-color: #000;
    border-radius: 50%;
    vertical-align: middle; }

#vsa {
  padding-top: 55px; }

#main-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto; }

#inline-svg {
  visibility: hidden;
  height: 0;
  width: 0; }
  @media print {
    #inline-svg {
      display: none; } }

/* composants de base */
/*
Titres

Ces styles peuvent être appliqués grâce à la classe `.Title` sur des balises `<hX>` ou `<div>`.

Styleguide 3
*/
.Title {
  width: 100%;
  margin: 0;
  font-weight: normal;
  text-decoration: none;
  /*
  Titres de page

  .confirmation               - Spécifique page de confirmation de commande

  Markup: title-pageHeader.hbs

  Styleguide 3.1
  */
  /*
  Titres principaux

  .section                    - Titre de section principale
  .section.passed             - Titre de section principale, pour un trajet consommé
  .pageHeaderSummary          - Titre principal de la page de consultation Mon Voyage
  .originDestination          - Origine > Destination (page /billets)
  .originDestination.passed   - Origine > Destination, trajet consommé
  .passengers                 - Titre "carte" passager
  .passengers.multiSeg        - Titre "carte" passager + OD (cas multi segment)

  Markup: title.hbs

  Styleguide 3.2
  */
  /*
  Titres basiques

  Titre avec structure HTML simple

  .pageTop                  - Titre des pages déportées mobile
  .printWarning             - Message affiché en cas d'impression (print)

  Markup: title-basic.hbs

  Styleguide 3.3
  */
  /*
  Titre recap DV (consultation)

  En forme de billet IATA. Page de consultation

  TODO: refacto à prevoir avec le placeholder %panel-header

  Markup: title-iata.hbs

  Styleguide 3.4
  */
  /*
  Titre recap DV (confirmation)

   Page de confirmation de commande

  TODO: comme pour le modifier .iata -> refacto à prevoir avec le placeholder %panel-header

  .asymmetric   - en cas de trajet asymétrique

  Markup: title-capsule.hbs

  Styleguide 3.5
  */ }
  .Title-picto {
    display: inline-block; }
  .Title-text {
    display: inline-block; }
  .Title-complement {
    display: block;
    font-size: 1rem;
    line-height: 1.5; }
  .Title strong {
    font-family: AvenirHeavy, Arial, Helvetica, sans-serif; }
  @media print {
    .Title {
      color: #000;
      background-color: inherit !important; }
      .Title svg {
        fill: #000; }
      .Title .Title-complement {
        background-color: inherit !important; } }
  .Title.pageHeader {
    text-align: center;
    font-size: 1.625rem; }
    @media only screen and (min-width: 40.063em), print {
      .Title.pageHeader {
        font-size: 1.875rem; } }
    .Title.pageHeader .Title-text {
      line-height: 2rem;
      padding: 0.3125rem 0; }
      .Title.pageHeader .Title-text span {
        font-family: Baloo, AvenirBlack, AvenirHeavy, Arial, Helvetica, sans-serif;
        font-size: 2.25rem; }
        @media only screen and (min-width: 40.063em), print {
          .Title.pageHeader .Title-text span {
            font-size: 3rem; } }
    @media only screen and (min-width: 40.063em) {
      .Title.pageHeader.confirmation .Title-text {
        font-size: 2.5rem;
        line-height: 3.125rem; } }
    .Title.pageHeader.confirmation .Title-text span {
      display: block; }
      @media only screen and (min-width: 40.063em) {
        .Title.pageHeader.confirmation .Title-text span {
          font-size: 3.75rem; } }
    @media print {
      .Title.pageHeader.confirmation {
        display: none; } }
  .Title.section {
    color: #000;
    background-color: transparent;
    text-transform: none;
    text-align: center; }
    .Title.section .Title-picto {
      display: none; }
    .Title.section .Title-text {
      font-size: 1.625rem;
      line-height: 1.75rem; }
      @media only screen and (min-width: 40.063em), print {
        .Title.section .Title-text {
          font-size: 1.875rem; } }
      .Title.section .Title-text span {
        font-family: Baloo, AvenirBlack, AvenirHeavy, Arial, Helvetica, sans-serif; }
    .Title.section .Title-complement {
      display: block;
      background-color: transparent;
      padding: 0;
      margin-top: 0.4375rem; }
    .Title.section.transactionSummary .Title-text span {
      white-space: nowrap; }
    .Title.section.passed .Title-complement {
      color: #999082; }
      .a11y-high-c .Title.section.passed .Title-complement {
        color: #7b7162; }
      .Title.section.passed .Title-complement strong {
        color: #000; }
  .Title.pageHeaderSummary, .Title.originDestination {
    text-align: center; }
    .Title.pageHeaderSummary .Title-text, .Title.originDestination .Title-text {
      font-size: 1.25rem;
      font-family: AvenirHeavy, Arial, Helvetica, sans-serif; }
    .Title.pageHeaderSummary .Title-complement, .Title.originDestination .Title-complement {
      font-size: 0.875rem; }
  .Title.pageHeaderSummary {
    border-color: #ecedeb;
    background-color: #fff;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.8125rem;
    min-height: 5.3125rem;
    font-size: 0.875rem; }
    .a11y-high-c .Title.pageHeaderSummary {
      border-color: #ecedeb; }
    @media only screen and (min-width: 40.063em), print {
      .Title.pageHeaderSummary {
        border-bottom: 0;
        border-radius: 0.5rem 0.5rem 0 0; } }
    @media print {
      .Title.pageHeaderSummary {
        position: static;
        padding: 0; } }
    .Title.pageHeaderSummary .Title-text {
      font-size: 1rem;
      display: block; }
      @media only screen and (min-width: 40.063em), print {
        .Title.pageHeaderSummary .Title-text {
          font-size: 1.25rem; } }
    .Title.pageHeaderSummary .Title-complement {
      line-height: 1.5;
      margin-top: 0.0625rem; }
      .Title.pageHeaderSummary .Title-complement span {
        display: block; }
        @media only screen and (min-width: 40.063em) {
          .Title.pageHeaderSummary .Title-complement span {
            display: inline-block; } }
  .Title.originDestination {
    padding: 1.875rem 0; }
    .Title.originDestination .Title-complement {
      margin-top: 0.5rem; }
    .Title.originDestination.passed {
      margin-bottom: 1.875rem; }
      .Title.originDestination.passed .Title-text {
        color: #999082;
        font-family: AvenirRoman, AvenirBook, Arial, Helvetica, sans-serif;
        font-size: 1rem; }
        .a11y-high-c .Title.originDestination.passed .Title-text {
          color: #7b7162; }
      .Title.originDestination.passed .Title-text svg,
      .Title.originDestination.passed .Title-complement svg {
        fill: currentColor; }
        .Title.originDestination.passed .Title-text svg.travelWay,
        .Title.originDestination.passed .Title-complement svg.travelWay {
          stroke: currentColor; }
    .Title.originDestination.cancelled .Title-text {
      color: #0099b4;
      display: flex;
      justify-content: center;
      align-content: center;
      font-family: AvenirRoman, AvenirBook, Arial, Helvetica, sans-serif;
      font-size: 1rem; }
      .a11y-high-c .Title.originDestination.cancelled .Title-text {
        color: #007a89; }
      .Title.originDestination.cancelled .Title-text svg {
        fill: currentColor;
        width: 1.0625rem;
        height: 1.0625rem;
        margin-right: 0.3125rem; }
    .Title.originDestination.cancelled .Title-complement {
      color: #000;
      font-family: AvenirHeavy, Arial, Helvetica, sans-serif;
      font-size: 1.25rem; }
      .a11y-high-c .Title.originDestination.cancelled .Title-complement {
        color: #000; }
  .Title.passengers {
    background-color: #e5f5f7;
    color: #0099b4;
    display: block;
    width: auto;
    padding: 1.0625rem;
    font-size: 0.875rem;
    border-radius: 0.5rem;
    text-align: center; }
    .a11y-high-c .Title.passengers {
      background-color: #e5f5f7; }
    .a11y-high-c .Title.passengers {
      color: #007a89; }
    .Title.passengers .Title-complement {
      font-size: 0.875rem;
      line-height: normal; }
    .Title.passengers.multiSeg {
      overflow: hidden;
      padding: 0;
      background: none;
      background: linear-gradient(#0099b4 0%, #0099b4 76%, transparent 76.1%, transparent 100%); }
      .a11y-high-c .Title.passengers.multiSeg {
        background: linear-gradient(#007a89 0%, #007a89 76%, transparent 76.1%, transparent 100%); }
      .Title.passengers.multiSeg .Title-text {
        background-color: #0099b4;
        color: #fff;
        display: block;
        font-family: AvenirHeavy, Arial, Helvetica, sans-serif;
        font-size: 1.125rem;
        padding: 1.25rem 0 0;
        border-radius: 0.5rem 0.5rem 0 0; }
        .a11y-high-c .Title.passengers.multiSeg .Title-text {
          background-color: #007a89; }
        @media only screen and (min-width: 40.063em), print {
          .Title.passengers.multiSeg .Title-text {
            font-size: 1rem; } }
      .Title.passengers.multiSeg .Title-complement {
        background-color: #0099b4;
        color: #fff;
        display: block;
        position: relative;
        margin-bottom: 1.75rem;
        padding-top: 0.3125rem; }
        .a11y-high-c .Title.passengers.multiSeg .Title-complement {
          background-color: #007a89; }
        .Title.passengers.multiSeg .Title-complement::after {
          background-color: #0099b4;
          content: '';
          position: absolute;
          bottom: -1.875rem;
          left: -95%;
          width: 200%;
          height: 1.875rem;
          border-radius: 0 0 100%; }
          .a11y-high-c .Title.passengers.multiSeg .Title-complement::after {
            background-color: #007a89; }
  .Title.pageTop {
    border-color: #ecedeb;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    background-color: #fff;
    color: #000;
    font-family: AvenirRoman, AvenirBook, Arial, Helvetica, sans-serif;
    font-size: 1.375rem;
    text-align: center;
    padding: 0 3.125rem;
    line-height: 2.9;
    height: 4.0625rem;
    z-index: 10; }
    .a11y-high-c .Title.pageTop {
      border-color: #ecedeb; }
    .Title.pageTop.pageTicket,
    .Title.pageTop span {
      font-family: Baloo, AvenirBlack, AvenirHeavy, Arial, Helvetica, sans-serif; }
    .Title.pageTop::first-letter {
      text-transform: capitalize; }
  .Title.printWarning {
    color: #ea5330;
    width: 100%;
    margin: 3.75rem 0;
    font-weight: bold;
    font-size: 1.375rem;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    text-align: center;
    text-transform: uppercase; }
    .a11y-high-c .Title.printWarning {
      color: #d93914; }
  .Title.pedago {
    font-size: 1.5rem; }
  .Title.iata {
    display: flex;
    align-items: center;
    height: 3.9375rem;
    width: auto; }
    @media only screen and (min-width: 40.063em), print {
      .Title.iata {
        height: 4.25rem;
        padding: 0.625rem 0; } }
    .Title.iata .Title-picto {
      display: none; }
      @media only screen and (min-width: 40.063em), print {
        .Title.iata .Title-picto {
          display: inline-block;
          line-height: 0.9375rem;
          padding-right: 0.5rem; }
          .Title.iata .Title-picto svg {
            width: 2.5rem;
            height: 2.5rem;
            fill: currentColor; } }
    .Title.iata .Title-text {
      font-size: 1.375rem; }
      @media only screen and (min-width: 40.063em), print {
        .Title.iata .Title-text {
          font-size: 1.5625rem; } }
  .Title.capsule {
    background-color: #ea5330;
    display: block;
    color: #fff;
    padding: 0.75rem 0.9375rem 0.3125rem;
    border-radius: 1.25rem 1.25rem 0 0;
    text-align: left; }
    .a11y-high-c .Title.capsule {
      background-color: #d93914; }
    @media only screen and (min-width: 40.063em), print {
      .Title.capsule {
        padding: 1.1875rem 1.875rem;
        width: auto; } }
    @media print {
      .Title.capsule {
        border-color: #ecedeb;
        border-width: 0.0625rem;
        border-style: solid;
        color: #000;
        width: 100%; }
        .a11y-high-c .Title.capsule {
          border-color: #ecedeb; } }
    @media only screen and (min-width: 40.063em), print {
      .Title.capsule svg {
        margin-left: 0.3125rem;
        margin-right: 0.3125rem; } }
    .Title.capsule.asymmetric {
      padding-top: 1.25rem;
      padding-bottom: 0.9375rem; }
      .Title.capsule.asymmetric .Title-text {
        display: block; }
  .Title.modal {
    width: auto;
    margin: 0 1.875rem; }
    @media only screen and (min-width: 40.063em) {
      .Title.modal {
        margin: 0; } }

/*
Amount

Composant pour l'affichage de prix à 2 tailles

.oversize - Permet d'afficher le nombre des unité encore plus gros

Markup:
<div style="position: relative; min-height: 40px;">
  <span class="Amount {{modifier_class}}">
    <div>
      <strong>2000</strong>,50 &euro;
    </div>
  </span>
</div>

Styleguide 18
*/
.Amount {
  font-size: 0.875rem;
  white-space: nowrap; }
  @media only screen and (min-width: 40.063em) {
    .Amount {
      font-size: 1.125rem; } }
  .Amount strong {
    font-size: 1.25rem; }
    @media only screen and (min-width: 40.063em) {
      .Amount strong {
        font-size: 1.375rem; } }
  .Amount.oversize strong {
    font-size: 1.25rem; }
    @media only screen and (min-width: 40.063em) {
      .Amount.oversize strong {
        font-size: 1.875rem; } }
  .Amount.small {
    font-size: 0.9375rem; }
    .Amount.small strong {
      font-size: 1rem; }
  .Amount.transaction {
    font-size: 0.875rem; }
    .Amount.transaction strong {
      font-size: 1.25rem; }

/*
Listes

Ces styles peuvent être appliqués grâce à la classe `.List` sur les balises `<ul>` ou `<div>`.

Le *modifier* `.widder` peut être appliqué sur un item, il permet d'afficher l'item 1.5x plus large que les autres.

Les éléments `List-item-picto` et `List-item-mainInfo` sont optionnels.

.type-3                          - Liste d'items horizontale (desktop) ou verticale (mobile) (ex : liste des solutions pour recuperer son ebillet).
.itinerary                       - Liste horizontale d'items avec texte pour les informations dans l'itinéraire
.folderRef                       - Réferences de dossier
.buttons                         - Liste des boutons d'action
.buttons.folderInfo              - Liste des boutons d'action, personnalisée pour le bloc "Mon Billet"
.buttons.aftersaleActions        - Liste des boutons d'action, personnalisée pour le parcours d'après-vente

Markup: list.hbs

Styleguide 4
*/
.List {
  display: flex; }
  .List-item {
    flex: 1;
    align-self: center;
    display: inline-block;
    overflow: hidden; }
    .List-item.widder {
      flex: 1.5; }
    .List-item-picto {
      display: inline-block;
      margin-right: 0.8125rem;
      width: 1.5625rem;
      height: 1.5625rem; }
    .List-item-text {
      display: inline-block; }
    .List-item-mainInfo {
      font-family: AvenirHeavy, Arial, Helvetica, sans-serif; }
  .List-separator {
    padding-top: 1.125rem;
    border-radius: 50%;
    margin: 0 0.875rem 0 0.625rem;
    width: 3.4375rem;
    height: 3.4375rem;
    align-self: center;
    text-align: center; }
  .List.folderPicker {
    max-width: 25rem;
    margin: 0 auto; }
    .List.folderPicker .List-item {
      height: 2.3125rem;
      text-align: left;
      align-self: auto;
      vertical-align: top;
      padding: 0 0.625rem; }
      .List.folderPicker .List-item:first-child {
        padding-left: 0; }
      .List.folderPicker .List-item:last-child {
        padding-right: 0; }
      .List.folderPicker .List-item-text {
        color: #999082;
        width: 100%; }
        .a11y-high-c .List.folderPicker .List-item-text {
          color: #7b7162; }
      .List.folderPicker .List-item-mainInfo {
        color: #000;
        display: block;
        text-transform: uppercase;
        font-family: AvenirHeavy, Arial, Helvetica, sans-serif;
        font-weight: unset;
        font-size: 0.875rem;
        padding-top: 0.1875rem; }
        .a11y-high-c .List.folderPicker .List-item-mainInfo {
          color: #000; }
    @media only screen and (min-width: 40.063em) {
      .List.folderPicker {
        max-width: 25rem;
        margin: 0 auto;
        padding: 0;
        align-items: center; } }
  .List.folderPickerTiny .List-item {
    border-left: 1px solid #ecedeb; }
    .List.folderPickerTiny .List-item:first-child {
      border-left: 0; }
    .List.folderPickerTiny .List-item-text {
      color: #999082; }
      .a11y-high-c .List.folderPickerTiny .List-item-text {
        color: #7b7162; }
    .List.folderPickerTiny .List-item-mainInfo {
      color: #000; }
      .a11y-high-c .List.folderPickerTiny .List-item-mainInfo {
        color: #000; }
  .List.folderRef.row .List-item {
    border-color: #ecedeb;
    border-style: solid;
    border-width: 0 0 0 1px;
    display: flex;
    text-align: center;
    justify-content: center;
    flex: 1 0 auto; }
    .a11y-high-c .List.folderRef.row .List-item {
      border-color: #ecedeb; }
    .List.folderRef.row .List-item:first-child {
      padding-left: 0;
      border-left: 0; }
    .List.folderRef.row .List-item-text {
      width: 100%; }
    .List.folderRef.row .List-item-mainInfo {
      display: block; }
    .List.folderRef.row .List-item.widder {
      flex: 1 1 auto; }
  .List.folderRef.column {
    flex-direction: column; }
    .List.folderRef.column .List-item {
      align-self: flex-start;
      line-height: 1.7; }
      .List.folderRef.column .List-item div {
        display: inline-block; }
      .List.folderRef.column .List-item-mainInfo {
        vertical-align: bottom; }
  .List.folderRef .List-item-text {
    color: #999082; }
    .a11y-high-c .List.folderRef .List-item-text {
      color: #7b7162; }
  .List.folderRef .List-item-mainInfo {
    color: #000; }
  .List.type-3 {
    border-color: #ecedeb;
    flex-direction: column;
    text-align: left;
    width: 12.5rem;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    padding-bottom: 1.25rem; }
    .a11y-high-c .List.type-3 {
      border-color: #ecedeb; }
    @media only screen and (min-width: 40.063em) {
      .List.type-3 {
        padding-bottom: 0; } }
    .List.type-3.fullFid {
      display: flex;
      align-items: center;
      margin-bottom: 1.875rem; }
      @media only screen and (min-width: 40.063em) {
        .List.type-3.fullFid {
          margin-bottom: 0; } }
    .List.type-3.ouigo {
      margin: 0;
      margin-top: 0.625rem;
      margin-bottom: 1.875rem; }
      @media only screen and (min-width: 40.063em) {
        .List.type-3.ouigo {
          margin-bottom: 0; } }
    .List.type-3 .List-item,
    .List.type-3 .List-separator {
      align-self: auto; }
    .List.type-3 .List-item {
      line-height: 1.15;
      overflow: visible; }
      .List.type-3 .List-item:last-child {
        margin-bottom: 0.8125rem; }
    .List.type-3 .List-separator {
      height: auto;
      align-self: center;
      padding-top: 0;
      margin-top: 0.9375rem;
      margin-bottom: 1.5rem; }
    .List.type-3.singleItem {
      align-items: center; }
      .List.type-3.singleItem .List-item {
        margin-left: 0; }
    @media only screen and (min-width: 40.063em), print {
      .List.type-3 {
        flex-direction: row;
        margin: 0;
        width: 100%;
        border: 0; }
        .List.type-3 .List-item,
        .List.type-3 .List-separator {
          align-self: center; }
        .List.type-3 .List-item {
          margin-left: auto; }
          .List.type-3 .List-item:last-child {
            margin-bottom: 0; }
        .List.type-3 .List-separator {
          width: 3.4375rem;
          height: 3.4375rem;
          padding-top: 1.125rem;
          margin-top: 0;
          margin-bottom: 0; }
          .List.type-3 .List-separator.semiFid {
            margin-right: 1.875rem; }
        .List.type-3.singleItem {
          align-items: inherit; } }
    @media print {
      .List.type-3 {
        margin: 0 !important; }
        .List.type-3 .List-item {
          margin: 0 0 0 1.875rem !important;
          min-height: 1.25rem;
          text-align: left !important;
          display: list-item;
          list-style-type: none;
          list-style-position: inside; }
        .List.type-3 .List-separator {
          display: none; } }
  .List.buttons {
    justify-content: center;
    flex-wrap: wrap;
    margin-left: auto;
    margin-right: auto; }
    .List.buttons .List-item {
      text-align: center;
      margin: 0.3125rem; }
    @media only screen and (min-width: 40.063em) {
      .List.buttons .List-item {
        margin: 0; }
        .List.buttons .List-item.bus {
          display: block;
          margin-top: 0.9375rem; }
        .List.buttons .List-item:not(:last-child) {
          margin-right: 1.25rem; } }
    @media print {
      .List.buttons {
        display: none; } }
    .List.buttons.folderInfo .List-item {
      flex: 0 1 auto;
      min-width: 7.5rem; }
      .List.buttons.folderInfo .List-item.ouigo {
        border-color: #ecedeb;
        border-width: 1px;
        border-style: solid;
        padding: 0.625rem;
        font-size: 0.875rem;
        max-width: 12.5rem;
        border-radius: 0.5rem; }
        .a11y-high-c .List.buttons.folderInfo .List-item.ouigo {
          border-color: #ecedeb; }
        .List.buttons.folderInfo .List-item.ouigo .exchange {
          color: #000;
          font-weight: bold; }
    @media only screen and (min-width: 40.063em) {
      .List.buttons.folderInfo {
        padding: 0; }
        .List.buttons.folderInfo .List-item.ouigo {
          max-width: 19.375rem;
          padding: 0.625rem 1.25rem; } }
    .List.buttons.aftersaleActions {
      flex-direction: column-reverse; }
      .List.buttons.aftersaleActions .List-item {
        flex: 0 1 auto;
        min-width: 10.625rem;
        margin: 0.625rem 0 0; }
        .List.buttons.aftersaleActions .List-item:last-child {
          margin: 0; }
        @media only screen and (min-width: 40.063em) {
          .List.buttons.aftersaleActions .List-item {
            margin: 0 1.25rem 0 0; }
            .List.buttons.aftersaleActions .List-item:last-child {
              margin: 0; } }
      .List.buttons.aftersaleActions.cancellationValidation .List-item {
        min-width: 12.5rem; }
      .List.buttons.aftersaleActions.cancellationConfirmation {
        margin-top: 1.5625rem; }
        @media only screen and (min-width: 40.063em) {
          .List.buttons.aftersaleActions.cancellationConfirmation {
            margin-top: 2.1875rem; } }
        .List.buttons.aftersaleActions.cancellationConfirmation .List-item {
          min-width: 16.875rem; }
      @media only screen and (min-width: 40.063em) {
        .List.buttons.aftersaleActions {
          flex-direction: row; } }
    .List.buttons.passengersCheck {
      margin-bottom: 1.875rem; }
      @media only screen and (min-width: 40.063em) {
        .List.buttons.passengersCheck {
          margin-bottom: 0; } }
      .List.buttons.passengersCheck .List-item {
        flex: 0 1 auto;
        min-width: 6.875rem;
        margin: 0;
        padding: 0.3125rem; }
  .List.itinerary {
    color: #0099b4;
    border-color: #ecedeb;
    border-width: 1px;
    border-style: solid;
    border-radius: 2.5rem;
    width: 100%;
    display: flex;
    padding: 0.625rem 1.25rem;
    justify-content: space-between; }
    .a11y-high-c .List.itinerary {
      color: #007a89; }
    .a11y-high-c .List.itinerary {
      border-color: #ecedeb; }
    .List.itinerary .List-item {
      flex: 0 1 auto; }
    .List.itinerary .List-item-mainInfo {
      font-size: 1.25rem;
      font-weight: normal; }
    @media only screen and (min-width: 40.063em) {
      .List.itinerary {
        display: inline-flex;
        width: 100%; }
        .List.itinerary .List-item {
          display: flex;
          align-self: flex-end; }
          .List.itinerary .List-item-text {
            vertical-align: top;
            line-height: 1.375rem; } }
  .List.option .List-option {
    display: flex;
    margin: 0 0.9375rem;
    flex-direction: column-reverse; }
    .List.option .List-option .List-item {
      margin: 0;
      min-width: 14.6875rem;
      width: 100%; }
      .List.option .List-option .List-item:not(:last-child) {
        margin-top: 0.9375rem; }
    @media only screen and (min-width: 40.063em) {
      .List.option .List-option {
        flex-direction: row;
        justify-content: center;
        width: 37.5rem; }
        .List.option .List-option .List-item {
          width: auto; }
          .List.option .List-option .List-item:not(:last-child) {
            margin-top: 0;
            margin-right: 1.25rem; } }

.Row {
  display: flex; }
  .Row-item {
    flex: 1; }
  .Row.desktopRowOnly {
    flex-flow: column; }
    @media only screen and (min-width: 40.063em), print {
      .Row.desktopRowOnly {
        flex-flow: row; } }
  .Row.travelSummary {
    align-items: center;
    flex-wrap: wrap; }
    @media only screen and (max-width: 40em) {
      .Row.travelSummary {
        flex-flow: column;
        align-items: flex-start; } }
    @media only screen and (min-width: 40.063em), print {
      .Row.travelSummary {
        flex-flow: row; } }
  .Row.modifyEmail {
    flex-direction: column; }
    .Row.modifyEmail .Row-item:not(:last-child) {
      margin-bottom: 0.9375rem; }
    @media only screen and (min-width: 40.063em) {
      .Row.modifyEmail {
        align-items: center; }
        .Row.modifyEmail .Row-item {
          margin-bottom: 0;
          width: 25.3125rem; }
          .Row.modifyEmail .Row-item input {
            width: calc(100% - 1.5625rem); } }
  .bowser-msie .Row.modifyEmail .Row-item {
    flex: none; }

/*
Images

Composant `.Image` à appliquer sur les balises `<img>` ou `<svg>`.

TODO: composant à dégager :)

.travelWay    - picto utilisé pour indiquer le sens de circulation d'une OD
.qrCode       - force les dimensions d'un QR code à 220px x 220px (là c'est une flèche mais faut imaginer...)

Markup: <svg class="Image {{modifier_class}}"><use xlink:href="#forward"></use></svg>

Styleguide 7
*/
.Image {
  /* sens du trajet */
  /* QR code sur page e-billet */ }
  .Image.travelWay {
    width: 1.5rem;
    height: 1.5rem;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 0;
    vertical-align: middle;
    margin-top: -0.1875rem; }
  .Image.qrCode {
    height: 13.75rem;
    width: 13.75rem; }

/*
Boutons

Les styles "boutons" peuvent être appliqués grâce à la classe `.Button` sur les balises `<a>` ou `<button>`.

Styleguide 2
*/
.Button {
  display: inline-block;
  background-color: transparent;
  padding: 0;
  border: 0;
  border-radius: 0;
  text-align: center;
  text-decoration: none;
  /*
  Navigation principale

  Markup:
  <button class="Button {{modifier_class}}">
    <svg class="Button-picto"><use xlink:href="#vsa-menu-ticket"></use></svg>
    <span>Aller</span>
  </button>

  .mainNav                   - bouton de navigation principale
  .mainNav.passed            - bouton pour un trajet consommé
  .mainNav.isActive          - bouton actif
  .mainNav.isActive.passed   - bouton actif, pour un trajet consommé

  Styleguide 2.1
  */ }
  .Button-picto {
    display: block;
    width: 100%;
    height: 1.875rem;
    fill: currentColor; }
  .Button-bus svg {
    display: block;
    width: 100%;
    height: 2.25rem;
    fill: currentColor; }
  .Button-bus.flipHSvg {
    transform: scaleX(-1); }
  .Button.mainNav {
    color: #ea5330;
    width: 100%;
    height: 4.5625rem;
    border: 0 none;
    cursor: pointer;
    padding: 0.625rem 0;
    background-size: 1.125rem 1.125rem;
    font-size: 0.875rem;
    line-height: .95em;
    transition: background-color .3s ease; }
    .a11y-high-c .Button.mainNav {
      color: #d93914; }
    .Button.mainNav:focus {
      outline-offset: 0; }
    .Button.mainNav .Button-picto {
      margin-bottom: 0.375rem; }
    .Button.mainNav.passed {
      color: #999082; }
      .a11y-high-c .Button.mainNav.passed {
        color: #7b7162; }
    .Button.mainNav.isActive {
      background-color: #ea5330;
      color: #fff;
      padding-bottom: 0.3125rem; }
      .a11y-high-c .Button.mainNav.isActive {
        background-color: #d93914; }
      .Button.mainNav.isActive.passed {
        color: #999082;
        background-color: #ecedeb; }
        .a11y-high-c .Button.mainNav.isActive.passed {
          color: #7b7162; }
        .a11y-high-c .Button.mainNav.isActive.passed {
          background-color: #ecedeb; }
      .Button.mainNav.isActive .Button-picto .full {
        fill: currentColor; }
      .Button.mainNav.isActive .Button-picto .outline {
        fill: transparent; }
    .Button.mainNav.tickets.isActive {
      position: relative; }
      .Button.mainNav.tickets.isActive::before {
        bottom: -0.5625rem;
        position: absolute;
        content: '';
        width: 0;
        height: 0;
        top: calc(100% + 1px);
        left: 50%;
        margin-top: -1px;
        margin-left: -0.9375rem;
        border-left: 0.9375rem solid transparent;
        border-right: 0.9375rem solid transparent;
        border-top: 0.5625rem solid #ea5330; }
      .Button.mainNav.tickets.isActive.passed::before {
        position: absolute;
        content: '';
        width: 0;
        height: 0;
        top: calc(100% + 1px);
        left: 50%;
        margin-top: -1px;
        margin-left: -0.9375rem;
        border-left: 0.9375rem solid transparent;
        border-right: 0.9375rem solid transparent;
        border-top: 0.5625rem solid #ecedeb; }
    @media only screen and (min-width: 40.063em) {
      .Button.mainNav {
        width: 7.5rem; }
        .Button.mainNav.active {
          margin-left: -1px;
          z-index: 1; } }
  .Button.closeMail {
    position: absolute;
    right: 0;
    top: -4px; }
    .Button.closeMail svg {
      fill: #ea5330;
      width: 1.25rem;
      height: 1.25rem; }
      .a11y-high-c .Button.closeMail svg {
        fill: #d93914; }
  .Button.toggleable {
    width: 100%;
    text-align: left; }
    .Button.toggleable:focus {
      outline-offset: -0.375rem; }
  .Button-addToCalendar {
    text-decoration: underline; }
    .Button-addToCalendar:focus {
      outline-color: #fff;
      outline-offset: 0.125rem; }

/*
Liens

Ces styles peuvent être appliqués grâce à la classe `.Link` sur des balises `<a>`.

Styleguide 5
*/
.Link {
  /*
  Lien de base

  Markup:
  <a href="#" class="Link {{modifier_class}}">Lien</a>

  .inText   - lien au milieu d'un texte (orange, fuschia au rollover)

  Styleguide 5.1
  */
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  /*
  Lien de retour en page précédente

  Lien présent en haut de page, pour revenir à la page d'accueil.

  -----

  **.goBack**

  Markup: link-goBack.hbs

  Styleguide 5.2
  */
  /*
  Lien avec flèche

  Utilisé sur mobile pour les liens pointants sur une sous-page de Mon Voyage (/billets, /passagers).

  -----

  **.arrow**

  .border   - lien avec flèche et bordures

  Markup:
  <div style="width: 250px;">
    <a href="#" class="Link arrow {{modifier_class}}">
      <div class="Link-icon">
        <svg><use xlink:href="#flashcode"></use></svg>
      </div>
      <div class="Link-text">
        <div class="Link-text-title">E-billet</div>
        <div>Accéder à mon e-billet</div>
      </div>
      <div class="Link-arrow">
        <svg><use xlink:href="#right-chevron"></use></svg>
      </div>
    </a>
  </div>

  Styleguide 5.3
  */
  /*
  Lien pour zone dépliable

  Avec "chevron rotatif sur la droite" (© Jonathan Fidi).

  A noter que la partie JS du composant n'est pas disponible dans le styleguide.

  Le modifier **.toggleable** est obligatoire. Les modifiers additionnels sont à mettre selon ce qui est désiré.

  -----

  **.toggleable**

  Markup: link-toggleable.hbs

  .passenger - passenger
  .correspondence - correspondence

  Styleguide 5.4
  */ }
  .Link-label {
    line-height: 1.5rem; }
  .Link-icon {
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: top; }
  .Link.inText {
    color: #ea5330;
    text-decoration: underline; }
    .a11y-high-c .Link.inText {
      color: #d93914; }
    .Link.inText:hover {
      color: #b51742; }
      .a11y-high-c .Link.inText:hover {
        color: #b51742; }
  .Link.goBack {
    color: #ea5330;
    display: block;
    position: absolute;
    top: 0.6875rem;
    left: 0.3125rem;
    z-index: 20; }
    .a11y-high-c .Link.goBack {
      color: #d93914; }
    .Link.goBack.right {
      right: 0.9375rem; }
    .Link.goBack .Link-picto {
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 50%;
      padding: 0.125rem;
      fill: currentColor; }
      .Link.goBack .Link-picto.resetColor {
        fill: initial; }
    .Link.goBack.cross {
      top: 0.9375rem; }
      .Link.goBack.cross .Link-picto {
        width: 1.875rem;
        height: 1.875rem; }
  .Link.arrow {
    padding: 1.25rem 0; }
    .Link.arrow .Link-icon {
      margin-right: 0.625rem;
      width: auto;
      height: auto; }
    .Link.arrow .Link-text-title {
      color: #000;
      font-size: 0.9375rem;
      font-family: AvenirHeavy, Arial, Helvetica, sans-serif; }
    .Link.arrow .Link-arrow {
      color: #ea5330;
      margin-right: -0.625rem; }
      .a11y-high-c .Link.arrow .Link-arrow {
        color: #d93914; }
    .Link.arrow svg {
      width: 1.875rem;
      height: 1.875rem; }
    .Link.arrow.passengers .Link-icon {
      margin-right: 0.9375rem; }
      .Link.arrow.passengers .Link-icon svg {
        width: 1.5625rem;
        height: 1.5625rem; }
    .Link.arrow.passengers .Link-text {
      color: #999082; }
      .a11y-high-c .Link.arrow.passengers .Link-text {
        color: #7b7162; }
      .Link.arrow.passengers .Link-text-title {
        font-family: AvenirRoman, AvenirBook, Arial, Helvetica, sans-serif;
        font-size: 0.875rem; }
    .Link.arrow.border {
      border-color: #999082;
      border-width: 1px;
      border-style: solid;
      border-radius: 0.5rem;
      padding: 0.75rem 0.8125rem 0.75rem 0.625rem; }
      .a11y-high-c .Link.arrow.border {
        border-color: #7b7162; }
  .Link.toggleable {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; }
    .Link.toggleable .Link-toggler {
      align-self: center;
      text-align: right;
      margin-left: auto; }
      @media only screen and (min-width: 40.063em) {
        .Link.toggleable .Link-toggler {
          padding-left: 0.625rem; } }
    .Link.toggleable .Link-icon {
      transition: transform .35s ease;
      margin-right: -0.4375rem; }
      .Link.toggleable .Link-icon.isOpen {
        transform: rotate(180deg); }
      @media only screen and (min-width: 40.063em) {
        .Link.toggleable .Link-icon {
          margin-right: 0; } }
  .Link.passenger {
    color: #000;
    padding: 1.1875rem 1.25rem; }
    .a11y-high-c .Link.passenger {
      color: #000; }
    .Link.passenger .Link-icon {
      fill: #ea5330;
      margin-left: 0.3125rem; }
      .a11y-high-c .Link.passenger .Link-icon {
        fill: #d93914; }
  @media only screen and (min-width: 40.063em) {
    .Link.itinerary .Link-toggler {
      align-self: flex-start;
      white-space: nowrap;
      padding-top: 0.8125rem; } }
  @media print {
    .Link.itinerary .Link-toggler {
      display: none; } }
  .Link.itinerary .Link-icon {
    color: #0099b4;
    fill: currentColor;
    stroke: currentColor;
    stroke-linejoin: miter;
    stroke-width: 3px;
    transform: rotate(-90deg); }
    .a11y-high-c .Link.itinerary .Link-icon {
      color: #007a89; }
    @media only screen and (min-width: 40.063em) {
      .Link.itinerary .Link-icon {
        stroke-width: 1px;
        transform: none;
        margin-left: 0.625rem; } }
  .Link.itinerary.correspondence {
    color: #000;
    outline-color: #d97201;
    outline-offset: 0.4375rem; }
    .a11y-high-c .Link.itinerary.correspondence {
      color: #000; }
    .a11y-high-c .Link.itinerary.correspondence {
      outline-color: #bb4a00; }
    .Link.itinerary.correspondence.isOpen {
      margin-bottom: 1.0625rem; }
    .Link.itinerary.correspondence .Link-icon {
      color: #d97201; }
      .a11y-high-c .Link.itinerary.correspondence .Link-icon {
        color: #bb4a00; }
  .Link.itinerary.footer {
    color: #000;
    text-align: right;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: -0.1875rem; }
  @media print {
    .Link.itinerary {
      padding: 0; }
      .Link.itinerary.footer {
        display: none; } }

/*
Menus

Composant `.Menu` a appliquer sur des balises `<nav>` ou `<div>`.

.mainNav            - menu centré sur desktop, avec separateur entre les onglets (menu de navigation principale)
.itinerary          - menu ferré à gauche sur desktop, sans separateur (transports disponibles en cas de correpondance)
.shadow             - ajoute une ombre grise autour du menu (navigation principale, page billets)
.isSticky           - bloque le menu en haut de page (voir plus haut !)

Markup: menu.hbs

Styleguide 6
*/
.Menu {
  position: relative; }
  .Menu-content {
    display: flex;
    text-align: center;
    width: 100%; }
  .Menu-item {
    flex: 1;
    display: inline-block; }
  @media only screen and (min-width: 40.063em), print {
    .Menu-content {
      display: block; }
    .Menu-item {
      display: inline-block; } }

.Menu.mainNav {
  height: 4.5625rem;
  text-align: left; }
  .Menu.mainNav .Menu-item {
    border-color: #ecedeb;
    border-right-width: 1px;
    border-right-style: solid; }
    .a11y-high-c .Menu.mainNav .Menu-item {
      border-color: #ecedeb; }
    .Menu.mainNav .Menu-item:last-child {
      border-right: 0 none; }
  @media only screen and (min-width: 40.063em) {
    .Menu.mainNav {
      margin-top: 1.3em; }
      .Menu.mainNav .Menu-item {
        position: relative;
        border-right: 0; }
        .Menu.mainNav .Menu-item::after {
          border-color: #ecedeb;
          border-right-width: 1px;
          border-right-style: solid;
          content: '';
          width: 1px;
          height: 50%;
          top: 25%;
          right: -1px;
          position: absolute;
          z-index: -1; }
          .a11y-high-c .Menu.mainNav .Menu-item::after {
            border-color: #ecedeb; }
        .Menu.mainNav .Menu-item:last-child::after {
          border: 0 none; } }
  @media print {
    .Menu.mainNav {
      display: none; } }

.Menu.isSticky {
  position: static;
  z-index: 950; }
  .Menu.isSticky .Menu-content {
    position: fixed;
    top: 0;
    margin: 0 auto;
    z-index: 1000;
    background-color: #fff; }
    @media only screen and (min-width: 40.063em) and (max-width: 64em) {
      .Menu.isSticky .Menu-content {
        left: 0; } }
  @media only screen and (min-width: 40.063em) {
    .Menu.isSticky {
      margin-left: -1px; } }

.Menu.shadow .Menu-content {
  border-color: #ecedeb;
  border-width: 0 0 0.0625rem;
  border-style: solid; }
  .a11y-high-c .Menu.shadow .Menu-content {
    border-color: #ecedeb; }

.Menu.tickets {
  margin: 0 -1.5625rem; }

.Menu.itinerary {
  position: relative; }
  .Menu.itinerary .Menu-content {
    flex-direction: column; }
  .Menu.itinerary .Menu-item {
    margin-bottom: 0.625rem;
    order: 2; }
    .Menu.itinerary .Menu-item:first-child {
      order: 0; }
    .Menu.itinerary .Menu-item.monChauffeur {
      order: 1; }
  @media only screen and (min-width: 40.063em), print {
    .Menu.itinerary .Menu-content {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      text-align: left; }
    .Menu.itinerary .Menu-item {
      flex: 0 1 auto;
      margin-right: 0.625rem; } }
  @media print {
    .Menu.itinerary {
      margin-top: 1.25rem; }
      .Menu.itinerary .Menu-item {
        margin: 0; } }

.Menu.itinerary.tiny .Menu-content {
  flex-direction: inherit; }

.Menu.itinerary.tiny .Menu-item {
  margin: 0; }

/*
.Slider
Basé sur la lib "slick"

Variantes disponiles :
  .ticketsTkd
  .ticketsTkdEurostar
  .ticketsOuigo
  .folderPicker (a deplacer)

TODO:
- mettre la conf css de base de slick (a la fin de ce fichier) dans un fichier à part
- sortir .Slider de "basics" et en faire un composant à part entière (.PassengerSlider ?)
- deplacer les styles du modifier "folderPicker" dans le composant .FolderPicker (n'utilise pas du tout la même structure que .Slider)

*/
.Slider {
  /* slider ticket eurostar */
  /* message tkd fid */ }
  .Slider-slide-content {
    min-height: 12.5rem;
    display: flex;
    align-items: center;
    justify-content: center; }
  .Slider-slide-title {
    font-family: AvenirRoman, AvenirBook, Arial, Helvetica, sans-serif;
    font-size: 1.4em;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 3.125rem;
    text-align: left; }
    .Slider-slide-title.tiny {
      font-size: 1rem;
      color: #000; }
  .Slider-slide-complement {
    display: flex;
    justify-content: center; }
  .Slider-flashcodeError {
    fill: #ecedeb;
    height: 6.25rem;
    width: 6.25rem;
    margin-top: 0.625rem; }
    .a11y-high-c .Slider-flashcodeError {
      fill: #ecedeb; }
  .Slider .slick-list {
    margin-bottom: 0.625rem; }
    .slick-loading .Slider .slick-list {
      background-image: none; }
  .Slider .slick-slide {
    text-align: center; }
    .Slider .slick-slide img {
      display: inline-block; }
  .Slider .slick-prev,
  .Slider .slick-next {
    top: 5.3125rem;
    padding: 1.25rem 0; }
    .Slider .slick-prev svg,
    .Slider .slick-next svg {
      fill: #ea5330;
      height: 1.875rem;
      width: 1.875rem; }
      .a11y-high-c .Slider .slick-prev svg, .a11y-high-c
      .Slider .slick-next svg {
        fill: #d93914; }
  .Slider .slick-next {
    right: -0.625rem; }
  .Slider .slick-prev {
    left: -0.625rem;
    z-index: 1; }
  .Slider .slick-prev::before,
  .Slider .slick-next::before {
    content: ''; }
  .Slider .slick-dots li button::before {
    color: #ecedeb;
    font-size: 30px;
    opacity: 1; }
    .a11y-high-c .Slider .slick-dots li button::before {
      color: #ecedeb; }
  .Slider .slick-dots li.slick-active button::before {
    color: #ea5330;
    opacity: 1; }
    .a11y-high-c .Slider .slick-dots li.slick-active button::before {
      color: #d93914; }
  .Slider.ticketsTkd, .Slider.ticketsTkdEurostar {
    margin-bottom: 1.5625rem; }
    .Slider.ticketsTkd .Slider-slide-content, .Slider.ticketsTkdEurostar .Slider-slide-content {
      padding: 0; }
  .Slider.ticketsOuigo .slick-prev,
  .Slider.ticketsOuigo .slick-next {
    top: 2.375rem; }
  .Slider.ticketsOuigo .slick-dots {
    margin: 0; }
  .Slider.folderPicker {
    height: 85%;
    display: flex !important;
    justify-content: space-around;
    align-items: center; }
    @media only screen and (min-width: 40.063em) {
      .Slider.folderPicker {
        display: block !important;
        max-width: 72.5rem;
        margin: 0 auto; } }
    .Slider.folderPicker .slick-prev,
    .Slider.folderPicker .slick-next {
      position: relative;
      flex-basis: 2.5rem;
      top: 0;
      height: 100%;
      margin: 0 auto; }
      @media only screen and (min-width: 40.063em) {
        .Slider.folderPicker .slick-prev,
        .Slider.folderPicker .slick-next {
          position: absolute;
          width: 1.875rem; } }
      .Slider.folderPicker .slick-prev svg,
      .Slider.folderPicker .slick-next svg {
        position: absolute;
        right: -0.125rem;
        bottom: 7.5rem;
        height: 2.5rem;
        width: 2.5rem;
        fill: #fff; }
        @media only screen and (min-width: 40.063em) {
          .Slider.folderPicker .slick-prev svg,
          .Slider.folderPicker .slick-next svg {
            bottom: 10.3125rem; } }
    .Slider.folderPicker .slick-prev {
      order: -1;
      left: 0; }
      @media only screen and (min-width: 40.063em) {
        .Slider.folderPicker .slick-prev {
          left: 3.125rem; } }
    .Slider.folderPicker .slick-next {
      right: 0; }
      @media only screen and (min-width: 40.063em) {
        .Slider.folderPicker .slick-next {
          right: 3.125rem; } }
    .Slider.folderPicker .slick-disabled svg {
      display: none; }
    .Slider.folderPicker .slick-list {
      flex-basis: 17.5rem; }
      @media only screen and (min-width: 40.063em) {
        .Slider.folderPicker .slick-list {
          height: 22.5rem;
          margin: 0 6.25rem; } }
    .Slider.folderPicker .slick-dots li button::before {
      color: #fff; }
    .Slider.folderPicker .slick-dots .slick-active {
      margin: 0 5px; }
      .Slider.folderPicker .slick-dots .slick-active button::before {
        content: '';
        top: -0.125rem;
        border: 3px solid #fff;
        border-radius: 50%; }
    .Slider.folderPicker .slide {
      margin: 0.625rem 0;
      border: 1px solid transparent; }
      @media only screen and (min-width: 40.063em) {
        .Slider.folderPicker .slide {
          margin: 3.75rem 0.625rem 1.875rem; }
          .Slider.folderPicker .slide:focus::before {
            outline-offset: -8px;
            z-index: 1; } }
    @media only screen and (min-width: 40.063em) {
      .Slider.folderPicker .slick-current .slide {
        margin-top: 3.125rem; } }
    @media print {
      .Slider.folderPicker .slick-arrow,
      .Slider.folderPicker .slick-dots {
        display: none !important; }
      .Slider.folderPicker .slick-list {
        flex-basis: auto;
        padding: 0 !important; }
      .Slider.folderPicker .slick-track {
        transform: none !important;
        width: auto !important; }
      .Slider.folderPicker .slick-slide {
        display: none; }
        .Slider.folderPicker .slick-slide.slick-center {
          display: block;
          margin: 0 auto; } }
    .Slider.folderPicker.tiny .slick-prev svg,
    .Slider.folderPicker.tiny .slick-next svg {
      height: 1.875rem;
      width: 1.875rem;
      position: initial; }
  .Slider.ticketsTkdEurostar .Slider-slide-complement {
    color: #ea5330;
    line-height: 1.4;
    display: flex; }
    .a11y-high-c .Slider.ticketsTkdEurostar .Slider-slide-complement {
      color: #d93914; }
  .Slider.ticketsTkdEurostar .Slider-infoPassenger-credentials {
    max-width: 80%; }
    .Slider.ticketsTkdEurostar .Slider-infoPassenger-credentials div {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }
  .Slider.ticketsTkdEurostar .Slider-infoPassenger-icon {
    width: 15%; }
    .Slider.ticketsTkdEurostar .Slider-infoPassenger-icon svg {
      width: 1.25rem;
      height: 1.25rem; }
  .Slider.ticketsTkdEurostar .Slider-infoPassenger-childInfo {
    display: flex; }
  .Slider.ticketsTkdEurostar .Slider-infoPassenger-childName {
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 7.5rem;
    white-space: nowrap; }
  .Slider-textHeader {
    height: 2.5rem; }
  .Slider.withFid .slick-prev,
  .Slider.withFid .slick-next {
    top: 7.625rem; }

/* Slick slider defaults */
/* Arrows */
.slick-prev,
.slick-next {
  position: absolute;
  line-height: 0;
  font-size: 0;
  cursor: pointer;
  background: transparent;
  color: transparent;
  margin-top: -10px;
  border: 0;
  outline: none; }
  .slick-prev:hover, .slick-prev:focus,
  .slick-next:hover,
  .slick-next:focus {
    outline: none; }
    .slick-prev:hover::before, .slick-prev:focus::before,
    .slick-next:hover::before,
    .slick-next:focus::before {
      opacity: 1; }
  .slick-prev.slick-disabled::before,
  .slick-next.slick-disabled::before {
    opacity: 0.25; }

.slick-prev::before,
.slick-next::before {
  color: #fff;
  font-size: 20px;
  line-height: 1;
  opacity: 0.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }
  .a11y-high-c .slick-prev::before, .a11y-high-c
  .slick-next::before {
    color: #fff; }

.slick-prev {
  left: -25px; }
  [dir='rtl'] .slick-prev {
    left: auto;
    right: -25px; }
  .slick-prev::before {
    content: "←"; }
    [dir='rtl'] .slick-prev::before {
      content: "→"; }

.slick-next {
  right: -25px; }
  [dir='rtl'] .slick-next {
    left: -25px;
    right: auto; }
  .slick-next::before {
    content: "→"; }
    [dir='rtl'] .slick-next::before {
      content: "←"; }

/* Dots */
.slick-dots {
  position: static;
  bottom: -45px;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0;
  padding-top: 0.625rem;
  width: 100%; }
  .slick-dots li {
    position: relative;
    display: inline-block;
    height: 20px;
    width: 20px;
    margin: 0;
    padding: 0;
    cursor: pointer; }
    .slick-dots li button {
      border: 0;
      background: transparent;
      display: block;
      height: 20px;
      width: 20px;
      outline: none;
      line-height: 0;
      font-size: 0;
      color: transparent;
      padding: 5px;
      cursor: pointer; }
      .slick-dots li button:hover, .slick-dots li button:focus {
        outline: none; }
        .slick-dots li button:hover::before, .slick-dots li button:focus::before {
          opacity: 1; }
      .slick-dots li button::before {
        color: #000;
        position: absolute;
        top: 0;
        left: 0;
        content: "•";
        width: 20px;
        height: 20px;
        font-size: 6px;
        line-height: 20px;
        text-align: center;
        opacity: 0.25;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale; }
        .a11y-high-c .slick-dots li button::before {
          color: #000; }
    .slick-dots li.slick-active button::before {
      color: #000;
      opacity: 0.75; }
      .a11y-high-c .slick-dots li.slick-active button::before {
        color: #000; }

/*
TextIcon

Composant pour l'affichage d'un texte accompagné d'une icone. Styles applicables via la classe `.TextIcon`.

**TODO: ne plus ajouter de modifier pour ce composant, utiliser le placeholder %iconText à la place**

.alignCenter            - bloc centré horizontalement
.iconRight              - bloc avec icone sur la droite
.orderPush              - push lié à la commande (dans le bloc "Mon Billet")
.orderPush.insurance    - push lié à la commande, aux couleurs du partenaire assurance
.tip                    - astuce pour mode de retrait (flex-flow: column sur mobile)
.passengerName          - nom des passagers (slider page billet)
.passengerValidated     - passager "Validé ✔"
.correspondence         - correspondance entre 2 gares
.boardingConditions     - conditions d'embarquement spécifiques (Eurostar)
.validation             - message de validation (avec coche verte)
.tgxMaxConf             - message TGVMAX, après avoir annulé un DV TGVMAX
.securityGate           - informations sur l'embarquement (portique de securité)
.emailTitle             - titre du bloc de modification de l'email
.folderPickerPassengers - icon et text aligné dans la carte du folder picker
.addToCalendar          - icon ajouter au calendrier

Markup:
<div style="position: relative; min-height: 40px;">
  <div class="TextIcon {{modifier_class}}">
    <div class="TextIcon-icon"><svg><use xlink:href="#cancel-insurance"></use></svg></div>
    <div class="TextIcon-text">
      <div class="TextIcon-title">Garantie ANNULATION ET VOYAGES PERTURBES</div>
      <div>Police N° 123456789</div>
    </div>
  </div>
</div>

Styleguide 11
*/
.TextIcon {
  display: flex;
  align-items: center; }
  .TextIcon-text {
    padding-bottom: 0.1875rem; }
  .TextIcon-icon {
    margin-right: 0.4375rem;
    flex-shrink: 0; }
    .TextIcon-icon svg {
      fill: currentColor;
      width: 1.6875rem;
      height: 1.6875rem; }
  .TextIcon-arrow {
    position: relative;
    left: 1.25rem; }
    .TextIcon-arrow svg {
      width: 1.875rem;
      height: 1.875rem; }
  .TextIcon.printInformation .TextIcon-text {
    color: #d97201;
    font-family: AvenirRoman, AvenirBook, Arial, Helvetica, sans-serif;
    font-size: 0.8125rem;
    line-height: 1.2; }
    .a11y-high-c .TextIcon.printInformation .TextIcon-text {
      color: #bb4a00; }
  .TextIcon.printInformation .TextIcon-icon svg {
    fill: #d97201; }
    .a11y-high-c .TextIcon.printInformation .TextIcon-icon svg {
      fill: #bb4a00; }
  .TextIcon.alignCenter {
    justify-content: center; }
  .TextIcon.iconRight .TextIcon-icon {
    margin-right: 0;
    margin-left: 0.4375rem; }
  .TextIcon.orderPush {
    font-size: 0.875rem;
    padding: 0 0 0.9375rem; }
    .TextIcon.orderPush:last-child {
      padding-bottom: 1.25rem; }
    .TextIcon.orderPush .TextIcon-icon {
      color: #999082;
      margin-right: 0;
      min-width: 2.25rem; }
      .a11y-high-c .TextIcon.orderPush .TextIcon-icon {
        color: #7b7162; }
    @media only screen and (min-width: 40.063em) {
      .TextIcon.orderPush {
        padding: 0 0 0.9375rem; }
        .TextIcon.orderPush:last-child {
          padding-bottom: 0; } }
    @media print {
      .TextIcon.orderPush {
        width: 21.875rem;
        margin: 0 auto 1.25rem;
        padding: 0; } }
    .TextIcon.orderPush.insurance .TextIcon-icon {
      color: #000; }
      .a11y-high-c .TextIcon.orderPush.insurance .TextIcon-icon {
        color: #000; }
    .TextIcon.orderPush.insurance .TextIcon-info {
      color: #999082; }
      .a11y-high-c .TextIcon.orderPush.insurance .TextIcon-info {
        color: #7b7162; }
  .TextIcon.passengerName {
    text-transform: uppercase; }
    .TextIcon.passengerName .TextIcon-text {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 11.25rem; }
  .TextIcon.passengerValidated {
    color: #209e67; }
    .a11y-high-c .TextIcon.passengerValidated {
      color: #1f7d63; }
    .TextIcon.passengerValidated .TextIcon-text {
      font-size: 0.75rem; }
    .TextIcon.passengerValidated .TextIcon-icon svg {
      background-color: #209e67;
      border-color: #209e67;
      color: #fff;
      border-width: 2px;
      border-style: solid;
      border-radius: 50%;
      width: 1.25rem;
      height: 1.25rem; }
      .a11y-high-c .TextIcon.passengerValidated .TextIcon-icon svg {
        background-color: #1f7d63; }
      .a11y-high-c .TextIcon.passengerValidated .TextIcon-icon svg {
        border-color: #1f7d63; }
  .TextIcon.tip .TextIcon-icon {
    margin: 0.625rem 0.625rem 0.9375rem 0; }
    .TextIcon.tip .TextIcon-icon svg {
      fill: #d97201;
      width: 2.5rem;
      height: 2.5rem; }
      .a11y-high-c .TextIcon.tip .TextIcon-icon svg {
        fill: #bb4a00; }
  .TextIcon.tip .TextIcon-title {
    color: #d97201; }
    .a11y-high-c .TextIcon.tip .TextIcon-title {
      color: #bb4a00; }
    .TextIcon.tip .TextIcon-title a {
      color: #d97201; }
      .a11y-high-c .TextIcon.tip .TextIcon-title a {
        color: #bb4a00; }
  @media only screen and (min-width: 40.063em), print {
    .TextIcon.tip {
      flex-flow: row; }
      .TextIcon.tip .TextIcon-icon {
        margin-top: 0;
        margin-bottom: 0;
        padding-bottom: 0.1875rem; }
        .TextIcon.tip .TextIcon-icon svg {
          width: 2rem;
          height: 2rem; } }
  .TextIcon.correspondence {
    color: #d97201;
    margin-left: -0.1875rem; }
    .a11y-high-c .TextIcon.correspondence {
      color: #bb4a00; }
    .TextIcon.correspondence .TextIcon-icon {
      z-index: 1; }
      .TextIcon.correspondence .TextIcon-icon svg {
        fill: #d97201;
        background-color: #fff; }
        .a11y-high-c .TextIcon.correspondence .TextIcon-icon svg {
          fill: #bb4a00; }
      @media print {
        .TextIcon.correspondence .TextIcon-icon {
          display: none; } }
    .TextIcon.correspondence .TextIcon-title {
      color: #d97201;
      font-weight: bold; }
      .a11y-high-c .TextIcon.correspondence .TextIcon-title {
        color: #bb4a00; }
    @media only screen and (min-width: 40.063em) {
      .TextIcon.correspondence {
        justify-content: flex-start; } }
    @media print {
      .TextIcon.correspondence {
        margin-left: 3.75rem; } }
  .TextIcon.boardingConditions {
    color: #d97201;
    padding: 0.3125rem 0 0 0.625rem;
    border-radius: 0.9375rem; }
    .a11y-high-c .TextIcon.boardingConditions {
      color: #bb4a00; }
    .TextIcon.boardingConditions .TextIcon-icon svg {
      fill: #d97201;
      width: 1.25rem;
      height: 1.25rem; }
      .a11y-high-c .TextIcon.boardingConditions .TextIcon-icon svg {
        fill: #bb4a00; }
      @media print {
        .TextIcon.boardingConditions .TextIcon-icon svg {
          fill: #000; } }
    @media only screen and (min-width: 40.063em) {
      .TextIcon.boardingConditions {
        width: 26.25rem; } }
    @media print {
      .TextIcon.boardingConditions {
        color: #000;
        background: none; } }
  .TextIcon.validation {
    justify-content: center;
    align-items: stretch; }
    .TextIcon.validation .TextIcon-icon {
      margin-right: 0.625rem;
      border: 1px solid #209e67;
      border-radius: 50%;
      padding: 1rem; }
      .TextIcon.validation .TextIcon-icon svg {
        fill: #209e67;
        width: 1.4375rem;
        height: 1.4375rem;
        margin-bottom: -5px; }
        .a11y-high-c .TextIcon.validation .TextIcon-icon svg {
          fill: #1f7d63; }
    .TextIcon.validation .TextIcon-title {
      color: #209e67;
      font-weight: bold;
      margin: 0;
      padding-bottom: 0.25rem;
      font-size: 1rem; }
      .a11y-high-c .TextIcon.validation .TextIcon-title {
        color: #1f7d63; }
      .TextIcon.validation .TextIcon-title span {
        font-family: AvenirHeavy, Arial, Helvetica, sans-serif; }
    .TextIcon.validation .TextIcon-text {
      line-height: 1.25rem; }
      .TextIcon.validation .TextIcon-text p {
        margin: 0; }
      .TextIcon.validation .TextIcon-text .email {
        text-transform: lowercase;
        font-weight: bold; }
    @media only screen and (min-width: 40.063em) {
      .TextIcon.validation {
        align-items: center;
        width: 34.375rem;
        margin: 0 auto; }
        .TextIcon.validation .TextIcon-icon {
          margin-right: 1.25rem; }
          .TextIcon.validation .TextIcon-icon svg {
            width: 1.875rem;
            height: 1.875rem; }
        .TextIcon.validation .TextIcon-title {
          font-size: 1.125rem; } }
  .TextIcon.tgvMaxConf {
    border-color: #ecedeb;
    border-style: solid;
    border-width: 1px;
    justify-content: center;
    border-radius: 0.5rem;
    padding: 0.9375rem 0.625rem;
    max-width: 23.75rem; }
    .a11y-high-c .TextIcon.tgvMaxConf {
      border-color: #ecedeb; }
    .TextIcon.tgvMaxConf .TextIcon-icon {
      border-radius: 0.3125rem;
      margin-right: 0.625rem; }
      .TextIcon.tgvMaxConf .TextIcon-icon svg {
        width: 2.5rem;
        height: 1.5625rem;
        fill: #000; }
    .TextIcon.tgvMaxConf .TextIcon-text {
      border-color: #ecedeb;
      border-style: solid;
      border-width: 0 0 0 1px;
      line-height: 1.25rem;
      padding-left: 0.625rem; }
      .a11y-high-c .TextIcon.tgvMaxConf .TextIcon-text {
        border-color: #ecedeb; }
      .TextIcon.tgvMaxConf .TextIcon-text span {
        color: #1b878f;
        font-weight: bold; }
        .a11y-high-c .TextIcon.tgvMaxConf .TextIcon-text span {
          color: #135f64; }
    @media only screen and (min-width: 40.063em) {
      .TextIcon.tgvMaxConf {
        padding: 0.9375rem;
        max-width: 22.1875rem; }
        .TextIcon.tgvMaxConf .TextIcon-icon {
          margin-right: 0.9375rem; }
          .TextIcon.tgvMaxConf .TextIcon-icon svg {
            width: 3.125rem; }
        .TextIcon.tgvMaxConf .TextIcon-text {
          padding-left: 0.9375rem; } }
  .TextIcon.busConditions, .TextIcon.securityGate {
    color: #0099b4;
    flex-flow: column; }
    .a11y-high-c .TextIcon.busConditions, .a11y-high-c .TextIcon.securityGate {
      color: #007a89; }
    .TextIcon.busConditions .TextIcon-icon, .TextIcon.securityGate .TextIcon-icon {
      border-color: #0099b4;
      margin-right: 0.9375rem;
      padding: 0.8125rem;
      border-radius: 50%;
      border-style: solid;
      border-width: 1px;
      display: none; }
      .a11y-high-c .TextIcon.busConditions .TextIcon-icon, .a11y-high-c .TextIcon.securityGate .TextIcon-icon {
        border-color: #007a89; }
      .TextIcon.busConditions .TextIcon-icon svg, .TextIcon.securityGate .TextIcon-icon svg {
        margin-bottom: -5px; }
    .TextIcon.busConditions .TextIcon-text, .TextIcon.securityGate .TextIcon-text {
      line-height: 1.5; }
      .TextIcon.busConditions .TextIcon-text p, .TextIcon.securityGate .TextIcon-text p {
        margin: 0; }
      .TextIcon.busConditions .TextIcon-text a, .TextIcon.securityGate .TextIcon-text a {
        color: #0099b4; }
        .a11y-high-c .TextIcon.busConditions .TextIcon-text a, .a11y-high-c .TextIcon.securityGate .TextIcon-text a {
          color: #007a89; }
    .TextIcon.busConditions .TextIcon-title, .TextIcon.securityGate .TextIcon-title {
      font-size: 0.875rem;
      font-weight: bold; }
    @media only screen and (min-width: 40.063em), print {
      .TextIcon.busConditions, .TextIcon.securityGate {
        flex-flow: row; }
        .TextIcon.busConditions .TextIcon-icon, .TextIcon.securityGate .TextIcon-icon {
          display: block; }
        .TextIcon.busConditions .TextIcon-text, .TextIcon.securityGate .TextIcon-text {
          text-align: left; } }
    @media print {
      .TextIcon.busConditions, .TextIcon.securityGate {
        color: #000; }
        .TextIcon.busConditions a, .TextIcon.securityGate a {
          color: #000; } }
  .TextIcon.busConditions .TextIcon-icon {
    border-width: 0; }
    .TextIcon.busConditions .TextIcon-icon svg {
      width: 2.5rem;
      height: 2.5rem; }
  .TextIcon.emailTitle {
    justify-content: space-between;
    margin-bottom: 0.625rem; }
    .TextIcon.emailTitle .TextIcon-icon svg {
      fill: #ea5330;
      width: 1.25rem;
      height: 1.25rem; }
      .a11y-high-c .TextIcon.emailTitle .TextIcon-icon svg {
        fill: #d93914; }
    .TextIcon.emailTitle.emailClose {
      margin-bottom: 0; }
      .TextIcon.emailTitle.emailClose .TextIcon-text {
        padding-bottom: 0; }
    @media only screen and (min-width: 40.063em), print {
      .TextIcon.emailTitle {
        margin-top: 0;
        margin-bottom: 0; } }
  .TextIcon.folderRecapPassenger .TextIcon-icon {
    height: 1.6875rem;
    margin-right: 0.9375rem; }
    @media only screen and (min-width: 40.063em) {
      .TextIcon.folderRecapPassenger .TextIcon-icon {
        margin-right: 0.4375rem; } }
  .TextIcon.folderRecapPassenger .TextIcon-text {
    padding: 0; }
  .TextIcon.folderRecapDeliveryMode {
    height: 1.6875rem; }
    .TextIcon.folderRecapDeliveryMode .TextIcon-text {
      padding: 0; }
    .TextIcon.folderRecapDeliveryMode .TextIcon-icon {
      margin-right: 0.625rem; }
      .TextIcon.folderRecapDeliveryMode .TextIcon-icon svg {
        width: 2.0625rem;
        height: 2.0625rem; }
      @media only screen and (min-width: 40.063em) {
        .TextIcon.folderRecapDeliveryMode .TextIcon-icon {
          margin-right: 0.4375rem; } }
  .TextIcon.folderPickerPassengers .TextIcon-icon ng-include {
    display: block;
    height: 1.375rem; }
  .TextIcon.folderPickerPassengers .TextIcon-text {
    padding-bottom: 0; }
  .TextIcon.deliveryMode-tip .TextIcon-icon svg {
    fill: #0099b4;
    width: 2rem;
    height: 2rem; }
    .a11y-high-c .TextIcon.deliveryMode-tip .TextIcon-icon svg {
      fill: #007a89; }
  .TextIcon.deliveryMode-tip .TextIcon-text {
    color: #0099b4; }
    .a11y-high-c .TextIcon.deliveryMode-tip .TextIcon-text {
      color: #007a89; }
    .TextIcon.deliveryMode-tip .TextIcon-text a {
      color: #0099b4; }
      .a11y-high-c .TextIcon.deliveryMode-tip .TextIcon-text a {
        color: #007a89; }
  .TextIcon.cancellationSummary .TextIcon-icon {
    margin-right: 0.3125rem; }
    @media only screen and (min-width: 40.063em) {
      .TextIcon.cancellationSummary .TextIcon-icon {
        margin-right: 0.5rem; } }
    .TextIcon.cancellationSummary .TextIcon-icon svg {
      height: 0.9375rem;
      width: 0.9375rem; }
      @media only screen and (min-width: 40.063em) {
        .TextIcon.cancellationSummary .TextIcon-icon svg {
          margin-bottom: -0.0625rem; } }
  .TextIcon.cancellationSummary .TextIcon-text {
    display: flex;
    padding-bottom: 0.125rem; }
    @media only screen and (min-width: 40.063em) {
      .TextIcon.cancellationSummary .TextIcon-text {
        padding-bottom: 0; } }
  @media only screen and (min-width: 40.063em) {
    .TextIcon.cancellationSummary {
      display: inline-flex;
      margin-left: 1.25rem; } }
  .TextIcon.addToCalendar {
    color: #ea5330; }
    .a11y-high-c .TextIcon.addToCalendar {
      color: #d93914; }
    @media only screen and (min-width: 40.063em) {
      .TextIcon.addToCalendar {
        color: #fff; }
        .a11y-high-c .TextIcon.addToCalendar {
          color: #fff; } }
    .TextIcon.addToCalendar .TextIcon-icon {
      margin-right: 0.9375rem; }
      @media only screen and (min-width: 40.063em) {
        .TextIcon.addToCalendar .TextIcon-icon {
          margin-right: 0.4375rem; } }
  .TextIcon.tkdFid {
    color: #0099b4;
    padding: 0 1.25rem;
    text-align: left; }
    .a11y-high-c .TextIcon.tkdFid {
      color: #007a89; }
    .TextIcon.tkdFid svg {
      fill: #0099b4;
      height: 1rem;
      width: 1rem; }
      .a11y-high-c .TextIcon.tkdFid svg {
        fill: #007a89; }

.ProcessStatus {
  padding-top: 1.25rem;
  padding-bottom: 0.9375rem; }
  @media only screen and (min-width: 40.063em), print {
    .ProcessStatus {
      display: flex;
      padding-bottom: 1.25rem; } }
  .ProcessStatus.urct {
    padding-top: 0.625rem; }
    @media only screen and (min-width: 40.063em), print {
      .ProcessStatus.urct {
        padding-bottom: 0.625rem; } }
  .ProcessStatus.option {
    align-items: center;
    padding-bottom: 0; }
    @media only screen and (min-width: 40.063em), print {
      .ProcessStatus.option {
        display: flex;
        padding-bottom: 1.25rem; } }
  .ProcessStatus.cancellationConfirmation.option {
    justify-content: center; }
    .ProcessStatus.cancellationConfirmation.option .ProcessStatus-message {
      width: unset; }
  .ProcessStatus-iconTitle {
    display: flex;
    align-items: center;
    width: 100%;
    padding-right: 0.625rem; }
  .ProcessStatus-icon {
    border-radius: 50%;
    padding-left: 1.5625rem;
    padding-right: 1.5625rem; }
    @media only screen and (min-width: 40.063em), print {
      .ProcessStatus-icon {
        padding-left: 1.5rem;
        padding-right: 0.75rem;
        padding-top: 0.9375rem;
        flex-shrink: 0; } }
    .ProcessStatus-icon.urct {
      padding-left: 1.25rem;
      padding-right: 0.9375rem;
      padding-top: 0.3125rem; }
      @media only screen and (min-width: 40.063em), print {
        .ProcessStatus-icon.urct {
          padding-left: 0.9375rem;
          padding-right: 0.5rem; } }
      .ProcessStatus-icon.urct svg {
        width: 2.8125rem;
        height: 2.8125rem; }
    .ProcessStatus-icon.option {
      width: 3.125rem;
      height: 3.125rem;
      border: 0;
      margin-right: 1.1875rem;
      padding-right: 2.5rem;
      padding-left: 1.25rem; }
      @media only screen and (min-width: 40.063em), print {
        .ProcessStatus-icon.option {
          padding-left: 1.5rem;
          padding-right: 1.5625rem;
          padding-top: 0;
          flex-shrink: 0;
          margin-right: 2.1875rem; } }
      .ProcessStatus-icon.option svg {
        width: 3.125rem;
        height: 3.125rem; }
    .ProcessStatus-icon svg {
      fill: #000;
      width: 2rem;
      height: 2rem; }
      @media only screen and (min-width: 40.063em), print {
        .ProcessStatus-icon svg {
          width: 2rem;
          height: 2rem; } }
  .ProcessStatus-message {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding-right: 0.9375rem; }
    @media only screen and (min-width: 40.063em), print {
      .ProcessStatus-message {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        padding-right: 1.25rem; } }
  .ProcessStatus-title {
    margin: 0;
    color: #000;
    font-family: AvenirRoman, AvenirBook, Arial, Helvetica, sans-serif;
    font-weight: normal; }
    @media only screen and (min-width: 40.063em), print {
      .ProcessStatus-title {
        height: auto;
        font-size: 1.25rem; } }
    .ProcessStatus-title-urct {
      font-family: AvenirHeavy, Arial, Helvetica, sans-serif;
      font-size: 0.875rem;
      line-height: 1.1875rem;
      margin: 0; }
      @media only screen and (min-width: 40.063em), print {
        .ProcessStatus-title-urct {
          line-height: 1.375rem; } }
    .ProcessStatus-title span {
      font-family: AvenirHeavy, Arial, Helvetica, sans-serif; }
  .ProcessStatus-text {
    clear: both;
    padding: 0.9375rem 0 0 0.9375rem;
    line-height: 1.1875rem;
    flex-basis: 80%;
    flex-grow: 1;
    width: 100%; }
    @media only screen and (min-width: 40.063em), print {
      .ProcessStatus-text {
        clear: none;
        border: 0;
        margin-top: 0;
        padding: 0.3125rem 0 0 0;
        flex-basis: auto;
        flex-grow: 0; } }
    .ProcessStatus-text .email {
      font-family: AvenirHeavy, Arial, Helvetica, sans-serif; }
    .ProcessStatus-text.donation {
      padding-top: 0; }
  .ProcessStatus.success .ProcessStatus-icon {
    border-color: #209e67; }
    .a11y-high-c .ProcessStatus.success .ProcessStatus-icon {
      border-color: #1f7d63; }
    .ProcessStatus.success .ProcessStatus-icon svg {
      fill: #209e67; }
      .a11y-high-c .ProcessStatus.success .ProcessStatus-icon svg {
        fill: #1f7d63; }
  .ProcessStatus.success .ProcessStatus-title {
    color: #209e67; }
    .a11y-high-c .ProcessStatus.success .ProcessStatus-title {
      color: #1f7d63; }

.MessageInfo {
  max-width: 25rem;
  margin: auto; }
  .MessageInfo-message {
    color: #0099b4;
    align-items: flex-start;
    justify-content: center; }
    .a11y-high-c .MessageInfo-message {
      color: #007a89; }
  .MessageInfo-icon {
    margin-right: 0.4375rem; }
    .MessageInfo-icon svg {
      width: 2.5rem;
      height: 2.5rem; }
      @media only screen and (min-width: 40.063em), print {
        .MessageInfo-icon svg {
          width: 1.875rem;
          height: 1.875rem;
          margin-bottom: 0.1875rem; } }
  .MessageInfo-text {
    flex-grow: 0;
    align-self: center; }
    .MessageInfo-text strong {
      font-family: AvenirHeavy, Arial, Helvetica, sans-serif; }
  .MessageInfo-button:not(:empty) {
    text-align: center;
    margin-top: 1.25rem; }

/*
Message général

Affichage d'un message d'information à caractère général.

.oui-message--alert - Message de type erreur
.oui-message--warning - Message de type avertissement
.oui-message--info - Message de type informatif
.oui-message--positive - Message de type positif
.oui-message--light-alert - Message light de type erreur
.oui-message--light-warning - Message light de type avertissement
.oui-message--light-info - Message light de type informatif
.oui-message--light-positive - Message light de type positif

Markup: components/message/oui-message.styleguide.hbs

Styleguide 2.1
*/
.oui-message {
  color: #fff;
  padding: 1.25rem;
  border-radius: 0.5rem;
  align-items: center;
  text-align: left; }
  .a11y-high-c .oui-message {
    color: #fff; }
  @media only screen and (min-width: 40.063em) {
    .oui-message {
      display: flex; } }
  @media only screen and (min-width: 40.063em) {
    .oui-message__content {
      flex: 1; } }
  .oui-message__title {
    font-size: 1.25rem;
    line-height: 1.625rem;
    font-family: AvenirRoman, AvenirBook, Arial, Helvetica, sans-serif;
    font-weight: normal;
    margin: 0 0 0.375rem; }
  .oui-message__body {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-family: AvenirRoman, AvenirBook, Arial, Helvetica, sans-serif;
    font-weight: normal;
    margin: 0; }
  .oui-message__button {
    margin: 1rem 0 0; }
    @media only screen and (min-width: 40.063em) {
      .oui-message__button {
        margin: 0 0 0 1.25rem; } }
  .oui-message--alert {
    background-color: #d9002e; }
    .a11y-high-c .oui-message--alert {
      background-color: #b51742; }
  .oui-message--warning {
    background-color: #d97201; }
    .a11y-high-c .oui-message--warning {
      background-color: #bb4a00; }
  .oui-message--info {
    background-color: #0099b4; }
    .a11y-high-c .oui-message--info {
      background-color: #007a89; }
  .oui-message--positive {
    background-color: #209e67; }
    .a11y-high-c .oui-message--positive {
      background-color: #1f7d63; }
  .oui-message--light-alert {
    background-color: #fbe5ea;
    color: #d9002e; }
    .a11y-high-c .oui-message--light-alert {
      background-color: #fbe5ea; }
    .a11y-high-c .oui-message--light-alert {
      color: #b51742; }
  .oui-message--light-warning {
    background-color: #fbf1e5;
    color: #d97201; }
    .a11y-high-c .oui-message--light-warning {
      background-color: #fbf1e5; }
    .a11y-high-c .oui-message--light-warning {
      color: #bb4a00; }
  .oui-message--light-info {
    background-color: #e5f5f7;
    color: #0099b4; }
    .a11y-high-c .oui-message--light-info {
      background-color: #e5f5f7; }
    .a11y-high-c .oui-message--light-info {
      color: #007a89; }
  .oui-message--light-positive {
    background-color: #e8f5f0;
    color: #209e67; }
    .a11y-high-c .oui-message--light-positive {
      background-color: #f1f5f3; }
    .a11y-high-c .oui-message--light-positive {
      color: #1f7d63; }
  .oui-message__icon {
    display: none; }
    @media only screen and (min-width: 40.063em) {
      .oui-message__icon {
        display: block;
        margin-right: 1.25rem;
        width: 2rem;
        height: 2rem;
        fill: currentColor; } }

.alert-zone ~ .alert-zone {
  margin-top: 0.9375rem; }

.Loader .oui-loader {
  font-size: 3.5rem; }

/* containers */
.Page {
  position: relative;
  min-height: 75vh;
  background-color: #fff; }
  .Page.cancelled {
    min-height: auto; }

/*
PageSection

Ces styles peuvent être appliqués grâce à la class `.PageSection`.

Permet de délimiter graphiquement les principales zones d'une page.

Une section est généralement composée d'un titre suivi de son contenu, elle peut également être dépourvue de titre.
Elle se termine par un liseré gris (sauf cas particulier, voir les modifiers ci-dessous).

Par défaut, padding-top: 40px (mobile) / 50px (desktop)

Markup: pageSection.hbs

.afterPageheader                  - Section suivant le header Mon Voyage - padding-top: 30px (mobile) / 40px (desktop)
.withTitle                        - Section avec titre - padding-top: 50px (mobile) / 60px (desktop)
.noSeparator                      - Section sans trait de separation, ni marge basse
.onsite                           - Section sur place, avec image de fond
.pageHeader                       - Section header, sans padding

Styleguide 8
*/
.PageSection {
  border-color: #ecedeb;
  display: block;
  max-width: 100%;
  padding: 2.1875rem 1.5625rem;
  border-bottom-style: solid;
  border-bottom-width: 1px; }
  .a11y-high-c .PageSection {
    border-color: #ecedeb; }
  @media only screen and (min-width: 40.063em) and (max-width: 64em) {
    .PageSection {
      padding-left: 0.625rem;
      padding-right: 0.625rem; } }
  @media only screen and (min-width: 64.0625em) {
    .PageSection {
      margin: 0 auto;
      padding: 2.8125rem 0; } }
  .PageSection-wrapper::before {
    outline-offset: 0.9375rem; }
  .PageSection-wrapper > :first-child {
    margin-top: 0 !important; }
  @media only screen and (min-width: 64.0625em) {
    .PageSection-wrapper {
      max-width: 60rem;
      margin: 0 auto; } }
  @media print {
    .PageSection.afterPageheader {
      padding-top: 0; } }
  .PageSection.withTitle {
    padding-top: 3.125rem; }
    @media only screen and (min-width: 40.063em) {
      .PageSection.withTitle {
        padding-top: 3.75rem; } }
  .PageSection.noSeparator {
    padding-bottom: 0;
    border: 0; }
  .PageSection.noBorderBottom {
    border-bottom: 0; }
  .PageSection.transactionSummary {
    padding-top: 0;
    padding-bottom: 0;
    border-bottom-width: 0; }
    .PageSection.transactionSummary.hideSummaryBlock {
      display: none; }
    @media only screen and (min-width: 40.063em) {
      .PageSection.transactionSummary {
        border-bottom-width: 1px; } }
  .PageSection.cancellationSummary {
    padding-top: 1.5625rem;
    padding-bottom: 1.5625rem; }
    @media only screen and (min-width: 40.063em) {
      .PageSection.cancellationSummary {
        padding-top: 1.875rem;
        padding-bottom: 1.875rem; } }
  .PageSection.pageHeader {
    padding: 0;
    border: 0; }
  .PageSection.noPaddingTop {
    padding-top: 0; }
  .PageSection.mainNav {
    max-width: 100%;
    margin: 0 auto;
    padding: 0; }
    @media only screen and (min-width: 40.063em) {
      .PageSection.mainNav {
        border: 0; } }
  @media only screen and (min-width: 40.063em) {
    .PageSection.cancellation {
      padding-top: 2.5rem; } }
  @media only screen and (min-width: 40.063em) {
    .PageSection.cancellationConfirmation {
      padding-top: 3.125rem; } }
  .PageSection.quoteEmail {
    padding-bottom: 2.1875rem; }
    @media only screen and (min-width: 40.063em) {
      .PageSection.quoteEmail {
        padding-bottom: 2.8125rem; } }
  .PageSection.lastSection {
    padding-bottom: 3.125rem; }
    @media only screen and (min-width: 40.063em) {
      .PageSection.lastSection {
        padding-bottom: 3.75rem; } }
  .PageSection.iata {
    padding-top: 1.375rem; }
    @media only screen and (min-width: 40.063em) {
      .PageSection.iata {
        padding-top: 1.4375rem; } }
    .PageSection.iata .PageSection-wrapper {
      border-radius: 1.25rem; }
      .PageSection.iata .PageSection-wrapper::before {
        outline: none; }
      .PageSection.iata .PageSection-wrapper .PageSection-info-Option {
        margin-top: 1.25rem;
        padding: 0.9375rem 0.9375rem 0; }
  .PageSection.itinerary-summary {
    margin: 0;
    padding: 1.875rem 0; }
    @media only screen and (min-width: 40.063em) {
      .PageSection.itinerary-summary {
        display: none; } }

/*
Blocs

Composant `.Block` à appliquer sur les balises `<div>`.

Styleguide 9
*/
/*
Bloc de base

Bloc avec fond blanc et marges intérieures de 20px.

.noPadding          - pas de marges intérieures
.noSidePadding      - pas de marges intérieures sur les côtés
.noVerticalPadding  - pas de marges intérieures en haut et en bas
.tiny               - marges intérieures haut et bas réduites à 15px
.narrow             - bloc plus étroit (margin latéral)

Markup: block.hbs

Styleguide 9.1
*/
.Block {
  padding: 1.25rem 1.25rem 2.5rem;
  display: block;
  background-color: #fff;
  /* Loader principal */
  /*
  Bloc passengerCard

  Bloc "carte" avec en-tête sur fond blanc et corps sur fond bleu ciel (ex : liste des passagers).

  -----

  **.passengerCard**

  Markup: block-passenger-card.hbs

  Styleguide 9.3
  */
  /* Toggleable content like on Passengers block on vsa's home */ }
  .Block.noPadding {
    padding: 0; }
  .Block.noSidePadding {
    padding-left: 0;
    padding-right: 0; }
  .Block.noVerticalPadding {
    padding-top: 0;
    padding-bottom: 0; }
  .Block.tiny {
    padding-top: 0.9375rem;
    padding-bottom: 0.9375rem; }
  .Block.narrow {
    margin-left: 0;
    margin-right: 0; }
    @media only screen and (min-width: 40.063em), print {
      .Block.narrow {
        margin-left: 4.0625rem;
        margin-right: 4.0625rem; } }
  @media print {
    .Block-text {
      display: inline-block; } }
  .Block.pageLoader {
    display: flex;
    background: none;
    min-height: 14.0625rem;
    height: 1px;
    justify-content: center;
    align-items: center; }
    .Block.pageLoader .vsc__loader {
      align-self: center; }
    @media only screen and (min-width: 40.063em) {
      .Block.pageLoader {
        min-height: 26.25rem; } }
  .Block.passengerCard {
    border: 1px solid #ecedeb;
    border-radius: 0.5rem;
    overflow: hidden;
    padding: 0; }
    .Block.passengerCard .Block-header {
      padding: 1.25rem 0.9375rem;
      background-color: #fff; }
      @media only screen and (min-width: 40.063em), print {
        .Block.passengerCard .Block-header {
          padding: 1.875rem 1.25rem;
          display: flex;
          justify-content: space-between; } }
    @media print {
      .Block.passengerCard {
        border: 0;
        padding: 0; }
        .Block.passengerCard .Block-header {
          padding: 0 0 0.625rem; } }
  .Block-content-toggleable {
    max-height: 0;
    transition: max-height .5s ease-out;
    overflow: hidden; }
    .Block-content-toggleable.isOpen {
      max-height: 10009px;
      transition: max-height .5s ease-out; }
    @media print {
      .Block-content-toggleable {
        max-height: none;
        overflow: visible; } }

.PageHeader {
  background-color: #b51742; }
  .a11y-high-c .PageHeader {
    background-color: #b51742; }
  .PageHeader-content {
    min-height: 6.25rem;
    text-align: center;
    color: #fff;
    display: flex;
    align-items: stretch;
    padding: 0; }
    @media only screen and (min-width: 40.063em) {
      .PageHeader-content {
        max-width: 60rem;
        height: 16.375rem; } }
    @media print {
      .PageHeader-content {
        min-height: inherit; } }
    .PageHeader-content.consultationHeader {
      justify-content: flex-end; }
      @media print {
        .PageHeader-content.consultationHeader {
          padding-bottom: 3.75rem; } }
    .PageHeader-content.dark-text {
      color: #b51742; }
      .a11y-high-c .PageHeader-content.dark-text {
        color: #b51742; }
  .PageHeader-top {
    height: 6.25rem;
    display: flex;
    align-items: center;
    flex-grow: 1; }
    @media print {
      .PageHeader-top {
        display: none; } }
  .PageHeader-bottom {
    flex-grow: 0;
    color: #000; }
  @media print {
    .PageHeader {
      background-color: #fff !important;
      background-image: none !important; }
      .PageHeader-wrapper {
        background-color: transparent; } }

/* composants custom */
.vsa-autocomplete {
  position: relative; }
  .vsa-autocomplete__label {
    font-size: .7em; }
  .vsa-autocomplete__input {
    font-size: .875em;
    padding-right: 1.8em; }
    .vsa-autocomplete__input:focus {
      border-color: #999082; }
      .a11y-high-c .vsa-autocomplete__input:focus {
        border-color: #7b7162; }
    .vsa-autocomplete__input--empty {
      background-color: #fff; }
  .vsa-autocomplete__reset {
    position: absolute;
    top: 0.1875rem;
    right: 0.125rem;
    width: 1.625rem;
    height: 1.875rem;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='svg2' xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewbox='0 0 48 48' viewBox='0 0 48 48' fill='%23000'%3E%3Cg id='Close'%3E%3Cpath id='path4' d='M26.1 24l12-12c1.4-1.4-.8-3.5-2.1-2.1l-12 12-12-12c-1.4-1.4-3.5.8-2.1 2.1l12 12-12 12c-1.4 1.4.8 3.5 2.1 2.1l12-12 12 12c1.4 1.4 3.5-.8 2.1-2.1l-12-12z'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 1.25rem;
    background-color: #fff;
    cursor: pointer; }
    @media only screen and (min-width: 40.063em) {
      .vsa-autocomplete__reset {
        top: 0.125rem; } }
  .vsa-autocomplete__message {
    background-color: #fff;
    color: #999082;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    padding: 2em;
    font-size: .85em;
    z-index: 11;
    border-radius: 0 0 0.5rem 0.5rem;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.33); }
    .a11y-high-c .vsa-autocomplete__message {
      background-color: #fff; }
    .a11y-high-c .vsa-autocomplete__message {
      color: #7b7162; }
  .vsa-autocomplete__results {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    padding: 1.25rem;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.33);
    width: 100%;
    max-height: 360px;
    overflow-x: hidden;
    z-index: 10;
    border-radius: 0 0 0.5rem 0.5rem; }
  .vsa-autocomplete__type {
    color: #999082;
    font-family: AvenirMedium, Arial, sans-serif;
    font-size: 1em;
    padding: 0 1.5625rem 0.625rem 2.0625rem;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='svg2' xmlns='http://www.w3.org/2000/svg' fill='%23999082' width='48' height='48' viewbox='0 0 48 48' viewBox='0 0 48 48'%3E%3Cg id='G%26%23xE9;oloc'%3E%3Cpath id='path4' d='M23.87 22.9c5.16 0 7.562-6.673 3.594-9.966-3.948-3.276-10.015.26-9.142 5.3.46 2.664 2.844 4.666 5.548 4.666 3.11 0-3.112 0 0 0zm-3.262-8.893c1.777-1.775 4.745-1.776 6.522 0 1.775 1.776 1.775 4.746 0 6.52-1.776 1.777-4.747 1.777-6.522 0-1.777-1.774-1.775-4.742 0-6.52.836-.835-.836.837 0 0zm13.175 26.72h-20.41c-.638 0-.666 1.02 0 1.02h20.41c.638 0 .668-1.02 0-1.02zM23.28 37.792c1.26 1.252 3.67-2.416 4.26-3.125 2.3-2.762 4.396-5.752 5.937-9.01 1.457-3.08 2.48-6.58 1.854-10.002a11.52 11.52 0 0 0-3.86-6.688C27.3 5.412 20.99 5.34 16.74 8.8a11.581 11.581 0 0 0-4.045 6.72c-.657 3.367.307 6.82 1.722 9.867 1.446 3.115 3.4 5.987 5.55 8.656 1.04 1.296 2.293 2.444 3.315 3.75.394.39-.04-.05 0 0zm-5.985-26.755c3.904-3.9 10.508-3.582 14.02.674 4.085 4.96 1.517 11.51-1.458 16.31-1.682 2.71-3.674 5.25-5.856 7.58-5.32-5.72-14.06-17.19-6.7-24.56 1.72-1.71-1.71 1.72 0 0z'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 21px;
    background-position: 0 -0.125rem; }
    .a11y-high-c .vsa-autocomplete__type {
      color: #7b7162; }
    @media only screen and (min-width: 40.063em) {
      .vsa-autocomplete__type {
        padding-right: 2.1875rem; } }
    .vsa-autocomplete__type--airports {
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='Calque_1' xmlns='http://www.w3.org/2000/svg' fill='%23999082' width='48' height='48' viewbox='0 0 48 48' viewBox='0 0 48 48'%3E%3Cg id='Avion'%3E%3Cpath id='path4-1' d='M46.83 14.53c-1.4-2.8-6-2.2-8.2-1.1l-11.3 5.4-8.6-4.1c-1.1-.6-2.3-.9-3.5-.3l-.6.3c-1.6.7-2.3 2.8-1.2 4.3l3.3 4.9-6.6 3.1c-2.4-1.8-3-2.3-3.2-2.4-.5-.4-1.1-.8-2-.8-.5 0-1 .2-1.3.3l-1.2.6c-1.4.7-2 2.4-1.3 3.8l2.7 5.6c.8 1.8 3.7 1.3 5.3 1.3 1.1 0 2.2 0 3.3-.1.8 0 1.8 0 2.5-.3l27.8-13.2c2.1-1.3 5.5-4.4 4.1-7.3zm-5.2 5.3l-27.8 13.2c-.3.2-.9.1-1.3.1-.8.1-1.6.1-2.4.1-.9 0-1.7 0-2.6.1-.2 0-2 .2-2.2-.1l-2.7-5.6c-.2-.4 0-.9.4-1.1l1.2-.6c.5-.2.9 0 1.3.3l4.1 3.1 8.6-4.1 1 1.3c.6.8 1.8-.1 1.2-.9l-2.8-3.7-2.8-4.1c-.3-.4 0-1.1.5-1.3l.6-.3c.6-.3 1.2 0 1.7.3l6.4 3 4.8 2.4c.9.4 1.5-.9.7-1.3l-.8-.4 10.6-5c1.1-.5 5.5-1.6 5.7.6.3 1.6-2.1 3.4-3.4 4z'/%3E%3C/g%3E%3C/svg%3E"); }
    .vsa-autocomplete__type--stations {
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='svg2' xmlns='http://www.w3.org/2000/svg' fill='%23999082' width='48' height='48' viewbox='0 0 48 48' viewBox='0 0 48 48'%3E%3Cg id='Gare'%3E%3Cpath id='path4' d='M26.113 16.475l-1.98 1.987-1.15-1.15c-.45-.453-1.194.247-.723.72l1.51 1.512c.19.19.532.19.72 0h.003l2.343-2.35c.452-.45-.25-1.19-.722-.72zm20.48-5.733a3.6 3.6 0 0 0-1.818-.99L24.6 5.678a1.01 1.01 0 0 0-.395-.003L2.99 9.765A3.037 3.037 0 0 0 .53 12.77v28.55c0 .55.467 1.02 1.02 1.02h8.163c.55 0 1.02-.468 1.02-1.02v-9.18c.003-2.337 1.483-4.083 3.873-4.086 2.355-.003 4.285 1.667 4.29 4.085v9.18c0 .55.47 1.02 1.022 1.02h8.164c.55 0 1.02-.47 1.02-1.02v-9.18c.002-2.37 1.455-4.08 3.873-4.09 2.38-.01 4.285 1.64 4.29 4.08v9.18c0 .55.47 1.02 1.02 1.02h8.165c.55 0 1.02-.47 1.02-1.02V12.75c-.004-.82-.387-1.51-.878-2.008-.5-.5.49.497 0 0zM45.425 40.3h-6.122v-8.16c0-3.567-2.844-6.126-6.332-6.126-3.52-.002-5.91 2.65-5.91 6.125v8.16h-6.12v-8.16c0-3.47-2.76-6.05-6.16-6.13-3.564-.08-6.08 2.6-6.08 6.12v8.16H2.57V12.77c0-.507.333-.908.804-1l21.02-4.05 19.975 4.033c.43.084 1.06.5 1.05 1V40.3zM24.133 12.637c-5.588 0-8.22 7.21-3.947 10.81 4.3 3.626 10.98-.26 9.975-5.786-.52-2.87-3.1-5.02-6.02-5.02-3.38 0 3.39 0 0 0zm3.61 9.737c-1.968 1.965-5.254 1.968-7.22 0-1.967-1.966-1.967-5.254 0-7.22s5.253-1.966 7.22 0c1.966 1.966 1.965 5.252 0 7.22-.926.924.925-.926 0 0z'/%3E%3C/g%3E%3C/svg%3E"); }
    .vsa-autocomplete__type--poi {
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='Calque_1' xmlns='http://www.w3.org/2000/svg' fill='%23999082' width='48' height='48' viewbox='0 0 48 48' viewBox='0 0 48 48'%3E%3Cg id='Activit%26%23xE9;s__sur_place'%3E%3Cpath id='path4-2' d='M43.05 10.15c-.7-.9-1.6-1.4-2.7-1.6-1.9-.3-3.8-.4-5.7-.4s-3.8.1-5.7.4h-.2c-2 .3-3.5 2-3.5 4l.1 7.2h-2.6l.1-7.2c0-2-1.5-3.8-3.5-4h-.2c-1.9-.3-3.8-.4-5.7-.4s-3.7.1-5.6.4c-1.1 0-2 .5-2.7 1.3s-1 1.9-.9 3l2.7 19.8c.2 1.3 1.2 2.7 2.5 3.1v.1c0 2.2 1.8 4 4 4h3c2.2 0 4-1.8 4-4v-.4c1.1-.6 1.9-1.8 2-3.2v-1.4h3v1.4c.1 1.4.9 2.6 2 3.2v.4c0 2.2 1.8 4 4 4h3c2.2 0 4-1.8 4-4v-.1c1.4-.4 2.3-1.7 2.5-3l2.7-19.6c.3-1.1 0-2.1-.6-3zm-24.5 25.7c0 1.1-.9 2-2 2h-3c-1.1 0-2-.9-2-2v-.9c1.2.1 2.3.2 3.5.2s2.3-.1 3.5-.2v.9zm18 0c0 1.1-.9 2-2 2h-3c-1.1 0-2-.9-2-2v-.9c1.2.1 2.3.2 3.5.2s2.3-.1 3.5-.2v.9zm5.3-23l-2.7 19.6c-.1.7-.7 1.4-1.4 1.4h-.3c-1.5.2-3 .2-4.4.2-1.2 0-2.4-.1-3.6-.2-1 0-1.8-.8-1.9-1.8v-2.3c0-.5-.5-1-1-1h-5c-.5 0-1 .4-1 1v2.3c-.1 1-.9 1.8-1.9 1.8-1.2.1-2.4.2-3.6.2-1.5 0-3-.1-4.4-.2h-.2c-.7 0-1.3-.8-1.4-1.4l-2.7-19.8c-.2-1.1.6-2 1.7-2 1.8-.2 3.6-.4 5.4-.4s3.6.1 5.4.4h.2c1 .1 1.7 1 1.7 2l-.1 8.2c0 .6.4 1 1 1h4.7c.6 0 1-.5 1-1l-.1-8.2c0-1 .7-1.9 1.7-2h.2c1.8-.2 3.6-.4 5.4-.4s3.6.1 5.4.4c1.2.1 2 1.1 1.9 2.2zm-15.8 10.5c-.3 0-.5.2-.5.5v3c0 .3.2.5.5.5s.5-.2.5-.5v-3c0-.3-.2-.5-.5-.5zm-2 0c-.3 0-.5.2-.5.5v3c0 .3.2.5.5.5s.5-.2.5-.5v-3c0-.3-.2-.5-.5-.5zm-2 0c-.3 0-.5.2-.5.5v3c0 .3.2.5.5.5s.5-.2.5-.5v-3c0-.3-.2-.5-.5-.5z'/%3E%3C/g%3E%3C/svg%3E"); }
    .vsa-autocomplete__type--addresses {
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='Calque_1' xmlns='http://www.w3.org/2000/svg' fill='%23999082' width='48' height='48' viewbox='0 0 48 48' viewBox='0 0 48 48'%3E%3Cg id='Mail'%3E%3Cpath id='path4' d='M38.893 14.776c-.194-.195-.512-.195-.707 0l-8.842 8.842-3.547 3.547c-.882.882-2.372.883-3.255 0L10.314 14.938c-.442-.442-1.17.245-.707.707l8.278 8.278-8.972 8.972c-.442.442.244 1.17.707.707l8.972-8.972 3.242 3.242c1.27 1.27 3.4 1.27 4.67 0l3.193-3.194 8.488 8.49c.443.44 1.17-.246.707-.708l-8.488-8.49 8.488-8.488c.196-.194.196-.51 0-.706-.195-.196.196.195 0 0zM38.455 10H9.785C7.03 10 4.5 11.93 4.5 14.686v18.237C4.5 35.683 7.03 38 9.786 38h28.67c2.756 0 5.044-2.318 5.044-5.076V14.686C43.5 11.93 41.212 10 38.455 10zM41.5 32.924C41.5 34.58 40.11 36 38.455 36H9.785C8.13 36 6.5 34.58 6.5 32.924V14.686C6.5 13.03 8.13 12 9.786 12h28.67c1.655 0 3.044 1.03 3.044 2.686v18.238z'/%3E%3C/g%3E%3C/svg%3E"); }
  .vsa-autocomplete__locations {
    margin: 0 1.5625rem 1.875rem 2em; }
    @media only screen and (min-width: 40.063em) {
      .vsa-autocomplete__locations {
        margin-right: 2.1875rem; } }
  .vsa-autocomplete__location {
    border-color: #ecedeb;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    display: block;
    font-size: .875em; }
    .a11y-high-c .vsa-autocomplete__location {
      border-color: #ecedeb; }
    .vsa-autocomplete__location-link {
      color: inherit;
      display: block;
      padding: 0.9375rem 0.5em; }
      .a11y-high-c .vsa-autocomplete__location-link {
        color: inherit; }
    .vsa-autocomplete__location strong {
      color: #0099b4;
      font-family: AvenirHeavy, Arial, sans-serif; }
      .a11y-high-c .vsa-autocomplete__location strong {
        color: #007a89; }
    .vsa-autocomplete__location.active, .vsa-autocomplete__location:hover {
      color: #0099b4; }
      .a11y-high-c .vsa-autocomplete__location.active, .a11y-high-c .vsa-autocomplete__location:hover {
        color: #007a89; }
  @media only screen and (max-width: 767px) {
    .vsa-autocomplete--focus {
      position: fixed;
      z-index: 1000;
      top: 0;
      left: 0;
      padding: 5px 5px 0;
      width: calc(100% - 10px); }
      .vsa-autocomplete--focus .vsa-autocomplete__input,
      .vsa-autocomplete--focus .vsa-autocomplete__reset,
      .vsa-autocomplete--focus .vsa-autocomplete__results,
      .vsa-autocomplete--focus .vsa-autocomplete__message {
        z-index: 1000; }
      .vsa-autocomplete--focus .vsa-autocomplete__results,
      .vsa-autocomplete--focus .vsa-autocomplete__message {
        width: calc(100vw - 12px);
        margin: 0 6px; }
      .vsa-autocomplete--focus .vsa-autocomplete__input {
        font-size: 1em;
        width: calc(100vw - 10px);
        height: 1.875rem;
        margin-top: 5px;
        background-size: 1.875rem -0.625rem; }
      .vsa-autocomplete--focus .vsa-autocomplete__reset {
        width: 1.625rem;
        height: 1.875rem -0.25rem;
        top: 0.75rem;
        right: -0.1875rem;
        background-position: center 0.1875rem; }
      .vsa-autocomplete--focus .vsa-autocomplete__results {
        max-height: calc(100vh - (1.875rem + 1.25rem));
        overflow: auto; }
      .vsa-autocomplete--focus::after {
        content: '';
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        z-index: 999;
        background: rgba(0, 0, 0, 0.6); }
    .bowser-ios .vsa-autocomplete--focus, .bowser-ios .vsa-autocomplete::after {
      position: absolute;
      left: -1.5625rem;
      width: 111%; } }
  @media only screen and (max-width: 767px) and (max-width: 22.4375em) {
    .bowser-ios .vsa-autocomplete--focus, .bowser-ios .vsa-autocomplete::after {
      width: 115%; } }
  @media only screen and (max-width: 767px) {
    .bowser-ios .vsa-autocomplete .vsa-autocomplete__input {
      font-size: 16px; }
    .bowser-ios .vsa-autocomplete .vsa-autocomplete__results {
      max-height: calc(100vh - 380px); } }
  @media only screen and (max-width: 767px) and (orientation: landscape) {
    .bowser-ios .vsa-autocomplete .vsa-autocomplete__results {
      max-height: calc(100vh - 290px); } }

@media only screen and (max-width: 767px) and (max-width: 22.4375em) {
  .bowser-ios .vsa-autocomplete--focus .vsa-autocomplete__reset {
    right: -0.3125rem; } }

body.modal-opened {
  position: relative; }
  @media only screen and (min-width: 40.063em) {
    body.modal-opened {
      overflow: hidden; } }

.vsc-modal-overlay {
  cursor: pointer;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  height: 500vh;
  z-index: 1000;
  background-color: #000;
  opacity: 0;
  transition: opacity .25s; }
  .vsc-modal-overlay.modal-fade.modal-fade {
    opacity: .3; }

.vsc-modal-dialog {
  border-color: #ecedeb;
  border-style: solid;
  border-width: 1px;
  position: absolute;
  top: 0;
  display: block;
  vertical-align: middle;
  z-index: 1040;
  max-width: 100%;
  border-radius: 0.5rem;
  background-color: #fff;
  margin-top: 0.625rem;
  margin-right: 0.625rem; }
  .a11y-high-c .vsc-modal-dialog {
    border-color: #ecedeb; }
  .vsc-modal-dialog .out {
    position: absolute;
    left: -9999px;
    max-width: 9000px; }
  .vsc-modal-dialog .vsc-modal-content {
    position: relative;
    margin: auto;
    outline: none;
    background-clip: padding-box; }
    .vsc-modal-dialog .vsc-modal-content .vsc-dialog-box .dialog-header {
      padding: 1.875rem 0.625rem 1.25rem 0.625rem; }
      .vsc-modal-dialog .vsc-modal-content .vsc-dialog-box .dialog-header .complex-title {
        font-size: 1.875rem;
        font-family: AvenirRoman, AvenirBook, Arial, Helvetica, sans-serif;
        text-align: center; }
        .vsc-modal-dialog .vsc-modal-content .vsc-dialog-box .dialog-header .complex-title span {
          font-family: Baloo, AvenirBlack, AvenirHeavy, Arial, Helvetica, sans-serif; }
          @media only screen and (max-width: 22.4375em) {
            .vsc-modal-dialog .vsc-modal-content .vsc-dialog-box .dialog-header .complex-title span {
              display: block; } }
      .vsc-modal-dialog .vsc-modal-content .vsc-dialog-box .dialog-header .btn-close {
        position: absolute;
        top: 13px;
        right: 13px;
        border-radius: 20px;
        cursor: pointer; }
        .vsc-modal-dialog .vsc-modal-content .vsc-dialog-box .dialog-header .btn-close svg {
          height: 1.5625rem;
          width: 1.5625rem; }
        .vsc-modal-dialog .vsc-modal-content .vsc-dialog-box .dialog-header .btn-close:focus {
          outline: none;
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 9px 1px rgba(102, 175, 233, 0.6); }
    .vsc-modal-dialog .vsc-modal-content .vsc-dialog-box .dialog-content {
      padding: 0 0.9375rem;
      max-height: 70vh !important;
      overflow: auto; }
      .vsc-modal-dialog .vsc-modal-content .vsc-dialog-box .dialog-content .subtitle {
        font-family: AvenirMedium, Arial, Helvetica, sans-serif;
        font-size: 1.125rem;
        margin: 0;
        text-transform: none; }
    .vsc-modal-dialog .vsc-modal-content .vsc-dialog-box .dialog-footer {
      text-align: right;
      margin: 8px 15px 0px 15px;
      border-top: solid 1px #999082;
      padding-top: 8px; }
      .vsc-modal-dialog .vsc-modal-content .vsc-dialog-box .dialog-footer button {
        height: 34px;
        min-width: 100px;
        margin-left: 15px; }
  .vsc-modal-dialog-hidden {
    visibility: hidden; }

/* folder picker (multi DVs) */
.FolderPicker {
  background-color: #b51742;
  position: relative;
  height: 20.625rem;
  padding: 0; }
  .a11y-high-c .FolderPicker {
    background-color: #b51742; }
  @media only screen and (min-width: 40.063em) {
    .FolderPicker {
      height: 26.4375rem; } }
  @media print {
    .FolderPicker {
      background: none;
      position: static;
      height: auto;
      margin: 1.875rem 0; } }
  .FolderPicker.tiny {
    height: 100%;
    padding: 0.3125rem 0; }
  .FolderPicker-travelTracker {
    color: #fff;
    font-size: 1rem;
    padding-top: 0.9375rem;
    text-align: center; }
    @media only screen and (min-width: 40.063em), print {
      .FolderPicker-travelTracker {
        display: none; } }

.FolderPickerItem {
  width: 15.375rem;
  background-color: #fff;
  font-size: 0.875rem;
  margin: 0 auto;
  padding-bottom: 0.625rem;
  border-radius: 0.5rem;
  text-align: left; }
  .FolderPickerItem-od {
    color: #000;
    font-family: AvenirHeavy, Arial, Helvetica, sans-serif;
    padding: 0.875rem 0.9375rem;
    margin-bottom: 0.1875rem;
    font-size: 1.25rem;
    position: relative;
    z-index: 0;
    overflow: hidden; }
    .a11y-high-c .FolderPickerItem-od {
      color: #000; }
    .FolderPickerItem-od::after {
      content: '';
      position: absolute;
      z-index: -1;
      bottom: 0;
      left: -190%;
      width: 300%;
      height: 3.75rem;
      border-radius: 0 0 50%;
      box-shadow: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1);
      margin-bottom: 0.125rem; }
    .FolderPickerItem-od svg {
      fill: #000;
      width: 1.5625rem;
      height: 1.5625rem; }
      .a11y-high-c .FolderPickerItem-od svg {
        fill: #000; }
  .FolderPickerItem-dates {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 6.125rem;
    max-height: 8.4375rem;
    padding: 1.375rem 0.8125rem;
    position: relative;
    z-index: 0;
    font-size: 0.8125rem; }
    .bowser-ios .FolderPickerItem-dates {
      font-weight: normal;
      font-family: AvenirHeavy, Arial, Helvetica, sans-serif; }
    .FolderPickerItem-dates svg {
      fill: #999082;
      width: 1.5625rem;
      height: 1.5625rem; }
      .a11y-high-c .FolderPickerItem-dates svg {
        fill: #7b7162; }
    .FolderPickerItem-dates strong {
      font-family: AvenirHeavy, Arial, Helvetica, sans-serif;
      font-weight: unset; }
  .FolderPickerItem-date {
    position: relative;
    width: 100%;
    bottom: 0.125rem; }
    .FolderPickerItem-date-icon {
      margin-right: 0.4375rem; }
      .FolderPickerItem-date-icon.inwardWay svg {
        transform: scaleX(-1); }
  .FolderPickerItem-refs {
    padding: 0.75rem 0.9375rem 0.1875rem; }
    .FolderPickerItem-refs-reference {
      flex-basis: 33%; }
    .FolderPickerItem-refs-name {
      flex-basis: 44%; }
    .FolderPickerItem-refs-passengers {
      font-family: AvenirHeavy, Arial, Helvetica, sans-serif;
      flex-basis: 23%;
      display: flex;
      align-items: center; }
    .FolderPickerItem-refs svg {
      fill: #000;
      width: 1.375rem;
      height: 1.375rem;
      transform: translate(0, 1px); }
    .FolderPickerItem-refs .small-animal-icon svg {
      height: 2rem;
      width: 2rem; }
  .FolderPickerItem:not(.isActive) .FolderPickerItem-refs .small-animal-icon svg {
    height: 1.9375rem;
    width: 1.9375rem; }
  .FolderPickerItem.tiny {
    height: 2.8125rem;
    background-color: #fff;
    border-radius: 0.625rem;
    padding: 0.6875rem 0;
    font-size: 0.875rem; }
    .FolderPickerItem.tiny .FolderPickerItem-od, .FolderPickerItem.tiny .FolderPickerItem-dates, .FolderPickerItem.tiny .FolderPickerItem-refs-name {
      display: none; }
    .FolderPickerItem.tiny .FolderPickerItem-refs {
      padding: 0;
      border: 0; }
      .FolderPickerItem.tiny .FolderPickerItem-refs-reference {
        flex-basis: 69%; }
      .FolderPickerItem.tiny .FolderPickerItem-refs-passengers {
        flex-basis: 31%;
        padding-left: 1.25rem; }
      .FolderPickerItem.tiny .FolderPickerItem-refs .small-animal-icon svg {
        width: 1.3125rem;
        height: 1.3125rem;
        transform: scale(1.4) translate(-3px, 1px); }
  .FolderPickerItem.isDisrupted .FolderPickerItem-od {
    padding-bottom: 0;
    margin-bottom: 0; }
    .FolderPickerItem.isDisrupted .FolderPickerItem-od::after {
      display: none; }
  .FolderPickerItem.isDisrupted .FolderPickerItem-disrupted {
    color: #d97201;
    display: flex;
    align-items: center;
    justify-content: center; }
    .a11y-high-c .FolderPickerItem.isDisrupted .FolderPickerItem-disrupted {
      color: #bb4a00; }
    .FolderPickerItem.isDisrupted .FolderPickerItem-disruptedIcon {
      fill: #d97201;
      width: 1.5rem;
      height: 1.5rem;
      margin-right: 0.625rem;
      transform: rotate(180deg); }
      .a11y-high-c .FolderPickerItem.isDisrupted .FolderPickerItem-disruptedIcon {
        fill: #bb4a00; }
  .FolderPickerItem.isDisrupted.tiny .FolderPickerItem-disrupted {
    display: none; }
  .FolderPickerItem.isCancelled {
    background-color: #ecedeb;
    color: #999082; }
    .a11y-high-c .FolderPickerItem.isCancelled {
      background-color: #ecedeb; }
    .a11y-high-c .FolderPickerItem.isCancelled {
      color: #7b7162; }
    .FolderPickerItem.isCancelled .FolderPickerItem-od {
      padding-bottom: 0; }
      .FolderPickerItem.isCancelled .FolderPickerItem-od::after {
        display: none; }
    .FolderPickerItem.isCancelled .FolderPickerItem-cancelled {
      color: #0099b4;
      justify-content: center;
      display: flex;
      align-content: center;
      line-height: 1.125rem;
      padding-bottom: 0.625rem; }
      .a11y-high-c .FolderPickerItem.isCancelled .FolderPickerItem-cancelled {
        color: #007a89; }
      .FolderPickerItem.isCancelled .FolderPickerItem-cancelledIcon {
        fill: #0099b4;
        width: 1.0625rem;
        height: 1.0625rem;
        margin-right: 0.3125rem; }
        .a11y-high-c .FolderPickerItem.isCancelled .FolderPickerItem-cancelledIcon {
          fill: #007a89; }
    .FolderPickerItem.isCancelled.tiny .FolderPickerItem-cancelled {
      display: none; }
    .FolderPickerItem.isCancelled.isActive::after {
      border-top-color: #ecedeb; }
  .FolderPickerItem-disrupted, .FolderPickerItem-cancelled {
    margin-top: 1.25rem;
    font-size: 0.875rem; }
  @media only screen and (min-width: 40.063em), print {
    .FolderPickerItem {
      width: 16.625rem;
      position: relative; }
      .FolderPickerItem .FolderPickerItem-od {
        padding: 1.375rem 1.125rem;
        font-size: 1.25rem; }
      .FolderPickerItem .FolderPickerItem-dates {
        padding: 1.125rem 0.625rem 1.125rem 1rem; }
      .FolderPickerItem .FolderPickerItem-date {
        margin-bottom: -0.125rem; }
      .FolderPickerItem .FolderPickerItem-refs {
        padding: 0.8125rem 1.125rem 0.25rem; }
      .FolderPickerItem .FolderPickerItem svg {
        width: 1.875rem;
        height: 1.875rem; }
      .FolderPickerItem.isActive::after {
        content: '';
        position: absolute;
        border: 0.9375rem solid transparent;
        border-top-color: #fff;
        bottom: -1.875rem;
        left: calc(50% - 0.9375rem); }
      .FolderPickerItem.isActive .FolderPickerItem-disrupted, .FolderPickerItem.isActive .FolderPickerItem-cancelled {
        margin-top: 1.25rem; }
      .FolderPickerItem.isActive.isDisrupted .FolderPickerItem-dates {
        margin: 0.9375rem 0; }
      .FolderPickerItem.isPassed:not(.isActive) {
        background-color: #ecedeb; }
        .a11y-high-c .FolderPickerItem.isPassed:not(.isActive) {
          background-color: #ecedeb; }
        .FolderPickerItem.isPassed:not(.isActive) .FolderPickerItem-od {
          color: #000; }
          .FolderPickerItem.isPassed:not(.isActive) .FolderPickerItem-od::after {
            display: none; }
          .FolderPickerItem.isPassed:not(.isActive) .FolderPickerItem-od svg {
            fill: #000; }
        .FolderPickerItem.isPassed:not(.isActive) .FolderPickerItem-dates {
          color: #999082; }
          .a11y-high-c .FolderPickerItem.isPassed:not(.isActive) .FolderPickerItem-dates {
            color: #7b7162; }
      .FolderPickerItem:not(.isActive) {
        width: 16.25rem;
        overflow: hidden; }
        .FolderPickerItem:not(.isActive) .FolderPickerItem-od {
          margin: 0;
          padding: 1.125rem 1.25rem 0;
          font-family: AvenirRoman, AvenirBook, Arial, Helvetica, sans-serif;
          font-size: 1rem;
          color: #000; }
          .FolderPickerItem:not(.isActive) .FolderPickerItem-od::after {
            display: none; }
          .FolderPickerItem:not(.isActive) .FolderPickerItem-od svg {
            width: 1.4375rem;
            height: 1.4375rem;
            fill: #000; }
        .FolderPickerItem:not(.isActive) .FolderPickerItem-dates {
          height: 5.375rem; }
          .FolderPickerItem:not(.isActive) .FolderPickerItem-dates::before {
            display: none; }
        .FolderPickerItem:not(.isActive) .FolderPickerItem-refs svg {
          width: 1.3125rem;
          height: 1.3125rem; }
        .FolderPickerItem:not(.isActive) svg {
          width: 1.5625rem;
          height: 1.5625rem; }
      .FolderPickerItem.isCancelled .FolderPickerItem-dates, .FolderPickerItem.isDisrupted .FolderPickerItem-dates {
        padding-bottom: 0;
        padding-top: 0; }
      .FolderPickerItem-disrupted, .FolderPickerItem-cancelled {
        margin-top: 0.625rem; } }
  @media print {
    .FolderPickerItem {
      border-color: #ecedeb;
      color: #000;
      background: none;
      width: auto;
      min-width: 25rem;
      max-width: 40.625rem;
      border: 1px solid;
      padding-bottom: 0; }
      .a11y-high-c .FolderPickerItem {
        border-color: #ecedeb; }
      .FolderPickerItem .FolderPickerItem-od {
        color: #000;
        margin: 0;
        padding-bottom: 0; }
        .FolderPickerItem .FolderPickerItem-od svg {
          fill: #000; }
      .FolderPickerItem .FolderPickerItem-dates {
        flex-direction: column;
        align-items: flex-start;
        height: auto; }
        .FolderPickerItem .FolderPickerItem-dates::before {
          display: none; }
      .FolderPickerItem .FolderPickerItem-refs {
        display: none; }
      .FolderPickerItem.isActive::after {
        display: none; } }

/* folders */
.Folder-messages {
  padding: 2.5rem 1.5625rem 0;
  max-width: 60rem;
  margin: 0 auto; }
  .Folder-messages-status {
    display: block; }
    .Folder-messages-status:not(:last-child) {
      margin-bottom: 0.625rem; }
      @media only screen and (min-width: 40.063em) {
        .Folder-messages-status:not(:last-child) {
          margin-bottom: 0.3125rem; } }
  @media only screen and (min-width: 40.063em), print {
    .Folder-messages-title {
      display: inline; } }
  .Folder-messages-link {
    display: block; }
    @media only screen and (min-width: 40.063em) {
      .Folder-messages-link {
        display: inline; } }
  @media only screen and (min-width: 40.063em), print {
    .Folder-messages {
      padding: 2.5rem 7.5rem 0; } }
  .Folder-messages-unfeasible .Folder-messages-link a {
    color: #d9002e; }
    .a11y-high-c .Folder-messages-unfeasible .Folder-messages-link a {
      color: #b51742; }

.Folder-assistance {
  padding: 2.1875rem 0 0; }
  @media only screen and (min-width: 64.0625em) {
    .Folder-assistance {
      padding: 2.8125rem 2.8125rem 0; } }

.FolderInfo {
  border-radius: 1.25rem;
  overflow: hidden; }
  .FolderInfo-header {
    display: flex;
    justify-content: space-between;
    padding: 0 0.9375rem; }
    @media only screen and (min-width: 40.063em) {
      .FolderInfo-header {
        padding: 0 1.25rem; } }
  .FolderInfo-body {
    padding: 0 0.9375rem; }
    @media only screen and (min-width: 40.063em) {
      .FolderInfo-body {
        display: flex;
        padding: 0; } }
    @media print {
      .FolderInfo-body {
        border: 0 none; } }
  .FolderInfo-ticketCancelled {
    color: #d97201;
    padding: 1.25rem 0;
    display: flex;
    align-items: center; }
    .a11y-high-c .FolderInfo-ticketCancelled {
      color: #bb4a00; }
    .FolderInfo-ticketCancelled svg {
      width: 1.5625rem;
      height: 1.5625rem;
      fill: currentColor;
      margin-right: 1.125rem; }
  .FolderInfo-optionCancelledMessage {
    display: flex;
    align-items: center; }
  .FolderInfo-ticketOption {
    color: #000;
    display: inline-flex;
    align-items: center;
    padding: 1.0625rem 0; }
    .a11y-high-c .FolderInfo-ticketOption {
      color: #000; }
    .FolderInfo-ticketOption svg {
      display: block;
      margin-right: 0.625rem;
      fill: currentColor;
      height: 1.625rem;
      width: 1.625rem; }
  .FolderInfo-ticketCancelledTitle {
    font-weight: bold;
    font-size: 1rem; }
  .FolderInfo-footer {
    margin: 0 0.9375rem; }
    @media only screen and (min-width: 40.063em) {
      .FolderInfo-footer {
        margin: 0;
        border-bottom: 0; } }
    @media print {
      .FolderInfo-footer {
        border: 0 none;
        margin-top: 3.125rem; } }
  .FolderInfo-ref {
    border-color: #ecedeb;
    border-style: solid;
    border-width: 1px 0; }
    .a11y-high-c .FolderInfo-ref {
      border-color: #ecedeb; }
    @media only screen and (min-width: 40.063em) {
      .FolderInfo-ref {
        border-width: 0;
        align-self: center;
        padding: 1.25rem;
        background-color: inherit;
        width: 22.5rem; } }
    @media print {
      .FolderInfo-ref {
        padding-bottom: 1.875rem;
        font-size: 0.9375rem;
        border: 0 none; } }
    .FolderInfo-ref-container {
      padding: 1.25rem 0; }
      @media only screen and (min-width: 40.063em) {
        .FolderInfo-ref-container {
          padding: 0 0 2em;
          border: 0; } }
      @media only screen and (min-width: 64.0625em) {
        .FolderInfo-ref-container {
          padding: 1.25rem 0; } }
    .FolderInfo-ref-information {
      color: #000;
      padding: 1.25rem 0 0; }
      @media only screen and (min-width: 40.063em) {
        .FolderInfo-ref-information {
          padding-top: 1.25rem;
          text-align: center; } }
  .FolderInfo-push {
    border-color: #ecedeb;
    border-style: solid;
    border-width: 1px 0 0;
    padding-top: 1.25rem; }
    .a11y-high-c .FolderInfo-push {
      border-color: #ecedeb; }
    @media only screen and (min-width: 40.063em) {
      .FolderInfo-push {
        border: 0;
        padding-top: 0; } }
  .FolderInfo-tickets {
    padding: 0 0.9375rem; }
    @media only screen and (min-width: 40.063em) {
      .FolderInfo-tickets {
        padding: 0 1.25rem; } }
    .FolderInfo-tickets.etapForm.ng-animate-enabled {
      display: block;
      max-height: 162.5rem;
      overflow: hidden;
      transition: max-height 0.5s ease; }
    .FolderInfo-tickets.etapForm.ng-enter, .FolderInfo-tickets.etapForm.ng-leave.ng-leave-active {
      max-height: 0; }
    .FolderInfo-tickets.etapForm.ng-leave, .FolderInfo-tickets.etapForm.ng-enter.ng-enter-active {
      max-height: 162.5rem; }
    .FolderInfo-tickets.etapTickets.ng-animate-enabled {
      display: block;
      max-height: 37.5rem;
      overflow: hidden;
      transition: max-height 0.5s ease; }
    .FolderInfo-tickets.etapTickets.ng-enter, .FolderInfo-tickets.etapTickets.ng-leave.ng-leave-active {
      max-height: 0; }
    .FolderInfo-tickets.etapTickets.ng-leave, .FolderInfo-tickets.etapTickets.ng-enter.ng-enter-active {
      max-height: 37.5rem; }
  .FolderInfo-addToCalendar {
    color: #ea5330;
    padding: 0.9375rem;
    display: flex;
    text-decoration: underline; }
    .a11y-high-c .FolderInfo-addToCalendar {
      color: #d93914; }
    @media only screen and (min-width: 40.063em) {
      .FolderInfo-addToCalendar {
        color: #fff;
        margin: 0;
        padding: 0; } }
    @media print {
      .FolderInfo-addToCalendar {
        display: none; } }
  @media only screen and (min-width: 40.063em) {
    .FolderInfo-deliveryMode {
      border-color: #999082;
      border-left-width: 1px;
      border-left-style: dashed;
      width: 37.1875rem; }
      .a11y-high-c .FolderInfo-deliveryMode {
        border-color: #7b7162; } }
  @media print {
    .FolderInfo-deliveryMode {
      color: #000; } }
  .FolderInfo-deliveryMode.ouigo .FolderInfo-deliveryMode-brand {
    color: #e5006d; }
    .a11y-high-c .FolderInfo-deliveryMode.ouigo .FolderInfo-deliveryMode-brand {
      color: #af0158; }
  .FolderInfo.notAvailable .FolderInfo-header, .FolderInfo.notAvailable.option .FolderInfo-header {
    background-color: #ecedeb;
    color: #999082; }
    .a11y-high-c .FolderInfo.notAvailable .FolderInfo-header, .a11y-high-c .FolderInfo.notAvailable.option .FolderInfo-header {
      background-color: #ecedeb; }
    .a11y-high-c .FolderInfo.notAvailable .FolderInfo-header, .a11y-high-c .FolderInfo.notAvailable.option .FolderInfo-header {
      color: #7b7162; }
  .FolderInfo.option .FolderInfo-header {
    background-color: #e5f5f7;
    color: #0099b4; }
    .a11y-high-c .FolderInfo.option .FolderInfo-header {
      background-color: #fff; }
    .a11y-high-c .FolderInfo.option .FolderInfo-header {
      color: #007a89; }
  .FolderInfo.option .FolderInfo-addToCalendar .TextIcon.addToCalendar {
    color: #0099b4; }
    .a11y-high-c .FolderInfo.option .FolderInfo-addToCalendar .TextIcon.addToCalendar {
      color: #007a89; }
  .a11y-high-c .FolderInfo.option .FolderInfo-header {
    border-color: #ecedeb;
    border-bottom-width: 1px;
    border-bottom-style: solid; }
    .a11y-high-c .a11y-high-c .FolderInfo.option .FolderInfo-header {
      border-color: #ecedeb; }

.Travel {
  /**
       * PKM/DKM - Avant de prendre son train (ou apres)
       */ }
  .Travel-message {
    display: block; }
    @media only screen and (min-width: 40.063em) {
      .Travel-message {
        margin-top: 0;
        padding: 2.5rem 0 0; } }
    @media only screen and (min-width: 40.063em) {
      .Travel-message .alert-zone {
        display: flex;
        justify-content: center; } }
    .Travel-message-correspondance:not(:last-child) {
      margin-bottom: 1.25rem; }
  .Travel-message ~ .Travel-link {
    margin-top: 1.25rem; }
  @media print {
    .Travel-details {
      margin-top: 0; } }
  .Travel-details .timeline .Block {
    position: relative;
    padding-left: 1.875rem;
    padding-right: 0; }
    @media only screen and (min-width: 40.063em) {
      .Travel-details .timeline .Block {
        padding-left: 4.375rem; } }
    .Travel-details .timeline .Block::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 1.625rem;
      height: 100%;
      text-align: right; }
      @media only screen and (min-width: 40.063em) {
        .Travel-details .timeline .Block::before {
          margin-left: 2.5rem; } }
  .Travel-prepost {
    min-height: 115px;
    color: #000;
    padding: 0 1.25rem 0.625rem; }
    @media only screen and (min-width: 64.0625em), only screen and (min-width: 40.063em) and (max-width: 64em) {
      .Travel-prepost {
        min-height: 0;
        padding-bottom: 0; } }
    @media print {
      .Travel-prepost {
        display: none !important; } }
    .Travel-prepost-text {
      font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
      margin-bottom: 0.5625rem;
      padding-top: 0.25rem; }
      @media only screen and (min-width: 40.063em) {
        .Travel-prepost-text {
          font-size: 0.9375rem;
          margin-bottom: 0.75rem; } }
    .Travel-prepost.origin::before {
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='770'%3E%3Cg fill='%230099B4'%3E%3Cpath d='M14 27.9c-4-6.3-9.7-11-9.7-16.4S8.6 1.8 14 1.8s9.7 4.3 9.7 9.7c.1 5.4-6.4 10.4-9.7 16.4zm-.1-21.4c-2.6 0-4.6 2.1-4.6 4.6s2.1 4.6 4.6 4.6 4.6-2.1 4.6-4.6-2-4.6-4.6-4.6zM13.9 104c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.5 1-1 1zm0-5.2c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.5 1-1 1zm0-5.1c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.5 1-1 1zm0-5.1c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .5-.5 1-1 1zm0-5.2c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1-1 1zm0-5.1c-.5 0-1-.4-1-1V77c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1.1-1 1.1zm0-5.2c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1-1 1zm0-5.1c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .5-.4 1-1 1zm0-5.2c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1-1 1zm0-5.1c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .5-.4 1-1 1zm0-5.2c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1-1 1zm0-5.1c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1s1 .4 1 1v.2c0 .6-.4 1-1 1zm0-5.1c-.5 0-1-.4-1-1V41c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.5 1.1-1 1.1zm0-5.2c-.5 0-1-.4-1-1v-.3c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .7-.5 1.1-1 1.1zm0-5.1c-.5 0-1-.4-1-1v-.3c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.5 1.1-1 1.1zM13.9 181c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.5 1-1 1zM13.9 175.8c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.5 1-1 1zM13.9 170.7c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.5 1-1 1zM13.9 165.6c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .5-.5 1-1 1zM13.9 160.4c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1-1 1zM13.9 155.3c-.5 0-1-.4-1-1v-.3c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1.1-1 1.1zM13.9 150.1c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1-1 1zM13.9 145c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .5-.4 1-1 1zM13.9 139.8c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1-1 1zM13.9 134.7c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .5-.4 1-1 1zM13.9 129.5c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1-1 1zM13.9 124.4c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1s1 .4 1 1v.2c0 .6-.4 1-1 1zM13.9 119.3c-.5 0-1-.4-1-1v-.3c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.5 1.1-1 1.1zM13.9 114.1c-.5 0-1-.4-1-1v-.3c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .7-.5 1.1-1 1.1zM13.9 106.7c.5 0 1 .4 1 1v.2c0 .6-.5 1.1-1 1.1s-1-.4-1-1v-.3c0-.5.4-1 1-1M13.9 258c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.5 1-1 1zM13.9 252.8c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.5 1-1 1zM13.9 247.7c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.5 1-1 1zM13.9 242.6c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .5-.5 1-1 1zM13.9 237.4c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1-1 1zM13.9 232.3c-.5 0-1-.4-1-1v-.3c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1.1-1 1.1zM13.9 227.1c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1-1 1zM13.9 222c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .5-.4 1-1 1zM13.9 216.8c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1-1 1zM13.9 211.7c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .5-.4 1-1 1zM13.9 206.5c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1-1 1zM13.9 201.4c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1s1 .4 1 1v.2c0 .6-.4 1-1 1zM13.9 196.3c-.5 0-1-.4-1-1v-.3c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.5 1.1-1 1.1zM13.9 191.1c-.5 0-1-.4-1-1v-.3c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .7-.5 1.1-1 1.1zM13.9 183.7c.5 0 1 .4 1 1v.2c0 .6-.5 1.1-1 1.1s-1-.4-1-1v-.3c0-.5.4-1 1-1M13.9 268.1c-.5 0-1-.4-1-1v-.3c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .7-.5 1.1-1 1.1zM13.9 260.7c.5 0 1 .4 1 1v.2c0 .6-.5 1.1-1 1.1s-1-.4-1-1v-.3c0-.5.4-1 1-1M13.9 273c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.5 1-1 1zM13.9 350c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.5 1-1 1zM13.9 344.8c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.5 1-1 1zM13.9 339.7c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.5 1-1 1zM13.9 334.6c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .5-.5 1-1 1zM13.9 329.4c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1-1 1zM13.9 324.3c-.5 0-1-.4-1-1v-.3c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1.1-1 1.1zM13.9 319.1c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1-1 1zM13.9 314c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .5-.4 1-1 1zM13.9 308.8c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1-1 1zM13.9 303.7c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .5-.4 1-1 1zM13.9 298.5c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1-1 1zM13.9 293.4c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1s1 .4 1 1v.2c0 .6-.4 1-1 1zM13.9 288.3c-.5 0-1-.4-1-1v-.3c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.5 1.1-1 1.1zM13.9 283.1c-.5 0-1-.4-1-1v-.3c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .7-.5 1.1-1 1.1zM13.9 275.7c.5 0 1 .4 1 1v.2c0 .6-.5 1.1-1 1.1s-1-.4-1-1v-.3c0-.5.4-1 1-1M13.9 427c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.5 1-1 1zM13.9 421.8c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.5 1-1 1zM13.9 416.7c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.5 1-1 1zM13.9 411.6c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .5-.5 1-1 1zM13.9 406.4c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1-1 1zM13.9 401.3c-.5 0-1-.4-1-1v-.3c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1.1-1 1.1zM13.9 396.1c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1-1 1zM13.9 391c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .5-.4 1-1 1zM13.9 385.8c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1-1 1zM13.9 380.7c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .5-.4 1-1 1zM13.9 375.5c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1-1 1zM13.9 370.4c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1s1 .4 1 1v.2c0 .6-.4 1-1 1zM13.9 365.3c-.5 0-1-.4-1-1v-.3c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.5 1.1-1 1.1zM13.9 360.1c-.5 0-1-.4-1-1v-.3c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .7-.5 1.1-1 1.1zM13.9 352.7c.5 0 1 .4 1 1v.2c0 .6-.5 1.1-1 1.1s-1-.4-1-1v-.3c0-.5.4-1 1-1M13.9 437.1c-.5 0-1-.4-1-1v-.3c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .7-.5 1.1-1 1.1zM13.9 429.7c.5 0 1 .4 1 1v.2c0 .6-.5 1.1-1 1.1s-1-.4-1-1v-.3c0-.5.4-1 1-1M13.9 442c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.5 1-1 1zM13.9 519c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.5 1-1 1zM13.9 513.8c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.5 1-1 1zM13.9 508.7c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.5 1-1 1zM13.9 503.6c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .5-.5 1-1 1zM13.9 498.4c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1-1 1zM13.9 493.3c-.5 0-1-.4-1-1v-.3c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1.1-1 1.1zM13.9 488.1c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1-1 1zM13.9 483c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .5-.4 1-1 1zM13.9 477.8c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1-1 1zM13.9 472.7c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .5-.4 1-1 1zM13.9 467.5c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1-1 1zM13.9 462.4c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1s1 .4 1 1v.2c0 .6-.4 1-1 1zM13.9 457.3c-.5 0-1-.4-1-1v-.3c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.5 1.1-1 1.1zM13.9 452.1c-.5 0-1-.4-1-1v-.3c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .7-.5 1.1-1 1.1zM13.9 444.7c.5 0 1 .4 1 1v.2c0 .6-.5 1.1-1 1.1s-1-.4-1-1v-.3c0-.5.4-1 1-1M13.9 596c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.5 1-1 1zM13.9 590.8c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.5 1-1 1zM13.9 585.7c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.5 1-1 1zM13.9 580.6c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .5-.5 1-1 1zM13.9 575.4c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1-1 1zM13.9 570.3c-.5 0-1-.4-1-1v-.3c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1.1-1 1.1zM13.9 565.1c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1-1 1zM13.9 560c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .5-.4 1-1 1zM13.9 554.8c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1-1 1zM13.9 549.7c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .5-.4 1-1 1zM13.9 544.5c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1-1 1zM13.9 539.4c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1s1 .4 1 1v.2c0 .6-.4 1-1 1zM13.9 534.3c-.5 0-1-.4-1-1v-.3c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.5 1.1-1 1.1zM13.9 529.1c-.5 0-1-.4-1-1v-.3c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .7-.5 1.1-1 1.1zM13.9 521.7c.5 0 1 .4 1 1v.2c0 .6-.5 1.1-1 1.1s-1-.4-1-1v-.3c0-.5.4-1 1-1M13.9 606.1c-.5 0-1-.4-1-1v-.3c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .7-.5 1.1-1 1.1zM13.9 598.7c.5 0 1 .4 1 1v.2c0 .6-.5 1.1-1 1.1s-1-.4-1-1v-.3c0-.5.4-1 1-1M13.9 611c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.5 1-1 1zM13.9 688c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.5 1-1 1zM13.9 682.8c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.5 1-1 1zM13.9 677.7c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.5 1-1 1zM13.9 672.6c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .5-.5 1-1 1zM13.9 667.4c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1-1 1zM13.9 662.3c-.5 0-1-.4-1-1v-.3c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1.1-1 1.1zM13.9 657.1c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1-1 1zM13.9 652c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .5-.4 1-1 1zM13.9 646.8c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1-1 1zM13.9 641.7c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .5-.4 1-1 1zM13.9 636.5c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1-1 1zM13.9 631.4c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1s1 .4 1 1v.2c0 .6-.4 1-1 1zM13.9 626.3c-.5 0-1-.4-1-1v-.3c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.5 1.1-1 1.1zM13.9 621.1c-.5 0-1-.4-1-1v-.3c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .7-.5 1.1-1 1.1zM13.9 613.7c.5 0 1 .4 1 1v.2c0 .6-.5 1.1-1 1.1s-1-.4-1-1v-.3c0-.5.4-1 1-1M13.9 765c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.5 1-1 1zM13.9 759.8c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.5 1-1 1zM13.9 754.7c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.5 1-1 1zM13.9 749.6c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .5-.5 1-1 1zM13.9 744.4c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1-1 1zM13.9 739.3c-.5 0-1-.4-1-1v-.3c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1.1-1 1.1zM13.9 734.1c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1-1 1zM13.9 729c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .5-.4 1-1 1zM13.9 723.8c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1-1 1zM13.9 718.7c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .5-.4 1-1 1zM13.9 713.5c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1-1 1zM13.9 708.4c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1s1 .4 1 1v.2c0 .6-.4 1-1 1zM13.9 703.3c-.5 0-1-.4-1-1v-.3c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.5 1.1-1 1.1zM13.9 698.1c-.5 0-1-.4-1-1v-.3c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .7-.5 1.1-1 1.1zM13.9 690.7c.5 0 1 .4 1 1v.2c0 .6-.5 1.1-1 1.1s-1-.4-1-1v-.3c0-.5.4-1 1-1M13.9 767.7c.5 0 1 .4 1 1v.2c0 .6-.5 1.1-1 1.1s-1-.4-1-1v-.3c0-.5.4-1 1-1'/%3E%3C/g%3E%3C/svg%3E") top 0 right 0.1875rem no-repeat; }
    .Travel-prepost.destination {
      padding-bottom: 0;
      padding-top: 2.8125rem; }
      .Travel-prepost.destination::before {
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='106'%3E%3Cg fill='%230099B4'%3E%3Cpath d='M14 104.2c-4-6.3-9.7-11-9.7-16.4 0-5.3 4.3-9.7 9.7-9.7s9.7 4.3 9.7 9.7c.1 5.3-6.4 10.4-9.7 16.4zm-.1-21.4c-2.6 0-4.6 2.1-4.6 4.6s2.1 4.6 4.6 4.6 4.6-2.1 4.6-4.6-2-4.6-4.6-4.6zM13.7 76.1c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.5 1-1 1zm0-5.1c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .5-.4 1-1 1zm0-5.2c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1-1 1zm0-5.1c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .5-.4 1-1 1zm0-5.2c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1-1 1zm0-5.1c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .5-.4 1-1 1zm0-5.2c-.5 0-1-.4-1-1V44c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1-1 1zm0-5.1c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .5-.4 1-1 1zm0-5.2c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.3c0 .5-.4.9-1 .9zm0-5.1c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1-1 1zm0-5.2c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .6-.4 1-1 1zm0-5.1c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1s1 .4 1 1v.2c0 .6-.4 1-1 1zm0-5.1c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .5-.4 1-1 1zm0-5.2c-.5 0-1-.4-1-1v-.3c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .7-.4 1.1-1 1.1zm0-5.1c-.5 0-1-.4-1-1v-.2c0-.5.4-1 1-1 .5 0 1 .4 1 1v.2c0 .5-.4 1-1 1z'/%3E%3C/g%3E%3C/svg%3E") top -1.5625rem right 0.1875rem no-repeat; }
      @media only screen and (min-width: 64.0625em), only screen and (min-width: 40.063em) and (max-width: 64em) {
        .Travel-prepost.destination {
          padding-top: 3.75rem; }
          .Travel-prepost.destination::before {
            background-position: top -0.6875rem right 0.1875rem; } }
  .Travel.passed {
    display: flex;
    align-items: center; }
    .Travel.passed .hideIfPassed {
      display: none; }
    .Travel.passed .Travel-receiptMessage {
      flex: 1 1 0%;
      max-width: 17.5rem; }
    @media only screen and (min-width: 64.0625em), print {
      .Travel.passed.displayReceiptMessage .Travel-details {
        width: 56%; } }
    @media only screen and (min-width: 40.063em) and (max-width: 64em) {
      .Travel.passed.displayReceiptMessage .Travel-details {
        width: 46%; } }
  @media print {
    .Travel {
      page-break-inside: avoid;
      page-break-after: auto;
      page-break-before: auto;
      margin-bottom: 2.5rem; } }

.Segment {
  background-color: #fff;
  /**
   * Info avant de monter dans le train (ou apres)
   */
  /**
   * "Titre" du segment (origine ou destination) : horaire + gare du segment
   */
  /**
   * Details du segment (info train, placement, services...)
   */
  /**
   * Pictos segment
   */ }
  .Segment-outsideTrain::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1.625rem;
    height: 100%;
    text-align: right;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='76' viewBox='15.25 3.058 2.042 75.787'%3E%3Cpath d='M16.254 78.845a1 1 0 0 1-1-1v-.25a1 1 0 1 1 2 0v.25a1 1 0 0 1-1 1zm.008-5.258a1 1 0 0 1-1-1v-.25a1 1 0 1 1 2 0v.25c0 .554-.447 1-1 1zm.007-5.254a1 1 0 0 1-1-1v-.25a1 1 0 1 1 2 0v.25a1 1 0 0 1-1 1zm.007-5.255a1 1 0 0 1-1-1v-.25a1 1 0 1 1 2 0v.25a1 1 0 0 1-1 1zm.006-5.254a1 1 0 0 1-1-1v-.25a1 1 0 1 1 2 0v.25a1 1 0 0 1-1 1zm.004-5.253a1 1 0 0 1-1-1v-.25a1 1 0 0 1 2 0v.25a1 1 0 0 1-1 1zm.004-5.253a1 1 0 0 1-1-1v-.25a1 1 0 0 1 2 0v.25a1 1 0 0 1-1 1zm.002-5.254a1 1 0 0 1-1-1v-.25a1 1 0 0 1 2 0v.25a1 1 0 0 1-1 1zm0-5.252a1 1 0 0 1-1-1v-.25a1 1 0 0 1 2 0v.25a1 1 0 0 1-1 1zm0-5.252a1 1 0 0 1-1-1v-.25a1 1 0 0 1 2 0v.25c0 .552-.449 1-1 1zm-.002-5.249a1 1 0 0 1-1-1v-.249a1 1 0 0 1 2 0v.249a1 1 0 0 1-1 1zm-.005-5.25a1 1 0 0 1-1-1v-.25a1 1 0 0 1 2 0v.25a1 1 0 0 1-1 1zm-.007-5.251a1 1 0 0 1-1-1v-.25a1 1 0 0 1 2 0v.25a1 1 0 0 1-1 1zm-.011-5.251a1 1 0 0 1-1-.988l-.001-.262a1 1 0 0 1 2 0l.001.238a1.002 1.002 0 0 1-.988 1.012h-.012zm-.017-5.251a1 1 0 0 1-1-.988v-.262a1 1 0 0 1 2 0l.002.238a1.002 1.002 0 0 1-.988 1.012h-.014z' fill='%230099B4'/%3E%3C/svg%3E") top right 0.9375rem repeat-y;
    z-index: 1; }
  .Segment-outsideTrain.differentStation {
    position: relative; }
    .Segment-outsideTrain.differentStation::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 1.625rem;
      height: 100%;
      text-align: right;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='76' viewBox='15.25 3.058 2.042 75.787'%3E%3Cpath d='M16.254 78.845a1 1 0 0 1-1-1v-.25a1 1 0 1 1 2 0v.25a1 1 0 0 1-1 1zm.008-5.258a1 1 0 0 1-1-1v-.25a1 1 0 1 1 2 0v.25c0 .554-.447 1-1 1zm.007-5.254a1 1 0 0 1-1-1v-.25a1 1 0 1 1 2 0v.25a1 1 0 0 1-1 1zm.007-5.255a1 1 0 0 1-1-1v-.25a1 1 0 1 1 2 0v.25a1 1 0 0 1-1 1zm.006-5.254a1 1 0 0 1-1-1v-.25a1 1 0 1 1 2 0v.25a1 1 0 0 1-1 1zm.004-5.253a1 1 0 0 1-1-1v-.25a1 1 0 0 1 2 0v.25a1 1 0 0 1-1 1zm.004-5.253a1 1 0 0 1-1-1v-.25a1 1 0 0 1 2 0v.25a1 1 0 0 1-1 1zm.002-5.254a1 1 0 0 1-1-1v-.25a1 1 0 0 1 2 0v.25a1 1 0 0 1-1 1zm0-5.252a1 1 0 0 1-1-1v-.25a1 1 0 0 1 2 0v.25a1 1 0 0 1-1 1zm0-5.252a1 1 0 0 1-1-1v-.25a1 1 0 0 1 2 0v.25c0 .552-.449 1-1 1zm-.002-5.249a1 1 0 0 1-1-1v-.249a1 1 0 0 1 2 0v.249a1 1 0 0 1-1 1zm-.005-5.25a1 1 0 0 1-1-1v-.25a1 1 0 0 1 2 0v.25a1 1 0 0 1-1 1zm-.007-5.251a1 1 0 0 1-1-1v-.25a1 1 0 0 1 2 0v.25a1 1 0 0 1-1 1zm-.011-5.251a1 1 0 0 1-1-.988l-.001-.262a1 1 0 0 1 2 0l.001.238a1.002 1.002 0 0 1-.988 1.012h-.012zm-.017-5.251a1 1 0 0 1-1-.988v-.262a1 1 0 0 1 2 0l.002.238a1.002 1.002 0 0 1-.988 1.012h-.014z' fill='%23D97201'/%3E%3C/svg%3E");
      z-index: 1; }
  .Segment-outsideTrain.boardingConditions {
    color: #999082;
    padding-top: 2.1875rem;
    padding-left: 3.75rem;
    padding-bottom: 1.875rem; }
    .a11y-high-c .Segment-outsideTrain.boardingConditions {
      color: #7b7162; }
    .Segment-outsideTrain.boardingConditions.sameStation, .Segment-outsideTrain.boardingConditions.differentStation {
      padding-top: 0; }
    @media only screen and (min-width: 40.063em) {
      .Segment-outsideTrain.boardingConditions {
        padding-top: 1.875rem;
        padding-left: 6.25rem;
        padding-bottom: 1.5625rem; } }
    @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
      .Segment-outsideTrain.boardingConditions oui-message {
        width: 22.5rem;
        height: 4.8125rem; } }
  .Segment-outsideTrain.connection {
    color: #0099b4;
    padding: 1.875rem;
    background: none;
    z-index: 1;
    position: relative; }
    .a11y-high-c .Segment-outsideTrain.connection {
      color: #007a89; }
    @media only screen and (min-width: 40.063em) {
      .Segment-outsideTrain.connection {
        margin-left: 2.5rem; } }
    .Segment-outsideTrain.connection.differentStation {
      padding-left: 0;
      padding-right: 0; }
  .Segment-title {
    padding: 0 0 0 1.875rem;
    min-height: 1.1875rem; }
    .Segment-title::before {
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='100'%3E%3Cpath stroke='%23aeb0af' stroke-width='3' d='M0 0v100'/%3E%3C/svg%3E") top 0.625rem right 0.9375rem no-repeat; }
    .Segment-title.destination::before {
      background-position: bottom 0.625rem right 0.9375rem; }
    .Segment-title.destination .Title {
      align-items: flex-end; }
    .Segment-title .Title {
      display: flex;
      position: relative; }
      @media only screen and (min-width: 40.063em) {
        .Segment-title .Title {
          align-items: center; } }
    .Segment-title.disrupted {
      overflow: hidden; }
      .Segment-title.disrupted::before {
        bottom: 0;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='76' viewBox='15.25 3.058 2.042 75.787'%3E%3Cpath d='M16.254 78.845a1 1 0 0 1-1-1v-.25a1 1 0 1 1 2 0v.25a1 1 0 0 1-1 1zm.008-5.258a1 1 0 0 1-1-1v-.25a1 1 0 1 1 2 0v.25c0 .554-.447 1-1 1zm.007-5.254a1 1 0 0 1-1-1v-.25a1 1 0 1 1 2 0v.25a1 1 0 0 1-1 1zm.007-5.255a1 1 0 0 1-1-1v-.25a1 1 0 1 1 2 0v.25a1 1 0 0 1-1 1zm.006-5.254a1 1 0 0 1-1-1v-.25a1 1 0 1 1 2 0v.25a1 1 0 0 1-1 1zm.004-5.253a1 1 0 0 1-1-1v-.25a1 1 0 0 1 2 0v.25a1 1 0 0 1-1 1zm.004-5.253a1 1 0 0 1-1-1v-.25a1 1 0 0 1 2 0v.25a1 1 0 0 1-1 1zm.002-5.254a1 1 0 0 1-1-1v-.25a1 1 0 0 1 2 0v.25a1 1 0 0 1-1 1zm0-5.252a1 1 0 0 1-1-1v-.25a1 1 0 0 1 2 0v.25a1 1 0 0 1-1 1zm0-5.252a1 1 0 0 1-1-1v-.25a1 1 0 0 1 2 0v.25c0 .552-.449 1-1 1zm-.002-5.249a1 1 0 0 1-1-1v-.249a1 1 0 0 1 2 0v.249a1 1 0 0 1-1 1zm-.005-5.25a1 1 0 0 1-1-1v-.25a1 1 0 0 1 2 0v.25a1 1 0 0 1-1 1zm-.007-5.251a1 1 0 0 1-1-1v-.25a1 1 0 0 1 2 0v.25a1 1 0 0 1-1 1zm-.011-5.251a1 1 0 0 1-1-.988l-.001-.262a1 1 0 0 1 2 0l.001.238a1.002 1.002 0 0 1-.988 1.012h-.012zm-.017-5.251a1 1 0 0 1-1-.988v-.262a1 1 0 0 1 2 0l.002.238a1.002 1.002 0 0 1-.988 1.012h-.014z' fill='%230099B4'/%3E%3C/svg%3E");
        background-position: 0.5625rem 0%;
        top: 1.25rem !important; }
    .Segment-title.disruptedOrangeDot::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='76' viewBox='15.25 3.058 2.042 75.787'%3E%3Cpath d='M16.254 78.845a1 1 0 0 1-1-1v-.25a1 1 0 1 1 2 0v.25a1 1 0 0 1-1 1zm.008-5.258a1 1 0 0 1-1-1v-.25a1 1 0 1 1 2 0v.25c0 .554-.447 1-1 1zm.007-5.254a1 1 0 0 1-1-1v-.25a1 1 0 1 1 2 0v.25a1 1 0 0 1-1 1zm.007-5.255a1 1 0 0 1-1-1v-.25a1 1 0 1 1 2 0v.25a1 1 0 0 1-1 1zm.006-5.254a1 1 0 0 1-1-1v-.25a1 1 0 1 1 2 0v.25a1 1 0 0 1-1 1zm.004-5.253a1 1 0 0 1-1-1v-.25a1 1 0 0 1 2 0v.25a1 1 0 0 1-1 1zm.004-5.253a1 1 0 0 1-1-1v-.25a1 1 0 0 1 2 0v.25a1 1 0 0 1-1 1zm.002-5.254a1 1 0 0 1-1-1v-.25a1 1 0 0 1 2 0v.25a1 1 0 0 1-1 1zm0-5.252a1 1 0 0 1-1-1v-.25a1 1 0 0 1 2 0v.25a1 1 0 0 1-1 1zm0-5.252a1 1 0 0 1-1-1v-.25a1 1 0 0 1 2 0v.25c0 .552-.449 1-1 1zm-.002-5.249a1 1 0 0 1-1-1v-.249a1 1 0 0 1 2 0v.249a1 1 0 0 1-1 1zm-.005-5.25a1 1 0 0 1-1-1v-.25a1 1 0 0 1 2 0v.25a1 1 0 0 1-1 1zm-.007-5.251a1 1 0 0 1-1-1v-.25a1 1 0 0 1 2 0v.25a1 1 0 0 1-1 1zm-.011-5.251a1 1 0 0 1-1-.988l-.001-.262a1 1 0 0 1 2 0l.001.238a1.002 1.002 0 0 1-.988 1.012h-.012zm-.017-5.251a1 1 0 0 1-1-.988v-.262a1 1 0 0 1 2 0l.002.238a1.002 1.002 0 0 1-.988 1.012h-.014z' fill='%23D97201'/%3E%3C/svg%3E"); }
    .Segment-title.disruptedLast::before {
      bottom: 0;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='76' viewBox='15.25 3.058 2.042 75.787'%3E%3Cpath d='M16.254 78.845a1 1 0 0 1-1-1v-.25a1 1 0 1 1 2 0v.25a1 1 0 0 1-1 1zm.008-5.258a1 1 0 0 1-1-1v-.25a1 1 0 1 1 2 0v.25c0 .554-.447 1-1 1zm.007-5.254a1 1 0 0 1-1-1v-.25a1 1 0 1 1 2 0v.25a1 1 0 0 1-1 1zm.007-5.255a1 1 0 0 1-1-1v-.25a1 1 0 1 1 2 0v.25a1 1 0 0 1-1 1zm.006-5.254a1 1 0 0 1-1-1v-.25a1 1 0 1 1 2 0v.25a1 1 0 0 1-1 1zm.004-5.253a1 1 0 0 1-1-1v-.25a1 1 0 0 1 2 0v.25a1 1 0 0 1-1 1zm.004-5.253a1 1 0 0 1-1-1v-.25a1 1 0 0 1 2 0v.25a1 1 0 0 1-1 1zm.002-5.254a1 1 0 0 1-1-1v-.25a1 1 0 0 1 2 0v.25a1 1 0 0 1-1 1zm0-5.252a1 1 0 0 1-1-1v-.25a1 1 0 0 1 2 0v.25a1 1 0 0 1-1 1zm0-5.252a1 1 0 0 1-1-1v-.25a1 1 0 0 1 2 0v.25c0 .552-.449 1-1 1zm-.002-5.249a1 1 0 0 1-1-1v-.249a1 1 0 0 1 2 0v.249a1 1 0 0 1-1 1zm-.005-5.25a1 1 0 0 1-1-1v-.25a1 1 0 0 1 2 0v.25a1 1 0 0 1-1 1zm-.007-5.251a1 1 0 0 1-1-1v-.25a1 1 0 0 1 2 0v.25a1 1 0 0 1-1 1zm-.011-5.251a1 1 0 0 1-1-.988l-.001-.262a1 1 0 0 1 2 0l.001.238a1.002 1.002 0 0 1-.988 1.012h-.012zm-.017-5.251a1 1 0 0 1-1-.988v-.262a1 1 0 0 1 2 0l.002.238a1.002 1.002 0 0 1-.988 1.012h-.014z' fill='%230099B4'/%3E%3C/svg%3E") bottom 0 right 0.9375rem no-repeat; }
  .Segment-hour, .Segment-station {
    display: inline-block;
    /* pour vieux navigateurs ne supportant pas display:flex */
    font-family: AvenirHeavy, Arial, Helvetica, sans-serif; }
  .Segment-hour {
    color: #000;
    min-width: 3.0625rem;
    font-size: 0.875rem; }
    .first .origin .Segment-hour,
    .last .destination .Segment-hour {
      font-size: 1rem; }
  .Segment-station {
    font-size: 0.875rem;
    color: #000; }
    .first .origin .Segment-station,
    .last .destination .Segment-station {
      font-size: 1rem; }
  .timeline .Segment-details.Block {
    padding-left: 5rem;
    padding-top: 0;
    padding-bottom: 2.1875rem; }
    @media only screen and (min-width: 40.063em) {
      .timeline .Segment-details.Block {
        padding-left: 4.375rem; } }
    @media only screen and (min-width: 40.063em), print {
      .timeline .Segment-details.Block {
        padding-bottom: 2.8125rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between; } }
  .Segment-details::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='100'%3E%3Cpath stroke='%23aeb0af' stroke-width='3' d='M0 0v100'/%3E%3C/svg%3E") top right 0.9375rem repeat-y; }
  .Segment-train {
    color: #999082;
    padding-top: 0.125rem; }
    .a11y-high-c .Segment-train {
      color: #7b7162; }
    @media only screen and (min-width: 40.063em), print {
      .Segment-train {
        padding-bottom: 0;
        flex-basis: 100%; } }
    .Segment-train-comfortClass {
      display: inline-block; }
    .Segment-train-info {
      display: flex;
      align-items: center;
      margin-left: -0.375rem; }
      .Segment-train-info.valid {
        color: #209e67; }
        .a11y-high-c .Segment-train-info.valid {
          color: #1f7d63; }
  @media only screen and (min-width: 64.0625em) {
    .Segment-trip {
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      flex-basis: 31.875rem; } }
  .Segment-disruptionInfos {
    padding-top: 0.9375rem; }
    @media only screen and (min-width: 64.0625em) {
      .Segment-disruptionInfos {
        padding-top: 1.25rem; } }
    @media only screen and (min-width: 64.0625em) {
      .Segment-disruptionInfos-link {
        display: block; } }
    .Segment-disruptionInfos-link a {
      color: #d97201; }
      .a11y-high-c .Segment-disruptionInfos-link a {
        color: #bb4a00; }
  .Segment-onBoard {
    padding-top: 2.1875rem; }
    @media only screen and (min-width: 40.063em) and (max-width: 64em) {
      .Segment-onBoard {
        padding-top: 1.25rem; } }
    @media only screen and (min-width: 64.0625em) {
      .Segment-onBoard {
        padding-top: 2.8125rem;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        flex-basis: 31.875rem; } }
  .Segment-duration {
    color: #999082;
    font-family: AvenirMedium, Arial, Helvetica, sans-serif;
    min-width: 3.875rem;
    margin: 0; }
    .a11y-high-c .Segment-duration {
      color: #7b7162; }
    @media only screen and (min-width: 40.063em) and (max-width: 64em), print {
      .Segment-duration {
        margin-top: 0; } }
    @media only screen and (min-width: 40.063em), print {
      .Segment-duration {
        margin-right: 0.625rem;
        padding-top: 1.125rem; }
        .noServices .Segment-duration {
          margin-top: 0;
          margin-bottom: 0; } }
    .Segment-duration .Segment-icon {
      margin-right: 0; }
  .Segment-newrest {
    margin-top: 1.25rem;
    flex-basis: 100%; }
  .Segment-services {
    margin-top: 0.9375rem; }
    @media only screen and (min-width: 64.0625em), print {
      .Segment-services {
        margin-top: 0;
        flex-basis: 26.25rem; } }
  .Segment-optionalServices {
    display: flex;
    flex-direction: column;
    align-items: flex-start; }
    @media only screen and (min-width: 64.0625em) {
      .Segment-optionalServices {
        flex-direction: row;
        align-items: center; } }
    .Segment-optionalServices-list {
      margin-bottom: 0.625rem; }
      @media only screen and (min-width: 64.0625em) {
        .Segment-optionalServices-list {
          margin-bottom: 0; } }
    .Segment-optionalServices-link {
      margin-left: 0.625rem; }
      .Segment-optionalServices-link a {
        color: #e5006d; }
        .a11y-high-c .Segment-optionalServices-link a {
          color: #af0158; }
      @media only screen and (min-width: 40.063em), print {
        .Segment-optionalServices-link {
          text-align: center;
          padding-top: 1.25rem; } }
    @media only screen and (min-width: 64.0625em), print {
      .Segment-optionalServices-list + .Segment-optionalServices-link {
        flex-basis: 4.375rem;
        padding-top: 0; } }
  .Segment-includedServices + .Segment-optionalServices {
    margin-top: 0.625rem; }
  .Segment-includedServices, .Segment-optionalServices {
    margin-left: -0.625rem; }
    @media only screen and (min-width: 40.063em), print {
      .Segment-includedServices, .Segment-optionalServices {
        margin-left: 0; } }
  .Segment-icon.carrierType {
    display: none;
    position: absolute;
    left: 0.625rem;
    top: -0.3125rem;
    height: 1.875rem;
    width: 1.875rem;
    color: #999082;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 0; }
    @media only screen and (min-width: 40.063em) {
      .Segment-icon.carrierType {
        display: block;
        left: -4.1875rem; } }
  .Segment-icon.inText {
    width: 1.3125rem;
    height: 1.3125rem;
    margin-right: 0.1875rem;
    margin-bottom: 0.0625rem; }
  .Segment-icon.station {
    color: #999082;
    position: absolute;
    top: 0;
    left: -1.875rem;
    height: 1.25rem;
    width: 1.25rem;
    fill: currentColor;
    stroke: none; }
    .a11y-high-c .Segment-icon.station {
      color: #7b7162; }
    .first .origin .Segment-icon.station,
    .last .destination .Segment-icon.station {
      stroke: currentColor;
      stroke-width: 3; }
    .destination .Segment-icon.station {
      bottom: 0; }
  .Segment-icon.connection {
    position: absolute;
    fill: currentColor;
    stroke: currentColor;
    z-index: 2; }
    .Segment-icon.connection.sameStation {
      margin-left: -1.625rem;
      margin-top: 0.125rem;
      height: 0.75rem;
      width: 0.75rem;
      stroke-width: 2;
      background-color: #fff; }
    .Segment-icon.connection.differentStation {
      margin-left: -2.5rem;
      margin-top: 0.375rem;
      width: 1.5625rem;
      height: 1.5625rem;
      stroke-width: 0;
      z-index: 2; }
  .Segment-disrupted-connection {
    margin-right: 0.375rem; }
  .Segment.last .destination .Segment-train-info,
  .Segment.first .origin .Segment-train-info {
    margin-left: -0.25rem; }
  @media print {
    .Segment-title::before {
      background: none; }
    .Segment-outsideTrain::before {
      background: none; }
    .Segment-outsideTrain.connection::before, .Segment-outsideTrain.connection.differentStation::before {
      background: none !important; }
    .timeline .Segment-details.Block {
      display: flex; }
    .Segment-details::before {
      background: none; }
    .Segment-icon.station, .Segment-icon.connection {
      display: none !important; } }

.passed .Segment-outsideTrain {
  padding: 1rem; }
  .passed .Segment-outsideTrain.connection::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='76' viewBox='15.25 3.058 2.042 75.787'%3E%3Cpath d='M16.254 78.845a1 1 0 0 1-1-1v-.25a1 1 0 1 1 2 0v.25a1 1 0 0 1-1 1zm.008-5.258a1 1 0 0 1-1-1v-.25a1 1 0 1 1 2 0v.25c0 .554-.447 1-1 1zm.007-5.254a1 1 0 0 1-1-1v-.25a1 1 0 1 1 2 0v.25a1 1 0 0 1-1 1zm.007-5.255a1 1 0 0 1-1-1v-.25a1 1 0 1 1 2 0v.25a1 1 0 0 1-1 1zm.006-5.254a1 1 0 0 1-1-1v-.25a1 1 0 1 1 2 0v.25a1 1 0 0 1-1 1zm.004-5.253a1 1 0 0 1-1-1v-.25a1 1 0 0 1 2 0v.25a1 1 0 0 1-1 1zm.004-5.253a1 1 0 0 1-1-1v-.25a1 1 0 0 1 2 0v.25a1 1 0 0 1-1 1zm.002-5.254a1 1 0 0 1-1-1v-.25a1 1 0 0 1 2 0v.25a1 1 0 0 1-1 1zm0-5.252a1 1 0 0 1-1-1v-.25a1 1 0 0 1 2 0v.25a1 1 0 0 1-1 1zm0-5.252a1 1 0 0 1-1-1v-.25a1 1 0 0 1 2 0v.25c0 .552-.449 1-1 1zm-.002-5.249a1 1 0 0 1-1-1v-.249a1 1 0 0 1 2 0v.249a1 1 0 0 1-1 1zm-.005-5.25a1 1 0 0 1-1-1v-.25a1 1 0 0 1 2 0v.25a1 1 0 0 1-1 1zm-.007-5.251a1 1 0 0 1-1-1v-.25a1 1 0 0 1 2 0v.25a1 1 0 0 1-1 1zm-.011-5.251a1 1 0 0 1-1-.988l-.001-.262a1 1 0 0 1 2 0l.001.238a1.002 1.002 0 0 1-.988 1.012h-.012zm-.017-5.251a1 1 0 0 1-1-.988v-.262a1 1 0 0 1 2 0l.002.238a1.002 1.002 0 0 1-.988 1.012h-.014z' fill='%23999082'/%3E%3C/svg%3E"); }
  .passed .Segment-outsideTrain::before, .passed .Segment-outsideTrain::after {
    background-image: none; }

/*
Placement

Informations concernant le placement et les espaces de confort.

Styleguide 13
*/
/*
Placement siège

Markup: placement-coach-seat.hbs

Styleguide 13.1
*/
/*
Placement couchette

Markup: placement-coach-bed.hbs

Styleguide 13.2
*/
/*
Sans place attribuée

Markup: placement-coach-noPlacement.hbs

Styleguide 13.3
*/
/*
Espace de confort

Markup: placement-spaceComfort.hbs

Styleguide 13.4
*/
/*
Compartiment sans picto

Markup: placement-compartment.hbs

Styleguide 13.5
*/
/*
Compartiment avec picto

Markup: placement-compartment.withIcon.hbs

Styleguide 13.6
*/
.Placement {
  margin: 1.25rem 0 0;
  text-align: left;
  line-height: 1.4;
  /* compartiments (dame seule, espace privatif, etc.) */
  /* Espaces */
  /* picto placement */
  /* voiture */ }
  .Placement-ouibus {
    display: inline-block; }
  @media only screen and (min-width: 40.063em), print {
    .Placement {
      margin: 0;
      max-width: 19.0625rem;
      min-width: 14.1875rem; } }
  .Placement-compartment {
    margin: 0 auto 0.9375rem; }
    @media only screen and (min-width: 64.0625em), print {
      .Placement-compartment {
        margin-left: 0.625rem;
        margin-bottom: 1.5625rem; } }
    .Placement-compartment-title {
      display: flex; }
      .Placement-compartment-title-label {
        color: #0099b4;
        font-size: 1rem; }
        .a11y-high-c .Placement-compartment-title-label {
          color: #007a89; }
    .Placement-compartment span::first-letter {
      text-transform: capitalize; }
    .Placement-compartment-description {
      color: #999082; }
      .a11y-high-c .Placement-compartment-description {
        color: #7b7162; }
    @media only screen and (min-width: 64.0625em), print {
      .Placement-compartment.withIcon {
        margin-left: 0; } }
    .Placement-compartment.withIcon .Placement-compartment-title {
      position: relative;
      left: -2.25rem;
      font-size: 1rem; }
      @media only screen and (min-width: 64.0625em) {
        .Placement-compartment.withIcon .Placement-compartment-title {
          left: 0; } }
      .Placement-compartment.withIcon .Placement-compartment-title-icon {
        fill: #0099b4;
        position: relative;
        top: -0.3125rem;
        width: 1.875rem;
        height: 1.875rem;
        margin-right: 0.25rem;
        margin-bottom: -0.3125rem; }
        .a11y-high-c .Placement-compartment.withIcon .Placement-compartment-title-icon {
          fill: #007a89; }
        @media only screen and (min-width: 64.0625em), print {
          .Placement-compartment.withIcon .Placement-compartment-title-icon {
            margin-right: 0.1875rem; } }
  .Placement-spaceComfort {
    margin: 0 auto 0.9375rem; }
    @media only screen and (min-width: 64.0625em) {
      .Placement-spaceComfort {
        margin-bottom: 1.5625rem; } }
    .Placement-spaceComfort-title {
      position: relative;
      left: -2.25rem;
      font-size: 1rem; }
      @media only screen and (min-width: 64.0625em) {
        .Placement-spaceComfort-title {
          left: 0; } }
      .Placement-spaceComfort-title-icon {
        fill: #0099b4;
        position: relative;
        top: 0.625rem;
        width: 1.875rem;
        height: 1.875rem;
        margin-bottom: -0.3125rem; }
        .a11y-high-c .Placement-spaceComfort-title-icon {
          fill: #007a89; }
      .Placement-spaceComfort-title-label {
        color: #0099b4;
        margin-left: 0.3125rem; }
        .a11y-high-c .Placement-spaceComfort-title-label {
          color: #007a89; }
    .Placement-spaceComfort-description {
      color: #999082; }
      .a11y-high-c .Placement-spaceComfort-description {
        color: #7b7162; }
      @media only screen and (min-width: 64.0625em) {
        .Placement-spaceComfort-description {
          padding-left: 2.1875rem; } }
  .Placement-icon {
    display: inline-block; }
    @media only screen and (min-width: 64.0625em) {
      .Placement-icon {
        width: 2.1875rem;
        text-align: right; } }
    .Placement-icon svg {
      fill: #999082;
      width: 2.0625rem;
      height: 2.0625rem;
      vertical-align: top;
      margin: -0.5rem 0 -0.625rem -0.625rem; }
      .a11y-high-c .Placement-icon svg {
        fill: #7b7162; }
      @media only screen and (min-width: 64.0625em) {
        .Placement-icon svg {
          margin-left: 0; } }
    @media only screen and (min-width: 64.0625em) {
      .Placement-icon.bed-full {
        margin-left: 0.625rem; } }
    .Placement-icon.bed-full svg {
      width: 1.5rem;
      margin: -0.3125rem 0.625rem 0 0;
      height: 1.5rem; }
    .Placement-icon.noPlacement {
      fill: #999082;
      width: 2.0625rem;
      height: 2.0625rem;
      margin: -0.5rem 0 -0.625rem -0.625rem; }
      .a11y-high-c .Placement-icon.noPlacement {
        fill: #7b7162; }
      @media only screen and (min-width: 64.0625em) {
        .Placement-icon.noPlacement {
          margin-left: 0; } }
  .Placement-noCoach > * {
    vertical-align: middle; }
  .Placement-coach {
    padding-bottom: 0.625rem; }
    .Placement-coach > * {
      vertical-align: middle; }
    .Placement-coach:last-child {
      padding-bottom: 0; }
    @media only screen and (min-width: 64.0625em) {
      .Placement-coach {
        display: flex; } }
  .Placement-ouiBusInfos a {
    color: inherit; }
  .Placement-coachNumber {
    white-space: nowrap; }
    @media only screen and (min-width: 64.0625em) {
      .Placement-coachNumber {
        padding-right: 0.25rem; } }
  .Placement-important {
    color: #000;
    font-family: AvenirHeavy, Arial, Helvetica, sans-serif; }
    .Placement-important.ouibus {
      font-weight: bold; }
  @media only screen and (min-width: 64.0625em) {
    .Placement {
      display: block;
      margin-left: 0; } }
  .Placement.wide {
    display: block;
    margin: 0.625rem auto;
    max-width: 85%;
    padding-right: 0;
    border-right: 0; }
    .Placement.wide .Placement-coach,
    .Placement.wide .Placement-noCoach,
    .Placement.wide .Placement-ouiBusInfos,
    .Placement.wide .Placement-coachFull,
    .Placement.wide .Placement-compartment,
    .Placement.wide .Placement-spaceComfort {
      display: block;
      text-align: center; }
    .Placement.wide .Placement-compartment-title {
      justify-content: center;
      position: relative;
      left: 0; }
    .Placement.wide .Placement-spaceComfort-title {
      left: 0; }
      .Placement.wide .Placement-spaceComfort-title-icon {
        padding-bottom: 0.625rem; }
  @media only screen and (min-width: 64.0625em) {
    .Placement.ouigo .Placement-compartment {
      margin-left: 0.6875rem; } }
  .Placement.ouigo .Placement-compartment-label {
    white-space: normal; }
  .Placement.ouigo .Placement-noCoach {
    color: #999082;
    line-height: 1.5; }
    .a11y-high-c .Placement.ouigo .Placement-noCoach {
      color: #7b7162; }
    @media only screen and (min-width: 64.0625em) {
      .Placement.ouigo .Placement-noCoach {
        margin-left: 0.6875rem; } }

.OriginDestination svg {
  margin-left: 0.375rem;
  margin-right: 0.375rem; }
  @media only screen and (min-width: 40.063em), print {
    .OriginDestination svg {
      margin-left: 0.625rem;
      margin-right: 0.625rem; } }

.OriginDestination.passed {
  font-family: AvenirHeavy, Arial, Helvetica, sans-serif;
  font-size: 20px; }

@media only screen and (min-width: 40.063em), print {
  .OriginDestination.cancellation {
    display: block; } }

.OriginDestination.cancellation svg {
  margin-right: 0; }

.OriginDestination.cancellation span {
  max-width: 10rem;
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: middle; }
  @media only screen and (min-width: 40.063em), print {
    .OriginDestination.cancellation span {
      display: inline-block;
      max-width: none;
      width: auto;
      overflow: visible; } }

/* delivery mode */
/*
DeliveryMode

Ces styles peuvent être appliqués grâce à la class `.DeliveryMode` sur un élément `<div>`.

Informations concernant un mode de retrait.

Markup: deliveryMode.hbs

.tkd        - Spécificités liées au mode de retrait TKD (billet imprimé)
.digital    - Spécificités liées au mode de retrait DIGITAL (TER regionaux)
.ouigo      - Spécificités liées au mode de retrait OUIGO

Styleguide 14
*/
.DeliveryMode {
  margin-top: 1.25rem; }
  @media only screen and (min-width: 40.063em), print {
    .DeliveryMode {
      margin-top: 0;
      padding: 1.5625rem 1.25rem; } }
  @media print {
    .DeliveryMode {
      padding: 0 !important; } }
  .DeliveryMode p {
    line-height: 1.4;
    margin-bottom: 1.25rem; }
    .DeliveryMode p:last-child {
      margin-bottom: 0; }
  .DeliveryMode-title {
    display: block;
    margin-top: 0.3125rem;
    margin-bottom: 0.625rem;
    font-size: 1.25rem;
    color: #000;
    font-family: AvenirRoman, AvenirBook, Arial, Helvetica, sans-serif; }
    @media only screen and (min-width: 40.063em), print {
      .DeliveryMode-title {
        display: flex;
        justify-content: flex-start;
        margin-bottom: 0.375rem; } }
    .DeliveryMode-title-icon {
      display: none; }
      @media only screen and (min-width: 40.063em), print {
        .DeliveryMode-title-icon {
          display: block;
          margin-right: 0.4375rem; }
          .DeliveryMode-title-icon svg {
            width: 1.875rem;
            height: 1.875rem; } }
    .DeliveryMode-title-text {
      text-align: center;
      margin-top: 0.1875rem; }
      @media only screen and (min-width: 40.063em), print {
        .DeliveryMode-title-text {
          text-align: left; } }
    .DeliveryMode-title-info {
      margin: 0;
      font-family: AvenirRoman, AvenirBook, Arial, Helvetica, sans-serif;
      font-weight: normal;
      font-size: 1.25rem;
      text-align: center; }
      @media only screen and (min-width: 40.063em) {
        .DeliveryMode-title-info {
          text-align: left;
          font-size: 1.5rem; } }
  .DeliveryMode-description {
    color: #000; }
  .DeliveryMode-solutions {
    display: flex;
    flex-direction: column; }
    .DeliveryMode-solutions-item-icon {
      margin-right: 0.4375rem; }
      .DeliveryMode-solutions-item-icon svg {
        width: 2.5rem;
        height: 2.5rem; }
    .DeliveryMode-solutions-button {
      margin: auto; }
  .DeliveryMode-information + .DeliveryMode-solutions {
    margin-top: 1.25rem; }
  .DeliveryMode-item {
    padding: 1.25rem 0 0;
    flex: 1 1 0%; }
    .DeliveryMode-item.print {
      max-width: 13.125rem;
      text-align: left;
      align-self: center; }
  .DeliveryMode-tip {
    color: #d97201;
    margin-top: 1.25rem; }
    .a11y-high-c .DeliveryMode-tip {
      color: #bb4a00; }
  .DeliveryMode-receipt {
    display: block;
    margin-top: 0.5rem;
    text-align: center; }
    .DeliveryMode-receipt a {
      margin-top: 1.25rem; }
  .DeliveryMode-receiptInfo {
    margin-top: 1.375rem; }
  @media only screen and (min-width: 40.063em), print {
    .DeliveryMode-solutions {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin-top: 1.25rem; }
    .DeliveryMode-item {
      min-width: 12.5rem;
      padding: 0; } }
  @media only screen and (min-width: 40.063em) and (min-width: 40.063em) and (max-width: 64em) {
    .DeliveryMode-item {
      min-width: 10rem; } }
  @media only screen and (min-width: 40.063em), print {
      .DeliveryMode-item.print {
        margin-left: 1.25rem;
        max-width: inherit; } }

.DeliveryMode.tkd .DeliveryMode-title, .DeliveryMode.tkd .DeliveryMode-description,
.DeliveryMode.tkouibus .DeliveryMode-title,
.DeliveryMode.tkouibus .DeliveryMode-description {
  display: none; }

.DeliveryMode.tkd .DeliveryMode-solutions,
.DeliveryMode.tkouibus .DeliveryMode-solutions {
  align-self: center; }
  .DeliveryMode.tkd .DeliveryMode-solutions .notFid .tkdMobileApp,
  .DeliveryMode.tkouibus .DeliveryMode-solutions .notFid .tkdMobileApp {
    flex: 1; }
  .DeliveryMode.tkd .DeliveryMode-solutions .notFid .tkdPrint,
  .DeliveryMode.tkouibus .DeliveryMode-solutions .notFid .tkdPrint {
    text-align: center; }
  .DeliveryMode.tkd .DeliveryMode-solutions .semiFid .tkdCard,
  .DeliveryMode.tkouibus .DeliveryMode-solutions .semiFid .tkdCard {
    flex: 1.2; }
    .DeliveryMode.tkd .DeliveryMode-solutions .semiFid .tkdCard .DeliveryMode-solutions-item-text,
    .DeliveryMode.tkouibus .DeliveryMode-solutions .semiFid .tkdCard .DeliveryMode-solutions-item-text {
      max-width: 12.5rem; }
  .DeliveryMode.tkd .DeliveryMode-solutions .semiFid .tkdPrint button,
  .DeliveryMode.tkouibus .DeliveryMode-solutions .semiFid .tkdPrint button {
    margin-top: 0.625rem; }
  .DeliveryMode.tkd .DeliveryMode-solutions .fullFid .tkdCard,
  .DeliveryMode.tkouibus .DeliveryMode-solutions .fullFid .tkdCard {
    flex: .9; }
  .DeliveryMode.tkd .DeliveryMode-solutions .fullFid.singleItem .tkdCard,
  .DeliveryMode.tkouibus .DeliveryMode-solutions .fullFid.singleItem .tkdCard {
    flex: auto; }

.DeliveryMode.tkd .DeliveryMode-errorMessage,
.DeliveryMode.tkouibus .DeliveryMode-errorMessage {
  margin-top: 1.25rem; }

@media only screen and (min-width: 40.063em), print {
  .DeliveryMode.tkd,
  .DeliveryMode.tkouibus {
    padding: 1.5625rem 1.25rem; }
    .DeliveryMode.tkd .DeliveryMode-title,
    .DeliveryMode.tkouibus .DeliveryMode-title {
      display: flex; }
    .DeliveryMode.tkd .DeliveryMode-description,
    .DeliveryMode.tkouibus .DeliveryMode-description {
      display: block; } }

@media print {
  .DeliveryMode.tkd .tkdPrint a,
  .DeliveryMode.tkd .tkdPrint button,
  .DeliveryMode.tkouibus .tkdPrint a,
  .DeliveryMode.tkouibus .tkdPrint button {
    color: #000 !important;
    background: none; }
  .DeliveryMode.tkd .tkdPrint .DeliveryMode-print,
  .DeliveryMode.tkouibus .tkdPrint .DeliveryMode-print {
    display: inline-block; }
    .DeliveryMode.tkd .tkdPrint .DeliveryMode-print > *,
    .DeliveryMode.tkouibus .tkdPrint .DeliveryMode-print > * {
      display: inline-block;
      margin-right: 0.625rem; }
  .DeliveryMode.tkd .semiFid a::before,
  .DeliveryMode.tkouibus .semiFid a::before {
    content: ': ';
    display: inline-block;
    margin-right: 0.3125rem; } }

.DeliveryMode.tod .DeliveryMode-title-text {
  margin-top: 2.8125rem;
  margin-bottom: 2.5rem; }

@media only screen and (min-width: 40.063em), print {
  .DeliveryMode.tod {
    padding-top: 1.25rem; }
    .DeliveryMode.tod .DeliveryMode-title-text {
      margin-top: 0.1875rem;
      margin-bottom: 0; } }

.DeliveryMode.bls {
  padding-bottom: 1.25rem; }
  .DeliveryMode.bls .DeliveryMode-title {
    margin-bottom: 1.875rem; }
  @media only screen and (min-width: 40.063em), print {
    .DeliveryMode.bls {
      padding-top: 1.25rem; }
      .DeliveryMode.bls .DeliveryMode-title {
        margin-bottom: 0.375rem; } }

.DeliveryMode.digital {
  margin-bottom: 0;
  padding: 0 1.5625rem; }
  .DeliveryMode.digital .DeliveryMode-solutions {
    line-height: 1.4; }
  .DeliveryMode.digital .DeliveryMode-item {
    padding: 0;
    margin-bottom: 1.25rem; }
    .DeliveryMode.digital .DeliveryMode-item.print {
      max-width: none; }
  .DeliveryMode.digital .DeliveryMode-description {
    font-family: AvenirHeavy, Arial, Helvetica, sans-serif;
    margin-top: 1.5625rem; }
  .DeliveryMode.digital .DeliveryMode-title {
    display: none; }
  @media only screen and (min-width: 40.063em), print {
    .DeliveryMode.digital .DeliveryMode-title {
      display: flex; }
    .DeliveryMode.digital .DeliveryMode-description {
      width: calc(100% - 13.75rem);
      margin-top: 0.625rem; }
    .DeliveryMode.digital .DeliveryMode-solutions {
      margin-top: 0; }
    .DeliveryMode.digital .DeliveryMode-item {
      align-self: flex-start; }
      .DeliveryMode.digital .DeliveryMode-item button {
        margin-bottom: 0.625rem; } }
  @media print {
    .DeliveryMode.digital .DeliveryMode-title,
    .DeliveryMode.digital .DeliveryMode-solutions {
      margin-top: 0; } }
  @media only screen and (min-width: 40.063em), print {
    .DeliveryMode.digital {
      padding-top: 1.25rem;
      margin-top: 0; }
      .DeliveryMode.digital .DeliveryMode-title {
        margin-bottom: 0; } }

.DeliveryMode.ouigo {
  padding: 0 0.625rem 2.5rem; }
  .DeliveryMode.ouigo .DeliveryMode-title {
    display: none; }
  .DeliveryMode.ouigo .DeliveryMode-title-brand {
    color: #e5006d;
    font-weight: bold;
    margin-bottom: 0.625rem; }
    .a11y-high-c .DeliveryMode.ouigo .DeliveryMode-title-brand {
      color: #af0158; }
  .DeliveryMode.ouigo .DeliveryMode-information {
    margin: 0 1.25rem; }
    .DeliveryMode.ouigo .DeliveryMode-information span {
      color: #000;
      font-family: AvenirHeavy, Arial, Helvetica, sans-serif; }
  .DeliveryMode.ouigo .DeliveryMode-solutions {
    align-items: center;
    padding: 0 3.75rem; }
    .DeliveryMode.ouigo .DeliveryMode-solutions .ouigoPrintTicket {
      flex: .9; }
  @media only screen and (min-width: 40.063em), print {
    .DeliveryMode.ouigo {
      padding: 1.5625rem 1.25rem; }
      .DeliveryMode.ouigo .DeliveryMode-title {
        display: flex; }
      .DeliveryMode.ouigo .DeliveryMode-information {
        margin: 0; }
      .DeliveryMode.ouigo .DeliveryMode-solutions {
        margin: 1.25rem 0 0;
        padding: 0; } }
  @media only screen and (min-width: 40.063em), print {
    .DeliveryMode.ouigo {
      padding-top: 1.25rem; } }

.DeliveryMode.rec {
  padding-bottom: 2.1875rem; }
  .DeliveryMode.rec .DeliveryMode-title {
    margin-top: 2.125rem;
    margin-bottom: 1.6875rem; }
    @media only screen and (min-width: 40.063em) {
      .DeliveryMode.rec .DeliveryMode-title {
        margin-top: 0; } }
  .DeliveryMode.rec .DeliveryMode-tip {
    margin-top: 1.0625rem; }
  @media only screen and (min-width: 40.063em) {
    .DeliveryMode.rec {
      padding-bottom: 0; } }

.DeliveryMode.tkd_eurostar .DeliveryMode-title,
.DeliveryMode.tkd_eurostar .DeliveryMode-description {
  display: none; }

.DeliveryMode.tkd_eurostar .DeliveryMode-information a {
  white-space: nowrap; }

.DeliveryMode.tkd_eurostar .DeliveryMode-infoBoarding {
  color: #0099b4;
  display: none;
  margin-top: 2.1875rem;
  margin-left: 0.3125rem; }
  .a11y-high-c .DeliveryMode.tkd_eurostar .DeliveryMode-infoBoarding {
    color: #007a89; }
  @media only screen and (min-width: 40.063em), print {
    .DeliveryMode.tkd_eurostar .DeliveryMode-infoBoarding {
      display: flex; } }
  .DeliveryMode.tkd_eurostar .DeliveryMode-infoBoarding-icon {
    color: #0099b4;
    margin-right: 0.75rem; }
    .a11y-high-c .DeliveryMode.tkd_eurostar .DeliveryMode-infoBoarding-icon {
      color: #007a89; }
    .DeliveryMode.tkd_eurostar .DeliveryMode-infoBoarding-icon svg {
      width: 1.875rem;
      height: 1.875rem; }
  .DeliveryMode.tkd_eurostar .DeliveryMode-infoBoarding-text {
    color: #0099b4;
    line-height: 1.25rem; }
    .a11y-high-c .DeliveryMode.tkd_eurostar .DeliveryMode-infoBoarding-text {
      color: #007a89; }
  @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    .DeliveryMode.tkd_eurostar .DeliveryMode-infoBoarding oui-message {
      width: 30.5rem;
      height: 4.8125rem; } }

@media only screen and (min-width: 40.063em), print {
  .DeliveryMode.tkd_eurostar {
    padding: 1.5625rem 1.25rem; }
    .DeliveryMode.tkd_eurostar .DeliveryMode-title {
      display: flex; }
    .DeliveryMode.tkd_eurostar .DeliveryMode-description {
      display: block; }
    .DeliveryMode.tkd_eurostar .DeliveryMode-solutions .mobileApp {
      flex: 1; }
    .DeliveryMode.tkd_eurostar .DeliveryMode-solutions .print {
      text-align: center; }
    .DeliveryMode.tkd_eurostar .DeliveryMode-detail {
      padding: 0; }
    .DeliveryMode.tkd_eurostar .DeliveryMode-information {
      padding: 0; } }

.DeliveryMode.ead {
  padding-top: 0.625rem; }
  @media only screen and (min-width: 40.063em) {
    .DeliveryMode.ead {
      padding-top: 1.5625rem; } }
  .DeliveryMode.ead .DeliveryMode-title {
    margin: 0;
    padding-bottom: 1.875rem; }
    @media only screen and (min-width: 40.063em) {
      .DeliveryMode.ead .DeliveryMode-title {
        padding-bottom: 0; } }
  .DeliveryMode.ead .DeliveryMode-description {
    margin-bottom: 0; }
  .DeliveryMode.ead .DeliveryMode-address {
    text-align: center;
    padding-top: 2.5rem; }
    @media only screen and (min-width: 40.063em) {
      .DeliveryMode.ead .DeliveryMode-address {
        display: flex;
        text-align: left;
        padding-top: 1.875rem; } }
    .DeliveryMode.ead .DeliveryMode-addressRecap {
      color: #999082;
      margin: 0 auto;
      display: block;
      width: 9.6875rem; }
      .a11y-high-c .DeliveryMode.ead .DeliveryMode-addressRecap {
        color: #7b7162; }
      @media only screen and (min-width: 40.063em) {
        .DeliveryMode.ead .DeliveryMode-addressRecap {
          margin: 0;
          margin-right: 1.875rem; } }
    .DeliveryMode.ead .DeliveryMode-addressInfo {
      padding-top: 0.9375rem;
      text-transform: capitalize; }
      .DeliveryMode.ead .DeliveryMode-addressInfo span {
        display: block; }
      @media only screen and (min-width: 40.063em) {
        .DeliveryMode.ead .DeliveryMode-addressInfo {
          padding-top: 0; } }

.DeliveryMode.cancelled {
  padding-left: 0.625rem; }

.DeliveryMode.option .DeliveryMode-title {
  color: #000; }
  .a11y-high-c .DeliveryMode.option .DeliveryMode-title {
    color: #000; }
  .DeliveryMode.option .DeliveryMode-title-icon {
    margin-left: -0.4375rem; }

.DeliveryMode.option .DeliveryMode-ticketCancelled {
  padding: 1.25rem 0 1.25rem 1.25rem;
  display: block;
  font-size: 1.25rem; }
  .DeliveryMode.option .DeliveryMode-ticketCancelled svg {
    width: 1.5625rem;
    height: 1.5625rem;
    fill: currentColor;
    margin-right: 0.3125rem; }

.DeliveryMode.tkl .DeliveryMode-title-text {
  display: none; }
  @media only screen and (min-width: 40.063em), print {
    .DeliveryMode.tkl .DeliveryMode-title-text {
      display: block; } }

/* tickets */
/*
  Structure de la page /billets
*/
.Tickets {
  margin: 0 1.5625rem 2.5rem; }
  .Tickets-disruptedTravel:not(:last-child) {
    margin-bottom: 1.25rem; }
  .Tickets-message {
    display: block;
    margin-bottom: 1.25rem; }
    @media only screen and (min-width: 40.063em) {
      .Tickets-message {
        padding: 2.5rem 7.5rem 0; } }
    @media only screen and (min-width: 40.063em) {
      .Tickets-message .alert-zone {
        display: flex;
        justify-content: center; } }
  .Tickets-loader {
    display: flex;
    justify-content: center;
    margin-top: 1.25rem; }
  .Tickets-paoError {
    margin-top: 1.25rem; }
  .Tickets-downloadTicket {
    display: block;
    margin-top: 1.875rem; }
  .Tickets-folderRef {
    border-color: #ecedeb;
    border-width: 1px;
    border-style: solid;
    border-radius: 0.5rem;
    text-align: center;
    margin-top: 2.5rem; }
    .a11y-high-c .Tickets-folderRef {
      border-color: #ecedeb; }
    @media only screen and (min-width: 40.063em) {
      .Tickets-folderRef {
        margin: 1.5625rem; } }
  .Tickets-info {
    color: #0099b4;
    justify-content: center;
    margin: 0.1875rem 0 2.375rem; }
    .a11y-high-c .Tickets-info {
      color: #007a89; }
    .Tickets-info-icon {
      color: #0099b4;
      margin-right: 0.625rem; }
      .a11y-high-c .Tickets-info-icon {
        color: #007a89; }
      .Tickets-info-icon svg {
        width: 1.875rem;
        height: 1.875rem; }
    .Tickets-info-text {
      color: #0099b4;
      flex-grow: 0;
      line-height: 1.25rem; }
      .a11y-high-c .Tickets-info-text {
        color: #007a89; }
  .Tickets-printTicket {
    display: block;
    margin-top: 1.875rem;
    text-align: center; }
  .Tickets-receipt {
    text-align: center; }
    .Tickets-receipt a {
      margin-top: 1.25rem; }

.TicketsDigital {
  position: relative;
  text-align: center;
  /* Desktop */ }
  .TicketsDigital-lists {
    margin: 1.25rem auto;
    text-align: center;
    max-width: 100%;
    width: 37.5rem;
    margin-bottom: 0;
    white-space: nowrap; }
    .TicketsDigital-lists ul {
      display: flex;
      flex-direction: column;
      margin: auto;
      padding: 0.625rem;
      max-width: 100%;
      flex-wrap: wrap;
      max-width: 22rem; }
      .TicketsDigital-lists ul li {
        flex: 1;
        flex-basis: calc(100%/3);
        padding: 0.3125rem;
        font-family: AvenirRoman, AvenirBook, Arial, Helvetica, sans-serif; }
        .TicketsDigital-lists ul li a {
          vertical-align: baseline;
          margin-left: 0.625rem; }
  @media only screen and (min-width: 40.063em) {
    .TicketsDigital {
      padding-top: 1.25rem; }
      .TicketsDigital-lists {
        display: flex; }
      .TicketsDigital-list {
        flex: 1; }
        .TicketsDigital-list ul {
          flex-direction: row; } }
  @media print {
    .TicketsDigital-lists {
      display: none; } }

.TicketsEurostar-loader {
  display: flex;
  justify-content: center;
  margin-top: 1.875rem; }

.TicketsEurostar-tickets {
  display: block;
  justify-content: space-around; }
  @media only screen and (min-width: 40.063em) {
    .TicketsEurostar-tickets {
      display: flex;
      justify-content: center; } }
  .TicketsEurostar-tickets-card {
    margin: 1.5625rem auto 0;
    max-width: 18.75rem; }
    @media only screen and (min-width: 40.063em) {
      .TicketsEurostar-tickets-card {
        margin: 2.1875rem 1.25rem 0;
        width: 18.75rem; } }
    .TicketsEurostar-tickets-card:not(:first-child) {
      padding-top: 1.25rem; }
      @media only screen and (min-width: 40.063em) {
        .TicketsEurostar-tickets-card:not(:first-child) {
          padding-top: 0; } }

/* passengers */
.Passenger {
  color: #999082;
  line-height: 1.25rem;
  display: flex;
  justify-content: space-between; }
  .a11y-high-c .Passenger {
    color: #7b7162; }
  @media only screen and (min-width: 40.063em) {
    .Passenger {
      justify-content: flex-start; } }
  .Passenger-icon {
    display: none; }
    @media only screen and (min-width: 40.063em) {
      .Passenger-icon {
        color: #000;
        width: 2.5rem;
        height: 2.5rem;
        margin-right: 0.625rem;
        flex: 0 0 2.5rem;
        display: inline-block; }
        .a11y-high-c .Passenger-icon {
          color: #000; } }
  .Passenger-displayName {
    color: #000;
    font-size: 0.875rem;
    font-family: AvenirHeavy, Arial, Helvetica, sans-serif; }
  .Passenger-typology {
    white-space: nowrap; }
    .Passenger-typology::first-letter {
      text-transform: capitalize; }
  .Passenger-price {
    color: #000; }
    .a11y-high-c .Passenger-price {
      color: #000; }
    @media only screen and (min-width: 40.063em) {
      .Passenger-price {
        color: #000;
        display: block;
        font-size: 1.25rem;
        margin-left: auto;
        align-self: start; } }
  .Passenger-cuiType {
    color: #0099b4;
    margin-top: 1.25rem; }
    .a11y-high-c .Passenger-cuiType {
      color: #007a89; }
    @media only screen and (min-width: 40.063em) {
      .Passenger-cuiType {
        white-space: nowrap;
        margin: auto 0;
        margin-left: 3.125rem; } }

/* Brique passager ( ou carte passager ) */
.PassengerCard-travel {
  border-color: #ecedeb;
  border-top-width: 1px;
  border-top-style: solid;
  display: flex;
  position: relative;
  padding: 0.9375rem;
  cursor: pointer;
  /* Trajet Passé */
  /* Trajet annulé*/ }
  .a11y-high-c .PassengerCard-travel {
    border-color: #ecedeb; }
  .PassengerCard-travel:focus {
    outline-offset: -0.375rem; }
  @media only screen and (min-width: 40.063em) {
    .PassengerCard-travel {
      padding: 1.4375rem 1.25rem; } }
  .PassengerCard-travel-mention {
    color: #999082;
    flex: 2;
    align-self: center;
    margin-top: 0.3125rem; }
    .a11y-high-c .PassengerCard-travel-mention {
      color: #7b7162; }
    @media only screen and (min-width: 40.063em) {
      .PassengerCard-travel-mention {
        margin-top: 0; } }
  .PassengerCard-travel-od {
    display: flex;
    flex: 1;
    padding-right: 1.25rem;
    color: #000;
    align-items: center;
    font-size: 0.9375rem; }
    @media only screen and (min-width: 40.063em) {
      .PassengerCard-travel-od {
        padding-right: 0.625rem; } }
    .PassengerCard-travel-od-icon {
      fill: #999082;
      width: 30px;
      height: 28px;
      vertical-align: middle;
      margin-left: -6px;
      margin-right: 6px;
      flex: 0 0 35px; }
      .a11y-high-c .PassengerCard-travel-od-icon {
        fill: #7b7162; }
    .PassengerCard-travel-od .travelWay {
      width: 1rem;
      height: 1rem;
      margin-left: 0.3125rem;
      margin-right: 0.3125rem; }
    .PassengerCard-travel-od-header {
      display: flex; }
  .PassengerCard-travel-header {
    flex: 1; }
    @media only screen and (min-width: 40.063em) {
      .PassengerCard-travel-header {
        display: flex; }
        .PassengerCard-travel-header-od {
          flex: 1; } }
  .PassengerCard-travel-toggler {
    position: absolute;
    right: 0.5625rem;
    top: 31%;
    text-align: center;
    vertical-align: middle; }
    .PassengerCard-travel-toggler-iconArrow {
      fill: #ea5330;
      width: 1.5rem;
      height: 1.5rem;
      transition: transform .35s ease; }
      .a11y-high-c .PassengerCard-travel-toggler-iconArrow {
        fill: #d93914; }
      .PassengerCard-travel-toggler-iconArrow.isUp {
        transform: rotate(180deg); }
    @media only screen and (min-width: 40.063em) {
      .PassengerCard-travel-toggler {
        right: 1.3125rem; } }
    @media print {
      .PassengerCard-travel-toggler {
        display: none; } }
  .PassengerCard-travel.passed, .PassengerCard-travel.isCancelled {
    background-color: #ecedeb;
    color: #999082; }
    .a11y-high-c .PassengerCard-travel.passed, .a11y-high-c .PassengerCard-travel.isCancelled {
      background-color: #ecedeb; }
    .a11y-high-c .PassengerCard-travel.passed, .a11y-high-c .PassengerCard-travel.isCancelled {
      color: #7b7162; }
    .PassengerCard-travel.passed .PassengerCard-travel-od, .PassengerCard-travel.isCancelled .PassengerCard-travel-od {
      color: #999082; }
      .a11y-high-c .PassengerCard-travel.passed .PassengerCard-travel-od, .a11y-high-c .PassengerCard-travel.isCancelled .PassengerCard-travel-od {
        color: #7b7162; }
      .PassengerCard-travel.passed .PassengerCard-travel-od svg, .PassengerCard-travel.isCancelled .PassengerCard-travel-od svg {
        fill: currentColor; }
      .PassengerCard-travel.passed .PassengerCard-travel-od .travelWay, .PassengerCard-travel.isCancelled .PassengerCard-travel-od .travelWay {
        stroke: currentColor; }
  .PassengerCard-travel.isCancelled {
    cursor: default; }

.PassengerCard-condition {
  background: #fff;
  padding: 0.9375rem;
  color: #000; }
  .PassengerCard-condition:focus {
    outline-color: #ea5330; }
    .a11y-high-c .PassengerCard-condition:focus {
      outline-color: #d93914; }
    @media only screen and (min-width: 40.063em) {
      .PassengerCard-condition:focus {
        outline-offset: -0.625rem; } }
  .PassengerCard-condition-fareCondition {
    margin-top: 0.625rem; }
    @media only screen and (min-width: 40.063em) {
      .PassengerCard-condition-fareCondition {
        margin-top: 0; } }
  .PassengerCard-condition-segment:not(:last-child) {
    padding-bottom: 1.875rem; }
  @media only screen and (min-width: 40.063em), print {
    .PassengerCard-condition-segment {
      display: flex;
      flex-direction: column; } }
  .PassengerCard-condition-travel {
    margin-right: 0.625rem;
    font-size: 0.875rem; }
  .PassengerCard-condition-od {
    margin-bottom: 0.1875rem;
    font-family: AvenirHeavy, Arial, Helvetica, sans-serif; }
    @media only screen and (min-width: 40.063em), print {
      .PassengerCard-condition-od {
        margin-bottom: 0.3125rem; } }
  .PassengerCard-condition-fareName {
    font-family: AvenirRoman, AvenirBook, Arial, Helvetica, sans-serif;
    display: block;
    margin-top: 0.3125rem; }
    @media only screen and (min-width: 40.063em) {
      .PassengerCard-condition-fareName {
        margin-left: 0.625rem;
        display: inline;
        margin-top: 0; } }
  .PassengerCard-condition-fare, .PassengerCard-condition-additional {
    display: block;
    font-size: 0.8125rem;
    font-weight: normal;
    line-height: 1.125rem; }
  .PassengerCard-condition-fareDesc, .PassengerCard-condition-additionalDesc {
    display: flex;
    justify-content: space-between;
    width: 100%; }
  .PassengerCard-condition-additionalName {
    margin-bottom: 0.5rem; }
    @media only screen and (min-width: 40.063em), print {
      .PassengerCard-condition-additionalName {
        margin-bottom: 0.3125rem; } }
  .PassengerCard-condition-additional {
    margin-top: .7em; }
  .PassengerCard-condition-price {
    color: #000;
    font-size: 1rem;
    margin-left: 0.9375rem;
    text-align: right; }
    @media only screen and (min-width: 40.063em) {
      .PassengerCard-condition-price {
        display: none; } }
  @media only screen and (min-width: 40.063em) {
    .PassengerCard-condition.cancellation {
      padding: 0; } }
  @media only screen and (min-width: 40.063em), print {
    .PassengerCard-condition {
      padding: 0.9375rem 1.25rem; }
      .PassengerCard-condition-carrier {
        margin-bottom: 0.3125rem; } }

@media print {
  .PassengerCard {
    page-break-inside: avoid;
    page-break-after: auto;
    page-break-before: auto; }
    .PassengerCard-toggler, .PassengerCard-condition.isOpen {
      display: none; }
    .PassengerCard-travel {
      border-color: #ecedeb;
      padding: 0.625rem 1rem; }
      .a11y-high-c .PassengerCard-travel {
        border-color: #ecedeb; } }

.PassengerCard.modal.Passenger-displayName {
  font-size: 1rem; }

.PassengerCard.modal .Passenger-title {
  max-width: 80%; }

.PassengerCard.modal .Passenger-displayName span {
  text-overflow: ellipsis;
  display: block;
  white-space: nowrap;
  overflow: hidden; }

.PassengerCard.modal .PassengerCard-journey:not(:last-child) {
  border-color: #ecedeb;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  padding-bottom: 1.25rem; }
  .a11y-high-c .PassengerCard.modal .PassengerCard-journey:not(:last-child) {
    border-color: #ecedeb; }
  @media only screen and (min-width: 40.063em), print {
    .PassengerCard.modal .PassengerCard-journey:not(:last-child) {
      border-bottom-width: 0;
      padding-bottom: inherit; } }

.PassengerCard.modal .PassengerCard-journey .PassengerCard-condition {
  padding: 1.25rem 0 0; }
  @media only screen and (min-width: 40.063em), print {
    .PassengerCard.modal .PassengerCard-journey .PassengerCard-condition {
      padding: 0.9375rem 0; } }
  .PassengerCard.modal .PassengerCard-journey .PassengerCard-condition-segment:not(:last-child) {
    padding-bottom: 1.25rem; }
    @media only screen and (min-width: 40.063em), print {
      .PassengerCard.modal .PassengerCard-journey .PassengerCard-condition-segment:not(:last-child) {
        padding-bottom: 1.875rem; } }

/* Liste de briques passagers */
.PassengerCardList ul {
  padding: 2.5rem 1.5625rem; }
  @media only screen and (min-width: 40.063em) {
    .PassengerCardList ul {
      padding: 1.25rem; } }
  @media print {
    .PassengerCardList ul {
      padding: 0; } }

.PassengerCardList li {
  width: 100%;
  margin-bottom: 1.25rem;
  display: inline-block; }
  .PassengerCardList li:last-child {
    margin-bottom: 0; }
  @media print {
    .PassengerCardList li {
      display: block;
      margin: 0 0 2.5rem; } }

.PassengerCardList.conditionPage ul {
  padding: 0; }
  .PassengerCardList.conditionPage ul li {
    margin-bottom: 0;
    padding-bottom: 1.25rem; }
    .PassengerCardList.conditionPage ul li:not(:last-child) {
      border-color: #ecedeb;
      border-bottom-style: solid;
      border-bottom-width: 15px; }
      .a11y-high-c .PassengerCardList.conditionPage ul li:not(:last-child) {
        border-color: #ecedeb; }

.PassengerCardList.conditionModal ul {
  padding: 0; }

.PassengerCardList.conditionModal li:not(:last-child) {
  border-color: #ecedeb;
  border-bottom-width: 2px;
  border-bottom-style: solid; }
  .a11y-high-c .PassengerCardList.conditionModal li:not(:last-child) {
    border-color: #ecedeb; }

@media only screen and (min-width: 40.063em), print {
  .PassengerCardList.conditionModal li {
    padding-bottom: 1.25rem;
    margin-bottom: 0; }
    .PassengerCardList.conditionModal li:not(:first-child) {
      padding-top: 2.5rem; } }

.PassengersCheck-passenger {
  border-color: #ecedeb;
  border-width: 1px;
  border-style: solid;
  border-radius: 0.5rem;
  margin: 0 0 1.25rem;
  padding: 1.25rem 0.9375rem; }
  .a11y-high-c .PassengersCheck-passenger {
    border-color: #ecedeb; }
  @media only screen and (min-width: 40.063em) {
    .PassengersCheck-passenger {
      text-align: left;
      border: 0;
      margin: 0 auto;
      padding-left: 0;
      padding-right: 0; } }
  @media only screen and (min-width: 40.063em) {
    .PassengersCheck-passenger-details {
      display: flex;
      flex-wrap: nowrap;
      align-content: center;
      position: relative; } }
  .PassengersCheck-passenger.isValidated {
    color: #999082;
    border-color: rgba(32, 158, 103, 0.3);
    cursor: pointer; }
    .a11y-high-c .PassengersCheck-passenger.isValidated {
      color: #7b7162; }
  @media only screen and (min-width: 40.063em) {
    .PassengersCheck-passenger.isLast {
      padding-bottom: 0; } }

.PassengersCheck-form {
  margin-top: 1.5625rem; }
  @media only screen and (min-width: 40.063em) {
    .PassengersCheck-form {
      margin-top: 1.25rem; } }

.PassengersCheck-label {
  font-family: AvenirHeavy, Arial, Helvetica, sans-serif;
  color: #000;
  font-size: 1rem;
  margin-bottom: 1.4375rem; }
  @media only screen and (min-width: 40.063em) {
    .PassengersCheck-label {
      font-size: 1.125rem;
      margin-bottom: 0; } }

@media only screen and (min-width: 40.063em) {
  .PassengersCheck-label, .PassengersCheck-childUnderFour {
    height: 2.1875rem;
    width: 16.875rem; } }

@media only screen and (min-width: 64.0625em) {
  .PassengersCheck-label, .PassengersCheck-childUnderFour {
    width: 17.5rem; } }

.PassengersCheck-input {
  margin-bottom: 1.0625rem;
  transition: width .3s ease; }
  .PassengersCheck-input:last-child {
    margin-bottom: 0; }
  @media only screen and (min-width: 40.063em) {
    .PassengersCheck-input {
      margin-bottom: 0; } }

@media only screen and (min-width: 40.063em) {
  .PassengersCheck-email {
    width: 15rem; } }

@media only screen and (min-width: 64.0625em) {
  .PassengersCheck-email {
    width: 19.0625rem; } }

.PassengersCheck-or {
  color: #999082;
  display: none; }
  .a11y-high-c .PassengersCheck-or {
    color: #7b7162; }
  @media only screen and (min-width: 40.063em) {
    .PassengersCheck-or {
      padding-top: 1.25rem;
      margin: 0.9375rem 0.625rem auto;
      display: inline-block;
      color: #000;
      text-align: center;
      flex-grow: 1; } }
  .PassengersCheck-or + label {
    display: inline-block; }

.PassengersCheck-phone .PassengersCheck-or {
  display: inline-block; }

@media only screen and (min-width: 40.063em) {
  .PassengersCheck-phone {
    width: 8.125rem; }
    .PassengersCheck-phone .PassengersCheck-or {
      display: none; } }

@media only screen and (min-width: 64.0625em) {
  .PassengersCheck-phone {
    width: 10rem; } }

.PassengersCheck-childUnderFour {
  color: #999082;
  font-size: 0.875rem;
  margin-top: 0.5rem;
  margin-bottom: 0; }
  .a11y-high-c .PassengersCheck-childUnderFour {
    color: #7b7162; }
  @media only screen and (min-width: 40.063em) {
    .PassengersCheck-childUnderFour {
      margin-top: 0;
      position: absolute;
      top: 2.25rem;
      left: 0; } }

.PassengersCheck-childUnderFour-list {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease, padding .3s ease; }
  .PassengersCheck-childUnderFour-list.isOpen {
    max-height: 21.875rem; }
    @media only screen and (min-width: 40.063em) {
      .PassengersCheck-childUnderFour-list.isOpen {
        border-color: #ecedeb;
        padding-top: 0;
        padding-bottom: 2.5rem;
        border-bottom-style: solid;
        border-bottom-width: 1px; }
        .a11y-high-c .PassengersCheck-childUnderFour-list.isOpen {
          border-color: #ecedeb; } }

.PassengersCheck-childUnderFour-details {
  margin-top: 2.1875rem; }
  .PassengersCheck-childUnderFour-details.ng-enter, .PassengersCheck-childUnderFour-details.ng-leave {
    transition: max-height .3s ease;
    overflow: hidden; }
  .PassengersCheck-childUnderFour-details.ng-enter, .PassengersCheck-childUnderFour-details.ng-leave.ng-leave-active {
    max-height: 0; }
  .PassengersCheck-childUnderFour-details.ng-leave, .PassengersCheck-childUnderFour-details.ng-enter.ng-enter-active {
    max-height: 18.75rem; }
  @media only screen and (min-width: 40.063em) {
    .PassengersCheck-childUnderFour-details {
      display: flex;
      margin-top: 0.9375rem; }
      .PassengersCheck-childUnderFour-details .PassengersCheck-input {
        width: 12.5rem; }
      .PassengersCheck-childUnderFour-details .PassengersCheck-label {
        font-family: AvenirRoman, AvenirBook, Arial, Helvetica, sans-serif;
        font-size: 1.125rem;
        padding-top: 2.0625rem; }
      .PassengersCheck-childUnderFour-details .PassengersCheck-firstname {
        margin-right: 1.25rem; } }
  @media only screen and (min-width: 64.0625em) {
    .PassengersCheck-childUnderFour-details .PassengersCheck-input {
      width: 15.625rem; } }

.PassengersCheck-validated {
  display: flex;
  line-height: 1.4; }
  .PassengersCheck-validated .PassengersCheck-label {
    margin-bottom: 0;
    line-height: inherit; }

.PassengersCheck-contactInformation {
  flex: 1;
  min-width: 0;
  margin-right: 0.625rem; }

.PassengersCheck-formError {
  margin: 1.875rem 0 1.25rem; }
  @media only screen and (min-width: 40.063em) {
    .PassengersCheck-formError {
      margin-top: 1.25rem;
      margin-bottom: 1.875rem; } }

@media only screen and (min-width: 40.063em) {
  .PassengersCheck-errorMessagePhoneEmail {
    margin-left: 16.875rem;
    margin-top: 0.3125rem; } }

@media only screen and (min-width: 64.0625em) {
  .PassengersCheck-errorMessagePhoneEmail {
    margin-left: 17.5rem; } }

.PassengersCheck-buttons {
  display: flex;
  align-content: center;
  justify-content: center; }

.PassengersCheck-validated, .PassengersCheck-notValidated {
  overflow: hidden; }
  @media only screen and (min-width: 40.063em) {
    .PassengersCheck-validated, .PassengersCheck-notValidated {
      overflow: visible; } }
  .PassengersCheck-validated.ng-enter, .PassengersCheck-validated.ng-leave, .PassengersCheck-notValidated.ng-enter, .PassengersCheck-notValidated.ng-leave {
    transition: max-height .5s, opacity .5s; }
  .PassengersCheck-validated.ng-enter, .PassengersCheck-validated.ng-leave.ng-leave-active, .PassengersCheck-notValidated.ng-enter, .PassengersCheck-notValidated.ng-leave.ng-leave-active {
    opacity: 0;
    max-height: 0; }
  .PassengersCheck-validated.ng-leave.ng-leave-active, .PassengersCheck-notValidated.ng-leave.ng-leave-active {
    transition: max-height .3s; }
  .PassengersCheck-validated.ng-leave, .PassengersCheck-validated.ng-enter.ng-enter-active, .PassengersCheck-notValidated.ng-leave, .PassengersCheck-notValidated.ng-enter.ng-enter-active {
    opacity: 1; }

.PassengersCheck-validated.ng-leave, .PassengersCheck-validated.ng-enter.ng-enter-active {
  max-height: 9.375rem; }

.PassengersCheck-notValidated.ng-leave, .PassengersCheck-notValidated.ng-enter.ng-enter-active {
  max-height: 31.25rem; }

/* itinerary */
.Itinerary {
  color: #999082; }
  .a11y-high-c .Itinerary {
    color: #7b7162; }
  .Itinerary-title {
    display: block; }
    .Itinerary-title.hide {
      display: none; }
  .Itinerary-content {
    position: relative; }
  .Itinerary-loader {
    padding-bottom: 1.25rem;
    display: flex;
    justify-content: center; }
  .Itinerary-journey {
    display: block;
    margin: 1.875rem 1.5625rem; }
    @media only screen and (min-width: 40.063em) {
      .Itinerary-journey {
        display: flex;
        margin: 0;
        padding-top: 1.875rem; } }
  .Itinerary-roadmap {
    flex: 1; }
  .Itinerary-partner {
    flex: 1; }
  .Itinerary-plan {
    flex: 1;
    z-index: 1; }
  .Itinerary-planMobile {
    height: 150px;
    transition: position 2s; }
    .Itinerary-planMobile.wide {
      height: 400px; }
  .Itinerary-footer {
    color: #999082;
    padding-top: 1.875rem;
    display: flex;
    justify-content: space-between; }
    .a11y-high-c .Itinerary-footer {
      color: #7b7162; }
    @media print {
      .Itinerary-footer {
        padding-bottom: 0.3125rem;
        padding-left: 3.75rem; } }
    .Itinerary-footer.justify-right {
      justify-content: flex-end; }
  .Itinerary.correspondence.isOpen {
    padding-bottom: 0; }
  .Itinerary.correspondence .Itinerary-content {
    z-index: 3; }
  .Itinerary.correspondence .Itinerary-footer {
    border-color: #ecedeb;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    margin-left: 1.875rem;
    padding-bottom: 1.875rem; }
    .a11y-high-c .Itinerary.correspondence .Itinerary-footer {
      border-color: #ecedeb; }
  @media only screen and (min-width: 40.063em), print {
    .Itinerary.correspondence .Itinerary-proposals {
      padding: 0;
      margin-left: 1.875rem; } }
  .Itinerary.prepost {
    padding-bottom: 0.625rem; }
    .Itinerary.prepost.isOpen {
      padding-bottom: 0; }
      @media only screen and (min-width: 40.063em) {
        .Itinerary.prepost.isOpen {
          border-color: #ecedeb;
          border-bottom-width: 1px;
          border-bottom-style: solid;
          padding-bottom: 1.875rem; }
          .a11y-high-c .Itinerary.prepost.isOpen {
            border-color: #ecedeb; } }
    @media only screen and (min-width: 40.063em) {
      .Itinerary.prepost {
        padding-bottom: 1.25rem; } }
  @media only screen and (min-width: 40.063em), print {
    .Itinerary {
      padding: 0; }
      .Itinerary .Itinerary-roadmap {
        max-height: 31.25rem; } }
  @media print {
    .Itinerary {
      border-color: #ecedeb;
      border-left-width: 0.1875rem;
      border-left-style: solid;
      background-color: transparent;
      page-break-inside: avoid;
      page-break-after: auto;
      page-break-before: auto; }
      .a11y-high-c .Itinerary {
        border-color: #ecedeb; }
      .Itinerary-content {
        background-color: transparent; }
      .Itinerary-proposals {
        padding-left: 3.75rem; }
      .Itinerary-journey {
        display: block; }
      .Itinerary-journey-plan {
        width: 100%;
        box-shadow: none;
        page-break-inside: avoid;
        page-break-after: auto;
        page-break-before: auto; } }

/*
Navigation correspondance / pre-post

Affichage des modes de transports disponibles en cas de correspondance ou pre-post acheminement.

Markup: button-itinerary.hbs

.isActive                      - vignette active
.tiny                          - apparence onglet (pages mobile)
.tiny.isActive                 - apparence onglet (pages mobile), vignette active

Styleguide 2.2
*/
.ItineraryTab {
  border-color: #ecedeb;
  background-color: #fff;
  color: #000;
  width: 100%;
  min-height: 3.125rem;
  padding: 0.5rem 0.625rem 0.5rem 0.375rem;
  line-height: 1.2;
  border-width: 1px;
  border-style: solid;
  border-radius: 0.5rem;
  text-align: left;
  outline-offset: -0.375rem; }
  .a11y-high-c .ItineraryTab {
    border-color: #ecedeb; }
  .ItineraryTab:focus {
    outline-color: #fff; }
  .ItineraryTab-container {
    display: flex;
    align-items: center;
    justify-content: space-between; }
  .ItineraryTab-column {
    display: inline-block; }
    .ItineraryTab-column:first-child {
      margin-right: 0.375rem;
      width: 100%; }
    .ItineraryTab-column:last-child {
      flex-shrink: 0; }
  .ItineraryTab-type {
    display: flex;
    align-items: center;
    height: 100%; }
    .ItineraryTab-type-icon {
      text-align: center;
      flex-basis: 1.625rem;
      flex-shrink: 0; }
      .ItineraryTab-type-icon svg {
        fill: #0099b4;
        width: 1.6875rem;
        height: 1.6875rem; }
        .a11y-high-c .ItineraryTab-type-icon svg {
          fill: #007a89; }
    .ItineraryTab-type-label {
      padding-left: 0.3125rem; }
  .ItineraryTab-duration, .ItineraryTab-distance {
    display: block;
    text-align: right; }
  .ItineraryTab-duration {
    font-size: 0.75rem;
    font-family: AvenirHeavy, Arial, Helvetica, sans-serif; }
    .ItineraryTab-duration span {
      font-size: 0.875rem; }
  .ItineraryTab-distance {
    color: #999082; }
    .a11y-high-c .ItineraryTab-distance {
      color: #7b7162; }
  @media only screen and (min-width: 40.063em), print {
    .ItineraryTab {
      width: 11.25rem; }
      .ItineraryTab.isActive .ItineraryTab-type::after {
        display: none; }
      .ItineraryTab.isActive .ItineraryTab-distance {
        color: #fff; } }
  @media print {
    .ItineraryTab.isActive {
      background: none;
      background-color: transparent !important;
      color: #000 !important;
      border: 1px solid #000; }
    .ItineraryTab .ItineraryTab-duration {
      color: #000 !important; }
    .ItineraryTab .ItineraryTab-type-icon svg {
      fill: #000 !important; }
    .ItineraryTab:not(.isActive) {
      display: none; } }

.ItineraryTab.monChauffeur {
  padding: 0.3125rem 0.4375rem 0.3125rem 0.3125rem; }
  .ItineraryTab.monChauffeur .ItineraryTab-column:first-child {
    margin-right: 0; }
  .ItineraryTab.monChauffeur .ItineraryTab-type {
    height: 2.5rem; }
    .ItineraryTab.monChauffeur .ItineraryTab-type-icon svg {
      fill: #9A1E3A;
      width: 1.25rem;
      height: 1.25rem; }
      .a11y-high-c .ItineraryTab.monChauffeur .ItineraryTab-type-icon svg {
        fill: #6f162a; }
    .ItineraryTab.monChauffeur .ItineraryTab-type-logo svg {
      fill: #9A1E3A;
      width: 2.5rem;
      height: 0.9375rem;
      position: relative;
      top: 1px; }
      .a11y-high-c .ItineraryTab.monChauffeur .ItineraryTab-type-logo svg {
        fill: #6f162a; }
    .ItineraryTab.monChauffeur .ItineraryTab-type-label {
      position: relative;
      bottom: 1px;
      padding-left: 0.25rem; }
  .ItineraryTab.monChauffeur.isActive {
    background-color: #9A1E3A; }
    .a11y-high-c .ItineraryTab.monChauffeur.isActive {
      background-color: #6f162a; }

.ItineraryTab.isActive {
  background-color: #0099b4;
  color: #fff; }
  .a11y-high-c .ItineraryTab.isActive {
    background-color: #007a89; }
  .a11y-high-c .ItineraryTab.isActive {
    color: #fff; }
  .ItineraryTab.isActive .ItineraryTab-type-icon svg,
  .ItineraryTab.isActive .ItineraryTab-type-logo svg {
    fill: #fff; }
    .a11y-high-c .ItineraryTab.isActive .ItineraryTab-type-icon svg, .a11y-high-c
    .ItineraryTab.isActive .ItineraryTab-type-logo svg {
      fill: #fff; }
  .ItineraryTab.isActive .ItineraryTab-duration {
    color: #fff; }
    .a11y-high-c .ItineraryTab.isActive .ItineraryTab-duration {
      color: #fff; }

.ItineraryTab.tiny {
  border-color: #ecedeb;
  border-style: solid;
  border-bottom-width: 1px;
  position: relative;
  height: auto;
  min-height: 4.375rem;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: center; }
  .a11y-high-c .ItineraryTab.tiny {
    border-color: #ecedeb; }
  .ItineraryTab.tiny::before {
    border-color: #ecedeb;
    position: absolute;
    content: '';
    border-width: 0 0 0 1px;
    border-style: solid;
    height: 2.5rem;
    left: 100%;
    top: calc((100% - 2.5rem) / 2);
    z-index: 1; }
    .a11y-high-c .ItineraryTab.tiny::before {
      border-color: #ecedeb; }
  .ItineraryTab.tiny .hideWhenTiny {
    display: none; }
  .ItineraryTab.tiny .ItineraryTab-column {
    width: 100%;
    text-align: center; }
    .ItineraryTab.tiny .ItineraryTab-column:first-child {
      flex: auto;
      margin: 0; }
  .ItineraryTab.tiny .ItineraryTab-type-icon {
    flex-basis: 100%; }
    .ItineraryTab.tiny .ItineraryTab-type-icon svg {
      height: 2.0625rem;
      width: 2.0625rem;
      margin-top: 2px; }
  .ItineraryTab.tiny.monChauffeur .ItineraryTab-type {
    flex-direction: column;
    height: auto; }
    .ItineraryTab.tiny.monChauffeur .ItineraryTab-type-icon {
      height: 1.125rem; }
      .ItineraryTab.tiny.monChauffeur .ItineraryTab-type-icon svg {
        height: 1.375rem;
        fill: #9A1E3A;
        margin-top: 0; }
        .a11y-high-c .ItineraryTab.tiny.monChauffeur .ItineraryTab-type-icon svg {
          fill: #6f162a; }
    .ItineraryTab.tiny.monChauffeur .ItineraryTab-type-logo svg {
      width: 2.625rem; }

.ItineraryTab.tiny.isActive {
  z-index: 2; }
  .ItineraryTab.tiny.isActive::before {
    display: none; }
  .ItineraryTab.tiny.isActive::after {
    border-color: #0099b4;
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    top: 100%;
    left: calc(50% - 0.9375rem);
    z-index: 1;
    border-left: 0.9375rem solid transparent;
    border-right: 0.9375rem solid transparent;
    border-top-width: 0.5rem;
    border-top-style: solid; }
    .a11y-high-c .ItineraryTab.tiny.isActive::after {
      border-color: #007a89; }
  .ItineraryTab.tiny.isActive.monChauffeur .ItineraryTab-type-icon svg,
  .ItineraryTab.tiny.isActive.monChauffeur .ItineraryTab-type-logo svg {
    fill: #fff; }
  .ItineraryTab.tiny.isActive.monChauffeur::after {
    border-color: #9A1E3A;
    border-left-color: transparent;
    border-right-color: transparent; }
    .a11y-high-c .ItineraryTab.tiny.isActive.monChauffeur::after {
      border-color: #6f162a; }

.PartnerItinerary {
  position: relative;
  background: #fff;
  height: 100%; }
  @media print {
    .PartnerItinerary {
      padding-bottom: 0; } }
  .PartnerItinerary-partner {
    padding: 1.25rem; }
    @media only screen and (min-width: 40.063em) {
      .PartnerItinerary-partner {
        padding: 0;
        height: 31.25rem;
        width: 18.75rem;
        overflow-y: auto; } }
    .PartnerItinerary-partner a {
      color: #0099b4; }
      .a11y-high-c .PartnerItinerary-partner a {
        color: #007a89; }
    .PartnerItinerary-partner-title {
      font-weight: bold;
      font-size: 1.0625rem;
      color: #000;
      margin: 0 0 1.25rem; }
    .PartnerItinerary-partner-description {
      margin-bottom: 1.25rem; }
  .PartnerItinerary-monChauffeur {
    overflow: hidden;
    position: relative;
    border-radius: 0.5rem; }
    @media only screen and (min-width: 40.063em) {
      .PartnerItinerary-monChauffeur {
        border-color: #ecedeb;
        height: 18.125rem;
        border-width: 1px;
        border-style: solid; }
        .a11y-high-c .PartnerItinerary-monChauffeur {
          border-color: #ecedeb; } }
    .PartnerItinerary-monChauffeur-banner {
      position: relative; }
      .PartnerItinerary-monChauffeur-banner img {
        width: 100%; }
      .PartnerItinerary-monChauffeur-banner::after {
        content: '';
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 270 22'%3E%3Cpath d='M0 22C157.7 23.5 270-.1 270-.1V22H0z' fill='%23fff'/%3E%3C/svg%3E");
        width: 100%;
        height: 3.75rem;
        bottom: -1px;
        position: absolute;
        background-size: cover;
        display: block;
        background-repeat: no-repeat; }
      @media only screen and (min-width: 40.063em) {
        .PartnerItinerary-monChauffeur-banner {
          display: none; } }
      .PartnerItinerary-monChauffeur-banner-icon {
        display: block;
        fill: #9A1E3A; }
        .a11y-high-c .PartnerItinerary-monChauffeur-banner-icon {
          fill: #6f162a; }
        .PartnerItinerary-monChauffeur-banner-icon svg {
          height: 2.5rem;
          width: 6.25rem; }
    .PartnerItinerary-monChauffeur-main {
      padding: 1.875rem 0.3125rem 0;
      color: #000; }
      .a11y-high-c .PartnerItinerary-monChauffeur-main {
        color: #000; }
      @media only screen and (min-width: 40.063em) and (max-width: 64em) {
        .PartnerItinerary-monChauffeur-main {
          padding: 1.875rem 2.875rem 1.25rem 26.875rem; } }
      @media only screen and (min-width: 40.063em) and (max-width: 64em) and (orientation: portrait) {
        .PartnerItinerary-monChauffeur-main {
          padding: 0.9375rem 2.875rem 1.25rem 26.875rem; } }
      @media only screen and (min-width: 64.0625em) {
        .PartnerItinerary-monChauffeur-main {
          padding: 2.6875rem 2.875rem 3.125rem 32rem; } }
      .PartnerItinerary-monChauffeur-main-title {
        font-size: 1rem;
        padding-bottom: 1.375rem; }
        @media only screen and (min-width: 40.063em) {
          .PartnerItinerary-monChauffeur-main-title {
            font-size: 1.3125rem; } }
        @media only screen and (min-width: 40.063em) and (max-width: 64em) and (orientation: portrait) {
          .PartnerItinerary-monChauffeur-main-title {
            padding-bottom: 0.9375rem; } }
        .PartnerItinerary-monChauffeur-main-title sup {
          top: -0.5rem;
          font-size: 0.625rem; }
        .PartnerItinerary-monChauffeur-main-title-price {
          font-family: AvenirHeavy, Arial, Helvetica, sans-serif; }
      .PartnerItinerary-monChauffeur-main-description {
        font-size: 0.9375rem;
        padding-bottom: 1.5625rem; }
        @media only screen and (min-width: 40.063em) and (max-width: 64em) and (orientation: portrait) {
          .PartnerItinerary-monChauffeur-main-description {
            padding-bottom: 0.9375rem; } }
        .PartnerItinerary-monChauffeur-main-description strong {
          font-family: AvenirHeavy, Arial, Helvetica, sans-serif; }
      .PartnerItinerary-monChauffeur-main-button {
        text-align: center; }
        @media only screen and (min-width: 40.063em) {
          .PartnerItinerary-monChauffeur-main-button {
            text-align: left; } }
        .PartnerItinerary-monChauffeur-main-button .vsa-button {
          color: #fff;
          width: 6.5625rem;
          height: 2.5rem; }
          .a11y-high-c .PartnerItinerary-monChauffeur-main-button .vsa-button {
            color: #fff; }
      .PartnerItinerary-monChauffeur-main::after {
        background-image: url(/vsa/consult/app/3f71183998265e50247889e690f9fff2-3f71183998265e50247889e690f9fff2.jpg);
        background-position-x: 20.3125rem;
        background-position-y: -0.25rem;
        background-repeat: no-repeat;
        background-size: 50%;
        display: none;
        content: '';
        position: absolute;
        top: 0;
        left: -20.625rem;
        width: 43.75rem;
        height: 8.75rem;
        border-radius: 0 0 50%; }
        @media only screen and (min-width: 40.063em) and (max-width: 64em) {
          .PartnerItinerary-monChauffeur-main::after {
            width: 25.4375rem;
            background-position-y: 31.5rem; } }
        @media only screen and (min-width: 64.0625em) {
          .PartnerItinerary-monChauffeur-main::after {
            width: 29.1875rem;
            background-position-y: 29.625rem; } }
        @media only screen and (min-width: 40.063em) {
          .PartnerItinerary-monChauffeur-main::after {
            display: block;
            left: 0;
            top: -31.5625rem;
            height: 67.5rem;
            background-position-x: -20px;
            background-size: 105%; } }

.Roadmap {
  position: relative;
  background: #fff;
  height: 100%;
  overflow-y: auto; }
  @media print {
    .Roadmap {
      padding-bottom: 0; } }
  @media only screen and (min-width: 40.063em) {
    .Roadmap {
      max-height: 31.25rem;
      padding-right: 1.25rem; } }
  .Roadmap.header {
    background: none;
    padding: 0; }
  .Roadmap-path {
    position: relative;
    margin: 1.875rem 1.25rem 1.25rem 0; }
    .Roadmap-path-line {
      border-color: #999082;
      border-right-style: dotted;
      border-right-width: 2px;
      position: absolute;
      top: 1.25rem;
      left: 3.0625rem;
      width: 0;
      height: calc(100% - 2.5rem); }
      .a11y-high-c .Roadmap-path-line {
        border-color: #7b7162; }
    .Roadmap-path-step {
      color: #000;
      position: relative;
      padding: 0.625rem;
      padding-left: 4.6875rem; }
      .Roadmap-path-step-PE, .Roadmap-path-step-TR_PT {
        color: #999082;
        padding-top: 1.25rem;
        padding-bottom: 1.25rem; }
        .a11y-high-c .Roadmap-path-step-PE, .a11y-high-c .Roadmap-path-step-TR_PT {
          color: #7b7162; }
        .Roadmap-path-step-PE .Roadmap-path-step-icon, .Roadmap-path-step-TR_PT .Roadmap-path-step-icon {
          top: calc(40% - 0.625rem); }
      .Roadmap-path-step-first, .Roadmap-path-step-last {
        font-family: AvenirHeavy, Arial, Helvetica, sans-serif;
        font-size: 1rem;
        padding-top: 0.625rem;
        text-transform: uppercase; }
        .Roadmap-path-step-first .Roadmap-path-step-dot, .Roadmap-path-step-last .Roadmap-path-step-dot {
          top: 0.8125rem; }
      .Roadmap-path-step-dot {
        background-color: #999082;
        content: '';
        position: absolute;
        top: 0.875rem;
        left: 2.875rem;
        width: 0.5rem;
        height: 0.5rem;
        text-align: left;
        border-radius: 50%; }
        .a11y-high-c .Roadmap-path-step-dot {
          background-color: #7b7162; }
        @media print {
          .Roadmap-path-step-dot {
            border: 0.25rem solid #000; } }
      .Roadmap-path-step-line {
        border-color: #999082;
        border-right-style: solid;
        border-right-width: 2px;
        position: absolute;
        top: 1.25rem;
        left: 3.0625rem;
        width: 0;
        height: 100%; }
        .a11y-high-c .Roadmap-path-step-line {
          border-color: #7b7162; }
      .Roadmap-path-step-icon {
        position: absolute;
        top: 50%;
        left: 0;
        width: 1.5625rem;
        height: 1.5625rem; }
      .Roadmap-path-step-details-transport, .Roadmap-path-step-details-direction, .Roadmap-path-step-details-stopsCount {
        padding: 0.25rem 0; }
      .Roadmap-path-step-details-transport {
        font-family: AvenirHeavy, Arial, Helvetica, sans-serif;
        padding: 0.25rem 0 0; }
      .Roadmap-path-step-details-picto {
        width: 1.125rem;
        vertical-align: bottom !important; }
      .Roadmap-path-step-details-direction, .Roadmap-path-step-details-duration {
        color: #999082; }
        .a11y-high-c .Roadmap-path-step-details-direction, .a11y-high-c .Roadmap-path-step-details-duration {
          color: #7b7162; }
      .Roadmap-path-step-details-stopsCount {
        color: #000;
        padding-top: 1.125rem; }
      .Roadmap-path-step-prePost {
        font-size: 1rem;
        font-family: inherit; }
  .Roadmap-legalNotice {
    color: #999082;
    padding: 0.9375rem 0.9375rem 0.9375rem 0; }
    .a11y-high-c .Roadmap-legalNotice {
      color: #7b7162; }
    .Roadmap-legalNotice a {
      color: #000;
      font-weight: bold; }
  .Roadmap-partner {
    padding: 1.25rem; }
    .Roadmap-partner-title {
      font-weight: bold;
      font-size: 1.0625rem;
      color: #000;
      margin: 0.625rem 0 1.25rem; }
    .Roadmap-partner-description {
      color: #999082;
      margin-bottom: 1.25rem; }
      .a11y-high-c .Roadmap-partner-description {
        color: #7b7162; }
  .Roadmap-monChauffeur-banner {
    height: 8.125rem;
    padding: 1.875rem 0.625rem 0 9.375rem;
    background: #fff url(/vsa/consult/app/3f71183998265e50247889e690f9fff2-3f71183998265e50247889e690f9fff2.jpg) top left no-repeat;
    background-size: 10.625rem;
    background-position-x: -22px; }
    @media only screen and (min-width: 40.063em) {
      .Roadmap-monChauffeur-banner {
        display: none; } }
    .Roadmap-monChauffeur-banner-icon {
      display: block;
      fill: #9A1E3A; }
      .a11y-high-c .Roadmap-monChauffeur-banner-icon {
        fill: #6f162a; }
      .Roadmap-monChauffeur-banner-icon svg {
        height: 2.5rem;
        width: 6.25rem; }
  .Roadmap-monChauffeur-main {
    padding: 1.875rem 1.25rem 0; }
    @media only screen and (min-width: 40.063em) {
      .Roadmap-monChauffeur-main {
        height: 20rem;
        padding: 5rem 2.8125rem 1.25rem 26.875rem;
        background: #fff url(/vsa/consult/app/3f71183998265e50247889e690f9fff2-3f71183998265e50247889e690f9fff2.jpg) top left no-repeat; } }
    .Roadmap-monChauffeur-main-title {
      text-transform: uppercase;
      font-size: 1rem;
      padding-bottom: 0.625rem; }
      @media only screen and (min-width: 40.063em) {
        .Roadmap-monChauffeur-main-title {
          font-size: 1.3125rem; } }
      .Roadmap-monChauffeur-main-title sup {
        top: -0.5rem;
        font-size: 0.625rem; }
      .Roadmap-monChauffeur-main-title-price {
        font-family: AvenirHeavy, Arial, Helvetica, sans-serif;
        color: #9A1E3A; }
        .a11y-high-c .Roadmap-monChauffeur-main-title-price {
          color: #6f162a; }
    .Roadmap-monChauffeur-main-description {
      font-size: 0.9375rem;
      padding-bottom: 1.25rem; }
      .Roadmap-monChauffeur-main-description strong {
        font-family: AvenirHeavy, Arial, Helvetica, sans-serif; }
    .Roadmap-monChauffeur-main-button {
      text-align: center; }

.Plan-container, .Plan-content {
  width: 100%;
  height: 100%;
  position: relative; }
  @media only screen and (min-width: 40.063em), print {
    .Plan-container, .Plan-content {
      min-height: 200px; } }

@media only screen and (min-width: 40.063em) {
  .Plan-content {
    border-radius: 0.5rem; } }

.Plan-container-close {
  fill: #ea5330;
  background-color: #fff;
  position: absolute;
  bottom: 20px;
  right: 10px;
  display: block;
  width: 42px;
  height: 42px;
  transform: rotate(45deg);
  transition: transform 1s, height .5s;
  border-radius: 50%;
  padding: 0.625rem;
  box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.32);
  z-index: 500; }
  .a11y-high-c .Plan-container-close {
    fill: #d93914; }

.Plan-container-open {
  transform: rotate(0deg);
  box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.32); }

.Plan-endOfLineIcon {
  border-color: #999082;
  border-style: solid;
  border-width: 1px;
  border-radius: 50%;
  width: 0.75rem;
  height: 0.75rem;
  background-color: #fff; }
  .a11y-high-c .Plan-endOfLineIcon {
    border-color: #7b7162; }

@media print {
  .Plan {
    margin-top: 1.25rem; } }

.Prepost {
  display: inline-block;
  width: 100%;
  padding-bottom: 1.25rem; }
  @media only screen and (min-width: 40.063em) {
    .Prepost-products {
      display: flex; } }
  .Prepost-form {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    min-height: 1.875rem;
    background-color: #fff; }
    @media only screen and (min-width: 40.063em), print {
      .Prepost-form {
        flex-basis: 28.125rem;
        flex-shrink: 1; } }
  .Prepost-autocomplete {
    font-size: 16px;
    vertical-align: inherit !important; }
    @media only screen and (min-width: 40.063em), print {
      .Prepost-autocomplete {
        transition: width .3s ease-in; } }

/* pedago */
.Pedago {
  text-align: center; }
  @media only screen and (min-width: 40.063em) {
    .Pedago {
      display: flex;
      justify-content: space-between;
      text-align: left; } }
  .Pedago-text {
    color: #000;
    max-width: 32.1875rem; }
    .Pedago-text p {
      font-size: 1rem;
      margin: 0.625rem 0 0; }
    .Pedago-text span {
      font-weight: bold; }
  .Pedago-title {
    margin-bottom: 1.25rem; }
  .Pedago-button {
    margin-top: 1.25rem;
    display: flex;
    align-self: center; }
    @media only screen and (min-width: 40.063em) {
      .Pedago-button {
        margin-top: 0; } }

/* pushs */
/*
Pushs produit

Composants spécifiques pour divers produits.

Styleguide 10
*/
/*
Newrest

Composant pour la proposition de restauration à la place (Paris <> Lyon uniquement).

-----

**.Newrest**

Markup: newrest.hbs

Styleguide 10.1
*/
/* Find it on : segment, paris <> lyon only)  */
.Newrest {
  border-color: #ecedeb;
  border-width: 1px;
  border-style: solid;
  border-radius: 0.5rem;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  min-width: 11.25rem;
  max-width: 25rem;
  padding: 0 0.375rem 1.25rem; }
  .a11y-high-c .Newrest {
    border-color: #ecedeb; }
  @media only screen and (min-width: 40.063em) {
    .Newrest {
      min-width: 16.875rem;
      max-width: 25.9375rem;
      padding: 0 0.4375rem 1.25rem 0.5rem;
      margin-left: 0; } }
  .Newrest-icon {
    padding-left: 0.375rem;
    padding-right: 0.75rem;
    margin-right: 0;
    margin-top: 1.25rem; }
    @media only screen and (min-width: 40.063em) {
      .Newrest-icon {
        padding: 0 0.9375rem 0 0.4375rem; } }
    .Newrest-icon svg {
      width: 1.875rem;
      height: 1.875rem; }
  .Newrest-text {
    border-color: #ecedeb;
    border-left-width: 1px;
    border-left-style: solid;
    flex-basis: 49%;
    padding: 0 0.375rem;
    margin-top: 1.25rem;
    padding-left: 0.75rem; }
    .a11y-high-c .Newrest-text {
      border-color: #ecedeb; }
    @media only screen and (min-width: 40.063em) {
      .Newrest-text {
        padding: 0 0.5rem 0 0.9375rem; } }
  .Newrest-title {
    font-family: AvenirHeavy, Arial, Helvetica, sans-serif; }
  .Newrest-link {
    width: 8rem;
    padding: 0 0.375rem;
    margin-top: 1.25rem; }
    @media only screen and (min-width: 40.063em) {
      .Newrest-link {
        padding: 0 0.5rem 0 0.4375rem; } }

/*
MonChauffeur

Composant pour la proposition de taxi ou chauffeur.

-----

**.monChauffeur**

Markup: monChauffeur.hbs

Styleguide 10.2
*/
.monChauffeur {
  align-items: center; }
  .monChauffeur-text {
    display: block;
    margin: 0.375rem 0.3125rem;
    width: 100%;
    max-width: 18.75rem;
    text-align: center; }
  .monChauffeur-button a,
  .monChauffeur-button button {
    vertical-align: baseline; }
  @media only screen and (min-width: 64.0625em), only screen and (min-width: 40.063em) and (max-width: 64em) {
    .monChauffeur {
      display: flex;
      flex-direction: row;
      flex-grow: 1;
      flex-shrink: 0;
      margin-top: 0; }
      .monChauffeur-text, .monChauffeur-button {
        display: inline-block;
        width: auto;
        max-width: none; }
      .monChauffeur-text {
        flex-grow: 1;
        padding: 0 0.4375rem; } }

.IDAvis {
  border-color: #ecedeb;
  border-style: solid;
  border-width: 1px;
  text-align: left;
  padding: 0 0.625rem;
  width: 97%;
  margin-right: auto;
  margin-left: auto;
  background: #fff;
  border-radius: 0.3125rem; }
  .a11y-high-c .IDAvis {
    border-color: #ecedeb; }
  .IDAvis strong {
    font-family: AvenirHeavy, Arial, Helvetica, sans-serif;
    color: #000; }
  .IDAvis-header > *, .IDAvis-content > *, .IDAvis-footer > * {
    padding: 0.8125rem; }
  .IDAvis-header, .IDAvis-content {
    border-color: #ecedeb;
    border-bottom-style: solid;
    border-bottom-width: 1px; }
    .a11y-high-c .IDAvis-header, .a11y-high-c .IDAvis-content {
      border-color: #ecedeb; }
  .IDAvis-branding {
    align-items: center;
    padding-bottom: 1.25rem;
    padding-top: 0.9375rem; }
    .IDAvis-branding-logo {
      padding-right: 0.625rem;
      padding-bottom: 0.3125rem; }
      .IDAvis-branding-logo svg {
        height: 1.25rem;
        width: 5.625rem; }
    .IDAvis-branding-baseline {
      font-size: 0.875rem;
      line-height: 0.9375rem; }
  .IDAvis-orderNumber {
    padding-top: 0.3125rem;
    padding-bottom: 0.9375rem; }
    .IDAvis-orderNumber-value {
      color: #0099b4;
      font-size: 1rem;
      font-weight: bold;
      white-space: nowrap; }
      .a11y-high-c .IDAvis-orderNumber-value {
        color: #007a89; }
  .IDAvis-order {
    padding-top: 0.9375rem;
    padding-bottom: 1.25rem; }
    .IDAvis-order-period {
      margin-top: 1.25rem; }
      .IDAvis-order-period p {
        margin-top: 0.1875rem; }
        .IDAvis-order-period p > span {
          display: inline-block; }
    .IDAvis-order-agency {
      line-height: 1.25rem; }
      .IDAvis-order-agency .label {
        display: block; }
  .IDAvis-cta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-right: 0rem;
    margin-top: 0rem;
    padding-top: 0rem; }
  .IDAvis-actions {
    text-align: center;
    margin-top: 0.1875rem; }
    .IDAvis-actions .vsa-button {
      width: 14.375rem; }
    .IDAvis-actions:last-child {
      margin-top: 0.375rem; }
      @media only screen and (min-width: 40.063em), print {
        .IDAvis-actions:last-child {
          margin-top: 0.0625rem; } }

@media only screen and (min-width: 40.063em) and (-ms-high-contrast: active), only screen and (min-width: 40.063em) and (-ms-high-contrast: none) {
  .IDAvis-actions:first-child {
    margin-top: -3.125rem; }
  .IDAvis-actions:last-child {
    margin-top: 1.25rem; } }
  .IDAvis-price {
    display: flex;
    align-items: center;
    text-align: center;
    height: 3.3125rem;
    font-family: AvenirRoman, AvenirBook, Arial, Helvetica, sans-serif;
    color: #000; }
    .IDAvis-price-label {
      margin-right: 0.3125rem;
      white-space: nowrap; }
    .IDAvis-price-value {
      text-align: right;
      margin-left: auto;
      font-weight: bold; }
  .IDAvis-notice {
    color: #999082;
    font-size: 0.75rem;
    padding-top: 0.625rem;
    line-height: 0.9375rem; }
    .a11y-high-c .IDAvis-notice {
      color: #7b7162; }
  @media only screen and (min-width: 40.063em), print {
    .IDAvis {
      width: 34.375rem;
      padding-left: 0.3125rem;
      padding-right: 0.3125rem; }
      .IDAvis-header {
        padding-top: 0.9375rem; }
      .IDAvis-header, .IDAvis-content, .IDAvis-footer {
        display: flex;
        align-items: center; }
      .IDAvis-footer {
        flex-direction: row-reverse; }
      .IDAvis-orderNumber, .IDAvis-actions {
        flex: 1;
        padding-top: 0.71875rem;
        padding-right: 0.9375rem; }
      .IDAvis-actions {
        padding-right: 0.625rem; }
      .IDAvis-price {
        flex: .7;
        padding-top: 2.1875rem; }
      .IDAvis-order-agency {
        display: block; }
        .IDAvis-order-agency-label {
          display: inline; }
      .IDAvis-order-period {
        margin-top: 0.625rem; }
      .IDAvis-branding, .IDAvis-order, .IDAvis-notice {
        flex: 1.5; }
      .IDAvis-branding {
        display: flex;
        padding-bottom: 0.625rem;
        padding-top: 0.3125rem;
        flex: 2.5; }
        .IDAvis-branding-logo {
          flex: 1.2; }
        .IDAvis-branding-baseline {
          flex: 4; }
      .IDAvis-orderNumber {
        padding-top: 0;
        padding-bottom: 0.625rem;
        text-align: right;
        margin-top: 0; } }
  @media print {
    .IDAvis {
      margin-bottom: 2.5rem; } }

.XsellWidget {
  display: block; }

/* weather */
.Weather {
  display: block;
  width: 15rem;
  margin-right: auto;
  margin-left: auto; }
  .Weather .oneNextDay {
    margin-bottom: 2.1875rem; }
  .Weather .noNextDay {
    margin-bottom: 1.875rem; }
  @media only screen and (min-width: 40.063em) {
    .Weather {
      display: flex;
      width: 95%; }
      .Weather-section {
        flex: 1; } }
  .Weather-section-title {
    position: relative;
    padding-bottom: 0.625rem;
    text-align: left;
    font-size: 1.125rem;
    color: #000; }
    @media only screen and (min-width: 40.063em) {
      .Weather-section-title {
        padding-bottom: 0.9375rem; } }
    .Weather-section-title::after {
      border-color: #999082;
      border-top-style: solid;
      border-top-width: 1px;
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 25%;
      height: 0; }
      .a11y-high-c .Weather-section-title::after {
        border-color: #7b7162; }
      @media only screen and (min-width: 40.063em) {
        .Weather-section-title::after {
          width: 10%; } }
  .Weather-section.nextDays {
    padding-top: 1.875rem; }
    @media only screen and (min-width: 40.063em) {
      .Weather-section.nextDays {
        padding-top: 0; } }
  .Weather-section-content {
    display: flex; }
    @media only screen and (min-width: 40.063em) {
      .Weather-section-content {
        padding-top: 1.25rem; } }
    .Weather-section-content .WeatherForecast {
      flex: 1; }
  .Weather-nextDays-slider .slick-prev,
  .Weather-nextDays-slider .slick-next {
    top: 45%; }
  .Weather-nextDays-slider .slick-prev {
    left: -0.625rem; }
  .Weather-nextDays-slider .slick-next {
    right: -0.625rem; }

.WeatherForecast {
  position: relative;
  display: flex;
  padding: 0;
  text-align: center;
  min-width: 6.25rem;
  flex-direction: column; }
  @media only screen and (min-width: 40.063em) {
    .WeatherForecast::after {
      color: #999082;
      content: '';
      position: absolute;
      right: 0;
      top: 50%;
      margin-top: -1.25rem;
      width: 0;
      height: 2.5rem;
      border-right: solid 1px; }
      .a11y-high-c .WeatherForecast::after {
        color: #7b7162; }
    .WeatherForecast:last-child::after {
      display: none; } }
  .WeatherForecast .WeatherForecast-value {
    order: 1; }
    .WeatherForecast .WeatherForecast-value.nextDays {
      padding-top: 0.9375rem; }
  .WeatherForecast-icon {
    color: #0099b4;
    display: inline-block;
    vertical-align: middle; }
    .a11y-high-c .WeatherForecast-icon {
      color: #007a89; }
    .WeatherForecast-icon svg {
      width: 1.375rem;
      height: 1.375rem;
      fill: currentColor; }
  .WeatherForecast-temperature {
    display: inline-block;
    vertical-align: middle;
    font-size: 1.25rem;
    font-family: AvenirMedium, Arial, Helvetica, sans-serif;
    color: #000;
    line-height: 1.75rem; }
  .WeatherForecast-date {
    display: block;
    font-size: 0.875rem;
    order: 2; }

.WeatherForecast.jumbo {
  display: flex;
  line-height: 0.0625rem;
  align-items: center;
  width: 100%;
  flex-direction: row; }
  @media only screen and (min-width: 40.063em) {
    .WeatherForecast.jumbo {
      padding-right: 10%;
      padding-top: 1.25rem; }
      .WeatherForecast.jumbo::after {
        display: none; } }
  .WeatherForecast.jumbo .WeatherForecast-date {
    font-size: 0.875rem;
    line-height: 0.9375rem;
    text-align: left;
    font-family: AvenirRoman, AvenirBook, Arial, Helvetica, sans-serif;
    order: 0; }
    @media only screen and (min-width: 40.063em) {
      .WeatherForecast.jumbo .WeatherForecast-date {
        font-size: 1rem; } }
  .WeatherForecast.jumbo .WeatherForecast-value {
    margin-left: auto;
    text-align: right; }
    @media only screen and (min-width: 40.063em) {
      .WeatherForecast.jumbo .WeatherForecast-value {
        text-align: left;
        margin-left: 1.25rem;
        margin-right: auto; } }
    .WeatherForecast.jumbo .WeatherForecast-value .WeatherForecast-icon svg {
      width: 2.8125rem;
      height: 2.8125rem; }
      @media only screen and (max-width: 22.4375em) {
        .WeatherForecast.jumbo .WeatherForecast-value .WeatherForecast-icon svg {
          width: 3.125rem;
          height: 3.125rem; } }
      @media only screen and (min-width: 40.063em) {
        .WeatherForecast.jumbo .WeatherForecast-value .WeatherForecast-icon svg {
          width: 3rem;
          height: 3rem; } }
    .WeatherForecast.jumbo .WeatherForecast-value .WeatherForecast-temperature {
      font-size: 1.875rem; }
      @media only screen and (max-width: 22.4375em) {
        .WeatherForecast.jumbo .WeatherForecast-value .WeatherForecast-temperature {
          font-size: 1.875rem; } }
      @media only screen and (min-width: 40.063em) {
        .WeatherForecast.jumbo .WeatherForecast-value .WeatherForecast-temperature {
          font-size: 2.4375rem; } }

/* dialogue d'apres-vente (aftersale actions) */
/*
  Structure de la page de confirmation d'annulation
*/
.Cancellation-link.Link {
  display: none; }
  @media only screen and (min-width: 40.063em) {
    .Cancellation-link.Link {
      display: inline-flex;
      align-items: center;
      padding-top: 1.5625rem; }
      .Cancellation-link.Link svg {
        fill: #ea5330;
        width: 1.875rem;
        height: 2.8125rem; }
        .a11y-high-c .Cancellation-link.Link svg {
          fill: #d93914; } }

/*
  Structure de la page de confirmation d'annulation
*/
.CancellationConfirmation-status {
  line-height: 1.375rem;
  background-color: #e8f5f0;
  border-radius: 0.5rem; }
  @media only screen and (min-width: 40.063em), print {
    .CancellationConfirmation-status {
      width: 38.75rem;
      margin: 0 auto; } }
  .CancellationConfirmation-status-separator {
    border: 0;
    border-top: 0.0625rem solid #fff;
    margin: 0; }

.CancellationConfirmation-status-option {
  line-height: 1.375rem;
  background-color: #e8f5f0;
  border-radius: 0.5rem; }
  @media only screen and (min-width: 40.063em), print {
    .CancellationConfirmation-status-option {
      width: 25.625rem;
      margin: 0 auto; } }

.CancellationConfirmation-partners {
  display: flex;
  justify-content: center;
  align-content: center;
  margin-top: 0.625rem; }
  @media only screen and (min-width: 40.063em), print {
    .CancellationConfirmation-partners {
      margin-top: 3.125rem; } }

.CancellationConfirmation-refund {
  margin-top: 0.625rem;
  line-height: 1.25rem;
  padding-bottom: 0.9375rem;
  padding-left: 0.8125rem;
  padding-right: 0.9375rem; }
  @media only screen and (min-width: 40.063em), print {
    .CancellationConfirmation-refund {
      width: 38.75rem;
      display: flex;
      align-items: center;
      margin: 1.125rem auto 0;
      padding: 0 0 1.25rem;
      border: 0;
      line-height: normal; } }
  .CancellationConfirmation-refund-icon {
    display: none; }
    @media only screen and (min-width: 40.063em), print {
      .CancellationConfirmation-refund-icon {
        display: block;
        flex-shrink: 0;
        width: 4.0625rem;
        margin-right: 0.25rem;
        text-align: center;
        padding-left: 1.25rem; }
        .CancellationConfirmation-refund-icon svg {
          width: 2rem;
          height: 2rem; } }
  .CancellationConfirmation-refund-text p strong {
    font-family: Baloo, AvenirBlack, AvenirHeavy, Arial, Helvetica, sans-serif; }

.CancellationConfirmation-resaAvis, .CancellationConfirmation-insuranceInfo {
  margin-top: 1.25rem; }
  @media only screen and (min-width: 40.063em) {
    .CancellationConfirmation-resaAvis, .CancellationConfirmation-insuranceInfo {
      width: 38.75rem;
      margin: 1.25rem auto; } }
  .CancellationConfirmation-resaAvis .oui-message__icon, .CancellationConfirmation-insuranceInfo .oui-message__icon {
    flex-shrink: 0;
    width: 1.5rem !important;
    margin-right: 1.5625rem; }

/*
Bloc validation du dialogue d'apres-vente
*/
.AftersaleValidation-quoteEmail.ng-animate-enabled {
  display: block;
  max-height: 21.875rem;
  overflow: hidden;
  transition: max-height 0.5s ease; }

.AftersaleValidation-quoteEmail.ng-enter, .AftersaleValidation-quoteEmail.ng-leave.ng-leave-active {
  max-height: 0; }

.AftersaleValidation-quoteEmail.ng-leave, .AftersaleValidation-quoteEmail.ng-enter.ng-enter-active {
  max-height: 21.875rem; }

.AftersaleValidation-emailAddress {
  font-family: AvenirHeavy, Arial, Helvetica, sans-serif;
  font-size: 1rem; }

.AftersaleValidation-emailMessage {
  color: #000;
  line-height: 1.4; }

.AftersaleValidation-condition {
  color: #999082;
  text-align: center;
  margin: 0 auto;
  padding-top: 0.625rem; }
  .a11y-high-c .AftersaleValidation-condition {
    color: #7b7162; }

.AftersaleValidation-technicalErrorMessage {
  margin: 0 auto;
  margin-bottom: 0.9375rem;
  margin-top: 0.9375rem; }
  @media only screen and (min-width: 40.063em) {
    .AftersaleValidation-technicalErrorMessage {
      width: 42.8125rem; } }

.AftersaleValidation-quoteButtons {
  padding-top: 1.875rem; }
  @media only screen and (min-width: 40.063em) {
    .AftersaleValidation-quoteButtons {
      padding-top: 2.5rem; } }

@media only screen and (min-width: 40.063em), print {
  .AftersaleValidation-wrapper {
    padding: 0;
    width: 60rem;
    margin: 0 auto; }
  .AftersaleValidation-condition {
    width: 49.375rem;
    padding-top: 0.3125rem; } }

.AftersaleQuote .AftersaleQuote-panel-initialPrice, .AftersaleQuote .AftersaleQuote-panel-refundFees, .AftersaleQuote .AftersaleQuote-panel-noRefund,
.AftersaleQuote .AftersaleQuote-panel .AftersaleQuote-yourSelection, .AftersaleQuote-panel .AftersaleQuote .AftersaleQuote-yourSelection, .AftersaleQuote .AftersaleQuote-panel-refundAmount {
  display: flex;
  justify-content: space-between;
  align-items: baseline; }

.AftersaleQuote-panel {
  padding: 0.4375rem 0.9375rem 1.1875rem; }
  @media only screen and (min-width: 40.063em) {
    .AftersaleQuote-panel {
      padding: 0.125rem 1.875rem 1.3125rem;
      font-size: 1rem; } }
  .AftersaleQuote-panel-refundFees, .AftersaleQuote-panel-noRefund,
  .AftersaleQuote-panel .AftersaleQuote-yourSelection {
    padding-top: 0.9375rem; }
    @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
      .AftersaleQuote-panel-refundFees .ie, .AftersaleQuote-panel-noRefund .ie,
      .AftersaleQuote-panel .AftersaleQuote-yourSelection .ie {
        position: relative; }
        .AftersaleQuote-panel-refundFees .ie div, .AftersaleQuote-panel-noRefund .ie div,
        .AftersaleQuote-panel .AftersaleQuote-yourSelection .ie div {
          position: absolute;
          top: -0.1875rem;
          right: 0.0625rem; } }
    @supports (-ms-ime-align: auto) {
      .AftersaleQuote-panel-refundFees .ie, .AftersaleQuote-panel-noRefund .ie,
      .AftersaleQuote-panel .AftersaleQuote-yourSelection .ie {
        position: relative; }
        .AftersaleQuote-panel-refundFees .ie div, .AftersaleQuote-panel-noRefund .ie div,
        .AftersaleQuote-panel .AftersaleQuote-yourSelection .ie div {
          position: absolute;
          top: -0.1875rem;
          right: 0.0625rem; } }
  .AftersaleQuote-panel-cancellationFees {
    display: flex; }
    .AftersaleQuote-panel-cancellationFees svg {
      fill: #ea5330;
      width: 1.25rem;
      height: 1.25rem;
      margin-bottom: -0.375rem; }
      .a11y-high-c .AftersaleQuote-panel-cancellationFees svg {
        fill: #d93914; }
    .AftersaleQuote-panel-cancellationFees-info {
      padding-left: 0.625rem; }
    .AftersaleQuote-panel-cancellationFees-price {
      display: flex;
      align-items: center; }
  @media only screen and (min-width: 40.063em) {
    .AftersaleQuote-panel-refundAmount {
      padding-top: 0.625rem; } }
  .AftersaleQuote-panel-refundAmount strong {
    font-size: 1.125rem; }
    @media only screen and (min-width: 40.063em) {
      .AftersaleQuote-panel-refundAmount strong {
        font-size: 1.25rem; } }
  .AftersaleQuote-panel-sum {
    margin-top: 1.25rem; }

.AftersaleQuote-refundInfoMessage {
  display: block;
  margin-top: 1.25rem; }

.AftersaleQuote-ouimessage {
  display: inline-block;
  margin-top: 15px;
  width: 100%; }

.bowser-msie .AftersaleQuote .AftersaleQuote-panel-refundAmount,
.bowser-msedge .AftersaleQuote .AftersaleQuote-panel-refundAmount {
  align-items: center; }

.AftersaleQuote-recap {
  margin-top: 1.875rem;
  text-align: center; }
  @media only screen and (min-width: 40.063em) {
    .AftersaleQuote-recap {
      margin-top: 2.8125rem; } }

.AftersaleQuote-nobreak {
  white-space: nowrap; }

.AftersaleQuote-travelRecap {
  background-color: #ecedeb;
  color: #000;
  border-radius: 1.25rem;
  padding: 0.4375rem 0.9375rem;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
  max-width: 100%;
  margin: 0.4375rem 0 0 0.3125rem; }
  .a11y-high-c .AftersaleQuote-travelRecap {
    background-color: #ecedeb; }
  .a11y-high-c .AftersaleQuote-travelRecap {
    color: #000; }
  .AftersaleQuote-travelRecap svg {
    fill: #999082;
    width: 0.9375rem;
    height: 0.9375rem;
    margin-left: 0.3125rem; }
    .a11y-high-c .AftersaleQuote-travelRecap svg {
      fill: #7b7162; }
  .AftersaleQuote-travelRecap span {
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden; }

.AftersaleQuote-separatorComma {
  margin: 0 0.3125rem 0 0; }

.AftersaleQuote-separatorAnd {
  margin: 0 0 0.3125rem 0; }

.AftersaleQuote-yourSelection {
  display: flex; }
  .AftersaleQuote-yourSelectionTitle {
    display: flex;
    align-items: center; }
    .AftersaleQuote-yourSelectionTitle svg {
      fill: #ea5330;
      width: 1.375rem;
      height: 1.375rem;
      margin-left: 0.3125rem;
      transition: transform .35s ease; }
      .a11y-high-c .AftersaleQuote-yourSelectionTitle svg {
        fill: #d93914; }
      .AftersaleQuote-yourSelectionTitle svg.isOpen {
        transform: rotate(180deg); }

.AftersaleQuote-passengerDetails p {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  line-height: 1.5rem; }
  @media only screen and (min-width: 40.063em) {
    .AftersaleQuote-passengerDetails p {
      margin-left: 1.25rem; } }
  .AftersaleQuote-passengerDetails p:first-child {
    margin-top: 0.9375rem; }
    @media only screen and (min-width: 40.063em) {
      .AftersaleQuote-passengerDetails p:first-child {
        margin-top: 1.0625rem; } }
  .AftersaleQuote-passengerDetails p:last-child {
    margin-bottom: 0.3125rem; }
    @media only screen and (min-width: 40.063em) {
      .AftersaleQuote-passengerDetails p:last-child {
        margin-bottom: 0.9375rem; } }

.AftersaleQuote-passengerDetails-name {
  text-transform: capitalize; }

.AftersaleQuote-passengerPrice {
  margin-left: 0.625rem; }

.CancellationSummary-head {
  display: flex;
  justify-content: space-between; }

.CancellationSummary-title {
  line-height: 1.375rem; }
  .CancellationSummary-title h2 {
    font-size: 1rem;
    font-family: AvenirHeavy, Arial, Helvetica, sans-serif;
    font-weight: normal;
    margin: 0; }
    @media only screen and (min-width: 40.063em) {
      .CancellationSummary-title h2 {
        font-size: 1.125rem; } }

.CancellationSummary-travelWay {
  display: none; }
  @media only screen and (min-width: 40.063em) {
    .CancellationSummary-travelWay {
      display: inline;
      width: 1.125rem;
      height: 1.125rem;
      margin: 0 0.4375rem -0.1875rem; } }

.CancellationSummary-fareConditions {
  margin-top: 0.9375rem;
  line-height: 1.375rem;
  text-align: center; }
  @media only screen and (min-width: 40.063em) {
    .CancellationSummary-fareConditions {
      margin-top: 0.1875rem;
      line-height: 1.25rem; } }

.CancellationSummary-info {
  margin-left: 1.875rem; }

.CancellationSummary-price {
  line-height: 1.3125rem; }
  @media only screen and (min-width: 40.063em) {
    .CancellationSummary-price {
      text-align: right;
      line-height: normal;
      margin-top: -0.6875rem; } }

.CancellationSummary-passengers {
  display: flex;
  justify-content: flex-end;
  line-height: 1.4375rem; }

.CancellationSummary-travel {
  margin-top: 0.625rem;
  line-height: 1.25rem; }
  @media only screen and (min-width: 40.063em) {
    .CancellationSummary-travel {
      display: inline-block;
      margin-top: 0.375rem; } }

/*
FolderSummary

Markup: folderSummary.hbs

Styleguide 15.2
*/
.FolderSummary {
  border-radius: 1.25rem; }
  @media only screen and (min-width: 40.063em), print {
    .FolderSummary {
      margin: 0; } }
  .FolderSummary-title {
    display: flex;
    justify-content: stretch;
    padding-right: 1.875rem; }
    .FolderSummary-title h2 {
      font-size: 1rem; }
      .FolderSummary-title h2.capsule {
        width: 100%; }
      @media print {
        .FolderSummary-title h2 {
          width: 100%; } }
    @media print {
      .FolderSummary-title {
        padding-right: 0; } }
  .FolderSummary-busPicto {
    display: flex;
    width: 3.125rem;
    align-items: center;
    justify-content: flex-end; }
    .FolderSummary-busPicto svg {
      fill: #fff;
      height: 2rem;
      width: 2rem;
      position: relative;
      right: -0.9375rem; }
      .a11y-high-c .FolderSummary-busPicto svg {
        fill: #fff; }
    @media only screen and (max-width: 40em) {
      .FolderSummary-busPicto {
        display: none; } }
  @media only screen and (min-width: 40.063em), print {
    .FolderSummary-details {
      display: flex;
      flex-direction: row;
      padding-top: 1.875rem; } }
  @media print {
    .FolderSummary-details {
      flex-wrap: wrap; } }
  .FolderSummary-dates {
    padding: 1.25rem 0.9375rem 1.25rem 0rem; }
    @media only screen and (min-width: 40.063em), print {
      .FolderSummary-dates {
        flex: 1 0 auto;
        padding: 0; } }
  .FolderSummary-references {
    border-color: #ecedeb;
    border-style: solid;
    border-width: 1px 0 0;
    line-height: 1.3; }
    .a11y-high-c .FolderSummary-references {
      border-color: #ecedeb; }
    @media only screen and (min-width: 40.063em), print {
      .FolderSummary-references {
        font-size: 0.9375rem;
        min-width: 16.875rem;
        border-width: 0;
        margin: 0 0 0 1.875rem; } }
    @media print {
      .FolderSummary-references {
        margin: 0 0 0 1.4375rem; } }
  .FolderSummary-conditions {
    display: flex;
    flex-direction: column;
    margin-top: 0; }
    @media only screen and (min-width: 40.063em), print {
      .FolderSummary-conditions {
        justify-content: space-between;
        flex-direction: row;
        align-items: center; } }
    .FolderSummary-conditions-info, .FolderSummary-conditions-deliveryMode {
      border-color: #ecedeb;
      border-style: solid;
      border-width: 1px 0 0;
      padding: 1.1875rem 0; }
      .a11y-high-c .FolderSummary-conditions-info, .a11y-high-c .FolderSummary-conditions-deliveryMode {
        border-color: #ecedeb; }
      @media only screen and (min-width: 40.063em), print {
        .FolderSummary-conditions-info, .FolderSummary-conditions-deliveryMode {
          border-width: 0;
          margin: 0;
          padding: 1.25rem 0; } }
    @media only screen and (min-width: 40.063em), print {
      .FolderSummary-conditions-info {
        display: inline-flex;
        align-items: center; } }
    @media only screen and (min-width: 40.063em), print {
      .FolderSummary-conditions-info-passengers, .FolderSummary-conditions-info-cui {
        display: inline-block; } }
    .FolderSummary-conditions-info-cui {
      color: #999082; }
      .a11y-high-c .FolderSummary-conditions-info-cui {
        color: #7b7162; }
      @media only screen and (min-width: 40.063em), print {
        .FolderSummary-conditions-info-cui {
          margin: 0 0.625rem; } }
    .FolderSummary-conditions-info .FolderSummary-conditions-cui {
      margin-top: 0.125rem; }
    .FolderSummary-conditions-link {
      border-color: #ecedeb;
      border-style: solid;
      border-width: 1px 0 0;
      display: block;
      background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11.7 20' width='12' height='20' fill='%23ea5330'%3E%3Cpath d='M0 17.7L7.2 10 0 2.4 2.2 0l9.4 10-9.4 10L0 17.7z'/%3E%3C/svg%3E") right center no-repeat;
      background-size: 0.75rem;
      padding: 1.25rem 0;
      color: #000;
      text-decoration: none; }
      .a11y-high-c .FolderSummary-conditions-link {
        border-color: #ecedeb; }
  .FolderSummary-addToCalendar {
    display: flex;
    padding-bottom: 0.9375rem;
    white-space: nowrap; }
    @media only screen and (min-width: 40.063em) {
      .FolderSummary-addToCalendar {
        padding: 0; } }
    @media only screen and (min-width: 40.063em) and (-ms-high-contrast: none) {
      .FolderSummary-addToCalendar {
        padding: 0 1.25rem 0 0;
        width: 14.6875rem; } }
    @media print {
      .FolderSummary-addToCalendar {
        display: none; } }
  .FolderSummary.option .FolderSummary-title {
    background-color: #e5f5f7; }
    .a11y-high-c .FolderSummary.option .FolderSummary-title {
      background-color: white; }
    .FolderSummary.option .FolderSummary-title .Title {
      color: #0099b4;
      background-color: #e5f5f7; }
      .a11y-high-c .FolderSummary.option .FolderSummary-title .Title {
        color: #007a89; }
      .a11y-high-c .FolderSummary.option .FolderSummary-title .Title {
        background-color: white; }
  .FolderSummary.option .FolderSummary-conditions-deliveryMode {
    display: none; }
  .FolderSummary.option .FolderSummary-addToCalendar .TextIcon.addToCalendar {
    color: #0099b4; }
    .a11y-high-c .FolderSummary.option .FolderSummary-addToCalendar .TextIcon.addToCalendar {
      color: #007a89; }
  .a11y-high-c .FolderSummary.option .FolderSummary-title {
    border-color: #ecedeb;
    border-bottom-width: 1px;
    border-bottom-style: solid; }
    .a11y-high-c .a11y-high-c .FolderSummary.option .FolderSummary-title {
      border-color: #ecedeb; }

/*
Après-vente

Composants utilisés dans le dialogue d'annulation / échange.

Styleguide 15
*/
/*
TravelSummary

Markup: travelSummary.hbs

Styleguide 15.1
*/
.TravelSummary {
  display: flex;
  font-size: 1rem;
  color: #000;
  margin-top: 1.25rem; }
  .TravelSummary:first-child {
    margin-top: 0; }
  @media only screen and (min-width: 40.063em), print {
    .TravelSummary {
      margin: 0 1.875rem 0 0;
      text-align: left; } }
  .TravelSummary-type {
    color: #999082;
    min-width: 4.375rem;
    padding-top: 0.1875rem;
    text-align: right; }
    .a11y-high-c .TravelSummary-type {
      color: #7b7162; }
    @media only screen and (min-width: 40.063em), print {
      .TravelSummary-type {
        min-width: auto;
        text-align: left; } }
  .TravelSummary-details {
    border-color: #ecedeb;
    border-left-width: 1px;
    border-left-style: solid;
    padding: 0.1875rem 0 0.1875rem 0.625rem;
    margin-left: 0.625rem; }
    .a11y-high-c .TravelSummary-details {
      border-color: #ecedeb; }
  .TravelSummary-day {
    text-transform: capitalize; }
  .TravelSummary-date {
    font-size: 1.75rem;
    line-height: 1.2;
    font-family: AvenirHeavy, Arial, Helvetica, sans-serif;
    text-transform: uppercase; }
  .TravelSummary-hours {
    font-size: 0.9375rem; }

.vsa-page-disabled {
  position: relative; }
  .vsa-page-disabled .vsc__header,
  .vsa-page-disabled .vsc__footer,
  .vsa-page-disabled .PageHeader {
    filter: brightness(40%); }
  .vsa-page-disabled .Folder,
  .vsa-page-disabled .Page,
  .vsa-page-disabled quote-refund > div {
    position: relative; }
  .vsa-page-disabled .Folder::after,
  .vsa-page-disabled .Page::after,
  .vsa-page-disabled quote-refund > div::after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.5);
    width: 100%;
    height: 100%; }
  .vsa-page-disabled [data-js='confirmButton'] {
    position: relative;
    z-index: 2; }
  .vsa-page-disabled .overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3; }

.bowser-msie {
  position: relative; }
  .bowser-msie .vsa-page-disabled .vsc__header {
    opacity: .5; }
  .bowser-msie .vsa-page-disabled::after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.5);
    width: 100%;
    height: 100%; }

.PartialCancellationStep {
  margin-top: 1.875rem;
  /* Groupe de bouttons*/ }
  @media only screen and (min-width: 40.063em) {
    .PartialCancellationStep {
      width: 46.875rem;
      margin-left: auto;
      margin-right: auto;
      margin-top: 1.25rem; } }
  .PartialCancellationStep-box {
    border-color: #ecedeb;
    border-radius: 0.5rem;
    border-width: 1px;
    border-style: solid;
    padding: 1.875rem 1.25rem; }
    .a11y-high-c .PartialCancellationStep-box {
      border-color: #ecedeb; }
    @media only screen and (min-width: 40.063em) {
      .PartialCancellationStep-box {
        padding: 1.875rem; } }
  .PartialCancellationStep-title {
    text-align: center;
    margin-top: 0;
    margin-bottom: 1.875rem; }
  .PartialCancellationStep-buttons {
    display: block;
    margin: 0 auto; }
    @media only screen and (min-width: 40.063em) {
      .PartialCancellationStep-buttons {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        width: auto; } }
  .PartialCancellationStep-title {
    font-size: 1rem;
    font-weight: normal; }
  .PartialCancellationStep-button:not(:last-child) {
    margin-bottom: 0.9375rem; }
    @media only screen and (min-width: 40.063em) {
      .PartialCancellationStep-button:not(:last-child) {
        padding-right: 1.25rem; } }
  .PartialCancellationStep-error {
    margin-bottom: 2rem; }
    .PartialCancellationStep-error .oui-message__icon {
      width: 3rem; }

.SelectionRefund-steps {
  text-align: center;
  font-size: 1.25rem;
  font-family: AvenirHeavy, Arial, Helvetica, sans-serif;
  margin-top: 1.875rem; }

.SelectionRefund-recap {
  margin-top: 1.875rem;
  text-align: center; }
  @media only screen and (min-width: 40.063em) {
    .SelectionRefund-recap {
      padding: 0 2.5rem;
      margin-right: auto;
      margin-left: auto;
      margin-bottom: 1.25rem; } }

.SelectionRefund-travelRecap {
  background-color: #ecedeb;
  color: #000;
  border-radius: 1.25rem;
  padding: 0.4375rem 0.9375rem;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
  max-width: 100%;
  margin: 0.4375rem 0 0 0.3125rem; }
  .a11y-high-c .SelectionRefund-travelRecap {
    background-color: #ecedeb; }
  .a11y-high-c .SelectionRefund-travelRecap {
    color: #000; }
  .SelectionRefund-travelRecap svg {
    fill: #999082;
    width: 0.9375rem;
    height: 0.9375rem;
    margin-left: 0.3125rem; }
    .a11y-high-c .SelectionRefund-travelRecap svg {
      fill: #7b7162; }
  .SelectionRefund-travelRecap span {
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden; }

.SelectionRefund-separatorComma {
  margin: 0 0.3125rem 0 0; }

.SelectionRefund-separatorAnd {
  margin: 0 0 0.3125rem 0; }

.SelectionRefund-nobreak {
  white-space: nowrap; }

/* page de confirmation de commande */
/*
  Structure de la page de confirmation de commande
*/
.Confirmation-status {
  line-height: 1.375rem;
  background-color: #e8f5f0;
  border-radius: 0.5rem; }
  @media only screen and (min-width: 40.063em), print {
    .Confirmation-status {
      width: 37.5rem;
      margin: 0 auto; } }
  .Confirmation-status-separator {
    border: 0;
    border-top: 0.0625rem solid #fff;
    margin: 0; }

.Confirmation-status-account {
  line-height: 1.375rem;
  border-radius: 0.5rem; }
  @media only screen and (min-width: 40.063em), print {
    .Confirmation-status-account {
      width: 37.5rem;
      margin: 1.25rem auto; } }

.Confirmation-status-warnings {
  margin-top: 1.25rem; }
  @media only screen and (min-width: 40.063em), print {
    .Confirmation-status-warnings {
      width: 37.5rem;
      margin: 1.25rem auto 0;
      background-color: #fbe5ea;
      border-radius: 0.5rem; } }

@media print {
  .Confirmation-folderSummary {
    margin: 3.75rem 0 1.875rem; } }

.Confirmation-folderSummary.option {
  margin-top: 2.5rem; }

.Confirmation-validation {
  margin: 0 auto;
  padding: 1.875rem 1.25rem 2.5rem; }
  .Confirmation-validation-icon {
    float: left;
    margin-right: 0.9375rem;
    border: 1px solid #209e67;
    border-radius: 50%;
    padding: 0.625rem; }
    .Confirmation-validation-icon svg {
      fill: #209e67;
      width: 1.875rem;
      height: 1.875rem;
      margin-bottom: -5px; }
      .a11y-high-c .Confirmation-validation-icon svg {
        fill: #1f7d63; }
  .Confirmation-validation-text {
    clear: both;
    border: 1px solid #ecedeb;
    border-radius: 0.5rem;
    padding: 0.9375rem;
    margin-top: 2.5rem;
    line-height: 1.375rem; }
  .Confirmation-validation-title {
    color: #209e67; }
    .Confirmation-validation-title h2 {
      margin: 0.625rem 0;
      font-family: AvenirRoman, AvenirBook, Arial, Helvetica, sans-serif;
      font-weight: normal;
      font-size: 1rem; }
      .Confirmation-validation-title h2 span {
        font-family: AvenirHeavy, Arial, Helvetica, sans-serif; }
  @media only screen and (min-width: 40.063em), print {
    .Confirmation-validation {
      margin-bottom: 3.125rem;
      width: 34.375rem;
      padding: 0; }
      .Confirmation-validation-icon {
        padding: 1rem;
        margin-bottom: 3.125rem; }
        .Confirmation-validation-icon svg {
          width: 1.875rem;
          height: 1.875rem;
          margin-bottom: -5px; }
      .Confirmation-validation-title h2 {
        margin: 0 0 0.3125rem;
        font-size: 1.125rem; }
      .Confirmation-validation-text {
        clear: none;
        padding: 0;
        border: 0;
        margin: 0; } }

.Confirmation-aftersaleLink {
  display: block;
  text-align: center; }

.Confirmation-formalities {
  display: flex;
  justify-content: center; }

.Confirmation-busConditions, .Confirmation-securityGate {
  background-color: #e5f5f7;
  border-radius: 0.5rem;
  padding: 1.25rem;
  max-width: 43.125rem; }
  .a11y-high-c .Confirmation-busConditions, .a11y-high-c .Confirmation-securityGate {
    background-color: #e5f5f7; }
  @media print {
    .Confirmation-busConditions, .Confirmation-securityGate {
      background-color: #fff;
      color: #000;
      margin-top: 0; } }

@media only screen and (min-width: 40.063em) {
  .Confirmation-transaction {
    margin: auto; } }

.Confirmation-transaction-adBlock {
  padding-top: 3.125rem; }
  @media only screen and (min-width: 40.063em) {
    .Confirmation-transaction-adBlock {
      padding-bottom: 3.125rem; } }

.Confirmation-transaction-container {
  display: flex;
  flex-flow: column; }
  @media only screen and (min-width: 40.063em) {
    .Confirmation-transaction-container {
      flex-flow: row;
      justify-content: center;
      align-items: center; } }
  @media print {
    .Confirmation-transaction-container {
      background-color: #fff; } }

@media only screen and (min-width: 40.063em), print {
  .Confirmation-transaction-summary {
    flex: 0 1 41.25rem;
    background: none; } }

@media print {
  .Confirmation-transaction-summary {
    flex-basis: auto; } }

.Confirmation-transaction-advert, .Confirmation-transaction-megabanner {
  text-align: center; }
  @media print {
    .Confirmation-transaction-advert, .Confirmation-transaction-megabanner {
      display: none; } }

.Confirmation-transaction-megabanner {
  margin-bottom: 3.125rem; }
  @media only screen and (min-width: 40.063em) {
    .Confirmation-transaction-megabanner {
      margin-top: 3.125rem; } }

.Confirmation #adBlock,
.Confirmation #megabanner {
  display: none; }
  .Confirmation #adBlock.show-ad-vsc,
  .Confirmation #megabanner.show-ad-vsc {
    display: block !important; }
  @media print {
    .Confirmation #adBlock,
    .Confirmation #megabanner {
      display: none; } }

.Confirmation-legalNoticeCurrency {
  background-color: #ecedeb;
  padding: 1.5625rem; }
  .a11y-high-c .Confirmation-legalNoticeCurrency {
    background-color: #ecedeb; }
  .Confirmation-legalNoticeCurrency-text {
    max-width: 60rem;
    margin: 0 auto; }

.Confirmation-option-transaction {
  border-color: #ecedeb;
  width: 100%;
  clear: both;
  padding: 0.75rem 0 0.9375rem 0.9375rem;
  line-height: 1.25rem; }
  .a11y-high-c .Confirmation-option-transaction {
    border-color: #ecedeb; }
  @media only screen and (min-width: 40.063em), print {
    .Confirmation-option-transaction {
      margin-top: 0.5625rem;
      clear: none;
      padding: 0;
      border: 0; } }

.Confirmation-option-infoMail {
  display: inline-flex;
  align-items: center;
  margin-top: 0.625rem;
  padding-bottom: 0.625rem; }
  @media only screen and (min-width: 40.063em), print {
    .Confirmation-option-infoMail {
      margin-top: 1.0625rem;
      padding-bottom: 1.25rem; } }
  .Confirmation-option-infoMail-text {
    border-color: #ecedeb;
    border-style: solid;
    border-width: 1px;
    border-radius: 0.5rem;
    clear: both;
    padding: 0.3125rem 0.9375rem 0.9375rem;
    line-height: 1.25rem; }
    .a11y-high-c .Confirmation-option-infoMail-text {
      border-color: #ecedeb; }
    @media only screen and (min-width: 40.063em), print {
      .Confirmation-option-infoMail-text {
        clear: none;
        border: 0;
        padding: 0 2.5rem 0 0; } }
  .Confirmation-option-infoMail-icon {
    display: none; }
    @media only screen and (min-width: 40.063em), print {
      .Confirmation-option-infoMail-icon {
        display: block;
        padding: 0 0.3125rem;
        margin-right: 0.9375rem; } }
    .Confirmation-option-infoMail-icon svg {
      display: block;
      width: 2.5rem;
      height: 2.5rem;
      margin-left: 1.25rem; }

.TransactionSummary {
  text-align: center;
  margin-bottom: 3.125rem;
  margin-top: 3.125rem; }
  @media only screen and (min-width: 40.063em) {
    .TransactionSummary {
      justify-content: space-between; } }
  .TransactionSummary-recap {
    display: flex;
    justify-content: space-between;
    align-items: center; }
    .TransactionSummary-recap h3 {
      font-size: 1rem;
      margin: 0; }
  @media only screen and (min-width: 40.063em) {
    .TransactionSummary-Title {
      width: 25rem;
      margin: auto; } }
  .TransactionSummary-content {
    border-color: #ecedeb;
    border-width: 1px;
    border-style: solid;
    margin-top: 1.875rem;
    border-radius: 0.5rem;
    display: inline-block;
    background-color: #fff;
    color: #000;
    padding: 1.25rem 0.9375rem;
    text-align: left;
    line-height: 1.5625rem;
    width: 16.875rem; }
    .a11y-high-c .TransactionSummary-content {
      border-color: #ecedeb; }
    .TransactionSummary-content strong {
      font-family: AvenirMedium, Arial, Helvetica, sans-serif; }
    @media only screen and (min-width: 40.063em) {
      .TransactionSummary-content {
        width: 25rem;
        padding: 1.25rem 1.875rem; } }
  .TransactionSummary-discountPrice {
    display: flex; }
  .TransactionSummary-orderTotalTrain {
    font-size: 1rem; }
  .TransactionSummary-maskedCardNumber {
    margin-top: 1.5625rem; }
  .TransactionSummary-discountCode, .TransactionSummary-orderTotalTrain {
    margin-bottom: 0.625rem;
    display: flex;
    justify-content: space-between; }
  .TransactionSummary-insuranceTitle, .TransactionSummary-orderTotal {
    border-color: #ecedeb;
    border-top-width: 1px;
    border-top-style: solid;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 1.25rem;
    margin-top: 1.25rem; }
    .a11y-high-c .TransactionSummary-insuranceTitle, .a11y-high-c .TransactionSummary-orderTotal {
      border-color: #ecedeb; }
    .TransactionSummary-insuranceTitle > strong, .TransactionSummary-orderTotal > strong {
      font-size: 1rem;
      line-height: 1.5rem;
      margin-right: 0.625rem; }
      @media only screen and (min-width: 40.063em) {
        .TransactionSummary-insuranceTitle > strong, .TransactionSummary-orderTotal > strong {
          width: 15.5rem; } }
  .TransactionSummary-transaction {
    margin-top: 0.9375rem; }
    .TransactionSummary-transaction.cancellationPage:first-child {
      margin-top: 0; }
  .TransactionSummary-transactionInfo {
    display: flex; }
  .TransactionSummary-transactionInfoNumber {
    display: flex;
    justify-content: space-between;
    line-height: 1.5rem; }
    .TransactionSummary-transactionInfoNumber span {
      display: flex;
      flex-wrap: wrap; }
  .TransactionSummary-transactionNumber {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 15.625rem;
    display: inline-block; }
    @media only screen and (min-width: 40.063em) {
      .TransactionSummary-transactionNumber {
        max-width: none; } }
  .TransactionSummary-number {
    width: 100%; }
  .TransactionSummary-price {
    margin-left: 1.25rem; }
  .TransactionSummary-date span {
    display: block; }
  @media only screen and (min-width: 40.063em) {
    .TransactionSummary-date span {
      display: inline; } }
  .TransactionSummary.cancellationConfirmation {
    margin: 0; }
    @media only screen and (min-width: 40.063em) {
      .TransactionSummary.cancellationConfirmation .TransactionSummary-Title {
        width: auto; } }
    .TransactionSummary.cancellationConfirmation .TransactionSummary-content {
      border-color: #ecedeb;
      border-width: 1px;
      border-style: solid;
      border-radius: 0.5rem; }
      .a11y-high-c .TransactionSummary.cancellationConfirmation .TransactionSummary-content {
        border-color: #ecedeb; }

/* ticket card */
.TicketCard {
  width: 100%; }
  .TicketCard-list {
    padding: 0 1.6875rem; }
    @media only screen and (min-width: 40.063em) {
      .TicketCard-list {
        padding: 0.625rem 2.375rem 0 2.6875rem; } }
  .TicketCard-item {
    font-weight: bold;
    margin-top: 1.375rem;
    display: inline-flex; }
    @media only screen and (min-width: 40.063em) {
      .TicketCard-item {
        margin-top: 0.625rem; } }
    .TicketCard-item-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center; }
      @media only screen and (min-width: 40.063em) {
        .TicketCard-item-container {
          display: block; } }
    .TicketCard-item-icon {
      margin-right: 1.125rem;
      align-self: flex-start; }
      .TicketCard-item-icon svg {
        width: 2.25rem;
        height: 2.25rem; }
    .TicketCard-item-label {
      line-height: 1.25rem;
      flex-grow: 1; }
    .TicketCard-item-info {
      color: #999082; }
      .a11y-high-c .TicketCard-item-info {
        color: #7b7162; }
    .TicketCard-item-link {
      margin-top: 0.625rem; }
      @media only screen and (min-width: 40.063em) {
        .TicketCard-item-link {
          font-weight: normal;
          margin-top: 0.1875rem; } }
    .TicketCard-item.eurostar {
      display: block;
      text-align: center; }
      .TicketCard-item.eurostar .TicketCard-item-label {
        text-align: center; }
        @media only screen and (min-width: 40.063em) {
          .TicketCard-item.eurostar .TicketCard-item-label {
            margin-right: 0.3125rem; } }
      @media only screen and (min-width: 40.063em) {
        .TicketCard-item.eurostar .TicketCard-item-label,
        .TicketCard-item.eurostar .TicketCard-item-link {
          display: inline; } }

/* modal d'option */
.OptionModal {
  padding: 2.5rem 1.25rem;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center; }
  .OptionModal-btnClose {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem; }
    .OptionModal-btnClose svg {
      width: 1.25rem;
      height: 1.25rem; }
    .OptionModal-btnClose:hover {
      cursor: pointer; }
  .OptionModal-text {
    text-align: center;
    line-height: 1.25rem;
    padding: 0 0.625rem; }
  .OptionModal-button {
    margin-top: 0.9375rem; }
  @media only screen and (min-width: 40.063em) {
    .OptionModal {
      margin: 0 0.625rem;
      padding: 2.5rem 3.125rem; } }

/* capsule */
.Capsule {
  border-radius: 0.5rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 1.25rem;
  min-width: 3.125rem;
  margin-right: 0.3125rem;
  padding: 0 0.3125rem; }
  .Capsule.warning {
    background-color: #fbf1e5;
    color: #d97201;
    font-family: AvenirHeavy, Arial, Helvetica, sans-serif; }
    .a11y-high-c .Capsule.warning {
      background-color: #fbf1e5; }
    .a11y-high-c .Capsule.warning {
      color: #bb4a00; }
  .Capsule.valid {
    background-color: #e8f5f0; }
    .a11y-high-c .Capsule.valid {
      background-color: #f1f5f3; }
    .Capsule.valid svg {
      fill: #209e67;
      width: 0.875rem;
      height: 0.875rem; }
      .a11y-high-c .Capsule.valid svg {
        fill: #1f7d63; }
  .Capsule.info {
    background-color: #e5f5f7;
    color: #0099b4;
    font-family: AvenirHeavy, Arial, Helvetica, sans-serif; }
    .a11y-high-c .Capsule.info {
      background-color: #e5f5f7; }
    .a11y-high-c .Capsule.info {
      color: #007a89; }

/* legal notice number */
.LegalNoticeNumber {
  margin-left: -0.3125rem; }

/* Checkbox Button */
.vsa-checkbox-button {
  position: relative;
  /* default style */
  /* checked style */
  /* disabled style */
  /* bulle d'information */ }
  .vsa-checkbox-button:hover .vsa-checkbox-button-capsule {
    display: block;
    bottom: -3.125rem;
    z-index: 1;
    transition-delay: .2s;
    transition-property: opacity, bottom; }
  .vsa-checkbox-button .vsa-button, .vsa-checkbox-button .vsa-button:active {
    cursor: pointer;
    background-color: #fff;
    color: #000;
    border-color: #999082;
    display: flex;
    align-items: center;
    width: 100%;
    font-family: Baloo, AvenirBlack, AvenirHeavy, Arial, Helvetica, sans-serif;
    font-size: 1rem; }
    .a11y-high-c .vsa-checkbox-button .vsa-button, .a11y-high-c .vsa-checkbox-button .vsa-button:active {
      background-color: #fff; }
    .a11y-high-c .vsa-checkbox-button .vsa-button, .a11y-high-c .vsa-checkbox-button .vsa-button:active {
      color: #000; }
    .a11y-high-c .vsa-checkbox-button .vsa-button, .a11y-high-c .vsa-checkbox-button .vsa-button:active {
      border-color: #7b7162; }
    @media only screen and (min-width: 40.063em) {
      .vsa-checkbox-button .vsa-button, .vsa-checkbox-button .vsa-button:active {
        min-width: auto;
        justify-content: center;
        font-size: 0.875rem; } }
    .vsa-checkbox-button .vsa-button:hover, .vsa-checkbox-button .vsa-button:active, .vsa-checkbox-button .vsa-button:active:hover, .vsa-checkbox-button .vsa-button:active:active {
      border-color: #999082;
      background-color: rgba(0, 0, 0, 0.035); }
      .a11y-high-c .vsa-checkbox-button .vsa-button:hover, .a11y-high-c .vsa-checkbox-button .vsa-button:active, .a11y-high-c .vsa-checkbox-button .vsa-button:active:hover, .a11y-high-c .vsa-checkbox-button .vsa-button:active:active {
        border-color: #7b7162; }
    .vsa-checkbox-button .vsa-button svg, .vsa-checkbox-button .vsa-button:active svg {
      fill: #999082;
      width: 1.5rem;
      height: 1.5rem;
      flex-shrink: 0; }
      .a11y-high-c .vsa-checkbox-button .vsa-button svg, .a11y-high-c .vsa-checkbox-button .vsa-button:active svg {
        fill: #7b7162; }
      .vsa-checkbox-button .vsa-button svg.inward, .vsa-checkbox-button .vsa-button:active svg.inward {
        transform: rotate(180deg); }
  .vsa-checkbox-button input[type=checkbox]:checked + .vsa-button, .vsa-checkbox-button input[type=checkbox]:checked .vsa-button:active {
    background-color: #fff;
    color: #ea5330;
    border-color: #ea5330;
    font-family: Baloo, AvenirBlack, AvenirHeavy, Arial, Helvetica, sans-serif; }
    .a11y-high-c .vsa-checkbox-button input[type=checkbox]:checked + .vsa-button, .a11y-high-c .vsa-checkbox-button input[type=checkbox]:checked .vsa-button:active {
      background-color: #fff; }
    .a11y-high-c .vsa-checkbox-button input[type=checkbox]:checked + .vsa-button, .a11y-high-c .vsa-checkbox-button input[type=checkbox]:checked .vsa-button:active {
      color: #d93914; }
    .a11y-high-c .vsa-checkbox-button input[type=checkbox]:checked + .vsa-button, .a11y-high-c .vsa-checkbox-button input[type=checkbox]:checked .vsa-button:active {
      border-color: #d93914; }
    .vsa-checkbox-button input[type=checkbox]:checked + .vsa-button:hover, .vsa-checkbox-button input[type=checkbox]:checked .vsa-button:active:hover {
      border-color: #464645;
      color: #ea5330;
      border-color: #ea5330; }
      .a11y-high-c .vsa-checkbox-button input[type=checkbox]:checked + .vsa-button:hover, .a11y-high-c .vsa-checkbox-button input[type=checkbox]:checked .vsa-button:active:hover {
        border-color: #464645; }
      .a11y-high-c .vsa-checkbox-button input[type=checkbox]:checked + .vsa-button:hover, .a11y-high-c .vsa-checkbox-button input[type=checkbox]:checked .vsa-button:active:hover {
        color: #d93914; }
      .a11y-high-c .vsa-checkbox-button input[type=checkbox]:checked + .vsa-button:hover, .a11y-high-c .vsa-checkbox-button input[type=checkbox]:checked .vsa-button:active:hover {
        border-color: #d93914; }
    .vsa-checkbox-button input[type=checkbox]:checked + .vsa-button svg, .vsa-checkbox-button input[type=checkbox]:checked .vsa-button:active svg {
      fill: currentColor; }
  .vsa-checkbox-button input[disabled] + .vsa-button, .vsa-checkbox-button input[disabled] .vsa-button:active {
    background-color: #ecedeb;
    border-color: #ecedeb;
    color: #999082;
    font-family: Baloo, AvenirBlack, AvenirHeavy, Arial, Helvetica, sans-serif;
    cursor: not-allowed; }
    .a11y-high-c .vsa-checkbox-button input[disabled] + .vsa-button, .a11y-high-c .vsa-checkbox-button input[disabled] .vsa-button:active {
      background-color: #ecedeb; }
    .a11y-high-c .vsa-checkbox-button input[disabled] + .vsa-button, .a11y-high-c .vsa-checkbox-button input[disabled] .vsa-button:active {
      border-color: #ecedeb; }
    .a11y-high-c .vsa-checkbox-button input[disabled] + .vsa-button, .a11y-high-c .vsa-checkbox-button input[disabled] .vsa-button:active {
      color: #7b7162; }
    .vsa-checkbox-button input[disabled] + .vsa-button:hover, .vsa-checkbox-button input[disabled] .vsa-button:active:hover {
      border-color: #ecedeb; }
      .a11y-high-c .vsa-checkbox-button input[disabled] + .vsa-button:hover, .a11y-high-c .vsa-checkbox-button input[disabled] .vsa-button:active:hover {
        border-color: #ecedeb; }
    .vsa-checkbox-button input[disabled] + .vsa-button svg, .vsa-checkbox-button input[disabled] .vsa-button:active svg {
      fill: #999082; }
      .a11y-high-c .vsa-checkbox-button input[disabled] + .vsa-button svg, .a11y-high-c .vsa-checkbox-button input[disabled] .vsa-button:active svg {
        fill: #7b7162; }
  .vsa-checkbox-button-capsule.vsa-button, .vsa-checkbox-button-capsule.vsa-button:hover, .vsa-checkbox-button-capsule.vsa-button:active {
    background-color: #464645;
    border-color: #464645;
    color: #fff;
    white-space: nowrap;
    position: absolute;
    bottom: -2.9375rem;
    left: -2.5rem;
    display: none;
    transition: .2s;
    cursor: default;
    z-index: 0;
    width: auto;
    border-radius: 0.5rem;
    font-family: AvenirRoman, AvenirBook, Arial, Helvetica, sans-serif; }
    .a11y-high-c .vsa-checkbox-button-capsule.vsa-button, .a11y-high-c .vsa-checkbox-button-capsule.vsa-button:hover, .a11y-high-c .vsa-checkbox-button-capsule.vsa-button:active {
      background-color: #464645; }
    .a11y-high-c .vsa-checkbox-button-capsule.vsa-button, .a11y-high-c .vsa-checkbox-button-capsule.vsa-button:hover, .a11y-high-c .vsa-checkbox-button-capsule.vsa-button:active {
      border-color: #464645; }
    .a11y-high-c .vsa-checkbox-button-capsule.vsa-button, .a11y-high-c .vsa-checkbox-button-capsule.vsa-button:hover, .a11y-high-c .vsa-checkbox-button-capsule.vsa-button:active {
      color: #fff; }
    .vsa-checkbox-button-capsule.vsa-button:hover, .vsa-checkbox-button-capsule.vsa-button:hover:hover, .vsa-checkbox-button-capsule.vsa-button:active:hover {
      border-color: #464645; }
      .a11y-high-c .vsa-checkbox-button-capsule.vsa-button:hover, .a11y-high-c .vsa-checkbox-button-capsule.vsa-button:hover:hover, .a11y-high-c .vsa-checkbox-button-capsule.vsa-button:active:hover {
        border-color: #464645; }
  .vsa-checkbox-button-capsule::before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #464645;
    position: absolute;
    top: -0.9375rem;
    left: 3.5rem; }
  .vsa-checkbox-button--cancellationSelection {
    /* checked style */
    /* disabled style */ }
    .vsa-checkbox-button--cancellationSelection .vsa-button:focus:hover {
      color: #000; }
      .a11y-high-c .vsa-checkbox-button--cancellationSelection .vsa-button:focus:hover {
        color: #000; }
    .vsa-checkbox-button--cancellationSelection .vsa-button span {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }
    .vsa-checkbox-button--cancellationSelection .vsa-button svg {
      margin-right: 0.3125rem; }
    .vsa-checkbox-button--cancellationSelection input[type=radio],
    .vsa-checkbox-button--cancellationSelection input[type=checkbox] {
      border: 0;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      height: 1px;
      margin: 0;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
      white-space: nowrap; }
    .vsa-checkbox-button--cancellationSelection input[type=radio]:checked + .vsa-button, .vsa-checkbox-button--cancellationSelection input[type=radio]:checked .vsa-button:active,
    .vsa-checkbox-button--cancellationSelection input[type=checkbox]:checked + .vsa-button,
    .vsa-checkbox-button--cancellationSelection input[type=checkbox]:checked .vsa-button:active {
      background-color: #fff;
      color: #ea5330;
      border-color: #ea5330;
      font-family: Baloo, AvenirBlack, AvenirHeavy, Arial, Helvetica, sans-serif; }
      .a11y-high-c .vsa-checkbox-button--cancellationSelection input[type=radio]:checked + .vsa-button, .a11y-high-c .vsa-checkbox-button--cancellationSelection input[type=radio]:checked .vsa-button:active, .a11y-high-c
      .vsa-checkbox-button--cancellationSelection input[type=checkbox]:checked + .vsa-button, .a11y-high-c
      .vsa-checkbox-button--cancellationSelection input[type=checkbox]:checked .vsa-button:active {
        background-color: #fff; }
      .a11y-high-c .vsa-checkbox-button--cancellationSelection input[type=radio]:checked + .vsa-button, .a11y-high-c .vsa-checkbox-button--cancellationSelection input[type=radio]:checked .vsa-button:active, .a11y-high-c
      .vsa-checkbox-button--cancellationSelection input[type=checkbox]:checked + .vsa-button, .a11y-high-c
      .vsa-checkbox-button--cancellationSelection input[type=checkbox]:checked .vsa-button:active {
        color: #d93914; }
      .a11y-high-c .vsa-checkbox-button--cancellationSelection input[type=radio]:checked + .vsa-button, .a11y-high-c .vsa-checkbox-button--cancellationSelection input[type=radio]:checked .vsa-button:active, .a11y-high-c
      .vsa-checkbox-button--cancellationSelection input[type=checkbox]:checked + .vsa-button, .a11y-high-c
      .vsa-checkbox-button--cancellationSelection input[type=checkbox]:checked .vsa-button:active {
        border-color: #d93914; }
      .vsa-checkbox-button--cancellationSelection input[type=radio]:checked + .vsa-button:focus, .vsa-checkbox-button--cancellationSelection input[type=radio]:checked .vsa-button:active:focus,
      .vsa-checkbox-button--cancellationSelection input[type=checkbox]:checked + .vsa-button:focus,
      .vsa-checkbox-button--cancellationSelection input[type=checkbox]:checked .vsa-button:active:focus {
        outline-color: rgba(234, 83, 48, 0.8) ;
        outline-style: dashed ;
        outline-width: thin ;
        outline-offset: -0.625rem ;
        box-shadow: none ; }
      .a11y-high-c .vsa-checkbox-button--cancellationSelection input[type=radio]:checked + .vsa-button:focus, .a11y-high-c .vsa-checkbox-button--cancellationSelection input[type=radio]:checked .vsa-button:active:focus, .a11y-high-c
      .vsa-checkbox-button--cancellationSelection input[type=checkbox]:checked + .vsa-button:focus, .a11y-high-c
      .vsa-checkbox-button--cancellationSelection input[type=checkbox]:checked .vsa-button:active:focus {
        outline-color: #ea5330 ;
        outline-width: thin ;
        outline-offset: -0.625rem ; }
      .vsa-checkbox-button--cancellationSelection input[type=radio]:checked + .vsa-button svg, .vsa-checkbox-button--cancellationSelection input[type=radio]:checked .vsa-button:active svg,
      .vsa-checkbox-button--cancellationSelection input[type=checkbox]:checked + .vsa-button svg,
      .vsa-checkbox-button--cancellationSelection input[type=checkbox]:checked .vsa-button:active svg {
        fill: #ea5330; }
        .a11y-high-c .vsa-checkbox-button--cancellationSelection input[type=radio]:checked + .vsa-button svg, .a11y-high-c .vsa-checkbox-button--cancellationSelection input[type=radio]:checked .vsa-button:active svg, .a11y-high-c
        .vsa-checkbox-button--cancellationSelection input[type=checkbox]:checked + .vsa-button svg, .a11y-high-c
        .vsa-checkbox-button--cancellationSelection input[type=checkbox]:checked .vsa-button:active svg {
          fill: #d93914; }
      .vsa-checkbox-button--cancellationSelection input[type=radio]:checked + .vsa-button:hover, .vsa-checkbox-button--cancellationSelection input[type=radio]:checked .vsa-button:active:hover,
      .vsa-checkbox-button--cancellationSelection input[type=checkbox]:checked + .vsa-button:hover,
      .vsa-checkbox-button--cancellationSelection input[type=checkbox]:checked .vsa-button:active:hover {
        background-color: #ecedeb;
        color: #ea5330;
        border-color: #ea5330; }
        .a11y-high-c .vsa-checkbox-button--cancellationSelection input[type=radio]:checked + .vsa-button:hover, .a11y-high-c .vsa-checkbox-button--cancellationSelection input[type=radio]:checked .vsa-button:active:hover, .a11y-high-c
        .vsa-checkbox-button--cancellationSelection input[type=checkbox]:checked + .vsa-button:hover, .a11y-high-c
        .vsa-checkbox-button--cancellationSelection input[type=checkbox]:checked .vsa-button:active:hover {
          background-color: #ecedeb; }
        .a11y-high-c .vsa-checkbox-button--cancellationSelection input[type=radio]:checked + .vsa-button:hover, .a11y-high-c .vsa-checkbox-button--cancellationSelection input[type=radio]:checked .vsa-button:active:hover, .a11y-high-c
        .vsa-checkbox-button--cancellationSelection input[type=checkbox]:checked + .vsa-button:hover, .a11y-high-c
        .vsa-checkbox-button--cancellationSelection input[type=checkbox]:checked .vsa-button:active:hover {
          color: #d93914; }
        .a11y-high-c .vsa-checkbox-button--cancellationSelection input[type=radio]:checked + .vsa-button:hover, .a11y-high-c .vsa-checkbox-button--cancellationSelection input[type=radio]:checked .vsa-button:active:hover, .a11y-high-c
        .vsa-checkbox-button--cancellationSelection input[type=checkbox]:checked + .vsa-button:hover, .a11y-high-c
        .vsa-checkbox-button--cancellationSelection input[type=checkbox]:checked .vsa-button:active:hover {
          border-color: #d93914; }
        .vsa-checkbox-button--cancellationSelection input[type=radio]:checked + .vsa-button:hover svg, .vsa-checkbox-button--cancellationSelection input[type=radio]:checked .vsa-button:active:hover svg,
        .vsa-checkbox-button--cancellationSelection input[type=checkbox]:checked + .vsa-button:hover svg,
        .vsa-checkbox-button--cancellationSelection input[type=checkbox]:checked .vsa-button:active:hover svg {
          fill: #ea5330;
          margin-right: 0.3125rem; }
          .a11y-high-c .vsa-checkbox-button--cancellationSelection input[type=radio]:checked + .vsa-button:hover svg, .a11y-high-c .vsa-checkbox-button--cancellationSelection input[type=radio]:checked .vsa-button:active:hover svg, .a11y-high-c
          .vsa-checkbox-button--cancellationSelection input[type=checkbox]:checked + .vsa-button:hover svg, .a11y-high-c
          .vsa-checkbox-button--cancellationSelection input[type=checkbox]:checked .vsa-button:active:hover svg {
            fill: #d93914; }
        @media only screen and (min-width: 64.0625em) {
          .vsa-checkbox-button--cancellationSelection input[type=radio]:checked + .vsa-button:hover, .vsa-checkbox-button--cancellationSelection input[type=radio]:checked .vsa-button:active:hover,
          .vsa-checkbox-button--cancellationSelection input[type=checkbox]:checked + .vsa-button:hover,
          .vsa-checkbox-button--cancellationSelection input[type=checkbox]:checked .vsa-button:active:hover {
            background-color: rgba(0, 0, 0, 0.035); } }
    .vsa-checkbox-button--cancellationSelection input[disabled] + .vsa-button, .vsa-checkbox-button--cancellationSelection input[disabled] .vsa-button:active {
      background-color: #ecedeb;
      border-color: #ecedeb;
      color: #999082;
      font-family: Baloo, AvenirBlack, AvenirHeavy, Arial, Helvetica, sans-serif;
      cursor: not-allowed; }
      .a11y-high-c .vsa-checkbox-button--cancellationSelection input[disabled] + .vsa-button, .a11y-high-c .vsa-checkbox-button--cancellationSelection input[disabled] .vsa-button:active {
        background-color: #ecedeb; }
      .a11y-high-c .vsa-checkbox-button--cancellationSelection input[disabled] + .vsa-button, .a11y-high-c .vsa-checkbox-button--cancellationSelection input[disabled] .vsa-button:active {
        border-color: #ecedeb; }
      .a11y-high-c .vsa-checkbox-button--cancellationSelection input[disabled] + .vsa-button, .a11y-high-c .vsa-checkbox-button--cancellationSelection input[disabled] .vsa-button:active {
        color: #7b7162; }
      .vsa-checkbox-button--cancellationSelection input[disabled] + .vsa-button:hover, .vsa-checkbox-button--cancellationSelection input[disabled] + .vsa-button:focus:hover, .vsa-checkbox-button--cancellationSelection input[disabled] .vsa-button:active:hover, .vsa-checkbox-button--cancellationSelection input[disabled] .vsa-button:active:focus:hover {
        border-color: #ecedeb;
        color: #999082; }
        .a11y-high-c .vsa-checkbox-button--cancellationSelection input[disabled] + .vsa-button:hover, .a11y-high-c .vsa-checkbox-button--cancellationSelection input[disabled] + .vsa-button:focus:hover, .a11y-high-c .vsa-checkbox-button--cancellationSelection input[disabled] .vsa-button:active:hover, .a11y-high-c .vsa-checkbox-button--cancellationSelection input[disabled] .vsa-button:active:focus:hover {
          border-color: #ecedeb; }
        .a11y-high-c .vsa-checkbox-button--cancellationSelection input[disabled] + .vsa-button:hover, .a11y-high-c .vsa-checkbox-button--cancellationSelection input[disabled] + .vsa-button:focus:hover, .a11y-high-c .vsa-checkbox-button--cancellationSelection input[disabled] .vsa-button:active:hover, .a11y-high-c .vsa-checkbox-button--cancellationSelection input[disabled] .vsa-button:active:focus:hover {
          color: #7b7162; }
      .vsa-checkbox-button--cancellationSelection input[disabled] + .vsa-button svg, .vsa-checkbox-button--cancellationSelection input[disabled] .vsa-button:active svg {
        fill: #999082; }
        .a11y-high-c .vsa-checkbox-button--cancellationSelection input[disabled] + .vsa-button svg, .a11y-high-c .vsa-checkbox-button--cancellationSelection input[disabled] .vsa-button:active svg {
          fill: #7b7162; }

/* Page de recherche de commande */
.Search {
  padding-bottom: 6.25rem; }
  .Search-header {
    background-color: #ea5330;
    color: #fff;
    position: relative;
    height: 6.25rem;
    overflow: hidden; }
    .a11y-high-c .Search-header {
      background-color: #d93914; }
    .Search-header h1 {
      margin-top: 2rem;
      font-size: 1.875rem; }
      .Search-header h1 span {
        font-size: 2.25rem !important; }
      @media only screen and (min-width: 40.063em) {
        .Search-header h1 {
          margin-top: 2.8125rem;
          margin-bottom: 2.5rem;
          font-size: 2.25rem; }
          .Search-header h1 span {
            font-size: 3rem !important; } }
    @media only screen and (min-width: 40.063em) {
      .Search-header {
        height: 12.5rem; } }
  .Search-headerText {
    display: none; }
    @media only screen and (min-width: 40.063em) {
      .Search-headerText {
        display: block;
        margin: 0 auto;
        width: 46.875rem;
        font-size: 1.125rem;
        text-align: center; } }
  .Search-headerTop {
    position: absolute;
    bottom: 0;
    left: -.3em;
    right: -.3em;
    color: #fff;
    pointer-events: none; }
    .Search-headerTop svg {
      fill: #fff;
      position: absolute;
      bottom: 0; }
      .a11y-high-c .Search-headerTop svg {
        fill: #fff; }
  .Search-content {
    text-align: center;
    padding: 0 2.5rem; }
    @media only screen and (max-width: 22.4375em) {
      .Search-content {
        padding: 0 1.25rem; } }
  .Search-access {
    font-size: 1.625rem;
    font-family: AvenirRoman, AvenirBook, Arial, Helvetica, sans-serif;
    font-weight: normal;
    line-height: 2.1875rem;
    margin-top: 2.5rem;
    margin-bottom: 0; }
    @media only screen and (min-width: 40.063em) {
      .Search-access {
        margin-top: 3.75rem;
        font-size: 1.875rem; } }
    .Search-access-highlight {
      font-family: Baloo, AvenirBlack, AvenirHeavy, Arial, Helvetica, sans-serif; }
  .Search-form {
    text-align: left;
    margin-top: 2.5rem; }
    @media only screen and (min-width: 40.063em) {
      .Search-form {
        display: flex;
        max-width: 42.5rem;
        justify-content: space-between;
        margin: 3.75rem auto auto; } }
  .Search-form:not(:first-child) {
    margin-top: 1.875rem; }
    @media only screen and (min-width: 40.063em) {
      .Search-form:not(:first-child) {
        margin-top: 1.5625rem; } }
  .Search-formLink {
    display: flex;
    margin-top: 0.625rem;
    align-items: center;
    cursor: pointer; }
    .Search-formLink svg {
      color: #ea5330;
      height: 0.9375rem;
      width: 0.9375rem;
      margin-left: 0.4375rem; }
      .a11y-high-c .Search-formLink svg {
        color: #d93914; }
  .Search-input:not(:first-child) {
    margin-top: 1.875rem; }
  @media only screen and (min-width: 40.063em) {
    .Search-input {
      width: calc(100% / 2 - 2.5rem); }
      .Search-input:not(:first-child) {
        margin-top: 0; } }
  .Search-input-error input {
    border-color: #d9002e;
    border-bottom-width: 0.125rem; }
    .a11y-high-c .Search-input-error input {
      border-color: #b51742; }
  .Search-MessageErrorLink {
    color: #d9002e; }
    .a11y-high-c .Search-MessageErrorLink {
      color: #b51742; }
  .Search-MessageError {
    color: #d9002e;
    font-family: AvenirHeavy, Arial, Helvetica, sans-serif;
    font-size: 0.875rem;
    margin-top: 0.4375rem; }
    .a11y-high-c .Search-MessageError {
      color: #b51742; }
  .Search-hidden {
    display: none; }
  .Search-showMyCommand {
    margin-top: 3.125rem; }
    .Search-showMyCommand button {
      border-radius: 2.375rem; }
    .Search-showMyCommand span {
      font-size: 1.25rem; }
  .Search-myAccount {
    max-width: 56.25rem;
    margin: auto;
    margin-top: 4.375rem; }
    .Search-myAccount p {
      font-size: 1rem; }
    @media only screen and (min-width: 40.063em) {
      .Search-myAccount {
        margin-top: 4.6875rem; } }
  .Search-pushTitle {
    margin-top: 4.6875rem !important;
    margin-bottom: 0 !important;
    text-align: center;
    font-size: 1.875rem;
    font-weight: normal;
    font-family: AvenirRoman, AvenirBook, Arial, Helvetica, sans-serif; }
    .Search-pushTitle-highlight {
      font-family: Baloo, AvenirBlack, AvenirHeavy, Arial, Helvetica, sans-serif; }
  .Search-pushes {
    max-width: 56.25rem;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    margin-top: 1.25rem !important; }
    @media only screen and (min-width: 40.063em) {
      .Search-pushes {
        margin-top: 2.8125rem !important; } }
  .Search-pushLine {
    display: flex;
    width: 100%;
    padding: 1.25rem 0; }
    .Search-pushLine:first-child {
      border-color: #e0ddd9;
      border-bottom-width: 1px;
      border-bottom-style: dashed; }
      .a11y-high-c .Search-pushLine:first-child {
        border-color: #e0ddd9; }
    @media only screen and (min-width: 40.063em) {
      .Search-pushLine {
        width: 50%;
        padding: 0; }
        .Search-pushLine:first-child {
          border-bottom: 0;
          border-color: #e0ddd9;
          border-right-width: 1px;
          border-right-style: dashed; }
          .a11y-high-c .Search-pushLine:first-child {
            border-color: #e0ddd9; } }
  .Search-push {
    border-color: #e0ddd9;
    border-left-width: 1px;
    border-left-style: dashed;
    width: 100%; }
    .a11y-high-c .Search-push {
      border-color: #e0ddd9; }
    .Search-push p {
      margin-top: 0.625rem; }
    .Search-push svg {
      width: 2.375rem;
      height: 2.375rem; }
    .Search-push:first-child {
      border: 0; }
  .Search-popinInfoRef {
    max-width: 28.125rem;
    margin: 0 auto;
    padding: 0 1.25rem;
    overflow-x: auto; }
    @media only screen and (min-width: 40.063em) {
      .Search-popinInfoRef {
        padding: 0 2.5rem; } }
  .Search-popinTitle {
    font-size: 1.25rem;
    line-height: 110%; }
  .Search-modalHighlight {
    font-family: Baloo, AvenirBlack, AvenirHeavy, Arial, Helvetica, sans-serif;
    display: block; }
    @media only screen and (min-width: 40.063em) {
      .Search-modalHighlight {
        display: inline; } }
  .Search-popinContent, .Search-popinLink {
    margin-top: 1.875rem; }

/* Loader button */
.animatedLoader {
  text-align: center; }

/*# sourceMappingURL=app.css.map*/