/* =========================================================================
   Erogene — app
   Basé sur le design system de la landing (violet #5527dd, Arimo, radius doux).
   ========================================================================= */

/* ---- Fonts ------------------------------------------------------------- */
@font-face{font-family:"Arimo";src:url("assets/fonts/Arimo-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Arimo";src:url("assets/fonts/Arimo-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Arimo";src:url("assets/fonts/Arimo-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Arimo";src:url("assets/fonts/Arimo-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}

/* ---- Tokens ------------------------------------------------------------ */
:root{
  --violet-lightest:#f4f1fd; --violet-light:#ede9fc; --violet-light-active:#cabcf4;
  --violet-normal:#5527dd; --violet-normal-hover:#4d23c7; --violet-normal-active:#441fb1;
  --violet-dark:#401da6; --violet-darker:#1e0e4d;
  --orange-lightest:#fff0f0; --orange-light:#ffe8e8;
  --orange-normal:#ff6665; --orange-normal-active:#cc5251;
  --green-lightest:#e2f2eb; --green-normal:#40a578;
  --grey-100:#edeeee; --grey-200:#dadbdd; --grey-300:#878c90; --grey-400:#7a7e82;
  --grey-500:#65696c; --grey-600:#515456; --grey-800:#2f3132;
  --ink:#1e1e1e; --ink-soft:#212121; --white:#fff; --stroke-subtle:#e9ebf8;

  --font-body:"Arimo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --tracking-tight:-0.24px;
  --radius-sm:10px; --radius-md:12px; --radius-lg:20px; --radius-full:9999px;
  --shadow-card:8px 8px 32px 0 rgba(0,0,0,.1);

  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box}
/* `hidden` doit gagner sur tout `display` posé par une classe : c'est lui qui
   pilote la bascule hint → bouton pendant la session, sans rechargement. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-body);
  letter-spacing:var(--tracking-tight);
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
h1,h2,h3,p{margin:0}
svg{display:block}
a{color:var(--violet-normal);text-decoration:none}
button{font:inherit;letter-spacing:inherit;color:inherit;background:none;border:none;cursor:pointer}
input{font:inherit;letter-spacing:inherit}

/* =========================================================================
   APP SHELL
   Mobile ET tablette : plein écran, aucune bordure, aucun cadre.
   ========================================================================= */
.app{
  width:100%;
  /* Coquille de hauteur DÉFINIE : le défilement se fait dans `.scroll`, pas
     dans la page. Avec une simple hauteur minimale, la répartition flex du
     deck devient ambiguë selon la façon dont le navigateur résout dvh. */
  height:100vh;        /* repli : navigateurs sans unités dynamiques */
  height:100dvh;       /* barre d'URL mobile qui se rétracte */
  display:flex;
  flex-direction:column;
  background:var(--white);
  position:relative;
  overflow:hidden;
  padding-left:env(safe-area-inset-left,0px);
  padding-right:env(safe-area-inset-right,0px);
}

/* -------------------------------------------------------------------------
   Mock téléphone : DESKTOP UNIQUEMENT.
   Le double garde `hover:hover` + `pointer:fine` évite qu'une tablette en
   paysage (souvent 1024px de large, mais pointeur grossier) hérite du cadre :
   elle reste en plein écran, comme demandé.
   ------------------------------------------------------------------------- */
/* Le bornage tablette (>=680px) vit en bas de fichier : il doit surcharger
   les marges de .deck/.actions/etc. définies plus loin ici, et en CSS, à
   spécificité égale, c'est l'ordre d'apparition qui tranche. */

/* -------------------------------------------------------------------------
   Mock téléphone : DESKTOP UNIQUEMENT.
   La largeur seule ne suffit pas — un iPad Pro en paysage fait 1366×1024.
   On exige donc aussi un pointeur fin ET l'absence de pointeur tactile.
   Si un navigateur ne comprend pas cette logique, il ignore TOUTE la règle
   et retombe sur le plein écran : c'est la bonne dégradation.
   ------------------------------------------------------------------------- */
/* Les règles de contenu (width/max-width/margin) de ce mock vivent en bas de
   fichier, APRÈS le bornage tablette 680px : les deux media queries sont
   simultanément vraies à cette largeur, et à spécificité égale c'est
   l'ordre d'apparition qui tranche — celle-ci doit donc venir en dernier. */
@media (min-width:1024px) and (any-pointer:fine) and (not (any-pointer:coarse)){
  body{
    display:grid;
    place-items:center;
    min-height:100vh;
    min-height:100dvh;
    padding:32px;
    background:radial-gradient(120% 90% at 50% 0%, var(--violet-light) 0%, var(--violet-lightest) 60%);
  }
  .app{
    width:400px;
    flex:none;
    min-height:0;
    height:min(860px, 92vh);
    height:min(860px, 92dvh);
    border-radius:44px;
    border:1px solid var(--stroke-subtle);
    box-shadow:0 40px 90px rgba(30,14,77,.35);
    padding-left:0;
    padding-right:0;
  }
}

/* ---- Top bar ----------------------------------------------------------- */
.topbar{
  flex:none;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:calc(14px + var(--safe-top)) 18px 12px;
}
.brand{display:flex;align-items:center;gap:8px;color:var(--ink)}
.brand img{width:26px;height:26px}
.brand span{font:700 19px/1 var(--font-body)}
.level-pill{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  background:var(--violet-light);color:var(--violet-normal);
  font:700 11px/1 var(--font-body);padding:8px 12px;border-radius:var(--radius-full);
}
.icon-btn{
  width:40px;height:40px;flex:none;border-radius:var(--radius-full);
  background:var(--violet-light);color:var(--violet-normal);
  display:flex;align-items:center;justify-content:center;transition:background .15s;
}
.icon-btn:hover{background:var(--violet-light-active)}
.icon-btn:active{transform:scale(.94)}

/* ---- Zones ------------------------------------------------------------- */
.scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.page{padding:8px 22px 28px}
.page h1{font:700 26px/1.15 var(--font-body);letter-spacing:-.6px;margin-bottom:8px}
.page h2{font:700 17px/1.2 var(--font-body);margin:26px 0 12px}
.page .lead{font:400 15px/1.55 var(--font-body);color:var(--grey-500);margin-bottom:22px}

/* ---- Boutons ----------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  font:700 16px/1 var(--font-body);border-radius:var(--radius-sm);padding:16px 24px;
  transition:background .15s,transform .12s;
}
.btn+.btn{margin-top:10px}
.btn-primary{background:var(--violet-normal);color:#fff}
.btn-primary:hover{background:var(--violet-normal-hover)}
.btn-primary:active{transform:translateY(1px)}
.btn-ghost{background:var(--violet-light);color:var(--violet-normal)}
.btn-ghost:hover{background:var(--violet-light-active)}
.btn-danger{background:var(--orange-light);color:var(--orange-normal-active)}
.btn-danger:hover{background:#ffdcdc}
.btn-sm{width:auto;padding:11px 16px;font-size:14px}
/* Bouton de ligne méta : doit tenir sur une seule ligne de ~26px, y compris
   à 375px de large à côté du compteur. */
.btn-xs{width:auto;padding:6px 12px;font:700 12px/1 var(--font-body);border-radius:var(--radius-full);white-space:nowrap}

/* ---- Progression ------------------------------------------------------- */
.progress-wrap{flex:none;padding:0 18px 6px}
.progress{height:5px;border-radius:5px;background:var(--grey-100);overflow:hidden}
.progress i{display:block;height:100%;border-radius:5px;background:var(--violet-normal);transition:width .3s ease-out}
/* Ligne méta : « Terminer la session » à gauche, compteur à droite. Elle est
   déjà réservée (flex:none) et sa hauteur ne dépend pas de la présence du
   bouton — la carte garde donc exactement la même taille toute la session. */
.progress-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;min-height:26px}
.progress-label{font:400 11px/1 var(--font-body);color:var(--grey-400)}

/* =========================================================================
   DECK
   ========================================================================= */
.deck{position:relative;flex:1;min-height:0;margin-top:12px;margin-inline:18px}
.card{
  position:absolute;inset:0;
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--stroke-subtle);border-radius:22px;
  touch-action:pan-y;user-select:none;-webkit-user-select:none;
  transition:transform .26s ease-out,opacity .26s ease-out;
}
/* Une seule carte porte une vraie ombre (celle du dessus, qu'on manipule) :
   la pile se lit déjà par le décalage scale+translateY ci-dessous, pas
   besoin d'empiler une ombre par carte — ça finissait par déborder sur les
   boutons d'action juste en dessous. Les cartes du dessous n'ont qu'un
   filet d'ombre, juste assez pour marquer leur bord. */
.card[data-depth="0"]{z-index:3;box-shadow:0 10px 24px rgba(30,14,77,.12)}
.card[data-depth="1"]{z-index:2;transform:scale(.94) translateY(14px);box-shadow:0 2px 6px rgba(30,14,77,.05)}
.card[data-depth="2"]{z-index:1;transform:scale(.88) translateY(28px);box-shadow:none}
.card[data-depth="3"]{display:none}
.card.gone{pointer-events:none}

/* Couleur par catégorie (§7 : une couleur + une icône abstraite par catégorie).
   Passer par des classes, et non par des `style=` en ligne, permet une CSP
   stricte sans 'unsafe-inline'. */
.cat-sensualite{--c:#5527dd;--pale:#ede9fc}
.cat-detente   {--c:#3f8fd4;--pale:#e9f1fb}
.cat-tendresse {--c:#e26db4;--pale:#fdeaf5}
.cat-jeu       {--c:#ff6665;--pale:#ffe8e8}
.cat-audace    {--c:#40a578;--pale:#e2f2eb}
.cat-parole    {--c:#f2a900;--pale:#fdf1d8}

.card-top{
  height:132px;flex:none;position:relative;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 130% at 50% 0%, var(--pale,var(--violet-light)) 0%, #fff 100%);
}
.card-cat{position:absolute;top:16px;left:18px;display:inline-flex;align-items:center;gap:6px;font:700 11px/1 var(--font-body);color:var(--c,var(--violet-normal))}
.card-cat .dot{width:8px;height:8px;border-radius:50%;background:var(--c,var(--violet-normal))}
.card-int{position:absolute;top:16px;right:18px;display:flex;gap:4px}
.card-int i{width:16px;height:5px;border-radius:99px;background:var(--grey-200)}
.card-int i.on{background:var(--c,var(--violet-normal))}
.card-ic{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--c,var(--violet-normal));color:#fff}
.fb-row .fb-dot{background:var(--c,var(--violet-normal))}
/* min-height:0 : sans lui, `min-height:auto` (défaut flex) fait du prompt un
   plancher incompressible, qui poussait le hint hors de la carte — et
   .card{overflow:hidden} le tranchait. */
.card-body{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center}
.role-tag{
  font:700 10px/1 var(--font-body);letter-spacing:1.2px;text-transform:uppercase;
  color:var(--grey-300);border:1px solid var(--grey-200);
  border-radius:var(--radius-full);padding:6px 12px;margin-bottom:16px;
}
/* Taille liée à la hauteur dispo : sur un écran court, un item long se réduit
   au lieu de pousser le reste de la carte dehors. */
.prompt{font:700 clamp(19px,4.6vh,24px)/1.28 var(--font-body);letter-spacing:-.4px;color:var(--ink);text-wrap:balance}
.card-hint{flex:none;padding:0 24px 20px;text-align:center;font:400 12.5px/1.4 var(--font-body);color:var(--grey-400)}

/* Tampons de décision */
.stamp{
  position:absolute;top:24px;opacity:0;pointer-events:none;
  font:700 20px/1 var(--font-body);letter-spacing:1px;
  padding:6px 14px;border-radius:10px;border:3px solid;
}
.stamp-yes{right:20px;transform:rotate(-14deg);border-color:var(--green-normal);color:var(--green-normal)}
.stamp-no{left:20px;transform:rotate(14deg);border-color:var(--orange-normal);color:var(--orange-normal-active)}
.stamp-curious{left:50%;top:20px;margin-left:-58px;transform:rotate(-4deg);border-color:var(--violet-normal);color:var(--violet-normal);font-size:15px}

/* ---- Barre d'action --------------------------------------------------- */
.actions{flex:none;display:flex;align-items:center;justify-content:center;gap:20px;padding:18px 18px 10px}
.act{
  border-radius:var(--radius-full);background:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(30,14,77,.14);
  transition:transform .16s,box-shadow .16s;
}
.act:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(30,14,77,.2)}
.act:active{transform:scale(.92)}
.act-no{width:66px;height:66px;color:var(--orange-normal)}
.act-curious{width:56px;height:56px;color:var(--violet-normal);background:var(--violet-light)}
.act-yes{width:72px;height:72px;color:#fff;background:var(--green-normal);box-shadow:0 14px 30px rgba(64,165,120,.4)}
.act-yes:hover{box-shadow:0 20px 40px rgba(64,165,120,.48)}

/* =========================================================================
   FIN DE SESSION
   ========================================================================= */
.fb-head{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:22px}
.fb-check{width:64px;height:64px;border-radius:50%;background:var(--green-lightest);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.fb-title{font:700 24px/1.1 var(--font-body);letter-spacing:-.4px}
.fb-sub{font:400 15px/1.4 var(--font-body);color:var(--grey-500);margin-top:6px}
.fb-rows{display:flex;flex-direction:column;gap:10px}
.fb-row{display:flex;align-items:center;gap:12px;background:var(--violet-lightest);border-radius:14px;padding:14px 16px}
.fb-dot{width:10px;height:10px;border-radius:50%;flex:none}
.fb-main{flex:1;min-width:0}
.fb-label{font:700 14px/1.3 var(--font-body);color:var(--ink)}
.fb-dir{font:400 12px/1.3 var(--font-body);color:var(--grey-400);margin-top:3px}
.fb-badge{font:700 10px/1 var(--font-body);padding:6px 10px;border-radius:var(--radius-full);white-space:nowrap;flex:none}
.fb-match{color:var(--green-normal);background:var(--green-lightest)}
.fb-explore{color:var(--orange-normal-active);background:var(--orange-light)}
.fb-empty{text-align:center;color:var(--grey-500);font:400 15px/1.55 var(--font-body);padding:18px 6px}
.note{
  margin-top:20px;display:flex;align-items:flex-start;gap:10px;
  background:var(--grey-100);border-radius:14px;padding:14px 16px;
}
.note svg{flex:none;margin-top:1px}
.note span{font:400 12.5px/1.45 var(--font-body);color:var(--grey-600)}
.note strong{color:var(--ink)}

/* =========================================================================
   PROFIL / RADAR
   ========================================================================= */
.radar-card{background:#fff;border:1px solid var(--stroke-subtle);border-radius:20px;padding:18px 14px;display:flex;flex-direction:column;align-items:center}
.radar{width:100%;max-width:320px;height:auto}
.radar .grid{fill:none;stroke:var(--violet-light-active);stroke-width:1}
.radar .axis{stroke:var(--violet-light-active);stroke-width:1}
.radar .poly-a{fill:rgba(85,39,221,.20);stroke:var(--violet-normal);stroke-width:2}
.radar .poly-b{fill:rgba(255,102,101,.16);stroke:var(--orange-normal);stroke-width:2;stroke-dasharray:4 3}
.radar .lbl{font:700 10px/1 var(--font-body);fill:var(--grey-500)}
.legend{display:flex;gap:22px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.legend span{display:flex;align-items:center;gap:8px;font:600 13px/1 var(--font-body);color:var(--grey-500)}
.legend i{width:14px;height:4px;border-radius:99px;flex:none}
.legend .a{background:var(--violet-normal)}
.legend .b{background:var(--orange-normal)}

.stat-row{display:flex;gap:10px;margin-top:16px}
.stat{flex:1;background:var(--violet-lightest);border-radius:14px;padding:14px 10px;text-align:center}
.stat .n{font:700 24px/1 var(--font-body);color:var(--violet-normal)}
.stat .l{font:400 11.5px/1.3 var(--font-body);color:var(--grey-500);margin-top:6px}

/* Fond Violet Primary, texte blanc. Le noir a été écarté : sur #5527dd il ne
   donne que 2,16:1, très en dessous du minimum de 4,5:1 — il assombrirait la
   lecture au lieu de l'éclaircir. Le blanc plein donne 7,72:1.

   « at 15% 0% » n'existe que pour radial-gradient : écrite en linear-gradient,
   la déclaration était invalide et donc ignorée. La carte n'avait aucun fond,
   et son texte blanc se retrouvait sur le fond blanc de la page. On garde une
   couleur de repli avant le dégradé : si celui-ci échoue à nouveau, le texte
   reste posé sur du violet. */
.score-card{
  margin-top:18px;
  background:var(--violet-normal);
  background:radial-gradient(120% 120% at 15% 0%, #6a3ef0, var(--violet-normal) 60%);
  color:#fff;border-radius:18px;padding:22px;text-align:center;
}
.score-card .n{font:700 42px/1 var(--font-body);letter-spacing:-1px}
/* Pas d'opacity ici : à 13 px, le .85 d'origine tombait à 4,71:1 sur l'angle
   clair du dégradé. La hiérarchie avec le chiffre passe par la taille et la
   graisse, pas par un blanc délavé. */
.score-card .l{font:400 13.5px/1.5 var(--font-body);margin-top:8px}

/* =========================================================================
   FORMULAIRES / RÉGLAGES
   ========================================================================= */
.field{margin-bottom:22px}
.field>label{display:block;font:700 13px/1 var(--font-body);color:var(--grey-600);margin-bottom:8px}
.hint{font:400 12px/1.45 var(--font-body);color:var(--grey-400);margin-top:8px}
.input{
  width:100%;padding:14px 16px;font:400 16px/1.2 var(--font-body);
  border:1px solid var(--grey-200);border-radius:var(--radius-sm);background:#fff;color:var(--ink);
}
.input:focus{outline:none;border-color:var(--violet-normal)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  display:inline-flex;align-items:center;
  font:600 14px/1 var(--font-body);padding:11px 16px;border-radius:var(--radius-full);
  background:var(--grey-100);color:var(--grey-600);
  border:1.5px solid transparent;cursor:pointer;transition:all .12s;
}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip:has(input:checked){background:var(--violet-light);color:var(--violet-normal);border-color:var(--violet-normal)}
.chip:has(input:focus-visible){outline:2px solid var(--violet-normal);outline-offset:2px}
.seg{display:flex;gap:8px}
.seg .opt{flex:1;text-align:center;font:700 14px/1 var(--font-body);padding:13px 0;border-radius:var(--radius-sm);background:var(--grey-100);color:var(--grey-600)}
.seg .opt.on{background:var(--violet-normal);color:#fff}
.seg .opt.locked{opacity:.55}
.callout{
  display:flex;gap:10px;align-items:flex-start;
  background:var(--violet-lightest);border-radius:14px;padding:14px 16px;margin-bottom:18px;
}
.callout svg{flex:none;margin-top:1px}
.callout p{font:400 13px/1.5 var(--font-body);color:var(--grey-600)}
.callout strong{color:var(--ink)}
/* Avertissement avant l'ouverture du dernier niveau (contenu explicite). */
.callout-warn{background:var(--orange-lightest)}
.callout-warn p{color:var(--grey-800)}

/* Rappel de l'écran Compte : ce qui manque, et ce que ça coûte. Placé juste
   sous le titre, il est lu avant les formulaires. */
.todo-banner{margin-bottom:20px}

/* Marqueur de section incomplète. Un mot plutôt qu'une pastille à chiffre :
   sur un titre, le compteur vaudrait toujours 1 et n'apprendrait rien, là où
   « à compléter » nomme l'action attendue. */
.todo-flag{
  display:inline-block;vertical-align:2px;margin-left:8px;
  font:700 10px/1 var(--font-body);letter-spacing:.03em;text-transform:uppercase;
  padding:4px 8px;border-radius:var(--radius-full);
  background:var(--orange-light);color:var(--orange-normal-active);
}
.saved{background:var(--green-lightest);color:var(--green-normal);font:700 13px/1 var(--font-body);padding:12px 14px;border-radius:12px;margin-bottom:18px}

/* Code d'invitation */
.invite-code{
  font:700 34px/1 var(--font-body);letter-spacing:6px;text-align:center;
  background:var(--violet-lightest);color:var(--violet-normal);
  padding:22px;border-radius:16px;margin:6px 0 4px;
}
.invite-link{
  font:400 13px/1.5 var(--font-body);color:var(--grey-500);word-break:break-all;
  background:var(--grey-100);border-radius:12px;padding:12px 14px;margin-top:10px;
}
.waiting{display:flex;align-items:center;gap:10px;font:400 14px/1.4 var(--font-body);color:var(--grey-500);margin-top:16px}
.pulse{width:9px;height:9px;border-radius:50%;background:var(--green-normal);flex:none;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* =========================================================================
   BOTTOM NAV
   ========================================================================= */
.bottomnav{
  flex:none;display:flex;align-items:center;justify-content:space-around;
  background:#fff;border-top:1px solid var(--grey-100);
  padding:8px 8px calc(8px + var(--safe-bottom));
}
.navbtn{display:flex;flex:1;flex-direction:column;align-items:center;gap:4px;padding:8px 0;color:var(--grey-400);transition:color .15s}
.navbtn span{font:700 10px/1 var(--font-body)}
.navbtn[aria-current="page"]{color:var(--violet-normal)}
.navbtn:active{transform:scale(.95)}

/* Pastille de rappel (onglet Compte). Ancrée sur l'icône seule, pas sur tout
   le bouton : le libellé dessous est plus large que le glyphe, et la bulle
   flotterait loin de lui. */
.navbtn-icon{position:relative;display:flex}
/* Sélecteur volontairement plus spécifique que « .navbtn span » : cette règle
   générique fixe font:700 10px et, sur écran étroit, un letter-spacing négatif
   destiné aux libellés d'onglet. Les deux déformeraient le chiffre. */
.navbtn .navbadge{
  position:absolute;top:-5px;left:calc(100% - 7px);
  min-width:16px;height:16px;padding:0 4px;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-full);
  background:var(--orange-normal);color:var(--white);
  font:700 10.5px/1 var(--font-body);letter-spacing:0;
  /* Détache la bulle du fond blanc de la barre, même sur l'onglet actif. */
  box-shadow:0 0 0 2px #fff;
}

/* Nouveaux matchs : vert Success, pas orange. L'orange signale une tâche en
   attente (Compte) ; ici il s'agit d'une découverte à aller voir. Deux sens
   distincts, deux couleurs distinctes. */
.navbtn .navbadge-new{background:var(--green-normal)}

/* ---- Accueil ----------------------------------------------------------- */
.hero{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:32px 26px calc(28px + var(--safe-bottom));
  background:radial-gradient(110% 70% at 20% 0%, var(--violet-lightest) 0%, #fff 62%);
}
.hero .mark{width:56px;height:56px;margin-bottom:22px}
.hero h1{font:700 clamp(28px,7vw,36px)/1.1 var(--font-body);letter-spacing:-1px}
.hero h1 em{font-style:normal;color:var(--violet-normal)}
.hero p{font:400 16px/1.55 var(--font-body);color:var(--grey-500);margin:16px 0 30px;max-width:34ch}
.hero .foot{font:400 12.5px/1.5 var(--font-body);color:var(--grey-400);margin-top:20px;max-width:none}

/* Passerelle discrète entre les écrans d'entrée (rejoindre <-> connexion) :
   une ligne de rappel, pas un troisième bouton qui concurrencerait l'action. */
.hero .alt{font:400 13.5px/1.5 var(--font-body);color:var(--grey-500);margin-top:18px}
.hero .alt a{color:var(--violet-normal);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.hero .alt a:hover{color:var(--violet-normal-hover)}

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* -------------------------------------------------------------------------
   Tablette en plein écran (>=680px, y compris iPad tactile) : on borne le
   CONTENU pour le confort de lecture et on le CENTRE horizontalement — la
   coquille .app, elle, reste pleine largeur (pas de cadre, pas de fond
   « bureau »). Placé en fin de fichier pour être sûr de gagner la cascade
   sur les marges fixes de .deck/.actions/.progress-wrap/.page définies plus
   haut : à spécificité égale, c'est l'ordre d'apparition qui tranche.
   ------------------------------------------------------------------------- */
@media (min-width:680px){
  .deck,.actions,.progress-wrap,.page{
    width:100%;max-width:560px;margin-left:auto;margin-right:auto;
  }
}

/* -------------------------------------------------------------------------
   Mock téléphone desktop (>=1024px, pointeur fin) : la coquille .app fait
   400px pile, donc le bornage 560px ci-dessus ne fait plus rien tout seul —
   il faut revenir à des marges FIXES comme sur mobile, sinon le contenu
   colle aux bords arrondis du cadre. Doit rester après le bloc 680px
   ci-dessus pour gagner la cascade (même logique d'ordre).
   ------------------------------------------------------------------------- */
@media (min-width:1024px) and (any-pointer:fine) and (not (any-pointer:coarse)){
  .deck,.actions,.progress-wrap,.page{
    width:auto;max-width:none;margin-left:18px;margin-right:18px;
  }
}

/* =========================================================================
   Compte, Réponses : écrans ajoutés en juillet 2026
   ========================================================================= */

/* La barre passe de 3 à 5 onglets : on resserre le libellé pour qu'il tienne
   sur un écran de 320 px sans troncature. */
.bottomnav{padding-left:2px;padding-right:2px}
.navbtn{gap:3px;padding:7px 0}
/* :not(.navbadge) : la pastille n'est pas un libellé d'onglet ; la resserrer
   avec eux déformerait le chiffre. */
.navbtn span:not(.navbadge){font-size:9.5px;letter-spacing:-.2px;white-space:nowrap}
.navbtn svg{width:22px;height:22px}

/* Les chiffres du profil deviennent cliquables : ils mènent à l'historique
   déjà filtré. On garde l'apparence, on ajoute l'affordance. */
.stat{display:block;transition:background .15s,transform .15s}
a.stat:hover{background:var(--violet-light)}
a.stat:active{transform:scale(.97)}
.stat .l{font:400 11px/1.3 var(--font-body);color:var(--grey-500);margin-top:3px}

/* Filtres de l'écran Réponses : onglets soulignés plutôt que pavés pleins.
   Le tableau qui suit porte déjà beaucoup de matière (icônes colorées,
   pastilles de niveau) ; des filtres discrets évitent d'empiler deux
   niveaux de couleur forte l'un sur l'autre. */
.filters{
  display:flex;gap:22px;margin:18px 0 2px;
  border-bottom:1px solid var(--grey-100);
}
.filter{
  display:flex;align-items:baseline;gap:6px;
  font:600 14px/1 var(--font-body);color:var(--grey-500);
  padding:0 1px 11px;margin-bottom:-1px;
  border-bottom:2px solid transparent;
  transition:color .16s ease-out;
}
.filter:hover{color:var(--ink)}
.filter.on{color:var(--violet-normal);border-bottom-color:var(--violet-normal)}
.filter-n{font:600 11.5px/1 var(--font-body);color:var(--grey-400)}
.filter.on .filter-n{color:var(--violet-normal)}

/* Tableau de l'historique : trois colonnes, la première élastique. */
.ans-table{width:100%;border-collapse:collapse;margin:6px 0 0;table-layout:fixed}
.ans-table thead th{
  font:600 11px/1 var(--font-body);letter-spacing:.04em;text-transform:uppercase;
  color:var(--grey-400);text-align:left;padding:12px 0 9px;
  border-bottom:1px solid var(--grey-100);
}
.ans-table td{padding:12px 0;border-bottom:1px solid var(--grey-100);vertical-align:middle}
.ans-table tbody tr:last-child td{border-bottom:none}
.ans-table .c-icon{width:48px;text-align:center}
.ans-table .c-lvl{width:38px;text-align:center}

/* Troncature au centre, faite ici et non en PHP : le libellé arrive en deux
   morceaux. La tête absorbe le manque de place et reçoit l'ellipsis ; la
   queue, elle, ne se comprime jamais (flex-shrink:0), donc la fin du libellé
   — souvent le seul détail qui distingue deux cartes voisines — reste
   toujours lisible. Résultat : une seule ellipse, pile à la bonne largeur. */
.c-text{min-width:0}
.ans-text{
  display:flex;font:400 14.5px/1.45 var(--font-body);color:var(--ink);
  min-width:0;
}
.ans-head{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ans-tail{flex:none;white-space:pre}
.ans-common,.ans-role{
  display:inline-block;margin-top:4px;margin-right:8px;
  font:700 10px/1 var(--font-body);letter-spacing:.02em;
}
.ans-common{color:var(--violet-normal)}
.ans-role{color:var(--grey-400);text-transform:lowercase}

/* Mêmes couleurs que les boutons d'action du deck : la croix y est corail
   (--orange-normal), pas rouge pur — un refus n'est pas une faute. */
.ans-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px}
.i-no{color:var(--orange-normal)}
.i-curious{color:var(--violet-normal)}
.i-yes{color:var(--green-normal)}

.ans-lvl{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:var(--radius-full);
  font:700 11.5px/1 var(--font-body);
  background:var(--grey-100);color:var(--grey-600);
}

/* Message d'erreur de formulaire, décliné du bandeau « enregistré ». */
.saved-err{background:#fdeaea;color:#a83232}
/* Cale remplaçant l'ancienne icône Réglages de la barre du haut. */
.topbar-spacer{flex:none;width:40px;height:40px}