/* style.css — la peau de la page unique de Saden Global.
 *
 * ═══ CE DOSSIER EST AUTONOME ═══
 *
 * Rien ici ne dépend du site de WiFi Zone, ni de l'API, ni de quoi que ce
 * soit d'autre sur cette machine. Les polices sont dans le dossier voisin,
 * pas empruntées à `/var/www/wifizone`. C'est délibéré : ce site est destiné
 * à partir sur un autre serveur, et un déménagement doit être une copie de
 * dossier — pas une chasse aux fichiers restés derrière.
 *
 * ═══ AUCUNE REQUÊTE VERS UN TIERS, AUCUN SCRIPT ═══
 *
 * Même discipline que le site de WiFi Zone : pas de CDN, pas de Google Fonts,
 * pas de mesure d'audience, pas de JavaScript. La politique de sécurité posée
 * par nginx l'impose (`script-src 'none'`, `default-src 'self'`) ; cette
 * feuille est écrite pour vivre sous cette contrainte, et non l'inverse.
 *
 * ═══ UNE PALETTE QUI N'EST PAS CELLE DU PRODUIT ═══
 *
 * WiFi Zone porte l'orange braise. Saden Global ne le reprend pas : la maison
 * n'est pas le produit, et elle en éditera d'autres. Le vert profond dit
 * l'entreprise, l'orange reste au logiciel — la carte qui présente WiFi Zone
 * est le seul endroit où les deux se touchent.
 */

