/* ============================================================ TOKENS — "Cortège" :root définit le clair ; prefers-color-scheme + [data-theme] gèrent le sombre (piloté par data-theme sur , voir theme.js). ============================================================ */ :root{ color-scheme: light dark; --bg:#f2ead9; --bg-raise:#ffffff; --ink:#221a12; --ink-soft:#5b4f3c; --line: rgba(34,26,18,.16); --red:#c8371f; --yellow:#e8a929; --pink:#d13d76; --leaf:#4c6b3a; --blue:#1c58c9; --accent:var(--red); --focus:#1c58c9; /* alias rétrocompatibles pour d'éventuels styles inline existants */ --color-text: var(--ink); --color-text-muted: var(--ink-soft); --color-bg: var(--bg); --color-bg-elevated: var(--bg-raise); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#1d150f; --bg-raise:#2a1f16; --ink:#f4e9d8; --ink-soft:#c9b79c; --line: rgba(244,233,216,.14); --red:#ff7a56; --yellow:#f2c14e; --pink:#ff6fa5; --leaf:#8fbf6e; --blue:#8fb4ff; --focus:#8fb4ff; } } :root[data-theme="dark"]{ --bg:#1d150f; --bg-raise:#2a1f16; --ink:#f4e9d8; --ink-soft:#c9b79c; --line: rgba(244,233,216,.14); --red:#ff7a56; --yellow:#f2c14e; --pink:#ff6fa5; --leaf:#8fbf6e; --blue:#8fb4ff; --focus:#8fb4ff; } *{ box-sizing:border-box; } html,body{ margin:0; } /* .btn (display:inline-flex) a plus de spécificité que le user-agent stylesheet pour [hidden] : sans cette règle, un bouton masqué en JS via .hidden = true reste visible (ex. #mixer-load-btn après chargement des pistes). */ [hidden]{ display:none !important; } /* Garde-fou contre le débordement horizontal (ex. .banner tourné de quelques degrés, ou un texte long non contraint dans .sub) : la page ne doit jamais scroller latéralement. */ html{ overflow-x:hidden; } body{ overflow-x:hidden; max-width:100vw; background: radial-gradient(1200px 500px at 90% -10%, color-mix(in srgb, var(--yellow) 16%, transparent), transparent 60%), var(--bg); color:var(--ink); font-family:'Space Grotesk', sans-serif; min-height:100vh; -webkit-font-smoothing:antialiased; } .display{ font-family:'Archivo Black', sans-serif; text-transform:uppercase; letter-spacing:-.01em; } .hand{ font-family:'Caveat', cursive; } .mono{ font-family:'JetBrains Mono', monospace; } a{ color:inherit; } :focus-visible{ outline:3px solid var(--focus); outline-offset:2px; } ::selection{ background:var(--yellow); color:var(--ink); } .icon{ width:1.2em; height:1.2em; flex:none; display:inline-block; vertical-align:-.2em; } /* Conteneur central : s'élargit par paliers avec l'écran plutôt que de rester figé à la largeur mobile — les paliers reprennent les points de bascule déjà utilisés ailleurs dans ce fichier (tablette 640/768px, desktop 1024px). */ .app{ max-width:460px; margin:0 auto; padding:.5rem 0 6rem; position:relative; } .app.wide{ max-width:720px; } @media (min-width:640px){ .app{ max-width:600px; } } @media (min-width:768px){ .app{ max-width:700px; } } @media (min-width:1024px){ .app{ max-width:860px; } .app.wide{ max-width:960px; } } /* ============================================================ TOPBAR ============================================================ */ .topbar{ display:flex; align-items:center; justify-content:space-between; padding:.9rem 1.3rem 1rem; gap:.6rem; } .brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; min-width:0; } .brand .mark{ width:2.4rem; height:2.4rem; border-radius:50%; background:var(--red); display:grid; place-items:center; color:#fff9ec; font-family:'Archivo Black',sans-serif; font-size:1rem; transform:rotate(-6deg); box-shadow:3px 3px 0 var(--ink); flex:none; } .brand .mark .icon{ width:1.3rem; height:1.3rem; } .brand b{ font-family:'Archivo Black',sans-serif; font-size:1.15rem; text-transform:uppercase; display:block; line-height:1.1; } .brand span{ display:block; font-size:.68rem; color:var(--ink-soft); font-family:'JetBrains Mono',monospace; letter-spacing:.04em; } .topbar-actions{ display:flex; gap:.5rem; align-items:center; } .icon-btn{ width:2.1rem; height:2.1rem; border-radius:50%; border:2px solid var(--ink); background:none; color:var(--ink); display:grid; place-items:center; cursor:pointer; font-size:.9rem; text-decoration:none; flex:none; padding:0; } .icon-btn.square{ border-radius:2px; } .theme-toggle{ width:2.1rem; height:2.1rem; border-radius:50%; border:2px solid var(--ink); background:none; color:var(--ink); display:grid; place-items:center; cursor:pointer; padding:0; flex:none; } .theme-toggle .icon-moon{ display:none; } :root[data-theme="dark"] .theme-toggle .icon-sun{ display:none; } :root[data-theme="dark"] .theme-toggle .icon-moon{ display:block; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .theme-toggle .icon-sun{ display:none; } :root:not([data-theme="light"]) .theme-toggle .icon-moon{ display:block; } } .logo-row{ display:flex; justify-content:center; margin-bottom:1.2rem; } /* ============================================================ NAV (pilules horizontales, écran large uniquement — voir media query bas de fichier) ============================================================ */ .app-nav{ display:flex; gap:.5rem; padding:0 1.3rem 1.6rem; overflow-x:auto; } .app-nav a{ flex:none; display:flex; align-items:center; gap:.4rem; padding:.55rem .95rem; border-radius:999px; border:1.5px solid var(--ink); font-weight:700; font-size:.85rem; text-decoration:none; color:var(--ink); } .app-nav a .icon{ width:1rem; height:1rem; } .app-nav a.active{ background:var(--ink); color:var(--bg); } /* ============================================================ BANNER / HERO ============================================================ */ .banner{ margin:.3rem 1.3rem 1.6rem; padding:1.5rem 1.3rem 1.6rem; background:var(--red); color:#fff8ec; border-radius:2px; position:relative; overflow:hidden; transform:rotate(-.5deg); } .banner::after{ content:""; position:absolute; inset:0; background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.07) 0 2px, transparent 2px 7px); mix-blend-mode:overlay; } .banner.compact{ padding:1.1rem 1.2rem; transform:rotate(-.3deg); } .banner .eyebrow{ font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.08em; opacity:.85; position:relative; } .banner h2{ font-size:clamp(1.7rem,7vw,2.2rem); line-height:.98; margin:.5rem 0 0; position:relative; } .banner .sub{ font-family:'Caveat',cursive; font-size:1.15rem; margin-top:.5rem; opacity:.95; position:relative; overflow-wrap:break-word; max-width:100%; } .banner.yellow{ background:var(--yellow); color:var(--ink); } .banner.leaf{ background:var(--leaf); color:#fff8ec; } /* ============================================================ SECTION ============================================================ */ .section{ padding:0 1.3rem 2.2rem; } .section-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:1rem; gap:.75rem; } .section-head h3{ font-size:1.4rem; margin:0; } .section-head .tag{ font-family:'JetBrains Mono',monospace; font-size:.72rem; color:var(--ink-soft); white-space:nowrap; } /* ============================================================ BUTTONS ============================================================ */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.4rem; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.88rem; padding:.75rem 1.1rem; min-height:44px; border-radius:2px; border:1.5px solid var(--ink); background:var(--ink); color:var(--bg); cursor:pointer; text-decoration:none; box-shadow:3px 3px 0 var(--line); } .btn .icon{ width:1rem; height:1rem; } .btn.secondary{ background:none; color:var(--ink); } .btn.accent{ background:var(--red); border-color:var(--red); color:#fff8ec; } .btn.ghost{ background:none; border-color:transparent; box-shadow:none; color:var(--ink-soft); } .btn.block{ width:100%; } .btn.sm{ padding:.5rem .8rem; font-size:.78rem; min-height:auto; box-shadow:2px 2px 0 var(--line); } .btn.danger{ background:none; border-color:var(--red); color:var(--red); } /* ============================================================ FORMS ============================================================ */ .field{ margin-bottom:1.1rem; } label{ display:block; font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.4rem; } input, textarea, select{ width:100%; padding:.72rem .8rem; min-height:44px; border-radius:2px; border:1.5px solid var(--ink); background:var(--bg-raise); color:var(--ink); font-family:'Space Grotesk',sans-serif; font-size:1rem; } textarea{ min-height:6rem; resize:vertical; } input:focus, textarea:focus, select:focus{ outline:3px solid var(--focus); outline-offset:1px; } .hint{ font-size:.78rem; color:var(--ink-soft); margin-top:.35rem; } .field-error{ font-size:.78rem; color:var(--red); margin-top:.35rem; font-weight:600; } .card{ background:var(--bg-raise); border:1.5px solid var(--ink); border-radius:3px; padding:1.3rem; box-shadow:4px 4px 0 var(--line); margin:1.5rem; } .flash{ margin:0 1.3rem 1.2rem; padding:.85rem 1rem; border-radius:2px; border:1.5px solid var(--ink); font-size:.88rem; font-weight:600; } .flash.success{ background:var(--leaf); color:#fff8ec; border-color:var(--leaf); } .flash.error{ background:var(--red); color:#fff8ec; border-color:var(--red); } /* ============================================================ EVENT CARD (dates) ============================================================ */ .event-grid{ display:flex; flex-direction:column; } .event-card{ background:var(--bg-raise); border:1.5px solid var(--ink); border-radius:3px; padding:1.1rem 1.2rem; margin-bottom:1rem; position:relative; box-shadow:4px 4px 0 var(--line); display:block; text-decoration:none; color:var(--ink); } .event-card .title-link{ text-decoration:none; color:inherit; display:block; } .event-card .when{ font-family:'JetBrains Mono',monospace; font-size:.72rem; color:var(--ink-soft); letter-spacing:.03em; } .event-card h4{ font-size:1.2rem; margin:.3rem 0 .15rem; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; } .event-card .where{ font-size:.85rem; color:var(--ink-soft); margin:0 0 .9rem; } .rsvp{ display:flex; gap:.5rem; } .rsvp button{ flex:1; padding:.6rem 0; min-height:44px; border-radius:2px; border:1.5px solid var(--ink); background:none; font-weight:700; font-size:.82rem; cursor:pointer; color:var(--ink); font-family:'Space Grotesk',sans-serif; display:inline-flex; align-items:center; justify-content:center; gap:.35rem; } .rsvp button .icon{ width:.9rem; height:.9rem; } .rsvp button.oui{ background:var(--leaf); color:#fff8ec; border-color:var(--leaf); } .rsvp button.pas-sur{ background:var(--yellow); border-color:var(--yellow); color:var(--ink); } .rsvp button.non{ opacity:.55; } .tally{ display:flex; gap:1rem; margin-top:.85rem; font-family:'JetBrains Mono',monospace; font-size:.74rem; color:var(--ink-soft); flex-wrap:wrap; } .tally b{ color:var(--ink); } /* événement passé : même carte, légèrement atténuée pour la distinguer du présent */ .event-card.past{ opacity:.75; } /* accordéon "passé" par année :
natif, pas de JS nécessaire */ .past-year{ border-top:1px dashed var(--line); padding:.75rem 0; } .past-year:first-of-type{ border-top:none; margin-top:.5rem; } .past-year summary{ cursor:pointer; font-weight:700; font-size:.9rem; display:flex; align-items:center; gap:.5rem; list-style:none; } .past-year summary::-webkit-details-marker{ display:none; } .past-year summary::before{ content:'▸'; color:var(--ink-soft); transition:transform .15s ease; } .past-year[open] summary::before{ transform:rotate(90deg); } .past-list{ list-style:none; margin:.6rem 0 0; padding:0; display:flex; flex-direction:column; gap:.1rem; } .past-list li a{ display:flex; gap:.75rem; align-items:baseline; padding:.5rem .2rem; border-radius:2px; text-decoration:none; color:var(--ink); font-size:.88rem; } .past-list li a:hover{ background:var(--bg-raise); } .past-list li a .mono{ color:var(--ink-soft); font-size:.74rem; flex:none; width:3.6rem; } /* status badge (utilisé dans la liste des dates) */ .status-badge{ font-family:'JetBrains Mono',monospace; font-size:.68rem; padding:.2rem .55rem; border-radius:999px; font-weight:700; display:inline-flex; align-items:center; gap:.3rem; } .status-badge .icon{ width:.85rem; height:.85rem; } .status-oui{ background:color-mix(in srgb, var(--leaf) 22%, transparent); color:var(--leaf); } .status-non{ background:color-mix(in srgb, var(--red) 18%, transparent); color:var(--red); } .status-pas_sur{ background:color-mix(in srgb, var(--yellow) 30%, transparent); color:#8a5b0a; } :root[data-theme="dark"] .status-pas_sur, :root:not([data-theme="light"]) .status-pas_sur{ color:var(--yellow); } /* attendee list */ .roster{ display:flex; flex-direction:column; gap:.55rem; margin-top:1rem; } .roster-row{ display:flex; align-items:center; justify-content:space-between; padding:.5rem 0; border-top:1px dashed var(--line); font-size:.85rem; } .roster-row:first-child{ border-top:none; } .pill{ font-family:'JetBrains Mono',monospace; font-size:.68rem; padding:.2rem .55rem; border-radius:999px; font-weight:700; } .pill.oui{ background:color-mix(in srgb, var(--leaf) 22%, transparent); color:var(--leaf); } .pill.non{ background:color-mix(in srgb, var(--red) 18%, transparent); color:var(--red); } .pill.pas-sur{ background:color-mix(in srgb, var(--yellow) 30%, transparent); color:#8a5b0a; } :root[data-theme="dark"] .pill.pas-sur, :root:not([data-theme="light"]) .pill.pas-sur{ color:var(--yellow); } /* ============================================================ LEGAL ============================================================ */ .bureau-grid{ display:grid; grid-template-columns:1fr; gap:.85rem; } @media(min-width:640px){ .bureau-grid{ grid-template-columns:1fr 1fr; } } .bureau-card{ background:var(--bg-raise); border:1.5px solid var(--ink); border-radius:3px; padding:1rem 1.1rem; box-shadow:3px 3px 0 var(--line); } .bureau-card .role{ font-family:'JetBrains Mono',monospace; font-size:.68rem; text-transform:uppercase; color:var(--red); letter-spacing:.05em; } .bureau-card h5{ margin:.25rem 0 .15rem; font-size:1.05rem; } .bureau-card .contact{ font-size:.8rem; color:var(--ink-soft); } .doc-row{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.9rem 0; border-top:1px dashed var(--line); } .doc-row:first-child{ border-top:none; } .doc-row .doc-title{ font-weight:700; font-size:.92rem; } .doc-row .doc-meta{ font-family:'JetBrains Mono',monospace; font-size:.7rem; color:var(--ink-soft); } .doc-cat{ display:inline-block; margin-bottom:.3rem; font-family:'JetBrains Mono',monospace; font-size:.65rem; text-transform:uppercase; letter-spacing:.05em; padding:.15rem .5rem; border-radius:999px; border:1px solid var(--line); color:var(--ink-soft); } /* ============================================================ TRACK / VIDEO GRID ============================================================ */ .grid-2{ display:grid; grid-template-columns:1fr; gap:1rem; } @media(min-width:640px){ .grid-2{ grid-template-columns:1fr 1fr; } } .tile{ background:var(--bg-raise); border:1.5px solid var(--ink); border-radius:3px; overflow:hidden; box-shadow:4px 4px 0 var(--line); text-decoration:none; color:var(--ink); display:block; } .tile .cover{ aspect-ratio:25/5; background: repeating-linear-gradient(135deg, var(--yellow) 0 14px, var(--red) 14px 28px); display:flex; align-items:flex-end; padding:.7rem; position:relative; } .tile .cover.video{ background:repeating-linear-gradient(135deg, var(--pink) 0 14px, var(--ink) 14px 28px); } /* Fond du bouton toujours opposé à --ink (donc lisible sur les diagonales jaune/rouge ou rose/sombre de .cover, quel que soit le thème) plutôt qu'une couleur fixe. */ .tile .cover .play-mini{ width:2.4rem; height:2.4rem; border-radius:50%; background:var(--bg-raise); display:grid; place-items:center; box-shadow:2px 2px 0 rgba(0,0,0,.25); } .tile .cover .play-mini .icon{ width:1rem; height:1rem; color:var(--ink); } .tile .tile-body{ padding:.85rem .95rem 1rem; } .tile h4{ margin:0 0 .2rem; font-size:1.02rem; } .tile .meta{ font-family:'JetBrains Mono',monospace; font-size:.7rem; color:var(--ink-soft); } /* ============================================================ MIXER ============================================================ */ .mixer{ background:var(--bg-raise); border:1.5px solid var(--ink); border-radius:3px; padding:1.3rem; box-shadow:5px 5px 0 var(--line); } .mixer-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:1.1rem; gap:1rem; } .mixer-top h4{ font-size:1.3rem; margin:0 0 .2rem; } .mixer-top .meta{ font-family:'JetBrains Mono',monospace; font-size:.72rem; color:var(--ink-soft); } .play-btn{ width:3rem; height:3rem; border-radius:50%; background:var(--red); border:none; color:#fff8ec; font-size:1.1rem; display:grid; place-items:center; cursor:pointer; box-shadow:2px 2px 0 var(--ink); flex:none; } .play-btn .icon{ width:1.2rem; height:1.2rem; } .play-btn.sm{ width:2.2rem; height:2.2rem; box-shadow:none; } .play-btn.sm .icon{ width:.9rem; height:.9rem; } .mixer-track{ display:grid; grid-template-columns:5.5rem 1fr 3.6rem 2.4rem; align-items:center; gap:.85rem; padding:.65rem 0; border-top:1px dashed var(--line); } .mixer-track:first-of-type{ border-top:none; } .mixer-track-label{ font-weight:700; font-size:.86rem; } .mixer-track-label small{ display:block; font-family:'JetBrains Mono',monospace; font-weight:400; font-size:.66rem; color:var(--ink-soft); text-transform:none; } /* Piste colorée par instrument : mixer.js peint le fond en linear-gradient (couleur de la piste jusqu'à la valeur, --line au-delà) à chaque changement, les navigateurs n'exposant pas nativement la portion « remplie » d'un range. */ .mixer-fader{ -webkit-appearance:none; appearance:none; width:100%; height:.25rem; border-radius:999px; background:var(--line); cursor:pointer; } .mixer-fader::-webkit-slider-thumb{ -webkit-appearance:none; width:1rem; height:1rem; border-radius:50%; background:var(--ink); border:2px solid var(--bg-raise); box-shadow:0 0 0 1px var(--line); cursor:pointer; margin-top:-.02rem; } .mixer-fader::-moz-range-thumb{ width:1rem; height:1rem; border-radius:50%; background:var(--ink); border:2px solid var(--bg-raise); cursor:pointer; } .mixer-pan{ -webkit-appearance:none; appearance:none; width:100%; height:.18rem; border-radius:999px; background:var(--line); cursor:pointer; } .mixer-pan::-webkit-slider-thumb{ -webkit-appearance:none; width:.75rem; height:.75rem; border-radius:50%; background:var(--ink-soft); border:2px solid var(--bg-raise); cursor:pointer; } .mixer-pan::-moz-range-thumb{ width:.75rem; height:.75rem; border-radius:50%; background:var(--ink-soft); border:2px solid var(--bg-raise); cursor:pointer; } .mixer-mute{ width:2rem; height:2rem; border-radius:2px; border:1.5px solid var(--ink); background:none; color:var(--ink); font-size:.7rem; font-weight:700; cursor:pointer; justify-self:center; display:grid; place-items:center; padding:0; } .mixer-mute .icon{ width:1rem; height:1rem; } .mixer-mute.is-muted{ background:var(--ink); color:var(--bg-raise); } .mixer-transport{ display:flex; align-items:center; gap:.8rem; margin-top:1.2rem; padding-top:1rem; border-top:1.5px solid var(--ink); } .mixer-seek{ -webkit-appearance:none; appearance:none; flex:1; height:.4rem; border-radius:999px; background:var(--line); cursor:pointer; } .mixer-seek::-webkit-slider-thumb{ -webkit-appearance:none; width:1rem; height:1rem; border-radius:50%; background:var(--ink); cursor:pointer; } .mixer-seek::-moz-range-thumb{ width:1rem; height:1rem; border-radius:50%; background:var(--ink); border:none; cursor:pointer; } .mixer-time{ font-family:'JetBrains Mono',monospace; font-size:.72rem; color:var(--ink-soft); font-variant-numeric:tabular-nums; white-space:nowrap; } .mixer-status{ font-family:'JetBrains Mono',monospace; font-size:.76rem; color:var(--ink-soft); margin-top:.6rem; } /* ============================================================ ADMIN TABLE ============================================================ */ .admin-list{ display:flex; flex-direction:column; } .admin-row{ display:grid; grid-template-columns:1fr auto auto; gap:.75rem; align-items:center; padding:.8rem 0; border-top:1px dashed var(--line); } .admin-row:first-child{ border-top:none; } .admin-row .who{ font-weight:700; font-size:.88rem; } .admin-row .who small{ display:block; font-family:'JetBrains Mono',monospace; font-weight:400; font-size:.68rem; color:var(--ink-soft); } .role-tags{ display:flex; gap:.3rem; flex-wrap:wrap; } .role-tag{ font-family:'JetBrains Mono',monospace; font-size:.64rem; text-transform:uppercase; padding:.2rem .5rem; border-radius:999px; border:1px solid var(--ink); } .role-tag.super{ background:var(--ink); color:var(--bg-raise); border-color:var(--ink); } .admin-hint{ font-family:'JetBrains Mono',monospace; font-size:.7rem; color:var(--ink-soft); display:inline-flex; align-items:center; gap:.25rem; } .admin-hint .icon{ width:.85rem; height:.85rem; } /* ============================================================ TABBAR (mobile) / NAV (desktop) Mobile-first : la tabbar en pilule fixe est l'interface de nav principale ; à partir de 768px elle disparaît au profit de .app-nav (pilules dans le flux, sous le header). ============================================================ */ .tabbar{ position:fixed; left:1.1rem; right:1.1rem; bottom:calc(1rem + env(safe-area-inset-bottom)); display:flex; justify-content:space-around; background:var(--ink); border-radius:999px; padding:.6rem .5rem; box-shadow:0 8px 24px rgba(0,0,0,.28); z-index:10; } .tabbar a{ color:var(--bg); text-decoration:none; padding:.5rem .9rem; border-radius:999px; display:flex; min-height:44px; min-width:44px; align-items:center; justify-content:center; } .tabbar a.active{ background:var(--red); } .app-nav{ display:none; } @media (min-width:768px){ .tabbar{ display:none; } .app-nav{ display:flex; } .app{ padding-bottom:2rem; } } /* ============================================================ AUTH ============================================================ */ .auth-wrap{ display:flex; align-items:center; justify-content:center; min-height:100vh; padding:2rem 1.3rem; } .auth-card{ width:100%; max-width:380px; } .auth-foot{ text-align:center; margin-top:1.1rem; font-size:.85rem; color:var(--ink-soft); } .auth-foot a{ font-weight:700; color:var(--ink); } /* account screen */ .account-card{ text-align:center; margin: 0 0 1.2rem 0; } .account-card .mark{ width:3.6rem; height:3.6rem; border-radius:50%; background:var(--pink); display:grid; place-items:center; color:#fff9ec; font-family:'Archivo Black',sans-serif; font-size:1.5rem; margin:0 auto 1rem; transform:rotate(-4deg); box-shadow:3px 3px 0 var(--ink); } /* ============================================================ EMPTY STATE ============================================================ */ .empty{ text-align:center; padding:2.5rem 1rem; color:var(--ink-soft); } .empty .big{ margin-bottom:.5rem; display:flex; justify-content:center; } .empty .big .icon{ width:3rem; height:3rem; } /* ============================================================ COMPLÉMENTS — alias de composition utilisés par les templates (mêmes styles que .grid-2/.tile/.cover, juste des noms de classe supplémentaires accolés pour distinguer audio/vidéo dans le HTML) ============================================================ */ .track-grid, .video-grid{ /* voir .grid-2, appliqué en plus sur le même élément */ } .track-card, .video-card{ /* voir .tile, appliqué en plus sur le même élément */ } .cover-video-1{ background:repeating-linear-gradient(135deg, var(--yellow) 0 14px, var(--ink) 14px 28px) !important; } .video-embed-wrapper{ position:relative; width:100%; aspect-ratio:16/9; border-radius:2px; overflow:hidden; } .video-embed-wrapper iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } .actions{ display:flex; gap:.5rem; margin-top:.6rem; }