/**
 * Vitrine publique et pages editoriales — Piloteo
 * Clair et dense, dans l'esprit des outils B2B actuels.
 *
 * Note de lisibilite : la page repose sur --bg, et chaque bloc qui doit se
 * detacher passe sur --surface. En theme clair l'ecart est faible mais suffit ;
 * en theme sombre il est ce qui rend les cartes visibles. Poser la page sur
 * --surface, comme c'etait le cas, revenait a peindre les cartes de la meme
 * couleur que leur fond.
 */

.lp{background:var(--bg)}
.lp-wrap{max-width:1080px; margin:0 auto; padding:0 22px}
.lp-section{padding:66px 22px}
.lp h2{font-size:29px; letter-spacing:-.03em; margin-bottom:14px}
.lp h3{font-size:16px; margin-bottom:7px}
.lp-sub{color:var(--txt-2); font-size:16px; max-width:640px; margin-bottom:32px}

.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; background:var(--surface); padding:10px 16px; border-radius:8px; z-index:99}

/* ---------- En-tete ----------
   Le fond translucide vient d'un jeton, pas d'une requete media : celle-ci
   ne voit pas un theme choisi a la main, et l'en-tete restait blanc sur une
   page sombre — logo et navigation devenaient illisibles. */
.lp-head{
  position:sticky; top:0; z-index:50;
  background:var(--glass); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.lp-head-in{display:flex; align-items:center; gap:20px; height:60px}
.lp-logo{display:flex; align-items:center; gap:9px; font-weight:650; font-size:17px; letter-spacing:-.03em; color:var(--txt); text-decoration:none}
.lp-logo:hover{text-decoration:none}
.lp-logo .mark{width:28px; height:28px; border-radius:8px; background:var(--accent); color:#fff; display:grid; place-items:center; font-size:16px}
.lp-nav{display:flex; gap:4px; margin-left:14px}
.lp-nav a{padding:7px 12px; border-radius:8px; font-size:14px; font-weight:500; color:var(--txt-2); text-decoration:none}
.lp-nav a:hover{background:var(--surface); color:var(--txt); text-decoration:none}
.lp-head-cta{margin-left:auto; display:flex; gap:8px; align-items:center}
@media(max-width:820px){.lp-nav{display:none}}

/* La pastille du logo garde un texte blanc : elle est toujours sur --accent,
   qui reste assez soutenu dans les deux themes. */
:root[data-theme="dark"] .lp-logo .mark{color:#0d1117}
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) .lp-logo .mark{color:#0d1117}
}

/* ---------- Hero ---------- */
.lp-hero{padding:80px 0 60px; text-align:center; background:linear-gradient(180deg, var(--accent-soft) 0%, transparent 70%)}
.lp-eyebrow{font-size:13px; font-weight:600; color:var(--accent); text-transform:uppercase; letter-spacing:.7px; margin-bottom:16px}
.lp-hero h1{font-size:clamp(32px, 5.4vw, 52px); line-height:1.1; letter-spacing:-.04em; margin-bottom:20px; color:var(--txt)}
.lp-lead{font-size:18px; line-height:1.65; color:var(--txt-2); max-width:680px; margin:0 auto 30px}
.lp-lead strong{color:var(--txt)}
.lp-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.btn-lg{padding:13px 26px; font-size:15.5px}
.lp-note{font-size:13px; color:var(--txt-3); margin-top:16px}

.lp-proof{list-style:none; padding:0; margin:48px auto 0; max-width:800px; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px}
.lp-proof li{font-size:14.5px; color:var(--txt-2); line-height:1.5}
.lp-proof strong{display:block; font-size:26px; color:var(--txt); letter-spacing:-.03em; margin-bottom:3px}

/* ---------- Bandeau ---------- */
.lp-band{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:52px 0; text-align:center}
.lp-band p{max-width:680px; margin:0 auto; font-size:16.5px; line-height:1.7; color:var(--txt-2)}

/* ---------- Cartes ---------- */
.lp-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px}
.lp-card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:22px; position:relative}
.lp-card i{font-size:21px; color:var(--accent); display:block; margin-bottom:12px}
.lp-card h3{color:var(--txt)}
.lp-card p{font-size:14.5px; color:var(--txt-2); line-height:1.65}

/* ---------- Metiers ---------- */
.lp-metiers{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px}
.lp-metiers li{display:flex; align-items:center; gap:11px; padding:13px 16px; background:var(--surface); border:1px solid var(--line); border-radius:10px; font-size:14.5px; font-weight:500; color:var(--txt)}
.lp-metiers i{font-size:18px; color:var(--accent)}

