/* =====================================================================
   Landing page (views/landing.ejs) — refonte "maquettes animées".
   Chargée après app.css via head.ejs (variable extraCss). Tout est
   préfixé .lp- pour ne pas toucher aux règles partagées (pricing.ejs,
   pages légales, etc. utilisent encore .section / .hero / .final-cta).

   Animations : seulement si l'utilisateur n'a pas demandé à réduire les
   mouvements. landing.js ajoute html.lp-anim dans ce cas ; sans JS ou en
   "reduced motion", tout s'affiche directement dans son état final.
   Couleurs : uniquement les variables de app.css (le mode sombre suit
   tout seul) ; les pastilles saturées gardent un texte encre fixe.
   ===================================================================== */

.lp{overflow-x:clip;}
.lp-section{max-width:1120px; margin:0 auto; padding:72px 40px;}
.lp-head{max-width:640px; margin:0 0 36px;}
.lp-head-center{margin-left:auto; margin-right:auto; text-align:center;}
.lp-head h2{font-size:clamp(26px,3.4vw,38px); line-height:1.12; letter-spacing:-0.015em; margin-bottom:12px;}
.lp-sub{margin:0; color:var(--ink-soft); font-size:16px; line-height:1.6;}

/* ---------------- Trois situations ---------------- */
.lp-tabs{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px;}
.lp-tab{
  position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:10px;
  padding:11px 18px 11px 12px; border-radius:999px; cursor:pointer;
  background:var(--surface-raised); border:1px solid var(--border-strong);
  font-weight:700; font-size:14px; color:var(--ink-soft);
  transition:background .2s, color .2s, border-color .2s, transform .15s;
}
.lp-tab:hover{color:var(--ink); transform:translateY(-1px);}
.lp-tab-n{
  width:24px; height:24px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface-alt); border:1px solid var(--border-strong); font-size:12px; font-weight:800; color:var(--ink-soft);
}
.lp-tab.is-active{background:var(--ink); border-color:var(--ink); color:var(--surface);}
.lp-tab.is-active .lp-tab-n{background:var(--accent); border-color:var(--accent); color:#fff;}
:root[data-theme="dark"] .lp-tab.is-active .lp-tab-n{color:#1B1E36;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .lp-tab.is-active .lp-tab-n{color:#1B1E36;}}
.lp-tab::after{
  content:''; position:absolute; left:0; bottom:0; height:3px; width:100%; background:var(--accent-warm);
  transform:scaleX(0); transform-origin:left;
}
.lp-anim .lp-tabs.is-auto .lp-tab.is-active::after{animation:lp-progress var(--lp-rot,6s) linear forwards;}
.lp-tabs.is-paused .lp-tab.is-active::after{animation-play-state:paused;}

.lp-panels{
  background:var(--surface-alt); border:1px solid var(--border); border-radius:28px; padding:36px;
  min-height:340px;
}
.lp-panel{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:36px; align-items:center;}
.lp-panel + .lp-panel{margin-top:40px; padding-top:40px; border-top:1px dashed var(--border-strong);}
.lp-js .lp-panel{display:none; margin:0; padding:0; border:0;}
.lp-js .lp-panel.is-active{display:grid;}
.lp-panel-copy h3{font-size:clamp(21px,2.4vw,27px); line-height:1.2; margin-bottom:16px;}
.lp-panel-copy blockquote{
  margin:0; padding:0 0 0 16px; border-left:4px solid var(--accent-warm);
  color:var(--ink-soft); font-size:16px; line-height:1.6; font-style:italic;
}
.lp-panel-art{position:relative; min-width:0; min-height:250px; display:flex; align-items:center; justify-content:center;}

/* Post-it */
.lp-notes{display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:6px;}
.lp-sticky{
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:104px; padding:16px; border-radius:6px 6px 14px 6px; background:var(--bg);
  color:#1B1E36; font-weight:700; font-size:14.5px; line-height:1.35;
  box-shadow:0 10px 18px rgba(27,30,54,.16), inset 0 -10px 14px rgba(27,30,54,.05);
}
.lp-sticky.s1{transform:rotate(-3deg);}
.lp-sticky.s2{transform:rotate(2.5deg) translateY(8px);}
.lp-sticky.s3{transform:rotate(2deg);}
.lp-sticky.s4{transform:rotate(-2.5deg) translateY(8px);}

/* Agenda */
.lp-agenda{
  width:100%; max-width:480px; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px;
  background:var(--surface-raised); border:1px solid var(--border); border-radius:20px; padding:14px; box-shadow:var(--shadow-sm);
}
.ag-day{text-align:center; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); padding-bottom:4px;}
.ag-ev, .ag-free, .ag-gap{
  min-height:48px; padding:6px 7px; border-radius:9px; font-size:11px; font-weight:700; line-height:1.25;
  display:flex; align-items:center;
}
.ag-ev{background:color-mix(in srgb, var(--c) 82%, var(--surface-raised)); color:#1B1E36;}
.ag-free{
  justify-content:center; text-align:center; color:var(--accent); font-size:12px;
  border:2px dashed var(--accent); background:color-mix(in srgb, var(--accent) 8%, transparent);
}
.ag-gap{background:var(--surface-alt); border:1px dashed var(--border-strong);}

/* Carte générique pour les maquettes */
.lp-card{
  width:100%; background:var(--surface-raised); border:1px solid var(--border);
  border-radius:20px; padding:20px; box-shadow:var(--shadow-sm);
}
.lp-card-title{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15px; margin-bottom:14px;
}
.lp-card-title span{font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:12px; color:var(--ink-faint);}

/* Tâches répétitives */
.lp-tasks{max-width:440px;}
.lp-tasks ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
.lp-tasks li{display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; background:var(--surface-alt); border:1px solid var(--border);}
.tk-name{flex:1; font-weight:600; font-size:14px;}
.tk-who{
  width:28px; height:28px; border-radius:50%; flex:none; display:inline-flex; align-items:center; justify-content:center;
  background:var(--c,var(--accent-purple)); color:#1B1E36; font-size:11px; font-weight:800;
}
.tk-n{font-family:'JetBrains Mono',monospace; font-weight:600; font-size:15px; min-width:46px; text-align:right; color:var(--accent);}

/* ---------------- Comment ça marche ---------------- */
.lp-how{background:transparent;}
.lp-steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:28px;}
.lp-step{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:44px; align-items:center;
  padding:28px; border-radius:28px; background:var(--surface-alt); border:1px solid var(--border);
}
.lp-step:nth-child(even) .lp-step-copy{order:2;}
.lp-step-n{
  display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%;
  background:var(--accent); color:#fff; font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:18px; margin-bottom:14px;
  box-shadow:0 8px 18px color-mix(in srgb, var(--accent) 38%, transparent);
}
:root[data-theme="dark"] .lp-step-n{color:#1B1E36;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .lp-step-n{color:#1B1E36;}}
.lp-step-copy h3{font-size:clamp(20px,2.2vw,26px); line-height:1.2; margin-bottom:10px;}
.lp-step-copy p{margin:0; color:var(--ink-soft); font-size:15.5px; line-height:1.65; max-width:440px;}
.lp-step-art{display:flex; justify-content:center; min-width:0;}
.lp-step-art .lp-card{max-width:460px;}

/* 1. fiche établissement */
.hf{display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px dashed var(--border-strong);}
.hf:last-child{border-bottom:0;}
.hf-l{width:130px; flex:none; font-size:12px; font-weight:700; color:var(--ink-faint);}
.hf-v{flex:1; min-width:0; font-weight:700; font-size:14px;}
.hf-ok{
  flex:none; width:20px; height:20px; border-radius:50%; background:var(--accent-green); position:relative;
}
.hf-ok::after{
  content:''; position:absolute; left:6px; top:3px; width:5px; height:9px; border:solid #1B1E36; border-width:0 2.4px 2.4px 0; transform:rotate(45deg);
}

/* 2. prospects */
.pr{display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border);}
.pr:last-child{border-bottom:0; padding-bottom:0;}
.pr-av{
  width:38px; height:38px; border-radius:12px; flex:none; display:inline-flex; align-items:center; justify-content:center;
  background:var(--c); color:#1B1E36; font-weight:800; font-size:13px;
}
.pr-t{flex:1; min-width:0; display:flex; flex-direction:column;}
.pr-t b{font-size:14px;}
.pr-t small{color:var(--ink-faint); font-size:12px; font-weight:600;}
.pr-add{
  flex:none; padding:5px 11px; border-radius:999px; font-size:12px; font-weight:700;
  border:1px solid var(--border-strong); color:var(--ink-soft); background:var(--surface-alt);
}

/* 3. email */
.lp-mail{padding:0; overflow:hidden;}
.ml-row{display:flex; gap:12px; padding:10px 18px; border-bottom:1px solid var(--border); font-size:13px; align-items:baseline;}
.ml-row b{font-weight:700;}
.ml-l{width:52px; flex:none; color:var(--ink-faint); font-weight:700; font-size:12px;}
.ml-body{padding:16px 18px 6px; font-size:13.5px; line-height:1.6; min-height:330px; text-align:left;}
.ml-body p{margin:0 0 10px;}
.ml-body mark{background:color-mix(in srgb, var(--accent-warm) 62%, transparent); color:inherit; padding:0 3px; border-radius:4px;}
.ml-foot{display:flex; justify-content:flex-end; padding:8px 18px 16px;}
.ml-send{
  padding:9px 20px; border-radius:999px; background:var(--accent); color:#fff; font-weight:800; font-size:13px;
  box-shadow:0 8px 18px color-mix(in srgb, var(--accent) 36%, transparent); transition:background .25s, transform .25s;
}
:root[data-theme="dark"] .ml-send{color:#1B1E36;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ml-send{color:#1B1E36;}}
.ml-send.is-sent{background:var(--accent-green); color:#1B1E36; box-shadow:none;}
.ml-send.is-press{transform:scale(.93);}
.lp-caret{display:inline-block; width:2px; height:1.05em; margin-left:1px; vertical-align:text-bottom; background:var(--accent);}

/* 4. kanban */
.lp-kanban{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:14px; max-width:520px;}
.kb-col{background:var(--surface-alt); border-radius:12px; padding:8px 6px; min-height:150px; min-width:0;}
.kb-h{font-size:10.5px; font-weight:800; line-height:1.25; padding:0 4px 8px; display:flex; align-items:flex-start; gap:5px; color:var(--ink-soft);}
.kb-h::before{content:''; width:8px; height:8px; margin-top:2px; border-radius:50%; background:var(--c); flex:none;}
.kb-body{display:flex; flex-direction:column; gap:6px; min-height:100px;}
.kb-c{
  display:block; padding:8px 8px; border-radius:9px; background:var(--surface-raised); border:1px solid var(--border);
  border-left:3px solid var(--c, var(--accent)); font-size:11.5px; font-weight:700; line-height:1.25; box-shadow:0 4px 10px rgba(27,30,54,.06);
}
.kb-c.is-moving{box-shadow:0 10px 20px color-mix(in srgb, var(--accent) 30%, transparent); border-color:var(--accent);}

/* Pastilles de réassurance */
.lp-pills{list-style:none; margin:44px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:12px; justify-content:center;}
.lp-pills li{
  display:inline-flex; align-items:center; gap:10px; padding:12px 20px; border-radius:999px;
  background:var(--surface-raised); border:1px solid var(--border-strong); font-weight:700; font-size:14.5px; box-shadow:var(--shadow-sm);
}
.lp-pill-dot{width:11px; height:11px; border-radius:50%; flex:none;}

/* ---------------- Tarif (réutilise .pricing-callout) ---------------- */
.lp-engagement{margin:14px 0 0; font-size:13.5px; color:#fff; opacity:.9;}
:root[data-theme="dark"] .lp-engagement{color:#1B1E36;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .lp-engagement{color:#1B1E36;}}

/* ---------------- FAQ ---------------- */
.lp-faq{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px;}
.lp-faq details{background:var(--surface-raised); border:1px solid var(--border); border-radius:18px; padding:0 22px; box-shadow:var(--shadow-sm);}
.lp-faq summary{
  list-style:none; cursor:pointer; padding:18px 30px 18px 0; font-weight:700; font-size:15.5px; position:relative;
}
.lp-faq summary::-webkit-details-marker{display:none;}
.lp-faq summary::after{
  content:'+'; position:absolute; right:0; top:50%; transform:translateY(-50%); width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:var(--surface-alt); color:var(--accent); font-size:18px; font-weight:800; line-height:1;
  transition:transform .2s;
}
.lp-faq details[open] summary::after{content:'−';}
.lp-faq details p{margin:0; padding:0 0 20px; color:var(--ink-soft); line-height:1.65;}

/* ---------------- Animations (si mouvement autorisé) ---------------- */
@media (prefers-reduced-motion: no-preference){
  /* Apparition au scroll */
  .lp-anim .lp-rv{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);}
  .lp-anim .lp-rv.is-in{opacity:1; transform:none;}

  /* Situations */
  .lp-anim .lp-panel.is-active .lp-panel-copy{animation:lp-up .55s ease both;}
  .lp-anim .lp-panel.is-active .lp-sticky{animation:lp-drop .7s cubic-bezier(.3,1.4,.5,1) both;}
  .lp-anim .lp-panel.is-active .lp-sticky.s2{animation-delay:.18s;}
  .lp-anim .lp-panel.is-active .lp-sticky.s3{animation-delay:.36s;}
  .lp-anim .lp-panel.is-active .lp-sticky.s4{animation-delay:.54s;}
  .lp-anim .lp-panel.is-active .ag-ev, .lp-anim .lp-panel.is-active .ag-gap{animation:lp-fade .45s ease both;}
  .lp-anim .lp-panel.is-active .ag-ev:nth-of-type(n){animation-delay:calc(var(--k,0) * 70ms);}
  .lp-anim .lp-panel.is-active .ag-free{animation:lp-fade .45s .75s ease both, lp-pulse 1.8s 1.3s ease-in-out infinite;}
  .lp-anim .lp-panel.is-active .lp-tasks li{animation:lp-slide .5s ease both;}
  .lp-anim .lp-panel.is-active .lp-tasks li:nth-child(2){animation-delay:.12s;}
  .lp-anim .lp-panel.is-active .lp-tasks li:nth-child(3){animation-delay:.24s;}
  .lp-anim .lp-panel.is-active .lp-tasks li:nth-child(4){animation-delay:.36s;}

  /* Étapes */
  .lp-anim .lp-step .hf-ok{opacity:0; transform:scale(0);}
  .lp-anim .lp-step.is-in .hf-ok{animation:lp-pop .45s cubic-bezier(.3,1.6,.5,1) forwards;}
  .lp-anim .lp-step.is-in .hf:nth-of-type(1) .hf-ok{animation-delay:.5s;}
  .lp-anim .lp-step.is-in .hf:nth-of-type(2) .hf-ok{animation-delay:1s;}
  .lp-anim .lp-step.is-in .hf:nth-of-type(3) .hf-ok{animation-delay:1.5s;}
  .lp-anim .lp-step.is-in .hf:nth-of-type(4) .hf-ok{animation-delay:2s;}
  .lp-anim .lp-step .pr{opacity:0;}
  .lp-anim .lp-step.is-in .pr{animation:lp-slide .55s ease forwards;}
  .lp-anim .lp-step.is-in .pr:nth-of-type(2){animation-delay:.2s;}
  .lp-anim .lp-step.is-in .pr:nth-of-type(3){animation-delay:.4s;}
  .lp-anim .lp-step.is-in .pr:nth-of-type(4){animation-delay:.6s;}
  .lp-anim .lp-step.is-in .pr-add{animation:lp-pulse 2.2s 1.4s ease-in-out infinite;}
  .lp-caret{animation:lp-caret 1s steps(1) infinite;}
}
@keyframes lp-up{from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:none;}}
@keyframes lp-fade{from{opacity:0; transform:scale(.92);} to{opacity:1; transform:none;}}
@keyframes lp-slide{from{opacity:0; transform:translateX(-18px);} to{opacity:1; transform:none;}}
@keyframes lp-pop{from{opacity:0; transform:scale(0);} to{opacity:1; transform:scale(1);}}
@keyframes lp-drop{from{opacity:0; translate:0 -40px; scale:1.15;} to{opacity:1; translate:0 0; scale:1;}}
@keyframes lp-pulse{0%,100%{transform:scale(1);} 50%{transform:scale(1.06);}}
@keyframes lp-progress{from{transform:scaleX(0);} to{transform:scaleX(1);}}
@keyframes lp-caret{0%,50%{opacity:1;} 50.01%,100%{opacity:0;}}

/* ---------------- Responsive ---------------- */
@media (max-width:900px){
  .lp-section{padding:56px 24px;}
  .lp-panels{padding:24px;}
  .lp-panel{grid-template-columns:minmax(0,1fr); gap:24px;}
  .lp-step{grid-template-columns:minmax(0,1fr); gap:24px; padding:22px;}
  .lp-step:nth-child(even) .lp-step-copy{order:0;}
  .lp-step-copy p{max-width:none;}
}
@media (max-width:600px){
  .lp-section{padding:44px 16px;}
  .lp-tabs{flex-direction:column; align-items:stretch;}
  .lp-tab{border-radius:16px;}
  .lp-panels{padding:16px 12px; border-radius:22px;}
  .lp-step{padding:18px; border-radius:22px;}
  .lp-notes{gap:10px;}
  .lp-sticky{min-height:88px; font-size:13px; padding:12px;}
  .lp-agenda{padding:8px; gap:3px;}
  .ag-ev, .ag-free, .ag-gap{font-size:8.5px; padding:4px 2px; min-height:46px; letter-spacing:-.01em; overflow:hidden;}
  .ag-ev, .ag-free{justify-content:center; text-align:center;}
  .hf-l{width:96px;}
  .lp-kanban{grid-template-columns:1fr 1fr;}
  .ml-body{min-height:470px;}
  .lp-pills li{font-size:13.5px; padding:10px 16px;}
}