.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS *//* =====================================================================
   TRANSMISSIO — en-tête (CSS personnalisée du site part « En-tête »)
   Ce que l'éditeur V4 ne sait pas exprimer : bloc Theme Builder collant,
   menu mobile en popover natif (ouverture, voile, croix), lien actif selon
   la section lue. Crochets : #entete, #entete-menu et attributs data-tr.
   ===================================================================== */

/* 1. Capsule collante --------------------------------------------------------
   Le site part est rendu dans <header class="elementor-location-header"> :
   c'est lui qui colle en haut (le bloc #entete ne mesure que sa propre hauteur).
   Les marges transparentes laissent passer les clics vers la page. */
.elementor-location-header {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 50;
  pointer-events: none;
}

@media (max-width: 600px) {
  .elementor-location-header {
    top: 0;
  }
}

/* Focus : contour décalé de 4 px autour du logotype, intérieur dans le menu. */
#entete [data-tr="logo"]:focus-visible {
  outline-offset: 4px;
}

#entete [data-tr="menu-lien"]:focus-visible {
  outline-offset: -2px;
}

/* 2. Menu mobile : popover natif ---------------------------------------------
   Bouton « Menu » (popovertarget) : Échap, clic hors du panneau et retour du
   focus sont gérés par le navigateur. Panneau blanc posé 8 px sous la capsule. */
#entete-menu:not(:popover-open) {
  display: none;
}

#entete-menu {
  position: fixed;
  inset: 88px 24px auto 24px;
  width: auto;
  height: auto;
  max-height: calc(100dvh - 11rem - env(safe-area-inset-bottom));
  margin: 0;
  border: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform-origin: top center;
  pointer-events: auto;
}

@media (max-width: 767px) {
  #entete-menu {
    inset: 84px 12px auto 12px;
  }
}

/* Le menu mobile n'existe pas en bureau. */
@media (min-width: 992px) {
  #entete-menu:popover-open {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  #entete-menu {
    transition:
      opacity 320ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
      overlay 320ms allow-discrete,
      display 320ms allow-discrete;
  }

  #entete-menu:not(:popover-open) {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }

  @starting-style {
    #entete-menu:popover-open {
      opacity: 0;
      transform: translateY(-10px) scale(0.98);
    }
  }
}

/* Voile bleu nuit très léger derrière le panneau, sous la capsule. */
#entete::before {
  content: "";
  position: fixed;
  inset: 0;
  background-color: rgba(17, 38, 62, 0.2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1), visibility 320ms;
}

@media (max-width: 991px) {
  #entete:has(#entete-menu:popover-open)::before {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* Deux traits qui se croisent à l'ouverture. */
#entete:has(#entete-menu:popover-open) [data-tr="menu-trait-1"] {
  transform: translateY(5px) rotate(45deg);
}

#entete:has(#entete-menu:popover-open) [data-tr="menu-trait-2"] {
  width: 18px;
  transform: translateY(-5px) rotate(-45deg);
}

/* Survol d'un lien du menu (pointeur fin) : pastille de fond, rond blanc. */
@media (hover: hover) {
  #entete [data-tr="menu-lien"]:hover {
    background-color: #F2F4F7;
  }

  #entete [data-tr="menu-lien"]:hover [data-tr="menu-rond"] {
    background-color: #FFFFFF;
  }
}

/* 3. Lien actif selon la section lue -------------------------------------------
   Une ligne de lecture à 40 % de la hauteur d'écran : le lien de la section qui la
   traverse prend le fond #F2F4F7 et le trait oblique orange (sans JavaScript,
   animations pilotées par le défilement ; ignoré par les navigateurs qui ne les
   gèrent pas). Les ancres suivies sont celles de la page d'accueil. */
#entete [data-tr="nav-lien"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 18px;
  height: 4px;
  background-color: #F59C29;
  transform: translateX(-50%) skewX(-19deg);
  transform-origin: bottom left;
  opacity: 0;
  pointer-events: none;
}

@keyframes tr-entete-lien-actif {
  from, to { background-color: #F2F4F7; color: #11263E; }
}

@keyframes tr-entete-marque-active {
  from, to { opacity: 1; }
}

@keyframes tr-entete-rond-actif {
  from, to { background-color: #FFFFFF; }
}

@supports (animation-timeline: view()) and (timeline-scope: --tr) {
  body {
    timeline-scope: --tr-prestations, --tr-process, --tr-a-propos, --tr-faq;
  }

  #prestations { view-timeline: --tr-prestations block; view-timeline-inset: 0px; }
  #process { view-timeline: --tr-process block; view-timeline-inset: 0px; }
  #a-propos { view-timeline: --tr-a-propos block; view-timeline-inset: 0px; }
  #faq { view-timeline: --tr-faq block; view-timeline-inset: 0px; }

  #entete :is([data-tr="nav-lien"], [data-tr="menu-lien"]),
  #entete [data-tr="nav-lien"]::after,
  #entete [data-tr="menu-lien"] :is([data-tr="menu-oblique"], [data-tr="menu-rond"]) {
    animation-duration: auto;
    animation-timing-function: linear;
    animation-fill-mode: none;
    animation-range: cover 60vh cover calc(100% - 40vh);
  }

  #entete :is([data-tr="nav-lien"], [data-tr="menu-lien"]) { animation-name: tr-entete-lien-actif; }
  #entete [data-tr="nav-lien"]::after,
  #entete [data-tr="menu-lien"] [data-tr="menu-oblique"] { animation-name: tr-entete-marque-active; }
  #entete [data-tr="menu-lien"] [data-tr="menu-rond"] { animation-name: tr-entete-rond-actif; }

  #entete [href="#prestations"], #entete [href="#prestations"]::after, #entete [href="#prestations"] [data-tr] { animation-timeline: --tr-prestations; }
  #entete [href="#process"], #entete [href="#process"]::after, #entete [href="#process"] [data-tr] { animation-timeline: --tr-process; }
  #entete [href="#a-propos"], #entete [href="#a-propos"]::after, #entete [href="#a-propos"] [data-tr] { animation-timeline: --tr-a-propos; }
  #entete [href="#faq"], #entete [href="#faq"]::after, #entete [href="#faq"] [data-tr] { animation-timeline: --tr-faq; }
}


/* 4. Mouvements réduits ---------------------------------------------------------
   Le repère de la section lue n'est pas une animation décorative mais un état :
   il est piloté par le défilement (animation-timeline), et la règle générale du
   kit (animation-duration: .01ms) le désactiverait. On le rétablit ici pour que
   l'utilisateur qui réduit les animations garde l'information. */
@media (prefers-reduced-motion: reduce) {
  #entete :is([data-tr="nav-lien"], [data-tr="menu-lien"]),
  #entete [data-tr="nav-lien"]::after,
  #entete [data-tr="menu-lien"] :is([data-tr="menu-oblique"], [data-tr="menu-rond"]) {
    animation-duration: auto !important;
  }
}/* End custom CSS */