/* Animation fondu */
@keyframes fondu-entrant {
from {
	opacity: 0; /* Commence invisible */
	/*transform: translateY(20px); /* Ajout d'un léger décalage pour un effet plus doux */*/
	}
to {
	opacity: 1; /* Devient complètement visible */
	transform: translateY(0);
	}
}	
[mon-animation="fondu-entrant"] { /* Création d'un attribut mon-animation qui pourra être ajouté dans les balises html, avec la valeur souhaitée en face */
	opacity: 0;
}
[mon-animation="fondu-entrant"].visible {
       	animation: fondu-entrant 3s ease-in-out forwards; /* forwards conserve l'état final */
}

[mon-animation="fondu-entrant-long"] { /* Création d'un attribut mon-animation qui pourra être ajouté dans les balises html, avec la valeur souhaitée en face */
	opacity: 0;
}
[mon-animation="fondu-entrant-long"].visible {
       	animation: fondu-entrant 12s ease-in-out forwards; /* forwards conserve l'état final */
}

/* Animation glisser vers le haut */
@keyframes glisse-haut {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
[mon-animation="glisse-haut"] {
    /*opacity: 0;*/ /* Pas d'opacité initiale ici pour éviter la disparition */
}
[mon-animation="glisse-haut"].visible {
    animation: glisse-haut 1s ease-in-out forwards;
}


/* Animation lettre par lettre */
@keyframes taper-lettre {
    from {
        width: 0; /* Commence sans largeur */
    }
    to {
        width: 100%; /* Affiche tout le texte */
    }
}
[mon-animation="taper-lettre"] {
    overflow: hidden; /* Cache le texte débordant */
    white-space: nowrap; /* Empêche le retour à la ligne */
    width: 0;
}
[mon-animation="taper-lettre"].visible {
    /*animation: taper-lettre 2s steps(30, end) forwards;  steps pour effet de frappe */
    animation: taper-lettre 30s steps(150, end) forwards; /* steps pour effet de frappe */
}

/* Effet rebond à utiliser au survol (:hover => animation: rebond 0.3s ease;) */
@keyframes rebond {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

[mon-animation="rebond"] {
	transform: translateY(0);
}
[mon-animation="rebond"].visible {
	animation: rebond 0.3s ease;      
}


/* Effet de secousse pour attirer l'attention (=> animation: secousse 0.5s ease-in-out; + animation-iteration-count: 2; (facultatif, répète deux fois)) */
@keyframes secousse {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
}

[mon-animation="secousse"] {
	transform: translateX(0);
}
[mon-animation="secousse"].visible {
	animation: secousse 0.5s ease-in-out;
	animation-iteration-count: 2;
}


/* Effet de vague pour les icônes ou décorations (=> animation: vague 2s infinite ease-in-out;)*/
@keyframes vague {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

[mon-animation="vague"] {
	transform: translateY(0);
}
[mon-animation="vague"].visible {
	animation: vague 2s infinite ease-in-out;
}


/* Effet de transition de fond (=>animation: transition 15s ease infinite;) */
@keyframes transition {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

[mon-animation="transition"] {
	background-position: 0% 50%;
}
[mon-animation="transition"].visible {
	animation: transition 15s ease infinite;
}

/* Arrivée d'un élément par la gauche */
@keyframes de-gauche {
	0% { transform: translateX(-50vw); opacity: 0; }  /* Départ hors de l'écran à gauche */
	100% { transform: translateX(0); opacity: 1; } /* Arrivée à la position centrée */
}

[mon-animation="de-gauche"] {
	transform: translateX(-50vw);
	opacity: 0;
}
[mon-animation="de-gauche"].visible {
	animation: de-gauche 1s ease-out forwards;
}

/* Arrivée d'un élément par la droite */
@keyframes de-droite {
	0% { transform: translateX(45vw); opacity: 0; }  /* Départ hors de l'écran à droite */
	100% { transform: translateX(0); opacity: 1; } /* Arrivée à la position centrée */
}

[mon-animation="de-droite"] {
	transform: translateX(45vw);
	opacity: 0;
}
[mon-animation="de-droite"].visible {
	animation: de-droite 1s ease-out forwards;
}



/* Désactiver les animations pour les utilisateurs sensibles au mouvement */
@media (prefers-reduced-motion: reduce) {
    [mon-animation] {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    background-position: 0% 50% !important;
  }
}

/* Effet de zoom subtil lors du passage sur une image.  Appliquer la classe sur le conteneur de l'image*/
.zoom-image{
	  overflow: hidden; /* Evite que l'image agrandie ne déborde  */
}

.zoom-image img {
  transition: transform 0.3s ease;
}

.zoom-image img:hover {
  transform: scale(1.1);
}

/* ################ Thème ###################### */

h1 {
	font-family: 'Hachi Maru Pop', sans-serif;
}

main h1 {
	text-align: center;
	animation: fondu-entrant 3s ease-in-out forwards;
	padding: 40px 0 60px;
}

h2 {
	font-family: 'Playpen Sans Arabic', sans-serif;
}

body {
	font-family: 'Playpen Sans Arabic', sans-serif;
	font-size: 1.2rem;
}

/* Couleur de la sélection */
::selection {
  background: #ffb6b6; /* Couleur de fond */
  color: white; /* Couleur du texte */
}

/* Couleur d'un champ de formulaire ayant le focus */
.form-control:focus, .form-select:focus{
	border-color: #90b2d5 !important; /* Bleu */
}

/* Couleur du texte de la barre de progression */
.progress-bar {
	color: black;
}

/* Police spécifique Câline & Moi */
.police_caline {
	font-family: 'Hachi Maru Pop', sans-serif;
}
.police_caline a {
        text-decoration: none;
}


/* Coleurs du thème */
.rose, a.rose:link {
	color:#ffb6b6 !important;
}
.bleu, a.bleu:link{
	color:#90b2d5 !important;
}
.vert, a.vert:link{
	color:#7dc520 !important;
}
.marron, a.marron:link{
	color:#240b00 !important;
}
.beige, a.beige:link{
	color:#cba078 !important;
}


/* hr de 10% de la largeur */
hr {
	width: 10%;
	margin: 50px auto;
	border: 1px solid;
	opacity : 1;
}


/***** Personnalisation des couleurs boostrap *****/
:root {
    --bs-primary: #90b2d5; /* BLEU */
    --bs-secondary: #cba078; /* BEIGE */
    --bs-success: #7dc520; /* VERT */
    --bs-danger: #ffb6b6; /* ROSE */

    /* Optionnel : Ajuster les variantes (par exemple, pour hover ou bordures) */
    --bs-primary-rgb: 144, 178, 213; /* RGB pour #90b2d5 */
    --bs-secondary-rgb: 203, 160, 120; /* RGB pour #cba078 */
    --bs-success-rgb: 125, 197, 32; /* RGB pour #7dc520 */
    --bs-danger-rgb: 255, 182, 182; /* RGB pour #ffb6b6 */

    --bs-border-width: 3px; /* Augmente la taille des bordures de 1 à 3px */
    --bs-border-radius : 15px; /* Personnalisation des angles arrondis */
}


/* Surcharge pour les boutons primary */
.btn{
	border-color: #240b00 !important;
        color: #240b00 !important;
        border-radius: 10px;
}

.btn-primary {
    --bs-btn-bg: #90b2d5;
    --bs-btn-border-color: #90b2d5;
    --bs-btn-hover-bg: #7fa1c4; /* Légèrement plus sombre pour hover */
    --bs-btn-hover-border-color: #7fa1c4;
    --bs-btn-active-bg: #6e90b3; /* Encore plus sombre pour active */
    --bs-btn-active-border-color: #6e90b3;
    --bs-btn-disabled-bg: #90b2d5;
    --bs-btn-disabled-border-color: #90b2d5;
}

/* Surcharge pour les boutons secondary */
.btn-secondary {
    --bs-btn-bg: #cba078;
    --bs-btn-border-color: #cba078;
    --bs-btn-hover-bg: #b98f67; /* Légèrement plus sombre */
    --bs-btn-hover-border-color: #b98f67;
    --bs-btn-active-bg: #a77e56; /* Encore plus sombre */
    --bs-btn-active-border-color: #a77e56;
    --bs-btn-disabled-bg: #cba078;
    --bs-btn-disabled-border-color: #cba078;
}

/* Surcharge pour les boutons success */
.btn-success {
    --bs-btn-bg: #7dc520;
    --bs-btn-border-color: #7dc520;
    --bs-btn-hover-bg: #6cb31c; /* Légèrement plus sombre */
    --bs-btn-hover-border-color: #6cb31c;
    --bs-btn-active-bg: #5ca118; /* Encore plus sombre */
    --bs-btn-active-border-color: #5ca118;
    --bs-btn-disabled-bg: #7dc520;
    --bs-btn-disabled-border-color: #7dc520;
}

/* Surcharge pour les boutons danger */
.btn-danger {
    --bs-btn-bg: #ffb6b6;
    --bs-btn-border-color: #ffb6b6;
    --bs-btn-hover-bg: #ffa5a5; /* Légèrement plus sombre */
    --bs-btn-hover-border-color: #ffa5a5;
    --bs-btn-active-bg: #ff9494; /* Encore plus sombre */
    --bs-btn-active-border-color: #ff9494;
    --bs-btn-disabled-bg: #ffb6b6;
    --bs-btn-disabled-border-color: #ffb6b6;
}


/* Mode nuit */
#switch {
 position: fixed;
 top: 10px;
 right : 20px;
 z-index: 1100;
}

#switch i {
	font-size: 25px;
}

.mode-nuit{
	background-color: #1a1a1a;
	color: #ffffff;
}

.mode-nuit #invisible {
    color: #1a1a1a;
}

.mode-nuit #entete{
	border: solid white;
}

