/* ============================================================
   Tribu — page d'accueil

   Elle réutilise les jetons de couleur et les polices de
   l'application (styles.css) : ce que voit une visiteuse ici est
   exactement ce qu'elle retrouvera en entrant.
   ============================================================ */

.lp{max-width:1080px;margin:0 auto;padding:0 22px}
.lp-body{background:var(--paper);color:var(--ink);font-family:var(--font-body);overflow-y:auto;height:auto}

/* ---- barre du haut ---- */
/* ATTENTION — toutes les bandes ci-dessous portent aussi la classe .lp,
   qui pose la marge latérale de 22 px. Une déclaration `padding` en
   forme courte la remettrait à zéro et collerait le texte au bord de la
   fenêtre. D'où `padding-block` partout. */
.lp-top{display:flex;align-items:center;gap:14px;padding-block:16px}
.lp-mark{font-family:var(--font-display);font-size:21px;font-weight:700;letter-spacing:-.02em}
.lp-top .sp{flex:1}
.lp-btn{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:8px;padding:9px 16px;font-size:14px;font-weight:600;
  border:1px solid var(--rule-strong);background:var(--surface);color:var(--ink-2);
  text-decoration:none;white-space:nowrap;
}
.lp-btn:hover{border-color:var(--accent-2);color:var(--accent)}
.lp-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.lp-btn.primary:hover{background:var(--accent-2);border-color:var(--accent-2);color:#fff}
.lp-btn.big{padding:12px 22px;font-size:15px}

/* ---- accroche ---- */
.lp-hero{padding-block:46px 34px;text-align:center}
.lp-hero h1{font-family:var(--font-display);font-size:40px;line-height:1.12;margin:0 0 14px;letter-spacing:-.03em}
.lp-hero .bl{font-size:19px;color:var(--ink-2);margin:0 0 8px}
.lp-cta{display:flex;gap:11px;justify-content:center;flex-wrap:wrap}
.lp-trust{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:26px;font-size:12.5px;color:var(--ink-3)}
.lp-trust span{display:inline-flex;align-items:center;gap:6px}

/* ---- aperçu : un extrait réel de la grille ---- */
.lp-shot{
  background:var(--surface);border:1px solid var(--rule-strong);border-radius:12px;
  box-shadow:var(--shadow-lift);overflow:hidden;margin:8px 0 4px;
}
.lp-shot-bar{
  display:flex;align-items:center;gap:8px;padding:9px 14px;
  background:var(--surface-2);border-bottom:1px solid var(--rule);font-size:12.5px;color:var(--ink-3);
}
.lp-shot-bar b{font-family:var(--font-display);color:var(--ink);font-size:14px}
.lp-grid{display:grid;grid-template-columns:78px repeat(3,1fr);font-size:12px}
.lp-grid > div{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:8px 9px;min-height:54px}
.lp-grid .h{background:var(--surface-2);font-weight:700;color:var(--ink);min-height:0;padding:7px 9px}
.lp-grid .t{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-3);background:var(--surface-2)}
.lp-grid .br{background:var(--break-bg)}
.lp-card{border-radius:5px;padding:5px 7px;font-size:11.5px;line-height:1.3;border:1px solid}
.lp-card.todo{background:var(--st-todo-bg);border-color:var(--st-todo-bd);color:var(--st-todo-fg)}
.lp-card.doing{background:var(--st-doing-bg);border-color:var(--st-doing-bd);color:var(--st-doing-fg)}
.lp-card.done{background:var(--st-done-bg);border-color:var(--st-done-bd);color:var(--st-done-fg)}
.lp-card.redo{background:var(--st-redo-bg);border-color:var(--st-redo-bd);color:var(--st-redo-fg)}
.lp-legend{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin:14px 0 0;font-size:12px;color:var(--ink-3)}
.lp-legend i{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:5px;border:2px solid}

