@charset "utf-8"; /* ============================================================================= VH VERSAILLES — « Consacre ton année scolaire à Dieu » Programme spécial rentrée 2026-2027 · 26–30 août 2026 ----------------------------------------------------------------------------- Feuille de styles du LOT SOCLE. Elle habille les 4 pages du site (index, je-donne-ma-vie, bienvenue, merci) à partir des classes et des attributs data-* décrits dans CONTRAT.md. SOMMAIRE 01. Tokens de charte (variables :root) 02. Réinitialisation et base 03. Accessibilité (sr-only, skip-link, focus visible) 04. Typographie (titres, eyebrow, lead, script) 05. Mise en page (container, section, grid) 06. Boutons 07. Badges et pastilles 08. Cartes 09. Barre de progression + barre d'annonce (mode EN DIRECT) 10. Menu (burger mobile) 11. Hero : dégradé animé, rayons, bokeh, compte à rebours 12. Plateformes de direct 13. Timeline du programme 14. Formulaires 15. QR code, carte Maps, partage 16. Révélation au scroll (.reveal) 17. Divers (liens non configurés, pied de page, séparateurs) 18. prefers-reduced-motion (neutralisation des animations) 19. Impression 20. Griffonnages scolaires (bandes doodle en fond de section) NOTE POLICES : aucune @import ici. Chaque page HTML porte ses Google Fonts (Poppins + Kaushan Script) dans son (cf. CONTRAT §2). ============================================================================= */ /* ============================================================================= 01. TOKENS DE CHARTE Les 8 couleurs ci-dessous sont imposées par le CONTRAT §2 : ne pas les renommer. Les variables « dérivées » (rayons, ombres, espacements…) sont libres mais servent partout : les modifier ici change tout le site. ============================================================================= */ :root { /* --- Couleurs imposées (CONTRAT §2) --- */ --vh-vert: #006C68; /* vert profond, couleur dominante */ --vh-vert-fonce: #01423E; /* fond des sections sombres */ --vh-or: #CFAE1F; /* accents, filets, titres sur fond sombre */ --vh-rouge: #B12029; /* CTA principal, badges */ --vh-sable: #FBF7E8; /* fond clair chaud */ /* Le CONTRAT donnait ici #F2F7F6, décrit comme « fond clair froid ». Mesuré, c'était un gris-menthe à 24 % de saturation (teinte 168°) alors que le sable est à 70 % (teinte 47°) : une section sur deux virait au gris d'hôpital et la page paraissait triste. Même clarté, même rôle, mais une teinte chaude (82°, 48 %) : l'alternance devient crème / crème vert tendre. Écart au CONTRAT §2 assumé et reporté dans CONTRAT.md. */ --vh-clair: #F6F9EE; /* fond clair tempéré */ --vh-encre: #10201F; /* texte courant sur fond clair */ --vh-blanc: #FFFFFF; /* --- Dérivés de couleur --- ATTENTION (règle non négociable du CONTRAT §2) : --vh-or ne sert JAMAIS de couleur de texte sur fond clair (contraste AA insuffisant). Sur fond clair il ne sert qu'aux filets, bordures, puces et surlignages. --vh-or-clair est une variante éclaircie réservée au TEXTE sur fond sombre (ratio ≥ 4.5:1 sur --vh-vert-fonce et sur le dégradé du hero). */ --vh-or-clair: #E6C93F; --vh-rouge-fonce: #8E1A21; --vh-vert-nuit: #01312E; --vh-vert-medium: #04524E; --vh-encre-doux: #3E5250; /* texte secondaire sur fond clair (AA ≥ 4.5) */ --vh-trait: rgba(1, 66, 62, .14); /* bordures discrètes fond clair */ --vh-trait-or: rgba(207, 174, 31, .45);/* filets dorés décoratifs */ --vh-voile: rgba(255, 255, 255, .10); /* surface vitrée sur fond sombre */ --vh-voile-fort: rgba(255, 255, 255, .18); /* --- Rôles de couleur contextuels --- Redéfinis plus bas par .hero, .section--sombre, .carte--sombre… Cela évite de répéter « couleur du texte » dans chaque composant. */ --vh-texte: var(--vh-encre); --vh-texte-doux: var(--vh-encre-doux); --vh-accent: var(--vh-vert); /* eyebrow, script, puces */ --vh-surface: var(--vh-blanc); /* fond des cartes */ --vh-bordure: var(--vh-trait); --vh-focus: var(--vh-vert); /* couleur du contour de focus */ /* --- Dégradés --- */ --vh-degrade-hero: linear-gradient(155deg, var(--vh-vert-nuit) 0%, var(--vh-vert-fonce) 30%, #033F3B 55%, var(--vh-vert-medium) 100%); --vh-degrade-sombre: linear-gradient(165deg, var(--vh-vert-fonce) 0%, #023E3A 55%, var(--vh-vert-medium) 100%); --vh-degrade-or: linear-gradient(90deg, rgba(207,174,31,0) 0%, var(--vh-or) 22%, var(--vh-or-clair) 50%, var(--vh-or) 78%, rgba(207,174,31,0) 100%); /* --- Rayons d'arrondi --- */ --vh-rayon-xs: 8px; --vh-rayon: 14px; --vh-rayon-lg: 22px; --vh-rayon-xl: 30px; --vh-rayon-pill: 999px; /* --- Ombres --- */ --vh-ombre-douce: 0 6px 18px rgba(1, 48, 45, .08); --vh-ombre-carte: 0 10px 30px rgba(1, 48, 45, .10), 0 2px 6px rgba(1, 48, 45, .06); --vh-ombre-carte-fort: 0 22px 48px rgba(1, 48, 45, .18), 0 4px 12px rgba(1, 48, 45, .10); --vh-ombre-sombre: 0 18px 44px rgba(0, 0, 0, .30); /* --- Espacements --- */ --vh-esp-xs: .5rem; --vh-esp-sm: .875rem; --vh-esp-md: 1.25rem; --vh-esp-lg: 2rem; --vh-esp-xl: 3rem; --vh-gap: clamp(1rem, 3vw, 1.75rem); --vh-section-y: clamp(3rem, 8vw, 6rem); /* --- Largeurs --- */ --vh-conteneur: 1140px; --vh-conteneur-etroit: 720px; --vh-padding-lateral: clamp(1rem, 5vw, 2rem); /* --- Durées de transition --- */ --vh-t-rapide: .18s; --vh-t: .28s; --vh-t-lente: .55s; --vh-easing: cubic-bezier(.2, .7, .3, 1); /* --- Décalage pour les ancres (barre d'annonce collante) --- */ --vh-offset-sticky: 5rem; /* Palette d'accent locale (surchargée par contexte) */ color-scheme: light; } /* ============================================================================= 02. RÉINITIALISATION ET BASE ============================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--vh-offset-sticky); } body { margin: 0; min-height: 100%; background: var(--vh-blanc); color: var(--vh-texte); font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: clamp(1rem, .96rem + .2vw, 1.0625rem); line-height: 1.65; font-weight: 400; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0 0 1em; } h1, h2, h3, h4, h5, h6 { line-height: 1.15; font-weight: 800; letter-spacing: -.015em; text-wrap: balance; } ul, ol { margin: 0 0 1em; padding-left: 1.25em; } li { margin-bottom: .35em; } img, svg, video, iframe { max-width: 100%; display: block; height: auto; } a { color: var(--vh-vert); text-decoration-thickness: .08em; text-underline-offset: .18em; transition: color var(--vh-t) var(--vh-easing), opacity var(--vh-t) var(--vh-easing); } a:hover { color: var(--vh-vert-fonce); } button, input, select, textarea { font: inherit; color: inherit; } hr { border: 0; height: 2px; background: var(--vh-degrade-or); margin: var(--vh-esp-lg) 0; opacity: .8; } blockquote { padding-left: 1rem; border-left: 3px solid var(--vh-or); } strong, b { font-weight: 700; } ::selection { background: rgba(0, 108, 104, .18); } /* Cible d'ancre : évite que la barre collante masque le titre visé. */ [id] { scroll-margin-top: var(--vh-offset-sticky); } /* ============================================================================= 03. ACCESSIBILITÉ ============================================================================= */ /* Masquage visuel qui reste lu par les lecteurs d'écran. */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Lien d'évitement : caché jusqu'à réception du focus clavier. */ .skip-link { position: absolute; top: -100px; left: 1rem; z-index: 200; padding: .8rem 1.25rem; background: var(--vh-rouge); color: var(--vh-blanc); font-weight: 700; border-radius: 0 0 var(--vh-rayon) var(--vh-rayon); text-decoration: none; box-shadow: var(--vh-ombre-carte-fort); transition: top var(--vh-t) var(--vh-easing); } .skip-link:focus, .skip-link:focus-visible { top: 0; color: var(--vh-blanc); } /* Focus visible partout : contour net + halo pour rester lisible sur n'importe quel fond. La couleur s'adapte au contexte (--vh-focus). */ :focus { outline: none; } :focus-visible { outline: 3px solid var(--vh-focus); outline-offset: 3px; border-radius: var(--vh-rayon-xs); } /* Sur fond sombre, l'or est parfaitement visible et autorisé. */ .hero, .section--sombre, .carte--sombre, .carte--action, body > header, footer, .pied, [data-annonce] { --vh-focus: var(--vh-or-clair); } /* ============================================================================= 04. TYPOGRAPHIE ============================================================================= */ /* Sur-titre court, majuscules, très lettré. */ .eyebrow { display: block; margin: 0 0 .6rem; font-size: .8125rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--vh-accent); } /* Échelles de titres, utilisables sur n'importe quelle balise. */ h1, .h1 { font-size: clamp(2rem, 1.15rem + 4.3vw, 3.75rem); font-weight: 800; line-height: 1.06; letter-spacing: -.025em; margin-bottom: .5em; } h2, .h2 { font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.6rem); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; margin-bottom: .6em; } h3, .h3 { font-size: clamp(1.2rem, 1.05rem + .8vw, 1.5rem); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; margin-bottom: .5em; } /* Chapô. */ .lead { font-size: clamp(1.0625rem, 1rem + .5vw, 1.3125rem); line-height: 1.6; font-weight: 400; color: var(--vh-texte-doux); max-width: 62ch; } /* Chiffre mis en avant dans un titre (« 3 jours de prière… »). Un chiffre frappe plus qu'un nombre écrit en toutes lettres : c'est le parti pris des affiches de jeûne et prière dont s'inspire cette page. L'or est ici sur fond vert profond, donc autorisé (cf. règle de contraste du contrat). */ .chiffre-cle { color: var(--vh-or); font-size: 1.5em; font-weight: 800; line-height: .8; letter-spacing: -.02em; } /* Dans un bloc centré, `text-align: center` centre le texte DANS le bloc, mais pas le bloc lui-même : avec max-width, .lead restait collé à gauche (32 px à gauche, 246 px à droite dans le hero). */ .texte-centre .lead, [style*="text-align: center"] .lead, #accueil .lead, .hero .lead { margin-inline: auto; } .hero .lead, .section--sombre .lead, .carte--sombre .lead, .carte--action .lead { color: rgba(255, 255, 255, .88); } /* Thème calligraphié. */ .script { font-family: "Kaushan Script", "Segoe Script", cursive; font-weight: 400; letter-spacing: 0; line-height: 1.3; color: var(--vh-accent); /* Kaushan a un dessin haut : on compense légèrement le rythme vertical. */ padding-bottom: .08em; } /* Utilitaires de texte minimalistes. */ .texte-centre { text-align: center; } .mesure { max-width: 62ch; } .mesure-centre { max-width: 62ch; margin-inline: auto; } /* ============================================================================= 05. MISE EN PAGE ============================================================================= */ .container { width: 100%; max-width: var(--vh-conteneur); margin-inline: auto; padding-inline: var(--vh-padding-lateral); } .container--etroit { max-width: var(--vh-conteneur-etroit); } .section { position: relative; padding-block: var(--vh-section-y); } /* Variante sombre : dégradé vert, texte clair, filet doré haut et bas. */ .section--sombre { --vh-texte: var(--vh-blanc); --vh-texte-doux: rgba(255, 255, 255, .82); --vh-accent: var(--vh-or-clair); --vh-surface: var(--vh-voile); --vh-bordure: var(--vh-voile-fort); color: var(--vh-texte); background: var(--vh-degrade-sombre); border-top: 2px solid var(--vh-trait-or); border-bottom: 2px solid var(--vh-trait-or); } .section--sombre a:not(.btn) { color: var(--vh-or-clair); } .section--sombre a:hover { color: var(--vh-blanc); } .section--sable { background: var(--vh-sable); } .section--clair { background: var(--vh-clair); } /* Grilles : une colonne en mobile, puis élargissement progressif. */ .grid { display: grid; gap: var(--vh-gap); grid-template-columns: 1fr; align-items: stretch; } @media (min-width: 600px) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 800px) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1000px) { .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Rangée d'actions (boutons côte à côte, empilés en mobile). */ .actions, .boutons { display: flex; flex-wrap: wrap; gap: var(--vh-esp-sm); align-items: center; } @media (max-width: 479px) { .actions > .btn, .boutons > .btn { width: 100%; } } /* ============================================================================= 06. BOUTONS ============================================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 48px; /* cible tactile confortable */ padding: .85rem 1.6rem; border: 2px solid transparent; border-radius: var(--vh-rayon-pill); background: var(--vh-vert); color: var(--vh-blanc); font-size: 1rem; font-weight: 700; line-height: 1.2; letter-spacing: .01em; text-align: center; text-decoration: none; cursor: pointer; position: relative; box-shadow: var(--vh-ombre-douce); transition: transform var(--vh-t) var(--vh-easing), box-shadow var(--vh-t) var(--vh-easing), background-color var(--vh-t) var(--vh-easing), border-color var(--vh-t) var(--vh-easing), color var(--vh-t) var(--vh-easing); } .btn:hover { transform: translateY(-2px) scale(1.025); box-shadow: var(--vh-ombre-carte); color: var(--vh-blanc); } .btn:active { transform: translateY(0) scale(.98); } .btn svg { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; } /* CTA principal. */ .btn--rouge { background: var(--vh-rouge); color: var(--vh-blanc); } .btn--rouge:hover { background: var(--vh-rouge-fonce); } /* Or : le texte est TOUJOURS encre foncée (l'or ne porte jamais de blanc). */ .btn--or { background: var(--vh-or); color: var(--vh-encre); } .btn--or:hover { background: var(--vh-or-clair); color: var(--vh-encre); } .btn--blanc { background: var(--vh-blanc); color: var(--vh-vert-fonce); } .btn--blanc:hover { background: var(--vh-sable); color: var(--vh-vert-fonce); } /* Bordure seule : hérite de la couleur du contexte. */ .btn--fantome { background: transparent; border-color: currentColor; color: var(--vh-vert); box-shadow: none; } .btn--fantome:hover { background: rgba(0, 108, 104, .08); color: var(--vh-vert-fonce); box-shadow: var(--vh-ombre-douce); } .hero .btn--fantome, .section--sombre .btn--fantome, .carte--sombre .btn--fantome, .carte--action .btn--fantome { color: var(--vh-blanc); } .hero .btn--fantome:hover, .section--sombre .btn--fantome:hover, .carte--sombre .btn--fantome:hover, .carte--action .btn--fantome:hover { background: rgba(255, 255, 255, .14); color: var(--vh-blanc); } .btn--lg { min-height: 56px; padding: 1.05rem 2.1rem; font-size: clamp(1rem, .95rem + .3vw, 1.125rem); } .btn--bloc { width: 100%; display: flex; } /* État désactivé et état de chargement (posé par app.js). */ .btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; box-shadow: none; } .btn:disabled:hover, .btn[aria-disabled="true"]:hover { transform: none; box-shadow: none; } .btn[aria-busy="true"] { cursor: progress; color: transparent !important; pointer-events: none; } .btn[aria-busy="true"]::after { content: ""; position: absolute; inset: 0; margin: auto; width: 1.25rem; height: 1.25rem; border: 3px solid rgba(255, 255, 255, .35); border-top-color: var(--vh-blanc); border-radius: 50%; animation: vh-rotation .7s linear infinite; } .btn--or[aria-busy="true"]::after, .btn--blanc[aria-busy="true"]::after { border-color: rgba(16, 32, 31, .25); border-top-color: var(--vh-encre); } @keyframes vh-rotation { to { transform: rotate(360deg); } } /* ============================================================================= 07. BADGES ET PASTILLES ============================================================================= */ .badge { display: inline-flex; align-items: center; gap: .4em; padding: .35rem .8rem; border-radius: var(--vh-rayon-pill); background: rgba(0, 108, 104, .10); border: 1px solid var(--vh-trait-or); /* l'or en filet : autorisé */ color: var(--vh-vert); /* texte vert : AA sur fond clair */ font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.4; } .hero .badge, .section--sombre .badge, .carte--sombre .badge, .carte--action .badge { background: rgba(255, 255, 255, .12); border-color: rgba(230, 201, 63, .6); color: var(--vh-or-clair); } /* Pastille rouge du thème. */ .pastille-theme { display: inline-flex; align-items: center; gap: .5em; padding: .45rem 1.1rem; border-radius: var(--vh-rayon-pill); background: var(--vh-rouge); color: var(--vh-blanc); font-size: clamp(.75rem, .7rem + .25vw, .875rem); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; box-shadow: 0 6px 18px rgba(177, 32, 41, .35); } /* ============================================================================= 08. CARTES ============================================================================= */ .carte { position: relative; display: flex; flex-direction: column; gap: .35rem; padding: clamp(1.25rem, 3.5vw, 2rem); background: var(--vh-blanc); border: 1px solid var(--vh-trait); border-radius: var(--vh-rayon-lg); box-shadow: var(--vh-ombre-carte); color: var(--vh-encre); transition: transform var(--vh-t) var(--vh-easing), box-shadow var(--vh-t) var(--vh-easing), border-color var(--vh-t) var(--vh-easing); } .carte:hover { transform: translateY(-6px); box-shadow: var(--vh-ombre-carte-fort); border-color: var(--vh-trait-or); } .carte > :last-child { margin-bottom: 0; } /* Une carte entièrement cliquable ne doit pas perdre son focus visible. */ .carte:focus-within { border-color: var(--vh-trait-or); } /* Variante sombre. */ .carte--sombre { --vh-texte: var(--vh-blanc); --vh-texte-doux: rgba(255, 255, 255, .82); --vh-accent: var(--vh-or-clair); background: var(--vh-degrade-sombre); border-color: rgba(207, 174, 31, .35); color: var(--vh-blanc); box-shadow: var(--vh-ombre-sombre); } .carte--sombre a { color: var(--vh-or-clair); } /* Grande carte d'action verte (« Je donne ma vie », « Je suis nouveau »). */ .carte--action { --vh-texte: var(--vh-blanc); --vh-texte-doux: rgba(255, 255, 255, .85); --vh-accent: var(--vh-or-clair); align-items: flex-start; gap: .6rem; padding: clamp(1.5rem, 5vw, 2.75rem); background: var(--vh-degrade-hero); border: 1px solid rgba(207, 174, 31, .4); border-radius: var(--vh-rayon-xl); color: var(--vh-blanc); box-shadow: var(--vh-ombre-sombre); overflow: hidden; isolation: isolate; } /* Halo doré discret dans l'angle. */ .carte--action::before { content: ""; position: absolute; z-index: -1; top: -40%; right: -20%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(207, 174, 31, .32), transparent 68%); pointer-events: none; } .carte--action:hover { transform: translateY(-6px); box-shadow: 0 26px 56px rgba(0, 0, 0, .38); } .carte--action a { color: var(--vh-or-clair); } .carte--action .h2, .carte--action .h3, .carte--action h2, .carte--action h3 { color: var(--vh-blanc); } .carte--action .btn { margin-top: auto; } /* Petit médaillon d'icône en tête de carte. */ .carte__icone { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; margin-bottom: .75rem; border-radius: var(--vh-rayon); background: rgba(0, 108, 104, .10); color: var(--vh-vert); flex: none; } .carte--sombre .carte__icone, .carte--action .carte__icone { background: rgba(255, 255, 255, .14); color: var(--vh-or-clair); } .carte__icone svg { width: 1.5rem; height: 1.5rem; fill: currentColor; } /* ----------------------------------------------------------------------------- Cartes « Pour qui ? » (élèves, parents, éducation…) Une carte blanche nue se lit mal en série de quatre : rien n'accroche l'œil et les quatre publics se confondent. On leur donne trois repères, tous discrets pour rester dans le ton de la page : • un médaillon d'icône (vert très pâle, symbole gris-vert) qui identifie le public avant même la lecture du titre ; • un filet vert→or en tête de carte, à demi tracé au repos, qui se complète au survol ; • un fond légèrement teinté de vert vers le bas. ----------------------------------------------------------------------------- */ .carte--public { overflow: hidden; /* pour que le filet de tête épouse l'arrondi */ background: linear-gradient(180deg, rgba(0, 108, 104, 0) 55%, rgba(0, 108, 104, .055) 100%), var(--vh-blanc); } .carte--public::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--accent, var(--vh-vert)) 0%, var(--vh-or) 100%); opacity: .4; transform: scaleX(.4); transform-origin: left center; transition: opacity var(--vh-t) var(--vh-easing), transform var(--vh-t) var(--vh-easing); } .carte--public:hover::before, .carte--public:focus-within::before { opacity: 1; transform: scaleX(1); } /* « Professionnels de l'éducation » est plus long que la colonne : sans césure, le mot débordait de la carte. On réduit légèrement le titre et on autorise la coupure (l'attribut lang="fr" du document fournit le dictionnaire de césure). */ .carte--public .h3 { font-size: clamp(1.1rem, 1.02rem + .45vw, 1.3rem); hyphens: auto; overflow-wrap: break-word; } .carte__icone--public { width: 2.75rem; height: 2.75rem; margin-bottom: .85rem; border: 1px solid rgba(0, 108, 104, .16); border-color: color-mix(in srgb, var(--accent, var(--vh-vert)) 24%, transparent); background: rgba(0, 108, 104, .07); background: color-mix(in srgb, var(--accent, var(--vh-vert)) 9%, var(--vh-blanc)); color: var(--vh-encre-doux); /* gris-vert : jamais l'or sur fond clair */ transition: background var(--vh-t) var(--vh-easing), border-color var(--vh-t) var(--vh-easing), color var(--vh-t) var(--vh-easing), transform var(--vh-t) var(--vh-easing); } .carte__icone--public svg { width: 1.375rem; height: 1.375rem; } .carte--public:hover .carte__icone--public, .carte--public:focus-within .carte__icone--public { background: rgba(0, 108, 104, .14); background: color-mix(in srgb, var(--accent, var(--vh-vert)) 18%, var(--vh-blanc)); border-color: rgba(0, 108, 104, .3); border-color: color-mix(in srgb, var(--accent, var(--vh-vert)) 40%, transparent); color: var(--vh-vert); transform: translateY(-2px) rotate(-4deg); } /* --- Une couleur par public --- Les quatre cartes étaient rigoureusement identiques : même filet vert-or, même pastille verte. Sur 13 000 px de page où le corps ne porte aucune couleur, cela pesait dans l'impression de tristesse. Chacune reçoit donc une teinte DE LA CHARTE — vert, or, rouge, vert profond — portée par le filet de tête et par la pastille de l'icône. Le glyphe, lui, garde --vh-encre-doux : sur fond clair l'or ne sert qu'aux filets, bordures et puces, jamais à un trait qui se lit (CONTRAT §2). Les déclarations rgba() qui précèdent chaque color-mix() sont le repli des navigateurs qui ne connaissent pas la fonction : ils retrouvent exactement l'aspect d'avant, en vert. */ .carte--public:nth-of-type(1) { --accent: var(--vh-vert); } .carte--public:nth-of-type(2) { --accent: var(--vh-or); } .carte--public:nth-of-type(3) { --accent: var(--vh-rouge); } .carte--public:nth-of-type(4) { --accent: var(--vh-vert-fonce); } /* ============================================================================= 09. BARRE DE PROGRESSION + BARRE D'ANNONCE ============================================================================= */ /* Fine barre de lecture en haut de page ; app.js pilote sa largeur. */ [data-progression-scroll] { position: fixed; top: 0; left: 0; z-index: 120; width: 0; height: 3px; background: var(--vh-degrade-or); background-color: var(--vh-or); box-shadow: 0 0 12px rgba(207, 174, 31, .6); transition: width .12s linear; pointer-events: none; will-change: width; } /* Barre d'annonce collante. */ [data-annonce] { --vh-texte: var(--vh-blanc); --vh-accent: var(--vh-or-clair); position: sticky; top: 0; z-index: 90; /* Vert de nuit hors direct, et non plus le quasi-noir #0B0F0E : celui-ci n'appartenait pas à la charte (15 % de saturation contre 97 % pour le vert de marque) et faisait, avec le pied de page, 1 133 px de deuil aux deux bouts du document. Le vert de nuit reste plus sombre que l'en-tête, et le filet doré du bas continue de les séparer. La bascule en rouge pendant le direct n'en est que plus franche. */ background: var(--vh-vert-nuit); color: var(--vh-blanc); font-size: clamp(.8125rem, .78rem + .2vw, .9375rem); font-weight: 600; text-align: center; border-bottom: 1px solid rgba(207, 174, 31, .35); transition: background-color var(--vh-t) var(--vh-easing); } /* Le HTML peut poser soit un qui enveloppe tout, soit un

+ un frères dans un .container : les deux cas sont couverts. */ [data-annonce] .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3rem .9rem; min-height: 44px; padding-block: .45rem; } [data-annonce] p { margin: 0; } [data-annonce] a { display: inline-flex; align-items: center; gap: .4em; min-height: 32px; color: var(--vh-blanc); font-weight: 800; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .55); text-underline-offset: .22em; } [data-annonce] a:hover { color: var(--vh-or-clair); text-decoration-color: currentColor; } [data-annonce] > a:only-child { display: flex; justify-content: center; min-height: 44px; padding: .5rem var(--vh-padding-lateral); text-decoration: none; } [data-annonce-texte] { display: inline-block; } /* Mode EN DIRECT : rouge pulsant (classe posée par app.js). */ [data-annonce].is-live { background: var(--vh-rouge); border-bottom-color: rgba(255, 255, 255, .35); animation: vh-pulsation 1.8s ease-in-out infinite; } [data-annonce].is-live a:hover { color: var(--vh-blanc); text-decoration: underline; } [data-annonce].is-live [data-annonce-texte] { font-weight: 800; letter-spacing: .02em; } @keyframes vh-pulsation { 0%, 100% { background-color: var(--vh-rouge); box-shadow: 0 0 0 rgba(177, 32, 41, 0); } 50% { background-color: #C8262F; box-shadow: 0 6px 22px rgba(177, 32, 41, .55); } } /* ============================================================================= 10. EN-TÊTE DE SITE + MENU (burger mobile) Le lot index pose un

sans classe, contenant .container, [data-menu-bouton] et