.elementor-8 .elementor-element.elementor-element-d09439f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-44e66a3{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-944a92c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-f02b350{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-d5d7f70{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-8 .elementor-element.elementor-element-cc092b4{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-b96b2c0{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-0d46ad7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-8 .elementor-element.elementor-element-e3e0216{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-85eb66e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-9fedda0{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-f878318{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-45a18f2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-8951744{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-e9c2266{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-1178cf8{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );}.elementor-8 .elementor-element.elementor-element-f584400{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-afd77b1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}@media(max-width:1024px){.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );}.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}}@media(max-width:767px){.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );}.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}}/* Start custom CSS *//* ===== Jump&Love — accueil v5 (maquette 0Jump&Love_web2026_v5.ai) ===== */

/* Toutes les tailles sont calculées sur la maquette de 1920 px :
   1 px de maquette = 1/19,2 vw. Ex. 46 px ÷ 19,2 = 2,396vw.
   clamp(min, taille fluide, max) évite des textes trop petits ou trop gros. */
.jl-app{
  --jl-bleu:#2D4FEC;
  --jl-jaune:#EBFD5B;
  /* Dégradé de l'en-tête : rose en haut à gauche, fond blanc en bas (aucune démarcation) */
  --jl-dg-h:calc(var(--jl-hh) * 2);   /* le dégradé descend sur 2 × la hauteur de l'en-tête */
  --jl-degrade:
    linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 30%, #fff 100%) 0 0 / 100% var(--jl-dg-h) no-repeat fixed,
    linear-gradient(90deg,#E5CFCB 0%,#F6F6F6 60%) 0 0 / 100% var(--jl-dg-h) no-repeat fixed,   /* rose #E5CFCB en haut à gauche */
    #fff;
  /* « fixed » : le dégradé est calé sur la fenêtre, donc l'en-tête, le fond de la page
     et le masque du losange bleu se raccordent sans démarcation */
  --jl-hh:4.6875vw;                                  /* hauteur de l'en-tête : 90 px (réduite de 50 %) */
  --jl-fs-grand:clamp(24px, 2.396vw, 92px);          /* grands textes : 46 px */
  --jl-fs-petit:clamp(15px, 1.146vw, 44px);          /* textes courants : 22 px */
  --jl-marge:7.55vw;                                 /* marge gauche des textes : 145 px */
  --jl-ease:cubic-bezier(.2,.7,.2,1);
  font-family:"PP Mori",sans-serif;
}

/* 1. La page ne défile pas : ce sont les colonnes qui défilent */
body:has(.jl-app){ margin:0; overflow:hidden; background:#fff; overscroll-behavior:none; }
/* Les widgets ne débordent jamais de leur colonne (sinon défilement horizontal) */
.jl-app .jl-col > .elementor-element{ box-sizing:border-box; max-width:100%; }
.e-con.jl-app{ height:100vh; height:100dvh; overflow:hidden; position:relative; background:var(--jl-degrade); }
.admin-bar .e-con.jl-app{ height:calc(100dvh - 32px); }
@media (max-width:782px){ .admin-bar .e-con.jl-app{ height:calc(100dvh - 46px); } }
/* Aucun espacement automatique d'Elementor entre les widgets */
.jl-app .elementor-widget:not(:last-child){ margin-block-end:0; }
.jl-app p{ margin:0; }

/* 2. En-tête : logo noir, CONTACT et Fr | En en bleu, fond dégradé rose → gris */
.e-con.jl-header{
  flex:0 0 auto; height:var(--jl-hh); position:relative; z-index:6;
  flex-direction:row; justify-content:space-between; align-items:flex-start;
  padding:0 1.93vw 0 7.6vw; align-items:center; background:var(--jl-degrade);
}
.jl-logo{ display:block; width:12.75vw; min-width:120px; color:#000; line-height:0; }
.jl-logo svg{ width:100%; height:auto; }
.jl-header-right{ display:flex; align-items:center; gap:4.4vw; margin-top:0;
  font-size:var(--jl-fs-petit); font-weight:400; line-height:1.2; text-transform:uppercase; }
.jl-header-right a{ color:var(--jl-bleu); text-decoration:none; }
/* Pas de changement de couleur au survol (le thème Hello en impose un) */
.jl-app a.jl-logo, .jl-app a.jl-logo:hover, .jl-app a.jl-logo:focus{ color:#000; }
.jl-app .jl-header-right a:hover, .jl-app .jl-header-right a:focus, .jl-app .jl-body a:hover{ color:var(--jl-bleu); }
.jl-lang{ color:var(--jl-bleu); }
.jl-lang a.is-active{ font-weight:400; }

/* 3. Bandeau jaune (pleine largeur) — superposé au haut des colonnes.
      Il disparaît au premier défilement (classe .is-scrolled ajoutée par le script). */
.e-con.jl-hero{
  position:absolute; top:var(--jl-hh); left:0; right:0; height:41.2vw; z-index:4;
  padding:0; background:transparent;   /* fond blanc sous le bandeau jaune */
  transition:transform .6s var(--jl-ease), opacity .4s ease;
}
.jl-app.is-scrolled .e-con.jl-hero{ transform:translateY(-100%); opacity:0; pointer-events:none; }
.e-con.jl-yellow{
  position:absolute; left:1.41vw; top:.5vw; width:97.19vw;   /* sous l'en-tête : le coin haut-droit n'est plus coupé */
  height:31.04vw; padding:0;
  background:var(--jl-jaune);
  clip-path:polygon(0 35.4%, 100% 0, 100% 64.4%, 0 100%);  /* parallélogramme incliné */
}
.e-con.jl-yellow-in{
  position:absolute; left:6.2vw; top:14.17vw; width:auto; padding:0;
  flex-direction:row; flex-wrap:nowrap; align-items:flex-start;
  transform:skewY(-6.5deg); transform-origin:0 0;
}
.jl-y-big, .jl-y-big p{ font-size:var(--jl-fs-grand); line-height:1; color:#000; font-weight:400; }
.jl-y-1{ width:20.78vw; }
.jl-y-2{ width:22.03vw; }
.jl-y-3{ margin-top:2.34vw; }
.jl-y-small, .jl-y-small p{ font-size:var(--jl-fs-petit); line-height:1.45; color:#000; white-space:nowrap; }

/* 4. Les deux colonnes à défilement indépendant */
.e-con.jl-app, .e-con.jl-cols, .e-con.jl-col{ flex-wrap:nowrap; }
.e-con.jl-col > .e-con{ flex-shrink:0; }
.e-con.jl-cols{ flex:1 1 auto; min-height:0; flex-direction:row; }
.e-con.jl-col{
  flex:1 1 0; width:auto; min-width:0; height:100%;
  overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none;
  overflow-anchor:none;   /* évite un « saut » quand le bandeau jaune se replie */
  overflow-x:hidden; overscroll-behavior-x:none;   /* aucun mouvement horizontal */
  transition:flex-grow .6s var(--jl-ease), padding-top .6s var(--jl-ease);
}
.e-con.jl-col::-webkit-scrollbar{ display:none; }
/* Espace réservé au bandeau jaune ; il se referme au défilement */
.e-con.jl-col-left{ padding:27.53vw 0 6vw 0; }
.e-con.jl-col-right{ padding:41.04vw 1.41vw 3vw .47vw; }
.jl-app.is-scrolled .e-con.jl-col-left{ padding-top:0; }
.jl-app.is-scrolled .e-con.jl-col-right{ padding-top:.99vw; }

/* Desktop : la colonne survolée prend les 2/3, retour à 50/50 quand la souris la quitte */
@media (min-width:1025px) and (hover:hover){
  .e-con.jl-col.is-active{ flex-grow:2; }
}
/* L'autre colonne réduit son contenu proportionnellement (--jl-z calculé par le script) */
.e-con.jl-col > *{ zoom:var(--jl-z,1); }
/* Le losange bleu ne suit pas ce zoom : il est dimensionné en % de la colonne (--jl-cw),
   il grossit donc en proportion quand la colonne gauche s'élargit */
.e-con.jl-col > .jl-blue{ zoom:1; }
/* --jl-cw = largeur de la colonne gauche, fournie par le script (pas de container query :
   Safari décroche le « sticky » du losange dans un conteneur de requête) */

/* 5. Bandeau bleu : il défile avec le texte (il monte et disparaît quand on fait défiler) */
.e-con.jl-blue{
  position:relative; z-index:5;
  margin:0; width:100%; height:calc(var(--jl-cw, 50vw) * 0.5200); padding:0; background:none; overflow:hidden;
}
/* La forme bleue (parallélogramme) */
.e-con.jl-blue::before{
  content:""; display:block; position:absolute; top:0; bottom:0; left:calc(var(--jl-cw, 50vw) * 0.0282); right:calc(var(--jl-cw, 50vw) * 0.0072); z-index:0;
  background:var(--jl-bleu); opacity:1; mix-blend-mode:normal; border-radius:0;
  clip-path:polygon(0 20.4%, 100% 0, 100% 79%, 0 100%);
}
/* Cache le texte qui défile au-dessus du bord incliné (blanc, comme le bas de l'en-tête) */
.e-con.jl-blue::after{
  content:""; display:block; position:absolute; top:0; left:0; right:0; bottom:0; z-index:0;
  background:var(--jl-degrade);
  clip-path:polygon(0 0, 100% 0, calc(var(--jl-cw, 50vw) * 0.0282) 20.4%, 0 20.4%);
  opacity:0; transition:opacity .3s ease; pointer-events:none;
}
.jl-col-left.a-defile .e-con.jl-blue::after{ opacity:0; }   /* masque inutile : le losange défile */
/* Page 1 : quand la colonne gauche rétrécit (survol de la droite), le losange rapetisse
   et son coin haut-gauche remonterait vers le jaune. On le redescend d'autant pour garder
   l'espace entre les deux bandeaux. (5,3vw = 20,4 % de sa hauteur à 50/50) */
@media (min-width:1025px){
  .jl-app:not(.is-scrolled) .e-con.jl-blue{ margin-top:max(0px, calc(5.3vw - calc(var(--jl-cw, 50vw) * 0.1061))); }
}
.jl-app .jl-blue-title{ position:absolute; z-index:1; width:auto; max-width:none; left:calc(var(--jl-cw, 50vw) * 0.1512); top:calc(var(--jl-cw, 50vw) * 0.1636); transform:skewY(-6.5deg); transform-origin:0 0; }
.jl-app .jl-blue-title .elementor-heading-title{
  margin:0; color:#fff !important; font-family:"PP Mori",sans-serif; font-weight:400;
  font-size:clamp(20px, calc(var(--jl-cw, 50vw) * 0.0479), 184px); line-height:.98; white-space:nowrap;
}

/* 6. Colonne gauche : textes */
.jl-app .jl-big, .jl-app .jl-big p{
  font-family:"PP Mori",sans-serif; font-weight:400; color:var(--jl-bleu);
  font-size:var(--jl-fs-grand); line-height:1.087;
}
.jl-app .jl-big p + p{ margin-top:1.087em; }
.jl-app .jl-body, .jl-app .jl-body p{
  font-family:"PP Mori",sans-serif; font-weight:400; color:var(--jl-bleu);
  font-size:var(--jl-fs-petit); line-height:1.45;
}
.jl-app .jl-body p + p{ margin-top:1.45em; }        /* une ligne vide entre les paragraphes */
.jl-app .jl-body strong{ font-weight:600; }
.jl-app .jl-body a{ color:var(--jl-bleu); text-decoration:none; }
.jl-app .jl-serre, .jl-app .jl-serre p{ line-height:1.32; }
.jl-app .jl-serre p + p{ margin-top:2em; }
.jl-app .jl-col-left > .elementor-element:not(.jl-blue){ padding-left:var(--jl-marge); padding-right:3vw; }
.jl-app .jl-col-left > .e-con:not(.jl-blue){ padding-left:0; padding-right:0; margin-left:var(--jl-marge); }
.jl-app .jl-col-left > .e-con.jl-jumplove, .jl-app .jl-col-left > .e-con.jl-services{ width:calc(100% - var(--jl-marge)); }

/* Filets bleus (1 px) */
.jl-hr{ display:block; width:33.33vw; height:0; margin:0; border:0; border-top:1px solid var(--jl-bleu); }

/* Espacements verticaux, repris de la maquette */
.jl-app .jl-intro{ margin-top:4.5vw; }
.jl-app .jl-hr-1{ margin-top:7.8vw; }
.jl-app .jl-agence{ margin-top:5.5vw; }
.jl-app .jl-hr-2{ margin-top:4.3vw; }
.jl-app .jl-jumplove{ margin-top:8.5vw; }
.jl-amp{ display:block; width:3.44vw; margin:1.7vw 0; line-height:0; }
.jl-amp svg{ width:100%; height:auto; }
.e-con.jl-services{ margin-top:7.5vw; padding:0; }
.e-con.jl-service{ width:33.33vw; padding:2.4vw 0 2.2vw; border-bottom:1px solid var(--jl-bleu); }
.e-con.jl-service:first-child{ border-top:1px solid var(--jl-bleu); }
.jl-app .jl-label .elementor-heading-title{
  margin:0 0 1.6vw; color:var(--jl-bleu) !important; font-family:"PP Mori",sans-serif;
  font-weight:600; font-size:var(--jl-fs-petit); line-height:1.2;
}
.jl-app .jl-service .jl-body{ white-space:nowrap; }
.e-con.jl-team{ flex-direction:row; width:33.33vw; margin-top:8.3vw; padding:0; }
.jl-team .elementor-widget-image{ flex:1 1 0; }
.jl-team img{ display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; }
.jl-app .jl-fondation{ margin-top:2.8vw; }
.jl-app .jl-hr-3{ margin-top:7.4vw; }
.jl-app .jl-clients{ margin-top:2.9vw; }
.jl-app .jl-hr-4{ margin-top:7.9vw; }
.jl-app .jl-contacts{ margin-top:6.9vw; }
.jl-app .jl-hr-5{ margin-top:7vw; }

/* 7. Colonne droite : projets (image 16:9, légende, flèches, +) */
.e-con.jl-proj{ padding:0; margin-bottom:3.1vw; }
.jl-proj-img img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
.e-con.jl-proj-cap{ flex-direction:row; justify-content:space-between; align-items:center; padding:0; margin-top:.36vw; }
.jl-app .jl-proj-title .elementor-heading-title{
  margin:0; color:var(--jl-bleu) !important; font-family:"PP Mori",sans-serif; font-weight:400;
  font-size:var(--jl-fs-petit); line-height:1.2;
}
.jl-arrows{ display:flex; gap:.6vw; }
.jl-arrows span{ display:block; color:var(--jl-bleu); line-height:0; }   /* pas d'effet au survol */
.jl-arrows svg{ width:1.04vw; min-width:16px; height:auto; }
.jl-plus{ display:block; margin-top:.5vw; color:var(--jl-bleu); line-height:0; }
.jl-plus svg{ width:.94vw; min-width:14px; height:auto; }

/* 8. Bouton de bascule : caché sur desktop */
.jl-toggle-w{ display:none; }
.jl-toggle-input{ position:absolute; opacity:0; pointer-events:none; }

/* 9. Tablette et mobile : une colonne à la fois (approuvé) */
@media (max-width:1024px){
  .jl-app{ --jl-dg-h:140px; }
  .e-con.jl-header{ height:auto; padding:16px 20px; align-items:center; }
  .jl-logo{ width:150px; }
  .jl-header-right{ gap:16px; margin-top:0; font-size:14px; }

  /* Mobile : c'est la page entière qui défile (en-tête collé en haut).
     Les deux losanges sont dans le flux : ils montent et descendent avec le contenu. */
  body:has(.jl-app){ overflow:visible; }
  .e-con.jl-app, .admin-bar .e-con.jl-app{ height:auto; min-height:100dvh; overflow:visible; }
  .e-con.jl-header{ position:sticky; top:0; }
  /* Dégradé rose (mobile) : il fait partie du haut de la page et monte avec le contenu.
     L'en-tête collé affiche la tranche du dégradé qui se trouve derrière lui
     (--jl-sy = défilement de la page, fourni par le script) : aucune coupure. */
  .e-con.jl-app{ background:
    linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 30%, #fff 100%) 0 0 / 100% var(--jl-dg-h) no-repeat,
    linear-gradient(90deg,#E5CFCB 0%,#F6F6F6 60%) 0 0 / 100% var(--jl-dg-h) no-repeat,
    #fff; }
  .e-con.jl-header{ background:
    linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 30%, #fff 100%) 0 var(--jl-sy, 0px) / 100% var(--jl-dg-h) no-repeat,
    linear-gradient(90deg,#E5CFCB 0%,#F6F6F6 60%) 0 var(--jl-sy, 0px) / 100% var(--jl-dg-h) no-repeat,
    #fff;
    transition:none; }   /* Elementor anime le fond (0,3 s) : le dégradé serait en retard sur le défilement */
  .admin-bar .e-con.jl-header{ top:var(--wp-admin--admin-bar--height, 0px); }
  .e-con.jl-cols{ flex:0 0 auto; }
  .e-con.jl-col{ height:auto; overflow:visible; }
  /* --jl-pw = largeur de la page (fournie par le script, sans la barre de défilement)
     --jl-mw = largeur des losanges (même bord gauche et droit pour le jaune et le bleu)
     Pente des losanges = pente du texte (skew 6,5° → 11,4 % de la largeur) */
  .jl-app{ --jl-mw:calc(var(--jl-pw, 100vw) - 24px); --jl-pente:calc(var(--jl-mw) * 0.114); }
  .e-con.jl-hero, .jl-app.is-scrolled .e-con.jl-hero{ position:relative; top:auto; height:auto; overflow:visible; flex-shrink:0;
    transform:none; opacity:1; pointer-events:auto; max-height:none; transition:none; }
  .e-con.jl-yellow{ position:relative; left:auto; top:auto; width:auto; height:auto;
    margin:0 12px; padding:calc(var(--jl-pente) + 16px) 20px calc(var(--jl-pente) + 22px);
    clip-path:polygon(0 var(--jl-pente), 100% 0, 100% calc(100% - var(--jl-pente)), 0 100%); }
  .e-con.jl-yellow-in{ position:static; flex-direction:row; flex-wrap:wrap; column-gap:22px; row-gap:14px; }
  .jl-y-1, .jl-y-2{ width:auto; }
  .jl-y-3{ margin-top:0; flex-basis:100%; }
  .jl-y-big, .jl-y-big p{ font-size:clamp(18px, 4.6vw, 30px); }
  .jl-y-small, .jl-y-small p{ font-size:clamp(11px, 2.8vw, 16px); white-space:normal; }

  .e-con.jl-col{ flex:1 1 100%; }
  /* Changement de côté : la colonne quittée glisse dehors, l'autre entre par le côté opposé */
  .e-con.jl-cols{ position:relative; }
  .e-con.jl-cols.jl-en-glisse{ overflow:clip; }
  .jl-app .e-con.jl-col.jl-sortante{ display:flex !important; position:absolute; left:0; right:0; z-index:1; pointer-events:none;
    animation:jl-sort-g .6s var(--jl-ease) forwards; }
  .jl-app .e-con.jl-col.jl-sortante.vers-d{ animation-name:jl-sort-d; }
  .jl-app .e-con.jl-col.jl-entrante{ animation:jl-entre-d .6s var(--jl-ease) both; }
  .jl-app .e-con.jl-col.jl-entrante.depuis-g{ animation-name:jl-entre-g; }
  /* Glissé au doigt : la colonne qui arrive est affichée par-dessus, à côté de l'écran */
  .jl-app .e-con.jl-col.jl-au-doigt{ display:flex !important; position:absolute; left:0; right:0; z-index:1; }
  @keyframes jl-sort-g{ to{ transform:translateX(-100%); } }
  @keyframes jl-sort-d{ to{ transform:translateX(100%); } }
  @keyframes jl-entre-d{ from{ transform:translateX(100%); } }
  @keyframes jl-entre-g{ from{ transform:translateX(-100%); } }
  .e-con.jl-col-left, .jl-app.is-scrolled .e-con.jl-col-left{ padding:0 0 100px; }
  .e-con.jl-col-right, .jl-app.is-scrolled .e-con.jl-col-right{ padding:12px 12px 100px; }
  .e-con.jl-col-right{ display:none; }
  .jl-app:has(#jl-toggle:checked) .jl-col-left{ display:none; }
  .jl-app:has(#jl-toggle:checked) .jl-col-right{ display:flex; }

  /* Losange bleu : proportions du desktop (hauteur 54 % de sa largeur, titre à 12,8 % / 31,5 %,
     texte 5 % de la largeur), mêmes bords que le jaune, espace réduit sous le jaune */
  .e-con.jl-blue, .jl-app:not(.is-scrolled) .e-con.jl-blue{ width:auto; height:calc(var(--jl-mw) * 0.54); padding:0;
    margin:calc(var(--jl-pente) * -1 + var(--jl-mw) * 0.03) 0 0; }
  .e-con.jl-blue::before{ left:12px; right:12px; width:auto;   /* Elementor impose width:100 % : le bleu dépassait à droite */
    clip-path:polygon(0 var(--jl-pente), 100% 0, 100% calc(100% - var(--jl-pente)), 0 100%); }
  .e-con.jl-blue::after{ display:none; }
  .jl-app .jl-blue-title{ position:absolute; left:32px;   /* textes alignés à 32 px (comme le jaune) */ top:calc(var(--jl-mw) * 0.17); }
  .jl-app .jl-blue-title .elementor-heading-title{ white-space:nowrap; font-size:calc(var(--jl-mw) * 0.0497); }

  /* Tous les textes alignés à 32 px du bord (même retrait que le texte du jaune : 12 + 20 px) */
  .jl-app .jl-col-left > .elementor-element:not(.jl-blue){ padding-left:32px; padding-right:24px; }
  .jl-app .jl-col-left > .e-con:not(.jl-blue){ padding-left:0; padding-right:0; margin-left:32px; margin-right:32px; width:auto; }
  .jl-hr, .e-con.jl-service, .e-con.jl-team{ width:100%; }
  .jl-app .jl-service .jl-body{ white-space:normal; }
  .jl-app .jl-intro{ margin-top:36px; }
  .jl-app .jl-hr-1, .jl-app .jl-hr-2, .jl-app .jl-hr-3, .jl-app .jl-hr-4, .jl-app .jl-hr-5{ margin-top:48px; }
  .jl-app .jl-agence, .jl-app .jl-jumplove, .jl-app .jl-clients, .jl-app .jl-contacts{ margin-top:36px; }
  .e-con.jl-services, .e-con.jl-team{ margin-top:48px; }
  .jl-app .jl-fondation{ margin-top:28px; }
  .jl-amp{ width:44px; margin:18px 0; }
  .e-con.jl-service{ padding:24px 0 22px; }
  .jl-app .jl-label .elementor-heading-title{ margin-bottom:14px; }
  .e-con.jl-proj{ margin-bottom:36px; }
  .e-con.jl-proj-cap{ margin-top:6px; }
  .jl-plus{ margin-top:8px; }
  .jl-arrows{ gap:12px; }

  .jl-toggle-w{ display:block; position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:50; width:auto; }
  /* Bouton : bleu du site (#2D4FEC), les deux mots toujours visibles.
     Mot actif en gras (600), l'autre en light (300). */
  .jl-toggle-btn{ display:block; white-space:nowrap; padding:12px 26px; border-radius:0; background:var(--jl-bleu); color:#F4EFE6; font-family:"PP Mori",sans-serif; font-size:16px; font-weight:300; line-height:1.2; cursor:pointer; box-shadow:0 4px 16px rgba(0,0,0,.2); }
  .jl-toggle-btn{ display:flex; gap:28px; }
  .jl-toggle-btn .jl-t-agence{ font-weight:600; }
  .jl-toggle-btn .jl-t-projets{ font-weight:300; }
  .jl-app:has(#jl-toggle:checked) .jl-t-agence{ font-weight:300; }
  .jl-app:has(#jl-toggle:checked) .jl-t-projets{ font-weight:600; }
}

/* ===== 10. Portfolio (colonne droite) — projets chargés depuis le CMS (Projets) ===== */
.jl-projets{ display:block; }
.jl-projets-vide{ color:var(--jl-bleu); font-size:var(--jl-fs-petit); }
.jl-app article.jl-proj{ margin:0 0 3.1vw; padding:0; }
/* Carrousel : une image à la fois, 16:9, les images glissent latéralement */
.jl-car{ position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:#f4f4f4; touch-action:pan-y; }
.jl-car-track{ display:flex; height:100%; transition:transform .55s var(--jl-ease); will-change:transform; }
.jl-car-slide{ flex:0 0 100%; height:100%; }
.jl-car-slide img{ display:block; width:100%; height:100%; object-fit:cover; user-select:none; -webkit-user-drag:none; }
.jl-car-slide video{ display:block; width:100%; height:100%; object-fit:cover; pointer-events:none; background:#f4f4f4; }   /* vidéo dans un carrousel (voir le widget Portfolio) */
/* Moitié gauche = image précédente, moitié droite = image suivante */
.jl-app .jl-car-zone{ all:unset; position:absolute; top:0; bottom:0; width:50%; cursor:pointer; z-index:1; }
.jl-app .jl-car-prev{ left:0; }
.jl-app .jl-car-next{ right:0; }
/* Légende + flèches */
.jl-app .jl-proj-cap{ display:flex; justify-content:space-between; align-items:center; margin-top:.36vw; }
.jl-app h3.jl-proj-title{ margin:0; color:var(--jl-bleu); font-family:"PP Mori",sans-serif; font-weight:400;
  font-size:var(--jl-fs-petit); line-height:1.2; text-transform:uppercase; }
.jl-app .jl-proj .jl-arrows{ display:flex; gap:.6vw; }
/* Boutons sans aucun effet au survol (le thème Hello en ajoute un) */
.jl-app .jl-proj button.jl-btn, .jl-app .jl-proj button.jl-btn:hover, .jl-app .jl-proj button.jl-btn:focus{
  all:unset; cursor:pointer; color:var(--jl-bleu); line-height:0; background:none !important; box-shadow:none !important; }
.jl-app .jl-proj button.jl-btn:focus-visible{ outline:1px solid var(--jl-bleu); outline-offset:3px; }
.jl-app .jl-proj .jl-arrows svg{ width:1.04vw; min-width:16px; height:auto; }
.jl-app .jl-proj button.jl-plus, .jl-app .jl-proj button.jl-plus:hover, .jl-app .jl-proj button.jl-plus:focus{ display:inline-block; margin-top:1.1vw; }   /* après le « all:unset » des boutons */
.jl-app .jl-proj .jl-plus svg{ display:block; width:.94vw; min-width:14px; height:auto; transition:transform .35s var(--jl-ease); }
.jl-app .jl-proj.is-open .jl-plus svg{ transform:rotate(45deg); }
/* Texte descriptif : s'ouvre vers le bas */
.jl-proj-desc{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--jl-ease); }
.jl-proj.is-open .jl-proj-desc{ grid-template-rows:1fr; }
.jl-proj-desc-in{ overflow:hidden; min-height:0; cursor:pointer; }
.jl-app .jl-proj-desc-in, .jl-app .jl-proj-desc-in p{ font-family:"PP Mori",sans-serif; font-weight:400; color:var(--jl-bleu);
  font-size:var(--jl-fs-petit); line-height:1.45; }
.jl-app .jl-proj-desc-in p{ margin:0 0 1em; max-width:46em; }
.jl-app .jl-proj-desc-in p:first-child{ margin-top:1vw; }
@media (max-width:1024px){
  .jl-app article.jl-proj{ margin-bottom:36px; }
  .jl-app .jl-proj-cap{ margin-top:6px; }
  .jl-app .jl-proj button.jl-plus, .jl-app .jl-proj button.jl-plus:hover, .jl-app .jl-proj button.jl-plus:focus{ margin-top:16px; }
  .jl-app .jl-proj .jl-arrows{ gap:14px; }
  .jl-app .jl-proj-desc-in p:first-child{ margin-top:10px; }
}
.jl-app .jl-car-zone:hover, .jl-app .jl-car-zone:focus{ background:none !important; }
/* + sous le nom du projet : trait de 1,5 (comme les flèches) */
.jl-app .jl-proj .jl-plus svg path{ stroke-width:1.5; }
/* Pendant que le bandeau jaune s'en va (0,65 s), la colonne droite ne défile pas :
   la première image (Palais) arrive en haut au lieu d'être emportée par l'élan */
.jl-app.en-transition .e-con.jl-col-right{ overflow-y:hidden; }

/* ===== 11. Barre noire de WordPress (visible seulement quand on est connecté) : masquée sur l'accueil ===== */
#wpadminbar{ display:none !important; }
html:root{ margin-top:0 !important; }
.admin-bar .e-con.jl-app{ height:100vh; height:100dvh; }
@media (max-width:1024px){
  .admin-bar .e-con.jl-app{ height:auto; }
  .admin-bar .e-con.jl-header{ top:0; }
}

/* ===== 12. Retours de ligne différents sur mobile =====
   <br class="jl-d"> = retour desktop seulement ; <br class="jl-m"> = retour mobile seulement */
.jl-app br.jl-m{ display:none; }
@media (max-width:1024px){
  .jl-app br.jl-d{ display:none; }
  .jl-app br.jl-m{ display:inline; }
}

/* ===== 13. Mobile : tailles de texte qui suivent la largeur de l'écran =====
   Pour que chaque ligne (retours mobile) tienne sur une ligne, sans coupure en plus.
   --jl-pw = largeur de la page (script) ; 64 px = marges gauche 32 + droite 24 + 8 de sécurité. */
@media (max-width:1024px){
  .jl-app{
    --jl-fs-m-texte:clamp(11px, calc((var(--jl-pw, 100vw) - 64px) * 0.0400), 18px);
    --jl-fs-m-grand:clamp(18px, calc((var(--jl-pw, 100vw) - 64px) * 0.0675), 30px);
    --jl-fs-m-jaune:clamp(9px, calc((var(--jl-pw, 100vw) - 79px) * 0.0348), 16px);
  }
  .jl-app .jl-col-left .jl-body, .jl-app .jl-col-left .jl-body p,
  .jl-app .jl-col-left .jl-label .elementor-heading-title{ font-size:var(--jl-fs-m-texte); }
  .jl-app .jl-col-left .jl-big, .jl-app .jl-col-left .jl-big p{ font-size:var(--jl-fs-m-grand); }
  .jl-y-small, .jl-y-small p{ font-size:var(--jl-fs-m-jaune); }
}

/* ===== 14. Mobile : bandeau jaune dans la colonne Agence seulement ; en-tête sans bande ===== */
@media (max-width:1024px){
  /* le bandeau jaune est placé en haut de la colonne gauche par le script */
  .jl-app .jl-col-left > .e-con.elementor-element.jl-hero{ margin:0; padding:0; width:auto; max-width:none; }
  /* en-tête : logo, CONTACT et FR | EN flottent, toujours visibles, sans bande de fond */
  .jl-app .e-con.jl-header{ background:none; box-shadow:none; }
}

/* ===== 15. Liens légaux sous les coordonnées (politique de confidentialité, gestion des témoins) ===== */
.jl-app .jl-body p.jl-legal, .jl-app .jl-col-left .jl-body p.jl-legal{ font-size:.72em; line-height:1.6; margin-top:2.2em; }
.jl-app .jl-body p.jl-legal a{ text-decoration:underline; text-underline-offset:.15em; }

/* ===== 16. Section du bas « En savoir plus sur nous » (pleine largeur) =====
   Titre, filet bleu, mosaïque d'images. Les images viennent du CMS :
   Pages › « Mosaïque — accueil (bas de page) » (bloc Galerie) — voir le widget « Mosaïque ».
   Desktop : au bout d'une colonne, la page entière continue vers cette section
   (classe jl-en-bas sur <html> quand la page a quitté le haut, ajoutée par le script). */
@media (min-width:1025px){
  /* La page peut maintenant défiler sous les colonnes (barre de défilement cachée, pas d'élastique) */
  html:has(.jl-app){ scrollbar-width:none; overscroll-behavior-y:none; }
  html:has(.jl-app)::-webkit-scrollbar{ display:none; }
  body:has(.jl-app){ overflow-x:hidden; overflow-y:auto; }
  /* « clip » au lieu de « hidden » : avec « hidden », le navigateur ne passe pas le défilement d'une colonne à la page */
  .e-con.jl-app{ overflow:clip; }
  /* Au bout d'une colonne, le défilement passe à la page */
  .e-con.jl-col{ overscroll-behavior-y:auto; }
  /* Page descendue : les colonnes ne défilent plus, la molette fait défiler la page */
  .jl-en-bas .e-con.jl-col{ overflow-y:hidden; }
  /* En-tête toujours visible, même quand la page descend vers la section du bas */
  body:not(.elementor-editor-active) .e-con.jl-header{ position:fixed; top:0; left:0; right:0; width:auto; z-index:30; }
  body:not(.elementor-editor-active) .e-con.jl-app{ padding-top:var(--jl-hh); }
}
.e-con.jl-savoir{
  --jl-bleu:#2D4FEC;
  --jl-fs-petit:clamp(15px, 1.146vw, 44px);
  --jl-ease:cubic-bezier(.2,.7,.2,1);
  --jl-mos-col:8;                       /* colonnes de la mosaïque */
  position:relative; z-index:1; width:100%; max-width:none;
  padding:6.5vw 4.2vw 6vw; background:#fff; font-family:"PP Mori",sans-serif;
}
.e-con.jl-savoir > .elementor-element{ width:100%; max-width:100%; }
.jl-savoir .elementor-widget:not(:last-child){ margin-block-end:0; }
/* Titre : même style que le texte courant, en capitales, centré */
.jl-savoir .jl-savoir-titre .elementor-heading-title{
  margin:0; text-align:center; color:var(--jl-bleu) !important; font-family:"PP Mori",sans-serif;
  font-weight:400; font-size:var(--jl-fs-petit); line-height:1.2; text-transform:uppercase; letter-spacing:0;
}
/* Filet bleu pleine largeur */
.jl-savoir .jl-hr{ width:100%; margin-top:1.7vw; }
/* Mosaïque */
.jl-mos{ display:grid; grid-template-columns:repeat(var(--jl-mos-col), minmax(0, 1fr)); gap:.26vw; margin-top:2.5vw; }
.jl-mos:empty{ display:none; }
.jl-mos-item{
  position:relative; z-index:0; margin:0; aspect-ratio:1/1; background:#f4f4f4;
  --ox:50%; --oy:50%;                    /* point d'ancrage de l'agrandissement */
  transition:z-index .45s linear;        /* redescend peu à peu : reste au-dessus des voisines pendant qu'elle se réduit, mais sous la nouvelle image survolée */
}
.jl-mos-item img{
  display:block; width:100%; height:100%; object-fit:cover; user-select:none; -webkit-user-drag:none;
  transform-origin:var(--ox) var(--oy); transition:transform .45s var(--jl-ease);
}
/* Agrandissement à 300 % : au survol (souris), ou au toucher (classe is-zoom, ajoutée par le script) */
@media (hover:hover){
  .jl-mos-item:hover{ z-index:10; transition-duration:0s; }
  /* la souris « voit » la vignette d'origine, pas l'image agrandie : on passe d'une vignette à sa voisine sans sauter par-dessus */
  .jl-mos-item img{ pointer-events:none; }
  .jl-mos-item:hover img{ transform:scale(3); }
}
.jl-mos-item.is-zoom{ z-index:10; transition-duration:0s; }
.jl-mos-item.is-zoom img{ transform:scale(3); }
/* Les vignettes du bord grandissent vers l'intérieur (jamais hors de la mosaïque) :
   1re colonne vers la droite, dernière vers la gauche, rangée du bas vers le haut, 1re rangée vers le bas */
@media (min-width:1025px){
  .jl-mos-item:nth-child(8n+1){ --ox:0%; }
  .jl-mos-item:nth-child(8n){ --ox:100%; }
  .jl-mos-item:nth-child(8n+1):nth-last-child(-n+8),
  .jl-mos-item:nth-child(8n+1):nth-last-child(-n+8) ~ .jl-mos-item{ --oy:100%; }
  .jl-mos-item:nth-child(-n+8){ --oy:0%; }
}
@media (max-width:1024px){
  .e-con.jl-savoir{ --jl-mos-col:4; padding:56px 12px 110px; }   /* 110 px : place pour le bouton Agence / Projets */
  .jl-savoir .jl-savoir-titre .elementor-heading-title{ font-size:clamp(11px, calc((100vw - 64px) * 0.04), 18px); }
  .jl-savoir .jl-hr{ margin-top:14px; }
  .jl-mos{ gap:3px; margin-top:20px; }
  .jl-mos-item:nth-child(4n+1){ --ox:0%; }
  .jl-mos-item:nth-child(4n){ --ox:100%; }
  .jl-mos-item:nth-child(4n+1):nth-last-child(-n+4),
  .jl-mos-item:nth-child(4n+1):nth-last-child(-n+4) ~ .jl-mos-item{ --oy:100%; }
  .jl-mos-item:nth-child(-n+4){ --oy:0%; }
}


/* ===== 17. Liens légaux sous la mosaïque (politique de confidentialité, gestion des témoins) =====
   Le widget « Liens légaux (bas du site) » est maintenant le dernier élément de la section du bas. */
.jl-savoir .jl-legal-bas{ width:100%; }
.jl-savoir .jl-legal-bas p.jl-legal{
  margin:2.5vw 0 0; font-family:"PP Mori", sans-serif; font-weight:400;
  font-size:max(11px, .825vw); line-height:1.6; color:#2D4FEC; text-align:left;
}
.jl-savoir .jl-legal-bas p.jl-legal a{ color:inherit; text-decoration:underline; text-underline-offset:.15em; }
@media (max-width:1024px){
  .jl-savoir .jl-legal-bas p.jl-legal{ margin-top:20px; font-size:12px; }
}/* End custom CSS */