/* Repeateo — site vitrine. Classes alignées sur index.php. */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --canvas:#FAF5EE; --card:#FFFFFF; --soft:#F6F0E7;
  --ink:#2F2C28; --ink2:#5D574E; --muted:#978F83; --line:#ECE3D5;
  --green:#1E8E6A; --green-d:#166B50; --green-s:#E4F1EA;
  --honey:#EBA83C; --honey-s:#FBEDCF;
  --disp:'Inter Tight',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --shadow:0 4px 22px rgba(47,44,40,.06);
  --shadow-l:0 14px 44px rgba(47,44,40,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--body);
     font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--disp);font-weight:800;line-height:1.08;letter-spacing:-.022em;margin:0 0 14px}
p{margin:0 0 14px}
a{color:var(--green);text-decoration:none}

/* ---------- barre de navigation ---------- */
.lpnav{display:flex;align-items:center;gap:26px;flex-wrap:wrap;
       padding:14px 26px;background:var(--card);border-bottom:1px solid var(--line);
       position:sticky;top:0;z-index:60}

/* ---------- menu burger (mobile uniquement) ---------- */
.burger{display:none;flex-direction:column;justify-content:center;gap:4px;
        width:34px;height:34px;background:none;border:0;cursor:pointer;padding:0;flex-shrink:0}
.burger span{display:block;height:2px;width:100%;background:var(--ink);border-radius:2px;
             transition:transform .2s ease,opacity .2s ease}
.burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.mobilenav{display:none;flex-direction:column;background:var(--card);border-bottom:1px solid var(--line)}
.mobilenav a{padding:15px 22px;font-size:15.5px;font-weight:600;color:var(--ink);border-top:1px solid var(--line)}
.mobilenav a:hover{color:var(--green);background:var(--canvas)}

.brandlink{display:flex;align-items:center;gap:11px;color:inherit}
.brandimg{height:44px;width:auto;display:block}
.lplinks{display:flex;gap:22px;flex-wrap:wrap}
.lplinks a{color:var(--ink2);font-size:14.5px;font-weight:600}
.lplinks a:hover{color:var(--green)}
.lpactions{display:flex;align-items:center;gap:12px;margin-left:auto}

.uilang{position:relative}
.uibtn{background:var(--card);border:1px solid var(--line);border-radius:9px;
       padding:8px 12px;font-family:var(--body);font-size:13px;font-weight:700;
       color:var(--ink);cursor:pointer}
.uibtn:hover{border-color:var(--green)}
.uimenu{display:none;position:absolute;right:0;top:calc(100% + 6px);background:var(--card);
        border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-l);
        overflow:hidden;min-width:140px;z-index:70}
.uimenu.open{display:block}
.uimenu a{display:block;padding:10px 15px;font-size:13.5px;color:var(--ink)}
.uimenu a:hover{background:var(--soft)}
.uimenu a.on{background:var(--green-s);color:var(--green-d);font-weight:700}
.lnk{color:var(--ink2);font-size:14px;font-weight:600}
.lnk:hover{color:var(--green)}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
     background:var(--green);color:#fff;border:0;border-radius:13px;
     padding:14px 26px;font-family:var(--disp);font-weight:700;font-size:15.5px;
     cursor:pointer;box-shadow:0 6px 18px rgba(30,142,106,.26);transition:transform .12s}
.btn:hover{transform:translateY(-1px)}
.btn.small{padding:9px 17px;font-size:13.5px;border-radius:10px;box-shadow:none}
.btn.big{padding:17px 34px;font-size:17px;border-radius:15px}

/* ---------- hero : deux colonnes ---------- */
.hero{max-width:1160px;margin:0 auto;padding:66px 24px 56px;
      display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
      gap:46px;align-items:center}
.heroleft{min-width:0}
.eyebrow{display:inline-block;background:var(--green-s);color:var(--green-d);
         border-radius:999px;padding:7px 16px;font-size:13px;font-weight:700;margin:0 0 20px}
.hero h1{font-size:clamp(31px,4.6vw,49px);letter-spacing:-.03em;margin-bottom:18px}
.hero .sub{color:var(--ink2);font-size:17px;margin:0 0 30px}
.herocta{margin-top:6px}
.micro{display:block;color:var(--muted);font-size:13px;margin-top:14px}

/* ---------- carte de démonstration ---------- */
.mockup{position:relative;background:var(--card);border:1px solid var(--line);
        border-radius:26px;padding:28px 30px 30px;box-shadow:var(--shadow-l);min-width:0}
.mascot{position:absolute;right:-14px;top:22px;width:190px;height:auto;
        pointer-events:none;filter:drop-shadow(0 10px 18px rgba(47,44,40,.12))}