@font-face {
  font-family: 'Public Sans';
  src: url('/polices/PublicSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Public Sans';
  src: url('/polices/PublicSans-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('/polices/Archivo-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

:root {
  --encre: #0c1512;
  --encre-2: #14211c;
  --sur-encre: #93a49c;
  --sur-encre-fort: #dce6e0;

  --papier: #f4f4f0;
  --surface: #ffffff;
  --creux: #e6e8e2;
  --texte: #101613;
  --texte-second: #58635c;
  --trait: #d6dad2;

  --vert: #16674f;
  --vert-clair: #1e8a68;
  --vert-fond: #e3efe9;
  --braise: #ff4a17;

  --colonne: 960px;
  --lecture: 62ch;
  --rayon: 16px;
  --rayon-petit: 10px;
}

/* Le mode sombre suit le réglage du système. Les rôles sont redéfinis, pas
 * inversés au hasard : le vert s'éclaircit pour rester lisible sur fond foncé
 * — un vert de plein jour sur du noir tombe sous le seuil de contraste.
 *
 * ET SURTOUT `--encre` DESCEND. Le réflexe serait de laisser le bandeau tel
 * quel, puisqu'il est déjà sombre. Ce serait le faire disparaître : en
 * reprenant simplement la palette claire à l'envers, `--papier` valait
 * #0c1512, c'est-à-dire EXACTEMENT `--encre`. Le bandeau se serait fondu dans
 * la page et toute la structure du haut avec lui. Il est donc poussé plus bas
 * que le papier, et garde son rôle : le bloc le plus sombre de la page. */
@media (prefers-color-scheme: dark) {
  :root {
    --encre: #060d0b;
    --encre-2: #0d1614;
    --sur-encre: #8b9d95;
    --sur-encre-fort: #e2ebe6;

    --papier: #101a17;
    --surface: #18241f;
    --creux: #1f2d27;
    --texte: #e8ece9;
    --texte-second: #9aa8a1;
    --trait: #2a3a33;

    --vert: #4bbd94;
    --vert-clair: #6fd3ae;
    --vert-fond: #16261f;
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--texte);
  font-family: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--vert); }
a:focus-visible,
:focus-visible { outline: 2px solid var(--vert-clair); outline-offset: 3px; }

/* `padding-left`/`padding-right` et NON le raccourci `padding`. La nuance
 * décide de la mise en page : `main` porte cette classe ET veut son propre
 * espace vertical, or `.enveloppe` est un sélecteur de CLASSE et `main` un
 * sélecteur d'ÉLÉMENT — la classe l'emporte. Un raccourci ici remettrait donc
 * le haut et le bas à zéro, et le titre viendrait se coller sous le bandeau.
 * Mesuré au rendu, pas supposé. */
.enveloppe {
  width: 100%;
  max-width: var(--colonne);
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* ---- Le bandeau -----------------------------------------------------------
 *
 * Il porte le nom et l'adresse, rien d'autre. Une entreprise qui se présente
 * n'a pas de titre publicitaire à donner : elle dit qui elle est et où elle
 * est immatriculée, et le reste de la page le prouve. */
.bandeau {
  background: var(--encre);
  color: var(--sur-encre-fort);
  padding-top: 56px;
  padding-bottom: 52px;
}

.marque {
  margin: 0;
  font-family: 'Archivo', 'Public Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2.1rem, 7vw, 3.2rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-wrap: balance;
}

.marque .second { color: var(--vert-clair); }

.qualite {
  margin: 14px 0 0;
  color: var(--sur-encre);
  font-size: 1.02rem;
  max-width: var(--lecture);
}

.lieu {
  margin: 26px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  font-size: 0.9rem;
  color: var(--sur-encre);
}

.lieu span::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 9px;
  vertical-align: 2px;
  border-radius: 50%;
  background: var(--vert-clair);
}

/* ---- Le corps ------------------------------------------------------------- */
main {
  padding-top: 52px;
  padding-bottom: 12px;
}

section + section { margin-top: 44px; }

h2 {
  margin: 0 0 16px;
  font-family: 'Archivo', 'Public Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.28rem;
  letter-spacing: -0.01em;
}

p { margin: 0 0 14px; max-width: var(--lecture); }
p:last-child { margin-bottom: 0; }

.discret { color: var(--texte-second); }

/* ---- La carte du produit --------------------------------------------------
 *
 * Le liseré orange sur la tranche gauche est le SEUL emprunt à la palette de
 * WiFi Zone dans toute la page. Il n'est pas décoratif : il dit que ce bloc
 * parle du produit et non de la maison, et c'est la même couleur que celle
 * qu'on retrouve en ouvrant l'application. */
.produit {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-left: 4px solid var(--braise);
  border-radius: var(--rayon);
  padding: 26px 28px;
}

.produit h3 {
  margin: 0 0 6px;
  font-family: 'Archivo', 'Public Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.14rem;
}

.produit .etat {
  display: inline-block;
  margin-bottom: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--vert-fond);
  color: var(--vert);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.produit .lien { font-weight: 600; }

/* ---- Les mentions légales -------------------------------------------------
 *
 * Une liste de définitions, et pas un tableau : ce sont des paires, pas des
 * lignes et des colonnes. Sur écran étroit la valeur passe sous son intitulé
 * au lieu de comprimer les deux. */
.registre {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(11rem, auto) 1fr;
  gap: 12px 28px;
  padding: 24px 26px;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
}

.registre dt {
  color: var(--texte-second);
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-top: 3px;
}

.registre dd {
  margin: 0;
  font-weight: 600;
  /* Les numéros d'immatriculation se lisent chiffre à chiffre et se
   * recopient. Une chasse fixe évite de confondre 0 et O au moment de les
   * saisir dans un formulaire. */
  font-variant-numeric: tabular-nums;
}

.registre dd.texte-normal { font-weight: 400; }

@media (max-width: 640px) {
  .registre { grid-template-columns: 1fr; gap: 4px 0; }
  .registre dd { margin-bottom: 14px; }
  .registre dd:last-child { margin-bottom: 0; }
}

/* ---- Le pied -------------------------------------------------------------- */
footer {
  margin-top: 56px;
  padding: 26px 0 40px;
  border-top: 1px solid var(--trait);
  color: var(--texte-second);
  font-size: 0.88rem;
}

footer p { max-width: none; }