/* ============================================================ Café de Paris — Waterloo ------------------------------------------------------------ Feuille de style unique du site public. Quatre couleurs et deux polices viennent du thème actif, injectées en variables dans le par themes.php : --brand, --brand-dark, --brand-soft, --accent, --bg, --bg-alt, --font-sans, --font-serif. Tout le reste en découle ici, sous des noms qui disent le rôle. Parti pris : une seule ambiance, celle du bar le soir. Pas de variante claire — un bar à bières ne se visite pas en plein jour. Chaque couleur est donc posée explicitement, jamais héritée du navigateur ou de la page hôte. ============================================================ */ :root { /* Fonds, du plus profond au plus relevé */ --ground: var(--bg, #0B110E); --ground-2: var(--bg-alt, #111A15); --ground-3: var(--brand-soft, #18241D); /* Accents */ --amber: var(--brand, #E9A13B); --amber-dk: var(--brand-dark, #B8761A); --kriek: var(--accent, #A8354A); /* Texte et filets. Le gris tire vers le vert du fond : un gris pur paraîtrait sale posé sur du verre de bouteille. */ --foam: #F2EDDF; --muted: #93A197; --line: #26342B; --line-soft: #1C2922; /* Polices. La troisième, condensée, porte tout ce qui est étiquette, donnée ou horaire — elle n'est pas dans le thème car elle ne change pas. */ --sans: var(--font-sans, 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif); --serif: var(--font-serif, 'Bodoni Moda', 'Times New Roman', Georgia, serif); --cond: 'Archivo Narrow', 'Archivo', var(--sans); --wrap: 1180px; --radius: 2px; } /* ------------------------------------------------------------ Base ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--ground); color: var(--foam); font-family: var(--sans); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video { max-width: 100%; display: block; } img { height: auto; } a { color: inherit; } hr { border: 0; border-top: 1px solid var(--line); margin-block: 2.5rem; } ::selection { background: var(--amber); color: #140D02; } :focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2rem); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--amber); color: #140D02; padding: .8rem 1.3rem; font-family: var(--cond); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; } .skip-link:focus { left: 0; } /* ------------------------------------------------------------ Typographie ------------------------------------------------------------ */ h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; line-height: 1.08; letter-spacing: -.015em; text-wrap: balance; margin: 0; } h1, .hero-title { font-size: clamp(2.6rem, 7vw, 5rem); letter-spacing: -.02em; } h2, .section-title { font-size: clamp(1.9rem, 4.2vw, 3rem); } h3 { font-size: 1.3rem; } h4 { font-size: 1.08rem; } p { margin: 0 0 1.15rem; } p:last-child { margin-bottom: 0; } /* L'étiquette. Petite, espacée, ambre : elle annonce une section sans consommer un niveau de titre. */ .hero-eyebrow, .eyebrow, .widget-title, .footer-heading, .toc-title, .promo-label { font-family: var(--cond); font-size: .74rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--amber); margin: 0 0 .5rem; } .hero-lead, .article-lead, .archive-intro, .lede { color: var(--muted); font-size: 1.08rem; max-width: 62ch; } /* ------------------------------------------------------------ Boutons ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--cond); font-size: .85rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; padding: .95rem 1.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: none; color: var(--foam); cursor: pointer; transition: background .25s ease, color .25s ease, border-color .25s ease; } .btn-primary { background: var(--amber); color: #140D02; border-color: var(--amber); } .btn-primary:hover, .btn-primary:focus-visible { background: var(--foam); border-color: var(--foam); } .btn-ghost:hover, .btn-ghost:focus-visible { border-color: var(--amber); color: var(--amber); } .btn-sm { padding: .6rem 1.1rem; font-size: .76rem; } .section-more { margin-top: 2.5rem; } /* Lien « voir tout » en bout de titre de section. */ .link-more { font-family: var(--cond); font-size: .8rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; text-decoration: none; color: var(--amber); border-bottom: 1px solid color-mix(in srgb, var(--amber) 40%, transparent); padding-bottom: .25rem; white-space: nowrap; } .link-more:hover { color: var(--foam); border-color: var(--foam); } /* ------------------------------------------------------------ Entête ------------------------------------------------------------ */ .site-header { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--ground) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-soft); } .header-inner { display: flex; align-items: center; gap: 1.5rem; min-height: 76px; } .brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; margin-right: auto; } /* Le logo porte le nom du bar : il lui faut la hauteur de le rendre lisible, là où un simple emblème se contenterait de 46 px. */ .brand-logo { height: 58px; width: auto; } .brand-emblem { height: 46px; width: auto; } @media (max-width: 460px) { .brand-logo { height: 46px; } } /* Emplacement du logo tant qu'aucun fichier n'est déposé : dimensions identiques à celles du logo final, donc aucun décalage à son arrivée. */ .brand-mark { width: 46px; height: 46px; flex: 0 0 46px; border: 1px dashed var(--line); border-radius: 50%; } .brand-text { font-family: var(--serif); font-size: 1.16rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; } .site-nav { display: flex; align-items: center; gap: 1.9rem; } .nav-niveau1 { display: flex; align-items: center; gap: 1.9rem; list-style: none; margin: 0; padding: 0; } .nav-niveau1 > li { position: relative; } .nav-lien { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--cond); font-size: .82rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--foam); background: none; border: 0; padding-block: .4rem; cursor: pointer; position: relative; } .nav-lien::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--amber); transition: right .3s ease; } .nav-lien:hover::after, .nav-lien:focus-visible::after, .nav-lien[aria-current]::after { right: 0; } .nav-chevron { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); } .sous-menu { position: absolute; top: 100%; left: -1rem; min-width: 15rem; background: var(--ground-2); border: 1px solid var(--line); list-style: none; margin: .5rem 0 0; padding: .5rem 0; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .22s ease, transform .22s ease, visibility .22s; } .a-sous-menu:hover .sous-menu, .a-sous-menu:focus-within .sous-menu, .a-sous-menu[data-ouvert] .sous-menu { opacity: 1; visibility: visible; transform: none; } .sous-menu a { display: block; padding: .55rem 1.2rem; text-decoration: none; font-size: .94rem; color: var(--muted); transition: color .2s ease, background .2s ease; } .sous-menu a:hover { color: var(--foam); background: var(--ground-3); } .nav-toggle { display: none; background: none; color: var(--foam); border: 1px solid var(--line); border-radius: var(--radius); width: 44px; height: 40px; padding: 0; cursor: pointer; } .nav-toggle span { display: block; width: 18px; height: 1.5px; background: currentColor; margin: 3.5px auto; transition: transform .25s ease, opacity .25s ease; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); } /* Pastille d'état, calculée en PHP sur les horaires réels. */ .statut { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--cond); font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; border: 1px solid var(--line); border-radius: 100px; padding: .42rem .85rem; color: var(--muted); text-decoration: none; } .statut .point { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: 0 0 7px; } .statut.ouvert { border-color: color-mix(in srgb, var(--amber) 45%, transparent); color: var(--amber); } .statut.ouvert .point { background: var(--amber); animation: pouls 2.4s ease-in-out infinite; } @keyframes pouls { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--amber) 55%, transparent); } 50% { opacity: .75; box-shadow: 0 0 0 6px transparent; } } /* ------------------------------------------------------------ Bandeau des diffusions sportives ------------------------------------------------------------ Volontairement en rouge kriek : c'est la seule zone du site qui n'est pas dans la gamme ambre. Elle doit se distinguer de l'agenda au premier coup d'œil — un match n'est pas un événement. */ .ticker { background: var(--kriek); color: #FFF3F0; border-block: 1px solid color-mix(in srgb, #000 22%, var(--kriek)); overflow: hidden; } /* La durée est calculée par app.js d'après la largeur réelle de la bande, pour que la vitesse de défilement reste la même quel que soit le nombre d'annonces. La valeur ci-dessous n'est qu'un repli si le script ne tourne pas. */ .ticker-track { display: flex; width: max-content; animation: defile var(--defile-duree, 28s) linear infinite; } .ticker:hover .ticker-track { animation-play-state: paused; } .ticker-group { display: flex; align-items: center; padding-block: .8rem; } .ticker-item { display: inline-flex; align-items: center; gap: .7rem; padding-inline: 1.8rem; font-family: var(--cond); font-size: .86rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; text-decoration: none; } .ticker-item b { font-weight: 700; letter-spacing: .04em; } .ticker-sep { opacity: .45; } @keyframes defile { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ------------------------------------------------------------ Fil d'Ariane ------------------------------------------------------------ Il n'avait aucun habillage : un
    nu se rend en liste numérotée, empilée, ce qui cassait le haut de chaque page intérieure. Il reste — les données structurées BreadcrumbList l'accompagnent déjà, mais Google recoupe le balisage avec ce que voit le visiteur, et un fil visible aide surtout celui qui arrive d'une recherche en plein milieu du site. Il se fait simplement discret : une ligne, en petites capitales, sous la couleur du texte courant. */ .breadcrumb { padding-block: 1.1rem 0; } .breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; list-style: none; margin: 0; padding: 0; } .breadcrumb li { display: flex; align-items: center; gap: .5rem; } /* Le chevron est porté par l'élément suivant : pas de séparateur orphelin en fin de ligne, et rien à retirer au dernier item. */ .breadcrumb li + li::before { content: ''; width: 5px; height: 5px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: rotate(-45deg); flex-shrink: 0; } .breadcrumb a, .breadcrumb span { font-family: var(--cond); font-size: .74rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); text-decoration: none; } .breadcrumb a { transition: color .2s ease; } .breadcrumb a:hover { color: var(--amber); } /* La page courante n'est pas un lien : elle se distingue par la couleur, pas par un soulignement qu'on essaierait de cliquer. */ .breadcrumb [aria-current="page"] { color: var(--foam); } @media (max-width: 460px) { /* Sur petit écran, seul le dernier maillon compte vraiment : les précédents restent accessibles mais cessent de faire retomber le titre plus bas que nécessaire. */ .breadcrumb { padding-block: .8rem 0; } .breadcrumb a, .breadcrumb span { font-size: .69rem; letter-spacing: .1em; } } /* ------------------------------------------------------------ Héros ------------------------------------------------------------ */ .hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line-soft); } /* Bulles montantes, dessinées en canvas par app.js. */ #bulles { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .6; pointer-events: none; } .hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 78% at 50% 108%, color-mix(in srgb, var(--amber) 13%, transparent), transparent 62%); } .hero-inner { position: relative; z-index: 2; padding-block: clamp(2.4rem, 6vw, 4.6rem) clamp(2rem, 4vw, 3.2rem); } .hero-inner.hero-split { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: center; } @media (min-width: 900px) { .hero-inner.hero-split { grid-template-columns: 1.15fr .85fr; } } .hero-title { margin-block: 1.5rem 1.7rem; } .hero-title em { font-style: italic; color: var(--amber); } .hero-lead { font-size: 1.16rem; } .hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.3rem; } .hero-media img { width: 100%; border: 1px solid var(--line); } /* Les chiffres du bar : références, écrans, heure de fermeture. */ .hero-stats { display: flex; flex-wrap: wrap; gap: clamp(1.6rem, 4.5vw, 3.4rem); margin-top: clamp(1.8rem, 4vw, 2.6rem); padding-top: 1.5rem; border-top: 1px solid var(--line-soft); } .stat b { display: block; font-family: var(--serif); font-size: 2.8rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; } .stat span { font-family: var(--cond); font-size: .72rem; font-weight: 600; letter-spacing: .19em; text-transform: uppercase; color: var(--muted); } /* ------------------------------------------------------------ Sections ------------------------------------------------------------ */ .section { padding-block: clamp(2.6rem, 5vw, 4.4rem); } .section-alt { background: var(--ground-2); border-block: 1px solid var(--line-soft); } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); } .section-head > div { display: flex; flex-direction: column; gap: .8rem; } .section-title { margin-bottom: clamp(2rem, 4vw, 2.8rem); } .section-head .section-title { margin-bottom: 0; } .section-split { display: grid; gap: clamp(2.5rem, 5vw, 4rem); } @media (min-width: 1000px) { .section-split { grid-template-columns: minmax(0, 1fr) 320px; } } /* ------------------------------------------------------------ Diffusions : la liste ------------------------------------------------------------ */ .matchs { border-top: 1px solid var(--line); } .match { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.6rem; padding-block: 1.35rem; border-bottom: 1px solid var(--line); position: relative; isolation: isolate; transition: padding-inline .3s ease; } .match::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--ground-3); transform: scaleY(0); transform-origin: bottom; transition: transform .3s ease; } .match:hover { padding-inline: .7rem; } .match:hover::before { transform: scaleY(1); } .match-quand { font-family: var(--cond); font-size: .76rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); min-width: 9.5rem; font-variant-numeric: tabular-nums; } .match-titre { font-family: var(--serif); font-size: 1.4rem; font-weight: 700; } .match-titre small { display: block; font-family: var(--cond); font-size: .72rem; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--muted); margin-top: .3rem; } .ecran { font-family: var(--cond); font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; padding: .35rem .7rem; border: 1px solid var(--line); border-radius: 100px; color: var(--muted); white-space: nowrap; } .ecran.geant { border-color: var(--amber); color: var(--amber); } /* ------------------------------------------------------------ Événements ------------------------------------------------------------ */ .events { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); } @media (min-width: 820px) { .events { grid-template-columns: repeat(3, 1fr); } } .event { background: var(--ground); padding: 2rem 1.7rem 1.9rem; display: flex; flex-direction: column; gap: 1rem; text-decoration: none; transition: background .3s ease; } .event:hover { background: var(--ground-3); } .event-affiche { margin: -2rem -1.7rem 0; border-bottom: 1px solid var(--line); } .event-affiche img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .event-date { display: flex; align-items: baseline; gap: .45rem; font-family: var(--cond); font-weight: 700; line-height: 1; color: var(--amber); margin: 0; } .event-date b { font-family: var(--serif); font-size: 2.5rem; font-weight: 900; font-variant-numeric: tabular-nums; } .event-date span { font-size: .8rem; letter-spacing: .19em; text-transform: uppercase; } .event h3 { margin: 0; } .event p { margin: 0; color: var(--muted); font-size: .96rem; } .event-foot { margin-top: auto; padding-top: 1.1rem; border-top: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-family: var(--cond); font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .event-tag { color: var(--muted); } .event-tag.payant { color: var(--amber); } .event-places { color: var(--muted); font-variant-numeric: tabular-nums; } .event-places.complet { color: var(--kriek); } /* ------------------------------------------------------------ La carte des bières ------------------------------------------------------------ */ .filtres { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.4rem; } .filtre { font-family: var(--cond); font-size: .76rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; padding: .5rem 1rem; border: 1px solid var(--line); border-radius: 100px; background: none; color: var(--muted); cursor: pointer; text-decoration: none; transition: color .22s ease, border-color .22s ease, background .22s ease; } .filtre:hover { color: var(--foam); border-color: var(--foam); } .filtre[aria-pressed="true"] { background: var(--amber); border-color: var(--amber); color: #140D02; } .carte { display: grid; gap: 0 clamp(2rem, 5vw, 4rem); list-style: none; margin: 0; padding: 0; } @media (min-width: 860px) { .carte { grid-template-columns: 1fr 1fr; } } .biere { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: .7rem; padding-block: .85rem; border-bottom: 1px solid var(--line-soft); } .biere.masquee { display: none; } .biere a { text-decoration: none; } .biere a:hover .biere-nom { color: var(--amber); } .biere-nom { font-weight: 600; font-size: 1.02rem; transition: color .2s ease; } .biere-nom small { display: block; font-family: var(--cond); font-size: .72rem; font-weight: 400; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); margin-top: .12rem; } .biere-tag { font-family: var(--cond); font-size: .66rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--amber-dk); } .biere-degre { font-family: var(--cond); font-size: .82rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; } .carte-note { margin-top: 2.2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .92rem; } /* ------------------------------------------------------------ Emplacements photo ------------------------------------------------------------ Tant que les vraies photos ne sont pas là, le cadre hachuré est assumé : mieux vaut un emplacement manifeste qu'une image d'illustration qui ferait passer le bar pour ce qu'il n'est pas. */ .shots { display: grid; gap: 1rem; } @media (min-width: 760px) { .shots { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; } .shot:nth-child(1) { grid-column: span 2; grid-row: span 2; } .shot:nth-child(4) { grid-column: span 2; } } .shot { border: 1px solid var(--line); min-height: 190px; display: flex; align-items: flex-end; padding: 1.1rem; background: repeating-linear-gradient(-45deg, transparent 0 11px, var(--line-soft) 11px 12px), var(--ground-2); } /* Une case qui porte une photo n'a plus besoin du cadre hachuré ni de sa marge : l'image occupe toute la place, le hachurage ne sert qu'à signaler un emplacement vide. */ .shot-photo { padding: 0; background: var(--ground-2); overflow: hidden; } .shot-photo picture { display: block; width: 100%; height: 100%; } .shot img { width: 100%; height: 100%; object-fit: cover; } .shot span { font-family: var(--cond); font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: var(--ground); padding: .4rem .7rem; border: 1px solid var(--line); } /* ------------------------------------------------------------ Infos pratiques ------------------------------------------------------------ */ .infos { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); } @media (min-width: 900px) { .infos { grid-template-columns: 1fr 1fr; } } .horaires { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .horaires th { text-align: left; font-family: var(--cond); font-size: .78rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); padding: .72rem 0; border-bottom: 1px solid var(--line-soft); } .horaires td { text-align: right; padding: .72rem 0; border-bottom: 1px solid var(--line-soft); font-family: var(--cond); font-size: .95rem; } .horaires tr.auj th, .horaires tr.auj td { color: var(--amber); font-weight: 700; } .horaires tr.repos td { color: var(--muted); } .infos-bloc { display: flex; flex-direction: column; gap: 1.8rem; } .info-item { display: flex; flex-direction: column; gap: .3rem; } .info-item .eyebrow { color: var(--muted); margin-bottom: .2rem; } .info-item p { margin: 0; font-size: 1.04rem; } .info-item a { text-decoration: none; } .info-item a:hover { color: var(--amber); } /* ------------------------------------------------------------ Cartes d'articles ------------------------------------------------------------ */ .card-grid { display: grid; gap: clamp(1.2rem, 2.5vw, 1.8rem); } @media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .card-grid { grid-template-columns: repeat(3, 1fr); } } .section-split .card-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .card { display: flex; flex-direction: column; background: var(--ground-2); border: 1px solid var(--line); transition: border-color .3s ease, transform .3s ease; } .card:hover { border-color: color-mix(in srgb, var(--amber) 50%, transparent); transform: translateY(-3px); } .card-media { display: block; overflow: hidden; border-bottom: 1px solid var(--line); } .card-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .5s ease; } .card:hover .card-media img { transform: scale(1.04); } .card-body { display: flex; flex-direction: column; gap: .6rem; padding: 1.4rem 1.3rem 1.5rem; flex: 1; } .card-tag { align-self: flex-start; font-family: var(--cond); font-size: .68rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--amber); text-decoration: none; } .card-tag:hover { color: var(--foam); } .card-title { font-size: 1.18rem; margin: 0; } .card-title a { text-decoration: none; } .card-title a:hover { color: var(--amber); } .card-excerpt { color: var(--muted); font-size: .94rem; margin: 0; } .card-meta { margin: auto 0 0; padding-top: .8rem; font-family: var(--cond); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } /* ------------------------------------------------------------ Grille des thématiques ------------------------------------------------------------ */ .silo-grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); } @media (min-width: 640px) { .silo-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .silo-grid { grid-template-columns: repeat(4, 1fr); } } .silo-card { display: flex; flex-direction: column; gap: .55rem; padding: 1.7rem 1.4rem; background: var(--ground); text-decoration: none; transition: background .3s ease; } .silo-card:hover { background: var(--ground-3); } .silo-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--silo, var(--amber)); } .silo-name { font-family: var(--serif); font-size: 1.2rem; font-weight: 700; } .silo-desc { color: var(--muted); font-size: .9rem; } /* ------------------------------------------------------------ Article ------------------------------------------------------------ */ .article-layout { display: grid; gap: clamp(2.5rem, 5vw, 4rem); padding-block: clamp(2.5rem, 6vw, 4.5rem); } @media (min-width: 1000px) { .article-layout { grid-template-columns: minmax(0, 1fr) 320px; } } .article-layout.no-sidebar { grid-template-columns: minmax(0, 1fr); max-width: 820px; } .article-header { margin-bottom: 2.2rem; } .article-cat { display: inline-block; margin-bottom: 1rem; text-decoration: none; font-family: var(--cond); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--amber); } .article-header h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); } .article-lead { margin-top: 1.2rem; font-size: 1.14rem; } .article-meta { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--line); font-family: var(--cond); font-size: .76rem; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); } .article-figure { margin: 0 0 2.2rem; } .article-figure img { width: 100%; border: 1px solid var(--line); } .article-figure figcaption { margin-top: .7rem; font-size: .85rem; color: var(--muted); font-family: var(--cond); } .article-avertissement { margin-top: 2.5rem; padding: 1.3rem 1.5rem; border: 1px solid var(--line); border-left: 3px solid var(--amber); background: var(--ground-2); color: var(--muted); font-size: .94rem; } /* Sommaire */ .toc { margin: 0 0 2.4rem; padding: 1.4rem 1.6rem; background: var(--ground-2); border: 1px solid var(--line); } .toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; } .toc a { color: var(--muted); text-decoration: none; font-size: .95rem; } .toc a:hover { color: var(--amber); } .toc .toc-l3 { padding-left: 1.2rem; font-size: .9rem; } /* Corps de texte */ .prose { max-width: 68ch; } .prose > * + * { margin-top: 1.3rem; } .prose h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-top: 2.8rem; } .prose h3 { font-size: 1.25rem; margin-top: 2rem; } .prose p { margin-bottom: 0; } .prose a { color: var(--amber); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .prose a:hover { color: var(--foam); } .prose ul, .prose ol { padding-left: 1.3rem; display: flex; flex-direction: column; gap: .5rem; } .prose li::marker { color: var(--amber); } .prose img { border: 1px solid var(--line); } .prose figure { margin: 2rem 0; } .prose figcaption { margin-top: .6rem; font-size: .85rem; color: var(--muted); } .prose blockquote { margin: 2rem 0; padding: .3rem 0 .3rem 1.5rem; border-left: 2px solid var(--amber); font-family: var(--serif); font-size: 1.2rem; font-style: italic; color: var(--foam); } .prose code { background: var(--ground-3); padding: .15em .4em; border-radius: var(--radius); font-size: .9em; color: var(--amber); } .prose pre { background: var(--ground-2); border: 1px solid var(--line); padding: 1.2rem; overflow-x: auto; } .prose pre code { background: none; padding: 0; color: inherit; } .prose table { width: 100%; border-collapse: collapse; font-size: .95rem; } .prose thead th { text-align: left; font-family: var(--cond); font-size: .76rem; letter-spacing: .13em; text-transform: uppercase; color: var(--amber); padding: .8rem .7rem; border-bottom: 1px solid var(--line); } .prose td { padding: .8rem .7rem; border-bottom: 1px solid var(--line-soft); } .prose .table-scroll { overflow-x: auto; } /* ------------------------------------------------------------ Colonne latérale ------------------------------------------------------------ */ .sidebar { display: flex; flex-direction: column; gap: 1.6rem; } .sidebar-sticky { align-self: start; position: sticky; top: 100px; } .widget { background: var(--ground-2); border: 1px solid var(--line); padding: 1.4rem 1.4rem 1.5rem; } .widget-title { margin-bottom: .9rem; } .widget-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; counter-reset: w; } .widget-list li { counter-increment: w; display: flex; gap: .7rem; font-size: .94rem; } .widget-list li::before { content: counter(w, decimal-leading-zero); font-family: var(--cond); font-size: .78rem; font-weight: 700; color: var(--amber); flex: 0 0 auto; padding-top: .15rem; } .widget-list a { color: var(--muted); text-decoration: none; } .widget-list a:hover { color: var(--foam); } /* ------------------------------------------------------------ Annuaire local (module « villes ») ------------------------------------------------------------ */ .city-grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); } @media (min-width: 640px) { .city-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .city-grid { grid-template-columns: repeat(3, 1fr); } } .city-grid a { padding: 1.3rem 1.4rem; background: var(--ground); text-decoration: none; display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; transition: background .3s ease; } .city-grid a:hover { background: var(--ground-3); } .city-count { font-family: var(--cond); font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; } .prac-list { display: flex; flex-direction: column; gap: 1rem; } .prac-card { display: flex; gap: 1.2rem; padding: 1.4rem; background: var(--ground-2); border: 1px solid var(--line); } .prac-featured { border-color: color-mix(in srgb, var(--amber) 45%, transparent); } .prac-photo, .prac-avatar { width: 76px; height: 76px; flex: 0 0 76px; object-fit: cover; border-radius: 50%; } .prac-avatar { display: grid; place-items: center; background: var(--ground-3); font-family: var(--serif); font-size: 1.6rem; color: var(--amber); } .prac-header { display: flex; flex-direction: column; gap: .2rem; } .prac-name { font-family: var(--serif); font-size: 1.2rem; font-weight: 700; margin: 0; } .prac-addr, .prac-price { font-family: var(--cond); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .prac-desc { color: var(--muted); font-size: .94rem; margin: .6rem 0 0; } .prac-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; } .prac-disc { font-size: .82rem; color: var(--muted); } /* ------------------------------------------------------------ Blocs de promotion (module affiliation) ------------------------------------------------------------ */ .promo-block { background: var(--ground-2); border: 1px solid var(--line); padding: 1.4rem; } .promo-title { font-family: var(--serif); font-size: 1.1rem; margin: 0 0 .9rem; } .promo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; } .promo-link { text-decoration: none; display: flex; flex-direction: column; gap: .2rem; } .promo-link:hover .promo-partner { color: var(--amber); } .promo-partner { font-weight: 600; } .promo-cta { font-family: var(--cond); font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; color: var(--amber); } .promo-disclosure, .footer-disclosure { font-size: .8rem; color: var(--muted); } /* ------------------------------------------------------------ Formulaires ------------------------------------------------------------ */ .form-row { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.1rem; } .form-row label { font-family: var(--cond); font-size: .78rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); } input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="date"], select, textarea { font-family: var(--sans); font-size: 1rem; color: var(--foam); background: var(--ground-2); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem; width: 100%; transition: border-color .2s ease; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--amber); } textarea { min-height: 8rem; resize: vertical; } .contact-form, .inscription-form { max-width: 34rem; } .newsletter-form { display: flex; gap: .5rem; } .newsletter-form input { flex: 1; } .newsletter-form button { font-family: var(--cond); font-size: .78rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; background: var(--amber); color: #140D02; border: 0; padding-inline: 1.2rem; border-radius: var(--radius); cursor: pointer; } .newsletter-form button:hover { background: var(--foam); } .alert { padding: 1rem 1.2rem; border: 1px solid var(--line); border-left-width: 3px; margin-bottom: 1.5rem; font-size: .95rem; } .alert-success { border-left-color: var(--amber); background: var(--ground-2); } .alert-error { border-left-color: var(--kriek); background: var(--ground-2); } /* ------------------------------------------------------------ Pagination, archives, page manquante ------------------------------------------------------------ */ .pagination { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 3rem; list-style: none; padding: 0; } .pagination a, .pagination span { display: grid; place-items: center; min-width: 2.6rem; height: 2.6rem; padding-inline: .6rem; border: 1px solid var(--line); text-decoration: none; font-family: var(--cond); font-size: .86rem; font-variant-numeric: tabular-nums; } .pagination a:hover { border-color: var(--amber); color: var(--amber); } .pagination [aria-current="page"] { background: var(--amber); border-color: var(--amber); color: #140D02; } .archive-header { padding-block: clamp(2rem, 4vw, 3.2rem) 0; } .archive-count { font-family: var(--cond); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .archive-intro { margin-top: 1.2rem; } .back-link { font-family: var(--cond); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-decoration: none; } .back-link:hover { color: var(--amber); } .empty, .notfound { text-align: center; padding-block: clamp(3rem, 9vw, 6rem); color: var(--muted); } .notfound h1 { margin-bottom: 1.2rem; } .search-big { max-width: 34rem; margin-inline: auto; display: flex; gap: .5rem; } /* ------------------------------------------------------------ Vidéo différée ------------------------------------------------------------ */ .video-facade { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--line); background: none; cursor: pointer; } .video-play { position: absolute; inset: 0; margin: auto; width: 66px; height: 66px; border-radius: 50%; background: color-mix(in srgb, var(--amber) 92%, transparent); transition: transform .25s ease; } .video-play::after { content: ''; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-left: 18px solid #140D02; border-block: 11px solid transparent; transform: translateX(3px); } .video-facade:hover .video-play { transform: scale(1.08); } .video-frame { width: 100%; aspect-ratio: 16 / 9; border: 0; } .video-note { margin-top: .6rem; font-size: .82rem; color: var(--muted); } /* ------------------------------------------------------------ Pied de page ------------------------------------------------------------ */ .site-footer { background: var(--ground-2); border-top: 1px solid var(--line); padding-bottom: 5.5rem; } .footer-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); padding-block: clamp(3rem, 7vw, 4.5rem); } @media (min-width: 760px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; } } @media (min-width: 1040px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } } .footer-title { font-family: var(--serif); font-size: 1.3rem; font-weight: 700; margin: 0 0 .4rem; } .footer-tagline { color: var(--muted); font-size: .94rem; } .footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; } .footer-col a { color: var(--muted); text-decoration: none; font-size: .95rem; } .footer-col a:hover { color: var(--amber); } .footer-small { margin-top: .7rem; font-size: .82rem; color: var(--muted); } /* Réseaux sociaux : boutons, pas une liste de liens perdue en bas de page. */ .footer-social { display: flex; flex-wrap: wrap; gap: .7rem; list-style: none; margin: 1.3rem 0 0; padding: 0; } .footer-social a { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem 1.1rem .7rem .9rem; transition: border-color .25s ease, background .25s ease, transform .25s ease; } .footer-social a:hover { border-color: var(--amber); background: var(--ground-3); transform: translateY(-2px); } .footer-social svg { width: 20px; height: 20px; flex: 0 0 20px; stroke: var(--amber); fill: none; stroke-width: 1.5; } .footer-social svg.plein { fill: var(--amber); stroke: none; } .footer-social b { font-family: var(--cond); font-size: .8rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; line-height: 1.2; } .footer-social small { display: block; font-weight: 400; font-size: .72rem; letter-spacing: .05em; text-transform: none; color: var(--muted); margin-top: .15rem; } .footer-bottom { display: flex; flex-wrap: wrap; gap: .7rem 1.6rem; justify-content: space-between; align-items: center; padding-top: 1.6rem; border-top: 1px solid var(--line-soft); } .footer-bottom p { margin: 0; color: var(--muted); font-size: .84rem; } .footer-bottom a { color: var(--muted); } .footer-bottom a:hover { color: var(--amber); } /* ------------------------------------------------------------ Barre d'action mobile ------------------------------------------------------------ Appeler, itinéraire, agenda : les trois gestes qu'un visiteur fait depuis la rue, à portée de pouce et jamais plus loin qu'un écran. */ .actionbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 70; display: none; background: color-mix(in srgb, var(--ground) 94%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); } .actionbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .8rem .4rem; text-decoration: none; font-family: var(--cond); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .actionbar a + a { border-left: 1px solid var(--line-soft); } .actionbar svg { width: 19px; height: 19px; stroke: var(--amber); fill: none; stroke-width: 1.6; } /* ------------------------------------------------------------ Bandeau cookies ------------------------------------------------------------ */ .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; background: var(--ground-2); border-top: 1px solid var(--line); padding: 1.2rem clamp(1.1rem, 4vw, 2rem); display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; } .cookie-banner p { margin: 0; font-size: .92rem; color: var(--muted); max-width: 58ch; } .cookie-actions { display: flex; gap: .6rem; } /* ------------------------------------------------------------ Révélation au défilement ------------------------------------------------------------ */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; } .reveal.vu { opacity: 1; transform: none; } /* ------------------------------------------------------------ Adaptations mobiles ------------------------------------------------------------ */ @media (max-width: 900px) { .nav-toggle { display: block; } .actionbar { display: flex; } .site-nav { position: fixed; inset: 76px 0 auto; z-index: 55; flex-direction: column; align-items: stretch; gap: 0; background: var(--ground); border-bottom: 1px solid var(--line); padding: 1rem clamp(1.1rem, 4vw, 2rem) 1.6rem; max-height: calc(100dvh - 76px); overflow-y: auto; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .25s ease, transform .25s ease, visibility .25s; } .site-nav.open { opacity: 1; visibility: visible; transform: none; } .nav-niveau1 { flex-direction: column; align-items: stretch; gap: 0; } .nav-niveau1 > li { border-bottom: 1px solid var(--line-soft); } .nav-lien { width: 100%; justify-content: space-between; padding-block: 1rem; font-size: .95rem; } .nav-lien::after { display: none; } .sous-menu { position: static; opacity: 1; visibility: visible; transform: none; background: none; border: 0; margin: 0; padding: 0 0 .8rem 1rem; display: none; } .a-sous-menu[data-ouvert] .sous-menu { display: block; } .match { grid-template-columns: 1fr auto; row-gap: .5rem; } .match-quand { grid-column: 1 / -1; min-width: 0; } .sidebar-sticky { position: static; } } @media (max-width: 460px) { body { font-size: 16px; } .hero-stats { gap: 1.8rem; } .stat b { font-size: 2.2rem; } } /* ------------------------------------------------------------ Mouvement réduit ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .reveal { opacity: 1; transform: none; } #bulles { display: none; } } /* ------------------------------------------------------------ Impression : la carte des bières se photocopie. ------------------------------------------------------------ */ @media print { body { background: #fff; color: #000; } .site-header, .ticker, .actionbar, .site-footer, .cookie-banner, #bulles, .filtres { display: none !important; } .biere { border-color: #ccc; } .biere-tag { color: #666; } } /* ------------------------------------------------------------ Questions fréquentes ------------------------------------------------------------ En accordéon plutôt qu'en liste déroulée : quinze réponses affichées d'un bloc, personne ne les lit. Le premier item est ouvert pour montrer d'emblée qu'il y a quelque chose dessous. */ .faq { border-top: 1px solid var(--line); max-width: 76ch; } .faq-item { border-bottom: 1px solid var(--line); } .faq-item summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; padding-block: 1.3rem; font-family: var(--serif); font-size: 1.16rem; font-weight: 700; transition: color .2s ease; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { color: var(--amber); } /* Le chevron tourne à l'ouverture — le seul indice qu'il y a plus à lire. */ .faq-item summary::after { content: ''; flex: 0 0 8px; width: 8px; height: 8px; margin-top: .35rem; border-right: 1.5px solid var(--amber); border-bottom: 1.5px solid var(--amber); transform: rotate(45deg); transition: transform .25s ease; } .faq-item[open] summary::after { transform: rotate(-135deg); } .faq-item .prose { padding-bottom: 1.5rem; font-size: .98rem; } .faq-item .prose p { color: var(--muted); } /* ------------------------------------------------------------ Avis ------------------------------------------------------------ Sobres, sans photo de profil ni logo de plateforme : ce qui rend un avis crédible, c'est son texte et sa provenance, pas son habillage. Les étoiles non obtenues restent visibles en creux, pour qu'un 4/5 se lise comme un 4/5 et pas comme quatre étoiles. */ .avis-grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); } @media (min-width: 800px) { .avis-grid { grid-template-columns: repeat(3, 1fr); } } .avis { margin: 0; padding: 1.8rem 1.6rem; background: var(--ground); display: flex; flex-direction: column; gap: 1rem; } .avis-note { margin: 0; color: var(--amber); letter-spacing: .15em; font-size: 1rem; } .avis-note span { color: var(--line); } .avis blockquote { margin: 0; font-family: var(--serif); font-size: 1.08rem; line-height: 1.5; font-style: italic; } .avis blockquote::before { content: '\201C'; } .avis blockquote::after { content: '\201D'; } .avis figcaption { margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--line-soft); font-family: var(--cond); font-size: .76rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; } .avis figcaption span { font-weight: 400; color: var(--muted); } /* ------------------------------------------------------------ Sélecteur de langue ------------------------------------------------------------ Deux codes de deux lettres, séparés d'un filet. Assez discret pour ne pas concurrencer la navigation, assez visible pour qu'un anglophone le trouve sans chercher. */ .langues { display: flex; align-items: center; gap: .55rem; list-style: none; margin: 0; padding: 0; } .langues li + li { border-left: 1px solid var(--line); padding-left: .55rem; } .langues a, .langues span { font-family: var(--cond); font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-decoration: none; } .langues a { color: var(--muted); transition: color .2s ease; } .langues a:hover { color: var(--amber); } .langues [aria-current] { color: var(--foam); } @media (max-width: 900px) { /* Dans le menu déroulant, il passe en bas et respire. */ .langues { margin-top: 1.2rem; justify-content: flex-start; } } /* Un événement dans le bandeau se distingue d'un match : même bande, mais le titre passe en italique, comme dans l'agenda. Assez pour qu'on ne confonde pas une soirée avec un coup d'envoi. */ .ticker-evenement b { font-style: italic; font-weight: 600; }