Pour que le bouton du portail s'étende sur toute la largeur et inclue la caméra live, vous pouvez restructurer votre code pour intégrer la caméra et le bouton dans un seul élément horizontal. Voici une suggestion de modification :

yaml
Copy
type: vertical-stack
cards:
  - type: markdown
    content: |
      <div>
        <div style="font-size: 1.6em; font-weight: bold;">👋 Bienvenue chez nous 😄</div>
        <div style="font-size: 1.2em; margin-top: 0.2em;">🏡 Portail, Garage et Éclairage 🏡</div>
      </div>
    card_mod:
      style: |
        ha-card {
          height: 20vh;
          background:
            linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
            url('/local/banner.png') center/cover no-repeat;
          box-shadow: 0 4px 12px rgba(0,0,0,0.3);
          border-radius: 0 !important;
          display: flex !important;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          text-align: center;
          padding: 0 1em;
        }
  - type: horizontal-stack
    cards:
      - type: sensor
        entity: sensor.temperature_exterieure
        name: Extérieure
        icon: mdi:thermometer
        card_mod:
          style: |
            ha-card {
              border-radius: 0.5em !important;
              height: 100px;
              min-width: 150px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              font-size: 1.5em;
            }
            ha-icon {
              width: 30px !important;
              height: 30px !important;
            }
      - type: sensor
        entity: sensor.temperature_salon
        name: Intérieure
        icon: mdi:thermometer
        card_mod:
          style: |
            ha-card {
              border-radius: 0.5em !important;
              height: 100px;
              min-width: 150px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              font-size: 1.5em;
            }
            ha-icon {
              width: 30px !important;
              height: 30px !important;
            }
  - type: vertical-stack
    card_mod:
      style: |
        :host {
          display: flex !important;
          justify-content: center !important;
        }
        ha-card {
          width: 100% !important;
          max-width: 600px !important;
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          justify-content: center !important;
          height: auto;
          margin: 0 auto !important;
          padding: 0 !important;
        }
    cards:
      - type: button
        name: Portail
        icon: mdi:gate
        tap_action:
          action: call-service
          service: script.appuie_bouton_portail
        entity: switch.commande_portail
        show_state: false
        icon_height: 32px
        card_mod:
          style: |
            ha-card {
              width: 100% !important;
              height: 80px !important;
              border-radius: 1em !important;
              margin: 0;
              display: flex !important;
              justify-content: space-between !important;
              align-items: center !important;
              font-size: 1.3em;
              padding: 0 1em;
            }
            state-badge {
              display: none;
            }
        hold_action:
          action: none
        double_tap_action:
          action: none
        custom_fields:
          camera:
            card:
              type: picture-entity
              entity: camera.sonnette_video
              camera_view: live
              show_state: false
              show_name: false
              card_mod:
                style: |
                  ha-card {
                    height: 60px !important;
                    width: 80px !important;
                    border-radius: 0.5em !important;
                    overflow: hidden;
                    margin: 0;
                  }
      - type: conditional
        conditions:
          - entity: person.penguin
            state: home
        card:
          type: button
          name: Garage
          icon: mdi:window-shutter
          tap_action:
            action: call-service
            service: script.appuie_bouton_garage
          entity: switch.commande_porte_garage
          show_state: false
          icon_height: 32px
          card_mod:
            style: |
              ha-card {
                width: 100% !important;
                height: 80px !important;
                margin: 8px 0 !important;
                display: flex !important;
                justify-content: center !important;
                border-radius: 1.5em !important;
              }
      - type: conditional
        conditions:
          - entity: person.penguin
            state: home
          - entity: binary_sensor.afficher_bouton_terrasse
            state: "on"
        card:
          type: button
          entity: switch.shelly_chauffe_eau
          name: Terrasse
          icon: mdi:lightbulb-on
          tap_action:
            action: toggle
          card_mod:
            style: |
              ha-card {
                width: 100% !important;
                height: 80px !important;
                margin: 8px 0 !important;
                display: flex !important;
                justify-content: center !important;
                border-radius: 1.5em !important;
              }

Dans cette configuration, le bouton du portail s'étend sur toute la largeur et inclut la caméra live à l'intérieur. Vous pouvez ajuster les styles et les tailles selon vos préférences.

Pour intégrer la caméra dans le bouton du portail tout en s'assurant qu'elle reste visible, nous devons ajuster le code pour inclure la caméra comme un élément à l'intérieur du bouton. Voici une version modifiée du code :

yaml
Copy
type: vertical-stack
cards:
  - type: markdown
    content: |
      <div>
        <div style="font-size: 1.6em; font-weight: bold;">👋 Bienvenue chez nous 😄</div>
        <div style="font-size: 1.2em; margin-top: 0.2em;">🏡 Portail, Garage et Éclairage 🏡</div>
      </div>
    card_mod:
      style: |
        ha-card {
          height: 20vh;
          background:
            linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
            url('/local/banner.png') center/cover no-repeat;
          box-shadow: 0 4px 12px rgba(0,0,0,0.3);
          border-radius: 0 !important;
          display: flex !important;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          text-align: center;
          padding: 0 1em;
        }
  - type: horizontal-stack
    cards:
      - type: sensor
        entity: sensor.temperature_exterieure
        name: Extérieure
        icon: mdi:thermometer
        card_mod:
          style: |
            ha-card {
              border-radius: 0.5em !important;
              height: 100px;
              min-width: 150px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              font-size: 1.5em;
            }
            ha-icon {
              width: 30px !important;
              height: 30px !important;
            }
      - type: sensor
        entity: sensor.temperature_salon
        name: Intérieure
        icon: mdi:thermometer
        card_mod:
          style: |
            ha-card {
              border-radius: 0.5em !important;
              height: 100px;
              min-width: 150px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              font-size: 1.5em;
            }
            ha-icon {
              width: 30px !important;
              height: 30px !important;
            }
  - type: vertical-stack
    card_mod:
      style: |
        :host {
          display: flex !important;
          justify-content: center !important;
        }
        ha-card {
          width: 100% !important;
          max-width: 600px !important;
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          justify-content: center !important;
          height: auto;
          margin: 0 auto !important;
          padding: 0 !important;
        }
    cards:
      - type: custom:button-card
        entity: switch.commande_portail
        name: Portail
        icon: mdi:gate
        tap_action:
          action: call-service
          service: script.appuie_bouton_portail
        styles:
          card:
            - width: 100%
            - height: 80px
            - border-radius: 1em
            - margin: 0
            - display: flex
            - justify-content: space-between
            - align-items: center
            - font-size: 1.3em
            - padding: 0 1em
        custom_fields:
          camera:
            card:
              type: picture-entity
              entity: camera.sonnette_video
              camera_view: live
              show_state: false
              show_name: false
              card_mod:
                style: |
                  ha-card {
                    height: 60px !important;
                    width: 80px !important;
                    border-radius: 0.5em !important;
                    overflow: hidden;
                    margin: 0;
                  }
      - type: conditional
        conditions:
          - entity: person.penguin
            state: home
        card:
          type: button
          name: Garage
          icon: mdi:window-shutter
          tap_action:
            action: call-service
            service: script.appuie_bouton_garage
          entity: switch.commande_porte_garage
          show_state: false
          icon_height: 32px
          card_mod:
            style: |
              ha-card {
                width: 100% !important;
                height: 80px !important;
                margin: 8px 0 !important;
                display: flex !important;
                justify-content: center !important;
                border-radius: 1.5em !important;
              }
      - type: conditional
        conditions:
          - entity: person.penguin
            state: home
          - entity: binary_sensor.afficher_bouton_terrasse
            state: "on"
        card:
          type: button
          entity: switch.shelly_chauffe_eau
          name: Terrasse
          icon: mdi:lightbulb-on
          tap_action:
            action: toggle
          card_mod:
            style: |
              ha-card {
                width: 100% !important;
                height: 80px !important;
                margin: 8px 0 !important;
                display: flex !important;
                justify-content: center !important;
                border-radius: 1.5em !important;
              }

