/* ============================================================================
   MADZ Digitale — Couche « app » pour le web.
   Reprise 1:1 de la maquette de l'application native (v5, 21/08/2026) :
   memes couleurs, meme echelle typographique, memes espacements, memes rayons,
   memes ombres, memes durees. 1px ici = 1 point dans l'app.
   Tout est porte par .app-ui : aucune page non concernee n'est affectee.
   ============================================================================ */
body.app-mode,
body.landing,
.app-ui{
  /* --- Marque --- */
  --orange:#FF6600; --orange-clair:#FF8534; --orange-fonce:#E55B00;
  --vert:#1F9D6A; --rouge:#D23A4B;

  /* --- Typographie : 8 tailles, aucune autre --- */
  --t-micro:11px; --t-legende:13px; --t-sec:15px; --t-corps:17px;
  --t-bloc:20px; --t-section:24px; --t-ecran:28px; --t-grand:34px;

  /* --- Espacement : multiples de 4 --- */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:20px; --e6:24px; --e7:32px; --e8:40px;
  --marge:24px;

  /* --- Rayons --- */
  --r-pt:10px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-rond:999px;

  /* --- Mouvement --- */
  --d-court:120ms; --d-moyen:240ms; --d-long:420ms;
  --ease-app:cubic-bezier(.22,.61,.36,1);

  --display:'Plus Jakarta Sans',system-ui,sans-serif;
  --corps:'DM Sans',system-ui,sans-serif;

  /* --- Theme jour : colonne « Main » de la charte --- */
  --s-bg:#FFFFFF; --s-bg2:#F6F4F1; --s-txt:#181817; --s-dim:#6A6A64; --s-mute:#6E6E68;
  --s-glass:rgba(246,244,241,.82); --s-glass-bd:#DDDBD8;
  --s-line:#DDDBD8; --s-input:#FFFFFF; --s-input-bd:#DDDBD8;
  --s-nav:rgba(255,255,255,.86); --s-nav-bd:#DDDBD8;
  --halo:.20; --s-skel:rgba(24,24,23,.07);
}
/* --- Theme nuit : colonne « Alt », suit le theme du site --- */
:root[data-theme="dark"] body.app-mode,
:root[data-theme="dark"] body.landing,
:root[data-theme="dark"] .app-ui{
  --s-bg:#131211; --s-bg2:#1C1A19; --s-txt:#FBFAF7; --s-dim:#A29E96; --s-mute:#948F86;
  --s-glass:rgba(255,255,255,.055); --s-glass-bd:rgba(255,255,255,.09);
  --s-line:#38352F; --s-input:#232120; --s-input-bd:#38352F;
  --s-nav:rgba(19,18,17,.86); --s-nav-bd:rgba(255,255,255,.10);
  --halo:.42; --s-skel:rgba(255,255,255,.07);
}

/* ===================== Ecran =====================
   Attention : ne jamais poser .app-ui sur un element en position fixed
   (barre flottante, toast). Il deviendrait un bloc de 100vh a fond opaque
   qui recouvrirait tout l'ecran. Les variables viennent de body.app-mode. */
.app-ui{
  position:relative; max-width:430px; margin:0 auto; min-height:100vh;
  background:var(--s-bg); color:var(--s-txt); font-family:var(--corps);
  padding-bottom:124px;
  /* clip et non hidden : avec hidden, le navigateur bascule overflow-y en auto
     et le conteneur rogne AUSSI verticalement — l'ombre portee de la carte
     etait tranchee net, ce qui dessinait un bord visible. */
  overflow-x:clip;
}
/* Le fond de l'ecran deborde proprement derriere la zone centrale (grand ecran). */
body.app-mode{background:var(--s-bg); color:var(--s-txt)}
.app-ui .halo{
  position:absolute; top:-120px; left:50%; transform:translateX(-50%);
  width:560px; height:440px; pointer-events:none; z-index:0;
  background:radial-gradient(closest-side,rgba(255,102,0,var(--halo)),rgba(255,102,0,calc(var(--halo)*.24)) 55%,transparent 78%);
  filter:blur(8px);
}
.app-ui > *:not(.halo){position:relative; z-index:10}

/* ===================== En-tete d'ecran ===================== */
.ap-hd{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--e4); padding:var(--e5) var(--marge) 0}
.ap-hd h1{font-family:var(--display); font-weight:800; font-size:var(--t-grand); letter-spacing:-.035em; margin:0; color:var(--s-txt); line-height:1.06}
.ap-hd h1.petit{font-size:var(--t-ecran)}
/* Accueil : le titre n'est qu'un reperage, la carte est le sujet de l'ecran.
   Il reste donc discret, a l'echelle d'un intitule de section. */
.ap-hd h1.mini{font-size:var(--t-sec); font-weight:700; letter-spacing:-.01em; color:var(--s-txt)}
.ap-hd .kick{font-family:var(--display); font-weight:700; font-size:var(--t-micro); letter-spacing:.14em; text-transform:uppercase; color:var(--s-mute)}
.ap-hd .sub{font-size:var(--t-legende); color:var(--s-mute); margin-top:var(--e1)}
/* Ecran secondaire (fleche de retour + titre) : centre verticalement sur mobile.
   Regle en CSS et non en style en ligne, sinon la mise en page bureau ne peut
   plus la reprendre. */
.ap-hd:not(:has(.ap-ava)){align-items:center}
.ap-ava{
  width:44px; height:44px; border-radius:50%; flex:none; text-decoration:none; overflow:hidden;
  background:linear-gradient(150deg,var(--orange-clair),var(--orange-fonce)); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:800; font-size:var(--t-corps);
  box-shadow:0 8px 22px rgba(255,102,0,.36);
}
.ap-ava img{width:100%; height:100%; object-fit:cover}
.ap-tap{
  width:44px; height:44px; border-radius:50%; flex:none; cursor:pointer;
  background:var(--s-glass); border:1px solid var(--s-glass-bd); color:var(--s-txt);
  display:flex; align-items:center; justify-content:center;
}
.ap-tap svg{width:20px; height:20px}