.mkhead{display:flex;align-items:center;gap:9px;color:var(--ink2);
        font-size:14px;font-weight:600;margin-bottom:16px}
.mkhead .dot{width:9px;height:9px;border-radius:999px;background:var(--green)}
.mkq{position:relative;background:var(--soft);border-radius:16px;padding:15px 17px;
     font-size:15px;line-height:1.5;color:var(--ink);max-width:66%;margin-bottom:22px}
.mkq::after{content:"";position:absolute;left:26px;bottom:-9px;width:0;height:0;
            border:9px solid transparent;border-top-color:var(--soft);border-bottom:0}

.mkscore{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.mkval{font-family:var(--disp);font-weight:800;font-size:46px;line-height:1;letter-spacing:-.03em;color:var(--green)}
.mkval small{font-size:17px;color:var(--muted);font-weight:600}
.mkdelta{background:var(--green-s);color:var(--green-d);border-radius:999px;
         padding:7px 14px;font-size:13px;font-weight:600}

.mkbars{display:flex;flex-direction:column;gap:11px;max-width:70%}
.mkbar{display:flex;align-items:center;gap:14px;font-size:14px;color:var(--ink2)}
.mkbar>span{width:92px;flex-shrink:0}
.mkbar i{flex:1;height:9px;background:var(--soft);border-radius:99px;overflow:hidden}
.mkbar b{display:block;height:100%;background:var(--green);border-radius:99px}

.mkline{height:1px;background:var(--line);margin:22px 0 18px}
.mkpoint{display:flex;gap:10px;font-size:14.5px;line-height:1.5;margin-bottom:10px;max-width:88%}
.mkpoint.ok{color:var(--green-d);font-weight:600}
.mkpoint.ko{color:#8a6a1e;font-weight:600}

.mkspeech{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.mkspeech span{background:var(--soft);border-radius:999px;padding:8px 15px;
               font-size:13.5px;font-weight:600;color:var(--ink2)}

.mkbubble{margin-top:20px;margin-left:auto;max-width:74%;background:var(--green-s);
          color:var(--green-d);border-radius:16px;padding:13px 16px;
          font-size:14px;line-height:1.5;font-weight:500}

/* ---------- bandes de section ---------- */
.band{padding:62px 24px;scroll-margin-top:88px}
.band>h2,.band>div,.band>.faq{max-width:1020px;margin-left:auto;margin-right:auto}
.band>h2{text-align:center;font-size:clamp(24px,3.6vw,34px);letter-spacing:-.028em;margin-bottom:32px}
.band.alt{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ---------- étapes ---------- */
.steps4{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:16px}
.stepcard{background:var(--card);border:1px solid var(--line);border-radius:18px;
          padding:24px 22px;box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.band.alt .stepcard{background:var(--canvas)}
.stepnum{display:flex;align-items:center;justify-content:center;width:32px;height:32px;
         border-radius:999px;background:var(--green);color:#fff;font-family:var(--disp);
         font-weight:700;font-size:15px;margin-bottom:14px}
.stepcard h3{font-size:16.5px;margin-bottom:8px}
.stepcard p{color:var(--ink2);font-size:14.5px;margin:0}

/* ---------- intro de section (sous-titre centré sous un h2) ---------- */
.bandintro{max-width:640px;margin:-14px auto 32px;text-align:center;color:var(--ink2);font-size:15.5px;line-height:1.5}

/* ---------- méthode STAR ---------- */
.stargrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:16px}
.starcard{background:var(--card);border:1px solid var(--line);border-radius:18px;
          padding:24px 22px;box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.band.alt .starcard{background:var(--canvas)}
.starletter{display:flex;align-items:center;justify-content:center;width:36px;height:36px;
         border-radius:11px;background:var(--honey-s);color:#8a6a1e;font-family:var(--disp);
         font-weight:700;font-size:17px;margin-bottom:14px}
.starcard h3{font-size:16.5px;margin-bottom:8px}
.starcard p{color:var(--ink2);font-size:14.5px;margin:0}

/* ---------- témoignages ---------- */
.testigrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.testicard{background:var(--card);border:1px solid var(--line);border-radius:18px;
           padding:22px;box-shadow:var(--shadow);display:flex;flex-direction:column;
           transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.testistars{color:var(--honey);letter-spacing:2px;font-size:14px;margin-bottom:10px}
.testiquote{color:var(--ink);font-size:15px;line-height:1.55;margin:0 0 16px;flex:1}
.testiwho{display:flex;align-items:center;gap:10px}
.testiavatar{flex-shrink:0;width:36px;height:36px;border-radius:50%;background:var(--green-s);
             color:var(--green-d);display:flex;align-items:center;justify-content:center;
             font-family:var(--disp);font-weight:700;font-size:14px}
.testiwho b{display:block;font-size:14px}
.testiwho small{display:block;color:var(--muted);font-size:12.5px;margin-top:1px}

/* ---------- fonctionnalités ---------- */
.featgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:16px}
.feat{background:var(--canvas);border:1px solid var(--line);border-radius:18px;padding:22px;
      transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease}
.band.alt .feat{background:var(--canvas)}
.feat h3{font-size:16px;margin-bottom:7px}
.feat p{color:var(--ink2);font-size:14.5px;margin:0}

/* ---------- tarif (3 paliers) ---------- */
.plangrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;
          max-width:980px;margin:0 auto;align-items:stretch}
.plancard{position:relative;background:var(--card);border:1px solid var(--line);border-radius:20px;
          padding:30px 24px;text-align:center;box-shadow:var(--shadow);display:flex;flex-direction:column;
          transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.plancard.on{border-color:var(--green);box-shadow:var(--shadow-l);transform:translateY(-6px)}
.planbadge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--green);
           color:#fff;font-size:12px;font-weight:700;padding:5px 14px;border-radius:999px;white-space:nowrap}
.planname{font-family:var(--disp);font-size:15px;color:var(--muted);text-transform:uppercase;
          letter-spacing:.04em;margin-bottom:10px}
.plancard .priceline{justify-content:center}
.plancard .amount{font-size:clamp(32px,5vw,42px)}
.plancard .pq{margin:14px 0 2px}
.planmeta{color:var(--muted);font-size:13px;margin:0 0 20px}
.plancard .btn{margin-top:auto;width:100%}
.pcancel{color:var(--muted);font-size:13.5px;margin:0}

.advbox{max-width:820px;margin:44px auto 0;padding-top:34px;border-top:1px solid var(--line)}
.advbox h3{text-align:center;font-family:var(--disp);font-size:19px;margin:0 0 22px}
.advgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px 28px}
.advitem{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--ink2);line-height:1.5}
.advcheck{flex-shrink:0;width:20px;height:20px;border-radius:50%;background:var(--green-s);
          color:var(--green-d);display:flex;align-items:center;justify-content:center;
          font-size:12px;font-weight:700;margin-top:1px}

/* ---------- interactions au survol ----------
   Un seul geste, répété partout où il y a une carte : légère élévation +
   bordure qui se teinte de vert. Plus quelques touches ponctuelles (logo,
   mascotte, FAQ) pour que la page ne semble pas figée sans en faire trop. */
.stepcard:hover,.starcard:hover,.testicard:hover,.feat:hover{
  transform:translateY(-4px);border-color:var(--green);box-shadow:var(--shadow-l)}
.band.alt .feat:hover{background:var(--card)}
.plancard:hover{border-color:var(--green);box-shadow:var(--shadow-l)}
.plancard:not(.on):hover{transform:translateY(-4px)}
.plancard.on:hover{transform:translateY(-9px)}

.brandlink{transition:opacity .15s ease}
.brandimg{transition:transform .18s ease}
.brandlink:hover .brandimg{transform:scale(1.035)}

.faq details{transition:border-color .15s ease,background .15s ease}
.faq details:hover{border-color:var(--green)}
.faq summary{cursor:pointer}

.mockup:hover .mascot{animation:mascotwave .6s ease}
@keyframes mascotwave{
  0%,100%{transform:rotate(0deg)}
  25%{transform:rotate(-4deg) translateY(-2px)}
  75%{transform:rotate(3deg)}
}

.testicard:hover .testiavatar{transform:scale(1.08)}
.testiavatar{transition:transform .18s ease}

/* ---------- FAQ ---------- */
.faq{max-width:740px}
.faq details{background:var(--canvas);border:1px solid var(--line);border-radius:14px;
             padding:16px 20px;margin-bottom:11px}
.band.alt .faq details{background:var(--canvas)}
.faq summary{cursor:pointer;font-family:var(--disp);font-weight:700;font-size:15.5px;
             list-style:none;display:flex;align-items:center;gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";color:var(--green);font-size:19px;line-height:1}
.faq details[open] summary::before{content:"–"}
.faq p{color:var(--ink2);font-size:14.5px;margin:12px 0 0;padding-left:26px}

/* ---------- pied de page ---------- */
.lpfoot{display:flex;gap:20px;flex-wrap:wrap;align-items:center;
        padding:30px 26px;background:var(--card);border-top:1px solid var(--line);
        font-size:13.5px;color:var(--ink2)}
.lpfoot nav{margin-left:auto;display:flex;gap:20px;flex-wrap:wrap}
.lpfoot a{color:var(--ink2)}
.lpfoot a:hover{color:var(--green)}

/* ---------- mobile ---------- */
@media (max-width:980px){
  .hero{grid-template-columns:1fr;gap:34px;padding-top:52px}
  /* On garde la mascotte, mais on réserve sa place dans la bulle de question
     au lieu de la laisser la recouvrir : elle reste visible sans chevaucher. */
  .mascot{width:118px;right:-6px;top:8px}
  .mkq{max-width:calc(100% - 96px)}
  .mkbars,.mkpoint{max-width:100%}
  .mkbubble{max-width:100%}
}
@media (max-width:720px){
  .lpnav{gap:14px;padding:12px 16px}
  .lplinks{display:none}
  .lpactions{margin-left:auto}
  .burger{display:flex}
  .mobilenav.open{display:flex}
  .brandimg{height:34px}
  .hero{padding:44px 18px 36px}
  .band{padding:46px 18px}
  .mockup{padding:22px 20px 24px}
  .mascot{width:88px;right:-4px;top:6px;opacity:.95}
  .mkq{max-width:calc(100% - 74px);font-size:14.5px}
  .mkval{font-size:38px}
  .mkbar>span{width:78px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn:hover{transform:none}
  .stepcard:hover,.starcard:hover,.testicard:hover,.feat:hover,
  .plancard:not(.on):hover,.plancard.on:hover,.brandlink:hover .brandimg,
  .testicard:hover .testiavatar{transform:none}
  .mockup:hover .mascot{animation:none}
}

/* ---- pages légales : même cadre que le reste du site ---- */
.legal{max-width:820px;margin:0 auto;padding:46px 24px 60px}
.legal h1{font-size:clamp(26px,4vw,34px);margin-bottom:8px}
.legal h2{font-size:18px;text-align:left;margin:28px 0 8px}
.legal p,.legal li{color:var(--ink2);font-size:15px;line-height:1.7}
.legal .tabs{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 28px}
.legal .tabs a{background:var(--card);border:1px solid var(--line);border-radius:999px;
               padding:8px 16px;font-size:13.5px;font-weight:600;color:var(--ink2)}
.legal .tabs a.on{background:var(--green-s);border-color:var(--green);color:var(--green-d)}

/* ---- page de connexion ---- */
.authpage{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
          gap:40px;align-items:center;max-width:1020px;margin:0 auto;
          padding:52px 24px 60px;width:100%}
.authcard{background:var(--card);border:1px solid var(--line);border-radius:22px;
          padding:32px;box-shadow:var(--shadow-l)}
.authtabs{display:flex;background:var(--soft);border-radius:12px;padding:4px;margin-bottom:22px}
.authtabs a{flex:1;text-align:center;padding:10px 0;border-radius:9px;font-size:14px;
            font-weight:700;color:var(--muted)}
.authtabs a.on{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.authcard h1{font-size:26px;margin-bottom:6px}
.authsub{color:var(--ink2);font-size:15px;margin-bottom:22px}
.authform label{display:block;font-size:13px;font-weight:700;margin:14px 0 6px}
.authform input{width:100%;background:var(--soft);border:1.5px solid transparent;
                border-radius:11px;padding:12px 14px;font-family:var(--body);font-size:15px;
                outline:none;color:var(--ink)}
.authform input:focus{border-color:var(--green);background:var(--card)}
.authhint{display:block;color:var(--muted);font-size:12.5px;margin-top:6px}
.autherr{background:#F8E3DB;color:#a24a32;border-radius:11px;padding:11px 14px;
         font-size:14px;margin-bottom:16px}
.authswap{text-align:center;color:var(--muted);font-size:14px;margin:18px 0 0}
.authside{text-align:center}
.authside img{width:min(300px,80%);height:auto;filter:drop-shadow(0 14px 22px rgba(47,44,40,.14))}
.authside p{color:var(--ink2);font-size:15px;max-width:320px;margin:18px auto 0;line-height:1.6}
@media (max-width:860px){
  .authpage{grid-template-columns:1fr;gap:26px;padding-top:34px}
  .authside{order:-1}
  .authside img{width:150px}
  .authside p{display:none}
}

/* Conteneur JS (app.php) pour les boutons connexion/inscription/compte,
   imbriqué dans .lpactions : mêmes espacements que sur la home. */
.lpauth{display:flex;align-items:center;gap:12px;white-space:nowrap}