/* Déclaration font */
@font-face {
  font-family: 'TAN-Tangkiwood'; 
  
  src: url('../font/TAN-Tangkiwood/TANTangkiwood-Display.otf') format('opentype'), 
       url('../font/Tan-Tangkiwood/TANTangkiwood-Display.ttf') format('truetype');
  
  font-weight: bold; 
  font-style: normal; 
  font-display: swap; 
}

:root {
    --bg-color: #fcf8ed; /* Beige crème fond */
    --text-red: #781728; /* Rouge foncé titres */
    --text-blue: #004aad; /* Bleu DWS */
    --text-dark: #333333;
    --font-serif: "Caladea", serif;; 
}


body {
    background-color: var(--bg-color);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Top Menu Global */
#top-bar-menu {
    height: 10vh; /* Attention à l'espace : 10vh pas 10 vh */
    padding: 0 2vh;
    border-bottom: solid 1px #781728;
    
    /* MODIFICATION : On utilise Flexbox au lieu de block + float */
    display: flex;
    align-items: center; /* Centre verticalement */
    justify-content: space-between; /* Ecarte le titre à gauche et le menu à droite */
    overflow: hidden; /* Empêche la scrollbar globale de la page d'apparaitre */
}

.menu-title {
    color: #781728;
    font-family: 'TAN-Tangkiwood', serif;
    font-size: 3rem; /* xxx-large est variable, rem est plus sûr */
    margin: 0;
    
    /* Empêche le titre de rétrécir si manque de place */
    flex-shrink: 0; 
    margin-right: 20px; /* Un petit espace de sécurité avec le menu */
}

/* Le conteneur du menu de navigation */
.menu-nav {
    /* C'est ici que la magie du scroll opère */
    flex-grow: 1; /* Prend tout l'espace restant */
    overflow-x: auto; /* Active le scroll horizontal si ça dépasse */
    -webkit-overflow-scrolling: touch; /* Scroll fluide sur iPhone */
    
    /* Pour cacher la barre de défilement (optionnel, voir plus bas) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
}

/* Pour cacher la barre de défilement sur Chrome/Safari/Opera */
.menu-nav::-webkit-scrollbar {
    display: none;
}

.menu-nav ol {
    list-style-type: none;
    margin: 0;
    padding: 0;
    
    /* Force les éléments à rester sur une seule ligne */
    display: flex;
    justify-content: flex-end; /* Colle les éléments à droite sur Desktop */
    white-space: nowrap; /* Sécurité anti-retour à la ligne */
}

.menu-nav .nav-item {
    cursor: pointer;
    color: #781728;
    font-family: "Caladea", serif;
    font-weight: 400;
    font-size: x-large;
    font-style: italic;
    
    /* Espacement */
    margin-left: 4vh;
    padding: 10px 0; /* Augmente un peu la zone de clic pour le tactile */
}

/* RESPONSIVE MOBILE */
@media screen and (max-width: 900px) {
    
    #top-bar-menu {
        /* On passe en colonne : Titre en haut, Menu en bas */
        flex-direction: column; 
        
        /* On aligne les blocs à gauche (le titre se calera à gauche) */
        align-items: flex-start; 
        
        /* On libère la hauteur fixe (10vh) pour que le contenu ne soit pas coupé */
        height: auto; 
        
        /* Un peu d'air en haut et en bas */
        padding: 15px 2vh; 
    }

    .menu-title {
        /* Le titre prend toute la largeur dispo */
        width: 100%;
        text-align: left;
        margin-right: 0;
        margin-bottom: 10px; /* Espace entre le titre et le menu */
        font-size: 2.5rem; /* Ajustement optionnel de la taille */
    }

    .menu-nav {
        /* Le bloc menu prend toute la largeur pour permettre le scroll */
        width: 100%;
        
        /* On garde les propriétés de scroll définies précédemment */
        overflow-x: auto; 
    }

    .menu-nav ol {
        /* IMPORTANT : Sur mobile, on aligne les items au DÉBUT (gauche) 
           pour que le premier item ("Accueil") soit visible sans scroller */
        justify-content: flex-start;
        padding-left: 0; /* On retire le padding par défaut des listes */
    }

    .menu-nav .nav-item {
        /* On ajuste les marges pour que le premier élément colle au bord gauche */
        margin-left: 0; 
        margin-right: 25px; /* Espace entre les éléments */
        font-size: 1.2rem; /* Taille de police confortable pour le tactile */
    }
    
    /* Petit ajustement pour le dernier élément afin qu'il ne colle pas au bord droit du scroll */
    .menu-nav .nav-item:last-child {
        padding-right: 20px;
    }
}

