/* Styles permettant de mettre en page l'admin SSO TM Club */
.toplevel_page_sso-tm-club img{
  width: -moz-available;
  margin: 0.2rem;
  padding-top: 0 !important;
}

.alert {
  padding: 15px;
    padding-right: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
  border-radius: 4px;
}

.alert-success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.alert-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}

.alert-warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}
.alert-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

.formulaire-connexion{
	border: 1px solid #fff;
	border-radius: 10px;
	padding: 1rem 0;
	margin-top: 1rem;
}

.formulaire-connexion div.wp-block-column{
  padding: 0 1rem;
}
.formulaire-connexion.md\:w-1\/2 {
  /* Ton style ici */
  padding: 1rem;
}

.btn.btn-primary {
    background-color: #0073aa; /* Couleur de fond */
    color: #ffffff; /* Couleur du texte */
    border: none; /* Pas de bordure */
    padding: 10px 20px; /* Espacement intérieur */
    text-align: center; /* Alignement du texte */
    text-decoration: none; /* Pas de soulignement */
    display: inline-block;
    font-size: 16px; /* Taille de la police */
    margin: 4px 2px; /* Marge extérieure */
    cursor: pointer; /* Curseur de souris */
    border-radius: 4px; /* Coins arrondis */
    transition-duration: 0.4s; /* Durée de la transition pour les effets de survol */
}

.btn.btn-primary:hover {
    background-color: #005177; /* Couleur de fond au survol */
    color: white; /* Couleur du texte au survol */
}

.wp-block-input {
    display: block;
    width: -moz-available;
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #ffffff;
    background-color: #000000;
    background-clip: padding-box;
    border: 1px solid rgba(151, 151, 151, 1);
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}


.wp-block-input:focus {
    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.gui-sso-title{
	font-weight:bold;
	font-size:larger;
}
#gui-sso-create-account, #gui-sso-forgot-password{
	display:none;
}

#pro-mapping{
    padding-top: 2rem;
}


#gui-sso-create-account a:link, #gui-sso-create-account a:visited, #gui-sso-forgot-password a:link, #gui-sso-forgot-password a:visited {
	color: #9f7d35 !important;
    text-decoration: underline;
}  
#tmclub .hover\:border-white {
  border: 1px solid transparent;
}
#tmclub .hover\:bg-transparent:hover {
  background-color: transparent !important;
}
#tmclub .hover\:border-white:hover {
  --tw-border-opacity: 1 !important;
  border-color: rgba(255,255,255,var(--tw-border-opacity)) !important;
  color: white !important;
  border: 1px solid white !important;
}
#tmclub input:not([type="checkbox"]){
	border-radius: .25rem;
	border-width: 1px;
	--tw-border-opacity: 1;
	border-color: rgba(151,151,151,var(--tw-border-opacity));
	--tw-bg-opacity: 1;
	background-color: rgba(0,0,0,var(--tw-bg-opacity));
	padding: .75rem 1.25rem;
	--tw-text-opacity: 1;
	color: rgba(255,255,255,var(--tw-text-opacity));
}
#tmclub input[type="checkbox"][type="checkbox"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: inline-block;
	height: .75rem;
	width: .75rem;
	border-radius: .125rem;
	border-width: 1px;
	--tw-border-opacity: 1;
	border-color: rgba(151,151,151,var(--tw-border-opacity));
	--tw-bg-opacity: 1;
	background-color: rgba(14,14,14,var(--tw-bg-opacity));
	padding: 0;
}
#tmclub input[type="checkbox"][type="checkbox"]:focus {
	outline: 2px solid transparent;
	outline-offset: 2px;
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent);
	--tw-ring-opacity: 1;
	--tw-ring-color: rgba(159,125,53,var(--tw-ring-opacity));
	--tw-ring-opacity: 0.4;
}
#tmclub input[type="checkbox"][type="checkbox"]:checked {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
	border-color: transparent;
	--tw-bg-opacity: 1;
	background-color: rgba(159,125,53,var(--tw-bg-opacity));
	position: initial;
}
#tmclub label {
  font-size: var(--global--font-size-xs);;
}

#tmclub h1,
#tmclub h2,
#tmclub h3.welcomepack {
  box-sizing: border-box;
  border: 0 solid rgb(229, 231, 235);
  font-family: din-2014, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
               Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-weight: 800;
  text-transform: uppercase;
  position: relative;
  tab-size: 4;
}


