/* ==========================================================================
   Systomap — identité visuelle
   Rampe dérivée de l'indigo du logo #5E60CD (OKLCH teinte 278.6)
   ========================================================================== */

:root{
  --sm-ink:        #08091C;
  --sm-ink-2:      #12142D;
  --sm-ink-3:      #20223F;
  --sm-rule:       #2C2F4A;
  --sm-muted:      #595C72;
  --sm-dim:        #9B9DAE;
  --sm-soft:       #CDCFDA;
  --sm-line:       #E3E4EB;
  --sm-paper:      #F5F6FC;
  --sm-brand-deep: #41409F;
  --sm-brand:      #5E60CD;
  --sm-brand-lift: #8A92FC;
  --sm-brand-soft: #CAD1FF;
  --sm-e:          cubic-bezier(.16,1,.3,1);
}

/* --------------------------------------------------------------------------
   Palette du thème : on redéfinit les variables de Sync sur la rampe Systomap.
   Le thème parent reste intact, tout passe par le thème enfant.
   -------------------------------------------------------------------------- */
:root,
body.trx_addons_customizable_theme,
.elementor-kit-1{
  /* sections claires */
  --tc-bg_color:#F5F6FC;        --e-global-color-theme_color_bg_color:#F5F6FC;
  --tc-bg_color_2:#FDFDFF;      --e-global-color-theme_color_bg_color_2:#FDFDFF;
  --tc-bd_color:#E2E4ED;        --e-global-color-theme_color_bd_color:#E2E4ED;
  --tc-title:#101127;           --e-global-color-theme_color_title:#101127;
  --tc-text:#56596E;            --e-global-color-theme_color_text:#56596E;
  --tc-meta:#828596;            --e-global-color-theme_color_meta:#828596;
  --tc-link:#5E60CD;            --e-global-color-theme_color_link:#5E60CD;
  --tc-hover:#4B4AB1;           --e-global-color-theme_color_hover:#4B4AB1;
  /* sections sombres */
  --tc-alt_bg_color:#0F1129;    --e-global-color-theme_color_alt_bg_color:#0F1129;
  --tc-alt_bg_color_2:#060719;  --e-global-color-theme_color_alt_bg_color_2:#060719;
  --tc-alt_bd_color:#2D304B;    --e-global-color-theme_color_alt_bd_color:#2D304B;
  --tc-alt_title:#F7F8FD;       --e-global-color-theme_color_alt_title:#F7F8FD;
  --tc-alt_text:#A1A3B4;        --e-global-color-theme_color_alt_text:#A1A3B4;
  --tc-alt_meta:#76798C;        --e-global-color-theme_color_alt_meta:#76798C;
  --tc-alt_link:#8A92FC;        --e-global-color-theme_color_alt_link:#8A92FC;
  --tc-alt_hover:#B6BFFF;       --e-global-color-theme_color_alt_hover:#B6BFFF;
  /* palette générique Elementor */
  --e-global-color-primary:#5E60CD;
  --e-global-color-secondary:#41409F;
  --e-global-color-text:#56596E;
  --e-global-color-accent:#8A92FC;
}

/* Variables natives du thème Sync (source réelle : skins/default/css/__custom.css) */
:root,
.scheme_default,
body.scheme_default,
.scheme_default:where(.editor-styles-wrapper){
  --theme-color-bg_color:#F5F6FC;
  --theme-color-bg_color_2:#FDFDFF;
  --theme-color-bd_color:#E2E4ED;
  --theme-color-title:#101127;
  --theme-color-text:#56596E;
  --theme-color-meta:#828596;
  --theme-color-link:#5E60CD;
  --theme-color-hover:#4B4AB1;
  --theme-color-alt_bg_color:#0F1129;
  --theme-color-alt_bg_color_2:#060719;
  --theme-color-alt_bd_color:#2D304B;
  --theme-color-alt_title:#F7F8FD;
  --theme-color-alt_text:#A1A3B4;
  --theme-color-alt_meta:#76798C;
  --theme-color-alt_link:#8A92FC;
  --theme-color-alt_hover:#B6BFFF;
  --theme-color-bg_color_0:rgba(245,246,252,0);
  --theme-color-bg_color_02:rgba(245,246,252,0.2);
  --theme-color-bg_color_05:rgba(245,246,252,0.5);
  --theme-color-bg_color_07:rgba(245,246,252,0.7);
  --theme-color-bg_color_09:rgba(245,246,252,0.9);
  --theme-color-bg_color_2_05:rgba(253,253,255,0.7);
  --theme-color-alt_bg_color_05:rgba(15,17,41,0.5);
  --theme-color-alt_title_08:rgba(247,248,253,0.8);
  --theme-color-link_07:rgba(94,96,205,0.7);
  --theme-color-link_blend:#7479DE;
}

/* ==========================================================================
   MENU DE NAVIGATION
   Indicateur glissant, états de survol, mise en valeur de la page active.
   ========================================================================== */

ul.trx-addons-main-nav-menu{
  position:relative;
  align-items:center;
}

