/* Find YOUR cam — feuille unique, organisée par composant.
   Vocabulaire : .header .question .choices .choice .results .model-card .preview .filters .actions .empty
   Mobile d'abord ; sur grand écran la colonne est centrée à 640 px. */
:root{
  --ink:#171419;        /* fond */
  --panel:#211d25;      /* surfaces */
  --line:#352e3a;       /* séparateurs */
  --text:#f3eef4;
  --muted:#a89fae;
  --accent:#e9b44c;     /* état choisi + CTA */
  --accent-ink:#1c150a;
  --live:#5fd39a;       /* sémantique : en ligne */
  --off:#8b8391;        /* sémantique : hors ligne */
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --body:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --accent-soft:rgba(233,180,76,.14);
  --tap:44px;
  --col:640px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur:200ms;
}
*{box-sizing:border-box}
html{color-scheme:dark;background:var(--ink);scroll-padding-top:72px}
body{margin:0;background:var(--ink);color:var(--text);font:16px/1.45 var(--body);-webkit-text-size-adjust:100%;min-height:100dvh;display:flex;flex-direction:column}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--display);letter-spacing:-.02em;text-wrap:balance;font-weight:700}

/* En-tête */
.header{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(12px + env(safe-area-inset-top)) 16px 10px;border-bottom:1px solid var(--line);width:100%;max-width:var(--col);margin:0 auto;background:color-mix(in srgb,var(--ink) 84%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.brand{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.01em;text-decoration:none}
.brand em{font-style:normal;color:var(--accent)}
.header .step{color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums;margin-left:auto}
.icon-button{min-height:var(--tap);display:inline-flex;align-items:center;padding:0 6px;color:var(--muted);text-decoration:none;font-size:15px}

/* Colonne principale */
.screen{flex:1;width:100%;max-width:var(--col);margin:0 auto;display:flex;flex-direction:column}
.content{padding:20px 16px 24px}
.lead{color:var(--muted);margin:0 0 12px;max-width:60ch}

/* Accueil */
.home h1{font-size:clamp(36px,10vw,44px);line-height:1.02;margin:24px 0 12px;letter-spacing:-.03em}
.home p{color:var(--muted);margin:0 0 24px;max-width:36ch}
.entry{display:flex;flex-direction:column;gap:10px}
.live-count{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:14px;margin-top:22px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--live);display:inline-block;flex-shrink:0}
.dot.off{background:var(--off)}
.cats h2,.about h2{font-size:18px;margin:8px 0 10px}
.catlist{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.catlist a{display:flex;justify-content:space-between;align-items:center;min-height:52px;padding:0 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel);text-decoration:none;font-weight:600;transition:transform var(--dur) var(--ease),border-color var(--dur),background var(--dur)}
.catlist a:active{transform:scale(.97)}
@media (hover:hover){.catlist a:hover{border-color:var(--muted)}}
.catlist .count{color:var(--muted);font-weight:500;font-size:13px;font-variant-numeric:tabular-nums}
.about p{color:var(--muted);max-width:62ch;margin:0 0 10px}
.about a{color:var(--accent)}

/* Boutons */
.button{position:relative;min-height:52px;border-radius:14px;border:1px solid var(--line);background:var(--panel);padding:0 18px;font-weight:600;font-size:16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;text-align:center;transition:transform 120ms var(--ease),background var(--dur),border-color var(--dur),box-shadow var(--dur),filter var(--dur)}
.button:active{transform:scale(.98)}
.button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:0 10px 26px -14px rgba(233,180,76,.7)}
@media (hover:hover){.button:hover{border-color:var(--muted)}.button.primary:hover{filter:brightness(1.06);border-color:var(--accent)}.button.quiet:hover{border-color:transparent;color:var(--text)}}
.button.quiet{background:none;border-color:transparent;color:var(--muted)}
.button.small{min-height:var(--tap);font-size:15px;padding:0 14px;border-radius:12px}
.button.block{width:100%}
.button[aria-busy="true"]{pointer-events:none;color:transparent}
.button[aria-busy="true"]::after{content:"";position:absolute;width:20px;height:20px;border-radius:50%;border:2px solid var(--muted);border-top-color:var(--text);animation:spin .7s linear infinite}

