@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Cairo:wght@400;600;700;800&display=swap');

/* ============================================================
   MCDZ Support — Éléments récupérés du backend
   Source : backend/assets/css/mcdz-theme.css
   ============================================================ */

/* Variables backend */
:root {
   --mcdz-accent:        #1e3fa8;
   --mcdz-accent-text:   #ffffff;
   --mcdz-accent-rgb:    30, 63, 168;
   --mcdz-accent-dark:   #152c7a;
   --mcdz-success:       #16a34a;
   --mcdz-danger:        #dc2626;
   --mcdz-warning:       #d97706;
   --mcdz-speed:         0.25s;
   --mcdz-r-sm:          6px;
   --mcdz-r-md:          10px;
   --mcdz-fs-sm:         13px;
   --mcdz-fs-xs:         12px;
   --mcdz-bd:            #d8dff0;
   --mcdz-tx-2:          #3d4a63;
   --mcdz-bg-card-2:     #f7f9fd;
}

/* ── Boutons MCDZ (copie backend) ──────────────────────── */
.btn-mcdz-primary {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: var(--mcdz-accent);
   color: var(--mcdz-accent-text) !important;
   border: 1px solid var(--mcdz-accent-dark);
   border-radius: var(--mcdz-r-md);
   font-size: var(--mcdz-fs-sm);
   font-weight: 600;
   padding: .45rem 1rem;
   cursor: pointer;
   white-space: nowrap;
   text-decoration: none;
   vertical-align: middle;
   font-family: inherit;
}
.btn-mcdz-primary i { font-size: 14px; }

.btn-mcdz-soft {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: rgba(var(--mcdz-accent-rgb), 0.12);
   color: var(--mcdz-accent) !important;
   border: 1.5px solid rgba(var(--mcdz-accent-rgb), 0.50);
   border-radius: var(--mcdz-r-md);
   font-size: var(--mcdz-fs-sm);
   font-weight: 500;
   padding: .45rem 1rem;
   cursor: pointer;
   white-space: nowrap;
   font-family: inherit;
}
.btn-mcdz-soft i { font-size: 14px; }

.btn-mcdz-outline {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: transparent;
   color: var(--mcdz-accent) !important;
   border: 1px solid rgba(var(--mcdz-accent-rgb), 0.50);
   border-radius: var(--mcdz-r-md);
   font-size: var(--mcdz-fs-sm);
   font-weight: 500;
   padding: .45rem 1rem;
   cursor: pointer;
   white-space: nowrap;
   font-family: inherit;
}
.btn-mcdz-outline i { font-size: 14px; }

.btn-mcdz-ghost {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: transparent;
   color: var(--mcdz-tx-2) !important;
   border: 1px solid var(--mcdz-bd);
   border-radius: var(--mcdz-r-md);
   font-size: var(--mcdz-fs-sm);
   font-weight: 500;
   padding: .45rem 1rem;
   cursor: pointer;
   white-space: nowrap;
   font-family: inherit;
}
.btn-mcdz-ghost i { font-size: 14px; }

.btn-mcdz-danger {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: var(--mcdz-danger);
   color: #fff !important;
   border: 1px solid rgba(220,38,38,.12);
   border-radius: var(--mcdz-r-md);
   font-size: var(--mcdz-fs-sm);
   font-weight: 600;
   padding: .45rem 1rem;
   cursor: pointer;
   white-space: nowrap;
   font-family: inherit;
}
.btn-mcdz-danger i { font-size: 14px; }

/* ============================================================
   MCDZ Support — CSS autonome v2
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0}
:root{
   --blue:#1e3fa8;--blue-dark:#152c7a;--blue-mid:#2d52c7;
   --blue-light:#eef2fc;--blue-soft:rgba(30,63,168,.07);--blue-border:rgba(30,63,168,.15);
   --teal:#0891b2;--green:#059669;--green-soft:rgba(5,150,105,.08);
   --violet:#7c3aed;--orange:#ea580c;--amber:#d97706;--rose:#e11d48;
   --tx1:#0d1526;--tx2:#4a5568;--tx3:#94a3b8;
   --bd:#e2e8f0;--bg:#fff;--bgs:#f8fafc;
   --r:12px;--r-sm:8px;--r-lg:18px;--r-xl:24px;
   --shadow-sm:0 1px 4px rgba(30,63,168,.07);
   --shadow-md:0 4px 20px rgba(30,63,168,.1);
   --shadow-lg:0 8px 40px rgba(30,63,168,.14);
}
html{scroll-behavior:smooth;font-size:16px}
body{-webkit-text-size-adjust:100%;text-size-adjust:100%;font-family:var(--font-body,'Plus Jakarta Sans',sans-serif);background:#fff;color:var(--tx1);line-height:1.65;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh;min-height:-webkit-fill-available}
body[dir="rtl"]{letter-spacing:0}
h1,h2,h3,h4{font-family:var(--font-title,'Plus Jakarta Sans',sans-serif);line-height:1.2;letter-spacing:-.02em}
body[dir="rtl"] h1,body[dir="rtl"] h2,body[dir="rtl"] h3{letter-spacing:0}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
main{flex:1}

/* ── Container ── */
.sp-container{width:100%;max-width:1100px;margin:0 auto;padding:0 24px}

