/*
 * Feuille du site mmm (Mmmmmm) pour Vaadin Flow 24 (thème Lumo), servie telle quelle (sans SCSS)
 * depuis /themes/mmm/ et liée par AppShell.
 *
 * Reprise de l'ancien thème Vaadin 8 (VAADIN/themes/mmm/styles.css et ses sources SCSS
 * themes/mmm, themes/rencontrebase) :
 *  - le body porte la classe du site (« mmm ») et « mobile » ou « desktop »
 *    (UiReadyServiceInitListener) : les règles restent préfixées par .mmm ;
 *  - les règles visent les classes du projet (MStrings : m-*…), que les vues Flow conservent ;
 *  - la structure Vaadin 8 (v-slot, v-csslayout, v-panel, v-window-contents…) a disparu : la règle est
 *    reportée sur l'élément Flow (vaadin-button, vaadin-text-field, vaadin-dialog…), sur ses
 *    parties (::part(input-field), ::part(label), ::part(overlay)…) ou sur les propriétés Lumo ;
 *  - une fenêtre (Dialog), une bulle (Popover) ou une liste de ComboBox s'affiche dans une surcouche
 *    (vaadin-dialog, vaadin-popover, vaadin-combo-box), placée sous le body, qui
 *    reçoit les classes posées sur le composant ;
 *  - les règles Valo génériques sans objet (calendrier, grille, arbre, accordéon…) sont supprimées.
 *
 * Images : chemins « img/… » relatifs à cette feuille (copie de VAADIN/themes/mmm/img).
 */

/* ========================================================================
   Polices
   ======================================================================== */

/* latin-ext */
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Josefin Sans'), local('JosefinSans'), url(https://fonts.gstatic.com/s/josefinsans/v17/Qw3PZQNVED7rKGKxtqIqX5E-AVSJrOCfjY46_DjQbMhhLzTs.woff2) format('woff2'), url(https://fonts.gstatic.com/s/josefinsans/v12/Qw3aZQNVED7rKGKxtqIqX5EUDXx-.woff) format('woff');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Josefin Sans'), local('JosefinSans'), url(https://fonts.gstatic.com/s/josefinsans/v17/Qw3PZQNVED7rKGKxtqIqX5E-AVSJrOCfjY46_DjQbMZhLw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/josefinsans/v12/Qw3aZQNVED7rKGKxtqIqX5EUDXx-.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

/* latin-ext */
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Josefin Sans SemiBold'), local('JosefinSans-SemiBold'), url(https://fonts.gstatic.com/s/josefinsans/v9/C6HYlRF50SGJq1XyXj04z9sVlKlcXvEcgUssOU60Pj4.woff2) format('woff2'), url(https://fonts.gstatic.com/s/josefinsans/v12/Qw3FZQNVED7rKGKxtqIqX5Ec0lhte10n.woff) format('woff');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Josefin Sans SemiBold'), local('JosefinSans-SemiBold'), url(https://fonts.gstatic.com/s/josefinsans/v9/C6HYlRF50SGJq1XyXj04z_Bf3Xtc57ojmY2ox2Xv8Go.woff2) format('woff2'), url(https://fonts.gstatic.com/s/josefinsans/v12/Qw3FZQNVED7rKGKxtqIqX5Ec0lhte10n.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

/* latin-ext */
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Josefin Sans Bold'), local('JosefinSans-Bold'), url(https://fonts.gstatic.com/s/josefinsans/v17/Qw3PZQNVED7rKGKxtqIqX5E-AVSJrOCfjY46_N_XbMhhLzTs.woff2) format('woff2'), url(https://fonts.gstatic.com/s/josefinsans/v12/Qw3FZQNVED7rKGKxtqIqX5Ectllte10n.woff);
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Josefin Sans Bold'), local('JosefinSans-Bold'), url(https://fonts.gstatic.com/s/josefinsans/v17/Qw3PZQNVED7rKGKxtqIqX5E-AVSJrOCfjY46_N_XbMZhLw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/josefinsans/v12/Qw3FZQNVED7rKGKxtqIqX5Ectllte10n.woff);
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

/* latin */
@font-face {
  font-family: 'Montez';
  font-style: normal;
  font-weight: 400;
  src: local('Montez'), local('Montez-Regular'), url(https://fonts.gstatic.com/s/montez/v6/aq8el3-0osHIcFK6bXAPkw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/montez/v8/845ZNMk5GoGIX8lW07rZ.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

/* ========================================================================
   Propriétés Lumo : couleurs, polices et arrondis du site
   ======================================================================== */

html:root {
  --lumo-font-family: 'Josefin Sans', sans-serif;
  --lumo-font-size-xxs: 10px;
  --lumo-font-size-xs: 12px;
  --lumo-font-size-s: 13px;
  --lumo-font-size-m: 14px;
  --lumo-font-size-l: 16px;
  --lumo-font-size-xl: 20px;
  --lumo-font-size-xxl: 24px;
  --lumo-font-size-xxxl: 32px;
  --lumo-primary-color: #8b3fe8;
  --lumo-primary-color-50pct: rgba(139, 63, 232, 0.5);
  --lumo-primary-color-10pct: rgba(139, 63, 232, 0.1);
  --lumo-primary-text-color: #8b3fe8;
  --lumo-body-text-color: #4d4d4d;
  --lumo-secondary-text-color: #777777;
  --lumo-header-text-color: #2f2f2f;
  --lumo-error-color: #ed473b;
  --lumo-error-text-color: #ed473b;
  --lumo-border-radius-s: 4px;
  --lumo-border-radius-m: 6px;
  --lumo-border-radius-l: 12px;
  /* hauteur des champs de saisie Valo */
  --lumo-text-field-size: 41px;
}

/* ========================================================================
   Base (ancienne base bootstrap et application Valo)
   ======================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
  color: #777777;
}
/* ancienne application Valo (.v-app) : police, taille et couleur du texte */
.mmm {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.55;
  color: #513766;
  background-color: #ffffff;
  cursor: default;
}
.mmm input,
.mmm button,
.mmm select,
.mmm textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
.mmm a {
  color: #337ab7;
  text-decoration: none;
}
.mmm a:hover,
.mmm a:focus {
  color: #23527c;
  text-decoration: underline;
}
.mmm figure {
  margin: 0;
}
.mmm img {
  vertical-align: middle;
}
.mmm hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eeeeee;
}
.mmm [role="button"] {
  cursor: pointer;
}
/* les libellés Vaadin 8 étaient des div sans marge : pas de marge Lumo sur les paragraphes */
:where(.mmm) p {
  margin: 0;
}
/* les HorizontalLayout Vaadin 8 occupaient toute la largeur (styles.scss) */
.mmm vaadin-horizontal-layout {
  width: 100%;
}

/* ========================================================================
   Coquille (MainLayout) : remplace MainScreen et ses mises en page Vaadin 8
   ======================================================================== */

.mmm .m-main-screen {
  width: 100%;
  height: 100%;
}
/* ordinateur : menu latéral à gauche, contenu (avertissements + vue) à droite, défilant */
.mmm .m-main-screen-desktop {
  display: flex;
  flex-direction: row;
}
.mmm .m-main-screen-desktop > .m-side-menu-slot {
  flex: none;
  position: relative;
  height: 100%;
  z-index: 10;
}
.mmm .m-main-screen-desktop > .warning-and-main-container {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
}
.mmm .m-main-screen-desktop > .warning-and-main-container > .m-view-container {
  background-color: transparent;
  overflow: visible;
}
/* mobile : tiroir de menu, puis en-tête, avertissements et vue, la vue défilant seule */
.mmm .m-main-screen-mobile > .m-fullscreen-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.mmm .m-main-screen-mobile > .m-fullscreen-container > * {
  flex: none;
}
.mmm .m-main-screen-mobile > .m-fullscreen-container > .m-view-container {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

/* ========================================================================
   Composants Flow : apparence par défaut reprise de Vaadin 8 / Valo
   ======================================================================== */

/* Boutons : en Vaadin 8, le thème n'incluait pas le bouton Valo ; un bouton sans classe n'avait ni
   fond ni bordure (seul .v-button-wrap était arrondi). Les variantes Lumo ([theme]) restent intactes. */
:where(.mmm) vaadin-button:not([theme]) {
  height: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  border-radius: 18px;
  box-shadow: none;
  cursor: pointer;
}
:where(.mmm) vaadin-button:not([theme])::part(label) {
  padding: 0;
  white-space: normal;
  overflow: visible;
}
/* Lumo dessine le survol dans ::before / ::after ; les règles du site y placent des icônes */
:where(.mmm) vaadin-button::before,
:where(.mmm) vaadin-button::after {
  content: none;
  position: static;
  inset: auto;
  opacity: 1;
  background-color: transparent;
  border-radius: 0;
  pointer-events: none;
}

/* Champs de saisie (champ Valo : fond blanc, bordure fine, 41px de haut) */
:where(.mmm) :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field,
    vaadin-number-field, vaadin-text-area, vaadin-combo-box, vaadin-date-picker, vaadin-select)::part(input-field) {
  background: #ffffff;
  border: 1px solid #C8C0D8;
  border-radius: 6px;
  padding: 0 9px;
  box-shadow: inset 0 1px 0 #f8f8f8, 0 1px 0 rgba(255, 255, 255, 0.1);
  color: #4d4d4d;
}
:where(.mmm) vaadin-text-area::part(input-field) {
  padding: 7px;
}
:where(.mmm) :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field,
    vaadin-number-field, vaadin-text-area, vaadin-combo-box, vaadin-date-picker) > :is(input, textarea) {
  color: #4d4d4d;
  font-weight: 400;
}
:where(.mmm) :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field,
    vaadin-number-field, vaadin-text-area, vaadin-combo-box, vaadin-date-picker, vaadin-select)[focused]::part(input-field) {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}
:where(.mmm) :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field,
    vaadin-number-field, vaadin-text-area, vaadin-combo-box, vaadin-date-picker, vaadin-select,
    vaadin-checkbox-group, vaadin-radio-group)::part(label) {
  white-space: normal;
  overflow: visible;
}

/* Cases à cocher et boutons radio : images du thème (checkbox-btn.png, radio-btn-v2.png) à la place
   de la case Lumo, voir « Champs de saisie » plus bas ; ici on neutralise le dessin Lumo. */
:where(.mmm) vaadin-checkbox::part(checkbox),
:where(.mmm) vaadin-radio-button::part(radio) {
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
}
:where(.mmm) vaadin-checkbox::part(checkbox)::after,
:where(.mmm) vaadin-radio-button::part(radio)::after {
  display: none;
}
/* groupes d'options : empilés comme les OptionGroup Vaadin 8 (et non en ligne comme dans Lumo) */
:where(.mmm) :is(vaadin-checkbox-group, vaadin-radio-group)::part(group-field) {
  display: block;
}

/* Fenêtres (Dialog) : fenêtre Valo, sans marge intérieure, en-tête gris et gras */
:where(.mmm) vaadin-dialog::part(overlay) {
  border-radius: 12px;
  background-color: #ffffff;
  color: #4d4d4d;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1), 0 16px 80px -6px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.12643);
}
:where(.mmm) vaadin-dialog::part(content) {
  padding: 0;
}
:where(.mmm) vaadin-dialog::part(title) {
  color: #828282;
  font-size: 1em;
}
/* rideau des fenêtres modales (Valo : couleur du site à 72 % d'opacité) */
.mmm vaadin-dialog::part(backdrop) {
  background: rgba(71, 63, 87, 0.72);
}

/* Bulles (Popover, anciens PopupButton) */
:where(.mmm) vaadin-popover::part(content) {
  padding: 0;
}

/* Infobulles */
:where(.mmm) vaadin-tooltip::part(overlay) {
  background-color: rgba(222, 212, 229, 0.9);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  color: black;
  border-radius: 9px;
  max-width: 35em;
  font-size: 15px;
}

/* Notifications (MmmUi.notify, classe m-notification) : notification Valo sombre */
:where(.mmm) vaadin-notification-card::part(overlay) {
  background: #473F57;
  color: rgba(255, 255, 255, 0.9);
  border-radius: 6px;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
  text-align: center;
}
:where(.mmm) vaadin-notification-card::part(content) {
  padding: 21px 24px;
}
:where(.mmm) vaadin-notification-card {
  max-width: 320px;
}

/* ========================================================================
   Mosaïque (ancien add-on masonry) : colonnes CSS, classes inchangées
   (masonry-layout, masonry-item…). L'ordre de lecture suit les colonnes.
   ======================================================================== */

.mmm .masonry-layout {
  column-width: 300px;
  column-gap: 0;
}
.mmm .masonry-layout .masonry-item {
  display: block;
  position: relative;
  break-inside: avoid;
  margin: 8px auto;
  border-radius: 1px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  background-color: #fff;
  width: 284px;
  text-align: left;
}
.mmm .masonry-layout .masonry-item.masonry-double-wide {
  width: 584px;
  column-span: all;
}
.mmm .masonry-layout .masonry-item > * {
  padding: 10px;
}
.mmm .masonry-layout.masonry-paper-shadow .masonry-item {
  background: white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  z-index: 1;
}
.mmm .masonry-layout.masonry-paper-shadow .masonry-item > * {
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  position: relative;
  z-index: 1;
}

/* ========================================================================
   Feuille du site (styles.scss)
   ======================================================================== */

body {
  color: #777777;
}
body .red {
  color: #553d68;
}

/* ========================================================================
   Composants asao-commons
   ======================================================================== */

@keyframes asaoSpinner {
  to {
    transform: rotate(360deg);
  }
}
.mmm .download-preparing:before {
  content: '';
  box-sizing: border-box;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50%;
  border: 2px solid #ccc;
  border-top-color: #000;
  animation: asaoSpinner .6s linear infinite;
}
.mmm .sticky-component {
  position: fixed;
}
.mmm .sticky-component.scroll-down {
  transform: translate3d(0, -100%, 0);
  transition: transform 0.5s;
}
.mmm .sticky-component.scroll-up {
  transform: none;
  transition: transform 0.5s;
}
.mmm .asao-square-infos-container {
  font-family: "Josefin Sans", sans-serif;
}
.mmm .asao-square-infos-container span {
  font-size: 14px;
  padding: 0;
}
.mmm .asao-square-infos-container .title-label {
  font-size: 20px;
}
.mmm .asao-notification {
  max-width: 100vw;
}

/* ========================================================================
   Chargement progressif (ancien add-on lazylayouts)
   ======================================================================== */

.mmm div.lazy-loading {
  border-color: rgba(0, 0, 0, 0.05);
  border-style: dashed;
  border-width: 2px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.05);
  width: 100%;
  padding: 20px;
  text-align: center;
  transition: opacity 0.3s ease-in-out;
  opacity: 0.5;
}
.mmm .lazy-loading div.lazy-loading-message {
  text-align: center;
  color: #000;
  text-shadow: rgba(255, 255, 255, 0.9) 0px 0px 2px;
  width: 100%;
  margin-top: 10px;
}

/* ========================================================================
   Réglages globaux (rencontrebase)
   ======================================================================== */

.mmm *:focus {
  outline: none;
}
.mmm vaadin-combo-box.m-dropdown::part(overlay) {
  border: 1px solid #777777;
  color: #777777;
}

/* ========================================================================
   Fenêtres (popup-style)
   ======================================================================== */

.mmm vaadin-popover.usr-action-block::part(overlay) {
  width: 240px;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid  #000000;
}
.mmm vaadin-popover.usr-action-block .usr-action-block-confirmtext {
  margin: 5px 0 5px;
}
.mmm vaadin-dialog.m-popup-window::part(overlay) {
  background-color: #fff;
  border-radius: 12px;
}
.mmm vaadin-dialog.m-popup-window .m-main-label {
  text-align: center;
  font-size: 1.2857142857em;
  color: #2f2f2f;
  line-height: 1.2;
  margin-bottom: 10px;
  padding: 5px;
}
.mmm vaadin-dialog.m-popup-window .m-small-label {
  text-align: center;
  font-size: 0.8571428571em;
  line-height: 1.2;
  color: #777777;
}
.mmm vaadin-dialog.m-popup-window::part(content) {
  position: relative;
}
.mmm vaadin-dialog.m-popup-window .m-close-btn {
  height: 15px;
  margin: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 15px;
}
.mmm vaadin-dialog.m-popup-window::part(content) {
  text-align: center;
}
/* En Vaadin 8, ces largeurs ne visaient que les boutons d'un CssLayout (.v-csslayout), donc d'un div ici */
.mmm vaadin-dialog.m-popup-window div > vaadin-button {
  width: 95%;
}
.mmm vaadin-dialog.m-popup-window div > .m-negative-btn {
  width: 50%;
  display: inline-block;
}
.mmm vaadin-dialog.m-popup-window div > .m-positive-btn {
  width: 50%;
  display: inline-block;
}
.mmm vaadin-dialog.m-popup-window .m-centered-single-button-cont .m-negative-btn {
  width: auto;
  display: block;
}
.mmm vaadin-dialog.m-popup-window .m-centered-single-button-cont .m-positive-btn {
  width: auto;
  display: block;
}
.mmm vaadin-combo-box::part(overlay) {
  background-color: #fff;
  border: 1px solid #ebebeb;
}
.mmm vaadin-combo-box vaadin-combo-box-item {
  padding: 10px 15px;
  border-bottom: 1px solid #ebebeb;
}
.mmm vaadin-combo-box vaadin-combo-box-item:hover {
  color: #553d68;
}

/* ========================================================================
   Fenêtre de localisation (location-popup-style)
   ======================================================================== */

.mmm vaadin-dialog.location-popup::part(overlay) {
  padding: 15px;
  overflow: visible !important;
}
.mmm vaadin-dialog.location-popup::part(content) {
  position: inherit !important;
}
.mmm vaadin-dialog.location-popup::part(content)::before {
  display: none;
}
.mmm vaadin-dialog.location-popup::part(header) {
  display: none;
}
.mmm .location-undefined {
  color: #513766;
  font-weight: 600;
  font-size: 1em;
  margin-bottom: 10px;
  text-align: left;
  width: 100%;
  line-height: 1.2;
}
.mmm .postal-code-field {
  text-align: center;
}
.mmm .postal-code-field .autocomplete-textfield {
  width: auto;
}
.mmm .postal-code-field :is(vaadin-text-field, vaadin-password-field, vaadin-text-area, vaadin-combo-box, vaadin-date-picker, vaadin-select, vaadin-checkbox-group, vaadin-radio-group)::part(label) {
  font-size: 18px;
  display: inline-block;
  line-height: 1em;
  margin-right: 10px;
}
.mmm .postal-code-field :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker),
.mmm :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker).postal-code-field {
  --lumo-text-field-size: 44px;
}
.mmm .postal-code-field :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker)::part(input-field),
.mmm :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker).postal-code-field::part(input-field) {
  border-radius: 6px;
  border: 1px solid #C8C0D8;
  height: 44px;
  padding: 10px 20px;
  padding-left: 35px;
}
.mmm .postal-code-field :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker) > input,
.mmm :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker).postal-code-field > input {
  color: #513766;
  font-size: 1em;
  font-weight: 600;
}
.mmm .postal-code-field :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker) > input::placeholder,
.mmm :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker).postal-code-field > input::placeholder {
  color: #513766;
  opacity: 0.6;
}
.mmm .postal-code-field .m-fantasy-location-place {
  position: relative;
}
.mmm .postal-code-field .m-fantasy-location-place::before {
  position: absolute;
  top: 10px;
  left: 12px;
  content: '';
  display: block;
  width: 15px;
  height: 21px;
  background-image: url("img/icons/localisation.svg");
  background-size: cover;
}
.mmm .postal-code-field .m-fantasy-location-place :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker)::part(input-field),
.mmm .postal-code-field :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker).m-fantasy-location-place::part(input-field) {
  padding-left: 40px;
}
.mmm .postal-code-field .m-fantasy-location-place :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker) > input,
.mmm .postal-code-field :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker).m-fantasy-location-place > input {
  font-weight: bold;
}
.mmm .postal-code-field::part(label) {
  display: block;
  text-align: center;
}
.mmm .postal-code-field::part(label) {
  font-size: 18px;
  color: #8c3fe8;
}
.mmm .postal-code-field {
  width: 100%;
  margin-bottom: 20px;
}
.mmm .postal-code-field select {
  background-color: #fff;
  background-image: none;
  border: 1px solid #8c3fe8;
  color: #8c3fe8;
  font-size: 18px;
  border-radius: 4px;
  text-align: center;
  max-width: 100%;
}
.mmm .m-fantasy-display-map {
  margin-top: 15px;
  text-align: right;
  margin-bottom: 15px;
}
.mmm .m-fantasy-display-map {
  width: 100%;
}
.mmm .m-fantasy-display-map::part(label) {
  font-size: 1em;
  color: #513766;
  font-weight: bold;
  text-decoration: underline;
}

/* ========================================================================
   Fenêtres sur mobile (popup-mobile-style)
   ======================================================================== */

/* ========================================================================
   Boutons (button-style)
   ======================================================================== */

.mmm vaadin-button {
  border-radius: 18px;
  display: inline-block;
  font-size: 1em;
  cursor: pointer;
}
.mmm vaadin-button.m-positive-btn,
.mmm vaadin-button.m-negative-btn {
  width: 100%;
  margin: 0 auto;
  display: block;
  max-width: 360px;
}
.mmm .m-clickable {
  cursor: pointer;
}
.mmm vaadin-checkbox.m-inline {
  padding-top: 12px;
}
.mmm vaadin-checkbox.m-inline a {
  color: inherit;
  cursor: inherit;
}
.mmm vaadin-checkbox.m-inline a:hover {
  text-decoration: none;
}
.mmm vaadin-checkbox.m-inline {
  display: inline-block;
}
.mmm vaadin-checkbox.m-inline input[type="checkbox"] + label {
  display: inline-block;
}
.mmm vaadin-checkbox.m-inline::part(checkbox) {
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
}
.mmm vaadin-checkbox.m-inline input[type="checkbox"] + label strong {
  font-weight: bold;
}
.mmm .m-positive-btn,
.mmm #confirmdialog-ok-button,
.mmm .asao-pay-new,
.mmm .asao-pay-alias {
  text-align: center;
}
.mmm .m-positive-btn .eightyfive,
.mmm #confirmdialog-ok-button .eightyfive,
.mmm .asao-pay-new .eightyfive,
.mmm .asao-pay-alias .eightyfive {
  width: 85%;
  text-align: center;
}
.mmm .m-positive-btn,
.mmm #confirmdialog-ok-button,
.mmm .asao-pay-new,
.mmm .asao-pay-alias {
  background: #ee94e2;
  background: linear-gradient(135deg, #ee94e2 0%, #8b3fe8 100%);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.4);
  background-color: #C8C0D8;
  color: #fff;
  margin: 5px auto;
  padding: 9px 10px;
  text-transform: uppercase;
  font-weight: bold;
  border: none;
  width: 100%;
}
.mmm #confirmdialog-window .primary {
  float: right;
}
.mmm vaadin-dialog::part(title) {
  font-weight: bold;
}
.mmm .m-negative-btn,
.mmm #confirmdialog-cancel-button {
  text-align: center;
}
.mmm .m-negative-btn,
.mmm #confirmdialog-cancel-button {
  background-color: #EBE7F1;
  color: #513766;
  margin: 5px auto;
  padding: 7px 15px;
  text-transform: uppercase;
  font-weight: 600;
  width: 100%;
  border: 2px solid #C8C0D8;
}
.mmm .m-negative-btn.without-border,
.mmm #confirmdialog-cancel-button.without-border {
  border: none;
}
.mmm .m-button-with-icon {
  background-color: #fff;
  position: relative;
  overflow: hidden;
  margin: 7px auto;
  color: #777777;
  display: block;
  width: 100%;
  border: 1px solid #777777;
  border-radius: 6px;
  line-height: 1;
  font-size: 1.1428571429em;
}
.mmm .m-button-with-icon vaadin-button {
  display: block;
  width: 100%;
  min-height: 35px;
  padding: 5px 30px 5px 15px;
}
.mmm .m-button-with-icon [disabled] {
  pointer-events: none;
}
.mmm .m-button-with-icon .m-dropdown {
  display: block;
  padding: 0;
  position: relative;
  z-index: 2;
}
.mmm .m-button-with-icon .m-dropdown::part(toggle-button) {
  font-size: 20px;
}
.mmm .m-button-with-icon .m-dropdown :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker),
.mmm .m-button-with-icon :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker).m-dropdown {
  display: block;
  width: 100% !important;
  --lumo-text-field-size: 35px;
}
.mmm .m-button-with-icon .m-dropdown :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker)::part(input-field),
.mmm .m-button-with-icon :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker).m-dropdown::part(input-field) {
  background: transparent;
  border: medium none;
  height: 35px;
  padding: 5px 30px 5px 15px;
  cursor: pointer;
}
.mmm .m-button-with-icon .m-icon {
  position: absolute;
  right: 10px;
  top: 8px;
}

/* ========================================================================
   Champs de saisie (input-style)
   ======================================================================== */

