:root{
 --bg:#0c1021;--bg-2:#0a0e1b;--surface:#131a30;--surface-2:#182040;
 --bord:rgba(0,255,255,.10);--bord-vif:rgba(0,255,255,.55);
 --texte:#e8ecf7;--texte-doux:#99a2bd;--texte-faible:#5b6584;
 --cyan:#00ffff;--cyan-doux:rgba(0,255,255,.14);--or:#ffcf6b;--or-doux:rgba(255,207,107,.14);
 --banniere-texte:var(--cyan);--banniere-fond:linear-gradient(90deg,rgba(0,255,255,.18),rgba(0,255,255,.06));
 --serif:"Fraunces",Georgia,serif;--sans:"Inter",system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{overscroll-behavior:none}
body{margin:0;font-family:var(--sans);color:var(--texte);
 background:radial-gradient(1200px 600px at 50% -10%,rgba(0,255,255,.06),transparent 60%),linear-gradient(180deg,var(--bg),var(--bg-2));min-height:100vh}

/* ---------- Barre ---------- */
.bar{padding:max(18px,env(safe-area-inset-top)) 22px 18px;border-bottom:1px solid var(--bord);display:flex;align-items:center;gap:12px;flex-wrap:wrap;
 position:sticky;top:0;z-index:50;background:rgba(12,16,33,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.mark{width:12px;height:22px;border-radius:3px;background:linear-gradient(180deg,var(--cyan),rgba(0,255,255,.25));box-shadow:0 0 10px rgba(0,255,255,.5)}
.brand{font-family:var(--serif);font-weight:500;font-size:1.5rem;margin:0}

/* ---------- Recherche ---------- */
.recherche-wrap{position:relative;display:flex;align-items:center;margin-left:auto;flex:1 1 240px;min-width:180px}
.recherche-wrap .r-loupe{position:absolute;left:13px;width:40px;height:40px;fill:none;stroke:var(--texte-doux);
 stroke-width:1.9;stroke-linecap:round;pointer-events:none;transition:stroke .2s}
.recherche{width:100%;height:44px;padding:0 40px 0 58px;color:var(--texte);font-family:var(--sans);font-size:.95rem;
 background:rgba(255,255,255,.09);border:1px solid rgba(0,255,255,.30);border-radius:13px;outline:none;
 transition:border-color .2s,box-shadow .2s,background .2s;-webkit-appearance:none}
.recherche::placeholder{color:var(--texte-doux)}
.recherche::-webkit-search-cancel-button{-webkit-appearance:none}
.recherche:focus{border-color:var(--bord-vif);background:rgba(0,255,255,.05);box-shadow:0 0 0 3px rgba(0,255,255,.10),0 0 18px rgba(0,255,255,.14)}
.recherche-wrap:focus-within .r-loupe{stroke:var(--cyan)}
.r-effacer{position:absolute;right:8px;width:28px;height:28px;border:none;background:none;cursor:pointer;padding:0;
 display:grid;place-items:center;transition:transform .15s,filter .15s}
.r-effacer:active{transform:scale(.9);filter:drop-shadow(0 0 8px rgba(0,255,255,.45))}
.r-effacer svg{width:100%;height:100%;overflow:visible}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(26px + env(safe-area-inset-bottom));transform:translate(-50%,16px);
 z-index:200;padding:11px 18px;border-radius:12px;font-size:.9rem;font-weight:500;color:#eafffe;
 background:rgba(6,9,18,.92);border:1px solid var(--bord-vif);box-shadow:0 10px 30px rgba(0,0,0,.55),0 0 20px rgba(0,255,255,.22);
 opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- Grille ---------- */
.grille{max-width:900px;margin:0 auto;padding:20px 14px calc(60px + env(safe-area-inset-bottom));display:grid;
 grid-template-columns:repeat(2,1fr);gap:clamp(12px,3.2vw,18px)}
.aucun{max-width:900px;margin:0 auto;padding:40px 18px;text-align:center;color:var(--texte-faible);
 font-family:var(--serif);font-size:1.1rem}
.carte{background:var(--surface);border:1px solid var(--bord);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;
 transition:transform .25s,border-color .25s,box-shadow .25s,background .25s}
.carte:active{transform:scale(.985)}
@media (hover:hover){
 .carte:hover{transform:translateY(-4px);background:var(--surface-2);border-color:var(--bord-vif);box-shadow:0 14px 36px rgba(0,0,0,.55),0 0 24px rgba(0,255,255,.18)}
}

.media{position:relative;aspect-ratio:16/9;display:grid;place-items:center;cursor:pointer}
.m1{background:linear-gradient(135deg,#26324a,#10182c)}
.m2{background:linear-gradient(135deg,#3a2b22,#1a120d)}
.m3{background:linear-gradient(135deg,#1c2b3c,#0c1422)}
.m4{background:linear-gradient(135deg,#2a3142,#141a26)}
.media .vignette{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;z-index:0}
.media::after{content:"";position:absolute;left:50%;bottom:0;width:34%;height:46%;transform:translateX(-50%);
 background:radial-gradient(ellipse at 50% 100%,rgba(255,255,255,.10),transparent 70%);border-radius:50% 50% 0 0;z-index:1}
.cam{position:absolute;top:8px;left:8px;z-index:2}
.cam span{width:clamp(34px,24%,42px);aspect-ratio:1;display:grid;place-items:center;border-radius:50%;
 background:rgba(12,16,33,.55);border:1px solid rgba(255,255,255,.42);
 backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);transition:.25s}
.cam svg{width:42%;height:42%;fill:none;stroke:rgba(255,255,255,.82);stroke-width:1.5;stroke-linejoin:round}
.media:active .cam span{border-color:var(--bord-vif);box-shadow:0 0 22px rgba(0,255,255,.45)}
.media:active .cam svg{stroke:var(--cyan)}
@media (hover:hover){
 .carte:hover .cam span{border-color:var(--bord-vif);box-shadow:0 0 22px rgba(0,255,255,.45)}
 .carte:hover .cam svg{stroke:var(--cyan)}
}
.duree{position:absolute;right:8px;bottom:8px;z-index:3;padding:3px 8px;font-size:.74rem;color:#eafffe;
 background:rgba(6,9,18,.82);border:1px solid var(--bord);border-radius:7px}
.media .apercu-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;z-index:1;
 opacity:0;transition:opacity .35s;pointer-events:none}
.media .apercu-video.lecture{opacity:1}
.media.apercu-actif .cam{opacity:0;transition:opacity .25s}

/* Bandeau date */
.banniere{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 12px;font-size:.78rem;font-weight:600;
 letter-spacing:.4px;text-align:center;color:var(--banniere-texte);background:var(--banniere-fond);
 border-top:1px solid var(--bord-vif);text-shadow:0 0 10px rgba(0,255,255,.30)}
.banniere svg{width:14px;height:14px;fill:none;stroke:var(--cyan);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}

.corps{padding:13px 16px 16px;display:flex;flex-direction:column;gap:4px;flex:1}
.titre{font-family:var(--serif);font-weight:500;font-size:1.16rem;line-height:1.25;margin:0;cursor:pointer}
.soustitre{font-size:.9rem;line-height:1.35;color:var(--texte-doux);margin:2px 0 0}
.orateur{display:flex;align-items:center;gap:7px;font-size:.8rem;color:var(--texte-doux);margin:8px 0 0}
.orateur::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px rgba(0,255,255,.7);flex:none}

/* Pied de carte : orateur à gauche, partage à droite */
.pied-carte{display:flex;align-items:center;gap:10px;margin-top:10px}
.pied-carte .orateur{flex:1 1 auto;min-width:0;margin:0}
.partage-carte{flex:none;width:34px;height:34px;border-radius:10px;cursor:pointer;display:grid;place-items:center;
 background:rgba(0,255,255,.08);border:1px solid rgba(0,255,255,.32);color:var(--texte-doux);transition:.18s}
.partage-carte svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.partage-carte:active{background:var(--cyan-doux);border-color:var(--bord-vif);color:var(--cyan);box-shadow:0 0 14px rgba(0,255,255,.35)}
@media (hover:hover){ .partage-carte:hover{border-color:var(--bord-vif);color:var(--cyan)} }
@media (hover:hover){ .titre:hover{color:var(--cyan)} }

/* ---------- Modal lecteur ---------- */
.overlay{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:16px;
 background:rgba(5,8,16,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.overlay.ouvert{display:flex}
.modal{position:relative;width:min(1000px,100%);max-height:100%;overflow:auto;background:var(--surface);border:1px solid var(--bord-vif);
 border-radius:18px;box-shadow:0 30px 90px rgba(0,0,0,.7),0 0 40px rgba(0,255,255,.22);animation:apparait .25s ease;-webkit-overflow-scrolling:touch}
@keyframes apparait{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.fermer{position:absolute;top:12px;right:12px;z-index:30;width:36px;height:36px;cursor:pointer;padding:0;
 display:grid;place-items:center;border:none;background:none;transition:transform .15s,filter .15s}
.fermer:active{transform:scale(.92);filter:drop-shadow(0 0 10px rgba(0,255,255,.45))}
.fermer svg{width:100%;height:100%;overflow:visible}

.video-wrapper{position:relative;background:#000;aspect-ratio:16/9;overflow:hidden;touch-action:manipulation}
.video-wrapper:fullscreen{aspect-ratio:auto;width:100%;height:100%}
video{width:100%;height:100%;display:block;background:#000}

/* Couche de captation des taps (sous les contrôles) */
.couche-tap{position:absolute;inset:0;z-index:4}

/* Flash de saut ±10 s */
.flash{position:absolute;top:50%;transform:translateY(-50%);z-index:6;display:flex;flex-direction:column;align-items:center;gap:4px;
 padding:18px 24px;border-radius:50%;background:rgba(0,255,255,.12);color:#eafffe;font-size:.8rem;font-weight:600;
 opacity:0;pointer-events:none}
.flash svg{width:30px;height:30px;fill:none;stroke:var(--cyan);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.flash-g{left:8%}.flash-d{right:8%}
.flash.actif{animation:flashPop .5s ease}
@keyframes flashPop{0%{opacity:0;transform:translateY(-50%) scale(.7)}30%{opacity:1;transform:translateY(-50%) scale(1)}100%{opacity:0;transform:translateY(-50%) scale(1.1)}}

/* Contrôles centraux (transport) */
.centre{position:absolute;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;gap:14px;
 opacity:0;pointer-events:none;transition:opacity .25s}
.video-wrapper.controles-on .centre{opacity:1}
.centre button{pointer-events:auto;background:rgba(6,9,18,.55);border:1px solid rgba(255,255,255,.18);color:#fff;cursor:pointer;
 border-radius:50%;display:grid;place-items:center;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:.18s;position:relative}
.centre button:active{background:rgba(0,255,255,.20);border-color:var(--bord-vif)}
.centre svg{fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.c-side{width:clamp(48px,13vw,58px);height:clamp(48px,13vw,58px)}
.c-side svg{width:clamp(22px,6vw,26px);height:clamp(22px,6vw,26px)}
.c-side span{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);font-size:.55rem;font-weight:700;font-family:var(--sans)}
.c-play{width:clamp(66px,18vw,84px);height:clamp(66px,18vw,84px);background:rgba(0,255,255,.14);border-color:var(--bord-vif);
 box-shadow:0 0 26px rgba(0,255,255,.30)}
.c-play svg{width:clamp(30px,9vw,38px);height:clamp(30px,9vw,38px);stroke:var(--cyan);fill:none}

/* Barre de contrôles basse */
.controls{position:absolute;left:0;right:0;bottom:0;z-index:10;
 background:linear-gradient(to top,rgba(0,0,0,.92),rgba(0,0,0,.55),transparent);
 padding:42px 12px calc(12px + env(safe-area-inset-bottom));opacity:0;pointer-events:none;transition:opacity .3s}
.video-wrapper.controles-on .controls{opacity:1;pointer-events:auto}

.progress-touch{padding:9px 0;cursor:pointer;touch-action:none}
.progress-area{height:6px;background:rgba(255,255,255,.22);position:relative;border-radius:3px}
.progress-bar{height:100%;background:var(--cyan);width:0%;position:relative;border-radius:3px;box-shadow:0 0 10px rgba(0,255,255,.5)}
.progress-handle{position:absolute;right:-7px;top:50%;transform:translateY(-50%);width:15px;height:15px;background:var(--cyan);
 border-radius:50%;box-shadow:0 0 10px rgba(0,255,255,.8)}

.barre-bas{display:flex;align-items:center;gap:4px;margin-top:8px;flex-wrap:wrap}
.control-btn{background:none;border:none;color:#fff;cursor:pointer;width:44px;height:44px;border-radius:10px;transition:.18s;
 display:flex;align-items:center;justify-content:center;flex:none}
.control-btn:active{background:rgba(0,255,255,.18)}
.control-btn svg{width:21px;height:21px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.control-btn.actif svg{stroke:var(--cyan)}
.control-btn.actif{background:rgba(0,255,255,.12)}
.time-display{font-size:.82rem;color:#fff;margin:0 6px;white-space:nowrap;font-variant-numeric:tabular-nums}
.spacer{flex:1 1 auto}
.volume-control{display:flex;align-items:center;gap:6px}
.volume-slider{width:64px;-webkit-appearance:none;appearance:none;height:4px;background:rgba(255,255,255,.3);outline:none;border-radius:2px;cursor:pointer}
.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:var(--cyan);border-radius:50%;cursor:pointer}
.volume-slider::-moz-range-thumb{width:14px;height:14px;background:var(--cyan);border:none;border-radius:50%;cursor:pointer}

/* Bandeau info sous la vidéo */
.player-info{padding:16px 20px calc(20px + env(safe-area-inset-bottom));border-top:1px solid var(--bord)}
.player-info .pi-date{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:600;color:var(--cyan);
 letter-spacing:.3px;margin:0 0 8px}
.player-info .pi-date svg{width:14px;height:14px;fill:none;stroke:var(--cyan);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.player-info .titre{font-family:var(--serif);font-size:1.35rem;font-weight:500;margin:0;cursor:default}
.player-info .sous{color:var(--texte-doux);font-size:.95rem;margin:4px 0 0}
.player-info .orateur{margin-top:8px}

/* Mobile : volume géré par le matériel → on masque le réglage fin */
@media (max-width:560px){
 .volume-control .volume-slider{display:none}
 .time-display{font-size:.76rem;margin:0 4px}
 .control-btn{width:42px;height:42px}
}
@media (prefers-reduced-motion:reduce){
 *{animation-duration:.001s!important;transition-duration:.001s!important}
}

/* ---------- Modal de partage (feuille du bas) ---------- */
.partage-overlay{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
 padding:16px;background:rgba(5,8,16,0);transition:background .32s ease;opacity:0;pointer-events:none}
.partage-overlay.ouvert{opacity:1;pointer-events:auto;background:rgba(5,8,16,.74);
 backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

.partage-sheet{position:relative;width:min(440px,100%);max-height:calc(100% - 32px);overflow:auto;
 background:linear-gradient(180deg,var(--surface-2),var(--surface));
 border:1px solid var(--bord-vif);border-radius:22px;
 padding:12px 18px 22px;
 box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 44px rgba(0,255,255,.18);
 transform:translateY(24px) scale(.94);transition:transform .42s cubic-bezier(.16,1,.3,1);
 -webkit-overflow-scrolling:touch;user-select:none;-webkit-user-select:none}
.partage-overlay.ouvert .partage-sheet{transform:translateY(0) scale(1)}

.partage-haut{touch-action:none;cursor:grab}
.partage-poignee{display:block;width:44px;height:5px;border-radius:3px;
 background:rgba(255,255,255,.24);margin:4px auto 14px}
.partage-fermer{position:absolute;top:12px;right:12px;width:34px;height:34px;border:none;background:none;
 cursor:pointer;padding:0;display:grid;place-items:center;transition:transform .15s,filter .15s}
.partage-fermer svg{width:100%;height:100%;overflow:visible}
.partage-fermer:active{transform:scale(.9);filter:drop-shadow(0 0 10px rgba(0,255,255,.45))}

.partage-entete{display:flex;align-items:center;gap:13px;margin:2px 4px 20px}
.partage-icone-titre{width:46px;height:46px;border-radius:14px;flex:none;display:grid;place-items:center;
 background:var(--cyan-doux);border:1px solid var(--bord-vif);box-shadow:0 0 18px rgba(0,255,255,.22)}
.partage-icone-titre svg{width:22px;height:22px;fill:none;stroke:var(--cyan);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.partage-textes{min-width:0}
.partage-titre{font-family:var(--serif);font-weight:500;font-size:1.18rem;margin:0;color:var(--texte)}
.partage-sous{font-size:.82rem;color:var(--texte-doux);margin:3px 0 0;line-height:1.3;
 display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.partage-options{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.partage-opt{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 4px 12px;cursor:pointer;
 background:rgba(255,255,255,.04);border:1px solid var(--bord);border-radius:16px;color:var(--texte-doux);
 transition:transform .16s,border-color .18s,background .18s;
 opacity:0;transform:translateY(16px) scale(.9)}
.partage-overlay.ouvert .partage-opt{animation:optEntre .46s cubic-bezier(.16,1,.3,1) forwards}
.partage-overlay.ouvert .partage-opt:nth-child(1){animation-delay:.10s}
.partage-overlay.ouvert .partage-opt:nth-child(2){animation-delay:.16s}
.partage-overlay.ouvert .partage-opt:nth-child(3){animation-delay:.22s}
.partage-overlay.ouvert .partage-opt:nth-child(4){animation-delay:.28s}
.partage-opt:active{transform:scale(.93)!important;background:var(--cyan-doux);border-color:var(--bord-vif)}
.partage-opt .opt-cercle{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;
 box-shadow:0 4px 14px rgba(0,0,0,.35)}
.partage-opt .opt-cercle svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.partage-opt .opt-label{font-size:.72rem;font-weight:500;color:var(--texte-doux)}
@keyframes optEntre{to{opacity:1;transform:translateY(0) scale(1)}}

.partage-plus{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:14px;
 padding:14px;border-radius:14px;cursor:pointer;font-family:var(--sans);font-size:.92rem;font-weight:600;
 color:var(--cyan);background:var(--cyan-doux);border:1px solid var(--bord-vif);transition:.18s;
 opacity:0;transform:translateY(16px) scale(.96)}
.partage-overlay.ouvert .partage-plus{animation:optEntre .46s cubic-bezier(.16,1,.3,1) .34s forwards}
.partage-plus svg{width:19px;height:19px;fill:none;stroke:var(--cyan);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.partage-plus:active{transform:scale(.98)!important;box-shadow:0 0 16px rgba(0,255,255,.3)}

@media (hover:hover){
 .partage-opt:hover{border-color:var(--bord-vif);background:var(--surface-2)}
 .partage-plus:hover{box-shadow:0 0 16px rgba(0,255,255,.25)}
}