.menu-nav .nav-item:hover {
    text-decoration: underline;
}

.active-nav {
    text-decoration: underline;
}

/* Pages content */

.div-content, .project-details {
    display: none;
}

.current-content { /* class de la div correspondant à celle actuellement affichée */
    display: block !important;
}

/* Accueil content */

/* --- CONFIGURATION GLOBALE ACCUEIL --- */
#content-accueil {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: #fcf8ed; /* Couleur de fond unie en attendant l'image */
}

/* --- GESTION DES IMAGES DE FOND --- */
.background-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

#back-accueil-img {
    width: 100%;
    height: 100%;
    /* 'cover' assure que l'image remplit tout l'écran sans déformation */
    object-fit: cover; 
    /* On ancre l'image au centre pour le PC, et en haut pour le mobile */
    object-position: center; 
    display: block;
}

/* --- CONTENEUR INTERACTIF (Boutons + Contact) --- */
.interactive-container {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Par défaut (PC), on aligne le contenu vers le bas */
    justify-content: flex-end; 
    padding-bottom: 5vh; /* Marge du bas pour ne pas coller au bord */
}

/* --- STYLE DES BOUTONS (Commun) --- */
.accueil-btn {
    background-color: #fcf8ed;
    color: #781728;
    border: 2px solid #781728;
    border-radius: 50px; /* Bordure très arrondie comme sur la maquette */
    font-family: "Caladea", serif;
    font-style: italic;
    font-size: 1.8rem; /* Taille confortable */
    padding: 10px 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap; /* Empêche le texte de se couper */
}

.accueil-btn:hover {
    background-color: #781728;
    color: #fcf8ed;
    transform: translateY(-2px);
}

/* --- STYLE CONTACT (L'étoile) --- */
.div-accueil-contact {
    margin-top: 20px; /* Espace entre les boutons et l'étoile */
}

#contact-accueil-img {
    width: 180px; /* Taille ajustée */
    cursor: pointer;
    transition: transform 0.3s ease;
}

/* #contact-accueil-img:hover {
    transform: rotate(15deg) scale(1.1);
} */

/* ============================================================
   VERSION DESKTOP (PC) - Correspond à la maquette "Acceuil"
   ============================================================ */
@media screen and (min-width: 769px) {
    .div-accueil-btn {
        display: flex;
        flex-direction: row; /* Alignement HORIZONTAL */
        gap: 30px; /* Espace entre les boutons */
    }
    
    /* Ajustement fin pour l'image de fond PC si nécessaire */
    #back-accueil-img {
        object-position: center center;
    }
}

@media screen and (min-width: 1200px) {
.div-accueil-btn {
        margin-bottom: 70px;
    }
}

/* ============================================================
   VERSION MOBILE - Correspond à la maquette "Plan de travail 1"
   ============================================================ */
@media screen and (max-width: 768px) {

    .background-wrapper {
        height: auto;
    }

    .interactive-container {
        /* Sur mobile, on change la logique d'alignement */
        justify-content: flex-start; /* On part du haut */
        padding-top: 37vh; /* On pousse tout le contenu vers le bas (sous le titre Emgraphy) */
        padding-bottom: 0;
    }

    .div-accueil-btn {
        display: flex;
        flex-direction: column; /* Alignement VERTICAL (empilé) */
        width: 70%; /* Largeur des boutons par rapport à l'écran */
        gap: 20px; /* Espace vertical entre les boutons */
    }

    .accueil-btn {
        width: 100%; /* Les boutons prennent toute la largeur du conteneur */
        font-size: 1.3rem; /* Légèrement plus petit sur mobile */
        padding: 12px 0;
        text-align: center;
    }

    .div-accueil-contact {
        margin-top: 40px; /* Plus d'espace avant l'étoile sur mobile */
    }

    #contact-accueil-img {
        width: 140px; /* Étoile un peu plus petite sur mobile */
    }
}

