/* ========================================
   0. FONTS (Polices personnalisées)
   ======================================== */
@font-face {
    font-family: 'lemon milk';
    src: url('fonts/LEMONMILK-Regular.woff2') format('woff2'),
         url('fonts/LEMONMILK-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'lemon milk';
    src: url('fonts/LEMONMILK-Bold.woff2') format('woff2'),
         url('fonts/LEMONMILK-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'montserrat';
    src: url('fonts/Montserrat-Regular.woff2') format('woff2'),
         url('fonts/Montserrat-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'montserrat';
    src: url('fonts/Montserrat-Bold.woff2') format('woff2'),
         url('fonts/Montserrat-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* ========================================
   1. RESET & BASE
   ======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Arial', sans-serif;
    background-image: url(Background1.webp);
    background-size: cover;
    padding: 0;
}

/* ========================================
   2. NAVIGATION
   ======================================== */
#nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 20px 40px;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

#nav #logo img {
    height: 75px;
    width: 150px;
}

#nav #menu {
    width: 600px;
}

#nav #menu ul {
    list-style: none;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

#nav #menu ul li a {
    text-decoration: none;
    color: black;
    font-size: 17px;
    font-family: lemon milk;
    transition: color 0.3s ease;
}

#nav #menu ul li a:hover {
    color: orangered;
}

#nav #menu ul li a img {
    height: 25px;
    width: 25px;
    transition: transform 0.3s ease;
}

#nav #menu ul li a img:hover {
    transform: scale(1.1);
}

/* ========================================
   3. FOOTER
   ======================================== */
#footer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 20px 40px;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

#footer #menu {
    width: 300px;
}

#footer #menu ul {
    list-style: none;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

#footer #menu ul li a img {
    height: 25px;
    width: 25px;
    transition: transform 0.3s ease;
}

#footer #menu ul #behance a img {
    height: 18px;
    width: 24px;
}

#footer #menu ul li a img:hover {
    transform: scale(1.1);
}

#footer #name {
    font-family: montserrat;
}

/* ========================================
   4. TITRES GLOBAUX
   ======================================== */
h1 {
    text-align: center;
    font-size: 3em;
    color: #222;
    margin-bottom: 60px;
    font-weight: bold;
    letter-spacing: 2px;
    font-family: lemon milk;
}

/* ========================================
   5. PAGE ACCUEIL - HERO SECTION
   ======================================== */
.hero-section {
    background-image: url('Background.webp');
    background-size: cover;
    background-position: center;
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
}

