/* Site de Tin Army (tinarmy.kerrolabs.fr) : accueil en trois langues (/ en anglais, /fr/, /zh/), confidentialité, conditions.
   Charte « Verre clair » du jeu (charte-graphique/) : ciel lumineux, panneaux de verre blanc, encre bleu-gris,
   une seule action principale par écran (le badge App Store), Fredoka (titres, boutons) et Nunito (textes).
   Clair seulement, comme le jeu : jamais de bleu nuit en fond.
   Page d'accueil « 30 secondes » du 06/11/2026 (docs/prompts/PROMPT-site-2027.md, deuxième passe) : la vidéo du jeu fait le spectacle,
   le reste bouge peu. Les pages d'accueil sont générées par outils/site-accueil/build.mjs.
   La CSP du site (netlify.toml) interdit tout style écrit dans le HTML. */
@font-face{font-family:Fredoka;src:url(/communaute/polices/Fredoka_variable.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:Nunito;src:url(/communaute/polices/Nunito_variable.woff2) format("woff2");font-weight:200 1000;font-display:swap}
:root{
  --ink:#1f2547;--ink2:#4e5779;--ink3:#7d84a3;--bg:#cfe0f5;
  --glass:rgba(255,255,255,.72);--glass2:rgba(255,255,255,.9);
  --well:rgba(31,37,71,.05);--line:rgba(31,37,71,.10);
  --sh:0 24px 60px -18px rgba(36,56,110,.32),0 6px 18px -6px rgba(36,56,110,.14);
  --shSm:0 6px 18px -6px rgba(36,56,110,.22);
  --y1:#ffd24a;--y2:#ff8f2b;--bTx:#2a63e0;--g2:#16b886;--heart:#ef4f6a;
  --cjk:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC";
  --fd:Fredoka,'Arial Rounded MT Bold','Trebuchet MS',var(--cjk),system-ui,sans-serif;
  --ft:Nunito,'Avenir Next','Segoe UI',var(--cjk),system-ui,sans-serif;
  --ease:cubic-bezier(.2,1,.3,1);
  --max:1160px;--topH:64px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--topH) + 12px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;min-height:100vh;font-family:var(--ft);font-size:16px;line-height:1.6;color:var(--ink);background:var(--bg);
  background-image:linear-gradient(180deg,#bcd6f3 0,#d3e3f6 520px,#dfe9f7 100%);-webkit-font-smoothing:antialiased;overflow-x:hidden}
:lang(zh) body,body:lang(zh){line-height:1.75}
img,video{max-width:100%;height:auto}
main{overflow-x:clip}
a{color:var(--bTx);text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--fd);font-weight:600;line-height:1.15;margin:0;text-wrap:balance;letter-spacing:-.01em}
p{margin:0}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--bTx);outline-offset:3px;border-radius:10px}
/* pages légales en trois langues (confidentialité, conditions, mentions légales) : lang.js choisit */
[lang=en] .fr-only,[lang=fr] .en-only,[lang=zh] .fr-only,[lang=zh] .en-only,[lang=fr] .zh-only,[lang=en] .zh-only{display:none!important}
.wrap{max-width:var(--max);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.muted{color:var(--ink2);font-size:14px}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:#fff;padding:10px 16px;border-radius:12px;font:600 15px var(--fd);box-shadow:var(--sh);transition:top .2s}
.skip:focus{top:calc(12px + env(safe-area-inset-top,0px))}

/* ---------- en-tête ---------- */
header.top{position:sticky;top:0;z-index:50;padding-top:env(safe-area-inset-top,0px);background:rgba(232,240,251,.82);-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);box-shadow:0 1px 0 rgba(255,255,255,.9),0 8px 24px -18px rgba(36,56,110,.4)}
.topIn{display:flex;align-items:center;gap:16px;height:var(--topH)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex-shrink:0}
.brand img{width:36px;height:36px;border-radius:10px;box-shadow:var(--shSm)}
.brand b{font:700 18px var(--fd);letter-spacing:.5px}
.brand b span{color:#e8740f}
.menu{display:flex;gap:2px;margin-left:auto}
.menu a{font:600 15px var(--fd);color:var(--ink2);text-decoration:none;padding:8px 12px;border-radius:999px;transition:background .2s,color .2s}
.menu a:hover,.menu a[aria-current]{color:var(--ink);background:rgba(255,255,255,.7)}
.langs{position:relative;isolation:isolate;display:flex;padding:3px;border-radius:999px;background:rgba(255,255,255,.65);box-shadow:inset 0 0 0 1px #fff}
.menu+.langs,.forumTop+.langs{margin-left:4px}
/* bouton « Forum » de l'en-tête : toujours visible, même sur téléphone où le menu disparaît (demande du 08/11/2026).
   Bleu « action » de la charte : l'action principale de la page reste le badge App Store. */
.forumTop,.forumGo{display:inline-flex;align-items:center;gap:7px;font:600 14px var(--fd);color:#fff;text-decoration:none;white-space:nowrap;
  padding:8px 14px 8px 11px;border-radius:999px;background:linear-gradient(160deg,#5cb2ff,#3a7bff);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 14px -6px rgba(58,123,255,.75);transition:transform .15s,box-shadow .2s,filter .2s}
.forumTop svg,.forumGo svg{width:18px;height:18px;flex-shrink:0}
.forumTop:hover,.forumGo:hover{filter:brightness(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 9px 18px -7px rgba(58,123,255,.85)}
.forumTop:active,.forumGo:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 3px 8px -4px rgba(58,123,255,.75)}
.forumTop{margin-left:6px;flex-shrink:0}
/* lien « Soutenir » de l'en-tête (08/11/2026) : discret, en verre blanc, à côté du Forum ; mène à la section du bas */
.giveTop{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;margin-left:6px;font:600 14px var(--fd);color:var(--ink2);text-decoration:none;white-space:nowrap;
  padding:8px 13px 8px 10px;border-radius:999px;background:rgba(255,255,255,.65);box-shadow:inset 0 0 0 1px #fff;transition:background .2s,color .2s,transform .15s}
.giveTop svg{width:16px;height:16px;flex-shrink:0;color:var(--heart)}
.giveTop:hover{background:#fff;color:var(--ink)}
.giveTop:active{transform:translateY(1px)}
.giveTop+.forumTop{margin-left:0}
.langs{flex-shrink:0}
.langs a,.langs button{border:0;background:none;cursor:pointer;font:600 13px var(--fd);padding:6px 11px;border-radius:999px;color:var(--ink2);text-decoration:none;line-height:1.2;transition:background .2s,transform .15s}
.langs a:hover,.langs button:hover{color:var(--ink)}
.langs a[aria-current],.langs button[aria-pressed=true]{background:var(--ink);color:#fff}
/* pastille qui glisse vers la langue touchée (pastille-langue.js ; sans JS, la règle du dessus suffit) */
.langPill{position:absolute;left:0;top:3px;bottom:3px;width:0;border-radius:999px;background:var(--ink);box-shadow:0 2px 8px -2px rgba(23,38,70,.45);z-index:-1;pointer-events:none;transition:transform .34s cubic-bezier(.3,1.25,.5,1),width .34s cubic-bezier(.3,1.25,.5,1)}
.langs.still .langPill{transition:none}
.langs.pilled a[aria-current],.langs.pilled button[aria-pressed=true]{background:none;color:var(--ink2)}
.langs.pilled a.on,.langs.pilled button.on{color:#fff;transition:color .12s .06s,transform .15s}
.langs a:active,.langs button:active{transform:scale(.92)}
.topEnd{margin-left:auto}

/* ---------- héros : la vidéo, une phrase, le badge ---------- */
.hero{position:relative;padding:48px 0 40px}
.heroIn{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);gap:48px;align-items:center}
.hero h1{font-size:clamp(30px,3.3vw,44px);line-height:1.1;letter-spacing:-.02em}
.wm{display:flex;align-items:center;gap:12px;font:700 22px var(--fd);letter-spacing:1.5px;text-transform:uppercase;color:var(--ink);margin-bottom:18px}
.wm img{width:52px;height:52px;border-radius:14px;box-shadow:var(--shSm)}
.wm span{color:#e8740f}
.h1t{display:block}
.lede{margin-top:18px;font-size:18px;color:var(--ink2);max-width:34em}
.get{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:28px}
.note{font-size:14px;color:var(--ink3);margin-top:14px}
.note b{color:var(--ink2);font-weight:700}
/* badge officiel de l'App Store (fichier d'Apple, non modifié) : seul le cadre autour réagit */
.store{display:inline-flex;border-radius:12px;line-height:0;box-shadow:0 12px 26px -12px rgba(31,37,71,.6);transition:transform .2s var(--ease),box-shadow .2s}
.store img{height:56px;width:auto;max-width:none}
.store:hover{transform:translateY(-2px);box-shadow:0 18px 34px -14px rgba(31,37,71,.7)}
.store:active{transform:scale(.97)}
.alt{font:600 15px var(--fd);color:var(--ink);text-decoration:none;padding:10px 4px;border-bottom:2px solid rgba(31,37,71,.18);transition:border-color .2s}
.alt:hover{border-color:var(--y2)}
/* l'écran : un téléphone tenu en paysage, la vraie partie dedans */
.heroFig{margin:0}
.screen{position:relative;padding:10px;border-radius:30px;background:#14182c;box-shadow:inset 0 0 0 1.5px #3a405c,0 40px 80px -30px rgba(20,30,70,.55),0 12px 26px -10px rgba(20,30,70,.3)}
.screen video,.screen img{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:21px;background:#a9c9ec;object-fit:cover}
.vrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:0 6px;font:600 13px var(--fd);color:var(--ink3)}
.vbtn{flex-shrink:0;width:34px;height:34px;border:0;border-radius:50%;cursor:pointer;display:grid;place-items:center;background:rgba(255,255,255,.75);color:var(--ink);box-shadow:inset 0 0 0 1px #fff,var(--shSm)}
.vbtn[hidden]{display:none}
.vbtn:hover{background:#fff}
.vbtn svg{width:16px;height:16px}
.vbtn .i-play{display:none}
.vbtn[aria-pressed=true] .i-play{display:block}
.vbtn[aria-pressed=true] .i-pause{display:none}

/* ---------- sections ---------- */
.sec{padding:72px 0}
.sec h2{font-size:clamp(28px,3.4vw,40px)}
.sub{margin-top:10px;font-size:17px;color:var(--ink2);max-width:40em}
.panel{border-radius:28px;background:var(--glass2);box-shadow:inset 0 0 0 1px #fff,var(--shSm)}

/* ---------- comment se joue une partie : une vraie capture, annotée ---------- */
.how{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:40px;align-items:center;margin-top:34px}
.shot{position:relative;margin:0}
.shot img{display:block;width:100%;height:auto;border-radius:22px;box-shadow:var(--sh)}
.pin{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;display:grid;place-items:center;font:700 15px var(--fd);color:#5a2600;background:var(--y1);box-shadow:0 0 0 3px #fff,0 6px 14px -4px rgba(0,0,0,.45)}
.pin.k1{left:7.5%;top:80%}
.pin.k2{left:31%;top:81%}
.pin.k3{left:50%;top:19.5%}
.pin.k4{left:40%;top:52%}
.keys{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px;counter-reset:k}
.keys li{position:relative;padding-left:46px;color:var(--ink2)}
.keys li::before{counter-increment:k;content:counter(k);position:absolute;left:0;top:1px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 15px var(--fd);color:#5a2600;background:var(--y1);box-shadow:0 0 0 3px #fff}
.keys b{display:block;font:600 18px var(--fd);color:var(--ink);margin-bottom:2px}

/* ---------- modes et promesses ---------- */
.duo{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px;margin-top:34px;align-items:start}
.duo .panel{padding:30px 32px}
.duo h3{font-size:22px;margin-bottom:6px}
.modes{list-style:none;margin:0;padding:0}
.modes li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--line);align-items:start}
.modes li:last-child{border-bottom:0;padding-bottom:0}
.modes b{font:600 16px var(--fd);color:var(--ink)}
.modes span{color:var(--ink2);font-size:15px}
.promise{background:linear-gradient(170deg,#fff,#f2f8ff)}
.checks{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:16px}
.checks li{position:relative;padding-left:34px;color:var(--ink2);font-size:15px}
.checks li::before{content:"";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;background:var(--g2) no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2 4.8 9 10 3' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.checks b{color:var(--ink)}

/* ---------- communauté : le forum en grand, puis les pages utiles du site communautaire ---------- */
.com{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;margin-top:34px;align-items:stretch}
.forumCard{position:relative;overflow:hidden;padding:30px 32px 0;display:flex;flex-direction:column;align-items:flex-start;gap:12px;background:linear-gradient(170deg,#fff 30%,#e6f1ff)}
.forumCard h3{font-size:24px}
.forumCard>p{color:var(--ink2);max-width:34em}
.forumCard .forumGo{margin-top:6px;padding:12px 22px 12px 18px;font-size:16px;border-radius:16px}
.forumCard .forumGo svg{width:20px;height:20px}
.tiny{font-size:13px;color:var(--ink3);line-height:1.5}
/* quelques troupes du jeu alignées sur le bord, comme sur une étagère */
.shelf{display:flex;align-items:flex-end;align-self:stretch;margin:auto 0 0;padding-top:10px;border-bottom:6px solid #e3d3ab}
.shelf img{flex:0 0 27%;min-width:0;width:27%;height:auto;margin:0 -3.75% -4px}
.comLinks{list-style:none;margin:0;padding:8px 10px;display:flex;flex-direction:column;justify-content:center}
.comLinks li+li{border-top:1px solid var(--line)}
.comLinks a{display:grid;grid-template-columns:76px minmax(0,1fr) 16px;gap:14px;align-items:center;padding:16px 10px;border-radius:18px;color:var(--ink2);text-decoration:none;font-size:15px;transition:background .2s}
.comLinks a:hover{background:rgba(42,99,224,.06)}
/* les dessins ont beaucoup de vide autour : agrandis à l'affichage, sans changer la mise en page */
.comLinks img{width:76px;height:auto;transform:scale(1.4);transition:transform .25s var(--ease)}
.comLinks a:hover img{transform:scale(1.4) translateX(3px)}
.comLinks b{display:block;font:600 17px var(--fd);color:var(--ink);margin-bottom:2px}
.comLinks a:hover b{color:var(--bTx)}
.comLinks svg{width:16px;height:16px;color:var(--ink3)}

/* ---------- soutenir le jeu (facultatif, en bas de l'accueil) ---------- */
#soutenir{padding-top:0}
.give{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px 40px;align-items:center;padding:30px 32px;background:linear-gradient(170deg,#fff 40%,#fff1f3)}
.give h2{font-size:clamp(24px,2.6vw,30px)}
.give .sub{font-size:15.5px;margin-top:6px}
.giveText>p:not(.sub){margin-top:14px;color:var(--ink2);font-size:15px}
.costs{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.costs li{position:relative;padding-left:18px;color:var(--ink2);font-size:14.5px;line-height:1.45}
.costs li::before{content:"";position:absolute;left:2px;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--heart);opacity:.75}
.giveGo{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.giveBtn{display:inline-flex;align-items:center;gap:9px;font:600 16px var(--fd);color:var(--ink);text-decoration:none;padding:12px 22px 12px 18px;border-radius:16px;background:#fff;
  box-shadow:inset 0 0 0 1.5px rgba(239,79,106,.35),var(--shSm);transition:box-shadow .2s,transform .15s}
.giveBtn svg{width:20px;height:20px;color:var(--heart)}
.giveBtn:hover{box-shadow:inset 0 0 0 1.5px rgba(239,79,106,.65),var(--shSm)}
.giveBtn:active{transform:scale(.97)}
.giveGo .tiny a{color:var(--ink3)}

/* ---------- aide (adresse d'assistance donnée à Apple) ---------- */
.help{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:20px;align-items:start;margin-top:30px}
.helpCol{display:flex;flex-direction:column;gap:20px}
.card{padding:28px;border-radius:26px;background:var(--glass2);box-shadow:inset 0 0 0 1px #fff,var(--shSm)}
.contact{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.contact h3{font-size:24px}
.contact p{color:var(--ink2)}
.mailBtn{display:inline-flex;align-items:center;gap:10px;font:600 16px var(--fd);color:var(--ink);text-decoration:none;padding:12px 20px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1.5px rgba(31,37,71,.14),var(--shSm);transition:box-shadow .2s,transform .15s}
.mailBtn:hover{box-shadow:inset 0 0 0 1.5px rgba(31,37,71,.3),var(--shSm)}
.mailBtn:active{transform:scale(.97)}
.mailBtn svg{width:18px;height:18px}
.faq h3,.legal h3{font-size:22px;margin-bottom:8px}
details{border-bottom:1px solid var(--line)}
details:last-child{border-bottom:0}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:14px 2px;font:600 16px var(--fd)}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex-shrink:0;width:24px;height:24px;border-radius:50%;background:var(--well) no-repeat center/11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%231f2547' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");transition:transform .25s var(--ease)}
summary:hover{color:var(--bTx)}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 2px 16px;color:var(--ink2);font-size:15px}
.legal p{font-size:14px;color:var(--ink2);line-height:1.7}

/* ---------- pied de page (commun à tout le site) ---------- */
footer.foot{margin-top:40px;padding:48px 0 calc(36px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.55);box-shadow:inset 0 1px 0 #fff}
.footIn{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:28px 40px;align-items:start}
.footBrand{display:flex;flex-direction:column;align-items:flex-start;gap:14px;color:var(--ink2);font-size:14.5px}
.footBrand>div{display:flex;align-items:center;gap:12px}
.footBrand>div img{width:44px;height:44px;border-radius:12px;box-shadow:var(--shSm)}
.footBrand b{display:block;font:700 18px var(--fd);color:var(--ink);letter-spacing:.5px}
.footBrand .store img{height:44px}
.footCols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.footCols div{display:flex;flex-direction:column;gap:8px}
.footCols h4{font:600 12px var(--fd);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin-bottom:2px}
.footCols a{font:600 15px var(--fd);color:var(--ink2);text-decoration:none;width:fit-content}
.footCols a:hover{color:var(--bTx);text-decoration:underline}
.copy{grid-column:1/-1;font-size:13px;color:var(--ink3);margin:0;padding-top:18px;border-top:1px solid var(--line)}
/* liens légaux : discrets, en petit à côté du copyright (toujours là : la loi et Apple l'exigent) */
.legalLine{display:inline-flex;flex-wrap:wrap;gap:2px 0;margin-left:10px}
.legalLine a{color:var(--ink3);text-decoration:none;font-size:12px}
.legalLine a:hover{text-decoration:underline;color:var(--ink2)}
.legalLine a+a::before{content:"·";display:inline-block;margin:0 7px;color:var(--ink3)}
@media (max-width:560px){.legalLine{display:flex;margin:6px 0 0}}

/* ---------- bandeau « ce site existe dans ta langue » (site.js) ---------- */
.langHint{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:4px 10px;padding:6px 44px 6px 16px;position:relative;font:600 14px var(--fd);color:var(--ink2);background:rgba(255,255,255,.75);border-bottom:1px solid var(--line);text-align:center}
.langHint a{color:var(--bTx);text-decoration:none;padding:2px 10px;border-radius:999px;background:rgba(42,99,224,.08)}
.langHint button{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:none;cursor:pointer;width:30px;height:30px;border-radius:50%;color:var(--ink3);font-size:18px;line-height:1}
.langHint button:hover{background:var(--well);color:var(--ink)}

/* ---------- pages légales (confidentialité, conditions) ---------- */
.doc-page main.doc{max-width:1060px;margin:0 auto;padding:28px max(16px,env(safe-area-inset-right,0px)) 20px max(16px,env(safe-area-inset-left,0px));display:grid;grid-template-columns:240px minmax(0,1fr);gap:28px;align-items:start}
.doc-page main.doc>div{grid-column:2;min-width:0}
.toc{grid-column:1;grid-row:1/span 2;position:sticky;top:calc(var(--topH) + 20px);padding:18px;border-radius:22px;background:var(--glass);box-shadow:inset 0 0 0 1px #fff,var(--shSm);max-height:calc(100vh - var(--topH) - 40px);overflow:auto;font-family:var(--fd)}
.toc details{border:0}
.toc summary{padding:2px 0 8px;font:600 12px var(--fd);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.toc summary::after{width:22px;height:22px}
.toc details:not([open]) summary{padding-bottom:2px}
.toc a{display:block;font-size:13.5px;line-height:1.35;color:var(--ink2);text-decoration:none;padding:6px 10px;border-radius:10px;transition:background .2s,color .2s}
.toc a:hover{background:rgba(255,255,255,.8);color:var(--ink)}
.toc a.on{background:#fff;color:var(--bTx);box-shadow:var(--shSm)}
.doc .card{padding:36px 40px;border-radius:30px}
.doc h1{font-size:clamp(30px,4vw,44px);margin-bottom:6px}
.doc h2{font-size:21px;margin:34px 0 8px;padding-top:4px}
.doc h3{font-size:17px;margin:18px 0 4px}
.doc p,.doc li{color:#2c3358;margin:8px 0}
.doc ul,.doc ol{padding-left:22px}
.doc li{margin:4px 0}
.doc .tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:15px;margin:8px 0}
td,th{border-bottom:1px solid var(--line);padding:9px 8px;text-align:left;vertical-align:top}
th{font-family:var(--fd);font-weight:600;color:var(--ink2)}
h2[id]{scroll-margin-top:calc(var(--topH) + 20px)}
/* Textes légaux : la police de l'appareil, sur le contenu seulement ; l'en-tête et le pied gardent Fredoka et Nunito (règle du 02/11/2026). */
main.doc .card{--fd:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif;--ft:var(--fd);font-family:var(--ft)}
main.doc .card :is(h1,h2,h3){font-weight:600;letter-spacing:-.01em}

/* bouton Forum flottant des téléphones (demande de Moussa du 08/11/2026) : caché ailleurs */
.forumFab{display:none}
/* lien Soutenir réduit à son cœur tant que le menu complet et le Forum prennent la largeur (le mot reste lu par les lecteurs d'écran) ;
   sur téléphone, il reprend son mot (demande du 08/11/2026) */
@media (min-width:721px) and (max-width:1100px){
  .giveTop{padding:8px}
  .giveTop span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (max-width:800px){.topIn:has(.giveTop) .menu a[href="#modes"]{display:none}}
/* ---------- tablettes ---------- */
@media (max-width:980px){
  .heroIn{grid-template-columns:1fr;gap:30px}
  .heroText{max-width:640px}
  .how{grid-template-columns:1fr;gap:28px}
  .duo,.help,.com,.give{grid-template-columns:1fr}
  .menu a[href="#communaute"]{display:none}
  .footIn{grid-template-columns:1fr}
  .doc-page main.doc{grid-template-columns:1fr}
  .doc-page main.doc>div{grid-column:1}
  .toc{position:static;grid-row:auto;max-height:none}
}
/* ---------- téléphones : la vidéo d'abord, puis la phrase et le badge, tout dans le premier écran ---------- */
@media (max-width:720px){
  :root{--topH:56px}
  .menu{display:none}
  /* en-tête de téléphone : le logo, « Soutenir » en toutes lettres et les langues, sur une ligne dès 320 px ;
     le Forum quitte l'en-tête pour un bouton flottant en bas à droite, qui reste à l'écran pendant le défilement (08/11/2026).
     Le bouton flottant est hors de header.top : son backdrop-filter piégerait un élément fixe. */
  .topIn{gap:8px}
  .brand{gap:8px}
  .forumTop{display:none}
  .forumFab{display:inline-flex;align-items:center;gap:8px;position:fixed;z-index:45;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));
    font:600 15px var(--fd);color:#fff;text-decoration:none;white-space:nowrap;padding:12px 18px 12px 14px;border-radius:999px;background:linear-gradient(160deg,#5cb2ff,#3a7bff);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 24px -8px rgba(30,80,200,.7),0 2px 6px rgba(20,40,90,.18);transition:transform .15s}
  .forumFab svg{width:20px;height:20px;flex-shrink:0}
  .forumFab:active{transform:scale(.95)}
  footer.foot{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .giveTop{margin-left:auto;padding:7px 12px 7px 9px;font-size:13.5px;gap:5px}
  header.top .wrap{padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:max(14px,env(safe-area-inset-right,0px))}
  .give{padding:22px 20px}
  .langs,.menu+.langs{margin-left:auto}
  .forumTop+.langs{margin-left:0}
  .langs a,.langs button{padding:6px 8px}
  .forumCard{padding:22px 20px 0}
  .forumCard h3{font-size:21px}
  .comLinks{padding:4px 6px}
  .comLinks a{grid-template-columns:60px minmax(0,1fr) 14px;gap:12px;padding:14px 8px}
  .comLinks img{width:60px}
  .brand b{font-size:16px}
  .hero{padding:12px 0 28px}
  .heroIn{gap:20px}
  .heroMedia{order:-1;margin:0 -8px}
  .screen{padding:7px;border-radius:24px;box-shadow:inset 0 0 0 1.5px #3a405c,0 16px 30px -16px rgba(20,30,70,.5)}
  .screen video,.screen img{border-radius:18px}
  .vrow{margin-top:6px;font-size:12px}
  .vbtn{width:30px;height:30px}
  /* le nom est déjà dans l'en-tête : sur téléphone il reste dans le titre pour Google et les lecteurs d'écran, sans prendre de place */
  .wm{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
  .hero h1{font-size:27px}
  .lede{font-size:15.5px;margin-top:10px}
  .get{margin-top:18px}
  .store img{height:52px}
  .note{margin-top:10px;font-size:13.5px}
  .sec{padding:52px 0}
  .pin{width:24px;height:24px;margin:-12px 0 0 -12px;font-size:13px;box-shadow:0 0 0 2px #fff,0 4px 10px -3px rgba(0,0,0,.45)}
  .shot img{border-radius:16px}
  .duo .panel{padding:22px 20px}
  .modes li{grid-template-columns:1fr;gap:2px}
  .card{padding:22px 20px;border-radius:22px}
  .footCols{grid-template-columns:1fr 1fr}
  .doc .card{padding:22px 18px;border-radius:24px}
  /* tableau des données : une fiche par ligne sur téléphone, au lieu de trois colonnes étroites */
  .doc table,.doc tbody,.doc tr,.doc td{display:block;width:100%}
  .doc tr:first-child:has(th){display:none}
  .doc tr{background:rgba(255,255,255,.7);border-radius:14px;padding:10px 12px;margin:10px 0;box-shadow:0 1px 4px rgba(36,56,110,.08)}
  .doc td{border:0;padding:3px 0;font-size:14.5px}
  .doc td:first-child{font-weight:800;color:var(--ink)}
  .doc td:not(:first-child)::before{font:600 12px var(--fd);text-transform:uppercase;letter-spacing:.06em;color:var(--ink3);display:block}
  [lang=fr] .doc td:nth-child(2)::before{content:"Pourquoi"}
  [lang=fr] .doc td:nth-child(3)::before{content:"Où"}
  [lang=en] .doc td:nth-child(2)::before{content:"Why"}
  [lang=en] .doc td:nth-child(3)::before{content:"Where"}
}
@media (max-width:380px){
  .hero h1{font-size:24px}
  .langs a,.langs button{padding:6px 8px}
  .brand b{font-size:15px}
}
/* très petits écrans (iPhone SE 1re génération) : tout serré d'un cran pour garder « Soutenir » en toutes lettres */
@media (max-width:360px){
  .topIn{gap:6px}
  .brand{gap:6px}
  .brand img{width:32px;height:32px}
  .brand b{font-size:14px}
  .giveTop{padding:7px 9px 7px 7px;font-size:13px;gap:4px}
  .giveTop svg{width:14px;height:14px}
  .langs a,.langs button{padding:6px 6px}
}
@media (max-width:340px){
  header.top .wrap{padding-left:max(10px,env(safe-area-inset-left,0px));padding-right:max(10px,env(safe-area-inset-right,0px))}
  .brand b{font-size:13px}
  .langs a,.langs button{padding:6px 5px;font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}