/* ---------------------------------------------------------------------------
   Feuille de style des pages d'entree — Villa Papillon (site 1334).

   La palette et les polices sont celles de l'IHM, a l'identique : le client
   passe de cette page a la sienne sans rupture visuelle. Elle est SOMBRE en
   toutes circonstances, y compris si le telephone est en theme clair — l'IHM
   l'est, et une page de connexion claire suivie d'une interface sombre donne
   un eblouissement desagreable la nuit, precisement quand on consulte une
   camera.

   Les polices sont chargees par polices.css, qui doit venir AVANT ce fichier.
   --------------------------------------------------------------------------- */

:root {
  /* Reprises telles quelles du :root de l'IHM. */
  --ink: #0A0908;
  --ink2: #100E0D;
  --ink3: #161312;
  --ink4: #1F1B19;
  --ink5: #2A2522;

  /* Or — deux familles volontairement distinctes, comme dans l'IHM :
     TEINTE (fonds, filets, lueurs) -> champagne doux
     ENCRE  (textes, icones, boutons pleins) -> laiton franc
     Ne jamais deriver l'encre de la teinte par rgb(var(--…)) : une custom
     property est resolue sur l'element qui la DECLARE, puis heritee figee. */
  --gold-rgb: 196, 169, 110;
  --gold-hi-rgb: 232, 220, 168;
  --gold: #CA8F2B;
  --gold-hi: #F0CB5C;
  --gold-dim: #655334;
  --gold-soft: rgba(var(--gold-rgb), .14);
  --hair: rgba(var(--gold-rgb), .30);
  --hair-2: rgba(var(--gold-rgb), .50);

  --bone: #F4EFE6;
  --mute: #B4ABA0;
  --mute2: #968C81;
  --live: #D4605A;
  --ok: #A0BE88;

  --r: 5px;
  --rr: 12px;

  --ff-d: "Marcellus", "Times New Roman", serif;
  --ff-b: "Jost", "Avenir Next", system-ui, sans-serif;

  --shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 10px 30px -14px rgba(0, 0, 0, .75);

  /* Indique au navigateur de dessiner ses propres controles en sombre :
     champs de saisie, barres de defilement, menus natifs. */
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100dvh;
  /* Le meme halo chaud que le haut de l'IHM, en plus diffus. */
  background:
    radial-gradient(ellipse 120% 70% at 50% -10%, rgba(var(--gold-rgb), .09), transparent 60%),
    var(--ink);
  color: var(--bone);
  font-family: var(--ff-b);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Panneaux muraux en acces guide : pas de rebond, pas de flash au toucher. */
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

main { width: 100%; max-width: 520px; margin: auto 0; }
main.wide { max-width: 860px; }

/* ---------------------------------------------------------------------------
   La marque — composee comme l'ecran de veille de l'IHM
   --------------------------------------------------------------------------- */

/* Le selecteur de langue occupe sa propre ligne, au-dessus de la marque : sur
   un telephone, le mettre a cote du nom le couperait en deux. */
.brand {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px 16px;
  margin-bottom: 26px;
}
.brand .logo-mark { width: 52px; height: 52px; flex: none; color: var(--gold); }
.brand-text { min-width: 0; }
.brand .lang-toggle { grid-column: 1 / -1; justify-self: end; }

/* PAPILLON en grand, « Villa » en petit dessous : exactement la composition de
   .veille-txt dans l'IHM, aux memes valeurs. C'est la signature visuelle de
   cette maison ; la reprendre ici fait que le client reconnait l'ecran avant
   meme d'avoir lu quoi que ce soit.

   Noter l'ordre : le grand mot d'abord, le petit ensuite — comme sur la
   veille. Ce n'est pas l'ordre de lecture d'un nom (« Villa Papillon »), c'est
   celui de l'affiche. */
.brand-name {
  margin: 0;
  line-height: 1.15;
  font-weight: 400;
}
.brand-name b {
  display: block;
  font-family: var(--ff-d);
  font-size: clamp(24px, 6.6vw, 34px);
  letter-spacing: .16em;
  font-weight: 400;
  color: var(--gold-hi);
  /* L'aura est plus large qu'a l'ecran de veille : ici le nom est seul sur un
     fond nu, il a besoin d'etre pose sur quelque chose. */
  text-shadow: 0 0 34px rgba(var(--gold-rgb), .38);
}
.brand-name span {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--mute2);
}

.lang-toggle {
  display: flex;
  gap: 4px;
  flex: none;
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 3px;
  background: var(--ink3);
}
.lang-toggle button {
  width: auto;
  margin: 0;
  padding: 5px 11px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--mute);
  font: 600 12px/1 var(--ff-b);
  letter-spacing: .08em;
  cursor: pointer;
  min-height: 0;
  text-transform: none;
}
.lang-toggle button.active {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  color: #171310;
}

