/* Socle visuel commun des outils de outils.espayerne.ch.
*
* À charger AVANT la feuille propre à chaque outil, qui n'a plus qu'à définir
* son bandeau et son accent :
*
*
*
*
*
* Le bandeau porte l'identité de l'outil : bleu nuit pour les conseils, vert
* pour les examens. Tout le reste — encre, papier, filets, états — est commun,
* pour que les deux outils restent visiblement de la même famille.
*/
:root{
/* Base, identique partout */
--paper:#FAF8F2; --paper-alt:#F1ECE1;
--ink:#1E2A44; --ink-soft:#4B5768;
--rule:#DCD3BE;
--warn:#A8672B; --warn-bg:#F7ECDA;
--error:#A8433A; --error-bg:#F8E6E2;
--success:#3E7A52; --success-bg:#E8F1E9;
--info:#39597A; --info-bg:#E7EEF3;
/* Identité de l'outil — redéfinies dans sa feuille */
--bandeau:#1E2A44;
--accent:#2E6E62; --accent-deep:#1F4E45;
/* Typographie. Aucune police à empattements : les titres sont dessinés
comme le texte, seule la graisse les distingue. */
--titre:'IBM Plex Sans',system-ui,sans-serif;
--texte:'IBM Plex Sans',system-ui,sans-serif;
--mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
/* Icône du sélecteur de date, posée en masque pour prendre l'accent. */
--icone-calendrier:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.3 1.4v2.2M10.7 1.4v2.2M2 6.1h12M3.4 2.6h9.2a1.4 1.4 0 0 1 1.4 1.4v8.6a1.4 1.4 0 0 1-1.4 1.4H3.4A1.4 1.4 0 0 1 2 12.6V4a1.4 1.4 0 0 1 1.4-1.4z' fill='none' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
/* Échelle, reprise du planificateur : plus dense que l'ancienne */
--t-base:15px; --t-small:13.5px; --t-micro:11.5px;
/* La hauteur du bandeau collant, MESURÉE par lib/page/js/bandeau.js ;
zéro tant qu'aucun script ne l'a posée (l'accueil). */
--haut-bandeau:0px;
/* Couleurs de discipline : elles portent du sens et ne changent jamais
d'un outil à l'autre. */
--d-FRA:#3f6f9e; --d-MAT:#8a5560; --d-ALL:#5a7050;
--d-ANG:#7a5f96; --d-OS:#9a6b32; --d-OCOM:#4a7d80;
--b-FRA:#e4edf5; --b-MAT:#f4e8ea; --b-ALL:#e9efe6;
--b-ANG:#efeaf4; --b-OS:#f6eee1; --b-OCOM:#e5eff0;
}
*{box-sizing:border-box}
html,body{margin:0; padding:0}
/* `display:flex` ou `grid` posé par une feuille l'emporterait sinon sur
l'attribut `hidden` (§13). Écrit dans trois outils et l'accueil jusqu'au
07.10.2026 (§49) ; une fois, ici. */
[hidden]{display:none!important}
/* Les couleurs des OUTILS — une seule déclaration (§49, le 07.10.2026). Le
bandeau de chaque outil, les cartes de l'accueil et la grille des rôles de
l'Administration les lisent. Elles vivaient en trois copies, et une copie
oubliée a peint le nom des arrêts en blanc sur blanc (§13). TOUT OUTIL DE
portail_outils() DOIT AVOIR SA `--c-` ICI ; un contrôle de la suite
des arrêts le vérifie. */
:root{--c-conseils:#1E2A44; --c-examens:#2E6E62; --c-referentiel:#3C4658; --c-arrets:#4C2A3A}
/* LE DESSIN COMMUN DES OUTILS (§49, le 07.10.2026) — après l'harmonisation
sur le dessin des arrêts, ce qui était écrit à l'identique dans leurs
feuilles. Chaque outil garde la TAILLE de ses boutons : trois la posent par
`font:inherit`, une forme courte qui écraserait une taille venue d'ici.
L'accueil, qui a son propre dessin, pose tout ce que ces règles touchent ;
le style calculé de chaque page est identique avant et après. */
:root{--champ:#C4BBB1}
.brand{display:flex;flex-direction:column;line-height:1.2}
.brand-title{font-size:17px;font-weight:600}
.brand-sub{font-size:11.5px;color:var(--bandeau-sous)}
.nav-sep{width:1px;height:20px;margin:0 7px;background:rgba(255,255,255,.28)}
button{cursor:pointer;border-radius:5px;border:1px solid var(--champ);padding:6px 12px}
button:disabled{opacity:.45;cursor:default}
/* Le bouton plein, à la couleur de l'outil (son accent), 1 px de moins (§15).
Les arrêts n'ont pas de `.primary` : leur bouton plein est `.fort`. */
button.primary{font-weight:600;background:var(--accent);color:#fff;border-color:var(--accent);padding:5.5px 15px}
button.primary:hover:not(:disabled){background:var(--accent-deep);border-color:var(--accent-deep)}
/* Les panneaux repliables (`details.repli`) — les examens et l'Administration
(§21). Le marqueur natif devient un chevron, le titre reste un `h2`. Ce que
chaque outil y ajoute (espacement, bordure) reste dans sa feuille. */
details.repli[open] > summary{margin-bottom:10px}
details.repli > summary::-webkit-details-marker{display:none}
details.repli > summary::before{content:"\25B8";color:var(--muted);font-size:13px;
line-height:1;transform:translateY(-1px)}
details.repli[open] > summary::before{content:"\25BE"}
details.repli > summary:hover h2{color:var(--accent)}
body{
background:var(--paper); color:var(--ink);
font-family:var(--texte); font-size:var(--t-base); line-height:1.5;
font-variant-numeric:tabular-nums;
}
h1,h2,h3,h4{font-family:var(--titre); letter-spacing:-.01em; margin:0; font-weight:600}
code,.mono{font-family:var(--mono); font-size:var(--t-micro)}
a{color:var(--accent-deep)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
/* Le titre du bandeau de chaque outil ramène à l'accueil, `/`, depuis le
21.09.2026. Un lien sur le bandeau prendrait sinon l'accent du socle — sur un
bandeau de la même couleur : le piège du 09.09.2026 (§13). */
a.brand{color:inherit; text-decoration:none}
a.brand:hover .brand-title{text-decoration:underline; text-underline-offset:3px}
a.brand:focus-visible{outline:2px solid #fff; outline-offset:3px; border-radius:2px}
@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}
/* ─────────────────────────── Champs de date ────────────────────────────────
* Le contrôle natif est la seule commande de formulaire que le navigateur
* dessine à sa guise. Sa boîte obéit à la feuille de l'outil, mais son icône
* de calendrier reste celle du système : noire, épaisse, étrangère au reste.
* On la remplace par un masque coloré à l'accent, et on resserre les segments
* internes pour que le champ pèse le même poids visuel qu'un champ de texte.
*
* Ce qu'aucune feuille de style ne peut changer : le FORMAT affiché suit la
* locale du NAVIGATEUR, pas le `lang` de la page. Un poste configuré en
* anglais montrera 06/01/2027 là où un poste suisse montre 01.06.2027.
* ────────────────────────────────────────────────────────────────────────── */
input[type="date"]{
color-scheme:light; /* le panneau du calendrier reste clair */
font-family:var(--texte);
font-variant-numeric:tabular-nums; /* les chiffres ne dansent pas en changeant */
}
input[type="date"]::-webkit-datetime-edit{padding:0}
input[type="date"]::-webkit-datetime-edit-fields-wrapper{padding:0}
input[type="date"]::-webkit-datetime-edit-text{color:var(--ink-soft); padding:0 1px}
input[type="date"]::-webkit-datetime-edit-day-field:focus,
input[type="date"]::-webkit-datetime-edit-month-field:focus,
input[type="date"]::-webkit-datetime-edit-year-field:focus{
background:var(--accent); color:#fff; border-radius:2px; outline:none;
}
input[type="date"]::-webkit-calendar-picker-indicator{
width:14px; height:14px; padding:0; margin-left:8px; cursor:pointer; opacity:.65;
background-color:var(--ink-soft);
-webkit-mask:var(--icone-calendrier) center/contain no-repeat;
mask:var(--icone-calendrier) center/contain no-repeat;
transition:opacity .12s ease, background-color .12s ease;
}
input[type="date"]:hover::-webkit-calendar-picker-indicator{opacity:1}
input[type="date"]:focus::-webkit-calendar-picker-indicator{
background-color:var(--accent); opacity:1;
}
input[type="date"]:disabled{color:var(--ink-soft); background:var(--paper-alt)}
input[type="date"]:disabled::-webkit-calendar-picker-indicator{opacity:.3; cursor:default}
@media (prefers-reduced-motion:reduce){
input[type="date"]::-webkit-calendar-picker-indicator{transition:none}
}
/* Le bandeau de chaque page reste en haut de l'écran au défilement — Pierre,
* le 29.09.2026. Les conseils et les examens le faisaient déjà chacun chez
* soi ; l'Administration, les arrêts et l'accueil non. Sa hauteur est mesurée
* par lib/page/js/bandeau.js (`--haut-bandeau`) : ce qu'on fait défiler
* jusqu'à l'écran s'arrête sous lui, pas derrière. */
header{position:sticky;top:0;z-index:30}
html{scroll-padding-top:calc(var(--haut-bandeau,0px) + 8px)}