/* ---- sections ---- */
.lp-sec{padding-block:52px}
.lp-sec h2{font-family:var(--font-display);font-size:27px;margin:0 0 6px;letter-spacing:-.02em}
.lp-sec .lead{font-size:15px;color:var(--ink-2);margin:0 0 26px;max-width:52em}
.lp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:14px}
.lp-c{background:var(--surface);border:1px solid var(--rule);border-radius:10px;padding:16px 17px}
.lp-c h3{font-family:var(--font-display);font-size:15.5px;margin:0 0 5px}
.lp-c p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.5}

.lp-split{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center}
.lp-quote{
  background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--accent);
  border-radius:10px;padding:18px 20px;font-size:14.5px;line-height:1.6;color:var(--ink-2);
}
.lp-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.lp-list li{display:flex;gap:9px;font-size:14px;color:var(--ink-2);line-height:1.5}
.lp-list li b{color:var(--ink)}
.lp-ok{color:#1E1B4B;flex:none;font-weight:700}

/* ---- tarifs ---- */
.lp-prices{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:760px}
.lp-price{background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:22px}
.lp-price.mark{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.lp-price h3{font-family:var(--font-display);font-size:17px;margin:0 0 3px}
.lp-price .amount{font-family:var(--font-display);font-size:32px;margin:6px 0 4px;letter-spacing:-.02em}
.lp-price .when{font-size:12.5px;color:var(--ink-3);margin:0 0 16px}
.lp-soon{
  display:inline-block;font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;
  background:var(--st-doing-bg);color:var(--st-doing-fg);border:1px solid var(--st-doing-bd);
  border-radius:9px;padding:1px 8px;margin-bottom:8px;
}

/* ---- pied ---- */
.lp-foot{border-top:1px solid var(--rule);margin-top:34px;padding-block:26px 40px;font-size:13px;color:var(--ink-3)}
.lp-foot nav{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:12px}
.lp-foot a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule-strong)}
.lp-foot a:hover{color:var(--accent);border-color:var(--accent)}

@media (max-width:760px){
  .lp-hero{padding-block:32px 26px}
  .lp-hero h1{font-size:29px}
  .lp-hero .bl{font-size:16.5px}
  .lp-sec{padding-block:38px}
  .lp-sec h2{font-size:22px}
  .lp-split,.lp-prices{grid-template-columns:1fr}
  .lp-grid{grid-template-columns:60px repeat(3,1fr);font-size:11px}
}

/* ---- avertissement tant que la base n'est pas branchée ---- */
.lp-demo{
  max-width:44em;margin:20px auto 0;font-size:13px;line-height:1.5;
  background:var(--st-doing-bg);border:1px solid var(--st-doing-bd);color:var(--st-doing-fg);
  border-radius:9px;padding:11px 14px;
}

/* ============================================================
   Pages de texte : mentions légales, CGU, CGV, protection des données
   ============================================================ */
.doc{max-width:760px}
.doc h1{font-family:var(--font-display);font-size:32px;letter-spacing:-.02em;margin:26px 0 4px}
.doc .maj{font-size:12.5px;color:var(--ink-3);margin:0 0 30px}
.doc h2{font-family:var(--font-display);font-size:19px;margin:34px 0 8px;letter-spacing:-.01em}
.doc h3{font-family:var(--font-display);font-size:15px;margin:20px 0 5px}
.doc p,.doc li{font-size:14.5px;line-height:1.65;color:var(--ink-2)}
.doc p{margin:0 0 12px}
.doc ul{margin:0 0 14px;padding-left:20px}
.doc li{margin-bottom:5px}
.doc b,.doc strong{color:var(--ink)}
.doc a{color:var(--accent)}
.doc table{width:100%;border-collapse:collapse;margin:6px 0 18px;font-size:13.5px}
.doc th,.doc td{border:1px solid var(--rule);padding:8px 10px;text-align:left;vertical-align:top}
.doc th{background:var(--surface-2);font-weight:600;color:var(--ink)}
.doc td{background:var(--surface);color:var(--ink-2)}
.doc-note{
  background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--accent);
  border-radius:8px;padding:13px 16px;margin:0 0 18px;
}
.doc-note p:last-child{margin:0}
.doc-todo{
  background:var(--st-doing-bg);border:1px solid var(--st-doing-bd);color:var(--st-doing-fg);
  border-radius:8px;padding:11px 14px;margin:0 0 16px;font-size:13.5px;
}

