/* vinisys watch — valeurs reprises telles quelles de la maquette « vinisys watch ». */
:root{
/* LES COULEURS DE vinisys, reprises du site vitrine.
Un fond quasi noir, quelques surfaces qui s'en détachent d'un ton, et un
seul accent : le vert acide. Il est CLAIR — tout ce qui se pose dessus
s'écrit donc en noir, jamais en blanc, d'où `--sur-accent`. */
--bg:#0F0F0F; --panel:#181818; --text:#F1F1F1; --ink2:#F1F1F1; --muted:#AAAAAA; --mut2:#AAAAAA;
--pill:#272727; --pill-h:#3F3F3F; --line:rgba(255,255,255,.1);
/* Surface d'une boîte posée PAR-DESSUS la page : un ton AU-DESSUS du fond,
pour que son bord se voie sans qu'elle change de camp. */
--modale:#212121;
--accent:#B8FF3D; --accent-d:#A4E833; --accent-soft:rgba(184,255,61,.13);
/* Ce qui s'écrit SUR l'accent. */
--sur-accent:#050505;
--red:#FF4848; --org:#F0A93F; --grn:#38B06F;
--shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 30px rgba(0,0,0,.45);
--top-h:62px;
/* La barre d'onglets du bas a été retirée — ses rubriques sont dans le tiroir.
La variable demeure, à zéro : une dizaine de règles s'en servent pour ne pas
passer sous elle, et elles réservent maintenant la seule encoche du bas. */
--tabs-h:env(safe-area-inset-bottom);
}
*{box-sizing:border-box}
/* `hidden` doit TOUJOURS masquer : sans cette règle, n'importe quelle
déclaration `display` l'emporte sur lui. */
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);
font:14px/1.43 Roboto,"Segoe UI",system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.02em}
input,select,button,textarea{font:inherit;color:inherit}
button{cursor:pointer}
.grow{flex:1}
.tnum{font-variant-numeric:tabular-nums}
/* ── Barre du haut ── */
.top{height:var(--top-h);flex-shrink:0;padding:0 22px;background:var(--panel);display:flex;align-items:center;
gap:22px;position:relative;z-index:30}
/* MENU, à gauche du logo. Il n'existe que là où la barre latérale n'est pas :
sur grand écran, les mêmes rubriques sont déjà à demeure sur le côté. */
.burger{display:none;width:38px;height:38px;flex:none;border:0;border-radius:11px;background:none;
align-items:center;justify-content:center;flex-direction:column;gap:4px;cursor:pointer;margin-left:-6px}
.burger:hover{background:var(--pill)}
.burger span{display:block;width:17px;height:2px;border-radius:2px;background:var(--text)}
.brand{display:flex;align-items:center;gap:9px;flex:none}
.logo{width:28px;height:20px;border-radius:7px;background:var(--accent);display:flex;align-items:center;justify-content:center}
.logo::after{content:"";border-left:7.5px solid var(--sur-accent);border-top:5px solid transparent;border-bottom:5px solid transparent;margin-left:2px}
.brand b{font-size:17px;font-weight:700;letter-spacing:-.03em;white-space:nowrap}
.filters{flex:1;min-width:0;display:flex;align-items:center;gap:8px}
.pill{height:40px;border-radius:99px;background:var(--pill);display:flex;align-items:center;flex-shrink:0;
border:0;outline:none;font-size:16px;font-weight:400;color:var(--text)}
.pill input{height:40px;border:0;outline:none;background:transparent;font-size:16px;font-weight:400;color:var(--text);min-width:0}
.pill:focus-within{box-shadow:0 0 0 2px var(--accent)}
.vsep{width:1px;height:24px;background:var(--line);flex-shrink:0}
.pill.place{flex:1;min-width:190px;padding:0 15px;gap:9px;position:relative}
.pill.place .dot{width:7px;height:7px;border-radius:99px;background:var(--accent);flex-shrink:0}
.pill.place input{flex:1}
.pill.radius{padding:0 14px;gap:8px;font-weight:600}
.pill.radius:hover{background:var(--pill-h)}
.chev{width:5px;height:5px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:rotate(45deg);margin-top:-3px}
.pill.date{width:138px;padding:0 13px}
.pill.times{padding:0 11px;gap:4px}
.pill.times input{width:62px}
.pill.times .arrow{font-size:11px;color:var(--muted)}
/* LA LISTE DÉROULANTE DES HEURES appartient au NAVIGATEUR : elle se dessine hors
de la page et aucune règle ne l'atteint. `accent-color` est le seul levier
normalisé — c'est lui qui teinte la ligne sélectionnée dans les menus natifs.
`color-scheme:dark` lui donne le fond sombre qui va avec. */
input[type="time"],input[type="date"]{accent-color:var(--accent);color-scheme:dark}
/* L'HORLOGE DES CHAMPS D'HEURE, en vert.
Le navigateur dessine lui-même cette petite icône et n'en propose aucun
réglage de couleur : on remplace donc son image par la nôtre, une horloge
tracée aux couleurs de vinisys. Même chose pour le calendrier du champ de
date, qui vit dans la même rangée et jurerait autrement. */
input[type="time"]::-webkit-calendar-picker-indicator{
background-image:url("data:image/svg+xml;utf8,` ouvert par showModal() : le fond, le piège à clavier et la
fermeture par Échap viennent du navigateur.
D'UN TON PLUS SOMBRE que la page : posée sur un fil blanc, une boîte blanche
ne se détache pas — on ne voit plus où finit la page et où commence la boîte.
Les champs, eux, restent clairs : ce sont eux qu'on vient remplir. */
.modale{border:0;padding:0;background:var(--modale);color:var(--text);border-radius:20px;
width:min(420px,92vw);max-height:86vh;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.6)}
.modale::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.modale-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px 10px}
.modale-head h2{font-size:18px}
.modale-body{padding:4px 20px 20px;overflow-y:auto;max-height:calc(86vh - 62px)}
.modale .m-form{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;background:none;box-shadow:none}
.modale .m-field{flex:1;min-width:0}
.modale .m-field .lbl{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mut2)}
.modale .m-row{display:flex;gap:9px}
.modale .m-place{position:relative}
.modale .m-in,.modale .m-place input{margin-top:6px;width:100%;height:44px;padding:0 13px;border:0;outline:none;border-radius:12px;
background:var(--panel);font-size:16px;font-weight:500;color:var(--text);display:flex;align-items:center;text-align:left}
.modale .m-in:focus,.modale .m-place input:focus{box-shadow:0 0 0 2px var(--accent)}
.modale button.m-in{font-weight:600;font-size:14px}
.modale .m-times{display:flex;align-items:center;gap:8px}
.modale .m-times span{margin-top:6px;font-size:12px;color:var(--mut2)}
.modale .m-go{margin-top:8px;height:46px;border-radius:12px;background:var(--accent);border:0;font-size:15px;font-weight:600;color:var(--sur-accent)}
/* ── TIROIR DU MENU ──
Même élément `` que la modale — donc le même fond, le même piège à
clavier, la même fermeture par Échap — mais ancré au bord GAUCHE, sur toute la
hauteur, sous le bouton qui l'ouvre. Une boîte flottante au milieu de l'écran
n'aurait pas dit d'où elle venait. */
.tiroir-menu{position:fixed;margin:0;inset:0 auto 0 0;height:100%;max-height:none;
width:min(300px,84vw);border:0;padding:0;background:var(--modale);color:var(--text);
border-radius:0 4px 4px 0;box-shadow:14px 0 40px rgba(0,0,0,.6);
flex-direction:column;animation:tiroir .2s ease-out}
/* `display` UNIQUEMENT à l'ouverture.
Un `` fermé est masqué par une règle du navigateur — `display:none` —
qu'une déclaration `display:flex` écrasait : le tiroir se fermait bel et bien,
mais restait peint par-dessus la page, et l'on croyait qu'il ne se fermait pas.
Le sélecteur `[open]` rend la main au navigateur pour l'état fermé. */
.tiroir-menu[open]{display:flex}
.tiroir-menu::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.tiroir-menu .modale-head{padding-top:calc(18px + env(safe-area-inset-top))}
.tiroir-menu .modale-body{flex:1;max-height:none;padding-bottom:calc(20px + env(safe-area-inset-bottom))}
@keyframes tiroir{from{transform:translateX(-22px);opacity:.5}to{transform:none;opacity:1}}
.menu-nav{display:flex;flex-direction:column;gap:2px}
/* Chaque rubrique porte son dessin : dans une liste de sept, l'œil retient une
forme avant de lire un mot. Le trait est le même partout — contour, jamais
plein — pour qu'aucune ne pèse plus qu'une autre. */
.menu-nav a{display:flex;align-items:center;gap:13px;padding:12px;border-radius:11px;
font-size:15px;font-weight:500;color:var(--ink2)}
.menu-nav a svg{width:21px;height:21px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round}
.menu-nav a:hover{background:var(--panel)}
.menu-nav a.on{background:var(--accent-soft);color:var(--accent-d);font-weight:600}
/* Ce qui relève du COMPTE se détache de ce qui relève du site. */
.menu-sep{height:1px;background:var(--line);margin:8px 12px}
.active-filters{margin-top:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.active-filters:empty{display:none}
#feedFilters{margin-top:12px}
.fpill{display:flex;align-items:center;gap:8px;padding:5px 11px;border-radius:9px;background:var(--accent-soft);border:0;
font-size:11.5px;font-weight:600;color:var(--accent-d)}
.fpill:hover{background:rgba(184,255,61,.18)}
.fpill span{font-size:13px;line-height:1}
.clear-all{border:0;background:none;padding:0;font-size:11.5px;font-weight:600;color:var(--muted)}
.clear-all:hover{color:var(--accent-d)}
.summary{margin-top:18px;font-size:13px;color:var(--muted)}
.results{margin-top:16px;display:flex;flex-direction:column;gap:16px;max-width:940px}
.res{display:flex;gap:16px;cursor:pointer}
.res:hover{opacity:.92}
.res-thumb{position:relative;width:172px;flex-shrink:0;aspect-ratio:9/16;border-radius:12px;overflow:hidden;background:var(--bg)}
.res-thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s}
.res-b{flex:1;min-width:0;padding-top:2px}
.res-t{font-size:18px;font-weight:400;letter-spacing:0;line-height:26px;text-wrap:pretty}
.res-m{margin-top:6px;font-size:12px;line-height:18px;color:var(--muted)}
.res-ch{margin-top:12px;display:flex;align-items:center;gap:9px}
.res-ch .av{width:26px;height:26px;font-size:10px}
.res-ch .nm{font-size:12.5px;font-weight:500;color:var(--mut2)}
.res-d{margin-top:10px;font-size:12px;line-height:18px;color:var(--mut2);text-wrap:pretty}
.res-d:empty{display:none}
.res-tags{margin-top:12px;display:flex;gap:7px;flex-wrap:wrap}
.res-tags span{padding:4px 10px;border-radius:8px;background:var(--pill);font-size:11px;font-weight:600;color:var(--mut2)}
.res-tags span.t1{background:var(--accent-soft);color:var(--accent-d)}
.res-mob{display:none}
/* ── Lecture ── */
.w{display:flex;height:100%;align-items:stretch}
/* Fond un ton plus clair que le noir bleuté de la maquette : trop sombre, il
écrasait la vidéo. `overflow` retient le cadre pendant les glissements. */
.stage{flex:1;min-width:0;position:relative;background:#2A2E44;display:flex;align-items:center;justify-content:center;overflow:hidden}
/* `touch-action:none` : le zapping vertical est à NOUS. Sans cela le navigateur
prend le glissement pour un défilement, interrompt le geste en cours de route
(« pointercancel ») et la vidéo reste plantée à mi-course. */
.vframe{position:relative;height:calc(100% - 64px);aspect-ratio:9/16;max-width:calc(100% - 150px);border-radius:20px;
overflow:hidden;background:#000;touch-action:none;z-index:1}
#player{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#000}
.tap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
.bigplay{width:62px;height:62px;border-radius:99px;background:rgba(255,255,255,.9);display:flex;align-items:center;
justify-content:center;transition:opacity .15s,transform .15s}
.bigplay:hover{transform:scale(1.06)}
.bigplay i{border-left:16px solid var(--text);border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:5px}
.playing .bigplay{opacity:0}
.w-top{position:absolute;top:14px;left:14px;right:14px;display:flex;align-items:center;gap:8px;pointer-events:none}
.w-top > *{pointer-events:auto}
.glass{padding:5px 11px;border-radius:99px;background:rgba(20,22,31,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
font-size:11px;font-weight:600;color:#fff;border:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%}
.glass:empty{display:none}
button.glass{cursor:pointer}
.w-back{display:none;width:34px;height:34px;padding:0;align-items:center;justify-content:center}
/* Position en PROPORTION de la hauteur de la vidéo : en pixels fixes, la
colonne remontait sur le compteur de temps des écrans moins hauts. */
/* LE BOUTON DU SON, sous le compteur de temps, en haut à droite. Rond et de la
même taille que la flèche de retour : les deux commandes de coin se répondent. */
.w-son{position:absolute;top:50px;right:14px;width:44px;height:44px;padding:0;
display:flex;align-items:center;justify-content:center;z-index:3;cursor:pointer}
.w-son svg{width:25px;height:25px;fill:#fff}
.w-son .croix{display:none}
.w-son.coupe .ondes{display:none}
.w-son.coupe .croix{display:block}
/* L'ATTENTE entre deux séquences : un fond noir et une roue, le temps que la
suivante arrive. Derrière le cadre, jamais devant. */
.stage-charge{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#000;z-index:0}
.stage-charge i{width:32px;height:32px;border-radius:99px;border:3px solid rgba(255,255,255,.22);
border-top-color:#fff;animation:tourne .8s linear infinite}
@keyframes tourne{to{transform:rotate(1turn)}}
.rail{position:absolute;right:12px;bottom:26%;display:flex;flex-direction:column;align-items:center;gap:16px}
.r{display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:none;padding:0;color:#fff}
.rc{width:46px;height:46px;border-radius:99px;background:rgba(20,22,31,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
display:flex;align-items:center;justify-content:center;transition:transform .12s,background .15s}
.r:hover .rc{transform:scale(1.07)}
.r[aria-pressed="true"] .rc{background:rgba(20,22,31,.5);box-shadow:inset 0 0 0 1.6px var(--accent)}
.r b{font-size:11.5px;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.35)}
/* Icônes de la colonne d'actions : de vraies icônes, pleines et blanches. */
.rc svg{width:25px;height:25px;fill:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
.rc svg .dot{fill:#4A4A50}
/* C'est le SYMBOLE qui se colore, pas le rond : une pastille vert acide posée
sur une image de route est une tache, là où un trait vert se lit comme un
état. Les points de la bulle, eux, repassent au noir du disque. */
.r[aria-pressed="true"] .rc svg{fill:var(--accent)}
.r[aria-pressed="true"] .rc svg .dot{fill:#0D0D0E}
/* « J'aime » : le cœur ROUGIT, la convention que tout le monde reconnaît ; le
rond garde son verre fumé pour que le rouge se lise sur n'importe quelle image. */
#rLike[aria-pressed="true"] .rc{background:rgba(20,22,31,.5)}
#rLike[aria-pressed="true"] .rc svg{fill:#FF3B5C}
#rLike[aria-pressed="true"] svg{fill:#FF3B5C;animation:pop .32s ease-out}
@keyframes pop{0%{transform:scale(.7)}55%{transform:scale(1.22)}100%{transform:scale(1)}}
.w-info{position:absolute;left:0;right:0;bottom:0;padding:64px 16px 16px;
background:linear-gradient(180deg,transparent 0%,rgba(16,18,32,.86) 62%);color:#fff}
/* Les textes du bas laissent libre la colonne d'icônes, qui descend à leur
hauteur : ils ne passent jamais dessous. */
.w-info > :not(.w-prog){padding-right:60px}
.w-who{display:flex;align-items:center;gap:10px}
.w-who .av{width:34px;height:34px}
.w-who b{font-size:13.5px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.follow{padding:6px 14px;border-radius:99px;background:var(--accent);border:0;font-size:12px;font-weight:600;color:var(--sur-accent);flex-shrink:0}
.follow:hover{filter:brightness(1.06)}
.follow[aria-pressed="true"]{background:rgba(255,255,255,.22)}
.w-title{margin-top:10px;font-size:14.5px;font-weight:600;line-height:1.4;text-wrap:pretty}
.w-meta{margin-top:6px;font-size:12.5px;color:rgba(255,255,255,.72)}
.w-meta-place{display:none}
.w-tele{margin-top:12px;display:flex;gap:7px;flex-wrap:wrap}
.w-tele span{padding:5px 10px;border-radius:8px;background:rgba(255,255,255,.16);font-size:11px;font-weight:600;white-space:nowrap;
font-variant-numeric:tabular-nums}
/* La barre fait 3 px, mais on la saisit sur 17 : une cible de 3 px ne se
touche pas au doigt. */
.w-prog{margin-top:7px;padding:7px 0;cursor:pointer;outline:none;touch-action:none}
.w-prog span{display:block;position:relative;height:3px;border-radius:99px;background:rgba(255,255,255,.28)}
.w-prog i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:99px;background:#fff}
.w-prog:hover span,.w-prog:focus-visible span{height:5px;margin-top:-1px}
.nav-arrow{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:99px;border:0;z-index:2;
background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center}
.nav-arrow:hover{background:rgba(255,255,255,.26)}
.nav-arrow:disabled{opacity:.3;cursor:default}
.nav-arrow.prev{left:28px}.nav-arrow.next{right:28px}
.nav-arrow i{width:11px;height:11px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg);margin-left:4px}
.nav-arrow.next i{border:0;border-right:2px solid #fff;border-top:2px solid #fff;margin:0 4px 0 0}
.w-side{width:400px;flex-shrink:0;overflow-y:auto;padding:18px 20px 40px;background:var(--bg)}
.card{padding:16px;border-radius:16px;background:var(--panel);box-shadow:var(--shadow)}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mini-map{margin-top:10px;height:120px;border-radius:12px;overflow:hidden;background:linear-gradient(150deg,#141417 0%,#0D0D0E 84%);cursor:pointer}
.place-btn{margin-top:10px;font-size:13px;font-weight:600;line-height:1.4;text-align:left;border:0;background:none;padding:0;
color:var(--text);display:block;width:100%}
.place-btn:hover{color:var(--accent-d)}
.place-card .note{margin-top:3px;font-size:12px}
.place-card .note:empty{display:none}
.streets{margin-top:8px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.streets:empty{display:none}
.streets span{padding:4px 9px;border-radius:8px;background:var(--pill);font-size:11.5px;font-weight:600;color:var(--ink2)}
.streets i{font-style:normal;font-size:12px;color:var(--muted)}
.link{margin-top:10px;border:0;background:none;padding:0;font-size:12.5px;font-weight:600;color:var(--accent-d)}
.link:hover{text-decoration:underline}
.sec-head{margin-top:22px;display:flex;align-items:baseline;gap:12px}
.sec-head b{font-size:16px;font-weight:700;letter-spacing:-.02em}
.sec-head span{font-size:12.5px;color:var(--muted)}
.sec-head .close{border:0;background:none;padding:0;font-size:12.5px;font-weight:600;color:var(--mut2)}
.sec-head .close:hover{color:var(--accent-d)}
/* Commentaires : un vrai panneau latéral, qui glisse de la droite. Il couvre la
colonne d'informations mais laisse la vidéo visible et pilotable — on lit
les réactions en regardant ce dont elles parlent. */
.sheet{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:92vw;z-index:56;margin:0;background:var(--bg);
display:flex;flex-direction:column;box-shadow:-18px 0 46px rgba(0,0,0,.5);
transform:translateX(100%);visibility:hidden;
transition:transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s linear .3s}
.sheet.open{transform:none;visibility:visible;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.sheet .sec-head{margin:0;padding:20px 20px 4px;flex-shrink:0}
.sheet .composer{padding:0 20px;flex-shrink:0}
.sheet .note{padding:0 20px}
.sheet .com-list{flex:1;min-height:0;overflow-y:auto;padding:4px 20px 30px}
.grip,.sheet-scrim{display:none}
.composer{margin-top:12px;display:flex;gap:10px;align-items:flex-start}
.composer .av{width:32px;height:32px;font-size:11px}
.composer textarea{display:block;width:100%;padding:11px 14px;border-radius:14px;border:0;background:var(--panel);box-shadow:var(--shadow);
font-size:13px;line-height:1.45;color:var(--text);resize:none;outline:none;min-height:42px;max-height:160px}
.composer textarea:focus{box-shadow:0 0 0 2px var(--accent),0 8px 22px rgba(184,255,61,.16)}
.composer textarea::placeholder{color:var(--muted)}
.composer-acts{margin-top:9px;display:flex;gap:8px;justify-content:flex-end}
.composer-acts button{padding:8px 14px;border-radius:10px;border:0;font-size:12.5px;font-weight:600}
.composer-acts .cancel{background:var(--pill);color:var(--mut2)}
.composer-acts .cancel:hover{background:var(--line)}
.composer-acts .send{background:var(--accent);color:var(--sur-accent);padding:8px 15px}
.composer-acts .send:hover{background:var(--accent-d)}
.composer-acts .send:disabled{opacity:.6}
.sheet .note{font-size:12.5px}
.com-list{margin-top:18px;display:flex;flex-direction:column;gap:16px}
.com{display:flex;gap:10px;align-items:flex-start}
.com .av{width:32px;height:32px;font-size:11px}
.com-b{flex:1;min-width:0}
.com-n{display:flex;align-items:baseline;gap:8px}
.com-n b{font-size:12.5px;font-weight:600}
.com-n em{font-style:normal;font-size:11.5px;color:var(--muted)}
.com-t{margin-top:3px;font-size:13px;line-height:1.55;color:var(--ink2);text-wrap:pretty;overflow-wrap:anywhere;white-space:pre-line}
.com-acts{margin-top:7px;display:flex;align-items:center;gap:14px}
.like{display:flex;align-items:center;gap:6px;border:0;background:none;padding:0;font-size:11.5px;font-weight:600;color:var(--muted)}
.like svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2}
.like[aria-pressed="true"]{color:#E8364F}
.like[aria-pressed="true"] svg{fill:#FF3B5C;stroke:#FF3B5C}
.reply-btn{border:0;background:none;padding:0;font-size:11.5px;font-weight:600;color:var(--muted)}
.reply-btn:hover{color:var(--accent-d)}
.replies{margin-left:42px;display:flex;flex-direction:column;gap:14px}
.replies:empty{display:none}
.replies .av{width:26px;height:26px;font-size:10px}
.reply-box{margin-top:9px;display:flex;gap:8px}
.reply-box input{flex:1;min-width:0;height:38px;padding:0 12px;border-radius:10px;border:0;background:var(--panel);box-shadow:var(--shadow);
font-size:12.5px;outline:none}
.reply-box input:focus{box-shadow:0 0 0 2px var(--accent)}
.reply-box button{padding:0 14px;border-radius:10px;border:0;background:var(--accent);color:var(--sur-accent);font-size:12.5px;font-weight:600}
.related{margin-top:12px;display:flex;flex-direction:column;gap:12px}
.related a{display:flex;gap:11px}
.related a:hover{opacity:.9}
.rt{position:relative;width:84px;flex-shrink:0;aspect-ratio:3/4;border-radius:8px;overflow:hidden;background:var(--bg)}
.rt video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s}
.rt span{position:absolute;bottom:4px;right:4px;padding:1px 5px;border-radius:5px;background:rgba(20,22,31,.72);font-size:9.5px;font-weight:600;color:#fff}
.rb{flex:1;min-width:0}
.r1{font-size:14px;font-weight:500;line-height:20px;text-wrap:pretty}
.r2{margin-top:4px;font-size:12px;line-height:18px;color:var(--muted)}
.r3{font-size:12px;line-height:18px;color:var(--muted)}
/* ── Mode propriétaire : sa propre séquence dans la page de lecture ── */
.owner{margin-bottom:16px}
.owner-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.owner-top .back{margin:0}
.owner-top .close{display:none;border:0;background:none;padding:0;font-size:12.5px;font-weight:600;color:var(--mut2)}
.owner .card{display:flex;flex-direction:column;gap:6px}
.own-head{display:flex;align-items:flex-start;gap:10px;margin-top:4px}
.own-title{flex:1;min-width:0;font-size:17px;letter-spacing:-.02em;line-height:1.3;overflow-wrap:anywhere}
.own-acts{display:flex;gap:6px;flex-shrink:0}
.ic-btn{position:relative;width:34px;height:34px;border-radius:10px;border:0;background:var(--pill);color:var(--ink2);
display:flex;align-items:center;justify-content:center;transition:background .15s}
.ic-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ic-btn:hover{background:var(--pill-h)}
.ic-btn.save{background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1.4px rgba(184,255,61,.5)}
.ic-btn.save:hover{background:var(--accent-d)}
.ic-btn.pub{background:var(--accent-soft);color:var(--accent-d)}
.ic-btn.pub:hover{background:rgba(184,255,61,.18)}
.ic-btn.del{background:rgba(255,72,72,.14);color:#FF7A6B}
.ic-btn.del:hover{background:#FADAD5}
.ic-btn:disabled{opacity:.55;cursor:default}
/* Infobulle : le libellé du bouton, au survol comme au focus clavier. */
.ic-btn[data-tip]::after{content:attr(data-tip);position:absolute;top:calc(100% + 7px);right:0;z-index:5;padding:5px 9px;border-radius:8px;
background:#3F3F3F;color:var(--text);font-size:11.5px;font-weight:600;white-space:nowrap;pointer-events:none;
opacity:0;transform:translateY(-3px);transition:opacity .12s,transform .12s}
.ic-btn[data-tip]:hover::after,.ic-btn[data-tip]:focus-visible::after{opacity:1;transform:none}
.owner .note:empty{display:none}
.owner .sp-form{margin-top:8px;gap:10px}
.owner .sp-form input,.owner .sp-form textarea{background:var(--pill);box-shadow:none}
.owner .sp-form input:focus,.owner .sp-form textarea:focus{box-shadow:0 0 0 2px var(--accent)}
.owner .cats button{box-shadow:none;background:var(--pill)}
.owner .cats button[aria-pressed="true"]{background:var(--accent);color:var(--sur-accent)}
#rEdit{display:none}
.state-chip{display:none}
#watch.owner .state-chip{display:block}
.state-chip.pub{background:rgba(18,169,113,.85)}
/* Sa propre vidéo : pas d'« À suivre », pas de lien de dossier en double —
le bouton est dans la fiche. Privée, elle n'a ni mentions, ni fil, ni partage. */
#watch.owner .sec-head.rel,#watch.owner .related,#watch.owner #dossierBtn{display:none}
#watch.prive #rLike,#watch.prive #rCom,#watch.prive #rSave,#watch.prive #rShare{display:none}
/* ── Boutons génériques ── */
.primary{height:40px;padding:0 18px;border:0;border-radius:11px;background:var(--accent);color:var(--sur-accent);font-weight:600;font-size:13px;white-space:nowrap}
.primary:hover{background:var(--accent-d)}
.ghost{height:40px;padding:0 16px;border-radius:11px;background:var(--pill);border:0;font-size:13px;font-weight:600;color:var(--ink2)}
.ghost:hover{background:var(--pill-h)}
.danger{height:40px;padding:0 16px;border-radius:11px;background:rgba(255,72,72,.14);border:0;font-size:13px;font-weight:600;color:#FF7A6B}
.note{margin-top:5px;font-size:13px;color:var(--muted);line-height:1.5}
/* ── Onglets mobiles ── */
.tabs{display:none}
/* ── Panneau latéral ── */
.scrim{position:fixed;inset:0;z-index:50;background:rgba(22,24,38,.35)}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:60;width:380px;max-width:92vw;background:var(--panel);display:flex;flex-direction:column;
box-shadow:-18px 0 46px rgba(0,0,0,.5);animation:slide .22s ease-out;padding-bottom:env(safe-area-inset-bottom)}
@keyframes slide{from{transform:translateX(26px);opacity:.4}to{transform:none;opacity:1}}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px 12px;padding-top:calc(18px + env(safe-area-inset-top))}
.drawer-head h2{font-size:18px}
.x{width:34px;height:34px;border:0;border-radius:99px;background:var(--pill);font-size:14px;color:var(--mut2)}
.drawer-body{padding:8px 20px 20px;display:flex;flex-direction:column;gap:10px;overflow-y:auto}
.drawer-body input,.drawer-body textarea{height:46px;border-radius:12px;border:0;background:var(--pill);padding:0 14px;font-size:14px;outline:none;color:var(--text)}
.drawer-body input:focus{box-shadow:0 0 0 2px var(--accent)}
.drawer-body .primary{height:46px;margin-top:4px;font-size:14px}
.ghost.block{display:flex;align-items:center;justify-content:center;height:44px}
.ghost.danger{color:#FF7A6B}
.acct{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.acct .ini{width:46px;height:46px;font-size:15px}
.acct-n{font-size:15px;font-weight:700}
.acct-m{font-size:12.5px;color:var(--muted);margin-top:2px}
.err{color:#FF7A6B;font-size:13px;margin:0}
.drawer-nav{display:none}
.drawer.wide{width:50vw;max-width:none}
.drawer-map{flex:1;min-height:320px;border-radius:14px;overflow:hidden;background:#0D0D0E}
#mapBody{flex:1;display:flex;flex-direction:column;gap:12px}
/* Panneau de vitesse par-dessus la vidéo, à GAUCHE — mêmes proportions et mêmes
couleurs que celui du guidage dans l'application : un cadran sombre de 74 px,
la limitation en pastille blanche à cheval sur son bord, et tout passe au rouge
en cas de dépassement. À gauche et non à droite, où la colonne des actions
(j'aime, commentaires, partage) occupe déjà le bord de l'image. */
.vspeed{position:absolute;top:66px;left:14px;width:52px;height:52px;border-radius:26px;
background:rgba(18,24,31,.94);border:1px solid rgba(255,255,255,.14);
display:flex;flex-direction:column;align-items:center;justify-content:center;
box-shadow:0 2px 10px rgba(0,0,0,.35);z-index:3;pointer-events:none}
.vspeed b{font-size:18px;font-weight:800;color:#fff;line-height:19px;font-variant-numeric:tabular-nums}
.vspeed i{font-size:8px;font-weight:600;color:#9fb0c0;font-style:normal;margin-top:-1px}
.vspeed .vlimit{position:absolute;top:-6px;right:-6px;width:25px;height:25px;border-radius:13px;
background:#fff;border:3px solid #1b1f27;display:flex;align-items:center;justify-content:center;
font-size:11px;font-weight:800;color:#111}
.vspeed.over{background:#e02424;border-color:#ff8a8a}
.vspeed.over b{color:#fff}
.vspeed.over i{color:#ffe0e0}
.vspeed.over .vlimit{border-color:#e12}
.astuce{margin-top:8px;font-size:12px;font-weight:600;color:var(--muted)}
.passages{margin:14px 0;border:1px solid var(--line);border-radius:16px;padding:4px 14px 12px;background:var(--panel)}
.passages>summary{cursor:pointer;padding:12px 2px;font-weight:700;font-size:14.5px}
.pass{display:flex;gap:12px;align-items:flex-start;padding:11px 2px;border-top:1px solid var(--line);cursor:pointer}
.pass:hover{opacity:.82}
.pass .h{font-variant-numeric:tabular-nums;font-weight:800;font-size:15px;white-space:nowrap}
.pass .r{font-weight:700;font-size:14px}
.pass .s{font-size:12px;color:var(--muted);margin-top:2px}
.pass .est{font-size:11px;color:var(--muted);font-style:italic}
.live{margin-top:6px;display:flex;gap:18px;flex-wrap:wrap}
.live b{display:block;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.live span{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.or{display:flex;align-items:center;gap:12px;margin:6px 0;color:var(--muted);font-size:12.5px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
/* Connexion Facebook : couleur de marque de Meta, l'usage attendu pour ce bouton. */
.fb{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:46px;border:0;border-radius:12px;
background:#1877F2;color:#fff;font-size:14px;font-weight:700}
.fb:hover{background:#166FE5}
.fb svg{width:20px;height:20px}
/* ── Suggestions de lieu ── */
.suggest{position:absolute;top:calc(100% + 8px);left:0;width:360px;max-width:86vw;z-index:40;margin:0;padding:6px;list-style:none;
background:var(--panel);border-radius:14px;box-shadow:0 16px 40px rgba(0,0,0,.5);max-height:340px;overflow-y:auto}
.suggest li{padding:9px 11px;border-radius:10px;cursor:pointer;display:flex;gap:12px;align-items:baseline}
.suggest li:hover,.suggest li[aria-selected="true"]{background:var(--pill)}
.suggest .sn{font-size:13.5px;font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.suggest .sa{display:block;font-size:12px;font-weight:400;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.suggest .sd{font-size:12px;color:var(--muted);white-space:nowrap}
.suggest .none{color:var(--muted);font-size:13px;cursor:default}
.suggest .none:hover{background:none}
/* ── Espace personnel ── */
.space{display:grid;grid-template-columns:230px minmax(0,1fr);gap:26px;align-items:start}
.space-nav{position:sticky;top:0;display:flex;flex-direction:column;gap:4px;background:var(--panel);border-radius:16px;padding:12px;
box-shadow:var(--shadow);min-height:calc(100vh - var(--top-h) - 62px)}
.space-me{display:flex;align-items:center;gap:10px;padding:4px 6px 12px;border-bottom:1px solid var(--line);margin-bottom:8px}
.space-me .av{width:38px;height:38px;font-size:13px}
.space-me .who{min-width:0}
.space-me b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.space-me span{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.space-nav .sp{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-radius:11px;
font-size:13.5px;font-weight:500;color:var(--ink2)}
.space-nav .sp:hover{background:var(--pill)}
.space-nav .sp.on{background:var(--accent-soft);color:var(--accent-d);font-weight:600}
.space-nav .sp span{font-size:12px;font-weight:600;color:var(--muted)}
.space-nav .sp.on span{color:var(--accent-d)}
.space-nav #spLogout{margin-top:10px}
/* Pas de capitales ici : ce libellé porte la marque, et elle s'écrit toujours
en minuscules. */
.sp-sep{margin:12px 6px 4px;padding-top:12px;border-top:1px solid var(--line);font-size:11px;font-weight:700;letter-spacing:.08em;
color:var(--muted)}
.space-main .feed-head{margin-top:4px}
.sp-tools{display:flex;gap:10px;align-items:center;margin:14px 0 4px;flex-wrap:wrap}
.sp-tools input,.sp-tools select{height:40px;padding:0 14px;border-radius:99px;border:0;background:var(--panel);box-shadow:var(--shadow);font-size:13px;outline:none}
.sp-tools input{flex:1;min-width:200px}
.sp-tools input:focus{box-shadow:0 0 0 2px var(--accent)}
.sp-detail{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:26px;align-items:start}
.frame{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000}
.frame video{width:100%;height:100%;display:block}
.sp-form{display:flex;flex-direction:column;gap:12px}
.sp-form h1{font-size:22px;letter-spacing:-.03em}
.sp-form h2{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-top:10px}
.sp-detail > div > h2{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:10px}
.sp-form label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:var(--muted)}
.sp-form input,.sp-form textarea{width:100%;padding:11px 13px;border-radius:12px;border:0;background:var(--panel);box-shadow:var(--shadow);
font-size:13.5px;font-weight:400;color:var(--text);resize:vertical;outline:none}
.sp-form input:focus,.sp-form textarea:focus{box-shadow:0 0 0 2px var(--accent)}
.sp-meta{font-size:12.5px;color:var(--muted);line-height:1.7}
.sp-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.sp-map{height:260px;border-radius:14px;overflow:hidden;margin-top:14px;background:var(--line)}
.sp-ref{background:var(--panel);border-radius:14px;padding:14px;font-size:13px;line-height:1.75;box-shadow:var(--shadow)}
.sp-ref b{display:block;font-size:14.5px;margin-bottom:4px}
.sp-ref dl{margin:8px 0 0;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:12.5px}
.sp-ref dt{color:var(--muted)}
.sp-ref dd{margin:0}
.sp-list{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.sp-row{display:flex;align-items:center;gap:14px;background:var(--panel);border-radius:14px;padding:13px 15px;box-shadow:var(--shadow)}
.sp-row .grow{flex:1;min-width:0}
.sp-row b{display:block;font-size:13.5px;font-weight:600}
.sp-row small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.sp-row .tag{position:static;font-size:11px;font-weight:700;padding:4px 10px;border-radius:8px;background:var(--accent-soft);color:var(--accent-d);white-space:nowrap}
.sp-row .tag.final{background:#E2F5EE;color:#0E8A5C}
.back{display:inline-block;margin-bottom:14px;font-size:13px;font-weight:600;color:var(--muted)}
.back:hover{color:var(--accent-d)}
.cats{display:flex;gap:8px;flex-wrap:wrap}
.cats button{display:flex;align-items:center;gap:7px;padding:8px 14px;border-radius:99px;border:0;background:var(--panel);box-shadow:var(--shadow);
font-size:12.5px;font-weight:600;color:var(--ink2)}
.cats button b{width:10px;height:10px;border-radius:3px}
/* Ligne défilante : une seule ligne, sans ascenseur visible. Des flèches
flottantes en bout de ligne disent qu'il y a plus loin — la gauche n'apparaît
qu'une fois qu'on a avancé, la droite disparaît au bout. */
.hs-wrap{position:relative}
.hs-wrap > .cats{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth;padding:2px 0}
.hs-wrap > .cats::-webkit-scrollbar{display:none}
.hs-wrap > .cats > *{flex-shrink:0;white-space:nowrap}
.hs-wrap::before,.hs-wrap::after{content:"";position:absolute;top:0;bottom:0;width:56px;pointer-events:none;z-index:1;opacity:0;transition:opacity .15s}
.hs-wrap::before{left:0;background:linear-gradient(270deg,rgba(255,255,255,0),var(--panel) 62%)}
.hs-wrap::after{right:0;background:linear-gradient(90deg,rgba(255,255,255,0),var(--panel) 62%)}
.hs-wrap.can-prev::before,.hs-wrap.can-next::after{opacity:1}
.hs-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:30px;height:30px;border-radius:99px;border:0;padding:0;
background:var(--accent);box-shadow:0 2px 10px rgba(184,255,61,.3);display:flex;align-items:center;justify-content:center}
.hs-btn:hover{background:var(--accent-d)}
.hs-prev{left:0}.hs-next{right:0}
.hs-btn i{width:8px;height:8px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);margin-right:3px}
.hs-prev i{transform:rotate(135deg);margin:0 0 0 3px}
.cats button[aria-pressed="true"]{background:var(--accent);color:var(--sur-accent)}
.state{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:7px;font-size:10.5px;font-weight:700}
/* Sur la vignette : fond opaque, car l'image derrière peut être de n'importe
quelle couleur — une teinte translucide y deviendrait illisible. */
.thumb .state{position:absolute;top:8px;right:8px}
.thumb .state.pub{background:var(--grn);color:#fff}
.thumb .state.priv{background:rgba(20,22,31,.78);color:#fff}
/* Espace personnel : son menu remplace celui du site. */
body.in-space .side{display:none}
/* ── Graphiques ── */
.chart{margin:0 0 20px;background:var(--panel);border-radius:16px;padding:16px 16px 10px;box-shadow:var(--shadow)}
.chart figcaption{font-size:13px;font-weight:700;margin-bottom:12px}
.chart svg{width:100%;height:auto;display:block}
.bars{display:flex;flex-direction:column;gap:9px}
.bar-row{display:grid;grid-template-columns:150px minmax(0,1fr) 40px;align-items:center;gap:12px}
.bar-lbl{font-size:12.5px;color:var(--mut2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{height:20px;background:var(--bg);border-radius:6px;overflow:hidden}
.bar-fill{display:block;height:100%;border-radius:6px;min-width:3px}
.bar-val{font-size:12.5px;font-weight:700;text-align:right}
.prop{display:flex;height:24px;border-radius:8px;overflow:hidden;background:var(--bg);gap:2px}
.prop-a{background:#B8FF3D;border-radius:8px 2px 2px 8px}
.prop-b{background:#4A4A50;border-radius:2px 8px 8px 2px}
.prop-key{display:flex;gap:22px;margin-top:11px;font-size:12.5px;color:var(--mut2)}
.prop-key i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:7px}
.prop-key .k-a{background:#B8FF3D}
.prop-key .k-b{background:#4A4A50}
.prop-key b{color:var(--text);margin-left:4px}
.ring-wrap{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.chart svg.ring{width:140px;height:140px;flex:none}
.ring-key{display:flex;flex-direction:column;gap:9px;font-size:13px;color:var(--mut2)}
.ring-key i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:9px}
.ring-key b{color:var(--text);margin-left:5px}
.ring-key small{font-size:12px;margin-top:3px}
/* ── Carte communautaire ── */
.map-tools{display:flex;align-items:center;gap:10px;margin-top:0;flex-wrap:wrap}
.map-count{position:absolute;right:10px;bottom:10px;z-index:3;padding:5px 11px;border-radius:9px;background:rgba(255,255,255,.94);
box-shadow:0 1px 4px rgba(22,24,38,.12);font-size:12px;font-weight:600;color:var(--ink2);pointer-events:none}
.map-count:empty{display:none}
.seg{display:flex;background:var(--panel);border-radius:12px;padding:3px;gap:2px;box-shadow:var(--shadow);flex-wrap:wrap}
.seg button{border:0;background:transparent;padding:7px 13px;border-radius:9px;font-size:12.5px;font-weight:600;color:var(--mut2);white-space:nowrap}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--accent-soft);color:var(--accent-d)}
.seg button .dot{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:7px}
.sw{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;color:var(--mut2);cursor:pointer;background:var(--panel);
padding:8px 13px;border-radius:12px;box-shadow:var(--shadow);position:relative}
.sw input{position:absolute;opacity:0;pointer-events:none}
.sw span{width:34px;height:19px;border-radius:99px;background:#D9DCE8;position:relative;transition:background .15s}
.sw span::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:99px;background:#fff;transition:transform .15s}
.sw input:checked + span{background:var(--accent)}
.sw input:checked + span::after{transform:translateX(15px)}
.map-tools .ghost{background:var(--panel);box-shadow:var(--shadow)}
/* La carte prend TOUTE la hauteur restante : la page est une colonne dont la
carte est l'élément extensible, quelle que soit la hauteur de l'écran et le
nombre de filtres affichés au-dessus. */
.content > #mapPage{display:flex;flex-direction:column;height:100%;padding-bottom:18px}
.map-wrap{position:relative;flex:1;min-height:320px;margin-top:14px}
.big-map{position:absolute;inset:0;border-radius:16px;overflow:hidden;background:#0D0D0E}
.map-card{position:absolute;left:16px;bottom:16px;width:280px;background:var(--panel);border-radius:16px;overflow:hidden;
box-shadow:0 12px 34px rgba(20,22,31,.22);z-index:5}
.map-card video{width:100%;aspect-ratio:16/9;object-fit:cover;background:#C9CDE0;display:block}
.map-card-b{padding:12px 14px 14px}
.map-card-b b{display:block;font-size:14px;line-height:1.3}
.map-card-b span{display:block;font-size:12px;color:var(--muted);margin:3px 0 11px}
.map-card-b .primary{display:flex;align-items:center;justify-content:center;height:38px}
.map-card-x{position:absolute;top:8px;right:8px;z-index:2;width:28px;height:28px;border:0;border-radius:99px;
background:rgba(20,22,31,.62);color:#fff;font-size:18px;line-height:1}
/* ── Écrans étroits : la disposition du mobile ─────────────────────────────
En dessous de 1120 px, la barre de filtres ne tient plus sur une ligne. On
passe alors à la maquette mobile : en-tête réduit, onglets en bas, filtres
dans la page de recherche. */
@media (max-width:1119px){
body{background:var(--bg)}
.top{position:fixed;top:0;left:0;right:0;height:auto;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;gap:12px;
background:rgba(15,15,15,.95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.logo{width:24px;height:17px;border-radius:6px}
.logo::after{border-left-width:6.5px;border-top-width:4px;border-bottom-width:4px}
.brand{gap:7px}
.brand b{font-size:15.5px}
.filters > :not(#go){display:none}
.filters{justify-content:flex-end}
.me{width:32px;height:32px;font-size:11.5px}
.side{display:none}
.burger{display:flex}
.shell{display:block;height:auto}
.content{overflow:visible}
.content > section{padding:calc(62px + env(safe-area-inset-top)) 0 calc(var(--tabs-h) + 18px)}
.chips{padding:0 16px;flex-wrap:nowrap;overflow-x:auto;gap:7px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{padding:7px 14px;font-size:12px}
/* Le titre se rapproche de la rangée de rubriques : ils vont ensemble, et
seize pixels les faisaient lire comme deux blocs séparés. */
.feed-head{padding:0 16px;margin-top:8px}
.feed-head h1{font-size:19px}
.grid{padding:0 14px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px 12px}
.badge{bottom:7px;right:7px;padding:2px 6px;font-size:10px}
.tags{top:7px;left:7px;gap:5px}
.tag{padding:3px 8px;font-size:9.5px}
/* Sur téléphone, YouTube descend d'un cran mais pas plus : titre 14 px sur
20 px d'interligne, reste 12 px sur 18. L'ancienne échelle (12,5 et 11 px)
était plus petite que la leur, et la marge de 3 px sous le titre créait une
marche entre le titre et le nom du conducteur. */
.card-b{margin-top:8px;gap:10px}
.card-b .ini{width:28px;height:28px;font-size:10.5px}
.card-t{font-size:14px;line-height:20px}
.card-s{font-size:12px;line-height:18px}.card-s2{font-size:12px;line-height:18px}
.empty{padding:0 24px}
/* Recherche */
.m-form{display:flex;flex-direction:column;gap:10px;margin:12px 16px 0;padding:14px;border-radius:16px;background:var(--panel);
box-shadow:0 1px 2px rgba(0,0,0,.4),0 8px 20px rgba(0,0,0,.45)}
.m-field{flex:1;min-width:0}
.m-field .lbl{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.m-row{display:flex;gap:9px}
.m-place{position:relative}
.m-in,.m-place input{margin-top:6px;width:100%;height:42px;padding:0 13px;border:0;outline:none;border-radius:12px;background:var(--pill);
font-size:16px;font-weight:500;color:var(--text);display:flex;align-items:center;text-align:left}
.m-in:focus,.m-place input:focus{box-shadow:0 0 0 2px var(--accent)}
button.m-in{font-weight:600;font-size:14px}
.m-times{display:flex;align-items:center;gap:8px}
.m-times span{margin-top:6px;font-size:12px;color:var(--muted)}
.m-go{margin-top:2px;height:44px;border-radius:12px;background:var(--accent);border:0;font-size:14px;font-weight:600;color:var(--sur-accent)}
.active-filters{padding:0 16px}
.summary{padding:0 16px;margin-top:12px;font-size:12.5px}
.results{padding:0 16px;max-width:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.res{display:block}
.res-thumb{width:100%}
.res-thumb .badge{font-size:10.5px}
.res-t{margin-top:10px;font-size:14.5px;letter-spacing:-.01em}
.res-m,.res-ch,.res-d,.res-tags{display:none}
.res-mob{display:block;margin-top:5px;font-size:12px;color:var(--muted)}
/* Lecture plein écran vertical */
body.watching .top{display:none}
.content > #watch{padding:0}
#watch .w{display:block}
#watch .stage{position:fixed;inset:0;z-index:20;background:#000}
#watch .vframe{position:absolute;inset:0;height:auto;max-width:none;border-radius:0;aspect-ratio:auto}
.bigplay{width:58px;height:58px}
.bigplay i{border-left-width:15px}
.w-top{top:calc(12px + env(safe-area-inset-top));left:12px;right:12px}
.glass{padding:6px 11px;background:rgba(20,22,31,.42);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.w-back{display:flex}
.w-son{top:calc(50px + env(safe-area-inset-top));right:12px}
/* LA VILLE ET LE PAYS, à côté de la catégorie.
Cette pastille était masquée sur téléphone faute de place. Elle y a sa place
: c'est la première question qu'on se pose devant une séquence — où est-ce ?
Elle cède le pas au reste de la rangée et se termine par des points de
suspension plutôt que de repousser l'horloge hors de l'écran. */
.w-place-chip{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail{right:10px;bottom:calc(var(--tabs-h) + 128px)}
.r{gap:5px}
.r b{font-size:11px}
.w-info{bottom:var(--tabs-h);padding:60px 14px 14px;background:linear-gradient(180deg,transparent 0%,rgba(16,18,32,.86) 66%)}
.w-who{gap:9px}
.w-who .av{width:32px;height:32px;font-size:11px}
.w-who b{font-size:13px}
.follow{padding:6px 13px;font-size:11.5px}
.w-title{margin-top:9px;font-size:13.5px}
.w-meta{margin-top:5px;font-size:11.5px}
.w-meta-place{display:inline}
.w-tele{margin-top:10px;gap:6px}
.w-tele span{padding:4px 9px;font-size:10.5px}
.nav-arrow{display:none}
#watch .w-side{display:contents}
#watch .place-card,#watch .sec-head.rel,#watch .related{display:none}
/* Mode propriétaire sur mobile : la fiche monte du bas, par le crayon. */
#watch.owner #rEdit{display:flex}
.owner{position:fixed;left:0;right:0;bottom:0;top:120px;z-index:41;margin:0;padding:14px 16px calc(20px + env(safe-area-inset-bottom));
background:var(--bg);border-radius:20px 20px 0 0;overflow-y:auto;transform:translateY(100%);visibility:hidden;
transition:transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s linear .3s}
.owner.open{transform:none;visibility:visible;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.owner-top .close{display:block}
.owner .sp-form input,.owner .sp-form textarea{font-size:16px}
/* Sur mobile, le panneau MONTE du bas, comme dans la maquette. */
.sheet-scrim{display:block;position:fixed;inset:0;z-index:40;background:rgba(16,18,32,.45);opacity:0;pointer-events:none;transition:opacity .3s}
.sheet-scrim.open{opacity:1;pointer-events:auto}
.sheet{left:0;right:0;top:218px;width:auto;max-width:none;z-index:41;border-radius:20px 20px 0 0;overflow:hidden;box-shadow:none;
transform:translateY(100%)}
.sheet.open{transform:none}
.grip{display:block;width:38px;height:4px;border-radius:99px;background:rgba(255,255,255,.22);margin:12px auto 8px;flex-shrink:0}
.sheet .sec-head{padding:0 16px 10px;gap:10px}
.sheet .sec-head b{font-size:15px}
.sheet .sec-head span{font-size:12px}
.sheet .com-list{order:2;flex:1;min-height:0;overflow-y:auto;margin:0;padding:0 16px 14px}
.com .av{width:30px;height:30px;font-size:10.5px}
.sheet .note{order:3;padding:0 16px;margin:0 0 8px}
.sheet .composer{order:4;margin:0;padding:10px 16px calc(14px + env(safe-area-inset-bottom));background:var(--panel);align-items:center;gap:9px}
.composer .av{width:30px;height:30px;font-size:10.5px}
.composer .grow{display:flex;align-items:center;gap:9px;min-width:0}
.composer textarea{flex:1;min-height:38px;padding:9px 13px;border-radius:19px;background:var(--pill);box-shadow:none;font-size:16px}
.composer textarea:focus{box-shadow:0 0 0 2px var(--accent)}
.composer-acts{margin:0;display:flex!important}
.composer-acts .cancel{display:none}
.composer-acts .send{padding:10px 15px;border-radius:99px}
/* Menu du compte : les rubriques du menu de gauche */
.drawer{width:100vw;max-width:100vw}
.drawer.wide{width:100vw}
.drawer-nav{display:flex;flex-direction:column;gap:2px;padding:6px 12px 16px;border-top:1px solid var(--line);margin:4px 8px 0}
.drawer-nav a{padding:12px;border-radius:11px;font-size:14px;font-weight:500;color:var(--ink2)}
.drawer-nav a:hover{background:var(--pill)}
.drawer.wide .drawer-nav{display:none}
/* Espace, carte */
.content > #space,.content > #mapPage{padding-left:14px;padding-right:14px}
.space{grid-template-columns:1fr;gap:16px}
.space-nav{position:static;min-height:0;flex-direction:row;flex-wrap:wrap;align-items:center}
.space-me{border:0;margin:0;padding:0 10px 0 0}
.sp-sep{flex-basis:100%;margin:6px 0 0;padding-top:8px}
.sp-detail{grid-template-columns:1fr}
.feed-head{padding:0}
#home .feed-head,#search .feed-head{padding:0 16px}
/* Mobile : la page occupe l'écran entier, en-tête et onglets compris dans
ses marges — la carte remplit ce qui reste entre les deux. */
.content > #mapPage{height:100vh;height:100dvh;padding-bottom:calc(var(--tabs-h) + 12px)}
#mapFilters{padding:0}
}
@media (max-width:640px){
.bar-row{grid-template-columns:96px minmax(0,1fr) 34px}
.map-card{left:10px;right:10px;width:auto}
/* UNE VIDÉO PAR LIGNE SUR TÉLÉPHONE, comme sur YouTube.
À deux colonnes, une vignette faisait 150 px de large : la route s'y devine
à peine, et c'est bien l'image qu'on vient regarder. Pleine largeur, elle en
fait le double. La tablette garde ses deux colonnes — la place y est. */
.grid{grid-template-columns:1fr;gap:20px}
/* Vignette en 16/9 : le format d'un lecteur, celui auquel l'œil s'attend dans
un fil. En 3/4, une seule vidéo occupait tout l'écran et il fallait défiler
pour deviner qu'il y en avait d'autres. L'image est cadrée au centre, jamais
déformée. */
.grid .thumb{aspect-ratio:16/9;border-radius:12px}
/* Le bloc de texte prend LES MESURES de YouTube, relevées dans leur feuille de
style : titre 16 px / 500 sur 22 px d'interligne, puis le nom du conducteur
et les compteurs en 12 px / 400 sur 18 px. Les valeurs approchées d'avant —
15,5 px et 12,5 px, avec un interligne en proportion — donnaient un bloc
légèrement différent du leur, ce qui se voyait à côté. */
.grid .card-b{margin-top:12px;gap:12px}
.grid .ini{width:36px;height:36px}
.grid .card-t{font-size:16px;font-weight:500;line-height:22px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.grid .card-s,.grid .card-s2{font-size:12px;font-weight:400;line-height:18px;color:var(--muted)}
}
/* Aucun contrôle de crédits MapLibre, sur aucune carte. */
.maplibregl-ctrl-attrib{display:none!important}
/* Commandes de la carte communautaire : deux blocs arrondis séparés, le viseur
au-dessus du + et du −, comme sur Google Maps. */
#bigMap .maplibregl-ctrl-top-right{top:4px;right:4px}
#bigMap .maplibregl-ctrl-group{border-radius:10px;box-shadow:0 1px 5px rgba(0,0,0,.5);overflow:hidden}
#bigMap .maplibregl-ctrl-group + .maplibregl-ctrl-group{margin-top:8px}
/* Viseur : l'icône de Google Maps plutôt que celle de MapLibre. Gris au repos,
violet une fois la carte centrée sur soi, estompé si la position est refusée. */
#bigMap .maplibregl-ctrl-geolocate .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;utf8,