html
	{
		border: 0;
		background-color: transparent;
		width: 100%;
		height: 100%;
		font-family: tha, helvetica, Arial, Verdana, sans-serif;
		font-size: 3vh; /* les dimensions des éléments bénéficiant des unités vw (width), vh (height), vmin et vmax */
		color: white;
	}

body
	{
		  margin: 0

	}

mark
	{
		background-color: white;
		color: red;
	}

a
	{
		text-decoration: none;
		color: white;
		background-color: #000000;
		background-color: rgba(5, 5, 5, 0.3);
	}

a:visited
	{
		text-decoration: none;
		color: yellow;
	}

a:hover, a:focus, a:active
	{
		text-decoration: none;
		color: white;
	}

#iconshover img:hover
	{
		width:9%;
		height:auto;
		opacity: 1;
	}

@font-face
	{
		font-family: 'tha';
		src:	url("./fonts/scrpt12n.eot");					/* pour IE <= 6 */
		src:	url("./fonts/scrpt12n.eot?#iefix") format('embedded-opentype'), /* ie 7 et 8 */
			url("./fonts/scrpt12n.woff") format("woff"),			/* pour Firefox, Chrome*/
			url("./fonts/scrpt12n.ttf") format('truetype'),			/* pour Safari et Opéra*/
			url("./fonts/scrpt12n.svg") format('svg');			/* pour iPhone, iPad */
		font-stretch : normal;
		font-weight : normal;
		font-style : normal;
	}


/* Début du code pour la vidéo en backround */
#bgvideo
	{
		position: fixed;
		z-index: -90;
		bottom: 20%;
		top: 0;
		background-color: transparent;
		/* début de centrage verticalement dans la fenêtre */
		margin-top: 50vh; /* poussé de la moitié de hauteur de viewport */
		transform: scale(0.8,1); /* tiré de la moitié de sa propre hauteur */
		/* fin de centrage verticalement dans la fenêtre */
		/* début de centrage horizontal dans la fenêtre */
		min-width: 100%;
		min-height: 100%;
		left: 50%; /* à 50%/50% du parent référent */
		transform: translate(-50%, -50%); /* décalage de 50% de sa propre taille */
		/* fin du centrage horizontal dans la fenêtre */
	}
.stopfade
	{
		opacity: 0;
	}

video
	{
		display: block;
	}
/* Fin du code pour la vidéo en backround */


/* Début du code pour les photos en backround */

/* "viewport"     c'est la partie visible de l'écran */
/* a inclure entre les balises head : <meta name="viewport" content="width=device-width" /> */
/* "max-width"    c'est la taille maximum de la fenêtre */
/* "device-width" c'est la largeur de l'écran du terminal, Intéressant pour les smartphones..*/
/*
	android en portrait 480px
	Android 1, 2 et 3 : 800px
	Android 4 : 980px
	Opera mini : 850px
	Opera mobile : 980px
	Safari mobile : 980px
	Internet Explorer mobile : 1024px

	écran 2k 1920px
	écran 4k 3840px
*/

/* type écran 8K */
@media screen and (max-device-width: 7680px)
{
	body
		{
			background: url("./imgs/background-video8k.jpg");
			background-color: #000000;
			background-color: rgba(0, 0, 0, 0.9);
			background-attachment: fixed;
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			font-size:100%;
		}
}

/* type écran 4K */
@media screen and (max-device-width: 3840px)
{
	body
		{
			background: url("./imgs/background-video4k.jpg");
			background-color: #000000;
			background-color: rgba(0, 0, 0, 0.9);
			background-attachment: fixed;
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			font-size:100%;
		}
}

/* type écran 2K */
@media screen and (max-device-width: 1920px)
{
	body
		{
			background: url("./imgs/background-video2k.jpg");
			background-color: #000000;
			background-color: rgba(0, 0, 0, 0.9);
			background-attachment: fixed;
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			font-size:100%;
		}
}

/* 980px type tablette en portrait */
@media screen and (max-device-width: 980px)
{
	body
		{
			background: url("./imgs/background-video-980px.jpg");
			background-color: #000000;
			background-color: rgba(0, 0, 0, 0.9);
			background-attachment: fixed;
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			font-size:95%;
		}
}	

