/* =========================================
   VARIABLES
   ========================================= */
:root {
    --encre:                #07070f;
    --surface:              #0c0c1a;
    --surface-2:            #11112a;
    --bordure:              rgba(255, 255, 255, 0.06);
    --bordure-lueur:        rgba(111, 76, 255, 0.5);
    --texte-principal:      #eeeeff;
    --texte-secondaire:     #7a7a9a;
    --texte-discret:        #44445a;
    --violet:               #6f4cff;
    --violet-clair:         #a78bfa;
    --violet-lueur:         rgba(111, 76, 255, 0.15);
    --cyan:                 #00e5ff;
    --cyan-lueur:           rgba(0, 229, 255, 0.12);
    --ambre:                #f59e0b;
    --rose:                 #ff4d8d;
    --transition-douce:     cubic-bezier(0.22, 1, 0.36, 1);
    --transition-ressort:   cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --z-modale:             9999;
}

/* =========================================
   RESET & WRAPPER
   ========================================= */
.portfolio-wrapper *,
.portfolio-wrapper *::before,
.portfolio-wrapper *::after {
    box-sizing: border-box;
}

.portfolio-wrapper {
    font-family: 'DM Sans', sans-serif;
    color:       var(--texte-principal);
    background:  var(--encre);
    min-height:  100vh;
    /* CORRECTION: pas d'overflow-x ici, c'est au html/body */
    position:    relative;
}

/* CORRECTION: texture de grain sans débordement */
.portfolio-wrapper::before {
    content:        '';
    position:       fixed;
    inset:          0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
    opacity:        0.018;
    pointer-events: none;
    z-index:        9999;
}

/* =========================================
   HERO — MOBILE FIRST
   ========================================= */

.p-hero {
    position:   relative;
    padding:    80px 16px 50px;  /* CORRECTION: padding horizontal sur mobile */
    overflow:   hidden;
}

@media (min-width: 768px) {
    .p-hero { padding: 120px 24px 80px; }
}

@media (min-width: 1200px) {
    .p-hero { padding: 120px 0 80px; }
}

.p-hero__bg {
    position:       absolute;
    inset:          0;
    pointer-events: none;
}

.p-hero__orb { position: absolute; border-radius: 50%; }

.p-hero__orb--1 {
    width:      min(600px, 90vw);  /* CORRECTION: 90vw au lieu de 100vw */
    height:     min(600px, 90vw);
    background: radial-gradient(circle, rgba(111, 76, 255, 0.25) 0%, transparent 65%);
    top:        -150px;
    left:       -150px;
    filter:     blur(60px);
    animation:  orbe-flotte 12s ease-in-out infinite;
}

.p-hero__orb--2 {
    width:      min(400px, 80vw);  /* CORRECTION: plus petit sur mobile */
    height:     min(400px, 80vw);
    background: radial-gradient(circle, rgba(0, 229, 255, 0.15) 0%, transparent 65%);
    top:        -60px;
    right:      -80px;
    filter:     blur(80px);
    animation:  orbe-flotte 16s ease-in-out infinite reverse;
}

.p-hero__grid {
    position:         absolute;
    inset:            0;
    background-image:
        linear-gradient(rgba(111, 76, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(111, 76, 255, 0.04) 1px, transparent 1px);
    background-size:  50px 50px;
    mask-image:       linear-gradient(to bottom, transparent, rgba(0,0,0,0.6) 20%, rgba(0,0,0,0.6) 80%, transparent);
}

@keyframes orbe-flotte {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(30px, -20px) scale(1.05); }
    66%      { transform: translate(-15px, 15px) scale(0.97); }
}

.p-hero__inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; }

.p-hero__eyebrow {
    display:        inline-flex;
    align-items:    center;
    gap:            8px;
    font-size:      0.7rem;
    font-weight:    500;
    color:          var(--texte-secondaire);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom:  20px;
    padding:        6px 14px 6px 8px;
    background:     rgba(111, 76, 255, 0.08);
    border:         1px solid rgba(111, 76, 255, 0.2);
    border-radius:  50px;
    max-width:      100%;
    flex-wrap:      wrap;  /* CORRECTION: permet le retour à la ligne si nécessaire */
}

.eyebrow-dot {
    width:         6px;
    height:        6px;
    border-radius: 50%;
    background:    var(--violet-clair);
    box-shadow:    0 0 10px var(--violet-clair);
    animation:     point-pulse 2.5s ease-in-out infinite;
    flex-shrink:   0;
}

