body {
    font-family: 'Segoe UI', sans-serif;
    margin: 0%;
    padding: 0%;
}

#background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 99vw;
    height: 100vh;
    object-fit: cover;
    z-index: -1;
}
html {
    scroll-behavior: smooth;
}
.separateur{
    width: 150vh;
    height: 0.01vh;
    margin-left: 10%;
    margin-top: 5%;
    border-radius: 10px;
}
/*
---------------------------------------- Zone Accueil --------------------------------------------------------------
*/

.navbar {
    position: fixed;
    max-width: 60%;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1% 0;
    text-align: center;
    border-radius: 30px;
    margin-left: 20%;
    margin-top: 1%;
}

.navbar ul {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 4%; /*espace entre les ul (mot)*/
}

.navbar li a {
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
}
/*Trait sous les mots de la nav bare*/
.navbar li a:hover {
    text-decoration: underline;
}

.accueil {
    text-align: center;
    margin-bottom: 0%;
    margin-top: 11%;
    justify-content: center;
}
.accueil form {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}
.accueil form label {
    display: none; /* cache le label "Choisir une personne :" */
}
#personId {
    background-color: transparent;   /* enlève le fond blanc */
    appearance: none; /* enlève le style natif (flèche par défaut) */
    font-size: 400%;
    animation: opaciterNom 5s ;
    min-width: 12ch;
    border-color: transparent;
}
/* Option interne : fond transparent aussi */
#personId option {
    background-color: transparent;
    border-color: transparent;
    color: black;
}

.bas-btn {
    position: relative;
    width: 4.5%;
    height: 18vh; /*en vh pour se référer à la taille de l'écran*/
    background-color: transparent;
    border-radius: 30px;
    cursor: pointer;
    overflow: hidden;
    margin-top: 3%;
    display: inline-block; /* pour pouvoir appliquer width et height */
    text-decoration: none; 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
    margin-bottom: 4%;
}
.bas-btn::before {
    content: "ᐯ";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 200%;
    color: var(--arrow-color); /* ⚡ récupère la variable inline */
    animation: descend 2s infinite;
}
@keyframes descend {
    0% { top: 0; opacity: 0.2; }
    50% { top: 50%; opacity: 1; }
    100% { top: 100%; opacity: 0; }
}
.petit_bouton{
    padding: 5px;
    border: none;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}
/*quand on le survole*/
.petit_bouton:hover {
    transform: scale(1.05);
}
/*au clic sur le bouton*/
.petit_bouton:active {
    transform: scale(0.98);
}
/*
---------------------------------------- Zone Motivation --------------------------------------------------------------
*/
.container {
    max-width: 80%;
    margin: 10% auto;
    padding: 1%;
    background: rgba(255, 255, 255, 0.651);
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    border-radius: 30px;
}
#motivation{
    margin-left: 5%;
    margin-right: 5%;

}
.photoProfil {
    width: 20%;
    border-radius: 70%;
    height: 20%;
}
header {
    display: flex;
    margin-top: 5%;
}
.contact {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 3rem;
}
.cercle {
    width: 20vh;          /* taille fixe du cercle */
    height: 20vh;
    border-radius: 50%;    /* rend le conteneur circulaire */
    overflow: hidden;      /* cache ce qui dépasse du cercle */
    /*border: 2px solid #c8ad7f; /* optionnel : contour */
}
.cercle img {
    width: 100%;
    height: 100%;
    object-fit: cover;  /* ajuste l’image au cercle sans déformation */
}
.imageTaille{
    display: flex;
    flex-direction: column; /* empile image + texte */
    align-items: center;     /* centre horizontalement */
    text-align: center;
    min-width: 25%;
}
/*
---------------------------------------- Zone Entreprise --------------------------------------------------------------
*/
/* Section entreprise */
#entreprise {
    margin-left: 10%;
    margin-right: 15%;
    margin-top: 0%;
}


/* Logos */
.logo-left {
    width: 30%;
    height: auto;
    margin-right: 7%;
    margin-top: 5%;
    transition: transform 0.3s ease;
    order: 0; /* placé avant le texte */
}

.logo-left:hover {
    transform: scale(1.1);
}