.hero-content {
    max-width: 600px;
    margin-left: 10%;
    padding: 40px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.hero-content h1 {
    font-size: 3em;
    color: #222;
    margin-bottom: 20px;
    font-family: 'lemon milk', Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1.2;
}

.hero-content h1 span {
    color: orangered;
}

.hero-content p {
    font-size: 20px;
    line-height: 1.8;
    color: #333;
    font-family: montserrat, Arial, sans-serif;
    text-align: justify;
    margin-bottom: 25px;
}

.hero-content strong {
    color: orangered;
    font-weight: bold;
}

.hero-btn {
    display: inline-block;
    padding: 15px 35px;
    background: orangered;
    color: white;
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
    font-size: 1em;
    font-family: 'lemon milk', Arial, sans-serif;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hero-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(255, 69, 0, 0.4);
}

/* ========================================
   6. PAGE ACCUEIL - SERVICES
   ======================================== */
.services-quick {
    padding: 60px 5%;
    background-image: url('Background1.webp');
}

.services-quick h2 {
    text-align: center;
    font-size: 2.5em;
    color: #222;
    margin-bottom: 50px;
    font-family: 'lemon milk', Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.service-card {
    background: rgba(255, 255, 255, 0.95);
    padding: 40px 30px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(255, 69, 0, 0.3);
}

.service-icon {
    font-size: 3.5em;
    margin-bottom: 20px;
}

.service-card h3 {
    font-size: 1.3em;
    color: orangered;
    margin-bottom: 15px;
    font-family: 'lemon milk', Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.service-card p {
    font-size: 0.95em;
    color: #555;
    line-height: 1.6;
    font-family: montserrat, Arial, sans-serif;
}

/* ========================================
   7. PAGE ACCUEIL - PROJETS FEATURED
   ======================================== */
.featured-projects {
    padding: 60px 5%;
    background: #f8f9fa;
}

.featured-projects h2 {
    text-align: center;
    font-size: 2.5em;
    color: #222;
    margin-bottom: 20px;
    font-family: 'lemon milk', Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.featured-projects .subtitle {
    text-align: center;
    font-size: 1.1em;
    color: #666;
    margin-bottom: 50px;
    font-family: montserrat, Arial, sans-serif;
}

.projects-preview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto 40px;
}

.project-preview-card {
    position: relative;
    height: 350px;
    border-radius: 15px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-preview-card:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.project-preview-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.3s ease;
}

.project-preview-card:hover img {
    filter: brightness(0.7);
}

.project-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    padding: 30px 20px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.project-preview-card:hover .project-overlay {
    transform: translateY(0);
}

.project-overlay h3 {
    color: white;
    font-size: 1.3em;
    font-family: 'lemon milk', Arial, sans-serif;
    margin-bottom: 5px;
}

.project-overlay p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9em;
    font-family: montserrat, Arial, sans-serif;
}

.view-all-btn {
    text-align: center;
    margin-top: 30px;
}

.view-all-btn a {
    display: inline-block;
    padding: 15px 40px;
    background: #222;
    color: white;
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
    font-family: 'lemon milk', Arial, sans-serif;
    transition: background 0.3s ease, transform 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.view-all-btn a:hover {
    background: orangered;
    transform: translateY(-3px);
}

/* ========================================
   8. PAGE ACCUEIL - STATS
   ======================================== */
.stats-section {
    padding: 60px 5%;
    background-image: url('Background1.webp');
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

.stat-item {
    text-align: center;
    padding: 30px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.stat-number {
    font-size: 3.5em;
    color: orangered;
    font-weight: bold;
    font-family: 'lemon milk', Arial, sans-serif;
    margin-bottom: 10px;
}

.stat-label {
    font-size: 1.1em;
    color: #333;
    font-family: montserrat, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ========================================
   9. PAGE ACCUEIL - CTA FINAL
   ======================================== */
.cta-final {
    padding: 80px 5%;
    background: rgba(255,255,255,0.95);
    text-align: center;
}

.cta-final h2 {
    font-size: 2.5em;
    color: #222;
    margin-bottom: 20px;
    font-family: 'lemon milk', Arial, sans-serif;
}

.cta-final p {
    font-size: 1.2em;
    color: #555;
    margin-bottom: 30px;
    font-family: montserrat, Arial, sans-serif;
}

.cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-btn-primary {
    padding: 15px 40px;
    background: orangered;
    color: white;
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
    font-family: 'lemon milk', Arial, sans-serif;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cta-btn-primary:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(255, 69, 0, 0.4);
}

.cta-btn-secondary {
    padding: 15px 40px;
    background: transparent;
    color: #222;
    text-decoration: none;
    border: 2px solid #222;
    border-radius: 30px;
    font-weight: bold;
    font-family: 'lemon milk', Arial, sans-serif;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cta-btn-secondary:hover {
    background: #222;
    color: white;
    transform: translateY(-5px);
}

/* ========================================
   10. PAGE ABOUT - HERO
   ======================================== */
.hero-about {
    background: url('Background2.webp');
    background-size: cover;
    background-position: center;
    min-height: 90vh;
    display: flex;
    align-items: end;
    justify-content: flex-start;
    padding: 100px 20px 60px;
    position: relative;
}

.hero-about-content {
    max-width: 600px;
    margin-left: 10%;
    text-align: left;
}

.hero-about h1 {
    font-size: 4em;
    color: #222;
    margin-bottom: 20px;
    margin-left: 10px;
    font-family: 'lemon milk', Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.hero-about p {
    font-size: 1.5em;
    margin-left: 10px;
    color: #333;
    font-family: montserrat, Arial, sans-serif;
}

/* ========================================
   11. PAGE ABOUT - CONTENT
   ======================================== */
.about-content {
    width: 100%;
    padding: 80px 0;
    background-image: url('Background1.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.about-section {
    background: rgba(255, 255, 255, 0.95);
    max-width: 1200px;
    margin: 0 auto 40px;
    padding: 50px;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.about-section h2 {
    font-size: 2.5em;
    color: #222;
    margin-bottom: 30px;
    font-family: 'lemon milk', Arial, sans-serif;
    border-bottom: 3px solid orangered;
    padding-bottom: 15px;
}

.about-section p {
    font-size: 20px;
    line-height: 1.8;
    color: #333;
    font-family: montserrat, Arial, sans-serif;
    text-align: justify;
    margin-bottom: 20px;
}

.about-section strong {
    color: orangered;
    font-weight: bold;
}

/* ========================================
   12. PAGE ABOUT - STATS CARDS
   ======================================== */
.stats-container {
    width: 100%;
    padding: 60px 0;
    background-image: url('Background1.webp');
    background-size: cover;
    background-position: center;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 50px;
}

.stat-card {
    text-align: center;
    padding: 40px 20px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 25px rgba(255, 69, 0, 0.3);
}

.stat-circle {
    width: 120px;
    height: 120px;
    margin: 0 auto 20px;
    border-radius: 50%;
    border: 8px solid orangered;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5em;
    font-weight: bold;
    color: orangered;
    font-family: 'lemon milk', Arial, sans-serif;
}

.stat-card h3 {
    font-size: 1.3em;
    margin-bottom: 10px;
    font-family: 'lemon milk', Arial, sans-serif;
    color: #222;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stat-card p {
    color: #555;
    font-size: 0.95em;
    font-family: montserrat, Arial, sans-serif;
    text-align: center;
}

/* ========================================
   13. PAGE ABOUT - SKILLS
   ======================================== */
.skills-container {
    width: 100%;
    padding: 60px 0;
    background: rgba(255, 255, 255, 0.95);
}

.skills-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 50px;
}

.skills-section h2 {
    font-size: 2.5em;
    color: #222;
    margin-top: 50px;
    margin-bottom: 30px;
    font-family: 'lemon milk', Arial, sans-serif;
    border-bottom: 3px solid orangered;
    padding-bottom: 15px;
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.skill-item {
    text-align: center;
    padding: 25px;
    background: #f8f9fa;
    border-radius: 12px;
    transition: transform 0.3s ease, background 0.3s ease;
}

.skill-item:hover {
    transform: scale(1.05);
    background: rgba(255, 69, 0, 0.1);
}

.skill-icon img {
    width: 100px;
    position: relative;
    justify-content: center;
    margin-bottom: 15px;
}

.skill-item h4 {
    font-family: 'lemon milk', Arial, sans-serif;
    color: #222;
    margin-bottom: 15px;
    font-size: 1.1em;
}

.skill-bar {
    height: 8px;
    background: rgba(255, 69, 0, 0.2);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 10px;
}

.skill-progress {
    height: 100%;
    background: orangered;
    border-radius: 10px;
    transition: width 1s ease;
}

/* ========================================
   14. PAGE ABOUT - TIMELINE
   ======================================== */
.timeline-container {
    width: 100%;
    padding: 60px 0;
    background-image: url('Background1.webp');
    background-size: cover;
    background-position: center;
}

.timeline-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 50px;
}

.timeline-section h2 {
    font-size: 2.5em;
    color: #222;
    margin-top: 50px;
    margin-bottom: 30px;
    font-family: 'lemon milk', Arial, sans-serif;
    text-align: center;
}

.timeline {
    position: relative;
    margin: 60px auto;
    background: rgba(255, 255, 255, 0.95);
    max-width: 1200px;
    padding: 50px;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 90%;
    background: rgba(255, 69, 0, 0.3);
}

.timeline-item {
    margin-bottom: 50px;
    position: relative;
}

.timeline-content {
    background: #f8f9fa;
    padding: 25px;
    border-radius: 12px;
    border: 2px solid rgba(255, 69, 0, 0.2);
    width: 45%;
    transition: transform 0.3s ease;
}

.timeline-content:hover {
    transform: scale(1.02);
    border-color: orangered;
}

.timeline-item:nth-child(odd) .timeline-content {
    margin-left: auto;
}

.timeline-dot {
    position: absolute;
    left: 50%;
    top: 25px;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background: orangered;
    border-radius: 50%;
    border: 4px solid white;
    z-index: 1;
    box-shadow: 0 0 0 3px rgba(255, 69, 0, 0.3);
}

.timeline-content h3 {
    color: orangered;
    margin-bottom: 10px;
    font-family: 'lemon milk', Arial, sans-serif;
    font-size: 1.2em;
}

.timeline-content .date {
    color: #666;
    font-size: 0.9em;
    margin-bottom: 10px;
    font-family: montserrat, Arial, sans-serif;
    font-style: italic;
}

.timeline-content p {
    color: #555;
    line-height: 1.6;
    font-family: montserrat, Arial, sans-serif;
    text-align: left;
}

/* ========================================
   15. PAGE ABOUT - CTA
   ======================================== */
.cta-section {
    text-align: center;
    padding: 60px 20px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.cta-section h2 {
    font-size: 2.5em;
    margin-bottom: 30px;
    font-family: 'lemon milk', Arial, sans-serif;
    color: #222;
}

.cta-button {
    display: inline-block;
    padding: 15px 40px;
    background: orangered;
    color: white;
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
    font-size: 1.1em;
    font-family: 'lemon milk', Arial, sans-serif;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cta-button:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(255, 69, 0, 0.4);
}

/* ========================================
   16. PAGE PROJETS - GRID PRINCIPALE
   ======================================== */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px;
    background-image: url(Background1.webp);
}

.projets-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 300px);
    gap: 20px;
}

.projet-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

.projet-item:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.projet-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter 0.4s ease, transform 0.4s ease;
}

.projet-item:hover img {
    filter: brightness(0.7);
    transform: scale(1.05);
}

.projet-info {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 30px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    z-index: 10;
    pointer-events: none;
}

.projet-item:hover .projet-info {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.projet-info h2 {
    font-size: 2.5em;
    margin-bottom: 15px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-family: lemon milk;
}

.projet-info p {
    font-size: 1.2em;
    font-weight: 300;
    line-height: 1.6;
    font-family: lemon milk;
}

.projet-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* Tailles spécifiques */
#projet-logo {
    grid-column: span 1;
    grid-row: span 1;
}

#projet-poster {
    grid-column: span 2;
    grid-row: span 2;
}

#projet-flocage {
    grid-column: span 1;
    grid-row: span 2;
}

#projet-affiche {
    grid-column: span 1;
    grid-row: span 2;
}

#projet-illustration {
    grid-column: span 3;
    grid-row: span 1;
}

/* ========================================
   17. PAGE PROJETS - CAROUSEL
   ======================================== */
.carousel-images {
    position: relative;
    width: 100%;
    height: 100%;
}

.carousel-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 1;
}

.carousel-img.active {
    opacity: 1;
}

.projet-item:hover .carousel-img {
    filter: brightness(0.7);
    transform: scale(1.05);
}

/* ========================================
   18. PAGE POSTERS
   ======================================== */
.main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px;
}