.eyebrow-sep { opacity: 0.3; flex-shrink: 0; }

@keyframes point-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 10px var(--violet-clair); }
    50%      { opacity: 0.3; box-shadow: 0 0 3px var(--violet-clair); }
}

/* CORRECTION: titre plus lisible sur mobile */
.p-hero__title {
    font-family:    'Syne', sans-serif;
    font-size:      clamp(1.8rem, 8.5vw, 7.5rem);  /* CORRECTION: 1.8rem min au lieu de 1rem */
    font-weight:    800;
    line-height:    0.95;
    letter-spacing: -0.04em;
    margin:         0 0 20px;
    display:        flex;
    flex-direction: column;
    gap:            6px;
}

@media (min-width: 768px) {
    .p-hero__title {
        font-size:   clamp(2.5rem, 8vw, 7.5rem);
        line-height: 0.9;
        gap:         8px;
        margin-bottom: 24px;
    }
}

.title-line {
    display:   block;
    color:     var(--texte-principal);
    animation: titre-entre 0.8s var(--transition-douce) both;
}

.title-line--accent {
    background:              linear-gradient(135deg, var(--violet-clair) 0%, var(--cyan) 60%, var(--rose) 100%);
    -webkit-background-clip: text;
    background-clip:         text;
    -webkit-text-fill-color: transparent;
    animation-delay:         0.1s;
    background-size:         200%;
    animation:               titre-entre 0.8s var(--transition-douce) 0.1s both,
                             shimmer 4s linear 1.5s infinite;
}

@keyframes titre-entre {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

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

.p-hero__subtitle {
    font-size:   0.95rem;
    color:       var(--texte-secondaire);
    line-height: 1.7;
    margin:      0 0 32px;
    font-weight: 300;
    max-width:   600px;
    animation:   titre-entre 0.8s var(--transition-douce) 0.25s both;
}

@media (min-width: 768px) {
    .p-hero__subtitle { font-size: 1.05rem; line-height: 1.8; margin-bottom: 52px; }
}

/* Stats hero — MOBILE FIRST */
.p-hero__stats {
    display:     flex;
    align-items: center;
    gap:         16px;
    flex-wrap:   wrap;
    animation:   titre-entre 0.8s var(--transition-douce) 0.4s both;
}

@media (min-width: 768px) {
    .p-hero__stats { gap: 32px; }
}

.p-stat { display: flex; flex-direction: column; gap: 4px; }

.p-stat__num {
    font-family:    'Syne', sans-serif;
    font-size:      clamp(1.6rem, 5vw, 2.4rem);
    font-weight:    800;
    color:          var(--violet-clair);
    line-height:    1;
    letter-spacing: -0.04em;
}

.p-stat__lbl {
    font-size:      0.65rem;
    color:          var(--texte-discret);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight:    500;
}

.p-stat__sep {
    width:       1px;
    height:      32px;
    background:  linear-gradient(to bottom, transparent, var(--bordure), transparent);
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .p-stat__sep { height: 44px; }
}

/* =========================================
   FILTRES — MOBILE FIRST (CORRIGÉ)
   ========================================= */

.p-filtres-wrap {
    position:        sticky;
    top:             0;
    z-index:         100;
    padding:         10px 0;
    background:      rgba(7, 7, 15, 0.9);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom:   1px solid var(--bordure);
    margin-bottom:   30px;
    /* CORRECTION: scroll horizontal fluide */
    overflow-x:      auto;
    overflow-y:      hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;  /* CORRECTION: scroll fluide iOS */
    /* CORRECTION: masque le scroll sur Webkit */
    -ms-overflow-style: none;
}

.p-filtres-wrap::-webkit-scrollbar { display: none; }

@media (min-width: 768px) {
    .p-filtres-wrap {
        padding:       14px 0;
        margin-bottom: 60px;
        overflow-x:    visible;
        
    }
}

.p-filtres {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
    
}

@media (min-width: 768px) {
    .p-filtres { 
        display:         flex;  /* ← manquait, le grid mobile restait actif */
        flex-wrap:       wrap; 
        gap:             10px; 
        padding:         0;
        justify-content: center;
    }
}

.p-filtre {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    padding:         8px 14px;
    border-radius:   10px;
    border:          1px solid var(--bordure);
    background:      rgba(255,255,255,0.03);
    color:           var(--texte-secondaire);
    font-family:     'DM Sans', sans-serif;
    font-size:       0.8rem;
    font-weight:     500;
    cursor:          pointer;
    transition:      all 0.25s var(--transition-douce);
    white-space:     normal;    /* mobile : autorise le retour à la ligne */
    word-break:      break-word;
    text-align:      center;
    line-height:     1.3;
    position:        relative;
    overflow:        hidden;
    min-height:      44px;
    flex-shrink:     0;
}

@media (min-width: 768px) {
    .p-filtre {
        padding:     10px 18px;
        font-size:   0.85rem;
        min-height:  40px;
        white-space: nowrap;
        word-break:  normal;
        text-align:  left;
        width:       auto;     
        align-self:  flex-start;
    }
}

.p-filtre::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(135deg, var(--violet-lueur), transparent);
    opacity:    0;
    transition: opacity 0.3s ease;
}