/* la pastille qui glisse derrière l'élément survolé */
.sm-nav-pill{
  position:absolute;
  top:50%;
  left:0;
  height:40px;
  width:0;
  margin-top:-20px;
  border-radius:99px;
  background:rgba(94,96,205,.10);
  pointer-events:none;
  opacity:0;
  z-index:0;
  transform:translateZ(0);
  transition:
    transform .52s var(--sm-e),
    width     .52s var(--sm-e),
    opacity   .32s var(--sm-e),
    background-color .32s var(--sm-e);
}
.sm-nav-pill.is-on{opacity:1}
.sm-nav-pill.is-hover{background:rgba(94,96,205,.16)}

ul.trx-addons-main-nav-menu > li{position:relative;z-index:1}

ul.trx-addons-main-nav-menu > li > a.trx-addons-menu-link{
  position:relative;
  display:flex;
  align-items:center;
  gap:6px;
  padding:11px 18px !important;
  font-weight:550;
  letter-spacing:-.006em;
  border-radius:99px;
  transition:color .3s var(--sm-e);
}
ul.trx-addons-main-nav-menu > li > a.trx-addons-menu-link:hover{
  color:var(--sm-brand) !important;
}

/* page active : couleur et graisse renforcées */
ul.trx-addons-main-nav-menu > li.current-menu-item > a,
ul.trx-addons-main-nav-menu > li.current-menu-ancestor > a,
ul.trx-addons-main-nav-menu > li.current_page_item > a{
  color:var(--sm-brand) !important;
  font-weight:650;
}

/* sélecteur de langue : traité comme une puce distincte */
ul.trx-addons-main-nav-menu > li.pll-parent-menu-item > a{
  font-size:13px;
  letter-spacing:.04em;
  color:var(--sm-muted) !important;
  border:1px solid var(--sm-line);
  padding:8px 14px !important;
  margin-left:6px;
}
ul.trx-addons-main-nav-menu > li.pll-parent-menu-item > a:hover{
  border-color:var(--sm-brand);
  color:var(--sm-brand) !important;
}

/* --------------------------------------------------------------------------
   Sélecteur FR / EN — deux segments dans une même capsule, l'actif surligné.
   Ajouté au menu par systomap_switcher_langue() ; exclu de la pastille
   glissante puisqu'il ne désigne pas une page.
   -------------------------------------------------------------------------- */
.sm-lang{
  display:flex;
  align-items:center;
}
header .elementor-widget-html:has(.sm-lang){
  margin:0 4px 0 0;
  width:auto;
}
.sm-lang__box{
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding:3px;
  border-radius:99px;
  border:1px solid var(--sm-line);
  background:rgba(94,96,205,.05);
}
.sm-lang__opt{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:26px;
  padding:0 9px;
  border-radius:99px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.06em;
  line-height:1;
  color:var(--sm-muted);
  text-decoration:none;
  transition:color .28s var(--sm-e),background-color .28s var(--sm-e);
}
.sm-lang__opt:hover{color:var(--sm-brand)}
.sm-lang__opt.is-on{
  color:#fff;
  background:var(--sm-brand);
  box-shadow:0 6px 14px -8px rgba(94,96,205,.9);
}
.sm-lang__opt.is-on:hover{color:#fff}

/* sur les petites largeurs, la capsule reste visible à côté du hamburger */
@media (max-width:899px){
  .sm-lang__opt{min-width:30px;height:24px;padding:0 7px;font-size:11px}
}

/* --------------------------------------------------------------------------
   Rangée d'icônes sociales
   Posée par le shortcode [systomap_social]. Deux habillages : « sombre » pour
   les fonds foncés comme le pied de page, « clair » pour le reste.
   -------------------------------------------------------------------------- */
.sm-social{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
}
.sm-social a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid transparent;
  text-decoration:none;
  transition:background-color .28s var(--sm-e),border-color .28s var(--sm-e),transform .28s var(--sm-e);
}
.sm-social svg{
  width:18px;
  height:18px;
  transition:fill .28s var(--sm-e);
}
.sm-social a:hover{transform:translateY(-2px)}

.sm-social--sombre a{
  border-color:rgba(160,168,255,.22);
  background:rgba(255,255,255,.05);
}
.sm-social--sombre svg{fill:rgba(226,229,255,.85)}
.sm-social--sombre a:hover{
  background:var(--sm-brand);
  border-color:var(--sm-brand);
}
.sm-social--sombre a:hover svg{fill:#fff}

.sm-social--clair a{
  border-color:var(--sm-line);
  background:#fff;
}
.sm-social--clair svg{fill:var(--sm-muted)}
.sm-social--clair a:hover{
  background:var(--sm-brand);
  border-color:var(--sm-brand);
}
.sm-social--clair a:hover svg{fill:#fff}

@media (prefers-reduced-motion:reduce){
  .sm-social a{transition:none}
}

/* sous-menus */
ul.trx-addons-main-nav-menu ul.trx-addons-submenu{
  border-radius:16px;
  border:1px solid var(--sm-line);
  box-shadow:0 26px 56px -26px rgba(16,17,39,.32);
  padding:8px;
  overflow:hidden;
}
ul.trx-addons-main-nav-menu ul.trx-addons-submenu > li > a{
  border-radius:10px;
  padding:9px 14px !important;
  transition:background-color .28s var(--sm-e),color .28s var(--sm-e);
}
ul.trx-addons-main-nav-menu ul.trx-addons-submenu > li > a:hover{
  background:rgba(94,96,205,.09);
  color:var(--sm-brand) !important;
}

/* bouton d'appel à l'action de l'en-tête */
header .elementor-widget-button .elementor-button{
  position:relative;
  overflow:hidden;
  border-radius:99px;
  font-weight:600;
  transition:transform .5s var(--sm-e),box-shadow .5s var(--sm-e),background-color .3s var(--sm-e);
}
header .elementor-widget-button .elementor-button::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.30) 50%,transparent 60%);
  transform:translateX(-130%);
  animation:sm-shine 5.4s var(--sm-e) 3s infinite;
}
header .elementor-widget-button .elementor-button:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px -12px rgba(94,96,205,.75);
}