.mode-nuit .table {
    --bs-table-color: #ffffff;
    --bs-table-bg: #2c2c2c;
}

.mode-nuit .table-striped tbody tr:nth-of-type(odd) {
    --bs-table-bg: #3a3a3a;
    --bs-table-striped-color: white;
}

.mode-nuit .table-striped tbody tr:nth-of-type(even) {
    --bs-table-bg: #2c2c2c;
    --bs-table-striped-color: white;
}

.mode-nuit .table-light {
 background-color: #3a3a3a;
}

.mode-nuit footer{
	background-color: #2c2c2c;
}

.mode-nuit footer .marron {
	text-shadow: 1px 1px 1px white, -1px -1px 1px white, 1px -1px 1px white, -1px 1px 1px white;
}
.mode-nuit .bd-navbar{
	box-shadow: 0 0.5rem 1rem rgba(255,255,255,0.15), inset 0 -1px 0 rgba(255,255,255,0.15);
}

.mode-nuit .navbar-nav .nav-link,
.navbar-nav .dropdown-item {
	text-shadow: 1px 1px 1px white;   
}

.mode-nuit .nav-link.active,
.mode-nuit .dropdown-item.active {
	text-shadow: 1px 1px 1px white, -1px -1px 1px white, 1px -1px 1px white, -1px 1px 1px white !important;
}

