/* =============================================================
   style.css — feuille de styles personnalisée
   Charte typographique : Nunito (corps) + Archivo Black (titres).
   La direction artistique brutaliste sera ajoutée à l'étape 12.
   ============================================================= */

:root {
    --color-bg: #ffffff;
    --color-text: #1a1a1a;
    --color-accent: #000000;
}

body {
    font-family: 'Nunito', system-ui, sans-serif;
    color: var(--color-text);
    background: var(--color-bg);
}

h1, h2, h3, .display-1, .display-2, .display-3 {
    font-family: 'Archivo Black', sans-serif;
    letter-spacing: -0.02em;
}

/* ---- Liens de navigation TOUS en majuscules ---- */
.navbar-brand,
.navbar-nav .nav-link,
.nav-right {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ---- Lien de navigation actif : passe en gras pour indiquer la page courante ---- */
.navbar-nav .nav-link.active {
    font-weight: 800;
}

/* ---- Transition de page rideau-scanlines ----
   Overlay plein écran avec motif de lignes noires horizontales (effet TV
   en référence à la vidéo de fond). Animé au clic sur une .project-card :
     1. État initial : translaté entièrement hors écran à DROITE
     2. .is-covering → glisse vers le centre (couvre l'écran)
     3. Navigation vers la page projet (rechargement complet)
     4. Sur la nouvelle page : .is-leaving → glisse vers la gauche (révèle) */
.page-transition {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    transform: translateX(100%);
    /* Motif scanlines : bandes noires de 4px alternées avec 3px transparent */
    background:
        repeating-linear-gradient(
            to bottom,
            #0a0a0a 0px,
            #0a0a0a 4px,
            transparent 4px,
            transparent 7px
        );
    will-change: transform;
}

/* backdrop-filter activé UNIQUEMENT pendant l'animation pour éviter qu'il
   tourne en permanence et empêche l'autoplay de la vidéo de fond (bug
   connu Safari : backdrop-filter sur overlay fixed désactive l'autoplay
   des <video> proches dans le compositing layer). */
.page-transition.is-covering,
.page-transition.is-instant-cover,
.page-transition.is-leaving {
    backdrop-filter: blur(10px) saturate(1.15);
    -webkit-backdrop-filter: blur(10px) saturate(1.15);
}

/* État instantané "couvert" (utilisé pour positionner l'overlay au centre
   au chargement de la nouvelle page, sans animation) */
.page-transition.is-instant-cover {
    transform: translateX(0);
    transition: none;
}

.page-transition.is-covering {
    transform: translateX(0);
    transition: transform 0.35s cubic-bezier(0.6, 0, 0.4, 1);
}

.page-transition.is-leaving {
    transform: translateX(-100%);
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.4, 1);
}

/* Pas de transition pour les utilisateurs "reduce motion" */
@media (prefers-reduced-motion: reduce) {
    .page-transition.is-covering,
    .page-transition.is-leaving {
        transition: none;
    }
}

/* ---- Animation d'apparition au scroll ----
   État initial : invisible et translaté de 30px vers le haut.
   État final (classe .is-visible ajoutée en JS via IntersectionObserver) :
   visible et translaté à sa position normale → l'élément "descend" en place. */
.scroll-reveal {
    opacity: 0;
    transform: translateY(-30px);
    transition: opacity 0.9s ease-out, transform 0.9s ease-out;
    will-change: opacity, transform;
}

.scroll-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Pas d'animation sur :
   - les appareils tactiles (mobile / tablette) → (hover: none)
   - les utilisateurs qui ont activé "réduire les animations" dans leur OS
   → tout apparaît directement sans transition. */
