/* =============================================================================
   responsive-prof.css — couche responsive commune a l'espace enseignant
   -----------------------------------------------------------------------------
   PERIMETRE
   Point d'ancrage : #corps.vue-prof, pose par top_menu.php sur le conteneur
   qu'il ouvre et que footer.php referme. Tout le contenu d'une page
   enseignant vit dans ce conteneur.

   Pourquoi la classe vue-prof et pas #corps seul : #corps est aussi declare
   par des pages qui n'appartiennent pas a l'espace enseignant —
   calculs/calcul_mental.php et classe/ceinture-calcul.php (eleves, avec leurs
   champs de fractions et leur theme RPG), top_menu_parents.php (portail
   parents). S'ancrer sur #corps seul leur imposerait, entre autres, la police
   de 16px des saisies et casserait leur mise en page. La classe rend le
   perimetre explicite : seules les pages construites sur le menu enseignant
   sont concernees.

   Tout est sous @media screen : les pages d'impression (fiches A4, bilans de
   comportement, progressions, feuilles d'exercices) gardent leurs largeurs
   fixes a l'impression.

   -----------------------------------------------------------------------------
   DISCIPLINE DE SPECIFICITE — a lire avant d'ajouter une regle ici
   Les <style> propres aux pages sont dans le <head> APRES ce fichier, mais
   avec des selecteurs de classe (0-1-0), alors que #corps.vue-prof vaut
   1-1-0. Toute regle posee ici GAGNE donc contre le CSS de la page. C'est
   voulu pour ce qui casse le mobile, et a eviter pour tout le reste.

   On ne pose ici que des garde-fous de debordement :
     largeurs plafonnees, retour a la ligne, tableaux a defilement, grilles
     effondrees, taille de police des saisies (zoom iOS).
   On ne touche PAS a l'apparence que les pages pilotent legitimement :
     taille des titres, hauteur des boutons, remplissage des cellules,
     dimension des cases a cocher. Ces points relevent du bloc @media de
     chaque page.

   Pour reprendre la main depuis une page, il faut depasser 1-1-0 (ou 1-1-1
   quand la regle d'ici cite un type comme table ou input) :
     #corps.vue-prof .ma-classe input { font-size: 11px; }   /* 1-2-1 */
   Reprendre #corps sans .vue-prof ne suffit pas : #corps .ma-classe vaut
   1-1-0 et perd contre #corps.vue-prof table, qui vaut 1-1-1.

   -----------------------------------------------------------------------------
   ECHAPPATOIRES
     .rp-keep    l'element et ses descendants ne sont pas contraints
     .rp-scroll  conteneur a defilement horizontal ; ses descendants gardent
                 leur largeur intrinseque (emploi du temps, programmation,
                 frises, editeurs A4, tableaux larges...)

   Motif de redaction : on plafonne largement, puis on RE-AUTORISE sous
   .rp-keep / .rp-scroll avec un selecteur plus specifique. On evite ainsi les
   :not() a selecteur complexe (:not(.rp-keep *)), non supportes avant
   Safari 16.4 — et un selecteur invalide fait tomber la regle entiere.

   -----------------------------------------------------------------------------
   A SAVOIR
   html et body sont en overflow-x:hidden (style.css). Un bloc trop large
   n'ouvre donc pas de barre de defilement : il est purement coupe et devient
   inatteignable. D'ou le recours systematique a .rp-scroll plutot qu'au simple
   debordement.
   ============================================================================= */


/* =============================================================================
   1. GARDE-FOUS PERMANENTS (toutes largeurs d'ecran)
   ============================================================================= */
