lovelace.yaml

###############################################################################################
#                                                                                             #
#  This file is a full copy from the HA UI editor.    					      #	
#											      #
#  I don’t use the YAML mode because it’s more convenient for me to maintain with in the UI.  #
#											      #
###############################################################################################


decluttering_templates:
  header_live_weather_background:
    card:
      type: custom:vertical-stack-in-card
      cards:
        - type: picture-glance
          entities: []
          camera_image: camera.camera_sonnette_mjpeg
          camera_view: auto
          image: []
          style: |
            ha-card {
              position: absolute;
              filter: blur(2px);
              border-radius: 0 !important;
              background: none;
              
              /* Edit the following lines to adjust your camera or your image */
              
              width: 1500px;
              top: 0px;
              right: 0px;
              
              /* If you don't want to use a camera you can replace [] with an image */
            }
      style: |
        ha-card {
          position: relative !important;
          margin-bottom: -164px;
          height: 164px;
          margin-top: -8px;
          margin-left: -8px;
          margin-right: -8px;
          background: none;
          animation: opacity 2s ease-in;
          border-radius: 0 var(--ha-card-border-radius) 0 0;
        }
        ha-card:after {
          content: '';
          display: block;
          position: absolute;
          top: 0;
          left: -180px;
          height: 170px;
          width: 1700px;
          background: radial-gradient(ellipse at 50% -100%, rgba(35, 46, 66, 0) 25%, rgba(35, 46, 66, 0.8) 55%, rgba(35, 46, 66, 1) 67%);
        }
        @media only screen and (max-width: 768px) {
          ha-card {
            border-radius: 0 !important;
          }
        }
        @keyframes opacity {
          0% { opacity: 0; }
          40% { opacity: 0; }
          100% { opacity: 1; }
        }
  header_temperature_graph:
    card:
      type: custom:mini-graph-card
      entities:
        - entity: sensor.temperature_interieure
          color: null
      hours_to_show: 24
      hour24: true
      animate: true
      update_interval: 30
      aggregate_func: avg
      line_width: 1
      bar_spacing: 10
      height: 40
      group: true
      show:
        labels: false
        fill: false
        state: false
        name: false
        icon: false
      style: |
        ha-card {
          height: 84px;
          position: absolute;
          box-shadow: none;
          background: none;
          border-radius: 0;
          opacity: 0.3;
          margin-bottom: -90px;
          margin-left: -0.6em;
          margin-right: -0.6em;
        }
  header_main:
    card:
      type: custom:paper-buttons-row
      styles:
        justify-content: space-between
        background: none
        margin: 24px 20px 16px
        text-shadow: 0px 0px 20px var(--card-background-color);
      buttons:
        - layout: name_state
          name: '{{ states(''sensor.jour_fr'') }}, {{ states(''sensor.date_fr'') }}'
          state: '{{ now().strftime(''%H'') }}:{{ now().strftime(''%M'')}}'
          styles:
            name:
              font-weight: 400
              font-size: 16px
              margin-left: 0
              display: block
              text-align: left
              float: left
              width: 140px
            button:
              pointer-events: none
              align-items: left
              width: 140px
              line-height: 1.6em
            state:
              font-weight: 700
              font-size: 30px
              letter-spacing: '-1px'
              margin-left: 0
              display: block
              text-align: left
              float: left
              width: 140px
        - layout: icon|name_state
          name: ⌂ {{ states('sensor.temperature_interieure') }}°C
          state: '{{ state_attr(''weather.openweathermap'',''temperature'') }}°C'
          image: |
            {% set mapper =
              { 'breezy':'cloudy',
                'clear-night':'night',
                'clear':'day',
                'mostly-clear':'day',
                'clear-day':'day',
                'cloudy':'cloudy',
                'fog':'fog',
                'hail':'rainy-7',
                'haze':'haze',
                'lightning':'thunder',
                'mostly-cloudy':'cloudy',
                'partlycloudy':'cloudy-day-3',
                'partly-cloudy-day':'partly-cloudy-day',
                'partly-cloudy-night':'partly-cloudy-night',
                'rain':'rainy-4',
                'scattered-showers':'rainy-3',
                'showers':'rainy-6',
                'sleet':'sleet',
                'snow':'snowy-6',
                'mostly-sunny':'day',
                'sunny':'day',
                'thunderstorm':'thunder',
                'tornado':'tornado',
                'wind':'wind',
                'windy':'wind'} %}
            {% set state = states('weather.maison_2') %}
            {% set weather = mapper[state] if state in mapper else 'weather' %}
            {% set path = '/local/icons/weather_icons/animated/' %}
            {% set ext = '.svg'%}
              {{[path,weather,ext]|join('')}}
          styles:
            name:
              font-weight: 400
              font-size: 16px
              margin-left: 0
              display: block
              text-align: right
              width: 140px
            button:
              pointer-events: none
              align-items: right
              width: 140px
              line-height: 1.6em
            state:
              font-weight: 600
              font-size: 30px
              letter-spacing: '-1px'
              margin-left: 0
              display: block
              text-align: right
              width: 140px
            icon:
              position: absolute
              left: 2px
              transform: scale(0.17)
              transform-origin: 0 19.5%
              top: '-48px;'
              padding: 0;
              height: 380px !important;
              width: 380px !important;
  header_conditional_camera:
    card:
      type: conditional
      conditions:
        - entity: binary_sensor.sonnette_motion
          state: 'on'
      card:
        type: custom:vertical-stack-in-card
        cards:
          - type: custom:frigate-card
            cameras:
              - camera_entity: camera.sonnette_pir
                live_provider: frigate-jsmpeg
                title: Entrée
            menu:
              buttons:
                frigate:
                  enabled: false
              style: none
        style: |
          ha-card {
            margin: 15px 20px;
            overflow: hidden !important;
            border-radius: 24px !important;
          }
  footer_sticky_menu:
    card:
      type: entities
      entities:
        - type: custom:paper-buttons-row
          buttons:
            - entity: input_boolean.mode_silencieux
              layout: icon
              name: Silence
              style:
                button:
                  width: 42px
                  height: 42px
                icon:
                  background: var(--background-color)
                  padding: 10px 26px
                  border-radius: 26px
                  margin-top: 0
                name:
                  margin-top: 20px
            - layout: icon
              icon: mdi:window-shutter
              name: Volets
              tap_action:
                action: navigate
                navigation_path: /lovelace/volets
              style:
                button:
                  width: 42px
                  height: 42px
                icon:
                  margin-top: 0
                name:
                  margin-top: 20px
            - layout: icon
              icon: mdi:cart-outline
              name: Liste
              tap_action:
                action: navigate
                navigation_path: /lovelace/liste
              style:
                button:
                  width: 42px
                  height: 42px
                icon:
                  margin-top: 0
                name:
                  margin-top: 20px
            - icon: mdi:video
              layout: icon
              name: Sécurité
              tap_action:
                action: navigate
                navigation_path: /lovelace/securite
              style:
                button:
                  width: 42px
                  height: 42px
                icon:
                  margin-top: 0
                name:
                  margin-top: 20px
            - layout: icon
              icon: mdi:cog
              name: Réglages
              tap_action:
                action: navigate
                navigation_path: /lovelace/reglages
              style:
                button:
                  width: 42px
                  height: 42px
                icon:
                  margin-top: 0
                name:
                  margin-top: 20px
          style: |
            div.flex-box {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin: -14px !important;   
            }
      style: |
        ha-card { 
          margin-bottom: 10px !important;
          padding: 0 16px;
          border-radius: 34px !important;
          margin-left: 20px;
          margin-right: 20px;
        }
