/* variables nouvelle charte a utiliser */
:root {
  --primary-blue-color: #17479e; /* rgb(23, 71, 158) */
  --secondary-blue-color: #0c2b77; /* rgb(12, 43, 119) */
  --tertiary-yellow-color: #ffd200; /* rgb(255, 210, 0) */
  --lightblue-color: #f3f6fa; /* rgb(243, 246, 250) */
  --lightblue-hover-color: #e6e9ed; /* rgb(230, 233, 237) */
  --lightgrey-color: #f9f9f9; /* rgb(249, 249, 249) */
  --fade-popin-color: #02060d; /* rgb(2, 6, 13) */
  --mediumgrey-color: #d8d8d8; /* rgb(216, 216, 216) */
  --darkgrey-color: #4a4a4a; /* rgb(74, 74, 74) */
  --grey-color: #727272; /* rgb(114, 114, 114) */
  --success-color: #388514; /* rgb(56, 133, 20) */
  --error-color: #d0141b; /* rgb(208, 20, 27) */
  
  --main-bg-color: var(--lightblue-color);
  --main-title-color: var(--primary-blue-color);
  
  --text-font: LatoRegular, Arial, sans-serif;
  --text-bold-font: LatoBold, Arial, sans-serif;
  --text-black-font: LatoBlack, Arial, sans-serif;
  --text-italic-font: LatoItalic, LatoRegular, Arial, sans-serif;
  
  --link-color: var(--primary-blue-color);
  
  --pph-color: #d12566; /* rgb(209, 37, 102) */
  --epargne-color: #256ae5; /* rgb(, , ) */
  --assurance-color: #388514; /* rgb(, , ) */
  --credit-conso-color: #0f857c; /* rgb(, , ) */
  --pret-immo-color: #d4451b; /* rgb(, , ) */
  --patrimoniaux-color: #b65663; /* rgb(, , ) */
  --senior-color: #a2666f; /* rgb(, , ) */
  --famille-color: #5c6bc0; /* rgb(, , ) */
}

[class*="--alert"], [class*="--error"],
[class*="--alert"]:before, [class*="--error"]:before {
	color: #d0141b;
	color: var(--error-color);
}
[class*="--success"], [class*="--success"]:before {
	color: #388514 !important;
	color: var(--success-color) !important;
}
html, body, #page { height:100%; }
body { 
	background-color: #f3f6fa; /* pour IE */
	background-color: var(--main-bg-color);
	overflow-x: hidden;
}
body main { 
	font-family: LatoRegular, Arial, sans-serif;
	font-family: var(--text-font);
}
body #main { 
	overflow: visible;
	min-height: calc(100% - 300px);
}

/* pas de padding pour le template avec iframe car perturbe les media query dans l'iframe. 
Il faut que l'iframe soit pleine largeur de l'ecran en MOB et TAB */
#q4m-tpl .content { padding: 0; }

#ifrm1 { width: 100%; height:500px; }

/* surcharge pour le cas des popins */
body.contentPopin, .contentPopin #page { height:auto; }
body.contentPopin {
	background-color: #fff;
	padding-bottom: 2rem;
}
body.contentPopin #main { min-height: 0; }

a, a:hover, a:focus, a:active {
	color: #17479e;
	color: var(--primary-blue-color);
}

/* classes utilitaires */
.a-right { text-align: right !important; }
.a-left { text-align: left !important; }
.a-center { text-align: center !important; }
.nodisplay { display:none !important; }
.noscroll { overflow:hidden !important; }
.cf:after {
	content: "";
	clear: both;
	display: block;
}
[class*="--italic"] {
	font-style: italic;
}
.mtop60 {
	margin-top:6rem !important;
}
.margin20 { margin: 2rem 0; }
.marginT20 { margin-top: 2rem !important; }
.marginB20 { margin-bottom: 2rem !important;; }

.margin30 { margin: 3rem 0; }
.marginT30 { margin-top: 3rem !important; }
.marginB30 { margin-bottom: 3rem !important; }

.margin40 { margin: 4rem 0; }
.marginT40 { margin-top: 4rem !important; }
.marginB40 { margin-bottom: 4rem !important; }

.bloc-aem {
	color: var(--darkgrey-color);
	color: #4a4a4a;
}

.breakword { word-break: break-all; }

#main sup {
    font-size: 10px;
    line-height: 1;
    vertical-align: 2px;
}

.alert-user {
    padding: 0;
    background: #fff;
    width: 100%;
    max-width: none;
    border-top: 1px solid #E4E4E4;
    border-bottom: 1px solid #E4E4E4;
}
.alert-user .content {
    border: none;
    display: block;
    max-width: 940px;
    max-width: 94rem;
    margin: 0 auto;
}
#main-footer { background-color: #fff; }
#main-footer .footer { background-color: transparent; }

