/* Socle mobile RYM
   =============================================================================
   Ben, 13/08/2026 : « peu de personnes utilisent le PC, tout le monde travaille
   depuis son smartphone. Les apporteurs d'affaires sont tres mobiles. Leur
   permettre, dans le metro, le bus, au restaurant, de reviser serait un gros
   avantage. Une plateforme haut de gamme sur le fond mais dont la forme limite
   l'acces ne sert a rien. »

   Cette feuille ne refait pas les six cent quinze vues du projet : elle corrige
   ce qu'une mesure a releve, page par page, a trois largeurs reelles, le
   13/08/2026 (outils/auditer_responsive.py). Chaque bloc ci-dessous nomme le
   defaut mesure qu'il repare. Si le defaut n'a pas ete mesure, il n'a pas sa
   place ici : on ne corrige pas des impressions.

   Trois regles que cette feuille s'impose :

     . Elle n'AJOUTE que. Aucune declaration ne retire une regle du design
       system ; tout est soit sous une requete de media, soit sur des proprietes
       que rien d'autre ne pose.
     . Elle ne masque un element que si sa disparition sur petit ecran est un
       choix defendable, et le commentaire dit lequel.
     . Le texte reste JUSTIFIE, conformement a la regle de la maison. Sur une
       colonne etroite, la justification creuse des rivieres blanches ; on ne la
       retire pas, on ajoute la cesure, qui est la vraie reponse typographique.

   Pour neutraliser sur une zone : classe « rym-mob-exclu » sur un parent. */

/* ==========================================================================
   1 . Fondations
   ========================================================================== */

/* Defaut mesure : sur les trois pages, le document annonce 360 px de large
   alors que des elements vont jusqu'a 610 px. Autrement dit, quelque chose
   coupe le debordement au lieu de le regler, et le contenu au-dela du bord
   est invisible ET inatteignable. On traite donc les causes, ci-dessous, pas
   le symptome. Ici on pose seulement les deux garde-fous universels. */

@media (max-width: 991.98px) {

    /* La cause numero un du debordement en flexbox : un enfant flex refuse de
       retrecir sous la largeur de son contenu tant qu'on ne lui dit pas que
       son minimum est zero. */
    .d-flex > *,
    .navbar-nav > .nav-item,
    .card-header.row > [class*="col-"] {
        min-width: 0;
    }

    /* Un media ne deborde jamais de son cadre. */
    img,
    video,
    canvas,
    svg,
    iframe {
        max-width: 100%;
    }
}

/* ==========================================================================
   2 . La barre du haut
   ========================================================================== */

/* Defaut mesure : « ul.navbar-nav.ml-auto » s'etend de 326 px a 610 px sur un
   ecran de 360. Sur les trois pages. Les alertes, les rappels et le compte
   sont donc hors de l'ecran, invisibles et non cliquables, sur telephone.

   Choix : les quatre liens vers les reseaux sociaux disparaissent sous 768 px.
   Ce ne sont pas des outils de travail ; les alertes le sont. Ils restent en
   place des la tablette. Rien n'est supprime, seulement caché en dessous
   d'une largeur ou il faut choisir. */

