/* Source: blank.twig */
/* Animation du header/* Animation du header au scroll :
     - il reste toujours visible
     - il devient simplement plus compact (classe .header-floating) quand on n'est plus en haut de la page. */
  header {
    position: fixed;
    transition:
      transform 0.22s ease-out,
      background-color 0.22s ease-out;
    background-color: transparent;
    overflow: visible;
    box-shadow: none;
    isolation: isolate;
  }

  /* Blur limite strictement au header.
     Superposition type Callosum pour une fin de transition imperceptible. */
  header > * {
    position: relative;
    z-index: 2;
  }

  /* Garantit que les sous-menus ne sont pas rognes par les conteneurs
     apres l'ajout des calques de blur. */
  header .actions-wrapper,
  header .actions-wrapper .action-item {
    position: relative;
    overflow: visible !important;
  }

  header::before,
  header::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: 0;
  }

  header::before {
    height: max(0px, calc(100% - 1.25rem));
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) .5rem);
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) .5rem);
  }

  header::after {
    height: max(0px, calc(100% - 2.5rem));
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) .5rem);
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) .5rem);
  }


  /* Etat "flottant" : quand on n'est plus tout en haut de la page.
     IMPORTANT : on NE redefinit PLUS --nav-item-height ici (ancienne
     formule : calc(2 * var(--vpadding) + 2.5rem)). Elle est maintenant
     posee uniquement dans main.css (formule partagee logo + boutons
     = width_logo * 180/700), pour garantir la parite exacte entre la
     hauteur du logo et celle des boutons apres le shrink. */
  /* En mode floating (scroll), on garde le fond du header visible
     (heritage de la regle par defaut `header { background-color: #ffffff }`
     ou surcharge via body[data-header-has-bg="1"] + --header-bg). Sans cela,
     le header disparait et le pseudo-element ::after (extension sous le
     sous-menu actif) devient invisible lui aussi. */
  header.header-floating {
    background-color: var(--header-bg, #ffffff);
  }

  /* Capsule de fond blanc sous le bloc de gauche (logo + breadcrumb).
     - Elle se compacte naturellement avec le shrink (scale sur .header-left).
     - En mode "breadcrumbs seuls", elle ne couvre que ces boutons, pas toute la largeur. */
  header .header-left {
    position: relative;
    z-index: 1;
    isolation: isolate; /* fixe le stacking context pour que ::before reste derrière */
  }

  header .header-left::before {
    content: "";
    position: absolute;
    left: -1rem;
    right: -1rem;
    top: -0.625rem;
    bottom: -0.625rem;
    background-color: #ffffff;
    border-radius: 9999px;
    z-index: -1;
    opacity: 1;
    transition: opacity 0.22s ease-out, bottom 0.22s ease-out;
  }

  /* Pendant l'ouverture du menu, on étend aussi la capsule blanche
     sous la zone des boutons du menu (à droite). */
  header .header-right {
    position: relative;
    z-index: 1;
    isolation: isolate; /* fixe le stacking context pour que ::before reste derrière */
  }

  header .header-right::before {
    content: "";
    position: absolute;
    left: -1rem;
    right: -1rem;
    top: -0.625rem;
    bottom: -0.625rem;
    background-color: #ffffff;
    border-radius: 9999px;
    z-index: -1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease-out, bottom 0.22s ease-out;
  }

  header.nav-menu-open .header-right::before {
    opacity: 1;
  }

  /* En haut de page (pas de shrink) avec le menu déployé :
     on masque les fonds, car il n'y a (normalement) pas de recouvrement
     du contenu principal à ce moment-là. */
  header.nav-menu-open:not(.header-floating) .header-left::before,
  header.nav-menu-open:not(.header-floating) .header-right::before {
    opacity: 0 !important;
  }

  /* Quand un sous-menu s'affiche au survol (ou est actif via JS),
     on étend la "capsule blanche" principale pour englober visuellement
     la zone du sous-menu (et éviter un background séparé plus étroit). */
  header.header-floating:has(.action-item:hover > .submenu) .header-right::before,
  header.header-floating:has(.action-item.submenu-active) .header-right::before {
    opacity: 1;
    bottom: -6.25rem;
    pointer-events: none;
  }

  /* En shrink : pas d animation sur bottom (sinon la capsule « déroule » pendant ~220ms). */
  header.header-floating.header-shrunk:has(.action-item:hover > .submenu) .header-right::before,
  header.header-floating.header-shrunk:has(.action-item.submenu-active) .header-right::before {
    transition: opacity 0.08s ease-out, bottom 0ms linear !important;
  }

  /* Évite que la capsule blanche passe au-dessus du SVG "burger" */
  header .nav-active-page__icon {
    position: relative;
    z-index: 9999;
  }

  /* Fusion visuelle gauche/droite quand le menu est ouvert :
     on augmente le chevauchement pour éviter un "trait" entre les deux capsules. */
  header.nav-menu-open .header-left::before {
    right: -1.25rem;
  }
  header.nav-menu-open .header-right::before {
    left: -0.5rem;
  }

  /* Suppression de la "capsule" de fond arrondie derrière le header */
  header .header-left::before,
  header .header-right::before {
    content: none !important;
  }

  header .logo-block > .logo-morph,
  header a.logo-block > .logo-morph {
    width: 100% !important;
    max-width: 100% !important;
  }

  .logo-morph {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
    /* Hauteur explicite (sinon les frames absolute peuvent devenir invisibles) */
    /*height: calc(var(--nav-item-height, 4rem) * 1.2);*/
  }

  .logo-morph__base {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: left center;
    pointer-events: none;
  }

  .logo-morph__logo {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: left center;
    pointer-events: none;
  }

  /* Superposition stricte logo 1 (même zone que masque / hover ; pas de saut au crossfade) */
  header .logo-block [data-logo-morph]:not([data-has-lottie="1"]) > img.logo-morph__logo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .logo-morph__hover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    display: block;
    color: inherit;
    opacity: 0;
    pointer-events: none;
    filter: none;
    z-index: 10;
    /* transition opacity : header .logo-block [data-logo-morph] > .logo-morph__hover (couche logo 2) */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  /* Rollover Lottie 3 : calque dédié, avant le shrink scroll (scrub JS ~220 ms). */
  .logo-morph__hover-lottie {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 11;
    color: inherit;
    overflow: visible;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Pas de fondu CSS : la timeline Lottie gère enter/leave. */
    transition: none !important;
  }

  .logo-morph__hover-lottie svg {
    width: 100% !important;
    height: auto !important;
    max-height: 100% !important;
    display: block;
    transform: none !important;
    /* meet = proportions Lottie conservées (700×180), sans écrasement du logo. */
    preserveAspectRatio: xMidYMid meet;
  }

  .logo-morph[data-has-lottie="1"] .logo-morph__lottie svg {
    width: 100% !important;
    height: auto !important;
    max-height: 100% !important;
    preserveAspectRatio: xMidYMid meet;
  }

  .logo-morph__hover-lottie,
  .logo-morph__hover-lottie svg {
    color: inherit;
  }

  .logo-morph__hover-lottie svg [fill]:not([fill="none"]) {
    fill: currentColor !important;
  }

  .logo-morph__hover-lottie svg [stroke]:not([stroke="none"]) {
    stroke: currentColor !important;
  }

  .logo-morph__hover svg {
    width: 100%;
    height: 100%;
    display: block;
    shape-rendering: geometricPrecision;
  }

  .logo-morph__hover svg [fill]:not([fill="none"]) {
    fill: currentColor !important;
  }

  .logo-morph__hover svg path,
  .logo-morph__hover svg circle,
  .logo-morph__hover svg rect,
  .logo-morph__hover svg ellipse,
  .logo-morph__hover svg polygon {
    fill: currentColor !important;
  }

  .logo-morph__hover-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: left center;
    pointer-events: none;
  }

  /* Boîte logo = ratio Lottie 700×180 (meet, pas de scale / stretch sur le SVG). */
  header .logo-morph {
    --logo-morph-ratio-h: 180;
    --logo-hover-lottie-extra-x: 0px;
    --logo-hover-lottie-extra-y: 0px;
    --logo-hover-lottie-nudge-y: 0px;
    contain: layout !important;
  }

  /* Fallback sans Lottie hover : masque SVG légèrement agrandi. */
  header .logo-morph:not([data-logo-hover-lottie="1"]) {
    --logo-static-mask-size: 101% 101%;
    --logo-static-mask-position: 0 50%;
    --logo-static-mask-offset-x: -2px;
    --logo-static-mask-offset-y: -1px;
  }

  /* Repos / handoff : calage frame 0 hover ↔ frame 0 shrink (sync JS). */
  header .logo-morph[data-logo-hover-lottie="1"] > .logo-morph__hover-lottie {
    transform: translate(
        var(--logo-hover-lottie-extra-x, 0px),
        calc(var(--logo-hover-lottie-extra-y, 0px) + var(--logo-hover-lottie-nudge-y, 0px))
      );
    transform-origin: left center;
  }

  /* Main + hover : remplissent toute la boîte .logo-morph (pas de marges d’artboard). */
  header .logo-morph__mask,
  .logo-morph__hover .logo-morph__hover-shape {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: var(--logo-static-mask-position);
    mask-position: var(--logo-static-mask-position);
    -webkit-mask-size: var(--logo-static-mask-size);
    mask-size: var(--logo-static-mask-size);
    -webkit-mask-origin: border-box;
    mask-origin: border-box;
    -webkit-mask-clip: border-box;
    mask-clip: border-box;
    pointer-events: none;
  }

  /* Masque fixe (fallback sans Lottie hover) : calage frame 0 shrink. */
  header .logo-morph:not([data-logo-hover-lottie="1"]) > .logo-morph__mask {
    transform: translate(
      var(--logo-static-mask-offset-x, 0px),
      var(--logo-static-mask-offset-y, 0px)
    );
  }

  header .logo-morph__mask {
    z-index: 2;
  }

  .logo-morph[data-hover-mask="png"] .logo-morph__hover-shape,
  .logo-morph[data-main-mask="png"] > .logo-morph__mask {
    -webkit-mask-mode: alpha;
    mask-mode: alpha;
  }

  /* Un seul calque visible : masque SVG (évite le doublon <img>). */
  header [data-logo-morph]:has(> .logo-morph__mask) > img.logo-morph__logo {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /*
   Repos avec Lottie shrink + hover : logo fixe = frame 0 logo-lottie-3 (même calque que le survol).
   Sans data-logo-hover-lottie : masque SVG main (comportement historique).
  */
  .logo-morph[data-has-lottie="1"][data-logo-lottie-rest="1"]:not([data-logo-lottie-handoff])
    > .logo-morph__lottie {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transition: none !important;
  }

  .logo-morph[data-has-lottie="1"][data-logo-lottie-rest="1"]:not([data-logo-hover-lottie="1"])
    > .logo-morph__mask {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
    transition: none !important;
  }

  /*
   Logo repos = frame 0 hover Lottie (header plein, hors tween shrink).
   Plus spécifique que la règle « leave » plus bas.
  */
  header:not(.header-shrunk)
    .logo-morph[data-logo-hover-lottie-rest="1"]:not([data-logo-lottie-handoff])
    > .logo-morph__hover-lottie,
  header:not(.header-shrunk)
    .logo-morph[data-logo-hover-lottie="1"][data-logo-lottie-rest="1"]:not([data-logo-lottie-handoff])
    > .logo-morph__hover-lottie,
  header:not(.header-shrunk)
    .logo-morph[data-logo-hover-lottie="1"][data-logo-hover-lottie-prime="1"]
    > .logo-morph__hover-lottie {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
    transition: none !important;
    z-index: 3 !important;
  }

  header:not(.header-shrunk)
    .logo-morph[data-logo-hover-lottie-rest="1"]:not([data-logo-lottie-handoff])
    > .logo-morph__mask,
  header:not(.header-shrunk)
    .logo-morph[data-logo-hover-lottie-rest="1"]:not([data-logo-lottie-handoff])
    > img.logo-morph__logo,
  header:not(.header-shrunk)
    .logo-morph[data-logo-hover-lottie="1"][data-logo-lottie-rest="1"]:not([data-logo-lottie-handoff])
    > .logo-morph__mask,
  header:not(.header-shrunk)
    .logo-morph[data-logo-hover-lottie="1"][data-logo-hover-lottie-prime="1"]
    > .logo-morph__mask,
  header:not(.header-shrunk)
    .logo-morph[data-logo-hover-lottie="1"][data-logo-lottie-rest="1"]:not([data-logo-lottie-handoff])
    > img.logo-morph__logo {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: none !important;
  }

  /* Fin dé-shrink : pas de fondu sur les calques logo. */
  header .logo-block:not(:hover):not(:focus-visible)
    [data-logo-morph][data-logo-lottie-handoff]
    > .logo-morph__mask,
  header .logo-block:not(:hover):not(:focus-visible)
    [data-logo-morph][data-logo-lottie-handoff]
    > .logo-morph__hover-lottie,
  header .logo-block:not(:hover):not(:focus-visible)
    [data-logo-morph][data-logo-lottie-handoff]
    > .logo-morph__lottie,
  header .logo-block:not(:hover):not(:focus-visible)
    [data-logo-morph][data-logo-lottie-rest]
    > .logo-morph__mask,
  header .logo-block:not(:hover):not(:focus-visible)
    [data-logo-morph][data-logo-lottie-rest]
    > .logo-morph__hover-lottie {
    transition: none !important;
    transition-delay: 0ms !important;
  }

  .logo-morph[data-logo-lottie-handoff="1"][data-has-lottie="1"]:not([data-logo-hover-lottie="1"])
    > .logo-morph__mask {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 3 !important;
    pointer-events: none !important;
    transition: none !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .logo-morph[data-logo-hover-lottie="1"][data-logo-lottie-handoff="1"][data-has-lottie="1"]
    > .logo-morph__hover-lottie {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 3 !important;
    pointer-events: none !important;
    transition: none !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .logo-morph[data-logo-hover-lottie="1"][data-logo-lottie-handoff="1"][data-has-lottie="1"]
    > .logo-morph__mask,
  .logo-morph[data-logo-hover-lottie="1"][data-logo-lottie-handoff="1"][data-has-lottie="1"]
    > img.logo-morph__logo {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: none !important;
  }

  .logo-morph[data-logo-lottie-handoff="1"][data-has-lottie="1"] > .logo-morph__lottie {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 2 !important;
    transition: none !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .logo-morph[data-logo-lottie-handoff="1"][data-has-lottie="1"] > .logo-morph__lottie,
  .logo-morph[data-logo-lottie-handoff="1"][data-has-lottie="1"] > .logo-morph__lottie svg {
    will-change: opacity;
  }

  .logo-morph__logo,
  .logo-morph__mask {
    filter: none;
  }

  /* Tween Lottie (rAF) + phase post-dé-shrink : pas de survol pendant le tween. */
  header[data-logo-lottie-tweening="1"] .logo-block {
    pointer-events: none !important;
  }

  /*
   Alternance logos (évite « deux logos ») : hors survol/clavier le logo principal
   réapparaît avec un léger retard (= durée du fondu du hover) pour ne pas se superposer
   au hover qui s'éteint. Au survol : masque/img/Lottie partent vite, hover entre en fondu.
   Avec .header-shrunk : pas d'alternate au survol/focus (voir header:not(.header-shrunk) sur les règles hover).
   Width/height/… (durée --header-shrink-layout-ms, alignée Lottie) comme main.css.
  */
  header .logo-block:not(:hover):not(:focus-visible) [data-logo-morph] > img.logo-morph__logo,
  header .logo-block:not(:hover):not(:focus-visible) [data-logo-morph] > .logo-morph__mask,
  header .logo-block:not(:hover):not(:focus-visible) [data-logo-morph] > .logo-morph__lottie {
    z-index: 1 !important;
    transition:
      width calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1),
      max-width calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1),
      min-width calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1),
      height calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1),
      min-height calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1),
      max-height calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1),
      padding calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1),
      padding-inline calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1),
      padding-block calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1),
      padding-top calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1),
      padding-bottom calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1),
      font-size calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1),
      line-height calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0ms linear !important,
      opacity var(--logo-main-show-duration, 0.06s) var(--logo-crossfade-ease, cubic-bezier(0.45, 0, 0.2, 1))
        var(--logo-hover-fade-duration, 0.26s) !important;
  }

  header:not(.header-shrunk) .logo-block:is(:hover, :focus-visible) [data-logo-morph] > img.logo-morph__logo,
  header:not(.header-shrunk) .logo-block:is(:hover, :focus-visible) [data-logo-morph] > .logo-morph__mask,
  header:not(.header-shrunk) .logo-block:is(:hover, :focus-visible) [data-logo-morph] > .logo-morph__lottie {
    z-index: 1 !important;
    transition:
      width calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1),
      max-width calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1),
      min-width calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1),
      height calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1),
      min-height calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1),
      max-height calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1),
      padding calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1),
      padding-inline calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1),
      padding-block calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1),
      padding-top calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1),
      padding-bottom calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1),
      font-size calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1),
      line-height calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0ms linear !important,
      opacity var(--logo-main-hide-duration, 0.05s) var(--logo-crossfade-ease, cubic-bezier(0.45, 0, 0.2, 1)) 0ms !important;
  }

  header .logo-block [data-logo-morph] > .logo-morph__hover {
    z-index: 10 !important;
    transition:
      visibility 0ms linear !important,
      opacity var(--logo-hover-fade-duration, 0.26s) var(--logo-crossfade-ease, cubic-bezier(0.45, 0, 0.2, 1)) !important;
  }

  /* Logo réduit : au survol, pas d'alternate — opacités stables (pas de délai type « après hover »). */
  header.header-shrunk .logo-block:is(:hover, :focus-visible) [data-logo-morph] > img.logo-morph__logo,
  header.header-shrunk .logo-block:is(:hover, :focus-visible) [data-logo-morph] > .logo-morph__mask,
  header.header-shrunk .logo-block:is(:hover, :focus-visible) [data-logo-morph] > .logo-morph__lottie {
    z-index: 1 !important;
    transition:
      width calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1),
      max-width calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1),
      min-width calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1),
      height calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1),
      min-height calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1),
      max-height calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1),
      padding calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1),
      padding-inline calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1),
      padding-block calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1),
      padding-top calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1),
      padding-bottom calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1),
      font-size calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1),
      line-height calc(var(--header-shrink-layout-ms, 1000) * 1ms) cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0ms linear !important,
      opacity 0ms linear 0ms !important;
  }

  /* Shrunk + classes Tailwind (group-hover) : rétablit masque/img comme hors survol. */
  body[data-logo-has-color="1"]
    header.header-shrunk
    .logo-block:is(:hover, :focus-visible)
    .logo-morph
    > .logo-morph__mask {
    opacity: 1 !important;
  }
  body[data-logo-has-color="1"]
    header.header-shrunk
    .logo-block:is(:hover, :focus-visible)
    .logo-morph
    > img.logo-morph__logo {
    opacity: 0 !important;
  }
  body[data-header-has-text="1"]:not([data-logo-has-color="1"])
    header.header-shrunk
    .logo-block:is(:hover, :focus-visible)
    .logo-morph
    > .logo-morph__mask {
    opacity: 1 !important;
  }
  body[data-header-has-text="1"]:not([data-logo-has-color="1"])
    header.header-shrunk
    .logo-block:is(:hover, :focus-visible)
    .logo-morph
    > img.logo-morph__logo {
    opacity: 0 !important;
  }

  header .logo-block:not(:hover):not(:focus-visible) [data-logo-morph] > img.logo-morph__logo,
  header .logo-block:not(:hover):not(:focus-visible) [data-logo-morph] > .logo-morph__mask,
  header .logo-block:not(:hover):not(:focus-visible) [data-logo-morph] > .logo-morph__lottie {
    visibility: visible !important;
  }

  .logo-morph[data-has-lottie="1"] .logo-morph__lottie,
  .logo-morph[data-has-lottie="1"] .logo-morph__lottie svg,
  .logo-morph[data-logo-hover-lottie="1"] .logo-morph__hover-lottie,
  .logo-morph[data-logo-hover-lottie="1"] .logo-morph__hover-lottie svg {
    pointer-events: none !important;
  }

  /* Survol : lecture timeline sur le même Lottie (frame 0 déjà visible au repos). */
  @media (prefers-reduced-motion: no-preference) {
    header:not(.header-shrunk) [data-logo-morph][data-logo-hover-lottie-active="1"] > .logo-morph__hover-lottie,
    header:not(.header-shrunk) [data-logo-morph][data-logo-hover-lottie-active="1"] .logo-morph__hover-lottie,
    header:not(.header-shrunk) [data-logo-morph][data-logo-hover-lottie-active="1"] .logo-morph__hover-lottie svg {
      opacity: 1 !important;
      visibility: visible !important;
      display: block !important;
      z-index: 12 !important;
    }

    header:not(.header-shrunk) [data-logo-morph][data-logo-hover-lottie="1"][data-logo-hover-lottie-active="1"]
      > .logo-morph__mask,
    header:not(.header-shrunk) [data-logo-morph][data-logo-hover-lottie="1"][data-logo-hover-lottie-active="1"]
      > img.logo-morph__logo,
    header:not(.header-shrunk) [data-logo-morph][data-logo-hover-lottie-active="1"] > .logo-morph__lottie,
    header:not(.header-shrunk) [data-logo-morph][data-logo-hover-lottie-active="1"] .logo-morph__lottie,
    header:not(.header-shrunk) [data-logo-morph][data-logo-hover-lottie-active="1"] .logo-morph__lottie svg,
    header:not(.header-shrunk) [data-logo-morph][data-logo-hover-lottie-active="1"] > .logo-morph__hover {
      opacity: 0 !important;
      visibility: hidden !important;
      transition: none !important;
    }
  }
  body[data-logo-has-color="1"] header:not(.header-shrunk) .logo-block:hover [data-logo-morph][data-logo-animated="0"] > .logo-morph__mask,
  body[data-logo-has-color="1"] header:not(.header-shrunk) .logo-block:hover [data-logo-morph][data-logo-animated="0"] .logo-morph__mask,
  body[data-logo-has-color="1"] header:not(.header-shrunk) .logo-block:hover [data-logo-morph][data-logo-animated="0"] > img.logo-morph__logo,
  body[data-logo-has-color="1"] header:not(.header-shrunk) .logo-block:hover [data-logo-morph][data-logo-animated="0"] img.logo-morph__logo,
  body[data-logo-has-color="1"] header:not(.header-shrunk) .logo-block:hover [data-logo-morph][data-logo-animated="0"] > .logo-morph__lottie,
  body[data-logo-has-color="1"] header:not(.header-shrunk) .logo-block:hover [data-logo-morph][data-logo-animated="0"] .logo-morph__lottie,
  body[data-logo-has-color="1"] header:not(.header-shrunk) .logo-block:hover [data-logo-morph][data-logo-animated="0"] .logo-morph__lottie svg,
  body[data-logo-has-color="1"] header:not(.header-shrunk) .logo-block:focus-visible [data-logo-morph][data-logo-animated="0"] > .logo-morph__mask,
  body[data-logo-has-color="1"] header:not(.header-shrunk) .logo-block:focus-visible [data-logo-morph][data-logo-animated="0"] .logo-morph__mask,
  body[data-logo-has-color="1"] header:not(.header-shrunk) .logo-block:focus-visible [data-logo-morph][data-logo-animated="0"] > img.logo-morph__logo,
  body[data-logo-has-color="1"] header:not(.header-shrunk) .logo-block:focus-visible [data-logo-morph][data-logo-animated="0"] img.logo-morph__logo,
  body[data-logo-has-color="1"] header:not(.header-shrunk) .logo-block:focus-visible [data-logo-morph][data-logo-animated="0"] > .logo-morph__lottie,
  body[data-logo-has-color="1"] header:not(.header-shrunk) .logo-block:focus-visible [data-logo-morph][data-logo-animated="0"] .logo-morph__lottie,
  body[data-logo-has-color="1"] header:not(.header-shrunk) .logo-block:focus-visible [data-logo-morph][data-logo-animated="0"] .logo-morph__lottie svg,
  body[data-header-has-text="1"]:not([data-logo-has-color="1"]) header:not(.header-shrunk) .logo-block:hover [data-logo-morph][data-logo-animated="0"] > .logo-morph__mask,
  body[data-header-has-text="1"]:not([data-logo-has-color="1"]) header:not(.header-shrunk) .logo-block:hover [data-logo-morph][data-logo-animated="0"] .logo-morph__mask,
  body[data-header-has-text="1"]:not([data-logo-has-color="1"]) header:not(.header-shrunk) .logo-block:hover [data-logo-morph][data-logo-animated="0"] > img.logo-morph__logo,
  body[data-header-has-text="1"]:not([data-logo-has-color="1"]) header:not(.header-shrunk) .logo-block:hover [data-logo-morph][data-logo-animated="0"] img.logo-morph__logo,
  body[data-header-has-text="1"]:not([data-logo-has-color="1"]) header:not(.header-shrunk) .logo-block:hover [data-logo-morph][data-logo-animated="0"] > .logo-morph__lottie,
  body[data-header-has-text="1"]:not([data-logo-has-color="1"]) header:not(.header-shrunk) .logo-block:hover [data-logo-morph][data-logo-animated="0"] .logo-morph__lottie,
  body[data-header-has-text="1"]:not([data-logo-has-color="1"]) header:not(.header-shrunk) .logo-block:hover [data-logo-morph][data-logo-animated="0"] .logo-morph__lottie svg,
  body[data-header-has-text="1"]:not([data-logo-has-color="1"]) header:not(.header-shrunk) .logo-block:focus-visible [data-logo-morph][data-logo-animated="0"] > .logo-morph__mask,
  body[data-header-has-text="1"]:not([data-logo-has-color="1"]) header:not(.header-shrunk) .logo-block:focus-visible [data-logo-morph][data-logo-animated="0"] .logo-morph__mask,
  body[data-header-has-text="1"]:not([data-logo-has-color="1"]) header:not(.header-shrunk) .logo-block:focus-visible [data-logo-morph][data-logo-animated="0"] > img.logo-morph__logo,
  body[data-header-has-text="1"]:not([data-logo-has-color="1"]) header:not(.header-shrunk) .logo-block:focus-visible [data-logo-morph][data-logo-animated="0"] img.logo-morph__logo,
  body[data-header-has-text="1"]:not([data-logo-has-color="1"]) header:not(.header-shrunk) .logo-block:focus-visible [data-logo-morph][data-logo-animated="0"] > .logo-morph__lottie,
  body[data-header-has-text="1"]:not([data-logo-has-color="1"]) header:not(.header-shrunk) .logo-block:focus-visible [data-logo-morph][data-logo-animated="0"] .logo-morph__lottie,
  body[data-header-has-text="1"]:not([data-logo-has-color="1"]) header:not(.header-shrunk) .logo-block:focus-visible [data-logo-morph][data-logo-animated="0"] .logo-morph__lottie svg,
  header:not(.header-shrunk) .logo-block:hover [data-logo-morph][data-logo-animated="0"] > .logo-morph__mask,
  header:not(.header-shrunk) .logo-block:hover [data-logo-morph][data-logo-animated="0"] .logo-morph__mask,
  header:not(.header-shrunk) .logo-block:hover [data-logo-morph][data-logo-animated="0"] > img.logo-morph__logo,
  header:not(.header-shrunk) .logo-block:hover [data-logo-morph][data-logo-animated="0"] img.logo-morph__logo,
  header:not(.header-shrunk) .logo-block:hover [data-logo-morph][data-logo-animated="0"] > .logo-morph__lottie,
  header:not(.header-shrunk) .logo-block:hover [data-logo-morph][data-logo-animated="0"] .logo-morph__lottie,
  header:not(.header-shrunk) .logo-block:hover [data-logo-morph][data-logo-animated="0"] .logo-morph__lottie svg,
  header:not(.header-shrunk) .logo-block:focus-visible [data-logo-morph][data-logo-animated="0"] > .logo-morph__mask,
  header:not(.header-shrunk) .logo-block:focus-visible [data-logo-morph][data-logo-animated="0"] .logo-morph__mask,
  header:not(.header-shrunk) .logo-block:focus-visible [data-logo-morph][data-logo-animated="0"] > img.logo-morph__logo,
  header:not(.header-shrunk) .logo-block:focus-visible [data-logo-morph][data-logo-animated="0"] img.logo-morph__logo,
  header:not(.header-shrunk) .logo-block:focus-visible [data-logo-morph][data-logo-animated="0"] > .logo-morph__lottie,
  header:not(.header-shrunk) .logo-block:focus-visible [data-logo-morph][data-logo-animated="0"] .logo-morph__lottie,
  header:not(.header-shrunk) .logo-block:focus-visible [data-logo-morph][data-logo-animated="0"] .logo-morph__lottie svg {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  /* Repos : logo 1 redevient peignable (évite que des calques restent « actifs » sous le hover) */
  header .logo-block:not(:hover):not(:focus-visible) [data-logo-morph] > .logo-morph__mask,
  header .logo-block:not(:hover):not(:focus-visible) [data-logo-morph] > img.logo-morph__logo,
  header .logo-block:not(:hover):not(:focus-visible) [data-logo-morph] > .logo-morph__lottie,
  header .logo-block:not(:hover):not(:focus-visible) [data-logo-morph] .logo-morph__lottie,
  header .logo-block:not(:hover):not(:focus-visible) [data-logo-morph] .logo-morph__lottie svg,
  header.header-shrunk .logo-block:is(:hover, :focus-visible) [data-logo-morph] > .logo-morph__mask,
  header.header-shrunk .logo-block:is(:hover, :focus-visible) [data-logo-morph] > img.logo-morph__logo,
  header.header-shrunk .logo-block:is(:hover, :focus-visible) [data-logo-morph] > .logo-morph__lottie,
  header.header-shrunk .logo-block:is(:hover, :focus-visible) [data-logo-morph] .logo-morph__lottie,
  header.header-shrunk .logo-block:is(:hover, :focus-visible) [data-logo-morph] .logo-morph__lottie svg {
    visibility: visible !important;
  }

  header.header-shrunk .logo-block:is(:hover, :focus-visible) [data-logo-morph] > .logo-morph__hover-lottie,
  header.header-shrunk .logo-block:is(:hover, :focus-visible) [data-logo-morph] .logo-morph__hover-lottie,
  header.header-shrunk .logo-block:is(:hover, :focus-within) [data-logo-morph] > .logo-morph__hover {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  /* Leave : ancien hover PNG/SVG seulement (pas le Lottie hover = logo repos). */
  header
    .logo-block:not(:hover):not(:focus-within)
    [data-logo-morph]:not([data-logo-hover-lottie-active="1"])
    > .logo-morph__hover {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  .logo-morph__video {
    width: 100%;
    height: 100%;
    display: none;
    object-fit: contain;
    object-position: left center;
  }

  .logo-morph__lottie {
    width: 100%;
    height: 100%;
    display: none;
  }

  /* Lottie : le SVG gère le ratio via preserveAspectRatio meet (pas de transform scale). */
  .logo-morph__lottie svg {
    width: 100% !important;
    height: 100% !important;
    display: block;
    transform: none !important;
  }

  /* Le Lottie doit suivre la couleur de logo definie depuis le Panel
     (meme logique que le logo SVG/masque via currentColor). */
  .logo-morph__lottie,
  .logo-morph__lottie svg {
    color: inherit;
  }

  .logo-morph__lottie svg [fill]:not([fill="none"]) {
    fill: currentColor !important;
  }

  .logo-morph__lottie svg [stroke]:not([stroke="none"]) {
    stroke: currentColor !important;
  }

  .logo-morph[data-has-webm="1"] .logo-morph__video {
    display: block;
  }

  .logo-morph[data-has-webm="1"] .logo-morph__base {
    display: none;
  }

  /* Shrink scroll : masquer le Lottie hover (seul astre.json est visible). */
  .logo-morph[data-logo-hover-lottie="1"][data-has-lottie="1"]:not([data-logo-lottie-rest]):not(
      [data-logo-lottie-handoff]
    )
    > .logo-morph__hover-lottie {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: none !important;
  }

  /* Masquer main/img seulement quand le Lottie shrink est affiché (pas au repos ni handoff). */
  .logo-morph[data-has-lottie="1"]:not([data-logo-lottie-rest]):not([data-logo-lottie-handoff])
    .logo-morph__logo,
  .logo-morph[data-has-lottie="1"]:not([data-logo-lottie-rest]):not([data-logo-lottie-handoff])
    .logo-morph__mask,
  .logo-morph[data-has-lottie="1"]:not([data-logo-lottie-rest]):not([data-logo-lottie-handoff])
    .logo-morph__base,
  .logo-morph[data-has-lottie="1"]:not([data-logo-lottie-rest]):not([data-logo-lottie-handoff])
    .logo-morph__video {
    display: none;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: none !important;
  }

  .logo-morph[data-has-lottie="1"] .logo-morph__lottie {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  /* Le logo est un élément clé: on lui donne plus d'air */
  header .logo-block {
    max-width: clamp(18rem, 26vw, 26rem);
    /*
     Alternance main ↔ hover (--logo-crossfade-ease) : masque/img sortent vite au survol ;
     le logo hover s'éteint puis le main revient avec léger retard (évite la superposition).
    */
    --logo-crossfade-ease: cubic-bezier(0.45, 0, 0.2, 1);
    --logo-main-hide-duration: 0.05s;
    --logo-main-show-duration: 0.06s;
    --logo-hover-fade-duration: 0.26s;
    /* ?logoHoverDebug — masque : délai + fondu */
    --logo-replace-mask-debug-delay: 0.12s;
    --logo-replace-mask-debug-duration: 0.28s;
    --logo-replace-ease-out: cubic-bezier(0.42, 0, 0.18, 1);
  }

  @media (prefers-reduced-motion: reduce) {
    header .logo-block {
      --logo-main-hide-duration: 0.01ms;
      --logo-main-show-duration: 0.01ms;
      --logo-hover-fade-duration: 0.01ms;
      --logo-replace-mask-debug-delay: 0s;
      --logo-replace-mask-debug-duration: 0.01ms;
    }
  }

  /* NOTE : les anciennes règles posant :
       header figure a.logo-block { min-height: calc(--nav-item-height * 1.1) }
       header.header-floating figure a.logo-block { min-height: calc(--nav-item-height * 1.1) }
       header.header-floating .logo-morph { height: calc(--nav-item-height * 1.1) }
     ont été retirées. Elles introduisaient une hauteur "gonflée" (×1.1)
     uniquement à l'ajout de la classe `header-floating`, ce qui provoquait
     un saut vertical juste avant le shrink : au moment où `header-floating`
     était posée, la hauteur passait instantanément de --nav-item-height à
     --nav-item-height * 1.1, avant de retomber fluidement via la transition
     vers la taille `shrunk`. La source unique de vérité pour la hauteur du
     logo (et des boutons) est maintenant `main.css`, qui fige
     `height/min-height/max-height: var(--nav-item-height)` dans TOUS les
     états (normal, floating, shrunk) pour permettre une transition animable
     sans rupture. */

  /* Breadcrumb : padding compact uniquement avec .header-shrunk (pendant
     shrink + reverse Lottie ; retiré après le morph, puis expansion CSS). */
  header.header-floating.header-shrunk .breadcrumb .button {
    --vpadding: 0 !important;
    --hpadding: 0 !important;
  }

  /* Boutons principaux (menu deploye / referentiel) : au shrink, SEULE
     la hauteur doit changer (via --vpadding). Le padding horizontal
     (--hpadding) reste inchange pour que la largeur et l'emplacement
     des boutons ne bougent PAS. */
  header.header-floating.header-shrunk .actions-wrapper .action-item > .button.header-nav-button {
    --vpadding: 0 !important;
  }

  /* Evite le flash visuel au changement de page (Turbo):
     pendant l'hydratation, on neutralise temporairement les transitions
     de taille/position du header et du logo. */
  header.header-preload,
  header.header-preload .logo-block,
  header.header-preload .logo-morph,
  header.header-preload .logo-morph__logo,
  header.header-preload .logo-morph__lottie,
  header.header-preload .actions-wrapper,
  header.header-preload .actions-wrapper .action-item > .button {
    transition: none !important;
    animation: none !important;
  }

  /* Pendant preload, on force explicitement la taille "grande" du logo,
     meme si un snapshot Turbo contient encore .header-shrunk. */
  header.header-preload {
    --nav-item-height: calc(clamp(14.5rem, 18vw, 19rem) * 180 / 700) !important;
  }

  /* Mobile hors accueil : shrink immédiat, y compris pendant header-preload. */
  @media (max-width: 1021px) {
    body:not(.home) header.header-preload {
      --nav-item-height: calc(clamp(10rem, 12vw, 12.5rem) * 180 / 700) !important;
      padding-top: 1rem !important;
      padding-bottom: 1rem !important;
    }
  }

  /* Debug visuel (désactivé par défaut) :
     ?logoDebug=1 — overlay / data sur le morph ;
     ?logoHoverDebug=1 — calque hover seul ;
     ?logoStackDebug=1 — main + hover superposés ;
     ?logoHoverTune=1 — panneau de réglage fin (0,25px) ;
     ?logoAlignPreview=1 — aperçu vert/orange + largeur/hauteur Lottie. */
  .logo-morph::after {
    content: attr(data-logo-debug);
    position: absolute;
    left: 0;
    bottom: -1.1em;
    font: 12px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    color: #000;
    background: #fff;
    border: 1px solid #000;
    padding: 2px 6px;
    white-space: nowrap;
    display: none;
    z-index: 9999;
  }

  body[data-logo-debug="1"] .logo-morph::after {
    display: inline-block;
  }

  /* Overlay debug global (même si le morph n'existe pas) */
  #logo-debug-overlay {
    position: fixed;
    left: 8px;
    top: 8px;
    z-index: 2147483647;
    font: 12px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    color: #000;
    background: #fff;
    border: 1px solid #000;
    padding: 6px 8px;
    white-space: nowrap;
    display: none;
  }

  body[data-logo-debug="1"] #logo-debug-overlay {
    display: block;
  }

  /* Garde-fous responsive globaux */
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  img,
  svg,
  video,
  canvas {
    max-width: 100%;
    height: auto;
  }

  .referentiel-modal,
  .referentiel-modal * {
    box-sizing: border-box;
  }

  .referentiel-modal[hidden] {
    display: none !important;
  }

  .referentiel-modal {
    --site-content-inline-pad: calc(var(--spacing) * 6);
    --site-popup-dialog-radius: 18px;
    --site-popup-dialog-pad: calc(var(--spacing) * 4);
    --site-popup-dialog-border: 1px solid #ffffff;
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(6.3rem, 9vh, 7.8rem) 1rem 1.25rem;
    box-sizing: border-box;
  }

  /* Pop-ups contact / mentions : gouttières latérales = px-4 du contenu site */
  .site-popup-modal.referentiel-modal {
    --site-popup-modal-gutter: 1rem;
    --site-popup-modal-gutter-inline: var(--site-content-inline-pad);
    --site-popup-modal-gutter-top: var(--site-popup-modal-gutter);
    /* Bas : hauteur du footer (JS --site-popup-footer-height) + marge */
    --site-popup-modal-gutter-bottom: calc(
      var(--site-popup-footer-height, calc(var(--site-popup-modal-gutter) + var(--footer-actions-btn-size, 3rem))) +
        var(--site-popup-modal-gutter) * 0.5
    );
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100vh;
    padding: 0;
    box-sizing: border-box;
    background: transparent;
  }

  @supports (min-height: 100dvh) {
    .site-popup-modal.referentiel-modal {
      min-height: 100dvh;
    }
  }

  .site-popup-modal.referentiel-modal .referentiel-modal__dialog {
    flex: 1 1 auto;
    min-height: 0;
    width: min(1680px, calc(100% - 2 * var(--site-popup-modal-gutter-inline)));
    max-width: calc(100% - 2 * var(--site-popup-modal-gutter-inline));
    height: auto;
    max-height: calc(
      100vh - var(--site-popup-modal-gutter-top) - var(--site-popup-modal-gutter-bottom) -
        env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)
    );
    margin-top: calc(var(--site-popup-modal-gutter-top) + env(safe-area-inset-top, 0px));
    margin-right: var(--site-popup-modal-gutter-inline);
    margin-bottom: calc(var(--site-popup-modal-gutter-bottom) + env(safe-area-inset-bottom, 0px));
    margin-left: var(--site-popup-modal-gutter-inline);
    box-sizing: border-box;
  }

  @supports (height: 100dvh) {
    .site-popup-modal.referentiel-modal .referentiel-modal__dialog {
      max-height: calc(
        100dvh - var(--site-popup-modal-gutter-top) - var(--site-popup-modal-gutter-bottom) -
          env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)
      );
    }
  }

  .referentiel-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
  }

  /* Contact / mentions : fond plat (couleur de page), sans assombrissement ni flou */
  .site-popup-modal .referentiel-modal__backdrop {
    background: var(--page-bg, var(--bg-body, var(--color-background, #ffffff))) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .site-popup-modal .referentiel-modal__dialog {
    background: #000;
    border: var(--site-popup-dialog-border);
    border-radius: var(--site-popup-dialog-radius);
    box-shadow: none !important;
    filter: none !important;
  }

  .site-popup-modal .referentiel-modal__body,
  .site-popup-modal .referentiel-modal__frame {
    background: #000;
  }

  .site-popup-modal .referentiel-modal__body {
    display: flex;
    flex-direction: column;
    padding: var(--site-popup-dialog-pad);
    border-radius: calc(var(--site-popup-dialog-radius) - 2px);
  }

  .site-popup-modal .referentiel-modal__frame {
    flex: 1 1 auto;
    min-height: 0;
    border-radius: calc(var(--site-popup-dialog-radius) - 4px);
  }

  .referentiel-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(1680px, 100%);
    height: calc(100vh - clamp(5.5rem, 8vh, 7rem) - 1.7rem);
    background: #000;
    border: var(--site-popup-dialog-border);
    border-radius: var(--site-popup-dialog-radius);
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Référentiel : bordure blanche sur fond noir (comme contact / mentions) */
  .referentiel-modal:not(.site-popup-modal) .referentiel-modal__body,
  .referentiel-modal:not(.site-popup-modal) .referentiel-modal__frame {
    background: #fff;
  }

  @supports (height: 100dvh) {
    .referentiel-modal__dialog {
      height: calc(100dvh - clamp(5.5rem, 8vh, 7rem) - 1.7rem);
    }
  }

  .referentiel-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    border-radius: calc(var(--site-popup-dialog-radius) - 2px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .referentiel-modal__frame {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    height: 100%;
    border: 0;
    display: block;
    background: #fff;
    border-radius: calc(var(--site-popup-dialog-radius) - 4px);
  }

  body.referentiel-modal-open {
    overflow: hidden !important;
  }

  .referentiel-modal__floating-close[hidden] {
    display: none !important;
  }

  .referentiel-modal__floating-close {
    position: fixed;
    z-index: 13000;
    top: var(--referentiel-btn-top, 1rem);
    left: var(--referentiel-btn-left, 1rem);
    width: var(--referentiel-close-size, var(--nav-item-height, 3.5rem));
    height: var(--referentiel-close-size, var(--nav-item-height, 3.5rem));
    min-width: var(--referentiel-close-size, var(--nav-item-height, 3.5rem));
    min-height: var(--referentiel-close-size, var(--nav-item-height, 3.5rem));
    max-width: var(--referentiel-close-size, var(--nav-item-height, 3.5rem));
    max-height: var(--referentiel-close-size, var(--nav-item-height, 3.5rem));
    margin: 0;
    border: 1px solid #ffffff;
    background: #000000;
    color: #ffffff;
    border-radius: var(--referentiel-btn-radius, 9999px);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "David", serif;
  /* Croix × seule agrandie ; reste dans la pastille (--nav-item-height) */
    font-size: min(
      clamp(1.55rem, 2.65vw, 2.15rem),
      calc(var(--referentiel-close-size, var(--nav-item-height, 3.5rem)) * 0.55)
    );
    font-weight: inherit;
    line-height: 1;
    transform: none;
    filter: none;
    opacity: 1;
    box-sizing: border-box;
    padding: 0;
    overflow: visible;
    flex-shrink: 0;
  }

  #referentiel-modal-floating-close.referentiel-modal__floating-close {
    width: var(--referentiel-btn-width, var(--referentiel-close-size, var(--nav-item-height, 3.5rem)));
    height: var(--referentiel-btn-height, var(--referentiel-close-size, var(--nav-item-height, 3.5rem)));
    min-width: var(--referentiel-btn-width, var(--referentiel-close-size, var(--nav-item-height, 3.5rem)));
    min-height: var(--referentiel-btn-height, var(--referentiel-close-size, var(--nav-item-height, 3.5rem)));
    max-width: var(--referentiel-btn-width, var(--referentiel-close-size, var(--nav-item-height, 3.5rem)));
    max-height: var(--referentiel-btn-height, var(--referentiel-close-size, var(--nav-item-height, 3.5rem)));
    box-sizing: border-box;
  }

  #referentiel-modal-floating-close.referentiel-modal__floating-close,
  #referentiel-modal-floating-close.referentiel-modal__floating-close:is(:hover, :focus-visible) {
    background: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
    box-shadow: none !important;
  }

  body[data-contrast-mode="bw"] .referentiel-modal__floating-close:not(.site-popup-modal__floating-close--unused) {
    background: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
  }

  .site-popup-modal__floating-close--unused {
    display: none !important;
  }

  /* Contact / mentions (mobile) : croix flottante au même emplacement que le référentiel */
  @media (max-width: 1021px) {
    body.site-popup-modal-open.site-popup-modal--mobile-floating-close
      #site-popup-modal-floating-close.referentiel-modal__floating-close {
      display: inline-flex !important;
    }
  }

  /*
   * Contact / mentions ouverts : pas de dégradé de flou sous le header
   * (mask-image linear-gradient sur ::before / ::after).
   */
  body.site-popup-modal-open header::before,
  body.site-popup-modal-open header::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  /*
   * Contact / mentions : le footer doit passer AU-DESSUS de l’overlay (z-index 12000).
   * Sans z-index sur <footer>, un z-index sur l’enfant ne suffit pas.
   */
  body.site-popup-modal-open > footer {
    position: relative;
    z-index: 13002;
    pointer-events: none;
  }

  body.site-popup-modal-open nav.footer-actions,
  body.site-popup-modal-open nav.footer-actions * {
    pointer-events: auto;
  }

  /*
   * Pop-up ouverte : pastille compacte (état « fermé » du footer), pas l’étirement au survol.
   * Le libellé est masqué ; seul le × est visible (hors règle transparent du footer).
   */
  body.site-popup-modal-open nav.footer-actions .action-item.is-site-popup-active {
    z-index: 3;
  }

  body.site-popup-modal-open nav.footer-actions a[data-site-popup-modal-trigger].is-site-popup-open,
  body.site-popup-modal-open nav.footer-actions .action-item:not(:hover) > a[data-site-popup-modal-trigger].is-site-popup-open,
  body.site-popup-modal-open nav.footer-actions .action-item.is-site-popup-active > a.is-site-popup-open,
  body[data-footer-has-text="1"].site-popup-modal-open footer nav.footer-actions .action-item:not(:hover) > a.is-site-popup-open,
  body[data-footer-buttons-has-text="1"].site-popup-modal-open footer .actions-wrapper .action-item:not(:hover) > a.is-site-popup-open {
    width: var(--footer-actions-btn-size, 3rem) !important;
    min-width: var(--footer-actions-btn-size, 3rem) !important;
    max-width: var(--footer-actions-btn-size, 3rem) !important;
    height: var(--footer-actions-btn-size, 3rem) !important;
    min-height: var(--footer-actions-btn-size, 3rem) !important;
    max-height: var(--footer-actions-btn-size, 3rem) !important;
    padding: 0 !important;
    border: 1px solid #ffffff !important;
    border-radius: 9999px !important;
    transform: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    opacity: 1 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background-color: #000000 !important;
    border-color: #ffffff !important;
    font-size: calc(var(--footer-actions-btn-size, 3rem) * 0.52) !important;
    line-height: 1 !important;
  }

  body.site-popup-modal-open nav.footer-actions .action-item.is-site-popup-active:hover > a.is-site-popup-open,
  body.site-popup-modal-open nav.footer-actions a[data-site-popup-modal-trigger].is-site-popup-open:hover {
    width: var(--footer-actions-btn-size, 3rem) !important;
    min-width: var(--footer-actions-btn-size, 3rem) !important;
    max-width: var(--footer-actions-btn-size, 3rem) !important;
    padding: 0 !important;
    background-color: #000000 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid #ffffff !important;
  }

  body[data-footer-buttons-has-bg="1"].site-popup-modal-open
    footer
    .action-item.is-site-popup-active
    > a.is-site-popup-open {
    background: #000000 !important;
    border: 1px solid #ffffff !important;
    border-color: #ffffff !important;
  }

  @media (min-width: 768px) and (hover: hover) {
    body.site-popup-modal-open nav.footer-actions .action-item.is-site-popup-active:hover > .button,
    body.site-popup-modal-open nav.footer-actions .action-item.is-site-popup-active:last-child:hover > .button {
      width: var(--footer-actions-btn-size, 3rem) !important;
      max-width: var(--footer-actions-btn-size, 3rem) !important;
    }
  }

  @media (max-width: 1099px) {
    body.site-popup-modal-open nav.footer-actions .action-item.is-site-popup-active:focus-within > .button:not(.is-site-popup-open) {
      width: var(--footer-actions-btn-size, 3rem) !important;
      max-width: var(--footer-actions-btn-size, 3rem) !important;
      padding: 0 !important;
      background-color: var(--footer-button-bg, var(--footer-btn-bg, #000)) !important;
      color: transparent !important;
      -webkit-text-fill-color: transparent !important;
    }
  }

  /* Mobile : pop-ups = colonne contenu (px-4) + contour blanc / coins arrondis */
  @media (max-width: 1023px) {
    .referentiel-modal {
      --site-popup-dialog-radius: 14px;
      --site-popup-dialog-pad: calc(var(--spacing) * 4);
    }

    .referentiel-modal:not(.site-popup-modal) {
      padding:
        clamp(5rem, 8dvh, 6rem)
        var(--site-content-inline-pad)
        0.75rem;
      align-items: stretch;
    }

    .site-popup-modal.referentiel-modal {
      --site-popup-modal-gutter-inline: 0;
      --site-popup-modal-gutter-top: clamp(5rem, 8dvh, 6rem);
      --site-popup-modal-gutter-bottom: calc(
        var(--site-popup-footer-height, 0px) + 0.75rem
      );
      padding-left: var(--site-content-inline-pad);
      padding-right: var(--site-content-inline-pad);
      align-items: stretch;
      min-height: 100vh;
    }

    .site-popup-modal.referentiel-modal .referentiel-modal__backdrop {
      background: var(--page-bg, var(--bg-body, var(--color-background, #ffffff))) !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }

    .site-popup-modal.referentiel-modal .referentiel-modal__dialog,
    .referentiel-modal:not(.site-popup-modal) .referentiel-modal__dialog {
      width: 100% !important;
      max-width: 100% !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      border: var(--site-popup-dialog-border) !important;
      border-radius: var(--site-popup-dialog-radius) !important;
      background: #000 !important;
    }

    .site-popup-modal.referentiel-modal .referentiel-modal__dialog {
      box-shadow: none !important;
    }

    .referentiel-modal:not(.site-popup-modal) .referentiel-modal__dialog {
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16) !important;
    }

    .site-popup-modal.referentiel-modal .referentiel-modal__body,
    .referentiel-modal:not(.site-popup-modal) .referentiel-modal__body {
      border-radius: calc(var(--site-popup-dialog-radius) - 2px) !important;
    }

    @supports (min-height: 100dvh) {
      .site-popup-modal.referentiel-modal {
        min-height: 100dvh;
      }
    }

    /* Référentiel : taille header (contact/mentions = bouton footer en place) */
    .referentiel-modal__floating-close:not(.site-popup-modal__floating-close--unused) {
      width: var(--referentiel-close-size, calc(clamp(14.5rem, 18vw, 19rem) * 180 / 700));
      height: var(--referentiel-close-size, calc(clamp(14.5rem, 18vw, 19rem) * 180 / 700));
      min-width: var(--referentiel-close-size, calc(clamp(14.5rem, 18vw, 19rem) * 180 / 700));
      min-height: var(--referentiel-close-size, calc(clamp(14.5rem, 18vw, 19rem) * 180 / 700));
      max-width: var(--referentiel-close-size, calc(clamp(14.5rem, 18vw, 19rem) * 180 / 700));
      max-height: var(--referentiel-close-size, calc(clamp(14.5rem, 18vw, 19rem) * 180 / 700));
      border-radius: 9999px;
      font-size: min(
        clamp(1.45rem, 4vw, 1.95rem),
        calc(var(--referentiel-close-size, calc(clamp(14.5rem, 18vw, 19rem) * 180 / 700)) * 0.55)
      );
    }
  }

  @media (max-width: 640px) {
    .referentiel-modal {
      --site-popup-dialog-radius: 12px;
    }

    .referentiel-modal:not(.site-popup-modal) {
      padding:
        max(4.25rem, calc(env(safe-area-inset-top, 0px) + 3.6rem))
        var(--site-content-inline-pad)
        max(0.5rem, env(safe-area-inset-bottom, 0px));
    }

    .site-popup-modal.referentiel-modal {
      --site-popup-modal-gutter-top: max(4.25rem, calc(env(safe-area-inset-top, 0px) + 3.6rem));
      --site-popup-modal-gutter-bottom: calc(
        var(--site-popup-footer-height, 0px) + max(0.5rem, env(safe-area-inset-bottom, 0px))
      );
      min-height: 100vh;
    }

    .site-popup-modal.referentiel-modal .referentiel-modal__dialog {
      /* Le gutter-top intègre déjà la safe-area : éviter un double décalage */
      margin-top: var(--site-popup-modal-gutter-top);
      margin-bottom: var(--site-popup-modal-gutter-bottom);
    }

    @supports (min-height: 100dvh) {
      .site-popup-modal.referentiel-modal {
        min-height: 100dvh;
      }
    }

    .referentiel-modal:not(.site-popup-modal) .referentiel-modal__dialog {
      height: calc(100vh - 4.75rem);
      border-radius: var(--site-popup-dialog-radius) !important;
    }

    .site-popup-modal.referentiel-modal .referentiel-modal__dialog {
      flex: 1 1 auto;
      min-height: 0;
      height: auto;
      filter: none !important;
      border-radius: var(--site-popup-dialog-radius) !important;
    }

    @supports (height: 100dvh) {
      .referentiel-modal:not(.site-popup-modal) .referentiel-modal__dialog {
        height: calc(100dvh - 4.75rem);
      }
      .site-popup-modal.referentiel-modal .referentiel-modal__dialog {
        height: auto;
      }
    }

    .referentiel-modal__floating-close:not(.site-popup-modal__floating-close--unused),
    body.site-popup-modal-open.site-popup-modal--mobile-floating-close
      #site-popup-modal-floating-close.referentiel-modal__floating-close {
      background: #000000 !important;
      color: #ffffff !important;
      border: 1px solid #ffffff !important;
    }

    .referentiel-modal__floating-close:not(.site-popup-modal__floating-close--unused) {
      font-size: min(
        clamp(1.35rem, 4.5vw, 1.85rem),
        calc(var(--referentiel-close-size, calc(clamp(14.5rem, 18vw, 19rem) * 180 / 700)) * 0.55)
      );
      border-radius: 9999px;
    }
  }

  /* Mobile shrink forcé : logo toujours visible (Lottie figé ou masque de secours). */
  @media (max-width: 1021px) {
    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;
    }

    header.header-shrunk .logo-morph:not([data-has-lottie="1"]) > .logo-morph__mask {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
    }

    header.header-shrunk .logo-morph > .logo-morph__hover-lottie {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
    }
  }