@charset "UTF-8";
/* GLOBAL STYLES */
/*
GENERAL
- menu à détailler
- 4 inner à détailler
- le container principal band-section inclus une marge en % pour écarter le menu du contenu *

ORGANISATION
- méthode BEM (Block, Element, Modifier) de manière non stricte sur ce projet.
- les modèles sont placés dans _global (variable et modèles généraux) et _composants (plus précis)
- les modification de ces modèles dans type_contenu.

NOTES :
- l'ombre pour démarquer la barre latérale est un bon choix, surtout en responsive (ombre supprimée le 22/10/25)

*/
/* == SOMMAIRE =================================================================== */
/* 1. Foundation */
/* 2. Fonction */
/* 3. Variable */
/* 4. Inner */
/* 7. Structure */
/* 8. Initialisation */
/* === 1. FOUNDATION ================================================================================== */
.row {
  max-width: 100%;
  /* à verifier */
}

.general {
  width: 100%;
  margin: auto;
  /*position:relative;*/
}

/* === 2. FONCTIONS =================================================================================== */
/* fonction rem */
/* fonction line-height */
/* === 3. VARIABLES  =================================================================================== */
/*Déclaration valeur par défaut des variables CSS dans :root pr accessibilité (pas var SCSS globale)*/
:root {
  --toolbar-height: 0px;
}

/* color */
/*NEW*/
/*NEW*/
/*#4E617A*/
/*$orange-l: #FF71343D;*/
/* font-family (à installer) */
/* taille de police courante (html 14)*/
/* margin-section */
/*@media only screen and (max-width: 40em) {
	$marg-s : r(40);
	$marg-m : r(50);
	$marg-l : r(60);
}*/
/* padding-section */
/*@media only screen and (max-width: 40em) {
	$marg-s : r(40);
	$marg-m : r(50);
	$marg-l : r(60);
}*/
/* Taille d'élément HMTL */
body.toolbar-horizontal {
  --toolbar-height: 39px;
}

body.toolbar-horizontal.toolbar-tray-open {
  --toolbar-height: 79px;
}

body.toolbar-vertical {
  --toolbar-height: 39px;
}

/* === 4. INNER ========================================================================== */
/* === 4.1 INNER VITRINE ============ */
/* inner par defaut (80% des sections) */
/* inner utilisé pour la section outil du site */
.inner {
  /*max-width:1640px;*/
  max-width: 86.2%;
  margin: auto;
}

/* correction si container foundation (ss padding 0.92 : 26.3px) */
.inner-c {
  /*max-width:1666px;*/
  max-width: 87.5%;
  margin: auto;
}

.inner-xxs {
  /*max-width:1090px;*/
  max-width: 57%;
  margin: auto;
}

.inner-xxsc {
  /*max-width:1116px;*/
  max-width: 58.6%;
  margin: auto;
}

.inner-xs {
  /*max-width:1090px;*/
  max-width: 60.67%;
  margin: auto;
}

/* inner utilisé pour la section vitrine du site */
.inner-s {
  /*max-width:1360px;*/
  max-width: 68%;
  margin: auto;
}

.inner-sc {
  /*max-width:1386px;*/
  max-width: 72.8%;
  margin: auto;
}

/*full size*/
.inner-xl {
  max-width: 100%;
  margin: auto;
}

/* inner spécifique */
/* === 4.2 INNER OUTIL ============ */
/* pour la section outil, l'inner est fixe et minimal (pas de responsive) sur .inner-spe des 2 sections (Cf. Client) */
.inner-tool {
  /*@todo à voir : pas d'inner general pour outil car besoin d un background pour la barre latérale*/
  /*@todo à voir : si besoin différencier inner outil avec une classe inner-o + variante inner-o-s, inner-o-m ect. */
}

/* header */
header .inner-tool {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

/* main */
#wrapper .general main .inner-tool aside.appli .inner-spe {
  padding-left: 2.5rem;
}
#wrapper .general main .inner-tool section.appli .inner-spe {
  padding-right: 2.5rem;
}

/* ==== 7.A STRUCTURE GENERALE VITRINE =========================================== */
/*@todo corriger le inner spé et mettre les 2 sur le main (à voir + simple)*/
main.vitrine {
  padding-top: 5rem;
}

/* ==== 7.A STRUCTURE GENERALE OUTIL =========================================== */
#wrapper .general {
  /*overflow: hidden;*/
}
#wrapper .general main {
  min-height: 45rem;
}
#wrapper .general main .inner-tool {
  display: flex;
  min-height: 50rem;
  /*zz*/
}
#wrapper .general main .inner-tool aside.appli .inner-spe, #wrapper .general main .inner-tool section.appli .inner-spe {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
#wrapper .general main .inner-tool aside.appli {
  width: 17.8571428571rem;
  flex-shrink: 0;
  background: #f5f5f9;
  /*box-shadow: 5px 0px 5px 0 rgba(0, 0, 0, 0.03);*/
  /*box-shadow: 10px 0px 20px 0 rgba(0, 0, 0, 0.04);*/
}
#wrapper .general main .inner-tool aside.appli .inner-spe {
  /*padding-left fait partie de l'inner (cf. inner-tool)*/
  padding-right: 0.5rem;
}
#wrapper .general main .inner-tool section.appli {
  position: relative;
  top: 5rem;
  flex: 1;
  /*width: 84%;*/
}
#wrapper .general main .inner-tool section.appli .inner-spe {
  padding-left: 8rem;
  /*padding-right fait partie de l'inner (cf. inner-tool)*/
}
#toolbar-bar {
  z-index: 8000;
}

/* === 8. INIT  ===================================================================================== */
* {
  padding: 0;
  margin: 0;
  border-width: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

html {
  font-size: 14px;
  overflow-y: overlay;
  scroll-behavior: smooth;
}

@media screen and (max-width: 1050px) {
  html,
  body {
    font-size: 13px;
  }
}
@media screen and (max-width: 900px) {
  html,
  body {
    font-size: 12px;
  }
}
@media screen and (max-width: 800px) {
  html,
  body {
    font-size: 11px;
  }
}
@media screen and (min-width: 2050px) {
  html,
  body {
    font-size: 16px;
  }
}
body {
  position: relative;
  /* son code utile */
  width: 100%;
  min-width: 320px;
  font-family: sans-serif;
  color: #474747;
  background: #fff;
}
body.scroll-lock {
  overflow: hidden;
}

.general {
  width: 100%;
}

h1,
h2,
h3,
h4 {
  font-weight: normal;
  font-size: 1em;
  margin: 0;
}

ul {
  list-style-type: none;
  margin: 0;
}

img {
  max-width: 100%;
  image-rendering: -webkit-optimize-contrast;
}

a {
  text-decoration: none;
}

input,
select {
  border: none;
}
input:focus,
select:focus {
  outline: none;
}

.slick-slide {
  outline: none;
}

header {
  background: #659e9d;
  position: relative;
  width: 100%;
  z-index: 5000;
}
header.vitrine {
  /*background:$green-l;*/
  /*background: linear-gradient(to bottom, #62999a, #487580);*/
  /*background: linear-gradient(to right, #487580 0%, #62999a 20%, #62999a 80%, #487580 100%);*/
  background: radial-gradient(circle, #62999a 60%, #487580 100%);
}
header.outil {
  background: #00203f;
}

.gin-secondary-toolbar {
  display: none !important;
}

/* === MENU LARGE === */
header .header-large {
  padding-top: 1rem;
  padding-bottom: 1rem;
  /*end contain*/
}
header .header-large .contain {
  height: 5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Désactivé pour l'instant */
  /*end menu*/
}
header .header-large .contain .logo {
  position: relative;
  width: 18%;
  z-index: 6000;
}
header .header-large .contain .logo img {
  width: 14rem;
}
header .header-large .contain .menu.menu-main {
  width: 62%;
  padding-left: 10rem;
  /*end nav*/
}
header .header-large .contain .menu.menu-main nav {
  width: 100%;
  /* == niveau 1 ==*/
}
header .header-large .contain .menu.menu-main nav ul.menu__links {
  display: flex;
  /*justify-content: space-evenly;*/
}
header .header-large .contain .menu.menu-main nav ul.menu__links li.item--0 {
  padding-bottom: 2.5rem;
  padding-top: 2.5rem;
  transition: 0.3s;
}
header .header-large .contain .menu.menu-main nav ul.menu__links li.item--0 a {
  display: inline-block;
  padding: 0.7rem 4rem 0 0;
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1.14285714em;
  line-height: 1.1666666667em;
  /*font-weight:bold;*/
  color: rgb(132, 151, 176); /*old $grey*/
  transition: 0.3s;
}
header .header-large .contain .menu.menu-main nav ul.menu__links li.item--0 a:hover {
  color: #fff;
}
header .header-large .contain .menu.menu-main nav ul.menu__links li.item--0 i {
  display: none;
}
header .header-large .contain .connexion {
  display: flex;
  align-items: center;
}
header .header-large .contain .connexion ul.menu-options li a, header .header-large .contain .connexion ul.menu-user li a {
  display: inline-block;
  padding: 0;
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1em;
  line-height: 1em;
  color: rgb(132, 151, 176);
  transition: 0.3s;
}
header .header-large .contain .connexion ul.menu-options li a:hover, header .header-large .contain .connexion ul.menu-user li a:hover {
  color: #fff;
}
header .header-large .contain .connexion ul.menu-options li {
  margin-left: 1rem;
  margin-right: 1rem;
}
header .header-large .contain .connexion ul.menu-options li:hover .hover {
  background: #0b3863;
}
header .header-large .contain .connexion ul.menu-options li.barre:after {
  display: inline-block;
  content: "";
  width: 0.0714285714rem;
  height: 1.4285714286rem;
  background: rgb(138, 138, 138);
  position: relative;
  top: 0;
  left: 0;
  margin-left: 1rem;
}
header .header-large .contain .connexion ul.menu-options li .hover {
  display: inline-block;
  padding: 0 0.25rem 0 0.25rem;
  border-radius: 0.5rem;
  background: #00203f;
  transition: 0.3s;
}
header .header-large .contain .connexion ul.menu-options li .hover a {
  /*margin-right:1rem;*/
  position: relative;
  top: -0.25rem;
  left: 0;
}
header .header-large .contain .connexion ul.menu-options li .hover a.icon-only:before {
  margin-right: 0;
}
header .header-large .contain .connexion ul.menu-options li .hover a:before {
  display: inline-block;
  margin-right: 1rem;
  content: "";
  width: 1.7857142857rem;
  height: 1.7857142857rem;
  transition: 0.3s;
  position: relative;
  top: 0.5rem;
  left: 0;
}
header .header-large .contain .connexion ul.menu-options li .hover a.lvl:before {
  background: url(../img/menu_top/arrow_up.svg) no-repeat center center;
  background-size: contain;
}
header .header-large .contain .connexion ul.menu-options li .hover a.phone:before {
  background: url(../img/menu_top/call.svg) no-repeat center center;
  background-size: contain;
}
header .header-large .contain .connexion ul.menu-options li .hover a.store:before {
  background: url(../img/menu_top/store.svg) no-repeat center center;
}
header .header-large .contain .connexion ul.menu-options li .hover a.help:before {
  background: url(../img/menu_top/help.svg) no-repeat center center;
}
header .header-large .contain .connexion ul.menu-options li .hover a.alert:before {
  background: url(../img/menu_top/alert.svg) no-repeat center center;
}
header .header-large .contain .connexion ul.menu-options li .hover a.assist:before {
  background: url(../img/menu_top/assist.svg) no-repeat center center;
}
header .header-large .contain .connexion ul.menu-user {
  justify-content: center;
  max-width: 8rem;
  position: relative;
  /*ICI*/
}
header .header-large .contain .connexion ul.menu-user li.register {
  position: relative;
  display: flex;
  align-items: center;
}
header .header-large .contain .connexion ul.menu-user li.register a img {
  width: 1.7857142857rem;
  margin-right: 0.5rem;
}
header .header-large .contain .connexion ul.menu-user li.register .bulle {
  background: rgba(255, 255, 255, 0.1803921569);
  opacity: 1;
  transition: 0.3s;
  border: none;
}
header .header-large .contain .connexion ul.menu-user li.register:hover {
  /*.bulle {
    opacity: 1;
  }*/
}
header .header-large .contain .connexion ul.menu-user li.register .btn-drop-down {
  display: inline-block;
  content: "";
  width: 1.7142857143rem;
  height: 1.7142857143rem;
  background: url(../img/menu_top/arrow_drop_down.svg) no-repeat center center;
  background-size: contain;
  transition: 0.3s;
  position: relative;
  top: 0;
  left: 0;
  cursor: pointer;
}
header .header-large .contain .connexion ul.menu-user ul.box-profil {
  width: 20rem;
  display: none;
  position: absolute;
  top: 3rem;
  right: -1rem;
  background: #f5f6f7;
  border-radius: 0.5rem;
  padding: 1rem 1rem;
  /*box-shadow: 0 13px 25px 0 rgba(32,45,58,.15);*/
  border: 1px solid rgb(211.5, 217.5, 222);
  transition: 0.3s;
}
header .header-large .contain .connexion ul.menu-user ul.box-profil li.profil {
  display: flex;
  align-items: center;
  padding-bottom: 1rem;
}
header .header-large .contain .connexion ul.menu-user ul.box-profil li.profil .picto {
  width: 4rem;
  flex-shrink: 0;
}
header .header-large .contain .connexion ul.menu-user ul.box-profil li.profil .picto img {
  /*width:4rem;*/
  margin-right: 1rem;
  border-radius: 50%;
  background: rgb(207.6857142857, 216.8857142857, 224.1142857143);
}
header .header-large .contain .connexion ul.menu-user ul.box-profil li.profil .infos {
  flex: 1;
  /*@todo include txt-14 : mettre header.scss après les composants dans main.scss si non impossible */
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1em;
  line-height: 1.2857142857em;
  color: #00203f;
}
header .header-large .contain .connexion ul.menu-user ul.box-profil li.profil .infos .name, header .header-large .contain .connexion ul.menu-user ul.box-profil li.profil .infos .mail {
  display: block;
}
header .header-large .contain .connexion ul.menu-user ul.box-profil li.profil .infos .name {
  font-family: "Roboto-Bold", sans-serif;
}
header .header-large .contain .connexion ul.menu-user ul.box-profil li.disconnect a {
  color: #4a5f7a;
}
header .header-large .contain .connexion ul.menu-user ul.box-profil li.disconnect a:hover {
  color: #00203f;
}

/*end menu large*/
header.vitrine {
  /*end header-large*/
}
header.vitrine .header-large {
  /*end contain*/
}
header.vitrine .header-large .contain {
  /*end menu*/
}
header.vitrine .header-large .contain .menu.menu-main {
  /*end nav*/
}
header.vitrine .header-large .contain .menu.menu-main nav {
  /* == niveau 1 ==*/
}
header.vitrine .header-large .contain .menu.menu-main nav ul.menu__links li.item--0 a {
  color: #00203f;
}
header.vitrine .header-large .contain .menu.menu-main nav ul.menu__links li.item--0 a:hover {
  color: #fff;
}
header.vitrine .header-large .contain .connexion ul.menu-user li a {
  color: #00203f;
}
header.vitrine .header-large .contain .connexion ul.menu-user li a:hover {
  color: #61bfad;
}
header.vitrine .header-large .contain .connexion ul.menu-user li.register, header.vitrine .header-large .contain .connexion ul.menu-user li.disconnect, header.vitrine .header-large .contain .connexion ul.menu-user li.connect {
  /* todo : passer directement par le .theme pour renvoyer une autre image user defaut - resoudre le pb */
  display: none;
}
header.vitrine .header-large .contain .connexion a.espace-client, header.vitrine .header-large .contain .connexion a.demo {
  display: inline-block;
  padding: 1.2rem 1rem;
  font-family: "Roboto-Medium", sans-serif;
  font-size: 1.14285714em;
  line-height: 1.1666666667em;
  color: #fff;
  border-radius: 0.8571428571rem;
  /*border:1px solid darken($green-d,5%);*/
  border: 1px solid rgba(0, 32, 63, 0.54);
  background: rgb(80.3824701195, 127.6175298805, 126.7888446215);
  transition: 0.3s;
}
header.vitrine .header-large .contain .connexion a.espace-client:hover, header.vitrine .header-large .contain .connexion a.demo:hover {
  background: #fff;
  color: #00203f;
}
header.vitrine .header-large .contain .connexion a.espace-client {
  margin-right: 2rem;
}
header.vitrine .header-large .contain .connexion a.demo {
  background: #61bfad;
}

/*end header*/
header.outil {
  position: fixed;
  top: var(--toolbar-height);
  left: 0;
}
header.outil .header-large {
  padding-top: 0;
  padding-bottom: 0;
}
header.outil .header-large .contain {
  /*@todo ici normalement le 70px pour pas l'appliquer a la partie vitrine (juste à outil)*/
}
header.outil .header-large .contain .logo img {
  width: 10rem;
}

/* Small Menu */
header .menu-small nav ul.menu__links li.item--0 {
  padding-bottom: 3rem;
}
header .menu-small nav ul.menu__links li.item--0 span {
  text-transform: uppercase;
}
header .menu-small .sublinks__items,
header .menu-small .subsublinks__items {
  padding-left: 2em;
  border-left: solid 3px #E4C41E;
}
header .menu-small .sublinks__items .item,
header .menu-small .subsublinks__items .item {
  padding: 0.5em;
}

/* === MENU SMALL === */
/* todo : réintegrer le code de David ici */
header .header-small {
  display: none;
  position: relative;
  z-index: 10000;
  padding: 0 0;
}
header .header-small .contain {
  height: 5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header .header-small .contain .logo img {
  width: 10rem;
}
header .header-small .contain .logo.v + .btn div {
  color: #00203f;
}
header .header-small .contain .logo + .btn div {
  color: #fff;
}
header .header-small .contain .btn .open-small-menu,
header .header-small .contain .btn .close-small-menu {
  font-size: 2.8em;
  color: #00203f;
}
header .header-small .contain .btn .close-small-menu {
  display: none;
}

/*::-webkit-scrollbar {
  display: block !important;
}*/
/*apparait au clic*/
header .menu-small {
  display: none;
  background: #659e9d;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  z-index: 5000;
  padding-top: 12rem;
  /*end nav*/
}
header .menu-small nav {
  width: 100%;
  /* == niveau 1 ==*/
  /* == menu 1 ==*/
}
header .menu-small nav ul.menu__links {
  margin-top: 3rem;
}
header .menu-small nav ul.menu__links li.item--0 {
  padding-bottom: 3rem;
}
header .menu-small nav ul.menu__links li.item--0 span,
header .menu-small nav ul.menu__links li.item--0 i,
header .menu-small nav ul.menu__links li.item--0 a {
  font-size: 1.71428571em;
  line-height: 1.1666666667em;
  /*font-weight:bold;*/
  color: #00203f;
  /*text-transform:uppercase;*/
  transition: 0.3s;
}
header .menu-small nav ul.menu__links li.item--0 span:hover,
header .menu-small nav ul.menu__links li.item--0 i:hover,
header .menu-small nav ul.menu__links li.item--0 a:hover {
  color: #fff;
}
header .menu-small nav ul.menu__links li.item--0 i {
  display: none;
  color: #E4C41E;
}
header .menu-small nav ul.menu__links li.item--0 span,
header .menu-small nav ul.menu__links li.item--0 a {
  font-family: "Roboto-Regular", sans-serif;
}
header .menu-small nav ul.menu__links li.item--0 i {
  padding-left: 3.2rem;
}
header .menu-small nav ul.menu__links li.item--0.on .contain_sublinks {
  display: block;
}

/*end menu*/
footer {
  background: #00203f;
  padding-top: 6rem;
  padding-bottom: 6rem;
}
footer .inner, footer .inner-s {
  /*end footer content*/
}
footer .inner .footer-content, footer .inner-s .footer-content {
  padding-bottom: 6rem;
  /*end footer main*/
}
footer .inner .footer-content .txt-14, footer .inner-s .footer-content .txt-14 {
  line-height: 1.7142857143em;
}
footer .inner .footer-content .footer-main, footer .inner-s .footer-content .footer-main {
  display: flex;
  justify-content: space-between;
  /*end footer item*/
}
footer .inner .footer-content .footer-main .footer-item, footer .inner-s .footer-content .footer-main .footer-item {
  display: flex;
  justify-content: space-around;
  width: 21.7%;
  padding: 0 1.5rem;
}
footer .inner .footer-content .footer-main .footer-item:first-child, footer .inner-s .footer-content .footer-main .footer-item:first-child {
  padding-left: 0;
}
footer .inner .footer-content .footer-main .footer-item .contain, footer .inner-s .footer-content .footer-main .footer-item .contain {
  /*width:70%;*/
}
footer .inner .footer-content .footer-main .footer-item:not(:last-child), footer .inner-s .footer-content .footer-main .footer-item:not(:last-child) {
  border-right: 1px solid rgba(132, 151, 176, 0.15);
}
footer .inner .footer-content .footer-main .footer-item h3, footer .inner-s .footer-content .footer-main .footer-item h3 {
  font-family: "Roboto-Bold", sans-serif;
  font-size: 1.14285714em;
  line-height: 1.12em;
  font-weight: bold;
  color: #dde2e7;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}
footer .inner .footer-content .footer-main .footer-item a, footer .inner .footer-content .footer-main .footer-item span, footer .inner-s .footer-content .footer-main .footer-item a, footer .inner-s .footer-content .footer-main .footer-item span {
  color: rgb(132, 151, 176);
}
footer .inner .footer-content .footer-main .footer-item.first, footer .inner-s .footer-content .footer-main .footer-item.first {
  width: 35%;
}
footer .inner .footer-content .footer-main .footer-item.first .txt-14, footer .inner-s .footer-content .footer-main .footer-item.first .txt-14 {
  max-width: 75%;
}
footer .inner .footer-content .footer-main .footer-item.first .logo, footer .inner-s .footer-content .footer-main .footer-item.first .logo {
  margin-bottom: 1.5rem;
}
footer .inner .footer-content .footer-main .footer-item.first .logo img, footer .inner-s .footer-content .footer-main .footer-item.first .logo img {
  width: 16rem;
}
footer .inner .footer-content .footer-main .footer-item.first p, footer .inner-s .footer-content .footer-main .footer-item.first p {
  color: rgb(132, 151, 176);
}
footer .inner .footer-sub, footer .inner-s .footer-sub {
  display: flex;
  justify-content: space-between;
}
footer .inner .footer-sub .second a, footer .inner-s .footer-sub .second a {
  display: inline-block;
  margin-right: 2rem;
}
footer .inner .footer-sub span, footer .inner .footer-sub a, footer .inner-s .footer-sub span, footer .inner-s .footer-sub a {
  display: inline-block;
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1em;
  line-height: 1.2857142857em;
  color: rgb(132, 151, 176);
}

/* COMPOSANTS STYLES */
/* == COMPOSANT =================================================================== */
/* faire control + F par le nombre*/
/* 1. Polices */
/* 2. Titre */
/* 3. Texte */
/* 4. Liste */
/* 5. Lien */
/* 6. Boutons */
/* 7. Menu */
/* 8. Dialogue Box */
/* 9. Fichier (images, vidéo etc.) */
/* 10. Icones */
/* 11. Background */
/* 12. Divers */
/* 12. Responsive composants */
/* == GROUPE =================================================================== */
/* 13. Slider */
/* 14. Tableau */
/* 15. Pager */
/* 16. Formulaire */
/* 17. Champs */
/* 18. Champs spécifique */
/* 19. Editeur Wisiwyg */
/* 20. Paragraphe */
/* 21. pattern */
/* 22. view */
/* == SECTION =================================================================== */
/*Voir sections.scss*/
/* == COMPOSANT =================================================================== */
/* 1. POLICE ========================== */
@font-face {
  font-family: "Poppins-Bold";
  src: url("../fonts/Poppins-Bold.eot");
  src: url("../fonts/Poppins-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/Poppins-Bold.woff2") format("woff2"), url("../fonts/Poppins-Bold.woff") format("woff"), url("../fonts/Poppins-Bold.ttf") format("truetype"), url("../fonts/Poppins-Bold.svg#Poppins-Bold") format("svg");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins-Regular";
  src: url("../fonts/Poppins-Regular.eot");
  src: url("../fonts/Poppins-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Poppins-Regular.woff2") format("woff2"), url("../fonts/Poppins-Regular.woff") format("woff"), url("../fonts/Poppins-Regular.ttf") format("truetype"), url("../fonts/Poppins-Regular.svg#Poppins-Regular") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins-SemiBold";
  src: url("../fonts/Poppins-SemiBold.eot");
  src: url("../fonts/Poppins-SemiBold.eot?#iefix") format("embedded-opentype"), url("../fonts/Poppins-SemiBold.woff2") format("woff2"), url("../fonts/Poppins-SemiBold.woff") format("woff"), url("../fonts/Poppins-SemiBold.ttf") format("truetype"), url("../fonts/Poppins-SemiBold.svg#Poppins-SemiBold") format("svg");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto-Bold";
  src: url("../fonts/Roboto-Bold.eot");
  src: url("../fonts/Roboto-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-Bold.woff2") format("woff2"), url("../fonts/Roboto-Bold.woff") format("woff"), url("../fonts/Roboto-Bold.ttf") format("truetype"), url("../fonts/Roboto-Bold.svg#Roboto-Bold") format("svg");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto-Regular";
  src: url("../fonts/Roboto-Regular.eot");
  src: url("../fonts/Roboto-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-Regular.woff2") format("woff2"), url("../fonts/Roboto-Regular.woff") format("woff"), url("../fonts/Roboto-Regular.ttf") format("truetype"), url("../fonts/Roboto-Regular.svg#Roboto-Regular") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto-Medium";
  src: url("../fonts/Roboto-Medium.eot");
  src: url("../fonts/Roboto-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-Medium.woff2") format("woff2"), url("../fonts/Roboto-Medium.woff") format("woff"), url("../fonts/Roboto-Medium.ttf") format("truetype"), url("../fonts/Roboto-Medium.svg#Roboto-Medium") format("svg");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* 2. TITRE ========================== */
.title-s {
  font-family: "Poppins-SemiBold", sans-serif;
  font-size: 1.42857143em;
  line-height: 1.15em;
  font-weight: bold;
  color: #00203f;
}
.title-s span {
  color: #61bfad;
}

.title-m {
  font-family: "Poppins-SemiBold", sans-serif;
  font-size: 1.929em;
  line-height: 1.1111111111em;
  font-weight: bold;
  color: #00203f;
}
.title-m span {
  color: #61bfad;
}

.title-l {
  font-family: "Poppins-SemiBold", sans-serif;
  font-size: 2.5em;
  line-height: 1.1428571429em;
  font-weight: bold;
  color: #00203f;
}
.title-l span {
  color: #61bfad;
}
.title-l.center {
  text-align: center;
}

/*section du site vitrine / outil*/
/*correction de la graphiste pour partie vitrine*/
/*@todo attention pas de correction dans les mixins*/
main.vitrine .title-l, main.vitrine .title-m, main.vitrine .title-s {
  font-family: "Poppins-Bold", sans-serif;
}
main.vitrine .title-l {
  font-size: 3.143em;
  line-height: 1.25em;
}

/* 3. TEXTE ========================== */
.txt-12 {
  font-family: "Roboto-Regular", sans-serif;
  font-size: 0.85714286em;
  line-height: 1.25em;
  color: #00203f;
}

.txt-13 {
  font-family: "Roboto-Regular", sans-serif;
  font-size: 0.92857143em;
  line-height: 1.3076923077em;
  color: #00203f;
}

.txt-14 {
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1em;
  line-height: 1.2857142857em;
  color: #00203f;
}

.txt-16 {
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1.14285714em;
  line-height: 1.1875em;
  color: #00203f;
}

.txt-18 {
  font-family: "Poppins-Regular", sans-serif;
  font-size: 1.28571429em;
  line-height: 1.1666666667em;
  color: #00203f;
}

/* texte description gris */
.desc {
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1.07142857em;
  line-height: 1.2666666667em;
  color: rgb(132, 151, 176);
}

.desc-s {
  font-family: "Roboto-Regular", sans-serif;
  font-size: 0.85714286em;
  line-height: 1.3333333333em;
  color: #b7c5d0;
  font-style: italic;
}

/*à la base 1 taille de ref pour p, ul => 16px, graphiste à ajouter 18 pour la home & section vitrine*/
.para, .text-formatted {
  /*section du site vitrine / outil*/
  /*correction de la graphiste pour partie vitrine*/
  /*@todo attention pas de correction dans les mixins*/
}
.para p, .para ul, .para ol, .text-formatted p, .text-formatted ul, .text-formatted ol {
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1.14285714em;
  line-height: 1.5em;
  color: #00203f;
  margin-bottom: 1.5rem;
}
.para p a, .para ul a, .para ol a, .text-formatted p a, .text-formatted ul a, .text-formatted ol a {
  color: #61bfad;
  font-weight: bold;
  transition: 0.3s;
}
.para p a:hover, .para ul a:hover, .para ol a:hover, .text-formatted p a:hover, .text-formatted ul a:hover, .text-formatted ol a:hover {
  color: #00203f;
}
.para main.vitrine .para p, .para main.vitrine .para ul, .para main.vitrine .para ol, .para main.vitrine .text-formatted p, .para main.vitrine .text-formatted ul, .para main.vitrine .text-formatted ol, .text-formatted main.vitrine .para p, .text-formatted main.vitrine .para ul, .text-formatted main.vitrine .para ol, .text-formatted main.vitrine .text-formatted p, .text-formatted main.vitrine .text-formatted ul, .text-formatted main.vitrine .text-formatted ol {
  font-size: 1.28571429em;
  font-family: "Poppins-Regular", sans-serif;
}
.para ul, .text-formatted ul {
  padding-left: 1rem;
}
.para ol, .text-formatted ol {
  padding-left: 2rem;
}
.para ul li:before, .text-formatted ul li:before {
  display: inline-block;
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background: #00203f;
  border-radius: 2rem;
  margin-right: 0.71429rem;
  transition: 0.3s;
  position: relative;
  top: 0;
  left: 0;
}
.para h2, .para h3, .text-formatted h2, .text-formatted h3 {
  padding-bottom: 1.5rem;
}
.para h2, .text-formatted h2 {
  font-family: "Poppins-SemiBold", sans-serif;
  font-size: 1.929em;
  line-height: 1.1111111111em;
  font-weight: bold;
  color: #00203f;
}
.para h2 span, .text-formatted h2 span {
  color: #61bfad;
}
.para h3, .text-formatted h3 {
  font-family: "Poppins-SemiBold", sans-serif;
  font-size: 1.42857143em;
  line-height: 1.15em;
  font-weight: bold;
  color: #00203f;
}
.para h3 span, .text-formatted h3 span {
  color: #61bfad;
}

/* line height commun */
p,
ul {
  line-height: 1.5em;
}

/* 4. LISTE ========================== */
ul.check-green li {
  position: relative;
}
ul.check-green li:before {
  display: inline-block;
  content: "";
  width: 1.4285714286rem;
  height: 1.4285714286rem;
  background: url(../img/icon/check-circle.svg) no-repeat center center;
  background-size: contain;
  position: relative;
  top: 0.3rem;
  left: 0;
  padding-right: 2.5rem;
}

ul.check-normal li {
  position: relative;
}
ul.check-normal li:before {
  display: inline-block;
  content: "";
  width: 1.15rem;
  height: 1.15rem;
  background: url(../img/icon/check_green.svg) no-repeat center center;
  background-size: contain;
  position: relative;
  top: 0.3rem;
  left: 0;
  padding-right: 2.5rem;
}

/* 5. LIENS ========================== */
a {
  color: #474747;
}
/* 6. BOUTONS ========================== */
/* bouton blanc par défaut*/
.btn-v,
.btn-o,
.btn-w,
.btn-xs {
  display: inline-block;
  /*display: inline-block;*/
}
.btn-v a,
.btn-o a,
.btn-w a,
.btn-xs a {
  display: inline-block;
  text-align: center;
  /*width:15rem;*/
  font-family: "Roboto-Medium", sans-serif;
  font-size: 1.14285714em;
  line-height: 1em;
  color: #fff;
  padding: 1rem 2.2857142857rem;
  background: #61bfad;
  border: 1px solid #61bfad;
  border-radius: 4.5rem;
  transition: 0.3s;
}
.btn-v:hover a,
.btn-o:hover a,
.btn-w:hover a,
.btn-xs:hover a {
  background: rgb(68.3243243243, 168.6756756757, 149.4594594595);
  border-color: rgb(68.3243243243, 168.6756756757, 149.4594594595);
}

.btn-w a {
  color: #00203f;
  background: #fff;
  border-color: rgb(132, 151, 176);
}
.btn-w:hover a {
  color: #fff;
}

.btn-o a {
  color: #fff;
  background: #ED7D31;
  border-color: #ED7D31;
  border-width: 2px;
  padding: 1.3rem 2.2857142857rem;
  border-radius: 0.8571428571rem;
}
.btn-o:hover a {
  background: #fff;
  color: #ED7D31;
  border-color: #ED7D31;
}

/*todo à revoir*/
/*boutons dans le contexte tableau devant le lien*/
/*@todo 1.trie à faire */
tr {
  /*next et edit sont les même*/
}
tr .btn-next, tr .btn-delete, tr .btn-edit, tr .btn-see, tr .btn-add-sm, tr .btn-pdf {
  display: inline-block;
  position: relative;
  opacity: 0;
  transition: 0.3s 0.2s;
}
tr .btn-next:before, tr .btn-delete:before, tr .btn-edit:before, tr .btn-see:before, tr .btn-add-sm:before, tr .btn-pdf:before {
  display: inline-block;
  position: absolute;
  top: -0.4rem;
  left: -4.5rem;
  margin-left: 2rem !important;
  content: "";
  width: 1.8rem;
  height: 1.8rem;
  transition: 0.3s;
}
tr .btn-next:before, tr .btn-edit:before {
  background: url(../../images/icon/edit.png) no-repeat center center;
  background-size: contain;
}
tr .btn-next:hover:before, tr .btn-edit:hover:before {
  background: url(../../images/icon/edit-b.png) no-repeat center center;
  background-size: contain;
}
tr .btn-delete:before {
  background: url(../../images/icon/delete.png) no-repeat center center;
  background-size: contain;
}
tr .btn-delete:hover:before {
  background: url(../../images/icon/delete-b.png) no-repeat center center;
  background-size: contain;
}
tr .btn-pdf:before {
  background: url(../../images/icon/pdf.png) no-repeat center center;
  background-size: contain;
}
tr .btn-pdf:hover:before {
  background: url(../../images/icon/pdf-b.png) no-repeat center center;
  background-size: contain;
}
tr .btn-see:before {
  background: url(../../images/icon/look.png) no-repeat center center;
  background-size: contain;
}
tr .btn-see:hover:before {
  background: url(../../images/icon/look-b.png) no-repeat center center;
  background-size: contain;
}
tr .btn-add-sm:before {
  background: url(../../images/icon/add_sm.png) no-repeat center center;
  background-size: contain;
}
tr:hover .btn-see, tr:hover .btn-edit, tr:hover .btn-delete, tr:hover .btn-add-sm, tr:hover .btn-pdf {
  opacity: 1;
}

/*icone dans le contexte tableau : brouillon, envoyé ... */
/*@todo 1. #admin, 2.trie à faire */
#admin tr {
  position: relative;
}
#admin tr td:first-child {
  padding-left: 3rem;
}
#admin tr .valide, #admin tr .invalide {
  position: relative;
  text-align: center;
}
#admin tr .valide:hover .bulle, #admin tr .invalide:hover .bulle {
  opacity: 1;
}
#admin tr .valide .bulle, #admin tr .invalide .bulle {
  position: absolute;
  top: 1.5rem;
  left: 65%;
  content: "";
  opacity: 0;
  transition: 0.3s;
}
#admin tr .valide:before, #admin tr .invalide:before {
  display: inline-block;
  position: absolute;
  top: 1.5rem;
  left: 40%;
  content: "";
  width: 1.8571428571rem;
  height: 1.8571428571rem;
}
#admin tr .invalide:before {
  background: url(../../images/icon/unverified.svg) no-repeat center center;
  background-size: contain;
}
#admin tr .valide:before {
  background: url(../../images/icon/verified.svg) no-repeat center center;
  background-size: contain;
}
#admin tr .invalide .bulle, #admin tr .valide .bulle {
  /*width:10rem;*/
}

