:root {
    --default-font: 'Arial', sans-serif;

    --nav-hover-color: #24d9e3; /* Pour navmenu/footer/page d'accueil */
    /* --main-color: #e3a127; jaune*/
    --main-color: #477dba; /*bleu*/
		
    --shadow-color: rgba(208, 179, 62, 0.3);
    --white-color: rgb(255, 255, 255);
    --white-opal-color: rgba(255, 255, 255, 0.8);  
    
    /* --CRM-color: rgb(123, 176, 98); vert */
    --succes-color: rgb(23, 161, 23);
    --danger-color: rgb(185, 26, 26);

    --coral: #ff9994;

    --border-table:rgb(160, 160, 160);
    --gray-color: rgb(128, 128, 128);
    --dark-gray-color:rgb(72, 72, 72) ;
    --surface-color: #1b262c;
    --black-color: rgb(12, 11, 11);
    --black-color2:  rgba(0, 0, 0, 0.6);
    --background-error-color: rgba(25, 158, 157, 1);
  }

/*********************************************************************************************
                                   Pour tous les pages
**********************************************************************************************/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--default-font);
}

/*********************************************************************************************
                                        Navbar
**********************************************************************************************/
#header{
    position: fixed;
    width: 100%;
    z-index: 1000000;
}
#menu-btn{
   font-size: 40px;
}
.navbarmenu ul li > a,
.nav-link.active{
    background-image: linear-gradient(var(--nav-hover-color), var(--nav-hover-color));
    background-size: 0 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size 0.5s ease;
}
.nav-link.active{
    color: var(--nav-hover-color) !important;
}
.navbarmenu ul li:hover > a,
.nav-link.active:hover{
    color: var(--nav-hover-color) !important;
    background-size: 100% 1px;
}
.menu-ouvert{
    width: 300px !important;
}
.dropdown:hover .dropdown-menu {
    display: block;
}

/*********************************************************************************************
                                            Footer
**********************************************************************************************/
.row {
    gap: 1px; /* Ajuste la valeur selon l'espacement souhaité */
}
.footer-menu h6:hover > a{
    color: var(--nav-hover-color) !important;
}
#figma-logo{
    width: 50px;
    height: auto;
}

/*********************************************************************************************
                                        Scroll Top Button
**********************************************************************************************/
.scroll-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    /* right: 2.5rem; */
    /* right: 40px; */
    left: 2rem;
    bottom: 1.25rem;
    /* bottom: 20px; */
    z-index: 99999;
    background-color: var(--main-color);
    width: 50px;
    height: 50px;
    border-radius: 50px;
    transition: all 0.4s;
}
.scroll-top i {
    font-size: 30px;
    color: var(--white-color);
    line-height: 0;
}
.scroll-top:hover {
    background-color: color-mix(in srgb, var(--main-color), transparent 20%);
    color: var(--white-color);
}
.scroll-top.active {
    visibility: visible;
    opacity: 1;
    bottom: 1.25rem;
    /* bottom: 15px; */
}

/*********************************************************************************************
                                    Page accueil (index) et formation
**********************************************************************************************/
#moi{
    max-width: 40%;
    max-height: 40%;
}
.introduce{
    color: var(--main-color) !important;
}
.box-shadow{
    box-shadow: 1px 0.5px 0px var(--main-color); 
    -webkit-box-shadow: 1px 0.5px 0px var(--main-color); 
    -moz-box-shadow: 1px 0.1px 0px var(--main-color); 
}
.box-shadow-left{
    box-shadow: -1px 0px 0px var(--main-color); 
    -webkit-box-shadow: -1px 0px 0px var(--main-color); 
    -moz-box-shadow: -1px 0px 0px var(--main-color); 
}
.box-shadow-right{
    box-shadow: 1px 0px 0px var(--main-color); 
    -webkit-box-shadow: 1px 0px 0px var(--main-color); 
    -moz-box-shadow: 1px 0px 0px var(--main-color); 
}
/* afficher les sources des images sur la page formation et projets */
.image-source {
    display: none;
    position: absolute;
    font-size: 12px;
    bottom: 5px; /* Ajuste la position sous l'image */
    left: 25%;
    transform: translateY(-150px);
    white-space: nowrap;
}
.categorie-container:hover .image-source,
.image-container:hover .image-source {
    display: block;
}
.icon-diplom{
    height: 80px;
    width: 80px;
    margin-top: -50px;
}
.lien-intern a:hover,
.container-option-BTS-SIO p > strong{
    color: var(--main-color) !important;
}
#logo-onisep{
    height: 100px;
}