/* 480px type pt smartphones en portrait */
@media screen and (max-device-width: 480px)
{
	body
		{
			background: url("./imgs/background-video-480px.jpg");
			background-color: #000000;
			background-color: rgba(0, 0, 0, 0.9);
			background-attachment: fixed;
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			font-size:95%;
		}

}
/* Fin du code pour les photos en backround */

.texte
	{
		position: relative;
		text-decoration: none;
		text-align: center;
		top: -5.0%;
		color: white;
		border-radius: 20%;
		background-color: #050505;
		background-color: rgba(5, 5, 5, 0.5);
	}

#contenu
	{
		position: absolute;
		min-width: 100%;         /* largeur obligatoire pour être centré */
		min-height: 100%;
		border: 0 solid red;
	}

#cv
	{
		position: fixed;
		top: 0.5%;
		left: 0.5%;
		width: 26.0%;
		height: auto;
		z-index: 100;
		opacity: 1.0;
	}

#bandeau_pub
	{
		position: fixed;
		top: 0.5%;
		left: 25.0%;
		width: 48.6666%;
		height: auto;
		z-index: 49;
	}

#bandeau_events
	{
		position: fixed;
		top: 0.5%;
		right: 5.0%;
		width: 21.5%;
		height: auto;
		z-index: 49;
	}

.iconMeteo
	{
		position: fixed;
		top: 0.5%;
		left: 0;
		width: 5%;
		height: auto; 
		z-index: 100;
	}

.iconAstrologie
	{
		position: fixed;
		top: 0.5%;
		right: 0;
		width: 5%;
		height: auto;
		border: 0;
		z-index: 100;
	}

.icon-00
	{
		position: fixed;
		top: 2%;
		left: 20.0%;
		width: 7%;
		height: auto;
		border: 0;
		z-index: 100;
	}

.icon-01
	{
		position: fixed;
		top: 2%;
		left: 27.0%;
		width: 7%;
		height: auto;
		border: 0;
		z-index: 100;
	}

.icon-02
	{
		position: fixed;
		top: 2%;
		left: 34.0%;
		width: 7%;
		height: auto;
		border: 0;
		z-index: 100;
	}


.icon-03
	{
		position: fixed;
		top: 2%;
		left: 41.0%;
		width: 7%;
		height: auto;
		border: 0;
		z-index: 100;
	}

.icon-04
	{
		position: fixed;
		top: 2%;
		left: 48.0%;
		width: 7%;
		height: auto;
		border: 0;
		z-index: 100;
	}

.icon-05
	{
		position: fixed;
		top: 2%;
		left: 55.0%;
		width: 7%;
		height: auto;
		border: 0;
		z-index: 100;
	}

.icon-06
	{
		position: fixed;
		top: 2%;
		left: 62.0%;
		width: 7%;
		height: auto;
		border: 0;
		z-index: 100;
	}

.icon-07
	{
		position: fixed;
		top: 2%;
		left: 69.0%;
		width: 7%;
		height: auto;
		border: 0;
		z-index: 100;
	}

.icon-08
	{
		position: fixed;
		top: 2%;
		left: 76.0%;
		width: 7%;
		height: auto;
		border: 0;
		z-index: 100;
	}

.icon-09
	{
		position: fixed;
		top: 2%;
		left: 83.0%;
		width: 7%;
		height: auto;
		border: 0;
		z-index: 100;
	}


/* Début du code CSS commun menu de navigation 360° & Visioconférence */
/* Halo pulsé container uniquement */
@keyframes haloPulseContainer {
    0% {
        box-shadow:
            0 0 1vh rgba(255, 50, 50, 0.4),
            0 0 2vh rgba(255, 50, 50, 0.6);
    }
    50% {
        box-shadow:
            0 0 2vh rgba(255, 50, 50, 0.7),
            0 0 4vh rgba(255, 50, 50, 0.8);
    }
    100% {
        box-shadow:
            0 0 1vh rgba(255, 50, 50, 0.4),
            0 0 2vh rgba(255, 50, 50, 0.6);
    }
}

/* ---------------- Mobile / iPhone ---------------- */
@media (max-width: 768px) {
    #menu-icon-07 {
        position: fixed;          /* nécessaire pour un vrai centrage */
        left: 50%;
        right: auto;              /* 🔥 annule le right desktop */
        transform: translateX(-50%);
    }

   #menu-icon-03 {
        position: fixed;          /* nécessaire pour un vrai centrage */
        left: 50%;
        right: auto;              /* 🔥 annule le right desktop */
        transform: translateX(-50%);
    }
}