/* Portfolio content */

#content-portfolio {
    padding: 0px 20px;
}

#content-portfolio img {
    max-width: 100%;
    height: auto;
    display: block;
}

.entete-portfolio:first-child {
    font-family: 'TAN-Tangkiwood', serif;
    font-style: normal;
    font-size: xx-large;
    color: #002800;
}


/* --- Style du Bandeau Portfolio (Existant) --- */
#bandeau-portfolio {
    width: 100%;
    margin-bottom: 40px;
}
#bandeau-portfolio ol {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 20px;
    list-style: none;
    margin: 0;
    scrollbar-width: thin;
}
#bandeau-portfolio li {
    flex: 0 0 300px; 
    cursor: pointer;
}

/* --- Typographie Générale --- */
.project-title, h2, .subsection-title {
    color: var(--text-red);
    font-weight: bold;
    font-family: 'TAN-Tangkiwood', serif;

}
.project-title { font-size: 1.5rem; margin-bottom: 0.5rem; }
.intro-text { color: var(--text-red); margin-bottom: 2rem; max-width: 800px;font-family: "Caladea", serif; }
.subsection-title { text-decoration: underline; margin-bottom: 2rem; }
.highlight { color: var(--text-red); font-weight: bold; }

/* --- Conteneur Principal --- */
.project-details {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Section Identité Visuelle --- */
.visual-identity-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 100px;
    position: relative;
}

/* Bloc de gauche (Logos) */
.col-assets {
    flex: 1.5; /* Plus large que le croquis */
    min-width: 320px;
}

.asset-paper {
    background-color: #ffffff; /* Fond blanc demandé */
    padding: 40px; /* Espace autour des logos pour l'effet "planche" */
    box-shadow: 0 4px 20px rgba(0,0,0,0.05); /* Ombre très légère */
    border-radius: 2px;
}

.asset-board {
    width: 100%;
    /* On retire le mix-blend-mode multiply pour bien voir le fond blanc */
    display: block;
}

/* Bloc de droite (Croquis) */
.col-sketch {
    flex: 1;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    /* On remonte légèrement le bloc comme sur la maquette */
    margin-top: -30px; 
    z-index: 2;
}

.sketch-wrapper {
    background-color: var(--bg-color); /* Même fond que la page pour la transparence apparente */
    position: relative;
}

.sketch-img {
    width: 100%;
    /* Ombre sous le papier du croquis */
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.15));
}

.sketch-desc {
    text-align: right;
    color: var(--text-red);
    font-family: var(--font-serif);
    margin-top: 20px;
    padding-left: 20%; /* Pousse le texte vers la droite */
}


/* --- Sections Row (Carte de visite) --- */
.showcase-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 80px;
    gap: 50px;
}

.text-content {
    flex: 1;
    max-width: 250px;
    color: var(--text-red);
    font-family: "Caladea", serif;
}
.text-content h2 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

.image-content {
    flex: 3;
}
.image-content img {
    /* Ajout d'une ombre plus profonde pour le relief du bloc de béton */
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.2));
}

/* --- Section Socials (Bannière + Post) --- */
/* On contraint la largeur de la partie droite pour forcer le scroll si besoin */
.scroll-container {
    flex: 3;
    width: 100%;
    /* On cache tout ce qui dépasse verticalement si nécessaire */
    overflow: hidden; 
}

.image-content-socials {
    display: flex;
    gap: 15px;
    align-items: center;
    overflow-x: auto;
    padding-bottom: 10px; /* Petit padding pour éviter que l'ombre soit coupée */
    
    /* On retire la barre de défilement pour tous les navigateurs */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE et Edge */
}

/* On retire la barre de défilement pour Chrome, Safari et Opera */
.image-content-socials::-webkit-scrollbar {
    display: none;
}