.mode-nuit .liens-footer {
	text-shadow: 1px 1px 1px white;   
}

.mode-nuit .btn {
    border-color: #ffffff !important;
   /* color: #ffffff !important;*/
}

/***********************************/


/* Barre de navigation *************/
header{
	font-family:'Indie Flower', sans-serif;
	font-size: 25px;
}

.bd-navbar{
	background-image: linear-gradient(to left, #FCFBFBAA, #000000AA);
	box-shadow:0 0.5rem 1rem rgba(0,0,0,0.15),inset 0 -1px 0 rgba(0,0,0,0.15);
	transition: opacity 0.5s ease; /* Transition fluide pour la disparition */
}

.dropdown-menu {
	background-image: linear-gradient(to top, #FFFFFFAA, #000000AA);
	/*background-color:#888 !important;*/
	background-color:transparent;
	font-size: 20px;
}

.nav-link.active,
.dropdown-item.active {

	/*border-bottom: 2px solid currentColor; /* Bordure sous le lien, utilise la couleur du texte */
	/*padding-bottom: 2px; /* Ajuste l'espacement */

	/*text-shadow: 1px 1px 1px black, -1px -1px 1px black, 1px -1px 1px black, -1px 1px 1px black;    */
	/*text-shadow: 1px 1px 1px white, -1px -1px 1px white, 1px -1px 1px white, -1px 1px 1px white;*/
	text-shadow: 1px 1px 1px #240b00, -1px -1px 1px #240b00, 1px -1px 1px #240b00, -1px 1px 1px #240b00 !important;
	/*text-shadow: 2px 2px 2px #240b00;   */
	background-color:transparent !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .dropdown-item:hover {
	transform: scale(1.2); /* Grossit de 20% */
	transform-origin: center; /* Centre l’agrandissement */
	background-color:transparent !important;

}

/* Augmenter l’espacement des nav-link sur desktop */
.navbar-nav .nav-link,
.navbar-nav .dropdown-item {
	margin: 0 10px; /* Espacement horizontal entre les liens */
	padding: 8px 12px; /* Ajustement du padding pour lisibilité */
	transition: transform 0.3s ease; /* Animation fluide pour scale */
	text-shadow: 1px 1px 1px #240b00;   
      }

.bd-navbar.hidden {
  opacity: 0; /* Masque le navbar */
  pointer-events: none; /* Désactive les interactions (clics) */
}

/* Force le menu vertical sur mobile */
@media (max-width: 767.98px) {

/*Réduction de la taille du logo*/
 #logo {
	 width : 90px !important;
	 height: 90px !important;
 }

 .nav {
    display: block !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: var(--bs-scroll-height, 200px); /*Hauteur de la scrollbar */
    padding: 10px; /* Espacement interne */
  }
.dropdown-menu {
	background-image: linear-gradient(to left, #FFFFFFAA, #000000AA);
}
.navbar-nav .dropdown-item,
.navbar-nav .nav-link {
	margin: 0; /* Pas d’espacement horizontal */
	padding: 10px 15px; /* Espacement vertical */
	width: 100%;
	text-align: center; /* Centre le texte */
	background-color:transparent !important;
}
.navbar-nav .dropdown-item:hover,
.navbar-nav .nav-link:hover {
        transform: scale(1.2); /* Grossit sur place */
	transform-origin: center; /* Centre l’agrandissement */
	display: block; /* Conserve le comportement en bloc */
	background-color:transparent !important;
}
}

/***********************************/

/****Marge sur toutes les pages ****/
.tab-pane {
	padding: 2em;
}

/***********************************/

/* Footer **************************/
.copyright {
	font-size: 0.7rem;
}

footer{
	background-color: #EEE;
	padding-bottom: 15px;
}

.liens-footer {
	text-shadow: 1px 1px 1px #240b00;   
}


/***********************************/

/* Retour en haut ******************/
.back-to-top {
	padding: 0 0.5em;
	position: fixed; /* Fixe par rapport à la fenêtre */
	bottom: 40px; /* Distance du bas */
	right: 20px; /* Distance de la droite */
	z-index: 1000; /* Au-dessus du contenu */
	opacity: 0; /* Invisible par défaut */
	transition: opacity 0.5s ease, transform 0.5s ease; /* Animation fluide */
}

.back-to-top.show {
	opacity: 1; /* Visible */
	transform: translateY(0); /* Position normale */
}

.back-to-top.d-none {
	opacity: 0; /* Assure l'invisibilité */
	transform: translateY(20px); /* Déplace légèrement vers le bas quand caché */
}
/***********************************/


/***** Crédit photo et note de bas de pageo ****************/
.source{
	font-size: clamp(5px, 0.8vw, 10px); /* Taille responsive */
}
.note{
	font-size: clamp(12px, 0.8vw, 14px); /* Taille responsive */
}
 .source a:link, .note a:link{
	color: #90b2d5; /* Bleu */
 }

/* La div parente doit être explicitement en position: relative; */
.integre-blanc{
	position:absolute;
	bottom: 0.3%;
        right: 8%;
	color:white;
	text-shadow: 1px 1px 1px black, -1px -1px 1px black, 1px -1px 1px black, -1px 1px 1px black;
}

.integre-blanc a:link{
	color: white !important;
}
/***********************************/
/* ############################################# */



/* ################ Flyer ###################### */

#flyer {
	padding: 0 0 !important; /* Pas de marge sur cette page */
	border: solid black;
	font-family: 'Gluten', sans-serif;
	background-color: white !important;
}
#affiche {
	padding: 0 0;
}



.img-fluid {
	/*Les 3 éléments permettent de redimensionner l'image même lorsque sa taille max est dépassée */
	object-fit: cover;
	/*object-fit: contain;*/
	width: 100%;
	height:100%;
}


#nouveau {
	position:absolute;
	top: 30%;
	left: 50%;
	transform: translate(-70%, -30%) rotate(-30deg);
	/*top: 1.2em;
	left: 2em;*/
	/*transform-origin: top left;*/
	/*transform: rotate(-30deg);*/
	color: white; /* Ajustez la couleur selon le contraste avec l'image */
	font-size: clamp(12px, 3vw, 150px); /* Taille responsive */
	text-align: center;
	font-weight: bold; /* Optionnel, pour meilleure lisibilité */
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Ombre pour lisibilité */
/*	margin: 0; /* Supprime les marges par défaut du <p>*/ 
/*	padding: 5px 10px; /* Optionnel : léger rembourrage pour l'esthétique */
}