.mmm .m-select-list {
  width: 100%;
  margin-bottom: 15px;
}
.mmm .m-select-list::part(label) {
  font-size: 1em;
}
.mmm .m-select-list :is(vaadin-text-field, vaadin-password-field, vaadin-text-area, vaadin-combo-box, vaadin-date-picker, vaadin-select, vaadin-checkbox-group, vaadin-radio-group)::part(label),
.mmm .m-select-list:is(vaadin-text-field, vaadin-password-field, vaadin-text-area, vaadin-combo-box, vaadin-date-picker, vaadin-select, vaadin-checkbox-group, vaadin-radio-group)::part(label) {
  text-transform: uppercase;
  font-size: 0.8571428571em;
  color: #7C7191;
}
.mmm .m-select-list :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker),
.mmm :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker).m-select-list {
  --lumo-text-field-size: 45px;
}
.mmm .m-select-list :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker)::part(input-field),
.mmm :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker).m-select-list::part(input-field) {
  border-radius: 6px;
  border: 1px solid #C8C0D8;
  height: 45px;
  padding: 15px;
}
.mmm :is(vaadin-checkbox-group, vaadin-radio-group) vaadin-checkbox {
  width: 50%;
}
.mmm vaadin-checkbox {
  display: block;
  float: left;
  margin: 3px 0;
}
.mmm vaadin-checkbox::part(checkbox) {
  display: none;
}
.mmm vaadin-checkbox[checked]::part(checkbox) {
  background-position: -17px 0;
}
.mmm vaadin-checkbox label {
  cursor: pointer;
  font-size: 1em;
  color: #513766;
  display: inline-block;
  vertical-align: middle;
  line-height: 1.2;
  font-weight: 400;
}
.mmm vaadin-checkbox::part(checkbox) {
  margin-right: 8px;
  content: "";
  width: 17px;
  height: 17px;
  display: inline-block;
  vertical-align: top;
  background-image: url("img/checkbox-btn.png");
  background-repeat: no-repeat;
  background-size: 34px 17px;
}
.mmm vaadin-radio-button {
  margin: 5px 0;
  display: block;
}
.mmm vaadin-radio-button::part(radio) {
  display: none;
}
.mmm vaadin-radio-button[checked]::part(radio) {
  background-position: -17px 0;
}
.mmm vaadin-radio-button label {
  cursor: pointer;
  font-size: 1.1428571429em;
  color: #777777;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}
.mmm vaadin-radio-button::part(radio) {
  margin-right: 8px;
  content: "";
  width: 17px;
  height: 17px;
  display: inline-block;
  vertical-align: top;
  background-image: url("img/radio-btn-v2.png");
  background-repeat: no-repeat;
  background-size: 34px 17px;
}
.mmm .m-big-textfield {
  background-color: #fff;
  overflow: hidden;
  margin: 5px auto;
  padding: 6px 15px;
  color: #777777;
  display: block;
  width: 100%;
  border: 1px solid #777777;
  font-size: 1.1428571429em;
  border-radius: 6px;
}
.mmm .m-big-textfield vaadin-text-area {
  width: 100%;
}
.mmm .m-big-textfield vaadin-text-area::part(input-field) {
  height: 100%;
  border: none;
  overflow: auto;
  box-shadow: none;
}
.mmm .m-big-textfield vaadin-text-area > textarea {
  line-height: 1.3;
}
.mmm .m-switcher {
  display: block;
  position: relative;
  margin-top: 10px;
}
.mmm .m-switcher.m-checked::before {
  background-color: #9649E8;
}
.mmm .m-switcher.m-checked::after {
  transform: translateX(14px);
}
.mmm .m-switcher::before {
  content: "";
  width: 36px;
  height: 22px;
  display: inline-block;
  background-color: #C8C0D8;
  border-radius: 11px;
  background-image: none;
  margin-right: 10px;
  position: absolute;
  left: 0;
  top: 0;
  transition: all 300ms ease;
}
.mmm .m-switcher::after {
  content: "";
  display: block;
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 18px;
  background-color: #fff;
  box-shadow: 0px 1px 3px 0px #432957;
  top: 2px;
  left: 2px;
  transition: all 300ms ease;
}
.mmm .m-switcher label {
  padding-left: 45px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 1em;
  font-weight: 600;
  color: #513766;
  display: inline-block;
  vertical-align: middle;
  position: relative;
}
.mmm .m-switcher label::before {
  display: none;
}
.mmm .m-dropdown {
  max-width: 320px;
  margin: 10px auto 20px;
  font-size: 1em;
}
.mmm .m-dropdown {
  position: relative;
  width: 100%;
}
.mmm .m-dropdown::after {
  content: "";
  display: block;
  position: absolute;
  right: 15px;
  top: 13px;
  width: 18px;
  height: 18px;
  background-image: url("img/icons/chevron-petit.svg");
  background-size: cover;
}
.mmm .m-dropdown :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker),
.mmm :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker).m-dropdown {
  width: 100% !important;
  --lumo-text-field-size: 44px;
}
.mmm .m-dropdown :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker)::part(input-field),
.mmm :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker).m-dropdown::part(input-field) {
  height: 44px;
  border: 1px solid #C8C0D8;
  padding: 15px;
  border-radius: 6px;
  padding-right: 30px;
}
.mmm .m-dropdown :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker) > input,
.mmm :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker).m-dropdown > input {
  font-size: 1em;
  font-weight: bold;
}

/* ========================================================================
   Commun (common-style)
   ======================================================================== */

.mmm :is(vaadin-text-field, vaadin-password-field, vaadin-text-area, vaadin-combo-box, vaadin-date-picker, vaadin-select, vaadin-checkbox-group, vaadin-radio-group)::part(label) {
  white-space: normal;
}
.mmm .m-myfilter-cat-title {
  width: 100%;
}
.mmm .m-square-infos-container {
  font-family: "Josefin Sans", Arial, sans-serif;
  padding: 10px 50px;
}
.mmm .m-square-infos-container span {
  font-size: 14px;
  padding: 0;
}
.mmm .m-square-infos-container .vtc-title-label {
  font-size: 20px;
}
.mmm vaadin-text-area {
  width: 100%;
}
.mmm vaadin-button {
  cursor: pointer;
}
.mmm .m-no-access {
  background-color: #c2c2c2;
  border-radius: 5px;
  border: 1px solid grey;
}
.mmm .m-rounded-container {
  max-width: 450px;
  margin: 0 auto;
  border: 1px solid #553d68;
  border-radius: 6px;
  padding: 10px;
  text-align: center;
}
.mmm .m-rounded-container .m-main-label {
  display: block;
  text-align: center;
  color: #805b9e;
}
.mmm .m-rounded-container .m-main-label-bold {
  display: block;
  text-align: center;
  color: #805b9e;
  font-weight: bold;
}
.mmm .m-rounded-container .m-small-label {
  text-align: center;
  display: block;
  color: #a2a2a2;
  font-size: 12px;
}
.mmm .m-rounded-container vaadin-button {
  position: relative;
  float: left;
  width: 50%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.mmm .m-fullscreen-container {
  width: 100%;
}
.mmm .m-page-main-container {
  padding: 0 15px;
  width: 100%;
}
.mmm .m-page-main-container > * {
  width: 100%;
}
.mmm .m-alert-labels-container {
  padding: 25px 15px;
}
.mmm .m-red-alert-label {
  font-size: 1.0714285714em;
  text-align: center;
  color: #553d68;
  font-weight: 600;
  padding: 0 10px;
}
.mmm .m-single-textfield {
  width: 100%;
  padding: 15px 0;
}
.mmm .m-single-textfield :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker),
.mmm :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker).m-single-textfield {
  display: block;
  width: 100%;
  --lumo-text-field-size: 35px;
}
.mmm .m-single-textfield :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker)::part(input-field),
.mmm :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker).m-single-textfield::part(input-field) {
  height: 35px;
  border: 1px solid #777777;
  padding: 5px 15px;
}
.mmm .m-single-textfield :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker) > input,
.mmm :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker).m-single-textfield > input {
  color: #777777;
  line-height: 1;
  font-size: 1em;
}
.mmm .m-single-textfield :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker).error::part(input-field),
.mmm :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker).m-single-textfield.error::part(input-field) {
  border-color: #e30000;
}
.mmm .m-set-password .m-single-textfield {
  padding: 5px 0;
}
.mmm .m-set-password .m-page-main-container {
  max-width: 400px;
  margin: 0 auto;
}
.mmm .m-html-label * {
  background-color: transparent !important;
  color: #434343;
}
.mmm .m-pointer {
  cursor: pointer !important;
}
.mmm .m-title-container {
  background-color: #553d68;
  color: #fff;
  box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2);
  font-size: 0.8571428571em;
  font-weight: bold;
  padding: 15px;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
  text-align: center;
}
.mmm .m-title-container .m-title-label {
  text-align: center;
}
.mmm .m-title-container vaadin-icon {
  color: #b8b8b8;
  padding: 0px 5px;
  font-size: 0.8em;
  vertical-align: middle;
}
.mmm .m-title-container + .m-subtitle-container {
  margin-top: -15px;
}
.mmm .m-subtitle-container {
  background-color: #fff;
  color: #553d68;
  box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2);
  font-size: 0.8571428571em;
  font-weight: bold;
  padding: 15px;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 15px;
  width: 100%;
  text-align: center;
  margin: 0 auto 15px;
}
.mmm .m-subtitle-container .m-subtitle-label {
  text-align: center;
}
.mmm :is(vaadin-text-field, vaadin-password-field, vaadin-text-area, vaadin-combo-box, vaadin-date-picker, vaadin-select, vaadin-checkbox-group, vaadin-radio-group)::part(label) {
  font-size: 1em;
  color: #a2a2a2;
}
.mmm .m-error-label {
  color: #e30000;
  padding: 0 10px;
  margin-bottom: 10px;
  font-weight: bold;
}
.mmm .m-error-label.m-faq {
  margin-top: 0px;
}
.mmm .m-datefield {
  text-transform: uppercase;
  font-size: 0.8571428571em;
  color: #7C7191;
}
.mmm .m-main-content {
  overflow: auto;
}
/* (fond blanc de .v-slot-m-main-content non repris : aucun m-main-content n'avait d'emplacement en Vaadin 8) */
.mmm .m-main-content {
  width: 100%;
}
.mmm .m-main-content {
  overflow: auto;
  width: 100%;
}
.mmm .m-main-content .masonry-layout {
  width: 100%;
}
.mmm .m-age-confirmation .m-fantasies-container .masonry-layout {
  opacity: 0;
}
.mmm .m-fantasies-filter-wrapper {
  position: sticky;
  top: 0;
  background-color: #EBE7F1;
  z-index: 9;
  padding: 15px 0;
}
.mmm vaadin-dialog.m-popup-window.m-age-confirmation::part(content) {
  overflow: visible;
}
.mmm vaadin-dialog.m-popup-window.m-age-confirmation .m-age-confirmation {
  background: #ffffff;
  margin: auto;
  padding: 0;
  position: relative;
  text-align: center;
  display: block;
  max-height: none;
  display: block;
  color: #513766;
  font-size: 1em;
  padding: 21px;
  border-radius: 4px;
  background-color: white;
  backface-visibility: hidden;
}
.mmm vaadin-dialog.m-popup-window.m-age-confirmation .m-age-confirmation .m-bold-label {
  font-weight: bold;
  text-align: center;
}
.mmm vaadin-dialog.m-popup-window.m-age-confirmation .m-age-confirmation .m-top-label {
  margin-top: 20px;
}
.mmm vaadin-dialog.m-popup-window.m-age-confirmation .m-age-confirmation .m-popup-title {
  font-size: 1.1428571429em;
  font-weight: 700;
  line-height: 1.4285714286em;
  vertical-align: top;
}
.mmm vaadin-dialog.m-popup-window.m-age-confirmation .m-age-confirmation .m-popup-title .disclaimer-title {
  color: #C86ACE;
}
.mmm vaadin-dialog.m-popup-window.m-age-confirmation .m-age-confirmation .m-protect {
  background: url("img/icons/protection.svg") no-repeat 24px 0px;
  padding-left: 58px;
  color: #513766;
  font-weight: normal;
}
.mmm vaadin-dialog.m-popup-window.m-age-confirmation .m-age-confirmation .m-separator {
  position: relative;
  padding-bottom: 1em;
}
.mmm vaadin-dialog.m-popup-window.m-age-confirmation .m-age-confirmation .m-separator:after {
  content: "";
  border-bottom: 1px solid #C8C0D8;
  position: absolute;
  bottom: 0;
  left: -100px;
  right: -100px;
  height: 0.5em;
}
.mmm .m-icon-msg {
  background-image: url("img/icons/chat.svg");
  background-repeat: no-repeat;
  background-size: cover;
  width: 24px;
  height: 24px;
  margin: 10px auto;
  position: relative;
}
.mmm .m-icon-pts {
  background-size: 100% auto;
  width: 48px;
  margin: 20px auto 0px auto;
  position: relative;
}
.mmm .m-icon-pts::after {
  content: "points G";
  font-weight: normal;
  font-size: 11px;
  color: black;
  top: 2px;
  position: absolute;
}
.mmm .m-report-view .m-page-main-container {
  padding: 18px;
}
.mmm .m-report-view .m-main-label {
  font-size: 1em;
  color: #513766;
  text-align: center;
  margin: 10px auto;
  max-width: 400px;
  line-height: 1.2;
}
.mmm .m-report-view .m-main-label::before {
  content: '';
  vertical-align: middle;
  margin-right: 10px;
  display: inline-block;
  width: 25px;
  height: 25px;
  background-image: url("img/icons/signaler.svg");
  background-size: cover;
}
.mmm .m-report-view .m-main-label::part(label) {
  display: none;
}
.mmm .m-report-view .m-main-label-bold {
  font-size: 1.1428571429em;
  color: #343434;
  text-align: center;
  font-weight: bold;
  line-height: 1.1;
}
.mmm .blueimp-gallery {
  background-color: rgba(71, 63, 87, 0.72);
}
.mmm vaadin-tooltip::part(overlay) {
  overflow: hidden;
}
.mmm .m-no-border {
  border: none !important;
}
.mmm .m-textfield-group {
  width: 100%;
  padding: 20px 15px;
}
.mmm .m-textfield-group :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker),
.mmm :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker).m-textfield-group {
  display: block;
  width: 100%;
  --lumo-text-field-size: 35px;
}
.mmm .m-textfield-group :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker)::part(input-field),
.mmm :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker).m-textfield-group::part(input-field) {
  border: 1px solid #777777;
  padding: 5px 15px;
  height: 35px;
}
.mmm .m-textfield-group :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker) > input,
.mmm :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker).m-textfield-group > input {
  color: #777777;
  line-height: 1;
  font-size: 1.1428571429em;
}
.mmm .m-textfield-group :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker):first-child::part(input-field),
.mmm :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker).m-textfield-group:first-child::part(input-field) {
  border-radius: 6px 6px 0px 0px;
}
.mmm .m-textfield-group :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker):last-child::part(input-field),
.mmm :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker).m-textfield-group:last-child::part(input-field) {
  border-top: none;
  border-radius: 0px 0px 6px 6px;
}
.mmm .m-textfield-group :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker).error::part(input-field),
.mmm :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker).m-textfield-group.error::part(input-field) {
  border-color: #e30000;
}
.mmm .m-fantasy-layout .mmm-popup-button {
  float: right;
}
.mmm vaadin-popover.ex-popup-button::part(overlay) {
  border-radius: 2px;
  box-shadow: 0px 1px 5px 0px #777777;
  background-color: #fff;
  padding: 0;
  border: none;
}
.mmm vaadin-popover.ex-popup-button .notification-option {
  padding: 13px 20px;
  color: #513766;
  font-size: 1em;
  font-weight: 600;
  line-height: 1;
}
.mmm vaadin-popover.ex-popup-button .notification-option.m-option-separator {
  padding-left: 35px;
  border-bottom: 1px solid #C8C0D8;
}
.mmm vaadin-popover.ex-popup-button .notification-option.m-report-ad {
  position: relative;
  padding-left: 35px;
}
.mmm vaadin-popover.ex-popup-button .notification-option.m-report-ad::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background-image: url("img/icons/signaler.svg");
  background-size: cover;
  position: absolute;
  left: 7px;
  top: 8px;
}
.mmm vaadin-popover.ex-popup-button .notification-option.m-profile-picture-main::before {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  background-image: url("img/icons/check.svg");
  background-size: cover;
  position: absolute;
  left: 7px;
  top: 8px;
}
.mmm vaadin-popover.ex-popup-button .notification-option.m-remove-ad {
  position: relative;
  padding-left: 35px;
}
.mmm vaadin-popover.ex-popup-button .notification-option.m-remove-ad::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background-image: url("img/icons/supprimer.svg");
  background-size: cover;
  position: absolute;
  left: 7px;
  top: 8px;
}
.mmm .m-page-title {
  text-align: center;
  font-size: 1.1428571429em;
  font-weight: 600;
  display: block;
  padding: 8px;
}
.mmm .m-container {
  padding: 18px;
}
.mmm :is(vaadin-text-field, vaadin-password-field, vaadin-email-field) {
  margin: 9px 0px;
  width: 100%;
}
.mmm :is(vaadin-text-field, vaadin-password-field, vaadin-email-field)::part(input-field) {
  border-radius: 6px;
}
.mmm :is(vaadin-text-field, vaadin-password-field, vaadin-email-field).m-last-field {
  margin-bottom: 0px;
}
.mmm .m-line-separator {
  border-bottom: 1px solid #C8C0D8;
}
.mmm .m-link span {
  text-decoration: underline;
}
.mmm .center-only {
  text-align: center;
}
.mmm .important-info,
.mmm .important-information {
  font-weight: bold;
}
.mmm .lighter {
  font-weight: normal;
}
.mmm .m-link {
  color: #9649E8;
  font-weight: bold;
  text-decoration: underline;
  cursor: pointer;
}
.mmm .m-link-label {
  cursor: pointer;
}
.mmm .m-profile-presence-layout {
  text-align: center;
  display: inline-block;
}
.mmm .m-profile-presence-layout.m-profile-presence-ONLINE .m-profile-presence-label::before {
  background-color: #4DC75E;
}
.mmm .m-profile-presence-layout.m-profile-presence-AWAY .m-profile-presence-label::before {
  background-color: #E39E26;
}
.mmm .m-profile-presence-layout .m-profile-presence-label {
  display: inline-block;
  border: 1px solid #C8C0D8;
  border-radius: 3px;
  font-size: 0.6428571429em;
  text-transform: uppercase;
  color: #7C7191;
  padding: 5px 7px;
  text-align: center;
  display: inline-block;
  line-height: 1;
  font-weight: bold;
  position: relative;
}
.mmm .m-profile-presence-layout .m-profile-presence-label::before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  position: absolute;
  top: -5px;
  right: -5px;
}
.mmm .m-menu-container .m-menu-item-active {
  background-color: #EBE7F1;
}
.mmm vaadin-dialog.m-sg-window .m-tip-item,
.mmm .m-tip-container .m-tip-item {
  padding: 15px;
}

/* ========================================================================
   Fantasmes : liste, fiche, édition (fantasy-page-style)
   ======================================================================== */

