/* ---------------------------------------------------------------
   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%;

  /* Comportement d'application installee, pas de page web.
     manipulation      : supprime le double-tap qui zoome, garde le defilement.
                         Il autorise en revanche le pincement — c'est
                         tactile.js qui s'en charge.
     overscroll-behavior: supprime le rebond elastique en bout de page, celui
                         qui donne l'impression de pouvoir tout deplacer.
     text-size-adjust  : empeche iOS de grossir le texte de lui-meme a la
                         rotation de l'ecran. */
  touch-action: manipulation;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;

  /* Le DOCUMENT ne defile jamais : c'est une coquille d'application, pas une
     page. Sans ca, il suffit de quelques pixels de debordement — les zones
     sures de l'iPhone, la barre d'etat translucide — pour que Safari se
     permette de recadrer au double-tap. Si rien ne peut defiler, rien ne peut
     descendre. Le defilement vit dans .ecran, un cran plus bas. */
  overflow: hidden;
}

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;
  /* Surtout PAS justify-content: center ici. Un conteneur flex centre qui
     deborde coupe le DEBUT de son contenu, et aucun defilement ne permet d'y
     revenir : scrollTop est deja a zero. Le centrage est porte par .bloc via
     des marges automatiques, qui absorbent l'espace libre quand il y en a et
     valent zero quand il n'y en a plus. */
  justify-content: flex-start;
  padding: 1.5rem 1.5rem 3.5rem;
  text-align: center;

  /* Le defilement est ici, et nulle part ailleurs.
     min-height: 0 est indispensable : par defaut un element flex refuse de
     devenir plus petit que son contenu, il deborderait donc au lieu de
     defiler. C'est le piege classique de flexbox. */
  min-height: 0;
  overflow-y: auto;
}

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

  /* Centrage vertical qui ne coupe rien : voir le commentaire de .ecran. */
  margin: auto 0;
}

.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;
}