@font-face {
  font-family: 'Fraunces'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url('/polices/fraunces-latin.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  color-scheme: light;
  --fond: #fbfaf8; --carte: #ffffff; --fond-doux: #f2f0ec; --fond-bande: #f6f4f0;
  --encre: #17171a; --encre-douce: #5f5c55; --encre-tres-douce: #6f6b64;
  --trait: #ddd8d0; --trait-fort: #b9b2a7;
  --accent: #1e5f74; --accent-doux: #e4eef1; --sur-accent: #ffffff;
  --alerte: #8a4b12; --alerte-doux: #fbf0e2; --favorable: #1d7a4a;
  --theme-decide: #e3ecf7; --theme-decide-encre: #22528c;
  --theme-argent: #e1f2ea; --theme-argent-encre: #1c6b4a;
  --theme-logement: #fbeadf; --theme-logement-encre: #9a4a1c;
  --theme-quotidien: #fdf3d6; --theme-quotidien-encre: #7c5a07;
  --theme-suivre: #ecebe7; --theme-suivre-encre: #4d4a44;
  --rayon: 10px;
  --sans: ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif;
  --titre: 'Fraunces', Georgia, 'Times New Roman', serif;
  --transition: 180ms cubic-bezier(0.2, 0, 0.2, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --fond: #15171a; --carte: #1d2024; --fond-doux: #23272b; --fond-bande: #191c1f;
    --encre: #eeedea; --encre-douce: #a5a199; --encre-tres-douce: #928e85;
    --trait: #343a40; --trait-fort: #4e555c;
    --accent: #7cc4d8; --accent-doux: #1d3238; --sur-accent: #15171a;
    --alerte: #e0a468; --alerte-doux: #2c2317; --favorable: #5fc28e;
    --theme-decide: #1d2a3a; --theme-decide-encre: #9cc2f0;
    --theme-argent: #18302a; --theme-argent-encre: #86d3b0;
    --theme-logement: #33241b; --theme-logement-encre: #f0b48e;
    --theme-quotidien: #322a14; --theme-quotidien-encre: #e8c86a;
    --theme-suivre: #26282b; --theme-suivre-encre: #c9c5bd;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); color: var(--encre); font: 400 15px/1.6 var(--sans); -webkit-text-size-adjust: 100%; }
a { color: var(--accent); text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cadre { max-width: 72rem; margin: 0 auto; padding: 0 1.1rem; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.evitement { position: absolute; left: .5rem; top: -3rem; z-index: 50; padding: .4rem .8rem; background: var(--accent); color: var(--sur-accent); border-radius: var(--rayon); }
.evitement:focus { top: .5rem; }
/* Le champ piège du formulaire d'essai : hors de l'écran, un robot le remplit, une personne ne le voit pas. */
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* L'en-tête : celui de rouages.fr, le mot « Pro » en plus, et le chemin du retour. */
.bandeau { border-bottom: 1px solid var(--trait); background: var(--carte); }
.bandeau-int { display: flex; align-items: center; gap: .6rem 1.2rem; padding-block: .7rem; flex-wrap: wrap; }
.marque { font-weight: 680; text-decoration: none; color: var(--encre); letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: .4rem; font-size: 1.05rem; }
.marque-logo { width: 1.45em; height: 1.45em; flex: none; fill: var(--accent); }
.marque-pro { font-size: .7rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--sur-accent); background: var(--accent); border-radius: 999px; padding: .05rem .5rem; }
.retour { font-size: .82rem; color: var(--encre-douce); text-decoration: none; border: 1px solid var(--trait); border-radius: 999px; padding: .15rem .7rem; }
.retour:hover, .retour:focus-visible { color: var(--accent); border-color: var(--accent); }
.bandeau nav { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.1rem; font-size: .88rem; }
.bandeau nav a { text-decoration: none; }
.bandeau nav a:hover { text-decoration: underline; }
.bandeau nav a[aria-current="page"] { color: var(--encre); font-weight: 600; }
.bandeau nav form { display: inline; margin: 0; }
.bandeau nav button { background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0; font: inherit; }
.bandeau nav button:hover { text-decoration: underline; }
.bandeau nav .connexion { border: 1px solid var(--accent); border-radius: 999px; padding: .2rem .8rem; }
@media (max-width: 640px) { .bandeau nav { margin-left: 0; width: 100%; } }

main.cadre { padding-top: 1.8rem; padding-bottom: 3rem; }
h1, h2, h3 { letter-spacing: -0.014em; }
h1 { font-family: var(--titre); font-weight: 640; letter-spacing: -0.02em; line-height: 1.12; font-optical-sizing: auto;
  font-size: clamp(1.7rem, 3.6vw, 2.3rem); margin: .2rem 0 .9rem; }
h2 { font-size: 1.15rem; margin: 2rem 0 .6rem; }
.mesure { max-width: 46rem; }
.discret { color: var(--encre-tres-douce); font-size: .88rem; }

/* Les grands chiffres : un nombre qui se lit d'un coup d'œil, sa légende dessous. */
.repertoire { columns: 22rem; column-gap: 2.5rem; padding-left: 1.2rem; }
.repertoire li { break-inside: avoid; margin-bottom: .3rem; }
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: .8rem; margin: 1.4rem 0; }
.chiffres div { background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); padding: .8rem 1rem; color: var(--encre-douce); font-size: .85rem; line-height: 1.35; }
.chiffres strong { display: block; color: var(--encre); font-family: var(--titre); font-weight: 600; font-size: clamp(1.4rem, 3vw, 1.85rem);
  line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.01em; margin-bottom: .25rem; }

.bouton { display: inline-block; background: var(--accent); color: var(--sur-accent); padding: .45rem 1.1rem; border-radius: 999px;
  text-decoration: none; border: 1px solid var(--accent); font: inherit; font-size: .95rem; cursor: pointer; transition: filter var(--transition); }
.bouton:hover { filter: brightness(.92); }
.bouton.second { background: none; color: var(--accent); }
.actions { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }

form.filtres { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .8rem 1rem;
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 1rem 1.1rem; margin: 1rem 0; }
form.filtres label { display: grid; gap: .25rem; font-size: .88rem; color: var(--encre-douce); }
form.filtres .large { grid-column: 1 / -1; }
form.filtres small { color: var(--encre-tres-douce); }
form.filtres div.large label { display: block; margin-top: .3rem; color: var(--encre); font-size: 1rem; }
input, select, textarea { font: inherit; padding: .45rem .6rem; border: 1px solid var(--trait-fort); border-radius: 8px;
  background: var(--fond); color: var(--encre); width: 100%; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
select[multiple] { min-height: 9rem; }
select.court { min-height: 6rem; }
form.filtres fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .3rem; }
form.filtres legend { font-size: .88rem; color: var(--encre-douce); padding: 0; margin-bottom: .2rem; }
input.case { width: auto; accent-color: var(--accent); }
.choisis { color: var(--encre); font-weight: 600; }

.groupe { background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); padding: .3rem 1.1rem .7rem; margin: .8rem 0; }
.groupe h2 { margin: .6rem 0 .2rem; font-size: 1.05rem; }
.groupe h2 small { font-weight: 400; color: var(--encre-tres-douce); }
.groupe ul { padding-left: 1.1rem; margin: .4rem 0; font-size: .92rem; }

/* Les lignes de la veille : la date à gauche, le marché à droite. */
.liste { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.liste li { background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); padding: .85rem 1.1rem;
  display: grid; grid-template-columns: 8.5rem 1fr; gap: .2rem 1rem; transition: border-color var(--transition); }
.liste li:hover { border-color: var(--trait-fort); }
.liste .quand { font-weight: 650; font-variant-numeric: tabular-nums; }
.liste .quand small { display: block; font-weight: 400; color: var(--encre-tres-douce); }
.liste .objet { font-weight: 600; }
.liste .qui, .liste .detail { font-size: .88rem; color: var(--encre-douce); }
.liste .unique { color: var(--alerte); font-weight: 600; }
.liste .relance { color: var(--encre); font-weight: 600; }
@media (max-width: 560px) { .liste li { grid-template-columns: 1fr; } }

.onglets { display: flex; flex-wrap: wrap; gap: .2rem 1.3rem; border-bottom: 1px solid var(--trait); margin: 1rem 0 0; }
.onglets a { padding: .45rem 0; text-decoration: none; color: var(--encre-douce); border-bottom: 2px solid transparent; }
.onglets a:hover { color: var(--accent); }
.onglets a[aria-current] { color: var(--encre); font-weight: 650; border-bottom-color: var(--accent); }

.message { background: var(--accent-doux); border-left: 3px solid var(--accent); border-radius: 0 var(--rayon) var(--rayon) 0; padding: .8rem 1.1rem; margin: 1rem 0; }
.message.ok { background: var(--carte); border-left-color: var(--favorable); }
.message.non { background: var(--alerte-doux); border-left-color: var(--alerte); }
.badge { display: inline-block; font-size: .74rem; font-weight: 600; padding: 0 .5rem; border-radius: 999px;
  background: var(--accent-doux); color: var(--accent); margin-left: .3rem; vertical-align: .1rem; }
.verrou { color: var(--encre-tres-douce); font-style: italic; }
.verrou::before { content: "🔒 "; font-style: normal; }
.cadenas { background: var(--carte); border: 1px dashed var(--accent); border-radius: var(--rayon); padding: .8rem 1.1rem; margin: 1rem 0; }

table.comptes { border-collapse: collapse; width: 100%; font-size: .88rem; margin: 1rem 0; }
table.comptes th, table.comptes td { border-bottom: 1px solid var(--trait); padding: .45rem .5rem; text-align: left; vertical-align: top; }
table.comptes th { color: var(--encre-douce); font-weight: 600; }
table.comptes form { display: inline; }
table.comptes button { font: inherit; background: none; border: 0; color: var(--accent); text-decoration: underline; cursor: pointer; padding: 0; }
.echu { color: var(--alerte); }
.situation { color: var(--encre-douce); }

/* Les portes de l'accueil : une par public, sa pastille en tête, comme sur rouages.fr. */
.portes { list-style: none; padding: 0; margin: 1.4rem 0 2rem; display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.portes a { display: flex; flex-direction: column; gap: .45rem; height: 100%; padding: 1.1rem 1.2rem;
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); text-decoration: none; color: var(--encre-douce);
  transition: border-color var(--transition), transform var(--transition); }
.portes a:hover, .portes a:focus-visible { border-color: var(--pastille-encre, var(--accent)); transform: translateY(-1px); }
.portes strong { color: var(--encre); font-family: var(--titre); font-weight: 620; font-size: 1.22rem; line-height: 1.25; letter-spacing: -0.01em; }
.portes span { font-size: .93rem; }
.portes em { margin-top: auto; font-style: normal; font-size: .82rem; color: var(--accent); }
.portes .pastille { margin-bottom: .2rem; }
.icone { width: 1.15em; height: 1.15em; flex: none; }
.pastille { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 999px; flex: none;
  background: var(--pastille-fond, var(--accent-doux)); color: var(--pastille-encre, var(--accent)); }
.pastille .icone { width: 1.25rem; height: 1.25rem; }
[data-theme-couleur='decide'] { --pastille-fond: var(--theme-decide); --pastille-encre: var(--theme-decide-encre); }
[data-theme-couleur='argent'] { --pastille-fond: var(--theme-argent); --pastille-encre: var(--theme-argent-encre); }
[data-theme-couleur='logement'] { --pastille-fond: var(--theme-logement); --pastille-encre: var(--theme-logement-encre); }
[data-theme-couleur='quotidien'] { --pastille-fond: var(--theme-quotidien); --pastille-encre: var(--theme-quotidien-encre); }
[data-theme-couleur='suivre'] { --pastille-fond: var(--theme-suivre); --pastille-encre: var(--theme-suivre-encre); }

code.empreinte { word-break: break-all; font-size: .88rem; }
dl.preuve { display: grid; grid-template-columns: 14rem 1fr; gap: .4rem 1rem; background: var(--carte);
  border: 1px solid var(--trait); border-radius: var(--rayon); padding: 1rem 1.1rem; }
dl.preuve dt { color: var(--encre-douce); font-size: .9rem; }
dl.preuve dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { dl.preuve { grid-template-columns: 1fr; } dl.preuve dd { margin-bottom: .5rem; } }
pre.commande { background: var(--carte); border: 1px solid var(--trait); border-radius: 8px; padding: .7rem; overflow-x: auto; font-size: .85rem; }

footer { border-top: 1px solid var(--trait); margin-top: 2rem; padding-block: 1.2rem 2rem; font-size: .82rem; color: var(--encre-douce); background: var(--fond-bande); }
footer p { max-width: 66ch; margin: 0 0 .6rem; }
footer .liens { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; }