/* ========================================================================= Défi Biblique — Badges Palette : bleu marine de la marque (#0A4267) + blanc. Chaque saison peut redéfinir --navy (et --on-navy, calculé pour un contraste correct) sur le ; tout le reste (boutons, liens, halo du bandeau...) en découle automatiquement via color-mix(). Display: Gloock. Titres: IBM Plex Serif. Corps: Instrument Sans. Chiffres/labels: IBM Plex Mono. ========================================================================= */ @font-face { font-family: 'Gloock'; src: url('/static/fonts/Gloock-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Plex Serif'; src: url('/static/fonts/IBMPlexSerif-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Plex Serif'; src: url('/static/fonts/IBMPlexSerif-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Plex Serif'; src: url('/static/fonts/IBMPlexSerif-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Instrument Sans'; src: url('/static/fonts/InstrumentSans-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Instrument Sans'; src: url('/static/fonts/InstrumentSans-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Instrument Sans'; src: url('/static/fonts/InstrumentSans-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Plex Mono'; src: url('/static/fonts/IBMPlexMono-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Plex Mono'; src: url('/static/fonts/IBMPlexMono-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Instrument Serif'; src: url('/static/fonts/InstrumentSerif-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; } :root { /* Couleur de marque — remplacée par la couleur de la saison sur les pages qui en dépendent (voir bloc "bodyattrs" dans les templates). */ --navy: #0A4267; --on-navy: #ffffff; /* couleur de texte lisible sur --navy (calculée côté serveur par saison) */ --navy-bright: color-mix(in srgb, var(--navy) 82%, white); --navy-deep: color-mix(in srgb, var(--navy) 70%, black); --navy-wash: color-mix(in srgb, var(--navy) 8%, white); --navy-wash-line: color-mix(in srgb, var(--navy) 22%, white); --ink: #0a2036; --paper: #ffffff; --paper-dim: #f4f7fa; --paper-dim-2: #eaf0f5; --line: #dde6ee; --muted: #5c7488; --muted-dim: #93a7b8; --danger: #b3413c; --danger-bright: #c85951; --ok: #2f7d55; --radius-s: 10px; --radius-m: 18px; --radius-l: 28px; --shadow-soft: 0 24px 60px -24px rgba(10,32,54,.28); --shadow-card: 0 10px 26px -16px rgba(10,32,54,.22); --font-display: 'Gloock', 'Plex Serif', serif; --font-serif: 'Plex Serif', serif; --font-body: 'Instrument Sans', system-ui, sans-serif; --font-mono: 'Plex Mono', monospace; --font-verse: 'Instrument Serif', 'Plex Serif', serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } :focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } .wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; } .wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; } h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: .2px; margin: 0 0 .4em; color: var(--ink); } h1 { font-size: clamp(2.4rem, 5vw, 4.1rem); line-height: 1.05; } h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.12; } h3 { font-size: 1.35rem; } p { margin: 0 0 1em; } .eyebrow { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--navy); display: inline-flex; align-items: center; gap: 8px; } .eyebrow::before { content: ''; width: 16px; height: 1px; background: var(--navy); display: inline-block; } .verse { font-family: var(--font-verse); font-style: italic; color: var(--muted); font-size: 1.15rem; line-height: 1.5; } /* ---------- Navigation (toujours claire, quelle que soit la saison) ---------- */ .nav { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; max-width: 1180px; margin: 0 auto; } .brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-serif); font-weight: 700; font-size: 1rem; color: var(--ink); min-width: 0; } .brand-logo { height: 36px; width: auto; flex: none; } .brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-links { display: flex; align-items: center; gap: 4px; } .nav-links a { padding: 9px 14px; border-radius: 999px; font-size: .92rem; color: var(--muted); transition: color .15s, background .15s; } .nav-links a:hover { color: var(--ink); background: var(--paper-dim); } .nav-links a.is-active { color: #fff; background: var(--navy); } /* ---------- Boutons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 24px; border-radius: 999px; border: 1px solid transparent; font-family: var(--font-body); font-weight: 700; font-size: .95rem; transition: transform .15s ease, background .15s, border-color .15s, color .15s; white-space: nowrap; } .btn:active { transform: scale(.97); } .btn-primary { background: var(--navy); color: var(--on-navy); } .btn-primary:hover { background: var(--navy-bright); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost:hover { border-color: var(--navy); color: var(--navy); background: var(--navy-wash); } .btn-on-dark { background: var(--on-navy); color: var(--navy); } .btn-on-dark:hover { opacity: .9; } .btn-ghost-on-dark { background: transparent; color: var(--on-navy); border-color: color-mix(in srgb, var(--on-navy) 45%, transparent); } .btn-ghost-on-dark:hover { border-color: var(--on-navy); background: color-mix(in srgb, var(--on-navy) 12%, transparent); } .btn-danger { background: var(--danger); color: #fff; } .btn-danger:hover { background: var(--danger-bright); } .btn-block { width: 100%; } .btn-sm { padding: 8px 16px; font-size: .85rem; } .btn[disabled] { opacity: .45; pointer-events: none; } .btn-icon { width: 40px; height: 40px; padding: 0; border-radius: 50%; } /* ---------- Bandeau sombre (hero d'accueil / saison) — utilise --navy ---------- */ .hero { position: relative; overflow: hidden; padding: 92px 0 76px; background: var(--navy); color: var(--on-navy); } .hero h1, .hero h2 { color: var(--on-navy); } .hero .eyebrow { color: var(--on-navy); opacity: .85; } .hero .eyebrow::before { background: var(--on-navy); } .hero .verse { color: color-mix(in srgb, var(--on-navy) 80%, transparent); } .hero-medal { position: absolute; opacity: .5; pointer-events: none; } .hero-medal circle, .hero-medal line { stroke: var(--on-navy); } .hero-content { position: relative; text-align: center; max-width: 760px; margin: 0 auto; } .hero-content .eyebrow { justify-content: center; margin-bottom: 18px; } .hero-content .verse { max-width: 480px; margin: 22px auto 34px; } .hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 8px; } .hero-stats { display: flex; gap: 34px; justify-content: center; margin-top: 56px; flex-wrap: wrap; } .hero-stat { text-align: center; } .hero-stat b { display: block; font-family: var(--font-display); font-size: 2rem; color: var(--on-navy); } .hero-stat span { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--on-navy) 70%, transparent); } /* Bandeau saison : plus compact, même traitement sombre */ .season-hero { padding: 56px 0 46px; background: var(--navy); color: var(--on-navy); } .season-hero .eyebrow { color: var(--on-navy); opacity: .85; } .season-hero .eyebrow::before { background: var(--on-navy); } .season-hero h1 { color: var(--on-navy); } .season-hero .dates { font-family: var(--font-mono); color: color-mix(in srgb, var(--on-navy) 85%, transparent); } .season-hero p.desc { color: color-mix(in srgb, var(--on-navy) 82%, transparent); max-width: 620px; } .season-hero-logo { height: 52px; width: auto; margin-bottom: 18px; } /* ---------- Sections ---------- */ .section { padding: 68px 0; } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 32px; flex-wrap: wrap; } .section-head p { color: var(--muted); max-width: 520px; margin: 8px 0 0; } .divider { height: 1px; background: var(--line); border: none; margin: 0; } /* ---------- Cartes Saison (chacune affiche SA couleur via --card-accent) ---------- */ .season-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; } .season-card { position: relative; border-radius: var(--radius-l); padding: 28px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 14px; min-height: 230px; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; } .season-card:hover { transform: translateY(-4px); border-color: var(--card-accent, var(--navy)); box-shadow: var(--shadow-soft); } .season-card-logo { height: 30px; width: auto; margin-bottom: -4px; } .season-tag { position: absolute; top: 22px; right: 22px; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--card-accent, var(--navy)); padding: 5px 11px; border-radius: 999px; } .season-card .dates { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .06em; color: var(--card-accent, var(--navy)); } .season-card h3 { margin: 2px 0 0; } .season-card p.desc { color: var(--muted); font-size: .92rem; margin: 0; flex: 1; } .season-card .meta { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; } .season-card .count { font-family: var(--font-mono); font-size: .78rem; color: var(--muted-dim); } .season-card .go { color: var(--card-accent, var(--navy)); font-weight: 700; font-size: .88rem; display: inline-flex; align-items: center; gap: 6px; } .season-card .go svg { transition: transform .15s; } .season-card:hover .go svg { transform: translateX(3px); } /* ---------- Sélecteur de modèles ---------- */ .template-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; margin-top: 26px; } .template-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 16px; text-align: center; transition: border-color .15s, transform .15s, box-shadow .15s; box-shadow: var(--shadow-card); } .template-card:hover { border-color: var(--navy); transform: translateY(-3px); } .template-card .thumb { aspect-ratio: 1; border-radius: var(--radius-s); background: var(--paper-dim); display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 12px; background-image: repeating-linear-gradient(45deg, var(--paper-dim) 0 10px, var(--paper-dim-2) 10px 20px); } .template-card .thumb img { width: 100%; height: 100%; object-fit: contain; } .template-card .name { font-weight: 700; font-size: .92rem; } /* ---------- Galerie / grille photos ---------- */ .photo-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 30px 0 22px; } .chip-row { display: flex; gap: 8px; flex-wrap: wrap; } .chip { font-family: var(--font-mono); font-size: .78rem; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); } .chip.is-active, .chip:hover { border-color: var(--navy); color: var(--navy); background: var(--navy-wash); } .photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; } .photo-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--shadow-card); transition: transform .18s, border-color .18s, box-shadow .18s; } .photo-card:hover { transform: translateY(-3px); border-color: var(--navy); box-shadow: var(--shadow-soft); } .photo-card .frame { aspect-ratio: 1; background: var(--paper-dim); position: relative; overflow: hidden; } .photo-card .frame img { width: 100%; height: 100%; object-fit: cover; } .photo-card .body { padding: 14px 16px 16px; } .photo-card .author { font-weight: 700; font-size: .95rem; display: flex; align-items: center; gap: 6px; } .photo-card .season-lbl { font-family: var(--font-mono); font-size: .7rem; color: var(--muted-dim); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; } .photo-card .stats { display: flex; gap: 14px; margin-top: 10px; font-size: .82rem; color: var(--muted); } .photo-card .stats span { display: inline-flex; align-items: center; gap: 5px; } .empty-state { text-align: center; padding: 70px 20px; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius-l); background: var(--paper-dim); } .empty-state h3 { color: var(--ink); } /* ---------- Outil de création (canvas) ---------- */ .creator-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 46px; align-items: start; } @media (max-width: 900px) { .creator-layout { grid-template-columns: 1fr; } } .canvas-stage { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 22px; box-shadow: var(--shadow-card); } .canvas-holder { position: relative; width: 100%; aspect-ratio: 1; border-radius: var(--radius-m); overflow: hidden; background-image: repeating-conic-gradient(var(--paper-dim-2) 0% 25%, var(--paper-dim) 0% 50%); background-size: 24px 24px; touch-action: none; cursor: grab; } .canvas-holder.is-dragging { cursor: grabbing; } .canvas-holder canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .canvas-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; text-align: center; padding: 30px; color: var(--muted); pointer-events: none; } .canvas-empty svg { opacity: .7; } .drop-hint { font-family: var(--font-mono); font-size: .74rem; color: var(--muted-dim); text-align: center; margin-top: 14px; } .controls { margin-top: 20px; display: flex; flex-direction: column; gap: 14px; } .control-row { display: flex; align-items: center; gap: 14px; } .file-btn-row { display: flex; gap: 10px; flex-wrap: wrap; } .panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 26px; box-shadow: var(--shadow-card); } .panel h3 { margin-bottom: 4px; } .panel .sub { color: var(--muted); font-size: .9rem; margin-bottom: 20px; } .template-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 22px; } .template-strip a { flex: none; width: 66px; height: 66px; border-radius: 12px; border: 2px solid var(--line); overflow: hidden; background: var(--paper-dim); } .template-strip a.is-active { border-color: var(--navy); } .template-strip img { width: 100%; height: 100%; object-fit: contain; } .field { margin-bottom: 16px; } .field label { display: block; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .field input[type=text], .field textarea, .field input[type=date], .field input[type=number], .field input[type=password] { width: 100%; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 12px 14px; color: var(--ink); font-family: var(--font-body); font-size: .95rem; } .field input[type=color] { width: 64px; height: 44px; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--paper); cursor: pointer; } .field textarea { resize: vertical; min-height: 80px; } .field input:focus, .field textarea:focus { border-color: var(--navy); } .field .hint, .hint { font-size: .8rem; color: var(--muted-dim); margin-top: 6px; } .checkbox-row { display: flex; align-items: center; gap: 10px; } .checkbox-row input { width: 18px; height: 18px; accent-color: var(--navy); } .checkbox-row label { margin: 0; text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-size: .92rem; color: var(--ink); } /* ---------- Fiche photo ---------- */ .photo-layout { display: grid; grid-template-columns: 1fr .95fr; gap: 46px; align-items: start; } @media (max-width: 880px) { .photo-layout { grid-template-columns: 1fr; } } .photo-hero-frame { border-radius: var(--radius-l); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-soft); background: var(--paper-dim); } .photo-hero-frame img { width: 100%; } .like-btn { display: inline-flex; align-items: center; gap: 9px; padding: 12px 22px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-weight: 700; transition: all .15s; } .like-btn:hover { border-color: var(--danger); } .like-btn.is-liked { background: var(--danger); border-color: var(--danger); color: #fff; } .like-btn svg { transition: transform .15s; } .like-btn.is-liked svg { transform: scale(1.15); } .share-row { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; } .comment-list { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; } .comment { background: var(--paper-dim); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 14px 16px; } .comment .head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .comment .author { font-weight: 700; font-size: .9rem; } .comment .time { font-family: var(--font-mono); font-size: .7rem; color: var(--muted-dim); } .comment p { margin: 6px 0 0; color: var(--ink); font-size: .93rem; } /* ---------- Flash / alerts ---------- */ .flash { padding: 13px 18px; border-radius: var(--radius-s); margin-bottom: 18px; font-size: .92rem; border: 1px solid; } .flash-error { background: color-mix(in srgb, var(--danger) 10%, white); border-color: var(--danger); color: color-mix(in srgb, var(--danger) 70%, black); } .flash-success { background: color-mix(in srgb, var(--ok) 10%, white); border-color: var(--ok); color: color-mix(in srgb, var(--ok) 65%, black); } /* ---------- Footer ---------- */ .footer { border-top: 1px solid var(--line); padding: 36px 0; margin-top: 60px; background: var(--paper-dim); } .footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: .85rem; } .footer a.admin-link { color: var(--muted); font-weight: 700; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); } .footer a.admin-link:hover { color: var(--navy); border-color: var(--navy); background: var(--navy-wash); } /* ---------- Admin ---------- */ .admin-shell { display: grid; grid-template-columns: 240px 1fr; min-height: calc(100vh - 66px); } @media (max-width: 800px) { .admin-shell { grid-template-columns: 1fr; } } .admin-side { background: var(--paper-dim); border-right: 1px solid var(--line); padding: 26px 18px; } .admin-side nav a { display: block; padding: 10px 12px; border-radius: 10px; color: var(--muted); font-size: .92rem; margin-bottom: 2px; } .admin-side nav a:hover, .admin-side nav a.is-active { background: var(--paper); color: var(--navy); box-shadow: var(--shadow-card); } .admin-main { padding: 36px; max-width: 1000px; } .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; margin: 26px 0 40px; } .stat-box { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 20px; box-shadow: var(--shadow-card); } .stat-box b { display: block; font-family: var(--font-display); font-size: 2rem; color: var(--navy); } .stat-box span { font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; color: var(--muted); } .admin-table { width: 100%; border-collapse: collapse; margin-top: 14px; } .admin-table th { text-align: left; font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); } .admin-table td { padding: 12px; border-bottom: 1px solid var(--line); font-size: .9rem; vertical-align: middle; } .admin-table tr:hover td { background: var(--paper-dim); } .pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-family: var(--font-mono); } .pill-active { background: color-mix(in srgb, var(--ok) 15%, white); color: color-mix(in srgb, var(--ok) 70%, black); } .pill-inactive { background: var(--paper-dim-2); color: var(--muted); } .thumb-40 { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--paper-dim); } .thumb-56 { width: 56px; height: 56px; border-radius: 10px; object-fit: contain; background: var(--paper-dim); } .admin-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 30px; max-width: 560px; box-shadow: var(--shadow-card); } .login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--paper-dim); } .row-actions { display: flex; gap: 8px; } .row-actions form { display: inline; } .link-danger { color: var(--danger); } .link-danger:hover { color: var(--danger-bright); } .table-scroll { overflow-x: auto; } .logo-preview-row { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; } .logo-preview-row img { height: 44px; width: auto; border-radius: 8px; background: var(--paper-dim); padding: 4px; } .link-card-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; } .link-card { display: flex; align-items: center; gap: 13px; padding: 15px 18px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--paper); box-shadow: var(--shadow-card); transition: border-color .15s, transform .15s; flex: 1 1 240px; } .link-card:hover { border-color: var(--navy); transform: translateY(-2px); } .link-card .icon { width: 42px; height: 42px; border-radius: 50%; background: var(--navy-wash); display: flex; align-items: center; justify-content: center; color: var(--navy); flex: none; } .link-card .label { font-weight: 700; font-size: .92rem; color: var(--ink); } .link-card .sub { font-size: .78rem; color: var(--muted); margin-top: 1px; } .community-grid { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; height: 460px; } .community-grid .ph-tall { grid-row: 1 / span 2; } .community-grid .ph { border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-card); background: var(--paper-dim); } .community-grid .ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } .community-grid .ph:hover img { transform: scale(1.04); } @media (max-width: 760px) { .community-grid { grid-template-columns: 1fr; grid-template-rows: none; height: auto; } .community-grid .ph-tall { grid-row: auto; aspect-ratio: 4/3; } .community-grid .ph { aspect-ratio: 4/3; } } .footer-social { display: flex; gap: 8px; } .footer-social a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--muted); transition: border-color .15s, color .15s; } .footer-social a:hover { border-color: var(--navy); color: var(--navy); } .footer-inner { flex-wrap: wrap; row-gap: 14px; } .footer-right { display: flex; align-items: center; gap: 14px; } /* ---------- Utilitaires ---------- */ .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .text-muted { color: var(--muted); } .center { text-align: center; } .stack { display: flex; flex-direction: column; gap: 14px; } .badge-count { font-family: var(--font-mono); font-size: .7rem; background: var(--paper-dim-2); padding: 2px 8px; border-radius: 999px; }