.projets-posters {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 602px);
    gap: 20px;
}

.projet-poster {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

.projet-poster:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.projet-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter 0.4s ease, transform 0.4s ease;
}

.projet-poster:hover img {
    filter: brightness(0.7);
    transform: scale(1.05);
}

.projet-poster:hover .carousel-img {
    filter: brightness(0.7);
    transform: scale(1.05);
}

.projet-poster:hover .projet-info {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Tailles spécifiques posters */
#sadio { grid-column: span 1; grid-row: span 1; }
#sunflower { grid-column: span 1; grid-row: span 2; }
#diamond { grid-column: span 1; grid-row: span 2; }
#immersive { grid-column: span 1; grid-row: span 2; }
#nike { grid-column: span 1; grid-row: span 2; }
#goat { grid-column: span 1; grid-row: span 2; }
#muslim { grid-column: span 1; grid-row: span 2; }
#senegal { grid-column: span 1; grid-row: span 2; }
#vj { grid-column: span 1; grid-row: span 2; }
#messi { grid-column: span 1; grid-row: span 2; }
#scotfield { grid-column: span 1; grid-row: span 2; }
#surfing { grid-column: span 1; grid-row: span 2; }
#gaza { grid-column: span 1; grid-row: span 2; }
#help { grid-column: span 1; grid-row: span 2; }
#mandela { grid-column: span 1; grid-row: span 1; }
#tmessi { grid-column: span 1; grid-row: span 2; }
#tgohan { grid-column: span 1; grid-row: span 2; }
#tmuslim { grid-column: span 1; grid-row: span 2; }
#cheap { grid-column: span 1; grid-row: span 2; }
#bes { grid-column: span 1; grid-row: span 2; }
#cestp { grid-column: span 1; grid-row: span 2; }
#fifi { grid-column: span 1; grid-row: span 2; }
#mia { grid-column: span 1; grid-row: span 2; }
#sst { grid-column: span 1; grid-row: span 2; }
#ecowear { grid-column: span 1; grid-row: span 1; }

/* ========================================
   19. PAGE LOGOS
   ======================================== */
.projets-logos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 400px);
    gap: 20px;
}

.projet-logo {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

.projet-logo:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.projet-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter 0.4s ease, transform 0.4s ease;
}

.projet-logo:hover img {
    filter: brightness(0.7);
    transform: scale(1.05);
}

.projet-logo:hover .carousel-img {
    filter: brightness(0.7);
    transform: scale(1.05);
}

.projet-logo:hover .projet-info {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Tailles spécifiques logos */
#faastime { grid-column: span 1; grid-row: span 1; }
#ecowearlogo { grid-column: span 1; grid-row: span 1; }
#pyroelysia { grid-column: span 1; grid-row: span 1; }
#sma { grid-column: span 1; grid-row: span 1; }
#sublime { grid-column: span 1; grid-row: span 1; }
#taxawu { grid-column: span 1; grid-row: span 1; }

/* ========================================
   20. PAGE ILLUSTRATIONS
   ======================================== */
.projets-illustrations {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(1, 400px);
    gap: 20px;
}

.projet-illustration {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

.projet-illustration:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.projet-illustration img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter 0.4s ease, transform 0.4s ease;
}

.projet-illustration:hover img {
    filter: brightness(0.7);
    transform: scale(1.05);
}

.projet-illustration:hover .carousel-img {
    filter: brightness(0.7);
    transform: scale(1.05);
}

.projet-illustration:hover .projet-info {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Tailles spécifiques illustrations */
#eat { grid-column: span 1; grid-row: span 1; }
#animals { grid-column: span 2; grid-row: span 1; }

/* ========================================
   21. PAGE CONTACT
   ======================================== */
#text {
    width: 100%;
    padding: 60px 0;
    background-image: url('Background.webp');
    background-size: cover;
    background-position: center;
}

#text #bio {
    font-size: 25px;
    width: 575px;
    font-family: montserrat;
    text-align: justify;
    margin-top: 100px;
    margin-left: 50px;
    margin-bottom: 100px;
}

#text #bio p a {
    color: black;
    text-align: center;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
}