@media (hover: none), (prefers-reduced-motion: reduce) {
    .scroll-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.nav-right {
    color: inherit;
    text-decoration: none;
}

/* ---- Navbar en 3 colonnes : gauche / centre / droite ----
   Grid avec colonnes 1fr / auto / 1fr → la colonne centrale auto-size
   et reste visuellement centrée même si gauche et droite ont des largeurs
   différentes. */
.nav-grid {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

.nav-left   { justify-self: start;  }
.nav-center { justify-self: center; }
.nav-right  { justify-self: end;    }

/* ---- Titre de section "à la Nunito" (Nunito gras + majuscules, taille mesurée) ---- */
.section-title {
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 1rem;
    margin-bottom: 1rem;
    color: #1a1a1a;
}

/* ---- Hero accueil : aligné en largeur sur .about-wrap, occupe presque tout le viewport
       pour créer l'écart "scroll to discover" ---- */
.hero {
    min-height: 85vh;          /* prend ~85% de la hauteur de l'écran */
    display: flex;
    align-items: flex-start;
    padding-top: clamp(2rem, 12vh, 6rem);
    padding-bottom: 2rem;
}

.hero h1 {
    margin: 0;
    line-height: 1.02;
}

/* ---- Icônes logiciels "COMPÉTENCES PRINCIPALES" sur l'accueil ---- */
.skill-icon {
    width: 56px;
    height: 56px;
    object-fit: contain;
    display: inline-block;
}

/* ---- Conteneur principal des sections "À propos" : aligné à gauche, ne dépasse pas le milieu ---- */
.about-wrap {
    max-width: 720px;
    /* margin-left: 0 par défaut → reste collé à gauche du container Bootstrap */
}

/* ---- Vidéo de fond fixe (page Accueil) ----
   La vidéo reste collée au viewport, l'utilisateur scrolle "par-dessus".
   `:has()` cible le body uniquement quand la vidéo est présente sur la page,
   pour ne pas casser les autres pages qui ont un fond blanc opaque. */
.hero-bg-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: -1;
    pointer-events: none;
}

body:has(.hero-bg-video),
html:has(.hero-bg-video) {
    background: transparent;
}

/* ---- Page accueil : texte en blanc fixe + ombres TRÈS prononcées pour la lisibilité ----
   Stack de 4 ombres : 2 contours serrés (très opaques) + 1 ombre moyenne + 1 halo large.
   Les contours proches font le vrai boulot de lisibilité — surtout sur les petits textes. */
body:has(.hero-bg-video) h1,
body:has(.hero-bg-video) h2,
body:has(.hero-bg-video) h3,
body:has(.hero-bg-video) .section-title,
body:has(.hero-bg-video) p,
body:has(.hero-bg-video) .about-caption,
body:has(.hero-bg-video) footer span,
body:has(.hero-bg-video) footer a {
    color: #ffffff;
    /* 11 couches d'ombre, gradient d'opacité :
       - les 6 premières (blur 0–8px) sont COLLÉES au texte, TRÈS opaques (0.85–1) →
         créent un noyau noir épais autour de chaque lettre
       - les 5 suivantes (blur 10–48px) sont des halos lointains plus doux (0.25–0.7) →
         étendent l'ombre vers l'extérieur sans paraître agressives */
    text-shadow:
        0 0  1px   rgba(0, 0, 0, 1),
        0 0  2px   rgba(0, 0, 0, 1),
        0 0  3px   rgba(0, 0, 0, 0.95),
        0 0  5px   rgba(0, 0, 0, 0.9),
        0 0  7px   rgba(0, 0, 0, 0.85),
        0 1px 3px  rgba(0, 0, 0, 0.95),
        0 2px 5px  rgba(0, 0, 0, 0.7),
        0 4px 10px rgba(0, 0, 0, 0.55),
        0 6px 16px rgba(0, 0, 0, 0.45),
        0 10px 28px rgba(0, 0, 0, 0.35),
        0 16px 48px rgba(0, 0, 0, 0.25);
}

/* ---- Paragraphes en semi-gras (600) sur la page à propos ----
   Compromis entre la lisibilité sur fond vidéo et un poids visuel plus doux que 700. */
body:has(.hero-bg-video) .about-wrap p {
    font-weight: 600;
}

/* ---- Bouton "Téléchargez mon CV" : ombre portée empilée pour le détacher du fond vidéo ---- */
body:has(.hero-bg-video) .btn-dark {
    box-shadow:
        0 1px 2px  rgba(0, 0, 0, 0.4),
        0 2px 6px  rgba(0, 0, 0, 0.35),
        0 4px 12px rgba(0, 0, 0, 0.3),
        0 8px 24px rgba(0, 0, 0, 0.25),
        0 14px 40px rgba(0, 0, 0, 0.2);
}
body:has(.hero-bg-video) .btn-dark:hover {
    box-shadow:
        0 2px 4px  rgba(0, 0, 0, 0.45),
        0 4px 10px rgba(0, 0, 0, 0.4),
        0 8px 20px rgba(0, 0, 0, 0.35),
        0 14px 36px rgba(0, 0, 0, 0.3),
        0 20px 60px rgba(0, 0, 0, 0.22);
}

/* ---- Icônes logiciels (compétences principales) : blanches + ombre portée ----
   Filtre chainé : brightness(0) invert(1) → blanc, puis drop-shadow pour
   l'ombre portée (l'équivalent de text-shadow pour les images). */
body:has(.hero-bg-video) .skill-icon {
    filter:
        brightness(0)
        invert(1)
        drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7))
        drop-shadow(0 4px 14px rgba(0, 0, 0, 0.45));
}

