* { box-sizing: border-box; }

*:focus { outline:1px solid #000; }
.mouseFocusNoOutline { outline:none; }

body { font-family: 'PT Sans Narrow', sans-serif; font-size: 18px; background-color: #3a3a3a; color:#fff }
#mainbloc {  padding:52px 0 32px 0; background-position: center top;  background-image : url(../../template21/bg.jpg); background-repeat:no-repeat;  background-size: 100% auto;}
.wrapper { width:100%; max-width:1200px; margin:0 auto; }

/* https://anybodesign.com/des-select-personnalises-en-css/ */
/* autre source pas utilisée : https://css-tricks.com/styling-a-select-like-its-2019/ */

.cuteSelect { position:relative; width:100%;background-color: #fff; top:0; border: #777 1px solid; margin: 0 0 1em 0; overflow: hidden; }
.cuteSelect select { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 110%; height:auto; background-color:#fff;
			border: 0; margin: 0; padding: .75em calc(1.5em + 10%) .75em .75em; border-radius: 0; line-height:1.3em;
			overflow: hidden; text-overflow: ellipsis; }
.cuteSelect::after {  content: ''; position: absolute; top: 50%; margin-top: -3px; right: .75em;  display: block; 
			width: 0; height: 0; border-color: transparent; border-top-color: #444; border-width: 6px;
			border-style: solid; pointer-events: none; }
.cuteSelect.cuteSelectDisabled::after {display:none;}

.cuteSelect select optgroup { background-color:#ddd ; color:#565656;}
.cuteSelect select optgroup option { background-color:#fff}
.cuteSelect select option { color:#000}
.cuteSelect select:required:invalid { color: #999; }
			
input[type=text] { width:100%; border:none;margin-bottom:1em;padding: calc(1em - 2px) 0.5em calc(1em - 2px) 0.5em }

.formCheckBloc { margin-bottom:1em; }
input[type=checkbox] { float:left; margin-right:0.5em;}

.formWinSpace {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.formWinSpace input, .formWinSpace div { width:48%; }

.formsuccess,
.formerror { margin-top:1em 0 0.6em 0; padding:22px; font-size: 17px; line-height:1.5em; font-family:Assistant; letter-spacing: -0.2px; } 
.formsuccess { background: #fff; color: #1E1E1E  ; }
.formerror  {  background: #565656; color: #FFFFFF  ; }


#header { display: flex; flex-flow:row wrap; justify-content: space-between; align-items: center;  margin:10px 0 0 0; }
/*#header>div { width:50%; }
#header #logo { order:1; }
#header #logotxt { order:3; }
#header #nouscontacter { order:2; text-align:right; }
#header #ibanheader { order:4; text-align:right; color:#000; text-shadow:-1px -1px 0 #fff, 1px -1px 0 #fff,-1px 1px 0 #fff, 1px 1px 0 #fff;  }
*/

#logo a, #logo img {display:block; }
#logo img { height:120px; }
#logotxt { display:inline-block; font-size: 24px; _font-weight:bold; margin-bottom:45px }
/* 3a3a3a est la couleur de fond en mode mobile, donc cohérence */
#logotxt a { text-decoration: none; color:#fff; text-transform:uppercase;text-shadow:-1px -1px 0 #3a3a3a, 1px -1px 0 #3a3a3a,-1px 1px 0 #3a3a3a, 1px 1px 0 #3a3a3a;  }

#nouscontacter {  padding-right:5%  }
#nouscontacter a { display:inline-block; background:rgba(255,255,255,0.9); border: 2px solid #565656; border-radius: 3px; text-align:center; font-size:20px; letter-spacing: -0.32px; color: #1E1E1E; padding:4px 6px 3px 6px; padding:0.4em 0.8em; line-height:1em;  text-decoration:none;  }
#nouscontacter a:hover { background-color:#565656; border-color:#1E1E1E;  color:#fff; }
.pagecontact #nouscontacter,.pagecontact #nouscontacter a { display:none; }


#donsteps {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
#donsteps.donContact,
#donsteps.donFini { justify-content: space-around;} 
#donsteps.donFini div.donstep { width: 600px ;  }
#donsteps.donContact div.donstep { width: 60%; }
#donsteps div.donstep { width: 380px ; background-color: rgba(255,255,255,0.6); padding-bottom:1em; margin-bottom:1em } 
#donsteps div.donstep div.donsteptitle { background-color: #b81c1c; height:50px; padding-top:10px; }
#donsteps div.donstep div.donsteptitle h2 { font-size:30px; font-weight:normal; text-align:center; margin:0; padding:0;  }
#donsteps div.donstep div.donstepcontent { padding:25px 20px 16px 20px; color:#000; }
#donsteps div.donstep div.donstepcontent div.donstepsubtitle { background-color: #6e6e6e;  margin:1em 0; padding:0.5em 0 0.5em 0.75em; color:#fff }

#donsteps div#step1 .cuteSelectSSprojet { display:none }
#donsteps div#step1 .cuteSelectSSprojet.cuteSelectSSprojetVisible { display:block }
#donsteps div#step1 div#montant-cases {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
#donsteps div#step1 div#montant-cases input[type="radio"] { display:none }
#donsteps div#step1 div#montant-cases input[type="radio"] + label { width:20%; padding:1em 0.3em; background-color:#fff;  text-align:center; }
#donsteps div#step1 div#montant-cases input[type="radio"]:checked + label {   border: 1px solid #000; color:#b81c1c }


#donsteps div#step1 div#montant-libre {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; background-color:#fff;margin-top:1em;}
#donsteps div#step1 div#montant-libre .montant-saisie { width:calc(100% - 100px); }
#donsteps div#step1 div#montant-libre .montant-saisie input {/* padding-right:4em !important; */ margin-bottom:0 !important; }
#donsteps div#step1 div#montant-libre .montant-saisie span  {margin-left:-3.7em; width:3.7em; display:inline-block ; border-left:1px solid #565656; padding:1em 0; text-align:center }
#donsteps div#step1 div#montant-libre .cuteSelect { width:100px; border-left:1px solid #565656; margin:0}

#donsteps div#step1 div#project-information { background-color:#1E1E1E; color:#fff; margin-top:1.2em; padding:.75em; text-align:justify; }
#donsteps div#step1 div#project-information a  {color:#fff; }
#donsteps div#step1 div#project-information a.more-project-information {  display:block; text-align:right; }
#donsteps div#step1 div#project-information div.francoDisclaimer { font-size:0.75em; color:#ccc }


#donsteps div#step2 #raison_sociale { display:none; }
#donsteps div#step2 #raison_sociale.visible { display:block;}
#donsteps div#step2 select.pays { text-transform:capitalize; }

#donsteps div#step3 #choixPaiementMethod { display:flex; flex-flow:row wrap; row-gap:20px; column-gap:2%; justify-content:space-evenly; /*space-between; width:90%;*/ margin:1em auto 0.6em auto;  }
#donsteps div#step3 #choixPaiementMethod div { width:23%; cursor:pointer }
/*
#donsteps div#step3 #choixPaiementMethod div { width:18%; }
#donsteps div#step3 #choixPaiementMethod div:first-child { width:33%;} 
*/

#donsteps div#step3 #choixPaiementMethod div span { display:none;}
#donsteps div#step3 #choixPaiementMethod svg { width:100%; height:auto; fill: #6e6e6e} 
#donsteps div#step3 #choixPaiementMethod #methodeBV svg {background-color:#fff; border-radius:6px;}
#donsteps div#step3 #choixPaiementMethod div.selected svg,
#donsteps div#step3 #choixPaiementMethod div:hover svg { fill: #b81c1c }
#donsteps div#step3 #methodName { background-color: #6e6e6e;  margin:0 0 0.5em 0; padding:0.5em 0 0.5em 0.75em; color:#fff; height:40px;  }
#donsteps div#step3 #methodName::placeholder { color:#eee;text-align:center; }
#donsteps div#step3 textarea { width:100%; height:5em; margin:0 0 1em 0}

#donsteps div#step3 input[type=submit] { width:100%; background-color: #b81c1c; border:1px solid #b81c1c; color:#fff; padding:0.75em 0; font-size:1.3em; text-align:center; text-transform:uppercase; cursor:pointer;}
#donsteps div#step3 input[type=submit]:active,
#donsteps div#step3 input[type=submit]:hover { background-color:#ff4452; /*border-top-color:#000;  border-left-color:#000; border-bottom-color:#777; border-right-color:#777;  */}

#donsteps div#step3 .descvirement { background-color: #fff; padding: calc(1em - 2px) 0.5em calc(1em - 2px) 0.5em; }
#donsteps div#step3 .descvirement .descvirementdetail { margin:0.3em 0; text-align:center }

/* les arrondis */
.cuteSelect,
.cuteSelect select,
input,
#header #nouscontacter a,
#donsteps div.donstep,
#donsteps div.donstep div.donsteptitle,
#donsteps div.donstep div.donstepcontent div.donstepsubtitle,
#donsteps div#step1 div#montant-cases input[type="radio"] + label,
#donsteps div#step1 div#montant-libre,
#donsteps div#step1 div#montant-libre .montant-saisie,
#donsteps div#step1 div#montant-libre .montant-saisie input,
#donsteps div#step1 div#project-information,
#donsteps div#step3 #methodName ,
#donsteps div#step3 textarea,
#donsteps div#step3 input[type=submit],
#donsteps div#step3 .descvirement
{
	border-radius:6px;
}

#donsteps div#stepFini { min-height:200px; background:rgba(255,255,255,0.8) }
#donsteps div#stepFini div.donstepcontent { font-size:1.25em; text-align:center; padding:2em 0 }
#donsteps div#stepFini div.donstepcontent a { color:#6e6e6e; }


/*					
	form contact			
					*/
/* #donsteps form.contact {  } */
#donsteps form.contact input,
#donsteps form.contact textarea { width:100%; font-style:italic; font-size:17px; line-height:1em; margin-top: 16px; }
#donsteps form.contact input {  padding:0.6em 0.9em; background-color:#f7f5f5; border:none; }
#donsteps form.contact textarea {  padding:0.8em 0.6em; border:5px solid #eae8e8; min-height:145px}
#donsteps form.contact input[type=submit] { width:unset; display:block; margin: 16px 0 0 auto; padding:0.6em 3em; background:#b81c1c; color:#fff; border:1px solid #b81c1c; border-radius:3px; text-transform:uppercase; cursor:pointer }
#donsteps form.contact input[type=submit]:hover { background:#eae8e8; color:#b81c1c }
.grecaptcha-badge { visibility:hidden; opacity:0}


#footer {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;padding-bottom:2em;}
#footer .footerbloc { width:30%; }
#footer .footerbloc .footertitle {margin:3em 0 1em 0 }
#footer .footerbloc .footertitle h4 { text-align:center; font-weight:normal; font-size:1em; text-transform: uppercase; margin:0; padding:0}
#footer a { color:#fff;}

/* media query */
@media (min-width: 1280px)
{
	#mainbloc { background-size:cover; }
	#ibanmobile { display:none; }
	#ibanpc { display:block; font-size:1.3em; line-height:0.6em; font-weight:bold;margin:25px 0;  }
	#ibanpc span { font-weight:normal; font-size:0.6em; }
	
/*	#donsteps div.donstep div.donsteptitle h2:before { content:">> "; }*/
}
@media (max-width: 1279px)
{
	#mainbloc { padding:30px 0 0 0; }
	.wrapper { width:90% }

	#header { align-items:flex-start }	
	#nouscontacter a { font-size:15px; }
	#logotxt { margin-bottom: 30px; }
	
	#ibanmobile { display:block; font-size:1.3em; line-height:0.6em; font-weight:bold;margin-bottom: 25px;  }
	#ibanmobile {  text-shadow:-1px -1px 0 #3a3a3a, 1px -1px 0 #3a3a3a,-1px 1px 0 #3a3a3a, 1px 1px 0 #3a3a3a;  }
	#ibanmobile span { font-weight:normal; font-size:0.6em; }
	#ibanpc { display:none; }
	
	#donsteps div.donstep,
	#donsteps.donFini div.donstep,
	#donsteps.donContact div.donstep { width:100%; }
	#footer { padding-bottom:40px; }
	#footer .footerbloc { width:100%; }
}

@media (max-width: 450px)
{
  #logo img { height:100px; }
}

@media (max-width: 359px)
{
	#logo img { height:80px; }
	#logotxt { font-size:20px; }
	#ibanmobile { font-size:20px; }
}