#ouverture{
	text-align: center;
	color: #90b2d5;
	font-size: clamp(14px, 5vw, 150px); /* Taille responsive */
}

#cercle_vert {
	position:absolute;
        top: 22%;
        left: 20%;
        transform: translate(-70%, -30%) rotate(-30deg);
	font-size: clamp(6px, 2vw, 150px); /* Taille responsive */
	text-align: center;
}

#cercle_bleu {
	position:absolute;
        top: 68%;
        left: 17%;
        transform: translate(-70%, -30%) rotate(30deg);
	font-size: clamp(6px, 2vw, 150px); /* Taille responsive */
	text-align: center;
}


#cercle_rose {
	position:absolute;
        top: 45%;
        left: 38%;
        transform: translate(-70%, -30%) rotate(-10deg);
	font-size: clamp(6px, 2vw, 150px); /* Taille responsive */
	text-align: center;
}

#pour_les {
	text-align: center;
	color: #ffb6b6;
	font-size: clamp(14px, 4vw, 150px); /* Taille responsive */

}

#renseignements {
	position: absolute;
        top: 40%;
        left: 20%;
        transform: translate(-70%, -30%) rotate(-10deg);
	font-size: clamp(8px, 3vw, 150px); /* Taille responsive */
	text-align: center;
}

