/* =====================================================================
   TelesCoop · Design system V2
   Le logo, cinq couleurs, deux polices. Rien d’autre.
   Page autonome, noir et blanc, aucune dépendance au design system.
   ===================================================================== */

@font-face{
  font-family:"JetBrains Mono";
  src:url("../../fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight:400 800;font-style:normal;font-display:swap;
}

/* Les deux polices de la marque, lues depuis le design system. */
@font-face{
  font-family:"Anton";
  src:url("../../fonts/anton-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Barlow Condensed";
  src:url("../../fonts/barlow-condensed-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}

:root{
  --encre:#000000;
  --fond:#ffffff;
  --filet:#8c8c8c;
  --filet-fort:#000000;
  --gris:#3a3a3a;
  --focus:#0b57d0;
  --marge:clamp(1.5rem, 5vw, 4rem);
  --bloc:clamp(2.5rem, 6vw, 4.5rem);
}

*{box-sizing:border-box;}

html{background:var(--fond);-webkit-text-size-adjust:100%;}

body{
  margin:0;
  background:var(--fond);
  color:var(--encre);
  font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:1rem;
  line-height:1.6;
}

a{color:inherit;}

:focus-visible{outline:3px solid var(--focus);outline-offset:3px;}

.sr-only{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;border:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

.page{max-width:64rem;padding:var(--marge);}


/* -- En-tête ----------------------------------------------------------- */

.entete{margin:0 0 var(--bloc);}

.marque{display:inline-flex;align-items:center;gap:.75rem;text-decoration:none;}
.marque img{display:block;width:150px;max-width:45vw;height:auto;}
.marque .lab{
  font-size:1rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
}
.marque:hover .lab{text-decoration:underline;text-underline-offset:4px;}


/* -- Boutons ----------------------------------------------------------- */

.bt{
  display:inline-block;
  font:inherit;font-size:.8125rem;
  padding:.5rem .9rem;
  border:1px solid var(--filet-fort);
  background:var(--fond);color:var(--encre);
  text-decoration:none;cursor:pointer;
}
.bt:hover{background:var(--encre);color:var(--fond);}


/* -- Logo -------------------------------------------------------------- */

.logos{
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem;
  margin:0 0 var(--bloc);
}
@media (min-width:640px){
  .logos{grid-template-columns:1fr 1fr;gap:2rem;}
}

.vue{
  display:flex;align-items:center;justify-content:center;
  padding:clamp(2rem, 6vw, 3.5rem);
  border:1px solid var(--filet);
}
.vue img{width:100%;max-width:220px;height:auto;display:block;}

.vue-sombre{background:#000000;border-color:#000000;}

.tel{display:flex;gap:.5rem;margin-top:.75rem;}


/* -- Couleurs ---------------------------------------------------------- */

.couleurs{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
  gap:1rem;
  margin:0 0 var(--bloc);
}

.couleur{
  display:block;width:100%;
  padding:0;border:1px solid var(--filet);
  background:var(--fond);color:var(--encre);
  font:inherit;text-align:left;cursor:pointer;
}

.couleur .aplat{
  display:block;height:clamp(5rem, 12vw, 7rem);
  background:var(--c);
}

.couleur .code{
  display:block;
  padding:.6rem .75rem;
  font-size:.8125rem;
  letter-spacing:.04em;
  border-top:1px solid var(--filet);
}

.couleur:hover .code{background:var(--encre);color:var(--fond);}


/* -- Typographies ------------------------------------------------------ */

.typos{
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem;
}
@media (min-width:640px){
  .typos{grid-template-columns:1fr 1fr;gap:2rem;}
}

.bloc-typo{
  border:1px solid var(--filet);
  padding:clamp(1.5rem, 4vw, 2.25rem);
}

.echantillon{
  margin:0 0 1.25rem;
  line-height:1.1;
  word-break:break-word;
}

.en-anton{
  font-family:"Anton", Impact, sans-serif;
  font-size:clamp(2.5rem, 7vw, 4rem);
  text-transform:uppercase;
}

.en-barlow{
  font-family:"Barlow Condensed", system-ui, sans-serif;
  font-weight:500;
  font-size:clamp(2.25rem, 6vw, 3.5rem);
}


/* -- Retour ------------------------------------------------------------ */

.retour{
  margin:0;
  padding:0 var(--marge) var(--marge);
  min-height:1.4em;
  font-size:.8125rem;
  color:var(--gris);
}