:root{
    --paper:#FBF5EA; --paper2:#F5EAD8; --card:#FFFDF8; --ink:#2E2A26; --soft:#8B8073;
    --line:#E2D5BF; --line2:#D8C6A6;
    --coral:#E4633F; --coral-d:#C24E2E; --teal:#2C7A74; --teal-d:#245F5A; --gold:#E0A32E;
    --green:#5E9A6A; --violet:#8E79BE;
    --stamp:#C24E2E;
    --shadow:rgba(94,72,44,.16);
  }
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
    --paper:#241E17; --paper2:#1C1712; --card:#2F281E; --ink:#F4ECDD; --soft:#B0A594;
    --line:#3A3125; --line2:#4A3F30;
    --coral:#EC7A57; --coral-d:#E4633F; --teal:#5BB5AD; --teal-d:#4FA59D; --gold:#E7B44E;
    --green:#84C089; --violet:#B7A2E0;
    --stamp:#EC7A57;
    --shadow:rgba(0,0,0,.34);
  }}
  :root[data-theme="dark"]{
    --paper:#241E17; --paper2:#1C1712; --card:#2F281E; --ink:#F4ECDD; --soft:#B0A594;
    --line:#3A3125; --line2:#4A3F30;
    --coral:#EC7A57; --coral-d:#E4633F; --teal:#5BB5AD; --teal-d:#4FA59D; --gold:#E7B44E;
    --green:#84C089; --violet:#B7A2E0;
    --stamp:#EC7A57;
    --shadow:rgba(0,0,0,.34);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--paper);color:var(--ink);
    font-family:"Nunito Sans",system-ui,-apple-system,sans-serif;line-height:1.6;
    -webkit-font-smoothing:antialiased}
  .view{display:none}
  .view.on{display:block;animation:fade .3s ease both}
  @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto}}
  a{color:inherit}
  h1,h2,h3{font-family:"Zilla Slab",system-ui,sans-serif;text-wrap:balance;line-height:1.12;margin:0}
  .wrap{max-width:1060px;margin:0 auto;padding:0 20px}
  .hand{font-family:"Zilla Slab",serif;font-weight:700}
  .btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;
    font-family:"Zilla Slab";font-weight:700;font-size:1rem;padding:12px 22px;border-radius:999px;
    text-decoration:none;transition:transform .12s ease,box-shadow .12s ease}
  .btn:active{transform:translateY(1px)}
  .btn-coral{background:var(--coral);color:#fff;box-shadow:0 8px 20px color-mix(in srgb,var(--coral) 45%,transparent)}
  .btn-coral:hover{background:var(--coral-d)}
  .btn-teal{background:var(--teal);color:#fff;box-shadow:0 8px 18px color-mix(in srgb,var(--teal) 40%,transparent)}
  .btn-teal:hover{background:var(--teal-d)}
  .btn-ghost{background:transparent;color:var(--ink);border:2px solid var(--line2)}
  .btn-ghost:hover{border-color:var(--coral);color:var(--coral)}
  :focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:6px}

  /* ---------- TOP NAV ---------- */
  .topnav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 86%,transparent);
    backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .topnav .wrap{display:flex;align-items:center;gap:14px;height:66px}
  .brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-family:"Zilla Slab";font-weight:800;
    font-size:1.16rem;color:var(--ink)}
  .brand img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid var(--gold);
    background:#FBE0CE}
  .navlinks{margin-left:auto;display:flex;align-items:center;gap:22px}
  .navlinks a.nl{font-weight:700;color:var(--soft);text-decoration:none;font-size:.96rem}
  .navlinks a.nl:hover{color:var(--coral)}
  @media(max-width:720px){.navlinks a.nl{display:none}}

  /* ---------- HERO ---------- */
  .hero{position:relative;overflow:hidden}
  .hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;
    padding-top:56px;padding-bottom:60px}
  .kicker{display:inline-flex;align-items:center;gap:8px;font-family:"Zilla Slab";font-weight:700;
    color:var(--teal-d);background:color-mix(in srgb,var(--teal) 15%,transparent);
    padding:6px 14px;border-radius:999px;font-size:.82rem;letter-spacing:.02em}
  .hero h1{font-size:clamp(2.1rem,5.2vw,3.5rem);font-weight:800;margin:16px 0 0}
  .hero h1 .u{color:var(--coral);position:relative;white-space:nowrap}
  .hero h1 .u::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.16em;
    background:var(--gold);border-radius:4px;opacity:.55;z-index:-1}
  .hero p.lead{font-size:1.14rem;color:var(--ink);max-width:34ch;margin:18px 0 0}
  .hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
  .trust{margin-top:22px;display:flex;align-items:center;gap:10px;color:var(--soft);font-size:.9rem;font-weight:600}
  .trust b{color:var(--green)}
  /* postcard stack */
  .stack{position:relative;height:400px}
  .pc{position:absolute;border-radius:18px;background:var(--card);border:1px solid var(--line);
    box-shadow:0 22px 44px var(--shadow);overflow:hidden}
  .pc.main{width:74%;left:12%;top:6%;transform:rotate(-4deg);z-index:3}
  .pc.main img{width:100%;height:230px;object-fit:cover;display:block}
  .pc.main .cap{padding:12px 15px 15px}
  .pc.main .cap .badge{display:inline-block;background:var(--coral);color:#fff;font-family:"Zilla Slab";
    font-weight:700;font-size:.68rem;padding:3px 10px;border-radius:999px;letter-spacing:.04em}
  .pc.main .cap h3{font-size:1.18rem;margin:.35em 0 .1em}
  .pc.main .cap .by{font-family:"Zilla Slab";font-size:1.16rem;color:var(--teal-d)}
  .pc.b2{width:52%;right:2%;top:0;height:150px;transform:rotate(6deg);z-index:2;
    background:linear-gradient(150deg,var(--teal),var(--teal-d));display:grid;place-items:center}
  .pc.b3{width:44%;left:2%;bottom:2%;height:120px;transform:rotate(-9deg);z-index:1;
    background:repeating-linear-gradient(45deg,var(--paper2),var(--paper2) 9px,var(--card) 9px,var(--card) 18px)}
  .pc.b2 .stamp{color:#fff;font-family:"Zilla Slab";font-weight:800;text-align:center;line-height:1.1}
  .pc.b2 .stamp small{display:block;font-family:"Zilla Slab";font-weight:700;font-size:1.1rem;opacity:.9}
  @media(max-width:820px){
    .hero .wrap{grid-template-columns:1fr;gap:8px;padding-top:34px;padding-bottom:30px}
    .hero p.lead{max-width:none}
    .stack{height:330px;margin-top:18px;order:2}
  }

  /* ---------- SECTION shell ---------- */
  section.band{padding:56px 0}
  .eyebrow{font-family:"Zilla Slab";font-weight:700;color:var(--coral);text-transform:uppercase;
    letter-spacing:.14em;font-size:.78rem}
  .h2{font-size:clamp(1.6rem,3.6vw,2.2rem);font-weight:800;margin:.2em 0 .1em}
  .sub{color:var(--soft);max-width:56ch;font-size:1.04rem}
  .center{text-align:center}
  .center .sub{margin-left:auto;margin-right:auto}

  /* ---------- HOW (route) ---------- */
  .route{position:relative;margin:38px auto 0;max-width:760px}
  .route::before{content:"";position:absolute;left:31px;top:26px;bottom:26px;width:0;
    border-left:3px dashed var(--line2)}
  @media(max-width:640px){.route::before{left:25px}}
  .step{position:relative;display:flex;gap:20px;align-items:flex-start;padding:14px 0 26px}
  .step .num{flex:0 0 auto;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
    background:var(--card);border:3px dashed var(--stamp);color:var(--stamp);font-family:"Zilla Slab";
    font-weight:800;font-size:1.5rem;transform:rotate(-6deg);z-index:1;box-shadow:0 6px 16px var(--shadow)}
  @media(max-width:640px){.step .num{width:52px;height:52px;font-size:1.2rem}}
  .step .body{padding-top:6px}
  .step .body h3{font-size:1.24rem}
  .step .body p{margin:.3em 0 0;color:var(--soft);max-width:52ch}
  .step .emoji{font-size:1.05rem}

  /* ---------- WHY (features) ---------- */
  .feats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
  @media(max-width:820px){.feats{grid-template-columns:1fr}}
  .feat{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px 22px 24px;
    box-shadow:0 10px 24px var(--shadow)}
  .feat .ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
    background:color-mix(in srgb,var(--c,var(--teal)) 16%,transparent);color:var(--c,var(--teal))}
  .feat .ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round}
  .feat h3{font-size:1.16rem;margin:14px 0 .2em}
  .feat p{margin:0;color:var(--soft);font-size:.98rem}

  /* ---------- OFFERS ---------- */
  .offers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px;align-items:stretch}
  @media(max-width:860px){.offers{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto}}
  .offer{position:relative;background:var(--card);border:1px solid var(--line);border-radius:20px;
    padding:26px 24px 26px;display:flex;flex-direction:column;box-shadow:0 12px 28px var(--shadow)}
  .offer.pop{border:2px solid var(--coral);box-shadow:0 20px 40px color-mix(in srgb,var(--coral) 24%,transparent)}
  .offer .tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--coral);
    color:#fff;font-family:"Zilla Slab";font-weight:700;font-size:.74rem;padding:5px 15px;border-radius:999px;
    letter-spacing:.05em;white-space:nowrap}
  .offer .oname{font-family:"Zilla Slab";font-weight:800;font-size:1.3rem}
  .offer .price{display:flex;align-items:baseline;gap:5px;margin:10px 0 2px}
  .offer .price .n{font-family:"Zilla Slab";font-weight:800;font-size:2.5rem;line-height:1;color:var(--ink)}
  .offer .price .per{color:var(--soft);font-weight:700;font-size:.95rem}
  .offer .blurb{color:var(--soft);font-size:.94rem;min-height:38px}
  .offer ul{list-style:none;padding:0;margin:16px 0 22px;display:flex;flex-direction:column;gap:9px}
  .offer li{display:flex;gap:10px;align-items:flex-start;font-size:.96rem;font-weight:600}
  .offer li svg{flex:0 0 auto;margin-top:3px}
  .offer .btn{width:100%;justify-content:center;margin-top:auto}
  .pricenote{text-align:center;margin-top:16px;color:var(--soft);font-family:"Zilla Slab";font-size:1.24rem}

  /* ---------- RGPD strip ---------- */
  .rgpd{background:linear-gradient(160deg,var(--teal),var(--teal-d));color:#fff;border-radius:22px;
    padding:34px 30px;display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;
    box-shadow:0 18px 40px color-mix(in srgb,var(--teal) 40%,transparent)}
  .rgpd .shield{font-size:3rem}
  .rgpd h3{color:#fff;font-size:1.4rem}
  .rgpd p{margin:.4em 0 0;opacity:.94;max-width:64ch}
  @media(max-width:640px){.rgpd{grid-template-columns:1fr;text-align:center}}

  /* ---------- FOOTER ---------- */
  footer.foot{background:var(--paper2);border-top:1px solid var(--line);margin-top:20px}
  footer.foot .wrap{padding:34px 20px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
  footer.foot .sig{font-family:"Zilla Slab";font-size:1.5rem;color:var(--coral)}
  footer.foot .mini{margin-left:auto;color:var(--soft);font-size:.88rem}

  /* ---------- LOGIN ---------- */
  .authwrap{min-height:calc(100vh - 0px);display:grid;place-items:center;padding:40px 20px}
  .authcard{width:100%;max-width:400px;background:var(--card);border:1px solid var(--line);
    border-radius:22px;padding:32px 28px;box-shadow:0 22px 50px var(--shadow)}
  .authcard .top{text-align:center;margin-bottom:8px}
  .authcard .top img{width:60px;height:60px;border-radius:50%;object-fit:cover;border:2px solid var(--gold)}
  .authcard h2{font-size:1.5rem;margin:12px 0 2px}
  .authcard .top p{color:var(--soft);margin:0;font-size:.94rem}
  .field{margin-top:16px}
  .field label{display:block;font-weight:700;font-size:.9rem;margin-bottom:6px}
  .field input{width:100%;padding:12px 14px;border:2px solid var(--line2);border-radius:12px;
    background:var(--paper);color:var(--ink);font-size:1rem;font-family:inherit}
  .field input:focus{outline:none;border-color:var(--teal)}
  .authcard .btn{width:100%;justify-content:center;margin-top:20px}
  .authcard .alt{text-align:center;margin-top:16px;color:var(--soft);font-size:.9rem}
  .authcard .alt a{color:var(--teal-d);font-weight:700;text-decoration:none;cursor:pointer}
  .demoflag{text-align:center;margin-top:14px;font-family:"Zilla Slab";font-size:1.16rem;color:var(--soft)}

  /* ---------- APP BAR ---------- */
  .appbar{position:sticky;top:0;z-index:40;background:var(--card);border-bottom:1px solid var(--line);
    box-shadow:0 4px 16px var(--shadow)}
  .appbar .wrap{display:flex;align-items:center;gap:12px;height:64px}
  .appbar .brand img{width:36px;height:36px}
  .appbar .who{margin-left:auto;display:flex;align-items:center;gap:14px}
  .appbar .who .name{font-weight:700;font-size:.94rem}
  @media(max-width:560px){.appbar .who .name{display:none}}
  .iconbtn{background:transparent;border:0;cursor:pointer;color:var(--soft);font-weight:700;font-size:.9rem;
    display:inline-flex;align-items:center;gap:6px}
  .iconbtn:hover{color:var(--coral)}
  .backbtn{background:transparent;border:0;cursor:pointer;color:var(--ink);font-family:"Zilla Slab";
    font-weight:700;font-size:1rem;display:inline-flex;align-items:center;gap:6px}

  /* ---------- LIBRARY ---------- */
  .appmain{padding:30px 0 70px}
  .apphead{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
  .apphead h2{font-size:1.7rem}
  .apphead .hint{color:var(--soft);font-family:"Zilla Slab";font-size:1.3rem}
  .apphead .btn{margin-left:auto}
  .shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  @media(max-width:820px){.shelf{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:480px){.shelf{grid-template-columns:1fr}}
  .book{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;
    box-shadow:0 12px 26px var(--shadow);text-decoration:none;color:inherit;display:flex;flex-direction:column;
    transition:transform .14s ease,box-shadow .14s ease}
  .book:hover{transform:translateY(-4px);box-shadow:0 20px 38px var(--shadow)}
  .book .cov{height:150px;position:relative;overflow:hidden;background:var(--teal)}
  .book .cov img{width:100%;height:100%;object-fit:cover;display:block}
  .book .cov .ep{position:absolute;left:12px;bottom:12px;background:rgba(0,0,0,.42);color:#fff;
    backdrop-filter:blur(3px);font-family:"Zilla Slab";font-weight:700;font-size:.74rem;padding:4px 11px;
    border-radius:999px}
  .book .bb{padding:15px 17px 18px}
  .book .bb .child{font-family:"Zilla Slab";font-size:1.2rem;color:var(--teal-d);line-height:1}
  .book .bb h3{font-size:1.16rem;margin:2px 0 .25em}
  .book .bb .meta{color:var(--soft);font-size:.86rem}
  .book.add{border:2px dashed var(--line2);box-shadow:none;background:transparent;align-items:center;
    justify-content:center;text-align:center;min-height:230px;color:var(--soft)}
  .book.add:hover{border-color:var(--coral);color:var(--coral);transform:none}
  .book.add .plus{font-size:2.4rem;line-height:1;font-family:"Zilla Slab";font-weight:800}
  .book.add .t{font-family:"Zilla Slab";font-weight:700;margin-top:6px}

  /* ---------- CREATE FORM ---------- */
  .formwrap{max-width:660px;margin:0 auto}
  .fstep{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px 22px;
    margin-bottom:18px;box-shadow:0 10px 24px var(--shadow)}
  .fstep .lab{display:flex;align-items:center;gap:10px;font-family:"Zilla Slab";font-weight:700;font-size:1.1rem}
  .fstep .lab .s{width:28px;height:28px;border-radius:50%;background:var(--coral);color:#fff;
    display:grid;place-items:center;font-size:.9rem;flex:0 0 auto}
  .fstep .help{color:var(--soft);font-size:.9rem;margin:6px 0 14px;padding-left:38px}
  .fstep .ctl{padding-left:38px}
  @media(max-width:520px){.fstep .help,.fstep .ctl{padding-left:0}}
  select.pill,input.pill{width:100%;padding:12px 14px;border:2px solid var(--line2);border-radius:12px;
    background:var(--paper);color:var(--ink);font-size:1rem;font-family:inherit}
  select.pill:focus,input.pill:focus{outline:none;border-color:var(--teal)}
  .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
  .chip{background:color-mix(in srgb,var(--teal) 15%,transparent);color:var(--teal-d);font-weight:700;
    padding:6px 12px;border-radius:999px;font-size:.9rem;display:inline-flex;align-items:center;gap:7px}
  .chip button{background:transparent;border:0;color:inherit;cursor:pointer;font-size:1.1rem;line-height:1;padding:0}
  .kwrow{display:flex;gap:8px}
  .kwrow input{flex:1}
  .kwrow .btn{padding:10px 16px}
  .maxnote{color:var(--soft);font-size:.82rem;margin-top:8px;font-weight:600}
  .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  @media(max-width:520px){.tiles{grid-template-columns:repeat(2,1fr)}}
  .tile{border:2px solid var(--line2);background:var(--paper);border-radius:14px;padding:14px 8px;
    text-align:center;cursor:pointer;transition:border-color .12s,transform .12s;font-weight:700;font-size:.92rem}
  .tile .em{font-size:1.6rem;display:block;margin-bottom:5px}
  .tile:hover{transform:translateY(-2px)}
  .tile.sel{border-color:var(--coral);background:color-mix(in srgb,var(--coral) 12%,transparent);color:var(--coral-d)}
  .narrs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  .narr{border:2px solid var(--line2);background:var(--paper);border-radius:14px;padding:14px 8px;text-align:center;
    cursor:pointer;transition:border-color .12s,transform .12s}
  .narr:hover{transform:translateY(-2px)}
  .narr.sel{border-color:var(--coral);background:color-mix(in srgb,var(--coral) 12%,transparent)}
  .narr .av{width:52px;height:52px;border-radius:50%;margin:0 auto 6px;display:grid;place-items:center;
    font-size:1.7rem;overflow:hidden;border:2px solid var(--gold);background:#FBE0CE}
  .narr .av img{width:100%;height:100%;object-fit:cover}
  .narr .nn{font-family:"Zilla Slab";font-weight:700}
  .narr .role{color:var(--soft);font-size:.78rem;font-weight:600}
  .drop{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;
    min-height:150px;border:2px dashed var(--line2);border-radius:14px;padding:26px 16px;text-align:center;
    cursor:pointer;transition:border-color .12s,background .12s;background:var(--paper)}
  .drop:hover{border-color:var(--teal);background:color-mix(in srgb,var(--teal) 7%,var(--paper))}
  .drop .di{font-size:2rem}
  .drop .dt{font-family:"Zilla Slab";font-weight:700;margin-top:6px}
  .drop .ds{color:var(--soft);font-size:.86rem}
  .previews{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
  .previews .pv{width:78px;height:78px;border-radius:12px;overflow:hidden;position:relative;border:1px solid var(--line)}
  .previews .pv img{width:100%;height:100%;object-fit:cover}
  .previews .pv button{position:absolute;top:2px;right:2px;background:rgba(0,0,0,.55);color:#fff;border:0;
    width:20px;height:20px;border-radius:50%;cursor:pointer;font-size:.8rem;line-height:1}
  .secnote{display:flex;gap:10px;align-items:flex-start;background:color-mix(in srgb,var(--green) 12%,transparent);
    border:1px solid color-mix(in srgb,var(--green) 40%,transparent);border-radius:14px;padding:13px 16px;
    color:var(--ink);font-size:.9rem;margin-bottom:18px}
  .secnote b{color:var(--green)}
  .submitbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
  .submitbar .btn{font-size:1.05rem;padding:14px 26px}
  .submitbar .note{color:var(--soft);font-family:"Zilla Slab";font-size:1.2rem}

  /* ---------- SUCCESS OVERLAY ---------- */
  .overlay{position:fixed;inset:0;z-index:80;background:color-mix(in srgb,var(--ink) 55%,transparent);
    display:none;place-items:center;padding:20px;backdrop-filter:blur(4px)}
  .overlay.on{display:grid;animation:fade .25s ease both}
  .succard{background:var(--card);border-radius:22px;padding:34px 30px;max-width:400px;text-align:center;
    box-shadow:0 30px 60px rgba(0,0,0,.4)}
  .succard .big{font-size:3rem}
  .succard h3{font-size:1.5rem;margin:10px 0 4px}
  .succard p{color:var(--soft);margin:0 0 20px}
  .succard .btn{width:100%;justify-content:center}
  .spin{width:46px;height:46px;border-radius:50%;border:5px solid var(--line);border-top-color:var(--coral);
    margin:6px auto 0;animation:sp 1s linear infinite}
  @keyframes sp{to{transform:rotate(360deg)}}

/* --- afficher le mot de passe (oeil) --- */
.pw{position:relative}
.pw input{width:100%;padding-right:46px}
.pweye{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:0;cursor:pointer;
    line-height:1;opacity:.55;padding:6px;color:var(--ink);display:flex;align-items:center}
  .pweye svg{width:19px;height:19px;display:block}
  .pweye .o2,.pweye.on .o1{display:none}
  .pweye.on .o2{display:block}
.pweye:hover{opacity:.9}


/* ====================================================================
   HEADERS RESPONSIVE — bloc UNIQUE (remplace tous les anciens "AJOUT")
   ==================================================================== */

.brand{white-space:nowrap}
.btn{white-space:nowrap}

.burger{display:none;background:transparent;border:0;cursor:pointer;
  font-size:1.6rem;line-height:1;color:var(--ink);padding:4px 8px;margin-left:auto}
  .burger svg{width:22px;height:22px;display:block}

@media (max-width:760px){
  .appbar .wrap{position:relative;height:58px;gap:10px}
  .appbar .brand{font-size:1.02rem;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .appbar .brand img{width:34px;height:34px;flex:0 0 auto}
  .appbar .burger{display:block}

  .appbar .who{position:absolute;top:100%;right:8px;left:8px;margin-top:6px;
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--card);border:1px solid var(--line);border-radius:14px;
    box-shadow:0 14px 34px var(--shadow);padding:6px;display:none;z-index:60}
  .appbar .who.open{display:flex}
  .appbar .who .name{display:block;padding:10px 12px;color:var(--soft);
    border-bottom:1px solid var(--line);margin:0 0 2px}
  .appbar .who .iconbtn{padding:12px;border-radius:10px;justify-content:flex-start;font-size:.98rem}
  .appbar .who .iconbtn:hover{background:color-mix(in srgb,var(--coral) 10%,transparent)}

  .topnav .wrap{height:58px;flex-wrap:nowrap;gap:10px}
  .topnav .brand{font-size:1.02rem;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .topnav .navlinks{margin-left:auto;gap:10px}
  .topnav .navlinks .btn{padding:10px 16px;font-size:.92rem}

  .wrap{padding-left:max(18px,env(safe-area-inset-left));
        padding-right:max(18px,env(safe-area-inset-right))}
  .appmain{padding-top:22px}
}

/* ================= ESPACE PARENT — refonte 18/09 (v=5) ================= */

/* --- L'alerte unique (une seule à la fois, priorisée côté PHP) --- */
.alert{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:14px;
  border:1px solid;text-decoration:none;color:var(--ink);margin-bottom:18px}
.alert .ic{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  flex-shrink:0;border-radius:50%;color:#fff}
.alert .tx{flex-grow:1;min-width:0}
.alert .tx b{display:block;font-family:'Zilla Slab',serif;font-weight:700;font-size:.97rem;line-height:1.25}
.alert .tx span{display:block;font-size:.82rem;color:var(--soft);margin-top:2px;line-height:1.35}
.alert .go{display:inline-flex;align-items:center;gap:4px;flex-shrink:0;font-family:'Zilla Slab',serif;
  font-weight:700;font-size:.85rem;color:var(--coral-d)}
.alert.coral{background:color-mix(in srgb,var(--coral) 10%,var(--card));border-color:var(--coral)}
.alert.coral .ic{background:var(--coral)}
.alert.gold{background:color-mix(in srgb,var(--gold) 13%,var(--card));border-color:var(--gold)}
.alert.gold .ic{background:var(--gold)}
.alert.gold .go{color:#8A6710}
.alert.teal{background:color-mix(in srgb,var(--teal) 10%,var(--card));border-color:var(--teal)}
.alert.teal .ic{background:var(--teal)}
.alert.teal .go{color:var(--teal-d)}

/* --- Jauge de quota --- */
.quotabar{display:flex;align-items:center;gap:10px;margin-top:10px}
.quotabar .track{flex-grow:1;height:7px;border-radius:999px;overflow:hidden;
  background:color-mix(in srgb,var(--line) 75%,transparent)}
.quotabar .fill{display:block;height:100%;border-radius:999px;background:var(--teal);transition:width .3s}
.quotabar .fill.full{background:var(--coral)}
.quotabar .n{font-size:.78rem;color:var(--soft);white-space:nowrap}
.quotaline{margin-top:5px;font-size:.78rem;color:var(--soft)}

/* --- La carte ENFANT --- */
.kid{background:var(--card);border:1px solid var(--line);border-radius:20px;
  box-shadow:0 10px 22px var(--shadow);overflow:hidden;margin-bottom:18px}
.kid .head{display:flex;align-items:center;gap:12px;padding:15px 15px 13px;
  border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.kid .av{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  flex-shrink:0;border-radius:50%;color:#fff;font-family:'Zilla Slab',serif;font-weight:700;font-size:1.2rem}
.kid .who{flex-grow:1;min-width:0}
.kid .who b{display:block;font-family:'Zilla Slab',serif;font-weight:700;font-size:1.2rem;line-height:1.2}
.kid .who span{display:block;font-size:.78rem;color:var(--soft);margin-top:1px}

/* --- La ligne CARNET --- */
.crow{padding:14px 15px;border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.crow .top{display:flex;gap:12px}
.crow .mini{width:52px;height:66px;flex-shrink:0;border-radius:5px 10px 10px 5px;
  box-shadow:inset 4px 0 0 rgba(0,0,0,.16);display:flex;align-items:flex-end;padding:7px;box-sizing:border-box}
.crow .mini span{font-family:'Zilla Slab',serif;font-weight:700;font-size:.69rem;color:#fff;
  line-height:1.15;overflow:hidden;word-break:break-word}
.crow .inf{flex-grow:1;min-width:0}
.crow .inf b{display:block;font-family:'Zilla Slab',serif;font-weight:700;font-size:1rem;line-height:1.25}
.crow .inf .m{display:block;font-size:.78rem;color:var(--soft);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.tagx{display:inline-flex;align-items:center;gap:5px;margin-top:7px;padding:3px 9px;
  border-radius:999px;font-size:.72rem;font-weight:800;line-height:1.4}
.tagx.wait,.tagx.err{background:color-mix(in srgb,var(--coral) 15%,transparent);color:var(--coral-d)}
.tagx.prep{background:color-mix(in srgb,var(--gold) 20%,transparent);color:#7A5C10}

/* --- Les actions d'une ligne carnet --- */
.acts{display:flex;gap:8px;margin-top:13px}
.acts .main{flex-grow:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:46px;border-radius:13px;text-decoration:none;font-family:'Zilla Slab',serif;font-weight:700;
  font-size:.92rem;cursor:pointer;border:1px solid var(--teal);background:none;color:var(--teal-d)}
.acts .main:hover{background:color-mix(in srgb,var(--teal) 8%,transparent)}
.acts .main.go{border:0;background:var(--coral);color:#fff}
.acts .main.go:hover{background:var(--coral-d)}
.iconb{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;flex-shrink:0;
  border:1px solid var(--line);border-radius:13px;background:var(--paper);color:var(--teal-d);
  cursor:pointer;text-decoration:none;font-size:.95rem;font-family:inherit}
.iconb:hover{background:var(--paper2)}
.iconb.dots{color:var(--ink);font-weight:800;letter-spacing:.06em;padding:0}
.kid .head .iconb{width:44px;height:44px;border-radius:12px}

/* --- Le menu « ••• » --- */
.menu{margin-top:9px;border:1px solid var(--line);border-radius:13px;background:var(--paper);overflow:hidden}
.menu[hidden]{display:none}
.menu a{display:flex;align-items:center;gap:10px;padding:13px 14px;text-decoration:none;color:var(--ink);
  font-size:.86rem;border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.menu a:last-child{border-bottom:0}
.menu a:hover{background:var(--card)}
.menu a svg{color:var(--teal-d);flex-shrink:0}

/* --- Inviter un proche (pied de la carte enfant) --- */
.kidfoot{padding:12px 15px 15px}
.invite{width:100%;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;
  gap:8px;height:46px;border:1px dashed var(--line2);border-radius:13px;background:none;color:var(--soft);
  font-family:'Zilla Slab',serif;font-weight:700;font-size:.87rem;text-decoration:none;cursor:pointer}
.invite:hover{background:var(--paper);color:var(--ink)}
.invite.off{opacity:.65;cursor:not-allowed}
.invite.off:hover{background:none;color:var(--soft)}

/* --- Bouton « ＋ Enfant » de l'entête --- */
.appmain .btn.btn-ghost svg{flex-shrink:0}

/* =========================================================
   PAGE DE DÉPÔT PUBLIQUE (deposer.php) — refonte 24/09
   ========================================================= */

/* La zone de texte « raconte en deux mots » : même pilule que les champs. */
textarea.pill{width:100%;padding:12px 14px;border:2px solid var(--line2);border-radius:12px;
  background:var(--paper);color:var(--ink);font:inherit;line-height:1.5;resize:vertical;min-height:88px}
textarea.pill:focus{outline:none;border-color:var(--teal)}

/* Les vignettes d'ambiance sont maintenant de VRAIS boutons radio dans un
   <label> : la sélection marche même sans JavaScript. Le rond est masqué,
   c'est :has(:checked) qui colore la vignette. */
.tile{position:relative}
.tile input[type=radio]{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.tile:has(input:checked){border-color:var(--coral);
  background:color-mix(in srgb,var(--coral) 12%,transparent);color:var(--coral-d)}
.tile:has(input:focus-visible){outline:3px solid var(--teal);outline-offset:2px}

/* Bandeau d'erreur (même gabarit que .secnote, en rouge) */
.secnote.derr{background:color-mix(in srgb,#D2544B 12%,transparent);border-color:#D2544B55}

/* « Tu déposes, Pip raconte » — ce que devient le dépôt, tout en haut */
.dintro{display:flex;gap:14px;align-items:flex-start;background:var(--card);
  border:1px solid var(--line);border-radius:18px;padding:16px 18px;margin-bottom:18px;
  font-size:.95rem;color:var(--soft);line-height:1.55}
.dintro b{color:var(--ink);font-family:"Zilla Slab";font-weight:700;display:block;margin-bottom:2px}
.dpip{width:46px;height:46px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:2px solid var(--gold);background:#FBE0CE}
.dwhat{display:inline-block;margin-top:8px;color:var(--teal-d);font-weight:700;
  font-size:.88rem;text-decoration:none}
.dwhat:hover{text-decoration:underline}

/* Les 3 étapes (page de confirmation) */
.dhow{display:flex;flex-direction:column;gap:9px}
.dstep{display:flex;gap:10px;align-items:flex-start;color:var(--soft);font-size:.93rem}
.dstep .dn{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--teal);color:#fff;
  font-family:"Zilla Slab";font-weight:700;font-size:.8rem;display:flex;align-items:center;
  justify-content:center;margin-top:2px}

/* Petit intertitre à l'intérieur d'une étape */
.dsub{margin:16px 0 8px;font-family:"Zilla Slab";font-weight:700;font-size:.97rem}

/* Choix des enfants (fratrie) */
.dkids{display:flex;flex-direction:column;gap:8px}
.dkid{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);
  border-radius:12px;cursor:pointer;background:var(--paper)}
.dkid input{width:18px;height:18px;accent-color:var(--teal);flex-shrink:0}
.dkid:has(input:checked){border-color:var(--teal);
  background:color-mix(in srgb,var(--teal) 8%,transparent)}

/* Consentement RGPD — obligatoire, donc visible sans être pesant */
.dcheck{display:flex;gap:11px;align-items:flex-start;margin-top:16px;padding:13px 14px;
  border:1px dashed var(--line2);border-radius:13px;cursor:pointer;
  color:var(--soft);font-size:.88rem;line-height:1.5}
.dcheck input{width:20px;height:20px;accent-color:var(--teal);flex-shrink:0;margin-top:1px}
.dcheck a{color:var(--teal-d);font-weight:700;text-decoration:none;white-space:nowrap}
.dcheck a:hover{text-decoration:underline}
.dcheck:has(input:checked){border-style:solid;border-color:var(--teal);
  background:color-mix(in srgb,var(--teal) 6%,transparent)}

/* Barre d'envoi : collée en bas sur mobile, on ne la cherche pas */
.dsend{position:sticky;bottom:0;display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  padding:14px 0 18px;background:linear-gradient(to top,var(--paper) 62%,transparent)}
.dsend .btn{font-size:1.05rem;padding:14px 26px}
.dsend .btn:disabled{opacity:.6;cursor:progress;box-shadow:none}
.dsend .note{color:var(--soft);font-family:"Zilla Slab";font-size:1.05rem;flex:1;min-width:14ch}

/* --- Fiche personnage d'un carnet (modifier-carnet.php) --- */
.persorow{display:flex;gap:16px;align-items:flex-start;margin-top:14px;flex-wrap:wrap}
.persoimg{width:150px;height:150px;object-fit:cover;border-radius:14px;border:1px solid var(--line);
  background:var(--paper);flex:0 0 auto}
.persorow > div{flex:1;min-width:180px}
.lienbtn{background:none;border:0;padding:0;font:inherit;color:var(--teal-d);font-weight:700;
  text-decoration:underline;cursor:pointer}

/* --- Mise en route : les trois jalons (demarrer.php et espace.php) --- */
.jalons{list-style:none;display:flex;flex-direction:column;gap:10px;margin:0 0 20px;padding:16px 18px;
  background:var(--card);border:1px solid var(--line);border-radius:16px}
.jalons li{display:flex;align-items:center;gap:11px;color:var(--soft);font-size:.95rem}
.jalons .pastille{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--paper2);
  color:var(--soft);font-family:'Zilla Slab',serif;font-weight:700;font-size:.85rem;
  display:flex;align-items:center;justify-content:center}
.jalons li.ici{color:var(--ink);font-weight:700}
.jalons li.ici .pastille{background:var(--coral);color:#fff}
.jalons li.fait .pastille{background:var(--green);color:#fff}

/* Deux chemins possibles pour la premiere histoire */
.choix{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.choix{grid-template-columns:1fr}}
.choix .c{border:1px solid var(--line);border-radius:14px;padding:16px 15px;background:var(--paper)}
.choix .c b{font-family:'Zilla Slab',serif;font-size:1.02rem;display:block;margin-bottom:6px}
.choix .c p{color:var(--soft);font-size:.89rem;line-height:1.5;margin:0 0 12px}
.choix .c .btn{width:100%;justify-content:center;padding:10px 14px;font-size:.95rem}

/* Le fil de mise en route, en haut de « Mes carnets » */
.fil{display:flex;align-items:center;gap:14px;flex-wrap:wrap;text-decoration:none;
  background:var(--card);border:1px solid var(--line2);border-radius:15px;
  padding:13px 16px;margin-bottom:18px}
.fil:hover{border-color:var(--coral)}
.fil ol{list-style:none;display:flex;gap:16px;flex-wrap:wrap;margin:0;padding:0;flex:1}
.fil li{display:flex;align-items:center;gap:7px;color:var(--soft);font-size:.88rem;font-weight:600}
.fil li span{width:21px;height:21px;border-radius:50%;background:var(--paper2);color:var(--soft);
  font-family:'Zilla Slab',serif;font-weight:700;font-size:.76rem;
  display:flex;align-items:center;justify-content:center}
.fil li.ici{color:var(--ink)}
.fil li.ici span{background:var(--coral);color:#fff}
.fil li.fait span{background:var(--green);color:#fff}
.fil .go{display:inline-flex;align-items:center;gap:6px;color:var(--teal-d);font-weight:700;font-size:.9rem}

/* --- Page Outils (admin) --- */
.etat{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.etat li{color:var(--soft);font-size:.9rem;line-height:1.5}
.etat li b{color:var(--ink);display:inline-block;min-width:150px}
.etat code{font-size:.82rem;background:var(--paper2);padding:1px 6px;border-radius:5px}
.outil{display:block;text-decoration:none;background:var(--card);border:1px solid var(--line);
  border-radius:15px;padding:15px 17px;margin-bottom:10px}
.outil:hover{border-color:var(--teal)}
.outil .t{display:block;font-family:'Zilla Slab',serif;font-weight:700;font-size:1.06rem;color:var(--ink)}
.outil .d{display:block;color:var(--soft);font-size:.89rem;line-height:1.5;margin:4px 0 6px}
.outil .u{display:block;color:var(--teal-d);font-size:.8rem;font-weight:700}

/* --- Narrateur en vrais boutons radio (creer.php) --- */
.narr{position:relative;cursor:pointer;display:block}
.narr input[type=radio]{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.narr:has(input:checked){border-color:var(--coral);background:color-mix(in srgb,var(--coral) 12%,transparent)}
.narr:has(input:focus-visible){outline:3px solid var(--teal);outline-offset:2px}