/*********************************************************************************************
                                    Page accueil TIMELINE
**********************************************************************************************/
.alcim {
    font-size: 1.6rem;
    /* margin-bottom: 2rem; */
    color: var(--main-color);
}

.alcim-veille{
    font-size: 1.2rem;
    color: var(--main-color);
}

/* Ligne verticale centrale */
.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 8px;
    width: 4px;
    background: var(--main-color);
    transform: translateX(-50%);
    z-index: 0;
}
.timeline-item {
    width: 90%;
    /* left: 0 !important; */
    text-align: left !important;
    margin-left: 20px;
    margin-bottom: 2rem;
    position: relative;
}
/* L'icone cercle sur la ligne centrale */
.timeline-icon {
    position: absolute;
    border-radius: 50%;
    z-index: 1;
}
/* Position des icones selon gauche/droite */
.timeline-item:nth-child(odd) .timeline-icon {
    right: -20px;
}
.timeline-item:nth-child(even) .timeline-icon {
    left: -20px;
}
/* Contenu timeline */
.timeline-content {
    background: var(--black-color);
    box-shadow: 0 0 10px rgba(149, 131, 60, 0.3);
    padding: 1rem;
    border-radius: 1rem;
}
/* Animation de base (hors écran + invisible) */
.hidden-left {
    opacity: 0;
    transform: translateX(-100px);
    transition: all 0.8s ease-out;
}
.hidden-right {
    opacity: 0;
    transform: translateX(100px);
    transition: all 1s ease-out;
}
/* Quand visible, on revient à position normale */
.show {
    opacity: 1;
    transform: translateX(0);
}

/*********************************** les boutons **********************************************/
.portfolio-btn{
    color: var(--nav-hover-color);
    border-color: var(--nav-hover-color) !important;
}
.portfolio-btn:hover{
    background-color: var(--nav-hover-color);
    color: var(--white-opal-color);
}
#smile{
   height: 5%;
   width: 5%;
   min-height: 30px;
   min-width: 30px;
}
#IRIS{
    width: 30%;
    min-width: 200px;
}

/*********************************************************************************************
                                Page projets -partie compétences // veille sourds
**********************************************************************************************/
.langage{
    color: var(--main-color) !important;
}
.outil-image{
    max-width: 50%;
    height: auto;
    object-fit: contain;
    border: 3px solid var(--white-opal-color);
    padding: 4px;
}
.veille-image{ /*veille sourde */ 
    max-width: 90%;
    height: auto;
    object-fit: contain;
}
#image-veille-gant{  /*veille sourde */ 
    max-width: 75%
}
.outil-liste .outil-item, /*projets et mini-crm  */
.categorie-liste .categorie-item, /*veille sourde  */
.fonctionnalites-liste .fonctionnalites-item{  /*Linkstream  */
    cursor: grabbing;
    user-select: none;
    cursor: pointer;
}
.outil-liste .outil-item:active,
.categorie-liste .categorie-item:active, /*veille sourde  */
.fonctionnalites-liste .fonctionnalites-item{  /*Linkstream  */
    cursor: grabbing;
}
.categorie-container .card, /*veille sourde */ 
.IDE-container .card{
    width: 300px;
    max-width: 300px;
    height: 440px;
    background-color: transparent;
    border-color: var(--nav-hover-color) !important;
}
.categorie-container .card{ /*veille sourde */ 
    height: 600px;
}
.card.language{
    height: 350px;
}
.categorie-container .card.language{ /*veille sourde */
    height: 600px;
}

