/* ============================================================
   MOBILE.CSS — Responsive (≤ 760px)
   Studio Antoine Ozen

   Chargé en dernier. Toutes les règles sont dans des media queries :
   la version ordinateur n'est jamais modifiée.
   ============================================================ */

/* Bouton menu (3 barres) — caché sur ordinateur */
.nb { display: none; }


@media (max-width: 760px) {

  /* ── GOUTTIÈRE + PAS DE SCROLL HORIZONTAL ── */
  :root { --gx: 1.25rem; }

  html, body { overflow-x: clip; }


  /* ── BOUTON MENU — 3 barres grises, haut droite, fixe ── */
  .nb {
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    gap:             5px;
    position:        fixed;
    top:             2rem;
    right:           var(--gx);
    z-index:         600;
    width:           26px;
    height:          24px;
    padding:         0;
    background:      none;
    border:          none;
    -webkit-tap-highlight-color: transparent;
  }

  .nb span {
    display:    block;
    width:      100%;
    height:     1px;
    background: var(--fg2);
    transition: transform 0.35s var(--ease), opacity 0.25s ease, background var(--ease-theme);
  }

  /* Ouvert → croix */
  body.nav-open .nb span:nth-child(1) { transform: translateY(6px)  rotate(45deg); }
  body.nav-open .nb span:nth-child(2) { opacity: 0; }
  body.nav-open .nb span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }


  /* ── NAV — plein écran, fond transparent flouté ── */
  nav {
    inset:           0;
    top:             0;
    right:           0;
    transform:       none;
    justify-content: center;
    align-items:     center;
    z-index:         550;
    background:      color-mix(in srgb, var(--bg) 55%, transparent);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    opacity:         0;
    visibility:      hidden;
    transition:      opacity 0.4s ease, visibility 0s linear 0.4s;
  }

  body.nav-open nav {
    opacity:    1;
    visibility: visible;
    transition: opacity 0.4s ease;
  }

  .nl {
    align-items:   center;
    gap:           1rem;
    margin-bottom: 1rem;
  }

  .nl a,
  .nc a { font-size: 15px; }

  .nsep { margin: 0.6rem auto; }

  .tt {
    justify-content: center;
    margin-top:      2rem;
  }


  /* ── GALERIE — une colonne, pleine largeur ── */
  .pjwrap .pj:nth-child(n) {
    width:         100%;
    margin-left:   0;
    margin-right:  0;
    margin-top:    0;
    margin-bottom: 4.5rem;
  }

  .pjwrap .pj-empty { margin-bottom: 0; }

  .pj-cap { padding-top: 0.9rem; }


  /* ── LIGHTBOX ── */
  #lb-panel {
    width:      94vw;
    max-height: 100svh;
    overflow-y: auto;
    scrollbar-width: none;
  }

  #lb-panel::-webkit-scrollbar { display: none; }

  .lbinfo { padding: 1.5rem 1.1rem 1.4rem; }

  .lbig {
    grid-template-columns: 1fr;
    gap:                   1rem;
  }

  .lbmeta { text-align: left; }

  /* Images du projet : on change en glissant le doigt (swipe), pas de flèches */
  .lb-iarr { display: none !important; }

  .lbnav { flex-wrap: wrap; }


  /* ── OVERLAYS (Philosophie, Formations, Contact…) ── */
  .ovp {
    width:      92vw;
    padding:    3.5rem 1.4rem 2rem;
    max-height: 88svh;
  }

  .ctg { grid-template-columns: 1fr; }


  /* ── FOOTER — empilé, aligné à gauche, plus discret ──
     Tout est réduit sauf le bouton Contact (.fcta). */
  footer { padding: 2rem 0 1.4rem; }

  .fmain {
    flex-direction: column;
    align-items:    flex-start;
    gap:            1.2rem;
    padding-bottom: 1.6rem;
    margin-bottom:  1.2rem;
  }

  .fname { font-size: 17px; }
  .fsub  { font-size: 12px; }
  .fsl   { font-size: 10px; }
  .fsoc svg { width: 24px; height: 24px; }
  .fc,
  .fl a  { font-size: 11px; }

  .factions { align-items: flex-start; }

  .fsl   { text-align: left; }
  .fsrow { justify-content: flex-start; }

  .fbot {
    flex-direction: column;
    align-items:    flex-start;
    gap:            1rem;
  }

  .fl {
    flex-wrap: wrap;
    gap:       0.8rem 1.4rem;
  }
}


/* ── ÉCRANS TACTILES — pas de curseur personnalisé ── */
@media (hover: none) {
  #blob-cv,
  #cartel { display: none; }
}