@nappr/nappr-styles 0.3.2 → 0.3.3

package/docs/_sidebar.md

@@ -3,9 +3,9 @@
 - [**Getting started**](pages/quick-start.md)
 
 - Styles
-
   - [Helpers](pages/helpers.md)
   - [Typography](pages/typography.md)
+  - [Grid](pages/grid.md)
   - [Responsive Grid](pages/responsive.md)
   - [Scrollbox](pages/scrollbox.md)
   - [Display](pages/displays.md)
@@ -15,4 +15,4 @@
 
 - Mixins
 
-- [Github](https://github.com/sixertoy/napper-styles)
+- [Github](https://github.com/sixertoy/nappr-styles)

package/docs/docs.theme.css

@@ -1 +1,2 @@
-.docs-palette{align-items:center;border:1px solid #ccc;display:flex;flex:1;height:70px;justify-content:center;text-align:center}/*# sourceMappingURL=docs.theme.css.map */
+.docs-palette{align-items:center;border:1px solid #ccc;display:flex;flex:1;height:70px;justify-content:center;text-align:center}
+/*# sourceMappingURL=docs.theme.css.map */

package/docs/docs.theme.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../docs.theme.scss"],"names":[],"mappings":"AAQA,cACE,mBACA,sBACA,aACA,OACA,YACA,uBACA","file":"docs.theme.css"}
+{"version":3,"sources":["../docs.theme.scss"],"names":[],"mappings":"AAOA,cACE,kBAAA,CACA,qBAAA,CACA,YAAA,CACA,MAAA,CACA,WAAA,CACA,sBAAA,CACA,iBAAA","file":"docs.theme.css"}

package/docs/index.html

@@ -24,7 +24,7 @@
         onlyCover: true,
         loadSidebar: true,
         routerMode: 'hash',
-        name: '@iziges/nappr-styles',
+        name: '@nappr/nappr-styles',
         repo: 'https://github.com/sixertoy/nappr-styles',
       };
     </script>

package/docs/pages/displays.md

@@ -76,17 +76,35 @@
   </div>
 </pre>
 
-#### .is-top-to-bottom {
+#### .is-inset-0
 
-top: 0;
-bottom: 0;
-}
+> Place l'élément avec `inset: 0` (couvre tous les bords)
 
-#### .is-left-to-right {
+<pre class="docsify-example">
+  <div class="is-relative" style="min-height:144px;border:1px solid #CCC;min-width:100%;width:100%;height:140px;">
+    <div class="is-absolute is-inset-0" style="background-color:rgba(0,0,0,0.2);" />
+  </div>
+</pre>
+
+#### .is-stretch-y
 
-left: 0;
-right: 0;
-}
+> Étire l'élément verticalement de haut en bas (`top: 0; bottom: 0`)
+
+<pre class="docsify-example">
+  <div class="is-relative" style="min-height:144px;border:1px solid #CCC;min-width:100%;width:100%;height:140px;">
+    <div class="is-absolute is-stretch-y" style="left:10px;right:10px;background-color:rgba(0,0,0,0.2);" />
+  </div>
+</pre>
+
+#### .is-stretch-x
+
+> Étire l'élément horizontalement de gauche à droite (`left: 0; right: 0`)
+
+<pre class="docsify-example">
+  <div class="is-relative" style="min-height:144px;border:1px solid #CCC;min-width:100%;width:100%;height:140px;">
+    <div class="is-absolute is-stretch-x" style="top:10px;bottom:10px;background-color:rgba(0,0,0,0.2);" />
+  </div>
+</pre>
 
 ## Dimensions
 

package/docs/pages/grid.md

@@ -0,0 +1,365 @@
+# Grille CSS Grid
+
+> Système de grille responsive basé sur CSS Grid avec 12 colonnes et des gouttières personnalisables
+
+## Introduction
+
+Le système de grille utilise CSS Grid pour créer des layouts flexibles et responsive. La grille est composée de 12 colonnes avec des gouttières (gaps) configurables.
+
+## Container de base
+
+Utilisez la classe `.grid` pour créer un container de grille :
+
+```html
+<div class="grid">
+  <!-- Vos colonnes ici -->
+</div>
+```
+
+## Colonnes
+
+### Colonnes de base
+
+Les colonnes sont définies de 1 à 12. Utilisez `.grid-col-{nombre}` pour définir la largeur d'une colonne :
+
+```html
+<div class="grid">
+  <div class="grid-col-12">12 colonnes (100%)</div>
+  <div class="grid-col-6">6 colonnes (50%)</div>
+  <div class="grid-col-4">4 colonnes (33.33%)</div>
+  <div class="grid-col-3">4 colonnes (25%)</div>
+</div>
+```
+
+### Colonnes responsive
+
+Le système est mobile-first. Utilisez les préfixes de breakpoint pour définir des colonnes différentes selon la taille d'écran :
+
+- `.grid-col-sm-*` : ≥ 576px (Mobile)
+- `.grid-col-md-*` : ≥ 768px (Tablet)
+- `.grid-col-lg-*` : ≥ 1024px (Desktop)
+- `.grid-col-xl-*` : ≥ 1248px (Desktop Large)
+
+```html
+<div class="grid">
+  <!-- Mobile: 1 colonne, Tablet: 2 colonnes, Desktop: 3 colonnes -->
+  <div class="grid-col-12 grid-col-md-6 grid-col-lg-4">
+    Colonne responsive
+  </div>
+  <div class="grid-col-12 grid-col-md-6 grid-col-lg-4">
+    Colonne responsive
+  </div>
+  <div class="grid-col-12 grid-col-md-12 grid-col-lg-4">
+    Colonne responsive
+  </div>
+</div>
+```
+
+## Décalage (Offset)
+
+### Offset vers la droite
+
+Utilisez `.grid-col-offset-{nombre}` pour décaler une colonne vers la droite :
+
+```html
+<div class="grid">
+  <!-- Colonne de 4 colonnes décalée de 2 colonnes vers la droite -->
+  <div class="grid-col-4 grid-col-offset-2">
+    Colonne décalée
+  </div>
+</div>
+```
+
+### Offset vers la gauche
+
+Utilisez `.grid-col-offset-{nombre}--right` pour définir où se termine une colonne :
+
+```html
+<div class="grid">
+  <!-- Colonne qui se termine à la position 9 -->
+  <div class="grid-col-4 grid-col-offset-8--right">
+    Colonne avec offset right
+  </div>
+</div>
+```
+
+### Exemple : Centrer une colonne
+
+```html
+<div class="grid">
+  <!-- Colonne de 4 colonnes centrée (offset de 4) -->
+  <div class="grid-col-4 grid-col-offset-4">
+    Colonne centrée
+  </div>
+</div>
+```
+
+## Gouttières (Gaps)
+
+### Gouttières de base
+
+Définissez l'espacement entre les colonnes avec les classes de gouttières :
+
+- `.grid-gap-none` : Pas de gouttière (0px)
+- `.grid-gap-small` : Petite gouttière (6px)
+- `.grid-gap-medium` : Gouttière moyenne (12px) - **défaut**
+- `.grid-gap-large` : Grande gouttière (24px)
+- `.grid-gap-xlarge` : Très grande gouttière (48px)
+
+```html
+<div class="grid grid-gap-large">
+  <div class="grid-col-6">Colonne 1</div>
+  <div class="grid-col-6">Colonne 2</div>
+</div>
+```
+
+### Gouttières responsive
+
+Les gouttières peuvent être différentes selon les breakpoints :
+
+```html
+<div class="grid grid-gap-small grid-gap-md-medium grid-gap-lg-large">
+  <div class="grid-col-12 grid-col-md-6">Colonne 1</div>
+  <div class="grid-col-12 grid-col-md-6">Colonne 2</div>
+</div>
+```
+
+## Nombre de colonnes du container
+
+Par défaut, le container utilise 12 colonnes. Vous pouvez changer le nombre de colonnes avec `.grid-cols-{nombre}` :
+
+```html
+<!-- Grille avec 6 colonnes -->
+<div class="grid grid-cols-6">
+  <div class="grid-col-2">2/6</div>
+  <div class="grid-col-2">2/6</div>
+  <div class="grid-col-2">2/6</div>
+</div>
+```
+
+### Responsive
+
+```html
+<div class="grid grid-cols-1 grid-cols-md-2 grid-cols-lg-3 grid-cols-xl-4">
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+  <div>Item 4</div>
+</div>
+```
+
+## Alignement des items
+
+### Alignement vertical (align-items)
+
+- `.grid-items-top` : Aligne les items en haut
+- `.grid-items-middle` : Centre les items verticalement
+- `.grid-items-bottom` : Aligne les items en bas
+- `.grid-items-stretch` : Étire les items pour remplir (défaut)
+
+```html
+<div class="grid grid-items-middle">
+  <div class="grid-col-4">Item centré verticalement</div>
+  <div class="grid-col-4">Item centré verticalement</div>
+</div>
+```
+
+### Justification horizontale (justify-items)
+
+- `.grid-justify-start` : Aligne les items à gauche
+- `.grid-justify-center` : Centre les items horizontalement
+- `.grid-justify-end` : Aligne les items à droite
+- `.grid-justify-stretch` : Étire les items pour remplir (défaut)
+
+```html
+<div class="grid grid-justify-center">
+  <div class="grid-col-4">Item centré horizontalement</div>
+</div>
+```
+
+### Alignement et justification combinés (place-items)
+
+- `.grid-place-start` : Haut/Gauche
+- `.grid-place-center` : Centre
+- `.grid-place-end` : Bas/Droite
+- `.grid-place-stretch` : Étire
+
+```html
+<div class="grid grid-place-center">
+  <div class="grid-col-4">Item centré</div>
+</div>
+```
+
+## Alignement du contenu
+
+### Alignement vertical du contenu (align-content)
+
+- `.grid-content-top` : Aligne le contenu en haut
+- `.grid-content-middle` : Centre le contenu verticalement
+- `.grid-content-bottom` : Aligne le contenu en bas
+- `.grid-content-between` : Espace entre les éléments
+- `.grid-content-around` : Espace autour des éléments
+- `.grid-content-evenly` : Espace égal autour des éléments
+- `.grid-content-stretch` : Étire le contenu
+
+```html
+<div class="grid grid-content-middle" style="height: 400px;">
+  <div class="grid-col-4">Contenu centré</div>
+</div>
+```
+
+### Justification horizontale du contenu (justify-content)
+
+- `.grid-justify-content-start` : Aligne le contenu à gauche
+- `.grid-justify-content-center` : Centre le contenu horizontalement
+- `.grid-justify-content-end` : Aligne le contenu à droite
+- `.grid-justify-content-between` : Espace entre les éléments
+- `.grid-justify-content-around` : Espace autour des éléments
+- `.grid-justify-content-evenly` : Espace égal autour des éléments
+- `.grid-justify-content-stretch` : Étire le contenu
+
+```html
+<div class="grid grid-justify-content-center">
+  <div class="grid-col-4">Contenu centré</div>
+</div>
+```
+
+## Alignement des items individuels
+
+### Alignement vertical d'un item (align-self)
+
+- `.grid-self-top` : Aligne cet item en haut
+- `.grid-self-middle` : Centre cet item verticalement
+- `.grid-self-bottom` : Aligne cet item en bas
+- `.grid-self-stretch` : Étire cet item
+
+```html
+<div class="grid">
+  <div class="grid-col-4 grid-self-bottom">
+    Cet item est aligné en bas
+  </div>
+  <div class="grid-col-4 grid-self-middle">
+    Cet item est centré
+  </div>
+</div>
+```
+
+### Justification horizontale d'un item (justify-self)
+
+- `.grid-self-justify-start` : Aligne cet item à gauche
+- `.grid-self-justify-center` : Centre cet item horizontalement
+- `.grid-self-justify-end` : Aligne cet item à droite
+- `.grid-self-justify-stretch` : Étire cet item
+
+```html
+<div class="grid">
+  <div class="grid-col-4 grid-self-justify-end">
+    Cet item est aligné à droite
+  </div>
+</div>
+```
+
+### Alignement et justification combinés (place-self)
+
+- `.grid-self-place-start` : Haut/Gauche
+- `.grid-self-place-center` : Centre
+- `.grid-self-place-end` : Bas/Droite
+- `.grid-self-place-stretch` : Étire
+
+```html
+<div class="grid">
+  <div class="grid-col-4 grid-self-place-center">
+    Item centré individuellement
+  </div>
+</div>
+```
+
+## Exemples complets
+
+### Layout classique 3 colonnes
+
+```html
+<div class="grid grid-gap-medium">
+  <div class="grid-col-12 grid-col-md-4">
+    <h2>Colonne 1</h2>
+    <p>Contenu de la première colonne</p>
+  </div>
+  <div class="grid-col-12 grid-col-md-4">
+    <h2>Colonne 2</h2>
+    <p>Contenu de la deuxième colonne</p>
+  </div>
+  <div class="grid-col-12 grid-col-md-4">
+    <h2>Colonne 3</h2>
+    <p>Contenu de la troisième colonne</p>
+  </div>
+</div>
+```
+
+### Layout avec sidebar
+
+```html
+<div class="grid grid-gap-large">
+  <!-- Sidebar -->
+  <aside class="grid-col-12 grid-col-md-3">
+    <nav>Menu de navigation</nav>
+  </aside>
+  
+  <!-- Contenu principal -->
+  <main class="grid-col-12 grid-col-md-9">
+    <article>
+      <h1>Titre de l'article</h1>
+      <p>Contenu principal...</p>
+    </article>
+  </main>
+</div>
+```
+
+### Grille de cartes responsive
+
+```html
+<div class="grid grid-cols-1 grid-cols-sm-2 grid-cols-md-3 grid-cols-lg-4 grid-gap-medium">
+  <div class="card">Carte 1</div>
+  <div class="card">Carte 2</div>
+  <div class="card">Carte 3</div>
+  <div class="card">Carte 4</div>
+  <div class="card">Carte 5</div>
+  <div class="card">Carte 6</div>
+</div>
+```
+
+### Centrer un contenu
+
+```html
+<div class="grid grid-items-middle grid-justify-center" style="min-height: 100vh;">
+  <div class="grid-col-12 grid-col-md-8 grid-col-lg-6">
+    <h1>Contenu centré</h1>
+    <p>Ce contenu est centré verticalement et horizontalement</p>
+  </div>
+</div>
+```
+
+## Breakpoints
+
+Les breakpoints utilisés sont :
+
+- **xs** : 320px (Mobile Small)
+- **sm** : 576px (Mobile)
+- **md** : 768px (Tablet)
+- **lg** : 1024px (Desktop)
+- **xl** : 1248px (Desktop Extra Large)
+
+## Variables personnalisables
+
+Vous pouvez personnaliser la grille en surchargeant les variables dans votre fichier `variables.scss` :
+
+```scss
+// Nombre de colonnes (défaut: 12)
+$NAPPR_GRID_COLUMNS: 12 !default;
+
+// Gouttières
+$NAPPR_GRID_GAP_DEFAULT: 12px !default;
+$NAPPR_GRID_GAP_SMALL: 6px !default;
+$NAPPR_GRID_GAP_MEDIUM: 12px !default;
+$NAPPR_GRID_GAP_LARGE: 24px !default;
+$NAPPR_GRID_GAP_XLARGE: 48px !default;
+```

package/docs/pages/helpers.md

@@ -1,12 +1,12 @@
 ## Font Size
 
-> Les tailles des fonts sont à définir par la variable sass `$FontSizes`
+> Les tailles des fonts sont à définir par la variable sass `$NAPPR_FONT_SIZES_MAP`
 
-```css
-$FontSizes: (6, 8, 9, 12, 26, 24);
+```scss
+$NAPPR_FONT_SIZES_MAP: (6, 8, 9, 12, 24, 26) !default;
 ```
 
-**Example en utilisant classe `.fs24`**
+**Exemple en utilisant la classe `.fs24`**
 
 ```html
 <span class="fs24">Font size: 24px</span>
@@ -14,10 +14,10 @@ $FontSizes: (6, 8, 9, 12, 26, 24);
 
 ## Margin / Padding
 
-> Les tailles des margin/padding sont à définir par la variable sass `$MarginPaddingSizes`
+> Les tailles des margin/padding sont à définir par la variable sass `$NAPPR_SPACINGS_MAP`
 
-```css
-$MarginPadding: (6, 8, 9, 12, 26, 24);
+```scss
+$NAPPR_SPACINGS_MAP: (3, 6, 9, 12, 18, 24, 48) !default;
 ```
 
 > Il est alors possible d'ajouter du margin/padding sur :
@@ -26,7 +26,7 @@ $MarginPadding: (6, 8, 9, 12, 26, 24);
 > - les 2 axes `.my(n) .mx(n)`
 > - les 4 directions `.mt(n), .mr(n), .mb(n), .ml(n)`
 
-**L'example ci-dessous ajoute un padding de 24px sur la position top d'un bloc**
+**L'exemple ci-dessous ajoute un padding de 24px sur la position top d'un bloc**
 
 ```html
 <div class="pt24">padding-top: 24px;</div>
@@ -34,12 +34,12 @@ $MarginPadding: (6, 8, 9, 12, 26, 24);
 
 ## Borders
 
-> Le type de bordure est à définir par la variable `$BorderStyle`
-> Les tailles des bordures sont à définir par la variable sass `$BorderSizes`
+> Le type de bordure est à définir par la variable `$NAPPR_BORDER_STYLE`
+> Les tailles des bordures sont à définir par la variable sass `$NAPPR_BORDER_SIZE_MAP`
 
-```css
-$BorderStyle: solid;
-$BorderSizes: (1, 2, 3);
+```scss
+$NAPPR_BORDER_STYLE: solid !default;
+$NAPPR_BORDER_SIZE_MAP: (1, 2, 3) !default;
 ```
 
 > Il est alors possible d'ajouter des bordures sur :
@@ -48,7 +48,7 @@ $BorderSizes: (1, 2, 3);
 > - les 2 axes `.bx(n) .by(n)`
 > - les 4 directions `.bt(n), .br(n), .bb(n), .bl(n)`
 
-**L'example ci-dessous ajoute une bordure de 2px sur les positions top et bottom d'un bloc**
+**L'exemple ci-dessous ajoute une bordure de 2px sur les positions top et bottom d'un bloc**
 
 ```html
 <div class="by2" style="border-color: #CCCCCCCC;">
@@ -58,10 +58,10 @@ $BorderSizes: (1, 2, 3);
 
 ## Border Radius
 
-> Les arrondis de bordures sont à définir par la variable sass `$BorderRadiusSizes`.
+> Les arrondis de bordures sont à définir par la variable sass `$NAPPR_BORDER_RADIUS_MAP`.
 
-```css
-$BorderRadiusSizes: (2, 3, 4, 8, 10, 12);
+```scss
+$NAPPR_BORDER_RADIUS_MAP: (2, 3, 4, 8, 10, 12) !default;
 ```
 
 > Il est alors possible d'ajouter des angles arrondis à un bloc sur :
@@ -69,10 +69,22 @@ $BorderRadiusSizes: (2, 3, 4, 8, 10, 12);
 > - la totalité d'un bloc `.brad(n)`
 > - les 4 directions `.bradt(n), .bradr(n), .bradb(n), .bradl(n)`
 
-**L'example ci-dessous ajoute un angle arrondi de 2px sur le haut d'un bloc**
+**L'exemple ci-dessous ajoute un angle arrondi de 2px sur le haut d'un bloc**
 
 ```html
 <div class="bradt2" style="border-color: #CCCCCC;">
   <span>Lorem ipsum</span>
 </div>
 ```
+
+## Deprecated
+
+> ⚠️ **Version 1.0.0** : Les variables suivantes ont été renommées.
+
+| Ancienne variable | Nouvelle variable |
+|-------------------|-------------------|
+| `$FontSizes` | `$NAPPR_FONT_SIZES_MAP` |
+| `$MarginPaddingSizes` | `$NAPPR_SPACINGS_MAP` |
+| `$BorderStyle` | `$NAPPR_BORDER_STYLE` |
+| `$BorderSizes` | `$NAPPR_BORDER_SIZE_MAP` |
+| `$BorderRadiusSizes` | `$NAPPR_BORDER_RADIUS_MAP` |

package/docs/pages/quick-start.md

@@ -1,26 +1,112 @@
-# Napper Styles (SASS/CSS)
+# Quick Start
 
-> A collection of CSS/SCSS helpers
+> Guide de démarrage rapide pour utiliser @nappr/nappr-styles
 
 ## Installation
 
 ```bash
-git clone git@github.com:sixertoy/napper-styles.git
+yarn add https://github.com/sixertoy/nappr-styles.git#latest
 ```
 
-## Variables
+## Configuration
 
-```sass
-$body-width: 100% !default;
-$body-font-size: 16px !default;
-$default-padding: 12px !default;
+Créez un fichier `variables.scss` pour personnaliser les variables :
 
-$BorderStyle: solid;
-$BorderSizes: () !default;
-$BorderRadiusSizes: () !default;
+```scss
+// Configuration principale
+$NAPPR_BODY_FONT_SIZE: 16px !default;
+$NAPPR_BODY_WIDTH: 100vw !default;
+$NAPPR_DEFAULT_SPACING: 12px !default;
 
-$FontSizes: () !default;
+// Tailles de police
+$NAPPR_FONT_SIZES_MAP: (11, 12, 14, 16) !default;
 
-$default-padding: 12px !default;
-$MarginPaddingSizes: (3, 6, 9, 12, 18, 24, 48) !default;
+// Espacements
+$NAPPR_SPACINGS_MAP: (3, 6, 9, 12, 18, 24, 48) !default;
+
+// Dimensions
+$NAPPR_DIMENSIONS_MAP: (25, 50, 75, 100) !default;
+
+// Bordures
+$NAPPR_BORDER_STYLE: solid !default;
+$NAPPR_BORDER_SIZE_MAP: (1, 2, 3) !default;
+$NAPPR_BORDER_RADIUS_MAP: (4, 8, 12) !default;
+```
+
+## Utilisation
+
+Importez les styles dans votre fichier principal :
+
+```scss
+@use './variables.scss' as *;
+@use '@nappr/nappr-styles/styles.scss' as *;
+```
+
+## Exemple complet
+
+```scss
+// variables.scss
+$NAPPR_BODY_FONT_SIZE: 16px !default;
+$NAPPR_FONT_SIZES_MAP: (12, 14, 16, 24) !default;
+$NAPPR_SPACINGS_MAP: (6, 12, 18, 24) !default;
+
+// main.scss
+@use './variables.scss' as *;
+@use '@nappr/nappr-styles/styles.scss' as *;
+
+.my-component {
+  @extend .fs16;
+  @extend .m12;
+  @extend .p6;
+}
 ```
+
+## Deprecated
+
+> ⚠️ **Version 1.0.0** : Les éléments suivants ont été supprimés.
+
+### Variables deprecated
+
+| Ancienne variable | Nouvelle variable |
+|-------------------|-------------------|
+| `$body-width` | `$NAPPR_BODY_WIDTH` |
+| `$body-font-size` | `$NAPPR_BODY_FONT_SIZE` |
+| `$default-spacing` | `$NAPPR_DEFAULT_SPACING` |
+| `$font-sizes-map` | `$NAPPR_FONT_SIZES_MAP` |
+| `$spacings-map` | `$NAPPR_SPACINGS_MAP` |
+| `$border-style` | `$NAPPR_BORDER_STYLE` |
+| `$border-size-map` | `$NAPPR_BORDER_SIZE_MAP` |
+| `$border-radius-map` | `$NAPPR_BORDER_RADIUS_MAP` |
+
+### Syntaxe deprecated
+
+```scss
+// ❌ Ancienne syntaxe (deprecated)
+@import './_variables.scss';
+@import '~@nappr/nappr-styles/styles.scss';
+
+// ✅ Nouvelle syntaxe
+@use './variables.scss' as *;
+@use '@nappr/nappr-styles/styles.scss' as *;
+```
+
+### Grille deprecated
+
+Les anciennes classes `.columns` et `.rows` (basées sur flexbox) ont été supprimées. Utilisez le nouveau système de grille CSS Grid :
+
+```scss
+// ❌ Deprecated
+.columns .col-50 { ... }
+
+// ✅ Nouvelle syntaxe
+.nappr-grid .nappr-grid-col-6 { ... }
+```
+
+## Migration
+
+Pour migrer votre code vers la version 1.0.0+ :
+
+1. **Remplacez toutes les variables** : Utilisez les variables en MAJUSCULES préfixées avec `NAPPR_`
+2. **Remplacez `@import` par `@use`** : Utilisez la syntaxe moderne des modules Sass
+3. **Configuration rem** : Si vous utilisiez `$rem-baseline`, `$rem-fallback` ou `$rem-px-only`, configurez directement `sass-rem` dans votre projet
+4. **Migrez vers la nouvelle grille** : Remplacez `.columns`/`.rows` par `.nappr-grid` et `.nappr-grid-col-*`