@media screen {

  /* Les mots longs (URL, noms de fichiers, mots de passe de classe) ne
     poussent plus la largeur du conteneur. */
  #corps.vue-prof {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  /* Medias : jamais plus larges que leur conteneur. */
  #corps.vue-prof img,
  #corps.vue-prof video,
  #corps.vue-prof canvas,
  #corps.vue-prof embed,
  #corps.vue-prof object,
  #corps.vue-prof iframe {
    max-width: 100%;
  }
  #corps.vue-prof img {
    height: auto;
  }
  /* Rendus a largeur imposee (planches A4, frises, previsualisations). */
  #corps.vue-prof .rp-keep,
  #corps.vue-prof .rp-keep img,
  #corps.vue-prof .rp-keep video,
  #corps.vue-prof .rp-keep canvas,
  #corps.vue-prof .rp-keep iframe,
  #corps.vue-prof .rp-scroll img,
  #corps.vue-prof .rp-scroll canvas,
  #corps.vue-prof img.rp-keep,
  #corps.vue-prof canvas.rp-keep,
  #corps.vue-prof iframe.rp-keep {
    max-width: none;
  }
  #corps.vue-prof .rp-keep img,
  #corps.vue-prof img.rp-keep {
    height: auto;
  }

  /* Blocs preformates (logs, exports JSON, pages de debug). */
  #corps.vue-prof pre {
    overflow-x: auto;
    max-width: 100%;
  }

  /* --- Conteneur de defilement horizontal generique ----------------------- */
  .rp-scroll {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
  }
  /* Barre de defilement discrete mais visible : sur telephone, l'utilisateur
     doit comprendre qu'il reste de la matiere a droite. */
  .rp-scroll::-webkit-scrollbar { height: 8px; }
  .rp-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
  .rp-scroll::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; }
}


/* =============================================================================
   2. TABLETTE ET EN DESSOUS (<= 1024px)
   ============================================================================= */
@media screen and (max-width: 1024px) {

  #corps.vue-prof {
    padding: 20px;
  }

  /* Colonnes laterales a largeur fixe : trop etroites pour leur contenu bien
     avant d'arriver au mobile. */
  #corps.vue-prof .rp-sidebar {
    width: auto;
    max-width: 100%;
  }
}


/* =============================================================================
   3. MOBILE (<= 768px)
   ============================================================================= */