@media (max-width: 768px) {
    #menu-icon-07 a {
        flex: 0 0 45%;        /* 2 colonnes */
        max-width: 45%;
        display: flex;
        justify-content: center;
    }

    #menu-icon-07 img {
        width: 100%;
        height: auto;         /* ratio respecté */
        max-height: 18vh;     /* 🔥 empêche les images géantes */
        object-fit: contain;
    }

    #menu-icon-03 a {
        flex: 0 0 45%;        /* 2 colonnes */
        max-width: 45%;
        display: flex;
        justify-content: center;
    }

    #menu-icon-03 img {
        width: 100%;
        height: auto;         /* ratio respecté */
        max-height: 18vh;     /* 🔥 empêche les images géantes */
        object-fit: contain;
    }
}

@media (max-width: 480px) {
    #menu-icon-07 img {
        flex: 1 1 100%;       /* 2 colonnes minimum */
        max-width: 100%;
        height: auto;        /* ratio naturel */
        width: 100%;
        object-fit: contain;
    }

    #menu-icon-03 img {
        flex: 1 1 100%;       /* 2 colonnes minimum */
        max-width: 100%;
        height: auto;        /* ratio naturel */
        width: 100%;
        object-fit: contain;
    }
}
/* Fin du code CSS commun menu de navigation 360° & Visioconférence */

/* Début du code CSS commun menu de navigation 360° */
/* =====================================================
   Menu déroulant icon-03
   Responsive hauteur écran
   Halo rouge pulsé sur le container uniquement
   Photos sur plusieurs lignes sur mobile
   Menu centré sur mobile
===================================================== */
/* ---------------- Desktop ---------------- */
#menu-icon-03 {
    position: absolute;
    top: 14vh;
    left: 40%;

    display: none;
    flex-direction: row;
    flex-wrap: wrap; /* permet aux images de passer à la ligne */
    justify-content: center;

    /* Espacement */
    padding: clamp(8px, 1.2vh, 20px);
    gap: clamp(8px, 1.2vh, 20px);

    /* Apparence */
    background: rgba(0, 0, 0, 0.45);
    border-radius: 1.5vh;

    /* Halo pulsé container */
    animation: haloPulseContainer 3s ease-in-out infinite;

    z-index: 9999;
}

/* Liens */
#menu-icon-03 a {
    display: block;
    text-align: center;
}

/* Images du menu */
#menu-icon-03 img {
    height: clamp(70px, 12vh, 160px);
    width: auto;
    border-radius: 1vh;

    /* Halo statique léger */
    box-shadow: 0 0 0.6vh rgba(255, 50, 50, 0.4);

    /* Transitions interaction */
    transition: transform 0.25s ease, box-shadow 0.25s ease;

    will-change: transform, box-shadow;
}

/* Hover images → effet renforcé */
#menu-icon-03 img:hover {
    transform: scale(1.15);
    box-shadow:
        0 0 1.2vh rgba(255, 50, 50, 0.8),
        0 0 2.5vh rgba(255, 50, 50, 0.9),
        0 0 4vh rgba(255, 50, 50, 0.6);
}

/* Focus clavier */
#menu-icon-03 a:focus-visible img {
    outline: none;
    box-shadow:
        0 0 1.2vh rgba(255, 50, 50, 0.9),
        0 0 3vh rgba(255, 50, 50, 1);
}
/* fin du code pour le menu de navigation 360° */


/* Début du code CSS pour le menu de navigation Visioconférence */
/* =====================================================
   Menu déroulant icon-07
   Responsive hauteur écran
   Halo rouge pulsé sur le container uniquement
   Photos sur plusieurs lignes sur mobile
   Menu centré sur mobile
===================================================== */

/* ---------------- Desktop ---------------- */
#menu-icon-07 {
    position: absolute;
    top: 14vh;
    right: 5vw;

    display: none;
    flex-direction: row;
    flex-wrap: wrap; /* permet aux images de passer à la ligne */
    justify-content: center;

    /* Espacement */
    padding: clamp(8px, 1.2vh, 20px);
    gap: clamp(8px, 1.2vh, 20px);

    /* Apparence */
    background: rgba(0, 0, 0, 0.45);
    border-radius: 1.5vh;

    /* Halo pulsé container */
    animation: haloPulseContainer 3s ease-in-out infinite;

    z-index: 9999;
}

