/* nnaedou — bandeau Moi : continuité vert profond, panneau ivoire mobile */
@media (max-width:760px){
  #application:has(#page-profile.active) .topbar{display:none!important}

  #application #page-profile.active{
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    gap:0!important;
    width:calc(100% + 32px)!important;
    max-width:none!important;
    margin:-22px -16px 0!important;
    padding:0 0 108px!important;
    overflow:visible!important;
    background:#073f37!important;
  }

  #application #page-profile>.page-heading{
    order:0!important;
    position:relative!important;
    isolation:isolate!important;
    min-height:278px!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    border:0!important;
    border-radius:0!important;
    background:
      linear-gradient(180deg,rgba(5,31,29,.08) 0%,rgba(5,31,29,.12) 52%,rgba(5,31,29,.38) 100%),
      url('/mygablink-home-moonlagoon-v1.webp?v=profile-panel-1') 62% 46%/cover no-repeat!important;
    color:#fff8eb!important;
    box-shadow:none!important;
  }

  #application #page-profile>.page-heading>div{display:none!important}

  #application #page-profile>.page-heading::before{
    content:"nnaedou"!important;
    position:absolute!important;
    z-index:3!important;
    top:34px!important;
    left:28px!important;
    color:#fff8eb!important;
    font:700 34px/1 Georgia,'Times New Roman',serif!important;
    letter-spacing:-1.3px!important;
    text-shadow:0 2px 14px rgba(0,0,0,.24)!important;
  }

  #application #page-profile>.page-heading::after{display:none!important}

  #application #page-profile>.profile-journey{
    order:1!important;
    position:relative!important;
    z-index:5!important;
    display:grid!important;
    grid-template-columns:116px minmax(0,1fr)!important;
    gap:16px!important;
    align-items:center!important;
    min-height:148px!important;
    width:auto!important;
    margin:-76px 14px 0!important;
    padding:18px 16px 18px!important;
    overflow:visible!important;
    border:0!important;
    border-radius:28px 28px 0 0!important;
    background:#fffaf0!important;
    color:#153f36!important;
    box-shadow:0 15px 30px rgba(2,34,29,.22)!important;
  }

  #application #page-profile>.profile-journey::before,
  #application #page-profile>.profile-journey::after,
  #application #page-profile .profile-journey-pattern{display:none!important}

  #application #page-profile .profile-journey-avatar{
    align-self:start!important;
    justify-self:start!important;
    width:116px!important;
    height:116px!important;
    margin:-55px 0 0!important;
    border:6px solid #fffaf0!important;
    border-radius:50%!important;
    background:#e8ddca!important;
    box-shadow:0 2px 0 rgba(197,168,129,.75),0 10px 24px rgba(28,54,46,.17)!important;
    overflow:hidden!important;
  }

  #application #page-profile .profile-journey-avatar img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center!important;
  }

  #application #page-profile .profile-journey-copy{
    min-width:0!important;
    align-self:center!important;
    padding:6px 0 0!important;
  }

  #application #page-profile .profile-journey-copy h2{
    margin:0 0 12px!important;
    color:#143d35!important;
    font:700 25px/1.04 Georgia,'Times New Roman',serif!important;
    letter-spacing:-.025em!important;
    overflow-wrap:anywhere!important;
  }

  #application #page-profile .profile-private-label{
    display:inline-flex!important;
    align-items:center!important;
    gap:7px!important;
    min-height:34px!important;
    padding:8px 12px!important;
    border:0!important;
    border-radius:999px!important;
    background:#edf0e6!important;
    color:#456052!important;
    font:600 12px/1.1 system-ui,sans-serif!important;
  }

  #application #page-profile .profile-private-label::before{
    content:"🔒"!important;
    font-size:12px!important;
    line-height:1!important;
  }

  #application #page-profile .profile-journey-copy p,
  #application #page-profile .profile-journey .button{display:none!important}

  #application #page-profile>.profile-timeline-preview{
    order:2!important;
    position:relative!important;
    z-index:4!important;
    margin:0 14px!important;
    padding:15px 14px 22px!important;
    border:0!important;
    border-radius:0!important;
    background:#fffaf0!important;
    box-shadow:none!important;
  }

  #application #page-profile>.profile-timeline-preview::after{display:none!important}

  #application #page-profile .profile-timeline-preview .section-heading{
    display:flex!important;
    align-items:flex-end!important;
    justify-content:space-between!important;
    gap:12px!important;
    margin:0 3px 19px!important;
  }

  #application #page-profile .profile-timeline-preview .section-heading .eyebrow{
    display:block!important;
    margin:0 0 5px!important;
    color:#708078!important;
    font-size:10px!important;
    letter-spacing:.22em!important;
  }

  #application #page-profile .profile-timeline-preview h2{
    margin:0!important;
    color:#173f35!important;
    font:700 34px/.98 Georgia,'Times New Roman',serif!important;
    letter-spacing:-.03em!important;
  }

  #application #page-profile .profile-timeline-preview .section-heading::after{
    content:""!important;
    position:absolute!important;
    left:3px!important;
    bottom:-11px!important;
    width:64px!important;
    height:4px!important;
    border-radius:4px!important;
    background:#b86242!important;
  }

  #application #page-profile .profile-timeline-preview .button{
    display:inline-flex!important;
    min-height:42px!important;
    padding:10px 14px!important;
    border:0!important;
    border-radius:15px!important;
    background:#174d3f!important;
    color:#fffaf0!important;
    font-size:13px!important;
  }

  #application #page-profile>.profile-hub{
    order:3!important;
    margin:0 14px!important;
    padding:4px 14px 18px!important;
    border-radius:0!important;
    background:#fffaf0!important;
  }

  #application #page-profile>.profile-utility-grid{
    order:4!important;
    margin:0 14px 16px!important;
    padding:0 14px 20px!important;
    border-radius:0 0 28px 28px!important;
    background:#fffaf0!important;
    box-shadow:0 14px 28px rgba(2,34,29,.18)!important;
  }

  #application #page-profile>.recognition-card,
  #application #page-profile>.relay-card,
  #application #page-profile>.legacy-card,
  #application #page-profile>.impact-card,
  #application #page-profile>.memory-chantiers-card,
  #application #page-profile>.memory-journal-card,
  #application #page-profile>.profile-layout,
  #application #page-profile>.support-card,
  #application #page-profile>.discovery-card,
  #application #page-profile>.contacts-card,
  #application #page-profile>.invitations-card,
  #application #page-profile>.profile-area{
    order:9!important;
    margin-left:14px!important;
    margin-right:14px!important;
  }

  /* La continuité reprend exactement le bleu-vert de l’accueil. */
  #application #page-profile.active{background:#0c2430!important}

  /* Le nom demeure lisible : aucun découpage syllabique ni mot à mot. */
  #application #page-profile>.profile-journey{
    grid-template-columns:1fr!important;
    min-height:166px!important;
    padding:20px 20px 18px 142px!important;
  }
  #application #page-profile .profile-journey-avatar{
    position:absolute!important;
    top:20px!important;
    left:20px!important;
    width:104px!important;
    height:104px!important;
    margin:0!important;
  }
  #application #page-profile .profile-journey-copy{padding:0!important}
  #application #page-profile .profile-journey-copy h2{
    margin:0 0 10px!important;
    font-size:clamp(14px,4.15vw,17px)!important;
    line-height:1.12!important;
    letter-spacing:-.01em!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:none!important;
  }

  #application:has(#page-profile.active) .mobile-nav{
    background:#0a202b!important;
    border-top:1px solid rgba(255,255,255,.10)!important;
  }
}

@media (max-width:390px){
  #application #page-profile>.profile-journey{grid-template-columns:102px minmax(0,1fr)!important;gap:13px!important}
  #application #page-profile .profile-journey-avatar{width:102px!important;height:102px!important}
  #application #page-profile .profile-journey-copy h2{font-size:22px!important}
}