#coordonnees {
	position: absolute;
        top: 60%;
        left: 70%;
        transform: translate(-70%, -30%);
	font-size: clamp(8px, 2vw, 150px); /* Taille responsive */
	padding: 0 !important;

}

#fleche {
	position: absolute;
        top: 75%;
        left: 30%;
        transform: translate(-70%, -30%) rotate(-10deg);
	font-size: clamp(8px, 4vw, 150px); /* Taille responsive */
	text-align: center;
}

/* ############################################### */

/* ########### Contact ########################### */
.contact {
	border: solid #90b2d5;
	border-radius: 15px;
	padding : 10px ;
}

#contact iframe 
{
	padding-bottom: 30px;
}

.merci {
	padding-top: 15px;
	font-family: 'Gluten', sans-serif;
}
/* ############################################### */


/* ############ Accueil ########################## */
#accueil{
	position: relative;
	padding: 0;
}

#haut-accueil{
	position: relative;
}

#haut-accueil > .integre-blanc{
	right: 1% !important;
}

#boutons-accueil{
	padding:  0 20px !important;
}

#image-accueil{	
	opacity: 0;
       	animation: fondu-entrant 5s ease-in-out forwards; /* forwards conserve l'état final */
}


#slogan-p1{
	position: absolute;
	top: 5%;
        left: 60%;
	color: white;
	font-size: clamp(8px, 4vw, 150px); /* Taille responsive */
	text-shadow: 1px 1px 1px black, -1px -1px 1px black, 1px -1px 1px black, -1px 1px 1px black;
	opacity: 0;
       	animation: fondu-entrant 5s ease-in-out forwards; /* forwards conserve l'état final */
	animation-delay: 3s;
}

#slogan-p2{
	position: absolute;
	bottom: 3%;
	left: 5%;
	color: white;
	font-size: clamp(8px, 4vw, 150px); /* Taille responsive */
	text-shadow: 1px 1px 1px black, -1px -1px 1px black, 1px -1px 1px black, -1px 1px 1px black;
	opacity: 0;
       	animation: fondu-entrant 5s ease-in-out forwards; /* forwards conserve l'état final */
	animation-delay: 3s;
}
#invisible{
	position: absolute;
	color: white;
	top: 1%;
        left: 1%;
	z-index: -2;

}