.fb-banner, .fb-post {
    /* On impose la même hauteur aux deux */
    height: 350px !important; 
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Pour laisser dépasser la 2ème image comme sur la maquette :
   On définit une largeur sur la première image pour que le total dépasse 100% */
.fb-banner {
    /* Sur grand écran, on veut qu'elle prenne environ 75% du conteneur */
    width: 75%; 
}

.fb-post {
    /* Le post carré prend sa largeur naturelle basée sur la hauteur de 350px */
    width: auto;
}

/* --- Footer --- */
.project-footer {
    text-align: center;
    margin-top: 80px;
    margin-bottom: 60px;
}

.summary {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--text-red);
    max-width: 800px;
    margin: 0 auto 50px auto;
}

.contact-cta {
    display: flex;
    justify-content: center;
}

.star-shape {
    width: 200px;
    transition: transform 0.3s ease;
}
/* .star-shape:hover { transform: rotate(15deg) scale(1.1); } */

/* --- Styles Spécifiques Projet WINTER --- */

.project-winter {
    --winter-red: #781728; /* Couleur bordeaux des textes de la maquette */
}

.project-winter h1, 
.project-winter .subsection-title, 
.project-winter .label-text,
.project-winter strong,
.project-winter .summary,
.project-winter p {
    color: var(--winter-red);
    
    font-family: "Caladea", serif;
}

.project-winter h2 {
    font-weight: bold;
    font-family: 'TAN-Tangkiwood', serif; 
}
.project-winter .subsection-title {
    text-decoration: underline;
    font-size: 1.1rem;
    margin-top: 20px;
    display: inline-block;
    font-weight: bold;
    font-family: 'TAN-Tangkiwood', serif; 

}

/* --- Layouts Décalés --- */

.project-winter .showcase-row {
    display: flex;
    align-items: center;
    margin-bottom: 100px;
    gap: 40px;
}

/* Style des labels sur les côtés */
.side-text {
    flex: 1;
}

.label-text {
    font-size: 1.1rem;
    line-height: 1.4;
    max-width: 200px;
}

/* 1. Bloc Web */
.winter-web .image-content { flex: 2; }
.shadow-img {
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    border-radius: 4px;
}

/* 2. Bloc Panneau (Texte à gauche, Image à droite) */
.winter-poster {
    flex-direction: row;
    justify-content: flex-end;
}
.winter-poster .image-content {
    flex: 1.5;
}
.poster-img {
    width: 100%;
    max-width: 500px;
    display: block;
    margin-left: auto; /* Aligné à droite */
}

/* 3. Bloc Instagram (Débordement intuitif) */
.winter-socials {
    display: flex;
    align-items: center;
}

.scroll-container-winter {
    flex: 2;
    overflow-x: auto;
    scrollbar-width: none; /* Cache scrollbar */
}

.scroll-container-winter::-webkit-scrollbar {
    display: none;
}

.insta-mockup {
    height: 500px; /* Grande taille pour voir les détails des téléphones */
    width: auto;
    display: block;
    /* On laisse l'image dépasser légèrement si le conteneur est petit */
    flex-shrink: 0;
}

/* --- Footer --- */
.project-winter .summary {
    font-size: 1.2rem;
    max-width: 900px;
    margin: 60px auto;
    text-align: center;
}

/* --- Responsive --- */
@media (max-width: 900px) {
    .project-winter .showcase-row {
        flex-direction: column !important; /* Tout le monde en colonne */
        text-align: center;
        gap: 20px;
    }

    .label-text {
        max-width: 100%;
        order: -1; /* Le texte repasse au dessus de l'image sur mobile */
    }

    .insta-mockup {
        height: 400px;
    }

    .poster-img {
        margin: 0 auto;
    }
}

