/* GAW-R COMPANY — page d'attente.
   Une seule page, donc une seule feuille : pas de systeme de composants a
   maintenir. Les couleurs sont celles du logo, relevees dessus a la pipette. */

:root {
  --rouge: #c00000;        /* l'hexagone du logo */
  --rouge-vif: #cc1341;    /* le mot « COMPANY » */
  --fond: #101216;
  --fond-carte: #171a20;
  --trait: #262b34;
  --texte: #e7e9ee;
  --texte-doux: #9aa1ae;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--fond);
  color: var(--texte);
  font: 400 16px/1.6 "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Trame technique discrete en fond : deux degrades, aucune image a charger. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60rem 40rem at 50% -10%, rgba(192, 0, 0, 0.18), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 44px);
}

a {
  color: var(--rouge-vif);
}

/* ---------- la page ---------- */

.ecran {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
}

.carte-annonce {
  width: 100%;
  max-width: 34rem;
  padding: 3rem 2rem 2.5rem;
  text-align: center;
  background: var(--fond-carte);
  border: 1px solid var(--trait);
  border-radius: 6px;
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.45);
}

.titre {
  margin: 0;
}

.logo {
  width: 15rem;
  max-width: 80%;
  height: auto;
}

.logo--petit {
  width: 8rem;
}

h1 {
  margin: 1.5rem 0 0;
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.metier {
  margin: 0.75rem 0 0;
  color: var(--rouge-vif);
  font-size: 1.05rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.annonce {
  margin: 2rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid var(--trait);
  color: var(--texte-doux);
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ---------- contact ---------- */

.contact {
  margin: 2rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.contact dt {
  color: var(--texte-doux);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.contact dd {
  margin: 0.35rem 0 0;
}

/* La ligne courriel arrive masquee, et le reste si site.js ne tourne pas.
   Explicite plutot que dependant du seul style par defaut du navigateur : toute
   regle de display ajoutee ici plus tard l'emporterait sur l'attribut hidden. */
.contact__ligne[hidden] {
  display: none;
}

.gros-lien a,
a.gros-lien {
  color: var(--texte);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-bottom: 1px solid var(--rouge);
  padding-bottom: 2px;
}

.gros-lien a:hover,
a.gros-lien:hover,
.gros-lien a:focus-visible,
a.gros-lien:focus-visible {
  color: var(--rouge-vif);
  border-bottom-color: var(--rouge-vif);
}

.bouton {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.7rem 1.6rem;
  background: var(--rouge);
  color: #fff;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 3px;
}

.bouton:hover,
.bouton:focus-visible {
  background: var(--rouge-vif);
}

code {
  color: var(--texte);
  font-size: 0.95em;
  word-break: break-all;
}

/* ---------- pied de page ---------- */

.pied {
  padding: 1.5rem 1rem 2rem;
  text-align: center;
  color: var(--texte-doux);
  font-size: 0.78rem;
}

.pied p {
  margin: 0.2rem 0;
}

.pied__version {
  color: #6b7280;
}

.pied__version a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid #3a4150;
}

.pied__version a:hover,
.pied__version a:focus-visible {
  color: var(--texte-doux);
}

@media (max-width: 30rem) {
  .carte-annonce {
    padding: 2rem 1.25rem 1.75rem;
  }
}