/* ---------- Comparatif ---------- */
.lp-table-wrap{overflow-x:auto; background:var(--surface); border:1px solid var(--line); border-radius:14px; margin:20px 0}
.lp-table{min-width:560px}
.lp-table th{padding:14px 16px; background:var(--surface-2); font-size:12px}
.lp-table td{padding:13px 16px; font-size:14.5px; color:var(--txt-2)}
.lp-table td strong{color:var(--txt)}
.lp-table tbody tr:last-child td{border-bottom:none}

/* ---------- Tarifs ---------- */
.lp-pricing .lp-card{display:flex; flex-direction:column}
.lp-pricing ul{list-style:none; padding:0; margin:0 0 22px; flex:1}
.lp-pricing li{font-size:14.5px; color:var(--txt-2); padding:7px 0 7px 24px; position:relative}
.lp-pricing li::before{content:"✓"; position:absolute; left:0; color:var(--ok); font-weight:600}
.lp-price{font-size:31px; font-weight:650; letter-spacing:-.03em; margin:6px 0 18px; color:var(--txt)}
.lp-price span{display:block; font-size:13px; font-weight:400; color:var(--txt-3); letter-spacing:0; margin-top:2px}
.lp-featured{border:2px solid var(--accent)}
.lp-tag{position:absolute; top:-11px; left:22px; background:var(--accent); color:#fff; font-size:11.5px; font-weight:600; padding:4px 12px; border-radius:99px}
:root[data-theme="dark"] .lp-tag{color:#0d1117}
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) .lp-tag{color:#0d1117}
}

/* ---------- FAQ ---------- */
.lp-faq{max-width:760px}
.lp-faq details{border:1px solid var(--line); border-radius:10px; margin-bottom:9px; background:var(--surface)}
.lp-faq summary{padding:15px 18px; font-size:15.5px; font-weight:550; cursor:pointer; list-style:none; color:var(--txt)}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::after{content:"+"; float:right; color:var(--txt-3); font-weight:400; font-size:19px; line-height:1}
.lp-faq details[open] summary::after{content:"−"}
.lp-faq p{padding:0 18px 17px; font-size:14.5px; line-height:1.7; color:var(--txt-2)}

/* ---------- Appel final ---------- */
.lp-final{background:var(--surface); border-top:1px solid var(--line); padding:66px 0; text-align:center}
.lp-final h2{color:var(--txt)}
.lp-final p{color:var(--txt-2); font-size:16px; max-width:560px; margin:0 auto 26px}

/* ==========================================================
   La mascotte
   ==========================================================

   Elle n'apparait qu'au-dessus de 1150 pixels de large. En dessous, la
   regle @media empeche l'element d'exister, et un navigateur ne telecharge
   pas l'image de fond d'un element qui n'est jamais rendu : sur telephone,
   la mascotte coute exactement zero octet. C'est la seule optimisation qui
   compte vraiment ici, puisque c'est sur telephone que la bande passante
   se paie.

   Ce seuil n'est pas decoratif. Le texte du bandeau fait 680 pixels et
   reste centre ; a 1150 il reste 235 pixels de marge de chaque cote, de
   quoi loger un personnage de 130 sans jamais toucher une ligne de texte.
   Plus bas, il mordrait dessus.

   L'animation ne touche que transform et opacity. Ces deux proprietes se
   traitent sur la couche de composition, sans recalcul de mise en page ni
   repeinture : c'est la difference entre une animation fluide et une page
   qui rame pendant qu'on la lit.

   Deux mouvements, sur deux elements pour qu'ils ne s'ecrasent pas :
   l'entree horizontale porte sur .lp-bot, la respiration verticale sur son
   ::before. Une seule propriete transform ne peut pas faire les deux.
*/
.lp-bot{display:none}

@media(min-width:1150px){
  .lp-band, .lp-final{position:relative; overflow:hidden}

  .lp-bot{
    display:block;
    position:absolute; bottom:0;
    width:130px; height:190px;
    pointer-events:none;          /* jamais un obstacle entre le lecteur et un bouton */
    opacity:.94;
  }
  .lp-bot::before{
    content:"";
    position:absolute; inset:0;
    background-repeat:no-repeat;
    background-position:center bottom;
    background-size:contain;
  }

  .lp-bot-loupe{right:34px}
  .lp-bot-loupe::before{background-image:url("/img/mascotte/loupe.webp")}
  .lp-bot-salut{left:38px}
  .lp-bot-salut::before{background-image:url("/img/mascotte/salut.webp")}

  /* Sans JavaScript, .js-bot n'est jamais pose : la mascotte s'affiche
     simplement, immobile. On ne cache jamais quelque chose qu'on ne sait
     pas revenir montrer. */
  .js-bot .lp-bot{opacity:0}

  .js-bot .lp-bot.vu{animation:bot-entree .7s cubic-bezier(.2,.8,.3,1) both}
  .js-bot .lp-bot.vu::before{animation:bot-souffle 3.6s ease-in-out .7s infinite}

  /* Hors champ, la respiration s'arrete. Une animation invisible continue
     d'occuper le compositeur et la batterie pour personne. */
  .js-bot .lp-bot.dort::before{animation-play-state:paused}

  @keyframes bot-entree{
    from{opacity:0; transform:translateX(var(--venue, 46px))}
    to  {opacity:.94; transform:none}
  }
  .lp-bot-salut{--venue:-46px}

  @keyframes bot-souffle{
    0%,100%{transform:translateY(0)}
    50%    {transform:translateY(-7px)}
  }
}

/* Vertiges, migraines, troubles vestibulaires : le mouvement disparait,
   la mascotte reste. */
@media(prefers-reduced-motion:reduce){
  .js-bot .lp-bot,
  .js-bot .lp-bot.vu{animation:none; opacity:.94; transform:none}
  .js-bot .lp-bot.vu::before{animation:none}
}

/* ---------- Pied ---------- */
.lp-foot{border-top:1px solid var(--line); padding:34px 0; margin-top:0}
.lp-foot-in{display:flex; gap:26px; flex-wrap:wrap; align-items:flex-start}
.lp-foot p{font-size:13.5px; margin-top:9px; max-width:340px}
.lp-foot nav{margin-left:auto; display:flex; flex-direction:column; gap:8px}
.lp-foot nav a{font-size:13.5px; color:var(--txt-2); text-decoration:none}
.lp-foot nav a:hover{color:var(--txt)}

/* ==========================================================
   Pages editoriales
   ========================================================== */

.lp-article{max-width:760px; padding-top:34px; padding-bottom:20px}
.lp-article h1{font-size:clamp(28px,4.4vw,40px); line-height:1.15; letter-spacing:-.035em; margin-bottom:18px; color:var(--txt)}
.lp-article h2{font-size:24px; margin:44px 0 12px; color:var(--txt)}
.lp-article h3{font-size:17px; margin:30px 0 10px; color:var(--txt)}
.lp-article p{font-size:16px; line-height:1.75; color:var(--txt-2); margin-bottom:16px}
.lp-article strong{color:var(--txt)}

.lp-lead-art{font-size:18px !important; line-height:1.7 !important; color:var(--txt-2); margin-bottom:26px !important}

.lp-bread{font-size:13px; color:var(--txt-3); margin-bottom:22px}
.lp-bread a{color:var(--txt-3)}
.lp-bread span{margin:0 6px}

.lp-model{
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--accent); border-radius:10px;
  padding:18px 20px; margin:14px 0;
}
.lp-model p{font-size:15px; line-height:1.7; margin-bottom:12px; color:var(--txt)}
.lp-model p:last-child{margin-bottom:0}

.lp-tip{font-size:14px !important; color:var(--txt-3) !important; font-style:italic; margin-bottom:22px !important}

.lp-warn{
  font-size:14px !important; line-height:1.65 !important;
  background:rgba(180,83,9,.12); border-radius:10px;
  padding:13px 16px; color:var(--warn) !important;
}

.lp-list{padding-left:0; list-style:none; margin:0 0 20px}
.lp-list li{font-size:16px; line-height:1.7; color:var(--txt-2); padding:8px 0 8px 26px; position:relative}
.lp-list li::before{content:"—"; position:absolute; left:0; color:var(--txt-3)}

.lp-cta-box{
  background:var(--accent-soft); border:1px solid var(--line); border-radius:14px;
  padding:28px; margin:40px 0; text-align:center;
}
.lp-cta-box h3{font-size:20px; margin-bottom:8px; color:var(--txt)}
.lp-cta-box p{font-size:15px; margin-bottom:20px}

.lp-next{font-size:14.5px; margin-top:34px; padding-top:20px; border-top:1px solid var(--line)}