/* =====================================================
   CONSEIL SNDGK — Vitrine des trois outils (accueil, //02)

   Une bande continue découpée en trois lames diagonales, chacune portant le
   fond animé de son produit (radar / constellation / découpe) et menant à sa page.

   Fichier AUTONOME : ne modifie ni premium.css ni premium-themes.css.
   Dépend de fond-anime.css et fond-anime.js, à charger avant.

   CONSTRUCTION — le point important. Les trois lames ne sont pas juxtaposées :
   elles occupent TOUTES la bande entière et sont découpées par clip-path sur
   des coordonnées PARTAGÉES. Le bord droit de la lame 1 est exactement le bord
   gauche de la lame 2 : la jointure est exacte par définition.
   Juxtaposer trois parallélogrammes avec gap:0 aurait laissé des fentes
   triangulaires, chaque découpe retirant un coin que le voisin ne comble pas.

   Le clip-path plutôt qu'un transform:skew : un skew déformerait les canvas
   (les cercles du radar deviendraient des ellipses).

   GÉOMÉTRIE — bords extérieurs verticaux, coupes intérieures en biais de 12 % :
     lame 1   haut 0 → 36 %      bas 0 → 24 %
     lame 2   haut 36 → 70 %     bas 24 → 58 %
     lame 3   haut 70 → 100 %    bas 58 → 100 %
===================================================== */

/* Le ratio de colonnes ne vaut qu'au-dessus de 820 px. En dessous, la règle
   .split de premium.css replie en une colonne. Un style EN LIGNE aurait
   empêché ce repli : les styles en ligne battent les media queries. */
/* Seuil a 1000 px et non 820 : sous 1000 px les lames tombent a ~136 px et
   le texte n'a plus que 12 px avant le biais. Le mode diagonal ne vaut que
   la ou les lames sont assez larges pour le porter. */
@media (min-width: 1001px) {
  /* HAUTEUR PLEINE — la bande touche les deux bords de la section.
     La section abandonne son rembourrage vertical ; c'est la colonne de
     TEXTE qui le reprend. La rangee de grille prend donc la hauteur du texte
     + son rembourrage, et la bande, en stretch, s'y etire d'un bord a l'autre.
     Specificite : section.vitrine-section egale celle de section.block dans
     premium.css — c'est l'ordre de chargement qui tranche, pas la specificite. */
  section.vitrine-section { padding-top: 0; padding-bottom: 0; }
  /* HAUTEUR de la bande — c'est ce rembourrage qui la pilote, la bande
     s'etirant sur la rangee. Plus serre que --section-y (le rythme normal
     des sections) pour que le bloc reste ramasse. */
  .vitrine-texte { padding: clamp(3rem, 6vh, 5rem) 0; }

  .vitrine-split {
    /* LARGEUR — ratio texte / bande. Le seul réglage à toucher. */
    grid-template-columns: 0.65fr 1.35fr;
    /* HAUTEUR — stretch (et non center) : la bande prend la hauteur de la
       colonne de texte, donc les deux moitiés s'alignent haut et bas. */
    align-items: stretch;
  }

  .vitrine {
    position: relative;
    height: 100%;
    min-height: 290px;
  }

  .vitrine-item {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    background: var(--bg-3);
    color: var(--fg);
    transition: filter 0.45s var(--ease);
  }

  /* TROIS VRAIS PARALLELOGRAMMES : les bords exterieurs penchent comme les
     coupes interieures. Le decalage est le meme partout (12 %), donc les trois
     lames sont identiques a une translation pres. Les coins laisses libres en
     haut a gauche et en bas a droite laissent voir le fond de section : c'est
     ce vide qui fait lire les formes comme des parallelogrammes plutot que
     comme une bande decoupee. */
  .vitrine-item:nth-child(1) { clip-path: polygon(12% 0,   41.3% 0, 29.3% 100%, 0 100%); }
  .vitrine-item:nth-child(2) { clip-path: polygon(41.3% 0, 70.7% 0, 58.7% 100%, 29.3% 100%); }
  .vitrine-item:nth-child(3) { clip-path: polygon(70.7% 0, 100% 0,  88% 100%,   58.7% 100%); }

  /* Les lames étant jointives, un fond alterné les distingue sans filet —
     un filet suivrait mal la coupe en biais. */
  .vitrine-item:nth-child(2) { background: var(--bg-2); }

  .vitrine-item:hover { filter: brightness(0.97); }

  /* Le contenu se place dans la partie basse de SA lame, en tenant compte du
     décalage de la coupe au bas de la bande. */
  .vitrine-body {
    position: absolute;
    /* En POURCENTAGE et non en rem : la hauteur de la bande suit celle de la
       colonne de texte, qui varie avec la fenetre. Un retrait fixe en pixels
       ferait glisser le texte le long du bord incline a chaque changement de
       hauteur, et les marges calculees plus bas ne tiendraient plus. */
    bottom: 12.5%;
    z-index: 1;
  }
  /* Les marges gauches tiennent compte de la coupe en biais : le bord penche
     vers la droite en montant, et le nom est la ligne la plus haute des trois.
     Un calage sur le bord BAS laisserait le nom a 5 px de la diagonale. */
  /* Les trois blocs de texte sont desormais identiques en largeur, les lames
     l'etant aussi. Cales sur la hauteur du NOM (la ligne la plus haute), la
     ou la coupe en biais mord le plus. */
  /* Remonter le texte le RAPPROCHE du bord gauche : la coupe penche vers la
     droite en montant (85,9 px de decalage sur 620 px de hauteur, mesure a
     1280 px). Chaque decalage gagne donc ~1,2 point de pourcentage pour
     conserver les ~24 px de marge qu'on avait au bas de la bande. */
  .vitrine-item:nth-child(1) .vitrine-body { left: 6.2%;  width: 22%; }
  .vitrine-item:nth-child(2) .vitrine-body { left: 35.6%; width: 22%; }
  .vitrine-item:nth-child(3) .vitrine-body { left: 65.1%; width: 22%; }
}