Dans cette configuration, j'ai utilisé un custom:button-card pour intégrer la caméra à l'intérieur du bouton du portail. Assurez-vous que le composant custom:button-card est installé dans votre instance Home Assistant. Vous pouvez ajuster les styles et les tailles selon vos préférences.

Pour intégrer la caméra dans le bouton du portail tout en s'assurant qu'elle reste visible et que le bouton s'étende sur toute la largeur, nous devons utiliser une approche légèrement différente. Nous allons utiliser un horizontal-stack pour combiner la caméra et le bouton dans une seule ligne. Voici une version modifiée du code :

yaml
Copy
type: vertical-stack
cards:
  - type: markdown
    content: |
      <div>
        <div style="font-size: 1.6em; font-weight: bold;">👋 Bienvenue chez nous 😄</div>
        <div style="font-size: 1.2em; margin-top: 0.2em;">🏡 Portail, Garage et Éclairage 🏡</div>
      </div>
    card_mod:
      style: |
        ha-card {
          height: 20vh;
          background:
            linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
            url('/local/banner.png') center/cover no-repeat;
          box-shadow: 0 4px 12px rgba(0,0,0,0.3);
          border-radius: 0 !important;
          display: flex !important;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          text-align: center;
          padding: 0 1em;
        }
  - type: horizontal-stack
    cards:
      - type: sensor
        entity: sensor.temperature_exterieure
        name: Extérieure
        icon: mdi:thermometer
        card_mod:
          style: |
            ha-card {
              border-radius: 0.5em !important;
              height: 100px;
              min-width: 150px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              font-size: 1.5em;
            }
            ha-icon {
              width: 30px !important;
              height: 30px !important;
            }
      - type: sensor
        entity: sensor.temperature_salon
        name: Intérieure
        icon: mdi:thermometer
        card_mod:
          style: |
            ha-card {
              border-radius: 0.5em !important;
              height: 100px;
              min-width: 150px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              font-size: 1.5em;
            }
            ha-icon {
              width: 30px !important;
              height: 30px !important;
            }
  - type: vertical-stack
    card_mod:
      style: |
        :host {
          display: flex !important;
          justify-content: center !important;
        }
        ha-card {
          width: 100% !important;
          max-width: 600px !important;
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          justify-content: center !important;
          height: auto;
          margin: 0 auto !important;
          padding: 0 !important;
        }
    cards:
      - type: horizontal-stack
        cards:
          - type: picture-entity
            entity: camera.sonnette_video
            camera_view: live
            show_state: false
            show_name: false
            card_mod:
              style: |
                ha-card {
                  height: 80px !important;
                  width: 120px !important;
                  border-radius: 1em 0 0 1em !important;
                  overflow: hidden;
                  margin: 0;
                }
          - type: button
            name: Portail
            icon: mdi:gate
            tap_action:
              action: call-service
              service: script.appuie_bouton_portail
            entity: switch.commande_portail
            show_state: false
            icon_height: 32px
            card_mod:
              style: |
                ha-card {
                  height: 80px !important;
                  flex-grow: 1;
                  border-radius: 0 1em 1em 0 !important;
                  margin: 0;
                  display: flex !important;
                  justify-content: center !important;
                  align-items: center !important;
                  font-size: 1.3em;
                }
      - type: conditional
        conditions:
          - entity: person.penguin
            state: home
        card:
          type: button
          name: Garage
          icon: mdi:window-shutter
          tap_action:
            action: call-service
            service: script.appuie_bouton_garage
          entity: switch.commande_porte_garage
          show_state: false
          icon_height: 32px
          card_mod:
            style: |
              ha-card {
                width: 100% !important;
                height: 80px !important;
                margin: 8px 0 !important;
                display: flex !important;
                justify-content: center !important;
                border-radius: 1.5em !important;
              }
      - type: conditional
        conditions:
          - entity: person.penguin
            state: home
          - entity: binary_sensor.afficher_bouton_terrasse
            state: "on"
        card:
          type: button
          entity: switch.shelly_chauffe_eau
          name: Terrasse
          icon: mdi:lightbulb-on
          tap_action:
            action: toggle
          card_mod:
            style: |
              ha-card {
                width: 100% !important;
                height: 80px !important;
                margin: 8px 0 !important;
                display: flex !important;
                justify-content: center !important;
                border-radius: 1.5em !important;
              }

Dans cette configuration, le bouton du portail et la caméra sont combinés dans un horizontal-stack, ce qui permet à la caméra de rester visible tout en s'assurant que le bouton s'étend sur toute la largeur disponible. Vous pouvez ajuster les styles et les tailles selon vos préférences.

Pour obtenir le résultat souhaité où le bouton du portail s'étend sur toute la largeur et inclut la caméra, tout en gardant la caméra visible, nous devons ajuster le code pour utiliser un horizontal-stack qui combine la caméra et le bouton dans une seule ligne. Voici une version modifiée du code :

yaml
Copy
type: vertical-stack
cards:
  - type: markdown
    content: |
      <div>
        <div style="font-size: 1.6em; font-weight: bold;">👋 Bienvenue chez nous 😄</div>
        <div style="font-size: 1.2em; margin-top: 0.2em;">🏡 Portail, Garage et Éclairage 🏡</div>
      </div>
    card_mod:
      style: |
        ha-card {
          height: 20vh;
          background:
            linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
            url('/local/banner.png') center/cover no-repeat;
          box-shadow: 0 4px 12px rgba(0,0,0,0.3);
          border-radius: 0 !important;
          display: flex !important;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          text-align: center;
          padding: 0 1em;
        }
  - type: horizontal-stack
    cards:
      - type: sensor
        entity: sensor.temperature_exterieure
        name: Extérieure
        icon: mdi:thermometer
        card_mod:
          style: |
            ha-card {
              border-radius: 0.5em !important;
              height: 100px;
              min-width: 150px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              font-size: 1.5em;
            }
            ha-icon {
              width: 30px !important;
              height: 30px !important;
            }
      - type: sensor
        entity: sensor.temperature_salon
        name: Intérieure
        icon: mdi:thermometer
        card_mod:
          style: |
            ha-card {
              border-radius: 0.5em !important;
              height: 100px;
              min-width: 150px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              font-size: 1.5em;
            }
            ha-icon {
              width: 30px !important;
              height: 30px !important;
            }
  - type: vertical-stack
    card_mod:
      style: |
        :host {
          display: flex !important;
          justify-content: center !important;
        }
        ha-card {
          width: 100% !important;
          max-width: 600px !important;
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          justify-content: center !important;
          height: auto;
          margin: 0 auto !important;
          padding: 0 !important;
        }
    cards:
      - type: horizontal-stack
        cards:
          - type: picture-entity
            entity: camera.sonnette_video
            camera_view: live
            show_state: false
            show_name: false
            card_mod:
              style: |
                ha-card {
                  height: 80px !important;
                  width: 120px !important;
                  border-radius: 1em 0 0 1em !important;
                  overflow: hidden;
                  margin: 0;
                }
          - type: button
            name: Portail
            icon: mdi:gate
            tap_action:
              action: call-service
              service: script.appuie_bouton_portail
            entity: switch.commande_portail
            show_state: false
            icon_height: 32px
            card_mod:
              style: |
                ha-card {
                  height: 80px !important;
                  flex-grow: 1;
                  border-radius: 0 1em 1em 0 !important;
                  margin: 0;
                  display: flex !important;
                  justify-content: center !important;
                  align-items: center !important;
                  font-size: 1.3em;
                }
      - type: conditional
        conditions:
          - entity: person.penguin
            state: home
        card:
          type: button
          name: Garage
          icon: mdi:garage
          tap_action:
            action: call-service
            service: script.appuie_bouton_garage
          entity: switch.commande_porte_garage
          show_state: false
          icon_height: 32px
          card_mod:
            style: |
              ha-card {
                width: 100% !important;
                height: 80px !important;
                margin: 8px 0 !important;
                display: flex !important;
                justify-content: center !important;
                border-radius: 1.5em !important;
              }