/* --- Responsive (Mobile / Tablette) --- */
@media (max-width: 900px) {
    /* Sur mobile, on garde le scroll mais on ajuste la hauteur des images */
    .showcase-row {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .text-content {
        max-width: 100%;
        margin-bottom: 25px;
    }

    .fb-banner {
        width: 80%; /* Suggère clairement qu'il y a une suite à droite */
        height: 220px;
    }
    .fb-post {
        height: 220px;
    }
}

.project-event {
    --text-red: #781728; /* Couleur bordeaux spécifique au projet */
    font-family: "Caladea", serif;
    color: var(--text-red);
}

.project-event h1, 
.project-event .project-title-italy {
    font-family: 'TAN-Tangkiwood', serif;
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

.project-event strong {
    color: var(--text-red);
    font-weight: bold;
}

/* --- Typographie --- */
.intro-bold {
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.intro-desc {
    max-width: 850px;
    line-height: 1.5;
    margin-bottom: 3rem;
}

/* --- Mise en page Invitation --- */
.invitation-section {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 80px;
}

.invitation-wrapper {
    flex: 2;
    display: flex;
    justify-content: center;
    background-color: #ffffff; /* Cadre blanc autour de l'image comme sur la maquette */
    padding: 60px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.main-invitation {
    max-width: 450px;
    width: 100%;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.15));
}

.event-text-side {
    flex: 1;
    font-size: 1.1rem;
    line-height: 1.4;
    max-width: 300px;
}

/* --- Mise en page Menus --- */
.menus-section {
    margin-bottom: 80px;
}

.menus-container-white {
    background-color: #ffffff;
    padding: 60px;
    display: flex;
    justify-content: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.menus-img {
    width: 100%;
    max-width: 900px; /* Taille optimale pour afficher les deux menus */
}

/* --- Footer --- */
.summary-event {
    text-align: center;
    max-width: 900px;
    margin: 60px auto;
    font-size: 1.2rem;
    line-height: 1.6;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .invitation-section {
        flex-direction: column;
        text-align: center;
    }
    
    .event-text-side {
        max-width: 100%;
        order: -1; /* Texte au-dessus de l'image sur tablette/mobile */
    }

    .invitation-wrapper, .menus-container-white {
        padding: 30px;
    }
}

@media (max-width: 768px) {
    .project-event h1 {
        font-size: 1.5rem;
    }
    
    .main-invitation {
        max-width: 100%;
    }
}

/* Competences content */

.entete-comp, .bloc-comp {
    padding: 0px 20px;
}

#content-competences .entete-comp:first-child {
    font-family: 'TAN-Tangkiwood', serif;
    font-style: normal;
    font-size: xx-large;
}

.entete-comp {
    font-weight: normal;
    font-size: x-large;
    line-height: 5px;
    color: #002800;
    font-family: "Caladea", serif;
    font-style: italic;
}

/* .bloc-comp:first-of-type {
    text-align: center;
}

#comp-sac-img {
    max-width: 45%;
    position: relative;
}

.wimb-section {
    text-align: center;
    position: absolute;
    width: 50%;
    top: 200px;
}

.wimb-section:first-of-type {
    left: 0;
}

.wimb-section:last-of-type {
    left: 50%;
}

.wimb-section p {
    font-family: 'TAN-Tangkiwood', serif;
    font-style: normal;
    font-size: 1.75rem;
    font-weight: bold;
    color: #781728;
}

#comp-adobe-img {
    display: inline-block;
    width: 20%;
}

.wimb-img {
    display: inline-block;
}

#wimb-adobe .wimb-img {
    width: 6.66%;
}

#wimb-adobe .wimb-img img {
    width: 100%;
}

#wimb-gestion .wimb-img img {
    width: 10%;
}
#wimb-concept .wimb-img img {
    width: 10%;
}
#wimb-uiux .wimb-img img {
    width: 10%;
}
#wimb-narration .wimb-img img {
    width: 10%;
}
#wimb-montage .wimb-img img {
    width: 10%;
}

#scrollStep {
    min-height: 600px;
} */

/* =========================================
   SECTION "WHAT'S IN MY BAG"
   ========================================= */

/* --- STYLE COMMUN (Icones & Textes) --- */
.wimb-title {
    font-family: 'TAN-Tangkiwood', serif;
    font-size: 1.4rem;
    color: #781728; /* Rouge Bordeaux */
    margin-bottom: 5px;
    font-weight: bold;
}

.wimb-icons {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wimb-icons img {
    height: 60px; /* Taille de base des icones */
    width: auto;
    object-fit: contain;
    transition: transform 0.3s;
}
.wimb-icons img:hover { transform: scale(1.1); }

/* Spécifique Adobe : grande icone + colonne de petites */
.icon-lg { height: 80px !important; }
.sub-icons-col { display: flex; flex-direction: column; gap: 5px; }
.sub-icons-col img { height: 35px; }


/* --- COMPORTEMENT DESKTOP (POSITION ABSOLUE) --- */
@media screen and (min-width: 1024px) {
    .wimb-container {
        position: relative;
        width: 100%;
        height: 850px; /* Hauteur fixe nécessaire pour le placement absolu */
        max-width: 1400px;
        margin: 0 auto;
    }

    /* Le Sac au centre */
    .sac-wrapper {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 350px; /* Taille fixe du sac sur PC */
        z-index: 1;
    }
    #comp-sac-img { width: 100%; }

    /* Placement des groupes */
    .wimb-group {
        position: absolute;
        width: 300px; /* Largeur max des blocs texte */
        z-index: 2;
    }

    /* Alignements texte */
    .group-left { text-align: right; }
    .group-left .wimb-icons { justify-content: flex-end; }
    
    .group-right { text-align: left; }
    .group-right .wimb-icons { justify-content: flex-start; }

    /* --- COORDONNÉES PRÉCISES (Ajustables) --- */
    
    /* Côté GAUCHE */
    #grp-adobe { top: 15%; left: 15%; }
    #grp-gestion { top: 45%; left: 5%; }
    #grp-concept { bottom: 15%; left: 15%; }

    /* Côté DROITE */
    #grp-uiux { top: 15%; right: 15%; }
    #grp-narration { top: 42%; right: 5%; }
    #grp-montage { bottom: 15%; right: 15%; }
}

.bandeau-separateur {
    background-color: #002800; /* Vert foncé */
    color: #FFF;
    font-family: 'TAN-Tangkiwood', serif;
    font-size: 1.8rem;
    text-align: center;
    padding: 15px 20px;
    margin: 40px 0;
    line-height: 1.3;
}

.bloc-comp {
    font-weight: normal;
    font-size: large;
    color: #002800;
    font-family: "Caladea", serif;
    font-style: italic;
}

.bloc-comp h3 {
    text-decoration: underline;
    font-size: x-large;
    font-weight: normal;
}
.bottom-resume-container {
    display: flex;
    justify-content: space-between; /* 2 Colonnes écartées */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    gap: 60px;
    font-family: "Caladea", serif;
    color: #002800;
}

.bloc-resume {
    flex: 1;
}

.bloc-resume h3 {
    font-size: 1.8rem;
    text-decoration: underline;
    margin-bottom: 25px;
    font-weight: normal;
}

.resume-entry {
    margin-bottom: 25px;
}

.resume-header b { font-size: 1.1rem; }
.resume-date { font-style: italic; font-size: 0.95rem; }

.resume-entry ul {
    padding-left: 20px;
    margin-top: 5px;
}
.resume-entry li { margin-bottom: 5px; font-style: italic; }

@media screen and (max-width: 1023.99px) {
    .wimb-container {
        display: grid;
        /* Colonne 1 (Sac) : 35% / Colonne 2 (Compétences) : le reste */
        grid-template-columns: 35% 1fr; 
        gap: 15px;
        padding: 0 10px;
        align-items: start; /* On aligne tout en haut */
    }

    /* 1. Le Sac (Colonne Gauche) */
    .sac-wrapper {
        position: sticky; /* Le sac reste visible quand on scrolle la liste à droite ! */
        top: 20px;
        grid-column: 1; /* Force la colonne 1 */
        grid-row: 1 / 20; /* S'étend sur toute la hauteur de la grille */
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: center;
    }

    #comp-sac-img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    /* 2. Les Groupes (Colonne Droite) */
    .wimb-group {
        position: relative; /* On annule l'absolu du desktop */
        grid-column: 2; /* Force la colonne 2 */
        text-align: left; /* Texte aligné à gauche */
        margin-bottom: 25px; /* Espace entre les compétences */
        width: 100%;
    }

    .wimb-title {
        font-size: 1.1rem; /* Titre un peu plus petit sur mobile */
    }

    .wimb-icons {
        justify-content: flex-start !important; /* Force les icones à gauche */
        flex-wrap: wrap; /* Si trop d'icones, ça passe à la ligne */
    }

    .wimb-icons img {
        height: 45px; /* Icones adaptées mobile */
    }
    .icon-lg { height: 60px !important; } /* Adobe un peu plus grand */


    /* LES GROUPES : Liste verticale */
    .wimb-group {
        position: relative; /* Plus d'absolu */
        width: 100%;
        max-width: 350px;
        top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
        text-align: center; /* Tout centré */
    }

    /* On force les icones à se centrer */
    .wimb-icons { justify-content: center !important; }
/* BANDEAU */
    .bandeau-separateur {
        font-size: 1.3rem;
        padding: 20px;
        margin: 30px 0;
    }

    /* SECTION BASSE : Colonne */
    .bottom-resume-container {
        flex-direction: column;
        padding: 0 20px;
        gap: 40px;
    }
}

/* A propos content */

/* --- Mise en page globale --- */
#content-apropos {
    padding: 0px 20px;
    margin: 0 auto;
    overflow-y: hidden;
}

.header-apropos {
    margin-bottom: 60px;
}

.title-tan {
    font-family: 'TAN-Tangkiwood', serif;
    font-size: 2rem;
    color: #002800; 
    margin: .5em 0;
}

.subtitle-caladea {
    font-family: "Caladea", serif;
    font-style: italic;
    font-size: 1.5rem;
    color: #002800; /* Ton vert foncé */
    margin-top: 5px;
}

/* --- Layout Desktop --- */
.apropos-layout {
    display: flex;
    gap: 100px;
    align-items: flex-start;
}

#img-apropos-container {
    flex: 1;
    display: flex;
    justify-content: center; /* Centre les images dans leur colonne */
}

#text-apropos {
    flex: 1.2;
    font-family: "Caladea", serif;
    font-size: 1.25rem;
    line-height: 1.6;
    color: #002800;
}

