/* =========================================================================
   Epreuve de gabarit, /gabarit.

   Ce fichier ne porte QUE la mise en regard des deux epreuves et deux
   retouches de l'apercu. Tout le reste vient de assets/platform.css,
   l'habillage commun des pages d'epreuve du site : les classes « pf- » ne
   veulent pas dire « plateforme », elles sont ce squelette-la.
   ========================================================================= */

/* Le champ « Client » porte un nom, pas une reference : il lui faut de la
   place, contrairement a la date. */
.gb-field-client input { min-width: 260px; }

/* ---------- Les deux epreuves, cote a cote ---------- */
/* Elles occupent toute la largeur, et les cotes passent DESSOUS : c'est la
   comparaison des deux feuilles qu'on vient faire ici, pas la lecture d'un
   tableau de nombres. Dans une colonne de 660 px a cote d'un rail, chaque
   apercu tombait a 320 px de large, ou l'on ne voit plus si le logo respire.

   auto-fit plutot que deux colonnes fixes : l'API sait aussi ne rendre qu'une
   seule feuille, et une carte unique doit alors prendre la place. */
.gb-epreuves {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px; align-items: start;
}
.gb-epreuve { display: grid; gap: 14px; }
/* UNE SCENE CARREE, ET C'EST LA QUE TOUT SE JOUE.

   L'une des deux feuilles est en portrait, l'autre en paysage. Laissees
   libres, la portrait fait une carte une fois et demie plus haute et son
   bouton descend loin sous celui de l'autre : deux epreuves qui posent
   EXACTEMENT le meme logo ont alors l'air de deux choses differentes.

   Une scene CARREE regle les deux problemes d'un coup. Les deux feuilles font
   11 pouces sur leur grand cote : dans un carre, la portrait est limitee par
   la hauteur, la paysage par la largeur, et les deux tombent donc a LA MEME
   ECHELLE. Le logo mesure alors le meme nombre de pixels sur les deux apercus,
   ce qui est precisement ce qu'on vient verifier ici. */
.gb-epreuve .pf-preview-stage { aspect-ratio: 1; height: auto; min-height: 0; }
.gb-epreuve .pf-preview-stage img { max-height: 100%; max-width: 100%; }
.gb-epreuve .pf-card-head { margin-bottom: 0; }
.gb-feuille {
  font: 400 12.5px/1.3 var(--mb-font-mono, ui-monospace, monospace);
  color: var(--mb-ink-dim, rgba(244,242,238,.7));
}

/* ---------- Ce qui vient apres les epreuves ---------- */
.gb-apres {
  display: grid; grid-template-columns: minmax(320px, 480px) minmax(260px, 340px);
  gap: 20px; align-items: start; justify-content: start; margin-top: 20px;
}
.gb-meta-note {
  margin: 14px 0 0; padding-top: 12px;
  border-top: 1px solid var(--mb-line, rgba(255,255,255,.08));
  font-size: 12.5px; line-height: 1.55;
  color: var(--mb-ink-faint, rgba(244,242,238,.48));
}

@media (max-width: 900px) {
  .gb-apres { grid-template-columns: 1fr; }
}

/* ---------- La note « bascule en noir » ---------- */
/* Meme boite que l'avertissement matriciel de platform.css, mais neutre : on
   informe d'une modification qu'on a faite au logo du visiteur, on ne
   l'alerte de rien. Un jaune d'avertissement dirait le contraire. */
.gb-note {
  display: flex; gap: 13px; align-items: flex-start;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--mb-line-strong, rgba(255,255,255,.16));
  border-radius: var(--mb-radius, 14px);
  padding: 16px 18px; margin-bottom: 20px;
  color: var(--mb-ink, #f4f2ee);
}
.gb-note svg { flex: none; margin-top: 1px; }
.gb-note p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--mb-ink-dim, rgba(244,242,238,.7)); }
.gb-note strong { color: var(--mb-ink, #f4f2ee); }

/* ---------- L'apercu ---------- */
/* Cette feuille est du trait noir sur du blanc. Sur le fond sombre du site,
   sans ce cadre clair, les reperes de placement du bord se perdent dans la
   page : c'est justement ce qu'on vient regarder. */
.pf-preview-stage img { background: #fff; border-radius: 4px; }

/* ---------- Le logo corrige ---------- */
/* Dans la carte des telechargements, au-dessus de la note, et en SECOND : ce
   sont les feuilles qu'on vient chercher ici. Des boutons en contour, donc, pas
   le rouge plein des PDF de feuille. Absent quand rien n'a ete retire. */
.gb-corrige {
  display: grid; gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--mb-line, rgba(255,255,255,.08));
}
.gb-corrige h3 {
  margin: 0; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mb-ink-faint, rgba(244,242,238,.48)); font-weight: 600;
}
.gb-corrige-liens { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gb-corrige-lien {
  display: flex; align-items: center; justify-content: center;
  padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--mb-line-strong, rgba(255,255,255,.16));
  color: var(--mb-ink, #f4f2ee) !important; text-decoration: none !important;
  font-weight: 700; font-size: 13.5px; text-align: center;
}
.gb-corrige-lien:hover { border-color: var(--mb-ink-faint, rgba(244,242,238,.48)); }