/*********************************************************************************************
                        Page projets -partie Réalisations Professionnelles
**********************************************************************************************/
#CRM,
#mediastock,
#cryptovault{
    width: 75%;
}

/*********************************************************************************************
                                    Projets-card à flipper
**********************************************************************************************/
.flip-card{
    width: 100%;
    height: 550px; /* Hauteur fixe pour éviter que le flip dépasse */
    perspective: 1000px;
    cursor: pointer;
}
.flip-card-inner{
    /* position: relative; */
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}
.flip-card.flipped .flip-card-inner{
    transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back{
    /* position: absolute; */
    width: 100%;
    height: 550px;
    backface-visibility: hidden;
    border-radius: 1rem;
    /* border:1px solid var(--main-color); */
    border: 1px solid color-mix(in srgb, var(--main-color) 50%, transparent);
}
.flip-card-back{
    transform: rotateY(180deg);
    background: var(--dark-gray-color) !important;
}

/* ********************************************************************************************* */
/*   Carousel des outils/logiciels utilisés; langages pratiqués et Mini-CRM, Tchat, MediaStock   */
/* ********************************************************************************************* */
.slider-wrapper{
    overflow: hidden;
    max-width: 1100px;
    user-select: none;
}

/******************************* bullets en-sous de la carousel *************************************/
.slider-wrapper .swiper-pagination-bullet {
    background: var(--white-opal-color);
    height: 15px;
    width: 15px;
    opacity: 0.5;
}
.slider-wrapper .swiper-pagination-bullet-active{
    opacity: 1;
}

/************************************** carousel boutons *******************************************/
.slider-wrapper .swiper-slide-button{
    color: var(--white-opal-color);
    height: 30px;
    transition: 0.2s ease;
}
.slider-wrapper .swiper-slide-button:hover{
    color: var(--nav-hover-color) !important;
}
.swiper-button-next{
    margin-right: 30px;
}
.swiper-button-prev{
    margin-left: 30px;
}

/*********************************************************************************************
                                     Page RP Mini-CRM, Chat, MediaStock, Linkstream
**********************************************************************************************/
#image-crm,
#image-mediastock{
    width: 270px;
    height: auto;
    object-fit: contain;
}

/* leellenörizniii!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
.CRM-container .card,
.MediaStock-container .card{
    width: 340px;
    max-width: 340px;
    height: 600px;
    background-color: transparent;
    /* border-color: var(--CRM-color) !important; */
}
.Chat-container .card,
.linkstream-container .card{
    height: 550px;
    max-width: 340px;
    width: auto;
    background-color: transparent;
}
#user-list{
    height: 400px;
    width: auto;
}
.slider-wrapper .swiper-slide-button.CRM:hover,
.CRM-container:hover .card-title{
    color: var(--CRM-color) !important;
}
.slider-wrapper .swiper-slide-button.MediaStock:hover,
.MediaStock-container:hover .card-title{
    color: var(--coral) !important;
}
.slider-wrapper .swiper-slide-button.Chat:hover,
.Chat-container:hover .card-title,
.linkstream-container:hover .card-title{
    color: var(--main-color) !important;
}
.CRM-image,
.MediaStock-image{ /*image à "zoomer"  */
    max-width: 100%;
    height: auto;
    cursor: zoom-in;
    transition: transform 0.3s ease;
    display: block;
    z-index: 100;
}

.MediaStock-image{
    max-width: 60%;
}
 /*image "zoomé" en plein d'écran */

.zoom-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--black-color2);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.zoomed {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  box-shadow: 0 0 10px var(--white-opal-color);
  border-radius: 10px;
  background-color: var(--dark-gray-color);
  cursor: zoom-out;
  z-index: 1000;
}

.fst-italic.CRM,
.mini-crm,
.fst-italic.Chat,           /* page Chat */
.jours,                     /* page Chat */
.Chat,                      /* page Chat */ 
.fst-italic.MediaStock,     /* page MediaStock */  
.mediastock,                /* page MediaStock */
.fst-italic.LinkStream{        
    color: var(--main-color) !important;
}



