/* ========================================================================== dexlo.fr, la visite de Dexlo : les figures, le cadre de « Essayez Dexlo », la visite guidée, les polices des écrans et l'intérieur de leurs graphiques. Feuille chargée par les seules pages qui montrent des écrans (les deux accueils). Les écrans eux-mêmes sont dans ecrans.css, concaténée à la suite au build. ========================================================================== */ /* Polices de la maquette (licence OFL, fichiers dans /assets/fonts/). Le navigateur ne les télécharge que si un écran est affiché. */ @font-face { font-family: "Instrument Sans"; font-style: normal; font-display: swap; font-weight: 400 700; font-stretch: 100%; src: url("fonts/instrument-sans-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Instrument Sans"; font-style: normal; font-display: swap; font-weight: 400 700; font-stretch: 100%; src: url("fonts/instrument-sans-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-display: swap; font-weight: 400; src: url("fonts/plex-mono-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-display: swap; font-weight: 600; src: url("fonts/plex-mono-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* --- Figures : un écran vivant, dans la composition que sa largeur appelle ----- La figure est un conteneur, et prend exactement la largeur de dessin de la composition qu'elle montre : le bureau (1 440 px) à partir de 1 506 px de fenêtre, le bureau compact (1 200 px) à partir de 1 266 px, le téléphone en dessous. Les deux bureaux sont donc à taille réelle : aucun texte n'y est rétréci (--p vaut 1 px). Le téléphone, lui, suit la largeur de la figure. Tous sont du HTML interactif. */ .ecran__vue { container: ecran / inline-size; overflow: hidden; border: 1px solid var(--rule); border-radius: var(--radius); background: #F4F4F8; } .v--l, .v--m { display: none; --p: 1px; } .v--c { display: flex; --p: min(calc(100cqw / 390), 1.2px); margin: 0 auto; } @container ecran (min-width: 1200px) { .v--m { display: flex; } .v--c { display: none; } } @container ecran (min-width: 1440px) { .v--l { display: flex; } .v--m { display: none; } } /* 1 202 px = 1 200 px d'écran et son filet. Le bureau sort de la colonne de texte (1 216 px). Dès 1 266 px de fenêtre, la fenêtre garde ses 1 202 px, centrée. La largeur lue par la requête compte la barre de défilement : un portable de 1 280 px (barre classique de 15 à 17 px comprise) y est déjà (site v7.5 : retour au seuil de la v7.3). */ @media (min-width: 1266px) { .ecran__vue { width: 1202px; margin-inline: calc((100% - 1202px) / 2); } } @media (min-width: 1506px) { .ecran__vue { width: 1442px; margin-inline: calc((100% - 1442px) / 2); } } /* Sur téléphone, l'écran va d'un bord à l'autre : 390 px de large pour 390 px. */ @media (max-width: 719px) { .ecran__vue { margin-inline: calc(-1 * var(--gouttiere)); border-inline: 0; border-radius: 0; } } /* Un écran chargé à l'approche : sa place est réservée (aucun décalage quand il arrive). Le rapport de la composition compacte est généré au build, par écran et par langue (`--r-c`). */ .ecran__attente { width: min(100%, 468px); margin: 0 auto; aspect-ratio: var(--r-c, 390 / 900); } @container ecran (min-width: 1200px) { .ecran__attente { width: auto; aspect-ratio: var(--r-m, 1200 / 810); } } @container ecran (min-width: 1440px) { .ecran__attente { aspect-ratio: var(--r-l, 1440 / 810); } } /* L'image d'un écran : le repli d'un navigateur sans unités de conteneur, et de qui navigue sans script. */ .ecran__img { display: none; width: 100%; max-width: 520px; height: auto; margin: 0 auto; border: 1px solid var(--rule); border-radius: var(--radius); } /* Sans script, aucun écran ne peut répondre : chacun cède la place à son image (l'écran du haut compris — ses boutons ne feraient rien). */ @media (scripting: none) { .ecran__vue { display: none; } .ecran__img { display: block; } } @supports not (width: 1cqw) { .ecran__vue { display: none; } .ecran__img { display: block; } } .v-motifs { position: absolute; width: 0; height: 0; overflow: hidden; } /* Pas de `content-visibility` sur les figures : mesuré le 02/10, il faisait sauter la page au défilement (CLS 3,6 à 4,6, contre 0 sans lui) sans rien gagner sur la latence des gestes. Les écrans hors de vue ne coûtent déjà rien : ils ne sont pas encore là. */ /* --- « Essayez Dexlo » : le cadre de l'application ------------------------------ Sa barre haute est la seule navigation (les rubriques du produit sont les onglets) ; les écrans se succèdent dessous, sans barre à eux. Le cadre prend la largeur de dessin de la composition qu'il montre, comme une figure ; les vues qu'il contient n'ont ni filet ni marge. La barre et les onglets de la Veille (.v-app) suivent la même unité --p que les écrans (leur dessin est dans ecrans.css). */ .ecran__app { container: ecran / inline-size; overflow: hidden; border: 1px solid var(--rule); border-radius: var(--radius); background: #F4F4F8; } .ecran__app .ecran__vue { width: auto; margin-inline: 0; border: 0; border-radius: 0; } .v-app { --p: min(calc(100cqw / 390), 1.2px); } @container ecran (min-width: 1200px) { .v-app { --p: 1px; } } @media (min-width: 1266px) { .ecran__app { width: 1202px; margin-inline: calc((100% - 1202px) / 2); } } @media (min-width: 1506px) { .ecran__app { width: 1442px; margin-inline: calc((100% - 1442px) / 2); } } @media (max-width: 719px) { .ecran__app { margin-inline: calc(-1 * var(--gouttiere)); border-inline: 0; border-radius: 0; } } .panneau { position: relative; } .panneau[hidden] { display: none; } .panneau:focus-visible { outline-offset: -3px; } /* Sous un écran montré sans aucun geste (Grille, Rythme, Concurrents) : la ligne qui le dit. */ .panneau__note { margin: 0; padding: 14px 24px; border-top: 1px solid var(--rule); background: var(--bg); color: var(--ink-2); font-size: var(--t2); line-height: 1.45; } @media (max-width: 719px) { .panneau__note { padding-inline: var(--gouttiere); } } /* Sans script (ou sans unités de conteneur), un onglet ne peut rien ouvrir : pas de barre, les écrans à la suite (leurs images, qui portent chacune la barre de leur écran). */ @media (scripting: none) { .ecran__app { overflow: visible; border: 0; border-radius: 0; background: none; } .v-app { display: none; } .panneau[hidden] { display: block; } .panneau + .panneau { margin-top: 24px; } .panneau__note { border: 0; padding-inline: 0; text-align: center; } } @supports not (width: 1cqw) { .ecran__app { overflow: visible; border: 0; border-radius: 0; background: none; } .v-app { display: none; } .panneau[hidden] { display: block; } .panneau + .panneau { margin-top: 24px; } .panneau__note { border: 0; padding-inline: 0; text-align: center; } } /* --- Visite guidée : quatre étapes, facultative ------------------------------- Une barre sous l'écran ; elle reste en vue pendant que l'écran défile. */ .tour__ouvrir { min-height: 44px; padding: 0 14px; border: 1px solid var(--rule-2); border-radius: var(--radius); background: var(--bg); color: var(--ink); font: 600 var(--t1) / 1.2 var(--font); white-space: nowrap; cursor: pointer; transition: background-color 0.12s, border-color 0.12s; } .tour__ouvrir:hover { border-color: var(--ink-3); } .tour { position: sticky; bottom: 16px; z-index: 12; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "etapes boutons fermer" "texte texte texte"; gap: 10px 8px; align-items: center; margin-top: 12px; padding: 14px 16px; border: 1px solid var(--rule-2); border-radius: var(--radius); background: var(--bg); box-shadow: 0 10px 30px rgba(18, 19, 26, 0.14); } .tour[hidden] { display: none; } .tour__etapes { grid-area: etapes; display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; } .tour__etapes a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--rule-2); border-radius: var(--radius); color: var(--ink-2); font: 600 var(--t1) / 1 var(--font); text-decoration: none; } .tour__etapes a[aria-current="step"] { border-color: var(--ink); background: var(--ink); color: var(--bg); } .tour__texte { grid-area: texte; margin: 0; color: var(--ink-2); font-size: var(--t1); line-height: 1.45; } .tour__texte b { color: var(--ink); font-weight: 600; } .tour__texte span[hidden] { display: none; } .tour__boutons { grid-area: boutons; display: flex; gap: 8px; } .tour button { min-width: 44px; min-height: 44px; padding: 0 14px; border: 1px solid var(--rule-2); border-radius: var(--radius); background: var(--bg); color: var(--ink); font: 600 var(--t1) / 1.2 var(--font); cursor: pointer; transition: background-color 0.12s, border-color 0.12s; } .tour button:hover { border-color: var(--ink-3); } .tour button[disabled] { color: var(--ink-3); cursor: default; } .tour .tour__suivant { border-color: var(--ink); background: var(--ink); color: var(--bg); } .tour__fermer { grid-area: fermer; display: grid; place-items: center; padding: 0; } @media (max-width: 719px) { /* au-dessus de la barre d'appel fixe du site */ .tour { bottom: 84px; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "etapes fermer" "texte texte" "boutons boutons"; } .tour__boutons button { flex: 1; } } /* --- Mouvement : 150 ms au plus, et rien si l'usager le demande --------------- Une nuit choisie glisse de sa ligne vers le titre de son dossier (View Transitions) ; sans cette interface, le changement est instantané. */ ::view-transition-group(*) { animation-duration: 150ms; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } .v-vt-nuit { view-transition-name: v-nuit; } html.v-fige { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .v-app *, .tour *, .tour__ouvrir, .v *, .v *::before { transition: none !important; } ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /* --- Info-bulle dans la couche du dessus (Popover) : jamais rognée par le cadre de l'écran. Ancrée en CSS à sa cible quand le navigateur sait le faire. --- */ .v .v-bulle:popover-open { position: fixed; inset: 0 auto auto 0; } .v .v-ancre { anchor-name: --v-cible; } @supports (anchor-name: --a) and (position-area: bottom) { /* Sous sa cible, centrée, sans sortir de la fenêtre ; au-dessus si la place manque. */ .v .v-bulle--ancree:popover-open { inset: auto; margin: 10px 0; position-anchor: --v-cible; position-area: bottom; position-try-fallbacks: flip-block; transform: none !important; } .v .v-bulle--ancree::before { display: none; } } /* --- L'intérieur des graphiques (unités du viewBox, jamais mises à l'échelle) -- */ .v svg text { font-family: "Instrument Sans", system-ui, sans-serif; } .v .ax { font-size: 12px; fill: var(--v-ink-3); } .v .lab { font-size: 12px; font-weight: 600; } .v .lab-b { font-size: 12px; font-weight: 700; fill: var(--v-ink); } .v .halo { paint-order: stroke; stroke: var(--v-surface); stroke-width: 3; stroke-linejoin: round; } .v .nom { font-size: 12px; font-weight: 600; fill: var(--v-ink); } /* Au téléphone, un graphique suit la largeur de la figure : son texte est dessiné à 13 (13 px à 390 px de fenêtre, 12 px à 360 px), pour ne jamais passer sous 12 px. */ /* 13 px : à 360 px de fenêtre, un texte de graphique reste à 12 px rendus. Les places sont dessinées pour 12 : l'approche resserrée garde chaque étiquette dans son graphique. */ .v--c .ax, .v--c .lab, .v--c .lab-b, .v--c .nom { font-size: 13px; letter-spacing: -.4px; } .v .gl { fill: none; stroke: var(--v-vide); stroke-width: 1; } .v .sep { fill: none; stroke: var(--v-rule-2); stroke-width: 1; } .v .tirets { stroke-dasharray: 2 3; } .v .tirets43 { stroke-dasharray: 4 3; } .v .hit { fill: transparent; } .v svg .fort { font-weight: 600; } .v svg .t-b { fill: var(--v-brand); } .v svg .t-n1 { fill: var(--v-n1-texte); } .v svg .t-n2 { fill: var(--v-ink-2); } .v svg .t-ink2 { fill: var(--v-ink-2); } .v svg .t-down { fill: var(--v-down); } .v .s-rule2 { fill: none; stroke: var(--v-rule-2); stroke-width: 1; } .v .s-ink2 { fill: none; stroke: var(--v-ink-2); stroke-width: 1; } /* Aplats : `fill` pour une forme SVG, `background-color` pour un repère de légende. */ .v .f-b { fill: var(--v-brand); background-color: var(--v-brand); } .v .f-b2 { fill: var(--v-brand-2); } .v .f-bm { fill: var(--v-brand-mid); background-color: var(--v-brand-mid); } .v .f-hach { fill: url(#v-hach); } .v path.f-hach { stroke: var(--v-brand-mid); stroke-width: 1; } .v .f-n1 { fill: var(--v-n1); background-color: var(--v-n1); } .v .f-cal { fill: var(--v-cal); background-color: var(--v-cal); } .v .f-med { fill: var(--v-mediane); background-color: var(--v-mediane); } .v .f-up, .v .rond.up { fill: var(--v-up-mid); background-color: var(--v-up-mid); } .v .f-down, .v .rond.down { fill: var(--v-down-mid); background-color: var(--v-down-mid); } .v .f-check, .v .rond.check { fill: var(--v-check-mid); background-color: var(--v-check-mid); } .v .f-vide { fill: var(--v-vide); background-color: var(--v-vide); } .v .f-oc { fill: var(--oc); } .v .f-sel { fill: var(--v-sel); } .v .f-prev { fill: var(--v-brand); opacity: 0.12; } .v .f-cat { fill: currentColor; } .v .c-b { border-color: var(--v-brand); } .v .c-n2 { border-color: var(--v-n2); } .v .c-salon { color: var(--v-cat-salon); } .v .c-congres { color: var(--v-cat-congres); } .v .c-concert { color: var(--v-cat-concert); } .v .c-sport { color: var(--v-cat-sport); } .v .c-vacances { color: var(--v-cat-vacances); } .v .c-interne { color: var(--v-cat-interne); } /* Le budget : la courbe orange, et les écarts au budget dans les indicateurs. */ .v .s-budget { stroke: var(--v-budget); stroke-width: 2; fill: none; } .v .f-budget { fill: var(--v-budget); background-color: var(--v-budget); } .v-motifs .h1 { fill: var(--v-hach-1); } .v-motifs .h2 { fill: var(--v-hach-2); } /* Courbes : cette année et N-1 en trait plein, N-2 en pointillé, la prévision en tirets (les mêmes traits que le poste). */ .v polyline, .v path[class^="l-"] { fill: none; } .v .l-n { stroke: var(--v-brand); stroke-width: 2; stroke-linejoin: round; } .v .l-n.nuit { stroke-width: 2.5; } .v .l-n1 { stroke: var(--v-n1); stroke-width: 2; stroke-linejoin: round; } .v .l-n1.fin { stroke-width: 1.6; } .v .l-n2 { stroke: var(--v-n2); stroke-width: 1.75; stroke-dasharray: 1 3.5; stroke-linecap: round; stroke-linejoin: round; } .v .l-n2.fin { stroke-width: 1.5; } .v .l-prev { stroke: var(--v-brand); stroke-width: 2; stroke-dasharray: 5 3; } .v .l-prev.fort { stroke-width: 2.5; } .v .l-prev.fin { stroke-width: 1.6; stroke-dasharray: 4 3; } .v .l-n1e { fill: none; stroke: var(--v-n1); stroke-width: 2.5; stroke-linecap: round; } .v .l-n2e { fill: none; stroke: var(--v-n2); stroke-width: 2.5; stroke-dasharray: 1 3.5; stroke-linecap: round; } .v .l-n1h { fill: none; stroke: var(--v-n1); stroke-width: 2; stroke-linecap: round; } .v .l-n1h.fin { stroke-width: 1.2; } .v .l-med { fill: none; stroke: var(--v-mediane); stroke-width: 2; stroke-dasharray: 6 4; } .v .l-med.fin { stroke-dasharray: 2 2; } .v .l-axe { fill: none; stroke: var(--v-rule-2); stroke-width: 4; stroke-linecap: round; } .v .pt-n { fill: var(--v-brand); stroke: var(--v-surface); stroke-width: 2; } .v .pt-n1 { fill: var(--v-surface); stroke: var(--v-n1); stroke-width: 2; } .v .pt-c { fill: var(--v-gris); stroke: var(--v-surface); stroke-width: 1.5; } .v .pt-v { fill: var(--v-brand); stroke: var(--v-surface); stroke-width: 2; } /* Le curseur de lecture : invisible au repos, tracé quand on lit le graphique. */ .v svg[data-v-lire] { touch-action: pan-y; cursor: crosshair; } .v .curseur { outline: none; } .v .curseur .cl { fill: none; stroke: var(--v-ink-2); stroke-width: 1; stroke-dasharray: 2 2; opacity: 0; } .v svg.lu .curseur .cl, .v .curseur:focus-visible .cl { opacity: 1; } .v .curseur:focus-visible .cl { stroke: var(--v-brand); stroke-width: 2; stroke-dasharray: none; } /* Mois par mois : la colonne survolée */ .v .v-bm, .v .hb { outline: none; } .v .v-bm { cursor: pointer; } .v .v-bm:hover .hit, .v .v-bm:focus-visible .hit { fill: var(--v-surface-2); } .v .v-bm:focus-visible .hit { stroke: var(--v-brand); stroke-width: 2; } /* Horizon : la nuit choisie, la nuit survolée */ .v .hb .b { fill: var(--v-brand-mid); } .v .hb.sel .b, .v .hb:hover .b, .v .hb:focus-visible .b { fill: var(--v-brand); } .v .hb:focus-visible .hit { stroke: var(--v-brand); stroke-width: 1.5; } .v .hl { display: none; } .v .hl.sel { display: block; } .v .hb[data-v-nuit] { cursor: pointer; } /* --- Grille, Rythme, Concurrents : intérieur des graphiques --- */ .v .lab-b.grand { font-size: 13px; } .v .etq { font-size: 12px; font-weight: 600; fill: var(--v-surface); } .v--c .etq { font-size: 13px; } .v .tirets33 { stroke-dasharray: 3 3; opacity: 0.6; } .v svg .t-med { fill: var(--v-mediane); } .v .s-b { fill: none; stroke: var(--v-brand); stroke-width: 1; } .v .f-n2 { fill: var(--v-n2); background-color: var(--v-n2); } /* La fourchette des concurrents : la couleur de la marque, très claire (aucun jeton de plus). */ .v .f-bande { fill: var(--v-brand); background-color: var(--v-brand); opacity: 0.14; } .v .f-gris { fill: var(--v-gris); background-color: var(--v-gris); } .v .f-s2 { fill: var(--v-surface-2); } .v .f-ink { fill: var(--v-ink); } .v .f-aire { fill: var(--v-brand); opacity: 0.1; } .v .c-med { border-color: var(--v-mediane); } /* Montée en charge d'un mois : cette année, N-1, N-2. */ .v .l-nm { stroke: var(--v-brand); stroke-width: 3; } .v .l-n1m { stroke: var(--v-n1); stroke-width: 2.2; } .v .l-n2m { stroke: var(--v-n2); stroke-width: 2; stroke-dasharray: 1 4; stroke-linecap: round; } /* Marché : votre tarif, la nuit choisie, un point par nuit (plein au-dessus de la médiane, creux en dessous), un tarif sur l'échelle commune des concurrents. */ .v .l-prix { stroke: var(--v-brand); stroke-width: 2.6; stroke-linejoin: round; } .v .pt-sel { fill: var(--v-brand); stroke: var(--v-brand); stroke-width: 2; } .v .pt-pos { stroke: var(--v-surface); stroke-width: 2; } .v .pm-c { fill: var(--v-brand); stroke: var(--v-brand); stroke-width: 1.5; } .v .pm-c.sous { fill: var(--v-surface); } /* Au téléphone, 60 nuits dans la largeur de la carte : des traits plus fins. */ .v--c .v-marche .l-prix { stroke-width: 2; } .v--c .v-marche .l-med { stroke-width: 1.5; stroke-dasharray: 4 3; } /* ========================================================================== Écrans de la visite. Trois compositions du même écran, rendues par visite.py : - BUREAU (.v--l) : la maquette validée le 01/10/2026, dessinée pour 1 440 px ; - BUREAU COMPACT (.v--m) : la même structure recomposée pour 1 200 px (moins de colonnes, colonnes latérales plus étroites : le secondaire est dans le dossier) ; - TÉLÉPHONE (.v--c) : une colonne, dessinée pour 390 px, cibles de 44 px. Les deux bureaux sont à TAILLE RÉELLE : la figure prend exactement leur largeur de dessin (visite.css), aucun texte n'y est rétréci, aucun n'est sous 12 px (l'échelle de l'app). Le téléphone suit la largeur de la figure : build.py convertit chaque longueur en px de CE fichier en « calc(N * var(--p)) », et --p y vaut 1/390 de la figure (1 px dans les bureaux). Une requête de conteneur choisit la composition (sa condition reste en px : c'est une largeur de figure). Sous 390 px de figure, deux planchers : un texte ne descend pas sous 12 px, une cible de 44 px reste à 44 px. Rien ici ne s'applique hors de `.v` et de `.v-app` (le cadre de l'application autour des écrans de « Essayez Dexlo »). Aucun style en ligne (CSP 'self'). ========================================================================== */ /* ---------- 1. Jetons ---------- Ceux de la maquette, sauf les encres de texte : celles du poste (frontend/app/(poste)/css/jetons.css), conformes AA (≥ 4,5:1 sur le fond comme sur les cartes). La maquette avait un gris de notes à 3,6:1. */ .v, .v-jetons { --v-bg: #F4F4F8; --v-surface: #FFFFFF; --v-surface-2: #F7F7FA; --v-rule: #E7E7EF; --v-rule-2: #D6D6E1; --v-ink: #12131A; --v-ink-2: #4A4D5C; --v-ink-3: #6B6E7D; --v-brand: #3B30D4; --v-brand-hover: #2E25B0; --v-brand-2: #5B4FF0; --v-brand-soft: #EEEDFD; --v-brand-mid: #C4BFF9; --v-sel: #F5F4FE; --v-hach-1: #9C95F3; --v-hach-2: #D9D6FB; --v-up: #067A55; --v-up-bg: #E3F5EC; --v-up-mid: #2FB27D; --v-down: #C2281C; --v-down-bg: #FDECEA; --v-down-mid: #EF6B5F; --v-check: #B54708; --v-check-bg: #FEF3E2; --v-check-mid: #F79009; --v-n1: #0E9384; --v-n1-texte: #0C796D; --v-n2: #7FD4C8; --v-mediane: #667085; --v-cal: #7A5AF8; --v-cal-texte: #6C49F7; --v-cal-bg: #EFEBFE; --v-mes-texte: #0C796D; --v-mes-bg: #DDF4F0; --v-vide: #EEEEF4; --v-gris: #98A2B3; --v-neutre: #F0F1F4; --v-ok: #12B76A; --v-ok-halo: #D1FADF; --v-realise-1: #9FD6E6; --v-realise-2: #3FA9C9; --v-avatar: #E9EAF0; --v-voile: rgba(18,19,26,.32); --v-cat-salon: #3B30D4; --v-cat-salon-texte: #3B30D4; --v-cat-salon-bg: #EEEDFD; --v-cat-congres: #7A5AF8; --v-cat-congres-texte: #6C49F7; --v-cat-congres-bg: #EFEBFE; --v-cat-concert: #DD2590; --v-cat-concert-texte: #C71F81; --v-cat-concert-bg: #FCE7F3; --v-cat-sport: #0E9384; --v-cat-sport-texte: #0C796D; --v-cat-sport-bg: #DDF4F0; --v-cat-vacances: #0BA5EC; --v-cat-vacances-texte: #07709F; --v-cat-vacances-bg: #E0F2FE; /* Un événement saisi par l'hôtel (séminaire, groupe) : ardoise, distinct des relevés. */ --v-cat-interne: #667085; --v-cat-interne-texte: #475467; --v-cat-interne-bg: #F2F4F7; /* Le budget : orange, la couleur de la maquette d'Adam pour la courbe et les écarts. */ --v-budget: #F79009; --v-budget-texte: #B54708; --v-budget-bg: #FEF3E2; --v-ombre-marque: rgba(59,48,212,.3); --v-ombre-bandeau: rgba(59,48,212,.18); --v-rayon-carte: calc(14 * var(--p)); --v-rayon-controle: calc(10 * var(--p)); --v-ombre-carte: 0 calc(1 * var(--p)) calc(2 * var(--p)) rgba(18,19,26,.04), 0 calc(2 * var(--p)) calc(10 * var(--p)) rgba(18,19,26,.03); --v-ombre-bulle: 0 calc(14 * var(--p)) calc(36 * var(--p)) rgba(18,19,26,.18), 0 calc(2 * var(--p)) calc(6 * var(--p)) rgba(18,19,26,.08); } /* ---------- 2. Base ---------- */ .v { position: relative; flex-direction: column; width: calc(1440 * var(--p)); height: calc(810 * var(--p)); overflow: hidden; background: var(--v-bg); color: var(--v-ink); font-family: "Instrument Sans", system-ui, sans-serif; font-size: max(var(--v-min-texte, 12px), calc(14 * var(--p))); line-height: 1.25; font-variant-numeric: tabular-nums; text-align: left; -webkit-font-smoothing: antialiased; } .v--nuit { height: calc(506 * var(--p)); } /* L'écran ne suppose rien de la page qui l'accueille (le fond de /login le reprend). */ .v, .v *, .v *::before, .v *::after { box-sizing: border-box; } .v *, .v *::before, .v *::after { margin: 0; padding: 0; } .v a { color: inherit; text-decoration: none; } .v button { border: 0; background: none; color: inherit; font: inherit; text-align: inherit; cursor: pointer; } .v :focus-visible { outline: calc(2 * var(--p)) solid var(--v-brand); outline-offset: calc(2 * var(--p)); } .v i { font-style: normal; } .v img { max-width: none; } .v [hidden] { display: none; } .v .v-sr { position: absolute; width: calc(1 * var(--p)); height: calc(1 * var(--p)); overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .v .v-page { flex: 1; display: flex; flex-direction: column; gap: calc(16 * var(--p)); min-height: 0; padding: calc(20 * var(--p)) calc(24 * var(--p)) calc(24 * var(--p)); } .v .v-h2 { font-size: max(var(--v-min-champ, 16px), calc(22 * var(--p))); font-weight: 600; letter-spacing: -.01em; } .v .v-h3 { font-size: max(var(--v-min-texte, 12px), calc(15 * var(--p))); font-weight: 600; white-space: nowrap; } .v .v-sous { font-size: max(var(--v-min-texte, 12px), calc(13 * var(--p))); color: var(--v-ink-3); white-space: nowrap; } .v .mut { color: var(--v-ink-3); } .v .fort { font-weight: 600; } .v .t-up { color: var(--v-up); } .v .t-down { color: var(--v-down); } .v .droite { margin-left: auto; } .v .v-eyebrow { display: flex; align-items: center; gap: calc(8 * var(--p)); font-size: max(var(--v-min-texte, 12px), calc(12 * var(--p))); font-weight: 600; color: var(--v-ink-3); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; } .v .v-ic { display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .v .v-ic--2 { stroke-width: 2; } .v .v-ic--t { width: calc(15 * var(--p)); height: calc(15 * var(--p)); stroke-width: 1.9; } .v .v-ic--l { width: calc(13 * var(--p)); height: calc(13 * var(--p)); stroke-width: 1.7; flex: none; } .v .v-g { display: block; width: 100%; height: auto; overflow: visible; } .v .v-vide { display: none; padding: calc(18 * var(--p)); color: var(--v-ink-3); font-size: max(var(--v-min-texte, 12px), calc(13.5 * var(--p))); } .v [data-v-rangee]:empty + .v-vide { display: block; } .v table:has(tbody:empty) thead { display: none; } .v table:has(tbody:empty) + .v-vide { display: block; } /* ---------- 3. Composants ---------- */ /* Le cadre de l'application autour des écrans de « Essayez Dexlo » (.v-app) : la barre haute, qui en est la seule navigation, et les deux onglets de la Veille. Hors de `.v` : mêmes jetons (.v-jetons), même police, mêmes remises à zéro. */ .v-app { color: var(--v-ink); font-family: "Instrument Sans", system-ui, sans-serif; font-size: max(var(--v-min-texte, 12px), calc(14 * var(--p))); line-height: 1.25; font-variant-numeric: tabular-nums; text-align: left; -webkit-font-smoothing: antialiased; } .v-app, .v-app *, .v-app *::before, .v-app *::after { box-sizing: border-box; } .v-app *, .v-app *::before, .v-app *::after { margin: 0; padding: 0; } .v-app button { border: 0; background: none; color: inherit; font: inherit; text-align: inherit; cursor: pointer; } .v-app :focus-visible { outline: calc(2 * var(--p)) solid var(--v-brand); outline-offset: calc(2 * var(--p)); } .v-app i { font-style: normal; } .v-app img { max-width: none; } /* barre haute : dans un écran (.v) comme au-dessus des écrans (.v-app), les six rubriques du produit. Une entrée est un lien (raccourci vers l'onglet), un libellé (écran-image) ou un onglet (« Essayez Dexlo ») : même dessin. */ .v .v-barre, .v-app .v-barre { flex: none; display: flex; align-items: center; gap: calc(12 * var(--p)); height: calc(56 * var(--p)); padding: 0 calc(24 * var(--p)); background: var(--v-surface); border-bottom: calc(1 * var(--p)) solid var(--v-rule); } .v .v-logo, .v-app .v-logo { display: block; width: calc(88 * var(--p)); height: calc(22 * var(--p)); } /* Le nom de l'hôtel : du texte, ni sélecteur ni bouton (un seul hôtel d'exemple). */ .v .v-hotel, .v-app .v-hotel { margin-left: calc(14 * var(--p)); font-size: max(var(--v-min-texte, 12px), calc(14 * var(--p))); font-weight: 600; white-space: nowrap; } .v .v-exemple, .v-app .v-exemple { padding: calc(3 * var(--p)) calc(8 * var(--p)); border: calc(1 * var(--p)) solid var(--v-rule-2); border-radius: calc(6 * var(--p)); background: var(--v-surface-2); color: var(--v-ink-2); font-size: max(var(--v-min-texte, 12px), calc(12 * var(--p))); font-weight: 500; white-space: nowrap; } .v .v-nav, .v-app .v-nav { display: flex; gap: calc(2 * var(--p)); margin-left: calc(18 * var(--p)); } .v .v-nav > *, .v-app .v-nav > * { display: flex; align-items: center; justify-content: center; padding: calc(7 * var(--p)) calc(13 * var(--p)); border-radius: calc(8 * var(--p)); color: var(--v-ink-2); font-size: max(var(--v-min-texte, 12px), calc(14 * var(--p))); font-weight: 500; white-space: nowrap; transition: background-color .12s, color .12s; } .v .v-nav a:hover, .v-app .v-nav [role="tab"]:hover { background: var(--v-surface-2); } .v .v-nav .actif, .v .v-nav a.actif:hover, .v-app .v-nav [aria-selected="true"], .v-app .v-nav [aria-selected="true"]:hover { background: var(--v-brand-soft); color: var(--v-brand); font-weight: 600; } .v .v-synchro, .v-app .v-synchro { display: flex; align-items: center; gap: calc(8 * var(--p)); margin-left: auto; color: var(--v-ink-3); font-size: max(var(--v-min-texte, 12px), calc(13 * var(--p))); white-space: nowrap; } .v .v-point, .v-app .v-point { display: block; width: calc(7 * var(--p)); height: calc(7 * var(--p)); border-radius: 50%; background: var(--v-ok); box-shadow: 0 0 0 calc(3 * var(--p)) var(--v-ok-halo); } /* Bureau compact : la barre resserrée. */ @container ecran (1200px <= width < 1440px) { .v .v-nav, .v-app .v-nav { margin-left: calc(10 * var(--p)); } .v .v-nav > *, .v-app .v-nav > * { padding: calc(7 * var(--p)) calc(11 * var(--p)); } } /* Téléphone : l'hôtel sur une rangée de 52 px ; dessous, les six rubriques en deux rangées de trois, chacune sur 44 px. C'est le procédé du produit sous 1 024 px (une rangée de rubriques qui passe à la ligne, jamais un défilement de côté), rangé en grille : aucune rubrique coupée, aucun libellé tronqué, la même hauteur dans les deux langues (visite_base.H_BARRE_C). */ @container ecran (width < 1200px) { /* Le cadre a la largeur de l'écran qu'il coiffe (390 px de dessin, centré : entre 469 et 1 265 px de fenêtre, l'écran du téléphone ne s'étire pas au-delà de 468 px). */ .v-app { width: calc(390 * var(--p)); margin-left: auto; margin-right: auto; } .v .v-barre, .v-app .v-barre { flex-wrap: wrap; gap: 0 calc(8 * var(--p)); height: auto; padding: 0 calc(14 * var(--p)); } .v .v-logo, .v-app .v-logo { width: calc(72 * var(--p)); height: calc(18 * var(--p)); } .v .v-hotel, .v-app .v-hotel { min-width: 0; margin-left: calc(2 * var(--p)); color: var(--v-ink-2); font-size: max(var(--v-min-texte, 12px), calc(12.5 * var(--p))); line-height: calc(52 * var(--p)); } .v .v-synchro, .v-app .v-synchro { display: none; } .v .v-nav, .v-app .v-nav { order: 2; flex: 1 0 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(2 * var(--p)); margin: 0 calc(-14 * var(--p)); padding: calc(4 * var(--p)) calc(12 * var(--p)) calc(8 * var(--p)); border-top: calc(1 * var(--p)) solid var(--v-rule); } .v .v-nav > *, .v-app .v-nav > * { height: max(var(--v-min-cible, 44px), calc(44 * var(--p))); padding: 0 calc(4 * var(--p)); font-size: max(var(--v-min-texte, 12px), calc(13 * var(--p))); } } /* Sans barre : l'écran d'un onglet de « Essayez Dexlo » (la barre est celle de la figure). */ .v--nu { height: calc(754 * var(--p)); } /* carte */ .v .v-carte { background: var(--v-surface); border: calc(1 * var(--p)) solid var(--v-rule); border-radius: var(--v-rayon-carte); box-shadow: var(--v-ombre-carte); } .v .v-carte__tete { display: flex; align-items: center; gap: calc(12 * var(--p)); padding: calc(16 * var(--p)) calc(18 * var(--p)) 0; } .v .v-zone { flex: 1; min-height: 0; } /* puces, pourcentages, boutons, segments */ .v .v-chip { display: inline-flex; align-items: center; gap: calc(5 * var(--p)); padding: calc(3 * var(--p)) calc(9 * var(--p)); border-radius: calc(99 * var(--p)); font-size: max(var(--v-min-texte, 12px), calc(12 * var(--p))); font-weight: 600; white-space: nowrap; } .v .v-chip.up { background: var(--v-up-bg); color: var(--v-up); } .v .v-chip.down { background: var(--v-down-bg); color: var(--v-down); } .v .v-chip.check { background: var(--v-check-bg); color: var(--v-check); } .v .v-chip.brand { background: var(--v-brand-soft); color: var(--v-brand); } .v .v-chip.neutre { background: var(--v-neutre); color: var(--v-ink-2); } .v .v-pct { padding: calc(2 * var(--p)) calc(6 * var(--p)); border-radius: calc(6 * var(--p)); font-family: "IBM Plex Mono", monospace; font-size: max(var(--v-min-texte, 12px), calc(12 * var(--p))); font-weight: 600; white-space: nowrap; } .v .v-pct.up { background: var(--v-up-bg); color: var(--v-up); } .v .v-pct.down { background: var(--v-down-bg); color: var(--v-down); } .v .v-pct.check { background: var(--v-check-bg); color: var(--v-check); } .v .v-pct.neutre { background: var(--v-neutre); color: var(--v-ink-2); } .v .v-bouton { display: inline-flex; align-items: center; justify-content: center; gap: calc(8 * var(--p)); padding: calc(10 * var(--p)) calc(16 * var(--p)); border-radius: var(--v-rayon-controle); background: var(--v-brand); color: var(--v-surface); box-shadow: 0 calc(1 * var(--p)) calc(2 * var(--p)) var(--v-ombre-marque); font-size: max(var(--v-min-texte, 12px), calc(14 * var(--p))); font-weight: 600; white-space: nowrap; transition: background-color .12s; } .v button.v-bouton:hover, .v a.v-bouton:hover { background: var(--v-brand-hover); color: var(--v-surface); } .v .v-bouton--blanc, .v a.v-bouton--blanc:hover { background: var(--v-surface); color: var(--v-brand); box-shadow: none; } .v a.v-bouton--blanc:hover { background: var(--v-brand-soft); } .v .v-bouton-2 { display: inline-flex; align-items: center; justify-content: center; gap: calc(6 * var(--p)); padding: calc(9 * var(--p)) calc(15 * var(--p)); border: calc(1 * var(--p)) solid var(--v-rule-2); border-radius: var(--v-rayon-controle); background: var(--v-surface); color: var(--v-ink-2); font-size: max(var(--v-min-texte, 12px), calc(14 * var(--p))); font-weight: 600; white-space: nowrap; transition: background-color .12s; } .v button.v-bouton-2:hover { background: var(--v-surface-2); } .v .v-bouton-2.petit { padding: calc(6 * var(--p)) calc(10 * var(--p)); font-size: max(var(--v-min-texte, 12px), calc(12.5 * var(--p))); } .v .v-seg, .v-app .v-seg { display: inline-flex; padding: calc(3 * var(--p)); border: calc(1 * var(--p)) solid var(--v-rule); border-radius: calc(9 * var(--p)); background: var(--v-surface-2); } .v .v-seg > *, .v-app .v-seg > * { padding: calc(5 * var(--p)) calc(11 * var(--p)); border-radius: calc(7 * var(--p)); color: var(--v-ink-2); font-size: max(var(--v-min-texte, 12px), calc(13 * var(--p))); font-weight: 500; white-space: nowrap; transition: background-color .12s, color .12s; } .v .v-seg > button:hover, .v .v-seg > a:hover, .v-app .v-seg > button:hover { color: var(--v-ink); } .v .v-seg > .actif, .v-app .v-seg > [aria-selected="true"] { background: var(--v-surface); color: var(--v-ink); box-shadow: 0 calc(1 * var(--p)) calc(2 * var(--p)) rgba(18,19,26,.14); font-weight: 600; } /* Les deux onglets de la Veille (Concurrents, Événements) : hors des écrans, posés en haut à droite de leur panneau comme dans le produit (la première ligne de l'écran leur laisse la place) ; au téléphone, une rangée entière au-dessus de l'écran, sur 44 px. */ .v-app--sous { position: absolute; top: calc(18 * var(--p)); right: calc(24 * var(--p)); z-index: 2; } @container ecran (width < 1200px) { .v-app--sous { position: static; padding: calc(12 * var(--p)) calc(14 * var(--p)) 0; background: var(--v-bg); } .v-app--sous .v-seg { display: flex; } .v-app--sous .v-seg > * { flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: max(var(--v-min-cible, 44px), calc(44 * var(--p))); padding: 0 calc(10 * var(--p)); } } .v .v-leg { display: flex; align-items: center; gap: calc(16 * var(--p)); color: var(--v-ink-2); font-size: max(var(--v-min-texte, 12px), calc(12.5 * var(--p))); white-space: nowrap; } .v .v-leg i { display: inline-block; width: calc(10 * var(--p)); height: calc(10 * var(--p)); margin-right: calc(6 * var(--p)); border-radius: calc(3 * var(--p)); vertical-align: calc(-1 * var(--p)); } .v .v-leg i.trait { width: calc(16 * var(--p)); height: calc(3 * var(--p)); border-radius: calc(2 * var(--p)); vertical-align: calc(3 * var(--p)); } .v .v-leg i.pointille { width: calc(16 * var(--p)); height: 0; border-top-width: calc(2 * var(--p)); border-top-style: dashed; border-radius: 0; vertical-align: calc(3 * var(--p)); background: none; } .v .v-leg i.points { width: calc(16 * var(--p)); height: 0; border-top-width: calc(3 * var(--p)); border-top-style: dotted; border-radius: 0; vertical-align: calc(3 * var(--p)); background: none; } .v .v-leg i.rond { width: calc(9 * var(--p)); height: calc(9 * var(--p)); border-radius: 50%; } .v .v-leg i.hach { background: repeating-linear-gradient(135deg, var(--v-hach-1) 0 calc(2 * var(--p)), var(--v-hach-2) calc(2 * var(--p)) calc(5 * var(--p))); } /* légende cliquable : chaque série se montre ou se masque */ .v .v-leg--b { gap: calc(4 * var(--p)); } .v .v-leg--b button { display: inline-flex; align-items: center; padding: calc(6 * var(--p)) calc(8 * var(--p)); border-radius: calc(7 * var(--p)); color: var(--v-ink-2); font-size: max(var(--v-min-texte, 12px), calc(12.5 * var(--p))); transition: opacity .12s, background-color .12s; } .v .v-leg--b button:hover { background: var(--v-surface-2); } .v .v-leg--b button[aria-pressed="false"] { opacity: .5; text-decoration: line-through; } .v[data-sans~="rea"] .s-rea, .v[data-sans~="res"] .s-res, .v[data-sans~="n1"] .s-n1, .v[data-sans~="n2"] .s-n2 { display: none; } .v .v-tag { flex: none; min-width: calc(76 * var(--p)); padding: calc(2 * var(--p)) calc(7 * var(--p)); border-radius: calc(5 * var(--p)); font-size: max(var(--v-min-texte, 12px), calc(12 * var(--p))); font-weight: 600; text-align: center; } .v .v-tag.mes { background: var(--v-mes-bg); color: var(--v-mes-texte); } .v .v-tag.cal { background: var(--v-cal-bg); color: var(--v-cal-texte); } .v .v-jb { padding: calc(2 * var(--p)) calc(7 * var(--p)); border: calc(1 * var(--p)) solid var(--v-rule); border-radius: calc(6 * var(--p)); background: var(--v-surface-2); color: var(--v-ink-2); font-size: max(var(--v-min-texte, 12px), calc(12 * var(--p))); font-weight: 600; white-space: nowrap; } /* tableaux */ .v table { width: 100%; border-collapse: collapse; font-size: max(var(--v-min-texte, 12px), calc(13.5 * var(--p))); } .v th { padding: calc(9 * var(--p)) calc(10 * var(--p)); border-bottom: calc(1 * var(--p)) solid var(--v-rule); color: var(--v-ink-3); font-size: max(var(--v-min-texte, 12px), calc(12 * var(--p))); font-weight: 600; text-align: left; white-space: nowrap; } .v td { height: calc(49 * var(--p)); padding: 0 calc(10 * var(--p)); border-bottom: calc(1 * var(--p)) solid var(--v-rule); white-space: nowrap; } .v tr td:first-child, .v tr th:first-child { padding-left: calc(18 * var(--p)); } .v tr td:last-child, .v tr th:last-child { padding-right: calc(18 * var(--p)); text-align: right; } .v tr:last-child td { border-bottom: none; } .v tr.sel td { background: var(--v-sel); } .v tr.sel td:first-child { box-shadow: inset calc(3 * var(--p)) 0 0 var(--v-brand); } .v .v-nuit { font-weight: 600; } .v .num { font-weight: 600; } .v .v-vend { display: flex; align-items: center; gap: calc(10 * var(--p)); font-size: max(var(--v-min-texte, 12px), calc(13 * var(--p))); } .v .v-vend svg { display: block; width: calc(64 * var(--p)); height: calc(6 * var(--p)); } .v .v-entete { flex: none; display: flex; align-items: flex-end; gap: calc(14 * var(--p)); } .v .v-entete .v-sous { margin-top: calc(3 * var(--p)); } /* La première ligne d'un écran de la Veille : aux bureaux, elle laisse à droite la place des deux onglets de la Veille (.v-app--sous), posés sur elle. */ .v .v-entete--veille { align-items: center; min-height: calc(32 * var(--p)); padding-right: calc(240 * var(--p)); } .v .v-entete--veille .v-sous { margin-top: 0; } /* infobulle : la carte d'une nuit, d'un mois */ .v .v-bulle { position: absolute; top: 0; left: 0; z-index: 5; width: calc(288 * var(--p)); margin: 0; padding: calc(14 * var(--p)) calc(16 * var(--p)); overflow: visible; color: var(--v-ink); box-shadow: var(--v-ombre-bulle); } .v .v-bulle[hidden] { display: none; } .v .v-bulle::before { content: ""; position: absolute; top: calc(-7 * var(--p)); left: var(--fleche, calc(34 * var(--p))); width: calc(12 * var(--p)); height: calc(12 * var(--p)); margin-left: calc(-6 * var(--p)); background: var(--v-surface); border-left: calc(1 * var(--p)) solid var(--v-rule); border-top: calc(1 * var(--p)) solid var(--v-rule); transform: rotate(45deg); } .v .v-bulle.dessus::before { top: auto; bottom: calc(-7 * var(--p)); transform: rotate(225deg); } .v .v-bulle.cote::before { display: none; } .v .v-bt { display: flex; align-items: center; justify-content: space-between; gap: calc(12 * var(--p)); margin-bottom: calc(6 * var(--p)); } .v .v-bt b { font-size: max(var(--v-min-texte, 12px), calc(15 * var(--p))); font-weight: 700; } .v .v-bl { display: flex; justify-content: space-between; gap: calc(12 * var(--p)); padding: calc(4 * var(--p)) 0; color: var(--v-ink-2); font-size: max(var(--v-min-texte, 12px), calc(13 * var(--p))); } .v .v-bl b { color: var(--v-ink); font-weight: 700; } .v .v-bl b .mut { font-weight: 500; } .v .v-bc { margin-top: calc(8 * var(--p)); } /* graphique lisible au curseur : sa bulle de lecture */ .v .v-lire { position: relative; } .v .v-lect { position: absolute; top: 0; left: 0; z-index: 4; display: flex; flex-direction: column; gap: calc(3 * var(--p)); min-width: calc(120 * var(--p)); padding: calc(8 * var(--p)) calc(10 * var(--p)); border: calc(1 * var(--p)) solid var(--v-rule); border-radius: calc(9 * var(--p)); background: var(--v-surface); box-shadow: var(--v-ombre-bulle); color: var(--v-ink-2); font-size: max(var(--v-min-texte, 12px), calc(12.5 * var(--p))); white-space: nowrap; pointer-events: none; } .v .v-lect[hidden] { display: none; } .v .v-lect > b { color: var(--v-ink); font-size: max(var(--v-min-texte, 12px), calc(13 * var(--p))); font-weight: 700; } .v .v-lect__l { display: flex; align-items: center; gap: calc(7 * var(--p)); } .v .v-lect__l[hidden] { display: none; } .v .v-lect__l i { flex: none; display: inline-block; width: calc(10 * var(--p)); height: calc(10 * var(--p)); border-radius: calc(3 * var(--p)); } .v .v-lect__l i.trait { width: calc(14 * var(--p)); height: calc(3 * var(--p)); border-radius: calc(2 * var(--p)); } .v .v-lect__l i.pointille, .v .v-lect__l i.points { width: calc(14 * var(--p)); height: 0; border-top-width: calc(2 * var(--p)); border-top-style: dashed; border-radius: 0; background: none; } .v .v-lect__l i.points { border-top-width: calc(3 * var(--p)); border-top-style: dotted; } .v .v-lect__l > span { margin-left: auto; padding-left: calc(12 * var(--p)); color: var(--v-ink); font-weight: 600; } /* ---------- 4. Écrans ---------- */ /* Accueil */ .v .v-hero { display: flex; align-items: center; gap: calc(26 * var(--p)); padding: calc(18 * var(--p)) calc(24 * var(--p)); border-radius: calc(16 * var(--p)); background: var(--v-brand); color: var(--v-surface); box-shadow: 0 calc(4 * var(--p)) calc(16 * var(--p)) var(--v-ombre-bandeau); } .v .v-hero__sur { margin-bottom: calc(2 * var(--p)); font-size: max(var(--v-min-texte, 12px), calc(13 * var(--p))); opacity: .86; } .v .v-hero__gros { font-size: max(var(--v-min-champ, 16px), calc(24 * var(--p))); font-weight: 600; letter-spacing: -.01em; } .v .v-hero__gros b { margin-right: calc(4 * var(--p)); font-size: max(var(--v-min-champ, 16px), calc(32 * var(--p))); font-weight: 700; } .v .v-hero__chips { display: flex; gap: calc(8 * var(--p)); } .v .v-hero .v-chip { padding: calc(4 * var(--p)) calc(10 * var(--p)); background: var(--v-surface); font-size: max(var(--v-min-texte, 12px), calc(12.5 * var(--p))); } .v .v-titre-sec { display: flex; align-items: center; gap: calc(12 * var(--p)); } .v .v-titre-sec .v-seg { margin-left: auto; } .v .v-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(16 * var(--p)); } .v .v-kpi { position: relative; display: block; height: calc(124 * var(--p)); padding: calc(16 * var(--p)) calc(18 * var(--p)); text-align: left; transition: border-color .12s, box-shadow .12s; } .v button.v-kpi:hover { border-color: var(--v-rule-2); } .v button.v-kpi[aria-pressed="true"] { border-color: var(--v-brand); box-shadow: inset 0 0 0 calc(1 * var(--p)) var(--v-brand); } .v .v-kpi__tete { display: flex; align-items: center; gap: calc(10 * var(--p)); color: var(--v-ink-2); font-size: max(var(--v-min-texte, 12px), calc(13.5 * var(--p))); font-weight: 500; } .v .v-ico { display: grid; place-items: center; width: calc(30 * var(--p)); height: calc(30 * var(--p)); border-radius: calc(9 * var(--p)); background: var(--v-brand-soft); color: var(--v-brand); } .v .v-ico svg { width: calc(17 * var(--p)); height: calc(17 * var(--p)); } .v .v-kpi__val { display: block; margin: calc(10 * var(--p)) 0 calc(5 * var(--p)); font-size: max(var(--v-min-champ, 16px), calc(30 * var(--p))); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; } .v .v-bas { flex: 1; display: grid; grid-template-columns: 1fr calc(430 * var(--p)); gap: calc(16 * var(--p)); min-height: 0; } .v .v-bas > .v-carte { display: flex; flex-direction: column; min-width: 0; min-height: 0; } .v .v-carte--mois { display: flex; flex-direction: column; min-height: 0; } .v .v-carte--mois .v-carte__tete { flex-wrap: wrap; gap: calc(2 * var(--p)) calc(12 * var(--p)); padding-top: calc(12 * var(--p)); } .v .v-carte--mois .v-carte__tete > .droite { order: 3; width: 100%; min-height: calc(30 * var(--p)); margin-left: calc(-8 * var(--p)); } .v .v-carte--mois .v-carte__tete > .v-seg { margin-left: auto; } .v[data-plonge] .v-carte--mois .v-carte__tete > .droite { margin-left: 0; } .v .v-si-plonge, .v[data-plonge] .v-sauf-plonge { display: none; } .v[data-plonge] .v-si-plonge { display: flex; } .v .v-ariane { align-items: center; gap: calc(8 * var(--p)); color: var(--v-ink-3); } .v .v-ariane button { padding: calc(5 * var(--p)) calc(9 * var(--p)); border: calc(1 * var(--p)) solid var(--v-rule-2); border-radius: calc(8 * var(--p)); color: var(--v-brand); font-size: max(var(--v-min-texte, 12px), calc(13 * var(--p))); font-weight: 600; } .v .v-ariane button:hover { background: var(--v-brand-soft); } .v .v-tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: calc(10 * var(--p)); padding: calc(14 * var(--p)) calc(18 * var(--p)) calc(8 * var(--p)); } .v .v-tuile { padding: calc(11 * var(--p)) calc(14 * var(--p)); border: calc(1 * var(--p)) solid var(--v-rule); border-radius: calc(11 * var(--p)); background: var(--v-surface-2); } .v .v-tuile__l { display: flex; align-items: center; gap: calc(7 * var(--p)); color: var(--v-ink-2); font-size: max(var(--v-min-texte, 12px), calc(12.5 * var(--p))); } .v .v-tuile__l i { width: calc(8 * var(--p)); height: calc(8 * var(--p)); border-radius: 50%; } .v .v-tuile b { display: block; margin: calc(3 * var(--p)) 0 0; font-size: max(var(--v-min-champ, 16px), calc(22 * var(--p))); font-weight: 700; } .v .v-tuile__s { color: var(--v-ink-3); font-size: max(var(--v-min-texte, 12px), calc(12 * var(--p))); } .v .v-mini-titre { display: flex; justify-content: space-between; padding: calc(8 * var(--p)) calc(18 * var(--p)) 0; color: var(--v-ink-2); font-size: max(var(--v-min-texte, 12px), calc(12.5 * var(--p))); font-weight: 600; } /* Décisions */ .v .v-horizon-c { flex: none; padding: calc(12 * var(--p)) calc(18 * var(--p)) calc(6 * var(--p)); } .v .v-horizon__tete { display: flex; align-items: center; gap: calc(22 * var(--p)); } .v .v-horizon-c .v-zone { margin-top: calc(2 * var(--p)); } .v .v-deux { flex: 1; display: grid; grid-template-columns: 1fr calc(556 * var(--p)); gap: calc(16 * var(--p)); min-height: 0; } .v .v-liste { display: flex; flex-direction: column; padding-top: calc(14 * var(--p)); overflow: hidden; } .v .v-liste__tete { display: flex; align-items: flex-end; justify-content: space-between; padding: 0 calc(18 * var(--p)) calc(8 * var(--p)); } .v .v-compte { display: flex; align-items: baseline; gap: calc(18 * var(--p)); margin-top: calc(2 * var(--p)); color: var(--v-ink-2); font-size: max(var(--v-min-texte, 12px), calc(14 * var(--p))); } .v .v-compte b { color: var(--v-ink); } .v .v-compte b.g { margin-right: calc(6 * var(--p)); font-size: max(var(--v-min-champ, 16px), calc(30 * var(--p))); font-weight: 700; } .v .v-onglets { display: flex; gap: calc(6 * var(--p)); padding: 0 calc(18 * var(--p)); border-bottom: calc(1 * var(--p)) solid var(--v-rule); } .v .v-onglets > [role="tab"] { margin-bottom: calc(-1 * var(--p)); padding: calc(9 * var(--p)) calc(8 * var(--p)); border-bottom: calc(2 * var(--p)) solid transparent; color: var(--v-ink-3); font-size: max(var(--v-min-texte, 12px), calc(13.5 * var(--p))); font-weight: 500; white-space: nowrap; transition: color .12s; } .v .v-onglets > [role="tab"]:hover { color: var(--v-ink); } .v .v-onglets > [aria-selected="true"], .v .v-onglets > [aria-selected="true"]:hover { border-color: var(--v-brand); color: var(--v-brand); font-weight: 600; } .v .v-onglets .n { margin-left: calc(6 * var(--p)); padding: calc(1 * var(--p)) calc(7 * var(--p)); border-radius: calc(99 * var(--p)); background: var(--v-surface-2); color: var(--v-ink-2); font-size: max(var(--v-min-texte, 12px), calc(12 * var(--p))); } .v .v-onglets [aria-selected="true"] .n { background: var(--v-brand-soft); color: var(--v-brand); } /* Les zones de rechange d'un écran ne sont pas encore arrivées : il le dit. */ .v[aria-busy="true"] { cursor: progress; } /* La liste défile dans sa carte, comme dans le poste : douze nuits à surveiller ne tiennent pas dans la hauteur de l'écran. */ .v .v-liste [role="tabpanel"] { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scroll-padding-top: calc(38 * var(--p)); } .v .v-liste [role="tabpanel"][hidden] { display: none; } .v .v-liste thead th { position: sticky; top: 0; z-index: 1; background: var(--v-surface); } .v .v-liste tbody tr { cursor: pointer; transition: background-color .12s; } .v .v-liste tbody tr:hover td { background: var(--v-surface-2); } .v .v-liste tbody tr.sel:hover td { background: var(--v-sel); } .v .v-liste button.v-nuit { padding: calc(4 * var(--p)) 0; } .v [data-etat="propose"] .v-si-retenu, .v [data-etat="propose"] .v-si-refuse, .v [data-etat="propose"] .v-si-decide, .v [data-etat="retenu"] .v-si-propose, .v [data-etat="retenu"] .v-si-refuse, .v [data-etat="refuse"] .v-si-propose, .v [data-etat="refuse"] .v-si-retenu { display: none; } .v [data-etat="refuse"] .v-reco-c b, .v [data-etat="refuse"] .v-dos__prix .nouveau { color: var(--v-ink-3); text-decoration: line-through; } .v .v-dossier { display: flex; flex-direction: column; min-height: 0; padding: calc(14 * var(--p)) calc(20 * var(--p)); } .v .v-dos { flex: 1; display: flex; flex-direction: column; gap: calc(11 * var(--p)); min-height: 0; } .v .v-dos__tete { display: flex; align-items: center; gap: calc(10 * var(--p)); } .v .v-dos__tete .v-h2 { font-size: max(var(--v-min-champ, 16px), calc(20 * var(--p))); white-space: nowrap; } .v .v-nav-ic { display: flex; gap: calc(6 * var(--p)); margin-left: auto; } .v .v-nav-ic > * { display: grid; place-items: center; width: calc(28 * var(--p)); height: calc(28 * var(--p)); border: calc(1 * var(--p)) solid var(--v-rule); border-radius: calc(8 * var(--p)); color: var(--v-ink-2); } .v .v-nav-ic button:hover { background: var(--v-surface-2); } .v .v-nav-ic svg { width: calc(14 * var(--p)); height: calc(14 * var(--p)); } .v .v-reco { display: flex; align-items: center; justify-content: space-between; gap: calc(12 * var(--p)); min-height: calc(81 * var(--p)); padding: calc(12 * var(--p)) calc(14 * var(--p)); border: calc(1 * var(--p)) solid var(--v-rule); border-radius: calc(12 * var(--p)); } .v .v-dos__prix { display: flex; align-items: center; gap: calc(10 * var(--p)); margin-top: calc(2 * var(--p)); } .v .v-dos__prix .ancien { color: var(--v-ink-3); font-size: max(var(--v-min-champ, 16px), calc(24 * var(--p))); font-weight: 500; } .v .v-dos__prix .nouveau { font-size: max(var(--v-min-champ, 16px), calc(32 * var(--p))); font-weight: 700; letter-spacing: -.02em; } .v .v-dos__prix .v-pct { font-size: max(var(--v-min-texte, 12px), calc(13 * var(--p))); } .v .v-dos__actions { display: flex; align-items: center; gap: calc(8 * var(--p)); } .v .v-dos__note { max-width: calc(190 * var(--p)); color: var(--v-ink-2); font-size: max(var(--v-min-texte, 12px), calc(13 * var(--p))); text-align: right; } .v .v-dos__stats { display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; border: calc(1 * var(--p)) solid var(--v-rule); border-radius: calc(12 * var(--p)); background: var(--v-surface-2); } .v .v-dos__stats div { padding: calc(8 * var(--p)) calc(12 * var(--p)); border-right: calc(1 * var(--p)) solid var(--v-rule); } .v .v-dos__stats div:last-child { border: none; } .v .v-dos__stats span { display: block; color: var(--v-ink-3); font-size: max(var(--v-min-texte, 12px), calc(12 * var(--p))); white-space: nowrap; } .v .v-dos__stats b { font-size: max(var(--v-min-texte, 12px), calc(15 * var(--p))); font-weight: 700; white-space: nowrap; } .v .v-dos__stats small { font-size: max(var(--v-min-texte, 12px), calc(12 * var(--p))); font-weight: 500; } .v .v-raisons { display: flex; flex-direction: column; gap: calc(6 * var(--p)); } .v .v-raisons .v-eyebrow { margin-bottom: calc(2 * var(--p)); } .v .v-r { display: flex; align-items: center; gap: calc(10 * var(--p)); color: var(--v-ink-2); font-size: max(var(--v-min-texte, 12px), calc(13 * var(--p))); white-space: nowrap; } .v .v-r b { color: var(--v-ink); font-weight: 600; } /* La source de la médiane, à droite du titre « Pourquoi » : dans le bloc, sans hauteur de plus. */ .v .v-raisons__source { margin-left: auto; font-weight: 400; text-transform: none; letter-spacing: 0; } .v .v-courbe { flex: 1; display: flex; flex-direction: column; min-height: 0; } .v .v-courbe__tete { display: flex; align-items: center; gap: calc(16 * var(--p)); } .v .v-courbe__tete .v-leg { gap: calc(12 * var(--p)); } .v .v-dos__pied { display: flex; align-items: center; gap: calc(6 * var(--p)); color: var(--v-ink-3); font-size: max(var(--v-min-texte, 12px), calc(12 * var(--p))); } .v dialog.v-feuille { display: none; } /* le plan « dossier » : la même carte, en large */ .v .v-dossier--large { flex: 1; padding: calc(20 * var(--p)) calc(24 * var(--p)); } .v .v-dos--large { display: grid; grid-template-columns: calc(560 * var(--p)) 1fr; gap: calc(32 * var(--p)); } .v .v-dos__col { display: flex; flex-direction: column; gap: calc(14 * var(--p)); min-width: 0; } .v .v-dos--large .v-dos__pied { margin-top: auto; } .v .v-dos--large .v-reco { padding: calc(16 * var(--p)) calc(18 * var(--p)); } .v .v-dos--large .v-r { font-size: max(var(--v-min-texte, 12px), calc(13.5 * var(--p))); } .v .v-dos--large .v-raisons { gap: calc(9 * var(--p)); margin-top: calc(4 * var(--p)); } /* Les points de sens (hausse, baisse, maintien) des jours du calendrier des Événements. */ .v .pt.up { background: var(--v-up-mid); } .v .pt.down { background: var(--v-down-mid); } .v .pt.check { background: var(--v-check-mid); } /* Veille › Événements */ .v .v-carte--ev { flex: 1; min-height: 0; overflow: hidden; } .v table.ev td { height: max(var(--v-min-cible, 44px), calc(44 * var(--p))); } .v .v-type { display: inline-flex; align-items: center; gap: calc(6 * var(--p)); padding: calc(3 * var(--p)) calc(9 * var(--p)); border-radius: calc(99 * var(--p)); font-size: max(var(--v-min-texte, 12px), calc(12 * var(--p))); font-weight: 600; } .v .v-type.c-salon { background: var(--v-cat-salon-bg); color: var(--v-cat-salon-texte); } .v .v-type.c-congres { background: var(--v-cat-congres-bg); color: var(--v-cat-congres-texte); } .v .v-type.c-concert { background: var(--v-cat-concert-bg); color: var(--v-cat-concert-texte); } .v .v-type.c-sport { background: var(--v-cat-sport-bg); color: var(--v-cat-sport-texte); } .v .v-type.c-vacances { background: var(--v-cat-vacances-bg); color: var(--v-cat-vacances-texte); } .v .v-type.c-interne { background: var(--v-cat-interne-bg); color: var(--v-cat-interne-texte); } .v .v-impact { display: flex; align-items: center; gap: calc(8 * var(--p)); } .v .v-impact svg { display: block; width: calc(80 * var(--p)); height: calc(6 * var(--p)); } .v .v-impact b { font-weight: 600; } .v table.ev tbody tr { transition: opacity .12s; } .v table.ev button.v-nuit { padding: calc(4 * var(--p)) 0; } /* Assistant */ .v .v-asst { flex: 1; display: grid; grid-template-columns: calc(300 * var(--p)) 1fr; gap: calc(16 * var(--p)); min-height: 0; } .v .v-fils { display: flex; flex-direction: column; gap: calc(2 * var(--p)); padding: calc(16 * var(--p)) calc(12 * var(--p)); } .v .v-fils__tete { display: flex; align-items: center; justify-content: space-between; padding: 0 calc(6 * var(--p)) calc(10 * var(--p)); } .v .v-fil { display: flex; flex-direction: column; gap: calc(3 * var(--p)); padding: calc(10 * var(--p)) calc(12 * var(--p)); border-radius: calc(10 * var(--p)); } .v .v-fil b { color: var(--v-ink); font-size: max(var(--v-min-texte, 12px), calc(13.5 * var(--p))); font-weight: 600; } .v .v-fil span { color: var(--v-ink-3); font-size: max(var(--v-min-texte, 12px), calc(12 * var(--p))); } .v .v-fil.actif { background: var(--v-brand-soft); } .v .v-fil.actif b { color: var(--v-brand); } .v .v-fil.actif span { color: var(--v-ink-2); } .v .v-donnees { display: flex; flex-direction: column; gap: calc(9 * var(--p)); margin-top: auto; padding: calc(14 * var(--p)) calc(12 * var(--p)) calc(2 * var(--p)); border-top: calc(1 * var(--p)) solid var(--v-rule); } .v .v-d-l { display: flex; align-items: center; gap: calc(9 * var(--p)); color: var(--v-ink-2); font-size: max(var(--v-min-texte, 12px), calc(13 * var(--p))); } .v .v-d-l i { width: calc(8 * var(--p)); height: calc(8 * var(--p)); border-radius: 50%; } .v .v-d-l span { margin-left: auto; color: var(--v-ink-3); font-size: max(var(--v-min-texte, 12px), calc(12 * var(--p))); } .v .v-conv { display: flex; flex-direction: column; gap: calc(12 * var(--p)); min-height: 0; padding: calc(18 * var(--p)) calc(28 * var(--p)) calc(16 * var(--p)); } .v .v-conv__tete { display: flex; align-items: center; gap: calc(12 * var(--p)); padding-bottom: calc(14 * var(--p)); border-bottom: calc(1 * var(--p)) solid var(--v-rule); } .v .v-q { display: flex; align-items: flex-start; gap: calc(12 * var(--p)); } .v .v-av { flex: none; display: grid; place-items: center; width: calc(32 * var(--p)); height: calc(32 * var(--p)); border-radius: 50%; background: var(--v-avatar); color: var(--v-ink-2); font-size: max(var(--v-min-texte, 12px), calc(12 * var(--p))); font-weight: 700; } .v .v-meta { display: flex; align-items: center; gap: calc(8 * var(--p)); margin-bottom: calc(3 * var(--p)); color: var(--v-ink-3); font-size: max(var(--v-min-texte, 12px), calc(12 * var(--p))); } .v .v-meta b { color: var(--v-ink); font-weight: 600; } .v .v-q-txt { color: var(--v-ink); font-size: max(var(--v-min-texte, 12px), calc(15 * var(--p))); font-weight: 500; } .v .v-a { display: flex; flex-direction: column; gap: calc(12 * var(--p)); padding: calc(14 * var(--p)) calc(18 * var(--p)); border: calc(1 * var(--p)) solid var(--v-rule); border-radius: calc(14 * var(--p)); } .v .v-a-logo { display: block; width: calc(20 * var(--p)); height: calc(20 * var(--p)); } .v .v-a-txt { color: var(--v-ink); font-size: max(var(--v-min-texte, 12px), calc(15 * var(--p))); line-height: 1.5; } .v .v-preuves { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(10 * var(--p)); } .v .v-preuve { display: flex; flex-direction: column; gap: calc(3 * var(--p)); min-width: 0; padding: calc(11 * var(--p)) calc(14 * var(--p)) calc(10 * var(--p)); border: calc(1 * var(--p)) solid var(--v-rule); border-radius: calc(12 * var(--p)); background: var(--v-surface-2); } .v .v-p-tete { display: flex; align-items: center; justify-content: space-between; color: var(--v-ink-2); font-size: max(var(--v-min-texte, 12px), calc(12.5 * var(--p))); font-weight: 600; } .v .v-p-tete .v-tag { min-width: 0; } .v .v-preuve > b { margin-top: calc(4 * var(--p)); font-size: max(var(--v-min-champ, 16px), calc(19 * var(--p))); font-weight: 700; } .v .v-preuve > b .mut { font-size: max(var(--v-min-texte, 12px), calc(14 * var(--p))); font-weight: 500; } .v .v-preuve .s { color: var(--v-ink-3); font-size: max(var(--v-min-texte, 12px), calc(12 * var(--p))); } .v .v-mini { height: calc(34 * var(--p)); margin-top: calc(4 * var(--p)); } .v .v-reco-a { display: flex; align-items: center; justify-content: space-between; gap: calc(16 * var(--p)); padding: calc(12 * var(--p)) calc(14 * var(--p)); border-radius: calc(12 * var(--p)); background: var(--v-brand-soft); } .v .v-reco-a .v-eyebrow, .v .v-reco-a .mut { color: var(--v-ink-2); } .v .v-ligne-r { display: flex; align-items: center; gap: calc(10 * var(--p)); margin-top: calc(3 * var(--p)); font-size: max(var(--v-min-texte, 12px), calc(14 * var(--p))); white-space: nowrap; } .v .v-ligne-r .old { color: var(--v-ink-2); font-size: max(var(--v-min-champ, 16px), calc(18 * var(--p))); } .v .v-ligne-r .new { color: var(--v-up); font-size: max(var(--v-min-champ, 16px), calc(22 * var(--p))); font-weight: 700; } .v .v-note { margin-top: calc(-6 * var(--p)); color: var(--v-ink-3); font-size: max(var(--v-min-texte, 12px), calc(12 * var(--p))); text-align: center; } /* Visite guidée : l'étape en cours entoure ce qu'elle montre */ .v[data-v-etape="1"] [data-v-jalon="1"], .v[data-v-etape="2"] [data-v-jalon="2"], .v[data-v-etape="3"] [data-v-jalon="3"], .v[data-v-etape="4"] [data-v-jalon="4"] { outline: calc(2 * var(--p)) solid var(--v-brand); outline-offset: calc(4 * var(--p)); border-radius: calc(8 * var(--p)); } /* ---------- 5. Bureau compact (1 200 px de large, taille réelle) ---------- La structure du bureau, recomposée : colonnes latérales plus étroites, colonnes secondaires des tableaux retirées (leur contenu est dans le dossier de la nuit). */ .v--m { width: calc(1200 * var(--p)); } .v--m .sec, .v--m .v-vend svg { display: none; } .v--m .v-deux { grid-template-columns: 1fr calc(540 * var(--p)); } .v--m .v-dos__prix .ancien { font-size: max(var(--v-min-champ, 16px), calc(22 * var(--p))); } .v--m .v-dos__prix .nouveau { font-size: max(var(--v-min-champ, 16px), calc(28 * var(--p))); } .v--m .v-r { align-items: flex-start; white-space: normal; } .v--m .v-dos__stats { grid-template-columns: repeat(4, auto); } .v--m .v-bas { grid-template-columns: 1fr calc(380 * var(--p)); } .v--m .v-asst { grid-template-columns: calc(250 * var(--p)) minmax(0, 1fr); } .v--m .v-dos--large { grid-template-columns: calc(540 * var(--p)) 1fr; gap: calc(28 * var(--p)); } .v--m .v-conv { padding: calc(18 * var(--p)) calc(20 * var(--p)) calc(16 * var(--p)); } .v--m .v-hero { gap: calc(18 * var(--p)); } /* ---------- 6. Téléphone (390 px de large) ---------- Les mêmes briques en une colonne ; chaque cible tactile fait au moins 44 px. */ .v--c { width: calc(390 * var(--p)); height: auto; overflow: visible; } .v--c button, .v--c a.v-bouton { min-height: max(var(--v-min-cible, 44px), calc(44 * var(--p))); } .v--c .v-page { gap: calc(12 * var(--p)); padding: calc(14 * var(--p)) calc(14 * var(--p)) calc(16 * var(--p)); } .v--c .v-h2 { font-size: max(var(--v-min-champ, 16px), calc(20 * var(--p))); } .v--c .v-sous { white-space: normal; } .v--c .v-entete { flex-direction: column; align-items: stretch; gap: calc(10 * var(--p)); } .v--c .v-entete--veille { min-height: 0; padding-right: 0; } .v--c .v-carte__tete { flex-wrap: wrap; gap: calc(6 * var(--p)) calc(12 * var(--p)); padding: calc(14 * var(--p)) calc(14 * var(--p)) 0; } .v--c .v-carte__tete .droite { width: 100%; margin-left: 0; } .v--c .v-leg { flex-wrap: wrap; gap: calc(4 * var(--p)) calc(14 * var(--p)); } .v--c .v-zone { padding: calc(8 * var(--p)) calc(14 * var(--p)) calc(10 * var(--p)); } .v--c .v-seg { display: flex; } .v--c .v-seg > * { flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: max(var(--v-min-cible, 44px), calc(44 * var(--p))); padding: 0 calc(10 * var(--p)); } /* Accueil */ .v--c .v-hero { flex-wrap: wrap; gap: calc(12 * var(--p)) calc(14 * var(--p)); padding: calc(16 * var(--p)); } .v--c .v-hero > div:first-child, .v--c .v-hero__chips { width: 100%; } .v--c .v-hero__chips { flex-wrap: wrap; } .v--c .v-hero .v-bouton { margin-left: auto; } .v--c .v-titre-sec { flex-wrap: wrap; gap: calc(4 * var(--p)) calc(12 * var(--p)); } .v--c .v-titre-sec .v-seg { width: 100%; margin: calc(6 * var(--p)) 0 0; } .v--c .v-kpis { grid-template-columns: 1fr 1fr; gap: calc(10 * var(--p)); } .v--c .v-kpi { height: auto; padding: calc(12 * var(--p)) calc(14 * var(--p)); } .v--c .v-kpi__val { margin: calc(8 * var(--p)) 0 calc(5 * var(--p)); font-size: max(var(--v-min-champ, 16px), calc(22 * var(--p))); } .v--c .v-ico { width: calc(26 * var(--p)); height: calc(26 * var(--p)); } .v--c .v-carte--mois .v-carte__tete > .droite { order: 0; min-height: 0; margin-left: 0; } .v--c .v-leg--b { display: grid; grid-template-columns: 1fr 1fr; gap: 0 calc(8 * var(--p)); } .v--c .v-leg--b button { justify-content: flex-start; } .v--c[data-plonge] .v-ariane { width: 100%; } .v--c .v-ariane button { padding: 0 calc(14 * var(--p)); } .v--c .vm-moisl { display: flex; flex-direction: column; } .v--c .vm-mois { display: grid; grid-template-columns: calc(82 * var(--p)) 1fr calc(64 * var(--p)); align-items: center; gap: calc(10 * var(--p)); border-bottom: calc(1 * var(--p)) solid var(--v-rule); font-size: max(var(--v-min-texte, 12px), calc(13 * var(--p))); } .v--c .vm-mois:last-child { border-bottom: none; } .v--c .vm-mois__m { color: var(--v-ink-2); } .v--c .vm-mois.encours .vm-mois__m { color: var(--v-brand); font-weight: 600; } .v--c .vm-mois svg { display: block; width: 100%; height: auto; overflow: visible; } .v--c .vm-mois b { font-weight: 600; text-align: right; } /* Décisions */ .v--c .v-liste { padding-top: calc(12 * var(--p)); overflow: visible; } .v--c .v-liste__tete { flex-direction: column; align-items: stretch; gap: calc(10 * var(--p)); padding: 0 calc(14 * var(--p)) calc(6 * var(--p)); } .v--c .v-compte { flex-wrap: wrap; gap: calc(4 * var(--p)) calc(16 * var(--p)); } .v--c .v-onglets { gap: calc(2 * var(--p)); padding: 0 calc(8 * var(--p)); } .v--c .v-onglets > [role="tab"] { flex: 1; padding: 0 calc(4 * var(--p)); font-size: max(var(--v-min-texte, 12px), calc(13 * var(--p))); text-align: center; } .v--c .v-onglets .n { margin-left: calc(4 * var(--p)); padding: calc(1 * var(--p)) calc(6 * var(--p)); } .v--c .v-liste [role="tabpanel"] { overflow: visible; } .v--c .vm-liste { list-style: none; } .v--c .vm-liste li { border-bottom: calc(1 * var(--p)) solid var(--v-rule); } .v--c .vm-liste li:last-child { border-bottom: none; } .v--c .vm-liste li.sel { background: var(--v-sel); box-shadow: inset calc(3 * var(--p)) 0 0 var(--v-brand); } .v--c .vm-nuit { display: flex; flex-direction: column; align-items: stretch; gap: calc(7 * var(--p)); width: 100%; padding: calc(11 * var(--p)) calc(14 * var(--p)); font-size: max(var(--v-min-texte, 12px), calc(13.5 * var(--p))); } .v--c .vm-nuit__l { display: flex; align-items: center; justify-content: space-between; gap: calc(10 * var(--p)); } .v--c .v-horizon-c { padding: calc(12 * var(--p)) calc(14 * var(--p)) calc(8 * var(--p)); } .v--c .v-horizon__tete { flex-wrap: wrap; gap: calc(4 * var(--p)) calc(12 * var(--p)); } .v--c .v-horizon-c .v-zone { padding: calc(6 * var(--p)) 0 0; } .v--c .v-dossier { padding: calc(14 * var(--p)); } .v--c .v-dos { gap: calc(12 * var(--p)); } .v--c .v-dos--large { display: flex; flex-direction: column; gap: calc(12 * var(--p)); } .v--c .v-dos__col { gap: calc(12 * var(--p)); } .v--c .v-dos__tete { flex-wrap: wrap; gap: calc(8 * var(--p)); } .v--c .v-dos__tete .v-h2 { width: 100%; font-size: max(var(--v-min-champ, 16px), calc(19 * var(--p))); } .v--c .v-nav-ic > * { width: max(var(--v-min-cible, 44px), calc(44 * var(--p))); height: max(var(--v-min-cible, 44px), calc(44 * var(--p))); } .v--c .v-nav-ic svg { width: calc(16 * var(--p)); height: calc(16 * var(--p)); } .v--c .v-reco { flex-direction: column; align-items: stretch; min-height: 0; padding: calc(12 * var(--p)) calc(14 * var(--p)); } .v--c .v-dos__prix .nouveau { font-size: max(var(--v-min-champ, 16px), calc(28 * var(--p))); } .v--c .v-dos__actions > * { flex: 1; } .v--c .v-dos__note { max-width: none; text-align: left; } .v--c .v-dos__stats { grid-template-columns: 1fr 1fr; } .v--c .v-dos__stats div:nth-child(2) { border-right: none; } .v--c .v-dos__stats div:nth-child(-n+2) { border-bottom: calc(1 * var(--p)) solid var(--v-rule); } .v--c .v-r { align-items: flex-start; white-space: normal; } .v--c .v-raisons .v-eyebrow { flex-wrap: wrap; gap: calc(2 * var(--p)) calc(8 * var(--p)); white-space: normal; } .v--c .v-raisons__source { margin-left: 0; } .v--c .v-courbe__tete { flex-wrap: wrap; gap: calc(6 * var(--p)) calc(14 * var(--p)); } .v--c .v-dos__pied { align-items: flex-start; } /* la feuille du bas : le dossier de la nuit touchée dans la liste */ .v--c dialog.v-feuille[open] { display: block; } .v--c dialog.v-feuille { position: fixed; inset: auto 0 0 0; z-index: 40; width: 100%; max-width: none; max-height: 86vh; max-height: 86dvh; margin: 0; padding: 0 0 env(safe-area-inset-bottom); border: 0; border-radius: calc(18 * var(--p)) calc(18 * var(--p)) 0 0; background: var(--v-surface); color: var(--v-ink); overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 calc(-8 * var(--p)) calc(32 * var(--p)) rgba(18,19,26,.18); } .v--c dialog.v-feuille::backdrop { background: var(--v-voile); } .v--c .v-feuille__tete { position: sticky; top: 0; z-index: 1; display: flex; justify-content: flex-end; padding: calc(6 * var(--p)) calc(8 * var(--p)) 0; background: var(--v-surface); } .v--c .v-feuille__tete button { display: grid; place-items: center; width: max(var(--v-min-cible, 44px), calc(44 * var(--p))); height: max(var(--v-min-cible, 44px), calc(44 * var(--p))); border-radius: calc(10 * var(--p)); color: var(--v-ink-2); } .v--c .v-feuille__tete svg { width: calc(18 * var(--p)); height: calc(18 * var(--p)); } .v--c .v-feuille .v-dossier { padding: 0 calc(16 * var(--p)) calc(20 * var(--p)); } /* Tables */ .v--c table { font-size: max(var(--v-min-texte, 12px), calc(13 * var(--p))); } .v--c td { height: max(var(--v-min-cible, 44px), calc(44 * var(--p))); padding: 0 calc(6 * var(--p)); } .v--c th { padding: calc(9 * var(--p)) calc(6 * var(--p)); } .v--c tr td:first-child, .v--c tr th:first-child { padding-left: calc(14 * var(--p)); } .v--c tr td:last-child, .v--c tr th:last-child { padding-right: calc(14 * var(--p)); } /* Veille › Événements : une carte par événement */ .v--c .vm-evs { overflow: hidden; } .v--c .vm-ev { display: flex; flex-direction: column; align-items: stretch; gap: calc(7 * var(--p)); width: 100%; padding: calc(11 * var(--p)) calc(14 * var(--p)); border-bottom: calc(1 * var(--p)) solid var(--v-rule); font-size: max(var(--v-min-texte, 12px), calc(13 * var(--p))); transition: background-color .12s; } .v--c .vm-ev:last-child { border-bottom: none; } .v--c .vm-ev__l { display: flex; align-items: center; gap: calc(10 * var(--p)); } .v--c .vm-ev b { font-weight: 600; } .v--c .vm-ev .v-impact { margin-left: auto; } /* Assistant */ .v--c .v-conv { padding: calc(14 * var(--p)); } .v--c .v-q-txt, .v--c .v-a-txt { font-size: max(var(--v-min-texte, 12px), calc(14 * var(--p))); } .v--c .v-a { padding: calc(12 * var(--p)) calc(14 * var(--p)); } .v--c .v-meta { flex-wrap: wrap; } /* L'en-tête d'une réponse se lit au fil du texte : en colonne étroite, la boîte flexible renvoyait le relevé à la ligne, point médian en tête. */ .v--c .v-a > .v-meta { display: block; } .v--c .v-a > .v-meta .v-a-logo { display: inline-block; margin-right: calc(6 * var(--p)); vertical-align: calc(-5 * var(--p)); } .v--c .v-preuves { grid-template-columns: 1fr; } .v--c .v-mini { display: none; } .v--c .v-reco-a { flex-direction: column; align-items: stretch; } .v--c .v-ligne-r { flex-wrap: wrap; white-space: normal; } .v--c .v-reco-a .v-bouton, .v--c .v-reco-a .v-bouton-2 { flex: 1; min-height: max(var(--v-min-cible, 44px), calc(44 * var(--p))); } .v--c .v-note { margin-top: 0; } /* ---------- Accueil (passe 3) : périodes, six chiffres, calendrier, budget ---------- En px de la maquette (1 440 de large) : le build met chaque longueur à l'échelle. */ /* L'écran est une fenêtre de l'app : en bureau, son contenu défile dans la fenêtre. */ .v--accueil .v-page--defile { overflow-y: auto; overscroll-behavior: contain; scroll-padding-top: calc(12 * var(--p)); } .v--accueil .v-page--defile:focus-visible { outline-offset: calc(-2 * var(--p)); } /* Dans une fenêtre qui défile, rien ne se tasse : chaque bloc garde sa hauteur. */ .v--accueil .v-page--defile > * { flex-shrink: 0; } .v--accueil .v-page--defile > .v-bas { flex: none; height: calc(430 * var(--p)); } /* Les périodes : sept boutons, un seul pressé (ou aucun quand des jours sont choisis). */ .v .v-titre-ind { flex-wrap: wrap; row-gap: calc(8 * var(--p)); } .v .v-periodes > button[aria-pressed="true"] { background: var(--v-surface); color: var(--v-ink); box-shadow: 0 calc(1 * var(--p)) calc(2 * var(--p)) rgba(18,19,26,.14); font-weight: 600; } .v .v-ind-sous { display: flex; flex-direction: column; gap: calc(3 * var(--p)); margin-top: calc(-8 * var(--p)); } .v .v-ind-sous .v-sous { white-space: normal; font-size: max(var(--v-min-texte, 12px), calc(12 * var(--p))); } .v .v-parc { color: var(--v-ink-2); } /* Six chiffres et le calendrier, côte à côte. */ .v .v-ind { display: grid; grid-template-columns: minmax(0, 1fr) calc(392 * var(--p)); gap: calc(16 * var(--p)); align-items: start; } .v .v-kpis--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .v .v-kpis--6 .v-kpi { height: auto; min-height: calc(128 * var(--p)); padding: calc(14 * var(--p)) calc(16 * var(--p)); } .v .v-kpis--6 .v-kpi__val { margin: calc(8 * var(--p)) 0 calc(6 * var(--p)); font-size: max(var(--v-min-champ, 16px), calc(26 * var(--p))); } .v .v-kpi__l { display: flex; align-items: baseline; gap: calc(6 * var(--p)); margin-top: calc(3 * var(--p)); color: var(--v-ink-3); font-size: max(var(--v-min-texte, 12px), calc(12 * var(--p))); white-space: nowrap; } .v .v-kpi__l b { color: var(--v-ink-2); font-weight: 600; } .v .v-kpi__l .v-pct { margin-left: auto; } .v .v-kpi__l--budget, .v .v-kpi__l--budget b { color: var(--v-budget-texte); } .v .v-kpi__l.mut { color: var(--v-ink-3); } .v .v-kpi__l[hidden] { display: none; } /* Un écart au budget se lit en orange, quel que soit son sens (la maquette d'Adam). */ .v .v-pct--budget.up, .v .v-pct--budget.down, .v .v-pct--budget.neutre { background: var(--v-budget-bg); color: var(--v-budget-texte); } .v .v-kpi--fixe { cursor: default; } .v .v-cal { display: flex; flex-direction: column; padding-bottom: calc(14 * var(--p)); } .v .v-cal .v-carte__tete { padding-top: calc(14 * var(--p)); } .v .v-cal__sem, .v .v-calm__grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: calc(4 * var(--p)); padding: 0 calc(16 * var(--p)); } .v .v-cal__sem { margin-top: calc(10 * var(--p)); color: var(--v-ink-3); font-size: max(var(--v-min-texte, 12px), calc(12 * var(--p))); text-align: center; } .v .v-calm__nom { padding: calc(8 * var(--p)) calc(18 * var(--p)) calc(6 * var(--p)); font-size: max(var(--v-min-texte, 12px), calc(13 * var(--p))); font-weight: 600; } .v .v-jour { height: calc(30 * var(--p)); border-radius: calc(7 * var(--p)); color: var(--v-ink); font-size: max(var(--v-min-texte, 12px), calc(13 * var(--p))); text-align: center; transition: background-color .12s; } .v .v-jour:hover { background: var(--v-surface-2); } .v .v-jour.a-venir { color: var(--v-ink-2); } .v .v-jour.dans { background: var(--v-brand-soft); } .v .v-jour.auj { box-shadow: inset 0 0 0 calc(1.5 * var(--p)) var(--v-brand); font-weight: 600; } .v .v-jour[aria-pressed="true"] { background: var(--v-brand); color: var(--v-surface); font-weight: 600; } .v .v-cal__pied { display: flex; justify-content: flex-end; min-height: 0; padding: calc(6 * var(--p)) calc(16 * var(--p)) 0; } .v .v-cal__pied [hidden] { display: none; } .v .v-cajour { margin: calc(8 * var(--p)) calc(16 * var(--p)) 0; padding-top: calc(10 * var(--p)); border-top: calc(1 * var(--p)) solid var(--v-rule); } .v .v-cajour__l { max-height: calc(140 * var(--p)); margin-top: calc(6 * var(--p)); overflow-y: auto; list-style: none; } .v .v-cajour__l li { display: grid; grid-template-columns: minmax(0, 1fr) auto calc(48 * var(--p)); gap: calc(10 * var(--p)); padding: calc(4 * var(--p)) 0; border-bottom: calc(1 * var(--p)) solid var(--v-rule); font-size: max(var(--v-min-texte, 12px), calc(12 * var(--p))); } .v .v-cajour__l li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v .v-cajour__l li .mut { color: var(--v-ink-3); text-align: right; } .v .v-cajour .v-sous { margin-top: calc(6 * var(--p)); white-space: normal; font-size: max(var(--v-min-texte, 12px), calc(12 * var(--p))); } /* La légende « Budget » ne vaut que pour le CA. */ .v--accueil:not([data-ind="ca"]) .v-si-ca { display: none; } /* Le budget : une ligne « Budget — Modifier » (un
natif, aucun script), qui déplie les douze mois. */ .v .v-budget { flex: none; display: block; padding: 0; } .v .v-budget__ligne { display: flex; align-items: center; gap: calc(8 * var(--p)); min-height: calc(48 * var(--p)); padding: 0 calc(18 * var(--p)); border-radius: inherit; cursor: pointer; list-style: none; } .v .v-budget__ligne::-webkit-details-marker { display: none; } .v .v-budget__ligne:focus-visible { outline: calc(2 * var(--p)) solid var(--v-brand); outline-offset: calc(-2 * var(--p)); } .v .v-budget__tiret { color: var(--v-ink-3); } .v .v-budget__action { color: var(--v-brand); font-size: max(var(--v-min-texte, 12px), calc(14 * var(--p))); font-weight: 600; text-decoration: underline; text-underline-offset: calc(3 * var(--p)); } .v .v-budget__ligne:hover .v-budget__action { text-decoration-thickness: calc(2 * var(--p)); } .v .v-budget__ligne .droite { margin-left: auto; font-size: max(var(--v-min-texte, 12px), calc(13 * var(--p))); } .v .v-budget__ligne .droite b { margin-left: calc(4 * var(--p)); color: var(--v-budget-texte); font-size: max(var(--v-min-texte, 12px), calc(15 * var(--p))); } .v .v-budget__corps { padding: 0 0 calc(16 * var(--p)); border-top: calc(1 * var(--p)) solid var(--v-rule); } .v .v-budget__corps > .v-sous { padding: calc(12 * var(--p)) calc(18 * var(--p)) 0; white-space: normal; font-size: max(var(--v-min-texte, 12px), calc(12 * var(--p))); } .v .v-budget__champs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: calc(10 * var(--p)) calc(12 * var(--p)); padding: calc(12 * var(--p)) calc(18 * var(--p)) 0; } .v .v-bchamp { display: flex; flex-direction: column; gap: calc(4 * var(--p)); color: var(--v-ink-3); font-size: max(var(--v-min-texte, 12px), calc(12 * var(--p))); } .v .v-bchamp__z { display: flex; align-items: center; gap: calc(4 * var(--p)); color: var(--v-ink-2); font-size: max(var(--v-min-texte, 12px), calc(13 * var(--p))); } .v .v-bchamp input { width: 100%; min-width: 0; height: calc(32 * var(--p)); padding: 0 calc(8 * var(--p)); border: calc(1 * var(--p)) solid var(--v-rule-2); border-radius: calc(8 * var(--p)); background: var(--v-surface); color: var(--v-ink); font: inherit; font-size: max(var(--v-min-texte, 12px), calc(13 * var(--p))); font-variant-numeric: tabular-nums; } .v .v-bchamp input:focus-visible { outline: calc(2 * var(--p)) solid var(--v-budget); outline-offset: calc(1 * var(--p)); } .v .v-budget__pied { display: flex; align-items: center; gap: calc(12 * var(--p)); padding: calc(14 * var(--p)) calc(18 * var(--p)) 0; font-size: max(var(--v-min-texte, 12px), calc(13 * var(--p))); } .v .v-budget__pied .v-sous { white-space: normal; font-size: max(var(--v-min-texte, 12px), calc(12 * var(--p))); } /* ---------- Bureau compact ---------- */ .v--m .v-ind { grid-template-columns: minmax(0, 1fr) calc(340 * var(--p)); } .v--m .v-kpis--6 .v-kpi__val { font-size: max(var(--v-min-champ, 16px), calc(22 * var(--p))); } .v--m .v-budget__champs { gap: calc(8 * var(--p)); } .v--m .v-periodes > * { padding: calc(5 * var(--p)) calc(9 * var(--p)); } /* ---------- Téléphone ---------- */ .v--c .v-page--defile { overflow: visible; } .v--c .v-periodes { display: grid; grid-template-columns: 1fr 1fr; width: 100%; } .v--c .v-periodes > * { min-height: max(var(--v-min-cible, 44px), calc(44 * var(--p))); white-space: normal; text-align: center; } .v--c .v-ind { display: flex; flex-direction: column; align-items: stretch; } .v--c .v-kpis--6 { grid-template-columns: 1fr 1fr; } .v--c .v-kpis--6 .v-kpi { min-height: 0; padding: calc(12 * var(--p)); } .v--c .v-kpis--6 .v-kpi__val { font-size: max(var(--v-min-champ, 16px), calc(20 * var(--p))); } .v--c .v-kpi__l { flex-wrap: wrap; white-space: normal; } /* Sept jours par rangée, chacun d'au moins 44 px de large jusqu'à 360 px de fenêtre. */ .v--c .v-cal__sem, .v--c .v-calm__grille { gap: calc(2 * var(--p)); padding: 0 calc(6 * var(--p)); } .v--c .v-jour { height: max(var(--v-min-cible, 44px), calc(44 * var(--p))); font-size: max(var(--v-min-texte, 12px), calc(14 * var(--p))); } .v--c .v-nav-ic button { min-width: max(var(--v-min-cible, 44px), calc(44 * var(--p))); min-height: max(var(--v-min-cible, 44px), calc(44 * var(--p))); } .v--c .v-cal__pied .v-bouton-2 { min-height: max(var(--v-min-cible, 44px), calc(44 * var(--p))); } .v--c .v-budget__ligne { flex-wrap: wrap; row-gap: calc(2 * var(--p)); min-height: calc(56 * var(--p)); padding: calc(8 * var(--p)) calc(14 * var(--p)); } .v--c .v-budget__corps > .v-sous { padding: calc(12 * var(--p)) calc(14 * var(--p)) 0; } .v--c .v-budget__champs { grid-template-columns: 1fr 1fr; padding: calc(12 * var(--p)) calc(14 * var(--p)) 0; } .v--c .v-bchamp input { height: max(var(--v-min-cible, 44px), calc(44 * var(--p))); font-size: max(var(--v-min-champ, 16px), calc(16 * var(--p))); } .v--c .v-budget__pied { flex-direction: column; align-items: stretch; padding: calc(14 * var(--p)) calc(14 * var(--p)) 0; } .v--c .v-budget .v-bouton-2 { min-height: max(var(--v-min-cible, 44px), calc(44 * var(--p))); } /* ========================================================================== Écran Assistant IA (visite_assistant.py) : questions proposées (des boutons), réponses écrites d'avance. En px de la maquette : build.py les met à l'échelle. Les règles de base de l'écran (.v-asst, .v-fil, .v-conv, .v-preuve…) sont dans ecrans.css, section 4. ========================================================================== */ /* La provenance « Modélisé » (une estimation) : l'orange du budget, AA sur son fond. */ .v--assistant .v-tag.mod { background: var(--v-budget-bg); color: var(--v-budget-texte); } /* ---------- Bureau ---------- */ .v--assistant .v-fils { min-height: 0; } .v--assistant .as-qs { display: flex; flex-direction: column; gap: calc(4 * var(--p)); } .v--assistant .as-q { width: 100%; text-align: left; transition: background-color .12s; } .v--assistant button.as-q:hover { background: var(--v-surface-2); } .v--assistant button.as-q.actif:hover { background: var(--v-brand-soft); } .v--assistant .as-role { flex: none; margin-top: calc(-2 * var(--p)); color: var(--v-ink-2); font-size: max(var(--v-min-texte, 12px), calc(13 * var(--p))); } .v--assistant .as-fil { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; } .v--assistant .as-rep { display: flex; flex-direction: column; gap: calc(12 * var(--p)); } .v--assistant .as-rep[hidden] { display: none; } .v--assistant .v-a-txt { font-size: max(var(--v-min-texte, 12px), calc(14.5 * var(--p))); } .v--assistant .v-a-txt .v-pct { font-size: max(var(--v-min-texte, 12px), calc(12 * var(--p))); } .v--assistant .v-preuve > b { font-size: max(var(--v-min-champ, 16px), calc(18 * var(--p))); } .v--assistant .v-preuve > b.mot { font-size: max(var(--v-min-texte, 12px), calc(15 * var(--p))); line-height: 1.3; } .v--assistant .as-liens { display: flex; flex-wrap: wrap; gap: calc(8 * var(--p)); } .v--assistant a.as-lien:hover { background: var(--v-surface-2); } .v--assistant .v-reco-a a.as-lien:hover { background: var(--v-surface-2); } .v--assistant .as-bloc { display: flex; flex-direction: column; gap: calc(10 * var(--p)); padding: calc(12 * var(--p)) calc(14 * var(--p)); border: calc(1 * var(--p)) solid var(--v-rule); border-radius: calc(12 * var(--p)); background: var(--v-surface-2); } .v--assistant .as-prov { display: flex; flex-wrap: wrap; align-items: center; gap: calc(6 * var(--p)) calc(8 * var(--p)); color: var(--v-ink-2); font-size: max(var(--v-min-texte, 12px), calc(12.5 * var(--p))); } .v--assistant .as-prov .v-tag { min-width: 0; } .v--assistant .as-prov .v-tag + span + .v-tag { margin-left: calc(8 * var(--p)); } .v--assistant .as-evs { display: flex; flex-direction: column; gap: calc(8 * var(--p)); list-style: none; } .v--assistant .as-ev { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "type nom impact" ". s s"; align-items: center; gap: calc(2 * var(--p)) calc(10 * var(--p)); font-size: max(var(--v-min-texte, 12px), calc(13.5 * var(--p))); } .v--assistant .as-ev .v-type { grid-area: type; } .v--assistant .as-ev b { grid-area: nom; font-weight: 600; } .v--assistant .as-ev .s { grid-area: s; color: var(--v-ink-3); font-size: max(var(--v-min-texte, 12px), calc(12.5 * var(--p))); } .v--assistant .as-ev .as-imp { grid-area: impact; color: var(--v-ink-2); font-size: max(var(--v-min-texte, 12px), calc(12.5 * var(--p))); white-space: nowrap; } .v--assistant .as-nuits { display: flex; flex-direction: column; gap: calc(6 * var(--p)); } .v--assistant .as-nuits ul { display: flex; flex-wrap: wrap; gap: calc(6 * var(--p)) calc(22 * var(--p)); list-style: none; } .v--assistant .as-nuits li { display: flex; align-items: center; gap: calc(8 * var(--p)); font-size: max(var(--v-min-texte, 12px), calc(13.5 * var(--p))); } .v--assistant .as-nuits .v-eyebrow { white-space: normal; } /* Ce n'est pas un champ : une phrase, sans cadre ni allure de saisie. */ .v--assistant .v-note { margin-top: calc(-4 * var(--p)); } /* ---------- Bureau compact ---------- */ .v--m.v--assistant .v-preuve > b { font-size: max(var(--v-min-champ, 16px), calc(17 * var(--p))); } /* ---------- Téléphone, une colonne : la liste des questions, puis la réponse à la question choisie ; les quatre cartes de la réponse l'une sous l'autre. ---------- */ .v--c.v--assistant .as-titre { margin-top: calc(4 * var(--p)); } .v--c.v--assistant .as-qs { gap: 0; border-top: calc(1 * var(--p)) solid var(--v-rule); } .v--c.v--assistant .as-q { min-height: max(var(--v-min-cible, 44px), calc(44 * var(--p))); padding: calc(10 * var(--p)) calc(12 * var(--p)); border-bottom: calc(1 * var(--p)) solid var(--v-rule); border-radius: 0; } .v--c.v--assistant .as-q.actif { background: var(--v-brand-soft); } .v--c.v--assistant .as-q.actif b { color: var(--v-brand); } .v--c.v--assistant .as-fil { flex: none; overflow: visible; padding-top: calc(4 * var(--p)); } .v--c.v--assistant .v-a { gap: calc(10 * var(--p)); } .v--c.v--assistant .v-preuve > b { font-size: max(var(--v-min-champ, 16px), calc(16 * var(--p))); } .v--c.v--assistant .as-liens > * { flex: 1 1 auto; } .v--c.v--assistant a.as-lien { min-height: max(var(--v-min-cible, 44px), calc(44 * var(--p))); white-space: normal; text-align: center; } .v--c.v--assistant .as-ev { grid-template-columns: auto 1fr; grid-template-areas: "type impact" "nom nom" "s s"; } .v--c.v--assistant .as-ev .as-imp { justify-self: end; } .v--c.v--assistant .v-donnees { padding: calc(12 * var(--p)) 0 calc(2 * var(--p)); } .v--c.v--assistant .as-prov { display: grid; grid-template-columns: auto 1fr; gap: calc(6 * var(--p)) calc(10 * var(--p)); } .v--c.v--assistant .as-prov .v-tag { justify-self: start; } .v--c.v--assistant .as-prov .v-tag + span + .v-tag { margin-left: 0; } .v--c.v--assistant .v-p-tete { flex-wrap: wrap; gap: calc(4 * var(--p)) calc(8 * var(--p)); } .v--m.v--assistant .v-d-l span { white-space: nowrap; } .v--assistant [data-v-b] { white-space: nowrap; } /* ========================================================================== Veille › Concurrents : un écran RENDU, sans geste (ni survol, ni curseur, ni mouvement, ni conteneur qui défile). Un seul état : la nuit choisie par défaut. En px de dessin (build.py met à l'échelle : ni @media ni @container ici). ========================================================================== */ .v .v-lc__e { font-size: max(var(--v-min-texte, 12px), calc(12 * var(--p))); text-align: right; } .v .v-chips { display: flex; gap: calc(8 * var(--p)); } .v .v-carte--marche { flex: 1; display: flex; flex-direction: column; min-height: 0; } /* Sous la courbe, la provenance de chaque série : mesuré, calculé. */ .v .v-marche__src { flex: none; display: flex; flex-wrap: wrap; gap: calc(4 * var(--p)) calc(28 * var(--p)); padding: calc(4 * var(--p)) calc(18 * var(--p)) calc(12 * var(--p)); color: var(--v-ink-2); font-size: max(var(--v-min-texte, 12px), calc(12.5 * var(--p))); } .v .v-marche__src > span { display: flex; align-items: center; gap: calc(8 * var(--p)); } .v .v-veille-bas { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) calc(400 * var(--p)); gap: calc(16 * var(--p)); height: calc(296 * var(--p)); } .v .v-veille-bas > .v-carte { display: flex; flex-direction: column; min-width: 0; min-height: 0; } .v .v-lignes-c { padding: calc(12 * var(--p)) calc(18 * var(--p)) 0; } .v .v-lc { display: grid; grid-template-columns: calc(180 * var(--p)) minmax(0, 1fr) calc(70 * var(--p)) calc(70 * var(--p)); align-items: center; gap: calc(12 * var(--p)); height: calc(29 * var(--p)); font-size: max(var(--v-min-texte, 12px), calc(13 * var(--p))); white-space: nowrap; } .v .v-lc b { text-align: right; } .v .v-lc.vous { color: var(--v-brand); font-weight: 700; } .v .v-pos { display: block; width: 100%; height: auto; overflow: visible; } .v .v-repart { flex: none; display: block; width: calc(364 * var(--p)); height: calc(12 * var(--p)); margin: calc(14 * var(--p)) calc(18 * var(--p)) calc(10 * var(--p)); border-radius: calc(6 * var(--p)); } .v .v-leg-v { display: flex; flex-direction: column; gap: calc(9 * var(--p)); padding: calc(4 * var(--p)) calc(18 * var(--p)); } .v .v-leg-v div { display: flex; align-items: center; gap: calc(9 * var(--p)); color: var(--v-ink-2); font-size: max(var(--v-min-texte, 12px), calc(13 * var(--p))); } .v .v-leg-v div i { flex: none; width: calc(10 * var(--p)); height: calc(10 * var(--p)); border-radius: calc(3 * var(--p)); } .v .v-leg-v div b { margin-left: auto; color: var(--v-ink); white-space: nowrap; } .v .v-source { display: flex; align-items: flex-start; gap: calc(8 * var(--p)); margin-top: auto; padding: calc(10 * var(--p)) calc(18 * var(--p)) calc(14 * var(--p)); color: var(--v-ink-2); font-size: max(var(--v-min-texte, 12px), calc(12.5 * var(--p))); } /* Dans la carte de la nuit, deux provenances côte à côte : mesuré, calculé. */ .v .v-source--detail { flex-wrap: wrap; gap: calc(4 * var(--p)) calc(28 * var(--p)); } .v .v-source--detail > span { display: flex; align-items: center; gap: calc(8 * var(--p)); } /* Bureau compact */ .v--m .v-veille-bas { grid-template-columns: minmax(0, 1fr) calc(360 * var(--p)); } .v--m .v-repart { width: calc(324 * var(--p)); } .v--m .v-lc { grid-template-columns: calc(150 * var(--p)) minmax(0, 1fr) calc(64 * var(--p)) calc(64 * var(--p)); } /* Téléphone : la courbe des 60 nuits tient dans la carte (rien ne défile) ; l'écart de chaque concurrent à votre tarif cède la place (le tarif et sa position restent). */ .v--c .v-carte--marche { flex: none; } .v--c .v-marche__src { flex-direction: column; flex-wrap: nowrap; gap: calc(6 * var(--p)); padding: calc(2 * var(--p)) calc(14 * var(--p)) calc(14 * var(--p)); } .v--c .v-marche__src > span { align-items: flex-start; } .v--c .v-veille-bas { grid-template-columns: minmax(0, 1fr); gap: calc(12 * var(--p)); height: auto; } .v--c .v-chips { flex-wrap: wrap; } .v--c .v-lignes-c { padding: calc(10 * var(--p)) calc(14 * var(--p)) calc(12 * var(--p)); } .v--c .v-lc { grid-template-columns: calc(118 * var(--p)) minmax(0, 1fr) calc(52 * var(--p)); gap: calc(10 * var(--p)); } .v--c .v-repart { width: auto; margin: calc(14 * var(--p)) calc(14 * var(--p)) calc(10 * var(--p)); } .v--c .v-leg-v { padding: calc(4 * var(--p)) calc(14 * var(--p)) calc(10 * var(--p)); } .v--c .v-source { margin-top: 0; padding: calc(4 * var(--p)) calc(14 * var(--p)) calc(14 * var(--p)); } .v--c .v-source--detail { flex-direction: column; flex-wrap: nowrap; gap: calc(6 * var(--p)); } .v--c .v-source--detail > span { align-items: flex-start; } /* ========================================================================== Optimisation (clé « decisions ») — passe 3, demandes d'Adam du 03/10. La liste : Nuit · Vendues · Rythme · Pick-up · Événement · Médiane marché · Actuel · Recommandation, alignées d'une ligne à l'autre. Bureau compact : sans Rythme ni Événement (règle .v--m .sec d'ecrans.css : tous deux sont dans le dossier). ========================================================================== */ /* La période du pick-up : seule la valeur de la période choisie se montre. */ .v .v-page:not([data-pu="1"]) .v-pu1, .v .v-page:not([data-pu="3"]) .v-pu3, .v .v-page:not([data-pu="7"]) .v-pu7 { display: none; } .v .v-pu { font-weight: 600; } .v .v-pu-choix { display: flex; align-items: center; gap: calc(10 * var(--p)); } /* tableau */ .v .v-liste td { height: calc(46 * var(--p)); } .v .v-liste th.num-r, .v .v-liste td.num-r { text-align: right; } .v .v-liste tr td.reco-c, .v .v-liste tr th.reco-c { min-width: calc(190 * var(--p)); padding-left: calc(18 * var(--p)); text-align: left; } .v .v-liste td.pu-c, .v .v-liste th.pu-c { text-align: right; } /* Huit colonnes dans la carte de 818 px : l'en-tête de la médiane passe sur deux lignes. */ .v .v-liste th.med-c { white-space: normal; } .v .v-reco-c { display: inline-flex; align-items: center; gap: calc(7 * var(--p)); } .v .v-reco-c b { font-weight: 700; } .v .v-vend--p { gap: calc(8 * var(--p)); } .v .v-vend--p svg { display: block; width: calc(32 * var(--p)); height: calc(4 * var(--p)); } /* l'événement du jour, en petit */ .v .v-evs { display: flex; align-items: center; gap: calc(6 * var(--p)); min-width: 0; color: var(--v-ink-2); font-size: max(var(--v-min-texte, 12px), calc(12 * var(--p))); font-weight: 500; } .v .v-liste td.evc .v-evs { width: calc(160 * var(--p)); } .v .v-evn { display: flex; align-items: center; gap: calc(6 * var(--p)); min-width: 0; } .v .v-evn ~ .v-evn { display: none; } .v .v-evn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v .v-evd { flex: none; display: block; width: calc(7 * var(--p)); height: calc(7 * var(--p)); border-radius: 50%; } .v .v-evd.c-salon { background: var(--v-cat-salon); } .v .v-evd.c-congres { background: var(--v-cat-congres); } .v .v-evd.c-concert { background: var(--v-cat-concert); } .v .v-evd.c-sport { background: var(--v-cat-sport); } .v .v-evd.c-vacances { background: var(--v-cat-vacances); } .v .v-evd.c-interne { background: var(--v-cat-interne); } .v .v-evplus { flex: none; } /* d'où viennent les chiffres de la liste */ .v .v-liste__pied { flex: none; padding: calc(7 * var(--p)) calc(18 * var(--p)) calc(9 * var(--p)); border-top: calc(1 * var(--p)) solid var(--v-rule); color: var(--v-ink-3); font-size: max(var(--v-min-texte, 12px), calc(12 * var(--p))); line-height: 1.35; } /* le dossier : « Actuel » et « Recommandation », puis le tarif de référence */ .v .v-reco__vals { display: grid; grid-template-columns: auto auto; align-items: end; gap: 0 calc(24 * var(--p)); } .v .v-reco__ref { grid-column: 1 / -1; margin-top: calc(3 * var(--p)); color: var(--v-ink-3); font-size: max(var(--v-min-texte, 12px), calc(12 * var(--p))); white-space: nowrap; } .v .v-reco { min-height: 0; padding: calc(10 * var(--p)) calc(14 * var(--p)); } .v .v-dos { gap: calc(9 * var(--p)); } .v .v-raisons { gap: calc(5 * var(--p)); } .v .v-r--ev { align-items: flex-start; } /* Site v7 : la source d'une raison, en petit, après ce qu'elle dit (plus d'étiquette). */ .v .v-r__src { color: var(--v-ink-3); font-size: max(var(--v-min-texte, 12px), calc(12 * var(--p))); font-weight: 400; } .v .v-r__ev { display: flex; align-items: flex-start; gap: calc(8 * var(--p)); min-width: 0; } .v .v-r__ev > b { padding-top: calc(1 * var(--p)); white-space: nowrap; } .v .v-r__chips { display: flex; flex-wrap: wrap; gap: calc(4 * var(--p)) calc(6 * var(--p)); } .v .v-r__chips .v-type { padding: calc(1 * var(--p)) calc(8 * var(--p)); } /* bureau compact */ .v--m .v-vend--p svg { display: none; } .v--m .v-liste tr td.reco-c, .v--m .v-liste tr th.reco-c { min-width: calc(176 * var(--p)); } .v--m .v-reco__ref { white-space: normal; } /* téléphone : une carte par nuit, ses chiffres alignés d'une carte à l'autre */ .v--c .v-pu-choix .v-seg { flex: 1; } .v--c .v-liste__pied { padding: calc(10 * var(--p)) calc(14 * var(--p)) calc(12 * var(--p)); } .v--c .vm-nuit__l .v-evs { justify-content: flex-end; } /* Au téléphone, le nom d'un événement n'est jamais tronqué : il passe à la ligne. */ .v--c .vm-nuit__l .v-evn > span { overflow: visible; text-overflow: clip; white-space: normal; text-align: right; } .v--c .vm-nuit__g { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: calc(8 * var(--p)) calc(10 * var(--p)); } .v--c .vm-c { display: flex; flex-direction: column; gap: calc(1 * var(--p)); min-width: 0; font-size: max(var(--v-min-texte, 12px), calc(13.5 * var(--p))); } .v--c .vm-c > .mut { font-size: max(var(--v-min-texte, 12px), calc(12 * var(--p))); } .v--c .vm-c > span:last-child { font-weight: 600; } .v--c .vm-c--r { grid-column: span 2; } .v--c .v-reco__vals { grid-template-columns: auto 1fr; } .v--c .v-reco__ref { white-space: normal; } .v--c .v-r__ev { flex-wrap: wrap; } .v--c .v-liste__pied .p-ry { display: none; } /* le plan « dossier » (écran-image, 506 px de haut) : la ligne des événements y tient */ .v .v-dos--large .v-dos__col { gap: calc(10 * var(--p)); } .v .v-dos--large .v-raisons { gap: calc(6 * var(--p)); margin-top: 0; } .v--c .v-dos--large .v-dos__col { gap: calc(12 * var(--p)); } /* ========================================================================== Veille › Événements (clé « demande ») : le calendrier des 90 nuits, la carte d'une nuit (survol, foyer, toucher), la liste des événements et le formulaire « Ajouter un événement interne ». En px de la maquette (build.py met à l'échelle). ========================================================================== */ /* Le corps de l'écran défile dans la fenêtre de l'app (810 px), jamais la page. Une marge rendue par le rembourrage : le contour du foyer n'est pas rogné. */ .v .v-ev-corps { flex: 1; display: flex; flex-direction: column; gap: calc(16 * var(--p)); min-height: 0; margin: 0 calc(-6 * var(--p)) calc(-18 * var(--p)); padding: calc(2 * var(--p)) calc(6 * var(--p)) calc(18 * var(--p)); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } /* --- Le calendrier --- */ .v .v-cal { flex: none; position: relative; padding-bottom: calc(14 * var(--p)); } .v .v-cal__tete { flex-wrap: wrap; row-gap: calc(8 * var(--p)); } .v .v-cal .v-leg { flex-wrap: wrap; justify-content: flex-end; gap: calc(6 * var(--p)) calc(14 * var(--p)); } .v .v-leg i.v-cal__leg { width: calc(14 * var(--p)); height: calc(5 * var(--p)); border-radius: calc(3 * var(--p)); vertical-align: calc(2 * var(--p)); background-color: currentColor; } .v .v-cal__grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(24 * var(--p)); padding: calc(14 * var(--p)) calc(18 * var(--p)) 0; } .v .v-cal__mois > .v-h3 { margin-bottom: calc(8 * var(--p)); font-size: max(var(--v-min-texte, 12px), calc(14 * var(--p))); } .v .v-cal__sem, .v .v-cal__cases { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: calc(4 * var(--p)); } .v .v-cal__sem { margin-bottom: calc(4 * var(--p)); } /* Les initiales des jours sont à l'aplomb des cases (l'Accueil a un calendrier du même nom de classe, dont la rangée est en retrait : pas ici). */ .v .v-cal__mois .v-cal__sem { padding: 0; } .v .v-cal__sem span { color: var(--v-ink-3); font-size: max(var(--v-min-texte, 12px), calc(12 * var(--p))); font-weight: 600; text-align: center; } .v .v-cal__j { position: relative; display: block; height: calc(40 * var(--p)); padding: calc(5 * var(--p)) calc(6 * var(--p)); border-radius: calc(7 * var(--p)); background: var(--v-surface-2); box-shadow: inset 0 0 0 calc(1 * var(--p)) var(--v-rule); color: var(--v-ink); text-align: left; } /* Le numéro en haut de la case, bouton ou non (un bouton centre son contenu) : les couloirs des événements passent dessous. */ .v .v-cal__j .j { position: absolute; top: calc(5 * var(--p)); left: calc(6 * var(--p)); display: block; font-size: max(var(--v-min-texte, 12px), calc(12 * var(--p))); font-weight: 600; line-height: 1; } .v button.v-cal__j:hover, .v .v-cal__j.vu { background: var(--v-brand-soft); box-shadow: inset 0 0 0 calc(1 * var(--p)) var(--v-brand-mid); } .v .v-cal__j.auj { box-shadow: inset 0 0 0 calc(2 * var(--p)) var(--v-ink); } /* Passée, ou au-delà de l'horizon : un jour du calendrier, sans rien à lire ni à viser. */ .v .v-cal__j.passe, .v .v-cal__j.hors { background: none; box-shadow: none; color: var(--v-ink-3); } .v .v-cal__j.hors { box-shadow: inset 0 0 0 calc(1 * var(--p)) var(--v-rule); } .v .v-cal__j .pt { position: absolute; top: calc(5 * var(--p)); right: calc(5 * var(--p)); width: calc(8 * var(--p)); height: calc(8 * var(--p)); border-radius: 50%; box-shadow: 0 0 0 calc(2 * var(--p)) var(--v-surface); } /* Une barre par événement, à la hauteur de son couloir : de la première à la dernière nuit, d'une case à l'autre sans rupture. */ .v .v-cal__evs i { position: absolute; left: calc(-2 * var(--p)); right: calc(-2 * var(--p)); bottom: calc(4 * var(--p)); height: calc(3 * var(--p)); background-color: currentColor; transition: opacity .12s; } .v .v-cal__evs i.deb { left: calc(5 * var(--p)); border-top-left-radius: calc(2 * var(--p)); border-bottom-left-radius: calc(2 * var(--p)); } .v .v-cal__evs i.fin { right: calc(5 * var(--p)); border-top-right-radius: calc(2 * var(--p)); border-bottom-right-radius: calc(2 * var(--p)); } /* Quatre couloirs sous le numéro, à toutes les hauteurs de case (38 à 44 px). */ .v .v-cal__evs i.l1 { bottom: calc(9 * var(--p)); } .v .v-cal__evs i.l2 { bottom: calc(14 * var(--p)); } .v .v-cal__evs i.l3 { bottom: calc(19 * var(--p)); } /* Un événement visé ou épinglé : ses nuits ressortent, les barres des autres s'effacent. */ .v .v-cal.ev-actif .v-cal__evs i:not(.ev-vu) { opacity: .22; } .v .v-cal__j.ev-vu { background: var(--v-sel); box-shadow: inset 0 0 0 calc(1 * var(--p)) var(--v-brand-mid); } .v .v-cal__note { padding: calc(12 * var(--p)) calc(18 * var(--p)) 0; color: var(--v-ink-3); font-size: max(var(--v-min-texte, 12px), calc(12 * var(--p))); } /* --- La carte d'une nuit : sa forme visible (la case dit tout au lecteur d'écran) --- */ .v .v-cal__tip { position: absolute; top: 0; left: 0; z-index: 6; width: calc(312 * var(--p)); padding: calc(12 * var(--p)) calc(14 * var(--p)) calc(8 * var(--p)); box-shadow: var(--v-ombre-bulle); } .v .v-cal__tip[hidden] { display: none; } .v .v-cal__tip-evs { display: flex; flex-direction: column; gap: calc(6 * var(--p)); margin: calc(4 * var(--p)) 0 calc(8 * var(--p)); list-style: none; } .v .v-cal__tip-evs[hidden] { display: none; } .v .v-cal__tip-evs li { display: flex; align-items: center; gap: calc(8 * var(--p)); font-size: max(var(--v-min-texte, 12px), calc(13 * var(--p))); font-weight: 600; } .v .v-cal__tip-evs li .v-type { flex: none; } .v .v-cal__tip-evs li[hidden] { display: none; } .v .v-cal__l { display: flex; justify-content: space-between; align-items: center; gap: calc(10 * var(--p)); padding: calc(7 * var(--p)) 0; border-top: calc(1 * var(--p)) solid var(--v-rule); color: var(--v-ink-2); font-size: max(var(--v-min-texte, 12px), calc(13 * var(--p))); } .v .v-cal__l > span { display: flex; flex-direction: column; gap: calc(3 * var(--p)); min-width: 0; } .v .v-cal__l small { display: flex; align-items: center; flex-wrap: wrap; gap: calc(3 * var(--p)) calc(6 * var(--p)); color: var(--v-ink-3); font-size: max(var(--v-min-texte, 12px), calc(12 * var(--p))); } .v .v-cal__l .v-tag { min-width: 0; } .v .v-cal__l b { flex: none; color: var(--v-ink); font-size: max(var(--v-min-texte, 12px), calc(15 * var(--p))); font-weight: 700; white-space: nowrap; } /* --- En bas : la liste des événements, le formulaire --- */ .v .v-ev-bas { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) calc(360 * var(--p)); gap: calc(16 * var(--p)); align-items: start; } .v .v-carte--ev .v-carte__tete { padding-bottom: calc(6 * var(--p)); } .v table.ev td:nth-child(2), .v table.ev td:nth-child(3) { white-space: normal; } .v table.ev tr.vise td { background: var(--v-surface-2); } /* Le nom d'un événement est la cible qui l'épingle : un nom saisi court (« Un ») la laisserait sous 24 px de large. */ .v table.ev button.v-nuit { min-width: calc(24 * var(--p)); text-align: left; } .v .v-ajoute { display: block; color: var(--v-ink-3); font-size: max(var(--v-min-texte, 12px), calc(12 * var(--p))); font-weight: 500; } .v .v-ajout { display: flex; flex-direction: column; gap: calc(12 * var(--p)); padding: calc(16 * var(--p)) calc(18 * var(--p)) calc(18 * var(--p)); } .v .v-ajout__tete { display: flex; flex-direction: column; gap: calc(4 * var(--p)); } .v .v-ajout__sous { color: var(--v-ink-3); font-size: max(var(--v-min-texte, 12px), calc(12.5 * var(--p))); } .v .v-ajout__champ { display: flex; flex-direction: column; gap: calc(5 * var(--p)); min-width: 0; } .v .v-ajout__lib { color: var(--v-ink-2); font-size: max(var(--v-min-texte, 12px), calc(13 * var(--p))); font-weight: 600; } .v .v-ajout__aide { color: var(--v-ink-3); font-size: max(var(--v-min-texte, 12px), calc(12 * var(--p))); } .v .v-ajout input { width: 100%; min-width: 0; height: calc(38 * var(--p)); padding: 0 calc(10 * var(--p)); border: calc(1 * var(--p)) solid var(--v-rule-2); border-radius: var(--v-rayon-controle); background: var(--v-surface); color: var(--v-ink); font: inherit; font-size: max(var(--v-min-texte, 12px), calc(14 * var(--p))); } .v .v-ajout input:hover { border-color: var(--v-ink-3); } .v .v-ajout input:focus-visible { outline: calc(2 * var(--p)) solid var(--v-brand); outline-offset: calc(1 * var(--p)); } .v .v-ajout input[aria-invalid="true"] { border-color: var(--v-down); box-shadow: inset 0 0 0 calc(1 * var(--p)) var(--v-down); } .v .v-ajout__err { color: var(--v-down); font-size: max(var(--v-min-texte, 12px), calc(12.5 * var(--p))); font-weight: 500; } .v .v-ajout__err:empty { display: none; } .v .v-ajout__dates { display: grid; grid-template-columns: 1fr 1fr; gap: calc(10 * var(--p)); } .v .v-ajout .v-bouton { align-self: flex-start; } .v .v-ajout__ok { padding: calc(10 * var(--p)) calc(12 * var(--p)); border-radius: calc(10 * var(--p)); background: var(--v-up-bg); color: var(--v-up); font-size: max(var(--v-min-texte, 12px), calc(13 * var(--p))); } .v .v-ajout__ok[hidden] { display: none; } .v .v-ajout__note { color: var(--v-ink-2); font-size: max(var(--v-min-texte, 12px), calc(12.5 * var(--p))); font-weight: 600; } /* --- Bureau compact (1 200 px) : quatre mois, cases plus étroites ; la liste perd le lieu et l'affluence (.sec), le formulaire se resserre. --- */ .v--m .v-cal__grille { gap: calc(16 * var(--p)); padding: calc(14 * var(--p)) calc(16 * var(--p)) 0; } .v--m .v-cal__j { height: calc(38 * var(--p)); padding: calc(4 * var(--p)) calc(5 * var(--p)); } .v--m .v-cal__j .j { top: calc(4 * var(--p)); left: calc(5 * var(--p)); } .v--m .v-ev-bas { grid-template-columns: minmax(0, 1fr) calc(330 * var(--p)); } /* --- Téléphone (390 px) : une colonne ; la page porte le défilement. --- */ .v--c .v-ev-corps { gap: calc(12 * var(--p)); margin: 0; padding: 0; overflow: visible; } .v--c .v-cal__tete { flex-direction: column; align-items: flex-start; padding: calc(14 * var(--p)) calc(14 * var(--p)) 0; } .v--c .v-cal__tete .droite { margin-left: 0; } .v--c .v-cal .v-leg { justify-content: flex-start; white-space: normal; } /* Sept cases par rangée, chacune d'au moins 44 px de large jusqu'à 360 px de fenêtre : le calendrier va presque d'un bord à l'autre de sa carte, ses cases se touchent à 2 px. */ .v--c .v-cal__grille { grid-template-columns: 1fr; gap: calc(18 * var(--p)); padding: calc(12 * var(--p)) calc(6 * var(--p)) 0; } .v--c .v-cal__mois > .v-h3 { padding-left: calc(8 * var(--p)); } .v--c .v-cal__mois .v-cal__sem, .v--c .v-cal__cases { gap: calc(2 * var(--p)); } .v--c .v-cal__evs i { left: calc(-1 * var(--p)); right: calc(-1 * var(--p)); } .v--c .v-cal__j { height: max(var(--v-min-cible, 44px), calc(44 * var(--p))); } .v--c .v-cal__note { padding: calc(12 * var(--p)) calc(14 * var(--p)) 0; } .v--c .v-cal__tip { width: calc(300 * var(--p)); } .v--c .v-ev-bas { grid-template-columns: 1fr; gap: calc(12 * var(--p)); } .v--c .vm-evs .v-carte__tete { padding: calc(14 * var(--p)) calc(14 * var(--p)) calc(8 * var(--p)); border-bottom: calc(1 * var(--p)) solid var(--v-rule); } .v--c .vm-ev.vise { background: var(--v-surface-2); } .v--c .v-ajout { padding: calc(14 * var(--p)); } .v--c .v-ajout__dates { grid-template-columns: 1fr; } .v--c .v-ajout input { height: max(var(--v-min-cible, 44px), calc(44 * var(--p))); font-size: max(var(--v-min-champ, 16px), calc(16 * var(--p))); } .v--c .v-ajout .v-bouton { align-self: stretch; } /* ========================================================================== Grille : un écran RENDU, sans geste (ni survol, ni curseur, ni mouvement). Un seul état : l'occupation, nuit par nuit, d'octobre à décembre. En px de dessin (build.py met à l'échelle : ni @media ni @container ici). ========================================================================== */ .v .v-entete--grille .droite { display: flex; align-items: center; gap: calc(22 * var(--p)); } .v .v-echelle { display: flex; align-items: center; gap: calc(8 * var(--p)); order: -1; color: var(--v-ink-2); font-size: max(var(--v-min-texte, 12px), calc(12 * var(--p))); white-space: nowrap; } /* L'échelle : les teintes mêmes des cases, côte à côte (aucun dégradé). */ .v .v-echelle__t { display: flex; } .v .v-echelle i { display: block; width: calc(8 * var(--p)); height: calc(10 * var(--p)); background-color: var(--oc); } .v .v-echelle i:first-child { border-radius: calc(5 * var(--p)) 0 0 calc(5 * var(--p)); } .v .v-echelle i:last-child { border-radius: 0 calc(5 * var(--p)) calc(5 * var(--p)) 0; } .v .v-leg i.hach-r { background: repeating-linear-gradient(135deg, var(--v-realise-1) 0 calc(2 * var(--p)), var(--v-realise-2) calc(2 * var(--p)) calc(5 * var(--p))); } .v .v-leg i.auj { width: calc(8 * var(--p)); height: calc(8 * var(--p)); margin: 0 calc(9 * var(--p)) 0 calc(3 * var(--p)); border-radius: calc(2 * var(--p)); background: var(--v-surface); box-shadow: 0 0 0 calc(1 * var(--p)) var(--v-surface), 0 0 0 calc(3 * var(--p)) var(--v-ink); vertical-align: 0; } .v .v-mois-ligne { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(16 * var(--p)); min-height: 0; } .v .v-moisg { display: flex; flex-direction: column; min-height: 0; padding: calc(16 * var(--p)) calc(18 * var(--p)) calc(18 * var(--p)); } .v .v-moisg__tete { flex: none; display: flex; align-items: baseline; justify-content: space-between; margin-bottom: calc(12 * var(--p)); } .v .v-sem, .v .v-cases { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: calc(6 * var(--p)); } .v .v-sem { flex: none; margin-bottom: calc(6 * var(--p)); } .v .v-sem span { color: var(--v-ink-3); font-size: max(var(--v-min-texte, 12px), calc(12 * var(--p))); font-weight: 600; text-align: center; } /* Six semaines au plus : les trois mois ont des cases de même hauteur, et remplissent la hauteur de l'écran. */ .v .v-cases { flex: 1; grid-template-rows: repeat(6, minmax(0, 1fr)); min-height: 0; } .v .v-case { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; padding: calc(7 * var(--p)) calc(8 * var(--p)); border-radius: calc(9 * var(--p)); background-color: var(--oc); color: var(--oct); } .v .v-case .jn { font-size: max(var(--v-min-texte, 12px), calc(12 * var(--p))); font-weight: 500; } .v .v-case b { align-self: flex-end; font-size: max(var(--v-min-champ, 16px), calc(18 * var(--p))); font-weight: 700; line-height: 1; } .v .v-case.passe { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.34) 0 calc(3 * var(--p)), transparent calc(3 * var(--p)) calc(8 * var(--p))); } /* Sur une nuit réalisée, le texte repose sur la teinte pleine, pas sur les hachures. */ .v .v-case.passe b, .v .v-case.passe .jn { margin: calc(-1 * var(--p)) calc(-3 * var(--p)); padding: calc(1 * var(--p)) calc(3 * var(--p)); border-radius: calc(4 * var(--p)); background-color: var(--oc); } .v .v-case.passe .jn { align-self: flex-start; } .v .v-case.auj { box-shadow: 0 0 0 calc(2 * var(--p)) var(--v-surface), 0 0 0 calc(4 * var(--p)) var(--v-ink); } .v .v-case .pt { position: absolute; top: calc(8 * var(--p)); right: calc(8 * var(--p)); width: calc(10 * var(--p)); height: calc(10 * var(--p)); border-radius: 50%; box-shadow: 0 0 0 calc(2 * var(--p)) var(--v-surface); } /* Bureau compact : la légende passe à la ligne plutôt que de sortir de l'écran. */ .v--m .v-entete--grille .droite { flex-wrap: wrap; justify-content: flex-end; gap: calc(6 * var(--p)) calc(18 * var(--p)); } .v--m .v-case { padding: calc(7 * var(--p)) calc(6 * var(--p)); } /* Téléphone : un mois par carte, des cases de hauteur fixe. */ .v--c .v-entete--grille .droite { flex-wrap: wrap; gap: calc(8 * var(--p)) calc(14 * var(--p)); margin-left: 0; } .v--c .v-echelle { order: 0; } .v--c .v-echelle i { width: calc(6 * var(--p)); } .v--c .v-mois-ligne { grid-template-columns: minmax(0, 1fr); gap: calc(12 * var(--p)); } .v--c .v-moisg { padding: calc(14 * var(--p)); } .v--c .v-sem, .v--c .v-cases { gap: calc(4 * var(--p)); } .v--c .v-cases { grid-template-rows: none; grid-auto-rows: calc(48 * var(--p)); } .v--c .v-case { padding: calc(5 * var(--p)) calc(6 * var(--p)); border-radius: calc(7 * var(--p)); } .v--c .v-case b { font-size: max(var(--v-min-texte, 12px), calc(15 * var(--p))); } .v--c .v-case .pt { top: calc(5 * var(--p)); right: calc(5 * var(--p)); width: calc(8 * var(--p)); height: calc(8 * var(--p)); } /* La provenance de l'écran, sous son en-tête : une ligne aux bureaux, les cases des mois prennent la hauteur qui reste. */ .v .v-source.v-source--page { flex: none; margin: calc(-6 * var(--p)) 0 0; padding: 0; } .v--c .v-source.v-source--page { margin: calc(-2 * var(--p)) 0 0; padding: 0; } /* ========================================================================== Rythme : un écran RENDU, sans geste (ni survol, ni curseur, ni mouvement). Un seul mois : ses réservations à date, sa montée en charge, dix de ses nuits. En px de dessin (build.py met à l'échelle : ni @media ni @container ici). ========================================================================== */ .v .v-rythme-corps { flex: 1; display: flex; flex-direction: column; gap: calc(16 * var(--p)); min-height: 0; } .v .v-stats4 { flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(16 * var(--p)); } .v .v-stat { padding: calc(14 * var(--p)) calc(18 * var(--p)); } .v .v-stat > span { display: flex; align-items: center; gap: calc(8 * var(--p)); color: var(--v-ink-2); font-size: max(var(--v-min-texte, 12px), calc(12.5 * var(--p))); } .v .v-stat > span i { flex: none; display: inline-block; width: calc(10 * var(--p)); height: calc(3 * var(--p)); border-radius: calc(2 * var(--p)); } .v .v-stat > span i.tirets { width: calc(12 * var(--p)); height: 0; border-top: calc(2 * var(--p)) dashed var(--v-brand); border-radius: 0; background: none; } .v .v-stat__v { display: flex; align-items: baseline; gap: calc(10 * var(--p)); margin-top: calc(6 * var(--p)); } .v .v-stat b { font-size: max(var(--v-min-champ, 16px), calc(26 * var(--p))); font-weight: 700; letter-spacing: -.01em; white-space: nowrap; } .v .v-stat small { color: var(--v-ink-3); font-size: max(var(--v-min-texte, 12px), calc(12 * var(--p))); white-space: nowrap; } .v .v-trois { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) calc(460 * var(--p)); gap: calc(16 * var(--p)); min-height: 0; } .v .v-trois > .v-carte { display: flex; flex-direction: column; min-width: 0; min-height: 0; } .v .v-carte--nuits .v-carte__tete { padding-bottom: calc(8 * var(--p)); } .v table.compact td { height: calc(43 * var(--p)); } .v .prix b { font-weight: 700; } /* Bureau compact : cinq colonnes dans une carte de 400 px ; les cellules se resserrent plutôt que de rogner la dernière. */ .v--m .v-trois { grid-template-columns: minmax(0, 1fr) calc(400 * var(--p)); } /* Le détail d'un chiffre passe sous lui quand il ne tient pas à côté. */ .v--m .v-stat__v { flex-wrap: wrap; gap: 0 calc(10 * var(--p)); } .v--m .v-carte--nuits th, .v--m .v-carte--nuits td { padding-left: calc(6 * var(--p)); padding-right: calc(6 * var(--p)); } /* Téléphone : deux chiffres par ligne, puis la courbe, puis les nuits. */ .v--c .v-stats4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(10 * var(--p)); } .v--c .v-stat { padding: calc(12 * var(--p)) calc(14 * var(--p)); } .v--c .v-stat > span { align-items: flex-start; } .v--c .v-stat > span i { margin-top: calc(7 * var(--p)); } .v--c .v-stat__v { flex-wrap: wrap; gap: calc(2 * var(--p)) calc(8 * var(--p)); } .v--c .v-stat b { font-size: max(var(--v-min-champ, 16px), calc(22 * var(--p))); } .v--c .v-stat small { white-space: normal; } .v--c .v-trois { grid-template-columns: minmax(0, 1fr); gap: calc(12 * var(--p)); } /* Aux bureaux, les dix lignes et leur provenance tiennent dans la carte (l'écran a une hauteur fixe) : des lignes de 39 px. Au téléphone, la carte prend sa hauteur. */ .v--l .v-carte--nuits table.compact td, .v--m .v-carte--nuits table.compact td { height: calc(39 * var(--p)); } .v .v-carte--nuits .v-source { padding-top: calc(8 * var(--p)); } /* Échelle d'occupation : générée par visite.css_echelle (STOPS de la maquette). */ .v .oc-0 { --oc: rgb(255,244,214); --oct: var(--v-ink); } .v .oc-1 { --oc: rgb(255,244,214); --oct: var(--v-ink); } .v .oc-2 { --oc: rgb(255,244,214); --oct: var(--v-ink); } .v .oc-3 { --oc: rgb(255,244,214); --oct: var(--v-ink); } .v .oc-4 { --oc: rgb(255,244,214); --oct: var(--v-ink); } .v .oc-5 { --oc: rgb(255,244,214); --oct: var(--v-ink); } .v .oc-6 { --oc: rgb(255,244,214); --oct: var(--v-ink); } .v .oc-7 { --oc: rgb(255,244,214); --oct: var(--v-ink); } .v .oc-8 { --oc: rgb(255,244,214); --oct: var(--v-ink); } .v .oc-9 { --oc: rgb(255,244,214); --oct: var(--v-ink); } .v .oc-10 { --oc: rgb(255,244,214); --oct: var(--v-ink); } .v .oc-11 { --oc: rgb(255,244,214); --oct: var(--v-ink); } .v .oc-12 { --oc: rgb(255,244,214); --oct: var(--v-ink); } .v .oc-13 { --oc: rgb(255,244,214); --oct: var(--v-ink); } .v .oc-14 { --oc: rgb(255,244,214); --oct: var(--v-ink); } .v .oc-15 { --oc: rgb(252,244,213); --oct: var(--v-ink); } .v .oc-16 { --oc: rgb(247,244,210); --oct: var(--v-ink); } .v .oc-17 { --oc: rgb(243,243,208); --oct: var(--v-ink); } .v .oc-18 { --oc: rgb(238,243,206); --oct: var(--v-ink); } .v .oc-19 { --oc: rgb(233,243,204); --oct: var(--v-ink); } .v .oc-20 { --oc: rgb(229,242,202); --oct: var(--v-ink); } .v .oc-21 { --oc: rgb(224,242,199); --oct: var(--v-ink); } .v .oc-22 { --oc: rgb(217,241,198); --oct: var(--v-ink); } .v .oc-23 { --oc: rgb(207,238,196); --oct: var(--v-ink); } .v .oc-24 { --oc: rgb(198,235,195); --oct: var(--v-ink); } .v .oc-25 { --oc: rgb(188,231,194); --oct: var(--v-ink); } .v .oc-26 { --oc: rgb(178,228,193); --oct: var(--v-ink); } .v .oc-27 { --oc: rgb(167,224,192); --oct: var(--v-ink); } .v .oc-28 { --oc: rgb(154,220,192); --oct: var(--v-ink); } .v .oc-29 { --oc: rgb(142,215,191); --oct: var(--v-ink); } .v .oc-30 { --oc: rgb(130,211,191); --oct: var(--v-ink); } .v .oc-31 { --oc: rgb(117,206,191); --oct: var(--v-ink); } .v .oc-32 { --oc: rgb(106,199,193); --oct: var(--v-ink); } .v .oc-33 { --oc: rgb(96,192,195); --oct: var(--v-ink); } .v .oc-34 { --oc: rgb(85,184,197); --oct: var(--v-ink); } .v .oc-35 { --oc: rgb(74,177,199); --oct: var(--v-ink); } .v .oc-36 { --oc: rgb(63,169,201); --oct: var(--v-ink); } .v .oc-37 { --oc: rgb(64,159,205); --oct: var(--v-ink); } .v .oc-38 { --oc: rgb(66,148,209); --oct: var(--v-ink); } .v .oc-39 { --oc: rgb(67,138,214); --oct: var(--v-ink); } .v .oc-40 { --oc: rgb(69,127,218); --oct: var(--v-ink); } .v .oc-41 { --oc: rgb(70,116,221); --oct: #000; } .v .oc-42 { --oc: rgb(67,101,219); --oct: #fff; } .v .oc-43 { --oc: rgb(65,86,217); --oct: #fff; } .v .oc-44 { --oc: rgb(63,72,215); --oct: #fff; } .v .oc-45 { --oc: rgb(60,57,213); --oct: #fff; } .v .oc-46 { --oc: rgb(56,45,202); --oct: #fff; } .v .oc-47 { --oc: rgb(49,39,178); --oct: #fff; } .v .oc-48 { --oc: rgb(42,33,153); --oct: #fff; } /* Place réservée aux écrans chargés à l'approche : générée par build.py. */ .ecran__attente[data-r="nuit"] { --r-l: 1440 / 506; --r-m: 1200 / 506; } html[lang="en"] .ecran__attente[data-r="accueil"] { --r-c: 780 / 5904; } html[lang="fr"] .ecran__attente[data-r="accueil"] { --r-c: 780 / 5938; } html[lang="en"] .ecran__attente[data-r="assistant"] { --r-c: 780 / 3272; } html[lang="fr"] .ecran__attente[data-r="assistant"] { --r-c: 780 / 3302; } html[lang="en"] .ecran__attente[data-r="concurrents"] { --r-c: 780 / 2502; } html[lang="fr"] .ecran__attente[data-r="concurrents"] { --r-c: 780 / 2532; } html[lang="en"] .ecran__attente[data-r="decisions"] { --r-c: 780 / 4798; } html[lang="fr"] .ecran__attente[data-r="decisions"] { --r-c: 780 / 4784; } html[lang="en"] .ecran__attente[data-r="demande"] { --r-c: 780 / 5520; } html[lang="fr"] .ecran__attente[data-r="demande"] { --r-c: 780 / 5544; } html[lang="en"] .ecran__attente[data-r="grille"] { --r-c: 780 / 2916; } html[lang="fr"] .ecran__attente[data-r="grille"] { --r-c: 780 / 2916; } html[lang="en"] .ecran__attente[data-r="nuit"] { --r-c: 780 / 1990; } html[lang="fr"] .ecran__attente[data-r="nuit"] { --r-c: 780 / 1976; } html[lang="en"] .ecran__attente[data-r="rythme"] { --r-c: 780 / 2884; } html[lang="fr"] .ecran__attente[data-r="rythme"] { --r-c: 780 / 2846; } [data-v-nu] .ecran__attente { --r-l: 1440 / 754; --r-m: 1200 / 754; } html[lang="en"] [data-v-nu] .ecran__attente[data-r="accueil"] { --r-c: 780 / 5592; } html[lang="fr"] [data-v-nu] .ecran__attente[data-r="accueil"] { --r-c: 780 / 5626; } html[lang="en"] [data-v-nu] .ecran__attente[data-r="assistant"] { --r-c: 780 / 2960; } html[lang="fr"] [data-v-nu] .ecran__attente[data-r="assistant"] { --r-c: 780 / 2990; } html[lang="en"] [data-v-nu] .ecran__attente[data-r="concurrents"] { --r-c: 780 / 2190; } html[lang="fr"] [data-v-nu] .ecran__attente[data-r="concurrents"] { --r-c: 780 / 2220; } html[lang="en"] [data-v-nu] .ecran__attente[data-r="decisions"] { --r-c: 780 / 4486; } html[lang="fr"] [data-v-nu] .ecran__attente[data-r="decisions"] { --r-c: 780 / 4472; } html[lang="en"] [data-v-nu] .ecran__attente[data-r="demande"] { --r-c: 780 / 5208; } html[lang="fr"] [data-v-nu] .ecran__attente[data-r="demande"] { --r-c: 780 / 5232; } html[lang="en"] [data-v-nu] .ecran__attente[data-r="grille"] { --r-c: 780 / 2604; } html[lang="fr"] [data-v-nu] .ecran__attente[data-r="grille"] { --r-c: 780 / 2604; } html[lang="en"] [data-v-nu] .ecran__attente[data-r="rythme"] { --r-c: 780 / 2572; } html[lang="fr"] [data-v-nu] .ecran__attente[data-r="rythme"] { --r-c: 780 / 2534; }