/* Box-sizing universel */
*, *::before, *::after {
  box-sizing: border-box;
}


  /* ----------START body---------- */
  /* Styles globaux du body */
  body {
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 1rem; /* Taille par défaut pour tout le site */
	margin: 0;
	padding: 0;
	background-color: #111;
	color: #fff;
  }
  /* ----------END body---------- */
	

  /* ----------START header-------- */
  /* Header sticky avec flex centré */
  header {
	background-color: #222;
	padding: 0.25rem 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
  }
  /* ----------END header---------- */

  
   /* Menu burger caché sur bureau */
  label, #toggle
{
    display: none;
}

  /* Correction lors du pointage id */
  [id] {
    scroll-margin-top: 35px;
  }
 
  /* ----------START nav---------- */
  /* Animation d'apparition de la navigation principale */
  .main-nav {
	opacity: 0;
	transform: translateY(-20px);
	animation: slideDown 0.6s ease forwards;
	animation-delay: 0.3s;
	transform-origin: top center;
  }
  @keyframes slideDown {
	to {
	  opacity: 1;
	  transform: translateY(0);
	}
  }

  /* Navigation : liste en ligne sans puces */
  nav ul {
	list-style: none;
	display: flex;
	gap: 0;
	margin: 0;
	padding: 0;
  }

  /* Items de la nav : style général */
  nav ul li {
	padding: 0.75rem 1.0rem;
	position: relative;
	overflow: hidden;
	text-transform: uppercase;
	font-weight: 300;
	letter-spacing: 0.05em;
  }

  /* Séparateur vertical entre items sauf le dernier */
  nav ul li:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 1px;
	height: 100%;
	background-color: #000;
	opacity: 0.4;
  }

  /* Liens de navigation : style, transition et effet hover */
  nav ul li a {
	text-decoration: none;
	color: #fff;
	font-size: 1.1rem;
	display: block;
	position: relative;
	z-index: 1;
	transition: color 0.4s ease;
  }

  /* Soulignement animé sur hover */
  nav ul li a::before {
	content: "";
	position: absolute;
	bottom: -6px;
	left: 50%;
	width: 0;
	height: 1px;
	background-color: #7ab9d8;
	opacity: 0;
	transition: width 0.4s ease, left 0.4s ease, opacity 0.4s ease;
	z-index: 0;
  }

  nav ul li a:hover::before {
	width: 100%;
	left: 0;
	opacity: 1;
  }

  nav ul li a:hover {
	color: #7ab9d8;
  }
  /* ----------END nav---------- */
  
  
  /* ----------START hero---------- */
  /* Hero Section */
   
  /* Bannière hero */
  .hero {
  position: relative;
  background: url('images/studio-background-under-construction.jpg') center/cover no-repeat;
  height: 80vh;
  max-height: 375px;
  display: flex;
  flex-direction: column;     
  justify-content: flex-end;  
  align-items: flex-start;   
  padding: 2rem;
  text-align: left;
  overflow: hidden;
}

  /* Overlay noir qui disparaît */
  .hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: black;
	opacity: 1;
	animation: fadeOutBlack 2s ease forwards;
	pointer-events: none;
	z-index: 2;
  }

  @keyframes fadeOutBlack {
	to {
	  opacity: 0;
	}
  }

  /* Effet de lumière animé sur le hero */
  .hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 60%);
	background-repeat: no-repeat;
	background-size: 200% 200%;
	background-position: 0% 0%;
	mix-blend-mode: screen;
	opacity: 0.6;
	animation: lightSweep 8s ease-in-out infinite;
  }

  @keyframes lightSweep {
	0% { background-position: 0% 0%; }
	25% { background-position: 100% 0%; }
	50% { background-position: 100% 100%; }
	75% { background-position: 0% 100%; }
	100% { background-position: 0% 0%; }
  }
  

  /* Titre du hero avec fond semi-transparent */
  .hero h1 {
	font-size: 2.0rem;
	background-color: rgba(0, 0, 0, 0.8);
	padding: 1rem;
	position: relative;
	z-index: 3;
	/*margin-left: 0rem;   /* Décale vers la droite */
    margin-bottom: -0.0rem; /* Décale vers le haut (car il est aligné en bas du hero) */
    /* color: #7ab9d8; */
  }
  
   /* Animation slide-in à droite */
  @keyframes slideInFromRight {
	0% {
	  transform: translateX(100%);
	  opacity: 0;
	}
	100% {
	  transform: translateX(0);
	  opacity: 1;
	}
  }

  .slide-in {
	animation: slideInFromRight 1s ease-out forwards;
  }
  
  /* Logo Bannière hero */
  .hero-logo {
    width: 175px !important; /*old value 175px*/
    height: 175px; /*old value 175px*/
	/* width: 300px !important; */
    /* height: auto !important; */
    object-fit: contain;
    margin-bottom: 0rem;
    position: relative;
    z-index: 3;
	/* border: 2px solid red; /*Pour Debug*/
	animation: bounceUpDown 2s ease forwards;
	z-index: 3;	
}
  /* Animation rebond avec progression opacity */
