/* == ADEXWEB — LES TREIZE APERCUS DE SECTEUR ==  D-299 */

/* LES TREIZE APERCUS — construits dans `tools/proto-secteurs.*`  D-300 */
/* == LES TREIZE APERCUS DE SECTEUR — maquettes de vrais sites. ==  D-301 */

/* == LE CADRE == */
.mock {
  /* Le cadre devient CONTENEUR : toute l'echelle interne se lit en  D-302 */
  container-type: inline-size;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--surface-2);
  color: var(--ink);
  font-family: var(--font-text);
  line-height: 1.4;
}

.sec-page {
  /* 640 px de cadre -> 11,4 px ; 300 px -> 5,85 px ; plancher a
     5,2 px, en dessous la maquette cesse de ressembler a un site. */
  font-size: clamp(5.2px, 1.95cqw, 11.4px);
}

/* LA BARRE NE PORTE PLUS D'ADRESSE.  D-693
   Elle en portait une — `bistro-nordet.ca`, `salon-brume.ca` — et une
   adresse dit « va voir ». Il n'y a rien a aller voir : ce sont des
   demonstrations. Ne reste que le metier.
   Et elle ne prend plus sa taille dans le cadre : `cqw` n'avait plus
   de conteneur depuis qu'elle est sortie de `.mock` (D-687), donc il
   retombait sur la fenetre. Une taille en token, qui ne depend que
   d'ADEXWEB — c'est notre cartouche, pas la fenetre du client. */
.sec-chrome {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: var(--s-2) var(--s-4);
  background: var(--surface-0);
  border-bottom: var(--rule-w) solid var(--rule-strong);
  font-family: var(--font-data);
  font-size: var(--fs-8);
}
.sec-chrome em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.sec-page {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 1.15em;
  display: grid;
  gap: 0.9em;
  align-content: start;
}
.sec-page > *,
.sec-page > * > * { min-width: 0; }
.sec-page s { text-decoration: none; }
.sec-page em { font-style: normal; }
.sec-page p { max-width: none; }