/* ---------- Contenu d'une lame (commun aux deux dispositions) ---------- */

.vitrine-nom {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.2;
}

.vitrine-quoi {
  display: block;
  margin-top: 0.3rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.35;
}

.vitrine-aller {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.8rem;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--red);
}
.vitrine-aller .ar { transition: transform 0.35s var(--ease); }
.vitrine-item:hover .vitrine-aller .ar { transform: translateX(5px); }

.vitrine-item:focus-visible { outline: 2px solid var(--red); outline-offset: -3px; }

/* ---------- Sous 821 px : trois bandes empilées, jointives ----------
   Trois lames de ~110 px de large ne laisseraient de place ni au nom ni au
   lien. Les bandes restent collées (aucun gap) ; la diagonale, elle, est un
   geste de la version large — sur une bande courte elle ne se lirait plus. */
@media (max-width: 1000px) {
  /* .split de premium.css ne se replie qu'a 820 px : entre 821 et 1000 il
     resterait sur deux colonnes et tasserait les bandes empilees dans une
     demi-largeur. On force la colonne unique sur toute la plage. */
  .vitrine-split { grid-template-columns: 1fr; }
  .vitrine { display: grid; grid-template-columns: 1fr; gap: 0; }
  .vitrine-item {
    position: relative;
    display: block;
    min-height: 124px;
    padding: 1.1rem 1.3rem;
    overflow: hidden;
    background: var(--bg-3);
    color: var(--fg);
    border-bottom: 1px solid var(--line);
  }
  .vitrine-item:nth-child(2) { background: var(--bg-2); }
  .vitrine-item:last-child { border-bottom: none; }
  .vitrine-body { position: relative; z-index: 1; }
}

/* ---------- Fond de la bande ----------
   Les lames 1 et 3 sont en var(--bg-3) et n'ont AUCUNE bordure : sur un fond
   blanc elles disparaitraient, et il ne resterait que celle du milieu. La
   bande doit donc rester creme quoi qu'il arrive.

   Or elle ne peut pas s'en remettre a l'alternance de rythme.css. La section
   « manifesto » qui la precede est EPINGLEE par ScrollTrigger, qui l'enveloppe
   au chargement dans un div.pin-spacer : elle cesse alors d'etre soeur des
   autres sections, et tout le comptage :nth-of-type se decale d'un cran une
   fois le script execute. La parite de la vitrine depend donc de l'execution
   de GSAP — c'est-a-dire de rien de fiable.

   D'ou une regle explicite, qui ne depend ni de la parite ni du script.
   Specificite (0,3,3) contre (0,3,2) pour rythme.css : elle gagne sans
   dependre non plus de l'ordre de chargement. */
html[data-theme="light"] body section.block.vitrine-section {
  background: var(--bg);
}