/* Boulpi 1.0.4 — les cadres des blocs : scène (ombre au sol dessinée par la page), carte d'état, page 404, et les branchements
   du site (en-tête, bandeau, graphique MASI, sondages, Boulpi de passage).
   Les animations sont dans boulpi.css, à l'identique de la référence validée ; cette feuille ne touche ni durée ni mouvement.
   Les SVG s'affichent en <img> ; la taille se règle avec --mbb-taille (200 px par défaut). Couleurs : la palette du site
   (fond #080D18, cadres #0D1422 / #253045, libellés #6A84A8, valeurs #E8EEF8, or #C9A84C). */

/* La scène : Boulpi sans ombre, l'ombre au sol en dessous, hors de l'élément animé (la transformation part du sol). */
.mbb-scene{--mbb-taille:200px;position:relative;box-sizing:border-box;width:calc(var(--mbb-taille)*1.1);height:calc(var(--mbb-taille)*1.15);max-width:100%}
.mbb-scene .mbb-sol{position:absolute;left:25%;right:25%;bottom:2.6%;height:7.8%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),rgba(0,0,0,0))}
.mbb-scene .mbb-humeur,.mbb-scene .mbb-retourne{position:absolute;left:4.5%;top:3.5%;width:var(--mbb-taille);height:var(--mbb-taille)}
.mbb-scene .mbb-humeur img{display:block;width:100%;height:100%}

/* La carte d'état : le cadre vient de boulpi.css (.mbb-carte) ; ici la pile des deux lignes et le mot court, caché par défaut.
   Les couleurs sont forcées (!important) : la feuille du site colore tous ses span (« p, li, span, td { color … !important } »). */