@media screen and (max-width: 768px) {

  #corps.vue-prof {
    padding: 14px 12px;
  }

  /* ---------------------------------------------------------------------------
     3.1 Largeurs fixes posees en style inline
     Des centaines de blocs portent un style="width:420px" ou
     style="min-width:300px". Les reecrire un par un n'est pas tenable : on les
     plafonne. max-width:100% neutralise une largeur fixe sans rien changer
     pour les elements qui etaient deja plus etroits.
     --------------------------------------------------------------------------- */
  #corps.vue-prof [style*="width"] {
    max-width: 100%;
  }
  /* Sous un conteneur a defilement ou une zone gelee, la largeur intrinseque
     est justement ce qui rend le defilement utile. */
  #corps.vue-prof .rp-scroll [style*="width"],
  #corps.vue-prof .rp-keep [style*="width"],
  #corps.vue-prof [style*="width"].rp-keep,
  #corps.vue-prof [style*="width"].rp-scroll {
    max-width: none;
  }

  /* ---------------------------------------------------------------------------
     3.2 Rangees flex inline : retour a la ligne autorise
     Le motif dominant du code est style="display:flex;gap:..." sans
     flex-wrap. Sur telephone, une rangee de trois cartes doit s'empiler.
     --------------------------------------------------------------------------- */
  #corps.vue-prof [style*="display:flex"],
  #corps.vue-prof [style*="display: flex"] {
    flex-wrap: wrap;
  }
  /* Echappatoire : garder une rangee sur une seule ligne (pagination, groupe
     de boutons compact, barre de lecture). */
  #corps.vue-prof .rp-nowrap,
  #corps.vue-prof .rp-keep [style*="display:flex"],
  #corps.vue-prof .rp-keep [style*="display: flex"] {
    flex-wrap: nowrap;
  }

  /* ---------------------------------------------------------------------------
     3.3 Grilles inline
     Plutot que tout ecraser en une colonne, on remplace la definition par une
     grille auto-adaptative : deux colonnes quand la place le permet, une
     sinon. Si min() n'est pas supportee, la declaration entiere est ignoree et
     la grille inline d'origine s'applique : degradation propre.
     --------------------------------------------------------------------------- */
  #corps.vue-prof [style*="grid-template-columns"] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important;
  }
  #corps.vue-prof .rp-keep [style*="grid-template-columns"],
  #corps.vue-prof .rp-scroll [style*="grid-template-columns"],
  #corps.vue-prof [style*="grid-template-columns"].rp-keep {
    grid-template-columns: unset !important;
  }

  /* ---------------------------------------------------------------------------
     3.4 Tableaux
     display:block + overflow-x:auto : le <table> devient un bloc a defilement
     et ses lignes forment une table anonyme qui garde sa largeur naturelle.
     Aucune modification du DOM, donc aucun risque pour le JS des pages
     (contrairement a un emballage dans un <div> ajoute a l'execution).
     --------------------------------------------------------------------------- */
  #corps.vue-prof table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  #corps.vue-prof table::-webkit-scrollbar { height: 8px; }
  #corps.vue-prof table::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

  /* Une cellule au texte interminable ne doit pas etirer tout le tableau. */
  #corps.vue-prof th,
  #corps.vue-prof td {
    max-width: 75vw;
  }

  /* Tableaux de mise en page (anciens gabarits) et zones gelees : ils
     restent en display:table. */
  #corps.vue-prof .rp-keep table,
  #corps.vue-prof table.rp-keep,
  #corps.vue-prof table.rp-layout {
    display: table;
  }

  /* ---------------------------------------------------------------------------
     3.5 Formulaires
     --------------------------------------------------------------------------- */
  #corps.vue-prof input,
  #corps.vue-prof select,
  #corps.vue-prof textarea {
    max-width: 100%;
    box-sizing: border-box;
  }
  /* iOS zoome sur le champ des que la police descend sous 16px, et ne
     redezoome pas : c'est le defaut de confort le plus penible de tout
     l'espace enseignant sur telephone. On remonte donc les saisies a 16px.
     Une page qui a besoin de champs denses (cases d'emploi du temps) reprend
     la main avec un selecteur plus specifique, ou via .rp-keep. */
  #corps.vue-prof input,
  #corps.vue-prof select,
  #corps.vue-prof textarea {
    font-size: 16px;
  }
  #corps.vue-prof input[type="checkbox"],
  #corps.vue-prof input[type="radio"],
  #corps.vue-prof input[type="range"],
  #corps.vue-prof input[type="color"],
  #corps.vue-prof .rp-keep input,
  #corps.vue-prof .rp-keep select,
  #corps.vue-prof .rp-keep textarea,
  #corps.vue-prof .rp-scroll input,
  #corps.vue-prof .rp-scroll select {
    font-size: inherit;
  }

  /* Libelle + champ en deux colonnes : passage en pile. */
  #corps.vue-prof .rp-field-row {
    display: block;
  }

  /* ---------------------------------------------------------------------------
     3.6 Boutons
     On ne force pas de hauteur : trop de boutons-icones de 16 a 24px dans les
     cartes et les tableaux, qu'une hauteur minimale ferait exploser. Les
     cibles tactiles sont traitees page par page, et via .rp-btn-stack.
     --------------------------------------------------------------------------- */
  #corps.vue-prof button,
  #corps.vue-prof .btn,
  #corps.vue-prof a.btn {
    max-width: 100%;
  }
  /* Groupe de boutons empile en pleine largeur plutot que serre. */
  #corps.vue-prof .rp-btn-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }
  #corps.vue-prof .rp-btn-stack > button,
  #corps.vue-prof .rp-btn-stack > .btn,
  #corps.vue-prof .rp-btn-stack > a {
    width: 100%;
    min-height: 42px;
    box-sizing: border-box;
    text-align: center;
  }

  /* ---------------------------------------------------------------------------
     3.7 Fenetres modales
     Le motif du code est un overlay position:fixed contenant une carte a
     max-width fixe. Sur telephone la carte doit tenir dans l'ecran et defiler
     verticalement, sinon ses boutons de validation restent hors champ.
     --------------------------------------------------------------------------- */
  #corps.vue-prof .modal,
  #corps.vue-prof .modal-overlay,
  #corps.vue-prof .rp-modal {
    padding: 10px;
    box-sizing: border-box;
  }
  #corps.vue-prof .modal-content,
  #corps.vue-prof .modal > div,
  #corps.vue-prof .modal-overlay > div,
  #corps.vue-prof .rp-modal-card {
    max-width: 100%;
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
  }

  /* ---------------------------------------------------------------------------
     3.8 Elements flottants du cadre enseignant
     Ces identifiants n'existent que sur les pages enseignant (top_menu.php),
     ils n'ont donc pas besoin du prefixe #corps.vue-prof.
     --------------------------------------------------------------------------- */
  /* La bulle Perce-Neige fait 100px : elle recouvre les boutons d'action en
     bas de page sur un telephone. */
  #perce-neige-bubble {
    bottom: 12px !important;
    right: 12px !important;
  }
  #perce-neige-bubble > div > img {
    width: 58px !important;
    height: 58px !important;
  }
  #perce-neige-bubble > div > div {
    width: 14px !important;
    height: 14px !important;
    top: -4px !important;
    right: -4px !important;
  }
  #perce-neige-tooltip {
    display: none !important;
  }
  #perce-neige-relance-bubble,
  #welcome-bubble {
    left: 10px !important;
    right: 10px !important;
    bottom: 80px !important;
    max-width: none !important;
  }

  /* Onglets de l'espace profil : ils defilent deja (menu_profile.php), on
     resserre seulement les marges. */
  #corps.vue-prof .profil-tabs {
    margin-bottom: 16px;
    padding-bottom: 2px;
  }
}