/* 7. MENU (+ arianne) ================== */
.fil-arianne {
  position: relative;
  top: -1rem;
}
.fil-arianne ul li {
  display: inline-block;
}
.fil-arianne ul li a, .fil-arianne ul li span {
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1em;
  line-height: 1.2857142857em;
  color: #00203f;
}
.fil-arianne ul li:last-child span {
  color: #61bfad;
}
.fil-arianne ul i {
  font-style: normal;
}

/* 8. DIALOGUE BOX ===================== */
.messages {
  margin-bottom: 3rem;
}
.messages a {
  color: #00203f;
  font-weight: bold;
  transition: 0.3s;
}
.messages a:hover {
  color: #61bfad;
}
.messages .item-list ul li {
  margin-left: 0;
}

.messages--status, .messages--error, .messages--warning {
  /*border:none !important;*/
  box-shadow: none !important;
  background-position: 0.8rem 1.1rem !important;
  color: #00203f !important;
  /*border-color: #c9e1bd #c9e1bd #c9e1bd transparent;*/
  background-color: #E7F4F2 !important;
  border-radius: 0.5rem !important;
  /*background-image: url(../../../../misc/icons/73b355/check.svg);*/
  border: none !important;
}

/*@todo P2 différencier le template des messages selon si outil et si vitrine (inner-s dans le cas de vitrine)*/
main.vitrine .messages:not(.cs) {
  position: fixed;
  margin: auto;
  bottom: 2rem;
  left: 5%;
  right: 5%;
  background-color: rgba(231, 244, 242, 0.78) !important;
  z-index: 8000;
}

/*bulle blanche*/
.bulle {
  display: inline-block;
  background: #fff;
  color: #b7c5d0 !important;
  font-size: 0.8em !important;
  border-radius: 0.5rem;
  border: 1px solid #b7c5d0;
  padding: 0.25rem 0.5rem;
  max-width: 12rem;
  z-index: 500;
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(-20px);
  }
  40% {
    transform: translateY(0);
  }
}
#loader {
  display: none;
  position: fixed; /* Reste en place même au scroll */
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; /* 100% de la hauteur de l'écran */
  background: rgba(0, 0, 0, 0); /* Transparence totale */
  z-index: 9000; /* Doit être au-dessus de tout */
}
#loader .contain {
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  align-items: center;
  background: rgba(193, 231, 224, 0.85);
  border-radius: 1rem;
  padding: 3rem;
  width: 25rem;
  z-index: 9500;
}
#loader .contain .bouncing-logo {
  display: block;
  width: 101px;
  margin: auto;
  animation: bounce 300ms ease-in-out infinite;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-play-state: running;
}
#loader .contain p {
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1.28571429em;
  line-height: 1.25em;
  font-weight: bold;
  color: #00203f;
  padding-left: 3rem;
}

/* 9. FICHIER (images, vidéo etc.) ======= */
/* 10. ICONES =========================== */
/*icones xxx*/
/* base à modifier pr usage */
.icon-a:before {
  display: inline-block;
  content: "";
  /*width: r(100);*/
  /*height: r(100);*/
  /*background: url(../img/icon/info.svg) no-repeat center center;*/
  /*background-size:contain;*/
  transition: 0.3s;
  position: relative;
  top: 0;
  left: 0;
  margin-right: 0.5rem;
}

.bg-circle {
  display: inline-block;
  padding-top: 0.55rem;
  color: #00203f;
  font-size: 1.14285714em;
  font-weight: 700;
  position: relative;
  left: 0;
  top: 0;
  line-height: 1.6em;
  width: 2.71429rem;
  height: 2.71429rem;
  background: #f5f6f7;
  border-radius: 50%;
  text-align: center;
}

.info:after {
  display: inline-block;
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  background: url(../img/icon/info_green.svg) no-repeat center center;
  background-size: contain;
  transition: 0.3s;
  position: relative;
  top: 0.3rem;
  left: 0rem;
}
.info:hover .bulle {
  opacity: 1;
}
.info .bulle {
  position: absolute;
  top: 0;
  left: 0;
  transition: 0.3s;
  opacity: 0;
}

/* 11. BACKGROUND ======================= */
/* 12. DIVERS =========================== */
/* 13. RESPONSIVE COMPOSANTS ============= */
/* Responsive exceptionnel sur composant, les 90% dans media.scss */
/* == GROUPE =================================================================== */
/* 13. SLIDER */
/* 14. TABLEAU */
/* 16. TABLEAUX ======================= */
#block-opopp-content {
  /*Important !! à corriger : le css ici n'est que pour #admin , remettre les autres : agenda ect .. à leur place*/
  /* j ai enlevé note-1 après #read-note .. bug ?*/
}
#block-opopp-content #admin table {
  border-collapse: collapse;
  border-spacing: 0;
  /*lignes generales*/
  /*body*/
  /*le body*/
}
#block-opopp-content #admin table tr, #block-opopp-content #admin table thead {
  height: 5rem;
}
#block-opopp-content #admin table th {
  text-align: left;
  font-size: 1.15em;
}
#block-opopp-content #admin table th.date-width {
  min-width: 5.5rem;
}
#block-opopp-content #admin table th, #block-opopp-content #admin table td {
  padding: 0 2rem;
}
#block-opopp-content #admin table td {
  color: #5e7a90;
}
#block-opopp-content #admin table tr {
  /*ligne*/
}
#block-opopp-content #admin table tr td:first-child {
  color: rgb(83.9285714286, 108.9285714286, 128.5714285714);
  font-weight: bold !important;
}
#block-opopp-content #admin table tr td {
  /*cellule*/
}
#block-opopp-content #admin table thead {
  /*le header*/
}
#block-opopp-content #admin table thead tr {
  /*ligne*/
}
#block-opopp-content #admin table thead tr td:first-child {
  color: #474747 !important;
  font-weight: bold !important;
}
#block-opopp-content #admin table thead tr th {
  /*cellule*/
}
#block-opopp-content #admin table tbody tr {
  /*ligne*/
}
#block-opopp-content #admin table tbody tr.odd {
  background: rgba(135, 120, 90, 0.0509803922);
}
#block-opopp-content #admin table tbody tr td {
  /*cellule*/
}
#block-opopp-content #admin .band-table .no-result {
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1.14285714em;
  line-height: 1.1875em;
  color: #00203f;
}

/* 15. PAGER */
nav.pager {
  /*margin-top: r(58);*/
  width: 100%;
  text-align: center;
  margin-top: 2rem;
}
nav.pager ul {
  margin: auto;
  display: inline-block;
}
nav.pager ul .pager__item {
  display: inline-block;
  font-family: "Roboto-Bold", sans-serif;
  font-size: 1.28571429em;
  line-height: 1em;
  padding: 1rem 1rem;
  background: #fff;
  margin-right: 0.4285714286rem;
  border-radius: 0.5rem;
}
nav.pager ul .pager__item.is-active {
  background: rgb(68.3243243243, 168.6756756757, 149.4594594595);
}
nav.pager ul .pager__item.is-active a {
  color: #fff;
}

/* 16. FORMULAIRE */
/*exemple de séparation des forms (peu d'élément change, à voir si nécessaire) */
section form .page-att .form-item {
  margin-top: 0.2rem; /*fix : normalement à 0.5rem mais les div collapse les margin*/ /*@todo ICI*/
  margin-bottom: 1rem;
}

section form {
  /*@todo si le temps faire 3 parties form commun, form att, form cs */
  /*bien vérifier que cela ne change pas les 3 types de form : att, cs et e-commerce. (voir ci-dessus : exemple de séparation des forms) */
  position: relative;
  width: 100%;
  padding-bottom: 3rem;
  /*ligne et ligne spe (avec un sous div) et 2 col*/
  /*cas spécifique : avec un sous conteneur : champ date, ..*/
  /*cas spécifique : form sous titre*/
  /*cas spécifique : form-item pr edit-band-top*/
  /* @todo quand je mets une classe sur le champ, elle apparait sur l'input et le :after ne marche pas bien (à voir) */
  /*exception pour les symboles (input addmore => passer par une classe (.percent), autres) */
  /*cacher les fléches pour les champs nombre : Mozilla, Chrome, Safari, Edge (WebKit) */
  /*@todo à revoir*/
  /* input, select, textarea */
  /*input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    align-content: center;
    justify-content: center;
    font-size: 2rem;
    padding: 0.1rem;
    border: 2px solid $black;
    border-radius: 50%;
  }
  input[type="checkbox"]:checked {}
  input[type="checkbox"]:after {
    content: "";
    width: 1.2rem;
    height: 1.2rem;
    clip-path: circle(41%);
    transform: scale(0);
    background-color: $black;
  }
  input[type="checkbox"]:checked:after {
    transform: scale(1);
  }
  .js-form-type-checkbox label {
    position: relative;
    top: -2rem;
    left: 1.8rem;
  }*/
  /* submit */
  /*bouton upload image qd image chargé*/
  /*chrome auto remplissage*/
  /* checkbox */
  /* Conteneur */
  /* Caché checkbox */
  /* Glissière */
  /* Bouton circulaire */
  /* Style lorsque la checkbox est activée */
}
section form .messages {
  margin-bottom: 0.5rem;
}
section form .line .messages {
  width: 100%;
}
section form .title-m {
  margin-top: 2rem;
  margin-bottom: 1.75rem;
}
section form .title-m.title-add {
  margin-bottom: 0;
}
section form .line {
  display: flex;
  flex-wrap: wrap;
  /*solution container Ajax avec id contenant .form-item*/
  /*@todo voir si meilleure solution*/
}
section form .line .form-item {
  width: 40%;
  margin-top: 0.2rem; /*@todo ICI*/
}
section form .line .form-item:nth-child(odd) {
  margin-right: 2%;
}
section form .line div:not(.form-item, .messages, div[data-drupal-messages], div[role=alert], .item-list) {
  width: 40%;
  /*init le form-item qui n'est plus le container 1'*/
}
section form .line div:not(.form-item, .messages, div[data-drupal-messages], div[role=alert], .item-list):nth-child(odd) {
  margin-right: 2%;
}
section form .line div:not(.form-item, .messages, div[data-drupal-messages], div[role=alert], .item-list) .form-item {
  width: 100%;
  margin-right: 0;
}
section form .form-required::after {
  background: url(../img/icon/asterisk.svg) no-repeat center center;
  background-size: contain;
  width: 0.7rem;
  height: 0.7rem;
}
section form .form-item {
  /*display: inline-block;*/
  position: relative;
  width: 40%; /*répétition à modifier*/
  /*rustine à modifier plus proprement en passant par l'input pr tous et la classe .fullsize*/
}
section form .form-item.form-item-line-0-projet-adr-rue, section form .form-item.form-item-line-1-projet-adr-compl, section form .form-item.form-item-line2-1-projet-comment, section form .form-item.form-item-line2-0-adr-rue, section form .form-item.form-item-line2-1-adr-compl {
  width: 82%;
  margin-right: 0;
}
section form .form-item:not(.form-type-managed-file, .form-type-checkbox) {
  /*exception pour certains champs @todo P2 : voir si meilleure solution pour les champs ou la valeur par défaut n'est pas informative */
}
section form .form-item:not(.form-type-managed-file, .form-type-checkbox) label {
  position: absolute;
  left: 1.35rem;
  top: -0.6rem;
  background: #fff;
  font-family: "Roboto-Regular", sans-serif;
  font-size: 0.85714286em;
  line-height: 1.5em;
  padding: 0.1rem 1.25rem;
  color: rgb(132, 151, 176);
  opacity: 0;
  transition: 0.3s;
}
section form .form-item:not(.form-type-managed-file, .form-type-checkbox) label:after {
  /*display:none;*/
}
section form .form-item:not(.form-type-managed-file, .form-type-checkbox).form-item-line-1-proj-constructeur label {
  opacity: 1;
}
section form .line-spe {
  display: flex;
}
section form .line-spe div:nth-child(1), section form .line-spe div:nth-child(2) {
  position: relative;
  width: 40%;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}
section form .line-spe div:nth-child(1) .form-item, section form .line-spe div:nth-child(2) .form-item {
  display: block;
  width: 100%;
  margin: 0;
}
section form .line-spe div:nth-child(1) {
  margin-right: 2%;
}
section form .form-subtitle .form-item {
  display: block;
  width: 82%;
  margin-right: 0;
  margin-bottom: 1.75rem;
}
section form .form-subtitle .form-item .title-m {
  margin-bottom: 0.75rem;
}
section form .form-subtitle .form-item .subtitle {
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1em;
  line-height: 1.5em;
  color: rgb(132, 151, 176);
  padding-bottom: 0.5rem;
}
section form #edit-band-top {
  margin: 0;
}
section form .form-type-number, section form .parent-number-format {
  position: relative;
}
section form .form-type-number:after, section form .parent-number-format:after {
  display: inline-block;
  content: "€";
  width: 2rem;
  height: 2rem;
  position: absolute;
  top: 1.25rem;
  right: 2rem;
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1.21428571em;
  line-height: 1em;
  color: rgb(163.0544554455, 177.2574257426, 195.9455445545);
  z-index: 500;
}
section form .form-item-line2-0-projet-surface {
  position: relative;
}
section form .form-item-line2-0-projet-surface:after {
  display: inline-block;
  content: "m²";
  width: 2rem;
  height: 2rem;
  position: absolute;
  top: 1.25rem;
  right: 2rem;
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1.21428571em;
  line-height: 1em;
  color: rgb(163.0544554455, 177.2574257426, 195.9455445545);
  z-index: 500;
}
section form .form-item-line3-1-tx-emprunt, section form .form-item-line4-0-quot-emprunt, section form .form-item-line4-1-tx-assur, section form .form-item-line4-2-quot-assur, section form .form-item-line4-0-quot-emprunt-5, section form .form-item-line4-2-quot-assur-5, section form .form-item-line4-0-quot-emprunt-25, section form .form-item-line4-2-quot-assur-25 {
  position: relative;
}
section form .form-item-line3-1-tx-emprunt:after, section form .form-item-line4-0-quot-emprunt:after, section form .form-item-line4-1-tx-assur:after, section form .form-item-line4-2-quot-assur:after, section form .form-item-line4-0-quot-emprunt-5:after, section form .form-item-line4-2-quot-assur-5:after, section form .form-item-line4-0-quot-emprunt-25:after, section form .form-item-line4-2-quot-assur-25:after {
  display: inline-block;
  content: "%";
  width: 2rem;
  height: 2rem;
  position: absolute;
  top: 1.25rem;
  right: 2rem;
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1.14285714em;
  line-height: 1em;
  color: rgb(163.0544554455, 177.2574257426, 195.9455445545);
  z-index: 500;
}
section form .form-item-line3-0-proj-pret-duree {
  position: relative;
}
section form .form-item-line3-0-proj-pret-duree:after {
  display: none;
  /*display:inline-block;
  content: 'mois';
  width:2rem;
  height:2rem;
  position:absolute;
  top:1.25rem;
  right:4rem;
  font-family: $font-rr;
  font-size: $s17;
  line-height: l(17, 17);
  color: lighten($grey, 10%);
  z-index:500;*/
}
section form .form-type-number.parent-percent:after {
  content: "%";
}
section form .form-type-number.parent-nothing:after {
  content: "";
}
section form .form-type-number.parent-mois:after {
  content: "mois";
}
section form .form-type-number.parent-euro-mois:after {
  content: "€ /mois" !important;
}
section form input[type=number] {
  -moz-appearance: textfield;
}
section form input[type=number]::-webkit-outer-spin-button,
section form input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
section form .form-box .messages--status {
  display: none;
}
section form input:not([type=submit]):not([type=checkbox]):not([type=file]),
section form textarea,
section form select:not(.js-filter-list),
section form #edit-cv {
  /*@todo faire un mixin*/
  font-family: "Roboto-Medium", sans-serif;
  font-size: 1em;
  line-height: 1em;
  color: #00203f; /*old : $grey-d*/
  border: 1px solid rgb(178.5816831683, 190.3861386139, 205.9183168317);
  border-radius: 0.8rem;
  padding: 1.2142857143rem 1.4285714286rem;
  margin-bottom: 0;
  width: 100%;
  /*la couleur du placeholder juste légérement plus claire que la valeur car elle est affiché à la place du label au 1 er affichage*/
}
section form input:not([type=submit]):not([type=checkbox]):not([type=file])::-webkit-input-placeholder, section form input:not([type=submit]):not([type=checkbox]):not([type=file])::placeholder,
section form textarea::-webkit-input-placeholder,
section form textarea::placeholder,
section form select:not(.js-filter-list)::-webkit-input-placeholder,
section form select:not(.js-filter-list)::placeholder,
section form #edit-cv::-webkit-input-placeholder,
section form #edit-cv::placeholder {
  font-family: "Roboto-Medium", sans-serif;
  line-height: 1em;
  color: #4a5f7a;
}
section form input:not([type=submit]):not([type=checkbox]):not([type=file]).ghost,
section form textarea.ghost,
section form select:not(.js-filter-list).ghost,
section form #edit-cv.ghost {
  visibility: hidden;
}
section form input:not([type=submit]):not([type=checkbox]):not([type=file]).description,
section form textarea.description,
section form select:not(.js-filter-list).description,
section form #edit-cv.description {
  position: relative;
  top: -1rem;
  left: 0;
  border: none;
  padding: 0.0071428571rem 0rem;
  color: rgb(132, 151, 176);
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1.2em;
  border-radius: 0;
}
section form input:not([type=submit]):not([type=checkbox]):not([type=file]).read-only,
section form textarea.read-only,
section form select:not(.js-filter-list).read-only,
section form #edit-cv.read-only {
  color: rgb(105.8571428571, 134.8571428571, 157.6428571429);
}
section form .form-item p.description {
  position: relative;
  top: -1rem;
  left: 0;
  border: none;
  padding: 0.0071428571rem 0rem;
  color: rgb(132, 151, 176);
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1.2em;
  border-radius: 0;
}
section form textarea {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
@-moz-document url-prefix() {
  section form select {
    background-color: white !important;
  }
}
section form input[type=radio] {
  margin-bottom: 1.3571428571rem;
  width: auto !important;
  transform: scale(1.8);
  accent-color: #474747;
  color: #474747;
}
section form .option {
  /*@include txt-24;*/
  /*text-transform: lowercase;*/
  padding-left: 1.2857142857rem;
}
section form input[type=date] {
  /*width:auto !important;*/
}
section form .form-type-managed-file {
  position: relative;
  display: inline-block;
  color: #4E617A;
  border: 2px dashed #61bfad;
  border-radius: 0.8rem;
  padding: 1rem 1.4285714286rem;
  /*margin-bottom: 0;*/
  /*width: 100%;*/
  /* managed file général */
  /* managed file validation */
}
section form .form-type-managed-file > label {
  /* le nom du champ file*/
  display: inline-block;
  font-family: "Roboto-Medium", sans-serif;
  font-size: 1em;
  line-height: 1em;
  padding-left: 3rem;
  color: #61bfad;
}
section form .form-type-managed-file > label.file-present {
  /*@todo rustine en JS à revoir si couteux*/
  padding-left: 1.2rem;
}
section form .form-type-managed-file.form-item-line-3-devis-travaux, section form .form-type-managed-file.form-item-line-4-permis-constr, section form .form-type-managed-file.form-item-line-4-plan-constr, section form .form-type-managed-file.form-item-line-4-contrat-constr {
  border-color: rgba(97, 191, 173, 0.431372549);
}
section form .form-type-managed-file.inactive {
  border-color: #b7c5d0;
}
section form .form-type-managed-file.inactive > label {
  color: #b7c5d0;
}
section form .form-type-managed-file.inactive .form-managed-file label {
  /*filter: grayscale(100%);*/
  /*@todo P2 : à revoir, utiliser SVG inline avec fill: #b7c5d0; ou une autre icone (barré)*/
  filter: brightness(0) saturate(100%) invert(78%) sepia(7%) saturate(317%) hue-rotate(169deg) brightness(96%) contrast(91%);
  pointer-events: none;
  cursor: not-allowed;
}
section form .form-type-managed-file.inactive:before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3.6rem;
  background: transparent;
  z-index: 2000;
}
section form .form-type-managed-file.inactive:hover:after {
  display: inline-block;
  background: #fff;
  color: #b7c5d0 !important;
  font-size: 0.8em !important;
  border-radius: 0.5rem;
  border: 1px solid #b7c5d0;
  padding: 0.25rem 0.5rem;
  max-width: 12rem;
  z-index: 500;
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  content: "Non demandé";
  transition: 0.3s;
}
section form .form-type-managed-file.inactive input[type=file] {
  pointer-events: none;
  cursor: not-allowed;
}
section form .form-type-managed-file .form-managed-file input[type=file] {
  display: none;
}
section form .form-type-managed-file .form-managed-file label {
  width: 2.3rem;
  height: 2.3rem;
  background: url(../img/form/upload.svg) no-repeat center center;
  background-size: cover;
  position: absolute;
  top: 0.5rem;
  left: 1.4285714286rem;
}
section form .form-type-managed-file .form-managed-file + .description {
  display: none;
}
section form .form-type-managed-file .form-managed-file .file {
  position: absolute;
  top: 1rem;
  left: 1rem;
}
section form .form-type-managed-file .form-managed-file.managed-valid {
  position: relative;
}
section form .form-type-managed-file .form-managed-file.managed-valid + .description {
  display: block;
  position: absolute;
  top: 0;
  left: 110%;
  width: 70%;
  padding-top: 1.25rem;
  font-family: "Roboto-Medium", sans-serif;
  font-size: 1em;
  line-height: 1.2857142857em;
  color: #4a5f7a;
  font-family: "Roboto-Regular", sans-serif;
  /*color:lighten($grey-d, 15%);*/
  color: rgb(132, 151, 176);
}
section form .btn-delete {
  display: inline-block;
  /*width:15rem;*/
  font-family: "Roboto-Medium", sans-serif;
  font-size: 1.14285714em;
  line-height: 1em;
  color: #00203f;
  padding: 1rem 2.2857142857rem;
  background: #f5f6f7;
  border-radius: 4.5rem;
  border-color: rgb(132, 151, 176);
  transition: 0.3s;
  cursor: pointer;
  margin: auto;
  color: rgb(132, 151, 176);
  /*@todo faire un mixin pour small bouton*/
  width: auto;
  position: absolute;
  top: 2.25rem;
  right: 0;
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1em;
  padding: 0.5rem 1rem;
}
section form .btn-delete:hover {
  background: rgb(68.3243243243, 168.6756756757, 149.4594594595);
  border-color: rgb(68.3243243243, 168.6756756757, 149.4594594595);
  color: #fff;
}
section form input[type=submit] {
  display: inline-block;
  /*width:15rem;*/
  font-family: "Roboto-Medium", sans-serif;
  font-size: 1.14285714em;
  line-height: 1em;
  color: #fff;
  padding: 1rem 2.2857142857rem;
  background: #61bfad;
  border-radius: 4.5rem;
  border: 1px solid #61bfad;
  transition: 0.3s;
  cursor: pointer;
  margin: auto;
}
section form input[type=submit]:hover {
  background: rgb(68.3243243243, 168.6756756757, 149.4594594595);
  border-color: rgb(68.3243243243, 168.6756756757, 149.4594594595);
}
section form #edit-cancel {
  display: inline-block;
  /*width:15rem;*/
  font-family: "Roboto-Medium", sans-serif;
  font-size: 1.14285714em;
  line-height: 1em;
  color: #00203f;
  padding: 1rem 2.2857142857rem;
  background: #f5f6f7;
  border-radius: 4.5rem;
  border-color: rgb(132, 151, 176);
  transition: 0.3s;
}
section form #edit-cancel:hover {
  background: rgb(68.3243243243, 168.6756756757, 149.4594594595);
  border-color: rgb(68.3243243243, 168.6756756757, 149.4594594595);
  color: #fff;
}
section form #edit-actions-previous {
  display: inline-block;
  /*width:15rem;*/
  font-family: "Roboto-Medium", sans-serif;
  font-size: 1.14285714em;
  line-height: 1em;
  color: #00203f;
  padding: 1rem 2.2857142857rem;
  background: #f5f6f7;
  border-radius: 4.5rem;
  border-color: rgb(132, 151, 176);
  transition: 0.3s;
  margin-right: 0.5rem;
}
section form #edit-actions-previous:hover {
  background: rgb(68.3243243243, 168.6756756757, 149.4594594595);
  border-color: rgb(68.3243243243, 168.6756756757, 149.4594594595);
  color: #fff;
}
section form #edit-actions-next {
  margin-right: 5rem;
}
section form #edit-actions-save {
  display: inline-block;
  /*width:15rem;*/
  font-family: "Roboto-Medium", sans-serif;
  font-size: 1.14285714em;
  line-height: 1em;
  color: #61bfad;
  padding: 1rem 2.2857142857rem;
  background: #fff;
  border-radius: 4.5rem;
  border-color: #61bfad;
  transition: 0.3s;
  padding: 1.1428571429rem 1.1428571429rem;
  border-radius: 0.8rem;
  width: 12rem;
}
section form #edit-actions-save:hover {
  background: #61bfad;
  border-color: #61bfad;
  color: #fff;
}
section form div[data-drupal-selector=edit-actions] input[type=submit] {
  margin-top: 3rem;
}
section form .form-type-managed-file .form-managed-file .file a {
  /*display:none;*/
}
section form .form-type-managed-file .form-managed-file .form-submit {
  width: auto;
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1em;
  padding: 0.5rem 1rem;
}
section form #edit-titre-param {
  display: none;
}
section form input:-webkit-autofill,
section form input:-webkit-autofill:focus {
  transition: background-color 0s 600000s, color 0s 600000s !important;
}
section form .form-type-checkbox label {
  display: none;
}
section form .form-type-checkbox .description {
  display: inline-block;
  vertical-align: middle;
  font-family: "Roboto-Medium", sans-serif;
  font-size: 1em;
  color: #4a5f7a;
  margin-left: 1.5rem;
}
section form .form-type-checkbox .description .tag {
  /*@todo faire un mixin ou une classe CSS pour tag en général*/
  display: inline-block;
  background: #f5f6f7;
  padding: 0.5rem;
  border-radius: 0.5rem;
  color: #61bfad;
  margin-right: 0.5rem;
}
section form .form-type-checkbox .description .tag.off {
  display: none;
}
section form .switch {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 4.2857142857rem !important;
  height: 2.1428571429rem;
}
section form .switch input {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
  cursor: pointer;
}
section form .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 2.1428571429rem; /* Arrondir complètement */
}
section form .slider:before {
  position: absolute;
  content: "";
  height: 1.6428571429rem;
  width: 1.6428571429rem;
  left: 0.2857142857rem;
  bottom: 0.2857142857rem;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%; /* Rond */
}
section form input:checked + .slider {
  background-color: #61bfad; /* Couleur activée */
}
section form input:checked + .slider:before {
  transform: translateX(29px) !important; /* Déplacement du bouton circulaire */
}
section form .switch-mois-annee {
  width: auto !important;
  position: absolute;
  top: 1.1rem;
  right: 2rem; /*ori 2 rem*/
  /*border-radius:0.5rem;*/
  border: 1px solid #fff;
}
section form .switch-mois-annee .switch-btn {
  color: #00203f;
  background: #fff;
  border-radius: 0.5rem;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
  transition: 0.3s;
}
section form .switch-mois-annee .switch-btn.active {
  background: #61bfad;
  color: #fff;
}
section form .switch-mois-annee .switch-btn:not(.active):hover {
  color: #61bfad;
}

