/* WealthWise — en-tête de site unifié (partagé sur toutes les pages). Pleine largeur : logo A GAUCHE, liens CENTRES, actions A DROITE (grille 3 zones). Namespacé .ww-nav ; chargé en fin de + specificité/!important => gagne sur n'importe quelle feuille inline de page. */ html, body{ overflow-x:hidden; overflow-x:clip; } .ww-nav{ position:sticky !important; top:0 !important; z-index:9000 !important; background:rgba(10,10,20,.72) !important; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid rgba(79,142,247,.16) !important; /* FULL-BLEED. Les pages d'article capent le à ~760px (style inline) → l'en-tête restait confiné/centré. On le sort du flux contraint pour qu'il prenne TOUTE la largeur du viewport (logo à l'extrême gauche). No-op sur les pages déjà pleine largeur (50% ≈ 50vw → marge ≈ 0). */ margin:0 calc(50% - 50vw) !important; padding:0 !important; width:100vw !important; font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important; line-height:1.4 !important; box-sizing:border-box; } .ww-nav *{box-sizing:border-box;} /* barre = pleine largeur (aucun max-width), padding lateral serré => prend tout l'espace */ .ww-nav-in{ display:grid !important; grid-template-columns:1fr auto 1fr; align-items:center; width:100% !important; max-width:none !important; margin:0 !important; padding:10px clamp(18px,2.4vw,40px) !important; gap:18px; min-height:60px; } /* --- zone 1 : logo, colle a gauche --- */ .ww-nav .ww-logo{ grid-column:1; justify-self:start; display:inline-flex !important; align-items:center; gap:0; font-weight:800 !important; font-size:19px !important; letter-spacing:-.4px; color:#f0f4ff !important; text-decoration:none !important; white-space:nowrap; } .ww-nav .ww-logo img{width:26px !important;height:26px !important;object-fit:contain;margin-right:9px;flex:none;border-radius:0;background:none;padding:0;} .ww-nav .ww-logo span{color:#22d3ee !important;} /* --- zone 2 : liens, centres dans la barre --- */ .ww-nav .ww-links{ grid-column:2; justify-self:center; display:flex !important; align-items:center; gap:28px; margin:0 !important; padding:0 !important; position:static !important; background:none !important; border:none !important; box-shadow:none !important; list-style:none; } .ww-nav .ww-links > a{ color:#9aa5c4 !important; font-size:14.5px !important; font-weight:600 !important; text-decoration:none !important; padding:0 !important; border:none !important; background:none !important; transition:color .15s; white-space:nowrap; letter-spacing:0; } .ww-nav .ww-links > a:hover,.ww-nav .ww-links > a[aria-current="page"]{color:#22d3ee !important;} /* --- zone 3 : actions, collent a droite --- */ .ww-nav .ww-actions{ grid-column:3; justify-self:end; display:inline-flex !important; align-items:center; gap:12px; margin:0 !important; } .ww-nav .ww-lang{ display:inline-flex !important; align-items:center; gap:6px; color:#9aa5c4 !important; font-size:13px !important; font-weight:600 !important; text-decoration:none !important; padding:7px 12px !important; border:1px solid rgba(148,163,184,.28) !important; border-radius:9px !important; background:none !important; transition:color .15s,border-color .15s; white-space:nowrap; } .ww-nav .ww-lang::before{ content:""; width:13px; height:13px; flex:none; background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%239aa5c4' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E"); } .ww-nav .ww-lang:hover{color:#fff !important;border-color:rgba(148,163,184,.55) !important;} .ww-nav .ww-signin{ color:#9aa5c4 !important; font-size:13px !important; font-weight:600 !important; text-decoration:none !important; padding:8px 14px !important; border:1px solid rgba(148,163,184,.28) !important; border-radius:9px !important; background:none !important; transition:color .15s,border-color .15s; white-space:nowrap; } .ww-nav .ww-signin:hover{color:#fff !important;border-color:rgba(148,163,184,.55) !important;} .ww-nav .ww-cta{ background:linear-gradient(135deg,#22d3ee,#3b82f6) !important; color:#04140d !important; font-size:13px !important; font-weight:800 !important; text-decoration:none !important; padding:9px 18px !important; border:none !important; border-radius:9px !important; white-space:nowrap; box-shadow:0 6px 18px rgba(34,211,238,.25); transition:transform .15s,box-shadow .15s; } .ww-nav .ww-cta:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(34,211,238,.38);} /* checkbox cachee mais interactive (le label la bascule) */ .ww-nav .ww-nav-cb{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0;opacity:0;} .ww-nav .ww-burger{ display:none; flex:none; width:40px; height:36px; border:1px solid rgba(148,163,184,.28); border-radius:9px; cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:4px; background:none; } .ww-nav .ww-burger span{display:block;width:18px;height:2px;background:#cbd5e1;border-radius:2px;transition:.2s;} /* ===== Responsive : sous 900px => logo + hamburger, menu deroulant en dessous ===== */ @media (max-width:900px){ .ww-nav-in{display:flex !important; flex-wrap:wrap; align-items:center; gap:0; padding:10px clamp(16px,4vw,24px) !important;} .ww-nav .ww-logo{order:1;} .ww-nav .ww-burger{display:inline-flex; order:2; margin-left:auto;} .ww-nav .ww-links{ order:3; flex-basis:100%; width:100%; flex-direction:column !important; align-items:stretch !important; justify-self:stretch; gap:0; max-height:0; overflow:hidden; opacity:0; pointer-events:none; transition:max-height .25s ease,opacity .2s ease; } .ww-nav .ww-actions{ order:4; flex-basis:100%; width:100%; justify-self:stretch; flex-wrap:wrap; gap:10px; max-height:0; overflow:hidden; opacity:0; pointer-events:none; transition:max-height .25s ease,opacity .2s ease; } .ww-nav .ww-nav-cb:checked ~ .ww-links{max-height:70vh;opacity:1;pointer-events:auto;overflow:auto;padding:6px 0 2px;} .ww-nav .ww-nav-cb:checked ~ .ww-actions{max-height:40vh;opacity:1;pointer-events:auto;padding:10px 0 12px;} .ww-nav .ww-links > a{padding:13px clamp(16px,4vw,24px) !important;font-size:15px !important;} .ww-nav .ww-actions{padding-left:clamp(16px,4vw,24px);padding-right:clamp(16px,4vw,24px);} .ww-nav .ww-nav-cb:checked ~ .ww-burger span:nth-child(1){transform:translateY(6px) rotate(45deg);} .ww-nav .ww-nav-cb:checked ~ .ww-burger span:nth-child(2){opacity:0;} .ww-nav .ww-nav-cb:checked ~ .ww-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg);} } @media (max-width:420px){ .ww-nav .ww-logo{font-size:17px !important;} } /* =================================================================== CONTENU PLEINE LARGEUR — RÈGLE PERMANENTE : JAMAIS de colonne étroite centrée. Le contenu prend toute la largeur, aligné sur l'en-tête (plafond généreux pour rester sain sur écran 4K). =================================================================== */ main, article, body > .container, body > .content, body > .page, body > .page-wrap{ max-width:2400px !important; width:100% !important; margin-left:auto !important; margin-right:auto !important; padding-left:clamp(18px,2.4vw,40px) !important; padding-right:clamp(18px,2.4vw,40px) !important; box-sizing:border-box !important; } /* grilles de cartes -> responsives : ajoutent des colonnes pour remplir la largeur */ .card-grid, .post-grid, .terms-grid, main .grid, .tool-grid, .calc-grid{ grid-template-columns:repeat(auto-fill,minmax(280px,1fr)) !important; max-width:none !important; width:auto !important; } /* tarifs : 3 offres qui s'étirent pour remplir (pas 3 petites cartes collées à gauche) */ .plans{grid-template-columns:repeat(3,1fr) !important; max-width:1180px !important; margin-left:auto !important; margin-right:auto !important;} @media (max-width:820px){ .plans{grid-template-columns:1fr !important;} } /* =================================================================== VISUELS D'ARTICLE réutilisables (tableaux, barres, comparaisons, grilles de décision) — pour aérer les longs textes. Palette article sombre/cyan. S'utilisent avec les classes .ww-viz / .ww-table / etc. =================================================================== */ .ww-viz{margin:1.9rem 0;max-width:900px;} .ww-viz-cap{font-size:.82rem;color:#8a93b0;margin:.55rem 0 0;line-height:1.5;} .ww-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px;} .ww-table{width:100%;border-collapse:collapse;font-size:14.5px;background:#0f172a;border:1px solid #1e293b;border-radius:12px;overflow:hidden;} .ww-table th,.ww-table td{padding:12px 14px;text-align:left;border-bottom:1px solid #1e293b;vertical-align:top;line-height:1.5;} .ww-table thead th{background:rgba(34,211,238,.08);color:#e2e8f0;font-weight:800;font-size:13px;} .ww-table tbody tr:last-child td{border-bottom:none;} .ww-table td:first-child,.ww-table th:first-child{color:#94a3b8;font-weight:700;white-space:nowrap;} .ww-table td strong{color:#e2e8f0;} .ww-table .pos{color:#4dffd6;font-weight:700;} .ww-table .neg{color:#ff6b7a;font-weight:700;} .ww-statcard{background:#0f172a;border:1px solid #1e293b;border-radius:12px;padding:18px 20px;} .ww-statcard h4{margin:0 0 14px;font-size:12.5px;text-transform:uppercase;letter-spacing:.6px;color:#8a93b0;font-weight:800;} .ww-bar{display:flex;height:40px;border-radius:8px;overflow:hidden;font-weight:800;font-size:13.5px;} .ww-bar > span{display:flex;align-items:center;padding:0 12px;white-space:nowrap;} .ww-bar .a{background:linear-gradient(135deg,#22d3ee,#3b82f6);color:#04140d;} .ww-bar .b{background:#334155;color:#cbd5e1;justify-content:flex-end;} .ww-legend{display:flex;gap:18px;margin-top:12px;font-size:13px;color:#94a3b8;flex-wrap:wrap;} .ww-legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:middle;} .ww-statbig{display:flex;gap:22px;flex-wrap:wrap;margin-top:16px;} .ww-statbig .s{flex:1;min-width:130px;} .ww-statbig .s b{display:block;font-size:26px;font-weight:900;color:#22d3ee;letter-spacing:-.5px;} .ww-statbig .s span{font-size:12.5px;color:#8a93b0;line-height:1.4;display:block;margin-top:2px;} .ww-decide{display:grid;grid-template-columns:1fr 1fr;gap:14px;} @media(max-width:640px){.ww-decide{grid-template-columns:1fr;}} .ww-decide .col{background:#0f172a;border:1px solid #1e293b;border-radius:12px;padding:16px 18px;} .ww-decide .col h4{margin:0 0 8px;font-size:15px;font-weight:800;display:flex;align-items:center;gap:8px;} .ww-decide .col.a h4,.ww-decide .col.lump h4{color:#22d3ee;} .ww-decide .col.b h4,.ww-decide .col.dca h4{color:#4dffd6;} .ww-decide ul{margin:0;padding:0;list-style:none;} .ww-decide li{padding:8px 0 8px 24px;position:relative;font-size:14px;color:#cbd5e1;line-height:1.55;border-top:1px solid #1e293b;} .ww-decide li:first-child{border-top:none;} .ww-decide li::before{content:"✓";position:absolute;left:0;top:8px;font-weight:800;} .ww-decide .col.a li::before,.ww-decide .col.lump li::before{color:#22d3ee;} .ww-decide .col.b li::before,.ww-decide .col.dca li::before{color:#4dffd6;}