/* ===== R-MOBILE-2 — les panneaux flottants en plein ecran (22/09/2026) ======
 *
 * UN SEUL COMPORTEMENT, CINQ PANNEAUX. Daniel, 22/09 : « quand on clique sur
 * les cookies, on fait en sorte qu'il n'y ait que l'element des cookies qui
 * s'affiche. Idem pour le disque. On voit tout en un ecran vertical. » Ce qui
 * suit decrit UNE fois la regle et la pose sur les cinq — menu, cookies,
 * disque, chat, accessibilite. Cinq copies divergeraient, et c'est la
 * cinquieme qui aurait tort en silence.
 *
 * L'ETAT EST PORTE PAR `body[data-mist-plein="<cle>"]`, ecrit par
 * `mist-plein.js` et par lui seul. Aucun panneau n'a son propre etat.
 *
 * POURQUOI 782 px. C'est le point de rupture du lot precedent
 * (`mist-mobile.css:68`), lui-meme repris de `mist-consentement.css:487`. Le
 * site en porte deja quatre (600, 767, 900, 1199) : en ajouter un sixieme
 * serait une divergence de plus a tenir.
 *
 * CE QUE CETTE FEUILLE NE FAIT PAS : elle ne change rien au-dessus de 782 px,
 * a une exception pres, documentee juste en dessous.
 */

/* 🔴 LA SEULE REGLE HORS REQUETE DE MEDIA, ET ELLE EVITE UNE REGRESSION QUE LE
 * LOT PRECEDENT A DEJA PAYEE. La croix partagee est imprimee dans le pied de
 * TOUTES les pages ; un bouton stylé uniquement sous 782 px sort NU en 1440 —
 * mesure du 21/09 sur `.mist-rail-menu` : un `<button>` de 12 x 2 px en bas a
 * gauche du document, invisible a l'oeil, PRESENT dans l'ordre de tabulation,
 * et les huit criteres verts. `display: none` le retire de l'ecran ET du
 * parcours clavier. */
[data-mist-plein-fermer] {
  display: none;
}

