/* ========================================================================== La Jonquille — site public Valeurs extraites du CSS de la maquette publiée (Figma Sites) ========================================================================== */ :root { /* --- Couleurs (valeurs exactes de la maquette) --- */ --jq-cream: #FFF1DD; /* fond de page, et texte sur fonds colorés */ --jq-dark: #4D4D4D; /* nav, footer */ --jq-green: #8AC277; /* Le Restaurant */ --jq-blue: #606AB1; /* Le Bar */ --jq-blue-pale: #A8AED4; /* cadre extérieur des capsules de bière */ --jq-orange: #FD8229; /* Concerts & Spectacles */ --jq-white: #FFFFFF; /* Étapes intermédiaires du dégradé du hero */ --jq-g2: #759694; --jq-g4: #87708F; --jq-g5: #AF766D; --jq-g6: #D67C4B; /* --- Typographie --- Prater est une fonte commerciale : déposer les .woff2 sous licence dans static/fonts/. Les fallbacks évitent un écroulement de la mise en page tant que les fichiers ne sont pas là. */ --jq-font-display: "Prater Sans Pro", Georgia, serif; --jq-font-nav: "Prater Block Fill Pro", Georgia, serif; --jq-font-block: "Prater Block Pro", Georgia, serif; --jq-font-body: "Nunito Sans", system-ui, sans-serif; /* --- Rythme --- */ /* Géométrie du bandeau gris du footer, en % de la largeur de page. overlap : remontée sur la fresque (augmenter = bandeau plus haut) width : largeur du bandeau right : marge entre le bandeau et le bord droit */ --jq-footer-overlap: 13.5%; --jq-footer-width: 73.7%; --jq-footer-right: 13.9%; --jq-radius-card: 50px; --jq-radius-pill: 41px; --jq-card-border: 40px; /* épaisseur du cadre coloré */ --jq-gap-cards: 28px; /* --- Motion (non fourni par la maquette, voir note) --- */ --jq-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --jq-dur: 220ms; } /* --- Polices ------------------------------------------------------------- */ @font-face { font-family: "Prater Sans Pro"; src: url("../fonts/prater-sans-pro-bold.77141975fa13.woff2") format("woff2"); font-weight: 700; font-display: swap; } @font-face { font-family: "Prater Block Fill Pro"; src: url("../fonts/prater-block-fill-pro-regular.4c627d8a0907.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Prater Sans Pro"; src: url("../fonts/prater-sans-pro-regular.f8bba2aead94.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Prater Block Pro"; src: url("../fonts/prater-block-pro-regular.eb06457c6949.woff2") format("woff2"); font-weight: 400; font-display: swap; } /* --- Couleur de page ------------------------------------------------------- Chaque page pose sa classe sur le (voir le bloc `body_class` de base.html) et définit ainsi `--jq-page`. Tout ce qui doit s'accorder à la rubrique — soulignement des titres, titre du hero — lit cette variable au lieu d'un modificateur dédié. La valeur par défaut couvre l'accueil et les pages sans couleur propre. */ :root { --jq-page: var(--jq-dark); } .jq-page--restaurant { --jq-page: var(--jq-green); } .jq-page--bar { --jq-page: var(--jq-blue); } .jq-page--concerts { --jq-page: var(--jq-orange); } /* À propos n'a pas de couleur propre dans la charte : on reprend le rose-brun du dégradé du hero, déjà retenu pour cette rubrique dans la navigation. */ .jq-page--apropos { --jq-page: var(--jq-g5); } /* --- Reset --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--jq-cream); color: var(--jq-dark); font-family: var(--jq-font-body); -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 3px solid var(--jq-blue); outline-offset: 3px; } .jq-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* --- En-tête ------------------------------------------------------------- Desktop : padding 24px 60px, espace-entre, gap 20px puis 26px. */ .jq-header { display: flex; justify-content: space-between; align-items: center; gap: 24px; /* Le contenu s'arrête à 1380px, comme la bannière, mais le fond et le trait de séparation restent pleine largeur : c'est le retrait latéral qui grandit, pas une largeur maximale posée sur le header lui-même, qui couperait le trait au milieu de l'écran. En dessous d'environ 1500px, `max()` retient les 60px d'origine et rien ne change. Au-delà, le retrait absorbe le surplus et le menu cesse de s'éloigner du logo. */ padding: 24px max(60px, calc((100% - 1380px) / 2)); background: var(--jq-cream); border-bottom: 2px solid #000; } .jq-header__logo { flex-shrink: 0; line-height: 0; } .jq-header__logo img { width: 126px; height: auto; } /* Le header n'a que deux enfants : le logo, et tout le reste. C'est ce qui fixe les espacements — avec `space-between` sur trois enfants, l'espace libre se partageait de part et d'autre du menu, et le vide avant le bouton « Réserver » suivait la largeur de la fenêtre au lieu de rester constant. Ici les distances internes sont écrites une à une, relevées sur la maquette ; seul l'écart logo / bloc de droite absorbe la largeur restante. */ .jq-header__droite { display: flex; align-items: center; } .jq-nav { display: flex; align-items: center; gap: 50px; } .jq-nav__link { position: relative; font-family: var(--jq-font-nav); font-size: 23px; line-height: 1.45; letter-spacing: -0.23px; text-transform: capitalize; color: var(--jq-dark); } /* Le trait se déploie depuis la gauche, dans la couleur de la rubrique */ .jq-nav__link::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; border-radius: 2px; background: currentColor; color: var(--jq-accent, var(--jq-dark)); transform: scaleX(0); transform-origin: left; transition: transform var(--jq-dur) var(--jq-ease); } .jq-nav__link:hover::after, .jq-nav__link:focus-visible::after { transform: scaleX(1); } .jq-nav__link--restaurant { --jq-accent: var(--jq-green); } .jq-nav__link--bar { --jq-accent: var(--jq-blue); } .jq-nav__link--concerts { --jq-accent: var(--jq-orange); } .jq-nav__link--apropos { --jq-accent: var(--jq-g5); } /* Écart entre la navigation et les boutons, puis entre les deux boutons. */ .jq-actions { display: flex; align-items: center; margin-left: 49px; gap: 15px; } /* --- Boutons -------------------------------------------------------------- */ .jq-btn { display: inline-flex; justify-content: center; align-items: center; padding: 12px 16px; border-radius: var(--jq-radius-pill); font-family: var(--jq-font-nav); font-size: 23px; line-height: 1.45; letter-spacing: -0.23px; text-transform: capitalize; color: var(--jq-white); transition: box-shadow var(--jq-dur) var(--jq-ease), transform var(--jq-dur) var(--jq-ease); } .jq-btn--green { background: var(--jq-green); } .jq-btn--orange { background: var(--jq-orange); } .jq-btn--blue { background: var(--jq-blue); } /* Au repos : pastille pleine, sans ombre. Au survol : le bouton se soulève et découvre l'ombre noire nette. */ .jq-btn:hover, .jq-btn:focus-visible { transform: translateY(-2px); box-shadow: 4px 4px 0 #000; } /* --- Menu mobile ---------------------------------------------------------- Le burger et la croix n'existent qu'en dessous de 900px ; au-dessus, le header reste la barre horizontale et ces deux boutons sont retirés du flux. Les dimensions viennent de la maquette mobile, relevées sur l'export 2x. */ .jq-header__burger, .jq-header__fermer { display: none; padding: 0; border: 0; background: none; color: var(--jq-dark); cursor: pointer; } .jq-header__burger { /* Cible de 48px : les trois barres n'en occupent que la moitié, mais un bouton plus petit se rate au pouce. */ width: 48px; height: 48px; flex-direction: column; justify-content: center; align-items: center; gap: 8px; flex-shrink: 0; } .jq-burger__barre { width: 38px; height: 3px; background: currentColor; border-radius: 2px; } .jq-header__fermer { width: 48px; height: 48px; justify-content: center; align-items: center; } .jq-header__fermer svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; } /* Le panneau ouvert fige la page derrière lui. */ body.jq-scroll-bloque { overflow: hidden; } /* Les réseaux ne sont plus dans .jq-actions : leur distance au bouton « Billetterie » (30px) n'est pas celle qui sépare les deux boutons (15px). */ .jq-social { display: flex; align-items: center; gap: 12px; } .jq-header__droite .jq-social { margin-left: 30px; } .jq-social a { display: inline-flex; } .jq-social svg { width: 30px; height: 30px; fill: var(--jq-dark); } /* Même geste que les boutons : l'icône se soulève et découvre son ombre. `drop-shadow` et non `box-shadow` : l'ombre épouse le tracé du logo, là où box-shadow dessinerait un rectangle autour. */ .jq-header .jq-social a { transition: transform var(--jq-dur) var(--jq-ease), filter var(--jq-dur) var(--jq-ease); } .jq-header .jq-social a:hover, .jq-header .jq-social a:focus-visible { transform: translateY(-2px); } /* --- Hero ---------------------------------------------------------------- Le titre porte un dégradé unique via background-clip: text. Les bornes (27% → 70%) reproduisent les offsets de la maquette. */ .jq-hero { display: flex; justify-content: center; align-items: center; gap: 20px; padding: 60px 64px; } .jq-home { padding-top: 90px; } .jq-hero__title { margin: 0; max-width: 740px; font-family: var(--jq-font-display); font-weight: 700; font-size: 62px; line-height: 66px; letter-spacing: -1.24px; text-align: center; /* Titre en aplat sombre, choix retenu contre la maquette, qui applique un dégradé vert → bleu → orange. Les deux `background-clip` ci-dessous sont sans effet tant que `-webkit-text-fill-color` est opaque ; elles restent là pour permettre le retour au dégradé, qui se fait en rétablissant le `background-image` et en repassant `color` et `-webkit-text-fill-color` à `transparent` (voir --jq-g2 … --jq-g6). */ background-clip: text; -webkit-background-clip: text; color: var(--jq-dark); -webkit-text-fill-color: var(--jq-dark); } /* --- Cartes univers ------------------------------------------------------- Le cadre coloré est une bordure épaisse posée sur l'image, pas un fond. */ .jq-universes { display: flex; justify-content: center; align-items: flex-start; gap: var(--jq-gap-cards); padding: 32px 80px 80px; } .jq-card { position: relative; display: block; flex: 1 1 410px; max-width: 410px; aspect-ratio: 410 / 490; border-radius: var(--jq-radius-card); overflow: hidden; } .jq-card__img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--jq-radius-card); transition: transform 400ms var(--jq-ease); } /* Le cadre : 40px de couleur par-dessus l'image, en ombre intérieure plutôt qu'en bordure. Le rendu à l'arrêt est identique — un étalement intérieur réduit le rayon d'autant, comme le rayon intérieur d'une bordure — mais l'épaisseur d'une bordure est arrondie au pixel entier au rendu : 40px qui se résorbent s'animent alors en une quarantaine de paliers. L'étalement d'une ombre s'interpole en sous-pixel, et glisse. */ .jq-card__frame { position: absolute; inset: 0; border-radius: var(--jq-radius-card); box-shadow: inset 0 0 0 var(--jq-card-border) currentColor; pointer-events: none; transition: box-shadow var(--jq-dur) var(--jq-ease); } .jq-card--green { color: var(--jq-green); } .jq-card--blue { color: var(--jq-blue); } .jq-card--orange { color: var(--jq-orange); } /* La pastille de titre */ .jq-card__label { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 2; padding: 16px 32px; border-radius: var(--jq-radius-pill); background: currentColor; font-family: var(--jq-font-display); font-weight: 700; font-size: 34px; line-height: 1.1; letter-spacing: -0.17px; text-align: center; text-transform: capitalize; white-space: nowrap; transition: opacity var(--jq-dur) var(--jq-ease); } .jq-card__label span { color: var(--jq-cream); display: block; } /* Survol : le cadre se résorbe, l'image occupe toute la carte */ .jq-card:hover .jq-card__frame, .jq-card:focus-visible .jq-card__frame { box-shadow: inset 0 0 0 0 currentColor; transition-duration: 800ms; } .jq-card:hover .jq-card__img, .jq-card:focus-visible .jq-card__img { /*transform: scale(1.03);*/ } /* --- Footer --------------------------------------------------------------- La fresque occupe toute la largeur ; le bandeau gris la chevauche par le bas, décalé à droite (largeur 1235/1441 dans la maquette, marge 33px). Les marges négatives en % sont relatives à la largeur du footer, donc le chevauchement reste proportionnel à toutes les tailles d'écran. */ .jq-footer { position: relative; background: var(--jq-cream); } .jq-footer__decor { display: block; width: 100%; /* Le ratio de la fresque elle-même : le cadre épouse l'image, rien n'est rogné en large. */ aspect-ratio: 3840 / 1455; background: url("../img/footer-fond.53eaaf7296c2.png") no-repeat 50% 0 / 100% auto; pointer-events: none; } .jq-footer__panel { position: relative; width: var(--jq-footer-width); margin-left: auto; margin-right: var(--jq-footer-right); /* Le facteur 1.04 compense l'écart entre la hauteur rendue du PNG et celle de la maquette : sans lui, une bande crème subsiste entre la fresque et le bandeau. Valeur calée à l'œil, à revérifier si la fresque est ré-exportée dans un autre format ou d'autres dimensions. */ margin-top: calc(-1.04 * var(--jq-footer-overlap)); background: var(--jq-dark); color: var(--jq-cream); padding: 50px; display: flex; align-items: flex-start; padding-right:120px; } .jq-footer__col { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .jq-footer__title { margin: 0; font-family: var(--jq-font-body); font-weight: 900; font-size: 14px; letter-spacing: -0.28px; font-variation-settings: "wdth" 100, "opsz" 12, "YTLC" 500; } .jq-footer__text { margin: 0; font-weight: 500; font-size: 14px; letter-spacing: -0.28px; line-height: normal; } .jq-footer .jq-social { margin-top: 6px; } .jq-footer .jq-social svg { fill: var(--jq-cream); } /* --- Responsive ----------------------------------------------------------- Bascule à 420px dans la maquette : titre sur 3 lignes, cartes empilées. */ @media (max-width: 900px) { /* Le header se réduit au logo et à un bouton : le bloc de droite passe en `fixed`, donc hors flux, et `space-between` les sépare à lui seul. */ .jq-header { gap: 16px; padding: 24px 20px; } /* Un seul des deux boutons à la fois, à la même place. */ .jq-header__burger { display: inline-flex; } .jq-header__fermer { display: none; } .jq-header--ouvert .jq-header__burger { display: none; } .jq-header--ouvert .jq-header__fermer { display: inline-flex; } /* Menu ouvert, le header se fixe au-dessus du panneau : le logo et la ligne de séparation restent visibles, et le header reste atteignable même si la page était défilée au moment de l'ouverture — sans cela, il serait resté en haut du document, hors de l'écran. */ .jq-header--ouvert { position: fixed; top: 0; left: 0; right: 0; z-index: 101; } /* Même bloc qu'en large, autre forme : en colonne, sous le header. Il COMMENCE sous le header au lieu de le recouvrir, et ce n'est pas un détail : le panneau est un enfant du header, donc un header porteur d'un z-index crée un contexte d'empilement, dans lequel un enfant positionné se peint par-dessus le fond et le contenu de son propre parent. Le logo et la ligne de séparation disparaissaient dessous, quel que soit l'ordre des z-index. Sans recouvrement, la question ne se pose plus. La hauteur du header est mesurée par menu.js à l'ouverture ; la valeur de repli correspond aux 24px de marge, au logo et aux 24px du bas. `visibility` en plus de `opacity` : sans elle le panneau resterait cliquable et focusable une fois « fermé ». */ .jq-header__droite { position: fixed; top: var(--jq-header-h, 132px); right: 0; bottom: 0; left: 0; z-index: 100; flex-direction: column; justify-content: flex-start; align-items: center; gap: 0; padding: 26px 20px 40px; background: var(--jq-cream); opacity: 0; visibility: hidden; transition: opacity var(--jq-dur) var(--jq-ease), visibility var(--jq-dur) var(--jq-ease); } .jq-header--ouvert .jq-header__droite { opacity: 1; visibility: visible; } /* Distances relevées sur la maquette mobile. Elles sont serrées à dessein : l'ensemble doit tenir dans la hauteur d'écran sans défilement. */ .jq-nav { flex-direction: column; align-items: center; gap: 17px; } .jq-actions { flex-direction: column; align-items: center; margin-top: 20px; margin-left: 0; gap: 30px; } /* Les deux icônes restent côte à côte, seule cette rangée-là est horizontale. */ .jq-header__droite .jq-social { flex-direction: row; margin-top: 30px; margin-left: 0; gap: 24px; } /* Marges resserrées : le titre et la description occupaient presque tout l'écran avant que la bannière n'apparaisse. Valeurs relevées sur la maquette mobile. */ .jq-hero { padding: 48px 44px 38px; } .jq-universes { flex-direction: column; align-items: center; padding: 32px 44px 80px; } /* La fresque est recadrée sur sa bande dense : agrandie à 3,34 fois la largeur du cadre et prise à 30% de sa hauteur, ce qui écarte le ciel vide du haut et les tiges clairsemées du bas. Ces valeurs viennent d'un calage sur la maquette, et non d'un choix : `background-position` en pourcentage répartit le débord exactement comme le fait Figma. Conséquence utile : le bandeau gris n'a plus à remonter sur la fresque, puisque celle-ci se termine sur les plantes et non sur du vide. */ .jq-footer__decor { aspect-ratio: 506 / 297; background-size: 334% auto; background-position: 50% 30%; } .jq-footer__panel { width: 100%; margin-right: 0; margin-left: 0; margin-top: 0; flex-direction: column; /* Les colonnes empilées se touchaient : sans `gap`, « Horaires » venait coller au bloc Contact. */ gap: 40px; /* Retrait latéral de la maquette (17% de la largeur), borné pour ne pas étrangler le texte sur un écran étroit ni l'enfermer sur une tablette. */ padding: 50px clamp(24px, 17%, 72px) 60px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ========================================================================== Page Le Bar Cartes de becs et panneau de détail : valeurs relevées sur les attributs inline de la maquette publiée. Les titres de section restent approximatifs, leurs classes n'étant pas présentes dans le CSS servi. ========================================================================== */ .jq-section { width: min(100% - 4rem, 1360px); margin-inline: auto; padding-block: 64px; } /* Le hero de cette page empile titre et sous-titre */ .jq-hero--stack { flex-direction: column; gap: 12px; } /* Hero sans sous-titre : la page enchaîne directement sur son contenu, pas besoin de la respiration prévue pour les titres à deux niveaux. */ .jq-hero--compact { padding-block: 48px 8px; } /* Titre de page dans la couleur de la rubrique. `-webkit-text-fill-color` doit être surchargé aussi : il prime sur `color`, et le titre de base le fixe en dur. */ .jq-hero__title--page { color: var(--jq-page); -webkit-text-fill-color: var(--jq-page); } /* Sous-titre : Prater Sans (choix retenu contre la maquette, qui le rend en Prater Block — modification utilisateur du 18.08). */ .jq-hero__sub { margin: 0; max-width: 740px; font-family: var(--jq-font-display); font-weight: 400; text-transform: capitalize; font-size: 26px; line-height: 1.3; letter-spacing: -0.14px; text-align: center; color: var(--jq-dark); margin-top:20px; } /* Bannière pleine largeur sous le hero */ .jq-banner { width: min(100% - 5rem, 1380px); margin: 0 auto 24px; } .jq-banner img { width: 100%; aspect-ratio: 1340 / 400; object-fit: cover; border-radius: 40px; } /* Cette media query doit rester APRÈS les deux règles ci-dessus : elle n'ajoute aucune spécificité, et une règle de base placée plus bas dans le fichier l'emporterait. C'est ce qui se passait quand elle vivait dans le bloc mobile du header, deux cents lignes plus haut. */ @media (max-width: 900px) { /* Bord à bord, et hauteur de maquette au lieu d'un rétrécissement avec l'écran : `object-fit: cover`, déjà en place, la rogne alors en largeur. Les coins perdent leur arrondi, l'image touchant les bords. */ .jq-banner { width: 100%; } .jq-banner img { aspect-ratio: auto; height: 400px; border-radius: 0; } } /* --- Bière du mois -------------------------------------------------------- Panneau bleu à gauche (accroche + photo), fiche à droite. */ .jq-highlight { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: center; width: min(72% - 4rem, 1360px); } .jq-highlight__panel { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 32px; border-radius: 40px; background: var(--jq-blue); } /* Accroche en Prater Block, crème, avec une ombre portée nette comme sur la maquette. */ .jq-highlight__eyebrow { margin: 0; font-family: var(--jq-font-block); font-weight: 400; font-size: clamp(28px, 3vw, 44px); line-height: 1.1; letter-spacing: -0.22px; text-transform: capitalize; text-align: center; color: var(--jq-cream); } .jq-highlight__photo { width: 100%; max-width: 520px; height: auto; } /* --- Fiche ---------------------------------------------------------------- */ .jq-highlight__body { min-width: 0; } .jq-highlight__name { margin: 0 0 28px; font-family: var(--jq-font-display); font-weight: 700; font-size: clamp(30px, 2.6vw, 40px); line-height: 1.1; letter-spacing: -0.2px; color: var(--jq-blue); } /* --- Liste de caractéristiques (libellé au-dessus, valeur en dessous) ------ */ .jq-specs { margin: 0; } .jq-specs dt { margin-bottom: 0; font-family: var(--jq-font-display); font-weight: 400; font-size: 26px; letter-spacing: -0.11px; } /* Marge basse généreuse pour séparer les groupes, mais aucune au-dessus : la valeur reste collée à son libellé. */ .jq-specs dd { margin: 0 0 24px; font-weight: 400; font-size: 18px; letter-spacing: -0.36px; line-height: 1.45; } .jq-specs dd:last-child { margin-bottom: 0; } .jq-specs__prices span { display: block; } /* Dans la capsule dépliée, les libellés reprennent la police de titrage comme sur la maquette du détail. */ .jq-specs--detail dt { font-family: var(--jq-font-display); font-size: 24px; letter-spacing: -0.12px; } .jq-specs--detail dd { font-size: 19px; } /* --- Les becs ------------------------------------------------------------- Capsule verticale : nom de la bière en grand, brasserie et style en dessous, visuel au centre, numéro du bec en pied. Au clic, la capsule s'agrandit sur toute la largeur de la grille et repousse les suivantes. */ /* Le filet ne court pas sur toute la largeur : il s'arrête au texte. D'où l'inline-block sur le titre et le centrage porté par le conteneur. */ .jq-taps { --jq-taps-cols: 5; } .jq-taps__titre-wrap { text-align: center; } .jq-taps__title { display: inline-block; max-width: 100%; margin: 0 0 48px; padding-bottom: 14px; border-bottom: 3px solid var(--jq-page); font-family: var(--jq-font-display); font-weight: 700; font-size: 42px; line-height: 1.2; letter-spacing: -0.21px; color: var(--jq-dark); } .jq-taps { display: grid; grid-template-columns: repeat(var(--jq-taps-cols), minmax(0, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; } .jq-tap { min-width: 0; } /* --- Face de la capsule --------------------------------------------------- Double cadre : une bordure bleu pâle entoure la carte pleine, comme sur les cartes de concert. La bordure est portée par le bouton lui-même, ce qui évite un élément d'habillage supplémentaire dans le gabarit. */ .jq-tap__face { width: 100%; display: grid; /* La taille du nom est portée par une variable : elle sert à la fois au texte lui-même et au calcul de la hauteur réservée de sa rangée. */ --jq-tap-name-size: clamp(22px, 1.9vw, 30px); /* Le visuel porte un aspect-ratio carré et sa rangée est en `auto` : elle grandit pour le contenir exactement. (Le chevauchement précédent venait d'une rangée `1fr`, figée indépendamment du carré.) La hauteur de la capsule découle du contenu ; toutes sont identiques puisque chaque rangée a la même hauteur partout. */ grid-template-rows: calc(var(--jq-tap-name-size) * 2.1) /* nom : 2 lignes réservées */ auto /* brasserie */ auto /* style | degré */ auto /* visuel carré */ auto; /* numéro */ justify-items: center; align-content: start; gap: 3px; padding: 14px 14px 10px; /* 10px : réglage utilisateur du 19.08 (revenu sur les 6px proposés). */ border: 10px solid var(--jq-blue-pale); border-radius: 38px; background: var(--jq-blue); background-clip: padding-box; color: var(--jq-cream); text-align: center; cursor: pointer; transition: transform var(--jq-dur) var(--jq-ease), box-shadow var(--jq-dur) var(--jq-ease); } /* Même survol que les boutons Réserver / Billetterie : la capsule se soulève et découvre une ombre noire nette. */ .jq-tap__face:hover, .jq-tap__face:focus-visible { transform: translateY(-2px); box-shadow: 4px 4px 0 #000; } .jq-tap__name { align-self: center; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* au-delà de 2 lignes : points de suspension */ overflow: hidden; font-family: var(--jq-font-display); font-weight: 700; font-size: var(--jq-tap-name-size); line-height: 1.05; letter-spacing: -0.15px; text-wrap: balance; } /* Brasserie et style : une ligne chacun, tronqués si trop longs, pour que la hauteur du bloc texte soit rigoureusement la même partout. */ .jq-tap__brewery, .jq-tap__meta { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jq-tap__brewery, .jq-tap__meta { line-height: 1.25; letter-spacing: -0.36px; font-variation-settings: "wdth" 100, "opsz" 12, "YTLC" 500; } .jq-tap__brewery { font-weight: 700; font-size: clamp(15px, 1.2vw, 18px); } .jq-tap__meta { font-weight: 500; font-style: italic; font-size: clamp(12px, 0.9vw, 14px); } /* Visuel carré : aspect-ratio pilote la hauteur depuis la largeur, et la rangée `auto` s'adapte — pas de débordement possible. */ .jq-tap__visual { display: grid; place-items: center; /* 78% : réglage utilisateur du 19.08 (revenu sur les 90% proposés). */ width: 78%; aspect-ratio: 1; margin-top: 6px; border-radius: 26px; background: rgba(255, 255, 255, 0.07); overflow: hidden; } .jq-tap__visual img { max-width: 100%; max-height: 100%; object-fit: contain; } .jq-tap__number { margin-top: 0; } .jq-tap__number { font-family: var(--jq-font-block); font-weight: 400; font-size: clamp(26px, 2.2vw, 34px); line-height: 1; } /* --- Détail déplié -------------------------------------------------------- La capsule ouverte prend toute la largeur de la grille : les suivantes sont repoussées plutôt que recouvertes. */ /* La capsule ouverte occupe la largeur de trois capsules. La grille replace automatiquement les suivantes : rien n'est recouvert. */ .jq-tap.is-open { grid-column: span 3; } .jq-tap.is-open .jq-tap__face { aspect-ratio: auto; display: none; } .jq-tap__detail { padding: 32px 36px 36px; border: 6px solid var(--jq-blue-pale); border-radius: 38px; background: var(--jq-blue); background-clip: padding-box; color: var(--jq-cream); } .jq-tap__detail[hidden] { display: none; } .jq-tap__detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 32px; } .jq-tap__detail-title { margin: 0; display: flex; gap: 24px; font-family: var(--jq-font-display); font-weight: 700; font-size: clamp(30px, 3vw, 42px); line-height: 1.1; letter-spacing: -0.21px; } .jq-tap__detail-num { font-family: var(--jq-font-block); } .jq-tap__close { flex-shrink: 0; width: 44px; height: 44px; padding: 0; border: none; background: none; color: var(--jq-cream); cursor: pointer; transition: opacity var(--jq-dur) var(--jq-ease); } .jq-tap__close:hover { opacity: 0.7; } .jq-tap__close svg { width: 100%; height: 100%; } .jq-tap__detail-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; } .jq-tap__detail-media img { width: 100%; height: auto; } /* Capsule sans description ni visuel : rien à déplier, pas de curseur main */ .jq-tap--flat .jq-tap__face { cursor: default; } .jq-empty { text-align: center; font-weight: 700; opacity: 0.75; } /* --- Blocs éditoriaux ------------------------------------------------------ */ /* Les blocs éditoriaux respirent davantage que les grilles : marges latérales plus larges et laisse de lecture plus courte. */ .jq-section.jq-editorial { width: min(100% - 10rem, 1240px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; } /* Inverse l'ordre visuel sans toucher à l'ordre du document, pour que la lecture au clavier et par lecteur d'écran reste celle du gabarit. La classe est posée par le gabarit d'après le booléen « photo à gauche ». */ .jq-editorial--reverse .jq-editorial__media { order: 2; } .jq-editorial__media { width: 100%; height: auto; border-radius: 40px; } /* Titre en Prater Sans Bold, souligné d'un filet à la couleur de la page. Le filet doit s'arrêter au texte : `inline-block` y suffit tant que le titre tient sur une ligne, mais dès qu'il passe à la ligne la boîte prend la largeur disponible. C'est titres.js qui mesure alors la ligne la plus longue et fixe la largeur ; sans JavaScript, le filet reste pleine largeur. `max-width` garde la boîte dans son conteneur pendant la mesure. */ .jq-editorial__title { display: inline-block; max-width: 100%; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 3px solid var(--jq-page); font-family: var(--jq-font-display); font-weight: 700; font-size: 30px; line-height: 1.2; letter-spacing: -0.15px; /* Répartit les mots entre les lignes plutôt que de remplir la première : un titre sur deux lignes n'a plus une ligne longue et une courte. */ text-wrap: balance; color: var(--jq-dark); text-transform: capitalize; } /* Photo à droite : le texte s'aligne à droite, titre et filet compris. */ .jq-editorial--reverse .jq-editorial__body { text-align: right; } /* Mise en forme du texte saisi dans l'admin */ .jq-prose { font-size: 18px; line-height: 1.4; letter-spacing: -0.36px; } .jq-prose p { margin: 0 0 1em; } .jq-prose p:last-child { margin-bottom: 0; } /* Les liens prennent la couleur de la rubrique : vert sur Le Restaurant, bleu sur Le Bar, orange sur les Concerts. */ .jq-prose a { color: var(--jq-page); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } /* Le survol assombrit légèrement plutôt que de changer de teinte, pour ne pas emprunter la couleur d'une autre rubrique. */ .jq-prose a:hover { filter: brightness(0.85); } /* --- Partenaires ----------------------------------------------------------- */ /* Le titre étant en inline-block (filet ajusté au texte), c'est la section qui doit porter le centrage, pas le titre lui-même. */ .jq-partners { text-align: center; } /* Le titre reprend le style des blocs éditoriaux ; seule sa marge basse diffère, la grille de logos venant juste après l'introduction. */ .jq-partners__title { margin-bottom: 20px; } .jq-partners__intro { max-width: 700px; margin: 0 auto 48px; } /* Texte placé sous la grille de logos (bloc au slug « partenaires-bas »). */ .jq-partners__suite { max-width: 700px; margin: 48px auto 0; } /* Flex centré plutôt qu'une grille à colonnes égales : les logos se regroupent au milieu au lieu d'être répartis sur toute la largeur, et une rangée incomplète reste centrée. C'est le rendu de la maquette. */ .jq-partners__grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 32px 56px; max-width: 900px; margin-inline: auto; padding: 0; list-style: none; } .jq-partners__item { flex: 0 0 auto; width: 170px; } .jq-partners__item img { width: 100%; height: 110px; object-fit: contain; } /* --- Responsive ------------------------------------------------------------ */ @media (max-width: 1180px) { .jq-taps { --jq-taps-cols: 4; } .jq-tap.is-open { grid-column: span 2; } } @media (max-width: 900px) { .jq-section { width: min(100% - 3rem, 1240px); padding-block: 40px; } .jq-highlight, .jq-section.jq-editorial { width: min(100% - 3rem, 1240px); grid-template-columns: 1fr; gap: 28px; } .jq-editorial--reverse .jq-editorial__media { order: 0; } .jq-editorial--reverse .jq-editorial__body { text-align: left; } .jq-taps { --jq-taps-cols: 2; gap: 18px; } .jq-tap.is-open { grid-column: 1 / -1; } .jq-tap__detail { padding: 24px; } .jq-tap__detail-body { grid-template-columns: 1fr; gap: 24px; } .jq-taps__title { font-size: 30px; } .jq-partners__grid { gap: 24px 32px; } .jq-partners__item { width: 130px; } } /* ========================================================================== Page Restaurant Valeurs relevées sur le CSS de la maquette publiée : titres de bloc en Prater Block 46/48px, sous-titres en Prater Sans Bold 34px, lignes de carte en Prater Sans Regular 26px, descriptions en Nunito 18px. ========================================================================== */ .jq-cta-wrap { /* Le retrait latéral est porté par le paragraphe, pas par le bouton : c'est le bloc entier qui s'écarte du bord, et la pastille reste centrée dedans. */ margin: 60px 0; text-align: center; } /* Un appel à l'action n'est pas un bouton de barre de navigation : plus grand, en Prater Sans Pro plutôt qu'en Block Fill, et largement respiré. Sélecteur descendant, donc plus spécifique que `.jq-btn` seul : il l'emporte quelle que soit sa position dans le fichier — c'est ce qui le met à l'abri du piège de cascade rencontré avec la bannière. */ .jq-cta-wrap .jq-btn { font-family: var(--jq-font-display); font-weight: 700; font-size: 34px; padding: 10px 50px; } /* Sous 900px, les 50px de retrait de chaque côté et les 50px de padding font 200px de largeur avant même le texte : « Réserver une table » en 34px débordait de l'écran et faisait défiler la page horizontalement. Le retrait du paragraphe tombe, la police et le padding du bouton se resserrent progressivement plutôt que par palier, pour éviter une marche au franchissement du seuil. `margin-inline` et non `margin` : les 24px du bas doivent survivre. `max-width` est le garde-fou de dernier recours — sur un libellé plus long que ceux d'aujourd'hui, le texte passe à la ligne dans la pastille au lieu de déborder. Cette media query doit rester APRÈS les règles ci-dessus : celle de la ligne 1144 leur est antérieure et n'aurait aucun effet ici. */ @media (max-width: 900px) { .jq-cta-wrap { margin-inline: 0; } .jq-cta-wrap .jq-btn { padding: 10px clamp(20px, 8vw, 50px); font-size: clamp(24px, 6.5vw, 34px); max-width: 100%; } } /* --- Panneau de carte ------------------------------------------------------ Un aplat vert arrondi ; à l'intérieur, les photos d'un côté et une carte crème portant la liste des plats de l'autre. */ /* `--green` est la seule variante pour l'instant ; la classe existe pour permettre d'autres aplats (bleu, orange) sur les pages à venir sans toucher au gabarit. */ .jq-menu--green { background: var(--jq-green); } .jq-menu { width: min(100% - 4rem, 1360px); margin: 40px auto; padding: 40px; border-radius: 50px; background: var(--jq-green); } .jq-menu__inner { display: flex; flex-direction: column; gap: 40px; } /* Titre du panneau : Prater Block, sombre — la fonte porte déjà son relief. */ .jq-menu__title { margin: 0; font-family: var(--jq-font-block); font-weight: 400; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.1; letter-spacing: -0.12px; text-transform: capitalize; text-align: center; color: var(--jq-dark); } /* --- Une catégorie : photo(s) d'un côté, carte crème de l'autre ------------ */ /* Flex plutôt que grid : la largeur suit l'élément, pas sa position. En grille, inverser l'ordre échangeait les contenus sans échanger les colonnes, si bien qu'une catégorie « photo à droite » donnait une photo large et un texte étroit. */ .jq-cat { display: flex; align-items: flex-start; gap: 32px; } /* Alternance : une catégorie sur deux inverse photo et texte, comme la maquette. Porté par `order` pour ne pas toucher à l'ordre de lecture. */ .jq-cat--reverse { flex-direction: row-reverse; } /* Largeur fixe : les photos gardent la même emprise d'une catégorie à l'autre, quelles que soient les dimensions du fichier déposé. */ .jq-cat__media { flex: 0 0 400px; max-width: 400px; display: flex; flex-direction: column; gap: 32px; } /* 400 x 350, recadrage au centre : une photo déposée dans n'importe quel format s'inscrit dans le même cadre au lieu de déformer la mise en page. */ .jq-cat__media img { width: 100%; aspect-ratio: 400 / 350; object-fit: cover; border-radius: 40px; } /* La carte crème qui porte la liste des plats. `flex: 1` lui donne toute la largeur restante — et toute la largeur quand la catégorie n'a pas de photo, sans règle supplémentaire. */ .jq-cat__body { flex: 1; min-width: 0; padding: 40px 48px; border-radius: 40px; background: var(--jq-cream); color: var(--jq-dark); } .jq-menu__section { margin: 0 0 28px; font-family: var(--jq-font-display); font-weight: 700; font-size: 34px; line-height: 1.1; letter-spacing: -0.17px; text-transform: capitalize; color: var(--jq-dark); } /* --- Une ligne de carte ---------------------------------------------------- Intitulé à gauche, prix à droite, description en dessous. */ /* Deux colonnes : le texte à gauche, les prix alignés à droite sur toute la hauteur du bloc. La description occupe la seule colonne de gauche, elle ne peut donc pas passer sous le prix. */ .jq-dish { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; margin-bottom: 28px; } .jq-dish:last-child { margin-bottom: 0; } .jq-dish__name, .jq-dish__price { margin: 0 0 6px; font-family: var(--jq-font-display); font-weight: 400; font-size: 26px; line-height: 1.15; letter-spacing: -0.13px; } .jq-dish__name { grid-column: 1; grid-row: 1; text-wrap: balance; } /* Plusieurs formats : une ligne par format, le libellé en petit devant son prix, le tout aligné à droite comme un prix simple. */ .jq-dish__price--formats { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .jq-dish__format { margin-right: 8px; font-size: 0.72em; font-weight: 500; opacity: 0.85; } .jq-dish__price { grid-column: 2; /* La colonne des prix couvre les deux rangées et s'aligne en haut. Sans cela, un bloc de plusieurs formats — plus haut que le nom — dilaterait la première rangée et repousserait la description d'autant. */ grid-row: 1 / span 2; align-self: start; white-space: nowrap; text-align: right; } .jq-dish__desc { grid-column: 1; /* jamais sous le prix */ grid-row: 2; margin: 0; font-size: 18px; line-height: 1.45; letter-spacing: -0.36px; } /* --- Responsive ------------------------------------------------------------ */ @media (max-width: 900px) { .jq-menu { width: min(100% - 2rem, 1360px); padding: 24px; border-radius: 36px; } .jq-cat { flex-direction: column; gap: 24px; } .jq-cat--reverse { flex-direction: column; } .jq-cat__media { flex: none; max-width: none; width: 100%; } .jq-cat__body { padding: 28px 24px; border-radius: 28px; } .jq-menu__section { font-size: 26px; } .jq-dish__name, .jq-dish__price { font-size: 21px; } .jq-dish { column-gap: 20px; } } /* --- Séparateur décoratif -------------------------------------------------- Fleur peinte posée entre deux sections. Largeur volontairement modeste : c'est une respiration, pas une illustration. */ .jq-separateur { display: flex; justify-content: center; padding-block: 48px; } .jq-separateur img { width: clamp(140px, 24vw, 200px); height: auto; } /* ========================================================================== Page Concerts & Spectacles Valeurs relevées sur la maquette : cartes orange à bordure claire, pilule de catégorie, bandeau noir de date, titre Prater Sans Bold 34px. ========================================================================== */ :root { --jq-orange-pale: #F8C49C; /* bordure des cartes d'événement */ } /* --- Carrousel de bannière ------------------------------------------------- */ .jq-carrousel { position: relative; width: min(100% - 4rem, 1360px); margin: 0 auto 32px; } .jq-carrousel__piste { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 50px; } .jq-carrousel__piste::-webkit-scrollbar { display: none; } .jq-carrousel__vue { flex: 0 0 100%; margin: 0; scroll-snap-align: start; } .jq-carrousel__vue img { width: 100%; aspect-ratio: 1340 / 364; object-fit: contain; display: block; } .jq-carrousel__fleche { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: none; border-radius: 50%; background: var(--jq-cream); color: var(--jq-dark); cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); transition: opacity var(--jq-dur) var(--jq-ease); } .jq-carrousel__fleche svg { width: 26px; height: 26px; } .jq-carrousel__fleche--prec { left: 20px; } .jq-carrousel__fleche--suiv { right: 20px; } .jq-carrousel__fleche:disabled { opacity: 0.35; cursor: default; } /* --- Filtres --------------------------------------------------------------- */ .jq-filtres { display: flex; flex-direction: column; gap: 14px; padding-block: 32px; } .jq-filtres__titre { margin: 0; font-weight: 700; font-size: 18px; letter-spacing: -0.36px; } .jq-filtres__ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } .jq-champ, .jq-pilule { padding: 12px 24px; border: 2px solid var(--jq-page); border-radius: var(--jq-radius-pill); background: transparent; color: var(--jq-dark); font: inherit; font-size: 17px; line-height: 1.2; text-align: center; cursor: pointer; transition: background-color var(--jq-dur) var(--jq-ease), color var(--jq-dur) var(--jq-ease); } /* Le champ occupe toute la place restante, « Événements passés » garde sa largeur propre à droite. La loupe est posée par-dessus, à gauche du texte de substitution centré. */ .jq-recherche { position: relative; display: flex; flex: 1; min-width: 240px; } .jq-recherche__loupe { position: absolute; transition: opacity var(--jq-dur) var(--jq-ease); top: 50%; left: 50%; /* Décalée à gauche du texte de substitution, lui-même centré. */ transform: translate(-9.5em, -50%); width: 22px; height: 22px; color: var(--jq-page); pointer-events: none; } .jq-champ { width: 100%; cursor: text; } /* Dès que le champ est actif ou rempli, le texte reprend sa place à gauche et la loupe n'a plus lieu d'être. */ .jq-recherche:focus-within .jq-recherche__loupe, .jq-recherche:has(.jq-champ:not(:placeholder-shown)) .jq-recherche__loupe { opacity: 0; } /* Les pilules de catégorie se répartissent la largeur à parts égales. */ #jq-filtres-cat .jq-pilule { flex: 1; } .jq-pilule { display: inline-flex; align-items: center; justify-content: center; } .jq-pilule:hover { background: rgba(0, 0, 0, 0.06); } .jq-pilule.is-active { background: var(--jq-page); border-color: var(--jq-page); color: var(--jq-cream); } /* --- Sections mensuelles --------------------------------------------------- */ .jq-section.jq-mois { /* Marges latérales plus larges que les autres sections : ~80px de chaque côté, comme la maquette. */ width: min(100% - 10rem, 1360px); } .jq-mois[hidden] { display: none; } /* Ce filet-là court sur toute la largeur, contrairement à celui des titres de blocs éditoriaux : il sépare deux mois de programmation. */ .jq-mois__titre { margin: 0 0 40px; padding-bottom: 12px; border-bottom: 3px solid var(--jq-page); font-family: var(--jq-font-display); font-weight: 700; font-size: 34px; line-height: 1.2; letter-spacing: -0.17px; text-align: center; text-transform: capitalize; color: var(--jq-dark); } /* --- Grille et carte d'événement ------------------------------------------- Carte orange bordée d'orange pâle. Toutes les capsules ont la même hauteur : les zones de texte à hauteur variable (titre, premières parties) ont une hauteur réservée, calculée sur deux lignes. */ .jq-events { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin: 0; padding: 0; list-style: none; align-items: stretch; } .jq-event[hidden] { display: none; } .jq-event__carte { /* Taille de repos des titres de capsule, et plafond : concerts.js lit cette valeur et ne fait que descendre à partir d'elle. */ --jq-event-titre: 34px; --jq-event-intro: 17px; position: relative; height: 100%; display: grid; /* date · en-tête (titre + style) · visuel (absorbe le reste) · premières parties */ grid-template-rows: auto auto 1fr auto; justify-items: center; /* Écart minimal : chaque zone gère ses propres marges, plus lisibles qu'un gap uniforme qui écarterait aussi le style de son titre. */ gap: 0; padding: 30px 24px 16px; border: 18px solid var(--jq-orange-pale); border-radius: 50px; background: var(--jq-orange); background-clip: padding-box; color: var(--jq-cream); text-align: center; transition: transform var(--jq-dur) var(--jq-ease), box-shadow var(--jq-dur) var(--jq-ease); } /* Au repos, aucune ombre : elle n'apparaît qu'au survol, comme les boutons. */ .jq-event__carte:hover, .jq-event__carte:focus-visible { transform: translateY(-2px); box-shadow: 4px 6px 0 #000; } /* Le titre secondaire est incrusté dans la bordure haute : même orange pâle, il prolonge le cadre plutôt que de se poser dessus. */ .jq-event__secondaire { position: absolute; top: -8px; /* remonte jusqu'au bord extérieur */ left: 50%; transform: translateX(-50%); max-width: calc(100% - 24px); padding: 2px 26px 4px; border-radius: 0 0 22px 22px; background: var(--jq-orange-pale); color: var(--jq-cream); font-family: var(--jq-font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.09px; line-height: 1.2; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Bandeau noir de la date */ .jq-event__date { padding: 3px 6px; background: #000; font-family: var(--jq-font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.09px; } /* En-tête : titre + ligne de style, celle-ci toujours collée au titre. La hauteur n'est pas réservée en CSS : concerts.js aligne les en-têtes d'une même rangée sur le plus haut d'entre eux, si bien qu'une rangée dont tous les titres tiennent sur une ligne reste compacte. Sans JavaScript, les capsules d'une rangée peuvent être légèrement décalées — dégradation acceptable. */ .jq-event__entete { display: flex; flex-direction: column; align-items: center; /* Centré verticalement : quand la rangée réserve deux lignes de titre et que celui-ci n'en occupe qu'une, le bloc se place au milieu plutôt que de rester collé en haut. */ justify-content: center; /* Aucun écart : le préfixe, le titre et la ligne de style se suivent au plus près, leurs interlignes suffisent à les séparer. */ gap: 0; width: 100%; margin-top: 10px; } /* « intro par » et autres mentions précédant le titre : même traitement que la ligne de style, en minuscules et en noir. */ .jq-event__prefixe { font-family: var(--jq-font-display); font-weight: 700; font-size: 18px; line-height: 1.2; letter-spacing: -0.09px; text-transform: lowercase; color: #000; } .jq-event__titre { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 26px; row-gap: 0; font-family: var(--jq-font-display); font-weight: 700; font-size: var(--jq-event-titre); line-height: 1.1; letter-spacing: -0.15px; text-transform: uppercase; text-wrap: balance; } .jq-event__style { font-family: var(--jq-font-display); font-weight: 400; font-size: 18px; line-height: 1.2; letter-spacing: -0.09px; color: #000; } .jq-event__media { display: block; width: 82%; margin-block: 12px 8px; } /* 300 x 250 bordure comprise, soit 6/5 : `box-sizing: border-box` étant posé globalement, l'aspect-ratio porte bien sur la boîte entière. */ /* Le ratio est porté par le cadre, l'image le remplit et déborde : c'est `object-position`, posé en ligne depuis le point focal de l'événement, qui décide de la partie conservée. Sans point focal, le navigateur centre. */ .jq-event__media img { width: 100%; aspect-ratio: 6 / 5; object-fit: cover; border: 12px solid var(--jq-orange-pale); border-radius: 40px; background-clip: padding-box; } /* Premières parties : espacées largement, jamais séparées par des virgules. Comme l'en-tête, la hauteur est alignée par rangée en JavaScript : une rangée sans aucune première partie n'en réserve pas la place. */ /* Faute d'image, le cadre subsiste : une capsule sans média perdrait sa hauteur et décalerait les autres de sa rangée. */ .jq-event__media-vide { display: block; width: 100%; aspect-ratio: 6 / 5; background: linear-gradient(150deg, var(--jq-orange-pale), var(--jq-cream)); border: 12px solid var(--jq-orange-pale); border-radius: 40px; background-clip: padding-box; } .jq-event__intro { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 28px; row-gap: 2px; margin-top: 2px; font-family: var(--jq-font-display); font-weight: 700; font-size: var(--jq-event-intro); line-height: 1.2; letter-spacing: -0.09px; text-transform: uppercase; text-wrap: balance; } /* --- Responsive ------------------------------------------------------------ */ @media (max-width: 1180px) { .jq-events { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1180px) { .jq-section.jq-mois { width: min(100% - 4rem, 1360px); } } @media (max-width: 760px) { .jq-section.jq-mois { width: min(100% - 2rem, 1360px); } .jq-events { grid-template-columns: 1fr; gap: 28px; } .jq-carrousel { width: min(100% - 2rem, 1360px); } .jq-carrousel__fleche { width: 44px; height: 44px; } .jq-mois__titre { font-size: 26px; } .jq-champ { min-width: 0; flex: 1; } } /* --- Encart Archives ------------------------------------------------------- Fleur peinte à gauche, texte et bouton à droite. */ .jq-archives { display: grid; grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr); gap: 48px; align-items: center; max-width:700px; } .jq-archives__body { min-width: 0; } .jq-archives__media { max-width: 400px; height: auto; justify-self: center; padding-right:50px; } .jq-archives__titre { margin: 0 0 16px; font-family: var(--jq-font-display); font-weight: 400; font-size: 26px; line-height: 1.1; letter-spacing: -0.17px; color: var(--jq-dark); } .jq-archives__cta { margin: 24px 0 0; font-size: 34px; font-weight: 700;} @media (max-width: 900px) { .jq-archives { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 24px; } } /* --- Fiche d'un événement -------------------------------------------------- Même capsule que dans la grille, en plus grand : bordure orange pâle, coins arrondis, titre secondaire incrusté dans la bordure haute. */ .jq-fiche { position: relative; width: min(100% - 6rem, 1360px); margin: 0 auto 40px; padding: 48px 44px 44px; border: 18px solid var(--jq-orange-pale); border-radius: 50px; background: var(--jq-orange); background-clip: padding-box; color: var(--jq-cream); } /* Incrusté dans la bordure haute, comme la pilule des capsules. */ .jq-fiche__secondaire { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 48px); margin: 0; padding: 4px 30px 8px; border-radius: 0 0 22px 22px; background: var(--jq-orange-pale); font-family: var(--jq-font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.09px; line-height: 1.2; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jq-fiche__corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 48px; align-items: start; } /* Sans affiche, le texte occupe toute la largeur. */ .jq-fiche__corps:not(:has(.jq-fiche__media)) { grid-template-columns: 1fr; } .jq-fiche__infos { min-width: 0; } .jq-fiche__titre { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 26px; margin: 0; font-family: var(--jq-font-display); font-weight: 700; font-size: clamp(30px, 3vw, 42px); line-height: 1.1; letter-spacing: -0.21px; text-transform: uppercase; text-wrap: balance; } .jq-fiche__prefixe { font-size: 18px; letter-spacing: -0.09px; text-transform: lowercase; color: #000; } /* Bandeau noir de la date, comme sur les capsules */ .jq-fiche__date { display: inline-block; margin: 18px 0 0; padding: 3px 10px; background: #000; font-family: var(--jq-font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.09px; } .jq-fiche__texte { margin-top: 20px; font-size: 18px; line-height: 1.5; letter-spacing: -0.36px; } .jq-fiche__texte p { margin: 0 0 1em; } .jq-fiche__texte p:last-child { margin-bottom: 0; } .jq-fiche__sous-titre { margin: 24px 0 6px; font-family: var(--jq-font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.11px; text-transform: capitalize; } /* Mentions qui encadrent la liste des artistes : « intro par » au-dessus, « suivi d'une Jam session » en dessous. Même traitement que la ligne de style — petit, noir, minuscules — pour rester en retrait des noms. */ .jq-fiche__mention { margin: 24px 0 0; font-family: var(--jq-font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.09px; text-transform: lowercase; color: #000; } .jq-fiche__mention--suite { margin-top: 20px; } /* Le nom de la jam ressort en capitales, comme les noms d'artistes. */ .jq-fiche__mention strong { text-transform: uppercase; } /* Nom d'artiste, suivi à droite de sa ligne « type PAYS styles » en petit et en noir, comme sur les capsules. */ .jq-fiche__artiste { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 14px; margin: 28px 0 4px; } /* Collé à la mention qui le précède, le cas échéant. */ .jq-fiche__mention + .jq-fiche__artiste { margin-top: 2px; } .jq-fiche__artiste-nom { font-family: var(--jq-font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.11px; text-transform: uppercase; } .jq-fiche__artiste-ligne { font-family: var(--jq-font-display); font-weight: 700; font-size: 16px; letter-spacing: -0.08px; color: #000; } /* Icônes de réseaux sociaux sous le nom de l'artiste */ .jq-reseaux { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; } .jq-reseaux a { display: grid; place-items: center; width: 22px; height: 22px; color: var(--jq-cream); transition: opacity var(--jq-dur) var(--jq-ease); } .jq-reseaux a:hover { opacity: 0.7; } .jq-reseaux svg { width: 100%; height: 100%; } /* Lien de prélocation, sous les tarifs */ .jq-fiche__preloc { margin: 12px 0 0; font-size: 18px; letter-spacing: -0.36px; } .jq-fiche__preloc a { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .jq-fiche__preloc svg { width: 22px; height: 22px; flex-shrink: 0; } /* Tarifs : libellé à gauche, montant à droite, alignés en colonne. */ .jq-fiche__prix { margin: 0; padding: 0; list-style: none; max-width: 320px; font-size: 18px; line-height: 1.6; letter-spacing: -0.36px; } .jq-fiche__prix li { display: flex; justify-content: space-between; gap: 24px; } .jq-fiche__prix-label { min-width: 0; } .jq-fiche__prix-montant { font-weight: 700; white-space: nowrap; } /* Premières parties : espacées, jamais séparées par des virgules. */ .jq-fiche__intro { display: flex; flex-wrap: wrap; column-gap: 28px; row-gap: 2px; margin: 0; font-family: var(--jq-font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.1px; text-transform: uppercase; } .jq-fiche__lien { margin: 24px 0 0; font-size: 18px; letter-spacing: -0.36px; } .jq-fiche__lien a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } /* 550 x 480 bordure comprise, soit 55/48. `box-sizing: border-box` étant posé globalement, le ratio porte bien sur la boîte entière. */ .jq-fiche__media { justify-self: end; width: 100%; max-width: 550px; } /* Même image, autre ratio : seul le cadre change, le point focal reste valable (voir _event_image.html). */ .jq-fiche__media img { width: 100%; aspect-ratio: 55 / 48; object-fit: cover; border: 12px solid var(--jq-orange-pale); border-radius: 40px; background-clip: padding-box; } @media (max-width: 900px) { .jq-fiche { width: min(100% - 2rem, 1360px); padding: 40px 20px 24px; border-width: 12px; border-radius: 36px; } .jq-fiche__secondaire { top: -12px; } .jq-fiche__corps { grid-template-columns: 1fr; gap: 28px; } } /* --- Plan du lieu (page À propos) ------------------------------------------ Le plan prime sur le texte : il occupe la plus grande colonne, le texte l'accompagne. Sans image, le texte se centre sur toute la largeur. */ .jq-plan { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 56px; align-items: center; } .jq-plan:not(:has(.jq-plan__media)) { grid-template-columns: 1fr; justify-items: center; text-align: center; } .jq-plan__media { width: 100%; height: auto; border-radius: 40px; } .jq-plan__body { min-width: 0; } .jq-plan__titre { display: inline-block; max-width: 100%; margin: 0 0 20px; padding-bottom: 12px; border-bottom: 3px solid var(--jq-page); font-family: var(--jq-font-display); font-weight: 700; font-size: 30px; line-height: 1.2; letter-spacing: -0.15px; text-wrap: balance; color: var(--jq-dark); } @media (max-width: 900px) { .jq-plan { grid-template-columns: 1fr; gap: 28px; } /* Le titre passe au-dessus du plan. Il vit dans .jq-plan__body, donc hors de portée d'un `order` tant que ce bloc existe : `display: contents` efface la boîte intermédiaire et fait du titre et du texte des cellules de la grille, que l'on peut alors ordonner séparément. Résultat : titre, image, texte. */ .jq-plan__body { display: contents; } .jq-plan__titre { order: -1; /* L'écart est désormais celui de la grille ; la marge du titre s'y ajouterait. */ margin-bottom: 0; } } /* --- Réservation (widget Zenchef) ------------------------------------------ */ .jq-reserver { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-block: 24px 56px; text-align: center; } .jq-reserver__titre-wrap { text-align: center; } .jq-reserver__titre { display: inline-block; max-width: 100%; margin: 0 0 10px; padding-bottom: 12px; border-bottom: 3px solid var(--jq-page); font-family: var(--jq-font-display); font-weight: 700; font-size: 34px; line-height: 1.2; letter-spacing: -0.17px; color: var(--jq-dark); } .jq-reserver__horaires { margin: 0; font-family: var(--jq-font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.11px; color: var(--jq-dark); } /* Avis d'empreinte bancaire : visible sans être alarmant. */ .jq-reserver__avis { max-width: 640px; margin: 0; padding: 14px 24px; border: 2px solid var(--jq-page); border-radius: 28px; font-size: 17px; line-height: 1.45; letter-spacing: -0.34px; } .jq-reserver__bascule { margin: 0; font-size: 17px; letter-spacing: -0.34px; } .jq-reserver__bascule a { font-weight: 700; color: var(--jq-page); text-decoration: underline; text-underline-offset: 3px; } /* Dimensions calées sur la carte du widget : au-delà, l'iframe ne montre que le fond de la page Zenchef, inaccessible depuis ici (contenu d'un autre domaine). `min()` plutôt qu'une largeur fixe : 480px sur grand écran, mais jamais plus que la place disponible, sinon l'iframe déborderait sur mobile. */ .jq-reserver__frame { width: min(480px, 100%); height: 565px; margin-top: 10px; border: 0; } /* Sous 520px, le widget se réorganise et s'allonge : sans cette hauteur supplémentaire, le tunnel défilerait à l'intérieur de l'iframe. */ @media (max-width: 520px) { .jq-reserver__frame { height: 680px; } } /* --- Décor de fond de la page À propos ------------------------------------- Deux grandes fleurs pâles en filigrane, à gauche et à droite. Portées par des pseudo-éléments sur plutôt que par des : ce sont des ornements, ils n'ont pas à figurer dans le document ni à être annoncés aux lecteurs d'écran. `absolute` et non `fixed` : elles sont ancrées à un endroit précis de la page et défilent avec elle, au lieu de rester collées à l'écran. Les deux variables ci-dessous règlent leur hauteur d'ancrage, mesurée depuis le haut de la page. À ajuster une fois les visuels en place. */ .jq-page--apropos { position: relative; /* `hidden` empêche une fleur qui déborde de créer un défilement horizontal, sans bloquer le défilement vertical. */ overflow-x: hidden; --jq-deco-gauche-top: 2000px; --jq-deco-droite-top: 1000px; } .jq-page--apropos::before, .jq-page--apropos::after { content: ""; position: absolute; z-index: -1; width: clamp(220px, 49vw, 800px); aspect-ratio: 1 / 2; background-repeat: no-repeat; background-size: contain; pointer-events: none; } .jq-page--apropos::before { top: var(--jq-deco-gauche-top); left: 0; background-image: url("../img/deco-apropos-gauche.06d81c7d9807.png"); background-position: left top; width: clamp(220px, 32vw, 800px); } .jq-page--apropos::after { top: var(--jq-deco-droite-top); right: 0; background-image: url("../img/deco-apropos-droite.428cfd966cbd.png"); background-position: right top; } /* Sous 1100px, le contenu occupe toute la largeur : le décor passerait dessous et brouillerait la lecture. */ @media (max-width: 1100px) { .jq-page--apropos::before, .jq-page--apropos::after { display: none; } } /* --- Grille des archives --------------------------------------------------- Uniquement les affiches, quatre par rangée. Elles ont des proportions variables : `aspect-ratio` et `object-fit: cover` les ramènent au même format, sinon la grille ondule d'une ligne à l'autre. */ .jq-archive { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin: 0; padding: 0; list-style: none; } .jq-archive__item[hidden] { display: none; } /* Format A3 paysage (420 x 297), celui des affiches. `contain` plutôt que `cover` : une affiche d'un autre format s'inscrit entière dans le cadre au lieu d'être recoupée — mieux vaut une marge qu'un titre tronqué. */ .jq-archive__item img { width: 100%; aspect-ratio: 420 / 297; object-fit: contain; border-radius: 30px; transition: transform var(--jq-dur) var(--jq-ease), box-shadow var(--jq-dur) var(--jq-ease); } .jq-archive__item a:hover img, .jq-archive__item a:focus-visible img { transform: translateY(-2px); box-shadow: 4px 6px 0 #000; } @media (max-width: 760px) { .jq-archive { grid-template-columns: 1fr; gap: 24px; } } /* ---------- Conditions de service d'une catégorie ---------- */ /* Lignes « MIDI … / SOIR … » sous le titre d'une catégorie : elles expliquent l'écart de prix entre les deux services (frites incluses et service à table le midi, self-service le soir) sans dupliquer les catégories. Les suppléments s'affichent dans la ligne de LEUR service, ce qui indique au client qu'un « frites +5.– » ne concerne que le soir. */ .jq-cat-notes { list-style:none; margin:.2rem 0 1.1rem; padding:0; } .jq-cat-notes__item { font-size:.9rem; line-height:1.5; margin:.15rem 0; } .jq-cat-notes__label { display:inline-block; min-width:3.2rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:.75rem; color:var(--jq-green); } .jq-cat-notes__text { color:var(--jq-ink, #333); } .jq-cat-notes__extra { color:var(--jq-green); font-weight:600; } .jq-cat-notes__extra::before { content:" · "; color:#bbb; font-weight:400; } /* Légende des deux prix, dans la section « Servi midi et soir ». */ .jq-menu__legend { margin: -.2rem auto 2rem; max-width: 46rem; text-align: center; font-style: italic; font-size: 1.08rem; line-height: 1.55; color: #fff; } .jq-menu__legend strong { font-weight: 700; font-style: italic; } /* --- Capsules Stand-up / Impro / Théâtre / Exposition : couleurs inversées ------------------------- L'orange foncé passe en bordure, l'orange pâle en fond. Le ciblage se fait sur data-cats (posé par _event_card.html avec les slugs des catégories) : aucune classe supplémentaire à gérer côté template. Le texte passe en gris foncé : le crème d'origine tombe à 1.4:1 de contraste sur l'orange pâle, donc illisible ; le gris remonte à 5.4:1. */ .jq-event[data-cats~="stand-up"] .jq-event__carte, .jq-event[data-cats~="impro"] .jq-event__carte, .jq-event[data-cats~="theatre"] .jq-event__carte, .jq-event[data-cats~="exposition"] .jq-event__carte { border-color: var(--jq-orange); background: var(--jq-orange-pale); } /* Titre en noir pur (et non le gris de la charte) : sur l'orange pâle il doit trancher franchement. */ .jq-event[data-cats~="stand-up"] .jq-event__titre, .jq-event[data-cats~="impro"] .jq-event__titre, .jq-event[data-cats~="theatre"] .jq-event__titre, .jq-event[data-cats~="exposition"] .jq-event__titre { color: #000; } /* Date + horaires : la pastille a son propre fond noir, le texte reste blanc. */ .jq-event[data-cats~="stand-up"] .jq-event__date, .jq-event[data-cats~="impro"] .jq-event__date, .jq-event[data-cats~="theatre"] .jq-event__date, .jq-event[data-cats~="exposition"] .jq-event__date { color: #fff; } /* Ligne de style sous le titre. */ .jq-event[data-cats~="stand-up"] .jq-event__style, .jq-event[data-cats~="impro"] .jq-event__style, .jq-event[data-cats~="theatre"] .jq-event__style, .jq-event[data-cats~="exposition"] .jq-event__style { color: #fff; } /* Cadre du visuel : inversé comme celui de la capsule. */ .jq-event[data-cats~="stand-up"] .jq-event__media img, .jq-event[data-cats~="impro"] .jq-event__media img, .jq-event[data-cats~="theatre"] .jq-event__media img, .jq-event[data-cats~="exposition"] .jq-event__media img, .jq-event[data-cats~="stand-up"] .jq-event__media-vide, .jq-event[data-cats~="impro"] .jq-event__media-vide, .jq-event[data-cats~="theatre"] .jq-event__media-vide, .jq-event[data-cats~="exposition"] .jq-event__media-vide { border-color: var(--jq-orange); } /* Le titre secondaire est incrusté dans la bordure : il suit sa couleur. */ .jq-event[data-cats~="stand-up"] .jq-event__secondaire, .jq-event[data-cats~="impro"] .jq-event__secondaire, .jq-event[data-cats~="theatre"] .jq-event__secondaire, .jq-event[data-cats~="exposition"] .jq-event__secondaire { background: var(--jq-orange); color: var(--jq-cream); } /* --- Date + horaires : toujours sur une seule ligne ------------------------ Le bandeau passait à la ligne dès que la carte devenait étroite (3 colonnes entre 1180 et ~1400px, ou téléphone en 1 colonne). Mesure faite sur le rendu : un caractère occupe ~0,514 × la taille de fonte, et la chaîne la plus longue en compte 30 (« MERCREDI 02.09 | 19h00 - 01h00 »), soit ~290px à 18px — pour ~262px disponibles au pire cas. La taille devient donc fluide, plafonnée à 18px (aucun changement sur les grands écrans) et calibrée par palier, car la largeur de carte ne suit pas la largeur d'écran de façon continue : elle bondit à chaque changement de nombre de colonnes. */ .jq-event__date { white-space: nowrap; font-size: clamp(13px, 1.3vw, 18px); /* 3 colonnes */ } @media (max-width: 1180px) { /* 2 colonnes */ .jq-event__date { font-size: clamp(13px, 1.9vw, 18px); } } @media (max-width: 760px) { /* 1 colonne */ .jq-event__date { font-size: clamp(11px, 3.8vw, 18px); } }