/* ============================================================
   GABARIT « PLANCHE 3 COLONNES » — d'après les maquettes d'Ali
   Utilisé par : gestion-production.html, typologie-industrielle.html
   ------------------------------------------------------------
   GÉOMÉTRIE RELEVÉE AU PIXEL sur la maquette (1310×769) :
     • ENTRE LES COLONNES : bordure 4px │ 8px de BLANC │ bordure 4px
       → c'est la « double bordure » demandée par le client.
     • ENTRE LES RANGÉES : aucun blanc, les bordures se touchent
       → un seul trait noir de 8px (2 × 4px).
     • largeurs : côté 289px · centre 364px · gouttière 8px
   NE PAS fusionner les bordures par marges négatives : c'est
   précisément ce qui faisait disparaître la double bordure.
   ============================================================ */
.slide3 {
  --col-side: 290px; --col-mid: 364px; --col-gut: 8px; --sl-line: 4px;
  display: grid;
  grid-template-columns: var(--col-side) var(--col-mid) var(--col-side);
  grid-template-areas:
    ".  head ."
    "l1 c1   r1"
    "l2 c2   r2"
    "l3 c3   r3"
    "l4 c4   r4"
    ".  sq   .";
  align-items: stretch;
  row-gap: 0; column-gap: var(--col-gut);
  padding: 14px 28px 20px; background: var(--mondrian-cream);
  width: calc(var(--col-side) * 2 + var(--col-gut) * 2 + var(--col-mid) + 56px);
  margin: 0 auto;
  font-family: Verdana, Geneva, sans-serif;
}
.sl-head{grid-area:head} .sl-sq{grid-area:sq}
.sl-l1{grid-area:l1} .sl-c1{grid-area:c1} .sl-r1{grid-area:r1}
.sl-l2{grid-area:l2} .sl-c2{grid-area:c2} .sl-r2{grid-area:r2}
.sl-l3{grid-area:l3} .sl-c3{grid-area:c3} .sl-r3{grid-area:r3}
.sl-l4{grid-area:l4} .sl-c4{grid-area:c4} .sl-r4{grid-area:r4}

.slide3 .sl-title, .slide3 .sl-side, .slide3 .sl-mid, .slide3 .sl-squalp {
  border: var(--sl-line) solid var(--mondrian-black); box-sizing: border-box; background: #fff;
}

/* ===== BANDEAU TITRE + BANDEAU SQUALP =====
   RELEVÉ AU PIXEL sur « Slide Typologie Industrielle.jpg » (1310×769), 2026-08-19.
   Le couloir vertical a la MÊME séquence sur toute la hauteur de la planche :
       noir 4  │  8 px  │  noir 4        (relevé x = 456-459 · 460-467 · 468-471)
   et le 8 px du milieu est ROUGE à la rangée du titre, BLANC aux 4 rangées,
   BLEU à la rangée SQUALP. Le filet noir extérieur (x 456-459) est CONTINU de
   y=58 (haut du titre) à y=725 (bas de SQUALP), sans interruption.
   → Les boîtes titre et SQUALP font donc 388px (456→843), pas 364 : elles vont
     d'un bord EXTÉRIEUR de couloir à l'autre, et les barres colorées + les filets
     intérieurs sont DEDANS. C'est ce modèle qui produit tout le reste :
       • la bordure propre de la boîte tombe sur x 456-459 → elle EST le filet
         extérieur continu (celui qui manquait à ces deux rangées) ;
       • la barre colorée ne fait que 8px (la gouttière), pas 16 ;
       • le filet intérieur (x 468-471) est porté par la barre (border-right /
         border-left) et se cale sur les bordures de la colonne centrale ;
       • la barre s'arrête à l'INTÉRIEUR de la boîte (84px, y 62-145) : les 4px du
         filet haut restent noirs en travers du couloir.
   ⚠️ Les marges négatives de ±12px (= gouttière + filet) sont ce qui élargit la
   boîte de 364 à 388 : elles débordent dans les cellules VIDES de la grille
   (« . head . » / « . sq . »), donc rien ne bouge autour. */
.slide3 .sl-title, .slide3 .sl-squalp {
  position: relative; min-height: 92px;
  margin-left:  calc((var(--col-gut) + var(--sl-line)) * -1);
  margin-right: calc((var(--col-gut) + var(--sl-line)) * -1);
}
.slide3 .sl-title { display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--mondrian-blue); font-weight: 900; font-size: 1.35rem; }
.slide3 .sl-title::before, .slide3 .sl-title::after,
.slide3 .sl-squalp::before, .slide3 .sl-squalp::after {
  content: ''; position: absolute;
  top: 0; bottom: 0;                       /* boîte de PADDING = l'intérieur, hors bordures */
  width: var(--col-gut);                   /* 8px de couleur : la gouttière, rien de plus */
}
.slide3 .sl-title::before, .slide3 .sl-title::after { background: var(--mondrian-red); }
.slide3 .sl-squalp::before, .slide3 .sl-squalp::after { background: var(--mondrian-blue); }
.slide3 .sl-title::before, .slide3 .sl-squalp::before {
  left: 0;  border-right: var(--sl-line) solid var(--mondrian-black);
}
.slide3 .sl-title::after,  .slide3 .sl-squalp::after {
  right: 0; border-left:  var(--sl-line) solid var(--mondrian-black);
}
.slide3 .sl-squalp { display: flex; align-items: center; justify-content: center; }
.slide3 .sl-squalp img { height: 57px; width: auto; display: block; }

