/* Customisation */ 

@font-face {
    font-family: "Geist mono regular";
    src: url(webfonts/GeistMono-Regular.woff2);
}

@font-face {
    font-family: "Geist mono regular-italic";
    src: url(webfonts/GeistMono-Italic.woff2);
}

@font-face {
    font-family: "Geist mono medium";
    src: url(webfonts/GeistMono-Medium.woff2);
}

@font-face {
    font-family: "Geist mono medium-italic";
    src: url(webfonts/GeistMono-MediumItalic.woff2);
}

@font-face {
    font-family: "Geist mono light";
    src: url(webfonts/GeistMono-Light.woff2);
}

@font-face {
    font-family: "Geist mono light-italic";
    src: url(webfonts/GeistMono-LightItalic.woff2);
}



body{
	color:#000000;
     font-family: "Geist mono regular";
}



/* 1. Le Conteneur Principal */
.split-layout {
    display: grid; /* Active la grille */
   /*grid-template-columns: 2fr 3fr;  C'est ici que la magie opère : 2 parts vs 3 parts */
    gap: 20px; /* Espace optionnel entre les deux colonnes */
    max-width: 100vw !important;
    min-height: 100vh;
    margin-left: calc(50% - 50vw) !important; /* Astuce pour centrer le bloc plein écran */
    margin-right: calc(50% - 50vw) !important;
    padding-left: 10px; /* Ajoute un peu d'air sur les côtés si besoin */
    padding-right: 10px;
    box-sizing: border-box;
    margin-top: 0%;
    overflow: hidden;
    
}

/* 2. La colonne de gauche (2/5) */
.split-layout > :first-child {
    padding: 10px;
    /* Pour coller le contenu en bas comme sur votre exemple si nécessaire 
    display: flex;*/
    flex-direction: column;
    justify-content: flex-start; 
    height: 100%;
    overflow: auto;

}

/* 3. La colonne de droite (3/5) */
.split-layout > :last-child {
    background-color: #ffffff;
    padding: 10px;
    overflow-y: auto; /* Permet de scroller si le contenu est trop grand */
    scroll-behavior: smooth;
    border-right: 0;
}

/* 4. Gestion des images dans la partie droite */
/* Force les images des articles à rester dans la colonne de droite */
.split-layout > :last-child img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px 0;
}

/* 4. Responsive (Mobile) */
/* Sur les petits écrans, on repasse souvent sur une seule colonne */
@media (max-width: 768px) {
    .split-layout {
        grid-template-columns: 1fr; /* Une seule colonne */
        height: auto;
        overflow: visible;
    }
}


/* S'assure que les colonnes à l'intérieur prennent tout l'espace disponible */
.split-layout > .wp-block-columns {
    width: 100%;
    margin: 0;
    padding: 0;
}


/* Force le premier groupe (vidéo) à rester en haut et ne pas être poussé */
.colonne-gauche > div:first-child {
    margin-bottom: 20px; /* Espace entre la vidéo et la liste */
    width: 100%;
    
}

/* Style pour la liste de projets type "menu terminal" */
.colonne-gauche .wp-block-list {
    list-style: none; /* Enlève les puces rondes */
    padding: 0;
    font-family: 'Geist mono regular', monospace; /* Police style code/terminal */
    line-height: 1.6;
}

/* Effet de survol style "sélection" comme sur votre image */
.colonne-gauche .wp-block-list li:hover {
    background-color: #333; /* Fond gris foncé */
    color: #fff; /* Texte blanc */
    cursor: pointer;
}

/* Le conteneur qui gère les colonnes invisibles */
.random-wall {
    column-count: 3; /* Nombre de colonnes invisibles. Ajustez selon la largeur */
    column-gap: 15px; /* Espace horizontal entre les colonnes */
    width: 100%;
}

.random-wall-item {
    position: absolute; /* Sort du flux normal */
    transition: transform 0.3s ease;
    cursor: pointer;
}

