/* Clinique OptimVie — catalogue kiosque 9:16
   Conçu pour 1080×1920 (sortie HDMI du Raspberry Pi 3), en unités vw :
   tout s'adapte à n'importe quel écran portrait. Aucun JavaScript. */

@font-face{font-family:"Jost";font-weight:300;font-display:swap;src:url(fonts/jost-300.woff2) format("woff2")}
@font-face{font-family:"Jost";font-weight:400;font-display:swap;src:url(fonts/jost-400.woff2) format("woff2")}
@font-face{font-family:"Jost";font-weight:500;font-display:swap;src:url(fonts/jost-500.woff2) format("woff2")}

:root{
  --bg:#232323;
  --bg-2:#191919;
  --card:#2c2b29;
  --line:rgba(242,240,237,.12);
  --ink:#f2f0ed;
  --ink-2:rgba(242,240,237,.72);
  --gold:#c4a46b;
  --gold-2:#9e8153;
  --pad:4.4vw;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Jost",system-ui,sans-serif;
  font-weight:400;
  height:100vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
  cursor:none;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ---------- Barre du haut ---------- */
.bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--pad) var(--pad) 0;
  flex:none;
}
.logo{display:flex;flex-direction:column;line-height:1}
.logo-k{font-size:1.9vw;letter-spacing:.42em;text-transform:uppercase;color:var(--ink-2);margin-bottom:.9vw}
.logo-w{font-size:5vw;font-weight:300;letter-spacing:.1em}
.logo-w b{font-weight:300;color:var(--gold-2)}

.lang{
  display:flex;align-items:center;gap:1.6vw;
  font-size:2.8vw;letter-spacing:.12em;color:var(--ink-2);
  border:1px solid var(--line);border-radius:999px;
  padding:2.2vw 3.6vw;
}
.lang i{font-style:normal;opacity:.35}
.lang b{font-weight:500;color:var(--gold)}

/* Retour visuel au toucher (opacité seulement : léger pour le Pi 3) */
.tile,.lang,.back{transition:opacity .12s}
.tile:active,.lang:active,.back:active{opacity:.6}

/* ---------- Grille ---------- */
.intro{padding:5.5vw var(--pad) 4.4vw;flex:none}
.intro h1{font-size:9vw;font-weight:300;letter-spacing:-.01em;line-height:1.05}
.intro p{display:flex;align-items:center;gap:1.8vw;margin-top:1.8vw;font-size:3vw;color:var(--gold)}
.hand{width:4.4vw;height:4.4vw;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}

.grid{
  flex:1;min-height:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:repeat(3,1fr);
  gap:3vw;
  padding:0 var(--pad) var(--pad);
}
.tile{
  display:flex;flex-direction:column;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:2.2vw;
  overflow:hidden;
  min-height:0;
}
.tile img{flex:1;min-height:0;width:100%;object-fit:cover}
.tile-txt{flex:none;display:flex;flex-direction:column;justify-content:center;padding:2.6vw 3vw 3vw;min-height:17.5vw}
.tile-name{font-size:3.8vw;font-weight:400;line-height:1.15}
.tile-tag{font-size:2.5vw;color:var(--gold);margin-top:1vw;letter-spacing:.02em}

/* ---------- Fiche détail ---------- */
.back{
  display:flex;align-items:center;gap:2vw;
  font-size:3.3vw;
  border:1px solid var(--gold-2);border-radius:999px;
  padding:2.4vw 4.6vw 2.4vw 3.8vw;
}
.back span{color:var(--gold);font-size:4vw;line-height:1}

.hero{position:relative;flex:none;margin-top:4vw;height:52vw;overflow:hidden}
.hero img{width:100%;height:100%;object-fit:cover}
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:45%;
  background:linear-gradient(to bottom,rgba(35,35,35,0),var(--bg));
}

.body{flex:1;min-height:0;padding:0 var(--pad);margin-top:-7vw;position:relative}
.kicker{font-size:2.3vw;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.body h1{font-size:7.4vw;font-weight:300;line-height:1.08;margin-top:1.6vw;letter-spacing:-.01em}
.lead{font-size:3.5vw;line-height:1.35;color:var(--ink-2);margin-top:2.4vw;max-width:90%}
.inc{font-size:2.2vw;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);margin-top:5vw;padding-bottom:1.8vw;border-bottom:1px solid var(--line)}

.items{list-style:none}
.items li{
  display:flex;flex-direction:column;
  padding:2.6vw 0 2.6vw 4.4vw;
  border-bottom:1px solid var(--line);
  position:relative;
}
.items li::before{content:"";position:absolute;left:0;top:4.9vw;width:2.4vw;height:2px;background:var(--gold)}
.items strong{font-size:3.6vw;font-weight:500;line-height:1.2}
.items span{font-size:2.9vw;color:var(--ink-2);margin-top:.6vw;line-height:1.3}
.body{overflow:hidden}
/* Plus de sous-soins = photo plus basse, pour que tout tienne sans défilement */
.n4 .hero{height:42vw}
.n5 .hero{height:32vw}
.n5 .items li{padding-top:2.1vw;padding-bottom:2.1vw}
.n5 .items li::before{top:4.4vw}
.n5 .inc{margin-top:4vw}

/* ---------- Bandeau rendez-vous ---------- */
.book{
  flex:none;
  display:flex;align-items:center;gap:4.4vw;
  margin:0 var(--pad) var(--pad);
  padding:3.6vw;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:2.2vw;
}
.qr{flex:none;width:21vw;height:21vw;background:var(--ink);border-radius:1.4vw;padding:2vw}
.qr img{width:100%;height:100%}
.book-txt{display:flex;flex-direction:column;flex:1}
.book-txt strong{font-size:4.6vw;font-weight:400;line-height:1.1}
.book-txt>span{font-size:2.9vw;color:var(--gold);margin-top:1.2vw}
.book .logo{margin-top:3vw}
.book .logo-k{font-size:1.5vw;margin-bottom:.6vw}
.book .logo-w{font-size:3.2vw}

/* Coin supérieur droit laissé vide : Yodeck y place son icône de sortie */
.bar{justify-content:flex-start}
.bar-l{display:flex;align-items:center;gap:3vw}
.intro-row{display:flex;align-items:center;justify-content:space-between;gap:4vw;margin-top:1.8vw}
.intro-row p{margin-top:0}