/* EduGest — feuille de style partagée pour les pages secondaires
   (documentation, guide de démarrage, blog, support, FAQ, pages légales…).
   Reprend les tokens visuels de index.html pour rester cohérent. */

:root{
  --navy:#0D1B4C;--blue:#1677FF;--violet:#5B3DF5;--vl:#7B5EFF;
  --green:#22C55E;--gd:#16A34A;--orange:#F97316;--sf:#F4F6FA;
  --white:#fff;--tm:#0D1B4C;--mu:#6B7280;--bd:#E5E7EB;
  --gh:linear-gradient(135deg,#0D1B4C 0%,#1a2a6c 50%,#2d1b7e 100%);
  --gc:linear-gradient(135deg,#5B3DF5 0%,#1677FF 100%);
  --sc:0 4px 24px rgba(13,27,76,.10);--sl:0 16px 56px rgba(13,27,76,.18);--r:16px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Poppins',sans-serif;color:var(--tm);background:#fff;line-height:1.65}

a{color:var(--violet);text-decoration:none}
a:hover{text-decoration:underline}

/* NAV */
.sp-nav{position:fixed;top:0;left:0;right:0;z-index:200;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-bottom:1px solid var(--bd);padding:0 5%;display:flex;align-items:center;justify-content:space-between;height:68px}
.sp-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.sp-logo:hover{text-decoration:none}
.sp-logo-icon{width:40px;height:40px;background:var(--gc);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.sp-logo strong{font-size:1.15rem;font-weight:800;color:var(--navy);display:block}
.sp-logo span{font-size:.6rem;color:var(--mu);font-weight:500;letter-spacing:.05em;text-transform:uppercase;display:block}
.sp-nav-actions{display:flex;gap:10px;align-items:center}
.sp-back{font-size:.82rem;font-weight:600;color:var(--mu)}
.sp-back:hover{color:var(--violet)}

.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 22px;border-radius:50px;font-family:'Poppins',sans-serif;font-size:.875rem;font-weight:600;cursor:pointer;text-decoration:none;transition:all .25s;border:none;white-space:nowrap}
.bg{background:transparent;color:var(--navy);border:1.5px solid var(--bd)}
.bg:hover{border-color:var(--violet);color:var(--violet);text-decoration:none}
.bp{background:var(--gc);color:#fff;box-shadow:0 4px 16px rgba(91,61,245,.35)}
.bp:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(91,61,245,.45);text-decoration:none}
.bo{background:transparent;color:var(--violet);border:2px solid var(--violet)}
.bo:hover{background:var(--violet);color:#fff;text-decoration:none}

/* HERO / HEADER DE PAGE */
.sp-hero{background:var(--gh);padding:150px 5% 60px;color:#fff}
.sp-hero-inner{max-width:840px;margin:0 auto}
.sp-eyebrow{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.12);padding:6px 14px;border-radius:50px;margin-bottom:14px}
.sp-hero h1{font-size:2.2rem;font-weight:800;line-height:1.25;margin-bottom:12px}
.sp-hero p{font-size:1rem;color:rgba(255,255,255,.8);max-width:640px}

/* CONTENU */
.sp-main{max-width:840px;margin:0 auto;padding:56px 5% 100px}
.sp-main h2{font-size:1.4rem;font-weight:800;color:var(--navy);margin:36px 0 14px}
.sp-main h2:first-child{margin-top:0}
.sp-main h3{font-size:1.05rem;font-weight:700;color:var(--navy);margin:22px 0 8px}
.sp-main p{color:#374151;margin-bottom:14px;font-size:.94rem}
.sp-main ul, .sp-main ol{color:#374151;margin:0 0 14px 1.3rem;font-size:.94rem}
.sp-main li{margin-bottom:6px}
.sp-main strong{color:var(--navy)}
.sp-updated{font-size:.78rem;color:var(--mu);margin-bottom:28px;display:block}

/* CARTES */
.sp-card{background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);padding:24px;margin-bottom:16px}
.sp-card h3{margin-top:0}
.sp-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}
.sp-step{display:flex;gap:14px;margin-bottom:22px}
.sp-step-num{flex-shrink:0;width:34px;height:34px;border-radius:50%;background:var(--gc);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem}
.sp-step-body h3{margin:0 0 4px}
.sp-step-body p{margin:0}

/* FAQ ACCORDION */
.sp-faq-item{border:1px solid var(--bd);border-radius:14px;margin-bottom:10px;overflow:hidden}
.sp-faq-q{width:100%;text-align:left;background:#fff;border:none;padding:16px 20px;font-family:'Poppins',sans-serif;font-size:.94rem;font-weight:600;color:var(--navy);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px}
.sp-faq-q:hover{background:var(--sf)}
.sp-faq-q .chev{transition:transform .25s;color:var(--violet);flex-shrink:0}
.sp-faq-item.open .sp-faq-q .chev{transform:rotate(180deg)}
.sp-faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease}
.sp-faq-item.open .sp-faq-a{max-height:400px}
.sp-faq-a p{padding:0 20px 16px;color:var(--mu);font-size:.88rem;margin:0}

/* BLOG */
.sp-post{border-bottom:1px solid var(--bd);padding:26px 0}
.sp-post:first-child{padding-top:0}
.sp-post:last-child{border-bottom:none}
.sp-post-tag{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--violet);background:rgba(91,61,245,.08);padding:4px 10px;border-radius:50px;margin-bottom:10px}
.sp-post-date{font-size:.78rem;color:var(--mu);margin-bottom:6px}
.sp-post h3{margin:0 0 8px}

/* CONTACT CHIPS */
.sp-contact{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0}
.sp-contact a{display:flex;align-items:center;gap:8px;background:var(--sf);border:1px solid var(--bd);border-radius:12px;padding:12px 16px;font-size:.86rem;font-weight:600;color:var(--navy)}
.sp-contact a:hover{border-color:var(--violet);text-decoration:none}

/* FOOTER */
.sp-footer{background:var(--navy);color:rgba(255,255,255,.55);padding:36px 5%;text-align:center;font-size:.78rem}
.sp-footer a{color:rgba(255,255,255,.75)}
.sp-footer-links{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}

/* STANDALONE FORM PAGES (demande de démo, etc.) */
.sp-form-card{background:#fff;border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--sc);padding:32px;margin-top:8px}
.sp-form{display:flex;flex-direction:column;gap:14px}
.sp-form input,.sp-form textarea,.sp-form select{font-family:'Poppins',sans-serif;font-size:.9rem;color:var(--tm);padding:12px 14px;border:1.5px solid var(--bd);border-radius:10px;outline:none;transition:border-color .2s;width:100%;background:#fff}
.sp-form input:focus,.sp-form textarea:focus,.sp-form select:focus{border-color:var(--violet)}
.sp-form textarea{resize:vertical;min-height:90px;font-family:'Poppins',sans-serif}
.sp-flabel{display:block;font-size:.85rem;font-weight:400;color:var(--mu);margin:0 0 -4px}
.sp-fgrid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sp-fgrid2 .full{grid-column:1 / -1}
.sp-fsec{display:flex;align-items:center;gap:8px;margin:10px 0 -2px}
.sp-fsec-line{flex:1;height:1px;background:var(--bd)}
.sp-fsec span{font-size:.76rem;font-weight:700;color:var(--violet);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.sp-fchips{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.sp-fchip{position:relative;display:block}
.sp-fchip input{position:absolute;opacity:0;width:0;height:0}
.sp-fchip span{display:flex;align-items:center;justify-content:center;gap:6px;font-size:.84rem;font-weight:500;color:var(--tm);border:1.5px solid var(--bd);border-radius:10px;padding:11px 10px;cursor:pointer;transition:all .18s;background:#fff;text-align:center}
.sp-fchip input:checked+span{border-color:var(--violet);background:rgba(91,61,245,.07);color:var(--violet);font-weight:700}
.sp-fchip input:focus-visible+span{outline:2px solid var(--violet);outline-offset:1px}
.sp-fchip span:hover{border-color:var(--violet)}
.sp-form button[type="submit"]{margin-top:6px;justify-content:center;width:100%}
.sp-form button[type="submit"]:disabled{opacity:.6;cursor:not-allowed}
.sp-ffeedback{font-size:.85rem;text-align:center;min-height:18px}
.sp-ffeedback.dmf-ok{color:var(--green)}
.sp-ffeedback.dmf-err{color:#DC2626}
.sp-fpr{display:flex;gap:10px}
.sp-fpr input{flex:2}
.sp-fpr select{flex:1}
.sp-flock{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--mu);background:var(--sf);border-radius:10px;padding:10px 12px}
.sp-flock input{width:auto;accent-color:var(--violet)}

@media(max-width:640px){
  .sp-hero{padding:120px 6% 44px}
  .sp-hero h1{font-size:1.6rem}
  .sp-main{padding:40px 6% 80px}
  .sp-grid{grid-template-columns:1fr}
  .sp-fgrid2{grid-template-columns:1fr}
  .sp-form-card{padding:22px}
}