/* ==========================================================================
   mobile.css — adaptation petits écrans / tactile
   Chargé APRÈS le <style> de chaque page : il a donc le dernier mot.
   Rien ici ne s'applique au-dessus de 860px : le rendu bureau est intact.
   ========================================================================== */

/* --- Menu de bureau : libellés insécables ---
   « À propos » se coupait entre « À » et « propos » en dessous de 1300px,
   ce qui décalait trois liens sur deux lignes. --- */
.site-nav .links a { white-space: nowrap; }

/* Entre 861 et 1300px, on resserre pour que tout tienne sur une ligne. */
@media (min-width: 861px) and (max-width: 1300px) {
  .site-nav .links { gap: 30px; }
  .site-nav .links-left { margin-right: 30px; }
  .site-nav .links-right { margin-left: 30px; }
  .site-nav .logo-mark { width: 300px; }
}

/* --- Bouton et panneau de menu : masqués sur bureau --- */
.mnav-btn,
.mnav-sheet { display: none; }

/* ==========================================================================
   1. Pointeur tactile — le curseur appareil photo n'a pas de sens sans souris
   ========================================================================== */
@media (hover: none), (pointer: coarse) {
  .cursor-cam { display: none !important; }
  body,
  a, .magnetic, .grid figure, figure { cursor: auto !important; }

  /* Sans survol possible, le titre de chaque photo de la sélection doit
     rester affiché en permanence — sinon il n'apparaît jamais.
     Critère : le type de pointeur, PAS la largeur d'écran. Un iPad en
     paysage fait 1180px : réglé sur la largeur, il n'aurait rien affiché. */
  .grid .overlay,
  .grid .overlay span {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .grid .overlay { padding: 0 0 16px 18px; }
  .grid .overlay span { font-size: 21px; }
}

/* ==========================================================================
   2. Menu mobile
   ========================================================================== */
@media (max-width: 860px) {

  .mnav-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 10050;
    width: 46px;
    height: 46px;
    padding: 0 11px;
    border: 1px solid rgba(22, 21, 19, 0.12);
    border-radius: 50%;
    background: rgba(247, 245, 241, 0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.13);
  }
  .mnav-btn span {
    display: block;
    height: 1.5px;
    width: 100%;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.25s ease;
  }
  .mnav-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .mnav-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .mnav-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .mnav-sheet {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    position: fixed;
    inset: 0;
    z-index: 10040;
    padding: 0 34px;
    background: var(--paper);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.32s ease, transform 0.32s ease, visibility 0.32s;
  }
  .mnav-sheet.open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .mnav-sheet a {
    font-family: var(--serif);
    font-size: 27px;
    line-height: 1.2;
    color: var(--ink);
    padding: 13px 0;
    border-bottom: 1px solid rgba(22, 21, 19, 0.08);
  }
  .mnav-sheet a:last-child { border-bottom: 0; }
  .mnav-sheet a.active { color: var(--accent); }

  body.mnav-open { overflow: hidden; }

  /* Menu de bureau : on garde le logo, on retire les liens */
  .site-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 18px 62px 14px 18px;
    grid-template-columns: none;
  }
  .site-nav .links { display: none; }
  .site-nav .logo-mark,
  footer.site-footer .logo-mark {
    width: 200px;
    max-width: 62vw;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ==========================================================================
   3. Réglages communs
   ========================================================================== */
@media (max-width: 860px) {

  footer.site-footer { padding: 46px 22px 40px; margin-top: 48px; }
  footer.site-footer .contact { font-size: 15px; line-height: 2.1; }
  footer.site-footer .contact a {
    display: inline-block;
    padding: 8px 4px;   /* zone touchable confortable */
  }

  .page-head { padding: 44px 22px 30px; }
  .page-head h1 { font-size: 31px; }

  .cta-strip { padding: 52px 22px 60px; }
  .cta-strip a { padding: 15px 30px; font-size: 12px; }

  .intro-text { padding: 0 22px !important; margin-bottom: 46px !important; }
  .intro-text p { text-align: left !important; font-size: 14.5px !important; }
}

/* ==========================================================================
   4. Accueil
   ========================================================================== */
@media (max-width: 860px) {

  .cine-hero { height: 88vh; }
  .cine-title h1 { font-size: 25px; padding: 0 26px; }
  .cine-title .sub { font-size: 11px; padding: 0 26px; }

  /* Les translations horizontales de 280px débordent sur un petit écran */
  .cine-title h1 span { transform: translateX(-60vw); }
  .cine-title .sub { transform: translateX(-45vw); }

  .split { margin-top: 62px; }
  .split .panel { padding: 46px 22px; }
  .grid-section { padding-left: 0; padding-right: 0; }
}

/* ==========================================================================
   5. À propos
   ========================================================================== */
@media (max-width: 860px) {
  /* Le conteneur porte un style inline (grid-template-columns: 1fr 1fr) :
     seul !important peut le neutraliser. */
  .about-grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    padding: 42px 22px 60px !important;
  }
  .about-grid > div:first-child { max-width: 320px; margin: 0 auto; }
  .about-grid h1 { font-size: 32px !important; margin-bottom: 20px !important; }
  .about-grid p { font-size: 14.5px !important; }
  .about-grid .highlight p { font-size: 16px !important; }
  /* Sans marge, les paragraphes se touchent (defaut present aussi sur bureau) */
  .about-grid > div:last-child p { margin-bottom: 16px !important; }
  .about-grid .highlight { margin: 6px 0 18px; }
}

