/* ==========================================================================
VARIABLES CSS - ECOPHOT
Organisation logique et optimisée
========================================================================== */
:root {
/* ======================================================================
1. COULEURS PRINCIPALES
====================================================================== */
/* Couleurs de marque */
--primary: #1a73e8;
--primary-accessible: #0d47a1; /* Bleu foncé - ratio 8.59:1 */
--primary-hover: #1565c0; /* Bleu hover - ratio 6.4:1 */
--secondary: #34a853;
--secondary-accessible: #1e7e34; /* Vert foncé - ratio 4.86:1 avec blanc — WCAG AA */
--secondary-hover: #176c2b; /* Vert hover - ratio 6.2:1 avec blanc */
--accent: #fbbc05;
--warning: #ff3b30;
/* ======================================================================
2. COULEURS DE TEXTE (contraste amélioré)
====================================================================== */
--dark: #1a1a1a; /* Noir presque pur - ratio 15.3:1 */
--dark-medium: #2c2c2c; /* Gris très foncé - ratio 12.6:1 */
--dark-light: #4a4a4a; /* Gris foncé - ratio 9.5:1 */
--text-on-light: var(--dark); /* Texte sur fond clair */
--text-on-dark: #ffffff; /* Texte sur fond sombre */
--text-on-image: #ffffff; /* Texte sur image */
/* Textes sur fond sombre - Contrastes renforcés */
--text-on-dark-primary: #ffffff;
--text-on-dark-secondary: #e2e8f0;
--text-on-dark-muted: #cbd5e1;
/* ======================================================================
3. COULEURS DE FOND
====================================================================== */
/* Fonds clairs */
--light: #f8f9fa;
--medium: #e0e0e0;
/* Fonds sombres */
--bg-page-dark: #0f172a;
--bg-section-dark: #1e293b;
--bg-card-dark: #334155;
--bg-hover: #475569;
/* ======================================================================
4. COULEURS CONTEXTUELLES
====================================================================== */
/* FAQ */
--faq-text-primary: #1a1a1a;
--faq-text-secondary: #2c2c2c;
--faq-primary: #0d47a1;
--faq-primary-hover: #1565c0;
--faq-background-form: #ffffff;
--faq-border: #d1d5db;
/* Datasheets */
--datasheet-primary: #60a5fa;
--datasheet-secondary: #94a3b8;
--datasheet-success: #34d399;
--datasheet-warning: #fbbf24;
--datasheet-danger: #f87171;
--datasheet-info: #22d3ee;
/* Search */
--search-title-color: #1a73e8;
--search-accent-color: #4CAF50;
--search-hover-color: #45a049;
/* Annotations */
--annotation-primary: #1a73e8;
--annotation-secondary: #34a853;
--annotation-accent: #fbbc05;
--annotation-white: #ffffff;
--annotation-light: #f8f9fa;
--annotation-medium: #e0e0e0;
--annotation-dark: #333333;
--annotation-shadow: 0 5px 15px rgba(0,0,0,0.1);
--annotation-shadow-hover: 0 15px 30px rgba(0,0,0,0.2);
--annotation-transition: all 0.3s ease;
/* Code */
--code-primary: #1a73e8;
--code-secondary: #34a853;
--code-dark: #1e1e1e;
--code-light: #f8f9fa;
/* Langages de programmation */
--esphome-color: #667eea;
--homeassistant-color: #41bdf5;
--cpp-color: #f34b7d;
--yaml-color: #34a853;
--python-color: #3776ab;
/* Astrophotographie */
--astro-blue: #0a3a6b;
--astro-gold: #ffd700;
--astro-dark: #0a1a2e;
--astro-light: #87ceeb;
--astro-white: #f8f9fa;
/* Domotique */
--domotique-primary: #1a73e8;
--domotique-secondary: #34a853;
--domotique-accent: #fbbc05;
--domotique-warning: #ff3b30;
--esp32-blue: #1a73e8;
--esp32-green: #34a853;
/* Couleurs génériques */
--color-primary: #667eea;
--color-primary-dark: #764ba2;
--color-text: #2c3e50;
--color-text-light: #555;
--color-border: #e0e0e0;
/* ======================================================================
5. BORDURES
====================================================================== */
--border-dark: #475569;
--border-light: #64748b;
/* ======================================================================
6. OMBRES
====================================================================== */
--shadow-sm: 0 2px 4px 0 rgb(0 0 0 / 0.4);
--shadow-md: 0 4px 8px -1px rgb(0 0 0 / 0.4);
--shadow-lg: 0 12px 20px -3px rgb(0 0 0 / 0.5);
--overlay-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
--overlay-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.4);
/* ======================================================================
7. RAYONS DE BORDURE
====================================================================== */
--radius-sm: 0.375rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
/* ======================================================================
8. TYPOGRAPHIE
====================================================================== */
/* Échelle typographique harmonieuse (échelle 1.25 - Major Third) */
--font-size-xs: 0.8rem; /* 12.8px */
--font-size-sm: 0.9rem; /* 14.4px */
--font-size-base: 1rem; /* 16px */
--font-size-lg: 1.125rem; /* 18px */
--font-size-xl: 1.25rem; /* 20px */
--font-size-2xl: 1.5rem; /* 24px */
--font-size-3xl: 1.875rem; /* 30px */
--font-size-4xl: 2.25rem; /* 36px */
--font-size-5xl: 2.8rem; /* 44.8px */
--font-size-6xl: 3.5rem; /* 56px */
/* Hauteurs de ligne */
--line-height-tight: 1.25;
--line-height-normal: 1.5;
--line-height-relaxed: 1.75;
/* Espacements typographiques */
--heading-margin-bottom: 1.5rem;
--paragraph-margin-bottom: 1rem;
/* Poids de police */
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
/* ======================================================================
9. ESPACEMENTS
====================================================================== */
--spacing-base: 1rem;
--spacing-lg: 1.5rem;
--spacing-2xl: 3rem;
--spacing-4xl: 5rem;
/* ======================================================================
10. TAILLES DE CONTAINER
====================================================================== */
--container-sm: 540px;
--container-md: 720px;
--container-lg: 960px;
--container-xl: 1140px;
--container-xxl: 1320px;
/* ======================================================================
11. TRANSITIONS
====================================================================== */
--transition-base: 0.2s ease;
--transition-fast: 0.1s ease;
--transition-slow: 0.3s ease;
--overlay-transition: all 0.3s ease;
/* ======================================================================
12. VARIABLES SPÉCIFIQUES PDF.JS / VIEWER
====================================================================== */
/* Panel */
--panel-width: 300px;
/* Highlight */
--highlight-bg-color: rgba(180, 0, 170, 1);
--highlight-selected-bg-color: rgba(0, 100, 0, 1);
/* Annotations non focusées */
--annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,");
/* Input states */
--input-focus-border-color: Highlight;
--input-focus-outline: 1px solid Canvas;
--input-unfocused-border-color: transparent;
--input-disabled-border-color: transparent;
--input-hover-border-color: black;
--link-outline: none;
/* Outlines */
--outline-width: 2px;
--outline-color: #0060df;
--outline-around-width: 1px;
--outline-around-color: #f0f0f4;
--hover-outline-around-color: var(--outline-around-color);
--focus-outline: solid var(--outline-width) var(--outline-color);
--unfocus-outline: solid var(--outline-width) transparent;
--focus-outline-around: solid var(--outline-around-width) var(--outline-around-color);
--hover-outline-color: #8f8f9d;
--hover-outline: solid var(--outline-width) var(--hover-outline-color);
--hover-outline-around: solid var(--outline-around-width) var(--hover-outline-around-color);
/* Freetext editor */
--freetext-line-height: 1.35;
--freetext-padding: 2px;
/* Resizer */
--resizer-bg-color: var(--outline-color);
--resizer-size: 6px;
--resizer-shift: calc(0px - (var(--outline-width) + var(--resizer-size)) / 2 - var(--outline-around-width));
/* Editor cursors */
--editorFreeText-editing-cursor: text;
--editorInk-editing-cursor: url(images/cursor-editorInk.svg) 0 16, pointer;
/* Alt text */
--alt-text-opacity: 0.8;
--alt-text-add-image: url(images/altText_add.svg);
--alt-text-done-image: url(images/altText_done.svg);
--alt-text-bg-color: rgba(43, 42, 51, var(--alt-text-opacity));
--alt-text-fg-color: #fbfbfe;
--alt-text-border-color: var(--alt-text-bg-color);
--alt-text-hover-bg-color: rgba(82, 82, 94, var(--alt-text-opacity));
--alt-text-hover-fg-color: var(--alt-text-fg-color);
--alt-text-hover-border-color: var(--alt-text-hover-bg-color);
--alt-text-active-bg-color: rgba(91, 91, 102, var(--alt-text-opacity));
--alt-text-active-fg-color: var(--alt-text-fg-color);
--alt-text-active-border-color: var(--alt-text-hover-bg-color);
--alt-text-focus-outline-color: #0060df;
--alt-text-focus-border-color: #f0f0f4;
--alt-text-shadow: 0 2px 6px 0 rgba(28, 27, 34, 0.5);
/* XFA fields */
--xfa-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,");
--xfa-focus-outline: auto;
/* Viewer container */
--viewer-container-height: 0;
--pdfViewer-padding-bottom: 0;
--page-margin: 1px auto -8px;
--page-border: 9px solid transparent;
--spreadHorizontalWrapped-margin-LR: -3.5px;
--loading-icon-delay: 400ms;
/* Direction */
--dir-factor: 1;
--inline-start: left;
--inline-end: right;
/* Sidebar */
--sidebar-width: 200px;
--sidebar-transition-duration: 200ms;
--sidebar-transition-timing-function: ease;
/* Icons opacity */
--toolbar-icon-opacity: 0.7;
--doorhanger-icon-opacity: 0.9;
/* Main colors */
--main-color: rgba(12, 12, 13, 1);
--body-bg-color: rgba(212, 212, 215, 1);
--progressBar-color: rgba(10, 132, 255, 1);
--progressBar-bg-color: rgba(221, 221, 222, 1);
--progressBar-blend-color: rgba(116, 177, 239, 1);
--scrollbar-color: auto;
--scrollbar-bg-color: auto;
--toolbar-icon-bg-color: rgba(0, 0, 0, 1);
--toolbar-icon-hover-bg-color: rgba(0, 0, 0, 1);
/* Sidebar colors */
--sidebar-narrow-bg-color: rgba(212, 212, 215, 0.9);
--sidebar-toolbar-bg-color: rgba(245, 246, 247, 1);
/* Toolbar */
--toolbar-bg-color: rgba(249, 249, 250, 1);
--toolbar-border-color: rgba(184, 184, 184, 1);
--toolbar-box-shadow: 0 1px 0 var(--toolbar-border-color);
--toolbar-border-bottom: none;
--toolbarSidebar-box-shadow: inset calc(-1px * var(--dir-factor)) 0 0 rgba(0, 0, 0, 0.25), 0 1px 0 rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.1);
--toolbarSidebar-border-bottom: none;
/* Buttons */
--button-hover-color: rgba(221, 222, 223, 1);
--toggled-btn-color: rgba(0, 0, 0, 1);
--toggled-btn-bg-color: rgba(0, 0, 0, 0.3);
--toggled-hover-active-btn-color: rgba(0, 0, 0, 0.4);
--toggled-hover-btn-outline: none;
--dropdown-btn-bg-color: rgba(215, 215, 219, 1);
--dropdown-btn-border: none;
/* Separator */
--separator-color: rgba(0, 0, 0, 0.3);
/* Fields */
--field-color: rgba(6, 6, 6, 1);
--field-bg-color: rgba(255, 255, 255, 1);
--field-border-color: rgba(187, 187, 188, 1);
/* Tree items */
--treeitem-color: rgba(0, 0, 0, 0.8);
--treeitem-bg-color: rgba(0, 0, 0, 0.15);
--treeitem-hover-color: rgba(0, 0, 0, 0.9);
--treeitem-selected-color: rgba(0, 0, 0, 0.9);
--treeitem-selected-bg-color: rgba(0, 0, 0, 0.25);
/* Thumbnails */
--thumbnail-hover-color: rgba(0, 0, 0, 0.1);
--thumbnail-selected-color: rgba(0, 0, 0, 0.2);
/* Doorhanger */
--doorhanger-bg-color: rgba(255, 255, 255, 1);
--doorhanger-border-color: rgba(12, 12, 13, 0.2);
--doorhanger-hover-color: rgba(12, 12, 13, 1);
--doorhanger-hover-bg-color: rgba(237, 237, 237, 1);
--doorhanger-separator-color: rgba(222, 222, 222, 1);
/* Dialog buttons */
--dialog-button-border: none;
--dialog-button-bg-color: rgba(12, 12, 13, 0.1);
--dialog-button-hover-bg-color: rgba(12, 12, 13, 0.3);
/* Overlay */
--overlay-border: 2px solid rgba(255, 255, 255, 0.9);
--overlay-text-bg: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
/* Icons URLs */
--loading-icon: url(images/loading.svg);
--treeitem-expanded-icon: url(images/treeitem-expanded.svg);
--treeitem-collapsed-icon: url(images/treeitem-collapsed.svg);
--toolbarButton-editorFreeText-icon: url(images/toolbarButton-editorFreeText.svg);
--toolbarButton-editorInk-icon: url(images/toolbarButton-editorInk.svg);
--toolbarButton-editorStamp-icon: url(images/toolbarButton-editorStamp.svg);
--toolbarButton-menuArrow-icon: url(images/toolbarButton-menuArrow.svg);
--toolbarButton-sidebarToggle-icon: url(images/toolbarButton-sidebarToggle.svg);
--toolbarButton-secondaryToolbarToggle-icon: url(images/toolbarButton-secondaryToolbarToggle.svg);
--toolbarButton-pageUp-icon: url(images/toolbarButton-pageUp.svg);
--toolbarButton-pageDown-icon: url(images/toolbarButton-pageDown.svg);
--toolbarButton-zoomOut-icon: url(images/toolbarButton-zoomOut.svg);
--toolbarButton-zoomIn-icon: url(images/toolbarButton-zoomIn.svg);
--toolbarButton-presentationMode-icon: url(images/toolbarButton-presentationMode.svg);
--toolbarButton-print-icon: url(images/toolbarButton-print.svg);
--toolbarButton-openFile-icon: url(images/toolbarButton-openFile.svg);
--toolbarButton-download-icon: url(images/toolbarButton-download.svg);
--toolbarButton-bookmark-icon: url(images/toolbarButton-bookmark.svg);
--toolbarButton-viewThumbnail-icon: url(images/toolbarButton-viewThumbnail.svg);
--toolbarButton-viewOutline-icon: url(images/toolbarButton-viewOutline.svg);
--toolbarButton-viewAttachments-icon: url(images/toolbarButton-viewAttachments.svg);
--toolbarButton-viewLayers-icon: url(images/toolbarButton-viewLayers.svg);
--toolbarButton-currentOutlineItem-icon: url(images/toolbarButton-currentOutlineItem.svg);
--toolbarButton-search-icon: url(images/toolbarButton-search.svg);
--findbarButton-previous-icon: url(images/findbarButton-previous.svg);
--findbarButton-next-icon: url(images/findbarButton-next.svg);
--secondaryToolbarButton-firstPage-icon: url(images/secondaryToolbarButton-firstPage.svg);
--secondaryToolbarButton-lastPage-icon: url(images/secondaryToolbarButton-lastPage.svg);
--secondaryToolbarButton-rotateCcw-icon: url(images/secondaryToolbarButton-rotateCcw.svg);
--secondaryToolbarButton-rotateCw-icon: url(images/secondaryToolbarButton-rotateCw.svg);
--secondaryToolbarButton-selectTool-icon: url(images/secondaryToolbarButton-selectTool.svg);
--secondaryToolbarButton-handTool-icon: url(images/secondaryToolbarButton-handTool.svg);
--secondaryToolbarButton-scrollPage-icon: url(images/secondaryToolbarButton-scrollPage.svg);
--secondaryToolbarButton-scrollVertical-icon: url(images/secondaryToolbarButton-scrollVertical.svg);
--secondaryToolbarButton-scrollHorizontal-icon: url(images/secondaryToolbarButton-scrollHorizontal.svg);
--secondaryToolbarButton-scrollWrapped-icon: url(images/secondaryToolbarButton-scrollWrapped.svg);
--secondaryToolbarButton-spreadNone-icon: url(images/secondaryToolbarButton-spreadNone.svg);
--secondaryToolbarButton-spreadOdd-icon: url(images/secondaryToolbarButton-spreadOdd.svg);
--secondaryToolbarButton-spreadEven-icon: url(images/secondaryToolbarButton-spreadEven.svg);
--secondaryToolbarButton-documentProperties-icon: url(images/secondaryToolbarButton-documentProperties.svg);
--editorParams-stampAddImage-icon: url(images/toolbarButton-zoomIn.svg);
}