responsive breakpoints framework

web/themes/custom/leshed/assets/scss/partials/abstracts/_breakpoints.scss

@@ -0,0 +1,69 @@
+//   ____  ____                              _
+//  | __ )|  _ \ __ _  __ _  ___ _ __  _   _| |__
+//  |  _ \| |_) / _` / _` |/ _ \ '__| | | | '_ \| | | |
+//  | |_) |  _ < (_| | (_| |  __/ |  | |_| | |_) | |_| |
+//  |____/|_| \_\__,_|\__, |\___|_|   \__,_|_.__/ \__, |
+//                     |___/                        |___/
+//
+// Aucun CSS émis. LA seule maison des seuils de largeur du thème.
+//
+// ─── Modèle ──────────────────────────────────────────────────────────────────
+// Thème desktop-first. Trois familles de variables :
+//
+//   1. Zones imbriquées vers le bas — « cette zone et tout ce qui est
+//      plus étroit » :
+//        @media #{$tablette}{ ... }   ≤ 1023 (contient mobile)
+//        @media #{$mobile}{ ... }     ≤ 767  (contient narrow)
+//        @media #{$narrow}{ ... }     ≤ 431
+//
+//   2. Le grand format — desktop + tablette ensemble (≥ 768) :
+//        @media #{$desktop-et-tablette}{ ... }
+//      C'est le complément EXACT de $mobile (aucune largeur ne matche les
+//      deux) : pour les composants écrits en deux blocs explicites
+//      (grand format / mobile).
+//
+//   3. Formats seuls — exactement une zone, ni plus ni moins :
+//        @media #{$seulement-desktop}{ ... }   ≥ 1024
+//        @media #{$seulement-tablette}{ ... }  768 – 1023
+//        @media #{$seulement-mobile}{ ... }    432 – 767
+//      (seulement-narrow ≡ $narrow : rien en dessous.)
+//
+// ─── Disciplines ────────────────────────────────────────────────────────────
+// 1. Jamais de nombre brut égal à un seuil : interpoler une variable de zone.
+// 2. Une valeur découverte pendant le pass responsive s'écrit brute avec un
+//    commentaire et se consolide ICI quand 2+ composants convergent dessus.
+// 3. Le JS consomme ces seuils par les variables CSS --bp-* (posées dans
+//    _base.scss) : plus jamais de littéral dans main.js. Le bug « à 768px
+//    pile » de la review venait d'un chevauchement CSS/JS — les zones sont
+//    exclusives par construction, le JS doit l'être aussi.
+// 4. Un futur leshed.breakpoints.yml (images responsives) doit reprendre
+//    exactement ces valeurs.
+
+@use "sass:map";
+
+$bp: (
+  // Ancre du layout (contenu + padding proportionnels) — référencée par _fluid.
+  layout: 1112px,
+  // Frontière tablette ↔ desktop : la zone desktop commence À 1024 (inclusive).
+  desktop: 1024px,
+  // Frontière mobile ↔ tablette : la zone mobile finit À 767 (inclusive).
+  // 767 et pas 768 : à 768 pile, l'ancien couple max-width:768/min-width:769
+  // laissait la requête mobile cohabiter avec le JS desktop — review #94.
+  mobile: 767px,
+  // Zone étroit (accueil) — découverte à re-valider au pass 1.
+  narrow: 431px,
+);
+
+// ─── Zones imbriquées vers le bas ────────────────────────────────────────────
+// Dérivées de $bp : changer un seuil recalcule tout (CSS, --bp-*, JS).
+$tablette: "(max-width: calc(#{map.get($bp, desktop)} - 1px))";
+$mobile:   "(max-width: #{map.get($bp, mobile)})";
+$narrow:   "(max-width: #{map.get($bp, narrow)})";
+
+// Le grand format : desktop + tablette — complément exact de $mobile.
+$desktop-et-tablette: "(min-width: calc(#{map.get($bp, mobile)} + 1px))";
+
+// ─── Formats seuls ───────────────────────────────────────────────────────────
+$seulement-desktop:  "(min-width: #{map.get($bp, desktop)})";
+$seulement-tablette: "(min-width: calc(#{map.get($bp, mobile)} + 1px)) and (max-width: calc(#{map.get($bp, desktop)} - 1px))";
+$seulement-mobile:   "(min-width: calc(#{map.get($bp, narrow)} + 1px)) and (max-width: #{map.get($bp, mobile)})";

web/themes/custom/leshed/assets/scss/partials/abstracts/_fluid.scss

@@ -15,7 +15,9 @@
 //   automatique si le plafond du layout ou son padding changent.
 
 @use "sass:math";
+@use "sass:map";
 @use "variables" as *;
+@use "breakpoints" as *;
 
 $root: 16px; // taille de police de <html>
 
@@ -31,11 +33,10 @@ $root: 16px; // taille de police de <html>
 }
 
 // Largeur d'ancrage des clamps : le viewport auquel le layout est plein —
-// 1080px de contenu + 2 × 16px de padding = 1112px.
-// Depuis que $layout_padding et $colsgap sont proportionnels (clamp vw),
-// le padding vaut exactement 16px à ce point (1.4388vw × 1112). Valeur
-// constante : px() ne sait pas parser un clamp() pour la dériver.
-$layout-anchor: 1112px;
+// 1080px de contenu + 2 × 16px de padding = 1112px. Vit dans $bp.layout
+// (_breakpoints.scss, la seule maison des largeurs) — alias local pour les
+// signatures de fonctions ci-dessous.
+$layout-anchor: map.get($bp, layout);
 
 // La valeur vw qui vaut exactement $size quand le viewport fait $at.
 @function vw-at($size, $at: $layout-anchor) {

web/themes/custom/leshed/assets/scss/partials/abstracts/_node-full.scss

@@ -6,6 +6,7 @@
 
 @use "variables" as *;
 @use "fluid" as *;
+@use "breakpoints" as *;
 @use "../abstracts/nodes-on-liste" as *;
 @use "../abstracts/event-calendrier" as *;
 
@@ -179,8 +180,8 @@
       }
     }
   }
-  // ONLY FOR DESKTOP
-  @media (min-width:769px){
+  // DESKTOP + TABLETTE (≥ 768) — complément exact de $mobile (cf. _breakpoints.scss).
+  @media #{$desktop-et-tablette}{
     div.cols{
       display: flex;
       flex-direction: row;
@@ -263,8 +264,9 @@
       }
     }
   }
-  // ONLY FOR MOBILE
-  @media (max-width:768px){
+
+  // MOBILE (≤ 767)
+  @media #{$mobile}{
     div.cols{
       display: flex;
       flex-direction: column;