/* ==========================================================================
   6. Portraits / Mode / Lifestyle
   ========================================================================== */
@media (max-width: 860px) {
  .hero-img { aspect-ratio: 4 / 5; }
  /* L'image arrivait de 450px à gauche : hors cadre sur mobile */
  .hero-img img { transform: translateX(-60vw); }

  .gallery .full { aspect-ratio: 4 / 5; }
  .gallery .masonry { flex-direction: column; gap: 6px; }

  .lightbox img { max-width: 94vw; max-height: 80vh; }
  .lightbox-close {
    top: 14px; right: 16px;
    width: 44px; height: 44px;
    font-size: 30px;
  }
}

/* ==========================================================================
   7. Contact — la page à reprendre entièrement
   Sur bureau, titre / formulaire / bouton sont en position: fixed calée sur
   un écran large. On les remet dans le flux normal, dans l'ordre du HTML.
   ========================================================================== */
@media (max-width: 860px) {

  body {
    background-attachment: scroll;   /* le fixed sursaute sur iOS */
    min-height: 100svh;
  }

  .page-head,
  .contact-section,
  .cta-strip {
    /* relative et non static : static annulerait le z-index qui maintient
       ces blocs au-dessus du voile body::before */
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    max-width: 100%;
  }

  .contact-section {
    padding: 0 22px 10px;
    margin: 0 auto;
    max-width: 460px;
  }

  .contact-form label { font-size: 12px; margin-bottom: 6px; }
  .form-group { margin-bottom: 14px; }

  /* 16px minimum : en dessous, iOS zoome tout seul à la saisie */
  .contact-form input,
  .contact-form textarea {
    font-size: 16px;
    padding: 13px 14px;
  }
  .contact-form textarea { min-height: 120px; }
  .contact-form button {
    font-size: 13px;
    padding: 16px 24px;
    margin-top: 14px;
  }

  .cta-strip { padding: 34px 22px 56px; }

  /* Le cadrage mobile de la photo tombe sur une zone claire :
     sans voile, le texte blanc devient illisible. */
  .page-contact::before { background: rgba(13, 13, 12, 0.62); }
  .page-contact .intro-text { display: block; }
  .page-contact .intro-text p { color: rgba(255, 255, 255, 0.9) !important; }
  .page-contact .page-head { padding: 34px 22px 18px; }
  /* filet de sécurité là où la photo reste très claire */
  .page-contact .page-head h1,
  .page-contact .page-head .section-label,
  .page-contact .contact-form label,
  .page-contact .cta-strip a { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55); }
}

/* ==========================================================================
   8. Très petits écrans
   ========================================================================== */
@media (max-width: 400px) {
  .site-nav .logo-mark,
  footer.site-footer .logo-mark { width: 168px; }
  .page-head h1 { font-size: 27px; }
  .mnav-sheet a { font-size: 24px; padding: 11px 0; }
  .cine-title h1 { font-size: 21px; }
}

/* ==========================================================================
   9. Animations réduites si le système le demande
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   Tablette : la mosaïque garde deux colonnes.
   Constaté le 06/08/2026 en contrôlant les trois formats : à 834 px (iPad en
   portrait) la galerie repassait sur UNE colonne de photos pleine largeur.
   La page faisait alors 14 486 px de haut, contre 4 428 px sur ordinateur et
   7 313 px sur téléphone — plus longue que sur un mobile, ce qui n'a aucun
   sens. Les trois colonnes du bureau sont trop étroites ici, deux suffisent.
   -------------------------------------------------------------------------- */
@media (min-width: 561px) and (max-width: 860px) {
  .gallery .masonry { flex-direction: row; }
  .gallery .masonry .col { flex: 1; }
  .gallery .full { aspect-ratio: 16 / 9; }
}