/* Vigie_Lens — styles du site public. Valeurs reprises de reference/tokens.css et des styles en ligne de reference/maquette_html/ (générés par generateurs_maquette/). */ :root { --noir: #010100; --noir-1: #000000; --noir-2: #4D4D4D; --noir-3: #808080; --noir-4: #999999; --noir-5: #B2B2B2; --noir-6: #CCCCCC; --noir-7: #E5E5E5; --noir-60: #676766; --gris-30: #F6F5F4; --piste: #ECECE9; --blanc: #FFFFFF; --sierra: #B65F3C; --sierra-50: #D39F8A; --font-texte: 'Zen Kaku Gothic New', system-ui, sans-serif; --font-chiffres: 'TASA Explorer', 'Zen Kaku Gothic New', sans-serif; --verre-actif: rgba(255,255,255,.5); --barre-verre: rgba(255,255,255,.72); --ombre-actif: 1px 2px 6px rgba(1,1,0,.28); --ombre-survol-carte: 0 12px 32px rgba(1,1,0,.16), 0 2px 8px rgba(1,1,0,.1); --hachures: repeating-linear-gradient(135deg, #E5E5E5 0 4px, #B2B2B2 4px 6px); /* Fond de ligne à donnée fragile (base trop faible, vues encore partielles) : hachures très discrètes, distinctes du fond uni de survol et de sélection. */ --hachures-ligne: repeating-linear-gradient(135deg, transparent 0 6px, rgba(1, 1, 0, .05) 6px 8px); } * { box-sizing: border-box; } /* Barre de défilement toujours présente (vide si la page ne défile pas) : même largeur utile sur toutes les pages, qu'elles défilent (pages outils) ou non (accueil). Le menu ne bouge pas d'une page à l'autre. (scrollbar-gutter seul n'est pas appliqué par Edge à la racine.) */ html { overflow-y: scroll; } body { margin: 0; background: var(--blanc); font-family: var(--font-texte); color: var(--noir); } a { color: var(--noir); } a:hover { color: var(--noir-60); } summary::-webkit-details-marker { display: none; } svg { flex-shrink: 0; } button { font: inherit; } [hidden] { display: none !important; } .page { width: 1440px; margin: 0 auto; display: flex; flex-direction: column; background: var(--blanc); } /* Fenêtre plus étroite que 1440 px (--z et data-reduit posés par base.html / vigie.js) : barre et page sont réduites ensemble ; sous le plancher de 0,66, la page défile en largeur. */ body { min-width: calc(1440px * var(--z, 1)); } .barre, .page { zoom: var(--z, 1); } /* La barre, réduite avec la page, garde width: 100 % : le zoom résout le pourcentage sur la largeur de la fenêtre, elle reste donc bord à bord (mesuré sous Edge, 30/09/2026). */ /* ---- Barre de navigation (brand.navbar) : pleine largeur de l'écran, collée en haut ---- */ .barre { position: sticky; top: 0; z-index: 20; width: 100%; height: 89px; display: flex; align-items: center; justify-content: space-between; padding: 24px 42px; /* Verre : la page qui défile passe en flou sous la barre. L'ombre est une box-shadow (et non plus un filter: drop-shadow, qui empêche le flou d'arrière-plan). */ background: var(--barre-verre); box-shadow: 0 0 1.5px rgba(0,0,0,.25); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); } .barre .logo { display: flex; } .nav-pilules { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; padding: 4px; border-radius: 333px; background: var(--gris-30); } .nav-pilules a { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 333px; color: var(--noir-60); text-decoration: none; font-size: 16px; font-weight: 500; white-space: nowrap; } /* Icônes du menu en terre de Sienne, comme les étiquettes des cartes de l'accueil. */ .nav-pilules a svg path { stroke: var(--sierra); } .nav-pilules a[aria-current="page"] { background: var(--verre-actif); box-shadow: var(--ombre-actif); backdrop-filter: blur(10px); color: var(--noir); } /* Sélecteur animé (vigie.js) : une seule pilule de verre qui glisse sous les entrées. */ .nav-pilules a { position: relative; z-index: 1; transition: color .3s ease; } .nav-indicateur { position: absolute; z-index: 0; top: 4px; left: 0; height: calc(100% - 8px); width: 0; border-radius: 333px; background: var(--verre-actif); box-shadow: var(--ombre-actif); backdrop-filter: blur(10px); pointer-events: none; transition: transform .3s cubic-bezier(.4, 0, .2, 1), width .3s cubic-bezier(.4, 0, .2, 1); } .nav-pilules.anime a[aria-current="page"] { background: transparent; box-shadow: none; backdrop-filter: none; } .nav-pilules.en-route a[aria-current="page"] { color: var(--noir-60); } .nav-pilules.en-route a.cible { color: var(--noir); } @media (prefers-reduced-motion: reduce) { .nav-indicateur, .nav-pilules a { transition: none; } } main { display: flex; flex-direction: column; gap: 24px; padding: 67px 42px 42px; } /* ---- Typographie ---- */ .tasa { font-family: var(--font-chiffres); } .meta { font-family: var(--font-chiffres); font-size: 12px; font-weight: 500; color: var(--noir-3); } .surtitre, .th { font-family: var(--font-chiffres); font-size: 12px; font-weight: 500; color: var(--noir-3); text-transform: uppercase; } h1 { margin: 0; font-size: 32px; font-weight: 500; line-height: 1.2; color: var(--noir-1); } .carte h2 { margin: 0; font-size: 24px; font-weight: 500; line-height: 1.2; color: var(--noir-1); } .texte-sec { margin: 0; font-size: 16px; font-weight: 400; color: var(--noir-60); } .num16 { font-family: var(--font-chiffres); font-size: 16px; font-weight: 500; color: var(--noir); } /* ---- En-tête de page outil (pages.head) ---- Identique sur toutes les pages outils : titre et mention de calcul (à droite) sur une ligne, puis texte de présentation sur 760 px, terminé par « Méthodologie et sources ». Les sélecteurs de période sont dans les cartes. */ .entete { display: flex; flex-direction: column; gap: 10px; margin-bottom: 43px; } .entete-ligne { display: flex; align-items: flex-start; justify-content: space-between; gap: 48px; } /* Titre remonté pour que le haut de ses lettres soit au niveau de la mention de calcul (écart de 7,5 px mesuré sous Edge, 05/10/2026) ; le texte en dessous ne bouge pas et gagne de l'air. */ .entete-ligne h1 { position: relative; top: -7.5px; } .entete-droite { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; } /* ---- Grilles des pages outils : proportions de la maquette à 1440 px ---- */ .grille-page { display: grid; gap: 24px; } /* Kiosque : une seule carte, tableau à gauche et histogramme à droite, élargi vers la gauche au détriment du tableau. */ .grille-kiosque { grid-template-columns: minmax(0, 1fr); } .kiosque-corps { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 636px; grid-template-rows: minmax(0, 1fr); gap: 48px; } .kiosque-col { display: flex; flex-direction: column; min-height: 0; } /* Sous l'en-tête de carte (21/10/2026), le contenu des deux colonnes descend de 16 px, repris sur l'écart suivant : tableau et histogramme gardent leur taille (le texte et le tableau de gauche : styles en ligne de kiosque.html). */ .kiosque-col > .carte-tete { margin-top: 44px; } .kiosque-col > .zone-graphe { flex: 1; min-height: 0; margin-top: 20px; } .carte h3.titre-histogramme { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.3; color: var(--noir-1); } .grille-radar { grid-template-columns: 440px minmax(0, 1fr); } .grille-pulse { grid-template-columns: 464px minmax(0, 1fr); } /* Taille de base = taille des cartes quand on déroule un candidat (Pulse) ou un thème (Radar), mesurée le 10/10/2026 : la page ne bouge plus à l'ouverture d'une ligne. */ .ecran > .grille-pulse { min-height: 655px; } .ecran > .grille-radar { min-height: 643px; } .grille-joute { grid-template-columns: 420px minmax(0, 1fr); align-items: start; } /* ---- Pilules (brand.period / pages.pills) ---- */ .pilules { display: flex; align-items: center; padding: 4px; border-radius: 333px; background: var(--gris-30); } .pilules button { padding: 8px 16px; border: none; border-radius: 333px; background: transparent; font-size: 16px; font-weight: 500; color: var(--noir-60); cursor: pointer; white-space: nowrap; } .pilules button[aria-pressed="true"] { background: var(--verre-actif); box-shadow: var(--ombre-actif); backdrop-filter: blur(10px); color: var(--noir); } /* Même pilule de verre glissante que la barre de navigation (vigie.js). */ .pilules { position: relative; } .pilules button { position: relative; z-index: 1; transition: color .3s ease; } .pilules.anime button[aria-pressed="true"] { background: transparent; box-shadow: none; backdrop-filter: none; } .pilules.en-route button[aria-pressed="true"] { color: var(--noir-60); } .pilules.en-route button.cible { color: var(--noir); } @media (prefers-reduced-motion: reduce) { .pilules button { transition: none; } } /* ---- Cartes (brand.card) ---- */ .carte { display: flex; flex-direction: column; padding: 24px; border-radius: 24px; background: var(--gris-30); min-height: 0; overflow: hidden; } .carte-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .carte-tete.centre { align-items: center; } .carte-tete .surtitre { white-space: nowrap; flex-shrink: 0; } /* ---- En-têtes de cartes (charte du 21/10/2026) ---- Un bandeau d'un gris à peine plus soutenu que la carte (à mi-chemin vers --piste), fermé par un trait gris (--noir-7) d'un bord à l'autre. Il ne prend aucune place : la carte et son contenu restent où ils étaient. - Accueil : sous l'étiquette, trait à 56 px ; l'étiquette remonte de 5 px pour être centrée dans le bandeau. - Pages outils (sauf Duel) : trait à 84 px du haut de la carte, partout (titres jusqu'à 64 px, 72 px pour Kiosque ; contenus à partir de 98 px, mesuré) ; le bandeau se peint sous le contenu de la carte (isolation). Écran : les cartes d'un candidat sont rangées dans .detail-ecran. Synthèse : la carte d'un jour ne coupe pas ce qui dépasse (le fil entre deux jours), le bandeau porte donc lui-même l'arrondi du haut. */ :root { --entete-carte: color-mix(in srgb, var(--piste) 45%, var(--gris-30)); } .vl-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 57px; pointer-events: none; background: var(--entete-carte); box-shadow: inset 0 -1px 0 var(--noir-7); } .vl-card > .etiquette { position: relative; top: -5px; z-index: 1; } body:not([data-page="duel"]) .grille-page > .carte, .detail-ecran > .carte, .syn .syn-jour { position: relative; isolation: isolate; } body:not([data-page="duel"]) .grille-page > .carte::before, .detail-ecran > .carte::before, .syn .syn-jour::before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; height: 85px; border-radius: 24px 24px 0 0; pointer-events: none; background: var(--entete-carte); box-shadow: inset 0 -1px 0 var(--noir-7); } /* Sélecteurs à pilules dans les cartes (jours, candidats, vues…) : la capsule se rapproche du blanc, cernée d'un filet clair, pour ressortir sur le bandeau ; la pilule active ne change pas. */ :root { --capsule-carte: color-mix(in srgb, var(--blanc) 70%, var(--gris-30)); } body:not([data-page="duel"]) .carte .pilules { background: var(--capsule-carte); box-shadow: inset 0 0 0 1px var(--noir-7); } /* Titre des pages outils : le « _ » de l'accueil clignote à la fin, en terre de Sienne. */ :is([data-page="synthese"], [data-page="pulse"], [data-page="radar"], [data-page="kiosque"], [data-page="signal"], [data-page="ecran"], [data-page="duel"]) .entete-ligne h1::after { content: "_"; margin-left: .04em; color: var(--sierra); animation: vl-curseur 1.1s steps(1) infinite; } @media (prefers-reduced-motion: reduce) { .entete-ligne h1::after { animation: none; } } /* Tête de carte avec sélecteur de période à droite : titre et surtitre côte à côte à gauche. La pilule, plus haute que le titre, déborde dans le padding (marges négatives) : le contenu de la carte commence à la même hauteur qu'avant. */ .carte-tete.avec-periode { align-items: center; margin: -8px 0; } .titre-sous { display: flex; align-items: baseline; gap: 12px; min-width: 0; } /* Kiosque : titre suivi des pilules de vue. Depuis le 21/10/2026, l'en-tête remonte de 8 px comme sur les autres outils (pilules à la même place sous le trait d'en-tête) ; le contenu des colonnes garde sa place (marges plus bas). */ .grille-kiosque .titre-sous { align-items: center; gap: 24px; } .zone-graphe { margin-top: 48px; padding: 24px; border-radius: 24px; background: rgba(255,255,255,.7); } .zone-graphe.pile { display: flex; flex-direction: column; gap: 16px; } .graphe { position: relative; width: 100%; } .graphe svg { display: block; } .note-graphe { margin: 12px 0 0; font-size: 12px; font-weight: 500; color: var(--noir-60); } /* Pulse : mention des « Autres candidats » juste sous la dernière ligne du tableau, alignée sur les lignes. Le tableau prend sa hauteur naturelle (il défile seulement si la carte manque de place) ; la carte garde sa taille. */ .note-autres { flex: none; padding: 0 20px; line-height: 1.4; } .grille-pulse .tableau.defile { flex: 0 1 auto; } /* Duel : choix du scénario PULSE (Philippe / Attal) dans la carte du titulaire, à droite de la ligne « … l’emporte ». Pilule réduite et marges négatives : la ligne garde sa hauteur, la carte reste alignée sur les trois autres. */ .grille-duels .ligne-gagnant { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; } .grille-duels .duel .ligne-gagnant .gagnant { margin-top: 0; } .grille-duels .choix-scenario { flex: none; margin: -4px 0; padding: 2px; } .grille-duels .choix-scenario button { padding: 3px 10px; font-size: 12px; } /* Les deux variantes du duel partagent le titre et le sélecteur ; seul le corps change. */ .grille-duels .duel-corps { display: flex; flex-direction: column; flex: 1; min-height: 0; } /* ---- Pastilles (brand.delta / brand.chip) ---- */ .pastille { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--noir-7); white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--noir-1); } .pastille.hausse { background: var(--sierra-50); } .pastille svg path { stroke: var(--noir-1); } .pastille.vide { background: transparent; color: var(--noir-3); } /* Tonalité KIOSQUE : mêmes couleurs que les bâtons de l'histogramme et sa légende (vues. pastille_tonalite). Neutre sous le seuil ; positive en terre de Sienne, négative en gris jusqu'au noir, sur 4 paliers d'intensité. Texte blanc ou noir selon le fond. */ .pastille[class*="ton-"] svg path { stroke: currentColor; } .pastille.ton-neutre { background: var(--noir-6); color: var(--noir-1); } .pastille.ton-p0 { background: #E8C9BC; color: #010100; } .pastille.ton-p1 { background: #D39F8A; color: #010100; } .pastille.ton-p2 { background: #B65F3C; color: #FFFFFF; } .pastille.ton-p3 { background: #7A3E26; color: #FFFFFF; } .pastille.ton-n0 { background: var(--noir-4); color: var(--noir-1); } .pastille.ton-n1 { background: var(--noir-3); color: var(--noir-1); } .pastille.ton-n2 { background: var(--noir-2); color: var(--blanc); } .pastille.ton-n3 { background: var(--noir); color: var(--blanc); } .peu-fiable { opacity: .45; } /* ---- Points, barres ---- */ .point { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .point.blanc, .remplissage.blanc { box-shadow: inset 0 0 0 1px var(--noir-6); } .piste { display: block; height: 10px; border-radius: 999px; background: var(--piste); } .remplissage { display: block; height: 10px; border-radius: 999px; } .piste.trou { background: var(--hachures); } .nom { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; } /* ---- Tableaux ---- */ .tableau { display: flex; flex-direction: column; } .tableau .tete, .tableau .ligne { display: grid; gap: 16px; align-items: center; border-bottom: 1px solid var(--noir-7); } .tableau .tete { padding-bottom: 12px; } .tableau .ligne { padding: 14px 0; } .kiosque-grille { grid-template-columns: minmax(0, 1fr) 170px 110px; } /* Colonnes taillées sur les titres (« i » compris), le contenu des lignes étant plus étroit : chaque titre garde au moins 12 px d'écart avec le suivant. */ .pulse-grille { grid-template-columns: 104px 56px 84px minmax(0, 1fr) 22px; gap: 12px !important; } .pulse-grille .th { white-space: nowrap; } /* En-têtes calés à droite : un titre plus large que sa colonne déborde vers la gauche, dans la place libre de la colonne Candidat. */ .tableau .tete.pulse-grille > .droite { display: flex; justify-content: flex-end; } .barre-part { display: grid; grid-template-columns: minmax(0, 1fr) 64px; align-items: center; gap: 12px; } button.ligne { width: 100%; border: none; border-bottom: 1px solid var(--noir-7); background: transparent; text-align: left; cursor: pointer; color: var(--noir); border-radius: 0; } button.ligne:hover { background: rgba(255,255,255,.55); } button.ligne[aria-pressed="true"] { background: rgba(255,255,255,.8); } button.ligne[aria-pressed="true"] .nom { font-weight: 700; } .droite { text-align: right; } /* ---- QUALIF (pages.qual) ---- */ .qualif { display: flex; align-items: center; gap: 8px; } .segments { display: flex; gap: 2px; } .segments span { display: block; width: 6px; height: 14px; border-radius: 2px; background: var(--noir-7); } .segments span.plein { background: var(--sierra); } /* ---- Barres horizontales (pages.hbar) ---- */ .hbar { display: grid; grid-template-columns: 130px minmax(0, 1fr) 64px; align-items: center; gap: 16px; } /* ---- Légende de l'histogramme ---- */ .legende { display: flex; flex-wrap: wrap; gap: 8px 16px; } .legende > span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; } .legende i { display: inline-block; width: 12px; height: 10px; border-radius: 3px; } .legende .rampe { display: inline-flex; gap: 2px; } .legende .rampe i { width: 8px; } /* ---- Bandeau d'indisponibilité (brand.warn) ---- */ .bandeau { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 16px; border-radius: 333px; background: var(--gris-30); font-size: 16px; font-weight: 500; color: var(--noir); } .bandeau svg { color: var(--sierra); } .bandeau svg path { stroke: var(--sierra); } /* ---- Joute ---- */ .debats { display: flex; flex-direction: column; gap: 24px; } .debat { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 24px; border: none; border-radius: 24px; background: var(--gris-30); cursor: pointer; text-align: left; color: var(--noir); } .debat[aria-pressed="true"] { background: var(--blanc); box-shadow: inset 0 0 0 1.5px var(--sierra); } .debat .infos { display: flex; flex-direction: column; gap: 8px; } .debat .quand { font-size: 16px; font-weight: 500; } .debat .qui { font-size: 16px; font-weight: 400; color: var(--noir-60); } .note-grande { font-family: var(--font-chiffres); font-size: 32px; font-weight: 700; } .note-sur { font-family: var(--font-chiffres); font-size: 16px; font-weight: 500; color: var(--noir-3); } .joute-grille { display: grid; grid-template-columns: 120px minmax(0, 1fr) 64px 180px; gap: 16px; align-items: center; } .jauge-ligne { display: flex; align-items: center; gap: 12px; } .jauge { position: relative; display: block; width: 110px; height: 10px; border-radius: 999px; background: var(--piste); } .jauge .rempli { position: absolute; top: 0; height: 10px; border-radius: 999px; } .jauge .zero { position: absolute; top: -3px; left: 54px; width: 2px; height: 16px; border-radius: 1px; background: var(--noir-3); } /* ---- Écran ---- */ .grille-ecran { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; } /* Détail d'un candidat : pas de défilement, les 10 vidéos tiennent dans la carte (7 avant le 23/10/2026). */ .detail-ecran { min-height: 0; display: flex; flex-direction: column; } .detail-ecran > .carte { flex: 1; } /* Tableau dans la carte blanche standard (48 px sous le titre, 24 px de marge intérieure), comme les graphiques des autres onglets. */ .carte > .zone-graphe.zone-videos { overflow: hidden; } /* Même hauteur de ligne quel que soit le nombre de vidéos ; 10 lignes de 48 px tiennent dans la carte à partir d'une fenêtre de 925 px de haut (mesuré le 23/10/2026). Pas de trait sous la dernière. */ .zone-videos .tableau .ligne.videos-grille { height: 48px; min-height: 0; } /* Ligne à donnée fragile (tous les outils) : hachures discrètes, posées en image pour rester visibles sous le fond de survol ou de sélection ; l'explication est dans l'info-bulle. */ /* Motif calé sur la fenêtre (fixed) : les rayures se prolongent d'une ligne à l'autre au lieu de repartir du haut de chaque ligne. */ .tableau .ligne.fragile { background-image: var(--hachures-ligne); background-attachment: fixed; } /* Vidéo de moins de 3 jours : fond débordant de 8 px de chaque côté pour ne pas décaler les colonnes ; vues et likes en gris. */ .zone-videos .tableau .ligne.videos-grille.jeune { margin: 0 -8px; padding-left: 8px; padding-right: 8px; } .videos-grille.jeune .num16.droite, .videos-grille.jeune .likes { color: var(--noir-3); } .zone-videos .tableau .ligne.videos-grille:last-child { border-bottom: none; } /* Colonnes chiffrées à largeur fixe (contenu le plus long + marge) ; seul le nom s'étire. */ .ecran-grille { grid-template-columns: minmax(0, 1fr) 150px 96px 56px 96px; gap: 12px !important; }.ecran-grille > span { min-width: 0; white-space: nowrap; } .ecran-grille .qualif { justify-content: flex-start; } .videos-grille { grid-template-columns: 98px 92px 100px minmax(0, 1fr) 64px 60px; gap: 8px !important; font-size: 16px; } .videos-grille .type-video { font-size: 14px; white-space: nowrap; } .videos-grille .th { white-space: nowrap; } .videos-grille .likes { font-size: 16px; font-weight: 400; color: #808080; } /* Lignes à la même hauteur que celles du tableau des candidats (pastille de tendance comprise), pour que les deux tableaux se lisent sur la même ligne. */ .tableau .ligne.ecran-grille, .tableau .ligne.videos-grille { min-height: 59px; padding-top: 0; padding-bottom: 0; } /* Vues de chaque vidéo en barre, à l'échelle des 7 vidéos du candidat ; la plus récente en terre de Sienne, moins de 3 jours hachurée (même logique que la carte Écran de l'accueil). */ .barre-video { display: block; height: 10px; } .barre-video .b { display: block; height: 10px; border-radius: 999px; background: var(--noir-6); } .videos-grille > span { min-width: 0; } .tableau .tete.videos-grille, .tableau .ligne.videos-grille { padding-left: 0; padding-right: 0; } .tendance-cellule { display: flex; align-items: center; gap: 8px; } /* La tendance est la mesure principale : pastille plus grande. La mobilisation passe au second plan : jauge grise plus fine, note en gris, comme les autres informations secondaires. */ .ecran-grille .tendance-cellule .pastille { padding: 5px 12px; font-size: 16px; } .ecran-grille .qualif .num16 { font-size: 14px; font-weight: 500; color: var(--noir); } .ecran-grille .nb-videos { color: var(--noir-3); } .mention { font-size: 12px; font-weight: 500; color: var(--noir-3); white-space: nowrap; } /* ---- Duel : 4 cartes, un duel par carte ; finaliste en gris, adversaire en terre de Sienne ---- */ .grille-duels .legende-carte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 10px; margin-top: 8px; font-size: 11px; font-weight: 500; color: var(--noir-60); } .grille-duels .legende-carte span { display: flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .grille-duels .carre { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 3px; } /* Cartes à la hauteur de l'écran, comme les autres outils ; pas de vide en bas : le tableau des reports occupe la hauteur libre et ses lignes se la partagent. */ .grille-duels { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grille-duels .tableau { flex: 1; min-height: 0; } .grille-duels .tableau .ligne { flex: 1; min-height: 0; } .grille-duels .carte.duel { gap: 0; } .grille-duels .duel h2 { font-size: 20px !important; white-space: nowrap; } .grille-duels .duel .gagnant { margin-top: 4px; font-size: 13px; font-weight: 500; color: var(--noir-60); } .grille-duels .scores { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 16px; } .grille-duels .scores > div { display: flex; flex-direction: column; gap: 2px; } .grille-duels .scores > div.droite { align-items: flex-end; } .grille-duels .scores .nom { font-size: 13px; } .grille-duels .scores .note-grande { font-size: 26px; } .grille-duels .scores .perd { font-weight: 400; color: var(--noir-3); } .grille-duels .barre-duel { display: flex; align-items: center; gap: 2px; height: 44px; margin-top: 12px; } .grille-duels .barre-duel .seg { display: block; min-width: 0; height: 34px; } .grille-duels .barre-duel .debut { border-radius: 8px 0 0 8px; } .grille-duels .barre-duel .fin { border-radius: 0 8px 8px 0; } .grille-duels .barre-duel .separateur { flex: none; width: 3px; height: 44px; margin: 0 2px; border-radius: 2px; background: var(--noir-1); } .grille-duels .report-grille { grid-template-columns: minmax(0, 1fr) 40px 40px 36px; gap: 6px !important; } .grille-duels .tableau .tete.report-grille, .grille-duels .tableau .ligne.report-grille { padding-left: 2px; padding-right: 2px; } .grille-duels .tableau .tete.report-grille { padding-bottom: 6px; } .grille-duels .tableau .tete.report-grille > span { display: flex; justify-content: flex-end; } .grille-duels .tableau .tete.report-grille > span:first-child { justify-content: flex-start; } .grille-duels .tableau .ligne.report-grille { padding-top: 6px; padding-bottom: 6px; font-size: 13px; } .grille-duels .report-grille .n { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .grille-duels .report-grille .p1 { margin-left: 4px; font-family: var(--font-chiffres); font-size: 11px; color: var(--noir-3); } .grille-duels .report-grille .num16 { font-size: 13px; } .grille-duels .report-grille .gris { color: var(--noir-3); font-weight: 400; } .grille-duels .report-grille.dynamique .n { font-weight: 400; color: var(--noir-60); } /* ---- Accueil (home.py) ---- */ .date-jour { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--noir); text-transform: uppercase; letter-spacing: 1.05px; line-height: 8px; } .date-jour .puce { display: block; width: 8px; height: 8px; border-radius: 333px; background: var(--sierra-50); } .grille-accueil { margin-top: 43px; display: grid; grid-template-columns: 674px 658px; gap: 24px; align-items: start; } .vl-card { display: flex; flex-direction: column; gap: 42px; padding: 24px; border-radius: 24px; background: var(--gris-30); color: var(--noir); text-decoration: none; overflow: hidden; min-height: 0; transition: box-shadow .2s ease; } .vl-card:hover { box-shadow: var(--ombre-survol-carte); color: var(--noir); } .vl-card h2 { margin: 0; font-size: 24px; font-weight: 500; line-height: normal; color: var(--noir-1); text-box: trim-both cap alphabetic; } .etiquette { display: flex; align-items: center; gap: 8px; font-family: var(--font-chiffres); font-size: 16px; font-weight: 500; color: var(--noir-3); text-transform: uppercase; text-box: trim-both cap alphabetic; } .etiquette svg path { stroke: var(--sierra); } /* Accueil par ordre d'importance (10/10/2026). Largeur inchangée : 674 + 24 + 658 = 1356 px. Deux piles de cartes de même hauteur (1173 px) ; Pulse garde sa taille d'avant (658 × 643 px) et ses espacements servent de repère à toutes les cartes (marge intérieure 24 px, étiquette -> titre 32 px, titre -> contenu 37 px, dernier contenu -> bord 24 px). Gauche : Signal 422, Radar 305 (inchangé), Kiosque 398 ; droite : Pulse 643, Duel 241 et Écran 241 (de même taille). */ .acc-col { display: flex; flex-direction: column; gap: 24px; min-width: 0; } .acc-col > .vl-card { flex: none; } .c-signal { height: 422px; } .c-kiosque { height: 398px; } .c-pulse { height: 643px; } .c-duel, .c-ecran { height: 241px; } .c-signal > .acc-bloc, .c-kiosque > .acc-bloc, .c-duel > .acc-bloc, .c-ecran > .acc-bloc { flex: 1; min-height: 0; } /* Titre de carte avec sa période à droite (comme .carte-tete des pages outils). */ .acc-titre { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .acc-titre .surtitre { white-space: nowrap; } /* Signal : carte de chaleur des 10 derniers soirs, datée (jour, jj/mm), 3 candidats ; dessous, dans une carte blanche comme le graphique de Pulse (.zone-graphe), « Candidat : titre » et le début du texte du dernier soir, qui s'estompe vers le bas. Noms comme ceux de la carte Duel (16 px) ; colonne du dernier soir en blanc ; mêmes teintes que la page Signal. */ .acc-signal-corps { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 24px; } .acc-chaleur { flex: 1; min-height: 0; display: grid; grid-template-columns: max-content repeat(var(--j), minmax(0, 1fr)); grid-template-rows: 30px repeat(var(--n), minmax(24px, 1fr)); } .acc-chaleur-nom { grid-column: 1; padding-right: 16px; color: var(--noir-1); white-space: nowrap; } .acc-chaleur-jour { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; min-width: 0; padding: 0 2px; border-radius: 6px; } .acc-chaleur-jour.dernier { background: var(--blanc); } .acc-chaleur-jour i { display: block; margin: 2px 0; border-radius: 5px; background: var(--noir-6); } .acc-chaleur-jour.sans-note i { background: var(--hachures-ligne), var(--piste); opacity: .6; } .acc-chaleur i.t1 { background: #E8C9BC; } .acc-chaleur i.t2 { background: var(--sierra-50); } .acc-chaleur i.t3 { background: var(--sierra); } .acc-chaleur i.b, .acc-chaleur i.n { background: var(--noir-4); } .acc-date { display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-chiffres); font-size: 12px; font-weight: 500; line-height: 14px; color: var(--noir-3); } .acc-note { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; margin-top: 0; overflow: hidden; } .acc-note p { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 16px; line-height: 22px; font-weight: 400; color: var(--noir-1); } .acc-note p .point { flex: none; margin-top: 6px; } .acc-note p strong { font-weight: 600; } .acc-note p span:not(.point) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } /* ---- Accueil : carte Synthèse (18/10/2026), sur toute la largeur au-dessus des deux piles ---- Mêmes espacements que les autres cartes d'accueil (marge 24 px, étiquette -> titre, titre -> contenu). Deux blocs séparés, chacun avec son titre et sa carte blanche (comme le graphique de Pulse) : à gauche les premières notes du dernier jour figé (une case par outil, icônes en légende) ; à droite le sujet qui domine, dont le texte s'estompe s'il ne tient pas. Un filet « Les outils » la sépare des cartes des outils. */ .c-synthese { margin-bottom: 0; } .acc-syn-corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; } .acc-syn-corps > .acc-bloc { min-width: 0; } .acc-syn-tab { display: flex; flex-direction: column; } .acc-syn-ligne { display: grid; grid-template-columns: 150px 44px 52px minmax(0, 1fr); align-items: center; column-gap: 16px; padding: 8px 0; border-top: 1px solid var(--noir-7); } .acc-syn-tete { padding: 0 0 8px; border-top: 0; } .acc-syn-ligne .nom { display: flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--noir-1); } .acc-syn-note { font: 700 24px/1 var(--font-chiffres); font-variant-numeric: tabular-nums; text-align: right; color: var(--noir-2); } .acc-syn-note.pos { color: var(--sierra); } .acc-syn-var .dp { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; background: var(--noir-7); white-space: nowrap; font: 700 13px var(--font-texte); color: var(--noir-1); } .acc-syn-var .dp.gain { background: var(--sierra-50); } .acc-syn-var .dp.nul { background: transparent; color: var(--noir-3); box-shadow: inset 0 0 0 1px var(--noir-6); } /* légende des cases : sous le tableau, calée à droite (bord droit des couleurs) */ .acc-syn-pied { display: flex; justify-content: flex-end; padding-top: 12px; } .acc-syn-lg { display: flex; align-items: center; gap: 6px; white-space: nowrap; font: 500 11px var(--font-chiffres); color: var(--noir-3); } .acc-syn-carres { display: inline-flex; gap: 2px; } .acc-syn-carres i { display: block; width: 8px; height: 8px; border-radius: 2px; } .acc-syn-outils { display: grid; grid-template-columns: repeat(5, 1fr); justify-items: center; } .acc-syn-outils .ico { display: block; width: 16px; height: 16px; color: var(--sierra); } .acc-syn-bande { display: grid; grid-template-columns: repeat(5, 1fr); height: 28px; border-radius: 8px; overflow: hidden; } .acc-syn-bande i { display: block; border-right: 1px solid var(--blanc); background: var(--noir-6); } .acc-syn-bande i:last-child { border-right: 0; } .acc-syn-bande i.vide { background: var(--hachures); } /* Le sujet qui domine : la carte blanche prend la hauteur de celle des notes (le texte n'agrandit pas la carte) et s'estompe en bas. */ .acc-syn-zone { position: relative; overflow: hidden; } .acc-syn-corps-ev { position: absolute; inset: 24px; overflow: hidden; display: flex; flex-direction: column; gap: 6px; } .acc-syn-corps-ev.coupe { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent); } .acc-syn-ev-nom { font: 500 18px/1.3 var(--font-texte); color: var(--noir-1); } .acc-syn-corps-ev .cnt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font-size: 14px; color: var(--noir-60); } .acc-syn-corps-ev .cnt .nb { font: 700 16px var(--font-chiffres); color: var(--noir-1); } .acc-syn-corps-ev .tend { display: inline-flex; align-items: center; gap: 4px; font: 500 12px var(--font-chiffres); color: var(--noir-3); } .acc-syn-corps-ev .egal { font-weight: 700; } .acc-syn-corps-ev .meta { font: 500 12px var(--font-chiffres); color: var(--noir-3); } .acc-syn-texte { margin: 6px 0 0; font: 400 16px/1.5 var(--font-texte); color: var(--noir-60); } .acc-sep { display: flex; align-items: center; gap: 16px; margin: 36px 0 36px; } .acc-sep::before, .acc-sep::after { content: ""; flex: 1; height: 1px; background: var(--noir-6); } /* Kiosque : 7 candidats, part de couverture (barre) et tonalité (pastille de la page Kiosque). */ .acc-kio { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-between; } .acc-kio-tete { padding-bottom: 6px; } .acc-kio-tete, .acc-kio-ligne { display: grid; grid-template-columns: 150px minmax(0, 1fr) 96px; align-items: center; gap: 16px; } .acc-kio-tete .droite, .acc-kio-ligne .droite { justify-self: end; text-align: right; } .acc-kio-ligne .nom { display: flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--noir-1); } .acc-kio-barre { display: grid; grid-template-columns: minmax(0, 1fr) 54px; align-items: center; gap: 12px; } .acc-kio-barre .num16 { text-align: right; white-space: nowrap; } /* Duel : la barre de la page Duel (voix du 1er tour de chaque finaliste, reports des éliminés vers chacun, trait central) et sa légende ; Écran : trois lignes de 24 px, à hauteur de leur contenu. */ .acc-duels { display: flex; flex-direction: column; gap: 8px; } .acc-duel { display: grid; grid-template-columns: 170px 58px minmax(0, 1fr) 58px; align-items: center; gap: 12px; } .acc-duel .nom { color: var(--noir-1); white-space: nowrap; } .acc-duel .perd { font-weight: 400; color: var(--noir-3); } .c-duel .acc-duels { flex: 1; justify-content: space-between; gap: 0; } .acc-duel-graph { display: flex; align-items: center; gap: 2px; height: 22px; } .acc-duel-graph .seg { display: block; min-width: 0; height: 18px; } .acc-duel-graph .debut { border-radius: 6px 0 0 6px; } .acc-duel-graph .fin { border-radius: 0 6px 6px 0; } .acc-duel-graph i { flex: none; width: 3px; height: 22px; margin: 0 2px; border-radius: 2px; background: var(--noir-1); } .acc-duel-legende { gap: 4px 20px; flex-wrap: nowrap; color: var(--noir-60); } .acc-duel-legende > span { white-space: nowrap; font-size: 12px; } .acc-duel-legende .rampe i { width: 10px; height: 10px; } .acc-pulse-cols { display: flex; align-items: center; justify-content: space-between; } .acc-pulse-col { display: flex; flex-direction: column; gap: 24px; } .acc-pulse-col .nomc { font-size: 16px; font-weight: 500; color: var(--noir-1); line-height: 1; text-box: trim-both cap alphabetic; } .acc-pulse-col .val { display: flex; flex-direction: column; align-items: stretch; gap: 16px; } /* Tendance de l'accueil : pastille allongée sur toute la largeur du chiffre, flèche centrée. */ .acc-pulse-col .val .pastille { justify-content: center; } .acc-valeur { line-height: 44px; font-family: var(--font-chiffres); font-size: 32px; font-weight: 400; color: var(--noir-1); text-box: trim-both cap alphabetic; } .acc-valeur .pc { font-size: 24px; color: var(--noir-3); } .acc-valeur.fort, .acc-valeur.fort .pc { font-weight: 700; } .pile-radar { display: flex; gap: 2px; height: 44px; border-radius: 10px; overflow: hidden; } .pile-radar span { display: block; } .legende-radar { display: flex; flex-wrap: wrap; gap: 8px 14px; } .legende-radar > span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--noir-1); } .legende-radar i { display: inline-block; width: 8px; height: 8px; border-radius: 4px; } .legende-radar i.blanc { box-shadow: inset 0 0 0 1px var(--noir-6); } .legende-radar .v { font-family: var(--font-chiffres); color: var(--noir-2); } .radar-premier { display: flex; align-items: flex-end; gap: 8px; } .radar-premier .v { font-family: var(--font-chiffres); font-size: 32px; font-weight: 700; color: var(--noir-1); line-height: 56px; text-box: trim-both cap alphabetic; } .acc-joute-ligne { display: flex; align-items: center; justify-content: space-between; } .acc-joute-ligne .txt { display: flex; flex-direction: column; text-align: right; font-size: 16px; font-weight: 500; color: var(--noir-1); } /* Carte Écran de l'accueil (21/10/2026) : pour chacun des 3 premiers candidats du tableau de la page Écran, ses 4 dernières vidéos COMPTÉES (3 jours et plus ; celles de moins de 3 jours ne comptent pas dans la tendance) en petites cartes grises, le nombre de vues seulement, de la plus ancienne à la plus récente, puis sa tendance en pastille. Lignes de 28 px, 2 px d'écart : 3 × 28 + 2 × 2 = 88 px, la place qu'avaient les barres divergentes dans la carte (241 px de haut). */ .c-ecran .ec-lignes { display: flex; flex-direction: column; gap: 2px; } .ec-ligne { display: grid; grid-template-columns: 124px minmax(0, 1fr) 96px; align-items: center; column-gap: 16px; height: 28px; } .ec-ligne .nom { display: flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--noir-1); } .ec-cartes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; } .ec-v { display: grid; place-items: center; height: 28px; border-radius: 8px; background: var(--noir-7); font: 700 14px var(--font-chiffres); font-style: normal; font-variant-numeric: tabular-nums; color: var(--noir-1); white-space: nowrap; } .ec-v.vide { background: transparent; box-shadow: inset 0 0 0 1px var(--noir-7); } .ec-ligne .pastille { justify-self: end; min-width: 84px; justify-content: center; } .acc-ecarts-vide { margin: 0; font-size: 14px; color: var(--noir-3); } .b.recente { background: var(--sierra) !important; } .b.partiel { background: var(--hachures) !important; } /* ---- Infobulle des graphiques ---- */ .infobulle { position: fixed; z-index: 30; pointer-events: none; padding: 6px 9px; border-radius: 8px; background: rgba(255,255,255,.4); color: var(--noir); font-family: var(--font-chiffres); font-size: 12px; font-weight: 500; line-height: 1.5; white-space: pre; box-shadow: 0 2px 10px rgba(1,1,0,.08); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } /* Apparition de l'infobulle (vigie.js, montrer) ; en-têtes de colonne qui en portent une : légère mise en valeur au survol, pour signaler qu'une explication existe. */ .infobulle.apparait { animation: infobulle-apparait .18s ease-out; } @keyframes infobulle-apparait { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } /* Ce qui porte une infobulle garde la flèche normale (ni main, ni barre de texte), pour ne pas le confondre avec les éléments cliquables ; les boutons gardent la main. */ [data-infobulle] { cursor: default; } button[data-infobulle] { cursor: pointer; } .th[data-infobulle] { transition: color .15s ease; } .th[data-infobulle]:hover { color: var(--noir-2); } /* Petit « i » cerclé gris à la fin des titres de colonne qui portent une infobulle, toujours 3 px après le mot. Il prend la couleur du titre (et donc sa réaction au survol) et fait partie du titre : son survol montre aussi l'infobulle. Les colonnes ont des largeurs fixes (ou minmax(0, …)) : il ne change ni leur largeur ni la hauteur des lignes. */ .th[data-infobulle] { position: relative; white-space: nowrap; } /* le « i » ne passe jamais seul à la ligne */ /* Même « i » sur les libellés expliqués de la décomposition Pulse (parts en ligne et presse). */ .decompo-info { white-space: nowrap; } .th[data-infobulle]::after, .decompo-info::after { content: 'i'; display: inline-block; width: 11px; height: 11px; margin-left: 3px; box-sizing: border-box; border: 1px solid currentColor; border-radius: 50%; vertical-align: 1px; opacity: .6; font-family: var(--font-texte); font-size: 7.5px; font-style: normal; font-weight: 700; line-height: 9px; text-align: center; text-transform: none; transition: color .15s ease; } @media (prefers-reduced-motion: reduce) { .th[data-infobulle]::after { transition: none; } } /* Duel, « Abst. » : colonne de 36 px collée aux carrés de couleur ; le « i » sort du flux, même écart. */ .report-grille .th[data-infobulle]::after { position: absolute; top: 50%; left: 100%; transform: translateY(-50%); } @media (prefers-reduced-motion: reduce) { .infobulle.apparait { animation: none; } .th[data-infobulle] { transition: none; } } /* Point du jour survolé sur les courbes : grossit depuis la taille du petit point. */ .point-survol { transform-box: fill-box; transform-origin: center; animation: point-grossit .15s ease-out; } @keyframes point-grossit { from { transform: scale(.6); } to { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .point-survol { animation: none; } } /* Infobulle d'un candidat isolé sur la courbe Pulse : une ligne par signal, pastille à droite. */ .infobulle-sous { color: var(--noir-3); } .infobulle-signal { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 4px; } .infobulle .pastille { padding: 2px 8px; font-size: 12px; } .infobulle-point { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 0; } button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--sierra); outline-offset: 2px; } /* ---- Hauteur de la fenêtre (choix 1A / 2A / 3B du 25/09/2026) ---- L'en-tête et les cartes remplissent l'écran sous la barre (89 px + 67 px d'air en haut, 24 px en bas). En dessous d'une hauteur minimale, la page défile au lieu d'écraser les cartes. */ /* --vh : 1 % de la hauteur de fenêtre, ramené à l'échelle de la page réduite. */ .ecran { display: flex; flex-direction: column; height: calc(100 * var(--vh, 1vh) - 89px - 67px - 24px); min-height: 600px; } .ecran > .grille-accueil { flex: none; } /* Pages outils : depuis le texte de présentation long (05/10/2026), les cartes gardent la hauteur qu'elles avaient sous l'ancien en-tête (titre + phrase de 2 lignes + marge = 139 px, plancher 600 px), agrandie de 20 % (05/10/2026) ; le texte s'ajoute au-dessus et la page défile. */ .ecran:not(.accueil) { height: auto; min-height: 0; } /* Hauteur au contenu (10/10/2026) : les cartes prennent la place dont leur contenu a besoin, sans étirement selon la fenêtre. Seul plafond : la hauteur d'une fenêtre de 1080 px (913 px) ; au-delà, tableaux et listes défilent dans la carte. Les graphiques gardent une hauteur minimale (voir plus bas). */ .ecran > .grille-page { flex: none; height: auto; max-height: min(913px, calc((max(100 * var(--vh, 1vh) - 89px - 67px - 24px, 600px) - 139px) * 1.2)); } .grille-page { grid-template-rows: minmax(0, 1fr); } .grille-page > * { min-height: 0; } .grille-kiosque, .grille-joute { align-items: stretch; } /* Tableaux et listes trop longs : défilement dans la carte, en-tête de colonnes figé. */ .defile { flex: 1; min-height: 0; overflow-y: auto; } .tableau.defile .tete { position: sticky; top: 0; z-index: 1; background: var(--gris-30); } .debats.defile { padding: 2px; } /* Graphiques : toute la hauteur libre de leur carte (vigie.js lit la hauteur du conteneur). */ .carte > .zone-graphe { flex: 1; min-height: 0; display: flex; flex-direction: column; } .graphe.flex { flex: 1; min-height: 140px; } .grille-page .graphe.flex { min-height: 360px; position: relative; } /* Le dessin (svg, à la taille du conteneur) ne compte pas dans la hauteur : sinon il retient la carte à sa taille d'origine et elle ne peut plus rétrécir. */ .grille-page .graphe.flex > svg { position: absolute; top: 0; left: 0; } .vl-card { gap: clamp(16px, calc(3.5 * var(--vh, 1vh)), 42px); } .acc-pulse-corps { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: clamp(16px, calc(4.5 * var(--vh, 1vh)), 54px); } .acc-bloc { display: flex; flex-direction: column; gap: clamp(16px, calc(4 * var(--vh, 1vh)), 48px); } .zone-graphe.acc { margin-top: 0; flex: 1; min-height: 0; display: flex; flex-direction: column; } /* Joute : la carte du débat affiché occupe toute la hauteur de la zone. */ .grille-joute > .defile > .carte { min-height: 100%; } /* ---- Accueil : hauteur libre, la page défile (10/10/2026) ---- Plus de réduction de l'ensemble pour tenir dans l'écran : les cartes gardent leur taille. Les espacements, qui suivaient la hauteur de la fenêtre (--vh), sont figés à ceux d'une fenêtre de 1080 px de haut dans .accueil-cadre. */ body[data-page="index"] { --haut: clamp(12px, calc(3 * var(--vh, 1vh)), 28px); --bas: clamp(12px, calc(2.4 * var(--vh, 1vh)), 24px); } body[data-page="index"] main { padding-top: var(--haut); } /* Largeur fixe centrée. */ .accueil-cadre { --vh: 10.8px; width: 1356px; margin-inline: auto; display: flex; flex-direction: column; } .ecran.accueil { min-height: 0; height: auto; } .ecran.accueil .grille-accueil { margin-top: 0; } .ecran.accueil .vl-card { padding: clamp(14px, calc(2.4 * var(--vh, 1vh)), 24px); gap: clamp(10px, calc(3 * var(--vh, 1vh)), 42px); } .ecran.accueil .acc-pulse-corps { gap: clamp(10px, calc(4 * var(--vh, 1vh)), 54px); } .ecran.accueil .acc-bloc { gap: clamp(10px, calc(3.4 * var(--vh, 1vh)), 48px); } .ecran.accueil .acc-pulse-col { gap: clamp(8px, calc(2 * var(--vh, 1vh)), 24px); } .ecran.accueil .acc-pulse-col .val { gap: clamp(6px, calc(1.4 * var(--vh, 1vh)), 16px); } .ecran.accueil .graphe.flex { min-height: 90px; } .acc-radar-corps { display: flex; flex-direction: column; gap: clamp(8px, calc(2 * var(--vh, 1vh)), 24px); } .ecran.accueil .pile-radar { height: clamp(22px, calc(4 * var(--vh, 1vh)), 44px); } .ecran.accueil .radar-premier .v { line-height: clamp(32px, calc(5 * var(--vh, 1vh)), 56px); } .acc-joute-liste { display: flex; flex-direction: column; gap: clamp(8px, calc(3 * var(--vh, 1vh)), 40px); } .acc-joute-ligne svg { width: clamp(56px, calc(9 * var(--vh, 1vh)), 98px); height: clamp(56px, calc(9 * var(--vh, 1vh)), 98px); } /* Texte de présentation de l'accueil (accueil_web) : 1re phrase en noir et en gras, le reste en gris, chiffres clés en gras terre de Sienne ; flèche vers le lien « Méthodologie et sources ». Première chose lue sur le site (05/10/2026) : grand, avec de l'air au-dessus (sous le menu) et en dessous (avant les cartes). Ces marges ne comptent pas dans la hauteur des cartes. */ /* Charte du 21/10/2026 : la 1re phrase est un grand titre sur sa ligne, sa fin (« en mouvement ») en terre de Sienne, suivie du « _ » de Vigie_Lens qui clignote à la place du point (templates/index.html) ; le texte passe dessous. */ .chapeau-accueil { max-width: 1010px; margin: clamp(24px, calc(5 * var(--vh, 1vh)), 56px) 0 clamp(32px, calc(6.5 * var(--vh, 1vh)), 72px); font-size: 18px; font-weight: 400; line-height: 1.6; letter-spacing: -0.01em; color: var(--noir-60); } .chapeau-accueil .tete { display: block; margin-bottom: 16px; font-size: 52px; font-weight: 700; line-height: 1.1; letter-spacing: -.03em; color: var(--noir-1); } .chapeau-accueil .tete em { font-style: normal; color: var(--sierra); } .chapeau-accueil .tete::after { content: "_"; margin-left: .03em; color: var(--sierra); animation: vl-curseur 1.1s steps(1) infinite; } @keyframes vl-curseur { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .chapeau-accueil .tete::after { animation: none; } } .chapeau-accueil strong { font-weight: 700; color: var(--sierra); } /* Lien vers la page « Méthodologie et sources », sous les cartes. */ .accueil-pied { margin: 24px 0 0; font-size: 16px; } .accueil-pied .en-savoir { scroll-margin-bottom: 42px; } /* ---- Barres de défilement minimalistes : fines, sans rail, visibles au survol ---- */ /* Partout (page comprise) : barre fine grise, sans rail ni flèches, au lieu de celle du système. */ html, * { scrollbar-width: thin; scrollbar-color: var(--noir-6) transparent; } .defile { scrollbar-width: thin; scrollbar-color: transparent transparent; transition: scrollbar-color .2s ease; } .defile:hover, .defile:focus-within { scrollbar-color: var(--noir-6) transparent; } /* ---- Radar : tableau de la moyenne 14 jours. Au clic, la courbe est mise en avant. La pastille dit la tendance par une flèche, comme Pulse ; l'écart chiffré est au survol. ---- */ .radar-grille { grid-template-columns: minmax(0, 1fr) 118px 62px 34px; gap: 8px !important; } .radar-grille .nom { white-space: nowrap; min-width: 0; overflow: hidden; } .radar-grille .barre-part { grid-template-columns: minmax(0, 1fr) 54px; gap: 8px; } /* ---- Tableaux Kiosque, Radar, Pulse : petite marge au début et à la fin des lignes, pour que la ligne sélectionnée (fond clair) ne colle pas au texte. En-têtes alignés sur les lignes. ---- */ .tableau .tete { padding-left: 20px; padding-right: 20px; } .tableau .ligne { padding-left: 20px; padding-right: 20px; } /* ---- Pulse, Radar : décomposition de la ligne choisie, dépliée sous elle, sur le même fond. Elle prend place dans le tableau, qui défile si la carte manque de hauteur : la carte garde sa taille. Deux signaux par rangée dans Pulse, un seul dans la carte plus étroite de Radar. ---- */ .tableau .decompo { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 32px; padding: 0 20px 14px; background: rgba(255,255,255,.8); border-bottom: 1px solid var(--noir-7); } .tableau .decompo[hidden] { display: none; } .decompo-signal { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 500; color: var(--noir-60); } button.ligne[aria-pressed="true"]:has(+ .decompo:not([hidden])) { border-bottom-color: transparent; } /* Pas de barre de défilement sur ces tableaux (choix de l'utilisateur du 06/10/2026) : le tableau garde sa forme. Il défile encore à la molette si la carte manque de hauteur, et vigie.js ramène la décomposition dépliée dans la partie visible. */ .tableau.defile:has(.decompo) { scrollbar-width: none; } .tableau.defile:has(.decompo)::-webkit-scrollbar { display: none; } /* Alerte scandale : gris foncé, hors du code hausse (Sienne) / baisse (gris clair) de la même décomposition, pour ne pas se lire comme une augmentation (choix de l'utilisateur du 06/10/2026 ; le noir plein faisait trop foncé, le contour seul ne convenait pas). */ .pastille.alerte { background: var(--noir-60); color: var(--blanc); } .pastille.alerte svg path { stroke: currentColor; } /* Chevron des lignes dépliables (Pulse, Radar) : dernière colonne, centré dans ses 22 px (ou calé à droite dans Radar), sans fond (le rond faisait lourd, 06/10/2026). Sa colonne est prise sur la marge droite des lignes et des en-têtes (20 -> 0 px) : dans Pulse, les titres de colonne gardent ainsi leurs 12 px d'écart (mesuré le 06/10/2026). Vers le bas quand la ligne est repliée, vers le haut quand elle est dépliée. */ .tableau .tete.pulse-grille, .tableau .ligne.pulse-grille, .tableau .tete.radar-grille, .tableau .ligne.radar-grille { padding-right: 0; } .chevron-ligne { display: flex; align-items: center; justify-content: center; justify-self: end; width: 22px; color: var(--noir-4); transition: color .15s ease; } .chevron-ligne svg { transition: transform .3s ease; } button.ligne:hover .chevron-ligne, button.ligne[aria-pressed="true"] .chevron-ligne { color: var(--noir-2); } button.ligne[aria-pressed="true"] .chevron-ligne svg { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .chevron-ligne, .chevron-ligne svg { transition: none; } } /* ---- Chiffres à chasse fixe : les colonnes de nombres tombent les unes sous les autres ---- */ .tasa, .meta, .num16, .note-grande, .acc-valeur, .radar-premier .v, .legende-radar .v, .pastille { font-variant-numeric: tabular-nums; } /* ---- Survols ---- */ /* Accueil : la flèche qui mène à l'outil est une petite bascule (23/10/2026) : une capsule (celle des sélecteurs des pages outils) et un bouton allongé de verre qui porte la flèche, centrés dans le bandeau de la carte (30 px sur 57 px, comme la pilule des outils par rapport à son bandeau). Au survol de la carte, le bouton avance un peu et la flèche passe en terre de Sienne ; au clic sur la carte (n'importe où), le bouton glisse de l'autre côté (classe .clic posée par vigie.js, qui laisse finir le mouvement avant d'ouvrir l'outil). */ .vl-card { position: relative; } .acc-bascule { position: absolute; z-index: 1; top: 13.5px; right: clamp(14px, calc(2.4 * var(--vh, 1vh)), 24px); box-sizing: border-box; width: 72px; height: 30px; padding: 3px; border-radius: 333px; background: var(--capsule-carte); box-shadow: inset 0 0 0 1px var(--noir-7); } .acc-bascule-bouton { display: flex; align-items: center; justify-content: center; width: 40px; height: 24px; border-radius: 333px; color: var(--noir-3); background: var(--verre-actif); box-shadow: var(--ombre-actif); backdrop-filter: blur(10px); transition: color .2s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1); } .vl-card:hover .acc-bascule-bouton, .vl-card:focus-visible .acc-bascule-bouton { color: var(--sierra); transform: translateX(3px); } .vl-card.clic .acc-bascule-bouton { color: var(--sierra); transform: translateX(26px); } /* Joute : un débat non sélectionné s'éclaircit au survol, comme les lignes des tableaux. */ .debat { transition: background-color .2s ease; } .debat:not([aria-pressed="true"]):hover { background: color-mix(in srgb, var(--gris-30), var(--blanc) 55%); } @media (prefers-reduced-motion: reduce) { .acc-bascule-bouton, .debat { transition: none; } .vl-card:hover .acc-bascule-bouton, .vl-card:focus-visible .acc-bascule-bouton { transform: none; } } /* ---- Apparition des graphiques (vigie.js) : bâtons qui montent depuis l'axe ---- */ @keyframes vl-monte { from { transform: scaleY(0); } } @keyframes vl-apparait { from { opacity: 0; } } .vl-anim-baton { transform-box: fill-box; transform-origin: center bottom; animation: vl-monte .4s cubic-bezier(.4, 0, .2, 1) backwards; } .vl-anim-trou { animation: vl-apparait .4s ease backwards; } /* ---- Texte de présentation sous le titre de chaque page outil ---- */ /* Replié sur 3 lignes (même hauteur sur tous les onglets : les cartes commencent au même endroit). La flèche, posée en fin de 3e ligne sur un fondu, déplie le reste (vigie.js) ; dépliée, elle passe sous le texte, tournée vers le haut. */ .intro { position: relative; display: flex; flex-direction: column; max-width: 760px; } .intro-texte { display: flex; flex-direction: column; gap: 8px; font-size: 16px; max-height: calc(3 * 1.5em); overflow: hidden; transition: max-height .3s cubic-bezier(.4, 0, .2, 1); } .intro p { margin: 0; font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--noir-60); } .intro-fleche { position: absolute; right: 0; bottom: 0; display: flex; align-items: center; height: 1.5em; padding: 0 0 0 72px; border: none; font-size: 16px; color: var(--noir); cursor: pointer; background: linear-gradient(to right, transparent, var(--blanc) 56px); } .intro-fleche .rond { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--gris-30); transition: background-color .2s ease; } .intro-fleche:hover .rond { background: var(--noir-7); } .intro-fleche svg { transition: transform .3s ease; } .intro.ouvert .intro-fleche { position: static; align-self: flex-end; margin-top: 4px; padding: 0; background: none; } .intro.ouvert .intro-fleche svg { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .intro-texte, .intro-fleche svg { transition: none; } } .intro strong { font-weight: 700; color: var(--noir); } .en-savoir { font-weight: 500; color: var(--noir); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; white-space: nowrap; } .en-savoir:hover { color: var(--sierra); } /* ---- Page « Méthodologie et sources » (methodologie.md) ---- Mise en page sobre, sans cartes : un outil après l'autre, séparés par un filet. Même gabarit pour chaque outil : nom et lien vers sa page, chapeau, puis les rubriques, intertitre dans une colonne de 240 px à gauche et texte à droite. Les liens « Méthodologie et sources » des pages outils arrivent sur l'outil, sous la barre (scroll-margin). */ .methodo-page { display: flex; flex-direction: column; max-width: 1148px; } .methodo-outil { padding: 40px 0 56px; border-top: 1px solid var(--noir-6); scroll-margin-top: 113px; } .methodo-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; } .methodo-tete h2 { margin: 0; font-size: 24px; font-weight: 500; line-height: 1.2; color: var(--noir-1); } .methodo-chapeau { max-width: 860px; margin: 16px 0 0; font-size: 20px; font-weight: 400; line-height: 1.45; color: var(--noir-1); } .methodo-rubrique { display: grid; grid-template-columns: 240px minmax(0, 860px); gap: 48px; margin-top: 40px; } .methodo-rubrique h3 { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--noir-1); } .methodo-contact .methodo-chapeau + .methodo-chapeau { margin-top: 8px; color: var(--noir-60); } .methodo-appel { margin: 24px 0 0; font-size: 20px; line-height: 1.45; } .methodo-appel .a-renseigner { color: var(--sierra); } .methodo-texte > :first-child { margin-top: 0; } .methodo-texte > :last-child { margin-bottom: 0; } .methodo-texte h4 { margin: 24px 0 8px; font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--noir-1); } .methodo-texte p, .methodo-texte li { font-size: 16px; line-height: 1.5; color: var(--noir-60); } .methodo-texte p { margin: 0 0 12px; } .methodo-texte ul, .methodo-texte ol { margin: 0 0 12px; padding-left: 22px; } .methodo-texte li + li { margin-top: 6px; } .methodo-texte strong { font-weight: 500; color: var(--noir); } .methodo-tableau { margin: 4px 0 16px; } .methodo-texte table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.45; } .methodo-texte th { padding: 0 16px 8px 0; text-align: left; vertical-align: bottom; font-family: var(--font-chiffres); font-size: 12px; font-weight: 500; color: var(--noir-3); text-transform: uppercase; } .methodo-texte td { padding: 10px 16px 10px 0; text-align: left; vertical-align: top; color: var(--noir-60); border-top: 1px solid var(--noir-7); } .methodo-texte table.cle-valeur td:first-child { width: 32%; color: var(--noir); } /* ---- Mode sombre ---- Activé par data-theme="sombre" sur (bouton de la barre, choix mémorisé). Le thème clair ci-dessus reste la référence : ici on ne fait que redéfinir les jetons, puis on remappe les couleurs écrites en dur (SVG, styles en ligne, graphiques de vigie.js) vers ces mêmes jetons. La rampe de gris est inversée pour garder l'ordre des contrastes. */ .btn-theme { display: inline-flex; align-items: center; justify-content: center; width: 41px; height: 41px; padding: 0; border: none; border-radius: 333px; background: var(--gris-30); color: var(--noir-60); cursor: pointer; transition: color .2s ease; } .btn-theme:hover { color: var(--noir); } .btn-theme .ic-soleil { display: none; } .barre-droite { display: flex; align-items: center; gap: 12px; } /* Date du jour et compte à rebours, sur deux lignes, tout à droite (à la place de l'ancien bouton Rafraîchir), séparés du bouton de thème par un filet. */ .barre-date { margin: 0; padding-left: 16px; border-left: 1px solid var(--noir-7); display: flex; flex-direction: column; align-items: flex-start; gap: 3px; font-size: 12px; font-weight: 500; line-height: 1.2; white-space: nowrap; } .barre-date .jour { color: var(--noir-1); } .barre-date .restant { color: var(--noir-3); } .barre-date b { font-family: var(--font-chiffres); font-weight: 700; color: var(--sierra); font-variant-numeric: tabular-nums; } .barre-date sup { font-size: .7em; line-height: 0; } /* Mode sombre, retravaillé le 21/10/2026 : une échelle d'élévation, comme dans les interfaces sombres bien faites : plus un élément est « posé dessus », plus il est clair. Page (#0F0F0E) < carte (#292927) < panneaux et cases posés sur la carte (≈ #353533) < reflets. Avant, les panneaux intérieurs (graphique de Pulse, blocs de Synthèse…) étaient plus sombres que la carte, et le « blanc » du site (cases blanches, colonne choisie, boutons) devenait le noir de la page : des trous noirs dans les cartes. Maintenant : - le « blanc » (--blanc) devient un gris à peine plus clair que la carte (#323230), et la page garde son propre noir (voir plus bas) ; - les gris neutres montent régulièrement du bas (proche de la carte) vers le haut (texte) : --blanc 50, --noir-7 63, --noir-6 88, --noir-5 110, --noir-4 133, --noir-3 158, --noir-2 207 (niveaux sur 255), donc chaque cran se distingue du fond d'une carte ET d'un panneau ; - les cartes sont cernées d'un liseré clair d'1 px, l'en-tête est un cran plus claire que la carte. Seules des couleurs changent : aucune dimension. */ :root[data-theme="sombre"] { color-scheme: dark; --noir: #F4F3F0; --noir-1: #FFFFFF; --noir-2: #CFCFCB; --noir-3: #9E9E9A; --noir-4: #858582; --noir-5: #6E6E6B; --noir-6: #585855; --noir-7: #3F3F3C; --noir-60: #B4B4B0; --gris-30: #292927; --piste: #3A3A38; --blanc: #323230; --entete-carte: color-mix(in srgb, #FFFFFF 5%, var(--gris-30)); --capsule-carte: var(--piste); --verre-actif: rgba(255,255,255,.12); --barre-verre: rgba(15,15,14,.72); --ombre-actif: 1px 2px 6px rgba(0,0,0,.8); --ombre-survol-carte: 0 12px 32px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.5); --hachures: repeating-linear-gradient(135deg, #3F3F3C 0 4px, #6E6E6B 4px 6px); --hachures-ligne: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255, 255, 255, .06) 6px 8px); } /* la page garde son noir à elle (--blanc, lui, est devenu un gris de surface) ; le fondu de la flèche du texte de présentation aussi */ :root[data-theme="sombre"] body, :root[data-theme="sombre"] .page { background: #0F0F0E; } :root[data-theme="sombre"] .intro-fleche { background: linear-gradient(to right, transparent, #0F0F0E 56px); } /* liseré clair d'1 px autour des cartes (ombre, donc sans effet sur les dimensions) : leurs limites se voient */ :root[data-theme="sombre"] .carte, :root[data-theme="sombre"] .vl-card { box-shadow: 0 0 0 1px rgba(255,255,255,.10); } :root[data-theme="sombre"] .vl-card:hover { box-shadow: 0 0 0 1px rgba(255,255,255,.18), var(--ombre-survol-carte); } :root[data-theme="sombre"] .btn-theme .ic-lune { display: none; } :root[data-theme="sombre"] .btn-theme .ic-soleil { display: block; } :root[data-theme="sombre"] .barre { box-shadow: 0 0 1.5px rgba(255,255,255,.18); } :root[data-theme="sombre"] .zone-graphe { background: rgba(255,255,255,.055); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); } :root[data-theme="sombre"] button.ligne:hover { background: rgba(255,255,255,.04); } :root[data-theme="sombre"] button.ligne[aria-pressed="true"] { background: rgba(255,255,255,.08); } :root[data-theme="sombre"] .infobulle { background: rgba(30,30,28,.6); box-shadow: 0 2px 10px rgba(0,0,0,.4); } :root[data-theme="sombre"] button.ligne[aria-pressed="true"] .pastille:not(.hausse):not(.vide):not([class*="ton-"]) { background: var(--noir-6); } :root[data-theme="sombre"] .pastille.hausse { color: #010100; } :root[data-theme="sombre"] .pastille.hausse svg path { stroke: #010100; } :root[data-theme="sombre"] .tableau .decompo { background: rgba(255,255,255,.08); } :root[data-theme="sombre"] .decompo .pastille:not(.hausse):not(.alerte):not(.vide) { background: var(--noir-6); } /* Couleurs en dur -> jetons */ :root[data-theme="sombre"] [fill="#010100"] { fill: var(--noir); } :root[data-theme="sombre"] [fill="#000000"] { fill: var(--noir-1); } :root[data-theme="sombre"] [fill="#4D4D4D"] { fill: var(--noir-2); } :root[data-theme="sombre"] [fill="#808080"] { fill: var(--noir-3); } :root[data-theme="sombre"] [fill="#999999"] { fill: var(--noir-4); } :root[data-theme="sombre"] [fill="#B2B2B2"] { fill: var(--noir-5); } :root[data-theme="sombre"] [fill="#CCCCCC"] { fill: var(--noir-6); } :root[data-theme="sombre"] [fill="#E5E5E5"] { fill: var(--noir-7); } :root[data-theme="sombre"] [fill="#FFFFFF"] { fill: var(--blanc); } :root[data-theme="sombre"] [stroke="#010100"] { stroke: var(--noir); } :root[data-theme="sombre"] [stroke="#000000"] { stroke: var(--noir-1); } :root[data-theme="sombre"] [stroke="#4D4D4D"] { stroke: var(--noir-2); } :root[data-theme="sombre"] [stroke="#808080"] { stroke: var(--noir-3); } :root[data-theme="sombre"] [stroke="#999999"] { stroke: var(--noir-4); } :root[data-theme="sombre"] [stroke="#B2B2B2"] { stroke: var(--noir-5); } :root[data-theme="sombre"] [stroke="#CCCCCC"] { stroke: var(--noir-6); } :root[data-theme="sombre"] [stroke="#E5E5E5"] { stroke: var(--noir-7); } :root[data-theme="sombre"] [stroke="#FFFFFF"] { stroke: var(--blanc); } :root[data-theme="sombre"] [style*="background: #010100"] { background: var(--noir) !important; } :root[data-theme="sombre"] [style*="background: #000000"] { background: var(--noir-1) !important; } :root[data-theme="sombre"] [style*="background: #4D4D4D"] { background: var(--noir-2) !important; } :root[data-theme="sombre"] [style*="background: #808080"] { background: var(--noir-3) !important; } :root[data-theme="sombre"] [style*="background: #999999"] { background: var(--noir-4) !important; } :root[data-theme="sombre"] [style*="background: #B2B2B2"] { background: var(--noir-5) !important; } :root[data-theme="sombre"] [style*="background: #CCCCCC"] { background: var(--noir-6) !important; } :root[data-theme="sombre"] [style*="background: #E5E5E5"] { background: var(--noir-7) !important; } :root[data-theme="sombre"] [style*="background: #FFFFFF"] { background: var(--blanc) !important; } :root[data-theme="sombre"] [style*="color: #000000"] { color: var(--noir-1) !important; } :root[data-theme="sombre"] [style*="color: #808080"] { color: var(--noir-3) !important; } /* Rampe de tonalité positive (Kiosque) : plus la tonalité est forte, plus le bâton ressort du fond. */ :root[data-theme="sombre"] #histogramme [fill="#E8C9BC"], :root[data-theme="sombre"] .rampe [style*="#E8C9BC"] { fill: #5C3324; background: #5C3324 !important; } :root[data-theme="sombre"] #histogramme [fill="#D39F8A"], :root[data-theme="sombre"] .rampe [style*="#D39F8A"] { fill: #8A4A31; background: #8A4A31 !important; } :root[data-theme="sombre"] #histogramme [fill="#B65F3C"], :root[data-theme="sombre"] .rampe [style*="#B65F3C"] { fill: #B65F3C; background: #B65F3C !important; } :root[data-theme="sombre"] #histogramme [fill="#7A3E26"], :root[data-theme="sombre"] .rampe [style*="#7A3E26"] { fill: #E3A58A; background: #E3A58A !important; } /* Pastilles de tonalité : mêmes remplacements que les bâtons positifs ci-dessus (les gris suivent déjà les variables du thème). */ :root[data-theme="sombre"] .pastille.ton-p0 { background: #5C3324; color: #F2F1EE; } :root[data-theme="sombre"] .pastille.ton-p1 { background: #8A4A31; color: #F2F1EE; } :root[data-theme="sombre"] .pastille.ton-p3 { background: #E3A58A; color: #121211; } /* ---- SIGNAL (page signal.html, intégrée le 09/10/2026) ---- Même composition que les autres pages outils (.ecran > .grille-page, comme Écran) : à gauche la carte de chaleur de la campagne, à droite la note du soir choisi. Préfixe j- (journal du soir). Chaque carte : tête standard (h2 24 px, surtitre, boutons à droite), contenu 48 px plus bas, marges de 24 px. */ /* Refonte du 18/10/2026 : la carte de chaleur prend les deux tiers de la page (17 colonnes de soirs, de la largeur qu'avait une colonne dans l'ancienne vue sur 14 soirs) ; le petit tableau du soir choisi occupe le tiers restant. */ .grille-journal { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: stretch; } /* Cartes un peu moins hautes que la hauteur standard (vigie.css, .ecran > .grille-page) : les lignes de la carte de chaleur perdent 5 %. Seules ces lignes dépendent de la hauteur ; le reste de la carte (marges, tête, dates, légende) fait 206 px. Hauteur = standard − 5 % × (standard − 206 px) = 95 % du standard + 10 px. */ .ecran > .grille-page.grille-journal { height: min(877px, calc((max(100 * var(--vh, 1vh) - 89px - 67px - 24px, 600px) - 139px) * 1.2 * .95 + 10px)); } /* Ici la hauteur ne vient pas du contenu (lignes de la chaleur en fractions, note qui défile) : plafonnée à celle d'une fenêtre de 1080 px (877 px), comme les autres pages outils. */ /* ---- Carte du soir affiché : toute la note dans la zone blanche, qui défile si besoin ---- */ .carte > .zone-graphe.j-zone-texte { display: block; position: relative; padding: 0 24px 16px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--noir-6) transparent; } .j-zone-texte:focus-visible { outline: 2px solid var(--sierra); outline-offset: 2px; } .j-note { display: flex; flex-direction: column; gap: 18px; max-width: 900px; padding-top: 20px; } .j-article, .j-breve { margin: 0 -12px; padding: 6px 12px; border-radius: 12px; } .j-article h3 { margin: 4px 0 6px; font-size: 18px; font-weight: 500; line-height: 1.3; color: var(--noir-1); } .j-note p { margin: 0 0 6px; font-size: 15px; line-height: 1.5; color: var(--noir-60); transition: color .2s ease; } .j-note strong { font-weight: 500; color: var(--noir-1); } .j-breves { display: flex; flex-direction: column; gap: 10px; } .j-breve p { margin-bottom: 2px; } .j-note p.j-seuls, .j-note p.j-divers { font-size: 14px; } .j-note p.j-seuls { color: var(--noir-3); } .j-note p.j-sources { margin: 0; font-size: 12px; font-weight: 500; color: var(--noir-3); } /* Candidat coché : son texte passe en plus foncé, tant qu'il reste coché (ni fond, ni barre de couleur). */ .j-note .actif p, .j-note .actif.j-seul-nom { color: var(--noir-1); } /* ---- Carte de gauche : carte de chaleur de la semaine ---- Une seule grille : colonne des noms (point de couleur de Pulse), puis 7 colonnes de soirs ; une ligne d'en-tête (jour et date) et une ligne par candidat, qui se partagent la hauteur de la carte. Chaque soir est un bouton sur toute la hauteur (sous-grille) : toute la colonne est cliquable, blanche quand elle est choisie. Case teintée selon l'intensité de la note (#E8C9BC, --sierra-50, --sierra ; gris si baisse seule), rail vide sinon ; jour sans note : cases hachurées, colonne inactive. */ /* Les colonnes de soirs sont des div role="button" et non des