/* =========================================================================== GRILLE MAISON — Oxima 12 colonnes, zéro dépendance. Remplace bootstrap-grid (CDN). Adossée au grid framework Concrete "oxima_grid" (src/Grid/OximaGridFramework.php). Row : .grid Colonne : .grid__col + .grid__col--N (N = 1..12) Offset : .grid__offset--N (N = 1..11, laisse N colonnes vides à gauche) Mobile-first : colonnes empilées, puis largeurs à partir de 768px — palier identique à celui de Bootstrap 5 (col-md-*), donc rendu inchangé sur les agencements déjà en ligne. FLEX ET NON CSS GRID — raison : Concrete stocke l'offset d'une colonne comme un décalage RELATIF au flux (comme le margin-left de Bootstrap), et le driver ne peut émettre qu'une classe par colonne, sans connaître la position cumulée des colonnes précédentes. En CSS Grid, un offset ne peut s'exprimer qu'en grid-column-start ABSOLU : une colonne offsetée qui n'est pas la première est alors mal placée (chevauchement, ou renvoi à la ligne suivante). Le flex avec largeurs et marges en % reproduit exactement la sémantique de Bootstrap. NE PAS convertir en CSS Grid. Largeur d'une piste : T = (100% - 11 * gouttière) / 12 span N → N * T + (N-1) * gouttière offset N → N * T + N * gouttière (marge à gauche) =========================================================================== */ :root { /* Gouttière horizontale — équivalent de --bs-gutter-x de Bootstrap. */ --grid-gutter: 1.5rem; /* Gouttière verticale entre colonnes empilées (mobile) ou lignes qui passent à la ligne. 0 = comportement de Bootstrap (--bs-gutter-y), donc rendu identique à l'existant. Peut être augmentée si besoin. */ --grid-gutter-y: 0; } .grid { /* position:relative REQUIS par l'éditeur d'agencement Concrete : le slider de redimensionnement mesure les colonnes via .position().left (relatif à l'offsetParent). Concrete le pose en dur pour .row (Bootstrap) — notre row s'appelle .grid, il faut donc le poser nous-mêmes, sinon la poignée se décale au drag. Ne pas retirer. */ position: relative; display: flex; flex-wrap: wrap; column-gap: var(--grid-gutter); row-gap: var(--grid-gutter-y); width: 100%; } /* Mobile : toute colonne = pleine largeur. flex-shrink:0 → la largeur calculée fait foi (comportement des colonnes Bootstrap). min-width:0 → évite qu'un contenu large ne fasse déborder la colonne. */ .grid__col { flex: 0 0 auto; width: 100%; min-width: 0; } /* --- BREAKPOINT D'ACTIVATION (768px — aligné sur col-md-* de Bootstrap) --- */ @media (min-width: 768px) { .grid__col--1 { width: calc(1 * (100% - 11 * var(--grid-gutter)) / 12 + 0 * var(--grid-gutter)); } .grid__col--2 { width: calc(2 * (100% - 11 * var(--grid-gutter)) / 12 + 1 * var(--grid-gutter)); } .grid__col--3 { width: calc(3 * (100% - 11 * var(--grid-gutter)) / 12 + 2 * var(--grid-gutter)); } .grid__col--4 { width: calc(4 * (100% - 11 * var(--grid-gutter)) / 12 + 3 * var(--grid-gutter)); } .grid__col--5 { width: calc(5 * (100% - 11 * var(--grid-gutter)) / 12 + 4 * var(--grid-gutter)); } .grid__col--6 { width: calc(6 * (100% - 11 * var(--grid-gutter)) / 12 + 5 * var(--grid-gutter)); } .grid__col--7 { width: calc(7 * (100% - 11 * var(--grid-gutter)) / 12 + 6 * var(--grid-gutter)); } .grid__col--8 { width: calc(8 * (100% - 11 * var(--grid-gutter)) / 12 + 7 * var(--grid-gutter)); } .grid__col--9 { width: calc(9 * (100% - 11 * var(--grid-gutter)) / 12 + 8 * var(--grid-gutter)); } .grid__col--10 { width: calc(10 * (100% - 11 * var(--grid-gutter)) / 12 + 9 * var(--grid-gutter)); } .grid__col--11 { width: calc(11 * (100% - 11 * var(--grid-gutter)) / 12 + 10 * var(--grid-gutter)); } .grid__col--12 { width: 100%; } .grid__offset--1 { margin-left: calc(1 * (100% - 11 * var(--grid-gutter)) / 12 + 1 * var(--grid-gutter)); } .grid__offset--2 { margin-left: calc(2 * (100% - 11 * var(--grid-gutter)) / 12 + 2 * var(--grid-gutter)); } .grid__offset--3 { margin-left: calc(3 * (100% - 11 * var(--grid-gutter)) / 12 + 3 * var(--grid-gutter)); } .grid__offset--4 { margin-left: calc(4 * (100% - 11 * var(--grid-gutter)) / 12 + 4 * var(--grid-gutter)); } .grid__offset--5 { margin-left: calc(5 * (100% - 11 * var(--grid-gutter)) / 12 + 5 * var(--grid-gutter)); } .grid__offset--6 { margin-left: calc(6 * (100% - 11 * var(--grid-gutter)) / 12 + 6 * var(--grid-gutter)); } .grid__offset--7 { margin-left: calc(7 * (100% - 11 * var(--grid-gutter)) / 12 + 7 * var(--grid-gutter)); } .grid__offset--8 { margin-left: calc(8 * (100% - 11 * var(--grid-gutter)) / 12 + 8 * var(--grid-gutter)); } .grid__offset--9 { margin-left: calc(9 * (100% - 11 * var(--grid-gutter)) / 12 + 9 * var(--grid-gutter)); } .grid__offset--10 { margin-left: calc(10 * (100% - 11 * var(--grid-gutter)) / 12 + 10 * var(--grid-gutter)); } .grid__offset--11 { margin-left: calc(11 * (100% - 11 * var(--grid-gutter)) / 12 + 11 * var(--grid-gutter)); } } /* --- Masquage par device (panneau Design d'une colonne d'agencement) ------ Paliers Bootstrap : sm 576, md 768, lg 992, xl 1200. */ .grid-hide--xs { display: none; } @media (min-width: 576px) { .grid-hide--xs { display: block; } } @media (min-width: 576px) and (max-width: 767.98px) { .grid-hide--sm { display: none; } } @media (min-width: 768px) and (max-width: 991.98px) { .grid-hide--md { display: none; } } @media (min-width: 992px) and (max-width: 1199.98px) { .grid-hide--lg { display: none; } } /* =========================================================================== SHIM DE COMPATIBILITÉ — BLOCS DU CORE CONCRETE Quatre blocs du core (gallery, switch_language, survey, express_entry_list) émettent encore du markup de grille Bootstrap. Concrete 9 style leur apparence via ses feuilles "features" (concrete/css/features/*), mais ne définit ni .row ni .col-* : il les attend du thème. Sans Bootstrap, leur contenu s'empile au lieu de se répartir en colonnes. Portée limitée aux classes que ces quatre blocs émettent réellement — ce n'est PAS un portage de Bootstrap. Ne pas étendre par anticipation : si un bloc manque à l'appel, ajouter la classe qu'il émet, rien de plus. La mécanique reproduit celle de Bootstrap (gouttière en padding + marges négatives sur la row) et non celle de .grid (gouttière en gap), car c'est ce que le markup de ces blocs attend. Scopé sous .ccm-page (wrapper de page posé par getPageWrapperClass()) : les panneaux de l'admin sont injectés hors de ce wrapper et conservent leur propre Bootstrap. C'est la différence avec .grid, qui doit rester dé-scopé pour la row de référence de l'éditeur d'agencement. NE COUVRE PAS le bloc accordion : il délègue son comportement au JS de Bootstrap (data-bs-toggle="collapse"), qu'aucun CSS ne remplace. Sur un thème sans Bootstrap, cet accordéon s'affiche mais ne s'ouvre pas — le retirer de la liste des blocs proposés à l'éditeur, ou surcharger son template en
/. =========================================================================== */ .ccm-page .row { --bs-gutter-x: var(--grid-gutter, 1.5rem); --bs-gutter-y: 0; display: flex; flex-wrap: wrap; /* la row remonte de la gouttière verticale que chaque colonne réapplique ci-dessous : net nul sur la première ligne, écart entre les suivantes. */ margin-top: calc(-1 * var(--bs-gutter-y)); margin-right: calc(-0.5 * var(--bs-gutter-x)); margin-left: calc(-0.5 * var(--bs-gutter-x)); } .ccm-page .row > * { /* Bootstrap l'obtient de son reset global ; ici la règle doit être autonome, sinon les largeurs en % excluent le padding de gouttière. */ box-sizing: border-box; flex-shrink: 0; width: 100%; max-width: 100%; padding-right: calc(var(--bs-gutter-x) * 0.5); padding-left: calc(var(--bs-gutter-x) * 0.5); margin-top: var(--bs-gutter-y); } /* Gouttières — .gx-0 : gallery | .g-0 : switch_language | .g-3 : express_entry_list */ .ccm-page .row.g-0, .ccm-page .row.gx-0 { --bs-gutter-x: 0; } .ccm-page .row.g-3 { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; } /* Colonnes auto — switch_language, express_entry_list */ .ccm-page .row.row-cols-auto > *, .ccm-page .col-auto { flex: 0 0 auto; width: auto; } /* Colonnes fixes — survey (col-sm-2), gallery + express_entry_list (col-md-6/12) */ @media (min-width: 576px) { .ccm-page .col-sm-2 { flex: 0 0 auto; width: 16.66666667%; } } @media (min-width: 768px) { .ccm-page .col-md-6 { flex: 0 0 auto; width: 50%; } .ccm-page .col-md-12 { flex: 0 0 auto; width: 100%; } } /* Utilitaires émis par ces mêmes blocs */ .ccm-page .row.align-items-center { align-items: center; } .ccm-page .me-3 { margin-right: 1rem; } .ccm-page .ms-3 { margin-left: 1rem; } .ccm-page .mb-3 { margin-bottom: 1rem; } .ccm-page .mb-4 { margin-bottom: 1.5rem; }