/* ════════════════════════════════════════════════════════════════════
 CONFIGURATION GÉNÉRALE DU SITE
 - Image de fond
 - Police et alignement global
 - Réinitialisation des marges
═══════════════════════════════════════════════════════════════════════ */
body {
	background-color: #0B0B0B; /* couleur de secours si l’image ne charge pas */
	background: url(img/fondimg00.jpg) no-repeat center/cover fixed;
    /* ↑ Propriétés importantes :
       - no-repeat : empêche la répétition du fond
       - center/cover : garde le centrage et couvre toute la fenêtre
       - fixed : le fond reste fixe au défilement */
	margin: 0; /* Supprime les marges ext par défaut du navigateur */
    padding: 0; /* Supprime les marges int par défaut du navigateur */
    width: 100%;
    height: 100%;
    background-size: cover; /* L’image couvre tout l’écran sans déformation */
    font-family: "Lora", serif; /* Définit la police principale du site */
    text-align: center; /* Centre le texte par défaut */
    color: #070707; /* Couleur de texte principale */
}
* {
    box-sizing: border-box; /* → Les bordures et marges sont incluses dans la taille totale */
    margin: 0; /* Supprime toutes les marges par défaut */
    padding: 0; /* Supprime tous les espacements internes par défaut */
	font-family: 'Allerta Stencil', sans-serif;
}
/* ════════════════════════════════════════════════════════════════════
  --- STRUCTURE DE PAGE 100% --- 
═══════════════════════════════════════════════════════════════════════ */
.corpage {
	margin: 0px;	padding: 0px;
	width: 100%;
	display: flex;
	align-items: center;
	flex-direction: column;
	text-align: center;
}

/* ════════════════════════════════════════════════════════════════════
  --- BANDEAU D'IMAGES Petite --- 
═══════════════════════════════════════════════════════════════════════ */
.formnavig {
	margin: 0px 0px 0px 0px;
	padding: 10px 5px 10px 5px;
    float: left;
}
.formnavig img {
    width: clamp(80px, 20vw, 180px); /* largeurs adaptables */
    height: auto;                    /* préserve les proportions */
    margin: 5px;
    border: 1px solid #000;
    box-shadow: 5px 5px 7px rgba(0,0,0,0.9);
    border-radius: 10px;
}
/* ════════════════════════════════════════════════════════════════════
  --- BANDEAU LOGO + TITRE --- 
═══════════════════════════════════════════════════════════════════════ */
.barrenav1structure {  /* structure 100% Centré */
    margin: 5px; /* Espace externe autour du bloc titre */
    padding: 15px; /* Espace interne autour du contenu */
    display: flex; /* Active Flexbox pour centrer le titre */
    justify-content: center; /* Centre horizontalement le contenu */
    align-items: center; /* Centre verticalement le contenu */
    width: 100%; /* Prend toute la largeur disponible */
    text-align: center; /* Centre le texte du titre */
}
.barrenav1 {  /* Fond transparent - Flex */
    display: inline-flex; /* Crée un conteneur flex en ligne */
    flex-wrap: wrap; /* Permet le retour à la ligne du contenu */
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement le contenu */
    gap: clamp(10px, 1vw, 30px); /* Espacement adaptable entre les éléments */
    padding: 0.1em 0.1em; /* Espacement interne léger */
    font-weight: 500; /* Texte en gras */
    width: fit-content; /* Largeur auto selon le contenu */
    height: fit-content; /* Hauteur auto selon le contenu */
    line-height: 1; /* Hauteur de ligne compacte */
}
.barrenav1logo {  /* Taille du logo proportionnelle au texte */
    height: 1em; /* Taille du logo proportionnelle au texte */
    width: auto; /* Garde les proportions originales */
    display: block; /* Permet un centrage plus précis */
}
.barrenav1 a { /* Taille de texte responsive */
	padding: 5px;
	background: rgba(250, 249, 249, 0.6);
	border: 1px solid #000;
    box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.9);
	border-radius: 10px;    color: #0c0c0c; 
    font-size: clamp(16px, 5vw, 30px); /* Taille de texte responsive */
    text-decoration: none; /* Supprime le soulignement */
    line-height: 1; /* Réduit l’espace vertical */
}
/* ════════════════════════════════════════════════════════════════════
 --- MAIN --- TITRE de la page centré
═══════════════════════════════════════════════════════════════════════ */
.baniere {
    background: rgba(250, 249, 249, 0.6);
    border: 1px solid #000;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.9);
    padding: 5px 12px;
    margin: 10px auto;
    width: auto;
    max-width: 90%;              /* ← empêche le dépassement */
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;             /* ← oblige le retour à la ligne si trop long */
    text-align: center;
    word-wrap: break-word;       /* ← casse les mots si nécessaire */
    overflow-wrap: break-word;
}
.baniere img {
    width: 100%;
    max-width: 800px; /* limite sur grands écrans */
    height: auto;
	margin: 5px;
	padding: 0px;
	position: relative;
}
.baniere a {
	color: #0a0a0a;
	font-size: 35px;
	text-decoration: none;
}
.baniere h1 {
    margin: 0;
    font-size: clamp(20px, 5vw, 25px);
}
/* ════════════════════════════════════════════════════════════════════
    --- MAIN --- CONTENU PRINCIPAL
═══════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
  --- BANDEAU de BOUTONS TEXTE --- 
═══════════════════════════════════════════════════════════════════════ */
/* Structure principale */
.barremenu1structure {
    margin: 5px;
    padding: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.barremenu1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: clamp(6px, 1vw, 20px);
    padding: 0.3em 0.6em;
}

