/* Les pages publiques — la vitrine, les mentions légales, la confidentialité.
 *
 * Feuille **séparée** de `app.css`, et ce n'est pas de la propreté de rangement :
 * ce sont deux identités visuelles qui n'ont rien à voir. `app.css` habille
 * Prospecto, l'outil interne, dont la couleur porte un sens fonctionnel (vert =
 * payé, rouge = dû, ambre = en retard). Ici c'est la marque **Webuild** qui
 * parle, avec sa charte à elle. Mélanger les deux ferait que retoucher le rouge
 * de la vitrine changerait la couleur d'une dette impayée à l'écran d'appel.
 *
 * Palette relevée sur la charte graphique interne (« Signal Vermillon ») et non
 * choisie à l'œil.
 */

:root {
  --vermillon: #FF4A1C;
  --bleu-signal: #1B2CFF;
  --acide: #E9FF57;
  --noir: #0D0D0D;
  --creme: #F6F1E7;
  --creme-ombre: #EAE3D2;
  --gris: #6B6558;
  --trait: #DAD3C5;
}

/* Anton, servie par notre propre serveur et jamais par Google Fonts : un `<link>`
   vers fonts.googleapis.com enverrait l'adresse IP de chaque visiteur chez Google
   sans son consentement, ce que la CNIL sanctionne — et la politique de sécurité
   de l'application (`default-src 'self'`) le bloquerait de toute façon.
   Licence SIL OFL 1.1, voir `static/fonts/LICENCE-anton.txt`. */
@font-face {
  font-family: "Anton";
  src: url("../fonts/anton-v2.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  /* La page s'affiche tout de suite dans la police de repli, puis bascule : sur
     une connexion lente, `block` laisserait un titre invisible pendant trois
     secondes. */
  font-display: swap;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--noir);
  font-family: "Space Grotesk", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.enveloppe {
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* --- L'en-tête : le logotype, et rien d'autre ----------------------------- */

.tete-publique {
  border-bottom: 2px solid var(--noir);
}

.tete-publique .enveloppe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.25rem;
}

.logotype {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
}

/* Le logotype « bicolore continu » de la planche officielle : WEB noir, UILD
   vermillon, sans espace entre les deux. En texte et non en image — la police
   est déjà chargée, donc ça ne coûte rien de plus, et ça reste net à toute
   taille. */
.logotype .mot {
  font-family: "Anton", "Haettenschweiler", "Arial Narrow", sans-serif;
  font-size: 1.75rem;
  /* La charte serre le mot : les lettres se touchent presque. */
  letter-spacing: -0.005em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.logotype .web { color: var(--noir); }
.logotype .uild { color: var(--vermillon); }

/* Sur le pied noir, « WEB » passe en crème — troisième déclinaison de la
   planche officielle, obtenue sans un second fichier. */
.pied-public .logotype .web { color: var(--creme); }

.logotype .baseline {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gris);
  border-left: 2px solid var(--vermillon);
  padding-left: 0.75rem;
  line-height: 1.2;
}

@media (max-width: 34rem) {
  .logotype .baseline { display: none; }
}

/* **Le bouton de connexion de l'en-tête.** Même vocabulaire que celui de la
   vitrine (vermillon, bord noir, ombre pleine) mais plus compact : c'est un
   rappel permanent, pas l'appel principal. Il est le seul élément cliquable de
   l'en-tête à côté du logotype, donc il ne peut pas se confondre avec autre
   chose. */
.bouton-tete {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--vermillon);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9375rem;
  white-space: nowrap;
  padding: 0.6rem 1.1rem;
  border: 2px solid var(--noir);
  box-shadow: 3px 3px 0 var(--noir);
  transition: transform .12s ease, box-shadow .12s ease;
}

.bouton-tete:hover,
.bouton-tete:focus-visible {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 var(--noir);
}

/* Sur le pied noir, l'ombre pleine noire serait invisible : elle passe en crème
   pour garder le même relief. */
.pied-public .bouton-tete {
  border-color: var(--creme);
  box-shadow: 3px 3px 0 var(--creme);
}

@media (max-width: 26rem) {
  /* Sous cette largeur, le mot entier pousse le logotype hors de l'écran : il
     ne reste que la flèche, qui suffit puisque c'est le seul bouton. */
  .bouton-tete .mot-long { display: none; }
  .bouton-tete { padding: 0.6rem 0.8rem; }
}