/* ==========================================================================
   RUBAN EN TROIS ÎLOTS
   Le gabarit d'en-tête est déjà bâti en trois colonnes — marque, navigation,
   actions. Plutôt qu'une plaque unique, chacune devient une capsule autonome
   qui flotte au-dessus du contenu. Au défilement, les trois se rapprochent
   puis se soudent en une seule barre : le mouvement raconte le passage de
   « posé sur la page » à « accroché en haut ».
   ========================================================================== */

:root{
  --sm-isl-gap:12px;
  --sm-isl-bg:rgba(252,252,255,.72);
  --sm-isl-line:rgba(94,96,205,.16);
  --sm-isl-shadow:0 18px 40px -24px rgba(16,17,39,.34);
}

/* la plaque d'origine s'efface : elle ne sert plus que de rail */
header.top_panel .sc_layouts_row_fixed > .e-con{
  background:transparent !important;
  padding:0 !important;
  gap:var(--sm-isl-gap) !important;
  justify-content:space-between;
  align-items:stretch;
  transition:gap .55s var(--sm-e);
  /* le fondu ThemeREX du bloc est remplacé par l'entrée échelonnée des îlots */
  animation:none !important;
  opacity:1 !important;
  transform:none !important;
}

/* les trois capsules */
header.top_panel .sc_layouts_row_fixed > .e-con > .e-con{
  --width:auto;
  width:auto !important;
  flex:0 0 auto !important;
  align-items:center;
  padding:7px 10px !important;
  border:1px solid var(--sm-isl-line);
  border-radius:99px;
  background:var(--sm-isl-bg);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
  box-shadow:var(--sm-isl-shadow);
  transition:
    border-radius .55s var(--sm-e),
    background-color .45s var(--sm-e),
    border-color .45s var(--sm-e),
    box-shadow .45s var(--sm-e),
    transform .55s var(--sm-e);
}

/* l'îlot de marque : le logo est ramené à une taille qui laisse de l'air
   au-dessus, en dessous et sur les côtés — il occupait presque toute la bulle */
header.top_panel .sc_layouts_row_fixed > .e-con > .e-con:first-child{
  padding-inline:20px 22px !important;
  justify-content:center;
}
header.top_panel .sc_layouts_row_fixed .sc_layouts_logo{
  display:flex;
  align-items:center;
}
header.top_panel .sc_layouts_row_fixed .sc_layouts_logo img.logo_image{
  max-height:24px !important;
  width:auto !important;
  height:auto !important;
  max-width:132px;
  object-fit:contain;
  display:block;
}
/* l'îlot de navigation prend l'espace disponible : sans quoi le script du
   thème replie les derniers liens sous un « More » */
header.top_panel .sc_layouts_row_fixed > .e-con > .e-con:nth-child(2){
  flex:1 1 auto !important;
  justify-content:center;
}
header.top_panel .sc_layouts_row_fixed ul.trx-addons-main-nav-menu{
  justify-content:center;
  flex-wrap:nowrap;
}
/* le menu français compte sept entrées : on resserre les liens pour que le
   script du thème n'ait jamais à en replier un sous « More » */
header.top_panel .sc_layouts_row_fixed ul.trx-addons-main-nav-menu > li > a.trx-addons-menu-link{
  padding:10px 12px !important;
  font-size:15.5px;
}
/* les réseaux sociaux vivent dans le pied de page : le ruban se consacre à la
   navigation, à la langue et à l'appel à l'action */
header.top_panel .sc_layouts_row_fixed .sc_layouts_item_socials,
header.top_panel .sc_layouts_row_fixed .elementor-widget-trx_sc_socials,
header.top_panel .sc_layouts_row_fixed .elementor-widget-social-icons{
  display:none !important;
}
/* l'îlot d'actions colle son bouton au bord */
header.top_panel .sc_layouts_row_fixed > .e-con > .e-con:last-child{
  gap:8px !important;
  padding-right:7px !important;
  justify-content:flex-end;
}

/* survol : la capsule concernée se soulève */
header.top_panel:not(.sm-merged) .sc_layouts_row_fixed > .e-con > .e-con:hover{
  transform:translateY(-2px);
  border-color:rgba(94,96,205,.30);
}

/* --- état soudé : les îlots se rejoignent en une barre continue --- */
header.top_panel.sm-merged .sc_layouts_row_fixed > .e-con{
  gap:0 !important;
}
/* Deux éléments voisins portant chacun leur propre backdrop-filter floutent
   séparément : la jointure reste visible comme un trait vertical. Une fois
   soudées, les capsules abandonnent donc le flou pour un fond plein. */