/* Chaque image devient un bloc qui tombe dans la colonne */
.random-wall img {
    max-width: 100%; /* L'image prend la largeur de la colonne */
    height: auto; /* Garde ses proportions */
    display: block;
    margin-bottom: 15px; /* Espace vertical entre les images */
    break-inside: avoid; /* Empêche une image d'être coupée en deux entre deux colonnes */
    
    /* Petit effet de style */
    filter: grayscale(20%); /* Optionnel: désature un peu */
    transition: filter 0.3s ease, transform 0.3s ease;
}

/* Au survol : couleur et zoom */
.random-wall img:hover {
    z-index: 10;
    filter: grayscale(0%);
    transform: scale(1.1);
    position: relative;
}

/* Positions horizontales (gauche) */
.pos-left-1 { left: 5%; }
.pos-left-2 { left: 20%; }
.pos-left-3 { left: 45%; }
.pos-left-4 { left: 70%; }
.pos-left-5 { left: 85%; }

/* Positions verticales (haut) */
.pos-top-1 { top: 5%; }
.pos-top-2 { top: 25%; }
.pos-top-3 { top: 45%; }
.pos-top-4 { top: 65%; }
.pos-top-5 { top: 85%; }


/* Responsive : réduit le nombre de colonnes sur mobile */
@media (max-width: 1024px) {
    .random-wall {
        column-count: 2; /* 2 colonnes sur tablette */
    }
}

@media (max-width: 600px) {
    .random-wall {
        column-count: 1; /* 1 colonne sur mobile */
    }
}

/* structure*/


.site-main {
    background-color: rgb(255, 255, 255);
    padding: 1rem;
}

.site-footer {
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    padding: 1rem;
    text-align: center;
    
}


p.site-title {
   font-size: 1rem;
   margin: 0; 
}

/* si je veux mettre un logo 
.site-title a{
    display: block;
    width: 100px;
    height: 100 px;
    background: url(images/logo) no repeat center center ;
    background-size: contain;
    text-indent: -5000px; texte sous le logo 
    flex-direction: row-reverse; le mettre à gauche 
}
*/

/* typo */ 



h1,h2 {
    font-size: 1rem;
    font-weight: 100;
    color : rgb(0, 0, 0);
    text-decoration: none; 
}


/* liens */
a,
a:visited {
	color : rgb(0, 0, 0);
	text-decoration: none; 
}



/* home page */ 
.entry-header {
    display: none;
}

.main-navigation {
    display: none !important;
}

   
/* .home .custom-logo { display: none !important; } */

/* 3. Ajustement pour que votre titre "Zoé Lehmann" (s'il est dans le header) reste bien placé */
.site-header {
    display: block !important; /* On réaffiche le conteneur header s'il était caché avant */
    background: transparent;
    border: none;
    padding: 10px;
    margin :0%;
}

/* 4. S'assurer que le layout prend bien toute la hauteur */
.split-layout {
    height: 100%;
    /*height: calc(100vh - 80px); /* Ajustez 80px selon la hauteur de votre nouveau header */
    margin-top: 0;
}