/* ===================== La carte ===================== */
.ap-stage{padding:var(--e6) var(--marge) 0}
.ap-kard{
  position:relative; border-radius:var(--r-lg); aspect-ratio:1.62/1; overflow:hidden;
  background:linear-gradient(158deg,#2A2724 0%,#131211 46%,#0A0908 100%);
  box-shadow:0 30px 60px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.09), inset 0 1px 0 rgba(255,255,255,.14);
  padding:var(--e5) var(--e6); display:flex; flex-direction:column; justify-content:space-between;
  text-decoration:none;
}
.ap-kard::after{
  content:""; position:absolute; top:-60%; left:-25%; width:70%; height:220%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.13) 42%,rgba(255,255,255,.03) 60%,transparent);
  transform:rotate(14deg); pointer-events:none;
}
.ap-kard .bd{font-family:var(--display); font-weight:800; font-size:var(--t-legende); color:#fff; position:relative; z-index:2}
.ap-kard .bd i{color:var(--orange); font-style:normal}
.ap-idt{display:flex; align-items:center; gap:var(--e4); position:relative; z-index:2; min-width:0}
.ap-idt .ph{
  width:66px; height:66px; border-radius:50%; flex:none; overflow:hidden;
  background:linear-gradient(145deg,var(--orange-clair),var(--orange-fonce)); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:800; font-size:var(--t-section);
  box-shadow:0 0 0 3px rgba(255,255,255,.16), 0 10px 24px rgba(255,102,0,.3);
}
.ap-idt .ph img{width:100%; height:100%; object-fit:cover}
.ap-idt .ph.vide{background:rgba(255,255,255,.07); border:1.5px dashed rgba(255,255,255,.3); box-shadow:none; color:#8A857E}
.ap-idt .ph.vide svg{width:26px; height:26px}
.ap-idt .nm{font-family:var(--display); font-weight:700; font-size:var(--t-bloc); letter-spacing:-.028em; color:#fff; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ap-idt .nm.fantome{color:#6E6A63}
.ap-idt .rl{font-size:var(--t-legende); color:#9A958C; margin-top:var(--e1); line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ap-kard .ft{
  display:flex; align-items:center; justify-content:space-between; gap:var(--e3); position:relative; z-index:2;
  font-family:var(--display); font-weight:600; font-size:var(--t-micro); letter-spacing:.06em; text-transform:uppercase; color:#6E6A63;
}
.ap-kard .ft > span:first-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.ap-kard .ft .nfc{display:flex; align-items:center; gap:var(--e1); color:var(--orange); flex:none}
.ap-kard .ft svg{width:15px; height:15px}
.ap-hint{text-align:center; font-size:var(--t-legende); color:var(--s-mute); margin:var(--e4) 0 0; font-family:var(--display); font-weight:600}

/* ===================== Tuiles en verre ===================== */
.ap-acts{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--e3); padding:var(--e5) var(--marge) 0}
.ap-ga{
  background:var(--s-glass); border:1px solid var(--s-glass-bd);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-radius:var(--r-md); min-height:76px; padding:var(--e3) var(--e2);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--e2);
  font-family:var(--display); font-weight:600; font-size:var(--t-legende); color:var(--s-dim);
  text-align:center; text-decoration:none; cursor:pointer;
  transition:transform var(--d-court) var(--ease-app), border-color var(--d-court) var(--ease-app);
}
.ap-ga:active{transform:scale(.97)}
.ap-ga:hover{border-color:var(--orange)}
.ap-ga svg{width:22px; height:22px; color:var(--orange-clair)}

/* ===================== Statistique vivante ===================== */
.ap-pulse{
  margin:var(--e5) var(--marge) 0; display:flex; align-items:center; gap:var(--e4);
  padding:var(--e4) var(--e5); border-radius:var(--r-md); text-decoration:none;
  background:linear-gradient(120deg,rgba(255,102,0,.16),rgba(255,102,0,.04));
  border:1px solid rgba(255,102,0,.22);
}
.ap-pulse .big{font-family:var(--display); font-weight:800; font-size:var(--t-ecran); color:var(--s-txt); letter-spacing:-.03em; line-height:1}
.ap-pulse .lbl{font-size:var(--t-legende); color:var(--s-dim); line-height:1.35; margin-top:2px}
.ap-pulse .spark{margin-left:auto; display:flex; align-items:flex-end; gap:4px; height:38px}
.ap-pulse .spark i{width:7px; border-radius:3px; background:var(--orange); opacity:.5}
.ap-pulse .spark i:last-child{opacity:1}

/* ===================== Progression ===================== */
.ap-prog{margin:var(--e5) var(--marge) 0; background:var(--s-glass); border:1px solid var(--s-glass-bd); border-radius:var(--r-md); padding:var(--e4) var(--e5)}
.ap-prog .top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:var(--e3)}
.ap-prog b{font-family:var(--display); font-weight:700; font-size:var(--t-sec); color:var(--s-txt)}
.ap-prog .pc{font-family:var(--display); font-weight:800; font-size:var(--t-sec); color:var(--orange)}
.ap-bar{height:7px; background:var(--s-line); border-radius:var(--r-rond); overflow:hidden}
.ap-bar i{display:block; height:100%; background:linear-gradient(90deg,var(--orange-clair),var(--orange)); border-radius:var(--r-rond)}
.ap-prog p{margin:var(--e3) 0 0; font-size:var(--t-legende); color:var(--s-dim); line-height:1.45}
.ap-prog .todo{display:flex; gap:var(--e2); margin-top:var(--e4); flex-wrap:wrap}
.ap-prog .todo a{
  font-family:var(--display); font-weight:600; font-size:var(--t-legende); color:var(--orange); white-space:nowrap; text-decoration:none;
  border:1px solid rgba(255,102,0,.3); background:rgba(255,102,0,.09); border-radius:var(--r-rond);
  padding:var(--e2) var(--e3); min-height:34px; display:flex; align-items:center;
}

/* ===================== Navigation flottante ===================== */
.ap-navf{
  position:fixed; left:50%; transform:translateX(-50%); bottom:22px; z-index:50;
  width:min(430px,100vw); padding:0 var(--marge); pointer-events:none;
}
.ap-navf-in{
  height:76px; border-radius:var(--r-rond);
  background:var(--s-nav); border:1px solid var(--s-nav-bd);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  box-shadow:0 20px 46px rgba(0,0,0,.34);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 var(--e7);
  pointer-events:auto;
}
.ap-navf .nb{
  display:flex; flex-direction:column; align-items:center; gap:var(--e1); text-decoration:none;
  font-family:var(--display); font-size:var(--t-micro); font-weight:600; color:var(--s-mute); min-width:44px;
}
.ap-navf .nb.on{color:var(--s-txt)}
.ap-navf .nb svg{width:24px; height:24px}
.ap-navf .mid{
  width:64px; height:64px; border-radius:50%; border:0; cursor:pointer; text-decoration:none;
  background:linear-gradient(150deg,var(--orange-clair),var(--orange-fonce)); color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 14px 32px rgba(255,102,0,.46);
}
.ap-navf .mid svg{width:27px; height:27px}

/* ===================== Formulaires ===================== */
.ap-fld{margin:0 var(--marge) var(--e3)}
.ap-fld label{display:block; font-family:var(--display); font-weight:600; font-size:var(--t-legende); color:var(--s-mute); margin-bottom:var(--e2)}
.ap-inp{
  width:100%; background:var(--s-input); border:1px solid var(--s-input-bd); border-radius:var(--r-pt);
  padding:var(--e3) var(--e4); font-size:var(--t-corps); font-family:var(--corps); color:var(--s-txt);
  min-height:52px; display:flex; align-items:center; gap:var(--e3);
  transition:border-color var(--d-court) var(--ease-app), box-shadow var(--d-court) var(--ease-app);
}
.ap-inp::placeholder{color:var(--s-mute)}
.ap-inp:focus{outline:0; border-color:var(--orange); box-shadow:0 0 0 4px rgba(255,102,0,.16)}
.ap-inp.err{border-color:var(--rouge); box-shadow:0 0 0 4px rgba(210,58,75,.16)}
textarea.ap-inp{min-height:120px; align-items:flex-start; line-height:1.55; resize:vertical}
.ap-help{font-size:var(--t-legende); color:var(--s-mute); margin:var(--e2) 0 0; line-height:1.45}
.ap-help.err{color:var(--rouge); display:flex; align-items:center; gap:var(--e2)}
.ap-help.err svg{width:15px; height:15px; flex:none}
.ap-swrow{
  margin:0 var(--marge) var(--e3); display:flex; align-items:center; justify-content:space-between; gap:var(--e4);
  background:var(--s-glass); border:1px solid var(--s-glass-bd); border-radius:var(--r-pt); padding:var(--e3) var(--e4); min-height:60px;
}
.ap-swrow .l{font-family:var(--display); font-weight:600; font-size:var(--t-sec); color:var(--s-txt)}
.ap-swrow .s{font-size:var(--t-legende); color:var(--s-dim); margin-top:2px; line-height:1.4}
/* Visuel de 52x32 (maquette), mais zone tactile portee a 44 (regle Apple)
   grace a une surface transparente centree sur l'interrupteur. */