header.top_panel.sm-merged .sc_layouts_row_fixed > .e-con > .e-con{
  background:#FCFCFF;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  box-shadow:0 12px 34px -22px rgba(16,17,39,.42);
  transform:none;
}
/* les bordures mitoyennes sont retirées, pas rendues transparentes :
   un liseré translucide laisserait voir la page au travers de la jointure */
header.top_panel.sm-merged .sc_layouts_row_fixed > .e-con > .e-con:first-child{
  border-radius:99px 0 0 99px;
  border-right-width:0;
}
header.top_panel.sm-merged .sc_layouts_row_fixed > .e-con > .e-con:nth-child(2){
  border-radius:0;
  border-inline-width:0;
  flex:1 1 auto !important;
  justify-content:center;
}
header.top_panel.sm-merged .sc_layouts_row_fixed > .e-con > .e-con:last-child{
  border-radius:0 99px 99px 0;
  border-left-width:0;
}

/* --- verre sombre lorsque le ruban flotte au-dessus du hero ---
   Un verre clair sur fond nuit vire au gris sale et le logo devient illisible.
   Tant que l'on n'a pas défilé, les capsules passent donc en verre teinté
   avec typographie claire ; dès qu'elles se soudent, on revient au verre clair
   puisque le contenu qui défile dessous est lui-même clair. */
body.sm-over-dark header.top_panel:not(.sm-merged) .sc_layouts_row_fixed > .e-con > .e-con{
  background:rgba(18,20,48,.46);
  border-color:rgba(160,168,255,.26);
  box-shadow:0 20px 44px -28px rgba(0,0,0,.7);
}
body.sm-over-dark header.top_panel:not(.sm-merged) .sc_layouts_row_fixed .logo_image{
  content:url("../../uploads/systomap-brand/systomap-logo-horizontal-white.png");
}
body.sm-over-dark header.top_panel:not(.sm-merged) ul.trx-addons-main-nav-menu > li > a.trx-addons-menu-link{
  color:rgba(233,236,255,.86) !important;
}
body.sm-over-dark header.top_panel:not(.sm-merged) ul.trx-addons-main-nav-menu > li > a.trx-addons-menu-link:hover,
body.sm-over-dark header.top_panel:not(.sm-merged) ul.trx-addons-main-nav-menu > li.current-menu-item > a,
body.sm-over-dark header.top_panel:not(.sm-merged) ul.trx-addons-main-nav-menu > li.current_page_item > a{
  color:#fff !important;
}
body.sm-over-dark header.top_panel:not(.sm-merged) .sm-nav-pill{
  background:rgba(255,255,255,.14);
}
body.sm-over-dark header.top_panel:not(.sm-merged) .sm-nav-pill.is-hover{
  background:rgba(255,255,255,.20);
}
body.sm-over-dark header.top_panel:not(.sm-merged) .sm-lang__box{
  border-color:rgba(160,168,255,.28);
  background:rgba(255,255,255,.06);
}
body.sm-over-dark header.top_panel:not(.sm-merged) .sm-lang__opt{
  color:rgba(233,236,255,.70);
}
body.sm-over-dark header.top_panel:not(.sm-merged) .sm-lang__opt.is-on{
  color:#fff;
  background:var(--sm-brand);
}
body.sm-over-dark header.top_panel:not(.sm-merged) .sc_layouts_item_socials a{
  color:rgba(233,236,255,.72) !important;
}
body.sm-over-dark header.top_panel:not(.sm-merged) .sc_layouts_item_socials a:hover{
  color:#fff !important;
}

/* apparition échelonnée au chargement */
@keyframes sm-isl-in{
  from{opacity:0;transform:translateY(-14px) scale(.97)}
  to{opacity:1;transform:none}
}
header.top_panel .sc_layouts_row_fixed > .e-con > .e-con{
  animation:sm-isl-in .8s var(--sm-e) both;
}
header.top_panel .sc_layouts_row_fixed > .e-con > .e-con:nth-child(1){animation-delay:.05s}
header.top_panel .sc_layouts_row_fixed > .e-con > .e-con:nth-child(2){animation-delay:.14s}
header.top_panel .sc_layouts_row_fixed > .e-con > .e-con:nth-child(3){animation-delay:.23s}

/* la pastille glissante se cale sur la nouvelle hauteur de capsule */
header.top_panel .sm-nav-pill{height:38px;margin-top:-19px}

@media (prefers-reduced-motion:reduce){
  header.top_panel .sc_layouts_row_fixed > .e-con > .e-con{
    animation:none;
    transition:border-radius .01s;
  }
}

/* --------------------------------------------------------------------------
   PAS DE MENU REPLIÉ, JAMAIS
   Le thème bascule en hamburger dès 1280 px et propose une rangée mobile avec
   un bouton « Menu ». Les deux sont écartés : les liens restent alignés
   horizontalement dans leur îlot à toutes les largeurs. En dessous de 760 px
   l'îlot devient simplement défilable au doigt — les liens sont toujours là,
   il suffit de faire glisser.
   -------------------------------------------------------------------------- */

/* Le site utilise plusieurs gabarits d'en-tête : les pages en emploient un,
   les articles un autre, dont la rangée mobile ne porte pas la même classe.
   Les règles visent donc toute rangée d'en-tête, pas seulement celles marquées
   « fixed » — sans quoi une seconde barre réapparaît sous 1025 px. */

