/* Source: default.twig */
@import url("https://reseau-astre.org/ref/style.css");

  /* On force le bouton à garder son aspect initial même au survol */
  #openLightbox:hover {
    background-color: transparent !important; /* Ou la couleur de ton choix */
    color: inherit !important;
    border: 1px solid #000000 !important;
    cursor: pointer;
    opacity: 1 !important;
    transform: none !important;
    box-shadow: none !important;
  }
  #openLightbox span:after{
    color:black;
    font-family:'David';
    font-size: 1.8rem;
  }

/* --- bloc suivant --- */

/* =====================================
   BOUTONS MOBILE (N&B + BURGER)
   ===================================== */
.header-mobile-actions {
  flex-shrink: 0;
  align-items: flex-start;
}

/* Toggle N&B mobile : le conteneur .contrast-toggle-group gere la forme /
   les couleurs / l'animation du rond (cf. main.css > TOGGLE CONTRASTE).
   Les anciennes regles qui stylaient individuellement .contrast-toggle
   (width, border, border-radius:50%, background, etc.) ont ete retirees
   car elles etaient incompatibles avec le nouveau markup ou .contrast-toggle
   est une simple zone de clic transparente. Rien a declarer ici : tout
   est herite des tokens --referential-* via main.css. */

/* Bouton burger : hérite de la couleur du logo */
.header-mobile-actions #mobile-menu-toggle {
  color: var(--header-logo, var(--color-text, #000000));
  background: transparent;
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform-origin: top center;
}

.header-mobile-actions #mobile-menu-toggle svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* En mode N&B, le burger utilise la couleur N&B du logo si définie */
body[data-contrast-mode="bw"] .header-mobile-actions #mobile-menu-toggle {
  color: var(--bw-logo-color, var(--header-logo, var(--color-text, #000000)));
}

/* =====================================
   BASELINE DU HEADER
   ===================================== */
/* Transition douce sur l'opacite pour la faire reculer visuellement quand
   un sous-menu est deploye. Elle reste dans le DOM, mais ne gene plus la
   lecture du sous-menu. Le z-index est aussi abaisse pour qu'elle passe
   SOUS le sous-menu (qui est en z-index 9998 et position fixed). */
.header-site-baseline {
  position: relative;
  z-index: 1;
  opacity: 1;
  padding-bottom: 0;
  /* Opacite seule au toggle sous-menu : pas de tween sur margin / taille. */
  transition: font-size 0.22s ease-out, margin-top 0.22s ease-out;
}

/* Pendant le dé-shrink : baseline masquée (réapparition instantanée au retrait de pending). */
header[data-baseline-reveal-pending="1"]:not(.header-shrunk) .header-site-baseline {
  opacity: 0;
  visibility: visible;
  pointer-events: none;
  transition: none !important;
}

header:not(.header-shrunk):not([data-baseline-reveal-pending="1"]):not(.has-active-submenu):not(:has(.action-item.submenu-active)) .header-site-baseline {
  transition: font-size 0.22s ease-out, margin-top 0.22s ease-out;
}

/* Sous-menu ouvert : baseline attenuee mais GARDE sa place (pas de collapse). */
header.has-active-submenu .header-site-baseline,
header:has(.action-item.submenu-active) .header-site-baseline {
  opacity: 0.18;
  pointer-events: none;
  transition: opacity 0.18s ease-out;
}

/* Fermeture du sous-menu : retour instantane de l opacite, sans descente. */
header:not(.has-active-submenu):not(:has(.action-item.submenu-active)) .header-site-baseline {
  transition: font-size 0.22s ease-out, margin-top 0.22s ease-out;
}

/* Air sous le texte = margin-bottom sur .header-site-baseline (etat normal). */

/* Retrecissement de la baseline au scroll (meme timing que le logo). */
header.header-floating.header-shrunk .header-site-baseline {
  /* En shrink, le texte baseline reste masque et le <p> est compacte
     pour equilibrer l'espace vertical du header (haut/bas). */
  font-size: 0;
  line-height: 0;
  margin-top: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  height: 0;
  overflow: hidden;
}

/* En shrink, au hover/focus des boutons parents (sans sous-menu ouvert),
   on rouvre la baseline pour conserver la geometrie du header au repos.
   Quand un sous-menu est actif, la baseline reste hors flux (regle plus haut). */
header.header-floating.header-shrunk:not(:has(.action-item.submenu-active)):not(.has-active-submenu):has(.actions-wrapper .action-item:hover > .button.header-nav-button) .header-site-baseline,
header.header-floating.header-shrunk:not(:has(.action-item.submenu-active)):not(.has-active-submenu):has(.actions-wrapper .action-item:focus-within > .button.header-nav-button) .header-site-baseline {
  font-size: 1.85rem;
  line-height: 1.15;
  margin-top: 0.5rem;
  padding: 0;
  height: auto;
  overflow: visible;
  opacity: 1;
  visibility: visible;
  color: transparent !important;
  text-shadow: none !important;
  pointer-events: none;
  position: relative !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  /* Pas de tween sur font-size / marge : le header change de hauteur tout de suite (pas d effet volet). */
  transition: none !important;
}


/* =====================================
   1. Police pour la recherche
   ===================================== */

/* =====================================
   2. Barre de recherche (layout)
   ===================================== */

.menu-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Aligner verticalement loupe, input et croix */
.menu-search__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  box-sizing: border-box;
}

.menu-search__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  pointer-events: none;
}

.menu-search__toggle .menu-search__form,
.menu-search__toggle .menu-search__form h1 {
  margin: 0;
  padding: 0;
  line-height: 1;
  display: flex;
  align-items: center;
}

/* Fermé : le formulaire ne décale pas l’icône dans le cercle */
.menu-search:not(.is-open) .menu-search__toggle .menu-search__form,
.menu-search:not(.is-open) .menu-search__toggle .menu-search__close {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  margin: 0;
  padding: 0;
  border: 0;
}

.menu-search:not(.is-open) .menu-search__toggle {
  position: relative;
  justify-content: center;
  align-items: center;
}

.menu-search input {
  display: inline-block;
  width: 0;
  opacity: 0;
  border: 0;
  outline: none;
  color: #ffffff;
  font-family: "Caliste", "Carliste", serif !important;
  text-transform: uppercase;
  /* Transition douce sur largeur + opacité pour l'ouverture,
     la fermeture reste gérée proprement par le JS qui coupe la transition au bon moment. */
  transition:
    width 0.18s ease-out,
    opacity 0.18s ease-out;
}

.menu-search.is-open input {
  width: 180px;
  opacity: 1;
  font-size: var(--text-4xl);
}

.menu-search input::placeholder {
  color: #ffffff;
  opacity: 1;
  font-family: "Caliste", "Carliste", serif !important;
  text-transform: uppercase;
}

/* Cacher la croix native du navigateur sur input search */
.menu-search input[type="search"]::-webkit-search-cancel-button,
.menu-search input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.menu-search input[type="search"] {
  -moz-appearance: none;
  appearance: none;
}

/* Icône recherche — centrée dans son carré (cercle header + barre ouverte) */
.menu-search__icon-wrap .menu-search__icon-loupe,
.menu-search__icon-loupe {
  width: 1.875rem;
  height: 1.875rem;
  flex-shrink: 0;
  display: block;
  margin: 0;
}

/* Ouvert : loupe, champ et croix sur la même ligne, centrés verticalement */
.menu-search.is-open .menu-search__toggle {
  justify-content: flex-start;
  align-items: center;
  gap: 0.65rem;
}

.menu-search.is-open .menu-search__icon-wrap {
  align-self: center;
  flex: 0 0 auto;
}

.menu-search.is-open .menu-search__toggle .menu-search__form {
  position: static;
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
  opacity: 1;
  pointer-events: auto;
}

.menu-search.is-open .menu-search__toggle .menu-search__form h1 {
  width: 100%;
}

.menu-search.is-open .menu-search__toggle input[type="search"] {
  line-height: 1.2;
  padding: 0;
  margin: 0;
  vertical-align: middle;
}

.menu-search.is-open .menu-search__close {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* Croix de fermeture blanche à droite de l'input (visible uniquement quand la recherche est ouverte) */
.menu-search__close {
  display: none;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 0.24rem;
  background: transparent;
  border: none;
  color: #ffffff;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.15s ease;
}

.menu-search__close:hover {
  opacity: 0.85;
}

/* Barre ouverte : survol sans décalage (loupe, texte, croix) */
header .menu-search.is-open .menu-search__toggle.button,
header .menu-search.is-open .menu-search__toggle.button:is(:hover, :focus, :focus-visible, :active),
.menu-search--mobile-popup.is-open .menu-search__toggle:is(:hover, :focus, :focus-visible, :active) {
  transform: none !important;
  translate: none !important;
  --border-width: 0 !important;
  border-width: 0 !important;
  outline: none !important;
  outline-width: 0 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

header .menu-search.is-open .menu-search__toggle.button:hover {
  background-color: var(--mobile-search-popup-bg, var(--header-btn-bg, var(--btn-bg, #000000))) !important;
  color: var(--header-btn-text, var(--btn-text, #ffffff)) !important;
  border-color: transparent !important;
  outline-color: transparent !important;
}

header .menu-search.is-open .menu-search__icon-wrap,
header .menu-search.is-open .menu-search__toggle .menu-search__form,
header .menu-search.is-open .menu-search__toggle .menu-search__form h1,
header .menu-search.is-open .menu-search__toggle input[type="search"],
header .menu-search.is-open .menu-search__close,
header .menu-search.is-open .menu-search__close:hover,
.menu-search--mobile-popup.is-open .menu-search__icon-wrap,
.menu-search--mobile-popup.is-open .menu-search__toggle .menu-search__form,
.menu-search--mobile-popup.is-open .menu-search__toggle input[type="search"],
.menu-search--mobile-popup.is-open .menu-search__close,
.menu-search--mobile-popup.is-open .menu-search__close:hover {
  transform: none !important;
  translate: none !important;
}

header .menu-search.is-open .menu-search__close:hover,
.menu-search--mobile-popup.is-open .menu-search__close:hover {
  opacity: 1;
  padding: 0 !important;
  background: transparent !important;
}

.menu-search.is-open .menu-search__close {
  display: flex;
}

.menu-search.is-open .menu-search__close[hidden] {
  display: none;
}

/* Espace entre la loupe et le texte "RECHERCHER" uniquement quand la barre est ouverte */
header .menu-search.is-open .menu-search__form {
  margin-left: 0.75rem;
}

/* =====================================
   3. Liste des résultats
   ===================================== */

.search-results:empty {
  display: none;
}

.search-results {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--submenu-top, 5.5rem);
  margin: 0;
  margin-top: 0.25rem;
  list-style: none;
  background: transparent;
  z-index: 9998;
  overflow-x: hidden;
  font-size: var(--text-3xl);
  display: none;
  /* Desktop: la couche résultats ne doit pas bloquer le scroll page */
  pointer-events: none;
}

/* Après clic sur "…", la liste s'arrête avant le footer
   avec un espace symétrique à celui au-dessus du header */
.search-results.search-results--expanded {
  /* Fenêtre entre le header et le bas de l’écran,
     mais on garde la hauteur naturelle des cartes
     pour en voir plusieurs à la fois. */
  max-height: calc(100vh - var(--submenu-top, 5.5rem) - 0.25rem);
  overflow-y: visible;
  width: 100%;
  scroll-snap-type: none;
}

/* Panneau opaque plein écran : uniquement avec des résultats (classe posée en JS) */
.search-results.search-results--panel-visible {
  display: flex;
  flex-direction: column;
  top: var(--search-results-panel-top, var(--submenu-top, 5.5rem));
  height: var(
    --search-results-panel-height,
    calc(100dvh - var(--submenu-top, 5.5rem) - 1rem)
  );
  margin-top: 0;
  bottom: auto;
  max-height: none;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(
    --desktop-search-results-bg,
    var(--page-bg, var(--bg-body, var(--color-background, #ffffff)))
  );
}

/* « … » collé en bas du panneau (hauteur écran) quand des résultats sont masqués */
.search-results.search-results--panel-visible .search-result-item.search-result-item-more {
  margin-top: auto;
  flex-shrink: 0;
}

/* « Aucun résultat » : pas de panneau plein écran */
.search-results.search-results--below-logo {
  display: block;
  height: auto !important;
  min-height: 0 !important;
  background: transparent !important;
}

/* =====================================
   4. Item de résultat
   ===================================== */

.search-results .search-result-item {
  margin: 0.25rem 0;
  background: var(--desktop-search-item-bg, #000000);
  overflow: hidden;
  padding-top: 0.2em;
  border-radius: 0;
  /* Apparition en cascade uniquement par le déplacement vertical pour éviter l'effet gris */
  transform: translateY(4px);
  transition:
    transform 0.18s ease-out,
    border-radius 0.15s ease,
    background-color 0.15s ease;
}

/* Mode "carte à carte" quand on a cliqué sur "…" :
   chaque item s’aligne sur le début de la fenêtre,
   mais plusieurs cartes restent visibles en même temps. */
.search-results.search-results--expanded .search-result-item {
  scroll-snap-align: start;
}

.search-results.search-results--expanded .search-result-item a {
  width: 80%;
}

/* Un résultat sur deux avec un rayon plus grand pour un léger contraste visuel */
.search-results .search-result-item:nth-child(2n) {
  border-radius: 9999px;
}

.search-results .search-result-item.is-visible {
  transform: translateY(0);
}

/* Texte des résultats : aligné sur le champ « Rechercher » (--search-results-text-inset posé en JS) */
.search-results .search-result-item a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  width: auto;
  margin-left: var(--search-results-text-inset, calc(1rem + clamp(16rem, 15vw, 22rem)));
  margin-right: 1rem;
  padding: 0.5rem 0.75rem 0.5rem 0;
  padding-bottom: 0.25em;
  color: var(--desktop-search-item-text, #ffffff);
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    transform 0.15s ease;
  text-decoration-color: var(--desktop-search-item-text, #ffffff);
  pointer-events: auto;
}

.search-result-title,
.search-result-snippet,
.search-result-parent {
  color: var(--desktop-search-item-text, var(--desktop-search-results-text, #ffffff)) !important;
}

.search-results .search-result-item a:hover {
  text-decoration: none;
  text-decoration-color: var(--desktop-search-item-text, #ffffff);
}

.search-result-title {
  font-size: var(--text-2xl);
}

.search-result-snippet {
  font-size: var(--text-2xl);
  line-height: 1.4;
  opacity: 0.9;
  margin-top: 0.25rem;
}

.search-result-parent {
  font-family: "Caliste", "Carliste", serif !important;
  text-transform: uppercase;
  font-size: var(--text-4xl);
  margin-top: 0rem; /* descend la section vers le bas du rectangle */
  margin-bottom: 0.5rem;
}

/* Recherche vide : baseline invisible mais conserve sa hauteur (pas de saut de page) */
header[data-search-empty="1"] .header-site-baseline {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none;
}

/* « Aucun résultat » : sous le logo Astre (desktop), pas en pleine largeur */
.search-results.search-results--below-logo {
  top: var(--search-results-below-logo-top, var(--submenu-top, 5.5rem)) !important;
  margin-top: 0;
  background: transparent;
  pointer-events: none;
}

.search-results.search-results--below-logo > .no-result {
  display: block;
  margin-left: calc(var(--search-no-result-left, 1rem) + 0.375rem);
  margin-right: auto;
  max-width: clamp(14.5rem, 18vw, 19rem);
  padding: 0.35rem 0 0.5rem;
  pointer-events: auto;
  font-family: "David", serif !important;
  font-size: var(--text-2xl);
  line-height: 1.3;
  font-style: normal;
  text-transform: lowercase;
  color: var(--header-logo, currentColor) !important;
  list-style: none;
}

/* « … » : bandeau pleine largeur (comme les autres cartes), points alignés sur le texte */
.search-results .search-result-item.search-result-item-more {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

.search-results .search-result-item.search-result-item-more .search-results-more {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0.75rem 1rem 0.75rem var(--search-results-text-inset, calc(1rem + clamp(16rem, 15vw, 22rem)));
  background: transparent;
  border: none;
  color: var(--desktop-search-item-text, #ffffff);
  font-size: var(--text-4xl);
  cursor: pointer;
  text-align: left;
  transition: opacity 0.15s ease;
  pointer-events: auto;
}

.search-results-more:hover {
  opacity: 0.85;
}

/* Animation des "..." : les points apparaissent un par un */
.search-results-more .more-dots {
  display: inline-flex;
  align-items: center; /* centre verticalement les points dans la ligne */
  gap: 0.1em;
}

.search-results-more .more-dots .dot {
  opacity: 0;
  font-size: 1.6em; /* points un peu plus gros que le texte de base */
  line-height: 0.5;  /* reste ≤ 0.5 comme demandé */
  position: relative;
  top: -0.3em;       /* remonte davantage les points pour les centrer visuellement */
  animation: more-dot-pulse 1.05s ease-in-out infinite;
}

.search-results-more .more-dots .dot:nth-child(2) { animation-delay: 140ms; }
.search-results-more .more-dots .dot:nth-child(3) { animation-delay: 280ms; }

@keyframes more-dot-pulse {
  0%, 20% { opacity: 0; transform: translateY(0); }
  45% { opacity: 1; transform: translateY(-1px); }
  70%, 100% { opacity: 0; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .search-results-more .more-dots .dot {
    animation: none;
    opacity: 1;
  }
}

/* =====================================
   5. Layout du header quand la recherche est ouverte
   ===================================== */

/* Barre de recherche pleine largeur au clic : de la droite du header jusqu'au logo (figure) */
header:has(.menu-search.is-open) aside {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

header .actions-wrapper:has(.menu-search.is-open) {
  position: relative;
  width: 100%;
  justify-content: stretch;
  align-items: stretch;
}

header .actions-wrapper:has(.menu-search.is-open) .action-item:not(:has(.menu-search)):not(:has(.button--referentiel)) {
  display: none;
}

header .actions-wrapper:has(.menu-search.is-open) .action-item:has(.menu-search) {
  flex: 1 1 0;
  min-width: 0;
}

header .actions-wrapper:has(.menu-search.is-open) .action-item:has(.menu-search) > .button {
  width: 100%;
  max-width: 100%;
}

header .actions-wrapper:has(.menu-search.is-open) .action-item:has(.menu-search) .menu-search,
header .actions-wrapper:has(.menu-search.is-open) .action-item:has(.menu-search) .menu-search__toggle {
  width: 100% !important;
  max-width: none !important;
}

header .actions-wrapper:has(.menu-search.is-open) .action-item:has(.button--referentiel) {
  display: flex;
  flex: 0 0 auto;
}

header .menu-search.is-open {
  width: 100%;
  max-width: 100%;
}

header .menu-search.is-open .menu-search__toggle {
  width: 100%;
  max-width: 100%;
  justify-content: flex-start;
  align-items: center;
  border-radius: 0; /* bords carrés quand la barre est déployée */

  /* Plus d'espace entre les icônes (loupe / croix) et les bords de la barre */
  padding: 1rem !important;
  box-sizing: border-box;
  --border-width: 0;
  border-width: 0;
  outline: none;
  transition: none !important;
}

header .menu-search.is-open input {
  width: 100%;
  min-width: 0;
  opacity: 1;
}


/* =====================================
   6. Variable de hauteur pour le sous-menu
   ===================================== */

header {
  --submenu-top: 5.6rem;
}

/* =====================================
   Accueil (desktop) : menu sur toute la colonne droite jusqu'au bord du site
   ===================================== */
@media (min-width: 1024px) {
  body.home header .header-right {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    justify-content: stretch;
    align-items: flex-end;
  }

  body.home header .actions-wrapper.is-home-header-menu {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    min-width: 0;
  }
}

/* Burger invisible : taille via header .nav-active-page__icon svg (actions.twig / main.css). */
body.home header .logo-burger-row__burger-spacer.nav-active-page__icon {
  pointer-events: none;
}

body.home header .logo-burger-row__burger-spacer.nav-active-page__icon svg,
body.home header .logo-burger-row__burger-spacer.nav-active-page__icon svg * {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 1023px) {
  body.home header .logo-burger-row__burger-spacer.nav-active-page__icon {
    display: none;
  }

  body.home header .actions-wrapper.is-home-header-menu {
    width: 100%;
    max-width: none;
  }
}

/* Mobile : logo shrink permanent (hors accueil) + menu ouvert — sans attendre le JS */
@media (max-width: 1021px) {
  body:not(.home) header,
  body:not(.home) header.header-preload,
  body:not(.home) header.header-shrunk,
  body[data-mobile-menu-open] header,
  body[data-mobile-menu-open] header.header-shrunk {
    --nav-item-height: calc(clamp(10rem, 12vw, 12.5rem) * 180 / 700) !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  body:not(.home) header .logo-block,
  body:not(.home) header.header-preload .logo-block,
  body:not(.home) header.header-shrunk .logo-block,
  body[data-mobile-menu-open] header .logo-block,
  body[data-mobile-menu-open] header.header-shrunk .logo-block {
    width: calc(var(--nav-item-height) * 700 / 180) !important;
    max-width: calc(var(--nav-item-height) * 700 / 180) !important;
    min-width: 0 !important;
    height: var(--nav-item-height) !important;
    min-height: var(--nav-item-height) !important;
    max-height: var(--nav-item-height) !important;
  }

  body:not(.home) header .logo-morph,
  body:not(.home) header.header-preload .logo-morph,
  body:not(.home) header.header-shrunk .logo-morph,
  body[data-mobile-menu-open] header .logo-morph,
  body[data-mobile-menu-open] header.header-shrunk .logo-morph {
    width: calc(var(--nav-item-height) * 700 / 180) !important;
    max-width: calc(var(--nav-item-height) * 700 / 180) !important;
    height: var(--nav-item-height) !important;
    min-height: var(--nav-item-height) !important;
    max-height: var(--nav-item-height) !important;
  }

  /* Calque shrink visible une fois le Lottie figé */
  body:not(.home) header .logo-morph[data-has-lottie="1"] > .logo-morph__lottie,
  body:not(.home) header .logo-morph[data-has-lottie="1"] > .logo-morph__lottie svg,
  body:not(.home) header .logo-morph[data-logo-lottie-frozen="1"] > .logo-morph__lottie,
  body:not(.home) header .logo-morph[data-logo-lottie-frozen="1"] > .logo-morph__lottie svg,
  body[data-mobile-menu-open] header .logo-morph[data-has-lottie="1"] > .logo-morph__lottie,
  body[data-mobile-menu-open] header .logo-morph[data-has-lottie="1"] > .logo-morph__lottie svg,
  body[data-mobile-menu-open] header .logo-morph[data-logo-lottie-frozen="1"] > .logo-morph__lottie,
  body[data-mobile-menu-open] header .logo-morph[data-logo-lottie-frozen="1"] > .logo-morph__lottie svg,
  header.header-shrunk .logo-morph[data-has-lottie="1"] > .logo-morph__lottie,
  header.header-shrunk .logo-morph[data-has-lottie="1"] > .logo-morph__lottie svg,
  header.header-shrunk .logo-morph[data-logo-lottie-frozen="1"] > .logo-morph__lottie,
  header.header-shrunk .logo-morph[data-logo-lottie-frozen="1"] > .logo-morph__lottie svg {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Fallback : masque main tant que le Lottie shrink charge */
  body:not(.home) header .logo-morph:not([data-has-lottie="1"]) > .logo-morph__mask,
  body[data-mobile-menu-open] header .logo-morph:not([data-has-lottie="1"]) > .logo-morph__mask,
  header.header-shrunk .logo-morph:not([data-has-lottie="1"]) > .logo-morph__mask {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body:not(.home) header .logo-morph > .logo-morph__hover-lottie,
  body[data-mobile-menu-open] header .logo-morph > .logo-morph__hover-lottie,
  header.header-shrunk .logo-morph > .logo-morph__hover-lottie {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
}