@media (max-width: 767.98px) {

    .navbar-nav.ml-auto > .nav-item > .nav-link[href*="facebook.com"],
    .navbar-nav.ml-auto > .nav-item > .nav-link[href*="instagram.com"],
    .navbar-nav.ml-auto > .nav-item > .nav-link[href*="twitter.com"],
    .navbar-nav.ml-auto > .nav-item > .nav-link[href*="linkedin.com"] {
        display: none;
    }

    /* Ce qui reste tient en une ligne, aligne a droite, et peut passer a la
       ligne plutot que de sortir de l'ecran. */
    .navbar-nav.ml-auto {
        flex-wrap: wrap;
        justify-content: flex-end;
        max-width: 100%;
        margin-right: 0;
        padding-right: 0;
    }

    /* Les classes mx-1 posees sur chaque entree ajoutaient huit pixels par
       element : la barre depassait encore de seize pixels apres la premiere
       correction, mesure du 13/08/2026. */
    .navbar-nav.ml-auto > .nav-item {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Le nom de l'utilisateur mange toute la largeur sur un telephone ;
       l'avatar suffit a savoir qui est connecte. */
    .topbar .nav-item.dropdown .d-none.d-lg-inline {
        display: none !important;
    }

    /* La barre du haut se tasse : chaque pixel de hauteur pris ici est un
       pixel de moins pour le document qu'on est venu lire. */
    .topbar {
        height: auto;
        min-height: 56px;
    }
}

/* Defaut mesure : « div.logo-container » s'etend jusqu'a 419 px sur l'accueil. */
@media (max-width: 767.98px) {
    .logo-container {
        max-width: 100%;
        overflow: hidden;
    }

    .logo-container img {
        max-width: 100%;
        height: auto;
    }
}

/* ==========================================================================
   3 . Les cibles tactiles
   ========================================================================== */

/* Defaut mesure : 223 cibles sous 44 px sur le parcours, 554 sur la
   bibliotheque d'objections, aux hauteurs 15, 16, 18, 19, 25, 32, 38, 39 et
   40 px. Un doigt adulte couvre environ 44 px : en dessous, on vise a cote,
   et sur un ecran dense on touche le lien voisin.

   Le releve est identique a 1440 px : ce n'est donc pas un defaut de
   responsivite, c'est une interface dessinee pour la souris. On ne la
   redessine pas, on epaissit la zone touchable sous 992 px. */

@media (max-width: 991.98px) {

    /* Ces composants ont un affichage connu et stable : on peut les passer en
       flexbox sans surprise, ce qui centre le libelle dans la hauteur gagnee.
       La liste s'est allongee apres la mesure du 13/08/2026 : ma premiere
       version ne visait que les quatre composants Bootstrap, et laissait
       dehors les VRAIS controles de la maison. Il en restait plus de six
       cents, dont les 451 entrees du menu de navigation a 38 px, celles-la
       memes sur lesquelles on tape en premier. */
    .btn,
    .nav-link,
    .dropdown-item,
    .page-link,
    .collapse-item,
    .ged-nav-pill,
    .ci-nav-pill,
    .spm-action-btn,
    .rym-list-btn,
    /* Mesure du 13/08/2026 : reste a 32 px malgre cette liste, parce que sa
       feuille d'origine pose « height: 32px » ET « min-height: 32px » avec un
       selecteur plus precis. Le plus precis gagne, quel que soit l'ordre de
       chargement : il faut donc marquer la regle comme prioritaire, ce qu'on
       ne fait nulle part ailleurs dans ce fichier. */
    .standard-navbar-alert__button,
    .standard-navbar-rappels,
    select.form-control-sm {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .standard-navbar-alert__button,
    .standard-navbar-rappels {
        min-height: 44px !important;
        height: auto !important;
    }

    /* Un bouton nu, lui, peut etre n'importe quoi dans ce projet : on lui
       donne de la hauteur sans toucher a son mode d'affichage, sinon on
       casserait des mises en page qu'on n'a pas mesurees. */
    button:not(.close):not(.rym-vis-fermer):not(.rym-vis-outil):not(.rym-vis-bouton) {
        min-height: 44px;
    }

    /* Un bouton au texte long grandit en hauteur plutot que de deborder en
       largeur. L'alignement reste celui de Bootstrap, centre : le changer
       deplacerait le libelle de tous les boutons de la plateforme. */
    .btn {
        white-space: normal;
    }

    /* Les champs de saisie : meme regle, et 16 px de police pour que l'iPhone
       n'agrandisse pas la page tout seul au moment de la saisie, ce qui
       decale toute la mise en page. */
    .form-control,
    select.form-control,
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        min-height: 44px;
        font-size: 16px;
    }

    /* Les cases a cocher et les boutons radio gardent leur taille visuelle,
       mais recoivent une zone touchable autour d'eux. */
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 20px;
        min-height: 20px;
    }

    /* Le chiffre cliquable de la regle d'interface A417 mesurait 15 a 19 px.
       On ne touche pas a sa taille de texte, qui fait partie du style
       valide : on lui donne une zone de touche. */
    .rym-ri-chiffre {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        padding: 0 6px;
    }
}