/* la rangée bureau reste affichée quelle que soit la largeur */
header.top_panel .elementor .elementor-element.e-parent.elementor-hidden-tablet,
header.top_panel .elementor .elementor-element.e-parent.elementor-hidden-mobile,
header.top_panel .elementor .elementor-element.elementor-top-section.elementor-hidden-tablet,
header.top_panel .elementor .elementor-element.elementor-top-section.elementor-hidden-mobile{
  display:flex !important;
}
/* la rangée mobile et son bouton « Menu » ne servent plus */
header.top_panel .elementor .elementor-element.elementor-hidden-desktop,
header.top_panel .sc_layouts_row_fixed > .e-con li.trx-addons-nav-menu-collapse{
  display:none !important;
}

/* Le widget de menu ne se contente pas d'une liste : il embarque sa propre
   variante repliée — bouton hamburger, libellé « Menu », panneau coulissant
   et voile d'arrière-plan — qu'il fait apparaître sous une certaine largeur.
   Tout cela est écarté, et la liste horizontale est imposée à toute largeur. */
header.top_panel .sc_layouts_row_fixed .trx-addons-hamburger-toggle,
header.top_panel .sc_layouts_row_fixed .trx-addons-mobile-menu-icon,
header.top_panel .sc_layouts_row_fixed .trx-addons-toggle-text,
header.top_panel .sc_layouts_row_fixed .trx-addons-toggle-close,
header.top_panel .sc_layouts_row_fixed .trx-addons-menu-toggle,
header.top_panel .sc_layouts_row_fixed .trx-addons-nav-slide-overlay,
header.top_panel .sc_layouts_row_fixed .trx-addons-mobile-menu-outer-container,
header.top_panel .sc_layouts_row_fixed .trx-addons-slide-widgets{
  display:none !important;
}

header.top_panel .sc_layouts_row_fixed .trx-addons-nav-widget-container,
header.top_panel .sc_layouts_row_fixed .trx-addons-nav-menu-container{
  display:block !important;
  position:static !important;
  visibility:visible !important;
  opacity:1 !important;
  transform:none !important;
  max-height:none !important;
  max-width:none !important;
  width:auto !important;
  height:auto !important;
  overflow:visible !important;
  background:none !important;
  padding:0 !important;
}

header.top_panel .sc_layouts_row_fixed ul.trx-addons-main-nav-menu{
  display:flex !important;
  flex-direction:row !important;
  position:relative !important;
  visibility:visible !important;
  opacity:1 !important;
  max-height:none !important;
  height:auto !important;
}
header.top_panel .sc_layouts_row_fixed ul.trx-addons-main-nav-menu > li{
  display:list-item !important;
}
header.top_panel .sc_layouts_row_fixed ul.trx-addons-main-nav-menu > li.trx-addons-nav-menu-collapse{
  display:none !important;
}

/* --- 1100 px et moins : premier resserrage --- */
@media (max-width:1100px){
  header.top_panel .sc_layouts_row_fixed{padding-inline:14px !important}
  header.top_panel .sc_layouts_row_fixed > .e-con{gap:8px !important}
  header.top_panel .sc_layouts_row_fixed ul.trx-addons-main-nav-menu > li > a.trx-addons-menu-link{
    padding:9px 9px !important;
    font-size:14.5px;
    letter-spacing:-.01em;
  }
  header.top_panel .sc_layouts_row_fixed > .e-con > .e-con:first-child{
    padding-inline:12px 14px !important;
  }
  header .elementor-widget-button .elementor-button{
    padding-left:18px !important;padding-right:18px !important;font-size:13.5px;
  }
  header.top_panel .sc_layouts_row_fixed .sc_layouts_logo img.logo_image{max-height:22px !important}
}

/* --- 900 px et moins : le libellé du bouton cède la place à la flèche --- */
@media (max-width:900px){
  header.top_panel .sc_layouts_row_fixed ul.trx-addons-main-nav-menu > li > a.trx-addons-menu-link{
    padding:8px 7px !important;
    font-size:13.5px;
  }
  header .elementor-widget-button .elementor-button{
    padding-left:14px !important;padding-right:14px !important;font-size:12.5px;
  }
  header.top_panel .sc_layouts_row_fixed .sm-lang__opt{
    min-width:28px;height:22px;padding:0 6px;font-size:10.5px;
  }
}

/* --- 760 px et moins : l'îlot de navigation défile au doigt --- */
@media (max-width:760px){
  header.top_panel .sc_layouts_row_fixed{padding:12px 10px 0 !important}
  header.top_panel .sc_layouts_row_fixed > .e-con{gap:6px !important}

  header.top_panel .sc_layouts_row_fixed > .e-con > .e-con:nth-child(2){
    min-width:0;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    /* les extrémités s'estompent pour signaler qu'il reste des liens */
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);
  }
  header.top_panel .sc_layouts_row_fixed > .e-con > .e-con:nth-child(2)::-webkit-scrollbar{
    display:none;
  }
  header.top_panel .sc_layouts_row_fixed ul.trx-addons-main-nav-menu{
    justify-content:flex-start;
    width:max-content;
  }
  /* la pastille glissante suit mal un conteneur qui défile : on la retire */
  .sm-nav-pill{display:none}
  header.top_panel .sc_layouts_row_fixed ul.trx-addons-main-nav-menu > li.current-menu-item > a,
  header.top_panel .sc_layouts_row_fixed ul.trx-addons-main-nav-menu > li.current_page_item > a{
    background:rgba(94,96,205,.14);
    border-radius:99px;
  }
  body.sm-over-dark header.top_panel:not(.sm-merged) .sc_layouts_row_fixed ul.trx-addons-main-nav-menu > li.current-menu-item > a,
  body.sm-over-dark header.top_panel:not(.sm-merged) .sc_layouts_row_fixed ul.trx-addons-main-nav-menu > li.current_page_item > a{
    background:rgba(255,255,255,.16);
  }
}

