Untitled

type: custom:stack-in-card
mode: vertical
keep:
  box_shadow: false
  margin: false
  border_radius: false
  background: false
  outer_padding: false
style: |
  ha-card::before {
      content: "";
      position: absolute;
      top: -75px; /* Ajustez cette valeur pour déplacer l'image de fond verticalement */
      left: 0px;
      width: 100%;
      height: calc(100% + 75px); /* Assure que l'image de fond couvre toute la hauteur plus le décalage */
      background-image: url(/local/images/pieces/salon.jpg);
      background-size: cover;
      background-position: center top;
      z-index: 0;
      border-radius: inherit; /* Hérite des bords arrondis du conteneur */
  }

  ha-card::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
      z-index: 1;
  }
cards:
  - type: custom:mushroom-template-card
    icon: mdi:sofa
    icon_color: |
      {% if is_state(entity, 'on') %}
        #03A9F4
      {% else %}  
        grey
      {% endif %}
    primary: Salon
    secondary: '{{ states(''sensor.thermometre_salon_temperature'') }}°C'
    layout: horizontal
    tap_action:
      action: navigate
      navigation_path: /lovelace-smartphone/salon
    double_tap_action:
      action: navigate
      navigation_path: /lovelace-smartphone/salon
    hold_action:
      action: toggle
    badge_icon: |
      {% if is_state('binary_sensor.capteur_presence_salon_occupancy', 'on') %}
        mdi:motion-sensor
      {% else %}  
        mdi:motion-sensor-off
      {% endif %}
    badge_color: |
      {% if is_state('binary_sensor.capteur_presence_salon_occupancy', 'on') %}
        orange
      {% else %}  
        grey
      {% endif %}
    entity: light.salon
    card_mod:
      style: |
        ha-card mushroom-state-item,
        ha-card mushroom-shape-icon,
        ha-card mushroom-badge-icon,
        ha-card mushroom-state-info {
            z-index: 2;
        }
        ha-card {
          width: fit-content;
          padding: 10px !important;
          background-color: #00000085 !important;
          border-radius: 0 0 10px 0 !important;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: light.lumiere_salon
        icon_color: |-
          {% if is_state(entity, 'on') %} 
           orange
          {% else %}
           grey
          {% endif %}
        icon: mdi:sofa
        content: ''
      - type: template
        icon_color: |-
          {% if is_state(entity, 'on') %} 
           orange
          {% else %}
           grey
          {% endif %}
        icon: mdi:table-chair
        entity: light.lumiere_salle_a_manger
        content: ''
      - type: template
        icon_color: |-
          {% if is_state(entity, 'on') %} 
           orange
          {% else %}
           grey
          {% endif %}
        icon: mdi:stairs
        entity: light.lumiere_escalier
        content: ''
      - type: template
        entity: light.lumieres_ambiance_salon
        tap_action:
          action: toggle
        icon: mdi:lightbulb-group
        hold_action:
          action: more-info
        icon_color: |-
          {% if is_state(entity, 'on') %} 
           orange
          {% else %}
           grey
          {% endif %}
        double_tap_action:
          action: more-info
      - type: template
        entity: cover.volet_roulant_salon
        hold_action:
          action: toggle
        tap_action:
          action: toggle
        icon: |-
          {% if is_state(entity, 'open') %} 
           mdi:window-shutter-open
          {% elif is_state(entity, 'closed') %} 
           mdi:window-shutter
          {% else %}
           mdi:window-shutter-alert
          {% endif %}
        icon_color: |-
          {% if is_state(entity, 'open') %} 
           grey
          {% elif is_state(entity, 'closed') %} 
           grey
          {% else %}
           orange
          {% endif %}
    alignment: end
    card_mod:
      style: |
        ha-card {
          padding-top: 0px;
          margin-top: -8px;
          padding-bottom: 8px;
          padding-left: 8px;
          padding-right: 8px;
        }
        mushroom-template-chip {
            z-index: 2;
        }