.logo-right {
    width: 30%;
    height: auto;
    margin-left: 7%;
    margin-top: 5%;
    transition: transform 0.3s ease;
    order: 1; /* placé après le texte */
}

.logo-right:hover {
    transform: scale(1.1);
}

/* Conteneurs entreprise */
.entrepriseGénéral{
    display: flex;
    align-items: flex-start;
    margin-top: 5%;
}

/*
---------------------------------------- Zone Competances --------------------------------------------------------------
*/
#competence {
    margin-left: 5%;
    margin-right: 5%;
}

.competence1 {
    display: flex;
    flex-wrap: wrap; /* ⭐ autorise le retour à la ligne */
    justify-content: center;
    align-items: center;
    gap: 2%; /* espace propre entre les logos */
    margin-top: 2%;
}

.logo3 {
    width: 13%;
    height: auto;
    transition: transform 0.3s ease;
}

.logo3:hover {
    transform: scale(1.1);
}

/*
---------------------------------------- Zone projet --------------------------------------------------------------
*/
#projet {
    margin-left: 5%;
    margin-right: 5%;
}

.pdf {
    display: flex;
}

.pdf-frame {
    width: 40rem; 
    height: 35rem; 
    border: 1px solid #ccc; 
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.espace {
    margin-right: 5%;
    margin-top: 5%;
}
.espace2 {
    margin-right: 5%;
    margin-top: 5%;
    display: flex;
}
.grille {
    margin-left: 10%;
}
.pdf-list-Comp {
    margin-left: 5%;
}
/*
---------------------------------------- foooter --------------------------------------------------------------
*/
.contactener {
    margin-top: 10%;
    padding: 1%;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.mapgg {
  width: 150%;
  height: 25vh;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  margin-left: 10%;
}
.info {
    margin-left: 20%;

}
.info2 {
    margin-left: 10%;
    margin-top: 2%;

}
.titrefooter {
    margin-left: 2%;
    margin-top: 0%;
    margin-bottom: 2%;
}
/*
---------------------------------------- Page Admin --------------------------------------------------------------
*/
@keyframes zoom {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

body.zoomEffect {
  animation: zoom 0.6s ease-out forwards;
  margin-top: 0%;
}
/*
---------------------------------------- Page login Admin --------------------------------------------------------------
*/
/*Pour décollé la nav barre de la box*/
#loginpage { 
    padding: 10%;
}

#loginAdmin {
    padding: 2% 4%;
    text-align: center;
    background-color: #f9f9f9;
    border-radius: 12px;
    max-width: 400px;
    margin: auto; /* centre automatiquement */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* Titre */
#loginAdmin h1 {
    margin-bottom: 40px;
    font-size: 28px;
    color: #000000;
}

/* Groupe de champs */
.form-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.form-group label {
    margin-bottom: 8px;
    font-weight: 600;
}

.form-input {
    width: 70%;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
}

/* Bouton */
.form-button {
    background-color: #c8ad7f;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.form-button:hover {
    background-color: #685a42;
    transform: scale(1.05);
}

.form-button:active {
    background-color: #685a42;
    transform: scale(0.98);
}
#designe {
    padding-left: 20%;
}
/*
---------------------------------------- Page Gestion Admin --------------------------------------------------------------
*/
/*Pour décollé la nav barre de la box*/
#Gestion {
    padding: 5%;
    max-width: 1200px;
    margin: auto;
}

.adminteneur {
    padding: 2% 5%;
    border-radius: 15px;
}
.centreInteretImg {
    padding-bottom: 5.3rem;
}

.img-centre-interet {
    width: 120px;
    height: 80px;
    object-fit: contain;
    margin: 5px;
}

.images-centre-interet {
    display: flex;
    flex-wrap: nowrap; /* reste sur une seule ligne */
    justify-content: flex-start;
    gap: 10px;
    overflow-x: auto; /* ajoute un scroll horizontal si vraiment trop serré */
}


.boutonform {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    margin-left: 30%;
}