title: ''
views:
  - theme: noctis
    icon: ''
    path: default_view
    title: HOME
    visible:
      - user: a27a825440914ad7a919367c2e53793e
      - user: aadd52d881af46bca495e279bee867bf
      - user: 10a78a75e63f4c5ba22a81742f59b925
    type: sidebar
    badges: []
    cards:
      - type: custom:decluttering-card
        template: header_live_weather_background
      - type: custom:decluttering-card
        template: header_temperature_graph
      - type: custom:decluttering-card
        template: header_main
      - type: custom:decluttering-card
        template: header_conditional_camera
      - type: custom:vertical-stack-in-card
        cards:
          - type: horizontal-stack
            cards:
              - type: custom:slider-button-card
                entity: light.piece_principale
                slider:
                  direction: left-right
                  background: gradient
                  use_state_color: true
                  use_percentage_bg_opacity: true
                  show_track: false
                  toggle_on_click: false
                  force_square: false
                show_name: true
                show_state: false
                compact: true
                icon:
                  show: true
                  use_state_color: false
                  icon: mdi:home-lightbulb
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/piece_principale
                action_button:
                  mode: custom
                  icon: mdi:chevron-right
                  show_spinner: false
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/piece_principale
                style: |
                  :host {
                    margin-right: 7px !important;
                  }
                  ha-card > div > div.text {
                    font-weight: 600;
                    font-size: 14px;
                    margin-top: -1px;
                    letter-spacing: -0.2px;
                  }
                  div.icon {
                    margin: 4px 2px 4px 4px;
                    font-size: 10px;
                  }
                  ha-card > div > div.text > div {
                    overflow: visible;
                  }
                  ha-card { 
                    border-radius: 26px !important;
                  }
                  ha-card > div > div.action {
                    position: absolute;
                    top: 13px;
                    right: 6px;
                    font-size: 12px;
                  }
              - type: custom:slider-button-card
                entity: light.cuisine
                slider:
                  direction: left-right
                  background: gradient
                  use_state_color: true
                  use_percentage_bg_opacity: true
                  show_track: false
                  toggle_on_click: false
                  force_square: false
                show_name: true
                show_state: false
                compact: true
                icon:
                  show: true
                  use_state_color: false
                  icon: mdi:fridge
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/cuisine
                action_button:
                  mode: custom
                  icon: mdi:chevron-right
                  show_spinner: false
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/cuisine
                style: |
                  :host {
                    font-weight: 600;
                    margin-left: 7px !important;
                  }
                  ha-card > div > div.text {
                    font-weight: 600;
                    font-size: 14px;
                    margin-top: -1px;
                    letter-spacing: -0.2px;
                  }
                  div.icon {
                    margin: 4px 2px 4px 4px;
                    font-size: 10px;
                  }
                  ha-card > div > div.text > div {
                    overflow: visible;
                  }
                  ha-card { 
                    border-radius: 26px !important;
                  }
                  ha-card > div > div.action {
                    position: absolute;
                    top: 13px;
                    right: 6px;
                    font-size: 12px;
                  }
        style: |
          ha-card { 
            margin: 14px 20px !important;
            background: none;
          }
      - type: custom:vertical-stack-in-card
        cards:
          - type: horizontal-stack
            cards:
              - type: custom:slider-button-card
                entity: light.salle_a_manger
                slider:
                  direction: left-right
                  background: gradient
                  use_state_color: true
                  use_percentage_bg_opacity: true
                  show_track: false
                  toggle_on_click: false
                  force_square: false
                show_name: true
                show_state: false
                compact: true
                icon:
                  show: true
                  use_state_color: false
                  icon: mdi:silverware-fork-knife
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/salle_a_manger
                action_button:
                  mode: custom
                  icon: mdi:chevron-right
                  show_spinner: false
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/salle_a_manger
                style: |
                  :host {
                    font-weight: 600;
                    margin-right: 7px !important;
                  }
                  ha-card > div > div.text {
                    font-weight: 600;
                    font-size: 14px;
                    margin-top: -1px;
                    letter-spacing: -0.2px;
                  }
                  div.icon {
                    margin: 4px 2px 4px 4px;
                    font-size: 10px;
                  }
                  ha-card > div > div.text > div {
                    overflow: visible;
                  }
                  ha-card { 
                    border-radius: 26px !important;
                  }
                  ha-card > div > div.action {
                    position: absolute;
                    top: 13px;
                    right: 6px;
                    font-size: 12px;
                  }
              - type: custom:slider-button-card
                entity: light.salon
                slider:
                  direction: left-right
                  background: gradient
                  use_state_color: true
                  use_percentage_bg_opacity: true
                  show_track: false
                  toggle_on_click: false
                  force_square: false
                show_name: true
                show_state: false
                compact: true
                icon:
                  show: true
                  use_state_color: false
                  icon: mdi:sofa
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/salon
                action_button:
                  mode: custom
                  icon: mdi:chevron-right
                  show_spinner: false
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/salon
                style: |
                  :host {
                    font-weight: 600;
                    margin-left: 7px !important;
                  }
                  ha-card > div > div.text {
                    font-weight: 600;
                    font-size: 14px;
                    margin-top: -1px;
                    letter-spacing: -0.2px;
                  }
                  div.icon {
                    margin: 4px 2px 4px 4px;
                    font-size: 10px;
                  }
                  ha-card > div > div.text > div {
                    overflow: visible;
                  }
                  ha-card { 
                    border-radius: 26px !important;
                  }
                  ha-card > div > div.action {
                    position: absolute;
                    top: 13px;
                    right: 6px;
                    font-size: 12px;
                  }
        style: |
          ha-card { 
            margin: 14px 20px !important;
            background: none;
          }
      - type: custom:vertical-stack-in-card
        cards:
          - type: horizontal-stack
            cards:
              - type: custom:slider-button-card
                entity: light.chambre
                slider:
                  direction: left-right
                  background: gradient
                  use_state_color: true
                  use_percentage_bg_opacity: true
                  show_track: false
                  toggle_on_click: false
                  force_square: false
                show_name: true
                show_state: false
                compact: true
                icon:
                  show: true
                  use_state_color: false
                  icon: mdi:bed
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/chambre
                action_button:
                  mode: custom
                  icon: mdi:chevron-right
                  show_spinner: false
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/chambre
                style: |
                  :host {
                    font-weight: 600;
                    margin-right: 7px !important;
                  }
                  ha-card > div > div.text {
                    font-weight: 600;
                    font-size: 14px;
                    margin-top: -1px;
                    letter-spacing: -0.2px;
                  }
                  div.icon {
                    margin: 4px 2px 4px 4px;
                    font-size: 10px;
                  }
                  ha-card > div > div.text > div {
                    overflow: visible;
                  }
                  ha-card { 
                    border-radius: 26px !important;
                  }
                  ha-card > div > div.action {
                    position: absolute;
                    top: 13px;
                    right: 6px;
                    font-size: 12px;
                  }
              - type: custom:slider-button-card
                entity: light.salle_de_bain
                name: Salle de douche
                slider:
                  direction: left-right
                  background: gradient
                  use_state_color: true
                  use_percentage_bg_opacity: true
                  show_track: false
                  toggle_on_click: false
                  force_square: false
                show_name: true
                show_state: false
                compact: true
                icon:
                  show: true
                  use_state_color: false
                  icon: mdi:shower-head
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/salle_de_douche
                action_button:
                  mode: custom
                  icon: mdi:chevron-right
                  show_spinner: false
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/salle_de_douche
                style: |
                  :host {
                    font-weight: 600;
                    margin-left: 7px !important;
                  }
                  ha-card > div > div.text {
                    font-weight: 600;
                    font-size: 14px;
                    margin-top: -1px;
                    letter-spacing: -0.2px;
                  }
                  div.icon {
                    margin: 4px 2px 4px 4px;
                    font-size: 10px;
                  }
                  ha-card > div > div.text > div {
                    overflow: visible;
                  }
                  ha-card { 
                    border-radius: 26px !important;
                  }
                  ha-card > div > div.action {
                    position: absolute;
                    top: 13px;
                    right: 6px;
                    font-size: 12px;
                  }
        style: |
          ha-card { 
            margin: 14px 20px !important;
            background: none;
          }
      - type: custom:vertical-stack-in-card
        cards:
          - type: horizontal-stack
            cards:
              - type: grid
                square: true
                columns: 2
                cards:
                  - type: custom:vertical-stack-in-card
                    cards:
                      - type: custom:weather-card
                        entity: weather.maison_2
                        icons: /local/icons/weather_icons/animated/
                        number_of_forecasts: '3'
                        current: false
                        details: false
                        forecast: true
                        hourly_forecast: false
                        style: |
                          ha-card { 
                            background: none;
                            box-shadow: none;
                            padding: 0 !important;
                            font-size: 12px;
                          }
                          div.precipitation {
                            display: none;
                          }
                          div.precipitation_probability {
                            display: none;
                          }
                          i.icon {
                            transform: scale(0.17);
                            transform-origin: 0 19.5%;
                            margin-left: -1.4em !important;
                            position: absolute;
                            top: -18px;
                            padding: 0;
                            height: 240% !important;
                            width: 240% !important;
                          }
                          .dayname:after {
                            content:'';
                            height: 3.4em;
                            width: 3.5em;
                            display: block;
                            margin-top: -20px;
                          }
                          .dayname {
                            margin-top: -6px
                          }
                          div.day {
                            border-right: 0.06em solid rgb(26,137,245,0.3);
                          }
                          div.lowTemp {
                            margin-top: -10px;
                          }
                      - type: custom:atomic-calendar-revive
                        entities:
                          - entity: calendar.calendrier_google
                            name: My Calendar
                            color: white
                            max_results: 12
                            icon: mdi:calendar
                          - entity: calendar.personnel
                            name: Personnel
                            color: white
                            icon: mdi:calendar
                          - entity: calendar.jours_feries_en_belgique
                            name: Jours fériés en belgique
                            color: white
                            icon: mdi:party-popper
                          - entity: calendar.geraldine_et_quentin
                            name: Géraldine et quentin
                            color: white
                            icon: mdi:calendar
                        firstDayOfWeek: 1
                        refreshInterval: 60
                        showDate: false
                        hideDuplicates: false
                        hideFinishedEvents: true
                        showCurrentEventLine: false
                        showProgressBar: false
                        showMonth: true
                        showWeekDay: false
                        showDescription: false
                        disableEventLink: true
                        showFullDayProgress: false
                        showEventIcon: false
                        showHiddenText: false
                        showCalendarName: false
                        showWeekNumber: false
                        calShowDescription: false
                        showLastCalendarWeek: false
                        dimFinishedEvents: true
                        disableCalLink: true
                        disableCalLocationLink: true
                        disableCalEventLink: truemaxEventCount
                        noEventsForNextDaysText: Aucun événement dans les prochains jours
                        showLoader: false
                        maxEventCount: 4
                        cardHeight: 70px
                        maxDaysToShow: 90
                        showDatePerEvent: true
                        language: fr
                        style: |
                          ha-card { 
                            width: 100%;
                            padding: 10px 14% 0 0   !important;
                            position: absolute;
                            bottom: 6%;
                            background: none !important;
                          }
                          ha-card > div > table > tbody > tr.daywrap {
                            border-top: none;
                          }
                          ha-card > div > table > tbody {
                            padding: 0px !important;
                          }
                          ha-card > div > table {
                            margin-top: -10px !important;
                            animation: scroll 15s ease infinite;
                          }
                          ha-card > div > table > tbody > tr > td {
                            padding-bottom: 20px !important;
                            padding-top: 2px !important;
                          }
                          ha-card > div {
                            padding-top: 0.3em !important;
                            margin: 0 !important;
                          }
                          div.event-main {
                            width: 100% !important;
                            #white-space: nowrap !important;
                            #overflow: visible !important;
                            text-overflow: ellipsis !important;
                            height: 3em !important;
                          }
                          ha-card > div > table > tbody {
                            font-size: 13px;
                            line-height: 18px;
                          }
                          div.relativeTime {
                            display: none;
                          }
                          .hoursHTML {
                            overflow: hidden;
                            position: absolute;
                            display: -webkit-box;
                            -webkit-line-clamp: 1; /* number of lines to show */
                            line-clamp: 1; 
                            -webkit-box-orient: vertical;
                          }
                          .event-location {
                            display: none !important;
                          }
                          div.event-main {
                            overflow: hidden;
                            display: -webkit-box;
                            -webkit-line-clamp: 2; /* number of lines to show */
                            line-clamp: 2; 
                            -webkit-box-orient: vertical;
                          }
                          @keyframes scroll {
                            0% { opacity: 0; transform: translateY(0); }
                            3% { opacity: 1; transform: translateY(0); }
                            20% { opacity: 1; transform: translateY(0); }
                            23% { opacity: 0; transform: translateY(0); }
                            26% { transform: translateY(calc(-25%)); opacity: 0;}
                            29% { transform: translateY(calc(-25%)); opacity: 1;}
                            46% { transform: translateY(calc(-25%)); opacity: 1;}
                            49% { transform: translateY(calc(-25%)); opacity: 0;}
                            52% { transform: translateY(calc(-50%)); opacity: 0;}
                            55% { transform: translateY(calc(-50%)); opacity: 1;}
                            72% { transform: translateY(calc(-50%)); opacity: 1;}
                            75% { transform: translateY(calc(-50%)); opacity: 0;}
                            78% { transform: translateY(calc(-75%)); opacity: 0;}
                            81% { transform: translateY(calc(-75%)); opacity: 1;}
                            97% { transform: translateY(calc(-75%)); opacity: 1;}
                            100% { transform: translateY(calc(-75%)); opacity: 0;}
                          }
                    style: |
                      ha-card { 
                        box-shadow: none;
                        height: 100% !important;
                        padding: 12% 7%;
                      }
                  - type: custom:vertical-stack-in-card
                    cards:
                      - type: conditional
                        conditions:
                          - entity: media_player.musique
                            state: 'off'
                        card:
                          type: custom:paper-buttons-row
                          buttons:
                            - entity: switch.deezer
                              icon: mdi:music
                              layout: icon_name
                              name: Flow Deezer
                              state_styles:
                                'off':
                                  button:
                                    position: absolute;
                                    top: 50%;
                                    border-radius: 100%;
                                    width: 42px
                                    height: 42px
                                    margin-top: '-46px'
                                    filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.2))
                                    background: >-
                                      var( --ha-card-background,
                                      var(--card-background-color, white) );
                                    background-size: 140% 70%
                                    background-repeat: no-repeat
                                    background-position: 50% 100%
                                    background-color: '#3e4c69'
                                  icon:
                                    margin-top: 44px
                                  name:
                                    margin-top: 20px
                                    width: 100px
                                'on':
                                  button:
                                    display: none;
                      - type: conditional
                        conditions:
                          - entity: media_player.musique
                            state_not: 'off'
                        card:
                          type: custom:mini-media-player
                          volume_stateless: true
                          name: Salon
                          group: false
                          volume_step: '3'
                          entity: media_player.musique
                          sound_mode: full
                          artwork: full-cover
                          toggle_power: false
                          source: icon
                          hide:
                            name: true
                            source: true
                          style: >
                            ha-card {
                              height: 100% !important;
                              width: 100% !important;
                              position: absolute !important;
                            }   .flex {
                              display: block;
                              {% if not is_state('media_player.musique','off') %}
                              filter: drop-shadow(0px 2px 2px rgba(0,0,0,1));
                              {% else %}
                              {% endif %}
                            }   ha-card.--has-artwork .cover{
                              opacity: 0.9;
                            }  .entity__info__media {
                              opacity: 1 !important;
                              padding-right: 16px;
                              overflow: hidden;
                              height: 4.4em;
                              height: 100%;
                            }  div.entity__icon {
                              {% if not is_state('media_player.musique','off') %}
                              display: none;
                              {% endif %}
                            }   mmp-media-controls {
                              {% if not is_state('media_player.musique','off') %}
                              filter: drop-shadow(0px 2px 2px rgba(0,0,0,1));
                              flex-wrap: wrap-reverse !important;
                              {% endif %}
                            } ha-card > div.mmp-player {
                              padding: 12px !important;
                              {% if not is_state('media_player.musique','off') %}
                              {% else %}
                              #display: none !important;
                              {% endif %}
                            }   ha-card > div.mmp-player {
                              {% if is_state_attr('media_player.salon','media_content_id', 'Bluetooth') %}
                              position: relative;
                              height: 20vh;
                              {% else %}
                              position: absolute;
                              align-self: flex-start;
                              height: 100%;
                              {% endif %}
                              background: radial-gradient(circle, rgba(0,0,0,0) 10%, rgba(0,0,0,0.6) 100%) !important;
                              font-size: 0.9em !important;
                            }   ha-card > div.mmp-player > div.mmp-player__adds
                            {
                              position: absolute;
                              bottom: 14px;
                              padding: 0 16px 0 0;
                            }   div.flex.mmp-media-controls__media {
                              margin-bottom: -5px !important;
                            }
                    style: |
                      ha-card {
                        height: 100% !important;
                        width: 100% !important;
                      } 
        style: |
          ha-card { 
            margin: 14px 20px !important;
            background: none;
          }
          .type-custom-vertical-stack-in-card {
            overflow: visible !important;
          }
      - type: custom:vertical-stack-in-card
        cards:
          - type: horizontal-stack
            cards:
              - type: grid
                square: true
                columns: 2
                cards:
                  - type: entities
                    show_header_toggle: false
                    style: |
                      * {
                        padding: 0px;
                      }
                      h1.card-header {
                        padding: 10px;
                        margin-top: -4px
                      }
                      #states {
                        padding: 10px;
                      }
                      ha-card {
                        {% if is_state('sensor.landroid_herbicat_status','Mowing') %}
                        background: radial-gradient(at bottom, rgba(255,255,255, 0.26) 0%, rgba(43,55,78,0) 70%);
                        background-size: 140% 70%;
                        background-repeat: no-repeat;
                        background-position: 50% 100%;
                        background-color: #3e4c69;
                        transition: background 1.5s, background-position 2s, background-color 1.5s;
                        transition-delay: 0.6s;
                        {% else %}
                        transition: background 1.5s;
                        transition-delay: 0.2s;
                        background-color: var( --ha-card-background, var(--card-background-color, white) );
                        background-size: 140% 70%;
                        background-position: 50% 360%;
                        {% endif %}
                      }
                    entities:
                      - entity: vacuum.herbicat
                        state_color: false
                        icon: mdi:robot-mower-outline
                        name: ‎
                        style: |
                          hui-generic-entity-row {
                            margin-bottom: 14px;
                            margin-top: -2px;
                            padding-right: 0.6em; 
                          }
                          hui-generic-entity-row > div {
                            width: max-content !important;
                          }
                      - type: section
                        label: Tondeuse
                        style: |
                          div.divider { 
                            display: none;
                          }
                          div.label { 
                            margin-top: -12px;
                            margin-bottom: 10px;
                            font-size: 17px;
                            font-weight: 600
                          }
                      - entity: vacuum.herbicat
                        type: custom:multiple-entity-row
                        icon: mdi:battery
                        attribute: battery_level
                        name: Battery
                        unit: '%'
                        style:
                          hui-generic-entity-row$: |
                            div {
                              display: none !important;
                            }
                          .: |
                            hui-generic-entity-row  {
                              position: absolute !important;
                              top: -14px !important;
                              margin-left: -7px !important;
                              transform: scale(0.9, 0.9);
                            }
                    footer:
                      type: custom:paper-buttons-row
                      styles:
                        justify-content: space-between;
                        padding: 8px;
                        width: auto;
                        margin-top: '-6px;'
                        margin-bottom: 0px;
                        filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.5));
                      buttons:
                        - name: false
                          icon: mdi:play
                          tap_action:
                            action: call-service
                            service: vacuum.start
                            target:
                              entity_id: vacuum.herbicat
                        - name: false
                          icon: mdi:pause
                          tap_action:
                            action: call-service
                            service: vacuum.pause
                            target:
                              entity_id: vacuum.herbicat
                        - name: false
                          icon: mdi:home-map-marker
                          tap_action:
                            action: call-service
                            service: vacuum.vacuum.return_to_base
                            target:
                              entity_id: vacuum.herbicat
                  - type: entities
                    show_header_toggle: false
                    style: |
                      * {
                        padding: 0px;
                      }
                      h1.card-header {
                        padding: 10px;
                        margin-top: -4px
                      }
                      #states {
                        padding: 10px;
                      }
                      ha-card {
                        {% if is_state('sensor.landroid_herbicat_status','Mowing') %}
                        background: radial-gradient(at bottom, rgba(255,255,255, 0.26) 0%, rgba(43,55,78,0) 70%);
                        background-size: 140% 70%;
                        background-repeat: no-repeat;
                        background-position: 50% 100%;
                        background-color: #3e4c69;
                        transition: background 1.5s, background-position 2s, background-color 1.5s;
                        transition-delay: 0.6s;
                        {% else %}
                        transition: background 1.5s;
                        transition-delay: 0.2s;
                        background-color: var( --ha-card-background, var(--card-background-color, white) );
                        background-size: 140% 70%;
                        background-position: 50% 360%;
                        {% endif %}
                      }
                    entities:
                      - entity: sensor.envoy_122227015952_current_power_production
                        state_color: false
                        name: ‎
                        style: |
                          hui-generic-entity-row {
                            margin-bottom: 14px;
                            margin-top: -2px;
                            padding-right: 0.6em; 
                          }
                          hui-generic-entity-row > div {
                            width: max-content !important;
                          }
                      - type: section
                        label: Énergies
                        style: |
                          div.divider { 
                            display: none;
                          }
                          div.label { 
                            margin-top: -12px;
                            margin-bottom: 10px;
                            font-size: 17px;
                            font-weight: 600
                          }
                      - type: custom:paper-buttons-row
                        styles:
                          justify-content: flex-start
                          align-items: right
                          display: inline-block
                          margin-top: '-12px'
                        buttons:
                          - name: >-
                              Aujourd'hui | {{
                              states("sensor.envoy_122227015952_today_s_energy_production")
                              | round(2) }} kWh
                            entity: >-
                              sensor.envoy_122227015952_today_s_energy_production
                            icon: false
                            styles:
                              button:
                                margin-top: 0
                                font-size: 12px
                                opacity: 0.8
                                margin-bottom: '-10px'
                          - name: >-
                              Compteur | {{
                              states("sensor.consommation_electricite") | round
                              }} kWh
                            icon: false
                            styles:
                              button:
                                margin-top: '-12px'
                                font-size: 12px
                                opacity: 0.8
                                margin-bottom: '-100px'
                            tap_action:
                              action: navigate
                              navigation_path: /lovelace/energies
                    footer:
                      type: custom:mini-graph-card
                      entities:
                        - sensor.envoy_122227015952_current_power_production
                      show:
                        name: false
                        icon: false
                        state: false
                        legend: false
                        animate: true
                        fill: fade
                      line_color: var(--accent-color)
                      height: 160
                      points_per_hour: 1
                      hours_to_show: 24
                      value_factor: -10
                      tap_action: none
                      y_axis: secondary
                      style: |
                        ha-card { 
                          background: none;
                          pointer-events: none;
                        }
        style: |
          ha-card { 
            margin: 14px 20px !important;
            background: none;
            box-shadow: none;
          }

          #states > :last-child {
            z-index: 10;
          }
      - type: custom:vertical-stack-in-card
        cards:
          - type: horizontal-stack
            cards:
              - type: grid
                square: true
                columns: 2
                cards:
                  - type: entities
                    show_header_toggle: false
                    style: |
                      * {
                        padding: 0px;
                      }
                      h1.card-header {
                        padding: 10px;
                        margin-top: -4px
                      }
                      #states {
                        padding: 10px;
                      }
                      ha-card {
                        {% if is_state('vacuum.aspirateur_rez_de_chaussee','cleaning') %}
                        background: radial-gradient(at bottom, rgba(255,255,255, 0.26) 0%, rgba(43,55,78,0) 70%);
                        background-size: 140% 70%;
                        background-repeat: no-repeat;
                        background-position: 50% 100%;
                        background-color: #3e4c69;
                        transition: background 1.5s, background-position 2s, background-color 1.5s;
                        transition-delay: 0.6s;
                        {% else %}
                        transition: background 1.5s;
                        transition-delay: 0.2s;
                        background-color: var( --ha-card-background, var(--card-background-color, white) );
                        background-size: 140% 70%;
                        background-position: 50% 360%;
                        {% endif %}
                      }
                    entities:
                      - entity: vacuum.aspirateur_rez_de_chaussee
                        state_color: false
                        name: ‎
                        style: |
                          hui-generic-entity-row {
                            margin-bottom: 14px;
                            margin-top: -2px;
                            padding-right: 0.6em; 
                          }
                          hui-generic-entity-row > div {
                            width: max-content !important;
                          }
                      - type: section
                        label: Aspirateur
                        style: |
                          div.divider { 
                            display: none;
                          }
                          div.label { 
                            margin-top: -12px;
                            margin-bottom: 10px;
                            font-size: 17px;
                            font-weight: 600
                          }
                      - type: section
                        label: Rez-de-chaussée
                        style: |
                          div.divider { 
                            display: none;
                          }
                          div.label { 
                            margin-top: -8px;
                            margin-bottom: 10px;
                            font-size: 17px;
                            font-weight: 300
                          }
                      - entity: vacuum.aspirateur_rez_de_chaussee
                        type: custom:multiple-entity-row
                        icon: mdi:battery
                        attribute: battery_level
                        name: Battery
                        unit: '%'
                        style:
                          hui-generic-entity-row$: |
                            div {
                              display: none !important;
                            }
                          .: |
                            hui-generic-entity-row  {
                              position: absolute !important;
                              top: -14px !important;
                              margin-left: -7px !important;
                              transform: scale(0.9, 0.9);
                            }
                    footer:
                      type: custom:paper-buttons-row
                      styles:
                        justify-content: space-between;
                        padding: 8px;
                        width: auto;
                        margin-top: '-6px;'
                        margin-bottom: 0px;
                        filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.5));
                      buttons:
                        - name: false
                          icon: mdi:play
                          tap_action:
                            action: call-service
                            service: vacuum.start
                            target:
                              entity_id: vacuum.aspirateur_rez_de_chaussee
                        - name: false
                          icon: mdi:pause
                          tap_action:
                            action: call-service
                            service: vacuum.pause
                            target:
                              entity_id: vacuum.aspirateur_rez_de_chaussee
                        - name: false
                          icon: mdi:home-map-marker
                          tap_action:
                            action: call-service
                            service: vacuum.vacuum.return_to_base
                            target:
                              entity_id: vacuum.aspirateur_rez_de_chaussee
                        - name: false
                          icon: mdi:plus
                          tap_action:
                            action: navigate
                            navigation_path: /lovelace/aspirateur_rez_de_chaussee
                  - type: entities
                    show_header_toggle: false
                    style: |
                      * {
                        padding: 0px;
                      }
                      h1.card-header {
                        padding: 10px;
                        margin-top: -4px
                      }
                      #states {
                        padding: 10px;
                      }
                      ha-card {
                        {% if is_state('vacuum.xiaomi_vacuum_cleaner','cleaning') %}
                        background: radial-gradient(at bottom, rgba(255,255,255, 0.26) 0%, rgba(43,55,78,0) 70%);
                        background-size: 140% 70%;
                        background-repeat: no-repeat;
                        background-position: 50% 100%;
                        background-color: #3e4c69;
                        transition: background 1.5s, background-position 2s, background-color 1.5s;
                        transition-delay: 0.6s;
                        {% else %}
                        transition: background 1.5s;
                        transition-delay: 0.2s;
                        background-color: var( --ha-card-background, var(--card-background-color, white) );
                        background-size: 140% 70%;
                        background-position: 50% 360%;
                        {% endif %}
                      }
                    entities:
                      - entity: vacuum.xiaomi_vacuum_cleaner
                        state_color: false
                        name: ‎
                        style: |
                          hui-generic-entity-row {
                            margin-bottom: 14px;
                            margin-top: -2px;
                            padding-right: 0.6em; 
                          }
                          hui-generic-entity-row > div {
                            width: max-content !important;
                          }
                      - type: section
                        label: Aspirateur
                        style: |
                          div.divider { 
                            display: none;
                          }
                          div.label { 
                            margin-top: -12px;
                            margin-bottom: 10px;
                            font-size: 17px;
                            font-weight: 600
                          }
                      - type: section
                        label: Étage
                        style: |
                          div.divider { 
                            display: none;
                          }
                          div.label { 
                            margin-top: -8px;
                            margin-bottom: 10px;
                            font-size: 17px;
                            font-weight: 300
                          }
                      - entity: vacuum.xiaomi_vacuum_cleaner
                        type: custom:multiple-entity-row
                        icon: mdi:battery
                        attribute: battery_level
                        name: Battery
                        unit: '%'
                        style:
                          hui-generic-entity-row$: |
                            div {
                              display: none !important;
                            }
                          .: |
                            hui-generic-entity-row  {
                              position: absolute !important;
                              top: -14px !important;
                              margin-left: -7px !important;
                              transform: scale(0.9, 0.9);
                            }
                    footer:
                      type: custom:paper-buttons-row
                      styles:
                        justify-content: space-between;
                        padding: 8px;
                        width: auto;
                        margin-top: '-6px;'
                        margin-bottom: 0px;
                        filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.5));
                      buttons:
                        - name: false
                          icon: mdi:play
                          tap_action:
                            action: call-service
                            service: vacuum.start
                            target:
                              entity_id: vacuum.xiaomi_vacuum_cleaner
                        - name: false
                          icon: mdi:pause
                          tap_action:
                            action: call-service
                            service: vacuum.pause
                            target:
                              entity_id: vacuum.xiaomi_vacuum_cleaner
                        - name: false
                          icon: mdi:home-map-marker
                          tap_action:
                            action: call-service
                            service: vacuum.vacuum.return_to_base
                            target:
                              entity_id: vacuum.xiaomi_vacuum_cleaner
                        - name: false
                          icon: mdi:plus
                          tap_action:
                            action: navigate
                            navigation_path: /lovelace/aspirateur_etage
        style: |
          ha-card { 
            margin: 14px 20px !important;
            background: none;
            box-shadow: none;
          }
      - type: custom:vertical-stack-in-card
        cards:
          - type: horizontal-stack
            cards:
              - type: grid
                square: true
                columns: 2
                cards:
                  - type: entities
                    show_header_toggle: false
                    style: |
                      * {
                        padding: 0px;
                      }
                      h1.card-header {
                        padding: 10px;
                        margin-top: -4px
                      }
                      #states {
                        padding: 10px;
                      }
                      ha-card {
                        {% if is_state('sensor.geraldine_presence','Présente') %}
                        background: radial-gradient(at bottom, rgba(255,255,255, 0.26) 0%, rgba(43,55,78,0) 70%);
                        background-size: 140% 70%;
                        background-repeat: no-repeat;
                        background-position: 50% 100%;
                        background-color: #3e4c69;
                        transition: background 1.5s, background-position 2s, background-color 1.5s;
                        transition-delay: 0.6s;
                        {% else %}
                        transition: background 1.5s;
                        transition-delay: 0.2s;
                        background-color: var( --ha-card-background, var(--card-background-color, white) );
                        background-size: 140% 70%;
                        background-position: 50% 360%;
                        {% endif %}
                      }
                    entities:
                      - entity: sensor.geraldine_presence
                        state_color: false
                        name: ‎
                        style: |
                          hui-generic-entity-row {
                            margin-bottom: 14px;
                            margin-top: -2px;
                            padding: 0.6em;
                          }
                      - type: section
                        label: Géraldine
                        style: |
                          div.divider { 
                            display: none;
                          }
                          div.label { 
                            margin-top: -12px;
                            margin-bottom: 10px;
                            font-size: 17px;
                            font-weight: 600
                          }
                      - entity: sensor.iphone_de_geraldine_geocoded_location
                        name: ‎
                        icon: none
                        style: |
                          * {
                            display: inline !important;
                            position: absolute !important;
                            top: 0px;
                            left: 0 !important;
                            width: 94%;
                            text-align: left !important;
                            padding: 0 0 0 8px; 
                            margin-top: -3px;
                            opacity: 0.8;
                            font-size: 0.9em;
                            line-height: 1.4em;
                          }
                          style {
                            opacity: 0 !important;
                          }
                    footer:
                      type: custom:paper-buttons-row
                      styles:
                        justify-content: space-between;
                        padding: 8px;
                        width: auto;
                        margin-top: '-6px;'
                        margin-bottom: 0px;
                        filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.5));
                      buttons:
                        - name: >-
                            {{
                            states("sensor.iphone_de_geraldine_battery_level")
                            }}%
                          entity: sensor.iphone_de_geraldine_battery_level
                        - name: false
                          icon: mdi:plus
                          tap_action:
                            action: navigate
                            navigation_path: /lovelace/geraldine
                  - type: entities
                    show_header_toggle: false
                    style: |
                      * {
                        padding: 0px;
                      }
                      h1.card-header {
                        padding: 10px;
                        margin-top: -4px
                      }
                      #states {
                        padding: 10px !important;
                      }
                      ha-card {
                        {% if is_state('sensor.quentin_presence','Présent') %}
                        background: radial-gradient(at bottom, rgba(255,255,255, 0.26) 0%, rgba(43,55,78,0) 70%);
                        background-size: 140% 70%;
                        background-repeat: no-repeat;
                        background-position: 50% 100%;
                        background-color: #3e4c69;
                        transition: background 1.5s, background-position 2s, background-color 1.5s;
                        transition-delay: 0.6s;
                        {% else %}
                        transition: background 1.5s;
                        transition-delay: 0.2s;
                        background-color: var( --ha-card-background, var(--card-background-color, white) );
                        background-size: 140% 70%;
                        background-position: 50% 360%;
                        {% endif %}
                      }
                    entities:
                      - entity: sensor.quentin_presence
                        state_color: false
                        name: ‎
                        style: |
                          hui-generic-entity-row {
                            margin-bottom: 14px;
                            margin-top: -2px;
                            padding: 0.6em;
                          }
                      - type: section
                        label: Quentin
                        style: |
                          div.divider { 
                            display: none;
                          }
                          div.label { 
                            margin-top: -12px;
                            margin-bottom: 10px;
                            font-size: 17px;
                            font-weight: 600
                          }
                      - entity: sensor.mi_9_geocoded_location
                        name: ‎
                        icon: none
                        style: |
                          * {
                            display: inline !important;
                            position: absolute !important;
                            top: 0px;
                            left: 0 !important;
                            width: 94%;
                            text-align: left !important;
                            padding: 0 0 0 8px; 
                            margin-top: -3px;
                            opacity: 0.8;
                            font-size: 0.9em;
                            line-height: 1.4em;
                          }
                          style {
                            display: none !important;
                            opacity: 0 !important;
                          }
                    footer:
                      type: custom:paper-buttons-row
                      styles:
                        justify-content: space-between;
                        padding: 8px;
                        width: auto;
                        margin-top: '-6px;'
                        margin-bottom: 0px;
                        filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.5));
                      buttons:
                        - name: '{{ states("sensor.mi_9_battery_level") }}%'
                          entity: sensor.mi_9_battery_level
                        - name: false
                          icon: mdi:plus
                          tap_action:
                            action: navigate
                            navigation_path: /lovelace/quentin
        style: |
          ha-card { 
            margin: 14px 20px !important;
            background: none;
            box-shadow: none;
          }
      - type: custom:mod-card
        card:
          type: custom:vertical-stack-in-card
          cards:
            - type: horizontal-stack
              cards:
                - type: picture
                  image: /local/qr-wifi.png
                  style: |
                    ha-card { 
                      box-shadow: none;
                      background: rgba(0,0,0,0);
                      height: 75%;
                      width: 75%;
                      padding: 20px 0
                    }
                    ha-card > img {
                      border-radius: 26px;
                    }
                - type: markdown
                  content: >-
                    Scannez ce QR code pour vous connecter au **Wi-Fi**.


                    <ha-icon icon="mdi:wifi"></ha-icon><ha-icon
                    icon="mdi:none"></ha-icon>**Enter WiFi SSID here**


                    <ha-icon icon="mdi:lock"></ha-icon><ha-icon
                    icon="mdi:none"></ha-icon>**Enter password here**
                  style: |
                    ha-card { 
                      box-shadow: none;
                      background: rgba(0,0,0,0);
                      display: flex;
                      justify-content: center;
                      flex-direction: column;
                      color: white
                    }
          card_mod:
            style: |
              ha-card { 
                box-shadow: none;
                background: rgba(0,0,0,0);
                margin: 0px 10px 0px 10px;
              }
        card_mod:
          style: |
            ha-card { 
              box-shadow: none;
              background: rgba(0,0,0,0);
              margin: 0px 10px 0px 10px;
            }
      - type: button
        tap_action:
          action: navigate
          navigation_path: /config/dashboard
        name: Settings
        show_state: false
        show_name: false
        style: |
          ha-card { 
            margin: 0 0px 0 15px;
            box-shadow: none;
            background: rgba(0,0,0,0);
            opacity: 0;
            font-size: 18px;
            overflow: hidden;    
          }
          ha-card > ha-state-icon {
            height: 0px;
          }
      - type: custom:vertical-stack-in-card
        cards:
          - type: custom:decluttering-card
            template: footer_sticky_menu
        style: |
          :host {
            position: sticky !important;
            bottom: 26px;
            margin-bottom: 10px !important;
            animation: 1.2s position ease-in-out;
          }
          @keyframes position {
            0% { bottom: -80px; }
            20% { bottom: -80px; }
            70% { bottom: 26px; }
            90% { bottom: 24px; }
            100% { bottom: 26px; }
          }
          ha-card { 
            background: none;
            border-radius: 26px !important;
          }
          :host:before {
            content: '';
            display: block;
            position: absolute;
            bottom: -26px;
            left: -8px;
            padding-right: 16px;
            height: 130px;
            width: 100%; 
            background: linear-gradient(180deg, rgba(45, 56, 76, 0) 0%, rgba(35, 46, 66, 0.85) 50%);
            pointer-events: none;
            animation: 1.2s opacity ease-in-out;
          }
          @keyframes opacity {
            0% { opacity: 0; }
            20% { opacity: 0; }
            100% { opacity: 1; }
          }
          ### The sticky position don't work with Decluttering card
          ### This is why I have to add the CSS here
          ### If you don't use the UI you can use YAML anchors instead
  - theme: noctis
    icon: ''
    path: piece_principale
    title: Pièce principale
    visible:
      - user: a27a825440914ad7a919367c2e53793e
      - user: aadd52d881af46bca495e279bee867bf
      - user: 10a78a75e63f4c5ba22a81742f59b925
    type: sidebar
    subview: true
    badges: []
    cards:
      - type: custom:decluttering-card
        template: header_live_weather_background
      - type: custom:decluttering-card
        template: header_temperature_graph
      - type: custom:decluttering-card
        template: header_main
      - type: custom:decluttering-card
        template: header_conditional_camera
      - type: entities
        entities:
          - type: custom:paper-buttons-row
            buttons:
              - icon: mdi:home-lightbulb
                layout: icon|name
                name: Pièce principale
                style:
                  name:
                    margin-left: 18px
                    font-size: 18px
                    font-weight: 600
              - icon: mdi:close
                layout: icon
                tap_action:
                  action: navigate
                  navigation_path: /
                style:
                  icon:
                    '--mdc-icon-size': 34px
            style: |
              div.flex-box {
                margin-top: -6px;
                display: flex;
                justify-content: space-between;
                align-items: center;
              }
          - type: section
            label: Ambiance
          - type: custom:paper-buttons-row
            buttons:
              - entity: switch.ambiance_auto
                name: Auto
              - name: '|'
                style:
                  button:
                    color: '#262e41'
              - entity: script.ambiance_video
                name: false
                style:
                  button:
                    color: |-
                      {% if is_state('input_select.ambiances', 'Cinéma') %}
                        var(--accent-color)
                      {% else%}
                        white
                      {% endif %}
              - entity: script.ambiance_horreur
                name: false
                style:
                  button:
                    color: >-
                      {% if is_state('input_select.ambiances', 'Cinéma sombre')
                      %}
                        var(--accent-color)
                      {% else%}
                        white
                      {% endif %}
              - name: '|'
                style:
                  button:
                    color: '#262e41'
              - entity: script.ambiance_detente
                name: false
                style:
                  button:
                    color: |-
                      {% if is_state('input_select.ambiances', 'Détente') %}
                        var(--accent-color)
                      {% else%}
                        white
                      {% endif %}
              - entity: script.ambiance_clair
                name: false
                style:
                  button:
                    color: |-
                      {% if is_state('input_select.ambiances', 'Clair') %}
                        var(--accent-color)
                      {% else%}
                        white
                      {% endif %}
              - entity: script.ambiance_fete
                name: false
                style:
                  button:
                    color: |-
                      {% if is_state('input_select.ambiances', 'Fête') %}
                        var(--accent-color)
                      {% else%}
                        white
                      {% endif %}   
              - entity: script.ambiance_musique
                name: false
                style:
                  button:
                    color: |-
                      {% if is_state('input_select.ambiances', 'Musique') %}
                        var(--accent-color)
                      {% else%}
                        white
                      {% endif %}  
          - entity: input_select.ambiances
          - type: section
          - type: custom:light-entity-card
            entity: light.piece_principale
            shorten_cards: false
            consolidate_entities: true
            child_card: true
            hide_header: false
            header: Toutes les lampes
            color_wheel: true
            persist_features: true
            brightness: true
            color_temp: true
            white_value: false
            color_picker: true
            smooth_color_wheel: true
            speed: false
            intensity: false
            force_features: false
            show_slider_percent: false
            full_width_sliders: true
            brightness_icon: weather-sunny
            white_icon: file-word-box
            temperature_icon: thermometer
            speed_icon: speedometer
            intensity_icon: transit-connection-horizontal
            effects_list: false
            style: >
              ha-card {
                margin: 14px 8px !important;
              }

              ha-card > div.light-entity-card__header >
              div.light-entity-card__title {
                font-size: 14px !important;
                font-weight: 500;
              }
          - type: custom:rgb-light-card
            entity: light.piece_principale
            justify: around
            size: 23
            colors:
              - color_temp: 153
                brightness: 255
                icon_color: white
              - color_temp: 357
                brightness: 255
              - color_temp: 451
                brightness: 255
              - rgb_color:
                  - 255
                  - 170
                  - 0
                brightness: 255
                icon_color: linear-gradient(15deg, rgb(255,170,0), rgb(255,225,165))
              - rgb_color:
                  - 255
                  - 0
                  - 0
                brightness: 255
                icon_color: linear-gradient(15deg, red, rgb(255,100,100))
              - rgb_color:
                  - 244
                  - 38
                  - 255
                brightness: 255
                icon_color: linear-gradient(15deg, rgb(244,38,255), rgb(255,138,255))
              - rgb_color:
                  - 0
                  - 222
                  - 255
                brightness: 255
                icon_color: linear-gradient(15deg, rgb(0,222,255), rgb(140,240,255))
              - rgb_color:
                  - 0
                  - 0
                  - 255
                brightness: 255
                icon_color: linear-gradient(15deg, blue, rgb(100,100,255))
            style: |
              * {
                margin-bottom: 6px !important;
              }
        style: |
          ha-card {
            margin: 14px 20px 28px !important;
          }
      - type: custom:vertical-stack-in-card
        cards:
          - type: custom:decluttering-card
            template: footer_sticky_menu
        style: |
          :host {
            position: sticky !important;
            bottom: 26px;
            margin-bottom: 10px !important;
            animation: 1.2s position ease-in-out;
          }
          @keyframes position {
            0% { bottom: -80px; }
            20% { bottom: -80px; }
            70% { bottom: 26px; }
            90% { bottom: 24px; }
            100% { bottom: 26px; }
          }
          ha-card { 
            background: none;
            border-radius: 26px !important;
            margin-top: 50%;
          }
          :host:before {
            content: '';
            display: block;
            position: absolute;
            bottom: -26px;
            left: -8px;
            padding-right: 16px;
            height: 130px;
            width: 100%; 
            background: linear-gradient(180deg, rgba(45, 56, 76, 0) 0%, rgba(35, 46, 66, 0.85) 50%);
            pointer-events: none;
            animation: 1.2s opacity ease-in-out;
          }
          @keyframes opacity {
            0% { opacity: 0; }
            20% { opacity: 0; }
            100% { opacity: 1; }
          }
          ### The sticky position don't work with Decluttering card
          ### This is why I have to add the CSS here
          ### If you don't use the UI you can use YAML anchors instead
  - theme: noctis
    icon: ''
    path: cuisine
    title: Cuisine
    visible:
      - user: a27a825440914ad7a919367c2e53793e
      - user: aadd52d881af46bca495e279bee867bf
      - user: 10a78a75e63f4c5ba22a81742f59b925
    type: sidebar
    subview: true
    badges: []
    cards:
      - type: custom:decluttering-card
        template: header_live_weather_background
      - type: custom:decluttering-card
        template: header_temperature_graph
      - type: custom:decluttering-card
        template: header_main
      - type: custom:decluttering-card
        template: header_conditional_camera
      - type: entities
        entities:
          - type: custom:paper-buttons-row
            buttons:
              - icon: mdi:fridge
                layout: icon|name
                name: Cuisine
                style:
                  name:
                    margin-left: 18px
                    font-size: 18px
                    font-weight: 600
              - icon: mdi:close
                layout: icon
                tap_action:
                  action: navigate
                  navigation_path: /
                style:
                  icon:
                    '--mdc-icon-size': 34px
            style: |
              div.flex-box {
                margin-top: -6px;
                display: flex;
                justify-content: space-between;
                align-items: center;
              }
          - type: section
          - type: custom:light-entity-card
            entity: light.cuisine
            shorten_cards: false
            consolidate_entities: true
            child_card: true
            hide_header: false
            header: Toutes les lampes
            color_wheel: true
            persist_features: true
            brightness: true
            color_temp: true
            white_value: false
            color_picker: true
            smooth_color_wheel: true
            speed: false
            intensity: false
            force_features: false
            show_slider_percent: false
            full_width_sliders: true
            brightness_icon: weather-sunny
            white_icon: file-word-box
            temperature_icon: thermometer
            speed_icon: speedometer
            intensity_icon: transit-connection-horizontal
            effects_list: false
            style: >
              ha-card {
                margin: 14px 8px !important;
              }

              ha-card > div.light-entity-card__header >
              div.light-entity-card__title {
                font-size: 14px !important;
                font-weight: 500;
              }
          - type: custom:rgb-light-card
            entity: light.cuisine
            justify: around
            size: 23
            colors:
              - color_temp: 153
                brightness: 255
                icon_color: white
              - color_temp: 357
                brightness: 255
              - color_temp: 451
                brightness: 255
              - rgb_color:
                  - 255
                  - 170
                  - 0
                brightness: 255
                icon_color: linear-gradient(15deg, rgb(255,170,0), rgb(255,225,165))
              - rgb_color:
                  - 255
                  - 0
                  - 0
                brightness: 255
                icon_color: linear-gradient(15deg, red, rgb(255,100,100))
              - rgb_color:
                  - 244
                  - 38
                  - 255
                brightness: 255
                icon_color: linear-gradient(15deg, rgb(244,38,255), rgb(255,138,255))
              - rgb_color:
                  - 0
                  - 222
                  - 255
                brightness: 255
                icon_color: linear-gradient(15deg, rgb(0,222,255), rgb(140,240,255))
              - rgb_color:
                  - 0
                  - 0
                  - 255
                brightness: 255
                icon_color: linear-gradient(15deg, blue, rgb(100,100,255))
            style: |
              * {
                margin-bottom: 6px !important;
              }
          - type: section
            label: Lampes
          - entity: light.led_cuisine
            name: LED
          - entity: light.spots_cuisine
            name: Plan de travail
          - entity: light.bar_cuisine
            name: Bar
            icon: mdi:light-recessed
          - entity: light.hotte_cuisine
            name: Hotte
          - type: section
            label: Volets
          - entity: cover.cuisine
          - type: section
            label: Appareils
          - entity: sensor.hue_motion_sensor_1_temperature
            name: Température
          - entity: fan.hotte_cuisine
            name: Hotte
          - type: section
            label: Message audio
          - type: custom:vertical-stack-in-card
            cards:
              - type: horizontal-stack
                cards:
                  - type: entities
                    entities:
                      - entity: input_text.message_google_cuisine
                        name: Message à envoyer dans la cuisine et la chambre
                        card_mod:
                          style:
                            hui-generic-entity-row:
                              $: |
                                state-badge {
                                  display: none;
                                } 
                                :host {
                                  width: 194%;
                                }
                              ha-textfield $: |
                                .mdc-text-field {
                                  border: 2px solid var( --ha-card-background, var(--card-background-color, white) );
                                  border-radius: 110px !important;
                                }
                                .mdc-line-ripple::after,
                                .mdc-line-ripple::before {
                                  border-bottom-style: none !important;
                                }
                    show_header_toggle: false
                    card_mod:
                      style: |
                        "hui-generic-entity-row$state-badge": {
                          display: none;
                        }
                        ha-card {
                          background: none;
                        }
                  - type: button
                    tap_action:
                      action: call-service
                      service: script.envoi_message_google_mini_cuisine
                    show_name: false
                    show_icon: true
                    icon: mdi:cast
                    icon_height: 30px
                    card_mod:
                      style: |
                        ha-card {
                          width: 56px;
                          height: 56px !important;
                          margin-top: 16px;
                          border-radius: 100px;
                          float: right;
                        }
        style: |
          ha-card {
            margin: 14px 20px 28px !important;
          }
      - type: custom:vertical-stack-in-card
        cards:
          - type: custom:decluttering-card
            template: footer_sticky_menu
        style: |
          :host {
            position: sticky !important;
            bottom: 26px;
            margin-bottom: 10px !important;
            animation: 1.2s position ease-in-out;
          }
          @keyframes position {
            0% { bottom: -80px; }
            20% { bottom: -80px; }
            70% { bottom: 26px; }
            90% { bottom: 24px; }
            100% { bottom: 26px; }
          }
          ha-card { 
            background: none;
            border-radius: 26px !important;
          }
          :host:before {
            content: '';
            display: block;
            position: absolute;
            bottom: -26px;
            left: -8px;
            padding-right: 16px;
            height: 130px;
            width: 100%; 
            background: linear-gradient(180deg, rgba(45, 56, 76, 0) 0%, rgba(35, 46, 66, 0.85) 50%);
            pointer-events: none;
            animation: 1.2s opacity ease-in-out;
          }
          @keyframes opacity {
            0% { opacity: 0; }
            20% { opacity: 0; }
            100% { opacity: 1; }
          }
          ### The sticky position don't work with Decluttering card
          ### This is why I have to add the CSS here
          ### If you don't use the UI you can use YAML anchors instead
  - theme: noctis
    icon: ''
    path: salon
    title: Salon
    visible:
      - user: a27a825440914ad7a919367c2e53793e
      - user: aadd52d881af46bca495e279bee867bf
      - user: 10a78a75e63f4c5ba22a81742f59b925
    type: sidebar
    subview: true
    badges: []
    cards:
      - type: custom:decluttering-card
        template: header_live_weather_background
      - type: custom:decluttering-card
        template: header_temperature_graph
      - type: custom:decluttering-card
        template: header_main
      - type: custom:decluttering-card
        template: header_conditional_camera
      - type: entities
        entities:
          - type: custom:paper-buttons-row
            buttons:
              - icon: mdi:sofa
                layout: icon|name
                name: Salon
                style:
                  name:
                    margin-left: 18px
                    font-size: 18px
                    font-weight: 600
              - icon: mdi:close
                layout: icon
                tap_action:
                  action: navigate
                  navigation_path: /
                style:
                  icon:
                    '--mdc-icon-size': 34px
            style: |
              div.flex-box {
                margin-top: -6px;
                display: flex;
                justify-content: space-between;
                align-items: center;
              }
          - type: section
          - type: custom:light-entity-card
            entity: light.salon
            shorten_cards: false
            consolidate_entities: true
            child_card: true
            hide_header: false
            header: Toutes les lampes
            color_wheel: true
            persist_features: true
            brightness: true
            color_temp: true
            white_value: false
            color_picker: true
            smooth_color_wheel: true
            speed: false
            intensity: false
            force_features: false
            show_slider_percent: false
            full_width_sliders: true
            brightness_icon: weather-sunny
            white_icon: file-word-box
            temperature_icon: thermometer
            speed_icon: speedometer
            intensity_icon: transit-connection-horizontal
            effects_list: false
            style: >
              ha-card {
                margin: 14px 8px !important;
              }

              ha-card > div.light-entity-card__header >
              div.light-entity-card__title {
                font-size: 14px !important;
                font-weight: 500;
              }
          - type: custom:rgb-light-card
            entity: light.salon
            justify: around
            size: 23
            colors:
              - color_temp: 153
                brightness: 255
                icon_color: white
              - color_temp: 357
                brightness: 255
              - color_temp: 451
                brightness: 255
              - rgb_color:
                  - 255
                  - 170
                  - 0
                brightness: 255
                icon_color: linear-gradient(15deg, rgb(255,170,0), rgb(255,225,165))
              - rgb_color:
                  - 255
                  - 0
                  - 0
                brightness: 255
                icon_color: linear-gradient(15deg, red, rgb(255,100,100))
              - rgb_color:
                  - 244
                  - 38
                  - 255
                brightness: 255
                icon_color: linear-gradient(15deg, rgb(244,38,255), rgb(255,138,255))
              - rgb_color:
                  - 0
                  - 222
                  - 255
                brightness: 255
                icon_color: linear-gradient(15deg, rgb(0,222,255), rgb(140,240,255))
              - rgb_color:
                  - 0
                  - 0
                  - 255
                brightness: 255
                icon_color: linear-gradient(15deg, blue, rgb(100,100,255))
            style: |
              * {
                margin-bottom: 6px !important;
              }
          - type: section
            label: Lampes
          - entity: light.led_canape
          - entity: light.haut_etagere
          - entity: light.bas_tv
          - entity: light.spots_haut_tv
            name: Haut TV
          - entity: light.spots_canape_salle_a_manger
          - entity: light.ambilight
            icon: mdi:television-ambient-light
          - type: section
            label: Ambilight
          - entity: switch.ambihue
          - type: section
            label: Volets
          - entity: cover.haut_canape
          - entity: cover.stores_salon
          - type: section
            label: Appareils
          - entity: sensor.salon_temperature
            name: Température
          - entity: switch.television
          - entity: switch.pc
          - type: section
            label: Home Cinema
          - entity: input_number.subwoofer
          - entity: automation.denon_auto_subwoofer_level
            name: Volume subwoofer auto
            icon: mdi:thermostat-box-auto
          - entity: automation.launch_deezer_script_when_i_m_home
            name: Musique auto
            icon: hass:music
          - entity: automation.denon_source_automatique
            name: Source audio auto
            icon: mdi:monitor-speaker
        style: |
          ha-card {
            margin: 14px 20px 28px !important;
          }
      - type: custom:vertical-stack-in-card
        cards:
          - type: custom:decluttering-card
            template: footer_sticky_menu
        style: |
          :host {
            position: sticky !important;
            bottom: 26px;
            margin-bottom: 10px !important;
            animation: 1.2s position ease-in-out;
          }
          @keyframes position {
            0% { bottom: -80px; }
            20% { bottom: -80px; }
            70% { bottom: 26px; }
            90% { bottom: 24px; }
            100% { bottom: 26px; }
          }
          ha-card { 
            background: none;
            border-radius: 26px !important;
          }
          :host:before {
            content: '';
            display: block;
            position: absolute;
            bottom: -26px;
            left: -8px;
            padding-right: 16px;
            height: 130px;
            width: 100%; 
            background: linear-gradient(180deg, rgba(45, 56, 76, 0) 0%, rgba(35, 46, 66, 0.85) 50%);
            pointer-events: none;
            animation: 1.2s opacity ease-in-out;
          }
          @keyframes opacity {
            0% { opacity: 0; }
            20% { opacity: 0; }
            100% { opacity: 1; }
          }
          ### The sticky position don't work with Decluttering card
          ### This is why I have to add the CSS here
          ### If you don't use the UI you can use YAML anchors instead
  - theme: noctis
    icon: ''
    path: salle_a_manger
    title: Salle à manger
    visible:
      - user: a27a825440914ad7a919367c2e53793e
      - user: aadd52d881af46bca495e279bee867bf
      - user: 10a78a75e63f4c5ba22a81742f59b925
    type: sidebar
    subview: true
    badges: []
    cards:
      - type: custom:decluttering-card
        template: header_live_weather_background
      - type: custom:decluttering-card
        template: header_temperature_graph
      - type: custom:decluttering-card
        template: header_main
      - type: custom:decluttering-card
        template: header_conditional_camera
      - type: entities
        entities:
          - type: custom:paper-buttons-row
            buttons:
              - icon: mdi:silverware-fork-knife
                layout: icon|name
                name: Salle à manger
                style:
                  name:
                    margin-left: 18px
                    font-size: 18px
                    font-weight: 600
              - icon: mdi:close
                layout: icon
                tap_action:
                  action: navigate
                  navigation_path: /
                style:
                  icon:
                    '--mdc-icon-size': 34px
            style: |
              div.flex-box {
                margin-top: -6px;
                display: flex;
                justify-content: space-between;
                align-items: center;
              }
          - type: section
          - type: custom:light-entity-card
            entity: light.salle_a_manger
            shorten_cards: false
            consolidate_entities: true
            child_card: true
            hide_header: false
            header: Toutes les lampes
            color_wheel: true
            persist_features: true
            brightness: true
            color_temp: true
            white_value: false
            color_picker: true
            smooth_color_wheel: true
            speed: false
            intensity: false
            force_features: false
            show_slider_percent: false
            full_width_sliders: true
            brightness_icon: weather-sunny
            white_icon: file-word-box
            temperature_icon: thermometer
            speed_icon: speedometer
            intensity_icon: transit-connection-horizontal
            effects_list: false
            style: >
              ha-card {
                margin: 14px 8px !important;
              }

              ha-card > div.light-entity-card__header >
              div.light-entity-card__title {
                font-size: 14px !important;
                font-weight: 500;
              }
          - type: custom:rgb-light-card
            entity: light.salle_a_manger
            justify: around
            size: 23
            colors:
              - color_temp: 153
                brightness: 255
                icon_color: white
              - color_temp: 357
                brightness: 255
              - color_temp: 451
                brightness: 255
              - rgb_color:
                  - 255
                  - 170
                  - 0
                brightness: 255
                icon_color: linear-gradient(15deg, rgb(255,170,0), rgb(255,225,165))
              - rgb_color:
                  - 255
                  - 0
                  - 0
                brightness: 255
                icon_color: linear-gradient(15deg, red, rgb(255,100,100))
              - rgb_color:
                  - 244
                  - 38
                  - 255
                brightness: 255
                icon_color: linear-gradient(15deg, rgb(244,38,255), rgb(255,138,255))
              - rgb_color:
                  - 0
                  - 222
                  - 255
                brightness: 255
                icon_color: linear-gradient(15deg, rgb(0,222,255), rgb(140,240,255))
              - rgb_color:
                  - 0
                  - 0
                  - 255
                brightness: 255
                icon_color: linear-gradient(15deg, blue, rgb(100,100,255))
            style: |
              * {
                margin-bottom: 6px !important;
              }
          - type: section
            label: Lampes
          - entity: light.led_salle_a_manger
          - entity: light.lampadaire
          - entity: light.table_salle_a_manger
          - entity: light.table_salle_a_manger_1
          - entity: light.table_salle_a_manger_2
          - entity: light.table_salle_a_manger_3
          - entity: light.spots_canape_salle_a_manger
          - entity: switch.rf_plug_1
            name: Guirlande
            icon: mdi:string-lights
          - type: section
            label: Volets et rideaux
          - entity: cover.baie_vitree_2
          - entity: cover.baie_vitree
        style: |
          ha-card {
            margin: 14px 20px 28px !important;
          }
      - type: custom:vertical-stack-in-card
        cards:
          - type: custom:decluttering-card
            template: footer_sticky_menu
        style: |
          :host {
            position: sticky !important;
            bottom: 26px;
            margin-bottom: 10px !important;
            animation: 1.2s position ease-in-out;
          }
          @keyframes position {
            0% { bottom: -80px; }
            20% { bottom: -80px; }
            70% { bottom: 26px; }
            90% { bottom: 24px; }
            100% { bottom: 26px; }
          }
          ha-card { 
            background: none;
            border-radius: 26px !important;
          }
          :host:before {
            content: '';
            display: block;
            position: absolute;
            bottom: -26px;
            left: -8px;
            padding-right: 16px;
            height: 130px;
            width: 100%; 
            background: linear-gradient(180deg, rgba(45, 56, 76, 0) 0%, rgba(35, 46, 66, 0.85) 50%);
            pointer-events: none;
            animation: 1.2s opacity ease-in-out;
          }
          @keyframes opacity {
            0% { opacity: 0; }
            20% { opacity: 0; }
            100% { opacity: 1; }
          }
          ### The sticky position don't work with Decluttering card
          ### This is why I have to add the CSS here
          ### If you don't use the UI you can use YAML anchors instead
  - theme: noctis
    icon: ''
    path: chambre
    title: Chambre
    visible:
      - user: a27a825440914ad7a919367c2e53793e
      - user: aadd52d881af46bca495e279bee867bf
      - user: 10a78a75e63f4c5ba22a81742f59b925
    type: sidebar
    subview: true
    badges: []
    cards:
      - type: custom:decluttering-card
        template: header_live_weather_background
      - type: custom:decluttering-card
        template: header_temperature_graph
      - type: custom:decluttering-card
        template: header_main
      - type: custom:decluttering-card
        template: header_conditional_camera
      - type: entities
        entities:
          - type: custom:paper-buttons-row
            buttons:
              - icon: mdi:bed
                layout: icon|name
                name: Chambre
                style:
                  name:
                    margin-left: 18px
                    font-size: 18px
                    font-weight: 600
              - icon: mdi:close
                layout: icon
                tap_action:
                  action: navigate
                  navigation_path: /
                style:
                  icon:
                    '--mdc-icon-size': 34px
            style: |
              div.flex-box {
                margin-top: -6px;
                display: flex;
                justify-content: space-between;
                align-items: center;
              }
          - type: section
          - type: custom:light-entity-card
            entity: light.chambre
            shorten_cards: false
            consolidate_entities: true
            child_card: true
            hide_header: false
            header: Toutes les lampes
            color_wheel: true
            persist_features: true
            brightness: true
            color_temp: true
            white_value: false
            color_picker: true
            smooth_color_wheel: true
            speed: false
            intensity: false
            force_features: false
            show_slider_percent: false
            full_width_sliders: true
            brightness_icon: weather-sunny
            white_icon: file-word-box
            temperature_icon: thermometer
            speed_icon: speedometer
            intensity_icon: transit-connection-horizontal
            effects_list: false
            style: >
              ha-card {
                margin: 14px 8px !important;
              }

              ha-card > div.light-entity-card__header >
              div.light-entity-card__title {
                font-size: 14px !important;
                font-weight: 500;
              }
          - type: custom:rgb-light-card
            entity: light.chambre
            justify: around
            size: 23
            colors:
              - color_temp: 153
                brightness: 255
                icon_color: white
              - color_temp: 357
                brightness: 255
              - color_temp: 451
                brightness: 255
              - rgb_color:
                  - 255
                  - 170
                  - 0
                brightness: 255
                icon_color: linear-gradient(15deg, rgb(255,170,0), rgb(255,225,165))
              - rgb_color:
                  - 255
                  - 0
                  - 0
                brightness: 255
                icon_color: linear-gradient(15deg, red, rgb(255,100,100))
              - rgb_color:
                  - 244
                  - 38
                  - 255
                brightness: 255
                icon_color: linear-gradient(15deg, rgb(244,38,255), rgb(255,138,255))
              - rgb_color:
                  - 0
                  - 222
                  - 255
                brightness: 255
                icon_color: linear-gradient(15deg, rgb(0,222,255), rgb(140,240,255))
              - rgb_color:
                  - 0
                  - 0
                  - 255
                brightness: 255
                icon_color: linear-gradient(15deg, blue, rgb(100,100,255))
            style: |
              * {
                margin-bottom: 6px !important;
              }
          - type: section
            label: Lampes
          - entity: light.spots_dressing
            icon: mdi:hanger
          - entity: light.hue_filament_bulb_1
            name: Lampe suspendue
          - entity: light.chambre_chevet
            name: Lampes de chevet
            icon: mdi:lamp
          - entity: light.led_lit
          - type: section
            label: Volets
          - entity: cover.chambre_1
            name: Tous les volets
          - entity: cover.volet_chambre_parentale_jardin
            name: Côté jardin
          - entity: cover.volet_chambre_parentale_voisin
            name: Côté voisin
          - type: section
            label: Appareils
          - entity: sensor.hue_motion_sensor_2_temperature
            name: Température
          - entity: switch.bedroom_motion
          - entity: media_player.google_nest_mini_chambre_parentale
            name: Google Nest Mini
          - type: section
            label: Message audio
          - type: custom:vertical-stack-in-card
            cards:
              - type: horizontal-stack
                cards:
                  - type: entities
                    entities:
                      - entity: input_text.message_google_cuisine
                        name: Message à envoyer dans la cuisine et la chambre
                        card_mod:
                          style:
                            hui-generic-entity-row:
                              $: |
                                state-badge {
                                  display: none;
                                } 
                                :host {
                                  width: 194%;
                                }
                              ha-textfield $: |
                                .mdc-text-field {
                                  border: 2px solid var( --ha-card-background, var(--card-background-color, white) );
                                  border-radius: 110px !important;
                                }
                                .mdc-line-ripple::after,
                                .mdc-line-ripple::before {
                                  border-bottom-style: none !important;
                                }
                    show_header_toggle: false
                    card_mod:
                      style: |
                        "hui-generic-entity-row$state-badge": {
                          display: none;
                        }
                        ha-card {
                          background: none;
                        }
                  - type: button
                    tap_action:
                      action: call-service
                      service: script.envoi_message_google_mini_cuisine
                    show_name: false
                    show_icon: true
                    icon: mdi:cast
                    icon_height: 30px
                    card_mod:
                      style: |
                        ha-card {
                          width: 56px;
                          height: 56px !important;
                          margin-top: 16px;
                          border-radius: 100px;
                          float: right;
                        }
        style: |
          ha-card {
            margin: 14px 20px 28px !important;
          }
      - type: custom:vertical-stack-in-card
        cards:
          - type: custom:decluttering-card
            template: footer_sticky_menu
        style: |
          :host {
            position: sticky !important;
            bottom: 26px;
            margin-bottom: 10px !important;
            animation: 1.2s position ease-in-out;
          }
          @keyframes position {
            0% { bottom: -80px; }
            20% { bottom: -80px; }
            70% { bottom: 26px; }
            90% { bottom: 24px; }
            100% { bottom: 26px; }
          }
          ha-card { 
            background: none;
            border-radius: 26px !important;
          }
          :host:before {
            content: '';
            display: block;
            position: absolute;
            bottom: -26px;
            left: -8px;
            padding-right: 16px;
            height: 130px;
            width: 100%; 
            background: linear-gradient(180deg, rgba(45, 56, 76, 0) 0%, rgba(35, 46, 66, 0.85) 50%);
            pointer-events: none;
            animation: 1.2s opacity ease-in-out;
          }
          @keyframes opacity {
            0% { opacity: 0; }
            20% { opacity: 0; }
            100% { opacity: 1; }
          }
          ### The sticky position don't work with Decluttering card
          ### This is why I have to add the CSS here
          ### If you don't use the UI you can use YAML anchors instead
  - theme: noctis
    icon: ''
    path: volets
    title: Volets
    visible:
      - user: a27a825440914ad7a919367c2e53793e
      - user: aadd52d881af46bca495e279bee867bf
      - user: 10a78a75e63f4c5ba22a81742f59b925
    type: sidebar
    subview: true
    badges: []
    cards:
      - type: custom:decluttering-card
        template: header_live_weather_background
      - type: custom:decluttering-card
        template: header_temperature_graph
      - type: custom:decluttering-card
        template: header_main
      - type: custom:decluttering-card
        template: header_conditional_camera
      - type: entities
        entities:
          - type: custom:paper-buttons-row
            buttons:
              - icon: mdi:window-shutter
                layout: icon|name
                name: Volets et rideaux
                style:
                  name:
                    margin-left: 18px
                    font-size: 18px
                    font-weight: 600
              - icon: mdi:close
                layout: icon
                tap_action:
                  action: navigate
                  navigation_path: /
                style:
                  icon:
                    '--mdc-icon-size': 34px
            style: |
              div.flex-box {
                margin-top: -6px;
                display: flex;
                justify-content: space-between;
                align-items: center;
              }
          - type: section
            label: Pièce principale
          - entity: cover.piece_principale
            name: Tous
          - type: section
            label: Salle à manger
          - entity: cover.baie_vitree_2
          - entity: cover.baie_vitree
          - type: section
            label: Salon
          - entity: cover.haut_canape
          - entity: cover.stores_salon
          - type: section
            label: Cuisine
          - entity: cover.cuisine
          - type: section
            label: Chambre parentale
          - entity: cover.chambre_1_droite
            name: Côté voisins
          - entity: cover.chambre_1_gauche
            name: Côté jardin
          - type: section
            label: Chambre 2
          - entity: cover.chambre_2_droite
            name: Côté voisins
          - entity: cover.chambre_2_gauche
            name: Côté jardin
          - type: section
            label: Autres
          - entity: cover.couloir
          - entity: cover.salle_de_bain
          - entity: cover.garage_door
          - type: section
            label: Réglages
          - entity: input_boolean.volets_automatique
            name: Mode automatique
            icon: mdi:auto-fix
          - entity: automation.volets_fermeture_si_il_fait_ensoleille
            name: Mode soleil automatique
            icon: mdi:weather-sunny-alert
          - entity: input_boolean.mode_soleil_intensif
            name: Mode soleil intensif
        style: |
          ha-card {
            margin: 14px 20px 28px !important;
          }
      - type: custom:vertical-stack-in-card
        cards:
          - type: custom:decluttering-card
            template: footer_sticky_menu
        style: |
          :host {
            position: sticky !important;
            bottom: 26px;
            margin-bottom: 10px !important;
            animation: 1.2s position ease-in-out;
          }
          @keyframes position {
            0% { bottom: -80px; }
            20% { bottom: -80px; }
            70% { bottom: 26px; }
            90% { bottom: 24px; }
            100% { bottom: 26px; }
          }
          ha-card { 
            background: none;
            border-radius: 26px !important;
          }
          :host:before {
            content: '';
            display: block;
            position: absolute;
            bottom: -26px;
            left: -8px;
            padding-right: 16px;
            height: 130px;
            width: 100%; 
            background: linear-gradient(180deg, rgba(45, 56, 76, 0) 0%, rgba(35, 46, 66, 0.85) 50%);
            pointer-events: none;
            animation: 1.2s opacity ease-in-out;
          }
          @keyframes opacity {
            0% { opacity: 0; }
            20% { opacity: 0; }
            100% { opacity: 1; }
          }
          ### The sticky position don't work with Decluttering card
          ### This is why I have to add the CSS here
          ### If you don't use the UI you can use YAML anchors instead
  - theme: noctis
    icon: ''
    path: liste
    title: Liste
    visible:
      - user: a27a825440914ad7a919367c2e53793e
      - user: aadd52d881af46bca495e279bee867bf
      - user: 10a78a75e63f4c5ba22a81742f59b925
    type: sidebar
    subview: true
    badges: []
    cards:
      - type: custom:decluttering-card
        template: header_live_weather_background
      - type: custom:decluttering-card
        template: header_temperature_graph
      - type: custom:decluttering-card
        template: header_main
      - type: custom:decluttering-card
        template: header_conditional_camera
      - type: custom:vertical-stack-in-card
        cards:
          - type: entities
            entities:
              - type: custom:paper-buttons-row
                buttons:
                  - icon: mdi:cart
                    layout: icon|name
                    name: Liste
                    style:
                      name:
                        margin-left: 18px
                        font-size: 18px
                        font-weight: 600
                  - icon: mdi:close
                    layout: icon
                    tap_action:
                      action: navigate
                      navigation_path: /
                    style:
                      icon:
                        '--mdc-icon-size': 34px
                style: |
                  div.flex-box {
                    margin-top: -6px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                  }
              - type: section
          - type: shopping-list
            style: |
              ha-card {
                margin: -16px 0 0 !important;
              }
        style: |
          ha-card {
            margin: 14px 20px 28px !important;
          }
      - type: custom:vertical-stack-in-card
        cards:
          - type: custom:decluttering-card
            template: footer_sticky_menu
        style: |
          :host {
            position: sticky !important;
            bottom: 26px;
            margin-bottom: 10px !important;
            animation: 1.2s position ease-in-out;
          }
          @keyframes position {
            0% { bottom: -80px; }
            20% { bottom: -80px; }
            70% { bottom: 26px; }
            90% { bottom: 24px; }
            100% { bottom: 26px; }
          }
          ha-card { 
            background: none;
            border-radius: 26px !important;
          }
          :host:before {
            content: '';
            display: block;
            position: absolute;
            bottom: -26px;
            left: -8px;
            padding-right: 16px;
            height: 130px;
            width: 100%; 
            background: linear-gradient(180deg, rgba(45, 56, 76, 0) 0%, rgba(35, 46, 66, 0.85) 50%);
            pointer-events: none;
            animation: 1.2s opacity ease-in-out;
          }
          @keyframes opacity {
            0% { opacity: 0; }
            20% { opacity: 0; }
            100% { opacity: 1; }
          }
          ### The sticky position don't work with Decluttering card
          ### This is why I have to add the CSS here
          ### If you don't use the UI you can use YAML anchors instead
  - theme: noctis
    icon: ''
    path: securite
    title: Sécurité
    visible:
      - user: a27a825440914ad7a919367c2e53793e
      - user: aadd52d881af46bca495e279bee867bf
      - user: 10a78a75e63f4c5ba22a81742f59b925
    type: sidebar
    subview: true
    badges: []
    cards:
      - type: custom:decluttering-card
        template: header_live_weather_background
      - type: custom:decluttering-card
        template: header_temperature_graph
      - type: custom:decluttering-card
        template: header_main
      - type: custom:vertical-stack-in-card
        cards:
          - type: entities
            entities:
              - type: custom:paper-buttons-row
                buttons:
                  - icon: mdi:video
                    layout: icon|name
                    name: Sécurité
                    style:
                      name:
                        margin-left: 18px
                        font-size: 18px
                        font-weight: 600
                  - icon: mdi:close
                    layout: icon
                    tap_action:
                      action: navigate
                      navigation_path: /
                    style:
                      icon:
                        '--mdc-icon-size': 34px
                style: |
                  div.flex-box {
                    margin-top: -6px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                  }
          - type: custom:vertical-stack-in-card
            cards:
              - type: custom:frigate-card
                cameras:
                  - camera_entity: camera.sonnette_pir
                    live_provider: frigate-jsmpeg
                    title: Entrée
                view:
                  update_force: true
                menu:
                  buttons:
                    frigate:
                      enabled: false
                  style: none
            style: |
              ha-card {
                margin: 0px 20px;
                overflow: hidden !important;
                border-radius: 16px !important;
              }
          - type: custom:vertical-stack-in-card
            cards:
              - type: custom:frigate-card
                cameras:
                  - camera_entity: camera.cuisine_pir
                    live_provider: frigate-jsmpeg
                    title: Pièce principale
                view:
                  update_force: true
                menu:
                  buttons:
                    frigate:
                      enabled: false
                  style: none
            style: |
              ha-card {
                margin: 15px 20px 8px;
                overflow: hidden !important;
                border-radius: 16px !important;
              }
          - type: custom:vertical-stack-in-card
            cards:
              - type: horizontal-stack
                cards:
                  - type: entities
                    entities:
                      - entity: input_text.message_google_cuisine
                        name: Message à transmettre dans la maison
                        card_mod:
                          style:
                            hui-generic-entity-row:
                              $: |
                                state-badge {
                                  display: none;
                                } 
                                :host {
                                  width: 194%;
                                }
                              ha-textfield $: |
                                .mdc-text-field {
                                  border: 2px solid var( --ha-card-background, var(--card-background-color, white) );
                                  border-radius: 110px !important;
                                }
                                .mdc-line-ripple::after,
                                .mdc-line-ripple::before {
                                  border-bottom-style: none !important;
                                }
                    show_header_toggle: false
                    card_mod:
                      style: |
                        "hui-generic-entity-row$state-badge": {
                          display: none;
                        }
                        ha-card {
                          background: none;
                        }
                  - type: button
                    tap_action:
                      action: call-service
                      service: script.envoi_message_google_mini_cuisine
                    show_name: false
                    show_icon: true
                    icon: mdi:cast
                    icon_height: 30px
                    card_mod:
                      style: |
                        ha-card {
                          width: 56px;
                          height: 56px !important;
                          margin-top: 16px;
                          border-radius: 100px;
                          float: right;
                        }
          - type: entities
            entities:
              - type: section
                label: Dernières présences
            style: |
              * { 
                padding: 0 0 0 4px !important;
              }
          - type: horizontal-stack
            cards:
              - type: picture-glance
                aspect_ratio: 100%
                camera_image: camera.sonnette_pir_car
                camera_view: live
                entities: []
                style: |
                  ha-card { 
                    margin: 0px 0 0 20px;
                    border-radius: 10px !important;

                  }
                  ha-card > div.box {
                    display: none;
                  }
              - type: picture-glance
                aspect_ratio: 100%
                camera_image: camera.sonnette_pir_person
                camera_view: live
                entities: []
                style: |
                  ha-card { 
                    margin: 0px 10px;
                    border-radius: 10px !important;

                  }
                  ha-card > div.box {
                    display: none;
                  }
              - type: picture-glance
                aspect_ratio: 100%
                camera_image: camera.cuisine_pir_person
                camera_view: live
                entities: []
                style: |
                  ha-card { 
                    margin: 0px 20px 0 0;
                    border-radius: 10px !important;

                  }
                  ha-card > div.box {
                    display: none;
                  }
          - type: entities
            entities:
              - type: section
                label: Derniers enregistrements
            style: |
              * { 
                padding: 0 0 0 4px !important;
              }
          - type: custom:vertical-stack-in-card
            cards:
              - type: custom:frigate-card
                cameras:
                  - camera_entity: camera.sonnette_pir
                view:
                  default: clips
                menu:
                  style: none
                  buttons:
                    frigate:
                      enabled: false
                    cameras:
                      enabled: false
                    frigate_ui:
                      enabled: false
                live:
                  draggable: true
                event_gallery:
                  controls:
                    thumbnails:
                      size: 100
                      show_details: false
                      show_favorite_control: false
                      show_timeline_control: false
                dimensions:
                  aspect_ratio: '16:8'
            style: |
              ha-card { 
                margin: 14px 20px 0 20px !important;
                background: none;
                box-shadow: none;
              }
              .type-custom-vertical-stack-in-card {
                overflow: visible !important;
              }
          - type: entities
            entities:
              - type: section
                label: Réglages
              - entity: >-
                  automation.securite_notification_google_home_en_cas_de_presence_sur_une_camera
                name: Notifications présence audio
                icon: mdi:volume-high
              - entity: automation.bouton_sonnette_sonnerie_dans_la_chambre
                name: Notifications sonnette audio
                icon: mdi:volume-high
              - entity: automation.securite_notification_en_cas_de_mouvements
                name: Notifications présence smartphones
                icon: mdi:square-rounded-badge-outline
              - entity: automation.securite_simulation_presence_si_absent_2
                name: Simulation de présence
                icon: mdi:lightbulb-auto
              - type: section
                label: Capteurs de présences
              - entity: binary_sensor.presence_maison
                name: Maison - Général
              - entity: binary_sensor.presence_devant_maison
                name: Avant de la maison
              - entity: binary_sensor.presence_hall_entree
                name: Hall d'entrée
              - entity: binary_sensor.presence_cuisine
                name: Cuisine
              - entity: binary_sensor.presence_salle_a_manger
                name: Salle à manger
              - entity: binary_sensor.presence_salon
                name: Salon
              - entity: binary_sensor.presence_couloir
                name: Couloir étage
              - entity: binary_sensor.presence_chambre_parentale
                name: Chambre parentale
              - entity: binary_sensor.presence_salle_de_douche
                name: Salle de douche
        style: |
          ha-card {
            margin: 14px 20px 28px !important;
          }
      - type: custom:vertical-stack-in-card
        cards:
          - type: custom:decluttering-card
            template: footer_sticky_menu
        style: |
          :host {
            position: sticky !important;
            bottom: 26px;
            margin-bottom: 10px !important;
            animation: 1.2s position ease-in-out;
          }
          @keyframes position {
            0% { bottom: -80px; }
            20% { bottom: -80px; }
            70% { bottom: 26px; }
            90% { bottom: 24px; }
            100% { bottom: 26px; }
          }
          ha-card { 
            background: none;
            border-radius: 26px !important;
          }
          :host:before {
            content: '';
            display: block;
            position: absolute;
            bottom: -26px;
            left: -8px;
            padding-right: 16px;
            height: 130px;
            width: 100%; 
            background: linear-gradient(180deg, rgba(45, 56, 76, 0) 0%, rgba(35, 46, 66, 0.85) 50%);
            pointer-events: none;
            animation: 1.2s opacity ease-in-out;
          }
          @keyframes opacity {
            0% { opacity: 0; }
            20% { opacity: 0; }
            100% { opacity: 1; }
          }
          ### The sticky position don't work with Decluttering card
          ### This is why I have to add the CSS here
          ### If you don't use the UI you can use YAML anchors instead
  - theme: noctis
    icon: ''
    path: reglages
    title: Réglages
    visible:
      - user: a27a825440914ad7a919367c2e53793e
      - user: aadd52d881af46bca495e279bee867bf
      - user: 10a78a75e63f4c5ba22a81742f59b925
    type: sidebar
    subview: true
    badges: []
    cards:
      - type: custom:decluttering-card
        template: header_live_weather_background
      - type: custom:decluttering-card
        template: header_temperature_graph
      - type: custom:decluttering-card
        template: header_main
      - type: custom:decluttering-card
        template: header_conditional_camera
      - type: entities
        entities:
          - type: custom:paper-buttons-row
            buttons:
              - icon: mdi:cog
                layout: icon|name
                name: Réglages et divers
                style:
                  name:
                    margin-left: 18px
                    font-size: 18px
                    font-weight: 600
              - icon: mdi:close
                layout: icon
                tap_action:
                  action: navigate
                  navigation_path: /
                style:
                  icon:
                    '--mdc-icon-size': 34px
            style: |
              div.flex-box {
                margin-top: -6px;
                display: flex;
                justify-content: space-between;
                align-items: center;
              }
          - type: section
            label: Automatisations
          - entity: input_boolean.volets_automatique
            name: Volets
            icon: mdi:window-shutter
          - entity: automation.volets_fermeture_si_il_fait_ensoleille
            name: Volets - Mode soleil
            icon: mdi:weather-sunny-alert
          - entity: automation.nouvelle_automatisation_2
            name: Aspirateurs
            icon: hass:robot-vacuum
          - entity: switch.ambiance_auto
            name: Lampes pièce principale
            icon: mdi:lightbulb-auto
          - entity: automation.allume_progressivement_la_chambre
            name: Lampes chambre
            icon: hass:lightbulb-auto
          - entity: automation.capteur_dressing_allumage
            name: Lampes dressing
            icon: hass:lightbulb-auto
          - entity: automation.capteur_cuisiniere_allumage_extinction
            name: Lampes hotte
            icon: hass:lightbulb-auto
          - entity: input_boolean.lampes_facade_auto
            name: Lampes façade
            icon: hass:lightbulb-auto
          - entity: automation.turn_off_bedroom_at_night_no_motion
            name: Éteins la chambre la nuit
            icon: hass:bed
          - entity: input_boolean.mode_nuit
            name: Mode nuit
          - type: section
            label: Annonces vocales
          - entity: input_boolean.mode_silencieux
            name: Tout silencieux
            icon: mdi:volume-off
          - entity: automation.nouvelle_automatisation_4
            name: Rappel poubelles
            icon: mdi:message-badge
          - entity: automation.annonce_google_home_arrosage_plantes
            name: Rappel arrosage plantes
            icon: mdi:message-badge
          - entity: automation.geraldine_est_rentree_tts
            name: Géraldine est rentrée
            icon: mdi:message-badge
          - entity: automation.quentin_est_rentre_tts
            name: Quentin est rentré
            icon: mdi:message-badge
          - type: section
            label: Home Cinema
          - entity: input_number.subwoofer
          - entity: automation.denon_auto_subwoofer_level
            name: Volume subwoofer auto
            icon: mdi:thermostat-box-auto
          - entity: automation.launch_deezer_script_when_i_m_home
            name: Musique auto
            icon: hass:music
          - entity: automation.denon_source_automatique
            name: Source audio auto
            icon: mdi:monitor-speaker
          - type: section
            label: Autres lampes et appareils
          - entity: light.spots_facade
            name: Lampes façade
          - entity: light.couloir_etage
            name: Lampe boule couloir
          - entity: light.vmc
            name: VMC - Puissance Max
          - entity: switch.megaboom_3
            type: custom:multiple-entity-row
            name: Salle de bain
            toggle: true
            state_color: true
            entities:
              - entity: sensor.mebaboom_3_battery
                name: false
          - type: section
            label: Capteurs
          - entity: binary_sensor.darkness_sensor_2
            name: Obscurité pièce principale
          - entity: binary_sensor.darkness_sensor
            name: Obscurité chambre
        style: |
          ha-card {
            margin: 14px 20px 28px !important;
          }
      - type: custom:vertical-stack-in-card
        cards:
          - type: custom:decluttering-card
            template: footer_sticky_menu
        style: |
          :host {
            position: sticky !important;
            bottom: 26px;
            margin-bottom: 10px !important;
            animation: 1.2s position ease-in-out;
          }
          @keyframes position {
            0% { bottom: -80px; }
            20% { bottom: -80px; }
            70% { bottom: 26px; }
            90% { bottom: 24px; }
            100% { bottom: 26px; }
          }
          ha-card { 
            background: none;
            border-radius: 26px !important;
          }
          :host:before {
            content: '';
            display: block;
            position: absolute;
            bottom: -26px;
            left: -8px;
            padding-right: 16px;
            height: 130px;
            width: 100%; 
            background: linear-gradient(180deg, rgba(45, 56, 76, 0) 0%, rgba(35, 46, 66, 0.85) 50%);
            pointer-events: none;
            animation: 1.2s opacity ease-in-out;
          }
          @keyframes opacity {
            0% { opacity: 0; }
            20% { opacity: 0; }
            100% { opacity: 1; }
          }
          ### The sticky position don't work with Decluttering card
          ### This is why I have to add the CSS here
          ### If you don't use the UI you can use YAML anchors instead
  - theme: noctis
    icon: ''
    path: aspirateur_rez_de_chaussee
    title: Aspirateur rez-de-chaussée
    visible:
      - user: a27a825440914ad7a919367c2e53793e
      - user: aadd52d881af46bca495e279bee867bf
      - user: 10a78a75e63f4c5ba22a81742f59b925
    type: sidebar
    subview: true
    badges: []
    cards:
      - type: custom:decluttering-card
        template: header_live_weather_background
      - type: custom:decluttering-card
        template: header_temperature_graph
      - type: custom:decluttering-card
        template: header_main
      - type: custom:decluttering-card
        template: header_conditional_camera
      - type: entities
        entities:
          - type: custom:paper-buttons-row
            buttons:
              - icon: mdi:robot-vacuum
                layout: icon|name
                name: Aspirateur - Rez-de-chaussée
                style:
                  name:
                    margin-left: 18px
                    font-size: 18px
                    font-weight: 600
              - icon: mdi:close
                layout: icon
                tap_action:
                  action: navigate
                  navigation_path: /
                style:
                  icon:
                    '--mdc-icon-size': 34px
            style: |
              div.flex-box {
                margin-top: -6px;
                display: flex;
                justify-content: space-between;
                align-items: center;
              }
          - type: custom:xiaomi-vacuum-map-card
            language: fr
            preset_name: Rez-de-chaussée
            entity: vacuum.aspirateur_rez_de_chaussee
            map_source:
              camera: camera.map_roborock_rez_de_chaussee
              crop:
                top: 160
                right: 140
                left: 150
                bottom: 170
            map_locked: true
            calibration_source:
              camera: true
            vacuum_platform: default
            map_modes:
              - template: vacuum_clean_segment
                predefined_selections:
                  - id: '17'
                    icon:
                      name: mdi:fridge
                      x: 21950
                      'y': 30405
                    label:
                      text: Cuisine
                      x: 21950
                      'y': 30405
                      offset_y: 30
                  - id: '18'
                    icon:
                      name: mdi:sofa
                      x: 26200
                      'y': 27300
                    label:
                      text: Salon
                      x: 26200
                      'y': 27300
                      offset_y: 30
                  - id: '19'
                    icon:
                      name: mdi:shoe-print
                      x: 21205
                      'y': 27075
                    label:
                      text: Entrée
                      x: 21205
                      'y': 27075
                      offset_y: 30
                  - id: '20'
                    icon:
                      name: mdi:paper-roll
                      x: 23275
                      'y': 27800
                    label:
                      text: WC
                      x: 23275
                      'y': 27800
                      offset_y: 30
                  - id: '21'
                    icon:
                      name: mdi:silverware-fork-knife
                      x: 26200
                      'y': 30605
                    label:
                      text: Salle à manger
                      x: 26200
                      'y': 30605
                      offset_y: 30
              - template: vacuum_clean_zone
              - template: vacuum_goto
            style: >
              ha-card > div.controls-wrapper > div.vacuum-controls > div {

                color: var(--map-card-internal-primary-color);

              }

              ha-card > div.controls-wrapper > div.map-controls-wrapper > div >
              div {
                background: white;
              }

              .room-icon-wrapper {
                --map-card-internal-room-icon-color: white;
                background: var(--map-card-internal-primary-color) !important;
              }

              text {
                text-shadow: rgb(43, 191, 255) 1px 0px 0px, rgb(43, 191, 255) 0.540302px 0.841471px 0px, rgb(43, 191, 255) -0.416147px 0.909297px 0px, rgb(43, 191, 255) -0.989992px 0.14112px 0px, rgb(43, 191, 255) -0.653644px -0.756802px 0px, rgb(43, 191, 255) 0.283662px -0.958924px 0px, rgb(43, 191, 255) 0.96017px -0.279415px 0px;
              }
        style: |
          ha-card {
            margin: 14px 20px 28px !important;
          }
      - type: custom:vertical-stack-in-card
        cards:
          - type: custom:decluttering-card
            template: footer_sticky_menu
        style: |
          :host {
            position: sticky !important;
            bottom: 26px;
            margin-bottom: 10px !important;
            animation: 1.2s position ease-in-out;
          }
          @keyframes position {
            0% { bottom: -80px; }
            20% { bottom: -80px; }
            70% { bottom: 26px; }
            90% { bottom: 24px; }
            100% { bottom: 26px; }
          }
          ha-card { 
            background: none;
            border-radius: 26px !important;
            margin-top: 70%;
          }
          :host:before {
            content: '';
            display: block;
            position: absolute;
            bottom: -26px;
            left: -8px;
            padding-right: 16px;
            height: 130px;
            width: 100%; 
            background: linear-gradient(180deg, rgba(45, 56, 76, 0) 0%, rgba(35, 46, 66, 0.85) 50%);
            pointer-events: none;
            animation: 1.2s opacity ease-in-out;
          }
          @keyframes opacity {
            0% { opacity: 0; }
            20% { opacity: 0; }
            100% { opacity: 1; }
          }
          ### The sticky position don't work with Decluttering card
          ### This is why I have to add the CSS here
          ### If you don't use the UI you can use YAML anchors instead
  - theme: noctis
    icon: ''
    path: aspirateur_etage
    title: Aspirateur étage
    visible:
      - user: a27a825440914ad7a919367c2e53793e
      - user: aadd52d881af46bca495e279bee867bf
      - user: 10a78a75e63f4c5ba22a81742f59b925
    type: sidebar
    subview: true
    badges: []
    cards:
      - type: custom:decluttering-card
        template: header_live_weather_background
      - type: custom:decluttering-card
        template: header_temperature_graph
      - type: custom:decluttering-card
        template: header_main
      - type: custom:decluttering-card
        template: header_conditional_camera
      - type: entities
        entities:
          - type: custom:paper-buttons-row
            buttons:
              - icon: mdi:robot-vacuum
                layout: icon|name
                name: Aspirateur - Étage
                style:
                  name:
                    margin-left: 18px
                    font-size: 18px
                    font-weight: 600
              - icon: mdi:close
                layout: icon
                tap_action:
                  action: navigate
                  navigation_path: /
                style:
                  icon:
                    '--mdc-icon-size': 34px
            style: |
              div.flex-box {
                margin-top: -6px;
                display: flex;
                justify-content: space-between;
                align-items: center;
              }
          - type: custom:xiaomi-vacuum-map-card
            language: fr
            preset_name: Rez-de-chaussée
            entity: vacuum.xiaomi_vacuum_cleaner
            map_source:
              camera: camera.map_roborock_etage
            map_locked: false
            calibration_source:
              camera: true
            vacuum_platform: default
            style: >
              ha-card > div.controls-wrapper > div.vacuum-controls > div {

                color: var(--map-card-internal-primary-color);

              }

              ha-card > div.controls-wrapper > div.map-controls-wrapper > div >
              div {
                background: white;
              }
        style: |
          ha-card {
            margin: 14px 20px 28px !important;
          }
      - type: custom:vertical-stack-in-card
        cards:
          - type: custom:decluttering-card
            template: footer_sticky_menu
        style: |
          :host {
            position: sticky !important;
            bottom: 26px;
            margin-bottom: 10px !important;
            animation: 1.2s position ease-in-out;
          }
          @keyframes position {
            0% { bottom: -80px; }
            20% { bottom: -80px; }
            70% { bottom: 26px; }
            90% { bottom: 24px; }
            100% { bottom: 26px; }
          }
          ha-card { 
            background: none;
            border-radius: 26px !important;
            margin-top: 70%;
          }
          :host:before {
            content: '';
            display: block;
            position: absolute;
            bottom: -26px;
            left: -8px;
            padding-right: 16px;
            height: 130px;
            width: 100%; 
            background: linear-gradient(180deg, rgba(45, 56, 76, 0) 0%, rgba(35, 46, 66, 0.85) 50%);
            pointer-events: none;
            animation: 1.2s opacity ease-in-out;
          }
          @keyframes opacity {
            0% { opacity: 0; }
            20% { opacity: 0; }
            100% { opacity: 1; }
          }
          ### The sticky position don't work with Decluttering card
          ### This is why I have to add the CSS here
          ### If you don't use the UI you can use YAML anchors instead
  - theme: noctis
    icon: ''
    path: quentin
    title: Quentin
    visible:
      - user: a27a825440914ad7a919367c2e53793e
      - user: aadd52d881af46bca495e279bee867bf
      - user: 10a78a75e63f4c5ba22a81742f59b925
    type: sidebar
    subview: true
    badges: []
    cards:
      - type: custom:decluttering-card
        template: header_live_weather_background
      - type: custom:decluttering-card
        template: header_temperature_graph
      - type: custom:decluttering-card
        template: header_main
      - type: custom:decluttering-card
        template: header_conditional_camera
      - type: entities
        entities:
          - type: custom:paper-buttons-row
            buttons:
              - icon: mdi:account
                layout: icon|name
                name: Quentin
                style:
                  name:
                    margin-left: 18px
                    font-size: 18px
                    font-weight: 600
              - icon: mdi:close
                layout: icon
                tap_action:
                  action: navigate
                  navigation_path: /
                style:
                  icon:
                    '--mdc-icon-size': 34px
            style: |
              div.flex-box {
                margin-top: -6px;
                display: flex;
                justify-content: space-between;
                align-items: center;
              }
          - type: section
          - entity: sensor.quentin_temps_d_absence
            type: custom:multiple-entity-row
            name: Présence
            state_header: Absent
            secondary_info: Dernières 24h
            entities:
              - entity: sensor.quentin_temps_a_domicile
                name: Domicile
          - type: section
          - entity: sensor.mi_9_battery_level
            type: custom:multiple-entity-row
            name: État du téléphone
            state_header: Batterie
          - type: section
          - entity: sensor.mi_9_geocoded_location
            type: custom:multiple-entity-row
            name: Localisation
            styles:
              text-align: right
          - type: section
          - type: custom:vertical-stack-in-card
            cards:
              - type: history-graph
                entities:
                  - entity: sensor.quentin_presence
                    name: Présence
                hours_to_show: 24
                refresh_interval: 0
                style: |
                  ha-card { 
                    margin: -10px -10px 6px;
                  }
              - type: map
                entities:
                  - entity: person.quentin
                dark_mode: false
                style: |
                  ha-card { 
                    border-radius: 28px !important;
                  }
        style: |
          ha-card {
            margin: 14px 20px 28px !important;
          }
      - type: custom:vertical-stack-in-card
        cards:
          - type: custom:decluttering-card
            template: footer_sticky_menu
        style: |
          :host {
            position: sticky !important;
            bottom: 26px;
            margin-bottom: 10px !important;
            animation: 1.2s position ease-in-out;
          }
          @keyframes position {
            0% { bottom: -80px; }
            20% { bottom: -80px; }
            70% { bottom: 26px; }
            90% { bottom: 24px; }
            100% { bottom: 26px; }
          }
          ha-card { 
            background: none;
            border-radius: 26px !important;
            margin-top: 50%;
          }
          :host:before {
            content: '';
            display: block;
            position: absolute;
            bottom: -26px;
            left: -8px;
            padding-right: 16px;
            height: 130px;
            width: 100%; 
            background: linear-gradient(180deg, rgba(45, 56, 76, 0) 0%, rgba(35, 46, 66, 0.85) 50%);
            pointer-events: none;
            animation: 1.2s opacity ease-in-out;
          }
          @keyframes opacity {
            0% { opacity: 0; }
            20% { opacity: 0; }
            100% { opacity: 1; }
          }
          ### The sticky position don't work with Decluttering card
          ### This is why I have to add the CSS here
          ### If you don't use the UI you can use YAML anchors instead
  - theme: noctis
    icon: ''
    path: geraldine
    title: Géraldine
    visible:
      - user: a27a825440914ad7a919367c2e53793e
      - user: aadd52d881af46bca495e279bee867bf
      - user: 10a78a75e63f4c5ba22a81742f59b925
    type: sidebar
    subview: true
    badges: []
    cards:
      - type: custom:decluttering-card
        template: header_live_weather_background
      - type: custom:decluttering-card
        template: header_temperature_graph
      - type: custom:decluttering-card
        template: header_main
      - type: custom:decluttering-card
        template: header_conditional_camera
      - type: entities
        entities:
          - type: custom:paper-buttons-row
            buttons:
              - icon: mdi:account
                layout: icon|name
                name: Géraldine
                style:
                  name:
                    margin-left: 18px
                    font-size: 18px
                    font-weight: 600
              - icon: mdi:close
                layout: icon
                tap_action:
                  action: navigate
                  navigation_path: /
                style:
                  icon:
                    '--mdc-icon-size': 34px
            style: |
              div.flex-box {
                margin-top: -6px;
                display: flex;
                justify-content: space-between;
                align-items: center;
              }
          - type: section
          - entity: sensor.geraldine_temps_d_absence
            type: custom:multiple-entity-row
            name: Présence
            state_header: Absente
            secondary_info: Dernières 24h
            entities:
              - entity: sensor.geraldine_temps_a_domicile
                name: Domicile
          - type: section
          - entity: sensor.iphone_de_geraldine_battery_level
            type: custom:multiple-entity-row
            name: État du téléphone
            state_header: Batterie
            entities:
              - entity: sensor.iphone_de_geraldine_activity
                name: Activité
          - type: section
          - entity: sensor.iphone_de_geraldine_geocoded_location
            type: custom:multiple-entity-row
            name: Localisation
            styles:
              text-align: right
          - type: section
          - type: custom:vertical-stack-in-card
            cards:
              - type: history-graph
                entities:
                  - entity: sensor.geraldine_presence
                    name: Géraldine
                    title: Géraldine
                hours_to_show: 24
                refresh_interval: 0
                style: |
                  ha-card { 
                    margin: -10px -10px 6px;
                  }
              - type: map
                entities:
                  - entity: person.geraldine2
                dark_mode: false
                style: |
                  ha-card { 
                    border-radius: 28px !important;
                  }
        style: |
          ha-card {
            margin: 14px 20px 28px !important;
          }
      - type: custom:vertical-stack-in-card
        cards:
          - type: custom:decluttering-card
            template: footer_sticky_menu
        style: |
          :host {
            position: sticky !important;
            bottom: 26px;
            margin-bottom: 10px !important;
            animation: 1.2s position ease-in-out;
          }
          @keyframes position {
            0% { bottom: -80px; }
            20% { bottom: -80px; }
            70% { bottom: 26px; }
            90% { bottom: 24px; }
            100% { bottom: 26px; }
          }
          ha-card { 
            background: none;
            border-radius: 26px !important;
            margin-top: 50%;
          }
          :host:before {
            content: '';
            display: block;
            position: absolute;
            bottom: -26px;
            left: -8px;
            padding-right: 16px;
            height: 130px;
            width: 100%; 
            background: linear-gradient(180deg, rgba(45, 56, 76, 0) 0%, rgba(35, 46, 66, 0.85) 50%);
            pointer-events: none;
            animation: 1.2s opacity ease-in-out;
          }
          @keyframes opacity {
            0% { opacity: 0; }
            20% { opacity: 0; }
            100% { opacity: 1; }
          }
          ### The sticky position don't work with Decluttering card
          ### This is why I have to add the CSS here
          ### If you don't use the UI you can use YAML anchors instead
  - theme: noctis
    icon: ''
    path: salle_de_douche
    title: Salle de douche
    visible:
      - user: a27a825440914ad7a919367c2e53793e
      - user: aadd52d881af46bca495e279bee867bf
      - user: 10a78a75e63f4c5ba22a81742f59b925
    type: sidebar
    subview: true
    badges: []
    cards:
      - type: custom:decluttering-card
        template: header_live_weather_background
      - type: custom:decluttering-card
        template: header_temperature_graph
      - type: custom:decluttering-card
        template: header_main
      - type: custom:decluttering-card
        template: header_conditional_camera
      - type: entities
        entities:
          - type: custom:paper-buttons-row
            buttons:
              - icon: mdi:shower-head
                layout: icon|name
                name: Salle de douche
                style:
                  name:
                    margin-left: 18px
                    font-size: 18px
                    font-weight: 600
              - icon: mdi:close
                layout: icon
                tap_action:
                  action: navigate
                  navigation_path: /
                style:
                  icon:
                    '--mdc-icon-size': 34px
            style: |
              div.flex-box {
                margin-top: -6px;
                display: flex;
                justify-content: space-between;
                align-items: center;
              }
          - type: section
          - type: custom:light-entity-card
            entity: light.salle_de_bain
            shorten_cards: false
            consolidate_entities: true
            child_card: true
            hide_header: false
            header: Toutes les lampes
            color_wheel: true
            persist_features: true
            brightness: true
            color_temp: true
            white_value: false
            color_picker: true
            smooth_color_wheel: true
            speed: false
            intensity: false
            force_features: false
            show_slider_percent: false
            full_width_sliders: true
            brightness_icon: weather-sunny
            white_icon: file-word-box
            temperature_icon: thermometer
            speed_icon: speedometer
            intensity_icon: transit-connection-horizontal
            effects_list: false
            style: >
              ha-card {
                margin: 14px 8px !important;
              }

              ha-card > div.light-entity-card__header >
              div.light-entity-card__title {
                font-size: 14px !important;
                font-weight: 500;
              }
          - type: custom:rgb-light-card
            entity: light.salle_de_bain
            justify: around
            size: 23
            colors:
              - color_temp: 153
                brightness: 255
                icon_color: white
              - color_temp: 357
                brightness: 255
              - color_temp: 451
                brightness: 255
              - rgb_color:
                  - 255
                  - 170
                  - 0
                brightness: 255
                icon_color: linear-gradient(15deg, rgb(255,170,0), rgb(255,225,165))
              - rgb_color:
                  - 255
                  - 0
                  - 0
                brightness: 255
                icon_color: linear-gradient(15deg, red, rgb(255,100,100))
              - rgb_color:
                  - 244
                  - 38
                  - 255
                brightness: 255
                icon_color: linear-gradient(15deg, rgb(244,38,255), rgb(255,138,255))
              - rgb_color:
                  - 0
                  - 222
                  - 255
                brightness: 255
                icon_color: linear-gradient(15deg, rgb(0,222,255), rgb(140,240,255))
              - rgb_color:
                  - 0
                  - 0
                  - 255
                brightness: 255
                icon_color: linear-gradient(15deg, blue, rgb(100,100,255))
            style: |
              * {
                margin-bottom: 6px !important;
              }
          - type: section
            label: Lampes
          - entity: light.le_plafond_de_la_salle_de_bain
            name: Plafond
          - entity: light.spots_de_la_salle_de_bain
            name: Spots
          - entity: light.led_salle_de_douche
            name: LED
          - type: section
            label: Appareils
          - entity: sensor.salle_de_bain_temperature
            name: Température
          - type: section
            label: Musique
          - entity: input_select.musique_salle_de_bain
            name: Playlist
          - entity: switch.musique_salle_de_douche
            name: Lancer la playlist
          - entity: media_player.salle_de_douche
            name: Google Nest Audio
        style: |
          ha-card {
            margin: 14px 20px 28px !important;
          }
      - type: custom:vertical-stack-in-card
        cards:
          - type: custom:decluttering-card
            template: footer_sticky_menu
        style: |
          :host {
            position: sticky !important;
            bottom: 26px;
            margin-bottom: 10px !important;
            animation: 1.2s position ease-in-out;
          }
          @keyframes position {
            0% { bottom: -80px; }
            20% { bottom: -80px; }
            70% { bottom: 26px; }
            90% { bottom: 24px; }
            100% { bottom: 26px; }
          }
          ha-card { 
            background: none;
            border-radius: 26px !important;
          }
          :host:before {
            content: '';
            display: block;
            position: absolute;
            bottom: -26px;
            left: -8px;
            padding-right: 16px;
            height: 130px;
            width: 100%; 
            background: linear-gradient(180deg, rgba(45, 56, 76, 0) 0%, rgba(35, 46, 66, 0.85) 50%);
            pointer-events: none;
            animation: 1.2s opacity ease-in-out;
          }
          @keyframes opacity {
            0% { opacity: 0; }
            20% { opacity: 0; }
            100% { opacity: 1; }
          }
          ### The sticky position don't work with Decluttering card
          ### This is why I have to add the CSS here
          ### If you don't use the UI you can use YAML anchors instead
  - theme: noctis
    icon: ''
    path: energies
    title: Énergies
    visible:
      - user: a27a825440914ad7a919367c2e53793e
      - user: aadd52d881af46bca495e279bee867bf
      - user: 10a78a75e63f4c5ba22a81742f59b925
    type: sidebar
    subview: true
    badges: []
    cards:
      - type: custom:decluttering-card
        template: header_live_weather_background
      - type: custom:decluttering-card
        template: header_temperature_graph
      - type: custom:decluttering-card
        template: header_main
      - type: custom:decluttering-card
        template: header_conditional_camera
      - type: entities
        entities:
          - type: custom:paper-buttons-row
            buttons:
              - icon: mdi:lightning-bolt
                layout: icon|name
                name: Énergies
                style:
                  name:
                    margin-left: 18px
                    font-size: 18px
                    font-weight: 600
              - icon: mdi:close
                layout: icon
                tap_action:
                  action: navigate
                  navigation_path: /
                style:
                  icon:
                    '--mdc-icon-size': 34px
            style: |
              div.flex-box {
                margin-top: -6px;
                display: flex;
                justify-content: space-between;
                align-items: center;
              }
          - type: section
          - entity: sensor.envoy_122227015952_today_s_energy_production
            name: Production aujourd'hui
          - entity: sensor.energy_production_tomorrow
            name: Production estimée demain
          - entity: sensor.envoy_122227015952_last_seven_days_energy_production
            name: Production sur 7 jours
          - entity: sensor.envoy_122227015952_lifetime_energy_production
            name: Production totale
          - entity: sensor.consommation_electricite
            name: Consommation totale
          - entity: sensor.electricite_consommee_moyenne_journaliere
            name: Consommation moyenne
          - entity: input_number.electricite_jour_semaine
            name: Index jour
          - entity: input_number.electricite_nuit_semaine
            name: Index nuit
        footer:
          type: custom:mini-graph-card
          entities:
            - sensor.envoy_122227015952_current_power_production
          show:
            name: false
            icon: false
            state: false
            legend: false
            animate: true
            fill: fade
          height: 160
          points_per_hour: 2
          hours_to_show: 24
          value_factor: -10
          tap_action: none
          y_axis: secondary
          style: |
            ha-card { 
              background: none;
              pointer-events: none;
            }
        style: |
          ha-card {
            margin: 14px 20px 28px !important;
          }
      - type: custom:vertical-stack-in-card
        cards:
          - type: custom:decluttering-card
            template: footer_sticky_menu
        style: |
          :host {
            position: sticky !important;
            bottom: 26px;
            margin-bottom: 0px !important;
            animation: 1.2s position ease-in-out;
          }
          @keyframes position {
            0% { bottom: -80px; }
            20% { bottom: -80px; }
            70% { bottom: 26px; }
            90% { bottom: 24px; }
            100% { bottom: 26px; }
          }
          ha-card { 
            background: none;
            border-radius: 26px !important;
            margin-top: 50%;
          }
          :host:before {
            content: '';
            display: block;
            position: absolute;
            bottom: -26px;
            left: -8px;
            padding-right: 16px;
            height: 130px;
            width: 100%; 
            background: linear-gradient(180deg, rgba(45, 56, 76, 0) 0%, rgba(35, 46, 66, 0.85) 50%);
            pointer-events: none;
            animation: 1.2s opacity ease-in-out;
          }
          @keyframes opacity {
            0% { opacity: 0; }
            20% { opacity: 0; }
            100% { opacity: 1; }
          }
          ### The sticky position don't work with Decluttering card
          ### This is why I have to add the CSS here
          ### If you don't use the UI you can use YAML anchors instead
  - theme: Backend-selected
    title: Recherche
    path: recherche
    type: sidebar
    subview: true
    visible:
      - user: a27a825440914ad7a919367c2e53793e
      - user: aadd52d881af46bca495e279bee867bf
      - user: 10a78a75e63f4c5ba22a81742f59b925
    badges: []
    cards:
      - type: iframe
        url: /media-browser/media_player.youtube/search%2C
        aspect_ratio: 150%
  - theme: noctis
    title: Musique
    path: musique
    subview: true
    type: sidebar
    visible:
      - user: a27a825440914ad7a919367c2e53793e
      - user: 10a78a75e63f4c5ba22a81742f59b925
      - user: aadd52d881af46bca495e279bee867bf
    badges: []
    cards:
      - type: horizontal-stack
        cards:
          - type: entities
            entities:
              - entity: input_text.rechercher_sur_youtube
                card_mod:
                  style:
                    hui-generic-entity-row:
                      $: |
                        state-badge {
                          display: none;
                        } 
                        :host {
                          width: 184%;
                        }
                      ha-textfield $: |
                        .mdc-text-field {
                          border: 2px solid var( --ha-card-background, var(--card-background-color, white) );
                          border-radius: 110px !important;
                        }
                        .mdc-line-ripple::after,
                        .mdc-line-ripple::before {
                          border-bottom-style: none !important;
                        }
            show_header_toggle: false
            card_mod:
              style: |
                "hui-generic-entity-row$state-badge": {
                  display: none;
                }
                ha-card {
                  background: none;
                }
          - type: button
            tap_action:
              action: call-service
              service: script.recherche_youtube
            show_name: false
            show_icon: true
            icon: mdi:magnify
            icon_height: 30px
            card_mod:
              style: |
                ha-card {
                  #background: blue;
                  width: 56px;
                  height: 56px !important;
                  margin: 16px;
                  border-radius: 100px;
                  float: right;
                }
        card_mod:
          style: |
            ha-card {
              margin-top: 0px;
            }
      - type: entities
        entities:
          - entity: input_select.type_de_contenu
            name: Type de contenu à rechercher
            card_mod:
              style:
                hui-generic-entity-row:
                  $: |
                    state-badge {
                      display: none;
                    } 
                    :host {
                      --mdc-text-field-fill-color:  ;
                    }
                  ha-textfield $: |
                    .mdc-text-field {
                      border: 2px solid var( --ha-card-background, var(--card-background-color, white) );
                      border-radius: 110px !important;
                    }
                    .mdc-line-ripple::after,
                    .mdc-line-ripple::before {
                      border-bottom-style: none !important;
                    }
        show_header_toggle: false
        card_mod:
          style: |
            "hui-generic-entity-row$state-badge": {
              display: none;
            }
            ha-card {
              background: none;
              margin-top: -30px;
              margin-bottom: -40px;
              z-index: 3;
            }
            ha-card:after {
              content: '';
              display: block;
              position: relative;
              {% if is_state("input_boolean.yt_search_done", "on") %}
              height: 0px;
              {% else %}
              height: 2000px;
              {% endif %}
              
              width: 100%;
              top: 0px;
              background: var(--background-color);
              z-index: 2;
            }