/* ZANDER, site vitrine. Tokens repris de la signature produit (app/style.css,
   peau sombre performance, contrat v1.12). Aucune ressource externe : pas de
   police telechargee, pas de CDN, pas d'image binaire. Les ecrans de telephone
   sont dessines en HTML et CSS dans la langue de chaque page. */

:root {
  --fond:#0B0D0F; --panneau:#14171A; --pan2:#191D21; --ligne:#232930;
  --encre:#F2F3F4; --encre2:#7C858B;
  --accent:#FF4530; --accent-clair:#2A1512; --or:#D9A62E;
  --cond:"Avenir Next Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --ombre:0 2px 10px rgba(0,0,0,.35);
}

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px; line-height:1.65; background:var(--fond); color:var(--encre);
  -webkit-font-smoothing:antialiased; }
img { max-width:100%; }
a { color:inherit; }

.contenant { max-width:1120px; margin:0 auto; padding:0 24px; }

/* ---------------- typographie ---------------- */
h1, h2, h3, .cond { font-family:var(--cond); font-weight:800; text-transform:uppercase; }
h1 { font-size:clamp(38px,6vw,64px); line-height:1.02; letter-spacing:.01em; }
h1 .accent, h2 .accent { color:var(--accent); }
h2 { font-size:clamp(28px,4vw,42px); line-height:1.08; }
h3 { font-size:19px; letter-spacing:.05em; }
.sur-titre { font-family:var(--cond); font-weight:800; text-transform:uppercase;
  letter-spacing:.22em; font-size:12px; color:var(--accent); display:block; margin-bottom:14px; }
.grand-p { font-size:18px; color:var(--encre2); }
p.mut, .mut { color:var(--encre2); }

/* ---------------- entete ---------------- */
.entete { position:sticky; top:0; z-index:50; background:rgba(11,13,15,.88);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--ligne); }
.entete .contenant { display:flex; align-items:center; gap:26px; height:64px; }
.marque { text-decoration:none; }
.marque b { font-family:var(--cond); font-size:20px; font-weight:800; letter-spacing:.3em; }
.marque i { display:block; font-style:normal; font-size:9px; color:var(--encre2);
  letter-spacing:.12em; text-transform:uppercase; margin-top:-2px; }
.nav-liens { display:flex; gap:22px; margin-left:auto; }
.nav-liens a { text-decoration:none; font-size:13.5px; color:var(--encre2); }
.nav-liens a:hover { color:var(--encre); }
.langue { display:flex; gap:2px; border:1px solid var(--ligne); border-radius:7px; overflow:hidden; }
.langue a { text-decoration:none; font-family:var(--cond); font-weight:800; font-size:12px;
  letter-spacing:.08em; padding:6px 10px; color:var(--encre2); }
.langue a.actif { background:var(--pan2); color:var(--encre); }
.langue a:hover { color:var(--encre); }

.bouton { display:inline-block; font-family:var(--cond); font-size:14px; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase; padding:13px 22px; border-radius:8px;
  border:1px solid var(--ligne); background:transparent; color:var(--encre);
  cursor:pointer; text-decoration:none; text-align:center; }
