@charset "utf-8"; 

body 
{ 
font-family: Arial, sans-serif, Helvetica, Verdana;
line-height: 25px;
font-size: 20px;
color: white;
text-align: center;
}

.degrade{
background-image:-moz-linear-gradient(100deg, black, #FF771C);
background-image:-webkit-linear-gradient(100deg,  black, #FF771C);
background-image:-o-linear-gradient(100deg, black, #FF771C);
background-image:linear-gradient(100deg, black, #FF771C);
}  

header {
height: 100px;
}

.centrage1
{
position: absolute;
top: 10px;
right: 20%;
left: 20%;
}

.centrage2
{
position: absolute;
top: 10px;
right: 10%;
left: 10%;
}

.title 
{
text-align: center;
top: 20px;
color: white;
font-style: normal;
line-height: 100px;
font-style: italic;
font-size: clamp(2rem, 2vw, 2.5rem);
text-transform: uppercase;
text-align: center;
letter-spacing: 0.2em;
text-shadow: 0 0 10px rgba(255, 255, 51, 0.8),
    0 0 20px rgba(255, 255, 51, 0.6), 0 0 30px rgba(255, 255, 255, 0.4),
    0 0 40px rgba(255, 182, 51, 0.3);
opacity: 0.92;
animation: glow 0.5s ease-in-out infinite alternate;
padding-left: 0.5em;
}

@keyframes glow {
  from {
    text-shadow: 0 0 10px rgba(255, 255, 51, 0.8),
      0 0 20px rgba(255, 255, 51, 0.6), 0 0 30px rgba(255, 255, 255, 0.4),
      0 0 40px rgba(255, 182, 51, 0.3);
  }
  to {
    text-shadow: 0 0 30px rgba(255, 255, 51, 0.9),
      0 0 30px rgba(255, 255, 51, 0.7), 0 0 40px rgba(255, 255, 255, 0.5),
      0 0 50px rgba(255, 182, 51, 0.4), 0 0 60px rgba(255, 182, 255, 0.3);
  }
}

h2 {
background-color : yellow;
text-align: center;
color: black;
line-height: 40px;
margin-top: 20px;
}

.mark
{
background-color : yellow;
color: black;
text-align: center;
}

a.lien1
{
color: black;
text-decoration: none; 
}

a:visited.lien1
{
color: black;
text-decoration: none; 
}

a:hover.lien1
{
color: red;
text-decoration: none; 
}

a.lien2
{
color: white;
text-decoration: none; 
}

a:visited.lien2
{
color: white;
text-decoration: none; 
}

a:hover
{
color: red;
text-decoration: none; 
}

section {
zoom: 0.9;
display: flex;
flex-wrap: wrap;
text-align: center;
}

article {
margin: 10px;
flex: 1;
}

.Justify
{
text-align: justify;
}

.italic
{
font-style: italic;
text-align: left;
}

.juxt
{
padding: 10px;
}

IMG  /* Ombrage sur les images y compris détourées*/
{ 
-webkit-filter: drop-shadow: 6px 6px 6px black; 
filter: drop-shadow(6px 6px 6px black);
border:none; 
}

video
{
	border-radius:12px;
	box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.65), inset 1px 1px 0px 0px rgba(0, 0, 0, 0.85);	  /* Ombrage sur les images */
	-moz-box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.65), inset 1px 1px 0px 0px rgba(0, 0, 0, 0.85);
	-webkit-box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.65), inset 1px 1px 0px 0px rgba(0, 0, 0, 0.85);
	-o-box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.65), inset 1px 1px 0px 0px rgba(0, 0, 0, 0.85);
}

pied {
height: 200px;
}

@media (max-width:1399px)

{
header {
height: 70px;
}

.centrage1
{
right:10%;
left: 10%;
}

.centrage2
{
right: 5%;
left: 5%;
}

.title {
line-height: 70px;
font-size :25px;
}

h2 {
line-height: 30px;
font-size :25px;
}

section {
zoom: 0.8;
}

pied {
height: 150px;
font-size :15px;
}


@media (max-width:800px)
 
{
header {
height: 50px;
}

.centrage1
{
right:1%;
left: 1%;
}

.centrage2
{
right: 1%;
left: 1%;
}

.title {
line-height: 30px;
font-size :20px;
}

h2 {
line-height: 20px;
font-size :18px;
}

section {
zoom: 0.6;
flex-direction: column; /* Vaut display : flow */
}

.solu2 {
order : -1 /* Pour faire passer le gonflage en premier*/
}

pied {
height: 100px;
font-size :12px;
}