Dans cette configuration, le bouton du portail et la caméra sont combinés dans un horizontal-stack, ce qui permet à la caméra de rester visible tout en s'assurant que le bouton s'étend sur toute la largeur disponible. Assurez-vous que les entités et services utilisés dans le code correspondent à ceux configurés dans votre instance Home Assistant.

Pour intégrer la caméra dans le bouton du portail tout en s'assurant que le bouton s'étend sur toute la largeur, nous devons utiliser une approche légèrement différente. Nous allons utiliser un custom:button-card pour combiner la caméra et le bouton dans une seule carte. Voici une version modifiée du code :

yaml
Copy
type: vertical-stack
cards:
  - type: markdown
    content: |
      <div>
        <div style="font-size: 1.6em; font-weight: bold;">👋 Bienvenue chez nous 😄</div>
        <div style="font-size: 1.2em; margin-top: 0.2em;">🏡 Portail, Garage et Éclairage 🏡</div>
      </div>
    card_mod:
      style: |
        ha-card {
          height: 20vh;
          background:
            linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
            url('/local/banner.png') center/cover no-repeat;
          box-shadow: 0 4px 12px rgba(0,0,0,0.3);
          border-radius: 0 !important;
          display: flex !important;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          text-align: center;
          padding: 0 1em;
        }
  - type: horizontal-stack
    cards:
      - type: sensor
        entity: sensor.temperature_exterieure
        name: Extérieure
        icon: mdi:thermometer
        card_mod:
          style: |
            ha-card {
              border-radius: 0.5em !important;
              height: 100px;
              min-width: 150px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              font-size: 1.5em;
            }
            ha-icon {
              width: 30px !important;
              height: 30px !important;
            }
      - type: sensor
        entity: sensor.temperature_salon
        name: Intérieure
        icon: mdi:thermometer
        card_mod:
          style: |
            ha-card {
              border-radius: 0.5em !important;
              height: 100px;
              min-width: 150px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              font-size: 1.5em;
            }
            ha-icon {
              width: 30px !important;
              height: 30px !important;
            }
  - type: vertical-stack
    card_mod:
      style: |
        :host {
          display: flex !important;
          justify-content: center !important;
        }
        ha-card {
          width: 100% !important;
          max-width: 600px !important;
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          justify-content: center !important;
          height: auto;
          margin: 0 auto !important;
          padding: 0 !important;
        }
    cards:
      - type: custom:button-card
        entity: switch.commande_portail
        name: Portail
        icon: mdi:gate
        tap_action:
          action: call-service
          service: script.appuie_bouton_portail
        styles:
          card:
            - width: 100%
            - height: 80px
            - border-radius: 1em
            - margin: 0
            - display: flex
            - justify-content: space-between
            - align-items: center
            - font-size: 1.3em
            - padding: 0 1em
        custom_fields:
          camera:
            card:
              type: picture-entity
              entity: camera.sonnette_video
              camera_view: live
              show_state: false
              show_name: false
              card_mod:
                style: |
                  ha-card {
                    height: 60px !important;
                    width: 80px !important;
                    border-radius: 0.5em !important;
                    overflow: hidden;
                    margin: 0;
                  }
      - type: conditional
        conditions:
          - entity: person.penguin
            state: home
        card:
          type: button
          name: Garage
          icon: mdi:garage
          tap_action:
            action: call-service
            service: script.appuie_bouton_garage
          entity: switch.commande_porte_garage
          show_state: false
          icon_height: 32px
          card_mod:
            style: |
              ha-card {
                width: 100% !important;
                height: 80px !important;
                margin: 8px 0 !important;
                display: flex !important;
                justify-content: center !important;
                border-radius: 1.5em !important;
              }

Dans cette configuration, j'ai utilisé un custom:button-card pour intégrer la caméra à l'intérieur du bouton du portail. Assurez-vous que le composant custom:button-card est installé dans votre instance Home Assistant. Vous pouvez ajuster les styles et les tailles selon vos préférences.

Pour obtenir le design souhaité où la caméra est superposée sur le bouton du portail, nous devons utiliser une approche différente. Nous allons créer un bouton similaire à celui du garage et superposer la caméra par-dessus. Voici comment vous pouvez structurer votre code :

yaml
Copy
type: vertical-stack
cards:
  - type: markdown
    content: |
      <div>
        <div style="font-size: 1.6em; font-weight: bold;">👋 Bienvenue chez nous 😄</div>
        <div style="font-size: 1.2em; margin-top: 0.2em;">🏡 Portail, Garage et Éclairage 🏡</div>
      </div>
    card_mod:
      style: |
        ha-card {
          height: 20vh;
          background:
            linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
            url('/local/banner.png') center/cover no-repeat;
          box-shadow: 0 4px 12px rgba(0,0,0,0.3);
          border-radius: 0 !important;
          display: flex !important;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          text-align: center;
          padding: 0 1em;
        }
  - type: horizontal-stack
    cards:
      - type: sensor
        entity: sensor.temperature_exterieure
        name: Extérieure
        icon: mdi:thermometer
        card_mod:
          style: |
            ha-card {
              border-radius: 0.5em !important;
              height: 100px;
              min-width: 150px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              font-size: 1.5em;
            }
            ha-icon {
              width: 30px !important;
              height: 30px !important;
            }
      - type: sensor
        entity: sensor.temperature_salon
        name: Intérieure
        icon: mdi:thermometer
        card_mod:
          style: |
            ha-card {
              border-radius: 0.5em !important;
              height: 100px;
              min-width: 150px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              font-size: 1.5em;
            }
            ha-icon {
              width: 30px !important;
              height: 30px !important;
            }
  - type: vertical-stack
    card_mod:
      style: |
        :host {
          display: flex !important;
          justify-content: center !important;
        }
        ha-card {
          width: 100% !important;
          max-width: 600px !important;
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          justify-content: center !important;
          height: auto;
          margin: 0 auto !important;
          padding: 0 !important;
        }
    cards:
      - type: button
        name: Portail
        icon: mdi:gate
        tap_action:
          action: call-service
          service: script.appuie_bouton_portail
        entity: switch.commande_portail
        show_state: false
        icon_height: 32px
        card_mod:
          style: |
            ha-card {
              width: 100% !important;
              height: 80px !important;
              border-radius: 1em !important;
              margin: 0;
              display: flex !important;
              justify-content: center !important;
              align-items: center !important;
              font-size: 1.3em;
              position: relative;
            }
      - type: picture-entity
        entity: camera.sonnette_video
        camera_view: live
        show_state: false
        show_name: false
        card_mod:
          style: |
            ha-card {
              position: absolute !important;
              left: 10px !important;
              top: 50% !important;
              transform: translateY(-50%) !important;
              height: 60px !important;
              width: 80px !important;
              border-radius: 0.5em !important;
              overflow: hidden;
              margin: 0 !important;
              pointer-events: none !important;
            }
      - type: conditional
        conditions:
          - entity: person.penguin
            state: home
        card:
          type: button
          name: Garage
          icon: mdi:garage
          tap_action:
            action: call-service
            service: script.appuie_bouton_garage
          entity: switch.commande_porte_garage
          show_state: false
          icon_height: 32px
          card_mod:
            style: |
              ha-card {
                width: 100% !important;
                height: 80px !important;
                margin: 8px 0 !important;
                display: flex !important;
                justify-content: center !important;
                border-radius: 1.5em !important;
              }