/* =============================================================================
   4. TELEPHONE (<= 600px)
   ============================================================================= */
@media screen and (max-width: 600px) {

  #corps.vue-prof {
    padding: 12px 10px;
  }

  /* Les cartes a min-width genereux (180px, 220px, 250px) laissent des
     colonnes orphelines : elles prennent toute la largeur. */
  #corps.vue-prof [style*="min-width"] {
    min-width: 0;
  }
  #corps.vue-prof .rp-scroll [style*="min-width"],
  #corps.vue-prof .rp-keep [style*="min-width"],
  #corps.vue-prof [style*="min-width"].rp-keep {
    min-width: auto;
  }

  /* Utilitaires de grille des pages. */
  #corps.vue-prof .rp-cols-2,
  #corps.vue-prof .rp-cols-3,
  #corps.vue-prof .rp-cols-4 {
    grid-template-columns: 1fr;
  }

  /* Barres d'outils : les actions passent en pile pleine largeur. */
  #corps.vue-prof .rp-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  #corps.vue-prof .rp-toolbar > * {
    width: 100%;
    box-sizing: border-box;
  }
}


/* =============================================================================
   5. PETIT TELEPHONE (<= 420px)
   ============================================================================= */
@media screen and (max-width: 420px) {

  #corps.vue-prof {
    padding: 10px 8px;
  }

  /* A cette largeur, deux colonnes ne tiennent plus. */
  #corps.vue-prof [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  #corps.vue-prof .rp-keep [style*="grid-template-columns"],
  #corps.vue-prof .rp-scroll [style*="grid-template-columns"],
  #corps.vue-prof [style*="grid-template-columns"].rp-keep {
    grid-template-columns: unset !important;
  }

  #perce-neige-bubble > div > img {
    width: 46px !important;
    height: 46px !important;
  }
}


/* =============================================================================
   6. APPAREILS SANS SURVOL
   Le code expose beaucoup d'actions en opacity:0 jusqu'au :hover (croix de
   suppression, boutons d'edition d'une vignette, menus contextuels). Au doigt
   il n'y a pas de survol : ces actions sont tout simplement inatteignables.
   Les cas structurants sont traites page par page ; cette regle couvre les
   motifs partages de style.css et profil/style/style.css.
   ============================================================================= */
@media screen and (hover: none) {

  /* Boutons d'action d'une ligne eleve / d'un titre, caches hors survol. */
  #corps.vue-prof .eleve_name button,
  #corps.vue-prof .eleve_name a,
  #corps.vue-prof h1 button,
  #corps.vue-prof h2 button {
    display: inline-block;
  }
}


/* =============================================================================
   7. UTILITAIRES REUTILISABLES PAR LES PAGES
   ============================================================================= */
@media screen {

  /* Grille de cartes auto-adaptative : le motif a privilegier dans les pages
     plutot qu'un repeat(N, 1fr) fixe. */
  .rp-grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
  }
  .rp-grid-auto-sm {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
  }

  /* Rangee souple : s'empile d'elle-meme quand la place manque. */
  .rp-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
  }

  .rp-mobile-only { display: none; }
}

@media screen and (max-width: 768px) {
  .rp-desktop-only { display: none !important; }
  .rp-mobile-only { display: block; }
  /* Colonne de details secondaires retiree du tableau sur telephone. */
  #corps.vue-prof table .rp-col-secondary { display: none; }
}