/* ===== R-MOBILE — les cinq defauts vus sur un iPhone (22/09/2026) ==========
 *
 * CE QUE CETTE FEUILLE NE FAIT PAS : elle ne change RIEN au-dessus de 782 px.
 * Tout ce qui suit vit dans une seule requete de media, et c'est deliberе :
 * Daniel a decrit cinq defauts qu'il voit sur son telephone, pas une refonte.
 * La mesure de reference en 1440 doit rester identique au pixel pres.
 *
 * POURQUOI 782 px ET PAS 767. C'est la bascule que `mist-consentement.css:487`
 * a deja mesuree — la largeur a laquelle le mobilier flottant du site commence
 * a se disputer la place. La rupture « mobile » d'Elementor (767) ne decrit
 * rien d'ici, et le site en a deja trois autres (600, 900, 1199) : en ajouter
 * une cinquieme aurait ete une divergence de plus.
 *
 * POURQUOI UNE FEUILLE NEUVE. Trois sessions ecrivent en parallele sur ce
 * depot depuis le 07/09, et `mist-ds.css`, `mist-pages.css`, `mist-site.js`
 * sont partages. Un lot qui s'y insere ne se relit plus, et se perd au premier
 * conflit.
 *
 * ⚠️ LE PREFIXE `:root` N'EST PAS UNE COQUETTERIE. `mist-disque-suivi.css` est
 * mise en file APRES `mist-formulaires.css` (`functions.php:128` contre :90) :
 * a specificite egale, c'est ELLE qui gagnerait. `:root` porte la regle a
 * (0,2,0) et la question de l'ordre ne se pose plus. Meme raison pour le
 * bandeau de consentement, dont les regles sont en (0,1,0).
 */

/* 🔴 LA SEULE REGLE HORS REQUETE DE MEDIA, ET ELLE REPARE UNE REGRESSION QUE
 * CETTE FEUILLE AVAIT ELLE-MEME INTRODUITE. La pastille de menu est imprimee
 * dans le pied de TOUTES les pages ; tant que son style vivait uniquement sous
 * 782 px, elle sortait en 1440 comme un `<button>` nu de **12 x 2 px** en bas a
 * gauche du document (mesure du 22/09, `_rmobile_geo.js`) — invisible a l'oeil,
 * present dans l'ordre de tabulation, et aucun des huit criteres ne le voyait :
 * 200, un seul h1, debordement 0, 0 image cassee, 0 erreur.
 * `display: none` le retire de l'ecran ET du parcours clavier. */
.mist-rail-menu {
  display: none;
}

/* 🔴 LA SECONDE REGLE HORS REQUETE DE MEDIA — ET C'EST UN CHANGEMENT EN 1440,
 * ASSUME, PARCE QU'IL CORRIGE UN DEFAUT DE FONCTION MESURE.
 *
 * `mist-consentement.css:500` affirmait : « A 1440 il n'y a rien a faire : le
 * bandeau y est borne a 1 200 px et centre, il ne les croise pas (mesure :
 * recouverts = []) ». **La mesure etait vraie et la conclusion fausse.**
 * Relevé du 22/09 a 1440 x 900, accueil :
 *
 *     .mist-conso-bandeau    x 120 .. 1320    y 692 .. 828
 *     .mist-disk-launcher    x 1282 .. 1342   y 758 .. 818   centre (1312, 788)
 *
 * Le centre du bouton du disque est DANS le bandeau. Un appui a cet endroit
 * ouvrait « Personnaliser », pas le disque de suivi — exactement le defaut que
 * le commentaire de juillet decrivait pour le chatbot en mobile.
 *
 * ⚠️ POURQUOI PERSONNE NE L'AVAIT VU : `probe_sante.js:101` surveillait
 * `.mist-disque-fab`, une classe qui **n'existe nulle part dans le theme**. Le
 * bouton s'appelle `.mist-disk-launcher`. Le critere « elements flottants
 * recouverts » ne regardait donc que trois elements sur quatre depuis le
 * 29/07, et le quatrieme etait le seul concerne. La sonde est corrigee dans le
 * meme lot.
 *
 * La regle vaut A TOUTES LES LARGEURS : le bandeau exige une reponse, et deux
 * comportements differents de part et d'autre de 782 px seraient une divergence
 * de plus a tenir. */
body:has([data-mist-conso-ecran="bandeau"]) .chatbot-fab,
body:has([data-mist-conso-ecran="bandeau"]) .mist-disk-launcher {
  display: none;
}