@keyframes bounceUpDown {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  50% {
    opacity: 1;
    transform: translateY(-5px); /* monte moins haut */
  }
  75% {
    transform: translateY(3px); /* redescend un peu */
  }
  100% {
    transform: translateY(0); /* position normale */
  }
}

  /* ----------END hero---------- */
 

  /* ----------Start hero separator---------- */ 
  .hero-separator {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.15);
  filter: blur(3px);
  margin-top: -4px; /* pour légèrement superposer le hero */
}
  /* ----------END hero separator---------- */
  
  
  /* ----------START container---------- */
  /* Conteneur principal centré avec padding horizontal */
  .container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
  }
  
    h2, h4 {
	font-family: 'Bebas Neue', sans-serif;
    font-weight: 800; /* Bold */
    color: #7ab9d8;   /* Ta couleur choisie */
	text-shadow: 2px 2px 5px rgba(0,0,0,0.3); /*une ombre au texte*/
  }
  
  /* .sr-only { */
    /* position: absolute; */
    /* width: 1px; */
    /* height: 1px; */
    /* padding: 0; */
    /* margin: -1px; */
    /* overflow: hidden; */
    /* clip: rect(0, 0, 0, 0); */
    /* white-space: nowrap; */
    /* border: 0; */
/* } */


  /* ----------END container---------- */
  
  
  /* ----------START Section About---------- */
  .about {
	background-color: #1a1a1a;
	padding: 1rem 0;
  }

  .about .container {
	display: flex;
	align-items: flex-start;
	gap: 2rem;
	color: #eee;
  }

  .about .text {
	flex: 1;
	max-width: 900px;
	font-weight: 300;
	line-height: 1.6;
  }

  .about .text h2 {
	margin-top: 0;
	font-weight: 400;
	font-size: 2em;
	color: #7ab9d8;
	/* border: 2px solid red; /*Pour Debug*/ */
  }

  .about .text p {
	margin-bottom: 1rem;
  }

  .about .photo {
	flex: 1;
	max-width: 400px;
  }

  .about .photo img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 0;
	box-shadow:
	  0 4px 12px rgba(255, 255, 255, 0.15),
	  0 8px 24px rgba(255, 255, 255, 0.1);
	transition: transform 0.5s ease, box-shadow 0.5s ease, filter 0.5s ease;
	margin-top: 3rem;
  }

  .about .photo img:hover {
	transform: scale(1.03);
	box-shadow:
	  0 6px 20px rgba(0, 0, 0, 0.3),
	  0 12px 30px rgba(0, 0, 0, 0.2);
	filter: brightness(1.05) contrast(1.05);
  }
  
  /* ----------End Section About---------- */

  /* ----------START Section Portfolio---------- */
  .portfolio {
	background-color: #111;
	padding: 1rem 0;
  }

  .portfolio .container {
	display: flex;
	align-items: flex-start;
	gap: 2rem;
	color: #eee;
  }

  .portfolio .text {
	flex: 1;
	max-width: 560px;
	font-weight: 300;
	line-height: 1.6;
  }

  .portfolio .text h2 {
	margin-top: 0;
	font-weight: 400;
	font-size: 2rem;
	color: #7ab9d8;
	/* border: 2px solid red; /*Pour Debug*/ */
  }

  .portfolio .text p {
	margin-bottom: 1rem;
  }  

  /* ----------START CSS Lecteur Audio----------*/
    .player-container.compact {
    max-width: 600px;
    margin: auto;
    padding: 10px;
    /*font-family: 'Open Sans', Arial, sans-serif;*//*pb lecteur qui se balade avec Open Sans*/ 
    font-family: Arial, sans-serif;  
    font-size: 14px;

  }

  .player-box {
    border: 1px solid #444;
    border-radius: 6px;
    padding: 6px;
    /*background: #1A1A1A;*/ /*old f9f9f9*/
	background-color: rgba(26, 26, 26, 1);
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  #cover-image {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #444;
  }

  audio {
    flex-grow: 1;
    height: 36px;
  }

	.comparison-table-wrapper {
	  max-height: 270px;
	  overflow-y: auto;
	  border-radius: 8px;
	  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	  border: 1px solid #333;
	}

	.comparison-table {
	  width: 100%;
	  border-collapse: collapse;
	  font-size: 13px;
	  background-color: #1a1a1a;
	}

	.comparison-table th {
	  position: sticky;
	  top: 0;
	  background: #262626;
	  text-align: center;
	  padding: 10px;
	  font-weight: 600;
	  color: #f0f0f0;
	  border-bottom: 2px solid #444;
	  z-index: 2;
	}

	/* Arrondi seulement si on est tout en haut */
	.comparison-table-wrapper:not(:has(tbody tr:first-child:hover)) .comparison-table th:first-child {
	  border-top-left-radius: 8px;
	}

	.comparison-table-wrapper:not(:has(tbody tr:first-child:hover)) .comparison-table th:last-child {
	  border-top-right-radius: 8px;
	}

	.comparison-table td {
	  padding: 6px;
	  text-align: center;
	  vertical-align: middle;
	  background: #1a1a1a;
	  border-top: 1px solid #2a2a2a;
	  
	}


  .track {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    background-color: #111111;
    color: #7ab9d8;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  }
  
  /* Surbrillance unique bleue comme titre 1 */
  .track:hover {
    background-color: #7ab9d8;
    border-color: #7ab9d8;
    color: #F9F9F9;
  }

  .comparison-table-wrapper::-webkit-scrollbar {
    width: 6px;
  }

  .comparison-table-wrapper::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.2);
    border-radius: 3px;
  }

  .comparison-table-wrapper::-webkit-scrollbar-track {
    background-color: transparent;
  }
  

  /* Couleur de la barre de progression du lecteur */
  :root {
    --plyr-color-main: #7ab9d8; /* Par défaut: bleu (mixée) #2196f3 */
  }

  .nonmix-active {
    --plyr-color-main: #888888; /* Gris pour non mixée */
  }

  .copyright {
    font-size: 11px;
    text-align: center;
    margin-top: 10px;
    color: #888;
  } 
  
  /* Permissions d'usage à afficher */

  details {
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 10px;
    user-select: none;
	cursor: pointer;
	border-radius: 4px;
  }
 
  /* ----------END CSS Lecteur Audio----------*/  
  /* ----------END Section Portfolio---------- */
  
  
   /* ----------START Section Services---------- */ 
  .services {
	background-color: #1a1a1a;
	padding: 1rem 0;
  }

  .services .container {
	display: flex;
	align-items: flex-start;
	gap: 2rem;
	color: #eee;
  }

  .services .text {
	flex: 1;
	max-width: 560px;
	font-weight: 300;
	line-height: 1.6;
  }

  .services .text h2 {
	margin-top: 0;
	font-weight: 400;
	font-size: 2rem;
	color: #7ab9d8;
	/* border: 2px solid red; /*Pour Debug*/ */
  }
    .services .text h4 {
	font-weight: 400;
	font-size: 1.3rem;
	color: #7ab9d8;
	margin-bottom: 0.75rem;
	margin-top: 0;
	/* border: 2px solid red; /*Pour Debug*/ */
  }

  .services .text p {
	margin-bottom: 1rem;
  }

  .services .photo {
	flex: 1;
	max-width: 350px;
	margin-left: 0px;
	margin-top: 3rem;
  }

  .services .photo img {
	width: 100%;
	height: auto;
	border-radius: 1px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	transform-origin: center;
  }

  .services .photo img:hover {
	transform: scale(1.05) rotate(1.5deg);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  }

   /* ----------END Section Services---------- */ 
   
   /* ----------START Section Contact---------- */
   
  .contact {
	background-color: #111;
	padding: 1rem 0;
  }

  .contact .container {
	display: flex;
	align-items: flex-start;
	gap: 2rem;
	color: #eee;
  }

  .contact .text {
	flex: 1;
	max-width: 560px;
	font-weight: 300;
	line-height: 1.6;
  }

  .contact .text h2 {
	margin-top: 0;
	font-weight: 400;
	font-size: 2rem;
	color: #7ab9d8;
	/* border: 2px solid red; /*Pour Debug*/ */
  }

  .contact .text p {
	margin-bottom: 1rem;
  }

  .contact .photo {
	flex: 1;
	max-width: 400px;
  }

