/* =======================================================================
   RU Design : COQUE MOBILE (standard mobile RU, 2026-10-02)

   Copie fidèle du comportement de RU Community (classe rucom-shell-mode),
   complétée par les protections de Player One (mobile.css). Document maître :
   « Standard mobile RU » ; version technique : doc-ru-design/STANDARD-MOBILE.md.

   Structure attendue (rendue par ru_design_coque_mobile() ou à la main) :

     <body class="... rud-coque">
       <div class="rud-coque-app" data-rud-coque="slug">
         <div class="rud-coque-defil">          le SEUL élément qui défile
           <header class="rud-coque-haut">...</header>   collée, se retire
           <main class="rud-coque-contenu">...</main>
         </div>
         <nav class="rud-coque-bas">...</nav>     barre du bas, immobile
       </div>

   Principe : sur téléphone et tablette (999 px et moins), la PAGE ne défile
   plus. Le cadre .rud-coque-app est fixé aux quatre bords de l'écran visible
   (position:fixed + inset:0), SANS hauteur explicite et SANS unité d'écran
   (ni vh, ni dvh, ni svh). Seule la colonne .rud-coque-defil défile. La barre
   d'adresse du navigateur cesse alors d'apparaître et de disparaître, donc la
   barre du bas ne monte ni ne descend plus.

   Ordinateur (1000 px et plus) : rien ne change, la fenêtre défile, la
   barre du bas est cachée.

   Couleurs : jetons --ru-* de RU Design seulement (charte bleue).
   ======================================================================= */

/* --- 0. Jetons de la coque ------------------------------------------- */
.rud-coque-app{
  --rud-coque-bas-h:48px;          /* hauteur d'une cible de la barre du bas */
  --rud-coque-cible:44px;          /* cible tactile minimale */
  --rud-coque-marge:16px;          /* marge latérale des écrans */
  --rud-coque-air:16px;            /* air sous le dernier contenu */
}

