View of a POI is working fine

views/css/d.poi.css

@@ -467,66 +467,112 @@ form.form input[type="checkbox"]:checked + span:before {
     }
 }
 
+/*****************************************
+ *  CHAMPS GÉNÉRIQUES
+ *****************************************/
 
-/* Ligne principale : coordonnées + type */
-.poi-id-main {
+.field {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 19px; /* demandé */
+    flex-direction: column;
+    gap: 4px;
+    padding-bottom: 12px;
+}
+
+.field > label {
     font-weight: 600;
+    font-size: 17px;
 }
 
-/* Coordonnées */
-.poi-id-coords {
-    display: flex;
-    align-items: center;
-    gap: 8px;
+/*****************************************
+ *  TEXTES LONGS (t_)
+ *****************************************/
+
+.field-t .field-value {
+    padding: 10px 12px;
+    font-size: 15px;
 }
 
-.poi-id-coords a {
-    color: #0055aa;
-    text-decoration: none;
-}
-.poi-id-coords a:hover {
-    text-decoration: underline;
-}
+/*****************************************
+ *  NOMBRES ET LIENS EN LIGNE (n_ et l_)
+ *****************************************/
 
-.poi-id-elev {
-    color: #333;
-}
-
-/* Type */
-.poi-id-type {
-    display: flex;
-    align-items: center;
+/* Label + valeur sur une seule ligne */
+.field-n,
+.field-l {
+    flex-direction: row;
+    align-items: baseline;
     gap: 6px;
 }
 
-/* Label discret */
-.poi-id-label {
-    font-weight: 500;
-    color: #444;
+/* On enlève le padding bas qui faisait “bloc” */
+.field-n,
+.field-l {
+    padding-bottom: 4px;
 }
 
-/* Dates en petit */
-.poi-id-dates {
-    font-size: 15px; /* demandé */
-    color: #555;
-    display: flex;
-    gap: 20px;
+/* Valeur inline */
+.inline-value {
+    display: inline-block;
+    font-size: 15px;
+    color: #222;
 }
 
-/* Mobile */
-@media (max-width: 700px) {
-    .poi-id-main {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 4px;
-    }
-    .poi-id-dates {
-        flex-direction: column;
-        gap: 2px;
+/* Liens */
+.inline-value a {
+    color: #1a5ad7;
+    font-weight: 600;
+    text-decoration: none;
+}
+.inline-value a:hover {
+    text-decoration: underline;
+}
+
+
+/*****************************************
+ *  Booleans grid in poi view
+ *****************************************/
+
+.bool-grid {
+    margin: 20px 0 0 0;
+    padding: 20px 15px;
+    background: rgba(200, 220, 255, 0.25);
+	border-top: 1px solid #bbb;
+}
+
+.bool-row {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: 1fr;
+    text-align: center;
+    margin-bottom: 10px;
+}
+
+.bool-row.labels {
+    font-weight: 600;
+    font-size: 16px;
+}
+
+.bool-label {
+    padding: 5px;
+}
+
+.bool-row.values {
+    margin-top: 5px;
+}
+
+.boolean-pill {
+    display: inline-block;
+    padding: 8px 12px;
+    border-radius: 20px;
+    font-weight: 700;
+    font-size: 18px;
+    background: white;
+}
+
+@media (max-width: 900px) {
+    .bool-row {
+        grid-auto-flow: row;
+        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
     }
 }