.contact .photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  filter: grayscale(100%);
  transition: filter 0.4s ease, transform 0.4s ease;
  margin-top: 3rem;
}

.contact .photo img:hover {
  filter: grayscale(0%);
  transform: scale(1.03);
}      
  /* ----------END Section Contact---------- */  
   
  /* ----------START Section Guides---------- */    
  .guides {
	background-color: #1a1a1a;
	padding: 1rem 0;
  }

  .guides .container {
	display: flex;
	align-items: flex-start;
	gap: 2rem;
	color: #eee;
  }

  .guides .text {
	flex: 1;
	max-width: 560px;
	font-weight: 300;
	line-height: 1.6;
  }

  .guides .text h2 {
	margin-top: 0;
	font-weight: 400;
	font-size: 2rem;
	color: #7ab9d8;
	/* border: 2px solid red; /*Pour Debug*/ */
  }
    .guides .text h4 {
	font-weight: 400;
	font-size: 1.3rem;
	color: #7ab9d8;
	margin-bottom: 0.75rem;
	margin-top: 0;
	/* border: 2px solid red; /*Pour Debug*/ */
  }

  .guides .text p {
	margin-bottom: 1rem;
  }

  .guides .photo {
	flex: 1;
	max-width: 300px;
	margin-left: 0px;
	margin-top: 3rem;
  }

  .guides .photo img {
	width: 100%;
	height: auto;
	border-radius: 1px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	transform-origin: center;
  }

  .guides .photo img:hover {
	transform: scale(1.05) rotate(1.5deg);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  }  
  
  
  /* ----------END Section Guides---------- */    

  /* ----------START RESPONSIVE max-width 650px---------- */ /* old value 768px */
