/* =========================================================================
   SWISS PRO MOVING — rayon-Marque.css
   Les trois objets de marque que le socle nomme mais ne dessine pas encore :
   le VERROUILLAGE (logo + signature), la FRISE de rabats et le RUBAN adhésif.

   Ce fichier appartient au rayon « Marque ». Il ne modifie aucun fichier du
   socle. Les cartes du rayon le lient par une SECONDE balise link, après
   styles.css :

       <link rel="stylesheet" href="../../../styles.css">
       <link rel="stylesheet" href="../../../tokens/rayon-Marque.css">

   Trois règles de fabrication, les mêmes que le socle :
     1. aucune couleur en dur — tout est `var(--…)` ;
     2. aucune requête externe — le seul `url()` est relatif et pointe sur le
        masque du semis, qui existe déjà ;
     3. AUCUNE géométrie recopiée. La silhouette du rabat n'est écrite qu'à
        deux endroits dans tout le paquet, et aucun des deux n'est ici :
        `tokens.css` §4 pour la puce, la coupe et le pli ;
        `assets/motifs/semis-rabats.svg` pour le rabat du motif.
        La frise ci-dessous REPREND ce masque, elle ne le redessine pas.

   Aucune croix n'est dessinée ici, ni ailleurs dans ce fichier : la seule
   croix du paquet est celle des fichiers de `assets/logo/`.
   ========================================================================= */

/* ============================================ 0. UN JETON, ET UN SEUL ====

   Le kraft est une couleur d'OBJET (README §4) : le carton, la notice, le
   ruban. Le socle n'en donne que les primitives `--kraft-100` à `--kraft-700`,
   et la couche 3 n'a pas le droit de lire une primitive. On nomme donc ici le
   rôle qui manque, une fois, et les composants du rayon ne lisent que lui.
   Il ne bascule pas en mode sombre : un rouleau d'adhésif n'a pas de mode
   sombre, c'est un objet imprimé qu'on montre à l'écran.
   ------------------------------------------------------------------------- */

:root {
  --carton: var(--kraft-300);          /* le brun du carton et de l'adhésif */
}

/* ================================== 1. VERROUILLAGE ET SIGNATURE ========

   La signature vit SOUS le logo et ne change jamais.
   20.09.2026, décision de Jhonno : « Porter, nettoyer, rendre. » — en anglais
   « Carry, clean, hand back. » C'est la phrase que porte `.spm-signature`,
   et il n'y en a pas d'autre. « Tout autour de ce qui compte. » est la phrase
   INTERNE qui explique le logo : elle ne s'imprime nulle part.
   Jamais sur un support muet, jamais sans le logo ou le nom au-dessus d'elle
   (marque-idee.md, « Signature de marque » ; marque/slogan/_CHOIX.md).

   Typographie relevée : `--police-titre`, capitales, approche +0,04 em,
   jamais plus large que le mot-symbole au-dessus d'elle.
   ------------------------------------------------------------------------- */

.spm-verrou { display: inline-block; }

.spm-verrou img { display: block; }

.spm-signature {
  font-family: var(--police-titre);
  font-weight: var(--graisse-noire);
  font-size: var(--t-petit);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .04em;                /* relevé sur la planche, pas choisi */
  color: inherit;                       /* l’encre du logo au-dessus d’elle */
  margin: 0;
}

/* Une signature qui passe à la ligne n'est plus une signature : elle se
   réduit, elle ne se coupe pas. Si elle déborde du logo, le corps est trop
   grand — on le baisse, on ne recompose jamais le verrouillage. */
.spm-verrou .spm-signature {
  margin-top: var(--e8);
  white-space: nowrap;
}

/* La signature prend l'encre de son support, comme le logo au-dessus d'elle :
   noire sur clair, blanche sur rouge et sur sombre. Elle n'est JAMAIS rouge —
   le rouge n'écrit pas (README §4). C'est le bloc qui pose la couleur, et
   `.spm-bloc-marque` le fait déjà : rien à écrire de plus ici. */