#text #bio #lire {
    color: black;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 300px;
}

#text #lets {
    font-size: 25px;
    width: 575px;
    font-family: montserrat;
    text-align: justify;
    margin-top: 250px;
    margin-left: 50px;
    margin-bottom: 300px;
}

#text #about {
    font-size: 20px;
    width: 575px;
    font-family: montserrat;
    text-align: justify;
    margin-top: 70px;
    margin-left: 50px;
    margin-bottom: 100px;
}

#text #about p a {
    color: black;
    text-align: center;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
}

#text #about #clic {
    color: black;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 100px;
}

#text #merci {
    font-size: 40px;
    width: 575px;
    font-family: montserrat;
    text-align: justify;
    margin-top: 200px;
    margin-left: 50px;
    margin-bottom: 300px;
}

#text #merci p a {
    color: black;
    text-align: center;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
}

.contact-section {
    background-color: white;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 60px 20px;
}

.contact-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

.contact-left {
    margin-top: 200px;
    padding-right: 40px;
    font-family: montserrat;
    font-weight: bold;
}

.contact-info {
    font-size: 1em;
    margin-bottom: 10px;
    color: #555;
}

.contact-email {
    display: inline-block;
    font-size: 1.1em;
    color: black;
    text-decoration: none;
    border-bottom: 1px solid black;
    margin-bottom: 20px;
    transition: color 0.3s ease;
}

.contact-email:hover {
    color: #ff6347;
    border-bottom-color: #ff6347;
}

.contact-separator {
    font-size: 1em;
    color: #999;
    margin: 20px 0;
}

.contact-instruction {
    font-size: 1em;
    margin-bottom: 30px;
    color: #555;
}

.contact-social {
    font-size: 0.95em;
    color: #777;
}

.contact-social a {
    color: #000;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.contact-social a:hover {
    color: #ff6347;
}

.contact-instruction a img {
    margin-left: 10px;
    height: 25px;
    width: 25px;
    transition: transform 0.3s ease;
}

.contact-instruction a img:hover {
    transform: scale(1.1);
}

.contact-right {
    background-color: white;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
}

.contact-right h2 {
    margin-top: 10px;
    margin-bottom: 40px;
}

.contact-form {
    width: 100%;
}

.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    font-size: 0.9em;
    font-weight: 500;
    margin-bottom: 8px;
    color: #333;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-top: none;
    border-left: none;
    border-right: none;
    font-size: 1em;
    font-family: inherit;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #000;
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.submit-btn {
    width: 100%;
    padding: 15px 30px;
    background-color: #000;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1em;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.submit-btn:hover {
    background-color: #333;
    transform: translateY(-2px);
}

.submit-btn:active {
    transform: translateY(0);
}

/* ========================================
   22. PAGE DÉTAIL PROJET
   ======================================== */
.main-container {
    margin: 0 auto;
    padding: 40px 20px;
    background-image: url(Background1.webp);
}

.image-container {
    max-width: 600px;
    margin: 0 auto 60px;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

.image-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 141.4%;
}

.image-wrapper-square {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
}

.image-wrapper-landscape {
    position: relative;
    width: 100%;
    padding-bottom: 124.9%;
}

.poster-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.5s ease;
}

.poster-image.default {
    opacity: 1;
    z-index: 2;
}

.poster-image.hover {
    opacity: 0;
    z-index: 1;
}

.image-container:hover .poster-image.default {
    opacity: 0;
}

.image-container:hover .poster-image.hover {
    opacity: 1;
}

.description-section {
    max-width: 1200px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.95);
    padding: 50px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.description-section h2 {
    font-size: 2.5em;
    color: #333;
    margin-bottom: 30px;
    font-family: montserrat;
    font-weight: bold;
    border-bottom: 3px solid orangered;
    padding-bottom: 15px;
}

.description-content {
    font-size: 1.2em;
    line-height: 1.8;
    color: #555;
    font-family: montserrat;
    text-align: justify;
}

.description-content p {
    margin-bottom: 20px;
}

.description-content strong {
    color: #333;
    font-weight: bold;
}

.project-details {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 2px solid #eee;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    font-family: montserrat;
}

.detail-item {
    padding: 15px;
    background: #f8f9fa;
    border-radius: 10px;
}

.detail-item strong {
    display: block;
    color: orangered;
    margin-bottom: 8px;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.detail-item span {
    color: #333;
    font-size: 1.1em;
}

.logo-container {
    max-width: 1200px;
    margin: 0 auto 60px;
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 400px);
    gap: 20px;
}

.logo-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

.logo-wrapper:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.logo-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter 0.4s ease, transform 0.4s ease;
}

.logo-wrapper:hover img {
    filter: brightness(0.7);
    transform: scale(1.05);
}

/* Tailles spécifiques détails projets */
#ecowear1 { grid-column: span 1; grid-row: span 1; }
#ecowear2 { grid-column: span 1; grid-row: span 1; }
#ecowear3 { grid-column: span 1; grid-row: span 1; }
#ecowear4 { grid-column: span 1; grid-row: span 1; }
#ecowear5 { grid-column: span 2; grid-row: span 1; }
#sma1 { grid-column: span 1; grid-row: span 1; }
#sma2 { grid-column: span 1; grid-row: span 1; }
#sma3 { grid-column: span 1; grid-row: span 1; }
#sma4 { grid-column: span 2; grid-row: span 1; }
#sma5 { grid-column: span 2; grid-row: span 1; }
#sma6 { grid-column: span 2; grid-row: span 1; }
#faastime1 { grid-column: span 1; grid-row: span 1; }
#faastime2 { grid-column: span 1; grid-row: span 1; }
#faastime3 { grid-column: span 1; grid-row: span 1; }
#faastime4 { grid-column: span 1; grid-row: span 1; }
#faastime5 { grid-column: span 2; grid-row: span 1; }
#faastime6 { grid-column: span 2; grid-row: span 1; }
#faastime7 { grid-column: span 1; grid-row: span 1; }
#taxawu1 { grid-column: span 1; grid-row: span 1; }
#taxawu2 { grid-column: span 1; grid-row: span 1; }
#taxawu3 { grid-column: span 2; grid-row: span 2; }
#taxawu4 { grid-column: span 2; grid-row: span 1; }
#sublime1 { grid-column: span 1; grid-row: span 1; }
#sublime2 { grid-column: span 1; grid-row: span 1; }
#sublime3 { grid-column: span 1; grid-row: span 1; }
#sublime4 { grid-column: span 1; grid-row: span 1; }
#sublime5 { grid-column: span 2; grid-row: span 1; }
#ecowearaff1 { grid-column: span 3; grid-row: span 3; }
#ecowearaff2 { grid-column: span 1; grid-row: span 1; }
#ecowearaff3 { grid-column: span 1; grid-row: span 1; }
#ecowearaff4 { grid-column: span 1; grid-row: span 1; }
#bes1 { grid-column: span 3; grid-row: span 1; }
#bes2 { grid-column: span 3; grid-row: span 1; }
#bes3 { grid-column: span 3; grid-row: span 1; }
#bes4 { grid-column: span 3; grid-row: span 1; }
#cestp1 { grid-column: span 3; grid-row: span 1; }
#cestp2 { grid-column: span 3; grid-row: span 1; }
#fifi1 { grid-column: span 3; grid-row: span 1; }
#fifi2 { grid-column: span 3; grid-row: span 1; }
#mia1 { grid-column: span 1; grid-row: span 1; }
#sst1 { grid-column: span 1; grid-row: span 1; }
#cheap1 { grid-column: span 1; grid-row: span 1; }
#cheap2 { grid-column: span 1; grid-row: span 1; }
#cheap3 { grid-column: span 1; grid-row: span 1; }
#cheap4 { grid-column: span 1; grid-row: span 1; }
#cheap5 { grid-column: span 1; grid-row: span 1; }

