body{
     padding: 0px;
     margin: 0px;
}
 .conteneur{
     padding: 20px;
}
 code{
     font-size:inherit;
     display: inline;
     background: rgba(255,255,255,.3);
}
 #div1{
     display: none;
     font-size: 12px;
     background: rgba(0,255,255,.3);
}
 #ligne2{
     transition: background-color 1s ease-in-out;
}


 #texte1,#texte2,#texte3,#texte4,#texte5{
     display:block;
     text-align:center;
	 border-radius:5px;
     margin-left: auto;
     margin-right: auto;
     width: 65%;
     min-width: 4.5em;
     font-size: xx-large;
     background: rgba(230,230,230,.5);
}
 
 #div_3 {
     background: #ffffff;
}
 #image {
    position:-webkit-sticky;
     position:sticky;
     top:0;
     width: 100px;
     height: 100px;
     display: block;
     margin-left: auto;
     margin-right: auto;
     transition: width 0.5s ease-in-out;
     transition: height 0.5s ease-in-out;
}
 p {
    padding:8px;
}
 .texte {
     text-align:center;
     font-size:30px;
     background: rgba(255,255,255,.7);
}
 * {
     box-sizing: border-box;
}
 .bgimg {
     background-attachment: fixed;
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
	 background-opacity:0.1;
     background-image: url('eniac.jpg');
     min-height: 100px;
}
 
 .bgimgS {
     background-attachment: fixed;
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
	 background-opacity:0.1;
     min-height: 100px;
}

.container {
    display: flex;
    justify-content: center; /* Centre les colonnes horizontalement */
    align-items: center; /* Centre les colonnes verticalement */
    gap: 20px; /* Espacement entre les colonnes */
}

.colonnes2 {
    flex: 1; /* Permet aux colonnes d'avoir une taille égale */
    max-width: 50%; /* Empêche les colonnes de devenir trop grandes */
    text-align: center; /* Centre le contenu dans chaque colonne */
}

 .col-container {
     color:white;
     display: table;
     width: 100%;
     padding: 16px;
}
 
  .bgimgbdd {
     background-attachment: fixed;
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
	 background-opacity:0.1;
     background-image: url('Grace_Hopper_and_UNIVAC.jpg');
     min-height: 100px;
}
 

 .conteneur {
     display: table;
     width: 100%;
}
 .col {
     display: table-cell;
     width:33%;
     padding: 8px;
}
 @media only screen and (max-width: 1000px) {
     .col {
         display: block;
         width: 100%;
    }
    #texte1,#texte2,#texte3,#texte4,#texte5{
        font-size:25px;
    }
}
.head{
	display: inline-block;
	vertical-align: top;						
}
	
.actu{
	display: inline-block;	
}

.actu2{
		display: inline-block;	
		position: fixed;
		/*z-index: 1;  Stay on top */
		top: 85px;
		right: 20px;
	}
.encadre {
	text-align: center;
	opacity:1;
    border-radius:8px;
    background: white;
    /*background-image: url('../images/python.png');background-position: top;*/
    color : #3578BA;
    font-weight:bold ;
    width: 30%;
    
    
}
.pth {
	z-index: 1;
	background-position: center;
	background-image: url("/assets/images/LLB logo transparent .png");
	background-size : contain;
	background-repeat : no-repeat;
	background-color: transparent;
}

.encadre1{
	width: 200px; 
	margin-top:50px;
	padding-top: 15px;
	padding-bottom: 15px;
	border: 3px solid #889E88; 
	text-align: center; 
	background: #E95A49;
	border-radius: 10px;
}

.encadre2{
	width: 200px; 
	margin-top:50px;
	padding-top: 15px;
	padding-bottom: 15px;
	border: 3px solid #889E88; 
	text-align: center; 
	background: #C2E1C2;
	border-radius: 10px;
}

.encadre3 {
	text-align: center;
	padding-top: 15px;
	padding-bottom: 15px;
	border: 3px solid #889E88; 
    border-radius:8px;
}


