style(rwd): améliorer responsive — header mobile, tailles fluides, br conditionnels, listes resserrées

style.css

@@ -31,13 +31,17 @@ body {
   background: var(--bg);
   color: var(--fg);
   font-family: var(--serif);
-  font-size: 18px;
+  font-size: clamp(16px, 1.6vw, 18px);
   line-height: 1.65;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
+  overflow-x: hidden;
 }
 
+img, svg { max-width: 100%; height: auto; }
+code, pre { word-break: break-word; overflow-wrap: anywhere; }
+
 a { color: var(--accent); text-decoration: none; transition: opacity 0.2s; }
 a:hover { opacity: 0.7; }
 
@@ -87,10 +91,16 @@ code {
 .site-nav a {
   color: var(--fg-muted);
   letter-spacing: 0.02em;
+  padding: 0.5rem 0;
 }
 .site-nav a:hover { color: var(--fg); opacity: 1; }
 
-@media (max-width: 720px) {
+@media (max-width: 880px) {
+  .site-nav { gap: 1.25rem; font-size: 0.78rem; }
+}
+@media (max-width: 640px) {
+  .site-header { padding: 0.85rem var(--gutter); gap: 1rem; flex-wrap: wrap; }
+  .site-nav { gap: 1rem; }
   .site-nav a:not(:last-child) { display: none; }
 }
 
@@ -126,10 +136,14 @@ code {
 .title {
   font-family: var(--serif);
   font-weight: 400;
-  font-size: clamp(2.3rem, 5.5vw, 4rem);
+  font-size: clamp(1.9rem, 5.5vw, 4rem);
-  line-height: 1.05;
+  line-height: 1.08;
   letter-spacing: -0.02em;
   margin-bottom: 2rem;
+  text-wrap: balance;
+}
+@media (max-width: 560px) {
+  .title br { display: none; }
 }
 .title em { color: var(--accent); font-style: italic; }
 
@@ -256,6 +270,9 @@ code {
   line-height: 2.4;
   color: var(--fg);
 }
+@media (max-width: 720px) {
+  .conviction-list { line-height: 2; font-size: 0.9rem; }
+}
 .conviction-list li {
   display: flex;
   align-items: center;
@@ -334,10 +351,11 @@ code {
   align-self: center;
 }
 @media (max-width: 880px) {
-  .loop-grid { grid-template-columns: 1fr; }
+  .loop-grid { grid-template-columns: 1fr; gap: 1rem; }
-  .loop-arrow { transform: rotate(90deg); margin: -0.5rem 0; }
+  .loop-arrow { transform: rotate(90deg); margin: -0.25rem 0; font-size: 1.25rem; }
-  .loop-loop { transform: none; }
+  .loop-loop { transform: none; grid-column: auto; align-self: auto; font-size: 1.5rem; }
   .loop-node.ext { grid-column: auto; }
+  .loop-node { padding: 1.25rem; }
 }
 
 .loop-footer {
@@ -388,7 +406,12 @@ code {
   line-height: 1.3;
   letter-spacing: -0.01em;
   margin-bottom: 1rem;
-  padding-right: 2rem;
+  padding-right: 2.25rem;
+}
+@media (max-width: 560px) {
+  .pillar { padding: 1.75rem 1.4rem; }
+  .pillar h3 { font-size: 1.2rem; }
+  .pillar-num { top: 1rem; right: 1.1rem; font-size: 0.85rem; }
 }
 .pillar h3 .ratified {
   display: block;
@@ -479,7 +502,7 @@ code {
 }
 .state-list li {
   display: grid;
-  grid-template-columns: 4rem 1fr;
+  grid-template-columns: 3.25rem 1fr;
   gap: 1rem;
   align-items: baseline;
   padding: 0.6rem 0;
@@ -495,6 +518,10 @@ code {
   text-align: right;
   letter-spacing: -0.02em;
 }
+@media (max-width: 560px) {
+  .state-list li { grid-template-columns: 2.75rem 1fr; gap: 0.75rem; font-size: 0.9rem; }
+  .state-list .num { font-size: 1.2rem; }
+}
 
 .state-list-soft {
   list-style: none;
@@ -534,11 +561,15 @@ code {
 .closing-title {
   font-family: var(--serif);
   font-weight: 400;
-  font-size: clamp(2.2rem, 5vw, 3.5rem);
+  font-size: clamp(1.8rem, 5vw, 3.5rem);
   letter-spacing: -0.02em;
   line-height: 1.15;
   margin-bottom: 2rem;
   max-width: none;
+  text-wrap: balance;
+}
+@media (max-width: 560px) {
+  .closing-title br { display: none; }
 }
 .closing-lede {
   font-size: 1.1rem;
@@ -593,6 +624,7 @@ code {
   font-size: 0.85rem;
   line-height: 1.9;
   color: var(--fg-muted);
+  word-break: break-word;
 }
 .site-footer a:hover { color: var(--accent); opacity: 1; }
 .muted { color: var(--fg-dim); font-size: 0.78rem; }