/* ==========================================================================
   4 . Les tailles de texte
   ========================================================================== */

/* Defaut mesure : les sections de la barre laterale a 10 px, les libelles
   d'espaces a 10,4 px, et le rappel d'etape du parcours a 11 px. En marchant,
   en tenant une barre de metro, ces tailles ne se lisent pas. */

@media (max-width: 991.98px) {

    /* La feuille de la barre laterale ecrit « #accordionSidebar
       .rym-sb-section », soit un identifiant ET une classe. Ma regle, qui ne
       portait que la classe, perdait donc a tous les coups : mesure du
       13/08/2026, deux cent trente-sept sections encore a 10 px apres le
       premier depot. On reprend exactement la meme forme pour etre a egalite,
       et on gagne parce qu'on est charge apres. */
    #accordionSidebar .rym-sb-section,
    .rym-sb-section {
        font-size: 12.5px;
    }

    /* Les libelles d'espaces de la barre laterale : A.M.O., RYM CRM,
       GESTION INTERNE, RYM G.E.D, COMMUNICATION. */
    .sidebar .font-weight-bold,
    .rym-sb-item .font-weight-bold {
        font-size: 12.5px;
    }

    small,
    .small {
        font-size: 12.5px;
    }
}

/* ==========================================================================
   5 . Le texte long
   ========================================================================== */

/* Le texte reste justifie : c'est la regle de la maison, et elle vaut sur
   tous les supports. Ce qui change sur une colonne etroite, c'est qu'il faut
   autoriser la cesure, sinon la justification etire les espaces jusqu'a
   creuser des rivieres blanches au milieu du paragraphe. La page declare
   lang="fr", donc le navigateur coupe selon les regles francaises. */

@media (max-width: 767.98px) {

    .text-justify,
    .card-text,
    p {
        hyphens: auto;
        -webkit-hyphens: auto;
        overflow-wrap: break-word;
    }
}

/* ==========================================================================
   6 . La bibliotheque d'objections
   ========================================================================== */

/* Defaut mesure, sur telephone : dans l'en-tete d'une objection, le texte de
   la question s'arrete a 371 px, le badge de la societe court jusqu'a 528 px
   et la fleche d'ouverture jusqu'a 580 px, sur un ecran de 360. Autrement
   dit, on ne voit ni a quelle societe l'objection appartient, ni la fleche
   qui l'ouvre : la page de revision est inutilisable en mobilite.

   La ligne unique devient donc deux lignes : la question et la fleche
   d'abord, les societes en dessous. */

@media (max-width: 767.98px) {

    #objectionsZone .accordion-header h5 {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    #objectionsZone .accordion-header h5 > .flex-grow-1 {
        /* La question prend toute la place restante de la premiere ligne, en
           laissant juste ce qu'il faut au numero et a la fleche. */
        flex: 1 1 auto;
        min-width: 0;
        font-size: 15px;
        line-height: 1.35;
        overflow-wrap: break-word;
    }

    #objectionsZone .accordion-header h5 > .accordion-icon {
        /* La fleche reste sur la premiere ligne, a droite, et devient une
           cible franche. */
        order: 2;
        flex: 0 0 auto;
        min-width: 34px;
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    #objectionsZone .accordion-header h5 > .badge-success {
        /* Les societes passent a la ligne, toutes ensemble. La largeur
           maximale est indispensable : a la deuxieme mesure, « CABINET BRUNO »
           et « HB ASSURANCE » etaient bien descendus a la ligne mais sortaient
           encore de neuf a quatorze pixels, parce qu'un badge ne se coupe pas
           tout seul. */
        order: 3;
        flex: 0 1 auto;
        max-width: 100%;
        white-space: normal;
        text-align: left;
        overflow-wrap: break-word;
    }

    #objectionsZone .accordion-header h5 > .badge-primary {
        flex: 0 0 auto;
        align-self: flex-start;
    }

    /* Sur un telephone, la carte ne peut pas se permettre 1,5 rem de marge de
       chaque cote : c'est un dixieme de la largeur perdu de chaque bord. */
    .card-body.p-4 {
        padding: 1rem !important;
    }
}