@media (max-width: 650px) {
	
  /* Correction lors du pointage id */
  [id] {
    scroll-margin-top: -10px;
  }
	
  /* Cache le menu déployé RESPONSIVE  */
    nav
    {
        height: 60px;
		display: none;
    }	
	
  /* ----------START hero RESPONSIVE---------- */
  /* Bannière RESPONSIVE */
  .hero {
    height: 30vh;
    padding: 1rem;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  
  /* Logo hero RESPONSIVE */
  .hero-logo {
    width: 150px; /*old value 100px*/
    height: 100px; /*old value 100px*/
    object-fit: contain;
    margin-bottom: 0.25rem;
    position: relative;
    z-index: 3;
}
  
  /* Texte sur Bannière RESPONSIVE */
  .hero h1 {
	top: 00px;
    font-size: 1rem;
    padding: 0.5rem 1rem;
  }
  /* ----------END hero RESPONSIVE---------- */
  
  
  /* ----------START menu RESPONSIVE---------- */
  label {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1001;
  font-size: 1.5rem;
  color: white;
  cursor: pointer;
  display: flex;
}
  
  .mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  height: 40vh;
  /*height: auto;*/ /*à tester*/
  /*max-height: 100vh;*/ /*à tester*/
  width: 55%;
  max-width: 230px;
  /*background-color: #48435C;*/
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
  z-index: 150;
  display: flex;
  justify-content: center;
  align-items: start;
  padding-top: 1rem;
}

  /* Afficher menu si toggle est activé */
  #toggle:checked + label + .mobile-menu {
    transform: translateX(0);
  }

  /* Quand le menu est ouvert (toggle cochée), changer le symbole */
  #toggle:checked + .menu-toggle::before {
    content: "✖"; /* ou "×", ou tout autre caractère */
  }

  /* Remplacer le caractère de base (☰) par CSS aussi pour plus de contrôle */
  .menu-toggle::before {
    content: "☰";
  }

  /* Supprime le contenu HTML du label (☰) qui est désormais géré par ::before */
  .menu-toggle {
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
  }
  .menu-toggle::before {
    display: inline-block;
    transition: content 0.3s ease;
  }
  /* ----------END menu RESPONSIVE---------- */


  /* ----------START nav RESPONSIVE---------- */