/*********************************************************************************************
                                     Page La veille
**********************************************************************************************/
.sujet-veille,
.veille-title:hover > h2{
    color: var(--main-color) !important;
}
.img-outils{
    height: 600px;
    width: auto;
    object-fit: cover;
    min-width: 300px;
    min-height: auto; 
}
#IA-sourds,
#IA-handicap_physique{
    height: 300px;
    width: auto;
}
.images-logo{
    height: 150px;
    width: 150px
}
#interview-mobilfirst{
    width: 70%;
}

/******************* pour acceder à des pages des veilles spécifiques ************************/
.service-card .card-action{
    width: 90px;
    height: 90px;
    background-color: var(--main-color);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3 ease;
}
.services:hover .card-action{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.service-card .card-action i{
    font-size: 24px;
    color: var(--white-color);
    transition: transform 0.3s ease;
}
.service-card .card-action:hover i{
    transform: rotate(45deg);
}
.services{
    position: relative;
    border: 2px solid color-mix(in srgb, var(--white-opal-color), transparent 90%);
    transition: all 0.3s ease;
    z-index: 1;
}
.services:hover{
    border-color: transparent;
    background-color: none;
}

/* mettre une couche pour le rectangulaire spécial */
.services::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  /* background-color: var(--gray-color); */
    background-color: color-mix(in srgb, var(--gray-color), transparent 90%);
    clip-path: polygon(70% 0, 100% 30%, 100% 100%, 0 100%, 0 0);
    z-index: -1;
    opacity: 0;
    /* visibility: hidden; */
    transition: all 0.3s ease;
}

.services:hover::before {
    opacity: 1;
    visibility: visible;
}


/*********************************************************************************************
                                        Page veille: IA et sourds
**********************************************************************************************/

.references a:hover,
.defis .text-decoration-underline{
    text-decoration-color: var(--main-color) !important;
    text-decoration-thickness: 2px !important;
}
table {
    border-collapse: collapse;
    border: var(--border-table);
    /* letter-spacing: 1px; */
}

.table tbody tr:nth-of-type(even) > *{
    color: var(--main-color) !important;
}

th,
td {
    border: 1px solid var(--border-table);
    padding: 8px 10px;
    text-align: center;
    font-style: italic;
}

.box-shadow-IA{
    box-shadow: 2px 2px 0px var(--main-color); 
    -webkit-box-shadow: 2px 2px 0px var(--main-color); 
    -moz-box-shadow: 2px 2px 0px var(--main-color); 
}

.references-liens ul li>a{
    color: var(--white-color);
    font-style: italic;
}
.references-liens ul li>a:hover{
    color: var(--main-color);
}

/* Style quand l'accordéon est ouvert => mot reste jaune! */
.accordion-button:not(.collapsed) {
    color: var(--main-color) !important; 
    background-color: transparent; /* Garder le fond sombre */
    box-shadow: none; /* Supprimer l'effet de bordure Bootstrap */
}

/* Supprime la flèche par défaut */
.accordion-button::after {
    background-image: none !important;
}

/* Ajoute une flèche personnalisée en jaune */
.accordion-button::after {
    content: "⯈"; 
    color: var(--main-color);
    font-size: 1.2rem;
    margin-left: auto;
    transition: transform 0.3s ease;
}

/* Quand l'accordéon est ouvert => pivoter la flèche */
.accordion-button:not(.collapsed)::after {
    transform: rotate(90deg);
}

/* pour lier le caroussel et les inscriptions */
/* Défilement fluide des ancres */
html { 
    scroll-behavior: smooth; 
}

/* Marge sous la navbar quand on arrive sur une ancre #categorie-* */
[id^="categorie-"] { 
    scroll-margin-top: 180px; 
}




/*********************************************************************************************
                                        Page GPI
**********************************************************************************************/
.container-strong-GPI strong{
     color: var(--main-color) !important;
}