/* ---- BOUTONS ---- */
.boutonmenu1, .boutonmenu1fix {
    padding: 6px 14px;
    border: 1px solid #000;
    box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.9);
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    transition: 0.25s;
    background: rgba(255, 255, 255, 0.85);
}
.boutonmenu1 a, .boutonmenu1fix a {
    text-decoration: none;
}

/* Bouton sélectionné (fix) */
.boutonmenu1fix {
    background: rgba(255, 255, 0, 0.9);
}

/* Texte des boutons */
.boutonmenu1 a h1,
.boutonmenu1fix a h1 {
    margin: 0;
    padding: 0;
    color: #000;
    font-weight: 500;
    font-size: clamp(10px, 2.8vw, 16px); /* 🔥 police réduite + responsive */
    line-height: 1;
    text-decoration: none;
}

/* Effet hover */
.boutonmenu1:hover {
    background: #FFFF00;
    transform: scale(1.05);
}/* ════════════════════════════════════════════════════════════════════
  --- BOX TEXTES --- 
═══════════════════════════════════════════════════════════════════════ */
.formtexte {
	width: 90%;
	margin: 10px 5px 10px 5px;
	padding: 5px;
	background: rgba(0, 0, 0, 0.5);
	border: 1px solid #000;
    box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.9);
	border-radius: 10px;
}
.formtexte p {
	color: #f2f6f8;
	font-size: 30px;
}
.formtexte img {
	max-width: 90%;
	height: 80%;
	border-radius: 10px;
}
/* ════════════════════════════════════════════════════════════════════
  --- Grandes Vignettes D'IMAGES de la page d' Accueil --- 
═══════════════════════════════════════════════════════════════════════ */
.formboutonbig {
	margin: 25px 0px 10px 0px;
	padding: 5px;
	float: left;
	color: #fff;
	font-size: 12px;
}
.formboutonbig p {
	color: #050505;
	padding: 2px 2px;
	font-size: 15px;
}
.formboutonbig img {
	margin: 10px;
	padding: 0px;
	width: 450px;
	height: 160px;
	font-size: 15px;
	line-height: 30px;
	border: 1px solid #000;
    box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.9);
	border-radius: 10px;
}
/* ════════════════════════════════════════════════════════════════════
  --- Vignettes D'IMAGES Moyenne --- 
═══════════════════════════════════════════════════════════════════════ */
.formboutonmoyen {
	margin: 0px 0px 0px 0px;
	padding: 5px;
	float: left;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.formboutonmoyen img {
    width: clamp(200px, 45vw, 400px); /* responsive */
    height: auto;
    background: rgba(250, 249, 249, 0.6);
    border: 1px solid #000;
    box-shadow: 5px 5px 7px rgba(0,0,0,0.9);
    border-radius: 10px;
    margin: 10px;
}
/* ════════════════════════════════════════════════════════════════════
  --- STRUCTURE BOX PHOTOS --- 
═══════════════════════════════════════════════════════════════════════ */
.corpphotos {
    margin: 2px;
    padding: 2px;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
}
/* ════════════════════════════════════════════════════════════════════
  --- BOX PHOTOS --- Largeur fixe 1200px --- 
═══════════════════════════════════════════════════════════════════════ */
.formchiffre {
    max-width: 80%;
    margin: 0;
    padding: 5px;
}
.formchiffre p {
    color: #050505;
    padding: 2px;
    font-size: 15px;
}
.formchiffre img {
    margin: 5px;
    padding: 0;
    height: auto;
    width: 100%; /* Prend toute la largeur disponible */
    object-fit: contain; /* évite la déformation */
	border: 1px solid #000;
    box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.9);
    border-radius: 10px;
}	
/* ════════════════════════════════════════════════════════════════════
  --- BOX PHOTOS --- Hauteur fixe 270px — largeur auto pour éviter la déformation --- 
═══════════════════════════════════════════════════════════════════════ */
.formphotos {
    max-width: 90%;
    margin: 0;
    padding: 5px;
}
.formphotos p {
    color: #050505;
    padding: 2px;
    font-size: 15px;
}
.formphotos img {
    margin: 5px;
    padding: 0;
    height: auto;
    max-height: 270px;
    width: auto;
    max-width: 100%; /* Empêche l'image de dépasser du conteneur */
    object-fit: contain; /* évite la déformation */
	border: 1px solid #000;
    box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.9);
    border-radius: 10px;
}
/* ════════════════════════════════════════════════════════════════════
 --- BOX VIDEOS ---
═══════════════════════════════════════════════════════════════════════ */
.tvflex1 {width:100%; }
.tvflex1 .corptvflex1 {
    display: flex; 
    justify-content: center; 
    flex-wrap: wrap;
}
.boxtvflex1 {
    text-align: center;
    width: 75%; 
    height: auto; 
    margin: 20px; 
	background: rgba(8, 8, 8, 0.6);
	border: 1px solid #000;
	box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.9);
    border-radius: 20px;
    padding: 20px;
}
.boxtvflex1 p {
    color: yellow;
    text-decoration: none;
    font-weight: bold; /* optionnel */
}
.boxtvflex1 a:hover {
    text-decoration: underline; /* ou none si tu veux aucun effet */
}
.inboxtvflex1 {
    width: 100%;
    margin-top: 15px;
}
.inboxtvflex1 iframe {
    width: 100%;
    height: 350px;
    border: none;
    border-radius: 10px;
}
/* ════════════════════════════════════════════════════════════════════
 --- FOOTER ---  Pied de Page ---
═══════════════════════════════════════════════════════════════════════ */
.corpagefooter {
	margin: 2px;
	padding: 2px;
	width: 90%;
	margin: auto;
	display: flex;
	align-items: center;
	flex-direction: column;
	text-align: center;
}
.articlefin {
    background: rgba(250, 249, 249, 0.6);
    border: 1px solid #000;
    box-shadow: 5px 5px 7px rgba(0,0,0,0.9);
    padding: 6px 12px;
    margin: 10px auto;
    width: auto;
    max-width: 90%;              /* ← empêche le débordement */
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;             /* ← autorise le retour  */
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.articlefin * {
	text-decoration: none; /* garantit aucune décoration */
}
.articlefin a, .articlefin p {
    margin: 0;    
    font-size: clamp(14px, 4vw, 15px);
    color: #000;
    text-decoration: none;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: block;
    text-align: center;
    display: inline;         /* plus de bloc large */
    white-space: normal;
}
.articlefin a:hover {
    color: #444;            /* couleur au survol (gris foncé) */
}