.bouton:hover { border-color:var(--accent); color:var(--accent); }
.bouton.principal { background:var(--accent); border-color:var(--accent); color:#fff; }
.bouton.principal:hover { color:#fff; opacity:.9; }
.entete .bouton { padding:9px 16px; font-size:12.5px; }

.burger { display:none; margin-left:auto; background:none; border:1px solid var(--ligne);
  border-radius:7px; padding:8px 10px; color:var(--encre); font-size:16px; cursor:pointer; line-height:1; }

/* ---------------- heros ---------------- */
.heros { padding:84px 0 60px; position:relative; overflow:hidden; }
.heros::before { content:""; position:absolute; top:-220px; right:-160px; width:560px; height:560px;
  border-radius:50%; background:radial-gradient(circle, rgba(255,69,48,.14), transparent 65%); }
.heros .contenant { display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; }
.badge-beta { display:inline-flex; align-items:center; gap:9px; border:1px solid var(--ligne);
  border-radius:99px; padding:7px 15px; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; font-weight:700; color:var(--encre2); margin-bottom:22px; }
.badge-beta i { width:8px; height:8px; border-radius:50%; background:var(--accent);
  font-style:normal; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
.heros p.grand-p { margin:22px 0 30px; max-width:560px; }
.devise-ligne { margin-top:26px; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--encre2); }
.devise-ligne b { color:var(--or); }

/* formulaire de liste d'attente */
.form-attente { display:flex; gap:10px; max-width:520px; }
.form-attente input[type=email] { flex:1; background:var(--panneau); border:1px solid var(--ligne);
  border-radius:8px; padding:13px 16px; color:var(--encre); font-size:15px; font-family:inherit; }
.form-attente input:focus { outline:none; border-color:var(--accent); }
.pot-de-miel { position:absolute; left:-9999px; opacity:0; }
.note-form { font-size:12.5px; color:var(--encre2); margin-top:10px; }
.msg-form { font-size:14px; margin-top:12px; display:none; }
.msg-form.ok { display:block; color:var(--or); }
.msg-form.err { display:block; color:var(--accent); }

/* ---------------- telephone : la vraie interface, a l'echelle ----------------
   Reproduction fidele de app/mobile.html (peau sombre, tete fusionnee du
   degraissage-v1, vision epinglee, cases carrees, barre des 4 onglets avec les
   icones du jeu A), reduite d'environ 72 % pour entrer dans le cadre. */
.tel { width:300px; margin:0 auto; background:#000; border:1px solid var(--ligne);
  border-radius:38px; padding:12px; box-shadow:var(--ombre), 0 30px 60px rgba(0,0,0,.5); }
.tel-ecran { background:var(--fond); border-radius:28px; overflow:hidden;
  border:1px solid var(--ligne); display:flex; flex-direction:column; }

.app-tete { padding:12px 13px 8px; border-bottom:1px solid var(--ligne); }
.app-tete .rang1 { display:flex; align-items:center; gap:9px; }
.app-burger { display:grid; gap:3.5px; }
.app-burger i { display:block; width:14px; height:2px; background:var(--encre); border-radius:2px; }
.app-marque { font-family:var(--cond); font-weight:800; font-size:11.5px; letter-spacing:.28em; }
.app-jour { margin-left:auto; font-size:8px; font-weight:700; letter-spacing:.14em;
  color:var(--accent); text-transform:uppercase; text-align:right; line-height:1.4; }
.app-vision { padding:6px 0 2px; }
.app-vision b { display:block; color:var(--accent); font-size:6.5px; letter-spacing:.18em;
  text-transform:uppercase; }
.app-vision .vtx { font-size:10px; font-weight:600; line-height:1.4; margin-top:2px; }

.app-corps { flex:1; padding:8px 10px 12px; }

.app-tabbar { display:flex; background:var(--panneau); border-top:1px solid var(--ligne);
  padding:6px 0 9px; }
.app-ong { flex:1; text-align:center; font-size:6.8px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--encre2); }
.app-ong svg { display:block; margin:0 auto 2px; width:16px; height:16px; stroke:currentColor;
  fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.app-ong.actif { color:var(--accent); }

/* ecran du defi */
.anneau { width:106px; height:106px; border-radius:50%; margin:6px auto 4px;
  background:conic-gradient(var(--accent) 0 252deg, var(--pan2) 252deg 360deg);
  display:grid; place-items:center; }
.anneau > div { width:86px; height:86px; border-radius:50%; background:var(--fond);
  display:grid; place-items:center; text-align:center; }
.anneau .n { font-family:var(--cond); font-size:34px; font-weight:800; line-height:.9; }
.anneau .n span { font-size:15px; color:var(--encre2); }
.anneau .s { font-size:6.5px; letter-spacing:.14em; color:var(--encre2);
  text-transform:uppercase; font-weight:700; margin-top:2px; }
.app-stats { display:flex; gap:5px; margin:4px 0 2px; }
.app-stat { flex:1; background:var(--panneau); border:1px solid var(--ligne); border-radius:6px;
  padding:6px 4px; text-align:center; }
.app-stat .k { font-size:6.3px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--encre2); }
.app-stat .v { font-family:var(--cond); font-size:14px; font-weight:800; margin-top:2px; }
.app-stat .v small { font-size:8px; color:var(--encre2); }
.app-sec { font-size:7px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--encre2); margin:9px 2px 5px; display:flex; }
.app-sec span { margin-left:auto; letter-spacing:.04em; color:var(--accent); }
.app-rang { display:flex; align-items:center; gap:8px; background:var(--panneau);
  border:1px solid var(--ligne); padding:8px 10px; margin-bottom:4px; border-radius:5px; }