@media (max-width: 782px) {

/* -------------------------------------------------------------------------
 * 1 — L'ETAT PARTAGE : un panneau ouvert, et rien d'autre
 *
 * 🔴 MESURE DU 22/09, emulation iPhone, accueil, 390 x 844 : pendant que le
 * panneau des cookies, du disque ou du chat etait ouvert, **les CINQ pastilles
 * restaient a l'ecran**. Elles flottent par-dessus le panneau qu'elles
 * viennent d'ouvrir, et elles volent les appuis — c'est exactement la faute
 * que le lot precedent a corrigee pour le tiroir de navigation (4 liens sur 27
 * repondaient `button.mist-disk-launcher`).
 *
 * ⚠️ `!important` EST NECESSAIRE ICI, ET SEULEMENT ICI. `mist-mobile.css:116`
 * pose `:root .chatbot-fab { ... }` en (0,2,0) ; notre selecteur monte a
 * (0,2,1), mais `.mist-conso-rappel-hote` est aussi visee par des regles du
 * bandeau qui peuvent remonter. Masquer une pastille est un etat binaire, pas
 * une nuance de cascade : on le dit une fois pour toutes. */
  body[data-mist-plein] .chatbot-fab,
  body[data-mist-plein] .mist-disk-launcher,
  body[data-mist-plein] .mist-conso-rappel-hote,
  body[data-mist-plein] [data-mist-rail-menu] {
    display: none !important;
  }

/* -------------------------------------------------------------------------
 * 2 — LA CROIX, A L'EMPLACEMENT EXACT DE LA PASTILLE QUI A OUVERT
 *
 * Daniel, 22/09 : « une petite croix qui vient se mettre la ou etait l'icone
 * precedente ». Les coordonnees viennent de `mist-plein.js`, qui releve le
 * centre de la pastille AVANT de la masquer : `display: none` rend un
 * rectangle de 0 x 0 a (0, 0), et relever apres l'ouverture poserait la croix
 * en haut a gauche pour les cinq panneaux.
 *
 * 🔴 LE `z-index` EST LE MAXIMUM, ET CE N'EST PAS DE LA SURENCHERE.
 * Mesure du 22/09 : le PANNEAU du greffon d'accessibilite est a
 * **2147483647** — la valeur maximale d'un entier 32 bits signe, qu'aucune
 * valeur ne depasse. Une croix a 2147483646 passait DESSOUS :
 * `elementFromPoint` au centre rendait
 * `div.ea11y-widget-footer__copyright-wrapper`, et la croix etait invisible et
 * sourde au doigt — alors que `c.click()` en JavaScript, lui, la fermait.
 * **C'est exactement le piege du bouton du chatbot**, et il a fallu la meme
 * mesure pour le voir (`_rmobile2_touche.js`).
 *
 * ⚠️ A VALEUR EGALE, C'EST L'ORDRE DU DOCUMENT QUI TRANCHE, et le greffon
 * s'injecte APRES nous. `mist-plein.js` remet donc la croix en dernier enfant
 * du corps a chaque ouverture — le CSS seul ne suffit pas ici. */
  body[data-mist-plein] [data-mist-plein-fermer] {
    position: fixed;
    left: var(--mist-plein-x, 14px);
    top: var(--mist-plein-y, 76px);
    z-index: 2147483647;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--mist-plein-d, 48px);
    height: var(--mist-plein-d, 48px);
    padding: 0;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: var(--orange, #E94E1B);
    /* ⚠️ LE HALO BLANC N'EST PAS UNE COQUETTERIE. Mesure du 22/09
       (`_rmobile2_collision.js`) : la croix recouvre 2 300 px² du disque et
       environ 3 500 px² du texte defilant du panneau des cookies — c'est la
       consequence directe de « la croix la ou etait l'icone ». Le halo dit que
       la croix FLOTTE au-dessus du contenu au lieu d'y etre posee ; sans lui,
       une pastille orange au milieu d'un paragraphe se lit comme une erreur de
       mise en page. */
    box-shadow:
      0 0 0 3px rgba(255, 255, 255, .92),
      0 14px 34px -14px rgba(15, 20, 54, .55);
    cursor: pointer;
  }

  /* Le focus est VISIBLE : c'est le seul repere de qui navigue au clavier, et
     le site affiche un bouton « A+ Accessibilite ». */
  body[data-mist-plein] [data-mist-plein-fermer]:focus-visible {
    outline: 3px solid var(--blue, #3E4982);
    outline-offset: 3px;
  }

  body[data-mist-plein] [data-mist-plein-fermer] svg {
    width: 24px;
    height: 24px;
    pointer-events: none;
  }

/* -------------------------------------------------------------------------
 * 3 — LE MENU EN PLEIN ECRAN
 *
 * 🔴 LE DEFAUT, MESURE LE 22/09 : LE MENU S'OUVRAIT HORS DE L'ECRAN.
 * Emulation iPhone, accueil, defilement 2 200 px, appui sur la pastille :
 *
 *     .site-header   y = -2122   (`position: sticky` INOPERANT)
 *     #navLinks      y = -2043   390 x 594   `.open` = true
 *     liens dans la fenetre : 0 sur 37
 *
 * La pastille virait bien a la croix orange : l'image disait « menu ouvert »,
 * et il n'y avait aucun menu. C'est mot pour mot ce que Daniel decrit — « le
 * menu collant ne s'affiche qu'en haut de la page ».
 *
 * DEUX CAUSES QUI SE CUMULENT :
 *   1. `.site-header` porte `backdrop-filter: saturate(1.6) blur(16px)`. Un
 *      element filtre est le BLOC CONTENEUR de ses descendants
 *      `position: fixed` : le tiroir se place par rapport au header, pas par
 *      rapport a la fenetre.
 *   2. le header lui-meme ne colle pas : `body` porte `overflow-x: hidden`,
 *      ce qui en fait un conteneur de defilement, et `position: sticky` s'y
 *      rattache au lieu de se rattacher a la fenetre.
 *
 * ⚠️ LE `backdrop-filter` N'EST RETIRE QUE PENDANT L'OUVERTURE. Le retirer en
 * permanence sous 782 px changerait l'aspect du header sur tous les telephones,
 * sans necessite : le tiroir est le seul descendant fixe qui en souffre.
 * Mesure de la reparation, meme scene : tiroir a (0, 0) 390 x 844,
 * 37 liens sur 37 dans la fenetre. */
  body[data-mist-plein="menu"] .elementor .site-header {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

/* ⚠️ `!important` SUR `top` ET `max-height` : CE SONT DES STYLES EN LIGNE.
 * `mist-site.js:301-302` ecrit `links.style.top` et `links.style.maxHeight` a
 * chaque ouverture (`setDrawerPos`). Un style en ligne bat toute feuille, quelle
 * que soit sa specificite : sans `!important`, la regle serait du CSS mort et la
 * sonde n'y verrait rien — le tiroir rendrait 200 et resterait ancre au header. */
  body[data-mist-plein="menu"] .elementor .site-header .nav-links.open {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--mist-plein-top, 0px) !important;
    width: 100%;
    height: var(--mist-plein-h, 100dvh);
    max-height: none !important;
    z-index: 9991;
    padding: 14px 18px 104px;
    border-bottom: 0;
    overflow-y: auto;
    /* Daniel : « qu'on ne puisse pas defiler gauche/droite ». On le dit au
       moteur tactile ET a la boite : `touch-action` seul laisserait passer une
       molette, `overflow-x` seul laisserait passer un balayage qui rebondit sur
       le parent. */
    overflow-x: hidden;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

/* --- La barre de recherche du panneau ---------------------------------------
 * 🔴 LE SITE A DEJA UNE RECHERCHE, ET ON NE LUI EN AJOUTE PAS UNE SECONDE.
 * `mist-plein.js` DEPLACE `.site-search-panel` — le champ `#siteSearchInput`,
 * l'index et le rendu de `mist-site.js:203-250` — dans le panneau, puis le
 * remet a sa place a la fermeture. Il n'existe donc jamais deux champs, deux
 * index, ni deux comportements de touche.
 *
 * Ce qui change ici est de la mise en page : la palette de commandes redevient
 * une barre posee en haut du panneau. */
  body[data-mist-plein="menu"] [data-mist-plein-recherche] {
    width: auto;
    max-width: none;
    margin: 0 0 10px;
    border: 1px solid var(--line, #E7E6F2);
    border-radius: 16px;
    box-shadow: none;
    animation: none;
  }

  body[data-mist-plein="menu"] [data-mist-plein-recherche] .site-search-field {
    padding: 10px 12px;
  }

  /* 🔴 16 px, PAS 15 : SOUS LE SEUIL, iOS SAFARI AGRANDIT LA PAGE AU FOCUS.
     Daniel, 22/09 : « sinon ca va faire l'effet de zoom, un peu degueulasse ».
     Le plancher du lot precedent (`mist-mobile.css:272`) couvre deja ce champ ;
     on le reaffirme ici parce que la barre change de contexte et qu'une regle
     de plancher qu'on ne voit pas dans le fichier qu'on relit est une regle
     qu'on finit par supprimer. */
  body[data-mist-plein="menu"] [data-mist-plein-recherche] .site-search-field input {
    font-size: 16px;
  }

  body[data-mist-plein="menu"] [data-mist-plein-recherche] .site-search-results {
    max-height: 42vh;
    padding: 4px;
  }

  /* Sans resultat affiche, la barre ne doit pas reserver de place : le menu
     commence juste dessous. */
  body[data-mist-plein="menu"] [data-mist-plein-recherche] .site-search-results:empty {
    display: none;
  }

/* -------------------------------------------------------------------------
 * 4 — LE BANDEAU DE COOKIES
 *
 * Le panneau « Personnaliser » couvrait DEJA l'ecran : mesure du 22/09 a
 * 390 x 844 — `.mist-conso-panneau` rend 390 x 844, couverture 100 %. Rien a
 * corriger de ce cote, et donc rien n'est ecrit ici qui touche a sa mise en
 * page.
 *
 * 🔴 AUCUNE REGLE DE CE LOT NE VISE « ACCEPTER » NI « REFUSER » SEPAREMENT.
 * Un refus plus couteux qu'une acceptation est le manquement le plus sanctionne
 * par la CNIL, et il tient a une ligne de CSS. Un test l'interdit, et le banc de
 * mutation verifie qu'il mord.
 *
 * Ce qui change : le voile passe au-dessus du reste du mobilier flottant, pour
 * qu'il n'y ait vraiment QUE les cookies a l'ecran — la demande de Daniel. */
  body[data-mist-plein="cookies"] .mist-conso-voile {
    z-index: 9999;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

  body[data-mist-plein="cookies"] .mist-conso-panneau {
    width: 100%;
    max-width: none;
    height: var(--mist-plein-h, 100dvh);
    max-height: none;
    border-radius: 0;
  }

/* -------------------------------------------------------------------------
 * 5 — LE DISQUE DE SUIVI
 *
 * Daniel, 22/09 : « il y a un leger decalage sur la droite […] retirer les
 * marges gauche/droite, que ce soit presque colle au bord […] diminuer un peu
 * les tailles de typo […] que tout tienne sur un ecran vertical ».
 *
 * 🔴 CE QUE LA MESURE A TROUVE, ET QUI N'ETAIT PAS UN DEBORDEMENT.
 * Emulation iPhone, 390 x 844, modale ouverte :
 *
 *     .mist-disk-modal     0, 0     390 x 844   (deja plein ecran)
 *     .mist-disk-dialog   10, 10    370 x 824   contenu 1 035 px
 *     debordement du document : 0   —  et le chiffre ne prouve RIEN :
 *     `body` porte `overflow-x: hidden`, qui masque le defaut ET la mesure.
 *     Remesure `overflow` force a `visible` : 0 aussi. Il n'y a donc pas de
 *     debordement lateral mesurable, et on interdit quand meme le balayage
 *     lateral (`touch-action: pan-y`) : c'est ce que Daniel demande, et un
 *     rebond de defilement sur le parent produit exactement la sensation
 *     qu'il decrit.
 *
 * 🔴 EN REVANCHE, UN VRAI DEFAUT : `.mist-disk-dialog` est un
 * `display: grid; align-items: center; overflow: auto`. Quand le contenu
 * depasse la boite — 1 035 px pour 822 px a 390 — le centrage le pousse
 * AU-DESSUS du bord haut de la zone defilable, et cette partie est
 * **INATTEIGNABLE** : le titre du disque etait coupe, et aucun geste ne
 * permettait d'y revenir. `align-items: start` suffit a rendre les 213 px
 * perdus.
 *
 * ⚠️ ET LE BOUTON DE FERMETURE DU DISQUE PARTAIT AVEC LE DEFILEMENT :
 * `.mist-disk-close` est `position: absolute` DANS le conteneur qui defile.
 * La croix partagee le remplace, et lui est retire pour ne pas afficher deux
 * croix qui ne font pas la meme chose. */
  body[data-mist-plein="disque"] .mist-disk-modal {
    padding: 0;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

  body[data-mist-plein="disque"] .mist-disk-dialog {
    width: 100%;
    max-width: none;
    height: var(--mist-plein-h, 100dvh);
    max-height: none;
    align-items: start;
    gap: 10px;
    padding: 10px 10px 64px;
    border: 0;
    border-radius: 0;
    overflow-x: hidden;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

  body[data-mist-plein="disque"] .mist-disk-close {
    display: none;
  }

  /* Les marges laterales tombent : « presque colle au bord ». Le
     `padding-right: 58px` de `mist-disque-suivi.css:326` degageait le bouton de
     fermeture, qui n'est plus la.
     ⚠️ ET LA CARTE DISPARAIT AVEC. Une carte blanche a 1 px du bord d'un
     panneau blanc n'encadre plus rien : elle ne fait que manger 24 px de
     chaque cote. C'est le meme constat que le mode inline du 07/09, « enferme
     dans une carte qu'on ne controle pas ». */
  body[data-mist-plein="disque"] .mist-disk-dialog .mist-disk-info {
    padding: 0;
    padding-right: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  /* 🔴 LES 65 px QUI RESTAIENT, REPRIS SUR LES BLANCS ET PAS SUR LE TEXTE.
     Apres la premiere passe, le dialogue mesurait encore 909 px de contenu pour
     844 de fenetre a 390 : il fallait defiler pour voir les commandes, et
     `turn.focus()` (`mist-disque-suivi.js:305`) poussait le titre hors du haut.
     Les 65 px sont repris sur les marges et les rembourrages — AUCUNE taille de
     texte n'a ete touchee pour les trouver. */
  body[data-mist-plein="disque"] .mist-disk-dialog .mist-disk-info h2,
  body[data-mist-plein="disque"] .mist-disk-dialog .mist-disk-info__titre {
    margin: 2px 0 8px;
  }

  body[data-mist-plein="disque"] .mist-disk-dialog .mist-disk-note {
    margin-top: 10px;
    padding: 12px;
    border-radius: 16px;
  }

  body[data-mist-plein="disque"] .mist-disk-dialog .mist-disk-note strong {
    margin-bottom: 4px;
    font-size: 15px;
  }

  /* Les tailles de typo, reduites d'un cran. ⚠️ AUCUNE NE DESCEND SOUS 13 px :
     c'est une aide a la comprehension d'un suivi de sante, lue par des
     salaries. Le titre passe de 30 a 21 px, le corps de 16 a 14,5, la fiche de
     lecture de 16 a 14. Mesure avant/apres dans la fiche du lot. */
  body[data-mist-plein="disque"] .mist-disk-dialog .mist-disk-info h2,
  body[data-mist-plein="disque"] .mist-disk-dialog .mist-disk-info__titre {
    font-size: 21px;
    line-height: 1.2;
  }

  body[data-mist-plein="disque"] .mist-disk-dialog .mist-disk-info p {
    font-size: 14.5px;
    line-height: 1.4;
  }

  body[data-mist-plein="disque"] .mist-disk-dialog .mist-disk-panel,
  body[data-mist-plein="disque"] .mist-disk-dialog .mist-disk-panel p,
  body[data-mist-plein="disque"] .mist-disk-dialog .mist-disk-panel li {
    font-size: 14px;
    line-height: 1.4;
  }

  /* Le disque lui-meme reprend la place gagnee sur les marges. */
  body[data-mist-plein="disque"] .mist-disk-dialog .mist-disk-stage {
    gap: 10px;
  }

/* -------------------------------------------------------------------------
 * 6 — LE CHAT
 *
 * Daniel, 22/09 : « la ca se cale au-dessus et, quand on commence a ecrire, ca
 * redecale encore en haut, ca fait bizarre. Il faudrait que ca prenne tout
 * l'ecran […] la tu vois encore un peu l'ecran derriere, c'est un peu chelou ».
 *
 * Mesure du 22/09 a 390 x 844 : `.mist-bot-panneau` rendait 374 x 608 a
 * (8, 154) — **69 % de l'ecran**, et 31 % de page visible derriere.
 *
 * 🔴 LE DECALAGE A LA SAISIE N'EST PAS UN DEFAUT DE POSITION, C'EST LE CLAVIER.
 * iOS reduit la fenetre VISUELLE sans toucher a la fenetre de MISE EN PAGE :
 * `100vh` garde l'ancienne hauteur, le bas du panneau passe sous le clavier, et
 * le navigateur fait remonter la page pour montrer le champ. D'ou le
 * « ca redecale encore en haut ». La hauteur vient donc de
 * `--mist-plein-h`, que `mist-plein.js` publie depuis `visualViewport`. */
  body[data-mist-plein="chat"] .mist-bot-panneau {
    left: 0;
    right: 0;
    top: var(--mist-plein-top, 0px);
    bottom: auto;
    width: 100%;
    height: var(--mist-plein-h, 100dvh);
    max-height: none;
    border: 0;
    border-radius: 0;
    z-index: 9992;
    animation: none;
    overscroll-behavior: contain;
    touch-action: pan-y;
    /* 🔴 LE REMBOURRAGE EST SUR LE PANNEAU, PAS SUR SON DERNIER ENFANT.
       Premier essai : `padding-bottom` sur `.mist-bot-mention`. Le panneau est
       une colonne flexible de hauteur fixe — la mention gardait sa position et
       c'est le fil qui retrecissait. Capture regardee a 390 : la croix
       recouvrait « …issues de notre FAQ, sans reformulation ». Pose sur le
       panneau, le rembourrage retire vraiment 76 px au contenu, et la croix
       tombe SOUS le champ de saisie. */
    padding-bottom: 76px;
  }

  /* ⚠️ ET LES 76 px NE SUFFISAIENT PAS POUR LA MENTION : elle tombe encore dans
     la bande de la croix (y 720..768 a 390, croix 14..62 en x). Deuxieme
     capture regardee : « …issues de notre FAQ » passait sous le disque orange.
     On degage donc la GAUCHE plutot que d'ajouter 56 px de blanc sous tout le
     panneau — la croix ne mesure que 48 px de large. */
  body[data-mist-plein="chat"] .mist-bot-mention {
    padding-left: 74px;
  }

/* -------------------------------------------------------------------------
 * 7 — L'ACCESSIBILITE
 *
 * Son panneau vit dans le `shadowRoot` de `div.ea11y-widget` : AUCUNE feuille
 * du document ne l'atteint, quelle que soit sa specificite. Sa regle de plein
 * ecran est donc portee par `mist-plein.js`, qui l'injecte dans l'arbre
 * d'ombre — meme comportement, autre porte d'entree. Rien a ecrire ici.
 *
 * ⚠️ Mesure du 22/09 : son conteneur rendait 390 x 591 a (0, 253), soit 70 %
 * de l'ecran. C'est le panneau que Daniel cite en exemple (« ca vient se coller
 * nickel en bas ») ; il passe quand meme en plein ecran, parce que le goal
 * demande UN comportement pour les cinq.
 *
 * -------------------------------------------------------------------------
 * 8 — CE QUI DEFILE DERRIERE
 *
 * Un panneau plein ecran au-dessus d'une page qui defile encore, c'est le
 * « defilement lateral » et le « ca redecale » de Daniel. On fige le document
 * pendant l'ouverture. `mist-chrome.css:154` le fait deja pour `body.nav-open` ;
 * on le fait pour les cinq, au meme endroit, une seule fois. */
  body[data-mist-plein] {
    overflow: hidden;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }
}