/* Styles communs de l'app salon FRANBELUX — couleurs selon la charte graphique */
:root {
  --frb-orange:        #F4981B;
  --frb-orange-dark:   #E96826;
  --frb-orange-border: #E67B29;
  --frb-orange-logo:   #E57227;
  --frb-red-logo:      #BD3642;
  --frb-gray-logo:     #606060;
  --frb-gray-picto:    #858587;
  --frb-gray-light:    #D8D8D8;
  --frb-text:          #1A1A1A;
  --frb-text-light:    #555555;
  --frb-bg:            #F7F6F4;
  --frb-card:          #FFFFFF;

  --radius: 18px;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 28px rgba(0,0,0,.08);
  --band: 14px;
}

* { box-sizing: border-box; }

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

body {
  font-family: Calibri, Arial, "Helvetica Neue", sans-serif;
  color: var(--frb-text);
  background: var(--frb-bg);
  /* Comportement « kiosque » : pas de sélection de texte, pas de zoom au double-tap */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overscroll-behavior: none;
}

img { -webkit-user-drag: none; user-select: none; }

/* Bande décorative orange (dégradé de la charte) */
.band {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--band);
  background: linear-gradient(to bottom, var(--frb-orange), var(--frb-orange-dark));
  z-index: 10;
}

.page {
  min-height: 100%;
  padding-left: var(--band);
  display: flex;
  flex-direction: column;
}

/* En-tête : logo + filet orange */
.header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px 12px;
  /* fond blanc : le logo est un JPEG sans transparence */
  background: #fff;
}
.header img { height: 84px; width: auto; display: block; }
.rule {
  height: 3px;
  background: var(--frb-orange-border);
}

.footer {
  margin-top: auto;
  padding: 14px 24px 18px;
  text-align: center;
  font-size: 15px;
  color: var(--frb-text-light);
}
.footer span { margin: 0 .6em; color: var(--frb-orange-border); }

/* Bouton retour, réutilisé par les sous-pages */
.back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 22px 0 16px;
  border-radius: 999px;
  background: var(--frb-card);
  color: var(--frb-text);
  font-size: 19px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow);
}
.back svg { width: 24px; height: 24px; color: var(--frb-orange-dark); }
.back:active { transform: scale(.97); }

/* ---------- Barre du haut des sous-pages ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 28px;
  background: #fff;
  border-bottom: 3px solid var(--frb-orange-border);
}
.topbar .back { box-shadow: none; background: var(--frb-bg); }
.topbar h1 { margin: 0; font-size: 28px; flex: 1; }

/* ---------- Boutons ronds (fermer, précédent, suivant) ---------- */
.icon-btn {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--frb-text);
  box-shadow: var(--shadow);
  cursor: pointer;
}
.icon-btn svg { width: 30px; height: 30px; }
.icon-btn:active { transform: scale(.94); }
.icon-btn:disabled { opacity: 0; pointer-events: none; }
.nav { top: 50%; margin-top: -32px; }
.nav-prev { left: 20px; }
.nav-next { right: 20px; }

/* Apparition des fiches et du plein écran */
@keyframes fade { from { opacity: 0; } }