/* ==========================================================================
   7 . Le parcours de formation
   ========================================================================== */

/* Defaut mesure : le titre « SALLE DE REVISION / RYM HOLDING » s'etend
   jusqu'a 382 px sur un ecran de 360, et le rappel « ETAPE 1 SUR 8 » est
   ecrit en 11 px. */

@media (max-width: 767.98px) {

    h1, h2, h3,
    .h1, .h2, .h3 {
        overflow-wrap: break-word;
        hyphens: auto;
        -webkit-hyphens: auto;
    }

    h2, .h2 {
        font-size: 1.35rem;
        line-height: 1.3;
    }

    /* Les cartes de support : une par ligne, sans hauteur minimale imposee.
       Le fichier de la vue impose 350 px de haut a chaque carte, ce qui creuse
       un grand vide sous une fiche PDF dont la vignette est courte. */
    #divSupports .col-md-6 {
        flex: 1 1 100%;
        min-height: 0;
    }

    #divSupports .card-header.row {
        flex-direction: column;
        row-gap: 2px;
    }

    #divSupports .card-header .text-right {
        text-align: left !important;
    }

    /* Le rappel d'etape : lisible, et l'orange de la marque reste le repere. */
    #divSupports [style*="letter-spacing"] {
        font-size: 12px !important;
    }
}

/* ==========================================================================
   8 . Les tableaux
   ========================================================================== */

/* Un tableau ne se retrecit pas : il deborde ou il ecrase ses colonnes. La
   seule reponse honnete est de le laisser defiler horizontalement DANS son
   cadre, pendant que la page, elle, ne bouge pas. Le cadre est pose par
   rym-mobile.js autour de chaque tableau qui n'en a pas deja un. */

.rym-mob-table-defile {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 767.98px) {

    .rym-mob-table-defile > table {
        /* Sans largeur minimale, les colonnes se tassent en accordeon
           illisible ; avec, on defile, ce qui se comprend tout de suite. */
        min-width: 560px;
    }
}

/* ==========================================================================
   9 . Confort general
   ========================================================================== */

