/* ----------- STYLE GLOBAL ----------- */
body {
    font-family: Arial, sans-serif;
    background: #f4f9f9;
    color: #222;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

h1 {
    text-align: center;
    background: #00979D;  /* Bleu Arduino */
    color: white;
    padding: 20px;
    margin: 0 0 30px 0;
}

h2 {
    color: #00979D;
    border-left: 5px solid #FF9900;
    padding-left: 10px;
    margin-top: 40px;
}

/* ----------- PARAGRAPHES ----------- */
p {
    width: 85%;
    margin: auto;
    text-align: justify;
    line-height: 1.7;
}

/* ----------- LISTES ----------- */
ul {
    width: 80%;
    margin: auto;
    padding-left: 40px;
}

/* ----------- FIGURES + IMAGES ----------- */
figure {
    text-align: center;
    margin: 20px 0;
}

figure img {
    width: 280px;
    max-width: 90%;
    border-radius: 8px;
    box-shadow: 0 2px 8px #0003;
}

.electronic_schema {
    width: 75%;
    display: block;
    margin: 20px auto;
    border-radius: 10px;
    box-shadow: 0 2px 10px #0004;
}

/* ----------- VIDÉOS ----------- */
/* Conteneur pour aligner les vidéos */
.video-container {
    display: flex;              /* active flexbox */
    justify-content: center;    /* centre horizontalement */
    align-items: flex-start;    /* aligne les vidéos en haut */
    gap: 20px;                  /* espace entre les vidéos */
    flex-wrap: wrap;            /* passe en colonne si l’écran est trop petit */
}

/* Style pour les vidéos */
.video-container video {
    width: 300px;               /* largeur fixe */
    max-width: 100%;            /* responsive */
    border-radius: 10px;
    border: 3px solid #00979D; /* couleur Arduino */
}


/* Container automatique pour les 3 vidéos */
p > figure {
    display: inline-block;   /* Permet alignement horizontal */
    margin: 10px;
}

.legend_1, .legend_2, .legend_3 {
    color: #FF9900;
    font-style: italic;
}

/* ----------- MISE EN PAGE RESPONSIVE ----------- */
@media (max-width: 900px) {
    video {
        width: 90%;
    }
    
    figure img {
        width: 90%;
    }
}