#text-apropos p { margin-bottom: 20px; }
#text-apropos strong { font-weight: bold; }

.contact-apropos-text {
    font-family: 'TAN-Tangkiwood', serif !important;
    font-size: 2rem !important;
    color: #002800 !important;
    margin-top: 50px !important;
    font-style: normal !important;
}

/* --- Système de photos flottantes --- */
.photo-stack {
    position: relative;
    width: 100%;
    /* CORRECTION : On impose une largeur max pour que l'image ne devienne pas géante */
    max-width: 500px; 
    /* CORRECTION : Hauteur explicite nécessaire car les enfants sont en absolute */
    height: 650px; 
}

.img-floating {
    position: absolute;
    filter: drop-shadow(5px 10px 15px rgba(0,0,0,0.15));
    transition: transform 0.3s ease;
}

/* CORRECTION : On utilise des largeurs en px ou % modérés */
#apropos-fond-img { 
    width: 40%; /* Prend la largeur de .photo-stack (donc max 500px) */
    top: -20px; 
    left: 30%; 
    transform: rotate(5deg); 
    z-index: 1; 
}

/* Ajustement des positions relatives à la boite de 500px */
#apropos-livre-img  { width: 40%; top: 50px; left: 7%; z-index: 2; }
#apropos-shiba-img  { width: 35%; top: -10px; right: 2%; z-index: 3; }
#apropos-drm-img    { width: 35%; top: 35%; left: 5%; z-index: 4; }
#apropos-matcha-img { width: 40%; top: 40%; right: 5%; z-index: 3; }
#apropos-avion-img  { width: 40%; bottom: 50px; left: 0%; z-index: 5; }

