/* === Variables ================= */
:root {
    --primary-color: rgba(178,190,194,0.60);
    --overlay-color: rgba(24,39,51,0.80);
    --menu-speed: 0.75s;
    --dark-gray: #1f1f1f;
    --medium-gray: #3a3a3a;
}

/* === Reset / Global ================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html, body {
    font-family: 'Abel', sans-serif;
    line-height: 1.4;
    scroll-behavior: smooth;
    background-color: var(--dark-gray);
    color: #fff;
}

/* Container */
.container {
    max-width: 960px;
    margin: auto;
    padding: 0 2rem;
}

#about h2 {
    background: linear-gradient(90deg, #ff5f6d, #ffc371, #14B1B1, #ff5f6d); /* boucle le dégradé */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 400% 100%; /* plus large pour un mouvement fluide */
    font-size: 4.5rem;  /* ajuste la taille comme tu veux */
    margin-bottom: 2.5rem; /* espace sous le titre */
}

h2.gradient-text {
    background: linear-gradient(90deg, #ff5f6d, #ffc371, #14B1B1, #ff5f6d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 400% 100%;
    animation: gradientMove 10s linear infinite;
}

@keyframes gradientMove {
    0% { background-position: 0% 0%; }
    50% { background-position: 100% 0%; }
    100% { background-position: 0% 0%; }
}

/* === MENU OVERLAY ================= */
.menu-wrap {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}
.menu-wrap .toggler {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 1000;
    width: 50px;
    height: 50px;
    opacity: 0;
    cursor: pointer;
}
.menu-wrap .hamburger {
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 50px;
    height: 50px;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}
.menu-wrap .hamburger > div {
    position: relative;
    width: 100%;
    height: 2px;
    background-color: #fff;
    transition: all 0.4s ease;
}
.menu-wrap .hamburger > div:before,
.menu-wrap .hamburger > div:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: inherit;
}
.menu-wrap .hamburger > div:before { top: -10px; }
.menu-wrap .hamburger > div:after { top: 10px; }
.menu-wrap .toggler:checked + .hamburger > div { transform: rotate(135deg); }
.menu-wrap .toggler:checked + .hamburger > div:before,
.menu-wrap .toggler:checked + .hamburger > div:after { top: 0; transform: rotate(90deg); }

/* Menu overlay plein écran */
.menu-wrap .menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 998;
}
.menu-wrap .toggler:checked ~ .menu { visibility: visible; }
.menu-wrap .menu > div {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0);
    transition: transform var(--menu-speed) ease;
    background-color: var(--overlay-color);

    backdrop-filter: blur(10px); /* ajoute le flou */
    -webkit-backdrop-filter: blur(10px); /* support Safari */
}

.menu-wrap .toggler:checked ~ .menu > div { transform: scale(1); }
.menu-wrap .menu > div > div {
    opacity: 0;
    transition: opacity 0.4s ease;
    text-align: center;
}
.menu-wrap .toggler:checked ~ .menu > div > div { opacity: 1; }
.menu-wrap .menu ul { list-style: none; padding: 0; }
.menu-wrap .menu ul li { margin: 1.5rem 0; font-size: 2rem; }
.menu-wrap .menu ul li a { color: #fff; text-decoration: none; transition: color 0.3s; }
.menu-wrap .menu ul li a:hover { color: var(--primary-color); }

/* === SHOWCASE / SLIDESHOW ================= */
.showcase {
    position: relative;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    overflow: hidden;
    transition: opacity 0.5s ease;
    z-index: 0; /* couche de base */
    will-change: opacity; /* Prévient le navigateur qu'on va toucher à l'opacité */
    backface-visibility: hidden; /* Force la création d'un calque matériel (GPU) */
}
.showcase::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.25); /* noir plus clair */
    z-index: 1; /* derrière le texte */
}
.slideshow img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 2s ease-in-out;
}
.slideshow img.active { opacity: 1; }
.showcase-inner {
    position: absolute;
    bottom: 5%; /* distance du bas de l'image, ajuste à ton goût */
    left: 50%;
    transform: translateX(-50%); /* centrage horizontal */
    text-align: center;
    z-index: 2;
}
.showcase-inner h1 {
    font-family: 'Playfair Display', serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 5rem;
    margin-bottom: 1.5rem;
    white-space: nowrap; /* empêche le retour à la ligne */
}
.showcase-inner p {
    font-family: 'Abel', sans-serif;
    font-size: 1.6rem; /* légèrement plus grand */
    margin-bottom: 2.5rem;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.4); /* plus visible */
}

.btnn {
    display: inline-block;
    padding: 0.85rem 1.8rem;
    border-radius: 2rem;
    background-color: var(--primary-color);
    color: #fff;
    text-decoration: none;
    transition: opacity 0.3s;
    font-size: 1.2rem;
}
.btnn:hover { opacity: 0.7; }