/* ── NAV ── */
.sp-nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--bd);box-shadow:var(--shadow-sm)}
.sp-nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px;gap:20px}
.sp-nav-brand{display:flex;align-items:center;gap:10px}
.sp-nav-logo{height:36px;width:auto;object-fit:contain;display:block;animation:mcdz-heartbeat 3.7s ease-in-out infinite;transform-origin:center}
.sp-lang-flags{display:flex;align-items:center;gap:6px}
.sp-flag-btn{display:flex;align-items:center;padding:4px;border-radius:var(--r-sm);border:2px solid transparent;background:transparent;cursor:pointer;transition:all .5s ease;opacity:.7}
.sp-flag-btn:hover{opacity:1;border-color:var(--bd)}
.sp-flag-btn.active{opacity:1;border-color:var(--blue)}
.sp-flag-img{width:28px;height:20px;border-radius:3px;object-fit:cover;display:block}

/* ── HERO ── */
.sp-hero{background:linear-gradient(145deg,var(--blue) 0%,var(--blue-dark) 55%,#0a1a4f 100%);border-radius:0 0 32px 32px;padding:80px 0 64px;position:relative;overflow:visible}
.sp-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 80% 20%,rgba(255,255,255,.07) 0%,transparent 60%),radial-gradient(ellipse 40% 40% at 15% 80%,rgba(14,165,233,.12) 0%,transparent 50%);pointer-events:none}
.sp-hero-inner{position:relative;text-align:center;max-width:680px;margin:0 auto}
.sp-hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:5px 16px;font-size:11.5px;font-weight:700;color:rgba(255,255,255,.9);letter-spacing:.04em;text-transform:uppercase;margin-bottom:22px}
.sp-hero-badge i{font-size:14px}
.sp-hero-title{font-size:3rem;font-size:clamp(2rem,5vw,3rem);font-weight:800;color:#fff;margin-bottom:14px;letter-spacing:-.03em}
.sp-hero-title em{font-style:normal;color:#93c5fd}
.sp-hero-desc{font-size:1.05rem;color:rgba(255,255,255,.72);line-height:1.75;margin-bottom:36px;max-width:520px;margin-left:auto;margin-right:auto}

/* Search hero */
.sp-search-wrap{position:relative;max-width:560px;margin:0 auto}
.sp-search-wrap input{width:100%;padding:16px 56px 16px 52px;border-radius:var(--r-sm);border:none;outline:none;font-size:1rem;font-family:inherit;background:rgba(255,255,255,.97);color:var(--tx1);box-shadow:0 8px 32px rgba(0,0,0,.25);transition:box-shadow .5s ease}
.sp-search-wrap input::placeholder{color:var(--tx3)}
.sp-results{display:none;flex-direction:column;gap:0;position:fixed;background:#fff;border:1px solid var(--bd);border-radius:var(--r-sm);box-shadow:0 8px 32px rgba(0,0,0,.25);z-index:9999;max-height:320px;overflow-y:auto;width:560px;max-width:90vw;padding:5px;}
.sp-results.show{display:flex;}
.sp-result{display:flex;align-items:center;gap:10px;padding:10px 15px;background:#eee;border-radius:var(--r-sm);cursor:pointer;border-bottom:none;-webkit-transition:background .15s;transition:background .15s;margin-bottom:3px;}
.sp-result:last-child{border-bottom:none;}
.sp-result:hover{background:var(--bgs);}
.sp-result-cat{font-size:11px;font-weight:600;color:var(--blue);text-transform:uppercase;letter-spacing:.5px;flex-shrink:0;}
.sp-result-title{font-size:14px;font-weight:600;color:var(--tx1);flex:1;}
.sp-result-arr{font-size:14px;color:var(--tx3);flex-shrink:0;}
.sp-no-result{padding:16px;text-align:center;color:var(--tx3);font-size:14px;}
.sp-search-wrap input:focus{box-shadow:0 8px 40px rgba(0,0,0,.35),0 0 0 3px rgba(147,197,253,.5)}
.sp-search-icon{position:absolute;left:17px;top:17px;font-size:20px;color:var(--tx3);pointer-events:none}
.sp-tags-bar{width:100%;padding:12px 0 8px;scrollbar-width:none}
.sp-tags-bar::-webkit-scrollbar{display:none}
.sp-tags-inner{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:0 24px}
.sp-stag{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:4px 10px;font-size:11px;font-weight:600;color:rgba(255,255,255,.82);cursor:pointer;transition:background .4s ease,color .4s ease;white-space:nowrap;flex-shrink:0}
.sp-stag:hover{background:rgba(255,255,255,.22)}

/* Search results */


.sp-result:hover{border-color:var(--blue);background:var(--blue-light)}
.sp-result-cat{font-size:.7rem;font-weight:700;color:var(--blue);background:var(--blue-light);padding:2px 8px;border-radius:999px;flex-shrink:0}
.sp-result-title{font-size:.88rem;font-weight:600;color:var(--tx1)}
.sp-result-arr{margin-left:auto;font-size:13px;color:var(--tx3)}
.sp-no-result{text-align:center;padding:16px;color:#4a5568;font-size:.88rem;background:#fff;border-radius:var(--r-sm)}

/* ── SECTIONS ── */
.sp-section{padding:52px 0}
.sp-section--alt{background:#f8fafc}
.sp-section--contact{background:linear-gradient(135deg,var(--blue-light) 0%,#fff 100%)}
.sp-section-hd{text-align:center;margin-bottom:48px}
.sp-section-hd h2{font-size:1.9rem;font-weight:800;color:var(--tx1);margin-bottom:10px}
.sp-section-hd p{font-size:1rem;color:var(--tx3)}
.sp-inline-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.sp-inline-hd h2{font-size:1rem;font-weight:700;color:var(--tx1);display:flex;align-items:center;gap:8px}
.sp-dot{width:8px;height:8px;border-radius:50%;background:var(--blue);display:inline-block}
.sp-inline-hd a{font-size:12.5px;color:var(--blue);font-weight:600;cursor:pointer;opacity:.8}
.sp-inline-hd a:hover{opacity:1}

/* ── CATEGORIES ── */
.sp-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.sp-cats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.sp-cats{grid-template-columns:1fr}}
.sp-cat{background:var(--cat-bg);border:1px solid var(--cat-border,var(--bd));border-radius:var(--r-lg);padding:22px 18px 18px;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease,background .12s ease;position:relative;overflow:hidden;will-change:transform;display:flex;flex-direction:column;-webkit-box-shadow:rgba(0,0,0,.07) 0px 1px 1px,rgba(0,0,0,.07) 0px 2px 2px,rgba(0,0,0,.07) 0px 4px 4px,rgba(0,0,0,.07) 0px 8px 8px,rgba(0,0,0,.07) 0px 16px 16px;box-shadow:rgba(0,0,0,.07) 0px 1px 1px,rgba(0,0,0,.07) 0px 2px 2px,rgba(0,0,0,.07) 0px 4px 4px,rgba(0,0,0,.07) 0px 8px 8px,rgba(0,0,0,.07) 0px 16px 16px}
.sp-cat.aos-animate{transform:none}
.sp-cat.aos-animate:hover{-webkit-transform:translateY(-5px) !important;transform:translateY(-5px) !important;box-shadow:0 16px 40px rgba(0,0,0,.12) !important;border-color:var(--cat-c) !important;background:linear-gradient(160deg,var(--cat-bg) 0%,#fff 100%) !important}
.sp-cat::after{content:'';position:absolute;bottom:-24px;right:-24px;width:80px;height:80px;border-radius:50%;background:var(--cat-bg);opacity:.75;border:0.5px solid var(--cat-c);transition:transform .12s ease;pointer-events:none}
[dir="rtl"] .sp-cat::after{right:auto;left:-24px}
.sp-cat:hover::after{-webkit-transform:scale(1.5);transform:scale(1.5)}

.sp-cat-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px}
.sp-cat-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;background:var(--cat-bg);color:var(--cat-c);transition:transform .12s ease;flex-shrink:0}
.sp-cat:hover .sp-cat-icon{-webkit-transform:scale(1.1) rotate(-5deg);transform:scale(1.1) rotate(-5deg)}
.sp-cat-badge{font-size:.68rem;font-weight:700;color:var(--cat-c);background:var(--cat-bg);padding:3px 9px;border-radius:999px}
.sp-cat h3{font-size:.9rem;font-weight:800;color:var(--tx1);margin-bottom:5px;line-height:1.3;position:relative}
.sp-cat p{font-size:.77rem;color:var(--tx2);line-height:1.55;margin-bottom:12px;position:relative}
.sp-cat-footer{display:flex;align-items:center;justify-content:space-between;position:relative;margin-top:auto}
.sp-cat-topics{display:flex;flex-wrap:wrap;gap:4px}
.sp-cat-topic{font-size:.67rem;font-weight:600;color:var(--tx3);background:var(--bgs);border:1px solid var(--bd);border-radius:999px;padding:2px 7px}
.sp-cat-arrow{position:absolute;bottom:14px;right:14px;font-size:33px;color:var(--tx3);opacity:0;transition:opacity .12s ease,transform .12s ease,color .12s ease;transform:translate(4px,-4px);flex-shrink:0}
[dir="rtl"] .sp-cat-arrow{right:auto;left:14px;transform:translate(-4px,-4px);transform:scaleX(-1) translate(4px,-4px)}
.sp-cat.aos-animate:hover .sp-cat-arrow,.sp-cat:hover .sp-cat-arrow{opacity:1;transform:translate(0,0);color:var(--cat-c)}
[dir="rtl"] .sp-cat.aos-animate:hover .sp-cat-arrow{transform:scaleX(-1)}

/* ── REMOTE + CONTACT ── */
.sp-remote-wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
@media(max-width:900px){.sp-remote-wrap{grid-template-columns:1fr;gap:32px}}
.sp-remote-title{font-size:1.3rem;font-weight:800;color:var(--tx1);margin-bottom:10px}

.sp-remote-desc{font-size:.92rem;color:var(--tx2);line-height:1.7;margin-bottom:20px}
.sp-remote-actions{display:flex;gap:10px;flex-wrap:wrap}
.sp-contact-cta-inner{background:#fff;border:1px solid var(--bd);border-radius:var(--r-lg);padding:32px;display:flex;flex-direction:column;gap:12px;align-items:flex-start;-webkit-box-shadow:rgba(0,0,0,.07) 0px 1px 1px,rgba(0,0,0,.07) 0px 2px 2px,rgba(0,0,0,.07) 0px 4px 4px,rgba(0,0,0,.07) 0px 8px 8px,rgba(0,0,0,.07) 0px 16px 16px;box-shadow:rgba(0,0,0,.07) 0px 1px 1px,rgba(0,0,0,.07) 0px 2px 2px,rgba(0,0,0,.07) 0px 4px 4px,rgba(0,0,0,.07) 0px 8px 8px,rgba(0,0,0,.07) 0px 16px 16px;-webkit-transition:-webkit-transform .4s cubic-bezier(.25,.46,.45,.94),box-shadow .4s ease;transition:transform .4s cubic-bezier(.25,.46,.45,.94),box-shadow .4s ease}
.sp-contact-cta-inner:hover{-webkit-transform:translateY(-4px);transform:translateY(-4px);-webkit-box-shadow:0 12px 36px rgba(30,63,168,.14);box-shadow:0 12px 36px rgba(30,63,168,.14)}
.sp-contact-cta-icon{font-size:40px;color:var(--blue)}
.sp-contact-cta-icon--green{color:var(--green)}
.sp-contact-cta-inner h2,.sp-contact-cta-inner h3{font-size:1.2rem;font-weight:800;color:var(--tx1)}
.sp-contact-cta-inner p,.sp-remote-desc{font-size:.9rem;color:var(--tx2);line-height:1.6;margin-bottom:0}
.sp-contact-cta-btn{align-self:flex-end;padding:10px 22px}
.-green{background:transparent;color:var(--green) !important;border:1.5px solid var(--green) !important}

/* ── CONTACT ── */
.sp-contact-wrap{display:grid;grid-template-columns:1fr 1.7fr;gap:60px;align-items:start}
@media(max-width:900px){.sp-contact-wrap{grid-template-columns:1fr;gap:40px}}
.sp-contact-info h2{font-size:1.7rem;font-weight:800;color:var(--tx1);margin-bottom:10px}
.sp-contact-info>p{font-size:.95rem;color:var(--tx3);margin-bottom:32px}
.sp-channels{display:flex;flex-direction:column;gap:14px}
.sp-channel{display:flex;align-items:center;gap:12px;font-size:.9rem;color:var(--tx2)}
a.sp-channel:hover{color:var(--blue)}
.sp-channel i{font-size:20px;color:var(--blue);flex-shrink:0}
.sp-form-card{background:#fff;border-radius:var(--r-lg);padding:36px;box-shadow:var(--shadow-md);border:1px solid var(--bd)}
.sp-form{display:flex;flex-direction:column;gap:18px}
.sp-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){.sp-form-row{grid-template-columns:1fr}}
.sp-form-field{display:flex;flex-direction:column;gap:6px}
.sp-form-field label{font-size:.87rem;font-weight:700;color:var(--tx1)}
.sp-form-field label span{color:var(--rose)}
.sp-form-field input,.sp-form-field textarea{padding:10px 14px;border:1.5px solid var(--bd);border-radius:var(--r-sm);font-size:.92rem;color:var(--tx1);background:var(--bgs);transition:border-color .5s ease,background .5s ease;font-family:inherit;resize:vertical;outline:none}
.sp-form-field input:focus,.sp-form-field textarea:focus{border-color:var(--blue);background:#fff}
.sp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 26px;border-radius:var(--r-sm);font-size:.92rem;font-weight:700;cursor:pointer;transition:opacity .5s ease,transform .5s cubic-bezier(.34,1.56,.64,1);border:none;font-family:inherit;text-decoration:none}
.sp-btn:hover{opacity:.88;-webkit-transform:translateY(-1px);transform:translateY(-1px)}
.sp-btn--blue{background:var(--blue);color:#fff;width:100%}
.sp-btn--green{background:var(--green);color:#fff}
.sp-btn--outline{border:1.5px solid var(--green);color:var(--green);background:transparent}
.sp-btn i{font-size:18px}
.sp-flash{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--r-sm);font-size:.9rem;font-weight:600;margin-bottom:20px}
.sp-flash--ok{background:var(--green-soft);color:var(--green);border:1px solid rgba(5,150,105,.2)}
.sp-flash--err{background:rgba(225,29,72,.06);color:var(--rose);border:1px solid rgba(225,29,72,.2)}
.sp-flash i{font-size:20px;flex-shrink:0}

/* ── REMOTE ── */
.sp-remote-steps{display:flex;flex-direction:column;gap:14px;margin:20px 0}
.sp-rstep{display:flex;align-items:flex-start;gap:14px}
.sp-rstep-n{width:30px;height:30px;border-radius:50%;background:var(--green);color:#fff;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.sp-rstep div{font-size:.9rem;color:var(--tx2);line-height:1.6}
.sp-rstep strong{color:var(--tx1);display:block;font-size:.92rem;margin-bottom:3px}
.sp-secure{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--tx3);margin-top:0}
.sp-secure i{color:var(--green);font-size:15px}


/* ── FOOTER ── */
.sp-footer{background:#0d1526;color:rgba(255,255,255,.55);padding:36px 0;text-align:center;font-size:.88rem;margin-top:auto}
.sp-footer-logo{height:40px;margin:0 auto 16px;opacity:.9}
.sp-footer p{margin-bottom:6px}
.sp-footer a{color:rgba(255,255,255,.5);text-decoration:underline}

/* ── Responsive ── */
@media(max-width:768px){
   .sp-hero{padding:60px 0 40px}
   .sp-section{padding:36px 0}
   .sp-section-hd h2{font-size:1.5rem}
   .sp-guide-body{padding:20px 16px}
   .sp-guide-title{font-size:1rem}
   .sp-guide-desc{font-size:.85rem}
   .sp-guide-progress{flex-wrap:wrap;gap:8px}
   .sp-gnav{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}
   .sp-gnav-btn{justify-content:center;padding:10px 12px;font-size:.82rem}
   .sp-pbar{width:100%;order:-1;flex:none}
   .sp-ptext{min-width:auto}
   .sp-step-dot{width:32px;height:32px;font-size:12px}
   .sp-step-title{font-size:.87rem}
   .sp-step-desc{font-size:.78rem}
   .sp-container{padding:0 16px}
}
@media(max-width:480px){
   .sp-nav-inner{height:54px}
   .sp-hero h1{font-size:1.6rem}
   .sp-hero-desc{font-size:.88rem}
   .sp-search-wrap input{padding:13px 44px 13px 42px;font-size:.9rem}
   .sp-cats{grid-template-columns:1fr 1fr}
   .sp-cat{padding:16px 14px 14px}
   .sp-cat-icon{width:38px;height:38px;font-size:20px}
   .sp-cat h3{font-size:.83rem}
   .sp-cat p{font-size:.72rem}
   .sp-gtabs{-webkit-overflow-scrolling:touch}
   .sp-gnav-btn{font-size:.78rem;padding:9px 10px;min-height:40px}
}
@media(max-width:320px){
   .sp-cats{grid-template-columns:1fr}
   .sp-hero h1{font-size:1.4rem}
   .sp-gnav{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════
   NOUVELLES PAGES — Catégorie & Article
   ══════════════════════════════════════════════════════════ */

/* ── Breadcrumb ──────────────────────────────────────────── */
.sp-section--sm { padding: 16px 0 0; }
.sp-breadcrumb { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--tx2); flex-wrap:wrap; }
.sp-breadcrumb a { color:var(--blue); text-decoration:none; display:flex; align-items:center; gap:4px; transition:color .2s ease; }
.sp-breadcrumb a i { font-size:16px; }
.sp-breadcrumb a:hover { text-decoration:none; color:#e11d48; }
.sp-breadcrumb .ph-caret-right { font-size:11px; color:var(--tx3); }
.sp-breadcrumb span { color:var(--tx2); }

/* ── Hero catégorie ──────────────────────────────────────── */
.sp-cat-hero { background:var(--cat-bg); border-bottom:1px solid var(--bd); padding:40px 0 32px; margin-top:12px; box-shadow:0 3px 6px #ababab; }
.sp-cat-hero-inner { display:flex; align-items:center; gap:24px; }
.sp-cat-hero-icon { width:72px; height:72px; border-radius:20px; background:var(--cat-c); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sp-cat-hero-icon i { font-size:36px; color:#fff; }
.sp-cat-hero-title { font-size:2rem; font-weight:800; color:var(--tx1); margin-bottom:8px; }
.sp-cat-hero-desc { font-size:15px; color:var(--tx2); margin-bottom:12px; }
.sp-cat-hero-meta { display:flex; gap:16px; }
.sp-cat-hero-meta span { font-size:13px; color:var(--tx2); display:flex; align-items:center; gap:6px; }
@media(max-width:600px){
   .sp-cat-hero-inner { flex-direction:column; align-items:flex-start; }
   .sp-cat-hero-title { font-size:1.5rem; }
}

/* ── Liste articles ──────────────────────────────────────── */
.sp-article-list { display:flex; flex-direction:column; gap:12px; }

.sp-article-card { display:flex; align-items:center; gap:16px; background:#fff; border:1px solid var(--bd); border-radius:var(--r-lg); padding:20px; text-decoration:none; color:var(--tx1); -webkit-transition:-webkit-transform .6s cubic-bezier(.16,1,.3,1), box-shadow .6s ease, border-color .4s ease, background .4s ease; transition:transform .6s cubic-bezier(.16,1,.3,1), box-shadow .6s ease, border-color .4s ease, background .4s ease; }
.sp-article-card:hover { -webkit-transform:translateX(8px); transform:translateX(8px); -webkit-box-shadow:rgba(0,0,0,.24) 0px 3px 8px;box-shadow:rgba(0,0,0,.24) 0px 3px 8px; border-color:var(--blue); background:rgba(30,63,168,.03); }
.sp-article-card-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sp-article-card-icon i { font-size:22px; -webkit-transition:color .2s ease; transition:color .2s ease; }
.sp-article-card-icon-i { color:var(--icon-c); -webkit-transition:color .2s ease; transition:color .2s ease; }
.sp-article-card-icon { -webkit-transition:background .2s ease; transition:background .2s ease; }
.sp-article-card:hover .sp-article-card-icon-i { color:#e11d48 !important; }
.sp-article-card:hover .sp-article-card-icon { background:rgba(225,29,72,.1) !important; }
.sp-article-card-body { flex:1; min-width:0; }
.sp-article-card-title { font-size:15px; font-weight:700; margin-bottom:4px; }
.sp-article-card-desc { font-size:13px; color:var(--tx2); }
.sp-article-card-meta { margin-top:6px; font-size:12px; color:var(--tx3); display:flex; gap:12px; }
.sp-article-card-arrow { font-size:20px; color:var(--tx3); flex-shrink:0; -webkit-transition:color .2s ease; transition:color .2s ease; }
.sp-article-card:hover .sp-article-card-arrow { color:#e11d48; }
.sp-article-card:hover .sp-article-card-icon i { color:#e11d48; }
.sp-cats--sm .sp-cat h3 { font-size:14px; }
.sp-cat--disabled { opacity:.4; cursor:not-allowed; pointer-events:none; }
.sp-cat--disabled .sp-cat-arrow { display:none; }

/* ── Layout article ──────────────────────────────────────── */
.sp-article-layout { display:grid; grid-template-columns:1fr 280px; gap:40px; align-items:start; }
@media(max-width:900px){ .sp-article-layout { grid-template-columns:1fr; } }

/* En-tête article */
.sp-article-header { margin-bottom:32px; }
.sp-article-cat-badge { display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:50px; font-size:12px; font-weight:600; margin-bottom:16px; }
.sp-article-title { font-size:1.8rem; font-weight:800; color:var(--tx1); margin-bottom:12px; line-height:1.2; }
.sp-article-lead { font-size:16px; color:var(--tx2); line-height:1.6; }

/* Étapes article */
.sp-article-steps { display:flex; flex-direction:column; gap:32px; }
.sp-astep { display:flex; gap:20px; align-items:flex-start; }
.sp-astep-number { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:800; flex-shrink:0; margin-top:2px; }
.sp-astep-body { flex:1; min-width:0; }
.sp-astep-title { font-size:17px; font-weight:700; color:var(--tx1); margin-bottom:8px; }
.sp-astep-desc { font-size:14px; color:var(--tx2); line-height:1.7; margin-bottom:12px; }
.sp-astep-html { background:var(--bgs); border:1px solid var(--bd); border-radius:var(--r-lg); padding:20px 24px; margin-bottom:12px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.sp-astep-html .sp-btn-demo { display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:8px; font-size:14px; font-weight:600; cursor:default; }
.sp-astep-html .sp-btn-demo-primary { background:#1e3fa8; color:#fff; }
.sp-astep-html .sp-btn-demo-outline { background:transparent; color:#1e3fa8; border:1.5px solid #1e3fa8; }
.sp-astep-html .sp-btn-demo-label { font-size:11px; color:var(--tx3); margin-bottom:4px; }
.sp-astep-html .sp-btn-demo-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.sp-astep-img { margin-bottom:12px; }
.sp-astep-img img { max-width:100%; width:100%; display:block; border-radius:var(--r-lg); border:1px solid var(--bd); box-shadow:0 4px 16px rgba(0,0,0,.08); }
.sp-astep-img--sm { text-align:center; }
.sp-astep-img--sm img { max-width:420px; width:100%; display:inline-block; }
.sp-astep-img--xs { text-align:center; }
.sp-astep-img--xs img { max-width:280px; width:100%; display:inline-block; }
.sp-astep-img--xxs { text-align:center; }
.sp-astep-img--xxs img { max-width:160px; width:100%; display:inline-block; }
.sp-astep-img-placeholder { display:flex; align-items:center; justify-content:center; gap:8px; padding:24px; border:1.5px dashed var(--bd); border-radius:var(--r-lg); color:var(--tx3); font-size:13px; margin-bottom:12px; }
.sp-astep-img-placeholder i { font-size:24px; }
.sp-astep-tip { display:flex; align-items:flex-start; gap:8px; background:rgba(30,63,168,.06); border-left:3px solid var(--blue); border-radius:0 var(--r-sm) var(--r-sm) 0; padding:10px 14px; font-size:13px; color:var(--tx2); }
.sp-astep-tip i { color:var(--blue); font-size:16px; flex-shrink:0; margin-top:1px; }

/* Nav précédent / suivant */
.sp-art-nav-center { display:flex; flex-direction:column; flex-shrink:0; align-self:stretch; }
.sp-art-nav-mid { display:flex; align-items:center; justify-content:center; width:56px; flex:1; border:1px solid var(--bd); color:var(--tx3); text-decoration:none; -webkit-transition:color .2s ease, border-color .2s ease, background .2s ease; transition:color .2s ease, border-color .2s ease, background .2s ease; border-radius:0; }
.sp-art-nav-mid:first-child { border-radius:var(--r-sm) var(--r-sm) 0 0; border-bottom:1px solid var(--bd); margin-bottom:1px; }
.sp-art-nav-mid:last-child { border-radius:0 0 var(--r-sm) var(--r-sm); }
.sp-art-nav-mid i { font-size:22px; }
.sp-art-nav-mid:first-child:hover { color:#e11d48; border-color:#e11d48; background:rgba(225,29,72,.06); }
.sp-art-nav-mid:last-child:hover  { color:#059669; border-color:#059669; background:rgba(5,150,105,.06); }
.sp-art-nav-empty { flex:1; min-height:72px; }
.sp-art-nav { display:flex; align-items:stretch; gap:12px; gap:16px; margin-top:48px; padding-top:24px; border-top:1px solid var(--bd); }
.sp-art-nav-btn { display:flex; align-items:center; gap:12px; padding:16px; border:1px solid var(--bd); border-radius:var(--r-lg); text-decoration:none; color:var(--tx1); transition:border-color .12s, background .12s; flex:1; min-height:72px; }
.sp-art-nav-btn:hover { border-color:var(--blue); background:rgba(30,63,168,.04); }
.sp-art-nav-btn { -webkit-transition:-webkit-transform .4s cubic-bezier(.16,1,.3,1), border-color .2s ease, background .2s ease; transition:transform .4s cubic-bezier(.16,1,.3,1), border-color .2s ease, background .2s ease; }
.sp-art-nav-btn i { -webkit-transition:color .2s ease; transition:color .2s ease; }
.sp-art-nav-btn:hover i { color:#e11d48; }
.sp-art-nav-prev:hover { -webkit-transform:translateX(-6px); transform:translateX(-6px); }
.sp-art-nav-next:hover { -webkit-transform:translateX(6px); transform:translateX(6px); }
.sp-art-nav-next { justify-content:flex-end; text-align:right; }
.sp-art-nav-label { font-size:11px; color:var(--tx3); text-transform:uppercase; letter-spacing:.5px; margin-bottom:2px; }
.sp-art-nav-title { font-size:14px; font-weight:600; }
@media(max-width:600px){ .sp-art-nav { grid-template-columns:1fr; } }

/* ── Sidebar ─────────────────────────────────────────────── */
.sp-article-sidebar { position:-webkit-sticky; position:sticky; top:24px; display:flex; flex-direction:column; gap:16px; }
.sp-sidebar-block { background:linear-gradient(#fff, #eee); border:1px solid var(--bd); border-radius:var(--r-lg); padding:20px; }
.sp-sidebar-title { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--tx1); margin-bottom:14px; text-transform:uppercase; letter-spacing:.5px; }
.sp-sidebar-title i { font-size:16px; }
.sp-sidebar-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:2px; }
.sp-sidebar-link { display:block; padding:7px 10px; border-radius:var(--r-sm); font-size:13px; color:var(--tx2); text-decoration:none; transition:background .1s, color .1s; }
.sp-sidebar-link:hover { background:#f1f5f9; color:var(--blue); }
.sp-sidebar-link.active { background:rgba(30,63,168,.08); color:var(--blue); font-weight:600; }
.sp-sidebar-help { text-align:center; background:linear-gradient(135deg, rgba(30,63,168,.06), rgba(30,63,168,.02)); }
.sp-sidebar-help-icon { font-size:32px; color:var(--blue); margin-bottom:8px; display:block; }
.sp-sidebar-help-text { font-size:13px; color:var(--tx2); margin-bottom:14px; }
.sp-sidebar-help-btn { width:100%; justify-content:center; font-size:13px; }

/* ── État vide ───────────────────────────────────────────── */
.sp-empty { text-align:center; padding:48px 24px; color:var(--tx3); }
.sp-empty i { font-size:48px; display:block; margin-bottom:12px; }

/* ── TABLE DES MATIÈRES ─────────────────────────────────────────────────── */
.sp-toc { max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:32px; }
.sp-toc-row { border-bottom:1px solid var(--bd); padding-bottom:28px; }
.sp-toc-row:last-child { border-bottom:none; padding-bottom:0; }
.sp-toc-cat-line { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.sp-toc-num { font-size:1.1rem; font-weight:800; color:var(--tx3); min-width:24px; }
.sp-toc-cat-icon { font-size:25px; color:var(--cat-c); flex-shrink:0; }
.sp-toc-cat-name { font-size:1.1rem; font-weight:800; color:var(--tx1); text-decoration:none; flex:1; -webkit-transition:color .2s; transition:color .2s; }
.sp-toc-cat-name:hover { color:var(--cat-c); }
.sp-toc-cat-count { font-size:.75rem; font-weight:600; color:#fff; background:var(--cat-c); border:none; border-radius:999px; padding:2px 10px; flex-shrink:0; }
.sp-toc-articles { list-style:none; padding:0 0 0 34px; margin:0; display:flex; flex-direction:column; gap:2px; }
.sp-toc-articles li { display:flex; align-items:center; border-radius:var(--r-sm); -webkit-transition:background .2s ease; transition:background .2s ease; }
.sp-toc-articles li:hover { background:#f1f5f9; }
.sp-toc-art-link { font-size:15px; color:var(--tx2); text-decoration:none; padding:5px 8px; display:flex; align-items:center; gap:8px; width:100%; -webkit-transition:color .2s ease; transition:color .2s ease; }
.sp-toc-art-link .sp-toc-bullet { width:9px; height:9px; border-radius:50%; background:#94a3b8; flex-shrink:0; display:inline-block; -webkit-transition:opacity .15s; transition:opacity .15s; }
.sp-toc-art-link .sp-toc-arrow { display:none; flex-shrink:0; color:#e11d48; font-size:13px; line-height:1; }
.sp-toc-art-link:hover { color:#e11d48; text-decoration:none; }
.sp-toc-art-link:hover .sp-toc-bullet { display:none; }
.sp-toc-art-link:hover .sp-toc-arrow { display:inline-flex; align-items:center; }
@media(max-width:600px) { .sp-toc-articles { margin-left:20px; } }

/* ── Bouton retour au site (nav support) ── */
.sp-nav-right{display:flex;align-items:center;gap:14px}
.sp-nav-back{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:var(--r-sm);border:1px solid var(--bd);background:rgba(30,63,168,.06);color:var(--tx2);font-size:13px;font-weight:600;text-decoration:none;transition:border-color .2s ease,color .2s ease,background .2s ease;white-space:nowrap}
.sp-nav-back:hover{border-color:var(--blue);color:var(--blue);background:rgba(30,63,168,.14)}
.sp-nav-back i{font-size:22px}
.sp-nav-login{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:var(--r-sm);border:1px solid var(--blue);background:var(--blue);color:#fff;font-size:13px;font-weight:600;text-decoration:none;transition:filter .2s ease;white-space:nowrap}
.sp-nav-login:hover{filter:brightness(.92)}
.sp-nav-login i{font-size:22px}
@media(max-width:700px){.sp-nav-back span{display:none}.sp-nav-back{padding:4px 9px}}
@media(max-width:500px){.sp-nav-right{gap:8px}.sp-nav-login span{display:none}.sp-nav-login{padding:4px 9px}}

/* ── Animation du logo (identique au frontend) ── */
@keyframes mcdz-heartbeat{
   0%,100%{transform:scale(1)}
   8%{transform:scale(1.12)}
   16%{transform:scale(1)}
   24%{transform:scale(1.07)}
   40%{transform:scale(1)}
}