@import "common.css?version=dev-develop";
@import "autocomplete.css?version=dev-develop";
@import "commonSimiliDsfr.css?version=dev-develop";

/* 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);
}

.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;
    margin-top: 3rem;
}

.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;
    }
}

/* Ajoute une marge sur les champs réponses */
.form-horizontal .form-group {margin-top:1rem;}

/* 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_Employeur-container,
#CPEmployeur-container,
#Complement_Adresse_Salarie-container,
#CPSalarie-container,
#DateFinDroits-container {display: grid;}

#Complement_Adresse_Employeur-label,
#CPEmployeur-label,
#Complement_Adresse_Salarie-label,
#CPSalarie-label,
#DateFinDroits-label {grid-row:1;}
/* Mise en page du bloc info pour relecture*/

/* Aere le bloc apercu */
div#ModelLettre-panel-1-blockinfo-6-chapter-1.chapter-container.fiche-item {margin-top:3rem;}
/* Mise en page du bloc Aperçu */
.RecapFinal {
    border-bottom: none;
    display: block;
    text-align: center;
    font-family: 'marianne_light';
    font-size: 1.25rem ;
    line-height: 2rem ;
    margin: var(--text-spacing);
}

/* 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;
}

#ModelLettre-panel-1-blockinfo-6-chapter-2-section-1-content {
	background-color: #eee;
	padding: 2em;
	height: 100%;
	position: relative;
	border-radius: 5px;
	border : 1px solid #44317c;
}

/* Eléments de la page */ 
	.Titre { font-size :1.2rem; font-family: "marianne_bold"; color: rgb(68,49,124)}
	.SousTitre {font-size :1.4rem; font-family: "marianne_bold"; text-align:center; padding: 15px 0;}
	.Contenu {color: rgb(68,49,124);font-weight: bold;font-size:1.1rem;}
	.Nom { font-size: 1.1rem; font-family: "marianne_bold"; color: rgb(68,49,124); padding-left: 30px; }
	.Adresse {font-size: 1.1rem; font-family: "marianne_bold"; color: rgb(68,49,124); padding-left: 8rem;}
	.Sign {padding-left:40%; text-align: center; }