/* reviser-serie.css : feuille du MODE SÉRIE des moteurs QCM (brique reviser-serie.js, qui porte le
   contrat complet : attributs, appels, raisons). MODÈLE COMMUN, recopié dans public/assets/ de chaque
   site par generer-assets (clé `partages` du registre) ; une copie de site ne s'édite pas.

   TOUT est sous la requête média ci-dessous, la même que SEUIL dans reviser-serie.js : sur ordinateur
   et tablette, aucune règle ne s'applique, l'affichage ne change pas. Le mode n'existe que lorsque
   la brique a posé html.rv-serie (une série en cours, écran de résultat exclu).
   Les !important sont bornés à cette requête : les moteurs React posent leurs styles en ligne.
   Pleine largeur par annulation du padding de l'hôte, jamais par 100vw ni par des marges négatives
   (INVARIANTS § 30). Barres collées (sticky), jamais fixées (fixed) : voir reviser-serie.js.
   Jetons : --rv-serie-fond (fond de la page et des barres) et --rv-serie-ligne (filet de la barre
   d'actions), à déclarer par un site dont la feuille ne connaît ni --bg ni --line.
   env(safe-area-inset-*) n'a de valeur sur iPhone qu'avec viewport-fit=cover dans la balise viewport. */

@media (max-width: 760px) {
  /* En-tête, pied de page, bulle et panneau de chat, sous-en-têtes ; Quitter du bas. */
  html.rv-serie [data-rv-chrome],
  html.rv-serie [data-rv-serie-masque] { display: none !important; }

  /* L'hôte rend toute la largeur et toute la hauteur à la série. */
  html.rv-serie [data-rv-serie-hote] { padding: 0 !important; }

  /* La carte de la question devient la page : une colonne de toute la hauteur, sans cadre. */
  html.rv-serie [data-rv-serie] {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--rv-serie-fond, var(--bg, Canvas)) !important;
    scroll-margin-top: 0 !important;
  }

  /* Barre haute : compteur, progression, Quitter. Collée sous le bord haut, hors de l'encoche. */
  html.rv-serie [data-rv-serie-tete] {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: max(10px, env(safe-area-inset-top, 0px)) 0 10px;
    background: var(--rv-serie-fond, var(--bg, Canvas));
  }
  html.rv-serie [data-rv-serie-quitter] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: none;
    min-height: 40px;
    margin-left: auto;
  }

  /* Propositions : toute la largeur de la colonne, cible tactile de 48 px au moins. */
  html.rv-serie [data-rv-serie-options] > * {
    width: 100% !important;
    min-height: 48px;
    box-sizing: border-box;
  }

  /* Barre d'actions : collée en bas, au-dessus de la barre d'accueil d'iOS. */
  html.rv-serie [data-rv-serie-actions] {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    gap: 10px;
    margin-top: auto !important;
    padding: 12px 0 max(12px, env(safe-area-inset-bottom, 0px)) !important;
    background: var(--rv-serie-fond, var(--bg, Canvas));
    border-top: 1px solid var(--rv-serie-ligne, var(--line, rgba(127, 127, 127, .3)));
  }
  html.rv-serie [data-rv-serie-actions] > [data-rv-serie-principal] {
    flex: 1 1 auto;
    justify-content: center;
    min-height: 48px;
  }
  /* Rien à montrer dans la barre (correction au toucher, avant la réponse) : ni filet ni hauteur.
     Navigateur sans :has() : la barre reste visible, vide, sans autre effet. */
  html.rv-serie [data-rv-serie-actions]:not(:has(> :not([data-rv-serie-masque]))) {
    padding: 0 !important;
    border-top: 0;
  }

  /* Encarts fixés en bas pendant une série (rappel de l'heure d'essai, relance d'un paiement) :
     remontés au-dessus de la barre d'actions au lieu de la recouvrir. */
  html.rv-serie .rv-nudge,
  html.rv-serie [data-rv-relance] { bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; }

  /* Bandeau cookies (data-rv-cookies) : fixé en bas et haut de 150 px environ à 360 px, il couvrirait
     la barre d'actions, dernier élément de la page pendant une série ; remonté au-dessus d'elle, il
     cacherait pour de bon la fin de l'explication. Il reprend donc sa place dans le flux, sous la
     carte : le candidat l'atteint en défilant jusqu'au bout, il ne recouvre rien et rien ne le
     recouvre. Il redevient fixé à l'écran de résultat, quand la classe tombe. */
  html.rv-serie [data-rv-cookies] {
    position: static !important;
    transform: none !important;
    width: auto !important;
    margin: 16px 16px max(16px, env(safe-area-inset-bottom, 0px));
  }
}