/* ---------------------------------------------------------------------------
   Contenu
   --------------------------------------------------------------------------- */

h1 {
  font-family: var(--ff-d);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: .04em;
  margin: 0 0 6px;
  color: var(--bone);
}
h2 {
  font-family: var(--ff-d);
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: .04em;
  margin: 28px 0 10px;
}
p.lede { color: var(--mute); margin: 0 0 22px; }

.card {
  background: linear-gradient(135deg, rgba(var(--gold-rgb), .07), rgba(16, 14, 13, .6) 45%), var(--ink2);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  padding: 24px;
  box-shadow: var(--shadow);
}

label {
  display: block;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 18px 0 7px;
}
label:first-of-type { margin-top: 0; }

input {
  width: 100%;
  padding: 14px 14px;
  font-size: 1rem;
  font-family: var(--ff-b);
  color: var(--bone);
  background: var(--ink);
  border: 1px solid var(--hair);
  border-radius: var(--r);
}
input::placeholder { color: var(--mute2); opacity: .7; }
input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
input.code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
}

/* Le bouton plein reprend .btn.gold de l'IHM : degrade haut clair vers or,
   texte presque noir, capitales espacees. */
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  margin-top: 20px;
  padding: 14px 22px;
  font-family: var(--ff-b);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #171310;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  border: 1px solid var(--gold);
  border-radius: var(--r);
  cursor: pointer;
  transition: .18s;
}
button:disabled { opacity: .5; cursor: progress; }

/* INDISPENSABLE avec le display:inline-flex ci-dessus. Une declaration
   d'auteur l'emporte sur la regle « [hidden]{display:none} » de la feuille du
   navigateur : sans cette ligne, les boutons marques `hidden` — « Ouvrir
   l'interface », entre autres — restent visibles, vides, en plein milieu de
   la carte. Vu a la capture d'ecran, pas en relisant le code. */
button[hidden] { display: none; }

/* Le bouton secondaire est le .btn nu de l'IHM : filet or, texte os. */
button.ghost {
  background: transparent;
  color: var(--bone);
  border: 1px solid var(--hair);
  font-weight: 500;
  margin-top: 10px;
}
button.ghost:hover { border-color: var(--gold); color: var(--gold-hi); background: var(--gold-soft); }
button.small { width: auto; margin: 0; min-height: 40px; padding: 8px 16px; font-size: 12px; }
button.danger {
  background: transparent;
  border-color: rgba(212, 96, 90, .5);
  color: var(--live);
}
button.danger:hover { background: rgba(212, 96, 90, .12); border-color: var(--live); }

/* Sur fond sombre, un aplat de couleur vive fatigue : on garde une teinte
   discrete et c'est le texte qui porte la couleur. */
.msg {
  margin-top: 18px;
  padding: 13px 15px;
  border-radius: var(--r);
  border: 1px solid transparent;
  font-size: .92rem;
}
.msg.error { background: rgba(212, 96, 90, .14); border-color: rgba(212, 96, 90, .34); color: #EE9C97; }
.msg.ok { background: rgba(160, 190, 136, .14); border-color: rgba(160, 190, 136, .34); color: #BFD8A9; }
.msg.info { background: var(--ink4); border-color: var(--hair); color: var(--mute); }
.msg[hidden] { display: none; }

.device {
  border: 1px solid var(--hair);
  border-radius: var(--r);
  padding: 15px 17px;
  margin-bottom: 10px;
  background: var(--ink2);
  display: flex;
  gap: 14px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.device .grow { flex: 1 1 220px; min-width: 0; }
.device .name { font-weight: 500; color: var(--bone); }
.device .meta { font-size: .82rem; color: var(--mute2); margin-top: 3px; }
.device.revoked { opacity: .45; }

.tag {
  display: inline-block;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  color: var(--mute2);
  margin-inline-start: 7px;
  vertical-align: 1px;
}
.tag.alerte {
  border-color: rgba(212, 96, 90, .5);
  color: #EE9C97;
  background: rgba(212, 96, 90, .14);
}

.codebox {
  font: 700 1.7rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .16em;
  text-align: center;
  padding: 20px;
  border: 1px dashed var(--hair-2);
  border-radius: var(--r);
  margin-top: 14px;
  color: var(--gold-hi);
}

label.check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .9rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bone);
  margin-top: 18px;
}
label.check input { width: auto; margin: 0; accent-color: var(--gold); }

.hint { font-size: .82rem; color: var(--mute2); margin: 8px 0 0; }

footer {
  margin-top: 24px;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--mute2);
  text-align: center;
}

a { color: var(--gold-hi); }