✶Nouveau : Oblitarium TV — les Cahiers deviennent une émission : photographies anciennes et disques 78 toursregarder → porte la classe .livrable-light.
Codes visuels d'assurance contemporaine : blanc aéré, turquoise
comme accent, gris anthracite pour le corps, sans-serif moderne.
Accents corail/ambre/vert d'eau pour les niveaux d'évaluation.
========================================================== */
/* Variables définies sur body (accessibles partout) sans cascade de couleur
pour ne pas affecter le sidebar dark. */
body.livrable-light {
/* Palette BATISKOR II — VERT SAPIN & CUIVRE.
Identité distincte d'Elitis, registre "stabilité, durabilité, prévention".
Le vert sapin évoque l'ancrage et la longévité ; le cuivre apporte un accent
chaleureux pour les moments d'emphase (prime, badge, hover). */
--la-bg: #FAFBFC; /* blanc cassé très léger */
--la-paper: #FFFFFF; /* blanc pur pour cartes */
--la-text: #2A2A2A; /* anthracite neutre */
--la-muted: #7A7A7A; /* gris moyen */
--la-line: #E0E5E8; /* ligne grise très douce */
--la-primary: #2D5B47; /* VERT SAPIN — couleur signature BATISKOR II */
--la-primary-deep: #1A3E2E; /* vert sapin profond — hover et contrastes */
--la-primary-light: #4A8B6F; /* vert sapin clair — accents secondaires */
--la-secondary: #E8EFE8; /* vert pâle — fonds doux */
--la-accent-cuivre: #B87333; /* CUIVRE — accent chaleureux (CTA, badge, emphase) */
--la-accent-cuivre-deep: #8A551F; /* cuivre profond — hover sur cuivre */
--la-excellent: #3DA68E; /* vert d'eau (indicateur fonctionnel de qualité) */
--la-bon: #7AC4B4; /* vert d'eau clair */
--la-moyen: #E89B47; /* ambre (indicateur d'alerte modérée) */
--la-mediocre: #D85959; /* corail (indicateur critique / monétaire) */
}
/* Le fond ivoire et la couleur anthracite ne s'appliquent qu'à la zone main,
PAS au sidebar qui doit conserver son thème dark de cockpit.
On redéfinit aussi les variables CSS du dark-theme dans ce scope, pour que
tous les éléments qui utilisent var(--muted), var(--panel), etc. inline
s'adaptent automatiquement à la palette Elitis. */
body.livrable-light .main-wrapper,
body.livrable-light .main {
background: var(--la-bg) !important;
color: var(--la-text) !important;
--bg: var(--la-bg);
--panel: var(--la-paper);
--panel2: var(--la-bg);
--line: var(--la-line);
--border: var(--la-line);
--text: var(--la-text);
--muted: var(--la-muted);
--accent: var(--la-primary);
--excellent: var(--la-excellent);
--bon: var(--la-bon);
--moyen: var(--la-moyen);
--mediocre: var(--la-mediocre);
}
/* Cards génériques : fond blanc, bordure et ombre douces */
body.livrable-light .main .card {
background: var(--la-paper);
border: 1px solid var(--la-line);
box-shadow: 0 1px 4px rgba(45,91,71,0.05);
}
body.livrable-light .main .card h2,
body.livrable-light .main .card h3,
body.livrable-light .main .card h4 {
color: var(--la-primary);
}
/* Force la couleur du texte sur les blocs colorés sombres hérités du dark mode :
neutralise les "color: #cbd5e1", "color: #e2e8f0" et autres écritures claires. */
body.livrable-light .main [style*="color: #cbd5e1"],
body.livrable-light .main [style*="color:#cbd5e1"],
body.livrable-light .main [style*="color: #e2e8f0"],
body.livrable-light .main [style*="color:#e2e8f0"],
body.livrable-light .main [style*="color: #94a3b8"],
body.livrable-light .main [style*="color:#94a3b8"],
body.livrable-light .main [style*="color: #d4d4d4"],
body.livrable-light .main [style*="color:#d4d4d4"] {
color: var(--la-text) !important;
}
/* Neutralise les fonds dégradés sombres hérités du dark mode dans la zone main
(linear-gradient avec rgba colorées pastel sur sombre — illisibles sur blanc) */
body.livrable-light .main .card[style*="linear-gradient"] {
background: var(--la-paper) !important;
border-left: 4px solid var(--la-primary);
}
body.livrable-light .main .card[style*="rgba(239,68,68"] { border-left-color: var(--la-mediocre); }
body.livrable-light .main .card[style*="rgba(251,191,36"] { border-left-color: var(--la-moyen); }
body.livrable-light .main .card[style*="rgba(124,58,237"] { border-left-color: var(--la-primary); }
/* Cartouches "VOLET A / B / C" et badges Bêta — uniformiser en turquoise */
body.livrable-light .main span[style*="linear-gradient(135deg,#3b82f6,#7c3aed)"],
body.livrable-light .main span[style*="linear-gradient(135deg,#7c3aed,#ec4899)"],
body.livrable-light .main span[style*="linear-gradient(135deg,#ec4899,#f43f5e)"],
body.livrable-light .main span[style*="linear-gradient(135deg,#7c3aed,#ec4899)"] {
background: var(--la-primary) !important;
color: #fff !important;
}
/* Pastilles colorées d'état (rgba violet/rose sur sombre) → corail/ambre/turquoise */
body.livrable-light .main div[style*="rgba(168,85,247,0.12); color: #a855f7"],
body.livrable-light .main div[style*="rgba(168,85,247,0.12); color:#a855f7"] {
background: rgba(160,214,224,0.30) !important;
color: var(--la-primary) !important;
}
body.livrable-light .main span[style*="rgba(236,72,153,0.14); color: #f472b6"],
body.livrable-light .main span[style*="rgba(236,72,153,0.14); color:#f472b6"] {
background: rgba(232,155,71,0.16) !important;
color: #B97524 !important;
}
body.livrable-light .main span[style*="rgba(96,165,250,0.12); color: #60a5fa"],
body.livrable-light .main span[style*="rgba(96,165,250,0.12); color:#60a5fa"] {
background: rgba(45,91,71,0.10) !important;
color: var(--la-primary) !important;
}
body.livrable-light .main button[style*="rgba(96,165,250,0.18); color: #93c5fd"] {
background: var(--la-primary) !important;
color: #fff !important;
border-color: var(--la-primary) !important;
}
/* Tableaux dans la zone main — lignes propres */
body.livrable-light .main table { color: var(--la-text); }
body.livrable-light .main th { color: var(--la-primary); }
/* Carte Leaflet BBR — encadrement clair */
body.livrable-light #bbr-map {
background: #e8edf0 !important;
}
/* Marqueur BBR — dot central + halo pulsant pour attirer l'œil sans gêner */
.bbr-pin { position: relative; width: 28px; height: 28px; pointer-events: auto; }
.bbr-pin-dot {
position: absolute;
top: 50%; left: 50%;
width: 14px; height: 14px;
margin: -7px 0 0 -7px;
border-radius: 50%;
border: 2px solid white;
box-shadow: 0 1px 4px rgba(0,0,0,0.55);
z-index: 2;
}
.bbr-pin-halo {
position: absolute;
top: 50%; left: 50%;
width: 28px; height: 28px;
margin: -14px 0 0 -14px;
border-radius: 50%;
opacity: 0.5;
animation: bbrPulse 2s ease-out infinite;
z-index: 1;
}
@keyframes bbrPulse {
0% { transform: scale(0.6); opacity: 0.55; }
70% { transform: scale(1.4); opacity: 0; }
100% { transform: scale(1.4); opacity: 0; }
}
.bbr-pin:hover .bbr-pin-dot {
transform: scale(1.15);
transition: transform 0.15s ease;
}
body.livrable-light .main .card div[style*="rgba(15,23,42,0.92)"] {
background: rgba(255,255,255,0.95) !important;
color: var(--la-text) !important;
border-color: var(--la-line) !important;
box-shadow: 0 4px 12px rgba(45,91,71,0.15) !important;
}
body.livrable-light .main .card div[style*="rgba(15,23,42,0.92)"] div[style*="color: #94a3b8"],
body.livrable-light .main .card div[style*="rgba(15,23,42,0.92)"] div[style*="color:#94a3b8"] {
color: var(--la-primary) !important;
}
/* Warning text jaune (#fbbf24) sur fond clair — passe en ambre lisible */
body.livrable-light .main p[style*="color: #fbbf24"],
body.livrable-light .main p[style*="color:#fbbf24"] {
color: #B97524 !important;
background: rgba(232,155,71,0.10);
padding: 10px 14px;
border-radius: 6px;
border-left: 3px solid var(--la-moyen);
}
/* Boutons .btn et .btn-mini en livrable : couleur primaire turquoise */
body.livrable-light .main .btn,
body.livrable-light .main .btn-mini {
background: var(--la-primary);
color: #fff;
border: 1px solid var(--la-primary);
}
body.livrable-light .main .btn:hover,
body.livrable-light .main .btn-mini:hover {
background: #1A3E2E;
border-color: #1A3E2E;
}
/* Cartes "stats" du dashboard BBR (chiffres en couleur) — adoucies */
body.livrable-light .main div[style*="color:var(--accent)"],
body.livrable-light .main div[style*="color: var(--accent)"] {
color: var(--la-primary) !important;
}
body.livrable-light .main div[style*="color:#10b981"],
body.livrable-light .main div[style*="color: #10b981"] {
color: var(--la-excellent) !important;
}
body.livrable-light .main div[style*="color:#f97316"],
body.livrable-light .main div[style*="color: #f97316"] {
color: var(--la-moyen) !important;
}
body.livrable-light .main div[style*="color:#ec4899"],
body.livrable-light .main div[style*="color: #ec4899"] {
color: var(--la-mediocre) !important;
}
body.livrable-light .main div[style*="color:#60a5fa"],
body.livrable-light .main div[style*="color: #60a5fa"] {
color: var(--la-primary-light) !important;
}
/* Header section principal en livrable */
body.livrable-light .main .header h2 { color: var(--la-primary); }
body.livrable-light .main .header .meta { color: var(--la-muted); }
/* Bandeau thématique de page — sobre */
body.livrable-light .page-theme-banner {
background: var(--la-primary) !important;
color: var(--la-bg) !important;
border-radius: 0;
letter-spacing: 2px;
font-weight: 600;
font-size: 12px;
}
/* Sommaire interactif — fond clair */
body.livrable-light .doc-toc {
background: var(--la-paper);
border: 1px solid var(--la-line);
box-shadow: 0 2px 8px rgba(45,91,71,0.06);
}
body.livrable-light .doc-toc-title { color: var(--la-primary); }
body.livrable-light .doc-toc-search {
background: var(--la-bg);
border-color: var(--la-line);
}
body.livrable-light .doc-toc-search input { color: var(--la-text); }
body.livrable-light .doc-toc-search input::placeholder { color: var(--la-secondary); }
body.livrable-light .doc-toc-item {
background: var(--la-bg);
border-color: var(--la-line);
color: var(--la-text);
}
body.livrable-light .doc-toc-item:hover {
background: var(--la-primary);
color: var(--la-bg);
border-color: var(--la-primary);
}
/* Bouton Imprimer/PDF */
body.livrable-light .btn-print,
body.livrable-light .btn {
background: var(--la-primary) !important;
color: var(--la-bg) !important;
border: none !important;
}
body.livrable-light .btn:hover { background: #1A3E2E !important; }
body.livrable-light .btn.ghost {
background: var(--la-paper) !important;
color: var(--la-primary) !important;
border: 1px solid var(--la-line) !important;
}
/* Conteneur Rapport */
body.livrable-light .report { color: var(--la-text); }
body.livrable-light .report .cover {
background: var(--la-paper);
border: 1px solid var(--la-line);
border-top: 4px solid var(--la-primary);
box-shadow: 0 2px 12px rgba(45,91,71,0.05);
}
body.livrable-light .report .cover h1 {
color: var(--la-primary);
font-weight: 600;
letter-spacing: -0.01em;
}
body.livrable-light .report .cover .subtitle {
color: var(--la-muted);
font-weight: 400;
}
/* Note globale */
body.livrable-light .report .global-note .num { color: var(--la-primary); }
body.livrable-light .report .global-note .label { color: var(--la-muted); }
body.livrable-light .avis-fav { background: rgba(61,166,142,0.12); color: var(--la-excellent); }
body.livrable-light .avis-res { background: rgba(232,155,71,0.14); color: #B97524; }
body.livrable-light .avis-def { background: rgba(216,89,89,0.10); color: var(--la-mediocre); }
/* Gauges */
body.livrable-light .gauge-r {
background: var(--la-paper);
border: 1px solid var(--la-line);
}
body.livrable-light .gauge-r .gname { color: var(--la-muted); }
body.livrable-light .gauge-r .gname b { color: var(--la-text); }
body.livrable-light .gauge-r .gbar { background: var(--la-line); }
/* Sections */
body.livrable-light .report .sec {
background: var(--la-paper);
border: 1px solid var(--la-line);
box-shadow: 0 1px 4px rgba(45,91,71,0.04);
}
body.livrable-light .report .sec h2 {
color: var(--la-primary);
border-bottom: 1px solid var(--la-line);
font-weight: 600;
letter-spacing: -0.005em;
}
body.livrable-light .report .kv dt { color: var(--la-muted); }
body.livrable-light .report .kv dd { color: var(--la-text); }
/* Garanties */
body.livrable-light .report .gar-detail {
background: var(--la-bg);
border-left: 4px solid var(--la-primary);
}
body.livrable-light .report .gar-detail.ok { border-left-color: var(--la-excellent); }
body.livrable-light .report .gar-detail.warn { border-left-color: var(--la-moyen); }
body.livrable-light .report .gar-detail.bad { border-left-color: var(--la-mediocre); }
body.livrable-light .report .gar-detail .car {
border-top-color: var(--la-line) !important;
}
body.livrable-light .report .gar-detail .car .loc { color: var(--la-muted); }
body.livrable-light .report .gar-detail .car .com {
color: var(--la-text);
font-style: italic;
}
body.livrable-light .report .gar-detail .car .note.bon { background: var(--la-bon); color: #fff; }
body.livrable-light .report .gar-detail .car .note.moyen { background: var(--la-moyen); color: #fff; }
body.livrable-light .report .gar-detail .car .note.mediocre { background: var(--la-mediocre); color: #fff; }
/* Actions A/B/C */
body.livrable-light .report .action-row {
border-top-color: var(--la-line) !important;
}
body.livrable-light .report .action-row .cl.cl-A { background: var(--la-mediocre); color: #fff; }
body.livrable-light .report .action-row .cl.cl-B { background: var(--la-moyen); color: #fff; }
body.livrable-light .report .action-row .cl.cl-C { background: var(--la-secondary); color: #fff; }
/* Légende A/B/C en tête du Plan d'actions du Rapport assureur */
body.livrable-light .report .rapport-abc-legend {
background: #fffbea;
border: 1px solid #f4e4a8;
border-radius: 6px;
padding: 10px 14px;
margin: 10px 0 14px;
font-size: 12px;
color: var(--la-text);
display: flex; flex-direction: column; gap: 5px;
}
body.livrable-light .report .rapport-abc-chip {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px;
border-radius: 4px;
font-weight: 800; font-size: 11px;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
color: #fff; margin-right: 6px; vertical-align: middle;
}
body.livrable-light .report .rapport-abc-chip.cl-A { background: #b91c1c; }
body.livrable-light .report .rapport-abc-chip.cl-B { background: #b45309; }
body.livrable-light .report .rapport-abc-chip.cl-C { background: var(--la-primary); }
/* Délai prescrit sur chaque action B du Rapport */
body.livrable-light .report .rapport-deadline {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 8px;
background: #fef3c7; color: #92400e;
border-radius: 4px;
font-size: 11.5px; font-weight: 600;
}
body.livrable-light .report .rapport-deadline-missing {
background: #fee2e2; color: #991b1b;
}
/* Saisie inline du délai prescrit dans le Plan d'actions B */
body.livrable-light .report .rapport-deadline-edit {
display: inline-flex; align-items: center; gap: 8px;
margin-top: 4px;
padding: 4px 10px;
background: #fef3c7;
border-left: 3px solid #f59e0b;
border-radius: 0 4px 4px 0;
}
body.livrable-light .report .rapport-deadline-edit label {
font-size: 11.5px; font-weight: 600; color: #92400e; letter-spacing: 0.2px;
}
body.livrable-light .report .rapport-deadline-edit input[type="date"] {
background: #fff; color: var(--la-text);
border: 1px solid #d4a017;
border-radius: 4px;
padding: 3px 6px;
font-family: inherit; font-size: 12px;
}
body.livrable-light .report .rapport-deadline-edit input[type="date"]:focus {
outline: none; border-color: #b45309;
box-shadow: 0 0 0 2px rgba(180, 83, 9, 0.20);
}
/* Détail du calcul de score par garantie */
body.livrable-light .report .score-detail {
margin-top: 4px;
font-size: 11px; color: var(--la-muted); font-style: italic;
}
/* Jauge agrégée "Garantie Incendie multi-périls" — mise en avant, convention Assuralia.
C'est CE score que l'assureur lit en premier ; les sous-garanties sont le détail technique. */
body.livrable-light .report .gauge-aggregate {
margin: 14px 0 18px;
padding: 14px 18px;
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
border: 1px solid #d4a017;
border-left: 5px solid #b45309;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(180, 83, 9, 0.10);
}
body.livrable-light .report .gauge-aggregate-head {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 16px;
margin-bottom: 8px;
}
body.livrable-light .report .gauge-aggregate-title {
font-size: 15px; font-weight: 700;
color: #78350f; letter-spacing: 0.3px;
text-transform: uppercase;
}
body.livrable-light .report .gauge-aggregate-sub {
font-size: 11px; color: #92400e; font-style: italic; margin-top: 2px;
}
body.livrable-light .report .gauge-aggregate-score {
font-size: 28px; font-weight: 800;
line-height: 1; white-space: nowrap;
}
body.livrable-light .report .gauge-aggregate-score span {
font-size: 14px; color: var(--la-muted); font-weight: 500; margin-left: 2px;
}
body.livrable-light .report .gauge-aggregate-compos {
margin-top: 8px;
font-size: 11px; color: #78350f; font-style: italic;
}
/* Bloc dépliable « Voir le calcul » sous le score global : montre comment on
arrive au chiffre (somme des garanties cotées ÷ nombre de garanties). */
body.livrable-light .report .global-calc {
margin-top: 10px; padding-top: 10px;
border-top: 1px dashed #d4a017;
}
body.livrable-light .report .global-calc summary {
cursor: pointer;
font-size: 12px; font-weight: 700;
color: #78350f;
list-style: none;
user-select: none;
padding: 4px 0;
}
body.livrable-light .report .global-calc summary::-webkit-details-marker { display: none; }
body.livrable-light .report .global-calc[open] summary { padding-bottom: 8px; }
body.livrable-light .report .global-calc-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
background: rgba(255,255,255,0.45);
border-radius: 6px;
overflow: hidden;
}
body.livrable-light .report .global-calc-table th {
text-align: left;
padding: 6px 10px;
background: rgba(180, 83, 9, 0.10);
color: #78350f;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
font-size: 10px;
}
body.livrable-light .report .global-calc-table td {
padding: 5px 10px;
border-bottom: 1px dashed #e7d49e;
color: var(--la-text);
}
body.livrable-light .report .global-calc-table th:last-child,
body.livrable-light .report .global-calc-table td:last-child { text-align: right; width: 90px; }
body.livrable-light .report .global-calc-table tfoot tr td {
background: rgba(180, 83, 9, 0.06);
border-bottom: 1px solid #d4a017;
font-weight: 600;
}
body.livrable-light .report .global-calc-table tfoot tr.result-row td {
background: rgba(180, 83, 9, 0.14);
font-size: 13px;
border-top: 2px solid #b45309;
border-bottom: none;
}
body.livrable-light .report .gauge-aggregate .gbar {
height: 8px;
background: rgba(120, 53, 15, 0.15);
border-radius: 4px;
overflow: hidden;
}
body.livrable-light .report .gauge-aggregate .gbar > div { height: 100%; transition: width 0.3s ease; }
/* Sous-titre "Détail technique par péril" qui précède le bloc des sous-garanties */
body.livrable-light .report .gauges-subtitle {
font-size: 11px; color: var(--la-muted); font-weight: 700;
letter-spacing: 0.8px; text-transform: uppercase;
margin: 10px 0 8px; padding-bottom: 4px;
border-bottom: 1px dashed var(--la-line);
}
/* Numéro de garantie (1., 2., 3...) — pour signaler l'ensemble énuméré */
body.livrable-light .report .gnum {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px;
background: var(--la-primary); color: #fff;
border-radius: 4px;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 11px; font-weight: 700;
margin-right: 8px;
flex-shrink: 0;
}
body.livrable-light .report .gauge-r .gname { display: flex; align-items: center; gap: 0; }
body.livrable-light .report .gauge-r .gname b { flex: 1; }
body.livrable-light .report .gnum-h3 {
width: 26px; height: 26px;
font-size: 12px;
vertical-align: middle;
}
/* Badge "prov." à côté du score garantie tant que l'inspection sur cette garantie n'est pas complète */
body.livrable-light .report .gauge-prov {
display: inline-block;
margin-left: 6px;
padding: 1px 6px;
background: #fef3c7; color: #92400e;
border-radius: 3px;
font-size: 9.5px; font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
vertical-align: middle;
cursor: help;
}
/* Compteur de complétion sous chaque jauge ("3/12 cotées · 1 N/A") */
body.livrable-light .report .gauge-completion {
margin-top: 4px;
font-size: 10.5px; color: var(--la-muted); font-style: italic;
}
/* Avertissement de représentativité (moins de 3 questions cotées) */
body.livrable-light .report .score-warn {
margin-top: 6px;
padding: 6px 10px;
background: #fef3c7; color: #92400e;
border-left: 3px solid #f59e0b;
border-radius: 0 4px 4px 0;
font-size: 11.5px; font-style: normal; font-weight: 500;
}
/* Bloc dépliable « voir le détail » : liste toutes les questions cotées
avec leur note et leur score individuel. Permet à l'expert de réconcilier
le score affiché avec les questions effectivement remplies. */
body.livrable-light .report .score-audit {
margin-top: 10px;
background: #f8fafc;
border: 1px solid var(--la-line);
border-radius: 6px;
padding: 6px 10px;
}
body.livrable-light .report .score-audit summary {
cursor: pointer;
font-style: normal;
font-weight: 600;
font-size: 12px;
color: var(--la-primary);
padding: 4px 0;
list-style: none;
user-select: none;
}
body.livrable-light .report .score-audit summary::-webkit-details-marker { display: none; }
body.livrable-light .report .score-audit[open] summary { border-bottom: 1px solid var(--la-line); padding-bottom: 8px; margin-bottom: 8px; }
body.livrable-light .report .score-audit-table {
width: 100%;
border-collapse: collapse;
font-style: normal;
font-size: 11.5px;
color: var(--la-text);
}
body.livrable-light .report .score-audit-table th {
text-align: left;
font-weight: 700;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 0.5px;
color: var(--la-muted);
padding: 6px 8px;
border-bottom: 1px solid var(--la-line);
}
body.livrable-light .report .score-audit-table td {
padding: 5px 8px;
border-bottom: 1px dashed #e2e8f0;
vertical-align: top;
}
body.livrable-light .report .score-audit-table tr:last-child td { border-bottom: none; }
body.livrable-light .report .audit-note {
display: inline-block;
padding: 1px 6px;
border-radius: 3px;
font-size: 10.5px;
font-weight: 600;
}
body.livrable-light .report .audit-note.excellent { background: #d1fae5; color: #065f46; }
body.livrable-light .report .audit-note.bon { background: #d1fae5; color: #047857; }
body.livrable-light .report .audit-note.moyen { background: #fef3c7; color: #92400e; }
body.livrable-light .report .audit-note.mediocre { background: #fee2e2; color: #991b1b; }
body.livrable-light .report .audit-mediocre td,
body.livrable-light .report .audit-moyen td { background: rgba(252, 165, 165, 0.03); }
/* Ligne de la Banque de questions : cliquable pour ouvrir l'édition */
.qb-row { transition: background 0.15s ease; }
.qb-row:hover { background: rgba(96, 165, 250, 0.08) !important; }
.qb-row:hover td { color: var(--text); }
/* Pills de statut dans le détail complet par garantie */
body.livrable-light .report .statut-pill {
display: inline-block; padding: 1px 7px;
border-radius: 3px; font-size: 10.5px; font-weight: 600; white-space: nowrap;
}
body.livrable-light .report .statut-cotee { background: #d1fae5; color: #047857; }
body.livrable-light .report .statut-vide { background: rgba(120,130,140,0.15); color: #6b7785; }
body.livrable-light .report .statut-na { background: rgba(180, 90, 90, 0.14); color: #991b1b; }
body.livrable-light .report .audit-vide td { background: rgba(120, 130, 140, 0.03); color: var(--la-muted); }
body.livrable-light .report .audit-na td { background: rgba(180, 90, 90, 0.04); color: var(--la-muted); }
/* Photos */
body.livrable-light .report .photos-grid img {
border: 1px solid var(--la-line);
box-shadow: 0 1px 4px rgba(45,91,71,0.06);
}
/* Renvoi Bibliothèque */
/* Hover effect sur le renvoi Bibliothèque (rapport assureur) */
.rap-biblio-clickable:hover {
background: #233044 !important;
border-left-color: #a3e635 !important;
box-shadow: 0 4px 16px rgba(0,0,0,0.30);
}
body.livrable-light .rap-biblio-clickable:hover {
background: var(--la-bg) !important;
}
body.livrable-light .report .sec[id="rap-biblio-ref"] {
background: var(--la-bg) !important;
border-left: 4px solid var(--la-primary) !important;
}
/* Pied de page */
body.livrable-light .report .sec[id="rap-pied"] {
background: transparent !important;
border: none !important;
box-shadow: none !important;
color: var(--la-muted) !important;
}
/* Modal de référence légale dans contexte livrable — reste lisible */
body.livrable-light .law-modal {
background: var(--la-paper);
color: var(--la-text);
border-color: var(--la-line);
}
body.livrable-light .law-modal-header {
background: var(--la-bg);
border-bottom-color: var(--la-line);
}
body.livrable-light .law-modal-header h3 { color: var(--la-primary); }
body.livrable-light .law-modal-content p { color: var(--la-text); }
/* --- Bibliothèque --- */
body.livrable-light .biblio .pdv-block {
background: var(--la-paper);
border: 1px solid var(--la-line);
box-shadow: 0 1px 4px rgba(45,91,71,0.04);
}
body.livrable-light .biblio .pdv-block h2 {
color: var(--la-primary);
border-bottom: 1px solid var(--la-line);
font-weight: 600;
letter-spacing: -0.005em;
}
body.livrable-light .biblio .obs { border-top: 1px dashed var(--la-line); }
body.livrable-light .biblio .obs-title { color: var(--la-text); }
body.livrable-light .biblio .obs-tag.excellent { background: var(--la-excellent); color: #fff; }
body.livrable-light .biblio .obs-tag.bon { background: var(--la-bon); color: #fff; }
body.livrable-light .biblio .obs-tag.moyen { background: var(--la-moyen); color: #fff; }
body.livrable-light .biblio .obs-tag.mediocre { background: var(--la-mediocre); color: #fff; }
body.livrable-light .biblio .obs-tag.nc { background: var(--la-secondary); color: #fff; opacity: 0.7; }
body.livrable-light .biblio .obs-tag.observation { background: var(--la-secondary); color: #fff; opacity: 0.85; }
body.livrable-light .biblio .obs-meta { color: var(--la-muted); }
body.livrable-light .biblio .obs-meta .gar { color: var(--la-primary); font-weight: 600; }
body.livrable-light .biblio .obs-meta .loi { color: #6B4E8C; } /* violet feutré */
body.livrable-light .biblio .obs-comment { color: var(--la-text); }
body.livrable-light .biblio .stats {
background: var(--la-bg);
border: 1px solid var(--la-line);
border-radius: 6px;
padding: 14px;
}
body.livrable-light .biblio .stat { background: var(--la-paper); border: 1px solid var(--la-line); }
/* === BIBLIOTHÈQUE PREMIUM — Refonte design ===
Pour le livrable vitrine commercial : pages A4 paginées, jauges visuelles
pour les notations, légendes sous photos, citations alignées à gauche. */
/* Conteneur de pages A4 — visualisation paginée à l'écran et impression propre */
body.livrable-light .biblio-document {
background: #ECEFF2;
padding: 24px 0;
margin: 0;
}
body.livrable-light .biblio-page {
width: 210mm;
min-height: 297mm;
margin: 0 auto 24px;
padding: 22mm 18mm 24mm 30mm; /* padding-left élargi pour le bandeau écosystème */
background: var(--la-paper);
box-shadow: 0 10px 32px rgba(0,0,0,0.16), 0 2px 6px rgba(0,0,0,0.08);
position: relative;
box-sizing: border-box;
font-size: 11.5pt;
line-height: 1.55;
color: var(--la-text);
overflow: hidden; /* le bandeau et l'accent s'arrêtent au bord de la page */
}
/* Le bandeau et la barre accent sont enfants de chaque .biblio-page (et non du wrapper),
donc s'arrêtent bien à la fin de chaque A4 — frontière entre pages clairement visible. */
body.livrable-light .biblio-page .elitis-side-banner {
top: 0; bottom: 0; left: 0;
width: 18mm;
background: #2D5B47;
}
body.livrable-light .biblio-page .livrable-accent-bar {
top: 0; bottom: 0;
left: 18mm;
width: 2.5mm;
}
body.livrable-light .biblio-page-header {
display: flex; justify-content: space-between; align-items: center;
font-size: 9.5pt;
color: var(--la-muted);
letter-spacing: 0.04em;
text-transform: uppercase;
padding-bottom: 10mm;
margin-bottom: 8mm;
border-bottom: 1px solid var(--la-line);
}
body.livrable-light .biblio-page-header .bp-brand {
font-weight: 700;
color: var(--la-primary);
letter-spacing: 0.18em;
}
body.livrable-light .biblio-page-footer {
position: absolute;
bottom: 14mm; left: 18mm; right: 18mm;
display: flex; justify-content: space-between; align-items: center;
font-size: 9pt; color: var(--la-muted);
border-top: 1px solid var(--la-line);
padding-top: 6mm;
}
body.livrable-light .biblio-page-footer .bp-num {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-weight: 700;
color: var(--la-primary);
}
/* Page de garde — design éditorial */
body.livrable-light .biblio-page.biblio-cover {
display: flex; flex-direction: column; justify-content: center; align-items: center;
text-align: center;
}
body.livrable-light .biblio-cover .logos-row {
display: flex; gap: 32px; align-items: center; justify-content: center;
margin-bottom: 28mm;
padding-bottom: 16mm;
border-bottom: 1px solid var(--la-line);
width: 100%;
}
body.livrable-light .biblio-cover h1 {
font-size: 32pt; font-weight: 700; color: var(--la-primary);
margin: 0 0 10mm; letter-spacing: -0.01em; line-height: 1.1;
}
body.livrable-light .biblio-cover .cover-subtitle {
font-size: 13pt; color: var(--la-text); margin-bottom: 4mm;
}
body.livrable-light .biblio-cover .cover-ref {
font-size: 10.5pt; color: var(--la-muted); margin-bottom: 18mm;
font-family: ui-monospace, monospace;
}
body.livrable-light .biblio-cover .cover-intro {
font-size: 11pt; color: var(--la-text); line-height: 1.7;
max-width: 130mm; text-align: justify; margin: 0 auto 18mm;
}
body.livrable-light .biblio-cover .cover-intro strong { color: var(--la-primary); font-weight: 600; }
body.livrable-light .biblio-cover .stats {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 8mm;
width: 100%; padding: 14mm 0 0; border-top: 1px solid var(--la-line);
}
body.livrable-light .biblio-cover .stat {
text-align: center; padding: 8mm 4mm;
background: var(--la-bg); border: 1px solid var(--la-line); border-radius: 4px;
}
body.livrable-light .biblio-cover .stat .num {
font-size: 24pt; font-weight: 700; line-height: 1; margin-bottom: 3mm;
font-family: ui-monospace, monospace;
}
body.livrable-light .biblio-cover .stat .lbl {
font-size: 9pt; color: var(--la-muted);
text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600;
}
/* Page PdV — titre éditorial */
body.livrable-light .biblio-pdv-title {
font-size: 14pt; font-weight: 700; color: var(--la-primary);
margin: 0 0 2mm; letter-spacing: -0.005em;
}
body.livrable-light .biblio-pdv-section {
font-size: 9.5pt; color: var(--la-accent-cuivre);
text-transform: uppercase; letter-spacing: 0.2em; font-weight: 700;
margin-bottom: 10mm;
}
/* Observation — bloc compact et élégant */
body.livrable-light .obs-block {
margin-bottom: 10mm;
padding-bottom: 8mm;
border-bottom: 1px solid var(--la-line);
}
body.livrable-light .obs-block:last-child { border-bottom: none; }
body.livrable-light .obs-block-head {
display: flex; gap: 10px; align-items: baseline; margin-bottom: 3mm;
}
body.livrable-light .obs-block-num {
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
min-width: 28px; height: 24px;
padding: 0 7px;
background: rgba(45,91,71,0.10);
color: var(--la-primary);
border: 1px solid rgba(45,91,71,0.30);
border-radius: 4px;
font-size: 11pt; font-weight: 700;
font-family: ui-monospace, monospace;
line-height: 1;
}
body.livrable-light .obs-block-title {
flex: 1;
font-size: 11pt; font-weight: 600; color: var(--la-primary-deep);
line-height: 1.4;
}
body.livrable-light .obs-block-meta {
display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
font-size: 9.5pt; color: var(--la-muted);
margin-bottom: 4mm; padding-left: 38px;
}
body.livrable-light .obs-block-meta .meta-gar {
font-weight: 700; color: var(--la-primary); text-transform: uppercase; letter-spacing: 0.05em;
font-size: 10pt;
}
/* Type de question (préventif, aggravant, limitatif…) — discret, en italique gris.
Préfixé "type :" pour clarifier qu'il s'agit d'un attribut de classification, pas d'une
évaluation. Le terme "aggravant" ne doit pas être lu comme "situation grave" mais comme
"facteur d'aggravation potentielle si sinistre". Tooltip pour explication complète. */
body.livrable-light .obs-block-meta .meta-type {
color: var(--la-muted);
font-style: italic;
font-size: 8.5pt;
text-transform: lowercase;
letter-spacing: 0.02em;
font-weight: 400;
}
body.livrable-light .obs-block-meta .meta-loi {
color: var(--la-primary-light); cursor: pointer; text-decoration: underline; text-decoration-style: dotted;
font-size: 9pt;
}
/* Référence légale cliquable dans le Rapport assureur (Analyse détaillée par garantie).
Style cohérent avec la version Bibliothèque mais adapté au contraste du Rapport. */
body.livrable-light .report .meta-loi,
.meta-loi {
display: inline-block;
color: #7c3aed;
cursor: pointer;
text-decoration: underline;
text-decoration-style: dotted;
font-weight: 600;
padding: 1px 6px;
background: rgba(124, 58, 237, 0.08);
border-radius: 3px;
transition: all 0.15s ease;
}
body.livrable-light .report .meta-loi:hover,
.meta-loi:hover {
background: rgba(124, 58, 237, 0.18);
color: #5b21b6;
text-decoration-style: solid;
}
/* === JAUGE NOTATION ===
Remplace le badge texte "BON 75%" par une jauge visuelle élégante :
barre de progression colorée + libellé naturel "Bon — 75% des éléments observés". */
body.livrable-light .obs-rating {
margin: 4mm 0 4mm 38px; max-width: 100mm;
}
body.livrable-light .rating-track {
height: 8px;
background: #ECEFF2;
border-radius: 4px;
position: relative;
overflow: hidden;
border: 1px solid var(--la-line);
}
body.livrable-light .rating-fill {
position: absolute; top: 0; left: 0; height: 100%;
border-radius: 3px;
/* width inline + couleur via classe note */
}
body.livrable-light .rating-fill.excellent { background: var(--la-excellent); }
body.livrable-light .rating-fill.bon { background: var(--la-bon); }
body.livrable-light .rating-fill.moyen { background: var(--la-moyen); }
body.livrable-light .rating-fill.mediocre { background: var(--la-mediocre); }
body.livrable-light .rating-fill.observation { background: var(--la-secondary); }
body.livrable-light .rating-label {
display: flex; gap: 8px; align-items: baseline;
margin-top: 4px; font-size: 9.5pt;
}
body.livrable-light .rating-note {
font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}
body.livrable-light .rating-note.excellent { color: var(--la-excellent); }
body.livrable-light .rating-note.bon { color: #4CB3A0; }
body.livrable-light .rating-note.moyen { color: var(--la-moyen); }
body.livrable-light .rating-note.mediocre { color: var(--la-mediocre); }
body.livrable-light .rating-note.observation { color: var(--la-primary); }
body.livrable-light .rating-prop { color: var(--la-muted); font-style: italic; }
/* === PHOTOS AVEC LÉGENDES === */
body.livrable-light .obs-photos-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(70mm, 1fr));
gap: 6mm;
margin: 4mm 0 4mm 38px;
}
body.livrable-light .obs-figure {
margin: 0; display: flex; flex-direction: column;
}
/* === OMBRE POLYGONALE — TECHNIQUE box-shadow CORNER-LIFT ===
Trois couches d'ombre sur l'image :
1) ombre douce de base sous toute l'image (legère)
2) ombre marquée sous le COIN BAS GAUCHE (offset -X +Y, spread négatif)
3) ombre marquée sous le COIN BAS DROIT (offset +X +Y, spread négatif)
Le spread négatif "découpe" l'ombre pour qu'elle n'apparaisse qu'aux endroits
où il y a effectivement un offset → résultat polygonal : coins assombris, milieu clair.
Plus fiable que les pseudo-éléments dans tous les contextes de mise en page. */
body.livrable-light .obs-figure img {
width: 100%; aspect-ratio: 4/3; object-fit: cover;
border-radius: 3px; cursor: pointer;
background: #fff;
box-shadow:
0 3px 6px rgba(0,0,0,0.10),
-18px 22px 32px -14px rgba(0,0,0,0.55),
18px 22px 32px -14px rgba(0,0,0,0.55);
}
/* Classe générique pour Rapport / Carnet — exactement le même rendu */
body.livrable-light .lifted-photo img,
body.livrable-light img.lifted-photo {
border-radius: 3px;
background: #fff;
display: block;
box-shadow:
0 3px 6px rgba(0,0,0,0.10),
-18px 22px 32px -14px rgba(0,0,0,0.55),
18px 22px 32px -14px rgba(0,0,0,0.55);
}
body.livrable-light .obs-figcaption {
margin-top: 2mm;
font-size: 9.5pt; color: var(--la-text);
font-style: italic; line-height: 1.4;
padding: 0 1mm;
}
body.livrable-light .obs-figcaption-empty { color: var(--la-muted); font-size: 9pt; }
/* === CITATION COMMENTAIRE — alignée à gauche, élégante === */
body.livrable-light .obs-quote {
margin: 5mm 0 0 38px;
padding: 4mm 6mm;
background: var(--la-bg);
border-left: 3px solid var(--la-primary);
border-radius: 0 4px 4px 0;
font-size: 11pt; line-height: 1.6;
color: var(--la-text);
text-align: left;
font-style: italic;
}
body.livrable-light .obs-quote::before {
content: "«";
font-size: 18pt; line-height: 0;
color: var(--la-primary-light); vertical-align: -6px;
margin-right: 4px; font-style: normal;
}
body.livrable-light .obs-quote::after {
content: "»";
font-size: 18pt; line-height: 0;
color: var(--la-primary-light); vertical-align: -6px;
margin-left: 4px; font-style: normal;
}
/* === VAGUE DE COUVERTURE (signature visuelle, inspirée AG Assurances) ===
Vague en vert pomme fluo qui descend du haut de la page, accueillant le logo
et la baseline. Reprend le vocabulaire visuel des assureurs belges (AG, AXA)
tout en gardant la palette BATISKOR (vert pomme = accent de l'app). */
body.livrable-light .biblio-cover {
padding-top: 0; /* La vague occupera le haut */
}
/* Logo officiel BATISKOR centré en haut de la couverture — taille équilibrée
avec le titre "Bibliothèque d'inspection" en-dessous (rapport visuel correct). */
body.livrable-light .cover-logo {
display: block;
margin: 14mm auto 0;
width: 90mm; height: auto;
position: relative; z-index: 3;
}
body.livrable-light .biblio-cover .logos-row { display: none; }
body.livrable-light .biblio-cover .cover-after-wave { position: relative; z-index: 2; padding-top: 0; }
/* Bloc de coordonnées du bâtiment sous le titre — sobre, lecture facile */
body.livrable-light .cover-meta {
margin: 4mm auto 12mm;
font-size: 10.5pt; color: var(--la-text);
line-height: 1.6;
}
body.livrable-light .cover-meta .building-name {
font-size: 16pt; font-weight: 700; color: var(--la-primary);
letter-spacing: -0.005em; margin-bottom: 2mm;
}
body.livrable-light .cover-meta .building-address {
color: var(--la-muted); font-size: 10.5pt;
}
body.livrable-light .cover-meta .building-ref {
margin-top: 3mm; font-family: ui-monospace, monospace; font-size: 9pt;
color: var(--la-accent-cuivre); letter-spacing: 0.05em;
}
/* Ligne de stats discrète et chic — une seule ligne, séparateurs cuivre, minimaliste */
body.livrable-light .cover-stats-line {
display: flex; align-items: center; justify-content: center;
gap: 14px; flex-wrap: wrap;
margin: 8mm 0 10mm;
font-size: 10pt; color: var(--la-text);
padding: 6mm 8mm;
border-top: 1px solid var(--la-line);
border-bottom: 1px solid var(--la-line);
}
body.livrable-light .cover-stats-line .csl-item {
display: inline-flex; align-items: baseline; gap: 4px;
}
body.livrable-light .cover-stats-line .csl-num {
font-family: ui-monospace, monospace; font-weight: 700;
font-size: 13pt; line-height: 1;
}
body.livrable-light .cover-stats-line .csl-lbl {
font-size: 9pt; color: var(--la-muted);
text-transform: uppercase; letter-spacing: 0.08em;
}
body.livrable-light .cover-stats-line .csl-sep {
color: var(--la-accent-cuivre); font-size: 14pt; line-height: 1;
}
body.livrable-light .cover-stats-line .csl-item.is-zero .csl-num { color: var(--la-muted); opacity: 0.55; }
/* === BARRES CASCADE (signature visuelle, inspirée Elitis Insurance) ===
Quatre barres horizontales en gap, longueurs et tons décroissants.
Placées en pied de couverture pour signature corporate "monde de l'assurance". */
body.livrable-light .cascade-bars {
display: flex; gap: 8px; margin: 12mm 0 4mm;
width: 100%; align-items: center;
}
body.livrable-light .cb { height: 16px; border-radius: 2px; }
body.livrable-light .cb-1 { background: var(--la-primary-deep); flex: 5; }
body.livrable-light .cb-2 { background: var(--la-primary); flex: 4; }
body.livrable-light .cb-3 { background: var(--la-primary-light); flex: 3; }
body.livrable-light .cb-4 { background: #a3e635; flex: 2; }
/* Halo de page — dégradé vert d'eau Elitis très atténué (rappel discret de la palette
assurantielle). Plus sobre et apaisant que le vert pomme accent qu'on utilise sur
les éléments interactifs de l'app. */
body.livrable-light .page-mini-wave {
position: absolute; top: 0; left: 0; right: 0;
width: 100%; height: 16mm;
background: linear-gradient(180deg, rgba(61,166,142,0.18) 0%, rgba(61,166,142,0) 100%);
pointer-events: none;
z-index: 0;
}
body.livrable-light .biblio-page .biblio-page-header,
body.livrable-light .biblio-page .biblio-pdv-section,
body.livrable-light .biblio-page .biblio-pdv-title,
body.livrable-light .biblio-page .obs-block {
position: relative; z-index: 1;
}
/* === FONDS PASTEL DISTINCTS PAR LIVRABLE ===
Chaque document de l'écosystème a son identité chromatique discrète, à peine perceptible,
pour aider l'œil à reconnaître inconsciemment quel livrable il consulte :
- Bibliothèque : sable (chaleureux, archive, papier ancien)
- Rapport assureur : vert d'eau (neutralité professionnelle, lien à Elitis)
- Carnet d'entretien : rosé (signale la dimension corrective/préventive) */
body.livrable-light .biblio-page { background: #FAF7F0; } /* sable pastel */
body.livrable-light .report { background: #E8F2EC; } /* vert d'eau pastel (renforcé pour mieux faire ressortir les cards) */
body.livrable-light .carnet { background: #FBF3F2; } /* corail pastel */
/* === BARRE VERTICALE D'ACCENT (signature secondaire par livrable) ===
Une fine barre colorée à côté du bandeau vert sapin avec les marques de l'écosystème.
Identifie le livrable au premier coup d'œil par sa couleur d'accent. */
.livrable-accent-bar {
position: absolute;
top: 0; bottom: 0;
left: 56px; /* juste après .elitis-side-banner */
width: 6px;
z-index: 2;
}
.livrable-accent-bar.accent-biblio { background: #D97706; } /* jaune-orange, esprit archive */
.livrable-accent-bar.accent-rapport { background: #3DA68E; } /* vert d'eau Elitis, pro */
.livrable-accent-bar.accent-carnet { background: #D85959; } /* rouge vif, signale les carences */
/* Compense le padding-left pour la barre supplémentaire (était 76px) */
.report.with-elitis-banner,
.biblio.with-elitis-banner,
.carnet.with-elitis-banner {
padding-left: 84px;
}
.biblio-document.with-elitis-banner {
padding-left: 84px;
position: relative;
}
/* === IMPRESSION ===
Règles MINIMALES sur le PDF : juste les sauts de page, RIEN d'autre.
On laisse Chrome gérer la mise en page comme à l'écran. */
@media print {
body.livrable-light .biblio-document { background: white; padding: 0; }
body.livrable-light .biblio-page {
box-shadow: none; margin: 0;
width: auto; min-height: auto;
page-break-after: always;
}
body.livrable-light .biblio-page:last-child { page-break-after: auto; }
body.livrable-light .obs-block { page-break-inside: avoid; }
body.livrable-light .cascade-bars .cb { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body.livrable-light .page-mini-wave { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
/* === Desactivation des ombres polygonales des photos en impression ===
Skia (moteur PDF de Chrome) rend mal les box-shadow multi-couches avec
spread negatif -> effet gris dessine moche dans le PDF.
A l'ecran, les ombres restent intactes (cette regle est sous @media print). */
body.livrable-light .obs-figure img,
body.livrable-light .lifted-photo img,
body.livrable-light img.lifted-photo {
box-shadow: none !important;
}
}
/* Tags dans les questions (RGAR / TYPE / LOI) — version livrable */
body.livrable-light .tag.gar { background: rgba(45,91,71,0.10); color: var(--la-primary); }
body.livrable-light .tag.preventif { background: rgba(61,166,142,0.12); color: var(--la-excellent); }
body.livrable-light .tag.aggravant { background: rgba(216,89,89,0.10); color: var(--la-mediocre); }
body.livrable-light .tag.limitatif { background: rgba(232,155,71,0.12); color: #B97524; }
body.livrable-light .tag.specifique { background: rgba(139,92,246,0.10); color: #6D4FA3; }
body.livrable-light .tag.informatif { background: rgba(100,130,145,0.12); color: #4A6572; }
body.livrable-light .tag.law { background: rgba(160,214,224,0.20); color: var(--la-primary); }
/* --- Carnet d'entretien --- */
/* Manifeste du Carnet — phrase-pivot et bloc d'introduction philosophique */
body.livrable-light .carnet-manifesto {
background: linear-gradient(135deg, rgba(45,91,71,0.04), rgba(61,166,142,0.03));
border-left: 4px solid var(--la-primary);
}
body.livrable-light .carnet-manifesto h2 {
color: var(--la-primary);
font-weight: 600;
font-size: 18px;
letter-spacing: -0.01em;
}
/* Citation BATISKOR — signature visuelle commune aux 3 livrables.
Style discret mais présent : fond crème, ombrage doux, sans bordures lourdes. */
body.livrable-light .batiskor-manifesto {
margin: 6mm auto;
max-width: 140mm;
padding: 8mm 14mm;
background: var(--la-paper);
border-radius: 6px;
font-family: Georgia, "Times New Roman", serif;
font-size: 13pt;
font-weight: 400;
font-style: italic;
color: var(--la-primary);
line-height: 1.5;
text-align: center;
letter-spacing: 0.005em;
box-shadow: 0 2px 10px rgba(45,91,71,0.10), 0 1px 3px rgba(45,91,71,0.06);
}
body.livrable-light .carnet-keyquote {
margin: 18px 0;
padding: 22px 28px;
background: var(--la-paper);
border: 1px solid var(--la-line);
border-left: 4px solid var(--la-primary);
border-radius: 6px;
font-size: 18px;
font-weight: 500;
font-style: italic;
color: var(--la-primary);
line-height: 1.4;
text-align: center;
letter-spacing: -0.005em;
box-shadow: 0 2px 10px rgba(45,91,71,0.08);
}
/* Rappel de la phrase-pivot dans FitEMS (juste un teaser vers le manifeste du Carnet) */
.fitems-keyquote-card {
margin: 18px 0;
padding: 16px 22px;
background: rgba(45,91,71,0.06);
border: 1px solid rgba(45,91,71,0.18);
border-left: 3px solid #4A8B6F;
border-radius: 6px;
}
.fitems-keyquote-text {
font-size: 15px;
font-style: italic;
font-weight: 500;
color: #5b9dd9;
margin-bottom: 6px;
letter-spacing: -0.005em;
}
.fitems-keyquote-sub {
font-size: 12px;
line-height: 1.55;
color: var(--muted);
}
body.livrable-light .fitems-keyquote-card {
background: rgba(45,91,71,0.06);
border-color: rgba(45,91,71,0.20);
border-left-color: var(--la-primary);
}
body.livrable-light .fitems-keyquote-text { color: var(--la-primary); }
body.livrable-light .fitems-keyquote-sub { color: var(--la-muted); }
body.livrable-light .carnet .crn-item {
background: var(--la-paper);
border: 1px solid var(--la-line);
border-left: 4px solid var(--la-moyen);
box-shadow: 0 1px 4px rgba(45,91,71,0.04);
}
body.livrable-light .carnet .crn-item.urgent { border-left-color: var(--la-mediocre); }
body.livrable-light .carnet .crn-item.ok { border-left-color: var(--la-excellent); }
body.livrable-light .carnet .crn-title { color: var(--la-text); }
body.livrable-light .carnet .crn-meta { color: var(--la-muted); }
body.livrable-light .carnet .crn-pill.A { background: var(--la-mediocre); color: #fff; }
body.livrable-light .carnet .crn-pill.B { background: var(--la-moyen); color: #fff; }
body.livrable-light .carnet .crn-pill.C { background: var(--la-primary); color: #fff; }
body.livrable-light .carnet .crn-explain { color: var(--la-text); }
body.livrable-light .carnet .crn-photos img {
border: 1px solid var(--la-line);
box-shadow: 0 1px 4px rgba(45,91,71,0.06);
}
body.livrable-light .carnet .crn-fields { border-top: 1px dashed var(--la-line); }
body.livrable-light .carnet .crn-fields input,
body.livrable-light .carnet .crn-fields select {
background: var(--la-paper);
color: var(--la-text);
border: 1px solid var(--la-line);
}
body.livrable-light .carnet .crn-fields label { color: var(--la-muted); }
body.livrable-light .carnet .crn-check { accent-color: var(--la-primary); }
/* =====================================================
Carnet d'entretien — bandeau « Définition des classes »
et groupement A / B / C des actions correctives.
===================================================== */
body.livrable-light .carnet .abc-legend {
background: #fffbea;
border: 1px solid #f4e4a8;
border-radius: 8px;
padding: 14px 18px;
margin: 12px 0 24px;
}
body.livrable-light .carnet .abc-legend-title {
font-weight: 700;
color: var(--la-text);
font-size: 14px;
text-align: center;
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 1px dashed #d9c87a;
letter-spacing: 0.3px;
}
body.livrable-light .carnet .abc-legend-row {
display: flex; align-items: center; gap: 10px;
padding: 4px 0;
font-size: 12.5px;
color: var(--la-text);
}
body.livrable-light .carnet .abc-legend-text { line-height: 1.5; }
/* Chips A / B / C — réutilisables dans légende et entêtes de groupe */
body.livrable-light .carnet .abc-chip {
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px;
border-radius: 6px;
font-weight: 800;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
color: #fff;
flex-shrink: 0;
font-size: 13px;
}
body.livrable-light .carnet .abc-chip.cls-A { background: #b91c1c; }
body.livrable-light .carnet .abc-chip.cls-B { background: #b45309; }
body.livrable-light .carnet .abc-chip.cls-C { background: var(--la-primary); }
body.livrable-light .carnet .abc-chip-lg { width: 40px; height: 40px; font-size: 18px; border-radius: 8px; }
/* Groupe par classe — bloc visuel avec entête */
body.livrable-light .carnet .abc-group { margin-top: 22px; }
body.livrable-light .carnet .abc-group-head {
display: flex; align-items: center; gap: 14px;
padding: 10px 14px;
background: #f8fafc;
border-left: 5px solid var(--la-line);
border-radius: 4px 6px 6px 4px;
margin-bottom: 12px;
}
body.livrable-light .carnet .abc-group-A .abc-group-head { background: #fef2f2; border-left-color: #b91c1c; }
body.livrable-light .carnet .abc-group-B .abc-group-head { background: #fffbeb; border-left-color: #b45309; }
body.livrable-light .carnet .abc-group-C .abc-group-head { background: #eff6ff; border-left-color: var(--la-primary); }
body.livrable-light .carnet .abc-group-title {
font-size: 14.5px; font-weight: 700;
color: var(--la-text); letter-spacing: 0.2px;
}
body.livrable-light .carnet .abc-group-subtitle {
font-size: 12px; color: var(--la-muted); font-style: italic; margin-top: 2px;
}
/* Délai prescrit affiché sur chaque item de classe B */
body.livrable-light .carnet .crn-deadline {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 8px;
background: #fef3c7; color: #92400e;
border-radius: 4px;
font-size: 11.5px; font-weight: 600;
}
body.livrable-light .carnet .crn-deadline-missing {
background: #fee2e2; color: #991b1b;
}
/* Tag « auto » : la classification A/B/C provient du calcul automatique
(note + proportion). L'expert peut overrider dans la fiche question. */
body.livrable-light .carnet .crn-auto-tag {
display: inline-flex; align-items: center;
padding: 1px 7px;
background: rgba(120, 130, 140, 0.14);
color: #6b7785;
border: 1px dashed rgba(120, 130, 140, 0.40);
border-radius: 3px;
font-size: 10px; font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
cursor: help;
}
/* Photos d'observation dans Bibliothèque */
body.livrable-light .biblio .obs-photos img {
border: 1px solid var(--la-line);
box-shadow: 0 1px 4px rgba(45,91,71,0.06);
}
/* Impression : conserver la palette claire (l'impression directe en PDF doit
ressembler à ce que l'utilisateur voit à l'écran) */
@media print {
body.livrable-light .main-wrapper,
body.livrable-light .main { background: #fff !important; }
body.livrable-light .report .cover,
body.livrable-light .report .sec,
body.livrable-light .biblio .pdv-block,
body.livrable-light .carnet .crn-item { box-shadow: none !important; }
}
/* === Bandeau "lecture seule" === */
.main-wrapper { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.main-wrapper .main { flex: 1; overflow-y: auto; }
#ro-banner:empty { display: none; }
.ro-banner-content {
background: linear-gradient(135deg, #d97706, #f59e0b);
color: #1f2937;
padding: 10px 18px;
font-size: 13px;
font-weight: 600;
display: flex;
align-items: center;
gap: 10px;
border-bottom: 2px solid rgba(0,0,0,0.15);
}
.ro-banner-content .ro-owner-name { font-weight: 800; }
.ro-banner-content .ro-explain { font-weight: 400; opacity: 0.9; font-size: 12px; margin-left: auto; }
/* Mode lecture seule : désactive les contrôles d'édition */
body.read-only .note-btn,
body.read-only .prop-btn,
body.read-only #main button[onclick*="setNote"],
body.read-only #main button[onclick*="setProp"],
body.read-only #main button[onclick*="addPhoto"],
body.read-only #main button[onclick*="dictate"],
body.read-only #main button[onclick*="reformulate"],
body.read-only #main button[onclick*="Save"],
body.read-only #main button[onclick*="Edit"],
body.read-only #main button[onclick*="Delete"],
body.read-only #main button[onclick*="claimNew"],
body.read-only #main button[onclick*="contractNew"],
body.read-only #main button[onclick*="documentNew"],
body.read-only #main button[onclick*="qbNew"],
body.read-only #main button[onclick*="qbEdit"],
body.read-only #main button[onclick*="qbDelete"],
body.read-only #main textarea[onchange],
body.read-only #main textarea[oninput],
body.read-only #main input[type="text"][onchange],
body.read-only #main input[type="number"][onchange],
body.read-only #main input[type="date"][onchange],
body.read-only #main input[type="checkbox"][onchange] {
pointer-events: none;
opacity: 0.55;
cursor: not-allowed !important;
}
body.read-only #main textarea[readonly],
body.read-only #main input[readonly] { opacity: 0.7; }
/* Hover des lignes de la table Sources juridiques */
.legal-row:hover { background: rgba(96,165,250,0.06); }
.legal-row:hover td:first-child { color: #bfdbfe; }
.notes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; }
.note-btn { background: var(--panel2); color: var(--text); border: 1px solid var(--line); padding: 10px 0; border-radius: 8px; font-size: 13px; cursor: pointer; text-align: center; user-select: none; }
.note-btn.active.excellent { background: var(--excellent); color: #04220e; border-color: var(--excellent); font-weight: 600; }
.note-btn.active.bon { background: var(--bon); color: #1a2a04; border-color: var(--bon); font-weight: 600; }
.note-btn.active.moyen { background: var(--moyen); color: #2a1f04; border-color: var(--moyen); font-weight: 600; }
.note-btn.active.mediocre { background: var(--mediocre); color: #2a0a0a; border-color: var(--mediocre); font-weight: 600; }
.prop { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 10px; }
.prop-btn { background: var(--panel2); color: var(--text); border: 1px solid var(--line); padding: 8px 0; border-radius: 8px; font-size: 12px; cursor: pointer; text-align: center; }
.prop-btn.active { background: var(--accent); color: white; border-color: var(--accent); }
/* Badge numéro à gauche du titre — solide vert fluo, façon marqueur surligneur.
Très contrasté pour ancrer instantanément le repère visuel sur les longues fiches. */
.q-num {
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
min-width: 34px; height: 30px;
padding: 0 8px; margin-right: 12px;
background: #a3e635; /* vert fluo solide */
color: #14290c; /* vert très sombre pour le chiffre */
border: 1px solid #84cc16;
border-radius: 7px;
font-size: 14px; font-weight: 800;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
line-height: 1;
letter-spacing: 0.5px;
box-shadow: 0 1px 3px rgba(163, 230, 53, 0.35);
}
body.livrable-light .q-num { background: #a3e635; color: #14290c; border-color: #84cc16; }
.q-interpretation { margin: 4px 2px 0; padding: 6px 10px; font-size: 12.5px; line-height: 1.5; color: var(--muted); font-style: italic; border-left: 2px solid var(--line); background: rgba(91,157,217,0.04); border-radius: 0 4px 4px 0; }
/* Filet pédagogique « cotez depuis la carence » — affiché tant qu'aucune note n'est posée */
.q-coach { margin: 6px 2px 2px; padding: 7px 11px; font-size: 12px; line-height: 1.55; color: #6b5d3f; background: rgba(184,115,51,0.07); border-left: 2px solid #B87333; border-radius: 0 4px 4px 0; }
.q-coach b { color: #8a5a1f; }
/* Bloc de classification de la mesure corrective (A/B/C) — convention assureurs.
Visible quand l'expert pose une note moyen ou médiocre. */
.action-class-block {
margin: 12px 2px 4px;
padding: 10px 12px;
background: rgba(120, 130, 140, 0.06);
border: 1px solid rgba(120, 130, 140, 0.18);
border-radius: 6px;
}
.action-class-label {
font-size: 11px; font-weight: 700; letter-spacing: 0.7px;
text-transform: uppercase; color: var(--muted);
margin-bottom: 8px;
display: flex; align-items: center; justify-content: space-between;
gap: 10px; flex-wrap: wrap;
}
/* Toggle « Signaler à l'assureur » — décide si la carence remonte Rapport + Carnet */
.signal-toggle {
display: inline-flex; align-items: center; gap: 8px;
padding: 5px 11px;
border-radius: 999px;
border: 1px solid;
cursor: pointer;
font-family: inherit;
font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
text-transform: none;
user-select: none; white-space: nowrap;
transition: all 0.15s ease;
}
.signal-toggle .dot {
width: 8px; height: 8px; border-radius: 50%;
}
.signal-toggle.is-on {
background: rgba(74, 222, 128, 0.12);
border-color: rgba(74, 222, 128, 0.45);
color: #86efac;
}
.signal-toggle.is-on .dot { background: #4ade80; box-shadow: 0 0 0 2px rgba(74,222,128,0.18); }
.signal-toggle.is-on:hover { background: rgba(74, 222, 128, 0.20); color: #bbf7d0; }
/* État OFF = CTA "Ajouter" : bleu invitant, contraste élevé, on incite au clic */
.signal-toggle.is-off {
background: rgba(91, 157, 217, 0.14);
border-color: rgba(91, 157, 217, 0.55);
border-style: dashed;
color: #93c5fd;
}
.signal-toggle.is-off .dot { background: #5b9dd9; box-shadow: 0 0 0 2px rgba(91,157,217,0.20); }
.signal-toggle.is-off:hover { background: rgba(91, 157, 217, 0.28); border-style: solid; color: #bfdbfe; transform: scale(1.02); }
.action-class-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.action-class-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px 6px 8px;
background: var(--panel2);
border: 1px solid var(--line);
border-radius: 6px;
cursor: pointer;
font-family: inherit;
font-size: 12.5px;
color: var(--text);
transition: all 0.15s ease;
}
.action-class-btn:hover { border-color: rgba(91, 157, 217, 0.45); }
.action-class-btn .cls-code {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; border-radius: 4px;
font-weight: 800; font-size: 12px;
background: rgba(255,255,255,0.06); color: var(--muted);
font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.action-class-btn .cls-label { font-weight: 500; }
/* Couleurs par classe : rouge (A) urgent, ambre (B) délai, bleu (C) souhaitable */
.action-class-btn.cls-A.active { background: rgba(220, 80, 80, 0.18); border-color: rgba(220, 80, 80, 0.55); }
.action-class-btn.cls-A.active .cls-code { background: #dc5050; color: white; }
.action-class-btn.cls-B.active { background: rgba(230, 160, 60, 0.18); border-color: rgba(230, 160, 60, 0.55); }
.action-class-btn.cls-B.active .cls-code { background: #e6a03c; color: #2a1f04; }
.action-class-btn.cls-C.active { background: rgba(91, 157, 217, 0.18); border-color: rgba(91, 157, 217, 0.55); }
.action-class-btn.cls-C.active .cls-code { background: #5b9dd9; color: white; }
/* Si la classe est explicite (override expert) vs auto : marqueur discret */
.action-class-btn.is-explicit::after {
content: "●"; color: #84cc16; margin-left: 2px; font-size: 9px;
}
.action-deadline-row {
display: flex; align-items: center; gap: 10px;
margin-top: 10px; padding: 8px 10px;
background: rgba(230, 160, 60, 0.08);
border-left: 3px solid #e6a03c;
border-radius: 0 4px 4px 0;
}
.action-deadline-row label {
font-size: 12px; font-weight: 600; color: #fbbf77; letter-spacing: 0.3px;
}
.action-deadline-row input[type="date"] {
background: var(--panel2); color: var(--text);
border: 1px solid var(--line); border-radius: 4px;
padding: 4px 8px; font-family: inherit; font-size: 12.5px;
color-scheme: dark;
}
.action-class-hint {
margin-top: 8px;
font-size: 11px; color: var(--muted); font-style: italic;
}
.q-interpretation.complete { color: var(--text); font-style: normal; border-left-color: var(--accent); background: rgba(91,157,217,0.08); }
.q-interpretation.partial { opacity: 0.85; }
.q-extra { display: flex; gap: 8px; margin-top: 8px; align-items: flex-start; }
/* Zone de commentaire — surface d'écriture creusée, soulignée par un liseré vert fluo
qui sert de repère visuel évident "c'est ici qu'on tape". Hauteur auto-ajustée par JS. */
.q-comment {
display: block; width: 100%;
background: #1c2530;
color: #f0f4f8;
border: 1.5px solid #a3e635; /* liseré vert fluo (≈ palette --bon) */
border-radius: 8px;
padding: 12px 14px;
font-size: 14px; font-family: inherit; line-height: 1.5;
min-height: 56px; /* base réduite : la hauteur grandit avec le contenu */
resize: vertical; box-sizing: border-box;
margin-top: 6px;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(163, 230, 53, 0.08);
transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
overflow: hidden; /* pas de scrollbar interne : auto-resize gère */
}
.q-comment::placeholder { color: #6b7785; font-style: italic; }
.q-comment:focus {
outline: none;
border-color: #bef264; /* vert fluo plus vif au focus */
background: #1f2935;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 0 0 3px rgba(163, 230, 53, 0.22);
}
/* Label "COMMENTAIRE / OBSERVATION" — visible et lisible, plus le ton muté discret */
.q-comment-label {
font-size: 11.5px; color: #b8c5d3; text-transform: uppercase;
letter-spacing: 1.2px; font-weight: 700; flex: 1;
display: inline-flex; align-items: center; gap: 6px;
}
.q-comment-label::before { content: "✏️"; font-size: 12px; }
/* Rangée photos : le bouton "Ajouter des photos" prend toute la largeur du haut,
puis les vignettes s'étalent en grille responsive en dessous. Plus de risque
de débordement horizontal, peu importe le nombre de photos. */
.q-photo-row { display: block; margin-top: 8px; }
.btn-photo { background: #1f3a52; color: #93c5fd; border: 1px dashed #5b9dd9; padding: 8px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.btn-photo:hover { background: #2a4a66; }
.btn-photo .count { background: rgba(255,255,255,0.15); color: var(--text); padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 700; margin-left: 4px; }
.icon-btn { background: var(--panel2); color: var(--text); border: 1px solid var(--line); width: 40px; height: 40px; border-radius: 8px; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; }
/* Grille de vignettes : auto-fill pour s'adapter à la largeur du conteneur.
minmax(160px, 1fr) garantit qu'aucune vignette n'est tronquée et que les lignes
se remplissent harmonieusement (3 par ligne sur écran moyen, 4-5 sur grand). */
.thumbs {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 12px;
margin-top: 12px;
}
/* Conteneur d'une photo : thumbnail + champ légende sous l'image.
Permet à l'expert d'attacher une explication courte à chaque cliché.
La légende s'affichera ensuite dans la Bibliothèque (livrable). */
.photo-item { display: flex; flex-direction: column; gap: 5px; width: 100%; min-width: 0; }
/* Hauteur fixe (et non aspect-ratio) pour préserver la perception naturelle :
les photos paysage ne sont pas écrasées en bande, le cover recadre proprement
au centre. 110px convient pour avoir 3-4 vignettes par ligne sans déformer. */
.photo-item .thumb { width: 100%; height: 110px; border-radius: 6px; background-size: cover; background-position: center; position: relative; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.30); }
.photo-item .thumb .x { position: absolute; top: -6px; right: -6px; background: var(--mediocre); color: white; width: 20px; height: 20px; border-radius: 50%; font-size: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.40); }
.photo-item .photo-caption {
font-size: 11.5px;
padding: 5px 8px;
background: rgba(0,0,0,0.32);
color: #f0f4f8;
border: 1px solid #4a5462;
border-radius: 5px;
font-family: inherit;
width: 100%;
box-sizing: border-box;
}
.photo-item .photo-caption:focus { outline: none; border-color: #a3e635; background: rgba(0,0,0,0.45); }
.photo-item .photo-caption::placeholder { color: #6b7785; font-style: italic; }
/* Variante legacy gardée pour cas non encore migrés (lightbox, biblio…) */
.thumb { width: 60px; height: 60px; border-radius: 6px; background-size: cover; background-position: center; position: relative; cursor: pointer; }
.thumb .x { position: absolute; top: -6px; right: -6px; background: var(--mediocre); color: white; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.dashboard { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
/* Jauge du Dashboard — alignée sur la charte des cartes pour une harmonie visuelle globale */
.gauge {
background: linear-gradient(180deg, #313b48 0%, #2b3340 100%);
border: 1px solid #404a58;
border-radius: var(--radius);
padding: 16px 18px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.30);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.gauge:hover {
border-color: rgba(91, 157, 217, 0.45);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55), 0 3px 6px rgba(0, 0, 0, 0.35);
}
.gauge-name { font-size: 13px; color: #b8c5d3; margin-bottom: 8px; font-weight: 600; letter-spacing: 0.3px; }
.gauge-score { font-size: 28px; font-weight: 700; margin-bottom: 10px; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.gauge-bar { height: 8px; background: #1c2530; border-radius: 4px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,0.30); }
.gauge-fill { height: 100%; transition: width 0.3s; }
.empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty .icon { font-size: 48px; margin-bottom: 12px; }
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: none; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.modal-bg.show { display: flex; }
.modal { background: var(--panel); border-radius: var(--radius); padding: 20px; max-width: 500px; width: 100%; max-height: 90vh; overflow-y: auto; }
.modal h3 { margin-top: 0; }
.fab { position: fixed; bottom: 22px; right: 22px; width: 60px; height: 60px; border-radius: 50%; background: var(--accent); color: white; border: none; font-size: 28px; box-shadow: 0 4px 12px rgba(0,0,0,0.4); cursor: pointer; z-index: 50; }
.fab.recording { background: var(--mediocre); animation: pulse 1.5s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--bg); }
.login-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 32px; max-width: 400px; width: 100%; }
.login-card h1 { margin: 0 0 24px; font-size: 24px; text-align: center; }
.login-card .err { background: #4a1a1a; color: #fca5a5; padding: 10px; border-radius: 6px; margin-bottom: 14px; font-size: 13px; }
.tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 14px 0; }
.tool { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 12px; text-decoration: none; color: var(--text); display: block; }
.tool:hover { background: #2a3340; border-color: var(--accent); }
.tool .name { font-weight: 600; font-size: 14px; margin-bottom: 4px; color: var(--accent); }
.tool .desc { font-size: 12px; color: var(--muted); line-height: 1.4; }
.alea-pill { display: inline-block; padding: 4px 10px; border-radius: 10px; font-size: 11px; font-weight: 600; margin-right: 6px; cursor: pointer; }
.alea-pill.aucun { background: #14392a; color: #86efac; }
.alea-pill.faible { background: #4d3d12; color: #fde047; }
.alea-pill.moyen { background: #4d2d12; color: #fdba74; }
.alea-pill.eleve { background: #3f1414; color: #fca5a5; }
.alea-pill.inactive { background: var(--panel2); color: var(--muted); }
.calc-box { background: #1c2330; border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin-top: 10px; font-size: 13px; }
.calc-box .calc-line { display: flex; justify-content: space-between; padding: 4px 0; }
.calc-box .calc-result { font-size: 18px; font-weight: 600; color: var(--accent); margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
/* Ligne d'inspection — même charte que les cartes (fond clair, ombre, bordure visible)
avec un liseré vert pomme à gauche pour la cohérence visuelle avec les cartes de question. */
.insp-row {
display: flex; justify-content: space-between; align-items: center;
padding: 14px 18px 14px 14px;
background: linear-gradient(180deg, #313b48 0%, #2b3340 100%);
border: 1px solid #404a58;
border-left: 4px solid #a3e635;
border-radius: 10px;
margin-bottom: 10px;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.20);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
gap: 12px;
}
.insp-row:hover { border-color: rgba(91, 157, 217, 0.55); box-shadow: 0 6px 16px rgba(0,0,0,0.40), 0 2px 4px rgba(0,0,0,0.25); }
.insp-row .info { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.insp-row .info-text { flex: 1; min-width: 0; }
.insp-row .info .name { font-weight: 600; font-size: 15.5px; color: #f0f4f8; }
.insp-row .info .meta { font-size: 12px; color: #8b95a3; margin-top: 4px; }
.insp-row .status { font-size: 11px; padding: 3px 9px; border-radius: 10px; }
/* Cellule numéro + boutons de réordonnancement dans le tableau Documents.
Les flèches haut/bas n'apparaissent qu'au survol de la ligne pour ne pas alourdir
visuellement le tableau. Désactivées sur la première / dernière ligne. */
.doc-num-cell { display: flex; align-items: center; gap: 8px; }
.doc-row .doc-reorder {
display: flex; flex-direction: column; gap: 2px;
opacity: 0;
transition: opacity 0.15s ease;
}
.doc-row:hover .doc-reorder { opacity: 1; }
.doc-row .doc-reorder button {
background: rgba(91,157,217,0.10);
border: 1px solid rgba(91,157,217,0.30);
color: #93c5fd;
width: 22px; height: 18px;
border-radius: 4px;
cursor: pointer;
font-size: 9px;
padding: 0;
display: flex; align-items: center; justify-content: center;
transition: all 0.15s ease;
line-height: 1;
}
.doc-row .doc-reorder button:hover:not(:disabled) {
background: rgba(91,157,217,0.25);
border-color: var(--accent);
color: #f0f4f8;
}
.doc-row .doc-reorder button:disabled { opacity: 0.20; cursor: not-allowed; }
/* Bouton de suppression discret — invisible par défaut, apparait au survol de la ligne
pour éviter les suppressions accidentelles. Confirmation obligatoire via window.confirm(). */
.btn-delete-mini {
background: transparent;
color: #6b7785;
border: 1px solid transparent;
border-radius: 6px;
width: 30px; height: 30px;
font-size: 14px;
cursor: pointer;
opacity: 0;
transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
display: inline-flex; align-items: center; justify-content: center;
}
.insp-row:hover .btn-delete-mini { opacity: 0.7; }
.btn-delete-mini:hover {
opacity: 1 !important;
background: rgba(248, 113, 113, 0.10);
color: #f87171;
border-color: rgba(248, 113, 113, 0.35);
}
/* Numéro d'inspection — même style que .q-num pour cohérence visuelle */
.insp-num {
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
min-width: 38px; height: 34px;
padding: 0 8px;
background: #a3e635;
color: #14290c;
border: 1px solid #84cc16;
border-radius: 8px;
font-size: 15px; font-weight: 800;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
line-height: 1;
letter-spacing: 0.5px;
box-shadow: 0 1px 3px rgba(163, 230, 53, 0.35);
}
/* Chips de filtre par typologie au-dessus de la liste */
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 18px; }
.chip {
background: #2b3340;
border: 1px solid #404a58;
color: #b8c5d3;
padding: 7px 14px;
border-radius: 22px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
display: inline-flex; align-items: center; gap: 8px;
}
.chip:hover { border-color: #5b6573; background: #313b48; color: #f0f4f8; }
.chip.active { background: #a3e635; color: #14290c; border-color: #84cc16; font-weight: 700; box-shadow: 0 2px 6px rgba(163,230,53,0.25); }
.chip .count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 22px; padding: 1px 6px;
background: rgba(255,255,255,0.10);
border-radius: 10px;
font-size: 11px; font-weight: 600;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.chip.active .count { background: rgba(20,41,12,0.20); color: #14290c; }
/* Titre de groupe (par typologie) dans la liste */
.group-title {
display: flex; align-items: center; gap: 12px;
font-size: 12px; font-weight: 700;
color: #b8c5d3;
text-transform: uppercase; letter-spacing: 1.5px;
margin: 26px 0 12px;
padding-left: 2px;
}
.group-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, #404a58 0%, transparent 100%); }
.group-title .count {
background: rgba(91,157,217,0.18); color: #93c5fd;
padding: 2px 9px; border-radius: 11px;
font-size: 11px; font-weight: 600; letter-spacing: 0.5px;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.status-draft { background: #2c343f; color: var(--muted); }
.status-in_progress { background: #3d3220; color: var(--moyen); }
.status-completed { background: #1d3e2c; color: var(--excellent); }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 16px; font-size: 13px; z-index: 200; opacity: 0; transition: opacity 0.2s; }
.toast.show { opacity: 1; }
.toast.err { border-color: var(--mediocre); color: #fca5a5; }
hr { border: none; border-top: 1px solid var(--line); margin: 18px 0; }
input[type="file"] { display: none; }
.map-box { height: 280px; border-radius: 8px; overflow: hidden; margin-top: 12px; border: 1px solid var(--line); }
.notes-row { display: flex; gap: 6px; align-items: center; margin-top: 14px; margin-bottom: 6px; }
.notes-row .lbl { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-right: auto; }
.btn-mini { background: var(--panel2); color: var(--text); border: 1px solid var(--line); padding: 5px 10px; border-radius: 6px; font-size: 12px; cursor: pointer; font-family: inherit; }
.btn-mini:hover { background: #2a3340; border-color: var(--accent); }
.btn-mini.recording { background: var(--mediocre); color: white; border-color: var(--mediocre); animation: pulse 1.5s infinite; }
.btn-mini.loading { background: #1f3a52; color: #93c5fd; }
/* Notes libres (Identité, Pré-étude) — même traitement visuel que les commentaires
de question : surface d'écriture creusée, liseré vert fluo, auto-resize au contenu. */
.notes-ta {
display: block; width: 100%;
background: #1c2530;
color: #f0f4f8;
border: 1.5px solid #a3e635;
border-radius: 8px;
padding: 12px 14px;
font-size: 14px; font-family: inherit; line-height: 1.5;
min-height: 56px;
resize: vertical; box-sizing: border-box;
margin-top: 6px;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(163, 230, 53, 0.08);
transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
overflow: hidden;
}
.notes-ta::placeholder { color: #6b7785; font-style: italic; }
.notes-ta:focus {
outline: none;
border-color: #bef264;
background: #1f2935;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 0 0 3px rgba(163, 230, 53, 0.22);
}
.sidebar-footer { padding: 14px 20px; border-top: 1px solid var(--line); margin-top: 18px; }
/* ===== Rapport ===== */
.report { max-width: 900px; margin: 0 auto; }
.report .cover { background: linear-gradient(180deg, #1a2738 0%, #0f1419 100%); border-radius: 14px; padding: 32px; margin-bottom: 20px; border: 1px solid var(--line); }
.report .cover .cover-logos {
display: flex;
align-items: center;
justify-content: center;
gap: 48px;
margin-bottom: 28px;
padding: 18px 12px;
background: rgba(255,255,255,0.04);
border-radius: 10px;
}
body.livrable-light .report .cover .cover-logos {
background: #fafbfc;
border: 1px solid var(--la-line, #e5e7eb);
}
.report .cover .cover-logos > * { flex-shrink: 0; }
@media print {
.report .cover .cover-logos { background: #fafbfc !important; border: 1px solid #d4d4d8 !important; }
}
.report .cover h1 { font-size: 30px; margin: 0 0 4px; }
.report .cover .subtitle { font-size: 14px; color: var(--muted); margin-bottom: 24px; }
.report .global-note { display: flex; align-items: center; gap: 20px; margin: 28px 0; }
.report .global-note .num { font-size: 64px; font-weight: 700; line-height: 1; }
.report .global-note .label { font-size: 14px; color: var(--muted); }
.report .global-note .avis { font-size: 18px; font-weight: 600; padding: 8px 18px; border-radius: 999px; margin-top: 6px; display: inline-block; }
.avis-fav { background: #14392a; color: #86efac; }
.avis-res { background: #4d3d12; color: #fde047; }
.avis-def { background: #3f1414; color: #fca5a5; }
.report .gauges { display: grid; grid-template-columns: 1fr; gap: 8px; }
/* === FLUX CONTINU DES CARENCES (style Carnet d'entretien) === */
body.livrable-light .report .car-flow {
margin: 8mm 0;
padding: 12px 16px;
background: var(--la-paper);
border: 1px solid var(--la-line);
border-left: 4px solid var(--la-moyen);
border-radius: 4px 8px 8px 4px;
box-shadow: 0 1px 4px rgba(45,91,71,0.04);
page-break-inside: avoid;
}
body.livrable-light .report .car-flow-head {
display: flex; align-items: flex-start; gap: 10px;
margin-bottom: 8px;
}
body.livrable-light .report .car-flow-title { flex: 1; }
body.livrable-light .report .car-flow-title b { font-size: 14px; color: var(--la-text); }
body.livrable-light .report .car-flow-meta {
font-size: 11.5px; color: var(--la-muted);
margin-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
body.livrable-light .report .meta-gar-pill {
display: inline-block;
padding: 1px 8px;
background: rgba(96,165,250,0.12);
color: #1d4ed8;
border-radius: 10px;
font-size: 10.5px;
font-weight: 600;
}
body.livrable-light .report .car-flow-photos {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 10px;
margin-top: 10px;
}
body.livrable-light .report .car-flow-quote {
margin-top: 10px;
padding: 8px 14px;
background: var(--la-bg);
border-left: 3px solid var(--la-primary);
border-radius: 0 4px 4px 0;
font-style: italic;
font-size: 12.5px;
line-height: 1.55;
color: var(--la-text);
}
body.livrable-light .report .car-flow-ref {
margin-top: 6px;
font-size: 11.5px;
color: var(--la-muted);
}
/* Vue technique compacte par garantie (après le flux des carences) */
body.livrable-light .report .rap-tech-title {
margin: 18mm 0 4mm;
font-size: 14pt;
color: var(--la-primary);
padding-bottom: 6px;
border-bottom: 1px solid var(--la-line);
}
body.livrable-light .report .rap-tech-sub {
font-size: 11px; color: var(--la-muted); font-style: italic; margin: 0 0 8mm;
}
.gauge-r { background: rgba(255,255,255,0.04); padding: 10px 14px; border-radius: 8px; border: 1px solid var(--line); }
.gauge-r .gname { font-size: 12px; color: var(--muted); margin-bottom: 4px; display: flex; justify-content: space-between; }
.gauge-r .gname b { color: var(--text); font-size: 14px; }
.gauge-r .gbar { height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; }
.gauge-r .gbar > div { height: 100%; transition: width 0.3s; }
.report .sec { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 22px; margin-bottom: 16px; }
.report .sec h2 { margin: 0 0 14px; font-size: 18px; color: var(--accent); border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.report .kv { display: grid; grid-template-columns: 200px 1fr; gap: 8px 16px; font-size: 14px; }
.report .kv dt { color: var(--muted); }
.report .kv dd { margin: 0; }
.report .gar-detail { margin-bottom: 14px; padding: 14px; background: rgba(255,255,255,0.02); border-radius: 8px; border-left: 4px solid var(--accent); }
.report .gar-detail.bad { border-left-color: var(--mediocre); }
.report .gar-detail.warn { border-left-color: var(--moyen); }
.report .gar-detail.ok { border-left-color: var(--excellent); }
.report .gar-detail h3 { margin: 0 0 8px; font-size: 15px; }
.report .gar-detail .car { padding: 8px 0; border-top: 1px dashed rgba(255,255,255,0.08); font-size: 13px; }
/* Renvoi compact : la carence est principalement détaillée sous une autre garantie */
body.livrable-light .report .gar-detail .car.car-renvoi {
background: rgba(96, 165, 250, 0.05);
border-left: 3px solid rgba(96, 165, 250, 0.35);
padding: 8px 12px;
margin-top: 6px;
border-radius: 0 4px 4px 0;
}
.report .gar-detail .car:first-of-type { border-top: 0; }
.report .gar-detail .car .loc { color: var(--muted); font-size: 11px; text-transform: uppercase; }
.report .gar-detail .car .note { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 10px; font-weight: 700; margin-left: 6px; }
.report .gar-detail .car .note.mediocre { background: var(--mediocre); color: #2a0a0a; }
.report .gar-detail .car .note.moyen { background: var(--moyen); color: #2a1f04; }
.report .gar-detail .car .note.bon { background: var(--bon); color: #1a2a04; }
.report .gar-detail .car .com { margin-top: 4px; color: #d4d4d4; font-style: italic; }
.report .action-row { display: grid; grid-template-columns: 60px 100px 1fr; gap: 10px; padding: 8px 0; border-top: 1px dashed rgba(255,255,255,0.08); font-size: 13px; align-items: center; }
.report .action-row:first-of-type { border-top: 0; }
.report .action-row .cl { font-weight: 700; font-size: 14px; padding: 4px 0; text-align: center; border-radius: 6px; }
.cl-A { background: #3f1414; color: #fca5a5; }
.cl-B { background: #4d3d12; color: #fde047; }
.cl-C { background: #1e3a5f; color: #93c5fd; }
.report .photos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.report .photos-grid img { width: 100%; height: 120px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.report .capitaux { font-size: 22px; color: var(--accent); font-weight: 600; }
.btn-print { position: fixed; top: 18px; right: 18px; z-index: 60; }
/* Bibliothèque */
.biblio .pdv-block { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 18px; margin-bottom: 14px; page-break-inside: avoid; }
.biblio .pdv-block h2 { margin: 0 0 12px; font-size: 16px; color: var(--accent); border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.biblio .obs { padding: 14px 0; border-top: 1px dashed rgba(255,255,255,0.08); }
.biblio .obs:first-of-type { border-top: 0; padding-top: 0; }
.biblio .obs-head { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.biblio .obs-title { flex: 1; font-weight: 600; font-size: 14px; }
.biblio .obs-tag { font-size: 10px; padding: 2px 7px; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; }
.biblio .obs-tag.excellent { background: var(--excellent); color: #04220e; }
.biblio .obs-tag.bon { background: var(--bon); color: #1a2a04; }
.biblio .obs-tag.moyen { background: var(--moyen); color: #2a1f04; }
.biblio .obs-tag.mediocre { background: var(--mediocre); color: #2a0a0a; }
.biblio .obs-tag.observation { background: var(--panel2); color: var(--muted); border: 1px solid var(--line); }
.biblio .obs-tag.nc { background: #2c343f; color: var(--muted); }
.biblio .obs-meta { font-size: 11px; color: var(--muted); margin-top: 4px; display: flex; gap: 10px; flex-wrap: wrap; }
.biblio .obs-meta .gar { color: #93c5fd; }
.biblio .obs-meta .loi { color: #c084fc; }
.biblio .obs-comment { margin-top: 6px; font-size: 13px; color: #d4d4d4; font-style: italic; line-height: 1.5; }
.biblio .obs-photos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.biblio .obs-photos img { width: 130px; height: 100px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.biblio .photo-hint {
display: block;
font-size: 10px;
font-style: italic;
color: var(--muted);
margin-top: 4px;
opacity: 0.75;
letter-spacing: 0.2px;
}
body.livrable-light .biblio .photo-hint { color: var(--la-muted); opacity: 0.7; }
.biblio .stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 16px 0; }
.biblio .stat { background: var(--panel2); border-radius: 8px; padding: 10px; text-align: center; }
.biblio .stat .num { font-size: 22px; font-weight: 700; }
.biblio .stat .lbl { font-size: 11px; color: var(--muted); }
/* Carnet */
.carnet .crn-item { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--moyen); border-radius: 8px; padding: 14px; margin-bottom: 10px; page-break-inside: avoid; }
.carnet .crn-item.urgent { border-left-color: var(--mediocre); }
/* Action cochée comme faite : signal visuel sur le titre (style barré) mais
les photos restent en pleine saturation pour conserver leur lisibilité. */
.carnet .crn-item.ok { border-left-color: var(--excellent); }
.carnet .crn-item.ok .crn-title { text-decoration: line-through; color: var(--la-muted); }
.carnet .crn-item.ok .crn-meta,
.carnet .crn-item.ok .crn-explain { opacity: 0.75; }
.carnet .crn-head { display: flex; gap: 10px; align-items: flex-start; }
.carnet .crn-check { width: 22px; height: 22px; flex-shrink: 0; cursor: pointer; accent-color: var(--accent); margin-top: 2px; }
.carnet .crn-body { flex: 1; }
.carnet .crn-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.carnet .crn-meta { font-size: 11px; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; }
.carnet .crn-pill { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.carnet .crn-pill.A { background: #3f1414; color: #fca5a5; }
.carnet .crn-pill.B { background: #4d3d12; color: #fde047; }
.carnet .crn-pill.C { background: #1e3a5f; color: #93c5fd; }
.carnet .crn-explain { margin-top: 8px; font-size: 13px; line-height: 1.5; color: #d4d4d4; }
.carnet .crn-photos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.carnet .crn-photos img { width: 100px; height: 80px; object-fit: cover; border-radius: 6px; }
.carnet .crn-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(255,255,255,0.08); }
.carnet .crn-fields input, .carnet .crn-fields select { background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; font-size: 12px; font-family: inherit; }
.carnet .crn-fields label { font-size: 10px; color: var(--muted); text-transform: uppercase; }
@media print {
body { background: white !important; color: black !important; overflow: visible !important; }
.app { display: block !important; height: auto !important; }
.sidebar, .fab, .toast, .btn-print, .modal-bg { display: none !important; }
.main { padding: 0 !important; overflow: visible !important; }
.report { max-width: 100% !important; }
.report .cover { background: white !important; color: black !important; border: 2px solid #1f3a5f !important; page-break-after: always; }
.report .cover h1, .report .cover .subtitle, .report .cover .num, .report .cover .label { color: black !important; }
.report .sec { background: white !important; color: black !important; border: 1px solid #ccc !important; page-break-inside: avoid; }
.report .sec h2 { color: #1f3a5f !important; border-bottom-color: #1f3a5f !important; }
.report .gar-detail { background: #fafafa !important; color: black !important; }
.report .gar-detail .car .com { color: #555 !important; }
.report .kv dt { color: #555 !important; }
.gauge-r { background: #f5f5f5 !important; color: black !important; }
.gauge-r .gname b { color: black !important; }
.gauge-r .gbar { background: #ddd !important; }
.avis-fav { background: #d1fae5 !important; color: #065f46 !important; }
.avis-res { background: #fef3c7 !important; color: #92400e !important; }
.avis-def { background: #fee2e2 !important; color: #991b1b !important; }
@page { size: A4; margin: 12mm; }
}
.geo-row { display: flex; gap: 10px; align-items: center; margin-top: 8px; font-size: 12px; color: var(--muted); }
.geo-row b { color: var(--text); font-family: SF Mono, Menlo, monospace; }
@media (max-width: 768px) {
.sidebar { display: none; }
.grid2, .grid3 { grid-template-columns: 1fr; }
}
/* Masque les petits boutons "ascenseur" (spinners) des champs
partout dans l'app — design plus propre et évite les clics involontaires sur tablette. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
/* === Grille des niveaux (section Capitaux dans l'Identité) === */
.niveau-grid {
display: grid;
grid-template-columns: 1fr 130px 140px 130px 36px;
gap: 10px;
align-items: center;
}
.niveau-row-header {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.8px;
color: var(--muted);
padding: 4px 0;
border-bottom: 1px solid var(--line);
margin-bottom: 4px;
}
.niveau-row {
padding: 6px 0;
border-bottom: 1px dashed var(--line);
}
.niveau-row:last-child { border-bottom: none; }
.niveau-row input[type="text"],
.niveau-row input[type="number"] {
width: 100%;
background: var(--panel2);
color: var(--text);
border: 1px solid var(--line);
border-radius: 6px;
padding: 6px 10px;
font-size: 13.5px;
font-family: inherit;
}
.niveau-row input:focus {
outline: none;
border-color: var(--accent);
}
.niveau-soustotal {
font-weight: 600;
font-size: 14px;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.niveau-remove {
background: transparent;
color: var(--muted);
border: 1px solid var(--line);
border-radius: 50%;
width: 28px; height: 28px;
cursor: pointer;
font-size: 16px;
line-height: 1;
padding: 0;
display: flex; align-items: center; justify-content: center;
}
.niveau-remove:hover {
background: rgba(216,89,89,0.15);
border-color: #D85959;
color: #D85959;
}
body.livrable-light .niveau-row input[type="text"],
body.livrable-light .niveau-row input[type="number"] {
background: #fff;
color: var(--la-text);
border-color: var(--la-line);
}
body.livrable-light .niveau-soustotal { color: var(--la-text); }
/* En mode livrable-light (Identité notamment), les champs .field passent en blanc
sur fond clair avec une bordure douce — lisibilité maximale, look Elitis. */
body.livrable-light .main .field input,
body.livrable-light .main .field select,
body.livrable-light .main .field textarea {
background: #fff !important;
color: var(--la-text) !important;
border-color: var(--la-line) !important;
}
body.livrable-light .main .field input:focus,
body.livrable-light .main .field select:focus,
body.livrable-light .main .field textarea:focus {
border-color: var(--la-primary) !important;
outline: none;
box-shadow: 0 0 0 3px rgba(45,91,71,0.10);
}
body.livrable-light .main .field label { color: var(--la-muted); }
body.livrable-light .main .card h3 {
color: var(--la-primary) !important;
}
/* Sauf les section titles qui doivent rester en muted (uppercase, letter-spacing) */
body.livrable-light .main .card h3[style*="var(--muted)"] {
color: var(--la-muted) !important;
}
body.livrable-light .niveau-remove {
background: #fff;
color: var(--la-muted);
border-color: var(--la-line);
}
body.livrable-light .niveau-remove:hover {
background: rgba(216,89,89,0.10);
color: #D85959;
border-color: #D85959;
}
@media (max-width: 768px) {
.niveau-grid { grid-template-columns: 1fr; gap: 6px; }
.niveau-row-header { display: none; }
.niveau-row { padding: 10px 0; }
}
/* =====================================================
BANDEAU VERTICAL BATISKOR II — signature visuelle propre à la marque.
Position flanc gauche, texte rotaté en blanc capitales sur fond vert sapin.
Appliqué aux pages de couverture des livrables (Rapport, Bibliothèque, Carnet, Signalétique).
===================================================== */
.report.with-elitis-banner,
.biblio.with-elitis-banner,
.carnet.with-elitis-banner {
position: relative;
padding-left: 76px;
}
.elitis-side-banner {
position: absolute;
top: 0;
left: 0;
width: 56px;
bottom: 0;
background: #2D5B47;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.elitis-side-banner-text {
color: #FFFFFF;
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.35em;
text-transform: uppercase;
white-space: nowrap;
transform: rotate(-90deg);
transform-origin: center center;
font-family: "Inter", sans-serif;
}
/* Variante "écosystème" — affiche BATISKOR II · BBR · FitEMS verticalement,
séparés par des points cuivre. Donne la signature de l'écosystème sur le flanc
gauche de chaque livrable, en remplacement de l'intitulé unique. */
.elitis-side-banner-eco {
transform: rotate(-90deg);
transform-origin: center center;
display: flex;
align-items: center;
gap: 22px;
white-space: nowrap;
font-family: "Inter", sans-serif;
}
.elitis-side-banner-eco .eco-mark {
color: #FFFFFF;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.30em;
text-transform: uppercase;
}
.elitis-side-banner-eco .eco-sep {
color: #B87333;
font-size: 18px;
font-weight: 700;
line-height: 1;
}
@media (max-width: 768px) {
.report.with-elitis-banner,
.biblio.with-elitis-banner,
.carnet.with-elitis-banner { padding-left: 56px; }
.elitis-side-banner { width: 40px; }
.elitis-side-banner-text { font-size: 10.5px; letter-spacing: 0.25em; }
}
/* =====================================================
FOOTER BATISKOR II — signature institutionnelle en bas de livrables.
Style Elitis sobre : marque + slogan italique.
===================================================== */
.batiskor-footer {
margin-top: 36px;
padding: 18px 0 6px 0;
border-top: 1px solid var(--la-line);
display: flex;
align-items: baseline;
gap: 14px;
flex-wrap: wrap;
}
.batiskor-footer-brand {
font-weight: 700;
letter-spacing: 0.12em;
color: var(--la-primary);
font-size: 14px;
text-transform: uppercase;
}
.batiskor-footer-slogan {
font-style: italic;
color: var(--la-muted);
font-size: 13px;
flex: 1;
}
.batiskor-footer-meta {
font-size: 11px;
color: var(--la-muted);
letter-spacing: 0.5px;
}
/* =====================================================
LIGHTBOX PHOTO — clic = agrandissement plein écran
===================================================== */
.lightbox-bg {
position: fixed; inset: 0;
background: rgba(0,0,0,0.94);
display: none;
z-index: 99999;
user-select: none;
outline: none;
}
.lightbox-bg.active { display: flex; align-items: center; justify-content: center; }
.lightbox-img-wrap {
position: relative;
max-width: 95vw; max-height: 95vh;
overflow: hidden;
cursor: zoom-in;
display: flex; align-items: center; justify-content: center;
}
.lightbox-img-wrap.zoomed { cursor: grab; overflow: visible; }
.lightbox-img-wrap.zoomed:active { cursor: grabbing; }
.lightbox-bg img.lightbox-img {
max-width: 95vw; max-height: 95vh;
display: block;
transform-origin: center center;
transition: transform 0.2s ease;
box-shadow: 0 8px 60px rgba(0,0,0,0.6);
border-radius: 4px;
background: #111;
}
.lightbox-bg.dragging img.lightbox-img { transition: none; }
.lightbox-close, .lightbox-prev, .lightbox-next {
position: fixed;
background: rgba(255,255,255,0.10);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: #fff;
border: 1px solid rgba(255,255,255,0.18);
border-radius: 999px;
width: 48px; height: 48px;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
font-size: 22px;
font-weight: 300;
transition: background 0.15s, transform 0.15s;
z-index: 2;
padding: 0;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover {
background: rgba(255,255,255,0.22);
transform: scale(1.05);
}
.lightbox-prev:hover, .lightbox-next:hover { transform: translateY(-50%) scale(1.05); }
.lightbox-close { top: 22px; right: 22px; }
.lightbox-prev { left: 22px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 22px; top: 50%; transform: translateY(-50%); }
.lightbox-toolbar {
position: fixed;
bottom: 22px;
left: 50%; transform: translateX(-50%);
display: flex; gap: 6px; align-items: center;
background: rgba(0,0,0,0.55);
padding: 6px 8px;
border-radius: 999px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.15);
z-index: 2;
}
.lightbox-toolbar button {
width: 38px; height: 38px;
background: transparent;
color: #fff;
border: none;
font-size: 18px;
cursor: pointer;
border-radius: 50%;
transition: background 0.15s;
padding: 0;
}
.lightbox-toolbar button:hover { background: rgba(255,255,255,0.18); }
.lightbox-counter {
color: #fff;
font-size: 13px;
padding: 0 10px;
opacity: 0.9;
font-variant-numeric: tabular-nums;
letter-spacing: 0.5px;
}
.lightbox-caption {
position: fixed;
bottom: 84px;
left: 50%; transform: translateX(-50%);
color: #fff;
font-size: 13px;
background: rgba(0,0,0,0.55);
padding: 6px 14px;
border-radius: 6px;
max-width: 80vw;
text-align: center;
opacity: 0.9;
z-index: 2;
backdrop-filter: blur(10px);
}
@media (max-width: 600px) {
.lightbox-close { top: 14px; right: 14px; width: 42px; height: 42px; }
.lightbox-prev { left: 10px; width: 42px; height: 42px; }
.lightbox-next { right: 10px; width: 42px; height: 42px; }
.lightbox-toolbar { bottom: 14px; }
.lightbox-caption { bottom: 70px; font-size: 12px; }
}
/* Indicateur visuel sur les photos cliquables */
.photos-grid img,
.obs-photos img,
.crn-photos img,
img.inspection-photo {
cursor: zoom-in;
transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.photos-grid img:hover,
.obs-photos img:hover,
.crn-photos img:hover,
img.inspection-photo:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(0,0,0,0.45);
filter: brightness(1.05);
}
body.livrable-light .photos-grid img:hover,
body.livrable-light .obs-photos img:hover,
body.livrable-light .carnet .crn-photos img:hover {
box-shadow: 0 6px 18px rgba(45,91,71,0.22);
filter: brightness(1.02);
}
/* =====================================================
HUB LAUNCHER — écran d'accueil multi-produits
===================================================== */
html.hub-mode, body.hub-mode {
height: auto !important;
min-height: 100vh;
overflow-y: auto !important;
}
body.hub-mode {
background:
radial-gradient(ellipse 800px 600px at 10% -10%, rgba(45,91,71,0.06), transparent),
radial-gradient(ellipse 600px 400px at 100% 100%, rgba(184,115,51,0.05), transparent),
#F5F7F9;
color: #1A1A1A;
}
body.hub-mode .app, body.hub-mode .sidebar, body.hub-mode .fab { display: none !important; }
body.hub-mode #root { height: auto; min-height: 100vh; }
.hub-page {
min-height: 100vh;
padding: 28px 24px 60px;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.hub-page .hub-container { max-width: 1180px; margin: 0 auto; }
.hub-page .hub-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 48px; padding-bottom: 22px; border-bottom: 1px solid #E0E5E8;
}
.hub-page .hub-header-left { display: flex; align-items: center; gap: 18px; }
.hub-page .hub-header-subtitle {
font-size: 11px; letter-spacing: 0.32em; color: #6E7378; text-transform: uppercase; font-weight: 600;
}
.hub-page .hub-header-user {
display: flex; align-items: center; gap: 14px; font-size: 14px; color: #6E7378;
}
.hub-page .hub-header-user .name { color: #1A1A1A; font-weight: 500; }
.hub-page .hub-header-user .admin-badge {
background: rgba(168, 85, 247, 0.10); color: #7c3aed;
font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
letter-spacing: 0.14em; border: 1px solid rgba(124, 58, 237, 0.18);
}
.hub-page .hub-header-logout {
background: #FFFFFF; color: #6E7378; border: 1px solid #E0E5E8; border-radius: 999px;
padding: 8px 18px; font-size: 13px; cursor: pointer; transition: all 0.15s;
font-family: inherit; font-weight: 500;
}
.hub-page .hub-header-logout:hover { border-color: #6E7378; color: #1A1A1A; }
.hub-page .hub-welcome { text-align: center; margin-bottom: 50px; }
.hub-page .hub-welcome h1 {
font-size: clamp(30px, 4vw, 44px); font-weight: 800; letter-spacing: -0.02em;
color: #1A3E2E; margin-bottom: 12px; line-height: 1.1;
}
.hub-page .hub-welcome h1 .accent { color: #B87333; }
.hub-page .hub-welcome p {
font-size: 16px; color: #6E7378; font-weight: 400;
max-width: 560px; margin: 0 auto; line-height: 1.6;
}
.hub-page .hub-tiles {
display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-bottom: 50px;
}
@media (max-width: 820px) { .hub-page .hub-tiles { grid-template-columns: 1fr; } }
.hub-page .tile {
position: relative; background: #FFFFFF; border-radius: 16px;
text-decoration: none; color: #1A1A1A; display: flex; flex-direction: column;
cursor: pointer; overflow: hidden;
transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 1px 4px rgba(26, 26, 26, 0.04), 0 8px 24px rgba(26, 26, 26, 0.05);
border: 1px solid #E0E5E8; padding-left: 36px;
}
.hub-page .tile:hover {
transform: translateY(-6px);
box-shadow: 0 10px 30px rgba(26, 26, 26, 0.10), 0 30px 60px rgba(26, 26, 26, 0.14);
border-color: var(--tile-accent);
}
.hub-page .tile-side-banner {
position: absolute; top: 0; left: 0; bottom: 0; width: 36px;
background: var(--tile-banner-bg);
display: flex; align-items: center; justify-content: center;
z-index: 2; border-right: 1px solid rgba(0,0,0,0.04);
}
.hub-page .tile-side-banner-text {
color: var(--tile-banner-text);
font-size: 10.5px; font-weight: 600; letter-spacing: 0.46em;
text-transform: uppercase; white-space: nowrap;
transform: rotate(-90deg); transform-origin: center center; opacity: 0.78;
}
.hub-page .tile-illustration {
height: 230px; position: relative; overflow: hidden;
background: var(--tile-illu-bg);
display: flex; align-items: center; justify-content: center;
}
.hub-page .tile-illustration svg { width: 100%; height: 100%; }
.hub-page .tile-badge {
position: absolute; top: 16px; right: 16px;
font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
text-transform: uppercase; padding: 6px 14px; border-radius: 999px;
background: rgba(255,255,255,0.94); color: var(--tile-primary);
backdrop-filter: blur(4px);
}
.hub-page .tile-content {
padding: 26px 30px 26px; flex: 1; display: flex; flex-direction: column;
}
.hub-page .product-mark {
font-size: 11px; font-weight: 700; letter-spacing: 0.22em;
color: var(--tile-accent-color); text-transform: uppercase; margin-bottom: 8px;
}
.hub-page .tile-content h2 {
font-size: 22px; font-weight: 800; letter-spacing: -0.015em;
color: var(--tile-primary); line-height: 1.2; margin-bottom: 12px;
}
.hub-page .tile-content p {
font-size: 14.5px; color: #6E7378; line-height: 1.6;
flex: 1; margin-bottom: 20px;
}
.hub-page .tile-cta {
display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.hub-page .tile-cta .stat {
font-size: 12.5px; color: #A5ABB1; font-weight: 500; letter-spacing: 0.02em;
}
.hub-page .tile-button {
display: inline-flex; align-items: center; gap: 8px;
background: var(--tile-tint); color: var(--tile-primary);
border: 1px solid transparent;
padding: 9px 18px; border-radius: 999px;
font-size: 13px; font-weight: 600; letter-spacing: 0.03em;
transition: all 0.22s;
}
.hub-page .tile:hover .tile-button {
background: var(--tile-primary); color: #FFFFFF; border-color: var(--tile-primary);
}
.hub-page .tile-button .arrow { font-size: 16px; transition: transform 0.22s; }
.hub-page .tile:hover .tile-button .arrow { transform: translateX(3px); }
.hub-page .hub-footer {
text-align: center; font-size: 12px; color: #A5ABB1; letter-spacing: 0.06em;
}
.hub-page .hub-footer .separator { margin: 0 12px; opacity: 0.5; }
✶Nouveau : Oblitarium TV — les Cahiers deviennent une émission : photographies anciennes et disques 78 toursregarder →