/* TITRES H1, H2, H3, etc */
#main .main-heading .ttl-1 {
	background: none;
	color: #17479e; /* pour IE */
	color: var(--main-title-color);
	font-size: 32px;
	font-size: 3.2rem;
	font-family: LatoBold, Arial, sans-serif !important; /* pour IE */
	font-family: var(--text-bold-font) !important; /* !important pour passer par dessus celui de default.css :( */
	font-weight: normal;
	text-transform: none;
	margin: 4rem 0;
	padding: 0;
	line-height: normal;
}
#main .main-heading .ttl-1 br {
	display: none;
}
#main .title-level2 {
    font-size: 2.4rem;
    /*font-weight: bold; -> ça fait sur-bold sur FF si on le laisse */
    font-family: LatoBold, Arial, sans-serif !important; /* pour IE */
	font-family: var(--text-bold-font) !important; /* !important pour passer par dessus celui de default.css :( */
    margin: 1rem 0;
    color: #000;
    text-transform: none;
}
#main .title-level2bis {
    font-size: 2rem;
}
#main .title-level3 {
    font-size: 1.8rem;
    /*font-weight: bold; -> ça fait sur-bold sur FF si on le laisse */
    font-family: LatoBold, Arial, sans-serif !important; /* pour IE */
	font-family: var(--text-bold-font) !important; /* !important pour passer par dessus celui de default.css :( */
    margin: 1rem 0;
    text-transform: none; /* surcharge par rapport à default.css */
}
.contentPopin #main .title-level3 {
    font-size: 16px;
}

#main .title-level4 {
    font-size: 14px;
    height: auto;
    color: #000;
}
#main .main-heading + .title-level1 {
	margin-top: -2rem;
}
#main .ttl-1 .title-level1 {
	display: block; margin-top: 2rem;
}

#main [class*='title-level'] > span {
	font-family: inherit;
	font-weight: inherit;
}

/* blocs éditos */
.CQblocedito { margin: 2rem 0; }

/* affichage des astérisques */
p.asterisque {
	color: #4a4a4a;
   	color: var(--darkgrey-color);
   	font-size: 1.4rem;
}
.regular-text {
	color: #4a4a4a;
   	color: var(--darkgrey-color);
   	font-size: 1.4rem;
}
.regular-text-16 {
	color: #4a4a4a;
   	color: var(--darkgrey-color);
   	font-size: 1.6rem;
}