/*end section form*/
/*exception pour check-item & managed file de la page validation*/
/*@todo à revoir car obligé d'aller chercher .ogp_attvalidation*/
.ogp_attvalidation .form-type-managed-file, section form .form-item .check-file {
  margin-left: 3.5rem;
}
.ogp_attvalidation .form-type-managed-file:before, section form .form-item .check-file:before {
  display: inline-block;
  content: "";
  width: 2.1428571429rem;
  height: 2.1428571429rem;
  background: url(../img/icon/file-invalid.svg) no-repeat center center;
  background-size: contain;
  transition: 0.3s;
  position: absolute;
  top: 1.25rem;
  left: -4rem;
}

section form .form-item .check-file {
  position: relative;
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1em;
  line-height: 1.2857142857em;
  color: #00203f;
  color: #61bfad;
  font-family: "Roboto-Medium", sans-serif;
}
section form .form-item .check-file:before {
  top: -0.5rem;
}
section form .form-item .check-file.file-valid:before {
  background: url(../img/icon/file-valid.svg) no-repeat center center;
  background-size: contain;
}
section form .form-item .check-file.file-missing:before {
  background: url(../img/icon/file-invalid.svg) no-repeat center center;
  background-size: contain;
}

/*=== VARIANTE PAGE TABLEAU ====*/
#admin form .filters {
  /* les 2 containers filtre générale et filtre si présent ( ! amélio mettre un id pr distinguer les forms */
  display: flex;
  /*flex-wrap:wrap;*/
}
#admin form .filters .form-item {
  width: auto;
  margin: 0;
  margin-right: 1.5rem;
}
#admin form .filters input[type=submit] {
  margin-top: 0; /*temporaire*/
}
#admin form input:not([type=submit]), #admin form textarea, #admin form select:not(.js-filter-list), #admin form select option {
  border: 2px solid #61bfad;
  background: #fff;
}
#admin .band-table {
  padding-bottom: 6rem;
}
#admin .band-table .table {
  overflow: hidden;
}
#admin .band-table .btn-v {
  margin-bottom: 3rem;
  display: inline-block;
  margin-right: 1rem;
}

/* 17. CHAMPS */
/* 18. CHAMPS SPECIFIQUE */
/* 19. EDITEUR Wisiwyg */
/* 20. Pattern */
/* ensemble titre, bouton, txt*/
/*box blanc + ombre + padding*/
.box-a {
  position: relative;
  width: 30%;
  background: #fff;
  box-shadow: 8px 8px 24px 0px rgba(0, 0, 0, 0.1215686275);
  padding: 2rem 2rem;
  border-radius: 0.5rem;
  border: 1px solid #E6EAEE;
  text-align: center;
  transition: 0.3s;
}

/* 21. View */
.section-site-top {
  padding-bottom: 5rem;
}
.section-site-top h1 {
  padding-top: 0.75rem;
}
.section-site-top .description {
  padding-top: 1.35rem;
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1.28571429em;
  line-height: 132%;
  color: #00203f;
}
.section-site-top a {
  color: #61bfad;
  font-weight: bold;
  transition: 0.3s;
}
.section-site-top a:hover {
  color: #00203f;
}

/* === SITE OUTIL ================================================== */
/*Elements propre à la section outil*/
main.outil .title-m {
  padding-bottom: 2rem;
}
main.outil .title-s {
  padding-top: 2.5rem; /*1.5*/
  padding-bottom: 1rem;
}

.ogp_attcharge main.outil .title-s, .ogp_attressources main.outil .title-s, .ogp_attsituation_financiere main.outil .title-s, .ogp_attpatrimoine main.outil .title-s {
  padding-top: 3.5rem;
}
.ogp_attcharge main.outil .title-s + .btn-delete, .ogp_attressources main.outil .title-s + .btn-delete, .ogp_attsituation_financiere main.outil .title-s + .btn-delete, .ogp_attpatrimoine main.outil .title-s + .btn-delete {
  top: 3.25rem;
}

/* == Band Titre - à renommer plus band-titre */
main.outil .band-first {
  display: flex;
  padding-bottom: 4rem;
  position: relative;
}
main.outil .band-first .title-l {
  padding-bottom: 1.5rem;
}
main.outil .band-first .fil-arianne {
  position: absolute;
  top: 3.5rem;
  left: 0;
}

/* == Band Sous titre - à renommer plus band-subtitle */
main.outil .band-top {
  padding-bottom: 4rem;
}
main.outil .band-top .title-l, main.outil .band-top .title-m {
  padding-bottom: 1.5rem;
}
#edit-band-top {
  width: 100%;
}

/* == Page choix attestation */
main.outil .band-att-choix {
  width: 70%;
}
main.outil .band-att-choix .link-results .contain {
  display: flex;
}
main.outil .band-att-choix .link-results .contain .cell {
  width: 40%;
  border: 1px solid rgb(132, 151, 176);
  border-radius: 1.25rem;
  padding: 3rem 2rem;
  transition: 0.3s;
}
main.outil .band-att-choix .link-results .contain .cell:not(:last-child) {
  margin-right: 2rem;
}
main.outil .band-att-choix .link-results .contain .cell .title-s {
  padding-bottom: 0.75rem;
  transition: 0.3s;
}
main.outil .band-att-choix .link-results .contain .cell .txt-13 {
  color: rgb(132, 151, 176);
  transition: 0.3s;
}
main.outil .band-att-choix .link-results .contain .cell:hover {
  background: #61bfad;
  border-color: #61bfad;
}
main.outil .band-att-choix .link-results .contain .cell:hover .title-s, main.outil .band-att-choix .link-results .contain .cell:hover .txt-13 {
  color: #fff;
}
main.outil .band-att-choix .btn-w {
  margin-top: 4rem;
}

/* == Page operation parametre */
main.outil .att_operation_param .band-top {
  /*@todo faire des sections plutot qu'avec le padding top'*/
  padding-bottom: 1rem;
}
main.outil .att_operation_param .title-m {
  /*@todo faire des sections plutot qu'avec le padding top'*/
  padding-top: 4rem;
  padding-bottom: 2rem;
}
main.outil .att_operation_param p {
  font-family: "Roboto-Medium", sans-serif;
  font-size: 1em;
  line-height: 1.2857142857em;
  color: #4a5f7a;
}
main.outil .att_operation_param .btn-v {
  padding-top: 1.5rem;
}
main.outil .att_operation_param form .filters {
  align-items: center;
}
main.outil .att_operation_param form input[type=submit] {
  margin: 0 1rem;
}
main.outil .att_operation_param form .form-type-checkbox label {
  display: inline-block;
  font-family: "Roboto-Medium", sans-serif;
  font-size: 1em;
  line-height: 1.2857142857em;
  color: #4a5f7a;
}

/* == Block menu emprunteur */
main.outil .band-menu-emprunteur {
  /*overflow:hidden;*/
  padding-bottom: 3rem;
}
main.outil .band-menu-emprunteur .nav-emprunteur {
  width: 100%;
  background: #fff;
  box-shadow: 0 10px 13px -5px rgba(0, 0, 0, 0.04);
  border-radius: 5px;
  /*box-shadow: 0px 17px 17px 0px #E3E3E3;*/
  /*box-shadow: 10px 0px 20px 0 rgba(0, 0, 0, 0.04);*/
  /*padding:1rem 0;*/
}
main.outil .band-menu-emprunteur .nav-emprunteur ul {
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
main.outil .band-menu-emprunteur .nav-emprunteur ul li:not(:nth-last-child(2)):not(.options) {
  border-right: 2px solid rgb(194.1089108911, 203.5148514851, 215.8910891089);
}
main.outil .band-menu-emprunteur .nav-emprunteur ul li a {
  display: inline-block;
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1.07142857em;
  line-height: 1em;
  font-weight: bold;
  color: rgb(132, 151, 176);
  padding: 0 1rem;
  transition: 0.3s;
}
main.outil .band-menu-emprunteur .nav-emprunteur ul li a.active {
  color: #61bfad;
}
main.outil .band-menu-emprunteur .nav-emprunteur ul li a:hover {
  color: #61bfad;
}
main.outil .band-menu-emprunteur .nav-emprunteur ul li.options {
  position: relative;
}
main.outil .band-menu-emprunteur .nav-emprunteur ul li.options a:after {
  display: inline-block;
  content: "";
  width: 2.1428571429rem;
  height: 2.1428571429rem;
  background: url(../img/icon/options.svg) no-repeat center center;
  background-size: contain;
  transition: 0.3s;
  position: absolute;
  top: -0.4rem;
  left: 1rem;
}

/* == Navigation Attestation */
main.outil ul.att-nav {
  display: flex;
  margin-left: 4rem;
}
main.outil ul.att-nav li {
  padding-top: 0.55rem;
  color: #00203f;
  font-size: 1em;
  font-weight: 700;
  position: relative;
  left: 0;
  top: 0;
  line-height: 1.6em;
  width: 2.2rem;
  height: 2.2rem;
  background: rgb(122.4081081081, 201.2918918919, 186.1864864865);
  border-radius: 50%;
  text-align: center;
  margin-right: 4rem;
}
main.outil ul.att-nav li.transparent {
  background: rgb(187.7432432432, 227.7567567568, 220.0945945946);
}
main.outil ul.att-nav li a {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 500;
}
main.outil ul.att-nav li .bulle {
  position: absolute;
  top: 3rem;
  left: -2rem;
  right: -2rem;
  margin: auto;
  width: 6rem;
  opacity: 0;
  transition: 0.3s;
}
main.outil ul.att-nav li:hover .bulle {
  opacity: 1;
}
main.outil ul.att-nav li:not(:last-child):after {
  display: inline-block;
  content: "";
  width: 2.5rem;
  height: 3px;
  background: #61bfad;
  position: relative;
  top: -2.5rem;
  left: 2.9rem;
}
main.outil ul.att-nav li:before {
  display: inline-block;
  content: "";
  width: 1.6rem;
  height: 1.6rem;
  transition: 0.3s;
  position: absolute;
  top: 0.25rem;
  left: 0.33rem;
}
main.outil ul.att-nav li:nth-child(1):before {
  background: url(../img/nav/projet.svg) no-repeat center center;
  background-size: contain;
}
main.outil ul.att-nav li:nth-child(2):before {
  background: url(../img/nav/identite.svg) no-repeat center center;
  background-size: contain;
}
main.outil ul.att-nav li:nth-child(3):before {
  background: url(../img/nav/famille.svg) no-repeat center center;
  background-size: contain;
}
main.outil ul.att-nav li:nth-child(4):before {
  background: url(../img/nav/logement.svg) no-repeat center center;
  background-size: contain;
}
main.outil ul.att-nav li:nth-child(5):before {
  background: url(../img/nav/compte.svg) no-repeat center center;
  background-size: contain;
}
main.outil ul.att-nav li:nth-child(6):before {
  background: url(../img/nav/patrimoine.svg) no-repeat center center;
  background-size: contain;
}
main.outil ul.att-nav li:nth-child(7):before {
  background: url(../img/nav/charge.svg) no-repeat center center;
  background-size: contain;
}
main.outil ul.att-nav li:nth-child(8):before {
  background: url(../img/nav/validation.svg) no-repeat center center;
  background-size: contain;
}

/* == Box Att Résultat */
main.outil .band-bloc-results, .ogp_csfree .band-bloc-results {
  position: relative;
  margin-top: 7rem;
}
main.outil .band-bloc-results:after, .ogp_csfree .band-bloc-results:after {
  display: inline-block;
  content: "";
  width: 7.4rem;
  height: 7.4rem;
  background: url(../img/logo/logo_icone.svg) no-repeat center center;
  background-size: contain;
  position: absolute;
  top: -4.5rem;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 0;
}
main.outil .band-bloc-results .overlay, .ogp_csfree .band-bloc-results .overlay {
  position: relative;
  background: rgba(225, 241, 239, 0.8);
  border-radius: 1rem;
  z-index: 500;
}
main.outil .band-bloc-results .overlay .inner-sec, .ogp_csfree .band-bloc-results .overlay .inner-sec {
  padding: 2rem 3.2rem;
}
main.outil .band-bloc-results .overlay .inner-sec .title-s, .ogp_csfree .band-bloc-results .overlay .inner-sec .title-s {
  font-size: 1.28571429em;
  padding-top: 0.5rem;
  text-align: center;
}
main.outil .band-bloc-results .overlay .inner-sec .indice, .ogp_csfree .band-bloc-results .overlay .inner-sec .indice {
  text-align: center;
}
main.outil .band-bloc-results .overlay .inner-sec .indice .bg-circle, .ogp_csfree .band-bloc-results .overlay .inner-sec .indice .bg-circle {
  padding-top: 0.55rem;
  color: #fff;
  font-size: 1.42857143em;
  position: relative;
  left: 0;
  top: 0;
  line-height: 1.6em;
  width: 3.25rem;
  height: 3.25rem;
  background: #61bfad;
}
main.outil .band-bloc-results .overlay .inner-sec .result, .ogp_csfree .band-bloc-results .overlay .inner-sec .result {
  display: flex;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
main.outil .band-bloc-results .overlay .inner-sec .result .graduation, .ogp_csfree .band-bloc-results .overlay .inner-sec .result .graduation {
  width: 2.3571428571rem;
  height: 7.7142857143rem;
  background: url(../img/icon/graduation.png) no-repeat center center;
  background-size: cover; /*(old = contain)*/
  opacity: 0.3;
}
main.outil .band-bloc-results .overlay .inner-sec .result ul.result-name, .ogp_csfree .band-bloc-results .overlay .inner-sec .result ul.result-name {
  padding-left: 2rem;
}
main.outil .band-bloc-results .overlay .inner-sec .result ul.result-name li, .ogp_csfree .band-bloc-results .overlay .inner-sec .result ul.result-name li {
  font-family: "Roboto-Medium", sans-serif;
  font-size: 1em;
  padding-top: 0.5rem;
  padding-bottom: 0.6rem;
  color: #b7c5d0;
}
main.outil .band-bloc-results .overlay .inner-sec .result ul.result-name li.negativ.active, .ogp_csfree .band-bloc-results .overlay .inner-sec .result ul.result-name li.negativ.active {
  color: #d14343;
  font-size: 1.71428571em;
}
main.outil .band-bloc-results .overlay .inner-sec .result ul.result-name li.defendre.active, .ogp_csfree .band-bloc-results .overlay .inner-sec .result ul.result-name li.defendre.active {
  color: #dfb424;
  font-size: 1.71428571em;
}
main.outil .band-bloc-results .overlay .inner-sec .result ul.result-name li.positiv.active, .ogp_csfree .band-bloc-results .overlay .inner-sec .result ul.result-name li.positiv.active {
  color: #61bfad;
  font-size: 1.71428571em;
}
main.outil .band-bloc-results .overlay .inner-sec ul.stat li .name, .ogp_csfree .band-bloc-results .overlay .inner-sec ul.stat li .name {
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1em;
  line-height: 1.2857142857em;
  color: #00203f;
  line-height: 1.5em;
  font-family: "Roboto-Medium", sans-serif;
}
main.outil .band-bloc-results .overlay .inner-sec ul.stat li .nb, .ogp_csfree .band-bloc-results .overlay .inner-sec ul.stat li .nb {
  display: inline-block;
  font-family: "Roboto-Regular", sans-serif;
  font-size: 0.85714286em;
  line-height: 1.25em;
  color: #00203f;
  line-height: 2.25em;
  font-family: "Roboto-Bold", sans-serif;
  color: #61bfad;
  padding-left: 0.5rem;
}
main.outil .band-bloc-results .overlay .inner-sec ul.stat li:nth-child(1) .nb, .ogp_csfree .band-bloc-results .overlay .inner-sec ul.stat li:nth-child(1) .nb {
  font-size: 1.42857143em;
}

/* == Box Att Résultat */
#edit-add-charge, #edit-add-rev-autre {
  margin-top: 2rem;
  background: rgb(246.24, 247.0742857143, 249.16);
}

#edit-add-more, #edit-add-more-rev-autre {
  margin-bottom: 3rem;
}

/*input.bien-immo*/
.form-att .form-box input.bien-immo {
  position: relative;
  top: 2.25rem;
  padding-left: 4rem !important;
  background: rgb(237.9942857143, 247.2057142857, 245.7885714286) !important;
  border: none !important;
}
.form-att .form-box .parent-bien-immo:before {
  display: inline-block;
  content: "";
  width: 1.75rem;
  height: 1.75rem;
  background: url(../img/icon/home_link.svg) no-repeat center center;
  background-size: contain;
  transition: 0.3s;
  position: absolute;
  left: 1rem;
  top: 3rem;
  z-index: 500;
  opacity: 0.25;
}
.form-att .form-box .first-title-s .parent-bien-immo:before {
  top: 1.5rem;
}

/* == section 3 outils*/
.band-outils {
  margin-bottom: 6rem;
  max-width: 66rem;
}
.band-outils p.desc {
  font-size: 1.14285714em;
  padding-bottom: 4rem;
  max-width: 50%;
}
.band-outils .list {
  display: flex;
  gap: 4rem;
}
.band-outils .list .outil {
  flex: 1;
  box-shadow: 0px 0px 30px 0 rgba(0, 0, 0, 0.15);
  border-radius: 0.5rem;
  background: #fff;
  padding: 0rem 2rem 3rem 2rem;
}
.band-outils .list .outil:hover .top {
  background: #61bfad;
}
.band-outils .list .outil .top {
  font-family: "Roboto-Bold", sans-serif;
  font-size: 1.28571429em;
  line-height: 1em;
  color: #fff;
  text-transform: uppercase;
  padding: 1.25rem 1rem;
  background: #00203f;
  position: relative;
  top: -1.5rem;
  border-radius: 0.5rem;
  text-align: center;
  transition: 0.3s;
}
.band-outils .list .outil .contenu .title {
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1.14285714em;
  line-height: 1.1875em;
  color: #00203f;
  font-family: "Roboto-Bold", sans-serif;
  padding-bottom: 1.5rem;
  padding-top: 1rem;
}
.band-outils .list .outil .contenu ul.txt {
  padding-bottom: 1.5rem;
}
.band-outils .list .outil .contenu ul.txt li {
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1em;
  line-height: 1.2857142857em;
  color: #00203f;
}
.band-outils .list .outil .contenu .credit {
  font-family: "Roboto-Bold", sans-serif;
  font-size: 1.42857143em;
  line-height: 1em;
  color: #61bfad;
}

/* == section forfaits (vitrine/page) */
#nos-forfaits .description {
  text-align: center;
}
#nos-forfaits .description span {
  display: inline-block;
  max-width: 35%;
}

#nos-forfaits .band-forfaits {
  padding-bottom: 10rem;
}
#nos-forfaits .band-forfaits .list-forfait {
  display: flex;
  gap: 2rem;
}
#nos-forfaits .band-forfaits .list-forfait article {
  min-height: 32.75rem;
  position: relative;
  width: 25%;
  background: #fff;
  box-shadow: 8px 8px 24px 0px rgba(0, 0, 0, 0.1215686275);
  padding: 2rem 2rem;
  border-radius: 0.5rem;
  border: 1px solid #E6EAEE;
  text-align: center;
  transition: 0.3s;
  /*@todo P2 : ancrer sur le top + overflow hidden (préciser au client nb fixe max d'option')*/
  /*solution rapide pour inverser les champs*/
  /*#edit-purchased-entity-wrapper--4*/
}
#nos-forfaits .band-forfaits .list-forfait article:hover {
  background: #B0DFD6;
}
#nos-forfaits .band-forfaits .list-forfait article:hover .forfait-title {
  background: #00203f;
  color: #fff;
}
#nos-forfaits .band-forfaits .list-forfait article .forfait-title {
  display: inline-block;
  background: #B0DFD6;
  border-radius: 0.5714285714rem;
  padding: 0.5rem 0.8rem 0.4rem 0.8rem;
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1em;
  line-height: 1em;
  color: #00203f;
  margin: auto;
  margin-bottom: 1.7rem;
  transition: 0.3s;
}
#nos-forfaits .band-forfaits .list-forfait article .forfait-title.second {
  display: none;
}
#nos-forfaits .band-forfaits .list-forfait article .forfait-prix {
  font-family: "Poppins-Bold", sans-serif;
  font-size: 2.5em;
  line-height: 1em;
  color: #00203f;
  margin-bottom: 0.25rem;
}
#nos-forfaits .band-forfaits .list-forfait article .forfait-prix span {
  display: block;
  font-family: "Poppins-SemiBold", sans-serif;
  font-size: 0.45em;
  color: #BAC1C9;
  position: relative;
  top: -0.7rem;
}
#nos-forfaits .band-forfaits .list-forfait article .description {
  font-family: "Poppins-Bold", sans-serif;
  font-size: 1.14285714em;
  line-height: 132%;
  color: #00203f;
}
#nos-forfaits .band-forfaits .list-forfait article .forfait-credit {
  display: none;
}
#nos-forfaits .band-forfaits .list-forfait article .list-options {
  position: absolute;
  bottom: 2rem;
  left: 0;
  width: 100%;
  height: 10.5rem;
}
#nos-forfaits .band-forfaits .list-forfait article .inclus {
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1em;
  line-height: 1.2857142857em;
  color: #00203f;
  font-family: "Poppins-SemiBold", sans-serif;
  color: #748494;
  margin-bottom: 0.75rem;
}
#nos-forfaits .band-forfaits .list-forfait article .form-actions {
  margin: 0;
}
#nos-forfaits .band-forfaits .list-forfait article .form-actions .button--add-to-cart {
  margin-top: 1.5rem;
  background: #ED7D31;
  border-color: #ED7D31;
  border-radius: 0.8571428571rem;
}
#nos-forfaits .band-forfaits .list-forfait article .field--name-purchased-entity {
  position: absolute;
  top: 8.5rem;
  left: 31%;
  width: 15rem;
}
#nos-forfaits .band-forfaits .list-forfait article .inclus.credit {
  position: relative;
  top: -1.5rem;
  left: 0;
}

/*plusieurs affichage*/
#nos-forfaits .band-forfaits ul.forfait-variation, .cart ul.forfait-variation {
  text-align: left;
  padding-left: 2rem;
}
#nos-forfaits .band-forfaits ul.forfait-variation li, .cart ul.forfait-variation li {
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1.14285714em;
  line-height: 1.1875em;
  color: #00203f;
}

/* == bandeau cookie */
#cookie-banner {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 5000;
  background: rgba(255, 255, 255, 0.9294117647);
  box-shadow: 8px 8px 24px 0px rgba(0, 0, 0, 0.1215686275);
}
#cookie-banner .inner-spe {
  margin: auto;
  padding-top: 2rem;
  padding-bottom: 2rem;
  width: 50%;
  min-width: 10rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
#cookie-banner .inner-spe p {
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1.14285714em;
  line-height: 1.1875em;
  color: #00203f;
  font-weight: bold;
  margin-right: 1rem;
}
#cookie-banner .inner-spe button, #cookie-banner .inner-spe a {
  display: inline-block;
  /*width:15rem;*/
  font-family: "Roboto-Medium", sans-serif;
  font-size: 1.14285714em;
  line-height: 1em;
  color: #fff;
  padding: 1rem 2.2857142857rem;
  background: #61bfad;
  border-radius: 4.5rem;
  border: 1px solid #61bfad;
  transition: 0.3s;
  margin-right: 1rem;
}
#cookie-banner .inner-spe button:hover, #cookie-banner .inner-spe a:hover {
  background: rgb(68.3243243243, 168.6756756757, 149.4594594595);
  border-color: rgb(68.3243243243, 168.6756756757, 149.4594594595);
}

/* === LONG CONTENT ================================================== */
/*Mise en forme du champ long content sur les page : Page information, Page Formation, ect .. */
.text-formatted {
  max-width: 60.7142857143rem;
  /*correspond à title-m*/
  /*correspond à title-s*/
}
.text-formatted p, .text-formatted ul {
  padding-bottom: 1.5rem;
}
.text-formatted h2 {
  position: relative;
  padding-bottom: 1.5rem;
  padding-left: 0.8rem;
  padding-top: 1rem;
}
.text-formatted h2:before {
  display: inline-block;
  content: "";
  width: 2rem;
  height: 2rem;
  background: url(../img/icon/ellipse.svg) no-repeat center center;
  background-size: contain;
  position: absolute;
  top: 1.1rem;
  left: 0;
  z-index: -1;
}
.text-formatted h3 {
  padding-bottom: 1.5rem;
}
.text-formatted ul li:before {
  display: inline-block;
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background: #00203f;
  border-radius: 2rem;
  margin-right: 0.71429rem;
  transition: 0.3s;
  position: relative;
  top: 0rem;
  left: 0;
}

/* CUSTOME STYLES */
.page-node-type-homepage .overlay {
  background: url(../img/home/bg-home-top.png) no-repeat center bottom;
  background-size: cover;
}
.page-node-type-homepage .main.vitrine {
  padding-top: 0;
}

.page-node-type-homepage header {
  background: none;
}

.page-node-type-homepage .band-creditscore {
  margin-bottom: 0;
  min-height: 40rem;
}
.page-node-type-homepage .band-creditscore .inner-s {
  padding-top: 4rem;
  padding-bottom: 8rem;
  /*end contain*/
}
.page-node-type-homepage .band-creditscore .inner-s .contain {
  display: flex;
}
.page-node-type-homepage .band-creditscore .inner-s .contain .left {
  width: 50%;
}
.page-node-type-homepage .band-creditscore .inner-s .contain .left .title {
  font-family: "Poppins-Bold", sans-serif;
  font-size: 3.857em;
  line-height: 112%;
  color: #fff;
  margin-bottom: 1.2rem;
}
.page-node-type-homepage .band-creditscore .inner-s .contain .left .title span {
  color: #61bfad;
}
.page-node-type-homepage .band-creditscore .inner-s .contain .left .title.center {
  text-align: center;
}
.page-node-type-homepage .band-creditscore .inner-s .contain .left ul.para {
  color: #fff;
  max-width: 80%;
}
.page-node-type-homepage .band-creditscore .inner-s .contain .left ul.para li {
  font-family: "Poppins-Regular", sans-serif;
  font-size: 1.42857143em;
  line-height: 1.2em;
  color: #fff;
  padding-bottom: 0.75rem;
  text-indent: -2.4285714286rem;
  padding-left: 2.4285714286rem;
}
.page-node-type-homepage .band-creditscore .inner-s .contain .form {
  position: relative;
  width: 41.1%;
  background: #fff;
  border-radius: 0.8571428571rem;
  padding: 3.5rem 3rem;
  /*z-index:300;*/
}
.page-node-type-homepage .band-creditscore .inner-s .contain .form .bottom {
  margin-top: 0.8rem;
  display: flex;
  justify-content: space-between;
}
.page-node-type-homepage .band-creditscore .inner-s .contain .form .bottom .left ul li {
  font-family: "Roboto-Regular", sans-serif;
  font-size: 0.85714286em;
  line-height: 1.25em;
  color: #00203f;
  font-family: "Poppins-Regular", sans-serif;
  display: inline-block;
}
.page-node-type-homepage .band-creditscore .inner-s .contain .form .bottom .right p {
  color: #748494;
  font-family: "Poppins-Regular", sans-serif;
  font-size: 1em;
  line-height: 132%;
}
.page-node-type-homepage .band-creditscore .inner-s .contain .form:before {
  display: inline-block;
  content: "";
  width: 11.0714285714rem;
  height: 11.0714285714rem;
  background: url(../img/logo/logo_icone.svg) no-repeat center center;
  background-size: contain;
  transition: 0.3s;
  position: absolute;
  bottom: 3rem;
  left: -13rem;
}