/* == ATOMES PARTAGES == */
.sec-kicker {
  font-family: var(--font-data);
  font-size: 0.78em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.sec-titre {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.85em;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variation-settings: "wdth" 100;
}
.sec-titre--xl { font-size: 2.35em; }

/* Les douze blocs de maquette dessinee 01 a 12 ont ete RETIRES le
   2026-08-01 : leur balisage n'existe plus depuis que chaque secteur
   montre une capture de son vrai premier ecran. 1 181 lignes de CSS
   qu'aucun selecteur du document n'atteignait plus.  D-681
   Recollables : archives/2026-08-01-css-secteurs-maquettes.css */

/* == 13 · VOTRE INDUSTRIE ICI — la matiere ==  D-331 */
.sec-page--matiere {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  grid-template-rows: minmax(0, 1fr);
  align-content: stretch;
  gap: 1.1em;
}
.sec-mat-txt { display: grid; align-content: center; gap: 0.7em; min-width: 0; }
.sec-mat-txt p { font-size: 0.88em; line-height: 1.5; color: var(--ink-muted); }
.sec-mat-data {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5em;
  padding-top: 0.7em;
  border-top: 2px solid var(--ink);
}
.sec-mat-data > div { display: grid; gap: 0.05em; min-width: 0; }
.sec-mat-data b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5em;
  line-height: 1;
  color: var(--accent-text);
}
.sec-mat-data em {
  font-family: var(--font-data);
  font-size: 0.64em;
  letter-spacing: 0.06em;
  line-height: 1.35;
  color: var(--ink-muted);
}
/* LE CHAMP COUPE LES GRAINS. Sans lui, un grain disperse a 340 %  D-332 */
.sec-mat-champ {
  display: grid;
  align-content: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.sec-lim {
  align-self: center;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-auto-rows: 1fr;
  gap: 2px;
  aspect-ratio: 9 / 7;
  min-width: 0;
}
.sec-lim i { display: block; background: var(--rule-strong); }
.sec-lim i:nth-child(4n + 2) { background: var(--ink); }
.sec-lim i:nth-child(7n + 3) { background: var(--accent); }
/* Dispersion. Dix-sept variantes, premier nombre : le cycle derive
   contre les neuf colonnes, donc aucun motif ne se repete a la
   verticale. Chaque grain part d'ailleurs et arrive PILE. */
.sec-lim i { --dx: 0%; --dy: 0%; }
.sec-lim i:nth-child(17n + 1) { --dx: -240%; --dy: -180%; }
.sec-lim i:nth-child(17n + 2) { --dx: 310%; --dy: -90%; }
.sec-lim i:nth-child(17n + 3) { --dx: -150%; --dy: 260%; }
.sec-lim i:nth-child(17n + 4) { --dx: 190%; --dy: 320%; }
.sec-lim i:nth-child(17n + 5) { --dx: -330%; --dy: 40%; }
.sec-lim i:nth-child(17n + 6) { --dx: 90%; --dy: -290%; }
.sec-lim i:nth-child(17n + 7) { --dx: 260%; --dy: 150%; }
.sec-lim i:nth-child(17n + 8) { --dx: -80%; --dy: -340%; }
.sec-lim i:nth-child(17n + 9) { --dx: 350%; --dy: 60%; }
.sec-lim i:nth-child(17n + 10) { --dx: -290%; --dy: -60%; }
.sec-lim i:nth-child(17n + 11) { --dx: 40%; --dy: 300%; }
.sec-lim i:nth-child(17n + 12) { --dx: -200%; --dy: 120%; }
.sec-lim i:nth-child(17n + 13) { --dx: 150%; --dy: -220%; }
.sec-lim i:nth-child(17n + 14) { --dx: -360%; --dy: 200%; }
.sec-lim i:nth-child(17n + 15) { --dx: 220%; --dy: -140%; }
.sec-lim i:nth-child(17n + 16) { --dx: -110%; --dy: 340%; }
.sec-lim i:nth-child(17n + 17) { --dx: 300%; --dy: -250%; }
.mock.is-on .sec-lim i { animation: sec-grain 5.4s var(--e-brake) infinite; }
.mock.is-on .sec-lim i:nth-child(3n) { animation-delay: 0.09s; }
.mock.is-on .sec-lim i:nth-child(3n + 1) { animation-delay: 0.18s; }
.mock.is-on .sec-lim i:nth-child(5n) { animation-delay: 0.27s; }
/* Amortissement critique : la valeur d'arrivee est atteinte et
   tenue. Aucun depassement, aucun retour. */
@keyframes sec-grain {
  0%, 4% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
  10% { opacity: 1; }
  48%, 88% { transform: translate(0, 0); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}

/* == MOUVEMENT REDUIT. ==  D-333
   Douze des treize maquettes dessinees ont ete retirees le 2026-08-01 ;
   il ne reste que le champ de grains du treizieme.  D-681 */
@media (prefers-reduced-motion: reduce) {
  .mock .sec-lim i { animation: none !important; transform: translate(0, 0); opacity: 1; }
}

/* == UN SECTEUR MONTRE UN PREMIER ECRAN, ARRETE. ==  D-681
   Ce panneau a montre trois choses de suite. Une carte dessinee a la
   main : un fragment, joli et abstrait — un patron de garage ne peut
   pas juger sur ca. Puis le site entier, photographie a 760 px de
   large et empile en tuiles, dans lequel on DESCENDAIT : personne ne
   descend dans un cadre de 421 px, et 760 px de large est la largeur
   d'une TABLETTE — reduite dans le cadre, elle rend un gros plan.

   Maintenant : UNE image, le premier ecran, photographie a 1440 x 900
   — la fenetre d'un vrai bureau — et reduite a 0,29. Le texte courant
   tombe sous 5 px, et c'est voulu : c'est a ca que ressemble un
   moniteur pose a trois metres.  D-683

   La scene porte le rapport exact de la prise de vue (app.css § 16),
   donc l'image la remplit sans rognage et sans bande. */
.mock--ecran { display: block; background: var(--surface-0); }
.mock--ecran img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Une image est glissable par defaut, et le glisser natif vole le
     geste — la lecon de D-619, appliquee avant de la repayer. */
  -webkit-user-drag: none;
}

/* ═══════════════════════════════════════════════════════════════════
   L'APERÇU VIVANT — parce qu'un aperçu FIGÉ ne prouve pas qu'on sait
   animer.  D-672

   Le `<iframe>` est SUR la planche, jamais à sa place : la planche
   reste le poster, elle porte le texte de remplacement, elle tient la
   géométrie, et elle est ce que voient le clavier, les lecteurs
   d'écran et tout palier au-dessus de zéro. Le vivant est un LUXE
   posé par-dessus.

   IL RENDAIT LE SITE DANS UN CADRE DE 421 px DE LARGE — donc la mise
   en page TÉLÉPHONE d'un écran dessiné pour 1440.  D-688
   Le vivant et la planche montraient deux compositions différentes du
   même site, et c'est la planche qui avait raison. Le cadre fait
   maintenant 1440 × 900 en propre et se REDUIT par `transform` :
   même géométrie que la capture, au pixel. `--sec-ech` est posé par
   `main.js`, qui seul connaît la largeur de la scène.
   ═══════════════════════════════════════════════════════════════════ */
.sec-live {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  background: var(--surface-0);
  opacity: 0;
  transition: opacity var(--t-2) var(--e-snap);
}
.sec-live.is-pret { opacity: 1; }
.sec-live-cadre {
  width: 1440px;
  height: 900px;
  border: 0;
  display: block;
  background: var(--surface-0);
  transform: scale(var(--sec-ech, 0.29));
  transform-origin: 0 0;
}
/* Pendant que le vivant joue, la planche s'efface. */
.mock-stage.is-vivant .mock.is-on { opacity: 0; }