/* Question */
.question{padding:20px 16px 8px;display:flex;flex-direction:column;flex:1}
.question fieldset{border:0;padding:0;margin:0;min-width:0}
.question legend{font-family:var(--display);font-size:28px;line-height:1.1;font-weight:700;letter-spacing:-.02em;margin:0 0 6px;padding:0;text-wrap:balance}
.question .hint{color:var(--muted);font-size:14px;margin:0 0 16px}
.choices{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.choice{position:relative;display:flex;align-items:center;gap:12px;min-height:56px;padding:0 14px 0 16px;border:1px solid var(--line);border-radius:14px;background:var(--panel);transition:transform 120ms var(--ease),border-color var(--dur),background var(--dur)}
.choice:active{transform:scale(.985)}
.choice input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.choice .mark{width:22px;height:22px;border-radius:7px;border:2px solid var(--muted);flex-shrink:0;display:grid;place-items:center;pointer-events:none;transition:background var(--dur),border-color var(--dur),transform var(--dur) var(--ease)}
.choice .mark svg{width:14px;height:14px;opacity:0}
.choice .mark path{stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset 260ms var(--ease) 60ms}
.choice .label{flex:1;font-weight:500;pointer-events:none}
.choice .count{color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums;pointer-events:none}
.choice:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.choice:has(input:checked) .mark{background:var(--accent);border-color:var(--accent);transform:scale(1.08)}
.choice:has(input:checked) .mark svg{opacity:1}
.choice:has(input:checked) .mark path{stroke-dashoffset:0}
.choice:has(input:checked) .count{color:var(--accent)}
.choice:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.choice.any{border-style:dashed}
.suggest{margin:12px 0 0;font-size:14px;color:var(--muted)}
.suggest button{background:none;border:0;padding:0;color:var(--accent);font-weight:600;text-decoration:underline;min-height:var(--tap)}

/* Barre d'actions au pouce */
.actions{position:sticky;bottom:0;margin-top:auto;display:grid;grid-template-columns:auto 1fr;gap:10px;padding:12px 0 calc(12px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--ink) 75%,transparent)}
.actions .skip-all{grid-column:1/-1;text-align:center}