.app-rang .acase { width:17px; height:17px; border:1.5px solid var(--encre2); border-radius:4px;
  flex-shrink:0; position:relative; opacity:.85; }
.app-rang.x { border-color:var(--accent); }
.app-rang.x .acase { background:var(--accent); border-color:var(--accent); opacity:1; }
.app-rang.x .acase::after { content:""; position:absolute; left:5px; top:2px; width:4px;
  height:8px; border:solid var(--fond); border-width:0 2px 2px 0; transform:rotate(45deg); }
.app-rang .t { flex:1; font-size:10px; font-weight:650; line-height:1.35; }

/* ecran de conversation */
.tel-chat { padding:10px 10px 12px; display:flex; flex-direction:column; gap:7px; flex:1; }
.bulle { max-width:88%; padding:8px 10px; border-radius:11px; font-size:10px; line-height:1.5; }
.bulle.coach { background:var(--panneau); border:1px solid var(--ligne); border-bottom-left-radius:3px; }
.bulle.moi { background:var(--accent-clair); border:1px solid rgba(255,69,48,.35);
  align-self:flex-end; border-bottom-right-radius:3px; }
.bulle.photo { padding:5px; max-width:70%; }
.photo-vraie { display:block; width:100%; height:auto; border-radius:8px; }
.legende-photo { font-size:7px; color:var(--encre2); margin-top:4px; padding:0 2px 2px;
  letter-spacing:.06em; text-transform:uppercase; }
.tel-etape { font-size:7px; letter-spacing:.2em; text-transform:uppercase; color:var(--encre2);
  text-align:center; padding:8px 0 0; font-weight:700; }

/* ecran du journal alimentaire */
.tel-macros { padding:10px 12px 12px; }
.macro-tete { text-align:center; margin-bottom:8px; }
.macro-tete .gros { font-family:var(--cond); font-size:27px; font-weight:800; line-height:1; }
.macro-tete .gros small { font-size:12px; color:var(--encre2); }
.macro-tete .sous { font-size:7px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--encre2); font-weight:700; margin-top:2px; }
.jauge { height:4px; background:var(--pan2); border-radius:3px; overflow:hidden; margin:4px 0 8px; }
.jauge i { display:block; height:100%; background:var(--accent); border-radius:3px; }
.jauge.or i { background:var(--or); }
.macro-ligne { display:flex; justify-content:space-between; font-size:9px; color:var(--encre2);
  margin-top:6px; }
.macro-ligne b { color:var(--encre); }
.tel-aliment { display:flex; justify-content:space-between; gap:8px; padding:7px 9px; margin-top:6px;
  background:var(--panneau); border:1px solid var(--ligne); border-radius:7px; font-size:9px; }
.tel-aliment span { color:var(--encre2); white-space:nowrap; }

/* ---------------- sections ---------------- */
section { padding:76px 0; border-top:1px solid var(--ligne); }
.tete-section { max-width:680px; margin-bottom:44px; }
.tete-section p { margin-top:14px; color:var(--encre2); font-size:17px; }

.grille-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.grille-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.carte { background:var(--panneau); border:1px solid var(--ligne); border-radius:12px;
  padding:26px; }
.carte .num { font-family:var(--cond); font-size:15px; font-weight:800; color:var(--accent);
  letter-spacing:.14em; display:block; margin-bottom:12px; }
.carte h3 { margin-bottom:10px; }
.carte p { font-size:14.5px; color:var(--encre2); }

.deux-col { display:grid; grid-template-columns:1fr 340px; gap:56px; align-items:center; }
.deux-col.inverse { grid-template-columns:340px 1fr; }
.liste-points { list-style:none; margin-top:22px; }
.liste-points li { position:relative; padding:9px 0 9px 30px; font-size:15.5px;
  color:var(--encre2); border-top:1px solid var(--ligne); }
