{"id":108,"date":"2025-12-19T12:58:10","date_gmt":"2025-12-19T11:58:10","guid":{"rendered":"https:\/\/wp11.infocom.work\/?page_id=108"},"modified":"2025-12-21T12:52:30","modified_gmt":"2025-12-21T11:52:30","slug":"mise-en-page-layout","status":"publish","type":"page","link":"https:\/\/wp11.infocom.work\/index.php\/mise-en-page-layout\/","title":{"rendered":"Mise en page (layout)"},"content":{"rendered":"\n<section id=\"layout\" style=\"max-width:1100px;margin:0 auto;padding:28px 16px 44px 16px;\">\n  <style>\n    \/* Layout playground *\/\n    .ly-kit{border:1px solid #C9C9C9;border-radius:22px;overflow:hidden;background:#FAFAFA;}\n    .ly-hero{padding:18px;border-bottom:1px solid #C9C9C9;}\n    .ly-eyebrow{margin:0 0 8px 0;font-family:Arial, Helvetica, sans-serif;font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:#666;}\n    .ly-h1{margin:0 0 10px 0;font-family:Arial, Helvetica, sans-serif;font-size:44px;line-height:1.05;letter-spacing:-0.03em;color:#0E0E0E;}\n    .ly-h1 em{font-style:italic;font-weight:300;}\n    .ly-lead{margin:0;max-width:95ch;font-family:Arial, Helvetica, sans-serif;font-size:16px;line-height:1.7;color:#222;}\n    .ly-strip{margin-top:14px;height:14px;border-radius:999px;background:\n      linear-gradient(90deg,#0E0E0E 0%,#1F4FFF 40%,#00D1FF 70%,#FAFAFA 100%);\n      border:1px solid #C9C9C9;\n    }\n\n    .ly-grid{display:grid;grid-template-columns:280px 1fr;}\n    @media (max-width: 920px){.ly-grid{grid-template-columns:1fr;}}\n    .ly-nav{padding:14px;border-right:1px solid #C9C9C9;background:#FAFAFA;}\n    @media (max-width: 920px){.ly-nav{border-right:0;border-bottom:1px solid #C9C9C9;}}\n    .ly-nav label{\n      display:block;padding:12px 12px;border:1px solid #C9C9C9;border-radius:14px;margin-bottom:10px;cursor:pointer;\n      font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:1.35;color:#0E0E0E;background:#FAFAFA;\n      transition:transform .12s ease, background .12s ease, color .12s ease, border-color .12s ease;\n    }\n    .ly-nav label:hover{transform:translateY(-1px);}\n    .ly-nav small{display:block;margin-top:4px;color:#666;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;}\n    .ly-panels{padding:16px;}\n    .ly-panel{display:none;}\n\n    .ly-radio{position:absolute;left:-9999px;}\n    #ly-tab1:checked ~ .ly-grid .ly-nav label[for=\"ly-tab1\"],\n    #ly-tab2:checked ~ .ly-grid .ly-nav label[for=\"ly-tab2\"],\n    #ly-tab3:checked ~ .ly-grid .ly-nav label[for=\"ly-tab3\"],\n    #ly-tab4:checked ~ .ly-grid .ly-nav label[for=\"ly-tab4\"]{\n      background:#0E0E0E;color:#FAFAFA;border-color:#0E0E0E;\n    }\n    #ly-tab1:checked ~ .ly-grid .ly-panels #ly-panel1{display:block;}\n    #ly-tab2:checked ~ .ly-grid .ly-panels #ly-panel2{display:block;}\n    #ly-tab3:checked ~ .ly-grid .ly-panels #ly-panel3{display:block;}\n    #ly-tab4:checked ~ .ly-grid .ly-panels #ly-panel4{display:block;}\n\n    .card{border:1px solid #C9C9C9;border-radius:18px;background:#FAFAFA;overflow:hidden;}\n    .card + .card{margin-top:14px;}\n    .card-h{padding:14px 16px;border-bottom:1px solid #C9C9C9;display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;}\n    .card-h h3{margin:0;font-family:Arial, Helvetica, sans-serif;font-size:16px;letter-spacing:-0.01em;color:#0E0E0E;}\n    .meta{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;font-size:12px;color:#666;letter-spacing:0.06em;text-transform:uppercase;}\n    .card-b{padding:16px;}\n\n    .two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}\n    @media (max-width: 920px){.two{grid-template-columns:1fr;}}\n\n    .sw{display:flex;gap:10px;flex-wrap:wrap;}\n    .pill{padding:9px 11px;border-radius:999px;border:1px solid #C9C9C9;font-family:Arial, Helvetica, sans-serif;font-size:13px;background:#FAFAFA;color:#0E0E0E;}\n    .pill.dark{background:#0E0E0E;color:#FAFAFA;border-color:#0E0E0E;}\n    .pill.blue{background:#1F4FFF;color:#FAFAFA;border-color:#1F4FFF;}\n    .pill.cyan{background:#00D1FF;color:#0E0E0E;border-color:#00D1FF;}\n\n    \/* demos *\/\n    .demo{border:1px solid #C9C9C9;border-radius:18px;overflow:hidden;background:#FAFAFA;}\n    .demo .bar{padding:12px 14px;border-bottom:1px solid #C9C9C9;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;}\n    .demo .bar span{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;font-size:12px;color:#666;}\n    .demo .body{padding:16px;}\n\n    .gridviz{display:grid;gap:10px;}\n    .grid12{grid-template-columns:repeat(12,minmax(0,1fr));}\n    .grid8{grid-template-columns:repeat(8,minmax(0,1fr));}\n    .grid4{grid-template-columns:repeat(4,minmax(0,1fr));}\n    .cell{height:44px;border-radius:12px;border:1px solid #C9C9C9;background:#FAFAFA;}\n    .cell.fill{background:#0E0E0E;}\n    .cell.blue{background:#1F4FFF;border-color:rgba(0,0,0,0.08);}\n    .cell.cyan{background:#00D1FF;border-color:rgba(0,0,0,0.08);}\n\n    .good{background:#FAFAFA;}\n    .bad{background:#0E0E0E;color:#FAFAFA;}\n    .bad .muted{color:rgba(255,255,255,0.75);}\n    .muted{color:#666;}\n  <\/style>\n\n  <div class=\"ly-kit\">\n    <!-- HERO -->\n    <div class=\"ly-hero\">\n      <p class=\"ly-eyebrow\">Th\u00e9matique<\/p>\n      <h1 class=\"ly-h1\">Mise en page <span style=\"color:#1F4FFF;\">\/<\/span> Layout <span style=\"font-weight:300;font-style:italic;\">Playground<\/span><\/h1>\n      <p class=\"ly-lead\">\n        Un layout propre, c\u2019est une <strong>grille<\/strong> + des <strong>marges coh\u00e9rentes<\/strong> + une <strong>hi\u00e9rarchie lisible<\/strong>.\n        Ici tu peux \u201clire\u201d la structure : colonnes, rythme, spacing, modules. Moins d\u2019effets. Plus de syst\u00e8me.\n      <\/p>\n      <div class=\"ly-strip\" aria-hidden=\"true\"><\/div>\n    <\/div>\n\n    <!-- TABS -->\n    <input class=\"ly-radio\" type=\"radio\" name=\"ly-tabs\" id=\"ly-tab1\" checked>\n    <input class=\"ly-radio\" type=\"radio\" name=\"ly-tabs\" id=\"ly-tab2\">\n    <input class=\"ly-radio\" type=\"radio\" name=\"ly-tabs\" id=\"ly-tab3\">\n    <input class=\"ly-radio\" type=\"radio\" name=\"ly-tabs\" id=\"ly-tab4\">\n\n    <div class=\"ly-grid\">\n      <nav class=\"ly-nav\" aria-label=\"Layout navigation\">\n        <label for=\"ly-tab1\">Grilles &#038; colonnes <small>12\/8\/4 + modules<\/small><\/label>\n        <label for=\"ly-tab2\">Rythme &#038; spacing <small>marges, respirations<\/small><\/label>\n        <label for=\"ly-tab3\">Hi\u00e9rarchie <small>titres, sections, scan<\/small><\/label>\n        <label for=\"ly-tab4\">Do \/ Don\u2019t <small>bon vs mauvais layout<\/small><\/label>\n      <\/nav>\n\n      <div class=\"ly-panels\">\n        <!-- PANEL 1 -->\n        <div class=\"ly-panel\" id=\"ly-panel1\">\n          <div class=\"card\">\n            <div class=\"card-h\">\n              <h3>Grille : 12 colonnes (web)<\/h3>\n              <span class=\"meta\">structure<\/span>\n            <\/div>\n            <div class=\"card-b two\">\n              <div class=\"demo\">\n                <div class=\"bar\"><span>12-col grid<\/span><span>modules 6\/6 &#8211; 4\/4\/4<\/span><\/div>\n                <div class=\"body\">\n                  <div class=\"gridviz grid12\">\n                    <div class=\"cell fill\" style=\"grid-column:span 6;\"><\/div>\n                    <div class=\"cell\" style=\"grid-column:span 6;\"><\/div>\n\n                    <div class=\"cell blue\" style=\"grid-column:span 4;\"><\/div>\n                    <div class=\"cell\" style=\"grid-column:span 4;\"><\/div>\n                    <div class=\"cell cyan\" style=\"grid-column:span 4;\"><\/div>\n                  <\/div>\n                  <p style=\"margin:12px 0 0 0;font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:1.6;color:#222;\">\n                    Exemple : hero en 6\/6, puis 3 cartes en 4\/4\/4. La grille te force \u00e0 rester coh\u00e9rent.\n                  <\/p>\n                <\/div>\n              <\/div>\n\n              <div class=\"demo\">\n                <div class=\"bar\"><span>R\u00e8gles<\/span><span>simple<\/span><\/div>\n                <div class=\"body\">\n                  <div class=\"sw\">\n                    <span class=\"pill dark\">Gutter constant<\/span>\n                    <span class=\"pill\">Max-width<\/span>\n                    <span class=\"pill blue\">Modules r\u00e9p\u00e9t\u00e9s<\/span>\n                    <span class=\"pill\">Alignements<\/span>\n                  <\/div>\n                  <p style=\"margin:12px 0 0 0;font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:1.6;color:#222;max-width:85ch;\">\n                    R\u00e8gle d\u2019or : tu ne \u201cdessines\u201d pas une page, tu \u201cposes\u201d des modules sur une grille stable.\n                    Le style arrive ensuite.\n                  <\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <div class=\"card\">\n            <div class=\"card-h\">\n              <h3>Grilles alternatives : 8 colonnes &#038; 4 colonnes<\/h3>\n              <span class=\"meta\">responsive<\/span>\n            <\/div>\n            <div class=\"card-b two\">\n              <div class=\"demo\">\n                <div class=\"bar\"><span>8-col grid<\/span><span>editorial<\/span><\/div>\n                <div class=\"body\">\n                  <div class=\"gridviz grid8\">\n                    <div class=\"cell fill\" style=\"grid-column:span 5;\"><\/div>\n                    <div class=\"cell\" style=\"grid-column:span 3;\"><\/div>\n                    <div class=\"cell\" style=\"grid-column:span 8;\"><\/div>\n                  <\/div>\n                  <p style=\"margin:12px 0 0 0;font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:1.6;color:#222;\">\n                    8 colonnes = plus \u201cmagazine\u201d, souvent plus simple \u00e0 tenir.\n                  <\/p>\n                <\/div>\n              <\/div>\n\n              <div class=\"demo\">\n                <div class=\"bar\"><span>4-col grid<\/span><span>mobile<\/span><\/div>\n                <div class=\"body\">\n                  <div class=\"gridviz grid4\">\n                    <div class=\"cell blue\" style=\"grid-column:span 4;\"><\/div>\n                    <div class=\"cell\" style=\"grid-column:span 2;\"><\/div>\n                    <div class=\"cell\" style=\"grid-column:span 2;\"><\/div>\n                  <\/div>\n                  <p style=\"margin:12px 0 0 0;font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:1.6;color:#222;\">\n                    Mobile : moins de colonnes, plus de verticalit\u00e9. Garder la m\u00eame logique de modules.\n                  <\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- PANEL 2 -->\n        <div class=\"ly-panel\" id=\"ly-panel2\">\n          <div class=\"card\">\n            <div class=\"card-h\">\n              <h3>Rythme vertical : spacing system<\/h3>\n              <span class=\"meta\">8pt<\/span>\n            <\/div>\n            <div class=\"card-b\">\n              <p style=\"margin:0 0 12px 0;font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:1.6;color:#222;max-width:95ch;\">\n                Le \u201cpropre\u201d vient souvent du spacing. Un syst\u00e8me simple : multiples de <strong>8<\/strong> (8\/16\/24\/32\/40\/48).\n                M\u00eame si tu ne mesures pas au pixel pr\u00e8s, garde des \u00e9carts coh\u00e9rents.\n              <\/p>\n              <div class=\"two\">\n                <div class=\"demo\">\n                  <div class=\"bar\"><span>Spacing tokens<\/span><span>8 \/ 16 \/ 24 \/ 32<\/span><\/div>\n                  <div class=\"body\">\n                    <div style=\"display:grid;gap:10px;\">\n                      <div style=\"display:flex;align-items:center;gap:12px;\">\n                        <div style=\"width:64px;height:10px;border-radius:999px;background:#0E0E0E;\"><\/div>\n                        <span class=\"meta\">8<\/span>\n                      <\/div>\n                      <div style=\"display:flex;align-items:center;gap:12px;\">\n                        <div style=\"width:128px;height:10px;border-radius:999px;background:#1F4FFF;\"><\/div>\n                        <span class=\"meta\">16<\/span>\n                      <\/div>\n                      <div style=\"display:flex;align-items:center;gap:12px;\">\n                        <div style=\"width:192px;height:10px;border-radius:999px;background:#00D1FF;\"><\/div>\n                        <span class=\"meta\">24<\/span>\n                      <\/div>\n                      <div style=\"display:flex;align-items:center;gap:12px;\">\n                        <div style=\"width:256px;height:10px;border-radius:999px;background:#C9C9C9;\"><\/div>\n                        <span class=\"meta\">32<\/span>\n                      <\/div>\n                    <\/div>\n                  <\/div>\n                <\/div>\n\n                <div class=\"demo\">\n                  <div class=\"bar\"><span>R\u00e9sultat<\/span><span>respiration<\/span><\/div>\n                  <div class=\"body\">\n                    <div style=\"border:1px solid #C9C9C9;border-radius:18px;padding:14px;\">\n                      <p style=\"margin:0 0 6px 0;font-family:Arial, Helvetica, sans-serif;font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:#666;\">\n                        Section\n                      <\/p>\n                      <p style=\"margin:0 0 10px 0;font-family:Arial, Helvetica, sans-serif;font-size:18px;letter-spacing:-0.01em;color:#0E0E0E;\">\n                        Un rythme lisible\n                      <\/p>\n                      <p style=\"margin:0;font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:1.6;color:#222;\">\n                        Les espaces r\u00e9guliers rendent la page \u201cpremium\u201d instantan\u00e9ment.\n                      <\/p>\n                    <\/div>\n                    <p style=\"margin:12px 0 0 0;font-family:Arial, Helvetica, sans-serif;font-size:13px;line-height:1.55;color:#222;\">\n                      Astuce : si tu h\u00e9sites, ajoute de l\u2019espace (mais de mani\u00e8re coh\u00e9rente).\n                    <\/p>\n                  <\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- PANEL 3 -->\n        <div class=\"ly-panel\" id=\"ly-panel3\">\n          <div class=\"card\">\n            <div class=\"card-h\">\n              <h3>Hi\u00e9rarchie : scanner la page en 3 secondes<\/h3>\n              <span class=\"meta\">H1\/H2\/body<\/span>\n            <\/div>\n            <div class=\"card-b two\">\n              <div class=\"demo\">\n                <div class=\"bar\"><span>Good hierarchy<\/span><span>clear<\/span><\/div>\n                <div class=\"body good\">\n                  <p class=\"ly-eyebrow\" style=\"margin:0 0 8px 0;\">Guide<\/p>\n                  <p style=\"margin:0 0 8px 0;font-family:Arial, Helvetica, sans-serif;font-weight:900;font-size:30px;letter-spacing:-0.02em;color:#0E0E0E;\">\n                    Layout propre = r\u00e8gles simples\n                  <\/p>\n                  <p style=\"margin:0 0 12px 0;font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:1.6;color:#222;max-width:70ch;\">\n                    Titres nets, sous-titres secondaires, texte lisible. Une seule couleur d\u2019action.\n                  <\/p>\n                  <div class=\"sw\">\n                    <span class=\"pill blue\">Primary<\/span>\n                    <span class=\"pill\">Secondary<\/span>\n                    <span class=\"pill\">Tag<\/span>\n                  <\/div>\n                <\/div>\n              <\/div>\n\n              <div class=\"demo\">\n                <div class=\"bar\"><span>Bad hierarchy<\/span><span>noisy<\/span><\/div>\n                <div class=\"body bad\">\n                  <p style=\"margin:0 0 8px 0;font-family:Arial, Helvetica, sans-serif;font-weight:800;font-size:18px;letter-spacing:-0.01em;\">\n                    Titre moyen\n                  <\/p>\n                  <p class=\"muted\" style=\"margin:0 0 8px 0;font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:1.55;\">\n                    Sous-titre presque pareil \u2192 on ne comprend pas ce qui est important.\n                  <\/p>\n                  <p class=\"muted\" style=\"margin:0;font-family:Arial, Helvetica, sans-serif;font-size:13px;line-height:1.55;\">\n                    Tout est au m\u00eame niveau. R\u00e9sultat : fatigue visuelle.\n                  <\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n\n            <div style=\"padding:0 16px 16px 16px;\">\n              <p style=\"margin:0;font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:1.6;color:#222;max-width:95ch;\">\n                Check rapide : si tu r\u00e9duis la page \u00e0 30% (zoom out), tu dois toujours voir clairement\n                les titres et les blocs. Si tout devient un \u201cmur\u201d, hi\u00e9rarchie trop faible.\n              <\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- PANEL 4 -->\n        <div class=\"ly-panel\" id=\"ly-panel4\">\n          <div class=\"card\">\n            <div class=\"card-h\">\n              <h3>Do \/ Don\u2019t (layout)<\/h3>\n              <span class=\"meta\">rules<\/span>\n            <\/div>\n            <div class=\"card-b two\">\n              <div class=\"demo\">\n                <div class=\"bar\"><span>DO<\/span><span>system<\/span><\/div>\n                <div class=\"body\">\n                  <ul style=\"margin:0;padding-left:18px;font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:1.75;color:#222;\">\n                    <li>Utiliser une grille (12\/8\/4) + modules r\u00e9p\u00e9t\u00e9s<\/li>\n                    <li>Limiter la largeur du texte (60\u201380 caract\u00e8res)<\/li>\n                    <li>Spacing coh\u00e9rent (multiples de 8)<\/li>\n                    <li>1 couleur d\u2019action, le reste neutre<\/li>\n                    <li>Hi\u00e9rarchie claire (H1\/H2\/body)<\/li>\n                  <\/ul>\n                <\/div>\n              <\/div>\n\n              <div class=\"demo\">\n                <div class=\"bar\"><span>DON\u2019T<\/span><span>chaos<\/span><\/div>\n                <div class=\"body bad\">\n                  <ul style=\"margin:0;padding-left:18px;font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:1.75;\">\n                    <li>Changer la grille \u00e0 chaque section<\/li>\n                    <li>Coller le texte bord \u00e0 bord (pas de respiration)<\/li>\n                    <li>Utiliser 3 accents de couleur partout<\/li>\n                    <li>Empiler des effets pour \u201cfaire design\u201d<\/li>\n                    <li>Tout mettre au m\u00eame niveau de titre<\/li>\n                  <\/ul>\n                <\/div>\n              <\/div>\n            <\/div>\n\n            <div style=\"padding:0 16px 16px 16px;\">\n              <p style=\"margin:0;font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:1.6;color:#222;max-width:95ch;\">\n                Le layout \u201cpremium\u201d est souvent le plus simple : peu de r\u00e8gles, mais appliqu\u00e9es partout, sans exception.\n              <\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n\n<section id=\"layout-advanced\" style=\"max-width:1100px;margin:0 auto;padding:10px 16px 52px 16px;\">\n  <style>\n    \/* Layout Advanced add-on *\/\n    .la-wrap{border:1px solid #C9C9C9;border-radius:22px;overflow:hidden;background:#FAFAFA;}\n    .la-head{padding:18px;border-bottom:1px solid #C9C9C9;}\n    .la-eyebrow{margin:0 0 8px 0;font-family:Arial, Helvetica, sans-serif;font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:#666;}\n    .la-h2{margin:0 0 10px 0;font-family:Arial, Helvetica, sans-serif;font-size:30px;letter-spacing:-0.02em;color:#0E0E0E;}\n    .la-lead{margin:0;max-width:95ch;font-family:Arial, Helvetica, sans-serif;font-size:15px;line-height:1.75;color:#222;}\n    .la-grid{display:grid;grid-template-columns:280px 1fr;}\n    @media (max-width: 920px){.la-grid{grid-template-columns:1fr;}}\n    .la-nav{padding:14px;border-right:1px solid #C9C9C9;background:#FAFAFA;}\n    @media (max-width: 920px){.la-nav{border-right:0;border-bottom:1px solid #C9C9C9;}}\n    .la-nav label{\n      display:block;padding:12px 12px;border:1px solid #C9C9C9;border-radius:14px;margin-bottom:10px;cursor:pointer;\n      font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:1.35;color:#0E0E0E;background:#FAFAFA;\n      transition:transform .12s ease, background .12s ease, color .12s ease, border-color .12s ease;\n    }\n    .la-nav label:hover{transform:translateY(-1px);}\n    .la-nav small{display:block;margin-top:4px;color:#666;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;}\n    .la-panels{padding:16px;}\n    .la-panel{display:none;}\n    .la-radio{position:absolute;left:-9999px;}\n\n    #la-tab1:checked ~ .la-grid .la-nav label[for=\"la-tab1\"],\n    #la-tab2:checked ~ .la-grid .la-nav label[for=\"la-tab2\"],\n    #la-tab3:checked ~ .la-grid .la-nav label[for=\"la-tab3\"],\n    #la-tab4:checked ~ .la-grid .la-nav label[for=\"la-tab4\"],\n    #la-tab5:checked ~ .la-grid .la-nav label[for=\"la-tab5\"]{\n      background:#0E0E0E;color:#FAFAFA;border-color:#0E0E0E;\n    }\n\n    #la-tab1:checked ~ .la-grid .la-panels #la-panel1{display:block;}\n    #la-tab2:checked ~ .la-grid .la-panels #la-panel2{display:block;}\n    #la-tab3:checked ~ .la-grid .la-panels #la-panel3{display:block;}\n    #la-tab4:checked ~ .la-grid .la-panels #la-panel4{display:block;}\n    #la-tab5:checked ~ .la-grid .la-panels #la-panel5{display:block;}\n\n    .la-card{border:1px solid #C9C9C9;border-radius:18px;background:#FAFAFA;overflow:hidden;}\n    .la-card + .la-card{margin-top:14px;}\n    .la-card-h{padding:14px 16px;border-bottom:1px solid #C9C9C9;display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;}\n    .la-card-h h3{margin:0;font-family:Arial, Helvetica, sans-serif;font-size:16px;letter-spacing:-0.01em;color:#0E0E0E;}\n    .la-meta{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;font-size:12px;color:#666;letter-spacing:0.06em;text-transform:uppercase;}\n    .la-card-b{padding:16px;}\n\n    .two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}\n    @media (max-width: 920px){.two{grid-template-columns:1fr;}}\n\n    .demo{border:1px solid #C9C9C9;border-radius:18px;overflow:hidden;background:#FAFAFA;}\n    .demo .bar{padding:12px 14px;border-bottom:1px solid #C9C9C9;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;}\n    .demo .bar span{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;font-size:12px;color:#666;}\n    .demo .body{padding:16px;}\n\n    .pillrow{display:flex;gap:10px;flex-wrap:wrap;}\n    .pill{padding:9px 11px;border-radius:999px;border:1px solid #C9C9C9;font-family:Arial, Helvetica, sans-serif;font-size:13px;background:#FAFAFA;color:#0E0E0E;}\n    .pill.dark{background:#0E0E0E;color:#FAFAFA;border-color:#0E0E0E;}\n    .pill.blue{background:#1F4FFF;color:#FAFAFA;border-color:#1F4FFF;}\n    .pill.cyan{background:#00D1FF;color:#0E0E0E;border-color:#00D1FF;}\n\n    \/* Visual patterns *\/\n    .pattern{position:relative;border:1px solid #C9C9C9;border-radius:18px;overflow:hidden;background:#FAFAFA;}\n    .pattern .canvas{height:210px;background:#FAFAFA;position:relative;}\n    .pattern .label{position:absolute;left:12px;top:12px;padding:8px 10px;border-radius:999px;background:#0E0E0E;color:#FAFAFA;\n      font-family:Arial, Helvetica, sans-serif;font-size:12px;letter-spacing:0.10em;text-transform:uppercase;opacity:0.92;}\n    .hot{position:absolute;border-radius:14px;opacity:0.22;}\n    .hot.blue{background:#1F4FFF;}\n    .hot.cyan{background:#00D1FF;}\n    .hot.ink{background:#0E0E0E;}\n    .wire{position:absolute;border:1px solid #C9C9C9;border-radius:14px;background:rgba(250,250,250,0.75);}\n    .mini{font-family:Arial, Helvetica, sans-serif;font-size:13px;line-height:1.55;color:#222;}\n\n    \/* Grid overlay demo *\/\n    .overlayWrap{border:1px solid #C9C9C9;border-radius:18px;overflow:hidden;background:#FAFAFA;}\n    .overlayTop{padding:12px 14px;border-bottom:1px solid #C9C9C9;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;}\n    .overlayTop span{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;font-size:12px;color:#666;}\n    .overlayBody{position:relative;height:240px;background:#FAFAFA;}\n    .cols{position:absolute;inset:12px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:10px;opacity:0.28;pointer-events:none;}\n    .cols div{background:#1F4FFF;border-radius:10px;}\n    .contentMock{position:absolute;inset:12px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:10px;}\n    .block{border:1px solid #C9C9C9;border-radius:14px;background:#FAFAFA;}\n    .block.dark{background:#0E0E0E;border-color:#0E0E0E;}\n    .block.blue{background:#1F4FFF;border-color:#1F4FFF;}\n    .block.cyan{background:#00D1FF;border-color:#00D1FF;}\n  <\/style>\n\n  <div class=\"la-wrap\">\n    <div class=\"la-head\">\n      <p class=\"la-eyebrow\">Layout \u2014 approfondissement<\/p>\n      <h2 class=\"la-h2\">Patterns, composition &amp; recettes de mise en page<\/h2>\n      <p class=\"la-lead\">\n        Tu as d\u00e9j\u00e0 la base (grille, spacing, hi\u00e9rarchie). L\u00e0, on ajoute ce qui fait vraiment \u201cstudio\u201d :\n        <strong>patterns de lecture<\/strong>, <strong>composition<\/strong>, <strong>breakpoints<\/strong>, et des <strong>gabarits<\/strong>\n        r\u00e9utilisables pour tes pages et articles.\n      <\/p>\n    <\/div>\n\n    <input class=\"la-radio\" type=\"radio\" name=\"la-tabs\" id=\"la-tab1\" checked>\n    <input class=\"la-radio\" type=\"radio\" name=\"la-tabs\" id=\"la-tab2\">\n    <input class=\"la-radio\" type=\"radio\" name=\"la-tabs\" id=\"la-tab3\">\n    <input class=\"la-radio\" type=\"radio\" name=\"la-tabs\" id=\"la-tab4\">\n    <input class=\"la-radio\" type=\"radio\" name=\"la-tabs\" id=\"la-tab5\">\n\n    <div class=\"la-grid\">\n      <nav class=\"la-nav\" aria-label=\"Layout advanced navigation\">\n        <label for=\"la-tab1\">Patterns de lecture <small>F \/ Z \/ Hero<\/small><\/label>\n        <label for=\"la-tab2\">Composition <small>poids &#038; \u00e9quilibre<\/small><\/label>\n        <label for=\"la-tab3\">Responsive <small>breakpoints<\/small><\/label>\n        <label for=\"la-tab4\">Recettes de page <small>templates<\/small><\/label>\n        <label for=\"la-tab5\">Checklist <small>audit layout<\/small><\/label>\n      <\/nav>\n\n      <div class=\"la-panels\">\n        <!-- PANEL 1 -->\n        <div class=\"la-panel\" id=\"la-panel1\">\n          <div class=\"la-card\">\n            <div class=\"la-card-h\">\n              <h3>Patterns de lecture : F &amp; Z<\/h3>\n              <span class=\"la-meta\">scanning<\/span>\n            <\/div>\n            <div class=\"la-card-b two\">\n              <div class=\"pattern\">\n                <div class=\"canvas\">\n                  <div class=\"label\">F-pattern<\/div>\n                  <div class=\"wire\" style=\"left:14px;top:18px;right:14px;height:44px;\"><\/div>\n                  <div class=\"wire\" style=\"left:14px;top:72px;right:110px;height:24px;\"><\/div>\n                  <div class=\"wire\" style=\"left:14px;top:106px;right:160px;height:24px;\"><\/div>\n                  <div class=\"wire\" style=\"left:14px;top:140px;width:160px;height:54px;\"><\/div>\n\n                  <div class=\"hot blue\" style=\"left:14px;top:18px;right:14px;height:44px;\"><\/div>\n                  <div class=\"hot cyan\" style=\"left:14px;top:72px;right:110px;height:24px;\"><\/div>\n                  <div class=\"hot cyan\" style=\"left:14px;top:106px;right:160px;height:24px;\"><\/div>\n                  <div class=\"hot ink\" style=\"left:14px;top:140px;width:160px;height:54px;\"><\/div>\n                <\/div>\n                <div style=\"padding:14px;\">\n                  <p class=\"mini\" style=\"margin:0;\">\n                    Id\u00e9al pour pages d\u2019articles : le regard scanne les <strong>lignes hautes<\/strong>, puis descend sur la colonne gauche.\n                    Mets les infos cl\u00e9s (titre, sous-titre, tags) dans ces zones.\n                  <\/p>\n                <\/div>\n              <\/div>\n\n              <div class=\"pattern\">\n                <div class=\"canvas\">\n                  <div class=\"label\">Z-pattern<\/div>\n                  <div class=\"wire\" style=\"left:14px;top:18px;right:14px;height:42px;\"><\/div>\n                  <div class=\"wire\" style=\"left:14px;top:78px;right:14px;height:42px;\"><\/div>\n                  <div class=\"wire\" style=\"left:14px;top:138px;right:14px;height:52px;\"><\/div>\n\n                  <div class=\"hot blue\" style=\"left:14px;top:18px;right:14px;height:42px;\"><\/div>\n                  <div class=\"hot cyan\" style=\"left:14px;top:78px;right:14px;height:42px;\"><\/div>\n                  <div class=\"hot ink\" style=\"left:14px;top:138px;right:14px;height:52px;\"><\/div>\n\n                  <div style=\"position:absolute;left:22px;top:26px;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;font-size:12px;color:#666;\">\u2460<\/div>\n                  <div style=\"position:absolute;right:22px;top:26px;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;font-size:12px;color:#666;\">\u2461<\/div>\n                  <div style=\"position:absolute;left:22px;top:86px;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;font-size:12px;color:#666;\">\u2462<\/div>\n                  <div style=\"position:absolute;right:22px;top:86px;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;font-size:12px;color:#666;\">\u2463<\/div>\n                <\/div>\n                <div style=\"padding:14px;\">\n                  <p class=\"mini\" style=\"margin:0;\">\n                    Id\u00e9al pour landing pages : le regard va de <strong>gauche \u2192 droite<\/strong>, descend, puis finit sur le CTA.\n                    Place ton CTA dans la zone \u201c\u2463\u201d (bas-droit).\n                  <\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n\n            <div style=\"padding:0 16px 16px 16px;\">\n              <div class=\"pillrow\">\n                <span class=\"pill blue\">Articles : F-pattern<\/span>\n                <span class=\"pill\">Portfolios : grille stable<\/span>\n                <span class=\"pill cyan\">Landing : Z-pattern<\/span>\n                <span class=\"pill\">E-commerce : cartes<\/span>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- PANEL 2 -->\n        <div class=\"la-panel\" id=\"la-panel2\">\n          <div class=\"la-card\">\n            <div class=\"la-card-h\">\n              <h3>Composition : poids visuel &amp; \u00e9quilibre<\/h3>\n              <span class=\"la-meta\">balance<\/span>\n            <\/div>\n            <div class=\"la-card-b two\">\n              <div class=\"demo\">\n                <div class=\"bar\"><span>\u00c9quilibr\u00e9<\/span><span>poids r\u00e9parti<\/span><\/div>\n                <div class=\"body\">\n                  <div style=\"display:grid;grid-template-columns:1.3fr 1fr;gap:12px;\">\n                    <div style=\"border:1px solid #C9C9C9;border-radius:18px;padding:14px;background:#FAFAFA;\">\n                      <p style=\"margin:0 0 6px 0;font-family:Arial, Helvetica, sans-serif;font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:#666;\">Hero<\/p>\n                      <p style=\"margin:0 0 8px 0;font-family:Arial, Helvetica, sans-serif;font-weight:900;font-size:22px;letter-spacing:-0.01em;color:#0E0E0E;\">\n                        Titre qui tient la page\n                      <\/p>\n                      <p style=\"margin:0;font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:1.6;color:#222;\">\n                        Un bloc fort + un bloc secondaire = composition stable.\n                      <\/p>\n                    <\/div>\n                    <div style=\"display:grid;gap:12px;\">\n                      <div style=\"border:1px solid #C9C9C9;border-radius:18px;height:74px;background:#1F4FFF;\"><\/div>\n                      <div style=\"border:1px solid #C9C9C9;border-radius:18px;height:74px;background:#00D1FF;\"><\/div>\n                    <\/div>\n                  <\/div>\n                  <p style=\"margin:12px 0 0 0;font-family:Arial, Helvetica, sans-serif;font-size:13px;line-height:1.55;color:#222;\">\n                    Le contraste vient du <strong>format<\/strong> et de la <strong>densit\u00e9<\/strong>, pas d\u2019un effet \u201crandom\u201d.\n                  <\/p>\n                <\/div>\n              <\/div>\n\n              <div class=\"demo\">\n                <div class=\"bar\"><span>D\u00e9s\u00e9quilibr\u00e9<\/span><span>tout crie<\/span><\/div>\n                <div class=\"body\" style=\"background:#0E0E0E;color:#FAFAFA;\">\n                  <p style=\"margin:0 0 8px 0;font-family:Arial, Helvetica, sans-serif;font-weight:900;font-size:18px;letter-spacing:-0.01em;\">\n                    Trop d\u2019\u00e9l\u00e9ments \u201cforts\u201d\n                  <\/p>\n                  <div style=\"display:grid;gap:10px;\">\n                    <div style=\"height:44px;border-radius:14px;background:#1F4FFF;\"><\/div>\n                    <div style=\"height:44px;border-radius:14px;background:#00D1FF;\"><\/div>\n                    <div style=\"height:44px;border-radius:14px;background:#FF2D55;\"><\/div>\n                  <\/div>\n                  <p style=\"margin:12px 0 0 0;font-family:Arial, Helvetica, sans-serif;font-size:13px;line-height:1.55;opacity:0.95;\">\n                    R\u00e9sultat : fatigue. Le regard ne sait pas o\u00f9 se poser. Il faut un \u201csilence\u201d (neutre).\n                  <\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n\n            <div style=\"padding:0 16px 16px 16px;\">\n              <p style=\"margin:0;font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:1.6;color:#222;max-width:95ch;\">\n                R\u00e8gle rapide : sur une section, choisis <strong>1 \u00e9l\u00e9ment dominant<\/strong>. Tout le reste sert le dominant (taille, contraste, spacing).\n              <\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- PANEL 3 -->\n        <div class=\"la-panel\" id=\"la-panel3\">\n          <div class=\"la-card\">\n            <div class=\"la-card-h\">\n              <h3>Responsive : breakpoints &amp; comportements<\/h3>\n              <span class=\"la-meta\">adapt<\/span>\n            <\/div>\n            <div class=\"la-card-b\">\n              <div class=\"overlayWrap\">\n                <div class=\"overlayTop\">\n                  <span>Overlay (12 colonnes) + contenu<\/span>\n                  <span>d\u00e9mo visuelle<\/span>\n                <\/div>\n                <div class=\"overlayBody\">\n                  <div class=\"cols\" aria-hidden=\"true\">\n                    <div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div>\n                  <\/div>\n                  <div class=\"contentMock\">\n                    <div class=\"block dark\" style=\"grid-column:span 7;\"><\/div>\n                    <div class=\"block\" style=\"grid-column:span 5;\"><\/div>\n                    <div class=\"block\" style=\"grid-column:span 4;height:70px;\"><\/div>\n                    <div class=\"block blue\" style=\"grid-column:span 4;height:70px;\"><\/div>\n                    <div class=\"block cyan\" style=\"grid-column:span 4;height:70px;\"><\/div>\n                  <\/div>\n                <\/div>\n              <\/div>\n\n              <div class=\"two\" style=\"margin-top:14px;\">\n                <div class=\"demo\">\n                  <div class=\"bar\"><span>Breakpoints conseill\u00e9s<\/span><span>simple<\/span><\/div>\n                  <div class=\"body\">\n                    <ul style=\"margin:0;padding-left:18px;font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:1.75;color:#222;\">\n                      <li><strong>\u2264 480px<\/strong> : 1 colonne, modules empil\u00e9s<\/li>\n                      <li><strong>\u2264 768px<\/strong> : 4 colonnes (ou 1\u20132), texte plus large<\/li>\n                      <li><strong>\u2264 1024px<\/strong> : 8 colonnes, sections plus a\u00e9r\u00e9es<\/li>\n                      <li><strong>\u2265 1200px<\/strong> : 12 colonnes, max-width constant<\/li>\n                    <\/ul>\n                  <\/div>\n                <\/div>\n\n                <div class=\"demo\">\n                  <div class=\"bar\"><span>R\u00e8gles de conversion<\/span><span>desktop \u2192 mobile<\/span><\/div>\n                  <div class=\"body\">\n                    <ul style=\"margin:0;padding-left:18px;font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:1.75;color:#222;\">\n                      <li>Un \u201c3 cartes\u201d devient <strong>1 carte \/ ligne<\/strong><\/li>\n                      <li>Un hero 2 colonnes devient <strong>titre puis image<\/strong><\/li>\n                      <li>Les sidebar deviennent <strong>sections en dessous<\/strong><\/li>\n                      <li>Le CTA reste visible mais <strong>plus simple<\/strong><\/li>\n                    <\/ul>\n                  <\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- PANEL 4 -->\n        <div class=\"la-panel\" id=\"la-panel4\">\n          <div class=\"la-card\">\n            <div class=\"la-card-h\">\n              <h3>Recettes de page (templates)<\/h3>\n              <span class=\"la-meta\">ready-to-use<\/span>\n            <\/div>\n            <div class=\"la-card-b two\">\n              <div class=\"demo\">\n                <div class=\"bar\"><span>Template A<\/span><span>Article \u201cguide\u201d<\/span><\/div>\n                <div class=\"body\">\n                  <ol style=\"margin:0;padding-left:18px;font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:1.75;color:#222;\">\n                    <li><strong>Hero<\/strong> : titre + sous-titre + tags<\/li>\n                    <li><strong>Intro<\/strong> : 4\u20136 lignes max<\/li>\n                    <li><strong>Sommaire<\/strong> : ancres vers sections<\/li>\n                    <li><strong>Sections<\/strong> : 2 colonnes (texte \/ exemple)<\/li>\n                    <li><strong>R\u00e9sum\u00e9<\/strong> : 5 bullets + checklist<\/li>\n                  <\/ol>\n                  <p style=\"margin:12px 0 0 0;font-family:Arial, Helvetica, sans-serif;font-size:13px;line-height:1.55;color:#222;\">\n                    Avantage : lecture fluide et structur\u00e9e, parfait pour ton site \u201cDesign Atlas\u201d.\n                  <\/p>\n                <\/div>\n              <\/div>\n\n              <div class=\"demo\">\n                <div class=\"bar\"><span>Template B<\/span><span>Portfolio \u201cshowcase\u201d<\/span><\/div>\n                <div class=\"body\">\n                  <ol style=\"margin:0;padding-left:18px;font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:1.75;color:#222;\">\n                    <li><strong>Hero<\/strong> image + titre court<\/li>\n                    <li><strong>Grille<\/strong> : 2\u00d73 ou 3\u00d74 modules<\/li>\n                    <li><strong>Case study<\/strong> : objectif \u2192 process \u2192 r\u00e9sultat<\/li>\n                    <li><strong>CTA<\/strong> : contact \/ soumission<\/li>\n                  <\/ol>\n                  <p style=\"margin:12px 0 0 0;font-family:Arial, Helvetica, sans-serif;font-size:13px;line-height:1.55;color:#222;\">\n                    Avantage : impact visuel maximum, peu de texte, \u201cstudio vibe\u201d.\n                  <\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n\n            <div class=\"two\" style=\"padding:16px;\">\n              <div class=\"demo\">\n                <div class=\"bar\"><span>Template C<\/span><span>Landing \u201cressource\u201d<\/span><\/div>\n                <div class=\"body\">\n                  <ol style=\"margin:0;padding-left:18px;font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:1.75;color:#222;\">\n                    <li>Hero + promesse claire (1 phrase)<\/li>\n                    <li>3 b\u00e9n\u00e9fices en cartes<\/li>\n                    <li>Exemples (avant\/apr\u00e8s)<\/li>\n                    <li>FAQ courte<\/li>\n                    <li>CTA<\/li>\n                  <\/ol>\n                <\/div>\n              <\/div>\n\n              <div class=\"demo\">\n                <div class=\"bar\"><span>Template D<\/span><span>Page \u201cressources\u201d<\/span><\/div>\n                <div class=\"body\">\n                  <ol style=\"margin:0;padding-left:18px;font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:1.75;color:#222;\">\n                    <li>Filtres (cat\u00e9gories) \u2014 m\u00eame sans JS : sections<\/li>\n                    <li>Listes en cards<\/li>\n                    <li>Tags &#038; niveaux (d\u00e9butant \u2192 avanc\u00e9)<\/li>\n                    <li>Derniers ajouts<\/li>\n                  <\/ol>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- PANEL 5 -->\n        <div class=\"la-panel\" id=\"la-panel5\">\n          <div class=\"la-card\">\n            <div class=\"la-card-h\">\n              <h3>Checklist d\u2019audit (layout)<\/h3>\n              <span class=\"la-meta\">10 points<\/span>\n            <\/div>\n            <div class=\"la-card-b\">\n              <div class=\"pillrow\" style=\"margin-bottom:12px;\">\n                <span class=\"pill dark\">Lisible<\/span>\n                <span class=\"pill\">Coh\u00e9rent<\/span>\n                <span class=\"pill blue\">Grille<\/span>\n                <span class=\"pill\">Spacing<\/span>\n                <span class=\"pill cyan\">Scan<\/span>\n              <\/div>\n\n              <ol style=\"margin:0;padding-left:18px;font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:1.8;color:#222;max-width:95ch;\">\n                <li>Le texte d\u00e9passe-t-il 80 caract\u00e8res par ligne ?<\/li>\n                <li>Les marges sont-elles constantes (haut\/bas\/gauche\/droite) ?<\/li>\n                <li>La hi\u00e9rarchie est-elle visible en zoom-out ?<\/li>\n                <li>Le nombre de styles de titres est-il limit\u00e9 (H1\/H2\/H3) ?<\/li>\n                <li>Le spacing suit-il un rythme (8\/16\/24\/32\u2026) ?<\/li>\n                <li>Les blocs \u201ccards\u201d sont-ils align\u00e9s sur une grille stable ?<\/li>\n                <li>La page a-t-elle un \u00e9l\u00e9ment dominant par section ?<\/li>\n                <li>Les CTA sont-ils rares et plac\u00e9s au bon endroit (Z-pattern) ?<\/li>\n                <li>Sur mobile, tout reste-t-il lisible sans scroller 15 ans ?<\/li>\n                <li>As-tu supprim\u00e9 au moins 1 \u00e9l\u00e9ment \u201cd\u00e9coratif\u201d inutile ?<\/li>\n              <\/ol>\n\n              <p style=\"margin:14px 0 0 0;font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:1.6;color:#222;max-width:95ch;\">\n                Si tu coches tout \u00e7a, ton layout est d\u00e9j\u00e0 au niveau \u201cpro\u201d. Ensuite seulement tu peux te permettre des folies visuelles.\n              <\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>Th\u00e9matique Mise en page \/ Layout Playground Un layout propre, c\u2019est une grille + des marges coh\u00e9rentes + une hi\u00e9rarchie lisible. Ici tu peux \u201clire\u201d la structure : colonnes, rythme, spacing, modules. Moins d\u2019effets. Plus de syst\u00e8me. Grilles &#038; colonnes 12\/8\/4 + modules Rythme &#038; spacing marges, respirations Hi\u00e9rarchie titres, sections, scan Do \/ Don\u2019t&#8230;<\/p>\n<p class=\"more-link\"><a href=\"https:\/\/wp11.infocom.work\/index.php\/mise-en-page-layout\/\" 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-108","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wp11.infocom.work\/index.php\/wp-json\/wp\/v2\/pages\/108","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=108"}],"version-history":[{"count":3,"href":"https:\/\/wp11.infocom.work\/index.php\/wp-json\/wp\/v2\/pages\/108\/revisions"}],"predecessor-version":[{"id":177,"href":"https:\/\/wp11.infocom.work\/index.php\/wp-json\/wp\/v2\/pages\/108\/revisions\/177"}],"wp:attachment":[{"href":"https:\/\/wp11.infocom.work\/index.php\/wp-json\/wp\/v2\/media?parent=108"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}