.mmm .m-cr-desc {
  width: 310px;
}
.mmm .m-cr-desc .m-bold-label {
  font-size: 16px;
  font-weight: bold;
  margin-top: 10px;
}
.mmm .m-cr-desc .m-negative-btn {
  float: right;
  margin-bottom: 10px;
}
.mmm vaadin-dialog.m-fantasy-edit-window::part(content) {
  max-height: 600px;
  overflow: auto;
}
.mmm vaadin-dialog.m-fantasy-edit-window.m-mobile .m-fantasy-edit-target-gender :is(vaadin-checkbox, vaadin-radio-button) .m-gender-WOMAN::before {
  content: "";
  display: block;
  background-image: url("img/icons/femme.svg");
  width: 25px;
  height: 25px;
  background-size: cover;
  position: absolute;
  left: 8px;
  top: 8px;
}
.mmm vaadin-dialog.m-fantasy-edit-window.m-mobile .m-fantasy-edit-target-gender :is(vaadin-checkbox, vaadin-radio-button) .m-gender-MAN::before {
  content: "";
  display: block;
  background-image: url("img/icons/homme.svg");
  width: 25px;
  height: 25px;
  background-size: cover;
  position: absolute;
  left: 8px;
  top: 8px;
}
.mmm vaadin-dialog.m-fantasy-edit-window.m-mobile .m-fantasy-edit-target-gender :is(vaadin-checkbox, vaadin-radio-button) .m-gender-COUPLE_WOMAN_MAN::before {
  content: "";
  display: block;
  background-image: url("img/icons/femme.svg");
  width: 25px;
  height: 25px;
  background-size: cover;
  position: absolute;
  left: 1px;
  top: 8px;
}
.mmm vaadin-dialog.m-fantasy-edit-window.m-mobile .m-fantasy-edit-target-gender :is(vaadin-checkbox, vaadin-radio-button) .m-gender-COUPLE_WOMAN_MAN::after {
  content: "";
  display: block;
  background-image: url("img/icons/homme.svg");
  width: 25px;
  height: 25px;
  background-size: cover;
  position: absolute;
  left: 17px;
  top: 8px;
}
.mmm vaadin-dialog.m-fantasy-edit-window.m-mobile .m-fantasy-edit-target-gender :is(vaadin-checkbox, vaadin-radio-button) .m-gender-COUPLE_2_WOMEN::before {
  content: "";
  display: block;
  background-image: url("img/icons/femme.svg");
  width: 25px;
  height: 25px;
  background-size: cover;
  position: absolute;
  left: 1px;
  top: 8px;
}
.mmm vaadin-dialog.m-fantasy-edit-window.m-mobile .m-fantasy-edit-target-gender :is(vaadin-checkbox, vaadin-radio-button) .m-gender-COUPLE_2_WOMEN::after {
  content: "";
  display: block;
  background-image: url("img/icons/femme.svg");
  width: 25px;
  height: 25px;
  background-size: cover;
  position: absolute;
  left: 17px;
  top: 8px;
}
.mmm vaadin-dialog.m-fantasy-edit-window.m-mobile .m-fantasy-edit-target-gender :is(vaadin-checkbox, vaadin-radio-button) .m-gender-COUPLE_2_MEN::before {
  content: "";
  display: block;
  background-image: url("img/icons/homme.svg");
  width: 25px;
  height: 25px;
  background-size: cover;
  position: absolute;
  left: 1px;
  top: 8px;
}
.mmm vaadin-dialog.m-fantasy-edit-window.m-mobile .m-fantasy-edit-target-gender :is(vaadin-checkbox, vaadin-radio-button) .m-gender-COUPLE_2_MEN::after {
  content: "";
  display: block;
  background-image: url("img/icons/homme.svg");
  width: 25px;
  height: 25px;
  background-size: cover;
  position: absolute;
  left: 17px;
  top: 8px;
}
.mmm vaadin-dialog.m-fantasy-edit-window .wizard-progress-bar {
  padding: 20px;
  max-width: 350px;
  margin: 0 auto;
  display: block;
}
.mmm vaadin-dialog.m-fantasy-edit-window .wizard-progress-bar .step-icon {
  text-align: center;
}
.mmm vaadin-dialog.m-fantasy-edit-window .wizard-progress-bar .step-icon::after {
  display: none;
}
.mmm vaadin-dialog.m-fantasy-edit-window .wizard-progress-bar .step-icon {
  width: 40px;
  height: 40px;
  border-radius: 40px;
  background-color: #EBE7F1;
  font-size: 0;
  color: transparent;
  padding: 9px;
  position: relative;
}
.mmm vaadin-dialog.m-fantasy-edit-window .wizard-progress-bar .step-icon::after {
  content: "";
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  right: 100%;
  top: 50%;
  z-index: -1;
  background-color: #EBE7F1;
}
.mmm vaadin-dialog.m-fantasy-edit-window .wizard-progress-bar .step-icon.current,
.mmm vaadin-dialog.m-fantasy-edit-window .wizard-progress-bar .step-icon.completed {
  background-color: #9649E8;
}
.mmm vaadin-dialog.m-fantasy-edit-window .wizard-progress-bar .step-icon.current:after,
.mmm vaadin-dialog.m-fantasy-edit-window .wizard-progress-bar .step-icon.completed:after {
  background-color: #9649E8;
}
.mmm vaadin-dialog.m-fantasy-edit-window .wizard-progress-bar .step-icon.current.m-edit::before,
.mmm vaadin-dialog.m-fantasy-edit-window .wizard-progress-bar .step-icon.completed.m-edit::before {
  background-image: url("img/icons/fantasime-blanc.svg");
}
.mmm vaadin-dialog.m-fantasy-edit-window .wizard-progress-bar .step-icon.current.m-photo-camera::before,
.mmm vaadin-dialog.m-fantasy-edit-window .wizard-progress-bar .step-icon.completed.m-photo-camera::before {
  background-image: url("img/icons/photo-blanc.svg");
}
.mmm vaadin-dialog.m-fantasy-edit-window .wizard-progress-bar .step-icon.current.m-location,
.mmm vaadin-dialog.m-fantasy-edit-window .wizard-progress-bar .step-icon.completed.m-location {
  padding: 9px 9px;
}
.mmm vaadin-dialog.m-fantasy-edit-window .wizard-progress-bar .step-icon.current.m-location::before,
.mmm vaadin-dialog.m-fantasy-edit-window .wizard-progress-bar .step-icon.completed.m-location::before {
  width: 18px;
  background-image: url("img/icons/location-blanc.svg");
}
.mmm vaadin-dialog.m-fantasy-edit-window .wizard-progress-bar .step-icon.m-profile::before {
  content: "";
  display: block;
  background-image: url("img/icons/members-blanc.svg");
  width: 20px;
  height: 18px;
  background-size: cover;
}
.mmm vaadin-dialog.m-fantasy-edit-window .wizard-progress-bar .step-icon.m-edit {
  padding: 9px 10px;
}
.mmm vaadin-dialog.m-fantasy-edit-window .wizard-progress-bar .step-icon.m-edit::before {
  content: "";
  display: block;
  background-image: url("img/icons/fantasime-unselected.svg");
  width: 23px;
  height: 22px;
  background-size: cover;
}
.mmm vaadin-dialog.m-fantasy-edit-window .wizard-progress-bar .step-icon.m-photo-camera::before {
  content: "";
  display: block;
  background-image: url("img/icons/photo-sombre.svg");
  width: 20px;
  height: 18px;
  background-size: cover;
}
.mmm vaadin-dialog.m-fantasy-edit-window .wizard-progress-bar .step-icon.m-location {
  padding: 9px 12px;
}
.mmm vaadin-dialog.m-fantasy-edit-window .wizard-progress-bar .step-icon.m-location::before {
  content: "";
  display: block;
  background-image: url("img/icons/localisation.svg");
  width: 15px;
  height: 21px;
  background-size: cover;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-fantasy-edit-target-gender {
  max-width: 280px;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-fantasy-edit-target-gender :is(vaadin-checkbox, vaadin-radio-button) {
  display: block;
  width: 100%;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-fantasy-edit-target-gender :is(vaadin-checkbox, vaadin-radio-button)[checked] label {
  border-color: #9649E8;
  color: #513766;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-fantasy-edit-target-gender :is(vaadin-checkbox, vaadin-radio-button) label {
  display: block;
  width: 100%;
  border-radius: 24px;
  border: 2px solid #C8C0D8;
  text-align: center;
  min-height: 44px;
  max-height: 48px;
  line-height: 1;
  padding: 14px 44px;
  position: relative;
  margin-bottom: 12px;
  font-size: 1em;
  color: #7C7191;
  font-weight: 600;
  white-space: nowrap;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-fantasy-edit-target-gender vaadin-checkbox::part(checkbox),
.mmm vaadin-dialog.m-fantasy-edit-window .m-fantasy-edit-target-gender vaadin-radio-button::part(radio) {
  display: none;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-fantasy-edit-target-gender vaadin-checkbox::part(checkbox),
.mmm vaadin-dialog.m-fantasy-edit-window .m-fantasy-edit-target-gender vaadin-radio-button::part(radio) {
  display: none;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-fantasy-edit-target-gender :is(vaadin-checkbox, vaadin-radio-button) .m-gender-WOMAN,
.mmm vaadin-dialog.m-fantasy-edit-window .m-fantasy-edit-target-gender :is(vaadin-checkbox, vaadin-radio-button) .m-gender-MAN,
.mmm vaadin-dialog.m-fantasy-edit-window .m-fantasy-edit-target-gender :is(vaadin-checkbox, vaadin-radio-button) .m-gender-COUPLE_WOMAN_MAN,
.mmm vaadin-dialog.m-fantasy-edit-window .m-fantasy-edit-target-gender :is(vaadin-checkbox, vaadin-radio-button) .m-gender-COUPLE_2_WOMEN,
.mmm vaadin-dialog.m-fantasy-edit-window .m-fantasy-edit-target-gender :is(vaadin-checkbox, vaadin-radio-button) .m-gender-COUPLE_2_MEN {
  width: 44px;
  height: 44px;
  display: block;
  background-color: #C8C0D8;
  border-radius: 22px;
  position: absolute;
  left: -1px;
  top: 0;
  overflow: hidden;
  border-radius: 22px;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-fantasy-edit-target-gender :is(vaadin-checkbox, vaadin-radio-button) .m-gender-WOMAN::before,
.mmm vaadin-dialog.m-fantasy-edit-window .m-fantasy-edit-target-gender :is(vaadin-checkbox, vaadin-radio-button) .m-gender-MAN::before,
.mmm vaadin-dialog.m-fantasy-edit-window .m-fantasy-edit-target-gender :is(vaadin-checkbox, vaadin-radio-button) .m-gender-COUPLE_WOMAN_MAN::before,
.mmm vaadin-dialog.m-fantasy-edit-window .m-fantasy-edit-target-gender :is(vaadin-checkbox, vaadin-radio-button) .m-gender-COUPLE_2_WOMEN::before,
.mmm vaadin-dialog.m-fantasy-edit-window .m-fantasy-edit-target-gender :is(vaadin-checkbox, vaadin-radio-button) .m-gender-COUPLE_2_MEN::before {
  content: "";
  display: block;
  background-image: url("img/icons/w.png");
  width: 40px;
  height: 40px;
  background-size: cover;
  position: absolute;
  left: 2px;
  top: 6px;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-fantasy-edit-target-gender :is(vaadin-checkbox, vaadin-radio-button) .m-gender-MAN::before {
  background-image: url("img/icons/m.png");
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-fantasy-edit-target-gender :is(vaadin-checkbox, vaadin-radio-button) .m-gender-COUPLE_WOMAN_MAN::before {
  background-image: url("img/icons/m_w.png");
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-fantasy-edit-target-gender :is(vaadin-checkbox, vaadin-radio-button) .m-gender-COUPLE_2_WOMEN::before {
  background-image: url("img/icons/w_w.png");
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-fantasy-edit-target-gender :is(vaadin-checkbox, vaadin-radio-button) .m-gender-COUPLE_2_MEN::before {
  background-image: url("img/icons/m_m.png");
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-wizard-step-result {
  padding: 20px;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-wizard-step-result .m-fantasy-result-title {
  text-align: center;
  margin-top: 20px;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-wizard-step-result .m-fantasy-result-title {
  color: #513766;
  font-size: 1.2857142857em;
  font-weight: bold;
  text-align: center;
  margin-bottom: 0;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-wizard-step-result .m-fantasy-result-detail {
  text-align: center;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-wizard-step-result .m-fantasy-result-detail {
  color: #513766;
  font-size: 1em;
  font-weight: 600;
  text-align: center;
  margin-bottom: 30px;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-wizard-step-result vaadin-button {
  display: block;
  max-width: 320px;
  margin: 0 auto;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-wizard-step-result vaadin-button {
  border: 2px solid #C8C0D8;
  padding: 5px 10px;
  width: 100%;
  text-align: center;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-wizard-step-result vaadin-button::part(label) {
  text-transform: uppercase;
  font-size: 1em;
  color: #513766;
  font-weight: 600;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-fantasy-advanced-options {
  display: block;
  margin-top: 10px;
  text-align: center;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-wizard-step-edit-fantasy-step-3 .m-myprofile-description-new-photo-layout {
  background-color: #EBE7F1;
  width: 132px;
  height: 132px;
  border-radius: 6px;
  color: #513766;
  font-size: 1.0714285714em;
  border-color: #EBE7F1;
  margin: 0;
  font-weight: 600;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-wizard-step-edit-fantasy-step-3 .m-myprofile-description-new-photo-layout .choose-picture {
  display: block;
  margin-top: 10px;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-wizard-step-edit-fantasy-step-3 span {
  text-transform: uppercase;
  font-size: 0.8571428571em;
  color: #513766;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-wizard-step-edit-fantasy-step-3 .m-myprofile-image-layout {
  width: 132px;
  height: 132px;
  overflow: auto;
  border: 1px solid #EBE7F1;
  border-radius: 6px;
  position: relative;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-wizard-step-edit-fantasy-step-3 .m-myprofile-image-layout img {
  width: 100%;
  height: auto;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-wizard-step-edit-fantasy-step-3 .m-myprofile-image-layout .mmm-popup-button {
  position: absolute;
  border-radius: 4px;
  width: 24px;
  height: 24px;
  background-color: #EBE7F1;
  right: 5px;
  top: 5px;
  background-size: cover;
  background-image: url("img/icons/more.svg");
  background-position: center;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-wizard-step-edit-fantasy-step-3 .m-myprofile-image-layout {
  margin-right: 12px;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-wizard-step-edit-fantasy-step-3 .m-fantasy-top-layout {
  width: 132px;
  height: 132px;
  border: 1px solid #EBE7F1;
  border-radius: 6px;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-wizard-step-edit-fantasy-step-3 .m-fantasy-top-layout img {
  width: 100%;
  height: auto;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-wizard-step-edit-fantasy-step-3 .m-fantasy-default-image {
  text-align: center;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-wizard-step-edit-fantasy-step-3 .m-fantasy-default-image {
  font-size: 0.8571428571em;
  color: #777777;
  font-style: italic;
  text-transform: none;
  margin-top: 10px;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-not-allowed {
  margin-top: 20px;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-not-allowed {
  text-align: center;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-not-allowed .m-fantasy-advanced-options {
  font-size: 1.2857142857em;
  color: #513766;
  font-weight: bold;
  text-align: center;
  line-height: 1.2;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-not-allowed .m-link-label {
  display: block;
  text-align: center;
  color: #9649E8;
  font-weight: bold;
  text-decoration: underline;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-wizard-step-edit-fantasy-step-4 .m-fantasy-location-place {
  position: relative;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-wizard-step-edit-fantasy-step-4 .m-fantasy-location-place::before {
  position: absolute;
  top: 10px;
  left: 12px;
  content: '';
  display: block;
  width: 15px;
  height: 21px;
  background-image: url("img/icons/localisation.svg");
  background-size: cover;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-wizard-step-edit-fantasy-step-4 .m-fantasy-location-place :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker)::part(input-field),
.mmm vaadin-dialog.m-fantasy-edit-window .m-wizard-step-edit-fantasy-step-4 :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker).m-fantasy-location-place::part(input-field) {
  padding-left: 40px;
  border: 1px solid #C8C0D8;
  border-radius: 6px;
  box-shadow: none;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-wizard-step-edit-fantasy-step-4 .m-fantasy-location-place :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker) > input,
.mmm vaadin-dialog.m-fantasy-edit-window .m-wizard-step-edit-fantasy-step-4 :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker).m-fantasy-location-place > input {
  font-weight: bold;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-wizard-step-edit-fantasy-step-4 .m-datefield {
  margin-top: 20px;
  width: 50%;
  padding: 5px;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-wizard-step-edit-fantasy-step-4 .m-datefield :is(vaadin-text-field, vaadin-password-field, vaadin-text-area, vaadin-combo-box, vaadin-date-picker, vaadin-select, vaadin-checkbox-group, vaadin-radio-group)::part(label),
.mmm vaadin-dialog.m-fantasy-edit-window .m-wizard-step-edit-fantasy-step-4 .m-datefield:is(vaadin-text-field, vaadin-password-field, vaadin-text-area, vaadin-combo-box, vaadin-date-picker, vaadin-select, vaadin-checkbox-group, vaadin-radio-group)::part(label) {
  text-transform: uppercase;
  color: #513766;
  font-size: 0.8571428571em;
  font-weight: bold;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-wizard-step-edit-fantasy-step-4 .m-datefield::part(input-field),
.mmm vaadin-dialog.m-fantasy-edit-window .m-wizard-step-edit-fantasy-step-4 .m-datefield vaadin-date-picker::part(input-field) {
  padding-left: 35px;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-wizard-step-edit-fantasy-step-4 .m-datefield::part(toggle-button) {
  border: none;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-wizard-step-edit-fantasy-step-4 .m-datefield::part(toggle-button)::before {
  font-size: 0;
  content: "";
  width: 14px;
  height: 14px;
  background-image: url("img/icons/petit gris.svg");
  background-size: cover;
  display: block;
  margin: 10px;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-wizard-step-edit-fantasy-step-4 .m-fantasy-location-title {
  text-transform: uppercase;
  color: #513766;
  font-size: 0.8571428571em;
  font-weight: bold;
  margin-bottom: 10px;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-wizard-step-edit-fantasy-step-4 .m-fantasy-location-description {
  color: #513766;
  font-size: 1em;
  font-weight: 600;
  line-height: 1.3;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-wizard-step-edit-fantasy-step-4 vaadin-date-picker[disabled] {
  opacity: 1;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-wizard-step-edit-fantasy-step-4 :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker),
.mmm vaadin-dialog.m-fantasy-edit-window :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker).m-wizard-step-edit-fantasy-step-4 {
  --lumo-text-field-size: 44px;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-wizard-step-edit-fantasy-step-4 :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker)::part(input-field),
.mmm vaadin-dialog.m-fantasy-edit-window :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker).m-wizard-step-edit-fantasy-step-4::part(input-field) {
  height: 44px;
  border-radius: 6px;
  background: transparent;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-wizard-step-edit-fantasy-step-4 :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker)[disabled]::part(input-field),
.mmm vaadin-dialog.m-fantasy-edit-window :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker).m-wizard-step-edit-fantasy-step-4[disabled]::part(input-field) {
  background: rgba(150, 73, 232, 0.15);
  border: 1px solid #9649E8;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-wizard-step-edit-fantasy-step-4 .m-fantasy-location-place {
  margin-bottom: 10px;
  margin-top: 10px;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-wizard-step-edit-fantasy-step-4 .m-fantasy-display-map {
  text-align: right;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-wizard-step-edit-fantasy-step-4 .m-fantasy-display-map::part(label) {
  font-weight: bold;
  text-decoration: underline;
  font-size: 1em;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-wizard-step-edit-fantasy-step-4 .m-window-footer .m-negative-btn,
.mmm vaadin-dialog.m-fantasy-edit-window .m-wizard-step-edit-fantasy-step-4 .m-window-footer .m-positive-btn {
  display: block;
  width: 100%;
  margin: 0 auto;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-wizard-step-edit-fantasy-step-4 .m-window-footer .m-positive-btn {
  padding: 10px 20px;
  position: relative;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-wizard-step-edit-fantasy-step-4 .m-window-footer .m-positive-btn::after {
  display: none;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-window-footer {
  text-align: center;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-window-footer {
  border-top: 1px solid #C8C0D8;
  padding: 10px 20px;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-window-footer .m-negative-btn {
  background-color: transparent;
  padding: 8px 20px;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-window-footer .m-positive-btn {
  padding: 10px 20px;
  position: relative;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-window-footer .m-positive-btn::after {
  content: "";
  display: inline-block;
  width: 15px;
  height: 11px;
  background-image: url("img/icons/chevron-petit-blanc.svg");
  background-size: cover;
  transform: rotate(-90deg);
  position: absolute;
  right: 14px;
  top: 12px;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-window-footer .m-negative-btn,
.mmm vaadin-dialog.m-fantasy-edit-window .m-window-footer .m-positive-btn {
  margin: 0 10px;
  min-width: 120px;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-window-footer .m-negative-btn,
.mmm vaadin-dialog.m-fantasy-edit-window .m-window-footer .m-positive-btn {
  min-height: 36px;
  line-height: 1;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-window-subtitle {
  text-transform: uppercase;
  color: #513766;
  font-size: 0.8571428571em;
  font-weight: bold;
  padding: 10px 20px;
}
.mmm vaadin-dialog.m-fantasy-edit-window :is(vaadin-text-field, vaadin-password-field, vaadin-email-field) {
  width: 100%;
}
.mmm vaadin-dialog.m-fantasy-edit-window vaadin-text-area {
  width: 100%;
}
.mmm vaadin-dialog.m-fantasy-edit-window :is(vaadin-text-field, vaadin-password-field, vaadin-email-field) > input::placeholder {
  color: #7C7191;
  font-size: 1em;
  font-style: italic;
  font-weight: 600;
}
.mmm vaadin-dialog.m-fantasy-edit-window vaadin-text-area > textarea::placeholder {
  color: #7C7191;
  font-size: 1em;
  font-style: italic;
  font-weight: 600;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-myfilter-cat-container .m-myfilter-cat-title {
  text-transform: none;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-myfilter-cat-container :is(vaadin-checkbox-group, vaadin-radio-group) {
  margin-top: 15px;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-window-subtitle::part(label) {
  text-transform: uppercase;
  color: #513766;
  font-size: 0.8571428571em;
  font-weight: bold;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-fantasy-edit-target-gender {
  padding: 0 20px;
  text-align: center;
}
.mmm .m-fantasy-centered-container {
  text-align: center;
}
.mmm vaadin-dialog.m-fantasy-details-window .masonry-layout .masonry-item {
  padding: 18px;
}
.mmm .m-fantasies-container {
  width: 100%;
  height: auto;
  display: block;
  text-align: center;
}
.mmm .m-fantasies-container .m-no-results-container {
  text-align: center;
  vertical-align: middle;
  margin-top: 150px;
}
.mmm .m-fantasies-container .m-no-results-container .m-centered-info-label {
  font-size: 20px;
  white-space: pre-wrap;
  text-align: center;
  padding: 0 10px 10px;
}
.mmm .m-fantasies-container .m-no-results-container .m-positive-btn {
  width: initial;
  display: inline-block;
}
.mmm .m-fantasies-container .masonry-layout {
  margin: 10px auto 0;
  display: inline-block;
}
.mmm .m-fantasies-container .masonry-layout .masonry-item {
  max-width: 310px;
  overflow: hidden;
  border-radius: 6px;
}
.mmm .m-fantasies-container .masonry-layout .masonry-item .m-positive-btn,
.mmm .m-fantasies-container .masonry-layout .masonry-item .m-negative-btn {
  padding: 10px 0;
  margin-bottom: 5px;
}
.mmm .m-fantasies-container .masonry-layout .masonry-item .m-positive-btn.m-candidate-fantasy-popup,
.mmm .m-fantasies-container .masonry-layout .masonry-item .m-negative-btn.m-candidate-fantasy-popup {
  margin-bottom: 0;
  padding: 0;
}
.mmm .m-fantasies-container .masonry-layout .masonry-item .m-fantasy-top-layout-image {
  height: auto;
  width: 100%;
}
.mmm .m-fantasies-container .masonry-layout .masonry-item .m-fantasy-top-layout-image.m-fantasy-top-layout-image-c {
  cursor: pointer;
}
.mmm .m-fantasies-container .masonry-layout .masonry-item .m-fantasy-category-distance-report-container {
  width: 100%;
  margin-bottom: 20px;
}
.mmm .m-fantasies-container .masonry-layout .masonry-item .m-fantasy-category-distance-report-container .mmm-popup-button {
  margin-top: 5px;
  background-color: #EBE7F1;
  width: 24px;
  height: 24px;
  border-radius: 3px;
  background-image: url("img/icons/more.svg");
  background-size: 22px 22px;
  background-repeat: no-repeat;
}
.mmm .m-fantasies-container .masonry-layout .masonry-item .m-fantasy-category-distance-report-container .mmm-popup-button {
  display: none;
}
.mmm .m-fantasies-container .masonry-layout .masonry-item .m-fantasy-category-distance-container {
  width: 90%;
  text-align: left;
  display: inline-block;
}
.mmm .m-fantasies-container .masonry-layout .masonry-item .m-fantasy-category-label {
  color: #7C7191;
  border-radius: 3px;
  border: 1px solid #C8C0D8;
  font-size: 0.7142857143em;
  padding: 5px 6px;
  line-height: 1;
  font-weight: 600;
  text-transform: uppercase;
}
.mmm .m-fantasies-container .masonry-layout .masonry-item .m-fantasy-distance_label {
  font-family: "Josefin Sans", Arial, sans-serif;
  font-size: 1em;
  font-weight: 600;
  color: #7C7191;
  display: inline-block;
  vertical-align: middle;
  width: auto !important;
  float: right;
  margin: 3px 5px 0px 8px;
}
.mmm .m-fantasies-container .masonry-layout .masonry-item .m-fantasy-distance_label .m-fantasy-age-noperm {
  text-decoration: underline;
  cursor: pointer;
}
.mmm .m-fantasies-container .masonry-layout .masonry-item .m-fantasy-location {
  color: #ee94e2;
  font-size: 1em;
  display: block;
  line-height: 18px;
}
.mmm .m-fantasies-container .masonry-layout .masonry-item .m-fantasy-location .m-fantasy-latlonset {
  cursor: pointer;
}
.mmm .m-fantasies-container .masonry-layout .masonry-item .m-fantasy-layout {
  padding: 0;
}
.mmm .m-fantasies-container .masonry-layout .masonry-item .m-fantasy-title-description-layout .m-fantasy-title-label {
  font-size: 1.1428571429em;
  font-weight: bold;
  color: #513766;
  margin-bottom: 5px;
}
.mmm .m-fantasies-container .masonry-layout .masonry-item .m-fantasy-title-description-layout .m-fantasy-description_label {
  font-size: 1em;
  color: #513766;
  font-weight: 600;
  margin-bottom: 15px;
}
.mmm .m-fantasies-container .fantasy-description {
  padding: 18px;
}
.mmm .fantasy-location-button {
  position: absolute;
  z-index: 9999999;
  bottom: 22px;
  height: 52px;
  left: 0px;
}
.mmm .fantasy-location-button .m-negative-btn,
.mmm .fantasy-location-button .m-positive-btn {
  width: auto;
  display: inline-block;
  max-width: 200px;
}
.mmm .m-main-screen-mobile .m-fantasy-layout .m-gender-container .fa-angle-right {
  vertical-align: middle;
}
.mmm .m-main-screen-mobile .m-fantasy-layout .m-gender-container .fa-angle-right {
  background-image: url("img/icons/droite.svg");
  width: 10px;
  height: 7px;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  margin-right: 5px;
  left: 0;
  top: 0;
}
.mmm .m-main-screen-mobile .m-fantasy-layout .m-gender-container .m-fantasy-gender-icon {
  margin-right: 5px;
  text-align: center;
}
.mmm .m-main-screen-mobile .m-fantasy-layout .m-gender-container .m-fantasy-gender-icon.m-gender-female {
  width: 24px;
  height: 22px;
  background-color: rgba(213, 127, 218, 0.2);
  background-image: url("img/icons/femme.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px 18px;
  border-radius: 3px;
  border: 1px solid rgba(213, 127, 218, 0.3);
}
.mmm .m-main-screen-mobile .m-fantasy-layout .m-gender-container .m-fantasy-gender-icon.m-gender-male {
  width: 24px;
  height: 22px;
  background-color: rgba(157, 134, 226, 0.2);
  background-image: url("img/icons/homme.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px 18px;
  border-radius: 3px;
  border: 1px solid rgba(157, 134, 226, 0.3);
}
.mmm .m-main-screen-mobile .m-fantasy-layout .m-gender-container .m-fantasy-gender-icon.m-gender-mm-couple {
  width: 50px;
  height: 22px;
  background-color: rgba(213, 127, 218, 0.2);
  border-radius: 3px;
  border: 1px solid rgba(213, 127, 218, 0.3);
  background-image: none;
}
.mmm .m-main-screen-mobile .m-fantasy-layout .m-gender-container .m-fantasy-gender-icon.m-gender-mm-couple::before,
.mmm .m-main-screen-mobile .m-fantasy-layout .m-gender-container .m-fantasy-gender-icon.m-gender-mm-couple:after {
  content: "";
  width: 17px;
  height: 21px;
  display: inline-block;
  background-image: url("img/icons/homme.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px 18px;
}
.mmm .m-main-screen-mobile .m-fantasy-layout .m-gender-container .m-fantasy-gender-icon.m-gender-ff-couple {
  width: 50px;
  height: 22px;
  background-color: rgba(157, 134, 226, 0.2);
  border-radius: 3px;
  border: 1px solid rgba(157, 134, 226, 0.3);
  background-image: none;
}
.mmm .m-main-screen-mobile .m-fantasy-layout .m-gender-container .m-fantasy-gender-icon.m-gender-ff-couple::before,
.mmm .m-main-screen-mobile .m-fantasy-layout .m-gender-container .m-fantasy-gender-icon.m-gender-ff-couple:after {
  content: "";
  width: 17px;
  height: 21px;
  display: inline-block;
  background-image: url("img/icons/femme.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px 18px;
}
.mmm .m-main-screen-mobile .m-fantasy-layout .m-gender-container .m-fantasy-gender-icon.m-gender-fm-couple {
  width: 50px;
  height: 22px;
  background-color: rgba(150, 73, 232, 0.2);
  border-radius: 3px;
  border: 1px solid rgba(150, 73, 232, 0.3);
  background-image: none;
}
.mmm .m-main-screen-mobile .m-fantasy-layout .m-gender-container .m-fantasy-gender-icon.m-gender-fm-couple::before,
.mmm .m-main-screen-mobile .m-fantasy-layout .m-gender-container .m-fantasy-gender-icon.m-gender-fm-couple:after {
  content: "";
  width: 17px;
  height: 21px;
  display: inline-block;
  background-image: url("img/icons/femme.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px 18px;
}
.mmm .m-main-screen-mobile .m-fantasy-layout .m-gender-container .m-fantasy-gender-icon.m-gender-fm-couple::after {
  background-image: url("img/icons/homme.svg");
}
.mmm .m-fantasy-layout .m-gender-container {
  width: 100%;
}
.mmm .m-fantasy-layout .m-gender-container {
  width: 100%;
}
.mmm .m-fantasy-layout .m-receiver-profile-header-image-rounded {
  width: 38px;
  height: 38px;
  border-radius: 30px;
  overflow: hidden;
  border: 2px solid #513766;
  margin-right: 11px;
}
.mmm .m-fantasy-layout .m-receiver-profile-header-image-rounded img {
  width: 100%;
  height: auto;
}
.mmm .m-fantasy-layout .m-fantasy-publication-date {
  color: #7C7191;
  font-size: 0.8571428571em;
  font-weight: 600;
  margin-bottom: 15px;
}
.mmm .m-fantasy-layout .m-fantasy-author-age {
  color: #513766;
  font-size: 1em;
  font-weight: bold;
}
.mmm .m-fantasy-layout .m-fantasy-date-label {
  color: #7C7191;
  font-size: 0.8571428571em;
  font-weight: 600;
}
.mmm .m-fantasy-layout .m-fantasy-has-author-info .m-fantasy-location::before {
  display: none;
}
.mmm .m-fantasy-layout .m-fantasy-location {
  margin-bottom: 20px;
  font-size: 1em;
  color: #7C7191;
  font-weight: 600;
}
.mmm .m-fantasy-layout .m-fantasy-location::before {
  content: "";
  display: inline-block;
  background-image: url("img/icons/localisation.svg");
  background-repeat: no-repeat;
  width: 15px;
  height: 21px;
  background-size: cover;
}
.mmm .m-fantasy-layout .m-fantasy-category-label {
  vertical-align: middle;
  max-width: 50%;
  white-space: normal;
  line-height: 1.1;
}
.mmm .m-fantasy-layout .m-gender-container {
  display: inline-block;
  top: 4px;
  left: 3px;
  position: relative;
  white-space: normal !important;
}
.mmm .m-fantasy-layout .m-gender-container .m-fantasy-gender-icon {
  vertical-align: middle;
}
.mmm .m-fantasy-layout .m-gender-container .m-fantasy-gender-icon {
  width: 35px;
  height: 35px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 30px auto;
  background-color: #EBE7F1;
  border-radius: 20px;
}
.mmm .m-fantasy-layout .m-gender-container .m-fantasy-gender-icon.m-gender-mm-couple {
  background-image: url("img/icons/m_m.png");
}
.mmm .m-fantasy-layout .m-gender-container .m-fantasy-gender-icon.m-gender-male {
  background-image: url("img/icons/m.png");
}
.mmm .m-fantasy-layout .m-gender-container .m-fantasy-gender-icon.m-gender-fm-couple {
  background-image: url("img/icons/m_w.png");
}
.mmm .m-fantasy-layout .m-gender-container .m-fantasy-gender-icon.m-gender-female {
  background-image: url("img/icons/w.png");
}
.mmm .m-fantasy-layout .m-gender-container .m-fantasy-gender-icon.m-gender-ff-couple {
  background-image: url("img/icons/w_w.png");
}
.mmm .m-fantasy-layout .m-gender-container .fa-angle-right {
  display: block;
  position: absolute;
  left: 29px;
  top: 7px;
  background-image: url("img/icons/cupidon.svg");
  width: 25px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: cover;
}
.mmm .m-fantasy-layout .m-gender-container .fa-angle-right::before {
  display: none;
}
.mmm .m-fantasy-layout .m-fantasy-top-layout {
  position: relative;
  min-height: 54px;
}
.mmm .m-fantasy-layout .m-fantasy-top-layout .m-fantasy-new-label-container {
  background-color: #553d68;
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  line-height: 1;
  display: inline-block;
  position: absolute;
  left: 5px;
  top: 5px;
  padding: 8px 10px;
  border-radius: 10px;
}

/* ========================================================================
   Profil (profile-page-style)
   ======================================================================== */

.mmm .m-myprofile-description-photo-tips-layout {
  margin: 4px;
  background-color: #fff;
  cursor: pointer;
  width: 93px;
  height: 93px;
  display: inline-block;
  color: #553d68;
  border: 1px solid #553d68;
  border-radius: 6px;
  display: inline-block !important;
}
.mmm .m-myprofile-description-photo-tips-layout .m-myprofile-description-photo-tips-label {
  text-align: center;
  font-size: 0.9285714286em;
  line-height: 1;
  font-weight: bold;
  padding: 35% 2px;
}
.mmm .m-myprofile-apprec-score-edit {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
}
.mmm .m-myprofile-apprec-score-edit .m-myprofile-apprec-score-child-layout {
  font-size: 1.2857142857em;
  font-weight: bold;
  color: #513766;
  text-align: center;
  background-color: #fff;
  padding: 8px 15px;
  line-height: 1;
  border: 1px solid #C8C0D8;
}
.mmm .m-myprofile-apprec-score-edit .m-myprofile-apprec-score-child-layout.m-myprofile-apprec-score-positive {
  border-radius: 18px 0 0 18px;
}
.mmm .m-myprofile-apprec-score-edit .m-myprofile-apprec-score-child-layout.m-myprofile-apprec-score-positive label::before {
  content: "";
  display: inline-block;
  margin-right: 0;
  vertical-align: middle;
  width: 25px;
  height: 20px;
  background-size: cover;
  background-image: url("img/icons/like-selected-fill.svg");
}
.mmm .m-myprofile-apprec-score-edit .m-myprofile-apprec-score-child-layout.m-myprofile-apprec-score-positive :is(vaadin-checkbox, vaadin-radio-button)[checked] label::before {
  background-position: center center;
  background-image: url("img/icons/like-pink.svg");
}
.mmm .m-myprofile-apprec-score-edit .m-myprofile-apprec-score-child-layout.m-myprofile-apprec-score-negative {
  border-radius: 0 18px 18px 0;
}
.mmm .m-myprofile-apprec-score-edit .m-myprofile-apprec-score-child-layout.m-myprofile-apprec-score-negative label::before {
  content: "";
  margin-right: 0;
  display: inline-block;
  vertical-align: middle;
  width: 19px;
  height: 20px;
  background-size: cover;
  background-image: url("img/icons/unlike-selected-fill.svg");
}
.mmm .m-myprofile-apprec-score-edit .m-myprofile-apprec-score-child-layout.m-myprofile-apprec-score-negative :is(vaadin-checkbox, vaadin-radio-button)[checked] label::before {
  background-position: center center;
  background-image: url("img/icons/unlike-pink.svg");
}
.mmm .m-myprofile-apprec-score-edit .m-myprofile-apprec-score-child-layout .m-myprofile-apprec-score-label {
  display: block;
  float: none;
}
.mmm .m-myprofile-apprec-score-cont {
  text-align: center;
  margin-bottom: 15px;
}
.mmm .m-myprofile-apprec-score-cont .m-myprofile-apprec-score-child-layout {
  font-size: 1.2857142857em;
  font-weight: bold;
  color: #513766;
  text-align: center;
  background-color: #fff;
  padding: 10px 15px;
  line-height: 1;
  border: 1px solid #C8C0D8;
}
.mmm .m-myprofile-apprec-score-cont .m-myprofile-apprec-score-child-layout .m-myprofile-apprec-score-label label::before {
  display: none;
}
.mmm .m-myprofile-apprec-score-cont .m-myprofile-apprec-score-child-layout.m-myprofile-apprec-score-positive {
  border-radius: 18px 0 0 18px;
}
.mmm .m-myprofile-apprec-score-cont .m-myprofile-apprec-score-child-layout.m-myprofile-apprec-score-positive::before {
  content: "";
  margin-right: 8px;
  display: inline-block;
  vertical-align: middle;
  width: 24px;
  height: 20px;
  background-size: cover;
  background-image: url("img/icons/like-selected-fill.svg");
}
.mmm .m-myprofile-apprec-score-cont .m-myprofile-apprec-score-child-layout.m-myprofile-apprec-score-negative {
  border-radius: 0 18px 18px 0;
}
.mmm .m-myprofile-apprec-score-cont .m-myprofile-apprec-score-child-layout.m-myprofile-apprec-score-negative::before {
  content: "";
  margin-right: 8px;
  display: inline-block;
  vertical-align: middle;
  width: 19px;
  height: 20px;
  background-size: cover;
  background-image: url("img/icons/unlike-selected-fill.svg");
}
.mmm .m-myprofile .m-title-container {
  display: none;
}
.mmm .m-myprofile .m-fieldgroup-title {
  font-size: 0.8571428571em;
  color: #7C7191;
  text-transform: uppercase;
}
.mmm .m-myprofile .m-myprofile-user-description-unedit {
  padding: 18px 18px 0;
}
.mmm .m-myprofile .m-myprofile-user-description-unedit :is(vaadin-text-field, vaadin-password-field, vaadin-text-area, vaadin-combo-box, vaadin-date-picker, vaadin-select, vaadin-checkbox-group, vaadin-radio-group)::part(label),
.mmm .m-myprofile .m-myprofile-user-description-unedit:is(vaadin-text-field, vaadin-password-field, vaadin-text-area, vaadin-combo-box, vaadin-date-picker, vaadin-select, vaadin-checkbox-group, vaadin-radio-group)::part(label) {
  text-transform: uppercase;
  font-size: 0.8571428571em;
  color: #7C7191;
}
.mmm .m-myprofile .m-profile-property-value {
  margin-bottom: 15px;
  font-size: 1em;
}
.mmm .m-myprofile .m-myprofile-header-container {
  text-align: center;
  padding: 20px 18px;
}
.mmm .m-myprofile .m-myprofile-header-container .ex-popup-button {
  width: 36px;
  height: 36px;
  background-color: transparent;
  border: 1px solid #C8C0D8;
  border-radius: 4px;
  position: absolute;
  right: 18px;
  top: 20px;
}
.mmm .m-myprofile .m-myprofile-header-container .ex-popup-button::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background-image: url("img/icons/more.svg");
  background-size: cover;
  margin: 5px;
}
.mmm .m-myprofile .m-myprofile-header-container .m-sidebar-username-label {
  font-size: 1.4285714286em;
  text-align: center;
}
.mmm .m-myprofile .m-myprofile-header-container .m-sidebar-location-label {
  font-size: 1em;
  text-align: center;
}
.mmm .m-myprofile .m-myprofile-header-container .m-receiver-profile-header-image-rounded {
  width: 100px;
  height: 100px;
  overflow: hidden;
  border-radius: 50px;
  margin: 0 auto 15px;
}
.mmm .m-myprofile .m-myprofile-header-container .m-receiver-profile-header-image-rounded img {
  width: 100%;
  height: auto;
}
.mmm .m-myprofile .m-myprofile-tabs-buttons {
  position: sticky;
  top: 0px;
  z-index: 9;
  background-color: #EBE7F1;
}
.mmm .m-myprofile .m-profile-footer {
  position: fixed;
  bottom: 0;
  right: 0;
  background-color: #EBE7F1;
  border-top: 1px solid #C8C0D8;
}
.mmm .m-myprofile .m-myprofile-tabsheet {
  margin-bottom: 48px;
  background-color: #EBE7F1;
}
.mmm .m-myprofile .m-myprofile-tabs-buttons {
  padding: 0 18px;
  margin-top: 5px;
  border-bottom: 2px solid #C8C0D8;
  box-shadow: none;
}
.mmm .m-myprofile .m-myprofile-tabs-buttons .m-myprofile-tabs-button {
  width: 25%;
  text-align: center;
  padding: 5px;
  margin-bottom: -2px;
}
.mmm .m-myprofile .m-myprofile-tabs-buttons .m-myprofile-tabs-button.m-myprofile-tabs-button-pressed {
  border-bottom: 2px solid #513766;
}
.mmm .m-myprofile .m-myprofile-tabs-buttons .m-myprofile-tabs-button.m-myprofile-tabs-button-pressed::part(label) {
  color: #513766;
  font-weight: bold;
}
.mmm .m-myprofile .m-myprofile-tabs-buttons .m-myprofile-tabs-button.descriptionButton.m-myprofile-tabs-button-pressed::before {
  background-image: url("img/icons/profile-selected.svg");
}
.mmm .m-myprofile .m-myprofile-tabs-buttons .m-myprofile-tabs-button.fantasiesButton.m-myprofile-tabs-button-pressed::before {
  background-image: url("img/icons/fantasime-selected.svg");
}
.mmm .m-myprofile .m-myprofile-tabs-buttons .m-myprofile-tabs-button.secretsButton.m-myprofile-tabs-button-pressed::before {
  background-image: url("img/icons/lock-selected.svg");
}
.mmm .m-myprofile .m-myprofile-tabs-buttons .m-myprofile-tabs-button.appreciasionsButton.m-myprofile-tabs-button-pressed::before {
  background-image: url("img/icons/like-selected.svg");
}
.mmm .m-myprofile .m-myprofile-tabs-buttons .m-myprofile-tabs-button::part(label) {
  text-transform: uppercase;
  font-size: 0.6428571429em;
  color: #7C7191;
}
.mmm .m-myprofile .m-myprofile-tabs-buttons .m-myprofile-tabs-button::before {
  content: "";
  display: block;
  margin: 0 auto;
  width: 24px;
  height: 24px;
  background-size: cover;
}
.mmm .m-myprofile .m-myprofile-tabs-buttons .m-myprofile-tabs-button.descriptionButton::before {
  background-image: url("img/icons/profile-unselected.svg");
}
.mmm .m-myprofile .m-myprofile-tabs-buttons .m-myprofile-tabs-button.fantasiesButton::before {
  background-image: url("img/icons/fantasime-unselected.svg");
}
.mmm .m-myprofile .m-myprofile-tabs-buttons .m-myprofile-tabs-button.secretsButton::before {
  background-image: url("img/icons/lock-unselected.svg");
}
.mmm .m-myprofile .m-myprofile-tabs-buttons .m-myprofile-tabs-button.appreciasionsButton::before {
  background-image: url("img/icons/like-unselected.svg");
}
.mmm .m-myprofile .m-myprofile-user-description-container {
  padding: 0;
}
.mmm .m-myprofile .m-myprofile-user-description-container :is(vaadin-text-field, vaadin-password-field, vaadin-text-area, vaadin-combo-box, vaadin-date-picker, vaadin-select, vaadin-checkbox-group, vaadin-radio-group)::part(label),
.mmm .m-myprofile .m-myprofile-user-description-container:is(vaadin-text-field, vaadin-password-field, vaadin-text-area, vaadin-combo-box, vaadin-date-picker, vaadin-select, vaadin-checkbox-group, vaadin-radio-group)::part(label) {
  text-transform: uppercase;
  font-size: 0.8571428571em;
  color: #7C7191;
}
.mmm .m-myprofile .m-myprofile-user-description-container .m-dropdown::part(label) {
  font-size: 1em;
}
.mmm .m-myprofile .m-small-label {
  color: #777777;
  font-size: 0.7857142857em;
}
.mmm .m-myprofile .m-myprofile-description-form {
  width: 100%;
}
.mmm .m-myprofile .m-myprofile-description-new-photo-layout {
  margin: 4px;
  position: relative;
  overflow: hidden;
  width: 93px;
  height: 93px;
  display: inline-block;
  color: #fff;
  background-color: #553d68;
  border: 1px solid #553d68;
  border-radius: 6px;
}
.mmm .m-myprofile .m-myprofile-description-new-photo-layout .m-myprofile-description-new-photo-label {
  font-size: 0.9285714286em;
  line-height: 1;
  font-weight: bold;
  position: absolute;
  text-align: center;
  padding: 35% 2px;
}
.mmm .m-myprofile .m-myprofile-description-new-photo-layout vaadin-button {
  display: none;
}
.mmm .m-myprofile .m-profile-pictures-container {
  margin: 0 -10px;
  display: block;
}
.mmm .m-myprofile .m-profile-pictures-container {
  display: block;
  width: 100%;
  border-bottom: 1px solid #ebebeb;
}
.mmm .m-myprofile .m-profile-pictures-container:after {
  content: "";
  display: table;
  clear: both;
}
.mmm .m-myprofile .m-extra-info {
  font-size: 1em;
  font-style: italic;
}
.mmm .m-myprofile .m-tip-container {
  margin-top: 15px;
  margin-bottom: 15px;
  background-color: #fff;
  border: 1px solid #9649E8;
  padding: 15px;
  border-radius: 6px;
  padding-left: 45px;
  padding-right: 45px;
  position: relative;
}
.mmm .m-myprofile .m-tip-container::before {
  content: "";
  display: block;
  position: absolute;
  width: 25px;
  height: 25px;
  background-image: url("img/icons/baguette.svg");
  background-size: cover;
  left: 10px;
  top: 12px;
}
.mmm .m-myprofile .m-tip-container::after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 20px;
  width: 26px;
  height: 26px;
  background-color: #EBE7F1;
  background-image: url("img/icons/chevron-petit-moyen.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 18px 18px;
  top: 12px;
  right: 15px;
  cursor: pointer;
}
.mmm .m-myprofile .m-big-textfield {
  border-color: #C8C0D8;
}
.mmm .m-myprofile .m-big-textfield span {
  font-size: 0.8571428571em;
  color: #513766;
  float: right;
}
.mmm .m-myprofile .m-big-textfield vaadin-text-area::part(input-field) {
  padding: 0;
}
.mmm .m-myprofile .m-big-textfield vaadin-text-area > textarea {
  font-size: 1em;
}
.mmm .m-myprofile .m-myprofile-image-layout {
  margin: 4px;
  float: left;
  width: 93px;
  height: 93px;
  position: relative;
  background-color: #ebebeb;
  border-radius: 6px;
}
.mmm .m-myprofile .m-myprofile-image-layout > * {
  width: 100%;
  height: 100%;
}
.mmm .m-myprofile .m-myprofile-image-layout .m-myprofile-image {
  width: 100%;
  height: 100%;
  border-radius: 6px;
}
.mmm .m-myprofile .m-myprofile-image-layout .m-profile-image-top-layer {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  z-index: 1;
  background: transparent;
}
.mmm .m-myprofile .m-myprofile-image-layout .m-icon {
  z-index: 5;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #a2a2a2;
  bottom: -3px;
  font-size: 16px;
  height: 20px;
  line-height: 20px;
  padding: 1px;
  position: absolute;
  right: -3px;
  text-align: center;
  width: 20px;
  border-radius: 6px;
}
.mmm .m-myprofile .m-myprofile-image-layout .m-icon .fa {
  display: inline-block;
}
.mmm .m-myprofile .m-myprofile-image-layout .ex-popup-button {
  width: 24px;
  height: 24px;
  background-color: #fff;
  position: absolute;
  top: 5px;
  right: 5px;
  border-radius: 3px;
  z-index: 2;
}
.mmm .m-myprofile .m-myprofile-image-layout .ex-popup-button::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background-image: url("img/icons/more.svg");
  background-size: cover;
}
.mmm .m-myprofile .m-fantasy-centered-container .masonry-item {
  box-shadow: none;
  border-radius: 6px;
  overflow: hidden;
}
.mmm .m-myprofile .m-fantasy-centered-container .masonry-item > * {
  width: 100%;
}
.mmm .m-myprofile .m-fantasy-centered-container .m-fantasy-title-description-layout {
  width: 100%;
  padding: 5px;
}
.mmm .m-myprofile .m-fantasy-centered-container .m-fantasy-title-label {
  font-weight: bold;
  font-size: 1.1428571429em;
  color: #434343;
  line-height: 1;
  display: block;
}
.mmm .m-myprofile .m-fantasy-centered-container .m-fantasy-description_label {
  color: #777777;
  font-size: 1em;
  line-height: 1.2;
}
.mmm .m-myprofile .m-fantasy-centered-container .m-myprofile-fantasy-promo-title_label {
  font-size: 1em;
  color: #777777;
  line-height: 1.2;
}
.mmm .m-myprofile .m-fantasy-centered-container .m-myprofile-fantasy-promo-title_label .grey {
  margin: 5px auto;
}
.mmm .m-myprofile .m-fantasy-centered-container .m-myprofile-fantasy-promo-title_label .red {
  font-weight: bold;
}
.mmm .fa-thumbs-o-up {
  color: #56b600;
}
.mmm .fa-thumbs-o-down {
  color: #b60000;
}
.mmm .m-appreciation-form .m-appreciations-cont {
  padding: 18px;
}
.mmm .m-appreciation-form .m-myfilter-cat-title {
  margin-bottom: 10px;
}
.mmm .m-appreciation-form vaadin-text-area {
  margin-top: 15px;
  margin-bottom: 15px;
}
.mmm .m-appreciation-form > * {
  padding: 18px;
}
.mmm .m-appreciation-form .m-myfilter-cat-container {
  padding: 0;
  border-bottom: 0;
}
.mmm .m-appreciation-centered-container {
  overflow: auto;
}
.mmm .m-appreciation-centered-container .m-subtitle-container {
  box-shadow: none;
  border-bottom: 1px solid #553d68;
}
.mmm .m-appreciation-centered-container .fa-thumbs-o-up {
  color: #56b600;
}
.mmm .m-appreciation-centered-container .fa-thumbs-o-down {
  color: #b60000;
}
.mmm .m-appreciation-centered-container .masonry-item {
  box-shadow: none;
  border-radius: 6px;
  overflow: hidden;
}
.mmm .m-appreciation-centered-container .masonry-item > * {
  width: 100%;
  padding: 0;
}
.mmm .m-myprofile-tabs-container {
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.mmm .m-my-account-page .m-page-main-container {
  text-align: center;
}
.mmm .m-my-account-page .m-page-main-container {
  padding: 0;
}
/* 20px sous l'emplacement Vaadin 8 du bouton + 5px de la pastille */
.mmm .m-my-account-page .m-positive-btn {
  margin-bottom: 25px;
}
.mmm .m-my-account-page .m-title-container {
  max-width: 400px;
  margin: 0 auto;
  background: transparent;
  color: #7C7191;
  box-shadow: none;
  font-size: 1em;
  text-align: left;
}
.mmm .m-my-account-page .m-subtitle-label {
  font-weight: bold;
  margin-bottom: 10px;
}
.mmm .m-my-account-page .m-details {
  margin-bottom: 10px;
}
.mmm .m-my-account-page .m-notification-boolean-tag,
.mmm .m-my-account-page .m-yes-no-radio {
  margin-bottom: 25px;
}
.mmm .m-my-account-page .m-field-title {
  text-transform: uppercase;
  color: #7C7191;
  font-size: 0.8571428571em;
}
.mmm .m-my-account-page .m-fieldgroup-title {
  font-size: 1.4285714286em;
  font-weight: bold;
  color: #513766;
  margin-bottom: 19px;
  line-height: 1.2;
}
.mmm .m-my-account-page .m-secured-field,
.mmm .m-my-account-page .m-single-textfield {
  margin-bottom: 20px;
  font-size: 1em;
}
.mmm .m-my-account-page .m-secured-field :is(vaadin-text-field, vaadin-password-field, vaadin-text-area, vaadin-combo-box, vaadin-date-picker, vaadin-select, vaadin-checkbox-group, vaadin-radio-group)::part(label),
.mmm .m-my-account-page .m-secured-field span,
.mmm .m-my-account-page .m-single-textfield :is(vaadin-text-field, vaadin-password-field, vaadin-text-area, vaadin-combo-box, vaadin-date-picker, vaadin-select, vaadin-checkbox-group, vaadin-radio-group)::part(label),
.mmm .m-my-account-page .m-single-textfield span,
.mmm .m-my-account-page .m-secured-field:is(vaadin-text-field, vaadin-password-field, vaadin-text-area, vaadin-combo-box, vaadin-date-picker, vaadin-select, vaadin-checkbox-group, vaadin-radio-group)::part(label),
.mmm .m-my-account-page .m-single-textfield:is(vaadin-text-field, vaadin-password-field, vaadin-text-area, vaadin-combo-box, vaadin-date-picker, vaadin-select, vaadin-checkbox-group, vaadin-radio-group)::part(label) {
  text-transform: uppercase;
  color: #7C7191;
  font-size: 0.8571428571em;
}
.mmm .m-my-account-page .m-secured-field :is(vaadin-text-field, vaadin-password-field, vaadin-text-area, vaadin-combo-box, vaadin-date-picker, vaadin-select, vaadin-checkbox-group, vaadin-radio-group)::part(label),
.mmm .m-my-account-page .m-single-textfield :is(vaadin-text-field, vaadin-password-field, vaadin-text-area, vaadin-combo-box, vaadin-date-picker, vaadin-select, vaadin-checkbox-group, vaadin-radio-group)::part(label),
.mmm .m-my-account-page .m-secured-field:is(vaadin-text-field, vaadin-password-field, vaadin-text-area, vaadin-combo-box, vaadin-date-picker, vaadin-select, vaadin-checkbox-group, vaadin-radio-group)::part(label),
.mmm .m-my-account-page .m-single-textfield:is(vaadin-text-field, vaadin-password-field, vaadin-text-area, vaadin-combo-box, vaadin-date-picker, vaadin-select, vaadin-checkbox-group, vaadin-radio-group)::part(label) {
  color: #7C7191;
}
.mmm .m-my-account-page .m-secured-field::part(toggle-button),
.mmm .m-my-account-page .m-single-textfield::part(toggle-button) {
  display: none;
}
.mmm .m-my-account-page .m-secured-field :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker),
.mmm .m-my-account-page :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker).m-secured-field {
  width: 100% !important;
  margin: 0;
  --lumo-text-field-size: 44px;
}
.mmm .m-my-account-page .m-secured-field :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker)::part(input-field),
.mmm .m-my-account-page :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker).m-secured-field::part(input-field) {
  padding: 15px;
  height: 44px;
  border: 1px solid #C8C0D8;
  border-radius: 6px;
}
.mmm .m-my-account-page .m-single-textfield :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker),
.mmm .m-my-account-page :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker).m-single-textfield {
  width: 100% !important;
  margin: 0;
  --lumo-text-field-size: 44px;
}
.mmm .m-my-account-page .m-single-textfield :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker)::part(input-field),
.mmm .m-my-account-page :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker).m-single-textfield::part(input-field) {
  padding: 15px;
  height: 44px;
  border: 1px solid #C8C0D8;
  border-radius: 6px;
}
.mmm .m-my-account-page .m-secured-field {
  position: relative;
  font-size: 1em;
}
.mmm .m-my-account-page .m-secured-field {
  opacity: 0.5;
}
.mmm .m-my-account-page .m-secured-field :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker)::part(input-field),
.mmm .m-my-account-page :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker).m-secured-field::part(input-field) {
  padding-left: 40px;
  background-color: #fafafa;
}
.mmm .m-my-account-page .m-secured-field :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker) > input,
.mmm .m-my-account-page :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker).m-secured-field > input {
  color: #4b4b4b;
}
.mmm .m-my-account-page .m-secured-field::before {
  content: "";
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  background-image: url("img/icons/lock.svg");
  background-size: cover;
  top: 35px;
  left: 15px;
}
.mmm .m-my-account-page vaadin-checkbox::part(checkbox) {
  margin-left: -25px;
}
.mmm .m-my-account-page vaadin-checkbox label {
  margin-left: 25px;
}
.mmm .m-my-account-page .m-myfilter-cat-title {
  text-transform: uppercase;
  color: #2f2f2f;
  font-weight: bold;
  font-size: 1.2142857143em;
  line-height: 1.1;
  margin-top: 13px;
}
.mmm .m-my-account-page :is(vaadin-text-field, vaadin-password-field, vaadin-text-area, vaadin-combo-box, vaadin-date-picker, vaadin-select, vaadin-checkbox-group, vaadin-radio-group)::part(label),
.mmm .m-my-account-page:is(vaadin-text-field, vaadin-password-field, vaadin-text-area, vaadin-combo-box, vaadin-date-picker, vaadin-select, vaadin-checkbox-group, vaadin-radio-group)::part(label) {
  color: #7C7191;
}
.mmm .m-my-account-page vaadin-date-picker::part(input-field) {
  height: auto;
}
.mmm .m-my-account-page vaadin-date-picker {
  width: 100%;
  margin: 0;
}
.mmm .m-my-account-page vaadin-date-picker {
  display: block;
  width: 100%;
  --lumo-text-field-size: 44px;
}
.mmm .m-my-account-page vaadin-date-picker::part(input-field) {
  border: 1px solid #C8C0D8;
  height: 44px;
  border-radius: 6px;
}
.mmm .m-my-account-page vaadin-date-picker > input {
  color: #777777;
  line-height: 1;
  font-size: 1em;
}
.mmm .m-my-account-page .m-single-textfield {
  padding: 5px 0;
}
.mmm .m-myprofile-appreciations-tab .m-fieldgroup-title {
  text-align: center;
}
.mmm .m-myprofile-appreciations-tab .m-fieldgroup-title {
  font-size: 1.4285714286em;
  color: #513766;
  text-align: center;
  font-weight: bold;
  text-transform: none;
}
.mmm .m-myprofile-appreciations-tab .m-link-label {
  text-align: center;
  font-weight: bold;
  color: #9649E8;
  width: 100%;
  margin-bottom: 20px;
}
.mmm .m-myprofile-appreciations-tab .m-details {
  font-style: italic;
  text-align: center;
  line-height: 1.2;
  margin-bottom: 15px;
}
.mmm .m-myprofile-appreciations-tab .m-main-content .m-myprofile-apprec-score-layout {
  background-color: #fff;
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 15px;
  font-size: initial;
  box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1);
}
.mmm .m-myprofile-appreciations-tab .m-main-content .m-myprofile-apprec-score-layout .m-myprofile-apprec-score-value {
  font-weight: bold;
}
.mmm .m-myprofile-appreciations-tab .m-main-content .m-myprofile-apprec-score-layout .m-myprofile-apprec-score-value-layout,
.mmm .m-myprofile-appreciations-tab .m-main-content .m-myprofile-apprec-score-layout .m-myprofile-apprec-score-value {
  float: right;
}
.mmm .m-myprofile-appreciations-tab .m-main-content .m-myprofile-apprec-score-layout .m-myprofile-apprec-score-label {
  margin-top: 5px;
}
.mmm .m-myprofile-appreciations-tab .m-main-content .m-myprofile-apprec-score-layout .m-myprofile-apprec-score-label {
  font-size: 1em;
  color: #513766;
  font-weight: 600;
}
.mmm .m-myprofile-appreciations-tab .m-main-content .m-myprofile-apprec-score-layout .m-myprofile-apprec-score-child-layout {
  font-weight: bold;
  font-size: 1.2857142857em;
  color: #513766;
}
.mmm .m-myprofile-appreciations-tab .m-main-content .m-myprofile-apprec-score-layout .m-myprofile-apprec-score-child-layout.m-myprofile-apprec-score-positive {
  margin-right: 30px;
}
.mmm .m-myprofile-appreciations-tab .m-main-content .m-myprofile-apprec-score-layout .m-myprofile-apprec-score-child-layout.m-myprofile-apprec-score-positive::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 22px;
  height: 18px;
  background-image: url("img/icons/like-selected-fill.svg");
  background-size: cover;
  margin-right: 5px;
}
.mmm .m-myprofile-appreciations-tab .m-main-content .m-myprofile-apprec-score-layout .m-myprofile-apprec-score-child-layout.m-myprofile-apprec-score-negative::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 19px;
  height: 20px;
  background-image: url("img/icons/unlike-selected-fill.svg");
  background-size: cover;
  margin-right: 5px;
}
.mmm .m-profile-presence-layout {
  text-align: center;
  margin-bottom: 20px;
  margin-top: 10px;
}
.mmm .m-myprofile-fantasy-tab {
  width: 100%;
  display: block;
  text-align: center;
  padding: 18px;
}
.mmm .m-myprofile-fantasy-tab .masonry-layout {
  margin: 0 auto;
}
.mmm .m-myprofile-fantasy-tab .m-fantasy-layout .m-ad-action .m-positive-btn {
  margin-right: 10px;
}
.mmm .m-myprofile-fantasy-tab .m-fantasy-layout .m-ad-action .m-positive-btn {
  font-size: 0.8571428571em;
  text-transform: uppercase;
  border-radius: 4px;
  font-weight: normal;
  padding: 10px 20px;
  position: relative;
  line-height: 1;
  padding-left: 35px;
  box-shadow: none;
}
.mmm .m-myprofile-fantasy-tab .m-fantasy-layout .m-ad-action .m-positive-btn::before {
  content: "";
  display: inline-block;
  width: 25px;
  height: 25px;
  background-image: url("img/icons/editer.svg");
  background-size: cover;
  position: absolute;
  top: 2px;
  left: 7px;
}
.mmm .m-myprofile-fantasy-tab .m-fantasy-layout .m-ad-action .m-negative-btn {
  margin-right: 10px;
}
.mmm .m-myprofile-fantasy-tab .m-fantasy-layout .m-ad-action .m-negative-btn {
  font-size: 0.8571428571em;
  text-transform: uppercase;
  border-radius: 4px;
  font-weight: normal;
  padding: 9px 20px;
  position: relative;
  line-height: 1;
  padding-left: 35px;
  border: 1px solid #C8C0D8;
  background-color: transparent;
}
.mmm .m-myprofile-fantasy-tab .m-fantasy-layout .m-ad-action .m-negative-btn::before {
  content: "";
  display: inline-block;
  width: 25px;
  height: 25px;
  background-image: url("img/icons/supprimer.svg");
  background-size: cover;
  position: absolute;
  top: 2px;
  left: 7px;
}
.mmm .m-myprofile {
  text-align: center;
}
.mmm .m-myprofile .m-main-content .m-myprofile-tabs-container {
  text-align: center;
}
.mmm .m-myprofile .m-main-content .m-myprofile-description-tab,
.mmm .m-myprofile .m-main-content .m-myprofile-secrets-tab {
  max-width: 630px;
  margin: 0 auto;
}
.mmm .m-myprofile .m-main-content .m-myprofile-appreciations-tab .m-myprofile-apprec-score-layout,
.mmm .m-myprofile .m-main-content .m-myprofile-appreciations-tab .m-details {
  max-width: 630px;
  margin: 0 auto;
  display: block;
}
.mmm .m-myprofile .m-myprofile-description-form-left-container,
.mmm .m-myprofile .m-myprofile-description-form-right-container {
  margin: 15px;
}
.mmm .m-myprofile .m-myprofile-appreciations-tab .m-appreciation-centered-container {
  padding: 0;
}
.mmm .m-myprofile .m-myprofile-appreciations-tab .m-appreciation-centered-container .masonry-layout .masonry-item {
  border-radius: 6px;
  padding: 5px 16px;
  border: none;
  box-shadow: 0px 1px 4px 0px rgba(124, 113, 145, 0.3);
}
.mmm .m-myprofile .m-myprofile-appreciations-tab .m-appreciation-centered-container .masonry-layout .masonry-item .m-receiver-profile-header-image-rounded {
  width: 40px;
  height: 40px;
  border-radius: 30px;
  overflow: hidden;
  margin-right: 10px;
}
.mmm .m-myprofile .m-myprofile-appreciations-tab .m-appreciation-centered-container .masonry-layout .masonry-item .m-author-info {
  border-bottom: 1px solid #C8C0D8;
  margin: 0 -16px;
  padding: 7px 16px;
  min-height: 50px;
}
.mmm .m-myprofile .m-myprofile-appreciations-tab .m-appreciation-centered-container .masonry-layout .masonry-item .m-fantasy-author-age {
  font-size: 1em;
  color: #513766;
  font-weight: bold;
}
.mmm .m-myprofile .m-myprofile-appreciations-tab .m-appreciation-centered-container .masonry-layout .masonry-item .m-fantasy-date-label {
  font-size: 0.8571428571em;
  color: #C8C0D8;
}
.mmm .m-myprofile .m-myprofile-appreciations-tab .m-appreciation-centered-container .masonry-layout .masonry-item .m-appreciation-ad-category {
  font-weight: bold;
}
.mmm .m-myprofile .m-myprofile-appreciations-tab .m-appreciation-centered-container .masonry-layout .masonry-item .m-appreciation-details {
  padding: 16px 0;
  font-size: 1em;
  color: #513766;
}
.mmm .m-myprofile .m-myprofile-appreciations-tab .m-appreciation-centered-container .masonry-layout .masonry-item .m-myprofile-apprec-score-negative {
  width: 32px;
  height: 32px;
  position: absolute;
  right: 16px;
  top: 10px;
  background-color: rgba(150, 73, 232, 0.15);
  border-radius: 10px;
  background-image: url("img/icons/unlike-pink.svg");
  background-size: 17px 17px;
  background-repeat: no-repeat;
  background-position: center center;
}
.mmm .m-myprofile .m-myprofile-appreciations-tab .m-appreciation-centered-container .masonry-layout .masonry-item .m-myprofile-apprec-score-positive {
  width: 32px;
  height: 32px;
  position: absolute;
  right: 16px;
  top: 10px;
  background-color: rgba(150, 73, 232, 0.15);
  border-radius: 10px;
  background-image: url("img/icons/like-pink.svg");
  background-size: 17px 17px;
  background-repeat: no-repeat;
  background-position: center center;
}
.mmm .m-myprofile .m-myprofile-appreciations-tab .m-appreciation-centered-container .masonry-layout .m-myprofile-fantasy-promo-title_label {
  text-align: center;
}
.mmm .m-myprofile .m-myprofile-appreciations-tab .m-myprofile-apprec-score-child-layout {
  border: none;
  padding: 5px;
}
.mmm .m-my-profile-new-fantasy-form-container .fantasy-advanced-options vaadin-icon {
  color: #553d68;
  font-size: 22px;
}
.mmm .m-my-profile-new-fantasy-form-container .fantasy-advanced-options .fantasy-remove-location {
  margin-right: 6px;
}
.mmm .m-my-profile-new-fantasy-form-container .fantasy-advanced-options .fantasy-display-map {
  margin-left: 6px;
}
.mmm .m-my-profile-new-fantasy-form-container .fantasy-advanced-options button {
  color: #553d68;
}
.mmm .m-my-profile-new-fantasy-form-container .fantasy-advanced-options span {
  color: #553d68;
  line-height: 2.1em;
  font-size: 1.2em;
  margin-right: 6px;
  width: 100px;
}
.mmm .m-my-profile-new-fantasy-form-container .fantasy-advanced-options .fantasy-location-header {
  width: auto;
  line-height: 1.1em;
  margin-bottom: 0.3em;
}
.mmm .m-my-profile-new-fantasy-form-container .fantasy-advanced-options vaadin-date-picker {
  width: auto;
  max-width: 260px;
  margin-bottom: 8px;
}
.mmm .m-my-profile-new-fantasy-form-container .fantasy-advanced-options .fantasy-location-place :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker),
.mmm .m-my-profile-new-fantasy-form-container .fantasy-advanced-options :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker).fantasy-location-place {
  min-width: 240px;
}
.mmm .m-my-profile-new-fantasy-form-container .m-my-filter-warning-container {
  padding-left: 5px;
}
.mmm .m-my-profile-new-fantasy-form-container .m-myprofile-image-layout {
  margin: 4px;
  width: 310px;
  position: relative;
  background-color: #ebebeb;
  border-radius: 6px;
}
.mmm .m-my-profile-new-fantasy-form-container .m-myprofile-image-layout > * {
  width: 100%;
  height: 100%;
}
.mmm .m-my-profile-new-fantasy-form-container .m-myprofile-image-layout .m-myprofile-image {
  width: 100%;
  height: 100%;
  border-radius: 6px;
}
.mmm .m-my-profile-new-fantasy-form-container .m-myprofile-image-layout .m-profile-image-top-layer {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  z-index: 1;
  background: transparent;
}
.mmm .m-my-profile-new-fantasy-form-container .m-myprofile-image-layout .m-icon {
  z-index: 5;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #a2a2a2;
  bottom: -3px;
  font-size: 16px;
  height: 20px;
  line-height: 20px;
  padding: 1px;
  position: absolute;
  right: -3px;
  text-align: center;
  width: 20px;
  border-radius: 6px;
}
.mmm .m-my-profile-new-fantasy-form-container .m-myprofile-image-layout .m-icon .fa {
  display: inline-block;
}
.mmm .m-myprofile-description-new-photo-layout {
  margin: 4px;
  position: relative;
  overflow: hidden;
  width: 93px;
  height: 93px;
  display: inline-block !important;
  color: #fff;
  background-color: #553d68;
  border: 1px solid #553d68;
  border-radius: 6px;
}
.mmm .m-myprofile-description-new-photo-layout .m-myprofile-description-new-photo-label {
  font-size: 0.9285714286em;
  line-height: 1;
  font-weight: 700;
  position: absolute;
  text-align: center;
  padding: 35% 2px;
}
.mmm .m-myprofile-description-new-photo-layout vaadin-button {
  display: none;
}

/* ========================================================================
   Filtre (filter-page-style)
   ======================================================================== */

.mmm .m-myfilter-cat-container {
  width: 100%;
  padding: 20px 18px;
  border-bottom: 1px solid #C8C0D8;
  color: #513766;
}
.mmm .m-myfilter-cat-container:after {
  content: "";
  display: table;
  clear: both;
}
.mmm .m-myfilter-cat-container .m-myfilter-cat-title,
.mmm .m-myfilter-cat-container .m-fantasy-location-title {
  text-transform: uppercase;
  color: #513766;
  font-weight: 600;
  font-size: 0.8571428571em;
  line-height: 1.1;
}
.mmm .m-myfilter-cat-container .m-fantasy-location-place :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker),
.mmm .m-myfilter-cat-container :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker).m-fantasy-location-place {
  --lumo-text-field-size: 44px;
}
.mmm .m-myfilter-cat-container .m-fantasy-location-place :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker)::part(input-field),
.mmm .m-myfilter-cat-container :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker).m-fantasy-location-place::part(input-field) {
  height: 44px;
  padding: 15px;
  border: 1px solid #9649E8;
  border-radius: 6px;
  background-color: rgba(150, 73, 232, 0.15);
}
.mmm .m-myfilter-cat-container .m-fantasy-location-place :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker) > input,
.mmm .m-myfilter-cat-container :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-combo-box, vaadin-date-picker).m-fantasy-location-place > input {
  color: #513766;
  font-weight: bold;
}
.mmm .m-myfilter-cat-container .m-link-label {
  margin-top: 10px;
  color: #9649E8;
  font-weight: bold;
  font-size: 1.1428571429em;
  text-decoration: underline;
}
.mmm .m-myfilter-cat-container :is(vaadin-checkbox, vaadin-radio-button) {
  display: inline-block;
  width: auto;
  margin: 4px;
  float: none;
}
.mmm .m-myfilter-cat-container :is(vaadin-checkbox, vaadin-radio-button)[checked] label {
  background-color: #513766;
  color: #fff;
  border-color: #513766;
}
.mmm .m-myfilter-cat-container :is(vaadin-checkbox, vaadin-radio-button) label {
  width: 100%;
  border: 2px solid #C8C0D8;
  border-radius: 16px;
  padding: 8px 15px;
  font-weight: 600;
  color: #7C7191;
  line-height: 1;
}
.mmm .m-myfilter-cat-container vaadin-checkbox::part(checkbox),
.mmm .m-myfilter-cat-container vaadin-radio-button::part(radio) {
  display: none;
}
.mmm .m-myfilter-cat-container .m-parentCategory-wrapper-category {
  cursor: pointer;
  width: 31%;
  max-width: 120px;
  height: 64px;
  background-color: #EBE7F1;
  border: 1px solid #EBE7F1;
  border-radius: 6px;
  display: inline-block;
  margin: 1%;
  position: relative;
  text-align: center;
  padding: 5px;
}
.mmm .m-myfilter-cat-container .m-parentCategory-wrapper-category::before {
  content: '';
  display: block;
  background-size: cover;
  width: 24px;
  height: 24px;
  margin: 0 auto;
  margin-top: 5px;
}
.mmm .m-myfilter-cat-container .m-parentCategory-wrapper-category .m-category-name {
  text-transform: uppercase;
  font-size: 0.6428571429em;
  font-weight: 600;
  margin-top: 5px;
}
.mmm .m-myfilter-cat-container .m-parentCategory-wrapper-category .m-category-selected-number {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: #513766;
  color: #fff;
  text-align: center;
  border-radius: 10px;
  font-size: 0.7142857143em;
  line-height: 1;
  padding: 2px 6px;
}
.mmm .m-myfilter-cat-container .m-parentCategory-wrapper-category.m-fantasyParentCategory-selected {
  background-color: #fff;
  border-color: #513766;
}
.mmm .m-myfilter-cat-container .m-parentCategory-wrapper-category.m-category-BETWEEN_MEN::before {
  background-image: url("img/icons/entre hommes.svg");
}
.mmm .m-myfilter-cat-container .m-parentCategory-wrapper-category.m-category-KAMASUTRA::before {
  background-image: url("img/icons/kamasutra.svg");
}
.mmm .m-myfilter-cat-container .m-parentCategory-wrapper-category.m-category-SMALL_GAMES::before {
  background-image: url("img/icons/petits jeux fond gris.svg");
}
.mmm .m-myfilter-cat-container .m-parentCategory-wrapper-category.m-category-BETWEEN_WOMEN::before {
  background-image: url("img/icons/entre femmes.svg");
}
.mmm .m-myfilter-cat-container .m-parentCategory-wrapper-category.m-category-MORE::before {
  background-image: url("img/icons/plusieurs.svg");
}
.mmm .m-myfilter-cat-container .m-parentCategory-wrapper-category.m-category-VIRTUAL::before {
  background-image: url("img/icons/virtuel.svg");
}
.mmm .m-myfilter-cat-container .m-parentCategory-wrapper-category.m-category-SOFT::before {
  background-image: url("img/icons/douceurs.svg");
}
.mmm vaadin-dialog.m-my-filter-view::part(overlay) {
  border-radius: 0;
}
@media (min-width: 768px) {
  .mmm vaadin-dialog.m-my-filter-view::part(overlay) {
    border-radius: 12px;
  }
}
.mmm vaadin-dialog.m-my-filter-view::part(header) {
  padding: 20px;
  background-color: #fff;
}
.mmm vaadin-dialog.m-my-filter-view [slot="header-content"] vaadin-button {
  width: 32px;
  height: 32px;
  background-color: #EBE7F1;
  border-radius: 0;
  text-align: center;
  position: absolute;
  right: 20px;
  top: 10px;
  padding: 10px;
}
.mmm vaadin-dialog.m-my-filter-view [slot="header-content"] vaadin-button::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("img/icons/fermer.svg");
  line-height: 32px;
}
.mmm vaadin-dialog.m-my-filter-view::part(title) {
  padding: 0;
  font-size: 1.1428571429em;
  color: #513766;
  font-weight: bold;
  line-height: 1;
}
.mmm vaadin-dialog.m-my-filter-view::part(content)::before {
  display: none;
}
.mmm vaadin-dialog.m-my-filter-view .m-filter-slider-selection-wrapper {
  margin-bottom: 20px;
}
.mmm vaadin-dialog.m-my-filter-view .m-filter-slider-selection-wrapper .m-myfilter-cat-title,
.mmm vaadin-dialog.m-my-filter-view .m-filter-slider-selection-wrapper .m-filter-slider-selection {
  display: inline-block;
  vertical-align: middle;
  width: 50%;
}
.mmm vaadin-dialog.m-my-filter-view .m-filter-slider-selection-wrapper .m-filter-slider-selection {
  text-align: right;
}
.mmm vaadin-dialog.m-my-filter-view .m-filter-slider-selection-wrapper .m-myfilter-cat-title {
  font-size: 0.8571428571em;
  font-weight: 600;
  text-transform: uppercase;
  color: #513766;
}
.mmm vaadin-dialog.m-my-filter-view .m-filter-slider-selection-wrapper .m-filter-slider-selection {
  font-size: 1.1428571429em;
  font-weight: bold;
  color: #513766;
}
.mmm vaadin-dialog.m-my-filter-view vaadin-checkbox label {
  font-weight: 600;
  position: relative;
  padding-left: 25px;
  line-height: 1.4;
}
.mmm vaadin-dialog.m-my-filter-view vaadin-checkbox::part(checkbox) {
  position: absolute;
  left: 0;
}
.mmm vaadin-dialog.m-my-filter-view .m-window-action-wrapper {
  padding: 10px 20px;
}
.mmm vaadin-dialog.m-my-filter-view .m-window-action-wrapper .m-filter-candidates-nb {
  text-align: center;
}
.mmm vaadin-dialog.m-my-filter-view .m-window-action-wrapper .m-filter-candidates-nb {
  font-size: 1.1428571429em;
  font-weight: bold;
  color: #9649E8;
}
.mmm vaadin-dialog.m-my-filter-view :is(vaadin-checkbox-group, vaadin-radio-group) {
  margin-top: 15px;
  text-align: center;
}
@media (min-width: 768px) {
  .mmm vaadin-dialog.m-my-filter-view .m-positive-btn {
    width: auto;
  }
}
.mmm .m-my-filter-warning-container {
  margin-top: 5px;
  width: 100%;
  color: #553d68;
}
.mmm .m-my-filter-warning-container .m-icon-small {
  float: left;
  margin-right: 5px;
  margin-top: 2px;
  line-height: 1;
}
.mmm .m-my-filter-warning-container .m-my-filter-warning-label {
  text-transform: uppercase;
  font-size: 0.7142857143em;
  font-weight: 600;
  max-width: 95%;
}

/* ========================================================================
   FAQ (faq-page-style)
   ======================================================================== */

.mmm .m-faq-page .m-single-textfield {
  padding: 10px 15px;
}

/* ========================================================================
   CGU (cgu-page-style)
   ======================================================================== */

.mmm .m-cgu .m-header-container {
  border-bottom: 1px solid #C8C0D8;
  padding: 10px 18px;
}
.mmm .m-cgu .m-title-container {
  background-color: transparent;
  box-shadow: none;
  font-size: 1.4285714286em;
  color: #513766;
  text-transform: none;
}

/* ========================================================================
   Apollon : points et avantages (apollo-page-style)
   ======================================================================== */

.mmm .m-apollon-view .m-apollon-subscription-details-cont {
  width: 100%;
  border-radius: 6px;
  background-color: #fff;
  margin-bottom: 30px;
  box-shadow: 0px 1px 4px 0px #C8C0D8;
}
.mmm .m-apollon-view .m-apollon-subscription-details-cont :is(vaadin-checkbox, vaadin-radio-button) {
  margin: 0;
}
.mmm .m-apollon-view .m-apollon-subscription-details-cont :is(vaadin-checkbox, vaadin-radio-button):first-child label {
  border-radius: 6px 6px 0 0;
}
.mmm .m-apollon-view .m-apollon-subscription-details-cont :is(vaadin-checkbox, vaadin-radio-button):last-child label {
  border-radius: 0 0 6px 6px;
}
.mmm .m-apollon-view .m-apollon-subscription-details-cont :is(vaadin-checkbox, vaadin-radio-button)[checked] label {
  border-color: #9649E8;
  background-color: rgba(150, 73, 232, 0.15);
}
.mmm .m-apollon-view .m-apollon-subscription-details-cont :is(vaadin-checkbox, vaadin-radio-button) label {
  position: relative;
  width: 100%;
  background-color: #fff;
  padding: 20px;
  border: 1px solid #C8C0D8;
  padding-left: 35px;
}
.mmm .m-apollon-view .m-apollon-subscription-details-cont vaadin-checkbox::part(checkbox),
.mmm .m-apollon-view .m-apollon-subscription-details-cont vaadin-radio-button::part(radio) {
  position: absolute;
  left: 10px;
  top: 20px;
}
.mmm .m-apollon-view .m-apollon-subscription-details-cont :is(vaadin-checkbox, vaadin-radio-button) .m-apollon-subscription-duration {
  display: inline-block;
}
.mmm .m-apollon-view .m-apollon-subscription-details-cont :is(vaadin-checkbox, vaadin-radio-button) .m-apollon-subscription-duration .subscripition-duration {
  display: block;
  font-size: 1.1428571429em;
}
.mmm .m-apollon-view .m-apollon-subscription-details-cont :is(vaadin-checkbox, vaadin-radio-button) .m-apollon-subscription-duration .highlight {
  background-color: #9649E8;
  color: #fff;
  padding: 3px 5px;
  display: inline-block;
  font-size: 0.7857142857em;
  text-transform: capitalize;
}
.mmm .m-apollon-view .m-apollon-subscription-details-cont :is(vaadin-checkbox, vaadin-radio-button) .m-apollon-subscription-price {
  float: right;
  font-size: 0.8571428571em;
}
.mmm .m-apollon-view .m-apollon-subscription-details-cont :is(vaadin-checkbox, vaadin-radio-button) .m-apollon-subscription-price .price {
  font-size: 1.5714285714em;
  font-weight: bold;
  color: #513766;
}
.mmm .m-apollon-view .m-apollon-points-container .m-subscription-adv-item {
  display: block;
  margin-bottom: 25px;
  text-align: center;
}
.mmm .m-apollon-view .m-apollon-points-container .m-subscription-adv-item .m-subscription-adv-item-icon {
  margin: 0 auto;
  width: 32px;
  height: 32px;
  background-color: rgba(150, 73, 232, 0.15);
  border-radius: 10px;
  padding: 5px;
}
.mmm .m-apollon-view .m-apollon-points-container .m-subscription-adv-item .m-subscription-adv-item-icon .adv-points-icon {
  width: 22px;
  height: 22px;
  background-image: url("img/icons/special-violet.svg");
  background-size: cover;
}
.mmm .m-apollon-view .m-apollon-points-container .m-subscription-adv-item .m-subscription-adv-item-icon .adv-location-icon {
  width: 18px;
  height: 21px;
  background-image: url("img/icons/location-violet.svg");
  background-size: cover;
}
.mmm .m-apollon-view .m-apollon-points-container .m-subscription-adv-item .m-subscription-adv-item-icon .adv-profile-icon {
  width: 21px;
  height: 22px;
  background-image: url("img/icons/members-violet.svg");
  background-size: cover;
}
.mmm .m-apollon-view .m-apollon-points-container .m-subscription-adv-item .m-subscription-adv-item-icon .adv-picture-icon {
  width: 21px;
  height: 21px;
  background-image: url("img/icons/photo-violet.svg");
  background-size: cover;
}
.mmm .m-apollon-view .m-apollon-points-container .m-subscription-adv-item .m-subscription-adv-item-desc {
  text-align: center;
}
.mmm .m-apollon-view .m-apollon-points-container .m-subscription-adv-item .m-subscription-adv-item-desc {
  font-size: 1.1428571429em;
  color: #513766;
  font-weight: bold;
  text-align: center;
  padding: 0 20px;
}
.mmm .m-apollon-view .m-apollon-points-container .m-subscription-adv-item .m-subscription-adv-item-current {
  text-align: center;
}
.mmm .m-apollon-view .m-apollon-points-container .m-subscription-adv-item .m-subscription-adv-item-current {
  font-size: 1em;
  color: #777777;
  text-align: center;
}
.mmm .m-apollon-view .m-link {
  color: #9649E8;
  text-decoration: underline;
  font-weight: bold;
  cursor: pointer;
}
.mmm .m-apollon-view .m-positive-btn {
  margin-top: 20px;
  margin-bottom: 20px;
}
.mmm .m-apollon-view vaadin-button.m-negative-btn {
  margin-top: 20px;
  margin-bottom: 20px;
}
.mmm .m-apollon-view .m-fieldgroup-title {
  font-size: 1.4285714286em;
  font-weight: bold;
  color: #513766;
  text-align: center;
  display: block;
  margin-bottom: 16px;
  margin-top: 20px;
  padding: 0;
  text-transform: none;
}
.mmm .m-apollon-view .m-apollon-adv-container {
  border-bottom: 1px solid #C8C0D8;
  padding-bottom: 20px;
}
.mmm .m-apollon-view .m-credit-def-cont {
  border-radius: 6px;
  background-color: #fff;
  padding: 5px;
  margin-bottom: 10px;
  box-shadow: 0px 1px 4px 0px #C8C0D8;
}
.mmm .m-apollon-view .m-credit-def-cont .m-credit-def-image {
  max-width: 35%;
  height: auto;
}
.mmm .m-apollon-view .m-credit-def-cont .m-credit-def-image img {
  max-width: 100%;
}
.mmm .m-apollon-view .m-credit-def-cont .m-credit-def {
  white-space: normal;
  max-width: 70%;
}
.mmm .m-apollon-view .m-credit-def-cont .m-credit-def {
  font-size: 0.8571428571em;
  color: #513766;
}
.mmm .m-apollon-view .m-credit-def-cont .m-credit-def .m-credit-def {
  white-space: normal;
}
.mmm .m-apollon-view .m-credit-def-cont .m-credit-def .important-info {
  font-weight: bold;
}
.mmm .m-apollon-view .m-credit-label {
  font-size: 1em;
  color: #513766;
  margin-bottom: 6px;
  margin-top: 6px;
}
.mmm .m-apollon-view .m-credit-label .important-info {
  font-weight: bold;
}
.mmm .m-apollon-view .m-details-container {
  border-radius: 6px;
  background-color: #fff;
  padding: 15px;
  box-shadow: 0px 1px 4px 0px #C8C0D8;
  margin-bottom: 20px;
}
.mmm .m-apollon-view .m-details-container .heart {
  width: 24px;
  height: 24px;
  display: inline-block;
  background-image: url("img/icons/special.svg");
  background-size: cover;
  margin-right: 5px;
  vertical-align: middle;
}
.mmm .m-apollon-view .m-details-container .m-credit-value {
  font-size: 1.2857142857em;
  color: #513766;
}
.mmm .m-apollon-view .m-details-container .m-credit-value .points-value {
  font-weight: bold;
}
.mmm .m-apollon-view .m-details-container .m-tag {
  border-radius: 3px;
  background-color: #EBE7F1;
  font-size: 0.8571428571em;
  font-weight: 600;
  color: #513766;
  padding: 0 5px;
  float: right;
  margin-top: 5px;
}
.mmm .m-apollon-view .m-details-container .m-offer-duration {
  color: #9649E8;
  font-weight: bold;
  font-size: 1.1428571429em;
}
.mmm .m-apollon-view .m-details-container .m-apollon-subscription-price {
  font-weight: bold;
  font-size: 0.8571428571em;
  float: right;
  color: #513766;
  margin-top: 5px;
}
.mmm .m-apollon-view .m-details-container .m-apollon-subscription-price .price {
  font-size: 1.6428571429em;
  line-height: 1;
}
.mmm .m-apollon-view .m-credit-penalities {
  font-size: 1em;
  margin-bottom: 20px;
}
.mmm .m-apollon-view .m-credit-penalities .m-credit-bold-label {
  font-weight: bold;
  margin-bottom: 10px;
}
.mmm .m-apollon-view .m-credit-penalities .important-text {
  font-weight: bold;
}
.mmm .m-apollon-view vaadin-button {
  width: 100%;
}
.mmm .m-apollon-view .m-small-label {
  white-space: normal;
  color: #777777;
  padding: 10px 15px;
  text-align: center;
  font-size: 0.7857142857em;
  line-height: 1.2;
}

/* ========================================================================
   Mobile (mobile-style)
   ======================================================================== */

.mmm .m-mobile-header-bar .m-icon-msg,
.mmm .m-mobile-header-bar .m-bell-icon-cont {
  float: right;
  margin-right: 15px;
  text-align: right;
  width: auto;
}
.mmm .m-mobile-header-bar .m-menu-label {
  color: #513766;
  font-size: 0.8571428571em;
  text-transform: uppercase;
  font-weight: bold;
  margin-top: 10px;
}
.mmm vaadin-dialog.m-window-wrapper::part(overlay) {
  border-radius: 0;
}
@media (min-width: 768px) {
  .mmm vaadin-dialog.m-window-wrapper::part(overlay) {
    border-radius: 12px;
  }
}
/* En Vaadin 8, l'en-tête (56px) recouvrait le contenu, d'où ses 55px de padding ; ici l'en-tête est une
   partie à part, au-dessus du contenu. */
.mmm vaadin-dialog.m-window-wrapper::part(content) {
  padding-top: 0 !important;
}
.mmm vaadin-dialog.m-window-wrapper::part(content)::before {
  display: none;
}
.mmm vaadin-dialog.m-window-wrapper::part(header) {
  padding: 20px;
  background-color: #fff;
}
.mmm vaadin-dialog.m-window-wrapper::part(title) {
  padding: 0;
  font-size: 1.1428571429em;
  color: #513766;
  font-weight: bold;
  line-height: 1;
}
.mmm vaadin-dialog.m-window-wrapper [slot="header-content"] vaadin-button {
  width: 32px;
  height: 32px;
  background-color: #EBE7F1;
  border-radius: 0;
  text-align: center;
  position: absolute;
  right: 20px;
  top: 10px;
  padding: 10px;
}
.mmm vaadin-dialog.m-window-wrapper [slot="header-content"] vaadin-button::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("img/icons/fermer.svg");
  line-height: 32px;
}
.mmm vaadin-dialog.m-application-window .m-text-area-wrapper {
  padding: 20px;
  margin-top: 10px;
}
.mmm vaadin-dialog.m-application-window .m-text-area-wrapper {
  background-color: #EBE7F1;
  border-radius: 7px;
  padding-bottom: 30px;
  position: relative;
}
.mmm vaadin-dialog.m-application-window .m-text-area-wrapper span {
  position: absolute;
  bottom: 14px;
  right: 30px;
  color: #553d68;
  font-size: 0.8571428571em;
  font-weight: bold;
  line-height: 1;
}
.mmm vaadin-dialog.m-application-window .m-big-textfield {
  color: #513766;
  background-color: #EBE7F1;
  border: none;
  padding: 15px;
  height: 200px;
  margin: 0;
  box-shadow: none;
}
.mmm vaadin-dialog.m-application-window .m-candidate-secret-share {
  padding: 10px 20px;
  margin-bottom: 50px;
}
.mmm vaadin-dialog.m-application-window .m-candidate-heart {
  margin-left: 15px;
}
.mmm vaadin-dialog.m-application-window .m-candidate-heart .m-application-cost {
  font-size: 1em;
  text-transform: none;
}
.mmm vaadin-dialog.m-application-window .m-candidate-heart::before {
  content: "";
  display: inline-block;
  background-image: url("img/icons/blanc.svg");
  background-size: cover;
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
.mmm vaadin-dialog.m-application-window .m-window-action-wrapper {
  border-top: 1px solid #C8C0D8;
  padding: 15px 20px;
}
.mmm vaadin-dialog.m-application-window .m-negative-btn {
  background-color: transparent;
}
.mmm .m-mobile-header-bar {
  padding-top: 6px;
  width: 100%;
}
.mmm .m-mobile-header-bar .m-icon-logo {
  margin-bottom: 0;
}
.mmm .m-mobile-header-bar .m-icon-menu {
  position: relative;
  float: left;
  width: 16.6666666667%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  float: none;
}
.mmm .m-mobile-header-bar .m-icon-logo {
  position: relative;
  float: left;
  width: 41.6666666667%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  float: none;
  padding-right: 10px;
}
.mmm .m-mobile-header-bar .m-icon-logo {
  display: block;
  max-width: 100%;
  height: 40px;
}
.mmm .m-mobile-header-bar .m-fantasies-counter-container {
  color: #805b9e;
  width: auto;
  float: none;
  line-height: 17px;
  margin-top: 10px;
}
.mmm .m-mobile-header-bar .m-fantasies-counter-container span {
  display: block;
  text-align: center;
}
.mmm .m-mobile-header-bar .m-fantasies-counter-container .m-fantasies-count-label {
  font-weight: bold;
}
.mmm .m-mobile-header-bar .m-fantasies-counter-container .m-fantasies-label {
  font-size: 1em;
}
.mmm .m-mobile-header-bar .m-icon-pts {
  width: auto;
  float: none;
  text-align: center;
  padding: 0 2px;
}
.mmm .m-mobile-header-bar .m-bell-icon-cont {
  position: relative;
  margin-top: 10px;
}
.mmm .m-mobile-header-bar .m-bell-icon-cont::after {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background-image: url("img/icons/notification.svg");
  background-size: cover;
}
.mmm .m-mobile-header-bar .m-bell-icon-cont .m-bell-icon {
  position: absolute;
  background-color: #9649E8;
  border-radius: 20px;
  color: #fff;
  font-size: 11px;
  min-height: 20px;
  min-width: 20px;
  line-height: 20px;
  text-align: center;
  position: absolute;
  top: -11px;
  right: -8px;
}
.mmm .m-mobile-header-bar .m-icon-pts:after {
  font-size: 0.6428571429em;
  font-weight: bold;
}
.mmm .m-mobile-header-bar .m-icon-pts .m-icon-label {
  background-color: #9649E8;
  border-radius: 20px;
  color: #fff;
  font-size: 0.7142857143em;
  font-weight: normal;
  min-height: 20px;
  min-width: 20px;
  line-height: 20px;
  text-align: center;
  position: absolute;
  top: -17px;
  right: 15px;
}
.mmm .m-mobile-header-bar .m-icon-msg .m-icon-label {
  background-color: #9649E8;
  border-radius: 20px;
  color: #fff;
  font-size: 0.7142857143em;
  font-weight: bold;
  min-height: 20px;
  min-width: 20px;
  line-height: 20px;
  text-align: center;
  position: absolute;
  top: -11px;
  right: -8px;
}
.mmm .m-mobile-header-bar .m-login-singup-butns {
  background-color: #EBE7F1;
  margin-bottom: 0;
}
.mmm .m-mobile-header-bar .m-login-singup-butns {
  padding: 21px 18px 11px 18px;
  border-top: 1px solid #C8C0D8;
  border-bottom: 1px solid #C8C0D8;
}
.mmm .m-mobile-header-bar .m-login-btn {
  margin-bottom: 10px;
}
.mmm .m-mobile-login,
.mmm .m-mobile-signup {
  width: 100%;
}
.mmm .m-mobile-login .m-header-container,
.mmm .m-mobile-signup .m-header-container {
  border-bottom: 1px solid #C8C0D8;
  padding: 10px 18px;
}
.mmm .m-mobile-login .m-positive-btn,
.mmm .m-mobile-signup .m-positive-btn {
  margin: 8px 0px;
}
.mmm .m-mobile-login .m-small-label,
.mmm .m-mobile-signup .m-small-label {
  margin-top: 16px;
  margin-bottom: 0px;
}
.mmm .m-mobile-login .m-small-label u,
.mmm .m-mobile-signup .m-small-label u {
  cursor: pointer;
  margin-left: 5px;
}
.mmm .m-mobile-login .m-small-label {
  text-align: right;
  margin-top: 0px;
  margin-bottom: 18px;
}
.mmm .m-main-screen-mobile {
  height: 100%;
  background-color: #fff;
}
.mmm .m-main-screen-mobile .m-fantasies-container {
  padding: 0 18px;
}
.mmm .m-main-screen-mobile .m-main-content {
  background-color: #EBE7F1;
}
.mmm .m-main-screen-mobile :is(vaadin-text-field, vaadin-password-field, vaadin-email-field) {
  --lumo-text-field-size: 45px;
}
.mmm .m-main-screen-mobile :is(vaadin-text-field, vaadin-password-field, vaadin-email-field)::part(input-field) {
  height: 45px;
}
.mmm .m-main-screen-mobile .m-myprofile-description-tab .m-myfilter-cat-container.m-apollo-container {
  background-color: #c2c2c2;
  border-radius: 5px;
  border: 1px solid grey;
  padding: 5px;
}
.mmm .m-main-screen-mobile .m-warning-container {
  background-color: #b60100;
  width: 100%;
  overflow-x: scroll;
  font-size: 0.8em;
  line-height: 1.2em;
}
.mmm .m-main-screen-mobile .m-warning-container.m-closable {
  position: relative;
  text-align: center;
}
.mmm .m-main-screen-mobile .m-warning-container.m-closable .m-close-btn {
  display: inline-block;
  position: absolute;
  right: 0px;
  top: 0px;
}
.mmm .m-main-screen-mobile .m-warning-container.m-closable .m-close-btn .fa-times {
  display: inline-block;
  float: right;
  padding: 5px;
  color: #fff;
}
.mmm .m-main-screen-mobile .m-warning-container.m-closable .m-warning-label {
  margin-top: 12px;
  margin-bottom: 0;
}
.mmm .m-main-screen-mobile .m-warning-container .m-warning-label {
  margin-top: 12px;
  margin-bottom: 12px;
  width: 100%;
  color: #fff;
  text-align: center;
}
.mmm .m-main-screen-mobile .m-menu-buttons-mobile {
  margin: 0px;
  top: 0px;
  left: -100%;
  position: fixed;
  z-index: 20;
  opacity: 0;
  transition: 0.3s ease;
  background-color: #fff;
  color: #513766;
  text-align: center;
}
.mmm .m-main-screen-mobile .m-menu-buttons-mobile.m-sidebar-open {
  opacity: 1;
  left: 0;
  overflow: auto;
  height: 100%;
}
.mmm .m-main-screen-mobile .m-menu-buttons-mobile .m-fantasies-counter {
  text-align: center;
  font-size: 1.2857142857em;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 40px;
  background-color: #553d68;
  width: 100%;
}
.mmm .m-main-screen-mobile .m-menu-buttons-mobile .m-menu-button {
  padding: 0 15px;
}
.mmm .m-main-screen-mobile .m-menu-buttons-mobile .m-menu-button.m-menu-button-pressed {
  margin-top: -1px;
  background-color: #ebebeb;
}
.mmm .m-main-screen-mobile .m-menu-buttons-mobile .m-menu-button {
  border-bottom: none;
}
.mmm .m-main-screen-mobile .m-menu-buttons-mobile .m-menu-button {
  display: block;
  text-align: center;
  font-size: 1.2857142857em;
  font-weight: bold;
  text-transform: uppercase;
  padding: 10px 5px;
  border-bottom: 1px solid #fff;
}
.mmm .m-main-screen-mobile .m-menu-buttons-mobile .m-menu-button.m-menu-button-pressed {
  color: #553d68;
}
.mmm .m-main-screen-mobile .m-myprofile .m-fantasy-centered-container .masonry-item {
  overflow: auto;
  border-bottom: 1px solid #ebebeb;
  width: 100%;
  margin: 9px auto;
  border-radius: 12px;
  border: 1px solid #C8C0D8;
}
.mmm .m-main-screen-mobile .m-myprofile .m-myprofile-tabsheet .masonry-item {
  width: calc(100% - 15px);
}
.mmm .m-main-screen-mobile .m-my-account-buttons-container {
  overflow: visible;
}
.mmm .m-main-screen-mobile .m-appreciation-centered-container .masonry-item {
  overflow: auto;
  padding: 10px;
  border-bottom: 1px solid #ebebeb;
  width: calc(100% - 15px) !important;
  margin: 9px auto;
  border-radius: 12px;
  border: 1px solid #C8C0D8;
}
.mmm .m-main-screen-mobile .m-fantasies-container .masonry-layout {
  margin: 0 auto;
}
.mmm .m-main-screen-mobile .m-fantasies-container .masonry-layout .masonry-item {
  border-radius: 12px;
  width: 100%;
  max-width: 100%;
  margin: 9px auto;
  border: 1px solid #C8C0D8;
}
.mmm .m-main-screen-mobile .m-fantasies-container .masonry-layout .masonry-item:first-child {
  border-bottom: 0;
}
.mmm .m-main-screen-mobile .masonry-layout .masonry-item {
  max-width: 100%;
}
.mmm .m-main-screen-mobile .masonry-layout .masonry-item {
  box-shadow: none;
}
.mmm vaadin-dialog.m-mobile.m-popup-window.m-age-confirmation::part(content) {
  background-image: none;
}
.mmm vaadin-dialog.m-mobile.m-popup-window.m-age-confirmation .m-age-confirmation {
  min-width: inherit;
  max-height: none;
  box-shadow: none;
  top: auto;
  margin-top: inherit;
  max-width: none;
}
.mmm vaadin-dialog.m-mobile.m-popup-window.m-age-confirmation .m-age-confirmation .m-protect {
  background-position: 24px 12px;
}
.mmm .m-header-link {
  display: block;
  font-size: 0.8571428571em;
  font-weight: 600;
  text-transform: uppercase;
  padding-left: 15px;
  background: url("img/icons/chevron-gauche-grand.svg") no-repeat 0px 2px;
}
.mmm .m-menu-header-container {
  padding: 15px 20px;
}
.mmm .m-menu-header-container .m-link-label {
  line-height: 1;
}
.mmm .m-menu-header-container .m-link-label {
  text-transform: uppercase;
  font-size: 0.8571428571em;
  font-weight: bold;
}
.mmm .m-menu-header-container .m-link-label::before {
  content: "";
  display: inline-block;
  background-image: url("img/icons/fermer-sombre.svg");
  background-size: 12px 12px;
  background-position: center;
  background-repeat: no-repeat;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  margin-bottom: 2px;
  vertical-align: middle;
}
.mmm .m-menu-container {
  border-top: 1px solid #C8C0D8;
}
.mmm .m-menu-container .m-menu-myprofile-wrapper,
.mmm .m-menu-container .m-menu-fantasy-wrapper,
.mmm .m-menu-container .m-menu-myaccount-wrapper,
.mmm .m-menu-container .m-menu-subscription-wrapper {
  padding: 15px 25px 15px 50px;
  position: relative;
  cursor: pointer;
}
.mmm .m-menu-container .m-menu-subscription-wrapper {
  color: #C86ACE;
}
.mmm .m-menu-container .m-menu-subscription-wrapper .m-points-number {
  background-color: #C86ACE;
  text-transform: uppercase;
  color: #fff;
  font-weight: bold;
  font-size: 0.8571428571em;
  padding: 5px 10px;
  border-radius: 10px;
  line-height: 1;
  margin-top: 3px;
}
.mmm .m-menu-container .m-menu-subscription-wrapper::before {
  content: "";
  display: block;
  position: absolute;
  left: 20px;
  top: 15px;
  background-image: url("img/icons/abon.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 22px;
  height: 22px;
  margin-right: 6px;
}
.mmm .m-menu-container .m-menu-myprofile-wrapper::before {
  content: "";
  display: block;
  position: absolute;
  left: 20px;
  top: 15px;
  background-image: url("img/icons/profil.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 21px;
  height: 22px;
  margin-right: 6px;
}
.mmm .m-menu-container .m-menu-myaccount-wrapper::before {
  content: "";
  display: block;
  position: absolute;
  left: 20px;
  top: 15px;
  background-image: url("img/icons/param.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 22px;
  height: 22px;
  margin-right: 6px;
}
.mmm .m-menu-container .m-menu-fantasy-wrapper::before {
  content: "";
  display: block;
  position: absolute;
  left: 20px;
  top: 15px;
  background-image: url("img/icons/fantasme-3.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 24px;
  height: 22px;
  margin-right: 6px;
}
.mmm .m-menu-container .m-menu-fantasy-wrapper .m-fantasies-count-label {
  font-size: 0.8571428571em;
}
.mmm .m-menu-container .m-menu-item {
  font-size: 1em;
  text-transform: uppercase;
  font-weight: bold;
}
.mmm .m-menu-container .m-tips-button {
  text-align: center;
  margin-top: 15px;
  margin-bottom: 50px;
}
.mmm .m-menu-container .m-tips-button {
  border: 1px solid #C8C0D8;
  border-radius: 10px;
  max-width: 224px;
  margin: 0 auto;
  box-shadow: 0px 2px 4px 0px #C8C0D8;
  cursor: pointer;
}
.mmm .m-menu-container .m-tips-button span {
  border-top: 1px solid #C8C0D8;
  padding: 13px 35px 13px 10px;
  position: relative;
}
.mmm .m-menu-container .m-tips-button span::after {
  content: "";
  width: 26px;
  height: 26px;
  background-color: #EBE7F1;
  border-radius: 30px;
  display: block;
  position: absolute;
  right: 10px;
  bottom: 13px;
  background-image: url("img/icons/moyen.svg");
  background-repeat: no-repeat;
  background-size: 5px 10px;
  background-position: center;
}
.mmm .m-menu-container .m-tips-button .m-ad-type {
  font-weight: bold;
}
.mmm .m-menu-container .m-tips-button img {
  max-width: 100%;
}
.mmm .m-menu-container .m-negative-btn {
  margin-bottom: 28px;
  max-width: 224px;
}
.mmm .m-menu-container .m-negative-btn {
  background-color: #fff;
}
.mmm .m-links-container {
  border-top: 1px solid #C8C0D8;
  padding: 18px 50px;
}
.mmm .m-links-container .m-link-label {
  margin-bottom: 10px;
  font-weight: 600;
  cursor: pointer;
}
.mmm .m-footer-container {
  border-top: 1px solid #C8C0D8;
  padding: 18px;
}
.mmm .m-container {
  padding: 18px;
}
.mmm .m-fantasies-filter-wrapper {
  display: block;
  margin-bottom: 0;
}
.mmm .m-fantasies-filter-wrapper.m-fantasies-filter-wrapper-open {
  position: relative;
}
.mmm .m-fantasies-filter-wrapper.m-fantasies-filter-wrapper-open vaadin-button.m-close-btn {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  top: 4px;
  font-size: 0;
  color: transparent;
  line-height: 0;
  background-image: url("img/icons/rond.svg");
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: cover;
}
.mmm .m-fantasies-filter-wrapper.m-fantasies-filter-wrapper-open .m-fantasies-search-field {
  display: block;
  width: 100%;
}
.mmm .m-fantasies-filter-wrapper.m-fantasies-filter-wrapper-open .m-fantasies-search-field::part(label) {
  position: absolute;
  left: 0;
  top: 0;
}
.mmm .m-fantasies-filter-wrapper.m-fantasies-filter-wrapper-open .m-fantasies-search-field {
  display: block;
  width: 100%;
  background: transparent;
  color: #513766;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid #C8C0D8;
  outline: none;
  box-shadow: none;
  padding-left: 25px;
  padding-right: 25px;
  margin-top: 0;
  height: 35px;
}
.mmm .m-fantasies-search-field-button {
  float: right;
}
.mmm .m-fantasies-search-field-button {
  padding: 4px 8px;
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #C8C0D8;
  box-shadow: 0px 1px 5px 0px #C8C0D8;
}
.mmm .m-fantasies-filter-button {
  background-color: #513766;
  color: #fff;
  text-transform: uppercase;
  padding: 3px 12px 3px 5px;
  border-radius: 6px;
  line-height: 1;
  margin-right: 8px;
  border: 1px solid #513766;
}
.mmm .m-fantasies-filter-button::part(label) {
  line-height: 1;
  font-size: 0.8571428571em;
  font-weight: bold;
  display: inline-block;
  vertical-align: middle;
}
.mmm .m-fantasies-filter-button::before {
  content: "";
  display: inline-block;
  font-size: 0;
  color: transparent;
  line-height: 0;
  background-image: url("img/icons/criteres.svg");
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: cover;
  vertical-align: middle;
  margin-right: 5px;
}
.mmm .m-fantasies-sorting-button {
  background-color: #fff;
  color: #513766;
  text-transform: uppercase;
  padding: 3px 12px 3px 5px;
  border-radius: 6px;
  line-height: 1;
  border: 1px solid #C8C0D8;
  margin-right: 8px;
  box-shadow: 0px 1px 5px 0px #C8C0D8;
}
.mmm .m-fantasies-sorting-button::part(label) {
  line-height: 1;
  font-size: 0.8571428571em;
  font-weight: bold;
  display: inline-block;
  vertical-align: middle;
}
.mmm .m-fantasies-sorting-button::before {
  content: "";
  display: inline-block;
  font-size: 0;
  color: transparent;
  line-height: 0;
  background-image: url("img/icons/sombre.svg");
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: cover;
  vertical-align: middle;
}
.mmm vaadin-popover.m-fantasies-sorting-button-popup::part(overlay) {
  border-radius: 2px;
  box-shadow: 0px 1px 5px 0px #777777;
  background-color: #fff;
  padding: 0;
  border: none;
}
.mmm vaadin-popover.m-fantasies-sorting-button-popup .notification-option {
  padding: 15px;
  cursor: pointer;
  font-size: 1em;
  line-height: 1;
  color: #513766;
  font-weight: normal;
}
.mmm .m-fantasy-promo-header-label {
  color: #513766;
  font-size: 1.1428571429em;
  font-weight: bold;
  margin-top: 20px;
}
.mmm .m-fantasy-promo-header-label .m-totalResultNumber {
  display: block;
  font-size: 0.9285714286em;
  font-weight: normal;
}
.mmm vaadin-notification-card {
  max-width: 320px;
}

/* ========================================================================
   Ordinateur (desktop-style)
   ======================================================================== */

.mmm .m-main-screen-desktop {
  background-color: #EBE7F1;
  min-height: 100%;
}
.mmm .m-main-screen-desktop .m-myprofile .m-myprofile-header-container .ex-popup-button {
  right: 50px;
}
.mmm .m-main-screen-desktop .m-apollon-view {
  text-align: center;
}
.mmm .m-main-screen-desktop .m-apollon-view .m-main-content {
  max-width: 500px;
  margin: 0 auto;
}
.mmm .m-main-screen-desktop .m-sidebar-left {
  background-color: #fff;
  z-index: 10;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 60px;
}
.mmm .m-main-screen-desktop .m-sidebar-left.m-sidebar-open {
  width: 360px;
}
.mmm .m-main-screen-desktop .m-sidebar-left.m-sidebar-open .m-sidebar-username-label {
  font-size: 1.5714285714em;
}
.mmm .m-main-screen-desktop .m-sidebar-left.m-sidebar-open .m-menu-buttons {
  clear: both;
  width: 100%;
  text-align: center;
}
.mmm .m-main-screen-desktop .m-sidebar-left.m-sidebar-open .m-menu-buttons .m-menu-button {
  display: block;
  text-align: center;
}
.mmm .m-main-screen-desktop .m-sidebar-left.m-sidebar-open .m-menu-buttons .m-menu-button:hover {
  color: #553d68;
}
.mmm .m-main-screen-desktop .m-sidebar-left.m-sidebar-open .m-menu-buttons > * {
  position: relative;
  margin: 0 -5px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  color: #805b9e;
  font-size: 1.2857142857em;
  font-weight: bold;
  text-transform: uppercase;
  padding: 15px 5px;
  border-top: 1px solid #ebebeb;
}
.mmm .m-main-screen-desktop .m-sidebar-left.m-sidebar-open .m-menu-buttons .m-menu-button-collapsable-container {
  width: 100%;
  text-align: center;
}
.mmm .m-main-screen-desktop .m-sidebar-left.m-sidebar-open .m-menu-buttons .m-icon-menu {
  position: absolute;
  right: 2px;
  top: 15px;
  cursor: positive;
}
.mmm .m-main-screen-desktop .m-sidebar-left.m-sidebar-open .m-menu-buttons .m-icon-menu .fa {
  line-height: 32px;
  font-size: 32px;
}
.mmm .m-main-screen-desktop .m-sidebar-left.m-sidebar-open .m-menu-buttons .m-menu-button-pressed {
  border-left: 10px solid #553d68;
  color: #553d68;
}
.mmm .m-main-screen-desktop .m-sidebar-left.m-sidebar-open .m-menu-buttons .m-menu-button-childs-container {
  padding: 5px;
}
.mmm .m-main-screen-desktop .m-sidebar-left.m-sidebar-open .m-menu-buttons .m-menu-button-childs-container {
  text-align: center;
}
.mmm .m-main-screen-desktop .m-sidebar-left.m-sidebar-open .m-menu-buttons .m-menu-button-childs-container .m-menu-button-child {
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  padding: 10px 5px;
  border-top: 1px solid #ebebeb;
  display: block;
  text-align: center;
  font-size: 0.8571428571em;
}
.mmm .m-main-screen-desktop .m-sidebar-left.m-sidebar-open .m-menu-buttons .m-menu-button-childs-container .m-menu-button-child:hover {
  color: #553d68;
}
.mmm .m-main-screen-desktop .m-sidebar-left.m-sidebar-open .m-menu-buttons .m-menu-button-childs-container .m-menu-button-child.m-menu-button-pressed {
  color: #553d68;
  border-left: 10px solid #553d68;
}
.mmm .m-main-screen-desktop .m-sidebar-left.m-sidebar-open .m-menu-buttons .m-menu-button-childs-container .m-menu-button-child:first-child {
  border-top: 0;
}
.mmm .m-main-screen-desktop .m-sidebar-left.m-sidebar-open .m-sidebar-big-grey-label,
.mmm .m-main-screen-desktop .m-sidebar-left.m-sidebar-open .m-textfield-group {
  display: block;
}
.mmm .m-main-screen-desktop .m-sidebar-left .m-icon-big {
  display: block;
  padding: 10px;
  text-align: center;
  width: 100%;
}
.mmm .m-main-screen-desktop .m-sidebar-left .m-icon-big .fa {
  display: block;
  text-align: center;
  font-size: 20px;
  margin: 0 auto;
}
.mmm .m-main-screen-desktop .m-sidebar-left #login_button,
.mmm .m-main-screen-desktop .m-sidebar-left #register_button {
  display: block;
  overflow: hidden;
  white-space: nowrap;
}
.mmm .m-main-screen-desktop .m-sidebar-left .m-sidebar-toggle-left {
  background-color: #fff;
  cursor: pointer;
  position: absolute;
  right: -35px;
  width: 35px;
  height: 35px;
  top: 10px;
  text-align: center;
  border-radius: 0px 5px 5px 0px;
  border: 0px solid #000000;
}
.mmm .m-main-screen-desktop .m-sidebar-left .m-sidebar-toggle-left .fa {
  font-size: 25px;
  line-height: 35px;
  display: block;
  width: 100%;
  text-align: center;
}
.mmm .m-main-screen-desktop .m-sidebar-left .m-sidebar-username-label {
  font-size: 0.7857142857em;
  line-height: 1.1;
  font-weight: bold;
  color: #553d68;
  text-align: center;
  margin-bottom: 15px;
  cursor: pointer;
}
.mmm .m-main-screen-desktop .m-sidebar-left .m-small-label {
  font-size: 0.8571428571em;
  text-align: right;
  margin-top: 0px;
  margin-bottom: 18px;
}
.mmm .m-main-screen-desktop .m-sidebar-left .m-small-label u {
  cursor: pointer;
  margin-left: 5px;
}
.mmm .m-main-screen-desktop .m-sidebar-left .m-link {
  color: #9649E8;
  text-align: center;
  width: 100%;
  font-weight: 600;
}
.mmm .m-main-screen-desktop .m-sidebar-left .m-textfield-group {
  padding: 15px;
  display: none;
}
.mmm .m-main-screen-desktop .m-sidebar-left .m-sidebar-big-grey-label,
.mmm .m-main-screen-desktop .m-sidebar-left .m-sidebar-middle-grey-label,
.mmm .m-main-screen-desktop .m-sidebar-left .m-sidebar-pink-label {
  font-size: 1.2857142857em;
  margin: 0 auto;
  line-height: 1.2em;
  text-align: center;
  max-width: 80%;
  font-weight: 600;
}
.mmm .m-main-screen-desktop .m-sidebar-left .m-sidebar-middle-grey-label {
  font-size: 0.8571428571em;
  max-width: 55%;
  font-weight: 400;
}
.mmm .m-main-screen-desktop .m-sidebar-left .m-sidebar-pink-label {
  margin-top: 18px;
  font-size: 0.8571428571em;
  color: #ee94e2;
}
.mmm .m-main-screen-desktop .m-sidebar-main-container {
  padding: 10px 0px 0px 0px;
}
.mmm .m-main-screen-desktop .m-sidebar-right {
  background-color: #513766;
  position: fixed;
  z-index: 10;
  top: 0;
  bottom: 0;
  right: 0;
  height: 100%;
}
.mmm .m-main-screen-desktop .m-faq-page .m-page-main-container {
  margin: 0 auto;
  max-width: 600px;
}
.mmm .m-main-screen-desktop .m-cgu .m-page-main-container {
  margin: 0 auto;
  max-width: 600px;
}
.mmm .m-main-screen-desktop .m-myprofile .m-profile-header {
  background-color: #EBE7F1;
}
.mmm .m-main-screen-desktop .m-myprofile .m-profile-pictures-container {
  padding: 30px 0px;
}
.mmm .m-main-screen-desktop .m-content-container {
  max-width: 400px;
  min-width: 400px;
  margin: auto;
  display: block;
}
.mmm .m-main-screen-desktop .m-my-account-buttons-container {
  margin: 20% auto;
}
.mmm .m-main-screen-desktop .m-my-account-page .m-page-main-container {
  margin: 0 auto;
  max-width: 400px;
}
.mmm .m-main-screen-desktop .m-myprofile-description-tab,
.mmm .m-main-screen-desktop .m-myprofile-secrets-tab,
.mmm .m-main-screen-desktop .m-myprofile-appreciations-tab {
  padding: 10px;
  width: 100%;
}
.mmm .m-main-screen-desktop .m-apollon-view .m-fieldgroup-title {
  text-align: center;
}
.mmm .m-main-screen-desktop .m-apollon-view .m-my-account-buttons-container {
  max-width: 400px;
  margin: 0 auto;
}
.mmm .m-main-screen-desktop .m-sidebar-left.m-sidebar-open .m-menu-buttons .m-menu-button-childs-container {
  max-width: 75%;
  margin: 0 auto;
}
.mmm .m-main-screen-desktop .m-links-container {
  border-top: 1px solid #C8C0D8;
  padding: 18px 50px;
  text-align: center;
}
.mmm .m-main-screen-desktop .m-links-container .m-link-label {
  margin-bottom: 10px;
  font-weight: 600;
  margin-right: 7px;
  float: left;
}
.mmm .m-main-screen-desktop .m-links-container .m-link-label::after {
  content: "•";
  display: inline-block;
  margin-left: 10px;
}
.mmm .m-main-screen-desktop .m-links-container > :last-child .m-link-label::after {
  display: none;
}
.mmm .m-main-screen-desktop .m-menu-container {
  padding: 0 20px;
}
.mmm .m-main-screen-desktop .m-menu-container .m-menu-item {
  font-size: 1.1428571429em;
  text-transform: uppercase;
  font-weight: bold;
}
.mmm .m-main-screen-desktop .m-menu-container .m-fantasies-count-label {
  font-size: 1.1428571429em;
}
.mmm .m-main-screen-desktop .m-fantasies-filter-wrapper {
  width: 100%;
  max-width: 85%;
  margin: 0 auto;
  padding-top: 44px;
}
.mmm .m-main-screen-desktop .m-fantasies-filter-wrapper .m-fantasies-filter-button,
.mmm .m-main-screen-desktop .m-fantasies-filter-wrapper .m-fantasies-sorting-button {
  height: 44px;
  padding: 8px 15px 8px 10px;
  margin-right: 20px;
}
.mmm .m-main-screen-desktop .m-fantasies-filter-wrapper .m-fantasies-search-field {
  position: relative;
}
.mmm .m-main-screen-desktop .m-fantasies-filter-wrapper .m-fantasies-search-field::part(label) {
  position: absolute;
  top: 8px;
  left: 5px;
}
.mmm .m-main-screen-desktop .m-fantasies-filter-wrapper .m-fantasies-search-field {
  height: 44px;
  margin-top: 0;
  padding-left: 35px;
}
.mmm .warning-and-main-container {
  width: 100%;
}
.mmm .warning-and-main-container {
  overflow: auto;
}
.mmm .warning-and-main-container .m-main-label-bold {
  line-height: inherit;
  margin-left: 2px;
}
.mmm .warning-and-main-container .m-warning-container {
  background-color: #b60100;
  position: relative;
  text-align: center;
}
.mmm .warning-and-main-container .m-warning-container.m-closable {
  margin-right: -20px;
}
.mmm .warning-and-main-container .m-warning-container.m-closable .m-close-btn {
  display: inline-block;
  position: absolute;
  right: 51px;
  top: 3px;
}
.mmm .warning-and-main-container .m-warning-container.m-closable .m-close-btn .fa-times {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 2px;
  color: #fff;
}
.mmm .warning-and-main-container .m-warning-container.m-closable .m-warning-label {
  margin-top: 12px;
  padding: 0 35px 0px 35px;
}
.mmm .warning-and-main-container .m-warning-container.m-closable vaadin-button.m-negative-btn {
  width: auto;
  margin: auto auto auto auto;
  display: inline-block;
}
.mmm .warning-and-main-container .m-warning-container.m-closable vaadin-button.m-negative-btn {
  padding: 2px 15px;
}
.mmm .warning-and-main-container .m-warning-container .m-warning-label {
  margin-top: 12px;
  width: 100%;
  text-align: center;
  color: #fff;
  padding: 0 35px 10px 35px;
}
.mmm .m-icon-logo {
  display: block;
  margin: 0 auto 12px auto;
  cursor: pointer;
}
.mmm .m-fantasy-centered-container {
  overflow-y: auto !important;
  overflow-x: hidden;
  height: 100%;
}
.mmm .m-fantasy-centered-container,
.mmm .m-appreciation-centered-container {
  margin: 0 auto;
  display: block;
}
.mmm .m-myprofile-appreciations-tab .m-my-profile-appreciation-container {
  padding: 10px;
}
.mmm .m-myprofile-secrets-tab .m-small-label {
  text-align: center;
}
.mmm .m-myprofile-new-fantasy-layout .m-page-main-container {
  max-width: 400px;
  margin: auto;
}
.mmm .m-myprofile-description-tab {
  color: #525252;
}
.mmm .m-myprofile-description-tab .m-myprofile-user-description-container {
  clear: both;
}
.mmm .m-myprofile-description-tab .m-myprofile-user-description-container:after {
  content: "";
  display: table;
  clear: both;
}
.mmm .m-myprofile-description-tab .m-myprofile-user-description-container.m-myfilter-cat-container .m-my-filter-warning-container {
  padding-left: 5px;
  padding-right: 5px;
}
.mmm .m-myprofile-fantasy-tab .m-myprofile-fantasy-promo-layout .m-positive-btn {
  width: 75%;
  font-size: 0.7142857143em;
}
.mmm .m-myprofile-fantasy-tab .m-myprofile-fantasy-promo-layout .m-positive-btn {
  line-height: 1;
  padding: 10px;
}

/* ========================================================================
   Ajustements Flow : règles qui doivent passer après celles reprises ci-dessus
   ======================================================================== */

/* la mosaïque se dispose en colonnes sur toute la largeur (l'add-on centrait un bloc de largeur fixe) */
.mmm .m-fantasies-container .masonry-layout,
.mmm .m-myprofile-fantasy-tab .masonry-layout {
  display: block;
  width: 100%;
}
/* listes déroulantes (ComboBox .m-dropdown) : le chevron du thème remplace le bouton Lumo */
.mmm vaadin-combo-box.m-dropdown::part(toggle-button) {
  color: transparent;
}
.mmm .m-dropdown::after {
  pointer-events: none;
}

/* Boutons du pied des fenêtres (assistant) : le HorizontalLayout ne réduit pas ses enfants, et les
   boutons ont width: 100% : ils se partagent la largeur. Dernière étape : empilés, comme en Vaadin 8. */
.mmm .m-window-footer > vaadin-button.m-positive-btn,
.mmm .m-window-footer > vaadin-button.m-negative-btn {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-wizard-step-edit-fantasy-step-4 .m-window-footer {
  flex-direction: column;
}

/* Envoi de photo : comme l'UploadField de Vaadin 8, un bouton invisible couvre la zone « + Ajouter une
   photo » ; ni texte « Drop file here » ni liste des fichiers envoyés. */
.mmm .m-myprofile-description-new-photo-layout {
  position: relative;
}
.mmm .m-myprofile-description-new-photo-layout vaadin-upload.m-image-uploader {
  position: absolute;
  inset: 0;
  padding: 0;
  border: none;
  background: transparent;
  min-height: 0;
}
.mmm .m-myprofile-description-new-photo-layout vaadin-upload.m-image-uploader > vaadin-button {
  display: block !important;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.mmm vaadin-upload.m-image-uploader::part(drop-label),
.mmm vaadin-upload.m-image-uploader::part(file-list),
.mmm vaadin-upload.m-image-uploader > vaadin-upload-file-list {
  display: none;
}

/* Photos du profil côte à côte (enveloppe glisser-déposer en ligne, comme en Vaadin 8) */
.mmm .m-profile-pictures-container > .m-dd-wrapper {
  display: inline-block;
  vertical-align: top;
}

/* Avertissement d'âge : le conteneur est en display: block (thème Vaadin 8) ; les libellés, des div en
   Vaadin 8, sont ici des span : un par ligne. */
.mmm .m-age-confirmation > span {
  display: block;
}

/* Interrupteur (case à cocher m-switcher) : état coché porté par l'attribut checked de Flow, case native
   masquée. */
.mmm vaadin-checkbox.m-switcher::part(checkbox) {
  display: none;
}
.mmm vaadin-checkbox.m-switcher[checked]::before {
  background-color: #9649E8;
}
.mmm vaadin-checkbox.m-switcher[checked]::after {
  transform: translateX(14px);
}

/* Zone de texte des fenêtres (candidature…) : toute la largeur, comme en Vaadin 8 */
.mmm .m-text-area-wrapper {
  align-self: stretch;
}
.mmm .m-text-area-wrapper vaadin-text-area {
  width: 100%;
}
.mmm vaadin-dialog .m-text-area-wrapper vaadin-text-area::part(input-field) {
  min-height: 120px;
  align-items: flex-start;
}

/* Boutons côte à côte dans un HorizontalLayout d'une fenêtre : ils se partagent la largeur, comme au pied
   de l'assistant (ils ont width: 100% et le HorizontalLayout ne les réduit pas). */
.mmm vaadin-dialog vaadin-horizontal-layout > vaadin-button.m-positive-btn,
.mmm vaadin-dialog vaadin-horizontal-layout > vaadin-button.m-negative-btn {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

/* Barre mobile : les icônes gardent leur taille (le flex les réduisait à zéro) */
.mmm .m-mobile-header-bar-top > .m-icon,
.mmm .m-mobile-header-bar-top > .m-icon-menu,
.mmm .m-mobile-header-bar-top > .m-bell-icon-cont {
  flex-shrink: 0;
}
.mmm .m-mobile-header-bar .m-icon-msg {
  min-width: 24px;
}

/* Critères / Trier par : l'icône (::before) et le libellé côte à côte dans la largeur du bouton (le conteneur
   du libellé, width: 100 %, débordait de la largeur de l'icône) */
.mmm .m-fantasies-filter-button,
.mmm .m-fantasies-sorting-button {
  display: inline-flex;
  align-items: center;
}

/* Icône de localisation du champ « Lieu » : alignée sur le bas du champ (l'espace du libellé, même vide,
   la plaçait au-dessus), devant la zone de saisie qui la masquait */
.mmm .postal-code-field .m-fantasy-location-place::before,
.mmm vaadin-dialog.m-fantasy-edit-window .m-wizard-step-edit-fantasy-step-4 .m-fantasy-location-place::before {
  top: auto;
  bottom: 15px;
  z-index: 1;
}

/* Carte des conseils : le libellé est un span (un div en Vaadin 8) ; la règle « span » touchait aussi le span
   « vos fantasmes » qu'il contient (deuxième flèche, trait au-dessus). */
.mmm .m-menu-container .m-tips-button span span {
  border-top: none;
  padding: 0;
  position: static;
}
.mmm .m-menu-container .m-tips-button span span::after {
  content: none;
}

/* ========================================================================
   Parité avec le rendu Vaadin 8, mesurée contre la version Vaadin 8 (commit 9093754a) lancée en local
   ======================================================================== */

/* Le thème Vaadin 8 mettait $v-layout-margin-* et $v-layout-spacing-* à 0 : aucune marge ni espacement
   de mise en page. Les règles .mmm .m-…, plus spécifiques, l'emportent. */
.mmm vaadin-vertical-layout,
.mmm vaadin-horizontal-layout {
  padding: 0;
  gap: 0;
}

/* Valo remettait text-align: left sur chaque composant (.v-widget) : un conteneur centré ne centrait que
   son propre texte, pas les composants qu'il contient. Même spécificité que .v-widget (une classe). */
.mmm :where(vaadin-vertical-layout > *, vaadin-horizontal-layout > *, vaadin-flex-layout > *, [class^="m-"], [class*=" m-"]) {
  text-align: left;
}

/* Bouton Vaadin 8 : la pastille (.v-button-wrap) avait 5px de marge haute et basse dans la racine du bouton */
.mmm vaadin-button.m-positive-btn,
.mmm vaadin-button.m-negative-btn {
  margin-top: 5px;
  margin-bottom: 5px;
}

/* Règles de l'enveloppe (.v-slot-m-…) fusionnées avec celles du composant à la conversion : quand les deux
   fixaient la même propriété, Vaadin 8 les cumulait (enveloppe autour, composant dedans). */
.mmm .m-main-screen-desktop .m-fantasies-filter-wrapper {
  padding-top: 59px;
  padding-bottom: 15px;
}
.mmm .m-menu-container .m-tips-button {
  margin: 15px auto 50px;
}
.mmm .m-links-container {
  align-self: stretch;
}

/* Libellé Vaadin 8 (div) : bloc, ses marges verticales comptent */
.mmm .m-fantasy-promo-header-label {
  display: block;
}

/* Image de la carte des conseils : sous une légende vide en Vaadin 8 (new Image("", …)), 30px */
.mmm .m-menu-container .m-tips-button img {
  margin-top: 30px;
}

/* Fiches de la mosaïque : 8px tout autour, dans leur colonne de 300px */
.mmm .masonry-layout .masonry-item {
  margin: 8px;
}
/* Boutons des fiches : le padding visait la racine Vaadin 8, autour de la pastille */
.mmm .m-fantasies-container .masonry-layout .masonry-item .m-positive-btn {
  padding: 9px 10px;
  margin: 15px auto 20px;
}
.mmm .m-fantasies-container .masonry-layout .masonry-item .m-negative-btn {
  padding: 7px 15px;
  margin: 15px auto 20px;
}
.mmm .m-fantasies-container .masonry-layout .masonry-item .m-positive-btn.m-candidate-fantasy-popup {
  padding: 9px 10px;
  margin: 5px auto;
}
.mmm .m-fantasies-container .masonry-layout .masonry-item .m-negative-btn.m-candidate-fantasy-popup {
  padding: 7px 15px;
  margin: 5px auto;
}
/* Rangée vide de la fiche : une ligne de haut en Vaadin 8 (emplacements en inline-block) */
.mmm .m-author-info {
  min-height: 22px;
}

/* Champs : pas de marge verticale autour (Lumo en met une, surtout avec un libellé). En Vaadin 8, la
   légende était posée au-dessus du champ, dans l'enveloppe. */
.mmm :where(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-number-field,
    vaadin-big-decimal-field, vaadin-text-area, vaadin-combo-box, vaadin-multi-select-combo-box, vaadin-select,
    vaadin-date-picker, vaadin-time-picker, vaadin-date-time-picker, vaadin-checkbox-group, vaadin-radio-group,
    vaadin-custom-field) {
  padding-top: 0;
  padding-bottom: 0;
}

/* Textes d'une VerticalLayout : toute la largeur, comme l'enveloppe d'un libellé Vaadin 8 ; leur
   text-align (souvent celui de l'ancienne enveloppe) s'applique alors. Sauf alignement voulu en Java. */
.mmm :where(vaadin-vertical-layout:not([style*="align-items"]) > :is(div, span, p, h1, h2, h3, h4, h5, h6):not([style*="align-self"])) {
  align-self: stretch;
}

/* Mon profil */
.mmm .m-main-screen-desktop .m-myprofile-description-tab,
.mmm .m-main-screen-desktop .m-myprofile-secrets-tab,
.mmm .m-main-screen-desktop .m-myprofile-appreciations-tab {
  padding-top: 0;
}
/* La marge négative visait une enveloppe (.v-slot-m-profile-pictures-container) absente ici en Vaadin 8 */
.mmm .m-myprofile .m-profile-pictures-container {
  margin: 0;
}
/* Encadré d'aide : une ligne vide sous le texte en Vaadin 8 (mise en page vide en inline-block) */
.mmm .m-myprofile .m-tip-container:not(.m-my-account-stats-cont) {
  padding-bottom: 37px;
}
.mmm .m-myprofile .m-myprofile-description-form-left-container,
.mmm .m-myprofile .m-myprofile-description-form-right-container {
  width: 200px;
}
/* Marges verticales fusionnées entre enveloppes Vaadin 8 (blocs), jamais entre éléments flex */
.mmm vaadin-vertical-layout > .m-dropdown ~ .m-dropdown {
  margin-top: 0;
}
/* Zone de texte dans son cadre .m-big-textfield : en Vaadin 8, « .m-big-textfield .v-textarea » ôtait au
   textarea intérieur la bordure du cadre (son padding de 7px reste, sauf dans le profil) ; display: flex rend au champ Lumo sa mise en page
   (en block, son ::before de ligne de base occupait 36px). Texte en haut ; le nombre de lignes vient du
   Java (setMinRows, 5 par défaut comme en Vaadin 8). */
.mmm .m-big-textfield vaadin-text-area {
  display: flex;
  border: none;
  padding: 0;
  margin: 0;
  font-size: inherit;
  border-radius: 0;
}
.mmm .m-big-textfield vaadin-text-area::part(input-field) {
  align-items: flex-start;
}
.mmm .m-big-textfield vaadin-text-area > textarea {
  padding: 0;
}
/* Onglets de Mon profil : soulignement droit (pas l'arrondi des boutons) */
.mmm .m-myprofile-tabs-button {
  border-radius: 0;
}

/* Hors fenêtre, deux boutons côte à côte gardent leur largeur (enveloppes Vaadin 8 en inline-block) */
.mmm vaadin-horizontal-layout > vaadin-button.m-positive-btn,
.mmm vaadin-horizontal-layout > vaadin-button.m-negative-btn {
  flex: 0 0 auto;
  width: auto;
}

/* Mosaïque : fiches en inline-block, leurs marges ne fusionnent pas (l'add-on les plaçait en absolu) */
.mmm .masonry-layout {
  text-align: left;
}
.mmm .masonry-layout .masonry-item {
  display: inline-block;
  vertical-align: top;
}
/* Mosaïque sur ordinateur : grille centrée d'autant de colonnes de 300px (fiche de 284px et 8px de chaque côté)
   que la largeur en permet, sans limite ; les fiches se suivent par ligne, comme l'add-on Vaadin 8 les plaçait */
.mmm .m-fantasy-centered-container {
  text-align: center;
}
.mmm .m-main-screen-desktop .masonry-layout {
  display: grid;
  grid-template-columns: repeat(auto-fill, 300px);
  justify-content: center;
  align-items: start;
  column-width: auto;
}
.mmm .m-main-screen-desktop .m-fantasy-centered-container > .masonry-layout {
  width: 100%;
}
.mmm .m-main-screen-desktop .masonry-layout .masonry-item.masonry-double-wide {
  grid-column: span 2;
}
/* Fiche : bouton « plus » flottant à droite, sans largeur ni hauteur prise en Vaadin 8 */
.mmm .m-fantasy-category-distance-report-container {
  position: relative;
}
.mmm .m-fantasy-category-distance-report-container > .mmm-popup-button {
  position: absolute;
  top: 0;
  right: 0;
}
/* Lieu de la fiche : ligne de 29px en Vaadin 8 (libellé en inline-block) */
.mmm .m-fantasy-layout .m-fantasy-location {
  min-height: 29px;
}
/* Boutons Éditer / Supprimer : serrés à gauche (enveloppe : margin-right 10px), interligne 1 */
.mmm .m-myprofile-fantasy-tab .m-fantasy-layout .m-ad-action vaadin-button {
  margin: 5px 10px 5px 0;
}
.mmm .m-myprofile-fantasy-tab .m-fantasy-layout .m-ad-action vaadin-button::part(label) {
  line-height: 1;
}
/* Avis : « Avis sur vous » et les compteurs sur une ligne, compteurs à droite (la règle display: block de
   l'ancienne enveloppe empilait la HorizontalLayout) ; enveloppe Vaadin 8 plus haute de 15px */
.mmm .m-myprofile .m-main-content .m-myprofile-appreciations-tab .m-myprofile-apprec-score-layout {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
}
.mmm .m-myprofile-appreciations-tab .m-main-content .m-myprofile-apprec-score-layout .m-myprofile-apprec-score-value-layout {
  width: auto;
}

/* Légende des champs, comme .v-caption de Vaadin 8 (16px, normal, interligne 1.55, 0.3em dessous) ; les
   règles de page (taille, couleur, majuscules) l'emportent. */
.mmm :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-number-field,
    vaadin-text-area, vaadin-combo-box, vaadin-multi-select-combo-box, vaadin-date-picker, vaadin-select,
    vaadin-checkbox-group, vaadin-radio-group)[has-label]::part(label) {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  padding: 0 0 0.3em 2px;
  margin: 0;
}
/* Paramètres du compte : 20px sous chaque champ (marge de l'enveloppe Vaadin 8 ; la règle margin: 0 de
   l'input intérieur visait ici le champ lui-même) */
.mmm .m-my-account-page :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-date-picker,
    vaadin-select, vaadin-combo-box):is(.m-secured-field, .m-single-textfield) {
  margin-bottom: 20px;
}
/* Champs verrouillés : cadenas dans la zone de saisie (le ::before de l'hôte Lumo se plaçait sous le
   champ) ; pseudo et « je suis » lisibles comme en Vaadin 8, seule la date reste grisée. */
.mmm .m-my-account-page :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-date-picker,
    vaadin-select, vaadin-combo-box).m-secured-field::before {
  content: none;
}
.mmm .m-my-account-page :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-date-picker,
    vaadin-select, vaadin-combo-box).m-secured-field::part(input-field) {
  background-image: url("img/icons/lock.svg");
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position: 15px center;
}
.mmm .m-my-account-page vaadin-select.m-secured-field::part(input-field) {
  padding-left: 40px;
}
.mmm .m-my-account-page :is(vaadin-text-field, vaadin-select).m-secured-field[disabled]::part(label) {
  -webkit-text-fill-color: #7C7191;
}
.mmm .m-my-account-page vaadin-text-field.m-secured-field[disabled] > input,
.mmm .m-my-account-page vaadin-select.m-secured-field[disabled] vaadin-select-value-button {
  -webkit-text-fill-color: #4b4b4b;
  color: #4b4b4b;
}

/* Assistant de publication : étapes dans des cases de 78px (les traits de liaison apparaissent entre elles),
   choix centrés et sans marge, comme dans l'enveloppe Vaadin 8 */
.mmm vaadin-dialog.m-fantasy-edit-window .step-icon {
  margin: 0 19px;
  flex: none;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-fantasy-edit-target-gender {
  align-self: center;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-fantasy-edit-target-gender vaadin-radio-button {
  margin: 0;
}
/* Traits de liaison des étapes : au-dessus du fond de la mise en page (le z-index -1 de Vaadin 8 les
   cachait ici), pas avant la première étape */
.mmm vaadin-dialog.m-fantasy-edit-window .wizard-progress-bar .step-icon::after {
  z-index: 1;
}
.mmm vaadin-dialog.m-fantasy-edit-window .wizard-progress-bar .step-icon.first::after {
  display: none;
}
/* Fenêtres : trait sous l'en-tête (Valo) ; une seule croix de fermeture (celle du thème, pas l'icône Lumo).
   Le contenu commence 55px sous le haut de la fenêtre, comme en Vaadin 8 (en-tête de 56px dont le trait
   recouvrait la première ligne du contenu) : 20 + 16 + 18 + 1px de trait. */
.mmm vaadin-dialog.m-window-wrapper::part(header) {
  border-bottom: 1px solid rgba(98, 98, 98, 0.5);
  padding-bottom: 18px;
}
.mmm vaadin-dialog.m-window-wrapper [slot="header-content"] vaadin-button vaadin-icon {
  display: none;
}
/* Titres de l'assistant (légendes) : en Vaadin 8, 0.857em du texte de la légende se rapportait à la légende
   (16px), pas au champ (déjà réduit) ; la légende gardait sa hauteur de 30px. */
.mmm vaadin-dialog.m-fantasy-edit-window .m-window-subtitle::part(label) {
  font-size: 13.714px;
  line-height: 24.8px;
  padding-bottom: 4.8px;
}
/* Zones de texte : interligne « normal » comme le textarea de Vaadin 8 (setMinRows suit cet interligne) ;
   les règles du thème qui en fixent un (.m-big-textfield : 1.3) l'emportent ; plus spécifique que
   « textarea { line-height: inherit } » */
.mmm vaadin-text-area > textarea {
  line-height: normal;
}
/* Pied de l'assistant : deux pastilles de 36px centrées, à la largeur de leur texte (min. 120px), comme en
   Vaadin 8 ; le min-height de la pastille, hérité par le conteneur Lumo, s'ajoutait au padding. */
.mmm vaadin-dialog.m-fantasy-edit-window .m-window-footer {
  justify-content: center;
  align-items: center;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-window-footer > vaadin-button {
  flex: 0 0 auto;
  width: auto;
  height: 36px;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.mmm vaadin-dialog.m-fantasy-edit-window .m-window-footer > vaadin-button::part(label) {
  line-height: 1;
}
/* Fenêtre de candidature : l'enveloppe Vaadin 8 (padding 20px, marge haute 10px) entourait le cadre violet
   arrondi ; texte en haut du cadre ; interrupteur décalé de 20px (son dessin part du bord de l'élément),
   l'enveloppe de 20px qu'il dépassait laissait 23px avant les boutons ; coût en minuscules. */
.mmm vaadin-dialog.m-application-window .m-text-area-wrapper {
  margin: 30px 20px 20px;
  padding: 0 0 30px;
  border-radius: 7px;
}
.mmm vaadin-dialog.m-application-window vaadin-text-area.m-big-textfield {
  display: flex;
  border-radius: 6px;
}
.mmm vaadin-dialog.m-application-window vaadin-text-area.m-big-textfield::part(input-field) {
  min-height: 0;
  align-items: flex-start;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}
.mmm vaadin-dialog.m-application-window vaadin-text-area.m-big-textfield > textarea {
  padding: 0;
}
.mmm vaadin-dialog.m-application-window .m-candidate-secret-share {
  padding: 0;
  margin: 20px 20px 23px;
}
.mmm vaadin-dialog.m-application-window .m-application-cost {
  text-transform: none;
}

/* ---- Mobile (mesuré en 375x812 contre Vaadin 8) ---- */
/* Barre du haut : logo à sa largeur naturelle après le menu ; cloche puis messages à droite (flottants à
   droite en Vaadin 8, d'où l'ordre inversé), 15px entre eux et du bord */
.mmm .m-mobile-header-bar .m-icon-logo {
  width: auto;
  padding: 0;
  margin: 0 0 0 15px;
  flex: none;
}
.mmm .m-mobile-header-bar-top > .m-bell-icon-cont {
  order: 1;
  margin-left: auto;
  margin-right: 15px;
}
.mmm .m-mobile-header-bar-top > .m-icon-msg {
  order: 2;
  margin-left: 0;
  margin-right: 15px;
}
/* Barre de filtres : boutons alignés en haut (pas étirés) ; recherche flottante à droite, 34x32 */
.mmm .m-fantasies-filter-wrapper vaadin-horizontal-layout {
  align-items: flex-start;
}
.mmm .m-main-screen-mobile .m-fantasies-search-field-button {
  margin-left: auto;
  width: 34px;
  height: 32px;
  margin-top: 0;
  margin-bottom: 0;
}
/* Mosaïque pleine largeur ; fiche de 310px centrée dans son cadre */
.mmm .m-main-screen-mobile .m-fantasy-centered-container > .masonry-layout {
  width: 100%;
}
.mmm .m-main-screen-mobile .m-fantasies-container .masonry-layout .masonry-item .m-fantasy-layout {
  width: 310px;
  margin: 0 auto;
}
/* Bouton « plus » des fiches : visible (fond more.svg) ; Vaadin 8 ne masquait que sa pastille intérieure */
.mmm .m-fantasies-container .masonry-layout .masonry-item .m-fantasy-category-distance-report-container .mmm-popup-button {
  display: block;
}
.mmm .m-fantasies-container .masonry-layout .masonry-item .m-fantasy-category-distance-report-container .mmm-popup-button::part(label),
.mmm .m-fantasies-container .masonry-layout .masonry-item .m-fantasy-category-distance-report-container .mmm-popup-button::part(prefix),
.mmm .m-fantasies-container .masonry-layout .masonry-item .m-fantasy-category-distance-report-container .mmm-popup-button::part(suffix) {
  display: none;
}
/* Liens du bas du menu : libellés en inline-block (Vaadin 8), leur marge basse de 10px compte */
.mmm .m-links-container .m-link-label {
  display: inline-block;
}
/* Onglets de Mon profil : bouton de toute la hauteur de l'enveloppe Vaadin 8 (58px : padding 5px et trait de 2px
   en bas, qui souligne l'onglet sous la barre), icône de 24px au-dessus du libellé, empilés depuis le haut */
.mmm .m-myprofile .m-myprofile-tabs-buttons .m-myprofile-tabs-button {
  height: 58px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.mmm .m-myprofile .m-myprofile-tabs-buttons .m-myprofile-tabs-button::before {
  flex: none;
}
/* Texte des zones .m-big-textfield : couleur du cadre (#777), Lumo imposait la sienne */
.mmm .m-big-textfield vaadin-text-area > textarea {
  color: inherit;
  -webkit-text-fill-color: currentColor;
}

/* Confirmation de l'âge : titre centré (libellé en inline-block dans un conteneur centré), 0.8em entre les
   éléments (.v-spacing), trait de séparation visible (le ::after Lumo du bouton est flouté et transparent) */
.mmm vaadin-dialog .m-age-confirmation > .m-popup-title {
  display: inline-block;
}
.mmm vaadin-dialog.m-age-confirmation .m-age-confirmation > * + * {
  margin-top: 0.8em;
}
.mmm vaadin-dialog.m-popup-window.m-age-confirmation .m-age-confirmation .m-separator::after {
  opacity: 1;
  filter: none;
  background: none;
  border-radius: 0;
}
/* Liens en forme de bouton (.m-link) : soulignés comme en Vaadin 8 */
.mmm vaadin-button.m-link::part(label) {
  text-decoration: underline;
}

/* Fenêtre du code postal : texte d'introduction en bloc, à gauche ; pas de titre « Lieu » ni de flèche
   (libellé sans largeur masqué en Vaadin 8) ; « Me géolocaliser » à droite (enveloppe : text-align right) */
.mmm .location-popup .location-undefined {
  display: block;
  margin-top: 10px;
}
.mmm .postal-code-field .m-fantasy-location-title {
  display: none;
}
.mmm vaadin-combo-box.m-fantasy-location-place::part(toggle-button) {
  display: none;
}
.mmm .location-popup .postal-code-field .m-fantasy-location-place {
  margin-top: 10px;
}
.mmm .m-fantasy-display-map {
  align-self: flex-end;
  width: auto;
  margin-top: 15px;
  margin-bottom: 15px;
}
/* Champ sans légende : pas de zone de légende (des règles converties la forçaient en bloc) */
.mmm :is(vaadin-text-field, vaadin-password-field, vaadin-email-field, vaadin-integer-field, vaadin-number-field,
    vaadin-text-area, vaadin-combo-box, vaadin-multi-select-combo-box, vaadin-date-picker, vaadin-select,
    vaadin-checkbox-group, vaadin-radio-group):not([has-label])::part(label) {
  display: none;
}
/* Recherche par mot clé : 190px (largeur par défaut du champ Vaadin 8, son 100 % étant sans effet dans une
   rangée sans largeur) */
.mmm .m-main-screen-desktop .m-fantasies-filter-wrapper .m-fantasies-search-field {
  width: 190px;
  flex: none;
}

/* Curseur à deux poignées (add-on rangeslider / noUiSlider en Vaadin 8) : deux curseurs natifs superposés
   sur une piste commune de 8px, partie choisie en violet (--m-range-lo / --m-range-hi posés en Java),
   poignées curseur.svg de 31px */
/* Curseur : barre de 8px à 45px sous le haut de la ligne de titre (25px + 20px de marge), dans un emplacement de
   22px comme en Vaadin 8 (poignées de 31px débordantes) : -12.5px au-dessus, 2.5px dessous */
.mmm .m-range-slider {
  position: relative;
  height: 31px;
  margin: -12.5px 0 2.5px;
  --m-range-lo: 0;
  --m-range-hi: 1;
}
.mmm .m-range-slider::before {
  content: "";
  position: absolute;
  left: 15.5px;
  right: 15.5px;
  top: 11.5px;
  height: 8px;
  box-sizing: border-box;
  border: 1px solid #D3D3D3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB;
  background: linear-gradient(to right,
      #FAFAFA calc(var(--m-range-lo) * 100%), #513766 calc(var(--m-range-lo) * 100%),
      #513766 calc(var(--m-range-hi) * 100%), #FAFAFA calc(var(--m-range-hi) * 100%));
}
.mmm .m-range-slider input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 31px;
  margin: 0;
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.mmm .m-range-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 31px;
  background: transparent;
}
.mmm .m-range-slider input[type="range"]::-moz-range-track {
  height: 31px;
  background: transparent;
}
.mmm .m-range-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 31px;
  height: 31px;
  border: 0;
  background: url("img/icons/curseur.svg") no-repeat center / contain;
  cursor: pointer;
  pointer-events: auto;
}
.mmm .m-range-slider input[type="range"]::-moz-range-thumb {
  width: 31px;
  height: 31px;
  border: 0;
  background: url("img/icons/curseur.svg") no-repeat center / contain;
  cursor: pointer;
  pointer-events: auto;
}
/* Titre des fenêtres : sans la marge de début Lumo (aligné sur le padding de 20px de l'en-tête) */
.mmm vaadin-dialog.m-window-wrapper::part(title) {
  margin-inline-start: 0;
}
/* Titre du champ de lieu : 22px de haut (la ligne de l'enveloppe Vaadin 8), texte en haut */
.mmm .m-fantasy-location-title,
.mmm .m-myfilter-cat-container .m-fantasy-location-title {
  min-height: 22px;
}
/* Fenêtre des boutons à options : collée au bouton (pas d'écart Lumo) ; tri : 200px de large */
.mmm vaadin-popover.ex-popup-button {
  --vaadin-popover-offset-top: 0px;
  --vaadin-popover-offset-bottom: 0px;
}
.mmm vaadin-popover.m-fantasies-sorting-button-popup::part(overlay) {
  min-width: 200px;
}
/* Ligne du lieu : largeur du contenu (HorizontalLayout sans largeur en Vaadin 8), la distance reste à côté du repère */
.mmm .m-fantasy-layout .m-fantasy-location {
  width: fit-content;
}
/* Carrousel des images : aspect de la galerie blueimp de Vaadin 8 (voile, image ajustée à l'écran, commandes blanches) */
.mmm vaadin-dialog.m-images-carousel {
  padding: 0;
  inset: 0;
}
.mmm vaadin-dialog.m-images-carousel::part(backdrop) {
  background-color: rgba(71, 63, 87, .72);
}
.mmm vaadin-dialog.m-images-carousel::part(overlay) {
  background: none;
  box-shadow: none;
  border-radius: 0;
  max-width: none;
  max-height: none;
}
.mmm vaadin-dialog.m-images-carousel::part(header) {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  padding: 0;
  background: none;
}
.mmm vaadin-dialog.m-images-carousel::part(header-content) {
  justify-content: space-between;
  align-items: flex-start;
}
.mmm vaadin-dialog.m-images-carousel::part(content) {
  padding: 0;
}
.mmm .m-carousel-position,
.mmm .m-carousel-close,
.mmm .m-carousel-prev,
.mmm .m-carousel-next {
  color: #fff;
  text-shadow: 0 0 2px #000;
  cursor: pointer;
  user-select: none;
}
.mmm .m-carousel-position {
  margin: 15px;
  font-size: 20px;
  line-height: 30px;
  opacity: .8;
  cursor: default;
}
.mmm .m-carousel-close {
  padding: 15px;
  font-size: 30px;
  line-height: 30px;
  opacity: .8;
}
.mmm .m-carousel-content {
  position: relative;
  height: 100%;
}
.mmm .m-carousel-image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.mmm .m-carousel-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.mmm .m-carousel-prev,
.mmm .m-carousel-next {
  position: absolute;
  top: 50%;
  left: 15px;
  width: 40px;
  height: 40px;
  margin-top: -23px;
  font: 60px/30px "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: center;
  background: rgba(0, 0, 0, .5);
  box-sizing: content-box;
  border: 3px solid #fff;
  border-radius: 23px;
  opacity: .5;
}
.mmm .m-carousel-next {
  left: auto;
  right: 15px;
}
.mmm .m-carousel-prev:hover,
.mmm .m-carousel-next:hover,
.mmm .m-carousel-close:hover {
  opacity: 1;
}
/* Fenêtre d'une annonce : fiche de 310px centrée (mosaïque d'une seule fiche, comme en Vaadin 8) */
.mmm vaadin-dialog.m-fantasy-details-window .masonry-layout {
  column-width: auto;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.mmm vaadin-dialog.m-fantasy-details-window .masonry-layout .masonry-item {
  width: 310px;
}
/* Valeurs en lecture du profil : légende d'un champ Vaadin 8 (bloc de 16px, interligne 1.55, padding 0 0 .3em 2px,
   texte de 0.857em en majuscules) */
.mmm .m-profile-property-value > .m-fieldgroup-title {
  font-size: 13.7143px;
  line-height: 24.8px;
  padding: 0 0 4.8px 2px;
}
/* Appréciations du profil : compteurs centrés (inline-blocks centrés en Vaadin 8) */
.mmm .m-myprofile-apprec-score-cont {
  justify-content: center;
}
/* Titre « Mes photos » des onglets du profil : emplacement Vaadin 8 d'une ligne (21.7px) autour du titre de 19px */
.mmm .m-myprofile .m-myfilter-cat-container > .m-fieldgroup-title {
  min-height: 21.7px;
}
/* En-tête du profil : repère du bouton « ⋮ » placé en absolu (les layouts Vaadin 8 étaient en position relative) */
.mmm .m-myprofile .m-myprofile-header-container {
  position: relative;
}
/* Typographie de base de Valo pour les contenus HTML (CGU, FAQ, conseils, libellés HTML) : Lumo imposait la sienne
   (titres à 600 sans marges, paragraphes sans marges, gras à 600) */
.mmm :where(h1, h2, h3, h4) {
  line-height: 1.1;
  font-weight: 200;
}
.mmm :where(h1) {
  font-size: 2.4em;
  margin: 1.4em 0 1em;
  letter-spacing: -0.03em;
}
.mmm :where(h2) {
  font-size: 1.6em;
  margin: 1.6em 0 0.77em;
  letter-spacing: -0.02em;
}
.mmm :where(h3) {
  font-size: 1.2em;
  margin: 1.8em 0 0.77em;
}
.mmm :where(h4) {
  font-size: 16px;
  font-weight: 500;
  margin: 2.4em 0 0.8em;
}
.mmm :where(p) {
  margin: 1em 0;
}
.mmm :where(b, strong) {
  font-weight: 700;
}
.mmm :where(small) {
  font-size: 0.8em;
  line-height: 1.55;
}
/* Texte HTML en tête des pages simples (CGU, FAQ...) : en inline-block comme dans un CssLayout Vaadin 8 (vide, il
   occupe une ligne ; ses marges restent dedans) */
.mmm .m-page-main-container > .m-html-label {
  display: inline-block;
  vertical-align: top;
  width: 100%;
}
/* Invite des zones de texte : gris clair de Valo (.v-textarea-prompt), pas la couleur du texte */
.mmm vaadin-text-area > textarea::placeholder {
  color: #A6A6A6;
  -webkit-text-fill-color: currentColor;
  opacity: 1;
}
/* Destinataires du fantasme : marge de 5px au-dessus du premier choix (.v-radiobutton { margin: 5px 0 } de Vaadin 8,
   fusionnée ailleurs avec la marge de 12px des libellés) */
.mmm vaadin-dialog.m-fantasy-edit-window .m-fantasy-edit-target-gender :is(vaadin-checkbox, vaadin-radio-button):first-of-type {
  margin-top: 5px;
}
/* Fenêtres centrées verticalement comme en Vaadin 8 (Lumo les remonte : espaceurs ::before / ::after de 1 et 1.1) */
.mmm vaadin-dialog::after {
  flex-grow: 1;
}
/* Barre mobile : le nombre de fantasmes reste dans la ligne (« .v-label { display: block } » visait le libellé,
   pas son span intérieur) ; le compteur commence après l'emplacement du logo (5 colonnes sur 12 : 41.67%) */
.mmm .m-mobile-header-bar .m-fantasies-counter-container .m-fantasies-count-label {
  display: inline;
}
.mmm .m-mobile-header-bar .m-icon-logo {
  margin-right: max(10px, calc(41.6667% - 145px));
}
.mmm .m-mobile-header-bar .m-fantasies-counter-container {
  white-space: nowrap;
  align-self: flex-start;
}
/* Boutons de connexion / inscription de la barre mobile : 5px de la pastille + 10px de l'emplacement Vaadin 8 */
.mmm .m-mobile-header-bar .m-login-btn {
  margin-bottom: 15px;
}
/* Connexion / inscription mobiles : la marge de 8px visait la racine du bouton Vaadin 8, la pastille avait 5px de plus */
.mmm .m-mobile-login .m-positive-btn,
.mmm .m-mobile-signup .m-positive-btn {
  margin-top: 13px;
  margin-bottom: 13px;
}
/* Paramètres du compte : seul le champ est estompé, pas sa légende (hors du composant en Vaadin 8) */
.mmm .m-my-account-page :is(vaadin-text-field, vaadin-select, vaadin-combo-box, vaadin-date-picker).m-secured-field {
  opacity: 1;
}
.mmm .m-my-account-page :is(vaadin-text-field, vaadin-select, vaadin-combo-box, vaadin-date-picker).m-secured-field::part(input-field) {
  opacity: 0.5;
}
/* Champs en lecture seule : pas de bordure en pointillés Lumo (cadre plein du thème, comme en Vaadin 8) */
.mmm :is(vaadin-text-field, vaadin-email-field, vaadin-password-field, vaadin-integer-field, vaadin-number-field,
    vaadin-text-area, vaadin-combo-box, vaadin-date-picker, vaadin-select)[readonly]::part(input-field)::after {
  border: none;
}
/* Paramètres du compte : la marge de 20px (emplacement Vaadin 8) n'est que sous le bloc, pas sous le champ de date
   qu'il contient ; liste « Je suis » de 44px comme la liste Vaadin 8 */
.mmm .m-my-account-page .m-secured-field .m-secured-field {
  margin-bottom: 0;
}
.mmm .m-my-account-page vaadin-select.m-select-list::part(input-field) {
  min-height: 44px;
}
/* Email de connexion : le padding de 5px était dans le champ Vaadin 8 (hauteur inchangée), pas autour */
.mmm .m-my-account-page vaadin-text-field.m-single-textfield {
  padding-top: 0;
  padding-bottom: 0;
}
/* Fenêtres sur mobile : tout l'écran, sans marge ni coins arrondis (fenêtre Vaadin 8 plein écran) */
.mmm vaadin-dialog.m-window-wrapper.m-mobile {
  inset: 0;
  padding: 0;
}
.mmm vaadin-dialog.m-window-wrapper.m-mobile::part(overlay) {
  border-radius: 0;
  max-width: none;
  max-height: none;
}
/* Titres des blocs de catégories : emplacement Vaadin 8 d'une ligne (21.7px) autour du titre */
.mmm .m-myfilter-cat-container > .m-myfilter-cat-title {
  min-height: 21.7px;
}

/* ========================================================================
   Dialogue de paiement (MmmPaymentDialog) et formulaire de carte Shift4 (<vtc-shift4-form>
   d'asao-cashmgt, en DOM léger). Reprise de _payment-window-style.scss (.vtc-payment-window,
   champs Valo et bootstrap) sur la structure Flow, mise en page d'après payment-page.scss d'asaovtc.
   ======================================================================== */
@keyframes m-payment-spin {
  to { transform: rotate(360deg); }
}
.mmm .m-payment-dialog::part(overlay) {
  width: 90vw;
  max-width: 600px;
}
/* Les fenêtres n'ont pas de marge intérieure (Valo) : celle-ci en a, le formulaire ne colle pas aux bords */
.mmm .m-payment-dialog::part(header) {
  padding: 20px 30px 0;
}
.mmm .m-payment-dialog::part(title) {
  color: #513766;
  font-size: 1.25em;
  font-weight: bold;
}
.mmm .m-payment-dialog::part(content) {
  padding: 10px 30px 30px;
}
.mmm.mobile .m-payment-dialog::part(header) {
  padding: 16px 16px 0;
}
.mmm.mobile .m-payment-dialog::part(content) {
  padding: 8px 16px 20px;
}
.mmm .m-payment-dialog__main,
.mmm .m-payment-dialog__error {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 15px 0;
}
.mmm .m-payment-dialog .asao-pay-new,
.mmm .m-payment-dialog .asao-pay-alias {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  border: none;
  border-radius: 20px;
  font: inherit;
  font-size: 18px;
  cursor: pointer;
}
.mmm .m-payment-dialog .asao-pay-icon { display: none; }
.mmm .m-payment-dialog .asao-pay-arrow {
  margin-left: auto;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: url("img/icons/arrow-right.svg") center / contain no-repeat;
  mask: url("img/icons/arrow-right.svg") center / contain no-repeat;
}
.mmm vtc-shift4-form {
  display: block;
  width: 100%;
}
.mmm #shift4-payment-form {
  position: relative;
  margin: 0;
}
.mmm #shift4-payment-form .shift4-card-js {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mmm #shift4-payment-form .form-group.row {
  display: flex;
  flex-direction: row;
  gap: 25px;
  width: 100%;
  margin: 0;
}
.mmm #shift4-payment-form .form-group.row > *,
.mmm #shift4-payment-form .form-col > * {
  flex: 1;
}
.mmm #shift4-payment-form .form-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mmm #shift4-payment-form label {
  color: #513766;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}
/* Champs Valo : le titulaire est un input, numéro / expiration / CVC des iframes Shift4 dans un div */
.mmm #shift4-payment-form .v-textfield {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 41px;
  margin: 0;
  padding: 10px 9px;
  background: #ffffff;
  border: 1px solid #C8C0D8;
  border-radius: 6px;
  box-shadow: inset 0 1px 0 #f8f8f8, 0 1px 0 rgba(255, 255, 255, 0.1);
  color: #4d4d4d;
  font: inherit;
  font-size: 16px;
}
.mmm #shift4-payment-form input.v-textfield:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(139, 63, 232, 0.2);
}
.mmm #shift4-payment-form .has-error {
  background-color: hsla(313, 77%, 83%, 0.2);
}
.mmm #shift4-payment-form .rememberme-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 4px;
}
.mmm #shift4-payment-form .rememberme-wrapper label {
  font-size: 14px;
  font-weight: 500;
}
.mmm #shift4-payment-form .button-wrapper {
  display: block;
  margin: 12px 0 0;
  padding: 0;
  border: none;
  border-radius: 20px;
  background: linear-gradient(135deg, #ee94e2 0%, #8b3fe8 100%);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
}
.mmm #shift4-payment-form .button-wrapper.disabled {
  opacity: 0.3;
}
.mmm button#shift4-customform-pay {
  width: 100%;
  padding: 9px 10px;
  background-color: transparent;
  border: none;
  color: #fff;
  font: inherit;
  font-size: 1em;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
}
.mmm vtc-shift4-form #payment-error.hidden,
.mmm vtc-shift4-form #payment-error:empty {
  display: none;
}
.mmm vtc-shift4-form .vtc-component-error-message {
  color: #fff;
  background-color: red;
  padding: 2px;
  margin: 2px;
  font-size: 16px;
}
/* Attente (jeton, 3DS, débit) : formulaire voilé puis loader seul, à la place de l'ancien v-app-loading */
.mmm #shift4-payment-form.v-app-loading {
  pointer-events: none;
}
.mmm #shift4-payment-form.v-app-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.6);
  z-index: 1;
}
.mmm #shift4-payment-form.v-app-loading::after,
.mmm vtc-shift4-form #payment-loader::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 4px solid rgba(139, 63, 232, 0.25);
  border-top-color: #8b3fe8;
  border-radius: 50%;
  animation: m-payment-spin 0.8s linear infinite;
  z-index: 2;
}
.mmm vtc-shift4-form #payment-loader {
  position: relative;
  min-height: 120px;
}