/* ========================================
   23. UTILITAIRES
   ======================================== */
.back {
    margin: 30px;
    font-size: 20px;
    font-family: lemon milk;
}

.back a {
    color: black;
    text-decoration: none;
    transition: color 0.3s ease;
}

.back a:hover {
    color: orangered;
}

.hover-instruction {
    text-align: center;
    font-size: 0.95em;
    color: rgba(0, 0, 0, 0.7);
    margin-bottom: 20px;
    font-style: italic;
    font-family: 'Arial', sans-serif;
    animation: fadeInOut 2s ease-in-out infinite;
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.hover-instruction.hidden {
    display: none;
}

.ecowear-link {
    text-align: center;
    font-size: 0.95em;
    color: rgba(0, 0, 0, 0.7);
    margin-bottom: 20px;
    font-style: italic;
    font-family: 'Arial', sans-serif;
    animation: fadeInOut 2s ease-in-out infinite;
}

.ecowear-link a {
    text-decoration: none;
    text-align: center;
    color: orangered;
}

/* ========================================
   24. RESPONSIVE - TABLETTES (max-width: 1024px)
   ======================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Navigation */
    #nav {
        flex-direction: column;
        padding: 15px 20px;
        gap: 15px;
    }
    
    #nav #logo img {
        height: 60px;
        width: 120px;
    }
    
    #nav #menu {
        width: 100%;
        margin-top: 10px;
    }
    
    #nav #menu ul {
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
    }

    #nav #menu ul li a {
        font-size: 15px;
    }

    /* Titres globaux */
    h1 {
        font-size: 2.5em;
        margin-bottom: 40px;
    }

    /* Hero Accueil */
    .hero-section {
        min-height: 80vh;
    }

    .hero-content {
        max-width: 90%;
        padding: 35px 25px;
        margin-left: 5%;
    }

    .hero-content h1 {
        font-size: 2.3em;
    }

    .hero-content p {
        font-size: 18px;
        line-height: 1.7;
    }

    /* Services et Featured Projects */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
        padding: 0 20px;
    }

    .projects-preview {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .project-preview-card {
        height: 300px;
    }

    /* Stats sections */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 0 30px;
        gap: 30px;
    }

    .stat-card {
        padding: 35px 20px;
    }

    .stat-circle {
        width: 110px;
        height: 110px;
        font-size: 2.3em;
    }

    /* CTA Final */
    .cta-final {
        padding: 60px 30px;
    }

    .cta-final h2 {
        font-size: 2.2em;
    }

    .cta-buttons {
        gap: 15px;
    }

    /* About Page */
    .hero-about {
        padding: 80px 30px 50px;
        min-height: 70vh;
    }

    .hero-about-content {
        max-width: 90%;
        margin-left: 5%;
    }

    .hero-about h1 {
        font-size: 3em;
    }

    .hero-about p {
        font-size: 1.3em;
    }

    .about-content {
        padding: 60px 0;
    }

    .about-section {
        padding: 40px 30px;
        margin: 0 20px 30px;
    }

    .about-section h2 {
        font-size: 2em;
    }

    .about-section p {
        font-size: 18px;
    }

    /* Skills */
    .skills-section {
        padding: 40px 30px;
        margin: 0 20px;
    }

    .skills-section h2 {
        font-size: 2em;
    }

    .skills-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
    }

    .skill-icon img {
        width: 80px;
    }

    /* Timeline */
    .timeline-section {
        padding: 40px 30px;
        margin: 0 20px;
    }

    .timeline-section h2 {
        font-size: 2em;
    }

    .timeline {
        padding: 40px 30px;
    }

    .timeline-content {
        width: 48%;
        padding: 20px;
    }

    .timeline-content h3 {
        font-size: 1.1em;
    }

    /* CTA Section */
    .cta-section {
        padding: 50px 30px;
        margin: 0 20px 40px;
    }

    .cta-section h2 {
        font-size: 2em;
    }

    /* Page Projets principale */
    .container {
        padding: 30px 15px;
    }

    .projets-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        gap: 15px;
    }

    .projet-item {
        min-height: 280px;
    }

    /* Réorganisation projets tablette */
    #logo {
        grid-column: span 1;
        grid-row: span 1;
    }

    #poster {
        grid-column: span 1;
        grid-row: span 2;
    }

    #flocage {
        grid-column: span 1;
        grid-row: span 1;
    }

    #affiche {
        grid-column: span 1;
        grid-row: span 2;
    }

    #illustration {
        grid-column: span 2;
        grid-row: span 1;
    }

    .projet-info h2 {
        font-size: 2em;
    }

    .projet-info p {
        font-size: 1em;
    }

    /* Pages sous-projets */
    .main {
        padding: 30px 15px;
    }

    .projets-posters,
    .projets-logos,
    .projets-illustrations {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        gap: 15px;
    }

    .projet-poster,
    .projet-logo,
    .projet-illustration {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
        min-height: 300px;
    }

    /* Pages détails - Logo Container */
    .logo-container {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        gap: 15px;
        padding: 0 15px;
    }

    .logo-wrapper {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
        min-height: 250px;
    }

    /* Exceptions pour grandes images */
    #ecowear5, #sma4, #sma5, #sma6,
    #faastime5, #faastime6,
    #taxawu3, #taxawu4,
    #sublime5,
    #ecowearaff1,
    #bes1, #bes2, #bes3, #bes4,
    #cestp1, #cestp2,
    #fifi1, #fifi2 {
        grid-column: span 2 !important;
    }

    /* Contact */
    .contact-container {
        grid-template-columns: 1fr;
        gap: 40px;
        max-width: 700px;
    }
    
    .contact-left {
        padding-right: 0;
        text-align: center;
        margin-top: 50px;
    }

    .contact-right {
        padding: 35px;
    }

    #text #bio,
    #text #lets,
    #text #about,
    #text #merci {
        width: 85%;
        font-size: 22px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Image Container détail projet */
    .image-container {
        max-width: 500px;
    }

    .description-section {
        padding: 40px 30px;
        margin: 0 15px;
    }

    .description-section h2 {
        font-size: 2em;
    }

    .description-content {
        font-size: 1.1em;
    }

    .project-details {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    /* Footer */
    #footer {
        flex-direction: column;
        gap: 20px;
        padding: 30px 20px;
    }

    #footer #menu {
        width: 100%;
    }

    #footer #menu ul {
        justify-content: center;
        gap: 30px;
    }

    #footer #name {
        text-align: center;
        font-size: 14px;
    }
}

