/* =====================================================================
   TelesCoop, le Lab
   Feuille propre à la page. Elle ne redéfinit aucun jeton de la base
   commune, elle n’ajoute que ce que la page exige :
   la grille de vitrine, la réserve hachurée et le bloc d’en-tête.

   Dépend de Crea/Design system/telescoop-ds.css
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. AJUSTEMENTS LOCAUX
   --------------------------------------------------------------------- */

/* Sur un bandeau d’encre, les filets du système deviennent invisibles.
   Ils sont recalculés à partir de la couleur du texte qui s’y pose,
   donc la règle vaut pour le thème clair comme pour le thème sombre. */
.section-encre{
  --filet-couleur:color-mix(in srgb, var(--contre-encre) 22%, transparent);
  --filet-fort:color-mix(in srgb, var(--contre-encre) 82%, transparent);
  --encre-douce:color-mix(in srgb, var(--contre-encre) 62%, transparent);
}

/* Métadonnée technique, en Plex Mono */
.meta{
  font-family:var(--font-mono);
  font-size:.8rem;line-height:1.5;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--encre-douce);
  margin:0;max-width:none;
}
.meta strong{font-weight:500;color:var(--encre)}
.meta .sep{opacity:.45;margin:0 .5em}

/* Rubrique avec une valeur poussée en fin de ligne, après le filet */
.rubrique::after{order:0}
.rubrique .fin{order:1;flex:none}

/* Sur un petit écran, les ancres de section encombrent la barre.
   Le logo et la bascule de thème suffisent. */
@media (max-width:800px){
  .nav-links .lien-section{display:none}
}



/* ---------------------------------------------------------------------
   2. EN-TÊTE
   --------------------------------------------------------------------- */

.ouverture{padding-block:clamp(3.5rem,9vw,7.5rem) var(--section-y)}

.ouverture h1{
  margin-bottom:.18em;
  font-size:clamp(3.5rem,17vw,12rem);
  line-height:.86;
}

.ouverture .exergue{max-width:44ch}

/* Ligne d’accès, posée sous l’exergue */
.accroche{margin-top:calc(var(--bloc-y) * -.35)}


/* ---------------------------------------------------------------------
   3. VITRINE
   Une seule grille, qui accueille les objets publiés et les réserves.
   Un objet publié prend la place de la réserve suivante, sans que la
   composition ait à bouger.
   --------------------------------------------------------------------- */

.vitrine{
  display:grid;gap:var(--gap);
  grid-template-columns:1fr;
}

@media (min-width:420px){
  .vitrine{grid-template-columns:repeat(2,1fr)}
  .vignette-phare{grid-column:span 2}
}

@media (min-width:960px){
  .vitrine{
    grid-template-columns:repeat(3,1fr);
    grid-auto-rows:minmax(14.5rem,auto);
  }
  .vignette-phare{grid-column:span 2;grid-row:span 2}
}

.vignette{
  display:flex;flex-direction:column;
  min-height:10.5rem;
}
@media (min-width:960px){ .vignette{min-height:14.5rem} }

/* -- Objet publié -----------------------------------------------------
   Les deux formats sont des liens entiers : à la souris comme au
   clavier, la cible est le bloc, jamais un bouton posé dans un coin.
   Le relief du .halo suffit à annoncer que ça se clique.             */

a.vignette{
  background-image:none;
  color:var(--encre);
}

/* Ligne d’action, commune aux deux formats : un filet, puis le verbe */
.vignette .lire{
  display:block;color:var(--encre);
  border-top:var(--filet) solid var(--filet-couleur);
  padding-top:1rem;
}
.vignette .lire .fleche{
  display:inline-block;margin-left:.5em;
  transition:transform var(--speed) var(--ease);
}
a.vignette:hover .lire .fleche,
a.vignette:focus-visible .lire .fleche{transform:translateX(5px)}

/* -- Format phare ---------------------------------------------------- */

.vignette-phare{
  padding:clamp(1.5rem,3vw,2.5rem);
  background:var(--surface-2);
}

.vignette-tete{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;margin-bottom:auto;
}

.vignette-phare .titre{
  margin:2.5rem 0 0;
  font-size:clamp(1.75rem,5vw,4.25rem);
  line-height:1;
}

.vignette-phare .filet-court{margin:1.25rem 0 1.25rem}

.vignette-phare p{max-width:52ch;margin-bottom:1.75rem}

.vignette-pied{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:1rem;
  border-top:var(--filet) solid var(--filet-couleur);
  padding-top:1.15rem;
}
.vignette-pied .lire{border-top:0;padding-top:0;font-size:.9rem}
.vignette-pied .etiquettes{
  display:flex;flex-wrap:wrap;gap:.5rem;margin-left:auto;
}
/* Une fois repliées sur leur propre ligne, les étiquettes s’alignent
   à gauche comme le reste de la carte. */
@media (max-width:700px){
  .vignette-pied .etiquettes{margin-left:0}
}

/* -- Format simple ---------------------------------------------------- */

.vignette-objet{
  background:var(--surface-2);
  background-image:none;
  color:var(--encre);
}

/* Sous 700px, une demi-colonne étrangle le texte : l’objet reprend
   toute la largeur, seules les cases à venir restent deux par rangée. */
@media (max-width:699px){ .vignette-objet{grid-column:1 / -1} }

.vignette-objet .titre{
  margin:2rem 0 0;
  font-size:clamp(1.5rem,2.6vw,2rem);
  line-height:1.02;
}

.vignette-objet .filet-court{margin:1rem 0}

.vignette-objet p{max-width:34ch;margin-bottom:1.25rem}

/* -- Projet à venir ---------------------------------------------------
   Aucun contour : un contour annonce ce qui se clique. La case se
   signale comme une réserve sur une planche de mise en page, par une
   hachure et un numéro déjà imprimé.                                  */

.vignette-reserve{
  padding:1.5rem;
  border-radius:var(--radius);
  background-color:transparent;
  background-image:repeating-linear-gradient(
    -45deg,
    var(--filet-couleur) 0 1px,
    transparent 1px 10px
  );
}

.vignette-reserve .numero{
  font-family:var(--font-titre);text-transform:uppercase;
  font-size:clamp(2.75rem,6vw,4rem);line-height:.82;
  color:var(--encre-douce);opacity:.55;
}

.vignette-reserve .meta{margin-top:auto}


/* ---------------------------------------------------------------------
   4. INTENTION
   --------------------------------------------------------------------- */

.principes{display:grid;gap:var(--gap);margin-top:var(--bloc-y)}
@media (min-width:860px){ .principes{grid-template-columns:repeat(3,1fr)} }

.principes .petit-titre{margin-bottom:.6em}
.principes p{margin-bottom:0;max-width:34ch}


/* ---------------------------------------------------------------------
   5. PIED
   --------------------------------------------------------------------- */

.pied{padding-block:var(--bloc-y) calc(var(--bloc-y) * 1.2)}
.pied-inner{
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:1rem 2.5rem;margin-top:1.5rem;
}
.pied-inner .meta{margin-left:auto;text-align:right}

@media (max-width:640px){
  .pied-inner .meta{margin-left:0;text-align:left}
}