/* ====================================================== */
/* MOBILE.CSS - Version finale optimisée (portrait + paysage) */
/* ====================================================== */

/* ============================================================= */
/* PORTRAIT MOBILE - Toutes les règles pour téléphone vertical   */
/* ============================================================= */
@media (max-width: 768px) and (orientation: portrait) {

  /* ====================== HOTSPOTS ====================== */
  /* Taille des boutons sur la page d'accueil */
  .hotspot {
    width: 105px !important;           /* ← taille du cercle */
    height: 105px !important;
    font-size: 13px !important;        /* ← taille du texte dans le bouton */
    opacity: 0.85 !important;
  }

  .hotspot:hover {
    opacity: 1 !important;
    transform: scale(1.12) !important;
  }

  /* Positions horizontales et verticales (tes valeurs préférées) */
  #hotspot-accueil     { top: 5% !important; left: 50% !important; transform: translateX(-50%) !important; }
  #hotspot-sculptures  { top: 25% !important; left: 10% !important; }
  #hotspot-peintures   { top: 25% !important; right: 10% !important; }
  #hotspot-expos       { top: 60% !important; left: 10% !important; }
  #hotspot-textes      { top: 60% !important; right: 10% !important; }
  #hotspot-contact     { top: 80% !important; left: 50% !important; transform: translateX(-50%) !important; }

  /* ====================== NOM DE L'ARTISTE ====================== */
  #artist-name {
    font-size: 14vw !important;        /* ← très gros en portrait */
    line-height: 1.0 !important;
    white-space: pre-line !important;  /* force JEAN sur une ligne + CORRÈZE sur la suivante */
    text-align: center !important;
    z-index: 30 !important;
  }

  /* ====================== TITRES DES PAGES ====================== */
  /* Accueil, Biographie, Textes, Contact, etc. */
  .page-title,
  #modal-title {
    font-size: 6.8vw !important;       /* ← beaucoup plus gros qu'avant */
    margin-top: 2vh !important;
    margin-bottom: 3vh !important;
  }

  /* ====================== LISTE DES TEXTES ====================== */
  /* Réduction de l'espace entre les titres */
  .text-list .text-link {
    font-size: 5.2vw !important;       /* ← titres des textes plus gros */
    margin-bottom: 1.1vh !important;   /* ← espace entre chaque texte réduit */
  }

  .text-author {
    font-size: 4vw !important;
  }

  /* ====================== CADRES DE TEXTE ====================== */
  /* Pages Accueil, Biographie, Textes, modal */
  .content-page,
  #text-modal {
    inset: 4vh 2vw !important;
    padding: 3vh 3vw 5vh 3vw !important;
  }

  .page-content,
  #modal-content {
    font-size: 3.8vw !important;
    line-height: 1.6 !important;
    padding: 0 !important;
    text-align: justify !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
  }

  /* ====================== BIOGRAPHIE : h2 et listes ====================== */
  #expos-page .page-content h2,
  #expos-page .page-content h3 {
    font-size: 4.2vw !important;
    margin-top: 2vh !important;
    margin-bottom: 1vh !important;
    font-family: 'Playfair Display', serif;
    color: #ffd700;
  }

  #expos-page .page-content ul,
  #expos-page .page-content ol {
    padding-left: 5vw !important;
    margin: 0.6rem 0 !important;
  }

  #expos-page .page-content ul ul,
  #expos-page .page-content ol ol {
    padding-left: 3vw !important;
    margin: 0.3rem 0 !important;
  }

  #expos-page .page-content li {
    margin-bottom: 0.25rem !important;
    font-size: 3.8vw !important;
    line-height: 1.3 !important;
  }

  #expos-page .page-content p {
    margin-bottom: 0.5em !important;
  }
}

/* ============================================================= */
/* PAYSAGE MOBILE - Forçage très fort pour que rien ne grossisse */
/* ============================================================= */
@media (max-width: 1024px) and (orientation: landscape) {

  /* ====================== HOTSPOTS - BLOQUÉS PETITS ====================== */
  .hotspot {
    width: 82px !important;            /* ← taille fixe, ne peut plus grossir */
    height: 82px !important;
    font-size: 11px !important;
    opacity: 0.75 !important;
  }

  .hotspot:hover {
    transform: scale(1.1) !important;
  }

  /* Positions légèrement remontées en paysage */
  #hotspot-accueil     { top: 5% !important; left: 50% !important; transform: translateX(-50%) !important; }
  #hotspot-sculptures  { top: 15% !important; left: 28% !important; }
  #hotspot-peintures   { top: 15% !important; right: 28% !important; }
  #hotspot-expos       { top: 60% !important; left: 28% !important; }
  #hotspot-textes      { top: 60% !important; right: 28% !important; }
  #hotspot-contact     { top: 75% !important; left: 50% !important; transform: translateX(-50%) !important; }

  /* ====================== NOM DE L'ARTISTE ====================== */
  #artist-name {
    font-size: 7vw !important;
    white-space: nowrap !important;    /* une seule ligne en paysage */
    z-index: 30 !important;
  }

  /* ====================== TITRES DES PAGES ====================== */
  .page-title,
  #modal-title {
    font-size: 5.8vw !important;
  }

  /* ====================== LISTE DES TEXTES ====================== */
  .text-list .text-link {
    font-size: 4.4vw !important;
    margin-bottom: 1.0vh !important;
  }

  .text-author {
    font-size: 3.2vw !important;       /* corrige la taille trop petite en paysage */
  }

  /* ====================== CADRES DE TEXTE ====================== */
  .content-page,
  #text-modal {
    inset: 3vh 2vw !important;
    padding: 2.5vh 3vw 4vh 3vw !important;
  }

  .page-content,
  #modal-content {
    font-size: 2.8vw !important;
    line-height: 1.55 !important;
    padding: 0 !important;
  }

  /* ====================== BIOGRAPHIE : h2 et listes ====================== */
  #expos-page .page-content h2,
  #expos-page .page-content h3 {
    font-size: 3vw !important;
    margin-top: 1.5vh !important;
    margin-bottom: 0.8vh !important;
    font-family: "Playfair Display", serif;
    color: #ffd700;
  }

  #expos-page .page-content ul,
  #expos-page .page-content ol {
    padding-left: 4vw !important;
    margin: 0.4rem 0 !important;
  }

  #expos-page .page-content ul ul,
  #expos-page .page-content ol ol {
    padding-left: 2vw !important;
    margin: 0.2rem 0 !important;
  }

  #expos-page .page-content li {
    margin-bottom: 0.15rem !important;
    font-size: 2.8vw !important;
    line-height: 1.3 !important;
  }

  #expos-page .page-content p {
    margin-bottom: 0.4em !important;
  }
}