/*********************************************************************************************
                                        Page Contact
**********************************************************************************************/
#remplir p,
/* pouar valider si le text entrée est megfelelö */
.text-success{
    color: var(--main-color);
}
.costum-check:hover a{ /* majd megnezni hogy összevonhato-e!!! */
    color: var(--main-color) !important;
}
input, textarea {
    text-shadow: 0px 2px 5px var(--gray-color);
}
.text-danger{
    color: var(--danger-color);
}
.megfelelo{
    outline: 0.2rem solid var(--main-color);
    outline-offset: 0.2rem;
}
.nem-megfelelo{
    outline: 0.2rem solid var(--danger-color);
    outline-offset: 0.2rem;
}
.hidden{
    display: none;
}
.visible{
    display: block;
    color: var(--succes-color);
}
/******************************************** Checkbox *******************************************/

.costum-check label {
    line-height: 1.5;
    min-width: 300px;
}
#egyetertes + label::before{
    content: "";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem; /* 8px */
    height: 1.5rem;
    background-color: var(--white-color);
    margin-right: 1rem;
    font-weight: 700;
     /* il ne faut pas border, car le background exterieur est noir! */
}
#egyetertes:checked + label::before{
    content: "X";
    color: var(--black-color);
    outline: 0.2rem solid var(--main-color);
    outline-offset: 0.2rem;
}

.costum-check label:last-child{
    margin-left: 20px;
}

/*********************************************************************************************
                                    Page Error et Plan du site
**********************************************************************************************/
.contenu{
    margin: auto;
    display: grid;
}
#main-error,
#main-plan-site{
    background-color: var(--background-error-color);
    height: 100%;
}
#error-cible,
#cible-a-trouver{
    width: 100%;
    max-width: 800px;
}
.fejlec h1{
    font-size: 4rem;
    font-weight: 900;
}
#error-btn:hover{
    color: var(--white-color) !important;
}
.explication,
.pages-liste{
    /* grid= grille permet d'aligner des éléments sous forme de colonnes et de lignes mais à 
    la différence des tableaux, la grille n'a pas de structure de contenu. */
    display: grid;
    /* pour définir les espaces entre lignes et colonnes */
    gap: 2rem;
    /* prendre en charge les 2 propriétés d'alignement:
                        --align-content 
                        --justify-content */
    place-content: baseline;
}
.pages-liste ul li:hover > a{
    color: var(--danger-color) !important;
}

/* afficher les sources des images ... la base se trouve sur la page formation et projets */
/* .image-source.tir{ */
    /* bottom: 5px; Ajuste la position sous l'image */
    /* left: 75%; */
    /* transform: translateY(-550px); */
/* } */

/*********************************************************************************************
                                    Page Mentions légales
**********************************************************************************************/

.container-a a:hover,
.mentions.h1{
    color: var(--main-color) !important;
}

/* .text-decoration-underline {
    text-decoration: underline !important;
    text-decoration-color: var(--main-color) !important;
} */

/* =============================================================================================== */
/*                                      📱 RESPONSIVE DESIGN */
/* ================================================================================================ */

@media screen and (min-width: 768px){
    #error-cible,
    #cible-a-trouver {
        min-width: 350px;
        grid-area: 1 / 2 / 3 / 2;
        padding-top: 100px !important;
    }
    /* page accueil et formation */
    .section:nth-of-type(1) .order-md-1 {
        padding-left: 5rem;
    }
    .section:nth-of-type(2) .order-md-2 {
        padding-right: 5rem;
    }

  /* page d'accueil TIMELINE*/
   .timeline::before {    
        left: 50%;
    }
    .timeline-item {
        width: 50%;
        max-width: 700px;
        position: relative;
        padding: 2rem 2rem;
        box-sizing: border-box;
        margin-left: 0;
    }
     /* Impairs à gauche */
    .timeline-item:nth-child(odd) {
        left: 0;
        text-align: right;
    }
    /* Pairs à droite */
    .timeline-item:nth-child(even) {
        left: 50%;
        text-align: left;
    }
    /* Icônes impairs (gauche) */
    .timeline-item:nth-child(odd) .timeline-icon {
        right: -20px;
        left: auto;
    }
    /* Icônes pairs (droite) */
    .timeline-item:nth-child(even) .timeline-icon {
        left: -20px;
        right: auto;
    }
}