/* --- 560 px et moins : la marque se réduit à son symbole --- */
@media (max-width:560px){
  header.top_panel .sc_layouts_row_fixed .sc_layouts_logo img.logo_image{
    content:url("../../uploads/systomap-brand/systomap-icon.png");
    max-height:24px !important;
    width:auto !important;
  }
  body.sm-over-dark header.top_panel:not(.sm-merged) .sc_layouts_row_fixed .logo_image{
    content:url("../../uploads/systomap-brand/systomap-logo-white.png");
  }
  header.top_panel .sc_layouts_row_fixed > .e-con > .e-con:first-child{
    padding-inline:10px !important;
  }
  header .elementor-widget-button .elementor-button{
    padding-left:12px !important;padding-right:12px !important;font-size:12px;
  }
}
@media (prefers-reduced-motion:reduce){
  .sm-nav-pill{transition:none}
  header .elementor-widget-button .elementor-button::after{animation:none;display:none}
}

/* ==========================================================================
   SCÈNE 3D TEMPS RÉEL (WebGL)
   Le marqueur .sm-scene est injecté dans le conteneur ; le canvas est monté
   en JS sur ce conteneur pour éviter tout problème de rognage.
   ========================================================================== */
.sm-scene{display:none}

.sm-scene-host{position:relative;isolation:isolate}
.sm-scene-host > .sm-scene__cv{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;z-index:0;border-radius:inherit;pointer-events:none;
}
/* le contenu du conteneur repasse au-dessus du canvas */
.sm-scene-host > *:not(.sm-scene__cv){position:relative;z-index:1}
.sm-scene-host .e-con,
.sm-scene-host .elementor-widget{position:relative;z-index:1}
/* l'image de fond ne sert plus que de repli avant le premier rendu */
.sm-scene-host.sm-scene-live{background-image:none !important}

@media (prefers-reduced-motion:reduce){
  .sm-scene-host > .sm-scene__cv{opacity:1}
}

/* ==========================================================================
   HERO
   ========================================================================== */

.sm-hero{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:var(--sm-ink);
  color:var(--sm-paper);
  min-height:100svh;
  display:flex;
  flex-direction:column;
  padding:0 clamp(20px,4vw,64px);
  font-feature-settings:"kern" 1,"liga" 1;
}
.sm-hero *,
.sm-hero *::before,
.sm-hero *::after{box-sizing:border-box}

.sm-hero__sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* --- décor de fond --- */
.sm-hero__aurora{
  position:absolute;inset:-20%;z-index:0;pointer-events:none;
  filter:blur(58px);opacity:.85;
}
.sm-hero__aurora i{position:absolute;display:block;border-radius:50%}
.sm-hero__aurora i:first-child{
  width:56%;height:64%;right:-4%;top:-14%;
  background:radial-gradient(circle,rgba(84,86,190,.55),transparent 66%);
  animation:sm-float-a 19s ease-in-out infinite alternate;
}
.sm-hero__aurora i:last-child{
  width:52%;height:58%;left:-8%;bottom:-16%;
  background:radial-gradient(circle,rgba(60,58,150,.55),transparent 66%);
  animation:sm-float-b 23s ease-in-out infinite alternate;
}
@keyframes sm-float-a{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-7%,7%,0) scale(1.14)}}
@keyframes sm-float-b{from{transform:translate3d(0,0,0) scale(1.08)}to{transform:translate3d(9%,-6%,0) scale(1)}}

.sm-hero__rules{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  display:grid;grid-template-columns:repeat(5,1fr);
}
.sm-hero__rules i{position:relative;border-left:1px solid var(--sm-rule);opacity:.28}
.sm-hero__rules i:first-child{border-left:0}
.sm-hero__rules i::after{
  content:"";position:absolute;left:-1px;top:0;width:1px;height:22%;
  background:linear-gradient(to bottom,transparent,var(--sm-brand-lift),transparent);
  opacity:.85;animation:sm-trace 7.5s var(--sm-e) infinite;
}
.sm-hero__rules i:first-child::after{display:none}
.sm-hero__rules i:nth-child(2)::after{animation-delay:0s}
.sm-hero__rules i:nth-child(3)::after{animation-delay:1.9s}
.sm-hero__rules i:nth-child(4)::after{animation-delay:3.8s}
.sm-hero__rules i:nth-child(5)::after{animation-delay:5.6s}
@keyframes sm-trace{
  0%{transform:translateY(-30%);opacity:0}
  12%{opacity:.9}55%{opacity:.9}
  70%,100%{transform:translateY(480%);opacity:0}
}