/* --- Le titre : très gros, très serré, comme la charte le demande --------- */

.hero {
  padding-block: clamp(3rem, 9vw, 6.5rem) clamp(2.5rem, 7vw, 5rem);
}

.etiquette {
  display: inline-block;
  background: var(--noir);
  color: var(--creme);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.4rem 0.7rem;
  margin-bottom: 2rem;
}

h1.geant {
  font-family: "Anton", "Haettenschweiler", "Arial Narrow", sans-serif;
  font-size: clamp(3.25rem, 13vw, 9rem);
  /* **1, et pas moins, à cause des accents.** La charte demande une condensée
     très serrée, et Anton descend volontiers sous 1 en anglais — mais en
     français le titre est en capitales accentuées, et l'accent d'un « É » sort
     au-dessus de la hauteur de capitale. À 0.86, le É de « RÉSERVÉ » mordait
     sur la ligne du dessus et le È d'« ACCÈS » sur l'étiquette noire. Défaut
     invisible aux tests — aucun ne rend une police — trouvé en regardant la
     page. Le serrage de la charte est donc porté par la chasse de la police et
     par `letter-spacing`, pas par l'interligne. */
  line-height: 1;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin: 0 0 1.75rem;
  max-width: 14ch;
}

h1.geant .rouge { color: var(--vermillon); }

.chapeau {
  font-size: clamp(1.0625rem, 2.2vw, 1.375rem);
  line-height: 1.5;
  max-width: 44ch;
  margin: 0 0 2.25rem;
}

.chapeau strong { font-weight: 700; }

/* --- Le bouton : un seul, c'est la seule action de la page --------------- */

.actions-publiques {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
}

/* **Le bouton principal, et il doit se voir de loin.** C'est la seule action de
   tout le site public : un membre de l'équipe qui arrive ici veut entrer, et
   rien d'autre. Il est donc surdimensionné par rapport à un bouton ordinaire —
   gros texte, forte hauteur, ombre pleine large — et posé seul sur sa ligne,
   sans rien à côté qui puisse se disputer l'œil. */
.bouton-marque {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--vermillon);
  color: #fff;
  text-decoration: none;
  font-family: "Anton", "Haettenschweiler", "Arial Narrow", sans-serif;
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1;
  padding: 1.15rem 2.25rem;
  border: 3px solid var(--noir);
  /* Une ombre pleine plutôt qu'un flou : la charte vend la franchise, pas le
     luxe — un dégradé adoucirait exactement ce qu'elle cherche à dire. */
  box-shadow: 8px 8px 0 var(--noir);
  transition: transform .12s ease, box-shadow .12s ease;
}

.bouton-marque:hover,
.bouton-marque:focus-visible {
  transform: translate(4px, 4px);
  box-shadow: 4px 4px 0 var(--noir);
}

.bouton-marque .fleche { font-size: 1.1em; line-height: 1; }

/* Le bouton passe sur sa propre ligne, l'aide en dessous : côte à côte, la
   phrase grise venait border le bouton et lui prenait de la place. */
.actions-publiques {
  display: block;
}

.actions-publiques .aide-connexion {
  margin: 1.25rem 0 0;
  max-width: 34ch;
}

.aide-connexion {
  font-size: 0.9375rem;
  color: var(--gris);
  max-width: 28ch;
}

/* --- Ce que fait l'outil : trois blocs, pas une brochure ----------------- */

.bande {
  border-top: 2px solid var(--noir);
  background: var(--creme-ombre);
}

.bande.sombre {
  background: var(--noir);
  color: var(--creme);
}

.trois {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2.5rem;
  padding-block: clamp(2.5rem, 6vw, 4rem);
}

.trois h2 {
  font-family: "Anton", "Haettenschweiler", "Arial Narrow", sans-serif;
  font-size: 1.5rem;
  line-height: 1.15;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
}

.trois .numero {
  font-family: "Anton", "Haettenschweiler", "Arial Narrow", sans-serif;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--vermillon);
  display: block;
  margin-bottom: 0.5rem;
}

.trois p { margin: 0; font-size: 0.9375rem; line-height: 1.55; }

.bande.sombre .trois p { color: var(--creme-ombre); }

