body {
    font-family: 'Space Mono', sans-serif;
    background-color: #0D0C0D;
    color: #60B17B;
    font-size: 18px;
    font-weight: 400;
    font-style: normal;
    max-width: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    width: 100%;
}

section {
    padding: 50px;
}

h1 {
    font-family: Noka, sans-serif;
    font-size: 36px;
    font-weight: 800;
    color: #FF1F2C;
    text-align: center;
    cursor: pointer;
}

header {
    display: flex;
    justify-content: center;
    position: sticky;
    padding-left: 50px;
    padding-right: 50px;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    background-color: #0D0C0D;
}

.BackArrow {
    position: absolute;
    top: 21.44px;
    left: 55px;
    margin: 0;
    cursor: pointer;
}

.MusicButton {
    position: absolute;
    top: 14px;
    right: 55px;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 0;
}

.MusicButton img {
    width: 36px;
    height: auto;
    display: block;
    transition: transform 0.2s ease;
}

.MusicButton:hover img {
    transform: scale(1.1);
}

/* BOUTON LANGUE FR | EN (à gauche du bouton musique) */
.LangButton {
    position: absolute;
    top: 14px;
    right: 111px; /* 55px (marge) + 36px (bouton musique) + 20px d'écart */
    height: 36px;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: Noka, sans-serif;
    font-size: 20px;
    font-weight: 800;
    line-height: 36px;
    color: #60B17B;
}

.LangButton .active {
    color: #FFFAFA;
}

.LangButton:hover span:not(.active) {
    color: #FE4C56;
}

h2 {
    font-family: Noka, sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: #FFFAFA;
    text-align: center;
    margin: 0;
}

h3 {
    font-family: Noka, sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: #FE4C56;
    padding: 12px;
    margin: 10px;
}

h4 {
    font-family: Noka, sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #FE4C56;
    padding: 12px;
    margin: 5px;
}

p {
    margin: 0px;
    line-height: 1.5;
}

a {
    color: #60B17B;
    text-decoration: underline;
    cursor: pointer;
}

a:hover {
    color: #FE4C56;
}

img {
    width: 100%;
}

.TvNav {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    text-align: center;
    gap: 20px;
    padding: 50px;
}

.TvLiNav {
    position: relative;
    width: fit-content;
    margin: 0 auto;
}

.TvLiNav > h2 {
    position: absolute;
    z-index: 11;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    cursor: pointer;
    margin: 0px;
    color: #0D0C0D;
}

.TvLiNav:hover > h2,
.TvLiNav:focus > h2 {
    color: #FFFAFA;
}

.TvLiNav > img {
    cursor: pointer;
}