.sm-hero__sweep{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(200,205,255,.11) 50%,transparent 62%);
  transform:translateX(-100%);
  animation:sm-sweep 1.7s var(--sm-e) .1s forwards;
}
@keyframes sm-sweep{to{transform:translateX(100%)}}

/* --- grille --- */
.sm-hero__stage{
  position:relative;z-index:2;flex:1;
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  align-items:center;
  gap:clamp(24px,3vw,56px);
  padding:clamp(120px,13vh,190px) 0 clamp(24px,3vh,44px);
  max-width:1560px;width:100%;margin:0 auto;
}

/* --- texte --- */
.sm-hero__eyebrow{
  display:flex;align-items:center;gap:12px;margin:0 0 26px;
  font-size:11.5px;letter-spacing:.20em;text-transform:uppercase;
  color:var(--sm-dim);font-weight:600;
  opacity:0;animation:sm-rise .9s var(--sm-e) .08s forwards;
}
.sm-hero__eyebrow em{font-style:normal;padding-left:12px;border-left:1px solid var(--sm-rule)}
.sm-hero__dot{
  width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--sm-brand-lift);animation:sm-pulse 2.8s var(--sm-e) infinite;
}
@keyframes sm-pulse{
  0%{box-shadow:0 0 0 0 rgba(138,146,252,.55)}
  70%,100%{box-shadow:0 0 0 10px rgba(138,146,252,0)}
}
@keyframes sm-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.sm-hero h1.sm-hero__title{
  margin:0 0 26px;
  font-size:clamp(2.3rem,4.6vw,4.4rem);
  line-height:1.02;letter-spacing:-.036em;font-weight:700;
  color:var(--sm-paper);
}
.sm-hero__ln{display:block;overflow:hidden;padding-bottom:.06em}
.sm-hero__ln > i{
  display:block;font-style:normal;transform:translateY(105%);
  animation:sm-lift 1.05s var(--sm-e) var(--d) forwards;
}
.sm-hero__title b{font-weight:inherit;color:var(--sm-brand-lift)}
@keyframes sm-lift{to{transform:none}}

.sm-hero__lede{
  margin:0 0 36px;max-width:52ch;
  font-size:clamp(.95rem,1.05vw,1.06rem);line-height:1.62;
  color:var(--sm-dim);
  opacity:0;animation:sm-rise .95s var(--sm-e) .62s forwards;
}

/* --- boutons --- */
.sm-hero__actions{
  display:flex;flex-wrap:wrap;gap:12px;
  opacity:0;animation:sm-rise .95s var(--sm-e) .74s forwards;
}
.sm-btn{
  display:inline-flex;align-items:center;gap:10px;position:relative;overflow:hidden;
  font-size:14.5px;font-weight:600;padding:15px 28px;border-radius:99px;
  text-decoration:none;line-height:1;
  transition:transform .55s var(--sm-e),background-color .35s var(--sm-e),
             border-color .35s var(--sm-e),box-shadow .55s var(--sm-e);
}
.sm-btn--primary{background:var(--sm-brand);color:var(--sm-paper);border:1px solid var(--sm-brand)}
.sm-btn--primary::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.28) 50%,transparent 60%);
  transform:translateX(-120%);animation:sm-shine 4.6s var(--sm-e) 2.2s infinite;
}
@keyframes sm-shine{0%{transform:translateX(-120%)}28%,100%{transform:translateX(120%)}}
.sm-btn--primary svg{
  width:16px;height:16px;position:relative;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .5s var(--sm-e);
}
.sm-btn--primary:hover,.sm-btn--primary:focus-visible{
  background:var(--sm-brand-lift);border-color:var(--sm-brand-lift);
  color:var(--sm-ink);transform:translateY(-3px);
  box-shadow:0 14px 34px -12px rgba(94,96,205,.85);
}
.sm-btn--primary:hover svg{transform:translateX(4px)}
.sm-btn--ghost{border:1px solid var(--sm-rule);color:var(--sm-paper)}
.sm-btn--ghost:hover,.sm-btn--ghost:focus-visible{border-color:var(--sm-brand-lift);transform:translateY(-3px)}

/* --- carte --- */
.sm-hero__map-wrap{display:flex;justify-content:center}
.sm-hero__map{width:100%;max-width:560px;height:auto;overflow:visible}
.sm-map__parallax{
  transition:transform 1.1s var(--sm-e);
  animation:sm-drift 24s ease-in-out infinite alternate;
}
@keyframes sm-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-14px,0)}}

.sm-map__halo{animation:sm-breathe 7s ease-in-out infinite alternate;transform-origin:260px 230px}
@keyframes sm-breathe{from{transform:scale(.92);opacity:.75}to{transform:scale(1.1);opacity:1}}

.sm-map__pulses circle{
  fill:none;stroke:var(--sm-brand-lift);stroke-width:1;
  transform-origin:260px 230px;opacity:0;
  animation:sm-ripple 4.5s var(--sm-e) var(--pd) infinite;
}
@keyframes sm-ripple{0%{transform:scale(1);opacity:.55}80%,100%{transform:scale(5.4);opacity:0}}

.sm-map__guides circle{
  fill:none;stroke:var(--sm-rule);stroke-width:1;opacity:.45;
  stroke-dasharray:2 8;transform-origin:260px 230px;
}
.sm-map__guides .cw {animation:sm-spin 44s linear infinite}
.sm-map__guides .ccw{animation:sm-spin 62s linear infinite reverse}
.sm-map__guides .cw2{animation:sm-spin 90s linear infinite}
@keyframes sm-spin{to{transform:rotate(360deg)}}

