@charset="utf-8";

/*

bleu 		#009ee1
marine 		#0347a0
gris 		#b3b3b3
or 			#b19446 >
or demi 	#d5be92
mauve 		#685065
rose 		#cdbdc4 > #d7add1
violet 		#440f39 #4e0637
high 		#a8338b

/**/


@font-face {
  font-family: 'Libre Franklin';
  font-display:swap;
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('//cdn.chirurgiedermato.org/webfont/librefranklin/regular.woff2') format('woff2'),
       url('//cdn.chirurgiedermato.org/webfont/librefranklin/regular.woff') format('woff');
}

@font-face {
  font-family: 'Libre Franklin';
  font-display:swap;
  font-style: normal;
  font-weight: bold;
  src: local(''),
       url('//cdn.chirurgiedermato.org/webfont/librefranklin/700.woff2') format('woff2'),
       url('//cdn.chirurgiedermato.org/webfont/librefranklin/700.woff') format('woff');
}

@font-face {
  font-family: 'Libre Franklin';
  font-display:swap;
  font-style: italic;
  font-weight: 400;
  src: local(''),
       url('//cdn.chirurgiedermato.org/webfont/librefranklin/italic.woff2') format('woff2'),
       url('//cdn.chirurgiedermato.org/webfont/librefranklin/italic.woff') format('woff');
}

@font-face {
  font-family: 'Libre Franklin';
  font-display:swap;
  font-style: italic;
  font-weight: bold;
  src: local(''),
       url('//cdn.chirurgiedermato.org/webfont/librefranklin/700italic.woff2') format('woff2'),
       url('//cdn.chirurgiedermato.org/webfont/librefranklin/700italic.woff') format('woff');
}


*						{margin:0;padding:0;box-sizing:border-box}