Dans cette configuration, le bouton du portail est créé avec la même largeur que le bouton du garage, et la caméra est superposée par-dessus le bouton en utilisant des styles CSS pour la positionner correctement. Vous pouvez ajuster les styles et les tailles selon vos préférences.

Pour ajuster la position verticale de la caméra afin qu'elle soit correctement centrée par rapport au bouton, nous devons ajuster les styles CSS pour la caméra. Voici une version modifiée du code qui devrait mieux centrer la caméra verticalement :

yaml
Copy
type: vertical-stack
cards:
  - type: markdown
    content: |
      <div>
        <div style="font-size: 1.6em; font-weight: bold;">👋 Bienvenue chez nous 😄</div>
        <div style="font-size: 1.2em; margin-top: 0.2em;">🏡 Portail, Garage et Éclairage 🏡</div>
      </div>
    card_mod:
      style: |
        ha-card {
          height: 20vh;
          background:
            linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
            url('/local/banner.png') center/cover no-repeat;
          box-shadow: 0 4px 12px rgba(0,0,0,0.3);
          border-radius: 0 !important;
          display: flex !important;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          text-align: center;
          padding: 0 1em;
        }
  - type: horizontal-stack
    cards:
      - type: sensor
        entity: sensor.temperature_exterieure
        name: Extérieure
        icon: mdi:thermometer
        card_mod:
          style: |
            ha-card {
              border-radius: 0.5em !important;
              height: 100px;
              min-width: 150px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              font-size: 1.5em;
            }
            ha-icon {
              width: 30px !important;
              height: 30px !important;
            }
      - type: sensor
        entity: sensor.temperature_salon
        name: Intérieure
        icon: mdi:thermometer
        card_mod:
          style: |
            ha-card {
              border-radius: 0.5em !important;
              height: 100px;
              min-width: 150px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              font-size: 1.5em;
            }
            ha-icon {
              width: 30px !important;
              height: 30px !important;
            }
  - type: vertical-stack
    card_mod:
      style: |
        :host {
          display: flex !important;
          justify-content: center !important;
        }
        ha-card {
          width: 100% !important;
          max-width: 600px !important;
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          justify-content: center !important;
          height: auto;
          margin: 0 auto !important;
          padding: 0 !important;
        }
    cards:
      - type: button
        name: Portail
        icon: mdi:gate
        tap_action:
          action: call-service
          service: script.appuie_bouton_portail
        entity: switch.commande_portail
        show_state: false
        icon_height: 32px
        card_mod:
          style: |
            ha-card {
              width: 100% !important;
              height: 80px !important;
              border-radius: 1em !important;
              margin: 0;
              display: flex !important;
              justify-content: center !important;
              align-items: center !important;
              font-size: 1.3em;
              position: relative;
            }
      - type: picture-entity
        entity: camera.sonnette_video
        camera_view: live
        show_state: false
        show_name: false
        card_mod:
          style: |
            ha-card {
              position: absolute !important;
              left: 10px !important;
              top: 50% !important;
              transform: translateY(-50%) !important;
              height: 60px !important;
              width: 80px !important;
              border-radius: 0.5em !important;
              overflow: hidden;
              margin: 0 !important;
              pointer-events: none !important;
            }
      - type: conditional
        conditions:
          - entity: person.penguin
            state: home
        card:
          type: button
          name: Garage
          icon: mdi:garage
          tap_action:
            action: call-service
            service: script.appuie_bouton_garage
          entity: switch.commande_porte_garage
          show_state: false
          icon_height: 32px
          card_mod:
            style: |
              ha-card {
                width: 100% !important;
                height: 80px !important;
                margin: 8px 0 !important;
                display: flex !important;
                justify-content: center !important;
                border-radius: 1.5em !important;
              }

Dans cette configuration, j'ai utilisé position: absolute pour la caméra et ajusté la position avec top: 50% et transform: translateY(-50%) pour centrer verticalement la caméra par rapport au bouton. Vous pouvez ajuster les valeurs de left, height, et width selon vos préférences pour un positionnement parfait.

Pour résoudre le problème de positionnement de la caméra qui varie selon les appareils, nous pouvons utiliser une approche différente en utilisant un conteneur pour le bouton et la caméra. Nous allons utiliser un horizontal-stack pour aligner la caméra et le bouton correctement. Voici comment vous pouvez structurer votre code :

yaml
Copy
type: vertical-stack
cards:
  - type: markdown
    content: |
      <div>
        <div style="font-size: 1.6em; font-weight: bold;">👋 Bienvenue chez nous 😄</div>
        <div style="font-size: 1.2em; margin-top: 0.2em;">🏡 Portail, Garage et Éclairage 🏡</div>
      </div>
    card_mod:
      style: |
        ha-card {
          height: 20vh;
          background:
            linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
            url('/local/banner.png') center/cover no-repeat;
          box-shadow: 0 4px 12px rgba(0,0,0,0.3);
          border-radius: 0 !important;
          display: flex !important;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          text-align: center;
          padding: 0 1em;
        }
  - type: horizontal-stack
    cards:
      - type: sensor
        entity: sensor.temperature_exterieure
        name: Extérieure
        icon: mdi:thermometer
        card_mod:
          style: |
            ha-card {
              border-radius: 0.5em !important;
              height: 100px;
              min-width: 150px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              font-size: 1.5em;
            }
            ha-icon {
              width: 30px !important;
              height: 30px !important;
            }
      - type: sensor
        entity: sensor.temperature_salon
        name: Intérieure
        icon: mdi:thermometer
        card_mod:
          style: |
            ha-card {
              border-radius: 0.5em !important;
              height: 100px;
              min-width: 150px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              font-size: 1.5em;
            }
            ha-icon {
              width: 30px !important;
              height: 30px !important;
            }
  - type: vertical-stack
    card_mod:
      style: |
        :host {
          display: flex !important;
          justify-content: center !important;
        }
        ha-card {
          width: 100% !important;
          max-width: 600px !important;
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          justify-content: center !important;
          height: auto;
          margin: 0 auto !important;
          padding: 0 !important;
        }
    cards:
      - type: horizontal-stack
        cards:
          - type: picture-entity
            entity: camera.sonnette_video
            camera_view: live
            show_state: false
            show_name: false
            card_mod:
              style: |
                ha-card {
                  height: 80px !important;
                  width: 120px !important;
                  border-radius: 1em 0 0 1em !important;
                  overflow: hidden;
                  margin: 0 !important;
                }
          - type: button
            name: Portail
            icon: mdi:gate
            tap_action:
              action: call-service
              service: script.appuie_bouton_portail
            entity: switch.commande_portail
            show_state: false
            icon_height: 32px
            card_mod:
              style: |
                ha-card {
                  height: 80px !important;
                  flex-grow: 1;
                  border-radius: 0 1em 1em 0 !important;
                  margin: 0 !important;
                  display: flex !important;
                  justify-content: center !important;
                  align-items: center !important;
                  font-size: 1.3em;
                }
      - type: conditional
        conditions:
          - entity: person.penguin
            state: home
        card:
          type: button
          name: Garage
          icon: mdi:garage
          tap_action:
            action: call-service
            service: script.appuie_bouton_garage
          entity: switch.commande_porte_garage
          show_state: false
          icon_height: 32px
          card_mod:
            style: |
              ha-card {
                width: 100% !important;
                height: 80px !important;
                margin: 8px 0 !important;
                display: flex !important;
                justify-content: center !important;
                border-radius: 1.5em !important;
              }

Dans cette configuration, la caméra et le bouton sont placés côte à côte dans un horizontal-stack, ce qui permet de s'assurer que la caméra est toujours alignée correctement par rapport au bouton, indépendamment de l'appareil utilisé. Vous pouvez ajuster les styles et les tailles selon vos préférences.