.encadre4{
	opacity:1;
    border-radius:8px;
    background: white;
    color:black;
}


 .cadreNone{
	opacity:1;
    border-radius:8px;
    background: white;
    color:black;
    /*display: none; /* caché par défaut */
    visibility: hidden;      /* au lieu de display:none */
    position: absolute;      /* pour le retirer du flux */
    pointer-events: none;    /* pour désactiver les clics */
   
}


.cadreVisible {
    visibility: visible;
    position: static;       /* ou relative selon besoin */
    pointer-events: auto;
}

.encadrenoir{
	opacity:1;
    border-radius:8px;
    background: black;
    color:white;
}
 h1 {
    position:-webkit-sticky;
     position:sticky;
     top:0;
     text-align: center;
     font-size:45px;
     padding: 16px;
	 color:#000000;
}
 h2 {
	   
     font-size:30px;
     padding: 8px;
     font-family:"Segoe UI",Arial,sans-serif;
     font-weight:400;
     margin:10px ;
	 color:#000000;
}
 .centrer {
     text-align: center;
}

.bandeau{
	position:absolute;border:0px;padding:0px;margin:0px;top:0px;left:0px;
	z-index:3;
}

 .button{
    box-shadow:0 8px 16px 0 rgba(0,0,0,0.12);
    border-radius:6px;
    background:#F5E68C;
    font-size:20px;
    padding:6px 6px;
    text-align:center;
    position:-webkit-sticky;
     position:sticky;
     top:0;
     
     text-align:center;
     display: block;
     margin-left: auto;
     margin-right: auto;
     opacity: 0.8;
    position:sticky;
}
 .button:hover{
    box-shadow:0 8px 16px 0 rgba(0,0,0,0.2);
    color:#666;
    opacity: 1;
}
 .button{
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none
}

.fond-noir{
    color:white;
    background-color:black;
	font-size:20px;
	}

 .fond-noir2{
    color:black;
    background-color:grey;
    
}

.fondgris{
	color:white;
	background-color:grey;
}

 .card,.card-2{
    box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)
}
 .card-4,.hover-shadow:hover{
    box-shadow:0 4px 10px 0 rgba(0,0,0,0.9),0 4px 20px 0 rgba(0,0,0,0.19)
}
 .card-4,.hover-shadow:hover{
    box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)
}

 .opacity-max{
    opacity:0.25
}
.opacity-min{
    opacity:0.7
}
.opacity-xmin{
    opacity:0.1
}
 .display-bottommiddle{
    position:absolute;
    left:50%;
    bottom:0;
    transform:translate(-50%,0%);
    -ms-transform:translate(-50%,0%)
}
 .display-container{
    position:relative
}


nav {
	
	float: center;
	width:100%;
	margin-left: auto ;
	margin-right:auto;
	
	/*background-color :white;*/
	position: relative;
	top: 0px;
	border-radius: 10px;
	
	
}



nav ul{
	list-style-type: none;
	padding: 0px; 
	width:100%;
	margin: 0 auto;
	
	position: relative;
	
}

nav ul li{
	float: left;
	width: 13%;
	margin: 0 auto;
	text-align: center;
	position: relative;
	
}

nav ul::after{
	content:"";
	display: table;
	clear: both;
}
nav a:hover{
	color: orange;
	border-bottom: 2px solid gold;
}

.sous{
	display: none;
	box-shadow: 0px 1px 2px #CCC;
	border-radius: 10px;
	background-image: url('images/fond.jpg');
	/*background-size: contain; */
	background-repeat: repeat;
	/*background-position: center;*/
	/*background-color: #c8c8c8;*/
	position: absolute;
	width: 100%;
	z-index: 1000;
	
	
	}

nav >ul li:hover .sous{
	display: block;
}

.sous li{
	float: none;
	width: 100%;
	text-align: left;
}

.deroulant > a::after{
	content:"▼";
	font-size: 12px;
}

a:link {
	color:#000000;
}

a:visited {
	color:#0000FF
}

.outil {
		margin : 10px 10px 2px ;
		margin-bottom : 50px;
}

.image-gauche {
	float:left;
	
}

.image-droite { float:right; }

.

