.elementor-22 .elementor-element.elementor-element-323317ce{--display:flex;--min-height:80px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--background-transition:0.3s;--overlay-opacity:0.5;--margin-top:0%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--padding-top:0%;--padding-bottom:0%;--padding-left:8%;--padding-right:8%;--z-index:95;}.elementor-22 .elementor-element.elementor-element-323317ce:not(.elementor-motion-effects-element-type-background), .elementor-22 .elementor-element.elementor-element-323317ce > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F9FAFB;}.elementor-22 .elementor-element.elementor-element-323317ce::before, .elementor-22 .elementor-element.elementor-element-323317ce > .elementor-background-video-container::before, .elementor-22 .elementor-element.elementor-element-323317ce > .e-con-inner > .elementor-background-video-container::before, .elementor-22 .elementor-element.elementor-element-323317ce > .elementor-background-slideshow::before, .elementor-22 .elementor-element.elementor-element-323317ce > .e-con-inner > .elementor-background-slideshow::before, .elementor-22 .elementor-element.elementor-element-323317ce > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-22 .elementor-element.elementor-element-11a7f379{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:20px 40px;--row-gap:20px;--column-gap:40px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-22 .elementor-element.elementor-element-11a7f379.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-widget-theme-site-logo .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-22 .elementor-element.elementor-element-5bcc0a0d{text-align:left;}.elementor-22 .elementor-element.elementor-element-5bcc0a0d img{width:100%;max-width:100%;height:50px;object-fit:contain;object-position:center center;opacity:1;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{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 );line-height:var( --e-global-typography-primary-line-height );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
					.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before,
					.elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown  .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-22 .elementor-element.elementor-element-53c8a77c .elementor-menu-toggle{margin:0 auto;background-color:#02010100;}.elementor-22 .elementor-element.elementor-element-53c8a77c .elementor-nav-menu .elementor-item{font-family:"Geist", Sans-serif;font-size:15px;font-weight:600;line-height:1.1em;}.elementor-22 .elementor-element.elementor-element-53c8a77c .elementor-nav-menu--main .elementor-item{color:#000000;fill:#000000;padding-left:0px;padding-right:0px;padding-top:2px;padding-bottom:2px;}.elementor-22 .elementor-element.elementor-element-53c8a77c .elementor-nav-menu--main .elementor-item:hover,
					.elementor-22 .elementor-element.elementor-element-53c8a77c .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-22 .elementor-element.elementor-element-53c8a77c .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-22 .elementor-element.elementor-element-53c8a77c .elementor-nav-menu--main .elementor-item:focus{color:#4563CE;fill:#4563CE;}.elementor-22 .elementor-element.elementor-element-53c8a77c .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
					.elementor-22 .elementor-element.elementor-element-53c8a77c .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:#D56260;}.elementor-22 .elementor-element.elementor-element-53c8a77c .e--pointer-framed .elementor-item:before,
					.elementor-22 .elementor-element.elementor-element-53c8a77c .e--pointer-framed .elementor-item:after{border-color:#D56260;}.elementor-22 .elementor-element.elementor-element-53c8a77c .elementor-nav-menu--main .elementor-item.elementor-item-active{color:#324A6D;}.elementor-22 .elementor-element.elementor-element-53c8a77c .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item.elementor-item-active:before,
					.elementor-22 .elementor-element.elementor-element-53c8a77c .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item.elementor-item-active:after{background-color:#324A6D;}.elementor-22 .elementor-element.elementor-element-53c8a77c .e--pointer-framed .elementor-item.elementor-item-active:before,
					.elementor-22 .elementor-element.elementor-element-53c8a77c .e--pointer-framed .elementor-item.elementor-item-active:after{border-color:#324A6D;}.elementor-22 .elementor-element.elementor-element-53c8a77c .e--pointer-framed .elementor-item:before{border-width:3px;}.elementor-22 .elementor-element.elementor-element-53c8a77c .e--pointer-framed.e--animation-draw .elementor-item:before{border-width:0 0 3px 3px;}.elementor-22 .elementor-element.elementor-element-53c8a77c .e--pointer-framed.e--animation-draw .elementor-item:after{border-width:3px 3px 0 0;}.elementor-22 .elementor-element.elementor-element-53c8a77c .e--pointer-framed.e--animation-corners .elementor-item:before{border-width:3px 0 0 3px;}.elementor-22 .elementor-element.elementor-element-53c8a77c .e--pointer-framed.e--animation-corners .elementor-item:after{border-width:0 3px 3px 0;}.elementor-22 .elementor-element.elementor-element-53c8a77c .e--pointer-underline .elementor-item:after,
					 .elementor-22 .elementor-element.elementor-element-53c8a77c .e--pointer-overline .elementor-item:before,
					 .elementor-22 .elementor-element.elementor-element-53c8a77c .e--pointer-double-line .elementor-item:before,
					 .elementor-22 .elementor-element.elementor-element-53c8a77c .e--pointer-double-line .elementor-item:after{height:3px;}.elementor-22 .elementor-element.elementor-element-53c8a77c{--e-nav-menu-horizontal-menu-item-margin:calc( 20px / 2 );}.elementor-22 .elementor-element.elementor-element-53c8a77c .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child){margin-bottom:20px;}.elementor-22 .elementor-element.elementor-element-53c8a77c .elementor-nav-menu--dropdown a, .elementor-22 .elementor-element.elementor-element-53c8a77c .elementor-menu-toggle{color:#000000;fill:#000000;}.elementor-22 .elementor-element.elementor-element-53c8a77c .elementor-nav-menu--dropdown{background-color:#F3F5F8;border-style:solid;}.elementor-22 .elementor-element.elementor-element-53c8a77c .elementor-nav-menu--dropdown a:hover,
					.elementor-22 .elementor-element.elementor-element-53c8a77c .elementor-nav-menu--dropdown a:focus,
					.elementor-22 .elementor-element.elementor-element-53c8a77c .elementor-nav-menu--dropdown a.elementor-item-active,
					.elementor-22 .elementor-element.elementor-element-53c8a77c .elementor-nav-menu--dropdown a.highlighted{background-color:#F9FAFD;}.elementor-22 .elementor-element.elementor-element-53c8a77c .elementor-nav-menu--dropdown a.elementor-item-active{background-color:#F9FAFD;}.elementor-22 .elementor-element.elementor-element-53c8a77c .elementor-nav-menu--dropdown .elementor-item, .elementor-22 .elementor-element.elementor-element-53c8a77c .elementor-nav-menu--dropdown  .elementor-sub-item{font-family:"Poppins", Sans-serif;font-size:16px;font-weight:400;text-transform:capitalize;font-style:normal;text-decoration:none;letter-spacing:0px;word-spacing:0em;}.elementor-22 .elementor-element.elementor-element-53c8a77c div.elementor-menu-toggle{color:#000000;}.elementor-22 .elementor-element.elementor-element-53c8a77c div.elementor-menu-toggle svg{fill:#000000;}.elementor-22 .elementor-element.elementor-element-146a8a1d{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:center;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:0%;--padding-bottom:0%;--padding-left:0%;--padding-right:0%;}.elementor-22 .elementor-element.elementor-element-146a8a1d.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-22 .elementor-element.elementor-element-5807856 .elementor-button{background-color:#000000;font-family:"Geist", Sans-serif;font-size:14px;font-weight:600;text-transform:capitalize;font-style:normal;text-decoration:none;line-height:1em;letter-spacing:0px;word-spacing:0em;text-shadow:0px 0px 34px rgba(0,0,0,0.3);fill:#FFFFFF;color:#FFFFFF;transition-duration:0.1s;border-style:solid;border-width:0px 0px 0px 0px;border-color:#FFFFFF;border-radius:8px 8px 8px 8px;padding:12px 24px 12px 24px;}.elementor-22 .elementor-element.elementor-element-5807856 .elementor-button:hover, .elementor-22 .elementor-element.elementor-element-5807856 .elementor-button:focus{background-color:#000000F2;color:#FFFFFF;border-color:#FFFFFF;box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);}.elementor-22 .elementor-element.elementor-element-5807856.elementor-element{--align-self:center;--flex-grow:1;--flex-shrink:0;}.elementor-22 .elementor-element.elementor-element-5807856 .elementor-button:hover svg, .elementor-22 .elementor-element.elementor-element-5807856 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-22 .elementor-element.elementor-element-15ab479 .elementor-button{background-color:#000000;font-family:"Geist", Sans-serif;font-size:14px;font-weight:600;text-transform:capitalize;font-style:normal;text-decoration:none;line-height:1em;letter-spacing:0px;word-spacing:0em;text-shadow:0px 0px 34px rgba(0,0,0,0.3);fill:#FFFFFF;color:#FFFFFF;transition-duration:0.1s;border-style:solid;border-width:0px 0px 0px 0px;border-color:#FFFFFF;border-radius:8px 8px 8px 8px;padding:12px 24px 12px 24px;}.elementor-22 .elementor-element.elementor-element-15ab479 .elementor-button:hover, .elementor-22 .elementor-element.elementor-element-15ab479 .elementor-button:focus{background-color:#000000F2;color:#FFFFFF;border-color:#FFFFFF;box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);}.elementor-22 .elementor-element.elementor-element-15ab479.elementor-element{--align-self:center;--flex-grow:1;--flex-shrink:0;}.elementor-22 .elementor-element.elementor-element-15ab479 .elementor-button:hover svg, .elementor-22 .elementor-element.elementor-element-15ab479 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-22 .elementor-element.elementor-element-ab347da{--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;}.elementor-22 .elementor-element.elementor-element-61873f6{--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;}.elementor-22 .elementor-element.elementor-element-b3f2117{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-22 .elementor-element.elementor-element-b081add{--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;}.elementor-22 .elementor-element.elementor-element-2315958{--display:flex;}.elementor-22 .elementor-element.elementor-element-43ed3b1{--display:flex;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:1024px){.elementor-22 .elementor-element.elementor-element-323317ce{--min-height:85px;--padding-top:0%;--padding-bottom:0%;--padding-left:5%;--padding-right:5%;}.elementor-22 .elementor-element.elementor-element-5bcc0a0d img{height:27px;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-22 .elementor-element.elementor-element-53c8a77c .elementor-nav-menu--dropdown .elementor-item, .elementor-22 .elementor-element.elementor-element-53c8a77c .elementor-nav-menu--dropdown  .elementor-sub-item{font-size:14px;}.elementor-22 .elementor-element.elementor-element-5807856 .elementor-button{font-size:14px;padding:14px 35px 14px 35px;}.elementor-22 .elementor-element.elementor-element-15ab479 .elementor-button{font-size:14px;padding:14px 35px 14px 35px;}}@media(max-width:767px){.elementor-22 .elementor-element.elementor-element-323317ce{--min-height:65px;}.elementor-22 .elementor-element.elementor-element-11a7f379{--width:20%;}.elementor-22 .elementor-element.elementor-element-5bcc0a0d img{height:20px;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-22 .elementor-element.elementor-element-53c8a77c .elementor-nav-menu--dropdown a{padding-top:14px;padding-bottom:14px;}.elementor-22 .elementor-element.elementor-element-53c8a77c .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-nav-menu--dropdown, .elementor-22 .elementor-element.elementor-element-53c8a77c .elementor-nav-menu__container.elementor-nav-menu--dropdown{margin-top:15px !important;}.elementor-22 .elementor-element.elementor-element-53c8a77c{--nav-menu-icon-size:20px;}.elementor-22 .elementor-element.elementor-element-146a8a1d{--width:80%;}.elementor-22 .elementor-element.elementor-element-5807856 .elementor-button{padding:12px 25px 12px 25px;}.elementor-22 .elementor-element.elementor-element-15ab479 .elementor-button{padding:12px 25px 12px 25px;}}@media(min-width:768px){.elementor-22 .elementor-element.elementor-element-11a7f379{--width:1;}.elementor-22 .elementor-element.elementor-element-146a8a1d{--width:1;}}@media(max-width:1024px) and (min-width:768px){.elementor-22 .elementor-element.elementor-element-11a7f379{--width:15%;}.elementor-22 .elementor-element.elementor-element-146a8a1d{--width:85%;}}/* Start custom CSS for html, class: .elementor-element-0d0277b */<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>LEMMPO — Logiciel de planning en ligne simple et efficace</title>
  <meta name="description" content="Planifiez vos équipes en quelques clics avec LEMMPO : créez, modifiez et partagez vos plannings en temps réel, sur ordinateur et mobile." />
  <meta name="theme-color" content="#ffffff" />
  <meta name="color-scheme" content="light" />

  <!-- Fonts: Manrope (titres/CTA) + Inter (texte) -->
  <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@700;800;900&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">

  <!-- (Optionnel) Précharger ton image Héro LCP pour booster le score -->
  <!-- <link rel="preload" as="image" href="/media/hero-planning-1400.webp" imagesrcset="/media/hero-planning-1024.webp 1024w, /media/hero-planning-1400.webp 1400w" imagesizes="(max-width:980px) 100vw, 50vw"> -->

  <style>
  /* === Effet doux de changement de couleur sur le H1 === */
#lemmpo-hero .title{
  /* on élargit le dégradé et on l’anime */
  background-image: linear-gradient(90deg,
    var(--blue-600) 0%,
    var(--blue-500) 22%,
    var(--red-warm) 50%,
    var(--blue-500) 78%,
    var(--blue-600) 100%);
  background-size: 220% 100%;
  animation: lemmpoTitleShift 16s ease-in-out infinite;
}

/* Soulignement qui suit le mouvement (subtil) */
#lemmpo-hero .title .underline::after{
  background: linear-gradient(90deg,
    rgba(37,99,235,.22) 0%,
    rgba(244,63,94,.22) 50%,
    rgba(37,99,235,.22) 100%);
  background-size: 220% 100%;
  animation: lemmpoTitleShift 16s ease-in-out infinite;
}

/* Accélère un peu au survol */
#lemmpo-hero .title:hover,
#lemmpo-hero .title:hover .underline::after{
  animation-duration: 6s;
}

/* Respecte les préférences d’accessibilité */
@media (prefers-reduced-motion: reduce){
  #lemmpo-hero .title,
  #lemmpo-hero .title .underline::after{
    animation: none !important;
  }
}

@keyframes lemmpoTitleShift{
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}
    /* ======= v3.1 (Bugfix & Robust) ======= */
    :root{
      --blue-400:#60a5fa; --blue-500:#2563eb; --blue-600:#1d4ed8; --blue-700:#1e40af;
      --red-warm:#f43f5e; --red-soft:#fb7185;
      --ink-900:#0f172a; --ink-700:#334155; --ink-600:#475569; --ink-500:#64748b; --ink-400:#94a3b8; --ink-300:#cbd5e1; --ink-200:#e2e8f0; --ink-100:#f1f5f9;
      --bg:#ffffff;
      --ff-head:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      --ff-body:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    }
    html{scroll-behavior:smooth}
    body{margin:0; background:var(--bg); color:var(--ink-900); font-family:var(--ff-body); line-height:1.65}
    h1,h2,h3,.heading,.btn{font-family:var(--ff-head)}

    /* ======= HERO (Bloc du haut) ======= */
    #lemmpo-hero{position:relative;overflow:hidden;background:#fff;padding: clamp(72px,8vw,116px) 0}
    #lemmpo-hero .hero-backdrop{position:absolute;inset:-20% -10% -30% -10%;z-index:0;background:
      radial-gradient(900px 420px at 15% -10%, rgba(37,99,235,.10), transparent),
      radial-gradient(900px 420px at 100% 0%, rgba(244,63,94,.10), transparent),
      linear-gradient(180deg, #fff 0%, #f8fbff 100%);
    }
    #lemmpo-hero .hero-backdrop::after{content:"";position:absolute;inset:0;opacity:.14;background-image: radial-gradient(rgba(15,23,42,.06) 1px, transparent 1px);background-size: 28px 28px}
    #lemmpo-hero .blob{position:absolute;filter:blur(10px)}
    #lemmpo-hero .b1{width:520px;left:-80px;top:-60px}
    #lemmpo-hero .b2{width:520px;right:-60px;top:60px}

    #lemmpo-hero .hero-wrap{position:relative;z-index:1;width:min(1180px,92%); margin-inline:auto; display:grid; gap:44px; grid-template-columns:minmax(0,.58fr) minmax(0,.42fr); align-items:center}
    @media (max-width:980px){#lemmpo-hero .hero-wrap{grid-template-columns:1fr; gap:36px}}

    #lemmpo-hero .eyebrow{display:inline-block;font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:12px;color:#1e40af;background:rgba(37,99,235,.12);padding:6px 10px;border-radius:12px}
    #lemmpo-hero .nowrap{white-space:nowrap}
    #lemmpo-hero .title{font-size:clamp(36px,5.4vw,60px);line-height:1.05;margin:10px 0 14px;letter-spacing:-.012em;
      background:linear-gradient(90deg, var(--blue-600) 0%, var(--blue-500) 58%, var(--red-warm) 100%);
      -webkit-background-clip:text;background-clip:text;color:transparent; -webkit-text-stroke:.25px rgba(0,0,0,.05)
    }
    @supports not (text-wrap: balance){ #lemmpo-hero .title{word-break:normal} }
    #lemmpo-hero .title .underline{position:relative;display:inline-block}
    #lemmpo-hero .title .underline::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.2em;border-radius:.22em;background: linear-gradient(90deg, rgba(37,99,235,.22), rgba(244,63,94,.22))}

    #lemmpo-hero .lead{font-size:clamp(16px,2.1vw,20px);color:var(--ink-600);max-width:60ch;margin:0 0 14px}
    #lemmpo-hero .checks{list-style:none;padding:0;margin:0 0 18px;color:var(--ink-600)}
    #lemmpo-hero .checks li{position:relative;padding-left:28px;margin:8px 0}
    #lemmpo-hero .checks li::before{content:"";position:absolute;left:0;top:6px;width:18px;height:18px;border-radius:50%;background:conic-gradient(from 0deg, var(--blue-600), var(--red-warm));mask:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"white\" d=\"M20.285 6.709l-11.3 11.3L3.714 12.74l1.414-1.414 3.857 3.857 9.886-9.885z\"/></svg>') center/contain no-repeat}

    #lemmpo-hero .label{font-weight:800;font-size:14px;color:var(--ink-700);display:block;margin:0 0 6px}
    #lemmpo-hero .row{display:flex;gap:10px;flex-wrap:wrap}
    #lemmpo-hero .input{flex:1;min-width:260px;background:#fff;border:1px solid var(--ink-200);border-radius:14px;height:52px;padding:0 16px;font-weight:600;color:var(--ink-900);transition:.2s;box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 10px 28px rgba(2,6,23,.04)}
    #lemmpo-hero .input:focus{outline:none;box-shadow:0 0 0 4px rgba(37,99,235,.18), 0 1px 0 rgba(255,255,255,.6) inset, 0 10px 28px rgba(2,6,23,.04);border-color:transparent}
    #lemmpo-hero .input.error{border-color:#dc2626; box-shadow:0 0 0 4px rgba(220,38,38,.15)}

    #lemmpo-hero .btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 22px;border-radius:999px;font-weight:800;letter-spacing:.2px;text-decoration:none;transition:.25s ease;position:relative;isolation:isolate;font-family:var(--ff-head)}
    #lemmpo-hero .btn[aria-disabled="true"]{opacity:.55;pointer-events:none}
    #lemmpo-hero .btn-primary{color:#fff;background:linear-gradient(90deg, var(--blue-600), var(--red-warm));box-shadow:0 12px 28px rgba(37,99,235,.18), 0 2px 0 rgba(255,255,255,.25) inset}
    #lemmpo-hero .btn-primary::after{content:"";position:absolute;inset:-2px;border-radius:999px;padding:2px;background:linear-gradient(90deg, var(--blue-600), var(--red-warm));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:.25s}
    #lemmpo-hero .btn-ghost{background:#fff;color:var(--blue-600);border:2px solid #dbeafe}
    #lemmpo-hero .btn:hover{transform:translateY(-1px)}
    #lemmpo-hero .btn-primary:hover::after{opacity:.6}

    #lemmpo-hero .help{font-size:12px;color:var(--ink-600);margin-top:6px}
    #lemmpo-hero .msg{font-size:13px;margin-top:6px}
    #lemmpo-hero .msg.error{color:#b91c1c}
    #lemmpo-hero .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
    #lemmpo-hero .chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg, var(--blue-600), var(--red-warm)) border-box;color:var(--ink-700);font-weight:700;font-size:12px;box-shadow: 0 2px 10px rgba(2,6,23,.04)}
    #lemmpo-hero .chip::before{content:"";width:14px;height:14px;background:var(--ink-400);mask-size:contain;mask-repeat:no-repeat}
    #lemmpo-hero .chip.icon-rgpd::before{mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M12 1.75l7 3v6.2c0 5.05-3.28 9.7-7 11.3-3.72-1.6-7-6.25-7-11.3V4.75l7-3z\"/></svg>')}
    #lemmpo-hero .chip.icon-eu::before{mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"9\"/></svg>')}
    #lemmpo-hero .chip.icon-support::before{mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M12 3a9 9 0 100 18 9 9 0 000-18zm1 13h-2v-2h2v2zm0-4h-2V7h2v5z\"/></svg>')}

    #lemmpo-hero .rating{display:flex;gap:8px;align-items:center;margin-top:12px;color:var(--ink-700)}
    #lemmpo-hero .stars{letter-spacing:1px;background:linear-gradient(90deg, var(--blue-600), var(--red-warm));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:900;filter:drop-shadow(0 1px 0 rgba(255,255,255,.6))}
    #lemmpo-hero .rate{font-weight:900}

    #lemmpo-hero .mockup{position:relative;margin:0;background:linear-gradient(180deg, rgba(37,99,235,.05), rgba(244,63,94,.05));border:1px solid var(--ink-200);border-radius:20px;box-shadow:0 12px 30px rgba(15,23,42,.08), 0 40px 80px rgba(15,23,42,.06);padding:16px}
    #lemmpo-hero .mockup .glow{position:absolute;inset:-14px;z-index:-1;border-radius:28px;filter:blur(18px);opacity:.50;background: radial-gradient(60% 50% at 50% 0%, rgba(37,99,235,.20), transparent), radial-gradient(50% 40% at 20% 80%, rgba(244,63,94,.18), transparent)}
    #lemmpo-hero .mockup::after{content:""; position:absolute; inset:1px; border-radius:19px; pointer-events:none; background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 40%)}
    #lemmpo-hero img{display:block;width:100%;height:auto;border-radius:16px}

    #lemmpo-hero .scroll-hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);text-decoration:none;font-size:18px;color:var(--ink-400);opacity:.9}
    @media (prefers-reduced-motion:no-preference){#lemmpo-hero .blob{ animation:floatBlob 10s ease-in-out infinite } #lemmpo-hero .b2{ animation-delay:-3s } #lemmpo-hero .mockup{ animation:floatCard 8s ease-in-out infinite } @keyframes floatBlob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-8px) } } @keyframes floatCard{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }}

    #lemmpo-hero .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
    #lemmpo-hero :focus-visible{outline:2px solid rgba(37,99,235,.8);outline-offset:3px;border-radius:12px}

    /* Responsive */
    @media (max-width:980px){#lemmpo-hero{ padding:64px 0 80px } #lemmpo-hero .row .input, #lemmpo-hero .row .btn{ height:50px } #lemmpo-hero .mockup{ margin-top:4px }}
    @media (max-width:640px){#lemmpo-hero .title{ font-size:clamp(32px,10vw,40px) } #lemmpo-hero .lead{ max-width:64ch }}
  </style>
</head>
<body>
  <!-- ======= HERO SECTION ======= -->
  <section id="lemmpo-hero" aria-labelledby="hero-title">
    <!-- Décors de fond -->
    <div class="hero-backdrop" aria-hidden="true">
      <svg class="blob b1" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><g transform="translate(300,300)"><path d="M128.1,-147.8C161.7,-122.8,182.7,-81.4,189.4,-39.3C196.2,2.9,188.7,45.6,167.4,81.7C146.2,117.8,111.1,147.3,72.5,166.5C33.8,185.7,-8.3,194.6,-49.6,185.3C-90.9,176.1,-131.3,148.6,-161.4,112.2C-191.6,75.9,-211.5,30.8,-206.5,-11.7C-201.6,-54.3,-171.9,-94.4,-135.1,-119.2C-98.2,-143.9,-54.2,-153.3,-12.4,-145.8C29.4,-138.3,58.7,-113,128.1,-147.8Z" fill="url(#g)"/></g><defs><linearGradient id="g" x1="0" x2="1"><stop offset="0%" stop-color="#1d4ed8" stop-opacity=".14"/><stop offset="50%" stop-color="#2563eb" stop-opacity=".10"/><stop offset="100%" stop-color="#f43f5e" stop-opacity=".12"/></linearGradient></defs></svg>
      <svg class="blob b2" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><g transform="translate(300,300)"><path d="M129.2,-110.5C167.7,-79.3,201.4,-39.6,206.8,2.8C212.2,45.2,189.3,90.4,155.4,126.7C121.5,162.9,76.7,190.1,32.3,185.8C-12,181.4,-56.1,145.5,-89.9,110.2C-123.6,75,-147.1,40.5,-158.9,0.7C-170.7,-39.1,-170.9,-78.2,-148.4,-107.9C-125.8,-137.6,-80.6,-157.9,-36.9,-158.2C6.8,-158.5,51.1,-138.8,129.2,-110.5Z" fill="url(#g2)"/></g><defs><linearGradient id="g2" x1="0" x2="1"><stop offset="0%" stop-color="#60a5fa" stop-opacity=".12"/><stop offset="100%" stop-color="#fb7185" stop-opacity=".12"/></linearGradient></defs></svg>
    </div>

    <div class="hero-wrap">
      <div class="col text">
        <span class="eyebrow">Planning d'équipe</span>
        <h1 id="hero-title" class="title">
          Logiciel de planning <span class="nowrap">en ligne</span>
          <span class="underline">simple et efficace</span>
        </h1>
        <p class="lead">Planifiez vos équipes en quelques clics et gagnez du temps avec LEMMPO. Créez, modifiez et partagez vos plannings en temps réel, sur ordinateur et mobile.</p>
        <ul class="checks">
          <li>Interface intuitive</li>
          <li>Accès web & mobile</li>
          <li>Partage instantané avec les équipes</li>
        </ul>

        <form class="cta-form" onsubmit="return false" aria-describedby="hero-help hero-msg">
          <label for="hero-email" class="label">Adresse e‑mail professionnelle</label>
          <div class="row">
            <input id="hero-email" class="input" type="email" placeholder="nom@entreprise.com" inputmode="email" required />
            <a id="cta-free" href="/inscription" class="btn btn-primary" aria-disabled="true" tabindex="-1">Essayer gratuitement</a>
            <a id="cta-demo" href="/demo" class="btn btn-ghost" aria-disabled="true" tabindex="-1">Demander une démo</a>
          </div>
          <div id="hero-help" class="help">Aucune carte bancaire requise · Annulation à tout moment</div>
          <div id="hero-msg" class="msg" aria-live="polite"></div>
          <div class="chips" role="list" aria-label="Réassurances">
            <span role="listitem" class="chip icon-rgpd">Conforme RGPD</span>
            <span role="listitem" class="chip icon-eu">Hébergé en 🇪🇺</span>
            <span role="listitem" class="chip icon-support">Support &lt; 24h</span>
          </div>
          <div class="rating" aria-label="Satisfaction clients">
            <span class="stars" aria-hidden="true">★★★★★</span>
            <span class="rate">Note 4,8/5</span>
            <span class="muted">(sur les 12 derniers mois)</span>
          </div>
        </form>
      </div>

      <div class="col visual" role="region" aria-label="Aperçu du planning LEMMPO">
        <figure class="mockup">
          <div class="glow" aria-hidden="true"></div>
          <img
            src="https://via.placeholder.com/1400x820.webp?text=LEMMP0+Planning+Mockup"
            srcset="https://via.placeholder.com/768x450.webp?text=LEMMP0+Planning+Mockup 768w, https://via.placeholder.com/1024x600.webp?text=LEMMP0+Planning+Mockup 1024w, https://via.placeholder.com/1400x820.webp?text=LEMMP0+Planning+Mockup 1400w"
            sizes="(max-width: 980px) 100vw, 50vw"
            width="1400" height="820"
            alt="Capture d'écran du logiciel de planning LEMMPO"
            decoding="async" fetchpriority="high" />
          <figcaption class="sr-only">Exemple d'un planning hebdomadaire avec codes couleurs par employé.</figcaption>
        </figure>
      </div>
    </div>

    <a href="#apercu" class="scroll-hint" aria-label="Voir les fonctionnalités">▼</a>
  </section>

  <script>
    // 1) UX : validation e-mail + passage en query string + états CTA + tabindex
    (function(){
      const input = document.getElementById('hero-email');
      const free = document.getElementById('cta-free');
      const demo = document.getElementById('cta-demo');
      const msg = document.getElementById('hero-msg');
      if(!input || !free || !demo) return;
      function isValidEmail(v){ return /.+@.+\..+/.test(v); }
      function update(){
        const v = input.value.trim();
        const ok = isValidEmail(v);
        const q = ok ? ('?email=' + encodeURIComponent(v)) : '';
        free.href = '/inscription' + q;
        demo.href = '/demo' + q;
        free.setAttribute('aria-disabled', (!ok).toString());
        demo.setAttribute('aria-disabled', (!ok).toString());
        free.setAttribute('tabindex', ok ? '0' : '-1');
        demo.setAttribute('tabindex', ok ? '0' : '-1');
        if(!ok && v !== ''){
          input.classList.add('error');
          msg.textContent = 'Entrez une adresse e‑mail professionnelle valide.';
          msg.classList.add('error');
        } else {
          input.classList.remove('error');
          msg.textContent = '';
          msg.classList.remove('error');
        }
      }
      input.addEventListener('input', update); update();
    })();

    // 2) Scroll hint : cache si la section cible n'existe pas
    (function(){
      const hint = document.querySelector('#lemmpo-hero .scroll-hint');
      const target = document.querySelector('#apercu, #features, #avantages');
      if(hint && !target){ hint.style.display = 'none'; }
    })();
  </script>
</body>
</html>/* End custom CSS */