/* Les polices sont declarees dans wwwroot/fonts/fonts.css et servies depuis notre propre domaine. L'@import vers fonts.googleapis.com qui figurait ici a ete retire : il transmettait l'adresse IP de chaque visiteur a Google et imposait trois allers-retours reseau avant l'affichage du bon caractere. */ /* ========================================================================== CHARTE GRAPHIQUE OFFICIELLE R.O.F. (Cahier des charges 2016) Palette relevee directement dans le PDF de la charte : Logotype (3 couleurs imperatives) RVB 32-73-159 CMJN 100-84-0-0 #20499F bleu RVB 26-182-182 CMJN 77-0-34-0 #1AB6B6 teal lagon RVB 147-47-110 CMJN 47-100-35-0 #932F6E prune Palette etendue RVB 0-183-200 CMJN 77-0-23-0 #00B7C8 cyan profond RVB 0-124-197 CMJN 96-41-0-0 #007CC5 bleu median RVB 0-178-241 CMJN 88-0-0-0 #00B2F1 cyan clair RVB 215-126-179 CMJN 9-62-0-0 #D77EB3 rose soft RVB 230-60-105 CMJN 0-93-40-0 #E63C69 rose vif Typographies : Cocon-Bold (titres) / DIN OT (texte courant) Le kaki #617810 / #b7ce36 ne figure pas au cahier des charges : il a ete retire de l'ensemble du front office. FONDS — trois habillages, choisis page par page. A « Clair & net » (par defaut) : fond de page blanc a peine bleute, surfaces blanches, definition par les bordures et les bandeaux. Pages publiques, connexion, espace adherent. C « Lagon » : meme structure, neutres derives du teal #1AB6B6 de la charte. Page d'adhesion — attribut data-rof-pal="lagon". A + bandeaux lagon : base A, bandeaux teintes en lagon plutot qu'en bleu. Espace adherent — attribut data-rof-bands="lagon". Le bandeau superieur reste au bleu #20499F de la charte sur toutes les pages. Regle commune : aucun aplat de GRIS. Les fonds sont derives des couleurs de la charte. A forte luminosite, un bleu peu sature est percu comme du gris — d'ou des teintes volontairement chromatiques. CONTRASTES : le teal et le rose de la charte ne passent pas le seuil WCAG AA en couleur de TEXTE sur fond clair (2,3:1 et 3,9:1 pour 4,5:1 requis). Deux variantes assombries sont donc definies pour cet usage precis (--rof-teal-text, --rof-rose-text). Les teintes d'origine restent utilisees en aplat de fond avec du texte blanc, ou l'exigence est respectee. ========================================================================== */ :root { /* --- Logotype : les trois couleurs imperatives --- */ --rof-blue-primary: #20499F; --rof-teal-primary: #1AB6B6; --rof-prune-primary: #932F6E; /* --- Palette etendue de la charte --- */ --rof-cyan-deep: #00B7C8; --rof-blue-mid: #007CC5; --rof-cyan-light: #00B2F1; --rof-rose-soft: #D77EB3; --rof-rose-primary: #E63C69; /* --- Declinaisons de travail --- */ --rof-blue-dark: #17377A; --rof-blue-deep: #10254F; --rof-blue-100: #DDE6F7; --rof-blue-50: #EDF2FB; /* Variantes assombries destinees au TEXTE. Elles etaient calees sur le seuil de 4,5:1 mesure SUR BLANC. Or elles servent aussi de couleur de texte sur leur propre teinte claire, dans les pastilles (.badge-rof-teal, .badge-rof-pink) : le fond n'est alors plus blanc mais deja colore, et le rapport retombait sous le seuil — 4,45:1 pour le teal sur #DCF3F3, 4,07:1 pour le rose sur #FCEBF1. Les deux valeurs sont donc calees sur le cas le plus defavorable, la pastille, et non sur le blanc : 5,2:1 et 4,9:1 sur teinte, 6,1:1 et 5,6:1 sur blanc. Le rose gagne au passage du contraste comme aplat de bouton (.btn-rof-pink, texte blanc). */ --rof-teal-text: #0A6E6E; --rof-teal-light: #DCF3F3; --rof-rose-text: #C42551; --rof-rose-dark: #A81E45; --rof-rose-light: #FCEBF1; /* Etats semantiques */ --rof-ok: #0F7B4F; --rof-ok-light: #E1F3EA; --rof-warn: #A9500A; --rof-warn-light: #FBEFDC; --rof-danger: #B81F38; --rof-danger-light: #FBE7EB; /* --- Neutres — palette A « Clair & net » --- */ /* Fond de page blanc a peine bleute : il suffit a detacher les surfaces blanches, sans le poids d'un aplat teinte. */ --rof-bg-light: #F4F8FD; --rof-card-bg: #FFFFFF; /* Deux bandeaux, tous deux derives du cyan #00B2F1 de la charte et non d'un bleu neutre : a luminosite egale, un bleu peu sature est percu comme du gris. C'est ce qui plombait #EAF3FB, dont l'ecart chromatique n'etait que de 17 points ; ces deux-ci montent a 25 et 39. --rof-band : discret. En-tetes de carte, en-tetes de tableau, survols de ligne. --rof-band-section : sections pleine largeur portant des cartes BLANCHES, qui ont besoin de s'en detacher. */ --rof-band: #E4F4FD; --rof-band-section: #D4ECFB; /* Surface secondaire (.bg-light) : elle doit se distinguer A LA FOIS du fond de page et du blanc des cartes, puisqu'elle sert dans les deux positions — parfois comme encart posé sur la page, parfois comme panneau à l'intérieur d'une carte blanche. Une valeur trop proche du fond la rendait invisible. */ --rof-surface-soft: #E9F1FB; --rof-bg-sunken: #E1EDF8; --rof-text-dark: #0B1A2E; --rof-text-body: #2B3C55; --rof-text-muted: #586880; /* Texte posé sur les aplats bleu sombre — pied de page, bandeaux d'appel, en-têtes de fenêtre modale. Ces trois valeurs étaient recopiées à la main dans app.css et dans quatre composants, sans jamais être nommées : rien n'indiquait qu'elles formaient une échelle, ni sur quel fond elles avaient été calées. Mesurées sur --rof-blue-deep. */ --rof-text-on-dark: #C3D2EA; /* 9,8:1 — texte courant */ --rof-text-on-dark-soft: #B8C8E4; /* 8,9:1 — liens, libellés */ --rof-text-on-dark-faint: #A8BBDA; /* 7,7:1 — mentions basses */ /* Invites de saisie : 4,5:1 sur blanc. L'ancienne valeur #8494AB tombait a 3:1, et sous le verre depoli du bandeau elle devenait franchement pale. */ --rof-text-faint: #5D6C86; /* Sur fond blanc, la bordure est le seul repere de surface : elle doit se voir. --rof-border : contours de regroupement (cartes, separateurs). --rof-border-strong : contours de COMPOSANT (champs, boutons, pastilles). Ce dernier atteint 3:1 sur blanc, seuil exige par WCAG 1.4.11 pour la limite visible d'un element d'interface — sur une page blanche, il n'y a aucun autre indice pour distinguer un champ de saisie du fond. */ --rof-border: #BED2E9; --rof-border-strong: #748DB0; /* Rayons & Ombres — nettement resserres par rapport a la version pilule */ --rof-radius-xs: 6px; --rof-radius-sm: 8px; --rof-radius-md: 12px; --rof-radius-lg: 16px; /* Relief des cartes. Sur une page blanche, une carte blanche n'existe que par son ombre : celle-ci est donc plus franche qu'elle ne le serait sur un fond teinte, sans quoi la page entiere parait delavee. */ --rof-shadow-sm: 0 1px 2px rgba(16, 37, 79, .10), 0 6px 18px rgba(16, 37, 79, .10); --rof-shadow-md: 0 4px 16px rgba(16, 37, 79, .12); --rof-shadow-lg: 0 14px 38px rgba(16, 37, 79, .20); /* Polices de la charte. Cocon-Bold et DIN OT sont des fontes Monotype sous licence, non diffusables sur le web sans achat. Le site sert donc des substituts libres, auto-heberges (voir fonts/fonts.css) : Quicksand substitut de Cocon-Bold. Geometrique arrondie aux terminaisons douces, c'est le trait de Cocon. Elle remplace Nunito, dont la parente etait plus lointaine. Barlow substitut de DIN OT. Grotesque dessinee dans la filiation DIN et de la signaletique routiere. Elle remplace Fira Sans, pour la meme raison. TROIS ROLES, ET NON DEUX. La fonte des titres portait auparavant aussi tout le mobilier de l'interface — boutons, libelles de champ, pastilles, navigation, en-tetes de tableau. Une arrondie sur un libelle de 15px donne un rendu rond et scolaire, la ou un registre professionnel de sante doit paraitre institutionnel ; et cela inversait l'intention de la charte, qui reserve Cocon aux titres et confie TOUT le reste au DIN. --font-heading : titres seuls (h1-h6, .font-heading). --font-ui : mobilier d'interface. --font-body : texte courant. Pour passer a la charte a la lettre : acquerir les licences web chez Monotype, deposer les .woff2 dans fonts/, et repointer ces trois lignes. Rien d'autre n'est a toucher. */ --font-heading: 'Quicksand', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-body: 'Barlow', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-ui: 'Barlow', 'Segoe UI', system-ui, -apple-system, sans-serif; /* Echelle typographique — le pas de base commande tout le reste. Aux tailles indiquees pour un pas de base de 17px. */ --fs-xs: 0.875rem; /* 14.9px */ --fs-sm: 0.9375rem; /* 16px */ --fs-md: 1rem; /* 17px */ /* Palier intercalaire. Sans lui, h4, h5 et h6 retombaient a la taille exacte du corps de texte : dans les CGV, les mentions legales et les corps d'article en HTML libre, plus rien ne distinguait un sous-titre d'un paragraphe. */ --fs-base-plus: 1.0625rem; /* 18px */ --fs-lg: 1.1875rem; /* 20px */ --fs-xl: 1.375rem; /* 23px */ --fs-2xl: 1.75rem; /* 30px */ } /* Le conteneur de mise en page porte lui-meme le fond : l'attribut d'habillage est pose dessus, et non sur , qui lui est exterieur. Sans cette regle, changer de palette ne changerait pas la couleur du fond. */ .rof-front-layout { background-color: var(--rof-bg-light); } /* ========================================================================== HABILLAGE C « LAGON » — page d'adhesion. Memes composants, memes formes : seuls les neutres changent, derives du teal #1AB6B6 de la charte au lieu du bleu. Les couleurs d'action (bleu, rose) ne bougent pas, pour que les boutons gardent le meme sens partout. ========================================================================== */ [data-rof-pal="lagon"] { --rof-bg-light: #F0F9F9; --rof-band: #E1F5F5; --rof-band-section: #CFEDED; --rof-surface-soft: #E3F4F4; --rof-bg-sunken: #DDF0F0; --rof-border: #B4DCDC; --rof-border-strong: #628F8F; /* 3:1 sur le fond, comme son equivalent bleu */ --rof-text-dark: #0B2224; --rof-text-body: #27403F; --rof-text-muted: #4E6A69; --rof-text-faint: #536E6D; } /* ========================================================================== HABILLAGE A + BANDEAUX LAGON — espace adherent. La base reste la palette A ; seuls les bandeaux passent au lagon, ce qui signale a l'adherent qu'il est dans son espace sans changer ses reperes. ========================================================================== */ [data-rof-bands="lagon"] { --rof-band: #E1F5F5; --rof-band-section: #CFEDED; } /* ========================================================================== PONT BOOTSTRAP → CHARTE R.O.F. Les vues heritees emploient les classes semantiques de Bootstrap (.text-primary, .btn-primary, .bg-success, .text-secondary…). Sans le pont ci-dessous, elles affichent les couleurs d'usine de Bootstrap : le bleu #0D6EFD a cote de notre #20499F, le vert #198754, le gris #6C757D. Deux bleus differents se retrouvaient ainsi sur une meme page. Deux mecanismes distincts, d'ou les deux blocs : — les utilitaires (.text-*, .bg-*, .border-*) lisent des variables globales, il suffit de les redefinir sur :root ; — les boutons (.btn-primary…) compilent leurs valeurs en dur dans la feuille de Bootstrap ; il faut donc reprendre leurs variables locales classe par classe. ========================================================================== */ :root { /* --- Couleurs de base et triplets RVB des utilitaires --- */ --bs-primary: #20499F; --bs-primary-rgb: 32, 73, 159; --bs-secondary: #586880; --bs-secondary-rgb: 88, 104, 128; --bs-success: #0F7B4F; --bs-success-rgb: 15, 123, 79; --bs-danger: #B81F38; --bs-danger-rgb: 184, 31, 56; --bs-warning: #A9500A; --bs-warning-rgb: 169, 80, 10; --bs-info: #0B7A7A; --bs-info-rgb: 11, 122, 122; --bs-dark: #0B1A2E; --bs-dark-rgb: 11, 26, 46; --bs-light: #E9F1FB; --bs-light-rgb: 233, 241, 251; /* --- Texte, liens et filets par defaut --- */ --bs-body-color: var(--rof-text-dark); --bs-body-bg: var(--rof-bg-light); --bs-secondary-color: var(--rof-text-muted); --bs-tertiary-color: var(--rof-text-faint); --bs-emphasis-color: var(--rof-text-dark); --bs-border-color: var(--rof-border); --bs-border-color-translucent: var(--rof-border); --bs-link-color: var(--rof-blue-primary); --bs-link-color-rgb: 32, 73, 159; --bs-link-hover-color: var(--rof-blue-dark); --bs-link-hover-color-rgb: 23, 55, 122; /* --- Teintes claires : fonds d'alerte, bordures adoucies --- */ --bs-primary-text-emphasis: var(--rof-blue-dark); --bs-primary-bg-subtle: var(--rof-blue-50); --bs-primary-border-subtle: #D6E2F7; --bs-success-text-emphasis: var(--rof-ok); --bs-success-bg-subtle: var(--rof-ok-light); --bs-success-border-subtle: #BFE5D2; --bs-danger-text-emphasis: var(--rof-danger); --bs-danger-bg-subtle: var(--rof-danger-light); --bs-danger-border-subtle: #F0C2C9; --bs-warning-text-emphasis: var(--rof-warn); --bs-warning-bg-subtle: var(--rof-warn-light); --bs-warning-border-subtle: #F3D6A8; --bs-info-text-emphasis: var(--rof-teal-text); --bs-info-bg-subtle: var(--rof-teal-light); --bs-info-border-subtle: #B4DCDC; --bs-secondary-bg: var(--rof-surface-soft); --bs-tertiary-bg: var(--rof-surface-soft); } /* Boutons pleins. Bootstrap compile ses couleurs en dur : on reecrit ses variables locales plutot que la regle entiere, ce qui preserve ses etats (focus, actif, desactive) sans les redeclarer un par un. */ .btn-primary { --bs-btn-bg: var(--rof-blue-primary); --bs-btn-border-color: var(--rof-blue-primary); --bs-btn-hover-bg: var(--rof-blue-dark); --bs-btn-hover-border-color: var(--rof-blue-dark); --bs-btn-active-bg: var(--rof-blue-deep); --bs-btn-active-border-color: var(--rof-blue-deep); --bs-btn-disabled-bg: var(--rof-blue-primary); --bs-btn-disabled-border-color: var(--rof-blue-primary); } .btn-secondary { --bs-btn-bg: var(--rof-text-muted); --bs-btn-border-color: var(--rof-text-muted); --bs-btn-hover-bg: #47566B; --bs-btn-hover-border-color: #47566B; --bs-btn-active-bg: #3A4759; --bs-btn-active-border-color: #3A4759; --bs-btn-disabled-bg: var(--rof-text-muted); --bs-btn-disabled-border-color: var(--rof-text-muted); } .btn-success { --bs-btn-bg: var(--rof-ok); --bs-btn-border-color: var(--rof-ok); --bs-btn-hover-bg: #0C6440; --bs-btn-hover-border-color: #0C6440; --bs-btn-active-bg: #0A5435; --bs-btn-active-border-color: #0A5435; --bs-btn-disabled-bg: var(--rof-ok); --bs-btn-disabled-border-color: var(--rof-ok); } .btn-danger { --bs-btn-bg: var(--rof-danger); --bs-btn-border-color: var(--rof-danger); --bs-btn-hover-bg: #9C1A2F; --bs-btn-hover-border-color: #9C1A2F; --bs-btn-active-bg: #841626; --bs-btn-active-border-color: #841626; --bs-btn-disabled-bg: var(--rof-danger); --bs-btn-disabled-border-color: var(--rof-danger); } /* Boutons a contour. Le filet reprend --rof-border-strong, seul contour qui atteigne 3:1 sur blanc (WCAG 1.4.11) : le contour clair de Bootstrap disparaissait sur nos fonds tres pales. */ .btn-outline-primary { --bs-btn-color: var(--rof-blue-primary); --bs-btn-border-color: var(--rof-border-strong); --bs-btn-hover-bg: var(--rof-blue-primary); --bs-btn-hover-border-color: var(--rof-blue-primary); --bs-btn-active-bg: var(--rof-blue-dark); --bs-btn-active-border-color: var(--rof-blue-dark); --bs-btn-disabled-color: var(--rof-text-faint); --bs-btn-disabled-border-color: var(--rof-border); } .btn-outline-secondary { --bs-btn-color: var(--rof-text-body); --bs-btn-border-color: var(--rof-border-strong); --bs-btn-hover-color: var(--rof-blue-primary); --bs-btn-hover-bg: var(--rof-blue-50); --bs-btn-hover-border-color: var(--rof-blue-primary); --bs-btn-active-color: var(--rof-blue-primary); --bs-btn-active-bg: var(--rof-blue-100); --bs-btn-active-border-color: var(--rof-blue-primary); --bs-btn-disabled-color: var(--rof-text-faint); --bs-btn-disabled-border-color: var(--rof-border); } .btn-outline-danger { --bs-btn-color: var(--rof-danger); --bs-btn-border-color: #F0C2C9; --bs-btn-hover-bg: var(--rof-danger); --bs-btn-hover-border-color: var(--rof-danger); --bs-btn-active-bg: #9C1A2F; --bs-btn-active-border-color: #9C1A2F; } /* Cases a cocher et boutons radio : le bleu coche etait le seul reste visible du bleu d'usine dans les formulaires. */ .form-check-input:checked { background-color: var(--rof-blue-primary); border-color: var(--rof-blue-primary); } .form-check-input:focus { border-color: var(--rof-blue-primary); box-shadow: 0 0 0 3px rgba(32, 73, 159, .13); } html { /* Pourcentage et non pixels : 106,25 % de la taille choisie par l'utilisateur dans son navigateur, soit 17px au reglage par defaut. La valeur fixe precedente (17px) annulait purement et simplement ce reglage pour les personnes qui agrandissent le texte du systeme. */ font-size: 106.25%; } body { font-family: var(--font-body); background-color: var(--rof-bg-light); color: var(--rof-text-dark); font-size: var(--fs-md); line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6, .font-heading { font-family: var(--font-heading); font-weight: 800; letter-spacing: -.015em; line-height: 1.22; text-wrap: balance; } /* Bootstrap fixe ses tailles de titre en rem : on les reaccorde a l'echelle. h4 a h6 ne retombent plus sur la taille exacte du corps de texte : ils gardent un pas propre de 18px. Sans lui, sur les pages de texte long (CGV, mentions legales, corps d'article en HTML libre) un sous-titre et un paragraphe avaient rigoureusement la meme taille, et seule la graisse les distinguait. */ h1, .h1 { font-size: var(--fs-2xl); } h2, .h2 { font-size: var(--fs-xl); } h3, .h3 { font-size: var(--fs-lg); } h4, .h4, h5, .h5, h6, .h6 { font-size: var(--fs-base-plus); } .small, small { font-size: var(--fs-sm); } .text-muted { color: var(--rof-text-muted) !important; } a { color: var(--rof-blue-primary); text-decoration: none; transition: color .18s ease; } a:hover { color: var(--rof-blue-dark); } .hover-teal:hover { color: var(--rof-teal-text) !important; } .cursor-pointer, .rof-card-hover { cursor: pointer; } /* Chiffres alignes en colonne (tarifs, telephones, codes postaux, compteurs) */ .mono, .rof-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } .extra-small { font-size: var(--fs-xs); } /* Surface secondaire : bleutee, jamais grise. */ .bg-light, .bg-body-tertiary { background-color: var(--rof-surface-soft) !important; } /* Bandeau pleine largeur : le procede qui remplace le fond teinte pour separer deux sections d'une meme page. */ .rof-band { background-color: var(--rof-band-section); border-block: 1px solid var(--rof-border); } /* Une carte posee sur un bandeau se detache surtout par son ombre : l'ecart de luminosite entre un blanc et un bleu pale reste faible, c'est le relief qui fait le travail. */ .rof-band .rof-card, .rof-band .card { box-shadow: var(--rof-shadow-md); border-color: #fff; } /* Titre de section pose sur le blanc. Le filet vertical aux couleurs de la charte donne un point d'accroche a l'oeil la ou aucun fond ne le fait. */ .rof-section-title { display: flex; align-items: center; gap: 11px; } .rof-section-title::before { content: ""; flex: none; width: 4px; align-self: stretch; min-height: 1.1em; border-radius: 2px; background: var(--rof-blue-primary); } .rof-section-title.teal::before { background: var(--rof-teal-primary); } .rof-section-title.rose::before { background: var(--rof-rose-primary); } /* La page etant blanche, une carte blanche n'existe QUE par sa bordure : elle n'est donc pas optionnelle. Les vues heritees utilisent .card + .border-0, qui la supprimait — d'ou la reecriture ci-dessous. */ .card { border-radius: var(--rof-radius-md); border: 1px solid var(--rof-border); box-shadow: var(--rof-shadow-sm); } .card.border-0 { border: 1px solid var(--rof-border) !important; } .shadow-sm { box-shadow: var(--rof-shadow-sm) !important; } .shadow, .shadow-lg { box-shadow: var(--rof-shadow-md) !important; } /* Largeurs de conteneur. Les vues employaient aussi .max-w-5xl, .max-w-lg, .max-w-600 et .max-w-700, qui n'etaient definis nulle part — ni ici, ni dans Bootstrap : ces conteneurs n'avaient donc aucune limite de largeur. Seules les deux valeurs reellement utilisees sont conservees. */ .max-w-7xl { max-width: 1200px; } .max-w-5xl { max-width: 960px; } /* Conteneur du bandeau du site. Le menu en ligne (marque, cinq liens, deux boutons) demande jusqu'à 1300 px, davantage que les 1200 px du conteneur commun : il en sortait par la droite, sur tout écran. Seul le bandeau est élargi — le contenu des pages garde sa colonne. */ .max-w-entete { max-width: 1400px; } /* Conteneur elargi, pour l'annuaire et lui seul. Son tableau aligne neuf colonnes qui totalisent plus de 1200 px : dans le conteneur commun du site, il debordait sur tous les ecrans — l'en-tete « Code postal » sortait tronque en « CODE PO… » et les boutons de la derniere colonne etaient coupes net. Elargir .max-w-7xl aurait elargi les vingt-deux pages qui s'en servent. Cette classe existe donc pour la seule vue qui en a besoin. */ .max-w-annuaire { max-width: 1520px; } /* Indispensable pour tronquer un enfant de flexbox : sans min-width: 0, un element flex refuse de descendre sous la largeur de son contenu, et les titres longs debordent de leur carte au lieu d'etre coupes. Cette classe etait utilisee dans les vues sans avoir jamais ete definie. */ .min-w-0 { min-width: 0; } /* Focus clavier visible sur tout element interactif. tabindex="-1" est exclu : Blazor le pose sur le

pour y deplacer le focus apres un changement de route (au benefice des lecteurs d'ecran). Ce focus est programmatique, pas un deplacement au clavier — l'entourer d'un cadre bleu donnerait l'impression d'un defaut d'affichage sur chaque page. */ a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible { outline: 2px solid var(--rof-blue-primary); outline-offset: 2px; border-radius: var(--rof-radius-xs); } /* Cible de focus programmatique : aucun cadre, sinon chaque changement de page entoure son titre d'un rectangle que l'utilisateur lit comme un defaut. */ [tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; } /* Lien d'evitement pour la navigation au clavier */ .rof-skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; background: var(--rof-blue-primary); color: #fff; font-family: var(--font-ui); font-weight: 600; padding: 10px 18px; border-radius: 0 0 var(--rof-radius-sm) 0; } .rof-skip-link:focus { left: 0; color: #fff; } /* ========================================================================== EN-TETE PRINCIPAL ========================================================================== */ /* Bandeau superieur au bleu de la charte (#20499F, couleur du logotype). Le logotype a un fond TRANSPARENT et ses petales exterieurs sont des roses et des bleus pales : poses directement sur le bleu, ils s'y noient. Il est donc place dans un cartouche blanc, ce qui satisfait aussi la regle du cahier des charges — « il est preferable de placer le logotype sur un fond blanc ». */ .rof-main-header { background: var(--rof-blue-primary); border-bottom: 1px solid rgba(255, 255, 255, .16); } /* La marque est posee a meme le bleu, sans cartouche. */ .rof-brand-txt { font-family: var(--font-heading); font-weight: 800; font-size: var(--fs-md); color: #fff; line-height: 1.15; } .rof-brand-txt span { display: block; font-family: var(--font-body); font-weight: 400; font-size: var(--fs-xs); color: rgba(255, 255, 255, .78); } /* Navigation posee sur le bleu */ .rof-main-header .nav-link-top { color: rgba(255, 255, 255, .88); } .rof-main-header .nav-link-top:hover { color: #fff; background-color: rgba(255, 255, 255, .14); } .rof-main-header .nav-link-top.active { color: #fff; background-color: rgba(255, 255, 255, .2); } /* Commandes posees sur le bleu : contour clair, ou aplat blanc pour l'action principale — c'est le meilleur rapport de contraste disponible sur ce fond. */ .rof-main-header .btn-rof-outline-blue, .rof-main-header .btn-rof-icon { background-color: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .45); } .rof-main-header .btn-rof-outline-blue:hover, .rof-main-header .btn-rof-icon:hover { background-color: rgba(255, 255, 255, .22); color: #fff; border-color: rgba(255, 255, 255, .7); } .rof-main-header .btn-rof-pink, .rof-main-header .btn-rof-primary { background-color: #fff; color: var(--rof-blue-primary); border-color: #fff; } .rof-main-header .btn-rof-pink:hover, .rof-main-header .btn-rof-primary:hover { background-color: var(--rof-blue-50); color: var(--rof-blue-dark); border-color: var(--rof-blue-50); } .rof-main-header .rof-user-chip { background-color: rgba(255, 255, 255, .16); color: #fff; } .rof-main-header a:focus-visible, .rof-main-header button:focus-visible { outline-color: #fff; } .rof-header-row { display: flex; align-items: center; gap: 20px; height: 66px; } .rof-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; } .rof-brand img { height: 52px; width: auto; display: block; } .nav-link-top { color: var(--rof-text-body); font-size: var(--fs-sm); font-weight: 600; font-family: var(--font-ui); padding: 8px 14px; border-radius: var(--rof-radius-sm); transition: background-color .18s ease, color .18s ease; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .nav-link-top:hover { color: var(--rof-blue-primary); background-color: var(--rof-band); } .nav-link-top.active { color: var(--rof-blue-primary); background-color: var(--rof-blue-50); } /* Barre de navigation mobile — elle aussi sur le bleu du bandeau */ .rof-mobile-nav { display: flex; border-top: 1px solid rgba(255, 255, 255, .18); overflow-x: auto; } .rof-mobile-nav a { flex: 1 0 auto; text-align: center; padding: 10px 12px; font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-sm); color: rgba(255, 255, 255, .88); border-bottom: 2px solid transparent; white-space: nowrap; } .rof-mobile-nav a.active { color: #fff; border-bottom-color: #fff; } /* Où s'affichent les liens : en ligne dans le bandeau à partir de 1350 px, sur la barre du dessous en deçà. Le seuil n'est pas celui de Bootstrap (lg, 992 px) : cinq liens, la marque et les deux boutons de droite demandent près de 1300 px, et le bandeau débordait de la fenêtre — barre de défilement horizontale sur toute la page — entre 992 px et ce seuil. 1350 px garde le menu en ligne sur les portables en 1366 px, très répandus, avec 38 px de marge au seuil (les mesures comptent une barre de défilement verticale de 15 px). */ .rof-nav-bureau { display: none; } /* Liens et espacement resserrés sur toute la plage : à 1350 px la place est juste (environ 1250 px de contenu pour 1290 disponibles), et au-delà le conteneur du bandeau plafonne à 1400 px — il n'y a donc jamais plus de place qu'à 1440 px. Laisser les mesures d'origine à partir de 1600 px aurait tronqué le nom d'un adhérent là où 1440 px l'affiche en entier. */ @media (min-width: 1350px) { .rof-nav-bureau { display: flex; } .rof-nav-barre { display: none; } .rof-main-header .nav-link-top { padding: 8px 10px; } .rof-main-header .rof-header-row { gap: 14px; } } /* Le bloc de droite n'a pas la même largeur selon que l'on est connecté : 280 px pour « Espace adhérent » et « Adhérer », 334 px pour la pastille du nom et « Mon espace », jusqu'à 427 px avec un nom très long (la pastille plafonne à 15 rem). Mesuré à 1 366 px : 334 px tenaient tout juste, 427 px débordaient de 76 px. La pastille — seul élément qui se tronque (points de suspension, nom complet en infobulle) — absorbe donc le manque de place au lieu de pousser le bandeau hors de la fenêtre. Les boutons gardent leur taille. */ .rof-header-actions { min-width: 0; } .rof-main-header .rof-user-chip { min-width: 0; } /* ========================================================================== BOUTONS ========================================================================== */ .btn { --bs-btn-border-radius: var(--rof-radius-sm); font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-sm); border-radius: var(--rof-radius-sm); transition: background-color .18s ease, color .18s ease, border-color .18s ease; /* Un libelle de bouton ne se coupe jamais : « Mon espace » passait sur deux lignes des que la place manquait, et deformait la hauteur de la barre. */ white-space: nowrap; } .btn-sm { font-size: var(--fs-xs); } .btn-lg { font-size: var(--fs-lg); } /* DEUX VOCABULAIRES, UN SEUL RENDU — lequel écrire ? Le site emploie les deux familles : celle de Bootstrap (.btn-primary, .btn-secondary, .btn-danger…, environ 170 usages) et celle du R.O.F. (.btn-rof-primary, .btn-rof-outline-blue…, environ 115). Ce n'est pas un défaut d'apparence : le pont posé plus haut est assez complet pour que .btn-primary et .btn-rof-primary rendent le MÊME bouton — même fond, même bordure, même rayon, même police, même hauteur, vérification faite au pixel. La règle, pour ne plus hésiter : — une intention SÉMANTIQUE (valider, supprimer, avertir) → la classe Bootstrap, que le pont habille déjà aux couleurs de la charte ; — une intention de MARQUE, sans équivalent sémantique (bouton rose d'appel à l'adhésion, bouton fantôme, bouton d'icône) → la classe .btn-rof-*, qui n'existe que pour ces cas-là. En clair : n'écrire .btn-rof-primary que si .btn-primary ne dit pas la chose. Les deux resteront interchangeables tant que le pont est tenu à jour. */ .btn-rof-primary { background-color: var(--rof-blue-primary); color: #fff; border: 1px solid var(--rof-blue-primary); } .btn-rof-primary:hover, .btn-rof-primary:focus { background-color: var(--rof-blue-dark); border-color: var(--rof-blue-dark); color: #fff; } .btn-rof-pink { background-color: var(--rof-rose-text); color: #fff; border: 1px solid var(--rof-rose-text); } .btn-rof-pink:hover, .btn-rof-pink:focus { background-color: var(--rof-rose-dark); border-color: var(--rof-rose-dark); color: #fff; } .btn-rof-teal { background-color: var(--rof-teal-text); color: #fff; border: 1px solid var(--rof-teal-text); } .btn-rof-teal:hover, .btn-rof-teal:focus { background-color: #085C5C; border-color: #085C5C; color: #fff; } .btn-rof-outline-blue { background-color: #fff; color: var(--rof-blue-primary); border: 1px solid var(--rof-border-strong); } .btn-rof-outline-blue:hover, .btn-rof-outline-blue:focus { background-color: var(--rof-blue-50); border-color: var(--rof-blue-primary); color: var(--rof-blue-primary); } .btn-rof-outline-pink { background-color: #fff; color: var(--rof-rose-text); border: 1px solid #F2C9D1; } .btn-rof-outline-pink:hover, .btn-rof-outline-pink:focus { background-color: var(--rof-rose-light); border-color: var(--rof-rose-text); color: var(--rof-rose-text); } .btn-rof-ghost { background-color: transparent; color: var(--rof-text-body); border: 1px solid transparent; } .btn-rof-ghost:hover, .btn-rof-ghost:focus { background-color: var(--rof-band); color: var(--rof-blue-primary); } /* Commande posee sur un aplat sombre de la charte (bandeau cookies). Accepter et refuser doivent se presenter de facon strictement identique : une seule regle sert donc aux deux, et la variante « ghost » est reservee a l'action tierce (« Personnaliser »), qui n'est pas un choix de consentement. */ .rof-btn-on-dark { height: 42px; display: inline-flex; align-items: center; justify-content: center; background-color: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .55); } .rof-btn-on-dark:hover, .rof-btn-on-dark:focus { background-color: rgba(255, 255, 255, .24); border-color: #fff; color: #fff; } .rof-btn-on-dark.ghost { background-color: transparent; border-color: transparent; text-decoration: underline; } .rof-btn-on-dark.ghost:hover, .rof-btn-on-dark.ghost:focus { background-color: rgba(255, 255, 255, .14); border-color: transparent; } .rof-cookie-banner a:focus-visible, .rof-cookie-banner button:focus-visible { outline-color: #fff; } /* Bouton icone carre — respecte la cible tactile de 44px */ .btn-rof-icon { width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--rof-radius-sm); border: 1px solid var(--rof-border-strong); background: #fff; color: var(--rof-text-body); } .btn-rof-icon:hover, .btn-rof-icon:focus { border-color: var(--rof-blue-primary); color: var(--rof-blue-primary); } .btn-rof-icon.sm { width: 36px; height: 36px; } /* ========================================================================== CARTES & CONTENEURS ========================================================================== */ .rof-card { background: #fff; border-radius: var(--rof-radius-md); border: 1px solid var(--rof-border); box-shadow: var(--rof-shadow-sm); transition: border-color .18s ease, box-shadow .18s ease; overflow: hidden; } .rof-card-hover:hover { box-shadow: var(--rof-shadow-md); border-color: var(--rof-border-strong); } .rof-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 20px; border-bottom: 1px solid var(--rof-border); /* Palette A : l'en-tete de carte reste blanc, seul le filet le separe du corps. Aucun aplat teinte a l'interieur des cartes. */ background: transparent; } .rof-card-head h2, .rof-card-head h3, .rof-card-head h5 { font-size: var(--fs-lg); margin: 0; display: flex; align-items: center; gap: 9px; } .rof-card-head i { color: var(--rof-blue-primary); } .rof-card-body { padding: 20px; } /* Encadre d'information / avertissement */ .rof-callout { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: var(--rof-radius-md); border: 1px solid var(--rof-border); background: #fff; font-size: var(--fs-sm); } .rof-callout-info { background: var(--rof-blue-50); border-color: #D6E2F7; } .rof-callout-info > i:first-child { color: var(--rof-blue-primary); } .rof-callout-warn { background: var(--rof-warn-light); border-color: #F3D6A8; } .rof-callout-warn > i:first-child { color: var(--rof-warn); } .rof-callout-ok { background: var(--rof-ok-light); border-color: #BFE5D2; } .rof-callout-ok > i:first-child { color: var(--rof-ok); } /* Erreur franche — echec de connexion, echec d'envoi, action impossible. L'orange de --rof-callout-warn servait jusqu'ici pour les deux cas : un refus de connexion s'affichait donc dans la couleur reservee aux avertissements. */ .rof-callout-danger { background: var(--rof-danger-light); border-color: #F0C2C9; } .rof-callout-danger > i:first-child { color: var(--rof-danger); } /* Card item list anti-overflow fix */ .rof-item-card { overflow: hidden; min-width: 0; word-break: break-word; overflow-wrap: break-word; } .rof-item-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; overflow-wrap: break-word; line-height: 1.35; } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; overflow-wrap: break-word; } .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; overflow-wrap: break-word; } /* Vignette carree (illustration d'article, d'annonce, de cabinet) */ .rof-thumb { width: 64px; height: 64px; border-radius: var(--rof-radius-sm); display: flex; align-items: center; justify-content: center; flex: none; background: var(--rof-blue-100); color: var(--rof-blue-primary); } .rof-thumb-teal { background: var(--rof-teal-light); color: var(--rof-teal-text); } .rof-thumb-rose { background: var(--rof-rose-light); color: var(--rof-rose-text); } /* ========================================================================== TEXTE LONG « AU KILOMETRE » Corps d'article, corps d'annonce, blocs de minisite, CGV, mentions legales : du HTML saisi dans un editeur riche, sur lequel aucune classe ne peut etre posee. Sans cadre, ce HTML arrive sans marges, avec des titres a la taille du texte courant et des lignes qui traversent tout l'ecran. .rof-prose donne a ce contenu la meme respiration que le reste du site. La largeur de ligne est bornee a 68 caracteres : au-dela, l'oeil perd la ligne suivante en revenant a la marge. ========================================================================== */ .rof-prose { font-size: var(--fs-md); line-height: 1.72; color: var(--rof-text-body); max-width: 68ch; overflow-wrap: break-word; } /* En pleine largeur de carte (encadres, colonnes etroites), la borne de mesure n'a plus lieu d'etre : c'est la colonne qui la fixe. */ .rof-prose.rof-prose-full { max-width: none; } .rof-prose > :first-child { margin-top: 0; } .rof-prose > :last-child { margin-bottom: 0; } .rof-prose p, .rof-prose ul, .rof-prose ol, .rof-prose blockquote, .rof-prose table { margin-bottom: 1.15em; } /* JUSTIFICATION DU TEXTE COURANT (demande du 09/09/2026). Elle porte sur les paragraphes de « rof-prose », c'est-a-dire le contenu redactionnel des pages publiques et des minisites — et sur eux seuls : la classe n'est employee nulle part dans le back-office, ou la justification generait le balayage vertical d'une colonne de valeurs sans rien apporter. « hyphens: auto » n'est pas un ornement. Sans cesure, justifier une colonne de 68 caracteres etire les espaces jusqu'a ouvrir des rivieres de blanc verticales dans le texte, et la lecture y bute. La cesure repartit l'etirement sur les mots. Elle exige que le navigateur connaisse la langue : c'est l'attribut « lang="fr" » pose sur dans App.razor qui la lui donne. Sans cet attribut, la propriete ne fait rien du tout. La regle s'applique a toutes les largeurs, mobile compris, comme demande. Si le rendu en colonne etroite deplait, la parade tient en trois lignes : @media (max-width: 767.98px) { .rof-prose p { text-align: left; } } */ .rof-prose p { text-align: justify; -webkit-hyphens: auto; hyphens: auto; } .rof-prose h2, .rof-prose h3, .rof-prose h4, .rof-prose h5, .rof-prose h6 { color: var(--rof-text-dark); margin-top: 1.9em; margin-bottom: .55em; } .rof-prose h2 { font-size: var(--fs-xl); } .rof-prose h3 { font-size: var(--fs-lg); } .rof-prose a { text-decoration: underline; text-underline-offset: .18em; } .rof-prose ul, .rof-prose ol { padding-left: 1.35em; } .rof-prose li { margin-bottom: .35em; } .rof-prose img { max-width: 100%; height: auto; border-radius: var(--rof-radius-sm); } .rof-prose blockquote { margin-left: 0; padding: 2px 0 2px 18px; border-left: 3px solid var(--rof-teal-primary); color: var(--rof-text-muted); font-style: italic; } /* Un tableau colle dans un editeur riche depasse tres vite la colonne : il defile dans son propre cadre plutot que d'elargir la page. */ .rof-prose .table-responsive, .rof-prose table { display: block; overflow-x: auto; max-width: 100%; } .rof-prose td, .rof-prose th { padding: 8px 12px; border: 1px solid var(--rof-border); } /* Encadre de fin d'article (post-scriptum, mention d'origine). */ .rof-postscript { padding: 15px 18px; border-left: 3px solid var(--rof-teal-primary); background: var(--rof-band); border-radius: 0 var(--rof-radius-sm) var(--rof-radius-sm) 0; color: var(--rof-text-muted); font-size: var(--fs-sm); font-style: italic; } /* Fil d'Ariane — oriente le visiteur arrive directement par un moteur de recherche ou un partage, qui n'a pas vu la page de liste. */ .rof-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 0; margin: 0 0 18px; list-style: none; font-size: var(--fs-sm); color: var(--rof-text-muted); } .rof-breadcrumb li { display: inline-flex; align-items: center; gap: 7px; } .rof-breadcrumb li + li::before { content: ""; width: 5px; height: 5px; border-top: 1.5px solid var(--rof-border-strong); border-right: 1.5px solid var(--rof-border-strong); transform: rotate(45deg); flex: none; } .rof-breadcrumb [aria-current="page"] { color: var(--rof-text-body); font-weight: 500; } /* ========================================================================== BARRE DE RECHERCHE ========================================================================== */ .rof-searchbar { display: flex; align-items: center; background: #fff; border: 1px solid var(--rof-border-strong); border-radius: var(--rof-radius-md); box-shadow: var(--rof-shadow-md); overflow: hidden; } .rof-searchbar .rof-search-field { display: flex; align-items: center; gap: 10px; padding: 0 14px; flex: 1; min-width: 0; height: 56px; } /* Une seule croix d'effacement. Un dessine sa propre croix, a l'interieur du champ, au bord droit. La barre de recherche d'accueil en pose une seconde juste apres le champ : deux croix cote a cote, pour la meme action. C'est la native qui s'efface, et non la notre : elle n'est pas atteignable au clavier, ne porte pas d'intitule pour les lecteurs d'ecran, et ne fait que vider le champ — la notre referme au passage la liste de suggestions et remet a zero l'option parcourue aux fleches. La regle ne vise que les champs qui offrent deja leur propre bouton : ailleurs — annuaire, ecrans du back-office — la croix native est la seule qu'il y ait, et elle reste. Un navigateur sans :has() ignore la regle et retrouve les deux croix : c'est disgracieux, jamais bloquant. */ .rof-search-field:has(> button) input[type="search"]::-webkit-search-cancel-button { display: none; } .rof-searchbar .rof-search-field > i { color: var(--rof-text-muted); flex: none; } /* Le champ ne porte ni bordure ni contour propres : c'est l'enveloppe qui dessine le composant, et c'est donc elle qui doit marquer le focus. Sans la règle :focus-within ci-dessous, l'annulation du contour laissait le champ de recherche — celui de l'accueil comme celui de l'annuaire — sans le moindre repère au clavier : la règle générale « input:focus-visible » est de spécificité égale et déclarée plus haut, elle perd donc contre celle-ci. */ .rof-searchbar input { border: 0; outline: 0; font-family: var(--font-body); font-size: var(--fs-md); width: 100%; min-width: 0; color: var(--rof-text-dark); background: none; } .rof-searchbar:focus-within { outline: 2px solid var(--rof-blue-primary); outline-offset: 2px; } .rof-searchbar input::placeholder { color: var(--rof-text-faint); } .rof-searchbar .rof-search-go { margin: 6px; height: 44px; flex: none; } .rof-searchbar.sm .rof-search-field { height: 46px; } .rof-searchbar.sm .rof-search-go { height: 36px; margin: 5px; } /* Pastille de filtre */ .rof-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; font-family: var(--font-ui); padding: 8px 14px; border-radius: 999px; border: 1px solid var(--rof-border-strong); background: #fff; color: var(--rof-text-body); cursor: pointer; transition: border-color .18s ease, color .18s ease, background-color .18s ease; } .rof-chip:hover { border-color: var(--rof-blue-primary); color: var(--rof-blue-primary); } .rof-chip.active { background: var(--rof-blue-primary); border-color: var(--rof-blue-primary); color: #fff; } /* --- Pastille de filtre a bascule --- Remplace le montage precedent (une case a cocher Bootstrap posee a cote d'un badge colore, dans une pilule bordee) : la case flottait hors du texte, le badge debordait de la pilule et l'ensemble se decalait au retour a la ligne. Ici la pastille EST le label : un seul bloc, une seule cible de clic. */ .rof-filter-group { border: 0; padding: 0; margin: 0; min-width: 0; } .rof-filter-group legend { float: none; width: auto; padding: 0; margin-bottom: 8px; font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-sm); color: var(--rof-text-muted); } .rof-filter-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 15px; border: 1px solid var(--rof-border-strong); border-radius: 999px; background: #fff; color: var(--rof-text-body); font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-sm); line-height: 1; cursor: pointer; user-select: none; margin: 0; transition: background-color .18s ease, border-color .18s ease, color .18s ease; } /* La case reste dans le flux pour les lecteurs d'ecran et le clavier, mais c'est la pastille qui porte l'apparence. */ .rof-filter-chip input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; } .rof-filter-chip i { font-size: .95em; color: var(--rof-text-faint); transition: color .18s ease; } .rof-filter-chip:hover { border-color: var(--rof-blue-primary); color: var(--rof-blue-primary); } .rof-filter-chip:hover i { color: var(--rof-blue-primary); } .rof-filter-chip.active { background: var(--rof-blue-primary); border-color: var(--rof-blue-primary); color: #fff; } .rof-filter-chip.active i, .rof-filter-chip.active:hover i { color: #fff; } .rof-filter-chip.active:hover { background: var(--rof-blue-dark); border-color: var(--rof-blue-dark); color: #fff; } .rof-filter-chip:focus-within { outline: 2px solid var(--rof-blue-primary); outline-offset: 2px; } /* Suggestions instantanees sous la barre de recherche */ .rof-suggest-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: var(--rof-radius-sm); cursor: pointer; transition: background-color .15s ease; text-align: left; width: 100%; border: 0; background: none; } .rof-suggest-item:hover, .rof-suggest-item:focus-visible { background-color: var(--rof-blue-50); } /* --- Panneau de suggestions de la barre de recherche d'accueil ----------- Il se pose PAR-DESSUS la section suivante : c'est une reponse a la frappe, elle doit pouvoir descendre au-dela du bandeau plutot que d'y etre coupee. Sa hauteur est bornee et la liste defile en son sein. Sans borne, une recherche large ferait un panneau plus haut que l'ecran, et le bouton « Voir tous les resultats » se retrouverait hors de vue ; ce bouton reste d'ailleurs en dehors de la zone de defilement, toujours visible sous la liste. La borne suit la hauteur de l'ecran, avec un plafond : sur un grand ecran, un panneau de 800 px recouvrirait la page entiere sans rien apporter. */ .rof-suggest-panneau { position: absolute; top: 100%; left: 0; width: 100%; margin-top: 8px; z-index: 30; box-shadow: var(--rof-shadow-lg); } .rof-suggest-liste { /* Repere du defilement au clavier : voir js/rof-suggestions.js, qui lit offsetTop des options et attend que ce soit celui de ce conteneur. */ position: relative; max-height: min(52vh, 420px); overflow-y: auto; /* Arrive en bout de liste, la molette ne doit pas se mettre a faire defiler la page derriere le panneau. */ overscroll-behavior: contain; } /* Suggestion parcourue aux fleches. Le focus reste dans le champ de saisie (c'est le principe du motif combobox) : il faut donc un repere visuel propre, qui ne peut pas etre :focus. Le filet a gauche double la couleur de fond — la couleur seule ne suffirait pas a designer l'element (WCAG 1.4.1). */ .rof-suggest-item.active { background-color: var(--rof-blue-50); box-shadow: inset 3px 0 0 var(--rof-blue-primary); } /* ========================================================================== BADGES ========================================================================== */ .badge-rof-blue, .badge-rof-teal, .badge-rof-pink, .badge-rof-prune, .badge-rof-grey, .badge-rof-ok, .badge-rof-warn { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-xs); padding: 5px 11px; border-radius: 999px; } /* Pastille « utilisateur connecté » de l'en-tête. Un nom d'adhérent peut être long : il ne doit ni passer à la ligne ni déformer la barre. D'où une hauteur fixe, un non-retour à la ligne et une coupure par points de suspension. */ .rof-user-chip { align-items: center; gap: 7px; height: 40px; max-width: 15rem; padding-inline: 14px; border-radius: 999px; background-color: var(--rof-blue-100); color: var(--rof-blue-dark); font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-xs); white-space: nowrap; line-height: 1; } .rof-user-chip > i { flex: 0 0 auto; font-size: 1.05rem; } .rof-user-chip > span { overflow: hidden; text-overflow: ellipsis; } .badge-rof-blue { background-color: var(--rof-blue-100); color: var(--rof-blue-dark); } .badge-rof-teal { background-color: var(--rof-teal-light); color: var(--rof-teal-text); } .badge-rof-pink { background-color: var(--rof-rose-light); color: var(--rof-rose-text); } .badge-rof-prune { background-color: #F4E8F0; color: var(--rof-prune-primary); } .badge-rof-grey { background-color: var(--rof-band); color: var(--rof-text-muted); } .badge-rof-ok { background-color: var(--rof-ok-light); color: var(--rof-ok); } .badge-rof-warn { background-color: var(--rof-warn-light); color: var(--rof-warn); } /* ========================================================================== FORMULAIRES ========================================================================== */ .form-label { font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-sm); color: var(--rof-text-body); margin-bottom: 6px; } .form-label .req { color: var(--rof-rose-text); } .form-control, .form-select { min-height: 44px; border: 1px solid var(--rof-border-strong); border-radius: var(--rof-radius-sm); font-family: var(--font-body); font-size: var(--fs-md); color: var(--rof-text-dark); } .form-control:focus, .form-select:focus { border-color: var(--rof-blue-primary); box-shadow: 0 0 0 3px rgba(32, 73, 159, .13); } .form-control::placeholder { color: var(--rof-text-faint); } /* --- Groupes de champs Bootstrap (.input-group) --- Mes regles sur .form-control (hauteur mini, rayon, couleur de bordure) desaccordaient l'assemblage sur trois points : 1. l'addon gardait la bordure claire de Bootstrap pendant que le champ prenait la bordure sombre du site — d'ou deux traits de teintes differentes bout a bout ; 2. les hauteurs ne coincidaient plus, l'addon n'ayant pas de hauteur mini ; 3. mon rayon s'appliquait aux quatre coins du champ, alors que Bootstrap n'arrondit que les bords exterieurs du groupe — d'ou une couture arrondie au milieu. Les trois sont realignes ici, ce qui repare aussi les groupes des pages de mot de passe et de la boutique. */ .input-group > .input-group-text { min-height: 44px; border-color: var(--rof-border-strong); color: var(--rof-text-muted); } .input-group > :not(:last-child):not(.dropdown-menu):not(.valid-tooltip):not(.invalid-tooltip) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.invalid-tooltip) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .rof-field-hint { font-size: var(--fs-sm); color: var(--rof-text-muted); margin-top: 6px; display: flex; gap: 6px; align-items: flex-start; } .rof-field-error { font-size: var(--fs-sm); color: var(--rof-danger); font-weight: 500; margin-top: 5px; display: flex; gap: 6px; align-items: center; } /* ========================================================================== GRILLE SYNCFUSION — habillage sobre de l'annuaire et des listes ========================================================================== */ .rof-grid .e-grid { border: 0; font-family: var(--font-body); font-size: var(--fs-sm); } .rof-grid .e-grid .e-headercell, .rof-grid .e-grid .e-detailheadercell { background-color: var(--rof-band); border-bottom: 1px solid var(--rof-border-strong); padding: 11px 14px; } .rof-grid .e-grid .e-headercelldiv { font-family: var(--font-ui); font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--rof-text-muted); } .rof-grid .e-grid .e-rowcell { padding: 12px 14px; border-bottom: 1px solid var(--rof-border); color: var(--rof-text-body); line-height: 1.45; } /* Une ligne sur deux teintée, comme dans le back-office. L'annuaire alignait jusqu'ici neuf colonnes de lignes uniformément blanches : sur une largeur pareille, l'œil perd sa ligne entre le nom et la dernière colonne. Le back-office avait déjà tranché la question pour ses propres grilles, mais sa règle est portée par « .admin-main » et ne descendait donc pas jusqu'ici. Mêmes jetons, même rendu. */ .rof-grid .e-grid .e-altrow, .rof-grid .e-grid .e-altrow .e-rowcell { background-color: var(--rof-blue-50); } /* Le survol passe au bandeau, un cran au-dessus du gris des lignes paires : avec la même teinte pour les deux, survoler une ligne paire ne se voyait pas. */ .rof-grid .e-grid .e-row:hover .e-rowcell, .rof-grid .e-grid .e-altrow:hover .e-rowcell { background-color: var(--rof-band); cursor: pointer; } .rof-grid .e-grid .e-row.e-rowselect .e-rowcell, .rof-grid .e-grid td.e-selectionbackground { background-color: var(--rof-teal-light) !important; color: var(--rof-text-dark); } .rof-grid .e-grid .e-row.e-rowselect .e-rowcell:first-child { box-shadow: inset 3px 0 0 var(--rof-teal-text); } .rof-grid .e-grid .e-gridpager { border-top: 1px solid var(--rof-border); border-bottom: 0; padding: 10px 14px; font-family: var(--font-body); } .rof-grid .e-grid .e-pagercontainer .e-numericitem.e-currentitem { background-color: var(--rof-blue-primary); color: #fff; border-radius: var(--rof-radius-xs); } /* Cellule d'action dans une grille. La grille n'est plus servie que sur grand ecran — sous 992px, l'annuaire passe en cartes avec des boutons de 44px. 36px suffit donc ici : bien au-dela des 24px exiges par WCAG 2.5.8, sans faire enfler des lignes que l'on parcourt a la souris. */ .rof-grid-action { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 4px 10px; border-radius: var(--rof-radius-xs); font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-xs); } /* ========================================================================== CARTE LEAFLET ========================================================================== */ .rof-map-shell { border-radius: var(--rof-radius-md); overflow: hidden; border: 1px solid var(--rof-border); background: #EDF2F7; } .leaflet-popup-content-wrapper { border-radius: var(--rof-radius-md); box-shadow: var(--rof-shadow-lg); } .leaflet-popup-content { margin: 14px 16px; font-family: var(--font-body); font-size: var(--fs-sm); line-height: 1.5; } .rof-popup-name { font-family: var(--font-heading); font-weight: 800; font-size: var(--fs-lg); color: var(--rof-blue-deep); } /* ========================================================================== ESPACE ADHÉRENT — RAIL LATÉRAL ET RACCOURCIS La page tenait dans une colonne de 880 px : sur un écran d'ordinateur, elle se lisait comme sur un téléphone, en trois écrans de défilement. Le contenu se répartit désormais entre une colonne de travail et ce rail, qui reste sous les yeux pendant qu'on fait défiler. Sous 992 px, rien de tout cela ne s'applique : le rail redevient une suite de cartes, dans l'ordre du document. L'affichage mobile ne change pas. ========================================================================== */ @media (min-width: 992px) { .rof-rail { position: sticky; /* Le bandeau supérieur est en position fixe : sans cette marge, la première carte du rail se glisserait dessous. */ top: 88px; } } /* Un raccourci est une ligne cliquable, pas un bouton : il mène ailleurs. */ .rof-raccourci { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--rof-border); border-radius: var(--rof-radius-sm); background: var(--rof-card-bg); color: var(--rof-text-body); text-decoration: none; transition: border-color .15s ease, background-color .15s ease; } .rof-raccourci:hover { border-color: var(--rof-blue-primary); background: var(--rof-blue-50); color: var(--rof-text-dark); } .rof-raccourci:focus-visible { outline: 2px solid var(--rof-blue-primary); outline-offset: 2px; } .rof-raccourci-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--rof-radius-xs); background: var(--rof-blue-50); color: var(--rof-blue-primary); font-size: var(--fs-md); } .rof-raccourci-txt { flex: 1; min-width: 0; } .rof-raccourci-txt strong { display: block; font-family: var(--font-ui); font-size: var(--fs-sm); color: var(--rof-text-dark); } .rof-raccourci-txt span { display: block; font-size: var(--fs-xs); line-height: 1.35; color: var(--rof-text-muted); } .rof-raccourci-fleche { flex: none; color: var(--rof-text-faint); } .rof-raccourci:hover .rof-raccourci-fleche { color: var(--rof-blue-primary); } /* Pastille de nouveauté, reprise de celle du back-office. Elle ne compte que ce qui est paru depuis la dernière visite et s'éteint une fois la page ouverte : un compteur qui reste allumé en permanence cesse d'être regardé. Le nombre est toujours doublé d'un libellé lisible par les lecteurs d'écran. */ .rof-pastille { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--rof-danger); color: #fff; font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 700; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; } /* ========================================================================== PIED DE PAGE ========================================================================== */ .rof-footer { background: var(--rof-blue-deep); color: var(--rof-text-on-dark); font-size: var(--fs-sm); padding: 46px 0 24px; } .rof-footer h2, .rof-footer h5 { color: #fff; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; margin-bottom: 13px; } .rof-footer nav a, .rof-footer .col-6 a, .rof-footer .col-lg-2 a { display: block; } .rof-footer a { color: var(--rof-text-on-dark-soft); padding: 3px 0; } .rof-footer a:hover { color: #fff; } .rof-footer-bottom { border-top: 1px solid rgba(255, 255, 255, .13); margin-top: 30px; padding-top: 18px; font-size: var(--fs-xs); color: var(--rof-text-on-dark-faint); } .rof-social { width: 38px; height: 38px; border-radius: var(--rof-radius-xs); border: 1px solid rgba(255, 255, 255, .2); display: inline-flex; align-items: center; justify-content: center; color: var(--rof-text-on-dark-soft); padding: 0; } .rof-social:hover { background: rgba(255, 255, 255, .1); color: #fff; } /* ========================================================================== BANDEAUX DE PAGE ========================================================================== */ /* Bandeau d'accueil : degrade tres doux issu du bleu de la charte, plutot qu'un aplat de blanc pur sur toute la largeur de l'ecran. */ .rof-hero { background: linear-gradient(180deg, #FFFFFF 0%, var(--rof-blue-50) 100%); border-bottom: 1px solid var(--rof-border); position: relative; } /* Cadre du filigrane. Le bandeau portait « overflow: hidden » pour contenir le logotype, qui deborde ses deux bords. Mais un decoupage vaut pour tout ce qu'il contient : la liste de suggestions de la barre de recherche etait coupee net au bas du bandeau, bouton « Voir tous les resultats » compris, et le bas du panneau devenait incliquable. Le decoupage descend donc ici, autour du seul element qui en a besoin. */ .rof-hero-fond { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; } /* Logotype en filigrane derriere le texte du bandeau. Cale sous la colonne de texte, sans deborder sur la carte qui occupe la moitie droite. Decoratif : masque aux lecteurs d'ecran, insensible au pointeur. Le contraste du texte pose par-dessus est verifie plus bas. */ .rof-hero-watermark { position: absolute; left: clamp(10px, 6vw, 150px); top: 57%; transform: translateY(-50%); height: clamp(340px, 46vw, 620px); width: auto; opacity: .16; z-index: 0; pointer-events: none; user-select: none; } /* --- Le filigrane vu au travers des commandes --------------------------- La barre de recherche et les pastilles sont des aplats blancs opaques : posees sur le filigrane, elles y decoupaient un rectangle blanc et le logotype semblait tronque. Elles deviennent donc translucides, avec un flou d'arriere-plan : le filigrane transparait sans que la saisie perde en lisibilite, et la barre garde son relief de commande cliquable. Restreint au bandeau d'accueil : ailleurs, il n'y a pas de filigrane. */ .rof-hero .rof-searchbar, .rof-hero .rof-chip { background-color: rgba(255, 255, 255, .74); -webkit-backdrop-filter: blur(12px) saturate(1.15); backdrop-filter: blur(12px) saturate(1.15); } .rof-hero .rof-chip:hover { background-color: rgba(255, 255, 255, .92); } /* Navigateurs sans flou d'arriere-plan : on garde la translucidite seule, un peu plus dense pour compenser l'absence de flou. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .rof-hero .rof-searchbar, .rof-hero .rof-chip { background-color: rgba(255, 255, 255, .9); } } .rof-hero > .container-fluid { position: relative; z-index: 1; } /* Sous 992px les deux colonnes s'empilent : le filigrane est recentre et encore attenue, pour ne pas passer sous les champs de saisie. */ @media (max-width: 991.98px) { .rof-hero-watermark { left: 50%; transform: translate(-50%, -50%); height: clamp(280px, 70vw, 420px); opacity: .07; } } .rof-hero-dark { background: linear-gradient(135deg, var(--rof-blue-deep) 0%, #1B3C82 60%, var(--rof-blue-primary) 100%); border-radius: var(--rof-radius-lg); color: #fff; } /* En-tête sombre de fenêtre modale. Trois modales portaient chacune le même dégradé en dur — linear-gradient(135deg, #1b365d, #2b4c7e) — un bleu marine absent du cahier des charges : leurs bandeaux n'étaient donc pas du même bleu que le reste du site. On reprend ici le dégradé de .rof-hero-dark. */ .rof-head-dark { background: linear-gradient(135deg, var(--rof-blue-deep) 0%, #1B3C82 60%, var(--rof-blue-primary) 100%); color: #fff; } .rof-page-head { padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--rof-border); } .rof-page-head h1 { font-size: var(--fs-2xl); color: var(--rof-text-dark); margin-bottom: 4px; } .rof-page-head p { color: var(--rof-text-muted); margin: 0; } /* ========================================================================== UTILITAIRES Ces classes etaient deja employees dans les vues du front office sans avoir jamais ete definies (ni ici, ni dans Bootstrap) : elles n'avaient donc aucun effet. Elles sont desormais reelles. ========================================================================== */ .transition-all { transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease; } .hover-shadow:hover, .card-hover:hover { box-shadow: var(--rof-shadow-md); border-color: var(--rof-border-strong) !important; } .hover-primary:hover { color: var(--rof-blue-primary) !important; } .hover-bg-light:hover { background-color: var(--rof-band); } .shadow-xs { box-shadow: var(--rof-shadow-sm) !important; } /* ========================================================================== ACCESSIBILITE — mouvement reduit ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } #blazor-error-ui { background: var(--rof-danger); color: #fff; padding: 1rem 1rem 1rem 3rem; } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width: 991.98px) { .rof-header-row { height: 60px; gap: 12px; } .rof-brand img { height: 38px; } .rof-page-head h1 { font-size: var(--fs-xl); } } @media (max-width: 575.98px) { .rof-searchbar { flex-direction: column; align-items: stretch; } .rof-searchbar .rof-search-field { border-bottom: 1px solid var(--rof-border); } .rof-searchbar .rof-search-go { margin: 8px; width: calc(100% - 16px); } .rof-card-body { padding: 16px; } .rof-card-head { padding: 14px 16px; } /* Les libellés se replient sur les petits écrans. Le « white-space: nowrap » posé sur .btn plus haut protège la barre de navigation, où « Mon espace » sur deux lignes déformait la hauteur de la barre. Appliqué à TOUS les boutons du site, il empêchait aussi les libellés longs du formulaire d'adhésion de se replier : « Valider ma demande d'adhésion » réclamait 430 px de large, et poussait la page entière au défilement horizontal sur un écran de 375 px. Sous 576 px, un libellé replié vaut toujours mieux qu'une page qui déborde — et la barre de navigation, elle, ne contient plus de bouton à cette taille. */ .btn, .badge { white-space: normal; } /* Le bouton de validation portait px-5 (3 rem de marge de chaque côté) : une fois le libellé replié, cette marge n'a plus de raison d'être aussi large. */ .btn-lg.px-5 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } } /* ========================================================================== LES QUATRE RUBRIQUES DU FRONT OFFICE Patients · Étudiants · Ostéopathes · Le R.O.F. Aucune couleur, aucune police, aucun rayon nouveau : tout est repris des jetons déclarés en tête de ce fichier. Ce bloc n'ajoute que des agencements. ========================================================================== */ /* -------------------------------------------------------------------------- Les quatre portes d'entrée de la page d'accueil -------------------------------------------------------------------------- */ .rof-porte { display: flex; flex-direction: column; gap: 12px; padding: 20px 18px 16px; background: var(--rof-card-bg); border: 1px solid var(--rof-border); /* Le filet de tête porte la couleur de la rubrique. C'est le seul endroit du site où les quatre couleurs de la charte cohabitent : elles servent ici à distinguer quatre destinations, pas à décorer. */ border-top: 3px solid var(--rof-blue-primary); border-radius: var(--rof-radius-lg); box-shadow: var(--rof-shadow-sm); transition: box-shadow .16s ease-out, transform .16s ease-out; } .rof-porte.teal { border-top-color: var(--rof-teal-primary); } .rof-porte.rose { border-top-color: var(--rof-rose-primary); } .rof-porte.prune { border-top-color: var(--rof-prune-primary); } .rof-porte:hover { box-shadow: var(--rof-shadow-md); transform: translateY(-2px); } .rof-porte-list { list-style: none; margin: 0; padding: 0; flex: 1; } .rof-porte-list a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 0; font-size: var(--fs-sm); color: var(--rof-text-body); border-bottom: 1px solid var(--rof-border); text-decoration: none; } .rof-porte-list li:last-child a { border-bottom: 0; } .rof-porte-list a:hover { color: var(--rof-blue-primary); } .rof-porte-list a i { color: var(--rof-text-faint); flex: none; } .rof-porte-go { font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-sm); color: var(--rof-blue-primary); display: inline-flex; align-items: center; gap: 6px; text-decoration: none; } /* -------------------------------------------------------------------------- Bandeau et fil d'Ariane des pages de rubrique -------------------------------------------------------------------------- */ .rof-rubrique-banner { background: linear-gradient(180deg, var(--rof-band), var(--rof-bg-light)); border-bottom: 1px solid var(--rof-border); } .rof-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0 0 10px; padding: 0; font-size: var(--fs-xs); color: var(--rof-text-muted); } .rof-breadcrumb li { display: inline-flex; align-items: center; gap: 7px; } .rof-breadcrumb i { color: var(--rof-text-faint); font-size: 11px; } .rof-breadcrumb a { color: var(--rof-text-muted); } .rof-breadcrumb a:hover { color: var(--rof-blue-primary); } /* -------------------------------------------------------------------------- Blocs de contenu -------------------------------------------------------------------------- */ .rof-bloc { margin-bottom: 30px; } .rof-bloc:last-child { margin-bottom: 0; } .rof-bloc-title { font-size: var(--fs-xl); margin-bottom: 12px; } /* Prose issue de l'éditeur riche. Les marges sont posées ici plutôt que dans le HTML enregistré : le contenu saisi reste ainsi du texte, et sa mise en page suit la charte même si celle-ci change. */ .rof-prose { color: var(--rof-text-body); } .rof-prose > *:last-child { margin-bottom: 0; } .rof-prose p { margin-bottom: 12px; line-height: 1.7; } .rof-prose h2 { font-size: var(--fs-lg); margin: 22px 0 8px; } .rof-prose h3 { font-size: var(--fs-base-plus); margin: 18px 0 6px; } .rof-prose ul, .rof-prose ol { margin: 0 0 14px; padding-left: 22px; } .rof-prose li { margin-bottom: 5px; } .rof-prose a { text-decoration: underline; } .rof-prose img { max-width: 100%; height: auto; border-radius: var(--rof-radius-sm); } /* Longueur de ligne : au-delà d'environ 75 signes, l'œil perd la ligne suivante. */ .rof-bloc .rof-prose, .rof-bloc .rof-check-list { max-width: 72ch; } /* Liste à coches */ .rof-check-list { list-style: none; margin: 0; padding: 0; } .rof-check-list li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-bottom: 1px solid var(--rof-border); font-size: var(--fs-sm); color: var(--rof-text-body); } .rof-check-list li:last-child { border-bottom: 0; } .rof-check-list i { color: var(--rof-teal-text); flex: none; margin-top: 3px; } /* Accordéon :
/ natifs, simplement habillés. */ .rof-accordion { border: 1px solid var(--rof-border); border-radius: var(--rof-radius-md); overflow: hidden; background: var(--rof-card-bg); } .rof-accordion details { border-bottom: 1px solid var(--rof-border); } .rof-accordion details:last-child { border-bottom: 0; } .rof-accordion summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-sm); color: var(--rof-text-dark); } .rof-accordion summary::-webkit-details-marker { display: none; } .rof-accordion summary:hover { background: var(--rof-band); } .rof-accordion details[open] > summary { background: var(--rof-band); } .rof-accordion summary i { color: var(--rof-text-faint); flex: none; transition: transform .15s ease-out; } .rof-accordion details[open] > summary i { transform: rotate(180deg); } .rof-accordion-body { padding: 4px 16px 16px; font-size: var(--fs-sm); } /* Tableau libre. Le défilement latéral est confiné au conteneur : la page, elle, ne défile jamais horizontalement. */ .rof-table-scroll { overflow-x: auto; border: 1px solid var(--rof-border); border-radius: var(--rof-radius-md); background: var(--rof-card-bg); } .rof-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .rof-table th { text-align: left; padding: 11px 14px; background: var(--rof-band); border-bottom: 1px solid var(--rof-border); font-family: var(--font-ui); font-weight: 600; color: var(--rof-text-dark); white-space: nowrap; } .rof-table td { padding: 11px 14px; border-bottom: 1px solid var(--rof-border); color: var(--rof-text-body); } .rof-table tbody tr:last-child td { border-bottom: 0; } /* Chiffre mis en avant */ .rof-figure { font-family: var(--font-heading); font-weight: 800; font-size: var(--fs-2xl); line-height: 1.1; color: var(--rof-blue-primary); margin-bottom: 4px; } /* Liste de documents */ .rof-doc-list { padding: 4px 0; } .rof-doc-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--rof-border); font-size: var(--fs-sm); color: var(--rof-text-body); text-decoration: none; } .rof-doc-list > *:last-child { border-bottom: 0; } .rof-doc-item:hover { background: var(--rof-band); } .rof-doc-item > i:first-child { color: var(--rof-blue-primary); flex: none; } .rof-doc-item > i:last-child { color: var(--rof-text-faint); flex: none; } /* Sans fichier déposé, la ligne n'est pas cliquable : elle ne doit pas non plus en avoir l'air. */ .rof-doc-item.is-empty { color: var(--rof-text-muted); cursor: default; } .rof-doc-item.is-empty:hover { background: transparent; } .rof-doc-item.is-empty > i:first-child { color: var(--rof-text-faint); } /* Frise chronologique */ .rof-timeline { list-style: none; position: relative; margin: 0; padding: 0 0 0 26px; } .rof-timeline::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--rof-border); } .rof-timeline li { position: relative; padding-bottom: 22px; } .rof-timeline li:last-child { padding-bottom: 0; } .rof-timeline li::before { content: ""; position: absolute; left: -24px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--rof-card-bg); border: 2px solid var(--rof-blue-primary); } /* Les dates fondatrices sont pleines et en prune : sur une frise de quinze lignes, elles doivent se repérer d'un coup d'œil. */ .rof-timeline li.key::before { background: var(--rof-prune-primary); border-color: var(--rof-prune-primary); } .rof-timeline-date { font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-sm); color: var(--rof-blue-primary); display: block; } .rof-timeline li.key .rof-timeline-date { color: var(--rof-prune-primary); } .rof-timeline h3 { font-size: var(--fs-md); margin: 2px 0 3px; color: var(--rof-text-dark); } .rof-timeline p { font-size: var(--fs-sm); color: var(--rof-text-muted); margin: 0; max-width: 68ch; } /* -------------------------------------------------------------------------- Colonne latérale des pages de contenu -------------------------------------------------------------------------- */ .rof-sticky-aside { position: sticky; top: 88px; } .rof-aside-title { font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--rof-text-muted); margin-bottom: 9px; } .rof-aside-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0 8px 11px; border-left: 2px solid var(--rof-border); font-size: var(--fs-sm); color: var(--rof-text-body); text-decoration: none; } .rof-aside-link:hover { color: var(--rof-blue-primary); } .rof-aside-link i { color: var(--rof-text-faint); font-size: 12px; } .rof-aside-link.active { border-left-color: var(--rof-blue-primary); color: var(--rof-blue-primary); font-weight: 600; } /* -------------------------------------------------------------------------- Catalogue des établissements -------------------------------------------------------------------------- */ .rof-meta-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-xs); color: var(--rof-text-muted); } .rof-meta-list li { display: flex; align-items: flex-start; gap: 7px; } .rof-meta-list i { color: var(--rof-text-faint); flex: none; margin-top: 2px; } /* Enveloppe d'une liste déroulante posée dans une barre de filtres : elle doit avoir la même hauteur et le même contour que le champ de recherche voisin. */ .rof-select-shell { display: flex; align-items: center; gap: 8px; padding: 0 13px; height: 44px; border: 1px solid var(--rof-border-strong); border-radius: var(--rof-radius-sm); background: var(--rof-card-bg); } /* Même partage des rôles que pour la barre de recherche : la liste déroulante n'a pas de contour propre, l'enveloppe porte celui du focus. */ .rof-select-shell select { border: 0; outline: 0; background: none; font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-sm); color: var(--rof-blue-primary); } .rof-select-shell:focus-within { outline: 2px solid var(--rof-blue-primary); outline-offset: 2px; } .rof-select-shell label { margin: 0; white-space: nowrap; } /* -------------------------------------------------------------------------- Calendrier des évènements -------------------------------------------------------------------------- */ .rof-calendar { border: 1px solid var(--rof-border); border-radius: var(--rof-radius-md); overflow: hidden; background: var(--rof-card-bg); } .rof-calendar-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--rof-band); border-bottom: 1px solid var(--rof-border); } .rof-calendar-head strong { font-family: var(--font-heading); font-size: var(--fs-md); } .rof-calendar-grid { width: 100%; border-collapse: collapse; table-layout: fixed; } .rof-calendar-grid th { padding: 7px 0; text-align: center; font-size: var(--fs-xs); font-weight: 600; color: var(--rof-text-muted); border-bottom: 1px solid var(--rof-border); } .rof-calendar-grid th abbr { text-decoration: none; } .rof-calendar-grid td { height: 78px; vertical-align: top; padding: 6px 7px; border-right: 1px solid var(--rof-border); border-bottom: 1px solid var(--rof-border); } .rof-calendar-grid td:last-child { border-right: 0; } .rof-calendar-grid tr:last-child td { border-bottom: 0; } .rof-calendar-day { font-size: var(--fs-xs); color: var(--rof-text-body); } .rof-calendar-grid td.out .rof-calendar-day { color: var(--rof-text-faint); opacity: .65; } .rof-calendar-grid td.today { background: var(--rof-band); } .rof-calendar-grid td.today .rof-calendar-day { font-weight: 800; color: var(--rof-blue-primary); } .rof-calendar-event { display: block; margin-top: 4px; padding: 3px 6px; border-radius: 5px; font-size: 11.5px; line-height: 1.25; font-weight: 600; background: var(--rof-blue-primary); color: #fff; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rof-calendar-event.teal { background: var(--rof-teal-text); } .rof-calendar-event.prune { background: var(--rof-prune-primary); } .rof-calendar-event:hover { color: #fff; opacity: .9; } .rof-calendar-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 16px; margin: 12px 0 0; padding: 0; font-size: var(--fs-xs); color: var(--rof-text-muted); } .rof-calendar-legend li { display: inline-flex; align-items: center; gap: 6px; } .rof-calendar-legend .dot { width: 11px; height: 11px; border-radius: 3px; background: var(--rof-blue-primary); display: block; } .rof-calendar-legend .dot.teal { background: var(--rof-teal-text); } .rof-calendar-legend .dot.prune { background: var(--rof-prune-primary); } /* Pastille de date d'un évènement en liste */ .rof-date-chip { flex: none; width: 58px; text-align: center; border: 1px solid var(--rof-border); border-radius: var(--rof-radius-sm); overflow: hidden; } .rof-date-chip .m { display: block; background: var(--rof-blue-primary); color: #fff; font-size: 11px; letter-spacing: .06em; padding: 3px 0; font-weight: 700; } .rof-date-chip.teal .m { background: var(--rof-teal-text); } .rof-date-chip.prune .m { background: var(--rof-prune-primary); } .rof-date-chip .j { display: block; font-family: var(--font-heading); font-weight: 800; font-size: var(--fs-xl); padding: 4px 0; color: var(--rof-text-dark); } /* -------------------------------------------------------------------------- Formulaire d'adhésion étudiante -------------------------------------------------------------------------- */ .rof-steps { list-style: none; display: flex; margin: 0 0 18px; padding: 0; flex-wrap: wrap; } .rof-steps li { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--rof-card-bg); border: 1px solid var(--rof-border); font-size: var(--fs-xs); color: var(--rof-text-muted); } .rof-steps li:first-child { border-radius: var(--rof-radius-sm) 0 0 var(--rof-radius-sm); } .rof-steps li:last-child { border-radius: 0 var(--rof-radius-sm) var(--rof-radius-sm) 0; } .rof-steps li + li { border-left: 0; } .rof-steps li.active { background: var(--rof-blue-primary); border-color: var(--rof-blue-primary); color: #fff; font-weight: 700; } /* Zone de dépôt du certificat. L'élément reste en place et reste focusable : il est rendu transparent par-dessus la zone, et non masqué, pour que la tabulation et les lecteurs d'écran continuent de l'atteindre. */ .rof-dropzone { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px dashed var(--rof-border-strong); border-radius: var(--rof-radius-sm); background: var(--rof-surface-soft); } .rof-dropzone > i { color: var(--rof-blue-primary); flex: none; } .rof-dropzone-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .rof-dropzone:focus-within { outline: 3px solid var(--rof-blue-mid); outline-offset: 2px; } /* Marque de champ obligatoire. Le rouge seul ne porte pas le sens : l'astérisque est aussi présent dans le texte de l'étiquette. */ .rof-req { color: var(--rof-rose-text); font-weight: 700; } /* -------------------------------------------------------------------------- Champs en erreur Blazor pose la classe « invalid » sur un champ dont la validation échoue, et rend ses messages dans .validation-message. Ni l'une ni l'autre n'était décrite ici : un champ obligatoire laissé vide gardait exactement l'apparence d'un champ correctement rempli, et son message s'affichait en noir, au milieu des textes d'aide. -------------------------------------------------------------------------- */ .form-control.invalid, .form-select.invalid, .form-check-input.invalid, .rof-dropzone.invalid { border-color: var(--rof-danger); } .form-control.invalid, .form-select.invalid { background-color: #FFFCFD; } .form-control.invalid:focus, .form-select.invalid:focus { border-color: var(--rof-danger); box-shadow: 0 0 0 3px rgba(184, 31, 56, .18); } .validation-message { display: block; margin-top: 4px; color: var(--rof-danger); font-size: var(--fs-sm); font-weight: 600; } /* Entrées du résumé d'erreurs : ce sont des boutons — ils ramènent le focus sur le champ concerné — mais rien ne doit les distinguer d'un lien. */ .rof-lien-erreur { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: underline; cursor: pointer; } .rof-lien-erreur:hover { text-decoration: none; } /* Liste déroulante de suggestions posée sous un champ de saisie (établissement de formation). Les éléments eux-mêmes réutilisent .rof-suggest-item. */ .rof-combo-liste { position: absolute; z-index: 30; top: 100%; left: 0; width: 100%; margin-top: 4px; padding: 6px; max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid var(--rof-border); border-radius: var(--rof-radius-md); box-shadow: var(--rof-shadow-lg); } /* -------------------------------------------------------------------------- Compléments de pastilles et de boutons -------------------------------------------------------------------------- */ .rof-thumb-prune { background: #F4E8F0; color: var(--rof-prune-primary); } .rof-thumb-grey { background: var(--rof-surface-soft); color: var(--rof-text-muted); } /* Bouton secondaire posé sur un aplat bleu nuit : le contour blanc translucide est le seul qui tienne le contraste sur ce fond. */ .btn-rof-ghost-light { background: transparent; border: 1px solid rgba(255, 255, 255, .45); color: #fff; font-family: var(--font-ui); font-weight: 600; } .btn-rof-ghost-light:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .7); color: #fff; } /* -------------------------------------------------------------------------- Adaptations aux petits écrans -------------------------------------------------------------------------- */ @media (max-width: 991.98px) { .rof-sticky-aside { position: static; } } @media (max-width: 767.98px) { /* Sous 768px, sept colonnes de 78px ne tiennent plus : les cases se resserrent et les intitulés d'évènement se réduisent à une pastille. */ .rof-calendar-grid td { height: 56px; padding: 4px; } .rof-calendar-event { font-size: 0; padding: 0; height: 6px; margin-top: 3px; border-radius: 3px; } .rof-steps li { flex: 1 1 100%; border-radius: var(--rof-radius-sm) !important; border-left: 1px solid var(--rof-border); } .rof-steps li + li { margin-top: 6px; } } /* Le mouvement des portes d'entrée est un agrément, pas une information : il disparaît si le système demande à réduire les animations. */ @media (prefers-reduced-motion: reduce) { .rof-porte { transition: none; } .rof-porte:hover { transform: none; } .rof-accordion summary i { transition: none; } } /* ========================================================================== BANDEAU D'APERÇU Posé en tête d'une page de rubrique qui n'est pas en ligne, et que seul un administrateur connecté peut voir. La bande jaune traverse toute la largeur : à l'inverse d'un encadré posé dans le fil du texte, on ne peut pas la confondre avec le contenu de la page ni la manquer en arrivant. ========================================================================== */ .rof-preview-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 16px; background: var(--rof-warn-light); border-bottom: 2px solid var(--rof-warn); color: var(--rof-text-dark); font-size: var(--fs-sm); } .rof-preview-bar > i:first-child { color: var(--rof-warn); font-size: 1.1rem; } .rof-preview-bar > span { flex: 1 1 320px; } .rof-preview-bar a { color: var(--rof-blue-primary); font-weight: 700; text-decoration: underline; white-space: nowrap; } /* ========================================================================== ZONE DE DÉPÔT DE FICHIER (TeleversementFichier.razor) Le champ « InputFile » recouvre la zone en transparence : c'est ce qui rend toute la surface cliquable ET laisse la tabulation l'atteindre, sans quoi le glisser-deposer serait le seul chemin — donc inaccessible au clavier. ========================================================================== */ .rof-depot-zone { position: relative; border: 2px dashed var(--rof-border-strong, #b9c2d0); border-radius: .5rem; padding: 1.1rem .9rem; text-align: center; background: var(--rof-surface-soft, #f8fafc); transition: border-color .15s ease, background-color .15s ease; } .rof-depot-champ { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .rof-depot-invite { pointer-events: none; color: var(--rof-text-body, #333); } /* Survol pendant le glisser : la cible doit se voir avant qu'on lache. */ .rof-depot-survol .rof-depot-zone { border-color: var(--rof-blue-primary, #20499F); background: var(--rof-blue-50, #eef3fb); } .rof-depot-erreur .rof-depot-zone { border-color: #dc3545; } /* Le champ garde un anneau de focus visible malgre son opacite nulle. */ .rof-depot-champ:focus-visible + .rof-depot-invite { outline: 2px solid var(--rof-blue-primary, #20499F); outline-offset: 4px; border-radius: .35rem; } /* ========================================================================== CARTE DE PUBLICATION SOCIALE (accueil) La carte entiere est un lien : la cible de clic fait toute la surface, ce qu'un lien pose sur le seul titre ne donne pas. Il faut donc lui rendre a la main l'etat de survol et l'anneau de focus qu'un nu portait. ========================================================================== */ .rof-carte-sociale { transition: transform .15s ease, box-shadow .15s ease; color: inherit; } .rof-carte-sociale:hover, .rof-carte-sociale:focus-visible { transform: translateY(-2px); box-shadow: var(--rof-shadow-lg); } .rof-carte-sociale:focus-visible { outline: 2px solid var(--rof-blue-primary); outline-offset: 3px; } /* Sans cela, le mouvement au survol s'impose a qui a demande a son systeme de reduire les animations. */ @media (prefers-reduced-motion: reduce) { .rof-carte-sociale { transition: none; } .rof-carte-sociale:hover, .rof-carte-sociale:focus-visible { transform: none; } } /* ========================================================================== LECTEUR DU PROJET POLITIQUE (/projet-politique) Coque de ProjetPolitique.razor ; l'intérieur — boutons, pages — est conduit par ProjetPolitique.razor.js. Aucune couleur écrite en dur : le blanc d'une page de papier ou d'un texte sur fond bleu est --rof-card-bg, la même valeur que le fond des cartes. ========================================================================== */ .rof-lecteur { background: var(--rof-card-bg); border: 1px solid var(--rof-border); border-radius: var(--rof-radius-md); box-shadow: var(--rof-shadow-sm); overflow: clip; } .rof-lecteur-entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 16px 20px; border-bottom: 1px solid var(--rof-border); } .rof-lecteur-titre { font-size: var(--fs-xl); color: var(--rof-text-dark); margin: 0; } .rof-lecteur-poids { font-weight: 400; color: var(--rof-text-muted); } /* Barre de commandes : deux groupes — les modes de lecture, puis la navigation entre les pages. • Assez large (≥ 1100 px) : les modes à gauche, la navigation AU CENTRE de la barre, et non à la suite des modes. Trois colonnes « 1fr auto 1fr » : les deux colonnes latérales sont toujours égales, donc le milieu de la navigation est exactement le milieu de la barre, quelle que soit la largeur du texte « Pages 40 et 41 sur 80 ». À 1100 px chaque colonne latérale mesure environ 315 px, pour un commutateur de modes de 265 px. • En dessous : les groupes sont centrés, sur une seule ligne si tout y tient, sur deux sinon. */ .rof-lecteur-barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 20px; padding: 10px 20px; background: var(--rof-band); border-bottom: 1px solid var(--rof-border); } @media (min-width: 1100px) { .rof-lecteur-barre { display: grid; grid-template-columns: 1fr auto 1fr; } .rof-lecteur-barre > .rof-lecteur-groupe:first-child { justify-self: start; } .rof-lecteur-barre > .rof-lecteur-groupe:nth-child(2) { justify-self: center; } } .rof-lecteur-groupe { display: inline-flex; align-items: center; gap: 6px; } /* Les deux modes forment un commutateur : un seul est pressé à la fois (aria-pressed). */ .rof-lecteur-mode, .rof-lecteur-bouton { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 14px; font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-sm); line-height: 1; white-space: nowrap; color: var(--rof-blue-primary); background: var(--rof-card-bg); border: 1px solid var(--rof-border-strong); border-radius: var(--rof-radius-sm); cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease; } .rof-lecteur-bouton { min-width: 40px; padding: 0 10px; } .rof-lecteur-mode:hover, .rof-lecteur-bouton:hover:not(:disabled) { background: var(--rof-blue-50); border-color: var(--rof-blue-primary); } .rof-lecteur-mode[aria-pressed="true"] { background: var(--rof-blue-primary); border-color: var(--rof-blue-primary); color: var(--rof-card-bg); } .rof-lecteur-bouton:disabled, .rof-lecteur-mode:disabled { color: var(--rof-text-faint); background: var(--rof-surface-soft); border-color: var(--rof-border); cursor: default; } .rof-lecteur-page { min-width: 9.5rem; padding: 0 6px; text-align: center; font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-sm); color: var(--rof-text-dark); } .rof-lecteur-etat { margin: 0; padding: 12px 20px; font-size: var(--fs-sm); color: var(--rof-text-body); border-bottom: 1px solid var(--rof-border); } .rof-lecteur-etat:empty { display: none; } .rof-lecteur-secours { margin: 0; padding: 12px 20px; font-size: var(--fs-sm); color: var(--rof-danger); background: var(--rof-danger-light); border-top: 1px solid var(--rof-border); } .rof-lecteur-scene { background: var(--rof-bg-sunken); padding: 16px; min-height: 50vh; } .rof-lecteur[data-etat="erreur"] .rof-lecteur-scene { min-height: 0; padding: 0; } @media (max-width: 575.98px) { .rof-lecteur-entete, .rof-lecteur-barre { padding-left: 14px; padding-right: 14px; } .rof-lecteur-scene { padding: 8px; } .rof-lecteur-page { min-width: 0; flex: 1 1 100%; order: 3; } } /* Lecture continue : une colonne de pages dans un CADRE qui défile. La molette fait défiler le document dans son cadre, pas la page du site (un PDF de 80 pages ferait plus de 100 000 px). Largeur et hauteur du cadre sont posées par ProjetPolitique.razor.js, à la taille d'une page ; les valeurs ci-dessous ne servent qu'avant cette mesure et si le script ne tourne pas. Le défilement n'est PAS verrouillé (pas d'overscroll-behavior) : arrivé au début ou à la fin du document, la molette reprend la page du site — le visiteur n'est jamais enfermé dans le cadre. La marge interne (8 px) est la constante PAD_CONTINU du script. */ .rof-continu { position: relative; /* offsetParent des pages : le script s'en sert pour les placer */ box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 100%; height: 70vh; margin: 0 auto; padding: 8px; overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; /* la largeur des pages ne bouge pas quand l'ascenseur apparaît */ background: var(--rof-surface-soft); border: 1px solid var(--rof-border-strong); border-radius: var(--rof-radius-sm); } /* Dans un conteneur flex de hauteur fixe, une page ne doit jamais être écrasée : sa hauteur vient de son rapport largeur/hauteur. */ .rof-continu > .rof-pdf-page { flex: 0 0 auto; } .rof-continu:focus-visible { outline: 2px solid var(--rof-blue-primary); outline-offset: 2px; } /* Une « feuille » est le papier d'une page : fond blanc, canvas (ou image) et couche de texte. */ .rof-pdf-page { --scale-round-x: 1px; --scale-round-y: 1px; position: relative; width: 100%; background: var(--rof-card-bg); box-shadow: var(--rof-shadow-sm); } .rof-pdf-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; user-select: none; } /* Dans le livre, la feuille est posée au centre de sa page, à la taille exacte que JS lui donne : une page de format différent de la première y tient en entier, sans déformation. */ .rof-pdf-page--livre { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: auto; box-shadow: none; } .rof-livre-cadre { margin: 0 auto; } .rof-livre { width: 100%; } .rof-livre-page { background: var(--rof-card-bg); overflow: hidden; } /* Couche de texte de pdf.js (sélection, recherche dans la page, lecteurs d'écran). Reprise des règles de web/pdf_viewer.css de pdf.js 6.4.299 (Apache-2.0), restreintes aux feuilles du lecteur pour ne rien changer ailleurs sur le site. */ .rof-pdf-page .textLayer { color-scheme: only light; position: absolute; text-align: initial; inset: 0; overflow: clip; opacity: 1; line-height: 1; letter-spacing: normal; word-spacing: normal; -webkit-text-size-adjust: none; text-size-adjust: none; forced-color-adjust: none; transform-origin: 0 0; caret-color: CanvasText; z-index: 0; --min-font-size: 1; --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size)); --min-font-size-inv: calc(1 / var(--min-font-size)); } .rof-pdf-page .textLayer :is(span, br) { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; -webkit-user-select: text; user-select: text; } .rof-pdf-page .textLayer > :not(.markedContent), .rof-pdf-page .textLayer .markedContent span:not(.markedContent) { z-index: 1; --font-height: 0; font-size: calc(var(--text-scale-factor) * var(--font-height)); --scale-x: 1; --rotate: 0deg; transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv)); } .rof-pdf-page .textLayer .markedContent { display: contents; } .rof-pdf-page .textLayer span[role="img"] { -webkit-user-select: none; user-select: none; cursor: default; } .rof-pdf-page .textLayer ::selection { background: rgba(0, 0, 255, .25); background: color-mix(in srgb, AccentColor, transparent 50%); color: transparent; } .rof-pdf-page .textLayer br::selection { background: transparent; } .rof-pdf-page .textLayer .endOfContent { display: block; position: absolute; inset: 100% 0 0; z-index: 0; cursor: default; -webkit-user-select: none; user-select: none; } .rof-pdf-page .textLayer.selecting .endOfContent { top: 0; }