@import "common.css?version=dev-develop";

@font-face { font-family: 'marianne_light'; src: url("../static/fonts/Marianne-Light.woff?version=dev-develop") format("woff"), url("../static/fonts/Marianne-Light.woff2?version=dev-develop") format("woff2"), url("../static/fonts/Marianne-Light-webfont.ttf") format("truetype"); }
@font-face { font-family: 'marianne_regular'; src: url("../static/fonts/Marianne-Regular.woff?version=dev-develop") format("woff"), url("../static/fonts/Marianne-Regular.woff2?version=dev-develop") format("woff2"), url("../static/fonts/Marianne-Regular-webfont.ttf") format("truetype"); }
@font-face { font-family: 'marianne_bold'; src: url("../static/fonts/Marianne-Bold.woff?version=dev-develop") format("woff"), url("../static/fonts/Marianne-Bold.woff2?version=dev-develop") format("woff2"), url("../static/fonts/Marianne-Bold-webfont.ttf") format("truetype"); }

/* Définition des styles du simulateur (partie centrale) */
.container.main-container {
    max-width: 50rem;
    margin: auto;
}

.col-main {
	width: 100%;
    margin:0;
}

/* Titre et apparence générale*/
@media (min-width: 48em) {
	h1, article >h1 {font-size: 2.5rem; line-height: 3rem;}
	.fr-text--lg, .Intro {font-size: 1.25rem !important;line-height: 2rem !important;}	
}
@media (max-width: 321px) {
	body {font-family: 'marianne_light'; font-size: 0.8rem;}
	.step-page label, .step-page .label, .unit, p {font-size:0.8rem;}
}

h1, article >h1 {
	font-weight: 700;
	text-transform: none;
	font-family: "marianne_bold";
	font-size:  2.5rem !important;
    line-height:  3rem ;
	margin: var(--title-spacing);
	color: rgb(22, 22, 22);
    border:none;
}

h2.fr-h2 {
    font-weight:  700 ;
    font-size:  2rem ;
    line-height:  2.5rem ;
    margin: var(--title-spacing);
    color:rgb(22, 22, 22);
    font-family: "marianne_bold" !important;
}
h3 {
    font-weight:  700 ;
    font-size:  1.5rem ;
    line-height:  2rem ;
    margin: var(--title-spacing);
    color:rgb(22, 22, 22);
    font-family: "marianne_bold" !important;
    margin-top:0;
  }
  

b {font-family: 'marianne_bold';}
body {font-family: 'marianne_regular'; font-size:1rem; line-height: 1.5rem;color: var(--text-default-grey);}
p {
    font-size: 1rem;
    line-height: 1.5rem;
    margin: var(--text-spacing);
}

ul {margin:0;}

