{"id":112,"date":"2025-12-19T12:58:34","date_gmt":"2025-12-19T11:58:34","guid":{"rendered":"https:\/\/wp11.infocom.work\/?page_id=112"},"modified":"2025-12-21T13:35:03","modified_gmt":"2025-12-21T12:35:03","slug":"styles-graphiques","status":"publish","type":"page","link":"https:\/\/wp11.infocom.work\/index.php\/styles-graphiques\/","title":{"rendered":"Styles graphiques"},"content":{"rendered":"\n<!-- ========= DESIGN ATLAS \u2014 HERO + NAV (ancres) =========\n1) Colle ce bloc en haut de ta page \"Style graphique\"\n2) Les boutons descendent vers #brutalism #bauhaus #y2k #synthwave #vintage #minimal\n3) Ensuite, dans chaque section style que je te ferai, je mettrai l'id correspondant\n======================================================== -->\n\n<style>\n  .da-hero-wrap{max-width:1100px;margin:0 auto;padding:32px 16px;}\n  .da-hero{\n    border-radius:26px; overflow:hidden;\n    border:1px solid rgba(0,0,0,0.10);\n    background:\n      radial-gradient(circle at 18% 25%, rgba(31,79,255,0.18) 0%, rgba(31,79,255,0) 58%),\n      radial-gradient(circle at 80% 70%, rgba(0,209,255,0.16) 0%, rgba(0,209,255,0) 58%),\n      linear-gradient(135deg, #ffffff 0%, #f6f7ff 35%, #ffffff 100%);\n    box-shadow: 0 18px 50px rgba(0,0,0,0.06);\n  }\n  .da-hero-top{\n    padding:34px 34px 22px 34px;\n    border-bottom:1px solid rgba(0,0,0,0.08);\n    background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.55) 100%);\n    backdrop-filter: blur(6px);\n  }\n  .da-meta{\n    font-family:\"Inter\", Arial, Helvetica, sans-serif;\n    font-size:12px;letter-spacing:0.14em;text-transform:uppercase;\n    font-weight:800;color:rgba(0,0,0,0.62);\n    display:flex;gap:10px;align-items:center;flex-wrap:wrap;\n  }\n  .da-meta .dot{\n    width:10px;height:10px;border-radius:999px;background:#1f4fff;\n    box-shadow:0 0 0 4px rgba(31,79,255,0.14);\n    display:inline-block;\n  }\n  .da-hero-title{\n    margin:10px 0 10px 0;\n    font-family:\"Space Grotesk\",\"Inter\", Arial, Helvetica, sans-serif;\n    font-size:44px;line-height:1.06;font-weight:800;letter-spacing:-0.03em;\n    color:#0e0e0e;\n  }\n  .da-hero-title .atlas{\n    font-style:italic;font-weight:600;opacity:0.92;\n  }\n  .da-hero-lead{\n    margin:0;max-width:92ch;\n    font-family:\"Inter\", Arial, Helvetica, sans-serif;\n    font-size:17px;line-height:1.85;color:rgba(0,0,0,0.78);\n  }\n\n  .da-hero-nav{\n    padding:22px 22px 26px 22px;\n    display:grid;\n    grid-template-columns: repeat(3, minmax(0,1fr));\n    gap:14px;\n  }\n  @media (max-width: 900px){\n    .da-hero-nav{grid-template-columns: 1fr;}\n  }\n\n  .da-tile{\n    position:relative;\n    border-radius:20px;\n    border:1px solid rgba(0,0,0,0.10);\n    background: rgba(255,255,255,0.78);\n    padding:16px 16px 14px 16px;\n    text-decoration:none;\n    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;\n    overflow:hidden;\n  }\n  .da-tile:hover{\n    transform: translateY(-2px);\n    box-shadow: 0 18px 40px rgba(0,0,0,0.10);\n    border-color: rgba(31,79,255,0.25);\n    text-decoration:none;\n  }\n  .da-tile:active{transform: translateY(-1px);}\n  .da-tile .k{\n    font-family:\"Inter\", Arial, Helvetica, sans-serif;\n    font-size:12px;letter-spacing:0.14em;text-transform:uppercase;\n    font-weight:800;color:rgba(0,0,0,0.62);\n    display:flex;align-items:center;gap:10px;\n    margin:0 0 10px 0;\n  }\n  .da-tile .sig{\n    width:14px;height:14px;border-radius:999px;display:inline-block;\n  }\n  .da-tile h3{\n    margin:0 0 6px 0;\n    font-family:\"Inter\", Arial, Helvetica, sans-serif;\n    font-size:18px;line-height:1.25;font-weight:900;letter-spacing:-0.02em;\n    color:#0e0e0e;\n  }\n  .da-tile p{\n    margin:0;\n    font-family:\"Inter\", Arial, Helvetica, sans-serif;\n    font-size:14px;line-height:1.7;color:rgba(0,0,0,0.72);\n    max-width:56ch;\n  }\n\n  \/* Tiny \u201cstyle previews\u201d (each tile gets its own vibe) *\/\n  .t-brut::before{\n    content:\"\";\n    position:absolute;inset:-1px;\n    background:\n      linear-gradient(#000 2px, transparent 2px),\n      linear-gradient(90deg,#000 2px, transparent 2px);\n    background-size: 22px 22px;\n    opacity:0.06;\n    pointer-events:none;\n  }\n  .t-bau::before{\n    content:\"\";\n    position:absolute;right:-30px;top:-30px;\n    width:120px;height:120px;border-radius:999px;\n    background: rgba(255,0,0,0.14);\n    box-shadow: -70px 80px 0 rgba(0,51,255,0.10), -20px 150px 0 rgba(255,196,0,0.12);\n    pointer-events:none;\n  }\n  .t-y2k::before{\n    content:\"\";\n    position:absolute;left:-40px;bottom:-40px;\n    width:160px;height:160px;border-radius:30px;\n    background: linear-gradient(180deg,#f5f5f5 0%,#bdbdbd 35%,#ffffff 60%,#9d9d9d 100%);\n    opacity:0.35;filter: blur(0.2px);\n    pointer-events:none;\n  }\n  .t-synth::before{\n    content:\"\";\n    position:absolute;inset:0;\n    background:\n      radial-gradient(circle at 18% 25%, rgba(255,45,149,0.16) 0%, rgba(255,45,149,0) 55%),\n      radial-gradient(circle at 80% 75%, rgba(0,209,255,0.14) 0%, rgba(0,209,255,0) 55%);\n    pointer-events:none;\n  }\n  .t-vint::before{\n    content:\"\";\n    position:absolute;inset:0;\n    background-image: radial-gradient(rgba(0,0,0,0.05) 1px, transparent 1px);\n    background-size: 18px 18px;\n    opacity:0.12;\n    pointer-events:none;\n  }\n  .t-min::before{\n    content:\"\";\n    position:absolute;left:16px;top:16px;right:16px;height:1px;\n    background: rgba(0,0,0,0.10);\n    pointer-events:none;\n  }\n\n  \/* Focus (keyboard friendly) *\/\n  .da-tile:focus{\n    outline: 3px solid rgba(31,79,255,0.35);\n    outline-offset: 2px;\n  }\n<\/style>\n\n<section class=\"da-hero-wrap\">\n  <div class=\"da-hero\">\n    <div class=\"da-hero-top\">\n      <div class=\"da-meta\"><span class=\"dot\"><\/span>Design Atlas <span style=\"opacity:.55;\">\/<\/span> Style graphique<\/div>\n      <h1 class=\"da-hero-title\">Styles majeurs <span class=\"atlas\">\u00e0 explorer<\/span><\/h1>\n      <p class=\"da-hero-lead\">\n        Six univers visuels, six logiques de composition. Clique sur un style pour descendre directement \u00e0 sa section :\n        tu auras une d\u00e9finition, des r\u00e8gles claires, une checklist, et des exemples pens\u00e9s pour \u00eatre copiables et adaptables.\n      <\/p>\n    <\/div>\n\n    <nav class=\"da-hero-nav\" aria-label=\"Acc\u00e8s rapides aux styles\">\n      <a class=\"da-tile t-brut\" href=\"#brutalism\">\n        <div class=\"k\"><span class=\"sig\" style=\"background:#000;\"><\/span>01<\/div>\n        <h3>Brutalisme digital<\/h3>\n        <p>Raw, contrastes forts, typographie massive, structure assum\u00e9e.<\/p>\n      <\/a>\n\n      <a class=\"da-tile t-bau\" href=\"#bauhaus\">\n        <div class=\"k\"><span class=\"sig\" style=\"background:#ff0000;\"><\/span>02<\/div>\n        <h3>Bauhaus \/ Modernisme<\/h3>\n        <p>G\u00e9om\u00e9trie, grilles, aplats, \u00e9quilibre entre rigueur et rythme.<\/p>\n      <\/a>\n\n      <a class=\"da-tile t-y2k\" href=\"#y2k\">\n        <div class=\"k\"><span class=\"sig\" style=\"background:linear-gradient(180deg,#eee,#999,#fff);\"><\/span>03<\/div>\n        <h3>Y2K \/ Futuriste<\/h3>\n        <p>Chrome, glossy, UI techno, 3D l\u00e9g\u00e8re, vibes d\u00e9but 2000.<\/p>\n      <\/a>\n\n      <a class=\"da-tile t-synth\" href=\"#synthwave\">\n        <div class=\"k\"><span class=\"sig\" style=\"background:#ff2d95;\"><\/span>04<\/div>\n        <h3>Synthwave \/ Vaporwave<\/h3>\n        <p>N\u00e9ons, gradients, fonds sombres, ambiance r\u00e9tro-futuriste.<\/p>\n      <\/a>\n\n      <a class=\"da-tile t-vint\" href=\"#vintage\">\n        <div class=\"k\"><span class=\"sig\" style=\"background:#3b2f2f;\"><\/span>05<\/div>\n        <h3>R\u00e9tro \/ Vintage<\/h3>\n        <p>Affiches, textures, palettes chaudes, charme et lisibilit\u00e9.<\/p>\n      <\/a>\n\n      <a class=\"da-tile t-min\" href=\"#minimal\">\n        <div class=\"k\"><span class=\"sig\" style=\"background:#1f4fff;opacity:.7;\"><\/span>06<\/div>\n        <h3>Minimalisme contemporain<\/h3>\n        <p>Whitespace, hi\u00e9rarchie fine, d\u00e9tails pr\u00e9cis, premium clean.<\/p>\n      <\/a>\n    <\/nav>\n  <\/div>\n<\/section>\n\n\n\n<!-- =======================\nSTYLE 01 \u2014 BRUTALISME DIGITAL (ultra atypique)\nID: brutalism (pour le scroll depuis le hero)\nPolice signature: IBM Plex Mono (titres + UI), Inter (texte long)\n======================= -->\n\n<style>\n  \/* Brutalism block \u2014 local CSS *\/\n  #brutalism{ scroll-margin-top: 90px; }\n\n  .brut-wrap{max-width:1100px;margin:0 auto;padding:32px 16px;}\n\n  .brut{\n    border:4px solid #000;\n    border-radius:0;\n    background:#fff;\n    color:#000;\n    box-shadow:none;\n    position:relative;\n    overflow:hidden;\n  }\n\n  \/* Hard grid background *\/\n  .brut::before{\n    content:\"\";\n    position:absolute; inset:0;\n    background:\n      linear-gradient(#000 2px, transparent 2px),\n      linear-gradient(90deg,#000 2px, transparent 2px);\n    background-size: 26px 26px;\n    opacity:0.05;\n    pointer-events:none;\n  }\n\n  \/* Glitch strip *\/\n  .brut::after{\n    content:\"\";\n    position:absolute; left:-10%; top:14px; width:120%; height:10px;\n    background: linear-gradient(90deg, #000 0%, #000 35%, transparent 35%, transparent 45%, #000 45%, #000 70%, transparent 70%, transparent 78%, #000 78%, #000 100%);\n    opacity:0.85;\n    transform: rotate(-1.2deg);\n    pointer-events:none;\n  }\n\n  .brut-head{\n    padding:28px 28px 18px 28px;\n    border-bottom:4px solid #000;\n    background:#fff;\n    position:relative;\n  }\n\n  .brut-meta{\n    font-family:\"IBM Plex Mono\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\"Courier New\", monospace;\n    font-size:12px; letter-spacing:0.18em; text-transform:uppercase;\n    font-weight:700;\n    display:flex; align-items:center; gap:10px; flex-wrap:wrap;\n  }\n  .brut-tag{\n    border:3px solid #000;\n    padding:7px 10px;\n    border-radius:0;\n    background:#000;\n    color:#fff;\n    line-height:1;\n  }\n  .brut-tag--ghost{\n    background:#fff; color:#000;\n  }\n\n  .brut-title{\n    margin:12px 0 10px 0;\n    font-family:\"IBM Plex Mono\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\"Courier New\", monospace;\n    font-size:40px; line-height:1.05;\n    font-weight:800;\n    letter-spacing:-0.06em;\n    text-transform:uppercase;\n  }\n  .brut-title .hi{\n    background:#000;\n    color:#fff;\n    padding:2px 6px;\n  }\n\n  .brut-lead{\n    margin:0;\n    font-family:\"Inter\", Arial, Helvetica, sans-serif;\n    font-size:16px; line-height:1.9;\n    max-width:92ch;\n  }\n\n  \/* Layout *\/\n  .brut-body{\n    padding:22px 22px 26px 22px;\n    position:relative;\n  }\n  .brut-grid{\n    display:grid;\n    grid-template-columns: 1.1fr 0.9fr;\n    gap:16px;\n    align-items:start;\n  }\n  @media (max-width: 900px){\n    .brut-grid{ grid-template-columns: 1fr; }\n  }\n\n  .brut-panel{\n    border:3px solid #000;\n    background:#fff;\n    padding:16px;\n    position:relative;\n  }\n  .brut-panel h3{\n    margin:0 0 10px 0;\n    font-family:\"IBM Plex Mono\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\"Courier New\", monospace;\n    font-size:14px;\n    letter-spacing:0.16em;\n    text-transform:uppercase;\n  }\n\n  \/* Big readable prose *\/\n  .brut-prose{\n    font-family:\"Inter\", Arial, Helvetica, sans-serif;\n    font-size:16px;\n    line-height:1.95;\n    letter-spacing:0.01em;\n    max-width:92ch;\n  }\n  .brut-prose p{ margin:0 0 14px 0; }\n  .brut-prose p:last-child{ margin-bottom:0; }\n  .brut-prose strong{ font-weight:800; }\n  .brut-prose code{\n    font-family:\"IBM Plex Mono\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\"Courier New\", monospace;\n    font-size:13px;\n    background:#000;\n    color:#fff;\n    padding:2px 6px;\n  }\n\n  \/* \u201cRule cards\u201d with brutal micro UX *\/\n  .brut-rule{\n    border:3px solid #000;\n    padding:12px;\n    background:#fff;\n    display:flex;\n    gap:12px;\n    align-items:flex-start;\n  }\n  .brut-n{\n    width:36px;height:36px;\n    border:3px solid #000;\n    display:flex;align-items:center;justify-content:center;\n    font-family:\"IBM Plex Mono\", monospace;\n    font-weight:800;\n    background:#fff;\n  }\n  .brut-rule h4{\n    margin:0 0 6px 0;\n    font-family:\"Inter\", Arial, Helvetica, sans-serif;\n    font-size:15px;\n    font-weight:900;\n    letter-spacing:-0.01em;\n  }\n  .brut-rule p{\n    margin:0;\n    font-family:\"Inter\", Arial, Helvetica, sans-serif;\n    font-size:14px;\n    line-height:1.75;\n    color:#111;\n  }\n\n  \/* Checklist chips *\/\n  .brut-chips{ display:flex; flex-wrap:wrap; gap:10px; }\n  .brut-chip{\n    border:3px solid #000;\n    padding:8px 10px;\n    font-family:\"IBM Plex Mono\", monospace;\n    font-size:12px;\n    letter-spacing:0.14em;\n    text-transform:uppercase;\n    background:#fff;\n  }\n  .brut-chip--black{ background:#000; color:#fff; }\n\n  \/* Example mini-layout \u201cposter\u201d *\/\n  .brut-poster{\n    border:3px solid #000;\n    background:#fff;\n    padding:14px;\n  }\n  .brut-poster .topbar{\n    display:flex; align-items:center; justify-content:space-between; gap:10px;\n    border-bottom:3px solid #000;\n    padding-bottom:12px;\n    margin-bottom:12px;\n  }\n  .brut-poster .logo{\n    font-family:\"IBM Plex Mono\", monospace;\n    font-weight:900;\n    letter-spacing:-0.06em;\n    text-transform:uppercase;\n  }\n  .brut-poster .nav{\n    display:flex; gap:10px; flex-wrap:wrap;\n    font-family:\"IBM Plex Mono\", monospace;\n    font-size:12px; letter-spacing:0.14em; text-transform:uppercase;\n  }\n  .brut-poster .nav span{\n    border:2px solid #000; padding:6px 8px;\n  }\n  .brut-poster .headline{\n    font-family:\"IBM Plex Mono\", monospace;\n    font-size:28px;\n    font-weight:900;\n    letter-spacing:-0.06em;\n    text-transform:uppercase;\n    margin:0 0 8px 0;\n  }\n  .brut-poster .deck{\n    font-family:\"Inter\", Arial, Helvetica, sans-serif;\n    font-size:14px; line-height:1.8;\n    margin:0 0 12px 0;\n  }\n  .brut-poster .columns{\n    display:grid; grid-template-columns: 1fr 1fr;\n    gap:12px;\n  }\n  @media (max-width: 900px){\n    .brut-poster .columns{ grid-template-columns:1fr; }\n  }\n  .brut-poster .block{\n    border:2px solid #000;\n    padding:10px;\n    font-family:\"Inter\", Arial, Helvetica, sans-serif;\n    font-size:13px;\n    line-height:1.75;\n  }\n  .brut-poster .cta{\n    margin-top:12px;\n    display:flex; gap:10px; flex-wrap:wrap;\n  }\n  .brut-btn{\n    display:inline-flex;align-items:center;justify-content:center;\n    border:3px solid #000;\n    padding:10px 12px;\n    background:#fff;\n    color:#000;\n    font-family:\"IBM Plex Mono\", monospace;\n    font-size:12px; letter-spacing:0.14em; text-transform:uppercase;\n    text-decoration:none;\n    transition: transform .12s ease;\n  }\n  .brut-btn:hover{ transform: translateY(-1px); }\n  .brut-btn--fill{ background:#000; color:#fff; }\n\n  \/* Tiny warning label *\/\n  .brut-warn{\n    border:3px dashed #000;\n    padding:12px;\n    font-family:\"IBM Plex Mono\", monospace;\n    font-size:12px;\n    letter-spacing:0.12em;\n    text-transform:uppercase;\n    background: rgba(0,0,0,0.03);\n  }\n<\/style>\n\n<section class=\"brut-wrap\" id=\"brutalism\">\n  <div class=\"brut\">\n    <header class=\"brut-head\">\n      <div class=\"brut-meta\">\n        <span class=\"brut-tag\">STYLE 01<\/span>\n        <span class=\"brut-tag brut-tag--ghost\">BRUTALISME DIGITAL<\/span>\n        <span class=\"brut-tag brut-tag--ghost\">SIG: IBM PLEX MONO<\/span>\n      <\/div>\n\n      <h2 class=\"brut-title\">DESIGN <span class=\"hi\">RAW<\/span> \/ CONTRASTES &amp; STRUCTURE<\/h2>\n\n      <p class=\"brut-lead\">\n        Le brutalisme digital assume le \u201cnon-fini\u201d : interfaces tranch\u00e9es, hi\u00e9rarchie brutale, composants visibles.\n        L\u2019objectif n\u2019est pas d\u2019\u00eatre joli au sens classique \u2014 c\u2019est d\u2019\u00eatre <strong>lisible<\/strong>, <strong>direct<\/strong> et <strong>m\u00e9morable<\/strong>.\n      <\/p>\n    <\/header>\n\n    <div class=\"brut-body\">\n      <div class=\"brut-grid\">\n        <!-- LEFT: Guide long -->\n        <article class=\"brut-panel\">\n          <h3>Guide essentiel (texte long)<\/h3>\n\n          <div class=\"brut-prose\">\n            <p>\n              Pour r\u00e9ussir un layout brutaliste, commence par poser une r\u00e8gle simple :\n              <strong>tout doit \u00eatre volontairement explicite<\/strong>. Les bordures existent, les grilles se voient, et la hi\u00e9rarchie\n              s\u2019exprime par des choix radicaux : taille, graisse, capitales, et <strong>contraste noir\/blanc<\/strong>.\n            <\/p>\n            <p>\n              Ensuite, limite ton syst\u00e8me : une typographie monospaced pour l\u2019UI (ici <code>IBM Plex Mono<\/code>) et une police de lecture confortable\n              pour les paragraphes (ici <code>Inter<\/code>). Tu obtiens un mix parfait : une esth\u00e9tique \u201cmachine\u201d sans sacrifier la lecture.\n            <\/p>\n            <p>\n              Enfin, n\u2019oublie pas le pi\u00e8ge : \u201cbrutal\u201d ne veut pas dire \u201csale\u201d. Le brutalisme est un style de pr\u00e9cision.\n              Travaille des marges r\u00e9guli\u00e8res, un rythme vertical constant, et laisse respirer : <strong>moins de d\u00e9coration, plus d\u2019intention<\/strong>.\n            <\/p>\n          <\/div>\n\n          <div style=\"height:14px;\"><\/div>\n\n          <div class=\"brut-rule\" style=\"margin-bottom:12px;\">\n            <div class=\"brut-n\">01<\/div>\n            <div>\n              <h4>Hi\u00e9rarchie violente<\/h4>\n              <p>Un titre qui \u00e9crase, un texte qui lit. Pas d\u2019entre-deux. Les niveaux doivent \u00eatre \u00e9vidents en une seconde.<\/p>\n            <\/div>\n          <\/div>\n\n          <div class=\"brut-rule\" style=\"margin-bottom:12px;\">\n            <div class=\"brut-n\">02<\/div>\n            <div>\n              <h4>Grille visible<\/h4>\n              <p>Des bordures franches et des blocs align\u00e9s : le style vient de la structure, pas d\u2019ornements.<\/p>\n            <\/div>\n          <\/div>\n\n          <div class=\"brut-rule\">\n            <div class=\"brut-n\">03<\/div>\n            <div>\n              <h4>UI \u201chonn\u00eate\u201d<\/h4>\n              <p>Boutons, tags, menus : tout ressemble \u00e0 ce que c\u2019est. Si c\u2019est cliquable, \u00e7a doit se voir.<\/p>\n            <\/div>\n          <\/div>\n        <\/article>\n\n        <!-- RIGHT: Checklist + mini demo -->\n        <aside class=\"brut-panel\">\n          <h3>Checklist<\/h3>\n\n          <div class=\"brut-chips\" style=\"margin-bottom:14px;\">\n            <span class=\"brut-chip brut-chip--black\">noir &amp; blanc<\/span>\n            <span class=\"brut-chip\">bordures visibles<\/span>\n            <span class=\"brut-chip\">caps \/ mono<\/span>\n            <span class=\"brut-chip\">rythme vertical<\/span>\n            <span class=\"brut-chip\">marges constantes<\/span>\n            <span class=\"brut-chip\">1 accent max<\/span>\n          <\/div>\n\n          <div class=\"brut-warn\" style=\"margin-bottom:14px;\">\n            warning: si tout crie, plus rien ne se comprend.\n          <\/div>\n\n          <h3>Mini d\u00e9monstration (mock poster)<\/h3>\n          <div class=\"brut-poster\">\n            <div class=\"topbar\">\n              <div class=\"logo\">DA\/BRUT<\/div>\n              <div class=\"nav\">\n                <span>GRID<\/span><span>TYPE<\/span><span>UI<\/span>\n              <\/div>\n            <\/div>\n\n            <h4 class=\"headline\">BORDER-FIRST LAYOUT<\/h4>\n            <p class=\"deck\">\n              Un bloc titre \u00e9norme + texte lisible + composants visibles.\n              C\u2019est la base brutaliste : structure &gt; d\u00e9cor.\n            <\/p>\n\n            <div class=\"columns\">\n              <div class=\"block\"><strong>R\u00e8gle<\/strong><br>Utilise 1\u20132 tailles max, et fais le contraste par la graisse et les capitales.<\/div>\n              <div class=\"block\"><strong>R\u00e8gle<\/strong><br>Chaque section doit \u00eatre un \u201crectangle\u201d clair. Pas de flou.<\/div>\n            <\/div>\n\n            <div class=\"cta\">\n              <a class=\"brut-btn brut-btn--fill\" href=\"#bauhaus\">next: bauhaus \u2192<\/a>\n              <a class=\"brut-btn\" href=\"#y2k\">skip: y2k \u2192<\/a>\n            <\/div>\n          <\/div>\n        <\/aside>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n\n<!-- =======================\nSTYLE 02 \u2014 BAUHAUS \/ MODERNISME (ultra g\u00e9om\u00e9trique, \u201cdesign school\u201d)\nID: bauhaus (pour le scroll depuis le hero)\nPolice signature: Montserrat (titres + UI), Inter (texte long)\n======================= -->\n\n<style>\n  #bauhaus{ scroll-margin-top: 90px; }\n\n  .bau-wrap{max-width:1100px;margin:0 auto;padding:32px 16px;}\n\n  .bau{\n    border-radius:26px; overflow:hidden;\n    border:2px solid #111;\n    background:#fbfbfb;\n    color:#111;\n    position:relative;\n  }\n\n  \/* Bauhaus \u201ccomposition\u201d background: subtle geometry *\/\n  .bau::before{\n    content:\"\";\n    position:absolute; inset:0;\n    background:\n      radial-gradient(circle at 12% 18%, rgba(255,0,0,0.14) 0%, rgba(255,0,0,0) 58%),\n      radial-gradient(circle at 86% 32%, rgba(0,51,255,0.12) 0%, rgba(0,51,255,0) 62%),\n      radial-gradient(circle at 78% 86%, rgba(255,196,0,0.14) 0%, rgba(255,196,0,0) 60%);\n    pointer-events:none;\n  }\n\n  \/* Big Bauhaus header grid *\/\n  .bau-head{\n    position:relative;\n    padding:0;\n    border-bottom:2px solid #111;\n    background:\n      linear-gradient(90deg, rgba(17,17,17,0.08) 1px, transparent 1px),\n      linear-gradient(rgba(17,17,17,0.08) 1px, transparent 1px);\n    background-size: 28px 28px;\n  }\n\n  .bau-head-inner{\n    display:grid;\n    grid-template-columns: 1.15fr 0.85fr;\n    gap:0;\n    align-items:stretch;\n  }\n  @media (max-width: 900px){\n    .bau-head-inner{ grid-template-columns: 1fr; }\n  }\n\n  .bau-left{\n    padding:32px 32px 26px 32px;\n    background: rgba(255,255,255,0.88);\n    backdrop-filter: blur(6px);\n    border-right:2px solid #111;\n  }\n  @media (max-width: 900px){\n    .bau-left{ border-right:none; border-bottom:2px solid #111; }\n  }\n\n  .bau-meta{\n    font-family:\"Montserrat\", Arial, Helvetica, sans-serif;\n    font-size:12px; letter-spacing:0.18em; text-transform:uppercase;\n    font-weight:800;\n    display:flex; gap:10px; flex-wrap:wrap; align-items:center;\n  }\n  .bau-chip{\n    display:inline-flex; align-items:center; gap:8px;\n    border:2px solid #111;\n    padding:7px 10px;\n    border-radius:999px;\n    background:#fff;\n    line-height:1;\n  }\n  .bau-chip .dot{ width:10px;height:10px;border-radius:999px;display:inline-block; }\n  .dot-red{ background:#ff0000; }\n  .dot-blue{ background:#0033ff; }\n  .dot-yellow{ background:#ffc400; }\n  .dot-black{ background:#111; }\n\n  .bau-title{\n    margin:14px 0 10px 0;\n    font-family:\"Montserrat\", Arial, Helvetica, sans-serif;\n    font-size:42px; line-height:1.06;\n    font-weight:900;\n    letter-spacing:-0.05em;\n  }\n  .bau-title em{\n    font-style:normal;\n    background:#111; color:#fff;\n    padding:2px 8px;\n  }\n\n  .bau-lead{\n    margin:0;\n    font-family:\"Inter\", Arial, Helvetica, sans-serif;\n    font-size:16px; line-height:1.9;\n    max-width:92ch;\n    color:rgba(0,0,0,0.78);\n  }\n\n  \/* Right side: geometric poster *\/\n  .bau-right{\n    position:relative;\n    padding:24px;\n    background:#fff;\n  }\n\n  .bau-poster{\n    border:2px solid #111;\n    border-radius:22px;\n    padding:18px;\n    background:#fbfbfb;\n    position:relative;\n    overflow:hidden;\n  }\n\n  \/* geometric shapes inside poster *\/\n  .shape{\n    position:absolute;\n    border:2px solid #111;\n    opacity:0.95;\n  }\n  .shape.circle{ border-radius:999px; }\n  .shape.square{ border-radius:18px; }\n  .shape.tri{\n    width:0;height:0;border-left:42px solid transparent;border-right:42px solid transparent;\n    border-bottom:72px solid #ff0000;\n    border-top:none;\n    border-radius:0;\n    border-left-color:transparent;\n    border-right-color:transparent;\n    border-bottom-color:#ff0000;\n    filter: drop-shadow(0 2px 0 rgba(0,0,0,0.2));\n  }\n  .shape.red{ background:#ff0000; }\n  .shape.blue{ background:#0033ff; }\n  .shape.yellow{ background:#ffc400; }\n  .shape.white{ background:#fff; }\n  .shape.outline{ background:transparent; }\n\n  .bau-poster h4{\n    margin:0 0 10px 0;\n    font-family:\"Montserrat\", Arial, Helvetica, sans-serif;\n    font-size:18px;\n    font-weight:900;\n    letter-spacing:-0.02em;\n    text-transform:uppercase;\n  }\n  .bau-poster p{\n    margin:0;\n    font-family:\"Inter\", Arial, Helvetica, sans-serif;\n    font-size:14px;\n    line-height:1.75;\n    max-width:52ch;\n  }\n\n  .bau-poster .grid-demo{\n    margin-top:14px;\n    display:grid;\n    grid-template-columns: 1fr 1fr;\n    gap:12px;\n  }\n  .bau-box{\n    border:2px solid #111;\n    border-radius:18px;\n    background:#fff;\n    padding:12px;\n  }\n  .bau-box .k{\n    font-family:\"Montserrat\", Arial, Helvetica, sans-serif;\n    font-size:12px;\n    letter-spacing:0.16em;\n    text-transform:uppercase;\n    font-weight:900;\n    display:flex;gap:10px;align-items:center;\n    margin:0 0 8px 0;\n  }\n  .bau-box .bar{\n    height:10px;border-radius:999px;border:2px solid #111;\n    background: linear-gradient(90deg,#ff0000 0%, #ff0000 33%, #0033ff 33%, #0033ff 66%, #ffc400 66%, #ffc400 100%);\n  }\n  .bau-box .txt{\n    margin:0;\n    font-family:\"Inter\", Arial, Helvetica, sans-serif;\n    font-size:13px;line-height:1.75;\n    color:rgba(0,0,0,0.78);\n  }\n\n  \/* Body sections *\/\n  .bau-body{\n    padding:22px 22px 26px 22px;\n    position:relative;\n  }\n\n  .bau-columns{\n    display:grid;\n    grid-template-columns: 1.1fr 0.9fr;\n    gap:16px;\n    align-items:start;\n  }\n  @media (max-width: 900px){\n    .bau-columns{ grid-template-columns:1fr; }\n  }\n\n  .bau-panel{\n    border:2px solid #111;\n    border-radius:22px;\n    background:#fff;\n    padding:18px;\n  }\n\n  .bau-panel h3{\n    margin:0 0 12px 0;\n    font-family:\"Montserrat\", Arial, Helvetica, sans-serif;\n    font-size:14px;\n    letter-spacing:0.16em;\n    text-transform:uppercase;\n    font-weight:900;\n  }\n\n  .bau-prose{\n    font-family:\"Inter\", Arial, Helvetica, sans-serif;\n    font-size:16px;\n    line-height:1.95;\n    letter-spacing:0.01em;\n    max-width:92ch;\n    color:rgba(0,0,0,0.80);\n  }\n  .bau-prose p{ margin:0 0 14px 0; }\n  .bau-prose p:last-child{ margin-bottom:0; }\n\n  \/* Bauhaus \u201cprinciple cards\u201d *\/\n  .bau-rule{\n    display:flex; gap:12px; align-items:flex-start;\n    border:2px solid #111;\n    border-radius:18px;\n    background:#fbfbfb;\n    padding:12px;\n  }\n  .bau-mark{\n    width:40px;height:40px;border-radius:18px;\n    border:2px solid #111;\n    display:flex;align-items:center;justify-content:center;\n    font-family:\"Montserrat\", Arial, Helvetica, sans-serif;\n    font-weight:900;\n    background:#fff;\n  }\n  .bau-rule h4{\n    margin:0 0 6px 0;\n    font-family:\"Inter\", Arial, Helvetica, sans-serif;\n    font-size:15px;\n    font-weight:900;\n    letter-spacing:-0.01em;\n  }\n  .bau-rule p{\n    margin:0;\n    font-family:\"Inter\", Arial, Helvetica, sans-serif;\n    font-size:14px;\n    line-height:1.75;\n    color:rgba(0,0,0,0.78);\n  }\n\n  \/* Checklist chips *\/\n  .bau-chips{ display:flex; flex-wrap:wrap; gap:10px; }\n  .bau-chip2{\n    border:2px solid #111;\n    border-radius:999px;\n    padding:8px 10px;\n    font-family:\"Montserrat\", Arial, Helvetica, sans-serif;\n    font-size:12px;\n    letter-spacing:0.14em;\n    text-transform:uppercase;\n    font-weight:900;\n    background:#fff;\n    display:inline-flex;align-items:center;gap:8px;\n  }\n  .bau-chip2 .dot{ width:10px;height:10px;border-radius:999px; display:inline-block; }\n  .bau-chip2.red .dot{ background:#ff0000; }\n  .bau-chip2.blue .dot{ background:#0033ff; }\n  .bau-chip2.yellow .dot{ background:#ffc400; }\n  .bau-chip2.black .dot{ background:#111; }\n\n  \/* Footer nav *\/\n  .bau-nav{\n    margin-top:14px;\n    display:flex; gap:10px; flex-wrap:wrap;\n  }\n  .bau-btn{\n    display:inline-flex;align-items:center;justify-content:center;\n    border:2px solid #111;\n    border-radius:999px;\n    padding:10px 12px;\n    background:#fff;\n    color:#111;\n    font-family:\"Montserrat\", Arial, Helvetica, sans-serif;\n    font-size:12px; letter-spacing:0.14em; text-transform:uppercase;\n    font-weight:900;\n    text-decoration:none;\n    transition: transform .12s ease;\n  }\n  .bau-btn:hover{ transform: translateY(-1px); text-decoration:none; }\n  .bau-btn--fill{ background:#111; color:#fff; }\n\n  \/* Mobile safe *\/\n  .bau *{ box-sizing:border-box; }\n<\/style>\n\n<section class=\"bau-wrap\" id=\"bauhaus\">\n  <div class=\"bau\">\n    <header class=\"bau-head\">\n      <div class=\"bau-head-inner\">\n        <!-- LEFT: Info \/ Title -->\n        <div class=\"bau-left\">\n          <div class=\"bau-meta\">\n            <span class=\"bau-chip\"><span class=\"dot dot-black\"><\/span>STYLE 02<\/span>\n            <span class=\"bau-chip\"><span class=\"dot dot-red\"><\/span>BAUHAUS<\/span>\n            <span class=\"bau-chip\"><span class=\"dot dot-blue\"><\/span>MODERNISME<\/span>\n            <span class=\"bau-chip\"><span class=\"dot dot-yellow\"><\/span>GRILLE<\/span>\n          <\/div>\n\n          <h2 class=\"bau-title\">FORME + FONCTION = <em>RIGUEUR<\/em><\/h2>\n\n          <p class=\"bau-lead\">\n            Le Bauhaus et le modernisme posent une id\u00e9e nette : le design n\u2019est pas un d\u00e9cor, c\u2019est une <strong>architecture visuelle<\/strong>.\n            Ici, la beaut\u00e9 na\u00eet de la grille, des proportions, et de la g\u00e9om\u00e9trie \u2014 pas de l\u2019effet.\n          <\/p>\n        <\/div>\n\n        <!-- RIGHT: Geometric \u201cposter\u201d demo -->\n        <div class=\"bau-right\">\n          <div class=\"bau-poster\" aria-label=\"Mini composition Bauhaus\">\n            <!-- Shapes -->\n            <span class=\"shape circle red\" style=\"width:92px;height:92px;left:-18px;top:-18px;\"><\/span>\n            <span class=\"shape square blue\" style=\"width:78px;height:78px;right:-18px;top:18px;\"><\/span>\n            <span class=\"shape circle yellow\" style=\"width:64px;height:64px;right:26px;bottom:-18px;\"><\/span>\n            <span class=\"shape outline square\" style=\"width:110px;height:110px;left:40px;bottom:-42px;\"><\/span>\n            <span class=\"shape tri\" style=\"left:62%; top:54%;\"><\/span>\n\n            <h4>Mini composition<\/h4>\n            <p>\n              Formes simples + aplats primaires + grille visible. Chaque \u00e9l\u00e9ment a un r\u00f4le : rythme, poids, direction.\n            <\/p>\n\n            <div class=\"grid-demo\">\n              <div class=\"bau-box\">\n                <div class=\"k\">Palette<\/div>\n                <div class=\"bar\" aria-hidden=\"true\"><\/div>\n                <p class=\"txt\" style=\"margin-top:10px;\">\n                  Rouge \/ Bleu \/ Jaune + noir : contraste imm\u00e9diat, hi\u00e9rarchie facile.\n                <\/p>\n              <\/div>\n              <div class=\"bau-box\">\n                <div class=\"k\">R\u00e8gle<\/div>\n                <p class=\"txt\">\n                  Pas de gradients inutiles : si tu ajoutes, ajoute une fonction (s\u00e9parer, guider, structurer).\n                <\/p>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/header>\n\n    <div class=\"bau-body\">\n      <div class=\"bau-columns\">\n        <!-- LEFT: Long guide -->\n        <article class=\"bau-panel\">\n          <h3>Guide essentiel (texte long)<\/h3>\n\n          <div class=\"bau-prose\">\n            <p>\n              Pour construire un layout moderniste, commence par une <strong>grille<\/strong>. M\u00eame si elle est invisible au final,\n              elle doit exister dans ta t\u00eate : colonnes, marges, alignements. Ensuite, choisis un vocabulaire graphique limit\u00e9 :\n              formes g\u00e9om\u00e9triques, aplats francs, et une typographie nette (ici <strong>Montserrat<\/strong> pour l\u2019esprit \u201cg\u00e9om\u00e9trique\u201d).\n            <\/p>\n            <p>\n              Le style Bauhaus devient puissant quand tu joues sur <strong>les proportions<\/strong> : un grand cercle peut peser autant qu\u2019un\n              bloc de texte s\u2019il est plac\u00e9 au bon endroit. L\u2019objectif n\u2019est pas la d\u00e9coration, mais l\u2019\u00e9quilibre entre \u201cpoids visuel\u201d et \u201csilence\u201d.\n            <\/p>\n            <p>\n              Pour des paragraphes longs, garde la lisibilit\u00e9 : corps en <strong>Inter<\/strong>, interlignage haut, et une densit\u00e9 ma\u00eetris\u00e9e.\n              Les formes ne doivent pas parasiter la lecture : elles accompagnent la hi\u00e9rarchie, elles ne la remplacent pas.\n            <\/p>\n          <\/div>\n\n          <div style=\"height:14px;\"><\/div>\n\n          <div class=\"bau-rule\" style=\"margin-bottom:12px;\">\n            <div class=\"bau-mark\">01<\/div>\n            <div>\n              <h4>Grille d\u2019abord<\/h4>\n              <p>Si tu ne peux pas justifier un placement par la grille, c\u2019est probablement une d\u00e9co inutile.<\/p>\n            <\/div>\n          <\/div>\n\n          <div class=\"bau-rule\" style=\"margin-bottom:12px;\">\n            <div class=\"bau-mark\">02<\/div>\n            <div>\n              <h4>Palette limit\u00e9e<\/h4>\n              <p>Primaires + noir = contraste propre. Ajoute une teinte uniquement si elle apporte une fonction.<\/p>\n            <\/div>\n          <\/div>\n\n          <div class=\"bau-rule\">\n            <div class=\"bau-mark\">03<\/div>\n            <div>\n              <h4>Poids visuel<\/h4>\n              <p>Une forme \u201cp\u00e8se\u201d. Un texte \u201cp\u00e8se\u201d. Ton job = \u00e9quilibrer ces poids pour guider l\u2019\u0153il naturellement.<\/p>\n            <\/div>\n          <\/div>\n        <\/article>\n\n        <!-- RIGHT: Checklist + nav -->\n        <aside class=\"bau-panel\">\n          <h3>Checklist<\/h3>\n\n          <div class=\"bau-chips\" style=\"margin-bottom:14px;\">\n            <span class=\"bau-chip2 black\"><span class=\"dot\"><\/span>grille<\/span>\n            <span class=\"bau-chip2 red\"><span class=\"dot\"><\/span>aplats<\/span>\n            <span class=\"bau-chip2 blue\"><span class=\"dot\"><\/span>alignements<\/span>\n            <span class=\"bau-chip2 yellow\"><span class=\"dot\"><\/span>proportions<\/span>\n            <span class=\"bau-chip2 black\"><span class=\"dot\"><\/span>silence<\/span>\n            <span class=\"bau-chip2 black\"><span class=\"dot\"><\/span>2 typos max<\/span>\n          <\/div>\n\n          <div class=\"bau-prose\" style=\"font-size:14px;line-height:1.85;max-width:70ch;\">\n            <p>\n              Astuce : si ton layout \u201cfait vide\u201d, c\u2019est souvent bon signe. Le modernisme vise une clart\u00e9 quasi architecturale.\n              Ajoute une forme seulement si elle <strong>structure<\/strong> ou <strong>oriente<\/strong>.\n            <\/p>\n          <\/div>\n\n          <div class=\"bau-nav\">\n            <a class=\"bau-btn bau-btn--fill\" href=\"#y2k\">next: y2k \u2192<\/a>\n            <a class=\"bau-btn\" href=\"#brutalism\">\u2190 back: brutalism<\/a>\n          <\/div>\n        <\/aside>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n\n<!-- =======================\nSTYLE 03 \u2014 Y2K \/ FUTURISTE (chrome + glossy + UI \u201cd\u00e9but 2000\u201d)\nID: y2k (pour le scroll depuis le hero)\nPolice signature: Orbitron (titres\/labels), Inter (texte long)\n======================= -->\n\n<style>\n  #y2k{ scroll-margin-top: 90px; }\n  .y2k-wrap{max-width:1100px;margin:0 auto;padding:32px 16px;}\n\n  .y2k{\n    border-radius:28px;\n    overflow:hidden;\n    color:#0b0b0b;\n    border:1px solid rgba(0,0,0,0.14);\n    background:\n      radial-gradient(circle at 16% 22%, rgba(31,79,255,0.22) 0%, rgba(31,79,255,0) 55%),\n      radial-gradient(circle at 84% 78%, rgba(0,209,255,0.18) 0%, rgba(0,209,255,0) 58%),\n      radial-gradient(circle at 60% 12%, rgba(255,45,149,0.14) 0%, rgba(255,45,149,0) 60%),\n      linear-gradient(135deg, #ffffff 0%, #eef1ff 42%, #ffffff 100%);\n    box-shadow: 0 22px 70px rgba(0,0,0,0.10);\n    position:relative;\n  }\n\n  \/* Subtle glossy haze *\/\n  .y2k::before{\n    content:\"\";\n    position:absolute; inset:0;\n    background: linear-gradient(180deg, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.10) 55%, rgba(255,255,255,0.65) 100%);\n    opacity:0.55;\n    pointer-events:none;\n  }\n\n  \/* \u201cScanline\u201d micro texture *\/\n  .y2k::after{\n    content:\"\";\n    position:absolute; inset:0;\n    background: linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px);\n    background-size: 100% 6px;\n    opacity:0.18;\n    mix-blend-mode:multiply;\n    pointer-events:none;\n  }\n\n  .y2k-head{\n    position:relative;\n    padding:28px 28px 22px 28px;\n    border-bottom:1px solid rgba(0,0,0,0.12);\n    background: rgba(255,255,255,0.60);\n    backdrop-filter: blur(10px);\n  }\n\n  .y2k-meta{\n    display:flex;align-items:center;gap:10px;flex-wrap:wrap;\n    font-family:\"Orbitron\",\"Inter\",Arial,Helvetica,sans-serif;\n    font-size:12px;letter-spacing:0.16em;text-transform:uppercase;\n    font-weight:700;color:rgba(0,0,0,0.62);\n  }\n\n  \/* Tiny chrome badge *\/\n  .y2k-badge{\n    display:inline-flex;align-items:center;gap:8px;\n    padding:8px 12px;\n    border-radius:999px;\n    border:1px solid rgba(0,0,0,0.18);\n    background:\n      linear-gradient(180deg,#f7f7f7 0%,#c7c7c7 35%,#ffffff 62%,#a9a9a9 100%);\n    box-shadow:\n      0 10px 26px rgba(31,79,255,0.10),\n      inset 0 1px 0 rgba(255,255,255,0.85);\n    color:#0b0b0b;\n  }\n  .y2k-dot{\n    width:10px;height:10px;border-radius:999px;\n    background: radial-gradient(circle at 35% 35%, #00d1ff, #1f4fff);\n    box-shadow: 0 0 0 4px rgba(0,209,255,0.15);\n  }\n\n  .y2k-title{\n    margin:12px 0 10px 0;\n    font-family:\"Orbitron\",\"Inter\",Arial,Helvetica,sans-serif;\n    font-size:40px;\n    line-height:1.08;\n    letter-spacing:-0.02em;\n    font-weight:700;\n  }\n  .y2k-title .gloss{\n    padding:2px 8px;\n    border-radius:12px;\n    background: rgba(255,255,255,0.55);\n    border: 1px solid rgba(0,0,0,0.10);\n    box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);\n  }\n\n  .y2k-lead{\n    margin:0;\n    font-family:\"Inter\", Arial, Helvetica, sans-serif;\n    font-size:16px; line-height:1.9;\n    max-width:92ch;\n    color:rgba(0,0,0,0.76);\n  }\n\n  .y2k-body{\n    position:relative;\n    padding:22px 22px 26px 22px;\n  }\n\n  .y2k-grid{\n    display:grid;\n    grid-template-columns: 1.1fr 0.9fr;\n    gap:16px;\n    align-items:start;\n  }\n  @media (max-width: 900px){\n    .y2k-grid{ grid-template-columns:1fr; }\n  }\n\n  .y2k-panel{\n    border-radius:22px;\n    border:1px solid rgba(0,0,0,0.14);\n    background: rgba(255,255,255,0.65);\n    backdrop-filter: blur(10px);\n    box-shadow: 0 18px 46px rgba(0,0,0,0.10);\n    overflow:hidden;\n  }\n\n  .y2k-panel .top{\n    padding:14px 16px;\n    border-bottom:1px solid rgba(0,0,0,0.12);\n    display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;\n    background: rgba(255,255,255,0.60);\n  }\n\n  .y2k-panel h3{\n    margin:0;\n    font-family:\"Orbitron\",\"Inter\",Arial,Helvetica,sans-serif;\n    font-size:13px;\n    letter-spacing:0.16em;\n    text-transform:uppercase;\n    font-weight:700;\n    color:rgba(0,0,0,0.72);\n  }\n\n  .y2k-pill{\n    display:inline-flex;align-items:center;gap:8px;\n    padding:8px 10px;border-radius:999px;\n    border:1px solid rgba(0,0,0,0.16);\n    background: rgba(255,255,255,0.75);\n    font-family:\"Inter\", Arial, Helvetica, sans-serif;\n    font-size:12px;letter-spacing:0.12em;text-transform:uppercase;\n    color:rgba(0,0,0,0.70);\n  }\n\n  .y2k-content{ padding:18px; }\n\n  \/* Readable long text *\/\n  .y2k-prose{\n    font-family:\"Inter\", Arial, Helvetica, sans-serif;\n    font-size:16px;\n    line-height:1.95;\n    letter-spacing:0.01em;\n    max-width:92ch;\n    color:rgba(0,0,0,0.80);\n  }\n  .y2k-prose p{ margin:0 0 14px 0; }\n  .y2k-prose p:last-child{ margin-bottom:0; }\n  .y2k-prose strong{ font-weight:800; }\n\n  \/* UI demo: \u201cControl Deck\u201d *\/\n  .deck{\n    border-radius:22px;\n    border:1px solid rgba(0,0,0,0.14);\n    background:\n      radial-gradient(circle at 20% 25%, rgba(0,209,255,0.18) 0%, rgba(0,209,255,0) 60%),\n      linear-gradient(180deg, rgba(255,255,255,0.80) 0%, rgba(255,255,255,0.55) 100%);\n    box-shadow: 0 18px 46px rgba(31,79,255,0.12);\n    overflow:hidden;\n  }\n  .deck-top{\n    padding:14px 16px;\n    border-bottom:1px solid rgba(0,0,0,0.12);\n    display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;\n  }\n  .deck-brand{\n    display:flex;align-items:center;gap:10px;\n    font-family:\"Orbitron\",\"Inter\",Arial,Helvetica,sans-serif;\n    letter-spacing:0.12em;\n    text-transform:uppercase;\n    font-size:12px;\n    color:rgba(0,0,0,0.70);\n  }\n  .deck-brand .orb{\n    width:16px;height:16px;border-radius:999px;\n    background: radial-gradient(circle at 30% 30%, #ffffff 0%, #00d1ff 35%, #1f4fff 100%);\n    border:1px solid rgba(0,0,0,0.18);\n    box-shadow: 0 8px 22px rgba(31,79,255,0.14);\n  }\n  .deck-controls{\n    display:flex;gap:10px;flex-wrap:wrap;align-items:center;\n  }\n  .btn-y2k{\n    appearance:none;\n    border:1px solid rgba(0,0,0,0.18);\n    background:\n      linear-gradient(180deg,#f7f7f7 0%,#c7c7c7 35%,#ffffff 62%,#a9a9a9 100%);\n    border-radius:999px;\n    padding:10px 12px;\n    font-family:\"Orbitron\",\"Inter\",Arial,Helvetica,sans-serif;\n    font-size:12px;\n    letter-spacing:0.14em;\n    text-transform:uppercase;\n    color:#0b0b0b;\n    cursor:pointer;\n    box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 14px 30px rgba(0,0,0,0.10);\n    transition: transform .12s ease;\n  }\n  .btn-y2k:hover{ transform: translateY(-1px); }\n  .btn-y2k.primary{\n    background: linear-gradient(180deg, #ffffff 0%, #dfe6ff 48%, #ffffff 100%);\n    border-color: rgba(31,79,255,0.35);\n    box-shadow: inset 0 1px 0 rgba(255,255,255,0.90), 0 18px 40px rgba(31,79,255,0.14);\n  }\n\n  .deck-body{ padding:16px; }\n\n  .sliders{\n    display:grid;\n    grid-template-columns: 1fr;\n    gap:12px;\n    margin-bottom:14px;\n  }\n  .slider{\n    border:1px solid rgba(0,0,0,0.14);\n    border-radius:18px;\n    background: rgba(255,255,255,0.65);\n    padding:12px;\n  }\n  .slider .row{\n    display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;\n    margin-bottom:10px;\n    font-family:\"Inter\", Arial, Helvetica, sans-serif;\n    font-size:13px;\n    color:rgba(0,0,0,0.72);\n  }\n  .slider .bar{\n    height:12px;\n    border-radius:999px;\n    border:1px solid rgba(0,0,0,0.16);\n    background:\n      linear-gradient(90deg, rgba(255,45,149,0.40) 0%, rgba(0,209,255,0.35) 55%, rgba(31,79,255,0.35) 100%);\n    position:relative;\n    overflow:hidden;\n  }\n  .slider .knob{\n    position:absolute;top:-5px;left:68%;\n    width:22px;height:22px;border-radius:999px;\n    background: radial-gradient(circle at 30% 30%, #ffffff 0%, #c7c7c7 45%, #ffffff 75%, #9e9e9e 100%);\n    border:1px solid rgba(0,0,0,0.20);\n    box-shadow: 0 10px 24px rgba(0,0,0,0.16);\n  }\n\n  \/* Checklist chips *\/\n  .y2k-chips{ display:flex;flex-wrap:wrap;gap:10px; }\n  .chip{\n    border-radius:999px;\n    padding:8px 10px;\n    border:1px solid rgba(0,0,0,0.16);\n    background: rgba(255,255,255,0.70);\n    font-family:\"Inter\", Arial, Helvetica, sans-serif;\n    font-size:12px;letter-spacing:0.12em;text-transform:uppercase;\n    color:rgba(0,0,0,0.70);\n  }\n  .chip.chrome{\n    font-family:\"Orbitron\",\"Inter\",Arial,Helvetica,sans-serif;\n    background: linear-gradient(180deg,#f7f7f7 0%,#c7c7c7 35%,#ffffff 62%,#a9a9a9 100%);\n  }\n  .chip.holo{\n    border-color: rgba(31,79,255,0.25);\n    box-shadow: 0 14px 36px rgba(31,79,255,0.12);\n  }\n\n  \/* Footer nav *\/\n  .y2k-nav{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }\n  .y2k-link{\n    text-decoration:none;\n    display:inline-flex;align-items:center;justify-content:center;\n    border-radius:999px;\n    padding:10px 12px;\n    border:1px solid rgba(0,0,0,0.16);\n    background: rgba(255,255,255,0.70);\n    font-family:\"Orbitron\",\"Inter\",Arial,Helvetica,sans-serif;\n    font-size:12px;\n    letter-spacing:0.14em;\n    text-transform:uppercase;\n    color:rgba(0,0,0,0.78);\n    transition: transform .12s ease;\n  }\n  .y2k-link:hover{ transform: translateY(-1px); }\n  .y2k-link.primary{\n    background: linear-gradient(180deg, #ffffff 0%, #dfe6ff 48%, #ffffff 100%);\n    border-color: rgba(31,79,255,0.35);\n  }\n\n  \/* Accessibility: reduced motion *\/\n  @media (prefers-reduced-motion: reduce){\n    .btn-y2k, .y2k-link{ transition:none; }\n  }\n\n  .y2k *{ box-sizing:border-box; }\n<\/style>\n\n<section class=\"y2k-wrap\" id=\"y2k\">\n  <div class=\"y2k\">\n    <header class=\"y2k-head\">\n      <div class=\"y2k-meta\">\n        <span class=\"y2k-badge\"><span class=\"y2k-dot\"><\/span>STYLE 03<\/span>\n        <span class=\"y2k-badge\">Y2K<\/span>\n        <span class=\"y2k-badge\">FUTURISTE<\/span>\n        <span class=\"y2k-badge\">GLOSSY \/ CHROME<\/span>\n      <\/div>\n\n      <h2 class=\"y2k-title\"><span class=\"gloss\">Y2K<\/span> \/ UI CHROME &amp; GLOSS<\/h2>\n\n      <p class=\"y2k-lead\">\n        Le style Y2K est une nostalgie technologique : interfaces \u201chardware\u201d, chrome, reflets, holographie l\u00e9g\u00e8re.\n        La cl\u00e9 : <strong>garder la lecture propre<\/strong> (texte long en Inter) et r\u00e9server l\u2019effet \u201cglossy\u201d \u00e0 l\u2019UI et aux titres.\n      <\/p>\n    <\/header>\n\n    <div class=\"y2k-body\">\n      <div class=\"y2k-grid\">\n        <!-- LEFT: Guide long -->\n        <article class=\"y2k-panel\">\n          <div class=\"top\">\n            <h3>Guide essentiel (texte long)<\/h3>\n            <span class=\"y2k-pill\">Orbitron + Inter<\/span>\n          <\/div>\n          <div class=\"y2k-content\">\n            <div class=\"y2k-prose\">\n              <p>\n                Un bon Y2K commence par un contraste diff\u00e9rent du brutalism : ce n\u2019est pas \u201cnoir\/blanc\u201d, c\u2019est\n                <strong>blanc lumineux<\/strong> + <strong>accents froids<\/strong> (bleu \u00e9lectrique, cyan, violet doux).\n                Le fond doit rester a\u00e9rien, presque \u201cplastique\u201d.\n              <\/p>\n              <p>\n                Ensuite, choisis o\u00f9 mettre l\u2019effet chrome. R\u00e9ponse : sur les \u00e9l\u00e9ments fonctionnels.\n                Badges, boutons, sliders, \u201ccards\u201d d\u2019UI. Le texte long, lui, doit rester neutre.\n                C\u2019est \u00e7a qui rend le style utilisable : <strong>l\u2019effet est un langage, pas un bruit<\/strong>.\n              <\/p>\n              <p>\n                Niveau typographie : une police techno pour la signal\u00e9tique (<strong>Orbitron<\/strong>) et une police de lecture pour les paragraphes (<strong>Inter<\/strong>).\n                Avec de longs contenus, garde un interlignage haut et une densit\u00e9 contr\u00f4l\u00e9e : le futur, c\u2019est lisible.\n              <\/p>\n            <\/div>\n\n            <div style=\"height:14px;\"><\/div>\n\n            <div class=\"y2k-chips\">\n              <span class=\"chip chrome\">chrome UI<\/span>\n              <span class=\"chip holo\">holo accents<\/span>\n              <span class=\"chip\">fond clair<\/span>\n              <span class=\"chip\">2\u20133 couleurs<\/span>\n              <span class=\"chip\">texte long neutre<\/span>\n              <span class=\"chip\">gloss = fonction<\/span>\n            <\/div>\n\n            <div class=\"y2k-nav\">\n              <a class=\"y2k-link\" href=\"#bauhaus\">\u2190 back: bauhaus<\/a>\n              <a class=\"y2k-link primary\" href=\"#synthwave\">next: synthwave \u2192<\/a>\n            <\/div>\n          <\/div>\n        <\/article>\n\n        <!-- RIGHT: Y2K UI demo (control deck) -->\n        <aside class=\"deck\" aria-label=\"D\u00e9monstration UI Y2K\">\n          <div class=\"deck-top\">\n            <div class=\"deck-brand\"><span class=\"orb\"><\/span>DA \/ CONTROL DECK<\/div>\n            <div class=\"deck-controls\">\n              <button class=\"btn-y2k\" type=\"button\">scan<\/button>\n              <button class=\"btn-y2k primary\" type=\"button\">apply<\/button>\n            <\/div>\n          <\/div>\n\n          <div class=\"deck-body\">\n            <div class=\"sliders\">\n              <div class=\"slider\">\n                <div class=\"row\"><span>Gloss intensity<\/span><strong>68%<\/strong><\/div>\n                <div class=\"bar\"><span class=\"knob\" aria-hidden=\"true\"><\/span><\/div>\n              <\/div>\n              <div class=\"slider\">\n                <div class=\"row\"><span>Holo accent<\/span><strong>52%<\/strong><\/div>\n                <div class=\"bar\"><span class=\"knob\" style=\"left:52%;\" aria-hidden=\"true\"><\/span><\/div>\n              <\/div>\n              <div class=\"slider\">\n                <div class=\"row\"><span>UI softness<\/span><strong>74%<\/strong><\/div>\n                <div class=\"bar\"><span class=\"knob\" style=\"left:74%;\" aria-hidden=\"true\"><\/span><\/div>\n              <\/div>\n            <\/div>\n\n            <div class=\"y2k-prose\" style=\"font-size:14px;line-height:1.85;max-width:70ch;margin:0;\">\n              <p style=\"margin:0;\">\n                Ici, les composants \u201chardware\u201d (sliders\/boutons\/badges) portent l\u2019identit\u00e9.\n                Ton contenu long reste clean : c\u2019est ce qui rend le Y2K cr\u00e9dible sur un site r\u00e9el.\n              <\/p>\n            <\/div>\n          <\/div>\n        <\/aside>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n\n<!-- =======================\nSTYLE 04 \u2014 SYNTHWAVE \/ VAPORWAVE (n\u00e9ons + gradients + nuit)\nID: synthwave (pour le scroll depuis le hero)\nPolice signature: Oxanium (titres\/labels), Inter (texte long)\nUltra visuel + tr\u00e8s lisible\n======================= -->\n\n<style>\n  #synthwave{ scroll-margin-top: 90px; }\n\n  .sw-wrap{max-width:1100px;margin:0 auto;padding:32px 16px;}\n  .sw{\n    border-radius:28px; overflow:hidden;\n    border:1px solid rgba(255,255,255,0.18);\n    color:#fff;\n    position:relative;\n    box-shadow: 0 30px 90px rgba(0,0,0,0.45);\n    background:\n      radial-gradient(circle at 18% 20%, rgba(255,45,149,0.40) 0%, rgba(255,45,149,0) 55%),\n      radial-gradient(circle at 80% 78%, rgba(0,209,255,0.35) 0%, rgba(0,209,255,0) 58%),\n      radial-gradient(circle at 55% 10%, rgba(155,71,255,0.24) 0%, rgba(155,71,255,0) 60%),\n      linear-gradient(180deg, #0a0018 0%, #12002f 40%, #24005a 72%, #070014 100%);\n  }\n\n  \/* starfield + scanlines *\/\n  .sw::before{\n    content:\"\";\n    position:absolute; inset:0;\n    background:\n      radial-gradient(rgba(255,255,255,0.22) 1px, transparent 1px),\n      radial-gradient(rgba(255,255,255,0.16) 1px, transparent 1px),\n      linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);\n    background-size: 140px 140px, 90px 90px, 100% 7px;\n    background-position: 0 0, 40px 60px, 0 0;\n    opacity:0.22;\n    pointer-events:none;\n    mix-blend-mode: screen;\n  }\n\n  \/* grid floor illusion *\/\n  .sw::after{\n    content:\"\";\n    position:absolute; left:-20%; right:-20%; bottom:-20%;\n    height:48%;\n    background:\n      linear-gradient(rgba(0,209,255,0.22) 1px, transparent 1px),\n      linear-gradient(90deg, rgba(0,209,255,0.22) 1px, transparent 1px);\n    background-size: 34px 34px;\n    transform: perspective(800px) rotateX(62deg);\n    transform-origin: bottom center;\n    opacity:0.18;\n    pointer-events:none;\n  }\n\n  .sw-head{\n    position:relative;\n    padding:30px 30px 18px 30px;\n    border-bottom:1px solid rgba(255,255,255,0.16);\n    background: linear-gradient(180deg, rgba(14,14,14,0.48) 0%, rgba(14,14,14,0.12) 100%);\n    backdrop-filter: blur(8px);\n  }\n\n  .sw-meta{\n    display:flex;gap:10px;flex-wrap:wrap;align-items:center;\n    font-family:\"Oxanium\",\"Inter\",Arial,Helvetica,sans-serif;\n    font-size:12px;letter-spacing:0.18em;text-transform:uppercase;\n    font-weight:700;\n    color:rgba(255,255,255,0.78);\n  }\n\n  .sw-badge{\n    display:inline-flex;align-items:center;gap:8px;\n    padding:8px 12px;border-radius:999px;\n    border:1px solid rgba(255,255,255,0.22);\n    background: rgba(14,14,14,0.38);\n    box-shadow:\n      0 18px 42px rgba(0,0,0,0.45),\n      inset 0 1px 0 rgba(255,255,255,0.10);\n  }\n  .sw-orb{\n    width:10px;height:10px;border-radius:999px;\n    background: radial-gradient(circle at 35% 35%, #ffffff 0%, #ff2d95 40%, #7a2cff 75%, #00d1ff 100%);\n    box-shadow: 0 0 0 5px rgba(255,45,149,0.12), 0 0 28px rgba(0,209,255,0.20);\n  }\n\n  .sw-title{\n    margin:12px 0 10px 0;\n    font-family:\"Oxanium\",\"Inter\",Arial,Helvetica,sans-serif;\n    font-size:42px;\n    font-weight:700;\n    letter-spacing:-0.02em;\n    line-height:1.07;\n  }\n  .neon-pink{\n    color:#ff2d95;\n    text-shadow:0 0 6px rgba(255,45,149,0.90), 0 0 22px rgba(255,45,149,0.60), 0 0 48px rgba(255,45,149,0.35);\n  }\n  .neon-cyan{\n    color:#00d1ff;\n    text-shadow:0 0 6px rgba(0,209,255,0.90), 0 0 22px rgba(0,209,255,0.60), 0 0 48px rgba(0,209,255,0.35);\n  }\n  .neon-violet{\n    color:#b86bff;\n    text-shadow:0 0 6px rgba(184,107,255,0.85), 0 0 22px rgba(184,107,255,0.55), 0 0 48px rgba(184,107,255,0.35);\n  }\n\n  .sw-lead{\n    margin:0;\n    font-family:\"Inter\", Arial, Helvetica, sans-serif;\n    font-size:16px; line-height:1.95;\n    max-width:92ch;\n    color:rgba(255,255,255,0.90);\n  }\n\n  .sw-body{ position:relative; padding:22px 22px 26px 22px; }\n  .sw-grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap:16px; align-items:start; }\n  @media (max-width: 900px){ .sw-grid{ grid-template-columns:1fr; } }\n\n  .sw-panel{\n    border-radius:22px;\n    border:1px solid rgba(255,255,255,0.18);\n    background: rgba(14,14,14,0.38);\n    box-shadow: 0 20px 60px rgba(0,0,0,0.35);\n    overflow:hidden;\n    backdrop-filter: blur(10px);\n  }\n  .sw-panel .top{\n    padding:14px 16px;\n    border-bottom:1px solid rgba(255,255,255,0.14);\n    display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;\n    background: rgba(14,14,14,0.32);\n  }\n  .sw-panel h3{\n    margin:0;\n    font-family:\"Oxanium\",\"Inter\",Arial,Helvetica,sans-serif;\n    font-size:13px;letter-spacing:0.18em;text-transform:uppercase;\n    font-weight:700;color:rgba(255,255,255,0.82);\n  }\n  .sw-pill{\n    display:inline-flex;align-items:center;gap:8px;\n    padding:8px 10px;border-radius:999px;\n    border:1px solid rgba(255,255,255,0.18);\n    background: rgba(255,255,255,0.06);\n    font-family:\"Inter\", Arial, Helvetica, sans-serif;\n    font-size:12px;letter-spacing:0.12em;text-transform:uppercase;\n    color:rgba(255,255,255,0.80);\n  }\n\n  .sw-content{ padding:18px; }\n\n  \/* Readable long text *\/\n  .sw-prose{\n    font-family:\"Inter\", Arial, Helvetica, sans-serif;\n    font-size:16px;\n    line-height:1.95;\n    letter-spacing:0.01em;\n    max-width:92ch;\n    color:rgba(255,255,255,0.90);\n  }\n  .sw-prose p{ margin:0 0 14px 0; }\n  .sw-prose p:last-child{ margin-bottom:0; }\n  .sw-prose strong{ font-weight:800; }\n\n  \/* Palette bar (clickless but punchy) *\/\n  .sw-palette{\n    border-radius:18px;\n    border:1px solid rgba(255,255,255,0.18);\n    overflow:hidden;\n    background: rgba(0,0,0,0.18);\n  }\n  .sw-palette .row{\n    display:grid;\n    grid-template-columns: 1fr 1fr 1fr 1fr;\n  }\n  .sw-swatch{\n    padding:14px 12px;\n    border-right:1px solid rgba(255,255,255,0.12);\n    display:flex;align-items:center;justify-content:space-between;gap:10px;\n    font-family:\"Inter\", Arial, Helvetica, sans-serif;\n    font-size:12px;letter-spacing:0.12em;text-transform:uppercase;\n    color:rgba(255,255,255,0.85);\n  }\n  .sw-swatch:last-child{ border-right:none; }\n  .sw-swatch code{\n    font-family:\"Oxanium\",\"Inter\",Arial,Helvetica,sans-serif;\n    font-size:12px;\n    background: rgba(0,0,0,0.22);\n    border:1px solid rgba(255,255,255,0.14);\n    padding:3px 8px;\n    border-radius:999px;\n    color:rgba(255,255,255,0.9);\n  }\n  @media (max-width:900px){\n    .sw-palette .row{ grid-template-columns:1fr 1fr; }\n  }\n\n  \/* Neon \u201cmodules\u201d *\/\n  .sw-mods{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }\n  @media (max-width:900px){ .sw-mods{ grid-template-columns:1fr; } }\n\n  .sw-mod{\n    border-radius:18px;\n    border:1px solid rgba(255,255,255,0.18);\n    background: rgba(0,0,0,0.18);\n    padding:14px;\n    position:relative;\n    overflow:hidden;\n  }\n  .sw-mod::before{\n    content:\"\";\n    position:absolute; inset:-2px;\n    background:\n      radial-gradient(circle at 20% 30%, rgba(255,45,149,0.22) 0%, rgba(255,45,149,0) 55%),\n      radial-gradient(circle at 78% 70%, rgba(0,209,255,0.20) 0%, rgba(0,209,255,0) 58%);\n    opacity:0.8;\n    pointer-events:none;\n  }\n  .sw-mod h4{\n    position:relative;\n    margin:0 0 8px 0;\n    font-family:\"Oxanium\",\"Inter\",Arial,Helvetica,sans-serif;\n    letter-spacing:0.16em;\n    text-transform:uppercase;\n    font-size:13px;\n    color:rgba(255,255,255,0.92);\n  }\n  .sw-mod p{\n    position:relative;\n    margin:0;\n    font-family:\"Inter\", Arial, Helvetica, sans-serif;\n    font-size:14px;\n    line-height:1.85;\n    color:rgba(255,255,255,0.86);\n  }\n\n  \/* Checklist chips *\/\n  .sw-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }\n  .sw-chip{\n    border-radius:999px;\n    padding:9px 10px;\n    border:1px solid rgba(255,255,255,0.18);\n    background: rgba(255,255,255,0.06);\n    font-family:\"Inter\", Arial, Helvetica, sans-serif;\n    font-size:12px;letter-spacing:0.12em;text-transform:uppercase;\n    color:rgba(255,255,255,0.82);\n  }\n  .sw-chip.hot{\n    border-color: rgba(255,45,149,0.35);\n    box-shadow: 0 0 0 4px rgba(255,45,149,0.10);\n  }\n  .sw-chip.cool{\n    border-color: rgba(0,209,255,0.35);\n    box-shadow: 0 0 0 4px rgba(0,209,255,0.10);\n  }\n\n  \/* Footer nav *\/\n  .sw-nav{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }\n  .sw-link{\n    text-decoration:none;\n    display:inline-flex;align-items:center;justify-content:center;\n    border-radius:999px;\n    padding:10px 12px;\n    border:1px solid rgba(255,255,255,0.18);\n    background: rgba(255,255,255,0.06);\n    font-family:\"Oxanium\",\"Inter\",Arial,Helvetica,sans-serif;\n    font-size:12px;\n    letter-spacing:0.14em;\n    text-transform:uppercase;\n    color:rgba(255,255,255,0.88);\n    transition: transform .12s ease;\n  }\n  .sw-link:hover{ transform: translateY(-1px); }\n  .sw-link.primary{\n    background: linear-gradient(90deg, rgba(255,45,149,0.22), rgba(0,209,255,0.18));\n    border-color: rgba(255,255,255,0.22);\n  }\n\n  @media (prefers-reduced-motion: reduce){\n    .sw-link{ transition:none; }\n  }\n\n  .sw *{ box-sizing:border-box; }\n<\/style>\n\n<section class=\"sw-wrap\" id=\"synthwave\">\n  <div class=\"sw\">\n    <header class=\"sw-head\">\n      <div class=\"sw-meta\">\n        <span class=\"sw-badge\"><span class=\"sw-orb\"><\/span>STYLE 04<\/span>\n        <span class=\"sw-badge\">SYNTHWAVE<\/span>\n        <span class=\"sw-badge\">VAPORWAVE<\/span>\n        <span class=\"sw-badge\">NEON \/ NIGHT<\/span>\n      <\/div>\n\n      <h2 class=\"sw-title\">\n        <span class=\"neon-pink\">NEON<\/span> + <span class=\"neon-cyan\">GRADIENTS<\/span> + <span class=\"neon-violet\">NIGHT<\/span>\n      <\/h2>\n\n      <p class=\"sw-lead\">\n        Synthwave = r\u00e9tro-futur + contrastes ma\u00eetris\u00e9s. Le secret : <strong>un fond profond<\/strong> (nuit),\n        <strong>deux accents n\u00e9on<\/strong> (rose\/cyan), et une typographie techno pour les titres \u2014 mais un texte long en Inter pour rester confortable.\n      <\/p>\n    <\/header>\n\n    <div class=\"sw-body\">\n      <div class=\"sw-grid\">\n        <!-- LEFT: Guide long + palette -->\n        <article class=\"sw-panel\">\n          <div class=\"top\">\n            <h3>Guide essentiel (texte long)<\/h3>\n            <span class=\"sw-pill\">Oxanium + Inter<\/span>\n          <\/div>\n\n          <div class=\"sw-content\">\n            <div class=\"sw-prose\">\n              <p>\n                Pour un rendu synthwave cr\u00e9dible, pense \u201ccin\u00e9ma nocturne\u201d. Le fond doit \u00eatre <strong>tr\u00e8s sombre<\/strong> mais pas noir pur :\n                utilise des bleus\/violets profonds pour garder de la mati\u00e8re. Ensuite, choisis <strong>deux couleurs laser<\/strong> (souvent rose + cyan)\n                et d\u00e9cide \u00e0 quoi elles servent : liens, \u00e9l\u00e9ments interactifs, accents de titres, ou micro-ic\u00f4nes.\n              <\/p>\n              <p>\n                Le pi\u00e8ge principal : trop d\u2019effets. Ici, la glow n\u2019est pas un remplissage : c\u2019est une <strong>ponctuation<\/strong>.\n                Garde des zones \u201csilencieuses\u201d (noires) pour donner du poids aux n\u00e9ons. Et pour les paragraphes longs,\n                garde un interlignage haut : ton lecteur doit pouvoir lire sans fatigue, m\u00eame dans une ambiance charg\u00e9e.\n              <\/p>\n              <p>\n                Enfin, structure tes sections comme une sc\u00e8ne : <strong>intro<\/strong> (accroche), <strong>contenu<\/strong> (lisible),\n                <strong>modules<\/strong> (checklist \/ palette \/ tips). Le style devient \u201cpro\u201d quand l\u2019architecture du contenu reste nette.\n              <\/p>\n            <\/div>\n\n            <div style=\"height:14px;\"><\/div>\n\n            <div class=\"sw-palette\" aria-label=\"Palette synthwave\">\n              <div class=\"row\">\n                <div class=\"sw-swatch\" style=\"background:#ff2d95;\">\n                  Pink Laser <code>#ff2d95<\/code>\n                <\/div>\n                <div class=\"sw-swatch\" style=\"background:#00d1ff;\">\n                  Cyan Beam <code>#00d1ff<\/code>\n                <\/div>\n                <div class=\"sw-swatch\" style=\"background:#b86bff;\">\n                  Violet Glow <code>#b86bff<\/code>\n                <\/div>\n                <div class=\"sw-swatch\" style=\"background:#0a0018;\">\n                  Night Base <code>#0a0018<\/code>\n                <\/div>\n              <\/div>\n            <\/div>\n\n            <div class=\"sw-chips\">\n              <span class=\"sw-chip hot\">2 accents max<\/span>\n              <span class=\"sw-chip cool\">fond violet\/bleu<\/span>\n              <span class=\"sw-chip\">glow = ponctuation<\/span>\n              <span class=\"sw-chip\">grille l\u00e9g\u00e8re<\/span>\n              <span class=\"sw-chip\">texte long lisible<\/span>\n              <span class=\"sw-chip\">modules &amp; rythme<\/span>\n            <\/div>\n\n            <div class=\"sw-nav\">\n              <a class=\"sw-link\" href=\"#y2k\">\u2190 back: y2k<\/a>\n              <a class=\"sw-link primary\" href=\"#vintage\">next: vintage \u2192<\/a>\n            <\/div>\n          <\/div>\n        <\/article>\n\n        <!-- RIGHT: Modules (tips ultra visuels) -->\n        <aside class=\"sw-panel\">\n          <div class=\"top\">\n            <h3>Modules visuels<\/h3>\n            <span class=\"sw-pill\">effets contr\u00f4l\u00e9s<\/span>\n          <\/div>\n\n          <div class=\"sw-content\">\n            <div class=\"sw-mods\">\n              <div class=\"sw-mod\">\n                <h4>Glow discipline<\/h4>\n                <p>\n                  Donne une glow forte \u00e0 <strong>1 \u00e9l\u00e9ment<\/strong> par section.\n                  Les autres accents restent plus calmes (opacit\u00e9 + l\u00e9g\u00e8re lueur).\n                <\/p>\n              <\/div>\n              <div class=\"sw-mod\">\n                <h4>Depth<\/h4>\n                <p>\n                  M\u00e9lange 2 noirs : un \u201cnight base\u201d + un noir l\u00e9g\u00e8rement violet.\n                  \u00c7a donne une profondeur sans \u00e9craser le texte.\n                <\/p>\n              <\/div>\n              <div class=\"sw-mod\">\n                <h4>Typography<\/h4>\n                <p>\n                  Titres techno (Oxanium), mais paragraphes en Inter.\n                  C\u2019est le combo qui \u00e9vite l\u2019effet \u201caffiche illisible\u201d.\n                <\/p>\n              <\/div>\n              <div class=\"sw-mod\">\n                <h4>Neon paths<\/h4>\n                <p>\n                  Utilise le rose\/cyan pour guider : liens, boutons, tags.\n                  Les n\u00e9ons doivent <strong>servir la navigation<\/strong>.\n                <\/p>\n              <\/div>\n            <\/div>\n\n            <div style=\"height:14px;\"><\/div>\n\n            <div class=\"sw-prose\" style=\"font-size:14px;line-height:1.9;max-width:80ch;\">\n              <p style=\"margin:0;\">\n                Si tu veux aller encore plus loin, on peut ajouter un \u201cposter\u201d retro-futur \u00e0 droite,\n                ou une fausse UI d\u2019album\/playlist (buttons n\u00e9on, toggles). Mais d\u00e9j\u00e0, ce bloc te donne\n                une identit\u00e9 synthwave tr\u00e8s \u201cwow\u201d tout en restant clean pour du contenu long.\n              <\/p>\n            <\/div>\n          <\/div>\n        <\/aside>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n\n<!-- =======================\nSTYLE 05 \u2014 R\u00c9TRO \/ VINTAGE (papier + encre + affiche)\nID: vintage (pour le scroll depuis le hero)\nTypos: Playfair Display (titres), Montserrat (labels\/UI), Inter (texte long)\n=> + de diversit\u00e9 typographique, mais lisibilit\u00e9 conserv\u00e9e\n======================= -->\n\n<style>\n  #vintage{ scroll-margin-top: 90px; }\n  .vin-wrap{max-width:1100px;margin:0 auto;padding:32px 16px;}\n\n  .vin{\n    border-radius:26px;\n    overflow:hidden;\n    border:2px solid rgba(30,24,18,0.60);\n    color:#1a1510;\n    background:\n      radial-gradient(circle at 18% 22%, rgba(120,72,30,0.18) 0%, rgba(120,72,30,0) 55%),\n      radial-gradient(circle at 82% 78%, rgba(20,80,70,0.10) 0%, rgba(20,80,70,0) 60%),\n      linear-gradient(180deg, #fbf3e6 0%, #f7ead8 55%, #f3e1c8 100%);\n    box-shadow: 0 24px 70px rgba(0,0,0,0.14);\n    position:relative;\n  }\n\n  \/* paper grain + halftone *\/\n  .vin::before{\n    content:\"\";\n    position:absolute; inset:0;\n    background:\n      radial-gradient(rgba(0,0,0,0.06) 1px, transparent 1px),\n      radial-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),\n      linear-gradient(rgba(0,0,0,0.03), rgba(0,0,0,0.03));\n    background-size: 18px 18px, 9px 9px, 100% 100%;\n    background-position: 0 0, 40px 30px, 0 0;\n    opacity:0.35;\n    pointer-events:none;\n    mix-blend-mode:multiply;\n  }\n\n  \/* torn edge band (subtle) *\/\n  .vin::after{\n    content:\"\";\n    position:absolute; left:-10px; right:-10px; top:0;\n    height:12px;\n    background: linear-gradient(90deg,\n      rgba(0,0,0,0.18) 0%,\n      rgba(0,0,0,0.04) 18%,\n      rgba(0,0,0,0.14) 36%,\n      rgba(0,0,0,0.04) 54%,\n      rgba(0,0,0,0.16) 72%,\n      rgba(0,0,0,0.05) 100%\n    );\n    opacity:0.20;\n    pointer-events:none;\n  }\n\n  .vin-head{\n    position:relative;\n    padding:30px 30px 18px 30px;\n    border-bottom:2px solid rgba(30,24,18,0.55);\n    background: linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.05) 100%);\n  }\n\n  .vin-meta{\n    display:flex;gap:10px;flex-wrap:wrap;align-items:center;\n    font-family:\"Montserrat\", Arial, Helvetica, sans-serif;\n    font-size:12px;letter-spacing:0.18em;text-transform:uppercase;\n    font-weight:900;\n    color:rgba(26,21,16,0.72);\n  }\n\n  .vin-badge{\n    display:inline-flex;align-items:center;gap:8px;\n    padding:8px 12px;border-radius:999px;\n    border:2px solid rgba(26,21,16,0.55);\n    background: rgba(255,255,255,0.30);\n    box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);\n  }\n\n  .vin-seal{\n    width:12px;height:12px;border-radius:999px;\n    background: radial-gradient(circle at 35% 35%, #fff 0%, #b24a2f 45%, #6b1f1f 100%);\n    border:2px solid rgba(26,21,16,0.55);\n  }\n\n  .vin-title{\n    margin:12px 0 10px 0;\n    font-family:\"Playfair Display\", Georgia, \"Times New Roman\", serif;\n    font-size:44px;\n    line-height:1.02;\n    letter-spacing:-0.02em;\n    font-weight:700;\n  }\n  .vin-title em{\n    font-style:italic;\n    text-decoration: underline;\n    text-decoration-thickness: 3px;\n    text-underline-offset: 6px;\n  }\n\n  .vin-lead{\n    margin:0;\n    font-family:\"Inter\", Arial, Helvetica, sans-serif;\n    font-size:16px;\n    line-height:1.95;\n    max-width:92ch;\n    color:rgba(26,21,16,0.80);\n  }\n\n  .vin-body{ position:relative; padding:22px 22px 26px 22px; }\n  .vin-grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap:16px; align-items:start; }\n  @media (max-width: 900px){ .vin-grid{ grid-template-columns:1fr; } }\n\n  .vin-panel{\n    border-radius:22px;\n    border:2px solid rgba(26,21,16,0.55);\n    background: rgba(255,255,255,0.26);\n    overflow:hidden;\n  }\n  .vin-panel .top{\n    padding:14px 16px;\n    border-bottom:2px solid rgba(26,21,16,0.45);\n    display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;\n    background: rgba(255,255,255,0.22);\n  }\n  .vin-panel h3{\n    margin:0;\n    font-family:\"Montserrat\", Arial, Helvetica, sans-serif;\n    font-size:13px;\n    letter-spacing:0.18em;\n    text-transform:uppercase;\n    font-weight:900;\n    color:rgba(26,21,16,0.78);\n  }\n  .vin-pill{\n    display:inline-flex;align-items:center;gap:8px;\n    padding:8px 10px;border-radius:999px;\n    border:2px solid rgba(26,21,16,0.50);\n    background: rgba(255,255,255,0.22);\n    font-family:\"Montserrat\", Arial, Helvetica, sans-serif;\n    font-size:12px;letter-spacing:0.12em;text-transform:uppercase;\n    font-weight:900;\n    color:rgba(26,21,16,0.70);\n  }\n\n  .vin-content{ padding:18px; }\n\n  \/* Readable long text *\/\n  .vin-prose{\n    font-family:\"Inter\", Arial, Helvetica, sans-serif;\n    font-size:16px;\n    line-height:1.95;\n    letter-spacing:0.01em;\n    max-width:92ch;\n    color:rgba(26,21,16,0.84);\n  }\n  .vin-prose p{ margin:0 0 14px 0; }\n  .vin-prose p:last-child{ margin-bottom:0; }\n  .vin-prose strong{ font-weight:800; }\n\n  \/* Poster mock: layered type (MORE TYPO VARIETY) *\/\n  .poster{\n    border-radius:22px;\n    border:2px solid rgba(26,21,16,0.60);\n    background:\n      linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.06) 100%);\n    padding:16px;\n    position:relative;\n    overflow:hidden;\n  }\n\n  .poster .frame{\n    border:2px solid rgba(26,21,16,0.55);\n    border-radius:18px;\n    padding:14px;\n    background: rgba(255,255,255,0.18);\n  }\n\n  .poster .kicker{\n    font-family:\"Montserrat\", Arial, Helvetica, sans-serif;\n    font-size:12px;\n    letter-spacing:0.18em;\n    text-transform:uppercase;\n    font-weight:900;\n    opacity:0.8;\n    margin:0 0 10px 0;\n  }\n\n  .poster .headline{\n    font-family:\"Playfair Display\", Georgia, \"Times New Roman\", serif;\n    font-size:34px;\n    line-height:1.02;\n    letter-spacing:-0.02em;\n    font-weight:700;\n    margin:0 0 10px 0;\n  }\n\n  .poster .subhead{\n    font-family:\"Montserrat\", Arial, Helvetica, sans-serif;\n    font-size:13px;\n    letter-spacing:0.14em;\n    text-transform:uppercase;\n    font-weight:900;\n    margin:0 0 12px 0;\n  }\n\n  .poster .body{\n    font-family: Georgia, \"Times New Roman\", serif; \/* extra variety *\/\n    font-size:14px;\n    line-height:1.85;\n    margin:0 0 14px 0;\n    max-width:60ch;\n    color:rgba(26,21,16,0.85);\n  }\n\n  .poster .stamp-row{\n    display:flex;gap:10px;flex-wrap:wrap;align-items:center;\n  }\n\n  .stamp{\n    border:2px dashed rgba(26,21,16,0.65);\n    border-radius:14px;\n    padding:8px 10px;\n    font-family:\"IBM Plex Mono\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\"Courier New\", monospace; \/* extra variety *\/\n    font-size:12px;\n    letter-spacing:0.14em;\n    text-transform:uppercase;\n    background: rgba(255,255,255,0.20);\n  }\n\n  .swatches{\n    margin-top:14px;\n    border-radius:18px;\n    border:2px solid rgba(26,21,16,0.55);\n    overflow:hidden;\n    background: rgba(255,255,255,0.18);\n  }\n  .swatches .row{\n    display:grid;\n    grid-template-columns: 1fr 1fr 1fr 1fr;\n  }\n  @media (max-width:900px){\n    .swatches .row{ grid-template-columns: 1fr 1fr; }\n  }\n  .swatch{\n    padding:14px 12px;\n    border-right:2px solid rgba(26,21,16,0.35);\n    display:flex;align-items:center;justify-content:space-between;gap:10px;\n    font-family:\"Montserrat\", Arial, Helvetica, sans-serif;\n    font-size:12px;letter-spacing:0.12em;text-transform:uppercase;\n    font-weight:900;\n    color:rgba(26,21,16,0.82);\n  }\n  .swatch:last-child{ border-right:none; }\n  .swatch code{\n    font-family:\"IBM Plex Mono\", monospace;\n    font-size:12px;\n    border:2px solid rgba(26,21,16,0.45);\n    padding:2px 8px;\n    border-radius:999px;\n    background: rgba(255,255,255,0.22);\n  }\n\n  \/* Checklist chips *\/\n  .vin-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }\n  .vin-chip{\n    border-radius:999px;\n    padding:9px 10px;\n    border:2px solid rgba(26,21,16,0.50);\n    background: rgba(255,255,255,0.22);\n    font-family:\"Montserrat\", Arial, Helvetica, sans-serif;\n    font-size:12px;letter-spacing:0.12em;text-transform:uppercase;\n    font-weight:900;\n    color:rgba(26,21,16,0.72);\n  }\n  .vin-chip.hot{\n    background: rgba(178,74,47,0.12);\n  }\n\n  \/* Footer nav *\/\n  .vin-nav{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }\n  .vin-link{\n    text-decoration:none;\n    display:inline-flex;align-items:center;justify-content:center;\n    border-radius:999px;\n    padding:10px 12px;\n    border:2px solid rgba(26,21,16,0.50);\n    background: rgba(255,255,255,0.22);\n    font-family:\"Montserrat\", Arial, Helvetica, sans-serif;\n    font-size:12px;\n    letter-spacing:0.14em;\n    text-transform:uppercase;\n    font-weight:900;\n    color:rgba(26,21,16,0.80);\n    transition: transform .12s ease;\n  }\n  .vin-link:hover{ transform: translateY(-1px); text-decoration:none; }\n  .vin-link.primary{\n    background: rgba(26,21,16,0.92);\n    color:#fff;\n  }\n\n  .vin *{ box-sizing:border-box; }\n<\/style>\n\n<section class=\"vin-wrap\" id=\"vintage\">\n  <div class=\"vin\">\n    <header class=\"vin-head\">\n      <div class=\"vin-meta\">\n        <span class=\"vin-badge\"><span class=\"vin-seal\"><\/span>STYLE 05<\/span>\n        <span class=\"vin-badge\">R\u00c9TRO<\/span>\n        <span class=\"vin-badge\">VINTAGE<\/span>\n        <span class=\"vin-badge\">PAPER \/ INK<\/span>\n      <\/div>\n\n      <h2 class=\"vin-title\">Affiche <em>papier<\/em>, encre &amp; caract\u00e8re<\/h2>\n\n      <p class=\"vin-lead\">\n        Le vintage n\u2019est pas \u201cvieux\u201d : c\u2019est une <strong>culture d\u2019affiche<\/strong>. On joue sur le papier, les textures, les palettes chaudes\n        et une typographie expressive \u2014 mais on garde une structure moderne pour que \u00e7a reste clean sur le web.\n      <\/p>\n    <\/header>\n\n    <div class=\"vin-body\">\n      <div class=\"vin-grid\">\n        <!-- LEFT: Guide long -->\n        <article class=\"vin-panel\">\n          <div class=\"top\">\n            <h3>Guide essentiel (texte long)<\/h3>\n            <span class=\"vin-pill\">Playfair + Montserrat + Inter<\/span>\n          <\/div>\n\n          <div class=\"vin-content\">\n            <div class=\"vin-prose\">\n              <p>\n                Pour un bon rendu vintage, commence par le support : un fond \u201cpapier\u201d (cr\u00e8me, beige, ivoire) avec une texture tr\u00e8s l\u00e9g\u00e8re.\n                Ensuite, choisis une palette <strong>limit\u00e9e<\/strong> : 2 couleurs chaudes + 1 couleur sombre pour l\u2019encre.\n                Le style fonctionne quand le contraste reste net, comme sur une affiche imprim\u00e9e.\n              <\/p>\n              <p>\n                Sur la typographie, c\u2019est l\u00e0 qu\u2019on se fait plaisir : un titre en <strong>serif<\/strong> \u00e9l\u00e9gant (Playfair) donne le caract\u00e8re,\n                des labels en <strong>sans<\/strong> g\u00e9om\u00e9trique (Montserrat) apportent une lecture moderne, et le texte long en Inter assure le confort.\n                Cette combinaison donne un vrai \u201cmix\u201d : ancien dans l\u2019\u00e2me, propre dans l\u2019ex\u00e9cution.\n              <\/p>\n              <p>\n                Enfin, structure ton contenu : titre fort, sous-titre court, puis paragraphes lisibles. Le vintage devient premium quand tu \u00e9vites\n                le \u201ctrop\u201d : la texture doit \u00eatre une ambiance, pas un bruit.\n              <\/p>\n            <\/div>\n\n            <div class=\"vin-chips\">\n              <span class=\"vin-chip\">papier cr\u00e8me<\/span>\n              <span class=\"vin-chip\">encre sombre<\/span>\n              <span class=\"vin-chip hot\">accents chauds<\/span>\n              <span class=\"vin-chip\">typographie mix\u00e9e<\/span>\n              <span class=\"vin-chip\">structure affiche<\/span>\n              <span class=\"vin-chip\">texture l\u00e9g\u00e8re<\/span>\n            <\/div>\n\n            <div class=\"vin-nav\">\n              <a class=\"vin-link\" href=\"#synthwave\">\u2190 back: synthwave<\/a>\n              <a class=\"vin-link primary\" href=\"#minimal\">next: minimal \u2192<\/a>\n            <\/div>\n          <\/div>\n        <\/article>\n\n        <!-- RIGHT: Poster demo + palette -->\n        <aside class=\"vin-panel\">\n          <div class=\"top\">\n            <h3>D\u00e9mo \u201caffiche\u201d + palette<\/h3>\n            <span class=\"vin-pill\">plus de typos<\/span>\n          <\/div>\n\n          <div class=\"vin-content\">\n            <div class=\"poster\" aria-label=\"Mini affiche vintage\">\n              <div class=\"frame\">\n                <p class=\"kicker\">Design Atlas \/ Poster Series<\/p>\n                <h4 class=\"headline\">The Vintage Print<\/h4>\n                <p class=\"subhead\">texture \u2022 contraste \u2022 composition<\/p>\n\n                <p class=\"body\">\n                  Un bon vintage web se lit comme une affiche : une hi\u00e9rarchie claire, une palette restreinte,\n                  et une typographie qui raconte une \u00e9poque sans tomber dans le clich\u00e9.\n                <\/p>\n\n                <div class=\"stamp-row\">\n                  <span class=\"stamp\">EST. 1984<\/span>\n                  <span class=\"stamp\">INK \/ PAPER<\/span>\n                  <span class=\"stamp\">LIMITED COLORS<\/span>\n                <\/div>\n              <\/div>\n            <\/div>\n\n            <div class=\"swatches\" aria-label=\"Palette vintage\">\n              <div class=\"row\">\n                <div class=\"swatch\" style=\"background:#fbf3e6;\">\n                  Paper <code>#fbf3e6<\/code>\n                <\/div>\n                <div class=\"swatch\" style=\"background:#b24a2f;color:#fff;\">\n                  Rust <code>#b24a2f<\/code>\n                <\/div>\n                <div class=\"swatch\" style=\"background:#145046;color:#fff;\">\n                  Teal <code>#145046<\/code>\n                <\/div>\n                <div class=\"swatch\" style=\"background:#1a1510;color:#fff;\">\n                  Ink <code>#1a1510<\/code>\n                <\/div>\n              <\/div>\n            <\/div>\n\n            <div class=\"vin-prose\" style=\"font-size:14px;line-height:1.9;max-width:80ch;margin-top:14px;\">\n              <p style=\"margin:0;\">\n                Astuce : si tu veux un \u201cvintage premium\u201d, \u00e9vite les textures trop fortes.\n                Le papier doit se sentir, pas se voir. Laisse la typographie faire le storytelling.\n              <\/p>\n            <\/div>\n          <\/div>\n        <\/aside>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n\n<!-- =======================\nSTYLE 06 \u2014 MINIMALISME CONTEMPORAIN (premium + whitespace + micro-d\u00e9tails)\nID: minimal (pour le scroll depuis le hero)\nTypos: Inter (texte), Space Grotesk (titres), IBM Plex Mono (micro UI)\n=> minimal = pas vide : c'est pr\u00e9cis\n======================= -->\n\n<style>\n  #minimal{ scroll-margin-top: 90px; }\n  .min-wrap{max-width:1100px;margin:0 auto;padding:32px 16px;}\n\n  .min{\n    border-radius:28px;\n    overflow:hidden;\n    border:1px solid rgba(0,0,0,0.10);\n    background:\n      radial-gradient(circle at 18% 24%, rgba(31,79,255,0.10) 0%, rgba(31,79,255,0) 55%),\n      radial-gradient(circle at 84% 76%, rgba(0,209,255,0.08) 0%, rgba(0,209,255,0) 60%),\n      linear-gradient(180deg, #ffffff 0%, #fbfbfb 60%, #ffffff 100%);\n    box-shadow: 0 22px 70px rgba(0,0,0,0.08);\n    position:relative;\n    color:#0e0e0e;\n  }\n\n  \/* micro noise *\/\n  .min::before{\n    content:\"\";\n    position:absolute; inset:0;\n    background-image: radial-gradient(rgba(0,0,0,0.06) 1px, transparent 1px);\n    background-size: 24px 24px;\n    opacity:0.10;\n    pointer-events:none;\n  }\n\n  .min-head{\n    position:relative;\n    padding:34px 34px 20px 34px;\n    border-bottom:1px solid rgba(0,0,0,0.08);\n    background: rgba(255,255,255,0.70);\n    backdrop-filter: blur(10px);\n  }\n\n  .min-meta{\n    display:flex;gap:10px;flex-wrap:wrap;align-items:center;\n    font-family:\"IBM Plex Mono\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\"Courier New\", monospace;\n    font-size:12px;letter-spacing:0.18em;text-transform:uppercase;\n    font-weight:700;\n    color:rgba(0,0,0,0.60);\n  }\n  .min-badge{\n    display:inline-flex;align-items:center;gap:10px;\n    padding:8px 12px;border-radius:999px;\n    border:1px solid rgba(0,0,0,0.14);\n    background: rgba(255,255,255,0.70);\n    box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);\n  }\n  .min-line{\n    width:22px;height:2px;background:#0e0e0e;opacity:0.8;border-radius:999px;\n  }\n\n  .min-title{\n    margin:12px 0 10px 0;\n    font-family:\"Space Grotesk\",\"Inter\",Arial,Helvetica,sans-serif;\n    font-size:44px;\n    line-height:1.04;\n    letter-spacing:-0.03em;\n    font-weight:800;\n  }\n  .min-title .accent{\n    display:inline-block;\n    padding:2px 8px;\n    border-radius:14px;\n    border:1px solid rgba(31,79,255,0.22);\n    background: rgba(31,79,255,0.08);\n  }\n\n  .min-lead{\n    margin:0;\n    font-family:\"Inter\", Arial, Helvetica, sans-serif;\n    font-size:17px;\n    line-height:1.9;\n    max-width:92ch;\n    color:rgba(0,0,0,0.74);\n  }\n\n  .min-body{ padding:22px 22px 26px 22px; position:relative; }\n  .min-grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap:16px; align-items:start; }\n  @media (max-width: 900px){ .min-grid{ grid-template-columns:1fr; } }\n\n  .min-panel{\n    border-radius:24px;\n    border:1px solid rgba(0,0,0,0.10);\n    background: rgba(255,255,255,0.72);\n    box-shadow: 0 18px 50px rgba(0,0,0,0.08);\n    overflow:hidden;\n  }\n  .min-panel .top{\n    padding:14px 16px;\n    border-bottom:1px solid rgba(0,0,0,0.08);\n    display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;\n    background: rgba(255,255,255,0.60);\n  }\n  .min-panel h3{\n    margin:0;\n    font-family:\"IBM Plex Mono\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\"Courier New\", monospace;\n    font-size:12px;\n    letter-spacing:0.18em;\n    text-transform:uppercase;\n    font-weight:700;\n    color:rgba(0,0,0,0.62);\n  }\n  .min-pill{\n    display:inline-flex;align-items:center;gap:8px;\n    padding:8px 10px;border-radius:999px;\n    border:1px solid rgba(0,0,0,0.12);\n    background: rgba(255,255,255,0.70);\n    font-family:\"Inter\", Arial, Helvetica, sans-serif;\n    font-size:12px;letter-spacing:0.12em;text-transform:uppercase;\n    color:rgba(0,0,0,0.62);\n  }\n\n  .min-content{ padding:18px; }\n\n  \/* Readable long text *\/\n  .min-prose{\n    font-family:\"Inter\", Arial, Helvetica, sans-serif;\n    font-size:16px;\n    line-height:1.95;\n    letter-spacing:0.01em;\n    max-width:92ch;\n    color:rgba(0,0,0,0.80);\n  }\n  .min-prose p{ margin:0 0 14px 0; }\n  .min-prose p:last-child{ margin-bottom:0; }\n  .min-prose strong{ font-weight:800; }\n\n  \/* Minimal \u201cmicro UI\u201d cards *\/\n  .micro{\n    display:grid;\n    grid-template-columns: 1fr;\n    gap:12px;\n  }\n  .card{\n    border-radius:20px;\n    border:1px solid rgba(0,0,0,0.10);\n    background:#fff;\n    padding:14px;\n  }\n  .card .k{\n    font-family:\"IBM Plex Mono\", monospace;\n    font-size:12px;\n    letter-spacing:0.18em;\n    text-transform:uppercase;\n    font-weight:700;\n    color:rgba(0,0,0,0.60);\n    display:flex;justify-content:space-between;align-items:center;gap:10px;\n    margin:0 0 10px 0;\n  }\n  .card .k .n{\n    border:1px solid rgba(0,0,0,0.12);\n    border-radius:999px;\n    padding:6px 10px;\n    background: rgba(0,0,0,0.03);\n  }\n  .card h4{\n    margin:0 0 8px 0;\n    font-family:\"Space Grotesk\",\"Inter\",Arial,Helvetica,sans-serif;\n    font-size:18px;\n    letter-spacing:-0.02em;\n    font-weight:800;\n    color:#0e0e0e;\n  }\n  .card p{\n    margin:0;\n    font-family:\"Inter\", Arial, Helvetica, sans-serif;\n    font-size:14px;\n    line-height:1.85;\n    color:rgba(0,0,0,0.72);\n    max-width:70ch;\n  }\n\n  \/* Divider *\/\n  .min-divider{\n    height:1px;\n    background: rgba(0,0,0,0.08);\n    margin:14px 0;\n  }\n\n  \/* Checklist chips *\/\n  .min-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }\n  .min-chip{\n    border-radius:999px;\n    padding:9px 10px;\n    border:1px solid rgba(0,0,0,0.12);\n    background: rgba(255,255,255,0.70);\n    font-family:\"Inter\", Arial, Helvetica, sans-serif;\n    font-size:12px;letter-spacing:0.12em;text-transform:uppercase;\n    color:rgba(0,0,0,0.62);\n  }\n  .min-chip.accent{\n    border-color: rgba(31,79,255,0.25);\n    background: rgba(31,79,255,0.08);\n  }\n\n  \/* Footer nav *\/\n  .min-nav{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }\n  .min-link{\n    text-decoration:none;\n    display:inline-flex;align-items:center;justify-content:center;\n    border-radius:999px;\n    padding:10px 12px;\n    border:1px solid rgba(0,0,0,0.12);\n    background: rgba(255,255,255,0.70);\n    font-family:\"IBM Plex Mono\", monospace;\n    font-size:12px;\n    letter-spacing:0.14em;\n    text-transform:uppercase;\n    color:rgba(0,0,0,0.70);\n    transition: transform .12s ease;\n  }\n  .min-link:hover{ transform: translateY(-1px); text-decoration:none; }\n  .min-link.primary{\n    border-color: rgba(0,0,0,0.18);\n    background: rgba(0,0,0,0.92);\n    color:#fff;\n  }\n\n  .min *{ box-sizing:border-box; }\n<\/style>\n\n<section class=\"min-wrap\" id=\"minimal\">\n  <div class=\"min\">\n    <header class=\"min-head\">\n      <div class=\"min-meta\">\n        <span class=\"min-badge\"><span class=\"min-line\"><\/span>STYLE 06<\/span>\n        <span class=\"min-badge\">MINIMAL<\/span>\n        <span class=\"min-badge\">CONTEMPORAIN<\/span>\n        <span class=\"min-badge\">PREMIUM \/ CLEAN<\/span>\n      <\/div>\n\n      <h2 class=\"min-title\">Moins, mais <span class=\"accent\">mieux<\/span><\/h2>\n\n      <p class=\"min-lead\">\n        Le minimalisme n\u2019est pas \u201cvide\u201d : c\u2019est une discipline. On retire le bruit, on garde l\u2019essentiel,\n        et on investit dans les d\u00e9tails : <strong>espaces<\/strong>, <strong>rythme<\/strong>, <strong>micro-typographie<\/strong>.\n        C\u2019est le style parfait pour un blog design \u201cpremium\u201d.\n      <\/p>\n    <\/header>\n\n    <div class=\"min-body\">\n      <div class=\"min-grid\">\n        <!-- LEFT: Guide long -->\n        <article class=\"min-panel\">\n          <div class=\"top\">\n            <h3>Guide essentiel (texte long)<\/h3>\n            <span class=\"min-pill\">Inter + Space Grotesk + Mono<\/span>\n          <\/div>\n\n          <div class=\"min-content\">\n            <div class=\"min-prose\">\n              <p>\n                Pour r\u00e9ussir une page minimaliste, commence par d\u00e9finir une <strong>hi\u00e9rarchie<\/strong> claire :\n                un titre fort (Space Grotesk), un texte long lisible (Inter), et une micro-UI (IBM Plex Mono) pour les d\u00e9tails.\n                Cette triple typographie te donne un rendu premium sans surcharger la page.\n              <\/p>\n              <p>\n                Ensuite, travaille le <strong>rythme vertical<\/strong>. Dans un style minimal, l\u2019espace est une mati\u00e8re :\n                des marges constantes, des blocs bien respir\u00e9s, et des s\u00e9parations fines.\n                Si ton layout semble \u201ctrop simple\u201d, c\u2019est souvent que tes espacements ne sont pas assez pr\u00e9cis.\n              <\/p>\n              <p>\n                Enfin, ajoute une seule \u201csignature\u201d visuelle : un accent color\u00e9 discret (bleu), une ligne, un badge, ou un motif ultra l\u00e9ger.\n                Le minimalisme devient iconique quand chaque d\u00e9tail a une intention.\n              <\/p>\n            <\/div>\n\n            <div class=\"min-chips\">\n              <span class=\"min-chip\">whitespace<\/span>\n              <span class=\"min-chip\">rythme<\/span>\n              <span class=\"min-chip\">hi\u00e9rarchie<\/span>\n              <span class=\"min-chip accent\">1 accent<\/span>\n              <span class=\"min-chip\">micro-d\u00e9tails<\/span>\n              <span class=\"min-chip\">lisibilit\u00e9<\/span>\n            <\/div>\n\n            <div class=\"min-nav\">\n              <a class=\"min-link\" href=\"#vintage\">\u2190 back: vintage<\/a>\n              <a class=\"min-link primary\" href=\"#brutalism\">\u21bb back to top styles<\/a>\n            <\/div>\n          <\/div>\n        <\/article>\n\n        <!-- RIGHT: Micro UI modules -->\n        <aside class=\"min-panel\">\n          <div class=\"top\">\n            <h3>Modules minimal (ultra clean)<\/h3>\n            <span class=\"min-pill\">micro-typographie<\/span>\n          <\/div>\n\n          <div class=\"min-content\">\n            <div class=\"micro\">\n              <div class=\"card\">\n                <div class=\"k\">01 \/ Grid <span class=\"n\">08px<\/span><\/div>\n                <h4>Espacements constants<\/h4>\n                <p>Choisis un pas (8px) et construis tes paddings\/marges en multiples. Le minimal = coh\u00e9rence.<\/p>\n              <\/div>\n\n              <div class=\"card\">\n                <div class=\"k\">02 \/ Type <span class=\"n\">1.95<\/span><\/div>\n                <h4>Lecture confortable<\/h4>\n                <p>Un interlignage haut rend tout \u201cpremium\u201d. La lisibilit\u00e9 est ton vrai luxe.<\/p>\n              <\/div>\n\n              <div class=\"card\">\n                <div class=\"k\">03 \/ Accent <span class=\"n\">1<\/span><\/div>\n                <h4>Une seule signature<\/h4>\n                <p>Un seul accent couleur, une seule ligne, un seul motif. Si tu en mets deux, tu perds l\u2019effet.<\/p>\n              <\/div>\n            <\/div>\n\n            <div class=\"min-divider\"><\/div>\n\n            <div class=\"min-prose\" style=\"font-size:14px;line-height:1.9;max-width:80ch;\">\n              <p style=\"margin:0;\">\n                Le minimalisme est souvent le plus difficile : il ne pardonne pas.\n                Mais quand c\u2019est bien fait, ton site a instantan\u00e9ment un rendu \u201cstudio \/ direction artistique\u201d.\n              <\/p>\n            <\/div>\n          <\/div>\n        <\/aside>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>Design Atlas \/ Style graphique Styles majeurs \u00e0 explorer Six univers visuels, six logiques de composition. Clique sur un style pour descendre directement \u00e0 sa section : tu auras une d\u00e9finition, des r\u00e8gles claires, une checklist, et des exemples pens\u00e9s pour \u00eatre copiables et adaptables. 01 Brutalisme digital Raw, contrastes forts, typographie massive, structure assum\u00e9e&#8230;.<\/p>\n<p class=\"more-link\"><a href=\"https:\/\/wp11.infocom.work\/index.php\/styles-graphiques\/\" class=\"themebutton3\">Read More<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-112","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wp11.infocom.work\/index.php\/wp-json\/wp\/v2\/pages\/112","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wp11.infocom.work\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wp11.infocom.work\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wp11.infocom.work\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wp11.infocom.work\/index.php\/wp-json\/wp\/v2\/comments?post=112"}],"version-history":[{"count":3,"href":"https:\/\/wp11.infocom.work\/index.php\/wp-json\/wp\/v2\/pages\/112\/revisions"}],"predecessor-version":[{"id":182,"href":"https:\/\/wp11.infocom.work\/index.php\/wp-json\/wp\/v2\/pages\/112\/revisions\/182"}],"wp:attachment":[{"href":"https:\/\/wp11.infocom.work\/index.php\/wp-json\/wp\/v2\/media?parent=112"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}