#tmclub h3.pro-mapping {
	font-family: din-2014, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.7px;
	line-height: 22px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 10px;
	tab-size: 4;
	text-transform: uppercase;
	font-style: inherit;
}

#tmclub h1 {
  color: rgb(159, 125, 53);
  font-size: 70px;
  font-weight: 800;
  line-height: 60px;
  margin: 0;
  padding-left: 12.5px;
  transform: matrix(1, 0, -0.212557, 1, 0, 0);
}

#tmclub h2 {
  display: inline-block;
  font-size: clamp(24px, 8vw, 70px);
  line-height: 1.1em;
  margin: 0;
  padding-left: 17.5px;
  text-align: left;
  transform: matrix(1, 0, -0.212557, 1, 0, 0);
}

@media (min-width: 768px) {
  .md\:mr-0 {
    margin-right: 0;
  }
}
.-mr-3 {
  margin-right: -.75rem;
}
@media (max-width: 1024px) {
  #tmclub h1 {
    font-size: 30px;
    line-height: 32px;
    text-transform: uppercase;
  }
  .language-switcher{
    float:right;
  }
  #tmclub h3.wallpaper  {
    margin-top: 0;
  }
}
@media (max-width: 768px) {
  .h1{
    margin-bottom:1rem;
  }
}
#tmclub h3 {
  color: rgba(0, 0, 0, var(--tw-text-opacity, 1));
  font-size: 30px;
  line-height: 22px;
  font-weight: bold;
}

#tmclub h3.wallpaper {
  --tw-skew-x: -12deg;
  transform: skewX(var(--tw-skew-x));
  font-weight: 800;
  color: rgba(159, 125, 53, var(--tw-text-opacity, 1));
}

#tmclub h3.welcomepack {
  color: rgb(159, 125, 53);
  font-size: 50px;
  line-height: 44px;
  margin-bottom: 24px;
}

h3.consignes{
  color:white !important;
}

.warning-creation{
  color: red;
  font-weight: bold;
  padding: 8px !important;
  margin: 1rem;
  background: white;
  border-radius: 10px;
}

.valid-creation{
  color: #9f7d35;
  font-weight: bold;
  padding: 8px !important;
  margin: 1rem;
  background: white;
  border-radius: 10px;
}

.block-creation #blocCaptcha{
	padding: 0 0 1rem 0;
}
/* Règle par défaut pour tous les liens dans #tmclub */
#tmclub a:link,
#tmclub a:visited {
  color: white !important;
}

/* Exception pour les liens de langue */
#tmclub .lang-item a:link,
#tmclub .lang-item a:visited {
  color: black !important;
}
@media (max-width: 1024px) {
  .menu-mobile{
    background: linear-gradient(to bottom, #000, #000, #000000b8, #0000);;
  }
}
/* Style spécifique pour les liens dans .tmclub-area */
#tmclub .tmclub-area li a:link {
  display: block;
  box-sizing: border-box;
  color: rgb(255, 255, 255); /* Pas besoin de !important ici si pas surchargé */
  font-family: din-2014, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
               Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  border-bottom: 3px solid transparent;
}

/* Hover avec surcharge pour contourner la règle globale */
#tmclub .tmclub-area li a:hover {
  color: rgb(253, 220, 111) !important;
  border-bottom-color: rgba(253, 220, 111) !important;
}

#tmclub .btn-create-account{
  margin-bottom:0.5rem;
}

#tmclub #original-captcha-container{
  display: flow-root;
}

#togglePassword, #createTogglePassword{
  position: relative;
  float: right;
  z-index: 1000;
}
#togglePassword svg, #createTogglePassword svg{
  width: 30px;
  position: relative;
  top: -45px;
  right: 5px;
  margin: 5px;
}
#createTogglePassword svg path {
  fill: white;
}
.password-wrapper{
  position: relative;
}


.responsive-image-container {
  position: relative;
  width: 100%; /* prend toute la largeur disponible */
  padding-top: 30rem; /* 2/3 de la largeur = ratio 3:2 */
  overflow: hidden;
}

.responsive-image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* ou 'contain' selon le rendu souhaité */
}
@media (min-width: 768px) {
  .responsive-image-container {
    display:none;
  }
  .pt-\[80vw\]{
      padding-top: 16rem;
  }
}

.hero{
  background-image: url(../img/hero-image.jpg); background-size: revert-layer;  
}
@media (min-width: 1536px) {
  .\32 xl\:py-\[12vw\] {
    padding-top: 14vw !important;
    padding-bottom: 14vw !important;
  }
}