/* Masque les éléments non nécessaires */
div.mention-asterisk {	display: none; visibility:hidden;}
.simulator-breadcrumb {	display: none;visibility:hidden;}
.help-panel, .step-page .blockinfo-chapters, .fiche-item {border: none;}
.step-page .blockinfo-chapters, .step-page .section-content, .step-page .section-annotations {border: none; padding:0; margin:0;}
.fiche-item .fiche-item-content {padding:0;}
.fas , .fa-chevron-left, .fa-chevron-right, .fa .fa-chevron-up, .fa .fa-chevron-down { display: none; visibility:hidden; }
.step-page .section-content {  background-color: transparent;}
.step-page .label {text-align: left;}
.article ul li::before {display: none;}
.field-container {margin: 0 ; }
.step-page .blockinfo-chapters {margin-bottom: 0;}
.step-page div.fieldset {margin: 0;}
div.col-main a {color: #0606b2;}
.step-page fieldset, .step-page div.fieldset, fieldset, .form-horizontal .form-group {margin: 0; }
.foot-note, .step-page .foot-notes {margin: 0;color: rgb(58, 58, 58); }
.arrow-up, .arrow-down  {display: none;}
@media (min-width: 37em) {
    .step-page label, .step-page .label {width: 100% !important;}
}
@media (min-width: 1280px){
	.step-page input[type="text"], .step-page input[type="date"], .step-page input.date, .step-page input[type="number"], .step-page input[type="money"] {
  	width: 100%;}
}
@media (max-width: 480px) {
	.step-page input[type="text"], .step-page input[type="date"], .step-page input.date, .step-page input[type="number"], .step-page input[type="money"] {
  	width: 100%;}
}

/* Pas de fonds sur le fond de la croix de suppression */
.main button {background-color: transparent; }
.glyphicon {position: initial; padding-top: 12px; padding-right: 12px;margin-left: 0.5rem;}

/* Mise en page du Vérifié */
.sp-text--gray {
  color: var(--sp-text);
}
.fr-text--xs {
  font-size: 0.75rem !important;
  line-height: 1.25rem !important;
  margin: var(--text-spacing);
}
/* Mise en page de l'intro */
.Intro p {
	color: #3a3a3a;
	font-family: 'marianne_regular';
	font-size: 1.25rem;
  line-height: 2rem ;
  margin : 0 0 1rem 0;
}

.aNote  {box-shadow: inset 0.25rem 0 0 0 var(--border-default-blue-france); margin: 2rem 0; padding-left:2rem; color: #333333c4;}
.aNote p {font-size: 1rem; line-height:1rem; font-family: 'marianne_light';}

/* Mode d'emploi */
.ModeEmploi > h2 {font-size: 1rem; font-family: 'marianne_bold'; padding-left:1.5rem;color: var(--text-default-grey);}

.sp-panel.sp-blue-panel { border-color: var(--blue-france-main-525);}
.sp-panel {
  border: 1px solid var(--sp-grey-5);
  background-color: var(--sp-white);
  margin: 1rem 0;
  padding: 0.5rem 0;
}

.fr-py-1v { padding: 1rem 0.5rem;}

ul, article ul {
  list-style-type: var(--ul-type);
  padding-inline-start: var(--ul-start);
  padding-left: 2rem;
}
li, article li {
    margin-left: 2rem;
}

/* Timer */
.fr-callout {
  position: relative;
  background-color: var(--background-contrast-grey);
  box-shadow: inset 0.25rem 0 0 0 var(--border-default-blue-france);
  margin: 2rem 0;
  padding: 1rem 3rem;
}

.temps {padding-left: 1.5rem; }

/* Titre de l'étape */
.legend, .step-page .fieldset-container legend {
    border-bottom: none;
    display: block;
    text-align: center;
    font-family: 'marianne_light';
    font-size: 1.25rem ;
    line-height: 2rem ;
    margin: var(--text-spacing);
  }

  .RecapFinal {
    border-bottom: none;
    display: block;
    text-align: center;
    font-family: 'marianne_light';
    font-size: 1.25rem ;
    line-height: 2rem ;
    margin: var(--text-spacing);
  }

  .sp-entete-bullet .sp-entete-bullet-number {
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: -.2rem;
  }

  .sp-section-bullet {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 2.5rem;
    height: 2.5rem;
    background: var(--sp-blue);
    border-radius: 50%;
    color: var(--sp-white);
    margin-bottom: 0.5rem;
  }
  .sp-blue {
    color: #3a3a3a;
    font-family: "marianne_bold";
    fill: var(--sp-blue);
  }

.sp-section-bullet-green {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 2.5rem;
    height: 2.5rem;
    background: #18753c;
    border-radius: 50%;
    color: var(--sp-white);
    margin-bottom: 0.5rem;
}  

  @media (min-width: 48em) {
    .fr-text--lg {
        font-size: 1.25rem !important;
        line-height: 2rem !important;
    }
}

/* Question avec case à cocher */

.step-page .choice input[type="radio"],.fr-radio-group input[type="radio"] + label::before{
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    /*box-shadow: inset 0 0 0 1px #161616, inset 0 0 0 12px #fff, inset 0 0 0 12px #000091;*/
}

input, input[type="checkbox"] + label::before, input[type="radio"] + label::before, select, textarea {
  outline-offset: 2px;
  outline-width: 2px;
  outline-color: #0a76f6;
}
label, .fr-label, label +.control-label {
    display: block;
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--text-label-grey);
}

.form-horizontal .control-label {  text-align: left;}
.step-page label, .step-page .label {padding-right: 0; width: 90%;}

/* Mise en page du bloc facultatif ou Exemple*/
.step-page .post-note {
    grid-row:2;
    font-size: 0.75rem !important;
    line-height: 1.25rem;
    margin: 0 1rem;
    color: var(--text-mention-grey);
    font-family: "marianne_light";
}
/* Positionnement des exemples*/
#Complement_Adresse-container,
#Adresse_codepostal-container,
#Banque_Complement_Adresse-container,
#Banque_CodePostal-container,
#RefCompte-container,
#nomNotaireComplement-container,
#Telephone-container,
#Email-container {display: grid;}

#Complement_Adresse-label,
#Adresse_codepostal-label,
#Banque_Complement_Adresse-label,
#Banque_CodePostal-label,
#RefCompte-label,
#nomNotaireComplement-label,
#Telephone-label,
#Email-label
{grid-row:1;}

/* Correction d'un défaut de la common.css */
fieldset#Mariage_Multiple, fieldset#A_des_enfants,
fieldset#Changement_Nom, fieldset#Demande_Changement_Nom,
fieldset#Boursier, fieldset#Ancien_combattant,
fieldset#Prestations_Familiales, fieldset#Revenus_mob_Immo,
fieldset#Carte_Invalide, fieldset#A_Charge_Parents,
fieldset#Etudes, fieldset#Etude_en_France,
fieldset#Etat_de_Sante {margin-left: 5px;}

.step-page input[type="checkbox"] {width: 1.5rem; }

/* Mise en âge des blocs d'aide */
.step-page .help-panel {
	color:#0606b2;
	background: #E5E5F2;
	border : solid #0606b2;
	border-width: 1px 1px 1px 30px;
	padding: 3px 10px;
  width: fit-content;
}

.step-page .help-panel p {font-size: 0.85rem !important; line-height: 1.2rem }
.step-page .help-panel ul li {font-size: 0.75rem; line-height: 1.2rem; margin-left:2rem; list-style: circle;}

/* Mise en page du bloc complément d'info au ? */
.fr-info { padding: 7px 0; width: fit-content;
  box-shadow: inset 0 0 0 1px var(--border-plain-info), inset 2.5rem 0 0 0 var(--background-flat-info);  }

.fr-text--xs {
    font-size: 0.75rem !important;
    font-family: 'marianne_light';
    line-height: 1.25rem !important;
    margin: var(--text-spacing);
    padding: 0 0.5rem 0.25rem 3.5rem;
  }

/* Mise en page de la liste des pays */

 .fr-input, .form-control {
    display: block;
    width: 100%;
    border-radius: 0.25rem 0.25rem 0 0;
    font-size: 1rem;
    line-height: 1.5rem;
    padding: 0.5rem 1rem;
    color: var(--text-label-grey);
    background-color: #eee;
    box-shadow: inset 0 -2px 0 0 #3a3a3a;
  }
  .step-page .form-group[data-type="choice"]:not([data-expanded="true"]):not([data-expandedcolumnar="true"]) .input-group {
    border: none;
    width: 100%;
  }
  .step-page .form-group[data-type="choice"] a.listbox-button span {
    background-color: #000091;
    color: var(--text-inverted-blue-france);
  }

.step-page input[type="text"], .step-page input[type="date"],
.step-page input.date, .step-page input[type="number"], .step-page input[type="money"],
.step-page .form-group[data-type="date"] .input-group {
  color :#44317c;
  width: 100% !important;
  max-width: 100%;
  min-width: auto;
}

.step-page input.date {max-width: 100% !important;}
.step-page .form-group[data-type="date"] .input-group {border:none;}
.step-page a.datepicker-button.blue {color: #0606b2; }

/* Mise en page du bouton */
button.btn {
	border: 1px solid #000091;
	padding: 8px;
  background-color: transparent;
}

button.btn.btn-primary {
  background-color: #000091!important;
  color: var(--text-inverted-blue-france);
  border: 1px solid #0606b2;
}

.btn-secondary { text-transform: none !important; }
.btn-help, .btn-help-before {color: #0606b2; border:none; }

.step-page .action_buttons { text-align: left; float:left;}

/* Mise en page du bouton au survol*/
.fr-btn:hover, .btn.btn-secondary:hover {
	background-color: #f5f5fe;
}

/* Mise en page du bloc Info */
.Teleserv   {
	font-size: 1rem;
	font-family: "marianne_bold";
	background: #F2F2F9;
	border : solid #0606b2;
	border-width: 1px 1px 1px 30px;
	padding: 5px;
}

.Teleserv a, .Resume  a {color:#0606b2; }

/* Mise en page du résumé */

.Resume   {
	font-size: 0.9rem;;
  padding: 5px 10px;
  background-color: #f3f6f4;
	border : 1px solid  #0606b2;
	border-radius: 5px;
}
.Resume p {  font-size: 0.9rem; font-family: 'marianne_light';}
.Rappel p {  font-size: 0.8rem; font-family: 'marianne_light';}

/* Mise en page de la liste */

.sousListe {
  font-family: "marianne-ligth";
  font-size:0.9rem;
  font-style: italic;
  color: #2a313e;
  text-align: center;
}

.Resume h3 {
  font-family: "marianne_bold";
  font-size: 1.3rem;
  text-align: center;
  margin-bottom: 5px;
  color: #2a313e !important;
}

.Resume h4 {
  font-family: "marianne_bold";
  font-size: 1.1rem;
}

.Resume ul li {
  list-style-type: "\2610 " !important;
  padding-left: 1rem;
  margin-left: 2rem;
}

/* Titre de la question */
.form-horizontal .control-label, #nombreDeCompte-label.widthmax,
#lienAvecDefunt-label.widthmax, #InfoComptesDefunt-label.widthmax,
#TypeRemiseLettre-label.widthmax, #NotaireOuNon-label.widthmax {
	text-align: left;
	color: #3a3a3a;
	font-size: 1.1rem;
	font-family: "marianne_bold";
}

/* Spécifité sur la question des infos sur les comptes */
label#InfoComptesDefunt-label.widthmax,
label#TypeRemiseLettre-label.widthmax {width: 90% !important;}

.input-group {width: 100% !important;}

.input, .step-page input[type="text"],
.step-page input[type="number"] {
	border-radius: 0.25rem 0.25rem 0 0;
	font-size: 1rem;
	line-height: 1.5rem;
	padding: 0.5rem 1rem;
	color: #161616;
	background-color: #eee;
	box-shadow: inset 0 -2px 0 0 #3a3a3a;
}

/* Mise en page des blocs réponses */ 
.step-page .blockinfo-chapters {
	border: none;
	margin: 0;
	padding: 0;
}


/* Mise en page des blocs Succès */
.fr-alert--success {
  box-shadow: inset 0 0 0 1px #18753c, inset 2.5rem 0 0 0 #18753c;
}

/* Mise en page du bloc Alert */
.fr-alert--warning {
box-shadow: inset 0 0 0 1px #b34000, inset 2.5rem 0 0 0 #b34000;
}
.petit {font-size:0.8rem; font-style: italic; }

/* Mise en page du bloc Info */
.fr-alert--info {
  box-shadow: inset 0 0 0 1px #0063cb, inset 2.5rem 0 0 0 #0063cb;
}
.fr-alert--success p { font-family: "marianne_regular"; font-size:1.1rem;}

/* Mise en page du bloc de la lettre */
#ModelLettre-panel-1-blockinfo-6-chapter-1-section-3-content {
	border: 1px solid #44317c;
	border-radius: 10px;
	padding:10px;
}

/* Elements de la lettre */

/* Mise en page des éléments de la lettre */
#Global {
	font-size:1.1rem;
	padding-left: 10px;
}

.Exp {
	color: rgb(68,49,124);
	font-family: "marianne_bold";
	font-size:1.1rem;
}

.Dest {
	color: rgb(68,49,124);
	font-weight: bold;
	font-size:1.1rem;
	padding-left: 50%;
}
.Objet {padding: 3rem 0;}

.Sign {
	padding-left:40%;
	text-align: center;
}

.Contenu {
	color: rgb(68,49,124);
	font-weight: bold;
	font-size:1.1rem;
}

.PJ {font-size: 0.8rem; margin: 1rem 0;}
.PJ .Contenu {font-size: 0.8rem; margin: 1rem 0;}

.Info {	padding: 15px 20px;}

.retrait {text-indent: 2rem;}