@media (max-width: 782px) {

/* -------------------------------------------------------------------------
 * 3.1 — LE RAIL DES PASTILLES FLOTTANTES
 *
 * 🔴 CE QUE LA MESURE A TROUVE, ET QUI N'ETAIT PAS QU'UN DEFAUT D'ORDRE.
 * Le 21/09, en emulation iOS sur l'accueil, `/formations/` et `/evenements/` :
 *
 *     .chatbot-fab           (320, 774)  54 x 54  z 80
 *     .ea11y-widget-button   (322, 776)  44 x 44  z 2147483645
 *
 * Les deux au MEME endroit. `document.elementFromPoint()` au centre du bouton
 * de conversation rendait `div.ea11y-widget` : **le chatbot n'etait pas
 * cliquable sur un telephone**, sur toutes les pages du site. HTTP 200, un seul
 * h1, debordement 0, 0 image cassee, 0 erreur de console — les huit criteres
 * etaient verts, et aucune capture ne le montre : les deux boutons sont ronds
 * et superposes, l'image est la meme que le clic aboutisse ou non.
 *
 * ⚠️ POURQUOI L'EMULATION iOS ETAIT INDISPENSABLE POUR LE VOIR. Le greffon
 * `pojo-accessibility` choisit sa position entre un reglage « desktop » et un
 * reglage « mobile » (`ea11y_widget_icon_settings`), et il ne lit PAS la
 * largeur de la fenetre : un Chrome de bureau ramene a 390 px reste un bureau
 * pour lui, et pose sa pastille en HAUT A GAUCHE. Les sondes du projet, toutes
 * en UA de bureau, mesuraient donc une page que personne ne voit.
 *
 * LA DISPOSITION, dans l'ordre demande par Daniel (22/09) : « aligner tous les
 * elements verticalement sur la gauche », « rajouter une bulle menu a droite ».
 * Du bas vers le haut, un cran tous les 60 px, axe commun a 38 px du bord :
 *
 *     cran 0   bas 16    accessibilite   44 x 44   (greffon, voir ci-dessous)
 *     cran 1   bas 76    chatbot         48 x 48
 *     cran 2   bas 136   disque          48 x 48
 *     cran 3   bas 196   cookies         48 x 48
 *     droite   bas 16    menu            56 x 56
 *
 * 🔴 LE CRAN 0 N'EST PAS POSE ICI, ET IL NE PEUT PAS L'ETRE. Le bouton
 * d'accessibilite vit dans le `shadowRoot` de `div.ea11y-widget` : aucune
 * feuille du theme ne l'atteint, et son `z-index` est 2147483645 — le maximum.
 * Il se deplace par l'option `ea11y_widget_icon_settings`, cle `position.mobile`
 * (voir `tools/poser_pastille_accessibilite.php`). Consequence a connaitre :
 * dans un navigateur de BUREAU retreci a 390 px, le cran 0 reste vide et la
 * pastille d'accessibilite est en haut a gauche. Ce n'est pas un defaut, c'est
 * le reglage « desktop » du greffon — et il est volontairement inchange, parce
 * qu'en 1440 rien ne doit bouger.
 */

  /* Le chatbot quitte le coin bas-droite, ou il disputait la place a la
     pastille d'accessibilite, et prend le cran 1. */
  :root .chatbot-fab {
    right: auto;
    left: 14px;
    bottom: 76px;
    width: 48px;
    height: 48px;
  }

  /* Le disque etait pose « a gauche du chatbot » par un calcul
     (`right: calc(bord + taille + ecart)`, `mist-disque-suivi.css:24`). Le
     calcul n'a plus de sens dans une colonne : on pose le cran. */
  :root .mist-disk-launcher {
    right: auto;
    left: 14px;
    bottom: 136px;
    width: 48px;
    height: 48px;
  }

  /* Le rappel des cookies etait deja a gauche, mais tout en bas (10 / 10), donc
     sous la pastille d'accessibilite d'un iPhone. Il monte au cran 3 : c'est la
     pastille la moins utilisee du rail. */
  :root .mist-conso-rappel-hote {
    left: 14px;
    bottom: 196px;
  }

  :root .mist-conso-rappel-hote .mist-conso-rappel {
    width: 48px;
    height: 48px;
    justify-content: center;
    padding: 0;
  }

  /* --- La pastille de menu, a droite ---------------------------------------
   * ⚠️ ELLE VIENT EN PLUS DU MENU ACTUEL, elle ne le remplace pas (Daniel,
   * 22/09 : « en plus du menu actuel »). Le burger du header reste en place et
   * garde l'etat : cette pastille ne fait qu'appuyer dessus (voir
   * `mist-mobile.js`). Deux mecanismes d'ouverture, ce serait deux etats qui
   * divergent — et c'est le second qui aurait tort en silence. */
  :root .mist-rail-menu {
    position: fixed;
    right: 16px;
    bottom: 16px;
    /* Sous le bandeau de consentement (9999) et sous le tiroir de navigation,
       au-dessus du contenu. Le bandeau doit rester indiscutable. */
    z-index: 9990;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: var(--blue, #3E4982);
    box-shadow: var(--shadow-med, 0 18px 40px -18px rgba(15, 20, 54, .45));
    cursor: pointer;
    transition: background .2s, transform .16s;
  }

  :root .mist-rail-menu:hover {
    background: var(--blue-deep, #2C3566);
  }

  /* Le focus est VISIBLE : c'est le seul repere de qui navigue au clavier, et
     le site affiche un bouton « A+ Accessibilite ». */
  :root .mist-rail-menu:focus-visible {
    outline: 3px solid var(--orange, #E94E1B);
    outline-offset: 3px;
  }

  :root .mist-rail-menu svg {
    width: 26px;
    height: 26px;
    pointer-events: none;
  }

  /* Ouvert : la pastille devient une croix. L'etat vient de `body.nav-open`,
     que `mist-site.js:305` pose deja — on n'en invente pas un second. */
  :root body.nav-open .mist-rail-menu {
    background: var(--orange, #E94E1B);
  }

  :root body.nav-open .mist-rail-menu .mist-rail-menu__ouvrir { display: none; }
  :root .mist-rail-menu .mist-rail-menu__fermer { display: none; }
  :root body.nav-open .mist-rail-menu .mist-rail-menu__fermer { display: block; }

  /* --- Tant que le bandeau de consentement est la, le rail s'efface ---------
   * 🔴 POURQUOI EFFACER PLUTOT QUE DECALER. Le bandeau exige une reponse ; il
   * est en `position: fixed`, `z-index: 9999`, et il occupait 369 px sur 844 a
   * 390 px le 21/09. Aucun decalage ne rendrait le rail utilisable dessous, et
   * `mist-consentement.css:502` avait deja du remonter le bandeau a 80 px du
   * bas pour cesser de recouvrir le chatbot. On assume : pendant la question,
   * rien ne la concurrence — et `recouverts` sort vide.
   *
   * ⚠️ LA PASTILLE D'ACCESSIBILITE, ELLE, RESTE. Elle peut etre le seul moyen
   * pour quelqu'un de LIRE le bandeau. L'effacer pour faire une mesure propre
   * serait prendre la mesure pour le but. */
  /* Le chatbot et le disque sont deja effaces par la regle hors requete de
     media, plus haut : ici il ne reste que la pastille de menu, qui n'existe
     qu'en mobile. */
  body:has([data-mist-conso-ecran="bandeau"]) .mist-rail-menu {
    display: none;
  }

  /* --- Et tant que le TIROIR est ouvert, meme chose ------------------------
   * 🔴 MESURE DU 22/09, ET C'ETAIT LE DEFAUT QU'ON VENAIT DE CORRIGER, REMIS
   * AILLEURS. Menu ouvert, `document.elementFromPoint()` au bord gauche de
   * chaque entree du tiroir : **4 liens sur 27 repondaient
   * `button.mist-disk-launcher`** — « Offres complementaires »,
   * « Desinsertion professionnelle », « Blog / Actualites » et « Espace
   * adherent ». Le rail est au-dessus du tiroir, et il volait les appuis.
   *
   * La pastille de menu RESTE : c'est elle qui referme. Et le bouton
   * d'accessibilite aussi, pour la meme raison qu'au-dessus.
   *
   * ⚠️ `body.nav-open` EST POSE PAR `mist-site.js:305`, pas par nous. On se
   * branche sur l'etat existant plutot que d'en inventer un second. */
  body.nav-open .chatbot-fab,
  body.nav-open .mist-disk-launcher,
  body.nav-open .mist-conso-rappel-hote {
    display: none;
  }

/* -------------------------------------------------------------------------
 * 3.2 — LE PLANCHER DE 16 px SUR LES CHAMPS DE SAISIE
 *
 * 🔴 CE N'EST PAS UN CHOIX DE DESIGN, C'EST UNE CONTRAINTE DU MOTEUR.
 * iOS Safari agrandit la page des qu'un champ recoit le focus si sa police
 * calculee fait MOINS de 16 px. Le visiteur se retrouve avec une page
 * decadree, qu'il doit repincer. Daniel l'a senti avant de le voir :
 * « il y a un effet de zoom quand on clique sur le champ » (22/09).
 *
 * Mesure du 21/09, en emulation iOS a 390 px — **32 champs sous le seuil** :
 *     /contact/      8 champs a 15 px
 *     /formations/  11 champs a 15 px  + 1 a 13,33
 *     /evenements/  11 champs a 15 px  + 1 a 13,33
 * Les sources : `mist-ds.css:158` (.input/.select/.textarea) et
 * `mist-formulaires.css:65` (.elementor .mist-form .elementor-field-textual).
 *
 * ⚠️ PAS DE `!important`. Il ecraserait aussi un champ volontairement PLUS
 * GRAND, et transformerait un plancher en plafond. La regle porte sa
 * specificite : `:root` (0,1,0) + cinq `:not([type=…])` (0,5,0) + l'element
 * (0,0,1) = **(0,6,1)**, au-dessus des (0,3,0) de `mist-formulaires.css`.
 *
 * ⚠️ NI CASES, NI BOUTONS RADIO, NI BOUTONS. Ils ne recoivent aucune saisie de
 * texte : iOS n'y zoome pas. Les grossir de 13,3 a 16 px deplacerait les
 * mentions RGPD sans rien reparer.
 *
 * Verifie le 22/09 : aucun champ du site n'etait AU-DESSUS de 16 px avant ce
 * lot (le maximum mesure etait 16, sur la barre de recherche). Le plancher ne
 * rabaisse donc rien.
 */

  :root :is(input, select, textarea):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]) {
    font-size: 16px;
  }

/* -------------------------------------------------------------------------
 * 3.4 — LE BANDEAU DE CONSENTEMENT, PLUS DISCRET
 *
 * Mesure du 21/09 a 390 x 844 : le bandeau faisait **369 px de haut**, soit
 * 43,7 % de l'ecran — et sur un iPhone reel, barre d'URL comprise, plus de la
 * moitie. Daniel : « ca prend tout l'ecran, ca fait un peu agressif ».
 *
 * 🔴 AUCUNE GARANTIE N'EST TOUCHEE, ET C'EST LA SEULE CHOSE QUI COMPTE ICI.
 *   - aucune regle ne vise « accepter » ni « refuser » separement : les deux
 *     boutons partagent `.mist-conso-btn` et recoivent EXACTEMENT les memes
 *     declarations. Un refus plus couteux qu'une acceptation est le manquement
 *     le plus sanctionne par la CNIL, et il tient a une ligne de CSS ;
 *   - `min-height: 44px` est conserve sur les deux ;
 *   - le texte des finalites n'est pas raccourci : compacter une information
 *     legale, c'est l'amputer ;
 *   - le focus visible et le piege de focus sont dans le JS, intouches.
 *
 * CE QUI CHANGE : les deux boutons de choix passent COTE A COTE (ils etaient
 * empiles, soit 3 x 44 + 2 x 10 = 152 px de haut pour trois actions), les
 * rembourrages se resserrent, et le corps du texte passe de 14,5 a 13,5 px avec
 * un interligne de 1,45. « Personnaliser » garde sa ligne propre.
 *
 * ⚠️ LES 80 px DU BAS NE BOUGENT PAS, et la raison a change. Ils servaient a
 * degager `.chatbot-fab` (`mist-consentement.css:502`), qui n'est plus la
 * pendant la question. Il reste a degager la pastille d'accessibilite, au
 * cran 0 : 16 + 44 = 60, et 80 laisse 20 px de marge. La compaction vient donc
 * ENTIEREMENT de la hauteur du bandeau, pas de sa position.
 */

  :root .mist-conso-bandeau {
    gap: 12px;
    padding: 14px 16px 16px;
  }

  :root .mist-conso-bandeau .mist-conso-titre {
    margin-bottom: 4px;
    font-size: 15.5px;
  }

  :root .mist-conso-bandeau .mist-conso-texte {
    font-size: 13.5px;
    line-height: 1.45;
  }

  /* Les deux boutons de choix sur une ligne, a parts EGALES. `flex-wrap` fait
     retomber « Personnaliser » sur la ligne suivante sans qu'aucune regle
     n'ait a le nommer parmi ses freres. */
  :root .mist-conso-bandeau .mist-conso-bandeau__actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* ⚠️ 118 px DE BASE, PAS 130 — ET LA DIFFERENCE SE MESURE A 320 px.
     A 130, la somme des deux bases plus l'ecart valait 268 px pour un contenu
     de bandeau de 268 px EXACTEMENT : l'arrondi faisait passer le second
     bouton a la ligne, et le bandeau reprenait 52 px de haut (330 au lieu de
     278). Une egalite au pixel pres n'est pas une marge. */
  :root .mist-conso-bandeau .mist-conso-btn {
    flex: 1 1 118px;
    width: auto;
    min-height: 44px;
    padding: 11px 12px;
    font-size: 14px;
  }

  :root .mist-conso-bandeau .mist-conso-lien--bouton {
    flex: 1 1 100%;
    min-height: 40px;
  }
}