/* Résultats */
.results-head{padding:16px 16px 8px}
.results-head h1,.results-head h2{font-size:24px;margin:0 0 10px}
.results-head .total{color:var(--muted);font-weight:500;font-size:16px;font-variant-numeric:tabular-nums}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.filters .chip{min-height:36px;border-radius:999px;border:1px solid var(--line);background:var(--panel);padding:0 12px;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;text-decoration:none}
.filters .chip.edit{border-color:var(--accent);color:var(--accent);background:none}
.filters .chip{transition:transform 120ms var(--ease),background var(--dur)}
.filters .chip:active{transform:scale(.96)}
.notice{margin:8px 16px 0;padding:12px 14px;border-radius:12px;background:#2b2226;border:1px solid #4a3339;font-size:14px}
.results{list-style:none;margin:0;padding:8px 16px 16px;display:flex;flex-direction:column;gap:14px}
@media (min-width:600px){.results{display:grid;grid-template-columns:1fr 1fr}}
.model-card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.model-card .thumb{position:relative;aspect-ratio:16/9;background:#2c2531;display:block;overflow:hidden}
.model-card .thumb{background:linear-gradient(100deg,#2c2531 30%,#352d3b 50%,#2c2531 70%);background-size:200% 100%;animation:shimmer 1.6s linear infinite}
.model-card .thumb img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 380ms var(--ease)}
.model-card .thumb img.loaded{opacity:1}
.model-card .thumb:has(img.loaded){animation:none}
.model-card .initial{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-size:44px;font-weight:700;color:rgba(255,255,255,.35)}
.model-card .peek{position:absolute;inset:0;display:block}
.model-card .status{position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;gap:6px;background:rgba(0,0,0,.55);border-radius:999px;padding:5px 9px;font-size:12px;font-weight:600;pointer-events:none}
.model-card .tools{position:absolute;top:8px;right:8px;display:flex;flex-direction:column;gap:6px}
.model-card .fav,.model-card .hide{width:40px;height:40px;border:0;background:rgba(0,0,0,.45);color:#fff;display:grid;place-items:center;border-radius:50%;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:0}
.model-card .fav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2}
.model-card .hide svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;opacity:.85}
.model-card .body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px;flex:1}
.model-card .title{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.model-card .name{font-weight:600;font-size:17px;overflow-wrap:anywhere;text-decoration:none}
.model-card .platform{color:var(--muted);font-size:13px}
.model-card .meta{color:var(--muted);font-size:14px;display:flex;flex-wrap:wrap;gap:4px 10px;margin:0}
.model-card .why{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.model-card .why li{font-size:13px;padding:4px 9px;border-radius:8px;background:#2a2320;color:#f0d69a}
.model-card .cta{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:auto;padding-top:4px}
.model-card.offline .thumb{filter:grayscale(1) brightness(.6)}
.more{padding:0 16px 16px;display:flex;flex-direction:column;gap:8px}
.empty{padding:28px 16px}
.empty h3{font-size:22px;margin:0 0 8px}
.empty p{color:var(--muted);margin:0 0 16px}
.empty .options{display:flex;flex-direction:column;gap:8px}

/* Aperçu (feuille basse, un seul à la fois, lancé au clic) */
.preview{position:fixed;inset:0;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.6);z-index:20;animation:fade-in 200ms ease-out both}
.preview .sheet{width:100%;max-width:var(--col);background:var(--panel);border-radius:22px 22px 0 0;padding:8px 16px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px;animation:sheet-up 300ms var(--ease) both;touch-action:none;will-change:transform}
.preview.closing{animation:fade-in 180ms ease-in reverse both}
.preview.closing .sheet{animation:sheet-up 180ms ease-in reverse both}
.preview .grip{width:40px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 4px}
.preview .player{aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#0e0c10}
.preview .player iframe{width:100%;height:100%;border:0;display:block}
.preview .row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.preview .name{font-weight:600;font-size:17px}
.preview .close{min-width:var(--tap);min-height:var(--tap);border:0;background:none;color:var(--muted)}

/* Prose (how it works) */
.prose h1{font-size:30px;margin:12px 0 10px}
.prose h2{font-size:20px;margin:22px 0 8px}
.prose p,.prose li{color:var(--muted);max-width:62ch}
.prose li{margin:4px 0}
.prose strong{color:var(--text)}

/* Pied */
.foot{width:100%;max-width:var(--col);margin:0 auto;color:var(--muted);font-size:12px;padding:8px 16px 24px;line-height:1.4;border-top:1px solid var(--line)}
.footnav{display:flex;flex-wrap:wrap;gap:6px 14px;margin:8px 0}
.footnav a{color:var(--muted);min-height:32px;display:inline-flex;align-items:center}
.legal{opacity:.8}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.model-card .thumb img{opacity:1}}

/* Ajouts v2 : skip link, masquer, notice, tables observatoire */
.skip{position:absolute;left:-999px;top:8px;z-index:50;background:var(--accent);color:var(--accent-ink);padding:10px 14px;border-radius:10px;font-weight:600}
.skip:focus{left:12px}
.notice{margin:8px 16px 0;padding:12px 14px;border-radius:12px;background:#2b2226;border:1px solid #4a3339;font-size:14px;color:var(--text)}
.tablewrap{overflow-x:auto;margin:0 -16px;padding:0 16px}
table.hours{border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:13px;min-width:100%}
table.hours th,table.hours td{padding:6px 8px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
table.hours th{color:var(--muted);font-weight:500}
table.hours tbody th{text-align:left}
#hidden-count{text-align:center;font-size:14px}

/* ——— Passe UX/mouvement (07/09) : une entrée orchestrée sur l'accueil, le reste répond au geste ——— */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{to{background-position:-200% 0}}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.35)}100%{transform:scale(1)}}
@keyframes rise-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes sheet-up{from{transform:translateY(100%)}to{transform:none}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(95,211,154,.5)}100%{box-shadow:0 0 0 6px rgba(95,211,154,0)}}

/* Accueil : le titre, le texte, les boutons et le compteur arrivent en une seule séquence */
.home > *{animation:rise-in 480ms var(--ease) both}
.home > :nth-child(2){animation-delay:70ms}
.home > :nth-child(3){animation-delay:140ms}
.home > :nth-child(4){animation-delay:220ms}
.live-count .dot{animation:pulse 2.4s ease-out infinite}

/* Mur d'accueil : de vraies rooms live, à faire défiler au pouce (aucun défilement automatique) */
.content.home{padding-bottom:6px}
.wall{width:100%;max-width:var(--col);margin:0 auto;padding:0 0 8px;animation:fade-in 600ms ease-out 300ms both}
.wall-strip{list-style:none;margin:0;padding:0 16px;display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:16px;scrollbar-width:none;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.wall-strip::-webkit-scrollbar{display:none}
.wall-strip li{flex:0 0 auto;scroll-snap-align:start}
.wall-room{position:relative;display:block;width:150px;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#2c2531;border:1px solid var(--line);transition:transform 120ms var(--ease)}
.wall-room:active{transform:scale(.97)}
.wall-room img{width:100%;height:100%;object-fit:cover}
.wall-room .who{position:absolute;left:0;right:0;bottom:0;padding:16px 8px 6px;font-size:12px;font-weight:600;color:#fff;background:linear-gradient(to top,rgba(0,0,0,.75),transparent);display:flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wall-room .who .dot{width:6px;height:6px}

/* Questions : progression en 3 segments, le segment courant se remplit à l'arrivée */
.progress{list-style:none;margin:0 auto;padding:10px 16px 0;width:100%;max-width:var(--col);display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.progress li{height:3px;border-radius:2px;background:var(--line);overflow:hidden;position:relative}
.progress li::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform 420ms var(--ease) 80ms}
.progress li.done::after{transform:none}
.progress li.current::after{animation:fill 420ms var(--ease) 120ms both}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Squelette (page Saved pendant la lecture des rooms gardées) */
.results.skeleton .model-card{pointer-events:none}
.results.skeleton .body{gap:10px;padding:14px}
.bone{display:block;height:14px;border-radius:7px;background:linear-gradient(100deg,#2c2531 30%,#352d3b 50%,#2c2531 70%);background-size:200% 100%;animation:shimmer 1.6s linear infinite;width:60%}
.bone.short{width:35%}

/* Transitions entre pages (navigateurs qui les supportent) : fondu court, l'en-tête reste en place */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .header{view-transition-name:header}
  ::view-transition-old(root){animation-duration:140ms}
  ::view-transition-new(root){animation-duration:220ms}
}

/* Fiche modèle en ligne : le lecteur remplace la vignette (aucun clic pour rien) */
.live-room{padding:0 16px 16px;display:flex;flex-direction:column;gap:12px}
.live-room .player{aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#0e0c10;border:1px solid var(--line)}
.live-room .player iframe{width:100%;height:100%;border:0;display:block}
.live-room .meta{margin:0;color:var(--muted);font-size:14px;display:flex;align-items:center;gap:8px}
.live-room .cta{display:grid;grid-template-columns:1fr auto;gap:8px}
.live-room .fav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}
.live-room .fav[aria-pressed="true"] svg{fill:var(--accent);stroke:var(--accent)}
.live-room .fav[aria-pressed="true"] .fav-label{color:var(--accent)}

/* Fiche modèle : sur grand écran, la colonne s'élargit (lecteur 16/9 lisible) ; carte hors ligne sur une seule colonne */
body[data-page="model"] .header,body[data-page="model"] .screen,body[data-page="model"] .foot{max-width:960px}
.results.single{grid-template-columns:1fr}
@media (min-width:600px){.results.single .model-card .thumb{aspect-ratio:16/9}}