:root{--creme:#F8F2E4;--tab:#173B2C;--vert:#A6E36F;--orange:#F6A53A;--encre:#173B2C}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,system-ui,sans-serif;background:radial-gradient(70% 40% at 50% 62%,#fff6e6 0,transparent 70%),linear-gradient(180deg,#faf4e7,#f6efdf);color:var(--encre);min-height:100vh;display:flex;justify-content:center}
.app{width:100%;max-width:430px;min-height:100vh;display:flex;flex-direction:column;padding:14px 20px 14px;position:relative}
header{display:flex;align-items:flex-start;gap:14px;padding-top:4px}
.med{width:84px;height:84px;border-radius:50%;padding:4px;background:#bfe48f;box-shadow:0 4px 12px rgba(23,59,44,.18);flex:none}
.med img{width:100%;height:100%;border-radius:50%;display:block}
.logo{font-family:Nunito;font-weight:900;font-size:31px;line-height:.98;color:#1e4a37;margin-top:8px;position:relative;letter-spacing:-.3px}
.logo svg{position:absolute;left:30px;bottom:-14px}
.reg{margin-left:auto;margin-top:12px;width:46px;height:46px;border-radius:50%;background:#ece6d8;display:grid;place-items:center}
.bulle{position:relative;align-self:flex-start;margin:10px 0 2px 30px;background:#d8efbf;font-weight:700;font-size:16px;padding:10px 16px;border-radius:16px;color:#173B2C}
.bulle:after{content:"";position:absolute;left:22px;top:-10px;border:11px solid transparent;border-bottom-color:#d8efbf;border-top:0;border-right-width:3px;border-left-width:12px}
.titre{position:relative;margin-top:6px}
h1{font-family:Nunito;font-weight:900;font-size:38px;line-height:1.02;text-align:center;letter-spacing:-.6px;color:#173B2C}
.eclat{position:absolute}
.sous{text-align:center;font-family:Nunito;font-weight:800;font-size:17.5px;margin-top:8px;position:relative;color:#1b2b26}
.sous svg{position:absolute;left:50%;transform:translateX(-46%);bottom:-11px}
.illu{margin:18px -20px 0;height:254px;position:relative}
.cahier{position:absolute;left:12px;top:24px;width:166px;height:184px;transform:rotate(-6deg);background:#fffaf7;border-radius:4px 8px 8px 4px;box-shadow:0 10px 20px rgba(60,40,10,.18);background-image:linear-gradient(90deg,transparent 30px,#f2a3a3 30px,#f2a3a3 31px,transparent 31px),repeating-linear-gradient(0deg,transparent 0 11px,#d7e3f4 11px 12px),repeating-linear-gradient(90deg,transparent 0 11px,#e6eef9 11px 12px)}
.spirale{position:absolute;left:-9px;top:8px;bottom:8px;width:18px;display:flex;flex-direction:column;justify-content:space-between}
.spirale i{display:block;width:20px;height:9px;border:2.5px solid #5f6368;border-radius:10px 4px 4px 10px;background:linear-gradient(90deg,#fff 0,#fff 45%,transparent 45%)}
.cahier .c{position:absolute;left:34px;top:12px;right:8px}
.cahier h4{font-family:Kalam;font-weight:400;color:#2a48b0;font-size:15.5px;line-height:1.12;border-bottom:1.5px solid #2a48b0;padding-bottom:4px;width:116px}
.tableau{position:absolute;right:12px;top:2px;width:204px;height:204px;border-radius:6px;background:linear-gradient(160deg,#1f4a3a,#163a2d 60%,#123227);border:10px solid #c98a44;box-shadow:inset 0 0 0 2px #9c6127,0 14px 24px rgba(60,40,10,.25);color:#f4f1e6}
.tableau:after{content:"";position:absolute;left:-10px;right:-10px;bottom:-14px;height:8px;background:#a96a2c;border-radius:2px}
.craie{position:absolute;right:28px;bottom:-12px;width:26px;height:6px;background:#f7f3ea;border-radius:3px;z-index:2}
.tableau h4{font-family:Kalam;font-weight:400;font-size:17px;line-height:1.08;text-align:center;margin-top:8px}
.tableau .trait{width:120px;height:1.5px;background:#f4f1e6;opacity:.8;margin:4px auto 0}
.formule{position:absolute;left:14px;right:14px;bottom:12px;border:2.5px solid #a6e36f;border-radius:5px;text-align:center;font-family:Kalam;font-size:19px;padding:2px 0}
.tel{position:absolute;left:52px;top:35px;width:86px;height:160px;border-radius:16px;background:#15181c;padding:5px;box-shadow:0 16px 22px rgba(0,0,0,.38),0 2px 0 #3b4048 inset;z-index:5;transform:scale(.75);transform-origin:50% 50%}
.tel .encoche{position:absolute;left:50%;top:8px;width:26px;height:6px;margin-left:-13px;border-radius:4px;background:#0b0c0e}
.ecran{position:relative;width:100%;height:100%;border-radius:12px;overflow:hidden;background:radial-gradient(120% 70% at 50% 45%,#efe2c8,#d9c6a2)}
.clone{position:absolute;left:3px;top:35px;width:166px;height:184px;background-color:#fffaf7;background-image:linear-gradient(90deg,transparent 30px,#f2a3a3 30px,#f2a3a3 31px,transparent 31px),repeating-linear-gradient(0deg,transparent 0 11px,#d7e3f4 11px 12px),repeating-linear-gradient(90deg,transparent 0 11px,#e6eef9 11px 12px);transform:scale(.425);transform-origin:0 0;box-shadow:0 4px 8px rgba(0,0,0,.25);border-radius:4px}
.clone .c{position:absolute;left:34px;top:12px;right:8px}
.ui-haut{position:absolute;left:0;right:0;top:0;height:20px;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center;padding-bottom:3px}
.ui-haut span{font:600 6.5px Inter;color:#FFD24A;letter-spacing:.06em}
.ui-bas{position:absolute;left:0;right:0;bottom:0;height:26px;background:rgba(0,0,0,.55);display:grid;place-items:center}
.ui-bas i{width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(0,0,0,.4),0 0 0 3.5px #fff}
.cadre{position:absolute;left:1px;right:1px;top:31px;bottom:36px;background:linear-gradient(#FFD24A,#FFD24A) left top/9px 2px no-repeat,linear-gradient(#FFD24A,#FFD24A) left top/2px 9px no-repeat,linear-gradient(#FFD24A,#FFD24A) right top/9px 2px no-repeat,linear-gradient(#FFD24A,#FFD24A) right top/2px 9px no-repeat,linear-gradient(#FFD24A,#FFD24A) left bottom/9px 2px no-repeat,linear-gradient(#FFD24A,#FFD24A) left bottom/2px 9px no-repeat,linear-gradient(#FFD24A,#FFD24A) right bottom/9px 2px no-repeat,linear-gradient(#FFD24A,#FFD24A) right bottom/2px 9px no-repeat}
.foc{position:absolute;left:28px;top:62px;width:20px;height:20px;border:1.5px solid #FFD24A;border-radius:3px;opacity:.9}
.reflet{position:absolute;inset:0;background:linear-gradient(125deg,rgba(255,255,255,.28) 0,rgba(255,255,255,0) 38%)}
.lecteur{position:absolute;right:10px;top:0;width:214px;background:#fbf8f0;border-radius:16px;padding:7px;box-shadow:0 12px 24px rgba(60,40,10,.22);border:1px solid #e6dcc6}
.lecteur .tableau{position:relative;right:auto;top:auto;width:100%;height:auto;transform:none;border:6px solid #c98a44;border-radius:8px;padding:2px 7px 6px;box-shadow:inset 0 0 0 1.5px #9c6127}
.lecteur .tableau:after{display:none}.lecteur h4{font-size:13px;margin-top:2px}.lecteur .trait{width:130px;margin:2px auto 4px}
.corps{display:flex;align-items:center;gap:4px}.expl{font-family:Kalam;font-size:10.5px;line-height:1.2;color:#f4f1e6}
.expl .f{display:inline-block;border:1.8px solid #a6e36f;border-radius:4px;padding:0 4px;margin:3px 0;font-size:12px}
.ex{font-family:Kalam;font-size:9.5px;color:#f4f1e6;margin-top:3px}.ex b{color:#FFD24A}.cas{font-family:Kalam;font-size:11px;line-height:1.25;color:#FFD24A;border-top:1px dashed rgba(244,241,230,.35);padding-top:3px;margin-top:3px}.cas b{color:#fff3c4}
.ctrl{display:flex;align-items:center;gap:6px;margin:7px 2px 6px}.pp{width:22px;height:22px;border-radius:50%;background:#173B2C;display:grid;place-items:center;flex:none}
.barre{flex:1;height:5px;border-radius:5px;background:#e3dccb;overflow:hidden}.barre i{display:block;width:12%;height:100%;background:#7cbf4c}
.tps{font-size:9px;color:#5d5a52;font-weight:600}.onglets{display:flex;gap:3px}
.onglets span{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:3px;font-size:9.5px;font-weight:700;color:#173B2C;background:#efe8d8;border-radius:9px;padding:5px 3px}.onglets span.on{background:#c3ec96}
.fleche{position:absolute;left:150px;top:150px;z-index:6;width:46px;height:34px}
.cta{display:flex;align-items:center;gap:16px;width:100%;border-radius:26px;padding:16px 20px;font-family:Nunito;font-weight:900;font-size:25px;line-height:1.08;color:#173B2C;text-align:left}
.cta.p{background:linear-gradient(180deg,#c3ec96 0,#a6e36f 100%);border:2px solid #8cc957;box-shadow:0 6px 14px rgba(120,180,70,.28);margin-top:14px;padding:16px 20px}
.cta.s{background:#fbf7ee;border:2px solid #d9cdb4;font-size:20px;margin-top:8px;padding:5px 20px;justify-content:center}
.cta .ch{margin-left:auto}
.cta.s .ch{margin-left:auto}
.ecrire{display:flex;align-items:center;gap:10px;margin-top:8px;background:#fff;border:2px dashed #cdbf9f;border-radius:20px;padding:5px 6px 5px 16px}
.ecrire input{flex:1;border:0;outline:0;background:transparent;font:600 15.5px Inter;color:#173B2C;min-width:0}
.ecrire input::placeholder{color:#7a776d}
.ecrire .go{width:34px;height:34px;border-radius:50%;background:#173B2C;display:grid;place-items:center;flex:none}
.choix{display:grid;grid-template-columns:1.12fr 1fr 1fr;gap:8px;margin-top:12px}
.t{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:20px;padding:12px 4px 10px;background:#fbf7ee;border:2px solid #d9cdb4;font-family:Nunito;font-weight:900;font-size:15.5px;line-height:1.08;color:#173B2C;text-align:center;min-height:116px}
.t.p{background:linear-gradient(180deg,#c3ec96 0,#a6e36f 100%);border-color:#8cc957;box-shadow:0 6px 14px rgba(120,180,70,.28);font-size:16.5px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.d{display:flex;align-items:center;gap:9px;border-radius:20px;padding:10px 12px;background:#fbf7ee;border:2px solid #d9cdb4;font-family:Nunito;font-weight:900;font-size:16px;line-height:1.1;color:#173B2C;text-align:left}
.info{display:flex;align-items:center;justify-content:center;gap:10px;color:#5d5a52;font-size:15px;font-weight:500;margin:6px 0 0;font-size:13.5px}
.deco{position:relative;height:4px}
.deco svg{position:absolute;top:-6px}
nav{margin:auto -20px -14px;background:#fbf8f0;border-radius:26px 26px 0 0;display:flex;align-items:center;padding:12px 8px 10px;box-shadow:0 6px 18px rgba(80,60,20,.10)}
nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;color:#2b2f33;font-size:15px;font-weight:600;text-decoration:none;position:relative}
nav a.on{color:#4b8f2f;font-weight:700}
nav a.on:after{content:"";position:absolute;bottom:-8px;width:72%;height:5px;border-radius:5px;background:#7cbf4c}
nav .sep{width:1.5px;height:54px;background:#cfc7b6}
.jouer{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;border:3px solid #fff;background:#A6E36F;display:grid;place-items:center;box-shadow:0 0 0 8px rgba(166,227,111,.28),0 8px 18px rgba(0,0,0,.35);z-index:4;cursor:pointer;animation:pulse 1.8s ease-in-out infinite}
.jouer svg{margin-left:4px}.regarde{position:absolute;left:50%;top:calc(50% + 40px);transform:translateX(-50%);z-index:4;white-space:nowrap;font:800 12px Nunito;color:#173B2C;background:#fff;padding:3px 10px;border-radius:999px;box-shadow:0 3px 8px rgba(0,0,0,.25)}
.tableau>h4,.tableau>.trait,.tableau>.corps,.tableau>.cas,.tableau>.ex{filter:brightness(.8)}
@keyframes pulse{50%{box-shadow:0 0 0 14px rgba(166,227,111,.12),0 8px 18px rgba(0,0,0,.35)}}
@media (prefers-reduced-motion:reduce){.jouer{animation:none}}
.vid{position:fixed;inset:0;background:rgba(10,20,16,.92);z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px}
.vid[hidden]{display:none}.vid video{width:100%;max-width:900px;border-radius:10px;border:8px solid #c98a44;background:#123227}
.vid .fermer{align-self:flex-end;margin-bottom:12px;width:44px;height:44px;border-radius:50%;border:0;background:#fff;font:900 22px Nunito;color:#173B2C;cursor:pointer}
.vid p{color:#f4f1e6;font:700 15px Inter;margin-top:14px;text-align:center}

nav a.zt{position:relative}.zm{position:relative;display:block;width:30px;height:30px;margin:0 auto 1px}.zm img{width:30px;height:30px;border-radius:50%;border:2px solid #bfe48f;display:block}.zm i{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;background:#4cc35a;border:2px solid #fbf8f0}
nav{position:relative;overflow:visible!important}nav a.zc{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}.zr{position:absolute;top:-50px;left:50%;margin-left:-33px;width:66px;height:66px;border-radius:50%;padding:4px;background:linear-gradient(180deg,#c3ec96,#8cc957);box-shadow:0 8px 18px rgba(23,59,44,.28),0 0 0 6px #fbf8f0}.zr img{width:100%;height:100%;border-radius:50%;display:block}.zr i{position:absolute;right:3px;bottom:3px;width:14px;height:14px;border-radius:50%;background:#4cc35a;border:3px solid #fbf8f0}nav a.zc b{font:800 15px Nunito;color:#173B2C;margin-top:26px}
.decouv{display:flex;align-items:center;gap:10px;margin:10px 0 0;background:#f1fae6;border:2px solid #bfe48f;border-radius:16px;padding:10px 12px;font:600 13.5px/1.3 Inter;color:#173B2C}.decouv b{font-weight:800}.decouv .dn{flex:none;font:900 13px Nunito;background:#173B2C;color:#fff;border-radius:10px;padding:5px 8px}
.val{margin-top:14px}.vt{font:800 15px Nunito;color:#173B2C;text-align:center}.vg{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}.vi{display:flex;flex-direction:column;align-items:center;animation:vup .5s cubic-bezier(.3,1.4,.5,1) both}.ill{display:block;filter:drop-shadow(0 6px 8px rgba(60,40,10,.18));transform:rotate(-2deg)}.vi:nth-child(even) .ill{transform:rotate(3deg)}.vi b{font:900 19px Nunito;color:#173B2C;margin-top:4px;line-height:1}.vi small{font:700 11.5px/1.15 Inter;color:#5d675f;text-align:center}@keyframes vup{from{opacity:0;transform:translateY(10px)}}@media (prefers-reduced-motion:reduce){.vi{animation:none}}
/*dessus*/.cahier{z-index:6!important}.lecteur{z-index:1!important}.cahier{left:-16px!important;top:22px!important;transform:rotate(-6deg) scale(.96)!important;transform-origin:30% 40%}
/* ---- passage 13 : ajouts FONCTIONNELS seulement (le rendu ci-dessus = maquette accueil.html telle quelle) ---- */
label.cta,a.d,a.jouer,a.pp,nav a{cursor:pointer;text-decoration:none}
a.d,label.d{color:#173B2C}
.toast:not(.vu){display:none}
.pas-photo{position:fixed;left:12px;right:12px;bottom:96px;z-index:80;display:flex;align-items:center;gap:10px;background:#fff;border:2px solid #d9cdb4;border-radius:18px;padding:10px 12px;box-shadow:0 10px 24px rgba(60,40,10,.2);font:700 14px Inter;color:#173B2C}
.pas-photo span{flex:1}.pas-photo .btn{border:2px solid #8cc957;background:#c3ec96;border-radius:14px;padding:8px 12px;font:900 14px Nunito}.pas-photo .pp-x{border:0;background:#ece6d8;width:32px;height:32px;border-radius:50%;font:900 18px Nunito}
/* correctif A : look iso maquette, la page DÉFILE, barre des onglets FIXE en bas, contenu jamais caché */
nav{position:fixed!important;left:0;right:0;bottom:0;z-index:30;margin:0 auto!important;max-width:430px;padding-bottom:max(12px,env(safe-area-inset-bottom))!important}
.app{padding-bottom:120px!important}.navsp{display:none}
.val ~ .eclat{display:none}
/* aération (fondateur) */
.bulle{margin-top:16px!important}.titre{margin-top:14px!important}.sous{margin-top:12px!important}
.illu{margin-top:34px!important}
.cta.p{margin-top:30px!important}.duo{margin-top:16px!important}.info{margin-top:18px!important}
.val{margin-top:34px!important}.vg{margin-top:16px!important;row-gap:18px}

/* fondateur 14/11 : blocs Annales + Défi (REFERENCE-VALIDEE/ecrans/accueil-avec-defi.html, CSS repris tel quel) */
.ann{margin:26px 0 0;background:#fff;border:2.5px solid #173B2C;border-radius:24px;padding:16px 14px 14px;box-shadow:0 5px 0 #173B2C}
.ann .ah{display:flex;gap:12px;align-items:center}
.ann h3{font:900 19px Nunito;color:#173B2C;margin:0;line-height:1.15}
.ann .as{font:700 13.5px Nunito;color:#5d5a52;margin:8px 0 0}
.ann .ch{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.ann .ch span{font:800 12.5px Nunito;color:#173B2C;background:#F8F2E4;border:1.5px solid #e0d6bf;border-radius:999px;padding:5px 10px}
.ann .ch span.n{background:#fff0c2;border-color:#FFD24A}
.ann .ex{margin-top:12px;border-radius:16px;background:radial-gradient(80% 70% at 30% 20%,#2b6a50,#173B2C 65%);padding:12px 14px;color:#f4f1e6;border:4px solid #c98a44}
.ann .ex small{font:800 11.5px Nunito;color:#FFD24A;letter-spacing:.3px}
.ann .ex b{display:block;font:900 15px Nunito;margin-top:2px}
.ann .ex ol{margin:8px 0 0;padding-left:20px;font:700 13px Kalam,Nunito;color:#e9f3df;line-height:1.45}
.ann .ex ol li::marker{color:#a6e36f;font-weight:900}
.ann .go{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:12px;border-radius:16px;padding:12px;font:900 16px Nunito;color:#fff;background:linear-gradient(180deg,#8a7cf0,#7768E8);box-shadow:0 4px 0 #5446c4;text-decoration:none}
.dfh{margin:26px 0 6px;border-radius:24px;padding:16px 14px 0;overflow:hidden;background:radial-gradient(80% 60% at 50% 20%,#2b6a50,#173B2C 60%,#0f2a20);color:#f4f1e6;box-shadow:0 6px 0 #0f2a20}
.dfh .dtop{display:flex;justify-content:space-between;align-items:center}
.dfh .dpill{font:900 13px Nunito;color:#fff;background:linear-gradient(180deg,#8a7cf0,#7768E8);box-shadow:0 3px 0 #5446c4;border-radius:999px;padding:5px 12px}
.dfh .dchr{display:flex;gap:5px;align-items:center;font:900 13px Nunito;color:#FFD24A;border:1.5px solid rgba(255,210,74,.5);border-radius:999px;padding:4px 10px}
.dfh h3{font:900 19px Nunito;color:#fff;text-align:center;margin:12px 0 0}
.dfh p{font:700 13.5px Nunito;color:#cfe3d6;text-align:center;margin:5px 4px 0}
.dpod{display:flex;align-items:flex-end;justify-content:center;gap:8px;margin-top:18px}
.dpd{display:flex;flex-direction:column;align-items:center;width:90px;position:relative}
.dpd .dcr{margin-bottom:-4px}
.dpd .dav{display:block;width:50px;height:50px;border-radius:50%;overflow:hidden;border:3px solid #173B2C;box-shadow:0 0 0 3px rgba(255,210,74,.5)}
.dpd b{font:900 14px Nunito;margin-top:5px;color:#fff}
.dmar{width:100%;margin-top:6px;border-radius:12px 12px 0 0;display:grid;place-items:start center;padding-top:6px;font:900 28px Nunito;color:#173B2C}
.dfh .pas{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 -14px;padding:10px 10px 12px;background:#F8F2E4}
.dfh .pas span{font:800 12px Nunito;color:#173B2C;text-align:center;background:#fff;border-radius:12px;padding:7px 4px;box-shadow:0 2px 0 #e0d6bf}
.dfh .pas b{display:block;font:900 15px Nunito;color:#7768E8}
.ann .go,.dfh{text-decoration:none}

/* fondateur 14/11 : bloc défi de l'accueil en clair (trop de vert) */
.dfh{background:linear-gradient(180deg,#efeaff 0%,#ffffff 62%)!important;border:2.5px solid #173B2C!important;box-shadow:0 5px 0 #173B2C!important;color:#173B2C!important}
.dfh h3{color:#173B2C!important}
.dfh p{color:#5d5a52!important}
.dfh .dchr{color:#173B2C!important;border-color:#e0d6bf!important;background:#fff}
.dfh .dchr svg{stroke:#7768E8!important}
.dpd b{color:#173B2C!important}
.dpd .dav{box-shadow:0 0 0 3px rgba(119,104,232,.35)!important}
.dmar{box-shadow:inset 0 0 0 2.5px #173B2C}
.dfh .pas{background:#F8F2E4!important}