@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: 'Share Tech Mono';
    src: url('fonts/ShareTechMono-Regular.woff2') format('woff2'),
        url('fonts/ShareTechMono-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


#ouverture{
    position: fixed;
    left:0;
    top:0;
    right:0;
    bottom:0;
    z-index:4;
    display:block;
    transform:scale(1);
	background: url(../img/anm-monde.webp) no-repeat center center / cover;
}
@media screen and (max-width: 880px){
	#ouverture{
		background:url(../img/anm-monde.webp) no-repeat center center / cover;
	}
}
#porte{
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    z-index:3;
    /*background:url(../img/anm-porte.webp) no-repeat center center / cover;*/
}
#intro {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("../img/anm-intro.webp") no-repeat center center;
    left:0;
    top:0;
    right:0;
    bottom:0;
    z-index:2;
	opacity:0;
}

#monde {
  position: absolute;  /* Positionné derrière le contenu */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; /* Cache tout débordement */
  z-index: 0;  /* Place la vidéo derrière le reste du contenu */
}

/* Styles pour l'élément vidéo */
#monde video {
  object-fit: cover;  /* La vidéo couvre tout l'écran sans déformation */
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centre la vidéo dans le conteneur */
}
.active-ouv
.anim-ouv{
	animation: monde 4s ease-in-out forwards; 
}

.anim-disp{
	animation: disparition 1s linear forwards; 
}

#porte-gch{
	width:40%;
	position: absolute;
	z-index: 3;
	top:0;
	bottom:0;
	left:0;
	background: url("../img/porte-gch.webp") no-repeat right 50px / auto 100%;
	transform:scale(1);
}
#porte-drt{
	width:40%;
	position: absolute;
	z-index: 3;
	top:0;
	bottom:0;
	right:0;
	background: url("../img/porte-drt.webp") no-repeat left 50px / auto 100%;
}

@keyframes porte{
    0%{
        transform:scale(1);
		width:40%;
    }
    100%{
        transform:scale(1.4);
		width:0%;
    }
}
@keyframes intro{
    0%{
		opacity:0;
    }
    100%{
		opacity:1;
    }
}
@keyframes disparition{
    0%{
		opacity:1;
    }
    100%{
		opacity:0;
    }
}
.anim-ouv #porte-gch,
.anim-ouv #porte-drt{
	animation: porte 4s ease-in forwards;
}
.anim-ouv #intro{
	animation: intro 1s ease-in forwards; 
}





#accueil{
	width:100%;
	float:left;
	background-color:#000;
	padding: 15px 25px 75px 15px;
	box-sizing: border-box;
	position: relative;
	
}
.fond-accueil{
	background: url(../img/fond-accueil.png) no-repeat center center / cover;
}

/* Styles pour le conteneur de la vidéo */
#video {
  position: absolute;  /* Positionné derrière le contenu */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; /* Cache tout débordement */
  z-index: 0;  /* Place la vidéo derrière le reste du contenu */
}

/* Styles pour l'élément vidéo */
#video video {
  object-fit: cover;  /* La vidéo couvre tout l'écran sans déformation */
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centre la vidéo dans le conteneur */
}