/* === ANIMATION HERO - uniquement ce qui est nouveau === */

/* Dézoom du slideshow - on ajoute seulement transform */
.showcase img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.1);
    transition: opacity 2s ease-in-out, transform 1.5s ease-out;
}

.showcase.loaded img {
    transform: scale(1);
}
/* Animation texte et bouton - uniquement animation, pas de style déjà existant */
.showcase-inner h1 {
    opacity: 0;
    transform: translateY(-30px);
    animation: slideDown 1s forwards;
    animation-delay: 0.5s;
}

.showcase-inner p,
.showcase-inner .btnn,
.showcase-inner .scroll-down {
    opacity: 0;
    transform: translateY(30px);
    animation: slideUp 1s forwards;
    animation-delay: 1s;
}

@keyframes slideDown {
    to { opacity: 1; transform: translateY(0); }
}
@keyframes slideUp {
    to { opacity: 1; transform: translateY(0); }
}


/* === SECTIONS ================= */
.section {
    min-height: 100vh;
    padding: 5rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s ease, transform 1s ease;
}
.section.visible { opacity: 1; transform: translateY(0); }

.section.dark { background-color: var(--dark-gray); color: #fff; }
.section.skills { background-color: var(--medium-gray); color: #fff; }

.skill-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes par défaut */
    gap: 20px; /* espace entre les images */
    justify-items: center; /* centre chaque image dans sa colonne */
    margin-top: 2rem;
}

.skill-grid img {
    width: 100%;
    max-width: 450px;       /* limite la largeur */
    aspect-ratio: 3 / 2;    /* ratio 450x300 */
    object-fit: cover;       /* remplissage sans déformation */
    border-radius: 10px;
}

/* Responsive : tablettes = 2 images par ligne */
@media (max-width: 900px) {
    .skill-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive : mobiles = 1 image par ligne */
@media (max-width: 600px) {
    .skill-grid {
        grid-template-columns: 1fr;
    }
}


h2 {
    font-family: 'Playfair Display', serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 2rem;
    font-size: 6rem;
}

#about p { 
    margin: 1.2rem 0; 
    font-size: 1.4rem; 
    font-family: 'Abel', sans-serif;
}

#about p.location { 
    margin-top: 4.5rem; 
    font-weight: bold; 
    font-size: 1.3rem; 
    font-family: 'Abel', sans-serif;
}

.skills ul {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2.5rem;
}
.skills li {
    background: var(--primary-color);
    padding: 1rem 1.5rem;
    border-radius: 1rem;
    color: #fff;
    font-weight: bold;
    font-size: 1.3rem;
    font-family: 'Roboto', sans-serif;
}

.contact-links {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 2.5rem 0;
}
.contact-details {
    font-size: 1.7rem;
    color: #D9D9D9;
    transition: transform 0.3s;
    padding: 1rem;
    font-family: 'Roboto', sans-serif;
}
.contact-details:hover {
    color: #fff; /* devient blanc au survol */
    transform: translateY(-0.5px);
}

#contact p {
    font-size: 1.3rem; /* augmente la taille du texte */
    line-height: 1.6;  /* pour que ce soit lisible */
    margin-bottom: 1.5rem; /* augmente l’espacement vertical */
}

.contact p em {
    margin-left: 0.2rem; /* léger décalage */
}

/* === Contact intro : photo gauche / texte droite === */
.contact-intro {
  margin: 2.5rem auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.8rem;
  max-width: 720px;
  text-align: left;
}

.contact-intro p {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.5;
}

.contact-photo {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.35);
  flex-shrink: 0;
}


/* Icônes sociales */
.contact-details i {
    color: #fff;
    transition: color .3s ease, transform .3s ease;
}

.contact-details:hover i {
    transform: translateY(-3px);
}

