/* ============================================================ LA CARTE BANCAIRE — système de design Palette : bleu nuit (l'écran bancaire) + vert CB (l'accord) + ambre (le haut de gamme) + brique (le coût) Type : Familjen Grotesk (titres) / Public Sans (texte) / JetBrains Mono (chiffres = numéros embossés) Module : la carte elle-même, ratio 1.586, coins r = 6% de la hauteur ============================================================ */ /* ------------------------------------------------------------ POLICES — auto-hébergées. La maquette les appelait chez Google Fonts. Le brief l'interdit, et une requête vers un domaine tiers coûterait deux allers-retours DNS et TLS avant le premier caractère. Fichiers variables : une famille par fichier, toutes les graisses. 119 Ko au total contre 395 en versions statiques. font-display:swap — le texte s'affiche immédiatement dans la police système, puis bascule. Le plus grand élément peint reste donc du texte rendu sans attendre le réseau. ------------------------------------------------------------ */ @font-face{ font-family:"Familjen Grotesk"; font-style:normal; font-weight:600 700; font-display:swap; src:url("../fonts/familjen-grotesk-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:"Familjen Grotesk"; font-style:normal; font-weight:600 700; font-display:swap; src:url("../fonts/familjen-grotesk-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:"JetBrains Mono"; font-style:normal; font-weight:400 700; font-display:swap; src:url("../fonts/jetbrains-mono-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:"JetBrains Mono"; font-style:normal; font-weight:400 700; font-display:swap; src:url("../fonts/jetbrains-mono-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:"Public Sans"; font-style:normal; font-weight:400 700; font-display:swap; src:url("../fonts/public-sans-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:"Public Sans"; font-style:normal; font-weight:400 700; font-display:swap; src:url("../fonts/public-sans-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root{ --nuit:#0F1E2D; --nuit-2:#16293C; --nuit-3:#1F3A52; --ardoise:#5B6D7D; --ardoise-clair:#8A9AA8; --papier:#EDF1F4; --papier-2:#E2E8ED; --blanc:#FFFFFF; --cb:#0B7D5E; --cb-clair:#12A87D; --cb-pale:#E4F3EE; --ambre:#E3A93C; --ambre-pale:#FBF1DE; --brique:#B3402F; --brique-pale:#FAE9E6; --trait:rgba(15,30,45,.12); --trait-fort:rgba(15,30,45,.22); --ombre:0 1px 2px rgba(15,30,45,.06), 0 8px 24px -12px rgba(15,30,45,.18); --ombre-forte:0 2px 4px rgba(15,30,45,.08), 0 24px 48px -20px rgba(15,30,45,.35); --r:14px; --max:1180px; --pad:clamp(18px,4vw,40px); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--papier); color:var(--nuit); font-family:"Public Sans",system-ui,sans-serif; font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{font-family:"Familjen Grotesk",system-ui,sans-serif; font-weight:700; line-height:1.08; letter-spacing:-.02em; margin:0} h1{font-size:clamp(2.3rem,5.2vw,4rem)} h2{font-size:clamp(1.6rem,3vw,2.4rem)} h3{font-size:1.22rem; letter-spacing:-.01em} p{margin:0 0 1rem} a{color:inherit} img{max-width:100%} button{font:inherit; cursor:pointer} :focus-visible{outline:3px solid var(--cb-clair); outline-offset:3px; border-radius:4px} @media(prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} html{scroll-behavior:auto} } .wrap{max-width:var(--max); margin:0 auto; padding-inline:var(--pad)} .mono{font-family:"JetBrains Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums} .eyebrow{ font-family:"JetBrains Mono",monospace; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cb); margin:0 0 14px; display:block; } .lede{font-size:1.12rem; color:var(--ardoise); max-width:56ch} /* ---------- objet CARTE (élément signature) ---------- */ .cbcard{ position:relative; aspect-ratio:1.586/1; width:100%; border-radius:6.2%/9.8%; padding:7% 8%; display:flex; flex-direction:column; justify-content:space-between; color:#fff; box-shadow:var(--ombre-forte); overflow:hidden; isolation:isolate; background:linear-gradient(145deg,var(--nuit-3),var(--nuit) 70%); } .cbcard::after{ /* reflet */ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.14) 46%,transparent 58%); } .cbcard--gold{background:linear-gradient(145deg,#F0C978,#C98B27 55%,#8E6015)} .cbcard--mint{background:linear-gradient(145deg,#17B78A,#0B7D5E 60%,#075440)} .cbcard--metal{background:linear-gradient(145deg,#8E9AA3,#3E4B55 55%,#232C33)} .cbcard--ivoire{background:linear-gradient(145deg,#FFFFFF,#E6EBEF 70%); color:var(--nuit)} .cbcard--ivoire .cbcard__chip{filter:none} .cbcard__row{display:flex; justify-content:space-between; align-items:flex-start; gap:8px} .cbcard__bank{font-family:"Familjen Grotesk",sans-serif; font-weight:700; font-size:clamp(.7rem,1.5cqw,1rem); letter-spacing:-.01em} .cbcard__net{font-family:"Familjen Grotesk",sans-serif; font-weight:700; font-size:.62rem; letter-spacing:.22em; opacity:.85} .cbcard__chip{ width:15%; aspect-ratio:1.28/1; border-radius:14%; background: linear-gradient(90deg,transparent 46%,rgba(0,0,0,.35) 46%,rgba(0,0,0,.35) 54%,transparent 54%), linear-gradient(0deg,transparent 30%,rgba(0,0,0,.3) 30%,rgba(0,0,0,.3) 34%,transparent 34%,transparent 66%,rgba(0,0,0,.3) 66%,rgba(0,0,0,.3) 70%,transparent 70%), linear-gradient(140deg,#F6DFA6,#C79B3E 60%,#EBD69B); margin:6% 0 0; } .cbcard__num{font-family:"JetBrains Mono",monospace; font-weight:500; font-size:clamp(.6rem,1.6cqw,.95rem); letter-spacing:.04em} .cbcard__foot{display:flex; justify-content:space-between; align-items:flex-end; font-family:"JetBrains Mono",monospace; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; opacity:.9} /* ---------- boutons ---------- */ .btn{ display:inline-flex; align-items:center; gap:9px; border:1px solid transparent; border-radius:100px; padding:13px 24px; font-weight:600; font-size:.96rem; text-decoration:none; transition:transform .15s, background .15s, border-color .15s; } .btn:active{transform:translateY(1px)} .btn--cb{background:var(--cb); color:#fff} .btn--cb:hover{background:var(--cb-clair)} .btn--nuit{background:var(--nuit); color:#fff} .btn--nuit:hover{background:var(--nuit-3)} .btn--ghost{border-color:var(--trait-fort); color:var(--nuit); background:transparent} .btn--ghost:hover{border-color:var(--nuit); background:rgba(255,255,255,.6)} .btn--sm{padding:9px 16px; font-size:.85rem} /* ---------- header du site ---------- */ .site-head{background:var(--blanc); border-bottom:1px solid var(--trait); position:relative; z-index:60} .site-head__in{display:flex; align-items:center; gap:28px; min-height:72px} .logo{display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto} .logo__chip{ width:30px; height:23px; border-radius:5px; flex:none; background: linear-gradient(90deg,transparent 46%,rgba(0,0,0,.32) 46%,rgba(0,0,0,.32) 54%,transparent 54%), linear-gradient(0deg,transparent 32%,rgba(0,0,0,.28) 32%,rgba(0,0,0,.28) 36%,transparent 36%,transparent 64%,rgba(0,0,0,.28) 64%,rgba(0,0,0,.28) 68%,transparent 68%), linear-gradient(140deg,#F6DFA6,#C79B3E); } .logo__txt{font-family:"Familjen Grotesk",sans-serif; font-weight:700; font-size:1.06rem; letter-spacing:-.025em; line-height:1.05} .logo__txt small{display:block; font-family:"JetBrains Mono",monospace; font-size:.56rem; letter-spacing:.2em; color:var(--ardoise-clair); font-weight:400; text-transform:uppercase} .nav{display:flex; gap:22px; align-items:center} .nav a{text-decoration:none; font-size:.93rem; font-weight:500; color:var(--nuit-2); padding:6px 0; border-bottom:2px solid transparent} .nav a:hover{border-bottom-color:var(--cb)} @media(max-width:900px){.nav{display:none}} /* ---------- bandeau confiance ---------- */ .trust{background:var(--nuit); color:#B9C9D6} .trust__in{display:flex; flex-wrap:wrap; gap:10px 30px; padding-block:11px; font-size:.8rem; align-items:center} .trust b{color:#fff; font-weight:600} .trust__dot{width:6px;height:6px;border-radius:50%;background:var(--cb-clair);display:inline-block;margin-right:8px} /* ---------- hero ---------- */ .hero{background:var(--blanc); padding-block:clamp(38px,6vw,72px); border-bottom:1px solid var(--trait); overflow:hidden} .hero__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,5vw,64px); align-items:center} .hero h1 em{font-style:normal; color:var(--cb); } .hero__form{margin-top:28px; background:var(--papier); border:1px solid var(--trait); border-radius:var(--r); padding:20px} .hero__q{font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ardoise); margin:0 0 10px} .chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px} .chip{ border:1px solid var(--trait-fort); background:var(--blanc); border-radius:100px; padding:8px 15px; font-size:.88rem; font-weight:500; color:var(--nuit-2); } .chip[aria-pressed="true"]{background:var(--nuit); color:#fff; border-color:var(--nuit)} .hero__cta{display:flex; align-items:center; gap:16px; flex-wrap:wrap} .hero__note{font-size:.8rem; color:var(--ardoise-clair)} /* rack de cartes = signature */ .rack{position:relative; container-type:inline-size; padding:6% 4% 12%} .rack__card{position:absolute; width:78%; transition:transform .5s cubic-bezier(.2,.8,.2,1)} .rack__card:nth-child(1){transform:translate(2%,-14%) rotate(-8deg); z-index:1; width:70%} .rack__card:nth-child(2){transform:translate(16%,4%) rotate(-2deg); z-index:2; width:74%} .rack__card:nth-child(3){position:relative; transform:translate(28%,22%) rotate(4deg); z-index:3} .rack:hover .rack__card:nth-child(1){transform:translate(-4%,-20%) rotate(-11deg)} .rack:hover .rack__card:nth-child(3){transform:translate(30%,26%) rotate(6deg)} .tag{ position:absolute; z-index:5; background:var(--blanc); border:1px solid var(--trait); border-radius:10px; padding:9px 13px; box-shadow:var(--ombre); font-size:.78rem; line-height:1.3; } .tag b{display:block; font-family:"JetBrains Mono",monospace; font-size:.98rem; letter-spacing:-.02em} .tag--1{top:6%; right:-2%} .tag--2{bottom:14%; left:-4%} .tag--ok b{color:var(--cb)} @media(max-width:880px){ .hero__grid{grid-template-columns:1fr} .rack{display:none} } /* ---------- sections ---------- */ .sec{padding-block:clamp(44px,6vw,84px)} .sec--blanc{background:var(--blanc); border-block:1px solid var(--trait)} .sec--nuit{background:var(--nuit); color:#CBD8E2} .sec--nuit h2,.sec--nuit h3{color:#fff} .sec__head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:28px; flex-wrap:wrap} .sec__head p{margin:8px 0 0; color:var(--ardoise); max-width:52ch} .sec--nuit .sec__head p{color:#93A8B8} /* ---------- classement / podium ---------- */ .rank{display:grid; grid-template-columns:repeat(3,1fr); gap:20px} .rank__item{ background:var(--blanc); border:1px solid var(--trait); border-radius:var(--r); padding:22px; display:flex; flex-direction:column; gap:14px; position:relative; } .rank__item--top{border-color:var(--cb); box-shadow:0 0 0 3px var(--cb-pale)} .rank__badge{ position:absolute; top:-11px; left:22px; background:var(--cb); color:#fff; font-size:.68rem; font-family:"JetBrains Mono",monospace; letter-spacing:.12em; text-transform:uppercase; padding:4px 10px; border-radius:100px; } .rank__badge--alt{background:var(--nuit)} .rank__badge--gold{background:var(--ambre); color:var(--nuit)} .rank__cardwrap{width:60%; container-type:inline-size} .rank__name{font-family:"Familjen Grotesk",sans-serif; font-weight:700; font-size:1.15rem; letter-spacing:-.02em} .rank__bank{font-size:.82rem; color:var(--ardoise); display:block; font-weight:400} .specs{list-style:none; margin:0; padding:0; border-top:1px solid var(--trait)} .specs li{display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--trait); font-size:.88rem} .specs span:first-child{color:var(--ardoise)} .specs b{font-family:"JetBrains Mono",monospace; font-weight:500} .note{display:inline-flex; align-items:baseline; gap:4px; font-family:"JetBrains Mono",monospace; font-weight:700; font-size:1.5rem; letter-spacing:-.04em} .note small{font-size:.72rem; font-weight:400; color:var(--ardoise-clair)} @media(max-width:820px){.rank{grid-template-columns:1fr}} /* ---------- tableau ---------- */ .tablewrap{overflow-x:auto; background:var(--blanc); border:1px solid var(--trait); border-radius:var(--r)} table.cmp{border-collapse:collapse; width:100%; min-width:720px; font-size:.92rem} table.cmp th,table.cmp td{padding:14px 16px; text-align:left; border-bottom:1px solid var(--trait)} table.cmp thead th{ font-family:"JetBrains Mono",monospace; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ardoise); font-weight:500; background:var(--papier); position:sticky; top:0; } table.cmp tbody tr:hover{background:var(--papier)} table.cmp td.num{font-family:"JetBrains Mono",monospace; font-variant-numeric:tabular-nums} .oui{color:var(--cb); font-weight:700} .non{color:var(--brique); font-weight:700} .cardcell{display:flex; align-items:center; gap:12px} .cardcell__mini{width:52px; flex:none; container-type:inline-size} .cardcell b{display:block; font-family:"Familjen Grotesk",sans-serif; font-size:1rem} .cardcell span{font-size:.8rem; color:var(--ardoise)} /* ---------- catégories ---------- */ .cats{display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:14px} .cat{ background:var(--blanc); border:1px solid var(--trait); border-radius:var(--r); padding:18px; text-decoration:none; display:block; transition:border-color .15s, transform .15s; } .cat:hover{border-color:var(--nuit); transform:translateY(-2px)} .cat__n{font-family:"JetBrains Mono",monospace; font-size:.7rem; color:var(--ardoise-clair); letter-spacing:.1em} .cat h3{margin:6px 0 4px; font-size:1.05rem} .cat p{margin:0; font-size:.85rem; color:var(--ardoise)} /* ---------- guides ---------- */ .guides{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px} .guide{background:var(--blanc); border:1px solid var(--trait); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column} .guide__top{height:110px; background:linear-gradient(145deg,var(--nuit-3),var(--nuit)); position:relative; overflow:hidden} .guide__top--cb{background:linear-gradient(145deg,#17B78A,#0B7D5E)} .guide__top--ambre{background:linear-gradient(145deg,#F0C978,#C98B27)} .guide__top::after{ content:""; position:absolute; inset:0; background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.28) 1px, transparent 0); background-size:14px 14px; } .guide__body{padding:18px; display:flex; flex-direction:column; gap:8px; flex:1} .guide__kicker{font-family:"JetBrains Mono",monospace; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cb)} .guide h3{font-size:1.08rem} .guide p{font-size:.88rem; color:var(--ardoise); margin:0} .guide__meta{margin-top:auto; padding-top:12px; font-size:.78rem; color:var(--ardoise-clair); font-family:"JetBrains Mono",monospace} /* ---------- méthode ---------- */ .method{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,60px); align-items:start} .method__list{list-style:none; margin:0; padding:0; counter-reset:m} .method__list li{counter-increment:m; padding:16px 0 16px 52px; border-bottom:1px solid rgba(255,255,255,.12); position:relative} .method__list li::before{ content:counter(m,decimal-leading-zero); position:absolute; left:0; top:18px; font-family:"JetBrains Mono",monospace; font-size:.8rem; color:var(--cb-clair); letter-spacing:.06em; } .method__list b{color:#fff; display:block; font-family:"Familjen Grotesk",sans-serif; font-size:1.05rem; margin-bottom:3px} .method__list span{font-size:.9rem} @media(max-width:820px){.method{grid-template-columns:1fr}} /* ---------- newsletter ---------- */ .news{background:var(--blanc); border:1px solid var(--trait); border-radius:var(--r); padding:clamp(22px,4vw,40px); display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center} .news form{display:flex; gap:8px; flex-wrap:wrap} .news input{padding:13px 16px; border:1px solid var(--trait-fort); border-radius:100px; min-width:250px; font:inherit} @media(max-width:760px){.news{grid-template-columns:1fr}} /* ---------- footer ---------- */ .foot{background:var(--nuit); color:#8FA4B4; padding-block:48px 32px; font-size:.88rem} .foot__grid{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:32px} .foot h4{color:#fff; font-size:.78rem; font-family:"JetBrains Mono",monospace; letter-spacing:.14em; text-transform:uppercase; margin:0 0 14px; font-weight:500} .foot ul{list-style:none; margin:0; padding:0; display:grid; gap:9px} .foot a{text-decoration:none} .foot a:hover{color:#fff} .foot__legal{margin-top:36px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); font-size:.78rem; line-height:1.7} .foot__mentions{display:flex; flex-wrap:wrap; gap:6px 20px; margin:12px 0 0; padding:0; list-style:none; font-size:.78rem} @media(max-width:820px){.foot__grid{grid-template-columns:1fr 1fr}} /* ============ VUE 2 : COMPARATEUR ============ */ .tool{display:grid; grid-template-columns:280px 1fr; gap:28px; align-items:start; padding-block:32px 120px} @media(max-width:900px){.tool{grid-template-columns:1fr}} .filters{background:var(--blanc); border:1px solid var(--trait); border-radius:var(--r); padding:20px; position:sticky; top:60px} .filters h3{font-size:.78rem; font-family:"JetBrains Mono",monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--ardoise); font-weight:500; margin:0 0 14px} .fgroup{padding:16px 0; border-top:1px solid var(--trait)} .fgroup:first-of-type{border-top:0; padding-top:0} .fgroup > b{display:block; font-size:.9rem; margin-bottom:10px} .opt{display:flex; align-items:center; gap:10px; padding:5px 0; font-size:.9rem; cursor:pointer} .opt input{accent-color:var(--cb); width:17px; height:17px} .range{width:100%; accent-color:var(--cb)} .rangeval{font-family:"JetBrains Mono",monospace; font-size:.86rem; color:var(--cb); font-weight:500} .results__head{display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:16px; flex-wrap:wrap} .results__count{font-family:"JetBrains Mono",monospace; font-size:.9rem} .results__count b{font-size:1.2rem} select.sort{padding:9px 14px; border:1px solid var(--trait-fort); border-radius:100px; background:var(--blanc); font:inherit; font-size:.88rem} .row{ background:var(--blanc); border:1px solid var(--trait); border-radius:var(--r); padding:18px; display:grid; grid-template-columns:120px 1.4fr 1fr auto; gap:20px; align-items:center; margin-bottom:12px; } .row:hover{border-color:var(--trait-fort)} .row__card{container-type:inline-size} .row__name{font-family:"Familjen Grotesk",sans-serif; font-weight:700; font-size:1.15rem; letter-spacing:-.02em; margin:0} .row__bank{font-size:.85rem; color:var(--ardoise); margin:2px 0 10px} .pills{display:flex; flex-wrap:wrap; gap:6px} .pill{font-size:.72rem; padding:3px 9px; border-radius:100px; background:var(--papier); color:var(--nuit-2); border:1px solid var(--trait)} .pill--cb{background:var(--cb-pale); color:#07533E; border-color:transparent} .pill--ambre{background:var(--ambre-pale); color:#8A6416; border-color:transparent} .row__price{font-family:"JetBrains Mono",monospace; font-size:1.6rem; font-weight:700; letter-spacing:-.04em; line-height:1} .row__price small{display:block; font-size:.7rem; font-weight:400; color:var(--ardoise); letter-spacing:0; margin-top:5px; font-family:"Public Sans",sans-serif} .row__actions{display:flex; flex-direction:column; gap:8px; align-items:stretch; min-width:150px} .row__cmp{display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--ardoise); justify-content:center} @media(max-width:760px){.row{grid-template-columns:90px 1fr; gap:14px}.row__actions{grid-column:1/-1; min-width:0}.row__price{grid-column:1/-1}} .tray{ position:fixed; left:0; right:0; bottom:0; z-index:150; background:var(--nuit); color:#fff; transform:translateY(110%); transition:transform .3s cubic-bezier(.2,.8,.2,1); box-shadow:0 -18px 40px -20px rgba(0,0,0,.6); } .tray[data-open="true"]{transform:none} .tray__in{display:flex; align-items:center; gap:18px; padding-block:14px; flex-wrap:wrap} .tray__slots{display:flex; gap:10px; margin-right:auto; flex-wrap:wrap} .slot{border:1px dashed rgba(255,255,255,.3); border-radius:10px; padding:8px 14px; font-size:.85rem; min-width:120px} .slot--full{border-style:solid; border-color:var(--cb-clair); background:rgba(18,168,125,.12)} /* ---------- DUEL banque vs banque ---------- */ .duel{background:var(--blanc); border-bottom:1px solid var(--trait); padding-block:30px 46px} .duel__grid{display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(14px,2.5vw,30px); align-items:stretch; margin-top:24px} .duel__vs{ align-self:center; width:78px; height:78px; border-radius:50%; background:var(--nuit); color:#fff; display:grid; place-items:center; font-family:"Familjen Grotesk",sans-serif; font-weight:700; font-size:1.45rem; letter-spacing:.02em; box-shadow:0 0 0 8px var(--blanc); z-index:4; flex:none; } .duel__side{background:var(--papier); border:1px solid var(--trait); border-radius:var(--r); padding:22px; display:flex; flex-direction:column} .duel__cardwrap{width:64%; margin:6px auto 20px; container-type:inline-size} select.pick{ width:100%; padding:13px 14px; border-radius:10px; border:1px solid var(--trait-fort); background:var(--blanc); font:inherit; font-weight:600; font-size:.98rem; color:var(--nuit); } .duel__bank{font-size:.82rem; color:var(--ardoise); margin:10px 0 0; text-align:center} .specgrid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px} .spectile{display:flex; gap:11px; align-items:center; background:var(--blanc); border:1px solid var(--trait); border-radius:10px; padding:11px 12px} .spectile svg{width:21px; height:21px; flex:none; stroke:var(--nuit-3); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round} .spectile small{display:block; font-size:.62rem; font-family:"JetBrains Mono",monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--ardoise-clair)} .spectile b{font-family:"JetBrains Mono",monospace; font-size:.98rem; letter-spacing:-.02em; line-height:1.25} .duel__foot{margin-top:auto; padding-top:18px; display:grid; gap:8px} @media(max-width:820px){ .duel__grid{grid-template-columns:1fr} .duel__vs{margin:-14px auto; box-shadow:0 0 0 6px var(--papier)} } .match{margin-top:30px; background:var(--blanc); border:1px solid var(--trait); border-radius:var(--r); overflow:hidden} table.match__t{width:100%; border-collapse:collapse; font-size:.94rem} table.match__t th{ padding:13px 16px; background:var(--papier); font-family:"JetBrains Mono",monospace; font-weight:500; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ardoise); text-align:center; } table.match__t td{padding:13px 16px; border-bottom:1px solid var(--trait); text-align:center; width:33%; font-family:"JetBrains Mono",monospace; font-variant-numeric:tabular-nums} table.match__t td.crit{font-family:"Public Sans",sans-serif; color:var(--ardoise); font-size:.9rem} table.match__t td.win{background:var(--cb-pale); color:#06503B; font-weight:700} table.match__t td.win::before{content:"✓ "; color:var(--cb)} table.match__t tr:last-child td{border-bottom:0} .verdictbar{ margin-top:20px; background:var(--nuit); color:#fff; border-radius:var(--r); padding:22px 26px; display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap; } .verdictbar p{margin:0; color:#A9BECD; font-size:.9rem; max-width:52ch} .verdictbar b{color:#fff} .verdictbar__score{font-family:"JetBrains Mono",monospace; font-size:1.9rem; font-weight:700; letter-spacing:-.04em; color:#6FE0BC; display:block} .duel__legal{font-size:.78rem; color:var(--ardoise-clair); margin-top:14px} /* ---------- comparatif rédigé en bas de page ---------- */ .longform{background:var(--blanc); border-top:1px solid var(--trait); padding-block:clamp(40px,6vw,72px)} .longform__in{display:grid; grid-template-columns:230px 1fr; gap:clamp(24px,5vw,56px); align-items:start} @media(max-width:920px){.longform__in{grid-template-columns:1fr}} /* ============ VUE 3 : ARTICLE ============ */ .art-head{background:var(--nuit); color:#fff; padding-block:38px 54px; position:relative} .art-head .bread{font-family:"JetBrains Mono",monospace; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cb-clair); margin-bottom:18px} .art-head .bread a{text-decoration:none; opacity:.75} .art-head h1{max-width:19ch} .art-meta{display:flex; align-items:center; gap:14px; margin-top:26px; flex-wrap:wrap; font-size:.88rem; color:#A9BECD} .avatar{width:42px; height:42px; border-radius:50%; background:linear-gradient(145deg,#3E6E8E,#1F3A52); flex:none; display:grid; place-items:center; color:#fff; font-family:"Familjen Grotesk",sans-serif; font-weight:700} .verif{display:inline-flex; align-items:center; gap:6px; background:rgba(18,168,125,.16); color:#6FE0BC; border-radius:100px; padding:5px 12px; font-size:.78rem} .art{display:grid; grid-template-columns:250px 1fr; gap:clamp(24px,5vw,56px); padding-block:44px 80px; align-items:start} @media(max-width:920px){.art{grid-template-columns:1fr}} .toc{position:sticky; top:60px; font-size:.9rem} .toc h4{font-family:"JetBrains Mono",monospace; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ardoise); margin:0 0 12px; font-weight:500} .toc ul{list-style:none; margin:0; padding:0; border-left:2px solid var(--trait)} .toc a{display:block; padding:7px 0 7px 14px; text-decoration:none; color:var(--ardoise); margin-left:-2px; border-left:2px solid transparent} .toc a:hover{color:var(--nuit)} .toc a.on{color:var(--nuit); font-weight:600; border-left-color:var(--cb)} .prose{max-width:72ch} .prose h2{margin:44px 0 14px; scroll-margin-top:70px} .prose h3{margin:30px 0 10px} .prose ul{padding-left:20px} .prose li{margin-bottom:7px} .prose a{color:var(--cb); text-underline-offset:3px} /* Un bouton reste un bouton dans le corps de l'article : sans cette ligne, .prose a l'emporte sur .btn--cb et le libellé passe en vert sur vert. */ .prose .btn--cb{color:#fff} .prose .btn--nuit{color:#fff} .enbref{background:var(--nuit); color:#CBD8E2; border-radius:var(--r); padding:26px; margin-bottom:8px} .enbref h2{color:#fff; margin:0 0 16px; font-size:1.3rem} .enbref ol{margin:0; padding-left:22px} .enbref li{margin-bottom:10px} .enbref b{color:#fff} .callout{border-left:3px solid var(--cb); background:var(--cb-pale); padding:18px 20px; border-radius:0 var(--r) var(--r) 0; margin:26px 0} .callout--warn{border-color:var(--brique); background:var(--brique-pale)} .callout__t{font-family:"JetBrains Mono",monospace; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:8px; color:var(--cb)} .callout--warn .callout__t{color:var(--brique)} .callout p:last-child{margin:0} .verdict{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--trait); border-radius:var(--r); overflow:hidden; margin:24px 0; background:var(--blanc)} .verdict > div{padding:20px} .verdict > div + div{border-left:1px solid var(--trait)} .verdict h4{font-family:"JetBrains Mono",monospace; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; margin:0 0 12px} .verdict ul{margin:0; padding-left:18px; font-size:.92rem} .verdict--plus h4{color:var(--cb)} .verdict--moins h4{color:var(--brique)} @media(max-width:640px){.verdict{grid-template-columns:1fr}.verdict > div + div{border-left:0; border-top:1px solid var(--trait)}} .fiche{background:var(--blanc); border:1px solid var(--trait); border-radius:var(--r); padding:22px; display:grid; grid-template-columns:150px 1fr; gap:24px; margin:22px 0; align-items:start} .fiche__card{container-type:inline-size} @media(max-width:640px){.fiche{grid-template-columns:1fr}} .faq details{background:var(--blanc); border:1px solid var(--trait); border-radius:var(--r); margin-bottom:10px; overflow:hidden} .faq summary{padding:16px 20px; cursor:pointer; font-weight:600; font-family:"Familjen Grotesk",sans-serif; font-size:1.05rem; list-style:none; display:flex; justify-content:space-between; gap:16px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+"; font-family:"JetBrains Mono",monospace; color:var(--cb); font-size:1.3rem; line-height:1} .faq details[open] summary::after{content:"–"} .faq .faq__body{padding:0 20px 18px; color:var(--ardoise)} .sources{font-size:.85rem; color:var(--ardoise); border-top:1px solid var(--trait); padding-top:20px; margin-top:44px} /* ============ VUE 4 : GUIDE ============ */ .guide-head{padding-block:44px 26px; background:var(--blanc); border-bottom:1px solid var(--trait)} .steps{counter-reset:s; display:grid; gap:14px; margin:28px 0} .step{ counter-increment:s; background:var(--blanc); border:1px solid var(--trait); border-radius:var(--r); padding:22px 24px 22px 74px; position:relative; } .step::before{ content:counter(s); position:absolute; left:24px; top:22px; width:32px; height:32px; border-radius:50%; background:var(--nuit); color:#fff; display:grid; place-items:center; font-family:"JetBrains Mono",monospace; font-size:.9rem; font-weight:700; } .step h3{margin:0 0 6px} .step p:last-child{margin:0} .calc{background:var(--nuit); color:#CBD8E2; border-radius:var(--r); padding:clamp(22px,4vw,34px); margin:32px 0} .calc h3{color:#fff; margin-bottom:6px} .calc__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; margin-top:22px; align-items:end} .calc label{display:block; font-size:.8rem; color:#93A8B8; margin-bottom:7px} .calc input{width:100%; padding:12px 14px; border-radius:10px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); color:#fff; font:inherit; font-family:"JetBrains Mono",monospace} .calc__out{background:var(--cb); border-radius:10px; padding:14px 18px; color:#fff} .calc__out b{display:block; font-family:"JetBrains Mono",monospace; font-size:1.9rem; letter-spacing:-.04em; line-height:1.1} .calc__out span{font-size:.76rem; opacity:.85} /* ---------- complément : la règle de sélection d'un classement ---------- Le classement de la page d'accueil affiche sous chaque carte la règle qui l'a désignée. La maquette ne prévoyait pas cette ligne : un classement dont on ne peut pas vérifier le critère n'en est pas un. */ .rank__regle{ font-size:.78rem; color:var(--ardoise-clair); margin:0; padding-top:2px; border-top:1px solid var(--trait); } /* ---------- compléments : ce que la maquette ne déclarait pas ---------- Le fichier de maquette n'avait pas à porter ces règles : ses tableaux n'ont pas de légende, et ses notes de bas de tableau sont écrites à la main dans le HTML. Elles n'en changent aucune. */ /* Légende de tableau, lue par les lecteurs d'écran, invisible à l'œil. */ .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap} /* Source et date d'un relevé, sous un tableau. */ .tablewrap__note{font-size:.8rem; color:var(--ardoise-clair); margin:10px 0 0} /* ---------- complément : les puces d'usage sont des liens ---------- La maquette en faisait des