.main-nav {
  display: flex;
  flex-direction: column;
}

nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  background-color: rgba(0, 0, 0, 0.8);
}

nav ul li {
  padding: 0.4rem 1rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  font-weight: 300;
  letter-spacing: 0.05em;
}

nav ul li a {
  text-decoration: none;
  color: #fff;
  font-size: 0.9rem;
  display: block;
  position: relative;
  z-index: 1;
  transition: color 0.4s ease;
}

nav ul li a::before {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 0;
  height: 1px;
  background-color: #7ab9d8;
  opacity: 0;
  transition: width 0.4s ease, left 0.4s ease, opacity 0.4s ease;
  z-index: 0;
}

nav ul li a:hover::before {
  width: 100%;
  left: 0;
  opacity: 1;
}

nav ul li a:hover {
  color: #7ab9d8;
}
  /* ----------END nav RESPONSIVE---------- */
  
  /* ----------START section RESPONSIVE---------- */

  .section {
    margin-top: -2.0em;
  }
  
  /* ----------END section RESPONSIVE---------- */   
 
  /* ----------START container RESPONSIVE---------- */ 

	.about .text h2,
	.portfolio .text h2,
	.services .text h2,
	.contact .text h2,
	.guides .text h2 {
	 text-align: center;
	}
	
	h4 {
	padding-top: 0.75rem;
	}
	
    /* .sr-only { */
      /* position: absolute; */
      /* width: 1px; */
      /* height: 1px; */
      /* padding: 0; */
      /* margin: -1px; */
      /* overflow: hidden; */
      /* clip: rect(0, 0, 0, 0); */
      /* white-space: nowrap; */
      /* border: 0; */
    /* }     */
	
  /* ----------END container RESPONSIVE---------- */ 

  /* ----------START about RESPONSIVE---------- */   
  .about .container {
    flex-direction: column;
  }
  
  .about .photo img {
    max-width: 100%;
    height: auto;
	margin-left: 0px;
	margin-top: -2.0em; /* fait remonter l'image vers le texte*/
	margin-left: 0.0rem;
  }
    
  /* ----------END about RESPONSIVE---------- */  

  /* ----------START services RESPONSIVE---------- */    
  
  .services .container {
	display: flex;
	align-items: flex-start;
	gap: 0rem;
	flex-direction: column;
  }
    
  .services .photo img {
	display: none;
    max-width: 100%;
    height: auto;
	margin-left: 0px;
	margin-top: -5.0em; /* fait remonter l'image vers le texte*/
	margin-left: 0.5rem;
  }

	/* Effet flou sur texte pour container services mixage*/
	.services .mixage {
	  position: relative;
	  overflow: hidden;
	  color: white;
	  z-index: 1;
	}

	.services .mixage::before {
	  content: "";
	  position: absolute;
	  top: 0; left: 0;
	  width: 100%;
	  height: 100%;
	  background: url('images/mixing.png') center/cover no-repeat;
	  filter: blur(6px) brightness(0.4);
	  z-index: -1;
	  transform: scale(1.1);
	}

	.services .mixage .content {
	  background-color: rgba(0, 0, 0, 0.4); 
	  padding: 1rem;
	  border-radius: 8px;
	}

	/* Effet flou sur texte pour container services edition*/
	.services .edition {
	  position: relative;
	  overflow: hidden;
	  color: white;
	  z-index: 1;
	}

	.services .edition::before {
	  content: "";
	  position: absolute;
	  top: 0; left: 0;
	  width: 100%;
	  height: 100%;
	  background: url('images/editing.png') center/cover no-repeat;
	  filter: blur(6px) brightness(0.4);
	  z-index: -1;
	  transform: scale(1.1);
	}

	.services .edition .content {
	  background-color: rgba(0, 0, 0, 0.4); 
	  padding: 1rem;
	  border-radius: 8px;
	}

	/* Effet flou sur texte pour container services production*/
	.services .production {
	  position: relative;
	  overflow: hidden;
	  color: white;
	  z-index: 1;
	}

	.services .production::before {
	  content: "";
	  position: absolute;
	  top: 0; left: 0;
	  width: 100%;
	  height: 100%;
	  background: url('images/postproduction.png') center/cover no-repeat;
	  filter: blur(6px) brightness(0.4);
	  z-index: -1;
	  transform: scale(1.1);
	}

	.services .production .content {
	  background-color: rgba(0, 0, 0, 0.4); 
	  padding: 1rem;
	  border-radius: 8px;
	} 
  
  /*services separation*/
  .services-separator {
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.15);
  filter: blur(10px);
} 
    
  /* ----------END services RESPONSIVE---------- */  

  /* ----------START contact RESPONSIVE---------- */ 
 
   .contact .container {
    flex-direction: column;
  }  
   .contact .photo img {
    max-width: 100%;
    height: auto;
	margin-left: 0px;
	margin-top: -2.0em; /* fait remonter l'image vers le texte*/
	margin-left: 0.0rem;
  }   
  /* ----------END contact RESPONSIVE---------- */ 
  
  /* ----------START guides RESPONSIVE---------- */  
  .guides .container {
	display: flex;
	align-items: flex-start;
	gap: 0rem;
	flex-direction: column;
  }
    
  .guides .photo img {
	display: none;
    max-width: 100%;
    height: auto;
	margin-left: 0px;
	margin-top: -5.0em; /* fait remonter l'image vers le texte*/
	margin-left: 0.5rem;
  }  
  
	/* Effet flou sur texte pour container guides enregistrement*/
	.guides .enregistrement {
	  position: relative;
	  overflow: hidden;
	  color: white;
	  z-index: 1;
	}

	.guides .enregistrement::before {
	  content: "";
	  position: absolute;
	  top: 0; left: 0;
	  width: 100%;
	  height: 100%;
	  background: url('images/guides.png') center/cover no-repeat;
	  filter: blur(6px) brightness(0.4);
	  z-index: -1;
	  transform: scale(1.1);
	}

	.guides .enregistrement .content {
	  background-color: rgba(0, 0, 0, 0.4); 
	  padding: 1rem;
	  border-radius: 8px;
	}   
  

  /* ----------END guides RESPONSIVE---------- */  
  /* ----------END RESPONSIVE max-width 650px---------- */
}  
  
  
  /* ----------START RESPONSIVE min-width 651px mobile paysage/tablettes---------- */
  @media only screen and (min-width: 651px) {
	  
  /* Bannière RESPONSIVE min-width: 651px*/
  .hero {
    height: 100vh;
    padding: 1rem;
    justify-content: center;
    align-items: left;
    text-align: left;
  }
  
  /* Logo hero RESPONSIVE min-width: 651px*/
  .hero-logo {
    width: 150px;
    height: 150px;
    object-fit: contain;
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 3;
}
  
  /* Texte sur Bannière RESPONSIVE min-width: 651px*/
  .hero h1 {
	top: 00px;
    font-size: 2rem;
    padding: 0.5rem 1rem;
  }

  /* ----------START container RESPONSIVE min-width: 651px---------- */ 
  /* ----------END container RESPONSIVE min-width: 651px---------- */    

  
}

  /* ----------END RESPONSIVE min-width 651px mobile paysage/tablettes---------- */