.image-clignote  {
   animation-duration: 2s;
   animation-name: clignoter;
   animation-iteration-count: infinite;
   transition: none;
}
@keyframes clignoter {
  0%   { opacity:1; }
  40%   {opacity:0; }
  100% { opacity:1; }
}

.button2 {
  --c:  #229091; /* the color*/
  
  box-shadow: 0 0 0 .1em inset var(--c); 
  --_g: linear-gradient(var(--c) 0 0) no-repeat;
  background: 
    var(--_g) calc(var(--_p,0%) - 100%) 0%,
    var(--_g) calc(200% - var(--_p,0%)) 0%,
    var(--_g) calc(var(--_p,0%) - 100%) 100%,
    var(--_g) calc(200% - var(--_p,0%)) 100%;
  background-size: 50.5% calc(var(--_p,0%)/2 + .5%);
  outline-offset: .1em;
  transition: background-size .4s, background-position 0s .4s;
}

.button2:hover {
  --_p: 100%;
  transition: background-position .4s, background-size 0s;
}
.button2:active {
  box-shadow: 0 0 9e9q inset #0009; 
  background-color: var(--c);
  color: #fff;
}


/* === Patch Responsive CSS === */

@media only screen and (max-width: 1000px) {
    .col {
        display: block;
        width: 100%;
    }

    #texte1,#texte2,#texte3,#texte4,#texte5 {
        font-size: 25px;
        width: 90%;
    }
    
    .encadre, .encadre1, .encadre2, .encadre3 {
        width: 90%;
        margin: 10px auto;
        display: block;
    }
}

@media only screen and (max-width: 768px) {
    nav ul li {
        width: 100%;
        float: none;
        display: block;
    }

    .colonnes2 {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .encadre, .encadre1, .encadre2, .encadre3 {
        width: 90%;
        margin: 10px auto;
    }

    .texte {
        font-size: 20px;
    }

    #image {
        width: 70px;
        height: 70px;
    }

    h1 {
        font-size: 30px;
    }

    h2 {
        font-size: 22px;
    }

    .actu2 {
        position: static;
        margin-top: 10px;
    }
}

@media only screen and (max-width: 570px) {
    /* Ajuste la taille des boutons pour qu’ils ne débordent pas */
    .button, .button2 {
        width: 90%;          /* boutons prennent presque toute la largeur */
        max-width: 300px;    /* limite max de largeur */
        font-size: 16px;     /* taille texte lisible */
        padding: 8px 12px;   /* padding confortable */
        margin: 10px auto;   /* centré horizontalement avec marge */
        display: block;      /* empêche les boutons d’être côte à côte */
    }

    /* Pour tes encadreurs */
    .encadre, .encadre1, .encadre2, .encadre3 {
        width: 90%;
        max-width: 300px;
        margin: 10px auto;
        padding: 10px 15px;  /* un peu plus d’air */
        box-sizing: border-box;
        display: block;
    }

    /* Navigation simplifiée */
    nav ul li {
        width: 100%;
        float: none;
        display: block;
        margin-bottom: 8px; /* espacement vertical */
    }

    /* Texte des titres un peu plus petits */
    #texte1, #texte2, #texte3, #texte4, #texte5 {
        font-size: 22px;
        width: 90%;
    }

    /* Image réduite pour gagner de la place */
    #image {
        width: 60px;
        height: 60px;
    }
}


@media only screen and (max-width: 480px) {
    .texte {
        font-size: 18px;
    }

    .button, .button2 {
        font-size: 16px;
        padding: 4px 8px;
    }

    nav ul li a {
        font-size: 14px;
    }

    .image-clignote {
        display: none; /* optionnel pour alléger le rendu mobile */
    }
    
    .encadre, .encadre1, .encadre2, .encadre3 {
        width: 90%;
        margin: 10px auto;
    }
}

/* Règle générique pour les images */
img {
    max-width: 100%;
    height: auto;
}



.site-list {
  padding-left: 1.5em; /* ajuste la valeur si nécessaire */
  margin-left: 0; /* empêche que la marge externe pousse la liste hors du cadre */
  list-style-position: inside; /* optionnel : aligne les puces avec le texte */
}