/* --- 1. Barre du bas : cinq cibles de 48 px, onglet actif visible ----- */
.rud-coque-bas{
  display:none;                    /* ordinateur : cachée */
  box-sizing:border-box;width:100%;margin:0;
  justify-content:space-around;align-items:center;
  padding:4px 6px;
  border-top:1px solid var(--ru-bord,rgba(0,0,0,.10));
  background:var(--ru-fond,#FFFFFF);
  font-family:var(--ru-police,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);
  -webkit-tap-highlight-color:transparent;
}
.rud-coque-bas .rud-coque-onglet{
  flex:1 1 0;height:var(--rud-coque-bas-h,48px);min-width:44px;max-width:96px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:none;border:0;padding:0;margin:0;position:relative;cursor:pointer;
  color:var(--ru-texte,#0e2438);text-decoration:none;touch-action:manipulation;
  font:inherit;
}
.rud-coque-bas .rud-coque-onglet svg{width:26px;height:26px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.rud-coque-bas .rud-coque-libelle{font-size:11px;line-height:13px;font-weight:600;max-width:100%;overflow:hidden;
  white-space:nowrap;text-overflow:ellipsis}
.rud-coque-bas.rud-coque-sans-libelle .rud-coque-libelle{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.rud-coque-bas.rud-coque-avec-libelle .rud-coque-onglet svg{width:24px;height:24px}
/* Onglet central (créer, publier) : pastille accent derrière l'icône. */
.rud-coque-bas .rud-coque-onglet.rud-coque-central{isolation:isolate}
.rud-coque-bas .rud-coque-onglet.rud-coque-central::before{content:"";position:absolute;left:50%;top:50%;width:44px;height:34px;
  margin:-17px 0 0 -22px;border-radius:12px;background:var(--ru-accent,#1d5c8f);z-index:-1}
/* Avec libellés : la pastille entoure l'icône seulement, jamais le texte. */
.rud-coque-bas.rud-coque-avec-libelle .rud-coque-onglet.rud-coque-central::before{top:3px;height:27px;margin-top:0;border-radius:10px}
.rud-coque-bas .rud-coque-onglet.rud-coque-central svg{color:var(--ru-sur-accent,#FFFFFF)}
/* Onglet actif : trait plus épais + petit trait accent sous l'icône. */
.rud-coque-bas .rud-coque-onglet[aria-current="page"],
.rud-coque-bas .rud-coque-onglet.rud-coque-actif{color:var(--ru-accent,#1d5c8f)}
.rud-coque-bas .rud-coque-onglet[aria-current="page"] svg,
.rud-coque-bas .rud-coque-onglet.rud-coque-actif svg{stroke-width:2.5}
.rud-coque-bas .rud-coque-onglet[aria-current="page"]::after,
.rud-coque-bas .rud-coque-onglet.rud-coque-actif::after{content:"";position:absolute;left:50%;bottom:2px;width:22px;height:3px;
  margin-left:-11px;border-radius:3px;background:var(--ru-accent,#1d5c8f)}
.rud-coque-bas .rud-coque-onglet:focus-visible{outline:2px solid var(--ru-texte,#0e2438);outline-offset:-4px;border-radius:12px}
/* Pastille de compte (notifications) : jamais une couleur vive criarde. */
.rud-coque-bas .rud-coque-pastille{position:absolute;top:4px;left:calc(50% + 6px);min-width:16px;height:16px;padding:0 4px;
  box-sizing:border-box;border-radius:8px;background:var(--ru-accent,#1d5c8f);color:var(--ru-sur-accent,#FFFFFF);
  font-size:10px;line-height:16px;font-weight:700;text-align:center}
/* Clavier ouvert : la barre du bas se retire (elle ne monte pas sur le clavier). */
html.rud-coque-kb .rud-coque-bas{display:none !important}

/* --- 2. Barre du haut ------------------------------------------------- */
.rud-coque-haut{
  box-sizing:border-box;display:flex;align-items:center;gap:8px;
  min-height:52px;padding:8px var(--rud-coque-marge,16px);
  background:var(--ru-fond,#FFFFFF);border-bottom:1px solid var(--ru-bord,rgba(0,0,0,.10));
  z-index:30;
}
.rud-coque-haut :is(a,button)[class*="rud-coque-ic"]{width:44px;height:44px;min-width:44px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:0;background:none;
  color:var(--ru-texte,#0e2438);padding:10px;box-sizing:border-box}
.rud-coque-haut :is(a,button)[class*="rud-coque-ic"]:active{background:var(--ru-surface,#F6F6F4)}

/* --- 3. Protections (Player One) : jamais de défilement de côté --------
   Téléphone et tablette seulement (livraison 4) : sur ordinateur, la page
   d'un logiciel dans la coque reste exactement comme avant. */
@media (max-width:999px){
  .rud-coque-app{overflow-x:hidden;overflow-x:clip;overflow-wrap:break-word}
  .rud-coque-contenu :is(p,li,h1,h2,h3,h4,figcaption,blockquote,td,th,dd,dt,a){overflow-wrap:anywhere}
  /* Livraison 5 : :where() (poids nul) pour que la taille donnée par un logiciel (logo, drapeau, icône) passe devant ce filet. */
  :where(.rud-coque-contenu) :where(img,video,iframe,svg,canvas,table,embed,object){max-width:100%}
  :where(.rud-coque-contenu) :where(img,video){height:auto}
  .rud-coque-contenu pre{max-width:100%;overflow-x:auto}
  .rud-coque-contenu table{display:block;overflow-x:auto}
}

@media (max-width:999px){
  /* --- 4. LE CADRE FIXE ET SON DÉFILEUR (cœur du standard) ------------ */
  /* Le fond ne se verrouille QUE si le cadre de la coque est bien dans la page
     (classe posée par le JS) : un logiciel allumé sans cadre défile normalement. */
  html.rud-coque-mode,
  html.rud-coque-mode body.rud-coque{height:100%;min-height:0;overflow:hidden;overscroll-behavior:none}
  body.rud-coque .rud-coque-app{
    /* Ancrage aux DEUX bords : top:0 ET bottom:0 (inset:0). AUCUNE hauteur
       explicite, AUCUNE unité d'écran : une hauteur explicite annulerait
       bottom:0 et laisserait une bande blanche sous la barre du bas. */
    position:fixed;
    inset:0;
    height:auto;
    min-height:0;margin:0;max-width:none;box-sizing:border-box;
    display:flex;flex-direction:column;overflow:hidden;padding:0;overscroll-behavior:none;
    background:var(--ru-fond,#FFFFFF);
    z-index:1;
  }
  /* La colonne qui défile : le VRAI défileur (voir RUDCoque.defileur()). */
  body.rud-coque .rud-coque-defil{
    flex:1 1 auto;min-height:0;
    overflow-y:auto;overflow-x:hidden;overflow-x:clip;
    -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  }
  /* Padding du contenu : le dernier bloc n'est jamais collé à la barre. */
  body.rud-coque .rud-coque-contenu{padding-bottom:var(--rud-coque-air,16px)}
  body.rud-coque .rud-coque-app.rud-coque-marges .rud-coque-contenu{
    padding-left:var(--rud-coque-marge,16px);padding-right:var(--rud-coque-marge,16px);box-sizing:border-box}
  /* Barre du haut : collée en haut de la colonne qui défile (pas de la fenêtre). */
  body.rud-coque .rud-coque-haut{position:sticky;top:0;transition:transform .22s ease;will-change:transform}
  body.rud-coque .rud-coque-haut.rud-coque-haut-cache{transform:translateY(-100%)}
  /* Barre du bas : dernier élément de la colonne, collée au vrai bas.
     position:static : ni fixed, ni transform, ni marge de sécurité. */
  body.rud-coque .rud-coque-bas{display:flex;position:static;flex:0 0 auto;left:auto;right:auto;bottom:auto;
    max-width:none;transform:none;z-index:auto}
  /* Barre d'administration WordPress : on ne rogne la coque QUE si la barre
     est réellement affichée (classe et hauteur mesurées par le JS). */
  html.rud-coque-ab-on body.rud-coque .rud-coque-app{top:var(--rud-coque-ab,0px)}

  /* --- 5. Verrou du fond : fenêtre modale, tiroir ou menu ouvert -------- */
  html.rud-coque-verrou body.rud-coque .rud-coque-defil{overflow:hidden !important}
  .rud-coque-modale,.rud-coque-tiroir,.rud-coque-feuille{overscroll-behavior:contain}
}

/* --- 6. Fenêtres modales en feuille du bas (600 px et moins) ---------- */

/* Barre d'administration WordPress : sous 600 px elle n'est plus fixe. */
@media screen and (max-width:600px){
  body.admin-bar.rud-coque .rud-coque-haut{top:0}
}

@media (max-width:600px){
  .rud-coque-feuille{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;max-width:none;box-sizing:border-box;
    margin:0;border-radius:18px 18px 0 0;max-height:calc(100% - 24px);overflow:auto;
    background:var(--ru-fond,#FFFFFF);padding:16px var(--rud-coque-marge,16px) 22px;z-index:1600;
    box-shadow:0 0 0 100vmax rgba(14,36,56,.35);animation:rudCoqueFeuille .22s ease}
}
@keyframes rudCoqueFeuille{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}

/* --- 7. Zones de sécurité : SEULEMENT en mode application installée ----
   Dans le navigateur, la balise viewport n'a PAS viewport-fit=cover : le
   navigateur garde lui-même la page hors de l'encoche et de la zone de geste,
   et env(safe-area-inset-*) vaut 0. Les brancher là a produit, sur RU
   Community, une bande blanche vide sous la barre du bas sur certains
   navigateurs de téléphone. En mode application installée (display-mode
   standalone), le JS ajoute viewport-fit=cover et ces marges deviennent
   nécessaires : la barre du bas grandit de la zone de geste. */
@media (display-mode:standalone) and (max-width:999px){
  html.rud-coque-app-installee body.rud-coque .rud-coque-app{padding-top:env(safe-area-inset-top,0px);
    padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
  html.rud-coque-app-installee body.rud-coque .rud-coque-bas{padding-bottom:calc(4px + env(safe-area-inset-bottom,0px))}
  html.rud-coque-app-installee.rud-coque-kb body.rud-coque .rud-coque-app{padding-bottom:0}
}

/* --- 8. Champs à 16 px sur écran tactile : sous 16 px, certains
   téléphones zooment toute la page au toucher d'un champ. --------------- */
@media (pointer:coarse){
  .rud-coque-app :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),textarea,select),
  .rud-coque-feuille :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),textarea,select),
  .rud-coque-modale :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),textarea,select),
  .rud-coque-app [contenteditable="true"]{font-size:16px !important}
}

/* --- 9. Écrans tactiles : pas de survol, pas de reflet au toucher ------ */
@media (hover:none){
  .rud-coque-app,.rud-coque-feuille,.rud-coque-modale{-webkit-tap-highlight-color:transparent}
  .rud-coque-app :is(a,button,summary,label,[role="button"]){touch-action:manipulation}
}

/* --- 10. Cibles tactiles d'au moins 44 px dans la coque -------------- */
@media (max-width:999px){
  .rud-coque-app :is(.rud-coque-cible,.rud-coque-contenu button,.rud-coque-contenu .button,.rud-coque-contenu [role="button"]){
    min-height:44px}
  .rud-coque-contenu :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),select){
    min-height:44px;box-sizing:border-box}
  .rud-coque-app .rud-coque-onglets{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .rud-coque-app .rud-coque-onglets::-webkit-scrollbar{display:none}
  .rud-coque-app .rud-coque-onglets>*{flex:0 0 auto;min-height:44px;display:inline-flex;align-items:center;padding:0 14px}
}

/* --- 11. Mouvement réduit ---------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .rud-coque-haut{transition:none !important}
  .rud-coque-feuille{animation:none !important}
}

/* --- 12. Invitation d'installation (site installable) ------------------
   Discrète : petite carte au-dessus de la barre du bas, fermable, jamais en
   plein écran. */
.rud-pwa-invite{position:fixed;left:12px;right:12px;bottom:calc(12px + var(--rud-pwa-decal,0px));z-index:1500;
  max-width:420px;margin:0 auto;box-sizing:border-box;display:flex;align-items:center;gap:12px;
  padding:12px 12px 12px 14px;border-radius:var(--ru-rayon-lg,16px);background:var(--ru-fond,#FFFFFF);
  color:var(--ru-texte,#0e2438);border:1px solid var(--ru-bord,rgba(0,0,0,.10));box-shadow:var(--ru-ombre,0 8px 24px rgba(0,0,0,.08));
  font:14px/1.4 var(--ru-police,system-ui,sans-serif)}
.rud-pwa-invite[hidden]{display:none}
.rud-pwa-invite p{margin:0;flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.rud-pwa-invite button{min-height:44px;min-width:44px;border-radius:var(--ru-rayon,10px);font:600 14px/1 var(--ru-police,system-ui,sans-serif);cursor:pointer}
.rud-pwa-invite .rud-pwa-oui{background:var(--ru-accent,#1d5c8f);color:var(--ru-sur-accent,#FFFFFF);border:1px solid var(--ru-accent,#1d5c8f);padding:0 14px}
.rud-pwa-invite .rud-pwa-non{background:none;border:0;color:var(--ru-discret,#6b7280);padding:0 8px}
@media (max-width:999px){
  body.rud-coque .rud-pwa-invite{--rud-pwa-decal:60px}
}