/* ---- Icône LinkedIn : blanche + petite ombre portée ---- */
body:has(.hero-bg-video) .footer-icon {
    filter:
        brightness(0)
        invert(1)
        drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
}

/* ---- Header (navbar) : seul élément qui garde l'adaptation difference ----
   Appliqué sur le conteneur pour que le blend traverse jusqu'à la vidéo. */
body:has(.hero-bg-video) > nav.navbar {
    mix-blend-mode: difference;
    isolation: auto;
}

body:has(.hero-bg-video) .navbar-brand,
body:has(.hero-bg-video) .navbar-nav .nav-link,
body:has(.hero-bg-video) .nav-right {
    color: #ffffff;
    /* Légère ombre portée pour donner du poids au texte et accentuer la
       différenciation chromatique par rapport à la vidéo derrière.
       Effet subtil — 3 couches superposées pour un halo doux. */
    text-shadow:
        0 0 2px   rgba(0, 0, 0, 0.55),
        0 2px 4px rgba(0, 0, 0, 0.4),
        0 4px 10px rgba(0, 0, 0, 0.3);
}

/* ---- Icône LinkedIn dans le footer ---- */
.footer-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    vertical-align: middle;
    transition: opacity 0.15s;
}
.footer-icon:hover { opacity: 0.6; }

/* ---- Compensation visuelle pour After Effects ----
   Le PNG fourni a plus de padding interne que les autres, donc à taille
   d'affichage égale, l'icône AE paraît plus petite. On la zoome plus fortement
   pour qu'elle s'aligne visuellement avec Ps, Pr, Affinity, etc. */
/* AE au même format que les autres : 56x56 sur l'accueil, taille standard sur les pages projet */
.skill-icon[src$="/ae.png"] {
    width: 56px;
    height: 56px;
}

/* ---- Bloc photo + caption "À propos" : photo plein wrap, caption en dessous à droite ---- */
.about-photo-block {
    margin: 2rem 0 0;
    padding: 0;
}

.about-photo {
    width: 100%;
    height: auto;
    display: block;
}

.about-caption {
    margin: 0.5rem 0 0;
    text-align: right;
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    line-height: 1.45;
}
.about-caption strong { font-weight: 700; }

/* Sur mobile : le wrap occupe 100% */
@media (max-width: 767.98px) {
    .about-wrap { max-width: 100%; }
    .hero { min-height: 70vh; }
}

/* ---- Cartes projets (page Projets) ---- */
.project-card {
    display: block;
    transition: transform 0.18s ease;
}

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

.project-thumb {
    aspect-ratio: 1 / 1;
    background-color: #ececec;
    background-size: cover;
    background-position: center;
    width: 100%;
    border: 1px solid #1a1a1a;
    /* Pour le rendu en <img> (lazy-loading) : équivalents background-* sur img */
    object-fit: cover;
    object-position: center;
    display: block;
}

.project-thumb--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1a1a;
    font-family: 'Archivo Black', sans-serif;
    text-align: center;
    padding: 1rem;
}

/* ---- Icônes logiciels (page projet) ---- */
.software-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.software-icon--lg {
    width: 48px;
    height: 48px;
}

/* ---- Sélecteur de logiciels (formulaire admin) ---- */
.software-picker .software-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    min-width: 80px;
}

.software-picker .software-option:hover {
    border-color: #999;
}

.software-picker .software-option.is-selected {
    border-color: #1a1a1a;
    background: #f5f5f5;
}

.software-picker .software-option .software-icon {
    width: 36px;
    height: 36px;
}

/* ---- Filtres (page Projets) ---- */
.filters {
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 1rem;
}

.filter-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.filter-label {
    min-width: 110px;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    border: 1px solid #1a1a1a;
    border-radius: 999px;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
    user-select: none;
}

.filter-chip:hover {
    background: #f0f0f0;
}

/* Quand l'input radio/checkbox associé est coché → chip "active" */
input:checked + .filter-chip {
    background: #1a1a1a;
    color: #fff;
}

/* =============================================================
   RESPONSIVE — adaptations mobile & tablette
   Breakpoints alignés sur Bootstrap 5 : sm 576px, md 768px, lg 992px.
   ============================================================= */

