/* Listes CESNI — refonte v2. Design tokens validated in _refonte_v2/mockups. Light by default; dark is opt-in via the header toggle, never from the OS. */ :root { --blue:#0e6db4; --blue-strong:#0b5c98; --blue-deep:#0a4c7f; --accent:#2f95d8; /* Le fond de page est un bleu très clair tiré du bleu CESNI (#0e6db4), et non un gris : listes, cartes et outils, qui restent blancs, s'en détachent nettement. La marche mesurée passe de 1,07 — invisible — à 1,16. La bordure des cartes est descendue d'un ton pour rester lisible sur ce fond plus soutenu (1,09 auparavant, 1,22 désormais). */ /* Fond de page : le bleu très clair tiré du bleu de travail #0e6db4. Une teinte du bleu ciel du logo a été essayée (#d1effa) puis écartée — trop cyan à côté du nuit de la navigation et du pied. */ --sky:#d6e7f6; --bg:#e5eff9; --surface:#ffffff; --text:#163349; --muted:#5c6b7b; --border:#cbdaeb; --icon-bg:#e7f2fc; --icon-fg:#0e6db4; /* Les bandes horizontales ALTERNENT, de haut en bas : barre de langues bleu en-tête + titre blanc corps de page bleu listes et outils blanc Le bandeau de titre était bleu comme la page : les deux se fondaient en un seul aplat et l'alternance se perdait. Il rejoint le blanc de l'en-tête, dont il est la continuation. */ /* La barre de navigation prend EXACTEMENT la couleur du fond de page : le haut de page et le corps ne font plus qu'un, et seul le bandeau blanc du titre s'en détache. La barre des langues reste au gris — bandeau de service, sans couleur de marque. Le pied garde le bleu nuit du logo (#004c9c), seul aplat soutenu de la page. */ --header-bg:#e5eff9; --header-fg:#163349; --util-bg:#eceff2; --util-fg:#4a5560; --hero-from:#ffffff; --hero-to:#ffffff; --hero-fg:#103049; --hero-sub:#4a647a; --row-hover:#f2f8fd; --thead-bg:#eef5fb; --footer-bg:#004c9c; --footer-fg:#cfe2f2; --field-bg:#ffffff; --field-bd:#c8d8e8; --warn-bg:#fdf1dc; --warn-fg:#8a5a10; --warn-bd:#f0d9ae; --ok-bg:#e6f4ea; --ok-fg:#1e6b38; --ok-bd:#c2e3cd; --danger-bg:#fdecec; --danger-fg:#9d2a2a; --danger-bd:#f2c9c9; /* surlignage jaune des textes d'attente (voir .placeholder) */ --placeholder-bg:#fff29a; --placeholder-fg:#4a3c00; --placeholder-bd:#e8d461; /* pastilles R / no R de l'outil DT — mêmes valeurs que l'export PDF (TransitionalPdfBuilder : rhineBlue/Red/Green), à garder synchronisées */ --rhin-r-bg:#e6f0fb; --rhin-r-fg:#1d3a78; --rhin-nor-bg:#fdecec; --rhin-nor-fg:#8a2828; --rhin-both-bg:#eef9f1; --rhin-both-fg:#23653b; --shadow:0 1px 2px rgba(16,60,100,.05),0 6px 20px rgba(16,60,100,.06); --shadow-lg:0 4px 10px rgba(16,60,100,.10),0 18px 40px rgba(16,60,100,.14); --radius:10px; --maxw:1180px; --sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; } :root[data-theme="dark"] { /* Palette de nuit : les couleurs de texte tenaient déjà largement leurs seuils, les PLANS ne se distinguaient pas. Les valeurs sont posées pour que chaque marche soit mesurable — carte/fond 1,32, bordure/carte 1,73, en-tête de tableau/carte 1,31, survol/carte 1,17 — au lieu du 1,0 à 1,1 précédent, qui rendait cartes, tableaux et bordures invisibles. */ --blue:#4aa6e8; --blue-strong:#6bbcf0; --blue-deep:#9ad3f6; --accent:#57b0ea; --sky:#14293e; --bg:#0a1420; --surface:#1a2d41; --text:#eaf1f8; --muted:#a6bccf; --border:#3a5170; --icon-bg:#1b3a58; --icon-fg:#7cc2f3; --header-bg:#0e1f30; --header-fg:#eaf1f8; --util-bg:#060e17; --util-fg:#9db3c7; --hero-from:#123049; --hero-to:#0a1826; --hero-fg:#f0f7fd; --hero-sub:#b6cde0; --row-hover:#22384e; --thead-bg:#25405a; --footer-bg:#060e17; --footer-fg:#c3d3e2; --field-bg:#0d1b29; --field-bd:#3a5170; --warn-bg:#3d2f11; --warn-fg:#f0c878; --warn-bd:#66501f; --ok-bg:#153a23; --ok-fg:#93d9ad; --ok-bd:#2d5a3d; --danger-bg:#452020; --danger-fg:#f0aaaa; --danger-bd:#6e3434; --placeholder-bg:#7a6a00; --placeholder-fg:#fff8c0; --placeholder-bd:#a08c08; --rhin-r-bg:#173553; --rhin-r-fg:#a3c8f2; --rhin-nor-bg:#452020; --rhin-nor-fg:#f0aaaa; --rhin-both-bg:#153a23; --rhin-both-fg:#93d9ad; --shadow:0 1px 2px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.45); --shadow-lg:0 4px 10px rgba(0,0,0,.6),0 18px 40px rgba(0,0,0,.55); } * { box-sizing:border-box; } html { scroll-behavior:smooth; } /* Pas de -webkit-font-smoothing:antialiased : sans effet sous Windows, il AMINCIT le texte sur Mac. Son seul intérêt d'autrefois — éviter un texte clair trop gras sur fond sombre — a disparu avec macOS Mojave (2018), qui a désactivé le lissage sous-pixel pour tout le système. Il ne restait que l'inconvénient. */ body { margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); line-height:1.55; } a { color:inherit; text-decoration:none; } .wrap { max-width:var(--maxw); margin:0 auto; padding:0 24px; } /* pages à tableau large (équipements) : le contenu s'étend presque plein écran */ .wrap-wide { max-width:min(1780px, 96vw); } /* utility bar */ .util { background:var(--util-bg); color:var(--util-fg); font-size:13px; border-bottom:1px solid var(--border); } .util .wrap { display:flex; align-items:center; gap:18px; min-height:40px; } /* Le logo CESNI ouvre la barre, à gauche ; langues et thème restent à droite, d'où la marge automatique qui pousse tout le reste au bout. */ .util-logo { display:inline-flex; align-items:center; margin-right:auto; padding:3px 0; border-radius:4px; } .util-logo img { height:26px; width:auto; display:block; } .util-logo:hover { opacity:.85; } .langs { display:inline-flex; gap:2px; } .lang-btn { color:var(--util-fg); font-size:13px; padding:4px 9px; border-radius:5px; } .lang-btn:hover { color:var(--blue); background:rgba(14,109,180,.08); } .lang-btn.active { color:#fff; background:var(--blue); font-weight:700; } .theme-btn { background:none; border:0; color:var(--util-fg); font:inherit; font-size:13px; display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:6px; cursor:pointer; } .theme-btn:hover { color:var(--blue); background:rgba(14,109,180,.08); } /* L'attribut hidden ne masque PAS un : la règle [hidden]{display:none} du navigateur ne s'applique qu'aux éléments HTML, pas au namespace SVG. Les deux icônes (lune ET soleil) restaient donc affichées, le bouton faisait 58 px au lieu de 29 et poussait la page 12 px au-delà de l'écran — sur TOUTES les pages, d'où le défilement horizontal sur téléphone. */ .theme-btn svg { width:16px; height:16px; } .theme-btn svg[hidden] { display:none; } .theme-sep { width:1px; height:18px; background:var(--border); } /* « CESNI Lists » posé sur une plaque blanche : la barre de navigation ayant la couleur du fond, le titre y flottait sans support. La plaque le pose au même niveau que les autres commandes blanches de la barre — recherche, menus — au lieu de le laisser à même le fond. */ :root:not([data-theme="dark"]) header.site .brand-name { background:#ffffff; border-radius:999px; padding:7px 17px; box-shadow:0 1px 2px rgba(0,32,64,.18); } :root:not([data-theme="dark"]) header.site .brand-name b { color:#0a2c4a; } :root:not([data-theme="dark"]) header.site .brand b span { color:#0e6db4; } /* header: logo -> cesni.eu, name -> home; 7-block nav on inner pages only */ header.site { background:var(--header-bg); color:var(--header-fg); position:sticky; top:0; z-index:30; border-bottom:1px solid var(--border); } header.site .wrap { display:flex; align-items:center; min-height:72px; padding:12px 0; gap:12px 20px; flex-wrap:wrap; } /* Le logo a rejoint la barre de service : l'en-tête porte le titre du site, suivi immédiatement du bouton d'accueil. Le titre lui-même n'est plus un lien, il ferait doublon. */ .brand { display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .brand b { font-size:20px; font-weight:700; letter-spacing:-.01em; } .brand b span { color:var(--blue); } /* the explicit way home, next to the site title — same pill language as the menu */ .nav-home { display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border:1px solid var(--border); border-radius:999px; background:var(--surface); font-size:14px; font-weight:600; } .nav-home svg { width:16px; height:16px; color:var(--blue); flex:none; } .nav-home:hover { border-color:var(--accent); color:var(--blue); } .nav-home.active { background:var(--sky); border-color:var(--accent); color:var(--blue-strong); } @media (max-width:480px) { .nav-home span { display:none; } .nav-home { padding:9px 11px; } } /* Main navigation: one disclosure button instead of a bar that wrapped. The seven block titles are long official wordings that cannot be shortened, so they are laid out in a panel — two columns, each with a one-line hint — with the transitional-provisions TOOL set apart at the foot of the panel. */ .mainnav { display:flex; align-items:center; gap:10px; } .navmenu { position:relative; } .navmenu > summary { display:inline-flex; align-items:center; gap:9px; cursor:pointer; padding:9px 14px; border:1px solid var(--border); border-radius:999px; background:var(--surface); font-size:14px; font-weight:600; list-style:none; user-select:none; } .navmenu > summary::-webkit-details-marker { display:none; } .navmenu > summary svg { width:17px; height:17px; color:var(--blue); flex:none; } .navmenu > summary:hover { border-color:var(--accent); color:var(--blue); } .navmenu > summary::after { content:''; flex:none; width:7px; height:7px; margin-left:2px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); opacity:.55; } .navmenu[open] > summary { border-color:var(--accent); color:var(--blue); background:var(--sky); } .navmenu[open] > summary::after { transform:rotate(-135deg) translateY(-2px); } /* the section you are in stays visible once the panel is closed */ .navmenu-here { font-weight:700; color:var(--blue); padding-left:9px; border-left:1px solid var(--border); max-width:26ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Anchored to the button's RIGHT edge, because .gsearch (margin-left:auto) pins the nav to the far right of the header: growing rightward from left:0 pushed the second column off the window, so Vessel equipment / Training / Derogations simply were not there. max-width caps the panel's width, never its position — hence the anchor, plus the JS clamp in the layout for the widths where the header wraps and the button is no longer on the right. */ /* Le panneau ne défile pas avec la page : si la fenêtre est courte, sa fin (l'outil des dispositions transitoires) sortait de l'écran sans moyen de l'atteindre. Il défile donc en lui-même ; la hauteur exacte disponible est posée par le script, cette valeur de repli couvre le cas sans JavaScript. */ .navmenu-panel { position:absolute; top:calc(100% + 8px); left:auto; right:0; z-index:40; overflow-y:auto; overscroll-behavior:contain; max-height:calc(100vh - 200px); max-height:calc(100dvh - 200px); width:max-content; max-width:min(700px, calc(100vw - 28px)); display:grid; grid-template-columns:repeat(auto-fit, minmax(255px, 1fr)); gap:2px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:8px; } /* Le panneau « Outils » porte un liseré bleu à l'INTÉRIEUR : il ouvre sur un outil que l'on manipule, non sur une liste que l'on consulte. La bordure grise ne bouge pas, le trait bleu se pose juste en dessous — d'où l'ombrage interne, qui suit le rayon du panneau sans ajouter un pixel à sa taille. L'ombre portée est reconduite dans la même déclaration, sinon elle saute. Même bleu que la carte « outil » de l'accueil : --blue, celui de sa pastille TOOL et de son icône (.brick-badge, .brick.brick-tool .ico). Redéfini dans les deux palettes, le trait suit donc le thème clair comme sombre. */ .navmenu-tools > .navmenu-panel { box-shadow:var(--shadow-lg), inset 0 0 0 1px var(--blue); } .navmenu-item { display:block; padding:10px 12px; border-radius:8px; } .navmenu-item b { display:block; font-size:14px; font-weight:600; line-height:1.3; } .navmenu-item span { display:block; font-size:12.5px; color:var(--muted); margin-top:2px; line-height:1.4; } .navmenu-item:hover { background:var(--row-hover); } .navmenu-item:hover b { color:var(--blue); } .navmenu-item.active { background:var(--sky); } .navmenu-item.active b { color:var(--blue-strong); } .navmenu-item.disabled { opacity:.5; cursor:default; } .navmenu-item.disabled:hover { background:none; } @media (max-width:820px) { /* le panneau se cale sur les bords de l'écran : `width:max-content` le laissait sinon prendre la largeur de son plus long intitulé */ .navmenu-panel { position:fixed; left:12px; right:12px; top:auto; width:auto; max-width:none; grid-template-columns:1fr; /* une entrée par ligne : le panneau est plus haut, et sur un écran court il faut pouvoir le parcourir jusqu'au bout */ max-height:calc(100vh - 290px); max-height:calc(100dvh - 290px); } .navmenu-item { min-width:0; } .navmenu-item b, .navmenu-item span { overflow-wrap:break-word; } .navmenu-here { display:none; } .navmenu > summary { padding:9px 12px; } } /* page head */ .pagehead { background:linear-gradient(180deg,var(--hero-from),var(--hero-to)); border-bottom:1px solid var(--border); padding:22px 0 58px; } /* Premier bloc de contenu à cheval sur le filet de l'en-tête, comme la carte de l'accueil : la page démarre SUR la ligne au lieu de commencer dessous. Le bloc est désigné dans chaque gabarit (classe « lifted ») car il change d'une page à l'autre - barre de filtres, rangée de pastilles ou intertitre. Le décalage vaut une demi-hauteur de pastille : un bloc court reste alors traversé par la ligne, un bloc haut la laisse passer près de son sommet. */ main > .lifted { position:relative; z-index:1; margin-top:-18px; } /* Sauf une rangée de pastilles : dès qu'elle passe à la ligne — douze catégories sur la page des équipements — le filet tombe ENTRE les deux rangées et coupe le bloc en deux, une moitié sur blanc, l'autre sur bleu. Le chevauchement n'a de sens que sur un bloc d'une seule ligne. Les pastilles descendent donc franchement sous le filet, toutes sur le même fond. */ main > .lifted.cat-pills { margin-top:14px; } /* Le script glisse la mention « le choix d'une valeur met la liste à jour » AVANT la barre de filtres : c'est elle qui se retrouve en tête, c'est donc elle qui doit chevaucher le filet. */ main > .filters-note:has(+ .lifted) { position:relative; z-index:1; margin-top:-54px; } main > .filters-note:has(+ .lifted) + .lifted { margin-top:0; } .pagehead h1 { margin:0 0 6px; font-size:clamp(22px,3vw,30px); font-weight:700; letter-spacing:-.02em; } .pagehead p { margin:0; color:var(--hero-sub); font-size:15px; max-width:80ch; } /* outil DT : l'intro (avec la mention engin flottant) tient sur une ligne */ .pagehead p.intro-wide { max-width:none; } main { padding:26px 0 10px; } /* homepage hero */ .hero { background:linear-gradient(180deg,var(--hero-from),var(--hero-to)); color:var(--hero-fg); padding:54px 0 60px; border-bottom:1px solid var(--border); } .hero h1 { font-size:clamp(27px,3.8vw,40px); line-height:1.14; margin:0 0 12px; font-weight:700; letter-spacing:-.02em; } .hero p { margin:0; color:var(--hero-sub); font-size:18px; max-width:80ch; } /* intro card: same surface as the bricks, deliberately inert */ /* la carte chevauche le filet qui ferme le bandeau d'accueil : elle se pose dessus au lieu de flotter en dessous */ .info-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px 28px; font-size:14.5px; line-height:1.65; margin:-34px 0 34px; position:relative; z-index:1; } .info-card > :first-child { margin-top:0; } .info-card > :last-child { margin-bottom:0; } .info-card .lead { font-weight:600; font-size:15.5px; color:var(--hero-fg); } .info-card h3 { font-size:15px; font-weight:700; margin:18px 0 6px; color:var(--blue-strong); } .info-card p { margin:0 0 12px; } .info-card ul { margin:0 0 12px; padding-left:20px; } .info-card li { margin:6px 0; } /* bricks */ .section-head { margin:0 0 22px; } .section-head h2 { font-size:22px; margin:0; font-weight:700; letter-spacing:-.01em; } .bricks { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .brick { position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px 22px 20px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:12px; min-height:190px; transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .brick::before { content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .18s ease; } .brick:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--accent); } .brick:hover::before { transform:scaleX(1); } .brick .ico { width:46px; height:46px; border-radius:10px; background:var(--icon-bg); color:var(--icon-fg); display:grid; place-items:center; flex:none; } .brick .ico svg { width:24px; height:24px; } .brick h3 { margin:0; font-size:17px; font-weight:700; } .brick p { margin:0; color:var(--muted); font-size:13.5px; } /* liste intégrale des rubriques de la page (et non un extrait) : puces discrètes, deux colonnes dès que la liste s'allonge */ .brick-list { margin:0; padding:0; list-style:none; font-size:13px; color:var(--text); columns:2; column-gap:16px; } .brick-list li { break-inside:avoid; padding-left:13px; position:relative; line-height:1.45; margin-bottom:2px; } .brick-list li::before { content:""; position:absolute; left:0; top:.55em; width:5px; height:5px; border-radius:50%; background:var(--accent); } /* Rubrique annoncée mais pas encore publiée : grise et en italique, puce comprise. L'infobulle dit ce qu'il en est ; le curseur d'aide le signale. */ .brick-list li.pending { color:var(--muted); font-style:italic; cursor:help; } .brick-list li.pending::before { background:var(--muted); opacity:.55; } @media (max-width:560px) { .brick-list { columns:1; } } /* le lien d'appel reste collé en bas quelle que soit la longueur de la liste */ .brick .cta { display:inline-flex; align-items:center; gap:6px; color:var(--blue); font-size:13.5px; font-weight:600; margin-top:auto; padding-top:4px; } .brick .cta svg { width:15px; height:15px; transition:transform .16s ease; } .brick:hover .cta svg { transform:translateX(3px); } /* L'outil n'est pas une liste : un filet gris fin ferme la série des cartes de listes avant lui. Il occupe toute la largeur de la grille ; l'écart des rangées suffit de part et d'autre, d'où l'absence de marge propre. */ .bricks-sep { grid-column:1 / -1; height:0; margin:0; border:0; border-top:1px solid var(--border); } .brick.brick-tool { background:linear-gradient(160deg,var(--sky) 0%,var(--surface) 62%); border-color:var(--accent); } .brick.brick-tool::before { transform:scaleX(1); background:var(--blue-deep); } .brick.brick-tool .ico { background:var(--blue); color:#fff; } .brick-badge { position:absolute; top:14px; right:14px; font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; background:var(--blue); color:#fff; border-radius:4px; padding:3px 7px; } .brick.disabled { opacity:.55; } .brick.disabled:hover { transform:none; box-shadow:var(--shadow); border-color:var(--border); } /* filters row on list pages */ /* Sélecteur sans option utile : grisé et non cliquable, pour qu'on voie tout de suite qu'il n'y a rien à y choisir. */ .filters select:disabled { background:var(--bg); color:var(--muted); cursor:not-allowed; opacity:1; } .filters { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:0 0 16px; } /* Bascule fiches / tableau : sa propre ligne sous les filtres. Le libellé est une phrase entière, il tenait mal au bout de la barre de filtres. */ /* Le bouton de bascule fiches/tableau vit dans la barre de filtres : son libellé est long, il ne doit ni déborder ni repousser les listes. */ .filters .btn-primary { max-width:100%; text-align:left; } /* -------------------------------------------------------------------------- Liste déroulante des filtres, dessinée par nous. La liste native est rendue par le système : sa hauteur ne se pilote pas, et dix-neuf entrées débordaient d'une fenêtre courte. Ici le panneau est borné par le script à la place disponible, défile seul, et se filtre au clavier. -------------------------------------------------------------------------- */ .combo { position:relative; display:inline-flex; min-width:0; } .combo-btn { font:inherit; font-size:14px; padding:9px 30px 9px 11px; text-align:left; border:1px solid var(--field-bd); border-radius:8px; background:var(--field-bg); color:var(--text); cursor:pointer; max-width:100%; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* le chevron, dessiné en CSS pour ne pas dépendre d'une image */ .combo-btn::after { content:''; position:absolute; right:12px; top:50%; width:7px; height:7px; margin-top:-5px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); } .combo-btn:hover { border-color:var(--accent); } .combo-btn:focus-visible { outline:2px solid var(--blue); outline-offset:1px; } .combo-btn[aria-expanded="true"] { border-color:var(--accent); background:var(--sky); } .combo-btn:disabled { background:var(--bg); color:var(--muted); cursor:not-allowed; } .combo-btn:disabled::after { opacity:.4; } .combo-panel { position:fixed; z-index:70; display:flex; flex-direction:column; min-width:220px; max-width:min(460px, calc(100vw - 20px)); background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow-lg); padding:8px; } .combo-panel[hidden] { display:none; } .combo-search { font:inherit; font-size:13.5px; padding:7px 10px; margin-bottom:6px; border:1px solid var(--field-bd); border-radius:6px; background:var(--field-bg); color:var(--text); flex:none; } .combo-list { overflow-y:auto; overscroll-behavior:contain; min-height:0; } .combo-group { font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); padding:8px 8px 4px; } .combo-group[hidden] { display:none; } .combo-option { padding:7px 9px; border-radius:6px; font-size:13.5px; cursor:pointer; line-height:1.35; } .combo-option[hidden] { display:none; } .combo-option:hover, .combo-option.actif { background:var(--row-hover); } .combo-option.on { background:var(--sky); color:var(--blue-strong); font-weight:600; } .combo-option[aria-disabled="true"] { opacity:.5; cursor:default; } .filters select, .filters input[type=search], .filters input[type=text] { font:inherit; font-size:14px; padding:9px 11px; border:1px solid var(--field-bd); border-radius:7px; background:var(--field-bg); color:var(--text); } .filters input[type=search] { min-width:0; width:260px; max-width:100%; } /* Une liste déroulante prend par défaut la largeur de sa plus longue option - « All competences Navigational radar installations… » dépassait l'écran d'un téléphone et faisait défiler toute la page latéralement. */ .filters select { max-width:100%; min-width:0; } .btn { font:inherit; font-size:14px; font-weight:600; padding:9px 18px; border-radius:8px; border:1px solid transparent; cursor:pointer; } .btn-primary { background:var(--blue); color:#fff; } .btn-primary:hover { background:var(--blue-strong); } /* Fond blanc et non transparent : posé sur le dégradé de l'en-tête, le bouton prenait une teinte bleutée alors que les champs voisins sont blancs. */ .btn-ghost { background:var(--surface); color:var(--muted); border-color:var(--field-bd); } .btn-ghost:hover { color:var(--blue); border-color:var(--accent); } .cat-pills { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; } .cat-pills a { font-size:13px; font-weight:600; padding:7px 13px; border-radius:999px; background:var(--surface); border:1px solid var(--border); color:var(--muted); } .cat-pills a:hover { color:var(--blue); border-color:var(--accent); } .cat-pills a.on { background:var(--blue); border-color:var(--blue); color:#fff; } /* tables: always fit the viewport, long text wraps inside cells */ .table-wrap { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); } table.list { border-collapse:separate; border-spacing:0; width:100%; table-layout:fixed; font-size:13.5px; } /* « anywhere » coupait des mots ordinaires en plein milieu (Wirtschaftskamme/r) dès qu'une colonne était étroite : on ne coupe donc que les mots qui ne tiennent PAS sur une ligne entière (break-word), les URL gardant leur propre règle de coupure (a.autolink). */ table.list th, table.list td { text-align:left; vertical-align:top; overflow-wrap:break-word; padding:9px 12px; } table.list thead th { position:sticky; top:0; z-index:5; background:var(--thead-bg); font-weight:700; font-size:12px; letter-spacing:.02em; border-bottom:1px solid var(--border); /* jamais de coupure en plein mot dans les en-têtes */ overflow-wrap:normal; padding-left:8px; padding-right:8px; } /* en-tête cliquable : renvoi vers la liste complète (services, autorités) */ table.list thead th a.th-link { color:inherit; text-decoration:underline dotted; text-underline-offset:3px; } table.list thead th a.th-link:hover { color:var(--blue); } /* tables très larges (moteurs) : défilement horizontal plutôt qu'écrasement. Sur un écran trop étroit, la barre native (fine, grise, escamotable) ne se voyait pas et le tableau semblait tronqué : on la rend épaisse, colorée et affichée en permanence, des deux côtés (Firefox et WebKit/Blink). */ .table-wrap.scroll-x { overflow-x:auto; scrollbar-color:var(--blue) var(--sky); } .table-wrap.scroll-x::-webkit-scrollbar { height:14px; } .table-wrap.scroll-x::-webkit-scrollbar-track { background:var(--sky); border-radius:0 0 var(--radius) var(--radius); } .table-wrap.scroll-x::-webkit-scrollbar-thumb { background:var(--blue); border:3px solid var(--sky); border-radius:999px; } .table-wrap.scroll-x::-webkit-scrollbar-thumb:hover { background:var(--blue-strong); } table.list.xwide { min-width:1560px; } /* dans une cellule, une puce ne doit jamais déborder sur la colonne voisine : les longs codes (n° de réception moteur) se coupent dans la puce */ table.list td .chip { white-space:normal; overflow-wrap:anywhere; } /* pastille de date : le libellé (« issued », « in force ») la rend plus large que sa colonne — elle doit pouvoir passer à la ligne */ table.list td .datepill { white-space:normal; max-width:100%; } /* lien vers un document : badge PDF cliquable (↗ pour une page web) */ .doc-badge { display:inline-block; font-size:9.5px; font-weight:800; letter-spacing:.04em; padding:2px 6px; border-radius:4px; background:#c0392b; color:#fff; text-decoration:none; vertical-align:middle; line-height:1.4; } a.doc-badge:hover { background:#96281b; } /* autre format qu'un PDF (la Commission publie aussi des .zip) : même forme, teinte neutre - le rouge reste au document à lire */ .doc-badge-file { background:var(--muted); } table.list tbody td { border-bottom:1px solid var(--border); } table.list tbody tr:last-child td { border-bottom:0; } table.list tbody tr:hover td { background:var(--row-hover); } .chip { display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.02em; background:var(--icon-bg); color:var(--icon-fg); border-radius:5px; padding:3px 7px; margin:1px 2px 1px 0; white-space:nowrap; } .chip-light { background:transparent; border:1px solid var(--border); color:var(--muted); font-weight:600; } /* Pastille « document » : bouton blanc portant le badge PDF. Le bouton est plus haut que les autres pastilles pour que le badge y respire et reste centré sur la hauteur du libellé. */ .chip.chip-doc { background:var(--surface); border:1px solid var(--border); color:var(--text); display:inline-flex; align-items:center; gap:7px; padding:5px 10px 5px 6px; font-size:12px; line-height:1.5; /* les intitulés de documents sont de vraies phrases : sur un écran étroit ils se replient au lieu de pousser la page hors cadre */ white-space:normal; max-width:100%; } .chip.chip-doc .doc-badge { line-height:1.3; padding:2px 6px; } /* lien vers une page web (et non un PDF) : globe, pendant du badge rouge */ .chip.chip-doc .web-ico { flex:none; display:block; } .chip.chip-doc:hover { border-color:var(--accent); color:var(--blue-strong); } /* Lien GIS (EuRIS) : c'est une page web, il porte donc le même globe que les autres liens web du site, centré dans la pastille claire. */ .chip.chip-web { display:inline-flex; align-items:center; gap:6px; } .chip.chip-web .web-ico { flex:none; display:block; } .datepill { display:inline-block; font-size:12.5px; font-variant-numeric:tabular-nums; background:var(--sky); color:var(--blue-strong); border-radius:5px; padding:3px 7px; white-space:nowrap; } .iso { font-size:11px; font-weight:700; letter-spacing:.04em; background:var(--icon-bg); color:var(--icon-fg); border-radius:4px; padding:3px 6px; } .state-head { display:flex; align-items:center; gap:10px; margin:26px 0 10px; } .state-head:first-of-type { margin-top:0; } .state-head b { font-size:16px; } /* filet « Autres États » : sépare CH / RS / GB des États membres de l'UE */ .state-sep { display:flex; align-items:center; gap:12px; margin:38px 0 2px; color:var(--muted); font-size:12.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; } .state-sep::before, .state-sep::after { content:""; flex:1; border-top:1px solid var(--border); } .empty { text-align:center; padding:34px 20px; color:var(--muted); font-size:14px; } /* Documents d'États tiers : chaque État tient dans une carte — le bloc mêle un texte long, des pastilles de documents et des fiches de contact. */ .ts-card { background:#fafcfe; border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 1px 2px rgba(16,60,100,.04); padding:18px 22px 22px; margin-bottom:18px; } :root[data-theme="dark"] .ts-card { background:var(--surface); } .ts-card .state-head { margin-top:0; } .ts-card .cards { margin-bottom:0; } /* rubriques encore sans donnée : titre resserré et message compact */ .section-slim { margin:18px 0 8px; } .section-slim + .empty { padding:14px 20px; } .hint { font-size:12.5px; color:var(--muted); margin:10px 2px; } /* cards for authorities etc. */ /* `min(320px,100%)` et non 320px : sur un écran de 360 px, la largeur minimale imposée dépassait la place disponible et faisait défiler la page latéralement. */ .cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr)); gap:14px; } /* cartes à contenu court (médecins agréés) : largeur bornée à ~400 px pour qu'une rangée incomplète ne s'étire pas sur toute la page */ .cards-snug { grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),320px)); } .card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px 18px; font-size:13.5px; } .card b.name { display:block; font-size:14.5px; margin-bottom:6px; } .card .addr { color:var(--muted); white-space:pre-line; margin-bottom:8px; } /* Adresse postale : le pictogramme la distingue des autres lignes grises de la fiche (nom anglais, téléphone, télécopie) qui partagent la classe .addr. */ /* `white-space:normal` sur le conteneur : il hérite sinon du `pre-line` de .card .addr, et le retour à la ligne qui sépare le pictogramme du texte dans le gabarit deviendrait une vraie coupure — l'adresse passait sous l'icône. */ .addr-post { display:flex; align-items:flex-start; gap:7px; white-space:normal; } .addr-post > span { min-width:0; white-space:normal; } /* Une sous-adresse (« a) … », « b) … ») par bloc, séparées par une ligne vide. Le `pre-line` ne vaut QUE là : il y préserve les retours à la ligne de l'adresse, sans que l'indentation du gabarit ne compte. */ .addr-block { display:block; white-space:pre-line; } .addr-block + .addr-block { margin-top:.85em; } /* Code ERDMS : aligné sur le TEXTE de l'adresse — même décalage que lui, soit la largeur du pictogramme (15px) plus l'écart (7px) — et en couleur, pour qu'on le distingue des lignes grises de la fiche. */ .erdms { padding-left:22px; margin:-4px 0 9px; } /* dans la vue en tableau, aucun pictogramme ne précède : pas de décalage */ table.list .erdms { padding-left:0; margin:6px 0 0; } .erdms-chip { display:inline-block; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.01em; color:var(--blue-strong); background:var(--sky); border:1px solid var(--accent); } .addr-post .addr-icon { width:15px; height:15px; flex:none; margin-top:2px; color:var(--blue); opacity:.75; } /* Un filet sépare la description de l'adresse lorsque les deux sont là ; sans description, il n'y a rien à séparer et le filet ne s'affiche pas. */ .card .lead-name + .addr-post { border-top:1px solid var(--border); padding-top:9px; } /* Adresses électroniques et sites web : sur un écran étroit, une adresse d'un seul tenant (alpha.omega.elektrotechnik@t-online.de) dépassait la carte et entraînait toute la page. Elle se coupe désormais où c'est nécessaire. */ .card a.mail, .card a.web { color:var(--blue); display:inline-block; margin-right:10px; max-width:100%; overflow-wrap:anywhere; } .card a.mail:hover, .card a.web:hover { text-decoration:underline; } /* En colonne étroite, une adresse électronique doit pouvoir se couper : en bloc insécable, elle basculait entière sous son picto. */ /* L'enveloppe et l'adresse formaient un seul texte : la coupure pouvait tomber sur l'espace qui les sépare, laissant le picto seul sur sa ligne. Deux éléments distincts : seule l'adresse se coupe, et ses lignes suivantes s'alignent sous elle. */ table.list a.mail, .card a.mail, td a[href^="mailto:"] { color:var(--blue); display:inline-flex; align-items:baseline; gap:.35em; max-width:100%; } table.list a.mail > span:last-child, .card a.mail > span:last-child, td a[href^="mailto:"] > span:last-child { min-width:0; overflow-wrap:anywhere; } table.list a.mail > .ic, .card a.mail > .ic, td a[href^="mailto:"] > .ic { flex:none; } table.list a.mail:hover { text-decoration:underline; } .card .comp { margin-top:8px; padding-top:8px; border-top:1px solid var(--border); } /* pagination (Laravel default markup) */ nav[role=navigation] { margin:16px 0; font-size:13.5px; } /* footer */ footer.site { margin-top:44px; background:var(--footer-bg); color:var(--footer-fg); padding:34px 0 24px; } footer.site .cols { display:flex; justify-content:space-between; gap:26px; flex-wrap:wrap; } footer.site .org { max-width:52ch; font-size:14px; } footer.site .org b { color:#fff; display:block; margin-bottom:6px; font-size:15px; } .partners { display:flex; align-items:center; gap:18px; flex-wrap:wrap; } .partners .plogo-img { height:46px; width:auto; display:block; opacity:.95; } .partners .plogo-chip { background:#fff; border-radius:6px; padding:5px 8px; display:inline-flex; } .partners .plogo-chip img { height:58px; width:auto; display:block; } footer .base { margin-top:22px; padding-top:16px; border-top:1px solid rgba(255,255,255,.14); font-size:13px; opacity:.85; } @media (max-width:1000px) { .bricks { grid-template-columns:repeat(2,1fr); } } @media (max-width:660px) { .bricks { grid-template-columns:1fr; } } /* Écrans étroits : les lignes deviennent des cartes libellé/valeur, jamais de défilement latéral. Le seuil est à 1150 px : le tableau des programmes est dessiné pour une largeur de contenu de ~1130 px (--maxw), en dessous ses sept colonnes tombent sous 150 px et coupent les mots en plein milieu (« Wirtschaftskam mer »), y compris sur une tablette en paysage. */ @media (max-width:1150px) { table.list { display:block; } table.list thead { display:none; } table.list tbody, table.list tr, table.list td { display:block; width:auto; } table.list tbody tr { border-bottom:1px solid var(--border); padding:10px 14px; } table.list tbody tr:last-child { border-bottom:0; } table.list tbody td { border:0; padding:3px 0; display:flex; gap:10px; align-items:baseline; } table.list tbody td::before { content:attr(data-label); flex:0 0 40%; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); } table.list tbody td:empty { display:none; } /* en cartes, une donnée absente n'a pas besoin d'une ligne « libellé — » */ table.list tbody td:has(> .nodata:only-child) { display:none; } /* en cartes, la largeur mini du tableau moteurs n'a plus lieu d'être : elle forçait 1560 px et donc un défilement latéral que ce mode doit éviter. */ table.list.xwide { min-width:0; } .table-wrap.scroll-x { overflow-x:visible; } /* la suite des règles de ce mode est en fin de feuille : elles doivent passer APRÈS les hauteurs de calage définies plus bas. */ } @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none !important; } } /* pagination */ .pager { display:flex; gap:4px; margin:16px 0 4px; flex-wrap:wrap; } .pg { min-width:34px; height:34px; padding:0 10px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:7px; background:var(--surface); color:var(--text); font-size:13.5px; } a.pg:hover { color:var(--blue); border-color:var(--accent); } .pg.on { background:var(--blue); border-color:var(--blue); color:#fff; font-weight:700; } .pg.disabled, .pg.dots { color:var(--muted); background:transparent; border-color:transparent; } /* global search in the sticky header */ .gsearch { position:relative; margin-left:auto; } .gsearch input { width:230px; } .gsearch input { font:inherit; font-size:13.5px; padding:8px 12px 8px 34px; width:250px; max-width:56vw; border:1px solid var(--field-bd); border-radius:999px; background:var(--field-bg); color:var(--text); } .gsearch input:focus { outline:2px solid var(--accent); border-color:var(--accent); } .gsearch svg { position:absolute; left:11px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--muted); pointer-events:none; } /* Résultats de recherche qui sont des RUBRIQUES et non des fiches : mêmes cartes, mais teintées comme les liens de navigation du site. */ .card-page { background:linear-gradient(160deg,var(--sky) 0%,var(--surface) 70%); border-color:var(--accent); } .card-page b.name { color:var(--blue-strong); } .card-page .addr { color:var(--blue); } .card-page:hover { box-shadow:var(--shadow-lg); } /* Rubriques et catégories partagent la même carte bleue de navigation : ce qui les distingue est une petite étiquette (Rubrique / Catégorie), pas la couleur, pour ne pas réinventer un code chromatique là où la charte n'en a pas. */ .card-tag { display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--blue-strong); background:var(--surface); border:1px solid var(--accent); border-radius:999px; padding:2px 9px; margin-bottom:9px; } /* documents notifiés dans la bulle d'un tracé : mêmes pastilles que la fiche */ .ww-popup-links { display:flex; flex-wrap:wrap; gap:4px; margin:6px 0 2px; } /* Bandeau d'aperçu interne : ambré comme les avertissements, pour qu'on ne confonde jamais une rubrique masquée avec une rubrique publiée. */ .preview-note { margin:0 0 12px; padding:8px 12px; border-radius:8px; background:var(--warn-bg); border:1px solid var(--warn-bd); color:var(--warn-fg); font-size:13px; } .preview-note a { color:var(--warn-fg); text-decoration:underline; font-weight:600; } /* cross-reference links + anchor highlight */ a.xref { color:var(--blue); } a.xref:hover { text-decoration:underline; } a.xref-sm { font-size:12px; color:var(--muted); } a.xref-sm:hover { color:var(--blue); } tr[id], .card[id] { scroll-margin-top:150px; } tr:target td { background:var(--sky) !important; } .card:target { outline:2px solid var(--accent); background:var(--sky); } a.card { display:block; } a.card:hover { border-color:var(--accent); } a.card:hover .name { color:var(--blue); } /* transitional-provisions tool (page 8088) */ .dt-notice { background:var(--warn-bg); border:1px solid var(--warn-bd); color:var(--warn-fg); border-radius:var(--radius); padding:12px 16px; font-size:13px; margin:0 0 18px; } .dt-form { padding:20px 22px; } .dt-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px 22px; } .dt-form .field { display:flex; flex-direction:column; gap:5px; margin:0; border:0; padding:0; } .dt-form .field > span { font-size:13px; font-weight:600; color:var(--muted); } .dt-form .field .req { color:#c0392b; font-style:normal; cursor:help; } .dt-form input[type=text], .dt-form input[type=date], .dt-form select { font:inherit; font-size:14px; padding:9px 11px; border:1px solid var(--field-bd); border-radius:7px; background:var(--field-bg); color:var(--text); width:100%; } .dt-checks { gap:6px; } .dt-checks label { display:flex; gap:8px; align-items:flex-start; font-size:14px; font-weight:400; color:var(--text); } .dt-checks input { margin-top:3px; accent-color:var(--blue); } .dt-check-row { display:grid; grid-template-columns:repeat(2,1fr); gap:6px 18px; } .dt-help { font-size:12.5px; color:var(--muted); margin:2px 0 6px; } .dt-small { font-size:12px; color:var(--muted); margin:10px 0 0; line-height:1.5; } .span-all { grid-column:1 / -1; } .dt-actions { display:flex; justify-content:flex-end; gap:10px; border-top:1px solid var(--border); margin-top:16px; padding-top:16px; } /* Avertissement (et non refus) : même gabarit que .dt-error, teinte d'alerte. Sert à la dernière visite antérieure au 1.1.2020 — la recherche a lieu, seule sa portée est réduite. */ .dt-warn { background:var(--warn-bg); border:1px solid var(--warn-bd); color:var(--warn-fg); border-radius:8px; padding:11px 14px; font-size:14px; font-weight:600; margin:16px 0 0; } .dt-warn[hidden] { display:none; } /* Dans le formulaire, l'avertissement est une case de la grille : il se cale en bas de sa rangée pour venir à hauteur du champ de date qu'il commente, et s'allège (le bandeau pleine largeur ne conviendrait pas ici). */ .dt-form .dt-warn { margin:0; align-self:end; font-size:12.5px; font-weight:600; line-height:1.4; padding:9px 12px; } /* le champ concerné se signale dans la même teinte, sans crier à l'erreur */ .dt-date-early { border-color:var(--warn-bd) !important; background:var(--warn-bg) !important; } .dt-error { background:var(--danger-bg,#fdecec); border:1px solid var(--danger-bd,#f2c9c9); color:var(--danger-fg,#9d2a2a); border-radius:8px; padding:11px 14px; font-size:14px; font-weight:600; margin:16px 0 0; } .dt-results { margin-top:26px; } .dt-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-bottom:14px; } .dt-summary div { background:var(--surface); padding:10px 14px; } .dt-summary dt { font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin:0 0 3px; font-weight:600; } .dt-summary dd { margin:0; font-size:14px; font-weight:600; } .dt-summary dd.big { font-size:22px; color:var(--blue); } /* rappel des critères : les deux cases groupées comme dans le formulaire, libellé à côté de la case, non cliquables */ .dt-summary dd.crit-check { display:flex; flex-direction:column; gap:5px; pointer-events:none; } .dt-summary dd.crit-check label { display:flex; align-items:flex-start; gap:7px; font-size:13px; font-weight:600; line-height:1.35; } .dt-summary dd.crit-check input { width:16px; height:16px; flex:0 0 auto; accent-color:var(--blue); margin:1px 0 0; } .dt-toolbar { display:flex; justify-content:flex-end; margin-bottom:12px; } .dt-sort { background:none; border:0; font:inherit; font-weight:700; font-size:12px; color:inherit; cursor:pointer; padding:0; display:inline-flex; align-items:center; gap:5px; text-align:left; } .dt-sort:hover { color:var(--blue); } /* Même repère de tri que les tableaux du reste du site : « ⇅ » au repos, la flèche du sens une fois la colonne triée. Le glyphe vient de la feuille de style pour que les deux implémentations ne puissent plus diverger. */ .dt-sort .arr { display:inline-block; font-size:11px; line-height:1; opacity:.5; margin-left:5px; vertical-align:baseline; } .dt-sort .arr::before { content:"⇅"; } .dt-sort.on .arr { opacity:1; color:var(--blue); font-size:10px; } .dt-sort.on.asc .arr::before { content:"▲"; } .dt-sort.on.desc .arr::before { content:"▼"; } .dt-table td.subject, .dt-table td:nth-child(4), .dt-table td:nth-child(7) { min-width:0; } .chip.chip-r { background:var(--rhin-r-bg); color:var(--rhin-r-fg); border:1px solid var(--border); } .chip.chip-nor { background:var(--rhin-nor-bg); color:var(--rhin-nor-fg); border:1px solid var(--border); } .chip.chip-both { background:var(--rhin-both-bg); color:var(--rhin-both-fg); border:1px solid var(--border); } /* « CHAPTER 19 » : le numéro reste collé au mot, jamais seul à la ligne */ .dt-table td:first-child .chip { white-space:nowrap; } /* boutons flottants ↑/↓ des longues listes de résultats (outil DT) */ .dt-scrollnav { position:fixed; right:18px; bottom:24px; display:flex; flex-direction:column; gap:8px; z-index:40; } .dt-scrollnav button { width:42px; height:42px; border-radius:50%; border:1px solid var(--border); background:var(--surface); color:var(--blue); font-size:17px; font-weight:700; cursor:pointer; box-shadow:var(--shadow-lg); display:flex; align-items:center; justify-content:center; } .dt-scrollnav button:hover { background:var(--sky); border-color:var(--accent); } /* L'attribut `hidden` doit l'emporter sur les `display:flex` ci-dessus : une regle d'auteur bat celle du navigateur, si bien que les fleches restaient affichees en permanence. Selecteurs plus specifiques, donc prioritaires. */ .dt-scrollnav[hidden], .dt-scrollnav button[hidden] { display:none; } .dt-updated { text-align:right; font-size:12.5px; color:var(--muted); margin:14px 0 0; } @media (max-width:760px){ .dt-grid { grid-template-columns:1fr; } .dt-check-row { grid-template-columns:1fr; } } /* donnée absente : un tiret discret plutôt qu'une cellule vide */ .nodata { color:var(--muted); opacity:.65; } /* equipment: permitted ticks + info dots */ td.ok-cell, th.ok-cell { text-align:center; } /* coche / croix : mêmes heroicons que l'admin. Une croix rouge explicite vaut mieux qu'une case vide, qui se confond avec une donnée manquante. */ .boolicon { width:19px; height:19px; vertical-align:middle; } .boolicon.is-yes { color:var(--ok-fg); } .boolicon.is-no { color:var(--danger-fg); } /* jaune = info : distinct du bleu des liens et du rouge du badge PDF. Comme sur le site d'origine, le texte complet s'affiche au clic/survol. */ .info-dot { display:inline-block; position:relative; font-size:13.5px; font-weight:800; letter-spacing:.04em; padding:4px 11px; border-radius:6px; background:var(--warn-bg); color:var(--warn-fg); border:1px solid var(--warn-bd); cursor:help; vertical-align:middle; line-height:1.4; margin-left:3px; font-style:normal; } .info-pop { display:none; position:absolute; z-index:30; top:calc(100% + 6px); right:-8px; min-width:220px; max-width:320px; background:var(--surface); color:inherit; border:1px solid var(--border); border-radius:8px; box-shadow:var(--shadow); padding:8px 10px; font-size:12px; font-weight:400; letter-spacing:0; text-align:left; white-space:normal; overflow-wrap:normal; } .info-dot:hover .info-pop, .info-dot:focus .info-pop { display:block; } .datepill.past { background:var(--danger-bg,#fdecec); color:var(--danger-fg,#9d2a2a); } /* programmes de formation : deux natures de date, différenciées par couleur — entrée en vigueur (bleu, pastille standard) / date d'émission (ambre). Les libellés de l'en-tête de colonne reprennent le même code couleur. */ .datepill.dp-issue { background:var(--warn-bg); color:var(--warn-fg); } th .dtl-force { color:var(--blue-strong); } th .dtl-issue { color:var(--warn-fg); } /* Textes de programmes de formation : les retours à la ligne des documents sources portent du sens (une ligne vide sépare deux sources fusionnées). */ .wsp, .prog-contact { white-space:pre-line; } /* Cellule à deux blocs (données du PDF puis du document de contacts) : le second est plaqué en bas, si bien qu'il s'aligne d'une colonne à l'autre. `height:1px` sur la cellule donne au conteneur une hauteur de référence. */ table.list td { height:1px; } .cellstack { display:flex; flex-direction:column; height:100%; } /* Un très léger pointillé marque la frontière entre les deux sources : au- dessus le PDF des programmes, en dessous le document de contacts. Il court sur toute la largeur de la cellule, à la même hauteur d'une colonne à l'autre puisque les blocs rapportés sont calés ensemble. */ .cell-add { margin-top:auto; padding-top:9px; position:relative; } .cell-add::before { content:""; position:absolute; top:4px; left:0; right:0; border-top:1px dotted var(--border); } /* renvoi vers le simulateur : bloc à part dans la pile, mais la pastille garde la largeur de son texte au lieu de s'étirer sur toute la cellule */ .cellstack > .prog-xref { align-self:flex-start; margin-top:4px; } /* éléments appariés : une qualification et son modèle de diplôme, chacun sur sa propre bande pour que le calage puisse les faire coïncider */ .pair-q, .pair-m { display:block; white-space:pre-line; } .prog-contact { margin-top:4px; line-height:1.4; } .auth-org { line-height:1.35; } .auth-addr { margin-top:3px; line-height:1.35; } /* adresses nues du texte source : cliquables, et coupées si trop longues */ a.autolink { color:var(--blue); text-decoration:underline; overflow-wrap:anywhere; } /* adresse citée par la source mais qui ne répond plus : lisible, non cliquable */ .link-dead { color:var(--muted); opacity:.75; overflow-wrap:anywhere; cursor:help; text-decoration:line-through; } /* legal-basis link under Phase / test standard */ .legal-basis { margin-top:3px; font-size:12px; } .legal-basis a { color:var(--blue); } .legal-basis a:hover { text-decoration:underline; } /* test-site warning banner */ .test-banner { background:#1e7e45; color:#fff; font-style:italic; font-size:13px; font-weight:600; letter-spacing:.01em; padding:11px 16px 9px 26px; line-height:1.45; } .test-banner a { color:#fff; text-decoration:underline; } @media print { .test-banner { display:none; } } /* waterways cards */ .ww-cards .card { display:flex; flex-direction:column; gap:6px; } .ww-head { display:flex; gap:6px; flex-wrap:wrap; } .ww-km { font-size:13px; } .ww-km-label { color:var(--muted); font-weight:600; } .ww-links { display:flex; gap:6px; flex-wrap:wrap; margin-top:2px; padding-top:8px; border-top:1px solid var(--border); } /* waterways interactive map */ .ww-map { height:420px; margin-inline:auto; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); margin:0 0 8px; z-index:1; } /* Mention de la directive : pastille blanche, comme les autres étiquettes des fiches (demande 06/08). La couleur de domaine - orange pour les listes de la directive équipage - est passée à l'étiquette de catégorie, qui est ce que l'œil cherche d'abord. Le curseur d'aide signale l'infobulle. */ .chip-dir { background:transparent; color:var(--muted); font-weight:500; border:1px solid var(--border); cursor:help; } /* mini-map inside each waterway card */ /* non-linked list: is the state's network connected to another MS? */ /* Reseau relie / non relie : deux etats opposes, deux teintes. Le « non relie » emprunte les jetons d'alerte du site, il suit donc le theme sombre - ce que .chip-linked, code en dur, ne fait pas encore. */ .chip-linked { background:#e3f4e6; color:#1e6b34; } .chip-unlinked { background:var(--danger-bg); color:var(--danger-fg); } .ww-mini { height:120px; border:1px solid var(--border); border-radius:8px; margin:4px 0 2px; cursor:pointer; z-index:0; } .ww-mini:hover { border-color:var(--accent); } /* static mini-map: single OSM tile, point centred via server-side offsets */ .ww-mini { position:relative; overflow:hidden; background:#dce7ef; } /* a lake needs vertical room; a course reads fine in the flat strip */ .ww-mini-area, .ww-mini-tall { height:190px; } .ww-mini img { position:absolute; width:256px; height:256px; max-width:none; } .ww-dot { position:absolute; left:50%; top:50%; width:12px; height:12px; margin:-6px 0 0 -6px; background:var(--blue); border:2px solid #fff; border-radius:50%; box-shadow:0 1px 4px rgba(0,0,0,.35); } /* meme respiration au-dessus et EN DESSOUS : le bouton peut etre suivi d'un autre paragraphe (Pologne, Tchequie) ou fermer la fiche. */ .doctors-link { margin-top:12px; margin-bottom:12px; align-self:flex-start; font-size:13px; display:inline-flex; align-items:center; gap:7px; } .doctors-link .web-ico { flex:none; display:block; } .ww-mini-in { position:absolute; inset:0; transform-origin:50% 50%; } .ww-mini svg { position:absolute; pointer-events:none; } .ww-mini svg path { fill:none; stroke:#0e6db4; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; opacity:.85; } /* water bodies (lake, bay, lagoon) are closed outlines: fill them */ .ww-mini svg path.area { fill:rgba(47,149,216,.28); stroke-width:2; } /* context water: mentioned by the text but not part of the entry */ .ww-mini svg path.ctx { fill:rgba(140,146,152,.14); stroke:#7a7f86; stroke-width:1.6; stroke-dasharray:2 4; opacity:.95; } .ww-ctx-star { color:var(--muted); font-weight:600; margin-left:1px; } .ww-ctx-note { margin-top:4px; } /* an entry listing several waters: one map per water, folded away */ .ww-parts { margin:2px 0 4px; } .ww-parts > summary { cursor:pointer; font-size:12px; color:var(--blue); list-style:none; padding:3px 0; user-select:none; } .ww-parts > summary::-webkit-details-marker { display:none; } .ww-parts > summary::before { content:'▸ '; } .ww-parts[open] > summary::before { content:'▾ '; } .ww-parts > summary:hover { color:var(--blue-deep); text-decoration:underline; } .ww-part { font-size:11.5px; color:var(--muted); margin:2px 0 8px; } /* what the shape is, and where it comes from — under every map */ /* Provenance du tracé : c'est une légende de carte, pas le contenu de la liste. Italique et gris clair pour qu'aucun lecteur ne la prenne pour la donnée réglementaire, qui reste la seule à faire foi (demande 06/08). */ .ww-src { font-size:11.5px; line-height:1.35; color:var(--muted); margin:3px 0 2px; font-style:italic; opacity:.8; } .ww-src-label { font-style:normal; font-weight:600; letter-spacing:.02em; } .ww-none { font-style:italic; } /* dans la bulle, la légende garde l'italique : elle n'y est pas plus le contenu de la liste qu'ailleurs */ .leaflet-popup-content .ww-src { display:inline-block; margin:2px 0 0; } /* Popup de la carte : ses deux boutons etaient minuscules. 1. Le lien vers la fiche n'etait qu'un « ↓ ». Il devient une pastille libellee, de la hauteur d'un doigt, aux couleurs de l'outil. */ .ww-popup-goto { display:inline-flex; align-items:center; gap:7px; margin:8px 0 1px; padding:7px 13px; border-radius:999px; font-size:12.5px; font-weight:600; line-height:1.2; text-decoration:none; color:var(--blue); background:var(--sky); border:1px solid var(--accent); transition:background .15s ease, color .15s ease, border-color .15s ease; } .ww-popup-goto:hover, .ww-popup-goto:focus-visible { background:var(--blue); color:#fff; border-color:var(--blue); } .ww-popup-goto-ico { font-size:14px; line-height:1; transition:transform .15s ease; } .ww-popup-goto:hover .ww-popup-goto-ico { transform:translateY(2px); } /* 2. La croix de fermeture de Leaflet mesure 18x14 px en gris pale. On la porte a une cible de 30 px, bien contrastee. La feuille de Leaflet est chargee APRES celle-ci (dans le corps de la page) : il faut donc une specificite superieure a son « .leaflet-container a.… », d'ou le selecteur en trois classes plutot qu'un !important. */ .leaflet-container .leaflet-popup a.leaflet-popup-close-button { width:30px; height:30px; padding:0; top:4px; right:4px; border-radius:999px; font:20px/30px Tahoma, Verdana, sans-serif; color:var(--muted); background:transparent; transition:background .15s ease, color .15s ease; } .leaflet-container .leaflet-popup a.leaflet-popup-close-button:hover, .leaflet-container .leaflet-popup a.leaflet-popup-close-button:focus-visible { color:var(--blue); background:var(--sky); } /* le contenu ne doit pas passer sous la croix agrandie */ .leaflet-popup-content { margin-right:34px; } .chip-off { text-decoration: line-through; opacity: .45; } .brick.dom-blue { border-top: 4px solid #0e6db4; } .brick.dom-orange { border-top: 4px solid #e8871e; } .brick.dom-violet { border-top: 4px solid #7b5ea7; } /* Domaines de données du PDF d'architecture : bleu = prescriptions techniques, orange = qualifications d'équipage, violet = RIS (pastels du PDF). Le certificat rhénan garde sa classe propre mais porte le bleu technique, comme l'agrément d'équipement et les commissions de visite (demande 05/08). */ .cat-pills a.dom-tech { background:#dbedf2; border-color:#b5d5e2; } .cat-pills a.dom-crew { background:#fceadd; border-color:#efd0b5; } .cat-pills a.dom-ris { background:#edeaf2; border-color:#d3cce2; } .cat-pills a.dom-rhine { background:#dbedf2; border-color:#b5d5e2; } .cat-pills a.dom-tech.on { background:#0e6db4; border-color:#0e6db4; color:#fff; } .cat-pills a.dom-crew.on { background:#d97a14; border-color:#d97a14; color:#fff; } .cat-pills a.dom-ris.on { background:#7b5ea7; border-color:#7b5ea7; color:#fff; } .cat-pills a.dom-rhine.on { background:#0e6db4; border-color:#0e6db4; color:#fff; } .chip.dom-tech { background:#dbedf2; } .chip.dom-crew { background:#fceadd; } .chip.dom-ris { background:#edeaf2; } .chip.dom-rhine { background:#dbedf2; } /* Mode nuit : les pastels clairs du PDF rendaient les libellés illisibles — fonds sombres teintés par domaine, texte éclairci, sélection inchangée. */ :root[data-theme="dark"] .cat-pills a.dom-tech { background:#13304a; border-color:#28577e; color:#9fcbec; } :root[data-theme="dark"] .cat-pills a.dom-crew { background:#3a2712; border-color:#6e4a1e; color:#eec192; } :root[data-theme="dark"] .cat-pills a.dom-ris { background:#2b2440; border-color:#4c4270; color:#c9bce8; } :root[data-theme="dark"] .cat-pills a.dom-rhine { background:#13304a; border-color:#28577e; color:#9fcbec; } :root[data-theme="dark"] .cat-pills a.dom-tech.on { background:#0e6db4; border-color:#0e6db4; color:#fff; } :root[data-theme="dark"] .cat-pills a.dom-crew.on { background:#d97a14; border-color:#d97a14; color:#fff; } :root[data-theme="dark"] .cat-pills a.dom-ris.on { background:#7b5ea7; border-color:#7b5ea7; color:#fff; } :root[data-theme="dark"] .cat-pills a.dom-rhine.on { background:#0e6db4; border-color:#0e6db4; color:#fff; } :root[data-theme="dark"] .chip.dom-tech { background:#13304a; color:#9fcbec; } :root[data-theme="dark"] .chip.dom-crew { background:#3a2712; color:#eec192; } :root[data-theme="dark"] .chip.dom-ris { background:#2b2440; color:#c9bce8; } :root[data-theme="dark"] .chip.dom-rhine { background:#13304a; color:#9fcbec; } /* Categorie encore vide : gris et italique, la teinte de domaine s'efface pour qu'elle ne se lise pas comme une categorie alimentee. Le survol explique pourquoi (title sur le lien). Doit suivre les regles .dom-* : meme specificite, c'est l'ordre qui tranche. */ .cat-pills a.empty-cat { background:var(--util-bg); border-color:var(--border); color:var(--muted); font-style:italic; font-weight:500; } .cat-pills a.empty-cat:hover { color:var(--text); border-color:var(--muted); } :root[data-theme="dark"] .cat-pills a.empty-cat { background:var(--util-bg); border-color:var(--border); color:var(--muted); } :root[data-theme="dark"] .cat-pills a.empty-cat:hover { color:var(--text); border-color:var(--muted); } .brick.dom-tech { border-top:4px solid #0e6db4; } .brick.dom-crew { border-top:4px solid #d97a14; } .brick.dom-mixte { border-top:4px solid; border-image:linear-gradient(90deg,#0e6db4,#d97a14) 1; } .brick.dom-tri { border-top:4px solid; border-image:linear-gradient(90deg,#0e6db4,#d97a14,#7b5ea7) 1; } /* Repli « Compétences non couvertes » retiré (30/07) : les compétences non détenues s'affichent directement, barrées et estompées (.chip-off). Règles conservées ici, inertes, si le repli devait revenir. .comp-missing summary { cursor: pointer; font-size: 12px; color: #6b7280; margin-top: 6px; user-select: none; } .comp-missing summary:hover { color: #0e6db4; } .comp-missing[open] summary { margin-bottom: 4px; } */ .geo-scope { display: flex; gap: 5px; align-items: baseline; } .geo-scope .geo-pin { flex: none; color: #7b5ea7; transform: translateY(2px); } .cat-cell { font-size: 12px; font-weight: 600; color: var(--muted); } .chip-wrap { white-space: normal; text-align: left; line-height: 1.35; } .card .name, .card .addr { overflow-wrap: anywhere; } /* Base juridique (directive / article) : simple mention en gris léger — elle n'est plus cliquable ni filtrante, elle ne doit donc plus attirer l'œil comme une pastille bleue (30/07). */ .chip.chip-dir.chip-legal { background: transparent; border: 1px solid var(--border); color: var(--muted); font-weight: 500; } .legal-row { margin-top: 8px; } /* Compétences NON détenues : bloc secondaire en pied de fiche, sous la base juridique, détaché par le même filet léger que les autres sections (.card .comp fournit déjà border-top). Dans le tableau, la cellule des compétences porte le filet elle-même. */ .card .comp.comp-off { margin-top: 10px; } td .comp-off { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); } sup.legal-todo { color: #b45309; cursor: help; font-weight: 700; margin-left: 2px; } a.chip:hover { box-shadow: 0 0 0 2px rgba(14,109,180,.25); } .empty-states { margin: 26px 0 10px; padding: 12px 16px; border: 1px dashed var(--border); border-radius: var(--radius); color: var(--muted); font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .empty-states .iso { cursor: help; } /* Note du code ERDMS : même encadré que le bloc ci-dessus, mais en italique et sur toute la largeur — c'est un paragraphe, pas une suite de pastilles. */ .erdms-note { display: block; font-style: italic; } .erdms-note .empty-states-label { display: block; font-style: normal; font-weight: 700; color: var(--text); } .erdms-note p { margin: 6px 0 0; line-height: 1.6; } /* pagination + bouton « Tout afficher » sur la même ligne */ .pager-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:14px 0 6px; } .pager-row > nav, .pager-row > div:first-child { flex:1; min-width:0; } /* note dérogations (outil DT) : petite carte teintée pour la détacher du formulaire */ .dt-derog { margin:10px 0 0; padding:10px 14px; background:var(--sky); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:8px; font-size:12.5px; line-height:1.5; } /* Contenu réservé aux lecteurs d'écran : hors champ visuel, jamais masqué à l'assistance technique (display:none le rendrait muet). */ .sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; } /* mention annonçant que les listes déroulantes rechargent la page */ /* mention de service, pas une donnée : plus petite et en italique */ .filters-note { margin:0 0 6px; font-size:11.5px; font-style:italic; color:var(--muted); } /* Provenance et avertissement sous une liste : discret, sur toute la largeur, juste apres le tableau qu'ils qualifient. */ .src-note { margin:10px 0 0; font-size:11.5px; line-height:1.5; color:var(--muted); max-width:none; overflow-wrap:anywhere; } .src-note a { color:var(--blue); } .src-note a:hover { text-decoration:underline; } /* Tri des colonnes : le libellé est un vrai bouton (focusable, activable au clavier) qui garde l'apparence d'un en-tête ; la flèche indique le sens. */ table.list thead th.sortable { user-select:none; padding:0; } table.list thead th.sortable .th-sort { all:unset; box-sizing:border-box; display:block; width:100%; /* mêmes marges intérieures que les autres cellules : les colonnes gardent leur largeur d'origine */ padding:9px 12px; cursor:pointer; font:inherit; color:inherit; text-align:left; } table.list thead th.sortable .th-sort:hover { color:var(--blue); } table.list thead th.sortable .th-sort:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; border-radius:4px; } /* la flèche suit le dernier mot au lieu d'être plaquée à droite : en colonne étroite, elle chevauchait le libellé sur plusieurs lignes */ table.list thead th.sortable .th-sort::after { content:"⇅"; display:inline-block; font-size:11px; line-height:1; opacity:.5; margin-left:5px; vertical-align:baseline; } table.list thead th.sort-asc .th-sort::after { content:"▲"; font-size:10px; line-height:1; opacity:1; color:var(--blue); } table.list thead th.sort-desc .th-sort::after { content:"▼"; font-size:10px; line-height:1; opacity:1; color:var(--blue); } /* --- datepicker localise porte de l ancien site (outil DT) --- */ /* Localized date field: masked text input + calendar button that opens the language-specific JS calendar popup (.dt-cal). */ .dt-date-field { display: inline-flex; align-items: stretch; gap: 4px; } .dt-page .dt-date-visible { width: 130px; } .dt-page .dt-date-visible.dt-date-invalid { border-color: #e04a4a; box-shadow: 0 0 0 3px rgba(224, 74, 74, 0.14); } .dt-date-calendar { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; width: 36px; border: 1px solid #b7c7d6; border-radius: 4px; background: #eef4fa; color: #334e68; cursor: pointer; padding: 0; } .dt-date-calendar:hover { background: #dfeaf4; } .dt-date-calendar-icon { font-size: 15px; line-height: 1; pointer-events: none; } /* Localized calendar popup (appended to ). */ .dt-cal { position: absolute; z-index: 9999; width: 250px; padding: 10px; background: #ffffff; border: 1px solid #b7c7d6; border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); font-family: Arial, Verdana, sans-serif; font-size: 13px; color: #334e68; } .dt-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .dt-cal-selects { display: flex; flex: 1; gap: 4px; justify-content: center; margin: 0 4px; } .dt-cal-month, .dt-cal-year { font-family: inherit; font-size: 12px; color: #334e68; background: #ffffff; border: 1px solid #b7c7d6; border-radius: 4px; padding: 2px 4px; cursor: pointer; } .dt-cal-month { flex: 1 1 auto; min-width: 0; } .dt-cal-nav { border: 0; background: transparent; color: #00afeb; cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 8px; border-radius: 4px; } .dt-cal-nav:hover { background: #eef4fa; } .dt-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .dt-cal-wd { text-align: center; font-size: 11px; color: #8aa0b4; padding: 2px 0; } .dt-cal-day { border: 0; background: transparent; color: #334e68; cursor: pointer; font-size: 12px; padding: 6px 0; border-radius: 4px; } .dt-cal-day:hover { background: #eef4fa; } .dt-cal-oom { color: #c2ccd6; } .dt-cal-today-day { font-weight: bold; box-shadow: inset 0 0 0 1px #b7c7d6; } .dt-cal-sel, .dt-cal-sel:hover { background: #00afeb; color: #ffffff; } .dt-cal-foot { display: flex; justify-content: space-between; margin-top: 8px; } .dt-cal-clear, .dt-cal-today { border: 0; background: transparent; color: #00afeb; cursor: pointer; font-size: 12px; padding: 4px 6px; border-radius: 4px; } .dt-cal-clear:hover, .dt-cal-today:hover { background: #eef4fa; } .dt-chip, .dt-date-pill { background: #eaf7fc; border: 1px solid #c8eaf6; border-radius: 999px; color: #123660; display: inline-block; font-size: 11px; font-weight: bold; line-height: 1.2; padding: 4px 8px; white-space: nowrap; } .dt-date-pill { background: #ffffff; border-color: #dce7ef; color: #52687a; font-weight: normal; } .dt-date-field { display: flex; width: 100%; } .dt-page .dt-date-visible { flex: 1 1 auto; width: auto; } .dt-date-calendar { flex: 0 0 auto; } /* point de contact de l'outil DT */ .dt-contact { font-size:12.5px; color:var(--muted); margin:-6px 0 16px; } .dt-contact a { color:var(--blue); } /* -------------------------------------------------------------------------- Filtres de colonne des deux dates de l'outil DT (« premier certificat avant », « délai »), portés de l'ancien site : un arbre année > mois > jour ouvert depuis l'en-tête. Le panneau est déplacé dans par le script — les sont collants et l'y enfermeraient — d'où le position:absolute. -------------------------------------------------------------------------- */ th.dt-filterable { position:relative; } th.dt-filterable .dt-filter-toggle { display:inline-flex; align-items:center; gap:5px; margin-top:5px; padding:3px 8px; font:inherit; font-size:11px; font-weight:700; line-height:1.2; cursor:pointer; color:var(--blue); background:var(--surface); border:1px solid var(--border); border-radius:4px; } th.dt-filterable .dt-filter-toggle::before { content:""; display:inline-block; border-left:4px solid transparent; border-right:4px solid transparent; border-top:6px solid currentColor; } th.dt-filterable .dt-filter-toggle:hover { border-color:var(--blue); background:var(--sky); } /* une colonne effectivement filtrée doit se voir d'un coup d'œil */ th.dt-filterable .dt-filter-toggle.on { background:var(--blue); border-color:var(--blue); color:#fff; } .dt-date-filter-panel { position:absolute; z-index:60; width:262px; min-width:230px; max-width:92vw; max-height:44vh; overflow:auto; padding:8px 10px; text-align:left; font-weight:400; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:8px; box-shadow:var(--shadow-lg); } .dt-date-filter-panel[hidden] { display:none; } .dt-filter-toolbar { display:flex; justify-content:flex-end; margin:-2px -4px 6px; padding-bottom:6px; border-bottom:1px solid var(--border); } .dt-filter-reset { padding:4px 10px; font:inherit; font-size:11px; font-weight:600; line-height:1; cursor:pointer; color:#fff; background:var(--blue); border:1px solid var(--blue); border-radius:4px; } .dt-filter-reset:hover { background:var(--blue-strong); border-color:var(--blue-strong); } .dt-filter-option { display:flex; align-items:center; justify-content:space-between; gap:6px; min-height:28px; margin:0; padding:4px 6px; border-radius:4px; white-space:nowrap; font-size:13px; } .dt-filter-option:hover { background:var(--row-hover); } .dt-filter-option label { flex:1; margin:0; cursor:pointer; display:flex; align-items:center; gap:6px; } .dt-filter-option input[type="checkbox"] { width:15px; height:15px; margin:0; flex:0 0 auto; accent-color:var(--blue); } /* trois niveaux, du plus marqué au plus discret : année, mois, jour */ .dt-filter-year { margin:3px 0; padding:5px 8px; font-weight:700; background:var(--thead-bg); border:1px solid var(--border); border-radius:5px; } .dt-month-group { margin:2px 0 4px 14px; } .dt-month-group[hidden] { display:none; } .dt-month-group > .dt-filter-option { margin:2px 0; padding:5px 8px; font-weight:600; background:var(--sky); border:1px solid var(--border); border-radius:5px; } .dt-day-group { margin:2px 0 2px 14px; } .dt-day-group[hidden] { display:none; } .dt-filter-date { margin:3px 0; padding:5px 8px; background:var(--surface); border:1px solid var(--border); border-radius:4px; } .dt-tree-toggle { width:32px; height:26px; margin-left:8px; padding:0; flex:0 0 auto; cursor:pointer; color:var(--blue); background:var(--surface); border:1px solid var(--border); border-radius:4px; } .dt-tree-toggle::before { content:"\25B8"; display:inline-block; font-size:15px; line-height:1; transition:transform .15s ease; } .dt-tree-toggle[data-expanded="1"]::before { transform:rotate(90deg); } .dt-tree-toggle:hover { background:var(--sky); border-color:var(--blue); } /* Chapeau d'une fiche issue d'une énumération : le nom de l'ensemble dont l'organisme fait partie (« Bulgarian Maritime Administration (…) »), posé au-dessus du nom propre, en retrait typographique. */ /* Description d'un organisme issu d'une cellule énumérée : même traitement que l'adresse qui la suit, sous le nom en gras. */ .lead-name { color:var(--muted); line-height:1.4; margin:2px 0 8px; } /* ========================================================================== Écrans étroits - fin de feuille à dessein Ces règles annulent des hauteurs de calage définies plus haut ; à spécificité égale, seule leur position en fin de fichier les fait gagner. ========================================================================== */ /* tablette et téléphone : les lignes deviennent des cartes empilées */ @media (max-width:1150px) { /* Le calage vertical des deux sources ne vaut que dans un vrai tableau : il repose sur `td { height:1px }` + `.cellstack { height:100% }`. En cartes, la cellule se réduisait à cette hauteur de référence (6 px) et toutes les lignes se chevauchaient. Ici les blocs se suivent, le pointillé gardant son rôle de séparateur entre les deux documents sources. */ table.list td { height:auto; } /* on garde le conteneur en flex : passé en bloc, les retours à la ligne du gabarit devenaient des lignes vides sous chaque valeur. Seule la hauteur de référence, propre au tableau, est neutralisée. */ .cellstack { height:auto; } .cell-add { margin-top:10px !important; } .pair-q, .pair-m { margin-top:0 !important; } /* le tableau de l'outil DT suit la même logique de cartes */ .dt-table td:first-child .chip { white-space:normal; } } /* téléphone : le libellé passe au-dessus de la valeur. À 40 % d'une largeur de 390 px, un intitulé comme « Diploma title or certificates awarded » tenait sur trois lignes et écrasait la donnée. */ /* Fenêtre trop basse pour le panneau : il se resserre - sans les phrases d'explication, les sept rubriques et l'outil tiennent d'un seul coup d'œil au lieu d'obliger à faire défiler. Deux cas seulement : en une colonne (téléphone) il faut ~700 px de haut, en deux colonnes (paysage) ~490 px. Un portable 1280x720 garde donc les explications. */ @media (max-width:820px) and (max-height:760px), (min-width:821px) and (max-height:560px) { /* seules les explications disparaissent */ .navmenu-item > span { display:none; } .navmenu-item { padding:8px 12px; } } /* En-tête replié : sur une seule ligne, la recherche est poussée à droite par `margin-left:auto`. Dès que l'en-tête passe à la ligne, elle restait seule et cadrée à droite pendant que « Homepage » et « Lists & tools » commençaient au bord gauche, en dessous. On donne sa propre ligne à la marque : la recherche descend alors sur la même ligne que les deux boutons et s'aligne sur eux. */ @media (max-width:1150px) { header.site .wrap { gap:10px 12px; } .brand { flex:1 0 100%; } .gsearch { margin-left:0; flex:1 1 140px; } .gsearch input { width:100%; max-width:none; } .mainnav { flex:0 0 auto; } } @media (max-width:560px) { table.list tbody tr { padding:12px 14px; } table.list tbody td { display:block; padding:5px 0; } table.list tbody td::before { display:block; margin-bottom:2px; } /* le récapitulatif de l'outil DT tenait sur deux colonnes de 160 px, où les intitulés se brisaient mot à mot : une colonne se lit mieux */ .dt-summary { grid-template-columns:1fr; } /* la carte d'ensemble occupait la moitié de l'écran avant la première voie */ .ww-map { height:300px; } /* cibles tactiles : les puces de langue étaient hautes de 25 px, difficiles à viser au doigt - surtout pour les utilisateurs âgés ou tremblants */ .lang-btn { padding:9px 12px; } .theme-btn { padding:9px 10px; } } /* Première ligne de la carte d'accueil : ce que le site est, au-dessus de la description des listes. */ .info-card .tagline { margin:0 0 6px; color:var(--muted); font-size:14.5px; font-weight:600; letter-spacing:.01em; } /* Surlignage jaune d'un texte d'attente, en clair comme en sombre. Le surlignage epouse le texte et se recoupe proprement s'il passe a la ligne. A retirer avec le une fois le texte redige. */ .placeholder { background:var(--placeholder-bg); color:var(--placeholder-fg); box-shadow:inset 0 0 0 1px var(--placeholder-bd); padding:2px 6px; border-radius:3px; -webkit-box-decoration-break:clone; box-decoration-break:clone; } /* Formules mathematiques ES-TRIN (outil des dispositions transitoires). Les sources Word officielles composent ces formules en Cambria Math. La base porte les vraies lettres du plan mathematique Unicode et un balisage minimal (, , , ) rendu par App\Support\MathText ; le meme balisage est interprete par SimplePdf pour l'export PDF. Les polices de repli couvrent les postes sans Cambria Math. */ .math { font-family:"Cambria Math","Latin Modern Math","STIX Two Math","XITS Math", "TeX Gyre Termes Math","Asana Math","Noto Sans Math","Segoe UI Symbol", "DejaVu Serif",serif; font-size:1.05em; } /* sub/sup par defaut decalent la ligne de base et dilatent l'interligne dans les cellules serrees du tableau DT : positionnement explicite, hauteur nulle. */ .math sub, .math sup { font-size:.7em; line-height:0; position:relative; vertical-align:baseline; } .math sub { bottom:-.28em; } .math sup { top:-.48em; } /* Radicande : le trait horizontal du radical prolonge le glyphe racine. */ .math .rad { border-top:1px solid currentColor; padding:.06em .1em 0 .05em; margin-left:-.04em; } /* Pages légales : même présentation que « Reconnaissance, équivalences et dérogations » — le titre de section hors de la carte, sur toute la largeur, et le texte dans une carte large. La colonne de 78ch calée à gauche qui précédait laissait la moitié de l'écran vide et paraissait resserrée. */ .legal-page .section-head { margin:34px 0 16px; } .legal-page .section-head:first-child { margin-top:0; } .legal-card { padding:22px 26px; font-size:14.5px; line-height:1.75; margin:0 0 6px; /* le texte cite des URL entières, sans espace ni tiret : sans cela elles débordent de l'écran sur téléphone */ overflow-wrap:anywhere; } .legal-card > :first-child { margin-top:0; } .legal-card > :last-child { margin-bottom:0; } .legal-card h3 { font-size:15.5px; margin:22px 0 8px; color:var(--blue-strong); } .legal-card p { margin:0 0 14px; } .legal-card ul { margin:0 0 16px; padding-left:22px; } .legal-card li { margin:5px 0; } .legal-card a { color:var(--blue); text-decoration:underline; text-underline-offset:2px; } .legal-card a:hover { color:var(--blue-strong); } /* Les mentions du pied de page, sur une ligne, séparées d'un filet discret. */ .footer.site .legal-links, footer.site .legal-links { display:flex; flex-wrap:wrap; gap:10px 18px; margin:14px 0 0; font-size:13px; } footer.site .legal-links a { color:#cfe2f2; text-decoration:underline; text-underline-offset:2px; } footer.site .legal-links a:hover { color:#ffffff; } /* Très petits écrans (iPhone SE et Android compacts, 320-400 px). La barre de service ne se replie pas : logo + quatre langues + thème sur une seule ligne. Avec l'espacement de 18 px et les puces de langue élargies sous 560 px pour le tactile, l'ensemble réclamait 380 px — la page débordait donc dès 360 px et il fallait la faire défiler latéralement. On resserre l'HORIZONTALE seulement : la hauteur des puces ne bouge pas, c'est elle qui fait la cible au doigt. Le filet séparateur disparaît, il ne sépare plus rien d'utile à cette largeur. */ @media (max-width:400px) { .wrap { padding:0 14px; } .util .wrap { gap:8px; } .lang-btn { padding:9px 7px; } .theme-sep { display:none; } /* Les pastilles ne se coupent jamais (white-space:nowrap) : celles qui portent une phrase — « Not linked to the navigable network of another MS », 294 px — depassaient donc l'ecran. On les laisse passer a la ligne ici seulement. Les pastilles de l'outil DT gardent leur nowrap, leur regle est plus specifique. */ .chip { white-space:normal; } } /* Source officielle des risques spécifiques, en pied de la page des voies navigables : une mention de provenance, pas un encadré — le trait à gauche la rattache au contenu sans l'imiter. */ .ww-official-source { margin:26px 0 4px; padding:12px 0 12px 14px; font-size:13px; color:var(--muted); border-left:3px solid var(--accent); line-height:1.55; } .ww-official-source > b { display:block; margin-bottom:6px; color:var(--text); font-size:13.5px; } /* Trois colonnes alignées : catégorie, page officielle, liste. max-content cale chaque colonne sur son plus long libellé — donc l'alignement tient dans les quatre langues sans largeur codée en dur. display:contents fait des enfants du
  • les cellules de la grille. */ .ww-official-source ul { margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(3, max-content); gap:5px 20px; align-items:baseline; } .ww-official-source li { display:contents; } .ww-official-source .ww-src-cat { font-weight:600; color:var(--text); } /* Sous 700 px trois colonnes ne tiennent plus : on empile, chaque source redevenant une ligne à part entière. */ @media (max-width:700px) { .ww-official-source ul { display:block; } .ww-official-source li { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 12px; margin:8px 0; } .ww-official-source .ww-src-cat { flex-basis:100%; } } .ww-official-source a { color:var(--blue); text-decoration:underline; text-underline-offset:2px; overflow-wrap:anywhere; } .ww-official-source a:hover { color:var(--blue-strong); } /* Chapeau d'une catégorie de voies navigables, au-dessus des fiches : il dit de quoi la liste est faite. Ton de commentaire, pas de titre. */ .ww-cat-intro { margin:0 0 18px; font-size:14px; line-height:1.6; color:var(--muted); max-width:80ch; }