.page-node-type-homepage .band-creditscore .inner-s .contain .form {
  /*@todo voir si je supprime box result dans le template*/
}
.page-node-type-homepage .band-creditscore .inner-s .contain .form .page-cs {
  /*switch*/
}
.page-node-type-homepage .band-creditscore .inner-s .contain .form .page-cs .onglet {
  padding-bottom: 0.25rem;
}
.page-node-type-homepage .band-creditscore .inner-s .contain .form .page-cs .onglet .title-m {
  position: relative;
  margin-top: 0;
  padding-left: 1.2rem;
  margin-bottom: 1.75rem;
  font-family: "Poppins-Bold", sans-serif;
  z-index: 800;
}
.page-node-type-homepage .band-creditscore .inner-s .contain .form .page-cs .onglet .title-m:before {
  display: inline-block;
  content: "";
  width: 2rem;
  height: 2rem;
  background: url(../img/icon/ellipse.svg) no-repeat center center;
  background-size: contain;
  position: absolute;
  top: 1.1rem;
  left: 0;
  z-index: -1;
}
.page-node-type-homepage .band-creditscore .inner-s .contain .form .page-cs .onglet .title-m:before {
  top: -0.4rem;
  width: 2.5rem;
  height: 2.5rem;
  /*z-index:-1;*/
}
.page-node-type-homepage .band-creditscore .inner-s .contain .form .page-cs .onglet .form-item-mode {
  width: 100%;
  margin-bottom: 0;
}
.page-node-type-homepage .band-creditscore .inner-s .contain .form .page-cs .onglet .field-prefix, .page-node-type-homepage .band-creditscore .inner-s .contain .form .page-cs .onglet .field-suffix {
  font-family: "Poppins-Bold", sans-serif;
  font-size: 1.14285714em;
}
.page-node-type-homepage .band-creditscore .inner-s .contain .form .page-cs .onglet .field-prefix.off, .page-node-type-homepage .band-creditscore .inner-s .contain .form .page-cs .onglet .field-suffix.off {
  color: rgb(132, 151, 176);
}
.page-node-type-homepage .band-creditscore .inner-s .contain .form .page-cs .onglet .switch {
  /*margin:0 1rem;
  width: 4rem !important;
  height: 2rem;*/
}
.page-node-type-homepage .band-creditscore .inner-s .contain .form .page-cs .onglet .switch .slider {
  /*background-color: $white;
  border:1px solid $blue;*/
}
.page-node-type-homepage .band-creditscore .inner-s .contain .form .page-cs .onglet .switch .slider:before {
  background-color: #00203f;
  /*height: 2rem;
  width: 2rem;
  left: -0.1rem;
  bottom: -0.05rem;*/
}
.page-node-type-homepage .band-creditscore .inner-s .contain .form .page-cs .form-cs {
  /*display:flex;*/
  top: 0 !important;
  /*position:relative;*/
}
.page-node-type-homepage .band-creditscore .inner-s .contain .form .page-cs .form-cs .form-box {
  width: 100%;
}
.page-node-type-homepage .band-creditscore .inner-s .contain .form .page-cs .form-cs .form-box .band-top {
  padding-bottom: 0;
}
.page-node-type-homepage .band-creditscore .inner-s .contain .form .page-cs .form-cs .result-box {
  display: none;
  width: 0%;
}
.page-node-type-homepage .band-creditscore .inner-s .contain .form .result-box {
  display: none;
}

.page-node-type-homepage .band-opopp {
  margin-bottom: 0;
}
.page-node-type-homepage .band-opopp .inner-s {
  padding-top: 6.4285714286rem;
  padding-bottom: 10.7142857143rem;
}
.page-node-type-homepage .band-opopp .inner-s .title-l {
  margin-bottom: 1.25rem;
  text-align: center;
}
.page-node-type-homepage .band-opopp .inner-s > .txt-18 {
  text-align: center;
  max-width: 50%;
  margin: auto;
  margin-bottom: 2rem;
}
.page-node-type-homepage .band-opopp .inner-s .list-outil {
  position: relative;
  display: flex;
  gap: 1.5rem;
  margin-bottom: 3rem;
  padding-left: 25rem;
}
.page-node-type-homepage .band-opopp .inner-s .list-outil .box {
  /*min-height:32.75rem;*/
  border-radius: 0.8571428571rem;
  /*position:relative;
  width:25%;
  background:$white;
  box-shadow: 8px 8px 24px 0px #0000001F;
  padding:2rem 2rem;
  border-radius:0.5rem;
  border:1px solid #E6EAEE;
  text-align:center;
  transition:0.3s;*/
}
.page-node-type-homepage .band-opopp .inner-s .list-outil .box .icon {
  position: relative;
  display: inline-block;
  content: "";
  width: 2.9rem;
  height: 2.9rem;
  background: url(../img/icon/ellipse.svg) no-repeat center center;
  background-size: contain;
  transition: 0.3s;
  margin-bottom: 1rem;
}
.page-node-type-homepage .band-opopp .inner-s .list-outil .box .icon:after {
  display: inline-block;
  content: "";
  width: 2.35rem;
  height: 2.35rem;
  background: url(../img/home/icon_calc.svg) no-repeat center center;
  background-size: contain;
  transition: 0.3s;
  position: absolute;
  top: 0.25rem;
  left: 1.2rem;
}
.page-node-type-homepage .band-opopp .inner-s .list-outil .box:nth-child(1) .icon:after {
  background: url(../img/home/icon_calc.svg) no-repeat center center;
}
.page-node-type-homepage .band-opopp .inner-s .list-outil .box:nth-child(2) .icon:after {
  background: url(../img/home/icon_file.svg) no-repeat center center;
}
.page-node-type-homepage .band-opopp .inner-s .list-outil .box:nth-child(3) .icon:after {
  background: url(../img/home/icon_folder.svg) no-repeat center center;
}
.page-node-type-homepage .band-opopp .inner-s .list-outil .box .title {
  font-family: "Poppins-Bold", sans-serif;
  font-size: 1.71428571em;
  line-height: 120%;
  color: #00203f;
  margin-bottom: 1rem;
}
.page-node-type-homepage .band-opopp .inner-s .list-outil .box .txt-18 {
  margin-bottom: 1.75rem;
}
.page-node-type-homepage .band-opopp .inner-s .list-outil .box .service {
  font-family: "Poppins-Bold", sans-serif;
  font-size: 1em;
  line-height: 132%;
  color: #00203f;
  margin-bottom: 1.2rem;
}
.page-node-type-homepage .band-opopp .inner-s .list-outil .box .tag li {
  /*@todo faire un mixin ou une classe CSS pour tag en général*/
  display: inline-block;
  background: #B0DFD6;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-family: "Poppins-Regular", sans-serif;
  font-size: 1em;
  line-height: 132%;
  color: #00203f;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}
.page-node-type-homepage .band-opopp .inner-s .list-outil .box .tag li.off {
  display: none;
}
.page-node-type-homepage .band-opopp .inner-s .list-outil figure {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
.page-node-type-homepage .band-opopp .inner-s .btn-o {
  width: 100%;
  text-align: center;
}

.page-node-type-homepage .band-why .inner-s {
  padding-top: 0;
  padding-bottom: 10.7142857143rem;
}
.page-node-type-homepage .band-why .inner-s figure {
  margin-bottom: 2.5rem;
}
.page-node-type-homepage .band-why .inner-s .bottom {
  display: flex;
}
.page-node-type-homepage .band-why .inner-s .bottom .why {
  width: 50%;
}
.page-node-type-homepage .band-why .inner-s .bottom .why .title-l {
  margin-bottom: 1rem;
  max-width: 80%;
}
.page-node-type-homepage .band-why .inner-s .bottom .why .txt-18 {
  max-width: 80%;
}
.page-node-type-homepage .band-why .inner-s .bottom ul.avantages {
  width: 50%;
}
.page-node-type-homepage .band-why .inner-s .bottom ul.avantages li {
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1.14285714em;
  line-height: 1.1875em;
  color: #00203f;
  padding-bottom: 0.6rem;
}

.overlay-how {
  background: url(../img/home/pattern-dot.svg) no-repeat center top;
}

.page-node-type-homepage .band-how .inner-s {
  padding-top: 0;
  padding-bottom: 2rem;
}
.page-node-type-homepage .band-how .inner-s .title-l, .page-node-type-homepage .band-how .inner-s > .txt-18 {
  text-align: center;
  max-width: 46rem;
  margin: auto;
  margin-bottom: 1rem;
}
.page-node-type-homepage .band-how .inner-s .title-l {
  /*max-width: 32rem;*/
}
.page-node-type-homepage .band-how .inner-s .btn-o {
  width: 100%;
  text-align: center;
  margin-top: 1.75rem;
  margin-bottom: 3rem;
}
.page-node-type-homepage .band-how .inner-s .list-step {
  display: flex;
  gap: 2rem;
}
.page-node-type-homepage .band-how .inner-s .list-step .box {
  width: 33.3333%;
  text-align: center;
  border-radius: 0.8571428571rem;
}
.page-node-type-homepage .band-how .inner-s .list-step .box figure {
  text-align: center;
  margin-bottom: 1.5rem;
}
.page-node-type-homepage .band-how .inner-s .list-step .box figure img {
  width: 50%;
}
.page-node-type-homepage .band-how .inner-s .list-step .box .step {
  width: 3.3rem;
  height: 3.3rem;
  border-radius: 50%;
  background: #B0DFD6;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  margin-bottom: 1.5rem;
}
.page-node-type-homepage .band-how .inner-s .list-step .box .step span {
  font-family: "Poppins-Bold", sans-serif;
  font-size: 2em;
  line-height: 120%;
  color: #00203f;
}
.page-node-type-homepage .band-how .inner-s .list-step .box .title {
  font-family: "Poppins-Bold", sans-serif;
  font-size: 1.14285714em;
  line-height: 132%;
  color: #00203f;
  margin-bottom: 0.75rem;
}
.page-node-type-homepage .band-how .inner-s .list-step .box .txt {
  font-family: "Poppins-Regular", sans-serif;
  font-size: 1em;
  line-height: 132%;
  color: #00203f;
}

.page-node-type-homepage .band-forfaits .inner-s {
  padding-top: 8rem;
  padding-bottom: 0;
  /*@todo faire varier le template correspondant selon page forfait ou home*/
}
.page-node-type-homepage .band-forfaits .inner-s #block-views-block-nos-formules-block-1 > h2 {
  display: none;
}
.page-node-type-homepage .band-forfaits .inner-s #nos-forfaits .title .description {
  padding-top: 1.35rem;
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1.28571429em;
  line-height: 132%;
  color: #00203f;
  padding-bottom: 6rem;
}
.page-node-type-homepage .band-forfaits .inner-s > div > div:first-child {
  display: none;
}

.page-node-type-homepage .band-cta {
  margin-bottom: 10.7142857143rem;
}
.page-node-type-homepage .band-cta .inner-s .bg-cta {
  background: #FFDDCE;
  padding-top: 4rem;
  padding-bottom: 4rem;
  border-radius: 0.8571428571rem;
}
.page-node-type-homepage .band-cta .inner-s .bg-cta .contain {
  padding-left: 39%;
  position: relative;
}
.page-node-type-homepage .band-cta .inner-s .bg-cta .contain .title-l {
  margin-bottom: 1rem;
}
.page-node-type-homepage .band-cta .inner-s .bg-cta .contain .title-l span {
  color: #ED7D31;
}
.page-node-type-homepage .band-cta .inner-s .bg-cta .contain .btn-o {
  margin-bottom: 1rem;
}
.page-node-type-homepage .band-cta .inner-s .bg-cta .contain ul.tag li {
  font-family: "Roboto-Regular", sans-serif;
  font-size: 0.85714286em;
  line-height: 1.25em;
  color: #00203f;
  font-family: "Poppins-Regular", sans-serif;
  display: inline-block;
}
.page-node-type-homepage .band-cta .inner-s .bg-cta .contain figure {
  position: absolute;
  left: 4rem;
  top: -8rem;
  z-index: 500;
}
.page-node-type-homepage .band-cta .inner-s .bg-cta .contain figure img {
  max-width: 50%;
}

/* === MENU ASIDE === */
aside.appli {
  position: fixed;
  top: calc(var(--toolbar-height) + 5rem);
  left: 0;
  height: calc(100vh - var(--toolbar-height) - 5rem);
  z-index: 4000;
  /*end .inner-spe*/
}
aside.appli .inner-spe {
  /*end menu.lateral*/
}
aside.appli .inner-spe .menu.menu-lateral {
  width: 100%;
  /*end nav*/
}
aside.appli .inner-spe .menu.menu-lateral nav {
  width: 100%;
  /* == niveau 1 ==*/
}
aside.appli .inner-spe .menu.menu-lateral nav ul.menu__links li.item--0 {
  padding-bottom: 0.25rem;
  padding-top: 0.75rem;
  max-width: 85%;
  opacity: 0.8;
  /*3 partie du menu séparé par border*/
  /*icone menus*/
}
aside.appli .inner-spe .menu.menu-lateral nav ul.menu__links li.item--0 a {
  font-family: "Roboto-Medium", sans-serif;
  font-size: 1.07142857em;
  line-height: 1.1666666667em;
  /*font-weight:bold;*/
  color: #00203f;
  transition: 0.3s;
  padding: 0.5rem 0.25rem 0.5rem 0.25rem; /*old 0.2rem 0*/
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  /*icone menu def*/
}
aside.appli .inner-spe .menu.menu-lateral nav ul.menu__links li.item--0 a:hover {
  background: #e2e2ed;
}
aside.appli .inner-spe .menu.menu-lateral nav ul.menu__links li.item--0 a:before {
  display: inline-block;
  margin-right: 1rem;
  content: "";
  width: 1.7857142857rem;
  height: 1.7857142857rem;
  transition: 0.3s;
  position: relative;
  /*top:0.5rem;*/
  left: 0;
}
aside.appli .inner-spe .menu.menu-lateral nav ul.menu__links li.item--0:nth-child(2), aside.appli .inner-spe .menu.menu-lateral nav ul.menu__links li.item--0:nth-child(6) {
  padding-bottom: 1.3rem;
  margin-bottom: 0.35rem;
  border-bottom: 1px solid rgba(0, 32, 63, 0.0784313725);
}
aside.appli .inner-spe .menu.menu-lateral nav ul.menu__links li.item--0:nth-child(1) a:before {
  background: url(../img/menu/dashboard.svg) no-repeat center center;
  /*background-size:contain;*/
}
aside.appli .inner-spe .menu.menu-lateral nav ul.menu__links li.item--0:nth-child(2) a {
  color: #00203f;
}
aside.appli .inner-spe .menu.menu-lateral nav ul.menu__links li.item--0:nth-child(2) a:before {
  background: url(../img/menu/add.svg) no-repeat center center;
  /*background-size:contain;*/
}
aside.appli .inner-spe .menu.menu-lateral nav ul.menu__links li.item--0:nth-child(3) a:before {
  background: url(../img/menu/credit_score.svg) no-repeat center center;
  /*background-size:contain;*/
}
aside.appli .inner-spe .menu.menu-lateral nav ul.menu__links li.item--0:nth-child(4) a:before {
  background: url(../img/menu/attestation.svg) no-repeat center center;
  /*background-size:contain;*/
}
aside.appli .inner-spe .menu.menu-lateral nav ul.menu__links li.item--0:nth-child(5) a:before {
  background: url(../img/menu/dossier.svg) no-repeat center center;
  /*background-size:contain;*/
}
aside.appli .inner-spe .menu.menu-lateral nav ul.menu__links li.item--0:nth-child(6) a:before {
  background: url(../img/menu/simulateur.svg) no-repeat center center;
  /*background-size:contain;*/
}
aside.appli .inner-spe .menu.menu-lateral nav ul.menu__links li.item--0:nth-child(7) a:before {
  background: url(../img/menu/configuration.svg) no-repeat center center;
  /*background-size:contain;*/
}
aside.appli .inner-spe .menu.menu-lateral nav ul.menu__links li.item--0:nth-child(8) {
  display: none;
}
aside.appli .inner-spe .menu.menu-lateral nav ul.menu__links li.item--0:nth-child(8) a:before {
  background: url(../img/menu/espace.svg) no-repeat center center;
  /*background-size:contain;*/
}
aside.appli .inner-spe .menu.menu-lateral nav ul.menu__links li.toggle {
  cursor: pointer;
}
aside.appli .inner-spe .menu.menu-lateral nav ul.menu__links li.toggle:before {
  /*@todo répétition (à voir)*/
  display: inline-block;
  margin-right: 1rem;
  content: "";
  width: 1.7857142857rem;
  height: 1.7857142857rem;
  transition: 0.3s;
  position: relative;
  top: 3rem;
  left: 0.25rem;
  opacity: 0.75;
}
aside.appli.on .toggle {
  text-align: right;
}
aside.appli.on .toggle:before {
  background: url(../img/menu/collapse.svg) no-repeat center center;
}
aside.appli.off .toggle {
  text-align: left;
}
aside.appli.off .toggle:before {
  background: url(../img/menu/expandi.svg) no-repeat center center;
}

/*end aside.appli*/
/* TYPE_CONTENU STYLES */
.gin--horizontal-toolbar #toolbar-administration {
  z-index: 10000;
}

/* == FORMULAIRE ATTESTATION GENERAL == */
.page-att {
  max-width: 1155px; /*@todo temporaire en attendant les contenu long*/
}
.page-att .form-att {
  display: flex;
  /*position:relative;*/
}
.page-att .form-att .form-box {
  width: 70%;
}
.page-att .form-att .form-box .band-top {
  padding-bottom: 0;
}
.page-att .form-att .result-box {
  width: 30%;
}

/* == FORMULAIRE ATTESTATION EXCEPTION == */
.ogp_attfamille .form-att #addmore-child-wrapper .form-actions {
  margin-bottom: 5rem;
}

.ogp_attvalidation section form .form-type-managed-file .form-managed-file .file {
  top: -1.4rem;
  left: -0.75rem;
}

.ogp_attvalidation section form .form-type-managed-file .form-managed-file label {
  top: -1.9rem;
  left: -0.75rem;
}

.ogp_attvalidation section form .form-type-managed-file .form-managed-file .form-submit {
  top: -1.75rem;
}

.ogp_attpatrimoine form #addmore-child-wrapper #edit-addmore-actions {
  padding-top: 3rem;
}

.ogp_attattgerer .form form #edit-filters-actions-submit, .ogp_attattgerer .form form #edit-filters-actions-reset {
  margin: initial;
  margin-left: 2rem;
}

/* == FORMULAIRE HORS OPOPP == */
.userlogin form label, .userregister form label {
  opacity: 1 !important;
}
.userlogin form .description, .userregister form .description {
  padding-top: 1rem;
  padding-bottom: 1rem;
  color: rgb(136.7142857143, 159.7142857143, 177.7857142857);
}

/* == FORMULAIRE IDENTITE == */
/* == FORMULAIRE VALIDATION == */
form.att-validation #edit-titre-param {
  display: block;
  width: 80%;
  margin-bottom: 3rem;
}
form.att-validation #edit-titre-param .description {
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1em;
  line-height: 1.5em;
  color: rgb(132, 151, 176);
}
form.att-validation #edit-titre-param .description .btn-v {
  margin-left: 1rem;
}
form.att-validation #edit-titre-param .description .btn-v a {
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1em;
  padding: 0.5rem 1rem;
}

/* == FORMULAIRE PATRIMOINE == */
/*@todo : correctif rapide => trouver une solution perrenne*/
/*Le addmore étant dans une boucle, je ne peux mettre qu un .line ce qui casse le design*/
#addmore-child-wrapper .line .form-item:nth-child(8) {
  margin-right: 2%;
}
#addmore-child-wrapper .line .form-item:nth-child(9) {
  margin-right: 0;
}
#addmore-child-wrapper .line .form-item:nth-child(6) {
  margin-bottom: 0;
}

/* == FORMULAIRE CONFIRMATION == */
form.att-identite #edit-band-info {
  width: 100% !important;
}
form.att-identite .copy-link {
  position: relative;
  padding: 25px 20px 25px 35px;
  margin-bottom: 2rem;
  background-position: 0.8rem 1.9rem !important;
  background-image: url(../img/icon/msg-info.svg);
  border-radius: 0;
}
form.att-identite .copy-link input#share-link {
  margin-top: 1rem;
  border: none;
}
form.att-identite .copy-link #copy-link-container {
  /*@todo mettre le mixin du bouton "retirer"*/
  position: absolute;
  top: 1.5rem;
  right: 1.25rem;
  display: inline-block;
  text-align: center;
  width: auto;
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1em;
  line-height: 1em;
  color: #fff;
  padding: 0.5rem 1rem;
  background: #61bfad;
  border: 1px solid #61bfad;
  border-radius: 4.5rem;
  transition: 0.3s;
}
form.att-identite .copy-link #copy-status {
  position: absolute;
  top: 2rem;
  right: 10rem;
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1em;
  line-height: 1em;
  color: #00203f;
}

/* == PAGE USER LOGIN == */
.userlogin .section-site-top {
  padding-bottom: 3rem;
}

/* == PAGE USER PASSWORD == */
.userpass .section-site-top {
  padding-bottom: 2rem;
}

/* == PAGE USER LOGOUT == */
.userlogoutconfirm .section-site-top {
  padding-bottom: 0;
}
.userlogoutconfirm form {
  color: transparent; /* @todo en attendant de mettre à jour (Drupal 10.5 résoud le problème "This action is irreversible")*/
}

/* == PAGE REGISTER == */
.userregister .section-site-top {
  padding-bottom: 4rem;
}
.userregister form .password-strength {
  margin-bottom: 1rem;
}
.userregister form .password-strength__title, .userregister form .password-confirm-message {
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1em;
  line-height: 1.2857142857em;
  color: #00203f;
  padding-top: 0.5rem;
}
.userregister form .js-form-type-password {
  width: 100%;
}

/* == PAGE 404 == */
#erreur-404 .section-site-top .description {
  padding-bottom: 2rem;
}

/* == BIENTOT DISPONIBLE == */
.ogp_backcoming_soon .section-site-top {
  position: relative;
}
.ogp_backcoming_soon .section-site-top .description {
  padding-bottom: 2rem;
}
.ogp_backcoming_soon .section-site-top:after {
  display: inline-block;
  content: "";
  width: 17.9285714286rem;
  height: 17.7142857143rem;
  background: url(../img/general/soon.png) no-repeat center center;
  background-size: contain;
  transition: 0.3s;
  position: absolute;
  bottom: -0.7142857143remrem;
  right: 40%;
  opacity: 0.1;
}

/* == PAGE PROFIL == */
#erreur-404 .section-site-top .description {
  padding-bottom: 2rem;
}

#user .title-m {
  position: relative;
  padding-bottom: 1.5rem;
  padding-left: 0.8rem;
  padding-top: 1rem;
}
#user .title-m:before {
  display: inline-block;
  content: "";
  width: 2rem;
  height: 2rem;
  background: url(../img/icon/ellipse.svg) no-repeat center center;
  background-size: contain;
  position: absolute;
  top: 1.1rem;
  left: 0;
  z-index: -1;
}
#user .infos {
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1.14285714em;
  line-height: 1.1875em;
  color: #00203f;
  padding-bottom: 0.5rem;
}
#user .infos span {
  font-family: "Roboto-Medium", sans-serif;
}
#user .infos .img {
  display: none;
}
#user .band-profil {
  padding-bottom: 4rem;
}
#user .band-abo {
  padding-bottom: 4rem;
}
#user .band-abo a.btn-delete {
  display: inline-block;
  /*width:15rem;*/
  font-family: "Roboto-Medium", sans-serif;
  font-size: 1.14285714em;
  line-height: 1em;
  color: #00203f;
  padding: 1rem 2.2857142857rem;
  background: #f5f6f7;
  border-radius: 4.5rem;
  border-color: rgb(132, 151, 176);
  transition: 0.3s;
  cursor: pointer;
  margin: auto;
  color: rgb(132, 151, 176);
  /*@todo faire un mixin pour small bouton*/
  width: auto;
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1em;
  padding: 0.5rem 1rem;
}
#user .band-abo a.btn-delete:hover {
  background: rgb(68.3243243243, 168.6756756757, 149.4594594595);
  border-color: rgb(68.3243243243, 168.6756756757, 149.4594594595);
  color: #fff;
}
#user .band-forfaits {
  max-width: 1155px; /*@todo temporaire en attendant les contenu long*/
}

/* == Content full ou partiel (1155 px) == */
/* @todo depuis la modification du frame d'opopp qui laisse beaucoup de place au content => trouver une solution avec classe, en attendant max-width */
/* ex: faire une classe "width-one-tiers" (33%), "width-two-tiers" (66%) et "width-full" (100%) */
/*Modele général @todo à revoir + revoir condition generales */
.entitynodecanonical:not(.conditions-generales-de-vente) section.appli #block-opopp-content, .entitynodecanonical:not(.conditions-generales-de-vente) section.appli .section-site-top {
  max-width: 1155px; /*@todo temporaire en attendant les contenu long*/
  margin: auto;
}

/*@todo voir section-site-top de commerce */
.commerce_checkoutform section.appli #block-opopp-content, .commerce_checkoutform section.appli .section-site-top, .userlogoutconfirm section.appli #block-opopp-content, .userlogoutconfirm section.appli .section-site-top, .userlogin section.appli #block-opopp-content, .userlogin section.appli .section-site-top, .formations section.appli #block-opopp-content, .formations section.appli .section-site-top {
  max-width: 1155px; /*@todo temporaire en attendant les contenu long*/
  margin: 0;
}
.commerce_checkoutform .messages, .userlogoutconfirm .messages, .userlogin .messages, .formations .messages {
  max-width: 1155px; /*@todo temporaire en attendant les contenu long*/
}

#attestation-choix {
  /*@todo à ranger du coté de form*/
  max-width: 1155px;
}

/*page form type */
/*@todo faire .desc (txt-16 grey) & .desc-s (txt 12, grey, italic*/
/* == PAGE FORM RESULTATS */
.att-resultats {
  width: 100%;
  max-width: 1155px; /*@todo temporaire en attendant les contenu long*/
  /* == commun */
}
.att-resultats .inner-sec {
  border-radius: 1.5rem;
  box-shadow: 0px 0px 30px 0 rgba(0, 0, 0, 0.08);
  padding: 3rem 4rem;
}
.att-resultats .title-m {
  padding-bottom: 0;
  margin-bottom: 0;
}
.att-resultats .title-s {
  padding-top: 0 !important;
}

/* === Band Avis ======== */
.att-resultats .band-avis {
  margin-bottom: 3rem;
}
.att-resultats .band-avis .inner-sec .contain {
  display: flex;
}
.att-resultats .band-avis .inner-sec .contain .designation {
  display: flex;
  width: 48%;
  border-right: 3px solid #f5f6f7;
}
.att-resultats .band-avis .inner-sec .contain .designation .img {
  display: inline-block;
  content: "";
  width: 5.7142857143rem;
  height: 5.7142857143rem;
  background: url(../img/icon/roof_2.svg) no-repeat center center;
  background-size: contain;
}
.att-resultats .band-avis .inner-sec .contain .designation .para-c {
  padding-left: 4rem;
}
.att-resultats .band-avis .inner-sec .contain .designation .para-c .title-s {
  padding-bottom: 0.5rem;
}
.att-resultats .band-avis .inner-sec .contain .designation .para-c span {
  display: block;
}
.att-resultats .band-avis .inner-sec .contain .designation .para-c .txt {
  padding-bottom: 1.25rem;
  line-height: 1.5em;
}
.att-resultats .band-avis .inner-sec .contain .avis {
  display: flex;
  width: 52%;
}
.att-resultats .band-avis .inner-sec .contain .avis .img {
  display: inline-block;
  content: "";
  width: 4.15rem;
  height: 5.02rem;
  background: url(../img/logo/logo_icone.svg) no-repeat center center;
  background-size: contain;
  margin-left: 4rem;
}
.att-resultats .band-avis .inner-sec .contain .avis .para-c {
  padding-left: 4rem;
}
.att-resultats .band-avis .inner-sec .contain .avis .para-c .title-s {
  font-size: 2em;
  padding-bottom: 1rem;
}
.att-resultats .band-avis .inner-sec .contain .avis .para-c .title-s.yellow {
  color: rgb(231.4413265306, 179.3367346939, 6.0586734694);
}
.att-resultats .band-avis .inner-sec .contain .avis .para-c .title-s.green {
  color: #61bfad;
}
.att-resultats .band-avis .inner-sec .contain .avis .para-c .title-s.red {
  color: #d14343;
}
.att-resultats .band-avis .inner-sec .contain .avis .para-c .indice {
  display: flex;
}
.att-resultats .band-avis .inner-sec .contain .avis .para-c .indice .note {
  font-weight: 800;
}
.att-resultats .band-avis .inner-sec .contain .avis .para-c .indice .txt {
  padding-left: 1rem;
}
.att-resultats .band-avis .inner-sec .contain .avis .para-c .indice .txt span:nth-child(1) {
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1.14285714em;
  line-height: 1.1875em;
  color: #00203f;
}
.att-resultats .band-avis .inner-sec .contain .avis .para-c .indice .txt span:nth-child(2) {
  display: block;
  color: #b7c5d0;
}