/* ============================================================ */
/* GALERIE (peintures.html + sculptures.html)                   */
/* ============================================================ */

/* ── Paysage mobile : ruban VERTICAL à droite ── */
@media (max-width: 1024px) and (orientation: landscape) {

  /* Flèches ruban inutiles sur mobile — on glisse */
  #thumb-scroll    { display: none !important; }

  /* Flèches nav : visibles en paysage, plus petites */
  .gallery-nav-btn {
    font-size: 55px !important;
    opacity: 0.8 !important;
  }

  /* Zone image : toute la hauteur, largeur réduite */
  #main-view {
    width: 78vw !important;
    height: 100vh !important;
  }

  /* Ruban vertical fixé à droite */
  #thumbs {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: 22vw !important;
    height: 100vh !important;
    flex-direction: column !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-shadow: -5px 0 20px rgba(0, 0, 0, 0.5) !important;
    touch-action: pan-y;
  }

  .thumb {
    flex: 0 0 auto !important;
    width: 90% !important;
    height: calc(22vw * 0.85) !important;
    margin: 4px auto !important;
  }

  /* Watermark dans la zone image (ruban vertical à droite) */
  .watermark {
    left: 39vw !important;   /* centré dans la zone image 78vw */
    bottom: 6px !important;
  }

  /* Plein écran mobile paysage */
  #fullscreen-prev,
  #fullscreen-next  { font-size: 55px !important; }
  .fs-watermark     { font-size: 12px !important; }

  /* ── Modal texte paysage ── */
  #text-modal {
    inset: 2vh 3vw !important;
    padding: 2vh 4vw !important;
  }

  #modal-title {
    font-size: 4vw !important;
    margin-top: 0.3vh !important;
    margin-bottom: 0.8vh !important;
  }

  #modal-author {
    font-size: 3vw !important;
    margin-bottom: 1vh !important;
  }

  #modal-content {
    font-size: 2.8vw !important;
    line-height: 1.45 !important;
    padding: 0 0.5rem !important;
  }

  #modal-content p {
    margin-bottom: 0.5em !important;
  }
}

/* ── Portrait mobile : ruban HORIZONTAL en bas, scroll au doigt ── */
@media (max-width: 768px) and (orientation: portrait) {
  /* Flèches ruban inutiles sur mobile — on glisse */
  #thumb-scroll { display: none !important; }
  #thumbs { touch-action: pan-x; }

  /* Flèches nav : visibles en portrait, plus petites */
  .gallery-nav-btn {
    font-size: 55px !important;
    opacity: 0.8 !important;
    top: 40% !important;     /* un peu plus haut pour éviter le ruban bas */
  }

  /* Watermark légèrement au-dessus du ruban bas (20vh) */
  .watermark {
    bottom: calc(20vh + 6px) !important;
  }

  /* ── Page contact portrait ── */
  #contact-page {
    padding: 2vh 4vw 3vh 4vw !important;
  }
  #contact-page .page-title {
    margin-top: 0.5vh !important;
    margin-bottom: 1vh !important;
  }
  .form-group {
    margin-bottom: 1vh !important;
  }
  .form-group input,
  .form-group textarea {
    padding: 0.8vh 3vw !important;
    font-size: 3.8vw !important;
  }
  .form-group textarea {
    min-height: 12vh !important;
  }
  #cf-submit {
    font-size: 3.5vw !important;
    padding: 1vh 6vw !important;
  }

  /* ── Modal texte portrait ── */
  #text-modal {
    inset: 3vh 2vw !important;        /* cadre plus grand, moins de marges */
    padding: 3vh 4vw 3vh 4vw !important;
  }

  #modal-title {
    font-size: 5.5vw !important;      /* lisible sur mobile */
    margin-top: 0.5vh !important;
    margin-bottom: 1vh !important;
  }

  #modal-author {
    font-size: 4vw !important;
    margin-bottom: 1.5vh !important;
  }

  #modal-content {
    font-size: 3.8vw !important;
    line-height: 1.55 !important;
    padding: 0 0.5rem !important;
  }

  #modal-content p {
    margin-bottom: 0.6em !important;
  }

  /* Autoplay recentré en bas en portrait */
  #fullscreen-autoplay {
    top: auto !important;
    bottom: 40px !important;
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  /* Flèches cachées pendant le diaporama en portrait */
  #fullscreen-view.autoplay-active #fullscreen-prev,
  #fullscreen-view.autoplay-active #fullscreen-next {
    display: none !important;
  }
}