/* ============================================================================
   zz-media-app.css — MODALE « Ajouter un média » (detail-media-editor-v2, .mfc-*).
   RECONSTRUCTION fidèle maquette cachée 01 (état initial : choix du type + source) :
   2 grandes tuiles lumineuses Photo/Vidéo, grande zone « Choisir dans mon téléphone »,
   puis « Prendre une photo / filmer ». Charte navy + cyan + ambre. Les étapes vidéo
   (aperçu/rognage/miniature/musique, maq. 02-04) restent reskinées en dessous.
   100% CSS additif (classes .mfc-*), scopé html.apprefonte. Aucune fonction touchée.
   ============================================================================ */

@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px), (display-mode: standalone) and (max-width: 1366px) {

  /* Fond + feuille. */
  html.apprefonte .mfc-modal { background: rgba(4, 12, 20, .72) !important; }
  html.apprefonte .mfc-sheet {
    background: var(--ar-surface) !important; border: 1px solid var(--ar-hairline) !important;
    border-radius: 22px 22px 0 0 !important; box-shadow: 0 -18px 50px rgba(0,0,0,.5) !important;
  }
  /* En-tête + titre + croix. */
  html.apprefonte .mfc-head, html.apprefonte .mfc-title { color: var(--ar-ink) !important; font-weight: 800 !important; }
  html.apprefonte .mfc-x {
    background: var(--ar-bg) !important; color: var(--ar-cyan) !important;
    border: 1px solid var(--ar-cyan-40, rgba(53,215,209,.4)) !important; border-radius: 50% !important;
  }

  /* ---- SÉLECTEUR DE TYPE : 2 grandes tuiles lumineuses (Photo / Vidéo) ---- */
  html.apprefonte .mfc-tabs { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px !important; margin: 4px 0 6px !important; }
  html.apprefonte .mfc-tab {
    display: flex !important; align-items: center; justify-content: center; text-align: center;
    min-height: 118px !important; border-radius: 18px !important;
    background: var(--ar-bg) !important; color: var(--ar-ink) !important;
    border: 1.5px solid var(--ar-hairline) !important; font: 700 17px/1.3 'Inter', system-ui, sans-serif !important;
  }
  html.apprefonte .mfc-tab.is-on {
    background: rgba(53,215,209,.10) !important; color: var(--ar-cyan) !important;
    border-color: var(--ar-cyan) !important;
    box-shadow: 0 0 0 1px var(--ar-cyan), 0 0 26px rgba(53,215,209,.22) !important;
  }

  /* ---- SOURCES : gating par type (n'affiche que le type choisi) ---- */
  html.apprefonte .mfc-sheet:has(.mfc-tabs .mfc-tab:first-child.is-on) .mfc-src.mfc-video { display: none !important; }
  html.apprefonte .mfc-sheet:has(.mfc-tabs .mfc-tab:last-child.is-on)  .mfc-src.mfc-photo { display: none !important; }

  html.apprefonte .mfc-sources .mfc-sec-h { color: var(--ar-ink) !important; font: 700 13px/1.2 'Inter', sans-serif !important; margin: 6px 0 10px !important; }
  html.apprefonte .mfc-srcgrid { display: flex !important; flex-direction: column; gap: 12px !important; }
  html.apprefonte .mfc-src { color: var(--ar-ink) !important; }

  /* « Choisir dans mon téléphone » = grande zone en pointillé (les tuiles SANS capture). */
  html.apprefonte .mfc-src:has(input:not([capture])) {
    order: 1; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    min-height: 150px !important; padding: 20px 16px !important; text-align: center;
    background: rgba(53,215,209,.05) !important; border: 1.6px dashed var(--ar-cyan-40, rgba(53,215,209,.42)) !important; border-radius: 16px !important;
  }
  html.apprefonte .mfc-src:has(input:not([capture])) .mfc-ic { font-size: 34px !important; color: var(--ar-cyan) !important; }
  html.apprefonte .mfc-src:has(input:not([capture])) span:not(.mfc-ic) { font: 700 16px/1.3 'Inter', sans-serif !important; color: var(--ar-ink) !important; }

  /* « Prendre une photo / filmer » = bouton pleine largeur (les tuiles AVEC capture). */
  html.apprefonte .mfc-src:has(input[capture]) {
    order: 2; display: flex !important; flex-direction: row; align-items: center; justify-content: center; gap: 10px;
    min-height: 54px !important; padding: 12px 16px !important;
    background: var(--ar-bg) !important; border: 1px solid var(--ar-border, var(--ar-hairline)) !important; border-radius: 14px !important;
    font: 700 15px/1 'Inter', sans-serif !important;
  }
  html.apprefonte .mfc-src:has(input[capture]) .mfc-ic { font-size: 20px !important; color: var(--ar-cyan) !important; }

  /* ---- Pied : Annuler (contour) + Confirmer (ambre) ---- */
  html.apprefonte .mfc-cancel {
    background: transparent !important; color: var(--ar-ink) !important;
    border: 1px solid var(--ar-border, var(--ar-hairline)) !important; border-radius: 12px !important;
  }
  html.apprefonte .mfc-confirm {
    background: var(--ar-amber) !important; background-image: none !important; color: var(--ar-on-accent) !important;
    border: 0 !important; box-shadow: none !important; text-shadow: none !important; border-radius: 12px !important; font-weight: 800 !important;
  }

  /* ---- ÉTAPES VIDÉO (aperçu / rognage / miniature / musique — maq. 02-04) ---- */
  html.apprefonte .mfc-media, html.apprefonte .mfc-crop, html.apprefonte .mfc-crop-h, html.apprefonte .mfc-covers, html.apprefonte .mfc-preview {
    background: var(--ar-bg) !important; border: 1px solid var(--ar-hairline) !important; border-radius: 14px !important;
  }
  html.apprefonte .mfc-media *, html.apprefonte .mfc-crop-h *, html.apprefonte .mfc-covers * { color: var(--ar-ink) !important; }
  html.apprefonte .mfc-music button, html.apprefonte .mfc-music a, html.apprefonte .mfc-cats button {
    background: var(--ar-surface-2, var(--ar-bg)) !important; color: var(--ar-ink-soft) !important;
    border: 1px solid var(--ar-hairline) !important; border-radius: 999px !important;
  }
  html.apprefonte .mfc-ghost {
    background: transparent !important; color: var(--ar-cyan) !important;
    border: 1px solid var(--ar-cyan-40, rgba(53,215,209,.4)) !important; border-radius: 12px !important;
  }

}