/* ========================================
   25. RESPONSIVE - MOBILE (max-width: 768px)
   ======================================== */
@media (max-width: 768px) {
    /* Navigation */
    #nav {
        flex-direction: column;
        padding: 15px 10px;
        gap: 15px;
    }
    
    #nav #logo img {
        height: 50px;
        width: 100px;
    }
    
    #nav #menu {
        width: 100%;
    }

    #nav #menu ul {
        flex-wrap: wrap;
        gap: 15px;
        justify-content: center;
    }

    #nav #menu ul li a {
        font-size: 13px;
    }
    
    #nav #menu ul li a img {
        height: 22px;
        width: 22px;
    }

    /* Titres */
    h1 {
        font-size: 1.8em;
        margin-bottom: 30px;
        letter-spacing: 1px;
    }

    /* Hero Accueil */
    .hero-section {
        min-height: 100vh;
        align-items: center;
        padding: 20px 0;
    }

    .hero-content {
        margin-left: 5%;
        margin-right: 5%;
        width: 90%;
        padding: 25px 20px;
        max-width: none;
    }

    .hero-content h1 {
        font-size: 1.8em;
        line-height: 1.3;
    }

    .hero-content p {
        font-size: 15px;
        line-height: 1.7;
        margin-bottom: 20px;
    }

    .hero-btn {
        padding: 12px 30px;
        font-size: 0.9em;
    }

    /* Services */
    .services-quick {
        padding: 40px 15px;
    }

    .services-quick h2 {
        font-size: 1.8em;
        margin-bottom: 30px;
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 10px;
    }

    .service-card {
        padding: 30px 20px;
    }

    .service-icon {
        font-size: 3em;
    }

    /* Featured Projects */
    .featured-projects {
        padding: 40px 15px;
    }

    .featured-projects h2 {
        font-size: 1.8em;
        margin-bottom: 15px;
    }

    .featured-projects .subtitle {
        font-size: 1em;
        margin-bottom: 30px;
    }

    .projects-preview {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .project-preview-card {
        height: 300px;
    }

    /* Stats */
    .stats-section {
        padding: 40px 15px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        padding: 0 15px;
        gap: 20px;
    }

    .stat-item {
        padding: 25px 15px;
    }

    .stat-number {
        font-size: 2.8em;
    }

    .stat-label {
        font-size: 1em;
    }

    /* CTA Final */
    .cta-final {
        padding: 50px 20px;
    }

    .cta-final h2 {
        font-size: 1.8em;
        margin-bottom: 15px;
    }

    .cta-final p {
        font-size: 1em;
        margin-bottom: 25px;
    }

    .cta-buttons {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }

    .cta-btn-primary,
    .cta-btn-secondary {
        width: 100%;
        max-width: 280px;
        padding: 12px 30px;
        font-size: 0.9em;
    }

    /* About Page */
    .hero-about {
        min-height: 60vh;
        padding: 60px 15px 40px;
        align-items: flex-end !important;
        justify-content: flex-start !important;
    }

    .hero-about-content {
        margin-left: 5% !important;
        text-align: left !important;
        max-width: 90%;
    }

    .hero-about h1 {
        font-size: 2em;
        margin-left: 0;
        letter-spacing: 2px;
    }

    .hero-about p {
        font-size: 1.1em;
        margin-left: 0;
    }

    .about-content {
        padding: 40px 0;
    }

    .about-section {
        padding: 30px 20px;
        margin: 0 15px 30px;
    }

    .about-section h2 {
        font-size: 1.6em;
        margin-bottom: 20px;
        padding-left: 0;
        padding-right: 0;
    }

    .about-section p {
        font-size: 15px;
        line-height: 1.7;
        padding: 0;
        margin-bottom: 15px;
    }

    /* Stats Cards */
    .stats-container {
        padding: 40px 0;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 15px;
    }

    .stat-card {
        padding: 30px 15px;
    }

    .stat-circle {
        width: 90px;
        height: 90px;
        font-size: 2em;
        border-width: 6px;
    }

    .stat-card h3 {
        font-size: 1.1em;
    }

    .stat-card p {
        font-size: 0.9em;
    }

    /* Skills */
    .skills-container {
        padding: 40px 0;
    }

    .skills-section {
        padding: 0 15px;
    }

    .skills-section h2 {
        font-size: 1.6em;
        margin-top: 30px;
        margin-bottom: 20px;
    }

    .skills-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .skill-item {
        padding: 20px 15px;
    }

    .skill-icon img {
        width: 70px;
    }

    .skill-item h4 {
        font-size: 0.95em;
        margin-bottom: 10px;
    }

    /* Timeline */
    .timeline-container {
        padding: 40px 0;
    }

    .timeline-section {
        padding: 0 15px;
    }

    .timeline-section h2 {
        font-size: 1.6em;
        margin-top: 30px;
        margin-bottom: 20px;
    }

    .timeline {
        padding: 30px 15px;
        margin: 40px 0;
    }

    .timeline::before {
        left: 15px;
        width: 2px;
    }

    .timeline-content {
        width: calc(100% - 50px);
        margin-left: 50px !important;
        padding: 20px 15px;
    }

    .timeline-item:nth-child(odd) .timeline-content {
        margin-left: 50px;
    }

    .timeline-dot {
        left: 15px;
        width: 16px;
        height: 16px;
        border-width: 3px;
    }

    .timeline-content h3 {
        font-size: 1em;
        margin-bottom: 8px;
    }

    .timeline-content .date {
        font-size: 0.85em;
    }

    .timeline-content p {
        font-size: 0.9em;
        line-height: 1.5;
    }

    /* CTA Section */
    .cta-section {
        padding: 40px 20px;
        margin: 0 15px 30px;
    }

    .cta-section h2 {
        font-size: 1.8em;
        margin-bottom: 20px;
        padding: 0 10px;
    }

    .cta-button {
        padding: 12px 35px;
        font-size: 1em;
        margin: 0 10px;
    }

    /* Projets Grid Principale */
    .container {
        padding: 20px 10px;
    }
    
    .projets-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 15px;
    }

    .projet-item {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
        min-height: 280px;
    }

    /* Forcer tous les projets en 1 colonne */
    #logo, #poster, #flocage, #affiche, #illustration {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }

    /* Info projet visible sur mobile */
    .projet-info {
        opacity: 1;
        visibility: visible;
        background: rgba(0, 0, 0, 0.75);
        padding: 20px;
    }

    .projet-info h2 {
        font-size: 1.5em;
        margin-bottom: 10px;
        letter-spacing: 2px;
    }

    .projet-info p {
        font-size: 0.95em;
        line-height: 1.5;
    }

    /* Désactiver effets hover sur mobile */
    .projet-item:hover img,
    .projet-item:hover .carousel-img {
        filter: none;
        transform: none;
    }

    .projet-item:hover .projet-info {
        opacity: 1;
    }

    /* Pages sous-projets */
    .main {
        padding: 20px 10px;
    }

    .projets-posters,
    .projets-logos,
    .projets-illustrations {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 15px;
    }

    .projet-poster,
    .projet-logo,
    .projet-illustration {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
        min-height: 300px;
    }

    /* Forcer tous les sous-projets en 1 colonne */
    #sadio, #sunflower, #diamond, #immersive, #nike, #goat, #muslim, 
    #senegal, #vj, #messi, #scotfield, #surfing, #gaza, #help, 
    #mandela, #tmessi, #tgohan, #tmuslim, #cheap, #bes, #cestp, 
    #fifi, #mia, #sst, #ecowear,
    #faastime, #ecowearlogo, #pyroelysia, #sma, #sublime, #taxawu,
    #eat, #animals {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }

    .projet-poster:hover img,
    .projet-logo:hover img,
    .projet-illustration:hover img,
    .projet-poster:hover .carousel-img,
    .projet-logo:hover .carousel-img,
    .projet-illustration:hover .carousel-img {
        filter: none;
        transform: none;
    }

    /* Contact */
    #text {
        padding: 40px 0;
    }

    #text #bio,
    #text #about {
        width: 90%;
        font-size: 16px;
        margin: 50px auto;
        text-align: left;
    }

    #text #lets {
        width: 45%;
        font-size: 16px;
        margin: 50px auto 50px 5%;
        text-align: left;
    }

    #text #merci {
        width: 90%;
        font-size: 28px;
        margin: 100px auto;
        text-align: left;
    }

    .contact-section {
        padding: 40px 15px;
        min-height: auto;
    }

    .contact-container {
        grid-template-columns: 1fr;
        gap: 40px;
        max-width: 100%;
    }
    
    .contact-left {
        padding: 0;
        text-align: left;
        margin-top: 0;
    }

    .contact-info,
    .contact-separator,
    .contact-instruction,
    .contact-social {
        font-size: 0.95em;
    }

    .contact-email {
        font-size: 1em;
    }

    .contact-right {
        padding: 25px 20px;
    }

    .contact-right h2 {
        font-size: 1.8em;
        margin-bottom: 30px;
    }

    .form-group {
        margin-bottom: 20px;
    }

    .form-group label {
        font-size: 0.85em;
    }

    .form-group input,
    .form-group textarea {
        padding: 10px 12px;
        font-size: 0.95em;
    }

    .submit-btn {
        padding: 12px 25px;
        font-size: 0.95em;
    }

    /* Détail Projet */
    .main-container {
        padding: 20px 10px;
    }

    .image-container {
        max-width: 100%;
        margin-bottom: 40px;
    }

    .description-section {
        padding: 25px 20px;
        margin: 0 10px;
    }

    .description-section h2 {
        font-size: 1.6em;
        margin-bottom: 20px;
    }

    .description-content {
        font-size: 1em;
        line-height: 1.7;
    }

    .project-details {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 30px;
        padding-top: 20px;
    }

    .detail-item {
        padding: 12px 15px;
    }

    .detail-item strong {
        font-size: 0.85em;
    }

    .detail-item span {
        font-size: 1em;
    }

    /* Logo Container Mobile - CORRECTION CRITIQUE */
    .logo-container {
        display: block;
        max-width: 100%;
        padding: 0 10px;
        margin: 0 0 40px 0;
        gap: 0;
    }

    .logo-wrapper {
        position: static;
        width: 100%;
        height: auto;
        min-height: auto;
        margin-bottom: 15px;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        grid-column: auto !important;
        grid-row: auto !important;
    }

    .logo-wrapper img {
        position: static;
        width: 100%;
        height: auto;
        min-height: auto;
        object-fit: contain;
        display: block;
        transform: none;
        filter: none;
    }

    .logo-wrapper:hover img {
        filter: none;
        transform: none;
    }

    /* Forcer tous les wrappers en mode bloc */
    #ecowear1, #ecowear2, #ecowear3, #ecowear4, #ecowear5,
    #sma1, #sma2, #sma3, #sma4, #sma5, #sma6,
    #faastime1, #faastime2, #faastime3, #faastime4, #faastime5, #faastime6, #faastime7,
    #taxawu1, #taxawu2, #taxawu3, #taxawu4,
    #sublime1, #sublime2, #sublime3, #sublime4, #sublime5,
    #ecowearaff1, #ecowearaff2, #ecowearaff3, #ecowearaff4,
    #bes1, #bes2, #bes3, #bes4,
    #cestp1, #cestp2,
    #fifi1, #fifi2,
    #mia1, #sst1,
    #cheap1, #cheap2, #cheap3, #cheap4, #cheap5 {
        position: static;
        width: 100%;
        height: auto;
        min-height: auto;
        grid-column: auto !important;
        grid-row: auto !important;
        display: block;
    }

    /* Footer Mobile */
    #footer {
        flex-direction: column;
        gap: 25px;
        padding: 30px 20px;
    }

    #footer #menu {
        width: 100%;
        order: 1;
    }

    #footer #menu ul {
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap;
    }

    #footer #menu ul li a img {
        height: 28px;
        width: 28px;
    }

    #footer #menu ul #behance a img {
        height: 21px;
        width: 28px;
    }

    #footer #name {
        text-align: center;
        font-size: 13px;
        order: 2;
    }

    /* Utilitaires Mobile */
    .back {
        margin: 20px 15px;
        font-size: 16px;
    }

    .hover-instruction,
    .ecowear-link {
        font-size: 0.85em;
        margin-bottom: 15px;
        padding: 0 10px;
    }
}