/* --- LE BLOC DES RANGÉES EST POSÉ SUR UN FOND NOIR (corrigé 2026-08-19) ---
   POURQUOI. La géométrie était juste — jointure MESURÉE à 0,0000px entre deux
   rangées — et pourtant un LISERÉ CLAIR traversait les traits noirs. Cause
   mesurée : fit.js met la planche à l'échelle 0,734 ; une bordure de 4px devient
   2,937px CSS = 5,874px écran (dpr 2), et la jointure tombe sur un pixel écran
   FRACTIONNAIRE (relevé : y = 696,906). Les deux bordures voisines sont
   rastérisées séparément : chacune ne couvre qu'une fraction du pixel partagé et
   leurs opacités se composent sur le CRÈME → ce pixel ressort plus clair. Aucun
   réglage de géométrie ne peut y remédier, c'est du rendu sous-pixel.
   SOLUTION. On peint un fond NOIR sous tout le bloc des rangées : les jointures
   composent alors sur du noir, le liseré ne peut plus apparaître. Les intérieurs
   des boîtes sont opaques, il ne reste donc à peindre que les FENTES BLANCHES de
   la gouttière — ce qui colle en plus à la maquette (gouttière blanche, fermée en
   haut et en bas par un trait noir : relevé y=146-153, 267-274, 388-395, 509-516,
   630-637). Les ponts noirs individuels ne sont plus nécessaires : ils étaient la
   même idée, à l'envers, et se recalaient mal au sous-pixel.
   Le fond déborde de 4px en haut et en bas : c'est lui qui donne au bord haut de
   la rangée 1 et au bord bas de la rangée 4 les 8px des autres traits horizontaux
   (il remplace les box-shadow posées plus tôt dans la journée). */
.slide3::before {
  content: ''; grid-column: 1 / -1; grid-row: 2 / 6;
  margin: calc(var(--sl-line) * -1) 0;
  background: var(--mondrian-black);
  position: relative; z-index: 0;
}
.slide3 .sl-title, .slide3 .sl-side,
.slide3 .sl-mid,   .slide3 .sl-squalp { position: relative; z-index: 1; }

/* fentes blanches de la gouttière : une par boîte latérale, exactement de la
   hauteur de son INTÉRIEUR (121 − 2×4 = 113px, comme la maquette). */
.slide3 .sl-side::before {
  content: ''; position: absolute; top: 0; bottom: 0;
  width: var(--col-gut); background: #fff;
}
/* ⚠️ le décalage vaut GOUTTIÈRE + BORDURE : `right`/`left` d'un enfant absolu se
   mesurent depuis la boîte de PADDING, donc l'épaisseur de bordure mangerait la
   moitié de la fente. */
.slide3 .sl-L::before { right: calc((var(--col-gut) + var(--sl-line)) * -1); }
.slide3 .sl-R::before { left:  calc((var(--col-gut) + var(--sl-line)) * -1); }

/* libellés latéraux */
.slide3 .sl-side {
  position: relative;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-weight: 900; font-size: 1.24rem; line-height: 1.16; color: #fff;
  padding: 12px 10px; min-height: 121px;
}
.slide3 .sl-red    { background: var(--mondrian-red); }
.slide3 .sl-blue   { background: var(--mondrian-blue); }
.slide3 .sl-yellow { background: var(--mondrian-yellow); color: var(--mondrian-black); }
.slide3 .sl-slate  { background: var(--mondrian-slate); color: var(--mondrian-black); }

/* cellule centrale : le crochet est un CADRE FIXE, il n'épouse pas le texte.
   Relevé sur les 2 maquettes (identique) : hauteur = 68 % de la rangée, centré
   verticalement ; largeur ≈ 69 % de la cellule. Le texte se centre dedans. */
.slide3 .sl-mid {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 12px 16px; min-height: 121px;
}
.slide3 .sl-mid::before, .slide3 .sl-mid::after {
  content: ''; position: absolute; top: 16%; bottom: 16%; width: 13px;
  border: 3px solid var(--mondrian-black);
}
.slide3 .sl-mid::before { left: 15.5%; border-right: none; }
.slide3 .sl-mid::after  { right: 15.5%; border-left: none; }
.slide3 .sl-t { font-weight: 900; font-size: 1.24rem; color: var(--mondrian-blue); line-height: 1.15; }
.slide3 .sl-c { font-weight: 900; font-size: 1.05rem; color: var(--mondrian-blue); line-height: 1.2; display: block; }

/* Mobile : la planche entière est mise à l'échelle par fit.js (data-fit-mobile) */
@media (max-width: 767px) {
  .slide3 { --col-side: 218px; --col-mid: 274px; }
}