/*------------------------bulle info--------------------------*/
.form-group {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Le rond avec le "?" */
.help-icon {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #ccc;
    font-size: 12px;
    font-weight: bold;
    color: #555;
    background-color: #fff;
    cursor: help;
}

/* La bulle */
.help-tooltip {
    position: absolute;
    left: 50%;
    top: 130%;
    transform: translateX(-50%);
    min-width: 220px;
    max-width: 260px;
    padding: 8px 10px;
    background-color: #fff;
    color: #333;
    border-radius: 4px;
    border: 1px solid #ddd;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    font-size: 12px;
    line-height: 1.4;
    z-index: 10;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

/* Petite flèche */
.help-tooltip::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 6px 6px 6px;
    border-style: solid;
    border-color: transparent transparent #ddd transparent;
}

.help-tooltip::after {
    content: "";
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 5px 5px 5px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
}

/* Affichage au survol */
.help-icon:hover .help-tooltip {
    opacity: 1;
    pointer-events: auto;
}
.logout-container {
    margin-top: 5%;
}

/*
---------------------------------------- Page veille --------------------------------------------------------------
*/
#video_veille {
    padding: 7%; /* un padding plus raisonnable */
    
}

.videos-grid {
    display: flex;
    flex-wrap: wrap; /* permet de passer à la ligne */
    gap: 1rem;       /* espace entre les vidéos */
    justify-content: center; /* centrer les vidéos */
}

.video-card {
    flex: 1 1 300px; /* chaque vidéo prend au moins 300px */
    max-width: 400px; /* limite la largeur */
}


/*
------------------------------------------------------------------
CSS pour téléphone 
-----------------------------------------------------------------
*/

/* === Responsive === */
@media screen and (max-width: 600px) {
    html, body {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        overflow-x: hidden; /* évite le décalage horizontal */
    }
    .navbar {
        position: static;
        left: 0;
        margin: 0;
        width: 100%;
        max-width: 100%;
    }
    .navbar ul {
        display: flex;
        flex-wrap: wrap;       /* permet de passer à la ligne si pas assez de place */
        justify-content: center;
        gap: 10px;             /* espace entre les liens */
        list-style: none;
        margin: 0%;
        padding: 0;
    }

    .navbar li {
        flex: 0 1 auto;        /* largeur auto, ne force pas 100% */
    }

    .navbar li a {
        display: block;
        padding: 10px 15px;
        font-size: 16px;
        font-weight: bold;
    }

    #nom{
        font-size: 200%;
        animation: opaciterNom 5s ;
        min-width: 12ch;
    }
    .accueil {
        margin-top: 50%;
    }
    .container {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 10px;
        box-sizing: border-box;
        border-radius: 0;
        margin-top: 40%;
    }
    .bas-btn {
        width: 18%; 
    }
    header {
        display:block;
        margin-top: 7%;
    }
    .photoProfil {
        width: 50%;
        height: 50%;
        margin-left: 25%;
    }
    .entrepriseGénéral {
        flex-direction: column;   /* empile verticalement */
        align-items: center;      /* centre horizontalement */
        text-align: center;
    }

    .logo-left,
    .logo-right {
        order: 0;                 /* logo en premier */
        margin-bottom: 10px;
        width: 70%;
    }

    .entrepriseGénéral div {
        order: 1;                 /* texte après le logo */
        width: 100%;              /* occupe toute la largeur */
    }
    .competence1,
    .competence2 {
        display: flex;
        flex-wrap: wrap;       /* autorise les logos à passer à la ligne */
        justify-content: center; /* centre les logos */
        gap: 10px;             /* espace entre les logos */
    }
    .logo3 {
        width: 20%;
    }
    .pdf {
        display: block;
    }
    .pdf-frame {
        width: 22rem; 
        height: 15rem; 
    }
    .mapgg {
        width: 100%;
        margin-left: 0%;
    }
    .info {
        margin-left: 0%;

    }
    .info2 {
        margin-left: 0%;

    }
    
    .FormMobile {
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 100%;
        padding: 10px;
    }

    /* Chaque ligne label + champ */
    .FormMobile .form-row {
        display: flex;
        flex-direction: column; /* label au-dessus du champ */
        gap: 6px;
    }

    /* Style des labels */
    .FormMobile .form-row p:first-child {
        font-weight: bold;
        margin: 0;
    }

    /* Style des inputs */
    .FormMobile .form-row .form-input {
        width: 100%;
        min-height: 38px;
        padding: 8px 10px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }
    #loginAdmin {
        max-width: 100%;
        margin-left: 0%;
    }
}