.doc-side{font-size:12.5px;color:var(--ink-3);border-left:2px solid var(--rule);padding-left:12px}

/* ---- formulaire de contact ---- */
.doc-form{margin:6px 0 26px;max-width:34em}
.doc-form .field{margin-bottom:15px}
.doc-form label{display:block;font-size:10.5px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.doc-form input[type=text],.doc-form input[type=email],.doc-form textarea{
  width:100%;background:var(--surface);border:1px solid var(--rule-strong);border-radius:8px;
  padding:9px 11px;font-size:14.5px;font-family:inherit;color:var(--ink);
}
.doc-form textarea{resize:vertical;line-height:1.5}
.doc-form input:focus,.doc-form textarea:focus{
  outline:none;border-color:var(--accent-2);box-shadow:0 0 0 3px var(--accent-soft)}
.doc-form .help{font-size:12px;color:var(--ink-3);margin:4px 0 0}
.doc-form .acts{margin-top:4px}
.doc-form .pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.c_etat{font-size:13.5px;margin:12px 0 0;min-height:1.2em}
.c_etat.ok{color:#1E1B4B}
.c_etat.ko{color:#1E1B4B}

/* ---- « c'est pour vous si… » ---- */
.lp-pains{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px 22px;max-width:62em}
.lp-pains li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.lp-pains li::before{content:"";position:absolute;left:3px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--st-redo-bd)}
.lp-pains b{color:var(--ink)}

/* ---- note d'état, sous les planifications ---- */
.lp-note{margin:18px 0 0;max-width:52em;font-size:13.5px;line-height:1.55;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--st-doing-bd);border-radius:9px;padding:12px 15px}
.lp-note b{color:var(--ink)}

/* ---- questions fréquentes ---- */
.lp-faq{max-width:52em;display:flex;flex-direction:column;gap:8px}
.lp-faq details{background:var(--surface);border:1px solid var(--rule);border-radius:10px;padding:0 17px}
.lp-faq summary{cursor:pointer;list-style:none;padding:14px 0;font-weight:600;font-size:14.5px;color:var(--ink);display:flex;justify-content:space-between;gap:12px}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::after{content:"+";color:var(--ink-3);font-weight:400;font-size:18px;line-height:1}
.lp-faq details[open] summary::after{content:"−"}
.lp-faq details p{margin:0 0 15px;font-size:14px;line-height:1.6;color:var(--ink-2)}

/* ================================================================
   ESSAI « VERSION CHAUDE » — 16.09.2026 (voir la fin de styles.css)
   ================================================================ */
.lp-body{background:var(--page)}
.lp-mark{font-weight:800}
.lp-btn{border:var(--line);border-radius:6px;background:var(--surface);color:var(--ink)}
.lp-btn:hover{border-color:var(--ink);color:var(--ink);background:#E9E7F7}
.lp-btn.primary,.lp-btn.primary:hover{background:var(--action);border-color:var(--ink);color:var(--ink);box-shadow:var(--shadow-btn)}
.lp-hero h1,.lp-sec h2,.doc h1,.doc h2{font-weight:800}
.lp-shot{border:var(--line);border-radius:6px;box-shadow:var(--shadow-lift);margin:8px 3px 7px 0}
.lp-shot-bar{background:#E9E7F7;border-bottom:var(--line);color:var(--ink-2)}
.lp-shot-bar b{font-weight:800}
.lp-grid .h{background:var(--surface);border-bottom:var(--line)}
.lp-grid .t{font-family:var(--font-body);font-size:11.5px;color:var(--ink-2);background:var(--surface)}
.lp-grid .br{background:repeating-linear-gradient(135deg,#ECEAF4 0 6px,#FFFFFF 6px 12px)}
.lp-card,.lp-card.todo,.lp-card.doing,.lp-card.done,.lp-card.redo{border:var(--line);border-color:var(--ink);color:var(--ink);border-radius:6px}
.lp-legend i{border-color:var(--ink) !important}
.lp-c,.lp-quote,.lp-price,.lp-note,.lp-faq details,.doc-note{border:var(--line);border-radius:6px;box-shadow:none}
.lp-quote,.doc-note{border-left:5px solid var(--ink)}
.lp-note{border-left:5px solid var(--st-doing-bd)}
.lp-price.mark{border-color:var(--ink);box-shadow:var(--shadow-lift)}
.lp-soon{text-transform:none;letter-spacing:0;font-size:12px;font-weight:600;border:1.5px solid var(--ink);color:var(--ink)}
.lp-ok{color:#1E1B4B}
.lp-demo,.doc-todo{border:var(--line);color:var(--ink);border-radius:6px}
.lp-foot{border-top:var(--line)}
.lp-foot a{border-bottom-color:var(--ink-3)}
.lp-foot a:hover{color:var(--ink);border-color:var(--ink)}
.doc a{color:var(--ink)}
.doc th,.doc td{border-color:var(--rule)}
.doc th{background:#E9E7F7}
.c_etat.ok{color:#1E1B4B}
.c_etat.ko{color:#1E1B4B}


/* ================================================================
   SITE PUBLIC : COULEURS « LAVANDE » ET FORMES ARRONDIES — 16.09.2026
   Règles du site public tirées de essai-lavande.css et essai-arrondi.css.
   ================================================================ */
.lp-btn:hover{background:#E9E7F7}
.lp-shot-bar,.doc th{background:#E9E7F7}
.lp-grid .br{background:repeating-linear-gradient(135deg,#ECEAF4 0 6px,#FFFFFF 6px 12px)}
.lp-ok,.c_etat.ok{color:#1E1B4B}
.lp-body{background:var(--page)}
.lp-top{padding-block:14px}
.lp-mark{font-size:30px;letter-spacing:-.03em}
.lp-hero{text-align:left;padding-block:56px 110px;
  background:var(--now);box-shadow:0 0 0 100vmax var(--now);clip-path:inset(0 -100vmax);
  border-bottom:0;}
.lp-hero h1{font-size:64px;line-height:.98;letter-spacing:-.035em;max-width:12em;margin:0 0 22px}
.lp-hero .bl{font-size:21px;color:var(--ink);margin:0 0 26px;max-width:34em}
.lp-trust{justify-content:flex-start;gap:8px;margin-top:22px}
.lp-trust span{border:1.5px solid var(--ink);border-radius:999px;padding:4px 12px;font-size:14px;font-weight:600;color:var(--ink);background:var(--surface)}
.lp-demo{margin:0;max-width:44em;background:var(--surface);border:1.5px solid var(--ink);border-radius:6px;color:var(--ink);text-align:left;font-size:14.5px;box-shadow:3px 3px 0 var(--ink)}
.lp-apercu{margin-top:-78px;position:relative}
.lp-shot{border:1.5px solid var(--ink);border-radius:6px;box-shadow:6px 6px 0 var(--ink);margin:0 6px 10px 0;background:var(--surface)}
.lp-shot-bar{font-size:14.5px}
.lp-shot-bar b{font-size:17px}
.lp-grid{grid-template-columns:56px repeat(3,1fr);font-size:14px}
.lp-grid .t{font-family:var(--font-display);font-weight:800;font-size:16px;color:var(--ink)}
.lp-grid .h{font-size:15px}
.lp-card{font-size:14px;padding:7px 9px}
.lp-legend{justify-content:flex-start;font-size:14px;color:var(--ink-2)}
.lp-legend i{border:1.5px solid var(--ink) !important;border-radius:3px}
.lp-sec{padding-block:64px}
.lp-sec h2{font-size:38px;line-height:1.05;letter-spacing:-.03em;max-width:20em}
.lp-sec .lead{font-size:18px;color:var(--ink-2)}
.lp-pains{gap:14px 26px}
.lp-pains li{font-size:16px;padding-left:26px}
.lp-pains li::before{width:12px;height:12px;border-radius:2px;background:var(--action);border:1.5px solid var(--ink);top:.45em}
.lp-espaces{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:start}
.lp-esp{display:flex;flex-direction:column;gap:12px}
.lp-esp-t{align-self:flex-start;margin:0;font-family:var(--font-display);font-weight:800;font-size:19px;
  background:var(--now);border:1.5px solid var(--ink);border-radius:6px;padding:4px 12px;}
.lp-c{background:var(--surface);border:1.5px solid var(--ink);border-radius:6px;padding:14px 15px}
.lp-c h3{font-size:17px}
.lp-c p{font-size:14.5px;color:var(--ink-2)}
@media (max-width:980px){
  .lp-espaces{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .lp-espaces{grid-template-columns:1fr}
}
.lp-list li{font-size:15.5px}
.lp-ok{flex:none;width:22px;height:22px;display:inline-grid;place-items:center;
  background:var(--now);color:var(--ink);border:1.5px solid var(--ink);border-radius:4px;font-size:13px;}
.lp-bande-zone{background:#E9E7F7;box-shadow:0 0 0 100vmax #E9E7F7;clip-path:inset(0 -100vmax)}
.lp-quote{background:var(--action);color:var(--ink);border:1.5px solid var(--ink);border-radius:6px;
  box-shadow:5px 5px 0 var(--ink);font-family:var(--font-display);font-weight:800;
  font-size:22px;line-height:1.25;letter-spacing:-.01em;padding:24px 26px;}
.lp-quote-src{margin-top:14px;font-family:var(--font-body);font-weight:600;font-size:14px}
.lp-bande-orange{background:var(--action);box-shadow:0 0 0 100vmax var(--action);clip-path:inset(0 -100vmax)}
.lp-bande-orange .lead{color:var(--ink);max-width:48em}
.lp-note{border:1.5px solid var(--ink);border-left:6px solid var(--action);border-radius:6px;font-size:15px;color:var(--ink)}
.lp-price{border:1.5px solid var(--ink);border-radius:6px;background:var(--surface)}
.lp-price.mark{background:var(--now);box-shadow:5px 5px 0 var(--ink)}
.lp-price.mark .lp-ok{background:var(--surface)}
.lp-price h3{font-size:20px}
.lp-price .amount{font-size:44px}
.lp-soon{background:var(--action);border:1.5px solid var(--ink);border-radius:999px;font-size:13px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink)}
.lp-faq details{border:1.5px solid var(--ink);border-radius:6px;background:var(--surface)}
.lp-faq summary{font-size:16px}
.lp-faq summary::after{color:var(--ink);background:var(--action);border:1.5px solid var(--ink);border-radius:4px;width:22px;height:22px;display:inline-grid;place-items:center;font-size:16px;flex:none}
.lp-faq details p{font-size:15px}
.lp-foot{border-top:1.5px solid var(--ink);font-size:14px}
@media (max-width:760px){
  .lp-hero{padding-block:34px 90px}
  .lp-hero h1{font-size:40px}
  .lp-hero .bl{font-size:18px}
  .lp-sec h2{font-size:28px}
  .lp-quote{font-size:18px}
  .lp-apercu{margin-top:-64px}
  .lp-grid{grid-template-columns:44px repeat(3,1fr);font-size:12.5px}
}
.lp-c,.lp-price,.lp-faq details,.lp-shot{border:0;border-radius:16px;box-shadow:none}
.lp-esp-t,.lp-trust span,.lp-soon{border:0;border-radius:999px}
.lp-quote{border:0;border-radius:18px;box-shadow:none}
.lp-demo{border:0;border-radius:16px;box-shadow:none}
/* champs du formulaire de contact : mêmes champs que dans l'app */
.doc-form .field input[type=text],.doc-form .field input[type=email],.doc-form .field textarea{border:1.5px solid #D6D2EA;border-radius:10px}

/* ---- accueil : c'est l'aperçu de la semaine qui ressort, pas l'accroche (16.09.2026) ---- */
.lp-hero{background:transparent;box-shadow:none;clip-path:none;padding-block:56px 44px}
.lp-apercu{
  margin-top:0;padding-block:44px 52px;
  background:#B2FF59;box-shadow:0 0 0 100vmax #B2FF59;clip-path:inset(0 -100vmax);
}
.lp-apercu .lp-legend{color:#1E1B4B}
.lp-shot{border:0;border-radius:16px;box-shadow:none;margin:0}
.lp-card,.lp-card.todo,.lp-card.doing,.lp-card.done,.lp-card.redo{border:0;border-radius:10px}
.lp-card.todo{background:#F5F4FB}
.lp-legend i{border:0 !important;border-radius:3px}
@media (max-width:760px){
  .lp-hero{padding-block:32px 28px}
  .lp-apercu{margin-top:0;padding-block:28px 34px}
}
/* boutons du haut : comme dans l'app (action orange sans contour, secondaire en pilule à contour) */
.lp-btn{border:2px solid #1E1B4B;border-radius:999px;background:#FFFFFF;box-shadow:none}
.lp-btn.primary,.lp-btn.primary:hover{border-color:#FF5722;background:#FF5722;color:#1E1B4B;box-shadow:none}
/* l'aperçu de la semaine doit ressortir : contour bleu nuit et ombre nette
   (seule exception à « aucun contour, aucune ombre », voir DESIGN.md) */
.lp-shot{border:2px solid #1E1B4B;border-radius:16px;box-shadow:8px 8px 0 #1E1B4B;margin:0 8px 8px 0;overflow:hidden}
@media (max-width:760px){ .lp-shot{box-shadow:5px 5px 0 #1E1B4B;margin:0 5px 5px 0} }

/* de l'air entre le titre d'une section et ce qui suit (16.09.2026) */
.lp-sec h2{margin:0 0 32px}
.lp-sec h2 + .lead{margin-top:-18px;margin-bottom:32px}
.lp-esp{gap:14px}
@media (max-width:760px){ .lp-sec h2{margin-bottom:22px} .lp-sec h2 + .lead{margin-top:-10px;margin-bottom:22px} }
.lp-duo{max-width:62em}

/* ---- le générateur de planifications, mis en avant (16.09.2026) ---- */
.lp-etapes{list-style:none;counter-reset:etape;margin:8px 0 20px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.lp-etapes li{counter-increment:etape;background:#FFFFFF;border-radius:16px;padding:20px 22px;display:flex;flex-direction:column;gap:6px}
.lp-etapes li::before{content:counter(etape);display:grid;place-items:center;width:34px;height:34px;border-radius:999px;background:#B2FF59;font-family:var(--font-display);font-weight:800;font-size:17px;color:#1E1B4B;margin-bottom:6px}
.lp-etapes b{font-family:var(--font-display);font-weight:800;font-size:20px;color:#1E1B4B}
.lp-etapes span{font-size:15.5px;line-height:1.5;color:#5B5880}
.lp-generateur .lp-note{border:0;border-radius:16px;background:#FFFFFF}
@media (max-width:980px){ .lp-etapes{grid-template-columns:1fr} }

/* ================================================================
   ANIMATIONS — 16.09.2026 (voir accueil-anim.js)
   Posées seulement sous html.anim : sans JavaScript, ou si la personne
   a demandé moins d'animations, la page s'affiche immobile.
   ================================================================ */
@keyframes lp-monte{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes lp-mot{from{opacity:0;transform:translateY(70%) rotate(6deg)}to{opacity:1;transform:none}}
@keyframes lp-arrive{from{opacity:0;transform:translateY(120px) rotate(-4deg) scale(.94)}to{opacity:1;transform:none}}
@keyframes lp-flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes lp-pop{0%{transform:scale(1)}35%{transform:scale(1.14) rotate(-2deg)}100%{transform:scale(1)}}
@keyframes lp-onde{from{opacity:.9;transform:scale(.4)}to{opacity:0;transform:scale(2.8)}}
@keyframes lp-rond{0%{transform:scale(0) rotate(-180deg)}70%{transform:scale(1.25) rotate(10deg)}100%{transform:scale(1)}}
@keyframes lp-defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes lp-trait{to{background-size:100% 42%}}

/* l'accroche : mot après mot, puis le surligneur fluo */
.anim .lp-hero h1 .mot{display:inline-block;animation:lp-mot .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 70ms)}
.lp-hero h1 .surligne{background:linear-gradient(#B2FF59,#B2FF59) no-repeat 0 88%/0% 42%}
.anim .lp-hero h1 .surligne{animation:lp-mot .7s cubic-bezier(.2,.8,.2,1) both,lp-trait .6s cubic-bezier(.6,0,.2,1) forwards;
  animation-delay:calc(var(--i) * 70ms),calc(1s + var(--s) * 350ms)}
html:not(.anim) .lp-hero h1 .surligne{background-size:100% 42%}
.anim .lp-hero .bl{animation:lp-monte .8s cubic-bezier(.2,.7,.2,1) .7s both}
.anim .lp-trust span{animation:lp-monte .6s cubic-bezier(.2,.7,.2,1) both,lp-flotte 4s ease-in-out infinite}
.anim .lp-trust span:nth-child(1){animation-delay:.9s,1.6s}
.anim .lp-trust span:nth-child(2){animation-delay:1s,2.3s}
.anim .lp-trust span:nth-child(3){animation-delay:1.1s,1.9s}
.anim .lp-trust span:nth-child(4){animation-delay:1.2s,2.6s}
/* l'aperçu arrive de plus bas, penché, puis suit le défilement plus lentement */
.anim .lp-shot{animation:lp-arrive 1.1s cubic-bezier(.2,.8,.2,1) .8s both;translate:0 var(--py,0px)}

/* les blocs, au défilement : voisins décalés */
.anim .apparait{opacity:0;transform:translateY(60px) scale(.95);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.8,.2,1);
  transition-delay:calc(var(--rang,0) * 150ms)}
.anim .lp-etapes li.apparait,.anim .lp-sec .lp-list li.apparait{transform:translateX(-60px)}
.anim .lp-sec h2.apparait{transform:translateY(40px)}
.anim .apparait.vu,.anim .lp-etapes li.apparait.vu,.anim .lp-sec .lp-list li.apparait.vu,.anim .lp-sec h2.apparait.vu{opacity:1;transform:none}
.anim .apparait.fini{transition-delay:0s}
/* les numéros des étapes éclosent en tournant */
.anim .lp-etapes li.apparait::before{transform:scale(0)}
.anim .lp-etapes li.vu::before{animation:lp-rond .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--rang,0) * 150ms + .45s)}

/* survol : la carte se soulève et penche un peu */
.lp-c,.lp-etapes li,.lp-price,.lp-esp-t{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){
  .anim .lp-c:hover,.anim .lp-etapes li.fini:hover,.anim .lp-price.fini:hover{transform:translateY(-8px) rotate(-.8deg)}
  .anim .lp-esp-t:hover{transform:rotate(-4deg) scale(1.08)}
}

/* la bande orange : les cantons défilent */
.lp-defile{overflow:hidden;margin:6px 0 22px}
.lp-defile > div{display:flex;width:max-content;gap:0}
.lp-defile span{font-family:var(--font-display);font-weight:800;font-size:44px;letter-spacing:-.02em;color:#1E1B4B;white-space:nowrap;padding-right:34px}
.lp-defile span::after{content:"";display:inline-block;width:14px;height:14px;border-radius:50%;background:#B2FF59;margin-left:34px;vertical-align:middle}
.anim .lp-defile > div{animation:lp-defile 26s linear infinite}
@media (max-width:760px){ .lp-defile span{font-size:30px} }

/* la semaine vivante */
.lp-shot{position:relative}
.lp-card.pop{animation:lp-pop .5s cubic-bezier(.2,.8,.2,1)}
.lp-grid{transition:opacity .45s}
.lp-grid.fondu{opacity:.3}
.lp-card{transition:background-color .35s}
.lp-curseur{position:absolute;left:0;top:0;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;
  background:#FF5722;border:3px solid #FFFFFF;pointer-events:none;opacity:0;z-index:2;
  transition:transform .5s cubic-bezier(.45,0,.2,1),opacity .3s}
.lp-curseur.on{opacity:1}
.lp-curseur::after{content:"";position:absolute;inset:-3px;border-radius:50%;background:#FF5722;opacity:0}
.lp-curseur.clic::after{animation:lp-onde .55s ease-out}