/*archive*/
.works-grid {
    background-color: crimson;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.works-grid article {
    width: 30%;
}


/* Style de la liste de projets type "terminal" */
.project-list {
    width: 100%;
    border: none !important; 
    background: transparent !important; /* Supprime le fond du tableau */
    margin: 0;
    border-collapse: collapse; /* Enlève les espaces entre les cellules */
    font-family: 'Geist mono regular', monospace; 
    line-height: 2; 
    background: transparent;
}

/* Supprime les bordures par défaut du tableau WordPress */
.project-list, 
.project-list th, 
.project-list td {
    border: none !important;
    padding: 2px 10px 2px 0;    
    text-align: left;
    color: #000;
}

/* Enlève le fond gris/alterné des tableaux WordPress */
.project-list tr:nth-child(odd),
.project-list tr:nth-child(even) {
    background-color: transparent !important;
}

/* Colonne 1 : Numéro (ex: 03) */
.project-list td:first-child {
    font-weight: bold;
    padding-right: 15px; /* Espace après le numéro */
    color: #000;
}

/* Colonne 2 : Nom du projet (ex: [Zucco]) */
.project-list td:nth-child(2) {
    font-weight: normal;
    padding-right: 15px;
}

/* Colonne 3 : Type (ex: affiche) - Optionnel: en italique */
.project-list td:nth-child(3) {
    font-style: italic;
    opacity: 0.8;
    padding-right: 15px;
}

/* Colonne 4 : Date (ex: 2025) - Alignée à droite ou gauche selon goût */
.project-list td:last-child {
    text-align: right; /* Ou 'left' si vous préférez */
    opacity: 0.7;
}

/* Effet de survol style "sélection terminal" */
.project-list tr:hover {
    background-color: #d5cfcf !important; /* Rectangle gris (ajustez la teinte si besoin) */
    color: #000 !important; /* Texte noir pour contraste sur le gris (ou #fff pour blanc) */
    cursor: pointer;
    font-style: italic; /* Active l'italique pour toute la ligne */
    font-family: "Geist mono regular-italic", monospace; /* Force la police italique spécifique */
    transition: all 0.2s ease; /* Fluidifie l'apparition */
}

/* S'assure que chaque cellule de la ligne prend le style au survol */
.project-list tr:hover td {
    color: #000 !important; /* Force la couleur du texte */
    font-family: "Geist mono regular-italic", monospace; /* Applique la police italique aux cellules */
}

/* Responsive : sur mobile, on peut réduire la taille */
@media (max-width: 768px) {
    .project-list {
        font-size: 12px;
        line-height: 1.8;
    }
    
}

/* liste projet */

/* Conteneur de la liste */
.project-list-container {
    width: 100%;
    font-family: 'Geist mono regular', monospace;
    font-size: 17px;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
}

/* Chaque ligne est un lien */
.project-row {
    display: grid;
    /* Définition des colonnes : Numéro | Nom | Type | Date */
    grid-template-columns: 40px 1fr 100px 60px; 
    text-decoration: none; /* Enlève le soulignement du lien */
    color: #000;
    padding: 2px 0;
    transition: all 0.2s ease;
    cursor: pointer;
}

/* Style des cellules individuelles */
.project-row span {
    display: block;
    white-space: nowrap; /* Empêche le texte de passer à la ligne */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Colonne 1 : Numéro */
.project-row .col-num {
    font-weight: bold;
    padding-right: 15px;
    text-align: left;
}

/* Colonne 2 : Nom du projet */
.project-row .col-name {
    font-weight: normal;
    padding-right: 15px;
}

/* Colonne 3 : Type */
.project-row .col-type {
    font-style: italic;
    opacity: 0.8;
    padding-right: 15px;
}

/* Colonne 4 : Date */
.project-row .col-date {
    text-align: right;
    opacity: 0.7;
    justify-self: end; /* Pousse la date à droite */
}

/* EFFET DE SURVOL (Le rectangle gris + italique) */
.project-row:hover {
    background-color: #d5cfcf !important; /* Votre gris */
    color: #000 !important;
    font-family: "Geist mono regular-italic", monospace; /* Police italique */
    font-style: italic;
}

/* Responsive Mobile : Ajustement des colonnes */
@media (max-width: 768px) {
    .project-row {
        grid-template-columns: 30px 1fr 80px 50px;
        font-size: 12px;
    }

}

figure {
	margin: 0 0;
}

.entry-content{
    margin: 0 0 0;
}

/* info (adresse et articles) */
.info{
    font-size: 13px;
    line-height: 1.4; 
    font-family: Geist mono light;
}

.info:hover span,
.info:hover a {
    background-color: #d5cfcf !important; /* Fond gris */
    color: #000 !important;
    font-family: "Geist mono regular-italic", monospace !important;
    font-style: italic !important;
    text-decoration: none; /* Optionnel : enlève le soulignement par défaut si vous voulez juste le fond */
    transition: all 0.2s ease;
    display: inline-block; /* Assure que le fond s'applique bien au texte */
}

.legende-article{
   font-family: Geist mono light; 
   font-size: 14px; 
   line-height: 1.3;
   width: 35%;
   position: inherit;
   margin-left: 0%;  
}

.texte-projets {
    width: 65%;
    margin-left: 35%;
    font-size: 16px;
    position: relative;
    top: 0; /* ANNULE le -200px qui causait le bug */
    margin-top: -230px; /* Ajustez cette valeur pour faire remonter le texte si besoin */
    z-index: 2; /* S'assure que le texte est au-dessus si chevauchement */
}

@media (max-width: 768px) {
    .entry-content{
        flex-direction: column;
        gap: 20px;
    }
    .legende-article,
    .texte-projets{
      flex: 0 0 100%;
      width: 100%;
      max-width: 100%; 
      position: relative !important;
      left: 0 !important;
      top: 0 !important;
      margin-left: 0;
      margin-right: 5;
      box-sizing: border-box;

    .info-article {
        font-size: 13px;
    }
    
    .legende-article {
        font-size: 15px;
    }
 } 
}


/* 3. Titres dans les articles */
.split-layout > :last-child .entry-content h1,
.split-layout > :last-child .entry-content h2,
.split-layout > :last-child .entry-content h3 {
    font-size: 1.2rem; /* Taille des titres dans l'article */
    margin-top: 2em;
    margin-bottom: 1em;
    text-transform: uppercase;
    color: #000000; /* Noir, ou changez selon votre charte */
}

/* 4. Images dans les articles */
.split-layout > :last-child .entry-content img,
.split-layout > :last-child .entry-content figure {
    max-width: 100%; /* L'image ne dépasse jamais la largeur du texte (600px) */
    height: auto;
    display: block;
    margin: 20px 0;
}



/* 6. Responsive : ajuste la largeur sur mobile */
@media (max-width: 900px) {
    .split-layout > :last-child .entry-content,
    .split-layout > :last-child .entry-header {
        max-width: 100%; /* Prend toute la largeur sur mobile */
        margin-left: 0;
        margin-right: 0;
    }
}

video-intro-sonic,
.video-intro-sonic video,
.entry-content figure.wp-block-video,
.entry-content .wp-block-embed {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0; /* Coupe l'espace vertical sous la vidéo */
    max-width: 100%;
    overflow: hidden; /* Coupe tout ce qui dépasse */
}

/* Force la vidéo à la hauteur désirée sans déformer le flux */
.video-intro-sonic video {
    max-height: 80vh; /* Ajustez : 60% de la hauteur de l'écran max */
    width: auto;
    display: block;
    
}



/* 3. Correction de votre Media Query  */
@media (max-width: 768px) {
    .entry-content {
        flex-direction: column;
        gap: 20px;
    }
    
    .info-article,
    .texte-projets {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%; 
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        margin-left: 0;
        margin-right: 0; /* Corrigé de 5 à 0 */
        box-sizing: border-box;
        margin-top: 0 !important; /* Annule le margin-top négatif sur mobile */
    }

    .info-article {
        font-size: 13px;
        border-bottom: 1px solid #ccc;
        padding-bottom: 15px;
        margin-bottom: 15px;
    }
    
    .texte-projets {
        font-size: 15px;
    }
} 



/* Ajustement spécifique : pas de marge gauche pour le premier paragraphe après la vidéo */
.video-intro-sonic + p,
.video-intro-sonic + .texte-projets p {
    margin-left: 0; 
}

@media (max-width:600px) {
    
}