[data-page=article]{line-height:1.7}[data-page=article] *{box-sizing:border-box;margin:0;padding:0}[data-page=article] html{scroll-behavior:smooth}[data-page=article] body{font-family:var(--font-body);color:var(--noir);background:var(--bleu-pale);line-height:1.7;overflow-x:hidden}[data-page=article] .nav{z-index:100;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:2px solid var(--bleu-intense);background:#fbd8ece6;justify-content:space-between;align-items:center;padding:1.2rem 3rem;display:flex;position:fixed;top:0;left:0;right:0}[data-page=article] .logo{align-items:center;text-decoration:none;transition:transform .3s;display:flex}[data-page=article] .logo:hover{transform:scale(1.03)}[data-page=article] .logo-img{object-fit:contain;border-radius:30%;width:110px;height:110px;margin:-20px 0;display:block;position:relative}[data-page=article] .nav-links{align-items:center;gap:2.2rem;list-style:none;display:flex}[data-page=article] .nav-links a{color:var(--bleu-intense);font-size:.95rem;font-weight:500;text-decoration:none;transition:color .3s;position:relative}[data-page=article] .nav-links a.active{color:var(--orange-vif);font-weight:600}[data-page=article] .nav-links a:after{content:"";background:var(--orange-vif);transform-origin:0;height:2px;transition:transform .3s;position:absolute;bottom:-4px;left:0;right:0;transform:scaleX(0)}[data-page=article] .nav-links a:hover:after,[data-page=article] .nav-links a.active:after{transform:scaleX(1)}[data-page=article] .nav-cta{background:var(--orange-vif);border-radius:999px;padding:.7rem 1.4rem;font-weight:600;color:var(--blanc)!important}[data-page=article] .nav-cta:after{display:none}[data-page=article] .burger{cursor:pointer;background:0 0;border:none;flex-direction:column;gap:5px;padding:.5rem;display:none}[data-page=article] .burger span{background:var(--bleu-intense);border-radius:2px;width:26px;height:3px;display:block}[data-page=article] .article-header{background:var(--bleu-vert-pastel);text-align:center;border-bottom:3px solid var(--noir);padding:9rem 2rem 3rem;position:relative}[data-page=article] .breadcrumb{color:var(--noir);opacity:.7;margin-bottom:1rem;font-size:.9rem}[data-page=article] .breadcrumb a{color:var(--bleu-intense);font-weight:500;text-decoration:none}[data-page=article] .breadcrumb a:hover{text-decoration:underline}[data-page=article] .article-tag{background:var(--orange-vif);color:var(--blanc);text-transform:uppercase;letter-spacing:.05em;border:2px solid var(--noir);border-radius:999px;margin-bottom:1.5rem;padding:.4rem 1rem;font-size:.8rem;font-weight:700;display:inline-block}[data-page=article] .article-title{font-family:var(--font-display);letter-spacing:-.02em;color:var(--bleu-intense);max-width:800px;margin:0 auto 1.5rem;font-size:clamp(2.2rem,5vw,4rem);font-weight:900;line-height:1}[data-page=article] .article-meta{color:var(--noir);opacity:.8;flex-wrap:wrap;justify-content:center;gap:1.5rem;font-size:.9rem;display:flex}[data-page=article] .article-meta span:before{content:"✦";color:var(--orange-vif);margin-right:.4rem}[data-page=article] .article-body{counter-reset:step;max-width:720px;margin:4rem auto;padding:0 2rem}[data-page=article] .article-cover{aspect-ratio:16/9;border:3px solid var(--noir);width:100%;box-shadow:8px 8px 0 var(--orange-vif);background:linear-gradient(135deg,#98e1e6 0%,#3938fe 100%);border-radius:24px;justify-content:center;align-items:center;margin-bottom:3rem;font-size:6rem;display:flex}[data-page=article] .article-body p{color:var(--noir);margin-bottom:1.5rem;font-size:1.1rem}[data-page=article] .article-body h2{font-family:var(--font-display);color:var(--bleu-intense);letter-spacing:-.02em;margin:3rem 0 1rem;font-size:2rem;font-weight:900}[data-page=article] .article-body h3{font-family:var(--font-display);color:var(--orange-vif);margin:2rem 0 .8rem;font-size:1.4rem;font-weight:700}[data-page=article] .article-body strong{color:var(--bleu-intense)}[data-page=article] .article-body ul,[data-page=article] .article-body ol{margin:1rem 0 1.5rem;padding-left:2rem}[data-page=article] .article-body li{margin-bottom:.5rem;font-size:1.1rem}[data-page=article] .article-body li::marker{color:var(--bleu-intense)}[data-page=article] .step-block{background:var(--blanc);border:3px solid var(--noir);box-shadow:5px 5px 0 var(--rose-pastel);counter-increment:step;border-radius:20px;margin:2.5rem 0 2rem;padding:2rem;position:relative}[data-page=article] .step-block-num{background:var(--orange-vif);color:var(--blanc);border:3px solid var(--noir);width:50px;height:50px;font-family:var(--font-display);border-radius:50%;justify-content:center;align-items:center;font-size:1.3rem;font-weight:900;display:flex;position:absolute;top:-20px;left:20px}[data-page=article] .step-block:not(:has(.step-block-num)):before{background:var(--orange-vif);color:var(--blanc);border:3px solid var(--noir);width:50px;height:50px;font-family:var(--font-display);border-radius:50%;justify-content:center;align-items:center;font-size:1.3rem;font-weight:900;display:flex;position:absolute;top:-20px;left:20px}[data-page=article] .step-block:not(:has(.step-block-num)):before{content:counter(step)}[data-page=article] .step-block h3{color:var(--bleu-intense);margin-top:1.75rem}[data-page=article] .tip-box{background:var(--jaune-pastel);border:3px solid var(--noir);border-radius:20px;align-items:flex-start;gap:1rem;margin:2rem 0;padding:1.5rem;display:flex}[data-page=article] .tip-box:before{content:"💡";flex-shrink:0;font-size:2rem}[data-page=article] .tip-box p{margin:0;font-size:1rem}[data-page=article] .article-cta{background:var(--bleu-intense);color:var(--blanc);text-align:center;border-top:3px solid var(--noir);border-bottom:3px solid var(--noir);margin-top:4rem;padding:4rem 2rem}[data-page=article] .article-cta h2{font-family:var(--font-display);margin-bottom:1rem;font-size:clamp(2rem,4vw,3rem);font-weight:900}[data-page=article] .article-cta h2 .accent{color:var(--jaune-pastel);font-style:italic;font-weight:400}[data-page=article] .article-cta p{opacity:.9;max-width:500px;margin:0 auto 2rem}[data-page=article] .btn{background:var(--orange-vif);color:var(--blanc);border:3px solid var(--noir);border-radius:999px;padding:1rem 2rem;font-weight:600;text-decoration:none;transition:transform .3s;display:inline-flex}[data-page=article] .btn:hover{transform:translateY(-3px)}[data-page=article] .article-erreur{text-align:center;padding:2rem 0 1rem}[data-page=article] .article-erreur-emoji{margin-bottom:1.5rem;font-size:5rem;line-height:1;animation:3s ease-in-out infinite erreur-flotte}[data-page=article] .article-erreur p{opacity:.85;max-width:460px;margin:0 auto 2rem;font-size:1.15rem}[data-page=article] .article-erreur-actions{flex-wrap:wrap;justify-content:center;gap:1rem;display:flex}[data-page=article] .article-erreur-lien{color:var(--bleu-intense);border:3px solid var(--bleu-intense);cursor:pointer;font-weight:600;font-family:var(--font-body);background:0 0;border-radius:999px;align-items:center;padding:1rem 2rem;font-size:1rem;text-decoration:none;transition:transform .3s;display:inline-flex}[data-page=article] .article-erreur-lien:hover{transform:translateY(-3px)}[data-page=article] .footer{background:var(--bleu-intense);color:var(--blanc);text-align:center;padding:3rem 3rem 2rem}[data-page=article] .footer h3{font-family:var(--font-display);margin-bottom:1rem;font-size:1.5rem;font-weight:900}[data-page=article] .footer-links{flex-wrap:wrap;justify-content:center;gap:2rem;margin:1.5rem 0;display:flex}[data-page=article] .footer-links a{color:var(--blanc);opacity:.85;font-size:.95rem;text-decoration:none}[data-page=article] .footer-links a:hover{opacity:1;color:var(--jaune-pastel)}[data-page=article] .footer-bottom{opacity:.7;border-top:1px solid #fff3;padding-top:1.5rem;font-size:.85rem}@media (max-width:968px){[data-page=article] .nav{padding:1rem 1.5rem}[data-page=article] .logo-img{width:52px;height:52px}[data-page=article] .nav-links{display:none}[data-page=article] .burger{display:flex}[data-page=article] .article-header{padding:7rem 1.5rem 2rem}}