@media (max-width: 767.98px) {

    /* On NE TOUCHE PAS au remplissage de .container-fluid, et c'est une lecon
       de la mesure du 13/08/2026 : le passer de 15 a 12 px a fait apparaitre
       un debordement de 5 px sur l'accueil. Bootstrap pose des marges
       negatives de 15 px sur chaque .row ; si le conteneur ne compense plus
       que 12, la ligne sort de trois pixels par cote. Six pixels de gagnes ne
       valent pas une barre de defilement horizontale. */

    .card-body {
        padding: 1rem;
    }

    /* Une modale a larges marges sur un telephone, c'est une fenetre dans une
       fenetre. On lui rend la largeur, sans lui imposer la hauteur : une
       demande de confirmation de deux lignes etiree sur tout l'ecran serait
       aussi genante que l'inverse. */
    .modal-dialog {
        margin: 8px;
        max-width: calc(100% - 16px);
    }

    /* Une modale plus haute que l'ecran doit defiler DANS la modale, pas
       emporter la page derriere elle. */
    .modal-body {
        max-height: 78vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ==========================================================================
   10 . Le tiroir de navigation
   ========================================================================== */

/* Defaut mesure le 13/08/2026, en remontant la chaine des parents sur la page
   reelle : la barre laterale occupe CENT CINQUANTE pixels sur un ecran de 360,
   soit quarante et un pour cent de la largeur. Le contenu n'a plus que deux
   cent dix pixels, et tout le reste en decoule : la barre du haut sort de son
   cadre faute de place, et les logos de cent quarante pixels de l'accueil
   vivent dans des conteneurs ecrases a quarante pixels, dont quarante de
   remplissage, donc zero pixel pour l'image.

   Corriger ces symptomes un par un serait du bricolage. On rend les cent
   cinquante pixels au contenu : sous 768 px, la barre laterale sort du flux et
   devient un tiroir, ouvert par le bouton menu qui existe deja dans la barre du
   haut, referme par un voile ou par la touche d'echappement.

   Essaye sur les trois pages en production avant d'etre depose, par injection
   de la feuille dans la page reelle : le contenu est passe de 210 a 360 px, le
   bouton menu ouvre bien le tiroir, et le seul « debordement » qui reste est le
   tiroir lui-meme, range hors de l'ecran a gauche, ce qui est le but. */

@media (max-width: 767.98px) {

    .sidebar,
    #accordionSidebar {
        position: fixed !important;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1045;
        width: 84vw !important;
        max-width: 300px !important;
        min-height: 100vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateX(-102%);
        transition: transform .22s ease;
    }

    /* La classe est posee par le bouton menu de sb-admin-2, deja en place :
       on ne rajoute pas une seconde mecanique de bascule a cote de la sienne. */
    body.sidebar-toggled .sidebar,
    body.sidebar-toggled #accordionSidebar {
        transform: translateX(0);
    }

    /* Le voile est pose par rym-mobile.js : un tiroir qu'on ne peut refermer
       qu'en retrouvant le bouton d'ou il vient est un piege sur telephone. */
    .rym-tiroir-voile {
        position: fixed;
        inset: 0;
        z-index: 1040;
        background: rgba(10, 31, 68, .45);
        border: 0;
        padding: 0;
        margin: 0;
    }

    /* Sur 84 pour cent de la largeur, on a la place d'ecrire les libelles en
       entier : le tiroir n'a plus a les tronquer comme le faisait la colonne. */
    .sidebar .nav-link,
    #accordionSidebar .nav-link {
        white-space: normal;
        text-align: left;
        justify-content: flex-start;
    }

    .sidebar .nav-link span,
    #accordionSidebar .nav-link span {
        font-size: 13.5px;
    }

    #content-wrapper,
    #wrapper > div:not(.sidebar):not(#accordionSidebar) {
        width: 100% !important;
        margin-left: 0 !important;
    }

    /* Les logos de l'accueil, une fois la place rendue. */
    .logo-container {
        max-width: 100%;
        padding-left: 8px;
        padding-right: 8px;
    }

    .logo-container img {
        max-width: 100% !important;
        width: auto !important;
        height: auto;
    }
}

@media (prefers-reduced-motion: reduce) {

    .sidebar,
    #accordionSidebar {
        transition: none;
    }
}

/* ==========================================================================
   11 . Vague 2 : les treize espaces qui debordaient encore
   ==========================================================================
   Balayage des soixante-dix-neuf espaces du hub a 360 px, le 13/08/2026 :
   soixante-six tenaient deja dans l'ecran, treize non. Vingt-huit
   debordements en tout, ramenes a ZERO, verifies par six essais successifs
   par injection dans les pages reelles, sans rien deployer entre-temps.

   Ce que ces six essais ont appris, et qui vaut pour la suite :

     . Une regle attrape-tout se paie cash. « Toute barre en ligne se replie »
       a fait passer le conteneur principal a 3 027 px de large sur presque
       toutes les pages : « #content-wrapper » est une COLONNE flexible, et le
       repli sur une colonne cree de nouvelles colonnes cote a cote au lieu de
       renvoyer a la ligne. Retiree.

     . La moitie de mes selecteurs ne mordaient sur rien : les classes de
       barres d'outils que j'avais supposees n'existaient pas. On ne vise que
       ce que la mesure a nomme.

     . LA CAUSE DE FOND, sous trois visages : la taille minimale automatique.
       Un element ne descend jamais sous la taille de son contenu tant qu'on
       ne l'a pas dit explicitement. En grille, « 1fr » vaut « minmax(auto,
       1fr) » et il faut ecrire « minmax(0, 1fr) ». En flexbox, il faut poser
       « min-width: 0 ». Sur un champ, une largeur minimale l'emporte toujours
       sur une largeur maximale. Tant qu'on ne l'annule pas, aucune borne de
       largeur n'a d'effet. */