/* ========================================
   26. RESPONSIVE - PETITS MOBILES (max-width: 480px)
   ======================================== */
@media (max-width: 480px) {
    /* Navigation ultra-compacte */
    #nav #menu ul {
        gap: 10px;
    }

    #nav #menu ul li a {
        font-size: 12px;
    }

    /* Hero encore plus compact */
    .hero-content h1 {
        font-size: 1.5em;
    }

    .hero-content p {
        font-size: 14px;
    }

    /* Titres */
    h1 {
        font-size: 1.5em;
    }

    /* Services */
    .services-quick h2,
    .featured-projects h2,
    .cta-final h2 {
        font-size: 1.5em;
    }

    .service-card {
        padding: 25px 15px;
    }

    /* Stats */
    .stat-circle {
        width: 80px;
        height: 80px;
        font-size: 1.8em;
    }

    .stat-number {
        font-size: 2.5em;
    }

    /* Skills grid en 1 colonne sur très petit écran */
    .skills-grid {
        grid-template-columns: 1fr;
    }

    /* About */
    .hero-about h1 {
        font-size: 1.6em;
    }

    .hero-about p {
        font-size: 1em;
    }

    /* Projets */
    .projet-item {
        min-height: 250px;
    }

    .projet-info h2 {
        font-size: 1.3em;
    }

    .projet-info p {
        font-size: 0.9em;
    }

    /* Contact */
    #text #merci {
        font-size: 24px;
    }

    .contact-right h2 {
        font-size: 1.5em;
    }

    /* Description */
    .description-section h2 {
        font-size: 1.4em;
    }

    .description-content {
        font-size: 0.95em;
    }
}
/* ========================================
   27. PAGE MERCI - STYLES SPÉCIFIQUES
   ======================================== */