.p-filtre:hover {
    border-color: var(--bordure-lueur);
    color:        var(--texte-principal);
}

.p-filtre:hover::after { opacity: 1; }

.p-filtre > * { position: relative; z-index: 1; }

.p-filtre.actif {
    background:   var(--violet);
    border-color: var(--violet);
    color:       #fff;
    box-shadow:  0 4px 24px rgba(111, 76, 255, 0.5),
                 0 0 0 1px rgba(255,255,255,0.1) inset;
}

.p-filtre.actif::after { display: none; }
.p-filtre__icon { font-size: 0.9rem; line-height: 1; }

/* =========================================
   GRILLE — MOBILE FIRST
   ========================================= */
.p-grille {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   16px;
    padding:               0 16px;  /* CORRECTION: padding mobile */
}

@media (min-width: 640px) {
    .p-grille { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 20px; 
        padding: 0 24px;
    }
}

@media (min-width: 1100px) {
    .p-grille { 
        grid-template-columns: repeat(3, 1fr); 
        padding: 0;
    }
}

.p-item {
    opacity:    0;
    transform:  translateY(30px) scale(0.98);
    transition: opacity 0.65s var(--transition-douce),
                transform 0.65s var(--transition-douce);
}

.p-item.visible { opacity: 1; transform: translateY(0) scale(1); }
.p-item.masque  { display: none; }

/* =========================================
   CARTES — BASE
   ========================================= */

.p-carte {
    display:         flex;
    flex-direction:  column;
    border-radius:   16px;       /* CORRECTION: 16px sur mobile */
    overflow:        hidden;
    background:      var(--surface);
    border:          1px solid var(--bordure);
    cursor:          pointer;
    text-decoration: none;
    color:           inherit;
    transition:      border-color 0.4s var(--transition-douce),
                     box-shadow   0.4s var(--transition-douce),
                     transform    0.4s var(--transition-ressort);
    height:          100%;
    position:        relative;
    outline:         none;
}

@media (min-width: 768px) {
    .p-carte { border-radius: 20px; }
}

.p-carte::before {
    content:    '';
    position:   absolute;
    top:        0;
    left:       0;
    right:      0;
    height:     1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%);
    opacity:    0;
    transition: opacity 0.4s ease;
    z-index:    1;
}

.p-carte:hover {
    border-color: var(--bordure-lueur);
    box-shadow:   0 30px 80px rgba(0,0,0,0.6),
                  0 0 0 1px rgba(111, 76, 255, 0.1) inset,
                  0 0 60px rgba(111, 76, 255, 0.06);
    transform:    translateY(-7px);
}

.p-carte:hover::before { opacity: 1; }

a.p-carte,
a.p-carte:hover,
a.p-carte:focus,
a.p-carte:visited {
    color:           inherit;
    text-shadow:     none;
    text-decoration: none;
}

.p-carte:focus-visible {
    outline:        2px solid var(--violet-clair);
    outline-offset: 3px;
}

.p-carte__media {
    position:     relative;
    overflow:     hidden;
    width:        100%;
    aspect-ratio: 16 / 10;
    flex-shrink:  0;
}

.p-carte__media img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform 0.7s var(--transition-douce);
    filter:     brightness(0.9);
}

.p-carte:hover .p-carte__media img { transform: scale(1.08); filter: brightness(1); }

.p-carte__media-overlay {
    position:       absolute;
    inset:          0;
    background:     linear-gradient(to bottom, transparent 30%, rgba(7, 7, 15, 0.7) 100%);
    pointer-events: none;
}

.p-carte__body {
    display:        flex;
    flex-direction: column;
    flex-grow:      1;
    padding:        16px;        /* CORRECTION: 16px sur mobile */
    gap:            10px;
    position:       relative;
}

