/* LBF App : accueil d'un visiteur plus large sur ordinateur, et espace "Installer l'app" (12/11/2026 ; maquettes realistes et badges
   officiels des boutiques le 13/11/2026). Charge par novamira-sandbox/lbf-app-install.php ; le bloc est pose par app-install.js.
   Aucun tiret long. */

/* 1. L'accueil d'un visiteur sur ordinateur : la largeur de l'accueil d'un compte (1100 px au lieu de 600). */
@media (min-width:900px){
  #accview.acc:not(.has-card){max-width:1100px}
  #accview.acc:not(.has-card) .acc-p{max-width:640px}
  #accview.acc:not(.has-card) .acc-hi{max-width:620px}
  #accview.acc:not(.has-card) .acc-tools{margin-top:40px;gap:16px}
  #accview.acc:not(.has-card) .acc-cta{margin-top:40px}
}

/* 2. L'espace "Installer l'app" : trois cartes (telephone, ordinateur, navigateur), une ligne par boutique. */
.ins{container:lbfins / inline-size;margin-top:46px;font-family:var(--font,'Schibsted Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif)}
html.lbf-store .ins,html.lbf-panneau .ins{display:none!important}
.ins *{box-sizing:border-box}
.ins-h{margin:0 0 14px}
.ins-t{margin:0;font-family:var(--serif,'Gloock',Georgia,serif);font-weight:400;font-size:21px;line-height:1.15;letter-spacing:-.005em;color:var(--ink,#3D3552)}
.ins-p{margin:6px 0 0;font-size:14.5px;line-height:1.45;color:var(--muted,#5C5170);text-wrap:balance}

/* telephone : une bande a faire glisser */
.ins-g{display:flex;gap:12px;margin:0 -18px;padding:2px 18px 8px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 18px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.ins-g::-webkit-scrollbar{display:none}
.ins-c{container:insc / inline-size;flex:0 0 min(84%,330px);scroll-snap-align:start;display:flex;flex-direction:column;min-width:0;border:1px solid var(--ib,#ECE4D8);border-radius:16px;background:#fff;overflow:hidden}
.ins-tel{--ib:#F3D6C2;--ia:#FFE7D4;--iz:#FFF4DC}
.ins-pc{--ib:#D8D0F0;--ia:#E9E4F8;--iz:#E3ECFC}
.ins-ext{--ib:#BFDFE0;--ia:#DCF0F1;--iz:#EAF5E4}
.ins.dk .ins-pc{order:-2}
.ins.dk .ins-ext{order:-1}
/* la scene de chaque carte : des appareils (generiques) qui montrent de vrais ecrans de l'app (image scene-*.webp, 1280 x 840, fond
   transparent) sur le degrade de la carte */
.ins-st{position:relative;flex:none;aspect-ratio:640/420;max-height:300px;overflow:hidden;background:linear-gradient(150deg,var(--ia),var(--iz));border-bottom:1px solid var(--ib)}
.ins-st::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 90% at 88% -10%,rgba(255,255,255,.85),rgba(255,255,255,0) 62%)}
.ins-sc{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.ins-b{display:flex;flex-direction:column;flex:1;padding:14px 14px 12px}
.ins-ct{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin:0;font-size:16.5px;font-weight:700;line-height:1.2;color:var(--ink,#3D3552)}
.ins-me{display:inline-block;padding:3px 8px;border-radius:999px;background:#3D3552;color:#fff;font-size:10.5px;font-weight:700;line-height:1.2;letter-spacing:.01em;white-space:nowrap}
.ins-cs{margin:4px 0 0;font-size:13px;line-height:1.4;color:var(--muted,#5C5170)}
.ins-l{display:flex;flex-direction:column;gap:8px;list-style:none;margin:12px 0 0;padding:0}
.ins-l>li{margin:0;padding:0}
.ins.ios .ins-l>.r-ios,.ins.b-edge .ins-l>.r-edge,.ins.b-ff .ins-l>.r-firefox{order:-1}

/* une ligne : pastille, nom de la boutique et appareil, etat */
.ins-r{display:flex;align-items:center;gap:10px;width:100%;min-height:54px;margin:0;padding:8px 10px;border:1px solid #ECE4D8;border-radius:12px;background:#fff;color:var(--ink,#3D3552);font:inherit;text-align:left;text-decoration:none;cursor:pointer;transition:border-color .15s ease,background-color .15s ease,transform .1s ease;-webkit-tap-highlight-color:transparent}
a.ins-r:hover,summary.ins-r:hover{border-color:#EBC9A6;background:#FFFBF5}
a.ins-r:active,summary.ins-r:active{transform:scale(.99)}
.ins-r:focus-visible{outline:3px solid rgba(240,138,36,.45);outline-offset:2px}
.ins-ri{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--ia,#FFE7D4);color:#3D3552}
.r-pwa .ins-ri{background:#FCB900}
.ins-ri svg{display:block;width:18px;height:18px}
.ins-rt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ins-rt b{font-size:14.5px;font-weight:700;line-height:1.2;color:var(--ink,#3D3552)}
.ins-rt small{font-size:12px;line-height:1.3;color:var(--muted,#5C5170)}
.ins-rs{flex:none;padding:4px 9px;border-radius:999px;background:#DFF3E3;color:#1B6337;font-size:11.5px;font-weight:700;line-height:1.2;white-space:nowrap}
.ins-rc{flex:none;display:grid;place-items:center;width:18px;height:18px;color:#8A7FA0;transition:transform .2s ease}
.ins-rc svg{display:block;width:16px;height:16px}
.ins-r.soon{background:#FBF8F3;border-style:dashed;border-color:#E2D8CA}
span.ins-r{cursor:default}
.ins-r.soon .ins-ri{background:#EEE9F6;color:#6B6180}
.ins-r.soon .ins-rt b{color:#4F4666}
.ins-r.soon .ins-rs{background:#EEE9F6;color:#5C5170}
.ins-go{display:none;background:#FCB900;color:#3D3552}
.ins-d.can>summary .ins-go{display:inline-block}
.ins-d.can>summary .ins-rc{display:none}
.ins-r.done{cursor:default;border-color:#CFE9D6;background:#F4FBF5}
.ins-r.done .ins-ri{background:#DFF3E3;color:#1B6337}

/* le badge officiel de la boutique (fichier fourni par la boutique, seulement redimensionne) : 38 px de haut pour tous ; celui de
   Google Play a sa marge transparente dans le fichier (29 px sur 250 en haut et en bas) */
.ins-r.bd{gap:8px;padding-right:9px}
.ins-r.bd .ins-rt small{white-space:nowrap}
.ins-bd{flex:none;display:block;width:auto;height:38px;max-width:none}
.ins-bd-play{height:49.500px;margin:-5.750px 0}
@container insc (max-width:318px){
  .ins-r.bd{padding-left:12px}
  .ins-r.bd .ins-ri{display:none}
  .ins-bd{height:36px}
  .ins-bd-play{height:47px;margin:-5.500px 0}
}
.ins-lg{margin:12px 2px 0;font-size:11px;line-height:1.45;color:#8A8198}

/* les lignes qui s'ouvrent : les etapes */
.ins-d>summary{list-style:none}
.ins-d>summary::-webkit-details-marker{display:none}
.ins-d[open]>summary .ins-rc{transform:rotate(90deg)}
.ins-o{margin:0;padding:10px 6px 4px 12px;font-size:13px;line-height:1.5;color:var(--muted,#5C5170)}
.ins-o p{margin:0 0 6px}
.ins-o ol{list-style:none;margin:0;padding:0;counter-reset:insn}
.ins-o li{position:relative;margin:0 0 6px;padding:0 0 0 26px;counter-increment:insn}
.ins-o li::before{content:counter(insn);position:absolute;left:0;top:1px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#FFE2C8;color:#A8501A;font-size:11px;font-weight:700;line-height:1}
.ins-o b{font-weight:600;color:var(--ink,#3D3552)}

/* selon la largeur du bloc : deux colonnes, puis trois ; a la souris, pas de bande a faire defiler */
@container lbfins (min-width:540px){
  .ins-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0;padding:0;overflow:visible}
  .ins-c{flex:none}
  .ins-g>.ins-c:last-child{grid-column:1/-1}
  .ins.dk .ins-pc,.ins.dk .ins-ext{order:0}
}
@container lbfins (min-width:960px){
  .ins-g{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .ins-g>.ins-c:last-child{grid-column:auto}
  .ins.dk .ins-pc{order:-2}
  .ins.dk .ins-ext{order:-1}
  .ins-b{padding:16px 16px 14px}
}
@media (hover:hover) and (pointer:fine){
  @container lbfins (max-width:539px){
    .ins-g{flex-direction:column;margin:0;padding:0;overflow:visible}
    .ins-c{flex:none}
  }
}