/* Hover couleurs réseaux */
.fa-instagram:hover { color: #E4405F; }
.fa-flickr:hover    { color: #FF0084; }
.fa-behance:hover   { color: #1769FF; }
.fa-dribbble:hover  { color: #EA4C89; }
.fa-twitter:hover   { color: #1DA1F2; }
.fa-linkedin:hover  { color: #0A66C2; }

/* === BOUTON SCROLL TOP ================= */
#scrollTopBtn {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    font-size: 2.5rem;
    color: var(--primary-color);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    z-index: 1000;
}
#scrollTopBtn.show { opacity: 1; visibility: visible; }

/* === RESPONSIVE ================= */
#about .container {
    max-width: 1120px;
}

@media (max-width: 768px) {
    .showcase-inner h1 { font-size: 3rem; }
    .showcase-inner p { font-size: 1.2rem; }
    h2 { font-size: 2.2rem; }
    .about p { font-size: 1.2rem; }
    .skills li { font-size: 1.1rem; padding: 0.8rem 1.2rem; }
    .contact-details { font-size: 1.5rem; }
}

/* === Chevron scroll / flèche vers le bas ================= */
.scroll-down {
    display: block;
    text-align: center;
    font-size: 2rem; /* taille de la flèche */
    color: var(--primary-color);
    margin-top: 2rem;
    animation: bounce 2s infinite;
    text-decoration: none;
}

.scroll-down span {
    display: inline-block;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(10px); }
    60% { transform: translateY(5px); }
}

/* Scroll fluide déjà actif via :html, body { scroll-behavior: smooth; } */






/* === LIGHTBOX CREATIVE WORK === */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: 2000;
}

.lightbox.active {
    opacity: 1;
    visibility: visible;
}

.lightbox img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    cursor: pointer;
}

/* === CONTACT BACKGROUND === */
#contact {
    position: relative;
    background-color: var(--dark-gray);
    background-image: url('./img/bk.png');
    background-repeat: repeat;
    background-position: top left;
    background-size: 250px 250px;
}


.btnn,
.scroll-down {
    transform: translateZ(0);
    will-change: transform;
}

.btnn:hover {
    transform: translateY(-2px);
}


/* === h1 seo ================= */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* === edito line ================= */

.editorial-rule {
  width: 60%;                     /* responsive */
  max-width: 800px;               /* limite sur grand écran */
  height: 1px;                    /* ligne normale */
  background-color: rgba(255, 255, 255, 0.35); /* blanc semi-transparent */
  margin: 2.5rem auto;            /* centrée avec espace */
}


/* === MEDIA QUERY MOBILE COMPLÈTE (≤ 768px) === */
@media (max-width: 768px) {

    /* Sections : hauteur automatique et padding réduit */
    .section {
        min-height: auto !important;
        padding: 2rem 1rem !important;
    }

    /* Container */
    .container {
        padding: 0 1rem !important;
        max-width: 100% !important;
    }

    /* === SHOWCASE / SLIDESHOW (OPTIMISATION MOBILE) === */
    .showcase {
        min-height: 92vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 1.5rem 1rem 3rem 1rem;
    }

    /* Important : évite les recalculs GPU inutiles */
    .slideshow img {
        object-fit: cover;
        object-position: center;
        transform: none !important; /* supprime le dézoom lourd sur mobile */
        transition: opacity 1.2s ease-in-out !important; /* animation plus légère */
    }

    .showcase-inner h1 {
        font-size: 2.5rem !important;
        white-space: normal !important;
        line-height: 1.2 !important;
    }

    .showcase-inner p {
        text-align: center;
        margin: 0 auto;
        font-size: 1.2rem !important;
        margin-bottom: 1.5rem !important;
    }

    .btnn {
        font-size: 1rem !important;
        padding: 0.6rem 1.2rem !important;
    }

    /* H2 titres */
    h2.gradient-text,
    #about h2,
    #contact h2 {
        font-size: 1.8rem !important;
        line-height: 1.2 !important;
        word-wrap: break-word !important;
    }

    /* Paragraphes About / Contact */
    #about p,
    #contact p {
        font-size: 1rem !important;
        line-height: 1.4 !important;
        overflow-wrap: break-word !important;
        margin-bottom: 1rem !important;
    }

    #about p.location {
        font-size: 0.95rem !important;
        margin-top: 2rem !important;
    }

    /* Skill grid */
    .skill-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .skill-grid img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Menu overlay */
    .menu-wrap .menu ul li {
        font-size: 1.5rem !important;
        margin: 1rem 0 !important;
    }

    /* Contact icons */
    .contact-links {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.5rem !important;
    }

    .contact-details {
        font-size: 1rem !important;
        padding: 0.4rem !important;
    }

    /* Chevron scroll */
    .scroll-down {
        font-size: 1.4rem !important;
        margin-top: 1rem !important;
    }

    /* Scroll top button */
    #scrollTopBtn {
        font-size: 2rem !important;
        bottom: 1rem !important;
        right: 1rem !important;
    }

    /* Editorial line */
    .editorial-rule {
        width: 80% !important;
        margin: 1.5rem auto !important;
    }

    /* Bonus sécurité */
    * {
        box-sizing: border-box;
    }
}

@media (max-width: 768px) {
.contact-intro {
  flex-direction: column;      /* photo au-dessus du texte */
  text-align: center;          /* centré */
  gap: 0.6rem;                 /* réduit l’espace entre photo et texte */
  margin-top: 1.5rem;          /* moins d’espace global */
	}

.contact-photo {
  width: 100px;                 /* taille raisonnable */
  height: 100px;
	}
}


.seo-entity-image {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}