#div-toast-accueil img{
width: 80px;
}
/* ############################################### */


/* #### Tarifs ################################### */
#entete{
	border: solid black;
	text-align : center;
	background-color: #90b2d5;
	color: white;
       	animation: fondu-entrant 3s ease-in-out forwards; /* forwards conserve l'état final */
}

.filtre-tarifs .btn-check:checked + .btn { /* Le + cible l'élément suivant (même niveau, juste après) */
	border-style: dotted;
}

.defilement{
	overflow-x : auto; /* Barre de défilement si tableau déborde */
}

/* -- Personnalisation de la barre de défilement -- */
.defilement::-webkit-scrollbar {
  height: 8px;
}
.defilement::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}
.defilement::-webkit-scrollbar-thumb {
  background: #90b2d5;
  border-radius: 4px;
}
.defilement::-webkit-scrollbar-thumb:hover {
  background: #5a9e18;
}

/* Version spécifique firefox */
.defilement {
  scrollbar-color: #90b2d5 #f1f1f1;
  scrollbar-width: thin;
}
/* -------- */


/* ############################################### */

/* ##### Candidature ############################# */
.candidature {
        border: solid #90b2d5; /* Bleu */
        border-radius: 15px;
        padding: 10px;
}

@media (min-width: 992px) {
.candidature {
	margin: 0 25vw;
}
}
/* ############################################### */

/* ##### Pré-inscription ######################### */
.pre-inscription {
        border: solid #7dc520; /* Vert */
        border-radius: 15px;
        padding: 10px;
	max-width: 100%; /* Empêche le débordement */
	overflow-x : auto; /* Barre de défilement si tableau déborde */
	box-sizing: border-box; /* Inclut padding dans la largeur */
}

@media (min-width: 992px) {
.pre-inscription {
	margin: 0 10vw;
}

#etape1, #etape3, #etape4, #etape2>p, #etape2 ul, #etape2 .row{
	margin: 50px;
}
}

/* -- Personnalisation de la barre de défilement -- */
.pre-inscription::-webkit-scrollbar {
  height: 8px;
}
.pre-inscription::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}
.pre-inscription::-webkit-scrollbar-thumb {
  background: #90b2d5;
  border-radius: 4px;
}
.pre-inscription::-webkit-scrollbar-thumb:hover {
  background: #5a9e18;
}

/* Version spécifique firefox */
.pre-inscription {
  scrollbar-color: #90b2d5 #f1f1f1;
  scrollbar-width: thin;
}
/* -------- */

#etape{
#etape{
	margin: 50px;
}

	margin: 50px;
}

#bouton-etape{
	margin-top: 50px;	
}

.pre-inscription .btn {
	margin: 0 10px;
}

/* Tableau planning */
.planning-horaires {
  margin-bottom: -1px;
  margin-top: 50px;
}
.heure-entete {
  text-align: right;
  font-size: 0.8rem;
  font-weight: bold;
  width: 58px; /* Largeur optimale pour espace entre 2h */
}
#ajustement-debut {
	width: 30px !important;
}
#ajustement-special{
	width: 85px !important;
}

.tableau{
 width: 100%;
 table-layout: fixed: 
}
.tableau-fixe {
  width: 790px; /* 100px pour libellé jour + 22 x 30px + 30px pour bouton + */
  margin: 0 auto; /* centre le tableau dans la div */
}
.plage-horaire {
  width: 30px !important;
  text-align: center;
}
.jour{
  width: 100px;
}
.ligne-jour {
  cursor: pointer;
}
.ajouter-plage {
  cursor: pointer;
}
.sans-fond {
 	background-color: transparent !important;
}


/* Très grands écrans */
@media (min-width: 1400px) {
.tableau-fixe {
  width: 944px; /* 130px pour libellé jour + 22 x 37px + 30px pour bouton + */
}
.jour{
  width: 130px;
}
.plage-horaire {
  width: 37px !important;
}
.heure-entete {
  width: 70px; /* Largeur optimale pour espace entre 2h */
}
#ajustement-debut {
	width: 40px !important;
}
#ajustement-special{
	width: 100px !important;
}
}


