/* ============================================================ PADEL COLLECTION — Grille 12 colonnes Margin et gutter : 12pt ≈ 16px ============================================================ */ /* ---- Container ---- Largeur max 1440px, padding latéral = grid-margin (16px), se passe automatiquement en pleine largeur sous cette borne. */ .container { width: 100%; max-width: var(--grid-max-width); margin-inline: auto; padding-inline: var(--grid-margin); } /* ---- Variante full-bleed ---- Pour les blocs qui touchent les bords (vidéo de fond, sections sombres). Pas de padding ; on imbrique un .container à l'intérieur si besoin. */ .container--bleed { max-width: none; padding-inline: 0; } /* ---- Grille ---- 12 colonnes égales, gutter horizontal de 16px. Colonnes adressables via .col-N (N de 1 à 12) ou via grid-column en CSS direct. */ .grid { display: grid; grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); column-gap: var(--grid-gutter); row-gap: var(--grid-gutter); } /* Helpers de span — desktop par défaut */ .col-1 { grid-column: span 1; } .col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-9 { grid-column: span 9; } .col-10 { grid-column: span 10; } .col-11 { grid-column: span 11; } .col-12 { grid-column: span 12; } /* Helpers de start (pour décaler) */ .col-start-1 { grid-column-start: 1; } .col-start-2 { grid-column-start: 2; } .col-start-3 { grid-column-start: 3; } .col-start-4 { grid-column-start: 4; } .col-start-5 { grid-column-start: 5; } .col-start-6 { grid-column-start: 6; } .col-start-7 { grid-column-start: 7; } .col-start-8 { grid-column-start: 8; } .col-start-9 { grid-column-start: 9; } .col-start-10 { grid-column-start: 10; } .col-start-11 { grid-column-start: 11; } .col-start-12 { grid-column-start: 12; } /* ============================================================ Responsive — la grille reste en 12 colonnes, mais on adapte les spans des éléments via les classes .col-N-md / .col-N-sm. ============================================================ */ /* Tablet (≤ 1024px) */ @media (max-width: 1024px) { .col-1-md { grid-column: span 1; } .col-2-md { grid-column: span 2; } .col-3-md { grid-column: span 3; } .col-4-md { grid-column: span 4; } .col-5-md { grid-column: span 5; } .col-6-md { grid-column: span 6; } .col-7-md { grid-column: span 7; } .col-8-md { grid-column: span 8; } .col-9-md { grid-column: span 9; } .col-10-md { grid-column: span 10; } .col-11-md { grid-column: span 11; } .col-12-md { grid-column: span 12; } } /* Mobile (≤ 640px) — par défaut tout passe en col-12 */ @media (max-width: 640px) { .grid > * { grid-column: span 12; } .col-1-sm { grid-column: span 1; } .col-2-sm { grid-column: span 2; } .col-3-sm { grid-column: span 3; } .col-4-sm { grid-column: span 4; } .col-5-sm { grid-column: span 5; } .col-6-sm { grid-column: span 6; } .col-7-sm { grid-column: span 7; } .col-8-sm { grid-column: span 8; } .col-9-sm { grid-column: span 9; } .col-10-sm { grid-column: span 10; } .col-11-sm { grid-column: span 11; } .col-12-sm { grid-column: span 12; } } /* ============================================================ Debug grille — activer en ajoutant la classe .grid-debug sur pour visualiser les colonnes en dev. À retirer en prod. ============================================================ */ .grid-debug::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999; max-width: var(--grid-max-width); margin-inline: auto; padding-inline: var(--grid-margin); background-image: linear-gradient( to right, rgba(189, 85, 47, 0.10) 0, rgba(189, 85, 47, 0.10) calc((100% / 12) - var(--grid-gutter)), transparent calc((100% / 12) - var(--grid-gutter)), transparent calc(100% / 12) ); background-size: calc(100% / 12) 100%; background-clip: content-box; }