/* Bilber — mise en page simplifiée et aérée (chargée en dernier).
   Une seule navigation (barre du bas), titres nets, marges généreuses, cartes légères. */
:root{--air:28px;--r-card:22px;--spring:cubic-bezier(.34,1.56,.64,1);--out:cubic-bezier(.2,.8,.2,1)}

/* ---------- navigation unique ---------- */
.toptabs{display:none!important}
#s-main>.body{padding-top:calc(var(--hdr-h) + var(--topsafe))}
#s-main .ptschip{display:none!important}
.hdr .brand .wm{font-size:19px;white-space:nowrap}
/* en-tête de l'écran principal : Aa (affichage et voix), loupe, avatar — trois ronds de 44 px, sans débordement à 320 px */
#s-main>.hdr{gap:8px;padding-top:calc(10px + var(--topsafe));padding-bottom:10px}
#s-main>.hdr .brand{min-width:0}
.aa,.hsrch{width:44px;height:44px;flex:none;padding:0;border-radius:50%;border:1px solid var(--line);background:var(--tile);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:transform .35s var(--spring)}
.aa{border-color:transparent;font-family:inherit;font-size:17px;font-weight:800;line-height:1}
.hsrch svg{width:21px;height:21px;stroke:var(--ink);stroke-width:2}
.aa:active,.hsrch:active{transform:scale(.94)}
#s-main>.hdr .pav{width:44px;height:44px;flex:none}
@media(max-width:359px){#s-main>.hdr{gap:6px;padding-left:12px;padding-right:12px}#s-main>.hdr .brand .wm{font-size:16px}}
@media(max-width:400px){html.comfort #s-main>.hdr{gap:6px;padding-left:12px;padding-right:12px}html.comfort #s-main>.hdr .brand .wm{font-size:16px}}
@media(max-width:359px){html.comfort #s-main>.hdr .brand .tld{display:none}}
.pnb.on svg{animation:navPop .5s var(--spring)}
@keyframes navPop{0%{transform:scale(.7)}60%{transform:scale(1.18)}100%{transform:scale(1)}}

/* ---------- rythme général ---------- */
.hfeed{padding:8px 20px 132px}
.hfeed>.title,.hfeed h1.title{font-size:30px;line-height:1.1;letter-spacing:-.03em;margin:10px 0 4px}
.hfeed>.sub{font-size:15px;margin-bottom:6px}
.hrow{margin:var(--air) 2px 12px}
.hrow h2,.hrow h3{font-size:19px;font-weight:800;letter-spacing:-.02em}
.dlabel{margin-top:var(--air)}
.lane{gap:14px;margin:0 -20px;padding:4px 20px 8px}
.grid{gap:16px}
.lcard{border-radius:var(--r-card);border-color:rgba(6,42,36,.06);box-shadow:0 1px 2px rgba(6,42,36,.04),0 8px 24px rgba(6,42,36,.05)}
.lcard .thumb{background:#F5F0DE}
.filters.cscroll{margin:14px -20px 18px;padding:0 20px 2px}
.fchip{border-color:transparent;background:#F5F0DE;font-weight:600}
.fchip.on{background:var(--ink,#062A24);border-color:var(--ink,#062A24);color:#fff;box-shadow:none}

/* ---------- accueil ---------- */
.hgreet{margin:14px 2px 18px}
.hgreet p{font-size:14px;font-weight:600;color:var(--muted)}
.hgreet h1{font-size:30px;line-height:1.1;letter-spacing:-.035em;margin-top:4px;font-weight:800}
.hcta{position:relative;display:flex;align-items:center;gap:14px;width:100%;padding:18px 18px 18px 16px;border:none;border-radius:26px;background:#0C6B4D;background-image:radial-gradient(120% 160% at 100% 0%,rgba(255,255,255,.22),transparent 55%);color:#fff;font-family:inherit;text-align:left;cursor:pointer;box-shadow:0 14px 34px rgba(12,107,77,.32);overflow:hidden;transition:transform .35s var(--spring),box-shadow .3s}
.hcta:active{transform:scale(.97);box-shadow:0 8px 20px rgba(12,107,77,.28)}
.hcta-ic{position:relative;width:54px;height:54px;border-radius:18px;background:rgba(255,255,255,.18);display:grid;place-items:center;flex:none;overflow:hidden}
.hcta-ic svg{width:28px;height:28px;stroke:#fff}
.hcta-ic i{position:absolute;left:8px;right:8px;height:2px;border-radius:2px;background:#D8FB6C;box-shadow:0 0 10px #D8FB6C;animation:ctaLaser 1.8s ease-in-out infinite}
@keyframes ctaLaser{0%,100%{top:14px;opacity:.2}50%{top:38px;opacity:1}}
.hcta-t{flex:1;min-width:0;display:flex;flex-direction:column}
.hcta-t b{font-size:18px;letter-spacing:-.02em}
.hcta-t small{font-size:13px;opacity:.82;margin-top:2px}
.hcta-go svg{width:20px;height:20px;stroke:#fff;opacity:.8}
.hquick{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:10px;margin-top:12px}
.hvoice{display:none;align-items:center;justify-content:center;gap:10px;width:100%;min-height:60px;margin-top:12px;padding:16px;border:none;border-radius:20px;background:#F5F0DE;font-family:inherit;font-size:16px;font-weight:700;color:var(--ink,#062A24);cursor:pointer}
.hvoice svg{width:22px;height:22px;stroke:#0C6B4D}
html.voice .hvoice{display:flex}
.hquick button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px;border:none;border-radius:20px;background:#F5F0DE;font-family:inherit;font-size:13px;font-weight:700;color:var(--ink,#062A24);cursor:pointer;transition:transform .35s var(--spring),background .2s}
.hquick button svg{width:22px;height:22px;stroke:#0C6B4D}
.hquick button:active{transform:scale(.94);background:#E9E3CF}
.hsec{margin-top:4px}
.catchips{display:flex;flex-wrap:wrap;gap:8px}
.catchips button{display:inline-flex;align-items:center;gap:7px;padding:10px 14px 10px 11px;border:none;border-radius:999px;background:#F5F0DE;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ink,#062A24);cursor:pointer;transition:transform .35s var(--spring)}
.catchips button svg{width:17px;height:17px;stroke:#0C6B4D}
.catchips button:active{transform:scale(.94)}
.gmini{margin:14px 0 0;border:none;background:#F8F4E6;border-radius:22px;padding:12px 14px}
.cdraft{margin-top:14px}

/* ---------- explorer, recherche, marché ---------- */
.xsearch{display:flex;align-items:center;gap:10px;width:100%;margin:14px 0 6px;padding:14px 16px;border:none;border-radius:18px;background:#F5F0DE;font-family:inherit;font-size:15px;color:var(--muted);text-align:left;cursor:text}
.xsearch svg{width:20px;height:20px;stroke:var(--muted)}
.xstat{font-size:12.5px;color:var(--faint,#8C9A93);margin:0 4px}
.xpill{display:inline-block;margin:6px 0 2px;font-size:12px;font-weight:700;color:#8a5a00;background:#fff4dc;border-radius:999px;padding:5px 10px}
.xsell{display:flex;align-items:center;gap:12px;width:100%;margin:16px 0 4px;padding:14px 16px;border:none;border-radius:20px;background:#F5F0DE;font-family:inherit;text-align:left;color:var(--ink,#062A24);cursor:pointer;transition:transform .35s var(--spring)}
.xsell>svg:first-child{width:26px;height:26px;stroke:#0C6B4D;flex:none}
.xsell>svg:last-child{width:18px;height:18px;stroke:var(--muted);flex:none}
.xsell span{flex:1;display:flex;flex-direction:column}
.xsell b{font-size:15.5px}
.xsell small{font-size:12.5px;color:var(--muted)}
.xsell:active{transform:scale(.97)}
.searchbar{margin-top:12px}

/* ---------- scanner ---------- */
.scan2 .scanbig{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;margin-top:18px;padding:34px 20px 26px;border:none;border-radius:30px;background:#10151a;background-image:radial-gradient(120% 90% at 50% 0%,rgba(31,157,107,.28),transparent 60%);color:#fff;font-family:inherit;cursor:pointer;box-shadow:0 20px 44px rgba(6,42,36,.3);transition:transform .35s var(--spring)}
.scan2 .scanbig:active{transform:scale(.97)}
.scanbig b{font-size:19px;margin-top:14px}
.scanbig small{font-size:13px;opacity:.7}
.sb-frame{position:relative;width:190px;height:120px}
.sb-frame>i{position:absolute;width:30px;height:30px;border:3.5px solid #fff}
.sb-frame>i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0;border-radius:12px 0 0 0}
.sb-frame>i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0;border-radius:0 12px 0 0}
.sb-frame>i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0;border-radius:0 0 0 12px}
.sb-frame>i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0;border-radius:0 0 12px 0}
.sb-bars{position:absolute;left:30px;right:30px;top:30px;bottom:30px;background:repeating-linear-gradient(90deg,#fff 0 3px,transparent 3px 6px,#fff 6px 7px,transparent 7px 11px,#fff 11px 15px,transparent 15px 17px);opacity:.85;border-radius:3px}
.sb-laser{position:absolute;left:14px;right:14px;height:2px;border-radius:2px;background:#ff5a5a;box-shadow:0 0 12px 2px rgba(255,90,90,.8);animation:sbLaser 1.6s ease-in-out infinite alternate}
@keyframes sbLaser{from{top:22px}to{top:96px}}
.scan2 .hquick{margin-top:14px}

/* ---------- fiche produit ---------- */
#cat-body{padding-left:20px;padding-right:20px}
.cgal{border-radius:26px;border:none;background:#F5F0DE}
.chead .title{font-size:26px}
.cacts{gap:10px;margin:14px 0 6px}
.cact{border:none;background:#F5F0DE;border-radius:20px;padding:14px 6px}
.cinfo,.cnut,.cbrand,.cmarket,.ctodo{border-color:rgba(6,42,36,.07);border-radius:22px}

/* ---------- profil ---------- */
.gprofile{padding-top:4px}
.ghero{border:none;box-shadow:0 1px 2px rgba(6,42,36,.04),0 14px 34px rgba(6,42,36,.07)}
.gseg{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0 0 16px;padding:4px;border-radius:16px;background:#F5F0DE}
.gseg button{position:relative;z-index:1;border:none;background:none;padding:10px 4px;border-radius:12px;font-family:inherit;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;transition:color .25s}
.gseg button[aria-selected="true"]{color:var(--ink,#062A24)}
.gseg-ink{position:absolute;z-index:0;top:4px;bottom:4px;left:0;width:0;border-radius:12px;background:#fff;box-shadow:0 2px 8px rgba(6,42,36,.1);transition:transform .45s var(--spring),width .35s var(--out)}
.gcard{border:none;background:#fff;box-shadow:0 1px 2px rgba(6,42,36,.04),0 10px 28px rgba(6,42,36,.06)}
.gpanel[hidden]{display:none}

/* ---------- mouvement ---------- */
button,.lcard,.grow,.cact,.gbadge,.catchips button{-webkit-tap-highlight-color:transparent}
.grow{transition:background .2s,transform .3s var(--spring)}
.grow:active{transform:scale(.985)}
.btn,.cbtn2{transition:transform .35s var(--spring),box-shadow .25s,background .2s}
.btn:active,.cbtn2:active{transform:scale(.97)}
.lcard{transition:transform .35s var(--spring),box-shadow .3s}
.lcard:active{transform:scale(.96)}
.mv-fi{opacity:0;transition:opacity .45s var(--out),transform .6s var(--out);transform:scale(1.03)}
.mv-fi.mv-ld{opacity:1;transform:none}
.mv-rv{opacity:0;transform:translateY(16px)}
.mv-rv.mv-in{opacity:1;transform:none;transition:opacity .55s var(--out),transform .65s var(--out)}
.mv-tab{animation:mvTab .38s var(--out) both}
@keyframes mvTab{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s;animation-timing-function:var(--out)}
html[data-vt="tab"]::view-transition-old(root){animation-name:vtFadeOut}
html[data-vt="tab"]::view-transition-new(root){animation-name:vtFadeUp}
html[data-vt="push"]::view-transition-old(root){animation-name:vtPushOut}
html[data-vt="push"]::view-transition-new(root){animation-name:vtPushIn}
html[data-vt="pop"]::view-transition-old(root){animation-name:vtPopOut}
html[data-vt="pop"]::view-transition-new(root){animation-name:vtPopIn}
#pillnav{view-transition-name:bilber-nav}
@keyframes vtFadeOut{to{opacity:0}}
@keyframes vtFadeUp{from{opacity:0;transform:translateY(12px)}}
@keyframes vtPushOut{to{opacity:.4;transform:translateX(-18%)}}
@keyframes vtPushIn{from{transform:translateX(100%)}}
@keyframes vtPopOut{to{transform:translateX(100%)}}
@keyframes vtPopIn{from{opacity:.4;transform:translateX(-18%)}}
@media (prefers-reduced-motion: reduce){
  .hcta-ic i,.sb-laser,.pnb.on svg,.mv-tab{animation:none!important}
  .mv-rv,.mv-fi{opacity:1!important;transform:none!important;transition:none!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
  .gseg-ink{transition:none}
  .aa,.hsrch,.dcard,.dcard .dchk{transition:none}
}

/* profil compact */
.ghero .gin{padding-bottom:18px}
.ghero .gban{height:64px}
.gstats.four{grid-template-columns:repeat(4,1fr);gap:6px;margin-top:16px}
.gstats.four>div{padding:10px 2px;border-radius:14px}
.gstats.four b{font-size:17px}
.gsk{display:flex;flex-direction:column;align-items:center;filter:grayscale(.9)}
.gsk.on{filter:none;background:#fff4e6!important}
.gsk .gemo{width:20px;height:20px;margin-bottom:1px}
.gsk b{display:none}
.gsk.on b,.gsk b:not(:empty){display:block}
.gpincard .gpinrow{margin:4px 0 2px}
.pav.guest .gavimg{filter:grayscale(1);opacity:.75}

/* ---------- Mes livres, avis guidés, dictée, écoute ---------- */
.hgreet p{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hcomfort{display:inline-flex;align-items:center;gap:7px;border:none;background:#F5F0DE;color:var(--ink);font-family:inherit;font-size:12.5px;font-weight:700;border-radius:999px;padding:6px 12px 6px 6px;cursor:pointer}
.hcomfort span{width:24px;height:24px;border-radius:50%;background:#D8FB6C;color:#062A24;display:grid;place-items:center;font-size:11px;font-weight:800}
.hcomfort[aria-checked="true"]{background:#062A24;color:#FEFAEB}
.hshelf{display:flex;align-items:center;gap:12px;width:100%;margin-top:12px;padding:14px 16px;border:none;border-radius:22px;background:#D8FB6C;color:#062A24;font-family:inherit;text-align:left;cursor:pointer;transition:transform .35s var(--spring)}
.hshelf:active{transform:scale(.97)}
.hshelf .gemo{width:40px;height:40px;flex:none}
.hshelf span{flex:1;min-width:0;display:flex;flex-direction:column}
.hshelf b{font-size:16.5px;letter-spacing:-.01em}
.hshelf small{font-size:12.5px;opacity:.78;margin-top:1px}
.hshelf>svg{width:20px;height:20px;stroke:#062A24;opacity:.7}
.scan2 .hquick{grid-template-columns:repeat(3,minmax(0,1fr))}

.chtop{display:flex;align-items:center;justify-content:space-between;gap:10px}
.clisten{display:inline-flex;align-items:center;gap:6px;border:none;background:#F5F0DE;color:var(--ink);font-family:inherit;font-size:13px;font-weight:700;border-radius:999px;padding:7px 12px;margin-bottom:8px;cursor:pointer}
.clisten svg{width:17px;height:17px;stroke:#0C6B4D}
.clisten.on{background:#0C6B4D;color:#fff}.clisten.on svg{stroke:#D8FB6C;animation:cPulse 1.2s ease-in-out infinite}
@keyframes cPulse{50%{opacity:.45}}

.cshelf{margin:12px 0 4px;padding:14px;border-radius:20px;background:#F8F4E6}
.cshelf .top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.cshelf .top b{display:inline-flex;align-items:center;gap:7px;font-size:14.5px}
.cshelf .top b svg{width:18px;height:18px;stroke:#0C6B4D}
.cshelf .top .clink{font-size:13px;font-weight:700;color:#0C6B4D}
.cshelf .chips{display:flex;flex-wrap:wrap;gap:8px}
.cshelf .chips button{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 14px;border-radius:999px;border:1.5px solid #E2DBC4;background:#fff;color:var(--ink);font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer;transition:transform .3s var(--spring),background .2s}
.cshelf .chips button svg{width:15px;height:15px;stroke:currentColor}
.cshelf .chips button.on{background:#0C6B4D;border-color:#0C6B4D;color:#fff}
.cshelf .chips button.on svg{stroke:#D8FB6C}
.cshelf .chips button:active{transform:scale(.94)}

.cshelf-acts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 16px}
.cshelf-acts .cact[disabled]{opacity:.45}
.cempty2{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:26px 12px;border-radius:22px;background:#F8F4E6;margin:8px 0 14px}
.cempty2 p{color:var(--muted);font-size:14.5px;max-width:32ch}
.cempty2 .btn{width:auto;padding-left:22px;padding-right:22px}
.gemo.big{width:64px;height:64px}
.ccircle-card{display:flex;align-items:center;gap:12px;width:100%;margin-top:18px;padding:14px 16px;border:1px solid var(--line);border-radius:20px;background:#fff;font-family:inherit;color:inherit;text-align:left;cursor:pointer}
.ccircle-card .gemo{width:36px;height:36px}
.ccircle-card span{flex:1;display:flex;flex-direction:column}
.ccircle-card small{color:var(--muted);font-size:13px}
.ccircle-card>svg{width:18px;height:18px;stroke:var(--muted)}
.gl small{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}
.cinvite{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:20px;background:#062A24;color:#FEFAEB;margin:6px 0 16px}
.cinvite small{display:block;font-size:12px;opacity:.7}
.cinvite b{font-size:26px;letter-spacing:.18em;color:#D8FB6C;font-variant-numeric:tabular-nums}
.cinvite .cbtn2{width:auto;background:#D8FB6C;border:none;color:#062A24}
.cinvite .cbtn2 svg{width:17px;height:17px;stroke:#062A24}
.cmembers{display:flex;gap:14px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:none}
.cmember{display:flex;flex-direction:column;align-items:center;gap:3px;flex:none;width:64px;text-align:center}
.cmember .gavimg{width:48px;height:48px;border-radius:50%}
.cmember b{font-size:12.5px;max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmember small{font-size:11.5px;color:var(--muted)}
.ccodein{text-transform:uppercase;letter-spacing:.3em;font-size:24px!important;text-align:center;font-weight:800}

.cscanned{display:inline-flex;align-items:center;gap:5px;margin-top:6px;font-size:12px;font-weight:700;color:#07523A;background:#EDF8C9;border-radius:999px;padding:3px 9px}
.cscanned svg{width:13px;height:13px;stroke:currentColor}
.creco{font-size:13.5px;margin-top:6px;color:var(--ink)}
.creco b{font-weight:700}
.cmemory{margin:8px 0 2px;padding:10px 12px;border-left:3px solid #D8FB6C;background:#F8F4E6;border-radius:0 12px 12px 0;font-size:14px;line-height:1.5;font-style:italic;white-space:pre-wrap;word-break:break-word}
.cmemory b{display:block;font-style:normal;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:#0C6B4D;margin-bottom:2px}
.crev .f{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:8px}
.crev .f span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.crev .f span svg{width:14px;height:14px;stroke:currentColor}
.crev .f .chelp{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--ink);font-weight:700;font-size:13px;background:#F5F0DE;border-radius:999px;padding:6px 12px;min-height:34px}
.crev .f .chelp svg{width:15px;height:15px;stroke:currentColor}
.crev .f .chelp.on{background:#0C6B4D;color:#fff}
.crev .f .chelp.on svg{stroke:#D8FB6C}

.crvform .cq{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--ink);text-transform:none;letter-spacing:0;margin-bottom:8px}
.crvform .cq i{width:24px;height:24px;border-radius:50%;background:#D8FB6C;color:#062A24;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:800;flex:none}
.crvform .cq small{font-weight:400;color:var(--muted);font-size:12.5px}
.crvform .cstar{font-size:34px}
.cform textarea.short{min-height:64px}
.cwithmic{position:relative;display:flex;align-items:flex-start;gap:8px}
.cwithmic>input,.cwithmic>textarea{flex:1;min-width:0}
.cmic{flex:none;width:48px;height:48px;border-radius:14px;border:none;background:#F5F0DE;display:grid;place-items:center;cursor:pointer}
.cmic svg{width:22px;height:22px;stroke:#0C6B4D}
.cmic.on{background:#0C6B4D;box-shadow:0 0 0 0 rgba(216,251,108,.8);animation:micRing 1.4s ease-out infinite}
.cmic.on svg{stroke:#D8FB6C}
@keyframes micRing{0%{box-shadow:0 0 0 0 rgba(12,107,77,.45)}100%{box-shadow:0 0 0 14px rgba(12,107,77,0)}}
.searchbar .cmic{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:40px;height:40px;background:transparent}
.searchbar{position:relative}
.crchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.crchips button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 11px;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer}
.bkcover{display:flex;align-items:center;gap:12px;margin:10px 0 4px}
.bkcover img{width:64px;height:90px;object-fit:cover;border-radius:8px;box-shadow:0 6px 16px rgba(6,42,36,.18)}
.bkcover span{font-size:13.5px;color:var(--muted)}
.gswitch{width:46px;height:28px;border-radius:999px;background:#E2DBC4;position:relative;flex:none;transition:background .2s}
.gswitch i{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(6,42,36,.25);transition:transform .25s var(--spring)}
[aria-checked="true"] .gswitch{background:#0C6B4D}
[aria-checked="true"] .gswitch i{transform:translateX(18px)}
.gic.ctxt{font-weight:800;font-size:16px;width:22px;justify-content:center;color:#0C6B4D}

/* ---------- Grand confort : texte plus grand, contrastes renforcés, sans animation ---------- */
html.comfort{--muted:#2F4039;--faint:#4F625B}
html.comfort #app{zoom:1.16;height:calc(100dvh / 1.16);max-width:calc(480px / 1.16)}
@media(min-width:520px){html.comfort #app{height:calc(min(880px,96dvh) / 1.16);margin-top:max(0px,calc((100dvh - 880px) / 2 / 1.16))}}
html.comfort *,html.comfort *::before,html.comfort *::after{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important}
html.comfort ::view-transition-old(*),html.comfort ::view-transition-new(*){animation:none!important}
html.comfort .cnote,html.comfort .sub,html.comfort .cmeta,html.comfort .s,html.comfort .cs{color:#2F4039}
html.comfort .crev .x,html.comfort .cmemory{font-size:15.5px}
html.comfort .fchip,html.comfort .cact,html.comfort .cbtn2,html.comfort .grow{border:1.5px solid #D6D0BA}
html.comfort .pnb span{font-size:12px;font-weight:700}
html.comfort #gboost-pill,html.comfort .cpts{display:none!important}
.pbody>.hfeed{padding:0 0 12px}
.cinvite{flex-wrap:wrap}
.cinvite b{font-size:22px;letter-spacing:.12em}
.cinvite .cbtn2{flex:none;min-height:44px;padding:10px 16px}
.cnote a{color:#0C6B4D;font-weight:700}
.crvform .cq{flex-wrap:wrap}
.crvform .cq small{margin-left:2px}

/* ---------- feuille « Affichage et voix » (bouton Aa de l'en-tête) : trois grandes cartes ---------- */
.dcards{display:flex;flex-direction:column;gap:10px;margin:12px 0 4px}
.dcard{display:flex;align-items:center;gap:14px;width:100%;min-height:96px;padding:14px 16px;border:2px solid var(--line);border-radius:var(--r-card);background:#fff;color:var(--ink);font-family:inherit;text-align:left;cursor:pointer;transition:transform .35s var(--spring),border-color .2s,background .2s}
.dcard:active{transform:scale(.98)}
.dcard.on{border-color:var(--sage);background:var(--sage-l)}
.dcard .dpic{width:52px;height:52px;border-radius:14px;background:var(--tile);display:grid;place-items:center;flex:none;color:var(--sage-d)}
.dcard.on .dpic{background:#fff}
.dcard .dpic svg{width:26px;height:26px;stroke:var(--sage-d)}
.dcard .daa{font-size:20px;font-weight:800;line-height:1}
.dcard .daa.big{font-size:26px}
.dcard .dtxt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.dcard .dtxt b{font-size:17px;line-height:1.3}
.dcard .dtxt small{font-size:14px;line-height:1.4;color:var(--muted)}
.dcard .dchk{width:28px;height:28px;border-radius:50%;background:var(--sage);color:#fff;display:grid;place-items:center;flex:none;opacity:0;transform:scale(.6);transition:opacity .15s,transform .35s var(--spring)}
.dcard .dchk svg{width:16px;height:16px;stroke:#fff;stroke-width:2.4}
.dcard.on .dchk{opacity:1;transform:none}

/* Accessibilité : focus toujours visible au clavier */
:focus-visible{outline:3px solid #0C6B4D;outline-offset:2px;border-radius:8px}
.pnb:focus-visible,.hcta:focus-visible{outline-offset:3px}

/* ---------- Mode malvoyant : lecture en très grand ---------- */
.clisten.cbig{background:#062A24;color:#FEFAEB}
.clisten.cbig svg{stroke:#D8FB6C}
.chtop{flex-wrap:wrap;gap:8px}
html.voice .clisten{font-size:15px;padding:11px 16px}
html.voice .cacts .cact{min-height:76px;font-size:14px}
html.voice .hquick button{padding:18px 6px;font-size:14px}

.creader{--rsize:30px;padding:4px 0 24px;color:var(--ink)}
.creader.dark{background:#062A24;color:#FEFAEB;border-radius:22px;padding:16px;margin:0 -4px}
.creader.dark .rsec{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)}
.creader.dark .rbtn{background:#D8FB6C;color:#062A24;border-color:#D8FB6C}
.creader.dark .rbtn svg,.creader.dark .rbtn.big svg{stroke:#062A24}
.creader.dark h1,.creader.dark h2{color:#FEFAEB}
.rhead h1{font-size:calc(var(--rsize) + 4px);line-height:1.15;letter-spacing:-.02em;margin:6px 0 14px}
.rtools{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;position:sticky;top:0;z-index:2;background:inherit;padding:4px 0}
.rbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:12px 18px;border-radius:16px;border:2px solid var(--ink);background:#fff;color:var(--ink);font-family:inherit;font-size:17px;font-weight:700;cursor:pointer}
.rbtn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.2}
.rbtn.big{flex:1;min-width:190px;background:#0C6B4D;border-color:#0C6B4D;color:#fff}
.rbtn.big svg{stroke:#D8FB6C}
.rphoto{width:100%;border-radius:18px;border:2px solid var(--line);margin-bottom:16px}
.rsec{border:2px solid var(--line);border-radius:20px;padding:16px 18px;margin-bottom:14px;background:#fff}
.rsec.on{border-color:#0C6B4D;box-shadow:0 0 0 4px rgba(12,107,77,.18)}
.rsec h2{font-size:calc(var(--rsize) * .72);margin-bottom:8px;letter-spacing:-.01em}
.rsec p{font-size:var(--rsize);line-height:1.45;white-space:pre-wrap;word-break:break-word;font-weight:500}
.rsec .rbtn{margin-top:14px;min-height:52px;font-size:16px}
@media (prefers-reduced-motion:reduce){.rsec{transition:none}}

/* ---------- illustrations d'état ---------- */
.cillus{display:block;width:100%;max-width:240px;margin:0 auto}
.cillus.small{max-width:200px;margin:4px auto 10px}
.cillus img{display:block;width:100%;height:auto}
.cempty2 .cillus{margin-bottom:2px}
/* illustrations détourées : ni carte, ni fond, ni cadre, ni ombre derrière le personnage */
.cempty2.bare{background:none;border-radius:0;padding:14px 0 6px}
.cillus,.cillus img,.cdoneimg,.cdoneimg img{background:none;border:none;border-radius:0;box-shadow:none}

/* ---------- fiche : l'essentiel d'abord ---------- */
@media(max-width:620px){.cgal{max-height:min(38vh,300px);aspect-ratio:auto;height:38vh}}
.cess{margin-top:14px;border:none;background:#F8F4E6;border-radius:20px;padding:4px 16px}
.cess .crow:last-child{border-bottom:none}
.cmiss{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:14px;font-weight:700;color:#07523A;background:#EDF8C9;border:none;border-radius:999px;padding:7px 12px;cursor:pointer;min-height:38px}
.cmiss svg{width:15px;height:15px;stroke:currentColor}
.cacts{margin-top:8px}

/* ---------- rayons illustrés ---------- */
.catgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:430px){.catgrid{grid-template-columns:repeat(3,1fr)}}
.cattile{display:flex;flex-direction:column;gap:0;border:none;border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(6,42,36,.05),0 8px 22px rgba(6,42,36,.06);font-family:inherit;color:inherit;text-align:left;cursor:pointer;transition:transform .35s var(--spring)}
.cattile:active{transform:scale(.96)}
/* photo de banque d'images (img/stock, 4:3) ; le pictogramme n'apparaît que si la photo manque (.nopic) */
.cattile .ctimg{position:relative;display:block;aspect-ratio:4/3;background:#F5F0DE;overflow:hidden}
.cattile .ctimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cattile .ctimg svg{display:none}
.cattile .ctimg.nopic{display:grid;place-items:center;background:radial-gradient(120% 120% at 30% 15%,#EDF8C9,#F5F0DE 70%)}
.cattile .ctimg.nopic::before{content:"";position:absolute;width:64px;height:64px;border-radius:50%;background:#fff;box-shadow:0 6px 16px rgba(6,42,36,.10)}
.cattile .ctimg.nopic svg{display:block;position:relative;width:34px;height:34px;stroke:#0C6B4D;stroke-width:1.7}
.cattile .ctlab{display:block;padding:11px 12px 13px;font-size:14.5px;font-weight:700;line-height:1.25}
html.comfort .cattile .ctlab{font-size:16px}

/* ---------- cartes produit : même hauteur, texte court ---------- */
.lane{align-items:stretch}
.lcard{flex:0 0 150px}
.lcard .thumb{aspect-ratio:1/1;flex:none}
.lcard .cb{padding:10px 12px 12px;gap:2px}
.lcard .ct{font-size:14px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lcard .cs{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lcard .cmeta{margin-top:auto;padding-top:6px;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-wrap:nowrap}
.grid .ccard .ct{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.grid .ccard .cs{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- visuels complémentaires ---------- */
.cillus.wide{max-width:520px;margin:12px auto 4px}
.cdone{text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}
.cdoneimg{display:block;width:160px;margin:2px auto 6px}
.cdoneimg img{width:100%;height:auto;display:block}
.cdone h2{margin-bottom:2px}
.cdone .sub{max-width:34ch}
.cdone .cnote{max-width:34ch}
.cdone .btn{margin-top:14px;max-width:280px}