Pour résoudre le problème où le bouton semble coupé en deux, nous devons nous assurer que le horizontal-stack qui contient la caméra et le bouton est correctement configuré pour s'afficher comme un seul élément cohérent. Nous allons ajuster les styles pour que le bouton et la caméra soient correctement alignés et que le bouton ne semble pas coupé.

Voici une version ajustée du code :

yaml
Copy
type: vertical-stack
cards:
  - type: markdown
    content: |
      <div>
        <div style="font-size: 1.6em; font-weight: bold;">👋 Bienvenue chez nous 😄</div>
        <div style="font-size: 1.2em; margin-top: 0.2em;">🏡 Portail, Garage et Éclairage 🏡</div>
      </div>
    card_mod:
      style: |
        ha-card {
          height: 20vh;
          background:
            linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
            url('/local/banner.png') center/cover no-repeat;
          box-shadow: 0 4px 12px rgba(0,0,0,0.3);
          border-radius: 0 !important;
          display: flex !important;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          text-align: center;
          padding: 0 1em;
        }
  - type: horizontal-stack
    cards:
      - type: sensor
        entity: sensor.temperature_exterieure
        name: Extérieure
        icon: mdi:thermometer
        card_mod:
          style: |
            ha-card {
              border-radius: 0.5em !important;
              height: 100px;
              min-width: 150px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              font-size: 1.5em;
            }
            ha-icon {
              width: 30px !important;
              height: 30px !important;
            }
      - type: sensor
        entity: sensor.temperature_salon
        name: Intérieure
        icon: mdi:thermometer
        card_mod:
          style: |
            ha-card {
              border-radius: 0.5em !important;
              height: 100px;
              min-width: 150px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              font-size: 1.5em;
            }
            ha-icon {
              width: 30px !important;
              height: 30px !important;
            }
  - type: vertical-stack
    card_mod:
      style: |
        :host {
          display: flex !important;
          justify-content: center !important;
        }
        ha-card {
          width: 100% !important;
          max-width: 600px !important;
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          justify-content: center !important;
          height: auto;
          margin: 0 auto !important;
          padding: 0 !important;
        }
    cards:
      - type: horizontal-stack
        card_mod:
          style: |
            ha-card {
              border-radius: 1em !important;
              overflow: hidden !important;
            }
        cards:
          - type: picture-entity
            entity: camera.sonnette_video
            camera_view: live
            show_state: false
            show_name: false
            card_mod:
              style: |
                ha-card {
                  height: 80px !important;
                  width: 120px !important;
                  border-radius: 1em 0 0 1em !important;
                  overflow: hidden;
                  margin: 0 !important;
                }
          - type: button
            name: Portail
            icon: mdi:gate
            tap_action:
              action: call-service
              service: script.appuie_bouton_portail
            entity: switch.commande_portail
            show_state: false
            icon_height: 32px
            card_mod:
              style: |
                ha-card {
                  height: 80px !important;
                  flex-grow: 1;
                  border-radius: 0 1em 1em 0 !important;
                  margin: 0 !important;
                  display: flex !important;
                  justify-content: center !important;
                  align-items: center !important;
                  font-size: 1.3em;
                }
      - type: conditional
        conditions:
          - entity: person.penguin
            state: home
        card:
          type: button
          name: Garage
          icon: mdi:garage
          tap_action:
            action: call-service
            service: script.appuie_bouton_garage
          entity: switch.commande_porte_garage
          show_state: false
          icon_height: 32px
          card_mod:
            style: |
              ha-card {
                width: 100% !important;
                height: 80px !important;
                margin: 8px 0 !important;
                display: flex !important;
                justify-content: center !important;
                border-radius: 1.5em !important;
              }

Dans cette configuration, j'ai ajouté un card_mod au horizontal-stack pour m'assurer que le bouton et la caméra sont correctement intégrés et ne semblent pas coupés. Ajustez les styles et les tailles selon vos préférences pour un rendu optimal.

Pour résoudre le problème où le bouton semble coupé en deux, nous devons nous assurer que le horizontal-stack englobe correctement la caméra et le bouton. Nous allons ajuster les styles pour que le bouton et la caméra soient correctement alignés et que le bouton ne semble pas coupé.

Voici une version ajustée du code :

yaml
Copy
type: vertical-stack
cards:
  - type: markdown
    content: |
      <div>
        <div style="font-size: 1.6em; font-weight: bold;">👋 Bienvenue chez nous 😄</div>
        <div style="font-size: 1.2em; margin-top: 0.2em;">🏡 Portail, Garage et Éclairage 🏡</div>
      </div>
    card_mod:
      style: |
        ha-card {
          height: 20vh;
          background:
            linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
            url('/local/banner.png') center/cover no-repeat;
          box-shadow: 0 4px 12px rgba(0,0,0,0.3);
          border-radius: 0 !important;
          display: flex !important;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          text-align: center;
          padding: 0 1em;
        }
  - type: horizontal-stack
    cards:
      - type: sensor
        entity: sensor.temperature_exterieure
        name: Extérieure
        icon: mdi:thermometer
        card_mod:
          style: |
            ha-card {
              border-radius: 0.5em !important;
              height: 100px;
              min-width: 150px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              font-size: 1.5em;
            }
            ha-icon {
              width: 30px !important;
              height: 30px !important;
            }
      - type: sensor
        entity: sensor.temperature_salon
        name: Intérieure
        icon: mdi:thermometer
        card_mod:
          style: |
            ha-card {
              border-radius: 0.5em !important;
              height: 100px;
              min-width: 150px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              font-size: 1.5em;
            }
            ha-icon {
              width: 30px !important;
              height: 30px !important;
            }
  - type: vertical-stack
    card_mod:
      style: |
        :host {
          display: flex !important;
          justify-content: center !important;
        }
        ha-card {
          width: 100% !important;
          max-width: 600px !important;
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          justify-content: center !important;
          height: auto;
          margin: 0 auto !important;
          padding: 0 !important;
        }
    cards:
      - type: horizontal-stack
        cards:
          - type: picture-entity
            entity: camera.sonnette_video
            camera_view: live
            show_state: false
            show_name: false
            card_mod:
              style: |
                ha-card {
                  height: 80px !important;
                  width: 120px !important;
                  border-radius: 1em 0 0 1em !important;
                  overflow: hidden;
                  margin: 0 !important;
                }
          - type: button
            name: Portail
            icon: mdi:gate
            tap_action:
              action: call-service
              service: script.appuie_bouton_portail
            entity: switch.commande_portail
            show_state: false
            icon_height: 32px
            card_mod:
              style: |
                ha-card {
                  height: 80px !important;
                  flex-grow: 1;
                  border-radius: 0 1em 1em 0 !important;
                  margin: 0 !important;
                  display: flex !important;
                  justify-content: center !important;
                  align-items: center !important;
                  font-size: 1.3em;
                }
      - type: conditional
        conditions:
          - entity: person.penguin
            state: home
        card:
          type: button
          name: Garage
          icon: mdi:garage
          tap_action:
            action: call-service
            service: script.appuie_bouton_garage
          entity: switch.commande_porte_garage
          show_state: false
          icon_height: 32px
          card_mod:
            style: |
              ha-card {
                width: 100% !important;
                height: 80px !important;
                margin: 8px 0 !important;
                display: flex !important;
                justify-content: center !important;
                border-radius: 1.5em !important;
              }

Dans cette configuration, j'ai ajusté le horizontal-stack pour qu'il englobe correctement la caméra et le bouton. Assurez-vous que les styles et les tailles sont ajustés selon vos préférences pour un rendu optimal.