.ap-tog{width:52px; height:32px; border-radius:var(--r-rond); background:var(--orange); position:relative; flex:none; border:0; cursor:pointer; box-shadow:0 4px 14px rgba(255,102,0,.36)}
.ap-tog::before{content:""; position:absolute; left:0; right:0; top:50%; height:44px; transform:translateY(-50%)}
.ap-tog::after{content:""; position:absolute; top:3px; right:3px; width:26px; height:26px; border-radius:50%; background:#fff}
.ap-tog.off{background:var(--s-line); box-shadow:none}
.ap-tog.off::after{right:auto; left:3px; background:var(--s-mute)}

/* ===================== Boutons : 56 de haut ===================== */
.ap-btn{
  display:flex; align-items:center; justify-content:center; gap:var(--e3); border:0; cursor:pointer;
  border-radius:var(--r-rond); min-height:56px; padding:var(--e4); width:100%; text-decoration:none;
  font-family:var(--display); font-weight:700; font-size:var(--t-corps);
  transition:transform var(--d-court) var(--ease-app), opacity var(--d-court) var(--ease-app);
}
.ap-btn:active{transform:scale(.985)}
.ap-btn-p{background:linear-gradient(150deg,var(--orange-clair),var(--orange-fonce)); color:#fff; box-shadow:0 14px 32px rgba(255,102,0,.4)}
.ap-btn-g{background:var(--s-glass); border:1px solid var(--s-glass-bd); color:var(--s-txt)}
.ap-btn-d{background:transparent; border:1px solid rgba(210,58,75,.4); color:#e2566a}
.ap-btn svg{width:20px; height:20px}
.ap-stick{padding:var(--e4) var(--marge) var(--e6)}

/* ===================== Listes ===================== */
.ap-sect{font-family:var(--display); font-weight:700; font-size:var(--t-micro); letter-spacing:.13em; text-transform:uppercase; color:var(--s-mute); margin:var(--e5) var(--marge) var(--e3)}
.ap-li{
  display:flex; align-items:center; gap:var(--e4); padding:var(--e3) var(--marge); min-height:60px;
  border-bottom:1px solid var(--s-line); text-decoration:none;
  font-family:var(--display); font-weight:600; font-size:var(--t-corps); color:var(--s-txt);
}
.ap-li:last-child{border-bottom:0}
.ap-li .ic{
  width:40px; height:40px; border-radius:var(--r-pt); flex:none;
  background:var(--s-glass); border:1px solid var(--s-glass-bd);
  display:flex; align-items:center; justify-content:center; color:var(--s-dim);
}
.ap-li .ic svg{width:20px; height:20px}
.ap-li .ch{margin-left:auto; color:var(--s-mute); flex:none; display:flex}
.ap-li .ch svg{width:19px; height:19px}
.ap-li .val{margin-left:auto; font-family:var(--display); font-weight:700; font-size:var(--t-sec); color:var(--orange); flex:none}
.ap-li.danger{color:#e2566a}
.ap-cardbox{margin:0 var(--marge); background:var(--s-glass); border:1px solid var(--s-glass-bd); border-radius:var(--r-md); padding:var(--e5)}
.ap-cardbox h4{font-family:var(--display); font-weight:700; font-size:var(--t-corps); color:var(--s-txt); margin:0 0 var(--e2)}
.ap-cardbox p{margin:0 0 var(--e4); font-size:var(--t-legende); color:var(--s-dim); line-height:1.5}

/* ===================== Supports NFC ===================== */
.ap-sup{
  display:flex; align-items:center; gap:var(--e4); padding:var(--e3) var(--e4); min-height:64px; border-radius:var(--r-pt);
  background:var(--s-glass); border:1px solid var(--s-glass-bd); margin:0 var(--marge) var(--e3);
}
.ap-sup .mini{width:48px; height:31px; border-radius:6px; flex:none; background:linear-gradient(150deg,#2B2825,#0D0C0B); border:1px solid rgba(255,255,255,.12)}
.ap-sup .mini.blanc{background:linear-gradient(150deg,#FFFFFF,#E4E0D9); border-color:rgba(24,24,23,.12)}
.ap-sup > div{min-width:0}
.ap-sup b{display:block; font-family:var(--display); font-weight:700; font-size:var(--t-sec); color:var(--s-txt); white-space:nowrap}
.ap-sup span{display:block; font-size:var(--t-legende); color:var(--s-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ap-st{
  margin-left:auto; flex:none; font-family:var(--display); font-weight:700; font-size:var(--t-micro); letter-spacing:.04em; text-transform:uppercase;
  padding:var(--e1) var(--e3); border-radius:var(--r-rond); background:rgba(31,157,106,.16); color:#3ec48b;
}
.ap-st.attente{background:rgba(255,102,0,.14); color:var(--orange-clair)}

/* ===================== Liens du profil ===================== */
.ap-lnkrow{
  display:flex; align-items:center; gap:var(--e3); margin:0 var(--marge) var(--e3); padding:var(--e3) var(--e4); min-height:64px;
  border-radius:var(--r-pt); background:var(--s-glass); border:1px solid var(--s-glass-bd);
}
.ap-lnkrow .ic{width:40px; height:40px; border-radius:var(--r-pt); flex:none; background:var(--s-bg2); display:flex; align-items:center; justify-content:center; color:var(--s-txt)}
.ap-lnkrow .ic svg{width:20px; height:20px}
.ap-lnkrow > div{min-width:0}
.ap-lnkrow b{display:block; font-family:var(--display); font-weight:700; font-size:var(--t-sec); color:var(--s-txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ap-lnkrow span{font-size:var(--t-legende); color:var(--s-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block}
.ap-lnkrow .grip{margin-left:auto; color:var(--s-mute); flex:none; width:44px; height:44px; display:flex; align-items:center; justify-content:center}
.ap-lnkrow .grip svg{width:20px; height:20px}
.ap-addl{
  margin:0 var(--marge); border:1px dashed var(--s-glass-bd); border-radius:var(--r-pt); padding:var(--e4); min-height:56px; text-align:center;
  font-family:var(--display); font-weight:600; font-size:var(--t-sec); color:var(--orange); display:flex; align-items:center; justify-content:center; text-decoration:none; cursor:pointer; background:transparent; width:calc(100% - 2*var(--marge));
}
.ap-slugbox{margin:0 var(--marge); padding:var(--e4) var(--e5); border-radius:var(--r-pt); background:var(--s-glass); border:1px solid var(--s-glass-bd)}
.ap-slugbox .u{display:flex; align-items:baseline; gap:1px; font-size:var(--t-corps); flex-wrap:wrap}
.ap-slugbox .u .dom{color:var(--s-mute)}
.ap-slugbox .u .sl{font-family:var(--display); font-weight:700; color:var(--orange)}

/* ===================== Etats : bandeaux, toast, squelettes ===================== */
.ap-bandeau{
  margin:0 var(--marge) var(--e4); display:flex; align-items:center; gap:var(--e3); padding:var(--e3) var(--e4); min-height:52px;
  border-radius:var(--r-pt); font-family:var(--display); font-weight:600; font-size:var(--t-legende); line-height:1.35;
}
.ap-bandeau svg{width:20px; height:20px; flex:none}
.ap-bandeau.info{background:rgba(255,102,0,.12); border:1px solid rgba(255,102,0,.28); color:var(--orange-clair)}
.ap-bandeau.grave{background:rgba(210,58,75,.12); border:1px solid rgba(210,58,75,.3); color:#e2566a}
.ap-toast{
  position:fixed; left:50%; transform:translateX(-50%); bottom:118px; z-index:55;
  width:min(430px,100vw); padding:0 var(--marge);
}
.ap-toast-in{
  display:flex; align-items:center; gap:var(--e3); padding:var(--e4); min-height:56px; border-radius:var(--r-pt);
  background:rgba(31,157,106,.16); border:1px solid rgba(31,157,106,.34);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  font-family:var(--display); font-weight:700; font-size:var(--t-sec); color:#3ec48b; box-shadow:0 18px 40px rgba(0,0,0,.4);
}
.ap-toast svg{width:20px; height:20px; flex:none}
.ap-skel{background:var(--s-skel); border-radius:8px}

/* ===================== Ecran centre : succes, messages ===================== */
.ap-centre{display:flex; flex-direction:column; align-items:center; justify-content:center; padding:var(--e7) var(--e6); text-align:center; min-height:70vh}
.ap-centre .rond{
  width:112px; height:112px; border-radius:50%; background:linear-gradient(150deg,var(--orange-clair),var(--orange-fonce));
  display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 24px 54px rgba(255,102,0,.46); margin-bottom:var(--e7);
}
.ap-centre .rond svg{width:52px; height:52px}
.ap-centre .rond.calme{background:var(--s-glass); border:1px solid var(--s-glass-bd); color:var(--orange); box-shadow:none}
.ap-centre .rond.mauvais{background:linear-gradient(150deg,#e2566a,#b82f42); box-shadow:0 24px 54px rgba(210,58,75,.4)}
.ap-centre h2{font-family:var(--display); font-weight:800; font-size:var(--t-ecran); letter-spacing:-.03em; margin:0 0 var(--e3); color:var(--s-txt)}
.ap-centre p{margin:0; font-size:var(--t-sec); color:var(--s-dim); line-height:1.6; max-width:32ch}
.ap-centre .mail{font-family:var(--display); font-weight:700; color:var(--orange); font-size:var(--t-sec); margin-top:var(--e2)}
.ap-centre .num{
  margin-top:var(--e6); font-family:var(--display); font-weight:700; font-size:var(--t-legende); letter-spacing:.1em; color:var(--s-mute);
  border:1px dashed var(--s-glass-bd); border-radius:var(--r-rond); padding:var(--e3) var(--e5);
}

/* ===================== Connexion / inscription ===================== */
.ap-auth{display:flex; flex-direction:column; padding:var(--e4) var(--e7) 0}
.ap-auth .logo{font-family:var(--display); font-weight:800; font-size:var(--t-bloc); color:var(--s-txt); text-align:center}
.ap-auth .logo i{color:var(--orange); font-style:normal}
.ap-authcard{
  width:210px; aspect-ratio:1.62/1; border-radius:var(--r-md); margin:var(--e5) auto var(--e7); transform:rotate(-7deg);
  background:linear-gradient(158deg,#2A2724,#0A0908); padding:var(--e3) var(--e4);
  display:flex; flex-direction:column; justify-content:space-between;
  box-shadow:0 28px 56px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.08);
}
.ap-authcard .b{font-family:var(--display); font-weight:800; font-size:var(--t-micro); color:#fff}
.ap-authcard .b i{color:var(--orange); font-style:normal}
.ap-authcard .ln{height:7px; border-radius:var(--r-rond); background:rgba(255,255,255,.15)}
.ap-authcard .ln.s{width:52%; margin-top:var(--e2); background:rgba(255,255,255,.08)}
.ap-auth h2{font-family:var(--display); font-weight:800; font-size:var(--t-ecran); letter-spacing:-.035em; margin:0 0 var(--e2); color:var(--s-txt); line-height:1.12}
.ap-auth .sub{font-size:var(--t-sec); color:var(--s-dim); margin:0 0 var(--e5); line-height:1.45}
.ap-auth .ap-fld{margin-left:0; margin-right:0}
.ap-auth .row{display:flex; align-items:center; justify-content:space-between; gap:var(--e3); margin:var(--e2) 0 var(--e5); font-size:var(--t-sec); min-height:44px}
.ap-auth .row a{color:var(--orange); font-family:var(--display); font-weight:600; text-decoration:none}
.ap-auth .end{text-align:center; margin-top:var(--e5); font-size:var(--t-sec); color:var(--s-dim)}
.ap-auth .end a{color:var(--orange); font-family:var(--display); font-weight:700; text-decoration:none}
.ap-offers{display:flex; flex-direction:column; gap:var(--e2); margin-bottom:var(--e5)}
.ap-offer{display:flex; align-items:center; gap:var(--e3); padding:var(--e3) var(--e4); min-height:64px; border-radius:var(--r-pt); background:var(--s-input); border:1px solid var(--s-input-bd); cursor:pointer}
.ap-offer.on{border-color:var(--orange); background:rgba(255,102,0,.10)}
.ap-offer .rd{width:22px; height:22px; border-radius:50%; border:2px solid var(--s-mute); flex:none}
.ap-offer.on .rd{border-color:var(--orange); border-width:7px}
.ap-offer > div{min-width:0}
.ap-offer b{display:block; font-family:var(--display); font-weight:700; font-size:var(--t-sec); color:var(--s-txt)}
.ap-offer span{font-size:var(--t-legende); color:var(--s-dim)}
.ap-offer .pr{margin-left:auto; font-family:var(--display); font-weight:800; font-size:var(--t-corps); color:var(--s-txt); flex:none}
.ap-offer input{position:absolute; opacity:0; pointer-events:none}

/* ===================== Ecran de partage : toujours blanc =====================
   Colonne flex qui remplit l'ecran : le QR est centre, le pied reste en bas,
   et rien ne se chevauche meme sur un petit ecran (le contenu defile).
   Ce bloc ne doit PAS etre place dans .app-ui : la regle .app-ui > * y
   imposerait position:relative et casserait le plein ecran. */
.ap-share{
  position:fixed; inset:0; z-index:100; overflow-y:auto;
  background:var(--s-bg); color:var(--s-txt);
  display:flex; flex-direction:column;
  padding:calc(var(--e8) + env(safe-area-inset-top,0px)) var(--e6) calc(var(--e6) + env(safe-area-inset-bottom,0px));
}
.ap-share .lum{
  position:absolute; top:calc(18px + env(safe-area-inset-top,0px)); left:var(--marge);
  display:flex; align-items:center; gap:var(--e2);
  font-family:var(--display); font-weight:600; font-size:var(--t-legende); color:var(--s-mute);
}
.ap-share .lum svg{width:16px; height:16px; color:var(--orange)}
.ap-share .x{
  position:absolute; top:calc(14px + env(safe-area-inset-top,0px)); right:var(--marge);
  width:44px; height:44px; cursor:pointer; border-radius:50%;
  background:rgba(255,102,0,.12); border:1px solid rgba(255,102,0,.26); color:var(--orange,#FF6600);
  display:flex; align-items:center; justify-content:center;
}
.ap-share .x svg{width:19px; height:19px}

/* Zone centrale : QR + identite, centres verticalement */
.ap-share-mid{
  flex:1; min-height:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:var(--e5); padding:var(--e6) 0;
}
/* Enveloppe du QR : halo orange + viseur, le code lui-meme reste blanc pur. */
.ap-share .qrwrap{position:relative; display:flex; flex-direction:column; align-items:center; gap:var(--e4)}
.ap-share .qr-halo{
  position:absolute; left:50%; top:44%; transform:translate(-50%,-50%);
  width:132%; aspect-ratio:1; border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(closest-side, rgba(255,102,0,.26), rgba(255,102,0,.08) 58%, transparent 74%);
  filter:blur(6px); animation:qrHalo 3.6s var(--ease,ease-in-out) infinite;
}
\@keyframes qrHalo{
  0%,100%{transform:translate(-50%,-50%) scale(1);    opacity:.85}
  50%    {transform:translate(-50%,-50%) scale(1.07); opacity:1}
}
.ap-share .qrbox{
  position:relative; z-index:1;
  /* 32px : marge blanche assez large pour loger le viseur SANS mordre sur le
     code (les equerres occupent 6 -> 30px depuis le bord). */
  padding:32px; border-radius:var(--r-xl); background:#fff;
  box-shadow:0 26px 60px rgba(255,102,0,.20), 0 10px 26px rgba(24,24,23,.10), 0 0 0 1px rgba(255,102,0,.16);
}
/* Viseur : quatre equerres orange aux angles du cadre. Purement decoratif,
   il ne recouvre jamais le code (il est pose sur la marge blanche). */
.ap-share .qrbox .cr{
  position:absolute; width:24px; height:24px; border:3px solid var(--orange,#FF6600); border-radius:4px;
}
.ap-share .qrbox .cr.tl{top:6px;    left:6px;   border-right:0; border-bottom:0; border-radius:8px 0 0 0}
.ap-share .qrbox .cr.tr{top:6px;    right:6px; border-left:0;  border-bottom:0; border-radius:0 8px 0 0}
.ap-share .qrbox .cr.bl{bottom:6px; left:6px;   border-right:0; border-top:0;    border-radius:0 0 0 8px}
.ap-share .qrbox .cr.br{bottom:6px; right:6px; border-left:0;  border-top:0;    border-radius:0 0 8px 0}
/* Pastille de marque sous le code */
.ap-share .qr-tag{
  position:relative; z-index:1;
  font-family:var(--display); font-weight:800; font-size:var(--t-legende); letter-spacing:-.02em;
  color:var(--s-mute); padding:6px 14px; border-radius:var(--r-rond);
  background:rgba(255,102,0,.07); border:1px solid rgba(255,102,0,.18);
}
.ap-share .qr-tag i{font-style:normal; color:var(--orange,#FF6600)}
/* 236 = valeur de la maquette. Le repli tient compte des marges de l'ecran
   et du cadre blanc : 24 de chaque cote, deux fois. */
.ap-share .qrbox img{display:block; width:236px; height:236px; max-width:calc(100vw - 96px); max-height:calc(100vw - 96px)}
.ap-share .who{text-align:center; display:flex; flex-direction:column; align-items:center; gap:var(--e1)}
.ap-share .who .kick{
  font-family:var(--display); font-weight:700; font-size:var(--t-micro);
  letter-spacing:.16em; text-transform:uppercase; color:var(--orange,#FF6600); margin-bottom:2px;
}
.ap-share .nm{font-family:var(--display); font-weight:800; font-size:var(--t-ecran); letter-spacing:-.03em}
.ap-share .rl{font-size:var(--t-sec); color:var(--s-dim); margin-top:var(--e1)}

/* Pied : bouton principal, repli NFC, telechargements */
.ap-share .foot{flex:none; width:100%; max-width:382px; margin:0 auto}
.ap-share .bt{
  border-radius:var(--r-rond); min-height:56px; padding:var(--e4); border:0; width:100%; cursor:pointer;
  font-family:var(--display); font-weight:700; font-size:var(--t-corps);
  background:linear-gradient(135deg, var(--orange-clair,#FF8A33), var(--orange-fonce,#FF6600));
  color:#fff; display:flex; align-items:center; justify-content:center; gap:var(--e3);
  box-shadow:0 14px 30px rgba(255,102,0,.34);
  transition:transform .16s ease, box-shadow .16s ease;
}
.ap-share .bt:active{transform:translateY(2px); box-shadow:0 8px 18px rgba(255,102,0,.30)}
.ap-share .bt svg{width:20px; height:20px}
.ap-share .alt{
  text-align:center; font-size:var(--t-legende); color:var(--s-mute); margin:var(--e4) 0 0;
  display:flex; align-items:center; justify-content:center; gap:var(--e2); line-height:1.4;
}
.ap-share .alt svg{width:16px; height:16px; color:var(--orange); flex:none}
/* Ecran court : on arrete de centrer, on laisse defiler proprement */
@media (max-height:640px){
  .ap-share-mid{justify-content:flex-start}
  .ap-share .qrbox img{width:180px; height:180px}
  .ap-share .qrbox{padding:24px}
  .ap-share .qrbox .cr{width:18px; height:18px}
}
/* Le halo pulse est purement decoratif : on le fige si l'utilisateur a demande
   moins d'animations. */
@media (prefers-reduced-motion:reduce){
  .ap-share .qr-halo{animation:none}
}

/* Les ecrans « app » n'affichent pas le chrome du site */
/* Les ecrans « app » masquent la navigation du site, mais PAS le pied de page :
   il porte les mentions legales, les CGU/CGV, la confidentialite et le lien
   vers madzdigitale.com, qui doivent rester accessibles partout. */
body.app-mode .nav, body.app-mode .botnav, body.app-mode .pwa-banner, body.app-mode .ast-fab{display:none !important}
/* Pied de page compact sous l'ecran, degage de la barre flottante. */
body.app-mode .footer{margin-top:var(--e7); padding-bottom:calc(124px + env(safe-area-inset-bottom,0px))}
body.app-mode .footer .footer-inner{display:none}          /* colonnes marketing : inutiles ici */
body.app-mode .footer .footer-bottom{flex-direction:column; gap:var(--e3); text-align:center; border-top:0}
body.app-mode .main{max-width:none; padding:0; margin:0}
@media (prefers-reduced-motion:reduce){ .app-ui *{transition:none !important; animation:none !important} }

/* Champ telephone existant (phone_field) mis aux normes de la maquette : .inp-row */
.app-ui .phone-group{display:flex; gap:var(--e3)}
.app-ui .phone-group .phone-cc{
  flex:none; width:104px; text-align:center;
  background:var(--s-input); border:1px solid var(--s-input-bd); border-radius:var(--r-pt);
  min-height:52px; padding:var(--e3); font-family:var(--corps); font-size:var(--t-sec); color:var(--s-txt);
}
.app-ui .phone-group .phone-num{
  flex:1; min-width:0;
  background:var(--s-input); border:1px solid var(--s-input-bd); border-radius:var(--r-pt);
  min-height:52px; padding:var(--e3) var(--e4); font-family:var(--corps); font-size:var(--t-corps); color:var(--s-txt);
}
.app-ui .phone-group .phone-cc:focus,
.app-ui .phone-group .phone-num:focus{outline:0; border-color:var(--orange); box-shadow:0 0 0 4px rgba(255,102,0,.16)}
/* Fichier (photo, logo) dans le langage de l'app */
.app-ui input[type=file].ap-inp{padding:var(--e3) var(--e4); font-size:var(--t-sec); color:var(--s-dim)}

/* Recapitulatif (abonnement) */
.ap-recap .r{display:flex; justify-content:space-between; gap:var(--e3); font-size:var(--t-sec); color:var(--s-dim); padding:var(--e2) 0}
.ap-recap .r.tot{border-top:1px solid var(--s-line); margin-top:var(--e2); padding-top:var(--e3); color:var(--s-txt); font-family:var(--display); font-weight:800; font-size:var(--t-bloc)}

/* ===================== Statistiques ===================== */
.ap-chart{margin:var(--e5) var(--marge) 0; padding:var(--e5); border-radius:var(--r-md); background:var(--s-glass); border:1px solid var(--s-glass-bd)}
.ap-chart .bars{display:flex; align-items:flex-end; gap:var(--e2); height:132px; margin-bottom:var(--e3)}
.ap-chart .bars i{flex:1; border-radius:5px 5px 3px 3px; background:linear-gradient(180deg,var(--orange-clair),rgba(255,102,0,.28))}
.ap-chart .bars i.on{background:linear-gradient(180deg,#FFA35E,var(--orange))}
.ap-chart .days{display:flex; gap:var(--e2); font-family:var(--display); font-weight:600; font-size:var(--t-micro); color:var(--s-mute)}
.ap-chart .days span{flex:1; text-align:center}
.ap-kpis{display:grid; grid-template-columns:1fr 1fr; gap:var(--e3); margin:var(--e4) var(--marge) 0}
.ap-kpi{background:var(--s-glass); border:1px solid var(--s-glass-bd); border-radius:var(--r-md); padding:var(--e4)}
.ap-kpi b{display:block; font-family:var(--display); font-weight:800; font-size:var(--t-ecran); color:var(--s-txt); letter-spacing:-.03em}
.ap-kpi span{display:block; font-size:var(--t-legende); color:var(--s-dim); margin-top:var(--e1); line-height:1.35}

/* ===================== Choix de modele et quantite ===================== */
.ap-models{display:flex; gap:var(--e3); margin:0 var(--marge)}
.ap-model{
  flex:1; border:1px solid var(--s-glass-bd); background:var(--s-glass); border-radius:var(--r-md); padding:var(--e3);
  text-align:center; cursor:pointer;
  font-family:var(--display); font-weight:600; font-size:var(--t-legende); color:var(--s-dim);
}
.ap-model.on{border-color:var(--orange); background:rgba(255,102,0,.10); color:var(--s-txt)}
.ap-model .vis{height:58px; border-radius:8px; margin-bottom:var(--e3); background:linear-gradient(150deg,#2B2825,#0D0C0B)}
.ap-model .vis.blanc{background:linear-gradient(150deg,#FFFFFF,#E4E0D9); border:1px solid rgba(24,24,23,.12)}
.ap-model input{position:absolute; opacity:0; pointer-events:none}
.ap-qty{
  display:flex; align-items:center; justify-content:space-between; margin:0 var(--marge); padding:var(--e3) var(--e4); min-height:60px;
  border-radius:var(--r-pt); background:var(--s-glass); border:1px solid var(--s-glass-bd);
}
.ap-qty .l{font-family:var(--display); font-weight:600; font-size:var(--t-corps); color:var(--s-txt)}
.ap-qty .ctrl{display:flex; align-items:center; gap:var(--e5)}
.ap-qty .ctrl button{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--s-glass-bd); background:var(--s-bg2);
  color:var(--s-txt); font-size:20px; font-family:var(--display); line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0;
}
.ap-qty .ctrl b{font-family:var(--display); font-weight:800; font-size:var(--t-bloc); color:var(--s-txt); min-width:24px; text-align:center}
.ap-recap-box{margin:0 var(--marge); padding:var(--e4) var(--e5); border-radius:var(--r-pt); background:var(--s-glass); border:1px solid var(--s-glass-bd)}

/* Interrupteur compact (rester connecte) */
.ap-tog.mini{width:46px; height:28px}
.ap-tog.mini::after{width:22px; height:22px}

/* ===================== Page publique /u/slug =====================
   Meme langage que l'app : memes tokens, memes rangees, meme bouton de 56. */
.pub-bio{
  margin:var(--e5) var(--marge) 0; text-align:center;
  font-size:var(--t-sec); color:var(--s-dim); line-height:1.6;
}
/* Bouton d'avis Google : encadre a l'accent de la marque */
.ap-google{
  display:flex; flex-direction:column; align-items:center; gap:var(--e2);
  margin:var(--e5) var(--marge) 0; padding:var(--e4);
  background:var(--s-glass); border:2px solid var(--orange); border-radius:var(--r-md);
  box-shadow:0 6px 18px rgba(255,102,0,.16); text-decoration:none;
  transition:transform var(--d-court) var(--ease-app), box-shadow var(--d-court) var(--ease-app);
}
.ap-google:active{transform:scale(.985)}
.ap-google .head{display:inline-flex; align-items:center; gap:var(--e3)}
.ap-google .stars{display:inline-flex; gap:2px}
.ap-google .stars svg, .ap-google img{display:block}
.ap-google .g{
  width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:800; color:#fff;
  background:conic-gradient(from -45deg,#EA4335,#FBBC05,#34A853,#4285F4,#EA4335);
}
.ap-google .txt{font-family:var(--display); font-weight:700; font-size:var(--t-sec); color:var(--s-txt); text-align:center}

/* QR repliable */
.app-ui .pub-qr{margin:var(--e5) var(--marge) 0; text-align:center}
.app-ui .pub-qr summary{
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:var(--e2);
  min-height:44px; padding:0 var(--e4); border-radius:var(--r-rond);
  font-family:var(--display); font-weight:600; font-size:var(--t-legende); color:var(--orange);
  border:1px solid var(--s-glass-bd); background:var(--s-glass);
}
.app-ui .pub-qr summary::-webkit-details-marker{display:none}
.app-ui .pub-qr-body{margin-top:var(--e4); display:flex; flex-direction:column; align-items:center}
.app-ui .pub-qr-body img{background:#fff; padding:10px; border-radius:var(--r-md); border:1px solid var(--s-line)}
.app-ui .pub-qr-body p{margin:var(--e2) 0 0; font-size:var(--t-legende); color:var(--s-mute); text-align:center}

/* Signature de bas de page */
.pub-foot{
  margin:var(--e6) var(--marge) 0; padding-top:var(--e5);
  border-top:1px solid var(--s-line); text-align:center;
}
.pub-foot-n{font-family:var(--display); font-weight:800; color:var(--s-txt)}
.pub-foot-t{font-size:var(--t-legende); color:var(--s-mute); margin-top:2px}
.pub-foot-cta{
  display:inline-flex; align-items:center; min-height:44px; margin-top:var(--e3);
  font-family:var(--display); font-weight:700; font-size:var(--t-legende);
  color:var(--orange); text-decoration:none;
}
/* Page publique : pas de barre flottante, donc pas de reserve en bas */
body.public-page .app-ui{padding-bottom:var(--e7)}

/* ============================================================================
   PAGE D'ACCUEIL — meme langage que l'application.
   On ne reprend pas le conteneur de 430px (c'est une vitrine, pas un ecran),
   mais on reprend tout le reste : typographie, surfaces en verre, rayons,
   boutons a 56, ombres et accent orange.
   Charge apres main.css : ces regles priment a specificite egale.
   ============================================================================ */
body.landing{font-family:var(--corps); background:var(--s-bg); color:var(--s-txt)}
body.landing h1,body.landing h2,body.landing h3,body.landing h4{font-family:var(--display); color:var(--s-txt)}

/* Titres : echelle de la maquette, agrandie pour le bureau */
body.landing .hero h1{
  font-weight:800; letter-spacing:-.035em; line-height:1.04;
  font-size:clamp(var(--t-grand), 6vw, 62px);
}
body.landing .hero h1 .hl{color:var(--orange)}
body.landing .hero-lead{font-size:var(--t-corps); color:var(--s-dim); line-height:1.6}
body.landing .section-head h2{
  font-weight:800; letter-spacing:-.03em; font-size:clamp(var(--t-ecran), 3.6vw, 40px);
}
body.landing .section-head p{color:var(--s-dim); font-size:var(--t-corps)}
body.landing .eyebrow{
  font-family:var(--display); font-weight:700; font-size:var(--t-micro);
  letter-spacing:.14em; text-transform:uppercase; color:var(--orange);
  background:none; padding:0; border-radius:0;
}

/* Fonds de section : blanc et creme, comme les deux surfaces de l'app */
body.landing .section-alt{background:var(--s-bg2)}

/* Halo orange derriere le hero, identique aux ecrans de l'app */
/* overflow-x:clip et non hidden : ne cree pas de conteneur de defilement,
   donc n'affecte ni la nav collante ni les ancres. Contient la carte
   inclinee du hero, dont la boite englobante depasse sa boite de mise en page. */
body.landing .hero{position:relative; overflow-x:clip}
body.landing .hero::before{
  content:""; position:absolute; top:-160px; left:50%; transform:translateX(-50%);
  width:900px; height:560px; max-width:140vw; pointer-events:none; z-index:0;
  background:radial-gradient(closest-side,rgba(255,102,0,var(--halo)),rgba(255,102,0,calc(var(--halo)*.24)) 55%,transparent 78%);
  filter:blur(10px);
}
body.landing .hero-inner{position:relative; z-index:1}

/* Boutons : pilule, degrade orange, 56 de haut */
body.landing .btn{
  font-family:var(--display); font-weight:700; font-size:var(--t-corps);
  border-radius:var(--r-rond); min-height:56px; padding:var(--e4) var(--e6);
  display:inline-flex; align-items:center; justify-content:center; gap:var(--e3);
  transition:transform var(--d-court) var(--ease-app), box-shadow var(--d-court) var(--ease-app);
}
body.landing .btn:active{transform:scale(.985)}
body.landing .btn-primary{
  background:linear-gradient(150deg,var(--orange-clair),var(--orange-fonce));
  color:#fff; border:0; box-shadow:0 14px 32px rgba(255,102,0,.4);
}
body.landing .btn-ghost,body.landing .btn-light{
  background:var(--s-glass); border:1px solid var(--s-glass-bd); color:var(--s-txt); box-shadow:none;
}
body.landing .btn-block{width:100%}

/* La barre de navigation garde des boutons compacts : la regle des 56 ci-dessus
   vise les actions de la page, pas le chrome du site (sinon la nav enfle). */
body.landing .nav .btn{
  min-height:40px; padding:0 var(--e5); font-size:var(--t-sec); box-shadow:none;
}
body.landing .nav .btn-primary{box-shadow:0 8px 20px rgba(255,102,0,.30)}
body.landing .footer .btn{min-height:44px; padding:0 var(--e5); font-size:var(--t-sec)}
/* Dans le menu deroulant mobile, le bouton redevient une vraie cible tactile. */
@media (max-width:820px){
  body.landing .nav-links .btn{min-height:48px; font-size:var(--t-corps)}
}

/* Cartes : surfaces en verre de l'app */
body.landing .card,
body.landing .feature,
body.landing .testi,
body.landing .faq-item,
body.landing .news-card{
  background:var(--s-glass); border:1px solid var(--s-glass-bd);
  border-radius:var(--r-md); box-shadow:none;
}
body.landing .feature,body.landing .testi{padding:var(--e6)}
body.landing .feature h3,body.landing .card h3{font-size:var(--t-bloc); font-weight:700; letter-spacing:-.02em}
body.landing .feature p,body.landing .testi p{color:var(--s-dim); font-size:var(--t-sec); line-height:1.6}

/* Offres : la carte recommandee reprend le cadre orange de l'app */
body.landing .card{border-radius:var(--r-lg); padding:var(--e7) var(--e6)}
body.landing .card.featured{border:2px solid var(--orange); background:rgba(255,102,0,.06)}
body.landing .card .price .p-amount{
  font-family:var(--display); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(var(--t-ecran), 4vw, 44px); color:var(--s-txt);
}
body.landing .card .p-per{color:var(--s-mute); font-size:var(--t-sec)}
body.landing .card .price-note{color:var(--s-mute); font-size:var(--t-legende); line-height:1.45}
body.landing .card ul li{color:var(--s-dim); font-size:var(--t-sec)}
body.landing .ribbon{
  background:linear-gradient(150deg,var(--orange-clair),var(--orange-fonce)); color:#fff;
  font-family:var(--display); font-weight:700; font-size:var(--t-micro);
  letter-spacing:.06em; text-transform:uppercase; border-radius:var(--r-rond);
}

/* Bascule mensuel / annuel : pilule en verre */
body.landing .billing-toggle{
  background:var(--s-glass); border:1px solid var(--s-glass-bd); border-radius:var(--r-rond); padding:var(--e1);
}
body.landing .bt-opt{
  font-family:var(--display); font-weight:700; font-size:var(--t-sec);
  border-radius:var(--r-rond); min-height:44px; padding:0 var(--e5); color:var(--s-dim); background:none; border:0;
}
body.landing .bt-opt.active{
  background:linear-gradient(150deg,var(--orange-clair),var(--orange-fonce)); color:#fff;
  box-shadow:0 8px 20px rgba(255,102,0,.32);
}

/* Comparatif et FAQ */
body.landing .compare{font-size:var(--t-sec)}
body.landing .compare th{font-family:var(--display); font-weight:700; color:var(--s-txt)}
body.landing .compare td{color:var(--s-dim)}
body.landing .compare .yes{color:var(--vert)}
body.landing .faq-item summary{font-family:var(--display); font-weight:700; font-size:var(--t-corps); color:var(--s-txt); min-height:56px}
body.landing .faq-body{color:var(--s-dim); font-size:var(--t-sec); line-height:1.65}

/* Bandeau final : la carte sombre de l'app, en grand */
body.landing .cta-band{
  background:linear-gradient(158deg,#2A2724 0%,#131211 46%,#0A0908 100%);
  border-radius:var(--r-xl); color:#fff;
  box-shadow:0 30px 60px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.09);
}
body.landing .cta-band h2{color:#fff}
body.landing .cta-band p{color:#9A958C}

/* Actualites */
body.landing .news-card-title{font-family:var(--display); font-weight:700; font-size:var(--t-sec)}
body.landing .news-card-meta{color:var(--s-mute); font-size:var(--t-legende)}

/* Scene du hero : la carte de l'app, legerement inclinee, avec ses deux badges */
body.landing .lp-kard-wrap{position:relative; width:100%; max-width:420px; margin:0 auto; padding:var(--e8) 0}
body.landing .lp-kard{
  transform:rotate(-6deg);
  transition:transform var(--d-long) var(--ease-app);
}
body.landing .lp-kard-wrap:hover .lp-kard{transform:rotate(-2deg) translateY(-6px)}
body.landing .lp-badge{
  position:absolute; display:inline-flex; align-items:center; gap:var(--e2);
  background:var(--s-glass); border:1px solid var(--s-glass-bd);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-radius:var(--r-rond); padding:var(--e2) var(--e4); min-height:40px;
  font-family:var(--display); font-weight:600; font-size:var(--t-legende); color:var(--s-txt);
  box-shadow:0 12px 28px rgba(0,0,0,.14);
}
body.landing .lp-badge .dot{
  width:9px; height:9px; border-radius:50%; background:var(--vert);
  box-shadow:0 0 0 4px rgba(31,157,106,.18);
}
body.landing .lp-badge.b1{top:var(--e5); right:-6px}
body.landing .lp-badge.b2{bottom:var(--e5); left:-6px}
@media (max-width:900px){
  body.landing .lp-kard-wrap{max-width:340px; padding:var(--e7) 0}
  body.landing .lp-badge.b1{right:0}
  body.landing .lp-badge.b2{left:0}
}

/* ============================================================================
   BUREAU — l'app respire et occupe l'ecran.
   Le mobile suit la maquette native (colonne de 430, barre flottante).
   A partir de 1024, on bascule en logique web : la navigation du site revient
   en haut, la barre flottante disparait, et le contenu passe en deux colonnes.
   ============================================================================ */
@media (min-width:1024px){
  /* La nav du site reprend sa place : sur grand ecran c'est le bon reperage. */
  body.app-mode .nav{display:flex !important}
  body.app-mode .footer{display:block !important; padding-bottom:0}
  body.app-mode .footer .footer-inner{display:flex}
  body.app-mode .footer .footer-bottom{flex-direction:row; text-align:left}
  body.app-mode .ap-navf{display:none}

  body.app-mode .main{padding:0 var(--e7) var(--e8)}
  /* Colonne confortable par defaut (au lieu des 430 du mobile)...
     Le retrait lateral donne de l'air : sans lui la carte est collee au bord du
     conteneur et son ombre portee n'a nulle part ou se diffuser. */
  .app-ui{
    max-width:720px; min-height:auto;
    padding:var(--e5) var(--e6) var(--e8);
    background:transparent;
    /* Plus aucun rognage : l'ombre de la carte se diffuse librement. */
    overflow:visible;
  }
  /* La largeur utile reste la meme : on compense le retrait ajoute. */
  body.app-wide .app-ui{max-width:calc(1120px + 2 * var(--e6))}
  /* ...et pleine largeur pour les ecrans qui ont deux colonnes. */
  body.app-wide .app-ui{max-width:1120px}
  /* Connexion et inscription restent une colonne etroite, centree. */
  .ap-auth{max-width:420px; margin-left:auto; margin-right:auto; padding-left:0; padding-right:0}
  .app-ui .halo{width:900px; height:520px; top:-180px}

  /* Deux colonnes : la carte a gauche, le reste a droite. */
  .ap-cols{
    display:grid; grid-template-columns:minmax(360px,420px) 1fr;
    gap:var(--e8); align-items:start;
  }
  .ap-cols > .ap-col{min-width:0}
  /* La carte reste visible pendant qu'on parcourt la colonne de droite. */
  .ap-cols > .ap-col.sticky{position:sticky; top:var(--e7)}

  /* Dans une colonne, la marge laterale (qui servait a s'ecarter du bord de
     l'ecran sur mobile) devient inutile : on l'annule pour TOUS les blocs.
     Attention : on ne touche pas a leur retrait INTERIEUR, sinon le contenu
     vient coller au bord de l'encadre. */
  .ap-cols .ap-stage,
  .ap-cols .ap-acts,
  .ap-cols .ap-pulse,
  .ap-cols .ap-prog,
  .ap-cols .ap-sect,
  .ap-cols .ap-li,
  .ap-cols .ap-sup,
  .ap-cols .ap-lnkrow,
  .ap-cols .ap-cardbox,
  .ap-cols .ap-fld,
  .ap-cols .ap-swrow,
  .ap-cols .ap-slugbox,
  .ap-cols .ap-bandeau,
  .ap-cols .ap-chart,
  .ap-cols .ap-kpis,
  .ap-cols .ap-stick{margin-left:0; margin-right:0}

  /* Seuls ces blocs utilisent leur padding comme ecart au bord de l'ecran :
     eux seuls le perdent. */
  .ap-cols .ap-stage,
  .ap-cols .ap-acts,
  .ap-cols .ap-stick{padding-left:0; padding-right:0}
  /* Les deux colonnes demarrent a la meme hauteur : sans cela chacune garde
     le rythme vertical du mobile et elles se decalent de quelques pixels. */
  .ap-cols > .ap-col > *:first-child{margin-top:0; padding-top:0}

  /* Un seul retrait interieur pour toutes les surfaces d'une colonne : sans
     cela le texte des encadres (24) et celui des lignes (16) ne s'alignent pas. */
  .ap-cols .ap-cardbox,
  .ap-cols .ap-li,
  .ap-cols .ap-sup,
  .ap-cols .ap-lnkrow,
  .ap-cols .ap-swrow,
  .ap-cols .ap-slugbox,
  .ap-cols .ap-recap-box{padding-left:var(--e5); padding-right:var(--e5)}
  .ap-cols .ap-cardbox{padding-top:var(--e5); padding-bottom:var(--e5)}
  .ap-cols .ap-li{border-radius:var(--r-pt)}
  /* Le titre de section s'aligne sur le contenu des lignes qu'il annonce. */
  .ap-cols .ap-sect{padding-left:var(--e5)}

  /* En-tete d'ecran : plus d'air en haut. Le retrait lateral n'est supprime que
     sur les pages a deux colonnes, ou les marges du contenu le sont aussi ;
     ailleurs il reste aligne sur le contenu. */
  .app-ui .ap-hd{padding-top:var(--e7)}
  body.app-wide .app-ui .ap-hd{padding-left:0; padding-right:0}

  /* Sur mobile le titre d'un ecran secondaire est centre entre la fleche de
     retour et un vide de 44. Sur grand ecran il se range a gauche, au meme
     fer que le contenu : centre, il paraissait decale. */
  .app-ui .ap-hd{justify-content:flex-start; gap:var(--e4)}
  .app-ui .ap-hd > div[style*="width:44px"]{display:none}
  /* Sauf l'en-tete principal (titre + avatar), qui garde ses extremites. */
  .app-ui .ap-hd:has(.ap-ava){justify-content:space-between; flex-direction:row; align-items:flex-start}
  /* Ecran secondaire : la fleche de retour passe au-dessus, ce qui laisse le
     titre au meme fer que le contenu (sinon il est decale de sa largeur). */
  .app-ui .ap-hd:not(:has(.ap-ava)){flex-direction:column; align-items:flex-start; gap:var(--e3)}

  /* Formulaire en grille : mêmes marges nulles que dans les colonnes, pour que
     les champs s'alignent sur le titre. */
  .ap-form-grid .ap-fld,
  .ap-form-grid .ap-swrow{margin-left:0; margin-right:0}
  .ap-form-grid + .ap-stick{padding-left:0; padding-right:0}

  /* Formulaires : deux champs par ligne quand la place le permet */
  .ap-form-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 var(--e6)}
  .ap-form-grid > .ap-large{grid-column:1 / -1}

  /* Le bouton principal n'a pas besoin de toute la largeur sur grand ecran */
  .ap-cols .ap-stick .ap-btn,
  .ap-form-grid + .ap-stick .ap-btn{max-width:320px}
}

/* ===================== Avatar : image posee sur les initiales =====================
   Les initiales restent dans le document ; la photo (ou le logo) vient les
   recouvrir. Si l'image ne charge pas, onerror la retire et les initiales
   redeviennent visibles — plus jamais de rond vide. */
.ap-ava, .ap-idt .ph{position:relative; overflow:hidden}
.ap-ava .ap-photo, .ap-idt .ph .ap-photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
.ap-ini{display:block; line-height:1}

/* ============ Photo de profil en tete de l'ecran « Modifier » ============
   L'avatar EST le bouton : on le touche, le selecteur de fichier s'ouvre.
   Enfoui parmi les champs texte, personne ne le trouvait. */
.ap-avaedit{display:flex; flex-direction:column; align-items:center; gap:var(--e2); margin-bottom:var(--e4)}
.ap-avaedit-tap{position:relative; display:block; cursor:pointer; border-radius:50%}
.ap-avaedit-tap .ap-ava.lg{width:104px; height:104px; font-size:2rem}
.ap-avaedit-badge{
  position:absolute; right:-2px; bottom:-2px; width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--orange-fonce,#FF6600); color:#fff; border:3px solid var(--s-fond,#fff);
  box-shadow:0 6px 16px rgba(0,0,0,.22); pointer-events:none;
}
.ap-avaedit-badge svg{width:18px; height:18px}
.ap-avaedit-inp{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.ap-avaedit-lbl{cursor:pointer; font-weight:600; font-size:.92rem; color:var(--s-txt-doux,inherit)}
.ap-avaedit-tap:focus-within .ap-ava.lg{outline:3px solid var(--orange-fonce,#FF6600); outline-offset:3px}

/* En-tete a trois elements (retour | titre | avatar) : le titre prend la place
   restante pour que la fleche reste collee au bord gauche. */
.ap-hd .ap-hd-ttl{flex:1 1 auto; min-width:0}
.ap-hd > .ap-tap{margin-top:2px}

/* ============ Fonctionnalite momentanement indisponible (« grisee ») ============
   Commande de cartes NFC : on garde le bouton visible pour annoncer le produit,
   mais il ne mene nulle part tant que CARD_ORDERING_ENABLED vaut false. */
.is-soon{
  opacity:.45; filter:grayscale(1); cursor:not-allowed; pointer-events:none;
  user-select:none;
}
.ap-soon-note{margin:var(--e2) 0 0; font-size:var(--t-legende); color:var(--s-mute); line-height:1.45}

/* ============ Ecran QR : la barre de navigation doit rester atteignable ============
   .ap-share est en position fixed (z-index 100) et recouvrait la barre
   flottante : il ne restait que la croix pour sortir. On fait passer la barre
   AU-DESSUS et on lui reserve sa hauteur en bas de l'ecran de partage. */
body.app-share-mode .ap-navf{z-index:130}
body.app-share-mode.has-navf .ap-share{
  padding-bottom:calc(var(--e8) + 76px + env(safe-area-inset-bottom,0px));
}

/* ============ Compteur de vues du proprietaire ============
   Pose entre la barre Modifier / vCard / Copier et les coordonnees, sur la page
   publique en mode proprietaire (elle a absorbe l'ancien ecran « Ma carte »). */
.ap-vues{
  display:flex; align-items:center; gap:var(--e3);
  margin:var(--e3) var(--marge) 0; padding:var(--e4) var(--e5);
  border-radius:var(--r-md); text-decoration:none;
  background:var(--s-glass); border:1px solid var(--s-glass-bd);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  color:var(--s-txt);
}
.ap-vues .n{
  font-family:var(--display); font-weight:800; font-size:var(--t-section);
  letter-spacing:-.03em; color:var(--orange); line-height:1;
}
.ap-vues .l{flex:1; min-width:0; font-size:var(--t-sec); color:var(--s-mute)}
.ap-vues .grip{display:flex; color:var(--s-mute)}
.ap-vues .grip svg{width:18px; height:18px}

/* Accueil de l'application : meme rendu que la page publique, mais la barre
   flottante y est posee en bas — il faut lui reserver sa hauteur. */
body.app-home .app-ui{padding-bottom:124px}