@media (max-width: 1098px) {
.tableau-fixe {
  width: 704px; /* 80px pour libellé jour + 22 x 27px + 30px pour bouton + */
}
.jour{
  width: 80px;
}
.plage-horaire {
  width: 27px !important;
}
.heure-entete {
  width: 49px; /* Largeur optimale pour espace entre 2h */
}
#ajustement-debut {
	width: 30px !important;
}
#ajustement-special{
	width: 83px !important;
}
}

@media (max-width: 800px) {
.tableau-fixe {
  width: 618px; /* 60px pour libellé jour + 22 x 24px + 30px pour bouton + */
}
.jour{
  width: 60px;
}
.plage-horaire {
  width: 24px !important;
}
.masque{
  visibility: hidden;
}
.heure-entete {
  width: 40px; /* Largeur optimale pour espace entre 2h */
}
#ajustement-debut {
	width: 20px !important;
}
#ajustement-special{
	width: 80px !important;
}
}

@media (max-width: 710px) {
.tableau-fixe {
  width: 400px; /* 40px pour libellé jour + 22 x 15px + 30px pour bouton + */
}
.jour{
  width: 40px;
}
.plage-horaire {
  width: 15px !important;
}
.masque, .midi{
  visibility: hidden;
}
.heure-entete {
  width: 13px; /* Largeur optimale pour espace entre 2h */
}
#ajustement-debut {
	width: 20px !important;
}
#ajustement-special{
	width: 80px !important;
}
}

.form-check-input:checked {
	background-color: #90b2d5;
	border-color:#90b2d5;
}

.erreur-rose {
  border-color: #ffb6b6 !important;
}

.erreur-rose:focus {
  border-color: #ffb6b6 !important;
  box-shadow: 0 0 0 0.25rem rgba(255, 182, 182, 0.25) !important;
}

.erreurs-planning.rose {
  color: #ffb6b6;
  margin-top: 5px;
}

/* ############################################### */

/* ##### Pourquoi Caline ######################### */
#ecu-tronc{
	border-radius: 15px;
	margin-bottom: 15px;
	max-height: 468px;
	max-width: 833px;
	border: 3px solid #90b2d5;
}
/* ############################################### */

/* #### Notre structure ########################## */
.hauteur-photos{
	max-height: 500px !important;
}

/* ############################################### */

/* ##### Mentions légales ######################## */
.div-mentions {
    transition: height 2s ease-in-out; //Associé au js, en cas de changement de la hauteur, la transition se fait en 2s avec fondu au début et fin
}
.contenu-mentions {
    opacity: 0;
    animation: fondu-entrant 5s ease-in-out forwards;
}

/* ############################################### */

/* ##### Berceau ################################# */
ul.check2-circle li{
	list-style: none; /* Supprime la puce par défaut */
	position: relative; /* Contexte pour positionner l'icône */
	padding-left: 2rem; /* Espace pour l'icône et l'indentation */
}

ul.check2-circle li::before{
	content: "\f270"; /* Code css de l'icône Bootstrap */
  	font-family: "bootstrap-icons";
  	display: inline-block;
	position: absolute;
	left: 0;
  	margin-right: 0.5rem;
  	color: #90b2d5; /* BLEU */
}

/* ############################################### */

/* #### Charles Pathé ############################ */
#slogan-petit-p1{
	position: absolute;
	top: 5%;
        left: 60%;
	color: white;
	font-size: clamp(6px, 3vw, 28px); /* Taille responsive */
	text-shadow: 1px 1px 1px black, -1px -1px 1px black, 1px -1px 1px black, -1px 1px 1px black;
	opacity: 0;
       	animation: fondu-entrant 5s ease-in-out forwards; /* forwards conserve l'état final */
	animation-delay: 3s;
}

#slogan-petit-p2{
	position: absolute;
	bottom: 3%;
	left: 5%;
	color: white;
	font-size: clamp(6px, 3vw, 28px); /* Taille responsive */
	text-shadow: 1px 1px 1px black, -1px -1px 1px black, 1px -1px 1px black, -1px 1px 1px black;
	opacity: 0;
       	animation: fondu-entrant 5s ease-in-out forwards; /* forwards conserve l'état final */
	animation-delay: 3s;
}

/* ############################################### */