Pour résoudre le problème où le bouton semble coupé en deux, nous devons nous assurer que le horizontal-stack englobe correctement la caméra et le bouton. Nous allons ajuster les styles pour que le bouton et la caméra soient correctement alignés et que le bouton ne semble pas coupé.

Voici une version ajustée du code :

yaml
Copy
type: vertical-stack
cards:
  - type: markdown
    content: |
      <div>
        <div style="font-size: 1.6em; font-weight: bold;">👋 Bienvenue chez nous 😄</div>
        <div style="font-size: 1.2em; margin-top: 0.2em;">🏡 Portail, Garage et Éclairage 🏡</div>
      </div>
    card_mod:
      style: |
        ha-card {
          height: 20vh;
          background:
            linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
            url('/local/banner.png') center/cover no-repeat;
          box-shadow: 0 4px 12px rgba(0,0,0,0.3);
          border-radius: 0 !important;
          display: flex !important;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          text-align: center;
          padding: 0 1em;
        }
  - type: horizontal-stack
    cards:
      - type: sensor
        entity: sensor.temperature_exterieure
        name: Extérieure
        icon: mdi:thermometer
        card_mod:
          style: |
            ha-card {
              border-radius: 0.5em !important;
              height: 100px;
              min-width: 150px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              font-size: 1.5em;
            }
            ha-icon {
              width: 30px !important;
              height: 30px !important;
            }
      - type: sensor
        entity: sensor.temperature_salon
        name: Intérieure
        icon: mdi:thermometer
        card_mod:
          style: |
            ha-card {
              border-radius: 0.5em !important;
              height: 100px;
              min-width: 150px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              font-size: 1.5em;
            }
            ha-icon {
              width: 30px !important;
              height: 30px !important;
            }
  - type: vertical-stack
    card_mod:
      style: |
        :host {
          display: flex !important;
          justify-content: center !important;
        }
        ha-card {
          width: 100% !important;
          max-width: 600px !important;
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          justify-content: center !important;
          height: auto;
          margin: 0 auto !important;
          padding: 0 !important;
        }
    cards:
      - type: horizontal-stack
        cards:
          - type: picture-entity
            entity: camera.sonnette_video
            camera_view: live
            show_state: false
            show_name: false
            card_mod:
              style: |
                ha-card {
                  height: 80px !important;
                  width: 120px !important;
                  border-radius: 1em 0 0 1em !important;
                  overflow: hidden;
                  margin: 0 !important;
                }
          - type: button
            name: Portail
            icon: mdi:gate
            tap_action:
              action: call-service
              service: script.appuie_bouton_portail
            entity: switch.commande_portail
            show_state: false
            icon_height: 32px
            card_mod:
              style: |
                ha-card {
                  height: 80px !important;
                  flex-grow: 1;
                  border-radius: 0 1em 1em 0 !important;
                  margin: 0 !important;
                  display: flex !important;
                  justify-content: center !important;
                  align-items: center !important;
                  font-size: 1.3em;
                }
      - type: conditional
        conditions:
          - entity: person.penguin
            state: home
        card:
          type: button
          name: Garage
          icon: mdi:garage
          tap_action:
            action: call-service
            service: script.appuie_bouton_garage
          entity: switch.commande_porte_garage
          show_state: false
          icon_height: 32px
          card_mod:
            style: |
              ha-card {
                width: 100% !important;
                height: 80px !important;
                margin: 8px 0 !important;
                display: flex !important;
                justify-content: center !important;
                border-radius: 1.5em !important;
              }

Dans cette configuration, j'ai ajusté le horizontal-stack pour qu'il englobe correctement la caméra et le bouton. Assurez-vous que les styles et les tailles sont ajustés selon vos préférences pour un rendu optimal. Si le problème persiste, il pourrait être utile de vérifier les styles CSS appliqués par d'autres éléments ou de consulter la documentation de Home Assistant pour des configurations spécifiques.

Pour résoudre le problème de manière différente, nous pouvons essayer une approche où nous utilisons un conteneur pour le bouton et la caméra, en utilisant des styles CSS pour positionner la caméra par-dessus le bouton. Voici une autre méthode pour structurer votre code :

yaml
Copy
type: vertical-stack
cards:
  - type: markdown
    content: |
      <div>
        <div style="font-size: 1.6em; font-weight: bold;">👋 Bienvenue chez nous 😄</div>
        <div style="font-size: 1.2em; margin-top: 0.2em;">🏡 Portail, Garage et Éclairage 🏡</div>
      </div>
    card_mod:
      style: |
        ha-card {
          height: 20vh;
          background:
            linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
            url('/local/banner.png') center/cover no-repeat;
          box-shadow: 0 4px 12px rgba(0,0,0,0.3);
          border-radius: 0 !important;
          display: flex !important;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          text-align: center;
          padding: 0 1em;
        }
  - type: horizontal-stack
    cards:
      - type: sensor
        entity: sensor.temperature_exterieure
        name: Extérieure
        icon: mdi:thermometer
        card_mod:
          style: |
            ha-card {
              border-radius: 0.5em !important;
              height: 100px;
              min-width: 150px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              font-size: 1.5em;
            }
            ha-icon {
              width: 30px !important;
              height: 30px !important;
            }
      - type: sensor
        entity: sensor.temperature_salon
        name: Intérieure
        icon: mdi:thermometer
        card_mod:
          style: |
            ha-card {
              border-radius: 0.5em !important;
              height: 100px;
              min-width: 150px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              font-size: 1.5em;
            }
            ha-icon {
              width: 30px !important;
              height: 30px !important;
            }
  - type: vertical-stack
    card_mod:
      style: |
        :host {
          display: flex !important;
          justify-content: center !important;
        }
        ha-card {
          width: 100% !important;
          max-width: 600px !important;
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          justify-content: center !important;
          height: auto;
          margin: 0 auto !important;
          padding: 0 !important;
        }
    cards:
      - type: custom:button-card
        entity: switch.commande_portail
        name: Portail
        icon: mdi:gate
        tap_action:
          action: call-service
          service: script.appuie_bouton_portail
        styles:
          card:
            - width: 100%
            - height: 80px
            - border-radius: 1em
            - margin: 0
            - display: flex
            - justify-content: center
            - align-items: center
            - font-size: 1.3em
            - position: relative
        custom_fields:
          camera:
            card:
              type: picture-entity
              entity: camera.sonnette_video
              camera_view: live
              show_state: false
              show_name: false
              card_mod:
                style: |
                  ha-card {
                    position: absolute !important;
                    left: 10px !important;
                    top: 50% !important;
                    transform: translateY(-50%) !important;
                    height: 60px !important;
                    width: 80px !important;
                    border-radius: 0.5em !important;
                    overflow: hidden;
                    margin: 0 !important;
                  }
      - type: conditional
        conditions:
          - entity: person.penguin
            state: home
        card:
          type: button
          name: Garage
          icon: mdi:garage
          tap_action:
            action: call-service
            service: script.appuie_bouton_garage
          entity: switch.commande_porte_garage
          show_state: false
          icon_height: 32px
          card_mod:
            style: |
              ha-card {
                width: 100% !important;
                height: 80px !important;
                margin: 8px 0 !important;
                display: flex !important;
                justify-content: center !important;
                border-radius: 1.5em !important;
              }

Dans cette configuration, j'ai utilisé un custom:button-card pour intégrer la caméra à l'intérieur du bouton du portail. Assurez-vous que le composant custom:button-card est installé dans votre instance Home Assistant. Cette méthode devrait aider à positionner correctement la caméra par-dessus le bouton. Ajustez les styles et les tailles selon vos préférences pour un rendu optimal.

Pour essayer une autre approche, nous allons utiliser un conteneur personnalisé pour le bouton et la caméra, en utilisant des styles CSS pour positionner la caméra correctement par rapport au bouton. Voici une autre méthode pour structurer votre code :