@media (min-width: 768px) {
    .p-carte__body { padding: 22px 24px 24px; gap: 12px; }
}

.p-carte__body::before {
    content:    '';
    position:   absolute;
    left:       0;
    top:        20%;
    bottom:     20%;
    width:      2px;
    background: linear-gradient(to bottom, transparent, var(--violet), transparent);
    opacity:    0;
    transition: opacity 0.4s ease;
}

.p-carte:hover .p-carte__body::before { opacity: 1; }

.p-carte__badges { display: flex; gap: 6px; flex-wrap: wrap; }

.p-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            4px;
    padding:        3px 10px;
    border-radius:  6px;
    font-size:      0.65rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border:         1px solid transparent;
}

.p-badge--une {
    background:   rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.25);
    color:        var(--ambre);
}

.p-badge--cat,
.p-badge--categorie {
    background:   var(--violet-lueur);
    border-color: rgba(111, 76, 255, 0.2);
    color:        var(--violet-clair);
}

.p-carte__titre {
    font-family:    'Syne', sans-serif;
    font-size:      1rem;        /* CORRECTION: 1rem sur mobile */
    font-weight:    700;
    color:          var(--texte-principal);
    margin:         0;
    line-height:    1.3;
    letter-spacing: -0.015em;
    transition:     color 0.3s ease;
}

@media (min-width: 768px) {
    .p-carte__titre { font-size: 1.05rem; }
}

.p-carte:hover .p-carte__titre { color: var(--violet-clair); }

.p-carte__desc {
    font-size:              0.82rem;
    color:                  var(--texte-secondaire);
    line-height:            1.6;
    margin:                 0;
    display:                -webkit-box;
    -webkit-line-clamp:     2;
    -webkit-box-orient:     vertical;
    overflow:               hidden;
}

@media (min-width: 768px) {
    .p-carte__desc { font-size: 0.85rem; line-height: 1.65; }
}

.p-carte__techs,
.p-carte__technologies {
    display:   flex;
    flex-wrap: wrap;
    gap:       5px;
}

.p-tech {
    padding:       3px 8px;
    border-radius: 5px;
    background:    rgba(255,255,255,0.04);
    border:        1px solid rgba(255,255,255,0.07);
    color:         var(--texte-secondaire);
    font-size:     0.65rem;
    font-weight:   500;
    transition:    all 0.25s ease;
}

@media (min-width: 768px) {
    .p-tech { font-size: 0.68rem; }
}

.p-tech:hover {
    background:   var(--violet-lueur);
    border-color: rgba(111, 76, 255, 0.3);
    color:        var(--violet-clair);
}

.p-carte__meta {
    display:      flex;
    align-items:  center;
    gap:          10px;
    margin-top:   auto;
    padding-top:  12px;
    border-top:   1px solid rgba(255,255,255,0.05);
    font-size:    0.72rem;
    color:        var(--texte-discret);
}

@media (min-width: 768px) {
    .p-carte__meta { font-size: 0.76rem; }
}

.p-carte__read { display: inline-flex; align-items: center; gap: 4px; }

.p-carte__arrow {
    margin-left:     auto;
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           28px;       /* CORRECTION: 28px sur mobile */
    height:          28px;
    border-radius:   8px;
    background:      var(--violet-lueur);
    color:           var(--violet-clair);
    font-size:       0.7rem;
    transition:      all 0.3s ease;
    flex-shrink:     0;
}

@media (min-width: 768px) {
    .p-carte__arrow { width: 30px; height: 30px; font-size: 0.75rem; }
}

.p-carte:hover .p-carte__arrow {
    background:  var(--violet);
    color:       #fff;
    transform:   translateX(4px);
    box-shadow:  0 4px 12px rgba(111, 76, 255, 0.4);
}

.p-carte__actions {
    display:     flex;
    gap:         8px;
    margin-top:  auto;
    padding-top: 12px;
    border-top:  1px solid rgba(255,255,255,0.05);
    flex-wrap:   wrap;
}

.p-carte__hover-layer .p-carte__actions {
    border-top:  none;
    padding-top: 0;
    margin-top:  0;
}

.p-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    padding:         8px 14px;     /* CORRECTION: plus compact sur mobile */
    border-radius:   8px;
    font-family:     'DM Sans', sans-serif;
    font-size:       0.75rem;
    font-weight:     600;
    cursor:          pointer;
    text-decoration: none;
    border:          none;
    transition:      all 0.25s var(--transition-douce);
    min-height:      36px;         /* CORRECTION: 36px */
}