.sm-map__link{
  fill:none;stroke:var(--sm-brand-lift);stroke-width:1;opacity:.38;
  stroke-dasharray:280;stroke-dashoffset:280;
  animation:sm-draw 1.5s var(--sm-e) var(--d) forwards;
  transition:opacity .4s var(--sm-e),stroke-width .4s var(--sm-e);
}
.sm-map__link.is-hot{opacity:.95;stroke-width:1.8}
@keyframes sm-draw{to{stroke-dashoffset:0}}

.sm-map__flow circle{opacity:0;animation:sm-fadein .8s ease 1.2s forwards}
@keyframes sm-fadein{to{opacity:.9}}

.sm-map__node{opacity:0;animation:sm-pop .9s var(--sm-e) var(--d) forwards;cursor:pointer}
.sm-map__node rect{
  fill:var(--sm-ink-2);stroke:var(--sm-brand-lift);stroke-width:1.4;
  transform:rotate(45deg);transform-origin:center;transform-box:fill-box;
  transition:fill .45s var(--sm-e);
}
.sm-map__node .ring{
  fill:none;stroke:var(--sm-brand-lift);stroke-width:1;opacity:0;
  transform-origin:center;transform-box:fill-box;
  transition:opacity .45s var(--sm-e),transform .55s var(--sm-e);
}
.sm-map__node text{
  fill:var(--sm-dim);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  text-anchor:middle;font-weight:600;transition:fill .4s var(--sm-e);
}
.sm-map__node:hover rect,.sm-map__node:focus-visible rect{fill:var(--sm-brand)}
.sm-map__node:hover .ring,.sm-map__node:focus-visible .ring{opacity:.6;transform:scale(1.18)}
.sm-map__node:hover text,.sm-map__node:focus-visible text{fill:var(--sm-paper)}
@keyframes sm-pop{from{opacity:0}to{opacity:1}}

.sm-map__core{opacity:0;animation:sm-pop .9s var(--sm-e) .12s forwards}
.sm-map__core .core-ring{
  fill:none;stroke:var(--sm-brand-lift);stroke-width:1;stroke-dasharray:5 9;opacity:.7;
  transform-origin:center;transform-box:fill-box;animation:sm-spin 15s linear infinite;
}
.sm-map__core .core-shape{fill:var(--sm-brand)}
.sm-map__core .core-s{fill:none;stroke:var(--sm-paper);stroke-width:3.4;stroke-linecap:round}

/* --- bandeau produits --- */
.sm-hero__rail{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:clamp(18px,2.4vw,40px);
  border-top:1px solid var(--sm-rule);
  padding:20px 0 30px;max-width:1560px;width:100%;margin:0 auto;
}
.sm-rail__label{
  position:relative;padding-left:14px;white-space:nowrap;
  font-size:10.5px;letter-spacing:.20em;text-transform:uppercase;
  color:var(--sm-brand-lift);font-weight:600;
}
.sm-rail__label::before{
  content:"";position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;
  border-radius:50%;background:var(--sm-brand-lift);
  animation:sm-pulse 2.8s var(--sm-e) infinite;
}
.sm-hero__rail ul{
  flex:1;display:flex;flex-wrap:wrap;gap:clamp(16px,2.6vw,44px);
  margin:0;padding:0;list-style:none;
}
.sm-hero__rail li{
  display:flex;flex-direction:column;gap:3px;
  opacity:0;animation:sm-rise .9s var(--sm-e) var(--d) forwards;
  transition:transform .5s var(--sm-e);
}
.sm-hero__rail li:hover{transform:translateY(-3px)}
.sm-hero__rail li:hover b{color:var(--sm-brand-lift)}
.sm-hero__rail b{font-size:14px;font-weight:650;letter-spacing:-.01em;transition:color .35s var(--sm-e)}
.sm-hero__rail span{font-size:11px;color:var(--sm-dim);letter-spacing:.03em}
.sm-rail__count{font-size:11px;letter-spacing:.18em;color:var(--sm-dim)}

/* --- responsive --- */
@media (max-width:1024px){
  .sm-hero__stage{
    grid-template-columns:1fr;gap:34px;
    padding-top:clamp(110px,16vh,150px);
  }
  .sm-hero__map-wrap{order:-1}
  .sm-hero__map{max-width:420px}
  .sm-hero__rules{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  .sm-hero{min-height:auto;padding-bottom:8px}
  .sm-hero__stage{padding-top:clamp(96px,14vh,130px)}
  .sm-hero__map{max-width:310px}
  .sm-hero__rail{flex-direction:column;align-items:flex-start;gap:14px}
  .sm-rail__count{display:none}
  .sm-btn{width:100%;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .sm-hero *{animation:none!important;transition:none!important}
  .sm-map__link{stroke-dashoffset:0}
  .sm-map__node,.sm-map__core,.sm-hero__eyebrow,.sm-hero__lede,
  .sm-hero__actions,.sm-hero__rail li,.sm-map__flow circle{opacity:1}
  .sm-hero__ln > i{transform:none}
  .sm-hero__sweep{display:none}
}