/* === Band Details ========  */
.att-resultats .band-details {
  margin-bottom: 3rem;
}
.att-resultats .band-details .contain {
  display: flex;
  height: 26rem;
}
.att-resultats .band-details .line {
  display: flex;
  justify-content: space-between;
}
.att-resultats .band-details .line span:nth-child(1), .att-resultats .band-details .line span:nth-child(2) {
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1.14285714em;
  line-height: 1.1875em;
  color: #00203f;
  line-height: 1.5em;
}
.att-resultats .band-details .line span:nth-child(1) {
  color: rgb(132, 151, 176);
}

/* == section projet */
.att-resultats .band-details .section-projet {
  margin-right: 3rem;
  width: 50%;
  height: 100%;
}
.att-resultats .band-details .section-projet .inner-sec {
  height: 100%;
}
.att-resultats .band-details .section-projet .inner-sec .line.bien {
  padding-bottom: 1rem;
}
.att-resultats .band-details .section-projet .inner-sec .line.bien span:nth-child(2) {
  font-weight: bold;
}
.att-resultats .band-details .section-projet .inner-sec .line.title {
  padding-bottom: 2.5rem;
}
.att-resultats .band-details .section-projet .inner-sec .line.title span:nth-child(1) {
  color: #00203f;
  font-size: inherit;
}
.att-resultats .band-details .section-projet .inner-sec .line:nth-child(3) span:nth-child(2) {
  font-weight: bold;
}
.att-resultats .band-details .section-projet .inner-sec .cout {
  padding-top: 2rem;
}

/* == section emprunt */
.att-resultats .band-details .section-emprunt {
  width: 50%;
  height: 100%;
}
.att-resultats .band-details .section-emprunt .inner-sec {
  height: 100%;
  /* == sous section emprunt */
  /* == sous section form */
}
.att-resultats .band-details .section-emprunt .inner-sec .ss-emprunt .line.title {
  padding-bottom: 0;
}
.att-resultats .band-details .section-emprunt .inner-sec .ss-emprunt .line.title span:nth-child(1) {
  color: #00203f;
  font-size: inherit;
}
.att-resultats .band-details .section-emprunt .inner-sec .ss-emprunt .line.subtitle {
  position: relative;
  padding-bottom: 1rem;
}
.att-resultats .band-details .section-emprunt .inner-sec .ss-emprunt .line.subtitle span:nth-child(1), .att-resultats .band-details .section-emprunt .inner-sec .ss-emprunt .line.subtitle.subtitle span:nth-child(2) {
  color: #61bfad;
}
.att-resultats .band-details .section-emprunt .inner-sec .ss-emprunt .line.subtitle .info .bulle {
  top: 0;
  left: 8rem;
}
.att-resultats .band-details .section-emprunt .inner-sec .ss-form {
  position: relative;
  height: 100%;
}
.att-resultats .band-details .section-emprunt .inner-sec .ss-form .list {
  padding-bottom: 4rem;
}
.att-resultats .band-details .section-emprunt .inner-sec .ss-form .list .line span:nth-child(1) {
  padding-top: 0.25rem;
}
.att-resultats .band-details .section-emprunt .inner-sec .ss-form .list .line span:nth-child(2) {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: #f5f6f7;
  border-radius: 2rem;
  font-weight: bold;
}
.att-resultats .band-details .section-emprunt .inner-sec .ss-form .list-taux {
  display: flex;
  position: absolute;
  bottom: 8rem;
  left: 0;
}
.att-resultats .band-details .section-emprunt .inner-sec .ss-form .list-taux li {
  display: flex;
  align-items: center;
  padding-right: 3rem;
}
.att-resultats .band-details .section-emprunt .inner-sec .ss-form .list-taux li .label {
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1.42857143em;
  line-height: 1em;
  color: #00203f;
  padding-right: 0.5rem;
}
.att-resultats .band-details .section-emprunt .inner-sec .ss-form .list-taux li .label i {
  display: block;
  font-size: 0.55em;
  font-style: normal;
}
.att-resultats .band-details .section-emprunt .inner-sec .ss-form .list-taux li .bg-circle {
  font-size: 1.42857143em;
  line-height: 2.75em;
  width: 5rem;
  height: 5rem;
}
.att-resultats .band-details .section-emprunt .inner-sec .ss-form .list-taux li .bg-circle i {
  font-style: normal;
  font-size: 0.8em;
}
.att-resultats .band-details .section-emprunt .inner-sec .ss-form .list-taux li .bg-circle.annee {
  line-height: 2em;
}
.att-resultats .band-details .section-emprunt .inner-sec .ss-form .list-taux li .bg-circle.annee i {
  display: block;
  line-height: 0.8em;
  font-weight: normal;
  position: relative;
  top: -0.5rem;
  left: 0;
}

/* == Band treps ========  */
.att-resultats .band-treps {
  margin-bottom: 3rem;
}
.att-resultats .band-treps .inner-sec {
  background: #61bfad;
  padding: 4rem 2rem 9rem 2rem;
}
.att-resultats .band-treps .inner-sec .contain {
  display: flex;
}
.att-resultats .band-treps .inner-sec .contain .explain, .att-resultats .band-treps .inner-sec .contain .indice {
  padding: 0 2rem;
}
.att-resultats .band-treps .inner-sec .contain .explain {
  width: 26%;
}
.att-resultats .band-treps .inner-sec .contain .explain .title-s {
  color: #fff;
}
.att-resultats .band-treps .inner-sec .contain .explain .title-s.icon-a:before {
  width: 2.5rem;
  height: 2.5rem;
  background: url(../img/icon/info.svg) no-repeat center center;
  background-size: contain;
  top: 0.7rem;
  left: 0;
}
.att-resultats .band-treps .inner-sec .contain .explain .txt-14 {
  color: #fff;
}
.att-resultats .band-treps .inner-sec .contain .indice {
  width: 18.5%;
  position: relative;
  text-align: center;
}
.att-resultats .band-treps .inner-sec .contain .indice .title {
  font-family: "Poppins-SemiBold", sans-serif;
  font-size: 1.28571429em;
  line-height: 1.25em;
  font-weight: bold;
  color: #fff;
  margin-bottom: 1rem;
}
.att-resultats .band-treps .inner-sec .contain .indice p .description {
  display: block;
  font-family: "Roboto-Medium", sans-serif;
  font-size: 1em;
  line-height: 1.2857142857em;
  color: #fff;
  margin-bottom: 1rem;
}
.att-resultats .band-treps .inner-sec .contain .indice p .txt {
  display: block;
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1em;
  line-height: 1.3333333333em;
  color: #00203f;
}
.att-resultats .band-treps .inner-sec .contain .indice .flag {
  position: absolute;
  bottom: -8rem;
  left: 0;
  width: 100%;
  text-align: center;
}
.att-resultats .band-treps .inner-sec .contain .indice .flag .nb.bg-circle {
  display: inline-block;
  width: 5.75rem;
  height: 5.75rem;
  background: #fff;
  font-size: inherit;
}
.att-resultats .band-treps .inner-sec .contain .indice .flag .nb.bg-circle .mil {
  font-size: 1.71428571em;
  line-height: 2.75em;
}
.att-resultats .band-treps .inner-sec .contain .indice .flag .nb.bg-circle .rest {
  font-size: 1.07142857em;
}
.att-resultats .band-treps .inner-sec .contain .indice .flag .nb.bg-circle i {
  font-style: normal;
  font-size: 1em;
  color: rgb(132, 151, 176);
}
.att-resultats .band-treps .inner-sec .contain .indice .flag .nb.bg-circle .bg-smiley {
  position: absolute;
  bottom: -2rem;
  left: 0;
  right: 0;
  margin: auto;
  width: 3.9rem;
  height: 3.9rem;
  text-align: center;
  background: #fff;
  border-radius: 50%;
}
.att-resultats .band-treps .inner-sec .contain .indice .flag .nb.bg-circle .bg-smiley:hover .msg.bulle {
  opacity: 1;
}
.att-resultats .band-treps .inner-sec .contain .indice .flag .nb.bg-circle .bg-smiley .smiley {
  display: inline-block;
  right: 0;
  position: relative;
  top: 0.2rem;
  width: 3.5rem;
  height: 3.5rem;
  margin: auto;
}
.att-resultats .band-treps .inner-sec .contain .indice .flag .nb.bg-circle .bg-smiley .smiley.positiv {
  background: url(../img/icon/positiv.svg) no-repeat center center;
  background-size: contain;
}
.att-resultats .band-treps .inner-sec .contain .indice .flag .nb.bg-circle .bg-smiley .smiley.neutral {
  background: url(../img/icon/neutral.svg) no-repeat center center;
  background-size: contain;
}
.att-resultats .band-treps .inner-sec .contain .indice .flag .nb.bg-circle .bg-smiley .smiley.negativ {
  background: url(../img/icon/negativ.svg) no-repeat center center;
  background-size: contain;
}
.att-resultats .band-treps .inner-sec .contain .indice .flag .nb.bg-circle .bg-smiley .msg.bulle {
  opacity: 0;
  width: 12rem;
  max-width: none;
  line-height: 1.15em;
  position: relative;
  top: 0.25rem;
  left: -4rem;
  transition: 0.3s;
}

.section-formations {
  /*.item:hover .news-teaser,
  .item:focus .news-teaser {
    transform: scale(1.2);
  }*/
}
.section-formations .list-formation {
  display: flex;
  gap: 1rem;
}
.section-formations .list-formation .formation-box {
  width: 33.3333%;
}
.section-formations .list-formation .formation-box:hover .teaser {
  transform: scale(1.2);
}
.section-formations .list-formation .formation-box .contain {
  width: 100%;
  height: 15rem;
  position: relative;
  overflow: hidden;
}
.section-formations .list-formation .formation-box .contain .teaser {
  height: 100%;
  width: 100%;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: 50% 50% !important;
  transition: 0.3s;
}
.section-formations .list-formation .formation-box .contain .txt {
  color: #fff;
  padding: 3rem 3rem;
  position: absolute;
  bottom: 0;
}
.section-formations .list-formation .formation-box .contain .txt h3 {
  font-family: "Poppins-SemiBold", sans-serif;
  font-size: 1.929em;
  line-height: 1.1111111111em;
  font-weight: bold;
  color: #00203f;
  color: #fff;
  padding-bottom: 1rem;
}
.section-formations .list-formation .formation-box .contain .txt h3 span {
  color: #61bfad;
}
.section-formations .list-formation .formation-box .contain .txt p {
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1.14285714em;
  line-height: 1.1875em;
  color: #00203f;
  color: #fff;
}

.att_home_outil .band-welcome {
  padding-bottom: 3rem;
  margin-bottom: 7rem;
  max-width: 80%;
  box-shadow: 0 10px 13px -5px rgba(0, 0, 0, 0.04);
}
.att_home_outil .band-welcome .title-l {
  padding-top: 0.75rem;
  margin-bottom: 2rem;
}
.att_home_outil .band-welcome .title-l span {
  text-transform: capitalize;
}
.att_home_outil .band-welcome .txt {
  display: flex;
  gap: 3rem;
}
.att_home_outil .band-welcome .txt figure {
  width: 6.5rem;
}
.att_home_outil .band-welcome .txt .txt-16 {
  width: 58%;
}

.att_home_outil .band-table form, .att_home_outil .band-table .btn-v {
  display: none !important;
}

/* == page /operation */
#new-operation h2.title-m {
  display: none;
}

/*== form e-commerce */
/* == commun */
.cart, .commerce_checkoutform {
  /*correction pour input radio*/
  /*== table*/
  /* == total panier */
  /* == btn valider & retour */
}
.cart .section-site-top, .commerce_checkoutform .section-site-top {
  padding-bottom: 3.5rem;
}
.cart fieldset legend, .commerce_checkoutform fieldset legend {
  font-family: "Poppins-SemiBold", sans-serif;
  font-size: 1.929em;
  line-height: 1.1111111111em;
  font-weight: bold;
  color: #00203f;
  padding-bottom: 2rem;
  /*bouton modifier*/
}
.cart fieldset legend span, .commerce_checkoutform fieldset legend span {
  color: #61bfad;
}
.cart fieldset legend a, .commerce_checkoutform fieldset legend a {
  display: inline-block;
  /*width:15rem;*/
  font-family: "Roboto-Medium", sans-serif;
  font-size: 1.14285714em;
  line-height: 1em;
  color: #fff;
  padding: 1rem 2.2857142857rem;
  background: #61bfad;
  border-radius: 4.5rem;
  border: 1px solid #61bfad;
  transition: 0.3s;
  font-size: 0.6em;
  padding: 0.5rem 1rem;
  font-family: Roboto-Regular, sans-serif;
  font-weight: normal;
  position: relative;
  top: -0.4rem;
}
.cart fieldset legend a:hover, .commerce_checkoutform fieldset legend a:hover {
  background: rgb(68.3243243243, 168.6756756757, 149.4594594595);
  border-color: rgb(68.3243243243, 168.6756756757, 149.4594594595);
}
.cart .title-m, .cart fieldset legend, .commerce_checkoutform .title-m, .commerce_checkoutform fieldset legend {
  color: #61bfad;
  margin: 0;
}
.cart form input[type=radio] + label, .commerce_checkoutform form input[type=radio] + label {
  padding-left: 1rem !important;
}
.cart form div[data-drupal-selector=edit-actions] input[type=submit], .commerce_checkoutform form div[data-drupal-selector=edit-actions] input[type=submit] {
  margin-right: 0.5rem;
}
.cart table.views-table, .cart table.views-table + div, .cart .checkout-pane-payment-information, .cart .checkout-pane-order-summary, .cart .checkout-pane-review, .commerce_checkoutform table.views-table, .commerce_checkoutform table.views-table + div, .commerce_checkoutform .checkout-pane-payment-information, .commerce_checkoutform .checkout-pane-order-summary, .commerce_checkoutform .checkout-pane-review {
  display: inline-block;
  padding: 2rem 3rem;
  vertical-align: top;
  background: #f7f8fa;
  border-radius: 0.5rem;
  border: 1px solid #ecf1f7;
}
.cart table, .commerce_checkoutform table {
  /*width:70%;*/
}
.cart table thead, .commerce_checkoutform table thead {
  display: none;
}
.cart table tbody td, .commerce_checkoutform table tbody td {
  padding-left: 1rem;
  padding-right: 1rem;
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1.14285714em;
  line-height: 1.1875em;
  color: #00203f;
}
.cart table tbody td, .commerce_checkoutform table tbody td {
  vertical-align: top;
  /* = champs */
  /* = produit */
  /* = prix unitaire */
  /* = quantité */
  /* = remoove */
  /* = prix total */
}
.cart table tbody td .forfait-title, .commerce_checkoutform table tbody td .forfait-title {
  font-family: "Roboto-Bold", sans-serif;
  font-size: 1.28571429em;
  padding-bottom: 1rem;
  text-transform: uppercase;
}
.cart table tbody td .forfait-prix, .commerce_checkoutform table tbody td .forfait-prix {
  font-family: "Roboto-Medium", sans-serif;
}
.cart table tbody td .description, .commerce_checkoutform table tbody td .description {
  padding-top: 1rem;
}
.cart table tbody td .forfait-credit, .commerce_checkoutform table tbody td .forfait-credit {
  padding-top: 1rem;
  font-family: "Roboto-Medium", sans-serif;
}
.cart table tbody td .list-options, .commerce_checkoutform table tbody td .list-options {
  padding-top: 1rem;
}
.cart table tbody td .list-options .inclus, .commerce_checkoutform table tbody td .list-options .inclus {
  display: none;
}
.cart table tbody td .list-options ul.forfait-variation, .commerce_checkoutform table tbody td .list-options ul.forfait-variation {
  font-size: inherit;
  padding-left: 0;
}
.cart table tbody td .list-options ul.forfait-variation li, .commerce_checkoutform table tbody td .list-options ul.forfait-variation li {
  font-size: inherit;
}
.cart table tbody td .list-options ul.forfait-variation li:before, .commerce_checkoutform table tbody td .list-options ul.forfait-variation li:before {
  padding-right: 0;
  margin-right: 0.75rem;
}
.cart table tbody td.views-field-purchased-entity, .commerce_checkoutform table tbody td.views-field-purchased-entity {
  min-width: 25rem;
  padding-left: 0;
}
.cart table tbody td.views-field-unit-price__number, .commerce_checkoutform table tbody td.views-field-unit-price__number {
  display: none;
}
.cart table tbody td.views-field-edit-quantity, .commerce_checkoutform table tbody td.views-field-edit-quantity {
  display: none;
}
.cart table tbody td.views-field-remove-button input[type=submit], .commerce_checkoutform table tbody td.views-field-remove-button input[type=submit] {
  padding: 0.5rem 1rem;
  font-family: Roboto-Regular, sans-serif;
  font-size: 1em;
}
.cart .total-cart, .commerce_checkoutform .total-cart {
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1.14285714em;
  line-height: 1.1875em;
  color: #00203f;
}
.cart table.views-table + div, .commerce_checkoutform table.views-table + div {
  margin-left: 1rem;
}
.cart input#edit-actions-next, .commerce_checkoutform input#edit-actions-next {
  margin-right: 1.5rem;
}
.cart .link--previous, .commerce_checkoutform .link--previous {
  display: inline-block;
  /*width:15rem;*/
  font-family: "Roboto-Medium", sans-serif;
  font-size: 1.14285714em;
  line-height: 1em;
  color: #00203f;
  padding: 1rem 2.2857142857rem;
  background: #f5f6f7;
  border-radius: 4.5rem;
  border-color: rgb(132, 151, 176);
  transition: 0.3s;
  border: 1px solid #eaecf1;
}
.cart .link--previous:hover, .commerce_checkoutform .link--previous:hover {
  background: rgb(68.3243243243, 168.6756756757, 149.4594594595);
  border-color: rgb(68.3243243243, 168.6756756757, 149.4594594595);
  color: #fff;
}

/* == page panier */
.cart table.views-table {
  min-width: 45rem;
}
.cart .cart-empty-page {
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1.14285714em;
  line-height: 1.1875em;
  color: #00203f;
}

/* == page checkout */
/*YYY*/
/* == page checkout */
.commerce_checkoutform {
  /* == sous section review */
  /* == sous section checkout */
  /*bouton check => label à faire apparaitre*/
}
.commerce_checkoutform .checkout-pane-payment-information, .commerce_checkoutform .checkout-pane-review {
  display: block;
  min-width: 45rem;
}
.commerce_checkoutform .checkout-pane-review, .commerce_checkoutform .layout-checkout-form {
  width: 45rem;
  /*correction car legend fusionné*/
}
.commerce_checkoutform .checkout-pane-review .form-item, .commerce_checkoutform .layout-checkout-form .form-item {
  width: 100%;
}
.commerce_checkoutform .checkout-pane-review #edit-review-contact-information .fieldset-legend, .commerce_checkoutform .checkout-pane-review #edit-review-payment-information .fieldset-legend, .commerce_checkoutform .layout-checkout-form #edit-review-contact-information .fieldset-legend, .commerce_checkoutform .layout-checkout-form #edit-review-payment-information .fieldset-legend {
  /*@todo test mixin title-ecom-2 (4 ou 5 répétition)*/
  /*@include title-ecom-2;*/
  font-family: "Roboto-Bold", sans-serif;
  font-size: 1.42857143em;
  padding-bottom: 1rem;
  text-transform: uppercase;
  color: #00203f;
}
.commerce_checkoutform .checkout-pane-review #edit-review-contact-information .fieldset-legend a, .commerce_checkoutform .checkout-pane-review #edit-review-payment-information .fieldset-legend a, .commerce_checkoutform .layout-checkout-form #edit-review-contact-information .fieldset-legend a, .commerce_checkoutform .layout-checkout-form #edit-review-payment-information .fieldset-legend a {
  color: #61bfad;
}
.commerce_checkoutform .checkout-pane-review .fieldset-wrapper, .commerce_checkoutform .layout-checkout-form .fieldset-wrapper {
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1.14285714em;
  line-height: 1.1875em;
  color: #00203f;
}
.commerce_checkoutform .checkout-pane-review legend, .commerce_checkoutform .layout-checkout-form legend {
  padding-top: 1rem;
  padding-bottom: 1.5rem;
}
.commerce_checkoutform .checkout-pane-review article .field--name-label, .commerce_checkoutform .checkout-pane-review article .field--name-expires, .commerce_checkoutform .layout-checkout-form article .field--name-label, .commerce_checkoutform .layout-checkout-form article .field--name-expires {
  font-family: "Roboto-Medium", sans-serif;
}
.commerce_checkoutform .checkout-pane-review article p.address, .commerce_checkoutform .layout-checkout-form article p.address {
  margin-top: 2rem;
  margin-bottom: 0;
}
.commerce_checkoutform .checkout-pane-payment-information > legend {
  display: none;
}
.commerce_checkoutform .checkout-pane-payment-information .form-item {
  width: 100%;
}
.commerce_checkoutform .checkout-pane-payment-information .form-item .fieldset-legend {
  font-family: "Roboto-Bold", sans-serif;
  font-size: 1.42857143em;
  padding-bottom: 1rem;
  text-transform: uppercase;
  color: #00203f;
}
.commerce_checkoutform .checkout-pane-payment-information .form-item .fieldset-legend a {
  color: #61bfad;
}
.commerce_checkoutform .checkout-pane-payment-information .form-item label {
  position: relative;
  left: 0;
  top: -0.25rem;
  opacity: 1;
  background: none;
  font-family: "Roboto-Medium", sans-serif;
  font-size: 1em;
  line-height: 1.2857142857em;
  color: #00203f;
  padding: 0;
}
.commerce_checkoutform .checkout-pane-payment-information .stripe-form .form-item {
  margin-top: 1rem;
  margin-bottom: 1.25rem;
}
.commerce_checkoutform .checkout-complete {
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1.14285714em;
  line-height: 1.1875em;
  color: #00203f;
}
.commerce_checkoutform .profile p.address {
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1em;
  line-height: 1.2857142857em;
  color: #00203f;
  line-height: 1.5rem;
  border: 1px solid rgb(178.5816831683, 190.3861386139, 205.9183168317);
  border-radius: 0.8rem;
  padding: 1.2142857143rem 1.4285714286rem;
  margin-bottom: 2rem;
  width: 100%;
}
.commerce_checkoutform .checkout-pane-order-summary {
  min-width: 45rem;
}
.commerce_checkoutform .checkout-pane-order-summary table tbody tr td:first-child {
  display: none;
}
.commerce_checkoutform .checkout-pane-order-summary table tbody tr td:nth-child(2) {
  min-width: 25rem;
  padding-left: 0;
}
.commerce_checkoutform .checkout-pane-order-summary table tbody tr td:nth-child(3) {
  display: none;
}
.commerce_checkoutform section form .form-type-checkbox.form-item-payment-information-add-payment-method-billing-information-copy-to-address-book label {
  top: 0;
  padding-left: 0.25rem;
  display: inline-block;
}

/*Page simple de type information : marque blanches, CGV ect.*/
/*Construite autour d'un seul champ texte formatté'*/
#node-info .inner-xs .section-informations {
  margin-bottom: 10.7142857143rem;
}
/* == PAGE CREDIT SCORE == */
.page-cs {
  max-width: 1155px; /*@todo temporaire en attendant les contenu long*/
  /*switch*/
}
.page-cs .band-first {
  padding-bottom: 2.8rem !important;
  margin-bottom: 3rem;
  box-shadow: 0 10px 13px -5px rgba(0, 0, 0, 0.04);
  max-width: 80%;
}
.page-cs .onglet {
  padding-bottom: 0.25rem;
}
.page-cs .onglet .title-m {
  padding-bottom: 0;
  margin-bottom: 1.25rem;
}
.page-cs .onglet .title-m + .form-type-checkbox {
  width: 100%;
}
.page-cs .onglet .field-prefix, .page-cs .onglet .field-suffix {
  font-family: "Roboto-Medium", sans-serif;
  font-size: 1.42857143em;
  line-height: 1em;
  color: #00203f;
  transition: 0.3s;
}
.page-cs .onglet .field-prefix.off, .page-cs .onglet .field-suffix.off {
  color: rgb(132, 151, 176);
}
.page-cs .onglet .switch {
  margin: 0 1rem;
  width: 4rem !important;
  height: 2rem;
}
.page-cs .onglet .switch .slider {
  background-color: #fff;
  border: 1px solid #00203f;
}
.page-cs .onglet .switch .slider:before {
  background-color: #61bfad;
  height: 2rem;
  width: 2rem;
  left: -0.1rem;
  bottom: -0.05rem;
}
.page-cs .form-cs {
  display: flex;
  /*position:relative;*/
}
.page-cs .form-cs .form-box {
  width: 70%;
}
.page-cs .form-cs .form-box .band-top {
  padding-bottom: 0;
}
.page-cs .form-cs .result-box {
  width: 30%;
}