yaml
Copy
type: vertical-stack
cards:
  - type: markdown
    content: |
      <div>
        <div style="font-size: 1.6em; font-weight: bold;">👋 Bienvenue chez nous 😄</div>
        <div style="font-size: 1.2em; margin-top: 0.2em;">🏡 Portail, Garage et Éclairage 🏡</div>
      </div>
    card_mod:
      style: |
        ha-card {
          height: 20vh;
          background:
            linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
            url('/local/banner.png') center/cover no-repeat;
          box-shadow: 0 4px 12px rgba(0,0,0,0.3);
          border-radius: 0 !important;
          display: flex !important;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          text-align: center;
          padding: 0 1em;
        }
  - type: horizontal-stack
    cards:
      - type: sensor
        entity: sensor.temperature_exterieure
        name: Extérieure
        icon: mdi:thermometer
        card_mod:
          style: |
            ha-card {
              border-radius: 0.5em !important;
              height: 100px;
              min-width: 150px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              font-size: 1.5em;
            }
            ha-icon {
              width: 30px !important;
              height: 30px !important;
            }
      - type: sensor
        entity: sensor.temperature_salon
        name: Intérieure
        icon: mdi:thermometer
        card_mod:
          style: |
            ha-card {
              border-radius: 0.5em !important;
              height: 100px;
              min-width: 150px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              font-size: 1.5em;
            }
            ha-icon {
              width: 30px !important;
              height: 30px !important;
            }
  - type: vertical-stack
    card_mod:
      style: |
        :host {
          display: flex !important;
          justify-content: center !important;
        }
        ha-card {
          width: 100% !important;
          max-width: 600px !important;
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          justify-content: center !important;
          height: auto;
          margin: 0 auto !important;
          padding: 0 !important;
        }
    cards:
      - type: custom:button-card
        entity: switch.commande_portail
        name: Portail
        icon: mdi:gate
        tap_action:
          action: call-service
          service: script.appuie_bouton_portail
        styles:
          card:
            - width: 100%
            - height: 80px
            - border-radius: 1em
            - margin: 0
            - display: flex
            - justify-content: center
            - align-items: center
            - font-size: 1.3em
            - position: relative
        custom_fields:
          camera:
            card:
              type: picture-entity
              entity: camera.sonnette_video
              camera_view: live
              show_state: false
              show_name: false
              card_mod:
                style: |
                  ha-card {
                    position: absolute !important;
                    left: 0 !important;
                    top: 0 !important;
                    bottom: 0 !important;
                    height: 100% !important;
                    width: auto !important;
                    border-radius: 0.5em !important;
                    overflow: hidden;
                    margin: 0 !important;
                  }
      - type: conditional
        conditions:
          - entity: person.penguin
            state: home
        card:
          type: button
          name: Garage
          icon: mdi:garage
          tap_action:
            action: call-service
            service: script.appuie_bouton_garage
          entity: switch.commande_porte_garage
          show_state: false
          icon_height: 32px
          card_mod:
            style: |
              ha-card {
                width: 100% !important;
                height: 80px !important;
                margin: 8px 0 !important;
                display: flex !important;
                justify-content: center !important;
                border-radius: 1.5em !important;
              }

Dans cette configuration, j'ai utilisé un custom:button-card pour intégrer la caméra à l'intérieur du bouton du portail. Assurez-vous que le composant custom:button-card est installé dans votre instance Home Assistant. Cette méthode devrait aider à positionner correctement la caméra par-dessus le bouton. Ajustez les styles et les tailles selon vos préférences pour un rendu optimal.

Pour résoudre le problème où le bouton et la caméra n'occupent qu'un petit espace, nous devons nous assurer que le conteneur parent utilise tout l'espace disponible. Nous allons ajuster les styles pour que le bouton et la caméra s'étendent correctement sur toute la largeur disponible.

Voici une version ajustée du code :

yaml
Copy
type: vertical-stack
cards:
  - type: markdown
    content: |
      <div>
        <div style="font-size: 1.6em; font-weight: bold;">👋 Bienvenue chez nous 😄</div>
        <div style="font-size: 1.2em; margin-top: 0.2em;">🏡 Portail, Garage et Éclairage 🏡</div>
      </div>
    card_mod:
      style: |
        ha-card {
          height: 20vh;
          background:
            linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
            url('/local/banner.png') center/cover no-repeat;
          box-shadow: 0 4px 12px rgba(0,0,0,0.3);
          border-radius: 0 !important;
          display: flex !important;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          text-align: center;
          padding: 0 1em;
        }
  - type: horizontal-stack
    cards:
      - type: sensor
        entity: sensor.temperature_exterieure
        name: Extérieure
        icon: mdi:thermometer
        card_mod:
          style: |
            ha-card {
              border-radius: 0.5em !important;
              height: 100px;
              min-width: 150px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              font-size: 1.5em;
            }
            ha-icon {
              width: 30px !important;
              height: 30px !important;
            }
      - type: sensor
        entity: sensor.temperature_salon
        name: Intérieure
        icon: mdi:thermometer
        card_mod:
          style: |
            ha-card {
              border-radius: 0.5em !important;
              height: 100px;
              min-width: 150px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              font-size: 1.5em;
            }
            ha-icon {
              width: 30px !important;
              height: 30px !important;
            }
  - type: vertical-stack
    card_mod:
      style: |
        :host {
          display: flex !important;
          justify-content: center !important;
        }
        ha-card {
          width: 100% !important;
          max-width: 600px !important;
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          justify-content: center !important;
          height: auto;
          margin: 0 auto !important;
          padding: 0 !important;
        }
    cards:
      - type: custom:button-card
        entity: switch.commande_portail
        name: Portail
        icon: mdi:gate
        tap_action:
          action: call-service
          service: script.appuie_bouton_portail
        styles:
          card:
            - width: 100%
            - height: 80px
            - border-radius: 1em
            - margin: 0
            - display: flex
            - justify-content: center
            - align-items: center
            - font-size: 1.3em
            - position: relative
        custom_fields:
          camera:
            card:
              type: picture-entity
              entity: camera.sonnette_video
              camera_view: live
              show_state: false
              show_name: false
              card_mod:
                style: |
                  ha-card {
                    position: absolute !important;
                    left: 0 !important;
                    top: 0 !important;
                    bottom: 0 !important;
                    height: 100% !important;
                    width: 100px !important;
                    border-radius: 0.5em !important;
                    overflow: hidden;
                    margin: 0 !important;
                  }
      - type: conditional
        conditions:
          - entity: person.penguin
            state: home
        card:
          type: button
          name: Garage
          icon: mdi:garage
          tap_action:
            action: call-service
            service: script.appuie_bouton_garage
          entity: switch.commande_porte_garage
          show_state: false
          icon_height: 32px
          card_mod:
            style: |
              ha-card {
                width: 100% !important;
                height: 80px !important;
                margin: 8px 0 !important;
                display: flex !important;
                justify-content: center !important;
                border-radius: 1.5em !important;
              }

Dans cette configuration, j'ai utilisé un custom:button-card pour intégrer la caméra à l'intérieur du bouton du portail et j'ai ajusté les styles pour que le bouton et la caméra s'étendent correctement. Assurez-vous que le composant custom:button-card est installé dans votre instance Home Assistant. Ajustez les styles et les tailles selon vos préférences pour un rendu optimal.

Pour que le bouton occupe toute la largeur disponible, nous devons nous assurer que les styles CSS appliqués au bouton et à son conteneur parent permettent une extension complète. Voici une version ajustée du code pour s'assurer que le bouton s'étend sur toute la largeur :

