/* ---------------------------------------------------------------
   QHB — feuille de style

   Couleurs et typographie issues de la charte QOPO (fichiers du graphiste),
   qui fait foi sur toute valeur recopiee a la main.
   Mobile-first : les regles de base visent le telephone.
   --------------------------------------------------------------- */

/* ---------- Polices auto-hebergees ----------
   Goia est la typo d'identite (decision 13). Aucun CDN : les fichiers
   vivent dans le depot. font-display: swap affiche immediatement le texte
   avec la police systeme puis bascule — sur un chantier avec une mauvaise
   couverture reseau, un texte invisible pendant trois secondes est pire
   qu'un texte qui change d'apparence. */

@font-face {
  font-family: "Goia";
  src: url("/assets/fonts/Goia-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Goia";
  src: url("/assets/fonts/Goia-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Les variantes Display de Goia existent mais ne sont pas utilisees : elles
   sont dessinees pour de tres grandes tailles, et sur un ecran de telephone
   la graisse normale tient le titrage aussi bien. Deux fichiers de moins,
   111 Ko economises sur une application utilisee en 4G de chantier. */

:root {
  /* Charte QOPO — valeurs relevees dans les logos livres par le graphiste.
     Le petrole #293c3d est la teinte sombre du logo groupe, appariee a la
     sauge exactement comme #531613 l'est au rouge Bois. */
  --qopo-petrole: #293c3d;
  --qopo-sauge:   #5d8788;
  --qopo-gris:    #7f7f79;
  --qopo-clair:   #f2f4f3;

  /* Couleur semantique, pas une couleur de marque : volontairement
     distincte des quatre teintes d'entite (violet Construction, rouge Bois,
     orange Agencement, bleu z-part), qui serviront a identifier les
     chantiers des le module 1. */
  --qopo-alerte:  #e0a458;

  --qopo-typo:        "Goia", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Codes chantier et donnees alignees (decision 13) */
  --qopo-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100svh;              /* svh : hauteur stable malgre la barre d'URL mobile */
  background: var(--qopo-petrole);
  color: var(--qopo-clair);
  font-family: var(--qopo-typo);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;

  /* Evite que le contenu passe sous l'encoche / la barre d'accueil iPhone */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ---------- En-tete ---------- */

.entete {
  display: flex;
  justify-content: center;
  padding: 1.75rem 1.5rem 0;
}

.logo {
  width: clamp(7rem, 30vw, 9.5rem);
  height: auto;
}

.ecran {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1.5rem 3.5rem;
  text-align: center;
}

.bloc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  max-width: 26rem;
}

.bloc[hidden] { display: none; }

/* ---------- Identite ---------- */

.marque {
  margin: 0 0 1.75rem;
  font-family: var(--qopo-typo);
  font-weight: 800;
  font-size: clamp(3.5rem, 22vw, 6rem);   /* de l'iPhone SE au bureau */
  letter-spacing: 0.02em;
  line-height: 1;
}

.statut {
  margin-top: 1rem;
  padding: 0.65rem 1.4rem;
  border: 1px solid var(--qopo-sauge);
  border-radius: 999px;
  font-size: 0.9rem;
  color: var(--qopo-sauge);
}

/* ---------- Bienvenue ---------- */

.sur-titre {
  margin: 0;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--qopo-sauge);
}

.nom {
  margin: 0.3rem 0 0;
  font-family: var(--qopo-typo);
  font-weight: 800;
  font-size: clamp(1.8rem, 8vw, 2.6rem);
  line-height: 1.1;
  text-wrap: balance;
}

.courriel {
  margin: 0.35rem 0 1.6rem;
  font-size: 0.92rem;
  color: var(--qopo-sauge);
  word-break: break-word;
}

.roles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.role {
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--qopo-sauge);
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--qopo-clair);
}

.droits {
  margin: 0 0 2rem;
  font-size: 0.9rem;
  color: var(--qopo-sauge);
}

.droits.lecture-seule { color: var(--qopo-alerte); }

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

.bouton {
  /* 48 px de haut : cible tactile utilisable avec des gants de chantier */
  min-height: 3rem;
  padding: 0.85rem 1.6rem;
  border: 1px solid var(--qopo-clair);
  border-radius: 8px;
  background: var(--qopo-clair);
  color: var(--qopo-petrole);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.bouton:hover { opacity: 0.88; }
.bouton:active { opacity: 0.75; }

.bouton:focus-visible {
  outline: 2px solid var(--qopo-sauge);
  outline-offset: 3px;
}

.bouton-discret {
  background: transparent;
  color: var(--qopo-sauge);
  border-color: var(--qopo-sauge);
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  .bouton { transition: none; }
}

.mention {
  margin: 0.9rem 0 0;
  font-size: 0.82rem;
  color: var(--qopo-gris);
}

/* ---------- Erreur ---------- */

.erreur-titre {
  margin: 1rem 0 0.4rem;
  font-family: var(--qopo-typo);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--qopo-alerte);
  text-wrap: balance;
}

.erreur-detail {
  margin: 0 0 1.5rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--qopo-sauge);
  word-break: break-word;
}