.mbb-carte .mbb-carte-textes{display:flex;flex-direction:column;min-width:0}
.mbb-carte .mbb-l1,.mbb-carte .mbb-l2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mbb-carte .mbb-l1{color:#6A84A8!important}
.mbb-carte .mbb-l2{color:#E8EEF8!important}
.mbb-carte .mbb-carte-mot{display:none;color:#E8EEF8!important}

/* 1.0.2 — la carte d'état dans l'en-tête du site (#mbv-global-header .mbv-l2, posée par site.js à gauche des cartes MASI et
   MASI 20) : même cadre, même fond, et la hauteur des cartes .mbv-idx (31 px) — l'en-tête est fixe et la page garde son
   décalage, la rangée ne doit pas grandir. Les valeurs du MASI restent sur une ligne : la carte cède la place (flex 0 1 auto, ellipse).
   Le rond fait 24 px (1.0.3 : boîte .mbb-pastille, l'image animée déborde du rond sans être coupée : aucun overflow ici). */
.mbb-carte.mbb-carte--entete{position:relative;width:auto;max-width:300px;height:auto;min-height:0;align-self:stretch;flex:0 1 auto;min-width:0;gap:8px;padding:2px 14px 2px 6px}
.mbb-carte--entete .mbb-pastille{width:24px;height:24px}
.mbb-carte--entete .mbb-l1{font-size:9px;letter-spacing:1.5px;line-height:1.1}
.mbb-carte--entete .mbb-l2{font-size:11px;margin-top:0;line-height:1.2}
/* Une seule source visible : l'ancienne pastille de l'en-tête et l'état du bandeau de l'accueil, masqués dès que la carte est posée.
   1.0.4 — le bloc d'état du bandeau (#mbv-status-wrap, 173 px, flex: 0 0 auto) et le compte à rebours sortent de la mise en page
   (display, et non plus visibility) : avec sa boîte gardée, l'accueil faisait 461 px de large sur un écran de 375 px, Chrome Android
   dézoomait la page et iOS la laissait glisser de côté. La marque et la source gardent leur place. */
#mbv-global-header.mbb-carte-posee #mbv-status{display:none!important}
.mbv-tape.mbb-etat-masque #mbv-status-wrap,.mbv-tape.mbb-etat-masque #mbv-time-txt{display:none!important}

/* 1.0.2 — le chargement du graphique MASI de l'accueil : centré sur la zone du graphique (.mbv-chart-body), jamais sur l'en-tête du widget.
   1.0.4 — pendant la durée minimale du premier chargement de la visite (.mbb-attente--retenue, posée par site.js), le graphique
   reste invisible : Boulpi n'est jamais par-dessus, et il est retiré dans le même instant où le graphique apparaît. */
.mbv-chart-body.mbb-attente{position:relative}
.mbv-chart-body.mbb-attente--retenue #tv_masi_chart{visibility:hidden}
.mbb-chargement.mbb-chargement--graphique{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;pointer-events:none}

/* 1.0.2 — sondages : la petite pastille du « merci », à côté de « Vote enregistré » (dans .mbvp-fi), jamais sur les pourcentages
   ni sur le graphique. Les marges négatives la font tenir dans la hauteur du pied de carte : aucun déplacement de la mise en page. */
.mbb-merci-pastille{display:inline-block;vertical-align:middle;width:28px;height:28px;margin:-10px 8px -10px 0;border-radius:50%;background:#16203A}

/* 1.0.2 — Boulpi de passage : calque plein écran, opaque, couleur de fond du site, au-dessus de l'en-tête fixe (z-index 99999)
   et de son panneau (100001). Le chargement au centre : 160 px sur ordinateur, 120 px sur téléphone (posé par site.js). */
.mbb-passage{position:fixed;top:0;left:0;right:0;bottom:0;inset:0;z-index:100100;background:#080D18;display:flex;align-items:center;justify-content:center}

/* La page 404 : Boulpi se retourne, puis le code, le titre, le texte et le bouton, centrés. */
.mbb-404{--mbb-taille:200px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:24px 16px;font-family:inherit;color:#E8EEF8}
.mbb-404 .mbb-scene{margin-bottom:10px}
.mbb-404 .mbb-404-code{margin:0;font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#6A84A8!important}
.mbb-404 .mbb-404-titre{margin:0;font-size:28px;line-height:1.2;font-weight:700;color:#E8EEF8!important}
.mbb-404 .mbb-404-texte{margin:0;max-width:44ch;font-size:15px;line-height:1.5;color:#A7ADB8!important}
.mbb-404 .mbb-404-bouton{display:inline-flex;align-items:center;justify-content:center;min-height:40px;margin-top:10px;padding:0 18px;border-radius:8px;border:1px solid #C9A84C;background:transparent;color:#E8EEF8;text-decoration:none;font:inherit;font-weight:600}
.mbb-404 .mbb-404-bouton:hover,.mbb-404 .mbb-404-bouton:focus-visible{background:rgba(201,168,76,.12);text-decoration:none}

/* Texte lu par les lecteurs d'écran seulement (chargement, carte réduite). */
.mbb-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (max-width:720px){
  /* La carte de l'en-tête se réduit à la pastille et un mot (« Ouvert » / « Fermé ») ; le texte complet reste pour les lecteurs d'écran et dans
     aria-label. La rangée des indices (.mbv-l2) est trop étroite pour trois cartes sur un téléphone : la carte garde sa place dans le DOM, mais
     se pose dans la rangée du haut, entre le logo et le menu, là où le site mettait son ancienne pastille — la rangée MASI garde sa géométrie. */
  .mbb-carte.mbb-carte--entete{position:absolute;top:16px;right:66px;height:28px;min-height:0;width:auto;max-width:none;flex:none;align-self:auto;gap:5px;padding:2px 8px 2px 3px;z-index:1}
  .mbb-carte--entete .mbb-carte-textes{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .mbb-carte--entete .mbb-carte-mot{display:block;font-size:10px;font-weight:700;letter-spacing:.4px;color:#E8EEF8;white-space:nowrap}
}
@media (max-width:400px){
  /* La pastille seule (le texte complet reste dans aria-label et pour les lecteurs d'écran). 1.0.4 : à 400 px et moins (360 jusque-là) —
     la page ne débordant plus, la rangée du haut a sa vraie largeur : sur un écran de 390 px le logo va jusqu'à 255 px et le menu
     commence à 330 px, la carte avec son mot (74 px, à 66 px du bord) chevauchait le logo. À 70 px du bord, le cadre de l'image
     animée (10 px à droite du rond) reste à 6 px du menu, et la carte à 33 px du logo (18 px à 375, 3 px à 360). */
  .mbb-carte.mbb-carte--entete{right:70px;padding:2px 3px}
  .mbb-carte--entete .mbb-carte-mot{display:none}
}
@media (max-width:480px){
  .mbb-404 .mbb-404-titre{font-size:24px}
}
/* Moins d'animations : le script ne crée pas le calque de passage ; ceinture et bretelles. Les autres règles sont dans boulpi.css. */
@media (prefers-reduced-motion:reduce){
  .mbb-passage{display:none}
}