/* =========================================================================== GRILLE MAISON — Mobikes 12 colonnes, zéro dépendance. Adossée au grid framework Concrete "mobikes_grid" (src/Grid/MobikesGridFramework.php). IMPORTANT — sélecteurs NON scopés sous .mobikes-theme (contrairement au reste du thème). En mode édition, Concrete rend une row de référence (12 colonnes) HORS du wrapper de thème pour calculer les points d'accroche du slider de redimensionnement des colonnes d'agencement. Si .grid/.grid__col sont scopés, cette row de référence n'est pas stylée → le curseur/poignée se décale du bord réel de colonne. Ces classes BEM n'existent que dans notre markup et grid.css ne se charge pas dans l'admin (thème séparé) : dé-scoper est sûr. NE PAS re-préfixer par .mobikes-theme. 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 : les colonnes sont empilées (pleine largeur), puis prennent leur largeur à partir du BREAKPOINT D'ACTIVATION (768px par défaut). Gouttière : --grid-gutter (définie dans base.css), appliquée sur les deux axes — l'écart vertical entre colonnes empilées ou lignes qui passent à la ligne est voulu ici. 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) Extensible : pour un palier supplémentaire (ex. comportement spécifique tablette/desktop), ajouter un bloc @media dédié — voir la variante ".grid--desktop" en bas de fichier comme modèle. =========================================================================== */ .grid { /* position:relative REQUIS pour l'éditeur d'agencement Concrete : le slider de redimensionnement mesure les colonnes via .position().left (relatif à l'offsetParent). Concrete pose position:relative sur la row en dur pour la classe .row (Bootstrap) — notre row s'appelle .grid, il faut donc le poser nous-mêmes, sinon la row réelle et la row de référence sont mesurées dans des repères différents → poignée décalée au drag. Ne pas retirer. */ position: relative; display: flex; flex-wrap: wrap; gap: var(--grid-gutter); width: 100%; } /* Mobile : toute colonne = pleine largeur. flex-shrink:0 → la largeur calculée fait foi. 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 (défaut : 768px) --------------------------- */ @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)); } } /* --- VARIANTE PAR PAGE : colonnes seulement en desktop (>= 992px) -------- À poser sur une row précise (classe custom Concrete sur l'agencement) pour les mises en page qui doivent rester empilées sur tablette et ne passer en colonnes qu'en desktop. Le défaut (768px) reste inchangé pour le reste. */ @media (max-width: 991.98px) { .grid--desktop > .grid__col { width: 100%; /* empilé */ } .grid--desktop > [class*="grid__offset--"] { margin-left: 0; /* neutralise les offsets */ } } /* =========================================================================== 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; }