/* ==========================================================
R-ACE GP, DESIGN SYSTEM
----------------------------------------------------------
Architecture : sidebar gauche fixe + topbar allégée + main.
Fond commun : silhouette du Circuit Vendéen (mask CSS).
Theming : dark / light via [data-theme] sur .
Sommaire :
1. Reset
2. Tokens globaux
3. Thèmes (variables couleurs)
4. Structure (app-shell, sidebar, topbar)
5. Décor de fond (circuit Vendéen)
6. Composants partagés (boutons, badges, avatars)
7. Dashboard + 4 widgets (Timetable, Crew, Places, Documents)
8. Pages dédiées (squelette commun)
9. Page Login
10. Animations
11. Responsive
========================================================== */
/* ==========================================================
1. RESET MINIMAL
========================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
img,
svg {
display: block;
max-width: 100%;
}
button {
font: inherit;
color: inherit;
background: none;
border: none;
cursor: pointer;
padding: 0;
}
input,
textarea,
select {
font: inherit;
color: inherit;
}
a {
color: inherit;
text-decoration: none;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
/* Force l'attribut HTML hidden à toujours masquer l'élément, même
quand un sélecteur plus spécifique impose display: grid / flex.
Évite les bugs du genre ".form-grid" qui restait visible quand
l'élément avait hidden=true. */
[hidden] {
display: none !important;
}
/* Polices : déclarées dans charte.css (Saira, Outfit, JetBrains Mono) */
/* ==========================================================
2. TOKENS GLOBAUX
========================================================== */
/* ==========================================================
2. PONT VERS LA CHARTE
Toutes les anciennes variables de l'intranet renvoient aux
variables --rg-* de charte.css, chargé avant ce fichier.
Changer la DA = changer charte.css, jamais ici.
========================================================== */
:root, .rg-sur-marine, .rg-sur-rose, .rg-clair, .rg-sombre {
/* Marque */
--brand-navy: var(--rg-marine-5);
--brand-pink: var(--rg-rose-5);
--brand-white: var(--rg-neutre-blanc);
/* Polices */
--font-display: var(--rg-police-titre);
--font-base: var(--rg-police-texte);
--font-mono: var(--rg-police-chiffre);
--titre-largeur: var(--rg-titre-largeur);
/* Rôles de texte */
--t-hero-s: var(--rg-taille-display-m); --t-hero-w: var(--rg-graisse-noir);
--t-section-s: var(--rg-taille-h3); --t-section-w: var(--rg-graisse-extra);
--t-chrome-s: var(--rg-taille-h3); --t-chrome-w: var(--rg-graisse-extra);
--t-carte-s: var(--rg-taille-texte-m); --t-carte-w: var(--rg-graisse-extra);
--x-intro-s: var(--rg-taille-texte-l); --x-intro-w: var(--rg-graisse-regulier);
--x-corps-s: var(--rg-taille-texte-m); --x-corps-w: var(--rg-graisse-regulier);
--x-libelle-s: var(--rg-taille-texte-m); --x-libelle-w: var(--rg-graisse-semi);
--x-second-s: var(--rg-taille-texte-s); --x-second-w: var(--rg-graisse-regulier);
--x-micro-s: var(--rg-taille-label-s); --x-micro-w: var(--rg-graisse-regulier);
--d-forte-s: var(--rg-taille-h2); --d-forte-w: var(--rg-graisse-gras);
--d-code-w: var(--rg-graisse-semi);
/* Tailles */
--fs-3xs: var(--rg-taille-label-s);
--fs-2xs: var(--rg-taille-label-m);
--fs-xs: var(--rg-taille-texte-s);
--fs-sm: var(--rg-taille-texte-s);
--fs-md: var(--rg-taille-texte-m);
--fs-lg: var(--rg-taille-texte-l);
--fs-xl: var(--rg-taille-h3);
--fs-2xl: var(--rg-taille-h2);
--fs-3xl: var(--rg-taille-h1);
--fs-4xl: var(--rg-taille-display-m);
/* Rayons : la marque ne s'arrondit pas */
--r-xs: var(--rg-rayon-0);
--r-sm: var(--rg-rayon-0);
--r-md: var(--rg-rayon-0);
--r-lg: var(--rg-rayon-0);
--r-xl: var(--rg-rayon-0);
--r-2xl: var(--rg-rayon-0);
--r-pill: var(--rg-rayon-0);
/* Espaces */
--gap-2xs: var(--rg-espace-2);
--gap-xs: var(--rg-espace-3);
--gap-sm: var(--rg-espace-4);
--gap: var(--rg-espace-5);
--gap-md: var(--rg-espace-6);
--gap-lg: var(--rg-espace-7);
--gap-xl: var(--rg-espace-8);
/* Mouvement */
--t-fast: var(--rg-duree);
--t-base: calc(var(--rg-duree) * 1.5);
--t-slow: calc(var(--rg-duree) * 2.4);
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
/* Gabarit */
--sidebar-w: var(--rg-menu-largeur);
--topbar-h: var(--rg-topbar-hauteur);
/* Accent */
--accent: var(--rg-accent-defaut);
--accent-strong: var(--rg-accent-survol);
--accent-glow: var(--rg-accent-doux);
--accent-soft: var(--rg-accent-doux);
/* Fonds, surfaces, traits, textes : suivent clair / sombre dans charte.css */
--bg: var(--rg-fond-page);
--bg-2: var(--rg-fond-surface);
--bg-3: var(--rg-fond-surface-2);
--surface: var(--rg-fond-surface);
--surface-2: var(--rg-fond-page);
--surface-3: var(--rg-fond-surface-2);
--plein: var(--rg-fond-surface);
--plein-2: var(--rg-fond-page);
--plein-3: var(--rg-fond-surface);
--border: var(--rg-bord-defaut);
--border-2: var(--rg-bord-fort);
--border-focus: var(--rg-accent-defaut);
--text: var(--rg-texte-principal);
--text-soft: var(--rg-texte-secondaire);
--text-muted: var(--rg-texte-secondaire);
--text-faint: var(--rg-texte-desactive);
/* Ni ombre, ni halo, ni décor de fond (charte · À éviter) */
--shadow-sm: none;
--shadow: none;
--shadow-lg: none;
--circuit-color: transparent;
--glow-bg: none;
}
:root, :root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
/* ==========================================================
4. STRUCTURE GLOBALE
========================================================== */
body {
min-height: 100vh;
font-family: var(--font-base);
font-size: var(--x-corps-s);
font-weight: var(--x-corps-w);
line-height: var(--rg-interligne-texte);
color: var(--text);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition:
background var(--t-slow) var(--ease),
color var(--t-slow) var(--ease);
}
/* Tous les titres dans la famille display */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display); font-style: var(--rg-titre-style);
font-weight: var(--rg-graisse-gras);
font-stretch: var(--titre-largeur);
letter-spacing: var(--rg-display-l-espacement);
font-variant-numeric: tabular-nums;
}
/* ==========================================================
5. DÉCOR DE FOND (CIRCUIT VENDÉEN)
----------------------------------------------------------
- .app-bg : conteneur fixed plein écran derrière tout
- ::before : tracé du circuit (mask sur SVG)
- ::after : halos rose + bleu pour la profondeur
========================================================== */
.app-bg {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
/* Tracé du circuit en arrière-plan.
----------------------------------
On utilise background-image (et non mask-image) pour rester
compatible avec l'ouverture en file:// où certains navigateurs
bloquent mask-image pour cause de cross-origin.
Le SVG fourni est rempli en #F9F7F8 (quasi-blanc). En light mode
on l'inverse via filter: invert(1) pour avoir un tracé sombre
lisible sur fond clair. L'opacité contrôle la subtilité.
*/
.app-bg::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: min(720px, 78vw);
height: min(720px, 78vw);
transform: translate(-50%, -50%) rotate(-6deg);
background-image: url("assets/svg/circuit-fontenay.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.06;
transition:
opacity var(--t-slow) var(--ease),
filter var(--t-slow) var(--ease);
}
/* En light mode, on inverse pour passer d'un tracé clair à un
tracé sombre (lisible sur fond clair) et on remonte un peu l'opacité. */
:root[data-theme="light"] .app-bg::before {
filter: invert(1);
opacity: 0.08;
}
.app-bg::after {
content: "";
position: absolute;
inset: 0;
background: var(--glow-bg);
transition: background var(--t-slow) var(--ease);
}
/* ==========================================================
6. APP-SHELL : SIDEBAR + MAIN
----------------------------------------------------------
Layout 2 colonnes : sidebar 240px à gauche, main flex à droite.
Tout passe au-dessus du décor de fond (z-index: 1).
========================================================== */
.app-shell {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: var(--sidebar-w) 1fr;
min-height: 100vh;
}
/* ==========================================================
6.1 SIDEBAR
----------------------------------------------------------
Sidebar fixe : logo en haut + nav au milieu + footer en bas.
========================================================== */
.sidebar {
position: sticky;
top: 0;
height: 100vh;
display: flex;
flex-direction: column;
padding: var(--rg-espace-5) var(--rg-espace-3);
gap: var(--rg-espace-5);
border-right: 0;
background: var(--rg-fond-structure);
color: var(--rg-texte-principal);
}
.sidebar__brand {
display: flex;
align-items: center;
gap: var(--gap-xs);
/* 10 px, comme le retrait intérieur des onglets : le logo
tombe donc pile sur la colonne des icônes. Avant, il partait
à 8, un troisième bord gauche pour rien. */
padding: 0 var(--rg-espace-3);
}
.sidebar__brand img {
width: var(--rg-menu-logo);
max-width: 100%;
height: auto;
}
/* Nav principale de la sidebar */
.sidebar__nav {
display: flex;
flex-direction: column;
gap: calc(var(--rg-espace-1) / 2);
}
.sidebar__section {
font: var(--rg-label-s);
letter-spacing: var(--rg-label-s-espacement);
text-transform: uppercase;
color: var(--rg-texte-secondaire);
padding: 0 var(--rg-espace-3) var(--rg-espace-2) var(--rg-espace-5);
margin-top: var(--rg-espace-4);
}
.sidebar__section:first-child {
margin-top: 0;
}
.nav-item {
position: relative;
display: flex;
align-items: center;
gap: var(--rg-espace-3);
min-height: var(--rg-menu-item-hauteur);
padding: 0 var(--rg-espace-3) 0 var(--rg-espace-5);
border-radius: var(--rg-rayon-0);
font: var(--rg-texte-m);
color: var(--rg-texte-secondaire);
transition: color var(--rg-duree), background var(--rg-duree);
}
@media (hover: hover) { .nav-item:hover {
color: var(--rg-texte-principal);
background: var(--rg-fond-marine);
} }
/* L'ITEM ACTIF, refait le 2026-10-19.
Ce qu'il y avait avant, et pourquoi ça n'allait pas :
une pilule BLANCHE PLEINE **et** une barre d'accent posée à
8 px à gauche, flottant contre le bord de la sidebar sans
toucher ni border quoi que ce soit.
Deux défauts, pas un :
- DEUX SIGNAUX DISAIENT LA MÊME CHOSE. La pilule et la barre
annonçaient toutes les deux la page courante. En garder
deux faisait de l'item actif un bloc bien plus lourd que
ses voisins, qui n'ont aucun contenant du tout.
- LA BARRE NE SE RATTACHAIT À RIEN. Détachée de sa pilule,
elle se lisait comme un artefact plutôt que comme un
repère.
Un seul signal maintenant : un fond teinté d'accent, le
texte et l'icône en accent (les SVG sont en `currentColor`,
ils suivent sans qu'on y touche). L'écart avec un item au
repos reste net, sans poser une carte blanche sur la
colonne. */
.nav-item.is-active {
font: var(--rg-texte-m-fort);
color: var(--rg-texte-principal);
background: none;
}
.nav-item.is-active .nav-item__icon { color: var(--rg-accent-defaut); }
.nav-item.is-active::before {
--h: var(--rg-espace-5);
content: "";
position: absolute;
left: 0;
top: calc(50% - var(--h) / 2);
height: var(--h);
width: calc(var(--h) * var(--rg-pente) + var(--rg-trait-repere));
background: var(--rg-accent-defaut);
clip-path: polygon(calc(100% - var(--rg-trait-repere)) 0, 100% 0, var(--rg-trait-repere) 100%, 0 100%);
}
.nav-item__icon {
width: var(--rg-icone-20);
height: var(--rg-icone-20);
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.nav-item__icon svg {
width: 100%;
height: 100%;
}
.nav-item__badge {
--h: var(--rg-badge-hauteur);
position: relative;
isolation: isolate;
margin-left: auto;
display: inline-flex;
align-items: center;
justify-content: center;
height: var(--h);
min-width: calc(var(--h) * var(--rg-pente) + var(--rg-badge-chiffre));
padding: 0 calc(var(--h) * var(--rg-pente) / 2 + var(--rg-espace-1));
border-radius: var(--rg-rayon-0);
background: none;
font: var(--rg-label-m);
letter-spacing: 0;
font-variant-numeric: tabular-nums;
color: var(--rg-neutre-blanc);
}
.nav-item__badge::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--rg-accent-defaut);
clip-path: polygon(calc(var(--h) * var(--rg-pente)) 0, 100% 0, calc(100% - var(--h) * var(--rg-pente)) 100%, 0 100%);
}
/* Si le badge a l'attribut hidden, on le masque vraiment (l'élément
est fils direct d'un flex container, donc display:none nécessaire). */
.nav-item__badge[hidden] {
display: none !important;
}
/* Widget profil en bas de la sidebar */
.profile-widget {
position: relative;
margin-top: auto;
display: flex;
align-items: center;
gap: var(--rg-espace-3);
padding: var(--rg-espace-2) var(--rg-espace-3);
border-radius: var(--r-xs);
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
cursor: pointer;
transition:
background var(--t-base) var(--ease),
border-color var(--t-base) var(--ease),
transform var(--t-base) var(--ease);
}
@media (hover: hover) { .profile-widget:hover {
background: var(--surface-2);
border-color: var(--border-2);
} }
.profile-widget__photo {
width: 36px;
height: 36px;
border-radius: var(--rg-rayon-0);
background-color: var(--surface-2);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--rg-taille-label-m);
font-weight: var(--rg-graisse-gras);
color: var(--brand-white);
overflow: hidden; /* pour cropper l'![]()
interne */
letter-spacing: 0;
flex-shrink: 0;
}
.profile-widget__photo--pink {
background: var(--accent);
box-shadow: none;
}
.profile-widget__photo--navy {
background: var(--brand-navy);
}
.profile-widget__photo--mix {
background: var(--brand-navy);
}
:root[data-theme="light"] .profile-widget__photo--navy {
background: var(--brand-navy);
}
.profile-widget__info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--rg-trait-1);
}
.profile-widget__name {
font-size: var(--fs-sm);
font-weight: var(--rg-graisse-semi);
color: var(--text);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: var(--rg-display-l-espacement);
}
.profile-widget__role {
font-size: var(--fs-2xs);
color: var(--text-muted);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.profile-widget__chevron {
color: var(--text-muted);
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform var(--t-base) var(--ease);
}
.profile-widget__chevron svg {
width: 14px;
height: 14px;
}
@media (hover: hover) { .profile-widget:hover .profile-widget__chevron {
transform: translateX(2px);
color: var(--accent);
} }
/* En mode sidebar compacte (≤980px), le widget profil ne montre que la photo */
@media (max-width: 980px) {
.profile-widget {
justify-content: center;
padding: var(--rg-espace-2);
}
.profile-widget__info,
.profile-widget__chevron {
display: none;
}
}
/* ==========================================================
6.2 TOPBAR
----------------------------------------------------------
Topbar dans la colonne main, sticky en haut.
Contient : titre de la page (gauche) + theme toggle + avatar.
========================================================== */
.main-col {
display: flex;
flex-direction: column;
min-width: 0;
}
.topbar {
position: sticky;
top: 0;
z-index: 50;
display: flex;
align-items: center;
gap: var(--gap);
height: var(--topbar-h);
padding: 0 var(--gap-lg);
background: var(--bg);
border-bottom: var(--rg-trait-1) solid var(--border);
}
/* Bouton hamburger : masqué par défaut (desktop), apparaît en mobile */
.topbar__hamburger {
display: none;
width: 38px;
height: 38px;
border-radius: var(--r-pill);
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
color: var(--text-soft);
align-items: center;
justify-content: center;
flex-shrink: 0;
transition:
background var(--t-base) var(--ease),
color var(--t-base) var(--ease);
}
@media (hover: hover) { .topbar__hamburger:hover {
background: var(--surface-2);
color: var(--text);
} }
.topbar__hamburger svg {
width: 18px;
height: 18px;
}
.topbar__title {
display: flex;
flex-direction: column;
gap: calc(var(--rg-espace-1) / 2);
min-width: 0;
flex: 1;
}
.topbar__crumb {
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--text-muted);
}
.topbar__heading {
font-size: var(--fs-lg);
font-weight: var(--rg-graisse-semi);
color: var(--text);
margin: 0;
letter-spacing: var(--rg-display-l-espacement);
}
.topbar__sub {
margin: 0;
max-width: 680px;
font-size: var(--fs-2xs);
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.topbar__tools {
display: flex;
align-items: center;
gap: var(--gap-xs);
flex-shrink: 0;
}
/* THEME TOGGLE (réutilisé partout) */
.theme-toggle {
width: 40px;
height: 40px;
border-radius: var(--r-pill);
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
color: var(--text-soft);
display: inline-flex;
align-items: center;
justify-content: center;
transition:
background var(--t-base) var(--ease),
color var(--t-base) var(--ease),
border-color var(--t-base) var(--ease),
transform var(--t-base) var(--ease-spring);
}
@media (hover: hover) { .theme-toggle:hover {
background: var(--surface-2);
color: var(--text);
transform: rotate(20deg);
} }
.theme-toggle svg {
width: 18px;
height: 18px;
}
/* L'icone annonce ou l'on va, pas ou l'on est : en theme sombre on propose
le jour, en theme clair on propose la nuit. */
.theme-toggle .icon-sun { display: block; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }
/* AVATAR */
.topbar__avatar {
width: 40px;
height: 40px;
border-radius: var(--r-pill);
background: var(--accent);
color: var(--brand-white);
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-semi);
letter-spacing: 0;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: none;
transition: transform var(--t-base) var(--ease-spring);
}
@media (hover: hover) { .topbar__avatar:hover {
transform: scale(1.06);
} }
/* ==========================================================
7. CONTENU MAIN
----------------------------------------------------------
Conteneur scrollable de la page, sous la topbar.
========================================================== */
.page-body {
flex: 1;
width: 100%;
max-width: 1320px;
margin: 0 auto;
padding: var(--gap-lg) var(--gap-lg) var(--gap-xl);
}
/* L'ANNUAIRE EST LA PAGE LA PLUS LARGE, sa demande du
2026-09-07 : « l'organigramme est un peu contraint, fais-le
prendre plus de largeur ». 1320 px suffisaient à trois colonnes
de cartes ; un organigramme, lui, se lit d'autant mieux qu'il
étale ses branches côte à côte plutôt qu'en pile. */
body[data-page="crew"] .page-body { max-width: 1720px; }
/* ==========================================================
7.1 HERO (dashboard), Magazine-style 2 colonnes
----------------------------------------------------------
Colonne gauche : intro textuelle + pill "live"
Colonne droite : "featured next race" card avec cover photo
========================================================== */
.hero {
display: grid;
grid-template-columns: 1fr 1.25fr;
gap: var(--gap);
margin-bottom: var(--gap-lg);
padding-top: var(--gap-sm);
align-items: stretch;
min-height: 260px;
}
.hero__left {
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--rg-espace-3);
}
.hero__eyebrow {
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-semi);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--accent);
margin: 0;
}
.hero__title {
font-size: var(--fs-3xl);
font-weight: var(--rg-graisse-semi);
letter-spacing: var(--rg-chiffre-xl-espacement);
line-height: var(--rg-interligne-plein);
color: var(--text);
margin: 0;
}
.hero__sub {
font-size: var(--fs-md);
color: var(--text-soft);
margin: var(--rg-espace-1) 0 0;
max-width: 580px;
}
.hero__pill {
display: inline-flex;
align-items: center;
gap: var(--gap-xs);
padding: var(--rg-espace-3) var(--rg-espace-4);
border-radius: var(--r-pill);
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
font-size: var(--fs-xs);
color: var(--text-soft);
align-self: flex-start;
margin-top: var(--rg-espace-2);
}
.hero__pill-dot {
width: 8px;
height: 8px;
border-radius: var(--rg-rayon-0);
background: var(--accent);
box-shadow: none;
animation: pulse calc(var(--rg-duree) * 16.0) var(--ease) infinite;
}
/* =========================================================
HERO FEATURED NEXT RACE
---------------------------------------------------------
Carte hero à droite : cover image plein cadre, overlay
sombre en bas pour lisibilité, contenu align-end.
========================================================= */
.hero__featured {
position: relative;
border-radius: var(--r-xl);
overflow: hidden;
border: var(--rg-trait-1) solid var(--border);
background-color: var(--bg-3);
display: flex;
flex-direction: column;
justify-content: flex-end;
text-decoration: none;
color: var(--brand-white);
box-shadow: none;
transition:
transform var(--t-base) var(--ease),
box-shadow var(--t-slow) var(--ease),
border-color var(--t-base) var(--ease);
}
@media (hover: hover) { .hero__featured:hover {
transform: translateY(-2px);
box-shadow: none;
border-color: var(--accent);
} }
.hero__featured-cover {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
}
.hero__featured-cover--fallback {
background: var(--brand-navy);
}
.hero__featured-cover--fallback::after {
content: attr(data-cc);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: var(--rg-taille-display-l);
font-weight: var(--rg-graisse-extra);
letter-spacing: 0;
color: color-mix(in srgb, var(--rg-neutre-blanc) 10%, transparent);
pointer-events: none;
}
.hero__featured-overlay {
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--rg-marine-5) 60%, transparent);
}
.hero__featured-content {
position: relative;
z-index: 1;
padding: var(--gap-md) var(--gap-lg) var(--gap-lg);
display: flex;
flex-direction: column;
gap: var(--rg-espace-1);
}
.hero__featured-tag {
align-self: flex-start;
display: inline-flex;
align-items: center;
padding: var(--rg-espace-1) var(--rg-espace-3);
border-radius: var(--r-pill);
background: var(--accent);
color: var(--brand-white);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
margin-bottom: var(--gap-2xs);
box-shadow: none;
}
.hero__featured-title {
font-size: var(--fs-2xl);
font-weight: var(--rg-graisse-gras);
color: var(--brand-white);
margin: 0;
letter-spacing: var(--rg-chiffre-xl-espacement);
line-height: var(--rg-interligne-titre);
}
.hero__featured-meta {
font-size: var(--fs-sm);
color: color-mix(in srgb, var(--rg-neutre-blanc) 85%, transparent);
margin: 0;
display: flex;
align-items: center;
gap: var(--rg-espace-2);
flex-wrap: wrap;
}
.hero__featured-meta-dot {
width: 3px;
height: 3px;
border-radius: var(--rg-rayon-0);
background: color-mix(in srgb, var(--rg-neutre-blanc) 45%, transparent);
}
.hero__featured-countdown {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
padding: var(--rg-espace-2) var(--rg-espace-4);
border-radius: var(--r-pill);
background: color-mix(in srgb, var(--rg-marine-8) 32%, transparent);
border: var(--rg-trait-1) solid color-mix(in srgb, var(--rg-neutre-blanc) 18%, transparent);
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-semi);
color: var(--brand-white);
margin-top: var(--rg-espace-3);
letter-spacing: 0;
}
.hero__featured-countdown::before {
content: "";
width: 6px;
height: 6px;
border-radius: var(--rg-rayon-0);
background: var(--accent);
box-shadow: none;
animation: pulse calc(var(--rg-duree) * 16.0) var(--ease) infinite;
}
/* Empty state si pas de course à venir */
.hero__featured--empty {
background: var(--surface);
color: var(--text-soft);
border-style: dashed;
}
.hero__featured--empty .hero__featured-content {
padding: var(--gap-lg);
align-items: center;
justify-content: center;
height: 100%;
text-align: center;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.45; transform: scale(0.85); }
}
@keyframes sidebarOverlayIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* ==========================================================
7.2 GRILLE DASHBOARD + WIDGET BASE
----------------------------------------------------------
Grille 2×2 équilibrée : chaque widget = 1 cell.
Le hero du dessus contient le featured "next race".
========================================================== */
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--gap);
}
.widget {
position: relative;
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--r-xl);
padding: var(--gap-md);
display: flex;
flex-direction: column;
gap: var(--gap);
box-shadow: none;
opacity: 0;
transform: translateY(20px);
animation: widgetIn calc(var(--rg-duree) * 4.0) var(--ease-out) forwards;
transition:
transform var(--t-slow) var(--ease-out),
border-color var(--t-base) var(--ease),
box-shadow var(--t-slow) var(--ease);
}
@media (hover: hover) { .widget:hover {
border-color: var(--border-2);
transform: translateY(-4px);
box-shadow: none;
} }
.widget:nth-child(1) { animation-delay: 80ms; }
.widget:nth-child(2) { animation-delay: 160ms; }
.widget:nth-child(3) { animation-delay: 240ms; }
.widget:nth-child(4) { animation-delay: 320ms; }
@keyframes widgetIn {
to {
opacity: 1;
transform: translateY(0);
}
}
.widget__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--gap);
}
.widget__head-left {
display: flex;
align-items: center;
gap: var(--gap-sm);
min-width: 0;
}
.widget__icon {
width: 38px;
height: 38px;
border-radius: var(--r-md);
background: var(--accent-soft);
color: var(--accent);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.widget__icon svg {
width: 18px;
height: 18px;
}
.widget__title {
font-size: var(--fs-lg);
font-weight: var(--rg-graisse-semi);
letter-spacing: var(--rg-display-l-espacement);
color: var(--text);
margin: 0;
}
.widget__subtitle {
font-size: var(--fs-xs);
color: var(--text-muted);
margin: calc(var(--rg-espace-1) / 2) 0 0;
}
.widget__action {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
padding: var(--rg-espace-2) var(--rg-espace-3);
border-radius: var(--r-pill);
background: var(--surface-2);
border: var(--rg-trait-1) solid var(--border);
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-moyen);
color: var(--text-soft);
white-space: nowrap;
transition:
background var(--t-base) var(--ease),
color var(--t-base) var(--ease),
transform var(--t-base) var(--ease);
}
@media (hover: hover) { .widget__action:hover {
background: var(--accent);
color: var(--brand-white);
border-color: var(--accent);
transform: translateY(-1px);
} }
.widget__action svg {
width: 12px;
height: 12px;
}
.widget__action--cta {
background: var(--accent);
color: var(--brand-white);
border-color: var(--accent);
box-shadow: none;
}
@media (hover: hover) { .widget__action--cta:hover {
background: var(--accent-strong);
transform: translateY(-2px);
} }
.widget__body {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--gap);
}
/* ==========================================================
7.3 WIDGET TIMETABLE
========================================================== */
.widget--timetable {
grid-column: span 1;
grid-row: span 1;
min-height: 360px;
}
.race-feature {
position: relative;
display: grid;
grid-template-columns: auto 1fr;
gap: var(--gap);
padding: var(--gap);
border-radius: var(--r-lg);
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
overflow: hidden;
}
.race-feature::before {
content: "";
position: absolute;
top: -60px;
right: -80px;
width: 280px;
height: 280px;
border-radius: var(--rg-rayon-0);
background: none;
opacity: 0.85;
pointer-events: none;
}
.race-feature > * {
position: relative;
z-index: 1;
}
.race-feature__date {
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: var(--rg-interligne-display);
padding-right: var(--gap);
border-right: var(--rg-trait-1) solid var(--border);
}
.race-feature__day {
font-size: var(--fs-2xl);
font-weight: var(--rg-graisse-gras);
color: var(--text);
letter-spacing: var(--rg-chiffre-xl-espacement);
}
.race-feature__num {
font-size: var(--rg-taille-display-m);
font-weight: var(--rg-graisse-regulier);
color: var(--text-muted);
letter-spacing: var(--rg-chiffre-xl-espacement);
line-height: var(--rg-interligne-plein);
}
.race-feature__num sup {
font-size: var(--rg-taille-h3);
font-weight: var(--rg-graisse-regulier);
vertical-align: super;
}
.race-feature__info {
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--rg-espace-1);
min-width: 0;
}
.race-feature__series {
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-semi);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--accent);
margin: 0;
}
.race-feature__location {
font-size: var(--fs-xl);
font-weight: var(--rg-graisse-semi);
color: var(--text);
margin: 0;
letter-spacing: var(--rg-display-l-espacement);
}
.race-feature__meta {
font-size: var(--fs-xs);
color: var(--text-soft);
margin: 0;
}
.race-feature__progress {
grid-column: 1 / -1;
margin-top: var(--rg-espace-1);
}
.progress {
display: flex;
align-items: center;
gap: var(--gap-sm);
}
.progress__bar {
flex: 1;
height: 6px;
background: var(--surface-3);
border-radius: var(--r-pill);
overflow: hidden;
}
.progress__fill {
height: 100%;
background: var(--accent);
border-radius: var(--r-pill);
transform-origin: left;
animation: progressFill calc(var(--rg-duree) * 8.0) var(--ease-out) calc(var(--rg-duree) * 4.0) both;
}
@keyframes progressFill {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
.progress__label {
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-semi);
color: var(--text-soft);
white-space: nowrap;
}
.agenda {
display: flex;
flex-direction: column;
}
.agenda__item {
display: flex;
align-items: center;
gap: var(--gap-sm);
padding: var(--rg-espace-3) var(--rg-espace-2);
margin: 0 calc(var(--rg-espace-2) * -1);
border-bottom: var(--rg-trait-1) solid var(--border);
border-radius: var(--r-sm);
transition: background var(--t-base) var(--ease);
}
.agenda__item:last-child {
border-bottom: none;
}
@media (hover: hover) { .agenda__item:hover {
background: var(--surface-2);
} }
.agenda__time {
flex-shrink: 0;
min-width: 56px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 var(--rg-espace-3);
border-radius: var(--r-xs);
background: var(--surface-3);
color: var(--text);
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-semi);
letter-spacing: 0;
}
.agenda__title {
flex: 1;
min-width: 0;
font-size: var(--fs-sm);
font-weight: var(--rg-graisse-moyen);
color: var(--text);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.agenda__meta {
flex-shrink: 0;
font-size: var(--fs-2xs);
color: var(--text-muted);
}
.agenda__item--due .agenda__time {
background: var(--accent);
color: var(--brand-white);
font-weight: var(--rg-graisse-gras);
box-shadow: none;
}
.agenda__item--due .agenda__meta {
color: var(--accent);
font-weight: var(--rg-graisse-semi);
}
/* ==========================================================
7.4 WIDGET CREW (ex-Staff)
========================================================== */
.widget--crew {
grid-column: span 1;
grid-row: span 1;
min-height: 360px;
}
.crew-list {
display: flex;
flex-direction: column;
gap: var(--gap-xs);
}
.crew-item {
display: flex;
align-items: center;
gap: var(--gap-sm);
padding: var(--rg-espace-2);
margin: 0 calc(var(--rg-espace-2) * -1);
border-radius: var(--r-md);
transition: background var(--t-base) var(--ease);
}
@media (hover: hover) { .crew-item:hover {
background: var(--surface-2);
} }
.crew-avatar {
width: 38px;
height: 38px;
border-radius: var(--r-pill);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-semi);
color: var(--brand-white);
flex-shrink: 0;
letter-spacing: 0;
overflow: hidden; /* pour cropper l'![]()
interne */
}
.crew-avatar--pink {
background: var(--accent);
box-shadow: none;
}
.crew-avatar--navy {
background: var(--brand-navy);
}
.crew-avatar--mix {
background: var(--brand-navy);
}
:root[data-theme="light"] .crew-avatar--navy {
background: var(--brand-navy);
}
.crew-info {
display: flex;
flex-direction: column;
gap: calc(var(--rg-espace-1) / 2);
min-width: 0;
flex: 1;
}
.crew-name {
font-size: var(--fs-sm);
font-weight: var(--rg-graisse-moyen);
color: var(--text);
margin: 0;
}
.crew-role {
font-size: var(--fs-2xs);
color: var(--text-muted);
margin: 0;
}
.crew-status {
width: 8px;
height: 8px;
border-radius: var(--rg-rayon-0);
flex-shrink: 0;
background: var(--text-faint);
}
.crew-status--online {
background: var(--rg-piste-vert);
box-shadow: none;
}
/* ==========================================================
7.5 WIDGET PLACES
========================================================== */
.widget--places {
grid-column: span 1;
grid-row: span 1;
min-height: 360px;
}
.places-list {
display: flex;
flex-direction: column;
gap: var(--gap-xs);
}
.place-item {
display: flex;
align-items: center;
gap: var(--gap-sm);
padding: var(--rg-espace-3);
border-radius: var(--r-md);
border: var(--rg-trait-1) solid var(--border);
background: var(--surface-2);
transition:
transform var(--t-base) var(--ease),
border-color var(--t-base) var(--ease);
}
@media (hover: hover) { .place-item:hover {
transform: translateX(4px);
border-color: var(--accent);
} }
.place-flag {
width: 36px;
height: 36px;
border-radius: var(--r-sm);
background: var(--surface-3);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: 0;
color: var(--text-soft);
flex-shrink: 0;
}
.place-info {
display: flex;
flex-direction: column;
gap: calc(var(--rg-espace-1) / 2);
min-width: 0;
flex: 1;
}
.place-name {
font-size: var(--fs-sm);
font-weight: var(--rg-graisse-semi);
color: var(--text);
margin: 0;
}
.place-meta {
font-size: var(--fs-2xs);
color: var(--text-muted);
margin: 0;
}
.place-countdown {
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-semi);
color: var(--text-soft);
padding: var(--rg-espace-1) var(--rg-espace-3);
border-radius: var(--r-pill);
background: var(--surface-3);
white-space: nowrap;
flex-shrink: 0;
}
.place-countdown--soon {
background: var(--accent-soft);
color: var(--accent);
}
/* ==========================================================
7.6 WIDGET DOCUMENTS
========================================================== */
.widget--documents {
grid-column: span 1;
grid-row: span 1;
min-height: 360px;
}
.docs-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--gap-sm);
}
.doc-card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--gap-sm);
padding: var(--gap);
border-radius: var(--r-lg);
border: var(--rg-trait-1) solid var(--border);
background: var(--surface-2);
cursor: pointer;
overflow: hidden;
min-height: 180px;
transition:
transform var(--t-base) var(--ease),
border-color var(--t-base) var(--ease);
}
@media (hover: hover) { .doc-card:hover {
transform: translateY(-4px);
border-color: var(--accent);
} }
.doc-card__type {
width: 44px;
height: 44px;
border-radius: var(--r-md);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: 0;
}
.doc-card__type--pdf {
background: var(--accent-soft);
color: var(--accent);
}
.doc-card__type--xls {
background: color-mix(in srgb, var(--rg-piste-vert) 14%, transparent);
color: var(--rg-piste-vert);
}
.doc-card__type--doc {
background: color-mix(in srgb, var(--rg-marine-0) 14%, transparent);
color: var(--rg-marine-0);
}
.doc-card__type--img {
background: color-mix(in srgb, var(--rg-piste-orange) 14%, transparent);
color: var(--rg-piste-orange);
}
.doc-card__title {
font-size: var(--fs-sm);
font-weight: var(--rg-graisse-semi);
color: var(--text);
margin: 0;
line-height: var(--rg-interligne-fort);
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.doc-card__meta {
font-size: var(--fs-2xs);
color: var(--text-muted);
margin: 0;
margin-top: auto;
display: flex;
align-items: center;
gap: var(--rg-espace-2);
}
.doc-card__meta::before {
content: "";
width: 4px;
height: 4px;
border-radius: var(--rg-rayon-0);
background: var(--text-faint);
}
/* ==========================================================
8. PAGES DÉDIÉES (squelette commun)
----------------------------------------------------------
Hero + grand placeholder pour l'instant ("Coming soon").
========================================================== */
.page-hero {
display: flex;
flex-direction: column;
gap: var(--rg-espace-2);
margin-bottom: var(--gap-lg);
}
.page-hero__eyebrow {
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-semi);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--accent);
margin: 0;
}
.page-hero__title {
font-size: var(--fs-3xl);
font-weight: var(--rg-graisse-semi);
letter-spacing: var(--rg-chiffre-xl-espacement);
color: var(--text);
margin: 0;
}
.page-hero__sub {
font-size: var(--fs-md);
color: var(--text-soft);
margin: 0;
max-width: 640px;
}
/* Carte placeholder (en attendant le contenu réel de chaque page) */
.placeholder-card {
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--r-xl);
padding: var(--gap-xl) var(--gap-lg);
text-align: center;
box-shadow: none;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--gap-sm);
animation: widgetIn calc(var(--rg-duree) * 4.0) var(--ease-out) both;
opacity: 0;
transform: translateY(20px);
animation-delay: 100ms;
}
.placeholder-card__icon {
width: 56px;
height: 56px;
border-radius: var(--r-pill);
background: var(--accent-soft);
color: var(--accent);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: var(--gap-xs);
}
.placeholder-card__icon svg {
width: 26px;
height: 26px;
}
.placeholder-card__title {
font-size: var(--fs-xl);
font-weight: var(--rg-graisse-semi);
color: var(--text);
margin: 0;
letter-spacing: var(--rg-display-l-espacement);
}
.placeholder-card__text {
font-size: var(--fs-sm);
color: var(--text-soft);
margin: 0;
max-width: 420px;
}
.placeholder-card__pill {
margin-top: var(--gap-xs);
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
padding: var(--rg-espace-2) var(--rg-espace-4);
border-radius: var(--r-pill);
background: var(--accent-soft);
border: var(--rg-trait-1) solid color-mix(in srgb, var(--accent) 30%, transparent);
color: var(--accent);
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-semi);
letter-spacing: 0;
}
.placeholder-card__pill::before {
content: "";
width: 6px;
height: 6px;
border-radius: var(--rg-rayon-0);
background: var(--accent);
box-shadow: none;
animation: pulse calc(var(--rg-duree) * 16.0) var(--ease) infinite;
}
/* ==========================================================
9. PAGE LOGIN
----------------------------------------------------------
Standalone : pas de sidebar, juste carte centrée + teaser.
========================================================== */
.login-page {
min-height: 100vh;
display: flex;
padding: var(--gap-lg);
position: relative;
z-index: 1;
/* overflow + margin:auto sur le stage : centre quand le contenu
tient, et laisse scroller quand le formulaire signup dépasse. */
overflow-y: auto;
}
.login-corner {
position: absolute;
top: var(--gap);
right: var(--gap);
z-index: 2;
display: flex;
align-items: center;
gap: var(--gap-xs);
}
.login-shell-stage {
position: relative;
z-index: 1;
width: 100%;
max-width: 480px;
margin: auto;
display: flex;
flex-direction: column;
gap: var(--gap);
}
.login-card-v2 {
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--r-2xl);
padding: var(--gap-lg);
display: flex;
flex-direction: column;
gap: var(--gap);
box-shadow: none;
animation: widgetIn calc(var(--rg-duree) * 4.0) var(--ease-out) both;
animation-delay: 100ms;
opacity: 0;
transform: translateY(20px);
}
.login-brand {
display: flex;
flex-direction: column;
gap: var(--gap-xs);
}
.login-brand img {
height: 26px;
width: auto;
}
.login-eyebrow {
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-semi);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--accent);
margin: var(--gap) 0 0;
}
.login-title {
font-size: var(--fs-3xl);
font-weight: var(--rg-graisse-semi);
letter-spacing: var(--rg-chiffre-xl-espacement);
line-height: var(--rg-interligne-plein);
color: var(--text);
margin: var(--rg-espace-1) 0 0;
}
.login-sub {
font-size: var(--fs-sm);
color: var(--text-soft);
margin: var(--rg-espace-1) 0 0;
}
.login-form {
display: flex;
flex-direction: column;
gap: var(--gap-xs);
margin-top: var(--gap);
}
.field {
position: relative;
display: flex;
align-items: center;
gap: var(--gap-xs);
height: var(--rg-champ-hauteur);
padding: 0 var(--rg-espace-4);
background: var(--rg-fond-surface);
border: var(--rg-trait-1) solid var(--rg-bord-defaut);
border-bottom: var(--rg-trait-3) solid var(--rg-bord-fort);
border-radius: var(--rg-rayon-0);
transition: border-color var(--rg-duree);
}
.field:focus-within {
border-color: var(--rg-accent-defaut);
}
.field__icon {
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
flex-shrink: 0;
}
.field__input {
flex: 1;
min-width: 0;
background: transparent;
border: none;
outline: none;
font-size: var(--fs-sm);
color: var(--text);
}
.field__input::placeholder {
color: var(--text-muted);
}
.field__action {
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-moyen);
color: var(--text-soft);
padding: var(--rg-espace-2) var(--rg-espace-3);
border-radius: var(--r-pill);
background: var(--surface-3);
transition:
background var(--t-base) var(--ease),
color var(--t-base) var(--ease);
}
@media (hover: hover) { .field__action:hover {
background: var(--accent);
color: var(--brand-white);
} }
.btn-cta svg {
width: 18px;
height: 18px;
transition: transform var(--t-base) var(--ease);
}
@media (hover: hover) { .btn-cta:hover svg {
transform: translateX(4px);
} }
.login-fineprint {
font-size: var(--fs-2xs);
color: var(--text-muted);
text-align: center;
margin: 0;
}
.login-teaser {
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--r-xl);
padding: var(--gap);
display: flex;
align-items: center;
gap: var(--gap);
box-shadow: none;
animation: widgetIn calc(var(--rg-duree) * 4.7) var(--ease-out) both;
animation-delay: 250ms;
opacity: 0;
transform: translateY(20px);
}
.login-teaser__dot {
width: 10px;
height: 10px;
border-radius: var(--rg-rayon-0);
background: var(--accent);
box-shadow: none;
animation: pulse calc(var(--rg-duree) * 16.0) var(--ease) infinite;
flex-shrink: 0;
}
.login-teaser__text {
font-size: var(--fs-xs);
color: var(--text-soft);
margin: 0;
flex: 1;
line-height: var(--rg-interligne-texte-s);
}
.login-teaser__text strong {
color: var(--text);
font-weight: var(--rg-graisse-semi);
}
/* ==========================================================
9b. AUTH, switch de vue, erreurs, première connexion
========================================================== */
/* Switch entre Log in / First connection */
.login-switch {
font-size: var(--fs-xs);
color: var(--text-soft);
text-align: center;
margin: 0;
}
.login-switch__link {
background: none;
border: none;
padding: 0;
margin-left: var(--rg-espace-1);
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-semi);
color: var(--accent);
cursor: pointer;
}
@media (hover: hover) { .login-switch__link:hover { text-decoration: underline; } }
/* Message d'erreur d'authentification */
.auth-error {
margin: 0;
padding: var(--rg-espace-3) var(--rg-espace-4);
border-radius: var(--r-md);
background: color-mix(in srgb, var(--accent) 12%, transparent);
border: var(--rg-trait-1) solid color-mix(in srgb, var(--accent) 38%, transparent);
color: var(--accent);
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-moyen);
line-height: var(--rg-interligne-fort);
}
.auth-error[hidden] { display: none; }
/* ---- Carte signup ---- */
.signup-card { gap: var(--gap-xs); }
.signup-form {
display: flex;
flex-direction: column;
gap: var(--rg-espace-4);
margin-top: var(--gap);
}
/* Gate code entreprise */
.su-gate {
display: flex;
align-items: center;
gap: var(--rg-espace-3);
padding: var(--rg-espace-3) var(--rg-espace-4);
border-radius: var(--r-md);
background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
border: var(--rg-trait-1) solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.su-gate__icon {
width: 34px;
height: 34px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--rg-rayon-0);
background: color-mix(in srgb, var(--accent) 16%, transparent);
color: var(--accent);
}
.su-gate__icon svg { width: 18px; height: 18px; }
.su-gate__body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--rg-espace-1);
}
.su-gate__input {
background: transparent;
border: none;
outline: none;
font-size: var(--fs-md);
font-weight: var(--rg-graisse-semi);
letter-spacing: var(--rg-label-m-espacement);
color: var(--text);
font-family: var(--font-mono);
}
.su-gate__input::placeholder {
color: var(--text-muted);
letter-spacing: 0;
font-weight: var(--rg-graisse-regulier);
font-family: var(--font-base);
}
/* Photo upload */
.su-photo-row {
display: flex;
align-items: center;
gap: var(--rg-espace-4);
}
.su-photo {
width: 64px;
height: 64px;
border-radius: var(--rg-rayon-0);
flex-shrink: 0;
background: var(--surface-2);
border: var(--rg-trait-3) dashed var(--border-2);
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
cursor: pointer;
transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
@media (hover: hover) { .su-photo:hover {
border-color: var(--accent);
background: var(--surface-3);
} }
.su-photo--filled { border-style: solid; }
.su-photo__placeholder {
color: var(--text-muted);
}
.su-photo__placeholder svg { width: 26px; height: 26px; }
.su-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.su-photo-row__text {
display: flex;
flex-direction: column;
gap: calc(var(--rg-espace-1) / 2);
}
.su-photo-row__title {
font-size: var(--fs-sm);
font-weight: var(--rg-graisse-semi);
color: var(--text);
}
.su-photo-row__hint {
font-size: var(--fs-2xs);
color: var(--text-muted);
}
/* Lignes 2 colonnes */
.su-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--rg-espace-3);
}
/* Champ labellisé */
.su-field {
display: flex;
flex-direction: column;
gap: var(--rg-espace-1);
min-width: 0;
}
.su-field__label {
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-semi);
letter-spacing: 0;
color: var(--text-soft);
}
.su-field__input {
height: 46px;
padding: 0 var(--rg-espace-4);
border-radius: var(--r-md);
background: var(--surface-2);
border: var(--rg-trait-1) solid var(--border);
outline: none;
font-size: var(--fs-sm);
color: var(--text);
font-family: var(--font-base);
width: 100%;
min-width: 0;
box-sizing: border-box;
transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.su-field__input::placeholder { color: var(--text-muted); }
.su-field__input:focus {
border-color: var(--accent);
background: var(--surface-3);
}
.su-field__input--select {
appearance: none;
-webkit-appearance: none;
cursor: pointer;
background-image:
linear-gradient(45deg, transparent 50%, var(--text-soft) 50%),
linear-gradient(135deg, var(--text-soft) 50%, transparent 50%);
background-position:
calc(100% - 18px) 50%,
calc(100% - 13px) 50%;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
padding-right: var(--rg-espace-6);
}
/* Chips disciplines */
.su-chips {
display: flex;
flex-wrap: wrap;
gap: var(--rg-espace-2);
}
.su-chip {
height: 32px;
padding: 0 var(--rg-espace-3);
border-radius: var(--r-pill);
background: var(--surface-2);
border: var(--rg-trait-1) solid var(--border);
color: var(--text-soft);
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-moyen);
cursor: pointer;
transition:
background var(--t-base) var(--ease),
border-color var(--t-base) var(--ease),
color var(--t-base) var(--ease);
}
@media (hover: hover) { .su-chip:hover {
border-color: var(--border-2);
color: var(--text);
} }
.su-chip--active {
background: var(--accent-soft);
border-color: var(--accent);
color: var(--accent);
font-weight: var(--rg-graisse-semi);
}
/* ==========================================================
10. ACCESSIBILITÉ : prefers-reduced-motion
========================================================== */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: var(--rg-duree) !important;
animation-iteration-count: 1 !important;
transition-duration: var(--rg-duree) !important;
}
}
/* ==========================================================
11. RESPONSIVE
========================================================== */
@media (max-width: 1180px) {
/* Hero passe en colonne unique : intro en haut, featured en bas */
.hero {
grid-template-columns: 1fr;
}
.hero__featured {
min-height: 220px;
}
}
@media (max-width: 980px) {
/* Sidebar passe en mode icônes seules */
:root {
--sidebar-w: 76px;
}
.sidebar__brand img {
height: 22px;
}
.nav-item {
justify-content: center;
padding: var(--rg-espace-3);
}
.nav-item__label,
.nav-item__badge,
.sidebar__section,
.sidebar__footer {
display: none;
}
/* La règle qui repositionnait la barre d'accent a été retirée
le 2026-10-19 avec la barre elle-même. Du CSS qui vise un
élément disparu, c'est le prochain qui s'y perd. */
}
@media (max-width: 720px) {
/* ----------------------------------------------------------
SIDEBAR EN MODE SLIDE-IN
Sur mobile, la sidebar devient une drawer qui glisse depuis
la gauche quand on clique sur le hamburger.
---------------------------------------------------------- */
.app-shell {
grid-template-columns: 1fr;
}
.sidebar {
/* On override le display: none de --width:980 et on la
repositionne en fixed offscreen, prête à glisser. */
display: flex;
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 280px;
max-width: 85vw;
transform: translateX(-100%);
transition: transform calc(var(--rg-duree) * 1.5) var(--ease);
z-index: 60;
background: var(--bg-2);
padding: var(--gap) var(--gap-sm);
}
body.sidebar-open .sidebar {
transform: translateX(0);
box-shadow: none;
}
/* Tout est à nouveau visible quand la sidebar est ouverte */
body.sidebar-open .sidebar .nav-item__label,
body.sidebar-open .sidebar .sidebar__section,
body.sidebar-open .sidebar .profile-widget,
body.sidebar-open .sidebar .profile-widget__info,
body.sidebar-open .sidebar .profile-widget__chevron {
display: flex;
}
/* Overlay derrière la sidebar */
body.sidebar-open::before {
content: "";
position: fixed;
inset: 0;
background: color-mix(in srgb, var(--rg-marine-8) 55%, transparent);
z-index: 59;
animation: sidebarOverlayIn calc(var(--rg-duree) * 1.5) var(--ease) both;
}
/* Hamburger button apparaît dans la topbar */
.topbar__hamburger {
display: inline-flex;
}
.topbar {
padding: 0 var(--gap);
}
.page-body {
padding: var(--gap) var(--gap) var(--gap-lg);
}
.hero {
flex-direction: column;
align-items: flex-start;
}
.hero__title,
.page-hero__title {
font-size: var(--fs-2xl);
}
.grid {
grid-template-columns: 1fr;
}
.widget--timetable,
.widget--crew,
.widget--places,
.widget--documents {
grid-column: span 1;
}
.race-feature {
grid-template-columns: 1fr;
}
.race-feature__date {
border-right: none;
border-bottom: var(--rg-trait-1) solid var(--border);
padding-right: 0;
padding-bottom: var(--gap-sm);
flex-direction: row;
align-items: baseline;
gap: var(--gap-xs);
}
.docs-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.login-card-v2 {
padding: var(--gap);
}
.login-title {
font-size: var(--fs-2xl);
}
}
/* ==========================================================
12. PAGE TIMETABLE
----------------------------------------------------------
Création / édition des week-ends de course avec leurs days
et leurs events. Composants :
- hero avec action principale
- empty state
- carte week-end (tt-card)
- section day (tt-day)
- ligne event (tt-event)
- couleurs des catégories d'event (--cat-*)
- modal générique + formulaires
========================================================== */
/* ---------------------------------------------------------
12.1 PALETTE DES CATÉGORIES D'EVENT
---------------------------------------------------------
Reprise du code couleur des timetables de l'equipe, ramene
a l'intensite de l'interface : leurs aplats sont faits pour
le papier, pas pour un fond sombre. Chaque event herite de
la couleur de sa famille.
--------------------------------------------------------- */
:root {
--cat-jour: var(--rg-metier-orange-clair); /* Jalons de la journee, jaune */
--cat-pilote: var(--rg-rose-5); /* Le pilote, rose */
--cat-moteur: var(--rg-marine-1); /* Mise en route, bleu */
--cat-voiture: var(--rg-piste-vert); /* La voiture bouge, vert */
--cat-piste: var(--rg-piste-rouge); /* Piste chronometree, rouge */
--cat-officiel: var(--rg-metier-violet); /* L'organisateur, violet */
--cat-media: var(--rg-metier-cyan); /* Media, cyan */
--cat-courant: var(--rg-neutre-acier); /* Travail courant, neutre */
/* Le trajet : un vert clair, assez franc pour se voir sur les deux themes.
Plus clair et plus froid que le vert des mouvements de voiture, pour
qu'une bande de route ne se confonde pas avec un evenement. */
--trajet-fort: var(--rg-metier-vert-clair);
--trajet-fond: color-mix(in srgb, var(--rg-metier-vert-clair) 18%, transparent);
--trajet-bord: color-mix(in srgb, var(--rg-metier-vert-clair) 42%, transparent);
--trajet-texte: var(--rg-metier-vert-clair);
}
/* ---------------------------------------------------------
12.2 HEADER DE PAGE AVEC ACTION
--------------------------------------------------------- */
.page-hero__row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--gap);
flex-wrap: wrap;
}
.page-hero__row > div {
display: flex;
flex-direction: column;
gap: var(--rg-espace-2);
flex: 1;
min-width: 0;
}
/* Boutons, forme de la charte : coin coupé à 30° */
.btn-primary, .btn-secondary, .btn-danger, .btn-cta, .btn-screen-lap {
--b-coin: var(--rg-btn-m-coin);
--b-coupe: calc(var(--b-coin) / var(--rg-pente));
--b-fond: transparent;
--b-bord: transparent;
--b-trait: var(--rg-trait-2);
position: relative;
isolation: isolate;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--rg-espace-2);
height: var(--rg-btn-m-hauteur);
padding: 0 var(--rg-btn-m-marge);
border: 0;
border-radius: var(--rg-rayon-0);
background: none;
font: var(--rg-texte-m-fort);
white-space: nowrap;
text-decoration: none;
cursor: pointer;
transition: color var(--rg-duree);
}
.btn-primary::before, .btn-secondary::before, .btn-danger::before, .btn-cta::before, .btn-screen-lap::before,
.btn-primary::after, .btn-secondary::after, .btn-danger::after, .btn-cta::after, .btn-screen-lap::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--b-coupe)), calc(100% - var(--b-coin)) 100%, 0 100%);
transition: background var(--rg-duree);
}
.btn-primary::before, .btn-secondary::before, .btn-danger::before, .btn-cta::before, .btn-screen-lap::before { background: var(--b-bord); }
.btn-primary::after, .btn-secondary::after, .btn-danger::after, .btn-cta::after, .btn-screen-lap::after { background: var(--b-fond); }
/* Bouton plein */
.btn-primary, .btn-cta { --b-fond: var(--rg-accent-defaut); color: var(--rg-neutre-blanc); }
@media (hover: hover) { .btn-primary:hover, .btn-cta:hover { --b-fond: var(--rg-accent-survol); } }
.btn-primary:active, .btn-cta:active { --b-fond: var(--rg-accent-presse); }
.btn-cta { width: 100%; }
/* Bouton contour */
.btn-secondary, .btn-danger, .btn-screen-lap, .btn-cta.btn-cta--ghost { --b-bord: var(--rg-texte-principal); --b-fond: var(--rg-fond-surface); color: var(--rg-texte-principal); }
.btn-secondary::after, .btn-danger::after, .btn-screen-lap::after, .btn-cta.btn-cta--ghost::after {
clip-path: polygon(var(--b-trait) var(--b-trait), calc(100% - var(--b-trait)) var(--b-trait), calc(100% - var(--b-trait)) calc(100% - var(--b-coupe) - var(--b-trait) * 0.27),
calc(100% - var(--b-coin) - var(--b-trait) * 0.58) calc(100% - var(--b-trait)), var(--b-trait) calc(100% - var(--b-trait)));
}
@media (hover: hover) { .btn-secondary:hover, .btn-screen-lap:hover, .btn-cta.btn-cta--ghost:hover { --b-fond: var(--rg-accent-doux); } }
.btn-secondary:active, .btn-screen-lap:active, .btn-cta.btn-cta--ghost:active { --b-fond: var(--rg-fond-surface-2); }
.btn-danger { --b-bord: var(--rg-bord-fort); color: var(--rg-texte-secondaire); }
.btn-danger:focus-visible { --b-bord: var(--rg-etat-erreur); color: var(--rg-etat-erreur); }
@media (hover: hover) { .btn-danger:hover { --b-bord: var(--rg-etat-erreur); color: var(--rg-etat-erreur); } }
.btn-screen-lap { --b-bord: var(--rg-accent-defaut); color: var(--rg-accent-defaut); margin-right: var(--rg-espace-1); }
/* Petite taille */
.btn-sm, .btn-screen-lap { --b-coin: var(--rg-btn-s-coin); height: var(--rg-btn-s-hauteur); padding: 0 var(--rg-btn-s-marge); font: var(--rg-texte-s-fort); }
/* Bouton discret */
.btn-quiet {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
height: var(--rg-btn-s-hauteur);
padding: 0 var(--rg-espace-3);
border: 0;
border-radius: var(--rg-rayon-0);
background: none;
font: var(--rg-texte-s-fort);
color: var(--rg-texte-secondaire);
white-space: nowrap;
cursor: pointer;
text-underline-offset: var(--rg-espace-2);
text-decoration-thickness: var(--rg-trait-3);
transition: color var(--rg-duree);
}
@media (hover: hover) { .btn-quiet:hover { color: var(--rg-accent-defaut); text-decoration-line: underline; } }
.btn-quiet--danger { color: var(--rg-etat-erreur); margin-right: auto; }
@media (hover: hover) { .btn-quiet--danger:hover { color: var(--rg-etat-erreur); } }
/* États communs */
.btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-danger:focus-visible, .btn-cta:focus-visible, .btn-screen-lap:focus-visible, .btn-quiet:focus-visible {
outline: var(--rg-trait-3) solid var(--rg-focus);
outline-offset: var(--rg-btn-focus-ecart);
}
.btn-primary:disabled, .btn-secondary:disabled, .btn-danger:disabled, .btn-cta:disabled, .btn-screen-lap:disabled, .btn-quiet:disabled { cursor: not-allowed; color: var(--rg-texte-desactive); }
.btn-primary:disabled, .btn-cta:disabled { --b-fond: var(--rg-fond-surface-2); }
.btn-secondary:disabled, .btn-danger:disabled, .btn-screen-lap:disabled { --b-bord: var(--rg-texte-desactive); }
.btn-primary svg {
width: 16px;
height: 16px;
}
/* ---------------------------------------------------------
12.3 EMPTY STATE
--------------------------------------------------------- */
.empty-state {
background: var(--surface);
border: var(--rg-trait-1) dashed var(--border-2);
border-radius: var(--r-xl);
padding: var(--gap-xl) var(--gap-lg);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--gap-sm);
animation: widgetIn calc(var(--rg-duree) * 4.0) var(--ease-out) both;
opacity: 0;
transform: translateY(20px);
}
.empty-state__icon {
width: 64px;
height: 64px;
border-radius: var(--r-pill);
background: var(--accent-soft);
color: var(--accent);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: var(--gap-2xs);
}
.empty-state__icon svg {
width: 28px;
height: 28px;
}
.empty-state__title {
font-size: var(--fs-xl);
font-weight: var(--rg-graisse-semi);
color: var(--text);
margin: 0;
letter-spacing: var(--rg-display-l-espacement);
}
.empty-state__text {
font-size: var(--fs-sm);
color: var(--text-soft);
margin: 0 0 var(--gap-xs);
max-width: 420px;
}
/* ---------------------------------------------------------
12.4 LISTE DES TIMETABLES
--------------------------------------------------------- */
.tt-list {
display: flex;
flex-direction: column;
gap: var(--gap-lg);
}
/* Carte d'un week-end de course */
.tt-card {
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--r-xl);
padding: var(--gap-md);
box-shadow: none;
display: flex;
flex-direction: column;
gap: var(--gap);
opacity: 0;
transform: translateY(16px);
animation: widgetIn calc(var(--rg-duree) * 3.3) var(--ease-out) both;
}
.tt-card:nth-child(1) { animation-delay: 60ms; }
.tt-card:nth-child(2) { animation-delay: 120ms; }
.tt-card:nth-child(3) { animation-delay: 180ms; }
.tt-card:nth-child(4) { animation-delay: 240ms; }
/* Header de la carte : logo + identité + actions */
.tt-card__head {
display: flex;
align-items: center;
gap: var(--gap);
padding-bottom: var(--gap-sm);
border-bottom: var(--rg-trait-1) solid var(--border);
}
.tt-card__logo {
width: 56px;
height: 56px;
border-radius: var(--r-md);
background: var(--surface-2);
border: var(--rg-trait-1) solid var(--border);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.tt-card__logo img {
max-width: 70%;
max-height: 70%;
width: auto;
height: auto;
}
/* En light mode certains logos sont blanchâtres : on inverse */
:root[data-theme="light"] .tt-card__logo img {
filter: invert(1) hue-rotate(180deg);
}
/* Fallback texte pour les catégories sans logo */
.tt-card__logo-text {
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
color: var(--accent);
}
.tt-card__title-wrap {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--rg-espace-1);
}
.tt-card__title {
font-size: var(--fs-xl);
font-weight: var(--rg-graisse-semi);
color: var(--text);
margin: 0;
letter-spacing: var(--rg-display-l-espacement);
}
.tt-card__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--rg-espace-2) var(--rg-espace-3);
font-size: var(--fs-2xs);
color: var(--text-muted);
}
.tt-card__meta-dot {
width: 3px;
height: 3px;
border-radius: var(--rg-rayon-0);
background: var(--text-faint);
}
.tt-card__cat {
display: inline-flex;
align-items: center;
padding: var(--rg-espace-1) var(--rg-espace-2);
border-radius: var(--r-pill);
background: var(--accent-soft);
color: var(--accent);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
font-size: var(--fs-3xs);
text-transform: uppercase;
}
.tt-card__actions {
display: flex;
align-items: center;
gap: var(--rg-espace-2);
flex-shrink: 0;
}
.btn-screen-lap svg {
width: 16px;
height: 16px;
}
.icon-btn {
width: 36px;
height: 36px;
border-radius: var(--r-pill);
background: var(--surface-2);
border: var(--rg-trait-1) solid var(--border);
color: var(--text-soft);
display: inline-flex;
align-items: center;
justify-content: center;
transition:
background var(--t-base) var(--ease),
color var(--t-base) var(--ease),
border-color var(--t-base) var(--ease),
transform var(--t-base) var(--ease);
}
@media (hover: hover) { .icon-btn:hover {
background: var(--surface-3);
color: var(--text);
border-color: var(--border-2);
transform: translateY(-1px);
} }
.icon-btn svg {
width: 16px;
height: 16px;
}
@media (hover: hover) { .icon-btn--danger:hover {
background: var(--accent-soft);
color: var(--accent);
border-color: color-mix(in srgb, var(--accent) 35%, transparent);
} }
/* ---------------------------------------------------------
12.5 DAY SECTION
---------------------------------------------------------
Chaque day est une vraie carte distincte pour qu'on capte
immédiatement combien de days composent le week-end.
--------------------------------------------------------- */
/* Header de section "X days" au-dessus de la liste */
.tt-section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--gap);
margin: var(--gap-sm) 0 var(--gap-xs);
}
.tt-section-head__title {
display: flex;
align-items: center;
gap: var(--rg-espace-3);
font-size: var(--fs-md);
font-weight: var(--rg-graisse-semi);
color: var(--text);
letter-spacing: var(--rg-display-l-espacement);
margin: 0;
}
.tt-section-head__pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 28px;
padding: 0 var(--rg-espace-3);
border-radius: var(--r-pill);
background: var(--accent);
color: var(--brand-white);
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: 0;
box-shadow: none;
}
.tt-section-head__hint {
font-size: var(--fs-2xs);
color: var(--text-muted);
}
.tt-days {
display: flex;
flex-direction: column;
gap: var(--gap);
}
/* Carte d'un day : c'est ce qui rend les 3 jours évidents */
.tt-day {
display: flex;
flex-direction: column;
gap: var(--gap-sm);
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--r-lg);
padding: var(--gap);
transition:
border-color var(--t-base) var(--ease),
box-shadow var(--t-slow) var(--ease);
}
@media (hover: hover) { .tt-day:hover {
border-color: var(--border-2);
} }
.tt-day__head {
display: flex;
align-items: center;
gap: var(--gap-sm);
padding-bottom: var(--gap-xs);
border-bottom: var(--rg-trait-1) solid var(--border);
}
.tt-day__num {
display: inline-flex;
align-items: center;
height: 30px;
padding: 0 var(--rg-espace-4);
border-radius: var(--r-pill);
background: var(--accent);
color: var(--brand-white);
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
box-shadow: none;
flex-shrink: 0;
}
.tt-day__name-block {
display: flex;
flex-direction: column;
gap: calc(var(--rg-espace-1) / 2);
min-width: 0;
flex: 1;
}
.tt-day__name {
font-size: var(--fs-lg);
font-weight: var(--rg-graisse-semi);
color: var(--text);
letter-spacing: var(--rg-display-l-espacement);
margin: 0;
/* Pour signaler que c'est cliquable / éditable */
cursor: text;
}
.tt-day__name--placeholder {
color: var(--text-muted);
font-weight: var(--rg-graisse-moyen);
font-style: italic;
}
/* Input inline pour renommer le day */
.tt-day__name-input {
font-size: var(--fs-lg);
font-weight: var(--rg-graisse-semi);
color: var(--text);
letter-spacing: var(--rg-display-l-espacement);
background: var(--surface-2);
border: var(--rg-trait-1) solid var(--accent);
border-radius: var(--r-sm);
padding: var(--rg-espace-1) var(--rg-espace-3);
outline: none;
width: 100%;
font-family: var(--rg-police-texte);
}
.tt-day__date-sub {
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-moyen);
letter-spacing: 0;
text-transform: uppercase;
color: var(--text-muted);
}
.tt-day__count {
font-size: var(--fs-2xs);
color: var(--text-muted);
white-space: nowrap;
}
/* Actions de la carte day : rename + delete */
.tt-day__actions {
display: flex;
align-items: center;
gap: var(--rg-espace-1);
flex-shrink: 0;
}
.tt-day__action {
width: 32px;
height: 32px;
border-radius: var(--r-sm);
background: var(--surface-2);
border: var(--rg-trait-1) solid var(--border);
color: var(--text-muted);
display: inline-flex;
align-items: center;
justify-content: center;
transition:
background var(--t-base) var(--ease),
color var(--t-base) var(--ease),
border-color var(--t-base) var(--ease),
transform var(--t-base) var(--ease);
}
@media (hover: hover) { .tt-day__action:hover {
background: var(--surface-3);
color: var(--text);
border-color: var(--border-2);
transform: translateY(-1px);
} }
@media (hover: hover) { .tt-day__action--danger:hover {
background: var(--accent-soft);
color: var(--accent);
border-color: color-mix(in srgb, var(--accent) 35%, transparent);
} }
.tt-day__action svg {
width: 14px;
height: 14px;
}
/* Liste d'events d'un day */
.tt-events {
display: flex;
flex-direction: column;
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--r-md);
overflow: hidden;
background: var(--surface-2);
}
/* ---------------------------------------------------------
12.6 LIGNE EVENT
--------------------------------------------------------- */
.tt-event {
display: grid;
/* Colonne du badge catégorie élargie pour accueillir
les noms longs comme "Race & performance". */
grid-template-columns: 70px 190px 1fr auto;
align-items: center;
gap: var(--gap-sm);
padding: var(--rg-espace-3) var(--gap);
border-bottom: var(--rg-trait-1) solid var(--border);
transition: background var(--t-base) var(--ease);
position: relative;
}
.tt-event:last-child {
border-bottom: none;
}
@media (hover: hover) { .tt-event:hover {
background: var(--surface-3);
} }
.tt-event__time {
display: flex;
flex-direction: column;
gap: calc(var(--rg-espace-1) / 2);
letter-spacing: 0;
}
.tt-event__time-start {
font-size: var(--fs-sm);
font-weight: var(--rg-graisse-semi);
color: var(--text);
}
.tt-event__time-duration {
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-moyen);
color: var(--text-muted);
white-space: nowrap;
}
/* Event décalé : horaire réel en accent, horaire prévu barré dessous */
.tt-event__time-start--shifted {
color: var(--accent);
}
.tt-event__time-planned {
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-moyen);
color: var(--text-muted);
text-decoration: line-through;
}
.tt-event__task {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
padding: var(--rg-espace-1) var(--rg-espace-3);
border-radius: var(--r-pill);
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-semi);
letter-spacing: 0;
color: var(--brand-white);
white-space: nowrap;
justify-self: start;
}
.tt-event__task::before {
content: "";
width: 6px;
height: 6px;
border-radius: var(--rg-rayon-0);
background: color-mix(in srgb, var(--rg-neutre-blanc) 85%, transparent);
}
.tt-event__main {
display: flex;
flex-direction: column;
gap: var(--rg-espace-1);
min-width: 0;
}
.tt-event__title {
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-semi);
color: var(--text);
margin: 0;
line-height: var(--rg-interligne-court);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tt-event__jobs {
display: flex;
flex-wrap: wrap;
gap: var(--rg-espace-1);
}
.tt-event__job {
display: inline-flex;
align-items: center;
padding: calc(var(--rg-espace-1) / 2) var(--rg-espace-2);
border-radius: var(--r-pill);
background: var(--surface-3);
color: var(--text-soft);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-moyen);
letter-spacing: 0;
}
.tt-event__comment {
font-size: var(--fs-2xs);
color: var(--text-muted);
font-style: italic;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
.tt-event__actions {
display: flex;
align-items: center;
gap: var(--rg-espace-1);
opacity: 0;
transition: opacity var(--t-base) var(--ease);
}
@media (hover: hover) { .tt-event:hover .tt-event__actions {
opacity: 1;
} }
.tt-event__btn {
width: 30px;
height: 30px;
border-radius: var(--r-xs);
background: transparent;
color: var(--text-muted);
display: inline-flex;
align-items: center;
justify-content: center;
transition:
background var(--t-base) var(--ease),
color var(--t-base) var(--ease);
}
@media (hover: hover) { .tt-event__btn:hover {
background: var(--surface);
color: var(--text);
} }
@media (hover: hover) { .tt-event__btn--danger:hover {
background: var(--accent-soft);
color: var(--accent);
} }
.tt-event__btn svg {
width: 14px;
height: 14px;
}
/* ---------------------------------------------------------
12.7 BOUTON "ADD EVENT"
--------------------------------------------------------- */
.tt-day__add {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
height: 36px;
padding: 0 var(--rg-espace-4);
border-radius: var(--r-pill);
background: transparent;
border: var(--rg-trait-1) dashed var(--border-2);
color: var(--text-soft);
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-moyen);
align-self: flex-start;
transition:
background var(--t-base) var(--ease),
color var(--t-base) var(--ease),
border-color var(--t-base) var(--ease);
}
@media (hover: hover) { .tt-day__add:hover {
background: var(--accent-soft);
border-color: var(--accent);
color: var(--accent);
border-style: solid;
} }
.tt-day__add svg {
width: 14px;
height: 14px;
}
/* Bouton "+ Add day" (vue détail, en bas de la liste des days) */
.tt-add-day {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-3);
align-self: flex-start;
padding: var(--rg-espace-3) var(--rg-espace-5);
border-radius: var(--r-md);
background: var(--surface);
border: var(--rg-trait-1) dashed var(--border-2);
color: var(--text-soft);
font-size: var(--fs-sm);
font-weight: var(--rg-graisse-moyen);
transition:
background var(--t-base) var(--ease),
color var(--t-base) var(--ease),
border-color var(--t-base) var(--ease),
transform var(--t-base) var(--ease);
}
@media (hover: hover) { .tt-add-day:hover {
background: var(--accent-soft);
border-color: var(--accent);
border-style: solid;
color: var(--accent);
transform: translateY(-1px);
} }
.tt-add-day svg {
width: 16px;
height: 16px;
}
/* ---------------------------------------------------------
12.8 MODAL GÉNÉRIQUE
--------------------------------------------------------- */
.modal-overlay {
position: fixed;
inset: 0;
z-index: 100;
background: color-mix(in srgb, var(--bg) 65%, color-mix(in srgb, var(--rg-marine-8) 45%, transparent));
display: flex;
align-items: center;
justify-content: center;
padding: var(--gap);
animation: overlayIn var(--t-slow) var(--ease) both;
}
.modal-overlay[hidden] {
display: none;
}
@keyframes overlayIn {
from { opacity: 0; }
to { opacity: 1; }
}
.modal {
position: relative;
background: var(--rg-fond-surface);
border: 0;
border-radius: var(--rg-rayon-0);
box-shadow: none;
width: 100%;
max-width: var(--rg-modale-largeur);
max-height: calc(100vh - 2 * var(--gap));
display: flex;
flex-direction: column;
overflow: hidden;
animation: modalIn var(--t-slow) var(--ease-out) both;
}
.modal::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: var(--rg-trait-repere);
background: var(--rg-accent-defaut);
z-index: 3;
}
@keyframes modalIn {
from {
opacity: 0;
transform: translateY(20px) scale(0.97);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.modal__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--gap);
padding: var(--gap) var(--gap-md);
border-bottom: var(--rg-trait-1) solid var(--border);
}
.modal__title {
margin: 0;
font: var(--rg-titre-h2);
color: var(--rg-texte-principal);
}
.modal__close {
width: var(--rg-btn-s-hauteur);
height: var(--rg-btn-s-hauteur);
border-radius: var(--rg-rayon-0);
background: none;
color: var(--rg-texte-secondaire);
display: inline-flex;
align-items: center;
justify-content: center;
transition: color var(--rg-duree);
}
@media (hover: hover) { .modal__close:hover {
background: none;
color: var(--rg-accent-defaut);
} }
.modal__close svg {
width: 16px;
height: 16px;
}
.modal__body {
flex: 1;
overflow-y: auto;
padding: var(--gap-md);
display: flex;
flex-direction: column;
gap: var(--gap);
}
.modal__foot {
padding: var(--gap) var(--gap-md);
border-top: var(--rg-trait-1) solid var(--border);
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--gap-xs);
background: var(--surface);
}
.modal__foot--space {
justify-content: space-between;
}
/* ---------------------------------------------------------
12.9 FORMULAIRES
--------------------------------------------------------- */
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--gap);
}
.form-field {
display: flex;
flex-direction: column;
gap: var(--rg-espace-2);
min-width: 0;
}
.form-field--full {
grid-column: 1 / -1;
}
.form-label {
font: var(--rg-label-m);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--rg-texte-secondaire);
margin: 0;
}
.form-input,
.form-select,
.form-textarea {
width: 100%;
height: var(--rg-champ-hauteur);
padding: 0 var(--rg-espace-4);
border: var(--rg-trait-1) solid var(--rg-bord-defaut);
border-bottom: var(--rg-trait-3) solid var(--rg-bord-fort);
border-radius: var(--rg-rayon-0);
background-color: var(--rg-fond-surface);
font: var(--rg-texte-m);
color: var(--rg-texte-principal);
outline: none;
transition: border-color var(--rg-duree);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--rg-texte-desactive); }
@media (hover: hover) { .form-input:hover, .form-select:hover, .form-textarea:hover { border-color: var(--rg-bord-fort); } }
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
border-color: var(--rg-accent-defaut);
}
.form-textarea {
height: auto;
min-height: 80px;
padding: var(--rg-espace-3) var(--rg-espace-4);
resize: vertical;
}
.form-select {
appearance: none;
-webkit-appearance: none;
padding-right: var(--rg-espace-6);
background-image:
linear-gradient(45deg, transparent 50%, var(--text-soft) 50%),
linear-gradient(135deg, var(--text-soft) 50%, transparent 50%);
background-position:
calc(100% - 18px) 50%,
calc(100% - 13px) 50%;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
cursor: pointer;
}
/* Adapter le calendrier natif au theme (Safari/Chrome) */
.form-input[type="date"]::-webkit-calendar-picker-indicator,
.form-input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(70%);
cursor: pointer;
}
:root[data-theme="light"] .form-input[type="date"]::-webkit-calendar-picker-indicator,
:root[data-theme="light"] .form-input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(30%);
}
/* ---------------------------------------------------------
12.10 SÉLECTEUR DE CATÉGORIE (avec logos)
--------------------------------------------------------- */
.category-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--rg-espace-2);
}
.category-option {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--rg-espace-2);
padding: var(--rg-espace-3) var(--rg-espace-2);
border-radius: var(--r-md);
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
cursor: pointer;
transition:
background var(--t-base) var(--ease),
border-color var(--t-base) var(--ease),
transform var(--t-base) var(--ease);
}
@media (hover: hover) { .category-option:hover {
background: var(--surface-2);
border-color: var(--border-2);
transform: translateY(-1px);
} }
.category-option.is-selected {
border-color: var(--accent);
background: var(--accent-soft);
}
.category-option__visual {
height: 28px;
display: flex;
align-items: center;
justify-content: center;
}
.category-option__visual img {
max-height: 100%;
max-width: 60px;
width: auto;
}
:root[data-theme="light"] .category-option__visual img {
filter: invert(1) hue-rotate(180deg);
}
.category-option__visual-text {
font-size: var(--fs-sm);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
color: var(--text);
}
.category-option__label {
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-moyen);
letter-spacing: 0;
color: var(--text-muted);
text-align: center;
text-transform: uppercase;
}
.category-option.is-selected .category-option__label {
color: var(--accent);
}
/* ---------------------------------------------------------
12.10b SÉLECTEUR DE CATÉGORIE D'EVENT
---------------------------------------------------------
Première étape du flow : on choisit d'abord une catégorie
(6 cartes couleur), puis les tasks de la catégorie
s'affichent dans .task-grid en-dessous.
--------------------------------------------------------- */
.event-cat-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--rg-espace-2);
}
.event-cat-option {
position: relative;
display: flex;
align-items: center;
gap: var(--rg-espace-2);
padding: var(--rg-espace-3);
border-radius: var(--r-md);
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
color: var(--text);
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-semi);
text-align: left;
cursor: pointer;
transition:
background var(--t-base) var(--ease),
border-color var(--t-base) var(--ease),
transform var(--t-base) var(--ease);
}
@media (hover: hover) { .event-cat-option:hover {
background: var(--surface-2);
border-color: var(--border-2);
transform: translateY(-1px);
} }
.event-cat-option.is-selected {
border-color: transparent;
background: var(--cat-color, var(--accent));
color: var(--brand-white);
box-shadow: none;
}
.event-cat-option__swatch {
width: 14px;
height: 14px;
border-radius: var(--rg-rayon-0);
background: var(--cat-color, var(--accent));
flex-shrink: 0;
transition: background var(--t-base) var(--ease);
}
.event-cat-option.is-selected .event-cat-option__swatch {
background: var(--brand-white);
}
/* Quand aucune catégorie n'est choisie, on grise le bloc tasks */
.task-grid--locked {
opacity: 0.4;
pointer-events: none;
filter: grayscale(0.6);
}
.task-grid__hint {
grid-column: 1 / -1;
text-align: center;
padding: var(--rg-espace-4);
font-size: var(--fs-2xs);
color: var(--text-muted);
background: var(--surface);
border: var(--rg-trait-1) dashed var(--border);
border-radius: var(--r-md);
}
/* ---------------------------------------------------------
12.11 SÉLECTEUR DE TÂCHE (grille colorée)
--------------------------------------------------------- */
.task-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--rg-espace-2);
}
.task-option {
position: relative;
display: flex;
align-items: center;
gap: var(--rg-espace-2);
padding: var(--rg-espace-3) var(--rg-espace-3);
border-radius: var(--r-md);
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
color: var(--text);
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-moyen);
text-align: left;
cursor: pointer;
transition:
background var(--t-base) var(--ease),
border-color var(--t-base) var(--ease),
transform var(--t-base) var(--ease);
}
/* Mini chip de catégorie affiché à droite des matches en mode recherche */
.task-option__cat {
margin-left: auto;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
opacity: 0.85;
white-space: nowrap;
}
/* ==========================================================
DELAY (RETARD), bouton ligne event + popup + badge
========================================================== */
/* Variante "narrow" du modal pour le popup délai */
.modal--narrow { max-width: 460px; }
/* ----- Bouton "delay" sur la ligne event (à côté de edit/delete) ----- */
.tt-event__btn--delay {
color: var(--text-soft);
}
@media (hover: hover) { .tt-event__btn--delay:hover {
color: var(--rg-piste-orange); /* amber pour signaler "retard" */
} }
/* ----- Badge affiché sur la ligne event quand délai > 0 ----- */
.tt-event__delay-badge {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-1);
margin-top: calc(var(--rg-espace-1) / 2);
padding: calc(var(--rg-espace-1) / 2) var(--rg-espace-2);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: 0;
text-transform: uppercase;
color: var(--rg-metier-orange-fonce);
background: color-mix(in srgb, var(--rg-piste-orange) 12%, transparent);
border: var(--rg-trait-1) solid color-mix(in srgb, var(--rg-piste-orange) 35%, transparent);
border-radius: var(--r-pill);
white-space: nowrap;
width: fit-content;
}
[data-theme="dark"] .tt-event__delay-badge {
color: var(--rg-metier-orange-clair);
background: color-mix(in srgb, var(--rg-piste-orange) 16%, transparent);
}
.tt-event__delay-badge svg {
width: 10px;
height: 10px;
}
/* Variante "avance" (delay négatif) en vert */
.tt-event__delay-badge--ahead {
color: var(--rg-metier-vert-fonce);
background: color-mix(in srgb, var(--rg-piste-vert) 12%, transparent);
border-color: color-mix(in srgb, var(--rg-piste-vert) 35%, transparent);
}
[data-theme="dark"] .tt-event__delay-badge--ahead {
color: var(--rg-metier-vert-clair);
background: color-mix(in srgb, var(--rg-piste-vert) 16%, transparent);
}
/* ----- Popup délai ----- */
.delay-recap {
margin: 0;
padding: var(--rg-espace-3) var(--rg-espace-4);
background: var(--surface-2);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--r-md);
font-size: var(--fs-2xs);
color: var(--text-soft);
}
.delay-recap b { color: var(--text); font-weight: var(--rg-graisse-gras); }
.delay-quicks {
display: flex;
flex-wrap: wrap;
gap: var(--rg-espace-2);
margin-bottom: var(--rg-espace-3);
}
.delay-quick {
padding: var(--rg-espace-2) var(--rg-espace-4);
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-semi);
border-radius: var(--r-pill);
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
color: var(--text);
cursor: pointer;
transition:
background var(--t-base) var(--ease),
border-color var(--t-base) var(--ease);
}
@media (hover: hover) { .delay-quick:hover {
background: var(--surface-2);
border-color: var(--border-2);
} }
.delay-quick.is-selected {
background: var(--rg-texte-principal);
color: var(--rg-texte-inverse);
border-color: var(--rg-texte-principal);
}
.delay-custom {
position: relative;
display: flex;
align-items: center;
}
.delay-custom .form-input {
padding-right: var(--rg-espace-7);
font-variant-numeric: tabular-nums;
}
.delay-custom__unit {
position: absolute;
right: 14px;
color: var(--text-muted);
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-semi);
pointer-events: none;
}
.delay-hint {
margin: var(--rg-espace-2) calc(var(--rg-espace-1) / 2) 0;
font-size: var(--fs-3xs);
color: var(--text-muted);
font-style: italic;
}
/* Cascade checkbox custom */
.delay-cascade {
display: flex;
align-items: flex-start;
gap: var(--rg-espace-3);
padding: var(--rg-espace-3);
border-radius: var(--r-md);
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
cursor: pointer;
transition: border-color var(--t-base) var(--ease);
}
@media (hover: hover) { .delay-cascade:hover { border-color: var(--border-2); } }
.delay-cascade input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.delay-cascade__box {
width: 22px;
height: 22px;
border-radius: var(--rg-rayon-0);
background: var(--surface);
border: var(--rg-trait-2) solid var(--border-2);
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: transparent;
transition:
background var(--t-base) var(--ease),
border-color var(--t-base) var(--ease),
color var(--t-base) var(--ease);
}
.delay-cascade__box svg {
width: 14px;
height: 14px;
}
.delay-cascade input[type="checkbox"]:checked + .delay-cascade__box {
background: var(--rg-texte-principal);
border-color: var(--rg-texte-principal);
color: var(--rg-texte-inverse);
}
.delay-cascade__text {
display: flex;
flex-direction: column;
gap: var(--rg-espace-1);
font-size: var(--fs-2xs);
}
.delay-cascade__text strong { color: var(--text); font-weight: var(--rg-graisse-semi); }
.delay-cascade__text span { color: var(--text-muted); }
/* ==========================================================
CUSTOM TIME PICKER (popup)
Bouton qui affiche l'heure, ouvre un popup à 2 colonnes
scrollables (heures + minutes), barre fuchsia centrée pour
la sélection courante.
========================================================== */
/* ----- Overlay & panel ----- */
/* Heure et duree : deux champs qu'on tape, sans pas impose. */
.hm { display: flex; align-items: center; gap: var(--rg-espace-2); }
.hm__n {
width: 56px;
text-align: center;
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
}
.hm__sep { font-family: var(--font-mono); color: var(--text-muted); }
.hm__u { font-size: var(--fs-3xs); color: var(--text-faint); }
/* ----- Barre de recherche dans la modal event ----- */
.ev-search {
position: relative;
display: flex;
align-items: center;
}
.ev-search__icon {
position: absolute;
left: 12px;
width: 18px;
height: 18px;
color: var(--text-muted);
pointer-events: none;
}
.ev-search__input {
padding-left: var(--rg-espace-7) !important;
padding-right: var(--rg-espace-6) !important;
}
.ev-search__clear {
position: absolute;
right: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: var(--rg-rayon-0);
background: var(--surface-2);
border: var(--rg-trait-1) solid var(--border);
color: var(--text-soft);
cursor: pointer;
transition:
background var(--t-base) var(--ease),
color var(--t-base) var(--ease);
}
@media (hover: hover) { .ev-search__clear:hover {
background: var(--surface-3);
color: var(--text);
} }
.ev-search__clear svg {
width: 14px;
height: 14px;
}
@media (hover: hover) { .task-option:hover {
background: var(--surface-2);
border-color: var(--border-2);
transform: translateY(-1px);
} }
.task-option.is-selected {
border-color: var(--accent);
background: var(--accent-soft);
}
.task-option__dot {
width: 10px;
height: 10px;
border-radius: var(--rg-rayon-0);
flex-shrink: 0;
}
/* ---------------------------------------------------------
12.11b SÉLECTEUR DE RÔLES TIMETABLE (cartes avec icône)
---------------------------------------------------------
Affiché dans #evJobChips à la place des vieux chips.
Multi-select. Quand "team-manager" est coché, un picker
secondaire (.tm-picker) apparaît pour choisir qui.
--------------------------------------------------------- */
.role-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--rg-espace-2);
}
.role-card {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--rg-espace-2);
padding: var(--rg-espace-3) var(--rg-espace-2);
border-radius: var(--r-md);
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
color: var(--text);
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-moyen);
cursor: pointer;
transition:
background var(--t-base) var(--ease),
border-color var(--t-base) var(--ease),
transform var(--t-base) var(--ease);
}
@media (hover: hover) { .role-card:hover {
background: var(--surface-2);
border-color: var(--border-2);
transform: translateY(-1px);
} }
.role-card.is-selected {
border-color: var(--accent);
background: var(--accent-soft);
color: var(--accent);
font-weight: var(--rg-graisse-semi);
}
.role-card__icon {
width: 36px;
height: 36px;
border-radius: var(--rg-rayon-0);
flex-shrink: 0;
}
.role-card__label {
line-height: var(--rg-interligne-court);
text-align: center;
}
/* ----- Team-manager person picker (apparaît en-dessous) ----- */
.tm-picker {
margin-top: var(--rg-espace-3);
padding: var(--rg-espace-3);
border-radius: var(--r-md);
background: var(--surface);
border: var(--rg-trait-1) dashed var(--border-2);
}
.tm-picker__label {
margin: 0 0 var(--rg-espace-2) 0;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--text-muted);
}
.tm-picker__empty {
margin: 0;
font-size: var(--fs-2xs);
color: var(--text-muted);
}
.tm-picker__empty a {
color: var(--accent);
}
.tm-picker__list {
display: flex;
flex-wrap: wrap;
gap: var(--rg-espace-2);
}
.tm-chip {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
padding: var(--rg-espace-1) var(--rg-espace-3) var(--rg-espace-1) var(--rg-espace-1);
border-radius: var(--r-pill);
background: var(--surface-2);
border: var(--rg-trait-1) solid var(--border);
color: var(--text);
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-moyen);
cursor: pointer;
transition:
background var(--t-base) var(--ease),
border-color var(--t-base) var(--ease);
}
@media (hover: hover) { .tm-chip:hover {
border-color: var(--border-2);
background: var(--surface-3);
} }
.tm-chip.is-selected {
border-color: var(--accent);
background: var(--accent-soft);
color: var(--accent);
font-weight: var(--rg-graisse-semi);
}
.tm-chip__avatar {
width: 24px;
height: 24px;
border-radius: var(--rg-rayon-0);
background-color: var(--surface-3);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-gras);
color: var(--text-soft);
flex-shrink: 0;
overflow: hidden; /* pour cropper l'![]()
interne */
}
.tm-chip__name {
white-space: nowrap;
}
/* ---------------------------------------------------------
12.12 SÉLECTEUR DE MÉTIERS (chips toggleables, legacy)
--------------------------------------------------------- */
.job-chips {
display: flex;
flex-wrap: wrap;
gap: var(--rg-espace-2);
}
.job-chip {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
padding: var(--rg-espace-2) var(--rg-espace-3);
border-radius: var(--r-pill);
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
color: var(--text-soft);
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-moyen);
cursor: pointer;
transition:
background var(--t-base) var(--ease),
border-color var(--t-base) var(--ease),
color var(--t-base) var(--ease);
}
@media (hover: hover) { .job-chip:hover {
background: var(--surface-2);
border-color: var(--border-2);
color: var(--text);
} }
.job-chip.is-selected {
background: var(--rg-texte-principal);
border-color: var(--rg-texte-principal);
color: var(--rg-texte-inverse);
}
.job-chip__check {
width: 14px;
height: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity var(--t-base) var(--ease);
}
.job-chip.is-selected .job-chip__check {
opacity: 1;
}
.job-chip__check svg {
width: 100%;
height: 100%;
}
/* ---------------------------------------------------------
12.13 VUE LISTE (grille de cartes preview)
---------------------------------------------------------
Pattern réutilisable pour toutes les pages "library" :
- cards-grid / tt-cards-grid : grille auto-fill responsive
- tt-preview / crew-preview : carte d'un item
- create-card / tt-create-card : carte spéciale "Create new" (dashed)
--------------------------------------------------------- */
.tt-cards-grid,
.cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--gap);
}
/* Variant crew : cartes plus compactes pour afficher 4/ligne
sur un écran desktop standard. */
.cards-grid--crew {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
/* Carte preview d'un week-end
---------------------------
Structure : .tt-preview (article) > .tt-preview__link (a, contenu)
+ .tt-preview__actions (boutons edit/delete)
Les actions sont en position absolue PAR-DESSUS le link pour ne
pas déclencher la navigation au clic.
*/
.tt-preview {
position: relative;
min-height: 240px;
border-radius: var(--r-xl);
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
overflow: hidden;
box-shadow: none;
transition:
transform var(--t-base) var(--ease),
border-color var(--t-base) var(--ease),
box-shadow var(--t-slow) var(--ease);
opacity: 0;
transform: translateY(16px);
animation: widgetIn calc(var(--rg-duree) * 3.3) var(--ease-out) both;
}
/* Le lien interne porte le contenu cliquable de la carte */
.tt-preview__link {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
color: inherit;
text-decoration: none;
/* Pas de padding ici : la cover est edge-to-edge ; le padding est
mis sur .tt-preview__content */
}
/* ---- COVER du circuit en haut de la carte ----
- Hauteur fixe pour homogénéité visuelle
- Background-image fournie inline en JS (cover du place)
- Fallback : variante --fallback avec gradient + country code
*/
.tt-preview__cover {
position: relative;
width: 100%;
height: 140px;
background-size: cover;
background-position: center;
background-color: var(--bg-3);
flex-shrink: 0;
overflow: hidden;
}
.tt-preview__cover--fallback {
background: var(--brand-navy);
}
/* Country code énorme en watermark (fallback uniquement) */
.tt-preview__cover-mark {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: var(--rg-taille-display-m);
font-weight: var(--rg-graisse-extra);
letter-spacing: 0;
color: color-mix(in srgb, var(--rg-neutre-blanc) 12%, transparent);
pointer-events: none;
text-transform: uppercase;
}
/* Pill catégorie en surimpression sur la cover (top-left) */
.tt-preview__cover-chip {
position: absolute;
top: 12px;
left: 12px;
display: inline-flex;
align-items: center;
padding: var(--rg-espace-1) var(--rg-espace-3);
border-radius: var(--r-pill);
background: color-mix(in srgb, var(--rg-marine-5) 78%, transparent);
color: var(--brand-white);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
font-size: var(--fs-3xs);
text-transform: uppercase;
z-index: 1;
}
/* Léger dégradé sombre en bas de la cover pour transition propre
vers le contenu (et meilleure lisibilité si on overlay du texte) */
.tt-preview__cover-shade {
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--rg-marine-5) 35%, transparent);
pointer-events: none;
}
/* ---- CONTENT : tout ce qui est sous la cover ---- */
.tt-preview__content {
display: flex;
flex-direction: column;
gap: var(--gap-sm);
padding: var(--gap-md);
flex: 1;
}
.tt-preview:nth-child(1) { animation-delay: 50ms; }
.tt-preview:nth-child(2) { animation-delay: 100ms; }
.tt-preview:nth-child(3) { animation-delay: 150ms; }
.tt-preview:nth-child(4) { animation-delay: 200ms; }
.tt-preview:nth-child(5) { animation-delay: 250ms; }
.tt-preview:nth-child(6) { animation-delay: 300ms; }
@media (hover: hover) { .tt-preview:hover {
transform: translateY(-4px);
border-color: var(--accent);
box-shadow: none;
} }
/* Halo rose subtil au survol pour donner du dynamisme */
.tt-preview::before {
content: "";
position: absolute;
top: -80px;
right: -100px;
width: 240px;
height: 240px;
border-radius: var(--rg-rayon-0);
background: none;
opacity: 0;
transition: opacity var(--t-slow) var(--ease);
pointer-events: none;
}
@media (hover: hover) { .tt-preview:hover::before {
opacity: 0.45;
} }
.tt-preview__link,
.tt-preview__actions {
position: relative;
z-index: 1;
}
/* Les actions passent au-dessus du link */
.tt-preview__actions {
position: absolute;
top: 14px;
right: 14px;
display: flex;
gap: var(--rg-espace-2);
z-index: 2;
}
.tt-preview__action {
width: 32px;
height: 32px;
border-radius: var(--r-sm);
background: var(--surface-2);
border: var(--rg-trait-1) solid var(--border);
color: var(--text-muted);
display: inline-flex;
align-items: center;
justify-content: center;
transition:
background var(--t-base) var(--ease),
color var(--t-base) var(--ease),
border-color var(--t-base) var(--ease),
transform var(--t-base) var(--ease);
}
@media (hover: hover) { .tt-preview__action:hover {
background: var(--surface-3);
color: var(--text);
border-color: var(--border-2);
transform: translateY(-1px);
} }
@media (hover: hover) { .tt-preview__action--danger:hover {
background: var(--accent-soft);
color: var(--accent);
border-color: color-mix(in srgb, var(--accent) 35%, transparent);
} }
.tt-preview__action svg {
width: 14px;
height: 14px;
}
.tt-preview__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--gap-sm);
/* On laisse de la place pour les actions absolues à droite */
padding-right: var(--rg-espace-9);
}
/* Ligne catégorie + lieu inline dans le body */
.tt-preview__cat-line {
display: flex;
align-items: center;
gap: var(--rg-espace-2);
flex-wrap: wrap;
font-size: var(--fs-sm);
color: var(--text-soft);
margin: 0;
}
.tt-preview__cat-line .tt-preview__cat {
flex-shrink: 0;
}
.tt-preview__logo {
width: 48px;
height: 48px;
border-radius: var(--r-md);
background: var(--surface-2);
border: var(--rg-trait-1) solid var(--border);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.tt-preview__logo img {
max-width: 70%;
max-height: 70%;
}
:root[data-theme="light"] .tt-preview__logo img {
filter: invert(1) hue-rotate(180deg);
}
.tt-preview__logo-text {
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
color: var(--accent);
}
.tt-preview__cat {
display: inline-flex;
align-items: center;
padding: var(--rg-espace-1) var(--rg-espace-2);
border-radius: var(--r-pill);
background: var(--accent-soft);
color: var(--accent);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
font-size: var(--fs-3xs);
text-transform: uppercase;
}
.tt-preview__body {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--rg-espace-1);
}
.tt-preview__name {
font-size: var(--fs-xl);
font-weight: var(--rg-graisse-semi);
color: var(--text);
margin: 0;
letter-spacing: var(--rg-display-l-espacement);
line-height: var(--rg-interligne-court);
/* 2 lignes max */
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.tt-preview__location {
font-size: var(--fs-sm);
color: var(--text-soft);
margin: 0;
}
.tt-preview__dates {
font-size: var(--fs-xs);
color: var(--text-muted);
margin: 0;
}
.tt-preview__foot {
display: flex;
align-items: center;
gap: var(--rg-espace-3);
padding-top: var(--gap-xs);
border-top: var(--rg-trait-1) solid var(--border);
font-size: var(--fs-2xs);
color: var(--text-muted);
}
.tt-preview__foot-item {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
}
.tt-preview__foot-item svg {
width: 14px;
height: 14px;
}
.tt-preview__arrow {
margin-left: auto;
color: var(--text-muted);
transition:
color var(--t-base) var(--ease),
transform var(--t-base) var(--ease);
}
.tt-preview__arrow svg {
width: 16px;
height: 16px;
}
@media (hover: hover) { .tt-preview:hover .tt-preview__arrow {
color: var(--accent);
transform: translateX(4px);
} }
/* Carte spéciale "Create new" : aspect différent (dashed) */
.tt-create-card,
.create-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--rg-espace-2);
min-height: 240px;
padding: var(--gap-md);
border-radius: var(--r-xl);
background: transparent;
border: var(--rg-trait-3) dashed var(--border-2);
color: var(--text-soft);
text-align: center;
cursor: pointer;
transition:
background var(--t-base) var(--ease),
border-color var(--t-base) var(--ease),
color var(--t-base) var(--ease),
transform var(--t-base) var(--ease);
opacity: 0;
transform: translateY(16px);
animation: widgetIn calc(var(--rg-duree) * 3.3) var(--ease-out) both;
}
@media (hover: hover) { .tt-create-card:hover,
.create-card:hover {
background: var(--accent-soft);
border-color: var(--accent);
border-style: solid;
color: var(--accent);
transform: translateY(-4px);
} }
.tt-create-card__icon,
.create-card__icon {
width: 56px;
height: 56px;
border-radius: var(--r-pill);
background: var(--surface);
color: var(--accent);
display: inline-flex;
align-items: center;
justify-content: center;
border: var(--rg-trait-1) solid var(--border);
transition:
background var(--t-base) var(--ease),
color var(--t-base) var(--ease);
}
@media (hover: hover) { .tt-create-card:hover .tt-create-card__icon,
.create-card:hover .create-card__icon {
background: var(--accent);
color: var(--brand-white);
border-color: var(--accent);
box-shadow: none;
} }
.tt-create-card__icon svg,
.create-card__icon svg {
width: 24px;
height: 24px;
}
.tt-create-card__title,
.create-card__title {
font-size: var(--fs-md);
font-weight: var(--rg-graisse-semi);
letter-spacing: var(--rg-display-l-espacement);
margin: 0;
}
.tt-create-card__text,
.create-card__text {
font-size: var(--fs-xs);
margin: 0;
color: var(--text-muted);
max-width: 200px;
}
/* ---------------------------------------------------------
12.14 BOUTON RETOUR DANS LA TOPBAR (vue détail)
--------------------------------------------------------- */
.topbar__back {
width: 38px;
height: 38px;
border-radius: var(--r-pill);
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
color: var(--text-soft);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition:
background var(--t-base) var(--ease),
color var(--t-base) var(--ease),
transform var(--t-base) var(--ease);
}
.topbar__back[hidden] {
display: none;
}
@media (hover: hover) { .topbar__back:hover {
background: var(--surface-2);
color: var(--text);
transform: translateX(-2px);
} }
.topbar__back svg {
width: 18px;
height: 18px;
}
/* ---------------------------------------------------------
12.15 HEADER DE LA VUE DÉTAIL (au-dessus des days)
--------------------------------------------------------- */
.tt-detail-header {
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--r-xl);
padding: var(--gap-md);
box-shadow: none;
margin-bottom: var(--gap-lg);
display: flex;
align-items: center;
gap: var(--gap);
opacity: 0;
transform: translateY(16px);
animation: widgetIn calc(var(--rg-duree) * 3.3) var(--ease-out) both;
animation-delay: 60ms;
}
/* ---------------------------------------------------------
12.16 NOM DU DAY (dans la vue détail)
--------------------------------------------------------- */
.tt-day__name {
font-size: var(--fs-sm);
font-weight: var(--rg-graisse-semi);
color: var(--text);
letter-spacing: var(--rg-display-l-espacement);
}
.tt-day__name-sub {
font-size: var(--fs-2xs);
color: var(--text-muted);
font-weight: var(--rg-graisse-regulier);
margin-left: var(--rg-espace-2);
}
/* ---------------------------------------------------------
12.17 INPUTS DES NOMS DE DAYS (dans le modal Create)
--------------------------------------------------------- */
.day-inputs {
display: flex;
flex-direction: column;
gap: var(--rg-espace-2);
}
/* Le jour tient sur deux lignes : son nom, puis ce qu'on en fait.
Les quatre choix plus l'heure ne rentrent pas a cote du nom. */
.day-inputs__row {
display: grid;
grid-template-columns: minmax(90px, 110px) 1fr;
gap: var(--rg-espace-2) var(--gap-sm);
align-items: center;
padding-bottom: var(--rg-espace-2);
border-bottom: var(--rg-trait-1) solid var(--border);
}
.day-inputs__row:last-child { border-bottom: 0; padding-bottom: 0; }
.day-inputs__label { grid-row: span 2; align-self: center; }
.day-inputs__trajet { grid-column: 2; }
/* Sur place, demi-journee de route, journee entiere. */
.day-inputs__trajet { display: flex; align-items: center; flex-wrap: wrap; gap: var(--rg-espace-1); }
.day-inputs__quand {
margin-left: var(--rg-espace-2);
font-size: var(--fs-3xs);
color: var(--text-faint);
}
.day-inputs__heure {
width: 64px;
height: 30px;
padding: 0 var(--rg-espace-2);
margin-left: var(--rg-espace-1);
text-align: center;
font-family: var(--font-mono);
font-size: var(--fs-3xs);
font-variant-numeric: tabular-nums;
}
/* LA SUITE D'UN EVENEMENT */
/* Le compteur d'etapes, a gauche des boutons du pied. */
.evf__pas {
margin-right: auto;
padding-right: var(--rg-espace-3);
font-family: var(--font-mono);
font-size: var(--fs-2xs);
color: var(--text-faint);
}
.suite__choix { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rg-espace-2); margin-top: var(--rg-espace-3); }
.suite__ou { font-size: var(--fs-3xs); color: var(--text-faint); }
.suite__autre {
padding: var(--rg-espace-2) var(--rg-espace-3);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--rg-rayon-0);
background: transparent;
color: var(--text-soft);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
cursor: pointer;
transition: border-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
@media (hover: hover) { .suite__autre:hover { border-color: var(--accent); color: var(--accent); } }
.suite__tete {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--rg-espace-3);
margin-bottom: var(--rg-espace-1);
}
.suite__titre {
display: flex;
flex-direction: column;
gap: var(--rg-trait-1);
font-size: var(--fs-sm);
font-weight: var(--rg-graisse-gras);
color: var(--text);
}
.suite__titre em {
font-style: normal;
font-weight: var(--rg-graisse-regulier);
font-size: var(--fs-3xs);
color: var(--text-faint);
}
.suite__tout {
flex: 0 0 auto;
background: none;
border: 0;
padding: 0;
color: var(--accent);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
cursor: pointer;
text-decoration: underline;
}
.suite__compte {
margin: calc(var(--rg-espace-1) / 2) 0 0;
font-size: var(--fs-3xs);
color: var(--text-muted);
}
.suite__lignes { display: flex; flex-direction: column; gap: var(--rg-espace-2); }
.suite__ligne {
display: grid;
grid-template-columns: auto 10px 1fr 88px 62px auto;
align-items: center;
gap: var(--rg-espace-2) var(--rg-espace-3);
padding: var(--rg-espace-2) var(--rg-espace-3);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--r-sm);
}
/* Qui est concerne, sur sa propre ligne : six metiers ne tiennent pas a cote. */
.suite__qui {
grid-column: 3 / -1;
display: flex;
flex-wrap: wrap;
gap: var(--rg-espace-1);
}
.suite__role {
padding: var(--rg-espace-1) var(--rg-espace-2);
border: var(--rg-trait-1) solid var(--border);
border-left-width: var(--rg-trait-4);
border-radius: var(--rg-rayon-0);
background: transparent;
color: var(--text-faint);
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-semi);
cursor: pointer;
transition: color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
@media (hover: hover) { .suite__role:hover { color: var(--text); } }
.suite__role.is-on {
background: var(--mc, var(--accent));
border-color: var(--mc, var(--accent));
color: var(--rg-neutre-blanc);
}
.suite__ligne.is-off { opacity: 0.42; }
.suite__pastille { width: 10px; height: 10px; border-radius: var(--rg-rayon-0); }
.suite__nom { font-size: var(--fs-sm); color: var(--text); }
.suite__h, .suite__d {
height: 34px;
padding: 0 var(--rg-espace-2);
text-align: center;
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
}
.suite__unite { font-size: var(--fs-3xs); color: var(--text-faint); }
@media (max-width: 720px) {
.suite__ligne { grid-template-columns: auto 10px 1fr; row-gap: var(--rg-espace-2); }
.suite__h { grid-column: 3; }
.suite__d { grid-column: 3; }
.suite__qui { grid-column: 1 / -1; }
}
/* Ecrire sa propre tache : la proposition ferme la liste de recherche. */
.evf__task--libre { border-style: dashed; }
.evf__task--libre i { background: var(--text-faint); }
.form-label__min {
font-style: normal;
text-transform: none;
letter-spacing: 0;
color: var(--text-faint);
margin-left: var(--rg-espace-2);
}
@media (max-width: 720px) {
.day-inputs__row { grid-template-columns: 1fr; }
.day-inputs__label { grid-row: auto; }
.day-inputs__trajet { grid-column: 1; justify-content: flex-start; }
}
.day-inputs__label {
display: flex;
flex-direction: column;
gap: calc(var(--rg-espace-1) / 2);
font-size: var(--fs-2xs);
color: var(--text-soft);
}
.day-inputs__label strong {
color: var(--text);
font-weight: var(--rg-graisse-semi);
font-size: var(--fs-xs);
letter-spacing: 0;
text-transform: uppercase;
}
.day-inputs__input {
height: 40px;
padding: 0 var(--rg-espace-3);
border-radius: var(--r-sm);
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
color: var(--text);
font-size: var(--fs-sm);
font-family: var(--rg-police-texte);
outline: none;
transition:
border-color var(--t-base) var(--ease),
background var(--t-base) var(--ease);
}
.day-inputs__input:focus {
border-color: var(--accent);
background: var(--surface-2);
}
/* ---------------------------------------------------------
12.19 TIME PICKER (linéaire, horizontal, drag-to-scroll)
---------------------------------------------------------
Sélecteur d'heure composé de deux strips horizontaux :
- Hours (00-23)
- Minutes (00-59)
Centre = valeur sélectionnée (marquée par un bandeau accent).
Contrôles : drag souris/touch, scroll natif, click sur valeur.
Réutilisable partout où l'on saisit une heure.
--------------------------------------------------------- */
.time-picker-host {
width: 100%;
}
.time-picker {
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--r-lg);
padding: var(--gap);
display: flex;
flex-direction: column;
gap: var(--gap-sm);
}
/* Display "HH : MM" en gros au-dessus des strips */
.time-picker__display {
text-align: center;
font-size: var(--rg-taille-h1);
font-weight: var(--rg-graisse-gras);
color: var(--text);
font-variant-numeric: tabular-nums;
letter-spacing: var(--rg-chiffre-xl-espacement);
line-height: var(--rg-interligne-plein);
padding: var(--rg-espace-1) 0 var(--gap-2xs);
}
.time-picker__display-sep {
color: var(--accent);
margin: 0 var(--rg-espace-2);
}
/* Une rangée = label + strip */
.time-strip-row {
display: flex;
align-items: center;
gap: var(--gap-sm);
}
.time-strip-label {
width: 64px;
flex-shrink: 0;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--text-muted);
}
/* Conteneur du strip : abrite le marker en absolute */
.time-strip-wrap {
position: relative;
flex: 1;
min-width: 0;
height: 44px;
}
/* Bandeau accent au centre du strip */
.time-strip__marker {
position: absolute;
top: 0;
left: 50%;
height: 100%;
width: 44px;
transform: translateX(-50%);
background: var(--accent-soft);
border: var(--rg-trait-1) solid color-mix(in srgb, var(--accent) 35%, transparent);
border-radius: var(--r-sm);
pointer-events: none;
z-index: 0;
}
/* Strip scrollable horizontalement */
.time-strip {
position: relative;
z-index: 1;
height: 100%;
overflow-x: scroll;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
cursor: grab;
user-select: none;
/* Fade sur les côtés via mask gradient */
mask-image: none;
-webkit-mask-image: none;
}
.time-strip::-webkit-scrollbar {
display: none;
}
/* Pendant le drag : curseur "main fermée", on coupe scroll-snap
pour éviter les saccades */
.time-strip.is-dragging {
cursor: grabbing;
scroll-snap-type: none;
scroll-behavior: auto;
}
.time-strip__items {
display: flex;
height: 100%;
/* Padding latéraux pour que le premier et le dernier item puissent
être centrés sous le marker (50% du wrap - moitié item) */
padding: 0 calc(50% - var(--rg-espace-5));
}
.time-strip__item {
scroll-snap-align: center;
scroll-snap-stop: always;
flex: 0 0 44px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--rg-taille-texte-l);
font-weight: var(--rg-graisse-moyen);
font-variant-numeric: tabular-nums;
color: var(--text-muted);
background: transparent;
border: none;
cursor: pointer;
font-family: var(--rg-police-texte);
user-select: none;
transition:
color var(--t-base) var(--ease),
font-size var(--t-base) var(--ease);
}
.time-strip__item.is-selected {
color: var(--text);
font-weight: var(--rg-graisse-gras);
font-size: var(--rg-taille-h3);
}
/* ---------------------------------------------------------
12.20 RESPONSIVE TIMETABLE
--------------------------------------------------------- */
@media (max-width: 980px) {
.tt-event {
grid-template-columns: 60px 160px 1fr auto;
}
}
@media (max-width: 720px) {
.page-hero__row {
flex-direction: column;
align-items: stretch;
}
.btn-primary {
align-self: flex-start;
}
.tt-card__head,
.tt-detail-header {
flex-wrap: wrap;
}
.tt-event {
grid-template-columns: 1fr;
gap: var(--rg-espace-2);
padding: var(--gap-xs) var(--gap-sm);
}
.tt-event__actions {
opacity: 1;
justify-self: flex-end;
}
.form-grid {
grid-template-columns: 1fr;
}
.category-grid {
grid-template-columns: repeat(2, 1fr);
}
.task-grid {
grid-template-columns: repeat(2, 1fr);
}
.day-inputs__row {
grid-template-columns: 1fr;
gap: var(--rg-espace-1);
}
}
/* ==========================================================
13. PAGE CREW
----------------------------------------------------------
Library de cartes membres + modal de création/édition avec
photo, identité, rôle, statut permanent/temporary.
========================================================== */
/* ---------------------------------------------------------
13.1 CARTE PREVIEW D'UN MEMBRE CREW
--------------------------------------------------------- */
.crew-preview {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--gap-xs);
padding: var(--gap) var(--gap-sm);
min-height: 250px;
border-radius: var(--r-xl);
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
overflow: hidden;
box-shadow: none;
cursor: pointer;
transition:
transform var(--t-base) var(--ease),
border-color var(--t-base) var(--ease),
box-shadow var(--t-slow) var(--ease);
opacity: 0;
transform: translateY(16px);
animation: widgetIn calc(var(--rg-duree) * 3.3) var(--ease-out) both;
}
/* Variant Team Principal, distinction subtile mais "haut de gamme" :
bordure légèrement teintée accent + shadow renforcée, comme si
la carte était posée un cran au-dessus des autres. */
.crew-preview--principal {
border-color: color-mix(in srgb, var(--rg-rose-5) 35%, transparent);
box-shadow:
none;
}
@media (hover: hover) { .crew-preview--principal:hover {
border-color: var(--accent);
box-shadow:
none;
} }
.crew-preview:nth-child(1) { animation-delay: 50ms; }
.crew-preview:nth-child(2) { animation-delay: 100ms; }
.crew-preview:nth-child(3) { animation-delay: 150ms; }
.crew-preview:nth-child(4) { animation-delay: 200ms; }
.crew-preview:nth-child(5) { animation-delay: 250ms; }
.crew-preview:nth-child(6) { animation-delay: 300ms; }
@media (hover: hover) { .crew-preview:hover {
transform: translateY(-4px);
border-color: var(--accent);
box-shadow: none;
} }
/* Halo rose subtil */
.crew-preview::before {
content: "";
position: absolute;
top: -60px;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 200px;
border-radius: var(--rg-rayon-0);
background: none;
opacity: 0;
transition: opacity var(--t-slow) var(--ease);
pointer-events: none;
}
@media (hover: hover) { .crew-preview:hover::before {
opacity: 0.3;
} }
.crew-preview > * {
position: relative;
z-index: 1;
}
/* Photo (ou fallback avec initiales) */
.crew-preview__photo {
width: 80px;
height: 80px;
border-radius: var(--rg-rayon-0);
background-color: var(--surface-2);
border: var(--rg-trait-3) solid var(--border);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--brand-white);
font-size: var(--rg-taille-h2);
margin-top: var(--rg-espace-2); /* léger espace sous la couronne quand principal */
overflow: hidden; /* pour cropper l'![]()
interne */
font-weight: var(--rg-graisse-gras);
letter-spacing: 0;
margin-top: var(--gap-2xs);
flex-shrink: 0;
}
/* Variantes de gradient pour les avatars sans photo */
.crew-preview__photo--pink {
background: var(--accent);
box-shadow: none;
border-color: transparent;
}
.crew-preview__photo--navy {
background: var(--brand-navy);
border-color: transparent;
}
.crew-preview__photo--mix {
background: var(--brand-navy);
border-color: transparent;
}
:root[data-theme="light"] .crew-preview__photo--navy {
background: var(--brand-navy);
}
.crew-preview__name {
font-size: var(--fs-lg);
font-weight: var(--rg-graisse-semi);
color: var(--text);
margin: 0;
letter-spacing: var(--rg-display-l-espacement);
}
.crew-preview__role {
font-size: var(--fs-sm);
color: var(--text-soft);
margin: 0;
}
.crew-preview__status {
margin-top: auto;
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
padding: var(--rg-espace-1) var(--rg-espace-3);
border-radius: var(--r-pill);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
}
.crew-preview__status--permanent {
background: var(--surface-2);
color: var(--text-soft);
border: var(--rg-trait-1) solid var(--border);
}
/* Chips disciplines sur la carte preview */
.crew-preview__disciplines {
display: flex;
flex-wrap: wrap;
gap: var(--rg-espace-1);
justify-content: center;
margin: calc(var(--rg-espace-1) / 2) 0;
max-width: 100%;
}
.crew-preview__discipline {
display: inline-flex;
align-items: center;
padding: calc(var(--rg-espace-1) / 2) var(--rg-espace-2);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
letter-spacing: 0;
color: var(--accent);
background: color-mix(in srgb, var(--rg-rose-5) 8%, transparent);
border: var(--rg-trait-1) solid color-mix(in srgb, var(--rg-rose-5) 18%, transparent);
border-radius: var(--r-pill);
white-space: nowrap;
}
/* Chips dans la modal, multi-select cliquables */
.discipline-chips {
display: flex;
flex-wrap: wrap;
gap: var(--rg-espace-2);
}
.discipline-chip {
display: inline-flex;
align-items: center;
padding: var(--rg-espace-2) var(--rg-espace-4);
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-moyen);
border-radius: var(--r-pill);
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
color: var(--text);
cursor: pointer;
transition:
background var(--t-base) var(--ease),
border-color var(--t-base) var(--ease),
color var(--t-base) var(--ease);
}
@media (hover: hover) { .discipline-chip:hover {
background: var(--surface-2);
border-color: var(--border-2);
} }
.discipline-chip.is-selected {
background: var(--accent-soft);
border-color: var(--accent);
color: var(--accent);
font-weight: var(--rg-graisse-semi);
}
.crew-preview__status--permanent::before {
content: "";
width: 6px;
height: 6px;
border-radius: var(--rg-rayon-0);
background: var(--rg-piste-vert);
box-shadow: none;
}
.crew-preview__status--temporary {
background: color-mix(in srgb, var(--rg-piste-orange) 14%, transparent);
color: var(--rg-piste-orange);
border: var(--rg-trait-1) solid color-mix(in srgb, var(--rg-piste-orange) 30%, transparent);
}
.crew-preview__status--temporary::before {
content: "";
width: 6px;
height: 6px;
border-radius: var(--rg-rayon-0);
background: var(--rg-piste-orange);
box-shadow: none;
}
/* Actions edit / delete sur la carte (top-right) */
.crew-preview__actions {
position: absolute;
top: 14px;
right: 14px;
display: flex;
gap: var(--rg-espace-2);
z-index: 2;
}
.crew-preview__action {
width: 32px;
height: 32px;
border-radius: var(--r-sm);
background: var(--surface-2);
border: var(--rg-trait-1) solid var(--border);
color: var(--text-muted);
display: inline-flex;
align-items: center;
justify-content: center;
transition:
background var(--t-base) var(--ease),
color var(--t-base) var(--ease),
border-color var(--t-base) var(--ease),
transform var(--t-base) var(--ease);
}
@media (hover: hover) { .crew-preview__action:hover {
background: var(--surface-3);
color: var(--text);
border-color: var(--border-2);
transform: translateY(-1px);
} }
@media (hover: hover) { .crew-preview__action--danger:hover {
background: var(--accent-soft);
color: var(--accent);
border-color: color-mix(in srgb, var(--accent) 35%, transparent);
} }
.crew-preview__action svg {
width: 14px;
height: 14px;
}
/* ---------------------------------------------------------
13.2 UPLOAD PHOTO (dans le modal)
--------------------------------------------------------- */
.crew-photo-upload {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--rg-espace-2);
}
.crew-photo-upload__btn {
width: 112px;
height: 112px;
border-radius: var(--rg-rayon-0);
background: var(--surface-2);
background-size: cover;
background-position: center;
border: var(--rg-trait-3) dashed var(--border-2);
color: var(--text-muted);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
overflow: hidden;
transition:
border-color var(--t-base) var(--ease),
background-color var(--t-base) var(--ease),
color var(--t-base) var(--ease),
transform var(--t-base) var(--ease);
}
@media (hover: hover) { .crew-photo-upload__btn:hover {
border-color: var(--accent);
background-color: var(--accent-soft);
color: var(--accent);
} }
.crew-photo-upload__btn--has-photo {
border-style: solid;
border-color: var(--border);
/* Quand une photo est présente, le bouton devient un éditeur :
le curseur indique qu'on peut grab pour repositionner. */
cursor: grab;
}
@media (hover: hover) { .crew-photo-upload__btn--has-photo:hover {
border-color: var(--accent);
background-color: var(--surface-2); /* reset le hover par défaut */
color: inherit;
} }
.crew-photo-upload__btn.is-dragging {
cursor: grabbing;
}
/* L'image elle-même : positionnée pour pouvoir être pannée
et zoomée via transform. */
.crew-photo-upload__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
user-select: none;
-webkit-user-drag: none;
pointer-events: auto; /* pour que les events de drag fonctionnent */
transform-origin: center;
transition: none;
}
/* Image générique d'avatar crew, rendue partout via renderCrewAvatar.
Le conteneur doit avoir overflow: hidden et border-radius pour cropper. */
.crew-avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
user-select: none;
pointer-events: none;
transform-origin: center;
}
.crew-photo-upload__btn svg {
width: 32px;
height: 32px;
}
.crew-photo-upload__hint {
font-size: var(--fs-2xs);
color: var(--text-muted);
margin: 0;
}
.crew-photo-upload__remove {
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-moyen);
color: var(--accent);
background: none;
border: none;
cursor: pointer;
padding: var(--rg-espace-1) var(--rg-espace-2);
border-radius: var(--r-pill);
transition: background var(--t-base) var(--ease);
}
@media (hover: hover) { .crew-photo-upload__remove:hover {
background: var(--accent-soft);
} }
/* ---------------------------------------------------------
13.3 GRILLE DES RÔLES (modal)
--------------------------------------------------------- */
.role-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--rg-espace-2);
}
.role-option {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--rg-espace-2);
padding: var(--rg-espace-4) var(--rg-espace-2);
border-radius: var(--r-md);
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
cursor: pointer;
transition:
background var(--t-base) var(--ease),
border-color var(--t-base) var(--ease),
transform var(--t-base) var(--ease);
}
@media (hover: hover) { .role-option:hover {
background: var(--surface-2);
border-color: var(--border-2);
transform: translateY(-1px);
} }
.role-option.is-selected {
background: var(--accent-soft);
border-color: var(--accent);
}
/* Les icônes de métier sont dessinées en ligne (`jobIconSvg`) :
elles prennent `currentColor`, donc elles suivent la sélection
et les deux thèmes sans règle supplémentaire. L'ancienne
inversion en thème clair (`filter: invert(1)`) visait les
`![]()
` et n'a plus lieu d'être. */
.role-option__icon {
height: 30px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
transition: color var(--t-base) var(--ease);
}
.role-option__icon svg { width: 26px; height: 26px; }
@media (hover: hover) { .role-option:hover .role-option__icon { color: var(--text); } }
.role-option.is-selected .role-option__icon { color: var(--accent); }
.role-option__label {
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
color: var(--text);
text-align: center;
letter-spacing: 0;
}
.role-option.is-selected .role-option__label {
color: var(--accent);
}
/* ---------------------------------------------------------
13.4 GRILLE DE MINI-CARTES PERSONNE
---------------------------------------------------------
Réutilisable : sélecteur de personne dans le doc modal,
etc. Une carte = photo (ou avatar fallback initiales) + nom.
--------------------------------------------------------- */
.person-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--rg-espace-2);
}
.person-option {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--rg-espace-2);
padding: var(--rg-espace-4) var(--rg-espace-2);
border-radius: var(--r-md);
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
cursor: pointer;
font-family: var(--rg-police-texte);
transition:
background var(--t-base) var(--ease),
border-color var(--t-base) var(--ease),
transform var(--t-base) var(--ease);
}
@media (hover: hover) { .person-option:hover {
background: var(--surface-2);
border-color: var(--border-2);
transform: translateY(-1px);
} }
.person-option.is-selected {
background: var(--accent-soft);
border-color: var(--accent);
}
.person-option__photo {
width: 48px;
height: 48px;
border-radius: var(--rg-rayon-0);
background-size: cover;
background-position: center;
background-color: var(--surface-2);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--rg-taille-texte-s);
font-weight: var(--rg-graisse-gras);
color: var(--brand-white);
letter-spacing: 0;
flex-shrink: 0;
}
.person-option__photo--pink {
background: var(--accent);
box-shadow: none;
}
.person-option__photo--navy {
background: var(--brand-navy);
}
.person-option__photo--mix {
background: var(--brand-navy);
}
:root[data-theme="light"] .person-option__photo--navy {
background: var(--brand-navy);
}
.person-option__name {
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-semi);
color: var(--text);
text-align: center;
line-height: var(--rg-interligne-fort);
/* 2 lignes max */
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
}
.person-option.is-selected .person-option__name {
color: var(--accent);
}
/* État empty si pas de crew membres */
.person-grid--empty {
grid-template-columns: 1fr;
}
.person-grid__empty {
padding: var(--gap);
text-align: center;
background: var(--surface);
border: var(--rg-trait-1) dashed var(--border-2);
border-radius: var(--r-md);
font-size: var(--fs-sm);
color: var(--text-soft);
}
.person-grid__empty a {
color: var(--accent);
font-weight: var(--rg-graisse-semi);
}
/* ---------------------------------------------------------
13.5 SEGMENTED CONTROL (status permanent/temporary)
--------------------------------------------------------- */
.status-toggle {
display: flex;
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--r-md);
padding: var(--rg-espace-1);
gap: var(--rg-espace-1);
}
.status-toggle__option {
flex: 1;
padding: var(--rg-espace-3) var(--rg-espace-4);
border-radius: var(--r-sm);
background: transparent;
border: none;
color: var(--text-soft);
font-size: var(--fs-sm);
font-weight: var(--rg-graisse-moyen);
cursor: pointer;
font-family: var(--rg-police-texte);
transition:
background var(--t-base) var(--ease),
color var(--t-base) var(--ease);
}
@media (hover: hover) { .status-toggle__option:hover {
color: var(--text);
} }
.status-toggle__option.is-selected {
background: var(--rg-texte-principal);
color: var(--rg-texte-inverse);
box-shadow: none;
}
/* ---------------------------------------------------------
13.5 RESPONSIVE PAGE CREW
--------------------------------------------------------- */
@media (max-width: 540px) {
.role-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* ==========================================================
14. PAGE PLACES
----------------------------------------------------------
Library de cartes circuits + modal avec photo cover,
identité, distance, specs techniques, lap record.
========================================================== */
/* ---------------------------------------------------------
14.1 CARTE PREVIEW D'UN CIRCUIT
--------------------------------------------------------- */
.place-preview {
position: relative;
min-height: 280px;
border-radius: var(--r-xl);
background: var(--plein);
border: var(--rg-trait-1) solid var(--border);
overflow: hidden;
box-shadow: none;
cursor: pointer;
transition:
transform var(--t-base) var(--ease),
border-color var(--t-base) var(--ease),
box-shadow var(--t-slow) var(--ease);
opacity: 0;
transform: translateY(16px);
animation: widgetIn calc(var(--rg-duree) * 3.3) var(--ease-out) both;
}
.place-preview:nth-child(1) { animation-delay: 50ms; }
.place-preview:nth-child(2) { animation-delay: 100ms; }
.place-preview:nth-child(3) { animation-delay: 150ms; }
.place-preview:nth-child(4) { animation-delay: 200ms; }
.place-preview:nth-child(5) { animation-delay: 250ms; }
.place-preview:nth-child(6) { animation-delay: 300ms; }
@media (hover: hover) { .place-preview:hover {
transform: translateY(-4px);
border-color: var(--accent);
box-shadow: none;
} }
.place-preview__content-wrap {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.place-preview__cover {
position: relative;
width: 100%;
height: 140px;
background-size: cover;
background-position: center;
background-color: var(--bg-3);
flex-shrink: 0;
overflow: hidden;
}
.place-preview__cover--fallback {
background: var(--brand-navy);
}
.place-preview__cover-mark {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: var(--rg-taille-display-m);
font-weight: var(--rg-graisse-extra);
letter-spacing: 0;
color: color-mix(in srgb, var(--rg-neutre-blanc) 12%, transparent);
pointer-events: none;
text-transform: uppercase;
}
.place-preview__cc {
position: absolute;
top: 12px;
left: 12px;
display: inline-flex;
align-items: center;
padding: var(--rg-espace-1) var(--rg-espace-3);
border-radius: var(--r-pill);
background: color-mix(in srgb, var(--rg-marine-5) 78%, transparent);
color: var(--brand-white);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
font-size: var(--fs-3xs);
text-transform: uppercase;
z-index: 1;
}
.place-preview__cover-shade {
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--rg-marine-5) 35%, transparent);
pointer-events: none;
}
.place-preview__content {
display: flex;
flex-direction: column;
gap: var(--gap-2xs);
padding: var(--gap-md);
flex: 1;
}
.place-preview__name {
font-size: var(--fs-lg);
font-weight: var(--rg-graisse-semi);
color: var(--text);
margin: 0;
letter-spacing: var(--rg-display-l-espacement);
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.place-preview__location {
font-size: var(--fs-sm);
color: var(--text-soft);
margin: 0;
}
/* (LEGACY, gardé au cas où mais plus utilisé sur la carte) */
.place-preview__specs {
font-size: var(--fs-2xs);
color: var(--text-muted);
margin: 0;
margin-top: auto;
padding-top: var(--gap-xs);
border-top: var(--rg-trait-1) solid var(--border);
display: flex;
align-items: center;
gap: var(--rg-espace-2);
flex-wrap: wrap;
}
.place-preview__spec-dot {
width: 3px;
height: 3px;
border-radius: var(--rg-rayon-0);
background: var(--text-faint);
}
/* ----- Footer carte place : travel time + tags ----- */
.place-preview__travel {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--rg-espace-1) var(--rg-espace-4);
margin: 0;
margin-top: auto;
padding-top: var(--gap-xs);
font-size: var(--fs-2xs);
color: var(--text-muted);
}
.place-preview__travel-ico {
width: 14px;
height: 14px;
flex-shrink: 0;
}
.place-preview__trajet {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-1);
}
.track-tags {
display: flex;
flex-wrap: wrap;
gap: var(--rg-espace-1);
margin-top: var(--rg-espace-2);
}
/* Tag affiché sur la carte (read-only pill) */
.track-tag {
display: inline-flex;
align-items: center;
padding: var(--rg-espace-1) var(--rg-espace-3);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
letter-spacing: 0;
text-transform: uppercase;
color: var(--accent);
background: color-mix(in srgb, var(--rg-rose-5) 8%, transparent);
border: var(--rg-trait-1) solid color-mix(in srgb, var(--rg-rose-5) 20%, transparent);
border-radius: var(--r-pill);
white-space: nowrap;
}
.track-tag--more {
color: var(--text-muted);
background: var(--surface-2);
border-color: var(--border);
}
/* Les tags groupés par famille dans la fiche d'un circuit, 2026-09-08. Dix-sept puces à la file, on ne sait plus ce qu'on
cherche ; « Usure » puis trois puces, on le sait. */
.ttag-groupe + .ttag-groupe { margin-top: 0; }
.ttag-groupe__t {
margin: 0 0 var(--rg-espace-2);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--text-muted);
}
.ttag-rangee { display: flex; flex-wrap: wrap; gap: var(--rg-espace-1); }
/* Wrapper de la grille de chips dans la modal */
.track-tag-chips {
display: flex;
flex-direction: column;
gap: var(--rg-espace-3);
margin-top: var(--rg-espace-2);
}
/* Tag chip dans la modal (multi-select cliquable) */
.track-tag-chip {
display: inline-flex;
align-items: center;
padding: var(--rg-espace-2) var(--rg-espace-3);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-moyen);
border-radius: var(--r-pill);
background: transparent;
border: var(--rg-trait-1) solid var(--border);
color: var(--text-muted);
cursor: pointer;
transition:
background var(--t-base) var(--ease),
border-color var(--t-base) var(--ease),
color var(--t-base) var(--ease);
}
@media (hover: hover) { .track-tag-chip:hover {
background: var(--surface-2);
border-color: var(--border-2);
color: var(--text);
} }
.track-tag-chip.is-selected {
background: var(--rg-texte-principal);
color: var(--rg-texte-inverse);
border-color: var(--rg-texte-principal);
font-weight: var(--rg-graisse-semi);
}
/* Actions edit / delete sur la carte (top-right) */
.place-preview__actions {
position: absolute;
top: 14px;
right: 14px;
display: flex;
gap: var(--rg-espace-2);
z-index: 2;
}
.place-preview__action {
width: 32px;
height: 32px;
border-radius: var(--r-sm);
background: color-mix(in srgb, var(--rg-marine-5) 78%, transparent);
border: var(--rg-trait-1) solid color-mix(in srgb, var(--rg-neutre-blanc) 12%, transparent);
color: color-mix(in srgb, var(--rg-neutre-blanc) 85%, transparent);
display: inline-flex;
align-items: center;
justify-content: center;
transition:
background var(--t-base) var(--ease),
color var(--t-base) var(--ease),
border-color var(--t-base) var(--ease),
transform var(--t-base) var(--ease);
}
@media (hover: hover) { .place-preview__action:hover {
background: var(--brand-white);
color: var(--brand-navy);
border-color: var(--brand-white);
transform: translateY(-1px);
} }
@media (hover: hover) { .place-preview__action--danger:hover {
background: var(--accent);
color: var(--brand-white);
border-color: var(--accent);
} }
.place-preview__action svg {
width: 14px;
height: 14px;
}
/* ---------------------------------------------------------
14.2 UPLOAD COVER (rectangulaire) dans le modal
--------------------------------------------------------- */
.place-cover-upload {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--rg-espace-2);
}
.place-cover-upload__btn {
width: 100%;
height: 108px;
border-radius: var(--r-md);
background-color: var(--surface-2);
background-size: cover;
background-position: center;
border: var(--rg-trait-3) dashed var(--border-2);
color: var(--text-muted);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
overflow: hidden;
transition:
border-color var(--t-base) var(--ease),
background-color var(--t-base) var(--ease),
color var(--t-base) var(--ease),
transform var(--t-base) var(--ease);
}
@media (hover: hover) { .place-cover-upload__btn:hover {
border-color: var(--accent);
background-color: var(--accent-soft);
color: var(--accent);
} }
.place-cover-upload__btn--has-photo {
border-style: solid;
border-color: var(--border);
/* Une photo en place se deplace : le curseur le dit. */
cursor: grab;
}
.place-cover-upload__btn--has-photo:active { cursor: grabbing; }
@media (hover: hover) { .place-cover-upload__btn--has-photo:hover {
border-color: var(--border-2);
background-color: transparent;
} }
.place-cover-upload__acts { display: flex; gap: var(--rg-espace-4); }
.place-cover-upload__btn svg {
width: 26px;
height: 26px;
}
.place-cover-upload__hint {
font-size: var(--fs-2xs);
color: var(--text-muted);
margin: 0;
}
/* ---------------------------------------------------------
14.3 SECTIONS DE FORMULAIRE (réutilisable)
---------------------------------------------------------
Organise un long form en blocs visuels avec un séparateur
et un titre discret par section.
--------------------------------------------------------- */
.form-section {
display: flex;
flex-direction: column;
gap: var(--gap);
padding-top: var(--gap-sm);
border-top: var(--rg-trait-1) solid var(--border);
}
.form-section:first-of-type {
border-top: none;
padding-top: 0;
}
.form-section__title {
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--text-muted);
margin: 0;
}
/* ---------------------------------------------------------
14.4 RESPONSIVE PAGE PLACES
--------------------------------------------------------- */
@media (max-width: 540px) {
.place-preview__cover {
height: 120px;
}
}
/* ==========================================================
15. PAGE DOCUMENTS
----------------------------------------------------------
Library de cartes documents avec :
- tab toggle Documents / Secure
- filter chips All / Sent / Received
- cartes preview avec icône type, badge sent/received, lock
- modal d'upload avec drop zone, target role/person, secure
- modal de code 4 chiffres pour accès aux docs sécurisés
========================================================== */
/* ---------------------------------------------------------
15.1 TAB TOGGLE (Documents / Secure)
---------------------------------------------------------
Similaire à .status-toggle mais plus généreux et avec
support d'une icône.
--------------------------------------------------------- */
.tab-toggle {
display: inline-flex;
background: var(--rg-fond-surface);
border: var(--rg-trait-1) solid var(--rg-bord-defaut);
border-radius: var(--rg-rayon-0);
padding: 0;
gap: 0;
}
.tab-toggle__option {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
height: var(--rg-segment-hauteur);
padding: 0 var(--rg-espace-4);
border: 0;
border-radius: var(--rg-rayon-0);
background: transparent;
font: var(--rg-texte-s-fort);
color: var(--rg-texte-secondaire);
cursor: pointer;
transition: background var(--rg-duree), color var(--rg-duree);
}
@media (hover: hover) { .tab-toggle__option:hover {
color: var(--rg-texte-principal);
} }
.tab-toggle__option.is-selected {
background: var(--rg-texte-principal);
color: var(--rg-texte-inverse);
box-shadow: none;
}
.tab-toggle__option svg {
width: 16px;
height: 16px;
}
.tab-toggle__count {
padding: 0;
border-radius: var(--rg-rayon-0);
background: none;
font: var(--rg-chiffre-s);
color: var(--rg-accent-defaut);
}
.tab-toggle__option:not(.is-selected) .tab-toggle__count {
background: var(--surface-3);
color: var(--text-muted);
}
/* ---------------------------------------------------------
15.2 FILTER CHIPS (All / Sent / Received)
--------------------------------------------------------- */
.filter-chips {
display: flex;
gap: var(--rg-espace-2);
flex-wrap: wrap;
}
.filter-chip {
padding: var(--rg-espace-2) var(--rg-espace-4);
border-radius: var(--r-pill);
background: transparent;
border: var(--rg-trait-1) solid var(--border);
color: var(--text-soft);
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-moyen);
cursor: pointer;
font-family: var(--rg-police-texte);
transition:
background var(--t-base) var(--ease),
color var(--t-base) var(--ease),
border-color var(--t-base) var(--ease);
}
@media (hover: hover) { .filter-chip:hover {
background: var(--surface);
color: var(--text);
} }
.filter-chip.is-selected {
background: var(--text);
color: var(--bg);
border-color: var(--text);
}
/* ---------------------------------------------------------
15.3 BARRE D'OUTILS (tab + filters)
--------------------------------------------------------- */
.doc-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--gap);
flex-wrap: wrap;
margin-bottom: var(--gap);
}
/* ---------------------------------------------------------
15.4 CARTE PREVIEW D'UN DOCUMENT
--------------------------------------------------------- */
.doc-preview {
position: relative;
display: flex;
flex-direction: column;
gap: var(--gap-xs);
min-height: 240px;
padding: var(--gap-md);
border-radius: var(--r-xl);
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
box-shadow: none;
cursor: pointer;
overflow: hidden;
transition:
transform var(--t-base) var(--ease),
border-color var(--t-base) var(--ease),
box-shadow var(--t-slow) var(--ease);
opacity: 0;
transform: translateY(16px);
animation: widgetIn calc(var(--rg-duree) * 3.3) var(--ease-out) both;
}
.doc-preview:nth-child(1) { animation-delay: 50ms; }
.doc-preview:nth-child(2) { animation-delay: 100ms; }
.doc-preview:nth-child(3) { animation-delay: 150ms; }
.doc-preview:nth-child(4) { animation-delay: 200ms; }
.doc-preview:nth-child(5) { animation-delay: 250ms; }
.doc-preview:nth-child(6) { animation-delay: 300ms; }
@media (hover: hover) { .doc-preview:hover {
transform: translateY(-4px);
border-color: var(--accent);
box-shadow: none;
} }
/* En-tête de la carte : type icon + badges + actions */
.doc-preview__head {
display: flex;
align-items: center;
gap: var(--rg-espace-2);
flex-wrap: wrap;
}
/* Icone du type de fichier (réutilise les variantes du dashboard) */
.doc-preview__type {
width: 44px;
height: 44px;
border-radius: var(--r-md);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: 0;
flex-shrink: 0;
}
.doc-preview__type--pdf { background: var(--accent-soft); color: var(--accent); }
.doc-preview__type--xls { background: color-mix(in srgb, var(--rg-piste-vert) 14%, transparent); color: var(--rg-piste-vert); }
.doc-preview__type--doc { background: color-mix(in srgb, var(--rg-marine-0) 14%, transparent); color: var(--rg-marine-0); }
.doc-preview__type--txt { background: color-mix(in srgb, var(--rg-marine-0) 14%, transparent); color: var(--rg-marine-0); }
.doc-preview__type--img { background: color-mix(in srgb, var(--rg-piste-orange) 14%, transparent); color: var(--rg-piste-orange); }
.doc-preview__type--video { background: color-mix(in srgb, var(--rg-metier-violet) 18%, transparent); color: var(--rg-metier-violet); }
.doc-preview__type--file { background: var(--surface-3); color: var(--text-soft); }
/* Direction flow intégré au footer : "To " / "From " */
.doc-preview__flow {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
font-weight: var(--rg-graisse-semi);
font-size: var(--fs-2xs);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
flex: 1;
}
.doc-preview__flow svg {
width: 13px;
height: 13px;
flex-shrink: 0;
}
.doc-preview__flow--sent { color: var(--rg-marine-0); }
.doc-preview__flow--received { color: var(--rg-piste-vert); }
/* Cadenas si secure */
.doc-preview__lock {
width: 22px;
height: 22px;
border-radius: var(--rg-rayon-0);
background: var(--accent-soft);
color: var(--accent);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.doc-preview__lock svg {
width: 11px;
height: 11px;
}
/* Actions edit / delete top-right */
.doc-preview__actions {
margin-left: auto;
display: flex;
gap: var(--rg-espace-1);
flex-shrink: 0;
}
.doc-preview__action {
width: 30px;
height: 30px;
border-radius: var(--r-sm);
background: transparent;
border: var(--rg-trait-1) solid var(--border);
color: var(--text-muted);
display: inline-flex;
align-items: center;
justify-content: center;
transition:
background var(--t-base) var(--ease),
color var(--t-base) var(--ease),
border-color var(--t-base) var(--ease);
}
@media (hover: hover) { .doc-preview__action:hover {
background: var(--surface-2);
color: var(--text);
} }
@media (hover: hover) { .doc-preview__action--danger:hover {
background: var(--accent-soft);
color: var(--accent);
border-color: color-mix(in srgb, var(--accent) 35%, transparent);
} }
.doc-preview__action svg {
width: 13px;
height: 13px;
}
/* Corps de la carte : nom + commentaire */
.doc-preview__body {
display: flex;
flex-direction: column;
gap: var(--rg-espace-1);
flex: 1;
}
.doc-preview__name {
font-size: var(--fs-md);
font-weight: var(--rg-graisse-semi);
color: var(--text);
margin: 0;
letter-spacing: var(--rg-display-l-espacement);
line-height: var(--rg-interligne-fort);
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.doc-preview__comment {
font-size: var(--fs-2xs);
font-style: italic;
color: var(--text-muted);
margin: 0;
line-height: var(--rg-interligne-fort);
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Footer : direction + meta */
.doc-preview__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--rg-espace-2);
flex-wrap: wrap;
padding-top: var(--gap-xs);
border-top: var(--rg-trait-1) solid var(--border);
font-size: var(--fs-2xs);
color: var(--text-muted);
}
/* (Ancien .doc-preview__target conservé pour compat mais inutilisé) */
.doc-preview__target {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
font-weight: var(--rg-graisse-moyen);
color: var(--text-soft);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.doc-preview__target svg {
width: 12px;
height: 12px;
flex-shrink: 0;
}
.doc-preview__meta {
white-space: nowrap;
flex-shrink: 0;
}
/* ---------------------------------------------------------
15.5 DROP ZONE FICHIER (dans le modal)
--------------------------------------------------------- */
.file-drop {
border: var(--rg-trait-3) dashed var(--border-2);
border-radius: var(--r-md);
padding: var(--gap);
background: var(--surface);
transition:
border-color var(--t-base) var(--ease),
background var(--t-base) var(--ease);
}
@media (hover: hover) { .file-drop:hover {
border-color: var(--accent);
background: var(--accent-soft);
} }
.file-drop.is-dragover {
border-color: var(--accent);
background: var(--accent-soft);
border-style: solid;
}
.file-drop__empty {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--rg-espace-2);
padding: var(--gap-sm);
cursor: pointer;
text-align: center;
}
.file-drop__icon {
width: 44px;
height: 44px;
border-radius: var(--r-pill);
background: var(--surface-2);
color: var(--accent);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: var(--rg-espace-1);
}
.file-drop__icon svg {
width: 22px;
height: 22px;
}
.file-drop__title {
font-size: var(--fs-sm);
font-weight: var(--rg-graisse-semi);
color: var(--text);
margin: 0;
}
.file-drop__hint {
font-size: var(--fs-2xs);
color: var(--text-muted);
margin: 0;
}
/* État "fichier sélectionné" */
.file-drop__filled {
display: flex;
align-items: center;
gap: var(--gap-sm);
padding: var(--rg-espace-2);
}
.file-drop__filled-info {
flex: 1;
min-width: 0;
}
.file-drop__filled-name {
font-size: var(--fs-sm);
font-weight: var(--rg-graisse-semi);
color: var(--text);
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.file-drop__filled-meta {
font-size: var(--fs-2xs);
color: var(--text-muted);
margin: calc(var(--rg-espace-1) / 2) 0 0;
}
.file-drop__change {
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-moyen);
color: var(--accent);
background: var(--accent-soft);
border: none;
padding: var(--rg-espace-2) var(--rg-espace-3);
border-radius: var(--r-pill);
cursor: pointer;
flex-shrink: 0;
}
@media (hover: hover) { .file-drop__change:hover {
background: var(--accent);
color: var(--brand-white);
} }
/* ---------------------------------------------------------
15.6 MODAL DE CODE (secure access)
--------------------------------------------------------- */
.modal--small {
max-width: 420px;
}
.code-banner {
display: flex;
align-items: center;
gap: var(--gap-sm);
padding: var(--gap-sm);
background: var(--accent-soft);
border: var(--rg-trait-1) solid color-mix(in srgb, var(--accent) 30%, transparent);
border-radius: var(--r-md);
}
.code-banner__icon {
width: 36px;
height: 36px;
border-radius: var(--r-pill);
background: var(--accent);
color: var(--brand-white);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.code-banner__icon svg {
width: 18px;
height: 18px;
}
.code-banner__text {
flex: 1;
font-size: var(--fs-xs);
color: var(--text);
margin: 0;
line-height: var(--rg-interligne-fort);
}
.code-banner__text strong {
color: var(--accent);
font-weight: var(--rg-graisse-gras);
}
.code-demo {
font-size: var(--fs-2xs);
color: var(--text-muted);
margin: 0;
text-align: center;
}
.code-demo strong {
color: var(--text);
font-family: var(--font-mono);
font-size: var(--fs-md);
letter-spacing: var(--rg-label-m-espacement);
background: var(--surface-2);
padding: calc(var(--rg-espace-1) / 2) var(--rg-espace-3);
border-radius: var(--r-sm);
border: var(--rg-trait-1) solid var(--border);
}
.code-inputs {
display: flex;
justify-content: center;
gap: var(--rg-espace-3);
margin: var(--gap-sm) 0;
}
.code-digit {
width: 56px;
height: 64px;
border-radius: var(--r-md);
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
color: var(--text);
font-size: var(--rg-taille-h2);
font-weight: var(--rg-graisse-gras);
font-family: var(--font-mono);
text-align: center;
outline: none;
transition:
border-color var(--t-base) var(--ease),
background var(--t-base) var(--ease),
transform var(--t-base) var(--ease-spring);
}
.code-digit:focus {
border-color: var(--accent);
background: var(--surface-2);
transform: translateY(-1px);
}
.code-digit.is-error {
border-color: var(--accent);
background: var(--accent-soft);
animation: shake calc(var(--rg-duree) * 2.4) var(--ease);
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-6px); }
75% { transform: translateX(6px); }
}
.code-error {
font-size: var(--fs-xs);
color: var(--accent);
text-align: center;
margin: 0;
font-weight: var(--rg-graisse-moyen);
}
/* LE RAPPEL DU CODE DE DEMONSTRATION.
Discret : c'est un echafaudage, pas une consigne. Il part avec
CODE_DEMO le jour ou l'intranet quitte la demonstration. */
.code-hint {
font-size: var(--fs-xs);
color: var(--text-muted);
text-align: center;
margin: var(--rg-espace-2) 0 0;
letter-spacing: 0;
}
.code-hint b {
font-family: var(--font-mono);
font-weight: var(--rg-graisse-semi);
color: var(--text-soft);
letter-spacing: var(--rg-label-m-espacement);
margin-left: calc(var(--rg-espace-1) / 2);
}
/* ---------------------------------------------------------
15.7 RESPONSIVE PAGE DOCUMENTS
--------------------------------------------------------- */
@media (max-width: 540px) {
.doc-toolbar {
flex-direction: column;
align-items: stretch;
}
.tab-toggle {
width: 100%;
justify-content: stretch;
}
.tab-toggle__option {
flex: 1;
justify-content: center;
}
.code-digit {
width: 48px;
height: 56px;
font-size: var(--rg-taille-h2);
}
}
/* ==========================================================
16. SPLASH PAGE (page d'entrée animée)
----------------------------------------------------------
Plein écran navy avec halos. Logo + circuit SVG en stroke
animé (façon voiture qui parcourt le tracé). Auto-redirect
vers login.html après l'animation.
========================================================== */
.splash-page {
margin: 0;
min-height: 100vh;
background: var(--brand-navy);
color: var(--text);
font-family: var(--font-base);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
cursor: pointer;
transition: opacity calc(var(--rg-duree) * 3.3) var(--ease);
}
.splash-page--leaving {
opacity: 0;
}
/* Fond avec halos rose et bleu (esprit cohérent avec l'app) */
.splash-bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.splash-bg__glow {
position: absolute;
filter: none;
border-radius: var(--rg-rayon-0);
opacity: 0.5;
}
.splash-bg__glow--pink {
width: 620px;
height: 620px;
background: none;
top: -180px;
right: -160px;
/* léger flottement */
animation: splashGlowDrift calc(var(--rg-duree) * 53.3) ease-in-out infinite alternate;
}
.splash-bg__glow--blue {
width: 500px;
height: 500px;
background: none;
bottom: -180px;
left: -140px;
opacity: 0.4;
animation: splashGlowDrift calc(var(--rg-duree) * 66.7) calc(var(--rg-duree) * 6.7) ease-in-out infinite alternate;
}
@keyframes splashGlowDrift {
from { transform: translate(0, 0); }
to { transform: translate(40px, -30px); }
}
/* Scène centrale */
.splash-stage {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--rg-espace-6);
padding: var(--rg-espace-7);
max-width: 100%;
}
/* Logo : fade-in léger */
.splash-logo {
height: 40px;
width: auto;
opacity: 0;
animation: splashFadeIn calc(var(--rg-duree) * 5.3) calc(var(--rg-duree) * 1.5) var(--ease-out) forwards;
}
/* Circuit : fade + léger zoom-in.
Le placeholder est généreux (520px / 78vw) pour laisser de la
marge autour du tracé et du drop-shadow rose. */
.splash-circuit {
width: min(520px, 78vw);
height: auto;
opacity: 0;
transform: scale(0.96);
animation: splashCircuitIn calc(var(--rg-duree) * 4.7) calc(var(--rg-duree) * 2.4) var(--ease-out) forwards;
overflow: visible;
}
/* Path de fond (silhouette du circuit) */
.splash-circuit__base {
fill: color-mix(in srgb, var(--rg-neutre-blanc) 5%, transparent);
}
/* Path animé : stroke qui se révèle (effet voiture sur le circuit).
Durée allongée (4s) pour laisser le temps d'apprécier le dessin. */
.splash-circuit__trail {
/* dasharray et dashoffset sont initialisés à 1000 dans le HTML
grâce à pathLength="1000" (peu importe la longueur réelle). */
animation: splashDrawTrack calc(var(--rg-duree) * 26.7) calc(var(--rg-duree) * 5.3) var(--ease) forwards;
stroke: var(--rg-accent-defaut);
stroke-width: var(--rg-splash-trait);
}
/* Tagline qui apparaît en fin d'animation */
.splash-tagline {
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-moyen);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--text-muted);
margin: 0;
opacity: 0;
animation: splashFadeIn calc(var(--rg-duree) * 5.3) calc(var(--rg-duree) * 30.0) var(--ease-out) forwards;
}
/* Animations */
@keyframes splashFadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes splashCircuitIn {
from { opacity: 0; transform: scale(0.96); }
to { opacity: 1; transform: scale(1); }
}
@keyframes splashDrawTrack {
from { stroke-dashoffset: 1000; }
to { stroke-dashoffset: 0; }
}
/* Respect des préférences réduites : on coupe les anims, on
affiche tout de suite. La redirection JS reste en place. */
@media (prefers-reduced-motion: reduce) {
.splash-logo,
.splash-circuit,
.splash-tagline {
opacity: 1;
animation: none;
transform: none;
}
.splash-circuit__trail {
stroke-dashoffset: 0;
animation: none;
}
}
/* Responsive */
@media (max-width: 540px) {
.splash-stage { gap: var(--rg-espace-6); padding: var(--rg-espace-6); }
.splash-logo { height: 32px; }
}
/* ==========================================================
11. ESPACES, ACCÈS ET VALIDATION DES PROFILS
----------------------------------------------------------
Tout ce qui touche à la séparation GP / INSIDE et à la
distribution des codes d'invitation.
========================================================== */
/* ---- Sélecteur d'espace dans la sidebar ----
REFAIT LE 2026-10-19 (deuxième passe).
La version précédente était une grille de quatre cases, dont
l'active en aplat rouge plein. Trois défauts, tous visibles
d'un seul coup d'œil :
- TROIS BORDS GAUCHES dans 240 px de colonne. Le logo partait
à 22 px, les onglets à 14 px, le sélecteur à 26 px. Les
deux blocs rouges, espace actif et page active, étaient
décalés de 12 px l'un sous l'autre. C'est ce décalage qu'on
voit en premier, avant même de savoir ce qu'on regarde.
- L'ÉTIQUETTE ET LES COMMANDES AVAIENT LA MÊME TYPO. Le
« ESPACE » au-dessus et les quatre boutons partageaient
11 px, capitales, interlettrage, graisse haute : plus aucune
hiérarchie entre ce qui NOMME et ce qui AGIT.
- QUATRE BLOCS POUR UN SEUL ÉTAT. On n'est que dans un espace
à la fois. Les trois autres n'avaient pas besoin d'occuper
la colonne en permanence, encore moins d'y mettre un aplat
rouge juste au-dessus de l'onglet actif, rouge lui aussi.
Maintenant : UNE SEULE LIGNE qui nomme l'espace courant et
s'ouvre en menu. Le bloc s'aligne exactement sur les onglets,
le rouge redevient le signal unique de « la page où je suis »,
et la colonne récupère une soixantaine de pixels.
*/
.space-switcher {
/* Aucun retrait horizontal : le bloc occupe la même largeur
que les onglets, bord à bord. C'était tout le défaut. */
padding: 0 0 var(--rg-espace-4);
}
.space-pick {
width: 100%;
display: flex;
align-items: center;
gap: var(--rg-espace-3);
padding: var(--rg-espace-2) var(--rg-espace-3);
border: 0;
border-radius: var(--rg-rayon-0);
background: var(--rg-fond-marine);
font-family: var(--rg-police-texte);
text-align: left;
cursor: pointer;
transition: background var(--rg-duree);
}
.space-pick.is-open {
background: var(--rg-marine-3);
}
@media (hover: hover) { .space-pick:hover {
background: var(--rg-marine-3);
} }
/* Le focus clavier reprend l'anneau du reste de l'intranet.
Sans ça, le navigateur posait son propre trait noir épais
autour du bouton dès qu'on fermait le menu par Échap, un
cadre qui n'appartenait à aucune charte. */
.space-pick:focus-visible,
.space-menu__item:focus-visible {
outline: var(--rg-trait-3) solid var(--border-focus);
outline-offset: calc(var(--rg-espace-1) / 2);
}
/* LA PASTILLE EST NEUTRE, ET C'EST VOULU.
Elle porte le code à deux lettres, seul élément encore visible
quand la sidebar tombe à 76 px. Lui donner une couleur
remettrait un deuxième signal coloré juste au-dessus de
l'onglet actif, exactement ce qu'on vient d'enlever. */
.space-pick__mark,
.space-menu__mark {
position: relative;
flex-shrink: 0;
width: var(--rg-avatar-s);
height: var(--rg-avatar-s);
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
border: 0;
border-radius: var(--rg-rayon-0);
background: var(--rg-neutre-blanc);
color: var(--rg-marine-5);
font: var(--rg-label-m);
letter-spacing: 0;
}
.space-pick__mark::after,
.space-menu__mark::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
width: calc(var(--rg-avatar-s) * 0.28);
height: calc(var(--rg-avatar-s) * 0.28);
background: var(--rg-accent-defaut);
clip-path: polygon(100% 0, 100% 100%, 42% 100%);
}
.space-menu__mark { background: var(--rg-marine-5); color: var(--rg-neutre-blanc); }
.space-pick__text {
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--rg-trait-1);
}
.space-pick__name {
font: var(--rg-texte-s-fort);
color: var(--rg-neutre-blanc);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.space-pick__tag {
font: var(--rg-label-s);
letter-spacing: var(--rg-label-s-espacement);
text-transform: uppercase;
color: var(--rg-neutre-gris);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.space-pick__chev {
margin-left: auto;
flex-shrink: 0;
display: inline-flex;
color: var(--rg-neutre-gris);
transition: transform var(--rg-duree);
}
.space-pick__chev svg { width: 14px; height: 14px; }
.space-pick.is-open .space-pick__chev { transform: rotate(180deg); }
/* Une seule personne sur un seul espace : la ligne reste, elle
dit où l'on est, mais elle ne s'ouvre pas, et n'affiche pas
de chevron qui promettrait un menu vide. */
.space-pick--solo { cursor: default; }
@media (hover: hover) { .space-pick--solo:hover {
background: var(--rg-fond-marine);
} }
/* ---- Le menu des espaces ---- */
.space-menu {
position: fixed;
z-index: 300;
min-width: 228px;
padding: 0;
border: 0;
border-radius: var(--rg-rayon-0);
background: var(--rg-fond-surface);
box-shadow: none;
}
.space-menu__head {
margin: 0;
padding: var(--rg-espace-3) var(--rg-espace-3) var(--rg-espace-2);
border-bottom: var(--rg-trait-1) solid var(--rg-bord-defaut);
font: var(--rg-label-s);
letter-spacing: var(--rg-label-s-espacement);
text-transform: uppercase;
color: var(--rg-texte-secondaire);
}
.space-menu__item {
width: 100%;
display: flex;
align-items: center;
gap: var(--rg-espace-3);
padding: var(--rg-espace-2) var(--rg-espace-3);
border: 0;
border-radius: var(--rg-rayon-0);
background: transparent;
font-family: var(--rg-police-texte);
text-align: left;
cursor: pointer;
transition: background var(--rg-duree);
}
.space-menu__item + .space-menu__item { margin-top: 0; }
@media (hover: hover) { .space-menu__item:hover { background: var(--rg-fond-page); } }
.space-menu__text {
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--rg-trait-1);
}
.space-menu__name {
font: var(--rg-texte-s-fort);
color: var(--rg-texte-principal);
}
.space-menu__tag {
font: var(--rg-label-s);
letter-spacing: var(--rg-label-s-espacement);
text-transform: uppercase;
color: var(--rg-texte-secondaire);
}
/* L'espace courant se marque par une coche, pas par un fond :
dans un menu, un fond veut dire « survolé ». Deux grammaires
pour un même rectangle, c'est la confusion garantie. */
.space-menu__item.is-current .space-menu__name {
color: var(--accent);
font-weight: var(--rg-graisse-semi);
}
.space-menu__check {
margin-left: auto;
flex-shrink: 0;
display: inline-flex;
color: var(--accent);
}
.space-menu__check svg { width: 14px; height: 14px; }
/* ⚠️ CES DEUX BLOCS DOIVENT RESTER APRÈS LE COMPOSANT.
Une media query n'ajoute AUCUNE spécificité : c'est la règle
écrite le plus bas qui gagne. Rangés dans la grande section
responsive de la ligne 2500, ils perdraient contre les règles
ci-dessus, déclarées cinq mille lignes plus loin, c'est très
exactement ce qui s'était passé avec l'ancien sélecteur. */
@media (max-width: 980px) {
/* Sidebar à 76 px, icônes seules : il ne reste que la
pastille, et le nom complet passe dans le `title`. */
.space-switcher { padding: 0 0 var(--rg-espace-3); }
.space-pick {
justify-content: center;
gap: 0;
padding: var(--rg-espace-2) 0;
}
.space-pick__text,
.space-pick__chev { display: none; }
}
@media (max-width: 720px) {
/* La sidebar redevient une drawer de 280 px : tout revient. */
body.sidebar-open .sidebar .space-switcher { padding: 0 0 var(--rg-espace-4); }
body.sidebar-open .sidebar .space-pick {
justify-content: flex-start;
gap: var(--rg-espace-3);
padding: var(--rg-espace-2) var(--rg-espace-3);
}
body.sidebar-open .sidebar .space-pick__text { display: flex; }
body.sidebar-open .sidebar .space-pick__chev { display: inline-flex; }
}
.sidebar__note {
padding: var(--rg-espace-3) var(--rg-espace-3);
margin-top: var(--rg-espace-2);
font-size: var(--fs-3xs);
line-height: var(--rg-interligne-texte);
color: var(--text-muted);
border-left: var(--rg-trait-3) solid var(--border-2);
}
/* ---- Cartes d'espace, création de profil ---- */
.su-field__help {
margin: calc(calc(var(--rg-espace-1) / 2) * -1) 0 var(--rg-espace-2);
font-size: var(--fs-3xs);
line-height: var(--rg-interligne-texte);
color: var(--text-muted);
}
.su-gate__hint {
margin: var(--rg-espace-1) 0 0;
font-size: var(--fs-3xs);
color: var(--text-muted);
}
.su-spaces {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--rg-espace-3);
}
.su-space {
position: relative;
display: flex;
flex-direction: column;
gap: calc(var(--rg-espace-1) / 2);
padding: var(--rg-espace-4) var(--rg-espace-4) var(--rg-espace-3);
text-align: left;
border-radius: var(--r-sm);
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
color: var(--text-soft);
font-family: var(--rg-police-texte);
cursor: pointer;
transition:
background var(--t-base) var(--ease),
border-color var(--t-base) var(--ease);
}
@media (hover: hover) { .su-space:hover { border-color: var(--border-2); } }
.su-space--active {
background: var(--accent-soft);
border-color: var(--accent);
}
.su-space__check {
position: absolute;
top: 12px;
right: 12px;
width: 18px;
height: 18px;
display: grid;
place-items: center;
border-radius: var(--rg-rayon-0);
border: var(--rg-trait-2) solid var(--border-2);
color: transparent;
transition: all var(--t-base) var(--ease);
}
.su-space__check svg { width: 11px; height: 11px; }
.su-space--active .su-space__check {
background: var(--accent);
border-color: var(--accent);
color: var(--brand-white);
}
.su-space__label {
font-size: var(--fs-sm);
font-weight: var(--rg-graisse-semi);
color: var(--text);
padding-right: var(--rg-espace-5);
}
.su-space__tagline {
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--accent);
}
.su-space__hint {
margin-top: var(--rg-espace-1);
font-size: var(--fs-3xs);
line-height: var(--rg-interligne-texte-s);
color: var(--text-muted);
}
@media (max-width: 560px) {
.su-spaces { grid-template-columns: 1fr; }
}
/* ---- Écran d'attente de validation ---- */
.pending-card { text-align: center; }
.pending-badge {
width: 46px;
height: 46px;
margin: 0 auto var(--rg-espace-4);
display: grid;
place-items: center;
border-radius: var(--rg-rayon-0);
background: var(--accent-soft);
color: var(--accent);
}
.pending-badge svg { width: 24px; height: 24px; }
/* Demande validée : le même emplacement passe au vert. */
.pending-badge--ok {
background: color-mix(in srgb, var(--rg-piste-vert) 16%, transparent);
color: var(--rg-piste-vert);
}
.pending-recap {
margin: var(--rg-espace-4) 0;
padding: var(--rg-espace-1) var(--rg-espace-4);
border-radius: var(--r-sm);
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
text-align: left;
}
.pending-recap__row {
display: flex;
justify-content: space-between;
gap: var(--rg-espace-4);
padding: var(--rg-espace-2) 0;
border-bottom: var(--rg-trait-1) solid var(--border);
}
.pending-recap__row:last-child { border-bottom: 0; }
.pending-recap__key {
font-size: var(--fs-2xs);
color: var(--text-muted);
}
.pending-recap__val {
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-semi);
color: var(--text);
text-align: right;
}
/* ---- Toggle d'espace dans les formulaires ---- */
.space-toggle {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--rg-espace-2);
}
.space-toggle__option {
display: flex;
flex-direction: column;
gap: var(--rg-trait-1);
padding: var(--rg-espace-3) var(--rg-espace-3);
text-align: left;
border-radius: var(--r-sm);
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
font-family: var(--rg-police-texte);
cursor: pointer;
transition:
background var(--t-base) var(--ease),
border-color var(--t-base) var(--ease);
}
@media (hover: hover) { .space-toggle__option:hover { border-color: var(--border-2); } }
.space-toggle__option.is-selected {
background: var(--accent-soft);
border-color: var(--accent);
}
.space-toggle__label {
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-semi);
color: var(--text);
}
.space-toggle__tagline {
font-size: var(--fs-3xs);
color: var(--text-muted);
}
/* ---- Page Access ---- */
.access-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--rg-espace-3);
margin-bottom: var(--rg-espace-6);
}
.access-stat {
display: flex;
align-items: baseline;
gap: var(--rg-espace-3);
padding: var(--rg-espace-4) var(--rg-espace-4);
border-radius: var(--r-md);
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
}
.access-stat--hot {
background: var(--accent-soft);
border-color: var(--accent);
}
.access-stat__value {
font-family: var(--font-mono);
font-size: var(--fs-2xl);
font-weight: var(--rg-graisse-gras);
line-height: var(--rg-interligne-plein);
color: var(--text);
}
.access-stat--hot .access-stat__value { color: var(--accent); }
.access-stat__label {
font-size: var(--fs-2xs);
color: var(--text-muted);
}
.access-section { margin-bottom: var(--rg-espace-6); }
.access-section__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--rg-espace-3);
margin-bottom: var(--rg-espace-3);
}
.access-section__head > div { flex: 1; min-width: 0; }
.access-section__title {
margin: 0;
font-family: var(--font-display); font-style: var(--rg-titre-style);
font-size: var(--fs-lg);
font-weight: var(--rg-graisse-semi);
color: var(--text);
}
.access-section__sub {
margin: calc(var(--rg-espace-1) / 2) 0 0;
font-size: var(--fs-2xs);
color: var(--text-muted);
}
.access-list {
display: flex;
flex-direction: column;
gap: var(--rg-espace-2);
}
.access-row {
display: flex;
align-items: center;
gap: var(--rg-espace-4);
padding: var(--rg-espace-4) var(--rg-espace-4);
border-radius: var(--r-md);
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
transition: border-color var(--t-base) var(--ease);
}
@media (hover: hover) { .access-row:hover { border-color: var(--border-2); } }
.access-row--request { border-left: var(--rg-trait-4) solid var(--accent); }
.access-row--used,
.access-row--revoked { opacity: 0.55; }
.access-row__main { flex: 1; min-width: 0; }
.access-row__title {
margin: 0;
font-size: var(--fs-sm);
font-weight: var(--rg-graisse-semi);
color: var(--text);
}
.access-row__meta {
margin: calc(var(--rg-espace-1) / 2) 0 0;
font-size: var(--fs-2xs);
color: var(--text-muted);
}
.access-row__tags {
display: flex;
flex-wrap: wrap;
gap: var(--rg-espace-1);
margin-top: var(--rg-espace-2);
}
.access-row__actions {
display: flex;
gap: var(--rg-espace-2);
flex-shrink: 0;
}
.access-code {
margin: 0 0 var(--rg-espace-1);
font-family: var(--font-mono);
font-size: var(--fs-lg);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
color: var(--accent);
}
.access-row--used .access-code,
.access-row--revoked .access-code {
color: var(--text-muted);
text-decoration: line-through;
}
.access-tag {
height: 22px;
padding: 0 var(--rg-espace-2);
display: inline-flex;
align-items: center;
border-radius: var(--r-pill);
background: var(--surface-2);
border: var(--rg-trait-1) solid var(--border);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-moyen);
color: var(--text-soft);
}
.access-tag--gp,
.access-tag--inside {
font-weight: var(--rg-graisse-semi);
border-color: var(--accent);
background: var(--accent-soft);
color: var(--accent);
}
.access-empty {
padding: var(--rg-espace-6) var(--rg-espace-5);
text-align: center;
border-radius: var(--r-md);
border: var(--rg-trait-1) dashed var(--border-2);
}
.access-empty__title {
margin: 0;
font-size: var(--fs-sm);
font-weight: var(--rg-graisse-semi);
color: var(--text-soft);
}
.access-empty__text {
margin: var(--rg-espace-1) 0 0;
font-size: var(--fs-2xs);
color: var(--text-muted);
}
.form-help {
margin: var(--rg-espace-2) 0 0;
font-size: var(--fs-3xs);
line-height: var(--rg-interligne-texte);
color: var(--text-muted);
}
/* ---- Modal de revue d'une demande ---- */
.review-head {
display: flex;
align-items: center;
gap: var(--rg-espace-4);
padding-bottom: var(--rg-espace-4);
margin-bottom: var(--rg-espace-1);
border-bottom: var(--rg-trait-1) solid var(--border);
}
.review-head__photo {
width: 52px;
height: 52px;
flex-shrink: 0;
border-radius: var(--rg-rayon-0);
overflow: hidden;
background: var(--surface-2);
display: grid;
place-items: center;
font-weight: var(--rg-graisse-gras);
color: var(--text-soft);
}
.review-head__photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.review-head__name {
margin: 0;
font-size: var(--fs-lg);
font-weight: var(--rg-graisse-semi);
color: var(--text);
}
.review-head__role {
margin: var(--rg-trait-1) 0 0;
font-size: var(--fs-2xs);
color: var(--text-muted);
}
.review-grid__row {
display: flex;
justify-content: space-between;
gap: var(--rg-espace-4);
padding: var(--rg-espace-3) 0;
border-bottom: var(--rg-trait-1) solid var(--border);
}
.review-grid__row:last-child { border-bottom: 0; }
.review-grid__key {
font-size: var(--fs-2xs);
color: var(--text-muted);
}
.review-grid__val {
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-semi);
color: var(--text);
text-align: right;
}
/* ---- Chip d'espace sur la carte crew ---- */
.crew-preview__discipline--space {
font-weight: var(--rg-graisse-semi);
border-color: var(--accent);
background: var(--accent-soft);
color: var(--accent);
}
/* ==========================================================
12. PANNEAU PROFIL
----------------------------------------------------------
Ouvert depuis le bloc profil en bas de la sidebar. Contient
les infos personnelles, la gestion des accès et la session.
========================================================== */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.profile-scrim {
position: fixed;
inset: 0;
z-index: 90;
background: color-mix(in srgb, var(--rg-marine-8) 55%, transparent);
animation: fadeIn var(--t-base) var(--ease);
}
.profile-panel {
position: fixed;
top: 0;
right: 0;
z-index: 91;
width: min(560px, 100vw);
height: 100dvh;
display: flex;
flex-direction: column;
background: var(--bg-2);
border-left: var(--rg-trait-1) solid var(--border);
box-shadow: none;
animation: panelIn var(--t-slow) var(--ease);
}
@keyframes panelIn {
from { transform: translateX(24px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
.profile-panel__head {
display: flex;
align-items: center;
gap: var(--rg-espace-4);
padding: var(--rg-espace-5) var(--rg-espace-5) var(--rg-espace-4);
border-bottom: var(--rg-trait-1) solid var(--border);
}
.profile-panel__identity {
display: flex;
align-items: center;
gap: var(--rg-espace-4);
flex: 1;
min-width: 0;
}
.profile-panel__photo {
width: 52px;
height: 52px;
flex-shrink: 0;
border-radius: var(--rg-rayon-0);
overflow: hidden;
display: grid;
place-items: center;
background: var(--surface-2);
font-weight: var(--rg-graisse-gras);
color: var(--text-soft);
}
.profile-panel__photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.profile-panel__name {
margin: 0;
font-family: var(--font-display); font-style: var(--rg-titre-style);
font-size: var(--fs-xl);
font-weight: var(--rg-graisse-semi);
color: var(--text);
}
.profile-panel__role {
margin: calc(var(--rg-espace-1) / 2) 0 0;
font-size: var(--fs-2xs);
color: var(--text-muted);
}
.profile-tabs {
display: flex;
gap: var(--rg-espace-1);
padding: var(--rg-espace-3) var(--rg-espace-5) 0;
border-bottom: var(--rg-trait-1) solid var(--border);
}
.profile-tab {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
padding: var(--rg-espace-2) var(--rg-espace-4) var(--rg-espace-3);
border: 0;
background: none;
color: var(--text-muted);
font-family: var(--rg-police-texte);
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-semi);
cursor: pointer;
border-bottom: var(--rg-trait-3) solid transparent;
margin-bottom: calc(var(--rg-trait-1) * -1);
transition: color var(--t-base) var(--ease);
}
@media (hover: hover) { .profile-tab:hover { color: var(--text); } }
.profile-tab.is-active {
color: var(--text);
border-bottom-color: var(--accent);
}
.profile-tab__badge {
min-width: 18px;
height: 18px;
padding: 0 var(--rg-espace-1);
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--r-pill);
background: var(--accent);
color: var(--brand-white);
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-gras);
}
.profile-panel__body {
flex: 1;
overflow-y: auto;
padding: var(--rg-espace-5) var(--rg-espace-5) var(--rg-espace-6);
}
.profile-intro {
margin: 0 0 var(--rg-espace-5);
font-size: var(--fs-xs);
line-height: var(--rg-interligne-texte);
color: var(--text-soft);
}
.profile-form__foot {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--rg-espace-4);
padding-top: var(--rg-espace-2);
}
.profile-form__saved {
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-semi);
color: var(--accent);
}
/* Le bloc profil de la sidebar devient franchement cliquable */
.profile-widget { cursor: pointer; }
.profile-widget__pending {
position: absolute;
top: 8px;
right: 8px;
min-width: 18px;
height: 18px;
padding: 0 var(--rg-espace-1);
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--r-pill);
background: var(--accent);
color: var(--brand-white);
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-gras);
}
/* Pied du panneau : déconnexion */
.profile-panel__foot {
padding: var(--rg-espace-3) var(--rg-espace-5);
border-top: var(--rg-trait-1) solid var(--border);
}
.profile-signout {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
padding: var(--rg-espace-2) var(--rg-espace-3);
border: 0;
border-radius: var(--r-sm);
background: none;
color: var(--text-muted);
font-family: var(--rg-police-texte);
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-semi);
cursor: pointer;
transition:
background var(--t-base) var(--ease),
color var(--t-base) var(--ease);
}
@media (hover: hover) { .profile-signout:hover {
background: var(--surface-2);
color: var(--text);
} }
.profile-signout svg { width: 17px; height: 17px; }
/* Dans le panneau, la section Accès a moins de place */
.profile-panel__body .access-stats { margin-bottom: var(--rg-espace-5); }
/* Dans le panneau (560px), les actions passent sous le contenu
plutôt que de déborder du bord droit. */
.profile-panel__body .access-row {
flex-direction: column;
align-items: stretch;
gap: var(--rg-espace-3);
}
.profile-panel__body .access-row__actions { justify-content: flex-end; }
.profile-panel__body .access-row__actions:empty { display: none; }
@media (max-width: 620px) {
.profile-panel { width: 100vw; border-left: 0; }
.profile-panel__head,
.profile-tabs,
.profile-panel__body,
.profile-panel__foot { padding-left: var(--rg-espace-4); padding-right: var(--rg-espace-4); }
}
/* ==========================================================
13. ESPACE INSIDE, RÉSERVATIONS, PLANNING, INVITÉS
========================================================== */
/* `.page-hero__row > div` impose colonne + flex:1 à tous ses enfants.
Le groupe de boutons doit s'en extraire : ligne, et pas étiré. */
.page-hero__row > .hero-actions {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--rg-espace-3);
flex: 0 0 auto;
}
/* ---- Bandeau des journées de roulage ---- */
.day-strip {
display: flex;
gap: var(--rg-espace-3);
overflow-x: auto;
padding-bottom: var(--rg-espace-2);
margin-bottom: var(--rg-espace-5);
}
.day-card {
flex: 0 0 auto;
min-width: 150px;
display: flex;
flex-direction: column;
gap: calc(var(--rg-espace-1) / 2);
padding: var(--rg-espace-3) var(--rg-espace-4);
text-align: left;
border-radius: var(--r-md);
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
font-family: var(--rg-police-texte);
cursor: pointer;
transition:
border-color var(--t-base) var(--ease),
background var(--t-base) var(--ease);
}
@media (hover: hover) { .day-card:hover { border-color: var(--border-2); } }
.day-card--active {
background: var(--accent-soft);
border-color: var(--accent);
}
.day-card__date {
font-size: var(--fs-sm);
font-weight: var(--rg-graisse-semi);
color: var(--text);
}
/* Seule la première lettre prend la majuscule : "capitalize"
mettrait aussi "Sept." en capitale, ce qui est fautif. */
.day-card__date::first-letter { text-transform: uppercase; }
.day-card__circuit {
font-size: var(--fs-3xs);
color: var(--text-muted);
}
.day-card__seats {
margin-top: var(--rg-espace-1);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
color: var(--accent);
}
.day-card--full .day-card__seats { color: var(--text-muted); }
/* ---- Filtres ---- */
.resa-filters {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--rg-espace-3);
margin-bottom: var(--rg-espace-4);
}
.resa-filters__search {
flex: 1 1 260px;
min-width: 200px;
}
.resa-filters__chips {
display: flex;
flex-wrap: wrap;
gap: var(--rg-espace-2);
}
.resa-filters__clear {
height: 32px;
padding: 0 var(--rg-espace-3);
border-radius: var(--r-pill);
background: var(--accent-soft);
border: var(--rg-trait-1) solid var(--accent);
color: var(--accent);
font-family: var(--rg-police-texte);
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-semi);
cursor: pointer;
}
/* ---- Liste des réservations ---- */
.resa-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--rg-espace-3);
}
.resa-row {
display: flex;
flex-direction: column;
gap: var(--rg-espace-1);
padding: var(--rg-espace-4) var(--rg-espace-4);
border-radius: var(--r-md);
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
border-left: var(--rg-trait-4) solid var(--border-2);
transition: border-color var(--t-base) var(--ease);
}
@media (hover: hover) { .resa-row:hover { border-color: var(--border-2); } }
.resa-row--warn { border-left-color: var(--rg-piste-orange); }
.resa-row--ok { border-left-color: var(--rg-piste-vert); }
.resa-row--danger { border-left-color: var(--accent); }
.resa-row--muted { border-left-color: var(--border-2); }
.resa-row__head {
display: flex;
align-items: center;
gap: var(--rg-espace-2);
margin-bottom: var(--rg-espace-1);
}
.resa-row__ref {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
color: var(--text-muted);
}
.resa-row__source {
margin-left: auto;
font-size: var(--fs-3xs);
color: var(--text-faint);
}
.resa-badge {
height: 20px;
padding: 0 var(--rg-espace-2);
display: inline-flex;
align-items: center;
border-radius: var(--r-pill);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
}
.resa-badge--warn { background: color-mix(in srgb, var(--rg-piste-orange) 16%, transparent); color: var(--rg-piste-orange); }
.resa-badge--ok { background: color-mix(in srgb, var(--rg-piste-vert) 16%, transparent); color: var(--rg-piste-vert); }
.resa-badge--danger { background: var(--accent-soft); color: var(--accent); }
.resa-badge--muted { background: var(--surface-2); color: var(--text-muted); }
.resa-row__name {
margin: 0;
font-size: var(--fs-md);
font-weight: var(--rg-graisse-semi);
color: var(--text);
}
.resa-row__people {
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-semi);
color: var(--accent);
}
.resa-row__meta,
.resa-row__contact {
margin: 0;
font-size: var(--fs-2xs);
color: var(--text-muted);
}
.resa-row__contact { color: var(--text-faint); }
.resa-row__warn { color: var(--rg-piste-orange); font-weight: var(--rg-graisse-semi); }
.resa-row__actions {
display: flex;
gap: var(--rg-espace-2);
margin-top: var(--rg-espace-3);
}
/* ---- Sélecteurs visuels (formule, voiture) ---- */
.pick-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: var(--rg-espace-2);
}
.pick {
display: flex;
flex-direction: column;
gap: calc(var(--rg-espace-1) / 2);
padding: var(--rg-espace-3) var(--rg-espace-4);
text-align: left;
border-radius: var(--r-sm);
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
font-family: var(--rg-police-texte);
cursor: pointer;
transition:
background var(--t-base) var(--ease),
border-color var(--t-base) var(--ease);
}
@media (hover: hover) { .pick:hover { border-color: var(--border-2); } }
.pick.is-selected {
background: var(--accent-soft);
border-color: var(--accent);
}
.pick__label {
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-semi);
color: var(--text);
}
.pick__hint {
font-size: var(--fs-3xs);
color: var(--text-muted);
line-height: var(--rg-interligne-fort);
}
.pick__price {
margin-top: var(--rg-espace-1);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
color: var(--accent);
}
/* ---- Planning ---- */
.plan-list {
display: flex;
flex-direction: column;
gap: var(--rg-espace-1);
}
.plan-row {
display: grid;
grid-template-columns: 78px 1fr auto;
align-items: center;
gap: var(--rg-espace-4);
width: 100%;
padding: var(--rg-espace-3) var(--rg-espace-4);
text-align: left;
border-radius: var(--r-sm);
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
font-family: var(--rg-police-texte);
}
.plan-row--group {
background: var(--surface-2);
font-weight: var(--rg-graisse-semi);
}
.plan-row--client { cursor: pointer; }
@media (hover: hover) { .plan-row--client:hover { border-color: var(--accent); } }
.plan-row--todo { border-left: var(--rg-trait-4) solid var(--rg-piste-orange); }
.plan-row--empty {
background: none;
border-style: dashed;
color: var(--text-muted);
}
.plan-row__time {
font-family: var(--font-mono);
font-size: var(--fs-sm);
font-weight: var(--rg-graisse-gras);
color: var(--text);
}
.plan-row__fixed {
margin-left: var(--rg-espace-1);
color: var(--accent);
}
.plan-row__label {
font-size: var(--fs-sm);
color: var(--text);
}
.plan-row__detail {
font-size: var(--fs-2xs);
color: var(--text-muted);
text-align: right;
}
.plan-row__todo {
grid-column: 2 / -1;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
color: var(--rg-piste-orange);
}
/* ---- Bandeau d'avertissement ---- */
.notice {
padding: var(--rg-espace-4) var(--rg-espace-4);
margin-bottom: var(--rg-espace-5);
border-radius: var(--r-md);
font-size: var(--fs-xs);
line-height: var(--rg-interligne-texte);
color: var(--text-soft);
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
}
.notice--warn {
background: color-mix(in srgb, var(--rg-piste-orange) 10%, transparent);
border-color: color-mix(in srgb, var(--rg-piste-orange) 45%, transparent);
}
.notice strong { color: var(--text); }
/* ---- Aperçu du mail ---- */
.mail-preview {
margin: 0;
padding: var(--rg-espace-4) var(--rg-espace-4);
border-radius: var(--r-sm);
background: var(--surface-2);
border: var(--rg-trait-1) solid var(--border);
font-family: var(--font-mono);
font-size: var(--fs-2xs);
line-height: var(--rg-interligne-texte);
color: var(--text-soft);
white-space: pre-wrap;
word-break: break-word;
max-height: 320px;
overflow-y: auto;
}
@media (max-width: 720px) {
.hero-actions { width: 100%; }
.plan-row {
grid-template-columns: 64px 1fr;
}
.plan-row__detail {
grid-column: 2;
text-align: left;
}
}
/* ---- « Quand ? » : journée ouverte / autre date / flexible ---- */
.when-toggle {
display: flex;
gap: var(--rg-espace-1);
padding: var(--rg-espace-1);
margin-bottom: var(--rg-espace-4);
border-radius: var(--r-pill);
background: var(--surface-2);
border: var(--rg-trait-1) solid var(--border);
}
.when-toggle__opt {
flex: 1;
height: 34px;
border: 0;
border-radius: var(--r-pill);
background: transparent;
color: var(--text-muted);
font-family: var(--rg-police-texte);
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-semi);
cursor: pointer;
transition:
background var(--t-base) var(--ease),
color var(--t-base) var(--ease);
}
@media (hover: hover) { .when-toggle__opt:hover { color: var(--text); } }
.when-toggle__opt.is-selected {
background: var(--rg-texte-principal);
color: var(--rg-texte-inverse);
}
/* ==========================================================
14. DASHBOARD INSIDE
========================================================== */
.dash-tasks {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--rg-espace-2);
}
.dash-task a {
display: flex;
align-items: center;
gap: var(--rg-espace-3);
padding: var(--rg-espace-3) var(--rg-espace-3);
border-radius: var(--r-sm);
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
text-decoration: none;
transition:
border-color var(--t-base) var(--ease),
background var(--t-base) var(--ease);
}
@media (hover: hover) { .dash-task a:hover { border-color: var(--accent); } }
.dash-task__count {
min-width: 30px;
height: 30px;
padding: 0 var(--rg-espace-2);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: var(--r-sm);
font-family: var(--font-mono);
font-size: var(--fs-sm);
font-weight: var(--rg-graisse-gras);
}
.dash-task--warn .dash-task__count {
background: color-mix(in srgb, var(--rg-piste-orange) 16%, transparent);
color: var(--rg-piste-orange);
}
.dash-task--hot .dash-task__count {
background: var(--accent-soft);
color: var(--accent);
}
.dash-task__body {
display: flex;
flex-direction: column;
gap: var(--rg-trait-1);
min-width: 0;
}
.dash-task__label {
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-semi);
color: var(--text);
}
.dash-task__detail {
font-size: var(--fs-3xs);
color: var(--text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* LE VERBE
---------------------------------------------------------
La ligne entiere etait deja cliquable, mais rien ne le disait
et surtout rien ne disait CE QU'ON VA FAIRE. « Rappeler »,
« Dater », « Completer », « Envoyer » : le tableau de bord
cesse d'etre une alarme pour devenir une liste de gestes. */
.dash-task__act {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: calc(var(--rg-espace-1) / 2);
flex-shrink: 0;
padding: var(--rg-espace-1) var(--rg-espace-2) var(--rg-espace-1) var(--rg-espace-3);
border-radius: var(--rg-rayon-0);
background: var(--surface-2);
color: var(--text-soft);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
white-space: nowrap;
transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.dash-task__act svg { width: 13px; height: 13px; }
@media (hover: hover) { .dash-task a:hover .dash-task__act { background: var(--accent); color: var(--rg-neutre-blanc); } }
/* Le total, en tete : « 4 choses a traiter · 2 motifs ». On sait
l'ampleur avant de lire le detail. */
.dash-tasks__somme {
margin: 0 0 var(--rg-espace-2);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
text-transform: uppercase;
letter-spacing: var(--rg-label-m-espacement);
color: var(--text);
}
.dash-tasks__somme span { color: var(--text-faint); font-weight: var(--rg-graisse-semi); }
/* Rien à traiter, l'état qu'on veut voir */
.dash-clear {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--rg-espace-2);
padding: var(--rg-espace-6) var(--rg-espace-4);
}
.dash-clear__mark {
width: 38px;
height: 38px;
display: grid;
place-items: center;
border-radius: var(--rg-rayon-0);
background: color-mix(in srgb, var(--rg-piste-vert) 16%, transparent);
color: var(--rg-piste-vert);
font-size: var(--rg-taille-h3);
font-weight: var(--rg-graisse-gras);
}
.dash-clear__text {
margin: 0;
font-size: var(--fs-sm);
font-weight: var(--rg-graisse-semi);
color: var(--text);
}
/* CE QUI A ETE VERIFIE
---------------------------------------------------------
Une coche seule au milieu d'une carte de 400 px a l'air d'une
panne. En listant les controles passes, la carte prouve
qu'elle travaille, et apprend au passage ce qu'elle
surveille. */
.dash-clear__list {
list-style: none;
margin: calc(var(--rg-espace-1) / 2) 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--rg-espace-1);
text-align: center;
}
.dash-clear__list li {
font-size: var(--fs-3xs);
color: var(--text-faint);
}
.dash-clear__list li::before {
content: "· ";
color: var(--text-faint);
}
.dash-clear__mark svg { width: 19px; height: 19px; }
/* =========================================================
L'ENTETE DE LA PROCHAINE JOURNEE
---------------------------------------------------------
Le widget ne disait pas DE QUELLE JOURNEE il parlait : cinq
convocations sans date, sans lieu, sans effectif. Le jour, le
circuit, le compte a rebours et les chiffres passent devant.
========================================================= */
.dash-day {
padding-bottom: var(--rg-espace-3);
margin-bottom: var(--rg-espace-3);
border-bottom: var(--rg-trait-1) solid var(--border);
}
.dash-day__date {
margin: 0;
display: flex;
align-items: baseline;
gap: var(--rg-espace-2);
flex-wrap: wrap;
font-size: var(--fs-sm);
font-weight: var(--rg-graisse-gras);
color: var(--text);
}
.dash-day__quand {
padding: calc(var(--rg-espace-1) / 2) var(--rg-espace-2);
border-radius: var(--rg-rayon-0);
background: var(--surface-2);
color: var(--text-muted);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: 0;
text-transform: none;
}
.dash-day__quand.is-proche { background: var(--accent-soft); color: var(--accent); }
.dash-day__lieu {
margin: calc(var(--rg-espace-1) / 2) 0 0;
font-size: var(--fs-3xs);
color: var(--text-muted);
}
.dash-day__chiffres {
display: flex;
gap: var(--rg-espace-4);
margin-top: var(--rg-espace-3);
}
.dash-day__chiffre {
display: flex;
align-items: baseline;
gap: var(--rg-espace-1);
font-size: var(--fs-3xs);
color: var(--text-muted);
}
.dash-day__chiffre b {
font-size: var(--fs-md);
font-weight: var(--rg-graisse-extra);
color: var(--text);
font-variant-numeric: tabular-nums;
}
.dash-day__vide {
margin: var(--rg-espace-3) 0 0;
font-size: var(--fs-xs);
color: var(--text-muted);
}
/* « + 2 autres vagues au planning » : la carte assume qu'elle
est un extrait et dit ou est la suite. */
.dash-day__plus {
display: inline-block;
margin-top: var(--rg-espace-2);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
color: var(--text-muted);
text-decoration: none;
}
@media (hover: hover) { .dash-day__plus:hover { color: var(--accent); } }
/* =========================================================
A RAPPELER
---------------------------------------------------------
Le retard et le numero : les deux choses qui decident d'un
appel, et les deux qui manquaient.
========================================================= */
.dash-calls {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.dash-call {
display: flex;
align-items: stretch;
gap: var(--rg-espace-1);
border-bottom: var(--rg-trait-1) solid var(--border);
}
.dash-call:last-child { border-bottom: 0; }
.dash-call__main {
display: flex;
align-items: center;
gap: var(--rg-espace-3);
flex: 1 1 auto;
min-width: 0;
padding: var(--rg-espace-2) var(--rg-espace-2);
border-radius: var(--r-sm);
text-decoration: none;
}
@media (hover: hover) { .dash-call__main:hover { background: var(--surface-2); } }
.dash-call__txt {
display: flex;
flex-direction: column;
gap: var(--rg-trait-1);
min-width: 0;
flex: 1 1 auto;
}
.dash-call__txt b {
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-semi);
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dash-call__txt em {
font-style: normal;
font-size: var(--fs-3xs);
color: var(--text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dash-call__retard {
flex-shrink: 0;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
color: var(--text-faint);
white-space: nowrap;
}
.dash-call__retard.is-tard { color: var(--rg-piste-orange); font-weight: var(--rg-graisse-gras); }
.dash-call__tel {
flex-shrink: 0;
align-self: center;
width: 30px;
height: 30px;
display: grid;
place-items: center;
border-radius: var(--rg-rayon-0);
border: var(--rg-trait-1) solid var(--border);
color: var(--text-muted);
transition: color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.dash-call__tel svg { width: 15px; height: 15px; }
@media (hover: hover) { .dash-call__tel:hover { color: var(--accent); border-color: var(--accent); } }
/* Une fiche sans numero garde la place du bouton : sinon la
colonne des retards se decale d'une ligne a l'autre. */
.dash-call__vide {
flex-shrink: 0;
width: 30px;
}
/* Le titre d'une vague porte son briefing en second. */
.agenda__title em {
font-style: normal;
font-weight: var(--rg-graisse-moyen);
color: var(--text-muted);
margin-left: var(--rg-espace-2);
}
/* Listes simples des widgets */
.dash-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.dash-list__item {
display: flex;
align-items: center;
gap: var(--rg-espace-3);
padding: var(--rg-espace-3) 0;
border-bottom: var(--rg-trait-1) solid var(--border);
}
.dash-list__item:last-child { border-bottom: 0; }
.dash-list__main {
display: flex;
flex-direction: column;
gap: var(--rg-trait-1);
flex: 1;
min-width: 0;
}
.dash-list__name {
font-size: var(--fs-sm);
font-weight: var(--rg-graisse-semi);
color: var(--text);
}
.dash-list__meta {
font-size: var(--fs-2xs);
color: var(--text-muted);
}
.dash-empty {
margin: 0;
padding: var(--rg-espace-5) var(--rg-espace-3);
text-align: center;
font-size: var(--fs-sm);
color: var(--text-muted);
}
/* ==========================================================
15. RÉSERVATION À ONGLETS (Inside)
========================================================== */
.resa-tabs {
display: flex;
gap: var(--rg-espace-1);
padding: 0 var(--rg-espace-5);
border-bottom: var(--rg-trait-1) solid var(--border);
flex-shrink: 0;
}
.resa-tab {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
padding: var(--rg-espace-3) var(--rg-espace-4) var(--rg-espace-3);
border: 0;
background: none;
color: var(--text-muted);
font-family: var(--rg-police-texte);
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-semi);
cursor: pointer;
border-bottom: var(--rg-trait-3) solid transparent;
margin-bottom: calc(var(--rg-trait-1) * -1);
transition: color var(--t-base) var(--ease);
}
@media (hover: hover) { .resa-tab:hover { color: var(--text); } }
.resa-tab.is-active {
color: var(--text);
border-bottom-color: var(--accent);
}
.resa-tab__count {
min-width: 18px;
height: 18px;
padding: 0 var(--rg-espace-1);
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--r-pill);
background: var(--surface-2);
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-gras);
}
.resa-tab.is-active .resa-tab__count {
background: var(--accent);
color: var(--brand-white);
}
/* Cases à cocher en ligne */
.check-line {
display: flex;
align-items: center;
gap: var(--rg-espace-2);
padding: var(--rg-espace-2) 0 calc(var(--rg-espace-1) / 2);
font-size: var(--fs-xs);
color: var(--text-soft);
cursor: pointer;
}
.check-line input { accent-color: var(--accent); width: 15px; height: 15px; }
/* Grille à trois colonnes pour les montants */
.form-grid--3 { grid-template-columns: repeat(3, 1fr); }
/* Ville, pays, code : le code tient en deux caracteres, il ne prend pas un tiers de la ligne. */
.form-grid--lieu { grid-template-columns: 1fr 1fr 92px; }
@media (max-width: 620px) {
.form-grid--3 { grid-template-columns: 1fr; }
.form-grid--lieu { grid-template-columns: 1fr 1fr; }
.form-grid--lieu > .form-field:last-child { grid-column: 1 / -1; }
}
/* Une prestation */
.item-line {
padding: var(--rg-espace-4) var(--rg-espace-4);
margin-bottom: var(--rg-espace-3);
border-radius: var(--r-sm);
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
}
.item-line__head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--rg-espace-2);
}
.item-line__num,
.sale-line__num {
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--rg-rayon-0);
background: var(--accent-soft);
color: var(--accent);
font-family: var(--font-mono);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
}
.item-line__del {
width: 26px;
height: 26px;
display: grid;
place-items: center;
border: 0;
border-radius: var(--r-xs);
background: none;
color: var(--text-muted);
cursor: pointer;
transition: color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
@media (hover: hover) { .item-line__del:hover { background: var(--surface-2); color: var(--accent); } }
.item-line__del svg { width: 14px; height: 14px; }
/* Une ligne commerciale */
.sale-line {
padding: var(--rg-espace-4) var(--rg-espace-4);
margin-bottom: var(--rg-espace-3);
border-radius: var(--r-sm);
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
}
.sale-line__title {
display: flex;
align-items: center;
gap: var(--rg-espace-2);
margin: 0 0 var(--rg-espace-3);
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-semi);
color: var(--text);
}
.sale-total {
margin-top: var(--rg-espace-4);
padding: var(--rg-espace-4) var(--rg-espace-4);
border-radius: var(--r-sm);
background: var(--surface-2);
border: var(--rg-trait-1) solid var(--border);
}
.sale-total__row {
display: flex;
justify-content: space-between;
gap: var(--rg-espace-4);
padding: var(--rg-espace-1) 0;
font-size: var(--fs-xs);
color: var(--text-muted);
}
.sale-total__row strong {
font-family: var(--font-mono);
color: var(--text);
}
.sale-total__row--due {
margin-top: var(--rg-espace-1);
padding-top: var(--rg-espace-2);
border-top: var(--rg-trait-1) solid var(--border);
}
.sale-total__row--due.is-due strong { color: var(--accent); }
/* Compléments de la fiche réservation */
.resa-row__buyer { color: var(--text-muted); font-style: italic; }
.resa-row__money {
margin: var(--rg-espace-2) 0 0;
font-family: var(--font-mono);
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-semi);
color: var(--text-soft);
}
.import-notice {
display: flex;
align-items: center;
gap: var(--rg-espace-4);
}
.import-notice > div { flex: 1; }
.resa-more {
grid-column: 1 / -1;
justify-self: center;
margin-top: var(--rg-espace-2);
}
/* ---- Journées groupées par mois ---- */
.day-month { margin-bottom: var(--rg-espace-4); }
.day-month__label {
display: flex;
align-items: center;
gap: var(--rg-espace-2);
margin: 0 0 var(--rg-espace-2);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--text-muted);
}
.day-month__count {
min-width: 18px;
height: 18px;
padding: 0 var(--rg-espace-2);
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--r-pill);
background: var(--surface-2);
font-size: var(--rg-taille-label-s);
letter-spacing: 0;
}
.day-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: var(--rg-espace-2);
}
.day-card--past { opacity: 0.5; }
/* ---- Bloc des journées, replié / déplié ---- */
.day-toggle svg,
.day-month__chev {
width: 15px;
height: 15px;
transition: transform var(--t-base) var(--ease);
}
.day-toggle__chev.is-open,
.day-month__chev.is-open { transform: rotate(90deg); }
.day-toggle__chev { transform: rotate(0deg); }
.day-toggle__chev.is-open { transform: rotate(180deg); }
.day-peek {
display: flex;
flex-wrap: wrap;
gap: var(--rg-espace-2);
}
.day-chip {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
height: 34px;
padding: 0 var(--rg-espace-4);
border-radius: var(--r-pill);
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
color: var(--text-soft);
font-family: var(--rg-police-texte);
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-semi);
cursor: pointer;
transition: border-color var(--t-base) var(--ease);
}
@media (hover: hover) { .day-chip:hover { border-color: var(--border-2); } }
.day-chip--active {
background: var(--accent-soft);
border-color: var(--accent);
color: var(--accent);
}
.day-chip__seats {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
color: var(--text-muted);
}
/* L'en-tête de mois devient un bouton */
button.day-month__label {
width: 100%;
border: 0;
background: none;
cursor: pointer;
padding: var(--rg-espace-2) 0;
font-family: var(--rg-police-texte);
text-align: left;
transition: color var(--t-base) var(--ease);
}
@media (hover: hover) { button.day-month__label:hover { color: var(--text); } }
/* ---- Sélection multiple et barre d'action groupée ---- */
.row-pick { display: inline-flex; align-items: center; cursor: pointer; }
.row-pick input {
accent-color: var(--accent);
width: 16px;
height: 16px;
cursor: pointer;
}
.resa-row--picked {
border-color: var(--accent);
background: var(--accent-soft);
}
.bulk-bar {
position: sticky;
top: 12px;
z-index: 5;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--rg-espace-3);
padding: var(--rg-espace-3) var(--rg-espace-4);
margin-bottom: var(--rg-espace-4);
border-radius: var(--r-md);
background: var(--bg-2);
border: var(--rg-trait-1) solid var(--accent);
box-shadow: none;
}
.bulk-bar__count {
font-size: var(--fs-sm);
font-weight: var(--rg-graisse-semi);
color: var(--text);
flex-shrink: 1;
min-width: 0;
}
/* Les boutons ne doivent jamais se chevaucher : c'est le compteur
qui cède la place, pas eux. */
.bulk-bar__actions {
display: flex;
align-items: center;
gap: var(--rg-espace-2);
flex-wrap: wrap;
flex-shrink: 0;
}
.bulk-bar__actions > * { flex-shrink: 0; white-space: nowrap; }
.bulk-bar__date {
height: 32px;
padding: 0 var(--rg-espace-3);
font-size: var(--fs-2xs);
width: auto;
}
/* ==========================================================
16. SURVOL ET SÉLECTION, CORRECTION
----------------------------------------------------------
Deux défauts corrigés ici :
1. Le survol virait au gris. Les règles d'origine passaient la
bordure à `--border-2`, soit du blanc à 14 % : sur fond
sombre ça se lit comme un élément désactivé, pas comme un
élément qu'on pointe. On prend `--border-focus`, qui est le
rose de la marque adouci.
2. `.x:hover` (0,2,0) est PLUS SPÉCIFIQUE que `.x--active`
(0,1,0). Quel que soit l'ordre d'écriture, survoler un
élément sélectionné effaçait donc son liseré rose. D'où les
règles `--active:hover` ci-dessous, qui rétablissent l'état
sélectionné pendant le survol.
========================================================== */
/* ---- Journées : pastilles et cartes ---- */
@media (hover: hover) { .day-chip:hover,
.day-card:hover {
border-color: var(--border-focus);
background: var(--surface-2);
} }
.day-chip--active,
.day-card--active {
border-color: var(--accent);
}
@media (hover: hover) { .day-chip--active:hover,
.day-card--active:hover {
border-color: var(--accent);
background: var(--accent-soft);
} }
/* Une journée passée s'éclaircit au survol : on peut la consulter. */
@media (hover: hover) { .day-card--past:hover { opacity: 0.8; } }
/* ---- Chips de filtre (statuts) ---- */
@media (hover: hover) { .su-chip:hover {
border-color: var(--border-focus);
color: var(--text);
} }
@media (hover: hover) { .su-chip--active:hover {
border-color: var(--accent);
background: var(--accent-soft);
color: var(--accent);
} }
/* ---- Lignes de liste : réservations, invités, accès ---- */
@media (hover: hover) { .resa-row:hover,
.access-row:hover {
border-color: var(--border-focus);
} }
@media (hover: hover) { .resa-row--picked:hover {
border-color: var(--accent);
background: var(--accent-soft);
} }
/* ---- Sélecteurs de la modale ---- */
@media (hover: hover) { .space-toggle__option:hover,
.su-space:hover,
.pick:hover,
.item-line:hover,
.sale-line:hover {
border-color: var(--border-focus);
} }
@media (hover: hover) { .space-toggle__option.is-selected:hover,
.su-space--active:hover,
.pick.is-selected:hover {
border-color: var(--accent);
background: var(--accent-soft);
} }
/* ---- Chips de discipline / catégorie ---- */
@media (hover: hover) { .discipline-chip:hover { border-color: var(--border-focus); } }
@media (hover: hover) { .discipline-chip.is-selected:hover {
border-color: var(--accent);
background: var(--accent-soft);
} }
/* ---- En-tête de mois : on va vers le rose, pas vers le blanc ---- */
@media (hover: hover) { button.day-month__label:hover { color: var(--accent); } }
/* ---- Sélection de texte : le bleu par défaut du navigateur
jurait avec la charte. ---- */
::selection {
background: var(--accent-soft);
color: var(--text);
}
/* Les boutons d'en-tête de section ne doivent pas se replier sur
eux-mêmes : « Afficher les 47 passées » revenait à la ligne au
milieu du mot et chevauchait « Replier ». */
/* `.access-section__head > div { flex: 1 }` s'appliquait AUSSI au
groupe de boutons, qui héritait donc de flex-grow:1 et s'arrêtait
au milieu de la ligne au lieu de se caler à droite comme le reste
de la page. `flex-shrink: 0` seul ne corrigeait pas le grow. */
.access-section__head .hero-actions {
flex: 0 0 auto;
margin-left: auto;
flex-wrap: nowrap;
}
.access-section__head .hero-actions > * {
white-space: nowrap;
flex-shrink: 0;
}
.day-toggle {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
}
/* ==========================================================
CRM, SUIVI COMMERCIAL
----------------------------------------------------------
Une ligne de CRM se lit en diagonale, le téléphone à la
main : le score à gauche, l'identité au milieu, ce qu'on
fait à droite. La couleur ne décore pas, elle dit la
température, et c'est la seule chose qu'elle dit.
========================================================== */
.crm-list {
display: flex;
flex-direction: column;
gap: var(--rg-espace-2);
}
.crm-row {
display: grid;
grid-template-columns: 62px 1fr auto;
align-items: center;
gap: var(--gap-md);
padding: var(--rg-espace-3) var(--rg-espace-4);
border-radius: var(--r-md);
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
border-left: var(--rg-trait-4) solid var(--border-2);
transition: border-color var(--t-base) var(--ease);
}
@media (hover: hover) { .crm-row:hover { border-color: var(--border-2); } }
/* Trois couleurs de pastille, pas trois nuances d'une seule : du
rose pâle à côté du rose vif ne se distinguait pas dans une
liste qu'on parcourt à la verticale. Chacune porte de toute
façon son libellé écrit juste sous le score. */
.crm-row--prio { border-left-color: var(--crm-rose); }
.crm-row--suivre { border-left-color: var(--crm-orange); }
.crm-row--veille { border-left-color: var(--crm-bleu); }
/* Le score : un seul chiffre, gros, sans unité. « 72 / 100 »
se lit deux fois plus lentement pour la même information. */
.crm-row__score {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--rg-trait-1);
}
.crm-row__score-val {
font-family: var(--font-display); font-style: var(--rg-titre-style);
font-size: var(--fs-xl);
font-weight: var(--rg-graisse-gras);
line-height: var(--rg-interligne-plein);
color: var(--text);
}
.crm-row__score-lbl {
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
text-transform: uppercase;
letter-spacing: var(--rg-label-m-espacement);
color: var(--text-muted);
}
.crm-row--prio .crm-row__score-val { color: var(--crm-rose); }
.crm-row--suivre .crm-row__score-val { color: var(--crm-orange); }
.crm-row--veille .crm-row__score-val { color: var(--crm-bleu); }
.crm-row__main { min-width: 0; }
.crm-row__name {
margin: 0 0 calc(var(--rg-espace-1) / 2);
display: flex;
align-items: center;
gap: var(--rg-espace-2);
flex-wrap: wrap;
font-size: var(--fs-md);
font-weight: var(--rg-graisse-semi);
color: var(--text);
}
.crm-row__societe {
font-weight: var(--rg-graisse-moyen);
color: var(--text-muted);
}
.crm-row__meta,
.crm-row__last {
margin: 0;
font-size: var(--fs-2xs);
color: var(--text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.crm-row__last { color: var(--text-soft, var(--text-muted)); }
.crm-row__side {
display: flex;
align-items: center;
gap: var(--rg-espace-3);
flex-wrap: wrap;
justify-content: flex-end;
}
.crm-row__money {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-semi);
color: var(--text);
}
.crm-row__rappel {
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
padding: var(--rg-espace-1) var(--rg-espace-2);
border-radius: var(--r-pill);
background: color-mix(in srgb, var(--rg-piste-orange) 16%, transparent);
color: var(--rg-piste-orange);
}
/* Une date proposée par le calcul se distingue d'une date posée
par la responsable : elle est en pointillés tant que personne
ne l'a validée. */
.crm-row__rappel.is-propose {
background: transparent;
border: var(--rg-trait-1) dashed var(--border-2);
color: var(--text-muted);
}
.resa-badge--neutral { background: var(--surface-2); color: var(--text-muted); }
.resa-badge--info { background: color-mix(in srgb, var(--rg-marine-0) 16%, transparent); color: var(--rg-marine-0); }
/* ---------- LA FICHE ---------- */
.modal--wide { max-width: 760px; }
.modal--xwide { max-width: min(1120px, calc(100vw - 40px)); }
.crm-fiche__head {
display: flex;
gap: var(--gap-md);
align-items: flex-start;
}
.crm-fiche__score {
flex: 0 0 auto;
width: 76px;
height: 76px;
border-radius: var(--r-lg);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: calc(var(--rg-espace-1) / 2);
background: var(--surface-2);
border: var(--rg-trait-1) solid var(--border);
}
.crm-fiche__score--prio { background: var(--accent-soft); border-color: transparent; }
.crm-fiche__score--suivre { background: color-mix(in srgb, var(--rg-piste-orange) 16%, transparent); border-color: transparent; }
.crm-fiche__score--veille { background: color-mix(in srgb, var(--rg-marine-0) 14%, transparent); border-color: transparent; }
.crm-fiche__score-val {
font-family: var(--font-display); font-style: var(--rg-titre-style);
font-size: var(--fs-2xl);
font-weight: var(--rg-graisse-gras);
line-height: var(--rg-interligne-plein);
color: var(--text);
}
.crm-fiche__score--prio .crm-fiche__score-val { color: var(--crm-rose); }
.crm-fiche__score--suivre .crm-fiche__score-val { color: var(--crm-orange); }
.crm-fiche__score--veille .crm-fiche__score-val { color: var(--crm-bleu); }
.crm-fiche__score-lbl {
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
text-transform: uppercase;
letter-spacing: var(--rg-label-m-espacement);
color: var(--text-muted);
}
.crm-fiche__id { min-width: 0; flex: 1; }
.crm-fiche__name {
margin: 0 0 var(--rg-espace-1);
display: flex;
align-items: center;
gap: var(--rg-espace-2);
flex-wrap: wrap;
font-size: var(--fs-lg);
font-weight: var(--rg-graisse-semi);
color: var(--text);
}
.crm-fiche__meta {
margin: 0 0 var(--rg-espace-1);
font-size: var(--fs-2xs);
color: var(--text-muted);
}
.crm-fiche__contact {
display: flex;
gap: var(--rg-espace-2);
flex-wrap: wrap;
margin-top: var(--rg-espace-2);
}
.crm-fiche__warn {
font-size: var(--fs-2xs);
color: var(--text-muted);
font-style: italic;
}
/* Le consentement marketing. Écrit en clair sous les
coordonnées, parce que c'est là qu'on regarde juste avant
d'ajouter quelqu'un à une campagne, et parce qu'un refus
discret est un refus qu'on finit par ne plus voir. */
.crm-fiche__optin {
display: flex;
align-items: baseline;
gap: var(--rg-espace-2);
margin: var(--rg-espace-3) 0 0;
padding-left: var(--rg-espace-4);
position: relative;
font-size: var(--fs-2xs);
color: var(--text-muted);
}
.crm-fiche__optin::before {
content: "";
position: absolute;
left: 0;
top: 0.42em;
width: 8px;
height: 8px;
border-radius: var(--rg-rayon-0);
background: var(--border-2);
}
.crm-fiche__optin.is-oui { color: var(--text-soft, var(--text)); }
.crm-fiche__optin.is-oui::before { background: var(--pop-3); }
.crm-fiche__optin em { font-style: normal; color: var(--text-faint); }
/* Le panier : deux colonnes, libellé à gauche, valeur à droite.
C'est ce qu'on relit juste avant de composer le numéro. */
.crm-panier {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--rg-espace-2) var(--rg-espace-4);
}
.crm-panier__ligne {
display: flex;
justify-content: space-between;
gap: var(--rg-espace-3);
padding: var(--rg-espace-2) 0;
border-bottom: var(--rg-trait-1) solid var(--border);
font-size: var(--fs-xs);
}
.crm-panier__ligne span { color: var(--text-muted); }
.crm-panier__ligne b { color: var(--text); font-weight: var(--rg-graisse-semi); text-align: right; }
/* Le détail du score. Sans lui, personne ne fait confiance au
chiffre, et un score auquel on ne croit pas ne sert à rien. */
.crm-score-lignes {
display: flex;
flex-direction: column;
}
.crm-score-ligne {
display: flex;
justify-content: space-between;
gap: var(--rg-espace-3);
padding: var(--rg-espace-2) 0;
border-bottom: var(--rg-trait-1) solid var(--border);
font-size: var(--fs-xs);
color: var(--text-muted);
}
.crm-score-ligne em { font-style: normal; opacity: 0.7; }
.crm-score-ligne b { color: var(--text); font-family: var(--font-mono); }
.crm-note-add {
display: grid;
grid-template-columns: 130px 1fr auto;
gap: var(--rg-espace-2);
}
.crm-notes {
display: flex;
flex-direction: column;
gap: var(--rg-espace-2);
margin-top: var(--rg-espace-3);
}
.crm-note {
display: flex;
align-items: baseline;
gap: var(--rg-espace-3);
padding: var(--rg-espace-2) var(--rg-espace-3);
border-radius: var(--r-sm);
background: var(--surface-2);
font-size: var(--fs-xs);
}
.crm-note__type {
flex: 0 0 auto;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
text-transform: uppercase;
letter-spacing: var(--rg-label-m-espacement);
color: var(--text-muted);
}
.crm-note__type--appel { color: var(--accent); }
.crm-note__texte { flex: 1; color: var(--text); }
.crm-note__meta { flex: 0 0 auto; font-size: var(--fs-3xs); color: var(--text-muted); }
/* La chronologie : le trait vertical est ce qui la rend lisible
d'un coup d'œil, et les moments forts sont les seuls en gras.
Tout marquer revient à ne rien marquer. */
.crm-timeline {
list-style: none;
margin: 0;
padding: 0 0 0 var(--rg-espace-4);
border-left: var(--rg-trait-1) solid var(--border);
display: flex;
flex-direction: column;
gap: var(--rg-espace-2);
}
.crm-timeline__item {
position: relative;
display: flex;
gap: var(--rg-espace-3);
font-size: var(--fs-xs);
color: var(--text-muted);
}
.crm-timeline__item::before {
content: "";
position: absolute;
left: -18px;
top: 6px;
width: 7px;
height: 7px;
border-radius: var(--rg-rayon-0);
background: var(--border-2);
}
.crm-timeline__item.is-fort::before { background: var(--accent); }
.crm-timeline__item.is-fort .crm-timeline__quoi { color: var(--text); font-weight: var(--rg-graisse-semi); }
.crm-timeline__quand {
flex: 0 0 120px;
font-size: var(--fs-3xs);
text-transform: lowercase;
}
.crm-timeline__quoi { flex: 1; }
/* ---------- ATTRACTIVITÉ DES OFFRES ---------- */
.crm-offres { display: flex; flex-direction: column; }
/* Trois barres empilées par offre plutôt que trois colonnes de
tableau : la marche perdue entre « regardée » et « demandée »
se voit alors sans lire un seul chiffre. */
.crm-offres__row {
display: grid;
grid-template-columns: 220px 1fr 150px;
align-items: center;
gap: var(--rg-espace-5);
padding: var(--rg-espace-4) 0;
border-bottom: var(--rg-trait-1) solid var(--border);
}
.crm-offres__row:last-child { border-bottom: 0; }
.crm-offres__name {
display: flex;
flex-direction: column;
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-semi);
color: var(--text);
}
.crm-offres__name em {
font-style: normal;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-moyen);
color: var(--text-muted);
}
.crm-offres__bars {
display: flex;
flex-direction: column;
gap: var(--rg-espace-1);
}
.crm-offres__bar {
display: grid;
grid-template-columns: 1fr 26px;
align-items: center;
gap: var(--rg-espace-2);
}
.crm-offres__track {
height: 10px;
background: var(--crm-inactif);
border-radius: var(--rg-rayon-0);
}
.crm-offres__fill {
display: block;
height: 100%;
border-radius: var(--rg-rayon-0) var(--rg-rayon-0) var(--rg-rayon-0) var(--rg-rayon-0);
}
.crm-offres__fill--1 { background: var(--crm-bleu); }
.crm-offres__fill--2 { background: var(--crm-orange); }
.crm-offres__fill--3 { background: var(--crm-vert); }
.crm-offres__bar em {
font-style: normal;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
text-align: right;
font-variant-numeric: tabular-nums;
color: var(--text-muted);
}
.crm-offres__end { text-align: right; }
.crm-offres__taux {
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-semi);
font-variant-numeric: tabular-nums;
color: var(--text);
}
.crm-flag {
display: inline-block;
padding: var(--rg-espace-1) var(--rg-espace-2);
border-radius: var(--r-pill);
background: var(--accent-soft);
color: var(--accent);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
}
.form-hint {
margin: var(--rg-espace-1) 0 0;
font-size: var(--fs-3xs);
color: var(--text-muted);
}
@media (max-width: 720px) {
.crm-row { grid-template-columns: 52px 1fr; }
.crm-row__side { grid-column: 1 / -1; justify-content: flex-start; }
.crm-note-add { grid-template-columns: 1fr; }
.crm-offres__head { display: none; }
.crm-offres__row { grid-template-columns: 1fr; gap: var(--rg-espace-2); }
.crm-timeline__quand { flex: 0 0 90px; }
}
/* Le bandeau du jeu fictif porte son bouton de sortie : lire
« ces données sont fausses » sans pouvoir les retirer dans la
foulée est le meilleur moyen de les oublier en place. */
.crm-demo-notice {
display: flex;
align-items: center;
gap: var(--gap-md);
justify-content: space-between;
flex-wrap: wrap;
}
.crm-demo-notice .btn-secondary { flex: 0 0 auto; }
/* ==========================================================
CRM, LECTURE GRAPHIQUE
----------------------------------------------------------
LES COULEURS viennent des pastilles de l'intranet, bleu
« En discussion », orange « À rappeler », vert « Gagné », rose
de la marque, et non d'une palette rapportée d'ailleurs. Un
camaïeu de rose sur toute la page rendait l'analyse terne ; des
teintes qu'on n'emploie nulle part ailleurs la rendaient
étrangère au reste de l'outil.
Elles disent la même chose d'un graphique à l'autre, et c'est
ce qui en fait un langage :
gris → il ne s'est encore rien passé
bleu → attention (une offre regardée)
orange → intention (un panier constitué)
vert → demande (elle est partie)
rose → la marque, pour ce qui parle du prospect lui-même :
son score d'engagement et son type d'intérêt
Les pastilles telles quelles sont trop claires pour des aplats
sur fond blanc. Chaque teinte est donc ramenée dans la bande de
clarté en gardant SA famille, puis passée au validateur : bande,
saturation, séparation sous daltonisme, contraste sur le fond.
Le jeu sombre est recalculé sur le marine, jamais inversé.
Les couleurs des niveaux (prioritaire / à suivre / en veille)
portent toujours leur libellé écrit sous le score : la couleur
ne fait jamais l'identité toute seule.
========================================================== */
:root {
/* Les couleurs des pastilles de l'intranet, ramenées dans la
bande de clarté que demandent des aplats sur fond blanc :
même famille, même reconnaissance, lisibles en graphique. */
--crm-bleu: var(--rg-marine-0); /* attention, famille « En discussion » */
--crm-orange: var(--rg-piste-orange); /* intention, famille « À rappeler » */
--crm-vert: var(--rg-piste-vert); /* demande, famille « Gagné » */
--crm-rose: var(--rg-rose-5); /* la marque */
--crm-neutre: color-mix(in srgb, var(--rg-marine-5) 17%, transparent); /* pas encore d'intention */
--crm-inactif: color-mix(in srgb, var(--rg-marine-5) 9%, transparent); /* le reste de la piste */
}
:root[data-theme="dark"] {
--crm-bleu: var(--rg-marine-0);
--crm-orange: var(--rg-metier-jaune-fonce);
--crm-vert: var(--rg-piste-vert);
--crm-rose: var(--rg-rose-5);
--crm-neutre: color-mix(in srgb, var(--rg-neutre-blanc) 26%, transparent);
--crm-inactif: color-mix(in srgb, var(--rg-neutre-blanc) 12%, transparent);
}
/* LA MISE EN PAGE. Les graphiques ne vivent plus dans des
cartes : une bordure autour d'une lecture l'enferme et la
rétrécit. Ils occupent la largeur de la page, séparés par un
filet et de l'air, comme le reste des sections. */
.crm-figs { display: block; }
.crm-fig {
margin: 0;
padding: var(--rg-espace-5) 0 var(--rg-espace-6);
border-top: var(--rg-trait-1) solid var(--border);
}
.crm-fig:first-child { border-top: 0; padding-top: var(--rg-espace-2); }
.crm-fig__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--gap-md);
margin-bottom: var(--rg-espace-5);
}
.crm-fig__title {
margin: 0 0 var(--rg-espace-1);
font-size: var(--fs-lg);
font-weight: var(--rg-graisse-semi);
color: var(--text);
}
.crm-fig__sub,
.crm-fig__note {
margin: 0;
font-size: var(--fs-xs);
color: var(--text-muted);
max-width: 68ch;
}
.crm-fig__note { margin-top: var(--rg-espace-4); }
/* Le bouton « Chiffres » ouvre la table jumelle : aucune valeur
ne doit exister uniquement dans une infobulle. */
.crm-fig__toggle {
flex: 0 0 auto;
height: 28px;
padding: 0 var(--rg-espace-3);
border-radius: var(--r-pill);
border: var(--rg-trait-1) solid var(--border-2);
background: transparent;
color: var(--text-muted);
font-family: var(--rg-police-texte);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
cursor: pointer;
transition: color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
@media (hover: hover) { .crm-fig__toggle:hover { color: var(--text); border-color: var(--text-muted); } }
.crm-fig__toggle.is-on { color: var(--accent); border-color: var(--accent); }
.crm-fig__table { margin-top: var(--rg-espace-4); overflow-x: auto; }
.crm-table {
width: 100%;
max-width: 720px;
border-collapse: collapse;
font-size: var(--fs-2xs);
}
.crm-table th {
text-align: left;
padding: var(--rg-espace-2) var(--rg-espace-4) var(--rg-espace-2) 0;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
text-transform: uppercase;
letter-spacing: var(--rg-label-m-espacement);
color: var(--text-muted);
border-bottom: var(--rg-trait-1) solid var(--border);
}
.crm-table td {
padding: var(--rg-espace-2) var(--rg-espace-4) var(--rg-espace-2) 0;
color: var(--text);
border-bottom: var(--rg-trait-1) solid var(--border);
}
.crm-table__num { text-align: right; font-variant-numeric: tabular-nums; }
/* ---------- LÉGENDE ---------- */
.crm-legend {
display: flex;
gap: var(--rg-espace-5);
flex-wrap: wrap;
margin-bottom: var(--rg-espace-4);
}
.crm-legend__item {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
font-size: var(--fs-2xs);
color: var(--text-muted);
}
.crm-key {
width: 11px;
height: 11px;
border-radius: var(--rg-rayon-0);
flex: 0 0 auto;
}
.crm-key--demande { background: var(--crm-vert); }
.crm-key--reste { background: var(--crm-inactif); }
.crm-key--e1 { background: var(--crm-bleu); }
.crm-key--e2 { background: var(--crm-orange); }
.crm-key--e3 { background: var(--crm-vert); }
/* ---------- L'ENTONNOIR ---------- */
.crm-funnel { display: flex; flex-direction: column; gap: var(--rg-espace-3); }
/* Plus de largeur plafonnée : une piste qui s'arrête aux deux
tiers de la page laisse un vide à droite et déséquilibre tout
le bloc. Elles vont jusqu'au bord du contenu. */
.crm-funnel__row {
display: grid;
grid-template-columns: 170px 1fr 44px 56px;
align-items: center;
gap: var(--rg-espace-4);
}
.crm-funnel__label {
font-size: var(--fs-2xs);
color: var(--text-soft);
}
.crm-funnel__track {
height: 22px;
background: var(--crm-inactif);
border-radius: var(--rg-rayon-0);
}
/* Barre fine, extrémité arrondie côté donnée, carrée à la base :
la ligne de départ doit rester une ligne droite. */
.crm-funnel__bar {
display: block;
height: 100%;
border-radius: var(--rg-rayon-0) var(--rg-rayon-0) var(--rg-rayon-0) var(--rg-rayon-0);
}
/* Le même langage que partout : rien encore → attention →
intention → demande. L'étape « visite » est grise parce qu'à
ce stade il ne s'est justement rien passé. */
.crm-funnel__bar--1 { background: var(--crm-neutre); }
.crm-funnel__bar--2 { background: var(--crm-bleu); }
.crm-funnel__bar--3 { background: var(--crm-orange); }
.crm-funnel__bar--4 { background: var(--crm-vert); }
.crm-funnel__val {
text-align: right;
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-semi);
font-variant-numeric: tabular-nums;
color: var(--text);
}
.crm-funnel__taux {
text-align: right;
font-size: var(--fs-3xs);
font-variant-numeric: tabular-nums;
color: var(--text-muted);
}
/* ---------- LES SEMAINES ---------- */
/* Les colonnes occupent toute la largeur et s'épaississent avec
elle : des bâtons fins semés sur une grande page se lisent
comme des traits isolés, pas comme une série. */
.crm-cols {
display: flex;
align-items: flex-end;
gap: var(--rg-espace-2);
height: 210px;
width: 100%;
}
.crm-cols__slot {
flex: 1 1 0;
min-width: 0;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: var(--rg-espace-2);
}
.crm-cols__stack {
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: calc(var(--rg-espace-1) / 2); /* le fond sépare les segments, pas un trait */
height: 100%;
width: 100%;
max-width: 54px; /* la colonne ne remplit jamais tout son couloir : il reste de l'air */
margin: 0 auto;
}
.crm-cols__seg { display: block; width: 100%; border-radius: var(--rg-rayon-0); }
.crm-cols__seg--demande { background: var(--crm-vert); border-radius: var(--rg-rayon-0) var(--rg-rayon-0) var(--rg-rayon-0) var(--rg-rayon-0); }
.crm-cols__seg--reste { background: var(--crm-inactif); border-radius: var(--rg-rayon-0) var(--rg-rayon-0) var(--rg-rayon-0) var(--rg-rayon-0); }
.crm-cols__tick {
text-align: center;
font-size: var(--fs-3xs);
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ---------- BARRES HORIZONTALES ---------- */
.crm-hbars { display: flex; flex-direction: column; gap: var(--rg-espace-2); }
.crm-hbars__row {
display: grid;
grid-template-columns: 170px 1fr 40px;
align-items: center;
gap: var(--rg-espace-4);
}
.crm-hbars__label {
font-size: var(--fs-2xs);
color: var(--text-soft);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.crm-hbars__track { height: 14px; background: var(--crm-inactif); border-radius: var(--rg-rayon-0); }
/* Catégories sans ordre naturel : toutes les barres portent la
même teinte. Les foncer selon la valeur redirait ce que la
longueur dit déjà, et gâcherait le seul canal libre. */
.crm-hbars__bar {
display: block;
height: 100%;
border-radius: var(--rg-rayon-0) var(--rg-rayon-0) var(--rg-rayon-0) var(--rg-rayon-0);
background: var(--crm-rose);
}
.crm-hbars__val {
text-align: right;
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-semi);
font-variant-numeric: tabular-nums;
color: var(--text);
}
/* ---------- PÉRIODE ---------- */
.crm-fenetre {
display: flex;
align-items: center;
gap: var(--gap-md);
flex-wrap: wrap;
margin-bottom: var(--rg-espace-3);
}
.crm-fenetre__label {
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
text-transform: uppercase;
letter-spacing: var(--rg-label-m-espacement);
color: var(--text-muted);
}
/* ---------- INFOBULLE ---------- */
.crm-tip {
position: fixed;
z-index: 200;
max-width: 280px;
padding: var(--rg-espace-2) var(--rg-espace-3);
border-radius: var(--r-sm);
background: var(--bg-2);
border: var(--rg-trait-1) solid var(--border-2);
box-shadow: none;
font-size: var(--fs-3xs);
color: var(--text);
pointer-events: none;
}
@media (max-width: 720px) {
.crm-funnel__row { grid-template-columns: 96px 1fr 30px 36px; }
.crm-hbars__row { grid-template-columns: 100px 1fr 28px; }
.crm-cols { height: 150px; }
}
/* Le type d'intérêt, baptême, week-end, séminaire. Posé juste
après le nom : c'est ce qui décide de quoi on parle au
téléphone. Contour plein pour une demande entreprise, léger
pour un particulier : deux métiers, deux façons de rappeler. */
.crm-interet {
display: inline-flex;
align-items: center;
height: 20px;
padding: 0 var(--rg-espace-2);
border-radius: var(--r-pill);
border: var(--rg-trait-1) solid var(--border-2);
background: transparent;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
color: var(--text-soft);
white-space: nowrap;
}
.crm-interet--pro {
border-color: transparent;
background: var(--surface-3);
color: var(--text);
}
/* L'e-mail passe devant : c'est ce que Lorette veut lire tout
de suite après le nom. Le téléphone et le reste reculent. */
.crm-row__mail {
margin: 0 0 calc(var(--rg-espace-1) / 2);
font-size: var(--fs-xs);
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.crm-row__nomail { color: var(--text-muted); font-style: italic; }
/* ==========================================================
DASHBOARD PERSONNEL, WIDGETS D'ORGANISATION
----------------------------------------------------------
Ces widgets se remplissent en tapant : un champ, Entrée, la
ligne apparaît. Tout ce qui demanderait d'ouvrir une modale
pour noter « rappeler Julien » ne serait jamais utilisé.
========================================================== */
.hero__customise { margin-top: var(--gap); align-self: flex-start; }
/* .widget--wide a disparu le 2026-09-03 : la largeur ne se
décide plus dans le catalogue mais dans le panneau, widget par
widget et personne par personne (voir « LES FORMATS DE
WIDGET », plus bas). */
.dash-empty {
margin: var(--gap) 0;
text-align: center;
font-size: var(--fs-xs);
color: var(--text-muted);
}
.dash-foot {
margin: var(--rg-espace-3) 0 0;
font-size: var(--fs-3xs);
color: var(--text-muted);
}
/* --------- LA LIGNE DE SAISIE --------- */
.dash-add {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--rg-espace-2);
margin-bottom: var(--rg-espace-3);
}
.dash-add--two { grid-template-columns: 1fr 1fr auto; }
.dash-add--slot {
grid-template-columns: minmax(0,0.9fr) minmax(0,0.72fr) minmax(0,1.25fr) minmax(0,1fr) minmax(0,1.1fr) auto;
}
.dash-add__input {
height: 34px;
min-width: 0;
padding: 0 var(--rg-espace-3);
border-radius: var(--r-sm);
border: var(--rg-trait-1) solid var(--border);
background: var(--surface-2);
color: var(--text);
font-family: var(--rg-police-texte);
font-size: var(--fs-2xs);
}
.dash-add__input:focus {
outline: none;
border-color: var(--border-focus);
}
.dash-add__btn {
width: 34px;
height: 34px;
border: 0;
border-radius: var(--r-sm);
background: var(--accent);
color: var(--brand-white);
font-size: var(--fs-md);
font-weight: var(--rg-graisse-semi);
line-height: var(--rg-interligne-plein);
cursor: pointer;
}
@media (hover: hover) { .dash-add__btn:hover { background: var(--accent-strong); } }
/* --------- LES LISTES --------- */
.dash-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: calc(var(--rg-espace-1) / 2);
}
.dash-item {
display: flex;
align-items: center;
gap: var(--rg-espace-3);
padding: var(--rg-espace-2) var(--rg-espace-2);
border-radius: var(--r-sm);
font-size: var(--fs-xs);
color: var(--text);
}
@media (hover: hover) { .dash-item:hover { background: var(--surface-2); } }
/* Une tâche faite reste visible, barrée : la voir disparaître
fait douter qu'elle ait été cochée. */
.dash-item.is-done .dash-item__text { text-decoration: line-through; color: var(--text-muted); }
.dash-check {
flex: 0 0 auto;
width: 17px;
height: 17px;
border-radius: var(--rg-rayon-0);
border: var(--rg-trait-2) solid var(--border-2);
background: transparent;
cursor: pointer;
position: relative;
}
@media (hover: hover) { .dash-check:hover { border-color: var(--accent); } }
.dash-item.is-done .dash-check,
.jl-t.is-done .dash-check {
background: var(--rg-texte-principal);
border-color: var(--rg-texte-principal);
}
.dash-item.is-done .dash-check::after,
.jl-t.is-done .dash-check::after {
content: "";
position: absolute;
left: 4.5px;
top: 1.5px;
width: 4px;
height: 8px;
border: solid var(--rg-texte-inverse);
border-width: 0 var(--rg-trait-3) var(--rg-trait-3) 0;
transform: rotate(45deg);
}
.dash-item__text { flex: 1; min-width: 0; }
.dash-item__text em {
display: block;
font-style: normal;
font-size: var(--fs-3xs);
color: var(--text-muted);
}
.dash-tel { color: var(--accent); text-decoration: none; }
@media (hover: hover) { .dash-tel:hover { text-decoration: underline; } }
.dash-del {
flex: 0 0 auto;
width: 22px;
height: 22px;
border: 0;
border-radius: var(--r-sm);
background: transparent;
color: var(--text-faint);
font-size: var(--fs-md);
line-height: var(--rg-interligne-plein);
cursor: pointer;
opacity: 0;
transition: opacity var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
@media (hover: hover) { .dash-item:hover .dash-del { opacity: 1; } }
@media (hover: hover) { .dash-del:hover { color: var(--accent); } }
.dash-list--plain .dash-item { gap: var(--rg-espace-3); }
.dash-score {
flex: 0 0 auto;
min-width: 30px;
text-align: center;
font-family: var(--font-display); font-style: var(--rg-titre-style);
font-size: var(--fs-md);
font-weight: var(--rg-graisse-gras);
color: var(--text-muted);
}
.dash-score--prio { color: var(--crm-rose); }
.dash-score--suivre { color: var(--crm-orange); }
.dash-score--veille { color: var(--crm-bleu); }
/* --------- MA SEMAINE --------- */
.dash-week {
list-style: none;
margin: 0 0 var(--rg-espace-3);
padding: 0;
display: flex;
flex-direction: column;
}
.dash-week__day {
display: grid;
grid-template-columns: 84px 1fr;
align-items: center;
gap: var(--rg-espace-3);
padding: var(--rg-espace-2) 0;
border-bottom: var(--rg-trait-1) solid var(--border);
}
.dash-week__name {
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
text-transform: uppercase;
letter-spacing: var(--rg-label-m-espacement);
color: var(--text-muted);
}
.dash-week__slots { display: flex; gap: var(--rg-espace-1); flex-wrap: wrap; }
.dash-week__none { color: var(--text-faint); font-size: var(--fs-2xs); }
.dash-slot-wrap {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-1);
min-width: 0;
}
.dash-slot {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
padding: var(--rg-espace-1) var(--rg-espace-2);
border-radius: var(--r-pill);
background: var(--accent-soft);
color: var(--accent);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
cursor: pointer;
font-family: var(--rg-police-texte);
border: 0;
}
.dash-slot--custom {
background: color-mix(in srgb, var(--slot-color) 16%, transparent);
color: var(--text);
border: var(--rg-trait-1) solid color-mix(in srgb, var(--slot-color) 42%, transparent);
}
.dash-slot--custom i {
width: 7px;
height: 7px;
border-radius: var(--rg-rayon-0);
background: var(--slot-color);
box-shadow: none;
}
.dash-slot-del {
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: var(--rg-rayon-0);
background: transparent;
color: var(--text-faint);
font-size: var(--fs-xs);
line-height: var(--rg-interligne-plein);
cursor: pointer;
opacity: 0.55;
}
@media (hover: hover) { .dash-slot-del:hover {
background: var(--surface-3);
color: var(--accent);
} }
/* Ce qui vient de l'entreprise ne se retire pas d'un clic : gris,
sans curseur, sans croix. */
.dash-slot--officiel {
background: var(--surface-3);
color: var(--text-soft);
cursor: default;
}
.dash-week-actions {
display: flex;
align-items: center;
gap: var(--rg-espace-2);
flex-wrap: wrap;
margin: 0 0 var(--rg-espace-3);
}
.myweek-guests {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--rg-espace-2);
}
.myweek-guest {
display: flex;
align-items: center;
gap: var(--rg-espace-2);
min-width: 0;
padding: var(--rg-espace-2) var(--rg-espace-3);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--r-sm);
background: var(--surface-2);
cursor: pointer;
}
@media (hover: hover) { .myweek-guest:hover { border-color: var(--border-2); } }
.myweek-guest input {
width: 16px;
height: 16px;
accent-color: var(--accent);
}
.myweek-guest .crew-avatar {
width: 26px;
height: 26px;
font-size: var(--rg-taille-label-s);
}
.myweek-guest b {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--fs-2xs);
color: var(--text);
}
.myweek-cat-list {
display: flex;
flex-direction: column;
gap: var(--rg-espace-2);
margin-bottom: var(--rg-espace-4);
}
.myweek-cat-row {
display: flex;
align-items: center;
gap: var(--rg-espace-3);
padding: var(--rg-espace-2) var(--rg-espace-3);
border-radius: var(--r-sm);
background: var(--surface-2);
}
.myweek-cat-swatch {
width: 18px;
height: 18px;
border-radius: var(--rg-rayon-0);
box-shadow: none;
}
.myweek-cat-name {
flex: 1;
min-width: 0;
font-size: var(--fs-xs);
color: var(--text);
}
.dash-del.is-visible { opacity: 1; }
.myweek-cat-new {
display: grid;
grid-template-columns: minmax(0, 1fr) 42px auto;
gap: var(--rg-espace-2);
align-items: center;
margin: 0 0 var(--rg-espace-3);
}
.dash-color {
width: 42px;
height: 34px;
padding: var(--rg-espace-1);
border-radius: var(--r-sm);
border: var(--rg-trait-1) solid var(--border);
background: var(--surface-2);
cursor: pointer;
}
.dash-invitations {
display: flex;
flex-direction: column;
gap: var(--rg-espace-2);
margin-top: var(--rg-espace-3);
padding-top: var(--rg-espace-3);
border-top: var(--rg-trait-1) solid var(--border);
}
.dash-invitations__title {
margin: 0;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
text-transform: uppercase;
letter-spacing: var(--rg-label-m-espacement);
color: var(--text-muted);
}
.dash-invite {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--rg-espace-3);
padding: var(--rg-espace-2);
border-radius: var(--r-sm);
background: var(--surface-2);
border: var(--rg-trait-1) solid var(--border);
}
.dash-invite.has-conflict {
border-color: color-mix(in srgb, var(--accent) 44%, var(--border));
}
.dash-invite__main {
min-width: 0;
display: flex;
flex-direction: column;
gap: calc(var(--rg-espace-1) / 2);
}
.dash-invite__main b {
font-size: var(--fs-2xs);
color: var(--text);
font-weight: var(--rg-graisse-semi);
}
.dash-invite__main em {
font-style: normal;
font-size: var(--fs-3xs);
color: var(--text-muted);
}
.dash-invite__actions {
flex: 0 0 auto;
display: flex;
gap: var(--rg-espace-2);
}
.dash-invite__actions .btn-primary:disabled {
opacity: 0.45;
cursor: not-allowed;
}
/* --------- L'EMPLOI DU TEMPS DE L'ÉQUIPE, FIGÉ --------- */
.dash-edt {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: var(--rg-espace-2);
}
.dash-edt__day {
padding: var(--rg-espace-2) var(--rg-espace-3);
border-radius: var(--r-sm);
background: var(--surface-2);
}
.dash-edt__head {
margin: 0 0 var(--rg-espace-2);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
text-transform: uppercase;
letter-spacing: var(--rg-label-m-espacement);
color: var(--text-muted);
}
.dash-edt__line {
margin: 0 0 var(--rg-espace-1);
font-size: var(--fs-3xs);
color: var(--text-muted);
line-height: var(--rg-interligne-fort);
}
.dash-edt__line b { color: var(--text); font-weight: var(--rg-graisse-semi); display: block; }
.dash-edt__none, .dash-edt__more { margin: 0; font-size: var(--fs-3xs); color: var(--text-faint); }
.dash-notes {
width: 100%;
min-height: 130px;
padding: var(--rg-espace-3) var(--rg-espace-3);
border-radius: var(--r-sm);
border: var(--rg-trait-1) solid var(--border);
background: var(--surface-2);
color: var(--text);
font-family: var(--rg-police-texte);
font-size: var(--fs-xs);
line-height: var(--rg-interligne-texte);
resize: vertical;
}
.dash-notes:focus { outline: none; border-color: var(--border-focus); }
/* --------- LE PANNEAU DE PERSONNALISATION --------- */
/* La maquette a besoin de place : quatre colonnes dans trois
cents pixels ne montrent plus de proportions, seulement des
timbres-poste. Elle prend donc les deux tiers du panneau, et
le panneau s'élargit. */
.dash-panel {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: var(--gap-lg);
}
.dash-panel__list { list-style: none; margin: 0; padding: 0; }
.dash-panel__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--rg-espace-3);
padding: var(--rg-espace-2) 0;
border-bottom: var(--rg-trait-1) solid var(--border);
}
.dash-panel__label {
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-semi);
color: var(--text);
}
.dash-panel__label em {
display: block;
font-style: normal;
font-weight: var(--rg-graisse-moyen);
font-size: var(--fs-3xs);
color: var(--text-muted);
}
.dash-panel__acts { display: flex; align-items: center; gap: var(--rg-espace-1); }
.dash-panel__mv {
width: 26px;
height: 26px;
border-radius: var(--r-sm);
border: var(--rg-trait-1) solid var(--border-2);
background: transparent;
color: var(--text-muted);
cursor: pointer;
font-size: var(--fs-2xs);
}
@media (hover: hover) { .dash-panel__mv:hover:not(:disabled) { color: var(--text); border-color: var(--text-muted); } }
.dash-panel__mv:disabled { opacity: 0.3; cursor: default; }
.dash-panel__rm {
height: 26px;
padding: 0 var(--rg-espace-3);
border-radius: var(--r-pill);
border: var(--rg-trait-1) solid var(--border-2);
background: transparent;
color: var(--text-muted);
font-family: var(--rg-police-texte);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
cursor: pointer;
}
@media (hover: hover) { .dash-panel__rm:hover { color: var(--accent); border-color: var(--accent); } }
.dash-panel__group { margin-bottom: var(--gap); }
.dash-panel__group-title {
margin: 0 0 var(--rg-espace-2);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
text-transform: uppercase;
letter-spacing: var(--rg-label-m-espacement);
color: var(--text-muted);
}
.dash-panel__group-title em {
display: block;
font-style: normal;
font-weight: var(--rg-graisse-moyen);
text-transform: none;
letter-spacing: 0;
color: var(--text-faint);
}
.dash-panel__add {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--rg-espace-3);
padding: var(--rg-espace-2) var(--rg-espace-3);
margin-bottom: var(--rg-espace-1);
border-radius: var(--r-sm);
border: var(--rg-trait-1) solid var(--border);
background: var(--surface-2);
color: var(--text);
font-family: var(--rg-police-texte);
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-semi);
text-align: left;
cursor: pointer;
}
@media (hover: hover) { .dash-panel__add:hover { border-color: var(--accent); } }
.dash-panel__add em {
display: block;
font-style: normal;
font-weight: var(--rg-graisse-moyen);
font-size: var(--fs-3xs);
color: var(--text-muted);
}
.dash-panel__add b { color: var(--accent); font-size: var(--fs-md); line-height: var(--rg-interligne-plein); }
@media (max-width: 900px) {
.dash-panel { grid-template-columns: 1fr; }
.widget--wide { grid-column: span 1; }
.dash-edt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dash-add--slot { grid-template-columns: 1fr 1fr; }
.dash-add--slot .dash-add__btn { grid-column: span 2; width: 100%; }
.myweek-guests { grid-template-columns: 1fr; }
.myweek-cat-new { grid-template-columns: 1fr 42px; }
.myweek-cat-new .btn-secondary { grid-column: span 2; justify-content: center; }
.dash-invite { align-items: flex-start; flex-direction: column; }
.dash-invite__actions { width: 100%; justify-content: flex-end; }
}
/* ==========================================================
EMPLOI DU TEMPS GÉNÉRAL, TABLEAU PAR EMPLOYÉ
----------------------------------------------------------
Une ligne par personne, une colonne par jour, quatorze jours.
Beaucoup d'informations sur une seule vue : cette page prend
toute la largeur disponible au lieu des 1320 px du reste de
l'application, sinon les colonnes se serrent au point qu'on
ne distingue plus une semaine d'un week-end.
========================================================== */
body[data-page="emploi-du-temps"] .page-body {
max-width: 1860px;
padding-left: var(--gap);
padding-right: var(--gap);
}
/* --------- LA BARRE DE COMMANDE --------- */
.edt-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--gap);
flex-wrap: wrap;
margin-bottom: var(--rg-espace-4);
}
.edt-spaces {
display: inline-flex;
gap: var(--rg-espace-1);
padding: var(--rg-espace-1);
border-radius: var(--r-pill);
background: var(--surface-2);
border: var(--rg-trait-1) solid var(--border);
}
.edt-spaces__btn {
height: 32px;
padding: 0 var(--rg-espace-4);
border: 0;
border-radius: var(--r-pill);
background: transparent;
color: var(--text-muted);
font-family: var(--rg-police-texte);
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-semi);
cursor: pointer;
transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
@media (hover: hover) { .edt-spaces__btn:hover { color: var(--text); } }
.edt-spaces__btn.is-active { background: var(--rg-texte-principal); color: var(--rg-texte-inverse); }
.edt-period { display: flex; align-items: center; gap: var(--rg-espace-2); }
.edt-period__label {
font-family: var(--font-display); font-style: var(--rg-titre-style);
font-size: var(--fs-md);
font-weight: var(--rg-graisse-semi);
color: var(--text);
}
.edt-picker__nav {
width: 30px;
height: 30px;
border-radius: var(--r-sm);
border: var(--rg-trait-1) solid var(--border-2);
background: transparent;
color: var(--text-muted);
font-size: var(--fs-md);
line-height: var(--rg-interligne-plein);
cursor: pointer;
}
@media (hover: hover) { .edt-picker__nav:hover { color: var(--text); border-color: var(--text-muted); } }
.edt-picker__today {
height: 30px;
padding: 0 var(--rg-espace-3);
border-radius: var(--r-pill);
border: var(--rg-trait-1) solid var(--border-2);
background: transparent;
color: var(--text-muted);
font-family: var(--rg-police-texte);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
cursor: pointer;
}
@media (hover: hover) { .edt-picker__today:hover { color: var(--text); border-color: var(--text-muted); } }
/* --------- LES COULEURS ---------
Six familles d'activité, une teinte chacune : la couleur dit OÙ
la personne est, l'intensité dit à quel point la journée compte.
« Pas là » (OFF, congé, absence) n'a volontairement aucune teinte, l'absence de couleur EST l'information, et c'est ce qui laisse
les journées travaillées ressortir.
Palette vérifiée avec le validateur du référentiel dataviz :
séparation daltonienne (protan/deutan) 8.5, vision normale 17.9,
et chaque encre tient 4.5:1 sur ses trois fonds, y compris
au-dessus de la trame des week-ends. Le mot est de toute façon
toujours écrit dans la case : la couleur ne porte jamais
l'information seule.
ATTENTION : le thème sombre est le thème PAR DÉFAUT de
l'intranet. Les valeurs sombres vont donc sur « :root », pas
l'inverse, c'était le bug d'avant, les valeurs claires étaient
servies sur fond sombre. */
:root,
:root[data-theme="dark"] {
/* La teinte pure ne sert ici qu'au filet de 3 px et au liseré de
la légende. Sur fond sombre, le violet et le vert d'origine
tombaient à 2.9:1 et 3.7:1 : on les éclaircit juste pour ce
rôle-là. Les fonds et les encres, eux, ne bougent pas. */
--edt-piste: var(--rg-metier-violet);
--edt-piste-1: color-mix(in srgb, var(--rg-metier-violet) 38%, transparent);
--edt-piste-2: color-mix(in srgb, var(--rg-metier-violet) 26%, transparent);
--edt-piste-3: color-mix(in srgb, var(--rg-metier-violet) 15%, transparent);
--edt-piste-ink: var(--rg-metier-violet-clair);
--edt-client: var(--rg-rose-5);
--edt-client-1: color-mix(in srgb, var(--rg-rose-5) 38%, transparent);
--edt-client-2: color-mix(in srgb, var(--rg-rose-5) 26%, transparent);
--edt-client-3: color-mix(in srgb, var(--rg-rose-5) 15%, transparent);
--edt-client-ink: var(--rg-rose-3);
--edt-voiture: var(--rg-piste-orange);
--edt-voiture-1: color-mix(in srgb, var(--rg-piste-orange) 38%, transparent);
--edt-voiture-2: color-mix(in srgb, var(--rg-piste-orange) 26%, transparent);
--edt-voiture-3: color-mix(in srgb, var(--rg-piste-orange) 15%, transparent);
--edt-voiture-ink: var(--rg-metier-orange-clair);
--edt-banc: var(--rg-metier-cyan);
--edt-banc-1: color-mix(in srgb, var(--rg-metier-cyan) 38%, transparent);
--edt-banc-2: color-mix(in srgb, var(--rg-metier-cyan) 26%, transparent);
--edt-banc-3: color-mix(in srgb, var(--rg-metier-cyan) 15%, transparent);
--edt-banc-ink: var(--rg-metier-cyan);
--edt-equipe: var(--rg-piste-vert);
--edt-equipe-1: color-mix(in srgb, var(--rg-metier-vert-fonce) 38%, transparent);
--edt-equipe-2: color-mix(in srgb, var(--rg-metier-vert-fonce) 26%, transparent);
--edt-equipe-3: color-mix(in srgb, var(--rg-metier-vert-fonce) 15%, transparent);
--edt-equipe-ink: var(--rg-piste-vert);
--edt-ailleurs: var(--rg-marine-0);
--edt-ailleurs-1: color-mix(in srgb, var(--rg-marine-0) 38%, transparent);
--edt-ailleurs-2: color-mix(in srgb, var(--rg-marine-0) 26%, transparent);
--edt-ailleurs-3: color-mix(in srgb, var(--rg-marine-0) 15%, transparent);
--edt-ailleurs-ink: var(--rg-neutre-gris);
/* --- LA PALETTE POP ---
Demandée le 2026-09-04 : « les couleurs ça va pas, je veux des
couleurs pop ». Les teintes de l'emploi du temps sont faites
pour REMPLIR de grandes surfaces derrière du texte : elles sont
donc volontairement rabattues, et sur un anneau de 7 px elles
paraissent éteintes. Ici c'est l'inverse, peu de surface, pas
de texte par-dessus : la couleur peut être franche.
Six teintes réparties sur la roue, l'écart maximal entre
voisines pour qu'on ne confonde jamais deux anneaux.
Version sombre : plus lumineuse, elle doit briller sur le bleu
nuit. */
--pop-1: var(--rg-metier-jaune); /* jaune */
--pop-2: var(--rg-metier-cyan); /* cyan */
--pop-3: var(--rg-piste-vert); /* vert */
--pop-4: var(--rg-piste-orange); /* orange */
--pop-5: var(--rg-metier-violet-clair); /* violet */
--pop-6: var(--rg-marine-0); /* bleu */
--pop-alarme: var(--rg-rose-5);
/* Les grands jours : fond plein, texte blanc. */
--edt-piste-plein: var(--rg-metier-violet);
--edt-client-plein: var(--rg-rose-5);
/* « Pas là » : aucune teinte d'activité, c'est justement
l'information. Crème chaude plutôt que gris, pour ne pas
plomber le tableau. */
--edt-conge-ink: var(--rg-metier-jaune-fonce);
--edt-absent-ink: var(--rg-neutre-acier);
--edt-off-ink: var(--rg-neutre-acier);
/* Les disciplines : filets de 3 px au bord du nom. Mêmes six
teintes, poussées à 4.5:1 pour tenir sur si peu de surface. */
--edt-m1: var(--rg-rose-5);
--edt-m2: var(--rg-marine-1);
--edt-m3: var(--rg-metier-orange-fonce);
--edt-m4: var(--rg-metier-violet);
--edt-m5: var(--rg-metier-vert-fonce);
--edt-m6: var(--rg-metier-cyan-fonce);
--edt-m0: var(--rg-metier-cyan-fonce);
--edt-res: var(--rg-metier-magenta-clair); /* le matériel, qui n'est pas quelqu'un */
}
:root[data-theme="light"] {
--edt-piste: var(--rg-metier-violet);
--edt-piste-1: color-mix(in srgb, var(--rg-metier-violet) 32%, transparent);
--edt-piste-2: color-mix(in srgb, var(--rg-metier-violet) 21%, transparent);
--edt-piste-3: color-mix(in srgb, var(--rg-metier-violet) 12%, transparent);
--edt-piste-ink: var(--rg-metier-violet-fonce);
--edt-client: var(--rg-rose-5);
--edt-client-1: color-mix(in srgb, var(--rg-rose-5) 32%, transparent);
--edt-client-2: color-mix(in srgb, var(--rg-rose-5) 21%, transparent);
--edt-client-3: color-mix(in srgb, var(--rg-rose-5) 12%, transparent);
--edt-client-ink: var(--rg-rose-7);
--edt-voiture: var(--rg-piste-orange);
--edt-voiture-1: color-mix(in srgb, var(--rg-piste-orange) 32%, transparent);
--edt-voiture-2: color-mix(in srgb, var(--rg-piste-orange) 21%, transparent);
--edt-voiture-3: color-mix(in srgb, var(--rg-piste-orange) 12%, transparent);
--edt-voiture-ink: var(--rg-metier-jaune-fonce);
--edt-banc: var(--rg-metier-cyan);
--edt-banc-1: color-mix(in srgb, var(--rg-metier-cyan) 32%, transparent);
--edt-banc-2: color-mix(in srgb, var(--rg-metier-cyan) 21%, transparent);
--edt-banc-3: color-mix(in srgb, var(--rg-metier-cyan) 12%, transparent);
--edt-banc-ink: var(--rg-metier-vert-fonce);
--edt-equipe: var(--rg-metier-vert-fonce);
--edt-equipe-1: color-mix(in srgb, var(--rg-metier-vert-fonce) 32%, transparent);
--edt-equipe-2: color-mix(in srgb, var(--rg-metier-vert-fonce) 21%, transparent);
--edt-equipe-3: color-mix(in srgb, var(--rg-metier-vert-fonce) 12%, transparent);
--edt-equipe-ink: var(--rg-metier-vert-fonce);
--edt-ailleurs: var(--rg-marine-0);
--edt-ailleurs-1: color-mix(in srgb, var(--rg-marine-0) 32%, transparent);
--edt-ailleurs-2: color-mix(in srgb, var(--rg-marine-0) 21%, transparent);
--edt-ailleurs-3: color-mix(in srgb, var(--rg-marine-0) 12%, transparent);
--edt-ailleurs-ink: var(--rg-marine-2);
/* Les grands jours : fond plein, texte blanc. */
--edt-piste-plein: var(--rg-metier-violet);
--edt-client-plein: var(--rg-rose-5);
/* « Pas là » : aucune teinte d'activité, c'est justement
l'information. Crème chaude plutôt que gris, pour ne pas
plomber le tableau. */
--edt-conge-ink: var(--rg-metier-jaune-fonce);
--edt-absent-ink: var(--rg-neutre-acier);
--edt-off-ink: var(--rg-neutre-acier);
/* La palette pop, version claire : un cran plus dense, sinon le
jaune et le vert disparaissent sur le blanc cassé. */
--pop-1: var(--rg-piste-orange);
--pop-2: var(--rg-metier-cyan);
--pop-3: var(--rg-piste-vert);
--pop-4: var(--rg-piste-rouge);
--pop-5: var(--rg-metier-violet);
--pop-6: var(--rg-marine-1);
--pop-alarme: var(--rg-rose-6);
/* Les disciplines : filets de 3 px au bord du nom. Mêmes six
teintes, poussées à 4.5:1 pour tenir sur si peu de surface. */
--edt-m1: var(--rg-rose-5);
--edt-m2: var(--rg-marine-1);
--edt-m3: var(--rg-metier-orange-fonce);
--edt-m4: var(--rg-metier-violet);
--edt-m5: var(--rg-metier-vert-fonce);
--edt-m6: var(--rg-metier-cyan-fonce);
--edt-m0: var(--rg-metier-cyan-fonce);
--edt-res: var(--rg-rose-4); /* le matériel, qui n'est pas quelqu'un */
}
.edt-key {
display: inline-block;
width: 12px;
height: 12px;
border-radius: var(--rg-rayon-0);
flex: 0 0 auto;
background: var(--surface-2);
}
.edt-key--piste-1 { background: var(--edt-piste-1); box-shadow: none; }
.edt-key--piste-2 { background: var(--edt-piste-2); box-shadow: none; }
.edt-key--piste-3 { background: var(--edt-piste-3); box-shadow: none; }
.edt-key--client-1 { background: var(--edt-client-1); box-shadow: none; }
.edt-key--client-2 { background: var(--edt-client-2); box-shadow: none; }
.edt-key--client-3 { background: var(--edt-client-3); box-shadow: none; }
.edt-key--voiture-1 { background: var(--edt-voiture-1); box-shadow: none; }
.edt-key--voiture-2 { background: var(--edt-voiture-2); box-shadow: none; }
.edt-key--voiture-3 { background: var(--edt-voiture-3); box-shadow: none; }
.edt-key--banc-1 { background: var(--edt-banc-1); box-shadow: none; }
.edt-key--banc-2 { background: var(--edt-banc-2); box-shadow: none; }
.edt-key--banc-3 { background: var(--edt-banc-3); box-shadow: none; }
.edt-key--equipe-1 { background: var(--edt-equipe-1); box-shadow: none; }
.edt-key--equipe-2 { background: var(--edt-equipe-2); box-shadow: none; }
.edt-key--equipe-3 { background: var(--edt-equipe-3); box-shadow: none; }
.edt-key--ailleurs-1 { background: var(--edt-ailleurs-1); box-shadow: none; }
.edt-key--ailleurs-2 { background: var(--edt-ailleurs-2); box-shadow: none; }
.edt-key--ailleurs-3 { background: var(--edt-ailleurs-3); box-shadow: none; }
.edt-key--piste-plein { background: var(--edt-piste-plein); }
.edt-key--client-plein { background: var(--edt-client-plein); }
.edt-key--off { background: transparent; box-shadow: none; }
.edt-key--conge { background: transparent; box-shadow: none; }
.edt-key--absence { background: transparent; box-shadow: none;
background-image: repeating-linear-gradient(120deg, transparent 0 var(--rg-trait-3), var(--edt-absent-ink) var(--rg-trait-3) var(--rg-trait-4)); }
.edt-key--rien { background: transparent; }
.edt-metier {
display: inline-block;
width: 11px;
height: 11px;
border-radius: var(--rg-rayon-0);
flex: 0 0 auto;
background: var(--edt-m0);
}
.edt-metier--m1 { background: var(--edt-m1); }
.edt-metier--m2 { background: var(--edt-m2); }
.edt-metier--m3 { background: var(--edt-m3); }
.edt-metier--m4 { background: var(--edt-m4); }
.edt-metier--m5 { background: var(--edt-m5); }
.edt-metier--m6 { background: var(--edt-m6); }
.edt-metier--res { background: var(--edt-res); }
/* --------- LA LÉGENDE --------- */
.edt-legende {
display: flex;
gap: var(--gap-lg);
flex-wrap: wrap;
padding: var(--rg-espace-3) var(--rg-espace-4);
margin-bottom: var(--rg-espace-3);
border-radius: var(--r-md);
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
}
.edt-legende__titre {
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
text-transform: uppercase;
letter-spacing: var(--rg-label-m-espacement);
color: var(--text-muted);
}
.edt-legende__item {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
font-size: var(--fs-3xs);
color: var(--text-soft);
}
/* --------- LE TABLEAU --------- */
.edt-table-wrap {
overflow-x: auto;
border-radius: var(--r-md);
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
}
.edt-table {
width: 100%;
/* Largeur fixe : sans elle, le navigateur donne au jour de circuit
deux fois la largeur des autres, et la quinzaine se lit de travers.
Toutes les journees valent la meme chose, donc toutes les colonnes
font la meme largeur. */
table-layout: fixed;
min-width: 1040px;
border-collapse: separate;
border-spacing: 0;
}
.edt-table th,
.edt-table td { border-bottom: var(--rg-trait-1) solid var(--border); }
/* La colonne des noms reste visible quand on fait défiler la
quinzaine : une case sans son nom ne veut rien dire. */
.edt-table__who {
position: sticky;
left: 0;
z-index: 2;
width: 210px;
text-align: left;
padding: var(--rg-espace-2) var(--rg-espace-4);
background: var(--surface);
}
.edt-table thead th {
position: sticky;
top: 0;
z-index: 3;
background: var(--surface);
padding: var(--rg-espace-2) 0;
text-align: center;
font-weight: var(--rg-graisse-semi);
}
.edt-table thead .edt-table__who { z-index: 4; font-size: var(--fs-3xs);
text-transform: uppercase; letter-spacing: var(--rg-label-m-espacement); color: var(--text-muted); }
.edt-table__day { width: auto; }
.edt-table__dow {
display: block;
font-size: var(--fs-3xs);
color: var(--text-muted);
}
.edt-table__num {
display: block;
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-gras);
color: var(--text);
font-variant-numeric: tabular-nums;
}
/* Le week-end porte un fond, pas une couleur : c'est une
respiration dans la grille, pas une alerte. */
.edt-table__day.is-weekend,
.edt-cellj.is-weekend { background: var(--surface-3); }
.edt-table__day.is-today .edt-table__num {
display: inline-flex;
width: 21px;
height: 21px;
align-items: center;
justify-content: center;
border-radius: var(--rg-rayon-0);
background: var(--accent);
color: var(--brand-white);
}
/* La deuxième semaine commence par un filet net : quatorze
colonnes identiques se comptent mal. */
.edt-table__day.is-newweek,
.edt-cellj.is-newweek { border-left: var(--rg-trait-3) solid var(--border-2); }
/* La pastille du métier vit sur le bord gauche du nom. */
.edt-who__name {
display: block;
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-semi);
color: var(--text);
}
.edt-who__role {
display: block;
font-size: var(--fs-3xs);
color: var(--text-muted);
}
/* Le filet de la discipline : discret, il double le métier sans
lui disputer la place. */
.edt-who__role em {
font-style: normal;
padding-left: var(--rg-espace-2);
margin-left: var(--rg-espace-1);
border-left: var(--rg-trait-3) solid var(--border-2);
color: var(--text-faint);
}
@media (hover: hover) { .edt-row:hover .edt-table__who { background: var(--surface-2); } }
/* Une ligne qu'on n'a pas le droit de modifier reste lisible,
sans faux air de bouton. */
.edt-row:not(.is-editable) .edt-who__name { color: var(--text-soft); }
/* --------- LA CASE : DEUX DEMI-JOURNÉES DANS UNE COLONNE ---------
Condition posée par Lorette : voir le matin et l'après-midi
sans doubler la largeur du tableau. Les deux moitiés se
superposent donc dans la même colonne, séparées par un filet
de fond. Quand elles disent la même chose, elles fusionnent en
un seul bloc : une journée entière se lit d'un trait, et une
journée coupée saute aux yeux. */
.edt-cellj {
padding: var(--rg-espace-1) var(--rg-espace-1);
text-align: center;
vertical-align: top;
}
.edt-cellj.is-editable { cursor: pointer; }
.edt-demi {
display: flex;
align-items: center;
justify-content: center;
gap: var(--rg-espace-1);
border-radius: var(--r-sm);
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-semi);
color: var(--text);
background: var(--surface-2);
overflow: hidden;
padding: 0 var(--rg-espace-1);
}
.edt-demi.is-half { height: 17px; }
.edt-demi.is-full { height: 36px; }
.edt-demi.is-half + .edt-demi.is-half { margin-top: calc(var(--rg-espace-1) / 2); }
.edt-demi__txt {
/* min-width: 0 est indispensable : un enfant flex garde sinon sa
largeur de contenu, dépasse, et le texte se retrouve rogné des
DEUX côtés au lieu de finir par des points de suspension. */
min-width: 0;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Un jour de circuit s'écrit comme dans leur tableur : TRACK,
puis la manche et le circuit. Sur une demi-hauteur, les deux
tiennent côte à côte ; sur une journée entière, l'un sous
l'autre. */
.edt-demi b {
font-size: var(--rg-taille-label-s);
letter-spacing: var(--rg-label-m-espacement);
opacity: 0.75;
flex: 0 0 auto;
}
/* Sur une journée entière le bloc passe en colonne. Avec
« align-items: center » hérité du bloc, l'enfant prend alors sa
largeur de contenu et « Installation Magny-Cours » débordait des
deux côtés ; align-self: stretch le ramène à la largeur de la
case et l'ellipse fait son travail. */
.edt-demi.is-full.is-track { flex-direction: column; gap: 0; justify-content: center; }
.edt-demi.is-full.is-track b { font-size: var(--rg-taille-label-s); }
.edt-demi.is-full.is-track .edt-demi__txt {
align-self: stretch;
text-align: center;
font-size: var(--rg-taille-label-s);
}
/* Le fond porte la teinte à faible opacité, le texte reste en
encre : une étiquette pleine à la saturation deviendrait un
pavé de couleur, vingt-huit fois par ligne. */
/* Les trois intensités d'une famille. Niveau 1 = la journée qui
structure la semaine, et elle porte en plus un filet plein à
gauche ; niveau 2 = l'ordinaire ; niveau 3 = le périphérique.
Le texte prend la teinte de la famille : c'est lui qui fait
qu'une case se lit comme colorée et non comme grise. */
.edt-demi--piste-1 { background: var(--edt-piste-1); color: var(--edt-piste-ink);
box-shadow: none; padding-left: var(--rg-espace-2); }
.edt-demi--piste-2 { background: var(--edt-piste-2); color: var(--edt-piste-ink); }
.edt-demi--piste-3 { background: var(--edt-piste-3); color: var(--edt-piste-ink); }
.edt-demi--client-1 { background: var(--edt-client-1); color: var(--edt-client-ink);
box-shadow: none; padding-left: var(--rg-espace-2); }
.edt-demi--client-2 { background: var(--edt-client-2); color: var(--edt-client-ink); }
.edt-demi--client-3 { background: var(--edt-client-3); color: var(--edt-client-ink); }
.edt-demi--voiture-1 { background: var(--edt-voiture-1); color: var(--edt-voiture-ink);
box-shadow: none; padding-left: var(--rg-espace-2); }
.edt-demi--voiture-2 { background: var(--edt-voiture-2); color: var(--edt-voiture-ink); }
.edt-demi--voiture-3 { background: var(--edt-voiture-3); color: var(--edt-voiture-ink); }
.edt-demi--banc-1 { background: var(--edt-banc-1); color: var(--edt-banc-ink);
box-shadow: none; padding-left: var(--rg-espace-2); }
.edt-demi--banc-2 { background: var(--edt-banc-2); color: var(--edt-banc-ink); }
.edt-demi--banc-3 { background: var(--edt-banc-3); color: var(--edt-banc-ink); }
.edt-demi--equipe-1 { background: var(--edt-equipe-1); color: var(--edt-equipe-ink);
box-shadow: none; padding-left: var(--rg-espace-2); }
.edt-demi--equipe-2 { background: var(--edt-equipe-2); color: var(--edt-equipe-ink); }
.edt-demi--equipe-3 { background: var(--edt-equipe-3); color: var(--edt-equipe-ink); }
.edt-demi--ailleurs-1 { background: var(--edt-ailleurs-1); color: var(--edt-ailleurs-ink);
box-shadow: none; padding-left: var(--rg-espace-2); }
.edt-demi--ailleurs-2 { background: var(--edt-ailleurs-2); color: var(--edt-ailleurs-ink); }
.edt-demi--ailleurs-3 { background: var(--edt-ailleurs-3); color: var(--edt-ailleurs-ink); }
.edt-demi--piste-plein { background: var(--edt-piste-plein); color: var(--rg-neutre-blanc); }
.edt-demi--client-plein { background: var(--edt-client-plein); color: var(--rg-neutre-blanc); }
/* « Pas là » : rien pour OFF, une crème pour le congé, la même
crème hachurée pour l'absence. Trois états qui se lisent à la
texture, sans voler une teinte aux journées travaillées. */
.edt-demi--off {
background: transparent;
color: var(--edt-off-ink);
}
/* Congé et absence ne sont PAS remplis : ils sont cernés. Un
aplat crème se confondait avec les tons clairs de « la voiture », or ces deux-là doivent se lire d'un coup d'œil, ce sont eux
qu'on cherche quand on planifie une quinzaine. Rien / cerné doré
/ cerné hachuré : trois états qui se distinguent à la forme et
ne volent aucune teinte aux journées travaillées. */
.edt-demi--conge {
background: transparent;
color: var(--edt-conge-ink);
box-shadow: none;
font-style: italic;
}
.edt-demi--absence {
background-image: repeating-linear-gradient(135deg,
transparent 0 3px, var(--edt-absent-ink) 3px 4px);
box-shadow: none;
color: var(--edt-absent-ink);
}
.edt-demi--absence .edt-demi__txt {
background: var(--surface);
border-radius: var(--rg-rayon-0);
padding: 0 var(--rg-espace-1);
}
.edt-demi--vide { background: transparent; border: var(--rg-trait-1) dashed var(--border-2); }
/* Le créneau posé par le responsable, repris tel quel sur le
Dashboard : mêmes fonds, mêmes encres qu'au tableau. */
.edt-key-bg--piste-1 { background: var(--edt-piste-1); color: var(--edt-piste-ink); }
.edt-key-bg--piste-2 { background: var(--edt-piste-2); color: var(--edt-piste-ink); }
.edt-key-bg--piste-3 { background: var(--edt-piste-3); color: var(--edt-piste-ink); }
.edt-key-bg--client-1 { background: var(--edt-client-1); color: var(--edt-client-ink); }
.edt-key-bg--client-2 { background: var(--edt-client-2); color: var(--edt-client-ink); }
.edt-key-bg--client-3 { background: var(--edt-client-3); color: var(--edt-client-ink); }
.edt-key-bg--voiture-1 { background: var(--edt-voiture-1); color: var(--edt-voiture-ink); }
.edt-key-bg--voiture-2 { background: var(--edt-voiture-2); color: var(--edt-voiture-ink); }
.edt-key-bg--voiture-3 { background: var(--edt-voiture-3); color: var(--edt-voiture-ink); }
.edt-key-bg--banc-1 { background: var(--edt-banc-1); color: var(--edt-banc-ink); }
.edt-key-bg--banc-2 { background: var(--edt-banc-2); color: var(--edt-banc-ink); }
.edt-key-bg--banc-3 { background: var(--edt-banc-3); color: var(--edt-banc-ink); }
.edt-key-bg--equipe-1 { background: var(--edt-equipe-1); color: var(--edt-equipe-ink); }
.edt-key-bg--equipe-2 { background: var(--edt-equipe-2); color: var(--edt-equipe-ink); }
.edt-key-bg--equipe-3 { background: var(--edt-equipe-3); color: var(--edt-equipe-ink); }
.edt-key-bg--ailleurs-1 { background: var(--edt-ailleurs-1); color: var(--edt-ailleurs-ink); }
.edt-key-bg--ailleurs-2 { background: var(--edt-ailleurs-2); color: var(--edt-ailleurs-ink); }
.edt-key-bg--ailleurs-3 { background: var(--edt-ailleurs-3); color: var(--edt-ailleurs-ink); }
.edt-key-bg--piste-plein { background: var(--edt-piste-plein); color: var(--rg-neutre-blanc); }
.edt-key-bg--client-plein { background: var(--edt-client-plein); color: var(--rg-neutre-blanc); }
.edt-key-bg--off { background: var(--surface-2); color: var(--edt-off-ink); }
.edt-key-bg--conge { background: var(--surface-2); color: var(--edt-conge-ink); }
.edt-key-bg--absence { background: var(--surface-2); color: var(--edt-absent-ink); }
.edt-who { border-left: var(--rg-trait-4) solid var(--edt-m0); }
.edt-who--m1 { border-left-color: var(--edt-m1); }
.edt-who--m2 { border-left-color: var(--edt-m2); }
.edt-who--m3 { border-left-color: var(--edt-m3); }
.edt-who--m4 { border-left-color: var(--edt-m4); }
.edt-who--m5 { border-left-color: var(--edt-m5); }
.edt-who--m6 { border-left-color: var(--edt-m6); }
.edt-who--res { border-left-color: var(--edt-res); }
/* La légende montre les familles, pas seize étiquettes en vrac :
c'est là que la logique des couleurs se lit. */
.edt-legende__bloc {
display: flex;
align-items: flex-start;
gap: var(--rg-espace-3);
flex-wrap: wrap;
}
.edt-legende__bloc--jours { flex: 1 1 100%; }
.edt-legende__fam {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-3);
flex-wrap: wrap;
padding: var(--rg-espace-1) var(--rg-espace-2) var(--rg-espace-1) var(--rg-espace-2);
border-radius: var(--r-sm);
background: var(--surface-2);
}
.edt-legende__fam-nom {
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
text-transform: uppercase;
letter-spacing: var(--rg-label-m-espacement);
color: var(--text-muted);
white-space: nowrap;
}
@media (hover: hover) { .edt-cellj.is-editable .edt-demi:hover { filter: brightness(0.96); } }
@media (hover: hover) { .edt-cellj.is-editable .edt-demi--vide:hover { border-color: var(--accent); } }
/* --------- LE MENU DE CHOIX --------- */
.edt-menu {
position: fixed;
z-index: 300;
min-width: 210px;
padding: var(--rg-espace-2);
border-radius: var(--r-md);
background: var(--bg-2);
border: var(--rg-trait-1) solid var(--border-2);
box-shadow: none;
}
.edt-menu__head {
margin: 0 0 var(--rg-espace-1);
padding: var(--rg-espace-2) var(--rg-espace-2) var(--rg-espace-2);
border-bottom: var(--rg-trait-1) solid var(--border);
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-semi);
color: var(--text);
}
.edt-menu__head em {
display: block;
font-style: normal;
font-weight: var(--rg-graisse-moyen);
font-size: var(--fs-3xs);
color: var(--text-muted);
}
.edt-menu__item {
width: 100%;
display: flex;
align-items: center;
gap: var(--rg-espace-2);
padding: var(--rg-espace-2) var(--rg-espace-2);
border: 0;
border-radius: var(--r-sm);
background: transparent;
color: var(--text);
font-family: var(--rg-police-texte);
font-size: var(--fs-xs);
text-align: left;
cursor: pointer;
}
@media (hover: hover) { .edt-menu__item:hover { background: var(--surface-2); } }
.edt-menu__item.is-current { color: var(--accent); font-weight: var(--rg-graisse-semi); }
.edt-menu__item--clear {
margin-top: var(--rg-espace-1);
border-top: var(--rg-trait-1) solid var(--border);
border-radius: var(--rg-rayon-0) var(--rg-rayon-0) var(--r-sm) var(--r-sm);
color: var(--text-muted);
}
/* --------- L'APERÇU FIGÉ DU DASHBOARD --------- */
.dash-edt { display: flex; flex-direction: column; gap: var(--rg-espace-1); }
.dash-edt__row {
display: grid;
grid-template-columns: 96px repeat(7, minmax(0, 1fr));
align-items: center;
gap: var(--rg-espace-1);
}
.dash-edt__row--head { margin-bottom: var(--rg-espace-1); }
.dash-edt__dow {
text-align: center;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
color: var(--text-muted);
}
.dash-edt__dow em {
display: block;
font-style: normal;
font-weight: var(--rg-graisse-moyen);
font-size: var(--rg-taille-label-s);
color: var(--text-faint);
}
.dash-edt__dow.is-weekend { color: var(--text-faint); }
.dash-edt__who {
padding-left: var(--rg-espace-2);
border-left: var(--rg-trait-4) solid var(--edt-m0);
font-size: var(--fs-3xs);
color: var(--text-soft);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.edt-metier-bord--m1 { border-left-color: var(--edt-m1); }
/* La meme teinte, disponible pour remplir une pastille choisie. */
.edt-metier-bord--m1 { --mc: var(--edt-m1); }
.edt-metier-bord--m2 { --mc: var(--edt-m2); }
.edt-metier-bord--m3 { --mc: var(--edt-m3); }
.edt-metier-bord--m4 { --mc: var(--edt-m4); }
.edt-metier-bord--m5 { --mc: var(--edt-m5); }
.edt-metier-bord--m6 { --mc: var(--edt-m6); }
.edt-metier-bord--m7 { --mc: var(--edt-m7); }
.edt-metier-bord--m8 { --mc: var(--edt-m8); }
.edt-metier-bord--m2 { border-left-color: var(--edt-m2); }
.edt-metier-bord--m3 { border-left-color: var(--edt-m3); }
.edt-metier-bord--m4 { border-left-color: var(--edt-m4); }
.edt-metier-bord--m5 { border-left-color: var(--edt-m5); }
.edt-metier-bord--m6 { border-left-color: var(--edt-m6); }
.edt-metier-bord--m7 { border-left-color: var(--edt-m7); }
.edt-metier-bord--m8 { border-left-color: var(--edt-m8); }
.dash-edt__row.is-me .dash-edt__who { color: var(--text); font-weight: var(--rg-graisse-semi); }
.dash-edt__cell {
height: 20px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--rg-rayon-0);
background: var(--surface-2);
}
.dash-edt__cell.is-weekend { background: var(--surface-3); }
/* La journée officielle, dans le widget « ma semaine » */
@media (max-width: 900px) {
.edt-table__who { width: 150px; }
.dash-edt__row { grid-template-columns: 74px repeat(7, minmax(0, 1fr)); }
}
/* ==========================================================
EMPLOI DU TEMPS, LES AJOUTS DE LA REFONTE DEMI-JOURNÉES
========================================================== */
/* L'interrupteur du matériel. Une case à cocher plutôt qu'un
bouton : c'est un état qu'on garde, pas une action qu'on
déclenche, et il est retenu d'une visite à l'autre. */
.edt-toggle-res {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
height: 32px;
padding: 0 var(--rg-espace-4) 0 var(--rg-espace-3);
border-radius: var(--r-pill);
border: var(--rg-trait-1) solid var(--border-2);
background: transparent;
color: var(--text-muted);
font-family: var(--rg-police-texte);
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-semi);
cursor: pointer;
}
@media (hover: hover) { .edt-toggle-res:hover { color: var(--text); border-color: var(--text-muted); } }
.edt-toggle-res__box {
width: 15px;
height: 15px;
border-radius: var(--rg-rayon-0);
border: var(--rg-trait-2) solid var(--border-2);
position: relative;
}
.edt-toggle-res.is-on { color: var(--text); border-color: var(--accent); }
.edt-toggle-res.is-on .edt-toggle-res__box { background: var(--rg-texte-principal); border-color: var(--rg-texte-principal); }
.edt-toggle-res.is-on .edt-toggle-res__box::after {
content: "";
position: absolute;
left: 4px; top: 1px;
width: 3.5px; height: 7px;
border: solid var(--rg-texte-inverse);
border-width: 0 var(--rg-trait-3) var(--rg-trait-3) 0;
transform: rotate(45deg);
}
/* Les lignes de matériel : mêmes règles, teinte neutre, et un
fond très légèrement à part pour qu'on voie qu'on a changé de
nature de ligne. */
.edt-who--res { border-left-color: var(--edt-m0); }
.edt-row.is-res .edt-table__who { background: var(--surface-2); }
.edt-row.is-res .edt-who__name { font-weight: var(--rg-graisse-moyen); }
/* Le matériel ouvre le tableau : un filet franc marque la bascule
vers les personnes, sinon les deux blocs se lisent comme une
seule liste et on cherche où finissent les camions. */
.edt-row.is-res + .edt-row:not(.is-res) th,
.edt-row.is-res + .edt-row:not(.is-res) td {
border-top: var(--rg-trait-3) solid var(--border-2);
}
/* --------- LE MENU DE SAISIE --------- */
.edt-menu__portee {
display: flex;
gap: var(--rg-espace-1);
padding: var(--rg-espace-1);
margin-bottom: var(--rg-espace-2);
border-radius: var(--r-pill);
background: var(--surface-2);
}
.edt-menu__portee-btn {
flex: 1;
height: 26px;
border: 0;
border-radius: var(--r-pill);
background: transparent;
color: var(--text-muted);
font-family: var(--rg-police-texte);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
cursor: pointer;
}
@media (hover: hover) { .edt-menu__portee-btn:hover { color: var(--text); } }
.edt-menu__portee-btn.is-on { background: var(--rg-texte-principal); color: var(--rg-texte-inverse); }
.edt-menu__item em {
margin-left: auto;
font-style: normal;
color: var(--text-faint);
}
.edt-menu__item--plain { color: var(--text-muted); }
.edt-menu__soustitre {
margin: var(--rg-espace-2) 0 var(--rg-espace-2);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
text-transform: uppercase;
letter-spacing: var(--rg-label-m-espacement);
color: var(--text-muted);
}
/* Manche et circuit côte à côte : ce sont deux choix d'un même
geste, les empiler ferait défiler pour rien. */
.edt-menu__deux {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--rg-espace-4);
max-height: 320px;
overflow-y: auto;
}
.edt-menu__pill {
display: block;
width: 100%;
margin-bottom: var(--rg-espace-1);
padding: var(--rg-espace-1) var(--rg-espace-2);
border-radius: var(--r-sm);
border: var(--rg-trait-1) solid transparent;
background: var(--surface-2);
color: var(--text-soft);
font-family: var(--rg-police-texte);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
text-align: left;
cursor: pointer;
}
@media (hover: hover) { .edt-menu__pill:hover { border-color: var(--border-2); color: var(--text); } }
.edt-menu__pill.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.edt-menu__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--rg-espace-3);
margin-top: var(--rg-espace-2);
padding-top: var(--rg-espace-2);
border-top: var(--rg-trait-1) solid var(--border);
}
.edt-menu__retour {
border: 0;
background: transparent;
color: var(--text-muted);
font-family: var(--rg-police-texte);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
cursor: pointer;
padding: var(--rg-espace-1) 0;
}
@media (hover: hover) { .edt-menu__retour:hover { color: var(--text); } }
.edt-menu { max-width: 460px; }
/* --------- L'APERÇU DU DASHBOARD, EN DEMI-JOURNÉES --------- */
.dash-edt__cell {
flex-direction: column;
gap: var(--rg-trait-1);
padding: calc(var(--rg-espace-1) / 2);
}
.dash-edt__cell .edt-key {
width: 100%;
height: 7px;
border-radius: var(--rg-rayon-0);
}
.dash-edt__cell .edt-key.is-full { height: 15px; }
.edt-key--rien { background: transparent; }
.dash-slot--officiel b {
font-size: var(--rg-taille-label-s);
opacity: 0.7;
margin-right: var(--rg-espace-1);
}
/* --------- LES COULEURS DU PLANNING INSIDE ---------
Deux codages indépendants, comme sur leur document :
la couleur de la LIGNE dit le véhicule, la couleur du
BANDEAU dit la vague. Les véhicules reprennent leur
convention, Proto en bleu marine, Formule Renault sans
fond parce que c'est la majorité, Formule 3 en vert,
baptême en rose. */
:root,
:root[data-theme="dark"] {
--plan-proto: var(--rg-marine-0);
--plan-proto-fond: color-mix(in srgb, var(--rg-marine-0) 20%, transparent);
--plan-proto-ink: var(--rg-neutre-gris);
--plan-fr: var(--rg-metier-cyan);
--plan-fr-fond: transparent;
--plan-fr-ink: var(--rg-metier-cyan);
--plan-f3: var(--rg-piste-vert);
--plan-f3-fond: color-mix(in srgb, var(--rg-metier-vert-fonce) 22%, transparent);
--plan-f3-ink: var(--rg-piste-vert);
--plan-bapteme: var(--rg-rose-5);
--plan-bapteme-fond: color-mix(in srgb, var(--rg-rose-5) 20%, transparent);
--plan-bapteme-ink: var(--rg-rose-3);
}
:root[data-theme="light"] {
--plan-proto: var(--rg-marine-1);
--plan-proto-fond: color-mix(in srgb, var(--rg-marine-0) 16%, transparent);
--plan-proto-ink: var(--rg-marine-2);
--plan-fr: var(--rg-metier-cyan-fonce);
--plan-fr-fond: transparent;
--plan-fr-ink: var(--rg-metier-vert-fonce);
--plan-f3: var(--rg-metier-vert-fonce);
--plan-f3-fond: color-mix(in srgb, var(--rg-metier-vert-fonce) 16%, transparent);
--plan-f3-ink: var(--rg-metier-vert-fonce);
--plan-bapteme: var(--rg-rose-5);
--plan-bapteme-fond: color-mix(in srgb, var(--rg-rose-5) 14%, transparent);
--plan-bapteme-ink: var(--rg-rose-7);
}
/* Les huit vagues. La teinte ne dit rien d'autre que « ce
groupe-là » : c'est ce qui permet, au bord de la piste, de
dire « les rouges avec moi ». */
.plan-vague--rouge { --plan-ton: var(--rg-rose-5); --plan-ton-fond: color-mix(in srgb, var(--rg-rose-5) 10%, transparent); --plan-ton-ink: var(--plan-bapteme-ink); }
.plan-vague--bleu { --plan-ton: var(--rg-marine-0); --plan-ton-fond: color-mix(in srgb, var(--rg-marine-0) 10%, transparent); --plan-ton-ink: var(--plan-proto-ink); }
.plan-vague--vert { --plan-ton: var(--rg-piste-vert); --plan-ton-fond: color-mix(in srgb, var(--rg-metier-vert-fonce) 11%, transparent); --plan-ton-ink: var(--plan-f3-ink); }
.plan-vague--ambre { --plan-ton: var(--rg-piste-orange); --plan-ton-fond: color-mix(in srgb, var(--rg-piste-orange) 12%, transparent); --plan-ton-ink: var(--edt-voiture-ink); }
.plan-vague--orange { --plan-ton: var(--rg-piste-rouge); --plan-ton-fond: color-mix(in srgb, var(--rg-piste-rouge) 12%, transparent); --plan-ton-ink: var(--edt-voiture-ink); }
.plan-vague--cyan { --plan-ton: var(--rg-metier-cyan); --plan-ton-fond: color-mix(in srgb, var(--rg-metier-cyan) 11%, transparent); --plan-ton-ink: var(--plan-fr-ink); }
.plan-vague--violet { --plan-ton: var(--rg-metier-violet); --plan-ton-fond: color-mix(in srgb, var(--rg-metier-violet) 12%, transparent); --plan-ton-ink: var(--edt-piste-ink); }
.plan-vague--jaune { --plan-ton: var(--rg-piste-orange); --plan-ton-fond: color-mix(in srgb, var(--rg-piste-orange) 13%, transparent); --plan-ton-ink: var(--edt-conge-ink); }
/* =========================================================
PLANNING INSIDE, LA FEUILLE DE JOURNÉE
---------------------------------------------------------
Copié sur leur document : un bandeau de convocation coloré,
les compteurs, puis le tableau. Les couleurs de ligne disent
le véhicule, c'est leur langage depuis des années, on ne le
change pas : bleu marine le Proto, clair la Formule Renault,
vert la Formule 3, rose le baptême.
========================================================= */
.plan-feuille { padding-top: var(--rg-espace-1); }
.plan-vague {
margin: 0 0 var(--rg-espace-5);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--r-md);
overflow: hidden;
background: var(--surface);
}
/* --- Le bandeau de convocation --- */
.plan-vague__bandeau {
display: flex;
flex-wrap: wrap;
gap: var(--rg-espace-4) var(--rg-espace-6);
align-items: center;
justify-content: space-between;
padding: var(--rg-espace-3) var(--rg-espace-4);
border-left: var(--rg-trait-repere) solid var(--plan-ton);
background: var(--plan-ton-fond);
}
.plan-vague__titre {
margin: 0 0 var(--rg-espace-2);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-extra);
letter-spacing: var(--rg-label-m-espacement);
color: var(--plan-ton-ink);
}
.plan-vague__ligne {
display: flex;
gap: var(--rg-espace-3);
align-items: baseline;
margin: 0 0 calc(var(--rg-espace-1) / 2);
font-size: var(--fs-3xs);
color: var(--text-soft);
}
.plan-vague__ligne span { min-width: 152px; }
.plan-vague__ligne b { font-size: var(--fs-xs); color: var(--text); }
.plan-vague__ligne--brief b { font-weight: var(--rg-graisse-semi); }
.plan-vague.is-suite .plan-vague__titre { color: var(--text-muted); }
/* --- Les compteurs --- */
.plan-vague__compteurs { display: flex; flex-wrap: wrap; gap: var(--rg-espace-2); }
.plan-compteur {
display: inline-flex;
align-items: baseline;
gap: var(--rg-espace-2);
padding: var(--rg-espace-1) var(--rg-espace-3);
border-radius: var(--r-sm);
font-size: var(--fs-3xs);
color: var(--text-soft);
background: var(--surface-2);
box-shadow: none;
}
.plan-compteur b { font-size: var(--fs-sm); font-weight: var(--rg-graisse-gras); color: var(--text); }
.plan-compteur.is-zero { opacity: 0.45; }
.plan-compteur--proto { box-shadow: none; }
.plan-compteur--fr { box-shadow: none; }
.plan-compteur--f3 { box-shadow: none; }
.plan-compteur--frbiplace { box-shadow: none; }
.plan-compteur--total b { color: var(--accent); }
/* --- Le tableau --- */
.plan-table-wrap { overflow-x: auto; }
.plan-table {
width: 100%;
min-width: 880px;
border-collapse: collapse;
font-size: var(--fs-3xs);
}
.plan-table thead th {
position: sticky;
top: 0;
z-index: 2;
padding: var(--rg-espace-2) var(--rg-espace-3);
text-align: left;
font-weight: var(--rg-graisse-gras);
font-size: var(--fs-3xs);
text-transform: uppercase;
letter-spacing: var(--rg-label-m-espacement);
color: var(--text-muted);
background: var(--surface);
border-bottom: var(--rg-trait-1) solid var(--border-2);
white-space: nowrap;
}
.plan-l { cursor: pointer; }
.plan-l td {
padding: var(--rg-espace-1) var(--rg-espace-3);
border-bottom: var(--rg-trait-1) solid var(--border);
color: var(--text);
white-space: nowrap;
}
/* Le trait qui sépare les sessions : sans lui on ne voit plus où
un créneau finit, et c'est la seule chose qu'on lit vite. */
/* Le début d'une session doit se voir de loin : c'est la seule
chose qu'on lit vite au bord de la piste. */
.plan-l.is-session td { border-top: var(--rg-trait-3) solid var(--text-muted); }
.plan-l.is-session .plan-t--fort { font-weight: var(--rg-graisse-gras); }
.plan-l.is-lot td { border-top: var(--rg-trait-1) solid var(--border-2); }
.plan-t { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.plan-t--fort { color: var(--text); font-weight: var(--rg-graisse-semi); }
.plan-v { font-weight: var(--rg-graisse-semi); }
.plan-cam { color: var(--text-soft); }
.plan-note { color: var(--text-muted); white-space: normal; }
.plan-serie {
font-style: normal;
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-gras);
opacity: 0.6;
margin-left: var(--rg-espace-1);
}
.plan-deplace {
display: inline-block;
margin-left: var(--rg-espace-2);
padding: var(--rg-trait-1) var(--rg-espace-2);
border-radius: var(--rg-rayon-0);
font-size: var(--rg-taille-label-s);
background: var(--accent-soft);
color: var(--accent);
}
/* La couleur du véhicule, sur toute la ligne. */
.plan-l--proto td { background: var(--plan-proto-fond); }
.plan-l--fr td { background: var(--plan-fr-fond); }
.plan-l--f3 td { background: var(--plan-f3-fond); }
.plan-l--frbiplace td { background: var(--plan-bapteme-fond); }
.plan-l--proto .plan-v { color: var(--plan-proto-ink); }
.plan-l--fr .plan-v { color: var(--plan-fr-ink); }
.plan-l--f3 .plan-v { color: var(--plan-f3-ink); }
.plan-l--frbiplace .plan-v { color: var(--plan-bapteme-ink); }
@media (hover: hover) { .plan-l:hover td { filter: brightness(1.06); } }
/* --- Le menu de rattrapage --- */
.plan-menu {
position: fixed;
z-index: 90;
min-width: 232px;
max-height: 60vh;
overflow-y: auto;
padding: var(--rg-espace-2);
border-radius: var(--r-md);
background: var(--surface);
border: var(--rg-trait-1) solid var(--border-2);
box-shadow: none;
}
.plan-menu__head {
margin: var(--rg-espace-1) var(--rg-espace-2) var(--rg-espace-2);
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-semi);
color: var(--text);
}
.plan-menu__head span {
display: block;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-regulier);
color: var(--text-muted);
}
.plan-menu__soustitre {
margin: var(--rg-espace-2) var(--rg-espace-2) var(--rg-espace-1);
font-size: var(--fs-3xs);
text-transform: uppercase;
letter-spacing: var(--rg-label-m-espacement);
color: var(--text-muted);
}
.plan-menu__item {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
gap: var(--rg-espace-3);
padding: var(--rg-espace-2) var(--rg-espace-2);
border: 0;
border-radius: var(--r-sm);
background: transparent;
text-align: left;
font-size: var(--fs-xs);
color: var(--text);
cursor: pointer;
}
@media (hover: hover) { .plan-menu__item:hover { background: var(--surface-2); } }
.plan-menu__item i {
font-style: normal;
font-size: var(--fs-3xs);
color: var(--text-muted);
}
.plan-menu__item--h { font-variant-numeric: tabular-nums; }
.plan-menu__item--clear { color: var(--accent); }
/* =========================================================
L'IMPRESSION, une vague par page
---------------------------------------------------------
C'est la sortie que Lorette a demandée : la feuille qu'on
donne aux moniteurs le matin. On sort de l'application (pas
de barre latérale, pas de boutons) et on force le noir sur
blanc, parce qu'une feuille sur fond sombre vide une
cartouche d'encre.
========================================================= */
@media print {
@page { size: A4 landscape; margin: 10mm; }
/* LA LIGNE QUI FAIT TOUT
---------------------------------------------------------
Par défaut, les navigateurs SUPPRIMENT les fonds à
l'impression pour économiser l'encre : la feuille sortait en
noir et blanc quoi qu'on écrive dans les règles ci-dessous.
C'est ce que Lorette a vu. `print-color-adjust: exact` est la
seule façon de demander qu'on imprime ce qui est à l'écran,
et il en faut les deux écritures, Chrome et Safari ne se
sont mis d'accord que tard. */
* {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
.app-bg, .sidebar, .topbar, .page-hero, .profile-widget,
.plan-hors-impression, .plan-menu { display: none !important; }
html, body, .app-shell, .page-body, .access-section {
background: var(--rg-neutre-blanc) !important;
color: var(--rg-marine-8) !important;
margin: 0 !important;
padding: 0 !important;
max-width: none !important;
display: block !important;
}
.plan-vague {
break-inside: avoid;
break-after: page;
margin: 0;
border: 0;
background: var(--rg-neutre-blanc);
}
.plan-vague:last-child { break-after: auto; }
.plan-vague__bandeau {
border-left: calc(var(--rg-trait-repere) * 2) solid var(--plan-ton);
border-bottom: var(--rg-trait-3) solid var(--rg-marine-8);
background: var(--plan-ton-fond);
padding: var(--rg-espace-1) var(--rg-espace-2);
gap: var(--rg-espace-2) var(--rg-espace-4);
}
.plan-vague__titre { color: var(--plan-ton) !important; }
.plan-vague__ligne b, .plan-vague__ligne span,
.plan-compteur, .plan-compteur b { color: var(--rg-marine-8) !important; }
.plan-compteur { background: var(--rg-neutre-blanc) !important; box-shadow: none !important; }
.plan-compteur--libre b { color: var(--rg-marine-8) !important; }
.plan-table-wrap { overflow: visible; }
.plan-table { min-width: 0; font-size: var(--rg-taille-label-s); }
/* Une vague qui déborde reste lisible : l'en-tête se répète en
haut de la page suivante. Sans ça, la suite est une liste de
colonnes anonymes. */
.plan-table thead { display: table-header-group; }
.plan-table thead th { color: var(--rg-marine-8) !important; background: var(--rg-neutre-blanc) !important;
border-bottom: 1.5pt solid var(--rg-marine-8); padding: var(--rg-espace-1) var(--rg-espace-2); font-size: var(--rg-taille-label-s); }
.plan-l td { color: var(--rg-marine-8) !important; border-bottom: 0.4pt solid var(--rg-neutre-gris); padding: var(--rg-trait-1) var(--rg-espace-2); }
/* On coupe ENTRE deux sessions, jamais au milieu de l'une : une
session partagée entre deux pages est inutilisable au bord de
la piste, on ne sait plus qui monte en voiture. Chaque session
a donc son propre . */
.plan-s { break-inside: avoid; }
.plan-l.is-session td { border-top: 1.5pt solid var(--rg-marine-8); }
.plan-l.is-lot td { border-top: 0.75pt solid var(--rg-neutre-acier); }
/* Les aplats de leur document. Ce sont EXACTEMENT leurs
conventions, tenues depuis des années : bleu le Proto, blanc
la Formule Renault (c'est la majorité, elle ne doit pas
crier), vert la Formule 3, rose le baptême. En noir et blanc
ils sortent en gris et restent distincts. */
.plan-l--proto td { background: var(--rg-neutre-gris) !important; }
.plan-l--fr td { background: var(--rg-neutre-blanc) !important; }
.plan-l--f3 td { background: var(--rg-neutre-brume) !important; }
.plan-l--frbiplace td { background: var(--rg-rose-1) !important; }
.plan-l--proto .plan-v { color: var(--rg-marine-3) !important; }
.plan-l--f3 .plan-v { color: var(--rg-metier-vert-fonce) !important; }
.plan-l--frbiplace .plan-v { color: var(--rg-rose-7) !important; }
.plan-l--fr .plan-v { color: var(--rg-metier-vert-fonce) !important; }
/* Une place libre reste vide sur le papier : c'est une ligne à
remplir au stylo au bord de la piste, pas une information. */
.plan-l--libre td { background: var(--rg-neutre-blanc) !important; color: var(--rg-neutre-acier) !important; }
.plan-l--libre .plan-libre__act { display: none !important; }
.plan-l--libre .plan-libre__txt { color: var(--rg-neutre-acier) !important; }
.plan-cam__oui {
background: var(--rg-metier-jaune-clair) !important;
color: var(--rg-marine-8) !important;
box-shadow: none !important;
}
}
/* --------- LES COULEURS D'UNE CATÉGORIE « MA SEMAINE » ---------
Six pastilles au lieu d'un sélecteur de couleur libre : on
recolore une catégorie d'un clic, et sans pouvoir choisir un
fuchsia qui jure avec le reste de l'intranet. */
.myweek-cat-colors {
display: inline-flex;
gap: var(--rg-espace-1);
margin-left: auto;
padding-right: var(--rg-espace-2);
}
.myweek-cat-dot {
width: 15px;
height: 15px;
padding: 0;
border: 0;
border-radius: var(--rg-rayon-0);
cursor: pointer;
opacity: 0.5;
transition: opacity var(--rg-duree) ease, transform var(--rg-duree) ease;
}
@media (hover: hover) { .myweek-cat-dot:hover { opacity: 1; transform: scale(1.15); } }
.myweek-cat-dot.is-on {
opacity: 1;
box-shadow: none;
}
.myweek-cat-row { display: flex; align-items: center; gap: var(--rg-espace-2); }
.myweek-cat-name { flex: 0 1 auto; }
/* =========================================================
MA SEMAINE, la grille
---------------------------------------------------------
Un agenda, pas une liste : sept colonnes, les heures à
gauche, des blocs qu'on pose, tire et allonge. Rien n'y
entre qui ne vienne de la personne elle-même.
========================================================= */
.mw { display: flex; flex-direction: column; gap: var(--rg-espace-3); }
.mw__bar {
display: flex;
align-items: center;
gap: var(--rg-espace-2);
flex-wrap: wrap;
}
.mw__hint {
font-size: var(--fs-3xs);
color: var(--text-muted);
margin-left: auto;
}
.mw__grid {
display: flex;
gap: var(--rg-espace-2);
overflow-x: auto;
padding-bottom: calc(var(--rg-espace-1) / 2);
}
/* --- la colonne des heures --- */
.mw__hours {
flex: 0 0 42px;
padding-top: var(--rg-espace-5);
display: flex;
flex-direction: column;
}
.mw__hour {
height: var(--mw-pxh);
font-size: var(--rg-taille-label-s);
line-height: var(--rg-interligne-plein);
color: var(--text-faint);
transform: translateY(-4px);
font-variant-numeric: tabular-nums;
}
/* --- les sept jours --- */
.mw__days {
display: grid;
grid-template-columns: repeat(7, minmax(74px, 1fr));
gap: var(--rg-espace-1);
flex: 1 1 auto;
min-width: 560px;
}
.mw__day { display: flex; flex-direction: column; min-width: 0; }
.mw__dayname {
height: 22px;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
text-transform: uppercase;
letter-spacing: var(--rg-label-m-espacement);
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mw__day.is-weekend .mw__dayname { color: var(--text-faint); }
.mw__col {
position: relative;
height: calc(var(--mw-pxh) * 14);
border-radius: var(--r-sm);
background: var(--surface-2);
cursor: copy;
overflow: hidden;
}
.mw__day.is-weekend .mw__col { background: var(--surface-3); }
/* Un filet par heure : sans repère, on ne sait pas où on pose. */
.mw__line {
display: block;
height: var(--mw-pxh);
border-bottom: var(--rg-trait-1) solid var(--border);
}
.mw__line:last-of-type { border-bottom: 0; }
/* --- un événement --- */
.mw__ev {
position: absolute;
left: 2px;
right: 2px;
padding: var(--rg-espace-1) var(--rg-espace-1);
border-radius: var(--r-sm);
border-left: var(--rg-trait-4) solid var(--c);
background: color-mix(in srgb, var(--c) 22%, transparent);
color: var(--text);
overflow: hidden;
cursor: grab;
touch-action: none;
transition: box-shadow var(--rg-duree) ease;
}
@media (hover: hover) { .mw__ev:hover { box-shadow: none; } }
.mw__ev.is-dragging,
.mw__ev.is-sizing {
cursor: grabbing;
z-index: 5;
box-shadow: none;
}
.mw__ev-h {
display: block;
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-gras);
color: var(--c);
font-variant-numeric: tabular-nums;
}
.mw__ev-l {
display: block;
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-semi);
line-height: var(--rg-interligne-h2);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mw__ev-by {
display: block;
font-size: var(--rg-taille-label-s);
color: var(--text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Un bloc court n'a pas la place de tout dire : l'heure suffit,
le reste est dans l'infobulle. */
.mw__ev.is-court { padding: var(--rg-trait-1) var(--rg-espace-1); display: flex; align-items: center; gap: var(--rg-espace-1); }
.mw__ev.is-court .mw__ev-h { font-size: var(--rg-taille-label-s); }
.mw__ev.is-court .mw__ev-l { font-size: var(--rg-taille-label-s); }
.mw__ev.is-court .mw__ev-by { display: none; }
.mw__ev-x {
position: absolute;
top: 1px;
right: 1px;
width: 16px;
height: 16px;
padding: 0;
border: 0;
border-radius: var(--rg-rayon-0);
background: transparent;
color: var(--text-muted);
font-size: var(--rg-taille-texte-s);
line-height: var(--rg-interligne-plein);
cursor: pointer;
opacity: 0;
transition: opacity var(--rg-duree) ease;
}
@media (hover: hover) { .mw__ev:hover .mw__ev-x { opacity: 1; } }
@media (hover: hover) { .mw__ev-x:hover { background: var(--accent-soft); color: var(--accent); } }
/* La poignée du bas : on allonge un rendez-vous en le tirant. */
.mw__ev-grip {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 6px;
cursor: ns-resize;
}
.mw__ev-grip::after {
content: "";
position: absolute;
left: 50%;
bottom: 2px;
width: 16px;
height: 2px;
border-radius: var(--rg-rayon-0);
transform: translateX(-50%);
background: var(--c);
opacity: 0;
transition: opacity var(--rg-duree) ease;
}
@media (hover: hover) { .mw__ev:hover .mw__ev-grip::after { opacity: 0.6; } }
.mw__vide {
margin: 0;
font-size: var(--fs-3xs);
color: var(--text-muted);
text-align: center;
}
@media (max-width: 900px) {
.mw__hint { display: none; }
}
/* =========================================================
LES FORMATS DE WIDGET
---------------------------------------------------------
Demandé le 2026-09-03. La grille passe de deux à quatre
colonnes : non pour aligner quatre widgets, mais pour que le
quart de ligne EXISTE. Sur une grille à deux colonnes il n'y a
que deux tailles possibles ; sur quatre, il y en a quatre, et
chacun peut donner à chaque widget la place qu'il occupe
vraiment dans sa journée.
La taille par défaut (`md`) rend exactement ce qu'on avait :
personne ne voit son tableau bouger tant qu'il n'y touche pas.
========================================================= */
.grid { grid-template-columns: repeat(4, 1fr); }
/* Sans ça, un widget dont le contenu a une largeur minimale, la
grille de MA SEMAINE, un tableau, élargit sa colonne au lieu
de défiler dedans, et c'est toute la page qui déborde sur un
téléphone. La règle vaut pour la boîte comme pour son corps. */
.grid > .widget,
.grid > .widget > .widget__body { min-width: 0; }
.widget[data-format="sm"] { grid-column: span 1; }
.widget[data-format="md"] { grid-column: span 2; }
.widget[data-format="tall"] { grid-column: span 2; }
.widget[data-format="lg"] { grid-column: span 4; }
/* --- Compact : on enlève tout ce qui n'est pas la réponse --- */
.widget[data-format="sm"] {
padding: var(--gap);
gap: var(--rg-espace-3);
/* Une tuile compacte ne s'étire pas pour rattraper le grand
widget d'à côté : elle vaut par sa petitesse. Sans ça, un
« 0 tâches » se retrouve haut de 700 px parce qu'un planning
partage sa ligne. */
align-self: start;
}
.widget[data-format="sm"] .widget__subtitle,
.widget[data-format="sm"] .widget__action { display: none; }
.widget[data-format="sm"] .widget__icon { width: 30px; height: 30px; border-radius: var(--r-sm); }
.widget[data-format="sm"] .widget__icon svg { width: 16px; height: 16px; }
.widget[data-format="sm"] .widget__title { font-size: var(--fs-xs); }
.widget[data-format="sm"] .widget__body { min-height: 62px; }
/* --- Colonne : la même chose, mais on en voit deux fois plus.
C'est le format des listes, tâches, documents, rappels, qu'on n'a aucune envie de faire défiler dix lignes à la
fois. --- */
.widget[data-format="tall"] .widget__body {
min-height: 240px;
max-height: 620px;
overflow-y: auto;
}
/* --- Pleine largeur : une liste qui s'étale au lieu de
s'allonger. Un widget large qui garde une colonne de texte
de 200 px au milieu de 1200 px de vide n'est pas large,
il est juste étiré. --- */
/* Ces listes sont des colonnes flex : `columns` n'a aucun effet
dessus (le multicolonne ignore les conteneurs flex). On passe
donc en grille à deux colonnes, c'est ce que « pleine
largeur » doit vouloir dire : deux fois plus de lignes
visibles, pas deux fois plus de vide à droite. */
.widget[data-format="lg"] .dash-list,
.widget[data-format="lg"] .crew-list,
.widget[data-format="lg"] .agenda {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--gap-xs) var(--gap-lg);
align-content: start;
}
/* Les documents sont des cartes, pas des lignes : on en met
quatre de front plutôt que d'en étirer deux. */
.widget[data-format="lg"] .docs-grid { grid-template-columns: repeat(4, 1fr); }
/* MA SEMAINE en demi-largeur : sept jours dans 600 px, c'est
possible à condition de rendre la colonne des heures discrète
et de laisser les jours se serrer. Un agenda dont on ne voit
pas le dimanche ne sert à rien. */
.widget[data-format="md"] .mw__days {
min-width: 0;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: var(--rg-espace-1);
}
.widget[data-format="md"] .mw__hours { flex: 0 0 30px; }
.widget[data-format="md"] .mw__hour { font-size: var(--rg-taille-label-s); }
.widget[data-format="md"] .mw__ev-h { font-size: var(--rg-taille-label-s); }
.widget[data-format="md"] .mw__ev-l { font-size: var(--rg-taille-label-s); }
.widget[data-format="md"] .mw__hint { display: none; }
/* =========================================================
LE CONDENSÉ
---------------------------------------------------------
Ce qu'un widget raconte quand il n'a qu'un quart de ligne :
un chiffre, ce qu'il compte, et une ligne de contexte. Jamais
plus, un condensé qui déborde n'est plus un condensé.
========================================================= */
.dash-digest {
display: flex;
flex-direction: column;
gap: calc(var(--rg-espace-1) / 2);
justify-content: center;
height: 100%;
}
.dash-digest__n {
font-size: var(--rg-taille-h2);
line-height: var(--rg-interligne-plein);
font-weight: var(--rg-graisse-extra);
letter-spacing: var(--rg-chiffre-xl-espacement);
color: var(--text);
font-variant-numeric: tabular-nums;
}
.dash-digest__l {
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
text-transform: uppercase;
letter-spacing: var(--rg-label-m-espacement);
color: var(--text-muted);
}
.dash-digest__d {
font-size: var(--fs-3xs);
color: var(--text-soft);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Quand la réponse est un nom ou une date, un « 1 » géant ne dit
rien : on met le texte en avant à la place du chiffre. */
.dash-digest__f {
font-size: var(--fs-sm);
font-weight: var(--rg-graisse-gras);
line-height: var(--rg-interligne-court);
color: var(--text);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.dash-digest--texte { gap: var(--rg-espace-1); }
/* Un condensé qui demande une action : le chiffre passe en
alarme et prend une pastille. C'est le seul signal qui reste
quand le widget est réduit à un quart de ligne, s'il ne se
distingue pas, l'alerte disparaît en même temps que la
place. */
.dash-digest--alarme .dash-digest__n { color: var(--pop-alarme); }
.dash-digest--alarme .dash-digest__l {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
color: var(--pop-alarme);
}
.dash-digest--alarme .dash-digest__l::before {
content: "";
width: 7px;
height: 7px;
border-radius: var(--rg-rayon-0);
background: var(--pop-alarme);
}
/* Sa propre semaine en sept pastilles : le seul condensé qui ne
soit pas un chiffre mais une forme. */
.dash-mini-sem { display: flex; gap: var(--rg-espace-1); margin-bottom: var(--rg-espace-1); }
.dash-mini-sem .edt-key { flex: 1 1 0; height: 24px; border-radius: var(--r-sm); }
/* =========================================================
LE CHOIX DE LA TAILLE, DANS LE PANNEAU
========================================================= */
.dash-panel__row { flex-wrap: wrap; }
.dash-panel__sizes {
display: flex;
flex-wrap: wrap;
gap: var(--rg-espace-1);
flex: 1 0 100%;
margin-top: calc(var(--rg-espace-1) / 2);
}
.dash-size {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
padding: var(--rg-espace-1) var(--rg-espace-2);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--rg-rayon-0);
background: transparent;
color: var(--text-muted);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
cursor: pointer;
transition: border-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
@media (hover: hover) { .dash-size:hover { border-color: var(--border-2); color: var(--text); } }
.dash-size.is-on {
border-color: var(--accent);
color: var(--accent);
background: var(--accent-soft);
}
/* Une vignette qui montre la proportion : « Standard » ne veut
rien dire tant qu'on n'a pas vu ce que ça occupe. */
.dash-size__i {
position: relative;
width: 18px;
height: 10px;
border: var(--rg-trait-1) solid currentColor;
border-radius: var(--rg-rayon-0);
opacity: 0.75;
flex: 0 0 auto;
}
.dash-size__i::after {
content: "";
position: absolute;
top: 1px;
bottom: 1px;
left: 1px;
background: currentColor;
border-radius: var(--rg-rayon-0);
}
.dash-size__i--sm::after { right: 13px; }
.dash-size__i--md::after { right: 9px; }
.dash-size__i--tall { height: 14px; }
.dash-size__i--tall::after { right: 9px; }
.dash-size__i--lg::after { right: 1px; }
/* =========================================================
AUX PETITES LARGEURS
---------------------------------------------------------
Quatre colonnes ne tiennent pas sur un portable. On replie sur
deux puis sur une, en gardant l'ordre : ce que la personne a
mis en premier reste en premier.
========================================================= */
@media (max-width: 1024px) {
.grid { grid-template-columns: repeat(2, 1fr); }
.widget[data-format="sm"] { grid-column: span 1; }
.widget[data-format="md"],
.widget[data-format="tall"],
.widget[data-format="lg"] { grid-column: span 2; }
.widget[data-format="lg"] .dash-list { columns: 1; }
}
@media (max-width: 640px) {
.grid { grid-template-columns: 1fr; }
.widget[data-format="sm"],
.widget[data-format="md"],
.widget[data-format="tall"],
.widget[data-format="lg"] { grid-column: span 1; }
.widget[data-format="tall"] .widget__body { min-height: 0; }
}
/* =========================================================
MA SEMAINE, LA FICHE D'UN ÉVÉNEMENT
---------------------------------------------------------
Trois blocs numérotés qui suivent la question qu'on se pose :
quoi, quand, avec qui. Pas une grille de six champs.
========================================================= */
.mwf { display: flex; flex-direction: column; gap: var(--gap-md); }
.mwf__bloc {
display: flex;
flex-direction: column;
gap: var(--rg-espace-2);
padding-top: var(--gap);
border-top: var(--rg-trait-1) solid var(--border);
}
.mwf__bloc:first-child { padding-top: 0; border-top: 0; }
.mwf__titre {
display: flex;
align-items: center;
gap: var(--rg-espace-2);
margin: 0;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
text-transform: uppercase;
letter-spacing: var(--rg-label-m-espacement);
color: var(--text-muted);
}
.mwf__titre i {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: var(--rg-rayon-0);
background: var(--accent-soft);
color: var(--accent);
font-style: normal;
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-gras);
}
.mwf__titre em {
font-style: normal;
font-weight: var(--rg-graisse-moyen);
text-transform: none;
letter-spacing: 0;
color: var(--text-faint);
}
.mwf__titre-champ { font-size: var(--fs-sm); font-weight: var(--rg-graisse-semi); }
/* --- La catégorie se choisit par sa couleur, pas dans un menu
déroulant : c'est une couleur, on la montre. --- */
.mwf__cats-ligne { display: flex; align-items: center; gap: var(--rg-espace-2); flex-wrap: wrap; }
.mwf__cats { display: flex; flex-wrap: wrap; gap: var(--rg-espace-2); }
.mwf__cat {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
padding: var(--rg-espace-1) var(--rg-espace-3);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--rg-rayon-0);
background: transparent;
color: var(--text-soft);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
cursor: pointer;
transition: border-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.mwf__cat i {
width: 10px;
height: 10px;
border-radius: var(--rg-rayon-0);
background: var(--c);
flex: 0 0 auto;
}
@media (hover: hover) { .mwf__cat:hover { border-color: var(--border-2); color: var(--text); } }
.mwf__cat.is-on {
border-color: var(--c);
color: var(--text);
background: color-mix(in srgb, var(--c) 14%, transparent);
}
.mwf__gerer {
margin-left: auto;
border: 0;
background: transparent;
color: var(--accent);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
cursor: pointer;
padding: var(--rg-espace-1) calc(var(--rg-espace-1) / 2);
}
@media (hover: hover) { .mwf__gerer:hover { text-decoration: underline; } }
.mwf__quand {
display: grid;
grid-template-columns: 1.2fr 1fr 1fr;
gap: var(--gap-sm);
}
/* La phrase qui récapitule : on la lit au lieu de recomposer
trois champs dans sa tête. */
.mwf__recap {
margin: 0;
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-semi);
color: var(--text-soft);
font-variant-numeric: tabular-nums;
}
.mwf__chips { display: flex; flex-wrap: wrap; gap: var(--rg-espace-2); }
.mwf__chip {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
padding: var(--rg-espace-1) var(--rg-espace-1) var(--rg-espace-1) var(--rg-espace-1);
border-radius: var(--rg-rayon-0);
background: var(--surface-2);
box-shadow: none;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
color: var(--text);
}
.mwf__chip .crew-avatar { width: 22px; height: 22px; font-size: var(--rg-taille-label-s); }
.mwf__chip button {
width: 18px;
height: 18px;
border: 0;
border-radius: var(--rg-rayon-0);
background: transparent;
color: var(--text-muted);
font-size: var(--rg-taille-texte-s);
line-height: var(--rg-interligne-plein);
cursor: pointer;
}
@media (hover: hover) { .mwf__chip button:hover { background: var(--accent-soft); color: var(--accent); } }
.mwf__cherche { position: relative; }
.mwf__cherche svg {
position: absolute;
left: 11px;
top: 50%;
width: 16px;
height: 16px;
transform: translateY(-50%);
color: var(--text-faint);
pointer-events: none;
}
.mwf__cherche .form-input { padding-left: var(--rg-espace-6); }
.mwf__res {
display: flex;
flex-direction: column;
gap: calc(var(--rg-espace-1) / 2);
max-height: 216px;
overflow-y: auto;
}
.mwf__res-l {
display: flex;
align-items: center;
gap: var(--rg-espace-3);
width: 100%;
padding: var(--rg-espace-2) var(--rg-espace-2);
border: 0;
border-radius: var(--r-sm);
background: transparent;
text-align: left;
cursor: pointer;
}
@media (hover: hover) { .mwf__res-l:hover { background: var(--surface-2); } }
.mwf__res-l .crew-avatar { width: 28px; height: 28px; font-size: var(--rg-taille-label-s); flex: 0 0 auto; }
.mwf__res-n { min-width: 0; flex: 1 1 auto; }
.mwf__res-n b {
display: block;
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-semi);
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mwf__res-n em {
display: block;
font-style: normal;
font-size: var(--fs-3xs);
color: var(--text-muted);
}
/* La disponibilité est indicative, jamais bloquante : on invite
qui on veut, c'est la personne qui répond. */
.mwf__dispo {
flex: 0 0 auto;
padding: var(--rg-espace-1) var(--rg-espace-2);
border-radius: var(--rg-rayon-0);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
background: var(--surface-2);
color: var(--text-soft);
}
.mwf__dispo.is-pris { color: var(--text-muted); opacity: 0.8; }
.mwf__vide {
margin: calc(var(--rg-espace-1) / 2) 0;
font-size: var(--fs-3xs);
color: var(--text-faint);
}
/* =========================================================
LES DEMANDES REÇUES
---------------------------------------------------------
En haut du widget, comptées, dépliées. Sous la grille, après
quatorze heures de créneaux, personne ne les voyait, c'est
exactement ce que Lorette a signalé.
========================================================= */
.mw__cloche {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
padding: var(--rg-espace-1) var(--rg-espace-3) var(--rg-espace-1) var(--rg-espace-2);
border: var(--rg-trait-1) solid var(--accent);
border-radius: var(--rg-rayon-0);
background: var(--accent-soft);
color: var(--accent);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
cursor: pointer;
}
.mw__cloche svg { width: 15px; height: 15px; }
.mw__cloche b {
min-width: 17px;
padding: 0 var(--rg-espace-1);
border-radius: var(--rg-rayon-0);
background: var(--accent);
color: var(--rg-neutre-blanc);
font-size: var(--rg-taille-label-s);
line-height: var(--rg-interligne-plein);
text-align: center;
}
.mw__inbox {
display: flex;
flex-direction: column;
gap: var(--rg-espace-2);
padding: var(--rg-espace-3);
border-radius: var(--r-md);
background: var(--surface-2);
box-shadow: none;
}
.mw__inbox[hidden] { display: none; }
.mw__inv {
display: flex;
align-items: center;
gap: var(--rg-espace-3);
padding: var(--rg-espace-2) var(--rg-espace-3);
border-radius: var(--r-sm);
border-left: var(--rg-trait-4) solid var(--c);
background: var(--surface);
}
.mw__inv-qui { display: flex; align-items: center; gap: var(--rg-espace-2); flex: 1 1 auto; min-width: 0; }
.mw__inv-qui .crew-avatar { width: 30px; height: 30px; font-size: var(--rg-taille-label-s); flex: 0 0 auto; }
.mw__inv-qui > span { min-width: 0; }
.mw__inv-qui b {
display: block;
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-semi);
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mw__inv-qui em {
display: block;
font-style: normal;
font-size: var(--fs-3xs);
color: var(--text-muted);
}
.mw__inv-dispo {
flex: 0 0 auto;
padding: var(--rg-espace-1) var(--rg-espace-2);
border-radius: var(--rg-rayon-0);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
background: var(--surface-2);
color: var(--text-soft);
}
.mw__inv-dispo.is-pris { color: var(--text-muted); opacity: 0.8; }
.mw__inv-act { display: flex; gap: var(--rg-espace-2); flex: 0 0 auto; }
@media (max-width: 760px) {
.mw__inv { flex-wrap: wrap; }
.mw__inv-act { width: 100%; justify-content: flex-end; }
.mwf__quand { grid-template-columns: 1fr; }
}
/* =========================================================
UN RENDEZ-VOUS PAS ENCORE CONFIRMÉ
---------------------------------------------------------
Demandé tel quel : « peut-être un contour en tirets ». Le
tiret est le bon signe, il dit « pas encore fixé » sans
ajouter une couleur de plus, et il se lit même en noir et
blanc, ce qu'un aplat plus pâle ne ferait pas.
========================================================= */
.mw__ev.is-attente {
background: color-mix(in srgb, var(--c) 9%, transparent);
border-left-style: dashed;
outline: var(--rg-trait-1) dashed var(--c);
outline-offset: calc(var(--rg-trait-1) * -1);
}
.mw__ev-att { font-style: normal; margin-left: var(--rg-espace-1); opacity: 0.8; }
/* =========================================================
TEAM SCHEDULE, une semaine, une personne
========================================================= */
.ts { display: flex; flex-direction: column; gap: var(--rg-espace-3); }
.ts__bar { display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap; }
.ts__cherche { position: relative; flex: 1 1 200px; max-width: 300px; }
.ts__cherche svg {
position: absolute;
left: 11px;
top: 50%;
width: 16px;
height: 16px;
transform: translateY(-50%);
color: var(--text-faint);
pointer-events: none;
}
.ts__cherche .form-input { padding-left: var(--rg-espace-6); }
.ts__qui { display: flex; align-items: center; gap: var(--rg-espace-2); }
.ts__qui .crew-avatar { width: 26px; height: 26px; font-size: var(--rg-taille-label-s); }
.ts__qui b { font-size: var(--fs-xs); font-weight: var(--rg-graisse-semi); color: var(--text); }
.ts__qui em { font-style: normal; font-size: var(--fs-3xs); color: var(--text-faint); }
.ts__qui button {
border: 0;
background: transparent;
color: var(--accent);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
cursor: pointer;
padding: calc(var(--rg-espace-1) / 2);
}
@media (hover: hover) { .ts__qui button:hover { text-decoration: underline; } }
.ts__res {
display: flex;
flex-direction: column;
gap: calc(var(--rg-espace-1) / 2);
padding: var(--rg-espace-1);
border-radius: var(--r-md);
background: var(--surface-2);
box-shadow: none;
}
.ts__res-l {
display: flex;
align-items: center;
gap: var(--rg-espace-3);
width: 100%;
padding: var(--rg-espace-2) var(--rg-espace-2);
border: 0;
border-radius: var(--r-sm);
background: transparent;
text-align: left;
cursor: pointer;
}
@media (hover: hover) { .ts__res-l:hover { background: var(--surface); } }
.ts__res-l .crew-avatar { width: 26px; height: 26px; font-size: var(--rg-taille-label-s); flex: 0 0 auto; }
.ts__res-l b { display: block; font-size: var(--fs-xs); font-weight: var(--rg-graisse-semi); color: var(--text); }
.ts__res-l em {
display: block;
font-style: normal;
font-size: var(--fs-3xs);
color: var(--text-muted);
}
/* La semaine : sept colonnes, et de la PLACE, c'est tout
l'intérêt de ne montrer qu'une personne. On écrit « Dijon »
au lieu de colorier un carré de 8 px. */
.ts__week {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: var(--rg-espace-1);
}
/* =========================================================
SON PROPRE BILAN, SOUS SA SEMAINE, `.tsb`
---------------------------------------------------------
Séparé de la semaine par un filet, pas par une carte dans la
carte : ce sont deux lectures de la même chose, ce qu'il
fait, ce que ça lui a produit, et non deux widgets empilés.
Les anneaux sont ceux du Bilan de la gestionnaire (`.dnt`),
en `--mini` : même dessin, même palette, mêmes règles. Deux
chiffres différents pour la même personne selon l'écran, et
plus personne ne croit ni l'un ni l'autre.
========================================================= */
.tsb {
margin-top: var(--rg-espace-1);
padding-top: var(--rg-espace-4);
border-top: var(--rg-trait-1) solid var(--border);
}
.tsb__t {
display: flex;
align-items: baseline;
gap: var(--rg-espace-2);
margin: 0 0 var(--rg-espace-3);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--text-muted);
}
.tsb__t em {
font-style: normal;
font-weight: var(--rg-graisse-moyen);
letter-spacing: 0;
text-transform: none;
color: var(--text-faint);
}
/* LE PANNEAU, un objet, pas quatre ronds posés au milieu du
vide. Lorette : « je ne trouve pas que les donuts s'intègrent
joliment au widget. » Le tort n'était pas l'anneau, c'était
la mise en page : quatre cellules d'un `grid` pleine largeur,
contenu centré, donc trois cents pixels de blanc autour de
chaque rond de 44 px.
Ici les cellules se partagent une même surface et sont
séparées par un filet ; dans chacune, l'anneau est à gauche et
le texte à droite, aligné, donc la cellule est REMPLIE. */
.tsb__panneau {
display: flex;
flex-wrap: wrap;
padding: var(--rg-espace-4) var(--rg-espace-1);
border-radius: var(--r-md);
background: var(--surface-2);
}
.tsb__c {
flex: 1 1 0;
min-width: 0;
display: flex;
align-items: center;
gap: var(--rg-espace-3);
padding: calc(var(--rg-espace-1) / 2) var(--rg-espace-4);
border-left: var(--rg-trait-1) solid var(--border);
}
.tsb__c:first-child { border-left: 0; }
/* Deux jauges, deux totaux. Un anneau n'existe que s'il a un
dénominateur : les congés se lisent sur le droit annuel et la
récup sur la réserve, tandis que « 7 h sur 413 h dues » ne
dessine qu'un point invisible. Ces deux-là sont donc des
chiffres, marqués d'une pastille de leur couleur. */
.tsb__anneau {
position: relative;
flex: 0 0 auto;
width: 42px;
height: 42px;
}
.tsb__anneau svg { width: 100%; height: 100%; display: block; }
.tsb__puce {
flex: 0 0 auto;
width: 9px;
height: 9px;
border-radius: var(--rg-rayon-0);
background: var(--dnt-c, var(--border-2));
}
.tsb__txt { min-width: 0; display: flex; flex-direction: column; gap: var(--rg-trait-1); }
.tsb__txt b {
font-size: var(--rg-taille-h3);
font-weight: var(--rg-graisse-gras);
line-height: var(--rg-interligne-plein);
color: var(--text);
font-variant-numeric: tabular-nums;
}
.tsb__txt b i {
font-style: normal;
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-semi);
color: var(--text-faint);
margin-left: calc(var(--rg-espace-1) / 2);
}
.tsb__txt span {
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
color: var(--text-soft);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tsb__txt u {
text-decoration: none;
font-size: var(--fs-3xs);
color: var(--text-faint);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Un solde à découvert ou une réserve dépassée teignent le
chiffre ET l'anneau. La teinte se pose sur la cellule, qui
porte `dnt--pN` sans porter `.dnt` : la règle `.dnt.is-alerte`
du Bilan ne l'attrape donc pas, il faut la redire ici. */
.tsb__c.is-neg,
.tsb__c.is-alerte { --dnt-c: var(--pop-alarme); }
.tsb__c.is-neg .tsb__txt b,
.tsb__c.is-alerte .tsb__txt b { color: var(--pop-alarme); }
/* La phrase d'alerte. Elle n'apparaît que quand la réserve est
dépassée, une bande d'avertissement affichée en permanence
se lit comme du décor au bout de trois jours. */
.tsb__mot {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: var(--rg-espace-1) var(--rg-espace-2);
margin: var(--rg-espace-3) 0 0;
padding: var(--rg-espace-2) var(--rg-espace-3);
border-radius: var(--r-sm);
background: color-mix(in srgb, var(--pop-alarme) 12%, transparent);
box-shadow: none;
font-size: var(--fs-3xs);
line-height: var(--rg-interligne-texte);
color: var(--text-soft);
}
.tsb__pastille {
flex: 0 0 auto;
width: 8px;
height: 8px;
border-radius: var(--rg-rayon-0);
background: var(--pop-alarme);
align-self: center;
}
.tsb__mot a {
font-weight: var(--rg-graisse-gras);
color: var(--pop-alarme);
text-decoration: none;
white-space: nowrap;
}
@media (hover: hover) { .tsb__mot a:hover { text-decoration: underline; } }
.tsb__mot em { font-style: normal; color: var(--text-faint); }
/* En dessous de 900 px les quatre cellules ne tiennent plus
côte à côte : deux par ligne, et le filet passe en haut pour
la seconde rangée, sinon la première cellule de la ligne du
bas garderait un filet à gauche qui ne sépare rien. */
@media (max-width: 900px) {
.tsb__c { flex: 1 1 44%; padding: var(--rg-espace-3) var(--rg-espace-4); }
.tsb__c:nth-child(odd) { border-left: 0; }
.tsb__c:nth-child(n+3) { border-top: var(--rg-trait-1) solid var(--border); }
}
.ts__day {
display: flex;
flex-direction: column;
gap: var(--rg-espace-1);
min-width: 0;
padding: var(--rg-espace-2) var(--rg-espace-2) var(--rg-espace-2);
border-radius: var(--r-md);
background: var(--surface-2);
}
.ts__day.is-weekend { background: var(--surface-3); }
.ts__day.is-today { box-shadow: none; }
.ts__dow {
display: flex;
align-items: baseline;
gap: var(--rg-espace-1);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
text-transform: uppercase;
letter-spacing: var(--rg-label-m-espacement);
color: var(--text-muted);
}
.ts__dow em { font-style: normal; font-weight: var(--rg-graisse-semi); color: var(--text-faint); }
.ts__day.is-today .ts__dow { color: var(--accent); }
.ts__half {
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--rg-trait-1);
min-height: 34px;
padding: var(--rg-espace-1) var(--rg-espace-2);
border-radius: var(--r-sm);
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-semi);
overflow: hidden;
}
.ts__half.is-full { min-height: 71px; }
.ts__half.is-vide {
background: transparent;
box-shadow: none;
color: var(--text-faint);
font-weight: var(--rg-graisse-moyen);
}
.ts__half i {
font-style: normal;
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
opacity: 0.7;
}
.ts__half b { font-size: var(--rg-taille-label-s); letter-spacing: var(--rg-label-m-espacement); opacity: 0.8; }
.ts__txt {
/* min-width: 0 : sans lui le texte est rogné des deux côtés au
lieu de finir par des points de suspension. Le même piège que
dans le grand tableau. */
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: var(--rg-interligne-court);
}
/* Sept colonnes lisibles ne tiennent pas partout : on replie sur
quatre puis deux plutôt que d'écraser le texte. */
@media (max-width: 1240px) {
.widget[data-format="md"] .ts__week { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.ts__week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* =========================================================
LES PLACES LIBRES
---------------------------------------------------------
Ajoutées le 2026-09-03. Une feuille de journée n'est pas
seulement un déroulé, c'est un état du remplissage : un
vendeur au téléphone doit voir qu'il reste deux places en
Proto à 10h40. Assez discrètes pour ne pas concurrencer les
lignes pleines, assez visibles pour se compter d'un coup
d'œil.
========================================================= */
.plan-l--libre td {
background: transparent;
color: var(--text-faint);
}
@media (hover: hover) { .plan-l--libre:hover td { background: var(--surface-2); } }
.plan-l--libre .plan-v { color: var(--text-faint); font-weight: var(--rg-graisse-moyen); }
.plan-libre {
display: flex;
align-items: center;
gap: var(--rg-espace-3);
}
/* Le trait pointillé dit « à remplir » sans rien écrire. */
.plan-libre__txt {
flex: 1 1 auto;
border-bottom: var(--rg-trait-1) dashed var(--border-2);
font-size: var(--fs-3xs);
font-style: italic;
color: var(--text-faint);
}
.plan-libre__act {
flex: 0 0 auto;
padding: var(--rg-trait-1) var(--rg-espace-2);
border-radius: var(--rg-rayon-0);
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-semi);
background: var(--accent-soft);
color: var(--accent);
opacity: 0;
transition: opacity var(--rg-duree) ease;
}
@media (hover: hover) { .plan-l--libre:hover .plan-libre__act { opacity: 1; } }
.plan-compteur--libre b { color: var(--text-muted); }
/* La caméra était écrite « oui » en gris pâle : Lorette ne l'a
pas vue du tout. C'est une option facturée qu'un moniteur doit
repérer en passant, elle mérite une étiquette. */
.plan-cam__oui {
display: inline-block;
padding: var(--rg-trait-1) var(--rg-espace-2);
border-radius: var(--rg-rayon-0);
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-gras);
letter-spacing: 0;
background: var(--edt-conge, color-mix(in srgb, var(--rg-piste-orange) 22%, transparent));
color: var(--text);
box-shadow: none;
}
@media print {
.plan-vague__titre { margin-bottom: var(--rg-espace-1); font-size: var(--rg-taille-label-s); }
.plan-vague__ligne { margin-bottom: 0; font-size: var(--rg-taille-label-s); }
.plan-vague__ligne span { min-width: 108px; }
.plan-vague__ligne b { font-size: var(--rg-taille-label-s); }
.plan-compteur { padding: calc(var(--rg-espace-1) / 2) var(--rg-espace-2); font-size: var(--rg-taille-label-s); gap: var(--rg-espace-1); }
.plan-compteur b { font-size: var(--rg-taille-label-m); }
.plan-vague__compteurs { gap: var(--rg-espace-1); }
.plan-serie { font-size: var(--rg-taille-label-s); }
.plan-cam__oui { padding: 0 var(--rg-espace-1); font-size: var(--rg-taille-label-s); }
.plan-libre__txt { font-size: var(--rg-taille-label-s); }
}
/* =========================================================
TIMETABLE, LA CHRONOLOGIE
---------------------------------------------------------
Refait le 2026-09-03. Une journée de course était une liste :
quatre lignes également espacées pour 09:00, 10:30, 14:00 et
16:30. On ne voyait ni les durées, ni les creux, ni ce qui se
passe en parallèle, alors que c'est exactement ce qu'on vient
chercher. La hauteur d'un bloc EST sa durée.
La DA suit celle des autres onglets, pas l'inverse : hero à
plat, teintes pâles à encre foncée, couleurs de discipline
pour les métiers.
========================================================= */
/* --- La barre d'outils --- */
.ttbar {
display: flex;
align-items: center;
gap: var(--gap);
flex-wrap: wrap;
margin-bottom: var(--gap);
}
.ttbar__seg {
display: inline-flex;
padding: var(--rg-espace-1);
border-radius: var(--rg-rayon-0);
background: var(--surface-2);
box-shadow: none;
}
.ttseg {
padding: var(--rg-espace-1) var(--rg-espace-4);
border: 0;
border-radius: var(--rg-rayon-0);
background: transparent;
color: var(--text-muted);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
cursor: pointer;
white-space: nowrap;
}
.ttseg.is-on { background: var(--rg-texte-principal); color: var(--rg-texte-inverse); }
@media (hover: hover) { .ttseg:not(.is-on):hover { color: var(--text); } }
.ttbar__jours { display: flex; gap: var(--rg-espace-1); flex-wrap: wrap; }
.ttchip {
display: inline-flex;
align-items: baseline;
gap: var(--rg-espace-2);
padding: var(--rg-espace-1) var(--rg-espace-3);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--rg-rayon-0);
background: transparent;
color: var(--text-soft);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
cursor: pointer;
}
.ttchip i {
font-style: normal;
font-weight: var(--rg-graisse-moyen);
color: var(--text-faint);
font-variant-numeric: tabular-nums;
}
@media (hover: hover) { .ttchip:hover { border-color: var(--border-2); color: var(--text); } }
.ttchip.is-on {
border-color: var(--accent);
background: var(--accent-soft);
color: var(--accent);
}
.ttchip.is-on i { color: var(--accent); opacity: 0.75; }
.ttbar__filtre { display: flex; align-items: center; gap: var(--rg-espace-1); flex-wrap: wrap; }
.ttbar__lab {
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
text-transform: uppercase;
letter-spacing: var(--rg-label-m-espacement);
color: var(--text-faint);
}
.ttmet {
padding: var(--rg-espace-1) var(--rg-espace-3);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--rg-rayon-0);
background: transparent;
color: var(--text-muted);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
cursor: pointer;
}
@media (hover: hover) { .ttmet:hover { color: var(--text); border-color: var(--border-2); } }
.ttmet.is-on { background: var(--surface-2); color: var(--text); border-color: var(--border-2); }
.ttbar__hint {
margin-left: auto;
font-size: var(--fs-3xs);
color: var(--text-faint);
}
/* --- La grille --- */
.ttc {
display: flex;
gap: var(--rg-espace-3);
align-items: flex-start;
padding-bottom: calc(var(--rg-espace-1) / 2);
overflow-x: auto;
}
.ttc__hours {
flex: 0 0 46px;
margin-top: var(--rg-espace-7); /* aligne sur le haut des colonnes */
display: flex;
flex-direction: column;
}
.ttc__hour {
height: var(--tt-pxh);
font-size: var(--rg-taille-label-s);
line-height: var(--rg-interligne-plein);
font-weight: var(--rg-graisse-semi);
color: var(--text-muted);
transform: translateY(-4px);
font-variant-numeric: tabular-nums;
}
.ttc__days {
display: grid;
grid-auto-flow: column;
/* 300 px : en dessous, un jour chargé de leur week-end de Lusail
empile jusqu'à cinq choses de front et les titres tombent à
« Ro… ». La bande défile horizontalement plutôt que d'écraser
le texte. */
grid-auto-columns: minmax(300px, 1fr);
gap: var(--rg-espace-3);
flex: 1 1 auto;
min-width: 0;
}
.ttc--jour .ttc__days { grid-auto-columns: minmax(0, 1fr); }
.ttc__day {
display: flex;
flex-direction: column;
min-width: 0;
border-radius: var(--r-md);
background: var(--plein);
box-shadow: none;
overflow: hidden;
}
.ttc__day.is-today { box-shadow: none; }
/* Un jour de route : la colonne se distingue, et la bande montre l'heure que ca prend. */
.ttc__day--trajet .ttc__dayhead { border-bottom-color: var(--trajet-bord); }
.ttc__route {
position: absolute;
left: 0;
right: 0;
z-index: 0;
background: repeating-linear-gradient(120deg, var(--trajet-fond) 0 var(--rg-espace-3), transparent var(--rg-espace-3) var(--rg-espace-5));
border-top: var(--rg-trait-1) solid var(--trajet-bord);
border-bottom: var(--rg-trait-1) solid var(--trajet-bord);
pointer-events: none;
}
.ttc__route span {
position: sticky;
top: 6px;
display: block;
padding-left: var(--rg-espace-3);
font-family: var(--font-mono);
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--trajet-texte);
}
.ttc__trajet {
display: inline-block;
margin-left: var(--rg-espace-2);
padding: var(--rg-trait-1) var(--rg-espace-2);
border-radius: var(--rg-rayon-0);
background: var(--trajet-fort);
color: var(--brand-navy);
font-style: normal;
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-extra);
letter-spacing: 0;
}
.ttc__dayhead {
display: flex;
align-items: center;
gap: var(--rg-espace-2);
height: 52px;
padding: 0 var(--rg-espace-3);
border-bottom: var(--rg-trait-1) solid var(--border);
}
.ttc__daynum {
padding: calc(var(--rg-espace-1) / 2) var(--rg-espace-2);
border-radius: var(--rg-rayon-0);
background: var(--accent-soft);
color: var(--accent);
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-extra);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
flex: 0 0 auto;
}
.ttc__dayname {
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-gras);
color: var(--text);
cursor: text;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (hover: hover) { .ttc__dayname:hover { text-decoration: underline dotted; } }
.ttc__daydate {
font-size: var(--fs-3xs);
color: var(--text-muted);
white-space: nowrap;
}
.ttc__daycount {
margin-left: auto;
min-width: 20px;
padding: var(--rg-trait-1) var(--rg-espace-2);
border-radius: var(--rg-rayon-0);
background: var(--surface-2);
color: var(--text-muted);
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-gras);
text-align: center;
flex: 0 0 auto;
}
.ttc__dayx {
width: 20px;
height: 20px;
padding: 0;
border: 0;
border-radius: var(--rg-rayon-0);
background: transparent;
color: var(--text-faint);
font-size: var(--rg-taille-texte-m);
line-height: var(--rg-interligne-plein);
cursor: pointer;
opacity: 0;
flex: 0 0 auto;
}
@media (hover: hover) { .ttc__day:hover .ttc__dayx { opacity: 1; } }
@media (hover: hover) { .ttc__dayx:hover { background: var(--accent-soft); color: var(--accent); } }
.ttc__col {
position: relative;
cursor: copy;
background: var(--plein);
}
.ttc__line {
display: block;
height: var(--tt-pxh);
border-bottom: var(--rg-trait-1) solid var(--border);
}
.ttc__line:last-of-type { border-bottom: 0; }
/* La ligne du direct : c'est une page qu'on ouvre PENDANT le
week-end, il faut savoir où on en est. */
.ttc__now {
position: absolute;
left: 0;
right: 0;
height: 0;
border-top: var(--rg-trait-3) solid var(--accent);
z-index: 12;
pointer-events: none;
}
.ttc__now i {
position: absolute;
top: -8px;
left: 31px; /* juste a droite du rail des loupes */
padding: var(--rg-trait-1) var(--rg-espace-2);
box-shadow: none;
border-radius: var(--rg-rayon-0);
background: var(--accent);
color: var(--rg-neutre-blanc);
font-style: normal;
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-gras);
font-variant-numeric: tabular-nums;
}
.ttc__dayfoot {
display: flex;
gap: var(--rg-espace-2);
padding: var(--rg-espace-2) var(--rg-espace-3);
border-top: var(--rg-trait-1) solid var(--border);
}
.ttc__add {
padding: var(--rg-espace-1) var(--rg-espace-3);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--rg-rayon-0);
background: transparent;
color: var(--text-soft);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
cursor: pointer;
}
@media (hover: hover) { .ttc__add:hover { border-color: var(--border-2); color: var(--text); } }
/* =========================================================
UN ÉVÉNEMENT
---------------------------------------------------------
Teinte pâle, encre foncée, filet coloré à gauche : la même
écriture que l'emploi du temps et que le planning. Les aplats
saturés d'avant étaient les couleurs les plus criardes de tout
l'intranet, et la couleur y répétait ce que le titre disait
déjà.
========================================================= */
.ttev {
position: absolute;
display: flex;
flex-direction: column;
gap: var(--rg-trait-1);
padding: var(--rg-espace-1) var(--rg-espace-2);
border-radius: var(--r-sm);
border-left: var(--rg-trait-4) solid var(--c);
background: color-mix(in srgb, var(--c) 17%, var(--plein-3));
color: var(--text);
overflow: hidden;
cursor: grab;
touch-action: none;
z-index: 2;
transition: box-shadow var(--rg-duree) ease, opacity var(--rg-duree) ease;
}
@media (hover: hover) { .ttev:hover { box-shadow: none; z-index: 4; } }
.ttev.is-dragging, .ttev.is-sizing {
cursor: grabbing;
z-index: 9;
box-shadow: none;
}
/* Ce qui est en cours se voit de loin : c'est la seule chose
qu'on cherche quand on ouvre la page en pleine journée. */
.ttev.is-encours {
box-shadow: none;
background: color-mix(in srgb, var(--c) 30%, var(--plein-3));
}
/* Le filtre estompe au lieu de cacher : savoir qu'il se passe
autre chose au même moment fait partie de l'information. */
.ttev.is-estompe { opacity: 0.28; }
@media (hover: hover) { .ttev.is-estompe:hover { opacity: 0.9; } }
.ttev__h {
display: flex;
align-items: baseline;
gap: var(--rg-espace-1);
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-gras);
color: var(--c);
font-variant-numeric: tabular-nums;
flex: 0 0 auto;
}
.ttev__h em {
margin-left: auto;
font-style: normal;
font-weight: var(--rg-graisse-moyen);
color: var(--text-muted);
}
.ttev__h s { color: var(--text-faint); font-weight: var(--rg-graisse-moyen); }
/* Le retard porte son signe et sa couleur : en retard on est
dans le rouge de la marque, en avance dans le vert. */
.ttev__retard {
font-style: normal;
padding: 0 var(--rg-espace-1);
border-radius: var(--rg-rayon-0);
background: var(--accent);
color: var(--rg-neutre-blanc);
font-size: var(--rg-taille-label-s);
}
.ttev.is-avance .ttev__retard { background: var(--edt-banc, var(--rg-metier-vert-fonce)); }
.ttev__t {
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-semi);
line-height: var(--rg-interligne-court);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 0 0 auto;
}
.ttev__jobs { display: flex; flex-wrap: wrap; gap: var(--rg-espace-1); margin-top: calc(var(--rg-espace-1) / 2); overflow: hidden; }
.ttev__job {
padding: 0 var(--rg-espace-2);
border-radius: var(--rg-rayon-0);
background: var(--surface);
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-semi);
color: var(--text-soft);
white-space: nowrap;
}
.ttev__c {
font-size: var(--rg-taille-label-s);
font-style: italic;
color: var(--text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Un bloc court n'a pas la place de tout dire. On ne compresse
pas : on choisit ce qui reste, le reste va dans l'infobulle. */
.ttev.is-sansc .ttev__c { display: none; }
/* Un bloc moyen garde son heure et son titre, et rien d'autre.
On resserre aussi l'interligne : à 36 px de haut, deux lignes ne
tiennent que si elles cessent de respirer. */
.ttev.is-moyen {
padding: calc(var(--rg-espace-1) / 2) var(--rg-espace-2);
gap: 0;
}
.ttev.is-moyen .ttev__jobs,
.ttev.is-moyen .ttev__c { display: none; }
.ttev.is-moyen .ttev__h { font-size: var(--rg-taille-label-s); line-height: var(--rg-interligne-h2); }
.ttev.is-moyen .ttev__t { font-size: var(--rg-taille-label-s); line-height: var(--rg-interligne-h2); }
.ttev.is-court {
flex-direction: row;
align-items: center;
gap: var(--rg-espace-2);
padding: var(--rg-trait-1) var(--rg-espace-2);
}
.ttev.is-court .ttev__jobs,
.ttev.is-court .ttev__c,
.ttev.is-court .ttev__h em,
.ttev.is-court .ttev__h s { display: none; }
.ttev.is-court .ttev__t { font-size: var(--rg-taille-label-s); }
.ttev__act {
position: absolute;
top: 2px;
right: 2px;
display: flex;
gap: calc(var(--rg-espace-1) / 2);
opacity: 0;
transition: opacity var(--rg-duree) ease;
}
.ttev:focus-within .ttev__act { opacity: 1; }
@media (hover: hover) { .ttev:hover .ttev__act { opacity: 1; } }
.ttev:focus-within .ttev__h em { visibility: hidden; }
@media (hover: hover) { .ttev:hover .ttev__h em { visibility: hidden; } }
@media (hover: none) { .ttev__act { opacity: 1; } }
.ttev__act button {
width: 18px;
height: 18px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: var(--rg-rayon-0);
background: var(--text);
color: var(--bg, var(--rg-neutre-blanc));
font-size: var(--rg-taille-texte-s);
line-height: var(--rg-interligne-plein);
cursor: pointer;
box-shadow: none;
}
.ttev__act button svg { width: 11px; height: 11px; }
@media (hover: hover) { .ttev__act button:hover { background: var(--accent); color: var(--rg-neutre-blanc); } }
.ttev__grip {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 6px;
cursor: ns-resize;
}
.ttev__grip::after {
content: "";
position: absolute;
left: 50%;
bottom: 2px;
width: 18px;
height: 2px;
border-radius: var(--rg-rayon-0);
transform: translateX(-50%);
background: var(--c);
opacity: 0;
transition: opacity var(--rg-duree) ease;
}
@media (hover: hover) { .ttev:hover .ttev__grip::after { opacity: 0.6; } }
@media (max-width: 900px) {
.ttbar__hint { display: none; }
.ttc__days { grid-auto-columns: minmax(210px, 1fr); }
}
/* =========================================================
LA VUE LISTE
---------------------------------------------------------
Deux groupes, ce qui vient, ce qui est passé, parce que la
seule question en arrivant ici est « lequel est le prochain ».
Une grille de cartes toutes pareilles ne répondait pas.
========================================================= */
.tt-groupe {
display: flex;
align-items: center;
gap: var(--rg-espace-2);
margin: var(--gap-lg) 0 var(--gap);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
text-transform: uppercase;
letter-spacing: var(--rg-label-m-espacement);
color: var(--text-muted);
}
.tt-groupe span {
min-width: 18px;
padding: var(--rg-trait-1) var(--rg-espace-2);
border-radius: var(--rg-rayon-0);
background: var(--surface-2);
color: var(--text-soft);
font-size: var(--rg-taille-label-s);
text-align: center;
}
.tt-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: var(--gap);
}
.ttcard {
position: relative;
border-radius: var(--r-md);
background: var(--surface);
box-shadow: none;
overflow: hidden;
transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
@media (hover: hover) { .ttcard:hover { box-shadow: none; } }
.ttcard.is-encours { box-shadow: none; }
/* Un week-end passé s'efface sans disparaître : on y revient pour
relire un déroulé, mais il ne doit pas concurrencer le prochain. */
.ttcard.is-passe { opacity: 0.76; }
@media (hover: hover) { .ttcard.is-passe:hover { opacity: 1; } }
.ttcard__link {
display: flex;
flex-direction: column;
gap: var(--rg-espace-1);
padding: var(--gap);
text-decoration: none;
color: inherit;
}
.ttcard__cover {
display: block;
height: 84px;
margin: calc(var(--gap) * -1) calc(var(--gap) * -1) var(--rg-espace-3);
background-size: cover;
background-position: center;
}
.ttcard__top { display: flex; align-items: center; gap: var(--rg-espace-2); margin-bottom: var(--rg-espace-1); }
.ttcard__cat {
padding: calc(var(--rg-espace-1) / 2) var(--rg-espace-2);
border-radius: var(--rg-rayon-0);
background: var(--surface-2);
color: var(--text-soft);
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-extra);
letter-spacing: var(--rg-label-m-espacement);
}
.ttcard__next, .ttcard__live {
padding: calc(var(--rg-espace-1) / 2) var(--rg-espace-2);
border-radius: var(--rg-rayon-0);
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-gras);
letter-spacing: 0;
text-transform: uppercase;
}
.ttcard__next { background: var(--surface-2); color: var(--text-muted); }
.ttcard__live { background: var(--accent); color: var(--rg-neutre-blanc); }
.ttcard__name {
margin: 0;
font-size: var(--fs-md);
font-weight: var(--rg-graisse-gras);
line-height: var(--rg-interligne-court);
color: var(--text);
}
.ttcard__place { margin: 0; font-size: var(--fs-xs); color: var(--text-soft); }
.ttcard__dates {
margin: 0;
font-size: var(--fs-3xs);
color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
.ttcard__foot {
display: flex;
align-items: center;
gap: var(--rg-espace-2);
margin-top: var(--rg-espace-3);
padding-top: var(--rg-espace-2);
border-top: var(--rg-trait-1) solid var(--border);
font-size: var(--fs-3xs);
color: var(--text-muted);
}
.ttcard__foot b { color: var(--text); font-weight: var(--rg-graisse-gras); }
.ttcard__dot { width: 3px; height: 3px; border-radius: var(--rg-rayon-0); background: var(--border-2); }
.ttcard__act {
position: absolute;
top: 8px;
right: 8px;
display: flex;
gap: var(--rg-espace-1);
opacity: 0;
transition: opacity var(--t-base) var(--ease);
}
@media (hover: hover) { .ttcard:hover .ttcard__act { opacity: 1; } }
.ttcard__act button {
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: var(--rg-rayon-0);
background: var(--surface);
color: var(--text-muted);
cursor: pointer;
box-shadow: none;
}
.ttcard__act button svg { width: 14px; height: 14px; }
@media (hover: hover) { .ttcard__act button:hover { color: var(--accent); } }
@media (hover: hover) { .ttcard__act button:last-child:hover { color: var(--danger, var(--rg-rose-6)); } }
/* =========================================================
LES DEUX MODALES DU TIMETABLE
---------------------------------------------------------
Refaites le 2026-09-03, sur la grammaire de la fiche de MA
SEMAINE : des blocs numérotés qui suivent la question qu'on se
pose, et rien de visible qui ne serve pas encore.
Celle de l'événement faisait 1060 px de haut, elle débordait
de l'écran, parce qu'elle empilait trois façons de choisir la
même chose et gardait une zone « Task » vide occupant un tiers
de la fenêtre pour dire « choisissez une catégorie au-dessus ».
========================================================= */
.ttf, .evf { display: flex; flex-direction: column; gap: var(--gap-md); }
.ttf__bloc, .evf__bloc {
display: flex;
flex-direction: column;
gap: var(--rg-espace-3);
padding-top: var(--gap);
border-top: var(--rg-trait-1) solid var(--border);
}
.ttf__bloc:first-child, .evf__bloc:first-child { padding-top: 0; border-top: 0; }
/* Une seule etape a l'ecran : celle qu'on voit ouvre la page. */
#evForm .evf__bloc[data-etape]:not([hidden]) { padding-top: 0; border-top: 0; }
#evForm .evf__bloc[data-etape]:not([hidden]) ~ .evf__bloc[data-etape]:not([hidden]) {
padding-top: var(--gap);
border-top: var(--rg-trait-1) solid var(--border);
}
.ttf__titre, .evf__titre {
display: flex;
align-items: baseline;
gap: var(--rg-espace-3);
margin: 0;
font-family: var(--font-display); font-style: var(--rg-titre-style);
font-size: var(--t-section-s);
font-weight: var(--t-section-w);
font-stretch: var(--titre-largeur);
text-transform: uppercase;
letter-spacing: 0;
color: var(--text);
}
.ttf__titre i, .evf__titre i {
font-style: normal;
font-size: var(--fs-md);
color: var(--accent);
flex: 0 0 auto;
}
.ttf__titre em, .evf__titre em {
font-family: var(--font-base);
font-size: var(--x-second-s);
font-weight: var(--x-second-w);
font-style: normal;
text-transform: none;
letter-spacing: 0;
color: var(--text-faint);
margin-left: calc(var(--rg-espace-1) / 2);
}
.ttf__recap, .evf__recap {
margin: 0;
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-semi);
color: var(--text-soft);
font-variant-numeric: tabular-nums;
}
.ttf__aide {
font-size: var(--fs-3xs);
color: var(--text-faint);
}
.evf__vide {
margin: calc(var(--rg-espace-1) / 2) 0;
font-size: var(--fs-3xs);
color: var(--text-faint);
}
.evf__lab {
display: block;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
color: var(--text-muted);
}
/* --- Les catégories de championnat : des pastilles, plus des
cartes. Neuf cartes à logo occupaient la moitié de la
fenêtre pour un choix qui tient sur une ligne. --- */
.ttf__cats { display: flex; flex-wrap: wrap; gap: var(--rg-espace-3); }
/* Les championnats ranges sous leur discipline. */
.ttf__disciplines { display: flex; flex-direction: column; gap: var(--rg-espace-5); }
.ttf__disc { display: flex; flex-direction: column; gap: var(--rg-espace-3); }
.ttf__disc-t {
margin: 0;
padding-bottom: calc(var(--rg-espace-1) / 2);
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--text-muted);
}
.ttf__cat {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-3);
padding: var(--rg-espace-3) var(--rg-espace-5) var(--rg-espace-3) var(--rg-espace-4);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--rg-rayon-0);
background: transparent;
color: var(--text-soft);
font-size: var(--fs-md);
font-weight: var(--rg-graisse-semi);
cursor: pointer;
transition: border-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
/* Les logos sont des signatures tres larges : on les cale sur une hauteur
commune et on laisse la largeur suivre, sans plafond qui les rabote. */
.ttf__cat img { height: 24px; width: auto; max-width: 170px; object-fit: contain; }
.ttf__cat b {
display: inline-flex;
align-items: center;
justify-content: center;
height: 20px;
padding: 0 var(--rg-espace-2);
border: var(--rg-trait-1) solid var(--border-2);
border-radius: var(--rg-rayon-0);
font-family: var(--font-mono);
font-size: var(--rg-taille-label-s);
font-weight: var(--d-code-w);
letter-spacing: var(--rg-label-m-espacement);
color: var(--text-muted);
}
@media (hover: hover) { .ttf__cat:hover { border-color: var(--border-2); color: var(--text); } }
.ttf__cat.is-on {
border-color: var(--accent);
background: var(--accent-soft);
color: var(--accent);
}
.ttf__cat.is-on b { background: var(--accent); color: var(--rg-neutre-blanc); }
.ttf__quand { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--gap-sm); }
/* Le trajet : aucun, une demi-journee, une journee. */
.ttf__trajet { display: flex; gap: var(--rg-espace-2); flex-wrap: wrap; }
.ttf__tj {
padding: var(--rg-espace-2) var(--rg-espace-3);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--rg-rayon-0);
background: transparent;
color: var(--text-muted);
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-semi);
cursor: pointer;
transition: border-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
@media (hover: hover) { .ttf__tj:hover { border-color: var(--border-2); color: var(--text); } }
.ttf__tj.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
/* Un jour de trajet se distingue des jours sur place. */
.day-inputs__label--trajet strong { color: var(--accent); }
/* La durée en boutons : un week-end de course fait deux ou trois
jours dans la quasi-totalité des cas. Deux champs date
indépendants laissaient saisir une fin avant le début. */
.ttf__duree { display: flex; align-items: center; gap: var(--rg-espace-2); }
.ttf__nbj { width: 84px; text-align: center; }
.ttf__pas {
width: 38px;
height: 44px;
flex-shrink: 0;
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--r-sm);
background: transparent;
color: var(--text-soft);
font-size: var(--fs-md);
line-height: var(--rg-interligne-plein);
cursor: pointer;
transition: border-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
@media (hover: hover) { .ttf__pas:hover { border-color: var(--border-2); color: var(--text); } }
/* --- La fiche d'un événement --- */
.evf__cherche { position: relative; }
.evf__cherche svg {
position: absolute;
left: 11px;
top: 50%;
width: 16px;
height: 16px;
transform: translateY(-50%);
color: var(--text-faint);
pointer-events: none;
}
.evf__cherche .form-input { padding-left: var(--rg-espace-6); padding-right: var(--rg-espace-6); }
.evf__clear {
position: absolute;
right: 8px;
top: 50%;
width: 20px;
height: 20px;
transform: translateY(-50%);
border: 0;
border-radius: var(--rg-rayon-0);
background: transparent;
color: var(--text-muted);
font-size: var(--rg-taille-texte-m);
line-height: var(--rg-interligne-plein);
cursor: pointer;
}
@media (hover: hover) { .evf__clear:hover { background: var(--accent-soft); color: var(--accent); } }
.evf__cats { display: flex; flex-wrap: wrap; gap: var(--rg-espace-1); }
.evf__cats[hidden] { display: none; }
.evf__cat {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
padding: var(--rg-espace-1) var(--rg-espace-3);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--rg-rayon-0);
background: transparent;
color: var(--text-soft);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
cursor: pointer;
}
.evf__cat i { width: 9px; height: 9px; border-radius: var(--rg-rayon-0); background: var(--c); flex: 0 0 auto; }
@media (hover: hover) { .evf__cat:hover { border-color: var(--border-2); color: var(--text); } }
.evf__cat.is-on {
border-color: var(--c);
color: var(--text);
background: color-mix(in srgb, var(--c) 14%, transparent);
}
.evf__tasks {
display: flex;
flex-direction: column;
gap: calc(var(--rg-espace-1) / 2);
max-height: 208px;
overflow-y: auto;
}
.evf__task {
display: flex;
align-items: center;
gap: var(--rg-espace-2);
width: 100%;
padding: var(--rg-espace-2) var(--rg-espace-2);
border: 0;
border-radius: var(--r-sm);
background: transparent;
text-align: left;
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-moyen);
color: var(--text);
cursor: pointer;
}
.evf__task i { width: 8px; height: 8px; border-radius: var(--rg-rayon-0); background: var(--c); flex: 0 0 auto; }
.evf__task em {
margin-left: auto;
font-style: normal;
font-size: var(--fs-3xs);
color: var(--text-faint);
}
@media (hover: hover) { .evf__task:hover { background: var(--surface-2); } }
/* Une fois la tâche choisie, elle REMPLACE la liste. C'est le
point qui faisait déborder la fenêtre : tout restait affiché. */
.evf__tasks--choisi { max-height: none; overflow: visible; }
.evf__choisi {
display: flex;
align-items: center;
gap: var(--rg-espace-2);
padding: var(--rg-espace-2) var(--rg-espace-3);
border-radius: var(--r-sm);
border-left: var(--rg-trait-4) solid var(--c);
background: color-mix(in srgb, var(--c) 13%, transparent);
}
.evf__choisi i { width: 9px; height: 9px; border-radius: var(--rg-rayon-0); background: var(--c); flex: 0 0 auto; }
.evf__choisi b { font-size: var(--fs-sm); font-weight: var(--rg-graisse-semi); color: var(--text); }
.evf__choisi em {
font-style: normal;
font-size: var(--fs-3xs);
color: var(--text-muted);
}
.evf__choisi button {
margin-left: auto;
border: 0;
background: transparent;
color: var(--accent);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
cursor: pointer;
}
@media (hover: hover) { .evf__choisi button:hover { text-decoration: underline; } }
.evf__quand { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-sm); }
/* Les rôles, aux couleurs de discipline de l'emploi du temps :
sept cartes à icône prenaient 250 px sans rien dire de plus
que leur nom. */
.evf__roles { display: flex; flex-wrap: wrap; gap: var(--rg-espace-1); }
.evf__role {
padding: var(--rg-espace-1) var(--rg-espace-3);
border: var(--rg-trait-1) solid var(--border);
border-left-width: var(--rg-trait-4);
border-left-color: var(--mc, var(--border));
border-radius: var(--rg-rayon-0);
background: transparent;
color: var(--text-soft);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
cursor: pointer;
transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
@media (hover: hover) { .evf__role:hover { border-color: var(--border-2); border-left-color: var(--mc, var(--border-2)); color: var(--text); } }
/* Choisi : la pastille se remplit. Gris contre couleur pleine, la
difference se lit d'un coup d'oeil. */
.evf__role.is-on {
background: var(--mc, var(--accent));
border-color: var(--mc, var(--accent));
color: var(--rg-neutre-blanc);
}
.evf__tm { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rg-espace-1); margin-top: var(--rg-espace-1); }
.evf__tm .evf__lab { flex: 1 0 100%; }
.evf__tmc {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
padding: var(--rg-espace-1) var(--rg-espace-3) var(--rg-espace-1) var(--rg-espace-1);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--rg-rayon-0);
background: transparent;
color: var(--text-soft);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
cursor: pointer;
}
.evf__tmc .crew-avatar { width: 22px; height: 22px; font-size: var(--rg-taille-label-s); }
@media (hover: hover) { .evf__tmc:hover { border-color: var(--border-2); color: var(--text); } }
.evf__tmc.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.evf__bloc--note .form-label em {
font-style: normal;
font-weight: var(--rg-graisse-regulier);
text-transform: none;
letter-spacing: 0;
color: var(--text-faint);
}
@media (max-width: 640px) {
.ttf__quand, .evf__quand { grid-template-columns: 1fr; }
}
/* Le groupe de boutons de droite d'un pied de modale. Il était
écrit en style inline dans chaque fichier ; quand le bouton
« Supprimer » est masqué, `space-between` n'a plus qu'un enfant
et le colle à gauche, d'où le `margin-left: auto`. */
.modal__foot-right {
display: flex;
gap: var(--rg-espace-3);
margin-left: auto;
}
/* =========================================================
TIMETABLE, LA BARRE DE COMMANDE ET LE TIROIR
---------------------------------------------------------
Refondus le 2026-09-03. Lorette, sur un 16 pouces : « tout
est assez contraint ; tout ce qui n'est pas le calendrier
pourrait être rangé dans un tiroir ».
Le compte lui donnait raison : hero + barre d'outils =
environ 260 px avant que le calendrier ne commence, pour une
page dont le calendrier est le seul contenu. Il reste 52 px,
et ils ne défilent pas.
========================================================= */
.ttop {
position: sticky;
/* La topbar de l'application est elle aussi collante et haute
de 72 px : sans ce décalage, la barre du timetable se glisse
dessous et disparaît. */
top: var(--topbar-h, 72px);
z-index: 30;
display: flex;
align-items: center;
gap: var(--gap);
height: 44px;
margin: calc(var(--gap-lg) * -1) calc(var(--gap-lg) * -1) var(--gap);
padding: 0 var(--gap-lg);
background: var(--bg);
background-image: none;
border-bottom: var(--rg-trait-1) solid var(--border);
}
.ttop__id { min-width: 0; flex: 0 1 auto; }
.ttop__id span {
display: block;
font-size: var(--fs-3xs);
color: var(--text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* La navigation de jour reste dehors : c'est du calendrier, pas
un réglage, et c'est le geste le plus fréquent. */
.ttop__nav {
display: flex;
align-items: center;
gap: var(--rg-espace-1);
margin: 0 auto;
padding: var(--rg-espace-1);
border-radius: var(--rg-rayon-0);
background: var(--surface-2);
box-shadow: none;
}
.ttop__nav button {
width: 26px;
height: 26px;
border: 0;
border-radius: var(--rg-rayon-0);
background: transparent;
color: var(--text-muted);
font-size: var(--rg-taille-texte-l);
line-height: var(--rg-interligne-plein);
cursor: pointer;
flex: 0 0 auto;
}
@media (hover: hover) { .ttop__nav button:hover:not(:disabled) { background: var(--surface); color: var(--text); } }
.ttop__nav button:disabled { opacity: 0.3; cursor: default; }
.ttop__nav span {
display: flex;
align-items: baseline;
gap: var(--rg-espace-2);
padding: 0 var(--rg-espace-2);
font-size: var(--fs-xs);
color: var(--text);
white-space: nowrap;
}
.ttop__nav b {
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-extra);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--accent);
}
.ttop__nav em { font-style: normal; font-size: var(--fs-3xs); color: var(--text-faint); }
.ttop__nav--tout { background: transparent; box-shadow: none; }
.ttop__nav--tout span { color: var(--text-muted); font-size: var(--fs-3xs); }
.ttop__act { display: flex; align-items: center; gap: var(--rg-espace-2); margin-left: auto; flex: 0 0 auto; }
.ttop__b {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
height: 32px;
padding: 0 var(--rg-espace-3);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--rg-rayon-0);
background: transparent;
color: var(--text-soft);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
cursor: pointer;
white-space: nowrap;
}
.ttop__b svg { width: 15px; height: 15px; }
@media (hover: hover) { .ttop__b:hover { border-color: var(--border-2); color: var(--text); } }
.ttop__b--outils { padding: 0 var(--rg-espace-3); }
/* La pastille dit qu'un filtre est actif : sans elle, un
calendrier à moitié estompé n'a pas d'explication visible. */
.ttop__pastille {
position: absolute;
top: 5px;
right: 6px;
width: 7px;
height: 7px;
border-radius: var(--rg-rayon-0);
background: var(--accent);
box-shadow: none;
}
/* --- Le tiroir --- */
.ttdr { position: fixed; inset: 0; z-index: 90; }
.ttdr[hidden] { display: none; }
.ttdr__voile {
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--rg-marine-5) 32%, transparent);
animation: ttdrFade var(--rg-duree) ease;
}
@keyframes ttdrFade { from { opacity: 0; } to { opacity: 1; } }
.ttdr__p {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: min(340px, 92vw);
display: flex;
flex-direction: column;
/* --surface est une transparence en thème sombre (blanc à 4 %).
Sur un panneau flottant elle laisse voir le calendrier au
travers : on empile donc le fond de l'application dessous. */
background: var(--bg);
background-image: none;
box-shadow: none;
animation: ttdrSlide var(--rg-duree) var(--ease, ease);
}
@keyframes ttdrSlide { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.ttdr__head {
display: flex;
align-items: center;
justify-content: space-between;
height: 52px;
padding: 0 var(--gap);
border-bottom: var(--rg-trait-1) solid var(--border);
flex: 0 0 auto;
}
.ttdr__head h3 { margin: 0; font-size: var(--fs-sm); font-weight: var(--rg-graisse-gras); color: var(--text); }
.ttdr__head button {
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: var(--rg-rayon-0);
background: transparent;
color: var(--text-muted);
cursor: pointer;
}
.ttdr__head button svg { width: 16px; height: 16px; }
@media (hover: hover) { .ttdr__head button:hover { background: var(--surface-2); color: var(--text); } }
.ttdr__corps {
flex: 1 1 auto;
overflow-y: auto;
padding: var(--gap);
display: flex;
flex-direction: column;
gap: var(--gap-md);
}
.ttdr__s { display: flex; flex-direction: column; gap: var(--rg-espace-2); }
.ttdr__s--fin { margin-top: auto; padding-top: var(--gap); border-top: var(--rg-trait-1) solid var(--border); }
.ttdr__t {
display: flex;
align-items: baseline;
gap: var(--rg-espace-2);
margin: 0;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
text-transform: uppercase;
letter-spacing: var(--rg-label-m-espacement);
color: var(--text-muted);
}
.ttdr__t em {
font-style: normal;
font-weight: var(--rg-graisse-moyen);
text-transform: none;
letter-spacing: 0;
color: var(--text-faint);
}
.ttdr__jours { display: flex; flex-direction: column; gap: var(--rg-espace-1); }
.ttdr__j {
display: flex;
align-items: baseline;
gap: var(--rg-espace-2);
width: 100%;
padding: var(--rg-espace-2) var(--rg-espace-3);
border: var(--rg-trait-1) solid transparent;
border-radius: var(--r-sm);
background: var(--surface-2);
text-align: left;
cursor: pointer;
}
.ttdr__j b {
flex: 1 1 auto;
min-width: 0;
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-semi);
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ttdr__j em { font-style: normal; font-size: var(--fs-3xs); color: var(--text-muted); }
.ttdr__j i {
font-style: normal;
min-width: 20px;
padding: var(--rg-trait-1) var(--rg-espace-2);
border-radius: var(--rg-rayon-0);
background: var(--surface);
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-gras);
color: var(--text-muted);
text-align: center;
}
@media (hover: hover) { .ttdr__j:hover { border-color: var(--border-2); } }
.ttdr__j.is-today b::after {
content: "today";
margin-left: var(--rg-espace-2);
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--accent);
}
.ttdr__j.is-on { border-color: var(--accent); background: var(--accent-soft); }
.ttdr__j.is-on b { color: var(--accent); }
.ttdr__met { display: flex; flex-wrap: wrap; gap: var(--rg-espace-1); }
.ttdr__l {
width: 100%;
padding: var(--rg-espace-2) var(--rg-espace-3);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--r-sm);
background: transparent;
text-align: left;
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-semi);
color: var(--text-soft);
cursor: pointer;
}
@media (hover: hover) { .ttdr__l:hover { border-color: var(--border-2); color: var(--text); } }
.ttdr__l--danger { color: var(--danger, var(--rg-rose-6)); }
/* Le tiroir empile ses segments à l'étroit. */
.ttdr__p .ttbar__seg { display: flex; }
.ttdr__p .ttseg { flex: 1 1 0; text-align: center; }
@media (max-width: 900px) {
.ttop__id span { display: none; }
.ttop__b span, .ttop__b:not(.ttop__b--outils) { font-size: 0; }
.ttop__b:not(.ttop__b--outils) { padding: 0 var(--rg-espace-3); gap: 0; }
.ttop__b svg { width: 16px; height: 16px; }
}
/* Le Timetable n'a qu'un contenu, et il est large : on lui rend
les marges que la lecture d'un texte justifie ailleurs. */
body[data-page="timetable"] .page-body {
max-width: none;
padding-top: var(--gap-lg);
}
/* Le nom du jour, renommable depuis la barre : c'est le seul
endroit qui le porte maintenant que l'en-tête de colonne a
disparu en vue « un jour ». */
.ttop__nav u {
text-decoration: none;
cursor: text;
font-weight: var(--rg-graisse-semi);
}
@media (hover: hover) { .ttop__nav u:hover { text-decoration: underline dotted; } }
.ttdr__jx {
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--rg-rayon-0);
color: var(--text-faint);
font-size: var(--rg-taille-texte-s);
line-height: var(--rg-interligne-plein);
opacity: 0;
flex: 0 0 auto;
}
@media (hover: hover) { .ttdr__j:hover .ttdr__jx { opacity: 1; } }
@media (hover: hover) { .ttdr__jx:hover { background: var(--accent-soft); color: var(--accent); } }
/* =========================================================
LA LOUPE SUR LES CHEVAUCHEMENTS
---------------------------------------------------------
Demandée le 2026-09-03. Quand cinq choses se chevauchent dans
250 px de colonne, la grille ne peut plus montrer ni les
horaires exacts ni les noms entiers. La loupe les déplie.
Au bord GAUCHE de la grappe : les boutons d'un événement
vivent en haut à droite, deux commandes au même coin se
disputeraient le clic.
========================================================= */
/* LE RAIL DES LOUPES
---------------------------------------------------------
Posées au milieu des blocs, elles se confondaient avec eux et
on ne les voyait pas. Elles ont donc une bande à elles, à
gauche des événements, dans le prolongement de la colonne des
horaires, là où l'œil va déjà chercher l'heure. */
.ttc__rail {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 26px;
border-right: var(--rg-trait-1) solid var(--border);
background: var(--plein-2);
pointer-events: none;
z-index: 6;
}
/* Les événements vivent à droite du rail. */
.ttc__zone {
position: absolute;
top: 0;
bottom: 0;
left: 26px;
right: 0;
}
.ttloupe {
position: absolute;
left: 3px;
z-index: 7;
pointer-events: auto;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0;
width: 20px;
height: 26px;
padding: 0;
border: 0;
border-radius: var(--r-sm);
background: var(--plein-3);
color: var(--accent);
cursor: zoom-in;
box-shadow: none;
transition: color var(--rg-duree) ease, box-shadow var(--rg-duree) ease;
}
.ttloupe svg { width: 12px; height: 12px; }
.ttloupe b { font-size: var(--rg-taille-label-s); font-weight: var(--rg-graisse-extra); line-height: var(--rg-interligne-plein); }
@media (hover: hover) { .ttloupe:hover {
color: var(--accent);
box-shadow: none;
} }
.ttzoom {
position: fixed;
z-index: 95;
min-width: 268px;
max-width: 380px;
max-height: 64vh;
overflow-y: auto;
padding: var(--rg-espace-2);
border-radius: var(--r-md);
background: var(--bg);
background-image: none;
border: var(--rg-trait-1) solid var(--border-2);
box-shadow: none;
}
.ttzoom__t {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--rg-espace-3);
margin: calc(var(--rg-espace-1) / 2) var(--rg-espace-2) var(--rg-espace-2);
font-size: var(--fs-3xs);
color: var(--text-muted);
}
.ttzoom__t b {
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-gras);
color: var(--text);
font-variant-numeric: tabular-nums;
}
.ttzoom__t em { font-style: normal; }
.ttzoom__l {
display: grid;
grid-template-columns: auto 1fr;
gap: calc(var(--rg-espace-1) / 2) var(--rg-espace-3);
width: 100%;
padding: var(--rg-espace-2) var(--rg-espace-2);
border: 0;
border-left: var(--rg-trait-4) solid var(--c);
border-radius: var(--r-sm);
background: transparent;
text-align: left;
cursor: pointer;
}
@media (hover: hover) { .ttzoom__l:hover { background: color-mix(in srgb, var(--c) 12%, transparent); } }
.ttzoom__h {
grid-row: 1 / span 2;
align-self: start;
display: flex;
flex-direction: column;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
color: var(--c);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.ttzoom__h em { font-style: normal; font-weight: var(--rg-graisse-moyen); color: var(--text-muted); }
.ttzoom__h i {
font-style: normal;
margin-top: calc(var(--rg-espace-1) / 2);
padding: 0 var(--rg-espace-1);
border-radius: var(--rg-rayon-0);
background: var(--accent);
color: var(--rg-neutre-blanc);
font-size: var(--rg-taille-label-s);
align-self: flex-start;
}
.ttzoom__n {
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-semi);
color: var(--text);
line-height: var(--rg-interligne-court);
}
.ttzoom__n em {
display: block;
font-style: italic;
font-weight: var(--rg-graisse-regulier);
font-size: var(--fs-3xs);
color: var(--text-muted);
}
.ttzoom__j {
grid-column: 2;
font-size: var(--fs-3xs);
color: var(--text-faint);
}
/* =========================================================
CREW, LA BARRE, LES EQUIPES
---------------------------------------------------------
Demande du 2026-09-04 : voir d'abord son espace, pouvoir
chercher dans toute l'entreprise, et se faire ses propres
equipes.
La barre porte les trois : un onglet par vue a gauche, la
recherche a droite. La recherche N'EST PAS un filtre de
l'onglet, elle sort de la vue courante pour interroger tout
le repertoire, et le dit sous la barre.
========================================================= */
.crewbar {
display: flex;
align-items: center;
gap: var(--rg-espace-4);
flex-wrap: wrap;
margin: 0 0 var(--rg-espace-5);
padding-bottom: var(--rg-espace-4);
border-bottom: var(--rg-trait-1) solid var(--border);
}
.crewbar__tabs {
display: flex;
align-items: center;
gap: var(--rg-espace-2);
flex-wrap: wrap;
min-width: 0;
}
.crewbar__tab {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
padding: var(--rg-espace-2) var(--rg-espace-3);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--rg-rayon-0);
background: transparent;
color: var(--text-soft);
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-semi);
cursor: pointer;
transition: border-color var(--t-base) var(--ease), color var(--t-base) var(--ease),
background var(--t-base) var(--ease);
}
.crewbar__tab { white-space: nowrap; }
@media (hover: hover) { .crewbar__tab:hover { border-color: var(--border-2); color: var(--text); } }
.crewbar__tab i {
font-style: normal;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
color: var(--text-faint);
font-variant-numeric: tabular-nums;
}
.crewbar__tab.is-on {
background: var(--rg-texte-principal);
border-color: var(--rg-texte-principal);
color: var(--rg-texte-inverse);
}
.crewbar__tab.is-on i { color: color-mix(in srgb, var(--rg-texte-inverse) 75%, transparent); }
.crewbar__tab.is-on .crewbar__pt { background: var(--rg-texte-inverse); }
/* Les deux vues d'abord, puis un raccourci vers chacune de MES
equipes : la barre garde une hierarchie au lieu d'aligner dix
pastilles equivalentes. */
.crewbar__sep {
width: 1px;
height: 20px;
background: var(--border);
margin: 0 var(--rg-espace-1);
flex-shrink: 0;
}
.crewbar__quick {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
padding: var(--rg-espace-2) var(--rg-espace-3);
border: var(--rg-trait-1) solid transparent;
border-radius: var(--rg-rayon-0);
background: var(--surface-2);
color: var(--text-muted);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
cursor: pointer;
}
.crewbar__quick { white-space: nowrap; }
@media (hover: hover) { .crewbar__quick:hover { color: var(--text); } }
.crewbar__quick.is-on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
/* =========================================================
L'ONGLET EQUIPES, le repertoire
---------------------------------------------------------
« C'est interessant d'avoir un onglet team dans cet onglet
crew, ou chacun peut retrouver les team publiques qui sont
creees. » Deux sections : les siennes, puis celles des autres.
========================================================= */
.eqsec { margin: 0 0 var(--rg-espace-6); }
.eqsec__t {
display: flex;
align-items: baseline;
gap: var(--rg-espace-3);
flex-wrap: wrap;
margin: 0 0 var(--rg-espace-3);
font-size: var(--fs-sm);
font-weight: var(--rg-graisse-gras);
color: var(--text);
}
.eqsec__t span { font-size: var(--fs-3xs); font-weight: var(--rg-graisse-moyen); color: var(--text-muted); }
.eqsec__vide { margin: 0; font-size: var(--fs-xs); color: var(--text-faint); }
.eqgrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: var(--rg-espace-3);
}
.eqcard {
display: flex;
flex-direction: column;
gap: var(--rg-espace-1);
padding: var(--rg-espace-4) var(--rg-espace-4);
border-radius: var(--r-md);
background: var(--surface);
box-shadow: none;
text-align: left;
cursor: pointer;
transition: box-shadow var(--t-base) var(--ease);
}
@media (hover: hover) { .eqcard:hover { box-shadow: none; } }
.eqcard.is-arch { opacity: 0.6; }
.eqcard__k {
display: flex;
align-items: center;
gap: var(--rg-espace-2);
margin: 0;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--text-faint);
}
.eqcard__pub {
padding: var(--rg-trait-1) var(--rg-espace-2);
border-radius: var(--rg-rayon-0);
background: var(--accent-soft);
color: var(--accent);
letter-spacing: 0;
}
.eqcard__n { margin: calc(var(--rg-espace-1) / 2) 0 0; font-size: var(--fs-md); font-weight: var(--rg-graisse-gras); color: var(--text); }
.eqcard__e { margin: 0; font-size: var(--fs-3xs); color: var(--text-muted); }
.eqcard__ppl {
display: flex;
align-items: center;
gap: var(--rg-espace-2);
margin-top: var(--rg-espace-3);
flex-wrap: wrap;
}
.eqcard__ppl .crew-avatar { width: 26px; height: 26px; font-size: var(--rg-taille-label-s); }
.eqcard__plus {
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
color: var(--text-muted);
}
.eqcard__nb {
margin-left: auto;
font-size: var(--fs-3xs);
color: var(--text-faint);
}
.teamhead__back {
display: inline-block;
margin: 0 0 var(--rg-espace-2);
padding: 0;
border: 0;
background: transparent;
color: var(--text-muted);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
cursor: pointer;
}
@media (hover: hover) { .teamhead__back:hover { color: var(--accent); } }
/* =========================================================
INVITER UNE EQUIPE ENTIERE
---------------------------------------------------------
La raison d'etre des equipes : « plutot que les gens un par
un ». Elles passent donc AVANT la recherche nominative, qui
n'est plus que le repli.
========================================================= */
.mwf__eqs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rg-espace-2); }
.mwf__eqs:empty { display: none; }
.mwf__eqs-t {
flex: 1 1 100%;
margin: 0 0 var(--rg-trait-1);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
text-transform: uppercase;
letter-spacing: var(--rg-label-m-espacement);
color: var(--text-faint);
}
.mwf__eq {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
padding: var(--rg-espace-2) var(--rg-espace-3);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--rg-rayon-0);
background: transparent;
color: var(--text-soft);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
cursor: pointer;
}
.mwf__eq i {
font-style: normal;
font-weight: var(--rg-graisse-gras);
color: var(--accent);
}
@media (hover: hover) { .mwf__eq:hover { border-color: var(--accent); color: var(--text); } }
.mwf__eq.is-plein { opacity: 0.45; cursor: default; }
.mwf__eq.is-plein i { color: var(--text-faint); }
@media (hover: hover) { .mwf__eq.is-plein:hover { border-color: var(--border); } }
/* Le point d'une equipe temporaire : elle a une fin, ça se voit. */
.crewbar__pt {
width: 6px;
height: 6px;
border-radius: var(--rg-rayon-0);
background: var(--rg-piste-orange);
flex-shrink: 0;
}
/* LE BOUTON « AJOUTER QUELQU'UN », 2026-09-07. Il ouvre la
barre, avant les filtres : c'est l'action principale de la
page, et elle était jusque-là une carte perdue au-dessus de
l'organigramme. Plein, contrairement à « Nouvelle équipe » qui
reste en pointillés : deux actions de même poids visuel dans
une même barre, on ne sait plus laquelle est la vraie. */
.crewbar__add {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
padding: var(--rg-espace-2) var(--rg-espace-4);
border: var(--rg-trait-1) solid transparent;
border-radius: var(--rg-rayon-0);
background: var(--accent);
color: var(--rg-neutre-blanc);
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-gras);
cursor: pointer;
transition: filter var(--t-fast) var(--ease);
}
.crewbar__add svg { width: 15px; height: 15px; }
@media (hover: hover) { .crewbar__add:hover { filter: brightness(1.08); } }
.crewbar__add:focus-visible { outline: var(--rg-trait-3) solid var(--border-focus); outline-offset: calc(var(--rg-espace-1) / 2); }
.crewbar__new {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
padding: var(--rg-espace-2) var(--rg-espace-3);
border: var(--rg-trait-1) dashed var(--border-2);
border-radius: var(--rg-rayon-0);
background: transparent;
color: var(--text-muted);
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-semi);
cursor: pointer;
}
.crewbar__new svg { width: 14px; height: 14px; }
@media (hover: hover) { .crewbar__new:hover { border-color: var(--accent); color: var(--accent); } }
.crewbar__arch select {
padding: var(--rg-espace-2) var(--rg-espace-3);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--rg-rayon-0);
background: var(--surface);
color: var(--text-muted);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
cursor: pointer;
}
.crewbar__find {
position: relative;
display: flex;
align-items: center;
margin-left: auto;
min-width: 260px;
flex: 0 1 320px;
}
.crewbar__find svg {
position: absolute;
left: 12px;
width: 16px;
height: 16px;
color: var(--text-faint);
pointer-events: none;
}
.crewbar__find .form-input { padding-left: var(--rg-espace-6); padding-right: var(--rg-espace-6); }
.crewbar__find button {
position: absolute;
right: 8px;
width: 20px;
height: 20px;
padding: 0;
border: 0;
border-radius: var(--rg-rayon-0);
background: transparent;
color: var(--text-muted);
font-size: var(--rg-taille-texte-m);
line-height: var(--rg-interligne-plein);
cursor: pointer;
}
@media (hover: hover) { .crewbar__find button:hover { color: var(--accent); } }
.crewbar__note {
flex: 1 1 100%;
margin: 0;
font-size: var(--fs-3xs);
color: var(--text-faint);
}
.crew-vide {
margin: var(--rg-espace-6) 0;
text-align: center;
font-size: var(--fs-sm);
color: var(--text-muted);
}
/* --- L'entete d'une equipe --- */
.teamhead {
display: flex;
align-items: flex-start;
gap: var(--rg-espace-4);
margin: 0 0 var(--rg-espace-5);
padding: var(--rg-espace-4) var(--rg-espace-4);
border-radius: var(--r-md);
background: var(--surface);
box-shadow: none;
}
.teamhead.is-arch { opacity: 0.72; }
.teamhead__kind {
margin: 0;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--text-faint);
}
.teamhead__nom {
margin: var(--rg-espace-1) 0 0;
font-size: var(--fs-lg);
font-weight: var(--rg-graisse-gras);
color: var(--text);
}
.teamhead__ev {
margin: calc(var(--rg-espace-1) / 2) 0 0;
font-size: var(--fs-xs);
color: var(--text-muted);
}
.teamhead__act {
margin-left: auto;
display: flex;
gap: var(--rg-espace-2);
flex-shrink: 0;
}
/* =========================================================
LA FICHE D'UNE EQUIPE
Trois blocs numerotes, comme les autres modales.
========================================================= */
.tmf { display: flex; flex-direction: column; gap: var(--rg-espace-5); }
.tmf__b { display: flex; flex-direction: column; gap: var(--rg-espace-2); }
.tmf__n {
display: flex;
align-items: center;
gap: var(--rg-espace-2);
margin: 0;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-extra);
color: var(--accent);
}
.tmf__n span {
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: 0;
text-transform: uppercase;
color: var(--text);
}
.tmf__kinds { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rg-espace-2); }
.tmf__kind {
display: flex;
flex-direction: column;
gap: var(--rg-espace-1);
padding: var(--rg-espace-3) var(--rg-espace-3);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--r-sm);
background: transparent;
text-align: left;
cursor: pointer;
}
.tmf__kind b { font-size: var(--fs-xs); font-weight: var(--rg-graisse-gras); color: var(--text); }
.tmf__kind i { font-style: normal; font-size: var(--fs-3xs); color: var(--text-muted); }
@media (hover: hover) { .tmf__kind:hover { border-color: var(--border-2); } }
.tmf__kind.is-on { border-color: var(--accent); background: var(--accent-soft); }
.tmf__evs {
display: flex;
flex-direction: column;
gap: var(--rg-espace-1);
max-height: 210px;
overflow-y: auto;
padding: var(--rg-espace-1);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--r-sm);
}
.tmf__evs.is-err { border-color: var(--accent); }
.tmf__ev {
display: flex;
align-items: center;
gap: var(--rg-espace-2);
padding: var(--rg-espace-2) var(--rg-espace-3);
border: 0;
border-radius: var(--r-sm);
background: transparent;
text-align: left;
cursor: pointer;
width: 100%;
}
@media (hover: hover) { .tmf__ev:hover { background: var(--surface-2); } }
.tmf__ev.is-on { background: var(--accent-soft); }
.tmf__ev.is-passe { opacity: 0.5; }
.tmf__ev b { flex: 1 1 auto; min-width: 0; font-size: var(--fs-xs); font-weight: var(--rg-graisse-semi); color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tmf__ev i { font-style: normal; font-size: var(--fs-3xs); color: var(--text-muted); white-space: nowrap; }
.tmf__evsp {
flex-shrink: 0;
padding: calc(var(--rg-espace-1) / 2) var(--rg-espace-2);
border-radius: var(--rg-rayon-0);
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-extra);
letter-spacing: var(--rg-label-m-espacement);
}
.tmf__evsp--gp { background: var(--accent-soft); color: var(--accent); }
.tmf__evsp--inside { background: color-mix(in srgb, var(--rg-marine-0) 16%, transparent); color: var(--rg-marine-0); }
.tmf__find { position: relative; display: flex; align-items: center; }
.tmf__find svg {
position: absolute; left: 12px; width: 16px; height: 16px;
color: var(--text-faint); pointer-events: none;
}
.tmf__find .form-input { padding-left: var(--rg-espace-6); }
.tmf__res {
display: flex;
flex-direction: column;
gap: calc(var(--rg-espace-1) / 2);
padding: var(--rg-espace-1);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--r-sm);
}
.tmf__res-l {
display: flex;
align-items: center;
gap: var(--rg-espace-3);
padding: var(--rg-espace-2) var(--rg-espace-2);
border: 0;
border-radius: var(--r-sm);
background: transparent;
text-align: left;
cursor: pointer;
width: 100%;
}
@media (hover: hover) { .tmf__res-l:hover { background: var(--surface-2); } }
.tmf__res-l span { display: flex; flex-direction: column; gap: var(--rg-trait-1); min-width: 0; }
.tmf__res-l b { font-size: var(--fs-xs); font-weight: var(--rg-graisse-semi); color: var(--text); }
.tmf__res-l em { font-style: normal; font-size: var(--fs-3xs); color: var(--text-muted); }
.tmf__chips { display: flex; flex-wrap: wrap; gap: var(--rg-espace-2); }
.tmf__chip {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
padding: var(--rg-espace-1) var(--rg-espace-2) var(--rg-espace-1) var(--rg-espace-1);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--rg-rayon-0);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
color: var(--text);
}
.tmf__chip button {
width: 18px; height: 18px; padding: 0;
border: 0; border-radius: var(--rg-rayon-0);
background: transparent; color: var(--text-faint);
font-size: var(--rg-taille-texte-s); line-height: var(--rg-interligne-plein); cursor: pointer;
}
@media (hover: hover) { .tmf__chip button:hover { color: var(--accent); } }
.tmf__vide { margin: 0; font-size: var(--fs-3xs); color: var(--text-faint); }
@media (max-width: 720px) {
.crewbar__find { margin-left: 0; flex: 1 1 100%; min-width: 0; }
.tmf__kinds { grid-template-columns: 1fr; }
}
/* =========================================================
PLACES, realignee sur la DA du 2026-09-04
---------------------------------------------------------
Meme grammaire que Crew et la Timetable : un hero mince,
une barre de commande (`.crewbar`, reutilisee telle quelle),
des cartes qui disent quelque chose, une modale en blocs
numerotes.
========================================================= */
/* Le hero perd sa moitie basse : la barre prend le relais. */
.page-hero--mince { margin-bottom: var(--rg-espace-4); }
.page-hero--mince .page-hero__sub { max-width: 640px; }
/* LE BANDEAU DE VENUE, pose sur la photo
---------------------------------------------------------
« Dans 8 jours · 12 - 14 sept ». C'est la premiere chose
qu'on lit sur une carte de circuit : on ne consulte pas
Places par curiosite geographique, on y va pour savoir
quand on part. */
.place-preview__quand {
position: absolute;
left: 12px;
bottom: 12px;
z-index: 2;
padding: var(--rg-espace-1) var(--rg-espace-3);
border-radius: var(--rg-rayon-0);
background: var(--plein-3);
color: var(--text-soft);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: 0;
white-space: nowrap;
box-shadow: none;
}
.place-preview__quand.is-proche { background: var(--accent); color: var(--rg-neutre-blanc); }
.place-preview__quand.is-encours {
background: var(--accent);
color: var(--rg-neutre-blanc);
box-shadow: none;
}
.place-preview__quand.is-passe { color: var(--text-faint); }
/* Le week-end concerne, sous le nom du circuit. */
.place-preview__ev {
display: flex;
align-items: baseline;
gap: var(--rg-espace-2);
flex-wrap: wrap;
margin: var(--rg-espace-2) 0 0;
}
.place-preview__ev b {
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-gras);
color: var(--text);
}
.place-preview__ev span {
font-size: var(--fs-3xs);
color: var(--text-faint);
}
.place-preview__ev--vide {
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-moyen);
color: var(--text-faint);
}
/* LA FICHE D'UN CIRCUIT, blocs numerotes
Les `form-section` a titre gris dataient d'avant la refonte ;
c'est la meme fiche que celles de la Timetable, de Ma semaine
et des equipes. */
.plf { display: flex; flex-direction: column; gap: var(--rg-espace-5); }
.plf__b { display: flex; flex-direction: column; gap: var(--rg-espace-3); }
.plf__n {
display: flex;
align-items: baseline;
gap: var(--rg-espace-3);
margin: 0;
font-size: var(--fs-md);
color: var(--accent);
}
.plf__n span {
text-transform: uppercase;
color: var(--text);
}
.plf__n em {
font-family: var(--font-base);
font-size: var(--x-second-s);
font-weight: var(--x-second-w);
font-style: normal;
text-transform: none;
letter-spacing: 0;
color: var(--text-faint);
margin-left: var(--rg-espace-2);
}
.plf__hint { margin: calc(calc(var(--rg-espace-1) / 2) * -1) 0 0; font-size: var(--fs-3xs); color: var(--text-muted); }
.form-input--cc { text-transform: uppercase; text-align: center; letter-spacing: var(--rg-label-m-espacement); }
/* =========================================================
LA CARTE D'UNE PERSONNE, refaite le 2026-09-04
---------------------------------------------------------
« L'aspect des cartes ne correspond pas aux dernières qu'on a
créées. » C'était la dernière carte « portrait » de
l'intranet : avatar géant centré, tout centré, 280 px de haut
pour quatre lignes. Elle reprend la grammaire des cartes de
réservation (`.resa-row`), filet de couleur à gauche pour le
statut, entête, nom, détails alignés à gauche, actions en bas.
Le métier passe en entête : dans une écurie on cherche
quelqu'un par son métier, pas par sa tête. L'avatar reste,
en 40 px, un trombinoscope sans visages n'aide personne.
========================================================= */
.crew-card {
display: flex;
flex-direction: column;
gap: var(--rg-espace-3);
padding: var(--rg-espace-4) var(--rg-espace-4);
border-radius: var(--r-md);
background: var(--plein);
border: var(--rg-trait-1) solid var(--border);
/* LE LISERÉ PORTE L'ASSIGNATION, sa demande du 2026-09-07.
Il disait avant permanent (vert) / temporaire (orange) ; ce
signal-là est déjà écrit dans le badge de l'en-tête. Il est
dessiné par `::after` pour pouvoir porter deux couleurs. */
border-left: var(--rg-trait-4) solid transparent;
cursor: pointer;
transition: border-color var(--t-base) var(--ease),
box-shadow var(--t-base) var(--ease);
}
@media (hover: hover) { .crew-card:hover { border-color: var(--border-2); box-shadow: none; } }
/* .crew-card--temp ne repeint plus le liseré : le badge
« Temporary » de l'en-tête dit déjà la même chose. */
.crew-card__head {
display: flex;
align-items: center;
gap: var(--rg-espace-2);
}
.crew-card__job {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.crew-card__head .resa-badge { margin-left: auto; flex-shrink: 0; }
.crew-card__id {
display: flex;
align-items: center;
gap: var(--rg-espace-3);
min-width: 0;
}
.crew-card__ph {
width: 40px;
height: 40px;
flex-shrink: 0;
border-radius: var(--rg-rayon-0);
display: grid;
place-items: center;
overflow: hidden;
color: var(--rg-neutre-blanc);
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: 0;
}
.crew-card__ph img { width: 100%; height: 100%; object-fit: cover; }
/* =========================================================
LA MAQUETTE DU TABLEAU DE BORD
---------------------------------------------------------
« Juste les flèches en haut, en bas, ça ne va pas. » Une
flèche déplace d'un cran dans une LISTE ; le tableau de bord
est une GRILLE où un widget occupe une, deux ou quatre
places. La maquette montre les vraies proportions, et on
dépose au lieu de compter.
========================================================= */
.dash-panel__col--map { min-width: 0; }
.dash-panel__col--map .form-section__title {
display: flex;
align-items: baseline;
gap: var(--rg-espace-3);
}
.dash-panel__col--map .form-section__title em {
font-style: normal;
font-weight: var(--rg-graisse-moyen);
letter-spacing: 0;
text-transform: none;
color: var(--text-faint);
}
.dashmap {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-auto-rows: 58px;
gap: var(--rg-espace-2);
padding: var(--rg-espace-3);
border-radius: var(--r-md);
background: var(--surface-2);
box-shadow: none;
}
.dashmap__t {
position: relative;
grid-column: span var(--c, 2);
grid-row: span var(--r, 1);
min-width: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--rg-espace-1);
padding: var(--rg-espace-2) var(--rg-espace-2);
border-radius: var(--r-sm);
background: var(--plein);
box-shadow: none;
overflow: hidden;
cursor: grab;
touch-action: none; /* sinon le navigateur fait défiler la page */
user-select: none;
transition: box-shadow var(--t-fast) var(--ease);
}
@media (hover: hover) { .dashmap__t:hover { box-shadow: none; } }
.dashmap__t.is-prise { opacity: 0.35; cursor: grabbing; }
/* Le fantôme suit le pointeur, et ne reçoit rien : sans
`pointer-events: none`, `elementFromPoint` le trouverait
lui-même sous le curseur et jamais la tuile visée. */
.dashmap__ghost {
position: fixed;
z-index: 200;
pointer-events: none;
opacity: 0.95;
box-shadow: none;
transform: rotate(-1.5deg);
}
/* Le trait de dépôt : à gauche ou à droite de la tuile survolée.
Un simple surlignage ne dirait pas de quel côté ça tombe. */
.dashmap__t.is-avant::before,
.dashmap__t.is-apres::after {
content: "";
position: absolute;
top: 2px;
bottom: 2px;
width: 3px;
border-radius: var(--rg-rayon-0);
background: var(--accent);
}
.dashmap__t.is-avant::before { left: -6px; }
.dashmap__t.is-apres::after { right: -6px; }
.dashmap__h { display: flex; align-items: center; gap: var(--rg-espace-2); min-width: 0; }
.dashmap__i {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 20px; height: 20px;
border-radius: var(--r-xs, var(--rg-rayon-0));
background: var(--surface-2);
color: var(--accent);
}
.dashmap__i svg { width: 13px; height: 13px; stroke-width: var(--rg-icone-trait); }
.dashmap__n {
flex: 1 1 auto;
min-width: 0;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dashmap__x {
flex: 0 0 auto;
width: 18px; height: 18px;
padding: 0; border: 0;
border-radius: var(--rg-rayon-0);
background: none;
color: var(--text-faint);
font-size: var(--rg-taille-texte-m);
line-height: var(--rg-interligne-plein);
cursor: pointer;
}
@media (hover: hover) { .dashmap__x:hover { color: var(--pop-alarme); background: var(--surface-2); } }
/* LE FORMAT. Affiché en clair au repos, et le choix complet
n'apparaît qu'au survol : une maquette couverte de quatre
pastilles par carte n'est plus une maquette, c'est un
formulaire déguisé en grille. */
.dashmap__f {
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-gras);
letter-spacing: 0;
text-transform: uppercase;
color: var(--text-faint);
}
.dashmap__s {
position: absolute;
left: 8px;
right: 8px;
bottom: 7px;
display: flex;
flex-wrap: wrap;
gap: var(--rg-espace-1);
opacity: 0;
pointer-events: none;
transition: opacity var(--t-fast) var(--ease);
}
.dashmap__t:focus-within .dashmap__s { opacity: 1; pointer-events: auto; }
@media (hover: hover) { .dashmap__t:hover .dashmap__s { opacity: 1; pointer-events: auto; } }
.dashmap__t:focus-within .dashmap__f { opacity: 0; }
@media (hover: hover) { .dashmap__t:hover .dashmap__f { opacity: 0; } }
.dashmap__sz {
padding: calc(var(--rg-espace-1) / 2) var(--rg-espace-2);
border: 0;
border-radius: var(--rg-rayon-0);
background: var(--surface-2);
color: var(--text-faint);
font: inherit;
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-gras);
letter-spacing: 0;
cursor: pointer;
white-space: nowrap;
}
@media (hover: hover) { .dashmap__sz:hover { color: var(--text); } }
.dashmap__sz.is-on { background: var(--rg-texte-principal); color: var(--rg-texte-inverse); }
/* Pendant un déplacement, plus rien d'autre ne se sélectionne. */
body.is-dm { user-select: none; cursor: grabbing; }
@media (max-width: 720px) {
.dashmap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dashmap__t { grid-column: span min(var(--c, 2), 2); }
}
/* =========================================================
LA VISIONNEUSE DE DOCUMENT, ET SA PROTECTION
---------------------------------------------------------
Aucun site web ne peut empêcher une capture d'écran : la
permission qui le permet (`FLAG_SECURE`) n'existe que pour les
applications natives. Ce qui est fait ici : un rideau au
changement de focus, la copie coupée, et surtout un FILIGRANE
qui rend toute capture traçable.
========================================================= */
.modal-overlay--large { padding: var(--rg-espace-5); }
.modal--lect { max-width: min(1040px, 100%); }
.lect { position: relative; display: flex; flex-direction: column; gap: var(--rg-espace-4); }
.lect__badge {
display: inline-block;
margin-left: var(--rg-espace-3);
padding: calc(var(--rg-espace-1) / 2) var(--rg-espace-2);
border-radius: var(--rg-rayon-0);
background: color-mix(in srgb, var(--accent) 14%, transparent);
box-shadow: none;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: 0;
text-transform: uppercase;
color: var(--accent);
vertical-align: middle;
}
.lect__zone {
position: relative;
/* Le filigrane se mélange en `difference` : il doit se mélanger
avec l'APERÇU et rien d'autre. `isolation` enferme le calcul
ici, sinon il traverserait jusqu'au fond du panneau. */
isolation: isolate;
min-height: 300px;
border-radius: var(--r-md);
background: var(--surface-2);
box-shadow: none;
overflow: hidden;
display: grid;
place-items: center;
}
.lect__img { max-width: 100%; max-height: 62vh; display: block; }
.lect__pdf { width: 100%; height: 62vh; border: 0; display: block; background: var(--rg-neutre-blanc); }
/* L'APERÇU D'UN TEXTE, ajouté le 2026-09-08. La visionneuse ne
savait afficher qu'une image ou un PDF ; un .txt tombait sur
« aucun aperçu ». On le pose comme une feuille : marges larges,
police à chasse fixe, fond clair même en thème sombre, c'est
un document, il doit ressembler à une page, pas à un terminal. */
.lect__texte {
width: 100%;
max-height: 100%;
overflow: auto;
padding: var(--rg-espace-6) var(--rg-espace-6);
background: var(--rg-neutre-blanc);
border-radius: var(--r-sm);
}
.lect__texte pre {
margin: 0;
font-family: var(--font-mono);
font-size: var(--rg-taille-label-m);
line-height: var(--rg-interligne-texte);
color: var(--rg-marine-5);
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.lect__vide {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--rg-espace-3);
padding: var(--rg-espace-7) var(--rg-espace-5);
text-align: center;
}
.lect__vide p { margin: 0; font-size: var(--fs-xs); color: var(--text-muted); }
.lect__vide-sous { color: var(--text-faint) !important; font-size: var(--fs-3xs) !important; }
/* LE FILIGRANE. Répété en diagonale, très pâle, et surtout
`pointer-events: none` : il marque la page, il ne doit pas
gêner la lecture. Il porte le nom ET l'heure, deux captures
du même document ne laissent donc pas la même trace. */
.lect__filig {
position: absolute;
inset: -30%;
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: center;
gap: var(--rg-espace-6) var(--rg-espace-7);
transform: rotate(-24deg);
pointer-events: none;
user-select: none;
}
.lect__filig span {
font-size: var(--rg-taille-texte-s);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
white-space: nowrap;
/* LISIBLE SUR N'IMPORTE QUEL FOND, corrigé le 2026-09-08.
C'était `color: var(--text); opacity: .13` : une couleur
FIXE sur un fond QUELCONQUE. Sur la feuille claire d'un
texte, ça se lisait ; sur une photographie sombre, le
filigrane disparaissait complètement.
Or c'est la seule mesure qui tienne vraiment, elle
n'empêche pas la capture, elle la rend traçable. Un
filigrane invisible sur la moitié des documents ne trace
rien du tout.
`difference` inverse ce qu'il y a dessous : blanc sur fond
clair donne un gris clair, blanc sur fond sombre donne un
gris clair aussi. La lisibilité ne dépend plus du document.
C'est le procédé classique du filigrane, et la seule façon
de ne pas avoir à deviner le fond. */
color: color-mix(in srgb, var(--rg-neutre-blanc) 42%, transparent);
mix-blend-mode: difference;
}
/* LE RIDEAU. Opaque, pas translucide : un flou se devine encore
sur une capture. */
/* C'EST CE PANNEAU QUI DOIT FINIR DANS LA CAPTURE.
Il n'est plus décoratif : quand le viseur du système est
ouvert, c'est la seule chose visible à l'écran, et donc la
seule chose que l'image rapportera. Il doit se lire d'un coup
d'œil sur une capture qu'on regardera hors contexte, d'où le
fond franc, le pictogramme large et la mention de la trace. */
.lect__rideau {
position: absolute;
inset: 0;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--rg-espace-3);
padding: var(--rg-espace-6);
text-align: center;
background: var(--plein);
border: 0;
border-radius: inherit;
width: 100%;
font: inherit;
cursor: pointer;
appearance: none;
}
.lect__rideau[hidden] { display: none; }
.lect__rideau u {
text-decoration: none;
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-semi);
color: var(--text-soft);
border: var(--rg-trait-1) solid var(--border-2);
border-radius: var(--r-pill);
padding: var(--rg-espace-2) var(--rg-espace-4);
margin-top: var(--rg-espace-2);
transition: background var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease);
}
@media (hover: hover) { .lect__rideau:hover u {
background: var(--surface-2);
border-color: var(--text-muted);
} }
.lect__rideau-ico {
display: grid;
place-items: center;
width: 68px;
height: 68px;
border-radius: var(--rg-rayon-0);
background: color-mix(in srgb, var(--pop-alarme) 14%, transparent);
color: var(--pop-alarme);
}
.lect__rideau-ico svg { width: 34px; height: 34px; }
.lect__rideau b { font-size: var(--fs-lg); font-weight: var(--rg-graisse-gras); color: var(--text); max-width: 30ch; line-height: var(--rg-interligne-fort); }
.lect__rideau i { font-style: normal; font-size: var(--fs-xs); color: var(--text-muted); max-width: 42ch; }
/* En lecture protégée, rien ne se sélectionne ni ne se traîne. */
.lect.is-protege .lect__zone,
.lect.is-protege .lect__info {
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
.lect.is-protege .lect__img { pointer-events: none; }
.lect__info { display: flex; flex-direction: column; gap: var(--rg-espace-4); }
.lect__com {
margin: 0;
font-size: var(--fs-sm);
line-height: var(--rg-interligne-texte);
color: var(--text-soft);
}
.lect__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: var(--rg-espace-2);
}
.lect__c {
display: flex;
flex-direction: column;
gap: calc(var(--rg-espace-1) / 2);
padding: var(--rg-espace-3) var(--rg-espace-3);
border-radius: var(--r-sm);
background: var(--plein-3);
box-shadow: none;
}
.lect__c span {
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--text-muted);
}
.lect__c b {
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-semi);
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
}
.lect__note {
margin: 0;
padding: var(--rg-espace-3) var(--rg-espace-3);
border-radius: var(--r-sm);
background: var(--surface-2);
font-size: var(--fs-3xs);
line-height: var(--rg-interligne-texte);
color: var(--text-muted);
}
.lect__caps {
margin: 0;
font-size: var(--fs-3xs);
line-height: var(--rg-interligne-texte);
color: var(--pop-alarme);
}
/* Le badge de la carte : un écusson, pas un cadenas, le cadenas
dit déjà « sensible » juste à côté. */
.doc-preview__prot {
display: grid;
place-items: center;
width: 24px;
height: 24px;
border-radius: var(--rg-rayon-0);
background: color-mix(in srgb, var(--accent) 13%, transparent);
color: var(--accent);
flex: 0 0 auto;
}
.doc-preview__prot svg { width: 15px; height: 15px; }
/* =========================================================
SOUVENT OUVERTS, la pertinence
---------------------------------------------------------
Une rangée en tête, la liste garde sa chronologie en dessous :
on retrouve ce qu'on rouvre tout le temps SANS perdre « quoi
de neuf », qui est l'autre question qu'on pose à une
bibliothèque.
========================================================= */
.docsouv { margin-bottom: var(--rg-espace-5); }
.docsouv__t {
display: flex;
align-items: baseline;
gap: var(--rg-espace-3);
margin: 0 0 var(--rg-espace-3);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--text-muted);
}
.docsouv__t span {
font-weight: var(--rg-graisse-moyen);
letter-spacing: 0;
text-transform: none;
color: var(--text-faint);
}
.docsouv__r {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 260px));
gap: var(--rg-espace-3);
}
.docsouv__c {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--rg-espace-2);
padding: var(--rg-espace-3) var(--rg-espace-4);
border-radius: var(--r-md);
background: var(--surface);
box-shadow: none;
cursor: pointer;
text-align: left;
font: inherit;
transition: box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
@media (hover: hover) { .docsouv__c:hover {
box-shadow: none;
transform: translateY(-1px);
} }
.docsouv__n {
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-semi);
color: var(--text);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: var(--rg-interligne-fort);
}
.docsouv__m { font-size: var(--fs-3xs); color: var(--text-faint); }
.docsouv__m i { font-style: normal; color: var(--accent); font-weight: var(--rg-graisse-semi); }
/* Un document encore flouté garde son nom lisible ici aussi :
sans lui on ne saurait pas lequel on demande à ouvrir. */
.docsouv__c.is-flou .docsouv__m { color: var(--edt-conge-ink, var(--text-muted)); }
/* =========================================================
JOB LIST, le widget du travail confié
---------------------------------------------------------
Une jauge répond à « est-ce fini ? », le compte par personne
à « qui a fait quoi ? ». Les deux questions se posent, les
deux ont leur réponse à l'écran.
========================================================= */
.jl-neuve {
display: block;
width: 100%;
padding: var(--rg-espace-2) var(--rg-espace-3);
margin-bottom: var(--rg-espace-3);
border: var(--rg-trait-1) dashed var(--border-2);
border-radius: var(--r-sm);
background: none;
cursor: pointer;
font: inherit;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: 0;
color: var(--text-muted);
transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
@media (hover: hover) { .jl-neuve:hover { color: var(--accent); border-color: var(--accent); } }
.jl-open { display: flex; flex-direction: column; gap: var(--rg-espace-3); }
.jl-open.is-passe { opacity: 0.62; }
.jl-open__head { display: flex; align-items: flex-start; gap: var(--rg-espace-3); }
.jl-open__t { min-width: 0; flex: 1 1 auto; }
.jl-open__t h4 {
margin: 0;
font-size: var(--fs-sm);
font-weight: var(--rg-graisse-gras);
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.jl-open__t p { margin: var(--rg-trait-1) 0 0; font-size: var(--fs-3xs); color: var(--text-muted); }
.jl-mod {
flex: 0 0 auto;
width: 26px; height: 26px;
display: grid; place-items: center;
padding: 0; border: 0;
border-radius: var(--r-sm);
background: var(--surface-2);
color: var(--text-muted);
cursor: pointer;
}
.jl-mod svg { width: 15px; height: 15px; }
@media (hover: hover) { .jl-mod:hover { color: var(--accent); } }
/* LA JAUGE. Fond neutre, remplissage en accent, et vert dès que
c'est fini : le seul moment où la couleur doit changer est
celui où la réponse change. */
.jl-prog { display: flex; align-items: center; gap: var(--rg-espace-3); }
.jl-prog b {
flex: 0 0 auto;
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-gras);
color: var(--text);
font-variant-numeric: tabular-nums;
}
.jl-jauge {
display: block;
flex: 1 1 auto;
height: 8px;
min-width: 40px;
border-radius: var(--rg-rayon-0);
background: var(--border);
overflow: hidden;
}
.jl-jauge i {
display: block;
height: 100%;
border-radius: var(--rg-rayon-0);
background: var(--accent);
transition: width var(--t-slow) var(--ease);
}
.jl-jauge.is-fini i { background: var(--pop-3); }
.jl-jauge--mince { height: 5px; }
/* QUI A FAIT QUOI, des initiales et un compte, pas un tableau :
on lit la charge d'un coup d'œil. */
.jl-qui { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rg-espace-2) var(--rg-espace-3); }
.jl-qui__i {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-1);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
color: var(--text-soft);
font-variant-numeric: tabular-nums;
}
.jl-qui__i .crew-avatar { width: 22px; height: 22px; font-size: var(--rg-taille-label-s); }
.jl-qui__reste { font-size: var(--fs-3xs); color: var(--text-faint); }
.jl-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(var(--rg-espace-1) / 2); }
.jl-t {
display: flex;
align-items: center;
gap: var(--rg-espace-2);
padding: var(--rg-espace-2) var(--rg-espace-1);
border-radius: var(--r-sm);
transition: background var(--t-fast) var(--ease);
}
@media (hover: hover) { .jl-t:hover { background: var(--surface-2); } }
.jl-t__txt {
min-width: 0;
flex: 1 1 auto;
font-size: var(--fs-xs);
color: var(--text-soft);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.jl-t.is-done .jl-t__txt { color: var(--text-faint); text-decoration: line-through; }
/* Une tâche qui n'est pas la vôtre reste LISIBLE, on doit voir
ce que fait l'équipe, mais sa case ne s'allume pas. */
.jl-t.is-lock .dash-check { opacity: 0.4; cursor: default; }
.jl-t__qui { flex: 0 0 auto; display: flex; align-items: center; gap: var(--rg-espace-1); }
.jl-t__qui .crew-avatar { width: 21px; height: 21px; font-size: var(--rg-taille-label-s); }
.jl-t__ouvert {
font-style: normal;
font-size: var(--fs-3xs);
color: var(--text-faint);
padding: var(--rg-trait-1) var(--rg-espace-2);
border-radius: var(--rg-rayon-0);
box-shadow: none;
}
/* LES AUTRES LISTES, une ligne chacune, avec sa jauge. Cliquer
la déplie à la place de celle du dessus : une seule liste
ouverte à la fois, sinon le widget devient un mur. */
.jl-autres {
display: flex;
flex-direction: column;
gap: var(--rg-espace-1);
margin-top: var(--rg-espace-4);
padding-top: var(--rg-espace-3);
border-top: var(--rg-trait-1) solid var(--border);
}
.jl-rang {
display: flex;
align-items: center;
gap: var(--rg-espace-3);
width: 100%;
padding: var(--rg-espace-2) var(--rg-espace-2);
border: 0;
border-radius: var(--r-sm);
background: none;
cursor: pointer;
font: inherit;
text-align: left;
transition: background var(--t-fast) var(--ease);
}
@media (hover: hover) { .jl-rang:hover { background: var(--surface-2); } }
.jl-rang.is-passe { opacity: 0.6; }
.jl-rang__t {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--rg-trait-1);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
color: var(--text);
overflow: hidden;
}
.jl-rang__t i { font-style: normal; font-weight: var(--rg-graisse-moyen); color: var(--text-faint); }
.jl-rang .jl-jauge { flex: 0 0 70px; }
.jl-rang__n {
flex: 0 0 auto;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
/* Le condensé : le chiffre porte son dénominateur en petit, et
la jauge tient sous les deux lignes de texte. */
.dash-digest__n em { font-style: normal; font-size: var(--rg-taille-texte-l); color: var(--text-faint); }
.dash-digest .jl-jauge { margin: var(--rg-espace-1) 0 var(--rg-trait-1); }
/* --- LA FICHE --- */
.jlf__quand { display: flex; align-items: flex-end; gap: var(--rg-espace-3); flex-wrap: wrap; }
.jlf__d { display: flex; flex-direction: column; gap: var(--rg-espace-1); }
.jlf__d span {
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--text-muted);
}
.jlf__d .form-input { width: 168px; }
.jlf__gens {
display: flex;
flex-direction: column;
gap: calc(var(--rg-espace-1) / 2);
max-height: 236px;
overflow-y: auto;
margin: 0 calc(var(--rg-espace-1) * -1);
padding: calc(var(--rg-espace-1) / 2) var(--rg-espace-1);
}
.jlf__taches { display: flex; flex-direction: column; gap: var(--rg-espace-2); margin-bottom: var(--rg-espace-3); }
.jlt { display: flex; align-items: center; gap: var(--rg-espace-2); }
.jlt__n {
flex: 0 0 auto;
width: 20px;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
color: var(--text-faint);
text-align: right;
font-variant-numeric: tabular-nums;
}
.jlt__txt { flex: 1 1 auto; min-width: 0; }
.jlt__pour { flex: 0 0 156px; }
.jlt__x {
flex: 0 0 auto;
width: 26px; height: 26px;
padding: 0; border: 0;
border-radius: var(--r-sm);
background: none;
color: var(--text-faint);
font-size: var(--rg-taille-texte-l);
line-height: var(--rg-interligne-plein);
cursor: pointer;
}
@media (hover: hover) { .jlt__x:hover { color: var(--pop-alarme); background: var(--surface-2); } }
@media (max-width: 620px) {
.jlt { flex-wrap: wrap; }
.jlt__pour { flex: 1 1 100%; margin-left: var(--rg-espace-6); }
}
/* =========================================================
L'ORGANIGRAMME, l'onglet Crew, vue de l'espace
---------------------------------------------------------
« Je voudrais que les cartes soient rangées comme un
organigramme, que la photo soit mieux mise en avant, et
quand on clique sur la personne on voit sa fiche de poste. »
Les traits sont en CSS pur, pas de SVG à recalculer au
redimensionnement. La barre horizontale s'arrête au CENTRE
de la première et de la dernière branche : c'est `--n`, le
nombre de colonnes, posé en ligne par le rendu.
========================================================= */
.orga { display: flex; flex-direction: column; align-items: stretch; }
/* La carte « Ajouter quelqu'un » était posée dans la grille de
cartes : première case à gauche, et tout le reste de la rangée
vide au-dessus d'un organigramme centré. On la centre sur le
même axe que l'arbre, c'est le seul moyen que les deux blocs
se lisent comme une seule colonne. */
.orga__ajout.cards-grid {
display: flex;
justify-content: center;
margin-bottom: var(--rg-espace-6);
}
.orga__ajout.cards-grid > * { width: min(100%, 320px); }
/* LA DIRECTION PREND TOUTE LA LARGEUR, sa demande du
2026-09-07 : « les cartes de Thibault et Cyril, l'une à côté de
l'autre, devaient prendre la largeur de l'organigramme ». Deux
cartes de 300 px centrées au-dessus d'un arbre de 1 500 px
flottaient ; en grille, elles couvrent la section et le tronc
part vraiment du milieu de la direction. */
.orga__n { display: flex; flex-direction: column; align-items: stretch; }
.orga__t {
margin: 0 0 var(--rg-espace-3);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--text-muted);
}
.orga__rang {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--rg-espace-5);
width: 100%;
}
/* Le lien vertical entre deux niveaux. */
.orga__n.has-lien, .orga__branches.has-lien { position: relative; }
.orga__n.has-lien { padding-top: var(--rg-espace-6); }
.orga__n.has-lien::before {
content: "";
position: absolute;
top: 0; left: 50%;
width: 2px; height: 20px;
background: var(--border-2);
transform: translateX(-50%);
}
/* Colonnes bornées et centrées : avec une seule branche, un
`1fr` étalait la carte du responsable sur toute la largeur de
la page, un organigramme d'une personne large de 1 200 px. */
.orga__branches {
position: relative;
display: grid;
/* Le minimum descend à 280 px : à cinq colonnes, 300 px
débordaient la page de trois cents pixels. */
grid-template-columns: repeat(var(--n, 1), minmax(280px, 1fr));
justify-content: center;
gap: var(--rg-espace-5);
align-items: start;
}
.orga__branches.has-lien { margin-top: var(--rg-espace-6); padding-top: var(--rg-espace-6); }
/* Le tronc, puis la barre : elle va du centre de la première
colonne au centre de la dernière, d'où le `50% / n`. */
.orga__branches.has-lien::before {
content: "";
position: absolute;
top: 0; left: 50%;
width: 2px; height: 15px;
background: var(--border-2);
transform: translateX(-50%);
}
.orga__branches.has-lien::after {
content: "";
position: absolute;
top: 15px;
left: calc(50% / var(--n, 1));
right: calc(50% / var(--n, 1));
height: 2px;
background: var(--border-2);
}
.orga__br { position: relative; display: flex; flex-direction: column; gap: var(--rg-espace-3); }
/* La branche unique : large, et ses groupes de métier en colonnes. */
.orga__branches.has-lien .orga__br::before {
content: "";
position: absolute;
top: -15px; left: 50%;
width: 2px; height: 15px;
background: var(--border-2);
transform: translateX(-50%);
}
/* Les gens d'une branche : un rail vertical à gauche, et une
petite amorce horizontale par carte, c'est ce qui fait lire
« ces sept-là dépendent de celui du dessus » sans avoir à
l'écrire. */
/* Les groupes de métier se rangent en COLONNES dès qu'il y a la
place, 2026-09-07, « l'organigramme est un peu contraint ».
Une branche d'une seule colonne, c'était une liste de trois
mille pixels qu'il fallait faire défiler pour voir le bas de
l'entreprise. `auto-fill` retombe tout seul sur une colonne
quand la branche est étroite. */
.orga__liste {
display: grid;
/* 240 px, pas 300 : c'est ce qui permet à une section large de
ranger ses métiers sur deux colonnes au lieu d'une. Le rail
de gauche mange 38 px, il faut en tenir compte. */
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: var(--rg-espace-5) var(--rg-espace-4);
align-items: start;
margin-left: var(--rg-espace-4);
padding-left: var(--rg-espace-4);
border-left: var(--rg-trait-3) solid var(--border);
}
/* Le groupe de métier : un titre discret, puis ses cartes.
L'amorce horizontale part du TITRE, pas de chaque carte, c'est le groupe qui pend de la branche. */
.orga__grp { position: relative; display: flex; flex-direction: column; gap: var(--rg-espace-2); }
.orga__grp + .orga__grp { margin-top: 0; }
.orga__grp-t {
display: flex;
align-items: baseline;
gap: var(--rg-espace-2);
margin: 0 0 var(--rg-trait-1);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--text-muted);
}
.orga__grp-t i {
font-style: normal;
font-weight: var(--rg-graisse-gras);
letter-spacing: 0;
color: var(--text-faint);
}
.orga__grp::before {
content: "";
position: absolute;
left: -18px; top: 8px;
width: 16px; height: 2px;
background: var(--border);
}
.orga__sans {
margin: 0;
padding: var(--rg-espace-3) var(--rg-espace-4);
border-radius: var(--r-md);
border: var(--rg-trait-1) dashed var(--border-2);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
color: var(--text-muted);
text-align: center;
}
.orga__vide { margin: 0; font-size: var(--fs-3xs); color: var(--text-faint); }
/* --- LA CARTE, photo à gauche, texte à droite, avatar 56 --- */
.ocard {
display: flex;
flex-direction: column;
gap: var(--rg-espace-3);
padding: var(--rg-espace-4) var(--rg-espace-4);
border-radius: var(--r-md);
background: var(--surface);
box-shadow: none;
cursor: pointer;
text-align: left;
transition: box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
@media (hover: hover) { .ocard:hover {
box-shadow: none;
transform: translateY(-1px);
} }
.ocard:focus-visible { outline: var(--rg-trait-3) solid var(--border-focus); outline-offset: calc(var(--rg-espace-1) / 2); }
/* Un chef porte le filet d'accent : dans un arbre, la tête de
branche doit se distinguer de ce qui pend dessous. */
/* Toutes les cartes de l'organigramme portent le liseré de leur
assignation. Le chef garde en plus l'anneau complet : dans un
arbre, la tête de branche doit rester distincte de ce qui pend
dessous, et la couleur ne peut plus faire ce travail puisqu'elle
dit maintenant autre chose. */
/* LE LISERÉ EST UN ÉLÉMENT, PAS UNE OMBRE. Une ombre interne ne
prend qu'une couleur ; sa demande du 2026-09-07, « quand une
personne partage deux assignations je veux que le pourtour soit
aussi avec les deux couleurs », impose un dégradé, donc un
fond, donc une boîte. `--rattp-fond` est posé en ligne par
rattPeindre() dès qu'il y a plusieurs assignations ; sinon on
retombe sur la couleur unique. */
.ocard, .crew-card { position: relative; overflow: hidden; }
.ocard::after, .crew-card::after {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
background: var(--rattp-fond, var(--rattp-c, var(--accent)));
pointer-events: none;
}
.crew-card::after { width: 3px; }
.ocard { box-shadow: none; }
@media (hover: hover) { .ocard:hover {
box-shadow: none;
} }
/* La carte du chef ne s'étire pas sur toute la branche : une
carte de 1 500 px de large au-dessus de cartes de 340 px ne se
lit plus comme une carte. */
.orga__br > .ocard--chef { align-self: center; width: min(100%, 420px); }
.ocard--chef {
min-width: 240px;
box-shadow: none;
background: var(--plein);
}
@media (hover: hover) { .ocard--chef:hover {
box-shadow: none;
} }
/* LE TITRE DE SECTION, son croquis du 2026-09-07. Il remplace
« Sans responsable désigné » : une section EXISTE même quand
personne ne la dirige encore, et la nommer vaut mieux que
parler d'un manque. */
.orga__sec {
display: flex;
align-items: baseline;
justify-content: center;
gap: var(--rg-espace-2);
margin: 0 0 var(--rg-espace-3);
padding: var(--rg-espace-2) var(--rg-espace-3);
border-radius: var(--r-pill);
background: color-mix(in srgb, var(--rattp-c, var(--accent)) 10%, transparent);
border: var(--rg-trait-1) solid color-mix(in srgb, var(--rattp-c, var(--accent)) 30%, transparent);
}
.orga__sec-n {
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-extra);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--rattp-t, var(--rattp-c, var(--accent)));
}
.orga__sec i {
font-style: normal;
font-weight: var(--rg-graisse-gras);
font-size: var(--fs-3xs);
color: var(--text-faint);
font-variant-numeric: tabular-nums;
}
/* UN ÉQUIPAGE À L'INTÉRIEUR D'UNE SECTION. Le LMP3 tourne en ELMS
et en MLMC : deux équipages, deux team managers, une seule
section. Le bloc est légèrement enfoncé pour qu'on voie d'un
coup d'œil qu'il vit DANS la section et non à côté. */
.orga__eq {
display: flex;
flex-direction: column;
gap: var(--rg-espace-3);
margin-top: var(--rg-espace-4);
padding: var(--rg-espace-3) var(--rg-espace-3) var(--rg-espace-4);
border-radius: var(--r-md);
background: color-mix(in srgb, var(--rattp-c, var(--accent)) 5%, transparent);
border: var(--rg-trait-1) solid color-mix(in srgb, var(--rattp-c, var(--accent)) 18%, transparent);
}
.orga__eq-t {
display: flex;
align-items: baseline;
justify-content: center;
gap: var(--rg-espace-2);
margin: 0;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-extra);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--text-soft);
}
.orga__eq-t i {
font-style: normal;
font-weight: var(--rg-graisse-gras);
color: var(--text-faint);
font-variant-numeric: tabular-nums;
}
.orga__eq > .ocard--chef { align-self: center; width: min(100%, 420px); }
.orga__eq .orga__liste { margin-left: var(--rg-espace-2); padding-left: var(--rg-espace-3); }
.ocard--temp .ocard__n::after { content: ""; }
.ocard__ph {
flex: 0 0 auto;
width: 68px;
height: 68px;
border-radius: var(--rg-rayon-0);
display: grid;
place-items: center;
overflow: hidden;
color: var(--rg-neutre-blanc);
font-size: var(--fs-lg);
font-weight: var(--rg-graisse-gras);
letter-spacing: 0;
}
.ocard__ph img { width: 100%; height: 100%; object-fit: cover; }
/* PIÈGE DE CASCADE, les variantes de couleur d'avatar
(`.crew-avatar--pink|navy|mix`) sont déclarées tout en haut de
la feuille. N'IMPORTE QUELLE règle d'avatar écrite plus bas et
de même spécificité les écrase : c'est ce qui donnait des
initiales blanches sur un rond gris pâle. `:where()` met la
spécificité du fond de repli à zéro, et la variante reprend la
main partout. */
:where(.ocard__ph, .fdp__ph, .crew-card__ph) { background: var(--surface-3); }
/* La tête de carte : la photo, l'identité, et le badge de
contrat temporaire poussé à droite. */
.ocard__hd { display: flex; align-items: center; gap: var(--rg-espace-4); }
.ocard__txt { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: calc(var(--rg-espace-1) / 2); }
/* Les deux lignes ajoutées le 2026-09-07. Un filet les sépare de
l'identité : ce sont des renseignements, pas le nom. */
.ocard__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--rg-espace-2);
padding-top: var(--rg-espace-3);
border-top: var(--rg-trait-1) solid var(--border);
}
.ocard__esp {
padding: calc(var(--rg-espace-1) / 2) var(--rg-espace-2);
border-radius: var(--rg-rayon-0);
border: var(--rg-trait-1) solid color-mix(in srgb, var(--accent) 40%, transparent);
color: var(--accent);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
white-space: nowrap;
}
.ocard__ct {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--rg-espace-2);
margin: 0;
font-size: var(--fs-2xs);
color: var(--text-faint);
}
.ocard__lien {
color: var(--text-soft);
text-decoration: none;
border-bottom: var(--rg-trait-1) solid transparent;
}
@media (hover: hover) { .ocard__lien:hover { color: var(--accent); border-bottom-color: currentColor; } }
/* Le séparateur est porté par le SECOND élément, pas posé entre
les deux : quand la ligne passe à deux lignes, le point suit le
téléphone au lieu de rester pendu en fin de première ligne. */
.ocard__ct > * + *::before {
content: "·";
margin-right: var(--rg-espace-2);
color: var(--text-faint);
}
/* Le repère d'une case de contact vide : nettement en retrait, en
italique, et SANS lien, un `mailto:` vers rien serait pire que
pas de lien du tout. */
.ocard__vide { color: var(--text-faint); font-style: italic; opacity: 0.75; }
/* Sur la carte de l'annuaire, la ligne de contact ferme la carte,
au-dessus des boutons d'action. */
.crew-card .ocard__ct { margin-top: calc(var(--rg-espace-1) / 2); }
/* Le nom REVIENT À LA LIGNE plutôt que d'être coupé : à 240 px
de carte, « Armand Lefranc-Mouquet » finissait en « Armand
Lefranc-… ». Un nom tronqué dans un annuaire, c'est un nom
qu'on ne peut pas chercher. */
.ocard__n {
margin: 0;
font-size: var(--fs-sm);
font-weight: var(--rg-graisse-gras);
color: var(--text);
overflow-wrap: anywhere;
line-height: var(--rg-interligne-court);
}
.ocard__j { margin: 0; font-size: var(--fs-2xs); font-weight: var(--rg-graisse-semi); color: var(--accent); }
.ocard__c {
margin: 0;
font-size: var(--fs-2xs);
color: var(--text-faint);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Deux assignations côte à côte : « F4/FR » dans son tableau. */
.rattp-lot { display: inline-flex; flex-wrap: wrap; gap: var(--rg-espace-1); }
.ocard__tmp {
margin-left: 0;
flex: 0 0 auto;
align-self: flex-start;
padding: calc(var(--rg-espace-1) / 2) var(--rg-espace-2);
border-radius: var(--rg-rayon-0);
background: var(--edt-conge-3, var(--surface-2));
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-gras);
letter-spacing: 0;
text-transform: uppercase;
color: var(--text-muted);
}
/* Sous 900 px l'arbre ne tient plus : les branches s'empilent
et les traits disparaissent. Un organigramme faux est pire
qu'un organigramme absent. */
@media (max-width: 900px) {
.orga__branches { grid-template-columns: minmax(0, 1fr); }
.orga__branches.has-lien::after,
.orga__branches.has-lien .orga__br::before { display: none; }
}
/* =========================================================
LA FICHE DE POSTE
========================================================= */
.fdp__id {
display: flex;
align-items: center;
gap: var(--rg-espace-4);
padding-bottom: var(--rg-espace-4);
margin-bottom: var(--rg-espace-4);
border-bottom: var(--rg-trait-1) solid var(--border);
}
.fdp__ph {
flex: 0 0 auto;
width: 88px;
height: 88px;
border-radius: var(--rg-rayon-0);
display: grid;
place-items: center;
overflow: hidden;
color: var(--rg-neutre-blanc);
font-size: var(--fs-lg);
font-weight: var(--rg-graisse-gras);
}
.fdp__ph img { width: 100%; height: 100%; object-fit: cover; }
.fdp__idtxt { min-width: 0; display: flex; flex-direction: column; gap: calc(var(--rg-espace-1) / 2); }
.fdp__job {
margin: 0;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--accent);
}
.fdp__nom { margin: 0; font-size: var(--fs-lg); font-weight: var(--rg-graisse-gras); color: var(--text); }
.fdp__meta { margin: 0; font-size: var(--fs-3xs); color: var(--text-muted); }
.fdp__res {
margin: 0 0 var(--rg-espace-5);
font-size: var(--fs-sm);
line-height: var(--rg-interligne-texte);
color: var(--text-soft);
}
.fdp__l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--rg-espace-2); }
.fdp__l li {
position: relative;
padding-left: var(--rg-espace-4);
font-size: var(--fs-xs);
line-height: var(--rg-interligne-texte);
color: var(--text-soft);
}
.fdp__l li::before {
content: "";
position: absolute;
left: 0; top: 0.6em;
width: 6px; height: 6px;
border-radius: var(--rg-rayon-0);
background: var(--accent);
}
.fdp__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--rg-espace-2);
}
.fdp__c {
display: flex;
flex-direction: column;
gap: var(--rg-espace-1);
padding: var(--rg-espace-3) var(--rg-espace-3);
border-radius: var(--r-sm);
background: var(--plein-3);
box-shadow: none;
}
.fdp__c span {
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--text-muted);
}
.fdp__c b { font-size: var(--fs-xs); font-weight: var(--rg-graisse-semi); color: var(--text); }
/* Le responsable est un lien : d'une fiche on remonte la
branche sans repasser par l'organigramme. */
.fdp__lien {
display: flex;
flex-direction: column;
gap: var(--rg-trait-1);
padding: 0;
border: 0;
background: none;
cursor: pointer;
text-align: left;
font: inherit;
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-semi);
color: var(--accent);
}
.fdp__lien i { font-style: normal; font-weight: var(--rg-graisse-moyen); font-size: var(--fs-3xs); color: var(--text-muted); }
@media (hover: hover) { .fdp__lien:hover { text-decoration: underline; } }
.fdp__src {
margin: var(--rg-espace-4) 0 0;
font-size: var(--fs-3xs);
color: var(--text-faint);
}
.fdp__ta { width: 100%; min-height: 118px; resize: vertical; line-height: var(--rg-interligne-texte); }
.fdp__ta--court { min-height: 62px; }
.crew-card__idtxt { min-width: 0; display: flex; flex-direction: column; gap: var(--rg-trait-1); }
.crew-card__name {
margin: 0;
font-size: var(--fs-md);
font-weight: var(--rg-graisse-semi);
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.crew-card__mail {
margin: 0;
font-size: var(--fs-2xs);
color: var(--text-faint);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.crew-card__tags { display: flex; flex-wrap: wrap; gap: var(--rg-espace-1); }
.crew-card__tag {
padding: calc(var(--rg-espace-1) / 2) var(--rg-espace-2);
border-radius: var(--rg-rayon-0);
border: var(--rg-trait-1) solid var(--border);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
color: var(--text-muted);
}
.crew-card__tag--space {
border-color: color-mix(in srgb, var(--accent) 45%, transparent);
color: var(--accent);
}
.crew-card__foot {
display: flex;
align-items: center;
gap: var(--rg-espace-2);
margin-top: auto; /* les actions se posent en bas de carte */
padding-top: var(--rg-espace-1);
}
.crew-card__act {
width: 30px;
height: 30px;
padding: 0;
display: grid;
place-items: center;
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--r-sm);
background: transparent;
color: var(--text-muted);
cursor: pointer;
transition: color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.crew-card__act:first-of-type { margin-left: auto; }
.crew-card__act svg { width: 15px; height: 15px; }
@media (hover: hover) { .crew-card__act:hover { color: var(--text); border-color: var(--border-2); } }
@media (hover: hover) { .crew-card__act--danger:hover { color: var(--accent); border-color: var(--accent); } }
/* Les cartes de personne tiennent maintenant en 4 par ligne
sans forcer une hauteur de portrait. */
.cards-grid--crew { grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); }
.cards-grid--crew .create-card { min-height: 0; }
/* =========================================================
DOCUMENTS SENSIBLES, le flou, refait le 2026-09-04
---------------------------------------------------------
Ce n'est pas un contrôle d'accès : l'accès est réglé à
l'envoi, par le destinataire. C'est un rideau contre le
regard par-dessus l'épaule, sur un écran à la vue de tous.
Le NOM du fichier reste net, sans lui on ne saurait pas quel
document on demande à ouvrir. Ce qui se floute, c'est le
commentaire et le destinataire : c'est là que se trouve ce
qu'on ne veut pas laisser lire de loin.
========================================================= */
.doc-preview { position: relative; }
.doc-preview--sensible { border-left: var(--rg-trait-4) solid var(--rg-piste-orange); }
.doc-preview.is-flou .doc-preview__masque {
filter: none;
opacity: 0.7;
user-select: none;
pointer-events: none;
}
.doc-rideau {
position: absolute;
inset: auto 10px 10px 10px;
display: flex;
align-items: center;
gap: var(--rg-espace-3);
padding: var(--rg-espace-2) var(--rg-espace-3);
border: var(--rg-trait-1) solid color-mix(in srgb, var(--rg-piste-orange) 45%, transparent);
border-radius: var(--r-sm);
background: var(--plein-2);
color: var(--text);
text-align: left;
cursor: pointer;
transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
@media (hover: hover) { .doc-rideau:hover { border-color: var(--rg-piste-orange); background: var(--plein-3); } }
.doc-rideau__ico {
width: 28px;
height: 28px;
flex-shrink: 0;
display: grid;
place-items: center;
border-radius: var(--rg-rayon-0);
background: color-mix(in srgb, var(--rg-piste-orange) 16%, transparent);
color: var(--rg-piste-orange);
}
.doc-rideau__ico svg { width: 16px; height: 16px; }
.doc-rideau b {
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-gras);
color: var(--rg-piste-orange);
}
.doc-rideau i {
font-style: normal;
margin-left: auto;
font-size: var(--fs-3xs);
color: var(--text-muted);
white-space: nowrap;
}
/* Le cadenas de l'entête devient l'œil barré. */
.doc-preview__lock { color: var(--rg-piste-orange); }
/* La fiche de révélation. */
.code-doc {
margin: 0 0 var(--rg-espace-1);
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-semi);
color: var(--text);
word-break: break-word;
}
.form-input.is-err { border-color: var(--rg-etat-erreur); }
/* =========================================================
LA FICHE EN PANNEAU LATÉRAL, 2026-09-04
---------------------------------------------------------
Lorette : « le pop-up quand on ouvre le profil de quelqu'un,
ça ne va pas ; il est très moche et pas adapté. Je veux
plutôt, comme quand on clique sur son profil, une fenêtre à
droite qui s'ouvre avec les infos. Tous les pop-up de ce type
doivent être revus comme je viens de te le décrire. »
Elle a raison au-delà du goût : une boîte centrée efface la
page derrière elle. Or ces fiches-là s'ouvrent DEPUIS une
liste, et on y revient, on modifie un circuit, on ferme, on
passe au suivant. Un panneau latéral garde la liste visible et
ne casse pas le fil.
La règle : **une fiche qui ouvre un objet d'une liste
s'ouvre à droite** (`.modal--sheet`). Une confirmation courte
(un code, un message) reste centrée, elle interrompt, c'est
son rôle.
La classe se pose sur le `.modal` existant : tout le JS et
tout le contenu restent inchangés.
========================================================= */
.modal-overlay--sheet {
align-items: stretch;
justify-content: flex-end;
padding: 0;
/* Le voile d'une modale centree efface la page : c'est son
role, elle remplace le contenu. Un panneau lateral fait
l'inverse, il s'ouvre a cote de la liste, et la liste doit
rester lisible. Voile plus leger, flou divise par quatre. */
background: color-mix(in srgb, var(--bg) 40%, color-mix(in srgb, var(--rg-marine-8) 28%, transparent));
}
/* Une fiche large (la réservation, la fiche CRM) garde sa
largeur : à 560 px ses deux colonnes s'écraseraient. */
.modal--sheet.modal--wide { width: min(760px, 100vw); }
.modal--sheet {
width: min(560px, 100vw);
max-width: none;
height: 100dvh;
max-height: 100dvh;
border: 0;
border-left: var(--rg-trait-1) solid var(--border);
border-radius: var(--rg-rayon-0);
animation: sheetIn var(--t-slow) var(--ease) both;
}
@keyframes sheetIn {
from { transform: translateX(28px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
/* Le corps respire un peu plus : on a la hauteur pour soi. */
.modal--sheet .modal__head { padding: var(--rg-espace-5) var(--rg-espace-5) var(--rg-espace-4); }
.modal--sheet .modal__body { padding: var(--rg-espace-5) var(--rg-espace-5); }
.modal--sheet .modal__foot { padding: var(--rg-espace-4) var(--rg-espace-5); }
@media (max-width: 640px) {
.modal--sheet { width: 100vw; border-left: 0; }
}
/* =========================================================
GESTION, LE BILAN
---------------------------------------------------------
Page sœur de l'emploi du temps : elle en reprend la barre,
les teintes de familles et le filet de discipline au bord
du nom. Rien de nouveau à apprendre, c'est le même tableau
vu de plus haut.
========================================================= */
.bil-bar { margin-bottom: var(--rg-espace-4); }
.bil-libre {
display: flex;
gap: var(--rg-espace-4);
align-items: flex-end;
margin-bottom: var(--rg-espace-4);
}
.bil-libre__f { display: flex; flex-direction: column; gap: var(--rg-espace-1); }
.bil-libre__f span {
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--text-muted);
}
.bil-libre__f .form-input { width: 190px; }
/* --------- LA BANDE DE CHIFFRES --------- */
.bil-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: var(--rg-espace-3);
margin-bottom: var(--rg-espace-3);
}
.bil-stat {
display: flex;
flex-direction: column;
gap: calc(var(--rg-espace-1) / 2);
padding: var(--rg-espace-4) var(--rg-espace-4) var(--rg-espace-4);
border-radius: var(--r-md);
background: var(--plein);
box-shadow: none;
}
.bil-stat__v {
margin: 0;
font-size: var(--rg-taille-h2);
font-weight: var(--rg-graisse-gras);
line-height: var(--rg-interligne-plein);
letter-spacing: var(--rg-chiffre-xl-espacement);
color: var(--text);
font-variant-numeric: tabular-nums;
}
.bil-stat__v span {
font-size: var(--rg-taille-texte-s);
font-weight: var(--rg-graisse-semi);
color: var(--text-faint);
margin-left: var(--rg-espace-1);
}
.bil-stat__l {
margin: var(--rg-espace-1) 0 0;
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-semi);
color: var(--text);
}
.bil-stat__s {
margin: 0;
font-size: var(--fs-3xs);
color: var(--text-muted);
}
/* La ligne d'honnêteté : de quoi ces chiffres sont tirés, et
combien de cases sont restées vides. Sans elle, un mois à
moitié saisi ressemble à un mois de vacances. */
.bil-remplissage {
margin: 0 0 var(--rg-espace-5);
font-size: var(--fs-3xs);
color: var(--text-muted);
}
.bil-remplissage strong { color: var(--text); font-weight: var(--rg-graisse-gras); }
.bil-remplissage.is-trou strong { color: var(--edt-conge-ink); }
.bil-note {
margin: 0 0 var(--rg-espace-2);
font-size: var(--fs-3xs);
line-height: var(--rg-interligne-texte);
color: var(--text-muted);
max-width: 78ch;
}
.bil-note strong { color: var(--text-soft); font-weight: var(--rg-graisse-gras); }
/* --------- LA FICHE, À DROITE --------- */
.bilf__id {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--rg-espace-2) var(--rg-espace-3);
margin-bottom: var(--rg-espace-5);
}
.bilf__role {
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--accent);
}
.bilf__cats, .bilf__per { font-size: var(--fs-3xs); color: var(--text-muted); }
/* LA MAILLE DU DOSSIER, le réglage se place là où l'on voit ce
qu'il règle. Le titre du bloc à gauche, la période et ses
quatre mailles à droite, sur la même ligne. */
.plf__head {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--rg-espace-2) var(--rg-espace-4);
}
.plf__head .plf__n { margin: 0; }
.bilf__maille {
display: flex;
align-items: center;
gap: var(--rg-espace-2);
flex-wrap: wrap;
}
.bilf__maille .bilf__per {
min-width: 106px;
text-align: center;
font-weight: var(--rg-graisse-semi);
color: var(--text-soft);
}
/* Les mêmes boutons que la barre de la page, un cran plus
petits : c'est le même réglage, il ne doit pas se déguiser. */
.bilf__maille .edt-spaces { margin-left: var(--rg-espace-2); }
.bilf__maille .edt-spaces__btn { padding: var(--rg-espace-1) var(--rg-espace-3); font-size: var(--fs-3xs); }
.bilf__maille .edt-picker__nav { width: 24px; height: 24px; }
.bilf__libre {
display: flex;
align-items: center;
gap: var(--rg-espace-2);
flex: 1 1 100%;
margin-top: var(--rg-espace-1);
}
.bilf__libre .form-input { flex: 1 1 0; min-width: 0; padding: var(--rg-espace-1) var(--rg-espace-2); font-size: var(--fs-3xs); }
.bilf__libre i { font-style: normal; font-size: var(--fs-3xs); color: var(--text-muted); }
.bilf__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
gap: var(--rg-espace-2);
}
.bilf__c {
display: flex;
flex-direction: column;
gap: var(--rg-trait-1);
padding: var(--rg-espace-3) var(--rg-espace-3);
border-radius: var(--r-sm);
background: var(--plein-3);
box-shadow: none;
}
.bilf__c b {
font-size: var(--rg-taille-h3);
font-weight: var(--rg-graisse-gras);
line-height: var(--rg-interligne-titre);
color: var(--text);
font-variant-numeric: tabular-nums;
}
.bilf__c b i {
font-style: normal;
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-semi);
color: var(--text-faint);
margin-left: var(--rg-espace-1);
}
.bilf__c span { font-size: var(--fs-3xs); color: var(--text-muted); }
.bilf__c.is-vide b { color: var(--text-faint); }
@media (max-width: 900px) {
.bil-libre__f .form-input { width: 100%; }
.bil-libre { flex-wrap: wrap; }
}
/* =========================================================
BILAN, LA VUE COMPTEURS, LA FICHE RH
========================================================= */
/* --------- LA FICHE RH --------- */
.rhf__form {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--rg-espace-3) var(--rg-espace-3);
}
.rhf__f { display: flex; flex-direction: column; gap: var(--rg-espace-1); }
.rhf__f span {
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: 0;
text-transform: uppercase;
color: var(--text-muted);
}
.bilf__c u {
display: block;
text-decoration: none;
font-size: var(--rg-taille-label-s);
color: var(--text-faint);
margin-top: calc(var(--rg-espace-1) / 2);
}
.bilf__c.is-neg b,
.bilf__c.is-neg b i { color: var(--danger, var(--rg-rose-5)); }
/* Les corrections : chacune porte son motif, sinon un chiffre
corrigé arrive sans savoir d'où il vient. */
.rhf__corr { list-style: none; margin: 0 0 var(--rg-espace-3); padding: 0; }
.rhf__corr li {
display: flex;
align-items: baseline;
gap: var(--rg-espace-3);
padding: var(--rg-espace-2) 0;
border-bottom: var(--rg-trait-1) solid var(--border);
font-size: var(--fs-xs);
}
.rhf__corr li:last-child { border-bottom: 0; }
.rhf__corr-q { color: var(--text-soft); font-weight: var(--rg-graisse-semi); }
.rhf__corr li b { color: var(--edt-equipe-ink); font-weight: var(--rg-graisse-gras); font-variant-numeric: tabular-nums; }
.rhf__corr li b.is-neg { color: var(--edt-client-ink); }
.rhf__corr li em {
font-style: normal;
color: var(--text-muted);
font-size: var(--fs-3xs);
flex: 1;
min-width: 0;
}
.rhf__corr-x {
flex: 0 0 auto;
width: 22px; height: 22px;
border: 0;
border-radius: var(--rg-rayon-0);
background: none;
cursor: pointer;
color: var(--text-faint);
font-size: var(--rg-taille-texte-m);
line-height: var(--rg-interligne-plein);
transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
@media (hover: hover) { .rhf__corr-x:hover { background: var(--accent-soft); color: var(--accent); } }
.rhf__add {
display: grid;
grid-template-columns: 1.2fr 0.7fr 1.6fr auto;
gap: var(--rg-espace-2);
align-items: center;
}
.rhf__add .form-input { min-width: 0; }
/* --------- SEMAINE PAR SEMAINE : LA VÉRIFICATION --------- */
.rhf__sem-wrap { overflow-x: auto; margin-bottom: var(--rg-espace-3); }
.rhf__sem {
width: 100%;
min-width: 460px;
border-collapse: separate;
border-spacing: 0;
font-size: var(--fs-3xs);
}
.rhf__sem th {
padding: var(--rg-espace-2) var(--rg-espace-2);
text-align: left;
font-weight: var(--rg-graisse-gras);
letter-spacing: 0;
text-transform: uppercase;
color: var(--text-muted);
border-bottom: var(--rg-trait-1) solid var(--border-2);
white-space: nowrap;
}
.rhf__sem td {
padding: var(--rg-espace-2) var(--rg-espace-2);
border-bottom: var(--rg-trait-1) solid var(--border);
color: var(--text-soft);
vertical-align: top;
}
.rhf__sem tr:last-child td { border-bottom: 0; }
.rhf__sem th.rhf__n, .rhf__sem td.rhf__n {
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.rhf__e { font-weight: var(--rg-graisse-gras); color: var(--text-faint); }
.rhf__e.is-plus { color: var(--edt-equipe-ink); }
.rhf__e.is-moins { color: var(--edt-client-ink); }
.rhf__d { color: var(--text-muted); }
.rhf__sem tr.is-ecart td { background: var(--surface); }
/* --------- L'EMPLOI DU TEMPS : LE PROJECTEUR ET LES FÉRIÉS --------- */
.notice--projecteur {
display: flex;
align-items: center;
gap: var(--rg-espace-4);
margin-bottom: var(--rg-espace-4);
}
.notice--projecteur .btn-quiet { flex: 0 0 auto; margin-left: auto; }
/* =========================================================
RECOPIER UN EMPLOI DU TEMPS
---------------------------------------------------------
« Plutôt que de refaire deux fois le même à la main,
possibilité de dire : même emploi du temps que… »
========================================================= */
/* Le bouton de la ligne. Au repos il n'existe pas : quatorze
colonnes n'ont pas de place à céder à une icône permanente.
Il apparaît au survol de la LIGNE (pas de la cellule), et au
focus clavier, sinon il serait inatteignable sans souris. */
.edt-who__copie {
position: absolute;
top: 50%;
right: 8px;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
padding: 0;
border: 0;
border-radius: var(--r-sm);
background: var(--plein-2);
box-shadow: none;
color: var(--text-muted);
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: opacity var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.edt-who__copie svg { width: 15px; height: 15px; }
.edt-who__copie:focus-visible {
opacity: 1;
pointer-events: auto;
}
@media (hover: hover) { .edt-row:hover .edt-who__copie {
opacity: 1;
pointer-events: auto;
} }
@media (hover: hover) { .edt-who__copie:hover { color: var(--accent); } }
/* La colonne des noms est en `position: sticky` : elle établit
déjà son propre contexte, il suffit de la rendre relative. */
.edt-table__who { position: sticky; }
.edt-row .edt-table__who { position: sticky; }
/* Pas de `padding-right` au survol : le nom se décalerait à
chaque passage de souris. Le bouton a son propre fond opaque,
il se pose par-dessus sans rien pousser. */
.notice--copie {
display: flex;
align-items: center;
gap: var(--rg-espace-4);
margin-bottom: var(--rg-espace-4);
}
.notice--copie .btn-quiet { flex: 0 0 auto; margin-left: auto; }
/* --- La fiche --- */
.cp-dates {
display: flex;
align-items: flex-end;
gap: var(--rg-espace-3);
flex-wrap: wrap;
}
.cp-dates__f { display: flex; flex-direction: column; gap: var(--rg-espace-1); }
.cp-dates__f span {
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--text-muted);
}
.cp-dates__f .form-input { width: 168px; }
.cp-dates .btn-quiet { margin-bottom: calc(var(--rg-espace-1) / 2); }
/* PIÈGE : `.crewbar__find` est en `flex: 0 1 320px`. Dans la
barre d'un onglet c'est une largeur ; ici, dans une colonne
flex, les 320 px deviennent une HAUTEUR, d'où trois cents
pixels de vide entre le titre et le champ. */
.cp-find { flex: 0 0 auto; width: 100%; min-width: 0; margin-left: 0; }
/* La liste des destinataires défile : à vingt-deux lignes, sans
hauteur bornée, le bouton « Recopier » sortirait de l'écran et
la fiche deviendrait un formulaire qu'on ne finit jamais. */
.cp-liste {
display: flex;
flex-direction: column;
gap: calc(var(--rg-espace-1) / 2);
max-height: 300px;
overflow-y: auto;
margin: 0 calc(var(--rg-espace-1) * -1);
padding: calc(var(--rg-espace-1) / 2) var(--rg-espace-1);
}
.cp-qui {
display: flex;
align-items: center;
gap: var(--rg-espace-3);
padding: var(--rg-espace-2) var(--rg-espace-3);
border-radius: var(--r-sm);
cursor: pointer;
transition: background var(--t-fast) var(--ease);
}
@media (hover: hover) { .cp-qui:hover { background: var(--surface-2); } }
.cp-qui.is-on { background: var(--accent-soft); }
.cp-qui input { position: absolute; opacity: 0; width: 0; height: 0; }
.cp-qui__box {
flex: 0 0 auto;
width: 17px;
height: 17px;
border-radius: var(--rg-rayon-0);
box-shadow: none;
background: var(--plein);
position: relative;
}
.cp-qui.is-on .cp-qui__box {
background: var(--rg-texte-principal);
box-shadow: none;
}
.cp-qui.is-on .cp-qui__box::after {
content: "";
position: absolute;
left: 5px;
top: 2px;
width: 5px;
height: 9px;
border: solid var(--rg-texte-inverse);
border-width: 0 var(--rg-trait-3) var(--rg-trait-3) 0;
transform: rotate(45deg);
}
.cp-qui input:focus-visible + .cp-qui__box { outline: var(--rg-trait-3) solid var(--border-focus); outline-offset: calc(var(--rg-espace-1) / 2); }
.cp-qui__txt { display: flex; flex-direction: column; gap: var(--rg-trait-1); min-width: 0; }
.cp-qui__txt b { font-size: var(--fs-xs); font-weight: var(--rg-graisse-semi); color: var(--text); }
.cp-qui__txt i { font-style: normal; font-size: var(--fs-3xs); color: var(--text-muted); }
/* Ce qui sera écrasé, dit sur la ligne de la personne concernée, pas seulement dans le total du bas. C'est là qu'on décide de
la décocher. */
.cp-qui__avert {
margin-left: auto;
flex: 0 0 auto;
padding-left: var(--rg-espace-3);
font-size: var(--fs-3xs);
color: var(--text-faint);
text-align: right;
}
.cp-qui__avert.is-chaud { color: var(--pop-alarme); font-weight: var(--rg-graisse-semi); }
.cp-modes { display: flex; flex-direction: column; gap: var(--rg-espace-2); }
.cp-mode {
display: flex;
align-items: flex-start;
gap: var(--rg-espace-3);
padding: var(--rg-espace-3) var(--rg-espace-3);
border-radius: var(--r-sm);
background: var(--plein-3);
box-shadow: none;
cursor: pointer;
transition: box-shadow var(--t-fast) var(--ease);
}
.cp-mode.is-on { box-shadow: none; }
.cp-mode input { position: absolute; opacity: 0; width: 0; height: 0; }
.cp-mode__box {
flex: 0 0 auto;
margin-top: calc(var(--rg-espace-1) / 2);
width: 16px;
height: 16px;
border-radius: var(--rg-rayon-0);
box-shadow: none;
position: relative;
}
.cp-mode.is-on .cp-mode__box { box-shadow: none; }
.cp-mode.is-on .cp-mode__box::after {
content: "";
position: absolute;
inset: 4px;
border-radius: var(--rg-rayon-0);
background: var(--accent);
}
.cp-mode input:focus-visible + .cp-mode__box { outline: var(--rg-trait-3) solid var(--border-focus); outline-offset: calc(var(--rg-espace-1) / 2); }
.cp-mode__txt { display: flex; flex-direction: column; gap: calc(var(--rg-espace-1) / 2); }
.cp-mode__txt b { font-size: var(--fs-xs); font-weight: var(--rg-graisse-semi); color: var(--text); }
.cp-mode__txt i { font-style: normal; font-size: var(--fs-3xs); line-height: var(--rg-interligne-texte); color: var(--text-muted); }
/* Le compte, juste au-dessus du bouton : la dernière chose lue
avant de valider doit être ce qui va se passer. */
.cp-bilan {
margin: var(--rg-espace-1) 0 0;
padding: var(--rg-espace-3) var(--rg-espace-4);
border-radius: var(--r-sm);
background: var(--surface-2);
font-size: var(--fs-3xs);
line-height: var(--rg-interligne-texte);
color: var(--text-soft);
}
.cp-bilan span { display: block; margin-top: var(--rg-espace-1); color: var(--text-faint); }
.cp-bilan.is-chaud span { color: var(--text-soft); }
.cp-bilan.is-chaud {
background: color-mix(in srgb, var(--pop-alarme) 12%, transparent);
box-shadow: none;
color: var(--text);
}
/* La ligne qu'on vient vérifier : surlignée, pas isolée, le
reste du tableau garde son sens de comparaison. */
.edt-row.is-projecteur .edt-table__who {
background: var(--accent-soft);
box-shadow: none;
}
.edt-row.is-projecteur td { background: var(--surface-2); }
/* Un férié se marque en tête de colonne, comme le jour même.
Discret : c'est une information de fond, pas une alerte. */
.edt-table__day.is-ferie .edt-table__num {
color: var(--edt-conge-ink);
}
.edt-table__day.is-ferie .edt-table__dow::after {
content: "•";
margin-left: var(--rg-espace-1);
color: var(--edt-conge-ink);
}
@media (max-width: 900px) {
.rhf__add { grid-template-columns: 1fr 1fr; }
}
/* =========================================================
BILAN, LA LISTE DE DOSSIERS
---------------------------------------------------------
Lorette, le 2026-09-04 : « fais des cartes horizontales qui
défilent en liste ». Une grille de cartes hautes se balaie en
zigzag ; une liste se parcourt d'un seul mouvement, et chaque
anneau tombe toujours à la même abscisse, donc une colonne
se lit d'un bout à l'autre sans effort.
Et : « la couleur de la carte dépend de sa catégorie ». Le
filet de gauche porte donc le RATTACHEMENT, plus l'état du
dossier. Celui-ci est passé sur une pastille à côté du nom :
elle est rare, donc elle se voit, alors qu'un filet vert sur
dix-huit cartes ne disait plus rien.
========================================================= */
.bil-tri {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
flex: 0 0 auto;
}
.bil-tri span {
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--text-muted);
white-space: nowrap;
}
.bil-tri .form-input { width: auto; min-width: 210px; }
.bil-compte {
flex: 0 0 auto;
font-size: var(--fs-3xs);
color: var(--text-faint);
}
/* Le chiffre qui appelle une décision se distingue des mesures. */
.bil-stat.is-chaud { box-shadow: none; }
.bil-stat.is-chaud .bil-stat__v { color: var(--edt-conge-ink); }
/* --------- LA LÉGENDE DES RATTACHEMENTS, QUI FILTRE --------- */
.ratt {
display: flex;
flex-wrap: wrap;
gap: var(--rg-espace-2);
margin: 0 0 var(--rg-espace-4);
}
.ratt__c {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
padding: var(--rg-espace-2) var(--rg-espace-3);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--rg-rayon-0);
background: transparent;
cursor: pointer;
font: inherit;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
color: var(--text-soft);
transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
background var(--t-fast) var(--ease);
}
.ratt__c i {
font-style: normal;
font-weight: var(--rg-graisse-gras);
color: var(--text-faint);
font-variant-numeric: tabular-nums;
}
.ratt__p {
width: 9px;
height: 9px;
border-radius: var(--rg-rayon-0);
background: var(--ratt-c, var(--border-2));
}
@media (hover: hover) { .ratt__c:hover { border-color: var(--border-focus); color: var(--text); } }
.ratt__c.is-on {
border-color: var(--ratt-c, var(--accent));
background: color-mix(in srgb, var(--ratt-c, var(--accent)) 12%, transparent);
color: var(--text);
}
.ratt__c.is-on i { color: var(--text-soft); }
/* Les classes `.ratt__c--` ont disparu avec le champ `ton` :
la couleur du carré vient maintenant de la donnée, posée en
ligne par bilRattsHtml(). */
/* L'assignation, en lecture seule dans le dossier RH : elle
s'édite sur la fiche de la personne, et à un seul endroit. */
.rhf__f--lecture > span { display: block; }
.rhf__ratt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rg-espace-2); }
.rhf__ratt em {
font-style: normal;
font-size: var(--fs-3xs);
color: var(--text-faint);
}
/* --------- LA CARTE EN LIGNE --------- */
.rhc-liste {
display: flex;
flex-direction: column;
gap: var(--rg-espace-3);
margin-bottom: var(--rg-espace-5);
}
.rhc {
display: flex;
align-items: center;
gap: var(--rg-espace-5);
padding: var(--rg-espace-4) var(--rg-espace-5);
border-radius: var(--r-md);
background: var(--plein);
box-shadow: none;
border-left: var(--rg-trait-repere) solid var(--rhc-c, var(--border-2));
cursor: pointer;
transition: box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
@media (hover: hover) { .rhc:hover {
box-shadow: none;
background: var(--plein-2);
} }
.rhc:focus-visible { outline: var(--rg-trait-3) solid var(--border-focus); outline-offset: calc(var(--rg-espace-1) / 2); }
/* La teinte de la carte du Bilan vient désormais des couleurs de
Lorette, comme la pastille : un seul code couleur dans toute
l'entreprise, celui de son tableau. */
.rhc[data-ratt="f4"] { --rhc-c: var(--rg-piste-rouge); }
.rhc[data-ratt="fr"] { --rhc-c: var(--rg-marine-1); }
.rhc[data-ratt="lmp3"] { --rhc-c: var(--rg-metier-jaune); }
.rhc[data-ratt="lmp2"] { --rhc-c: var(--rg-piste-vert); }
.rhc[data-ratt="commun"] { --rhc-c: var(--rg-metier-magenta); }
.rhc[data-ratt="simulateur"] { --rhc-c: var(--rg-metier-violet); }
/* LA PASTILLE D'ASSIGNATION, 2026-09-07, deuxième version.
Le bloc de couleur plein ne lui plaisait pas : « je veux
exactement le même aspect que » les tags de circuit, mais dans
la couleur de l'assignation. C'est donc le contour de
`.track-tag`, à la lettre, fond teinté à 8 %, filet à 20 %,
texte de la couleur, la couleur venant de --rattp-c.
--rattp-t est le texte, et ce n'est PAS --rattp-c : le jaune
vif de LMP3 se lit sur un fond sombre et disparaît sur un fond
blanc. Chaque assignation a donc sa nuance foncée en thème
clair, et reprend sa couleur pleine en sombre. Sans ce
dédoublement, une pastille sur deux serait illisible la moitié
du temps. */
.rattp {
display: inline-flex;
align-items: center;
align-self: flex-start;
padding: var(--rg-espace-1) var(--rg-espace-3);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
letter-spacing: 0;
text-transform: uppercase;
color: var(--rattp-t, var(--rattp-c, var(--rg-metier-magenta)));
background: color-mix(in srgb, var(--rattp-c, var(--rg-metier-magenta)) 8%, transparent);
border: var(--rg-trait-1) solid color-mix(in srgb, var(--rattp-c, var(--rg-metier-magenta)) 20%, transparent);
border-radius: var(--r-pill);
white-space: nowrap;
}
/* Thème CLAIR : la nuance foncée, celle qui se lit sur du blanc. */
[data-ratt="f4"] { --rattp-t: var(--rg-piste-rouge); }
[data-ratt="fr"] { --rattp-t: var(--rg-marine-1); }
[data-ratt="lmp3"] { --rattp-t: var(--rg-metier-jaune-fonce); }
[data-ratt="lmp2"] { --rattp-t: var(--rg-metier-vert-fonce); }
[data-ratt="commun"] { --rattp-t: var(--rg-metier-magenta-fonce); }
[data-ratt="simulateur"] { --rattp-t: var(--rg-metier-magenta-fonce); }
/* Thème SOMBRE : la couleur pleine passe très bien en texte. */
:root[data-theme="dark"] [data-ratt] { --rattp-t: var(--rattp-c); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) [data-ratt] { --rattp-t: var(--rattp-c); }
}
/* Le même objet en bouton, dans la fiche : choisi, il s'appuie
sur un fond plus franc et un filet plein, sinon rien ne
distingue celui qu'on a pris des cinq autres. */
.ratt-chips { display: flex; flex-wrap: wrap; gap: var(--rg-espace-2); }
.rattp--choix {
cursor: pointer;
padding: var(--rg-espace-1) var(--rg-espace-3);
color: var(--text-muted);
background: transparent;
border-color: var(--border);
transition: background var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease),
color var(--t-fast) var(--ease);
}
@media (hover: hover) { .rattp--choix:hover { border-color: color-mix(in srgb, var(--rattp-c) 45%, transparent); } }
.rattp--choix.is-selected {
color: var(--rattp-t, var(--rattp-c));
background: color-mix(in srgb, var(--rattp-c) 14%, transparent);
border-color: var(--rattp-c);
}
/* Sur la carte de l'organigramme, elle se pose sous le métier. */
.ocard__r { margin: var(--rg-espace-2) 0 0; }
/* Sur la carte de l'annuaire, sous le nom. */
.crew-card__idtxt .rattp { margin-top: var(--rg-espace-2); }
.fdp__ratt { margin: var(--rg-espace-3) 0 0; }
/* QUI, largeur fixe, pour que les anneaux tombent tous à la
même abscisse d'une carte à l'autre. C'est toute la raison de
passer en liste : sans alignement, on ne compare rien. */
.rhc__qui {
flex: 0 0 250px;
min-width: 0;
}
.rhc__type {
margin: 0 0 var(--rg-espace-1);
font-family: var(--font-mono);
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--rhc-c, var(--text-soft));
}
.rhc__type i { font-style: normal; color: var(--text-faint); }
.rhc__type i::before { content: "·"; margin: 0 var(--rg-espace-1); }
.rhc__nom {
display: flex;
align-items: center;
gap: var(--rg-espace-2);
flex-wrap: wrap;
margin: 0;
font-size: var(--fs-sm);
font-weight: var(--rg-graisse-gras);
color: var(--text);
}
.rhc__role {
margin: var(--rg-trait-1) 0 0;
font-size: var(--fs-3xs);
color: var(--text-muted);
}
.rhc__role em { font-style: normal; color: var(--text-faint); }
.rhc__contrat {
margin: var(--rg-espace-1) 0 0;
font-size: var(--fs-3xs);
color: var(--text-faint);
}
.rhc__badge {
padding: calc(var(--rg-espace-1) / 2) var(--rg-espace-2);
border-radius: var(--rg-rayon-0);
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-gras);
white-space: nowrap;
}
.rhc__badge--rouge { background: var(--edt-client-3); color: var(--edt-client-ink); }
.rhc__badge--ambre {
background: color-mix(in srgb, var(--edt-conge-ink) 18%, transparent);
color: var(--edt-conge-ink);
}
.rhc__evt {
display: inline-block;
margin-left: var(--rg-espace-2);
padding: var(--rg-trait-1) var(--rg-espace-2);
border-radius: var(--rg-rayon-0);
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-gras);
}
.rhc__evt--in { background: var(--edt-equipe-3); color: var(--edt-equipe-ink); }
.rhc__evt--out { background: var(--edt-client-3); color: var(--edt-client-ink); }
/* LES ACTIONS, largeur fixe elles aussi, à droite. */
.rhc__act {
flex: 0 0 168px;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--rg-espace-1);
margin-left: auto;
}
.rhc__act .btn-quiet { padding-right: 0; }
.rhc__ouvrir {
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
color: var(--text-faint);
transition: color var(--t-fast) var(--ease);
}
@media (hover: hover) { .rhc:hover .rhc__ouvrir { color: var(--accent); } }
@media (max-width: 1180px) {
.rhc { flex-wrap: wrap; gap: var(--rg-espace-4) var(--rg-espace-4); }
.rhc__qui { flex: 1 1 240px; }
.rhc__act { flex: 0 0 auto; flex-direction: row; align-items: center; gap: var(--rg-espace-4); }
}
@media (max-width: 560px) {
.bil-tri .form-input { min-width: 0; }
}
/* =========================================================
LES DONUTS DE LA CARTE
---------------------------------------------------------
Un anneau ne dit quelque chose que s'il montre une PART :
les congés sur le droit, la récup sur l'acquis, les heures
supp sur les heures dues. L'anneau de fond reste visible à
zéro, sinon une case vide passe pour un bug.
Aucune couleur nouvelle : les six teintes sont celles des
familles de l'emploi du temps, déjà validées clair et sombre.
========================================================= */
/* En ligne, et non plus en grille de trois : chaque anneau garde
la même abscisse d'une carte à l'autre, donc une colonne se lit
verticalement dans toute la liste. */
.dnt-grid {
display: flex;
flex: 1 1 auto;
justify-content: space-between;
gap: var(--rg-espace-3);
min-width: 0;
}
.dnt-grid > .dnt { flex: 1 1 0; min-width: 74px; }
.dnt {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--rg-espace-1);
min-width: 0;
}
.dnt__rond {
position: relative;
width: 54px;
height: 54px;
}
.dnt__rond svg { width: 100%; height: 100%; display: block; }
.dnt__fond { stroke: var(--border); }
.dnt__arc { stroke: var(--dnt-c); transition: stroke-dashoffset var(--t-slow) var(--ease); }
.dnt__rond b {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--rg-taille-texte-m);
font-weight: var(--rg-graisse-gras);
line-height: var(--rg-interligne-plein);
color: var(--text);
font-variant-numeric: tabular-nums;
}
.dnt__rond b i {
font-style: normal;
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-semi);
color: var(--text-faint);
margin-left: var(--rg-trait-1);
align-self: center;
}
.dnt__nom {
display: flex;
align-items: flex-start;
justify-content: center;
min-height: 24px;
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-semi);
line-height: var(--rg-interligne-court);
color: var(--text-soft);
text-align: center;
}
/* Le sous-titre porte le DÉNOMINATEUR de l'anneau, « sur 113 j
possibles ». Le rogner, c'est retirer ce qui rend le
pourcentage lisible : on lui laisse donc deux lignes, et une
hauteur réservée pour que les cartes restent alignées. */
.dnt__sous {
text-decoration: none;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
min-height: 22px;
font-size: var(--rg-taille-label-s);
line-height: var(--rg-interligne-court);
color: var(--text-faint);
text-align: center;
max-width: 100%;
overflow: hidden;
}
/* La teinte se pose une fois, sur le donut ; l'arc la lit. Un
compteur à découvert reprend la main dessus : anneau plein et
couleur d'alarme, on ne dessine pas un manque en creux. */
.dnt--p1 { --dnt-c: var(--pop-1); }
.dnt--p2 { --dnt-c: var(--pop-2); }
.dnt--p3 { --dnt-c: var(--pop-3); }
.dnt--p4 { --dnt-c: var(--pop-4); }
.dnt--p5 { --dnt-c: var(--pop-5); }
.dnt--p6 { --dnt-c: var(--pop-6); }
.dnt.is-neg { --dnt-c: var(--pop-alarme); }
.dnt.is-neg .dnt__rond b { color: var(--pop-alarme); }
/* `is-neg` et `is-alerte` prennent la même couleur mais ne
disent pas la même chose, et l'anneau le montre : un
DÉCOUVERT remplit le tour complet (part forcée à 1), une
RÉSERVE DÉPASSÉE garde sa part réelle. Dans les deux cas la
couleur dit « ce chiffre appelle une décision » ; c'est le
sous-titre qui dit laquelle. */
.dnt.is-alerte { --dnt-c: var(--pop-alarme); }
.dnt.is-alerte .dnt__rond b { color: var(--pop-alarme); }
@media (max-width: 720px) {
.dnt-grid { flex-wrap: wrap; }
.dnt-grid > .dnt { flex: 1 1 30%; }
}
/* =========================================================
SON EMPLOI DU TEMPS, DANS LE DOSSIER
---------------------------------------------------------
Une vue FIXE, mois par mois, en lecture seule : le détail
sous les yeux en même temps que les chiffres. Les blocs
réutilisent `.edt-demi--`, donc les couleurs sont
celles de l'emploi du temps, au pixel près.
========================================================= */
.bcal { display: flex; flex-direction: column; gap: var(--rg-espace-5); }
.bcal__titre {
margin: 0 0 var(--rg-espace-2);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--text-muted);
}
.bcal__dows,
.bcal__grille {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: var(--rg-espace-1);
}
.bcal__dows {
margin-bottom: var(--rg-espace-1);
}
.bcal__dows span {
text-align: center;
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
color: var(--text-faint);
}
.bcal__j {
min-height: 56px;
padding: var(--rg-espace-1) var(--rg-espace-1) var(--rg-espace-1);
border-radius: var(--r-sm);
background: var(--plein-3);
box-shadow: none;
}
.bcal__j.is-weekend { background: var(--plein-2); }
.bcal__j.is-hors {
background: transparent;
box-shadow: none;
}
.bcal__n {
display: block;
margin-bottom: var(--rg-espace-1);
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-gras);
color: var(--text-faint);
font-variant-numeric: tabular-nums;
}
.bcal__j.is-ferie { box-shadow: none; }
.bcal__j.is-ferie .bcal__n { color: var(--edt-conge-ink); }
/* Les demi-journées sont un peu plus basses qu'en quinzaine :
une case de calendrier est carrée, pas une colonne. */
.bcal__j .edt-demi.is-half { height: 15px; }
.bcal__j .edt-demi.is-full { height: 32px; }
.bcal__j .edt-demi { font-size: var(--rg-taille-label-s); }
.bcal__j .edt-demi b { font-size: var(--rg-taille-label-s); }
.bcal__j .edt-demi--vide {
background: transparent;
box-shadow: none;
}
@media (max-width: 640px) {
.bcal__j { min-height: 46px; }
.bcal__j .edt-demi__txt { display: none; }
}
/* =========================================================
LE PONT, POSER DEPUIS LE BILAN
---------------------------------------------------------
Lorette : « si elle voit le donut de 4 j de récup à prendre,
il faut qu'elle puisse direct les caler dans son emploi du
temps ». L'anneau devient donc un bouton, et le calendrier
du dossier, le même, pas un second, passe en mode pose.
========================================================= */
/* Un anneau actionnable se signale au survol, pas au repos :
six anneaux qui appellent tous au clic, ce serait six fois
rien. */
.dnt--actif {
border: 0;
padding: 0;
background: none;
font: inherit;
cursor: pointer;
}
.dnt--actif .dnt__rond::after {
content: "";
position: absolute;
inset: -5px;
border-radius: var(--rg-rayon-0);
box-shadow: none;
transition: box-shadow var(--t-fast) var(--ease);
}
.dnt--actif:focus-visible .dnt__rond::after {
box-shadow: none;
}
@media (hover: hover) { .dnt--actif:hover .dnt__rond::after {
box-shadow: none;
} }
.dnt--actif:focus-visible { outline: none; }
/* « Poser → » PREND LA PLACE du sous-titre au survol, il ne
s'ajoute pas en dessous : une ligne invisible sous chacun des
six anneaux, c'est 14 px de plus sur toutes les cartes de la
liste pour un texte que personne ne voit. Le sous-titre a déjà
sa hauteur réservée, on s'y superpose. */
.dnt__poser {
position: absolute;
left: 0; right: 0; bottom: 0;
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-gras);
color: var(--dnt-c);
opacity: 0;
pointer-events: none;
transition: opacity var(--t-fast) var(--ease);
}
.dnt--actif:focus-visible .dnt__poser { opacity: 1; }
@media (hover: hover) { .dnt--actif:hover .dnt__poser { opacity: 1; } }
.dnt--actif:focus-visible .dnt__sous { opacity: 0; }
@media (hover: hover) { .dnt--actif:hover .dnt__sous { opacity: 0; } }
.dnt__sous { transition: opacity var(--t-fast) var(--ease); }
.pose__ouvrir { display: flex; gap: var(--rg-espace-2); flex-wrap: wrap; margin-bottom: var(--rg-espace-4); }
/* --------- LA BARRE DE POSE --------- */
.pose {
display: flex;
align-items: center;
gap: var(--rg-espace-4);
flex-wrap: wrap;
padding: var(--rg-espace-3) var(--rg-espace-4);
margin-bottom: var(--rg-espace-4);
border-radius: var(--r-md);
background: var(--accent-soft);
box-shadow: none;
}
.pose__t { display: flex; flex-direction: column; gap: calc(var(--rg-espace-1) / 2); min-width: 0; }
.pose__t strong { font-size: var(--fs-xs); color: var(--text); }
.pose__t span { font-size: var(--fs-3xs); color: var(--text-muted); }
.pose__n { display: flex; align-items: center; gap: var(--rg-espace-4); flex-wrap: wrap; }
.pose__k {
font-size: var(--fs-3xs);
color: var(--text-muted);
white-space: nowrap;
}
.pose__k b {
font-size: var(--fs-sm);
font-weight: var(--rg-graisse-gras);
color: var(--text);
font-variant-numeric: tabular-nums;
}
.pose__k.is-neg b { color: var(--pop-alarme); }
.pose__k.is-warn { color: var(--edt-conge-ink); }
.pose__k.is-warn b { color: var(--edt-conge-ink); }
.pose__b { display: flex; gap: var(--rg-espace-2); margin-left: auto; }
/* --------- LE CALENDRIER EN MODE POSE --------- */
/* Ce qui n'est pas cochable s'efface : un OFF de week-end n'est
pas une récup, un férié est déjà neutralisé. Le dire en
grisant vaut mieux qu'un clic qui ne fait rien. */
.bcal.is-pose .bcal__j.is-fige { opacity: 0.45; }
.bcal.is-pose .bcal__j.is-posable .edt-demi { cursor: pointer; }
@media (hover: hover) { .bcal.is-pose .bcal__j.is-posable .edt-demi:hover {
box-shadow: none;
} }
.bcal__n--btn {
border: 0;
padding: 0;
background: none;
font: inherit;
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-gras);
color: var(--text-faint);
cursor: pointer;
border-radius: var(--rg-rayon-0);
transition: color var(--t-fast) var(--ease);
}
@media (hover: hover) { .bcal__n--btn:hover { color: var(--accent); } }
/* La case cochée montre CE QU'ON VA ÉCRIRE. Trait plein, pas
pointillé : ce n'est pas un brouillon, c'est un choix qu'il
reste à valider. */
.bcal__ok {
background: var(--accent-soft);
box-shadow: none;
color: var(--accent);
font-weight: var(--rg-graisse-gras);
}
/* Une case cochée qui recouvrait déjà une saisie le dit : on ne
fait pas disparaître le travail d'un responsable en silence. */
.bcal__ok.is-remplace {
background: color-mix(in srgb, var(--edt-conge-ink) 20%, transparent);
box-shadow: none;
color: var(--edt-conge-ink);
}
.bcal.is-pose .bcal__libre {
background: transparent;
box-shadow: none;
}
/* =========================================================
GP, ROADBOOK
---------------------------------------------------------
Le Timetable dit ce qu'on fait sur le circuit ; le Roadbook
dit comment on y va. Deux documents, un seul week-end : la
page reprend donc la grammaire du projet (hero mince, barre
de commande, blocs numérotés, fiche à droite) sans inventer
de forme nouvelle.
========================================================= */
.rb-retour {
display: inline-block;
margin-bottom: var(--rg-espace-3);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
color: var(--text-muted);
text-decoration: none;
transition: color var(--t-fast) var(--ease);
}
@media (hover: hover) { .rb-retour:hover { color: var(--accent); } }
/* --------- LA LISTE DES WEEK-ENDS --------- */
.rbl { display: flex; flex-direction: column; gap: var(--rg-espace-2); margin-bottom: var(--rg-espace-5); }
.rbl__i {
display: flex;
align-items: center;
gap: var(--rg-espace-5);
padding: var(--rg-espace-4) var(--rg-espace-5);
border-radius: var(--r-md);
background: var(--plein);
box-shadow: none;
border-left: var(--rg-trait-repere) solid var(--rbl-c, var(--border-2));
text-decoration: none;
transition: box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
@media (hover: hover) { .rbl__i:hover {
box-shadow: none;
background: var(--plein-2);
} }
/* L'état d'un roadbook se voit SANS l'ouvrir : sinon on part en
week-end sans savoir qu'il manque un vol. */
.rbl__i--pret { --rbl-c: var(--pop-3); }
.rbl__i--manque { --rbl-c: var(--pop-1); }
.rbl__i--vide { --rbl-c: var(--border-2); }
/* La photo du circuit, en vignette : on reconnait le week-end avant de lire. */
.rbl__cover {
flex: 0 0 auto;
width: 92px;
height: 58px;
border-radius: var(--r-sm);
background-color: var(--surface-2);
background-size: cover;
background-position: center;
}
.rbl__cover--vide {
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: var(--fs-2xs);
font-weight: var(--d-code-w);
color: var(--text-faint);
}
.rbl__d { flex: 1 1 auto; min-width: 0; }
.rbl__meta {
display: flex;
align-items: center;
gap: var(--rg-espace-2);
margin: 0 0 calc(var(--rg-espace-1) / 2);
font-family: var(--font-mono);
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--text-faint);
}
.rbl__meta span { color: var(--rbl-c, var(--text-soft)); }
.rbl__nom { margin: 0; font-size: var(--fs-sm); font-weight: var(--rg-graisse-gras); color: var(--text); }
.rbl__lieu { margin: var(--rg-trait-1) 0 0; font-size: var(--fs-3xs); color: var(--text-muted); }
.rbl__c { display: flex; gap: var(--rg-espace-4); flex: 0 0 auto; }
.rbl__n { font-size: var(--fs-3xs); color: var(--text-muted); white-space: nowrap; }
.rbl__n b {
display: block;
font-size: var(--fs-sm);
font-weight: var(--rg-graisse-gras);
color: var(--text);
font-variant-numeric: tabular-nums;
}
.rbl__etat {
flex: 0 0 auto;
min-width: 170px;
text-align: right;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
color: var(--text-muted);
}
.rbl__etat--pret { color: var(--pop-3); }
.rbl__etat--manque { color: var(--pop-1); }
/* --------- L'ENCART « YOU » --------- */
/* Le « commun + perso » demandé par Lorette tient dans cet
encart : sans lui, chacun devrait chercher son nom dans trois
listes pour savoir à quelle heure il décolle. */
.rbv {
padding: var(--rg-espace-4) var(--rg-espace-5) var(--rg-espace-4);
margin-bottom: var(--rg-espace-5);
border-radius: var(--r-md);
background: var(--accent-soft);
box-shadow: none;
}
.rbv__h {
margin: 0 0 var(--rg-espace-3);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--accent);
}
.rbv__g {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--rg-espace-4);
}
.rbv__b { display: flex; flex-direction: column; gap: var(--rg-trait-1); min-width: 0; }
.rbv__t {
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
color: var(--text-muted);
}
.rbv__b b {
font-size: var(--fs-sm);
font-weight: var(--rg-graisse-gras);
color: var(--text);
}
.rbv__b em { font-style: normal; font-size: var(--fs-3xs); color: var(--text-faint); }
.rbv__b.is-vide b { color: var(--text-faint); font-weight: var(--rg-graisse-moyen); }
/* --------- LES BLOCS --------- */
.rb-bloc {
padding: var(--rg-espace-4) var(--rg-espace-5) var(--rg-espace-5);
margin-bottom: var(--rg-espace-4);
border-radius: var(--r-md);
background: var(--plein);
box-shadow: none;
}
.rb-bloc__h { display: flex; align-items: center; gap: var(--rg-espace-3); margin-bottom: var(--rg-espace-2); }
.rb-bloc__t {
margin: 0;
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: 0;
text-transform: uppercase;
color: var(--text-muted);
}
.rb-bloc__n {
padding: var(--rg-trait-1) var(--rg-espace-2);
border-radius: var(--rg-rayon-0);
background: var(--plein-3);
box-shadow: none;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
color: var(--text-soft);
}
.rb-bloc__h .btn-secondary { margin-left: auto; }
/* Deux boutons dans le même en-tête : sans ça, `margin-left:
auto` sur les deux répartit l'espace entre eux et le premier
se retrouve au milieu de la ligne. */
.rb-bloc__h .btn-secondary ~ .btn-secondary { margin-left: var(--rg-espace-2); }
.rb-bloc__aide {
margin: 0 0 var(--rg-espace-4);
font-size: var(--fs-3xs);
line-height: var(--rg-interligne-texte);
color: var(--text-muted);
max-width: 80ch;
}
.rb-bloc__aide b { color: var(--text-soft); }
/* --------- ① QUI PART --------- */
.rbe { display: flex; flex-direction: column; }
.rbe__hd, .rbe__l {
display: grid;
grid-template-columns: minmax(180px, 1.4fr) 1fr 1fr 1fr 30px;
gap: var(--rg-espace-4);
align-items: center;
}
.rbe__hd {
padding: 0 0 var(--rg-espace-2);
border-bottom: var(--rg-trait-1) solid var(--border-2);
}
.rbe__hd span {
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--text-muted);
}
.rbe__l { padding: var(--rg-espace-2) 0; border-bottom: var(--rg-trait-1) solid var(--border); }
.rbe__l:last-child { border-bottom: 0; }
.rbe__q { display: flex; flex-direction: column; min-width: 0; }
.rbe__nom { font-size: var(--fs-xs); font-weight: var(--rg-graisse-gras); color: var(--text); }
.rbe__main {
font-style: normal;
margin-left: var(--rg-espace-2);
padding: var(--rg-trait-1) var(--rg-espace-2);
border-radius: var(--rg-rayon-0);
background: var(--plein-3);
box-shadow: none;
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-gras);
color: var(--text-faint);
}
.rbe__role { font-size: var(--fs-3xs); color: var(--text-muted); }
.rbe__c { min-width: 0; font-size: var(--fs-3xs); }
.rbe__c b {
display: block;
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-semi);
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rbe__c em { font-style: normal; color: var(--text-faint); }
.rbe__c.is-vide { color: var(--text-faint); }
.rbe__x {
width: 26px; height: 26px;
border: 0;
border-radius: var(--rg-rayon-0);
background: none;
cursor: pointer;
color: var(--text-faint);
font-size: var(--rg-taille-texte-l);
line-height: var(--rg-interligne-plein);
transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
@media (hover: hover) { .rbe__x:hover { background: var(--accent-soft); color: var(--accent); } }
/* --------- ② LES TRAJETS --------- */
.rbt { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--rg-espace-3); }
.rbt__c {
display: flex;
flex-direction: column;
gap: var(--rg-espace-2);
padding: var(--rg-espace-4) var(--rg-espace-4);
border-radius: var(--r-md);
background: var(--plein-3);
box-shadow: none;
border-left: var(--rg-trait-4) solid var(--rbt-c, var(--border-2));
cursor: pointer;
transition: box-shadow var(--t-fast) var(--ease);
}
.rbt__c:focus-visible {
box-shadow: none;
outline: none;
}
@media (hover: hover) { .rbt__c:hover {
box-shadow: none;
outline: none;
} }
/* Aller et retour ne se confondent pas : c'est la première chose
qu'on cherche dans un roadbook. */
.rbt__c--aller { --rbt-c: var(--pop-6); }
.rbt__c--retour { --rbt-c: var(--pop-5); }
.rbt__hd { display: flex; align-items: center; gap: var(--rg-espace-2); }
.rbt__sens {
padding: var(--rg-trait-1) var(--rg-espace-2);
border-radius: var(--rg-rayon-0);
background: color-mix(in srgb, var(--rbt-c) 18%, transparent);
color: var(--rbt-c);
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-extra);
letter-spacing: var(--rg-label-m-espacement);
}
.rbt__mode { font-size: var(--fs-3xs); color: var(--text-muted); }
.rbt__qui {
margin-left: auto;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
color: var(--text-soft);
}
.rbt__qui.is-vide { color: var(--pop-1); }
.rbt__n { margin: 0; font-size: var(--fs-sm); font-weight: var(--rg-graisse-gras); color: var(--text); }
.rbt__h { display: flex; align-items: center; gap: var(--rg-espace-3); }
.rbt__h span { display: flex; flex-direction: column; }
.rbt__h b {
font-size: var(--rg-taille-texte-l);
font-weight: var(--rg-graisse-gras);
color: var(--text);
font-variant-numeric: tabular-nums;
line-height: var(--rg-interligne-titre);
}
.rbt__h em { font-style: normal; font-size: var(--fs-3xs); color: var(--text-muted); }
.rbt__h i { font-style: normal; color: var(--text-faint); }
.rbt__ref, .rbt__note { margin: 0; font-size: var(--fs-3xs); color: var(--text-muted); }
.rbt__ref { font-family: var(--font-mono); }
/* --------- ③ HÔTEL & CHAMBRES --------- */
.rbh {
padding: var(--rg-espace-4) var(--rg-espace-4) var(--rg-espace-4);
margin-bottom: var(--rg-espace-3);
border-radius: var(--r-md);
background: var(--plein-3);
box-shadow: none;
}
.rbh:last-child { margin-bottom: 0; }
.rbh__hd {
display: flex;
align-items: flex-start;
gap: var(--rg-espace-4);
cursor: pointer;
padding-bottom: var(--rg-espace-3);
}
.rbh__hd:focus-visible { outline: var(--rg-trait-3) solid var(--border-focus); outline-offset: var(--rg-espace-1); }
.rbh__n { margin: 0; font-size: var(--fs-sm); font-weight: var(--rg-graisse-gras); color: var(--text); }
.rbh__a { margin: calc(var(--rg-espace-1) / 2) 0 0; font-size: var(--fs-3xs); color: var(--text-muted); }
.rbh__m {
margin-left: auto;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: calc(var(--rg-espace-1) / 2);
font-size: var(--fs-3xs);
color: var(--text-muted);
white-space: nowrap;
}
.rbh__ch { display: flex; flex-wrap: wrap; gap: var(--rg-espace-2); }
.rbch {
display: flex;
flex-direction: column;
gap: var(--rg-trait-1);
min-width: 140px;
padding: var(--rg-espace-2) var(--rg-espace-3);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--r-sm);
background: var(--plein);
cursor: pointer;
font: inherit;
text-align: left;
transition: border-color var(--t-fast) var(--ease);
}
@media (hover: hover) { .rbch:hover { border-color: var(--border-focus); } }
.rbch__n { font-size: var(--fs-xs); font-weight: var(--rg-graisse-gras); color: var(--text); }
.rbch__q { font-size: var(--fs-3xs); color: var(--text-muted); }
.rbch--plus {
align-items: center;
justify-content: center;
min-width: 92px;
border-style: dashed;
color: var(--text-muted);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
}
@media (hover: hover) { .rbch--plus:hover { color: var(--accent); } }
.rbh__reste {
margin: var(--rg-espace-3) 0 0;
font-size: var(--fs-3xs);
color: var(--pop-1);
}
.rbh__reste b { font-weight: var(--rg-graisse-gras); }
/* --------- ④ À EMPORTER --------- */
.rbp { list-style: none; margin: 0; padding: 0; }
.rbp__l {
display: flex;
align-items: center;
gap: var(--rg-espace-3);
padding: var(--rg-espace-2) 0;
border-bottom: var(--rg-trait-1) solid var(--border);
}
.rbp__l:last-child { border-bottom: 0; }
.rbp__k {
flex: 0 0 auto;
width: 20px; height: 20px;
border: var(--rg-trait-2) solid var(--border-2);
border-radius: var(--rg-rayon-0);
background: none;
cursor: pointer;
color: var(--rg-neutre-blanc);
font-size: var(--rg-taille-label-m);
line-height: var(--rg-interligne-plein);
transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
@media (hover: hover) { .rbp__k:hover { border-color: var(--accent); } }
.rbp__k.is-off { border-style: dashed; cursor: default; opacity: 0.5; }
.rbp__l.is-ok .rbp__k { background: var(--pop-3); border-color: var(--pop-3); }
.rbp__l.is-ok .rbp__t { color: var(--text-faint); text-decoration: line-through; }
.rbp__d { flex: 1 1 auto; min-width: 0; cursor: pointer; }
.rbp__t { display: block; font-size: var(--fs-xs); font-weight: var(--rg-graisse-semi); color: var(--text); }
.rbp__n { display: block; font-size: var(--fs-3xs); color: var(--text-muted); }
.rbp__pour {
flex: 0 0 auto;
max-width: 260px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--fs-3xs);
color: var(--text-faint);
}
.rbp__pour.is-cible { color: var(--pop-6); }
/* --------- LA FICHE --------- */
.rbf__aide {
text-decoration: none;
font-size: var(--fs-3xs);
color: var(--text-faint);
}
.rbq { display: flex; flex-direction: column; gap: var(--rg-espace-1); }
.rbq__l {
display: flex;
align-items: center;
gap: var(--rg-espace-3);
padding: var(--rg-espace-2) var(--rg-espace-3);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--r-sm);
background: none;
cursor: pointer;
font: inherit;
text-align: left;
width: 100%;
transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
@media (hover: hover) { .rbq__l:hover { border-color: var(--border-focus); } }
.rbq__l.is-on { border-color: var(--accent); background: var(--accent-soft); }
.rbq__l input { accent-color: var(--accent); }
.rbq__n { font-size: var(--fs-xs); font-weight: var(--rg-graisse-semi); color: var(--text); }
.rbq__r { margin-left: auto; font-size: var(--fs-3xs); color: var(--text-muted); }
.rbq__p { color: var(--accent); font-weight: var(--rg-graisse-gras); }
.rbq__tous {
display: flex;
align-items: center;
gap: var(--rg-espace-2);
margin-bottom: var(--rg-espace-3);
font-size: var(--fs-xs);
color: var(--text);
cursor: pointer;
}
.rbq__tous input { accent-color: var(--accent); }
@media (max-width: 900px) {
.rbe__hd { display: none; }
.rbe__l { grid-template-columns: 1fr 1fr; gap: var(--rg-espace-2) var(--rg-espace-4); }
.rbe__q { grid-column: 1 / -1; }
.rbl__i { flex-wrap: wrap; gap: var(--rg-espace-3) var(--rg-espace-4); }
.rbl__cover { width: 68px; height: 44px; }
.rbl__etat { min-width: 0; text-align: left; }
}
/* =========================================================
GP, ROADBOOK, LA REFONTE DU 2026-10-20
---------------------------------------------------------
Leur roadbook papier fait sept pages. Posées bout à bout
dans une seule colonne, elles donnent une page qu'on ne
parcourt plus : d'où le bandeau de chiffres (ce qu'on
vérifie avant tout), le barreau de sections (ancres sur
l'ordinateur, onglets sur le téléphone), et des blocs qui
gardent tous la même grammaire, un en-tête numéroté, un
compteur, un bouton d'ajout à droite, une phrase d'aide.
Rien ici n'invente de forme : ce sont les composants du
projet, étendus de ce que le document demande en plus (la
grille des jours, la rooming list, la grille du catering).
========================================================= */
/* --- Le bandeau de chiffres --- */
.rbtop {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--rg-espace-3);
margin-bottom: var(--rg-espace-4);
}
.rbtop__b {
display: flex;
flex-direction: column;
gap: var(--rg-trait-1);
padding: var(--rg-espace-3) var(--rg-espace-4);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--r-sm);
background: var(--plein);
text-align: left;
min-width: 0;
}
button.rbtop__b { cursor: pointer; transition: border-color var(--t-fast) var(--ease); }
@media (hover: hover) { button.rbtop__b:hover { border-color: var(--border-focus); } }
.rbtop__t {
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--text-muted);
}
.rbtop__b b {
font-size: var(--fs-lg);
font-weight: var(--rg-graisse-gras);
color: var(--text);
line-height: var(--rg-interligne-court);
overflow-wrap: anywhere;
}
.rbtop__b em {
font-style: normal;
font-size: var(--fs-3xs);
color: var(--text-faint);
}
/* --- Le barreau de sections --- */
.rbnav {
display: flex;
gap: var(--rg-espace-2);
margin-bottom: var(--rg-espace-4);
padding-bottom: calc(var(--rg-espace-1) / 2);
overflow-x: auto;
scrollbar-width: none;
}
.rbnav::-webkit-scrollbar { display: none; }
.rbnav__t {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
flex: 0 0 auto;
padding: var(--rg-espace-2) var(--rg-espace-3);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--rg-rayon-0);
background: var(--plein);
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-semi);
color: var(--text-soft);
cursor: pointer;
transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
@media (hover: hover) { .rbnav__t:hover { border-color: var(--border-focus); color: var(--text); } }
.rbnav__t i {
font-style: normal;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
color: var(--text-muted);
}
.rb-bloc__h--mince { margin-top: var(--rg-espace-4); }
.rbg__invt {
margin: 0;
font-size: var(--fs-sm);
font-weight: var(--rg-graisse-gras);
color: var(--text);
}
.plf__n2 {
margin: var(--rg-espace-4) 0 var(--rg-espace-2);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--text-muted);
}
/* --- ② LES JOURS --- */
.rbj { display: flex; flex-direction: column; gap: var(--rg-espace-2); }
.rbj__r {
display: grid;
grid-template-columns: 96px 1fr 1fr;
gap: var(--rg-espace-2);
align-items: stretch;
}
.rbj__d {
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--rg-trait-1);
padding: var(--rg-espace-3) var(--rg-espace-3);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--r-xs);
background: var(--plein-2);
}
.rbj__d b { font-size: var(--fs-xs); font-weight: var(--rg-graisse-gras); color: var(--text); }
.rbj__d em {
font-style: normal;
font-size: var(--fs-3xs);
color: var(--text-faint);
text-transform: uppercase;
letter-spacing: var(--rg-label-m-espacement);
min-height: 1em;
}
.rbj__ev {
margin-top: var(--rg-espace-1);
font-style: normal;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--accent);
}
.rbj__r.is-course .rbj__d { background: var(--plein-3); }
.rbj__c {
--rbj-c: var(--border-2);
display: flex;
flex-direction: column;
gap: var(--rg-espace-1);
padding: var(--rg-espace-3) var(--rg-espace-3) var(--rg-espace-3) var(--rg-espace-4);
border: var(--rg-trait-1) solid var(--border);
border-left: var(--rg-trait-4) solid var(--rbj-c);
border-radius: var(--r-xs);
background: var(--plein);
text-align: left;
cursor: pointer;
min-width: 0;
transition: border-color var(--t-fast) var(--ease);
}
@media (hover: hover) { .rbj__c:hover { border-color: var(--border-focus); } }
.rbj__c--travel { --rbj-c: var(--pop-6); }
.rbj__c--instal { --rbj-c: var(--pop-5); }
.rbj__c--course { --rbj-c: var(--accent); }
.rbj__c--essais { --rbj-c: var(--pop-4); }
.rbj__c--libre { --rbj-c: var(--pop-3); }
.rbj__h {
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--text-muted);
}
.rbj__t {
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-gras);
color: var(--text);
overflow-wrap: anywhere;
}
.rbj__note {
font-size: var(--fs-3xs);
color: var(--text-muted);
overflow-wrap: anywhere;
}
.rbj__c.is-vide {
align-items: center;
justify-content: center;
border-style: dashed;
border-left-style: dashed;
background: transparent;
}
.rbj__c.is-vide .rbj__h { color: var(--text-faint); }
.rbj__plus { font-size: var(--fs-md); color: var(--text-faint); }
.rbj__pills { display: flex; flex-wrap: wrap; gap: var(--rg-espace-1); }
.rbj__p {
font-style: normal;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
padding: calc(var(--rg-espace-1) / 2) var(--rg-espace-2);
border-radius: var(--rg-rayon-0);
white-space: nowrap;
}
.rbj__p--oui {
color: var(--pop-3);
background: color-mix(in srgb, var(--pop-3) 14%, transparent);
}
.rbj__p--non {
color: var(--accent);
background: var(--accent-soft);
}
.rbj__p--hot {
color: var(--pop-2);
background: color-mix(in srgb, var(--pop-2) 14%, transparent);
}
.rbj__dit {
margin: 0 0 var(--rg-espace-3);
font-size: var(--fs-3xs);
color: var(--pop-3);
}
.rbj__leg { display: flex; flex-wrap: wrap; gap: var(--rg-espace-2) var(--rg-espace-4); margin-top: var(--rg-espace-3); }
.rbj__lg {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
font-size: var(--fs-3xs);
color: var(--text-muted);
}
.rbj__lg::before {
content: "";
width: 9px; height: 9px;
border-radius: var(--rg-rayon-0);
background: var(--border-2);
}
.rbj__lg--travel::before { background: var(--pop-6); }
.rbj__lg--instal::before { background: var(--pop-5); }
.rbj__lg--course::before { background: var(--accent); }
.rbj__lg--essais::before { background: var(--pop-4); }
.rbj__lg--libre::before { background: var(--pop-3); }
.rbj__lg--oui::before { background: var(--pop-3); border-radius: var(--rg-rayon-0); }
.rbj__lg--non::before { background: var(--accent); border-radius: var(--rg-rayon-0); }
/* --- ③ L'ÉQUIPE, RANGÉE PAR POSTE --- */
.rbg { display: flex; flex-direction: column; gap: var(--rg-espace-4); }
.rbg__h {
display: flex;
align-items: center;
gap: var(--rg-espace-2);
margin: 0 0 var(--rg-espace-2);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--text-muted);
}
.rbg__h i {
font-style: normal;
padding: var(--rg-trait-1) var(--rg-espace-2);
border-radius: var(--rg-rayon-0);
background: var(--plein-3);
color: var(--text-soft);
letter-spacing: 0;
}
.rbg__h::after {
content: "";
flex: 1 1 auto;
height: 1px;
background: var(--border);
}
.rbg__l { display: flex; flex-direction: column; gap: var(--rg-espace-1); }
.rbp2 {
display: flex;
align-items: center;
gap: var(--rg-espace-3);
padding: var(--rg-espace-2) var(--rg-espace-3);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--r-xs);
background: var(--plein);
min-width: 0;
}
.rbp2--inv { background: var(--plein-2); cursor: pointer; }
.rbp2__q { flex: 1 1 auto; min-width: 0; cursor: pointer; }
.rbp2__nom {
display: flex;
align-items: center;
gap: var(--rg-espace-2);
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-gras);
color: var(--text);
}
.rbp2__num {
font-style: normal;
min-width: 24px;
padding: var(--rg-trait-1) var(--rg-espace-2);
border-radius: var(--rg-rayon-0);
background: var(--accent);
color: var(--brand-white);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-extra);
text-align: center;
}
.rbp2__nom u {
text-decoration: none;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
color: var(--pop-5);
}
.rbp2__role {
display: block;
font-size: var(--fs-3xs);
color: var(--text-muted);
}
.rbp2__st { display: flex; flex-wrap: wrap; gap: var(--rg-espace-1); justify-content: flex-end; }
.rbst {
font-style: normal;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
padding: calc(var(--rg-espace-1) / 2) var(--rg-espace-2);
border-radius: var(--rg-rayon-0);
border: var(--rg-trait-1) solid var(--border);
color: var(--text-faint);
white-space: nowrap;
}
.rbst.is-ok {
border-color: transparent;
background: var(--plein-3);
color: var(--text-soft);
}
.rbp2__x {
flex: 0 0 auto;
width: 26px; height: 26px;
border: 0;
border-radius: var(--rg-rayon-0);
background: transparent;
color: var(--text-faint);
font-size: var(--fs-md);
line-height: var(--rg-interligne-plein);
cursor: pointer;
transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
@media (hover: hover) { .rbp2__x:hover { background: var(--accent-soft); color: var(--accent); } }
.rbg__inv { margin-top: var(--rg-espace-3); }
/* --- ④ TRAJETS ET VÉHICULES --- */
.rbt__s { margin-top: var(--rg-espace-3); }
.rbt__st {
display: flex;
align-items: center;
gap: var(--rg-espace-2);
margin: 0 0 var(--rg-espace-2);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--text-muted);
}
.rbt__st i {
font-style: normal;
padding: var(--rg-trait-1) var(--rg-espace-2);
border-radius: var(--rg-rayon-0);
background: var(--plein-3);
color: var(--text-soft);
letter-spacing: 0;
}
/* L'étape de nuit : leur PDF la met en rouge au milieu du
trajet, et c'est la seule ligne du document qu'on ne doit
pas rater, l'hôtel n'est pas réservé. */
.rbt__c--nuit {
border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
background: color-mix(in srgb, var(--accent) 7%, var(--plein));
}
.rbt__c--nuit .rbt__sens { color: var(--accent); }
.rbv2 { margin-top: var(--rg-espace-5); }
.rbv2__g {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--rg-espace-3);
}
.rbvh {
display: flex;
flex-direction: column;
gap: var(--rg-espace-3);
padding: var(--rg-espace-4);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--r-sm);
background: var(--plein);
cursor: pointer;
transition: border-color var(--t-fast) var(--ease);
}
@media (hover: hover) { .rbvh:hover { border-color: var(--border-focus); } }
.rbvh__hd { display: flex; align-items: baseline; gap: var(--rg-espace-3); }
.rbvh__n {
margin: 0;
flex: 1 1 auto;
font-size: var(--fs-sm);
font-weight: var(--rg-graisse-gras);
color: var(--text);
overflow-wrap: anywhere;
}
.rbvh__cap {
flex: 0 0 auto;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
color: var(--text-muted);
white-space: nowrap;
}
.rbvh__cap.is-trop { color: var(--accent); }
.rbvh__b { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rg-espace-3); }
.rbvh__t {
margin: 0 0 var(--rg-espace-1);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--text-muted);
}
.rbvh__l { list-style: none; margin: 0; padding: 0; }
.rbvh__l li {
display: flex;
align-items: center;
gap: var(--rg-espace-2);
padding: calc(var(--rg-espace-1) / 2) 0;
font-size: var(--fs-2xs);
color: var(--text);
overflow-wrap: anywhere;
}
.rbvh__vide { margin: 0; font-size: var(--fs-2xs); color: var(--text-faint); }
.rbvh__r {
font-style: normal;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
padding: var(--rg-trait-1) var(--rg-espace-2);
border-radius: var(--rg-rayon-0);
background: var(--accent-soft);
color: var(--accent);
white-space: nowrap;
}
.rbvh__leg {
margin: 0;
padding-top: var(--rg-espace-2);
border-top: var(--rg-trait-1) solid var(--border);
font-size: var(--fs-3xs);
color: var(--text-faint);
}
/* --- ⑤ LA ROOMING LIST --- */
.rbh__tel { color: var(--text-soft); text-decoration: none; }
@media (hover: hover) { .rbh__tel:hover { color: var(--accent); } }
.rbrl { display: flex; flex-direction: column; margin-top: var(--rg-espace-3); }
.rbrl__hd, .rbrl__l {
display: grid;
grid-template-columns: 92px 92px 1fr 190px;
gap: var(--rg-espace-3);
align-items: center;
}
.rbrl__hd {
padding-bottom: var(--rg-espace-2);
border-bottom: var(--rg-trait-1) solid var(--border);
}
.rbrl__hd span {
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--text-muted);
}
.rbrl__l {
padding: var(--rg-espace-2) 0;
border-bottom: var(--rg-trait-1) solid var(--border);
cursor: pointer;
}
@media (hover: hover) { .rbrl__l:hover .rbrl__num { color: var(--accent); } }
.rbrl__num { font-size: var(--fs-xs); font-weight: var(--rg-graisse-gras); color: var(--text); }
/* Une rooming list n'a pas de numéros avant l'arrivée : l'hôtel
les donne au check-in. « To assign » le dit ; un tiret laisse
croire à un trou. */
.rbrl__num.is-vide { font-weight: var(--rg-graisse-semi); color: var(--text-faint); }
.rbrl__ty { font-size: var(--fs-2xs); color: var(--text-soft); }
.rbrl__q { font-size: var(--fs-2xs); color: var(--text); overflow-wrap: anywhere; }
.rbrl__dt { font-size: var(--fs-3xs); color: var(--text-muted); white-space: nowrap; }
.rbrl__dt i {
font-style: normal;
margin-left: var(--rg-espace-1);
padding: var(--rg-trait-1) var(--rg-espace-1);
border-radius: var(--rg-rayon-0);
background: var(--plein-3);
color: var(--text-soft);
}
.rbrl__l.is-vide .rbrl__q { color: var(--text-faint); }
.rbrl__plus {
align-self: start;
margin-top: var(--rg-espace-3);
padding: var(--rg-espace-2) var(--rg-espace-3);
border: var(--rg-trait-1) dashed var(--border-2);
border-radius: var(--r-xs);
background: transparent;
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-semi);
color: var(--text-muted);
cursor: pointer;
transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
@media (hover: hover) { .rbrl__plus:hover { color: var(--accent); border-color: var(--border-focus); } }
/* --- ⑥ LA GRILLE DU CATERING --- */
/* Vingt-sept personnes par vingt-huit repas : aucune mise en
page ne fait tenir ça dans une page. On garde donc la
grille, c'est la seule forme où l'on voit qui mange ET
combien, et on la fait glisser sous le doigt, la colonne
des noms restant collée à gauche. */
.rbca__note {
margin: 0 0 var(--rg-espace-3);
padding: var(--rg-espace-2) var(--rg-espace-3);
border-left: var(--rg-trait-4) solid var(--accent);
border-radius: var(--rg-rayon-0) var(--r-xs) var(--r-xs) var(--rg-rayon-0);
background: var(--plein-2);
font-size: var(--fs-2xs);
color: var(--text);
}
.rbca__w {
overflow-x: auto;
margin-top: var(--rg-espace-3);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--r-sm);
background: var(--plein);
}
.rbca { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; }
.rbca th, .rbca td { padding: 0; text-align: center; vertical-align: middle; }
/* `.rbca th` pèse un élément de plus que `.rbca__coin` : sans
reprendre `th` dans le sélecteur, la colonne des noms repasse
centrée et les noms partent à droite de leur case. */
.rbca th.rbca__coin,
.rbca th.rbca__p {
position: sticky;
left: 0;
z-index: 2;
box-sizing: border-box;
width: 176px;
min-width: 176px;
height: 34px;
padding: var(--rg-espace-1) var(--rg-espace-3);
text-align: left;
background: var(--plein);
border-right: var(--rg-trait-1) solid var(--border);
}
.rbca__coin {
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--text-muted);
}
.rbca__j {
min-width: 68px;
padding: var(--rg-espace-2) var(--rg-espace-1) calc(var(--rg-espace-1) / 2);
border-left: var(--rg-trait-1) solid var(--border);
}
.rbca__j b { display: block; font-size: var(--fs-3xs); font-weight: var(--rg-graisse-gras); color: var(--text); }
.rbca__j em {
display: block;
font-style: normal;
font-size: var(--fs-3xs);
color: var(--text-faint);
text-transform: uppercase;
}
.rbca__m { padding-bottom: var(--rg-espace-1); }
.rbca__all {
width: 26px; height: 20px;
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--rg-rayon-0);
background: transparent;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-extra);
color: var(--text-muted);
cursor: pointer;
}
@media (hover: hover) { .rbca__all:hover { border-color: var(--border-focus); color: var(--text); } }
.rbca__all.is-on { border-color: transparent; background: var(--plein-3); color: var(--text); }
.rbca__rt th, .rbca__rt td {
padding-bottom: var(--rg-espace-2);
border-bottom: var(--rg-trait-1) solid var(--border);
}
.rbca__t {
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-extra);
color: var(--pop-3);
}
.rbca__t.is-zero { color: var(--text-faint); font-weight: var(--rg-graisse-semi); }
.rbca__p b {
display: block;
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-gras);
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rbca__p em {
display: block;
font-style: normal;
font-size: var(--fs-3xs);
color: var(--text-faint);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rbca tbody tr.is-inv .rbca__p b { color: var(--text-soft); font-weight: var(--rg-graisse-semi); }
.rbca__c { padding: calc(var(--rg-espace-1) / 2); border-left: var(--rg-trait-1) solid var(--border); }
.rbca tbody tr:nth-child(even) td,
.rbca tbody tr:nth-child(even) .rbca__p { background: var(--plein-2); }
.rbca__k {
width: 26px; height: 26px;
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--rg-rayon-0);
background: transparent;
color: var(--brand-white);
font-size: var(--fs-3xs);
line-height: var(--rg-interligne-plein);
cursor: pointer;
transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
@media (hover: hover) { .rbca__k:hover { border-color: var(--border-focus); } }
.rbca__k.is-on { border-color: transparent; background: var(--pop-3); color: var(--rg-marine-6); }
/* --- ⑧ LES PIÈCES JOINTES --- */
.rbpc { display: flex; flex-direction: column; gap: var(--rg-espace-2); }
.rbpc__i {
display: flex;
align-items: center;
gap: var(--rg-espace-4);
padding: var(--rg-espace-3) var(--rg-espace-4);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--r-xs);
background: var(--plein);
}
.rbpc__d { flex: 1 1 auto; min-width: 0; cursor: pointer; }
.rbpc__n { margin: 0; font-size: var(--fs-xs); font-weight: var(--rg-graisse-gras); color: var(--text); }
.rbpc__m { margin: var(--rg-trait-1) 0 0; font-size: var(--fs-3xs); color: var(--text-muted); }
.rbpc__o {
flex: 0 0 auto;
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-gras);
color: var(--accent);
text-decoration: none;
white-space: nowrap;
}
.rbpc__o.is-off { color: var(--text-faint); font-weight: var(--rg-graisse-moyen); }
/* --- Les écrans intermédiaires --- */
@media (max-width: 1100px) {
.rbj__r { grid-template-columns: 82px 1fr 1fr; }
.rbrl__hd, .rbrl__l { grid-template-columns: 76px 72px 1fr 150px; }
}
@media (max-width: 900px) {
.rbvh__b { grid-template-columns: 1fr; }
.rbp2 { flex-wrap: wrap; }
.rbp2__st { justify-content: flex-start; width: 100%; }
}
/* =========================================================
GP, ROADBOOK : LES QUATRE TABLEAUX DE SON DOCUMENT
---------------------------------------------------------
Posés le 2026-10-20 après son verdict : « je ne comprends
pas vraiment ce que je vois ». Le seul bloc qu'elle trouvait
réussi était le catering, le seul qui avait gardé la forme
de SA page. Days, Crew, Travel et Hotel reprennent donc les
colonnes, l'ordre et le code couleur de son roadbook papier.
Trois d'entre eux sont des grilles larges : elles défilent
LOCALEMENT, jamais en poussant la page.
========================================================= */
/* --- ② HIGHLIGHTS : date | am/pm | plan | note | catering | hotel --- */
.rbhl__w {
overflow-x: auto;
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--r-sm);
background: var(--plein);
}
.rbhl {
display: grid;
grid-template-columns:
112px 44px minmax(150px, 1.3fr) minmax(130px, 1.7fr) 110px 110px;
min-width: 740px;
}
.rbhl__hd {
padding: var(--rg-espace-2) var(--rg-espace-3);
background: var(--plein-2);
border-bottom: var(--rg-trait-1) solid var(--border);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--text-muted);
}
/* La date et l'hôtel couvrent les deux demi-journées : le
placement automatique de la grille saute les cases occupées,
c'est ce qui rend la colonne HOTEL continue comme chez elle. */
/* La colonne des dates reste collée quand on balaye le tableau :
une ligne dont on ne voit plus le jour ne dit plus rien. Un
élément de grille peut être `sticky` comme un autre, à
condition d'avoir un fond opaque. */
.rbhl__d {
position: sticky;
left: 0;
z-index: 2;
background: var(--plein);
grid-row: span 2;
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--rg-trait-1);
padding: var(--rg-espace-2) var(--rg-espace-3);
border-right: var(--rg-trait-1) solid var(--border);
border-bottom: var(--rg-trait-1) solid var(--border);
}
.rbhl__d b { font-size: var(--fs-xs); font-weight: var(--rg-graisse-gras); color: var(--text); }
.rbhl__d em {
font-style: normal;
font-size: var(--fs-3xs);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--text-faint);
}
.rbhl__d.is-course { background: color-mix(in srgb, var(--accent) 8%, var(--plein)); }
.rbhl__hd:first-child, .rbtt__hd:first-child { position: sticky; left: 0; z-index: 3; }
.rbhl__q {
display: flex;
align-items: center;
padding: 0 var(--rg-espace-3);
border-bottom: var(--rg-trait-1) solid var(--border);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
color: var(--text-faint);
}
.rbhl__p, .rbhl__no, .rbhl__ca, .rbhl__ho {
border: 0;
border-bottom: var(--rg-trait-1) solid var(--border);
background: transparent;
padding: var(--rg-espace-2) var(--rg-espace-3);
min-height: 38px;
font-size: var(--fs-2xs);
color: var(--text);
text-align: left;
cursor: pointer;
overflow-wrap: anywhere;
}
@media (hover: hover) { .rbhl__p:hover, .rbhl__no:hover, .rbhl__ca:hover, .rbhl__ho:hover {
box-shadow: none;
} }
.rbhl__p { font-weight: var(--rg-graisse-gras); }
.rbhl__p--travel { background: color-mix(in srgb, var(--pop-6) 16%, transparent); color: var(--pop-6); }
.rbhl__p--instal { background: color-mix(in srgb, var(--pop-5) 16%, transparent); color: var(--pop-5); }
.rbhl__p--course { background: var(--accent-soft); color: var(--accent); }
.rbhl__p--essais { background: color-mix(in srgb, var(--pop-4) 16%, transparent); color: var(--pop-4); }
.rbhl__p--libre { background: color-mix(in srgb, var(--pop-3) 16%, transparent); color: var(--pop-3); }
.rbhl__no { color: var(--text-muted); font-size: var(--fs-3xs); }
.rbhl__ca, .rbhl__ho {
text-align: center;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
}
.rbhl__ca.is-oui, .rbhl__ho.is-oui {
background: color-mix(in srgb, var(--pop-3) 16%, transparent);
color: var(--pop-3);
}
.rbhl__ca.is-non, .rbhl__ho.is-non {
background: var(--accent-soft);
color: var(--accent);
}
.rbhl__ho { grid-row: span 2; border-left: var(--rg-trait-1) solid var(--border); }
/* --- ③ STAFF SUR PLACE : une ligne par poste --- */
.rbst2 {
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--r-sm);
background: var(--plein);
overflow: hidden;
}
.rbst2__r {
display: grid;
grid-template-columns: 176px minmax(0, 1fr);
border-bottom: var(--rg-trait-1) solid var(--border);
}
.rbst2__r:last-child { border-bottom: 0; }
.rbst2__p {
display: flex;
align-items: center;
padding: var(--rg-espace-3) var(--rg-espace-3);
background: var(--plein-2);
border-right: var(--rg-trait-1) solid var(--border);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--text-soft);
}
.rbst2__r.is-inv .rbst2__p { color: var(--text-muted); }
.rbst2__g {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--rg-espace-2);
padding: var(--rg-espace-2) var(--rg-espace-3);
min-width: 0;
}
.rbst2__r--tot .rbst2__p { background: var(--plein-3); color: var(--text); }
.rbst2__r--tot .rbst2__g { gap: var(--rg-espace-3); }
.rbst2__r--tot b { font-size: var(--fs-xl); font-weight: var(--rg-graisse-extra); color: var(--text); }
.rbst2__r--tot span { font-size: var(--fs-3xs); color: var(--text-muted); }
.rbnc {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
padding: var(--rg-espace-1) var(--rg-espace-3);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--rg-rayon-0);
background: var(--plein-2);
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-semi);
color: var(--text);
cursor: pointer;
transition: border-color var(--t-fast) var(--ease);
}
@media (hover: hover) { .rbnc:hover { border-color: var(--border-focus); } }
.rbnc i {
font-style: normal;
min-width: 20px;
padding: var(--rg-trait-1) var(--rg-espace-1);
border-radius: var(--rg-rayon-0);
background: var(--accent);
color: var(--brand-white);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-extra);
text-align: center;
}
/* Pas de fiche dans l'annuaire : le pointillé le dit sans mot,
et la légende sous le tableau le traduit une seule fois. */
.rbnc.is-hors { border-style: dashed; background: transparent; color: var(--text-soft); }
.rbj__lg--hors::before {
background: transparent;
border: var(--rg-trait-2) dashed var(--text-faint);
border-radius: var(--rg-rayon-0);
}
.rbj__lg--cleemy::before { background: var(--accent); border-radius: var(--rg-rayon-0); }
.rbj__lg--respo::before { background: var(--pop-6); border-radius: var(--rg-rayon-0); }
.rbj__lg--exc::before { background: var(--pop-4); border-radius: var(--rg-rayon-0); }
/* --- ④ TRAVEL : date | from | h | to | h | transport --- */
.rbtt__w {
overflow-x: auto;
margin-bottom: var(--rg-espace-2);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--r-sm);
background: var(--plein);
}
.rbtt {
display: grid;
grid-template-columns:
124px minmax(110px, 1fr) 66px minmax(110px, 1fr) 66px 168px;
min-width: 700px;
}
.rbtt__hd {
padding: var(--rg-espace-2) var(--rg-espace-3);
background: var(--plein-2);
border-bottom: var(--rg-trait-1) solid var(--border);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--text-muted);
}
.rbtt__d, .rbtt__l, .rbtt__h {
border: 0;
border-bottom: var(--rg-trait-1) solid var(--border);
background: transparent;
padding: var(--rg-espace-3) var(--rg-espace-3);
font-size: var(--fs-2xs);
color: var(--text);
text-align: left;
cursor: pointer;
overflow-wrap: anywhere;
}
.rbtt__d {
position: sticky;
left: 0;
z-index: 2;
background: var(--plein);
font-weight: var(--rg-graisse-gras);
}
.rbtt__l { font-weight: var(--rg-graisse-semi); }
.rbtt__h { color: var(--text-soft); font-variant-numeric: tabular-nums; }
@media (hover: hover) { .rbtt__d:hover, .rbtt__l:hover, .rbtt__h:hover { color: var(--accent); } }
/* L'étape de nuit : la seule ligne du document qu'on ne doit pas
rater, l'hôtel n'est pas réservé. Elle barre le tableau, comme
chez elle. */
.rbtt__nuit {
grid-column: 1 / 6;
border: 0;
border-bottom: var(--rg-trait-1) solid var(--border);
background: color-mix(in srgb, var(--accent) 9%, transparent);
padding: var(--rg-espace-2) var(--rg-espace-3);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
color: var(--accent);
text-align: center;
cursor: pointer;
}
.rbtt__tr {
display: flex;
flex-direction: column;
justify-content: center;
gap: calc(var(--rg-espace-1) / 2);
padding: var(--rg-espace-2) var(--rg-espace-3);
border-left: var(--rg-trait-1) solid var(--border);
border-bottom: var(--rg-trait-1) solid var(--border);
}
.rbtt__tr span { font-size: var(--fs-3xs); font-weight: var(--rg-graisse-semi); color: var(--text-soft); }
.rbtt__tr em { font-style: normal; font-size: var(--fs-3xs); color: var(--text-faint); }
/* Le filtre d'une liste longue de personnes. */
.rbq__f { margin-bottom: var(--rg-espace-2); }
/* Les trois paquets d'un véhicule : la route ET le circuit, la
route seulement, le circuit seulement. Le titre porte
l'information, on ne la cherche pas en bout de ligne. Le
paquet d'exception s'annonce en orange : c'est la seule chose
d'une boîte de véhicule qui demande à être remarquée. */
.rbvh__g + .rbvh__g {
margin-top: var(--rg-espace-3);
padding-top: var(--rg-espace-3);
border-top: var(--rg-trait-1) solid var(--border);
}
.rbvh__gt {
display: flex;
align-items: center;
gap: var(--rg-espace-2);
margin: 0 0 var(--rg-espace-1);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--text-muted);
}
.rbvh__gt i {
font-style: normal;
padding: var(--rg-trait-1) var(--rg-espace-2);
border-radius: var(--rg-rayon-0);
background: var(--plein-3);
color: var(--text-soft);
letter-spacing: 0;
}
.rbvh__g.is-exc .rbvh__gt { color: var(--pop-4); }
.rbvh__g.is-exc .rbvh__gt i {
background: color-mix(in srgb, var(--pop-4) 16%, transparent);
color: var(--pop-4);
}
.rbvh__note {
margin: 0;
font-size: var(--fs-3xs);
color: var(--text-muted);
}
/* Les deux responsabilités se disent par la COULEUR DU NOM, rouge pour les frais, bleu pour les clés. C'est sa légende. */
.rbvh__l li.is-cleemy { color: var(--accent); font-weight: var(--rg-graisse-gras); }
.rbvh__l li.is-respo { color: var(--pop-6); font-weight: var(--rg-graisse-gras); }
/* --- ⑤ ROOMING LIST : une colonne par jour --- */
.rbrm__w {
overflow-x: auto;
margin-top: var(--rg-espace-3);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--r-sm);
background: var(--plein);
}
.rbrm { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; }
.rbrm th, .rbrm td { padding: 0; text-align: center; }
.rbrm th.rbrm__coin {
position: sticky;
left: 0;
z-index: 2;
box-sizing: border-box;
width: 244px;
min-width: 244px;
padding: var(--rg-espace-2) var(--rg-espace-3);
background: var(--plein);
border-right: var(--rg-trait-1) solid var(--border);
border-bottom: var(--rg-trait-1) solid var(--border);
text-align: left;
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-gras);
color: var(--text);
}
.rbrm thead th.rbrm__coin {
font-size: var(--fs-3xs);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--text-muted);
background: var(--plein-2);
}
.rbrm th.rbrm__coin.is-vide { color: var(--text-faint); font-weight: var(--rg-graisse-moyen); }
.rbrm th.rbrm__coin i {
font-style: normal;
margin-right: var(--rg-espace-2);
padding: var(--rg-trait-1) var(--rg-espace-2);
border-radius: var(--rg-rayon-0);
background: var(--plein-3);
color: var(--text-soft);
font-size: var(--fs-3xs);
}
.rbrm__ty {
min-width: 72px;
padding: 0 var(--rg-espace-3);
border-bottom: var(--rg-trait-1) solid var(--border);
border-right: var(--rg-trait-1) solid var(--border);
font-size: var(--fs-3xs);
color: var(--text-soft);
}
.rbrm thead .rbrm__ty {
background: var(--plein-2);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--text-muted);
}
.rbrm__j {
min-width: 78px;
padding: var(--rg-espace-2) var(--rg-espace-1);
background: var(--plein-2);
border-bottom: var(--rg-trait-1) solid var(--border);
border-left: var(--rg-trait-1) solid var(--border);
}
.rbrm__j b { display: block; font-size: var(--fs-3xs); font-weight: var(--rg-graisse-gras); color: var(--text); }
.rbrm__j em {
display: block;
font-style: normal;
font-size: var(--fs-3xs);
text-transform: uppercase;
color: var(--text-faint);
}
.rbrm__c {
height: 34px;
min-width: 78px;
border-bottom: var(--rg-trait-1) solid var(--border);
border-left: var(--rg-trait-1) solid var(--border);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
}
.rbrm__c.is-oui {
background: color-mix(in srgb, var(--pop-3) 18%, transparent);
color: var(--pop-3);
}
.rbrm__c.is-non {
background: var(--accent-soft);
color: var(--accent);
}
.rbrm tbody tr { cursor: pointer; }
@media (hover: hover) { .rbrm tbody tr:hover th.rbrm__coin { color: var(--accent); } }
@media (max-width: 1100px) {
.rbst2__r { grid-template-columns: 148px minmax(0, 1fr); }
}
/* Le bas de la barre latérale quand personne n'est identifié :
on dit ce qui est vrai, un accès partagé, au lieu d'afficher
le profil du propriétaire. */
.profile-widget__inner.is-anon {
box-sizing: border-box;
width: 100%;
display: flex;
flex-direction: column;
gap: var(--rg-trait-1);
padding: var(--rg-espace-3) var(--rg-espace-4);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--r-sm);
background: var(--plein);
}
.profile-widget__inner.is-anon .profile-widget__nom {
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-gras);
color: var(--text);
}
.profile-widget__inner.is-anon .profile-widget__role {
font-size: var(--fs-3xs);
color: var(--text-muted);
}
/* Le champ du code d'accès : six chiffres espacés, qu'on relit
d'un coup d'œil avant de valider. */
.field__input--code {
font-size: var(--fs-xl);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-align: center;
font-variant-numeric: tabular-nums;
}
/* =========================================================
LE TÉMOIN DE SYNCHRONISATION
---------------------------------------------------------
Rien ne s'affiche quand tout va bien : un bandeau
« synchronisé » permanent est du bruit, « hors ligne » est
une information. Il ne parle donc que pour dire qu'une
modification n'est pas encore partie, ou qu'on vient de
recharger la version de quelqu'un d'autre.
========================================================= */
.syncetat {
position: fixed;
left: 16px;
bottom: 16px;
z-index: 120;
max-width: 360px;
padding: var(--rg-espace-3) var(--rg-espace-4);
border-radius: var(--r-sm);
border: var(--rg-trait-1) solid var(--border);
background: var(--plein);
box-shadow: none;
font-size: var(--fs-2xs);
line-height: var(--rg-interligne-texte-s);
color: var(--text);
}
.syncetat.is-off { border-color: color-mix(in srgb, var(--pop-1) 50%, var(--border)); }
.syncetat.is-warn { border-color: var(--accent); }
.syncetat.is-off::before,
.syncetat.is-warn::before {
content: "";
display: inline-block;
width: 8px; height: 8px;
margin-right: var(--rg-espace-2);
border-radius: var(--rg-rayon-0);
vertical-align: 1px;
}
.syncetat.is-off::before { background: var(--pop-1); }
.syncetat.is-warn::before { background: var(--accent); }
@media (max-width: 720px) {
/* Au-dessus de la barre de navigation basse, pas dessous. */
.syncetat {
left: 12px;
right: 12px;
bottom: calc(76px + env(safe-area-inset-bottom, 0px));
max-width: none;
}
}
/* =========================================================
GP, WIDGET « TRACK SESSIONS »
---------------------------------------------------------
Une séance de roulage tient en quatre réponses : quand,
quoi, qui roule, qui prépare, et un état à droite. La
ligne est donc bâtie dans cet ordre, et l'état est le seul
élément cliquable en grand : c'est le geste qu'on répète
dix fois dans une journée de piste.
========================================================= */
.rl { display: flex; flex-direction: column; gap: var(--rg-espace-3); }
.rl__jour {
display: flex;
align-items: baseline;
gap: var(--rg-espace-3);
margin: 0;
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-gras);
color: var(--text);
}
.rl__jour span {
margin-left: auto;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-moyen);
color: var(--text-muted);
}
.rl__l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--rg-espace-2); }
.rl__i {
display: flex;
align-items: flex-start;
gap: var(--rg-espace-3);
padding: var(--rg-espace-3) var(--rg-espace-3);
border-radius: var(--r-sm);
background: var(--plein-3);
box-shadow: none;
border-left: var(--rg-trait-4) solid var(--rl-c, var(--border-2));
}
/* L'état colore la ligne entière : sur un stand on regarde la
couleur avant de lire le mot. */
.rl__i--prep { --rl-c: var(--pop-1); }
.rl__i--prete { --rl-c: var(--pop-3); }
.rl__i--piste { --rl-c: var(--pop-4); }
.rl__i--fini { --rl-c: var(--border-2); }
.rl__i--fini { opacity: 0.62; }
.rl__h {
flex: 0 0 46px;
display: flex;
flex-direction: column;
line-height: var(--rg-interligne-h2);
}
.rl__h b {
font-size: var(--fs-sm);
font-weight: var(--rg-graisse-gras);
color: var(--text);
font-variant-numeric: tabular-nums;
}
.rl__h i {
font-style: normal;
font-size: var(--fs-3xs);
color: var(--text-faint);
font-variant-numeric: tabular-nums;
}
.rl__c { flex: 1 1 auto; min-width: 0; }
.rl__t {
margin: 0;
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-gras);
color: var(--text);
}
.rl__note {
display: block;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-regulier);
color: var(--text-muted);
}
/* QUI ROULE, le numéro d'abord : sur un stand, une voiture
s'appelle par son numéro, pas par son pilote. */
.rl__v { display: flex; flex-wrap: wrap; gap: var(--rg-espace-2); margin: var(--rg-espace-1) 0 0; }
.rl__vo {
display: inline-flex;
align-items: baseline;
gap: var(--rg-espace-1);
padding: calc(var(--rg-espace-1) / 2) var(--rg-espace-2);
border-radius: var(--rg-rayon-0);
background: var(--plein);
box-shadow: none;
font-size: var(--fs-3xs);
color: var(--text-soft);
}
.rl__vo b { font-weight: var(--rg-graisse-extra); color: var(--text); font-variant-numeric: tabular-nums; }
.rl__vo em { font-style: normal; color: var(--pop-1); }
.rl__v--vide { font-size: var(--fs-3xs); color: var(--pop-1); }
.rl__e { margin: var(--rg-espace-1) 0 0; font-size: var(--fs-3xs); color: var(--text-muted); }
.rl__el {
font-weight: var(--rg-graisse-gras);
color: var(--text-faint);
text-transform: uppercase;
letter-spacing: var(--rg-label-m-espacement);
font-size: var(--rg-taille-label-s);
margin-right: var(--rg-espace-2);
}
.rl__el--vide { color: var(--pop-1); text-transform: none; letter-spacing: 0; font-size: var(--fs-3xs); }
/* L'état s'aligne sur le TITRE de la séance, pas au milieu de la
ligne : sinon il flotte quelque part entre les voitures et
l'équipe, et l'œil ne sait plus à quoi il se rapporte. */
.rl__etat {
flex: 0 0 auto;
align-self: flex-start;
margin-top: var(--rg-trait-1);
padding: var(--rg-espace-1) var(--rg-espace-3);
border: 0;
border-radius: var(--rg-rayon-0);
cursor: pointer;
font: inherit;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-gras);
white-space: nowrap;
background: color-mix(in srgb, var(--rl-c) 18%, transparent);
color: var(--rl-c);
transition: filter var(--t-fast) var(--ease);
}
.rl__etat--fini { color: var(--text-muted); }
@media (hover: hover) { .rl__etat:hover { filter: brightness(1.15); } }
.rl__x {
flex: 0 0 auto;
align-self: flex-start;
width: 22px; height: 22px;
border: 0;
border-radius: var(--rg-rayon-0);
background: none;
cursor: pointer;
color: var(--text-faint);
font-size: var(--rg-taille-texte-m);
line-height: var(--rg-interligne-plein);
}
@media (hover: hover) { .rl__x:hover { background: var(--accent-soft); color: var(--accent); } }
.rl__plus { margin: 0; font-size: var(--fs-3xs); color: var(--text-faint); }
.rl__vide { padding: var(--rg-espace-4) var(--rg-espace-1); }
.rl__vide-t { margin: 0; font-size: var(--fs-xs); font-weight: var(--rg-graisse-gras); color: var(--text-soft); }
.rl__vide-d { margin: var(--rg-espace-1) 0 0; font-size: var(--fs-3xs); line-height: var(--rg-interligne-texte); color: var(--text-muted); }
.rl__pied {
display: flex;
gap: var(--rg-espace-4);
padding-top: var(--rg-espace-2);
border-top: var(--rg-trait-1) solid var(--border);
}
.rl__lien {
border: 0;
padding: 0;
background: none;
cursor: pointer;
font: inherit;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
color: var(--text-muted);
transition: color var(--t-fast) var(--ease);
}
@media (hover: hover) { .rl__lien:hover { color: var(--accent); } }
.rl__lien i {
font-style: normal;
margin-left: var(--rg-espace-1);
padding: 0 var(--rg-espace-1);
border-radius: var(--rg-rayon-0);
background: var(--plein-3);
box-shadow: none;
color: var(--text-faint);
}
/* --------- LE FORMULAIRE, DÉPLIÉ DANS LE WIDGET --------- */
.rlf {
display: flex;
flex-direction: column;
gap: var(--rg-espace-3);
padding: var(--rg-espace-3);
border-radius: var(--r-sm);
background: var(--accent-soft);
box-shadow: none;
}
.rlf__r { display: flex; flex-wrap: wrap; gap: var(--rg-espace-2); align-items: flex-end; }
.rlf__f { display: flex; flex-direction: column; gap: var(--rg-espace-1); flex: 0 0 auto; }
.rlf__f span, .rlf__lab {
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--text-muted);
}
.rlf__f .form-input { padding: var(--rg-espace-2) var(--rg-espace-2); font-size: var(--fs-3xs); }
.rlf__f--d .form-input { width: 132px; }
.rlf__f--t { flex: 1 1 130px; }
.rlf__f--n { flex: 1 1 160px; }
.rlf__b { display: flex; gap: var(--rg-espace-2); margin-left: auto; }
.rlf__b .btn-secondary, .rlf__b .btn-primary { padding: var(--rg-espace-2) var(--rg-espace-4); font-size: var(--fs-3xs); }
.rlf__cars { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rg-espace-2); }
.rlf__aucune { font-size: var(--fs-3xs); color: var(--text-muted); }
.rlchip {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-1);
padding: var(--rg-espace-1) var(--rg-espace-3);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--rg-rayon-0);
background: var(--plein);
cursor: pointer;
font-size: var(--fs-3xs);
color: var(--text-soft);
transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
@media (hover: hover) { .rlchip:hover { border-color: var(--border-focus); } }
.rlchip.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.rlchip input { accent-color: var(--accent); margin: 0; }
.rlchip b { font-weight: var(--rg-graisse-extra); color: var(--text); }
/* --------- LA FICHE DES VOITURES --------- */
.rlcars { display: flex; flex-direction: column; gap: var(--rg-espace-4); margin-bottom: var(--rg-espace-4); }
.rlcar {
display: flex;
flex-direction: column;
gap: var(--rg-espace-3);
padding: var(--rg-espace-4);
border-radius: var(--r-sm);
background: var(--plein-3);
box-shadow: none;
}
.rlcar__hd { display: flex; gap: var(--rg-espace-3); align-items: flex-end; flex-wrap: wrap; }
.rlcar__num, .rlcar__cat, .rlcar__pil {
display: flex;
flex-direction: column;
gap: var(--rg-espace-1);
}
.rlcar__num { flex: 0 0 78px; }
.rlcar__cat { flex: 1 1 150px; }
.rlcar__pil { flex: 1 1 170px; }
.rlcar__hd span {
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--text-muted);
}
.rlcar__x {
margin-left: auto;
width: 28px; height: 28px;
border: 0;
border-radius: var(--rg-rayon-0);
background: none;
cursor: pointer;
color: var(--text-faint);
font-size: var(--rg-taille-texte-l);
line-height: var(--rg-interligne-plein);
}
@media (hover: hover) { .rlcar__x:hover { background: var(--accent-soft); color: var(--accent); } }
.rlcar__eq { display: flex; flex-direction: column; gap: var(--rg-espace-2); }
.rlcar__chips { display: flex; flex-wrap: wrap; gap: var(--rg-espace-1); }
.rlcars__add { width: 100%; }
/* En compact, la ligne se replie : le pavé « qui prépare » et le
bouton d'état ne tiennent pas côte à côte dans une colonne. */
.widget[data-format="sm"] .rl__pied { display: none; }
@media (max-width: 520px) {
.rl__i { flex-wrap: wrap; }
.rl__etat { margin-left: var(--rg-espace-8); }
}
/* =========================================================
LA LISTE DES DOCUMENTS, 2026-09-08
---------------------------------------------------------
Lorette : « c'est un onglet qui manque clairement de clarté
et de compréhension, on se perd vite, repense-le. »
La grille de grandes cartes tenait six documents à l'écran.
Cette liste en tient une vingtaine, et surtout elle ALIGNE :
les noms sous les noms, les dates sous les dates. C'est
l'alignement qui fait qu'on balaie une liste au lieu de la
lire ligne à ligne.
Les colonnes sont posées ici, une seule fois, sur la ligne
ET sur rien d'autre : si un jour il faut en ajouter une, on
la change à un seul endroit.
========================================================= */
.docliste {
display: flex;
flex-direction: column;
gap: calc(var(--rg-espace-1) / 2);
margin-top: var(--rg-espace-1);
}
/* Le titre d'un rayon. Discret : il sépare, il ne commande pas. */
.docl-grp {
display: flex;
align-items: center;
gap: var(--rg-espace-3);
margin: var(--rg-espace-4) 0 var(--rg-espace-1);
padding: 0 var(--rg-espace-4);
}
.docl-grp:first-child { margin-top: var(--rg-espace-2); }
.docl-grp b {
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--text-muted);
}
.docl-grp i {
font-style: normal;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
color: var(--text-faint);
background: var(--surface);
border-radius: var(--r-pill);
padding: calc(var(--rg-espace-1) / 2) var(--rg-espace-2);
}
.docl-grp::after {
content: "";
flex: 1;
height: 1px;
background: var(--border);
}
.docl {
display: grid;
grid-template-columns:
46px /* type */
minmax(0, 1fr) /* nom + commentaire */
180px /* de qui / à qui */
96px /* date */
64px /* taille */
132px /* état */
72px; /* actions */
align-items: center;
gap: var(--rg-espace-4);
padding: var(--rg-espace-3) var(--rg-espace-4);
border-radius: var(--r-md);
cursor: pointer;
border: var(--rg-trait-1) solid transparent;
transition:
background var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease);
}
.docl:focus-within {
background: var(--surface);
border-color: var(--border);
}
@media (hover: hover) { .docl:hover {
background: var(--surface);
border-color: var(--border);
} }
.docl__t {
justify-self: start;
flex: none;
}
.docl__c { min-width: 0; }
.docl__n {
margin: 0;
font-size: var(--fs-sm);
font-weight: var(--rg-graisse-semi);
color: var(--text);
line-height: var(--rg-interligne-fort);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Le commentaire tient sur UNE ligne coupée. Il éclaire le nom,
il ne le remplace pas, avant, il criait sur deux lignes en
italique et c'est lui qu'on lisait d'abord. */
.docl__com {
margin: calc(var(--rg-espace-1) / 2) 0 0;
font-size: var(--fs-2xs);
color: var(--text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.docl__qui {
display: flex;
align-items: center;
gap: var(--rg-espace-2);
margin: 0;
min-width: 0;
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-moyen);
}
.docl__qui svg { width: 14px; height: 14px; flex: none; }
.docl__qui span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Exactement les deux teintes que portait déjà la flèche sur
l'ancienne carte : la liste change de forme, pas de langage. */
.docl__qui--recu { color: var(--rg-piste-vert); }
.docl__qui--envoye { color: var(--rg-marine-0); }
.docl__q,
.docl__p {
margin: 0;
font-size: var(--fs-2xs);
color: var(--text-muted);
white-space: nowrap;
}
.docl__p { text-align: right; font-variant-numeric: tabular-nums; }
/* L'ÉTAT, EN TOUTES LETTRES.
Il remplace un bouclier, un œil barré et un bandeau, trois
signes pour deux réglages. Un pictogramme sans libellé ne
s'explique jamais tout seul ; là on lit « Sensible · lecture
protégée » et il n'y a rien à deviner. */
.docl__e {
margin: 0;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
color: var(--text-faint);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.docl.is-prot .docl__e { color: var(--accent); }
/* Modifier et supprimer n'apparaissent qu'au survol, et au
clavier, par :focus-within, sinon ils seraient inatteignables
sans souris. Une action destructive ne doit pas attirer l'œil
avant le contenu. */
.docl__a {
display: flex;
gap: var(--rg-espace-1);
justify-content: flex-end;
opacity: 0;
transition: opacity var(--t-fast) var(--ease);
}
.docl:focus-within .docl__a { opacity: 1; }
@media (hover: hover) { .docl:hover .docl__a { opacity: 1; } }
/* Le flou d'un document sensible : le NOM reste lisible, sans
lui on ne saurait pas quel document on demande à ouvrir. Ce
sont le commentaire et le destinataire qui se cachent. */
.docl__masque {
filter: none;
user-select: none;
pointer-events: none;
}
.docl.is-flou .docl__e { color: var(--rg-metier-jaune); }
/* LE SENS, reçus / envoyés. Petit, groupé, gris : on doit voir
d'un coup d'œil que ce n'est pas la même question que les
dossiers, qui sont, eux, en gros à gauche. */
/* La recherche et le sens forment un bloc de droite : sans ca,
la recherche partait seule sur la ligne suivante et laissait
un trou au milieu de la barre. */
.docoutils {
display: flex;
align-items: center;
gap: var(--rg-espace-3);
margin-left: auto;
}
.docoutils + .crewbar__find { margin-left: 0; flex: 1 1 300px; }
.docsens {
display: inline-flex;
align-items: center;
gap: calc(var(--rg-espace-1) / 2);
padding: var(--rg-espace-1);
border-radius: var(--r-pill);
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
}
.docsens__b {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-1);
padding: var(--rg-espace-1) var(--rg-espace-3);
border: 0;
border-radius: var(--r-pill);
background: transparent;
color: var(--text-muted);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
cursor: pointer;
white-space: nowrap;
transition:
background var(--t-fast) var(--ease),
color var(--t-fast) var(--ease);
}
.docsens__b svg { width: 13px; height: 13px; }
.docsens__b i {
font-style: normal;
font-size: var(--fs-3xs);
color: var(--text-faint);
}
@media (hover: hover) { .docsens__b:hover { color: var(--text); } }
.docsens__b.is-on {
background: var(--plein-2);
color: var(--text);
}
.docsens__b.is-on i { color: var(--text-muted); }
/* ---------- Écrans étroits ----------
On ne rétrécit pas les colonnes jusqu'à l'illisible : on en
retire, de la moins utile à la plus utile. La taille part
d'abord, puis l'état passe sous le nom, puis la date. */
@media (max-width: 1400px) {
.docl { grid-template-columns: 46px minmax(0,1fr) 160px 92px 132px 72px; }
.docl__p { display: none; }
}
@media (max-width: 1120px) {
.docl { grid-template-columns: 46px minmax(0,1fr) 150px 92px 72px; }
.docl__e {
grid-column: 2;
grid-row: 2;
margin-top: calc(var(--rg-espace-1) / 2);
}
.docl { row-gap: 0; }
}
@media (max-width: 780px) {
.docl {
grid-template-columns: 46px minmax(0,1fr) 72px;
row-gap: calc(var(--rg-espace-1) / 2);
}
.docl__qui { grid-column: 2; grid-row: 2; }
.docl__q { grid-column: 2; grid-row: 3; }
.docl__e { grid-column: 2; grid-row: 4; }
.docl__a { opacity: 1; }
}
/* =========================================================
LA GED, espace Gestion, 2026-09-18
---------------------------------------------------------
Reprend la liste dense des Documents (`.docl`) et n'ajoute
que ce qui manque : une colonne de montants alignée à
droite, un état coloré, et le bandeau d'alertes.
Réutiliser plutôt que redéclarer : un quatrième vocabulaire
de liste dans le même intranet, c'est une raison de plus de
s'y perdre.
========================================================= */
/* LES COLONNES. Elles diffèrent de celles des Documents : ici
on lit un montant et une échéance, pas un expéditeur. */
.gedliste .docl {
grid-template-columns:
46px /* type */
minmax(0, 1fr) /* tiers + document */
120px /* montant */
130px /* échéance */
140px /* état */
72px; /* actions */
}
.gedliste--admin .docl {
grid-template-columns: 46px minmax(0, 1fr) 0 130px 140px 72px;
}
.gedl__m {
margin: 0;
text-align: right;
font-size: var(--fs-sm);
font-weight: var(--rg-graisse-semi);
font-variant-numeric: tabular-nums;
color: var(--text);
white-space: nowrap;
}
.gedl__m--vide { display: none; }
/* Le retard ne se signale pas par une pastille de plus : la
DATE elle-même devient rouge, et la ligne prend un liseré.
L'information est là où l'œil la cherche déjà. */
.docl__q.is-retard { color: var(--accent); font-weight: var(--rg-graisse-semi); }
.gedl.is-retard { box-shadow: none; }
.gedl__e { font-weight: var(--rg-graisse-semi); }
.gedl__e[data-ton="attente"] { color: var(--rg-metier-jaune); }
.gedl__e[data-ton="marche"] { color: var(--rg-piste-vert); }
.gedl__e[data-ton="fini"] { color: var(--text-muted); }
.gedl__e[data-ton="alarme"] { color: var(--accent); }
.gedtotal {
display: flex;
align-items: baseline;
justify-content: space-between;
margin: var(--rg-espace-4) 0 0;
padding: var(--rg-espace-3) var(--rg-espace-4) 0;
border-top: var(--rg-trait-1) solid var(--border);
}
.gedtotal span { font-size: var(--fs-2xs); color: var(--text-muted); }
.gedtotal b {
font-size: var(--fs-lg);
font-variant-numeric: tabular-nums;
color: var(--text);
}
/* LE BANDEAU D'ALERTES. Il ne paraît que s'il a quelque chose
à dire, un bandeau qui affiche « 0 en retard » tous les
matins finit par ne plus être lu du tout. */
.gedalerte {
display: flex;
flex-wrap: wrap;
gap: var(--rg-espace-3);
margin: 0 0 var(--rg-espace-4);
}
.gedalerte__c {
display: flex;
align-items: baseline;
gap: var(--rg-espace-3);
padding: var(--rg-espace-3) var(--rg-espace-4);
border-radius: var(--r-md);
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
cursor: pointer;
text-align: left;
transition: border-color var(--t-fast) var(--ease),
background var(--t-fast) var(--ease);
}
@media (hover: hover) { .gedalerte__c:hover { background: var(--surface-2); border-color: var(--border-2); } }
.gedalerte__c b {
font-size: var(--fs-2xl);
line-height: var(--rg-interligne-plein);
font-variant-numeric: tabular-nums;
}
.gedalerte__c span { font-size: var(--fs-2xs); color: var(--text-soft); }
.gedalerte__c i {
font-style: normal;
font-size: var(--fs-2xs);
color: var(--text-muted);
font-variant-numeric: tabular-nums;
margin-left: auto;
padding-left: var(--rg-espace-4);
}
.gedalerte__c--alarme { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.gedalerte__c--alarme b { color: var(--accent); }
.gedalerte__c--attente b { color: var(--rg-metier-jaune); }
/* LE CIRCUIT, dans la fiche : un chemin qu'on lit de gauche à
droite, et une seule action, celle de l'étape d'après. */
.gedcirc {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--rg-espace-2);
margin-bottom: var(--rg-espace-3);
}
.gedcirc__p {
padding: var(--rg-espace-1) var(--rg-espace-3);
border-radius: var(--r-pill);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
background: var(--surface);
color: var(--text-faint);
border: var(--rg-trait-1) solid var(--border);
white-space: nowrap;
}
.gedcirc__p.is-fait { color: var(--text-soft); background: var(--surface-2); }
.gedcirc__p.is-on {
color: var(--text);
border-color: var(--text-muted);
background: var(--plein-2);
}
.gedcirc__f {
width: 14px;
height: 1px;
background: var(--border-2);
flex: none;
}
.gedcirc__etat {
margin: 0 0 var(--rg-espace-3);
font-size: var(--fs-sm);
font-weight: var(--rg-graisse-gras);
}
.gedcirc__etat[data-ton="attente"] { color: var(--rg-metier-jaune); }
.gedcirc__etat[data-ton="marche"] { color: var(--rg-piste-vert); }
.gedcirc__etat[data-ton="fini"] { color: var(--text-muted); }
.gedcirc__etat[data-ton="alarme"] { color: var(--accent); }
.gedcirc__act { display: flex; align-items: center; gap: var(--rg-espace-3); flex-wrap: wrap; }
/* LE JOURNAL. Volontairement austère : ça se consulte, ça ne
se modifie pas. */
.gedjournal { list-style: none; margin: 0; padding: 0; }
.gedjournal li {
display: grid;
grid-template-columns: minmax(0, 150px) minmax(0, 1fr) auto;
gap: var(--rg-espace-3);
align-items: baseline;
padding: var(--rg-espace-2) 0;
border-bottom: var(--rg-trait-1) solid var(--border);
font-size: var(--fs-2xs);
}
.gedjournal li:last-child { border-bottom: 0; }
.gedjournal b { color: var(--text); font-weight: var(--rg-graisse-semi); }
.gedjournal span { color: var(--text-soft); }
.gedjournal i {
font-style: normal;
color: var(--text-faint);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* Le TTC calculé : une valeur, pas un champ. On ne doit pas
pouvoir cliquer dedans pour tenter de le corriger. */
.gedttc {
margin: 0;
padding: var(--rg-espace-3) 0 0;
font-size: var(--fs-lg);
font-weight: var(--rg-graisse-gras);
font-variant-numeric: tabular-nums;
color: var(--text);
}
.gedtri {
width: auto;
min-width: 150px;
padding: var(--rg-espace-2) var(--rg-espace-3);
font-size: var(--fs-2xs);
}
.gedmodes { display: grid; gap: var(--rg-espace-3); margin-bottom: var(--rg-espace-4); }
.gedmode {
display: block;
text-align: left;
padding: var(--rg-espace-4) var(--rg-espace-4);
border-radius: var(--r-md);
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
cursor: pointer;
transition: border-color var(--t-fast) var(--ease),
background var(--t-fast) var(--ease);
}
@media (hover: hover) { .gedmode:hover { background: var(--surface-2); } }
.gedmode.is-on { border-color: var(--accent); background: var(--accent-soft); }
.gedmode b { display: block; font-size: var(--fs-sm); color: var(--text); margin-bottom: var(--rg-espace-1); }
.gedmode span { font-size: var(--fs-2xs); color: var(--text-muted); }
@media (max-width: 1200px) {
.gedliste .docl { grid-template-columns: 46px minmax(0,1fr) 110px 120px 72px; }
.gedliste .docl .gedl__e { grid-column: 2; grid-row: 2; margin-top: calc(var(--rg-espace-1) / 2); }
.gedliste--admin .docl { grid-template-columns: 46px minmax(0,1fr) 0 120px 72px; }
}
@media (max-width: 780px) {
.gedliste .docl,
.gedliste--admin .docl { grid-template-columns: 46px minmax(0,1fr) 72px; }
.gedliste .docl .gedl__m { grid-column: 2; grid-row: 2; text-align: left; }
.gedliste .docl .docl__q { grid-column: 2; grid-row: 3; }
.gedliste .docl .gedl__e { grid-column: 2; grid-row: 4; }
.gedjournal li { grid-template-columns: 1fr; gap: calc(var(--rg-espace-1) / 2); }
}
/* ==========================================================
LA VERSION TÉLÉPHONE, posée le 2026-10-19
----------------------------------------------------------
TOUT ce bloc vit sous 720 px, et il est écrit EN DERNIER
dans la feuille. Les deux conditions comptent :
- la media query garantit que le PC ne voit jamais rien de
ce qui suit ;
- la position en fin de fichier garantit que ces règles
gagnent contre les composants déclarés plus haut, puisque
une media query n'ajoute AUCUNE spécificité. Le sélecteur
d'espace s'était déjà fait avoir à ce piège.
Le parti pris : ce n'est pas le PC rétréci. La sidebar
disparaît, la navigation descend au pouce, l'en-tête parle
de la personne et non de la page, et les cartes s'arrondissent
franchement (20 px contre 8 sur PC, un téléphone se tient
dans la main, pas devant soi).
========================================================== */
/* ⚠️ HORS MEDIA QUERY, ET C'EST INDISPENSABLE.
Les trois éléments de la coquille mobile sont construits sur
TOUTES les tailles d'écran : c'est plus simple, et une
rotation de tablette ne demande alors aucun rechargement.
C'est donc le CSS, et lui seul, qui décide qui les voit.
Sans cette ligne, l'en-tête mobile, un sans aucune
règle au-dessus de 720 px, donc un bloc ordinaire, se
glissait en tête de la colonne principale sur le PC et
poussait toute la page vers le bas. Le défaut était invisible
à la relecture du code et net à la comparaison d'images. */
.mobhead,
.mobnav,
.mobsheet { display: none; }
/* ==========================================================
LE SYSTEME TYPOGRAPHIQUE
----------------------------------------------------------
Pose apres les composants : ce bloc a le dernier mot sur la
famille, la taille et la graisse de chaque type de texte.
Toutes les valeurs viennent des roles declares dans :root, il n'y a aucun nombre en dur ici.
========================================================== */
/* ---------- TITRES, Saira ---------- */
/* hero : le grand titre d'une page */
.hero__title,
.page-hero__title,
.login-title {
font-family: var(--font-display); font-style: var(--rg-titre-style);
font-size: var(--t-hero-s);
font-weight: var(--t-hero-w);
font-stretch: var(--titre-largeur);
line-height: var(--rg-interligne-plein);
letter-spacing: var(--rg-chiffre-xl-espacement);
}
/* section : titre de bloc, de widget, de fenetre */
.widget__title,
.modal__title,
.form-section__title,
.plf__n span,
.orga__t {
font-family: var(--font-display); font-style: var(--rg-titre-style);
font-size: var(--t-section-s);
font-weight: var(--t-section-w);
font-stretch: var(--titre-largeur);
letter-spacing: var(--rg-display-l-espacement);
}
/* en majuscules, un titre a besoin d'air et non de serrage */
.plf__n span { letter-spacing: 0; }
/* chrome : la barre du haut */
.topbar__heading {
font-family: var(--font-display); font-style: var(--rg-titre-style);
font-size: var(--t-chrome-s);
font-weight: var(--t-chrome-w);
font-stretch: var(--titre-largeur);
}
/* carte : titre de carte, nom de personne */
.ocard__n,
.ttcard__name,
.place-preview__name,
.create-card__title,
.rbl__nom,
.place-name,
.crew-name {
font-family: var(--font-display); font-style: var(--rg-titre-style);
font-size: var(--t-carte-s);
font-weight: var(--t-carte-w);
font-stretch: var(--titre-largeur);
}
/* ---------- TEXTES, IBM Plex Sans ---------- */
/* intro : le chapo sous un titre */
.page-hero__sub,
.hero__sub,
.login-sub {
font-family: var(--font-base);
font-size: var(--x-intro-s);
font-weight: var(--x-intro-w);
}
/* libelle : libelles de champs */
.form-label,
.su-field__label {
font-family: var(--font-base);
font-size: var(--x-libelle-s);
font-weight: var(--x-libelle-w);
}
/* second : aides, notes, legendes */
.form-help,
.su-field__help,
.su-gate__hint,
.plf__hint,
.ttf__aide,
.delay-hint,
.create-card__text,
.dash-empty,
.crew-photo-upload__hint,
.place-cover-upload__hint,
.su-photo-row__hint {
font-family: var(--font-base);
font-size: var(--x-second-s);
font-weight: var(--x-second-w);
}
/* micro : mentions, pieds */
.login-fineprint,
.profile-widget__role {
font-family: var(--font-base);
font-size: var(--x-micro-s);
font-weight: var(--x-micro-w);
}
/* ---------- DONNEES, JetBrains Mono ---------- */
/* code : initiales, indicatifs, categories */
.ocard__ph,
.crew-avatar,
.topbar__avatar,
.space-pick__mark,
.place-flag,
.place-preview__cc,
.plf__n,
.ttcard__cat {
font-family: var(--font-mono);
font-weight: var(--d-code-w);
font-feature-settings: "zero" 1;
}
/* la marque de couverture garde sa taille : c'est un element graphique */
.place-preview__cover-mark {
font-family: var(--font-mono);
font-feature-settings: "zero" 1;
}
/* donnee : heures, dates, quantites, references.
Chiffres de largeur fixe pour que les colonnes s'alignent,
et zero barre : on ne confond plus 0 et O. */
/* Crew : les effectifs, dans les titres de l'organigramme */
.orga__grp-t > i,
.orga__sec > i,
.orga__eq-t > i,
.crewbar__tab > i,
/* Timetable : heures, durees, compteurs de jours et d'evenements */
.ttf__titre > i,
.evf__titre > i,
.ttcard__foot > b,
.ttev__h > em,
.ttloupe > b,
.ttdr__j > i,
.ttc__now > i,
/* Dashboard */
.agenda__time,
.ttc__hour,
.ttc__daynum,
.ttc__daydate,
.ttc__daycount,
.tt-event__time,
.tt-event__time-start,
.tt-event__time-duration,
.tt-event__time-planned,
.tt-event__delay-badge,
.tt-day__num,
.tt-day__date-sub,
.tt-day__count,
.rbtop__b b,
.rbj__d b,
.rbj__h,
.rbt__h b,
.rbe__c b,
.rbv__b b,
.rbl__n b,
.rbl__meta,
.rbch__q,
.rbh__reste b,
.rbp__n,
.tab-toggle__count,
.nav-item__badge,
.dash-task__count,
.dash-day__date,
.dash-day__chiffre,
.dash-score,
.dash-week__day,
.dash-edt__day,
.edt-table__num,
.ttcard__dates,
.place-preview__quand,
.place-countdown,
.ttf__nbj,
.delay-quick,
.delay-custom__unit,
.place-preview__trajet b,
.bil-compte {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-feature-settings: "zero" 1;
}
@media (max-width: 720px) {
.mobsheet { display: block; }
/* UNE OMBRE À NOUS. `--shadow` (12 px de flou sur 32) est
dessinée pour deux ou trois cartes espacées sur un grand
écran ; empilée quinze fois dans une colonne de 390 px elle
empâte tout. Celle-ci ne fait que DÉCOLLER la carte du fond,
ce qui est tout ce qu'on lui demande. */
:root { --mob-ombre: none; }
:root[data-theme="light"] { --mob-ombre: none; }
/* ---- La colonne de gauche n'existe plus ---- */
.sidebar { display: none !important; }
body.sidebar-open::before { display: none; }
.topbar { display: none; }
.page-body {
/* 104 px en bas : la barre fait 60 px, plus la zone
d'accueil de l'iPhone et un peu d'air. Sans ça, la
dernière carte se glisse sous la barre et on ne peut
plus la lire. */
/* La barre flotte : 64 px de haut, 10 px de marge basse, et
de l'air pour que la dernière carte ne vienne pas lécher
son ombre. */
padding: var(--rg-espace-1) var(--rg-espace-4) calc(var(--rg-espace-9) + env(safe-area-inset-bottom, 0));
max-width: none;
}
/* ======================================================
L'EN-TÊTE : UNE PERSONNE, PAS UN FIL D'ARIANE
------------------------------------------------------
Sur PC la barre du haut dit « ESPACE › Dashboard » : on a
besoin de savoir où l'on est dans une arborescence. Sur
téléphone la barre du bas le dit déjà, en permanence. La
place est donc rendue à ce qu'un téléphone fait mieux :
reconnaître son propriétaire d'un coup d'œil.
====================================================== */
.mobhead {
position: sticky;
top: 0;
z-index: 40;
display: flex;
align-items: center;
gap: var(--rg-espace-3);
/* HAUTEUR FIXE, et c'est utile au-delà de l'esthétique : les
barres collantes des pages (celle du timetable) se calent
dessous avec un `top` chiffré. Une hauteur qui dépend du
contenu n'est pas un repère. */
height: 62px;
padding: 0 var(--rg-espace-4);
/* AUCUN FOND AU REPOS.
Un fond, même à 82 % de la couleur de la page, ne tombe
jamais exactement sur le dégradé qui est dessous : il
dessinait une COUTURE horizontale nette sous l'en-tête, et
une couture se lit comme deux morceaux d'interface cousus
l'un à l'autre. Le fond n'apparaît que lorsqu'il sert à
quelque chose, c'est-à-dire quand du contenu passe
dessous. */
background: transparent;
transition: background var(--t-base) var(--ease);
}
.mobhead.is-collee {
background: color-mix(in srgb, var(--bg) 86%, transparent);
}
.mobhead__ava {
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: var(--rg-rayon-0);
border: 0;
background: var(--accent);
color: var(--brand-white);
font-family: var(--rg-police-texte);
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-gras);
letter-spacing: 0;
cursor: pointer;
}
.mobhead__who {
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--rg-trait-1);
}
.mobhead__hi {
font-size: var(--fs-3xs);
color: var(--text-muted);
line-height: var(--rg-interligne-court);
}
.mobhead__name {
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-semi);
color: var(--text);
line-height: var(--rg-interligne-court);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* La pastille d'espace reprend celle du sélecteur PC : même
code à deux lettres, même neutralité. Elle ouvre la même
feuille que « Plus », où vit le changement d'espace, pas
un second menu qui ferait double emploi. */
/* Le thème prend le `margin-left: auto` : c'est lui qui pousse
le groupe de droite, la pastille se range juste après. */
/* Un bouton d'ICÔNE est rond, un bouton de CODE est carré :
la forme dit déjà lequel des deux on touche, avant de lire. */
.mobhead__theme {
margin-left: auto;
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: var(--rg-rayon-0);
background: var(--plein);
border: var(--rg-trait-1) solid var(--border);
}
@media (hover: hover) { .mobhead__theme:hover { transform: none; } }
.mobhead__theme svg { width: 17px; height: 17px; }
.mobhead__esp {
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: var(--rg-rayon-0);
border: var(--rg-trait-1) solid var(--border-2);
background: var(--plein);
color: var(--text);
font-family: var(--rg-police-texte);
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-gras);
letter-spacing: 0;
cursor: pointer;
}
/* ======================================================
LA BARRE BASSE
------------------------------------------------------
Cinq emplacements : accueil, deux pages de l'espace, le
bouton de création au centre, et « Plus ». Les pages qui
ne tiennent pas en bas ne disparaissent pas, elles sont
toutes dans la feuille « Plus ».
====================================================== */
/* ELLE FLOTTE, ET CE N'EST PAS DÉCORATIF.
Une bande pleine largeur collée au bas de l'écran avec un
filet au-dessus, c'est un PIED DE PAGE de site web, l'œil
le lit comme la fin du document. Une barre détachée des
bords, arrondie et posée sur une ombre, se lit comme un
objet qui flotte AU-DESSUS du contenu : c'est la différence
entre « je suis sur un site » et « je suis dans une appli »,
et elle tient presque entièrement à ces quatre valeurs. */
.mobnav {
position: fixed;
left: 12px;
right: 12px;
bottom: calc(10px + env(safe-area-inset-bottom, 0px));
z-index: 60;
display: grid;
grid-template-columns: repeat(5, 1fr);
align-items: center;
gap: calc(var(--rg-espace-1) / 2);
padding: var(--rg-espace-2);
border-radius: var(--rg-rayon-0);
/* Opaque, et pas un voile : une barre translucide posée sur
du contenu qui défile dessous donne une bouillie. */
background: var(--plein);
border: var(--rg-trait-1) solid var(--border);
box-shadow: none;
}
:root[data-theme="light"] .mobnav {
box-shadow: none;
}
.mobnav__t {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--rg-espace-1);
/* 50 px : au-dessus des 44 px sous lesquels une cible
tactile se rate une fois sur trois. */
min-height: 50px;
padding: var(--rg-espace-1) calc(var(--rg-espace-1) / 2);
border: 0;
background: transparent;
font-family: var(--rg-police-texte);
color: var(--text-muted);
text-decoration: none;
cursor: pointer;
}
.mobnav__ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 27px;
border-radius: var(--rg-rayon-0);
transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.mobnav__ico svg { width: 20px; height: 20px; }
.mobnav__lab {
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-moyen);
line-height: var(--rg-interligne-plein);
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* L'ONGLET ACTIF EST EN ENCRE, PAS EN ROUGE.
Il l'était, et il se retrouvait à deux centimètres du bouton
de création, rouge lui aussi : deux rouges côte à côte dans
une barre de 64 px, dont l'un dit « où je suis » et l'autre
« ce que je peux faire ». Aucun des deux ne ressortait.
Sur téléphone, le rouge ne sert donc plus qu'À UNE SEULE
CHOSE dans la coquille : le bouton de création. La position
courante se dit en pleine encre, c'est plus franc qu'une
teinte, et ça marche dans les deux thèmes sans réglage. */
.mobnav__t.is-active { color: var(--text); }
.mobnav__t.is-active .mobnav__ico {
background: var(--text);
color: var(--bg);
}
.mobnav__t.is-active .mobnav__lab { font-weight: var(--rg-graisse-gras); }
.mobnav__t--vide { pointer-events: none; }
/* IL REDESCEND DANS LA BARRE.
Surélevé, il lui fallait un anneau de la couleur du fond
pour se détacher, or la barre flotte maintenant, donc cet
anneau chevauchait deux fonds différents et bavait sur l'un
des deux. Posé dans la barre, il n'a plus rien à masquer :
c'est le seul disque plein rouge de l'écran, il se voit. */
.mobnav__plus {
justify-self: center;
width: 46px;
height: 46px;
border-radius: var(--rg-rayon-0);
border: 0;
background: var(--accent);
color: var(--brand-white);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: none;
}
.mobnav__plus svg { width: 23px; height: 23px; }
/* ======================================================
LA FEUILLE, un seul composant, deux contenus
====================================================== */
.mobsheet { position: fixed; inset: 0; z-index: 90; }
.mobsheet[hidden] { display: none; }
.mobsheet__fond {
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--rg-marine-8) 50%, transparent);
animation: mobFondIn var(--rg-duree) var(--ease) both;
}
.mobsheet__pan {
position: absolute;
left: 0;
right: 0;
bottom: 0;
max-height: 82vh;
overflow-y: auto;
padding: var(--rg-espace-3) var(--rg-espace-4) calc(var(--rg-espace-5) + env(safe-area-inset-bottom, 0));
border-radius: var(--rg-rayon-0) var(--rg-rayon-0) var(--rg-rayon-0) var(--rg-rayon-0);
background: var(--plein);
border-top: var(--rg-trait-1) solid var(--border-2);
animation: mobSheetIn calc(var(--rg-duree) * 1.5) var(--ease) both;
}
.mobsheet__poignee {
display: block;
width: 38px;
height: 4px;
margin: 0 auto var(--rg-espace-3);
border-radius: var(--rg-rayon-0);
background: var(--border-2);
}
.mobsheet__titre {
margin: 0 0 var(--rg-espace-3);
padding: 0 var(--rg-espace-2);
font-size: var(--fs-lg);
font-weight: var(--rg-graisse-semi);
color: var(--text);
}
.mobsheet__sect {
margin: var(--rg-espace-4) 0 var(--rg-espace-2);
padding: 0 var(--rg-espace-2);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--text-muted);
}
.mobsheet__sect:first-child { margin-top: calc(var(--rg-espace-1) / 2); }
.mobrow {
width: 100%;
display: flex;
align-items: center;
gap: var(--rg-espace-3);
min-height: 50px;
padding: var(--rg-espace-2) var(--rg-espace-3);
border: 0;
border-radius: var(--rg-rayon-0);
background: transparent;
font-family: var(--rg-police-texte);
text-align: left;
color: var(--text);
cursor: pointer;
}
.mobrow:active { background: var(--surface-2); }
.mobrow__ico {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
color: var(--text-soft);
}
.mobrow__ico svg { width: 20px; height: 20px; }
.mobrow__code {
flex-shrink: 0;
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--rg-rayon-0);
border: var(--rg-trait-1) solid var(--border-2);
background: var(--surface-2);
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-gras);
}
.mobrow__txt { min-width: 0; display: flex; flex-direction: column; gap: var(--rg-trait-1); }
.mobrow__lab { font-size: var(--fs-sm); font-weight: var(--rg-graisse-moyen); }
.mobrow__sub { font-size: var(--fs-3xs); color: var(--text-muted); }
.mobrow.is-current .mobrow__lab { color: var(--accent); font-weight: var(--rg-graisse-semi); }
body.mob-sheet-open { overflow: hidden; }
@keyframes mobFondIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes mobSheetIn { from { transform: translateY(14%); opacity: 0; }
to { transform: translateY(0); opacity: 1; } }
/* ======================================================
LE DASHBOARD
====================================================== */
.mobdash { padding: var(--rg-espace-2) 0 var(--rg-espace-1); }
/* En sourdine, et surtout PAS en accent : l'accent dit
« l'onglet où je suis » et « l'action », trois rouges sur
un même écran, et plus aucun ne veut dire quoi que ce soit. */
.mobdash__eyebrow {
margin: 0 0 var(--rg-espace-2);
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--text-muted);
}
/* LE TITRE ÉDITORIAL. C'est la phrase d'actualité, la course
en cours, la journée qui vient, les invitations à traiter.
Sur PC elle est un sous-titre discret sous « Bonjour X » ;
ici c'est la raison même d'ouvrir l'application, donc elle
prend la taille qui va avec. Le bonjour, lui, est monté
dans l'en-tête. */
.mobdash__titre {
margin: 0 0 var(--rg-espace-4);
font-size: var(--rg-taille-h2);
font-weight: var(--rg-graisse-semi);
line-height: var(--rg-interligne-court);
letter-spacing: var(--rg-chiffre-xl-espacement);
color: var(--text);
/* Trois lignes au maximum. Une phrase d'actualité peut être
longue (« Week-end de course en cours à Lusail
International Circuit ») et à cette taille elle mangeait
tout le premier écran, la carte passait sous le pli. */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.mobdash__feat {
display: block;
min-height: 168px;
border-radius: var(--rg-rayon-0);
margin-bottom: var(--rg-espace-1);
box-shadow: none;
}
@media (hover: hover) { .mobdash__feat:hover { transform: none; } }
/* L'en-tête de section : titre à gauche, lien à droite, le
« View all » des applications. */
.mobsec {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--rg-espace-3);
margin: var(--rg-espace-5) 0 var(--rg-espace-3);
}
.mobsec__titre {
margin: 0;
font-size: var(--fs-md);
font-weight: var(--rg-graisse-semi);
color: var(--text);
}
/* « Personnaliser » est un lien de section, pas une alerte.
En rouge il pesait autant que le bouton de création, pour un
réglage qu'on touche une fois par trimestre. */
.mobsec__lien {
border: 0;
background: transparent;
padding: var(--rg-espace-1) 0;
font-family: var(--rg-police-texte);
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-semi);
color: var(--text-muted);
cursor: pointer;
}
/* ======================================================
LES WIDGETS : DEUX FORMATS, PAS QUATRE
------------------------------------------------------
Dans une seule colonne, « span 2 » et « span 4 » disent la
même chose. On garde donc la tuile condensée, deux par
ligne, comme les petites cartes de mesure d'une appli de
suivi, et la carte pleine largeur. Le choix vient du
format réglé sur PC : un widget mis en « compact » reste
une tuile ici.
====================================================== */
.grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--rg-espace-4);
}
/* DES CARTES, PAS DES ZONES.
`--surface` vaut du blanc à 4 % : sur le fond marine, une
carte dessinée avec ne se détache de rien, et la page se lit
comme un long document plutôt que comme une pile d'objets.
`--plein` est une vraie couleur opaque (#0A1A33 en sombre,
blanc en clair) ; avec une ombre courte, la carte décolle. */
.widget {
border-radius: var(--rg-rayon-0);
padding: var(--gap);
background: var(--plein);
border: var(--rg-trait-1) solid var(--border);
box-shadow: none;
}
.widget[data-format="mlg"] { grid-column: span 2; }
/* Rien ne décolle au doigt. Sur un écran tactile, `:hover`
reste accroché après la tape : la carte touchée restait
soulevée jusqu'à ce qu'on en touche une autre. */
@media (hover: hover) { .widget:hover,
.mobrow:hover {
transform: none;
border-color: var(--border);
box-shadow: none;
} }
.widget[data-format="msm"] {
grid-column: span 1;
padding: var(--rg-espace-4) var(--rg-espace-4);
gap: var(--rg-espace-2);
align-self: start;
}
.widget[data-format="msm"] .widget__subtitle,
.widget[data-format="msm"] .widget__action { display: none; }
.widget[data-format="msm"] .widget__icon {
width: 28px; height: 28px; border-radius: var(--rg-rayon-0);
}
.widget[data-format="msm"] .widget__icon svg { width: 15px; height: 15px; }
.widget[data-format="msm"] .widget__title { font-size: var(--fs-2xs); }
.widget[data-format="msm"] .widget__body { min-height: 56px; }
/* Pas de boîte qui défile DANS une page qui défile : sur un
écran tactile, le doigt ne sait pas laquelle des deux il
commande. Les listes s'allongent, c'est tout. */
.widget__body { max-height: none; overflow: visible; }
/* ======================================================
LES PAGES ORDINAIRES
====================================================== */
/* LE PARAGRAPHE D'EXPLICATION SAUTE SUR TÉLÉPHONE.
Ces textes expliquent à quoi sert l'onglet : ils ont leur
place sur un grand écran, à la première visite. Sur un
téléphone, ils occupaient trois à quatre lignes en haut de
CHAQUE page, l'écran entier passait en préambule avant la
moindre donnée. Or on vient d'appuyer sur l'onglet : on sait
où on est. */
.page-hero__sub { display: none; }
.page-hero,
.page-hero--mince {
padding-top: calc(var(--rg-espace-1) / 2);
margin-bottom: var(--rg-espace-4);
}
.page-hero__row {
flex-direction: column;
align-items: flex-start;
gap: var(--rg-espace-3);
}
.page-hero__title, .hero__title, .login-title { font-size: var(--rg-taille-h2); line-height: var(--rg-interligne-titre); }
/* Le panneau de personnalisation est un atelier à deux
colonnes : sur un téléphone il prend tout l'écran plutôt
que de s'écraser dans 560 px. */
.modal--sheet, .modal--sheet.modal--wide, .modal--wide {
width: 100vw;
max-width: 100vw;
}
/* LA BARRE DU TIMETABLE DÉBORDAIT DE 40 PX.
Elle est dessinée pour « saigner » jusqu'aux bords de la
page : marges négatives de 36 px (le retrait du PC) et
padding de 36 px pour compenser. Sur téléphone le retrait
tombe à 16 px, donc les -36 px dépassaient de 20 px de
chaque côté et toute la page partait en défilement
horizontal, avec les boutons de droite hors de l'écran.
Les deux valeurs se recalent sur le retrait mobile.
Et elle se colle sous l'en-tête mobile (62 px), pas sous
une barre de bureau qui n'existe plus ici. */
.ttop {
top: 62px;
margin: calc(var(--rg-espace-1) * -1) calc(var(--rg-espace-4) * -1) var(--rg-espace-4);
padding: 0 var(--rg-espace-4);
gap: var(--rg-espace-2);
}
/* Et son CONTENU dépassait encore de 14 px après ça. Le nom du
jour est en `white-space: nowrap` : « Day 1 Installation &
revision Oct 19 » ne rétrécit jamais, il pousse. On le laisse
donc se tronquer proprement plutôt que d'élargir la page. */
.ttop__nav {
margin: 0;
min-width: 0;
flex: 1 1 auto;
}
.ttop__nav span {
display: block;
min-width: 0;
flex: 1 1 auto;
padding: 0 var(--rg-espace-1);
overflow: hidden;
text-overflow: ellipsis;
}
/* Catégorie · circuit · dates · nombre d'événements : la ligne
était déjà écrasée à zéro par le manque de place. On
l'assume au lieu de la laisser jouer sur la largeur. */
.ttop__id { display: none; }
.ttop__act { gap: var(--rg-espace-1); }
/* ======================================================
LA BARRE DE COMMANDE DES LISTES
------------------------------------------------------
`.docoutils` (les filtres de Documents et de la GED) est
une rangée flex SANS retour à la ligne : sur la GED elle
mesurait 899 px dans un écran de 390, et poussait toute la
page à 915 px de large. Le défilement horizontal d'une
page entière est la pire des sorties, on perd le bord
droit de chaque ligne sans s'en rendre compte.
Elle devient un rail de puces qui défile latéralement,
comme dans n'importe quelle application : le geste est
local, il ne déplace plus la page.
====================================================== */
.crewbar {
gap: var(--rg-espace-3);
margin-bottom: var(--rg-espace-4);
}
.docoutils {
margin-left: 0;
width: 100%;
gap: var(--rg-espace-2);
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.docoutils::-webkit-scrollbar { display: none; }
.docoutils > * { flex: 0 0 auto; }
.crewbar__find,
.docoutils + .crewbar__find {
margin-left: 0;
min-width: 0;
flex: 1 1 100%;
}
/* Même traitement pour les rangées d'onglets d'une liste :
elles passent déjà à la ligne, mais sur 390 px elles
empilaient jusqu'à quatre rangs avant la première donnée. */
.crewbar__tabs {
flex-wrap: nowrap;
width: 100%;
overflow-x: auto;
scrollbar-width: none;
}
.crewbar__tabs::-webkit-scrollbar { display: none; }
.crewbar__tabs > * { flex: 0 0 auto; }
/* ======================================================
L'EMPLOI DU TEMPS, DEUX VUES
------------------------------------------------------
Le tableau de la quinzaine n'est pas affiché ici : il est
remplacé, pas rétréci. Voir le commentaire du module
`edtMobileHtml` dans script.js pour le pourquoi.
⚠️ CE BLOC DORT. `MOB_EDT_VUES` est à `false` dans
script.js depuis le 2026-10-19 : l'espace Gestion ne fait
pas partie de l'application téléphone, « tout ça se fera
sur ordinateur ». Les deux vues sont éprouvées et prêtes ;
remettre le drapeau à `true` les rallume avec ce CSS. Ne
pas supprimer en croyant à du mort.
Pas de règle pour masquer le tableau : quand les vues sont
allumées, il n'est tout simplement pas construit. Une règle
qui vise un élément absent, c'est du CSS que le prochain
lecteur croira utile.
====================================================== */
/* LA BARRE DE RÉGLAGES AVANT LES DONNÉES.
Espace, quinzaine, matériel, légende, export : cinq
commandes, et sur 390 px elles occupaient tout le premier
écran avant la moindre ligne de planning. On les resserre
sans en retirer aucune, ce sont toutes des commandes
qu'elle utilise. */
.edt-bar { gap: var(--rg-espace-3); margin-bottom: var(--rg-espace-3); }
.edt-spaces { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
.edt-spaces__btn { min-height: 38px; }
.edt-period {
width: 100%;
gap: var(--rg-espace-2);
}
.edt-period__label {
flex: 1 1 auto;
min-width: 0;
text-align: center;
font-size: var(--fs-sm);
white-space: nowrap;
}
.edt-picker__nav { flex: 0 0 auto; }
.edt-picker__today {
flex: 0 0 auto;
padding: 0 var(--rg-espace-3);
font-size: var(--fs-3xs);
white-space: nowrap;
}
.edt-toggle-res { min-height: 40px; }
/* L'export est une action de bureau : on garde le bouton, mais
il ne précède plus le planning en pleine largeur. */
.page-hero .hero-actions { width: 100%; }
.page-hero .hero-actions .btn-secondary {
width: 100%;
min-height: 42px;
font-size: var(--fs-xs);
}
.edtm { margin-top: calc(var(--rg-espace-1) / 2); }
/* La bascule : deux positions, jamais trois. */
.edtm__bascule {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--rg-espace-1);
padding: var(--rg-espace-1);
margin-bottom: var(--rg-espace-4);
border-radius: var(--rg-rayon-0);
background: var(--surface);
border: var(--rg-trait-1) solid var(--border);
}
.edtm__bb {
min-height: 38px;
border: 0;
border-radius: var(--rg-rayon-0);
background: transparent;
font-family: var(--rg-police-texte);
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-semi);
color: var(--text-muted);
cursor: pointer;
}
.edtm__bb.is-active {
background: var(--rg-texte-principal);
color: var(--rg-texte-inverse);
}
/* LA BANDE DE DATES.
Quatorze jours ne tiennent pas de front : elle défile
latéralement et se recentre toute seule sur le jour choisi.
Le geste est local, il ne déplace pas la page. */
.edtm__bande {
display: flex;
gap: var(--rg-espace-2);
margin: 0 calc(var(--rg-espace-4) * -1) var(--rg-espace-4);
padding: calc(var(--rg-espace-1) / 2) var(--rg-espace-4) var(--rg-espace-2);
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.edtm__bande::-webkit-scrollbar { display: none; }
.edtm__jour {
flex: 0 0 auto;
width: 46px;
min-height: 56px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: calc(var(--rg-espace-1) / 2);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--rg-rayon-0);
background: var(--surface);
font-family: var(--rg-police-texte);
color: var(--text-soft);
cursor: pointer;
}
.edtm__jour i {
font-style: normal;
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--text-muted);
}
.edtm__jour b { font-size: var(--fs-md); font-weight: var(--rg-graisse-semi); }
.edtm__jour.is-weekend { background: transparent; }
.edtm__jour.is-ferie { border-color: var(--border-2); }
/* Aujourd'hui est CERCLÉ, le jour choisi est REMPLI : deux
informations différentes, donc deux signes différents. Les
confondre, c'est ne plus savoir lequel on regarde. */
.edtm__jour.is-today { border-color: var(--accent); }
.edtm__jour.is-active {
background: var(--rg-texte-principal);
border-color: var(--rg-texte-principal);
color: var(--rg-texte-inverse);
}
.edtm__jour.is-active i { color: color-mix(in srgb, var(--rg-texte-inverse) 72%, transparent); }
.edtm__titre {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: var(--rg-espace-2);
margin: 0 0 var(--rg-espace-3);
font-size: var(--fs-lg);
font-weight: var(--rg-graisse-semi);
color: var(--text);
}
.edtm__titre em {
font-style: normal;
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--text-muted);
}
/* Le sélecteur de personne : natif, pour ouvrir la roue du
système plutôt qu'une liste maison de trente lignes. */
.edtm__choix {
display: flex;
flex-direction: column;
gap: var(--rg-espace-1);
margin-bottom: var(--rg-espace-4);
}
.edtm__choix > span {
font-size: var(--fs-3xs);
font-weight: var(--rg-graisse-semi);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--text-muted);
}
.edtm__choix select {
width: 100%;
min-height: 46px;
padding: 0 var(--rg-espace-3);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--rg-rayon-0);
background: var(--surface);
color: var(--text);
font-family: var(--rg-police-texte);
font-size: var(--fs-sm);
}
.edtm__ro {
margin: calc(var(--rg-espace-2) * -1) 0 var(--rg-espace-4);
font-size: var(--fs-3xs);
color: var(--text-muted);
}
.edtm__liste {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--rg-espace-2);
}
.edtm__l {
padding: var(--rg-espace-3) var(--rg-espace-4);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--rg-rayon-0);
background: var(--plein);
box-shadow: none;
}
.edtm__l.is-res { border-color: var(--border-2); }
.edtm__l.is-today { border-color: var(--accent); }
.edtm__l.is-weekend { background: transparent; }
.edtm__qui {
display: flex;
align-items: baseline;
gap: var(--rg-espace-2);
margin-bottom: var(--rg-espace-2);
}
.edtm__nom {
font-size: var(--fs-sm);
font-weight: var(--rg-graisse-semi);
color: var(--text);
}
.edtm__role {
min-width: 0;
font-size: var(--fs-3xs);
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Les deux demi-journées côte à côte, de taille égale : le
matin ne vaut pas plus que l'après-midi. */
.edtm__demis {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--rg-espace-2);
}
.edtm__demi {
min-height: 50px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: calc(var(--rg-espace-1) / 2);
padding: var(--rg-espace-2) var(--rg-espace-3);
border: 0;
border-radius: var(--rg-rayon-0);
font-family: var(--rg-police-texte);
text-align: left;
cursor: pointer;
overflow: hidden;
}
.edtm__demi i {
font-style: normal;
font-size: var(--rg-taille-label-s);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
opacity: 0.68;
}
.edtm__demi b {
max-width: 100%;
font-size: var(--fs-2xs);
font-weight: var(--rg-graisse-semi);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Une demi-journée vide est un TROU À REMPLIR, pas une case
grise de plus : le trait discontinu le dit sans couleur. */
.edtm__demi--vide {
border: var(--rg-trait-1) dashed var(--border-2);
background: transparent;
color: var(--text-muted);
}
.edtm__demi.is-ro { cursor: default; }
.edtm__demi.is-track b::before {
content: "TRACK · ";
font-size: var(--rg-taille-label-s);
letter-spacing: var(--rg-label-m-espacement);
}
/* La légende repliée. */
.edtm__legende {
margin-bottom: var(--rg-espace-4);
border: var(--rg-trait-1) solid var(--border);
border-radius: var(--rg-rayon-0);
background: var(--surface);
}
.edtm__legende > summary {
min-height: 46px;
display: flex;
align-items: center;
padding: 0 var(--rg-espace-4);
font-size: var(--fs-xs);
font-weight: var(--rg-graisse-semi);
color: var(--text-soft);
cursor: pointer;
list-style: none;
}
.edtm__legende > summary::-webkit-details-marker { display: none; }
.edtm__legende > summary::after {
content: "＋";
margin-left: auto;
color: var(--text-muted);
}
.edtm__legende[open] > summary::after { content: "－"; }
.edtm__legende .edt-legende { margin: 0; padding: 0 var(--rg-espace-3) var(--rg-espace-3); border: 0; background: transparent; }
/* La barre est à z-index 60, les modales à 100 : une fiche
ouverte la recouvre d'elle-même. Rien à masquer. */
/* =======================================================
LE ROADBOOK SUR TÉLÉPHONE
-------------------------------------------------------
Son critère, mot pour mot : « quand on cherche une info
elle soit facile à trouvé et facile à comprendre ». Sept
pages déroulées dans une colonne de 390 px, ce n'est ni
l'un ni l'autre.
Donc : le barreau de sections devient un jeu d'ONGLETS,
une seule section à l'écran, et il reste collé en haut
pendant qu'on descend.
Et les quatre tableaux de son document ne rétrécissent
PAS : ils défilent sous le doigt, dans leur propre boîte,
colonne de gauche collée. Un tableau compressé à 390 px
ne se lit plus ; un tableau qu'on balaye, si, c'est
exactement ce qui marchait déjà pour le catering.
======================================================= */
/* L'onglet actif commande ce qui est à l'écran. C'est la
SEULE différence de structure entre les deux écrans :
sur l'ordinateur toutes les sections restent visibles et
le barreau sert d'ancres. */
.rbwrap > .rbsec { display: none; }
.rbwrap[data-rb-actif="vous"] > [data-rbsec="vous"],
.rbwrap[data-rb-actif="jours"] > [data-rbsec="jours"],
.rbwrap[data-rb-actif="equipe"] > [data-rbsec="equipe"],
.rbwrap[data-rb-actif="trajets"] > [data-rbsec="trajets"],
.rbwrap[data-rb-actif="hotels"] > [data-rbsec="hotels"],
.rbwrap[data-rb-actif="repas"] > [data-rbsec="repas"],
.rbwrap[data-rb-actif="emporter"] > [data-rbsec="emporter"],
.rbwrap[data-rb-actif="pieces"] > [data-rbsec="pieces"] { display: block; }
/* Une section seule à l'écran n'a plus besoin de sa boîte :
la page EST la section. */
.rbwrap > .rbsec.rb-bloc {
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
/* Le barreau collé : la navigation du document doit rester
sous le pouce, pas remonter avec le contenu. */
.rbnav {
position: sticky;
top: 62px;
z-index: 30;
margin: calc(var(--rg-espace-1) * -1) calc(var(--rg-espace-4) * -1) var(--rg-espace-4);
padding: var(--rg-espace-2) var(--rg-espace-4);
background: color-mix(in srgb, var(--bg) 92%, transparent);
gap: var(--rg-espace-2);
}
.rbnav__t { padding: var(--rg-espace-2) var(--rg-espace-4); font-size: var(--fs-xs); }
.rbnav__t.is-on {
border-color: transparent;
background: var(--text);
color: var(--bg);
}
.rbnav__t.is-on i { color: var(--bg); opacity: 0.6; }
.rbtop { grid-template-columns: repeat(2, 1fr); gap: var(--rg-espace-2); }
.rbtop__b { padding: var(--rg-espace-3) var(--rg-espace-3); border-radius: var(--r-xs); }
.rbtop__b b { font-size: var(--fs-md); }
.rb-retour { margin-bottom: var(--rg-espace-1); }
/* L'en-tête d'un bloc : sur 390 px, un titre et deux boutons
sur la même ligne, aucun n'est une cible confortable. Les
boutons descendent et se partagent la largeur. */
.rbsec .rb-bloc__h { flex-wrap: wrap; row-gap: var(--rg-espace-3); }
/* Le titre prend sa ligne, les boutons se partagent la
suivante. Sans ça le premier bouton reste collé au titre et
le second part seul à la ligne. */
.rbsec .rb-bloc__t { flex: 1 1 100%; }
.rbsec .rb-bloc__h .btn-secondary {
order: 3;
flex: 1 1 130px;
margin-left: 0;
text-align: center;
}
/* --- Les quatre tableaux : plein écran, défilement local,
jamais un débordement de page. --- */
.rbhl__w, .rbtt__w, .rbrm__w, .rbca__w {
margin-left: calc(var(--rg-espace-4) * -1);
margin-right: calc(var(--rg-espace-4) * -1);
border-radius: var(--rg-rayon-0);
border-left: 0;
border-right: 0;
}
.rbhl { grid-template-columns: 96px 38px minmax(128px, 1fr) minmax(120px, 1fr) 96px 96px; min-width: 620px; }
.rbtt { grid-template-columns: 108px minmax(96px, 1fr) 60px minmax(96px, 1fr) 60px 140px; min-width: 580px; }
.rbrm th.rbrm__coin { width: 152px; min-width: 152px; padding: var(--rg-espace-2) var(--rg-espace-3); }
.rbrm__ty { min-width: 60px; }
.rbrm__c, .rbrm__j { min-width: 66px; }
.rbca th.rbca__coin, .rbca th.rbca__p { width: 138px; min-width: 138px; padding: var(--rg-espace-1) var(--rg-espace-3); }
.rbca__j { min-width: 60px; }
.rbca__k { width: 24px; height: 24px; }
/* --- Le staff : le poste devient un bandeau, les noms
passent dessous. Deux colonnes sur 390 px donneraient une
colonne de noms de 200 px. --- */
.rbst2__r { grid-template-columns: 1fr; }
.rbst2__p {
border-right: 0;
border-bottom: var(--rg-trait-1) solid var(--border);
padding: var(--rg-espace-2) var(--rg-espace-4);
}
.rbst2__g { padding: var(--rg-espace-3) var(--rg-espace-4); gap: var(--rg-espace-2); }
.rbnc { padding: var(--rg-espace-2) var(--rg-espace-3); font-size: var(--fs-xs); }
/* --- Les véhicules : une colonne --- */
.rbv2__g { grid-template-columns: 1fr; }
.rbvh__b { grid-template-columns: 1fr; gap: var(--rg-espace-3); }
/* --- Les pièces jointes --- */
.rbpc__i { flex-wrap: wrap; gap: var(--rg-espace-2); }
.rbpc__o { width: 100%; }
/* --- « You » : deux colonnes, pas quatre --- */
.rbv__g { grid-template-columns: repeat(2, 1fr); gap: var(--rg-espace-4) var(--rg-espace-4); }
/* La fiche latérale est une modale du projet : elle est
déjà traitée dans le bloc des modales. Rien à reprendre
ici, et surtout rien à masquer, c'est par elle qu'on
saisit tout. */
}
/* =========================================================
ROADBOOK, LES SIX SECTIONS (ordinateur, puis téléphone)
Les teintes partent de la couleur pleine mélangée à la
surface : la même règle sert le thème clair et le sombre.
========================================================= */
.rbwrap {
--rbk-tr: var(--rg-marine-2); /* travel, management */
--rbk-in: var(--rg-metier-violet); /* install, engineering */
--rbk-co: var(--rg-rose-6); /* race, drivers */
--rbk-es: var(--rg-metier-orange-fonce); /* test, garage */
--rbk-ok: var(--rg-metier-vert-fonce);
--rbk-gn: var(--rg-piste-vert);
--rbk-ink: var(--rg-marine-5);
--rbk-ink-t: var(--rg-neutre-blanc);
--rbk-trait: var(--rg-neutre-brume);
--rbk-vide: var(--rg-neutre-papier);
--rbk-pale: var(--rg-neutre-papier);
}
:root:not([data-theme="light"]) .rbwrap {
--rbk-tr: var(--rg-marine-0);
--rbk-in: var(--rg-metier-violet-clair);
--rbk-co: var(--rg-rose-3);
--rbk-es: var(--rg-metier-orange-clair);
--rbk-ok: var(--rg-metier-vert-clair);
--rbk-ink: var(--rg-marine-4);
--rbk-trait: color-mix(in srgb, var(--rg-neutre-blanc) 12%, transparent);
--rbk-vide: color-mix(in srgb, var(--rg-neutre-blanc) 6%, transparent);
--rbk-pale: color-mix(in srgb, var(--rg-neutre-blanc) 3%, transparent);
}
.rbwrap button:not([class*="btn-"]) { font: inherit; color: inherit; }
/* --- En-tête commun --- */
.rbx__h { flex-wrap: wrap; row-gap: var(--rg-espace-3); margin-bottom: var(--rg-espace-4); }
.rbx__t {
display: flex; align-items: baseline; gap: var(--rg-espace-3); flex: 1 1 auto;
font-family: var(--font-display); font-style: var(--rg-titre-style); font-stretch: var(--titre-largeur); font-size: var(--rg-taille-h3); font-weight: var(--rg-graisse-extra);
letter-spacing: var(--rg-display-l-espacement); text-transform: none; color: var(--text);
}
.rbx__t span {
font-family: var(--font-mono); font-size: var(--rg-taille-label-m); font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement); color: var(--accent);
}
.rbx__big { display: flex; align-items: baseline; gap: var(--rg-espace-2); font-size: var(--rg-taille-texte-s); color: var(--text-soft); }
.rbx__big b { font-family: var(--font-display); font-style: var(--rg-titre-style); font-stretch: var(--titre-largeur); font-size: var(--rg-taille-h2); font-weight: var(--rg-graisse-extra); line-height: var(--rg-interligne-plein); color: var(--text); }
.rbx__k {
font-family: var(--font-mono); font-size: var(--rg-taille-label-s); font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement); color: var(--text-muted);
}
.rbx__leg {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--rg-espace-2) var(--rg-espace-4);
margin-top: var(--rg-espace-3); font-size: var(--rg-taille-label-m); color: var(--text-soft);
}
.rbx__leg > span { display: inline-flex; align-items: center; gap: var(--rg-espace-2); }
.rbx__sw { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 14px; border-radius: var(--rg-rayon-0); font-style: normal; }
.rbx__sw--oui { background: color-mix(in srgb, var(--rbk-gn) 22%, var(--plein)); }
.rbx__sw--non { background: color-mix(in srgb, var(--rbk-co) 16%, var(--plein)); }
.rbx__sw--band { background: color-mix(in srgb, var(--rbk-gn) 22%, var(--plein)); }
.rbx__sw--hors { width: 16px; height: 16px; border-radius: var(--rg-rayon-0); border: var(--rg-trait-2) dashed var(--text-muted); }
.rbx__sw--ma { border-radius: var(--rg-rayon-0); background: color-mix(in srgb, var(--rbk-tr) 16%, var(--plein)); }
.rbx__sw--en { border-radius: var(--rg-rayon-0); background: color-mix(in srgb, var(--rbk-in) 16%, var(--plein)); }
.rbx__sw--ga { border-radius: var(--rg-rayon-0); background: color-mix(in srgb, var(--rbk-es) 16%, var(--plein)); }
.rbx__sw--nuit { background: var(--rbk-gn); }
.rbx__sw--vide { background: var(--rbk-vide); }
.rbx__sw--lit { width: 14px; height: 10px; border-radius: var(--rg-rayon-0); background: var(--text); }
.rbx__sw--num { width: auto; height: 18px; padding: 0 var(--rg-espace-1); border-radius: var(--rg-rayon-0); font-size: var(--rg-taille-label-s); font-weight: var(--rg-graisse-gras);
background: color-mix(in srgb, var(--rbk-co) 16%, var(--plein)); color: var(--rbk-co); }
.rbx__sw--rond { width: 18px; height: 18px; }
/* Les étiquettes de plan (Travel, Install…) */
.rbxk { padding: var(--rg-espace-1) var(--rg-espace-3); border-radius: var(--rg-rayon-0); font-size: var(--rg-taille-label-m); font-weight: var(--rg-graisse-semi); }
.rbxk--travel { background: color-mix(in srgb, var(--rbk-tr) 14%, var(--plein)); color: var(--rbk-tr); }
.rbxk--instal { background: color-mix(in srgb, var(--rbk-in) 14%, var(--plein)); color: var(--rbk-in); }
.rbxk--course { background: color-mix(in srgb, var(--rbk-co) 14%, var(--plein)); color: var(--rbk-co); }
.rbxk--essais { background: color-mix(in srgb, var(--rbk-es) 14%, var(--plein)); color: var(--rbk-es); }
/* Le nom qui se touche pour changer de personne */
.rbme { position: relative; display: inline-flex; align-items: center; gap: var(--rg-espace-1); font-size: var(--rg-taille-label-m); color: inherit; opacity: 0.85; cursor: pointer; }
.rbme svg { width: 14px; height: 14px; }
.rbme select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; font-size: var(--rg-taille-texte-m); }
/* Les cartes « à moi » (téléphone) */
.rbxme {
display: none; flex-direction: column; gap: var(--rg-espace-3); margin-bottom: var(--rg-espace-3);
padding: var(--rg-espace-4); border-radius: var(--rg-rayon-0); background: var(--rbk-ink); color: var(--rbk-ink-t);
}
.rbxme--ask { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--rg-espace-3);
padding: var(--rg-espace-3) var(--rg-espace-4); background: var(--plein); color: var(--text); box-shadow: none; font-size: var(--rg-taille-texte-s); }
.rbxme--ask .rbme { font-weight: var(--rg-graisse-gras); color: var(--accent); opacity: 1; }
.rbxme__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--rg-espace-3); }
.rbxme__k { font-family: var(--font-mono); font-size: var(--rg-taille-label-s); font-weight: var(--rg-graisse-gras); letter-spacing: var(--rg-label-m-espacement); color: var(--rg-rose-3); }
.rbxme__cnt { font-size: var(--rg-taille-label-m); color: color-mix(in srgb, var(--rg-neutre-blanc) 70%, transparent); }
.rbxme__veh { display: flex; align-items: center; flex-wrap: wrap; gap: var(--rg-espace-3); }
.rbxme__veh b { font-family: var(--font-display); font-style: var(--rg-titre-style); font-stretch: var(--titre-largeur); font-size: var(--rg-taille-h2); font-weight: var(--rg-graisse-extra); line-height: var(--rg-interligne-plein); }
.rbxme__veh span { padding: var(--rg-espace-1) var(--rg-espace-2); border-radius: var(--rg-rayon-0); background: color-mix(in srgb, var(--rg-neutre-blanc) 14%, transparent); font-size: var(--rg-taille-label-m); font-weight: var(--rg-graisse-semi); }
.rbxme__veh .rbxme__with { padding: 0; background: none; font-size: var(--rg-taille-texte-m); }
.rbxme__two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rg-espace-2); }
.rbxme__box { display: flex; flex-direction: column; gap: calc(var(--rg-espace-1) / 2); padding: var(--rg-espace-3) var(--rg-espace-3); border-radius: var(--rg-rayon-0); background: color-mix(in srgb, var(--rg-neutre-blanc) 8%, transparent); min-width: 0; }
.rbxme__box span { font-family: var(--font-mono); font-size: var(--rg-taille-label-s); font-weight: var(--rg-graisse-gras); letter-spacing: var(--rg-label-m-espacement); color: color-mix(in srgb, var(--rg-neutre-blanc) 70%, transparent); }
.rbxme__box b { font-size: var(--rg-taille-texte-m); font-weight: var(--rg-graisse-gras); }
.rbxme__box em { font-style: normal; font-size: var(--rg-taille-label-m); color: color-mix(in srgb, var(--rg-neutre-blanc) 75%, transparent); }
.rbxme__who { display: flex; flex-direction: column; gap: var(--rg-espace-1); font-size: var(--rg-taille-texte-s); }
.rbxme__who em { font-style: normal; color: color-mix(in srgb, var(--rg-neutre-blanc) 70%, transparent); }
.rbxme__who .is-respo { color: var(--rg-marine-0); }
.rbxme__who .is-cleemy { color: var(--rg-rose-3); }
.rbxme__avec { font-size: var(--rg-taille-label-m); color: color-mix(in srgb, var(--rg-neutre-blanc) 75%, transparent); }
.rbxme__nights { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--rg-espace-1); }
.rbxme__nights span {
display: flex; flex-direction: column; align-items: center; justify-content: center; height: 36px; border-radius: var(--rg-rayon-0);
background: color-mix(in srgb, var(--rg-neutre-blanc) 10%, transparent); font-family: var(--font-mono); font-size: var(--rg-taille-label-s); font-weight: var(--rg-graisse-gras); line-height: var(--rg-interligne-court);
}
.rbxme__nights span.is-on { background: var(--rbk-gn); }
.rbxme__nights b { font-size: var(--rg-taille-label-m); }
/* ---------- ① HIGHLIGHTS ---------- */
.rbxh__leg { display: flex; flex-wrap: wrap; gap: var(--rg-espace-2); }
.rbxh {
border-radius: var(--rg-rayon-0); overflow: hidden; background: var(--plein);
box-shadow: none;
}
.rbxh__hd, .rbxh__r {
display: grid; grid-template-columns: 112px minmax(0, 1fr) minmax(0, 1fr) 110px 180px;
}
.rbxh__hd {
background: var(--rbk-pale); border-bottom: var(--rg-trait-1) solid var(--rbk-trait);
font-family: var(--font-mono); font-size: var(--rg-taille-label-s); font-weight: var(--rg-graisse-gras); letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase; color: var(--text-muted);
}
.rbxh__hd span { padding: var(--rg-espace-3) var(--rg-espace-4); }
.rbxh__hd span:first-child { padding-left: var(--rg-espace-4); }
.rbxh__r { min-height: 64px; border-bottom: var(--rg-trait-1) solid var(--rbk-vide); }
.rbxh__r:last-child { border-bottom: 0; }
.rbxh__d { display: flex; flex-direction: column; justify-content: center; gap: calc(var(--rg-espace-1) / 2); padding: var(--rg-espace-3) var(--rg-espace-4); }
.rbxh__r.is-course .rbxh__d { background: color-mix(in srgb, var(--rbk-co) 7%, var(--plein)); }
.rbxh__d b { font-family: var(--font-display); font-style: var(--rg-titre-style); font-stretch: var(--titre-largeur); font-size: var(--rg-taille-texte-l); font-weight: var(--rg-graisse-gras); line-height: var(--rg-interligne-plein); }
.rbxh__d em { font-style: normal; font-family: var(--font-mono); font-size: var(--rg-taille-label-s); letter-spacing: var(--rg-label-m-espacement); white-space: nowrap; color: var(--text-muted); }
.rbxh__r.is-course .rbxh__d em { color: var(--rbk-co); }
.rbxh__auj {
align-self: flex-start; padding: calc(var(--rg-espace-1) / 2) var(--rg-espace-2); border-radius: var(--rg-rayon-0); background: var(--accent); color: var(--rg-neutre-blanc);
font-family: var(--font-mono); font-size: var(--rg-taille-label-s); font-style: normal; font-weight: var(--rg-graisse-gras); letter-spacing: var(--rg-label-m-espacement);
}
.rbxh__r.is-auj { box-shadow: none; }
.rbxh__p { padding: var(--rg-espace-2) var(--rg-espace-1); }
.rbxh__p--am { padding-left: var(--rg-espace-2); }
.rbxh__p--pm { padding-right: var(--rg-espace-2); }
.rbxh__b {
width: 100%; height: 100%; min-height: 50px; display: flex; flex-direction: column; justify-content: center; gap: calc(var(--rg-espace-1) / 2);
padding: var(--rg-espace-2) var(--rg-espace-3); border: 0; border-radius: var(--rg-rayon-0); text-align: left; cursor: pointer;
background: var(--rbk-vide); transition: filter var(--t-fast) var(--ease);
}
@media (hover: hover) { .rbxh__b:hover { filter: brightness(0.97); } }
.rbxh__b b { font-size: var(--rg-taille-texte-s); font-weight: var(--rg-graisse-gras); }
.rbxh__b em { font-style: normal; font-size: var(--rg-taille-label-m); color: var(--text-soft); }
.rbxh__b.is-vide { background: transparent; outline: var(--rg-trait-1) dashed var(--rbk-trait); outline-offset: calc(var(--rg-trait-1) * -1); }
.rbxh__b.is-vide b { color: var(--text-faint); font-weight: var(--rg-graisse-moyen); }
.rbxh__b--travel { background: color-mix(in srgb, var(--rbk-tr) 13%, var(--plein)); }
.rbxh__b--travel b { color: var(--rbk-tr); }
.rbxh__b--instal { background: color-mix(in srgb, var(--rbk-in) 13%, var(--plein)); }
.rbxh__b--instal b { color: var(--rbk-in); }
.rbxh__b--course { background: color-mix(in srgb, var(--rbk-co) 13%, var(--plein)); }
.rbxh__b--course b { color: var(--rbk-co); }
.rbxh__b--essais { background: color-mix(in srgb, var(--rbk-es) 13%, var(--plein)); }
.rbxh__b--essais b { color: var(--rbk-es); }
.rbxh__b--libre { background: var(--rbk-vide); }
.rbxh__m { display: flex; align-items: center; gap: var(--rg-espace-2); padding: 0 var(--rg-espace-3); }
.rbxh__pill {
width: 34px; height: 26px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: var(--rg-rayon-0);
font-family: var(--font-mono); font-size: var(--rg-taille-label-m); font-weight: var(--rg-graisse-gras); cursor: pointer;
background: var(--rbk-vide); color: var(--text-faint) !important;
}
.rbxh__pill.is-oui { background: color-mix(in srgb, var(--rbk-gn) 20%, var(--plein)); color: var(--rbk-ok) !important; }
.rbxh__pill.is-non { background: color-mix(in srgb, var(--rbk-co) 15%, var(--plein)); color: var(--rbk-co) !important; }
.rbxh__h { display: flex; align-items: stretch; padding: 0 var(--rg-espace-4) 0 var(--rg-espace-3); }
.rbxh__band {
flex: 1; display: flex; align-items: center; padding: 0 var(--rg-espace-3); border: 0; background: transparent; cursor: pointer;
font-size: var(--rg-taille-label-m); font-weight: var(--rg-graisse-gras); color: var(--rbk-ok) !important; text-align: left; border-radius: var(--rg-rayon-0);
}
@media (hover: hover) { .rbxh__band:not(.is-on):hover { background: var(--rbk-vide); border-radius: var(--rg-rayon-0); margin: var(--rg-espace-3) 0; } }
.rbxh__band.is-on { background: color-mix(in srgb, var(--rbk-gn) 20%, var(--plein)); }
.rbxh__band.is-deb { border-top-left-radius: var(--rg-rayon-0); border-top-right-radius: var(--rg-rayon-0); }
.rbxh__band.is-fin { border-bottom-left-radius: var(--rg-rayon-0); border-bottom-right-radius: var(--rg-rayon-0); }
.rbxh__band.is-in { margin-top: var(--rg-espace-3); }
.rbxh__band.is-out { margin-bottom: var(--rg-espace-3); }
.rbxh__bm { display: none; }
/* ---------- ② STAFF ---------- */
.rbxs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--rg-espace-3); align-items: start; }
.rbxs__c {
display: flex; flex-direction: column; gap: var(--rg-espace-3); min-width: 0;
padding: var(--rg-espace-4) var(--rg-espace-4); border-radius: var(--rg-rayon-0); background: var(--plein); box-shadow: none;
}
.rbxs__c--dr { grid-column: span 2; }
.rbxs__ch { display: flex; align-items: center; justify-content: space-between; gap: var(--rg-espace-2); }
.rbxs__ch b { font-family: var(--font-display); font-style: var(--rg-titre-style); font-stretch: var(--titre-largeur); font-size: var(--rg-taille-h3); font-weight: var(--rg-graisse-extra); line-height: var(--rg-interligne-plein); }
.rbxs__pill { padding: var(--rg-espace-1) var(--rg-espace-3); border-radius: var(--rg-rayon-0); font-size: var(--rg-taille-label-m); font-weight: var(--rg-graisse-gras); white-space: nowrap;
background: var(--rbk-vide); color: var(--text-soft); }
.rbxs__pill--dr { background: color-mix(in srgb, var(--rbk-co) 14%, var(--plein)); color: var(--rbk-co); }
.rbxs__pill--ma { background: color-mix(in srgb, var(--rbk-tr) 14%, var(--plein)); color: var(--rbk-tr); }
.rbxs__pill--en { background: color-mix(in srgb, var(--rbk-in) 14%, var(--plein)); color: var(--rbk-in); }
.rbxs__pill--ga { background: color-mix(in srgb, var(--rbk-es) 14%, var(--plein)); color: var(--rbk-es); }
.rbxs__num { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--rg-espace-2); flex: 1; }
.rbxs__tile {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--rg-espace-1); min-height: 84px;
border: var(--rg-trait-2) solid var(--rbk-trait); border-radius: var(--rg-rayon-0); background: var(--rbk-pale); cursor: pointer;
}
.rbxs__tile.is-hors { border-style: dashed; border-color: var(--text-faint); }
.rbxs__tile b { font-family: var(--font-display); font-style: var(--rg-titre-style); font-stretch: var(--titre-largeur); font-size: var(--rg-taille-h1); font-weight: var(--rg-graisse-extra); line-height: var(--rg-interligne-plein); color: var(--rbk-co); }
.rbxs__tile span { font-size: var(--rg-taille-texte-s); font-weight: var(--rg-graisse-gras); }
.rbxs__l { display: flex; flex-direction: column; gap: var(--rg-espace-1); }
.rbxs__p {
display: flex; align-items: center; gap: var(--rg-espace-2); min-width: 0; padding: calc(var(--rg-espace-1) / 2) 0; border: 0; background: none;
font-size: var(--rg-taille-texte-s); font-weight: var(--rg-graisse-semi); text-align: left; cursor: pointer;
}
@media (hover: hover) { .rbxs__p:hover span { text-decoration: underline; } }
.rbxs__p i {
flex: none; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: var(--rg-rayon-0);
box-shadow: none; background: var(--rbk-vide); color: var(--text-soft);
font-size: var(--rg-taille-label-s); font-style: normal; font-weight: var(--rg-graisse-gras);
}
.rbxs__p.is-hors i { box-shadow: none; border: var(--rg-trait-2) dashed var(--text-muted); background: transparent; }
.rbxs__p span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ---------- ③ TRAVEL ---------- */
.rbxt__seg { display: none; }
.rbxt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rg-espace-4); }
.rbxt__way {
display: flex; flex-direction: column; padding: var(--rg-espace-4) var(--rg-espace-5) var(--rg-espace-3); border-radius: var(--rg-rayon-0);
background: var(--plein); box-shadow: none;
}
.rbxt__wh { display: flex; align-items: baseline; justify-content: space-between; gap: var(--rg-espace-3); margin-bottom: var(--rg-espace-3); }
.rbxt__wh b { font-family: var(--font-display); font-style: var(--rg-titre-style); font-stretch: var(--titre-largeur); font-size: var(--rg-taille-h3); font-weight: var(--rg-graisse-gras); }
.rbxt__wh span { font-family: var(--font-mono); font-size: var(--rg-taille-label-m); color: var(--text-muted); }
.rbxt__st {
display: grid; grid-template-columns: 58px 20px minmax(0, 1fr) auto; column-gap: var(--rg-espace-3); align-items: start;
min-height: 46px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer;
--dot: var(--text);
}
@media (hover: hover) { .rbxt__st:hover .rbxt__pl b { text-decoration: underline; } }
.rbxt__st--nuit { --dot: var(--rbk-co); }
.rbxt__st--vol { --dot: var(--rbk-tr); }
.rbxt__hr { font-family: var(--font-mono); font-size: var(--rg-taille-texte-s); font-weight: var(--rg-graisse-gras); padding-top: var(--rg-trait-1); }
.rbxt__dot { display: flex; flex-direction: column; align-items: center; align-self: stretch; }
.rbxt__dot::before {
content: ""; width: 12px; height: 12px; margin-top: var(--rg-espace-1); border-radius: var(--rg-rayon-0);
border: var(--rg-trait-4) solid var(--dot); background: var(--plein); box-sizing: border-box;
}
.rbxt__dot i { flex: 1; width: 2px; min-height: 20px; background: var(--rbk-trait); }
.rbxt__st.is-last .rbxt__dot i { background: transparent; }
.rbxt__pl { display: flex; flex-direction: column; gap: var(--rg-trait-1); padding-bottom: var(--rg-espace-3); min-width: 0; }
.rbxt__pl b { font-size: var(--rg-taille-texte-s); font-weight: var(--rg-graisse-gras); }
.rbxt__pl em { font-style: normal; font-size: var(--rg-taille-label-m); color: var(--text-soft); }
.rbxt__tag {
padding: var(--rg-espace-1) var(--rg-espace-2); border-radius: var(--rg-rayon-0); font-size: var(--rg-taille-label-s); font-weight: var(--rg-graisse-gras); white-space: nowrap;
background: var(--rbk-vide); color: var(--text-soft);
}
.rbxt__st--nuit .rbxt__tag { background: color-mix(in srgb, var(--rbk-co) 14%, var(--plein)); color: var(--rbk-co); }
.rbxt__st--vol .rbxt__tag { background: color-mix(in srgb, var(--rbk-tr) 14%, var(--plein)); color: var(--rbk-tr); }
.rbxt__vide {
padding: var(--rg-espace-4); border: var(--rg-trait-2) dashed var(--rbk-trait); border-radius: var(--rg-rayon-0); background: none;
font-size: var(--rg-taille-texte-s); color: var(--text-muted); cursor: pointer;
}
.rbxt__vh { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--rg-espace-2) var(--rg-espace-4); margin: var(--rg-espace-5) 0 var(--rg-espace-3); }
.rbxt__vleg { font-size: var(--rg-taille-label-m); color: var(--text-soft); }
.rbxt__vleg .is-respo, .rbxv__ul .is-respo { color: var(--rbk-tr); }
.rbxt__vleg .is-cleemy, .rbxv__ul .is-cleemy { color: var(--rbk-co); }
.rbxt__vleg .is-piste, .rbxv__ul .is-piste { color: var(--rbk-es); }
.rbxv__g { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--rg-espace-3); }
.rbxv {
display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: var(--rg-rayon-0); cursor: pointer;
background: var(--plein); box-shadow: none;
}
.rbxv:focus-visible { outline: var(--rg-trait-3) solid var(--accent); outline-offset: calc(var(--rg-espace-1) / 2); }
.rbxv__hd { display: flex; flex-direction: column; gap: var(--rg-espace-2); padding: var(--rg-espace-3) var(--rg-espace-3); background: var(--rbk-ink); color: var(--rbk-ink-t); }
.rbxv__l1 { display: flex; align-items: baseline; justify-content: space-between; gap: var(--rg-espace-2); }
.rbxv__l1 b { font-family: var(--font-display); font-style: var(--rg-titre-style); font-stretch: var(--titre-largeur); font-size: var(--rg-taille-texte-m); font-weight: var(--rg-graisse-gras); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rbxv__who, .rbxv__chev { display: none; }
.rbxv__fill { font-family: var(--font-mono); font-size: var(--rg-taille-label-m); font-weight: var(--rg-graisse-gras); }
.rbxv__fill.is-trop { color: var(--rg-rose-3); }
.rbxv__seats { display: flex; gap: var(--rg-espace-1); }
.rbxv__seats i { flex: 1; height: 6px; border-radius: var(--rg-rayon-0); background: color-mix(in srgb, var(--rg-neutre-blanc) 22%, transparent); }
.rbxv__seats i.is-on { background: var(--rg-neutre-blanc); }
.rbxv__seats i.is-trop { background: var(--rg-rose-3); }
.rbxv__body { padding: var(--rg-espace-2) var(--rg-espace-3) var(--rg-espace-3); }
.rbxv__ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rbxv__ul li {
display: flex; align-items: baseline; justify-content: space-between; gap: var(--rg-espace-2); padding: var(--rg-espace-1) 0;
border-bottom: var(--rg-trait-1) solid var(--rbk-vide); font-size: var(--rg-taille-texte-s); font-weight: var(--rg-graisse-moyen);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rbxv__ul li:last-child { border-bottom: 0; }
.rbxv__ul li.is-respo, .rbxv__ul li.is-cleemy, .rbxv__ul li.is-piste { font-weight: var(--rg-graisse-gras); }
.rbxv__ul em { font-style: normal; font-size: var(--rg-taille-label-s); font-weight: var(--rg-graisse-semi); color: var(--text-muted); }
.rbxv__vide { margin: var(--rg-espace-1) 0; font-size: var(--rg-taille-label-m); color: var(--text-muted); }
.rbxv__note { margin: var(--rg-espace-2) 0 0; font-size: var(--rg-taille-label-m); color: var(--text-soft); }
.rbxv__edit { display: none; }
/* ---------- ④ HOTEL ---------- */
.rbxo { display: flex; flex-direction: column; gap: var(--rg-espace-4); margin-bottom: var(--rg-espace-2); }
.rbxo__ban {
display: flex; align-items: center; gap: var(--rg-espace-6); padding: var(--rg-espace-4) var(--rg-espace-5); border-radius: var(--rg-rayon-0);
background: var(--rbk-ink); color: var(--rbk-ink-t);
}
.rbxo__id { flex: 1; display: flex; flex-direction: column; gap: calc(var(--rg-espace-1) / 2); min-width: 0; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; color: inherit !important; }
.rbxo__id b { font-family: var(--font-display); font-style: var(--rg-titre-style); font-stretch: var(--titre-largeur); font-size: var(--rg-taille-h2); font-weight: var(--rg-graisse-extra); }
.rbxo__id span { font-size: var(--rg-taille-texte-s); color: color-mix(in srgb, var(--rg-neutre-blanc) 72%, transparent); }
@media (hover: hover) { .rbxo__id:hover b { text-decoration: underline; } }
.rbxo__kpi { display: flex; flex-direction: column; align-items: flex-end; font-size: var(--rg-taille-label-m); color: color-mix(in srgb, var(--rg-neutre-blanc) 72%, transparent); }
.rbxo__kpi b { font-family: var(--font-display); font-style: var(--rg-titre-style); font-stretch: var(--titre-largeur); font-size: var(--rg-taille-h2); font-weight: var(--rg-graisse-extra); line-height: var(--rg-interligne-plein); color: var(--rg-neutre-blanc); }
.rbxo__io { display: flex; gap: var(--rg-espace-2); }
.rbxo__io i { padding: var(--rg-espace-2) var(--rg-espace-3); border-radius: var(--rg-rayon-0); font-size: var(--rg-taille-texte-s); font-style: normal; font-weight: var(--rg-graisse-gras); white-space: nowrap; }
.rbxo__io .is-in { background: color-mix(in srgb, var(--rg-piste-vert) 18%, transparent); color: var(--rg-metier-vert-clair); }
.rbxo__io .is-out { background: color-mix(in srgb, var(--rg-rose-4) 18%, transparent); color: var(--rg-rose-3); }
.rbxo__act { display: none; }
.rbxo__gp { display: flex; flex-direction: column; gap: var(--rg-espace-3); --gp: var(--rbk-tr); }
.rbxo__gp--dr { --gp: var(--rbk-co); }
.rbxo__gh { display: flex; align-items: center; gap: var(--rg-espace-3); }
.rbxo__gh i { width: 10px; height: 10px; border-radius: var(--rg-rayon-0); background: var(--gp); }
.rbxo__gh b { font-family: var(--font-mono); font-size: var(--rg-taille-label-m); font-weight: var(--rg-graisse-gras); letter-spacing: var(--rg-label-m-espacement); }
.rbxo__gh span { font-size: var(--rg-taille-texte-s); color: var(--text-muted); }
.rbxo__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--rg-espace-3); }
.rbxo__r {
display: flex; flex-direction: column; gap: var(--rg-espace-2); min-width: 0; padding: var(--rg-espace-3) var(--rg-espace-3); border: 0;
border-top: var(--rg-trait-4) solid var(--gp); border-radius: var(--rg-rayon-0); text-align: left; cursor: pointer;
background: var(--plein); box-shadow: none;
}
@media (hover: hover) { .rbxo__r:hover { box-shadow: none; } }
.rbxo__r.is-moi { box-shadow: none; }
.rbxo__rh { display: flex; align-items: center; justify-content: space-between; gap: var(--rg-espace-2); }
.rbxo__ty { padding: calc(var(--rg-espace-1) / 2) var(--rg-espace-2); border-radius: var(--rg-rayon-0); background: var(--rbk-vide); color: var(--text-soft); font-size: var(--rg-taille-label-s); font-weight: var(--rg-graisse-gras); white-space: nowrap; }
.rbxo__beds { display: flex; align-items: center; gap: var(--rg-espace-1); margin-left: auto; }
.rbxo__beds i { width: 14px; height: 10px; border-radius: var(--rg-rayon-0); background: var(--rbk-trait); }
.rbxo__beds i.is-on { background: var(--text); }
.rbxo__fill { font-family: var(--font-mono); font-size: var(--rg-taille-label-s); font-weight: var(--rg-graisse-gras); color: var(--text-muted); }
.rbxo__ppl { display: flex; flex-direction: column; gap: var(--rg-espace-1); min-height: 52px; }
.rbxo__pp { display: flex; align-items: center; gap: var(--rg-espace-2); min-width: 0; font-size: var(--rg-taille-texte-s); font-weight: var(--rg-graisse-semi); }
.rbxo__pp > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rbxo__pp.is-vide { color: var(--text-faint); font-weight: var(--rg-graisse-moyen); }
.rbxo__pp i {
flex: none; min-width: 24px; height: 24px; padding: 0 var(--rg-espace-1); display: flex; align-items: center; justify-content: center;
box-sizing: border-box; border-radius: var(--rg-rayon-0); font-size: var(--rg-taille-label-s); font-style: normal; font-weight: var(--rg-graisse-gras);
background: var(--rbk-vide); color: var(--text-soft); box-shadow: none;
}
.rbxo__pp i.is-dr { background: color-mix(in srgb, var(--rbk-co) 15%, var(--plein)); color: var(--rbk-co); box-shadow: none; }
.rbxo__pp i.is-inv { background: transparent; box-shadow: none; border: var(--rg-trait-2) dashed var(--text-muted); }
.rbxo__n { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--rg-espace-1); }
.rbxo__n i {
height: 20px; display: flex; align-items: center; justify-content: center; border-radius: var(--rg-rayon-0);
background: var(--rbk-vide); color: var(--text-faint); font-family: var(--font-mono); font-size: var(--rg-taille-label-s); font-style: normal; font-weight: var(--rg-graisse-gras);
}
.rbxo__n i.is-on { background: var(--rbk-gn); color: var(--rg-neutre-blanc); }
.rbxo__add {
min-height: 120px; border: var(--rg-trait-2) dashed var(--rbk-trait); border-radius: var(--rg-rayon-0); background: none;
font-size: var(--rg-taille-texte-s); font-weight: var(--rg-graisse-semi); color: var(--text-muted); cursor: pointer;
}
@media (hover: hover) { .rbxo__add:hover { color: var(--text); border-color: var(--text-muted); } }
.rbxo__sans {
margin-left: auto; padding: var(--rg-espace-2) var(--rg-espace-3); border-radius: var(--rg-rayon-0); font-weight: var(--rg-graisse-semi);
background: color-mix(in srgb, var(--rbk-es) 12%, var(--plein)); color: var(--rbk-es);
}
/* ---------- ⑤ CATERING ---------- */
.rbxc__note {
padding: var(--rg-espace-3) var(--rg-espace-4); border: 0; border-radius: var(--rg-rayon-0); background: var(--plein); box-shadow: none;
font-size: var(--rg-taille-texte-s); color: var(--text-soft) !important; text-align: left; cursor: pointer; max-width: 460px;
}
.rbxc__note em { font-style: normal; color: var(--text-muted); }
.rbxc__tel { display: none; }
.rbxc__w { overflow-x: auto; border-radius: var(--rg-rayon-0); box-shadow: none; background: var(--plein); }
.rbxc { --j: 7; min-width: calc(200px + var(--j) * 64px); display: flex; flex-direction: column; }
.rbxc__hd, .rbxc__r, .rbxc__tot {
display: grid; grid-template-columns: 200px repeat(calc(var(--j) * 2), minmax(0, 1fr)); align-items: center;
}
.rbxc__hd { background: var(--rbk-pale); border-bottom: var(--rg-trait-1) solid var(--rbk-trait); grid-template-columns: 200px repeat(var(--j), minmax(0, 1fr)); align-items: stretch; }
.rbxc__nm {
padding: 0 var(--rg-espace-4); font-size: var(--rg-taille-texte-s); font-weight: var(--rg-graisse-semi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
text-align: left; border: 0; background: none; cursor: pointer;
}
.rbxc__hd .rbxc__nm { align-self: center; font-family: var(--font-mono); font-size: var(--rg-taille-label-s); font-weight: var(--rg-graisse-gras); letter-spacing: var(--rg-label-m-espacement); color: var(--text-muted); cursor: default; }
.rbxc__dj { display: flex; flex-direction: column; align-items: center; gap: calc(var(--rg-espace-1) / 2); padding: var(--rg-espace-2) 0 var(--rg-espace-1); border-left: var(--rg-trait-1) solid var(--rbk-trait); }
.rbxc__dj.is-course { background: color-mix(in srgb, var(--rbk-co) 7%, var(--plein)); }
.rbxc__dj b { font-family: var(--font-display); font-style: var(--rg-titre-style); font-stretch: var(--titre-largeur); font-size: var(--rg-taille-texte-s); font-weight: var(--rg-graisse-gras); }
.rbxc__dj span { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; padding: 0 var(--rg-espace-1); gap: var(--rg-espace-1); box-sizing: border-box; }
.rbxc__dj button {
height: 20px; border: 0; border-radius: var(--rg-rayon-0); background: transparent; cursor: pointer;
font-family: var(--font-mono); font-size: var(--rg-taille-label-s); font-weight: var(--rg-graisse-gras); color: var(--text-muted) !important;
}
@media (hover: hover) { .rbxc__dj button:hover { background: var(--rbk-vide); } }
.rbxc__dj button.is-on { color: var(--rbk-ok) !important; }
.rbxc__gt {
display: flex; align-items: center; gap: var(--rg-espace-2); padding: var(--rg-espace-2) var(--rg-espace-4); background: var(--rbk-pale); border-bottom: var(--rg-trait-1) solid var(--rbk-vide);
font-family: var(--font-mono); font-size: var(--rg-taille-label-s); font-weight: var(--rg-graisse-gras); letter-spacing: var(--rg-label-m-espacement); color: var(--rbk-tr);
}
.rbxc__gt i { width: 8px; height: 8px; border-radius: var(--rg-rayon-0); background: currentColor; }
.rbxc__gt--dr { color: var(--rbk-co); }
.rbxc__r { min-height: 30px; border-bottom: var(--rg-trait-1) solid var(--rbk-vide); }
.rbxc__k {
justify-self: center; width: 24px; height: 19px; display: flex; align-items: center; justify-content: center;
padding: 0; border: 0; border-radius: var(--rg-rayon-0); background: var(--rbk-vide); color: var(--rg-neutre-blanc) !important; cursor: pointer;
}
.rbxc__k svg { width: 11px; height: 11px; opacity: 0; }
@media (hover: hover) { .rbxc__k:hover { box-shadow: none; } }
.rbxc__k.is-on { background: var(--rbk-gn); }
.rbxc__k.is-on svg { opacity: 1; }
.rbxc__more {
display: block; width: 100%; padding: var(--rg-espace-2) var(--rg-espace-4); border: 0; border-bottom: var(--rg-trait-1) solid var(--rbk-vide); background: none;
font-size: var(--rg-taille-label-m); font-weight: var(--rg-graisse-semi); color: var(--text-muted) !important; text-align: left; cursor: pointer;
}
@media (hover: hover) { .rbxc__more:hover { color: var(--text) !important; } }
.rbxc__tot { min-height: 44px; background: var(--rbk-ink); color: var(--rbk-ink-t); }
.rbxc__tot .rbxc__nm { font-family: var(--font-mono); font-size: var(--rg-taille-label-m); font-weight: var(--rg-graisse-gras); letter-spacing: var(--rg-label-m-espacement); cursor: default; }
.rbxc__tot b { text-align: center; font-family: var(--font-display); font-style: var(--rg-titre-style); font-stretch: var(--titre-largeur); font-size: var(--rg-taille-texte-l); font-weight: var(--rg-graisse-extra); }
.rbxc__tot b.is-zero { color: color-mix(in srgb, var(--rg-neutre-blanc) 40%, transparent); }
/* Le téléphone (cachés à l'ordinateur) */
.rbxc__chips { display: flex; gap: var(--rg-espace-2); overflow-x: auto; padding-bottom: calc(var(--rg-espace-1) / 2); scrollbar-width: none; }
.rbxc__chips button {
flex: none; height: 32px; padding: 0 var(--rg-espace-3); border-radius: var(--rg-rayon-0); border: var(--rg-trait-1) solid color-mix(in srgb, var(--rg-neutre-blanc) 30%, transparent);
background: transparent; color: var(--rg-neutre-blanc) !important; font-size: var(--rg-taille-label-m); font-weight: var(--rg-graisse-gras); white-space: nowrap; cursor: pointer;
}
.rbxc__chips button.is-on { border-color: transparent; background: var(--rg-neutre-blanc); color: var(--rg-marine-5) !important; }
.rbxc__q {
display: flex; align-items: center; gap: var(--rg-espace-2); height: 40px; padding: 0 var(--rg-espace-3); border-radius: var(--rg-rayon-0);
background: color-mix(in srgb, var(--rg-neutre-blanc) 8%, transparent); color: color-mix(in srgb, var(--rg-neutre-blanc) 70%, transparent);
}
.rbxc__q svg { width: 16px; height: 16px; flex: none; }
.rbxc__q input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--rg-neutre-blanc); font: inherit; font-size: var(--rg-taille-texte-m); }
.rbxc__q input::placeholder { color: color-mix(in srgb, var(--rg-neutre-blanc) 60%, transparent); }
.rbxc__sug { display: flex; flex-direction: column; margin-top: calc(var(--rg-espace-2) * -1); border-radius: var(--rg-rayon-0); overflow: hidden; background: color-mix(in srgb, var(--rg-neutre-blanc) 6%, transparent); }
.rbxc__sug button {
display: flex; justify-content: space-between; gap: var(--rg-espace-2); padding: var(--rg-espace-3) var(--rg-espace-3); border: 0; border-bottom: var(--rg-trait-1) solid color-mix(in srgb, var(--rg-neutre-blanc) 8%, transparent);
background: none; color: var(--rg-neutre-blanc) !important; font-size: var(--rg-taille-texte-s); font-weight: var(--rg-graisse-semi); text-align: left; cursor: pointer;
}
.rbxc__sug em { font-style: normal; font-size: var(--rg-taille-label-m); color: color-mix(in srgb, var(--rg-neutre-blanc) 60%, transparent); }
.rbxc__sug p { margin: 0; padding: var(--rg-espace-3) var(--rg-espace-3); font-size: var(--rg-taille-texte-s); color: color-mix(in srgb, var(--rg-neutre-blanc) 70%, transparent); }
.rbxc__mg { display: grid; grid-template-columns: 22px repeat(var(--j), minmax(0, 1fr)); gap: var(--rg-espace-1); align-items: center; }
.rbxc__mj { text-align: center; font-family: var(--font-mono); font-size: var(--rg-taille-label-s); font-weight: var(--rg-graisse-gras); line-height: var(--rg-interligne-court); color: color-mix(in srgb, var(--rg-neutre-blanc) 75%, transparent); }
.rbxc__ml { font-family: var(--font-mono); font-size: var(--rg-taille-label-s); font-weight: var(--rg-graisse-gras); color: color-mix(in srgb, var(--rg-neutre-blanc) 70%, transparent); }
.rbxc__mg button { height: 28px; border: 0; border-radius: var(--rg-rayon-0); background: color-mix(in srgb, var(--rg-neutre-blanc) 12%, transparent); cursor: pointer; }
.rbxc__mg button.is-on { background: var(--rbk-gn); }
.rbxc__eh { display: flex; align-items: baseline; justify-content: space-between; gap: var(--rg-espace-3); padding: var(--rg-espace-1) calc(var(--rg-espace-1) / 2) var(--rg-espace-2); font-size: var(--rg-taille-label-m); color: var(--text-soft); }
.rbxc__eh > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rbxc__days { border-radius: var(--rg-rayon-0); overflow: hidden; background: var(--plein); box-shadow: none; }
.rbxc__day { border-bottom: var(--rg-trait-1) solid var(--rbk-vide); }
.rbxc__day:last-child { border-bottom: 0; }
.rbxc__day.is-auj { background: color-mix(in srgb, var(--accent) 7%, var(--plein)); }
.rbxc__dh {
width: 100%; display: grid; grid-template-columns: 74px repeat(2, minmax(0, 1fr)) 16px; align-items: center; gap: var(--rg-espace-3);
padding: var(--rg-espace-3) var(--rg-espace-4); border: 0; background: none; text-align: left; cursor: pointer;
}
.rbxc__dh > svg { width: 16px; height: 16px; color: var(--text-muted); transition: transform var(--t-fast) var(--ease); }
.rbxc__day.is-open .rbxc__dh > svg { transform: rotate(90deg); }
.rbxc__dn { display: flex; flex-direction: column; }
.rbxc__dn b { font-family: var(--font-display); font-style: var(--rg-titre-style); font-stretch: var(--titre-largeur); font-size: var(--rg-taille-texte-m); font-weight: var(--rg-graisse-gras); }
.rbxc__dn em { font-style: normal; font-family: var(--font-mono); font-size: var(--rg-taille-label-s); font-weight: var(--rg-graisse-gras); color: var(--rbk-co); }
.rbxc__dm { display: flex; flex-direction: column; gap: var(--rg-espace-1); }
.rbxc__dm > span { display: flex; align-items: baseline; gap: var(--rg-espace-2); font-size: var(--rg-taille-label-s); font-weight: var(--rg-graisse-semi); color: var(--text-muted); }
.rbxc__dm b { font-family: var(--font-display); font-style: var(--rg-titre-style); font-stretch: var(--titre-largeur); font-size: var(--rg-taille-h2); font-weight: var(--rg-graisse-extra); line-height: var(--rg-interligne-plein); color: var(--text); }
.rbxc__dm.is-zero b { color: var(--text-faint); }
.rbxc__dm > i { display: block; height: 5px; border-radius: var(--rg-rayon-0); background: var(--rbk-vide); overflow: hidden; }
.rbxc__dm > i > i { display: block; height: 100%; background: var(--rbk-gn); }
.rbxc__dd { display: flex; flex-direction: column; gap: var(--rg-espace-2); padding: 0 var(--rg-espace-4) var(--rg-espace-3); }
.rbxc__dx { display: flex; flex-direction: column; gap: var(--rg-espace-2); padding: var(--rg-espace-3) var(--rg-espace-3); border-radius: var(--rg-rayon-0); background: var(--rbk-pale); box-shadow: none; }
.rbxc__dx > span { font-family: var(--font-mono); font-size: var(--rg-taille-label-s); font-weight: var(--rg-graisse-gras); letter-spacing: var(--rg-label-m-espacement); color: var(--text-muted); }
.rbxc__dx b { font-size: var(--rg-taille-texte-s); font-weight: var(--rg-graisse-semi); }
.rbxc__dx .is-oui { color: var(--rbk-ok); }
.rbxc__dx .is-non { color: var(--rbk-co); }
/* ---------- ⑥ FILES ---------- */
.rbxf__drop {
display: flex; align-items: center; gap: var(--rg-espace-4); padding: var(--rg-espace-5); margin-bottom: var(--rg-espace-4);
border: var(--rg-trait-3) dashed var(--border-2); border-radius: var(--rg-rayon-0); background: var(--plein);
transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.rbxf__drop.is-over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--plein)); }
.rbxf__ico {
flex: none; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: var(--rg-rayon-0);
background: color-mix(in srgb, var(--rbk-co) 14%, var(--plein)); color: var(--rbk-co);
}
.rbxf__ico svg { width: 24px; height: 24px; }
.rbxf__dt { flex: 1; display: flex; flex-direction: column; gap: calc(var(--rg-espace-1) / 2); min-width: 0; }
.rbxf__dt b { font-size: var(--rg-taille-texte-m); font-weight: var(--rg-graisse-gras); }
.rbxf__dt span { font-size: var(--rg-taille-texte-s); color: var(--text-soft); }
.rbxf__dt .rbxf__etat { margin-top: var(--rg-espace-1); font-weight: var(--rg-graisse-semi); color: var(--rbk-ok); }
.rbxf__dt .rbxf__etat.is-ko { color: var(--rbk-co); }
.rbxf__chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rg-espace-2); margin-bottom: var(--rg-espace-3); }
.rbxf__chips button {
padding: var(--rg-espace-2) var(--rg-espace-3); border-radius: var(--rg-rayon-0); border: var(--rg-trait-1) solid var(--rbk-trait); background: var(--plein);
font-size: var(--rg-taille-texte-s); font-weight: var(--rg-graisse-semi); cursor: pointer; white-space: nowrap;
}
.rbxf__chips button.is-on { border-color: transparent; background: var(--text); color: var(--bg) !important; }
.rbxf__oth { font-size: var(--rg-taille-label-m); color: var(--text-muted); margin-left: var(--rg-espace-2); }
.rbxf { border-radius: var(--rg-rayon-0); overflow: hidden; background: var(--plein); box-shadow: none; }
.rbxf__hd, .rbxf__r { display: grid; grid-template-columns: 52px minmax(0, 1fr) 140px 96px 160px 96px; align-items: center; }
.rbxf__hd {
background: var(--rbk-pale); border-bottom: var(--rg-trait-1) solid var(--rbk-trait);
font-family: var(--font-mono); font-size: var(--rg-taille-label-s); font-weight: var(--rg-graisse-gras); letter-spacing: var(--rg-label-m-espacement); text-transform: uppercase; color: var(--text-muted);
}
.rbxf__hd span { padding: var(--rg-espace-3) 0; }
.rbxf__r { min-height: 52px; border-bottom: var(--rg-trait-1) solid var(--rbk-vide); font-size: var(--rg-taille-texte-s); }
.rbxf__r:last-child { border-bottom: 0; }
.rbxf__x {
justify-self: center; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: var(--rg-rayon-0);
font-family: var(--font-mono); font-size: var(--rg-taille-label-s); font-weight: var(--rg-graisse-gras);
}
.rbxf__x--pdf { background: color-mix(in srgb, var(--rbk-co) 14%, var(--plein)); color: var(--rbk-co); }
.rbxf__x--img { background: color-mix(in srgb, var(--rbk-gn) 18%, var(--plein)); color: var(--rbk-ok); }
.rbxf__x--lnk { background: color-mix(in srgb, var(--rbk-tr) 14%, var(--plein)); color: var(--rbk-tr); }
.rbxf__nm { display: flex; flex-direction: column; min-width: 0; padding: var(--rg-espace-2) var(--rg-espace-3) var(--rg-espace-2) 0; border: 0; background: none; text-align: left; cursor: pointer; }
.rbxf__nm b { font-size: var(--rg-taille-texte-s); font-weight: var(--rg-graisse-gras); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) { .rbxf__nm:hover b { text-decoration: underline; } }
.rbxf__nm em { font-style: normal; font-size: var(--rg-taille-label-m); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rbxf__sub { display: none; }
.rbxf__su i { padding: var(--rg-espace-1) var(--rg-espace-2); border-radius: var(--rg-rayon-0); background: var(--rbk-vide); color: var(--text-soft); font-size: var(--rg-taille-label-m); font-style: normal; font-weight: var(--rg-graisse-semi); }
.rbxf__sz { font-family: var(--font-mono); font-size: var(--rg-taille-label-m); color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: var(--rg-espace-2); }
.rbxf__by { font-size: var(--rg-taille-label-m); color: var(--text-soft); }
.rbxf__ac { display: flex; justify-content: flex-end; gap: var(--rg-espace-2); padding-right: var(--rg-espace-4); }
.rbxf__b {
width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: var(--rg-rayon-0);
border: var(--rg-trait-1) solid var(--rbk-trait); background: var(--plein); color: var(--text) !important; cursor: pointer;
}
.rbxf__b svg { width: 15px; height: 15px; }
@media (hover: hover) { .rbxf__b:hover { border-color: var(--text-muted); } }
.rbxf__b.is-off { opacity: 0.35; cursor: default; }
.rbxf__bar { display: none; }
/* =========================================================
TÉLÉPHONE
========================================================= */
@media (max-width: 720px) {
.rbx__t { font-size: var(--rg-taille-h3); }
.rbx__h .rbxh__leg { display: none; }
.rbx__leg { font-size: var(--rg-taille-label-s); gap: var(--rg-espace-2) var(--rg-espace-3); }
.rbxme { display: flex; }
.rbx__desk, .rbx__big { display: none !important; }
/* ① Une carte par jour */
.rbxh { background: transparent; box-shadow: none; border-radius: var(--rg-rayon-0); overflow: visible; display: flex; flex-direction: column; gap: var(--rg-espace-3); }
.rbxh__hd { display: none; }
.rbxh__r {
grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "d h m" "am am am" "pm pm pm";
align-items: center; gap: var(--rg-espace-2) var(--rg-espace-2); min-height: 0; padding: var(--rg-espace-3) var(--rg-espace-3) var(--rg-espace-3); border: 0; border-radius: var(--rg-rayon-0);
background: var(--plein); box-shadow: none;
}
.rbxh__r.is-auj { box-shadow: none; }
.rbxh__r:last-child { border-bottom: 0; }
.rbxh__d { grid-area: d; flex-direction: row; align-items: center; gap: var(--rg-espace-2); padding: 0; background: none !important; }
.rbxh__d b { font-size: var(--rg-taille-h3); }
.rbxh__d em { display: none; }
.rbxh__r.is-course .rbxh__d b { color: var(--rbk-co); }
.rbxh__auj { align-self: center; font-size: var(--rg-taille-label-s); padding: var(--rg-espace-1) var(--rg-espace-2); }
.rbxh__p { padding: 0; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: var(--rg-espace-2); }
.rbxh__p::before { content: "AM"; font-family: var(--font-mono); font-size: var(--rg-taille-label-s); font-weight: var(--rg-graisse-semi); color: var(--text-muted); }
.rbxh__p--am { grid-area: am; }
.rbxh__p--pm { grid-area: pm; }
.rbxh__p--pm::before { content: "PM"; }
.rbxh__b { min-height: 0; padding: var(--rg-espace-2) var(--rg-espace-3); border-radius: var(--rg-rayon-0); }
.rbxh__m { grid-area: m; padding: 0; }
.rbxh__pill { width: 28px; height: 24px; border-radius: var(--rg-rayon-0); font-size: var(--rg-taille-label-s); }
.rbxh__h { grid-area: h; justify-content: flex-end; padding: 0; }
.rbxh__band, .rbxh__band.is-on { flex: 0 0 auto; margin: 0 !important; padding: 0; background: none !important; border-radius: var(--rg-rayon-0); }
.rbxh__bt { display: none; }
.rbxh__bm { display: inline; font-size: var(--rg-taille-label-s); font-weight: var(--rg-graisse-gras); }
.rbxh__bm.is-ok { color: var(--rbk-ok); }
.rbxh__bm.is-out { color: var(--rbk-co); }
.rbxh__bm.is-sans { color: var(--text-muted); }
/* ② Pilotes en tuiles, les postes deux par deux */
.rbxs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rg-espace-3); }
.rbxs__c { padding: var(--rg-espace-3) var(--rg-espace-3); gap: var(--rg-espace-2); border-radius: var(--rg-rayon-0); }
.rbxs__c--dr { grid-column: 1 / -1; padding: var(--rg-espace-3); gap: var(--rg-espace-2); }
.rbxs__ch b { font-size: var(--rg-taille-texte-l); }
.rbxs__c--dr .rbxs__ch b { font-size: var(--rg-taille-h3); }
.rbxs__pill { padding: var(--rg-espace-1) var(--rg-espace-2); font-size: var(--rg-taille-label-s); }
.rbxs__num { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: var(--rg-espace-2); }
.rbxs__tile { min-height: 0; padding: var(--rg-espace-2) 0; border-radius: var(--rg-rayon-0); gap: calc(var(--rg-espace-1) / 2); }
.rbxs__tile b { font-size: var(--rg-taille-h3); }
.rbxs__tile span { font-size: var(--rg-taille-label-s); }
.rbxs__p i { display: none; }
.rbxs__p { padding: 0; align-self: flex-start; max-width: 100%; }
.rbxs__p.is-hors span { border-bottom: var(--rg-trait-2) dashed var(--text-muted); }
/* ③ Mon trajet, aller ou retour, les véhicules en lignes */
.rbxt__seg {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rg-espace-1); padding: var(--rg-espace-1); margin-bottom: var(--rg-espace-3);
border-radius: var(--rg-rayon-0); background: var(--plein); box-shadow: none;
}
.rbxt__seg button { height: 40px; border: 0; border-radius: var(--rg-rayon-0); background: transparent; font-size: var(--rg-taille-texte-s); font-weight: var(--rg-graisse-semi); color: var(--text-soft) !important; cursor: pointer; }
.rbxt__seg button.is-on { background: var(--text); color: var(--bg) !important; }
.rbxt { display: block; }
.rbxt__way { display: none; padding: var(--rg-espace-4) var(--rg-espace-4) var(--rg-espace-2); border-radius: var(--rg-rayon-0); }
.rbxt__way.is-on { display: flex; }
.rbxt__wh { display: none; }
.rbxt__st { grid-template-columns: 50px 18px minmax(0, 1fr) auto; column-gap: var(--rg-espace-2); }
.rbxt__tag { padding: calc(var(--rg-espace-1) / 2) var(--rg-espace-2); }
.rbxt__vh { margin: var(--rg-espace-4) calc(var(--rg-espace-1) / 2) var(--rg-espace-2); }
.rbxt__vleg { display: none; }
.rbxv__g { display: flex; flex-direction: column; gap: 0; border-radius: var(--rg-rayon-0); overflow: hidden; box-shadow: none; background: var(--plein); }
.rbxv { border-radius: var(--rg-rayon-0); box-shadow: none; background: transparent; border-bottom: var(--rg-trait-1) solid var(--rbk-vide); }
.rbxv:last-child { border-bottom: 0; }
.rbxv.is-moi { background: color-mix(in srgb, var(--accent) 7%, var(--plein)); }
.rbxv__hd { padding: 0 var(--rg-espace-4); background: transparent; color: var(--text); }
.rbxv__l1 { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto 16px; align-items: center; gap: var(--rg-espace-3); min-height: 48px; }
.rbxv__l1 b { font-size: var(--rg-taille-texte-m); }
.rbxv__who { display: block; font-size: var(--rg-taille-label-m); color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rbxv__fill { color: var(--text-muted); }
.rbxv__chev { display: block; width: 16px; height: 16px; color: var(--text-muted); transition: transform var(--t-fast) var(--ease); }
.rbxv.is-open .rbxv__chev { transform: rotate(90deg); }
.rbxv__seats { display: none; }
.rbxv__body { display: none; padding: 0 var(--rg-espace-4) var(--rg-espace-3); }
.rbxv.is-open .rbxv__body { display: block; }
.rbxv__edit {
display: block; width: 100%; height: 40px; margin-top: var(--rg-espace-2); border: var(--rg-trait-1) solid var(--rbk-trait); border-radius: var(--rg-rayon-0);
background: var(--plein); font-size: var(--rg-taille-texte-s); font-weight: var(--rg-graisse-semi); cursor: pointer;
}
/* ④ Ma chambre, l'hôtel à appeler, les chambres en lignes */
.rbxo { gap: var(--rg-espace-3); }
.rbxo__ban {
flex-direction: column; align-items: stretch; gap: var(--rg-espace-3); padding: var(--rg-espace-4); border-radius: var(--rg-rayon-0);
background: var(--plein); color: var(--text); box-shadow: none;
}
.rbxo__id b { font-size: var(--rg-taille-h3); font-weight: var(--rg-graisse-gras); }
.rbxo__id span { color: var(--text-soft); }
.rbxo__kpi, .rbxo__io { display: none; }
.rbxo__act { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--rg-espace-2); }
.rbxo__act a {
height: 44px; display: flex; align-items: center; justify-content: center; gap: var(--rg-espace-2); border-radius: var(--rg-rayon-0);
background: var(--rbk-vide); color: var(--text); text-decoration: none; font-size: var(--rg-taille-texte-s); font-weight: var(--rg-graisse-semi);
}
.rbxo__act svg { width: 16px; height: 16px; }
.rbxo__gp { gap: var(--rg-espace-2); }
.rbxo__gh { padding: 0 calc(var(--rg-espace-1) / 2); gap: var(--rg-espace-2); }
.rbxo__gh i { width: 9px; height: 9px; }
.rbxo__gh b { font-size: var(--rg-taille-label-s); letter-spacing: var(--rg-label-m-espacement); }
.rbxo__gh span { font-size: var(--rg-taille-label-m); }
.rbxo__grid { display: flex; flex-direction: column; gap: 0; border-radius: var(--rg-rayon-0); overflow: hidden; background: var(--plein); box-shadow: none; }
.rbxo__r {
display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ty ppl fill" "n n n";
gap: var(--rg-espace-2) var(--rg-espace-2); padding: var(--rg-espace-3) var(--rg-espace-3); border: 0; border-bottom: var(--rg-trait-1) solid var(--rbk-vide); border-radius: var(--rg-rayon-0); box-shadow: none; background: transparent;
}
@media (hover: hover) { .rbxo__r:hover { box-shadow: none; } }
.rbxo__r.is-moi { box-shadow: none; background: color-mix(in srgb, var(--accent) 7%, var(--plein)); }
.rbxo__rh { display: contents; }
.rbxo__ty { grid-area: ty; font-size: var(--rg-taille-label-s); padding: calc(var(--rg-espace-1) / 2) var(--rg-espace-2); }
.rbxo__beds { display: none; }
.rbxo__fill { grid-area: fill; }
.rbxo__ppl { grid-area: ppl; flex-direction: row; min-height: 0; gap: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; }
.rbxo__pp { display: inline; font-size: var(--rg-taille-texte-s); }
.rbxo__pp + .rbxo__pp::before { content: " · "; color: var(--text-muted); }
.rbxo__pp i { display: none; }
.rbxo__pp > span { display: inline; }
.rbxo__n { grid-area: n; }
.rbxo__n i { height: 6px; border-radius: var(--rg-rayon-0); font-size: 0; }
.rbxo__add { min-height: 46px; border: 0; border-radius: var(--rg-rayon-0); }
.rbxo__sans { margin-left: 0; }
/* ⑤ Mes repas, puis tout le monde jour par jour */
.rbxc__desk { display: none; }
.rbxc__tel { display: block; }
.rbxc__note { display: none; }
/* ⑥ Liste et barre d'ajout sous le pouce */
.rbxf__drop { display: none; }
.rbxf__chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--rg-espace-4) * -1) var(--rg-espace-3); padding: 0 var(--rg-espace-4); scrollbar-width: none; }
.rbxf__chips button { flex: none; }
.rbxf__oth { display: none; }
.rbxf { border-radius: var(--rg-rayon-0); }
.rbxf__hd { display: none; }
.rbxf__r { grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--rg-espace-3); min-height: 60px; padding: 0 var(--rg-espace-4); }
.rbxf__x { width: 40px; height: 40px; border-radius: var(--rg-rayon-0); font-size: var(--rg-taille-label-s); }
.rbxf__su, .rbxf__sz, .rbxf__by, .rbxf__note, .rbxf__b--dl { display: none; }
.rbxf__sub { display: block; }
.rbxf__ac { padding-right: 0; }
.rbxf__b { border: 0; background: transparent; color: var(--text-muted) !important; }
#rbSecPieces { padding-bottom: var(--rg-espace-9); }
.rbxf__bar {
position: fixed; left: 12px; right: 12px; z-index: 20;
bottom: calc(90px + env(safe-area-inset-bottom, 0px));
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rg-espace-2); padding: var(--rg-espace-2); border-radius: var(--rg-rayon-0);
background: var(--rg-marine-5); box-shadow: none;
}
.rbxf__bar button {
height: 48px; display: flex; align-items: center; justify-content: center; gap: var(--rg-espace-2); border: 0; border-radius: var(--rg-rayon-0);
background: color-mix(in srgb, var(--rg-neutre-blanc) 10%, transparent); color: var(--rg-neutre-blanc) !important; font-size: var(--rg-taille-texte-s); font-weight: var(--rg-graisse-gras); cursor: pointer;
}
.rbxf__bar button:first-child { background: var(--accent); }
.rbxf__bar svg { width: 18px; height: 18px; }
}
/* Un trait par jour dans la grille du catering. */
.rbxc__r {
background-image: repeating-linear-gradient(to right, var(--rbk-trait) 0 var(--rg-trait-1), transparent var(--rg-trait-1) calc(100% / var(--j)));
background-position: 200px 0;
background-size: calc(100% - 200px) 100%;
background-repeat: no-repeat;
}
@media (hover: hover) { .rbxc__r:hover { background-color: var(--rbk-pale); } }
.rbxc__eh > .rbx__k { flex: none; white-space: nowrap; }
.rbxc__eh > span:last-child:not(.rbx__k) { min-width: 0; }
.rbxme__cnt { white-space: nowrap; }
/* Tablette et petits écrans : mêmes vues, colonnes resserrées. */
@media (min-width: 721px) and (max-width: 1100px) {
.rbxh__hd, .rbxh__r { grid-template-columns: 88px minmax(0, 1fr) minmax(0, 1fr) 84px 120px; }
.rbxh__d { padding: var(--rg-espace-3) var(--rg-espace-3); }
.rbxh__m { padding: 0 var(--rg-espace-2); gap: var(--rg-espace-1); }
.rbxh__pill { width: 30px; }
.rbxh__h { padding: 0 var(--rg-espace-3) 0 var(--rg-espace-2); }
.rbxh__bt { font-size: var(--rg-taille-label-s); }
.rbxs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rbxs__c--dr { grid-column: 1 / -1; }
.rbxo__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rbxo__ban { flex-wrap: wrap; gap: var(--rg-espace-4) var(--rg-espace-5); }
.rbxo__id { flex-basis: 100%; }
.rbxt { grid-template-columns: minmax(0, 1fr); }
.rbxf__hd, .rbxf__r { grid-template-columns: 52px minmax(0, 1fr) 120px 84px 84px; }
.rbxf__hd span:nth-child(5), .rbxf__by { display: none; }
}
@media (min-width: 721px) and (max-width: 860px) {
.rbxs, .rbxo__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* =========================================================
CREW, L'ORGANIGRAMME PAR VOITURE (espace GP)
Les photos d'abord : on reconnaît quelqu'un au paddock
à son visage avant son nom.
========================================================= */
.vt {
--vk-ga: var(--rg-metier-orange-fonce); --vk-en: var(--rg-metier-violet); --vk-ma: var(--rg-marine-2);
--vk-ink: var(--rg-marine-5); --vk-trait: var(--rg-neutre-brume); --vk-vide: var(--rg-neutre-papier); --vk-pale: var(--rg-neutre-papier);
display: flex; flex-direction: column; gap: var(--rg-espace-4);
}
:root:not([data-theme="light"]) .vt {
--vk-ga: var(--rg-metier-orange-clair); --vk-en: var(--rg-metier-violet-clair); --vk-ma: var(--rg-marine-0);
--vk-ink: var(--rg-marine-4); --vk-trait: color-mix(in srgb, var(--rg-neutre-blanc) 12%, transparent); --vk-vide: color-mix(in srgb, var(--rg-neutre-blanc) 6%, transparent); --vk-pale: color-mix(in srgb, var(--rg-neutre-blanc) 3%, transparent);
}
.vt button:not([class*="btn-"]) { font: inherit; color: inherit; }
.vt__top { display: flex; align-items: center; justify-content: space-between; gap: var(--rg-espace-3); flex-wrap: wrap; }
.vt__tabs {
display: flex; gap: var(--rg-espace-1); padding: var(--rg-espace-1); border-radius: var(--rg-rayon-0); overflow-x: auto; scrollbar-width: none;
background: var(--plein); box-shadow: none;
}
.vt__tabs button {
flex: none; height: 38px; padding: 0 var(--rg-espace-4); border: 0; border-radius: var(--rg-rayon-0); background: transparent;
font-size: var(--rg-taille-texte-s); font-weight: var(--rg-graisse-semi); color: var(--text-soft) !important; cursor: pointer; white-space: nowrap;
}
@media (hover: hover) { .vt__tabs button:hover { background: var(--vk-vide); } }
.vt__tabs button.is-on { background: var(--text); color: var(--bg) !important; font-weight: var(--rg-graisse-gras); }
/* Les photos */
.vtph {
position: relative; display: grid; place-items: center; overflow: hidden; flex: none;
width: 100%; aspect-ratio: 1 / 1; border-radius: var(--rg-rayon-0); color: var(--rg-neutre-blanc);
}
.vtph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.vtph b { font-family: var(--font-display); font-style: var(--rg-titre-style); font-stretch: var(--titre-largeur); font-size: clamp(var(--rg-taille-h3), 3vw, var(--rg-taille-h1)); font-weight: var(--rg-graisse-extra); letter-spacing: 0; }
.vtph--g { width: 112px; height: 112px; border-radius: var(--rg-rayon-0); }
.vtph--g b { font-size: var(--rg-taille-h1); }
.vtph--vide { background: var(--vk-pale); color: var(--text-faint); box-shadow: none; }
.vtph--vide svg { width: 70%; height: 70%; margin-top: 30%; opacity: 0.5; }
/* La direction et le trio du programme */
.vt__dir, .vt__leads { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--rg-espace-3); }
.vtlead {
display: flex; align-items: center; gap: var(--rg-espace-4); padding: var(--rg-espace-3); border: 0; border-radius: var(--rg-rayon-0); text-align: left; cursor: pointer;
background: var(--plein); box-shadow: none; transition: transform var(--t-fast) var(--ease);
}
@media (hover: hover) { .vtlead:hover { transform: translateY(-1px); } }
.vtlead--dir { background: var(--vk-ink); color: var(--rg-neutre-blanc) !important; box-shadow: none; }
.vtlead__t { display: flex; flex-direction: column; gap: var(--rg-espace-1); min-width: 0; }
.vtlead__t em { text-transform: uppercase; font-style: normal; font-family: var(--font-mono); font-size: var(--rg-taille-label-s); font-weight: var(--rg-graisse-gras); letter-spacing: var(--rg-label-m-espacement); color: var(--rg-rose-3); }
.vtlead__t b { font-family: var(--font-display); font-style: var(--rg-titre-style); font-stretch: var(--titre-largeur); font-size: var(--rg-taille-h3); font-weight: var(--rg-graisse-gras); line-height: var(--rg-interligne-titre); }
.vtlead__t > span { font-size: var(--rg-taille-texte-s); color: var(--text-soft); }
.vtlead--dir .vtlead__t > span { color: color-mix(in srgb, var(--rg-neutre-blanc) 72%, transparent); }
.vtpill { align-self: flex-start; padding: var(--rg-espace-1) var(--rg-espace-2); border-radius: var(--rg-rayon-0); font-size: var(--rg-taille-label-s); font-style: normal; font-weight: var(--rg-graisse-gras); white-space: nowrap; }
.vtpill--ga { background: color-mix(in srgb, var(--vk-ga) 15%, var(--plein)); color: var(--vk-ga); }
.vtpill--en { background: color-mix(in srgb, var(--vk-en) 15%, var(--plein)); color: var(--vk-en); }
.vtpill--ma { background: color-mix(in srgb, var(--vk-ma) 15%, var(--plein)); color: var(--vk-ma); }
.vt__note {
margin: 0; padding: var(--rg-espace-3) var(--rg-espace-4); border-radius: var(--rg-rayon-0); font-size: var(--rg-taille-texte-s); font-weight: var(--rg-graisse-semi);
background: color-mix(in srgb, var(--vk-ga) 10%, var(--plein)); color: var(--vk-ga);
}
/* Une colonne par voiture */
.vt__cars { display: grid; grid-template-columns: repeat(var(--n), minmax(120px, 240px)) minmax(120px, 200px); gap: var(--rg-espace-3); align-items: start; overflow-x: auto; }
@media (min-width: 721px) and (max-width: 1100px) {
.vt__cars { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); overflow: visible; }
}
.vtcar {
display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: var(--rg-rayon-0);
background: var(--plein); box-shadow: none;
}
.vtcar__hd {
display: flex; flex-direction: column; gap: calc(var(--rg-espace-1) / 2); padding: var(--rg-espace-3) var(--rg-espace-4); border: 0; text-align: left; cursor: pointer;
background: var(--vk-ink); color: var(--rg-neutre-blanc) !important;
}
.vtcar__hd em { font-style: normal; font-family: var(--font-mono); font-size: var(--rg-taille-label-s); font-weight: var(--rg-graisse-gras); letter-spacing: var(--rg-label-m-espacement); color: var(--rg-rose-3); }
.vtcar__hd b { font-family: var(--font-display); font-style: var(--rg-titre-style); font-stretch: var(--titre-largeur); font-size: var(--rg-taille-texte-l); font-weight: var(--rg-graisse-gras); line-height: var(--rg-interligne-titre); }
@media (hover: hover) { .vtcar__hd:hover b { text-decoration: underline; } }
.vtcar--tous { background: var(--vk-pale); box-shadow: none; border: var(--rg-trait-2) dashed var(--vk-trait); }
.vtcar__k { margin: 0; padding: var(--rg-espace-3) var(--rg-espace-4) 0; font-family: var(--font-mono); font-size: var(--rg-taille-label-s); font-weight: var(--rg-graisse-gras); letter-spacing: var(--rg-label-m-espacement); color: var(--text-muted); }
.vtcar__l { display: flex; flex-direction: column; gap: var(--rg-espace-4); padding: var(--rg-espace-3); }
.vtcar__plus {
height: 40px; border: var(--rg-trait-2) dashed var(--vk-trait); border-radius: var(--rg-rayon-0); background: transparent;
font-size: var(--rg-taille-texte-s); font-weight: var(--rg-graisse-semi); color: var(--text-muted) !important; cursor: pointer;
}
@media (hover: hover) { .vtcar__plus:hover { color: var(--text) !important; border-color: var(--text-muted); } }
.vtseat { display: flex; flex-direction: column; gap: var(--rg-espace-2); min-width: 0; }
.vtseat__ph { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: var(--rg-rayon-0); background: none; cursor: pointer; }
.vtseat__ph .vtpill { position: absolute; top: 8px; left: 8px; max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis;
background: var(--plein); box-shadow: none; }
@media (hover: hover) { .vtseat__ph:hover .vtph { filter: brightness(1.05); } }
.vtseat__ph:focus-visible { outline: var(--rg-trait-3) solid var(--accent); outline-offset: calc(var(--rg-espace-1) / 2); }
.vtseat__n { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--rg-espace-2); padding: 0 calc(var(--rg-espace-1) / 2); }
.vtseat__n b { font-size: var(--rg-taille-texte-m); font-weight: var(--rg-graisse-gras); line-height: var(--rg-interligne-court); }
.vtseat.is-vide .vtseat__n b { color: var(--text-muted); font-weight: var(--rg-graisse-semi); }
.vtseat__ed {
flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: var(--rg-rayon-0);
background: transparent; color: var(--text-muted) !important; cursor: pointer; opacity: 0.6;
}
.vtseat__ed svg { width: 14px; height: 14px; }
.vtseat__ed:focus-visible { opacity: 1; background: var(--vk-vide); }
@media (hover: hover) { .vtseat:hover .vtseat__ed { opacity: 1; background: var(--vk-vide); } }
.vtseat__al { padding: 0 calc(var(--rg-espace-1) / 2); margin-top: calc(var(--rg-espace-1) * -1); font-style: normal; font-size: var(--rg-taille-label-s); color: var(--vk-en); font-weight: var(--rg-graisse-semi); }
.vt__vide {
display: flex; flex-direction: column; align-items: flex-start; gap: var(--rg-espace-2); padding: var(--rg-espace-5); border-radius: var(--rg-rayon-0);
border: var(--rg-trait-2) dashed var(--vk-trait); background: var(--plein);
}
.vt__vide b { font-family: var(--font-display); font-style: var(--rg-titre-style); font-stretch: var(--titre-largeur); font-size: var(--t-section-s); font-weight: var(--t-section-w); line-height: var(--rg-interligne-h2); }
.vt__vide span { font-size: var(--rg-taille-texte-s); color: var(--text-soft); margin-bottom: var(--rg-espace-2); }
/* Ceux qui n'ont pas encore de siège */
.vt__reste { display: flex; flex-direction: column; gap: var(--rg-espace-3); }
.vt__rk { display: flex; align-items: center; gap: var(--rg-espace-2); margin: var(--rg-espace-2) 0 0; font-family: var(--font-mono); font-size: var(--rg-taille-label-s); font-weight: var(--rg-graisse-gras); letter-spacing: var(--rg-label-m-espacement); text-transform: uppercase; color: var(--text-muted); }
.vt__rk i { font-style: normal; padding: var(--rg-trait-1) var(--rg-espace-2); border-radius: var(--rg-rayon-0); background: var(--vk-vide); }
.vt__rl { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--rg-espace-2); }
.vtmini {
display: flex; align-items: center; gap: var(--rg-espace-3); padding: var(--rg-espace-2); border: 0; border-radius: var(--rg-rayon-0); text-align: left; cursor: pointer;
background: var(--plein); box-shadow: none;
}
.vtmini .vtph { width: 56px; height: 56px; border-radius: var(--rg-rayon-0); }
.vtmini .vtph b { font-size: var(--rg-taille-texte-l); }
.vtmini > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.vtmini b { font-size: var(--rg-taille-texte-s); }
.vtmini em { font-style: normal; font-size: var(--rg-taille-label-m); color: var(--text-muted); }
.vt__leg { display: flex; flex-wrap: wrap; gap: var(--rg-espace-2) var(--rg-espace-4); font-size: var(--rg-taille-label-m); color: var(--text-soft); }
.vt__leg span { display: inline-flex; align-items: center; gap: var(--rg-espace-2); }
.vtsw { width: 22px; height: 14px; border-radius: var(--rg-rayon-0); }
.vtsw--ga { background: color-mix(in srgb, var(--vk-ga) 18%, var(--plein)); }
.vtsw--en { background: color-mix(in srgb, var(--vk-en) 18%, var(--plein)); }
.vtsw--ma { background: color-mix(in srgb, var(--vk-ma) 18%, var(--plein)); }
.vtsw--vide { width: 16px; height: 16px; border-radius: var(--rg-rayon-0); border: var(--rg-trait-2) dashed var(--text-muted); }
/* Téléphone : une voiture par carte, les photos deux par deux, on glisse d'une voiture à l'autre. */
@media (max-width: 720px) {
.vt { gap: var(--rg-espace-3); }
.vt__top { flex-direction: column; align-items: stretch; }
.vt__tabs { margin: 0 calc(var(--rg-espace-4) * -1); border-radius: var(--rg-rayon-0); box-shadow: none; background: transparent; padding: 0 var(--rg-espace-4); }
.vt__tabs button { background: var(--plein); box-shadow: none; border-radius: var(--rg-rayon-0); }
.vt__tabs button.is-on { box-shadow: none; }
.vt__dir, .vt__leads { grid-template-columns: minmax(0, 1fr); gap: var(--rg-espace-2); }
.vtlead { gap: var(--rg-espace-3); padding: var(--rg-espace-2); border-radius: var(--rg-rayon-0); }
.vtph--g { width: 72px; height: 72px; border-radius: var(--rg-rayon-0); }
.vtph--g b { font-size: var(--rg-taille-h2); }
.vtlead__t b { font-size: var(--rg-taille-texte-l); }
.vt__cars {
display: flex; gap: var(--rg-espace-3); overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--rg-espace-4) * -1); padding: 0 var(--rg-espace-4) var(--rg-espace-2);
scrollbar-width: none;
}
.vtcar { flex: 0 0 86%; scroll-snap-align: center; }
.vtcar__l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rg-espace-3) var(--rg-espace-3); }
.vtcar__plus { grid-column: 1 / -1; }
.vtseat__ed { opacity: 1; }
.vt__rl { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) { .vt__top .vt__add { align-self: flex-start; width: auto; } }
:root:not([data-theme="light"]) .vtsw--ga, :root:not([data-theme="light"]) .vtsw--en, :root:not([data-theme="light"]) .vtsw--ma { opacity: 1; filter: saturate(1.6) brightness(1.4); }
/* Une ou deux voitures (LMP) : la colonne s'élargit et ses sièges se rangent côte à côte. */
@media (min-width: 721px) {
.vt__cars.is-peu { grid-template-columns: repeat(var(--n), minmax(0, 1fr)) minmax(160px, 210px); }
.vt__cars.is-peu .vtcar:not(.vtcar--tous) .vtcar__l { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--rg-espace-4) var(--rg-espace-3); }
.vt__cars.is-peu .vtcar__plus { grid-column: 1 / -1; }
}
.vt, .vt__top, .vt__tabs, .vt__cars { min-width: 0; max-width: 100%; }
@media (max-width: 720px) { .vt__tabs, .vt__cars { max-width: none; width: calc(100% + 32px); box-sizing: border-box; } }
/* Workshop & office : une colonne par métier, autant qu'il en faut. */
.vt__cars--bureau { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); overflow: visible; }
.vt__cars--bureau .vtcar__hd { cursor: default; }
@media (hover: hover) { .vt__cars--bureau .vtcar__hd:hover b { text-decoration: none; } }
/* Le rappel « fiche de poste à écrire » : un point sur la photo. */
.vtlead__ph { position: relative; display: block; flex: none; }
.vtseat__ph { position: relative; }
.vtfdp {
position: absolute; top: 8px; right: 8px; width: 12px; height: 12px; border-radius: var(--rg-rayon-0);
background: var(--accent); box-shadow: none;
}
.vtlead__ph .vtfdp { top: 6px; right: 6px; }
.vtfdp--leg { position: static; display: inline-block; box-shadow: none; }
@media (max-width: 720px) {
.vt__cars--bureau { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; width: auto; overflow: visible; }
.vt__cars--bureau .vtcar { flex: none; }
.vt__cars--bureau .vtcar__l { grid-template-columns: minmax(0, 1fr); }
}
.vtmini .vtfdp { top: 3px; right: 3px; width: 9px; height: 9px; }
/* =========================================================
COMPTES, l'accueil d'un nouvel arrivant, la validation,
les listes modifiables
========================================================= */
body.acc-ouvert { overflow: hidden; }
.acc {
position: fixed; inset: 0; z-index: 200; overflow-y: auto; display: flex; justify-content: center; align-items: flex-start;
padding: var(--rg-espace-7) var(--rg-espace-4); background: var(--bg);
}
.acc__box { width: min(640px, 100%); display: flex; flex-direction: column; gap: var(--rg-espace-4); }
#accForm { display: flex; flex-direction: column; gap: var(--rg-espace-4); }
.acc__k { margin: 0; font-family: var(--font-mono); font-size: var(--rg-taille-label-s); font-weight: var(--rg-graisse-gras); letter-spacing: var(--rg-label-m-espacement); color: var(--accent); }
.acc__t { margin: 0; font-family: var(--font-display); font-style: var(--rg-titre-style); font-stretch: var(--titre-largeur); font-size: var(--rg-taille-h2); font-weight: var(--rg-graisse-extra); line-height: var(--rg-interligne-titre); }
.acc__p { margin: 0; font-size: var(--rg-taille-texte-m); color: var(--text-soft); }
.acc__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rg-espace-3); }
.acc__grid .form-field, #accForm > .form-field { display: flex; flex-direction: column; gap: var(--rg-espace-2); }
#accForm > .form-label { margin: var(--rg-espace-2) 0 calc(var(--rg-espace-1) * -1); }
.acc__chips { display: flex; flex-wrap: wrap; gap: var(--rg-espace-2); }
.acc__chip {
height: 36px; padding: 0 var(--rg-espace-4); border-radius: var(--rg-rayon-0); border: var(--rg-trait-1) solid var(--border-2); background: var(--plein);
font: inherit; font-size: var(--rg-taille-texte-s); font-weight: var(--rg-graisse-semi); color: var(--text); cursor: pointer;
}
@media (hover: hover) { .acc__chip:hover { border-color: var(--text-muted); } }
.acc__chip.is-on { background: var(--text); color: var(--bg); border-color: transparent; }
.acc__num { max-width: 140px; font-family: var(--font-mono); font-size: var(--rg-taille-h3); font-weight: var(--rg-graisse-gras); }
.acc__aide { margin: 0; font-size: var(--rg-taille-texte-s); color: var(--text-muted); }
.acc__ph { display: flex; align-items: center; gap: var(--rg-espace-4); }
.acc__ph > span { font-size: var(--rg-taille-texte-s); color: var(--text-soft); }
.acc__phb {
flex: none; width: 112px; height: 112px; border-radius: var(--rg-rayon-0); overflow: hidden; display: grid; place-items: center; cursor: pointer;
border: var(--rg-trait-3) dashed var(--border-2); background: var(--plein); color: var(--text-muted); font-size: var(--rg-taille-h1); padding: 0;
}
.acc__phb img { width: 100%; height: 100%; object-fit: cover; }
.acc__err { margin: 0; padding: var(--rg-espace-3) var(--rg-espace-4); border-radius: var(--rg-rayon-0); font-size: var(--rg-taille-texte-s); font-weight: var(--rg-graisse-semi);
background: color-mix(in srgb, var(--accent) 12%, var(--plein)); color: var(--accent); }
.acc__pied { display: flex; justify-content: space-between; align-items: center; gap: var(--rg-espace-3); margin-top: var(--rg-espace-2); }
.acc__out { border: 0; background: none; font: inherit; font-size: var(--rg-taille-texte-s); color: var(--text-muted); cursor: pointer; text-decoration: underline; padding: 0; }
.acc__box > .acc__out { align-self: flex-start; }
.acc__liste { display: flex; flex-direction: column; gap: var(--rg-espace-2); }
.acc__moi {
display: flex; align-items: center; gap: var(--rg-espace-4); padding: var(--rg-espace-3); border-radius: var(--rg-rayon-0); background: var(--plein);
box-shadow: none; text-align: left; font: inherit; color: inherit; border: 0;
}
.acc__moi .vtph { width: 64px; height: 64px; border-radius: var(--rg-rayon-0); }
.acc__moi .vtph b { font-size: var(--rg-taille-h3); }
.acc__moi > span:last-child { display: flex; flex-direction: column; }
.acc__moi em { font-style: normal; font-size: var(--rg-taille-texte-s); color: var(--text-muted); }
.acc__moi--btn { cursor: pointer; }
@media (hover: hover) { .acc__moi--btn:hover { box-shadow: none; } }
.acc__lien { align-self: flex-start; border: 0; background: none; font: inherit; font-size: var(--rg-taille-texte-s); font-weight: var(--rg-graisse-semi); color: var(--accent); cursor: pointer; padding: 0; }
@media (max-width: 720px) {
.acc { padding: var(--rg-espace-6) var(--rg-espace-4) calc(var(--rg-espace-6) + env(safe-area-inset-bottom, 0)); }
.acc__t { font-size: var(--rg-taille-h2); }
.acc__grid { grid-template-columns: minmax(0, 1fr); }
}
.aval {
display: flex; flex-direction: column; gap: var(--rg-espace-3); margin-bottom: var(--rg-espace-4); padding: var(--rg-espace-4); border-radius: var(--rg-rayon-0);
background: color-mix(in srgb, var(--accent) 7%, var(--plein)); box-shadow: none;
}
.aval__k { margin: 0; display: flex; align-items: center; gap: var(--rg-espace-2); font-family: var(--font-mono); font-size: var(--rg-taille-label-s); font-weight: var(--rg-graisse-gras); letter-spacing: var(--rg-label-m-espacement); text-transform: uppercase; color: var(--accent); }
.aval__k i { font-style: normal; padding: var(--rg-trait-1) var(--rg-espace-2); border-radius: var(--rg-rayon-0); background: var(--accent); color: var(--rg-neutre-blanc); }
.aval__l { display: flex; flex-direction: column; gap: var(--rg-espace-2); }
.aval__r { display: flex; align-items: center; gap: var(--rg-espace-4); padding: var(--rg-espace-2); border-radius: var(--rg-rayon-0); background: var(--plein); }
.aval__r > .vtph { width: 56px; height: 56px; border-radius: var(--rg-rayon-0); }
.aval__r > .vtph b { font-size: var(--rg-taille-texte-l); }
.aval__t { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.aval__t em { font-style: normal; font-size: var(--rg-taille-label-m); color: var(--text-muted); }
.aval__a { display: flex; gap: var(--rg-espace-2); flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 720px) { .aval__r { flex-wrap: wrap; } .aval__a { width: 100%; justify-content: stretch; } .aval__a button { flex: 1; } }
.li { display: flex; flex-direction: column; gap: var(--rg-espace-2); margin-bottom: var(--rg-espace-2); }
.li__r { display: flex; align-items: center; gap: var(--rg-espace-2); }
.li__r .form-input { flex: 1; }
.li__r.is-off .form-input { opacity: 0.5; text-decoration: line-through; }
.li__c { flex: none; width: 38px; height: 38px; padding: calc(var(--rg-espace-1) / 2); border: var(--rg-trait-1) solid var(--border-2); border-radius: var(--rg-rayon-0); background: var(--plein); cursor: pointer; }
.li__m { flex: none; display: flex; align-items: center; gap: var(--rg-espace-1); font-size: var(--rg-taille-label-m); color: var(--text-muted); cursor: pointer; }
.li__plus { align-self: flex-start; }
/* L'en-tête d'une voiture : la photo du pilote, son numéro, son nom. */
.vtcar__hd--pil { flex-direction: row; align-items: center; gap: var(--rg-espace-3); }
.vtcar__pph { flex: none; width: 44px; }
.vtcar__pph .vtph { width: 44px; height: 44px; border-radius: var(--rg-rayon-0); }
.vtcar__pph .vtph b { font-size: var(--rg-taille-texte-m); }
.vtcar__pt { display: flex; flex-direction: column; gap: calc(var(--rg-espace-1) / 2); min-width: 0; }
.vtcar__pt em { font-style: normal; font-family: var(--font-display); font-stretch: var(--titre-largeur); font-size: var(--rg-taille-h3); font-weight: var(--rg-graisse-extra); line-height: var(--rg-interligne-plein); color: var(--rg-rose-3); letter-spacing: 0; }
.vtcar__vide { margin: 0; padding: var(--rg-espace-4) var(--rg-espace-2); font-size: var(--rg-taille-texte-s); color: var(--text-muted); text-align: center; }
.crewbar__lists { border-style: solid; }
/* Workshop & office : une ligne par métier, les gens côte à côte. */
.vtrows { display: flex; flex-direction: column; gap: var(--rg-espace-3); }
.vtrow {
display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: start; gap: var(--rg-espace-4);
padding: var(--rg-espace-4); border-radius: var(--rg-rayon-0); background: var(--plein); box-shadow: none;
}
.vtrow__h { margin: 0; padding-top: var(--rg-espace-1); display: flex; flex-direction: column; gap: var(--rg-espace-1); }
.vtrow__h b { font-family: var(--font-display); font-style: var(--rg-titre-style); font-stretch: var(--titre-largeur); font-size: var(--rg-taille-texte-l); font-weight: var(--rg-graisse-gras); line-height: var(--rg-interligne-h2); }
.vtrow__h i { font-style: normal; font-family: var(--font-mono); font-size: var(--rg-taille-label-m); font-weight: var(--rg-graisse-gras); color: var(--text-muted); }
.vtrow__l { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 150px)); gap: var(--rg-espace-4) var(--rg-espace-3); }
@media (max-width: 720px) {
.vtrow { grid-template-columns: minmax(0, 1fr); gap: var(--rg-espace-3); padding: var(--rg-espace-3); }
.vtrow__l { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Le rappel de fiche de poste : un point discret, réservé aux admins. */
.vtfdp { width: 9px; height: 9px; top: 7px; right: 7px; box-shadow: none; border: 0; }
.vtlead__ph .vtfdp { top: 5px; right: 5px; }
/* Les profils à compléter, en tête du Crew pour les admins. */
.acomp {
margin-bottom: var(--rg-espace-4); padding: var(--rg-espace-4); border-radius: var(--rg-rayon-0);
background: var(--plein); box-shadow: none;
}
.acomp > summary { cursor: pointer; list-style: none; flex-wrap: wrap; }
.acomp > summary::-webkit-details-marker { display: none; }
.acomp > summary span { flex-basis: 100%; margin-top: var(--rg-espace-1); font-family: var(--font-base); font-size: var(--rg-taille-texte-s); font-weight: var(--rg-graisse-regulier); letter-spacing: 0; text-transform: none; color: var(--text-soft); }
.acomp[open] > summary { margin-bottom: var(--rg-espace-3); }
.acomp .vtmini .vtph { width: 48px; height: 48px; }
.acomp { --vk-trait: var(--border); }
.crewbar__lists i { margin-left: var(--rg-espace-2); padding: var(--rg-trait-1) var(--rg-espace-2); border-radius: var(--rg-rayon-0); font-style: normal; font-size: var(--rg-taille-label-s); background: var(--accent); color: var(--rg-neutre-blanc); }
.acomp__aide { margin: 0 0 var(--rg-espace-3); }
.acomp__l { display: flex; flex-direction: column; gap: var(--rg-espace-2); margin-top: var(--rg-espace-3); }
.acomp__r {
display: flex; align-items: center; gap: var(--rg-espace-3); padding: var(--rg-espace-2); border: 0; border-radius: var(--rg-rayon-0); background: transparent;
font: inherit; color: inherit; text-align: left; cursor: pointer;
}
@media (hover: hover) { .acomp__r:hover { background: var(--surface-3); } }
.acomp__r .vtph { width: 44px; height: 44px; border-radius: var(--rg-rayon-0); }
.acomp__r .vtph b { font-size: var(--rg-taille-texte-m); }
.acomp__r span { display: flex; flex-direction: column; }
.acomp__r em { font-style: normal; font-size: var(--rg-taille-label-m); color: var(--text-muted); }
/* Saisie assistée d'un nom : le fantôme gris et les fiches déjà connues. */
.crew-fant { position: relative; }
.crew-fant .form-input { position: relative; z-index: 1; background: transparent; }
.crew-fant::before { content: ""; position: absolute; inset: 0; background: var(--surface); z-index: 0; border-radius: var(--r-md); }
.crew-fant__t {
position: absolute; inset: 0; z-index: 2; pointer-events: none; display: flex; align-items: center;
padding: 0 var(--rg-espace-4); white-space: pre; overflow: hidden; color: var(--text-muted);
}
.crew-fant__v { color: transparent; }
.crew-suggest {
display: flex; flex-direction: column; gap: var(--rg-espace-1); padding: var(--rg-espace-3); margin-top: calc(var(--rg-espace-1) * -1); border-radius: var(--rg-rayon-0);
background: color-mix(in srgb, var(--accent) 6%, var(--plein)); box-shadow: none;
}
.crew-suggest__k { margin: 0 0 var(--rg-espace-1); font-family: var(--font-mono); font-size: var(--rg-taille-label-s); font-weight: var(--rg-graisse-gras); letter-spacing: var(--rg-label-m-espacement); text-transform: uppercase; color: var(--accent); }
.crew-suggest__r {
display: flex; align-items: center; gap: var(--rg-espace-3); padding: var(--rg-espace-2); border: 0; border-radius: var(--rg-rayon-0); background: transparent;
font: inherit; color: inherit; text-align: left; cursor: pointer;
}
@media (hover: hover) { .crew-suggest__r:hover { background: var(--plein); } }
.crew-suggest__r .vtph { width: 40px; height: 40px; border-radius: var(--rg-rayon-0); }
.crew-suggest__r .vtph b { font-size: var(--rg-taille-texte-s); }
.crew-suggest__r > span:not(.vtph) { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.crew-suggest__r .vtph { flex: none; }
.crew-suggest__r em { font-style: normal; font-size: var(--rg-taille-label-m); color: var(--text-muted); }
.crew-suggest__r i { font-style: normal; font-size: var(--rg-taille-label-m); font-weight: var(--rg-graisse-gras); color: var(--accent); }
/* Import d'un timetable : lecture du PDF, puis vérification ligne par ligne avant d'ajouter. */
.tti__lecture { display: flex; align-items: center; gap: var(--rg-espace-4); padding: var(--rg-espace-2) 0; }
.tti__lecture p { display: flex; flex-direction: column; gap: var(--rg-espace-1); margin: 0; }
.tti__lecture b { font-size: var(--fs-sm); color: var(--text); word-break: break-word; }
.tti__lecture span { font-size: var(--fs-3xs); color: var(--text-muted); }
.tti__lecture .rg-chargement { flex: none; }
.tti__err { margin: 0; color: var(--text-soft); font-size: var(--fs-sm); }
.tti--verif { height: calc(100vh - 2 * var(--gap)); }
.tti__sous { margin: var(--rg-espace-1) 0 0; font-size: var(--fs-3xs); color: var(--text-muted); }
.tti__onglets { display: flex; gap: var(--rg-espace-2); padding: 0 var(--rg-espace-5) var(--rg-espace-4); overflow-x: auto; border-bottom: var(--rg-trait-1) solid var(--border); flex: none; }
.tti__onglet {
display: grid; grid-template-columns: auto auto; column-gap: var(--rg-espace-2); align-items: center; text-align: left;
padding: var(--rg-espace-2) var(--rg-espace-3); border: var(--rg-trait-1) solid var(--border); border-radius: var(--r-md, var(--rg-rayon-0));
background: transparent; color: var(--text-soft); cursor: pointer; white-space: nowrap;
}
.tti__onglet b { font-size: var(--fs-3xs); font-weight: var(--rg-graisse-gras); }
.tti__onglet em { grid-column: 1; font-style: normal; font-family: var(--font-mono); font-size: var(--rg-taille-label-s); color: var(--text-muted); }
.tti__onglet i { grid-column: 2; grid-row: 1 / 3; font-style: normal; font-family: var(--font-mono); font-size: var(--rg-taille-label-s); font-weight: var(--rg-graisse-gras); }
@media (hover: hover) { .tti__onglet:hover { border-color: var(--border-2); color: var(--text); } }
.tti__onglet.is-on { border-color: var(--accent); color: var(--text); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.tti__onglet--alerte i { color: var(--accent); }
.tti__alerte, .tti__note { margin: var(--rg-espace-3) var(--rg-espace-5) 0; padding: var(--rg-espace-3) var(--rg-espace-3); border-radius: var(--r-md, var(--rg-rayon-0)); font-size: var(--fs-3xs); flex: none; }
.tti__alerte { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text); }
.tti__note { background: var(--surface-2); color: var(--text-soft); }
.tti__corps { flex: 1; overflow-y: auto; padding-top: var(--rg-espace-2); }
.tti__l {
display: grid; align-items: start; gap: var(--rg-espace-2);
grid-template-columns: 22px 100px 110px 74px minmax(160px, 1fr) 350px 130px 26px;
padding: var(--rg-espace-2) 0; border-bottom: var(--rg-trait-1) solid var(--border);
}
.tti__l.is-off > *:not(.tti__garde) { opacity: 0.35; }
.tti__l .form-input, .tti__l .form-select { height: 34px; padding-top: 0; padding-bottom: 0; font-size: var(--fs-3xs); }
.tti__garde { display: flex; align-items: center; height: 34px; }
.tti__garde input { accent-color: var(--accent); width: 15px; height: 15px; }
.tti__h { font-family: var(--font-mono); }
.tti__d { position: relative; display: block; }
.tti__d input { width: 100%; padding-right: var(--rg-espace-6); font-family: var(--font-mono); }
.tti__d em { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: var(--rg-taille-label-s); color: var(--text-muted); pointer-events: none; }
.tti__quoi { display: flex; flex-direction: column; gap: var(--rg-espace-1); min-width: 0; }
.tti__quoi em { font-style: normal; font-size: var(--rg-taille-label-s); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tti__quoi em.tti__libre { color: var(--accent); }
.tti__qui { display: flex; flex-wrap: wrap; gap: var(--rg-espace-1); padding-top: var(--rg-espace-2); }
.tti__qui .evf__role {
display: inline-flex; align-items: center; gap: var(--rg-espace-1);
padding: var(--rg-espace-1) var(--rg-espace-2); font-size: var(--rg-taille-label-s);
border-width: var(--rg-trait-1); border-left-color: var(--border);
}
.tti__qui .evf__role::before {
content: ""; width: 6px; height: 6px; border-radius: var(--rg-rayon-0);
background: var(--mc, var(--border-2)); flex: none;
}
@media (hover: hover) { .tti__qui .evf__role:hover { border-left-color: var(--border-2); } }
.tti__qui .evf__role.is-on { border-color: var(--mc, var(--accent)); }
.tti__qui .evf__role.is-on::before { background: var(--rg-neutre-blanc); }
.tti__x {
width: 26px; height: 34px; border: 0; background: transparent; color: var(--text-muted);
font-size: var(--rg-taille-texte-l); line-height: var(--rg-interligne-plein); cursor: pointer; border-radius: var(--rg-rayon-0);
}
@media (hover: hover) { .tti__x:hover { color: var(--accent); } }
.tti__vide { color: var(--text-muted); font-size: var(--fs-3xs); padding: var(--rg-espace-5) 0; }
.tti__rempl { display: flex; align-items: center; gap: var(--rg-espace-2); font-size: var(--fs-3xs); color: var(--text-soft); cursor: pointer; }
.tti__rempl input { accent-color: var(--accent); width: 15px; height: 15px; }
.tti__reste { align-self: center; font-size: var(--fs-3xs); color: var(--accent); font-weight: var(--rg-graisse-gras); }
@media (max-width: 900px) {
.tti--verif { height: 100dvh; }
.tti__l { grid-template-columns: 22px 1fr 1fr 1fr 26px; }
.tti__quoi, .tti__qui, .tti__c { grid-column: 2 / 5; }
.tti__qui { max-width: none; }
.tti__x { grid-column: 5; grid-row: 1; }
.tti__onglets { padding: 0 var(--rg-espace-4) var(--rg-espace-3); }
.modal__foot.modal__foot--space:has(.tti__rempl) { flex-wrap: wrap; gap: var(--rg-espace-3); }
}
/* Highlights : les six types, le label, la prise en charge. */
.rbwrap { --rbk-tv: var(--rg-metier-vert-fonce); --rbk-ch: var(--rg-piste-rouge); }
:root:not([data-theme="light"]) .rbwrap { --rbk-tv: var(--rg-metier-vert-clair); }
.rbxh__b--travel { background: color-mix(in srgb, var(--rg-metier-vert-clair) 22%, var(--plein)); }
.rbxh__b--travel b { color: var(--rbk-tv); }
.rbxh__b--fp, .rbxh__b--qualif, .rbxh__b--race { background: color-mix(in srgb, var(--rbk-co) 13%, var(--plein)); }
.rbxh__b--fp b, .rbxh__b--qualif b, .rbxh__b--race b { color: var(--rbk-co); }
.rbxk--travel { background: color-mix(in srgb, var(--rg-metier-vert-clair) 22%, var(--plein)); color: var(--rbk-tv); }
.rbxk--fp, .rbxk--qualif, .rbxk--race { background: color-mix(in srgb, var(--rbk-co) 14%, var(--plein)); color: var(--rbk-co); }
/* Le tag reste discret : la cellule porte déjà la couleur de l'événement, une petite pastille suffit. */
.rbxh__tag {
--tagc: var(--text-faint);
display: inline-flex; align-items: center; gap: var(--rg-espace-1); align-self: flex-start; padding: 0; background: none;
font-style: normal; font-size: var(--rg-taille-label-s); font-weight: var(--rg-graisse-semi); letter-spacing: var(--rg-label-m-espacement); text-transform: uppercase;
color: var(--text-soft); opacity: 0.85;
}
.rbxh__tag::before { content: ""; width: 6px; height: 6px; border-radius: var(--rg-rayon-0); background: var(--tagc); flex: none; }
.rbxh__tag--champ { --tagc: var(--rbk-ch, var(--rg-piste-rouge)); }
.rbxh__tag--train { --tagc: var(--accent); }
/* Quand un tag est choisi, c'est lui qui donne la couleur de la cellule, quel que soit le type. */
.rbxh__b.rbxh__b--c-champ { background: color-mix(in srgb, var(--rbk-ch, var(--rg-piste-rouge)) 13%, var(--plein)); }
.rbxh__b.rbxh__b--c-champ b { color: var(--rbk-ch, var(--rg-piste-rouge)); }
.rbxh__b.rbxh__b--c-train { background: color-mix(in srgb, var(--accent) 13%, var(--plein)); }
.rbxh__b.rbxh__b--c-train b { color: var(--accent); }
.rbpil__f { display: flex; flex-direction: column; gap: var(--rg-espace-2); margin-bottom: var(--rg-espace-4); }
.rbpils { display: flex; flex-wrap: wrap; gap: var(--rg-espace-2); }
.rbpil {
--pc: var(--accent);
padding: var(--rg-espace-2) var(--rg-espace-4); border: var(--rg-trait-1) solid var(--border); border-radius: var(--rg-rayon-0); background: transparent;
color: var(--text-soft) !important; font-family: var(--rg-police-texte); font-size: var(--fs-3xs); font-weight: var(--rg-graisse-semi); cursor: pointer;
transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
@media (hover: hover) { .rbpil:hover { border-color: var(--border-2); color: var(--text) !important; } }
.rbpil.is-on { background: var(--pc); border-color: var(--pc); color: var(--rg-neutre-blanc) !important; }
.rbpil--travel { --pc: var(--rg-metier-vert-clair); }
.rbpil--travel.is-on { color: var(--rg-marine-5) !important; }
.rbpil--instal { --pc: var(--rg-metier-violet); }
.rbpil--fp, .rbpil--qualif, .rbpil--race { --pc: var(--rg-rose-6); }
.rbpil--essais { --pc: var(--rg-metier-orange-fonce); }
.rbpil--champ { --pc: var(--rg-piste-rouge); }
.rbpil--train { --pc: var(--accent); }
.rbpil--oui { --pc: var(--rg-metier-vert-fonce); }
.rbpil--non { --pc: var(--rg-rose-6); }
/* Hôtel : oui en vert, non en neutre. */
.rbpil[data-rbpil="rbDHotel"][data-val="oui"] { --pc: var(--rg-metier-vert-fonce); }
.rbpil[data-rbpil="rbDHotel"][data-val="non"] { --pc: var(--rg-neutre-acier); }
/* Add someone : les intitulés de catégorie, bien visibles. */
.rbq__g {
display: flex; align-items: center; gap: var(--rg-espace-3); margin: var(--rg-espace-5) 0 var(--rg-espace-3); padding-bottom: var(--rg-espace-2);
border-bottom: var(--rg-trait-3) solid var(--accent);
font-size: var(--rg-taille-texte-m); font-weight: var(--rg-graisse-extra); letter-spacing: 0; text-transform: uppercase; color: var(--text);
}
.rbq__g:first-child { margin-top: 0; }
.rbq__g span {
margin-left: auto; min-width: 24px; padding: calc(var(--rg-espace-1) / 2) var(--rg-espace-2); border-radius: var(--rg-rayon-0); text-align: center;
background: color-mix(in srgb, var(--accent) 14%, var(--plein)); color: var(--accent);
font-size: var(--rg-taille-label-m); font-weight: var(--rg-graisse-gras); letter-spacing: 0;
}
/* Travel : une seule fiche, l'itinéraire puis les véhicules. */
.rbvy__sens { display: flex; flex-direction: column; gap: var(--rg-espace-2); }
.rbvy__sens + .rbvy__sens { margin-top: var(--rg-espace-3); padding-top: var(--rg-espace-3); border-top: var(--rg-trait-1) solid var(--border); }
.rbvy__st { margin: 0; font-size: var(--rg-taille-label-m); font-weight: var(--rg-graisse-gras); letter-spacing: var(--rg-label-m-espacement); text-transform: uppercase; color: var(--text-soft); }
.rbvy__sens .rhf__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rbvy__v {
display: flex; flex-direction: column; gap: var(--rg-espace-3); padding: var(--rg-espace-4);
border: var(--rg-trait-1) solid var(--border); border-radius: var(--rg-rayon-0); background: var(--plein);
}
.rbvy__v + .rbvy__v { margin-top: var(--rg-espace-3); }
.rbvy__vh { display: flex; gap: var(--rg-espace-2); align-items: center; }
.rbvy__nom { flex: 1; font-weight: var(--rg-graisse-gras); }
.rbvy__cap { width: 86px; flex: none; }
.rbvy__x {
flex: none; width: 34px; height: 34px; border: var(--rg-trait-1) solid var(--border); border-radius: var(--rg-rayon-0);
background: transparent; color: var(--text-soft); font-size: var(--rg-taille-texte-l); line-height: var(--rg-interligne-plein); cursor: pointer;
}
@media (hover: hover) { .rbvy__x:hover { color: var(--rg-rose-6); border-color: var(--rg-rose-6); } }
.rbvy__ppl { display: flex; flex-wrap: wrap; gap: var(--rg-espace-2); }
.rbvy__p {
display: inline-flex; align-items: center; padding: var(--rg-espace-2) var(--rg-espace-3); border: var(--rg-trait-1) solid var(--border);
border-radius: var(--rg-rayon-0); font-size: var(--rg-taille-label-m); font-weight: var(--rg-graisse-semi); color: var(--text-soft); cursor: pointer; user-select: none;
}
.rbvy__p input { display: none; }
@media (hover: hover) { .rbvy__p:hover { border-color: var(--border-focus); color: var(--text); } }
.rbvy__p.is-on { background: var(--rg-texte-principal); border-color: var(--rg-texte-principal); color: var(--rg-texte-inverse); }
.rbvy__resp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rg-espace-3) var(--rg-espace-3); }
.rbvy__add {
width: 100%; margin-top: var(--rg-espace-3); padding: var(--rg-espace-4); border-radius: var(--rg-rayon-0);
border: var(--rg-trait-1) dashed var(--border-2); background: transparent;
color: var(--text-soft); font-weight: var(--rg-graisse-gras); font-size: var(--fs-sm); cursor: pointer;
}
@media (hover: hover) { .rbvy__add:hover { border-color: var(--accent); color: var(--accent); } }
.rbvy__capw { position: relative; flex: none; }
.rbvy__capw .rbvy__cap { width: 104px; padding-right: var(--rg-espace-7); }
.rbvy__capw span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: var(--rg-taille-label-s); color: var(--text-muted); pointer-events: none; }
.rbvy__grp { display: flex; flex-direction: column; gap: var(--rg-espace-2); }
.rbvy__gt { margin: 0; display: flex; align-items: center; gap: var(--rg-espace-2); font-size: var(--rg-taille-label-s); font-weight: var(--rg-graisse-gras); letter-spacing: var(--rg-label-m-espacement); text-transform: uppercase; color: var(--text-muted); }
.rbvy__occ { font-family: var(--font-mono); letter-spacing: 0; color: var(--text-soft); }
.rbvy__occ.is-plein { color: var(--accent); }
.rbvy__vide { margin: 0; font-size: var(--fs-3xs); color: var(--text-muted); }
.rbvy__p span + em { font-style: normal; font-size: var(--rg-taille-label-s); color: var(--text-muted); margin-left: var(--rg-espace-2); }
.rbvy__p em:empty { display: none; }
.rbvy__free .rbvy__p::before { content: "+"; margin-right: var(--rg-espace-1); color: var(--accent); font-weight: var(--rg-graisse-gras); }
.rbvy__autres .rbvy__p { opacity: 0.7; }
@media (hover: hover) { .rbvy__autres .rbvy__p:hover { opacity: 1; } }
.rbvy__ailleurs summary { cursor: pointer; font-size: var(--fs-3xs); font-weight: var(--rg-graisse-semi); color: var(--text-soft); }
.rbvy__ailleurs summary i { font-style: normal; font-family: var(--font-mono); color: var(--text-muted); margin-left: var(--rg-espace-1); }
.rbvy__ailleurs[open] summary { margin-bottom: var(--rg-espace-2); }
.rbvy__etapes { display: flex; flex-direction: column; gap: var(--rg-espace-2); }
.rbvy__etapes:empty { display: none; }
.rbvy__etape {
display: flex; flex-direction: column; gap: var(--rg-espace-2);
padding: var(--rg-espace-3) var(--rg-espace-3); border-radius: var(--r-md, var(--rg-rayon-0));
border: var(--rg-trait-1) solid var(--border); border-left: var(--rg-trait-4) solid var(--accent);
}
.rbvy__eth { display: flex; align-items: center; justify-content: space-between; }
.rbvy__eth b { font-size: var(--rg-taille-label-s); font-weight: var(--rg-graisse-gras); letter-spacing: var(--rg-label-m-espacement); text-transform: uppercase; color: var(--accent); }
.rbvy__etape .rhf__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rbvy__etadd {
align-self: flex-start; padding: var(--rg-espace-2) var(--rg-espace-3); border-radius: var(--rg-rayon-0);
border: var(--rg-trait-1) dashed var(--border-2); background: transparent;
color: var(--text-soft); font-size: var(--fs-3xs); font-weight: var(--rg-graisse-semi); cursor: pointer;
}
@media (hover: hover) { .rbvy__etadd:hover { border-color: var(--accent); color: var(--accent); } }
@media (max-width: 600px) {
.rbvy__sens .rhf__form, .rbvy__etape .rhf__form, .rbvy__resp { grid-template-columns: 1fr; }
}
/* Hôtel : la photo en couverture, collée au bandeau. */
.rbxo__photo {
display: block; width: 100%; height: 220px; padding: 0; border: 0; border-radius: var(--rg-rayon-0) var(--rg-rayon-0) var(--rg-rayon-0) var(--rg-rayon-0);
overflow: hidden; cursor: pointer; background: var(--rbk-ink);
}
.rbxo__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rbxo__photo + .rbxo__ban { margin-top: calc(var(--rg-espace-4) * -1); border-top-left-radius: var(--rg-rayon-0); border-top-right-radius: var(--rg-rayon-0); }
@media (max-width: 600px) { .rbxo__photo { height: 160px; } }
/* La photo dans la fiche hôtel. */
.rbhp {
position: relative; display: flex; align-items: center; justify-content: center; gap: var(--rg-espace-3);
min-height: 120px; border: var(--rg-trait-1) dashed var(--border-focus); border-radius: var(--rg-rayon-0); overflow: hidden;
}
.rbhp img { display: none; }
.rbhp.is-on { min-height: 200px; border-style: solid; border-color: var(--border); }
.rbhp.is-on img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rbhp__add, .rbhp__x {
position: relative; z-index: 1; padding: var(--rg-espace-2) var(--rg-espace-4); border-radius: var(--rg-rayon-0); border: var(--rg-trait-1) solid var(--border);
background: var(--plein); color: var(--text); font-size: var(--rg-taille-texte-s); font-weight: var(--rg-graisse-semi); cursor: pointer;
}
.rbhp.is-on .rbhp__add, .rbhp.is-on .rbhp__x { align-self: flex-end; margin-bottom: var(--rg-espace-3); box-shadow: none; }
@media (hover: hover) { .rbhp__x:hover { color: var(--rg-rose-6); border-color: var(--rg-rose-6); } }
/* Staff on site : les pilotes sur toute la largeur, puis les postes en colonnes qui se remplissent sans trous. */
.rbxs { display: block; }
.rbxs__c--dr { margin-bottom: var(--rg-espace-3); }
.rbxs__m { column-count: 4; column-gap: var(--rg-espace-3); }
.rbxs__m > .rbxs__c { break-inside: avoid; margin-bottom: var(--rg-espace-3); width: 100%; }
@media (min-width: 721px) and (max-width: 1100px) { .rbxs__m { column-count: 3; } }
@media (max-width: 720px) {
.rbxs__c--dr { margin-bottom: var(--rg-espace-3); }
.rbxs__m { column-count: 2; column-gap: var(--rg-espace-3); }
.rbxs__m > .rbxs__c { margin-bottom: var(--rg-espace-3); }
}
/* Crew, une colonne par voiture : les colonnes se partagent toute la largeur et ont la même hauteur,
quel que soit le nombre de pilotes (on en retire un, la grille se recale). */
.vt__cars { align-items: stretch; }
@media (min-width: 1101px) {
.vt__cars:not(.is-peu):not(.vt__cars--bureau) { grid-template-columns: repeat(var(--m), minmax(150px, 1fr)); }
}
@media (min-width: 721px) and (max-width: 1100px) {
.vt__cars:not(.vt__cars--bureau) { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
}
@media (min-width: 721px) {
.vt__cars.is-peu:not(.has-tous) { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
}
/* Crew : plusieurs rôles, le principal est marqué. */
.role-option { position: relative; }
.role-option__main {
position: absolute; top: 6px; right: 6px; padding: var(--rg-trait-1) var(--rg-espace-2); border-radius: var(--rg-rayon-0);
background: var(--accent); color: var(--rg-neutre-blanc); font-style: normal; font-size: var(--rg-taille-label-s); font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-m-espacement); text-transform: uppercase;
}
/* Travel : plusieurs responsables par véhicule. */
.rbvy__resp { grid-template-columns: 1fr; }
.rbvy__ms { display: flex; flex-wrap: wrap; gap: var(--rg-espace-2); }
.rbvy__m {
display: inline-flex; align-items: center; padding: var(--rg-espace-1) var(--rg-espace-3); border: var(--rg-trait-1) solid var(--border);
border-radius: var(--rg-rayon-0); font-size: var(--rg-taille-label-m); font-weight: var(--rg-graisse-semi); color: var(--text-soft); cursor: pointer; user-select: none;
}
.rbvy__m input { display: none; }
@media (hover: hover) { .rbvy__m:hover { color: var(--text); border-color: var(--border-focus); } }
.rbvy__m.is-on { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: var(--accent); color: var(--text); }
.rbvy__mvide { font-size: var(--rg-taille-label-m); color: var(--text-faint); }
.rbvy__liste:empty { display: none; }
/* Chambre : Team ou Drivers. */
.rbpil--dr { --pc: var(--rg-piste-rouge); }
/* Catering : passer quelqu'un de Team à Drivers, ou l'inverse. */
.rbxc__nmw { display: flex; align-items: center; min-width: 0; padding-right: var(--rg-espace-2); }
.rbxc__nmw .rbxc__nm { flex: 1; min-width: 0; padding-right: var(--rg-espace-2); }
.rbxc__sw {
flex: none; padding: calc(var(--rg-espace-1) / 2) var(--rg-espace-2); border: var(--rg-trait-1) solid var(--rbk-trait); border-radius: var(--rg-rayon-0); background: transparent;
font-size: var(--rg-taille-label-s); font-weight: var(--rg-graisse-gras); color: var(--text-faint) !important; cursor: pointer; opacity: 0;
transition: opacity var(--t-fast, var(--rg-duree)) ease;
}
.rbxc__sw:focus-visible { opacity: 1; }
@media (hover: hover) { .rbxc__r:hover .rbxc__sw { opacity: 1; } }
@media (hover: hover) { .rbxc__sw:hover { color: var(--text) !important; border-color: var(--text-muted); } }
@media (hover: none) { .rbxc__sw { opacity: 1; } }
/* Catering : la ligne « Whole team / All drivers » qui coche tout le groupe d'un clic. */
.rbxc__r--all { background-color: color-mix(in srgb, var(--accent) 6%, transparent); }
.rbxc__r--all .rbxc__nm { font-weight: var(--rg-graisse-extra); text-transform: uppercase; font-size: var(--rg-taille-label-s); letter-spacing: var(--rg-label-m-espacement); cursor: default; }
.rbxc__k--all { width: 28px; height: 22px; box-shadow: none; }
.rbxc__k--all.is-mi { background: color-mix(in srgb, var(--rbk-gn) 45%, transparent); }
.rbxc__k--all.is-mi svg { opacity: 0.6; }
.rbca__libre { display: flex; gap: var(--rg-espace-2); }
.rbca__libre .form-input { flex: 1; min-width: 0; }
/* Accès : les fiches en doublon. */
.dup { display: flex; flex-direction: column; gap: var(--rg-espace-3); padding: var(--rg-espace-4); border: var(--rg-trait-1) solid var(--border); border-radius: var(--rg-rayon-0); }
.dup + .dup { margin-top: var(--rg-espace-3); }
.dup__why { margin: 0; font-size: var(--rg-taille-label-s); font-weight: var(--rg-graisse-gras); letter-spacing: var(--rg-label-m-espacement); text-transform: uppercase; color: var(--accent); }
.dup__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--rg-espace-2); }
.dup__card {
position: relative; display: flex; flex-direction: column; gap: var(--rg-espace-2); padding: var(--rg-espace-3); border: var(--rg-trait-2) solid var(--border);
border-radius: var(--rg-rayon-0); cursor: pointer; min-width: 0;
}
.dup__card input { position: absolute; opacity: 0; pointer-events: none; }
.dup__card.is-on { border-color: var(--accent); background: var(--accent-soft); }
.dup__keep { align-self: flex-start; font-size: var(--rg-taille-label-s); font-weight: var(--rg-graisse-gras); letter-spacing: var(--rg-label-m-espacement); text-transform: uppercase; color: var(--text-faint); }
.dup__card.is-on .dup__keep { color: var(--accent); }
.dup__nom { font-size: var(--rg-taille-texte-m); }
.dup__card dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(var(--rg-espace-1) / 2) var(--rg-espace-3); margin: 0; font-size: var(--rg-taille-label-m); }
.dup__card dt { color: var(--text-faint); }
.dup__card dd { margin: 0; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dup__actions { display: flex; justify-content: flex-end; gap: var(--rg-espace-2); flex-wrap: wrap; }
/* Fiche d'une personne : le reste est en construction. */
.fdp__wip {
display: flex; flex-direction: column; gap: var(--rg-espace-1); margin-top: var(--rg-espace-4); padding: var(--rg-espace-4); text-align: center;
border: var(--rg-trait-2) dashed var(--border-focus); border-radius: var(--rg-rayon-0); color: var(--text-soft);
}
.fdp__wip b { font-size: var(--rg-taille-texte-m); color: var(--text); }
.fdp__wip span { font-size: var(--rg-taille-texte-s); }
/* Consultation seule : rien qui modifie n'est proposé. */
body.is-lecture .btn-primary,
body.is-lecture .btn-danger,
body.is-lecture .rbx__h .btn-secondary,
body.is-lecture .rb-bloc__h .btn-secondary,
body.is-lecture .rbxc__sw,
body.is-lecture .rbxo__add,
body.is-lecture .rbxt__vide,
body.is-lecture .rbxf__drop,
body.is-lecture .rbxf__bar,
body.is-lecture .rbxv__edit,
body.is-lecture .ttop__b,
body.is-lecture .vt__add,
body.is-lecture [data-vt-add] { display: none !important; }
.lecture-toast {
position: fixed; left: 50%; bottom: 28px; z-index: 9999; transform: translate(-50%, 20px); opacity: 0;
padding: var(--rg-espace-3) var(--rg-espace-4); border-radius: var(--rg-rayon-0); background: var(--rg-marine-5); color: var(--rg-neutre-blanc); font-size: var(--rg-taille-texte-s); font-weight: var(--rg-graisse-semi);
box-shadow: none; pointer-events: none; transition: opacity calc(var(--rg-duree) * 1.5) ease, transform calc(var(--rg-duree) * 1.5) ease;
}
.lecture-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
/* Page de connexion : demander l'accès. */
.login-request { margin: var(--rg-espace-4) 0 0; text-align: center; font-size: var(--rg-taille-texte-s); color: var(--text-soft); }
#requestForm select.field__input { appearance: auto; }
/* Accès : demandes externes. */
.ext__dates { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--rg-espace-3); margin-top: var(--rg-espace-2); }
.ext__dates label { display: flex; flex-direction: column; gap: var(--rg-espace-1); font-size: var(--rg-taille-label-s); color: var(--text-faint); }
.ext__dates .form-input { padding: var(--rg-espace-2) var(--rg-espace-2); font-size: var(--rg-taille-texte-s); }
.ext__dates .ext__sans { flex-direction: row; align-items: center; gap: var(--rg-espace-2); font-size: var(--rg-taille-label-m); color: var(--text-soft); padding-bottom: var(--rg-espace-2); }
/* Accès : deux familles bien distinctes, l'équipe et les extérieurs. */
.access-group { margin-top: var(--rg-espace-4); padding: var(--rg-espace-4) var(--rg-espace-4) var(--rg-espace-1); border-radius: var(--rg-rayon-0); border: var(--rg-trait-1) solid var(--border); }
.access-group--team { background: color-mix(in srgb, var(--rg-marine-1) 6%, transparent); border-color: color-mix(in srgb, var(--rg-marine-1) 35%, transparent); }
.access-group--ext { background: color-mix(in srgb, var(--rg-piste-orange) 7%, transparent); border-color: color-mix(in srgb, var(--rg-piste-orange) 40%, transparent); }
.access-group__k {
display: flex; align-items: baseline; gap: var(--rg-espace-2); margin: 0 0 var(--rg-espace-1);
font-size: var(--rg-taille-label-m); font-weight: var(--rg-graisse-extra); letter-spacing: var(--rg-label-m-espacement); text-transform: uppercase;
}
.access-group--team .access-group__k { color: var(--rg-marine-1); }
.access-group--ext .access-group__k { color: var(--rg-piste-orange); }
.access-group__k span { font-weight: var(--rg-graisse-semi); letter-spacing: 0; text-transform: none; color: var(--text-faint); }
.access-group .access-section:first-of-type { margin-top: 0; }
/* Les accès en consultation accordés. */
.lect__etat {
display: inline-block; margin-left: var(--rg-espace-2); padding: var(--rg-trait-1) var(--rg-espace-2); border-radius: var(--rg-rayon-0); vertical-align: middle;
font-size: var(--rg-taille-label-s); font-weight: var(--rg-graisse-gras); background: color-mix(in srgb, var(--rg-metier-vert-fonce) 16%, transparent); color: var(--rg-metier-vert-fonce);
}
.access-row--lect.is-court .lect__etat { background: color-mix(in srgb, var(--rg-piste-orange) 18%, transparent); color: var(--rg-metier-orange-fonce); }
.access-row--lect.is-bientot .lect__etat { background: color-mix(in srgb, var(--rg-marine-1) 16%, transparent); color: var(--rg-marine-1); }
.access-row--lect.is-fini .lect__etat { background: color-mix(in srgb, var(--rg-neutre-acier) 18%, transparent); color: var(--text-faint); }
.access-row--lect.is-fini .access-row__title { color: var(--text-soft); }
/* Première connexion : le code entreprise à 6 chiffres */
.field__input--code:not(:placeholder-shown) {
font-family: var(--font-mono);
font-size: var(--rg-taille-h3);
font-weight: var(--rg-graisse-semi);
letter-spacing: var(--rg-label-m-espacement);
}
/* Boutons pleins propres à un écran : coin coupé de la charte */
.crewbar__add, .widget__action--cta, .dash-add__btn, .rbxf__bar button:first-child {
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--rg-btn-s-coin) / var(--rg-pente)), calc(100% - var(--rg-btn-s-coin)) 100%, 0 100%);
}
/* ==========================================================
4. TABLEAU DE BORD
Composition du gabarit « En situation, bureau » de la charte :
bandeau marine coupé à 30°, panneaux plats, lignes denses,
chiffres en JetBrains Mono, rose réservé au direct et à l'action.
========================================================== */
body[data-page="dashboard"] {
--dash-largeur: calc(1320px - 2 * var(--gap-lg));
--dbh-hauteur: calc(var(--rg-entete-hauteur) + var(--rg-espace-6));
--dbh-haut: var(--rg-espace-7);
--dbh-coupe: calc((var(--dbh-hauteur) - var(--dbh-haut)) * var(--rg-pente));
}
body[data-page="dashboard"] .app-bg { display: none; }
body[data-page="dashboard"] .page-body { max-width: none; }
/* Barre du haut fondue dans le bandeau */
@media (min-width: 721px) {
body[data-page="dashboard"] .main-col { position: relative; }
body[data-page="dashboard"] .topbar {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 5;
border-bottom: 0;
background: none;
pointer-events: none;
}
body[data-page="dashboard"] .topbar__tools { pointer-events: auto; }
body[data-page="dashboard"] .topbar__title { visibility: hidden; }
}
/* Bandeau */
.dbh {
position: relative;
isolation: isolate;
display: grid;
grid-template-columns: minmax(min-content, 1fr) minmax(var(--rg-chiffre-largeur), var(--rg-compte-largeur));
align-items: end;
gap: var(--rg-espace-7);
height: var(--dbh-hauteur);
margin: calc(var(--gap-lg) * -1) calc(var(--gap-lg) * -1) var(--rg-espace-6);
padding: 0 max(calc(var(--dbh-coupe) + var(--rg-espace-5)), calc((100% - var(--dash-largeur)) / 2 + var(--gap-lg)))
var(--rg-espace-6) max(var(--gap-lg), calc((100% - var(--dash-largeur)) / 2 + var(--gap-lg)));
color: var(--rg-neutre-blanc);
}
.dbh::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--rg-fond-structure);
clip-path: polygon(0 0, 100% 0, 100% var(--dbh-haut), calc(100% - var(--dbh-coupe)) 100%, 0 100%);
}
.dbh::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--rg-accent-defaut);
clip-path: polygon(calc(100% - var(--dbh-coupe) * 0.58) 100%, 100% calc(100% - var(--dbh-coupe) * 0.58 / var(--rg-pente)),
100% calc(100% - var(--dbh-coupe) * 0.43 / var(--rg-pente)), calc(100% - var(--dbh-coupe) * 0.43) 100%);
}
.dbh__texte { min-width: 0; }
.dbh__surtitre {
margin: 0 0 var(--rg-espace-2);
font: var(--rg-label-m);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--rg-neutre-gris);
}
.dbh__titre {
margin: 0;
font: var(--rg-display-m);
letter-spacing: var(--rg-display-m-espacement);
color: var(--rg-neutre-blanc);
white-space: nowrap;
padding-right: var(--rg-espace-2);
}
.dbh__trajectoire { margin-top: var(--rg-espace-2); color: var(--rg-accent-defaut); }
/* La course */
.dbh__course {
--rg-jauge-vide: var(--rg-marine-4);
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--rg-espace-1);
padding-left: var(--rg-espace-6);
border-left: var(--rg-trait-1) solid var(--rg-marine-4);
color: var(--rg-neutre-blanc);
text-decoration: none;
}
.dbh__label {
font: var(--rg-label-m);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--rg-neutre-gris);
}
.dbh__nom {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font: var(--rg-titre-h2);
color: var(--rg-neutre-blanc);
transition: color var(--rg-duree);
}
@media (hover: hover) { .dbh__course:hover .dbh__nom { color: var(--rg-accent-defaut); } }
.dbh__infos {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font: var(--rg-label-m);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--rg-neutre-gris);
}
.dbh__compte { display: flex; align-items: center; gap: var(--rg-espace-3); margin-top: var(--rg-espace-3); }
.dbh__chiffre { display: inline-flex; align-items: baseline; gap: var(--rg-espace-1); font: var(--rg-chiffre-s); color: var(--rg-neutre-gris); text-transform: uppercase; }
.dbh__chiffre b { font: var(--rg-chiffre-m); color: var(--rg-neutre-blanc); }
.dbh__jauge { width: 100%; height: calc(var(--rg-jauge-hauteur) * 0.72); margin-top: var(--rg-espace-2); }
/* Bandeau Inside : la carte existante, sans image */
.dbh__course--inside .hero__featured-cover,
.dbh__course--inside .hero__featured-overlay { display: none; }
.dbh__course--inside .hero__featured-content { position: static; padding: 0; gap: var(--rg-espace-1); }
/* Barre des widgets */
.dbh-barre,
#dashboardPage > .grid,
#dashboardPage > .empty-state { max-width: var(--dash-largeur); margin-inline: auto; }
.dbh-barre {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--rg-espace-3);
}
.dbh-barre__titre {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
margin: 0;
font: var(--rg-label-m);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--rg-texte-secondaire);
}
.dbh-barre__titre::before {
--h: var(--rg-espace-4);
content: "";
width: calc(var(--h) * var(--rg-pente) + var(--rg-trait-3));
height: var(--h);
background: var(--rg-accent-defaut);
clip-path: polygon(calc(100% - var(--rg-trait-3)) 0, 100% 0, var(--rg-trait-3) 100%, 0 100%);
}
.dbh-barre__titre b { color: var(--rg-texte-principal); }
.dbh-barre__info { flex: 1; min-width: 0; margin: 0 0 0 var(--rg-espace-4); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: var(--rg-texte-s); color: var(--rg-texte-secondaire); }
/* Panneaux */
#dashboardPage .grid { gap: var(--rg-espace-5); }
#dashboardPage .widget {
display: flex;
flex-direction: column;
gap: 0;
padding: 0;
border: 0;
border-radius: var(--rg-rayon-0);
background: var(--rg-fond-surface);
box-shadow: none;
}
@media (hover: hover) { #dashboardPage .widget:hover { border: 0; transform: none; box-shadow: none; } }
#dashboardPage .widget__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--rg-espace-3);
min-height: calc(var(--rg-espace-7) + var(--rg-espace-2));
margin: 0;
padding: 0 var(--rg-espace-5);
border-bottom: var(--rg-trait-1) solid var(--rg-bord-defaut);
}
#dashboardPage .widget__head-left { display: flex; align-items: center; gap: var(--rg-espace-3); min-width: 0; }
#dashboardPage .widget__head-left > div { display: flex; align-items: baseline; gap: var(--rg-espace-2); min-width: 0; }
#dashboardPage .widget__icon {
flex: none;
width: var(--rg-icone-20);
height: var(--rg-icone-20);
padding: 0;
border-radius: var(--rg-rayon-0);
background: none;
color: var(--rg-accent-defaut);
}
#dashboardPage .widget__icon svg { width: 100%; height: 100%; }
#dashboardPage .widget__title {
margin: 0;
font: var(--rg-label-m);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
white-space: nowrap;
color: var(--rg-texte-principal);
}
#dashboardPage .widget__subtitle {
margin: 0;
overflow: hidden;
font: var(--rg-label-s);
letter-spacing: var(--rg-label-s-espacement);
text-transform: uppercase;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--rg-texte-secondaire);
}
#dashboardPage .widget__subtitle:not(:empty)::before { content: "· "; }
#dashboardPage .widget__action {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-1);
height: var(--rg-btn-s-hauteur);
padding: 0;
border: 0;
border-radius: var(--rg-rayon-0);
background: none;
font: var(--rg-texte-s-fort);
color: var(--rg-texte-secondaire);
white-space: nowrap;
transition: color var(--rg-duree);
}
@media (hover: hover) { #dashboardPage .widget__action:hover { background: none; color: var(--rg-accent-defaut); } }
#dashboardPage .widget__action svg { width: var(--rg-icone-16); height: var(--rg-icone-16); }
#dashboardPage .widget__body { flex: 1; display: flex; flex-direction: column; padding: var(--rg-espace-5); }
#dashboardPage .widget__body:has(> .dwl, > .dwt) { padding: 0; }
/* Lignes : personnes, lieux */
#dashboardPage .dwl { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.dwl__ligne {
display: flex;
align-items: center;
gap: var(--rg-espace-3);
min-height: var(--rg-evenement-hauteur);
padding: 0 var(--rg-espace-5);
border-bottom: var(--rg-trait-1) solid var(--rg-bord-defaut);
}
.dwl__ligne .rg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dwl__texte { flex: 1; min-width: 0; }
.dwl__nom, .dwl__sec { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dwl__nom { font: var(--rg-texte-m-fort); color: var(--rg-texte-principal); }
.dwl__sec { font: var(--rg-label-s); letter-spacing: var(--rg-label-s-espacement); text-transform: uppercase; color: var(--rg-texte-secondaire); }
.dwl__code {
flex: none;
display: grid;
place-items: center;
width: var(--rg-avatar-m);
height: var(--rg-avatar-m);
background: var(--rg-fond-surface-2);
font: var(--rg-label-m);
letter-spacing: var(--rg-label-m-espacement);
color: var(--rg-texte-principal);
}
.dwl__date { font: var(--rg-chiffre-s); color: var(--rg-texte-secondaire); text-transform: uppercase; }
/* Lignes d'événement */
#dashboardPage .dwt__ev { width: 100%; gap: var(--rg-espace-4); padding: 0 var(--rg-espace-5); }
#dashboardPage .dwt__ev .rg-evenement__titre { display: flex; align-items: center; gap: var(--rg-espace-2); min-width: 0; }
.dwt__nom { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dwt__cat {
--h: var(--rg-espace-4);
flex: none;
width: calc(var(--h) * var(--rg-pente) + var(--rg-trait-repere));
height: var(--h);
background: var(--dwt-c, var(--rg-bord-defaut));
clip-path: polygon(calc(100% - var(--rg-trait-repere)) 0, 100% 0, var(--rg-trait-repere) 100%, 0 100%);
}
.dwt__ev.is-passe .dwt__cat { opacity: 0.35; }
.dwt__retard { font: var(--rg-chiffre-s); font-style: normal; color: var(--rg-etat-attention); }
.dwt__jobs {
overflow: hidden;
font: var(--rg-label-s);
letter-spacing: var(--rg-label-s-espacement);
text-transform: uppercase;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--rg-texte-secondaire);
}
.dwt__plus {
display: block;
padding: var(--rg-espace-3) var(--rg-espace-5);
font: var(--rg-label-m);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
text-decoration: none;
color: var(--rg-texte-secondaire);
transition: color var(--rg-duree);
}
@media (hover: hover) { .dwt__plus:hover { color: var(--rg-accent-defaut); } }
/* État vide */
#dashboardPage .dash-vide { flex: 1; justify-content: center; width: 100%; padding: var(--rg-espace-6) 0; background: none; }
#dashboardPage .jl-neuve--vide { align-self: center; }
/* Condensé (format compact) : la carte chiffre de la charte */
#dashboardPage .dash-digest { display: flex; flex-direction: column; gap: var(--rg-espace-1); padding: 0; text-align: left; }
#dashboardPage .dash-digest__n { font: var(--rg-display-m); letter-spacing: var(--rg-display-m-espacement); color: var(--rg-texte-principal); }
#dashboardPage .dash-digest__l { font: var(--rg-label-m); letter-spacing: var(--rg-label-m-espacement); text-transform: uppercase; color: var(--rg-texte-secondaire); }
#dashboardPage .dash-digest__f { font: var(--rg-titre-h3); color: var(--rg-texte-principal); }
#dashboardPage .dash-digest__d { font: var(--rg-texte-s); color: var(--rg-texte-secondaire); }
#dashPanel .dashmap__i { background: none; color: var(--rg-accent-defaut); }
/* Icônes sans équivalent dans la charte : même trait, mêmes angles */
svg[viewBox="0 0 24 24"]:not([data-icone]) :is(path, line, polyline, polygon, rect, circle, ellipse) {
stroke-width: var(--rg-icone-trait);
stroke-linecap: butt;
stroke-linejoin: miter;
}
svg[viewBox="0 0 24 24"]:not([data-icone]) rect { rx: 0; ry: 0; }
/* ==========================================================
5. PANNEAU PROFIL
Même grammaire que le tableau de bord : en-tête marine coupé,
onglets de la charte, blocs numérotés, cases et segments.
========================================================== */
#profilePanel { background: var(--rg-fond-page); border-left: 0; }
/* En-tête */
#profilePanel .profile-panel__head {
--pp-coupe: var(--rg-espace-7);
position: relative;
isolation: isolate;
align-items: flex-start;
padding: var(--rg-espace-5) var(--rg-espace-5) var(--rg-espace-7) var(--rg-espace-6);
border-bottom: 0;
background: none;
}
#profilePanel .profile-panel__head::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--rg-fond-structure);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--pp-coupe)), calc(100% - var(--pp-coupe) * var(--rg-pente)) 100%, 0 100%);
}
#profilePanel .profile-panel__head::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--rg-accent-defaut);
clip-path: polygon(calc(100% - var(--pp-coupe) * var(--rg-pente) * 0.58) 100%, 100% calc(100% - var(--pp-coupe) * 0.58),
100% calc(100% - var(--pp-coupe) * 0.43), calc(100% - var(--pp-coupe) * var(--rg-pente) * 0.43) 100%);
}
#profilePanel .profile-panel__identity { align-items: flex-end; gap: var(--rg-espace-4); }
#profilePanel .profile-panel__photo {
position: relative;
width: var(--rg-avatar-l);
height: var(--rg-avatar-l);
border-radius: var(--rg-rayon-0);
background: var(--rg-marine-4);
font: var(--rg-titre-h3);
color: var(--rg-neutre-blanc);
}
#profilePanel .profile-panel__photo::after,
#profilePanel .su-photo::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
width: calc(var(--rg-avatar-l) * 0.28);
height: calc(var(--rg-avatar-l) * 0.28);
background: var(--rg-accent-defaut);
clip-path: polygon(100% 0, 100% 100%, 42% 100%);
}
.profile-panel__surtitre {
margin: 0 0 var(--rg-espace-1);
font: var(--rg-label-m);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--rg-accent-defaut);
}
#profilePanel .profile-panel__name { margin: 0; font: var(--rg-titre-h2); color: var(--rg-neutre-blanc); }
#profilePanel .profile-panel__role {
margin: var(--rg-espace-1) 0 0;
font: var(--rg-label-s);
letter-spacing: var(--rg-label-s-espacement);
text-transform: uppercase;
color: var(--rg-neutre-gris);
}
#profilePanel .profile-panel__head .modal__close { color: var(--rg-neutre-gris); }
@media (hover: hover) { #profilePanel .profile-panel__head .modal__close:hover { color: var(--rg-neutre-blanc); } }
/* Onglets de la charte */
#profilePanel .profile-tabs {
gap: var(--rg-espace-6);
padding: 0 var(--rg-espace-6);
border-bottom: var(--rg-trait-1) solid var(--rg-bord-defaut);
}
#profilePanel .profile-tab {
height: var(--rg-onglet-hauteur);
padding: 0 var(--rg-espace-1);
border: 0;
font: var(--rg-texte-m-fort);
color: var(--rg-texte-secondaire);
}
#profilePanel .profile-tab.is-active { color: var(--rg-texte-principal); }
@media (hover: hover) { #profilePanel .profile-tab:hover { color: var(--rg-texte-principal); } }
#profilePanel .profile-tab.is-active::after {
--h: var(--rg-onglet-indicateur);
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: var(--h);
background: var(--rg-accent-defaut);
clip-path: polygon(calc(var(--h) * var(--rg-pente)) 0, 100% 0, calc(100% - var(--h) * var(--rg-pente)) 100%, 0 100%);
}
#profilePanel .profile-tab__badge {
--h: var(--rg-badge-hauteur);
position: relative;
isolation: isolate;
min-width: calc(var(--h) * var(--rg-pente) + var(--rg-badge-chiffre));
height: var(--h);
padding: 0 calc(var(--h) * var(--rg-pente) / 2 + var(--rg-espace-1));
border-radius: var(--rg-rayon-0);
background: none;
font: var(--rg-label-m);
color: var(--rg-neutre-blanc);
}
#profilePanel .profile-tab__badge::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--rg-accent-defaut);
clip-path: polygon(calc(var(--h) * var(--rg-pente)) 0, 100% 0, calc(100% - var(--h) * var(--rg-pente)) 100%, 0 100%);
}
/* Corps : blocs numérotés */
#profilePanel .profile-panel__body { padding: var(--rg-espace-6) var(--rg-espace-6) var(--rg-espace-7); }
#profilePanel .profile-form { counter-reset: pf; }
#profilePanel .form-section {
counter-increment: pf;
margin: 0 0 var(--rg-espace-5);
gap: var(--rg-espace-4);
padding: 0 0 var(--rg-espace-5);
border-top: 0;
border-bottom: var(--rg-trait-1) solid var(--rg-bord-defaut);
}
#profilePanel .form-section__title {
display: flex;
align-items: center;
gap: var(--rg-espace-3);
margin: 0;
font: var(--rg-label-m);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--rg-texte-principal);
}
#profilePanel .form-section__title::before { content: counter(pf, decimal-leading-zero); font: var(--rg-chiffre-s); letter-spacing: 0; color: var(--rg-accent-defaut); }
#profilePanel .form-label { font: var(--rg-label-s); letter-spacing: var(--rg-label-s-espacement); text-transform: uppercase; color: var(--rg-texte-secondaire); }
/* Photo */
#profilePanel .su-photo-row { gap: var(--rg-espace-4); }
#profilePanel .su-photo {
position: relative;
width: var(--rg-avatar-l);
height: var(--rg-avatar-l);
border: 0;
background: var(--rg-fond-marine);
font: var(--rg-titre-h3);
color: var(--rg-neutre-blanc);
cursor: pointer;
transition: opacity var(--rg-duree);
}
@media (hover: hover) { #profilePanel .su-photo:hover { border: 0; background: var(--rg-fond-marine); opacity: 0.85; } }
#profilePanel .su-photo-row__title { font: var(--rg-texte-m-fort); color: var(--rg-texte-principal); }
#profilePanel .su-photo-row__hint { font: var(--rg-texte-s); color: var(--rg-texte-secondaire); }
/* Espaces : cases de la charte */
#profilePanel .space-toggle { gap: var(--rg-espace-2); }
#profilePanel .space-toggle__option {
--s: var(--rg-case-taille);
position: relative;
gap: 0;
padding: var(--rg-espace-3) var(--rg-espace-4) var(--rg-espace-3) calc(var(--rg-espace-4) + var(--s) + var(--rg-espace-3));
border: var(--rg-trait-1) solid var(--rg-bord-defaut);
border-radius: var(--rg-rayon-0);
background: var(--rg-fond-surface);
transition: border-color var(--rg-duree);
}
#profilePanel .space-toggle__option::before {
content: "";
position: absolute;
left: var(--rg-espace-4);
top: calc(50% - var(--s) / 2);
width: var(--s);
height: var(--s);
box-sizing: border-box;
border: var(--rg-trait-2) solid var(--rg-bord-fort);
background: var(--rg-fond-surface);
}
@media (hover: hover) { #profilePanel .space-toggle__option:hover { border-color: var(--rg-bord-fort); background: var(--rg-fond-surface); } }
#profilePanel .space-toggle__option.is-selected { border-color: var(--rg-texte-principal); background: var(--rg-fond-surface); }
@media (hover: hover) { #profilePanel .space-toggle__option.is-selected:hover { border-color: var(--rg-texte-principal); background: var(--rg-fond-surface); } }
#profilePanel .space-toggle__option.is-selected::before { border-color: var(--rg-texte-principal); background: var(--rg-texte-principal); }
#profilePanel .space-toggle__option.is-selected::after {
content: "";
position: absolute;
left: calc(var(--rg-espace-4) + var(--s) * var(--rg-coche-x));
top: calc(50% - var(--s) / 2 + var(--s) * var(--rg-coche-y));
width: calc(var(--s) * var(--rg-coche-largeur));
height: calc(var(--s) * var(--rg-coche-hauteur));
border: solid var(--rg-texte-inverse);
border-width: 0 var(--rg-trait-3) var(--rg-trait-3) 0;
transform: rotate(var(--rg-coche-angle));
}
#profilePanel .space-toggle__label { font: var(--rg-texte-s-fort); color: var(--rg-texte-principal); }
#profilePanel .space-toggle__tagline { font: var(--rg-label-s); letter-spacing: var(--rg-label-s-espacement); text-transform: uppercase; color: var(--rg-texte-secondaire); }
/* Catégories : segments de la charte */
#profilePanel .discipline-chips { gap: var(--rg-espace-1); }
#profilePanel .discipline-chip {
height: var(--rg-segment-hauteur);
padding: 0 var(--rg-espace-4);
border: var(--rg-trait-1) solid var(--rg-bord-defaut);
border-radius: var(--rg-rayon-0);
background: var(--rg-fond-surface);
font: var(--rg-texte-s-fort);
color: var(--rg-texte-secondaire);
}
@media (hover: hover) { #profilePanel .discipline-chip:hover { border-color: var(--rg-bord-fort); background: var(--rg-fond-surface); color: var(--rg-texte-principal); } }
#profilePanel .discipline-chip.is-selected { border-color: var(--rg-texte-principal); background: var(--rg-texte-principal); color: var(--rg-texte-inverse); }
@media (hover: hover) { #profilePanel .discipline-chip.is-selected:hover { border-color: var(--rg-texte-principal); background: var(--rg-texte-principal); color: var(--rg-texte-inverse); } }
/* Pied */
#profilePanel .profile-form__saved { font: var(--rg-label-m); letter-spacing: var(--rg-label-m-espacement); text-transform: uppercase; color: var(--rg-etat-succes); }
#profilePanel .profile-panel__foot { padding: var(--rg-espace-3) var(--rg-espace-6); border-top: var(--rg-trait-1) solid var(--rg-bord-defaut); }
#profilePanel .profile-signout { padding: var(--rg-espace-2) 0; border-radius: var(--rg-rayon-0); font: var(--rg-texte-s-fort); color: var(--rg-texte-secondaire); }
@media (hover: hover) { #profilePanel .profile-signout:hover { background: none; color: var(--rg-accent-defaut); } }
#profilePanel .profile-signout svg { width: var(--rg-icone-20); height: var(--rg-icone-20); }
/* Accès : chiffres */
#profilePanel .profile-intro { margin: 0 0 var(--rg-espace-5); font: var(--rg-texte-s); color: var(--rg-texte-secondaire); }
#profilePanel .access-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rg-espace-2); margin-bottom: var(--rg-espace-6); }
#profilePanel .access-stat {
flex-direction: column;
align-items: flex-start;
gap: var(--rg-espace-1);
padding: var(--rg-espace-4);
border: 0;
border-left: var(--rg-trait-repere) solid var(--rg-bord-defaut);
border-radius: var(--rg-rayon-0);
background: var(--rg-fond-surface);
}
#profilePanel .access-stat--hot { border-left-color: var(--rg-accent-defaut); background: var(--rg-fond-surface); }
#profilePanel .access-stat__label { order: -1; font: var(--rg-label-s); letter-spacing: var(--rg-label-s-espacement); text-transform: uppercase; color: var(--rg-texte-secondaire); }
#profilePanel .access-stat__value { font: var(--rg-titre-h1); color: var(--rg-texte-principal); }
#profilePanel .access-stat--hot .access-stat__value { color: var(--rg-accent-defaut); }
/* Accès : groupes et sections */
#profilePanel .access-group { margin-top: var(--rg-espace-6); padding: 0; border: 0; background: none; }
#profilePanel .access-group__k {
align-items: center;
margin: 0 0 var(--rg-espace-4);
padding-bottom: var(--rg-espace-2);
border-bottom: var(--rg-trait-1) solid var(--rg-bord-defaut);
font: var(--rg-label-m);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--rg-texte-principal);
}
#profilePanel .access-group__k::before {
--h: var(--rg-espace-4);
content: "";
width: calc(var(--h) * var(--rg-pente) + var(--rg-trait-3));
height: var(--h);
background: var(--k, var(--rg-texte-principal));
clip-path: polygon(calc(100% - var(--rg-trait-3)) 0, 100% 0, var(--rg-trait-3) 100%, 0 100%);
}
#profilePanel .access-group--team .access-group__k { --k: var(--rg-marine-0); color: var(--rg-texte-principal); }
#profilePanel .access-group--ext .access-group__k { --k: var(--rg-etat-attention); color: var(--rg-texte-principal); }
#profilePanel .access-group__k span { font: var(--rg-label-s); letter-spacing: var(--rg-label-s-espacement); color: var(--rg-texte-secondaire); }
#profilePanel .access-section { margin-bottom: var(--rg-espace-6); }
#profilePanel .access-section__title { font: var(--rg-titre-h3); color: var(--rg-texte-principal); }
#profilePanel .access-section__sub { margin-top: var(--rg-espace-1); font: var(--rg-texte-s); color: var(--rg-texte-secondaire); }
/* Accès : vide, lignes, étiquettes */
#profilePanel .access-empty { padding: var(--rg-espace-5); border: 0; border-radius: var(--rg-rayon-0); background: var(--rg-fond-surface); text-align: left; }
#profilePanel .access-empty__title { font: var(--rg-texte-s-fort); color: var(--rg-texte-principal); }
#profilePanel .access-empty__text { font: var(--rg-texte-s); color: var(--rg-texte-secondaire); }
#profilePanel .access-row { padding: var(--rg-espace-4); border: var(--rg-trait-1) solid var(--rg-bord-defaut); border-radius: var(--rg-rayon-0); background: var(--rg-fond-surface); }
@media (hover: hover) { #profilePanel .access-row:hover { border-color: var(--rg-bord-fort); } }
#profilePanel .access-row--request { border-left: var(--rg-trait-repere) solid var(--rg-accent-defaut); }
#profilePanel .access-row__title { font: var(--rg-texte-m-fort); color: var(--rg-texte-principal); }
#profilePanel .access-row__meta { font: var(--rg-texte-s); color: var(--rg-texte-secondaire); }
#profilePanel .access-code { font: var(--rg-chiffre-m); letter-spacing: var(--rg-label-m-espacement); color: var(--rg-accent-defaut); }
#profilePanel .access-tag,
#profilePanel .lect__etat {
--h: var(--rg-badge-hauteur);
position: relative;
isolation: isolate;
display: inline-flex;
align-items: center;
height: var(--h);
padding: 0 var(--rg-espace-3);
border: 0;
border-radius: var(--rg-rayon-0);
background: none;
font: var(--rg-label-s);
letter-spacing: var(--rg-label-s-espacement);
text-transform: uppercase;
vertical-align: middle;
color: var(--rg-texte-principal);
}
#profilePanel .access-tag::before,
#profilePanel .lect__etat::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--et, var(--rg-fond-surface-2));
clip-path: polygon(calc(var(--h) * var(--rg-pente)) 0, 100% 0, calc(100% - var(--h) * var(--rg-pente)) 100%, 0 100%);
}
#profilePanel .access-tag--gp,
#profilePanel .access-tag--inside { --et: var(--rg-texte-principal); color: var(--rg-texte-inverse); }
#profilePanel .access-row--lect.is-court .lect__etat { --et: var(--rg-etat-attention); color: var(--rg-marine-5); }
#profilePanel .access-row--lect.is-bientot .lect__etat { --et: var(--rg-etat-info); color: var(--rg-neutre-blanc); }
#profilePanel .access-row--lect.is-fini .lect__etat { --et: var(--rg-fond-surface-2); color: var(--rg-texte-secondaire); }
#profilePanel .access-row--lect.is-ok .lect__etat { --et: var(--rg-etat-succes); color: var(--rg-marine-5); }
#profilePanel .ext__dates label { font: var(--rg-label-s); letter-spacing: var(--rg-label-s-espacement); text-transform: uppercase; color: var(--rg-texte-secondaire); }
/* Accès : cinq blocs, un titre, un compteur */
#profilePanel .profile-panel__body:has(.acc-bloc) { counter-reset: acc; }
.acc-bloc { counter-increment: acc; margin-bottom: var(--rg-espace-3); background: var(--rg-fond-surface); }
.acc-bloc__tete {
display: flex;
align-items: center;
gap: var(--rg-espace-3);
min-height: calc(var(--rg-espace-7) + var(--rg-espace-2));
padding: 0 var(--rg-espace-5);
}
.acc-bloc__titre {
display: flex;
align-items: center;
gap: var(--rg-espace-3);
margin: 0;
font: var(--rg-label-m);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--rg-texte-principal);
}
.acc-bloc__titre::before { content: counter(acc, decimal-leading-zero); font: var(--rg-chiffre-s); letter-spacing: 0; color: var(--rg-accent-defaut); }
.acc-bloc__n {
--h: var(--rg-badge-hauteur);
position: relative;
isolation: isolate;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: calc(var(--h) * var(--rg-pente) + var(--rg-badge-chiffre));
height: var(--h);
padding: 0 calc(var(--h) * var(--rg-pente) / 2 + var(--rg-espace-1));
font: var(--rg-label-m);
font-variant-numeric: tabular-nums;
color: var(--rg-texte-principal);
}
.acc-bloc__n::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--rg-fond-surface-2);
clip-path: polygon(calc(var(--h) * var(--rg-pente)) 0, 100% 0, calc(100% - var(--h) * var(--rg-pente)) 100%, 0 100%);
}
.acc-bloc__n.is-chaud { color: var(--rg-neutre-blanc); }
.acc-bloc__n.is-chaud::before { background: var(--rg-accent-defaut); }
.acc-bloc__n.is-zero { color: var(--rg-texte-secondaire); }
.acc-bloc__tete .btn-primary { margin-left: auto; }
#profilePanel .acc-bloc__liste { gap: 0; }
#profilePanel .acc-bloc__liste:has(.access-row) { border-top: var(--rg-trait-1) solid var(--rg-bord-defaut); }
#profilePanel .acc-bloc .access-row { border: 0; border-bottom: var(--rg-trait-1) solid var(--rg-bord-defaut); padding: var(--rg-espace-4) var(--rg-espace-5); }
#profilePanel .acc-bloc .access-row:last-child { border-bottom: 0; }
#profilePanel .acc-bloc .access-row--request { box-shadow: none; border-left: var(--rg-trait-repere) solid var(--rg-accent-defaut); }
#profilePanel .acc-bloc .access-empty { display: none; }
/* ==========================================================
6. TIMETABLE, LE FIL DE LA JOURNÉE
========================================================== */
body.tt-fil {
--dash-largeur: calc(1320px - 2 * var(--gap-lg));
--ttb-hauteur: calc(var(--rg-entete-hauteur) + var(--rg-espace-7));
--ttb-haut: var(--rg-espace-7);
--ttb-coupe: calc((var(--ttb-hauteur) - var(--ttb-haut)) * var(--rg-pente));
--ttl-hauteur: 52px;
--ttl-heure: 56px;
--ttl-duree: 64px;
--tt-cote: 340px;
--tt-bouton: 36px;
--tt-tete: 56px;
--tt-icone: 18px;
--tt-retard: 28px;
--ttl-slash-l: 13px;
--ttl-slash-h: 16px;
--ttl-slash-pied: 4px;
--ttl-direct: 6px;
--tt-colonne-min: 260px;
--tt-seance: 88px;
--ttj-hauteur: 64px;
--ttj-min: 96px;
}
body.tt-fil .app-bg { display: none; }
body.tt-fil .page-body { max-width: none; }
/* Barre du haut fondue dans le bandeau */
@media (min-width: 721px) {
body.tt-fil .main-col { position: relative; }
body.tt-fil .topbar {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 5;
border-bottom: 0;
background: none;
pointer-events: none;
}
body.tt-fil .topbar__tools { pointer-events: auto; }
body.tt-fil .topbar__title { visibility: hidden; }
body.tt-fil .topbar__back { display: none; }
}
/* Boutons du bandeau */
.ttb__outils { grid-column: 1; grid-row: 2; display: flex; align-items: center; gap: var(--rg-espace-3); }
.ttb__b {
height: var(--tt-bouton);
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
padding: 0 var(--rg-espace-4);
border: var(--rg-trait-2) solid var(--rg-neutre-blanc);
background: none;
color: var(--rg-neutre-blanc);
font: var(--rg-texte-s-fort);
cursor: pointer;
transition: background var(--rg-duree), color var(--rg-duree);
}
@media (hover: hover) { .ttb__b:hover { background: var(--rg-neutre-blanc); color: var(--rg-marine-5); } }
.ttb__b svg { width: var(--rg-icone-16); height: var(--rg-icone-16); }
.ttb__b--icone { width: var(--tt-bouton); padding: 0; justify-content: center; }
/* Bandeau */
.ttb {
position: relative;
isolation: isolate;
display: grid;
grid-template-columns: minmax(0, 1fr) max-content;
grid-template-rows: 1fr auto;
column-gap: var(--rg-espace-7);
row-gap: var(--rg-espace-4);
height: var(--ttb-hauteur);
margin: calc(var(--gap-lg) * -1) calc(var(--gap-lg) * -1) var(--rg-espace-5);
padding: var(--rg-espace-6) max(calc(var(--ttb-coupe) + var(--rg-espace-5)), calc((100% - var(--dash-largeur)) / 2 + var(--gap-lg)))
var(--rg-espace-5) max(var(--gap-lg), calc((100% - var(--dash-largeur)) / 2 + var(--gap-lg)));
color: var(--rg-neutre-blanc);
}
.ttb::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--rg-fond-structure);
clip-path: polygon(0 0, 100% 0, 100% var(--ttb-haut), calc(100% - var(--ttb-coupe)) 100%, 0 100%);
}
.ttb::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--rg-accent-defaut);
clip-path: polygon(calc(100% - var(--ttb-coupe) * 0.58) 100%, 100% calc(100% - var(--ttb-coupe) * 0.58 / var(--rg-pente)),
100% calc(100% - var(--ttb-coupe) * 0.43 / var(--rg-pente)), calc(100% - var(--ttb-coupe) * 0.43) 100%);
}
.ttb__texte { min-width: 0; }
.ttb__surtitre {
display: flex;
align-items: center;
margin: 0 0 var(--rg-espace-2);
overflow: hidden;
white-space: nowrap;
font: var(--rg-label-m);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--rg-neutre-gris);
}
.ttb__retour {
flex: none;
margin-right: var(--rg-espace-2);
display: inline-flex;
align-items: center;
gap: var(--rg-espace-1);
color: var(--rg-neutre-blanc);
text-decoration: none;
transition: color var(--rg-duree);
}
@media (hover: hover) { .ttb__retour:hover { color: var(--rg-accent-defaut); } }
.ttb__lieu { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ttb__retour svg { width: var(--rg-icone-16); height: var(--rg-icone-16); transform: scaleX(-1); }
.ttb__titre {
margin: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font: var(--rg-display-m);
letter-spacing: var(--rg-display-m-espacement);
color: var(--rg-neutre-blanc);
padding-right: var(--rg-espace-2);
}
.ttb__trajectoire { margin-top: var(--rg-espace-1); color: var(--rg-accent-defaut); }
/* Compte à rebours */
.ttb__compte {
--rg-jauge-vide: var(--rg-marine-4);
grid-column: 2;
grid-row: 1 / 3;
align-self: center;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--rg-espace-3);
padding-left: var(--rg-espace-6);
border-left: var(--rg-trait-1) solid var(--rg-marine-4);
}
.ttb__compte-tete { display: flex; align-items: center; gap: var(--rg-espace-3); min-width: 0; }
.ttb__compte-l {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font: var(--rg-label-m);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--rg-neutre-gris);
}
.ttb__chrono {
font: var(--rg-chiffre-l);
letter-spacing: var(--rg-chiffre-l-espacement);
font-variant-numeric: tabular-nums;
color: var(--rg-neutre-blanc);
white-space: nowrap;
}
.ttb__chrono--date { font-size: calc(var(--rg-taille-chiffre-l) * 0.66); }
.ttb__jauge { width: 100%; height: calc(var(--rg-jauge-hauteur) * 0.72); }
/* Les jours, sous le bandeau */
.ttj {
display: grid;
grid-template-columns: max-content repeat(var(--n), minmax(var(--ttj-min), 1fr));
overflow-x: auto;
scrollbar-width: none;
max-width: var(--dash-largeur);
margin: 0 auto var(--rg-espace-5);
background: var(--rg-fond-surface);
}
.ttj__c {
position: relative;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: calc(var(--rg-espace-1) / 2);
height: var(--ttj-hauteur);
padding: 0 var(--rg-espace-4);
border: 0;
border-right: var(--rg-trait-1) solid var(--rg-bord-defaut);
background: none;
color: var(--rg-texte-principal);
text-align: left;
cursor: pointer;
transition: background var(--rg-duree);
}
.ttj__c:last-child { border-right: 0; }
@media (hover: hover) { .ttj__c:hover { background: var(--rg-fond-surface-2); } }
.ttj__c span { font: var(--rg-label-m); letter-spacing: var(--rg-label-m-espacement); text-transform: uppercase; color: var(--rg-texte-secondaire); white-space: nowrap; }
.ttj__c b { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: var(--rg-texte-s-fort); }
.ttj__c--tous { padding-inline: var(--rg-espace-5); }
.ttj__c.is-passe b,
.ttj__c.is-passe span { color: var(--rg-texte-desactive); }
.ttj__c.is-auj span { color: var(--rg-accent-defaut); }
.ttj__c.is-actif { background: var(--rg-texte-principal); color: var(--rg-texte-inverse); }
.ttj__c.is-actif span { color: inherit; opacity: .7; }
.ttj__c.is-actif.is-auj span { opacity: 1; }
.ttj__c.is-actif.is-auj span { color: var(--rg-accent-defaut); }
.ttj__c.is-actif::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: var(--rg-trait-4);
background: var(--rg-accent-defaut);
}
/* Corps : la liste et la colonne */
.ttfil {
display: grid;
grid-template-columns: minmax(0, 1fr) var(--tt-cote);
gap: var(--rg-espace-5);
align-items: start;
max-width: var(--dash-largeur);
margin-inline: auto;
}
.ttfil__panneau { min-width: 0; background: var(--rg-fond-surface); }
.ttfil__tete {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--rg-espace-4);
min-height: var(--tt-tete);
padding: var(--rg-espace-2) var(--rg-espace-5);
border-bottom: var(--rg-trait-1) solid var(--rg-bord-defaut);
}
.ttfil__titre {
flex: 1 0 auto;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font: var(--rg-label-m);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--rg-texte-principal);
}
.ttfil__titre[data-rename] { cursor: text; }
@media (hover: hover) { .ttfil__titre[data-rename]:hover { color: var(--rg-accent-defaut); } }
.ttfil__liste {
position: relative;
max-height: calc(100vh - var(--ttb-hauteur) - var(--ttj-hauteur) - var(--tt-tete) - 2 * var(--rg-espace-5) - var(--gap-lg));
min-height: calc(var(--ttl-hauteur) * 4);
overflow-y: auto;
scrollbar-width: thin;
}
.ttfil__vide { margin: 0; padding: var(--rg-espace-6) var(--rg-espace-5); font: var(--rg-texte-s); color: var(--rg-texte-secondaire); }
div.ttfil__vide { display: flex; flex-direction: column; gap: var(--rg-espace-2); padding: var(--rg-espace-7) 0; }
div.ttfil__vide b { font: var(--rg-titre-h3); color: var(--rg-texte-principal); }
/* Filtre par métier */
.ttf-seg { display: inline-flex; flex-wrap: wrap; border: var(--rg-trait-1) solid var(--rg-bord-defaut); }
.ttf-seg button {
height: var(--tt-bouton);
padding: 0 var(--rg-espace-3);
border: 0;
background: none;
font: var(--rg-texte-s-fort);
color: var(--rg-texte-secondaire);
cursor: pointer;
transition: color var(--rg-duree), background var(--rg-duree);
}
@media (hover: hover) { .ttf-seg button:hover { color: var(--rg-texte-principal); } }
.ttf-seg button.is-on { background: var(--rg-texte-principal); color: var(--rg-texte-inverse); }
.ttf-plus {
flex: none;
width: var(--tt-bouton);
height: var(--tt-bouton);
display: grid;
place-items: center;
padding: 0;
border: var(--rg-trait-2) solid var(--rg-texte-principal);
background: none;
color: var(--rg-texte-principal);
cursor: pointer;
transition: background var(--rg-duree), color var(--rg-duree), border-color var(--rg-duree);
}
@media (hover: hover) { .ttf-plus:hover { background: var(--rg-accent-defaut); border-color: var(--rg-accent-defaut); color: var(--rg-neutre-blanc); } }
.ttf-plus svg { width: var(--tt-icone); height: var(--tt-icone); }
/* Une ligne d'événement */
.ttl {
position: relative;
display: flex;
align-items: center;
gap: var(--rg-espace-4);
min-height: var(--ttl-hauteur);
padding: var(--rg-espace-2) var(--rg-espace-5);
border-bottom: var(--rg-trait-1) solid var(--rg-bord-defaut);
color: var(--rg-texte-principal);
cursor: pointer;
transition: background var(--rg-duree);
}
.ttl:last-child { border-bottom: 0; }
@media (hover: hover) { .ttl:hover { background: var(--rg-fond-surface-2); } }
.ttl:focus-visible { outline: var(--rg-trait-3) solid var(--rg-accent-defaut); outline-offset: calc(var(--rg-trait-3) * -1); }
.ttl__h { flex: none; width: var(--ttl-heure); font: var(--rg-chiffre-m); font-variant-numeric: tabular-nums; }
.ttl__slash {
flex: none;
width: var(--ttl-slash-l);
height: var(--ttl-slash-h);
background: var(--c);
clip-path: polygon(calc(100% - var(--ttl-slash-pied)) 0, 100% 0, var(--ttl-slash-pied) 100%, 0 100%);
}
.ttl__t { flex: 1; min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; column-gap: var(--rg-espace-3); }
.ttl__t b { font: var(--rg-texte-m-fort); }
.ttl__t small { font: var(--rg-label-s); letter-spacing: var(--rg-label-m-espacement); text-transform: uppercase; color: var(--rg-texte-secondaire); }
.ttl__ret { font: var(--rg-label-m); font-style: normal; color: var(--rg-etat-attention); }
.ttl__ret s { margin-left: var(--rg-espace-1); color: var(--rg-texte-desactive); }
.ttl__now { flex: none; }
.ttl__d { flex: none; width: var(--ttl-duree); text-align: right; font: var(--rg-chiffre-s); color: var(--rg-texte-secondaire); }
.ttl__retard {
flex: none;
width: var(--tt-retard);
height: var(--tt-retard);
display: grid;
place-items: center;
margin-right: calc(var(--rg-espace-2) * -1);
padding: 0;
border: 0;
background: none;
color: var(--rg-texte-secondaire);
cursor: pointer;
opacity: 0;
transition: opacity var(--rg-duree), color var(--rg-duree);
}
.ttl__retard:focus-visible { opacity: 1; }
@media (hover: hover) { .ttl:hover .ttl__retard { opacity: 1; } }
@media (hover: hover) { .ttl__retard:hover { color: var(--rg-etat-attention); } }
.ttl__retard svg { width: var(--tt-icone); height: var(--tt-icone); }
.ttl.is-passe { color: var(--rg-texte-desactive); }
.ttl.is-passe .ttl__slash { opacity: .35; }
.ttl.is-passe .ttl__t small,
.ttl.is-passe .ttl__d { color: var(--rg-texte-desactive); }
.ttl.is-encours { background: var(--rg-accent-doux); }
.ttl.is-encours::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: var(--ttl-direct);
background: var(--rg-accent-defaut);
}
.ttl.is-estompe { opacity: .35; }
/* Vue Tous : un bloc par jour */
.ttg { border-bottom: var(--rg-trait-1) solid var(--rg-bord-defaut); }
.ttg:last-child { border-bottom: 0; }
.ttg__tete {
position: sticky;
top: 0;
z-index: 1;
width: 100%;
display: flex;
align-items: center;
gap: var(--rg-espace-4);
min-height: var(--tt-tete);
padding: var(--rg-espace-2) var(--rg-espace-5);
border: 0;
background: var(--rg-fond-surface);
color: var(--rg-texte-principal);
text-align: left;
cursor: pointer;
transition: background var(--rg-duree);
}
@media (hover: hover) { .ttg__tete:hover { background: var(--rg-fond-surface-2); } }
.ttg__tete svg { flex: none; width: var(--rg-icone-16); height: var(--rg-icone-16); transition: transform var(--rg-duree); }
.ttg.is-ouvert .ttg__tete svg { transform: rotate(90deg); }
.ttg__date { flex: none; width: var(--ttl-heure); font: var(--rg-label-m); letter-spacing: var(--rg-label-m-espacement); }
.ttg__nom { flex: 1; min-width: 0; font: var(--rg-texte-m-fort); }
.ttg__n { font: var(--rg-label-s); letter-spacing: var(--rg-label-m-espacement); text-transform: uppercase; color: var(--rg-texte-secondaire); }
.ttg.is-ouvert .ttg__tete { border-bottom: var(--rg-trait-1) solid var(--rg-bord-defaut); }
.ttg.is-auj.is-ouvert .ttg__tete { background: var(--rg-fond-structure); color: var(--rg-neutre-blanc); border-bottom-color: var(--rg-fond-structure); }
.ttg.is-auj.is-ouvert .ttg__n { color: var(--rg-neutre-gris); }
.ttg.is-auj .ttg__date { color: var(--rg-accent-defaut); }
/* Colonne de droite */
.ttcote { display: flex; flex-direction: column; gap: var(--rg-espace-4); min-width: 0; }
.ttc2 { background: var(--rg-fond-surface); }
.ttc2__tete {
display: flex;
align-items: center;
gap: var(--rg-espace-3);
min-height: var(--ttl-hauteur);
padding: 0 var(--rg-espace-5);
border-bottom: var(--rg-trait-1) solid var(--rg-bord-defaut);
font: var(--rg-label-m);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--rg-texte-principal);
}
.ttc2__tete svg { width: var(--rg-icone-20); height: var(--rg-icone-20); color: var(--rg-accent-defaut); }
.ttc2__l {
display: flex;
align-items: center;
gap: var(--rg-espace-3);
min-height: var(--ttl-hauteur);
padding: 0 var(--rg-espace-5);
border-bottom: var(--rg-trait-1) solid var(--rg-bord-defaut);
color: var(--rg-texte-principal);
}
.ttc2__l:last-child { border-bottom: 0; }
.ttc2__l b { flex: none; width: var(--tt-seance); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: var(--rg-chiffre-m); }
.ttc2__j { flex: none; font: var(--rg-label-s); letter-spacing: var(--rg-label-m-espacement); color: var(--rg-texte-secondaire); }
.ttc2__h { flex: 1; font: var(--rg-chiffre-s); color: var(--rg-texte-secondaire); white-space: nowrap; }
.ttc2__e { font: var(--rg-label-s); letter-spacing: var(--rg-label-m-espacement); text-transform: uppercase; color: var(--rg-texte-secondaire); }
.ttc2__l.is-fini { color: var(--rg-texte-secondaire); }
.ttcote__chiffre { width: auto; padding: var(--rg-espace-5); background: var(--rg-fond-surface); }
.ttcote__alerte { width: auto; }
@media (max-width: 1180px) {
body.tt-fil { --ttb-hauteur: calc(var(--rg-entete-hauteur) + var(--rg-espace-8)); }
.ttb { padding-top: var(--rg-espace-8); }
.ttb__compte { display: none; }
.ttfil { grid-template-columns: minmax(0, 1fr); }
.ttcote { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--tt-colonne-min), 1fr)); align-items: start; }
}
/* La liste des week-ends */
body.tt-fil {
--ttw-colonnes: var(--ttw-photo) minmax(0, 1fr) 160px var(--ttw-act);
--ttw-hauteur: 104px;
--ttw-photo: 184px;
--ttw-photo-coupe: calc(var(--ttw-hauteur) * var(--rg-pente) * 0.35);
--ttw-act: 72px;
--ttwl-cherche: 320px;
--ttwl-champ: 44px;
}
.ttb--liste { grid-template-rows: 1fr; align-items: center; margin-bottom: var(--rg-espace-6); }
.ttb__actions {
grid-column: 2;
align-self: end;
justify-self: end;
display: flex;
align-items: center;
gap: var(--rg-espace-3);
margin-bottom: var(--rg-espace-6);
}
.ttb__b--l { height: var(--rg-icone-48); padding: 0 var(--rg-espace-5); font: var(--rg-texte-m-fort); }
.ttb__b--l svg { width: var(--rg-icone-20); height: var(--rg-icone-20); }
.ttwl { display: flex; flex-direction: column; gap: var(--rg-espace-4); max-width: var(--dash-largeur); margin-inline: auto; }
.ttwl__outils { display: flex; align-items: center; justify-content: space-between; gap: var(--rg-espace-4); flex-wrap: wrap; }
.ttf-seg--fond { background: var(--rg-fond-surface); }
.ttf-seg--fond button { height: calc(var(--ttwl-champ) - 2 * var(--rg-trait-1)); padding: 0 var(--rg-espace-4); }
.ttwl__cherche {
width: var(--ttwl-cherche);
max-width: 100%;
height: var(--ttwl-champ);
display: flex;
align-items: center;
gap: var(--rg-espace-2);
padding: 0 var(--rg-espace-4);
background: var(--rg-fond-surface);
border: var(--rg-trait-1) solid var(--rg-bord-defaut);
border-bottom: var(--rg-trait-3) solid var(--rg-texte-principal);
}
.ttwl__cherche svg { flex: none; width: var(--tt-icone); height: var(--tt-icone); color: var(--rg-texte-secondaire); }
.ttwl__cherche input {
flex: 1;
min-width: 0;
border: 0;
outline: 0;
background: none;
font: var(--rg-texte-m);
color: var(--rg-texte-principal);
}
.ttwl__cherche:focus-within { border-bottom-color: var(--rg-accent-defaut); }
.ttwl__table { background: var(--rg-fond-surface); }
.ttw {
position: relative;
display: grid;
grid-template-columns: var(--ttw-colonnes);
align-items: center;
column-gap: var(--rg-espace-5);
min-height: var(--ttw-hauteur);
padding: 0 var(--rg-espace-5) 0 0;
border-bottom: var(--rg-trait-1) solid var(--rg-bord-defaut);
color: var(--rg-texte-principal);
transition: background var(--rg-duree);
}
.ttw__photo {
align-self: stretch;
position: relative;
display: grid;
place-items: center;
background-color: var(--rg-fond-structure);
background-size: cover;
background-repeat: no-repeat;
clip-path: polygon(0 0, 100% 0, calc(100% - var(--ttw-photo-coupe)) 100%, 0 100%);
}
.ttw__photo.is-vide { background-color: var(--rg-marine-4); color: var(--rg-marine-2); }
.ttw__photo.is-vide svg { width: var(--rg-icone-32); height: var(--rg-icone-32); margin-right: var(--ttw-photo-coupe); }
.ttw__sur { font: var(--rg-label-s); letter-spacing: var(--rg-label-s-espacement); text-transform: uppercase; color: var(--rg-texte-secondaire); }
.ttw__etat { display: flex; flex-direction: column; align-items: flex-start; gap: var(--rg-espace-2); }
.ttw__avance { font: var(--rg-label-s); letter-spacing: var(--rg-label-s-espacement); text-transform: uppercase; color: var(--rg-texte-secondaire); }
.ttw__total { font: var(--rg-texte-s); color: var(--rg-texte-secondaire); }
.ttw__total b { font: var(--rg-chiffre-m); color: var(--rg-texte-principal); }
.ttw.is-passe .ttw__total b { color: inherit; }
.ttw.is-live .ttw__avance { color: var(--rg-accent-defaut); }
#ttListeLignes .ttw:last-child { border-bottom: 0; }
@media (hover: hover) { #ttListeLignes .ttw:hover { background: var(--rg-fond-surface-2); } }
.ttw--tete {
min-height: 40px;
padding-left: 0;
background: var(--rg-fond-page);
font: var(--rg-label-m);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--rg-texte-secondaire);
}
.ttw__manche { display: flex; flex-direction: column; gap: calc(var(--rg-espace-1) / 2); }
.ttw__manche small,
.ttw__nom small { font: var(--rg-label-s); letter-spacing: var(--rg-label-m-espacement); text-transform: uppercase; color: var(--rg-texte-secondaire); }
.ttw__nom small { font: var(--rg-texte-s); letter-spacing: normal; text-transform: none; }
.ttw__manche b { font: var(--rg-titre-h2); }
.ttw__nom { min-width: 0; display: flex; flex-direction: column; gap: calc(var(--rg-espace-1) / 2); }
.ttw__nom a {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font: var(--rg-texte-m-fort);
font-size: var(--rg-taille-texte-l);
color: inherit;
text-decoration: none;
}
.ttw__nom a::after { content: ""; position: absolute; inset: 0; }
@media (hover: hover) { .ttw:hover .ttw__nom a { color: var(--rg-accent-defaut); } }
.ttw__dates { font: var(--rg-chiffre-s); }
.ttw__dates-c { display: none; }
.ttw__n,
.ttw__evs b { font: var(--rg-chiffre-m); }
.ttw__evs { display: flex; flex-direction: column; gap: var(--rg-espace-1); }
.ttw__evs .rg-jauge { width: 100%; height: var(--rg-espace-2); margin-top: var(--rg-espace-1); }
.ttw__act { position: relative; z-index: 1; display: flex; justify-content: flex-end; gap: var(--rg-espace-1); opacity: 0; transition: opacity var(--rg-duree); }
.ttw__act:focus-within { opacity: 1; }
@media (hover: hover) { .ttw:hover .ttw__act { opacity: 1; } }
.ttw__act button {
width: var(--tt-retard);
height: var(--tt-retard);
display: grid;
place-items: center;
padding: 0;
border: 0;
background: none;
color: var(--rg-texte-secondaire);
cursor: pointer;
}
@media (hover: hover) { .ttw__act button:hover { color: var(--rg-texte-principal); } }
@media (hover: hover) { .ttw__act [data-del-tt]:hover { color: var(--rg-etat-erreur); } }
.ttw__act svg { width: var(--tt-icone); height: var(--tt-icone); }
.ttw.is-passe { color: var(--rg-texte-secondaire); }
.ttw.is-passe .rg-jauge { --rg-jauge-plein: var(--rg-texte-desactive); }
.ttw.is-live .ttw__photo::after {
content: "";
position: absolute;
inset: 0;
background: var(--rg-accent-defaut);
clip-path: polygon(calc(100% - var(--ttw-photo-coupe) * 0.5) 0, 100% 0, calc(100% - var(--ttw-photo-coupe)) 100%, calc(100% - var(--ttw-photo-coupe) * 1.5) 100%);
}
.ttw:not(.is-live):not(.is-passe) .rg-jauge { --rg-jauge-plein: var(--rg-texte-principal); }
.ttwl__depot {
display: flex;
align-items: center;
gap: var(--rg-espace-5);
width: 100%;
padding: var(--rg-espace-5);
border: var(--rg-trait-1) dashed transparent;
background: var(--rg-fond-surface);
color: var(--rg-texte-principal);
text-align: left;
cursor: pointer;
transition: border-color var(--rg-duree);
}
.ttwl__depot.is-survol { border-color: var(--rg-accent-defaut); }
@media (hover: hover) { .ttwl__depot:hover { border-color: var(--rg-accent-defaut); } }
.ttwl__depot-i { flex: none; width: var(--rg-icone-48); height: var(--rg-icone-48); display: grid; place-items: center; background: var(--rg-fond-surface-2); color: var(--rg-accent-defaut); }
.ttwl__depot-i svg { width: var(--rg-icone-24); height: var(--rg-icone-24); }
.ttwl__depot-t { flex: 1; display: flex; flex-direction: column; gap: calc(var(--rg-espace-1) / 2); }
.ttwl__depot-t b { font: var(--rg-texte-m-fort); }
.ttwl__depot-t small { font: var(--rg-texte-s); color: var(--rg-texte-secondaire); }
.ttwl__depot-g { font: var(--rg-label-s); letter-spacing: var(--rg-label-m-espacement); text-transform: uppercase; color: var(--rg-texte-secondaire); }
@media (max-width: 1180px) {
body.tt-fil { --ttw-colonnes: var(--ttw-photo) minmax(0, 1fr) 120px var(--ttw-act); --ttw-photo: 120px; }
}
/* ==========================================================
7. FENÊTRE ÉVÉNEMENT
Même grammaire que le panneau profil : en-tête marine coupé,
fil des étapes, blocs numérotés, traits de catégorie à 30°.
========================================================== */
#evModal,
#icsModal {
--evf-coupe: var(--rg-espace-7);
--evf-trait-l: 10px;
--evf-trait-h: 14px;
--evf-trait-pied: 3px;
--evf-ligne: 52px;
--evf-heure: var(--rg-taille-chiffre-l);
--evf-heure-l: 76px;
--evf-suite-heure: 84px;
--evf-suite-duree: 64px;
}
#evModal .modal,
#icsModal .modal { background: var(--rg-fond-page); }
#evModal .modal::after,
#icsModal .modal::after { display: none; }
/* En-tête */
#evModal .evf-tete,
#icsModal .evf-tete {
position: relative;
isolation: isolate;
align-items: flex-start;
padding: var(--rg-espace-5) var(--rg-espace-5) var(--rg-espace-7) var(--rg-espace-6);
border-bottom: 0;
background: none;
}
#evModal .evf-tete::before,
#icsModal .evf-tete::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--rg-fond-structure);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--evf-coupe)), calc(100% - var(--evf-coupe) * var(--rg-pente)) 100%, 0 100%);
}
#evModal .evf-tete::after,
#icsModal .evf-tete::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--rg-accent-defaut);
clip-path: polygon(calc(100% - var(--evf-coupe) * var(--rg-pente) * 0.58) 100%, 100% calc(100% - var(--evf-coupe) * 0.58),
100% calc(100% - var(--evf-coupe) * 0.43), calc(100% - var(--evf-coupe) * var(--rg-pente) * 0.43) 100%);
}
.evf-tete__texte { min-width: 0; display: flex; flex-direction: column; gap: var(--rg-espace-1); }
.evf-tete__surtitre {
margin: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font: var(--rg-label-m);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--rg-accent-defaut);
}
#evModal .modal__title,
#icsModal .modal__title { font: var(--rg-titre-h2); color: var(--rg-neutre-blanc); }
.evf-tete__recap {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--rg-espace-2);
margin: var(--rg-espace-1) 0 0;
font: var(--rg-texte-s-fort);
color: var(--rg-neutre-blanc);
}
.evf-tete__recap[hidden] { display: none; }
.evf-tete__recap i,
#evModal .evf__cat i,
#evModal .evf__task i,
#evModal .evf__choisi i,
#evModal .suite__pastille,
#icsModal .evf__cat i,
#icsModal .evf__task i,
#icsModal .evf__choisi i,
#icsModal .suite__pastille {
flex: none;
width: var(--evf-trait-l);
height: var(--evf-trait-h);
border-radius: var(--rg-rayon-0);
background: var(--c);
clip-path: polygon(calc(100% - var(--evf-trait-pied)) 0, 100% 0, var(--evf-trait-pied) 100%, 0 100%);
}
.evf-tete__recap span { font: var(--rg-label-m); letter-spacing: var(--rg-label-m-espacement); color: var(--rg-neutre-gris); }
#evModal .evf-tete .modal__close,
#icsModal .evf-tete .modal__close { color: var(--rg-neutre-gris); }
@media (hover: hover) { #evModal .evf-tete .modal__close:hover,
#icsModal .evf-tete .modal__close:hover { color: var(--rg-neutre-blanc); } }
/* Fil des étapes */
.evf-pas {
flex: none;
display: flex;
gap: var(--rg-espace-5);
padding: 0 var(--rg-espace-6);
border-bottom: var(--rg-trait-1) solid var(--rg-bord-defaut);
}
.evf-pas__e {
position: relative;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
height: var(--rg-onglet-hauteur);
padding: 0 var(--rg-espace-1);
border: 0;
background: none;
font: var(--rg-texte-m-fort);
color: var(--rg-texte-desactive);
}
.evf-pas__e span { font: var(--rg-chiffre-s); color: inherit; }
.evf-pas__e.is-fait { color: var(--rg-texte-secondaire); cursor: pointer; }
@media (hover: hover) { .evf-pas__e.is-fait:hover { color: var(--rg-texte-principal); } }
.evf-pas__e.is-actif { color: var(--rg-texte-principal); }
.evf-pas__e.is-actif span { color: var(--rg-accent-defaut); }
.evf-pas__e.is-actif::after {
--h: var(--rg-onglet-indicateur);
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: var(--h);
background: var(--rg-accent-defaut);
clip-path: polygon(calc(var(--h) * var(--rg-pente)) 0, 100% 0, calc(100% - var(--h) * var(--rg-pente)) 100%, 0 100%);
}
/* Corps */
#evModal .modal__body,
#icsModal .modal__body { padding: var(--rg-espace-6); }
#evModal .form-input:focus,
#evModal .form-textarea:focus,
#icsModal .form-input:focus,
#icsModal .form-textarea:focus { border-color: var(--rg-bord-defaut); border-bottom-color: var(--rg-accent-defaut); }
#evModal .evf__erreur,
#icsModal .evf__erreur { width: auto; margin-bottom: var(--rg-espace-5); }
#evModal .evf__erreur[hidden],
#icsModal .evf__erreur[hidden] { display: none; }
#evModal .evf__bloc,
#icsModal .evf__bloc { display: flex; flex-direction: column; gap: var(--rg-espace-4); padding: 0; border: 0; background: none; }
#evModal .evf__bloc[hidden],
#icsModal .evf__bloc[hidden] { display: none; }
#evModal .evf__bloc--note,
#icsModal .evf__bloc--note { margin-top: var(--rg-espace-6); }
#evModal .evf__titre,
#icsModal .evf__titre {
display: flex;
align-items: baseline;
gap: var(--rg-espace-3);
margin: 0;
font: var(--rg-label-m);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--rg-texte-principal);
}
#evModal .evf__titre > i,
#icsModal .evf__titre > i { font: var(--rg-chiffre-s); font-style: normal; letter-spacing: 0; color: var(--rg-accent-defaut); }
#evModal .evf__titre > i::before,
#icsModal .evf__titre > i::before { content: "0"; }
#evModal .evf__titre em,
#evModal .evf__bloc--note .form-label em,
#icsModal .evf__titre em,
#icsModal .evf__bloc--note .form-label em { font: var(--rg-label-s); font-style: normal; letter-spacing: var(--rg-label-s-espacement); color: var(--rg-texte-desactive); }
#evModal .form-label,
#icsModal .form-label { font: var(--rg-label-s); letter-spacing: var(--rg-label-s-espacement); text-transform: uppercase; color: var(--rg-texte-secondaire); }
/* 1. Quoi */
#evModal .evf__cherche svg,
#icsModal .evf__cherche svg { left: var(--rg-espace-4); width: var(--rg-icone-20); height: var(--rg-icone-20); color: var(--rg-texte-secondaire); }
#evModal .evf__cherche .form-input,
#icsModal .evf__cherche .form-input { padding-left: calc(var(--rg-espace-4) * 2 + var(--rg-icone-20)); }
#evModal .evf__clear,
#icsModal .evf__clear { border-radius: var(--rg-rayon-0); color: var(--rg-texte-secondaire); background: none; }
@media (hover: hover) { #evModal .evf__clear:hover,
#icsModal .evf__clear:hover { color: var(--rg-texte-principal); background: var(--rg-fond-surface-2); } }
#evModal .evf__cats,
#icsModal .evf__cats { gap: 0; border: var(--rg-trait-1) solid var(--rg-bord-defaut); background: var(--rg-fond-surface); }
#evModal .evf__cat,
#icsModal .evf__cat {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
height: var(--rg-btn-s-hauteur);
padding: 0 var(--rg-espace-3);
border: 0;
border-radius: var(--rg-rayon-0);
background: none;
font: var(--rg-texte-s-fort);
color: var(--rg-texte-secondaire);
}
@media (hover: hover) { #evModal .evf__cat:hover,
#icsModal .evf__cat:hover { color: var(--rg-texte-principal); background: var(--rg-fond-surface-2); } }
#evModal .evf__cat.is-on,
#icsModal .evf__cat.is-on { background: var(--rg-texte-principal); color: var(--rg-texte-inverse); }
#evModal .evf__tasks,
#icsModal .evf__tasks { gap: 0; max-height: none; padding: 0; border: 0; background: var(--rg-fond-surface); }
#evModal .evf__tasks:empty,
#icsModal .evf__tasks:empty { display: none; }
#evModal .evf__task,
#icsModal .evf__task {
display: flex;
align-items: center;
gap: var(--rg-espace-3);
min-height: var(--evf-ligne);
padding: 0 var(--rg-espace-4);
border: 0;
border-bottom: var(--rg-trait-1) solid var(--rg-bord-defaut);
border-radius: var(--rg-rayon-0);
background: none;
font: var(--rg-texte-m-fort);
color: var(--rg-texte-principal);
text-align: left;
}
#evModal .evf__task:last-child,
#icsModal .evf__task:last-child { border-bottom: 0; }
@media (hover: hover) { #evModal .evf__task:hover,
#icsModal .evf__task:hover { background: var(--rg-fond-surface-2); } }
#evModal .evf__task em,
#icsModal .evf__task em { margin-left: auto; font: var(--rg-label-s); font-style: normal; letter-spacing: var(--rg-label-s-espacement); text-transform: uppercase; color: var(--rg-texte-secondaire); }
#evModal .evf__task--libre,
#icsModal .evf__task--libre { border-top: var(--rg-trait-1) dashed var(--rg-bord-fort); }
#evModal .evf__task--libre i,
#icsModal .evf__task--libre i { --c: var(--rg-texte-desactive); }
#evModal .evf__tasks--choisi,
#icsModal .evf__tasks--choisi { background: none; }
#evModal .evf__choisi,
#icsModal .evf__choisi {
position: relative;
display: flex;
align-items: center;
gap: var(--rg-espace-3);
min-height: calc(var(--evf-ligne) + var(--rg-espace-3));
padding: 0 var(--rg-espace-4) 0 var(--rg-espace-5);
border: 0;
border-radius: var(--rg-rayon-0);
background: var(--rg-fond-surface);
}
#evModal .evf__choisi::before,
#icsModal .evf__choisi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--rg-trait-4); background: var(--c); }
#evModal .evf__choisi b,
#icsModal .evf__choisi b { font: var(--rg-texte-m-fort); color: var(--rg-texte-principal); }
#evModal .evf__choisi em,
#icsModal .evf__choisi em { font: var(--rg-label-s); font-style: normal; letter-spacing: var(--rg-label-s-espacement); text-transform: uppercase; color: var(--rg-texte-secondaire); }
#evModal .evf__choisi button,
#icsModal .evf__choisi button {
margin-left: auto;
padding: 0;
border: 0;
background: none;
font: var(--rg-texte-s-fort);
color: var(--rg-texte-secondaire);
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
@media (hover: hover) { #evModal .evf__choisi button:hover,
#icsModal .evf__choisi button:hover { color: var(--rg-accent-defaut); } }
/* 2. Quand */
#evModal .evf__quand,
#icsModal .evf__quand { gap: var(--rg-espace-5); padding: var(--rg-espace-5); background: var(--rg-fond-surface); }
#evModal .evf__quand .form-field,
#icsModal .evf__quand .form-field { display: flex; flex-direction: column; gap: var(--rg-espace-2); }
#evModal .hm,
#icsModal .hm { gap: var(--rg-espace-2); align-items: baseline; }
#evModal .hm__n,
#icsModal .hm__n {
width: var(--evf-heure-l);
height: calc(var(--evf-heure) + var(--rg-espace-4));
padding: 0;
border: 0;
border-bottom: var(--rg-trait-3) solid var(--rg-bord-fort);
background: var(--rg-fond-page);
font: var(--rg-chiffre-l);
letter-spacing: var(--rg-chiffre-l-espacement);
font-variant-numeric: tabular-nums;
text-align: center;
}
#evModal .hm__n:focus,
#icsModal .hm__n:focus { border-bottom-color: var(--rg-accent-defaut); }
#evModal .hm__sep,
#icsModal .hm__sep { font: var(--rg-chiffre-l); color: var(--rg-texte-desactive); }
#evModal .hm__u,
#icsModal .hm__u { font: var(--rg-label-s); letter-spacing: var(--rg-label-s-espacement); text-transform: uppercase; color: var(--rg-texte-secondaire); }
.evf__durees { display: flex; flex-wrap: wrap; border: var(--rg-trait-1) solid var(--rg-bord-defaut); background: var(--rg-fond-surface); }
.evf__durees button {
flex: 1 1 0;
height: var(--rg-btn-s-hauteur);
border: 0;
background: none;
font: var(--rg-chiffre-s);
color: var(--rg-texte-secondaire);
cursor: pointer;
transition: background var(--rg-duree), color var(--rg-duree);
}
.evf__durees button + button { border-left: var(--rg-trait-1) solid var(--rg-bord-defaut); }
@media (hover: hover) { .evf__durees button:hover { color: var(--rg-texte-principal); background: var(--rg-fond-surface-2); } }
.evf__durees button.is-on { background: var(--rg-texte-principal); color: var(--rg-texte-inverse); }
/* 3. Qui : un trait de la couleur du métier, plein quand il est choisi */
#evModal .evf__roles,
#evModal .suite__qui,
#icsModal .evf__roles,
#icsModal .suite__qui { display: flex; flex-wrap: wrap; gap: var(--rg-espace-2); }
#evModal .evf__role,
#evModal .suite__role,
#icsModal .evf__role,
#icsModal .suite__role {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
height: var(--rg-btn-s-hauteur);
padding: 0 var(--rg-espace-3);
border: var(--rg-trait-1) solid var(--rg-bord-defaut);
border-radius: var(--rg-rayon-0);
background: var(--rg-fond-surface);
font: var(--rg-texte-s-fort);
color: var(--rg-texte-secondaire);
cursor: pointer;
transition: background var(--rg-duree), color var(--rg-duree), border-color var(--rg-duree);
}
#evModal .evf__role::before,
#evModal .suite__role::before,
#icsModal .evf__role::before,
#icsModal .suite__role::before {
content: "";
flex: none;
width: var(--evf-trait-l);
height: var(--evf-trait-h);
background: var(--mc, var(--rg-texte-desactive));
clip-path: polygon(calc(100% - var(--evf-trait-pied)) 0, 100% 0, var(--evf-trait-pied) 100%, 0 100%);
}
@media (hover: hover) { #evModal .evf__role:hover,
#evModal .suite__role:hover,
#icsModal .evf__role:hover,
#icsModal .suite__role:hover { border-color: var(--rg-bord-fort); color: var(--rg-texte-principal); } }
#evModal .evf__role.is-on,
#evModal .suite__role.is-on,
#icsModal .evf__role.is-on,
#icsModal .suite__role.is-on { border-color: var(--rg-texte-principal); background: var(--rg-texte-principal); color: var(--rg-texte-inverse); }
#evModal .evf__tm,
#icsModal .evf__tm { gap: var(--rg-espace-2); margin-top: var(--rg-espace-3); }
#evModal .evf__tmc,
#icsModal .evf__tmc { border-radius: var(--rg-rayon-0); border: var(--rg-trait-1) solid var(--rg-bord-defaut); background: var(--rg-fond-surface); }
#evModal .evf__tmc.is-on,
#icsModal .evf__tmc.is-on { border-color: var(--rg-texte-principal); background: var(--rg-texte-principal); color: var(--rg-texte-inverse); }
#evModal .evf__lab,
#icsModal .evf__lab { font: var(--rg-label-s); letter-spacing: var(--rg-label-s-espacement); text-transform: uppercase; color: var(--rg-texte-secondaire); }
/* 4. Ce qui va avec */
#evModal .suite__tete,
#icsModal .suite__tete { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--rg-espace-4); margin-bottom: var(--rg-espace-2); }
#evModal .suite__titre,
#icsModal .suite__titre { display: flex; flex-direction: column; gap: calc(var(--rg-espace-1) / 2); font: var(--rg-texte-m-fort); color: var(--rg-texte-principal); }
#evModal .suite__titre em,
#icsModal .suite__titre em { font: var(--rg-texte-s); font-style: normal; color: var(--rg-texte-secondaire); }
#evModal .suite__tout,
#icsModal .suite__tout {
padding: 0;
border: 0;
background: none;
font: var(--rg-texte-s-fort);
color: var(--rg-texte-secondaire);
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
@media (hover: hover) { #evModal .suite__tout:hover,
#icsModal .suite__tout:hover { color: var(--rg-accent-defaut); } }
#evModal .suite__lignes,
#icsModal .suite__lignes { gap: 0; }
#evModal .suite__ligne,
#icsModal .suite__ligne {
display: grid;
grid-template-columns: auto auto minmax(0, 1fr) var(--evf-suite-heure) var(--evf-suite-duree) auto;
grid-template-areas: "c p n h d u" ". . q q q q";
align-items: center;
column-gap: var(--rg-espace-3);
row-gap: var(--rg-espace-3);
padding: var(--rg-espace-4);
border: 0;
border-bottom: var(--rg-trait-1) solid var(--rg-bord-defaut);
border-radius: var(--rg-rayon-0);
background: var(--rg-fond-surface);
}
#evModal .suite__ligne:last-of-type,
#icsModal .suite__ligne:last-of-type { border-bottom: 0; }
#evModal .suite__ligne.is-off,
#icsModal .suite__ligne.is-off { opacity: .45; }
#evModal .suite__case,
#icsModal .suite__case { gap: 0; }
#evModal .suite__nom,
#icsModal .suite__nom { font: var(--rg-texte-m-fort); color: var(--rg-texte-principal); }
#evModal .suite__h,
#evModal .suite__d,
#icsModal .suite__h,
#icsModal .suite__d {
width: 100%;
height: var(--rg-btn-s-hauteur);
padding: 0 var(--rg-espace-2);
border: 0;
border-bottom: var(--rg-trait-3) solid var(--rg-bord-fort);
background: var(--rg-fond-page);
font: var(--rg-chiffre-m);
font-variant-numeric: tabular-nums;
text-align: center;
}
#evModal .suite__h:focus,
#evModal .suite__d:focus,
#icsModal .suite__h:focus,
#icsModal .suite__d:focus { border-bottom-color: var(--rg-accent-defaut); }
#evModal .suite__unite,
#icsModal .suite__unite { font: var(--rg-label-s); letter-spacing: var(--rg-label-s-espacement); text-transform: uppercase; color: var(--rg-texte-secondaire); }
#evModal .suite__case,
#icsModal .suite__case { grid-area: c; }
#evModal .suite__pastille,
#icsModal .suite__pastille { grid-area: p; }
#evModal .suite__nom,
#icsModal .suite__nom { grid-area: n; }
#evModal .suite__h,
#icsModal .suite__h { grid-area: h; }
#evModal .suite__d,
#icsModal .suite__d { grid-area: d; }
#evModal .suite__unite,
#icsModal .suite__unite { grid-area: u; }
#evModal .suite__qui,
#icsModal .suite__qui { grid-area: q; }
#evModal .suite__role,
#icsModal .suite__role { height: calc(var(--rg-btn-s-hauteur) - var(--rg-espace-2)); padding: 0 var(--rg-espace-2); font: var(--rg-texte-s); }
#evModal .suite__compte,
#icsModal .suite__compte { margin: var(--rg-espace-3) 0 0; font: var(--rg-label-s); letter-spacing: var(--rg-label-s-espacement); text-transform: uppercase; color: var(--rg-texte-secondaire); }
#evModal .suite__choix,
#icsModal .suite__choix { gap: var(--rg-espace-2); margin-top: var(--rg-espace-4); }
#evModal .suite__ou,
#icsModal .suite__ou { font: var(--rg-label-s); letter-spacing: var(--rg-label-s-espacement); text-transform: uppercase; color: var(--rg-texte-secondaire); }
#evModal .suite__autre,
#icsModal .suite__autre {
height: var(--rg-btn-s-hauteur);
padding: 0 var(--rg-espace-3);
border: var(--rg-trait-1) solid var(--rg-bord-defaut);
border-radius: var(--rg-rayon-0);
background: var(--rg-fond-surface);
font: var(--rg-texte-s-fort);
color: var(--rg-texte-principal);
}
@media (hover: hover) { #evModal .suite__autre:hover,
#icsModal .suite__autre:hover { border-color: var(--rg-accent-defaut); color: var(--rg-accent-defaut); } }
/* Pied */
#evModal .modal__foot,
#icsModal .modal__foot { padding: var(--rg-espace-4) var(--rg-espace-6); border-top: var(--rg-trait-1) solid var(--rg-bord-defaut); background: var(--rg-fond-surface); }
#evModal .modal__foot-right,
#icsModal .modal__foot-right { gap: var(--rg-espace-3); }
#evModal .modal__foot [data-close-ev],
#icsModal .modal__foot [data-close-ev] {
--b-bord: transparent;
--b-fond: transparent;
color: var(--rg-texte-secondaire);
}
@media (hover: hover) { #evModal .modal__foot [data-close-ev]:hover,
#icsModal .modal__foot [data-close-ev]:hover { color: var(--rg-texte-principal); } }
#evModal #evDeleteBtn,
#icsModal #evDeleteBtn { --b-bord: transparent; --b-fond: transparent; padding-inline: 0; color: var(--rg-etat-erreur); }
@media (max-width: 640px) {
#evModal .evf-tete,
#icsModal .evf-tete { padding-left: var(--rg-espace-5); }
.evf-pas { gap: var(--rg-espace-4); padding: 0 var(--rg-espace-5); overflow-x: auto; scrollbar-width: none; }
#evModal .modal__body,
#icsModal .modal__body { padding: var(--rg-espace-5); }
#evModal .suite__ligne,
#icsModal .suite__ligne {
grid-template-columns: auto auto var(--evf-suite-heure) var(--evf-suite-duree) minmax(0, 1fr);
grid-template-areas: "c p n n n" ". . h d u" ". . q q q";
}
#evModal .modal__foot,
#icsModal .modal__foot { padding: var(--rg-espace-3) var(--rg-espace-5); }
}
/* ==========================================================
8. ROADBOOK
Le gabarit du Timetable : bandeau marine, barre de sections,
un bloc fort par section, le reste calme.
========================================================== */
body.rb-fil {
--rb-carte: 330px;
--rb-ligne: 56px;
--rb-trait-l: 11px;
--rb-trait-h: 16px;
--rb-trait-pied: 4px;
--rb-case: 22px;
--rb-photo: 184px;
}
body.rb-fil .rb-retour { display: none; }
body.rb-fil .page-body { padding-bottom: var(--rg-espace-6); }
/* Bandeau : les chiffres à droite */
.rbb__chiffres {
grid-column: 2;
grid-row: 1 / 3;
align-self: center;
display: flex;
flex-direction: column;
gap: var(--rg-espace-3);
padding-left: var(--rg-espace-6);
border-left: var(--rg-trait-1) solid var(--rg-marine-4);
}
.rbb__grand { display: flex; align-items: baseline; gap: var(--rg-espace-3); }
.rbb__grand b { font: var(--rg-display-m); font-size: calc(var(--rg-taille-display-m) * 1.1); line-height: var(--rg-interligne-serre); color: var(--rg-neutre-blanc); }
.rbb__grand span,
.rbb__petits,
.rbb__note { font: var(--rg-label-m); letter-spacing: var(--rg-label-m-espacement); text-transform: uppercase; color: var(--rg-neutre-gris); }
.rbb__petits { display: flex; gap: var(--rg-espace-5); }
.rbb__petits b { font: var(--rg-chiffre-m); color: var(--rg-neutre-blanc); }
/* Barre des sections */
body.rb-fil .rbnav {
display: flex;
gap: var(--rg-espace-6);
max-width: var(--dash-largeur);
margin: 0 auto var(--rg-espace-5);
padding: 0 var(--rg-espace-5);
border: 0;
background: var(--rg-fond-surface);
}
body.rb-fil .rbnav__t {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
height: var(--rb-ligne);
padding: 0 var(--rg-espace-1);
border: 0;
border-radius: var(--rg-rayon-0);
background: none;
font: var(--rg-texte-m-fort);
color: var(--rg-texte-secondaire);
}
@media (hover: hover) { body.rb-fil .rbnav__t:hover { color: var(--rg-texte-principal); } }
body.rb-fil .rbnav__t i { font: var(--rg-chiffre-s); font-style: normal; color: var(--rg-texte-desactive); background: none; padding: 0; }
.rbnav__n { font: var(--rg-label-m); color: var(--rg-texte-desactive); }
body.rb-fil .rbnav__t.is-on { color: var(--rg-texte-principal); background: none; }
body.rb-fil .rbnav__t.is-on .rbnav__n { color: var(--rg-accent-defaut); }
body.rb-fil .rbnav__t.is-on::after {
--h: var(--rg-onglet-indicateur);
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: var(--h);
background: var(--rg-accent-defaut);
clip-path: polygon(calc(var(--h) * var(--rg-pente)) 0, 100% 0, calc(100% - var(--h) * var(--rg-pente)) 100%, 0 100%);
}
/* Sections : un grand titre numéroté, puis le contenu */
body.rb-fil .rbwrap { max-width: var(--dash-largeur); margin-inline: auto; }
body.rb-fil .rb-bloc { margin: 0 0 var(--rg-espace-8); padding: 0; border: 0; background: none; }
body.rb-fil .rbx__h { display: flex; align-items: flex-end; gap: var(--rg-espace-4); margin-bottom: var(--rg-espace-5); }
body.rb-fil .rbx__t { display: flex; align-items: flex-end; gap: var(--rg-espace-4); margin: 0; font: var(--rg-titre-h2); color: var(--rg-texte-principal); }
body.rb-fil .rbx__t span { font: var(--rg-display-m); font-size: calc(var(--rg-taille-display-m) * .7); line-height: var(--rg-interligne-serre); letter-spacing: 0; color: var(--rg-accent-defaut); }
body.rb-fil .rbx__h .btn-secondary,
body.rb-fil .rbx__h .btn-primary {
--b-bord: transparent;
--b-fond: transparent;
height: auto;
padding: 0 0 var(--rg-espace-1);
font: var(--rg-texte-s-fort);
color: var(--rg-texte-principal);
text-decoration: underline;
text-underline-offset: 3px;
}
@media (hover: hover) { body.rb-fil .rbx__h .btn-secondary:hover { color: var(--rg-accent-defaut); } }
body.rb-fil .rbx__big b { font: var(--rg-titre-h2); color: var(--rg-texte-principal); }
body.rb-fil .rbx__big { font: var(--rg-label-m); letter-spacing: var(--rg-label-m-espacement); text-transform: uppercase; color: var(--rg-texte-secondaire); }
body.rb-fil .rbx__k { font: var(--rg-label-m); letter-spacing: var(--rg-label-m-espacement); color: var(--rg-texte-secondaire); }
/* Le bloc fort de chaque section */
.rbjc, .rbdc, .rbcc {
--c-coupe: var(--rg-espace-7);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--rg-espace-2);
padding: var(--rg-espace-5) var(--rg-espace-6) var(--rg-espace-7);
border: 0;
background: var(--rg-fond-structure);
color: var(--rg-neutre-blanc);
text-align: left;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--c-coupe)), calc(100% - var(--c-coupe) * var(--rg-pente)) 100%, 0 100%);
}
.rbjc__t { margin: var(--rg-espace-3) 0 var(--rg-espace-4); font: var(--rg-display-m); font-size: calc(var(--rg-taille-display-m) * .7); color: var(--rg-neutre-blanc); }
.rbjc__l {
width: 100%;
display: grid;
grid-template-columns: var(--rg-espace-7) minmax(0, 1fr) auto;
align-items: baseline;
padding: var(--rg-espace-2) 0;
border: 0;
background: none;
color: var(--rg-neutre-blanc);
text-align: left;
cursor: pointer;
}
.rbjc__k { font: var(--rg-label-m); letter-spacing: var(--rg-label-m-espacement); color: var(--rg-neutre-gris); }
.rbjc__l b { font: var(--rg-texte-m-fort); }
.rbjc__h { font: var(--rg-chiffre-m); font-size: calc(var(--rg-taille-chiffre-m) * 1.3); }
body.rb-fil .rbwrap .rbdc { color: var(--rg-neutre-blanc); cursor: pointer; }
body.rb-fil .rbwrap .rbjc__l { color: var(--rg-neutre-blanc); }
.rbdc__k { font: var(--rg-label-m); letter-spacing: var(--rg-label-m-espacement); text-transform: uppercase; color: var(--rg-neutre-gris); }
.rbdc__h { margin-top: var(--rg-espace-2); font: var(--rg-display-m); font-size: calc(var(--rg-taille-display-m) * .9); line-height: var(--rg-interligne-serre); }
.rbdc__j { font: var(--rg-label-m); letter-spacing: var(--rg-label-m-espacement); color: var(--rg-accent-defaut); }
.rbdc__r { margin-top: var(--rg-espace-4); font: var(--rg-texte-m-fort); font-size: var(--rg-taille-texte-l); }
.rbcc__n { display: flex; align-items: baseline; gap: var(--rg-espace-3); margin: var(--rg-espace-4) 0 0; }
.rbcc__n b { font: var(--rg-display-m); font-size: calc(var(--rg-taille-display-m) * 1.25); line-height: var(--rg-interligne-serre); }
.rbcc__n span { font: var(--rg-texte-m-fort); color: var(--rg-neutre-gris); }
/* 01 Days */
.rbj { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rg-espace-5); align-items: start; }
.rbj--auj { grid-template-columns: var(--rb-carte) minmax(0, 1fr); }
body.rb-fil .rbxh { border-radius: var(--rg-rayon-0); background: var(--rg-fond-surface); box-shadow: none; padding: var(--rg-espace-2) 0; }
body.rb-fil .rbxh__hd { background: none; border-bottom: var(--rg-trait-1) solid var(--rg-bord-defaut); font: var(--rg-label-s); letter-spacing: var(--rg-label-s-espacement); color: var(--rg-texte-secondaire); }
body.rb-fil .rbxh__r { position: relative; min-height: var(--rb-ligne); border-bottom: var(--rg-trait-1) solid var(--rg-fond-page); }
body.rb-fil .rbxh__r.is-course .rbxh__d { background: none; }
body.rb-fil .rbxh__d b { font: var(--rg-titre-h3); }
body.rb-fil .rbxh__d em { font: var(--rg-label-s); color: var(--rg-texte-secondaire); }
body.rb-fil .rbxh__auj { display: none; }
body.rb-fil .rbxh__r.is-auj { box-shadow: none; background: var(--rg-fond-page); }
body.rb-fil .rbxh__r.is-auj::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--ttl-direct, 6px); background: var(--rg-accent-defaut); }
body.rb-fil .rbxh__r.is-auj .rbxh__d b { color: var(--rg-accent-defaut); }
body.rb-fil .rbxh__r.is-passe > * { opacity: .4; }
body.rb-fil .rbxh__b {
--c: var(--rg-texte-desactive);
position: relative;
min-height: 0;
padding: var(--rg-espace-2) var(--rg-espace-3) var(--rg-espace-2) calc(var(--rb-trait-l) + var(--rg-espace-5));
border-radius: var(--rg-rayon-0);
background: none;
filter: none;
}
body.rb-fil .rbxh__b::before {
content: "";
position: absolute;
left: var(--rg-espace-2);
top: 50%;
width: var(--rb-trait-l);
height: var(--rb-trait-h);
transform: translateY(-50%);
background: var(--c);
clip-path: polygon(calc(100% - var(--rb-trait-pied)) 0, 100% 0, var(--rb-trait-pied) 100%, 0 100%);
}
@media (hover: hover) { body.rb-fil .rbxh__b:hover { background: var(--rg-fond-surface-2); } }
body.rb-fil .rbxh__b b { font: var(--rg-texte-m-fort); color: var(--rg-texte-principal); }
body.rb-fil .rbxh__b em { font: var(--rg-texte-s); color: var(--rg-texte-secondaire); }
body.rb-fil .rbxh__b.is-vide { outline: 0; }
body.rb-fil .rbxh__b.is-vide::before { display: none; }
body.rb-fil .rbxh__b.is-vide b { color: var(--rg-texte-desactive); font-weight: var(--rg-graisse-regulier); }
body.rb-fil .rbxh__b--travel { --c: var(--rg-marine-0); }
body.rb-fil .rbxh__b--instal { --c: var(--rg-metier-jaune); }
body.rb-fil .rbxh__b--essais { --c: var(--rg-piste-orange); }
body.rb-fil .rbxh__b--fp,
body.rb-fil .rbxh__b--qualif,
body.rb-fil .rbxh__b--race,
body.rb-fil .rbxh__b--course { --c: var(--rg-piste-rouge); }
body.rb-fil .rbxh__pill {
width: var(--rb-case);
height: var(--rb-case);
border-radius: var(--rg-rayon-0);
background: none;
box-shadow: none;
font: var(--rg-label-s);
color: var(--rg-texte-desactive) !important;
}
body.rb-fil .rbxh__pill.is-oui { background: var(--rg-texte-principal); box-shadow: none; color: var(--rg-texte-inverse) !important; }
body.rb-fil .rbxh__pill.is-non { text-decoration: line-through; color: var(--rg-texte-secondaire) !important; }
body.rb-fil .rbxh__band {
position: relative;
margin: 0;
padding-left: var(--rg-espace-6);
border-radius: var(--rg-rayon-0);
background: none;
font: var(--rg-label-s);
letter-spacing: var(--rg-label-s-espacement);
text-transform: uppercase;
color: var(--rg-texte-secondaire) !important;
}
body.rb-fil .rbxh__band.is-on { background: none; }
body.rb-fil .rbxh__bt { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
body.rb-fil .rbxh__band.is-on::before {
content: "";
position: absolute;
left: calc(var(--rg-espace-2) + var(--rg-trait-3) * 2);
top: 0;
bottom: 0;
width: var(--rg-trait-3);
background: var(--rg-texte-principal);
}
body.rb-fil .rbxh__band.is-in::before { top: 50%; }
body.rb-fil .rbxh__band.is-out::before { bottom: 50%; }
body.rb-fil .rbxh__band.is-in::after,
body.rb-fil .rbxh__band.is-out::after {
content: "";
position: absolute;
left: var(--rg-espace-2);
top: 50%;
width: var(--rg-espace-4);
height: var(--rg-espace-4);
box-sizing: border-box;
transform: translateY(-50%);
border: var(--rg-trait-3) solid var(--rg-texte-principal);
background: var(--rg-fond-surface);
}
body.rb-fil .rbxh__band.is-in, body.rb-fil .rbxh__band.is-out { margin: 0; }
@media (hover: hover) { body.rb-fil .rbxh__band:not(.is-on):hover { margin: 0; border-radius: var(--rg-rayon-0); background: var(--rg-fond-surface-2); } }
/* 02 Crew (en attendant sa refonte) */
body.rb-fil .rbxs__c { border-radius: var(--rg-rayon-0); box-shadow: none; background: var(--rg-fond-surface); padding: var(--rg-espace-5); }
body.rb-fil .rbxs__ch b { font: var(--rg-titre-h3); }
body.rb-fil .rbxs__pill {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
padding: 0;
border-radius: var(--rg-rayon-0);
background: none;
font: var(--rg-label-m);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--rg-texte-secondaire);
}
body.rb-fil .rbxs__pill::before {
content: "";
width: var(--rb-trait-l);
height: var(--rb-trait-h);
background: var(--c, var(--rg-texte-desactive));
clip-path: polygon(calc(100% - var(--rb-trait-pied)) 0, 100% 0, var(--rb-trait-pied) 100%, 0 100%);
}
body.rb-fil .rbxs__pill--dr { --c: var(--rg-piste-rouge); }
body.rb-fil .rbxs__pill--ma { --c: var(--rg-metier-violet); }
body.rb-fil .rbxs__pill--en { --c: var(--rg-marine-0); }
body.rb-fil .rbxs__pill--ga { --c: var(--rg-piste-orange); }
body.rb-fil .rbxs__c--dr { background: var(--rg-fond-structure); color: var(--rg-neutre-blanc); }
body.rb-fil .rbxs__c--dr .rbxs__pill { color: var(--rg-neutre-gris); }
body.rb-fil .rbxs__tile { border: 0; border-radius: var(--rg-rayon-0); background: none; align-items: flex-start; color: var(--rg-neutre-blanc); }
body.rb-fil .rbxs__tile b { font: var(--rg-display-m); color: var(--rg-neutre-blanc); }
body.rb-fil .rbxs__tile span { font: var(--rg-texte-m-fort); }
body.rb-fil .rbxs__p i { border-radius: var(--rg-rayon-0); box-shadow: none; background: var(--rg-bord-defaut); color: var(--rg-texte-principal); font: var(--rg-label-s); }
body.rb-fil .rbxs__p.is-hors i { border: var(--rg-trait-2) dashed var(--rg-texte-desactive); background: none; }
body.rb-fil .rbxs__p { font: var(--rg-texte-m); }
/* 03 Travel */
body.rb-fil .rbxt { gap: var(--rg-espace-5); align-items: stretch; }
body.rb-fil .rbxt:has(.rbdc) { grid-template-columns: var(--rb-carte) repeat(2, minmax(0, 1fr)); }
body.rb-fil .rbxt__way {
padding: var(--rg-espace-5) var(--rg-espace-6);
border-top: var(--rg-trait-4) solid var(--rg-bord-defaut);
border-radius: var(--rg-rayon-0);
box-shadow: none;
background: var(--rg-fond-surface);
}
body.rb-fil .rbxt__way.is-prochain { border-top-color: var(--rg-texte-principal); }
body.rb-fil .rbxt__way.is-fait { opacity: .45; }
body.rb-fil .rbxt__wh { align-items: center; justify-content: flex-start; gap: var(--rg-espace-3); }
body.rb-fil .rbxt__wh b { font: var(--rg-titre-h3); }
body.rb-fil .rbxt__wh span { margin-left: auto; text-align: right; font: var(--rg-label-s); letter-spacing: var(--rg-label-s-espacement); color: var(--rg-texte-secondaire); }
.rbxt__etat { padding: 0 var(--rg-espace-2); font: var(--rg-label-s); font-style: normal; letter-spacing: var(--rg-label-s-espacement); text-transform: uppercase; color: var(--rg-texte-secondaire); }
.rbxt__etat.is-next { background: var(--rg-texte-principal); color: var(--rg-texte-inverse); line-height: var(--rg-interligne-texte); }
body.rb-fil .rbxt__hr { font: var(--rg-chiffre-m); }
body.rb-fil .rbxt__dot::before { border-radius: var(--rg-rayon-0); border-width: var(--rg-trait-3); }
body.rb-fil .rbxt__st--nuit .rbxt__dot::before { background: var(--rg-texte-principal); border-color: var(--rg-texte-principal); }
body.rb-fil .rbxt__dot i { width: var(--rg-trait-3); background: var(--rg-texte-principal); }
body.rb-fil .rbxt__pl b { font: var(--rg-texte-m-fort); }
body.rb-fil .rbxt__pl em { font: var(--rg-texte-s); color: var(--rg-texte-secondaire); }
body.rb-fil .rbxt__tag { border-radius: var(--rg-rayon-0); background: none; padding: 0; font: var(--rg-label-s); letter-spacing: var(--rg-label-s-espacement); text-transform: uppercase; color: var(--rg-texte-secondaire); }
body.rb-fil .rbxt__st--nuit .rbxt__tag { background: var(--rg-fond-page); color: var(--rg-texte-principal); padding: var(--rg-espace-1) var(--rg-espace-2); }
body.rb-fil .rbxt__vh { margin: var(--rg-espace-7) 0 var(--rg-espace-4); }
body.rb-fil .rbxv__g { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--rg-espace-4); align-items: start; }
body.rb-fil .rbxv { border-radius: var(--rg-rayon-0); box-shadow: none; background: var(--rg-fond-surface); }
body.rb-fil .rbxv.is-moi { box-shadow: none; }
body.rb-fil .rbxv__hd { gap: var(--rg-espace-3); padding: var(--rg-espace-5) var(--rg-espace-5) 0; background: none; color: var(--rg-texte-principal); }
body.rb-fil .rbxv__l1 b { font: var(--rg-titre-h3); }
body.rb-fil .rbxv__fill { font: var(--rg-chiffre-s); font-weight: var(--rg-graisse-gras); color: var(--rg-texte-principal); }
body.rb-fil .rbxv__seats { gap: var(--rg-espace-1); }
body.rb-fil .rbxv__seats i {
flex: 1;
max-width: var(--rg-espace-4);
height: var(--rg-espace-2);
border-radius: var(--rg-rayon-0);
background: var(--rg-bord-defaut);
clip-path: polygon(var(--rg-espace-1) 0, 100% 0, calc(100% - var(--rg-espace-1)) 100%, 0 100%);
}
body.rb-fil .rbxv__seats i.is-on { background: var(--rg-texte-principal); }
body.rb-fil .rbxv__seats i.is-trop { background: var(--rg-etat-erreur); }
body.rb-fil .rbxv__body { padding: var(--rg-espace-3) var(--rg-espace-5) var(--rg-espace-5); }
body.rb-fil .rbxv__ul li { justify-content: flex-start; gap: var(--rg-espace-2); padding: var(--rg-espace-1) 0; border: 0; font: var(--rg-texte-s); color: var(--rg-texte-principal); }
body.rb-fil .rbxv__ul li.is-respo, body.rb-fil .rbxv__ul li.is-cleemy { font-weight: var(--rg-graisse-regulier); color: var(--rg-texte-principal); }
body.rb-fil .rbxv__ul li > span { overflow: hidden; text-overflow: ellipsis; }
.rbxv__r { flex: none; padding: 0 var(--rg-espace-1); font: var(--rg-label-s); font-style: normal; line-height: var(--rg-interligne-texte); text-transform: uppercase; }
.rbxv__r--frais { background: var(--rg-texte-principal); color: var(--rg-texte-inverse); }
.rbxv__r--cle { border: var(--rg-trait-2) solid var(--rg-texte-principal); line-height: var(--rg-interligne-fort); color: var(--rg-texte-principal); }
body.rb-fil .rbxv__ul em { margin-left: auto; padding: 0 var(--rg-espace-1); background: color-mix(in srgb, var(--rg-piste-orange) 16%, var(--rg-fond-surface)); font: var(--rg-label-s); color: var(--rg-piste-orange); }
body.rb-fil .rbxv__ul li.is-piste { color: var(--rg-texte-principal); font-weight: var(--rg-graisse-regulier); }
/* 04 Hotel */
body.rb-fil .rbxo__ban {
--c-coupe: var(--rg-espace-7);
gap: var(--rg-espace-7);
padding: var(--rg-espace-6) calc(var(--c-coupe) + var(--rg-espace-5)) var(--rg-espace-6) var(--rg-espace-6);
border-radius: var(--rg-rayon-0);
background: var(--rg-fond-structure);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--c-coupe)), calc(100% - var(--c-coupe) * var(--rg-pente)) 100%, 0 100%);
}
body.rb-fil .rbxo__id b { font: var(--rg-display-m); font-size: calc(var(--rg-taille-display-m) * .7); }
body.rb-fil .rbxo__id span { font: var(--rg-texte-s); color: var(--rg-neutre-gris); }
body.rb-fil .rbxo__kpi { display: none; }
body.rb-fil .rbxo__io { gap: var(--rg-espace-6); }
body.rb-fil .rbxo__io i {
display: flex;
flex-direction: column;
padding: 0;
border-radius: var(--rg-rayon-0);
background: none;
font: var(--rg-chiffre-m);
color: var(--rg-neutre-blanc);
}
body.rb-fil .rbxo__io .is-in, body.rb-fil .rbxo__io .is-out { background: none; color: var(--rg-neutre-blanc); }
body.rb-fil .rbxo__photo { border-radius: var(--rg-rayon-0); }
body.rb-fil .rbxo__gh i { width: var(--rb-trait-l); height: var(--rb-trait-h); border-radius: var(--rg-rayon-0); clip-path: polygon(calc(100% - var(--rb-trait-pied)) 0, 100% 0, var(--rb-trait-pied) 100%, 0 100%); }
body.rb-fil .rbxo__gp { --gp: var(--rg-marine-0); }
body.rb-fil .rbxo__gp--dr { --gp: var(--rg-piste-rouge); }
body.rb-fil .rbxo__gh b { font: var(--rg-label-m); letter-spacing: var(--rg-label-m-espacement); }
body.rb-fil .rbxo__gh span { font: var(--rg-texte-s); color: var(--rg-texte-secondaire); }
body.rb-fil .rbxo__grid { display: flex; flex-direction: column; gap: 0; background: var(--rg-fond-surface); }
body.rb-fil .rbxo__r {
display: grid;
grid-template-columns: 180px minmax(0, 1fr) minmax(0, 360px);
align-items: center;
gap: var(--rg-espace-5);
min-height: var(--rb-ligne);
padding: var(--rg-espace-2) var(--rg-espace-5);
border: 0;
border-bottom: var(--rg-trait-1) solid var(--rg-fond-page);
border-radius: var(--rg-rayon-0);
box-shadow: none;
background: none;
text-align: left;
}
@media (hover: hover) { body.rb-fil .rbxo__r:hover { background: var(--rg-fond-surface-2); } }
body.rb-fil .rbxo__r.is-moi { box-shadow: none; }
body.rb-fil .rbxo__rh { display: flex; align-items: center; gap: var(--rg-espace-3); }
body.rb-fil .rbxo__ty { padding: 0; border-radius: var(--rg-rayon-0); background: none; font: var(--rg-label-m); letter-spacing: var(--rg-label-m-espacement); text-transform: uppercase; color: var(--rg-texte-secondaire); }
body.rb-fil .rbxo__beds { display: none; }
body.rb-fil .rbxo__fill { font: var(--rg-chiffre-s); color: var(--rg-texte-desactive); }
body.rb-fil .rbxo__ppl { display: flex; flex-wrap: wrap; gap: var(--rg-espace-1) var(--rg-espace-5); }
body.rb-fil .rbxo__pp { display: inline-flex; align-items: center; gap: var(--rg-espace-2); font: var(--rg-texte-m); }
body.rb-fil .rbxo__pp i { border-radius: var(--rg-rayon-0); box-shadow: none; background: var(--rg-bord-defaut); font: var(--rg-label-s); color: var(--rg-texte-principal); }
body.rb-fil .rbxo__pp i.is-dr { background: var(--rg-texte-principal); color: var(--rg-texte-inverse); }
body.rb-fil .rbxo__n { display: grid; gap: 0; }
body.rb-fil .rbxo__n i {
height: var(--rg-espace-3);
border-radius: var(--rg-rayon-0);
background: none;
font-size: 0;
border-bottom: var(--rg-trait-1) dashed var(--rg-bord-defaut);
}
body.rb-fil .rbxo__n i.is-on { background: var(--rg-texte-principal); border: 0; }
body.rb-fil .rbxo__add { border-radius: var(--rg-rayon-0); border: 0; min-height: var(--rb-ligne); background: none; font: var(--rg-texte-s-fort); color: var(--rg-texte-secondaire); text-align: left; padding: 0 var(--rg-espace-5); }
@media (hover: hover) { body.rb-fil .rbxo__add:hover { color: var(--rg-accent-defaut); } }
body.rb-fil .rbx__leg { margin-top: var(--rg-espace-4); }
body.rb-fil .rbxo__sans {
position: relative;
display: block;
width: 100%;
padding: var(--rg-espace-4) var(--rg-espace-5) var(--rg-espace-4) var(--rg-espace-6);
border-radius: var(--rg-rayon-0);
background: var(--rg-fond-surface);
font: var(--rg-texte-s);
color: var(--rg-texte-principal);
}
body.rb-fil .rbxo__sans::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--ttl-direct, 6px); background: var(--rg-etat-attention); }
/* 05 Catering */
body.rb-fil .rbxc__desk--carte { display: grid; grid-template-columns: var(--rb-carte) minmax(0, 1fr); gap: var(--rg-espace-5); align-items: start; }
body.rb-fil .rbxc__w { overflow-x: auto; background: var(--rg-fond-surface); border-radius: var(--rg-rayon-0); box-shadow: none; }
body.rb-fil .rbxc__hd { background: none; border-bottom: var(--rg-trait-1) solid var(--rg-bord-defaut); }
body.rb-fil .rbxc__dj { background: none !important; }
body.rb-fil .rbxc__dj b { font: var(--rg-label-m); letter-spacing: var(--rg-label-m-espacement); text-transform: uppercase; color: var(--rg-texte-principal); }
body.rb-fil .rbxc__dj button { border-radius: var(--rg-rayon-0); background: none; font: var(--rg-label-s); color: var(--rg-texte-desactive); }
body.rb-fil .rbxc__dj button.is-on { color: var(--rg-texte-principal); }
body.rb-fil .rbxc__gt { background: none; font: var(--rg-label-m); letter-spacing: var(--rg-label-m-espacement); color: var(--rg-texte-secondaire); }
body.rb-fil .rbxc__gt i { border-radius: var(--rg-rayon-0); }
body.rb-fil .rbxc__r { border-bottom: var(--rg-trait-1) solid var(--rg-fond-page); background: none !important; }
body.rb-fil .rbxc__r--all .rbxc__nm { font: var(--rg-label-m); letter-spacing: var(--rg-label-m-espacement); text-transform: uppercase; }
body.rb-fil .rbxc__nm { font: var(--rg-texte-s); }
body.rb-fil .rbxc__k { background: none !important; }
body.rb-fil .rbxc__k svg {
width: var(--rb-case);
height: var(--rb-case);
padding: var(--rg-espace-1);
box-sizing: border-box;
border-radius: var(--rg-rayon-0);
background: none;
box-shadow: none;
color: transparent;
}
body.rb-fil .rbxc__k.is-on svg { background: var(--rg-texte-principal); box-shadow: none; color: var(--rg-texte-inverse); }
body.rb-fil .rbxc__k.is-mi svg { background: var(--rg-texte-desactive); box-shadow: none; color: var(--rg-texte-inverse); }
body.rb-fil .rbxc__more { background: none; font: var(--rg-texte-s); color: var(--rg-texte-secondaire); }
body.rb-fil .rbxc__tot { background: var(--rg-fond-structure); color: var(--rg-neutre-blanc); }
body.rb-fil .rbxc__tot b { font: var(--rg-chiffre-m); color: var(--rg-neutre-blanc); }
body.rb-fil .rbxc__tot b.is-zero { color: var(--rg-marine-3); }
body.rb-fil .rbxc__note { border: 0; background: none; box-shadow: none; font: var(--rg-texte-s); color: var(--rg-texte-secondaire); }
/* 06 Files */
body.rb-fil .rbxf__drop {
--c-coupe: var(--rg-espace-6);
border: 0;
border-radius: var(--rg-rayon-0);
background: var(--rg-fond-structure);
color: var(--rg-neutre-blanc);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--c-coupe)), calc(100% - var(--c-coupe) * var(--rg-pente)) 100%, 0 100%);
}
body.rb-fil .rbxf__drop .btn-secondary { --b-bord: var(--rg-neutre-blanc); --b-fond: var(--rg-fond-structure); color: var(--rg-neutre-blanc); }
body.rb-fil .rbxf__ico { border-radius: var(--rg-rayon-0); background: var(--rg-marine-4); color: var(--rg-accent-defaut); }
body.rb-fil .rbxf__dt span { color: var(--rg-neutre-gris); }
body.rb-fil .rbxf__chips button { border-radius: var(--rg-rayon-0); }
body.rb-fil .rbxf { border-radius: var(--rg-rayon-0); box-shadow: none; background: var(--rg-fond-surface); }
body.rb-fil .rbxf__x { border-radius: var(--rg-rayon-0); }
body.rb-fil .rbxf__b { border-radius: var(--rg-rayon-0); }
/* La liste des roadbooks */
body.rb-fil .rbl__barre { max-width: var(--dash-largeur); margin: 0 auto var(--rg-espace-4); }
body.rb-fil .rbl { max-width: var(--dash-largeur); margin: 0 auto; gap: 0; background: var(--rg-fond-surface); }
body.rb-fil .rbl__i {
min-height: 104px;
padding: 0 var(--rg-espace-5) 0 0;
border: 0;
border-bottom: var(--rg-trait-1) solid var(--rg-fond-page);
border-radius: var(--rg-rayon-0);
box-shadow: none;
background: none;
transform: none;
}
@media (hover: hover) { body.rb-fil .rbl__i:hover { background: var(--rg-fond-surface-2); } }
body.rb-fil .rbl__cover {
align-self: stretch;
width: var(--rb-photo);
height: auto;
border-radius: var(--rg-rayon-0);
background-color: var(--rg-marine-4);
clip-path: polygon(0 0, 100% 0, calc(100% - var(--rg-espace-5)) 100%, 0 100%);
}
body.rb-fil .rbl__nom { font: var(--rg-texte-m-fort); font-size: var(--rg-taille-texte-l); }
body.rb-fil .rbl__meta { font: var(--rg-label-s); letter-spacing: var(--rg-label-s-espacement); text-transform: uppercase; color: var(--rg-texte-secondaire); }
body.rb-fil .rbl__n b { font: var(--rg-chiffre-m); }
body.rb-fil .rbl__etat { border-radius: var(--rg-rayon-0); font: var(--rg-label-s); letter-spacing: var(--rg-label-s-espacement); text-transform: uppercase; }
@media (max-width: 1180px) {
.rbb__chiffres { display: none; }
.rbj--auj, body.rb-fil .rbxc__desk--carte { grid-template-columns: minmax(0, 1fr); }
body.rb-fil .rbxt:has(.rbdc) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.rb-fil .rbxt .rbdc { grid-column: 1 / -1; }
}
/* En sombre, le bloc fort se détache du panneau voisin */
:root:not([data-theme="light"]) .rbjc,
:root:not([data-theme="light"]) .rbdc,
:root:not([data-theme="light"]) .rbcc,
:root:not([data-theme="light"]) body.rb-fil .rbxo__ban,
:root:not([data-theme="light"]) body.rb-fil .rbxf__drop { background: var(--rg-fond-surface-2); }
/* Roadbook sur téléphone : le bandeau se resserre, le reste garde « moi d'abord » */
@media (max-width: 720px) {
body.rb-fil .rbb .ttb__outils,
body.rb-fil .rbb__chiffres { display: none; }
body.rb-fil .rbnav {
max-width: none;
gap: var(--rg-espace-5);
margin: 0 calc(var(--rg-espace-4) * -1) var(--rg-espace-5);
padding: 0 var(--rg-espace-4);
overflow-x: auto;
scrollbar-width: none;
}
body.rb-fil .rbnav__t { flex: none; }
body.rb-fil .rbx__t { font: var(--rg-titre-h3); gap: var(--rg-espace-3); }
body.rb-fil .rbx__t span { font-size: calc(var(--rg-taille-display-m) * .5); }
body.rb-fil .rbx__h { flex-wrap: wrap; }
body.rb-fil .rbj--auj { grid-template-columns: minmax(0, 1fr); }
body.rb-fil .rbxh__d b { color: var(--rg-texte-principal); }
body.rb-fil .rbxh__r.is-auj .rbxh__d b { color: var(--rg-accent-defaut); }
body.rb-fil .rbxh__r { background: var(--rg-fond-surface); border-radius: var(--rg-rayon-0); box-shadow: none; }
body.rb-fil .rbxh__band { padding-left: var(--rg-espace-5); }
body.rb-fil .rbxme {
--c-coupe: var(--rg-espace-6);
border-radius: var(--rg-rayon-0);
background: var(--rg-fond-structure);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--c-coupe)), calc(100% - var(--c-coupe) * var(--rg-pente)) 100%, 0 100%);
padding-bottom: var(--rg-espace-6);
}
body.rb-fil .rbxme--ask { clip-path: none; background: var(--rg-fond-surface); padding-bottom: var(--rg-espace-3); }
body.rb-fil .rbxme__k { font: var(--rg-label-m); letter-spacing: var(--rg-label-m-espacement); color: var(--rg-accent-defaut); }
body.rb-fil .rbxme__veh b { font: var(--rg-titre-h2); }
body.rb-fil .rbxme__veh span,
body.rb-fil .rbxme__box,
body.rb-fil .rbxme__nights span { border-radius: var(--rg-rayon-0); }
body.rb-fil .rbxme__nights span.is-on { background: var(--rg-neutre-blanc); color: var(--rg-marine-5); }
body.rb-fil .rbxv__g,
body.rb-fil .rbxo__grid { border-radius: var(--rg-rayon-0); box-shadow: none; }
body.rb-fil .rbxo__r { grid-template-columns: minmax(0, 1fr); gap: var(--rg-espace-2); padding: var(--rg-espace-3) var(--rg-espace-4); }
body.rb-fil .rbxo__ban { padding: var(--rg-espace-5) var(--rg-espace-7) var(--rg-espace-5) var(--rg-espace-5); }
body.rb-fil .rbxo__id b { font: var(--rg-titre-h2); }
body.rb-fil .rbxt__way { padding: var(--rg-espace-4); }
body.rb-fil .rbl__cover { width: calc(var(--rb-photo) * .5); }
}
body.rb-fil .rbwrap .rbxo__id,
body.rb-fil .rbwrap .rbxo__id b { color: var(--rg-neutre-blanc) !important; }
body.rb-fil .rbxme__who .is-respo,
body.rb-fil .rbxme__who .is-cleemy { color: var(--rg-neutre-blanc); }
@media (max-width: 720px) {
body.rb-fil .rbx__h { justify-content: flex-start; }
body.rb-fil .rbx__h .rbx__t { flex: 1 0 100%; }
}
body.rb-fil .rbl__barre .bil-compte { display: none; }
@media (max-width: 1180px) {
body.rb-fil .rbnav { overflow-x: auto; scrollbar-width: none; }
body.rb-fil .rbnav__t { flex: none; }
}
/* Une section à la fois, et elle tient dans l'écran */
body.rb-fil .rbwrap[data-rb-actif="jours"] > :not([data-rbsec="jours"]),
body.rb-fil .rbwrap[data-rb-actif="equipe"] > :not([data-rbsec="equipe"]),
body.rb-fil .rbwrap[data-rb-actif="trajets"] > :not([data-rbsec="trajets"]),
body.rb-fil .rbwrap[data-rb-actif="hotels"] > :not([data-rbsec="hotels"]),
body.rb-fil .rbwrap[data-rb-actif="repas"] > :not([data-rbsec="repas"]),
body.rb-fil .rbwrap[data-rb-actif="pieces"] > :not([data-rbsec="pieces"]) { display: none; }
@media (min-width: 721px) {
body.rb-fil {
--rb-min: 440px;
--rb-dispo: max(var(--rb-min), calc(100vh - var(--ttb-hauteur) - var(--rb-ligne) - 2 * var(--rg-espace-5) - var(--rg-espace-6)));
}
body.rb-fil .rbwrap > .rb-bloc { display: flex; flex-direction: column; height: var(--rb-dispo); margin: 0; }
body.rb-fil .rbwrap > .rb-bloc > .rbx__h { flex: none; margin-bottom: var(--rg-espace-4); }
.rbsec__corps { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
[data-rbsec="jours"] > .rbsec__corps,
[data-rbsec="repas"] > .rbsec__corps { overflow: hidden; display: flex; flex-direction: column; }
body.rb-fil .rbj { flex: 1; min-height: 0; }
body.rb-fil .rbj > .rbxh { position: relative; max-height: 100%; overflow-y: auto; scrollbar-width: thin; }
body.rb-fil .rbxh__hd { position: sticky; top: 0; z-index: 2; background: var(--rg-fond-surface); }
body.rb-fil .rbxc__desk { flex: 1; min-height: 0; }
body.rb-fil .rbxc__w { max-height: 100%; overflow: auto; scrollbar-width: thin; }
body.rb-fil .rbxc__hd { position: sticky; top: 0; z-index: 2; background: var(--rg-fond-surface); }
body.rb-fil .rbxc__tot { position: sticky; bottom: 0; z-index: 2; }
}
body.rb-fil .ttw__etat .ttw__avance { color: var(--rg-texte-secondaire); }
@media (max-width: 720px) {
body.rb-fil { --ttw-colonnes: var(--ttw-photo) minmax(0, 1fr); --ttw-photo: 72px; --ttw-hauteur: 88px; }
body.rb-fil .ttw { row-gap: var(--rg-espace-2); padding-right: var(--rg-espace-4); }
body.rb-fil .ttw__photo { grid-row: 1 / 3; }
body.rb-fil .ttw__etat { grid-column: 2; flex-direction: row; align-items: center; padding-bottom: var(--rg-espace-3); }
body.rb-fil .ttw__act,
body.rb-fil .ttw--tete { display: none; }
body.rb-fil .ttw__nom { padding-top: var(--rg-espace-3); }
body.rb-fil .ttwl__cherche { width: 100%; }
body.rb-fil .ttwl { gap: var(--rg-espace-3); }
}
/* Hotel : les nuits nommées au-dessus des barres */
.rbxo__jours {
display: grid;
grid-template-columns: 180px minmax(0, 1fr) minmax(0, 360px);
align-items: end;
gap: var(--rg-espace-5);
padding: var(--rg-espace-3) var(--rg-espace-5) var(--rg-espace-2);
border-bottom: var(--rg-trait-1) solid var(--rg-bord-defaut);
font: var(--rg-label-s);
letter-spacing: var(--rg-label-s-espacement);
text-transform: uppercase;
color: var(--rg-texte-secondaire);
}
.rbxo__nj { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--rg-espace-1); }
.rbxo__nj i { display: flex; flex-direction: column; align-items: center; font-style: normal; }
.rbxo__nj b { font: var(--rg-chiffre-s); font-weight: var(--rg-graisse-gras); color: var(--rg-texte-principal); }
.rbxo__nj i.is-passe, .rbxo__nj i.is-passe b { color: var(--rg-texte-desactive); }
.rbxo__nj i.is-auj, .rbxo__nj i.is-auj b { color: var(--rg-accent-defaut); }
body.rb-fil .rbxo__n { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--rg-espace-1); }
body.rb-fil .rbxo__n i { clip-path: polygon(var(--rg-espace-1) 0, 100% 0, calc(100% - var(--rg-espace-1)) 100%, 0 100%); }
body.rb-fil .rbxo__n i:not(.is-on) { background: var(--rg-fond-page); border: 0; }
body.rb-fil .rbxo__n i.is-on.is-passe { background: var(--rg-texte-desactive); }
body.rb-fil .rbxo__n i.is-on.is-auj { background: var(--rg-accent-defaut); }
/* Crew : la bande des pilotes, une case égale par voiture */
body.rb-fil .rbxs__c--dr { gap: var(--rg-espace-4); }
body.rb-fil .rbxs__c--dr .rbxs__ch { justify-content: flex-start; gap: var(--rg-espace-3); }
body.rb-fil .rbxs__c--dr .rbxs__ch b { font: var(--rg-chiffre-s); font-weight: var(--rg-graisse-gras); color: var(--rg-neutre-gris); }
body.rb-fil .rbxs__num { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; gap: 0; }
body.rb-fil .rbxs__tile {
min-height: 0;
gap: var(--rg-espace-2);
padding: 0 var(--rg-espace-5);
border-left: var(--rg-trait-1) solid var(--rg-marine-4);
}
body.rb-fil .rbxs__tile:first-child { padding-left: 0; border-left: 0; }
body.rb-fil .rbxs__tile b { font-size: calc(var(--rg-taille-display-m) * .85); line-height: var(--rg-interligne-serre); }
@media (hover: hover) { body.rb-fil .rbxs__tile:hover span { color: var(--rg-accent-defaut); } }
@media (max-width: 720px) {
.rbxo__jours { display: none; }
body.rb-fil .rbxo__n i { height: var(--rg-espace-5); display: grid; place-items: center; font: var(--rg-label-s); color: var(--rg-texte-secondaire); clip-path: none; }
body.rb-fil .rbxo__n i.is-on { color: var(--rg-texte-inverse); }
body.rb-fil .rbxs__num { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--rg-espace-4); }
body.rb-fil .rbxs__tile:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
}
body.rb-fil .rbxs__c { min-width: 0; overflow: hidden; }
body.rb-fil .rbxs__pill { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ==========================================================
9. FICHES DU ROADBOOK
La grammaire de la fenêtre événement : en-tête marine coupé,
blocs numérotés, cases et segments de la charte.
========================================================== */
#rbFicheModal { --rbfi-coupe: var(--rg-espace-7); }
#rbFicheModal .modal { background: var(--rg-fond-page); }
#rbFicheModal .modal::after { display: none; }
#rbFicheModal .rbfi-tete {
position: relative;
isolation: isolate;
align-items: flex-start;
padding: var(--rg-espace-5) var(--rg-espace-5) var(--rg-espace-7) var(--rg-espace-6);
border-bottom: 0;
background: none;
}
#rbFicheModal .rbfi-tete::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--rg-fond-structure);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--rbfi-coupe)), calc(100% - var(--rbfi-coupe) * var(--rg-pente)) 100%, 0 100%);
}
#rbFicheModal .rbfi-tete::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--rg-accent-defaut);
clip-path: polygon(calc(100% - var(--rbfi-coupe) * var(--rg-pente) * 0.58) 100%, 100% calc(100% - var(--rbfi-coupe) * 0.58),
100% calc(100% - var(--rbfi-coupe) * 0.43), calc(100% - var(--rbfi-coupe) * var(--rg-pente) * 0.43) 100%);
}
.rbfi-tete__texte { min-width: 0; display: flex; flex-direction: column; gap: var(--rg-espace-1); }
.rbfi-tete__sur {
margin: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font: var(--rg-label-m);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--rg-accent-defaut);
}
#rbFicheModal .modal__title { font: var(--rg-titre-h2); color: var(--rg-neutre-blanc); }
#rbFicheModal .rbfi-tete .modal__close { color: var(--rg-neutre-gris); }
@media (hover: hover) { #rbFicheModal .rbfi-tete .modal__close:hover { color: var(--rg-neutre-blanc); } }
/* Corps : blocs numérotés */
#rbFicheModal .modal__body { padding: var(--rg-espace-6); }
#rbFicheModal .plf { gap: var(--rg-espace-7); }
#rbFicheModal .plf__b { gap: var(--rg-espace-4); }
#rbFicheModal .plf__n {
display: flex;
align-items: baseline;
gap: var(--rg-espace-3);
margin: 0;
font: var(--rg-label-m);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--rg-texte-principal);
}
#rbFicheModal .plf__num { font: var(--rg-chiffre-s); font-style: normal; letter-spacing: 0; color: var(--rg-accent-defaut); }
#rbFicheModal .plf__n span { font: inherit; color: var(--rg-texte-principal); }
#rbFicheModal .plf__n em { margin-left: auto; font: var(--rg-label-s); letter-spacing: var(--rg-label-s-espacement); color: var(--rg-texte-secondaire); }
#rbFicheModal .plf__n2 { margin: var(--rg-espace-3) 0 0; font: var(--rg-label-s); letter-spacing: var(--rg-label-s-espacement); text-transform: uppercase; color: var(--rg-texte-secondaire); }
#rbFicheModal .plf__hint { margin: 0; font: var(--rg-texte-s); color: var(--rg-texte-secondaire); }
#rbFicheModal .rhf__form { gap: var(--rg-espace-4); }
#rbFicheModal .rhf__f { gap: var(--rg-espace-2); }
#rbFicheModal .rhf__f > span { font: var(--rg-label-s); letter-spacing: var(--rg-label-s-espacement); text-transform: uppercase; color: var(--rg-texte-secondaire); }
#rbFicheModal .rbf__aide { font: var(--rg-texte-s); text-decoration: none; color: var(--rg-texte-desactive); }
#rbFicheModal .form-input:focus,
#rbFicheModal .form-textarea:focus { border-color: var(--rg-bord-defaut); border-bottom-color: var(--rg-accent-defaut); }
#rbFicheModal input[type="datetime-local"].form-input,
#rbFicheModal input[type="date"].form-input,
#rbFicheModal input[type="time"].form-input { padding-inline: var(--rg-espace-3); font: var(--rg-chiffre-s); }
/* Segments : Type, Label, repas, hôtel */
#rbFicheModal .rbpils { display: inline-flex; flex-wrap: wrap; gap: 0; border: var(--rg-trait-1) solid var(--rg-bord-defaut); background: var(--rg-fond-surface); align-self: flex-start; }
#rbFicheModal .rbpil {
--c: transparent;
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
height: var(--rg-btn-s-hauteur);
padding: 0 var(--rg-espace-3);
border: 0;
border-radius: var(--rg-rayon-0);
background: none;
font: var(--rg-texte-s-fort);
color: var(--rg-texte-secondaire);
cursor: pointer;
}
@media (hover: hover) { #rbFicheModal .rbpil:hover { color: var(--rg-texte-principal); background: var(--rg-fond-surface-2); } }
#rbFicheModal .rbpil.is-on { background: var(--rg-texte-principal); color: var(--rg-texte-inverse); }
#rbFicheModal .rbpil--travel,
#rbFicheModal .rbpil--instal,
#rbFicheModal .rbpil--fp,
#rbFicheModal .rbpil--qualif,
#rbFicheModal .rbpil--race,
#rbFicheModal .rbpil--essais { --c: var(--rg-texte-desactive); }
#rbFicheModal .rbpil--travel { --c: var(--rg-marine-0); }
#rbFicheModal .rbpil--instal { --c: var(--rg-metier-jaune); }
#rbFicheModal .rbpil--essais { --c: var(--rg-piste-orange); }
#rbFicheModal .rbpil--fp,
#rbFicheModal .rbpil--qualif,
#rbFicheModal .rbpil--race { --c: var(--rg-piste-rouge); }
#rbFicheModal .rbpil--travel::before,
#rbFicheModal .rbpil--instal::before,
#rbFicheModal .rbpil--fp::before,
#rbFicheModal .rbpil--qualif::before,
#rbFicheModal .rbpil--race::before,
#rbFicheModal .rbpil--essais::before {
content: "";
width: var(--rb-trait-l, 11px);
height: var(--rb-trait-h, 16px);
background: var(--c);
clip-path: polygon(calc(100% - var(--rb-trait-pied, 4px)) 0, 100% 0, var(--rb-trait-pied, 4px) 100%, 0 100%);
}
/* Les listes de gens à cocher */
#rbFicheModal .rbq { gap: 0; background: var(--rg-fond-surface); }
#rbFicheModal .rbq__l {
gap: var(--rg-espace-3);
min-height: var(--rg-champ-hauteur);
padding: 0 var(--rg-espace-4);
border: 0;
border-bottom: var(--rg-trait-1) solid var(--rg-fond-page);
border-radius: var(--rg-rayon-0);
background: none;
}
@media (hover: hover) { #rbFicheModal .rbq__l:hover { background: var(--rg-fond-surface-2); } }
#rbFicheModal .rbq__l.is-on { background: none; }
#rbFicheModal .rbq__l.is-on .rbq__n { font-weight: var(--rg-graisse-gras); }
#rbFicheModal .rbq__n { font: var(--rg-texte-m); color: var(--rg-texte-principal); }
#rbFicheModal .rbq__r { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: var(--rg-texte-s); text-transform: none; color: var(--rg-texte-secondaire); }
#rbFicheModal .rbq__n { flex: none; max-width: 60%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#rbFicheModal .rbq__tous { gap: var(--rg-espace-3); margin: 0; font: var(--rg-texte-m); color: var(--rg-texte-principal); }
#rbFicheModal input[type="checkbox"] {
--s: var(--rg-case-taille);
appearance: none;
-webkit-appearance: none;
position: relative;
flex: none;
width: var(--s);
height: var(--s);
margin: 0;
border: var(--rg-trait-2) solid var(--rg-bord-fort);
border-radius: var(--rg-rayon-0);
background: var(--rg-fond-surface);
cursor: pointer;
}
#rbFicheModal input[type="checkbox"]:checked { background: var(--rg-texte-principal); border-color: var(--rg-texte-principal); }
#rbFicheModal input[type="checkbox"]:checked::after {
content: "";
position: absolute;
left: calc(var(--s) * var(--rg-coche-x) - var(--rg-trait-2));
top: calc(var(--s) * var(--rg-coche-y) - var(--rg-trait-2));
width: calc(var(--s) * var(--rg-coche-largeur));
height: calc(var(--s) * var(--rg-coche-hauteur));
box-sizing: border-box;
border: solid var(--rg-texte-inverse);
border-width: 0 var(--rg-trait-3) var(--rg-trait-3) 0;
transform: rotate(var(--rg-coche-angle));
}
#rbFicheModal input[type="checkbox"]:focus-visible { outline: var(--rg-trait-3) solid var(--rg-accent-defaut); outline-offset: var(--rg-trait-2); }
/* Travel : les étapes de nuit */
#rbFicheModal .rbvy__st { margin: 0; font: var(--rg-titre-h3); letter-spacing: 0; text-transform: none; color: var(--rg-texte-principal); }
#rbFicheModal .rbvy__etape {
position: relative;
padding: var(--rg-espace-4) var(--rg-espace-4) var(--rg-espace-4) var(--rg-espace-5);
border: 0;
border-radius: var(--rg-rayon-0);
background: var(--rg-fond-surface);
}
#rbFicheModal .rbvy__etape::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--rg-trait-4); background: var(--rg-texte-principal); }
#rbFicheModal .rbvy__eth { font: var(--rg-label-m); letter-spacing: var(--rg-label-m-espacement); color: var(--rg-texte-principal); }
#rbFicheModal .rbvy__etadd,
#rbFicheModal .rbvy__add {
align-self: flex-start;
padding: 0;
border: 0;
border-radius: var(--rg-rayon-0);
background: none;
font: var(--rg-texte-s-fort);
color: var(--rg-texte-principal);
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
@media (hover: hover) { #rbFicheModal .rbvy__etadd:hover,
#rbFicheModal .rbvy__add:hover { color: var(--rg-accent-defaut); } }
#rbFicheModal .rbhp { border-radius: var(--rg-rayon-0); }
/* Pied : un seul bouton rose */
#rbFicheModal .modal__foot { padding: var(--rg-espace-4) var(--rg-espace-6); border-top: var(--rg-trait-1) solid var(--rg-bord-defaut); background: var(--rg-fond-surface); }
#rbFicheModal .modal__foot [data-rb-close] { --b-bord: transparent; --b-fond: transparent; color: var(--rg-texte-secondaire); }
@media (hover: hover) { #rbFicheModal .modal__foot [data-rb-close]:hover { color: var(--rg-texte-principal); } }
#rbFicheModal .modal__foot #rbSuppr { --b-bord: transparent; --b-fond: transparent; padding-inline: 0; color: var(--rg-etat-erreur); }
@media (max-width: 640px) {
#rbFicheModal .rbfi-tete { padding-left: var(--rg-espace-5); }
#rbFicheModal .modal__body { padding: var(--rg-espace-5); }
#rbFicheModal .modal__foot { padding: var(--rg-espace-3) var(--rg-espace-5); }
}
/* ==========================================================
10. CREW ET PLACES, LE CADRE COMMUN
Le bandeau du Timetable, la barre d'outils de sa liste.
========================================================== */
body.cp-fil {
--cp-champ: 44px;
--cp-cherche: 320px;
--cp-trait-l: 11px;
--cp-trait-h: 16px;
--cp-trait-pied: 4px;
--cp-ga: var(--rg-piste-orange);
--cp-en: var(--rg-marine-0);
--cp-ma: var(--rg-metier-violet);
--cp-photo-lead: 96px;
--cp-photo-mini: 48px;
--cp-coupe: 28px;
--cp-bouton: 32px;
--cp-couverture: 148px;
}
body.cp-fil .page-body > :not(.ttb) { width: 100%; max-width: var(--dash-largeur); margin-inline: auto; box-sizing: border-box; }
body.cp-fil .page-body > .crewbar { margin-bottom: var(--rg-espace-5); }
.cp-compte {
min-width: var(--rg-badge-hauteur);
height: var(--rg-badge-hauteur);
display: inline-grid;
place-items: center;
padding: 0 var(--rg-espace-1);
background: var(--rg-accent-defaut);
color: var(--rg-neutre-blanc);
font: var(--rg-chiffre-s);
font-style: normal;
}
/* La barre d'outils */
body.cp-fil .crewbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--rg-espace-4);
flex-wrap: wrap;
padding: 0;
border: 0;
background: none;
}
body.cp-fil .crewbar__tabs { display: flex; align-items: center; gap: var(--rg-espace-3); flex-wrap: wrap; padding: 0; border: 0; border-radius: var(--rg-rayon-0); box-shadow: none; background: none; }
body.cp-fil .cp-seg { flex-wrap: nowrap; }
body.cp-fil .cp-seg .crewbar__tab {
height: calc(var(--cp-champ) - 2 * var(--rg-trait-1));
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
padding: 0 var(--rg-espace-4);
border: 0;
border-radius: var(--rg-rayon-0);
box-shadow: none;
background: none;
font: var(--rg-texte-s-fort);
color: var(--rg-texte-secondaire);
}
@media (hover: hover) { body.cp-fil .cp-seg .crewbar__tab:hover { color: var(--rg-texte-principal); } }
body.cp-fil .cp-seg .crewbar__tab.is-on { background: var(--rg-texte-principal); color: var(--rg-texte-inverse); }
body.cp-fil .crewbar__tab > i,
body.cp-fil .crewbar__tab i { padding: 0; background: none; font: var(--rg-chiffre-s); font-style: normal; color: var(--rg-texte-desactive); }
body.cp-fil .crewbar__tab.is-on i { color: var(--rg-neutre-gris); }
body.cp-fil .crewbar__sep { width: var(--rg-trait-1); height: var(--rg-espace-5); background: var(--rg-bord-defaut); }
body.cp-fil .crewbar__quick,
body.cp-fil .crewbar__new {
height: var(--cp-champ);
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
padding: 0 var(--rg-espace-4);
border: var(--rg-trait-1) solid var(--rg-bord-defaut);
border-radius: var(--rg-rayon-0);
box-shadow: none;
background: var(--rg-fond-surface);
font: var(--rg-texte-s-fort);
color: var(--rg-texte-principal);
}
body.cp-fil .crewbar__quick.is-on { border-color: var(--rg-texte-principal); box-shadow: none; }
body.cp-fil .crewbar__new { border: 0; background: none; color: var(--rg-texte-secondaire); padding: 0 var(--rg-espace-2); }
@media (hover: hover) { body.cp-fil .crewbar__new:hover { color: var(--rg-accent-defaut); } }
body.cp-fil .crewbar__new svg { width: var(--rg-icone-16); height: var(--rg-icone-16); }
body.cp-fil .crewbar__pt { width: var(--cp-trait-l); height: var(--cp-trait-h); border-radius: var(--rg-rayon-0); background: var(--rg-etat-attention);
clip-path: polygon(calc(100% - var(--cp-trait-pied)) 0, 100% 0, var(--cp-trait-pied) 100%, 0 100%); }
body.cp-fil .crewbar__find {
position: relative;
width: var(--cp-cherche);
max-width: 100%;
height: var(--cp-champ);
display: flex;
align-items: center;
gap: var(--rg-espace-2);
padding: 0 var(--rg-espace-4);
box-sizing: border-box;
background: var(--rg-fond-surface);
border: var(--rg-trait-1) solid var(--rg-bord-defaut);
border-bottom: var(--rg-trait-3) solid var(--rg-texte-principal);
}
body.cp-fil .crewbar__find:focus-within { border-bottom-color: var(--rg-accent-defaut); }
body.cp-fil .crewbar__find svg { position: static; flex: none; width: var(--rg-icone-16); height: var(--rg-icone-16); transform: none; color: var(--rg-texte-secondaire); }
body.cp-fil .crewbar__find .form-input {
flex: 1;
min-width: 0;
height: 100%;
padding: 0;
border: 0;
border-radius: var(--rg-rayon-0);
box-shadow: none;
outline: 0;
background: none;
font: var(--rg-texte-m);
color: var(--rg-texte-principal);
}
body.cp-fil .crewbar__find button { position: static; transform: none; border: 0; border-radius: var(--rg-rayon-0); background: none; color: var(--rg-texte-secondaire); }
body.cp-fil .crewbar__note { flex-basis: 100%; margin: 0; font: var(--rg-label-m); letter-spacing: var(--rg-label-m-espacement); text-transform: uppercase; color: var(--rg-texte-secondaire); }
/* Rien à montrer */
body.cp-fil .crew-vide { margin: 0; padding: var(--rg-espace-6); background: var(--rg-fond-surface); font: var(--rg-texte-m); color: var(--rg-texte-secondaire); }
/* La carte « ajouter », commune aux deux onglets */
body.cp-fil .create-card {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
gap: var(--rg-espace-2);
padding: var(--rg-espace-6);
border: var(--rg-trait-2) dashed var(--rg-bord-fort);
border-radius: var(--rg-rayon-0);
box-shadow: none;
background: none;
text-align: left;
transform: none;
transition: border-color var(--rg-duree), background var(--rg-duree);
}
@media (hover: hover) { body.cp-fil .create-card:hover { border-color: var(--rg-accent-defaut); background: var(--rg-fond-surface); transform: none; box-shadow: none; } }
body.cp-fil .create-card__icon {
width: var(--rg-icone-48);
height: var(--rg-icone-48);
display: grid;
place-items: center;
margin-bottom: auto;
border: 0;
border-radius: var(--rg-rayon-0);
box-shadow: none;
background: var(--rg-accent-defaut);
color: var(--rg-neutre-blanc);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--rg-espace-3) / var(--rg-pente)), calc(100% - var(--rg-espace-3)) 100%, 0 100%);
}
body.cp-fil .create-card__icon svg { width: var(--rg-icone-24); height: var(--rg-icone-24); color: inherit; }
body.cp-fil .create-card__title { margin: var(--rg-espace-5) 0 0; font: var(--rg-titre-h3); color: var(--rg-texte-principal); }
body.cp-fil .create-card__text { margin: 0; font: var(--rg-texte-s); color: var(--rg-texte-secondaire); }
/* ==========================================================
11. CREW, L'ORGANIGRAMME
La direction en marine, les chefs en blanc, les sièges calmes.
========================================================== */
body.cp-fil .vt { gap: var(--rg-espace-5); }
/* Les programmes, comme les sections du Roadbook */
body.cp-fil .vt__tabs {
width: 100%;
gap: var(--rg-espace-6);
padding: 0 var(--rg-espace-5);
border-radius: var(--rg-rayon-0);
box-shadow: none;
background: var(--rg-fond-surface);
}
body.cp-fil .vt__tabs button {
position: relative;
height: var(--rb-ligne, 56px);
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
padding: 0 var(--rg-espace-1);
border-radius: var(--rg-rayon-0);
box-shadow: none;
background: none;
font: var(--rg-texte-m-fort);
color: var(--rg-texte-secondaire) !important;
}
@media (hover: hover) { body.cp-fil .vt__tabs button:hover { background: none; color: var(--rg-texte-principal) !important; } }
body.cp-fil .vt__tabs button.is-on { background: none; color: var(--rg-texte-principal) !important; }
body.cp-fil .vt__n { font: var(--rg-label-m); color: var(--rg-texte-desactive); }
body.cp-fil .vt__tabs button.is-on .vt__n { color: var(--rg-accent-defaut); }
body.cp-fil .vt__tabs button.is-on::after {
--h: var(--rg-onglet-indicateur);
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: var(--h);
background: var(--rg-accent-defaut);
clip-path: polygon(calc(var(--h) * var(--rg-pente)) 0, 100% 0, calc(100% - var(--h) * var(--rg-pente)) 100%, 0 100%);
}
/* Les photos : marine pour la tête, papier pour les sièges */
body.cp-fil .vtph { border-radius: var(--rg-rayon-0); box-shadow: none; background: var(--rg-fond-surface-2); color: var(--rg-texte-principal); }
body.cp-fil .vtph b { font: var(--rg-display-m); font-size: clamp(var(--rg-taille-h3), 3vw, var(--rg-taille-display-m)); letter-spacing: 0; }
body.cp-fil .vtph.crew-avatar--pink,
body.cp-fil .vtph.crew-avatar--navy,
body.cp-fil .vtph.crew-avatar--mix { background: var(--rg-fond-surface-2); box-shadow: none; }
body.cp-fil .vtlead .vtph,
body.cp-fil .vtcar__hd .vtph { background: var(--rg-marine-4); color: var(--rg-neutre-blanc); }
body.cp-fil .vtlead:not(.vtlead--dir) .vtph { background: var(--rg-fond-structure); }
body.cp-fil .vtph--g { width: var(--cp-photo-lead); height: var(--cp-photo-lead); }
body.cp-fil .vtph--g b { font-size: var(--rg-taille-h2, var(--rg-taille-h2)); }
body.cp-fil .vtlead .vtph::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
width: 28%;
height: 28%;
background: var(--rg-accent-defaut);
clip-path: polygon(100% 0, 100% 100%, 42% 100%);
}
body.cp-fil .vtlead:not(.vtlead--dir) .vtph::after { display: none; }
/* La direction */
body.cp-fil .vt__dir, body.cp-fil .vt__leads { gap: var(--rg-espace-4); }
body.cp-fil .vtlead {
gap: var(--rg-espace-5);
padding: var(--rg-espace-4) var(--rg-espace-5) var(--rg-espace-4) var(--rg-espace-4);
border-radius: var(--rg-rayon-0);
box-shadow: none;
background: var(--rg-fond-surface);
transform: none;
transition: background var(--rg-duree);
}
@media (hover: hover) { body.cp-fil .vtlead:hover { transform: none; background: var(--rg-fond-surface-2); } }
body.cp-fil .vtlead--dir {
padding-right: calc(var(--cp-coupe) + var(--rg-espace-5));
background: var(--rg-fond-structure);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cp-coupe) / var(--rg-pente)), calc(100% - var(--cp-coupe)) 100%, 0 100%);
}
@media (hover: hover) { body.cp-fil .vtlead--dir:hover { background: var(--rg-marine-4); } }
body.cp-fil .vtlead__t { gap: var(--rg-espace-1); }
body.cp-fil .vtlead__t em { font: var(--rg-label-m); letter-spacing: var(--rg-label-m-espacement); font-style: normal; color: var(--rg-neutre-gris); }
body.cp-fil .vtlead__t b { font: var(--rg-titre-h3); }
body.cp-fil .vtlead__t > span { font: var(--rg-texte-s); color: var(--rg-texte-secondaire); }
body.cp-fil .vtlead--dir .vtlead__t b { color: var(--rg-neutre-blanc); }
body.cp-fil .vtlead--dir .vtlead__t > span { color: var(--rg-neutre-gris); }
/* Le métier : un trait de couleur et un label, plus de pastille */
body.cp-fil .vtpill {
display: inline-flex;
align-items: center;
gap: var(--rg-espace-2);
padding: 0;
border-radius: var(--rg-rayon-0);
box-shadow: none;
background: none;
font: var(--rg-label-m);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--rg-texte-secondaire);
}
body.cp-fil .vtpill::before {
content: "";
flex: none;
width: var(--cp-trait-l);
height: var(--cp-trait-h);
background: var(--c, var(--rg-texte-desactive));
clip-path: polygon(calc(100% - var(--cp-trait-pied)) 0, 100% 0, var(--cp-trait-pied) 100%, 0 100%);
}
body.cp-fil .vtpill--ga { --c: var(--cp-ga); }
body.cp-fil .vtpill--en { --c: var(--cp-en); }
body.cp-fil .vtpill--ma { --c: var(--cp-ma); }
/* Une colonne par voiture */
body.cp-fil .vt__cars { gap: var(--rg-espace-4); }
body.cp-fil .vtcar { border-radius: var(--rg-rayon-0); box-shadow: none; background: var(--rg-fond-surface); }
body.cp-fil .vtcar__hd {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
column-gap: var(--rg-espace-4);
padding: var(--rg-espace-4) var(--rg-espace-5) var(--rg-espace-4) var(--rg-espace-4);
background: var(--rg-fond-structure);
}
body.cp-fil .vtcar__pph { width: auto; }
body.cp-fil .vtcar__pph .vtph { width: var(--cp-photo-mini); height: var(--cp-photo-mini); }
body.cp-fil .vtcar__pph .vtph b { font: var(--rg-label-m); }
body.cp-fil .vtcar__pt { display: flex; flex-direction: column; min-width: 0; }
body.cp-fil .vtcar__hd em { font: var(--rg-titre-h1); line-height: var(--rg-interligne-plein); color: var(--rg-neutre-blanc); }
body.cp-fil .vtcar__hd b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: var(--rg-texte-m-fort); color: var(--rg-neutre-gris); }
@media (hover: hover) { body.cp-fil .vtcar__hd:hover b { text-decoration: none; color: var(--rg-neutre-blanc); } }
body.cp-fil .vtcar__l { gap: var(--rg-espace-4); padding: var(--rg-espace-4); }
body.cp-fil .vtcar__vide { margin: 0; font: var(--rg-texte-s); color: var(--rg-texte-secondaire); }
body.cp-fil .vtcar--tous { border: 0; background: var(--rg-fond-surface-2); }
body.cp-fil .vtcar__k { padding: var(--rg-espace-4) var(--rg-espace-4) 0; font: var(--rg-label-m); letter-spacing: var(--rg-label-m-espacement); color: var(--rg-texte-secondaire); }
body.cp-fil .vtcar--tous .vtph { background: var(--rg-fond-surface); }
/* Un siège */
body.cp-fil .vtseat { gap: var(--rg-espace-2); }
body.cp-fil .vtseat__ph { border-radius: var(--rg-rayon-0); }
body.cp-fil .vtseat__ph .vtpill {
top: 0;
left: 0;
max-width: 100%;
height: var(--rg-etiquette-hauteur);
padding: 0 var(--rg-espace-3) 0 var(--rg-espace-2);
box-sizing: border-box;
box-shadow: none;
background: var(--rg-fond-surface);
font: var(--rg-label-s);
letter-spacing: var(--rg-label-s-espacement);
color: var(--rg-texte-principal);
}
@media (hover: hover) { body.cp-fil .vtseat__ph:hover .vtph { filter: none; background: var(--rg-bord-defaut); } }
body.cp-fil .vtseat__n b { font: var(--rg-texte-s-fort); color: var(--rg-texte-principal); }
body.cp-fil .vtseat__al { margin-top: calc(var(--rg-espace-1) * -1); font: var(--rg-label-s); letter-spacing: var(--rg-label-s-espacement); text-transform: uppercase; color: var(--rg-texte-secondaire); }
/* Les autres */
body.cp-fil .vt__rk { gap: var(--rg-espace-2); margin: var(--rg-espace-2) 0 0; font: var(--rg-label-m); letter-spacing: var(--rg-label-m-espacement); color: var(--rg-texte-secondaire); }
body.cp-fil .vt__rk i { padding: 0; border-radius: var(--rg-rayon-0); background: none; font: var(--rg-chiffre-s); color: var(--rg-texte-principal); }
body.cp-fil .vt__rl { gap: var(--rg-espace-2); }
body.cp-fil .vtmini {
gap: var(--rg-espace-3);
padding: var(--rg-espace-2);
border-radius: var(--rg-rayon-0);
box-shadow: none;
background: var(--rg-fond-surface);
transition: background var(--rg-duree);
}
@media (hover: hover) { body.cp-fil .vtmini:hover { background: var(--rg-fond-surface-2); } }
body.cp-fil .vtmini .vtph { width: var(--cp-photo-mini); height: var(--cp-photo-mini); }
body.cp-fil .vtmini .vtph b { font: var(--rg-label-m); }
body.cp-fil .vtmini b { font: var(--rg-texte-s-fort); color: var(--rg-texte-principal); }
body.cp-fil .vtmini em { font: var(--rg-texte-s); color: var(--rg-texte-secondaire); }
/* L'atelier, rangé par métier */
body.cp-fil .vtrow__h { font: var(--rg-label-m); letter-spacing: var(--rg-label-m-espacement); text-transform: uppercase; color: var(--rg-texte-secondaire); }
body.cp-fil .vtrow__h b { font: inherit; color: var(--rg-texte-principal); }
body.cp-fil .vtrow__h i { font: var(--rg-chiffre-s); font-style: normal; background: none; }
/* La légende */
body.cp-fil .vt__leg { gap: var(--rg-espace-2) var(--rg-espace-5); font: var(--rg-label-s); letter-spacing: var(--rg-label-s-espacement); text-transform: uppercase; color: var(--rg-texte-secondaire); }
body.cp-fil .vtsw {
width: var(--cp-trait-l);
height: var(--cp-trait-h);
border-radius: var(--rg-rayon-0);
filter: none;
clip-path: polygon(calc(100% - var(--cp-trait-pied)) 0, 100% 0, var(--cp-trait-pied) 100%, 0 100%);
}
body.cp-fil .vtsw--ga { background: var(--cp-ga); }
body.cp-fil .vtsw--en { background: var(--cp-en); }
body.cp-fil .vtsw--ma { background: var(--cp-ma); }
/* Personne encore */
body.cp-fil .vt__vide {
gap: var(--rg-espace-2);
padding: var(--rg-espace-6);
border: 0;
border-left: var(--rg-trait-4) solid var(--rg-texte-principal);
border-radius: var(--rg-rayon-0);
background: var(--rg-fond-surface);
}
body.cp-fil .vt__vide b { font: var(--rg-titre-h3); color: var(--rg-texte-principal); }
body.cp-fil .vt__vide span { max-width: 64ch; margin-bottom: var(--rg-espace-3); font: var(--rg-texte-s); color: var(--rg-texte-secondaire); }
/* Les équipes */
body.cp-fil .eqsec__t { font: var(--rg-titre-h3); color: var(--rg-texte-principal); }
body.cp-fil .eqsec__t span { font: var(--rg-texte-s); color: var(--rg-texte-secondaire); }
body.cp-fil .eqsec__vide { padding: var(--rg-espace-5); border-radius: var(--rg-rayon-0); background: var(--rg-fond-surface); font: var(--rg-texte-s); color: var(--rg-texte-secondaire); }
body.cp-fil .eqcard {
border: 0;
border-top: var(--rg-trait-4) solid var(--rg-texte-principal);
border-radius: var(--rg-rayon-0);
box-shadow: none;
background: var(--rg-fond-surface);
transform: none;
}
@media (hover: hover) { body.cp-fil .eqcard:hover { transform: none; box-shadow: none; background: var(--rg-fond-surface-2); } }
body.cp-fil .eqcard__k { font: var(--rg-label-m); letter-spacing: var(--rg-label-m-espacement); text-transform: uppercase; color: var(--rg-texte-secondaire); }
body.cp-fil .eqcard__pub { padding: 0; border-radius: var(--rg-rayon-0); background: none; font: inherit; color: var(--rg-texte-principal); }
body.cp-fil .eqcard__n { font: var(--rg-titre-h3); color: var(--rg-texte-principal); }
body.cp-fil .eqcard__e { font: var(--rg-texte-s); color: var(--rg-texte-secondaire); }
body.cp-fil .eqcard__ppl .crew-avatar { border-radius: var(--rg-rayon-0); box-shadow: none; background: var(--rg-fond-structure); font: var(--rg-label-s); }
body.cp-fil .eqcard__plus, body.cp-fil .eqcard__nb { font: var(--rg-chiffre-s); color: var(--rg-texte-secondaire); }
body.cp-fil .teamhead { border-radius: var(--rg-rayon-0); box-shadow: none; background: var(--rg-fond-surface); }
body.cp-fil .teamhead__back { font: var(--rg-label-m); letter-spacing: var(--rg-label-m-espacement); text-transform: uppercase; color: var(--rg-texte-secondaire); }
body.cp-fil .teamhead__kind { font: var(--rg-label-m); letter-spacing: var(--rg-label-m-espacement); text-transform: uppercase; color: var(--rg-texte-secondaire); }
body.cp-fil .teamhead__nom { font: var(--rg-titre-h2); color: var(--rg-texte-principal); }
body.cp-fil .teamhead__ev { font: var(--rg-texte-s); color: var(--rg-texte-secondaire); }
/* ==========================================================
12. PLACES, LES CIRCUITS
La photo coupée à 30°, le nom en titre, les traits calmes.
========================================================== */
body.cp-fil .place-preview,
body.cp-fil .create-card { opacity: 1; animation: none; }
body.cp-fil .place-preview {
display: flex;
flex-direction: column;
min-height: 0;
border: 0;
border-radius: var(--rg-rayon-0);
box-shadow: none;
background: var(--rg-fond-surface);
transition: background var(--rg-duree);
}
@media (hover: hover) { body.cp-fil .place-preview:hover { transform: none; border-color: transparent; box-shadow: none; background: var(--rg-fond-surface-2); } }
body.cp-fil .place-preview__cover {
height: var(--cp-couverture);
background-color: var(--rg-fond-structure);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cp-coupe) / var(--rg-pente)), calc(100% - var(--cp-coupe)) 100%, 0 100%);
}
body.cp-fil .place-preview__cover--fallback { background: var(--rg-fond-structure); }
body.cp-fil .place-preview__cover-shade { display: none; }
body.cp-fil .place-preview__cover-mark {
top: auto;
left: auto;
right: calc(var(--cp-coupe) + var(--rg-espace-4));
bottom: var(--rg-espace-3);
transform: none;
font: var(--rg-display-m);
font-size: calc(var(--rg-taille-display-m) * 1.5);
letter-spacing: var(--rg-display-m-espacement);
line-height: var(--rg-interligne-serre);
color: transparent;
-webkit-text-stroke: var(--rg-trait-2) var(--rg-marine-3);
}
body.cp-fil .place-preview__cc {
top: var(--rg-espace-4);
left: var(--rg-espace-5);
padding: 0;
border-radius: var(--rg-rayon-0);
background: none;
font: var(--rg-label-m);
letter-spacing: var(--rg-label-m-espacement);
color: var(--rg-neutre-blanc);
}
body.cp-fil .place-preview__cover:not(.place-preview__cover--fallback) .place-preview__cc {
height: var(--rg-etiquette-hauteur);
padding: 0 var(--rg-espace-2);
left: var(--rg-espace-4);
background: var(--rg-fond-structure);
}
body.cp-fil .place-preview__quand {
--h: var(--rg-etiquette-hauteur);
left: var(--rg-espace-4);
bottom: var(--rg-espace-4);
right: auto;
top: auto;
height: var(--h);
display: inline-flex;
align-items: center;
padding: 0 var(--rg-espace-4);
border: 0;
border-radius: var(--rg-rayon-0);
box-shadow: none;
background: var(--rg-neutre-blanc);
font: var(--rg-label-m);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--rg-marine-5);
clip-path: polygon(calc(var(--h) * var(--rg-pente)) 0, 100% 0, calc(100% - var(--h) * var(--rg-pente)) 100%, 0 100%);
}
body.cp-fil .place-preview__quand.is-proche { background: var(--rg-neutre-blanc); color: var(--rg-marine-5); }
body.cp-fil .place-preview__quand.is-encours { background: var(--rg-accent-defaut); color: var(--rg-neutre-blanc); }
body.cp-fil .place-preview__quand.is-passe { background: var(--rg-marine-4); color: var(--rg-neutre-gris); }
body.cp-fil .place-preview__content { flex: 1; gap: var(--rg-espace-2); padding: var(--rg-espace-5) var(--rg-espace-5) var(--rg-espace-6); }
body.cp-fil .place-preview__name { margin: 0; font: var(--rg-titre-h3); color: var(--rg-texte-principal); }
body.cp-fil .place-preview__location { margin: 0; font: var(--rg-texte-s); color: var(--rg-texte-secondaire); }
body.cp-fil .place-preview__ev { display: flex; flex-direction: column; gap: calc(var(--rg-espace-1) / 2); margin: var(--rg-espace-3) 0 0; padding: 0; border: 0; background: none; }
body.cp-fil .place-preview__ev b { font: var(--rg-texte-s-fort); color: var(--rg-texte-principal); }
body.cp-fil .place-preview__ev span { font: var(--rg-label-s); letter-spacing: var(--rg-label-s-espacement); text-transform: uppercase; color: var(--rg-texte-secondaire); }
body.cp-fil .place-preview__ev--vide { font: var(--rg-label-s); letter-spacing: var(--rg-label-s-espacement); text-transform: uppercase; color: var(--rg-texte-desactive); }
body.cp-fil .place-preview__travel { gap: var(--rg-espace-5); margin: var(--rg-espace-3) 0 0; }
body.cp-fil .place-preview__trajet { gap: var(--rg-espace-2); color: var(--rg-texte-secondaire); }
body.cp-fil .place-preview__travel-ico { width: var(--rg-icone-16); height: var(--rg-icone-16); }
body.cp-fil .place-preview__trajet b { font: var(--rg-chiffre-s); color: var(--rg-texte-principal); }
/* Le caractère du circuit : des étiquettes neutres, le rose reste aux actions */
body.cp-fil .track-tags { gap: var(--rg-espace-2); margin-top: auto; padding-top: var(--rg-espace-4); }
body.cp-fil .track-tag {
--h: calc(var(--rg-etiquette-hauteur) * .85);
height: var(--h);
display: inline-flex;
align-items: center;
padding: 0 var(--rg-espace-3);
border: 0;
border-radius: var(--rg-rayon-0);
box-shadow: none;
background: var(--rg-fond-surface-2);
font: var(--rg-label-s);
letter-spacing: var(--rg-label-s-espacement);
text-transform: uppercase;
color: var(--rg-texte-principal);
clip-path: polygon(calc(var(--h) * var(--rg-pente)) 0, 100% 0, calc(100% - var(--h) * var(--rg-pente)) 100%, 0 100%);
}
@media (hover: hover) { body.cp-fil .place-preview:hover .track-tag { background: var(--rg-fond-surface); } }
body.cp-fil .track-tag--more { background: none; color: var(--rg-texte-secondaire); }
/* Modifier, supprimer */
body.cp-fil .place-preview__actions { top: var(--rg-espace-3); right: var(--rg-espace-3); gap: var(--rg-espace-1); }
body.cp-fil .place-preview__action {
width: var(--cp-bouton);
height: var(--cp-bouton);
border: 0;
border-radius: var(--rg-rayon-0);
box-shadow: none;
background: var(--rg-marine-4);
color: var(--rg-neutre-blanc);
transition: background var(--rg-duree);
}
@media (hover: hover) { body.cp-fil .place-preview__action:hover { background: var(--rg-accent-defaut); color: var(--rg-neutre-blanc); transform: none; } }
@media (hover: hover) { body.cp-fil .place-preview__action--danger:hover { background: var(--rg-etat-erreur); } }
body.cp-fil .place-preview__action svg { width: var(--rg-icone-16); height: var(--rg-icone-16); }
/* Les cartes d'une personne (recherche, équipe) : le liseré garde l'assignation */
body.cp-fil .cards-grid { gap: var(--rg-espace-4); }
body.cp-fil .crew-card {
gap: var(--rg-espace-3);
padding: var(--rg-espace-5);
border: 0;
border-radius: var(--rg-rayon-0);
box-shadow: none;
background: var(--rg-fond-surface);
transition: background var(--rg-duree);
}
@media (hover: hover) { body.cp-fil .crew-card:hover { box-shadow: none; background: var(--rg-fond-surface-2); } }
body.cp-fil .crew-card__job { font: var(--rg-label-m); letter-spacing: var(--rg-label-m-espacement); text-transform: uppercase; color: var(--rg-texte-secondaire); }
body.cp-fil .crew-card .resa-badge {
padding: 0;
border: 0;
border-radius: var(--rg-rayon-0);
background: none;
font: var(--rg-label-s);
letter-spacing: var(--rg-label-s-espacement);
text-transform: uppercase;
color: var(--rg-texte-desactive);
}
body.cp-fil .crew-card__ph {
border-radius: var(--rg-rayon-0);
box-shadow: none;
background: var(--rg-fond-structure);
color: var(--rg-neutre-blanc);
font: var(--rg-label-m);
}
body.cp-fil .crew-card__name { font: var(--rg-titre-h3); color: var(--rg-texte-principal); }
body.cp-fil .crew-card .rattp {
gap: var(--rg-espace-2);
padding: 0;
border: 0;
border-radius: var(--rg-rayon-0);
box-shadow: none;
background: none;
font: var(--rg-label-m);
letter-spacing: var(--rg-label-m-espacement);
color: var(--rg-texte-principal);
}
body.cp-fil .crew-card .rattp::before {
content: "";
flex: none;
width: var(--cp-trait-l);
height: var(--cp-trait-h);
background: var(--rattp-c, var(--rg-texte-desactive));
clip-path: polygon(calc(100% - var(--cp-trait-pied)) 0, 100% 0, var(--cp-trait-pied) 100%, 0 100%);
}
body.cp-fil .crew-card__tag {
--h: calc(var(--rg-etiquette-hauteur) * .85);
height: var(--h);
display: inline-flex;
align-items: center;
padding: 0 var(--rg-espace-3);
border: 0;
border-radius: var(--rg-rayon-0);
box-shadow: none;
background: var(--rg-fond-surface-2);
font: var(--rg-label-s);
letter-spacing: var(--rg-label-s-espacement);
text-transform: uppercase;
color: var(--rg-texte-principal);
clip-path: polygon(calc(var(--h) * var(--rg-pente)) 0, 100% 0, calc(100% - var(--h) * var(--rg-pente)) 100%, 0 100%);
}
@media (hover: hover) { body.cp-fil .crew-card:hover .crew-card__tag { background: var(--rg-fond-surface); } }
body.cp-fil .crew-card .ocard__ct { font: var(--rg-texte-s); color: var(--rg-texte-secondaire); }
body.cp-fil .crew-card .ocard__vide { font: var(--rg-label-s); letter-spacing: var(--rg-label-s-espacement); text-transform: uppercase; font-style: normal; color: var(--rg-texte-desactive); }
body.cp-fil .crew-card__act {
width: var(--cp-bouton);
height: var(--cp-bouton);
border: 0;
border-radius: var(--rg-rayon-0);
box-shadow: none;
background: none;
color: var(--rg-texte-secondaire);
}
@media (hover: hover) { body.cp-fil .crew-card__act:hover { background: var(--rg-fond-structure); color: var(--rg-neutre-blanc); } }
@media (hover: hover) { body.cp-fil .crew-card__act--danger:hover { background: var(--rg-etat-erreur); } }
/* Mode sombre : la marine se détache de la surface */
:root:not([data-theme="light"]) body.cp-fil .place-preview__cover,
:root:not([data-theme="light"]) body.cp-fil .place-preview__cover--fallback { background-color: var(--rg-fond-surface-2); }
:root:not([data-theme="light"]) body.cp-fil .place-preview__cover-mark { -webkit-text-stroke-color: var(--rg-marine-2); }
:root:not([data-theme="light"]) body.cp-fil .place-preview__action { background: var(--rg-marine-5); }
:root:not([data-theme="light"]) body.cp-fil .vtlead--dir,
:root:not([data-theme="light"]) body.cp-fil .vtcar__hd { background: var(--rg-fond-surface-2); }
@media (hover: hover) { :root:not([data-theme="light"]) body.cp-fil .vtlead--dir:hover { background: var(--rg-marine-3); } }
:root:not([data-theme="light"]) body.cp-fil .vtlead .vtph,
:root:not([data-theme="light"]) body.cp-fil .vtcar__hd .vtph { background: var(--rg-marine-5); }
:root:not([data-theme="light"]) body.cp-fil .vtlead:not(.vtlead--dir) .vtph { background: var(--rg-marine-7); }
/* Crew et Places sur téléphone */
@media (max-width: 720px) {
body.cp-fil { --cp-cherche: 100%; --cp-photo-lead: 64px; --cp-vignette: 76px; }
body.cp-fil .crewbar { gap: var(--rg-espace-3); }
body.cp-fil .crewbar__find { order: -1; flex-basis: 100%; }
body.cp-fil .vt__tabs {
width: calc(100% + 2 * var(--rg-espace-4));
max-width: none;
gap: var(--rg-espace-5);
margin: 0 calc(var(--rg-espace-4) * -1);
padding: 0 var(--rg-espace-4);
}
body.cp-fil .vt__tabs button { box-shadow: none; background: none; border-radius: var(--rg-rayon-0); }
body.cp-fil .vtlead { gap: var(--rg-espace-4); padding: var(--rg-espace-3); }
body.cp-fil .vtlead--dir { padding-right: calc(var(--cp-coupe) + var(--rg-espace-3)); }
body.cp-fil .vtlead__t b { font: var(--rg-titre-h3); }
body.cp-fil .vtph--g b { font-size: var(--rg-taille-h3); }
body.cp-fil .vtcar__hd em { font: var(--rg-titre-h2); }
body.cp-fil .place-preview__content-wrap { padding: var(--rg-espace-2); gap: var(--rg-espace-3); }
body.cp-fil .place-preview__cover { --cp-coupe: 12px; position: relative; height: var(--cp-vignette); }
body.cp-fil .place-preview__cover-mark { position: absolute; inset: 0; display: grid; place-items: center; font: var(--rg-titre-h2); color: transparent; }
body.cp-fil .place-preview__content { padding: var(--rg-espace-1) 0 var(--rg-espace-2); gap: var(--rg-espace-1); }
body.cp-fil .place-preview:has(.place-preview__quand) .place-preview__content { padding-bottom: calc(var(--rg-etiquette-hauteur) + var(--rg-espace-4)); }
body.cp-fil .place-preview__quand { left: calc(var(--cp-vignette) + var(--rg-espace-5)); bottom: var(--rg-espace-3); }
body.cp-fil .place-preview__ev { margin-top: var(--rg-espace-1); }
body.cp-fil .place-preview__travel { margin-top: var(--rg-espace-1); }
}
:root:not([data-theme="light"]) body.cp-fil .crew-card__ph { background: var(--rg-fond-surface-2); }
/* ==========================================================
13. L'OUVERTURE
La courbe du logo se trace comme si on roulait dessus,
puis les lettres entrent.
========================================================== */
.spl-page {
--spl-largeur: min(72vw, 820px);
background: var(--rg-marine-5);
}
.spl-page .splash-bg,
.spl-page .splash-stage { display: none; }
.spl {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--rg-espace-6);
}
.spl__logo { width: var(--spl-largeur); height: auto; overflow: visible; }
.spl__revele {
fill: none;
stroke: var(--rg-neutre-blanc);
stroke-width: var(--spl-revele);
stroke-linecap: butt;
stroke-linejoin: round;
stroke-dasharray: 1000 1000;
stroke-dashoffset: 1000;
}
.spl__courbe { fill: var(--rg-accent-defaut); }
.spl__lettres path { fill: var(--rg-neutre-blanc); }
.spl__lettres .spl-l--r { fill: var(--rg-accent-defaut); }
.spl__lettres {
opacity: 0;
transform: translateX(-14px);
transition: opacity calc(var(--rg-duree) * 2.4) var(--ease-out), transform calc(var(--rg-duree) * 4.0) var(--ease-out);
}
.spl-page.is-lettres .spl__lettres { opacity: 1; transform: none; }
.spl__devise {
margin: 0;
font: var(--rg-label-m);
letter-spacing: var(--rg-label-m-espacement);
text-transform: uppercase;
color: var(--rg-neutre-gris);
opacity: 0;
transition: opacity calc(var(--rg-duree) * 4.0) var(--ease-out), letter-spacing calc(var(--rg-duree) * 6.0) var(--ease-out);
}
.spl-page.is-devise .spl__devise { opacity: 1; letter-spacing: var(--rg-label-m-espacement); }
@media (max-width: 720px) {
.spl-page { --spl-largeur: 86vw; }
}
/* L'ouverture, le tour de piste : la caméra au ras de la courbe, puis le recul */
.spl-page {
--spl-logo-h: 60px;
--spl-net: cubic-bezier(.16, 1, .3, 1);
--spl-glisse: cubic-bezier(.7, 0, .2, 1);
--spl-lettre-x: 18px;
--spl-lettre-pente: -12deg;
--spl-lettre-pas: 40ms;
--spl-revele: 9.5;
--spl-revele-fin: 6.6;
cursor: pointer;
}
.spl { position: fixed; inset: 0; display: block; }
.spl__logo { position: absolute; inset: 0; width: 100%; height: 100%; }
.spl__logo { overflow: hidden; }
/* Le crochet se trace plus fin pour ne jamais déborder sur la ligne */
.spl__revele--fin { stroke-width: var(--spl-revele-fin); }
/* Les deux bandes à 30° qui balaient l'écran à l'arrivée */
.spl__balayage {
--spl-bande: max(30vw, 24vh);
--spl-bande-fine: max(7vw, 5vh);
--spl-biais: 30vh; /* la bande penchée à 30° déborde de ~29 % de la hauteur : on part et on finit hors champ */
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
.spl__balayage i {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: var(--spl-bande);
background: var(--rg-accent-defaut);
transform: translateX(calc(-100% - var(--spl-biais))) skewX(-30deg);
}
.spl__balayage i + i { width: var(--spl-bande-fine); background: var(--rg-neutre-blanc); }
.spl-page.is-balaye .spl__balayage i { animation: splBalaye calc(var(--rg-duree) * 5.5) var(--spl-glisse) forwards; }
.spl-page.is-balaye .spl__balayage i + i { animation-duration: calc(var(--rg-duree) * 5.9); animation-delay: 70ms; }
@keyframes splBalaye {
from { transform: translateX(calc(-100% - var(--spl-biais))) skewX(-30deg); }
to { transform: translateX(calc(100vw + var(--spl-biais))) skewX(-30deg); }
}
}
/* Les lettres : une par une, penchées comme la marque, avec un léger dépassement */
.spl__lettres { opacity: 1; transform: none; transition: none; }
.spl__lettres path {
opacity: 0;
transform: translateX(var(--spl-lettre-x)) skewX(var(--spl-lettre-pente));
transform-box: fill-box;
transform-origin: 0 100%;
transition: opacity calc(var(--rg-duree) * 2.4) ease-out calc(var(--i, 0) * var(--spl-lettre-pas)), transform calc(var(--rg-duree) * 4.3) var(--spl-net) calc(var(--i, 0) * var(--spl-lettre-pas));
}
.spl-page.is-lettres .spl__lettres path { opacity: 1; transform: none; }
/* La devise sous le logo, qui se resserre */
.spl__devise {
position: absolute;
left: 0;
right: 0;
top: calc(50% + var(--spl-logo-h) + var(--rg-espace-6));
text-align: center;
}
/* La sortie : tout file vers la droite, comme une voiture qui repart */
.spl-page.splash-page--leaving { opacity: 0; transition: opacity calc(var(--rg-duree) * 4.0) ease-in; }
.spl-page.splash-page--leaving .spl__logo,
.spl-page.splash-page--leaving .spl__devise { transform: translateX(6vw) skewX(-8deg); transition: transform calc(var(--rg-duree) * 4.0) cubic-bezier(.6, 0, .9, .4); }
/* À l'arrivée, le logo encaisse le freinage */
.spl-page.is-arrive .spl__logo { animation: splFrein calc(var(--rg-duree) * 4.7) var(--spl-net); }
@keyframes splFrein {
0% { transform: translateX(.5vw) scale(1.012); }
100% { transform: none; }
}
/* ==========================================================
LES FENÊTRES DE CRÉATION : WEEK-END ET ÉVÉNEMENT
Bandeau marine coupé, blocs numérotés, champs de la charte,
le bouton d'action en rose coupé. Même panneau sur téléphone
et sur ordinateur.
========================================================== */
#ttModal,
#evModal,
#icsModal {
--crea-coupe: var(--rg-espace-7);
--crea-num: var(--rg-espace-5);
--crea-tuile: 84px;
--crea-logo: 24px;
--crea-coche: 22px;
--crea-circ-l: 132px;
--crea-circ-h: 84px;
--crea-circ-coupe: 26px;
--crea-circ-cc: 40px;
--crea-jour: 44px;
--crea-bande: 28px;
--crea-heure: var(--rg-taille-chiffre-l);
--crea-heure-h: 88px;
--crea-case: var(--rg-espace-5);
--crea-ligne: 60px;
}
#ttModal .modal { background: var(--rg-fond-page); }
#ttModal .modal::after { display: none; }
/* ---------- Le bandeau ---------- */
#ttModal .evf-tete {
position: relative;
isolation: isolate;
align-items: flex-start;
padding: var(--rg-espace-5) var(--rg-espace-5) var(--rg-espace-7) var(--rg-espace-6);
border-bottom: 0;
background: none;
}
#ttModal .evf-tete::before,
#ttModal .evf-tete::after { content: ""; position: absolute; inset: 0; z-index: -1; }
#ttModal .evf-tete::before {
background: var(--rg-fond-structure);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--crea-coupe)), calc(100% - var(--crea-coupe) * var(--rg-pente)) 100%, 0 100%);
}
#ttModal .evf-tete::after {
background: var(--rg-accent-defaut);
clip-path: polygon(calc(100% - var(--crea-coupe) * var(--rg-pente) * 0.58) 100%, 100% calc(100% - var(--crea-coupe) * 0.58),
100% calc(100% - var(--crea-coupe) * 0.43), calc(100% - var(--crea-coupe) * var(--rg-pente) * 0.43) 100%);
}
#ttModal .modal__title,
#evModal .modal__title,
#icsModal .modal__title { font: var(--rg-titre-h2); color: var(--rg-neutre-blanc); }
#ttModal .evf-tete__surtitre,
#evModal .evf-tete__surtitre,
#icsModal .evf-tete__surtitre { color: var(--rg-neutre-gris); }
.ttf-tete__recap,
#evModal .evf-tete__recap,
#icsModal .evf-tete__recap {
margin-top: var(--rg-espace-3);
padding-right: var(--rg-espace-7);
font: var(--rg-label-s);
letter-spacing: var(--rg-label-s-espacement);
text-transform: uppercase;
color: var(--rg-neutre-gris);
}
#evModal .evf-tete__recap,
#icsModal .evf-tete__recap { color: var(--rg-neutre-blanc); }
#ttModal .evf-tete .modal__close { color: var(--rg-neutre-gris); }
@media (hover: hover) { #ttModal .evf-tete .modal__close:hover { color: var(--rg-neutre-blanc); } }
/* ---------- Les blocs numérotés ---------- */
#ttModal .modal__body { padding: var(--rg-espace-4) var(--rg-espace-6) var(--rg-espace-6); }
#ttModal .ttf__bloc { display: flex; flex-direction: column; gap: var(--rg-espace-4); padding: var(--rg-espace-6) 0 0; border: 0; background: none; }
#ttModal .ttf__bloc[hidden] { display: none; }
#ttModal .ttf__titre,
#evModal .evf__titre,
#icsModal .evf__titre {
display: flex;
align-items: center;
gap: var(--rg-espace-3);
margin: 0;
font: var(--rg-titre-h3);
letter-spacing: normal;
text-transform: none;
color: var(--rg-texte-principal);
}
#ttModal .ttf__titre > i,
#evModal .evf__titre > i,
#icsModal .evf__titre > i {
flex: none;
width: var(--crea-num);
height: var(--crea-num);
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--rg-fond-marine);
font: var(--rg-label-s);
font-weight: var(--rg-graisse-gras);
font-style: normal;
color: var(--rg-neutre-blanc);
}
#ttModal .ttf__titre > i::before,
#evModal .evf__titre > i::before,
#icsModal .evf__titre > i::before { content: "0"; }
#ttModal .ttf__titre em,
#evModal .evf__titre em,
#icsModal .evf__titre em {
margin-left: auto;
font: var(--rg-label-s);
font-style: normal;
letter-spacing: var(--rg-label-s-espacement);
text-transform: uppercase;
color: var(--rg-texte-secondaire);
}
#ttModal .form-label { font: var(--rg-label-s); font-weight: var(--rg-graisse-gras); letter-spacing: var(--rg-label-s-espacement); text-transform: uppercase; color: var(--rg-texte-secondaire); }
#ttModal .form-input,
#ttModal .form-select {
height: var(--rg-champ-hauteur);
border: var(--rg-trait-1) solid var(--rg-bord-defaut);
border-bottom: var(--rg-trait-3) solid var(--rg-bord-fort);
border-radius: var(--rg-rayon-0);
background: var(--rg-fond-surface);
font: var(--rg-texte-m);
color: var(--rg-texte-principal);
}
#ttModal .form-input:focus { border-color: var(--rg-accent-defaut); outline: none; }
#ttModal .ttf__aide { font: var(--rg-texte-s); color: var(--rg-texte-secondaire); }
/* ---------- 01 Championnat ---------- */
#ttModal .ttf__disciplines { display: flex; flex-direction: column; gap: var(--rg-espace-5); }
#ttModal .ttf__disc { display: flex; flex-direction: column; gap: var(--rg-espace-3); }
#ttModal .ttf__disc-t {
display: flex;
align-items: center;
gap: var(--rg-espace-3);
margin: 0;
font: var(--rg-label-s);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-s-espacement);
color: var(--rg-texte-principal);
}
#ttModal .ttf__disc-t::before { content: ""; width: var(--rg-onglet-indicateur); height: var(--rg-espace-4); background: var(--ttf-c); }
#ttModal .ttf__disc-t::after { content: ""; flex: 1; height: var(--rg-trait-1); background: var(--rg-bord-defaut); }
#ttModal .ttf__cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rg-espace-2); }
#ttModal .ttf__cat {
position: relative;
height: var(--crea-tuile);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--rg-espace-3);
padding: var(--rg-espace-2);
border: var(--rg-trait-1) solid var(--rg-bord-defaut);
border-radius: var(--rg-rayon-0);
background: var(--rg-fond-surface);
font: var(--rg-label-s);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-s-espacement);
text-transform: uppercase;
color: var(--rg-texte-secondaire);
}
#ttModal .ttf__cat img { height: var(--crea-logo); width: auto; max-width: 80%; object-fit: contain; }
#ttModal .ttf__cat b { font: var(--rg-chiffre-m); background: none; color: var(--rg-texte-principal); }
@media (hover: hover) { #ttModal .ttf__cat:hover { border-color: var(--rg-bord-fort); } }
#ttModal .ttf__cat.is-on { border: var(--rg-trait-2) solid var(--rg-texte-principal); background: var(--rg-fond-surface); color: var(--rg-texte-principal); }
#ttModal .ttf__coche {
position: absolute;
right: 0;
top: 0;
width: var(--crea-coche);
height: var(--crea-coche);
display: grid;
place-items: center;
background: var(--rg-texte-principal);
color: var(--rg-texte-inverse);
}
#ttModal .ttf__coche svg,
#ttModal .ttf__circ-ok svg { width: var(--rg-icone-16); height: var(--rg-icone-16); }
/* ---------- 02 Circuit ---------- */
#ttModal .ttf__cherche {
display: flex;
align-items: center;
gap: var(--rg-espace-3);
height: var(--rg-champ-hauteur);
padding: 0 var(--rg-espace-4);
border: var(--rg-trait-1) solid var(--rg-bord-defaut);
border-bottom: var(--rg-trait-3) solid var(--rg-bord-fort);
background: var(--rg-fond-surface);
color: var(--rg-texte-secondaire);
}
#ttModal .ttf__cherche svg { flex: none; width: var(--rg-icone-20); height: var(--rg-icone-20); }
#ttModal .ttf__cherche input { all: unset; flex: 1; min-width: 0; font: var(--rg-texte-m); color: var(--rg-texte-principal); }
#ttModal .ttf__circuits {
display: flex;
gap: var(--rg-espace-3);
margin: 0 calc(var(--rg-espace-6) * -1);
padding: var(--rg-espace-1) var(--rg-espace-6);
overflow-x: auto;
scrollbar-width: none;
}
#ttModal .ttf__circuits::-webkit-scrollbar { display: none; }
#ttModal .ttf__circ { flex: none; width: var(--crea-circ-l); display: flex; flex-direction: column; padding: 0; border: 0; background: none; color: var(--rg-texte-principal); text-align: left; }
#ttModal .ttf__circ-ph {
position: relative;
display: block;
height: var(--crea-circ-h);
overflow: hidden;
background: var(--rg-fond-marine);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--crea-circ-coupe)), calc(100% - var(--crea-circ-coupe) * var(--rg-pente)) 100%, 0 100%);
}
#ttModal .ttf__circ.is-on .ttf__circ-ph { outline: var(--rg-trait-3) solid var(--rg-texte-principal); outline-offset: calc(var(--rg-trait-3) * -1); }
#ttModal .ttf__circ-ph img { width: 100%; height: 100%; object-fit: cover; }
#ttModal .ttf__circ-cc {
position: absolute;
right: var(--rg-espace-2);
bottom: 0;
font: var(--rg-titre-style) var(--rg-graisse-noir) var(--crea-circ-cc)/1 var(--rg-police-titre);
text-transform: uppercase;
color: var(--rg-marine-4);
}
[data-theme="dark"] #ttModal .ttf__circ-cc { color: var(--rg-marine-3); }
#ttModal .ttf__circ-ok {
position: absolute;
left: 0;
top: 0;
width: var(--crea-coche);
height: var(--crea-coche);
display: grid;
place-items: center;
background: var(--rg-accent-defaut);
color: var(--rg-neutre-blanc);
}
#ttModal .ttf__circ-n { margin-top: var(--rg-espace-2); font: var(--rg-texte-s-fort); }
#ttModal .ttf__circ-p { margin-top: var(--rg-espace-1); font: var(--rg-label-s); letter-spacing: var(--rg-label-s-espacement); text-transform: uppercase; color: var(--rg-texte-secondaire); }
#ttModal .ttf__select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* ---------- 03 Dates ---------- */
#ttModal .ttf__quand { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 150px); gap: var(--rg-espace-3); align-items: end; }
#ttModal .ttf__duree {
display: grid;
grid-template-columns: var(--rg-champ-hauteur) minmax(0, 1fr) var(--rg-champ-hauteur);
height: var(--rg-champ-hauteur);
gap: 0;
border: var(--rg-trait-1) solid var(--rg-bord-defaut);
border-bottom: var(--rg-trait-3) solid var(--rg-bord-fort);
background: var(--rg-fond-surface);
}
#ttModal .ttf__pas { width: auto; height: 100%; border: 0; border-radius: var(--rg-rayon-0); background: none; font: var(--rg-chiffre-m); color: var(--rg-texte-principal); }
@media (hover: hover) { #ttModal .ttf__pas:hover { background: var(--rg-fond-surface-2); } }
#ttModal .ttf__nbj {
width: auto;
min-width: 0;
height: 100%;
padding: 0;
border: 0;
border-left: var(--rg-trait-1) solid var(--rg-bord-defaut);
border-right: var(--rg-trait-1) solid var(--rg-bord-defaut);
text-align: center;
font: var(--rg-chiffre-m);
font-weight: var(--rg-graisse-gras);
}
#ttModal .ttf__bande { display: flex; gap: var(--rg-trait-2); }
#ttModal .ttf__bande:empty { display: none; }
#ttModal .ttf__bande span {
flex: 1;
height: var(--crea-bande);
display: grid;
place-items: center;
border: var(--rg-trait-1) dashed var(--rg-bord-fort);
font: var(--rg-label-s);
font-weight: var(--rg-graisse-gras);
color: var(--rg-texte-secondaire);
}
#ttModal .ttf__bande span.is-on { border: 0; background: var(--rg-fond-marine); color: var(--rg-neutre-blanc); }
#ttModal .ttf__recap { margin: 0; font: var(--rg-label-s); letter-spacing: var(--rg-label-s-espacement); text-transform: uppercase; color: var(--rg-texte-secondaire); }
/* ---------- 04 Les jours ---------- */
#ttModal .day-inputs { display: block; margin: 0 calc(var(--rg-espace-6) * -1); padding: 0; border: 0; border-top: var(--rg-trait-1) solid var(--rg-bord-defaut); background: none; }
#ttModal .day-inputs__row {
display: grid;
grid-template-columns: var(--crea-jour) minmax(0, 1fr);
column-gap: var(--rg-espace-3);
row-gap: var(--rg-espace-2);
align-items: center;
margin: 0;
padding: var(--rg-espace-3) var(--rg-espace-6) var(--rg-espace-3) var(--rg-espace-4);
border: 0;
border-bottom: var(--rg-trait-1) solid var(--rg-bord-defaut);
background: var(--rg-fond-surface);
}
#ttModal .day-inputs__label { grid-row: span 2; display: flex; flex-direction: column; align-items: center; gap: var(--rg-espace-1); }
#ttModal .day-inputs__label strong { font: var(--rg-chiffre-m); font-weight: var(--rg-graisse-gras); color: var(--rg-texte-principal); }
#ttModal .day-inputs__label span { font: var(--rg-label-s); letter-spacing: var(--rg-label-s-espacement); text-transform: uppercase; color: var(--rg-texte-secondaire); }
#ttModal .day-inputs__label--trajet strong { color: var(--rg-texte-principal); }
#ttModal .day-inputs__input {
height: var(--rg-btn-s-hauteur);
padding: 0;
border: 0;
border-bottom: var(--rg-trait-1) solid var(--rg-bord-defaut);
border-radius: var(--rg-rayon-0);
background: none;
font: var(--rg-texte-m);
color: var(--rg-texte-principal);
}
#ttModal .day-inputs__input:focus { border-bottom-color: var(--rg-accent-defaut); outline: none; }
#ttModal .day-inputs__trajet { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 0; }
#ttModal .ttf__tj {
height: var(--rg-segment-s-hauteur);
padding: 0 var(--rg-espace-3);
border: var(--rg-trait-1) solid var(--rg-bord-defaut);
border-radius: var(--rg-rayon-0);
background: var(--rg-fond-surface);
font: var(--rg-label-s);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-s-espacement);
text-transform: uppercase;
color: var(--rg-texte-secondaire);
}
#ttModal .ttf__tj + .ttf__tj { border-left: 0; }
#ttModal .ttf__tj.is-on { border-color: var(--rg-texte-principal); background: var(--rg-texte-principal); color: var(--rg-texte-inverse); }
#ttModal .day-inputs__quand { margin-left: var(--rg-espace-3); font: var(--rg-label-s); letter-spacing: var(--rg-label-s-espacement); text-transform: uppercase; color: var(--rg-texte-secondaire); }
#ttModal .day-inputs__heure { width: 72px; height: var(--rg-segment-s-hauteur); margin-left: var(--rg-espace-2); font: var(--rg-chiffre-s); }
/* ---------- Le pied : annuler en texte, l'action en rose coupé ---------- */
#ttModal .modal__foot,
#evModal .modal__foot,
#icsModal .modal__foot { gap: var(--rg-espace-3); padding: var(--rg-espace-4) var(--rg-espace-6); border-top: var(--rg-trait-1) solid var(--rg-bord-defaut); background: var(--rg-fond-surface); }
#ttModal .modal__foot-right,
#evModal .modal__foot-right,
#icsModal .modal__foot-right { flex: 1; display: flex; justify-content: flex-end; gap: var(--rg-espace-2); }
#ttModal .modal__foot .btn-secondary::before,
#ttModal .modal__foot .btn-secondary::after,
#evModal .modal__foot .btn-secondary::before,
#evModal .modal__foot .btn-secondary::after,
#ttModal .modal__foot .btn-danger::before,
#ttModal .modal__foot .btn-danger::after,
#evModal .modal__foot .btn-danger::before,
#evModal .modal__foot .btn-danger::after,
#icsModal .modal__foot .btn-secondary::before,
#icsModal .modal__foot .btn-secondary::after,
#icsModal .modal__foot .btn-danger::before,
#icsModal .modal__foot .btn-danger::after { display: none; }
#ttModal .modal__foot .btn-secondary,
#evModal .modal__foot .btn-secondary,
#icsModal .modal__foot .btn-secondary {
box-shadow: none;
height: var(--rg-btn-m-hauteur);
padding: 0 var(--rg-espace-4);
border: 0;
border-radius: var(--rg-rayon-0);
background: none;
font: var(--rg-texte-m-fort);
color: var(--rg-texte-principal);
}
#ttModal .modal__foot .btn-primary,
#evModal .modal__foot .btn-primary,
#icsModal .modal__foot .btn-primary {
flex: 1 1 auto;
max-width: 280px;
height: var(--rg-btn-m-hauteur);
padding: 0 var(--rg-btn-m-marge);
border: 0;
border-radius: var(--rg-rayon-0);
background: var(--rg-accent-defaut);
font: var(--rg-texte-m-fort);
color: var(--rg-neutre-blanc);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--rg-btn-m-coin) / var(--rg-pente)), calc(100% - var(--rg-btn-m-coin)) 100%, 0 100%);
}
#evModal #evSuiv,
#icsModal #evSuiv { --b-fond: var(--rg-texte-principal); --b-bord: var(--rg-texte-principal); background: var(--rg-texte-principal); color: var(--rg-texte-inverse); }
#ttModal .modal__foot .btn-danger,
#evModal .modal__foot .btn-danger,
#icsModal .modal__foot .btn-danger { height: var(--rg-btn-m-hauteur); border: 0; border-radius: var(--rg-rayon-0); background: none; font: var(--rg-texte-s-fort); color: var(--rg-etat-erreur); }
/* ---------- L'événement : les étapes ---------- */
#evModal .evf-pas,
#icsModal .evf-pas { gap: 0; padding: 0; background: var(--rg-fond-surface); }
#evModal .evf-pas__e,
#icsModal .evf-pas__e { flex: 1 1 0; justify-content: center; height: var(--rg-onglet-hauteur); font: var(--rg-label-s); font-weight: var(--rg-graisse-gras); letter-spacing: var(--rg-label-s-espacement); text-transform: uppercase; }
#evModal .evf-pas__e span,
#icsModal .evf-pas__e span { display: inline-flex; font: var(--rg-label-s); font-weight: var(--rg-graisse-gras); }
#evModal .evf-pas__e span svg,
#icsModal .evf-pas__e span svg { width: var(--rg-icone-16); height: var(--rg-icone-16); }
#evModal .evf-pas__e.is-fait,
#icsModal .evf-pas__e.is-fait { color: var(--rg-texte-principal); }
#evModal .evf-pas__e.is-actif::after,
#icsModal .evf-pas__e.is-actif::after { height: var(--rg-onglet-indicateur); background: var(--rg-texte-principal); clip-path: none; }
/* What : catégories en pastilles qui défilent, tâches en lignes */
#evModal .evf__cats,
#icsModal .evf__cats {
display: flex;
flex-wrap: nowrap;
gap: var(--rg-espace-2);
margin: 0 calc(var(--rg-espace-6) * -1);
padding: 0 var(--rg-espace-6);
overflow-x: auto;
scrollbar-width: none;
border: 0;
background: none;
}
#evModal .evf__cats::-webkit-scrollbar,
#icsModal .evf__cats::-webkit-scrollbar { display: none; }
#evModal .evf__cat,
#icsModal .evf__cat {
flex: none;
height: var(--rg-btn-s-hauteur);
padding: 0 var(--rg-espace-3);
border: var(--rg-trait-1) solid var(--rg-bord-defaut);
background: var(--rg-fond-surface);
font: var(--rg-texte-s-fort);
color: var(--rg-texte-principal);
}
#evModal .evf__cat.is-on,
#icsModal .evf__cat.is-on { border-color: var(--rg-texte-principal); background: var(--rg-texte-principal); color: var(--rg-texte-inverse); }
#evModal .evf__tasks,
#icsModal .evf__tasks { margin: 0 calc(var(--rg-espace-6) * -1); border-top: var(--rg-trait-1) solid var(--rg-bord-defaut); }
#evModal .evf__task,
#icsModal .evf__task { min-height: var(--crea-ligne); padding: var(--rg-espace-3) var(--rg-espace-6); border-bottom: var(--rg-trait-1) solid var(--rg-bord-defaut); font: var(--rg-texte-m-fort); }
#evModal .evf__task:last-child,
#icsModal .evf__task:last-child { border-bottom: var(--rg-trait-1) solid var(--rg-bord-defaut); }
/* When : l'heure en grand, les durées en grille, la journée autour */
#evModal .evf__quand,
#icsModal .evf__quand { display: flex; flex-direction: column; gap: var(--rg-espace-5); padding: 0; background: none; }
#evModal .evf__quand .form-field:first-child .hm,
#icsModal .evf__quand .form-field:first-child .hm {
justify-content: center;
align-items: center;
height: var(--crea-heure-h);
background: var(--rg-fond-surface);
border: var(--rg-trait-1) solid var(--rg-bord-defaut);
border-bottom: var(--rg-trait-3) solid var(--rg-bord-fort);
}
#evModal .evf__quand .form-field:first-child .hm__n,
#icsModal .evf__quand .form-field:first-child .hm__n {
width: 2.4ch;
height: auto;
padding: 0;
border: 0;
background: none;
text-align: center;
font: var(--rg-graisse-gras) var(--crea-heure)/1 var(--rg-police-chiffre);
letter-spacing: var(--rg-chiffre-l-espacement);
color: var(--rg-texte-principal);
}
#evModal .evf__quand .form-field:first-child .hm__n:focus,
#icsModal .evf__quand .form-field:first-child .hm__n:focus { outline: none; color: var(--rg-accent-defaut); }
#evModal .evf__quand .form-field:first-child .hm__sep,
#icsModal .evf__quand .form-field:first-child .hm__sep { font: var(--rg-graisse-gras) var(--crea-heure)/1 var(--rg-police-chiffre); color: var(--rg-texte-desactive); }
#evModal .evf__apres,
#icsModal .evf__apres { margin: var(--rg-espace-2) 0 0; text-align: center; font: var(--rg-label-s); letter-spacing: var(--rg-label-s-espacement); text-transform: uppercase; color: var(--rg-texte-secondaire); }
#evModal .evf__apres[hidden],
#icsModal .evf__apres[hidden] { display: none; }
#evModal .evf__durees,
#icsModal .evf__durees { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--rg-espace-2); border: 0; background: none; }
#evModal .evf__durees button,
#icsModal .evf__durees button { height: var(--rg-btn-s-hauteur); border: var(--rg-trait-1) solid var(--rg-bord-defaut); background: var(--rg-fond-surface); font: var(--rg-chiffre-s); font-weight: var(--rg-graisse-gras); color: var(--rg-texte-principal); }
#evModal .evf__durees button + button,
#icsModal .evf__durees button + button { border-left: var(--rg-trait-1) solid var(--rg-bord-defaut); }
#evModal .evf__durees button.is-on,
#icsModal .evf__durees button.is-on { border-color: var(--rg-texte-principal); background: var(--rg-texte-principal); color: var(--rg-texte-inverse); }
#evModal .evf__jour[hidden],
#icsModal .evf__jour[hidden] { display: none; }
#evModal .evf__jour-t,
#icsModal .evf__jour-t { display: block; margin: var(--rg-espace-3) 0; }
#evModal .evf__jour-l,
#icsModal .evf__jour-l { margin: 0 calc(var(--rg-espace-6) * -1); border-top: var(--rg-trait-1) solid var(--rg-bord-defaut); }
#evModal .evf__jl,
#icsModal .evf__jl {
display: grid;
grid-template-columns: var(--rg-espace-8) minmax(0, 1fr) auto;
align-items: center;
column-gap: var(--rg-espace-3);
min-height: var(--rg-btn-m-hauteur);
padding: var(--rg-espace-2) var(--rg-espace-6);
border-bottom: var(--rg-trait-1) solid var(--rg-bord-defaut);
background: var(--rg-fond-surface);
color: var(--rg-texte-secondaire);
}
#evModal .evf__jl b,
#icsModal .evf__jl b { font: var(--rg-chiffre-s); }
#evModal .evf__jl span,
#icsModal .evf__jl span { display: flex; align-items: center; gap: var(--rg-espace-2); min-width: 0; font: var(--rg-texte-s); }
#evModal .evf__jl span i,
#icsModal .evf__jl span i { flex: none; width: var(--evf-trait-l); height: var(--evf-trait-h); background: var(--evf-c); clip-path: polygon(65% 0, 100% 0, 35% 100%, 0 100%); }
#evModal .evf__jl em,
#icsModal .evf__jl em { font: var(--rg-chiffre-s); font-style: normal; }
#evModal .evf__jl.is-piste,
#icsModal .evf__jl.is-piste { background: var(--rg-fond-marine); color: var(--rg-neutre-blanc); border-bottom-color: var(--rg-marine-4); }
#evModal .evf__jl.is-neuf,
#icsModal .evf__jl.is-neuf { outline: var(--rg-trait-2) dashed var(--rg-accent-defaut); outline-offset: calc(var(--rg-trait-2) * -1); color: var(--rg-texte-principal); }
#evModal .evf__jl.is-neuf b,
#evModal .evf__jl.is-neuf span,
#icsModal .evf__jl.is-neuf b,
#icsModal .evf__jl.is-neuf span { font-weight: var(--rg-graisse-gras); }
#evModal .evf__jl .ttm-tag,
#icsModal .evf__jl .ttm-tag {
display: inline-flex;
align-items: center;
height: var(--rg-espace-5);
padding: 0 var(--rg-espace-3);
background: var(--rg-accent-defaut);
color: var(--rg-neutre-blanc);
font: var(--rg-label-s);
font-weight: var(--rg-graisse-gras);
letter-spacing: var(--rg-label-s-espacement);
text-transform: uppercase;
clip-path: polygon(calc(var(--rg-espace-5) * var(--rg-pente)) 0, 100% 0, calc(100% - var(--rg-espace-5) * var(--rg-pente)) 100%, 0 100%);
}
/* Who : une ligne par rôle, une case, le nombre de personnes */
#evModal .evf__roles,
#icsModal .evf__roles { display: block; margin: 0 calc(var(--rg-espace-6) * -1); border-top: var(--rg-trait-1) solid var(--rg-bord-defaut); }
#evModal .evf__role,
#icsModal .evf__role {
width: 100%;
display: grid;
grid-template-columns: var(--crea-case) minmax(0, 1fr) auto;
align-items: center;
gap: var(--rg-espace-4);
min-height: var(--crea-ligne);
padding: var(--rg-espace-2) var(--rg-espace-6);
border: 0;
border-bottom: var(--rg-trait-1) solid var(--rg-bord-defaut);
border-radius: var(--rg-rayon-0);
background: var(--rg-fond-surface);
color: var(--rg-texte-principal);
text-align: left;
}
#evModal .evf__role::before,
#evModal .evf__role::after,
#icsModal .evf__role::before,
#icsModal .evf__role::after { display: none; }
#evModal .evf__role,
#icsModal .evf__role { justify-content: stretch; justify-items: start; }
#evModal .evf__role-n,
#icsModal .evf__role-n { justify-self: end; }
#evModal .evf__case,
#icsModal .evf__case {
width: var(--crea-case);
height: var(--crea-case);
display: grid;
place-items: center;
border: var(--rg-trait-2) solid var(--rg-bord-fort);
color: var(--rg-texte-inverse);
}
#evModal .evf__case svg,
#icsModal .evf__case svg { width: var(--rg-icone-16); height: var(--rg-icone-16); opacity: 0; }
#evModal .evf__role.is-on,
#icsModal .evf__role.is-on { background: var(--rg-fond-surface); color: var(--rg-texte-principal); }
#evModal .evf__role.is-on .evf__case,
#icsModal .evf__role.is-on .evf__case { border-color: var(--rg-texte-principal); background: var(--rg-texte-principal); }
#evModal .evf__role.is-on .evf__case svg,
#icsModal .evf__role.is-on .evf__case svg { opacity: 1; }
#evModal .evf__role-t b,
#icsModal .evf__role-t b { display: block; font: var(--rg-texte-m-fort); }
#evModal .evf__role-t em,
#icsModal .evf__role-t em { display: block; margin-top: var(--rg-espace-1); font: var(--rg-texte-s); font-style: normal; color: var(--rg-texte-secondaire); }
#evModal .evf__role-n,
#icsModal .evf__role-n { font: var(--rg-chiffre-s); font-weight: var(--rg-graisse-gras); font-style: normal; color: var(--rg-texte-secondaire); }
#evModal .evf__role.is-on .evf__role-n,
#icsModal .evf__role.is-on .evf__role-n { color: var(--rg-texte-principal); }
/* =========================================================
LA CARTE PILOTE : un bloc marine coupé à 30°, le numéro, la raie rose
========================================================= */
:root {
--pcard-l: 180px;
--pcard-h: 128px;
--pcard-num: 84px;
--pcard-coupe: .375;
--pcard-raie-a: .157;
--pcard-raie-b: .093;
--pcard-bloc: var(--rg-marine-5);
}
:root:not([data-theme="light"]) { --pcard-bloc: var(--rg-fond-surface-2); }
.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--pcard-l), 1fr)); gap: var(--rg-espace-4); }
.pcard {
display: flex;
flex-direction: column;
min-width: 0;
margin: 0;
padding: 0;
border: 0;
border-radius: var(--rg-rayon-0);
background: var(--rg-fond-surface);
color: var(--rg-texte-principal);
text-align: left;
cursor: pointer;
}
.pcard__bloc {
position: relative;
isolation: isolate;
display: block;
height: var(--pcard-h);
padding: var(--rg-espace-3);
color: var(--rg-neutre-blanc);
}
.pcard__bloc::before,
.pcard__bloc::after { content: ""; position: absolute; inset: 0; z-index: -1; }
.pcard__bloc::before {
background: var(--pcard-bloc);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--pcard-h) * var(--pcard-coupe)), calc(100% - var(--pcard-h) * var(--pcard-coupe) * var(--rg-pente)) 100%, 0 100%);
}
.pcard__bloc::after {
background: var(--rg-accent-defaut);
clip-path: polygon(calc(100% - var(--pcard-h) * var(--pcard-raie-a)) 100%, 100% calc(100% - var(--pcard-h) * var(--pcard-raie-a) / var(--rg-pente)), 100% calc(100% - var(--pcard-h) * var(--pcard-raie-b) / var(--rg-pente)), calc(100% - var(--pcard-h) * var(--pcard-raie-b)) 100%);
}
.pcard__k { display: block; font: var(--rg-label-s); letter-spacing: var(--rg-label-s-espacement); text-transform: uppercase; color: var(--rg-neutre-gris); }
.pcard__num {
display: block;
margin-top: var(--rg-espace-1);
overflow: hidden;
white-space: nowrap;
font: var(--rg-titre-style) var(--rg-graisse-noir) var(--pcard-num)/.88 var(--rg-police-titre);
color: var(--rg-neutre-blanc);
}
.pcard__n { display: block; overflow: hidden; padding: var(--rg-espace-3) var(--rg-espace-3) 0; white-space: nowrap; text-overflow: ellipsis; font: var(--rg-titre-h3); color: var(--rg-texte-principal); }
.pcard__r {
display: block;
overflow: hidden;
padding: var(--rg-espace-1) var(--rg-espace-3) var(--rg-espace-4);
white-space: nowrap;
text-overflow: ellipsis;
font: var(--rg-label-s);
letter-spacing: var(--rg-label-s-espacement);
text-transform: uppercase;
color: var(--rg-texte-secondaire);
}
.pcard:focus-visible .pcard__n { color: var(--rg-accent-defaut); }
@media (hover: hover) { .pcard:hover .pcard__n { color: var(--rg-accent-defaut); } }
.pcard.is-sansnum .pcard__num { margin-top: var(--rg-espace-3); font-size: calc(var(--pcard-num) * .5); color: var(--rg-neutre-gris); }
/* Roadbook : les pilotes posés sur la page, plus dans une bande marine */
body.rb-fil .rbxs__c--dr { padding: 0; background: none; color: var(--rg-texte-principal); }
body.rb-fil .rbxs__c--dr .rbxs__pill { color: var(--rg-texte-secondaire); }
body.rb-fil .rbxs__c--dr .rbxs__ch b { color: var(--rg-texte-principal); }
/* Crew : la carte du pilote ouvre la colonne de sa voiture */
.vtcar > .pcard { --pcard-h: 140px; --pcard-num: 96px; width: 100%; }
/* Sur téléphone, les lignes à cocher débordent pile du padding du corps, pas plus */
@media (max-width: 640px) {
#evModal .evf__roles,
#icsModal .evf__roles { margin: 0 calc(var(--rg-espace-5) * -1); }
}
/* =========================================================
MES NOTIFICATIONS (onglet du profil)
========================================================= */
.pfn { --pfn-trait-l: 10px; --pfn-trait-h: 14px; --pfn-trait-pied: 3px; }
#profilePanel .pfn { counter-reset: pf; }
.pfn__etat {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--rg-espace-4);
padding: var(--rg-espace-4);
border: var(--rg-trait-1) solid var(--rg-bord-defaut);
border-left: var(--rg-trait-repere) solid var(--rg-bord-fort);
background: var(--rg-fond-surface);
}
.pfn__etat.is-on { border-left-color: var(--rg-etat-succes); }
.pfn__etat.is-bloque { border-left-color: var(--rg-etat-erreur); }
.pfn__etat.is-ios { border-left-color: var(--rg-etat-attention); }
.pfn__etat-t { flex: 1 1 var(--rg-espace-9); min-width: 0; }
.pfn__etat-t b,
.pfn__l-t b { display: block; font: var(--rg-texte-m-fort); color: var(--rg-texte-principal); }
.pfn__etat-t em,
.pfn__l-t em { display: block; margin-top: var(--rg-espace-1); font: var(--rg-texte-s); font-style: normal; color: var(--rg-texte-secondaire); }
.pfn__liste { display: flex; flex-direction: column; border-top: var(--rg-trait-1) solid var(--rg-bord-defaut); }
.pfn__l {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--rg-espace-4);
width: 100%;
padding: var(--rg-espace-3) 0;
border-bottom: var(--rg-trait-1) solid var(--rg-bord-defaut);
}
.pfn__l-t { min-width: 0; }
.pfn__seg { align-self: flex-start; }
.pfn__aide { margin: 0; font: var(--rg-texte-s); color: var(--rg-texte-secondaire); }
.pfn__cat {
display: flex;
align-items: center;
gap: var(--rg-espace-2);
margin: var(--rg-espace-2) 0 0;
font: var(--rg-label-s);
letter-spacing: var(--rg-label-s-espacement);
text-transform: uppercase;
color: var(--rg-texte-secondaire);
}
.pfn__cat::before {
content: "";
width: var(--pfn-trait-l);
height: var(--pfn-trait-h);
background: var(--c);
clip-path: polygon(calc(100% - var(--pfn-trait-pied)) 0, 100% 0, var(--pfn-trait-pied) 100%, 0 100%);
}
.pfn__moments { display: flex; flex-wrap: wrap; gap: var(--rg-espace-2); }
.pfn__m {
height: var(--rg-btn-s-hauteur);
padding: 0 var(--rg-espace-3);
border: var(--rg-trait-1) solid var(--rg-bord-defaut);
border-radius: var(--rg-rayon-0);
background: var(--rg-fond-surface);
font: var(--rg-texte-s-fort);
color: var(--rg-texte-secondaire);
cursor: pointer;
}
@media (hover: hover) { .pfn__m:hover { border-color: var(--rg-bord-fort); color: var(--rg-texte-principal); } }
.pfn__m.is-on { border-color: var(--rg-texte-principal); background: var(--rg-texte-principal); color: var(--rg-texte-inverse); }
.pfn__ok { margin: 0; }