/* ============================================================
   La Dragonnerie — couche MOBILE (chargée en dernier).
   Additive : ne réécrit aucun autre fichier, gagne par l'ordre
   de cascade (spécificité égale) sur parchemin.css/energie/wiki.
   Deux axes :
     1) En-tête → menu « hamburger » (remplace la nav qui
        s'empilait sur 2-3 rangées, cf. capture mobile).
     2) Durcissement responsive global (débordements, champs,
        marges, cibles tactiles) jusqu'à ~560px.
   ============================================================ */

/* ------------------------------------------------------------
   1. EN-TÊTE — bouton « hamburger » + tiroir de navigation
   Le tiroir est piloté par <details class="nav-burger"> : aucun
   JS (compatible CSP en mode enforce). Le <nav.bandeau-nav> doit
   suivre immédiatement le <details> dans le HTML.
   ------------------------------------------------------------ */
.nav-burger{ display:none; }            /* invisible sur grand écran */

@media (max-width:820px){

  .bandeau{ flex-wrap:nowrap; padding:6px 12px; gap:6px; min-height:54px; }
  .bandeau .brand{
    margin-right:0; font-size:17px; min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }

  /* Le bouton hamburger (summary du <details>) */
  .nav-burger{ display:block; position:static; order:3; margin:0; }
  .nav-burger > summary{
    list-style:none; cursor:pointer; user-select:none;
    width:44px; height:44px; display:flex; align-items:center; justify-content:center;
    border-radius:10px; border:1px solid transparent; color:var(--encre);
    font-size:0; line-height:1;
  }
  .nav-burger > summary::-webkit-details-marker{ display:none; }
  .nav-burger > summary::marker{ content:""; }
  .nav-burger > summary::before{ content:"\2630"; font-size:23px; }           /* ☰ */
  .nav-burger[open] > summary::before{ content:"\2715"; font-size:21px; }     /* ✕ */
  .nav-burger > summary:hover{ background:rgba(42,29,14,.10); }
  .nav-burger[open] > summary{ background:rgba(42,29,14,.16); border-color:var(--or-fonce); }

  /* Les actions (cloche/profil ou connexion) restent à droite, juste avant le burger */
  .bandeau-actions{ order:2; margin-left:auto; gap:7px; }

  /* La nav inline est masquée ; elle réapparaît en tiroir quand le burger est ouvert.
     On bat ici la règle @media(max-width:780px) de parchemin.css (order:3 / width:100%). */
  .bandeau-nav{ display:none; }
  .nav-burger[open] + .bandeau-nav{
    display:flex; flex-direction:column; align-items:stretch; gap:2px;
    order:0; width:auto; margin:0; padding:8px 10px 12px;
    position:absolute; left:0; right:0; top:100%; z-index:95;
    background:linear-gradient(180deg,#efe0b8,#e7d4a2);
    border-top:1px solid rgba(255,255,255,.45);
    border-bottom:3px solid var(--or-fonce);
    box-shadow:0 16px 34px rgba(0,0,0,.42);
    max-height:calc(100vh - 54px); overflow-y:auto;
  }
  .nav-burger[open] + .bandeau-nav a{
    opacity:1; width:100%; box-sizing:border-box;
    font-size:16px; font-weight:600; padding:13px 14px; border-radius:9px;
    border-bottom:1px solid rgba(120,90,30,.15);
  }
  .nav-burger[open] + .bandeau-nav a:last-child{ border-bottom:0; }
  .nav-burger[open] + .bandeau-nav a::after{ display:none; }     /* pas de soulignement animé */
  .nav-burger[open] + .bandeau-nav a.actif{ background:rgba(42,29,14,.12); }
  .nav-burger[open] + .bandeau-nav a.nav-enligne{ color:var(--lien); }
}

/* Avatar seul (sans nom) dès qu'on est en burger : gagne de la place dans la barre. */
@media (max-width:620px){
  .nav-profil .np-id{ display:none; }
  .nav-profil > summary{ padding:4px 7px 4px 5px; }
  .bandeau-actions .bouton{ padding:7px 12px; font-size:13px; }
}

/* ------------------------------------------------------------
   2. DURCISSEMENT RESPONSIVE GLOBAL
   ------------------------------------------------------------ */

/* Aucune barre de défilement horizontale parasite : on coupe les
   débordements au niveau du conteneur de page (pas un ancêtre du
   header sticky → aucun effet de bord sur la barre collante). */
.page{ overflow-x:clip; }

@media (max-width:760px){
  /* On récupère de la largeur utile. */
  .page{ width:94%; padding:18px 0 40px; }
  .parchemin{ padding:18px 16px; border-radius:12px; }
  .parchemin .parchemin{ padding:14px 13px; }
  h1{ font-size:25px; }
  h2{ font-size:20px; }
}

@media (max-width:560px){
  /* Le min-width:240px global des champs faisait déborder/chevaucher
     dès qu'il y avait 2 champs côte à côte ou un libellé long. */
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea{ min-width:0; }

  /* Mots/URL très longs : on casse plutôt que de pousser la page. */
  .msg-contenu, .rendu, .wk-contenu, .wk-page, .pf-quote, .crea-desc, .gaz-corps .txt{ overflow-wrap:break-word; word-break:break-word; }

  /* Tables : on resserre (elles restent défilables via .table-wrap). */
  table{ font-size:12.5px; }
  table th, table td{ padding:8px 9px; }

  /* Boutons pleine largeur plus confortables au pouce dans les formulaires verticaux. */
  .auth-form .bouton, .arene-cible .bouton{ min-height:44px; }
}

/* Indentation des arbres (wiki/forum) : à plat sur petit écran pour
   ne pas pousser le contenu hors cadre (marge inline → !important). */
@media (max-width:560px){
  .wk-arbre .wk-cat[style]{ margin-left:6px !important; }
}