yaml
Copy
type: vertical-stack
cards:
  - type: markdown
    content: |
      <div>
        <div style="font-size: 1.6em; font-weight: bold;">👋 Bienvenue chez nous 😄</div>
        <div style="font-size: 1.2em; margin-top: 0.2em;">🏡 Portail, Garage et Éclairage 🏡</div>
      </div>
    card_mod:
      style: |
        ha-card {
          height: 20vh;
          background:
            linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
            url('/local/banner.png') center/cover no-repeat;
          box-shadow: 0 4px 12px rgba(0,0,0,0.3);
          border-radius: 0 !important;
          display: flex !important;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          text-align: center;
          padding: 0 1em;
        }
  - type: horizontal-stack
    cards:
      - type: sensor
        entity: sensor.temperature_exterieure
        name: Extérieure
        icon: mdi:thermometer
        card_mod:
          style: |
            ha-card {
              border-radius: 0.5em !important;
              height: 100px;
              min-width: 150px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              font-size: 1.5em;
            }
            ha-icon {
              width: 30px !important;
              height: 30px !important;
            }
      - type: sensor
        entity: sensor.temperature_salon
        name: Intérieure
        icon: mdi:thermometer
        card_mod:
          style: |
            ha-card {
              border-radius: 0.5em !important;
              height: 100px;
              min-width: 150px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              font-size: 1.5em;
            }
            ha-icon {
              width: 30px !important;
              height: 30px !important;
            }
  - type: vertical-stack
    card_mod:
      style: |
        :host {
          display: flex !important;
          justify-content: center !important;
        }
        ha-card {
          width: 100% !important;
          max-width: 600px !important;
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          justify-content: center !important;
          height: auto;
          margin: 0 auto !important;
          padding: 0 !important;
        }
    cards:
      - type: horizontal-stack
        card_mod:
          style: |
            ha-card {
              width: 100% !important;
              border-radius: 1em !important;
              overflow: hidden !important;
            }
        cards:
          - type: picture-entity
            entity: camera.sonnette_video
            camera_view: live
            show_state: false
            show_name: false
            card_mod:
              style: |
                ha-card {
                  height: 80px !important;
                  width: 120px !important;
                  border-radius: 1em 0 0 1em !important;
                  overflow: hidden;
                  margin: 0 !important;
                }
          - type: button
            name: Portail
            icon: mdi:gate
            tap_action:
              action: call-service
              service: script.appuie_bouton_portail
            entity: switch.commande_portail
            show_state: false
            icon_height: 32px
            card_mod:
              style: |
                ha-card {
                  flex-grow: 1;
                  height: 80px !important;
                  border-radius: 0 1em 1em 0 !important;
                  margin: 0 !important;
                  display: flex !important;
                  justify-content: center !important;
                  align-items: center !important;
                  font-size: 1.3em;
                }
      - type: conditional
        conditions:
          - entity: person.penguin
            state: home
        card:
          type: button
          name: Garage
          icon: mdi:garage
          tap_action:
            action: call-service
            service: script.appuie_bouton_garage
          entity: switch.commande_porte_garage
          show_state: false
          icon_height: 32px
          card_mod:
            style: |
              ha-card {
                width: 100% !important;
                height: 80px !important;
                margin: 8px 0 !important;
                display: flex !important;
                justify-content: center !important;
                border-radius: 1.5em !important;
              }

Dans cette configuration, j'ai ajusté les styles pour que le horizontal-stack et le bouton s'étendent sur toute la largeur disponible. Assurez-vous que les styles et les tailles sont ajustés selon vos préférences pour un rendu optimal.

Oui, je peux interpréter l'image. Elle montre une interface utilisateur d'une application de domotique, probablement configurée dans Home Assistant. Voici une description détaillée de ce que je vois :

1. En-tête : Il y a une bannière en haut avec un arrière-plan de montagnes et un message de bienvenue "Bienvenue chez nous 😄" suivi de "Portail, Garage et Éclairage 🏡".

2. Températures :

   • Deux cartes affichent les températures intérieure et extérieure.
   • La température extérieure est de 26,0 °C.
   • La température intérieure est de 23,0 °C.

3. Boutons de contrôle :

   • Un bouton "Portail" avec une icône de porte et une image de caméra intégrée à gauche du bouton.
   • Un bouton "Garage" avec une icône de garage.

L'objectif semble être de configurer l'interface pour que le bouton "Portail" s'étende sur toute la largeur disponible et que la caméra soit correctement intégrée à gauche du bouton, tout en gardant une apparence cohérente sur différents appareils.

Pour résoudre le problème de mise en page où le bouton "Portail" ne s'étend pas correctement et où la caméra n'est pas bien intégrée, nous devons ajuster les styles CSS pour que le bouton et la caméra soient correctement alignés et occupent l'espace souhaité.

Voici une approche alternative pour structurer votre code :

yaml
Copy
type: vertical-stack
cards:
  - type: markdown
    content: |
      <div>
        <div style="font-size: 1.6em; font-weight: bold;">👋 Bienvenue chez nous 😄</div>
        <div style="font-size: 1.2em; margin-top: 0.2em;">🏡 Portail, Garage et Éclairage 🏡</div>
      </div>
    card_mod:
      style: |
        ha-card {
          height: 20vh;
          background:
            linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
            url('/local/banner.png') center/cover no-repeat;
          box-shadow: 0 4px 12px rgba(0,0,0,0.3);
          border-radius: 0 !important;
          display: flex !important;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          text-align: center;
          padding: 0 1em;
        }
  - type: horizontal-stack
    cards:
      - type: sensor
        entity: sensor.temperature_exterieure
        name: Extérieure
        icon: mdi:thermometer
        card_mod:
          style: |
            ha-card {
              border-radius: 0.5em !important;
              height: 100px;
              min-width: 150px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              font-size: 1.5em;
            }
            ha-icon {
              width: 30px !important;
              height: 30px !important;
            }
      - type: sensor
        entity: sensor.temperature_salon
        name: Intérieure
        icon: mdi:thermometer
        card_mod:
          style: |
            ha-card {
              border-radius: 0.5em !important;
              height: 100px;
              min-width: 150px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              font-size: 1.5em;
            }
            ha-icon {
              width: 30px !important;
              height: 30px !important;
            }
  - type: vertical-stack
    cards:
      - type: horizontal-stack
        cards:
          - type: picture-entity
            entity: camera.sonnette_video
            camera_view: live
            show_state: false
            show_name: false
            card_mod:
              style: |
                ha-card {
                  height: 80px !important;
                  width: 120px !important;
                  border-radius: 1em 0 0 1em !important;
                  overflow: hidden;
                  margin: 0 !important;
                }
          - type: button
            name: Portail
            icon: mdi:gate
            tap_action:
              action: call-service
              service: script.appuie_bouton_portail
            entity: switch.commande_portail
            show_state: false
            icon_height: 32px
            card_mod:
              style: |
                ha-card {
                  flex-grow: 1;
                  height: 80px !important;
                  border-radius: 0 1em 1em 0 !important;
                  margin: 0 !important;
                  display: flex !important;
                  justify-content: center !important;
                  align-items: center !important;
                  font-size: 1.3em;
                }
      - type: conditional
        conditions:
          - entity: person.penguin
            state: home
        card:
          type: button
          name: Garage
          icon: mdi:garage
          tap_action:
            action: call-service
            service: script.appuie_bouton_garage
          entity: switch.commande_porte_garage
          show_state: false
          icon_height: 32px
          card_mod:
            style: |
              ha-card {
                width: 100% !important;
                height: 80px !important;
                margin: 8px 0 !important;
                display: flex !important;
                justify-content: center !important;
                border-radius: 1.5em !important;
              }

Dans cette configuration, j'ai utilisé un horizontal-stack pour aligner la caméra et le bouton "Portail" côte à côte. Cela devrait permettre à la caméra et au bouton de s'afficher correctement sur toute la largeur disponible. Ajustez les styles et les tailles selon vos préférences pour un rendu optimal.