#heading { /* titre du heading */
    display: flex;
    box-sizing: border-box;
    width: 90%;
    border: solid blue 1px;
    margin: 0 auto ;
    justify-content: center;
    background-image: url("pixel.png") ;
}
*{
    font-family: MS gothic;
}
p {
    margin: 0%;
}
body { /* fond d'écran*/
    background-image: url("background2.png");
    background-size: cover;
    font-family: Arial, sans-serif;
}
#nav1 { /* panneau de navigation principal*/
    
    width: 80%;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    background-color: rgb(145, 128, 255, 0.732);
    border: 4px solid #001aff; 

}
.button1 { /* boutton sur le nav1 */
    width: 150px;
    height: 50px;
    margin: 5px;
    border-radius: 10px;
    background-color: aqua;
    display: flex;            /* active le flex pour le contenu */
    justify-content: center;  /* centre horizontalement le texte */
    align-items: center;      /* centre verticalement le texte */
}

h1 {
    font-size: 50px;
    font-family: Arial, Helvetica, sans-serif;
}
h2 {
    font-size: 30px;
    font-family: Arial, Helvetica, sans-serif;
}
h3 {
    margin: 0%;
    font-size: 20px;
    padding: 3px;
}
.grid { /*premiere grid*/
    display: grid;
    border: 1px black solid;
    width: 80%;          /* ← prend 90% de la page */
    margin: 0 auto;      /* ← centre horizontalement */
    grid-template-columns:1fr 2fr 1fr; 
    grid-template-rows: repeat(1, 500px);

    place-items: center;
    gap: 12px;
}
.child {
    width: 100%;             
    height: 100%;             
    background-image: url("pixel.png");
    background-size: cover;
    background-color: #333;
    border: 4px solid #888;    /* marge extérieure */
    padding: 16px;             /* marge intérieure */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.child iframe {
    width: 120%;
    height: 120%;
    border: 0;
    display: block;
}
.grid2 {
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-columns: repeat(3, calc((100% - 6px)/3)); /* 3px de gap entre colonnes → 2 gaps = 6px */
    grid-template-rows: repeat(4, calc((100% - 9px)/4));   /* 3px de gap entre 4 lignes → 3 gaps = 9px */
    gap: 3px;
    box-sizing: border-box;
}
.childtitle{ /*titre de la grid principale*/
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(145, 128, 255, 0.732);
    border: dashed black 2px;
    grid-column: 1 / span 3; 
    grid-row: 1;
    border: 4px solid #9fa1b3;
    
}
.childphoto{ /*photo a gauche de la grid principale*/
    display: flex;
    justify-content: center;  /* centre horizontalement le GIF */
    align-items: center;      /* centre verticalement */
    background-color: rgba(42, 44, 165, 0.732);
    border: dashed rgb(148, 146, 146) 4px;
    grid-row: span 2; 
    grid-column: 1;
    flex-direction: column;
    overflow: hidden;         /* cache le bas du GIF si nécessaire */
    position: relative;       /* nécessaire pour l'iframe en absolute */
}
.childmain{ /*main de la grid principale*/
    display: flex;
    justify-content: center;
    align-items: center;
    grid-row: 2/ span 2; 
    grid-column: 2 / span2 ; 
}
.matrice3x4{ /*décomposition de la main grid en 3x4*/
    display: grid;
    width: 99%;
    height: 100%;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: repeat(3 , 33.33%);
    place-content: center;
    box-sizing: border-box;
    grid-row: 5px;
    background-color: #333;
    border: 4px solid #888;
}
.childphoto3x4gauche{ /*décomposition en deux de la 3x4 gauche*/
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(145, 128, 255, 0.732);
    grid-column: 1 / 3;   /* colonne 1 à 2 */
    grid-row: 1 / 4;
}
.childphoto3x4droite{ /*décomposition en deux de la 3x4 droite*/
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(145, 128, 255, 0.732);
    grid-column: 3 / 5;   /* colonne 2 à 4 */
    grid-row: 1 / 4;

}
.box { /* box contenant les différents <p> , ils sont au nombre de 2 dans la main grid*/
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    gap: 0px;
}
.boxpointille { /* boite avec petit pointillé sur toute la longueur de la div*/
    width: 100%;
    border-top: black 1px dashed;
    border-bottom: 1px black dashed;
    padding-left: 8px;
    margin: 0%;
    box-sizing: border-box;
}
.childphotov{ /*photo a gauche de la grid main principale*/
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(145, 128, 255, 0.732);
    border: dashed black 2px;
    grid-row: 4; 
    grid-column: 1 / 3;
}
.box2 {
    width: 95%;
}
.box3 { /* box avec le sybau et le veangelion*/
    border: 1px solid black;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
}

.box3 img {
    max-width: 93%;
    height: auto;
}
.boxbouton {
    width: 100%;
    padding-left: 8px;
    margin: 0%;
    box-sizing: border-box;
    background-color: red;
    padding: 6px;
    margin: 2px;
    
}