/* ============================================================ HALLES VÉDASIENNES · THÈME — la seule source des couleurs et des polices. Jumeau de `theme-h610.css`. ------------------------------------------------------------ SOURCE : « Halles Vedasiennes - Atelier 2 (charte imprimee) », la maquette validée par Gabriel (09/09/2026). Les cinq couleurs de base sont ses réglages enregistrés ; les tons dérivés sont recalculés ici avec SES formules (mélange + recherche de lisibilité), pas recopiés des valeurs figées dans le HTML — celles-ci datent d'un rendu antérieur, avec un autre jaune et un autre cuivre, et ne correspondent plus. ⚠️ `shell.css` est copié du 610 SANS AUCUNE MODIFICATION. Il ne connaît que les noms de jetons du 610 (`--c-orange`, `--c-yellow`, `--c-blue`…). Ces noms ne décrivent donc plus une couleur mais un RÔLE, et c'est ici que le rôle reçoit sa couleur védasienne. Le tableau de correspondance est juste en dessous : c'est la seule chose à lire pour comprendre pourquoi `--c-orange` vaut du bleu. ============================================================ */ /* ------------------------------------------------------------ CORRESPONDANCE DES RÔLES (nom du 610 → rôle → couleur HV) --c-orange accent primaire : fond d'en-tête, boutons pleins, texte d'accent sur fond clair → BLEU --c-orange-deep survol de l'accent primaire → bleu foncé --c-yellow accent sur fond sombre, aplats secondaires → JAUNE --c-blue liens dans le texte courant, anneaux de focus, puces d'information → CUIVRE lisible --c-mint aplat froid (vignettes d'étaliers) → bleu délavé --c-magenta aplat chaud (vignettes d'étaliers) → cuivre brut --c-lavender aplat clair (vignettes d'étaliers) → sable --c-cream surface de carte → crème ombré --c-stone surface neutre, filets, réserves photo → sable ombré --c-ink encre → encre --c-paper fond de page → papier ------------------------------------------------------------ */ :root { /* ---- Les cinq couleurs de la charte, telles qu'enregistrées ---- */ --hv-bleu: #2E6279; --hv-encre: #17323C; /* ⚠️ LE PAPIER N'EST PLUS LE #F7F1E4 DE LA MAQUETTE ÉCRAN. Décision de Gabriel, 09/09/2026 : c'est le crème du PLAN IMPRIMÉ qui devient le clair du site. Voir le bloc « un seul crème » plus bas — la raison tient en trois lignes et il faut l'avoir lue avant de toucher à cette valeur. */ --hv-papier: #FDF8EA; --hv-jaune: #FFC61E; --hv-cuivre: #C4652A; /* ---- Les tons dérivés, recalculés depuis les cinq ci-dessus ---- card = papier mélangé 7 % d'encre stone = papier mélangé 14 % d'encre bord = card mélangé 11 % d'encre ink2 = encre mélangée 42 % de papier, éclaircie jusqu'à 4,5:1 cuivreT / jauneT = la couleur poussée jusqu'à 4,5:1 sur son fond */ --hv-card: #EDEADE; /* 5,66:1 avec le bleu */ --hv-stone: #DDDCD2; /* réserves photo, filets */ --hv-bord: #D5D6CC; /* liseré de carte */ --hv-encre2: #5D6767; /* 4,84:1 sur les cartes */ --hv-cuivreT: #974E21; /* 5,08:1 sur les cartes */ --hv-jauneT: #FFD351; /* 4,68:1 sur le bleu — petit texte */ --hv-bleu-fonce:#1F4E62; /* Le vert des pastilles clignotantes. La charte imprimée n'en contient pas — il est ajouté pour un seul usage : dire « c'est ouvert » et « ça arrive ». Les deux pastilles sont posées sur l'encre, d'où un seul ton : 5,67:1 sur #17323C. */ --hv-vert: #3DBF63; /* ---- UN SEUL CRÈME, ET C'EST CELUI DU PLAN ------------------ `--hv-plan` a été supprimé : il valait exactement `--hv-papier`, et deux noms pour une couleur finissent toujours par diverger. D'OÙ VIENT CETTE COULEUR. C'est le fond du dessin du plan, relevé au pixel sur `PLAN.webp` : six points de mesure — les quatre coins de la zone claire, le bord droit, le bas — donnent tous #FDF8EA, et cette teinte couvre 86 350 des pixels de fond. POURQUOI ELLE REMPLACE LE #F7F1E4 DE LA MAQUETTE. `shell.css` peint le `body` ET le bandeau des étaliers avec le même `--c-paper` : changer l'un sans l'autre ouvrait une couture au milieu de la page. Et garder trois crèmes voisins — le papier, le plan, les cartes — revenait à en avoir trois qu'on ne distingue pas mais qui se trahissent aux raccords. Il n'y en a donc plus qu'un. CE QUE ÇA CHANGE, MESURÉ : rien en négatif. Le papier passe de 5,94 à 6,30:1 sur le bleu, de 11,98 à 12,70:1 sur l'encre ; les sur-titres cuivre de 4,81 à 5,08:1 sur les cartes. Les tons dérivés (`card`, `stone`, `bord`, `encre2`) sont recalculés avec les mêmes formules que la maquette, depuis ce nouveau papier. ⚠️ CE N'EST PAS #FCF3DB, essayé avant : à 4 % de clarté près, mais plus jaune. Sur un aplat, l'œil repère un écart de teinte bien avant un écart de clarté — et le raccord du plan se voyait. ⚠️ POUR REVENIR EN ARRIÈRE : remettre `--hv-papier` à #F7F1E4 et les cinq tons dérivés à leurs valeurs d'avant, notées dans l'historique. Une seule ligne ne suffit pas, les dérivés en dépendent. */ --hv-bleu-delave:#9DB1B4; --hv-sable: #F3D6AA; /* ---- Les jetons que lit shell.css ---- */ --c-orange: var(--hv-bleu); --c-orange-deep: var(--hv-bleu-fonce); --c-yellow: var(--hv-jaune); --c-mint: var(--hv-bleu-delave); --c-magenta: var(--hv-cuivre); --c-blue: var(--hv-cuivreT); --c-lavender: var(--hv-sable); --c-cream: var(--hv-card); --c-ink: var(--hv-encre); --c-paper: var(--hv-papier); --c-stone: var(--hv-stone); /* ---- Les polices ---- La maquette n'en retient que DEUX là où le 610 en a cinq : Josefin Sans pour tout ce qui titre, Figtree pour tout ce qui se lit. Les trois rôles restants du 610 sont donc rabattus sur l'une des deux plutôt que d'introduire des familles que la charte HV n'a jamais demandées. ⚠️ `--f-sticker` n'est utilisé qu'une fois dans shell.css, et la DA védasienne n'a PAS d'autocollants : elle a les rayures du torchon (voir `.rayures` plus bas). Le rôle est conservé pour que shell.css ne tombe pas sur un jeton vide. */ --f-primary: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif; --f-etiq: 'Josefin Sans', 'Figtree', sans-serif; --f-mono: 'Figtree', system-ui, sans-serif; --f-affiche: 'Josefin Sans', 'Figtree', sans-serif; --f-sticker: 'Josefin Sans', 'Figtree', sans-serif; } /* ---- Alias canoniques (sites_publics.md §11.2) ---- */ :root { --color-primary: var(--c-orange); --color-accent: var(--c-blue); --color-yellow: var(--c-yellow); --color-mint: var(--c-mint); --color-magenta: var(--c-magenta); --color-lavender: var(--c-lavender); --color-cream: var(--c-cream); --color-ink: var(--c-ink); --color-paper: var(--c-paper); --color-stone: var(--c-stone); --font-affiche: var(--f-affiche); --font-primary: var(--f-primary); --font-label: var(--f-etiq); --font-mono: var(--f-mono); --font-sticker: var(--f-sticker); } /* ---- Emplacements photo réservés ---- Tant qu'aucune photo n'est chargée, on n'affiche pas un trou : on affiche un aplat de la charte. Le site est présentable dès le premier jour et se remplit par l'admin. */ :root { --placeholder-1: var(--hv-card); --placeholder-2: var(--hv-sable); --placeholder-3: var(--hv-bleu-delave); --placeholder-4: var(--hv-stone); } /* ============================================================ TROIS CORRECTIONS DE RÔLE ------------------------------------------------------------ shell.css confond sous un seul jeton deux usages que la charte HV distingue. Plutôt que de modifier shell.css — qui est le fichier partagé par les deux sites — on rectifie ici, en trois règles, et elles sont toutes commentées. ⚠️ C'EST À CAUSE DE CE BLOC que `layout.php` charge cette feuille APRÈS `shell.css`, à l'inverse du 610. Les trois règles ont la même spécificité que celles qu'elles corrigent : chargées avant, elles perdent la cascade et ne s'appliquent pas — sans erreur, juste une pastille de la mauvaise couleur. Constaté à l'aperçu le 09/09/2026, corrigé le jour même. Les variables, elles, se résolvent quel que soit l'ordre. ============================================================ */ /* 1. Le jaune de la charte ne passe pas sur le bleu en petit texte (4,25:1 pour un seuil de 4,5). La maquette en dérive un ton éclairci pour ces cas-là, le jaune brut restant sur les aplats et les titres. Ici : les liens du menu au survol et à l'état actif, seuls petits textes jaunes posés sur le bleu. */ .site-header .desktop-nav a:hover, .site-header .desktop-nav a.active { color: var(--hv-jauneT); } /* 2. La pastille « Sport » : shell.css la peint en `--c-blue`, qui vaut du cuivre ici, avec du blanc dessus — 3,3:1, illisible. La maquette la veut bleue à texte crème : 5,94:1. */ .event-badge.sport { background: var(--hv-bleu); color: var(--hv-papier); } /* 3. Le bouton plein en cuivre (« Y aller » dans la maquette) est le seul aplat de la charte qui n'atteigne pas 4,5:1, quel que soit le texte posé dessus — 3,56:1 au mieux, avec le crème. On ne touche pas à la couleur : on lui donne le corps de texte à partir duquel le seuil AA tombe à 3:1 (18,66 px gras). ⚠️ Ne pas réutiliser `--c-magenta` en aplat sous 18 px. */ .btn.cuivre { background: var(--hv-cuivre); color: var(--hv-papier); font-size: 19px; font-weight: 700; } /* ============================================================ LES RAYURES DU TORCHON — le motif propre à la charte HV ------------------------------------------------------------ Ce que les autocollants sont au 610, les rayures le sont aux Halles Védasiennes : le motif qui signe les pages. Il vient de la plaquette imprimée. Une seule déclaration, réutilisable en filet horizontal partout où le 610 pose une bande d'aplat. ============================================================ */ :root { --hv-rayures: repeating-linear-gradient(90deg, var(--hv-jaune) 0 22px, var(--hv-papier) 22px 34px, var(--hv-cuivre) 34px 52px, var(--hv-papier) 52px 62px, var(--hv-bleu-delave) 62px 74px, var(--hv-papier) 74px 86px); } .rayures { display: block; width: 100%; /* 8 px et non 14 : demande de Gabriel, 09/09/2026. À 14 px le motif pesait comme un bloc à part entière ; à 8 px il redevient ce qu'il est — un filet qui ouvre une section. ⚠️ SEULE LA HAUTEUR CHANGE. Les largeurs du motif (22, 12, 18, 10, 12, 12 px) restent celles de la plaquette imprimée : les toucher changerait le rythme des rayures, pas leur épaisseur. */ height: 8px; background: var(--hv-rayures); line-height: 0; } /* ============================================================ RETOUR MAQUETTE — 09/09/2026, deuxième passe ------------------------------------------------------------ Douze écarts relevés par Gabriel entre l'accueil rendu et « Halles Vedasiennes - Atelier 2 (charte imprimee) ». Tout est corrigé ICI, jamais dans `shell.css` : il est partagé avec le 610, et une correction védasienne qui y descendrait changerait l'autre site du même coup. C'est aussi pourquoi cette feuille est chargée APRÈS lui (voir `layout.php`). ============================================================ */ /* ---- 1 · PAS DE LIGNE NOIRE SOUS LE MENU -------------------- Le 610 ferme son en-tête par un filet d'encre de 2 px. Aux Halles Védasiennes, ce rôle est tenu par les rayures du torchon, qui suivent immédiatement : les deux ensemble font un double trait. */ .site-header { border-bottom: 0; } /* ---- 2 · LE FILET DU BANDEAU « PROCHAINEMENT » EST JAUNE ----- `shell.css` le peint avec `--c-orange`, qui vaut le BLEU ici : un filet bleu sur un bandeau d'encre, invisible et faux. La maquette le veut jaune, et fin — 1 px, pas 2. */ .now-block { border-top: 1px solid var(--hv-jaune); } /* ---- 3 · DES TITRES PLUS PETITS, MOINS ESPACÉS --------------- Le shell du 610 monte jusqu'à 84 px avec un interlettrage négatif ; la maquette védasienne plafonne autour de 44 px, en capitales, avec un interlettrage presque nul. ⚠️ EN CAPITALES, L'INTERLETTRAGE DOIT BAISSER QUAND LE CORPS MONTE. C'est l'inverse du réflexe : un grand titre déjà large se disloque si on l'écarte encore. Les valeurs ci-dessous suivent cette règle, du plus grand au plus petit. */ .tagline { font-size: clamp(26px, 3.2vw, 40px); letter-spacing: .005em; } .titre-section, .section h2 { font-size: clamp(26px, 3.2vw, 42px); letter-spacing: .005em; } .page-hero h1 { font-size: clamp(30px, 4vw, 52px); letter-spacing: .005em; } .now-title { font-size: clamp(20px, 2.4vw, 28px); letter-spacing: .01em; } .intent-head { font-size: clamp(20px, 2.2vw, 28px); letter-spacing: .03em; } .etaliers-head .section-lead { max-width: 600px; } /* (Le nom des étaliers est réglé plus bas, avec le reste de la typographie des cartes — une seule règle vaut mieux que deux.) */ /* ---- 4 · LES DEUX COLONNES DE L'AGENDA, EN CAPITALES --------- « Agenda événements » et « Sport en direct ». Le shell les compose en 28 px d'affiche ; ce sont des intitulés de colonne, pas des titres de section — ils passent en capitales et descendent d'un cran pour ne pas concurrencer le titre qui les surplombe. */ .events-col h3 { text-transform: uppercase; font-size: clamp(16px, 1.8vw, 20px); font-weight: 700; letter-spacing: .06em; } /* ---- 5 · LE BLOC DU PLAN EN CLAIR --------------------------- Le plan est dessiné sur un fond crème. Posé sur l'encre du 610, il flottait comme une vignette rapportée. Sur le crème ombré de la charte, le fond du dessin et celui de la section se rejoignent et le plan tient dans la page. */ .plan-block { background: var(--hv-papier); color: var(--hv-encre); } /* ---- LE PLAN EN BANDEAU INTÉGRAL (accueil) ---- Ni titre, ni sur-titre, ni marge : le dessin occupe toute la largeur, posé sur le crème qui est le sien. Demande de Gabriel, 09/09/2026 — le plan porte déjà son titre dans son panneau de gauche, celui de la section le répétait. ⚠️ PAS DE `object-fit: cover` ICI, contrairement à la bande photo. Un plan qu'on recadre devient faux : les étals coupés ne sont plus repérables. L'image garde donc ses proportions et sa hauteur suit sa largeur — c'est plus haut sur mobile, et c'est le prix d'un plan lisible. ⚠️ `max-width` ET PAS `width: 100%` : au-delà de 1821 px de large, l'image serait agrandie au-dessus de sa définition et le texte des étals deviendrait flou. Elle se centre alors, sur son propre fond — le raccord ne se voit pas. */ .plan-block--integral { display: block; padding: 0; line-height: 0; text-align: center; } .plan-block--integral img { display: inline-block; width: 100%; max-width: 1821px; height: auto; } .plan-block .titre-section { color: var(--hv-encre); } .plan-block .eyebrow { color: var(--hv-cuivreT); } /* ⚠️ LE BLOC DU PLAN ET CELUI DE « DEPUIS 2022 » SE CONFONDAIENT, et la cause n'était pas subtile : `shell.css` peint le second avec `--c-cream`, que la charte védasienne fait pointer sur le MÊME `--hv-card` que le premier. Deux sections d'affilée, strictement de la même couleur, sans rien entre elles : elles se lisaient comme une seule. Deux réponses, et il faut les deux : · le plan porte le crème du papier, qui EST celui du dessin. L'écart avec `--hv-card` reste faible — 1,15:1 — donc à lui seul il ne sépare rien ; · les rayures du torchon sont posées entre les deux, dans `index.php`. C'est le séparateur de la charte, déjà employé deux fois plus haut dans la page. */ /* ---- 6 · LA BANDE PHOTO ------------------------------------ Le cadrage vient de l'admin, posé en `style` sur l'image par `index.php` (clé `accueil_photo_position`). La valeur ci-dessous n'est qu'un repli : elle s'applique si la clé est vide. ⚠️ Les deux filets d'encre du 610 sautent : la bande est encadrée par les rayures, au-dessus et au-dessous. */ .bandeau-photo { border-top: 0; border-bottom: 0; background: var(--hv-stone); } .bandeau-photo img { object-position: center 50%; } /* ---- 7 · LES BOUTONS --------------------------------------- La maquette : un rectangle à angle de 8 px, un texte de 11 px en capitales très espacées. Le 610 : une gélule à 100 px et un texte de 14 px. Ce sont deux objets différents. */ .btn { border-radius: var(--hv-r, 8px); font-size: 11px; letter-spacing: .18em; padding: 15px 26px; } .btn.paper { background: var(--hv-papier); color: var(--hv-encre); } .btn.cuivre { background: var(--hv-cuivre); color: var(--hv-papier); font-size: 11px; } /* ⚠️ Le cuivre plein n'atteint que 3,56:1 avec le crème, quel que soit le texte posé dessus. En dessous de 18,66 px gras, le seuil AA est de 4,5:1 et il n'est pas tenu. On le compense par la graisse et un contour d'encre, qui redonne au bouton sa limite franche sans toucher à la couleur de la charte. */ .btn.cuivre { font-weight: 800; box-shadow: inset 0 0 0 2px var(--hv-encre); } /* ---- 9 et 10 · L'ADRESSE, À LA LARGEUR DU LOGO -------------- Deux exigences de Gabriel, et elles se tiennent : · l'adresse doit faire EXACTEMENT la largeur du logo ; · l'écart logo/adresse doit être celui qui sépare HALLES de VEDASIENNES à l'intérieur du logo. LES NOMBRES SONT MESURÉS SUR LE PNG, pas estimés. Sur `logo-hv.png` (1200 × 471) : · « HALLES » occupe y 60 → 262 · « VEDASIENNES » occupe y 288 → 411 · l'écart entre les deux : 25 px, soit 2,083 % de la largeur · les deux mots font 1074 px de large, soit 89,5 % · sous « VEDASIENNES », il reste 59 px de vide transparent dans le fichier — c'est ce vide qui fausse tout si on l'ignore : une marge de 25 px placerait l'adresse 59 px trop bas. D'où la marge NÉGATIVE : il faut remonter de 59 − 25 = 34 px, soit 2,83 % de la largeur du logo. ⚠️ TOUT EST EN `cqw`, PAS EN PIXELS. `cqw` vaut 1 % de la largeur du cadre `.hero-identite`, qui est celle du logo. Les proportions mesurées ci-dessus tiennent donc à toutes les tailles d'écran. En pixels, l'alignement ne serait juste qu'à une seule largeur. ⚠️ LA LARGEUR EXACTE VIENT DE `text-align-last: justify`. Aucune taille de police ne peut garantir qu'un texte fasse pile la largeur voulue — la justification, si : elle répartit la différence sur les espaces. `font-size` est réglée pour que le texte arrive déjà PRESQUE à la bonne largeur, afin que la justification n'ait qu'à combler quelques pixels. Si l'adresse est changée dans l'admin pour une bien plus longue, elle passera sur deux lignes justifiées — c'est dégradé, pas cassé. */ .hero-identite { width: clamp(280px, 50vw, 460px); margin: 0 auto; container-type: inline-size; position: relative; z-index: 3; } .hero-identite .big-logo { width: 100%; margin: 0; } /* L'air sous le bloc d'identité. Il est porté par le CADRE, pas par l'adresse : une marge basse sur l'adresse se mesurerait en `cqw` et grandirait avec le logo, alors que cet écart-là doit rester constant. */ .hero-identite { margin-bottom: 30px; } .hero-adresse { width: 89.5cqw; margin: -2.83cqw auto 0; font-size: 2.2cqw; line-height: 1; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; text-align: justify; text-align-last: justify; color: var(--hv-papier); } /* L'interlettrage ajoute un blanc APRÈS la dernière lettre, qui décale le bloc justifié vers la gauche. On le reprend. */ .hero-adresse { padding-right: 0; margin-right: calc(50% - 44.75cqw - .18em); } /* ---- 11 · LA VITRINE DES ÉTALIERS --------------------------- ⚠️ RIEN À SURCHARGER ICI, ET C'EST LE POINT. La grille de trois colonnes de la maquette a été essayée puis abandonnée le 09/09/2026 : Gabriel veut la DISPOSITION du 610, c'est-à-dire la bande qui défile horizontalement, avec ses deux flèches et toutes les fiches dedans. C'est donc `shell.css` qui la gouverne entièrement (`.etaliers-scroller`), comme il gouverne la forme des cartes. Seules les COULEURS et les CARACTÈRES sont védasiens — plus bas. */ /* ⚠️ LA FORME DES CARTES ÉTALIERS EST CELLE DU 610, ET C'EST VOULU. Demande de Gabriel, 09/09/2026. On ne surcharge donc NI le rayon (16 px, pas les 8 px du reste de la charte védasienne) NI le survol — l'anneau intérieur du shell fait très bien l'affaire, et il a une raison d'être : une bordure de 2 px décalerait le contenu et laisserait un liseré autour de la photo, l'ombre intérieure se dessine par-dessus sans rien bouger. Seule la COULEUR DE FOND est reprise : le shell peint la carte en `--c-stone`, le ton le plus sombre des crèmes. Sur ce fond, le cuivre des sur-titres tombe à 4,20:1 et le gris des descriptions à 4,17:1 — sous le seuil de 4,5:1, à 10 et 13 px. Sur `--hv-card`, plus clair d'un cran, les deux repassent au-dessus. La forme du 610, donc, mais pas son fond. */ .etalier-card { background: var(--hv-card); } /* ---- LA SIGNATURE DU PIED DE PAGE, EN CAPITALES ------------- « LES HALLES DE LA VIE » — demande de Gabriel, 09/09/2026. C'est la même signature que dans le bloc d'ouverture, et elle y est déjà en capitales : les deux se répondent maintenant. L'accent tombe sur « de la vie », et il suit la règle du reste du site : droit, pas penché, et coloré plutôt qu'italique. Sur l'encre du pied de page, il passe au jaune — le bleu ne s'en détacherait pas. */ .footer-brand .baseline { text-transform: uppercase; font-weight: 700; font-size: 19px; letter-spacing: .02em; } .footer-brand .baseline em { font-style: normal; color: var(--hv-jaune); } /* La sixième case : bleue, le nombre restant en jaune. Même rayon que les autres — c'est une carte de la même grille. */ .etalier-card-more { background: var(--hv-bleu); border-color: var(--hv-bleu); color: var(--hv-papier); } .etalier-card-more:hover { background: var(--hv-bleu-fonce); border-color: var(--hv-bleu-fonce); } .more-num { color: var(--hv-jaune); font-size: 48px; font-weight: 700; } .more-label { font-size: 14px; letter-spacing: .08em; } .more-sub { font-size: 10px; letter-spacing: .12em; } /* ---- LA TYPOGRAPHIE DES CARTES ------------------------------ La forme reste celle du 610 ; les caractères, eux, passent à la charte védasienne. Trois retouches, et rien d'autre. */ /* Le sur-titre du métier. Le shell le peint avec `--c-orange`, qui vaut le BLEU ici : le même bleu que le titre juste en dessous, donc plus de hiérarchie. Il passe au cuivre — c'est la couleur des sur-titres dans toute la maquette. 4,81:1. */ .etalier-card .tag { font-family: var(--f-primary); color: var(--hv-cuivreT); font-weight: 700; letter-spacing: .16em; } /* Le nom. Josefin Sans plutôt que la police d'étiquette du 610, et un cran plus petit : « LA TABLE DU BOUCHER » en 24 px passait à la ligne dans une carte de 260 px. */ .etalier-card h3 { font-family: var(--f-affiche); font-size: 22px; letter-spacing: .01em; line-height: 1.1; } /* La description et la ligne des moments. Le shell écrit en `#555`, un gris qui n'appartient à aucune charte. */ .etalier-card p { color: var(--hv-encre2); } .etalier-card .sig { font-family: var(--f-primary); color: var(--hv-cuivreT); font-weight: 700; opacity: 1; } /* ---- 12 · « JE VIENS POUR… » : DES RONDS, SANS OMBRE -------- Retour aux pastilles rondes, mais droites et sans ombre portée : ce sont les couleurs de la charte qui les distinguent, pas un relief. */ .intent-block { background: var(--hv-papier); } .intent-head { margin-bottom: 34px; } .intent-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 24px; max-width: 900px; } .intent-sticker { aspect-ratio: 1; border-radius: 50%; border: 0; box-shadow: none; transform: none; padding: 14px; --rot: 0deg; } .intent-sticker:hover, .intent-sticker:focus-visible { transform: translateY(-3px); box-shadow: none; } .intent-sticker.s-dej { background: var(--hv-jaune); color: var(--hv-encre); } .intent-sticker.s-sortir { background: var(--hv-cuivre); color: var(--hv-papier); } .intent-sticker.s-famille { background: var(--hv-bleu); color: var(--hv-papier); } .intent-sticker.s-sport { background: var(--hv-bleu-delave); color: var(--hv-encre); } .intent-sticker.s-courses { background: var(--hv-sable); color: var(--hv-encre); } .intent-sticker .label { font-family: var(--f-affiche); font-size: 17px; font-weight: 700; line-height: 1.05; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 6px; } .intent-sticker .sub { font-family: var(--f-primary); font-size: 9px; font-weight: 700; line-height: 1.25; text-transform: uppercase; letter-spacing: .1em; opacity: .8; margin-top: 0; } /* ============================================================ LES QUATRE CORRECTIONS DE LA PREMIÈRE PASSE ------------------------------------------------------------ Elles restent valables et sont regroupées ici pour ne pas se perdre au milieu des retouches de la seconde. ============================================================ */ /* Le rayon commun des angles. Déclaré ici parce que plusieurs règles plus haut le lisent avec un repli — le repli n'est qu'un filet, cette ligne est la vraie valeur. */ :root { --hv-r: 8px; } /* ---- LES TITRES SONT DROITS --------------------------------- Le 610 penche la seconde moitié de ses titres, en italique et à −2°. C'est SA signature — pas celle des Halles Védasiennes, dont la maquette ne penche rien : elle change de couleur. Six sélecteurs, parce que le shell répète le motif à six endroits. En oublier un laisse un titre de travers au milieu d'une page droite. */ .tagline .em, .section h2 em, .titre-section em, .page-hero h1 em, .intent-head em, .esprit-inner .titre-section em { transform: none; font-style: normal; color: var(--hv-bleu); } /* Sur les fonds sombres, le bleu ne se détache pas : l'accent y passe au jaune, comme dans la maquette. */ .hero .tagline .em, .page-hero h1 em, .events-block .titre-section em, .news-block .titre-section em, .plan-block .titre-section em { color: var(--hv-jaune); } /* ⚠️ QUATRE AUTRES PENCHÉS, TROUVÉS EN RELISANT LE SITE EN LIGNE le 09/09/2026 — la première liste n'en couvrait que six sur dix. Deux portent une vraie rotation, deux un italique seul : .sport-demand .accent « à la demande », dans le bandeau des matchs .esprit-inner h2 em l'accent du bloc « Seul, on mange vite » .dossier-accroche l'accroche du dossier de presse .page-hero .page-accroche la signature des pages intérieures ⚠️ ET IL Y A UNE RAISON TECHNIQUE DE LES PRENDRE TOUS LES QUATRE, pas seulement les deux qui tournent : **Josefin Sans n'a pas d'italique**. Les quatre `.woff2` déposés sont des fontes variables ROMAINES. Quand la CSS demande `font-style: italic`, le navigateur n'a rien à charger : il fabrique un faux oblique en penchant mécaniquement les lettres droites. C'est exactement ce que Gabriel appelle « tordu » — et c'est du mauvais dessin de caractère, pas un choix. On l'enlève partout. L'accent reste marqué : par la couleur, comme dans la maquette. */ .sport-demand .accent, .esprit-inner h2 em, .dossier-accroche, .page-hero .page-accroche { font-style: normal; transform: none; } .sport-demand .accent { color: var(--hv-jaune); } .esprit-inner h2 em { color: var(--hv-bleu); } .page-hero .page-accroche { color: var(--hv-jaune); } .dossier-accroche { color: var(--hv-cuivreT); } /* ⚠️ Sauf sur le bloc du plan, repassé en clair : le jaune y serait illisible. Il redescend au bleu. */ .plan-block .titre-section em { color: var(--hv-bleu); } /* ---- LES TITRES SONT EN CAPITALES --------------------------- Josefin Sans est dessinée pour ça. Le shell appelle la graisse 400, qui est une graisse de texte courant : en capitales, elle rend le titre mou. La maquette utilise 700. (Les corps et les interlettrages sont réglés au point 3.) */ .tagline, .titre-section, .section h2, .page-hero h1, .intent-head, .now-title, .etalier-card h3, .more-label { text-transform: uppercase; font-weight: 700; } /* ---- LES DEUX POINTS CLIGNOTANTS SONT VERTS ----------------- Celui de l'en-tête (« Ouvert ») et celui du bandeau (« Prochainement »). Les deux sont posés sur l'encre : un seul ton suffit. Le shell les peignait avec `--c-mint`, qui vaut le bleu délavé du torchon ici — un point bleu sur fond sombre ne dit pas « ouvert ». */ .status-pill.etat-ouvert .dot, .now-label .pulse-dot { background: var(--hv-vert); } .now-block.est-en-cours .now-label { color: var(--hv-vert); } /* ---- UNE PHOTO DANS LE BLOC D'OUVERTURE --------------------- Trois couches, et l'ordre compte. De haut en bas du rendu : 1. un voile d'encre, fort en haut et en bas ; 2. un voile bleu, qui donne sa teinte ; 3. la photo. ⚠️ LE CREUX DU MILIEU EST PLUS SOMBRE QUE DANS LA MAQUETTE, et c'est la photo qui l'impose. La maquette laissait tomber le voile à 0,10 au milieu, sur une image sombre. La photo des Halles a du béton clair et des néons en plein centre : l'adresse et la ligne « 19 étaliers » y devenaient illisibles, crème sur blanc. Le creux est donc remonté à 0,34 / 0,40. Si la photo change un jour pour une image sombre, ces deux valeurs peuvent redescendre. */ .hero { background: linear-gradient(180deg, rgba(23,50,60,.62) 0%, rgba(23,50,60,.34) 46%, rgba(23,50,60,.58) 100%), linear-gradient(180deg, rgba(46,98,121,.52) 0%, rgba(46,98,121,.40) 46%, rgba(46,98,121,.54) 100%), url(/assets/img/hero-fond.jpg) center / cover no-repeat; padding: 84px 24px 72px; } /* ============================================================ LE BANDEAU « RÉSERVER UN ESPACE » — 09/09/2026 ------------------------------------------------------------ Bloc propre aux Halles Védasiennes : le 610 n'a pas d'espace privatisable, donc `shell.css` ne connaît aucune de ces classes. Tout est écrit ici, y compris la mise en page. ============================================================ */ /* ⚠️ LE MÊME CRÈME QUE LES ÉTALIERS ET LE PLAN, et c'est ce qui sépare ce bandeau de la bande de photos qui le suit — décision de Gabriel, 09/09/2026, après avoir essayé les rayures et ne pas les avoir aimées. L'accueil alterne donc désormais deux crèmes, et rien d'autre : agenda & sport encre (sombre) réserver un espace --hv-papier ← cette ligne sous les Halles --hv-card le plan --hv-papier depuis 2022 --hv-card L'écart entre les deux crèmes est faible — 1,20:1 — mais il suffit ici parce que chaque frontière tombe AUSSI sur un changement de contenu : du texte à des photos, des photos à un plan pleine largeur. C'est la conjonction des deux qui se lit, pas la couleur seule. ⚠️ D'OÙ LA RÈGLE, si un bloc s'ajoute un jour : il prend le crème INVERSE de celui qui le précède. Deux blocs voisins de même couleur se relisent comme un seul, on l'a vérifié trois fois. */ .resa-block { background: var(--hv-papier); } .resa-block .eyebrow { color: var(--hv-cuivreT); } .resa-corps { display: grid; grid-template-columns: 1fr; gap: 34px; align-items: start; margin-top: 28px; } @media (min-width: 900px) { /* Le texte à gauche, les photos à droite. Un peu plus de place au texte : c'est lui qui porte la condition des 20 personnes, et c'est la première chose qu'on cherche. */ .resa-corps { grid-template-columns: 1.05fr 1fr; gap: 44px; } } .resa-texte p { font-size: 16px; line-height: 1.6; margin: 0 0 14px; color: var(--hv-encre); } .resa-texte strong { font-weight: 700; } .resa-points { list-style: none; margin: 22px 0 26px; padding: 0; } .resa-points li { position: relative; padding-left: 22px; margin-bottom: 10px; font-size: 15px; line-height: 1.5; color: var(--hv-encre2); } /* La puce est un losange, comme les séparateurs du ruban défilant — c'est le seul signe de ponctuation graphique de la charte. */ .resa-points li::before { content: '◆'; position: absolute; left: 0; top: 0; font-size: 10px; line-height: 1.7; color: var(--hv-cuivre); } /* Quatre photos : une vue d'ensemble, puis trois détails en dessous. `aspect-ratio` plutôt qu'une hauteur fixe — les quatre sources n'ont pas le même format, et une hauteur imposée les aurait déformées. ⚠️ TROIS COLONNES, PAS DEUX. En deux colonnes, la quatrième photo reste seule sur sa rangée et laisse un trou à côté d'elle. Avec trois, la première prend toute la largeur et les trois autres remplissent exactement la rangée du dessous. */ .resa-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .resa-photos img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--hv-r, 8px); background: var(--hv-stone); } /* La première photo prend toute la largeur : elle montre la vue d'ensemble de l'étage, les trois autres en sont des détails. */ .resa-photos img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; } /* Sur téléphone la rangée de trois donnerait des vignettes de la largeur d'un pouce : tout repasse en pleine largeur. */ @media (max-width: 560px) { .resa-photos { grid-template-columns: 1fr; } .resa-photos img, .resa-photos img:first-child { aspect-ratio: 16 / 10; } } /* ---- LE CHAPEAU DES CARTES ÉTALIERS — 09/09/2026 ------------ Le texte des cartes est désormais la PREMIÈRE PHRASE de la présentation, écrite pour tenir ici ; le texte entier est passé dans le corps de la fiche (`description_longue`). ⚠️ CE PLAFOND EST UN FILET, PAS LA MISE EN FORME. Les vingt-deux chapeaux font de 74 à 146 caractères et tiennent tous en trois lignes. Mais ces textes se modifient dans l'admin, sans passer par ici : le jour où quelqu'un y colle un paragraphe, la carte s'allongerait et casserait l'alignement de toute la rangée. Au-delà de trois lignes, le texte est donc coupé net. C'est volontairement discret : si le plafond se voyait souvent, c'est que les textes seraient à réécrire, pas la CSS à changer. */ .etalier-card p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ---- LA PHOTO DE L'ÉTAL, EN BANDEAU — 10/09/2026 ------------ Sur la fiche d'un étalier, entre sa présentation et ses contacts. Elle reprend `.bandeau-photo` de l'accueil, à une différence près : sa HAUTEUR. ⚠️ LES PHOTOS D'ÉTALIERS SONT CARRÉES — 800 × 800, reprises du carrousel du site WordPress. La bande de l'accueil est réglée pour une image large (1600 × 600) : appliquée telle quelle à un carré, elle n'en montrerait qu'une tranche de 340 px, soit un peu plus du quart de la hauteur. Sur une assiette photographiée de haut, ça revient à couper le plat. La bande est donc plus haute ici, et le cadrage centré : on garde la moitié de l'image au lieu du quart. C'est le maximum raisonnable — au-delà, la photo pousse les contacts hors de l'écran sur un portable. */ .bandeau-etal img { height: clamp(240px, 38vw, 460px); object-position: center 50%; } /* ============================================================ L'AGENDA : LES BADGES ET LA SOIRÉE MISE EN AVANT — 10/09/2026 ============================================================ */ /* ---- « Accès libre » passe au jaune ------------------------- `shell.css` le peint avec `--c-mint`, qui vaut le bleu délavé du torchon ici, et pose une encre vert foncé écrite en dur — une couleur qui n'appartient à aucune charte védasienne. Demande de Gabriel : jaune. 8,57:1 avec l'encre. */ .event-badge.free { background: var(--hv-jaune); color: var(--hv-encre); } /* ---- ⚠️ « REPORTÉ » DOIT DONC QUITTER LE JAUNE -------------- Il l'occupait. Deux badges de la même couleur sur la même liste, l'un disant « c'est ouvert à tous » et l'autre « ça n'a pas lieu », c'est le contresens le plus coûteux possible. Il passe au cuivre foncé, texte papier : 5,77:1, et surtout une couleur que rien d'autre n'utilise dans l'agenda. */ .event-badge.reporte { background: var(--hv-cuivreT); color: var(--hv-papier); } /* ---- La soirée mise en avant -------------------------------- Les cartes de l'agenda sont posées sur l'encre, en blanc très transparent. La vedette prend un fond cuivré et un liseré de la même famille : elle se voit au premier coup d'œil sans changer de place dans la frise. ⚠️ PAS LE JAUNE, bien qu'il soit le plus contrasté sur l'encre. Le survol de toutes les cartes est déjà un voile jaune : une vedette jaune au repos deviendrait indistincte de n'importe quelle carte survolée. Le cuivre est libre. ⚠️ LE LISERÉ EST ÉPAISSI À 2 px MAIS LE `padding` BAISSE D'AUTANT. Sans ça la carte vedette serait 2 px plus haute que ses voisines, et toute la liste se décalerait autour d'elle. */ .event-card--vedette { background: rgba(196, 101, 42, .18); border: 2px solid var(--hv-cuivre); padding: 17px 19px; } .event-card--vedette:hover { background: rgba(196, 101, 42, .28); border-color: var(--hv-jaune); } /* Le quantième de la vedette passe au cuivre clair : c'est le premier élément que l'œil rencontre sur la carte. */ .event-card--vedette .event-date .day { color: #E3A05F; }