/* Section principale page merci */
.merci-section {
    min-height: calc(100vh - 240px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
}

/* Carte de message */
.merci-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 60px 80px;
    max-width: 700px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    animation: slideUp 0.6s ease-out;
}

/* Animation d'apparition de la carte */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Icône de succès (cercle) */
.success-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 30px;
    background: orangered;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: scaleIn 0.5s ease-out 0.2s both;
}

/* Animation d'apparition du cercle */
@keyframes scaleIn {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

/* SVG du checkmark */
.success-icon svg {
    width: 50px;
    height: 50px;
    stroke: white;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: checkmark 0.6s ease-out 0.5s forwards;
}

/* Animation de dessin du checkmark */
@keyframes checkmark {
    to { stroke-dashoffset: 0; }
}

/* Titre de la carte */
.merci-card h1 {
    font-size: 2.5em;
    color: #222;
    margin-bottom: 20px;
    font-weight: bold;
    font-family: 'lemon milk', Arial, sans-serif;
}

/* Paragraphes de la carte */
.merci-card p {
    font-size: 1.2em;
    color: #555;
    line-height: 1.8;
    margin-bottom: 15px;
    font-family: montserrat, Arial, sans-serif;
}

/* Texte mis en avant */
.highlight {
    color: orangered;
    font-weight: bold;
}

/* Séparateur visuel */
.divider {
    width: 80px;
    height: 4px;
    background: orangered;
    margin: 30px auto;
    border-radius: 2px;
}

/* Texte d'information */
.info-text {
    font-size: 1em;
    color: #666;
    margin-top: 25px;
}

/* Groupe de boutons */
.button-group {
    margin-top: 40px;
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Style de base des boutons */
.btn {
    display: inline-block;
    padding: 15px 35px;
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
    font-size: 1em;
    transition: all 0.3s ease;
    font-family: 'lemon milk', Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Bouton principal */
.btn-primary {
    background: orangered;
    color: white;
    box-shadow: 0 4px 15px rgba(255, 69, 0, 0.4);
}

.btn-primary:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(255, 69, 0, 0.4);
}

/* Bouton secondaire */
.btn-secondary {
    background: transparent;
    color: #222;
    border: 2px solid #222;
}

.btn-secondary:hover {
    background: #222;
    color: white;
    transform: translateY(-5px);
}

/* ========================================
   RESPONSIVE PAGE MERCI - TABLETTE
   ======================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    .merci-section { 
        padding: 60px 20px; 
    }

    .merci-card { 
        padding: 50px 60px; 
        max-width: 600px; 
    }

    .merci-card h1 { 
        font-size: 2.2em; 
    }

    .merci-card p { 
        font-size: 1.1em; 
    }
}

/* ========================================
   RESPONSIVE PAGE MERCI - MOBILE
   ======================================== */
@media (max-width: 768px) {
    .merci-section { 
        padding: 40px 15px; 
        min-height: calc(100vh - 200px); 
    }

    .merci-card { 
        padding: 40px 30px; 
        border-radius: 15px; 
    }

    .success-icon { 
        width: 80px; 
        height: 80px; 
    }

    .success-icon svg { 
        width: 40px; 
        height: 40px; 
    }

    .merci-card h1 { 
        font-size: 1.8em; 
    }

    .merci-card p { 
        font-size: 1em; 
    }

    .button-group { 
        flex-direction: column; 
        align-items: stretch; 
    }

    .btn { 
        width: 100%; 
    }
}

/* ========================================
   RESPONSIVE PAGE MERCI - PETIT MOBILE
   ======================================== */
@media (max-width: 480px) {
    .merci-card { 
        padding: 35px 25px; 
    }

    .merci-card h1 { 
        font-size: 1.5em; 
    }

    .merci-card p { 
        font-size: 0.95em; 
    }

    .success-icon { 
        width: 70px; 
        height: 70px; 
    }

    .btn { 
        padding: 12px 28px; 
        font-size: 0.9em; 
    }
}