#cnt-acc{
	position: relative;
	z-index: 1;
}
#ttr-acc {
    margin-top: 320px;
}
@media screen and (max-width: 880px){
	#ttr-acc {
		margin-top: 220px;
	}	
}
@media screen and (max-width: 480px){
	#ttr-acc {
		word-break: break-all;
	}	
}
#ssttr-acc {
    font-size: 24px;
    text-align: center;
    margin-top: 25px;
    color: #FFF;
    text-transform: uppercase;
    letter-spacing: 10px;
}
@media screen and (max-width: 1280px){
	#ssttr-acc {
		font-size: 20px;
		letter-spacing: 6px;
	}	
}
@media screen and (max-width: 880px){
	#ssttr-acc {
		font-size: 16px;
		letter-spacing: 4px;
		max-width: 390px;
		margin: 25px auto 0;
		line-height: 26px;
	}	
}


	/* TABLEAU */
	#tableau{
		width:100%;
		color:#FFF;
		max-width:1315px;
		margin: 0 auto;
		padding: 0 15px 0 15px;
		box-sizing: border-box;
		z-index: 1;
		position: relative;
	}
	/* Au dessus de 880px, .lgn-track n'a aucun effet de mise en page
	   (display:contents) : les .lgn restent des enfants directs de
	   #tableau, exactement comme avant l'ajout du wrapper. Le bloc mobile
	   qui redéfinit tout ceci se trouve en fin de feuille de style (voir
	   note "IMPORTANT : ORDRE DE CASCADE" plus bas) pour être sûr de
	   passer après les règles génériques .pour/.duree/.remarque etc. */
	.lgn-track{
		display: contents;
	}
	.lgn-dots{
		display: none;
	}

	#ttr-tab{
		width:100%;
		margin-top:180px;
		font-size:34px;
		text-align:center;
		letter-spacing: 10px;
		text-transform:uppercase;
		font-family: 'Share Tech Mono';
		color:#FFF;
		padding-bottom:37px;
	}
	@media screen and (max-width: 1280px){
		#ttr-tab{
			margin-top:40px;
		}	
	}
	@media screen and (max-width: 1180px){
		#ttr-tab{
			margin-top:70px;
		}	
	}

	/* --- ligne en flexbox nowrap : ne se casse jamais tant que #tableau est affiché (>880px) --- */
	.lgn{
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		width: 100%;
		gap: 10px;
		border-top: 1px solid #FFF;
	}

	.pour,
	.duree, 
	.porte, 
	.remarque{
		font-size:27px;
		text-transform:uppercase;
		font-family: 'Share Tech Mono';
		color:#FFF;
		padding:17px 10px;
		box-sizing: border-box;
		white-space: nowrap;
		overflow: hidden;
	}
	@media screen and (max-width: 1280px){
		.pour,
		.duree, 
		.porte, 
		.remarque{
		font-size:20px;
		}	
	}
	@media screen and (max-width: 1080px){
		.pour,
		.duree, 
		.porte, 
		.remarque{
		font-size:18px;
		}	
	}
	@media screen and (max-width: 980px){
		.pour,
		.duree, 
		.porte, 
		.remarque{
		font-size:16px;
		}	
	}

	/* .pour prend l'espace restant et tronque proprement si le nom est trop long
	   plutôt que de pousser les colonnes suivantes hors ligne */
	.pour{
		flex: 1 1 auto;
		min-width: 0;
		text-overflow: ellipsis;
	}

	/* colonnes à largeur fixe, ne rétrécissent jamais (flex-shrink:0)
	   pour ne jamais se déformer, quelle que soit la largeur de #tableau */
	.duree,
	.porte{
		flex: 0 0 120px;
		width: 120px;
	}
	@media screen and (max-width: 1080px){
		.duree, 
		.porte{
			flex-basis: 80px;
			width: 80px;
		}	
	}

	.remarque{
		flex: 0 0 220px;
		width: 220px;
		display: flex;
		flex-direction: column;
		gap: 1px;
	}
	@media screen and (max-width: 1280px){
		.remarque{ flex-basis: 215px; width: 215px; }	
	}
	@media screen and (max-width: 1180px){
		.remarque{ flex-basis: 180px; width: 180px; }	
	}
	@media screen and (max-width: 1080px){
		.remarque{ flex-basis: 155px; width: 155px; }	
	}

	.rem-1,
	.rem-2{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.rem-1{
		display: block;
	}
	.rem-2{
		display: none;
	}
	/* basculement piloté par JS (voir script), déclenché uniquement
	   au survol/focus du bouton "Découvrir", pas de toute la ligne */
	.lgn.remarque-swap .rem-1{
		display: none;
	}
	.lgn.remarque-swap .rem-2{
		display: block;
	}

	/* bouton toujours visible, plus de hover pour le révéler */
	.btn-tab{
		flex: 0 0 220px;
		width: 220px;
		text-align: center;
	}
	@media screen and (max-width: 1080px){
		.btn-tab {
			flex-basis: 190px;
			width: 190px;
		}		
	}
	.btn-tab a{
		display: inline-block;
		width: 200px;
		padding: 16px 0 10px 0;
		line-height: 15px;
		box-sizing: border-box;
		border: 3px solid #CDA349;
		color: #FFF;
		font-family: 'Josefin Sans Bold', sans-serif;
		font-size: 17px;
		text-transform: uppercase;
		text-align: center;
		letter-spacing: 2px;
		text-decoration: none;
	}
	@media screen and (max-width: 1280px){
		.btn-tab a {
			width: 190px;
			padding: 12px 0 7px 0;
		}		
	}
	@media screen and (max-width: 1080px){
		.btn-tab a {
			width: 190px;
			padding: 10px 0 7px 0;
			font-size:16px;
		}	
	}
	@media screen and (max-width: 980px){
		.btn-tab a {
			width: 190px;
			padding: 9px 0 6px 0;
			font-size:16px;
		}		
	}
	.btn-tab a:hover{
		background-color:#CDA349;
	}
	/* FIN TABLEAU */

	.flip-char{
		display:inline-block;
	}

	/* ==========================================================
	   IMPORTANT : ORDRE DE CASCADE
	   Ce bloc doit rester le DERNIER du fichier. Les règles génériques
	   .pour/.duree/.porte/.remarque/.btn-tab plus haut ne sont pas
	   scopées par une media query ; à spécificité égale, en CSS c'est
	   la règle la plus BASSE dans le fichier qui gagne, peu importe
	   qu'elle soit dans un @media ou non. Si ce bloc est déplacé plus
	   haut, le tableau desktop reprend le dessus sous 880px et le
	   slider casse silencieusement (troncature, largeurs fixes, etc.)
	   ========================================================== */
	@media screen and (max-width: 880px){
		#tableau {
			padding: 0;
			margin-top: 20px;
			overflow: hidden;
			max-width: 500px;
		}

		/* les libellés de colonnes n'ont aucune utilité en mode slider
		   (un seul encart affiché à la fois, avec ses propres libellés
		   ::before) : la ligne d'en-tête est entièrement désactivée. */

		#ttr-tab{
			letter-spacing: 5px;
		}

		/* le wrapper devient la piste défilante en scroll-snap : le swipe
		   tactile est natif, pas besoin de réinventer le drag en JS */
		.lgn-track{
			display: flex;
			flex-wrap: nowrap;
			overflow-x: auto;
			scroll-snap-type: x mandatory;
			-webkit-overflow-scrolling: touch;
			scrollbar-width: none;
			padding: 0 12px;
			margin-left:5px;
		}
		.lgn-track::-webkit-scrollbar{
			display: none;
		}

		.lgn{
			flex: 0 0 100%;
			width: 100%;
			max-width: 100%;
			box-sizing: border-box;
			scroll-snap-align: start;
			display: flex;
			flex-direction: column;
			align-items: stretch;
			flex-wrap: nowrap;
			border: 1px solid #FFF;
			padding: 12px 14px;
			gap: 1px;
			margin-right: 5px;
		}
		
		.lgn-header{
			display: none;
		}

		.pour,
		.duree,
		.porte,
		.remarque,
		.btn-tab{
			flex: none;
			width: 100%;
			padding: 0;
			white-space: normal;
			overflow: visible;
			text-overflow: clip;
			font-size: inherit;
		}

		.pour{
			font-size: 17px;
			letter-spacing: .5px;
			line-height: 1.25;
			min-height:45px;
		}

		.duree,
		.porte{
			font-size: 12px;
			display: flex;
			gap: 1px;
		}
		.duree::before{ content: "Durée :"; color:#CDA349; }
		.porte::before{ content: "Porte :"; color:#CDA349; }

		.remarque{
			flex-direction: row;
			flex-wrap: wrap;
			gap: 2px 18px;
		}
		/* Pas de survol sur mobile/tactile : on affiche les deux remarques
		   en permanence plutôt que de dépendre d'un hover impossible. */
		.rem-1, .rem-2{
			display: flex !important;
			gap: 1px;
			font-size: 11px;
			white-space: normal;
			overflow: visible;
			text-overflow: clip;
		}
		.rem-1::before{ content: "Statut :"; color:#CDA349; }
		.rem-2::before{ content: "Info porte :"; color:#CDA349; }

		.btn-tab{
			text-align: left;
			padding-top: 2px;
			margin-top: 10px;
		}
		.btn-tab a{
			display: block;
			width: 100%;
			padding: 8px 0 6px 0;
			font-size: 13px;
			letter-spacing: 1px;
		}

		/* pastilles de pagination */
		.lgn-dots{
			display: flex;
			justify-content: center;
			gap: 8px;
			margin-top: 12px;
		}
		.lgn-dots button{
			width: 7px;
			height: 7px;
			padding: 0;
			border-radius: 50%;
			border: 1px solid #CDA349;
			background: transparent;
			cursor: pointer;
			transition: background-color .2s ease;
		}
		.lgn-dots button[aria-current="true"]{
			background-color: #CDA349;
		}
	}

	@media screen and (max-width: 480px){
		#ttr-tab{
			font-size: 20px;
			letter-spacing: 4px;
			margin-top: 35px;
			padding-bottom: 15px;
		}
		.pour{ font-size: 16px; }
		.remarque{ flex-direction: column; gap: 3px; }
	}
	/* FIN TABLEAU */

#presentation{
	padding: 0 10px;
	box-sizing: border-box;
	position: relative;
}
#fond-carte{
	width:100%;
	float: left;
	background:url(../img/fond-carte-monde.png) no-repeat center bottom;
}