/* --- Anti-débordement horizontal (sur tous les écrans) --- */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* --- Tablette et mobile (< 768px) --- */
@media (max-width: 767.98px) {

    /* 1. VIDÉO DE FOND — cachée sur mobile
       Raisons : iOS Safari refuse souvent l'autoplay sur mobile et affiche
       un bouton play impossible à enlever. Cacher la vidéo évite ce souci ET
       économise 11 Mo de data mobile à chaque visite. On garde un fond sombre
       pour préserver la DA. */
    .hero-bg-video {
        display: none !important;
    }
    body:has(.hero-bg-video) {
        background: #0a0a0a;
    }
    /* Le body est dark, on remet les couleurs de texte adaptées */
    body:has(.hero-bg-video) main {
        color: #ffffff;
    }

    /* 2. CONTENU CENTRÉ — .about-wrap prend tout l'espace dispo, centré */
    .about-wrap {
        max-width: 100%;
        margin: 0 auto;
        padding: 0 1rem;
    }

    /* 3. HERO TEXT — taille adaptative + démarre plus haut */
    .hero {
        min-height: 50vh;
        padding-top: 2rem;
        padding-bottom: 2rem;
        align-items: flex-start;
    }
    .hero h1.display-3,
    .display-3 {
        font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
        line-height: 1.05;
    }
    .display-5 { font-size: 1.6rem; }
    h1.h2     { font-size: 1.5rem; }

    /* 4. NAVBAR — restructure en 2 lignes : brand en haut, liens en bas */
    .nav-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.4rem;
        padding: 0 0.5rem;
    }
    .nav-left, .nav-center, .nav-right {
        justify-self: center !important;
    }
    .navbar { padding-top: 0.5rem; padding-bottom: 0.5rem; }
    .navbar-brand {
        font-size: 0.78rem;
        text-align: center;
    }
    .navbar-nav {
        flex-wrap: wrap;
        justify-content: center !important;
        gap: 0.5rem !important;
    }
    .navbar-nav .nav-link,
    .nav-right {
        font-size: 0.7rem !important;
        padding: 0.1rem 0.3rem !important;
        white-space: nowrap;
    }
    .nav-right { margin-left: 0 !important; }

    /* 5. FOOTER — centré, sur 2 lignes */
    footer .container {
        flex-direction: column;
        gap: 0.4rem;
        align-items: center !important;
        text-align: center;
        font-size: 0.7rem;
    }

    /* 6. PHOTO + BLOC COMPÉTENCES — centrés */
    .about-photo { max-width: 100%; }
    .about-caption { text-align: center; }
    .about-wrap .d-flex.gap-3 {
        justify-content: center !important;
    }

    /* 7. FILTRES (page Projets) — label sur sa ligne */
    .filter-label {
        min-width: 100%;
        margin-bottom: 0.35rem;
    }
    .filter-group { margin-bottom: 1rem; }

    /* 8. SÉLECTEUR LOGICIELS (formulaire admin) — 2 par ligne */
    .software-picker { gap: 0.5rem !important; }
    .software-picker .software-option {
        min-width: calc(50% - 0.25rem);
        flex-direction: row;
        justify-content: flex-start;
        gap: 0.5rem;
    }

    /* 9. DASHBOARD ADMIN — plus compact */
    .table-responsive .table { font-size: 0.85rem; }
    .table-responsive .btn-sm {
        padding: 0.2rem 0.45rem;
        font-size: 0.75rem;
    }

    /* 10. PAGE PROJET — gouttière réduite */
    article .row.g-5,
    .project-detail .row.g-5 {
        --bs-gutter-y: 1.5rem;
    }
    .project-detail {
        padding: 1rem;
    }

    /* 11. CONTAINERS — padding réduit */
    .container { padding-left: 0.75rem; padding-right: 0.75rem; }
    main.container { padding-top: 1rem !important; }

    /* 12. CHIPS DE FILTRE — plus compacts */
    .filter-chip {
        font-size: 0.72rem;
        padding: 0.3rem 0.7rem;
    }
}

/* --- Smartphone étroit (< 576px) — réglages additionnels --- */
@media (max-width: 575.98px) {

    /* Hero encore plus contenu sur iPhone SE (375px) */
    .display-3 { font-size: 1.75rem !important; }

    /* Navbar encore plus petite */
    .navbar-brand { font-size: 0.7rem; }
    .navbar-nav .nav-link,
    .nav-right { font-size: 0.65rem !important; }

    /* Icônes logiciels (page projet détail) */
    .software-icon--lg { width: 36px; height: 36px; }

    /* Skill icons (page accueil) un peu plus petites */
    .skill-icon {
        width: 42px;
        height: 42px;
    }
    .skill-icon[src$="/ae.png"] {
        width: 42px;
        height: 42px;
    }
}