/* == FORMULAIRE CREDIT SCORE == */
.ogp_csprojet_type section form.credit-score, .ogp_csfree section form.credit-score, .path-frontpage section form.credit-score-home {
  /*form commun*/
  /*box resultats*/
}
.ogp_csprojet_type section form.credit-score .ajax-progress-throbber, .ogp_csfree section form.credit-score .ajax-progress-throbber, .path-frontpage section form.credit-score-home .ajax-progress-throbber {
  display: none;
}
.ogp_csprojet_type section form.credit-score .form-section, .ogp_csfree section form.credit-score .form-section, .path-frontpage section form.credit-score-home .form-section {
  margin-top: 1rem;
  /* Input Radio - structure générale */
  /* Input range */
  /*@todo à déplacer dans les composants si réutilisé*/
  /* Modifier la couleur de la barre (track) */
  /* Modifier la couleur de la poignée (thumb) */
  /* Pour Firefox */
  /* Pour les autres navigateurs */
}
.ogp_csprojet_type section form.credit-score .form-section.off, .ogp_csfree section form.credit-score .form-section.off, .path-frontpage section form.credit-score-home .form-section.off {
  display: none;
}
.ogp_csprojet_type section form.credit-score .form-section .form-item:not(.fieldgroup), .ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup), .path-frontpage section form.credit-score-home .form-section .form-item:not(.fieldgroup) {
  position: relative;
  display: flex;
  width: 80%;
  margin-bottom: 4rem;
}
.ogp_csprojet_type section form.credit-score .form-section .form-item:not(.fieldgroup).form-type-number:after, .ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup).form-type-number:after, .path-frontpage section form.credit-score-home .form-section .form-item:not(.fieldgroup).form-type-number:after {
  content: "€";
  width: 5rem;
  height: 2rem;
  position: absolute;
  top: 0.35rem;
  right: 11.5vw; /*@todo mettre en largeur d'ecran*/
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1.21428571em;
  line-height: 1em;
  color: #61bfad;
  z-index: 500;
}
.ogp_csprojet_type section form.credit-score .form-section .form-item:not(.fieldgroup).form-type-number.parent-euro-mois:after, .ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup).form-type-number.parent-euro-mois:after, .path-frontpage section form.credit-score-home .form-section .form-item:not(.fieldgroup).form-type-number.parent-euro-mois:after {
  content: "€ /mois" !important;
}
.ogp_csprojet_type section form.credit-score .form-section .form-item:not(.fieldgroup) label, .ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup) label, .path-frontpage section form.credit-score-home .form-section .form-item:not(.fieldgroup) label {
  width: 40%;
  position: relative;
  left: 0;
  top: 0;
  font-family: "Roboto-Bold", sans-serif;
  font-size: 1.42857143em;
  line-height: 1.2em;
  padding: 0;
  color: #00203f;
  opacity: 1;
  transition: 0.3s;
}
.ogp_csprojet_type section form.credit-score .form-section .form-item:not(.fieldgroup) input:not([type=submit]):not([type=checkbox]):not([type=file]):not([type=range]),
.ogp_csprojet_type section form.credit-score .form-section .form-item:not(.fieldgroup) textarea,
.ogp_csprojet_type section form.credit-score .form-section .form-item:not(.fieldgroup) select:not(.js-filter-list),
.ogp_csprojet_type section form.credit-score .form-section .form-item:not(.fieldgroup) #edit-cv, .ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup) input:not([type=submit]):not([type=checkbox]):not([type=file]):not([type=range]),
.ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup) textarea,
.ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup) select:not(.js-filter-list),
.ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup) #edit-cv, .path-frontpage section form.credit-score-home .form-section .form-item:not(.fieldgroup) input:not([type=submit]):not([type=checkbox]):not([type=file]):not([type=range]),
.path-frontpage section form.credit-score-home .form-section .form-item:not(.fieldgroup) textarea,
.path-frontpage section form.credit-score-home .form-section .form-item:not(.fieldgroup) select:not(.js-filter-list),
.path-frontpage section form.credit-score-home .form-section .form-item:not(.fieldgroup) #edit-cv {
  width: 30%;
  font-size: 1.14285714em;
  padding: 0.8rem 1.4285714286rem 0.8rem 2rem;
  /*text-align:center;*/
  position: relative;
  top: -0.6rem;
  left: 0;
}
.ogp_csprojet_type section form.credit-score .form-section .form-item:not(.fieldgroup) .description, .ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup) .description, .path-frontpage section form.credit-score-home .form-section .form-item:not(.fieldgroup) .description {
  position: absolute;
  top: 2.4rem;
  left: 0;
  width: 30%;
  color: rgb(132, 151, 176);
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1em;
  line-height: 1.5em;
}
.ogp_csprojet_type section form.credit-score .form-section .form-item.fieldgroup, .ogp_csfree section form.credit-score .form-section .form-item.fieldgroup, .path-frontpage section form.credit-score-home .form-section .form-item.fieldgroup {
  position: relative;
  display: flex;
  width: 80%;
  margin-bottom: 4rem;
  /*correspond au label pour un autre field*/
  /*container correspondant à l'input pour un autre field (ici groupe ..) */
}
.ogp_csprojet_type section form.credit-score .form-section .form-item.fieldgroup legend, .ogp_csfree section form.credit-score .form-section .form-item.fieldgroup legend, .path-frontpage section form.credit-score-home .form-section .form-item.fieldgroup legend {
  width: 40%;
  display: inline-block;
  position: relative;
  left: 0;
  top: 0;
  font-family: "Roboto-Bold", sans-serif;
  font-size: 1.42857143em;
  line-height: 1.2em;
  padding: 0;
  color: #00203f;
  opacity: 1;
  transition: 0.3s;
}
.ogp_csprojet_type section form.credit-score .form-section .form-item.fieldgroup .fieldset-wrapper, .ogp_csfree section form.credit-score .form-section .form-item.fieldgroup .fieldset-wrapper, .path-frontpage section form.credit-score-home .form-section .form-item.fieldgroup .fieldset-wrapper {
  width: 40%;
}
.ogp_csprojet_type section form.credit-score .form-section .form-item.fieldgroup .fieldset-wrapper .form-radios, .ogp_csfree section form.credit-score .form-section .form-item.fieldgroup .fieldset-wrapper .form-radios, .path-frontpage section form.credit-score-home .form-section .form-item.fieldgroup .fieldset-wrapper .form-radios {
  display: flex;
  position: relative;
  top: 0;
  left: -1.75rem;
  /* Input Radio - label customisé */
}
.ogp_csprojet_type section form.credit-score .form-section .form-item.fieldgroup .fieldset-wrapper .form-radios .form-item.form-type-radio, .ogp_csfree section form.credit-score .form-section .form-item.fieldgroup .fieldset-wrapper .form-radios .form-item.form-type-radio, .path-frontpage section form.credit-score-home .form-section .form-item.fieldgroup .fieldset-wrapper .form-radios .form-item.form-type-radio {
  margin-bottom: 0;
}
.ogp_csprojet_type section form.credit-score .form-section .form-item.fieldgroup .fieldset-wrapper .form-radios .form-item.form-type-radio:first-child label, .ogp_csfree section form.credit-score .form-section .form-item.fieldgroup .fieldset-wrapper .form-radios .form-item.form-type-radio:first-child label, .path-frontpage section form.credit-score-home .form-section .form-item.fieldgroup .fieldset-wrapper .form-radios .form-item.form-type-radio:first-child label {
  /*margin-left:0;*/
}
.ogp_csprojet_type section form.credit-score .form-section .form-item.fieldgroup .fieldset-wrapper .form-radios .form-item.form-type-radio:last-child label:after, .ogp_csfree section form.credit-score .form-section .form-item.fieldgroup .fieldset-wrapper .form-radios .form-item.form-type-radio:last-child label:after, .path-frontpage section form.credit-score-home .form-section .form-item.fieldgroup .fieldset-wrapper .form-radios .form-item.form-type-radio:last-child label:after {
  opacity: 0;
}
.ogp_csprojet_type section form.credit-score .form-section .form-item.fieldgroup .fieldset-wrapper .form-radios .form-item.form-type-radio input[type=radio], .ogp_csfree section form.credit-score .form-section .form-item.fieldgroup .fieldset-wrapper .form-radios .form-item.form-type-radio input[type=radio], .path-frontpage section form.credit-score-home .form-section .form-item.fieldgroup .fieldset-wrapper .form-radios .form-item.form-type-radio input[type=radio] {
  display: none;
}
.ogp_csprojet_type section form.credit-score .form-section .form-item.fieldgroup .fieldset-wrapper .form-radios .form-item.form-type-radio label, .ogp_csfree section form.credit-score .form-section .form-item.fieldgroup .fieldset-wrapper .form-radios .form-item.form-type-radio label, .path-frontpage section form.credit-score-home .form-section .form-item.fieldgroup .fieldset-wrapper .form-radios .form-item.form-type-radio label {
  position: relative;
  top: -0.6rem;
  left: 0;
  display: inline-block;
  background: #fff;
  color: #00203f;
  width: 4rem;
  height: 3.5rem;
  padding: 0.5rem 0.75rem;
  margin: 0 1rem;
  border-radius: 0.5rem;
  font-size: 1.14285714em;
  font-family: "Roboto-Medium", sans-serif;
  text-align: center;
  cursor: pointer;
  transition: 0.3s;
}
.ogp_csprojet_type section form.credit-score .form-section .form-item.fieldgroup .fieldset-wrapper .form-radios .form-item.form-type-radio label:after, .ogp_csfree section form.credit-score .form-section .form-item.fieldgroup .fieldset-wrapper .form-radios .form-item.form-type-radio label:after, .path-frontpage section form.credit-score-home .form-section .form-item.fieldgroup .fieldset-wrapper .form-radios .form-item.form-type-radio label:after {
  display: inline-block;
  content: "";
  width: 1px;
  height: 2.5rem;
  background: rgb(225.1633663366, 229.7722772277, 235.8366336634);
  position: absolute;
  top: 0.5rem;
  left: 5rem;
}
.ogp_csprojet_type section form.credit-score .form-section .form-item.fieldgroup .fieldset-wrapper .form-radios .form-item.form-type-radio label span, .ogp_csfree section form.credit-score .form-section .form-item.fieldgroup .fieldset-wrapper .form-radios .form-item.form-type-radio label span, .path-frontpage section form.credit-score-home .form-section .form-item.fieldgroup .fieldset-wrapper .form-radios .form-item.form-type-radio label span {
  font-size: 0.85714286em;
  font-family: "Roboto-Regular", sans-serif;
  color: #61bfad;
}
.ogp_csprojet_type section form.credit-score .form-section .form-item.fieldgroup .fieldset-wrapper .form-radios .form-item.form-type-radio input[type=radio]:checked + label, .ogp_csfree section form.credit-score .form-section .form-item.fieldgroup .fieldset-wrapper .form-radios .form-item.form-type-radio input[type=radio]:checked + label, .path-frontpage section form.credit-score-home .form-section .form-item.fieldgroup .fieldset-wrapper .form-radios .form-item.form-type-radio input[type=radio]:checked + label {
  background-color: #61bfad;
  color: #fff;
}
.ogp_csprojet_type section form.credit-score .form-section .form-item.fieldgroup .fieldset-wrapper .form-radios .form-item.form-type-radio input[type=radio]:checked + label span, .ogp_csfree section form.credit-score .form-section .form-item.fieldgroup .fieldset-wrapper .form-radios .form-item.form-type-radio input[type=radio]:checked + label span, .path-frontpage section form.credit-score-home .form-section .form-item.fieldgroup .fieldset-wrapper .form-radios .form-item.form-type-radio input[type=radio]:checked + label span {
  color: #fff;
}
.ogp_csprojet_type section form.credit-score .form-section .form-item.fieldgroup .description, .ogp_csfree section form.credit-score .form-section .form-item.fieldgroup .description, .path-frontpage section form.credit-score-home .form-section .form-item.fieldgroup .description {
  position: absolute;
  top: 2.4rem;
  left: 0;
  width: 30%;
  color: rgb(132, 151, 176);
  font-family: "Roboto-Regular", sans-serif;
  font-size: 1em;
  line-height: 1.5em;
}
.ogp_csprojet_type section form.credit-score .form-section .slider-wrapper, .ogp_csfree section form.credit-score .form-section .slider-wrapper, .path-frontpage section form.credit-score-home .form-section .slider-wrapper {
  position: relative;
  width: 40%;
}
.ogp_csprojet_type section form.credit-score .form-section .custom-slider, .ogp_csfree section form.credit-score .form-section .custom-slider, .path-frontpage section form.credit-score-home .form-section .custom-slider {
  width: 100% !important;
}
.ogp_csprojet_type section form.credit-score .form-section .slider-bubble, .ogp_csfree section form.credit-score .form-section .slider-bubble, .path-frontpage section form.credit-score-home .form-section .slider-bubble {
  position: absolute;
  top: 2rem;
  background: #61bfad;
  color: #fff;
  width: 4rem;
  height: 2.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 1.14285714em;
  font-family: "Roboto-Bold", sans-serif;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(0);
  transition: 0.1s;
}
.ogp_csprojet_type section form.credit-score .form-section .custom-slider, .ogp_csfree section form.credit-score .form-section .custom-slider, .path-frontpage section form.credit-score-home .form-section .custom-slider {
  -webkit-appearance: none; /* Nécessaire pour personnaliser le range sur certains navigateurs */
  appearance: none;
  height: 6px;
  padding: 0.25rem 0;
  border: none;
  background: #E7F4F2; /* Couleur de la barre (track) */
  border-radius: 4px;
}
.ogp_csprojet_type section form.credit-score .form-section .custom-slider::-webkit-slider-thumb, .ogp_csfree section form.credit-score .form-section .custom-slider::-webkit-slider-thumb, .path-frontpage section form.credit-score-home .form-section .custom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #61bfad; /* Couleur de la poignée */
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}
.ogp_csprojet_type section form.credit-score .form-section .custom-slider::-moz-range-thumb, .ogp_csfree section form.credit-score .form-section .custom-slider::-moz-range-thumb, .path-frontpage section form.credit-score-home .form-section .custom-slider::-moz-range-thumb {
  /*width: 20px;
  height: 20px;
  background: #3498db;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);*/
}
.ogp_csprojet_type section form.credit-score .form-section .custom-slider::-ms-thumb, .ogp_csfree section form.credit-score .form-section .custom-slider::-ms-thumb, .path-frontpage section form.credit-score-home .form-section .custom-slider::-ms-thumb {
  /*width: 20px;
  height: 20px;
  background: #3498db;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);*/
}
.ogp_csprojet_type section form.credit-score .result-box #result-emprunt.off, .ogp_csprojet_type section form.credit-score .result-box #result-acquisition.off, .ogp_csfree section form.credit-score .result-box #result-emprunt.off, .ogp_csfree section form.credit-score .result-box #result-acquisition.off, .path-frontpage section form.credit-score-home .result-box #result-emprunt.off, .path-frontpage section form.credit-score-home .result-box #result-acquisition.off {
  display: none;
}
.ogp_csprojet_type section form.credit-score .result-box #result-emprunt .band-bloc-results, .ogp_csprojet_type section form.credit-score .result-box #result-acquisition .band-bloc-results, .ogp_csfree section form.credit-score .result-box #result-emprunt .band-bloc-results, .ogp_csfree section form.credit-score .result-box #result-acquisition .band-bloc-results, .path-frontpage section form.credit-score-home .result-box #result-emprunt .band-bloc-results, .path-frontpage section form.credit-score-home .result-box #result-acquisition .band-bloc-results {
  margin-top: 3rem;
  position: relative;
  top: 0;
  left: -50%;
}
.ogp_csprojet_type section form.credit-score .result-box .cta, .ogp_csfree section form.credit-score .result-box .cta, .path-frontpage section form.credit-score-home .result-box .cta {
  text-align: center;
  margin-top: 2rem;
}
.ogp_csprojet_type section form.credit-score .result-box .cta .desc, .ogp_csfree section form.credit-score .result-box .cta .desc, .path-frontpage section form.credit-score-home .result-box .cta .desc {
  margin-bottom: 1rem;
}
.ogp_csprojet_type section form.credit-score .result-box .cta .btn-v a, .ogp_csfree section form.credit-score .result-box .cta .btn-v a, .path-frontpage section form.credit-score-home .result-box .cta .btn-v a {
  border-radius: 0.8571428571rem;
}
.ogp_csprojet_type section form.credit-score .result-box .cta .btn-w, .ogp_csfree section form.credit-score .result-box .cta .btn-w, .path-frontpage section form.credit-score-home .result-box .cta .btn-w {
  margin-bottom: 1.5rem;
}
.ogp_csprojet_type section form.credit-score .result-box #result-emprunt .stat, .ogp_csfree section form.credit-score .result-box #result-emprunt .stat, .path-frontpage section form.credit-score-home .result-box #result-emprunt .stat {
  text-align: center;
  margin-bottom: 3rem;
}
.ogp_csprojet_type section form.credit-score .result-box #result-emprunt .stat .capa-emp, .ogp_csfree section form.credit-score .result-box #result-emprunt .stat .capa-emp, .path-frontpage section form.credit-score-home .result-box #result-emprunt .stat .capa-emp {
  display: block;
  color: #61bfad;
  font-size: 2.85714286em;
  font-family: "Roboto-Bold", sans-serif;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
.ogp_csprojet_type section form.credit-score .result-box #result-emprunt .stat .nb, .ogp_csfree section form.credit-score .result-box #result-emprunt .stat .nb, .path-frontpage section form.credit-score-home .result-box #result-emprunt .stat .nb {
  color: #00203f;
  font-size: 1.28571429em;
}

.path-frontpage section form.credit-score-home {
  padding-bottom: 1.5rem;
  /*form commun*/
}
.path-frontpage section form.credit-score-home .form-section {
  /*margin-top: 1rem;*/
  /* Input Radio - structure générale */
  /* Input range */
}
.path-frontpage section form.credit-score-home .form-section .form-item:not(.fieldgroup) {
  width: 100%;
  margin-bottom: 1.25rem;
}
.path-frontpage section form.credit-score-home .form-section .form-item:not(.fieldgroup).form-type-number:after {
  right: 1rem; /*@todo mettre en largeur d'ecran*/
  color: #00203f;
  top: 1.375rem;
}
.path-frontpage section form.credit-score-home .form-section .form-item:not(.fieldgroup).form-type-number.parent-euro-mois:after {
  right: 1rem; /*@todo mettre en largeur d'ecran*/
}
.path-frontpage section form.credit-score-home .form-section .form-item:not(.fieldgroup) label {
  width: 55%;
  font-size: 1.14285714em;
  font-family: "Poppins-SemiBold", sans-serif;
}
.path-frontpage section form.credit-score-home .form-section .form-item:not(.fieldgroup) input:not([type=submit]):not([type=checkbox]):not([type=file]):not([type=range]),
.path-frontpage section form.credit-score-home .form-section .form-item:not(.fieldgroup) textarea,
.path-frontpage section form.credit-score-home .form-section .form-item:not(.fieldgroup) select:not(.js-filter-list),
.path-frontpage section form.credit-score-home .form-section .form-item:not(.fieldgroup) #edit-cv {
  width: 43%;
  margin-left: 2%;
  padding: 1.225rem 1.4285714286rem 1.225rem 2rem;
  top: 0;
  color: rgb(132, 151, 176);
  border-color: #DAE0E7;
}
.path-frontpage section form.credit-score-home .form-section .form-item:not(.fieldgroup) .description {
  top: 1.6rem;
  width: 50%;
  font-family: "Poppins-Regular", sans-serif;
  font-size: 0.85714286em;
  line-height: 132%;
}
.path-frontpage section form.credit-score-home .form-section .form-item.fieldgroup {
  width: 100%;
  margin-bottom: 4rem;
  /*correspond au label pour un autre field*/
  /*container correspondant à l'input pour un autre field (ici groupe ..) */
}
.path-frontpage section form.credit-score-home .form-section .form-item.fieldgroup legend {
  width: 40%;
}
.path-frontpage section form.credit-score-home .form-section .form-item.fieldgroup .fieldset-wrapper {
  width: 40%;
}
.path-frontpage section form.credit-score-home .form-section#form-emprunt .form-item-emprunt-form-taux {
  margin-bottom: 3.7rem;
}
.path-frontpage section form.credit-score-home .form-section .slider-wrapper {
  width: 43%;
  margin-left: 2%;
}
.path-frontpage section form.credit-score-home .form-section .custom-slider {
  width: 100% !important;
}
.path-frontpage section form.credit-score-home #form-emprunt #edit-emprunt-form-duree--wrapper, .path-frontpage section form.credit-score-home #form-emprunt .form-item-emprunt-form-apport {
  display: none;
}
.path-frontpage section form.credit-score-home #form-acquisition .form-item-acquisition-form-apport-a, .path-frontpage section form.credit-score-home #form-acquisition #edit-acquisition-form-duree-a--wrapper, .path-frontpage section form.credit-score-home #form-acquisition .form-item-acquisition-form-taux-a {
  display: none;
}

/* == Crédit score gratuit */
/*afficher sur la section vitrine (ne dispose pas du CSS lié à main.outil)*/
/*@todo voir si meilleure manière d'ajouter le CSS */
.ogp_csfree {
  /*@todo à généraliser pour vitrine*/
}
.ogp_csfree main.vitrine {
  padding-bottom: 5rem;
}
.ogp_csfree main.vitrine .title-s {
  padding-bottom: 1rem;
}
.ogp_csfree main.vitrine .band-first {
  padding-bottom: 1.5rem !important;
  margin-bottom: 4rem;
}
.ogp_csfree main.vitrine .band-first .title-l {
  padding-bottom: 1.5rem;
  font-family: "Poppins-SemiBold", sans-serif;
  font-size: 2.5em;
  line-height: 1.1428571429em;
}

.ogp_dossierhome .band-table form, .ogp_dossierhome .band-table .btn-v {
  display: none !important;
}

/*@todo Certain item à changer directement dans app.css (et à produire /dist plus tard) pour eviter les !importants qui poseront pb en responsive*/
/*=== SIMULATEURS PAGE ===================================*/
#simulateurs {
  max-width: 1155px; /*@todo temporaire en attendant les contenu long*/
}
#simulateurs .band-att-choix {
  width: 100%;
}
#simulateurs .band-att-choix .link-results .contain {
  flex-wrap: wrap;
}
#simulateurs .band-att-choix .link-results .contain .cell {
  width: 31%;
  margin-bottom: 2rem;
}

/*=== SIMULATEUR FOCUS ===================================*/
/* == Simulateur Général (commun) */
#simulateur-focus {
  /*simulateur*/
  /*texte sous les simulateurs*/
}
#simulateur-focus .cte {
  /* cadre outil (/texte en dessous) */
  margin-bottom: 5rem;
  /* h1 */
  /*image des boutons (correctif)*/
}
#simulateur-focus .cte h1 {
  font-size: 2.4285714286rem;
  font-weight: bold;
  color: #00203f !important;
}
#simulateur-focus .cte h1 + div:not(#loan-calc, #saving-capital) {
  margin-top: 2.5rem !important;
}
#simulateur-focus .cte button img {
  vertical-align: bottom;
}
#simulateur-focus .title-m {
  padding-bottom: 1rem;
  padding-top: 2rem;
}
#simulateur-focus .txt-16 {
  line-height: 1.6em;
}
#simulateur-focus .txt-16 a {
  color: #61bfad;
  font-weight: bold;
  transition: 0.3s;
}
#simulateur-focus .txt-16 a:hover {
  color: #00203f;
}

/* les inners de l'app vue js */
.cte #borrow-capacity {
  /*width: 612px;
  margin: 30px auto;*/
  /*@todo voir si c'est ok en responsive*/
}

/* == Simulateurs spécifiques */
#not-calc .button, #proj-val .button, #loan-borrow .button, #capital-effort .button, #borrow-cap .button, #rental-yield .button, #loan-comparator .button {
  color: #738f8a !important;
  background: rgb(169.5945945946, 220.4054054054, 210.6756756757) !important;
}
#not-calc button img, #proj-val button img, #loan-borrow button img, #capital-effort button img, #borrow-cap button img, #rental-yield button img, #loan-comparator button img {
  filter: sepia(16%) saturate(350%) hue-rotate(110deg) brightness(80%) contrast(90%); /*ICI*/
}
#not-calc .selected, #proj-val .selected, #loan-borrow .selected, #capital-effort .selected, #borrow-cap .selected, #rental-yield .selected, #loan-comparator .selected {
  color: #fff !important;
  background: #61bfad !important;
}
#not-calc .yellow, #proj-val .yellow, #loan-borrow .yellow, #capital-effort .yellow, #borrow-cap .yellow, #rental-yield .yellow, #loan-comparator .yellow {
  color: #61bfad !important;
}
#not-calc .vue-slider-dot-handle, #proj-val .vue-slider-dot-handle, #loan-borrow .vue-slider-dot-handle, #capital-effort .vue-slider-dot-handle, #borrow-cap .vue-slider-dot-handle, #rental-yield .vue-slider-dot-handle, #loan-comparator .vue-slider-dot-handle {
  background-color: #61bfad !important;
}
#not-calc .vue-slider-rail, #proj-val .vue-slider-rail, #loan-borrow .vue-slider-rail, #capital-effort .vue-slider-rail, #borrow-cap .vue-slider-rail, #rental-yield .vue-slider-rail, #loan-comparator .vue-slider-rail {
  background: rgb(169.5945945946, 220.4054054054, 210.6756756757) !important;
}
#not-calc .line-one, #not-calc .line-two, #not-calc .line, #proj-val .line-one, #proj-val .line-two, #proj-val .line, #loan-borrow .line-one, #loan-borrow .line-two, #loan-borrow .line, #capital-effort .line-one, #capital-effort .line-two, #capital-effort .line, #borrow-cap .line-one, #borrow-cap .line-two, #borrow-cap .line, #rental-yield .line-one, #rental-yield .line-two, #rental-yield .line, #loan-comparator .line-one, #loan-comparator .line-two, #loan-comparator .line {
  border-color: #61bfad !important;
}
#not-calc .slider, #proj-val .slider, #loan-borrow .slider, #capital-effort .slider, #borrow-cap .slider, #rental-yield .slider, #loan-comparator .slider {
  background: rgb(169.5945945946, 220.4054054054, 210.6756756757) !important;
}
#not-calc .slider:before, #proj-val .slider:before, #loan-borrow .slider:before, #capital-effort .slider:before, #borrow-cap .slider:before, #rental-yield .slider:before, #loan-comparator .slider:before {
  background-color: #61bfad !important;
}
#not-calc .switch-left, #not-calc .switch-right, #proj-val .switch-left, #proj-val .switch-right, #loan-borrow .switch-left, #loan-borrow .switch-right, #capital-effort .switch-left, #capital-effort .switch-right, #borrow-cap .switch-left, #borrow-cap .switch-right, #rental-yield .switch-left, #rental-yield .switch-right, #loan-comparator .switch-left, #loan-comparator .switch-right {
  color: #738f8a !important;
}
#not-calc .add-btn, #proj-val .add-btn, #loan-borrow .add-btn, #capital-effort .add-btn, #borrow-cap .add-btn, #rental-yield .add-btn, #loan-comparator .add-btn {
  background-color: #61bfad !important;
}

/* == Simulateur Rendement Locatif */
#borrow-cap #borrow-cap-precision #rental-yield .yield-result {
  background-color: #61bfad !important; /*ICI*/
}
#borrow-cap #borrow-cap-precision #rental-yield .monthly-payment-insurance-incl-result {
  background-color: #61bfad !important;
}
#borrow-cap #borrow-cap-precision #rental-yield .tooltip {
  color: #fff !important;
}

/* == Simulateur Comparateur de crédit */
#loan-comp-main #loan-comp-precision #loan-comparator .separator-one, #loan-comp-main #loan-comp-precision #loan-comparator .separator-two, #loan-comp-main #loan-comp-precision #loan-comparator .long-separator {
  border-color: #61bfad !important;
}
#loan-comp-main #loan-comp-precision #loan-comparator .yellow-results, #loan-comp-main #loan-comp-precision #loan-comparator .crossing {
  background-color: #61bfad !important;
}

/* == Simulateur Frais de notaire */
#not-calc #not-calc-precision #notary-fees-calc .details p {
  font-size: 16px;
}

#not-calc #not-calc-precision #notary-fees-calc .precisions .precisions-p {
  line-height: 1.9em;
}

#not-calc #not-calc-precision #notary-fees-calc .total-res {
  background-color: #61bfad !important; /*ICI*/
}

#not-calc #not-calc-precision #notary-fees-calc .details img {
  filter: sepia(16%) saturate(350%) hue-rotate(110deg) brightness(80%) contrast(90%); /*ICI*/
}

#not-calc #not-calc-precision #notary-fees-calc .price-detail {
  color: #61bfad !important; /*ICI*/
}

/* == Simulateur Capacité d'emprunt */
#borrow-cap #borrow-cap-precision #borrow-capacity #results .notary-line p {
  line-height: 1.9em;
}

#borrow-cap #borrow-cap-precision #borrow-capacity {
  /*@todo à vérifier 1*/
  /*.slider {
    background: lighten($green,20%) !important;
    &:before{
      background-color:$green !important;
    }
  }*/
  /*.switch-left, .switch-right{
    color:$green-dd !important;
  }*/
}
#borrow-cap #borrow-cap-precision #borrow-capacity .add-btn {
  /*@todo à vérifier 2*/
  /*background-color:$green !important;*/
}
#borrow-cap #borrow-cap-precision #borrow-capacity .add-btn img:nth-child(2) {
  filter: sepia(16%) saturate(350%) hue-rotate(110deg) brightness(80%) contrast(90%);
}
#borrow-cap #borrow-cap-precision #borrow-capacity #summary {
  background-color: #61bfad !important;
}
#borrow-cap #borrow-cap-precision #borrow-capacity .custom-select .items {
  border-color: #61bfad !important;
}
#borrow-cap #borrow-cap-precision #borrow-capacity .custom-select .items div:hover {
  background-color: #61bfad !important;
}
#borrow-cap #borrow-cap-precision #borrow-capacity .custom-select .selected.open {
  border-color: #61bfad !important;
}

/* == Simulateur Crédit Emprunt */
#loan-borrow #precision #loan-calc-app .loan-title, #loan-borrow #precision #loan-calc-app > h1:first-child {
  margin-left: 160px !important;
}

#loan-borrow #precision #loan-calc-app .details p {
  font-size: 16px;
}

#loan-borrow #precision #loan-calc-app .borrow-container, #loan-borrow #precision #loan-calc-app .loan-container {
  border-color: #61bfad !important;
}

#loan-borrow #precision #loan-calc-app .borrow-title, #loan-borrow #precision #loan-calc-app .loan-title {
  background-color: #61bfad !important;
}

#loan-borrow #precision #loan-calc-app .result {
  background-color: #61bfad !important;
}

/* == Simulateur Epargne */
#capital-effort #precision #saving-calc-main .effort-title {
  margin-left: -272px !important;
}

#capital-effort #precision #saving-calc-main .saving-capital-container, #capital-effort #precision #saving-calc-main .saving-effort-container {
  border-color: #61bfad !important;
}

#capital-effort #precision #saving-calc-main .capital-title, #capital-effort #precision #saving-calc-main .effort-title {
  background-color: #61bfad !important;
}

/* == Simulateur Montant à financer */
#proj-val .notary-line p {
  font-size: 16px;
  line-height: 30.4px;
}
#proj-val .addsimulation p {
  font-size: 16px;
}
#proj-val #proj-val-precision #project-value #project-value-inputs .second-block {
  background: #61bfad !important;
}
#proj-val img {
  filter: sepia(16%) saturate(350%) hue-rotate(110deg) brightness(80%) contrast(90%);
}