html,
body					{width:100%;min-height:100%}
html 					{font:normal 1em/1 'Libre Franklin', Arial}
body					{background:rgb(228, 230, 237);color:#685065}

body 					{background:url(//media.isad.org/virtual/2024/doha/background_1920.jpg) no-repeat center top;background-size:100%}

a 						{color:inherit;text-decoration:none}

sup 					{line-height:0}

main 					{

	display:flex;
	flex-direction:column;
	width:100%;
	max-width:75ch;
	height:auto;
	margin:2em auto 0 auto;
	padding:0;
	background:#685065;
	box-shadow:0 0 1rem rgba(100,100,100,.2);
	border-bottom:4px solid #bbb;

}

header,
nav,
article,
footer 					{width:100%;height:auto;margin:0;padding:2rem}


header					{background:#FFF;text-align:center}

header > * 				{display:block;width:100%;margin:0 auto}

header a				{padding:2rem}
header		img			{width:100%;height:auto;margin:0 auto 2rem auto}
header + 	img 		{display:block}

header 	h1 				{display:none}
header	h2				{padding:.2em 0;font-size:2em;line-height:1.1;margin:0}
header	h2	.pill		{display:inline-block;color:#FFF;background:#4e0637;border-radius:3px;margin:.5em 0;padding:.5em;font-size:66%}
header	h2	small		{font-size:80%}
/* <span class="pill">Nouveauté&nbsp;: Live Cadaver Head Training</span><br>  */

@media screen and (max-width:800px) {

	header	h2 {font-size:1.5em}

}

nav 					{text-align:center;margin-bottom:0;background:#4e0637;position:sticky;top:0;padding:1rem;z-index:1}
nav img 				{margin:0 -2rem 2rem -2rem;width: calc(100% + 4rem)}
nav ul 					{list-style:none;display:flex;justify-content:center;margin:0}
nav li 					{padding:.5em}

nav a,
a.button				{display:inline-block;padding:.5em .75em;border:1px solid #cdbdc4;border-radius:.2em;transition:all .3s ease-in-out;color:#FFF;text-align:center;min-width:4ch}
nav a:has(i) 			{border:none}

nav a:hover,
a.button:hover			{border-color:white;color:#d5be92}

nav + img 				{display:block;margin:0 auto}

	#navigation		 		{display:none}

@media screen and (max-width:812px) {

	nav 					{position:relative}
	nav ul 					{flex-direction:column;align-items:stretch;display:none}
	nav li a 				{display:block;width:100%;text-align:center}

	#navigation		 		{display:block}
	#navigation:target 		{display:none}
	#navigation:target + ul {display:flex}

}



.warning 				{background:red;color:white;text-align:center;padding:1em 2em;font-size:1.5rem}
.warning.ok 			{background:green}

div.auth				{display:flex;width:100%;color:#FFF;background:green;padding:0;box-shadow:0 0 4em rgba(0,0,0,.5)}
div.auth a				{display:block;text-align:center;color:#FFF;padding:1rem;font-weight:bold;flex:1}
div.auth a::before		{content:"➜ "}

article 				{

	display:flex;
	flex-direction:column;
	width:100%;
	max-width:680px;
	min-height:50vh;
	margin:0 auto;
	padding:2em 2em 4em 2em;
	font-size:1rem;
	line-height:1.4;
	color:#FFF;

}

article h1 				{font-size:2.4rem;margin:0 0 .5rem 0}
article h2 				{font-size:1.5rem;margin:1em 0 .5rem 0}
article h3 				{font-size:1.2rem;margin:1em 0 .5rem 0}
article h4 				{font-size:1rem;margin:.75rem 0 0.5rem 0}

article small 			{font-size:66%;color: #FFFFFF99}

article p + p 			{margin-top:.25em}
article .welcome 		{margin:.75em 0}
article .welcome + ul li + li 	{margin:.25em 0 0 0}

article ul 				{margin-bottom:1em}
article ul.in			{margin-left:1.2em}
article li + li			{margin-top:.5em}

article .download 		{margin-top:.5em}
article .download em	{color:#cdbdc4}

article resume 			{line-height:1.5em}

@media screen and (max-width:640px) {

	article .download em {
		display: inline-block;
		width: 100%;
		margin-top: 1em
	}

}


article dl 	+	h4		,
article dt 	+	dt		{margin-top:1em}
article dd 				{padding-left:.33em;border-left:1px solid #cdbdc4;color:#cdbdc4;line-height:1.5;margin:.2em 0 1em .2em}

article hr 				{margin:2em 0;border:none;color:transparent;border-top:1px dotted #d5be92}

article dd li 			{padding:.1em 0;list-style:none}

article img 			{max-width:100%}
article img.slide 		{max-width:calc(100% + 400px);margin:2em -200px;box-shadow:0 0 1em rgba(0,0,0,.2)}
article img.slide.right {margin:2em 0;max-width:75ch}

@media screen and (max-width:1056px) {

	article img.slide {max-width:100%!important;margin:2em auto}

}


.form select,
.form textarea,
.form input[type=text],
.form input[type=email],
.form input[type=password] {
	box-sizing: border-box;
	width: 100%;
	padding: .65em .5em;
	margin: .25em 0 1em 0;
	font-size: 1.2rem;
	font-weight: bold;
	border: none;
	border-radius:.3em;
}

.form select:disabled,
.form textarea:disabled,
.form input[type=text]:disabled,
.form input[type=email]:disabled,
.form input[type=password]:disabled {
	background:rgba(255,255,255,0.2);
}

.form textarea {
	height: 10em;
	line-height: 1.5em;
}

.form input[type=radio],
.form input[type=checkbox] {
	position: relative;
	width: 1.2em;
	height: 1.2em;
	display: inline-block;
	margin-right: 2px;
	border: 1px solid ;
	border-radius: 3px;
	background: transparent;
	color: #fff;
	appearance: none;
}

.form input[type=radio]:checked,
.form input[type=checkbox]:checked {
	border-color: #22dd22;
	background: #22dd22;
}

.form button {
	border-radius:.3em;
}

.form span.right {
	display: flex;
	justify-content: flex-end;
}

.form label {
	margin: 0 0 .2rem 0;
}

.form label input[checked] + span {
	color:rgba(255,255,255,.5);
}

.form label:hover {
	color:#685065;
	cursor: pointer;
}

.form label + a {
	color:rgba(255,255,255,.5);
}

.form label + label {
	margin-top: .5em;
}

.form h4 + label {
	margin-top: 1.66em;
}

.form div.rgpd {
	cursor: not-allowed;
	color: rgba(255,255,255,0.4);
}

.form div.rgpd * {
	cursor: not-allowed;
}

.form div.rgpd label:hover {
	color: inherit;
	cursor: not-allowed;
}

.form div.rgpd .button,
.form div.rgpd button[disabled] {
	color: #999;
	background: #666;
	cursor: not-allowed;
}

.form div.rgpd input[type=email],
.form div.rgpd input[type=password],
.form div.rgpd input[type=text],
.form div.rgpd select,
.form div.rgpd textarea {
	background: #AAA;
	color: rgba(0,0,0,0.3);
}

.form .conclusion {
	display: flex;
	justify-content: space-between;
	gap: 1em;
}

.form p.cta 		{margin-top: 1em;display:flex;justify-content:space-between}
.form p.cta span	{flex:1;margin-right:2em}

.button {

	box-sizing: border-box;
	display:inline-block;

	width:auto;
	margin:0;

	text-align:center;
	line-height:1;
	padding:1rem 1.5rem;

	letter-spacing:1px;
	text-transform:uppercase;

	color:#FFF;
	background:transparent;

	border-radius:.3em;
	border:1px solid #FFF;
	cursor:pointer;

	transition:.3s all ease-in-out ;

}

.button:hover 					{background:#FFF;color:#685065}

.button.cool 					{background:#685065;color:#FFF}
.button.fail					{background:red;color:#FFF}
.button.saving					{background:#666;color:#888}
.button.valid					{background:green;color:#FFF}
.button.outline 				{background:none;color:rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.66)}
.button.outline:hover 			{color:#FFF;border:1px solid #FFF}
.button[value=remember] + label {color:#666}

.button.min {font-size:0.50rem}
.button.moy {font-size:0.75rem}
.button.moz {font-size:0.90rem}
.button.big {font-size:1.25rem}
.button.max {font-size:2.00rem}


@media screen and (max-width:800px) {

	.form p.cta		{flex-wrap:wrap;flex-direction:column}
	.form p.cta > *	{width: 100%;margin-top:1em;text-align:center;margin-right:0}

}

vcard					{display:none}

sponsors 				{display:block;width:100%;height:auto;background:#FFF;text-align:center}
sponsors h2				{display:block;width:100%;text-align:center;color:#999;margin:1em 0;padding:2em 0;font-size:1rem}
sponsors ul				{display:flex;align-items:center;list-style:none}
sponsors li				{width:100%}
sponsors img			{width:80%;max-width:280px;margin:0 auto}

@media screen and (max-width:640px) {

	sponsors ul			{flex-direction:column}
/*	sponsors li	+ li	{border-top:1px solid #EEE;border-right:none} /**/

}

footer 					{text-align:center;font-size:80%;color:#440f39}

footer figure			{padding:2rem}
footer figcaption 		{margin:.5em auto}
footer ul				{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;justify-content:center}
footer ul li 			{list-style:none;padding:1rem;font-size:2em}

footer .fa 				{transition:all .3s ease-in-out}
footer .fa:hover		{color:#666}

footer p.legal a 				{display:inline-block;transition:color .3s ease-in-out}
footer p.legal a:hover			{color:orange}
footer p.legal a + a::before 	{content:"|";color:rgba(255,255,255,.25);padding:0 .75em}



@media screen and (max-width:800px) {

	footer p.legal a {
		display: block;
		width: 100%;
		margin-top: 0;
		padding: 2em;
		line-height: 1.4;
	}

	footer p.legal a + a 			{border-top: 1px solid rgba(255,255,255,.25)}
	footer p.legal a + a::before 	{display:none}

}



#mentions {

	display:none;
	width:100%;
	max-width:626px;
	margin:0 auto;
	padding:2em 2em 4em 2em;
	font-size:1rem;
	line-height:1.5em;

}

#mentions:target {display:block}

#mentions h2 {margin:1.5em 0 .5em;color:orange}
#mentions h3 {margin:.5em 0 .25em}
#mentions h4 {margin:.3em 0 .1em}

div.program {

	margin:1rem 0;
	padding:2rem;
	border:1px solid #FFF;
	border-radius:3px;

}

div.program h4:not(:first-child) {

	margin-top:1.5rem;
	padding-top:1.5rem;
	border-top:1px solid #FFF3

}