@media (max-width: 767.98px) {

    /* --- 1 . Les grilles a colonnes fixes -------------------------------- *
     * Cause dominante, huit espaces sur treize. Une grille declaree en
     * colonnes de largeur fixe ne se replie pas : ses pistes gardent leur
     * taille et debordent. Corriger l'enfant ne sert a rien, c'est le
     * conteneur qui impose. On le vise donc par ce qu'il contient.
     *
     * Mesures : .cc-panel jusqu'a 646 px (Centre de commandement),
     * .rvs-orphan-row__action 637 (Production), .atv-main-form 498
     * (Assistance technique), .rym-worker-card 385 (Room),
     * .rvs-pdca-card 587 (Agents IA), .rvs-stat-card 496 (Production).
     *
     * Un navigateur qui ne connait pas cette forme de selecteur ignore la
     * regle : on retombe alors sur l'etat d'avant, jamais sur pire. */
    *:has(> .cc-panel),
    *:has(> .rym-worker-card),
    *:has(> .rvs-pdca-card),
    *:has(> .rvs-stat-card),
    *:has(> .atv-main-form),
    *:has(> .atv-side-panel),
    *:has(> .rvs-orphan-row__action) {
        grid-template-columns: 1fr !important;
        display: block;
    }

    .cc-panel,
    .rym-worker-card,
    .rvs-pdca-card,
    .rvs-stat-card,
    .atv-main-form,
    .atv-side-panel,
    .rvs-orphan-row__action {
        max-width: 100%;
        min-width: 0;
        margin-bottom: 10px;
    }

    /* --- 2 . Les tableaux a en-tete fige --------------------------------- *
     * Mesure : div.dataTables_scrollHeadInner large de 1 928 px sur Email et
     * de 2 374 px sur la Boite de reception, pour un ecran de 360. Le corps du
     * tableau defile deja, mais son en-tete est pose dans un conteneur qui,
     * lui, ne defile pas : il sort donc de la page. On fait defiler l'ensemble
     * de l'habillage, ce qui garde l'en-tete aligne sur les colonnes. */
    .dataTables_wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Mesure : label « Recherche: » large de 364 px sur la Boite de reception,
     * a cause du champ de saisie a largeur fixe qu'il contient. */
    .dataTables_filter,
    .dataTables_length {
        float: none !important;
        text-align: left;
        max-width: 100%;
    }

    .dataTables_filter label,
    .dataTables_length label {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        max-width: 100%;
    }

    .dataTables_filter input,
    .dataTables_length select {
        flex: 1 1 140px;
        min-width: 0;
        max-width: 100%;
        margin-left: 0 !important;
    }

    /* --- 3 . Les barres d'outils de boutons ------------------------------ *
     * Mesures : les trois boutons du Serveur de Documents s'etendent de
     * -284 px a 155 px, et « Importer feuille de route » va jusqu'a 391 px sur
     * le Pilotage des taches. Des boutons alignes sur une seule ligne ne
     * tiennent pas sur 360 px : ils doivent pouvoir passer a la ligne. */
    /* Les noms de classes que j'avais supposes n'existaient pas : mesure du
       13/08/2026, les boutons du Serveur de Documents partaient a -284 px,
       donc HORS de l'ecran a gauche, pousses par un conteneur en ligne qui ne
       se replie pas. On vise ces conteneurs par leur contenu, seul nom que la
       mesure nous donne. */
    *:has(> .gl-btn):not(.flex-column),
    *:has(> #syncIndicator):not(.flex-column),
    *:has(> .rvs-orphan-row__action):not(.flex-column),
    *:has(> .kpi-unit-new):not(.flex-column),
    *:has(> .kpi-value-new):not(.flex-column),
    .btn-toolbar,
    .card-header .btn-group {
        flex-wrap: wrap !important;
        justify-content: flex-start;
        gap: 6px;
    }

    /* PAS de regle « toute barre en ligne se replie ». Essayee le 13/08/2026,
       elle a fait passer div#content a 3 027 px de large sur presque toutes
       les pages : « #content-wrapper » est une colonne flexible, et autoriser
       le repli sur une colonne ne renvoie pas a la ligne, cela cree de
       nouvelles colonnes cote a cote. La page devenait aussi large que le
       nombre de colonnes creees. On ne vise que des conteneurs nommes. */

    .gl-btn,
    .btn-toolbar .btn {
        max-width: 100%;
    }

    /* Mesure : input#rvsFleetSearchTop, champ de recherche large de 340 px
       pose a 48 px du bord, donc jusqu'a 388 sur un ecran de 360. Un champ de
       saisie a largeur fixe ne tient jamais sur telephone. */
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="tel"],
    input:not([type]) {
        max-width: 100%;
    }

    /* --- 4 . Les compteurs de la page Statistiques ----------------------- *
     * Mesures : strong#dureeTotal 175 px de large a partir de 201, donc jusqu'a
     * 376 ; strong#tempsAttente jusqu'a 391 ; span.kpi-unit-new jusqu'a 418.
     * Une valeur et son unite sont ecrites sur une seule ligne qui ne se coupe
     * jamais. On l'autorise a se couper, et on la laisse respirer. */
    .kpi-value-new,
    .kpi-unit-new {
        overflow-wrap: anywhere;
        min-width: 0;
        max-width: 100%;
    }

    .kpi-value-new {
        font-size: 1.05rem;
        line-height: 1.25;
    }

    .kpi-unit-new {
        display: block;
        font-size: .82rem;
    }

    /* --- 6 . Les quatre derniers, nommes par leur chaine de parents ------ *
     * Ils n'avaient ni classe ni identifiant. En remontant leurs parents sur
     * la page reelle, le 13/08/2026, chacun a fini par se nommer.
     *
     * CONFIGURATION. « div.two-col » est une grille dont la colonne est
     * declaree a 297,578 px, une largeur FIXE, dans un conteneur qui n'en fait
     * que 230. La colonne ne se retrecit donc jamais. */
    .two-col {
        /* « minmax(0, 1fr) » et non « 1fr » : « 1fr » vaut « minmax(auto, 1fr) »,
           et ce « auto » est la taille du contenu. La piste ne descend alors
           jamais en dessous, ce qui explique les 297,578 px mesures dans un
           conteneur de 230. */
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .two-col > * {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* MA FICHE. « div.fiche-switch-row » se replie deja, mais son enfant garde
     * la largeur minimale automatique d'un element flexible : 489,78 px dans
     * une ligne de 280. Un enfant flexible ne descend jamais sous la taille de
     * son contenu tant qu'on ne lui dit pas que son minimum est zero. */
    .fiche-switch-row > * {
        min-width: 0;
        max-width: 100%;
    }

    /* AGENTS IA, la chaine des etapes. « .rvs-chain-phase » file jusqu'a
     * 3 885 px dans un conteneur de 216. Ici on NE replie PAS : une chaine
     * d'etapes lue de gauche a droite perd son sens si elle passe a la ligne.
     * On la fait defiler dans son cadre, ce qui garde l'ordre visible. */
    .rvs-chain-flow {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* AGENTS IA, le champ de recherche de la flotte : largeur fixe posee sur
     * l'element lui-meme, que la regle generale sur les champs ne suffisait
     * pas a reprendre. */
    #rvsFleetSearchTop,
    .fiche-company-select {
        /* La largeur minimale doit etre annulee AVANT tout : en CSS, le
           minimum l'emporte toujours sur le maximum. Sans cette ligne, la
           borne posee juste en dessous n'a aucun effet, ce que deux essais
           successifs ont confirme. */
        min-width: 0 !important;
        width: 100% !important;
        /* Borne sur l'ECRAN et non sur le parent : « 100 % » se mesure sur le
           parent, et si le parent est deja trop large l'enfant l'est aussi.
           Ces deux-la ont resiste a deux tentatives pour cette raison. Les
           trente-deux pixels laissent la place aux marges du conteneur. */
        max-width: calc(100vw - 32px) !important;
    }

    /* Une liste deroulante suit la meme regle que les champs de saisie : son
       contenu le plus long, ici un nom de societe, ne doit pas fixer sa
       largeur. */
    select {
        max-width: 100%;
    }

}

.rym-mob-exclu,
.rym-mob-exclu * {
    /* Echappatoire : une zone qui a sa propre mise en page mobile se declare
       ici et cette feuille la laisse tranquille. Les regles ci-dessus sont
       toutes moins specifiques que celle-ci. */
    min-width: initial;
}