.liste-points li:first-child { border-top:none; }
.liste-points li::before { content:""; position:absolute; left:4px; top:17px; width:9px; height:9px;
  border-radius:2px; background:var(--accent); }
.liste-points li b { color:var(--encre); }

.bande-chiffres { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:44px; }
.chiffre { background:var(--panneau); border:1px solid var(--ligne); border-radius:12px;
  padding:20px 22px; }
.chiffre b { font-family:var(--cond); font-size:34px; font-weight:800; display:block; line-height:1.05; }
.chiffre b span { color:var(--accent); }
.chiffre small { font-size:12px; color:var(--encre2); text-transform:uppercase; letter-spacing:.09em; }

/* securite */
.sec-grille { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.sec-item { background:var(--panneau); border:1px solid var(--ligne); border-radius:12px; padding:22px; }
.sec-item .cle { font-family:var(--cond); font-size:13px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--or); display:block; margin-bottom:8px; }
.sec-item p { font-size:14px; color:var(--encre2); }

/* faq */
.faq details { border:1px solid var(--ligne); border-radius:11px; background:var(--panneau);
  margin-top:12px; overflow:hidden; }
.faq summary { cursor:pointer; padding:18px 22px; font-family:var(--cond); font-weight:800;
  font-size:16px; letter-spacing:.04em; text-transform:uppercase; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:14px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-size:20px; color:var(--accent); flex-shrink:0; }
.faq details[open] summary::after { content:"\2212"; }
.faq details p { padding:0 22px 18px; color:var(--encre2); font-size:15px; }

/* appel final */
.final { text-align:center; padding:90px 0; }
.final .form-attente { margin:30px auto 0; }
.final .note-form, .final .msg-form { text-align:center; }

/* pied */
footer { border-top:1px solid var(--ligne); padding:38px 0; }
footer .contenant { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
footer .devise-pied { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--encre2); }
footer nav { margin-left:auto; display:flex; gap:18px; }
footer a { color:var(--encre2); text-decoration:none; font-size:13px; }
footer a:hover { color:var(--encre); }

/* pages juridiques (confidentialite) */
.juridique { max-width:780px; margin:0 auto; padding:64px 24px 80px; }
.juridique h1 { font-size:clamp(30px,5vw,46px); margin-bottom:10px; }
.juridique .maj { color:var(--encre2); font-size:13.5px; margin-bottom:38px; }
.juridique h2 { font-size:clamp(20px,3vw,25px); margin:40px 0 10px; }
.juridique p, .juridique li { color:var(--encre2); font-size:15.5px; line-height:1.7; margin-bottom:12px; }
.juridique ul { padding-left:22px; margin-bottom:12px; }
.juridique b { color:var(--encre); }
.juridique a { color:var(--encre); }
.juridique .encadre { background:var(--panneau); border:1px solid var(--ligne); border-radius:11px;
  padding:20px 22px; margin:0 0 10px; }

/* revelation au defilement */
.rev { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.rev.vu { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .rev { opacity:1; transform:none; transition:none; }
  .badge-beta i { animation:none; }
}

/* ---------------- adaptation telephone ---------------- */
@media (max-width: 960px) {
  .heros .contenant, .deux-col, .deux-col.inverse { grid-template-columns:1fr; gap:40px; }
  .deux-col.inverse .tel { order:-1; }
  .grille-3, .sec-grille { grid-template-columns:1fr 1fr; }
  .bande-chiffres { grid-template-columns:1fr 1fr; }
  .heros { padding:56px 0 48px; }
  section { padding:56px 0; }
}
@media (max-width: 640px) {
  .nav-liens { display:none; position:absolute; top:64px; left:0; right:0;
    background:var(--fond); border-bottom:1px solid var(--ligne); flex-direction:column;
    gap:0; padding:8px 24px 16px; }
  .nav-liens.ouvert { display:flex; }
  .nav-liens a { padding:11px 0; border-top:1px solid var(--ligne); font-size:15px; }
  .burger { display:block; }
  .entete .bouton { display:none; }
  .entete .contenant { gap:14px; }
  .grille-3, .grille-2, .sec-grille, .bande-chiffres { grid-template-columns:1fr; }
  .form-attente { flex-direction:column; }
  .tel { width:270px; }
}