@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
/* nav.css — barre de navigation + méga menu, SOURCE UNIQUE (identique sur toutes les pages).
   Autonome : valeurs hex en dur (ne dépend pas des :root de chaque page, ne les pollue pas).
   Chargé APRÈS le <style> inline des pages pour l'emporter. Markup = drujok_nav() (functions.php). */
nav{position:sticky;top:0;z-index:50;background-color:rgba(28,42,77,.92);background-image:radial-gradient(rgba(150,180,235,.09) 1px,transparent 1px);background-size:22px 22px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.09)}
nav .row{display:flex;align-items:center;justify-content:space-between;padding:16px 0;gap:24px}
nav .brand{display:flex;align-items:center;gap:14px;text-decoration:none}
nav .brand .mark{width:56px;height:56px;border-radius:15px;background:linear-gradient(135deg,#3a67ad,#22426a);display:flex;align-items:center;justify-content:center;flex:none}
nav .brand .mark svg{width:31px;height:31px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
nav .brand .t{line-height:1}
nav .brand .t b{font-family:'Space Grotesk','Barlow Condensed',sans-serif;font-weight:700;font-size:27px;letter-spacing:.02em;display:block;color:#fff}
nav .brand .t span{font-family:'Space Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#f0a878}
nav .nav-links{display:flex;align-items:center;gap:32px}
nav .nav-links a.l{font-size:14.5px;font-weight:600;color:#c5d0e6;text-decoration:none;text-transform:uppercase;letter-spacing:.06em}
nav .nav-links a.l:hover{color:#fff}
nav .nav-login{font-size:14.5px;font-weight:600;color:#fff;text-decoration:none;text-transform:uppercase;letter-spacing:.06em}
nav .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:#2f5aa0;color:#fff;font-weight:700;font-size:14.5px;text-transform:uppercase;letter-spacing:.05em;padding:14px 26px;border-radius:12px;border:none;cursor:pointer;text-decoration:none;box-shadow:0 10px 24px rgba(47,90,160,.30);transition:transform .15s,box-shadow .15s}
nav .btn:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(47,90,160,.36)}
.has-mega{position:relative;padding-bottom:4px}
.has-mega .trigger{display:inline-flex;align-items:center;gap:7px;font-size:14.5px;font-weight:600;color:#c5d0e6;cursor:default;text-transform:uppercase;letter-spacing:.06em}
.has-mega:hover .trigger{color:#fff}
.has-mega .trigger .caret{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.has-mega:hover .trigger .caret{transform:rotate(180deg)}
.mega{position:absolute;top:calc(100% + 14px);right:0;background:#fff;border:1px solid #e6e9f2;border-radius:18px;box-shadow:0 30px 70px rgba(20,40,80,.16);padding:14px;width:560px;max-width:calc(100vw - 40px);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .18s,transform .18s;z-index:60}
.has-mega:hover .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
@media(max-width:600px){.mega-grid{grid-template-columns:1fr}}
.mega-item{display:flex;gap:13px;padding:14px;border-radius:12px;text-decoration:none}
.mega-item.on{cursor:pointer;transition:background .15s}
.mega-item.on:hover{background:#f4f6fb}
.mega-item .mi{width:42px;height:42px;border-radius:11px;background:#e9eef8;display:flex;align-items:center;justify-content:center;flex:none}
.mega-item .mi svg{width:21px;height:21px;stroke:#2f5aa0;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mega-item .mt b{display:flex;align-items:center;gap:8px;font-family:'Barlow Condensed',sans-serif;font-size:15px;color:#111f38}
.mega-item .mt p{margin:3px 0 0;font-size:12.5px;color:#8792ab;line-height:1.45}
.mega-item.off{cursor:not-allowed}.mega-item.off .mi{background:#f0f2f7}.mega-item.off .mi svg{stroke:#b6bece}.mega-item.off .mt b{color:#aab2c2}.mega-item.off .mt p{color:#c2c8d4}
.soon{font-family:'Space Mono',monospace;font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#98a1b3;background:#eef0f5;border:1px solid #e2e5ee;padding:2px 7px;border-radius:999px}
/* méga-menu « Apprendre le SEO » (thèmes + grandes tuiles promo façon lead magnets) */
.mega.mega-learn{position:fixed;top:82px;left:50%;right:auto;width:min(1300px,calc(100vw - 48px));transform:translateX(-50%) translateY(8px)}
.has-mega:hover .mega.mega-learn{transform:translateX(-50%) translateY(0)}
.mega.mega-learn::before{top:-20px;height:20px}
.mega-cols{display:grid;grid-template-columns:244px 1fr;gap:0;align-items:stretch}
@media(max-width:760px){.mega-cols{grid-template-columns:1fr}}
.mega-topics{display:flex;flex-direction:column;gap:1px;border-right:1px solid #eaedf4;padding-right:14px}
.mega-topics a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 12px;border-radius:9px;font-size:14px;font-weight:600;color:#5a6785;text-decoration:none;transition:background .12s,color .12s}
.mega-topics a:hover{background:#f4f6fb;color:#2f5aa0}
.mega-topics a.all{color:#2f5aa0}
.mega-topics a.cur{color:#2f5aa0;background:#f4f6fb}
.mega-topics a svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:.55}
.mega-topics a.cur svg,.mega-topics a.all svg{opacity:1}
.mega-promos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;border-left:1px solid #e6e9f2;padding-left:20px}
.mpromo{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:340px;padding:20px 17px;border-radius:16px;color:#fff;text-decoration:none;transition:transform .16s,box-shadow .16s}
.mpromo::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px);background-size:13px 13px;opacity:.5;pointer-events:none}
.mpromo:hover{transform:translateY(-3px);box-shadow:0 20px 42px rgba(20,40,80,.30)}
.mpromo .ptxt{position:relative;z-index:2}
.mpromo .pk{display:block;font-family:'Space Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.85;margin-bottom:10px}
.mpromo .ptxt b{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:32px;line-height:.98;text-transform:uppercase;letter-spacing:.005em}
.mpromo .psub{display:block;font-size:13.5px;opacity:.92;line-height:1.45;margin-top:11px}
.mpromo .pcta{position:relative;z-index:2;align-self:flex-start;margin-top:20px;font-size:14px;font-weight:700;background:#fff;color:#17233f;padding:12px 20px;border-radius:10px;box-shadow:0 6px 16px rgba(0,0,0,.16)}
.mpromo .part{position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:90%;z-index:1;opacity:.96;pointer-events:none}
.mpromo .part svg{width:100%;height:auto;display:block}
.mpromo.m1{background:linear-gradient(155deg,#26407c,#0e1730)}
.mpromo.m2{background:linear-gradient(155deg,#e6813f,#c94f22)}
.mpromo.m3{background:linear-gradient(155deg,#3a67ad,#1f3c63)}
@media(max-width:760px){.mega-promos{grid-template-columns:1fr;padding-left:0;border-left:none;border-top:1px solid #e6e9f2;padding-top:14px;margin-top:4px}.mpromo{min-height:150px}}
/* méga « Apprendre le SEO » — panneau d'articles au survol de chaque thème (façon hub SL) */
.mega-stage{position:relative;padding-left:22px;min-height:360px}
.mpanel{position:absolute;left:22px;right:2px;top:0;bottom:0;background:#fff;display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .18s ease,visibility 0s linear .18s}
/* état par défaut du stage = 3 tuiles promo (façon SL), tant qu'aucun thème n'est survolé.
   Gated derrière .has-mega:hover : sinon, en position:fixed, il recouvrirait le hero
   et déclencherait l'ouverture du méga au survol de la page. */
.mstage-default{position:absolute;left:22px;right:2px;top:0;bottom:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;opacity:0;visibility:hidden;z-index:1}
.has-mega:hover .mega-stage .mstage-default{opacity:1;visibility:visible}
.mega-cols:has(.mcat:hover) .mstage-default{opacity:0;visibility:hidden}
.mstage-default .mpromo{min-height:0}
.mega-stage .mpanel:hover{opacity:1;visibility:visible;z-index:3;transition:opacity .18s ease,visibility 0s}
.mpanel-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:2px 0 14px;padding-bottom:12px;border-bottom:1px solid #eef1f7}
.mpanel-head b{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:20px;line-height:1;color:#111f38;text-transform:uppercase;letter-spacing:.01em}
.mpanel-head a{font-family:'Space Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#2f5aa0;text-decoration:none;white-space:nowrap}
.mpanel-head a:hover{color:#1c3f75}
.mpanel-arts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.marum{display:flex;gap:12px;align-items:center;text-decoration:none;border-radius:12px;padding:8px;transition:background .14s}
.marum:hover{background:#f4f6fb}
.mthumb{width:110px;height:68px;border-radius:9px;overflow:hidden;flex:none;background:linear-gradient(135deg,#e9eef8,#d7e0f1)}
.mthumb img{width:100%;height:100%;object-fit:cover;display:block}
.mtt{font-size:13px;font-weight:600;line-height:1.34;color:#26324c;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.marum:hover .mtt{color:#1c3f75}
.mpanel-empty{font-size:14px;color:#8792ab;padding:16px 4px;line-height:1.5}
/* encart lead magnet (colonne droite persistante) → bibliothèque de templates /ressources */
.mega-lead{position:relative;overflow:hidden;display:flex;flex-direction:column;margin-left:22px;border-radius:16px;padding:22px 20px;color:#fff;text-decoration:none;background:linear-gradient(160deg,#e6813f,#c74a1f);transition:transform .16s,box-shadow .16s}
.mega-lead::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px);background-size:13px 13px;opacity:.5;pointer-events:none}
.mega-lead:hover{transform:translateY(-2px);box-shadow:0 20px 42px rgba(180,70,25,.34)}
.mega-lead>span{position:relative;z-index:2}
.ml-k{font-family:'Space Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;opacity:.92;margin-bottom:11px}
.ml-t{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:28px;line-height:.98;text-transform:uppercase;letter-spacing:.005em}
.ml-s{font-size:12.8px;line-height:1.5;opacity:.95;margin-top:11px}
.ml-cta{align-self:flex-start;margin-top:17px;font-size:13.5px;font-weight:700;background:#fff;color:#17233f;padding:11px 18px;border-radius:10px;box-shadow:0 6px 16px rgba(0,0,0,.16)}
.ml-art{margin-top:auto;padding-top:18px}
.ml-art svg{width:100%;height:auto;display:block}
@media(max-width:760px){.mega-lead{margin-left:0;margin-top:12px}}
/* Survol d'un thème → affiche son panneau (par-dessus le panneau par défaut) */
.mega-cols:has(.mcat[data-k="bases"]:hover) .mpanel[data-k="bases"],
.mega-cols:has(.mcat[data-k="mots-cles"]:hover) .mpanel[data-k="mots-cles"],
.mega-cols:has(.mcat[data-k="audit"]:hover) .mpanel[data-k="audit"],
.mega-cols:has(.mcat[data-k="technique"]:hover) .mpanel[data-k="technique"],
.mega-cols:has(.mcat[data-k="contenu"]:hover) .mpanel[data-k="contenu"],
.mega-cols:has(.mcat[data-k="netlinking"]:hover) .mpanel[data-k="netlinking"],
.mega-cols:has(.mcat[data-k="outils"]:hover) .mpanel[data-k="outils"],
.mega-cols:has(.mcat[data-k="local"]:hover) .mpanel[data-k="local"],
.mega-cols:has(.mcat[data-k="ecommerce"]:hover) .mpanel[data-k="ecommerce"],
.mega-cols:has(.mcat[data-k="etudes-de-cas"]:hover) .mpanel[data-k="etudes-de-cas"],
.mega-cols:has(.mcat[data-k="chine"]:hover) .mpanel[data-k="chine"]{opacity:1;visibility:visible;z-index:3;transition:opacity .18s ease,visibility 0s}
@media(max-width:980px){nav .nav-links a.l,nav .nav-login,.has-mega{display:none}}