/* --- Animations --- */
.shake-low { animation: floatingLow 4s ease-in-out infinite; }
.shake-high { animation: floatingHigh 5s ease-in-out infinite; }

@keyframes floatingLow {
    0%, 100% { transform: translate(0, 0) rotate(-5deg); }
    50% { transform: translate(3px, 5px) rotate(-3deg); }
}

@keyframes floatingHigh {
    0%, 100% { transform: translate(0, 0) rotate(5deg); }
    50% { transform: translate(-5px, -8px) rotate(8deg); }
}

@media (max-width: 1200px) {
    #apropos-fond-img { 
        width: 50%;
    }
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 900px) {
    .apropos-layout {
        flex-direction: column;
        align-items: center; /* Centre le tout */
        gap: 20px;
    }

    #img-apropos-container {
        width: 100%;
        order: -1; /* L'image passe au-dessus */
        margin-bottom: 20px;
    }

    .photo-stack {
        /* CORRECTION : Hauteur réduite pour le mobile mais FIXE pour éviter le "vide" */
        height: 525px; 
        max-width: 350px; /* On réduit la largeur max pour mobile */
    }

    .title-tan { font-size: 2.2rem; text-align: center; }
    .subtitle-caladea { font-size: 1.2rem; text-align: center; }

    #text-apropos {
        text-align: center;
        padding: 0 10px;
    }

    /* Réajustement des positions pour que tout rentre dans les 450px de hauteur */
    #apropos-fond-img { 
        left: 30%; 
    }
    
    #apropos-shiba-img { width: 30%; top: -10px; right: 0; }
    #apropos-livre-img { width: 35%; top: 40px; left: 40px; }
    #apropos-matcha-img { width: 45%; top: 220px; right: -10px; }
    #apropos-drm-img { width: 30%; top: 200px; left: 25px; }
    #apropos-avion-img { width: 35%; bottom: 0px; left: 10px; }
}