/* RESPONSIVE STYLES */
/*Information*/
/* les types d'inner (inner-s, inner-m ect.) sont différent en Large mais sont bloqués à une valeur seuil pour M et S */
/* le suffixe -c prend en compte la correction de 26 px pour que l'inner acceuille du contenu de taille égale */
/* S only === 0 à 640 px ================================================================= */
@media only screen and (max-width: 40em) {
  /* == home - section opopp */
  .page-node-type-homepage .overlay {
    background-position: center top;
    background-size: cover;
  }
  .page-node-type-homepage .band-creditscore .inner-s .contain {
    flex-wrap: wrap;
  }
  .page-node-type-homepage .band-creditscore .inner-s .contain .left, .page-node-type-homepage .band-creditscore .inner-s .contain .form {
    width: 100%;
  }
  .page-node-type-homepage .band-creditscore .inner-s .contain .form {
    position: relative;
    z-index: 50;
    width: 100%;
    margin: auto;
    margin-top: 10rem;
    box-shadow: 8px 8px 24px 0px rgba(0, 0, 0, 0.1215686275);
  }
  .page-node-type-homepage .band-creditscore .inner-s .contain .form:before {
    top: -6rem;
    left: 35%;
    z-index: -1;
  }
  /* == home - section opopp */
  .page-node-type-homepage .band-opopp .inner-s .list-outil {
    padding-left: 0;
    flex-wrap: wrap;
  }
  .page-node-type-homepage .band-opopp .inner-s .list-outil .box {
    width: 100%;
  }
  .page-node-type-homepage .band-opopp .inner-s .list-outil figure {
    width: 15rem;
    left: -5rem;
    top: -10rem;
  }
  /* == home - section why */
  .page-node-type-homepage .band-why .inner-s .bottom {
    flex-wrap: wrap;
  }
  .page-node-type-homepage .band-why .inner-s .bottom .why, .page-node-type-homepage .band-why .inner-s .bottom .avantages {
    width: 100% !important;
  }
  .page-node-type-homepage .band-why .inner-s .bottom .title-l, .page-node-type-homepage .band-why .inner-s .bottom .txt-18 {
    max-width: none !important;
  }
  .page-node-type-homepage .band-why .inner-s .bottom .txt-18 {
    margin-bottom: 2rem;
  }
  /* == home - section how */
  .page-node-type-homepage .band-how .inner-s .list-step {
    flex-wrap: wrap;
  }
  .page-node-type-homepage .band-how .inner-s .list-step .box {
    width: 100%;
  }
  .page-node-type-homepage .band-how .inner-s .title-l, .page-node-type-homepage .band-how .inner-s > .txt-18 {
    max-width: 80%;
  }
  /* == home - section forfait */
  #nos-forfaits .band-forfaits .list-forfait {
    flex-wrap: wrap;
    gap: 2%;
  }
  #nos-forfaits .band-forfaits .list-forfait article.contextual-region {
    width: 100%;
    margin-bottom: 1.5rem;
  }
  #nos-forfaits .band-forfaits ul.forfait-variation, .cart ul.forfait-variation {
    padding-left: 35%;
  }
  #nos-forfaits .description span {
    max-width: 80%;
  }
  /* == home - section cta */
  .page-node-type-homepage .band-cta .inner-s .bg-cta .contain {
    padding-left: 30%;
  }
  .page-node-type-homepage .band-cta .inner-s .bg-cta .contain figure {
    width: 15rem;
    left: 35%;
    top: -12rem;
    z-index: -1;
  }
  .page-node-type-homepage .band-cta .inner-s .bg-cta .contain figure img {
    max-width: 100%;
  }
  .page-node-type-homepage .band-cta .inner-s .bg-cta .contain {
    padding: 1rem 2rem;
    padding-left: 0;
    text-align: center;
  }
  /*header, footer*/
  header .header-large {
    display: none;
  }
  header .header-small {
    display: block;
  }
  .toolbar-oriented .toolbar-bar {
    position: fixed;
  }
  .footer-main, footer .inner-s .footer-content .footer-main {
    justify-content: flex-start;
  }
  footer .inner .footer-content .footer-main, footer .inner-s .footer-content .footer-main {
    flex-wrap: wrap;
  }
  footer .inner .footer-content .footer-main .footer-item, footer .inner-s .footer-content .footer-main .footer-item {
    width: 100% !important;
    margin-bottom: 3rem;
    border-right: none !important;
    padding: 0;
    justify-content: flex-start;
  }
  footer .inner .footer-sub, footer .inner-s .footer-sub {
    flex-wrap: wrap;
  }
  /* == outil général*/
  #wrapper .general main .inner-tool aside.appli {
    /*width:r(100);*/ /*retrait du menu en JQ maintenant*/
    flex-shrink: 0;
  }
  #wrapper .general main .inner-tool aside.appli .inner-spe {
    padding-right: 0;
  }
  #wrapper .general main .inner-tool aside.appli .inner-spe .menu.menu-lateral nav ul.menu__links li.item--0 {
    /*width:50%;*/
  }
  #wrapper .general main .inner-tool aside.appli .inner-spe .menu.menu-lateral nav ul.menu__links li.item--0 a {
    font-size: 1.15em;
  }
  #wrapper .general main .inner-tool aside.appli .inner-spe .menu.menu-lateral nav ul.menu__links li.item--0 a span {
    /*display:none;*/ /*retrait du menu en JQ maintenant*/
  }
  #wrapper .general main .inner-tool aside.appli .inner-spe .menu.menu-lateral nav ul.menu__links li.toggle {
    display: none;
  }
  #wrapper .general main .inner-tool section.appli {
    flex: 1;
    min-width: 0;
  }
  #wrapper .general main .inner-tool section.appli .inner-spe {
    padding-left: 4rem;
    /*padding-right: 0rem;*/ /*old*/
  }
  #wrapper .general main .inner-tool section.appli .inner-spe .band-outils {
    max-width: 100%;
  }
  .section-formations .list-formation {
    flex-wrap: wrap;
  }
  .section-formations .list-formation .formation-box {
    width: 100%;
    margin-bottom: 2rem;
  }
  .section-formations .list-formation .formation-box .contain .txt {
    padding: 2rem 1rem;
  }
  .section-formations .list-formation .formation-box .contain .txt h3 {
    font-size: 1.5em;
  }
  .section-formations .list-formation .formation-box .contain .txt p {
    font-size: 1.1em;
  }
  .band-outils .list {
    flex-wrap: wrap;
    gap: 4%;
  }
  .band-outils .list .outil {
    width: 48%;
    flex: initial;
    margin-bottom: 4rem;
  }
  .band-outils .list .outil .top {
    font-size: 1.18em;
  }
  .att_home_outil .band-welcome {
    max-width: 100%;
  }
  /* == ♦ outil attestation */
  main.outil .page-att .band-first {
    flex-wrap: wrap;
  }
  main.outil .page-att ul.att-nav {
    width: 100%;
    position: relative;
    top: 1.5rem;
    margin-left: 0rem;
  }
  main.outil .page-att ul.att-nav li {
    margin-right: 1.5rem;
  }
  main.outil .page-att ul.att-nav li:after {
    width: 0.35rem;
    left: 1.75rem;
  }
  main.outil .page-att .form-att {
    flex-wrap: wrap;
  }
  main.outil .page-att .form-att .form-box {
    width: 100%;
  }
  main.outil .page-att .form-att .result-box {
    width: 100%;
  }
  main.outil .page-att .form-att .result-box .band-bloc-results {
    width: 100%;
    margin: auto;
    margin-top: 7rem;
  }
  main.outil .page-att .form-att .result-box .band-bloc-results .overlay .inner-sec {
    padding: 2rem 1.5rem !important;
  }
  main.outil .page-att .form-att .result-box .band-bloc-results .overlay .inner-sec .result ul.result-name li.negativ.active {
    font-size: 1.2em;
  }
  main.outil .page-att .form-att .result-box .band-bloc-results .overlay .inner-sec ul.stat li:nth-child(1) .nb {
    font-size: 0.85714286em;
  }
  section form .form-item, section form .line .form-item, section form .line-spe div:nth-child(1), section form .line-spe div:nth-child(2), section form .line div:not(.form-item, .messages, div[data-drupal-messages]) {
    width: 45%;
  }
  section form .form-item.form-item-line-0-projet-adr-rue, section form .form-item.form-item-line-1-projet-adr-compl, section form .form-item.form-item-line2-1-projet-comment, section form .form-item.form-item-line2-0-adr-rue, section form .form-item.form-item-line2-1-adr-compl {
    width: 92%;
  }
  /* == ♦♦ outil attestation */
  .att-resultats .inner-sec, .band-details .section-projet .inner-sec, .band-details .section-emprunt .inner-sec, .band-treps .inner-sec {
    padding: 2rem 3rem;
  }
  .att-resultats .band-treps .inner-sec {
    padding-top: 2rem !important;
  }
  .att-resultats .band-avis {
    margin-bottom: 2rem;
  }
  .att-resultats .band-avis .inner-sec .contain {
    flex-wrap: wrap;
  }
  .att-resultats .band-avis .inner-sec .contain .designation {
    width: 100%;
    padding-right: 1.5rem;
    border-right: none;
    margin-bottom: 3rem;
  }
  .att-resultats .band-avis .inner-sec .contain .designation .para-c {
    padding-left: 1.5rem;
  }
  .att-resultats .band-avis .inner-sec .contain .designation .para-c .title-s {
    font-size: 1.5em;
  }
  .att-resultats .band-avis .inner-sec .contain .designation .para-c .btn-v a {
    font-size: 1em;
  }
  .att-resultats .band-avis .inner-sec .contain .avis {
    width: 100%;
    padding-left: 1.5rem;
  }
  .att-resultats .band-avis .inner-sec .contain .avis .img {
    margin-left: 0;
  }
  .att-resultats .band-avis .inner-sec .contain .avis .para-c {
    padding-left: 1.5rem;
  }
  .att-resultats .band-avis .inner-sec .contain .avis .para-c .title-s {
    font-size: 1.5em;
  }
  .att-resultats .band-details {
    margin-bottom: 2rem;
  }
  .att-resultats .band-details .contain {
    flex-wrap: wrap;
    height: auto;
  }
  .att-resultats .band-details .contain .section-projet, .att-resultats .band-details .contain .section-emprunt {
    width: 100%;
    margin-bottom: 2rem;
  }
  .att-resultats .band-details .contain .section-emprunt {
    height: 20rem;
  }
  .att-resultats .band-details .contain .section-emprunt .inner-sec .ss-form .list-taux {
    bottom: 5rem;
  }
  .att-resultats .band-details .contain .section-emprunt .inner-sec .ss-form .list-taux li {
    padding-right: 2rem;
    flex-wrap: wrap;
  }
  .att-resultats .band-details .contain .section-projet {
    margin-right: 0;
  }
  .att-resultats .band-treps .inner-sec {
    padding-bottom: 2rem;
  }
  .att-resultats .band-treps .inner-sec .contain {
    flex-wrap: wrap;
  }
  .att-resultats .band-treps .inner-sec .contain .explain {
    width: 100%;
    margin-bottom: 3rem;
    padding: 0 1rem;
  }
  .att-resultats .band-treps .inner-sec .contain .indice {
    width: 100%;
    margin-bottom: 3rem;
    text-align: left;
    padding: 0 1rem;
  }
  .att-resultats .band-treps .inner-sec .contain .indice .flag {
    top: 0;
    right: 0;
    text-align: right;
  }
  /* Crédit score */
  /*@todo laisser la structure CSS Crédit score (pr la modifier si besoin) ou supprimer les lignes commentées*/
  .ogp_csprojet_type section form.credit-score, .ogp_csfree section form.credit-score {
    /* = frame général : form-box / result-box (70% 30%) */
  }
  .ogp_csprojet_type section form.credit-score .form-cs, .ogp_csfree section form.credit-score .form-cs {
    flex-wrap: wrap;
  }
  .ogp_csprojet_type section form.credit-score .form-cs .form-box, .ogp_csfree section form.credit-score .form-cs .form-box {
    width: 100%; /*ori 70%*/
  }
  .ogp_csprojet_type section form.credit-score .form-cs .result-box, .ogp_csfree section form.credit-score .form-cs .result-box {
    margin-top: 5rem;
    width: 100%; /*ori 30%*/
  }
  .ogp_csprojet_type section form.credit-score .form-cs .result-box #result-emprunt .band-bloc-results, .ogp_csprojet_type section form.credit-score .form-cs .result-box #result-acquisition .band-bloc-results, .ogp_csfree section form.credit-score .form-cs .result-box #result-emprunt .band-bloc-results, .ogp_csfree section form.credit-score .form-cs .result-box #result-acquisition .band-bloc-results {
    left: 0; /*ori 50%*/
  }
  .ogp_csprojet_type section form.credit-score .form-section, .ogp_csfree section form.credit-score .form-section {
    /* = frame enf 2 : form-item (80%) */
    /* = frame enf 3 : label / input (40% / 30% ou 40%) */
    /*left*/
    /*right*/
  }
  .ogp_csprojet_type section form.credit-score .form-section .form-item:not(.fieldgroup), .ogp_csprojet_type section form.credit-score .form-section .form-item.fieldgroup, .ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup), .ogp_csfree section form.credit-score .form-section .form-item.fieldgroup {
    width: 100%; /*ori 80%*/
  }
  .ogp_csprojet_type section form.credit-score .form-section .form-item:not(.fieldgroup) label, .ogp_csprojet_type section form.credit-score .form-section .form-item.fieldgroup legend, .ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup) label, .ogp_csfree section form.credit-score .form-section .form-item.fieldgroup legend {
    width: 45%; /*ori 40%*/
  }
  .ogp_csprojet_type section form.credit-score .form-section .form-item:not(.fieldgroup) .description, .ogp_csprojet_type section form.credit-score .form-section .form-item.fieldgroup .description, .ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup) .description, .ogp_csfree section form.credit-score .form-section .form-item.fieldgroup .description {
    width: 35%; /*ori 30%*/
  }
  .ogp_csprojet_type section form.credit-score .form-section .form-item:not(.fieldgroup) input:not([type=submit]):not([type=checkbox]):not([type=file]):not([type=range]), .ogp_csprojet_type section form.credit-score .form-section .form-item:not(.fieldgroup) textarea, .ogp_csprojet_type section form.credit-score .form-section .form-item:not(.fieldgroup) select:not(.js-filter-list), .ogp_csprojet_type section form.credit-score .form-section .form-item:not(.fieldgroup) #edit-cv, .ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup) input:not([type=submit]):not([type=checkbox]):not([type=file]):not([type=range]), .ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup) textarea, .ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup) select:not(.js-filter-list), .ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup) #edit-cv {
    width: 40%; /* 1. input ori 30%*/
  }
  .ogp_csprojet_type section form.credit-score .form-section .form-item.fieldgroup .fieldset-wrapper, .ogp_csfree section form.credit-score .form-section .form-item.fieldgroup .fieldset-wrapper { /*width:40%;*/ /* 2. input radio ori 40%*/
  }
  .ogp_csprojet_type section form.credit-score .form-section .slider-wrapper, .ogp_csfree section form.credit-score .form-section .slider-wrapper { /*width: 40%;*/ /* 3. input range ori 40% */
  }
  /* Cas spé */
  .ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup).form-type-number:after {
    right: 14vw;
  }
  .page-node-type-homepage .band-creditscore .inner-s .contain .form .bottom .left {
    width: auto;
  }
  #simulateurs .band-att-choix .link-results .contain {
    flex-wrap: wrap;
  }
  #simulateurs .band-att-choix .link-results .contain .cell {
    width: 90%;
  }
  /* == tableaux admin */
  #admin .band-table .table {
    display: none;
  }
  #admin .form:after {
    content: "Merci de tourner la tablette pour un affichage optimal des tableaux.";
    margin-bottom: 2rem;
    display: inline-block;
  }
  /* sz */
}
/* 400 px et - */
/* 450 px et - */
/* 500px et - */
@media screen and (max-width: 500px) {
  .inner,
  .inner-s,
  .inner-xs,
  .inner-xxs {
    padding-left: 2.714rem !important;
    padding-right: 2.714rem !important;
    max-width: 100%;
  }
  .inner-c,
  .inner-sc,
  .inner-xsc,
  .inner-xxsc {
    padding-left: 1.46rem !important;
    padding-right: 1.46rem !important;
    max-width: 100%;
  }
}
/* 700px et - */
/* P   750px et - */
@media screen and (max-width: 750px) {
  /* === INNER ======================================= */
  .inner,
  .inner-s,
  .inner-xs,
  .inner-xxs {
    padding-left: 4rem;
    padding-right: 4rem;
    max-width: 100%;
  }
  .inner-c,
  .inner-sc,
  .inner-xsc,
  .inner-xxsc {
    padding-left: 3.08rem;
    padding-right: 3.08rem;
    max-width: 100%;
  }
}
/* M only === 640 px à 1024 px ================================================================= */
@media only screen and (min-width: 40.0625em) and (max-width: 64em) {
  /*inner*/
  .inner,
  .inner-xl,
  .inner-s,
  .inner-xs,
  .inner-xxs {
    padding-left: 4rem;
    padding-right: 4rem;
    max-width: 100%;
  }
  .inner-c,
  .inner-xlc,
  .inner-sc,
  .inner-xsc,
  .inner-xxsc {
    padding-left: 3.08rem;
    padding-right: 3.08rem;
    max-width: 100%;
  }
  /* == header - menu */
  header .header-large .contain .menu.menu-main {
    padding-left: 5rem;
  }
  header .header-large .contain .menu.menu-main nav ul.menu__links li.item--0 a {
    padding-right: 2rem;
  }
  /* == home - section opopp */
  .page-node-type-homepage .overlay {
    background-position: center top;
    background-size: 135%;
  }
  .page-node-type-homepage .band-creditscore .inner-s .contain {
    flex-wrap: wrap;
  }
  .page-node-type-homepage .band-creditscore .inner-s .contain .left, .page-node-type-homepage .band-creditscore .inner-s .contain .form {
    width: 100%;
  }
  .page-node-type-homepage .band-creditscore .inner-s .contain .form {
    width: 60%;
    margin: auto;
    margin-top: 5.3571428571rem;
    box-shadow: 8px 8px 24px 0px rgba(0, 0, 0, 0.1215686275);
  }
  .page-node-type-homepage .band-creditscore .inner-s .contain .form:before {
    bottom: 10rem;
  }
  /* == home - section opopp */
  .page-node-type-homepage .band-opopp .inner-s .list-outil {
    padding-left: 2rem;
  }
  .page-node-type-homepage .band-opopp .inner-s .list-outil figure {
    width: 15rem;
    left: -5rem;
    top: 10rem;
  }
  /* == home - section forfait */
  #nos-forfaits .band-forfaits .list-forfait {
    flex-wrap: wrap;
    gap: 2%;
  }
  #nos-forfaits .band-forfaits .list-forfait article.contextual-region {
    width: 31%;
    margin-bottom: 1.5rem;
  }
  /* == home - section cta */
  .page-node-type-homepage .band-cta .inner-s .bg-cta .contain {
    padding-left: 30%;
  }
  .page-node-type-homepage .band-cta .inner-s .bg-cta .contain figure {
    width: 15rem;
    left: 2rem;
    top: 0;
  }
  .page-node-type-homepage .band-cta .inner-s .bg-cta .contain figure img {
    max-width: 100%;
  }
  /* == outil général*/
  #wrapper .general main .inner-tool aside.appli {
    /*width:r(100);*/ /*retrait du menu en JQ maintenant*/
    flex-shrink: 0;
  }
  #wrapper .general main .inner-tool aside.appli .inner-spe {
    padding-right: 0;
  }
  #wrapper .general main .inner-tool aside.appli .inner-spe .menu.menu-lateral nav ul.menu__links li.item--0 {
    /*width:50%;*/
  }
  #wrapper .general main .inner-tool aside.appli .inner-spe .menu.menu-lateral nav ul.menu__links li.item--0 a {
    font-size: 1.15em;
  }
  #wrapper .general main .inner-tool aside.appli .inner-spe .menu.menu-lateral nav ul.menu__links li.item--0 a span {
    /*display:none;*/ /*retrait du menu en JQ maintenant*/
  }
  #wrapper .general main .inner-tool aside.appli .inner-spe .menu.menu-lateral nav ul.menu__links li.toggle {
    display: none;
  }
  #wrapper .general main .inner-tool section.appli {
    flex: 1;
    min-width: 0;
  }
  #wrapper .general main .inner-tool section.appli .inner-spe {
    padding-left: 4rem;
    /*padding-right: 0rem;*/ /*old*/
  }
  #wrapper .general main .inner-tool section.appli .inner-spe .band-outils {
    max-width: 100%;
  }
  .section-formations .list-formation .formation-box .contain .txt {
    padding: 1rem 1rem;
  }
  .section-formations .list-formation .formation-box .contain .txt h3 {
    font-size: 1.5em;
  }
  .section-formations .list-formation .formation-box .contain .txt p {
    font-size: 1.1em;
  }
  .band-outils .list {
    gap: 2rem;
  }
  .band-outils .list .outil .top {
    font-size: 1.18em;
  }
  .att_home_outil .band-welcome {
    max-width: 100%;
  }
  /* == ♦ outil attestation */
  main.outil .page-att .band-first {
    flex-wrap: wrap;
  }
  main.outil .page-att ul.att-nav {
    width: 100%;
    position: relative;
    top: 1.5rem;
    margin-left: 0rem;
  }
  main.outil .page-att ul.att-nav li {
    margin-right: 2.5rem;
  }
  main.outil .page-att ul.att-nav li:after {
    width: 1rem;
    left: 2.2rem;
  }
  main.outil .page-att .form-att {
    flex-wrap: wrap;
  }
  main.outil .page-att .form-att .form-box {
    width: 100%;
  }
  main.outil .page-att .form-att .result-box {
    width: 100%;
  }
  main.outil .page-att .form-att .result-box .band-bloc-results {
    width: 50%;
    margin: auto;
    margin-top: 7rem;
  }
  main.outil .page-att .form-att .result-box .band-bloc-results .overlay .inner-sec {
    padding: 2rem 1.5rem !important;
  }
  main.outil .page-att .form-att .result-box .band-bloc-results .overlay .inner-sec .result ul.result-name li.negativ.active {
    font-size: 1.2em;
  }
  main.outil .page-att .form-att .result-box .band-bloc-results .overlay .inner-sec ul.stat li:nth-child(1) .nb {
    font-size: 0.85714286em;
  }
  section form .form-item, section form .line .form-item, section form .line-spe div:nth-child(1), section form .line-spe div:nth-child(2), section form .line div:not(.form-item, .messages, div[data-drupal-messages]) {
    width: 45%;
  }
  section form .form-item.form-item-line-0-projet-adr-rue, section form .form-item.form-item-line-1-projet-adr-compl, section form .form-item.form-item-line2-1-projet-comment, section form .form-item.form-item-line2-0-adr-rue, section form .form-item.form-item-line2-1-adr-compl {
    width: 92%;
  }
  /* == ♦♦ outil attestation */
  .att-resultats .inner-sec, .band-details .section-projet .inner-sec, .band-details .section-emprunt .inner-sec, .band-treps .inner-sec {
    padding: 2rem 3rem;
  }
  .att-resultats .band-treps .inner-sec {
    padding-top: 2rem !important;
  }
  .att-resultats .band-avis .inner-sec .contain .designation {
    padding-right: 1.5rem;
  }
  .att-resultats .band-avis .inner-sec .contain .designation .para-c {
    padding-left: 1.5rem;
  }
  .att-resultats .band-avis .inner-sec .contain .designation .para-c .title-s {
    font-size: 1.5em;
  }
  .att-resultats .band-avis .inner-sec .contain .designation .para-c .btn-v a {
    font-size: 1em;
  }
  .att-resultats .band-avis .inner-sec .contain .avis {
    padding-left: 1.5rem;
  }
  .att-resultats .band-avis .inner-sec .contain .avis .img {
    margin-left: 0;
  }
  .att-resultats .band-avis .inner-sec .contain .avis .para-c {
    padding-left: 1.5rem;
  }
  .att-resultats .band-avis .inner-sec .contain .avis .para-c .title-s {
    font-size: 1.5em;
  }
  .att-resultats .band-details .contain {
    flex-wrap: wrap;
    height: auto;
  }
  .att-resultats .band-details .contain .section-projet, .att-resultats .band-details .contain .section-emprunt {
    width: 100%;
    margin-bottom: 2rem;
  }
  .att-resultats .band-details .contain .section-emprunt {
    height: 20rem;
  }
  .att-resultats .band-details .contain .section-emprunt .inner-sec .ss-form .list-taux {
    bottom: 5rem;
  }
  .att-resultats .band-details .contain .section-projet {
    margin-right: 0;
  }
  .att-resultats .band-treps .inner-sec .contain {
    flex-wrap: wrap;
  }
  .att-resultats .band-treps .inner-sec .contain .explain {
    width: 100%;
    margin-bottom: 2rem;
  }
  .att-resultats .band-treps .inner-sec .contain .indice {
    width: 25%;
  }
  /* Crédit score */
  /*@todo laisser la structure CSS Crédit score (pr la modifier si besoin) ou supprimer les lignes commentées*/
  .ogp_csprojet_type section form.credit-score, .ogp_csfree section form.credit-score {
    /* = frame général : form-box / result-box (70% 30%) */
  }
  .ogp_csprojet_type section form.credit-score .form-cs .form-box, .ogp_csfree section form.credit-score .form-cs .form-box {
    width: 65%; /*ori 70%*/
  }
  .ogp_csprojet_type section form.credit-score .form-cs .result-box, .ogp_csfree section form.credit-score .form-cs .result-box {
    width: 35%; /*ori 30%*/
  }
  .ogp_csprojet_type section form.credit-score .form-cs .result-box #result-emprunt .band-bloc-results, .ogp_csprojet_type section form.credit-score .form-cs .result-box #result-acquisition .band-bloc-results, .ogp_csfree section form.credit-score .form-cs .result-box #result-emprunt .band-bloc-results, .ogp_csfree section form.credit-score .form-cs .result-box #result-acquisition .band-bloc-results {
    left: 0; /*ori 50%*/
  }
  .ogp_csprojet_type section form.credit-score .form-section, .ogp_csfree section form.credit-score .form-section {
    /* = frame enf 2 : form-item (80%) */
    /* = frame enf 3 : label / input (40% / 30% ou 40%) */
    /*left*/
    /*right*/
  }
  .ogp_csprojet_type section form.credit-score .form-section .form-item:not(.fieldgroup), .ogp_csprojet_type section form.credit-score .form-section .form-item.fieldgroup, .ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup), .ogp_csfree section form.credit-score .form-section .form-item.fieldgroup {
    width: 100%; /*ori 80%*/
  }
  .ogp_csprojet_type section form.credit-score .form-section .form-item:not(.fieldgroup) label, .ogp_csprojet_type section form.credit-score .form-section .form-item.fieldgroup legend, .ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup) label, .ogp_csfree section form.credit-score .form-section .form-item.fieldgroup legend {
    width: 45%; /*ori 40%*/
  }
  .ogp_csprojet_type section form.credit-score .form-section .form-item:not(.fieldgroup) .description, .ogp_csprojet_type section form.credit-score .form-section .form-item.fieldgroup .description, .ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup) .description, .ogp_csfree section form.credit-score .form-section .form-item.fieldgroup .description {
    width: 45%; /*ori 30%*/
  }
  .ogp_csprojet_type section form.credit-score .form-section .form-item:not(.fieldgroup) input:not([type=submit]):not([type=checkbox]):not([type=file]):not([type=range]), .ogp_csprojet_type section form.credit-score .form-section .form-item:not(.fieldgroup) textarea, .ogp_csprojet_type section form.credit-score .form-section .form-item:not(.fieldgroup) select:not(.js-filter-list), .ogp_csprojet_type section form.credit-score .form-section .form-item:not(.fieldgroup) #edit-cv, .ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup) input:not([type=submit]):not([type=checkbox]):not([type=file]):not([type=range]), .ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup) textarea, .ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup) select:not(.js-filter-list), .ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup) #edit-cv {
    width: 40%; /* 1. input ori 30%*/
  }
  .ogp_csprojet_type section form.credit-score .form-section .form-item.fieldgroup .fieldset-wrapper, .ogp_csfree section form.credit-score .form-section .form-item.fieldgroup .fieldset-wrapper { /*width:40%;*/ /* 2. input radio ori 40%*/
  }
  .ogp_csprojet_type section form.credit-score .form-section .slider-wrapper, .ogp_csfree section form.credit-score .form-section .slider-wrapper { /*width: 40%;*/ /* 3. input range ori 40% */
  }
  /* Cas spé */
  .ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup) .description, .ogp_csfree section form.credit-score .form-section .form-item.fieldgroup .description {
    width: 30%;
  }
  .ogp_csprojet_type section form.credit-score .form-section .form-item:not(.fieldgroup).form-type-number:after {
    right: 10vw;
  }
  /* == tableaux admin */
  #admin .band-table .table {
    display: none;
  }
  #admin .form:after {
    content: "Merci de tourner la tablette pour un affichage optimal des tableaux.";
    margin-bottom: 2rem;
    display: inline-block;
  }
  /* mz */
}
/* === S et M === 230 px à 1024 px */
@media only screen and (max-width: 64em) {
  /*pour ne dupliquer le code en S et M*/
  /* smz */
}
/* === M et + === 640 px et + */
/* M1  640 px à 800 px */
@media only screen and (min-width: 640px) and (max-width: 800px) {
  header .header-large .contain .connexion ul.menu-options li:nth-child(1) {
    display: none;
  }
  .page-node-type-homepage .overlay {
    background-size: 165%;
  }
  .page-node-type-homepage .band-cta .inner-s .bg-cta .contain {
    padding-left: 0;
    text-align: center;
  }
  .page-node-type-homepage .band-cta .inner-s .bg-cta .contain figure {
    width: 15rem;
    left: 35%;
    top: -12rem;
    z-index: -1;
  }
  .band-outils .list {
    flex-wrap: wrap;
    gap: 4%;
  }
  .band-outils .list .outil {
    width: 48%;
    flex: initial;
    margin-bottom: 4rem;
  }
  .band-outils .list .outil .top {
    font-size: 1.18em;
  }
  /* Crédit score */
  .page-node-type-homepage .band-creditscore .inner-s .contain .form {
    width: 65%;
  }
  .ogp_csprojet_type section form.credit-score, .ogp_csfree section form.credit-score, .path-frontpage section form.credit-score-home {
    /* = frame général : form-box / result-box (70% 30%) */
  }
  .ogp_csprojet_type section form.credit-score .form-cs, .ogp_csfree section form.credit-score .form-cs, .path-frontpage section form.credit-score-home .form-cs {
    flex-wrap: wrap;
  }
  .ogp_csprojet_type section form.credit-score .form-cs .form-box, .ogp_csfree section form.credit-score .form-cs .form-box, .path-frontpage section form.credit-score-home .form-cs .form-box {
    width: 100%; /*ori 70%*/
  }
  .ogp_csprojet_type section form.credit-score .form-cs .result-box, .ogp_csfree section form.credit-score .form-cs .result-box, .path-frontpage section form.credit-score-home .form-cs .result-box {
    margin-top: 5rem;
    width: 100%; /*ori 30%*/
  }
  .ogp_csprojet_type section form.credit-score .form-cs .result-box #result-emprunt .band-bloc-results, .ogp_csprojet_type section form.credit-score .form-cs .result-box #result-acquisition .band-bloc-results, .ogp_csfree section form.credit-score .form-cs .result-box #result-emprunt .band-bloc-results, .ogp_csfree section form.credit-score .form-cs .result-box #result-acquisition .band-bloc-results, .path-frontpage section form.credit-score-home .form-cs .result-box #result-emprunt .band-bloc-results, .path-frontpage section form.credit-score-home .form-cs .result-box #result-acquisition .band-bloc-results {
    /*left:0;*/ /*ori 50%*/
  }
  .ogp_csprojet_type section form.credit-score .form-section, .ogp_csfree section form.credit-score .form-section, .path-frontpage section form.credit-score-home .form-section {
    /* = frame enf 2 : form-item (80%) */
    /* = frame enf 3 : label / input (40% / 30% ou 40%) */
    /*left*/
    /*right*/
  }
  .ogp_csprojet_type section form.credit-score .form-section .form-item:not(.fieldgroup), .ogp_csprojet_type section form.credit-score .form-section .form-item.fieldgroup, .ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup), .ogp_csfree section form.credit-score .form-section .form-item.fieldgroup, .path-frontpage section form.credit-score-home .form-section .form-item:not(.fieldgroup), .path-frontpage section form.credit-score-home .form-section .form-item.fieldgroup { /*width:100%;*/ /*ori 80%*/
  }
  .ogp_csprojet_type section form.credit-score .form-section .form-item:not(.fieldgroup) label, .ogp_csprojet_type section form.credit-score .form-section .form-item.fieldgroup legend, .ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup) label, .ogp_csfree section form.credit-score .form-section .form-item.fieldgroup legend, .path-frontpage section form.credit-score-home .form-section .form-item:not(.fieldgroup) label, .path-frontpage section form.credit-score-home .form-section .form-item.fieldgroup legend { /*width:45%;*/ /*ori 40%*/
  }
  .ogp_csprojet_type section form.credit-score .form-section .form-item:not(.fieldgroup) .description, .ogp_csprojet_type section form.credit-score .form-section .form-item.fieldgroup .description, .ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup) .description, .ogp_csfree section form.credit-score .form-section .form-item.fieldgroup .description, .path-frontpage section form.credit-score-home .form-section .form-item:not(.fieldgroup) .description, .path-frontpage section form.credit-score-home .form-section .form-item.fieldgroup .description {
    width: 35%; /*ori 30%*/
  }
  .ogp_csprojet_type section form.credit-score .form-section .form-item:not(.fieldgroup) input:not([type=submit]):not([type=checkbox]):not([type=file]):not([type=range]), .ogp_csprojet_type section form.credit-score .form-section .form-item:not(.fieldgroup) textarea, .ogp_csprojet_type section form.credit-score .form-section .form-item:not(.fieldgroup) select:not(.js-filter-list), .ogp_csprojet_type section form.credit-score .form-section .form-item:not(.fieldgroup) #edit-cv, .ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup) input:not([type=submit]):not([type=checkbox]):not([type=file]):not([type=range]), .ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup) textarea, .ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup) select:not(.js-filter-list), .ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup) #edit-cv, .path-frontpage section form.credit-score-home .form-section .form-item:not(.fieldgroup) input:not([type=submit]):not([type=checkbox]):not([type=file]):not([type=range]), .path-frontpage section form.credit-score-home .form-section .form-item:not(.fieldgroup) textarea, .path-frontpage section form.credit-score-home .form-section .form-item:not(.fieldgroup) select:not(.js-filter-list), .path-frontpage section form.credit-score-home .form-section .form-item:not(.fieldgroup) #edit-cv { /*width:40%;*/ /* 1. input ori 30%*/
  }
  .ogp_csprojet_type section form.credit-score .form-section .form-item.fieldgroup .fieldset-wrapper, .ogp_csfree section form.credit-score .form-section .form-item.fieldgroup .fieldset-wrapper, .path-frontpage section form.credit-score-home .form-section .form-item.fieldgroup .fieldset-wrapper { /*width:40%;*/ /* 2. input radio ori 40%*/
  }
  .ogp_csprojet_type section form.credit-score .form-section .slider-wrapper, .ogp_csfree section form.credit-score .form-section .slider-wrapper, .path-frontpage section form.credit-score-home .form-section .slider-wrapper { /*width: 40%;*/ /* 3. input range ori 40% */
  }
  /* Cas spé */
  .ogp_csprojet_type section form.credit-score .form-section .form-item:not(.fieldgroup).form-type-number:after {
    right: 12vw;
  }
  .ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup).form-type-number:after {
    right: 14vw;
  }
}
/* M2  800 à 1024 px */
@media only screen and (min-width: 800px) and (max-width: 64.0625em) {
  .ogp_csfree section form.credit-score .form-section .form-item.fieldgroup .description {
    /*width:30%; // ?*/
  }
}
/* 1024 px uniquement */
/* L only === 1024 px et + ================================================================= */
/* === L === 1024 et + */
/* L à 1100px */
/* L à 1200px */
@media only screen and (min-width: 64.0625em) and (max-width: 1200px) {
  /* == header - menu */
  header .header-large .contain .menu.menu-main {
    padding-left: 5rem;
  }
  header .header-large .contain .menu.menu-main nav ul.menu__links li.item--0 a {
    padding-right: 2rem;
  }
  /* == home - section opopp */
  .page-node-type-homepage .overlay {
    background-position: center top;
    background-size: 135%;
  }
  .page-node-type-homepage .band-creditscore .inner-s .contain {
    flex-wrap: wrap;
  }
  .page-node-type-homepage .band-creditscore .inner-s .contain .left, .page-node-type-homepage .band-creditscore .inner-s .contain .form {
    width: 100%;
  }
  .page-node-type-homepage .band-creditscore .inner-s .contain .form {
    width: 50%;
    margin: auto;
    margin-top: 5.3571428571rem;
    box-shadow: 8px 8px 24px 0px rgba(0, 0, 0, 0.1215686275);
  }
  .page-node-type-homepage .band-creditscore .inner-s .contain .form:before {
    bottom: 10rem;
  }
  /* == home - section opopp */
  .page-node-type-homepage .band-opopp .inner-s .list-outil {
    padding-left: 2rem !important;
  }
  .page-node-type-homepage .band-opopp .inner-s .list-outil figure {
    width: 15rem;
    left: -5rem;
    top: 10rem;
  }
  /* == home - section forfait */
  #nos-forfaits .band-forfaits .list-forfait {
    flex-wrap: wrap;
    gap: 2%;
  }
  #nos-forfaits .band-forfaits .list-forfait article.contextual-region {
    width: 31%;
    margin-bottom: 1.5rem;
  }
  /* == home - section cta */
  .page-node-type-homepage .band-cta .inner-s .bg-cta .contain {
    padding-left: 30%;
  }
  .page-node-type-homepage .band-cta .inner-s .bg-cta .contain figure {
    width: 15rem;
    left: 2rem;
    top: 0;
  }
  .page-node-type-homepage .band-cta .inner-s .bg-cta .contain figure img {
    max-width: 100%;
  }
  /* == outil général*/
  #wrapper .general main .inner-tool aside.appli .inner-spe .menu.menu-lateral nav ul.menu__links li.item--0 a span {
    /*display:none;*/ /*retrait du menu en JQ maintenant*/
  }
  /* == outil général*/
  #wrapper .general main .inner-tool aside.appli {
    width: 7.1428571429rem;
    flex-shrink: 0;
    /*@todo améliorer l'identation des 2 régles ci-dessous pour les 3 : 1200, M, S*/
  }
  #wrapper .general main .inner-tool aside.appli .inner-spe .menu.menu-lateral nav ul.menu__links li.item--0 {
    /*border-bottom: 1px solid #eaecf1;*/
    /*width: 60%;*/ /*old 40%*/
  }
  #wrapper .general main .inner-tool aside.appli .inner-spe .menu.menu-lateral nav ul.menu__links li.item--0 a:before {
    background-size: auto;
  }
  #wrapper .general main .inner-tool aside.appli .inner-spe .menu.menu-lateral nav ul.menu__links li.toggle {
    display: none;
  }
  #wrapper .general main .inner-tool section.appli {
    flex: 1;
    min-width: 0;
  }
  #wrapper .general main .inner-tool section.appli .inner-spe {
    padding-left: 4rem;
  }
  .section-formations .list-formation .formation-box .contain .txt {
    padding: 1rem 1rem;
  }
  .section-formations .list-formation .formation-box .contain .txt h3 {
    font-size: 1.5em;
  }
  .section-formations .list-formation .formation-box .contain .txt p {
    font-size: 1.1em;
  }
  .band-outils .list .outil .top {
    font-size: 1em !important;
  }
  /* == ♦ outil attestation */
  main.outil .band-bloc-results .overlay .inner-sec .result ul.result-name li.negativ.active {
    font-size: 1em !important;
  }
  /* == tableaux admin */
  #admin .band-table .table {
    display: none;
  }
  #admin .form:after {
    content: "Merci de tourner la tablette pour un affichage optimal des tableaux.";
    margin-bottom: 2rem;
    display: inline-block;
  }
}
/* L à 1300px */
@media only screen and (min-width: 64.0625em) and (max-width: 1300px) {
  /* == ♦ outil attestation */
  main.outil .page-att .band-first {
    flex-wrap: wrap;
  }
  main.outil .page-att ul.att-nav {
    width: 100%;
    position: relative;
    top: 1.5rem;
    margin-left: 0rem !important;
  }
  main.outil .page-att ul.att-nav li {
    margin-right: 4rem !important;
  }
  main.outil .page-att ul.att-nav li:after {
    width: 2.5rem !important;
    left: 2.9rem !important;
  }
  /* Crédit score */
  /*@todo laisser la structure CSS Crédit score (pr la modifier si besoin) ou supprimer les lignes commentées*/
  .ogp_csprojet_type section form.credit-score, .ogp_csfree section form.credit-score {
    /* = frame général : form-box / result-box (70% 30%) */
  }
  .ogp_csprojet_type section form.credit-score .form-cs .form-box, .ogp_csfree section form.credit-score .form-cs .form-box {
    width: 65%; /*ori 70%*/
  }
  .ogp_csprojet_type section form.credit-score .form-cs .result-box, .ogp_csfree section form.credit-score .form-cs .result-box {
    width: 35%; /*ori 30%*/
  }
  .ogp_csprojet_type section form.credit-score .form-cs .result-box #result-emprunt .band-bloc-results, .ogp_csprojet_type section form.credit-score .form-cs .result-box #result-acquisition .band-bloc-results, .ogp_csfree section form.credit-score .form-cs .result-box #result-emprunt .band-bloc-results, .ogp_csfree section form.credit-score .form-cs .result-box #result-acquisition .band-bloc-results {
    /*left:0;*/ /*ori 50%*/
  }
  .ogp_csprojet_type section form.credit-score .form-section, .ogp_csfree section form.credit-score .form-section {
    /* = frame enf 2 : form-item (80%) */
    /* = frame enf 3 : label / input (40% / 30% ou 40%) */
    /*left*/
    /*right*/
  }
  .ogp_csprojet_type section form.credit-score .form-section .form-item:not(.fieldgroup), .ogp_csprojet_type section form.credit-score .form-section .form-item.fieldgroup, .ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup), .ogp_csfree section form.credit-score .form-section .form-item.fieldgroup { /*width:100%;*/ /*ori 80%*/
  }
  .ogp_csprojet_type section form.credit-score .form-section .form-item:not(.fieldgroup) label, .ogp_csprojet_type section form.credit-score .form-section .form-item.fieldgroup legend, .ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup) label, .ogp_csfree section form.credit-score .form-section .form-item.fieldgroup legend {
    width: 45%; /*ori 40%*/
  }
  .ogp_csprojet_type section form.credit-score .form-section .form-item:not(.fieldgroup) .description, .ogp_csprojet_type section form.credit-score .form-section .form-item.fieldgroup .description, .ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup) .description, .ogp_csfree section form.credit-score .form-section .form-item.fieldgroup .description {
    width: 45%; /*ori 30%*/
  }
  .ogp_csprojet_type section form.credit-score .form-section .form-item:not(.fieldgroup) input:not([type=submit]):not([type=checkbox]):not([type=file]):not([type=range]), .ogp_csprojet_type section form.credit-score .form-section .form-item:not(.fieldgroup) textarea, .ogp_csprojet_type section form.credit-score .form-section .form-item:not(.fieldgroup) select:not(.js-filter-list), .ogp_csprojet_type section form.credit-score .form-section .form-item:not(.fieldgroup) #edit-cv, .ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup) input:not([type=submit]):not([type=checkbox]):not([type=file]):not([type=range]), .ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup) textarea, .ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup) select:not(.js-filter-list), .ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup) #edit-cv {
    width: 40%; /* 1. input ori 30%*/
  }
  .ogp_csprojet_type section form.credit-score .form-section .form-item.fieldgroup .fieldset-wrapper, .ogp_csfree section form.credit-score .form-section .form-item.fieldgroup .fieldset-wrapper { /*width:40%;*/ /* 2. input radio ori 40%*/
  }
  .ogp_csprojet_type section form.credit-score .form-section .slider-wrapper, .ogp_csfree section form.credit-score .form-section .slider-wrapper { /*width: 40%;*/ /* 3. input range ori 40% */
  }
  /* Cas spé */
  .ogp_csfree section form.credit-score .form-section .form-item.fieldgroup .description {
    /*width:30%; // ?*/
  }
  .ogp_csprojet_type section form.credit-score .form-section .form-item:not(.fieldgroup).form-type-number:after {
    right: 9vw !important;
  }
  .ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup).form-type-number:after {
    right: 9vw !important;
  }
}
/* L à 1330 px */
/* L à 1400px */
@media only screen and (min-width: 64.0625em) and (max-width: 1400px) {
  .page-node-type-homepage .band-opopp .inner-s .list-outil {
    padding-left: 15rem;
  }
  /* == outil général*/
  #wrapper .general main .inner-tool aside.appli .inner-spe .menu.menu-lateral nav ul.menu__links li.item--0 a {
    /*display: flex;
    align-items: center;
    &:before{
      top: 50%;
    }*/
  }
  .section-formations .list-formation .formation-box .contain .txt {
    padding: 2rem 2rem;
  }
  .band-outils .list {
    gap: 2rem;
  }
  .band-outils .list .outil .top {
    font-size: 1.18em;
  }
  .att_home_outil .band-welcome {
    max-width: 100%;
  }
  /* == ♦ outil attestation */
  section form .form-item, section form .line .form-item, section form .line-spe div:nth-child(1), section form .line-spe div:nth-child(2), section form .line div:not(.form-item, .messages, div[data-drupal-messages]) {
    width: 45%;
  }
  section form .form-item.form-item-line-0-projet-adr-rue, section form .form-item.form-item-line-1-projet-adr-compl, section form .form-item.form-item-line2-1-projet-comment, section form .form-item.form-item-line2-0-adr-rue, section form .form-item.form-item-line2-1-adr-compl {
    width: 92%;
  }
  /* == ♦♦ outil attestation */
  .att-resultats .inner-sec, .band-details .section-projet .inner-sec, .band-details .section-emprunt .inner-sec, .band-treps .inner-sec {
    padding: 2rem 3rem;
  }
  .att-resultats .band-treps .inner-sec {
    padding-top: 2rem !important;
  }
  .att-resultats .band-avis .inner-sec .contain .designation {
    padding-right: 1.5rem;
  }
  .att-resultats .band-avis .inner-sec .contain .designation .para-c {
    padding-left: 1.5rem;
  }
  .att-resultats .band-avis .inner-sec .contain .designation .para-c .title-s {
    font-size: 1.5em;
  }
  .att-resultats .band-avis .inner-sec .contain .designation .para-c .btn-v a {
    font-size: 1em;
  }
  .att-resultats .band-avis .inner-sec .contain .avis {
    padding-left: 1.5rem;
  }
  .att-resultats .band-avis .inner-sec .contain .avis .img {
    margin-left: 0;
  }
  .att-resultats .band-avis .inner-sec .contain .avis .para-c {
    padding-left: 1.5rem;
  }
  .att-resultats .band-avis .inner-sec .contain .avis .para-c .title-s {
    font-size: 1.5em;
  }
  .att-resultats .band-details .contain {
    flex-wrap: wrap;
    height: auto;
  }
  .att-resultats .band-details .contain .section-projet, .att-resultats .band-details .contain .section-emprunt {
    width: 100%;
    margin-bottom: 2rem;
  }
  .att-resultats .band-details .contain .section-emprunt {
    height: 20rem;
  }
  .att-resultats .band-details .contain .section-emprunt .inner-sec .ss-form .list-taux {
    bottom: 5rem;
  }
  .att-resultats .band-details .contain .section-projet {
    margin-right: 0;
  }
  .att-resultats .band-treps .inner-sec .contain {
    flex-wrap: wrap;
  }
  .att-resultats .band-treps .inner-sec .contain .explain {
    width: 100%;
    margin-bottom: 2rem;
  }
  .att-resultats .band-treps .inner-sec .contain .indice {
    width: 25%;
  }
}
/* L à 1500px */
@media only screen and (min-width: 64.0625em) and (max-width: 1500px) {
  /* == outil général*/
  #wrapper .general main .inner-tool aside.appli .inner-spe .menu.menu-lateral nav ul.menu__links li.item--0 a {
    font-size: 1em !important;
  }
  /* == ♦ outil attestation */
  main.outil .page-att .band-first {
    flex-wrap: wrap;
  }
  main.outil .page-att ul.att-nav {
    margin-left: 2rem;
  }
  main.outil .page-att ul.att-nav li {
    margin-right: 2.5rem;
  }
  main.outil .page-att ul.att-nav li:after {
    width: 1rem;
    left: 2.2rem;
  }
  main.outil .page-att .form-att .result-box .band-bloc-results .overlay .inner-sec {
    padding: 2rem 1.5rem !important;
  }
  main.outil .page-att .form-att .result-box .band-bloc-results .overlay .inner-sec .result ul.result-name li.negativ.active {
    font-size: 1.2em;
  }
  main.outil .page-att .form-att .result-box .band-bloc-results .overlay .inner-sec ul.stat li:nth-child(1) .nb {
    font-size: 0.85714286em;
  }
  /* Crédit score */
  .ogp_csprojet_type section form.credit-score, .ogp_csfree section form.credit-score, .path-frontpage section form.credit-score-home {
    /* = frame général : form-box / result-box (70% 30%) */
  }
  .ogp_csprojet_type section form.credit-score .form-cs .form-box, .ogp_csfree section form.credit-score .form-cs .form-box, .path-frontpage section form.credit-score-home .form-cs .form-box { /*width:70%;*/ /*ori 70%*/
  }
  .ogp_csprojet_type section form.credit-score .form-cs .result-box, .ogp_csfree section form.credit-score .form-cs .result-box, .path-frontpage section form.credit-score-home .form-cs .result-box {
    /*width:30%;*/ /*ori 30%*/
  }
  .ogp_csprojet_type section form.credit-score .form-cs .result-box #result-emprunt .band-bloc-results, .ogp_csprojet_type section form.credit-score .form-cs .result-box #result-acquisition .band-bloc-results, .ogp_csfree section form.credit-score .form-cs .result-box #result-emprunt .band-bloc-results, .ogp_csfree section form.credit-score .form-cs .result-box #result-acquisition .band-bloc-results, .path-frontpage section form.credit-score-home .form-cs .result-box #result-emprunt .band-bloc-results, .path-frontpage section form.credit-score-home .form-cs .result-box #result-acquisition .band-bloc-results {
    left: 0; /*ori 50%*/
  }
  .ogp_csprojet_type section form.credit-score .form-section, .ogp_csfree section form.credit-score .form-section, .path-frontpage section form.credit-score-home .form-section {
    /* = frame enf 2 : form-item (80%) */
    /* = frame enf 3 : label / input (40% / 30% ou 40%) */
    /*left*/
    /*right*/
  }
  .ogp_csprojet_type section form.credit-score .form-section .form-item:not(.fieldgroup), .ogp_csprojet_type section form.credit-score .form-section .form-item.fieldgroup, .ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup), .ogp_csfree section form.credit-score .form-section .form-item.fieldgroup, .path-frontpage section form.credit-score-home .form-section .form-item:not(.fieldgroup), .path-frontpage section form.credit-score-home .form-section .form-item.fieldgroup {
    width: 100%; /*ori 80%*/
  }
  .ogp_csprojet_type section form.credit-score .form-section .form-item:not(.fieldgroup) label, .ogp_csprojet_type section form.credit-score .form-section .form-item.fieldgroup legend, .ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup) label, .ogp_csfree section form.credit-score .form-section .form-item.fieldgroup legend, .path-frontpage section form.credit-score-home .form-section .form-item:not(.fieldgroup) label, .path-frontpage section form.credit-score-home .form-section .form-item.fieldgroup legend { /*width:40%;*/ /*ori 40%*/
  }
  .ogp_csprojet_type section form.credit-score .form-section .form-item:not(.fieldgroup) input:not([type=submit]):not([type=checkbox]):not([type=file]):not([type=range]), .ogp_csprojet_type section form.credit-score .form-section .form-item:not(.fieldgroup) textarea, .ogp_csprojet_type section form.credit-score .form-section .form-item:not(.fieldgroup) select:not(.js-filter-list), .ogp_csprojet_type section form.credit-score .form-section .form-item:not(.fieldgroup) #edit-cv, .ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup) input:not([type=submit]):not([type=checkbox]):not([type=file]):not([type=range]), .ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup) textarea, .ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup) select:not(.js-filter-list), .ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup) #edit-cv, .path-frontpage section form.credit-score-home .form-section .form-item:not(.fieldgroup) input:not([type=submit]):not([type=checkbox]):not([type=file]):not([type=range]), .path-frontpage section form.credit-score-home .form-section .form-item:not(.fieldgroup) textarea, .path-frontpage section form.credit-score-home .form-section .form-item:not(.fieldgroup) select:not(.js-filter-list), .path-frontpage section form.credit-score-home .form-section .form-item:not(.fieldgroup) #edit-cv { /*width:30%;*/ /* 1. input ori 30%*/
  }
  .ogp_csprojet_type section form.credit-score .form-section .form-item.fieldgroup .fieldset-wrapper, .ogp_csfree section form.credit-score .form-section .form-item.fieldgroup .fieldset-wrapper, .path-frontpage section form.credit-score-home .form-section .form-item.fieldgroup .fieldset-wrapper { /*width:40%;*/ /* 2. input radio ori 40%*/
  }
  .ogp_csprojet_type section form.credit-score .form-section .slider-wrapper, .ogp_csfree section form.credit-score .form-section .slider-wrapper, .path-frontpage section form.credit-score-home .form-section .slider-wrapper { /*width: 40%;*/ /* 3. input range ori 40% */
  }
  /* Cas spé */
  .ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup) .description, .ogp_csfree section form.credit-score .form-section .form-item.fieldgroup .description {
    width: 30%;
  }
}
/* L à 1600px */
@media only screen and (min-width: 64.0625em) and (max-width: 1600px) {
  .inner,
  .inner-xl,
  .inner-s,
  .inner-xs,
  .inner-xxs {
    padding-left: 6.92rem !important;
    padding-right: 6.92rem !important;
    max-width: 100%;
  }
  .inner-c,
  .inner-xlc,
  .inner-sc,
  .inner-xsc,
  .inner-xxsc {
    padding-left: 6rem !important;
    padding-right: 6rem !important;
    max-width: 100%;
  }
  /* == ♦♦ outil attestation */
  .att-resultats .band-details .section-emprunt .inner-sec .ss-form .list-taux li {
    padding-right: 2rem;
    flex-wrap: wrap;
  }
  .ogp_csfree section form.credit-score .form-section .form-item:not(.fieldgroup).form-type-number:after {
    right: 18vw;
  }
  .ogp_csprojet_type section form.credit-score .form-section .form-item:not(.fieldgroup).form-type-number:after {
    right: 16vw;
  }
}
/* L à 1700px */
@media only screen and (min-width: 64.0625em) and (max-width: 1700px) {
  /* == outil général*/
  #wrapper .general main .inner-tool aside.appli {
    /*width:10%;*/ /* initial 16% */
  }
  #wrapper .general main .inner-tool aside.appli .inner-spe {
    padding-right: 0;
  }
  #wrapper .general main .inner-tool aside.appli .inner-spe .menu.menu-lateral nav ul.menu__links li.item--0 a {
    /*font-size:1.15em;*/
  }
  #wrapper .general main .inner-tool section.appli {
    /*width:90%;*/ /* initial 84% */
  }
  #wrapper .general main .inner-tool section.appli .inner-spe {
    padding-left: 5rem;
    /*padding-right: 0rem;*/ /*old*/
  }
  #wrapper .general main .inner-tool section.appli .inner-spe .band-outils {
    max-width: 80%;
  }
}
/* 1700 à 1725px */
@media only screen and (min-width: 1700px) and (max-width: 1725px) {
  /* == ♦ outil attestation */
  main.outil .page-att ul.att-nav {
    margin-left: 0.75rem !important;
  }
}
/* L à 1800px */
@media only screen and (min-width: 64.0625em) and (max-width: 1800px) {
  /* == ♦ outil attestation */
  main.outil .page-att ul.att-nav {
    margin-left: 2rem;
  }
}
/* L à 1900px */
@media only screen and (min-width: 64.0625em) and (max-width: 1900px) {
  /* == ♦ outil attestation */
  main.outil .band-bloc-results .overlay .inner-sec {
    padding: 2rem 2rem;
  }
  .att-resultats .band-details .section-emprunt .inner-sec .ss-form .list-taux li .bg-circle {
    padding-top: 0.25rem;
    font-size: 1.25em;
    width: 4rem;
    height: 4rem;
  }
}
/* supérieur à 1920 px */
/* 500px et - */
@media screen and (max-width: 500px) {
  /* == Simulateur Capacité d'emprunt */
  /* 1. Passage du cadre #borrow-capacity et de ses enfants à 80 vw av réglages pr 500px*/
  #simulateur-focus #borrow-cap #borrow-cap-precision #borrow-capacity {
    width: 80vw;
  }
  #simulateur-focus #borrow-cap #borrow-cap-precision #borrow-capacity .incomes-and-expenses {
    width: 80vw;
  }
  #simulateur-focus #borrow-cap #borrow-cap-precision #borrow-capacity .input-container {
    width: calc(80vw - 20px);
  }
  #simulateur-focus #borrow-cap #borrow-cap-precision #borrow-capacity .add-btn {
    width: calc(80vw - 40px);
  }
  /* 2. Masqué "mensuel" + 100% pour l'input*/
  #simulateur-focus #borrow-cap #borrow-cap-precision #borrow-capacity .switch {
    display: none;
    grid-column: 1/-1; /* occupe toutes les colonnes */
  }
  #simulateur-focus #borrow-cap #borrow-cap-precision #borrow-capacity .incomes-expenses-inputs {
    grid-template-columns: 20px auto;
  }
}
/* 720px et - */
@media screen and (max-width: 720px) {
  #simulateur-focus #proj-val #proj-val-precision #project-value {
    width: 80vw;
  }
}
/* 500 px à 720 px */
@media only screen and (min-width: 501px) and (max-width: 720px) {
  /*Passage du cadre #borrow-capacity et de ses enfants à 80 vw*/
  #simulateur-focus #borrow-cap #borrow-cap-precision #borrow-capacity {
    width: 80vw;
  }
  #simulateur-focus #borrow-cap #borrow-cap-precision #borrow-capacity .incomes-and-expenses {
    width: 80vw;
  }
  #simulateur-focus #borrow-cap #borrow-cap-precision #borrow-capacity .input-container {
    width: calc(80vw - 120px);
  }
  #simulateur-focus #borrow-cap #borrow-cap-precision #borrow-capacity .add-btn {
    width: calc(80vw - 140px);
  }
}
/* P   750px et - */
@media screen and (max-width: 750px) {
  /* Simulateur Frais de notaire */
  /* == Simulateur Crédit Emprunt */
  #simulateur-focus #loan-borrow #precision #loan-calc-app {
    justify-items: initial;
    width: 100% !important;
  }
  #simulateur-focus #loan-borrow #precision #loan-calc-app .borrow-container,
  #simulateur-focus #loan-borrow #precision #loan-calc-app .loan-container {
    width: 80vw !important;
  }
  /* Simulateur Montant à financer */
  /* Simulateur Epargne */
  #simulateur-focus #capital-effort #precision #saving-calc-main {
    justify-items: initial;
    width: 100% !important;
  }
  #simulateur-focus #capital-effort #precision #saving-calc-main .saving-capital-container,
  #simulateur-focus #capital-effort #precision #saving-calc-main .saving-effort-container {
    width: 80vw;
  }
}
/* L à 1216 à 1400px */
@media only screen and (min-width: 1216px) and (max-width: 1400px) {
  /* Simulateur Epargne */
  #simulateur-focus #capital-effort #precision #saving-calc-main {
    width: auto !important;
    display: grid;
    grid-template-columns: 1fr !important; /* une seule colonne */
    grid-template-rows: auto auto auto auto !important; /* 4 lignes automatiques */
    grid-template-areas: "loan" "saving-calc" "borrow" "borrow-calc" !important;
    gap: 16px; /* espace entre les blocs */
  }
  #simulateur-focus #capital-effort #precision #saving-calc-main .capital-title,
  #simulateur-focus #capital-effort #precision #saving-calc-main .effort-title {
    justify-self: center !important;
  }
  #simulateur-focus #capital-effort #precision #saving-calc-main .effort-title {
    grid-area: borrow !important;
    margin-left: 0 !important;
  }
}
/* L à 1216 à 1600px */
@media only screen and (min-width: 1216px) and (max-width: 1600px) {
  /* Simulateur Epargne */
  #simulateur-focus #loan-borrow #precision #loan-calc-app {
    width: auto !important;
    display: grid;
    grid-template-columns: 1fr !important; /* une seule colonne */
    grid-template-rows: auto auto auto auto !important; /* 4 lignes automatiques */
    grid-template-areas: "loan" "loan-calc" "borrow" "borrow-calc" !important;
    gap: 16px; /* espace entre les blocs */
  }
  #simulateur-focus #loan-borrow #precision #loan-calc-app > h1:first-child,
  #simulateur-focus #loan-borrow #precision #loan-calc-app .borrow-title {
    justify-self: center !important;
  }
  #simulateur-focus #loan-borrow #precision #loan-calc-app .borrow-title {
    /*grid-area: borrow !important;*/
    margin-left: 0 !important;
  }
}
/* L à 1400px */
@media only screen and (min-width: 64.0625em) and (max-width: 1400px) {
  /* S1 Simulateur Crédit Emprunt */
  /*#loan-borrow #precision #loan-calc-app .borrow-title,
  #loan-borrow #precision #loan-calc-app #borrow-capacity {
    grid-column: 1 / -1 !important; !* occupe toute la largeur *!
  }*/
  /* S2 Simulateur Crédit Emprunt */
  /*#loan-borrow #precision #loan-calc-app {
    display: grid;
    grid-template-columns: 1fr;  !* 2 colonnes *!
    grid-template-areas:
    "loan borrow"
    "loan-title borrow-title"
    "loan2 loan2"
    "loan2-title loan2-title";
  }*/
}
/* L à 1601 et 1920px */
@media only screen and (min-width: 1216px) and (max-width: 1920px) {
  /* Simulateur Crédit */
  /*@todo mettre #simulateur-focus devant l'appel pour supprimer les !importants (à test)*/
  #loan-borrow #precision #loan-calc-app .borrow-title {
    margin-left: -244px !important;
  }
  #loan-borrow #precision #loan-calc-app .borrow-container,
  #loan-borrow #precision #loan-calc-app .loan-container {
    width: 560px !important;
  }
}
/*@todo voir pourquoi media_simulateurs est indépendante /css/media_simulateurs*/