/* Espace client de Hooky : connexion, boîte de réception, conversation.
   Mêmes couleurs et polices que la page de vente (direction « Poche »). */
:root{/* cr crème, en encre, co corail, ct corail pour texte, bu bulle, pe pêche, li lilas, me menthe, mt menthe pour texte, gr gris texte, ec écran, sa sable, fi filet */
--cr:#FFF7EE;--en:#1F1B2D;--co:#FF5B3A;--ct:#B23216;--bu:#D63C1E;--pe:#FFD9C7;--li:#ECE7FF;--me:#2BB673;--mt:#177A4B;--gr:#5E5869;--ec:#FFFCF8;--sa:#F4EEE8;--fi:rgba(31,27,45,.09);
--lila:#8B6CFF;--burger:#F28C28;--ines:#3D7DF2;--yoga:#E0A800;
--ti:"Bricolage Grotesque","Avenir Next",system-ui,-apple-system,"Segoe UI",sans-serif;--tx:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--mo:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--om:0 34px 64px -34px rgba(120,52,24,.36),0 12px 26px -16px rgba(31,27,45,.18);--os:0 22px 44px -30px rgba(120,52,24,.32),0 4px 14px -8px rgba(31,27,45,.1)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--cr);color:var(--en);font:400 1rem/1.55 var(--tx);-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--ti);font-weight:700;line-height:1.08;letter-spacing:-.025em;text-wrap:balance}
p{margin:0}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--lila);outline-offset:2px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ico{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dot{display:inline-block;flex:none;width:.6em;height:.6em;border-radius:50%;background:var(--c,var(--co))}

/* Logo */
.logo{display:inline-flex;align-items:center;gap:.4em;text-decoration:none;font:800 1.45rem/1 var(--ti);letter-spacing:-.045em}
.logo svg{width:1.4em;height:1.4em;color:var(--co)}
.logo .hk-d{fill:var(--cr)}
.logo{--hk-d:var(--cr)}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:50px;padding:.75em 1.35em;border:0;border-radius:999px;font:700 1rem/1.15 var(--tx);text-decoration:none;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s}
.btn-c{background:var(--co);color:var(--en);box-shadow:0 14px 26px -14px rgba(214,60,30,.95),inset 0 -3px 0 rgba(31,27,45,.14)}
.btn-c:hover{transform:translateY(-1px)}
.btn-l{background:#fff;color:var(--en);box-shadow:inset 0 0 0 1.5px rgba(31,27,45,.16)}
.btn-l:hover{box-shadow:inset 0 0 0 1.5px var(--en)}
.btn-s{min-height:40px;padding:.5em 1em;font-size:.9rem}
.btn-n{background:var(--en);color:var(--cr)}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.lien{border:0;padding:0;background:none;font-weight:700;color:var(--ct);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* Champs */
.champ{display:grid;gap:6px}
.champ label{font-weight:700;font-size:.92rem}
.champ small{color:var(--gr);font-size:.84rem}
.saisie{width:100%;min-height:50px;padding:.7em 1em;border:0;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1.5px rgba(31,27,45,.14);font-size:1rem;transition:box-shadow .2s}
.saisie:hover{box-shadow:inset 0 0 0 1.5px rgba(31,27,45,.3)}
.saisie:focus{outline:0;box-shadow:inset 0 0 0 2px var(--en),0 0 0 4px var(--li)}
.saisie[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--bu)}
.erreur{display:flex;gap:.5em;align-items:flex-start;color:var(--ct);font-size:.88rem;font-weight:600}

/* Avatars et pastilles */
.av{position:relative;display:grid;flex:none;place-items:center;width:42px;height:42px;border-radius:50%;background:color-mix(in srgb,var(--c,var(--co)) 22%,#fff);font-weight:700;color:var(--en)}
.av.on::after{content:"";position:absolute;right:0;bottom:0;width:11px;height:11px;border-radius:50%;background:var(--me);box-shadow:0 0 0 2.5px var(--ec)}
.chip{display:inline-flex;flex:none;align-items:center;gap:.45em;min-height:36px;padding:.35em .9em;border:0;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--fi);font-size:.88rem;font-weight:600;white-space:nowrap;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--en);color:var(--cr);box-shadow:none}
.badge{display:inline-grid;place-items:center;min-width:1.45em;height:1.45em;padding:0 .4em;border-radius:999px;background:var(--co);color:var(--en);font-size:.75rem;font-weight:800}
.soon{padding:.2em .6em;border-radius:999px;background:var(--li);font:700 .72rem/1.4 var(--tx);color:#43378A}

/* Coquille de l'espace (coquille.js) : rail à gauche sur ordinateur, onglets en bas sur mobile */
.app{display:grid;height:100dvh;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
@media(min-width:720px){.app{grid-template-columns:76px minmax(0,1fr);grid-template-rows:minmax(0,1fr)}}
@media(min-width:1180px){.app{grid-template-columns:240px minmax(0,1fr)}}
.rail{grid-row:2;display:flex;background:var(--ec);border-top:1px solid var(--fi);padding-bottom:env(safe-area-inset-bottom)}
@media(min-width:720px){.rail{grid-row:auto;flex-direction:column;gap:6px;padding:20px 12px;border-top:0;border-right:1px solid var(--fi)}}
.rail .logo{display:none}
@media(min-width:720px){.rail .logo{display:inline-flex;margin:0 0 18px 10px}.rail .logo span{display:none}}
@media(min-width:1180px){.rail .logo span{display:inline}}
.compte{display:none}
@media(min-width:1180px){.compte{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding:10px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--fi)}
.compte .av{width:36px;height:36px;border-radius:11px;font-size:.95rem}.compte b{display:block;font-size:.92rem;line-height:1.2}.compte small{color:var(--gr);font-size:.8rem}}
.nav{display:flex;flex:1;justify-content:space-around}
@media(min-width:720px){.nav{flex:none;flex-direction:column;gap:4px}}
.nav a,.nav button{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 6px 8px;border:0;border-radius:14px;background:none;font-size:.72rem;font-weight:600;color:var(--gr);text-decoration:none;cursor:pointer}
.nav .ico{width:24px;height:24px}
.nav a[aria-current="page"]{color:var(--ct)}
@media(min-width:720px){.nav a,.nav button{padding:12px 0}.nav a[aria-current="page"]{background:var(--pe);color:var(--en)}}
@media(min-width:1180px){.nav a{flex-direction:row;gap:12px;padding:11px 14px;font-size:.95rem}.nav .ico{width:21px;height:21px}.nav .moi-onglet{display:none}}
.nav .badge{position:absolute;top:4px;left:calc(50% + 4px);font-size:.66rem}
@media(min-width:1180px){.nav .badge{position:static;margin-left:auto;font-size:.72rem}}
.rail-bas{display:none}
@media(min-width:1180px){.rail-bas{display:grid;gap:12px;margin-top:auto}}
.appli{padding:16px;border-radius:18px;background:var(--li)}.appli b{display:block;font-family:var(--ti);font-size:1.05rem;letter-spacing:-.02em}.appli p{margin-top:4px;color:#4a4270;font-size:.86rem;line-height:1.4}
.moi{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border:0;border-radius:14px;background:none;text-align:left;font-size:.9rem;cursor:pointer}
.moi:hover{background:#fff}
.moi .av{width:34px;height:34px;font-size:.85rem}.moi small{display:block;color:var(--gr);font-size:.78rem}
.moi > span{min-width:0}.moi b,.moi small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.page-c{min-width:0;min-height:0;overflow-y:auto}

/* Fenêtres (dialog) */
dialog{width:min(100% - 24px,460px);max-height:calc(100dvh - 24px);padding:0;border:0;border-radius:24px;background:#fff;color:var(--en);box-shadow:var(--om)}
dialog::backdrop{background:rgba(31,27,45,.45)}
.dlg{display:grid;gap:18px;padding:26px 24px}
.dlg h2{font-size:1.4rem}
.dlg-b{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:4px}
.select{min-height:46px;padding:.5em 2.2em .5em .9em;border:0;border-radius:14px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E5869' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") right .7em center/1.1em no-repeat;box-shadow:inset 0 0 0 1.5px rgba(31,27,45,.14);-webkit-appearance:none;appearance:none;font-size:1rem}
.toast{position:fixed;left:50%;bottom:90px;z-index:60;transform:translateX(-50%);padding:12px 18px;border-radius:999px;background:var(--en);color:var(--cr);font-weight:600;font-size:.92rem;box-shadow:var(--om)}
@media(min-width:720px){.toast{bottom:28px}}