/* =========================================================================== handy_theme.css -- habillage des pages "handy" et "use cases" --------------------------------------------------------------------------- Feuille ADDITIVE, a charger EN DERNIER (apres handyBlock.css et handy_mobile.css). PRINCIPE : ne touche QUE l'apparence -- couleurs, bordures, ombres, rayons, transitions, graisses. Aucune propriete de mise en page (width, margin, display, float, position) : le travail responsive existant reste intact quel que soit l'ordre de chargement. Scope : body.oc-page-handy ET body.oc-page-usecase. Les deux familles de pages partagent handyBlock.css et la classe .table-stripedBlue, d'ou le meme habillage. Chaque selecteur est duplique plutot que factorise par un selecteur d'attribut : c'est plus verbeux mais on voit d'un coup d'oeil quelles pages sont concernees. Aucune autre page n'est affectee. POUR AJUSTER : les variables ci-dessous suffisent. Pour revenir en arriere, il suffit de retirer le -- rien n'a ete modifie ailleurs. =========================================================================== */ body.oc-page-handy, body.oc-page-usecase { /* Accent principal : le bleu marine deja utilise par le site. */ --h-accent: #002C64; --h-accent-soft: rgba(0, 44, 100, .08); --h-accent-ring: rgba(0, 44, 100, .18); /* Accent secondaire, reserve a l'action principale (bouton calculate). */ --h-action: #ff9800; --h-action-hover: #f08800; /* --- EN-TETES DE TABLEAU ET BLOCS DE TITRE -------------------------- Palette A -- BLEU CIEL (par defaut) : dans la famille du site, plus lumineuse que l'ancien aplat marine a 8 %, qui rendait terne. */ --h-head-from: #e9f3fd; --h-head-to: #d9e9fb; --h-head-text: #00459c; --h-head-line: rgba(0, 69, 156, .16); --h-head-solid: #e3eefc; /* aplat equivalent, pour la sticky mobile */ /* Palette B -- TURQUOISE : rappelle le vert d'eau des tableaux du logiciel. Plus frais, un peu moins institutionnel. --h-head-from: #e4f7f4; --h-head-to: #d2efea; --h-head-text: #0f6f63; --h-head-line: rgba(15, 111, 99, .18); --h-head-solid: #dbf3ef; */ /* Palette C -- AMBRE : reprend l'orange de la charte. Le plus chaleureux, mais a n'utiliser QUE si --h-action passe au bleu, sinon l'en-tete et le bouton principal se disputent l'attention. --h-head-from: #fff5e6; --h-head-to: #ffe9cd; --h-head-text: #9a5b00; --h-head-line: rgba(154, 91, 0, .18); --h-head-solid: #fff0dc; */ /* Neutres */ --h-field-bg: #f4f6f8; /* fond des champs de saisie */ --h-field-bg-focus: #ffffff; --h-line: rgba(30, 69, 128, .10); --h-text: #1e2933; --h-text-soft: #5a6b7a; /* Formes */ --h-radius: 12px; --h-radius-sm: 8px; --h-shadow: 0 1px 2px rgba(16, 40, 64, .05), 0 8px 24px rgba(16, 40, 64, .05); --h-shadow-hover: 0 1px 2px rgba(16, 40, 64, .06), 0 12px 32px rgba(16, 40, 64, .09); } /* --------------------------------------------------------------------------- 1. CHAMPS DE SAISIE --------------------------------------------------------------------------- C'est le changement le plus visible. handyBlock.css encadre chaque input et chaque select d'un trait gris (l.108, 117, 126...), ce qui donne l'aspect "formulaire administratif" : une grille de cases toutes identiques. On remplace la bordure par un aplat gris tres clair. Le champ se lit alors comme une valeur, pas comme une case a remplir ; la bordure ne reapparait qu'au focus, la ou elle porte reellement de l'information. --------------------------------------------------------------------------- */ body.oc-page-handy .input .parameters input, body.oc-page-usecase .input .parameters input, body.oc-page-handy .input .parametersVar input, body.oc-page-usecase .input .parametersVar input, body.oc-page-handy .tableHandy .parameters input, body.oc-page-usecase .tableHandy .parameters input, body.oc-page-handy .tableHandy .parametersVar input, body.oc-page-usecase .tableHandy .parametersVar input, body.oc-page-handy .table-stripedBlue input[type="text"], body.oc-page-usecase .table-stripedBlue input[type="text"], body.oc-page-handy .table-stripedBlue input:not([type]), body.oc-page-usecase .table-stripedBlue input:not([type]) { background-color: var(--h-field-bg); border: 1px solid transparent; border-radius: var(--h-radius-sm); color: var(--h-text); box-shadow: none; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; } body.oc-page-handy .input select, body.oc-page-usecase .input select, body.oc-page-handy .tableHandy select, body.oc-page-usecase .tableHandy select, body.oc-page-handy .output select, body.oc-page-usecase .output select, body.oc-page-handy .table-stripedBlue select, body.oc-page-usecase .table-stripedBlue select { background-color: var(--h-field-bg); border: 1px solid transparent; border-radius: var(--h-radius-sm); color: var(--h-text-soft); transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; } /* Etat actif : le champ s'eclaircit et recoit un anneau d'accent. */ body.oc-page-handy input:focus, body.oc-page-usecase input:focus, body.oc-page-handy select:focus, body.oc-page-usecase select:focus { background-color: var(--h-field-bg-focus); border-color: var(--h-accent); box-shadow: 0 0 0 3px var(--h-accent-ring); outline: none; } body.oc-page-handy input:hover:not(:focus), body.oc-page-usecase input:hover:not(:focus), body.oc-page-handy select:hover:not(:focus), body.oc-page-usecase select:hover:not(:focus) { border-color: var(--h-line); } /* Chiffres a chasse fixe : les decimales s'alignent d'une ligne a l'autre. Sur un site de calcul, c'est un detail qui change beaucoup la perception. */ body.oc-page-handy input[type="text"], body.oc-page-usecase input[type="text"], body.oc-page-handy input:not([type]), body.oc-page-usecase input:not([type]), body.oc-page-handy .table-stripedBlue td, body.oc-page-usecase .table-stripedBlue td { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* --------------------------------------------------------------------------- 2. TABLEAUX EN CARTES --------------------------------------------------------------------------- handyBlock.css (l.612) encadre .table-stripedBlue d'un trait. On remplace le trait par une ombre douce : le bloc se detache du fond au lieu d'etre cerne, ce qui allege l'ensemble sans rien deplacer. --------------------------------------------------------------------------- */ body.oc-page-handy .table-stripedBlue, body.oc-page-usecase .table-stripedBlue { border: 1px solid var(--h-line); border-radius: var(--h-radius); box-shadow: var(--h-shadow); background-color: #fff; overflow: hidden; } /* En-tete : aplat tres doux plutot que le bleu a 20 % d'opacite. */ body.oc-page-handy .table-stripedBlue thead, body.oc-page-usecase .table-stripedBlue thead { background-color: var(--h-head-solid); border-bottom: 1px solid var(--h-head-line); } /* Le degrade est pose sur les th et non sur le thead : sur un table-header-group, le rendu d'un background-image varie selon les navigateurs. Le background-color du thead ci-dessus sert de repli. */ body.oc-page-handy .table-stripedBlue thead th, body.oc-page-usecase .table-stripedBlue thead th { background-image: linear-gradient(180deg, var(--h-head-from) 0%, var(--h-head-to) 100%); color: var(--h-head-text); font-weight: 600; letter-spacing: .02em; } /* Alternance de lignes attenuee : le zebrage actuel est plus marque que necessaire une fois les champs allegis. */ body.oc-page-handy .table-stripedBlue tbody tr:nth-of-type(even), body.oc-page-usecase .table-stripedBlue tbody tr:nth-of-type(even) { background-color: rgba(30, 69, 128, .025); } /* Survol de ligne : la page cesse de ressembler a un document imprime. */ body.oc-page-handy .table-stripedBlue tbody tr, body.oc-page-usecase .table-stripedBlue tbody tr { transition: background-color .12s ease; } body.oc-page-handy .table-stripedBlue tbody tr:hover, body.oc-page-usecase .table-stripedBlue tbody tr:hover { background-color: var(--h-head-from); } /* Les blocs de titre et de menu suivent le meme traitement. */ body.oc-page-handy .title_backGrBlue, body.oc-page-usecase .title_backGrBlue, body.oc-page-handy .menuHandy2_backGrBlue, body.oc-page-usecase .menuHandy2_backGrBlue { background-color: var(--h-head-solid); background-image: linear-gradient(180deg, var(--h-head-from) 0%, var(--h-head-to) 100%); border-radius: var(--h-radius); box-shadow: var(--h-shadow); border: 1px solid var(--h-head-line); } body.oc-page-handy #schemaListe img, body.oc-page-usecase #schemaListe img { border-radius: var(--h-radius); border-color: var(--h-line); box-shadow: var(--h-shadow); transition: box-shadow .2s ease; } body.oc-page-handy #schemaListe img:hover, body.oc-page-usecase #schemaListe img:hover { box-shadow: var(--h-shadow-hover); } /* --------------------------------------------------------------------------- 3. HIERARCHIE DES BOUTONS --------------------------------------------------------------------------- calculate, tableV et curveV ont aujourd'hui le meme poids visuel alors que calculate est l'action principale et les deux autres des variantes. ATTENTION : le ciblage se fait par l'attribut value. Si les libelles different de "calculate" sur certaines pages, ajuster le selecteur. --------------------------------------------------------------------------- */ body.oc-page-handy #boutons_calcul input[type="submit"], body.oc-page-usecase #boutons_calcul input[type="submit"], body.oc-page-handy #boutons_load input[type="submit"], body.oc-page-usecase #boutons_load input[type="submit"], body.oc-page-handy #boutons_calculDir input[type="submit"], body.oc-page-usecase #boutons_calculDir input[type="submit"], body.oc-page-handy #boutons_calculVar input[type="submit"], body.oc-page-usecase #boutons_calculVar input[type="submit"] { border-radius: var(--h-radius-sm); font-weight: 500; letter-spacing: .01em; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .08s ease; } /* Actions secondaires : contour seul. */ body.oc-page-handy #boutons_calcul input[type="submit"], body.oc-page-usecase #boutons_calcul input[type="submit"] { background-color: #fff; color: var(--h-accent); border: 1px solid var(--h-accent); } body.oc-page-handy #boutons_calcul input[type="submit"]:hover, body.oc-page-usecase #boutons_calcul input[type="submit"]:hover { background-color: var(--h-accent-soft); color: var(--h-accent); } /* Action principale : pleine, dans l'accent secondaire. */ body.oc-page-handy #boutons_calcul input[type="submit"][value="calculate"], body.oc-page-usecase #boutons_calcul input[type="submit"][value="calculate"] { background-color: var(--h-action); border-color: var(--h-action); color: #fff; box-shadow: 0 2px 8px rgba(255, 152, 0, .28); } body.oc-page-handy #boutons_calcul input[type="submit"][value="calculate"]:hover, body.oc-page-usecase #boutons_calcul input[type="submit"][value="calculate"]:hover { background-color: var(--h-action-hover); border-color: var(--h-action-hover); color: #fff; box-shadow: 0 4px 14px rgba(255, 152, 0, .36); } body.oc-page-handy #boutons_calcul input[type="submit"]:active, body.oc-page-usecase #boutons_calcul input[type="submit"]:active, body.oc-page-handy #boutons_load input[type="submit"]:active, body.oc-page-usecase #boutons_load input[type="submit"]:active { transform: translateY(1px); } /* --------------------------------------------------------------------------- 4. BARRE DE LIENS BEIGES (about / caution / parameters / glossary / ...) --------------------------------------------------------------------------- Cinq paves pleins de meme poids captent plus d'attention que les donnees. On les passe en pastilles discretes : contour fin, fond transparent, aplat au survol seulement. --------------------------------------------------------------------------- */ body.oc-page-handy #menuCalculHandy a, body.oc-page-usecase #menuCalculHandy a { background-color: transparent; border: 1px solid #f0d9b5; color: #8a6320; border-radius: 999px; font-weight: 500; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } body.oc-page-handy #menuCalculHandy a:hover, body.oc-page-usecase #menuCalculHandy a:hover { background-color: #fce9cc; border-color: #e8c48f; color: #6d4d15; } /* --------------------------------------------------------------------------- 5. INDICATEURS D'ACCES (cadenas .access1 a .access4) --------------------------------------------------------------------------- Ces couleurs portent une INFORMATION (niveau d'acces) : on ne les neutralise pas. On reduit seulement leur poids visuel au repos, pour qu'elles cessent de dominer la colonne de liens, et on les ravive au survol de la ligne. --------------------------------------------------------------------------- */ body.oc-page-handy .access1, body.oc-page-usecase .access1, body.oc-page-handy .access2, body.oc-page-usecase .access2, body.oc-page-handy .access3, body.oc-page-usecase .access3, body.oc-page-handy .access4, body.oc-page-usecase .access4 { opacity: .55; transition: opacity .15s ease; } body.oc-page-handy .handyMenuLink:hover .access1, body.oc-page-usecase .handyMenuLink:hover .access1, body.oc-page-handy .handyMenuLink:hover .access2, body.oc-page-usecase .handyMenuLink:hover .access2, body.oc-page-handy .handyMenuLink:hover .access3, body.oc-page-usecase .handyMenuLink:hover .access3, body.oc-page-handy .handyMenuLink:hover .access4, body.oc-page-usecase .handyMenuLink:hover .access4 { opacity: 1; } body.oc-page-handy .handyMenuLink a, body.oc-page-usecase .handyMenuLink a { border-radius: 6px; transition: color .15s ease, background-color .15s ease; } /* --------------------------------------------------------------------------- 6. COMPATIBILITE MOBILE --------------------------------------------------------------------------- handy_mobile.css fige la premiere colonne en position:sticky avec un fond blanc opaque (indispensable : sans fond, le texte defilant transparait dessous). Le zebrage ci-dessus ne doit pas s'y appliquer, sinon la colonne figee laisse voir les lignes qui passent derriere. --------------------------------------------------------------------------- */ @media (max-width: 991px) { body.oc-page-handy .table-stripedBlue tbody tr:nth-of-type(even) td:first-child, body.oc-page-usecase .table-stripedBlue tbody tr:nth-of-type(even) td:first-child { background: #fff; } /* Le rayon ne doit pas rogner le contenu d'un conteneur qui defile. */ body.oc-page-handy .table-stripedBlue, body.oc-page-usecase .table-stripedBlue { overflow-x: auto; } /* handy_mobile.css fixe #cfe2f3 en dur sur la premiere cellule d'en-tete figee. On l'accorde a la palette pour eviter un raccord visible. */ body.oc-page-handy .table-stripedBlue thead th:first-child, body.oc-page-usecase .table-stripedBlue thead th:first-child { background: var(--h-head-solid); } } /* =========================================================================== 7. MISE EN PAGE -- EXCEPTION AU PRINCIPE DE CETTE FEUILLE --------------------------------------------------------------------------- ATTENTION : contrairement au reste du fichier, cette section touche a la MISE EN PAGE et non a la seule apparence. Elle est isolee ici pour pouvoir etre retiree seule si elle interfere avec le responsive. Objet : centrer verticalement la colonne des schemas sur le bloc de texte voisin (pages use case). Mesures : la .row parente est DEJA en display:flex, avec align-items a sa valeur initiale (normal = stretch). La colonne des schemas s'etirait donc sur toute la hauteur de la rangee -- 502px pour 118px de contenu -- et les images restaient callees en haut. Un simple align-items suffit : aucun changement de mode de disposition, donc pas d'impact sur l'empilement mobile, ou align-items gouverne l'axe horizontal et se trouve neutralise par les width:100% habituels. Le selecteur exige que le .col-2 soit un ENFANT DIRECT de la rangee : sur la page mesuree, 12 .row existent et deux contiennent un .schemaCalcul, mais seule la bonne a un .col-2 en enfant direct (l'autre a un .col-12). =========================================================================== */ body.oc-page-usecase #content .row:has(> .col-2 .schemaCalcul) { align-items: center; } /* La classe margin-top-50 du HTML poussait la colonne vers le bas ; une fois celle-ci centree, cette marge decale le bloc de 50px et ruine le centrage. */ body.oc-page-usecase #content .row:has(> .col-2 .schemaCalcul) > .col-2.margin-top-50 { margin-top: 0 !important; } /* Remontee du bloc de schemas. --------------------------------------------------------------------------- Le centrage geometrique sur la boite du texte ne donne pas le resultat visuellement attendu : les schemas paraissent trop bas. Plutot que de traquer la cause exacte (marges internes, interlignes, dernier paragraphe), on decale le bloc a l'oeil. position:relative + top decale l'AFFICHAGE sans toucher au flux : la hauteur de la rangee reste inchangee et aucun autre bloc ne bouge. >>> POUR AJUSTER : modifier la seule valeur ci-dessous. Plus la valeur est negative, plus le bloc monte (-40px, -60px...). Mettre 0 pour revenir au centrage geometrique seul. */ body.oc-page-usecase #content .row:has(> .col-2 .schemaCalcul) > .col-2 { position: relative; top: -20px; }