/* Revnchi — confort tablette (v2, 5 novembre 2026).
   La taille sur tablette est réglée par tablette.js (l'app est agrandie comme une app iPhone sur iPad).
   Quand l'app reste une carte au milieu (tablette couchée, ordinateur), on habille les marges :
   le ciel continue autour de l'app — ciel clair le jour, nuit étoilée la nuit, une constellation de chaque côté.
   Téléphone tourné à l'horizontale : on invite à le remettre droit plutôt que d'afficher un écran écrasé.
   Note : jour.js force la couleur de fond de html et body en ligne (!important), d'où le calque body:before
   en z-index 0 — tous les enfants directs de body sont positionnés, ils passent donc au-dessus. */

/* partout : la page entière ne rebondit pas quand on tire dessus, comme dans une app */
html,body{overscroll-behavior:none}

@media (min-width:700px){
  /* écrans sans barre du bas (bienvenue, présentation, questionnaire) : ils font déjà toute la hauteur,
     la marge de 24 px autour de la carte les faisait dépasser de 48 px et la page glissait */
  body:has(> .app.no-nav){padding-top:0;padding-bottom:0}

  :root{
    --tab-c:clamp(80px,calc(50vw - 330px),230px);
    --tab-left:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140'%3E%3Cg stroke='%23a8735a' stroke-width='.6' stroke-opacity='.55' fill='none'%3E%3Cpath d='M18 12 L42 30 L36 58 L64 74 L58 104 L82 128'/%3E%3Cpath d='M42 30 L72 22'/%3E%3C/g%3E%3Cg fill='%23a8735a'%3E%3Ccircle cx='18' cy='12' r='1.6'/%3E%3Ccircle cx='42' cy='30' r='2.2'/%3E%3Ccircle cx='72' cy='22' r='1.4'/%3E%3Ccircle cx='36' cy='58' r='1.8'/%3E%3Ccircle cx='64' cy='74' r='2.4'/%3E%3Ccircle cx='58' cy='104' r='1.6'/%3E%3Ccircle cx='82' cy='128' r='2'/%3E%3C/g%3E%3C/svg%3E");
    --tab-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140'%3E%3Cg stroke='%23a8735a' stroke-width='.6' stroke-opacity='.55' fill='none'%3E%3Cpath d='M20 120 L30 86 L58 70 L50 40 L76 18'/%3E%3Cpath d='M58 70 L86 82 L80 112'/%3E%3C/g%3E%3Cg fill='%23a8735a'%3E%3Ccircle cx='20' cy='120' r='1.8'/%3E%3Ccircle cx='30' cy='86' r='1.5'/%3E%3Ccircle cx='58' cy='70' r='2.4'/%3E%3Ccircle cx='50' cy='40' r='1.6'/%3E%3Ccircle cx='76' cy='18' r='2.1'/%3E%3Ccircle cx='86' cy='82' r='1.4'/%3E%3Ccircle cx='80' cy='112' r='1.8'/%3E%3C/g%3E%3C/svg%3E");
    --tab-sky:radial-gradient(circle at 84% 6%,#fff6dccc 0,#fff3d400 24vmax),linear-gradient(180deg,#bcd7ea 0%,#d6e2ea 36%,#f1e4d6 76%,#f6e7d8 100%);
  }
  html.revnchi-night{
    --tab-left:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140'%3E%3Cg stroke='%23f1cf9c' stroke-width='.6' stroke-opacity='.55' fill='none'%3E%3Cpath d='M18 12 L42 30 L36 58 L64 74 L58 104 L82 128'/%3E%3Cpath d='M42 30 L72 22'/%3E%3C/g%3E%3Cg fill='%23f1cf9c'%3E%3Ccircle cx='18' cy='12' r='1.6'/%3E%3Ccircle cx='42' cy='30' r='2.2'/%3E%3Ccircle cx='72' cy='22' r='1.4'/%3E%3Ccircle cx='36' cy='58' r='1.8'/%3E%3Ccircle cx='64' cy='74' r='2.4'/%3E%3Ccircle cx='58' cy='104' r='1.6'/%3E%3Ccircle cx='82' cy='128' r='2'/%3E%3C/g%3E%3C/svg%3E");
    --tab-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140'%3E%3Cg stroke='%23f1cf9c' stroke-width='.6' stroke-opacity='.55' fill='none'%3E%3Cpath d='M20 120 L30 86 L58 70 L50 40 L76 18'/%3E%3Cpath d='M58 70 L86 82 L80 112'/%3E%3C/g%3E%3Cg fill='%23f1cf9c'%3E%3Ccircle cx='20' cy='120' r='1.8'/%3E%3Ccircle cx='30' cy='86' r='1.5'/%3E%3Ccircle cx='58' cy='70' r='2.4'/%3E%3Ccircle cx='50' cy='40' r='1.6'/%3E%3Ccircle cx='76' cy='18' r='2.1'/%3E%3Ccircle cx='86' cy='82' r='1.4'/%3E%3Ccircle cx='80' cy='112' r='1.8'/%3E%3C/g%3E%3C/svg%3E");
    --tab-sky:
      radial-gradient(1px 1px at 12% 18%,#fff3dfcc 50%,#0000 51%),
      radial-gradient(1.5px 1.5px at 22% 64%,#f6d9b8b3 50%,#0000 51%),
      radial-gradient(1px 1px at 8% 82%,#fff3df99 50%,#0000 51%),
      radial-gradient(1.5px 1.5px at 30% 36%,#fff3dfb3 50%,#0000 51%),
      radial-gradient(1px 1px at 4% 46%,#fff3df99 50%,#0000 51%),
      radial-gradient(1px 1px at 78% 12%,#fff3dfcc 50%,#0000 51%),
      radial-gradient(1.5px 1.5px at 90% 30%,#f6d9b8b3 50%,#0000 51%),
      radial-gradient(1px 1px at 72% 78%,#fff3df99 50%,#0000 51%),
      radial-gradient(1.5px 1.5px at 94% 88%,#fff3dfb3 50%,#0000 51%),
      radial-gradient(1px 1px at 97% 58%,#fff3df99 50%,#0000 51%),
      radial-gradient(circle at 50% 40%,#5a2c3a 0,#5a2c3a00 60vmax),
      linear-gradient(180deg,#24111b 0%,#3a1c27 55%,#4a2430 100%);
  }
  /* le ciel qui entoure l'app, avec une constellation dans chaque marge */
  body:before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
    background:
      var(--tab-left) no-repeat calc(25vw - 140px - var(--tab-c) / 2) 14vh / var(--tab-c) auto,
      var(--tab-right) no-repeat calc(75vw + 140px - var(--tab-c) / 2) 52vh / var(--tab-c) auto,
      var(--tab-sky)}
}

/* téléphone à l'horizontale (pas une tablette, pas un clavier ouvert) : on invite à le redresser */
@media (orientation:landscape) and (max-height:500px) and (min-aspect-ratio:16/10) and (hover:none){
  html:after{content:"Tourne ton téléphone à la verticale 🌙\A Revnchi se savoure en portrait.";white-space:pre-line;position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;background:#2a1520;color:#fbefe3;font:400 20px/1.5 var(--serif,Georgia,serif)}
}

/* tablette debout (agrandie par tablette.js à 620–680 points de large) : l'app prend toute la largeur,
   et la roue du cycle ne grandit plus avec l'écran — c'est elle qui rallongeait le plus l'accueil */
@media (max-width:699px){
  html.rv-tablette .app{width:100%!important;max-width:none!important}
  html.rv-tablette .bottom-nav{max-width:none!important}
  html.rv-tablette #screen-home.lunar-home .home-panel .cycle-wrap{width:min(calc(100% + 38px),420px);margin-left:auto;margin-right:auto}
}