.TvLiNav:hover > img,
.TvLiNav:focus > img {
    filter: drop-shadow(4px 0px 0px #FF1F2C) 
            drop-shadow(-4px 0px 0px #FF1F2C) 
            drop-shadow(0px 8px 0px #FF1F2C) 
            drop-shadow(0px -8px 0px #FF1F2C);
}

.glitchTransition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: 9999;
    background-color: #0D0C0D;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.glitchTransition.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* bloque les clics pendant la transition */
}

ul {
    list-style: none;
}

main {
    position: relative;
    z-index: 10;
    
}

.backgroundEyesLayer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.Eye {
    position: absolute;
    width: 200px;
    height: 180px;
    isolation: isolate;
}

.Eye .Base { position: absolute; width: 100%; z-index: 1; }
.Eye .Pupil { position: absolute; width: 100%; z-index: 2; transition: transform 0.1s ease-out; }
.Eye .Lid { position: absolute; width: 100%; z-index: 3; }

.nomSection {
    position: fixed;
    top: 90px;
    left: 0;
    right: 0;
    z-index: 20;
    padding-bottom: 20px;
    background-color: #0D0C0D;
}

/* SECTION : COLORS PRESENTATION */
.colorsPresentation {
    display: grid;
    grid-template-columns: 300px 1fr;
    grid-template-areas:
    "ordre ."
    ".     titre"
    ".     titre2"
    "cover p1"
    "cover p2";
    column-gap: 100px;
    row-gap: 12px;
}

.colorsPres-ordre { grid-area: ordre; }
.colorsPres-titre { grid-area: titre; justify-self: end; }
.colorsPres-titre2 { grid-area: titre2; justify-self: end; }
.colorsPres-p1 { grid-area: p1; }
.colorsPres-p2 { grid-area: p2; }
.colorsPres-cover { grid-area: cover; }

/* BOUTONS & PLEIN ECRAN */
.coverwtButton {
    position: relative;
    width: 100%;
}

.imgFullscreen {
    width: 100%;
    height: auto;
    display: block;
}

.fullscreenButton {
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: 32px;  
    height: auto;
    cursor: pointer;
    z-index: 15;
}

.closeFullscreenButton {
    display: none;
    position: absolute;
    top: 25px;
    right: 25px;
    width: 35px;
    cursor: pointer;
    z-index: 9999;
}

.coverwtButton:fullscreen,
.coverwtButton:-webkit-full-screen {
    background-color: #0d0c0d;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
}

.coverwtButton:fullscreen .imgFullscreen,
.coverwtButton:-webkit-full-screen .imgFullscreen {
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
}

.coverwtButton:fullscreen .fullscreenButton,
.coverwtButton:-webkit-full-screen .fullscreenButton {
    display: none;
}

.coverwtButton:fullscreen .closeFullscreenButton,
.coverwtButton:-webkit-full-screen .closeFullscreenButton {
    display: block;
}

.coverwtButton:hover {
    outline: 6px solid #FF1F2C;
}

/* SECTION : PAGES COLORS */
.pagesColors {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
    ".    .    Titre"
    ".    .    p"
    "img3 img2 img1"
    "a3   a2   a1"
    ".    img5 img4"
    ".    a5   a4";
    column-gap: 80px;
    row-gap: 24px;
}


.pagesColors-titre { grid-area: Titre; text-align: end; }
.pagesColors-p { grid-area: p; text-align: end; }

.pagesColors-img1 { grid-area: img1; }
.pagesColors-img2 { grid-area: img2; }
.pagesColors-img3 { grid-area: img3; }
.pagesColors-img4 { grid-area: img4; }
.pagesColors-img5 { grid-area: img5; }

.pagesColors-a1 { grid-area: a1; justify-self: center; }
.pagesColors-a2 { grid-area: a2; justify-self: center; }
.pagesColors-a3 { grid-area: a3; justify-self: center; }
.pagesColors-a4 { grid-area: a4; justify-self: center; }
.pagesColors-a5 { grid-area: a5; justify-self: center; }

/* SECTION : COLORS CHARADESIGN */
.ColorsCharadesign {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
    ".     .      titre"
    "Helio Selene Aiko"
    "a3    a2     a1";
    column-gap: 80px;
    row-gap: 24px;
    align-items: start;
}

.charadesign-titre { grid-area: titre; text-align: end; }

.charadesign-aiko { grid-area: Aiko; }
.charadesign-selene { grid-area: Selene; }
.charadesign-helio { grid-area: Helio; }

.charadesign-aiko,
.charadesign-selene,
.charadesign-helio {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4; /* Force un conteneur au ratio identique pour les 3 (ex: 3:4) */
    object-fit: contain;  /* Préserve le dessin entier sans déformation */
    display: block;
}

.charadesign-link-aiko { grid-area: a1; justify-self: center; }
.charadesign-link-selene { grid-area: a2; justify-self: center; }
.charadesign-link-helio { grid-area: a3; justify-self: center; }

/* SECTION : KATANA NO RESHIKI */
.KatanaNoReshiki {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
    ".  .  titre"
    ".  .  soustitre1"
    ".  cover p1"
    ".  .  p1"
    ".  .  soustitre3"
    "p5 p4 p3"
    ".  .  soustitre2"
    "p6 p6 p6";
    column-gap: 80px;
    row-gap: 24px;
}

.katana-titre { grid-area: titre; text-align: end; }
.katana-soustitre1 { grid-area: soustitre1; text-align: end; }
.katana-soustitre3 { grid-area: soustitre3; text-align: end; }
.katana-soustitre2 { grid-area: soustitre2; text-align: end; }

.katana-cover {
    grid-area: cover;
    max-width: 70%;
    justify-self: center;
}

.katana-p1 { grid-area: p1; }
.katana-p3 { grid-area: p3; }
.katana-p4 { grid-area: p4; }
.katana-p5 { grid-area: p5; }
.katana-p6 { grid-area: p6; }

/* SECTION : EXO COURS */
.exoCours {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
    ".      titre"
    "Comics soustitre2"
    "soustitre BD";
    column-gap: 80px;
    row-gap: 24px;
    text-align: end;
}

.exo-titre { grid-area: titre; }
.exo-soustitre { grid-area: soustitre; }
.exo-soustitre2 { grid-area: soustitre2; text-align: start; }

.exo-bd {
    grid-area: BD;
    max-width: 70%;
}

.exo-comics {
    grid-area: Comics;
}

.end-Back-Start {
    position: relative;
    width: 100%;
    height: 600px; /* IMPORTANT: Utiliser height fixe (ou une valeur en vh) au lieu de min-height */
    overflow: hidden !important; /* Emprisonne tout débordement */
    box-sizing: border-box;
}

/* Style des pop-ups d'arrière-plan */
.popup-bg {
    position: absolute;
    top: 0;
    left: 0; /* Ancrage de départ propre */
    width: 22%; 
    max-width: 300px;
    min-width: 150px;
    height: auto;
    pointer-events: none;
    z-index: 1;
    /* Opacité à 0 au départ pour éviter qu'elles ne clignotent en haut à gauche avant le JS */
    opacity: 0; 
    transition: opacity 0.3s ease;
}

/* Classe ajoutée par JS une fois positionnée */
.popup-bg.placed {
    opacity: 1;
}

/* Style du VRAI bouton au premier plan */
.popup-main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 35%;
    max-width: 350px;
    z-index: 19; /* Z-index supérieur à toutes les images générées */
    cursor: pointer;
    transition: transform 0.2s ease;
}

.popup-main:hover {
    transform: translate(-50%, -50%) scale(1.05);
    filter: drop-shadow(4px 0px 0px #FFFAFA) 
            drop-shadow(-4px 0px 0px #FFFAFA) 
            drop-shadow(0px 8px 0px #FFFAFA) 
            drop-shadow(0px -8px 0px #FFFAFA);
}

.popup-main img {
    width: 100%;
    display: block;
}

.presentation {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0 auto;
}

.presen-titre1 {
    font-size: 1.8rem;
    margin-bottom: 8px;
}

.presen-soustitre1, 
.presen-soustitre2 {
    font-size: 1.3rem;
    margin-top: 12px;
}

/* Nouveau conteneur pour aligner le paragraphe et la photo */
.presen-bio {
    display: grid;
    grid-template-columns: 1fr 250px; /* Texte à gauche, photo fixe à droite */
    gap: 40px;
    align-items: center; /* Aligne la photo verticalement au milieu du texte */
    margin-bottom: 24px;
}

.presen-p1 {
    line-height: 1.6;
    margin: 0;
}

.presen-photo {
    width: 100%;
    max-width: 250px;
    height: auto;
    object-fit: cover;
    border-radius: 8px; /* Facultatif : arrondit légèrement les coins de ta photo */
}

/* Grille pour aligner les 3 éléments de contact sur 3 colonnes */
.presen-ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    align-items: start;
}

/* Alignement vertical du logo et du texte dans chaque bloc */
.contact-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}

.contact-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.contact-link {
    color: inherit;
    text-decoration: none;
    font-size: 0.95rem;
    word-break: break-word;
    transition: opacity 0.2s ease;
}

.contact-link:hover {
    opacity: 0.7;
    text-decoration: underline;
}

.section-competences {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Grille principale à 3 colonnes */
.competences-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 40px;
    row-gap: 32px;
    margin-top: 20px;
}

/* Alignement vertical : Logo au-dessus du texte */
.competence-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}

/* Dimensionnement propre des logos */
.competence-logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    display: block;
}
.competence-logo:hover{
    filter: drop-shadow(4px 0px 0px #FF1F2C) 
            drop-shadow(-4px 0px 0px #FF1F2C) 
            drop-shadow(0px 4px 0px #FF1F2C) 
            drop-shadow(0px -4px 0px #FF1F2C);
}

.competence-card p {
    margin: 0;
    font-size: 0.95rem;
}

.pokemon-idea-concept{
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-template-areas:
    "titre . ."
    "soustitre1 . ."
    "starters p1 p1"
    "soustitre2 . ."
    "theme . ."
    "moodboard . ."
    "moodboards-poke moodboards-poke moodboards-poke";
    gap: 40px;
}

.pokemon-idea-titre{grid-area: titre;}
.pokemon-idea-soustitre1{grid-area: soustitre1;}
.pokemon-idea-p1{grid-area: p1;}
.pokemon-idea-imgtriostarter{grid-area: starters;}
.pokemon-idea-soustitre2{grid-area: soustitre2;}
.pokemon-idea-theme{grid-area: theme;}
.pokemon-idea-moodboards{grid-area: moodboard;}

.pokemon-moodboard{
    grid-area: moodboards-poke;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
    "plant water fire";
    gap: 40px;
}

.pokemon-mood1{grid-area: plant;}
.pokemon-mood2{grid-area: water;}
.pokemon-mood3{grid-area: fire;}

.pokemon-fam-plant{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
    "titre . ."
    "img p p"
    "img link1 ."
    "img link2 ."
    "img link3 ."
    "img . .";
    gap: 40px;
}

.pokemon-fam-plant-titre{grid-area: titre;}
.pokemon-fam-plant-p{grid-area: p;}
.pokemon-fam-plant-link1{grid-area: link1; text-align: center;width: fit-content;}
.pokemon-fam-plant-link2{grid-area: link2; text-align: center;width: fit-content;}
.pokemon-fam-plant-link3{grid-area: link3; text-align: center;width: fit-content;}
.pokemon-fam-plant-img{grid-area: img; }

.pokemon-fam-water{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
    "titre . ."
    "img p p"
    "img link1 ."
    "img link2 ."
    "img link3 ."
    "img . .";
    gap: 40px;
}

.pokemon-water-titre{grid-area: titre;}
.pokemon-fam-water-p{grid-area: p;}
.pokemon-fam-water-link1{grid-area: link1; text-align: center;width: fit-content;}
.pokemon-fam-water-link2{grid-area: link2; text-align: center;width: fit-content;}
.pokemon-fam-water-link3{grid-area: link3; text-align: center;width: fit-content;}
.pokemon-fam-water-img{grid-area: img; }

.pokemon-fam-fire{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
    "titre . ."
    "img p p"
    "img link1 ."
    "img link2 ."
    "img link3 ."
    "img . .";
    gap: 40px;
}

.pokemon-fam-fire{grid-area: titre;}
.pokemon-fam-fire-p{grid-area: p;}
.pokemon-fam-fire-link1{grid-area: link1; text-align: center;width: fit-content;}
.pokemon-fam-fire-link2{grid-area: link2; text-align: center;width: fit-content;}
.pokemon-fam-fire-link3{grid-area: link3; text-align: center;width: fit-content;}
.pokemon-fam-fire-img{grid-area: img; }

.pokemon-cartes{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
    "titre . ."
    "broutoro aquiris sonaflam"
    "button1 button2 button3";
    gap: 40px;
}

.pokemon-cartes-titre{ grid-area: titre; }
.pokemon-cartes-Broutoro{ grid-area: broutoro; }
.pokemon-cartes-Aquiris{ grid-area: aquiris; }
.pokemon-cartes-Sonaflam{ grid-area: sonaflam; }
.button-tourner1{ grid-area: button1; width: 15%; justify-self: center; }
.button-tourner2{ grid-area: button2; width: 15%; justify-self: center; }
.button-tourner3{ grid-area: button3; width: 15%; justify-self: center; }

/* --- Effet de retournement --- */
.carte-flip{
    perspective: 1000px;
}

.carte-inner{
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

.carte-flip.flipped .carte-inner{
    transform: rotateY(180deg);
}

.carte-face,
.carte-dos{
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.carte-face{
    position: relative;
}

.carte-dos{
    position: absolute;
    inset: 0;
    transform: rotateY(180deg);
}

.carte-face img.imgFullscreen,
.carte-dos img.imgFullscreen{
    width: 100%;
    display: block;
}

.button-rotate:hover{
    filter: drop-shadow(2px 0px 0px #FF1F2C) 
            drop-shadow(-2px 0px 0px #FF1F2C) 
            drop-shadow(0px 2px 0px #FF1F2C) 
            drop-shadow(0px -2px 0px #FF1F2C);
}

.illus{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
    "titre ."
    "aiko aiko-red"
    "aiko-name aiko-red-name"
    "aiko-desc aiko-red-desc"
    "golf-flow golf-flow"
    "golf-flow golf-flow"
    "golf-flow golf-flow";
    gap: 40px; 
    text-align: center;
    justify-items: center;
}

.illus-titre{grid-area: titre; justify-self: start;}
.illus-aiko{grid-area: aiko; width:50%;}
.illus-aiko-name{grid-area: aiko-name;}
.illus-aiko-red{grid-area: aiko-red; width:50%;}
.illus-aiko-red-name{grid-area: aiko-red-name;}
.illus-aiko-red-description{grid-area: aiko-red-desc;}
.illus-aiko-description{grid-area: aiko-desc;}

.illus-golf-flow{
    grid-area: golf-flow;
    display: grid;
    grid-template-areas:
    "golfeur flowers"
    "golf-name flow-name"
    "golf-desc flow-desc";
    gap: 40px;
    justify-items: center;
    
}

.illus-golfeur{grid-area: golfeur; width:50%;}
.illus-golfeur-name{grid-area: golf-name;}
.illus-golfeur-description{grid-area: golf-desc;}
.illus-flowers{grid-area: flowers; width:50%;}
.illus-flowers-name{grid-area: flow-name;}
.illus-flowers-description{grid-area: flow-desc;}

.rech-explo{
    display: grid;
    grid-template-areas:
    "titre ."
    "atsu soustitre"
    "atsu txt1"
    "colors colors"
    "soustitre3 ."
    "persomanga txt2";
    gap: 40px;
    justify-items: center;
}

.rech-explo-titre{grid-area: titre; justify-self: start;}
.rech-explo-soustitre{grid-area: soustitre; justify-self: start;}
.rech-explo-modelsheet-Atsu{grid-area: atsu; width:80%; }
.rech-explo-Atsu-description{grid-area: txt1;}
.rech-explo-soustitre3{grid-area: soustitre3; justify-self: start;}
.rech-explo-persoManga{grid-area: persomanga; width:80%;}
.rech-explo-txt2{grid-area: txt2;}

.rech-explo-colors{
    grid-area: colors;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
    "soustitre2 . ."
    "details . ."
    "aiko selene helio" ;
    gap: 40px;
    justify-items: center;
}

.rech-explo-soustitre2{grid-area: soustitre2; justify-self: start;}
.rech-explo-details-colors{grid-area: details;}
.rech-explo-chara-aiko{grid-area: aiko;}
.rech-explo-chara-selene{grid-area: selene;}
.rech-explo-chara-helio{grid-area: helio;}

.rech-explo-chara-aiko,
.rech-explo-chara-selene,
.rech-explo-chara-helio{width: 80%;
    height: auto;
    aspect-ratio: 3 / 4; /* Force un conteneur au ratio identique pour les 3 (ex: 3:4) */
    object-fit: contain;  /* Préserve le dessin entier sans déformation */
    display: block;}



    /*css IA pour gagner du temps*/

    /* ==========================================================================
   PAGES MANGA (COLORS P1, P2, P3)
   ========================================================================== */

.mangaPage {
    display: grid;
    grid-template-columns: 300px 1fr;
    grid-template-areas:
        "titre    titre titre"
        "status  status status"
        "cover  .     p1"
        "cover   .    p2";
    column-gap: 80px;
    row-gap: 20px;
    align-items: start;
    justify-items: start;
}

.manga-titre { grid-area: titre; justify-self: end; text-align: end;}
.manga-status { 
    grid-area: status; 
    color: #FE4C56; 
    font-weight: bold; 
    text-align: end;
    justify-self: end;
}
.manga-p1 { grid-area: p1; }
.manga-p2 { grid-area: p2; }
.manga-cover { grid-area: cover; }


/* ==========================================================================
   PAGE CRÉATION DE CONTENU / VIDÉO
   ========================================================================== */

/* Section Présentation */
.video-pres {
    display: grid;
    grid-template-columns:1fr 200px;
    grid-template-areas:
        " titre ."
        " p .";
    column-gap: 80px;
    align-items: start;
}

.video-pres-titre { grid-area: titre; }
.video-pres-p { grid-area: p; }

/* Section BES */
.video-bes {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
        "titre titre titre"
        "opening player p1"
        "opening player p2";
    column-gap: 80px;
    row-gap: 20px;
    align-items: start;
}

.video-bes-titre { grid-area: titre; }
.video-bes-player { 
    grid-area: player; 
    width: 50%; 
    border: 2px solid #FE4C56;
    background-color: #000;
}
.video-bes-player-opening { 
    grid-area: opening; 
    width: 50%; 
    border: 2px solid #FE4C56;
    background-color: #000;
}
.video-bes-p1 { grid-area: p1; }
.video-bes-p2 { grid-area: p2; }

/* Section Processus de création (Grid Steps) */
.video-process {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "mainTitre mainTitre"
        "step1Titre step2Titre"
        "step1P step2P"
        "step3Titre step4Titre"
        "step3P step4P"
        "step5Titre step6Titre"
        "step5P step6P";
    column-gap: 80px;
    row-gap: 32px;
    align-items: start;
}

.video-proc-mainTitre { grid-area: mainTitre; margin-bottom: 20px; }
.video-proc-s1Titre { grid-area: step1Titre;}
.video-proc-s1P { grid-area: step1P; }
.video-proc-s2Titre { grid-area: step2Titre;}
.video-proc-s2P { grid-area: step2P; }
.video-proc-s3Titre { grid-area: step3Titre; }
.video-proc-s3P { grid-area: step3P; }
.video-proc-s4Titre { grid-area: step4Titre;}
.video-proc-s4P { grid-area: step4P; }
.video-proc-s5Titre { grid-area: step5Titre;}
.video-proc-s5P { grid-area: step5P; }
.video-poc-s6Titre { grid-area: step6Titre;}
.video-proc-s6P {grid-area: step6P;}


/* ==========================================================================
   PAGE 3D & PROJETS (SILVER ROCKET & ÉCHECS)
   ========================================================================== */

/* Section Silver Rocket */
.silver-rocket {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "mainTitre   mainTitre"
        "presTitre   presTitre"
        "presP       ."
        "troisDTitre ."
        "sculpture   model3d"
        ".           legend"
        "troisDP1    troisDP2"
        "designTitre ."
        "designP ."
        "assets      assets";
    column-gap: 80px;
    row-gap: 32px;
}

.sr-mainTitre   { grid-area: mainTitre; }
.sr-presTitre   { grid-area: presTitre; }
.sr-presP       { grid-area: presP; }
.sr-3dTitre     { grid-area: troisDTitre; }
.sr-3dP1        { grid-area: troisDP1; }
.sr-3dP2        { grid-area: troisDP2; }
.sr-sculpture   { grid-area: sculpture; width: 50%;
    justify-self: center;}
.sr-model3d     { grid-area: model3d;  width: 20%;
    justify-self: center;}
.sr-legend      { grid-area: legend; font-style: italic; font-size: 14px; justify-self: center;}
.sr-designTitre { grid-area: designTitre; }
.sr-designP     { grid-area: designP; }

.sr-assets-grid {
    grid-area: assets;
    display: grid;
    grid-template-columns: repeat(5, auto);
    grid-template-areas: "alien panneauxUI platform platformBroken boost";
    gap: 20px;
    align-items: center;
    justify-items: center;
}

.sr-assets-alien            { grid-area: alien; }
.sr-assets-panneauxUI       { grid-area: panneauxUI; }
.sr-assets-platform         { grid-area: platform; }
.sr-assets-platform-broken  { grid-area: platformBroken; }
.sr-assets-boost            { grid-area: boost; width: 40%; }

.sr-assets-grid img { max-width: 100%; height: auto; }



/* Section Projets 3D / Échecs */
.echecs-3d {
    display: grid;
    grid-template-columns: 300px 1fr 1fr;
    grid-template-areas:
        "titre titre titre"
        "subTitre subTitre subTitre"
        "p imgSketches imgModel";
    column-gap: 80px;
    row-gap: 24px;
    align-items: start;
}

.ech-titre { grid-area: titre; }
.ech-subTitre { grid-area: subTitre; }
.ech-p { grid-area: p; }
.ech-sketches { grid-area: imgSketches;}
.ech-model { grid-area: imgModel; }


/* ==========================================================================
   PAGE DIRECTION ARTISTIQUE (PORTFOLIO DA)
   ========================================================================== */

.da-portfolio {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "titre titre"
        "intro ."
        "step1Titre ."
        "step1Img step1P"
        "step2Titre ."
        "step2P step2Img"
        "step3Titre ."
        "step3Img step3P"
        "step4Titre ."
        "step4P1 step4Img"
        "step4P2 step4Img";
    column-gap: 80px;
    row-gap: 28px;
    align-items: start;
}

.da-titre { grid-area: titre; }
.da-intro { grid-area: intro; margin-bottom: 20px; }

.da-s1-titre { grid-area: step1Titre; }
.da-s1-img { grid-area: step1Img; }
.da-s1-p { grid-area: step1P; }

.da-s2-titre { grid-area: step2Titre; }
.da-s2-img { grid-area: step2Img; }
.da-s2-p { grid-area: step2P; }

.da-s3-titre { grid-area: step3Titre; }
.da-s3-img { grid-area: step3Img; }
.da-s3-p { grid-area: step3P; }

.da-s4-titre { grid-area: step4Titre; }
.da-s4-img { grid-area: step4Img; }
.da-s4-p1 { grid-area: step4P1; }
.da-s4-p2 { grid-area: step4P2; }