/* ==========================================================================
   GRILLE 12 — le socle géométrique de tout le site (CADRAGE §4.1)

   Une seule règle : 12 colonnes, une colonne = une unité carrée.
   Les modules valent 4, 2 ou 1 colonne — et sont CARRÉS par construction
   (aspect-ratio 1), donc leur hauteur découle de leur largeur.
   ========================================================================== */

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: var(--grid-gap);
}

/* ==========================================================================
   LANDING — deux colonnes alignées sur l'AXE CENTRAL ABSOLU.

   Les deux colonnes se touchent au milieu de l'écran : le bord droit des
   boîtes de gauche et le bord gauche de celles de droite tombent sur le
   même axe. Le logo est posé PAR-DESSUS cette jonction.

   Les bords EXTÉRIEURS sont irréguliers — c'est de là que vient le rythme
   (CADRAGE §4.1).

   L'unité est le carré de grille : --u. Une boîte de n carrés fait n×--u
   de côté.
   ========================================================================== */

.work {
  --u: calc((100vw - 2 * var(--page-pad) - 11 * var(--grid-gap)) / 12);

  display: grid;
  grid-template-columns: 1fr 1fr;   /* les deux moitiés se rejoignent au centre */
  align-items: start;
  height: 100%;
}

.work__col {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap);
  will-change: transform;
}

/* Gauche : plaqué à droite → contre l'axe. Droite : plaqué à gauche → idem. */
.work__col--left  { grid-column: 1; align-items: flex-end; }
.work__col--right { grid-column: 2; align-items: flex-start; }

/* — Modules — carrés, exprimés en unités de grille —————————————————————— */

.mod-1 { width: calc(1 * var(--u)); }
.mod-2 { width: calc(2 * var(--u) + 1 * var(--grid-gap)); }
.mod-3 { width: calc(3 * var(--u) + 2 * var(--grid-gap)); }
.mod-4 { width: calc(4 * var(--u) + 3 * var(--grid-gap)); }

.mod-1, .mod-2, .mod-3, .mod-4 { aspect-ratio: 1; flex: none; }

/* — Portées de colonnes — pour les blocs de texte des fiches ————————————— */

.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; }

/* — Départs explicites — pour poser un bloc à une colonne précise ————————— */

.start-2  { grid-column-start: 2; }
.start-3  { grid-column-start: 3; }
.start-4  { grid-column-start: 4; }
.start-5  { grid-column-start: 5; }
.start-6  { grid-column-start: 6; }
.start-7  { grid-column-start: 7; }
.start-8  { grid-column-start: 8; }
.start-9  { grid-column-start: 9; }
.start-10 { grid-column-start: 10; }

/* ==========================================================================
   RESPONSIVE — la grille se replie, elle ne se casse pas.
   Non négociable (CADRAGE §7.2) : pensé dès la conception, pas après.
   ========================================================================== */

/* Tablette — les deux colonnes se resserrent, l'axe central se réduit.     */
@media (max-width: 900px) {
  :root { --grid-cols: 8; }

  .work {
    --u: calc((100vw - 2 * var(--page-pad) - 7 * var(--grid-gap)) / 8);
  }

  .col-1, .col-2, .col-3    { grid-column: span 3; }
  .col-4, .col-5, .col-6    { grid-column: span 4; }
  .col-7, .col-8, .col-9,
  .col-10, .col-11, .col-12 { grid-column: span 8; }

  [class*="start-"] { grid-column-start: auto; }
}

/* ==========================================================================
   MOBILE — UNE SEULE COLONNE, items centrés, boucle infinie conservée.

   ⚠️ Ce n'est pas le repli de la grille à deux colonnes : c'est une AUTRE
   composition. Le §4.1 fait reposer la landing sur l'axe central absolu et
   le contre-sens — deux colonnes qui se croisent. À 400px de large, l'axe
   n'a plus de place et le croisement n'a plus rien à croiser.

   Ce qui SURVIT, et c'est ce qui compte : les quatre modules (donc le rythme
   des tailles, donc le chemin de fer), et le scroll infini (donc « ni début
   ni fin »). Ce qui tombe : l'axe et le contre-sens, qui supposaient deux
   colonnes pour exister.

   ⚠️ La colonne unique est construite PAR LE JS (`renderGrid`), pas ici.
   Empiler les deux colonnes existantes en CSS afficherait tous les projets
   pairs, puis tous les impairs — l'ordre du chemin de fer serait perdu.

   ⚠️ LES 600px SONT ÉCRITS DEUX FOIS — ici et dans `grid.js` (`MOBILE`).
   Le CSS ne peut pas construire le DOM, le JS ne peut pas porter une media
   query : le doublon est structurel, il ne s'élimine pas. **Les désaccorder
   ne casserait rien visiblement** — on centrerait une colonne construite en
   deux, ou l'inverse. Une landing simplement fausse, sans erreur nulle part.
   Changer ce nombre ici oblige à le changer là-bas.
   ========================================================================== */

@media (max-width: 600px) {
  :root { --grid-cols: 2; }

  .work {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  /* Une seule colonne, ses items centrés : les deux bords sont irréguliers
     et symétriques. Le `will-change: transform` de la règle de base reste —
     c'est toujours elle que la boucle déplace.                             */
  .work__col {
    width: 100%;
    align-items: center;
  }

  /* — Modules — l'échelle est RECOMPOSÉE, pas transposée ————————————————

     Sur 12 colonnes, un module 1 vaut 1/12 de l'écran. Transposé tel quel
     ici, il ferait ~30px : illisible. Les quatre s'étalent donc par pas de
     20 %, de 20 à 80 — le rythme des tailles survit, et l'écart entre deux
     modules voisins est constant au lieu de se resserrer vers le haut.

     ⚠️ Aucun ne va jusqu'à 100 % : les items sont CENTRÉS, et un module
     pleine largeur toucherait les deux bords. Le blanc qui reste de chaque
     côté est ce qui fait lire la colonne comme une composition plutôt que
     comme une pile.

     ⚠️ Ils restent CARRÉS : `aspect-ratio: 1` est posé sur la règle de base
     et n'est pas redéclaré ici. C'est l'invariant du §4.1 — largeur =
     hauteur, à toutes les tailles d'écran. Un module 4 fait donc 80 % de
     l'écran de côté : sur 375px, ~300px de haut.                          */
  .mod-1 { width: 20%; }
  .mod-2 { width: 40%; }
  .mod-3 { width: 60%; }
  .mod-4 { width: 80%; }

  [class^="col-"] { grid-column: span 2; }
}