/*
Theme Name: Portefolio
Template: sinatra
Author: Mathis
Version: 1
*/

/* 
Theme Name: Portfolio Recreation
Author: Generated
Description: Recréation du portfolio inspiré par home.json
Version: 1.0
*/

:root{
  --bg:#000;
  --section-bg:#111;
  --muted:#CDC5C5;
  --accent:#ffffff;
  --font-stack: 'Poppins', sans-serif;
}

*{
  box-sizing:border-box
}
html,body{
  margin:0;
  padding:0;
  height:100%;
  font-family:var(--font-stack);
  color:var(--acc);
  -webkit-font-smoothing:antialiased;
}

a{
  color:inherit;
  text-decoration:none;
}

/* Header hero */

.name{
  color: #fff;
}
p.lead {
    font-size: 25px !important;
}
.hero{
  position:relative;
  min-height:80vh;
  display:flex;
  align-items:center;
  padding:60px 5vw;
  overflow:hidden;
  color:#fff;
}
.hero .left{
  flex:1; 
  max-width:55%;
}
.hero .right{
  flex:1; 
  display:flex; 
  justify-content:center; 
  align-items:center
}
.hero h1{
  font-size:6rem;
  line-height:0.85;
  margin:0;
  text-transform:uppercase;
  letter-spacing:4px;
  font-weight:600
}
.hero h2{
  font-size:3rem;
  margin:0;
  text-transform:uppercase;
  letter-spacing:24px;
  font-weight:500
}
.hero p.lead{
  font-size:1rem;
  opacity:.9;
  margin-top:18px
}

/* Particles canvas container */
#particles-js{
  position:absolute; 
  inset:0; 
  z-index:0; 
  pointer-events:none;
}

/* Social icons fixed vertical */
.social-fixed{
  position:fixed; 
  right:20px; top:320px;  
  z-index:20;
  display:flex; 
  gap:8px; 
  align-items:center;
}
.social-fixed a{
  display:inline-block;
  padding:6px;width:30px;
  text-align:center;
  background:transparent;
  color:#fff;
  border-radius:4px
}

/* Sections */
.section{
  padding:70px 70px;
  background:var(--bg)
}
section#intro {
    background-color: black;
}
.section.black{
  background:var(--section-bg)
}
.section h3{
  color:#fff;
  margin:0 0 10px;
  font-size:28px;
  text-transform:uppercase;
  font-weight:600
}
.section .sub{
  color:var(--accent);
  max-width:780px;
  margin-bottom:25px
}

/* Services grid */
.services{display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px
}
.icon-box{background:#000;
  padding:35px;
  border-radius:8px
}
.icon-box .icon{font-size:36px;
  margin-bottom:12px;
  color:#fff
}
.icon-box h4{color:#fff;
  text-transform:uppercase;
  margin:0 0 8px
}
.icon-box p{margin:0;
  color:var(--accent)
}

/* Skills */
.skills-grid{display:flex;
  gap:20px;
  align-items:center
}
.skill-left{flex:1
}

.progress{height:5px;
  background: #555B61;;
  border-radius:4px;
  overflow:hidden;
  margin:12px 0
}
.progress > span{
  display:block;
  height:100%;
  background:#fff;
  width:0
}

/* Portfolio gallery simple */
.gallery-item{
  display :flex !important;
  gap: 40px;
  align-items: center;
  justify-content: center;
}

.gallery-item img{width:100%;
  display:block;
  height:300px;
  object-fit:cover;
  border-radius:6px
}

/* Contact */
.contact-grid{display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px
}
.contact-info .item{display:flex;
  gap:12px;
  align-items:flex-start;
  margin-bottom:12px
}
.contact-info .item .ico{width:36px;
  text-align:center
}

/* Footer */
.site-footer{padding:40px 5vw;
  text-align:center;
  color:var(--muted);
  background:#070707
}

/* Responsive */
@media(max-width:900px){
  .hero h1{
    font-size:3.6rem
  }
  .hero h2{
    font-size:1.8rem
  }
  .hero{
    flex-direction:column;
    padding:40px 4vw
  }
  .services{
    grid-template-columns:1fr
  }
  .contact-grid{
    grid-template-columns:1fr
  }
}

/* ------------------------- single-projet CSS ------------------------- */
.all {
    background-color:var(--bg);
    color: #ffffff;
}
h2, h1, h4, label, strong{
  color: #ffffff !important;
}
h4.projet {
    text-align: center;
}
img.attachment-high.size-high.wp-post-image {
    width: 450px;
    object-fit: contain;
}
.main-info {
    display: flex;
    width: 100%;
    gap: 10%;
}
body:not(.sinatra-no-sidebar) #primary {
    max-width: 100% !important ;
    padding-left: 15%;
    padding-right: 15%; 
    
}
.project-details.section-content {
    width: 50%;
}     


/*display:none */
.page-header.si-has-page-title.si-has-breadcrumbs {
    display: none;
}

footer#colophon {
    display: none;
}

div#sinatra-header-inner {
    display: none;
}

.animated img {    
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);    
    animation: border-transform 10s linear infinite alternate forwards;    
    border-radius: 100%;}

@keyframes border-transform {    0%,    100% {        
        border-radius: 63% 37% 54% 46%/55% 48% 52% 45%    
        }    
    14% {        
        border-radius: 40% 60% 54% 46%/49% 60% 40% 51%    
        }    
    28% {        
        border-radius: 54% 46% 38% 62%/49% 70% 30% 51%    
        }    
    42% {        
        border-radius: 61% 39% 55% 45%/61% 38% 62% 39%    
        }    
    56% {        
        border-radius: 61% 39% 67% 33%/70% 50% 50% 30%    
        }    
    70% {        
        border-radius: 50% 50% 34% 66%/56% 68% 32% 44%    
        }    
    84% {        
        border-radius: 46% 54% 50% 50%/35% 61% 39% 65%    
        }
    }



    section#contact {
    padding: 70px 15%;
}


/* ================================== */
/* 2. Media Query (Tablette/Mobile) */
/* ================================== */

/* Changement de mise en page pour les écrans de taille moyenne (ex: Tablettes) */
@media (max-width: 992px) {
    /* Augmente l'espace entre les éléments dans la disposition verticale */
    .main-info {
        gap: 30px;
    }
      .project-details.section-content {
    width: 100%;
}
    /* Permet aux éléments de l'image de prendre plus de place sur les tablettes */
    .project-left {
        flex: 1 1 35%; /* Ajustement */
    }

    .project-details {
        flex: 1 1 65%; /* Ajustement */
    }
}


/* Changement de mise en page pour les petits écrans (ex: Mobiles) */
@media (max-width: 768px) {
    
    /* Le changement CRUCIAL : Passage de colonne à ligne */
    .main-info {
        flex-direction: column; 
        gap: 40px; /* Augmente l'espace entre les sections qui sont maintenant empilées */
    }

    /* Les deux colonnes prennent maintenant toute la largeur */
    .project-left,
    .project-details {
        flex: 1 1 100%; /* Prend 100% de la largeur */
        min-width: auto;
    }

    /* Les marges internes peuvent être réduites pour gagner de l'espace sur mobile */
    .all {
        padding: 0 15px;
    }

    /* Les titres peuvent être légèrement ajustés */
    .project-title {
        font-size: 2em; /* Exemple */
        text-align: center;
    }
}