/* Liens */
#menu-icon-07 a {
    display: block;
    text-align: center;
}

/* Images du menu */
#menu-icon-07 img {
    height: clamp(70px, 12vh, 160px);
    width: auto;
    border-radius: 1vh;

    /* Halo statique léger */
    box-shadow: 0 0 0.6vh rgba(255, 50, 50, 0.4);

    /* Transitions interaction */
    transition: transform 0.25s ease, box-shadow 0.25s ease;

    will-change: transform, box-shadow;
}

/* Hover images → effet renforcé */
#menu-icon-07 img:hover {
    transform: scale(1.15);
    box-shadow:
        0 0 1.2vh rgba(255, 50, 50, 0.8),
        0 0 2.5vh rgba(255, 50, 50, 0.9),
        0 0 4vh rgba(255, 50, 50, 0.6);
}

/* Focus clavier */
#menu-icon-07 a:focus-visible img {
    outline: none;
    box-shadow:
        0 0 1.2vh rgba(255, 50, 50, 0.9),
        0 0 3vh rgba(255, 50, 50, 1);
}
/* fin du code pour le menu de navigation visioconférence */



#th_horloge_C
	{
		position: fixed;
		top: 1.5%;
		right: 0.5%;
		width: 10%;
		height: auto;
		font-size: 120%;
		z-index: 999;
	}

#th_horloge_PT
	{
		position: fixed;
		top: 1.5%;
		right: 0.5%;
		width: 10%;
		height: auto;
		font-size: 120%;
		z-index: 999;
	}
	
#th_horloge_H0
	{
		position: fixed;
		top: 1.5%;
		right: 2.7%;
		width: 10%;
		height: auto;
		font-size: 120%;
		z-index: 999;
	}
				
#th_horloge_0H
	{
		position: fixed;
		top: 1.5%;
		right: 1.4%;
		width: 10%;
		height: auto;
		font-size: 120%;
		z-index: 999;
	}

#th_horloge_M0
	{
		position: fixed;
		top: 1.5%;
		right: -0.4%;
		width: 10%;
		height: auto;
		font-size: 120%;
		z-index: 999;
	}
				
#th_horloge_0M
	{
		position: fixed;
		top: 1.5%;
		right: -1.7%;
		width: 10%;
		height: auto;
		font-size: 120%;
		z-index: 999;
	}

.ILOS-info
	{
		position: fixed;
		bottom: 0;
		left: 0;
		width: auto;
		height: 6.5%;
	} 

.reseauYT
	{
		position: fixed;
		bottom: 0;
		left: 4.3%;
		width: auto;
		height: 6.5%;
	}

.reseauFB
	{
		position: fixed;
		bottom: 0;
		left: 3%;
		width: auto;
		height: 6.5%;
	}             

.videoBkgroun
	{
		position: fixed;
		bottom: 0;
		right: 0;
		width: auto;
		height: 6.5%;
	}

/* Bouton audio PISTACHE LA RADIO */
.pistache
	{
		position: fixed;
		bottom: 6%;
		right: 0;
		width: auto;
		height: 6.5%;
		z-index: 1000; /* reste en dessous de l’image au survol */
	}

#btpistache-hover
	{
		position: fixed;
		bottom: 22%;
		right: 10%;
		width: auto;
		height: 12%;
		/* PAS de display: none ! */
		opacity: 0;
		pointer-events: none;
		transform: scale(0.05);
		transform-origin: bottom right;
		transition: opacity 0.6s ease-in-out, transform 0.3s ease-in-out;
		z-index: 1001;
		cursor: pointer;
	}

@keyframes glowPulse
	{
		0%   { box-shadow: 0 0 5px  1px rgba(255, 50, 50, 0.4); }
		30%  { box-shadow: 0 0 10px 3px rgba(255, 50, 50, 0.7); }
		100% { box-shadow: 0 0 8px  0px rgba(255, 50, 50, 0.6); }
	}

#iconshoverpistache img:hover
	{
		position: fixed;
		width: auto;
		height: 13%;
	}

#iconshoverPD img:hover
	{
		position: fixed;
		width: auto;
		height: 6%;
	}

#pied_page
	{
		position: fixed;
		bottom: 0;
		width: 100%;		/* largeur obligatoire pour être centré */
		height: 6.5%;
		margin-left: 0;
		margin-right: 0;
	}