.assets {
    text-transform: none;
    font-weight: normal;
    font-size: 16px;
    margin: 40px 0 10px;
    margin: 4rem 0 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.assets span {
    white-space: nowrap;
}
.assets .aside-info {
    font-style: italic;
    font-size: 1.4rem;
    color: #4a4a4a; /* pour IE */
    color: var(--darkgrey-color);
}
.assets > span:first-child,
.assets > div > span:first-child,
.assets > h2,
.assets > div > h2 {
    font-weight: bold;
    margin-right: 20px;
    display: inline-block;
}
.assets > p,
.assets > div > p {
    color: #4a4a4a; /* pour IE */
    color: var(--darkgrey-color);
    margin-right: 5px;
    display: inline-block;
}
.assets .access {
	white-space:nowrap;
	color: #17479e; /* pour IE */
	color: var(--link-color);
	font-size: 14px;
}
.assets .access {
	color: #17479e; /* pour IE */
	color: var(--link-color);
	display: inline-flex;
	align-items: center;
}
.assets .access > [class^="icon-"] {
	font-size: 1.8rem;
}
.assets .access span {
	text-decoration: underline;
}
.assets .access:hover,
.assets .access:active,
.assets .access:focus,
.assets .access:hover span,
.assets .access:active span,
.assets .access:focus span {
	text-decoration: none;
}

.access-data {
	color: #4a4a4a; /* pour IE */
    color: var(--darkgrey-color);
}

/* bloc info transverse */
.block2020 {
	background-color: #fff;
	border: 1px solid rgb(229, 229, 229);
	box-shadow: 0 2px 4px 0 rgba(12, 43, 119, 0.15);
	border-radius: 4px;
	font-size: 1.4rem;
	margin: 2rem 0; 
}
[class^="block-color--"] {
	border-left: 4px solid;
	border-radius: 4px;
	padding: 2rem;
}
.block-color--ccp {
	border-left-color: #d12566;
	border-left-color: var(--pph-color);
}
.block-info {
	padding: 3rem 5rem 3rem 6rem;
	position: relative;
}
.block-info-bis { padding-left: 3rem; }

.block-info p {
	margin:0;
}
.block-info p + p {
	margin-top: 0.75em;
}
.block-info > [class^="icon-"] {
	font-size: 2.4rem;
	position: absolute; left: 3rem; top: 2.8rem;
}

.block-disclaimer, .block-notice {
	padding: 2rem 2rem 2rem 5rem;
	font-size: 1.6rem;
	position: relative;
}
.block-notice {
	margin-top: -1rem;
}
.block-notice > [class^="icon-"], .block-disclaimer > [class^="icon-"] {
	font-size: 2.4rem;
	position: absolute; left: 2rem; top: 2rem;
}
.block-notice p, .block-disclaimer p {
	margin:0;
}

/* bloc d'information */
[class*="block-message--"] {
	text-align: center;
	padding: 4rem;
}

[class*="block-message--"] > [class^="icon-"] {
	font-size: 3.5rem; margin-bottom: 1.5rem;
}
[class*="block-message--info"] > [class^="icon-"] {
	font-size: 4.8rem;
}
[class*="block-message--"] .ttl-lvl2 {
	font-size: 2rem; margin-bottom: 1.5rem; color: #000;
	font-family: LatoBold, Arial, sans-serif !important; /* pour IE */
	font-family: var(--text-bold-font) !important; /* !important pour passer par dessus celui de default.css :( */
}
[class*="block-message--"] p {
	margin-top: .25rem; color: #000;
}
.block-info[class*="--alert"] > [class^="icon-"]:before,
.block-info.--alert > [class^="icon-"]:before,
.block-message--error > [class^="icon-"]:before,
.block-disclaimer > [class^="icon-"]:before {
	color: #d0141b;
	color: var(--error-color);
}
.block-info[class*="--confirm"] > [class^="icon-"]:before,
.block-info.--confirm > [class^="icon-"]:before,
.block-message--confirm > [class^="icon-"]:before {
	color: #388514;
	color: var(--success-color);
	font-size: 4rem;
}

.contentPopin .block2020.block-message--error { margin: 0 3rem;}

/* Blocs cliquables */
.block-link > .cartridge {
	display: flex; justify-content: space-between; align-items: flex-start;
	width:100%; height:100%;
	padding: 2.3rem 3rem;
	cursor: pointer;
}
.block-link > .cartridge:hover, .block-link > .cartridge:hover *,
.block-link > .cartridge:focus, .block-link > .cartridge:focus *,
.block-link > .cartridge:active, .block-link > .cartridge:active * {
	text-decoration: none;
}
.block-link:hover, .block-link:focus, .block-link:active {
	box-shadow: 0 4px 8px 0 rgba(12, 43, 119, 0.15);
}
.block-link .cartridge .block-link-data > [class^="icon-"] {
	margin-right: 2rem;
}
.block-link .cartridge [class^="icon-"] {
	font-size: 3.3rem;
}
.block-link .cartridge > [class^="icon-"] {
	align-self: center;
}
.block-link .cartridge .block-link-data {
	display: flex;
	align-items: flex-start;
	flex:1; /* à cause d'IE */
	padding-right:1rem;
}
.block-link .cartridge .block-link-data .main-text {
	display: block;
	font-weight: bold;
	font-size: 16px; 
	color: #17479e;
	color: var(--primary-blue-color);
	font-family: LatoBold, Arial, sans-serif !important; /* pour IE */
	font-family: var(--text-bold-font) !important; /* !important pour passer par dessus celui de default.css :( */
}
.block-link .cartridge .block-link-data .sub-text {
	display: block;
	color: #000;
}

/* BOUTONS */
button.btnNoStyle {
	border:none !important;
	background:none !important;
	padding:0 !important;
}
button.btnNoStyle:focus {
	text-decoration: none !important;
}
.button, #main .button, #main form .button {
    display: inline-block;
    min-width: auto; height: 5rem;
    padding: 0 !important;
    background-color: transparent;
    border: 1px solid #17479e; border-radius: 4px;
    font-size: 1.4rem;
    font-family: LatoRegular, Arial, sans-serif;
	font-family: var(--text-font);
    box-sizing: border-box;
    outline: none;
}
.button > span  > [class^="icon-"] {
	font-size:2.4rem;
	line-height:2.4rem;
	margin-right: .5rem;
}
.button--primary > span  > [class^="icon-"]:before {
	color: #fff;
}
.button > span, #main form .button > span {
	padding: 1rem 3rem; height:100%; 
    display: flex; justify-content: center; align-items: center;
    text-align: center;
    color: #17479e;
	color: var(--primary-blue-color);
    text-decoration: none !important;
}
.button > span > span, #main form .button > span > span {
	padding-right: .2rem;
}