/* --- L'avertissement d'accès : la seule chose qui doit arrêter l'œil ----- */

.avertissement {
  border: 2px solid var(--noir);
  border-left: 10px solid var(--vermillon);
  background: #fff;
  padding: 1.5rem 1.75rem;
  margin-block: clamp(2.5rem, 6vw, 4rem);
}

.avertissement h2 {
  font-family: "Anton", "Haettenschweiler", "Arial Narrow", sans-serif;
  font-size: 1.375rem;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
}

.avertissement p { margin: 0; font-size: 0.9375rem; }
.avertissement p + p { margin-top: 0.6rem; }

/* --- Le pied : les liens légaux, atteignables de partout ---------------- */

.pied-public {
  border-top: 2px solid var(--noir);
  background: var(--noir);
  color: var(--creme-ombre);
  font-size: 0.875rem;
}

.pied-public .enveloppe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  align-items: baseline;
  justify-content: space-between;
  padding-block: 2rem;
}

.pied-public a { color: var(--creme); text-decoration: underline; }
.pied-public a:hover { color: var(--acide); }
.pied-public nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.pied-public .copyright { color: var(--gris); }

/* --- Les pages de texte légal ------------------------------------------- */

.texte-legal {
  padding-block: clamp(2.5rem, 6vw, 4rem);
  max-width: 46rem;
}

.texte-legal h1 {
  font-family: "Anton", "Haettenschweiler", "Arial Narrow", sans-serif;
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  line-height: 1.05;
  text-transform: uppercase;
  margin: 0 0 0.75rem;
}

.texte-legal .maj {
  font-size: 0.875rem;
  color: var(--gris);
  margin: 0 0 2.5rem;
}

.texte-legal h2 {
  font-family: "Anton", "Haettenschweiler", "Arial Narrow", sans-serif;
  font-size: 1.5rem;
  text-transform: uppercase;
  margin: 2.5rem 0 0.75rem;
  padding-top: 1.25rem;
  border-top: 2px solid var(--noir);
}

.texte-legal h3 {
  font-size: 1.0625rem;
  margin: 1.5rem 0 0.4rem;
}

.texte-legal p,
.texte-legal li { font-size: 0.9375rem; line-height: 1.65; }

.texte-legal a { color: var(--noir); text-decoration-color: var(--vermillon); }

.texte-legal ul { padding-left: 1.25rem; }
.texte-legal li { margin-bottom: 0.35rem; }

/* Les identifiants d'entreprise : un bloc qui se lit d'un coup, pas un
   paragraphe où il faut chercher le SIREN. */
.identite {
  border: 2px solid var(--noir);
  background: #fff;
  padding: 1.25rem 1.5rem;
  margin: 1rem 0 0;
}

.identite dl {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(9rem, auto) 1fr;
  gap: 0.4rem 1.5rem;
  font-size: 0.9375rem;
}

.identite dt { font-weight: 700; }
.identite dd { margin: 0; }

@media (max-width: 30rem) {
  .identite dl { grid-template-columns: 1fr; gap: 0.15rem; }
  .identite dd { margin-bottom: 0.6rem; }
}

/* **Ce qui reste à compléter est marqué, pas deviné.** Une mention légale
   inventée n'est pas une mention légale : un SIREN faux vaut mieux absent, il
   engage. Ces marques rouges disent où la vraie donnée doit entrer, et se
   voient à l'écran plutôt que de se cacher dans un commentaire du code. */
.a-completer {
  background: var(--acide);
  border-bottom: 2px solid var(--vermillon);
  padding: 0 0.25rem;
  font-weight: 600;
  font-style: normal;
}

.tableau-legal {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  margin-top: 0.75rem;
}

.tableau-legal th,
.tableau-legal td {
  border: 1px solid var(--trait);
  padding: 0.6rem 0.75rem;
  text-align: left;
  vertical-align: top;
}

.tableau-legal th { background: var(--creme-ombre); font-weight: 700; }

/* Un tableau ne rétrécit pas indéfiniment : sous cette largeur il défile dans sa
   propre boîte plutôt que de faire défiler la page entière de travers. */
.defile {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.retour {
  display: inline-block;
  margin-top: 2.5rem;
  font-size: 0.9375rem;
  color: var(--noir);
}