/* Contact content */

#content-contact {
    padding: 0px 20px;
}

#content-contact p {
    color: #002800;
    font-family: "Caladea", serif;
    font-style: italic;
}

#content-contact .entete-contact:first-child {
    font-family: 'TAN-Tangkiwood', serif;
    font-style: normal;
    font-size: xx-large;
}

.entete-contact {
    font-weight: normal;
    font-size: x-large;
    line-height: 5px;
}

#contact-fleche-img {
    transform: rotate(45deg);
    width: 15vw;
    position: relative;
    left: 5vw;
}

.bloc-contact span {
    display: inline-block;
    margin: 2vw 5vw;
}

.bloc-contact span a, 
.bloc-contact span img {
  display: inline-block;
  vertical-align: middle;
  margin: 0px 10px;
}

.bloc-contact .img-contact {
    width: 5vw;
}

.bloc-contact span a {
    text-decoration: underline;
    color: #002800;
    font-family:  'TAN-Tangkiwood', serif;
    font-style: normal;
    font-size: xx-large;
}

.bloc-contact:first-of-type {
    margin-top: 50px;
}
.bloc-contact:last-child {
    text-align: center;
}

.bloc-contact p {
    font-weight: normal;
    font-size: x-large;
}

.sousbloc-contact {
    position: relative;
    width: 70vw;
    text-align: center;
    margin: 0px 10px !important;
}

.sousbloc-contact a {
    position: relative;
    top: -5vh;
    margin-inline: auto !important; 
}

.sousbloc-contact .img-contact {
    width: auto;
    max-width: 100%;
}

#contact-mail {
    z-index: 2;
}

/* Version Mobile - CONTACT */
@media (max-width: 768px) {
    #contact-fleche-img {
        display: none;
    }
    .sousbloc-contact {
        width: 100%;
        margin: auto !important;
    }
    .entete-contact {
        line-height: normal;
        margin: 15px 0px;
    }
}

/* 
.step {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.step.visible {
  opacity: 1;
  transform: translateY(0);
} */


.site-footer {
    color: #781728; /* Ton rouge bordeaux */
    padding: 30px 20px;
    border-top: 1px solid #781728;
    font-family: "Caladea", serif;
    text-align: center;
    padding: 10px;
    background: transparent;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 15px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links a {
    font-size: 0.7rem;
    color: #781728;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-links a:hover {
    text-decoration: underline;
    opacity: 0.8;
}

/* Version Mobile */
@media (max-width: 600px) {
    .footer-links {
        flex-direction: column;
        gap: 10px;
    }
}


.btn-contact {
    cursor : pointer;
}