/* =========================================== 2. LA FRISE DE RABATS ======

   Version écran de la frise d'adhésif : un bandeau de 8 px posé sur le bord
   supérieur ou inférieur d'un bloc de marque. Période 96 px, une paire de
   rabats par période (langage-graphique.md §3.3).

   La forme vient du masque du semis, qui contient exactement quatre rabats
   dans un carreau de 192 : à `mask-size: 96px`, chaque rabat mesure 12 × 8 px
   — la taille même de la puce — et la rangée haute du carreau tombe entre
   y = 18 px et y = 26 px. On décale donc le masque de 18 px vers le haut
   (96 × 3 ÷ 16) et on ne garde que ces 8 px de hauteur. Une paire, deux
   orientations, aucune cinquième, aucune croix.

   Elle ne s'anime pas, ne défile pas, n'apparaît pas au défilement.
   ------------------------------------------------------------------------- */

.spm-frise {
  display: block;
  height: var(--frise-hauteur);
  background-color: var(--marque);
  -webkit-mask-image: url("../assets/motifs/semis-rabats.svg");
          mask-image: url("../assets/motifs/semis-rabats.svg");
  -webkit-mask-size: var(--frise-periode) var(--frise-periode);
          mask-size: var(--frise-periode) var(--frise-periode);
  -webkit-mask-repeat: repeat-x;
          mask-repeat: repeat-x;
  -webkit-mask-position: 0 calc(var(--frise-periode) * -3 / 16);
          mask-position: 0 calc(var(--frise-periode) * -3 / 16);
}

/* En réserve : sur l'aplat rouge, sur le ruban, sur un fond sombre. */
.spm-frise--contre { background-color: var(--sur-marque); }

/* Dans le bloc de marque, la frise est blanche sans qu'on ait à le dire. */
.spm-bloc-marque .spm-frise { background-color: var(--sur-marque); }

/* ============================================= 3. LE RUBAN ADHÉSIF ======

   Le ruban de fermeture est le seul objet où les rabats se touchent, parce
   que c'est ce qu'un adhésif fait : il referme les rabats
   (langage-graphique.md §3.2).

   Une seule encre : blanc sur `--marque`, ou `--marque` sur carton. Le nom
   paraît UNE fois par période, jamais deux, jamais le téléphone. La croix ne
   descend pas sur l'adhésif : à 50 mm de large, en flexographie sur kraft, la
   réserve se comble et produit exactement la forme interdite.

   Les cotes d'impression — largeur 50 mm, période 100 mm — sont à confirmer
   auprès du façonnier. Ce qui est montré ici est la version écran.
   ------------------------------------------------------------------------- */

.spm-ruban {
  display: flex;
  align-items: center;
  gap: var(--e24);
  padding: var(--e12) var(--e24);
  background-color: var(--marque);
  color: var(--sur-marque);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  overflow: hidden;
}

/* Le nom sur le ruban : capitales, comme sur le camion et la tenue. C'est
   l'un des quatre cas de la liste close (README §5). */
.spm-ruban__nom {
  flex: none;
  font-family: var(--police-titre);
  font-weight: var(--graisse-noire);
  font-size: var(--t-texte);
  line-height: 1.2;
  letter-spacing: var(--approche-capitales);
  text-transform: uppercase;
  white-space: nowrap;
}

/* La frise remplit le reste du ruban. On la COMPOSE, on ne la recopie pas :
       <span class="spm-frise spm-frise--contre" aria-hidden="true"></span> */
.spm-ruban .spm-frise { flex: 1 1 auto; }

/* Variante imprimée : une seule encre rouge sur le carton. Mesuré ce jour :
   `--marque` sur `--carton` donne 3,10:1 — au-dessus du seuil de 3:1 des
   formes et du texte large, sous celui du texte courant. Le ruban ne porte
   donc rien d'autre que son nom, en grand. */
.spm-ruban--kraft {
  background-color: var(--carton);
  color: var(--marque);
}

.spm-ruban--kraft .spm-frise { background-color: var(--marque); }