@media (min-width: 768px) {
    .p-btn { padding: 8px 16px; font-size: 0.78rem; min-height: 40px; }
}

.p-btn--primary  { background: var(--violet); color: #fff; box-shadow: 0 4px 16px rgba(111, 76, 255, 0.35); }
.p-btn--primary:hover { background: #8a6cff; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(111, 76, 255, 0.55); color: #fff; text-shadow: none; }
.p-btn--secondary { background: rgba(255,255,255,0.05); color: var(--texte-principal); border: 1px solid var(--bordure); }
.p-btn--secondary:hover { background: rgba(255,255,255,0.1); color: #fff; text-shadow: none; transform: translateY(-2px); }

/* =========================================
   CARTE FEATURED
   ========================================= */
.p-item--featured { grid-column: 1 / -1; }

/* MOBILE FIRST : carte featured = colonne par défaut */
.p-carte--featured { flex-direction: column; }

@media (min-width: 640px) {
    .p-carte--featured {
        flex-direction: row;
        min-height:     380px;
        max-height:     420px;
    }

    .p-carte--featured .p-carte__media {
        width:        50%;
        aspect-ratio: auto;
        flex-shrink:  0;
    }

    .p-carte--featured .p-carte__body {
        padding:         36px 40px;
        justify-content: center;
    }

    .p-carte--featured .p-carte__titre {
        font-size:          1.8rem;
        -webkit-line-clamp: 3;
    }

    .p-carte--featured .p-carte__desc {
        -webkit-line-clamp: 4;
        font-size:          0.95rem;
    }

    .p-carte--featured::after {
        content:        '';
        position:       absolute;
        inset:          0;
        background:     linear-gradient(90deg, transparent 45%, rgba(111, 76, 255, 0.04) 100%);
        pointer-events: none;
    }
}

/* =========================================
   CARTE PROJET — Overlay + Play
   ========================================= */
.p-carte--projet { position: relative; }

.p-carte__hover-layer {
    position:        absolute;
    inset:           0;
    display:         flex;
    flex-direction:  column;
    align-items:     flex-start;
    justify-content: flex-end;
    padding:         16px;
    background:      linear-gradient(to bottom, transparent 20%, rgba(7,7,15,0.95) 100%);
    opacity:         0;
    transition:      opacity 0.4s ease;
    pointer-events:  none;
    z-index:         5;
}

.p-carte--projet:hover .p-carte__hover-layer {
    opacity:        1;
    pointer-events: auto;
}

.p-carte--projet:focus-visible {
    outline:        2px solid var(--violet-clair);
    outline-offset: 2px;
}

.p-play-icon {
    position:        absolute;
    top:             50%;
    left:            50%;
    transform:       translate(-50%, -50%) scale(0.6);
    width:           56px;       /* CORRECTION: 56px sur mobile */
    height:          56px;
    border-radius:   50%;
    background:      rgba(111, 76, 255, 0.88);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           #fff;
    font-size:       1.1rem;
    opacity:         0;
    transition:      opacity 0.4s ease, transform 0.4s var(--transition-ressort);
    z-index:         6;
    box-shadow:      0 12px 40px rgba(111, 76, 255, 0.6);
    pointer-events:  none;
    padding-left:    4px;
}

@media (min-width: 768px) {
    .p-play-icon { width: 60px; height: 60px; font-size: 1.2rem; }
}

.p-carte--projet:hover .p-play-icon {
    opacity:   1;
    transform: translate(-50%, -50%) scale(1);
}

/* =========================================
   MODALE — MOBILE FIRST (CORRIGÉ)
   ========================================= */

.p-modale-overlay {
    position:        fixed;
    inset:           0;
    z-index:         var(--z-modale);
    display:         flex;
    align-items:     flex-end;    /* Sheet depuis le bas */
    justify-content: center;
    padding:         0;
    background:      rgba(4, 4, 12, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity:         0;
    pointer-events:  none;
    transition:      opacity 0.4s ease;
    /* CORRECTION: empêche le scroll du body quand modale ouverte */
    overscroll-behavior: contain;
}

@media (min-width: 640px) {
    .p-modale-overlay {
        align-items: center;
        padding:     24px;
    }
}

.p-modale-overlay.ouverte {
    opacity:        1;
    pointer-events: auto;
}

.p-modale {
    position:        relative;
    width:           100%;
    max-width:       900px;
    /* CORRECTION: dvh au lieu de vh pour mobile */
    max-height:      92dvh;
    overflow-y:      auto;
    background:      var(--surface-2);
    border-radius:   20px 20px 0 0;  /* Coins arrondis en haut seulement */
    border:          1px solid rgba(111, 76, 255, 0.25);
    box-shadow:      0 60px 120px rgba(0,0,0,0.9),
                     0 0 0 1px rgba(255,255,255,0.04) inset,
                     0 0 80px rgba(111, 76, 255, 0.1);
    transform:       translateY(100%);
    transition:      transform 0.5s var(--transition-ressort);
    scrollbar-width: thin;
    scrollbar-color: rgba(111,76,255,0.3) transparent;
    /* CORRECTION: scroll fluide iOS */
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 640px) {
    .p-modale {
        border-radius: 24px;
        max-height:    85dvh;
        transform:     translateY(40px) scale(0.95);
    }
}

.p-modale-overlay.ouverte .p-modale {
    transform: translateY(0);
}

@media (min-width: 640px) {
    .p-modale-overlay.ouverte .p-modale {
        transform: translateY(0) scale(1);
    }
}

/* CORRECTION: handle pour fermer sur mobile (sheet style) */
.p-modale::before {
    content: '';
    display: block;
    width:   40px;
    height:  4px;
    background: rgba(255,255,255,0.2);
    border-radius: 4px;
    margin:  12px auto 0;
}

@media (min-width: 640px) {
    .p-modale::before { display: none; }
}

.modale-img {
    width:         100%;
    aspect-ratio:  16 / 9;
    object-fit:    cover;
    display:       block;
    border-radius: 20px 20px 0 0;
    filter:        brightness(0.9);
}

@media (min-width: 640px) {
    .modale-img {
        aspect-ratio:  16 / 7;
        border-radius: 24px 24px 0 0;
    }
}

.modale-body {
    padding: 20px 16px 24px;     /* CORRECTION: padding réduit sur mobile */
}

@media (min-width: 640px) {
    .modale-body { padding: 32px 36px 36px; }
}

.modale-header {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    gap:             12px;
    margin-bottom:   16px;
}

@media (min-width: 640px) {
    .modale-header { gap: 16px; margin-bottom: 20px; }
}

.modale-cat {
    font-size:      0.7rem;
    font-weight:    700;
    color:          var(--violet-clair);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom:  8px;
    display:        flex;
    align-items:    center;
    gap:            6px;
}

.modale-cat::before {
    content:       '';
    width:         16px;
    height:        2px;
    background:    var(--violet-clair);
    border-radius: 2px;
    flex-shrink:   0;
}

.modale-titre {
    font-family:    'Syne', sans-serif;
    font-size:      clamp(1.2rem, 4vw, 2rem);  /* CORRECTION: 1.2rem min */
    font-weight:    800;
    color:          var(--texte-principal);
    margin:         0;
    line-height:    1.2;
}

.modale-close {
    flex-shrink:     0;
    width:           40px;       /* CORRECTION: 40px */
    height:          40px;
    border-radius:   10px;
    background:      rgba(255,255,255,0.1);
    border:          1px solid var(--bordure);
    color:           var(--texte-principal);
    font-size:       1.1rem;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      all 0.25s ease;
}

@media (min-width: 640px) {
    .modale-close { width: 44px; height: 44px; font-size: 1.2rem; }
}

.modale-close:hover {
    background:   rgba(255, 75, 75, 0.2);
    border-color: rgba(255, 75, 75, 0.4);
    color:        #ff6b6b;
    transform:    rotate(90deg);
}

.modale-desc {
    color:       var(--texte-secondaire);
    font-size:   0.9rem;
    line-height: 1.7;
    margin:      0 0 20px;
}

@media (min-width: 640px) {
    .modale-desc { font-size: 0.95rem; line-height: 1.8; margin-bottom: 24px; }
}

.modale-techs {
    display:       flex;
    flex-wrap:     wrap;
    gap:           6px;
    margin-bottom: 20px;
    padding-top:   16px;
    border-top:    1px solid rgba(255,255,255,0.05);
}

@media (min-width: 640px) {
    .modale-techs { gap: 8px; margin-bottom: 24px; padding-top: 20px; }
}

.modale-actions {
    display:        flex;
    gap:            10px;
    flex-wrap:      wrap;
    padding-top:    16px;
    border-top:     1px solid rgba(255,255,255,0.05);
    flex-direction: column;
}

@media (min-width: 480px) {
    .modale-actions { flex-direction: row; gap: 12px; padding-top: 20px; }
}

/* =========================================
   ÉTAT VIDE
   ========================================= */

.p-vide {
    column-span: all;
    text-align:  center;
    padding:     60px 20px;      /* CORRECTION: 60px sur mobile */
    color:       var(--texte-discret);
}

@media (min-width: 768px) {
    .p-vide { padding: 80px 20px; }
}

.p-vide__icone { font-size: 3rem; margin-bottom: 16px; opacity: 0.3; filter: grayscale(1); }
@media (min-width: 768px) { .p-vide__icone { font-size: 3.5rem; } }

.p-vide__titre { font-family: 'Syne', sans-serif; color: var(--texte-principal); font-size: 1.1rem; font-weight: 700; margin: 0 0 8px; }
@media (min-width: 768px) { .p-vide__titre { font-size: 1.25rem; } }

.p-vide__sous  { font-size: 0.85rem; margin: 0; }
@media (min-width: 768px) { .p-vide__sous { font-size: 0.9rem; } }

/* =========================================
   BOUTON VOIR PLUS
   ========================================= */

.p-actions { display: flex; justify-content: center; margin-top: 40px; padding: 0 16px; }
@media (min-width: 768px) { .p-actions { margin-top: 48px; padding: 0; } }

.p-btn-more {
    display:         inline-flex;
    align-items:     center;
    gap:             10px;
    padding:         12px 36px;    /* CORRECTION: plus compact */
    border-radius:   12px;
    background:      rgba(255,255,255,0.03);
    border:          1px solid rgba(111, 76, 255, 0.3);
    color:           var(--texte-principal);
    font-family:     'DM Sans', sans-serif;
    font-size:       0.88rem;
    font-weight:     600;
    cursor:          pointer;
    transition:      all 0.3s var(--transition-douce);
    position:        relative;
    overflow:        hidden;
    min-height:      44px;
}

@media (min-width: 768px) {
    .p-btn-more { padding: 14px 44px; font-size: 0.92rem; min-height: 48px; }
}

.p-btn-more::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(135deg, rgba(111,76,255,0.12), transparent);
    opacity:    0;
    transition: opacity 0.3s ease;
}

.p-btn-more:hover::before { opacity: 1; }
.p-btn-more:hover { border-color: var(--violet); transform: translateY(-3px); box-shadow: 0 14px 40px rgba(111, 76, 255, 0.25); color: #fff; text-shadow: none; }
.p-btn-more:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.p-btn-more__label { position: relative; z-index: 1; }

.p-btn-more__spinner {
    width:         16px;
    height:        16px;
    border:        2px solid rgba(255,255,255,0.15);
    border-top-color: #fff;
    border-radius: 50%;
    animation:     rotation 0.7s linear infinite;
    display:       none;
    flex-shrink:   0;
}

.p-btn-more.chargement .p-btn-more__spinner { display: block; }
@keyframes rotation { to { transform: rotate(360deg); } }

/* =========================================
   FADE-IN (Scroll)
   ========================================= */
.fade-in {
    opacity:    0;
    transform:  translateY(20px);
    transition: opacity 0.65s var(--transition-douce),
                transform 0.65s var(--transition-douce);
}

.fade-in.visible { opacity: 1; transform: translateY(0); }

/* =========================================
   CONTENU MODALE (HTML formaté)
   ========================================= */
.modale-contenu { color: var(--texte-secondaire); font-size: 0.9rem; line-height: 1.7; margin: 0 0 20px; }
@media (min-width: 640px) { .modale-contenu { font-size: 0.95rem; line-height: 1.8; margin-bottom: 24px; } }

.modale-contenu h1, .modale-contenu h2, .modale-contenu h3, .modale-contenu h4 { font-family: 'Syne', sans-serif; color: var(--texte-principal); margin: 20px 0 10px; font-weight: 700; }
@media (min-width: 640px) { .modale-contenu h1, .modale-contenu h2, .modale-contenu h3, .modale-contenu h4 { margin: 24px 0 12px; } }

.modale-contenu h1 { font-size: 1.3rem; }
.modale-contenu h2 { font-size: 1.15rem; }
.modale-contenu h3 { font-size: 1rem; }
@media (min-width: 640px) { .modale-contenu h1 { font-size: 1.5rem; } .modale-contenu h2 { font-size: 1.3rem; } .modale-contenu h3 { font-size: 1.1rem; } }

.modale-contenu p  { margin: 0 0 14px; }
@media (min-width: 640px) { .modale-contenu p { margin-bottom: 16px; } }

.modale-contenu ul, .modale-contenu ol { margin: 0 0 14px; padding-left: 20px; }
@media (min-width: 640px) { .modale-contenu ul, .modale-contenu ol { margin-bottom: 16px; padding-left: 24px; } }

.modale-contenu li { margin-bottom: 6px; }
@media (min-width: 640px) { .modale-contenu li { margin-bottom: 8px; } }

.modale-contenu a  { color: var(--violet-clair); text-decoration: none; transition: color 0.25s ease; }
.modale-contenu a:hover { color: var(--cyan); text-decoration: underline; }
.modale-contenu code { background: rgba(111, 76, 255, 0.1); padding: 2px 6px; border-radius: 4px; font-family: 'Fira Code', monospace; font-size: 0.85em; color: var(--violet-clair); }
.modale-contenu pre { background: var(--surface); padding: 14px; border-radius: 10px; overflow-x: auto; margin: 0 0 14px; border: 1px solid var(--bordure); }
@media (min-width: 640px) { .modale-contenu pre { padding: 16px; border-radius: 12px; margin-bottom: 16px; } }

.modale-contenu pre code { background: none; padding: 0; }
.modale-contenu img { max-width: 100%; border-radius: 10px; margin: 14px 0; }
@media (min-width: 640px) { .modale-contenu img { border-radius: 12px; margin: 16px 0; } }

.modale-contenu blockquote { border-left: 3px solid var(--violet); padding-left: 14px; margin: 14px 0; color: var(--texte-principal); font-style: italic; }
@media (min-width: 640px) { .modale-contenu blockquote { padding-left: 16px; margin: 16px 0; } }

.modale-contenu strong { color: var(--texte-principal); font-weight: 600; }

/* =========================================
   COULEURS DYNAMIQUES PAR CATÉGORIE
   ========================================= */
.p-badge--cat, .p-badge--categorie {
    background:   color-mix(in srgb, var(--accent-color), transparent 85%);
    border-color: color-mix(in srgb, var(--accent-color), transparent 75%);
    color:        var(--accent-color);
}

.p-carte:hover {
    border-color: color-mix(in srgb, var(--accent-color), transparent 50%);
    box-shadow:   0 30px 80px rgba(0,0,0,0.6),
                  0 0 0 1px color-mix(in srgb, var(--accent-color), transparent 90%) inset,
                  0 0 60px color-mix(in srgb, var(--accent-color), transparent 94%);
}

.p-carte__body::before {
    background: linear-gradient(to bottom, transparent, var(--accent-color), transparent);
}

.p-play-icon {
    background: color-mix(in srgb, var(--accent-color), transparent 12%);
    box-shadow: 0 12px 40px color-mix(in srgb, var(--accent-color), transparent 40%);
}

.p-carte:hover .p-carte__titre {
    color: var(--accent-color);
}

/* =========================================
   UTILITAIRES MOBILE
   ========================================= */

/* Cache les éléments sur mobile */
@media (max-width: 767px) {
    .hide-mobile { display: none !important; }
}

/* Cache les éléments sur desktop */
@media (min-width: 768px) {
    .hide-desktop { display: none !important; }
}

/* Reset des listes pour conserver le design d'origine */
.p-hero__stats, .p-grille {
    list-style: none; /* Enlève les puces */
    margin: 0;        /* Enlève les marges par défaut */
    padding: 0;       /* Enlève le décalage à gauche */
    display: flex;    /* Réactive le flexbox (ou grid selon ton cas) */
}

/* Si p-grille utilise Grid (plus probable pour ton portfolio) */
.p-grille {
    display: grid;
    /* Garde tes propriétés grid-template-columns d'origine ici */
}

/* S'assurer que les éléments de liste n'ont pas de marges parasites */
.p-stat, .p-item {
    margin: 0;
    padding: 0;
}

/* Le parent li doit être en position relative */
.p-item {
    position: relative;
}

/* On positionne le bouton par-dessus la carte */
.p-btn-external-standalone {
    position: absolute;
    bottom: 20px; /* Ajustez selon votre design */
    right: 20px;  /* Ajustez selon votre design */
    z-index: 10;  /* Doit être au-dessus de la carte */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Copiez ici le reste du style de votre ancienne classe .p-btn-external */
}

/* Optionnel : effet au survol pour montrer que c'est un lien séparé */
.p-btn-external-standalone:hover {
    transform: scale(1.1);
    background: #000; /* ou votre couleur d'accent */
}