.button:focus, #main form .button:focus, #main form .button.button--primary:focus {
    background-color: inherit;
    border: 3px double #17479e !important;
   /* outline: none;*/
}
.button:focus > span, #main form .button:focus > span, #main form .button.button--primary:focus > span {
    padding: 1rem 2.8rem;
}
.button:hover, .button:active, #main form .button:hover, #main form .button:active,  #main .button:hover, #main .button:active,
#main form .button.button--primary:active, #main form .button.button--primary:hover {
    background-color: inherit;
    border: 2px solid #0c2b77;
    text-decoration: none !important;
    outline: none;
}
.button:hover > span, .button:active > span, #main form .button:hover > span, #main form .button:active > span,
#main form .button.button--primary:active > span, #main form .button.button--primary:hover > span {
    padding: 1rem 2.9rem;
}

.button:hover span, .button:active span, .button:focus span, 
#main form .button:hover span, #main form .button:active span, #main form .button:focus span,
#main form .button.button--primary:active span, #main form .button.button--primary:hover span, #main form .button.button--primary:focus span {
    text-decoration: none;
}

#main form .button[disabled], #main form .button[aria-disabled=true]    {
    opacity: .7; /* ajusté pour répondre au contraste attendu par l'access de 3.1 minimum) */
    cursor: not-allowed;
}

.button.button--primary, #main form .button.button--primary {
    background-color: inherit;
    color: inherit;
}

.button.button--primary > span, #main form .button.button--primary > span {
    background-color: #17479E;
	background-color: var(--primary-blue-color);
    color: #FFF;
    display: block;
    height: 100%;
    display: flex; align-items: center; justify-content: center;
}
.button.button--primary:hover > span, .button.button--primary:active > span,
#main form .button.button--primary:hover > span, #main form .button.button--primary:active > span {
    background-color: #0C2B77;
}

#main form .button.cancel:hover, #main form .button.cancel:focus, #main form .button.cancel:active    {
    background-color: #E4E4E4;
}

button.linkUnderlineLook {
	border:none !important;
	background:none !important;
	padding:0 !important;
	display: flex;
	align-items: center;
}
button.linkUnderlineLook > span {
	color: #17479e;
	color: var(--primary-blue-color);
	text-decoration: underline;
}
button.linkUnderlineLook > i {
	font-size: 2.4rem;
	margin-right: .5rem;
}
button.linkUnderlineLook:focus {
	outline: none;
}
button.linkUnderlineLook:focus > span {
	border-bottom: 2px solid #17479e;
    line-height: 1.15;
    text-decoration: none;
}

/* désactivation css de q4x.css : */
thead>tr>th#statut, .montantTotal { text-align: inherit; }

/* pour empêcher iphone de détecter et styler les n° de contrat comme si c'était des numéros de téléphone */
.disableDetectionPhoneNb { pointer-events: none; }
.disableDetectionPhoneNb > a { text-decoration:none; color:inherit; }

/* ACCESSIBILITE */
/* à appliquer sur tout texte qui doit être lu par les assistances vocales sans être visible à l'écran */
.sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	-webkit-clip-path: inset(50%) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Pour TAB et DSK */
@media screen and (min-width: 767.5px) {
	body:not(.contentPopin) .only-mob { display: none; }
	a[href^="tel"]{ cursor: text;}
	a[href^="tel"]:hover,
	a[href^="tel"]:active,
	a[href^="tel"]:focus{ text-decoration: none; }
	
	/* 2 blocs en vis à vis SAUF pour le mode mobile */
	.flex-grid-2 {
		display: flex;
		justify-content: space-between;
	}
	.flex-grid-2 > div {
		width: calc(50% - 10px);
	}
}
/* Pour MOB */
@media screen and (max-width: 767.5px) {
	#main.content { padding: 0 1rem; }
	/* pas de padding pour le template avec iframe car perturbe les media query dans l'iframe. 
	Il faut que l'iframe soit pleine largeur de l'écran en MOB et TAB */
	#q4m-tpl #main.content { padding:0; }
	.assets, .assets > div:first-child > span { display: block; }
	.block-info { padding: 2rem 2rem 2rem 5rem; }
	.block-info-bis { padding-left: 2rem; }
	.block-info > [class^="icon-"] { left: 2rem; top: 1.8rem; }
	.block-link > .cartridge { padding: 2rem 1.5rem 2rem 2.2rem; }
	body:not(.contentPopin) .button, body:not(.contentPopin) #main form .button { width: 100%; margin:0; }
	body:not(.contentPopin) .button > span, body:not(.contentPopin) #main form .button > span { padding: 1rem; }
	body:not(.contentPopin) .button + .button, body:not(.contentPopin) #main form .button + .button { margin-top:1rem; }
	.contentPopin .block2020.block-message--error { margin: 0 1rem;}
	.breakword-mobile { word-break: break-all; }
}
@media screen and (max-width: 600px) {
	.button, #main form .button { width: 100%; margin:0; }
	.button + .button, #main form .button + .button { margin-top:1rem; }
}


