/* One sheet: frame, nine themes, ten infographic forms. */

@font-face{font-family:"Archivo";src:url(polices/archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Fraunces";src:url(polices/fraunces.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Unbounded";src:url(polices/unbounded.woff2) format("woff2");font-weight:200 900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(polices/jetbrains-mono.woff2) format("woff2");font-weight:100 800;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(polices/instrument-serif.woff2) format("woff2");font-weight:400;font-display:swap}

/* ---------- Themes ----------
   --ratio is the mean width of a digit, in em: it sizes the figure to its column. */

[class*="t-"]{
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --texte:var(--sans);--f-titre:var(--sans);--g-titre:800;--casse:none;--etire:100%;
  --c-chiffre:var(--encre);--trame:none;
  background:var(--fond);color:var(--encre);
}
.t-affiche{--fond:#FF4B1F;--encre:#170A04;--accent:#FFF1E0;--f-chiffre:"Archivo",var(--sans);--g-chiffre:900;--etire:62%;--ratio:.43;--f-titre:"Archivo",var(--sans);--casse:uppercase}
.t-bulletin{--fond:#F3EFE6;--encre:#1B1A17;--accent:#C2371E;--f-chiffre:"Fraunces",Georgia,serif;--g-chiffre:600;--ratio:.56;--f-titre:"Fraunces",Georgia,serif;--g-titre:500}
.t-abysse{--fond:#06142B;--encre:#E6EEFF;--accent:#4FD8FF;--c-chiffre:var(--accent);--f-chiffre:"Unbounded",var(--sans);--g-chiffre:700;--ratio:.74;--f-titre:"Unbounded",var(--sans);--g-titre:500;--trame:radial-gradient(120% 90% at 85% 0%,#0E2F5E 0,transparent 60%)}
.t-carte{--fond:#DDE7EA;--encre:#10303F;--accent:#B8174C;--f-chiffre:"Instrument Serif",Georgia,serif;--g-chiffre:400;--ratio:.45;--f-titre:"Instrument Serif",Georgia,serif;--g-titre:400;--trame:linear-gradient(#10303F14 1px,transparent 1px) 0 0/100% 56px,linear-gradient(90deg,#10303F14 1px,transparent 1px) 0 0/56px 100%}
.t-telex{--fond:#F2DE4A;--encre:#121212;--accent:#C81E1E;--f-chiffre:"JetBrains Mono",ui-monospace,monospace;--g-chiffre:800;--ratio:.6;--f-titre:"JetBrains Mono",ui-monospace,monospace;--g-titre:700;--casse:uppercase;--texte:"JetBrains Mono",ui-monospace,monospace}
.t-corail{--fond:#FFD3C7;--encre:#3A0B27;--accent:#E0224F;--c-chiffre:var(--accent);--f-chiffre:"Unbounded",var(--sans);--g-chiffre:800;--ratio:.76;--f-titre:"Unbounded",var(--sans);--g-titre:500}
.t-lagon{--fond:#12B8B0;--encre:#03262A;--accent:#FFF6DC;--f-chiffre:"Archivo",var(--sans);--g-chiffre:800;--etire:125%;--ratio:.7;--f-titre:"Archivo",var(--sans)}
.t-basalte{--fond:#0E0E0E;--encre:#F1F1F1;--accent:#FF3B30;--c-chiffre:var(--accent);--f-chiffre:"Archivo",var(--sans);--g-chiffre:900;--etire:62%;--ratio:.43;--f-titre:"Archivo",var(--sans);--casse:uppercase}
.t-nacre{--fond:#FBFBF8;--encre:#1B1BE0;--accent:#1B1BE0;--f-chiffre:"Fraunces",Georgia,serif;--g-chiffre:300;--ratio:.52;--f-titre:"Fraunces",Georgia,serif;--g-titre:400}

/* ---------- Frame ---------- */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:400 1rem/1.5 var(--texte);font-variant-numeric:tabular-nums;background:var(--trame),var(--fond);overflow-x:hidden}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px}
:focus-visible{outline:3px solid var(--encre);outline-offset:3px}
h1,h2,p,ol,ul,dl,figure,blockquote{margin:0}
ol,ul{padding:0;list-style:none}
.saut{position:absolute;left:-999px;top:1rem;z-index:9;padding:.6rem 1rem;background:var(--encre);color:var(--fond)}
.saut:focus{left:1rem}
:root{--bord:clamp(1rem,4vw,4rem)}
.petit,.meta,.etiquettes,.axe,.tete nav,.fiche h2,.voisins span,.rebours-nom,.tu-date,.zone,.commentaire footer,.faits dt,.page h2,th,.champ label{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}

.tete{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 2rem;padding:1rem var(--bord);border-bottom:1px solid color-mix(in srgb,var(--encre) 22%,transparent)}
.marque{font:900 1.15rem/1 var(--f-titre);letter-spacing:.04em;text-transform:uppercase;text-decoration:none}
.accroche{display:block;margin-top:.4rem;font:400 .62rem/1.2 var(--sans);letter-spacing:.06em;text-transform:none;opacity:.8}
.marque sup{margin-left:.35em;font:600 .6em/1 var(--sans);letter-spacing:0;color:var(--accent)}
.t-nacre .marque sup,.t-telex .marque sup{color:inherit;opacity:.6}
.tete nav{display:flex;flex-wrap:wrap;gap:.3rem 1.3rem}
.tete nav a{text-decoration:none;padding:.3rem 0;border-bottom:2px solid transparent}
.tete nav a:hover,.tete nav a[aria-current]{border-bottom-color:currentColor}
.langue{opacity:.7}

/* ---------- The reading ---------- */

.releve{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-areas:"tete forme" "pied pied";gap:clamp(1.5rem,4vw,4rem);align-items:center;min-height:min(calc(100svh - 3.6rem),56rem);padding:clamp(1.5rem,4vw,3.5rem) var(--bord);overflow:hidden;--larg:44vw}
.r-tete{grid-area:tete;position:relative}
.r-forme{grid-area:forme;position:relative}
.r-pied{grid-area:pied;position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.5rem,4vw,4rem);align-items:start}
.decor{position:absolute;right:-22vmin;top:-16vmin;width:96vmin;height:96vmin;opacity:.16}
svg.decor{fill:none;stroke:currentColor;stroke-width:1;pointer-events:none}
.decor circle{transform-origin:300px 300px;stroke-dasharray:2 12;animation:tourne 260s linear infinite}
.decor circle+circle{stroke-dasharray:14 8;animation-duration:190s;animation-direction:reverse}
.decor line{stroke-dasharray:4 8}
.globe{display:block;cursor:grab;touch-action:pan-y}
.globe.saisie{cursor:grabbing}

.meta{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem}
.num{padding:.2em .6em;background:var(--encre);color:var(--fond);font-weight:700}
.etiquettes{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.9rem}
.etiquettes span{padding:.2em .7em;border:1px solid currentColor}
.etiquettes .marronnier{border-radius:0;border-width:2px;font-weight:700;transform:rotate(-1.5deg)}
h1{margin-top:1.4rem;max-width:22ch;font:var(--g-titre) clamp(1.45rem,3vw,2.6rem)/1.06 var(--f-titre);text-transform:var(--casse);text-wrap:balance}
.chiffre{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .12em;margin:.12em 0 .08em;color:var(--c-chiffre);font-family:var(--f-chiffre);font-weight:var(--g-chiffre);font-stretch:var(--etire);font-size:min(15rem,calc(var(--larg) / (var(--n) * var(--ratio))));line-height:.9;letter-spacing:-.02em;white-space:nowrap}
.unite{font-size:min(.3em,2.6rem);font-weight:600;letter-spacing:0}
.zone{display:inline-block;padding-top:.5rem;border-top:3px solid currentColor;font-weight:700}
.chapo{margin-top:.9rem;max-width:44ch;font-size:1.08rem}
.r-tete>*{animation:monte .7s both cubic-bezier(.2,.7,.2,1)}
.r-tete>:nth-child(2){animation-delay:.06s}.r-tete>:nth-child(3){animation-delay:.12s}.r-tete>:nth-child(4){animation-delay:.2s}
.r-tete>:nth-child(5){animation-delay:.3s}.r-tete>:nth-child(6){animation-delay:.36s}

.commentaire{padding-left:1.1rem;border-left:5px solid var(--accent)}
.commentaire p{max-width:30ch;font:var(--g-titre) clamp(1.2rem,2.1vw,1.75rem)/1.22 var(--f-titre);text-wrap:balance}
.commentaire footer{margin-top:.7rem;opacity:.75}
.faits{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:1rem 1.5rem}
.faits div{padding-top:.5rem;border-top:1px solid currentColor}
.faits dt{opacity:.75}
.faits dd{margin:.15rem 0 0;font:700 1.35rem/1.15 var(--f-chiffre);font-stretch:var(--etire)}

/* ---------- Forms ---------- */

.forme svg{display:block;width:100%;height:auto;overflow:visible}
.axe{display:flex;justify-content:space-between;gap:1rem;margin-top:.6rem;opacity:.85}

.repere{stroke:currentColor;stroke-dasharray:3 7;opacity:.3}
.trait{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:trace 1.9s .3s cubic-bezier(.6,0,.2,1) forwards}
.aire{fill:var(--accent);opacity:0;animation:voile 1.1s 1.5s forwards}
.bout{fill:var(--accent);opacity:0;animation:plein .3s 2.1s forwards}
.halo{fill:none;stroke:var(--accent);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;animation:pouls 2.6s 2.2s infinite}

.barres li{display:grid;grid-template-columns:minmax(5.5rem,32%) 1fr minmax(3.2rem,auto);gap:.7rem;align-items:center;padding:.3rem 0;font-size:.92rem;line-height:1.2}
.b-piste{height:1.15rem;background:color-mix(in srgb,var(--encre) 13%,transparent)}
.b-barre{display:block;height:100%;width:calc(var(--v) * 100%);background:var(--accent);transform:scaleX(0);transform-origin:left;animation:pousse .9s calc(.25s + var(--i) * 70ms) cubic-bezier(.2,.8,.2,1) forwards}
.b-val{font-weight:700;text-align:right}

.ronds{display:flex;align-items:flex-end;justify-content:center;gap:clamp(.8rem,3vw,2rem)}
.ronds figure{flex:1;min-width:0;text-align:center}
.rond{display:block;width:calc(var(--d) * 100%);aspect-ratio:1;margin:0 auto .8rem;border-radius:50%;background:var(--accent);transform:scale(0);animation:eclot 1s calc(.3s + var(--i) * .22s) cubic-bezier(.2,1.3,.3,1) forwards}
.ronds figcaption{font-size:.85rem;line-height:1.25}
.ronds b{display:block;font:700 1.35rem/1.2 var(--f-chiffre);font-stretch:var(--etire)}

.piste{fill:none;stroke:currentColor;stroke-width:28;opacity:.16}
.arc{fill:none;stroke:var(--accent);stroke-width:28;stroke-dasharray:1;stroke-dashoffset:1;animation:arc 1.7s .3s cubic-bezier(.6,0,.2,1) forwards}
.f-anneau svg{max-width:23rem;margin:0 auto}
.f-jauge .axe{padding:0 3%}

.grains{display:grid;grid-template-columns:repeat(var(--c),1fr);gap:clamp(3px,.7vw,9px)}
.grains i{aspect-ratio:1;border:1.5px solid currentColor;border-radius:50%;opacity:.3}
.grains .on{border-color:var(--accent);background:var(--accent);opacity:1;transform:scale(0);animation:eclot .45s calc(.3s + var(--i) * 28ms) cubic-bezier(.2,1.4,.3,1) forwards}

.semaine,.cases{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.semaine{margin-bottom:5px;font-size:.7rem;text-align:center;opacity:.7}
.cases i{aspect-ratio:5/4;background:var(--accent);opacity:0;animation:apparait .5s calc(.2s + var(--i) * 32ms) forwards}
.cases .vide{visibility:hidden;animation:none}

.f-carte svg{overflow:hidden;cursor:grab;touch-action:pan-y}
.f-carte svg.zoome{touch-action:none}
.f-carte svg.saisie{cursor:grabbing}
.grille line{stroke:currentColor;opacity:.13}
.terres{fill:currentColor;opacity:.2}
.ilots{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;opacity:.35}
.m180{stroke:var(--accent);stroke-width:2;stroke-dasharray:6 7;animation:defile 1.6s linear infinite}
.m180-nom{fill:var(--accent);font:700 17px var(--sans)}
.marques circle{fill:var(--accent);fill-opacity:.5;stroke:var(--accent);stroke-width:1.5;transform-box:fill-box;transform-origin:center;transform:scale(0);animation:eclot .55s calc(.3s + var(--i) * 45ms) cubic-bezier(.2,1.4,.3,1) forwards}
.marques circle:nth-child(-n+3){animation:eclot .55s calc(.3s + var(--i) * 45ms) cubic-bezier(.2,1.4,.3,1) forwards,bat 3.8s 1.6s ease-in-out infinite}
.marques circle:hover,.marques circle:focus{fill-opacity:.95}
.marques circle:focus{outline:none}
.marques circle:focus-visible{stroke:var(--encre);stroke-width:3}
.c-aide{text-transform:none;letter-spacing:0;font-size:.78rem}
.c-aide[hidden]{display:none}
.c-retour{position:absolute;right:.5rem;top:.5rem;padding:.35rem .6rem;font-size:.68rem}

.frise{display:grid;grid-template-columns:repeat(auto-fit,minmax(6.2rem,1fr));gap:1.2rem 1rem}
.frise li{padding-top:.7rem;border-top:5px solid var(--accent);font-size:.9rem;line-height:1.3;animation:monte .6s calc(.3s + var(--i) * .2s) both}
.frise b{display:block;margin-bottom:.3rem;font:var(--g-chiffre) clamp(1.1rem,1.9vw,1.6rem)/1 var(--f-chiffre);font-stretch:var(--etire);white-space:nowrap}

.ondes{max-width:22rem;margin:0 auto}
.ondes circle{fill:none;stroke:var(--accent);stroke-width:2;transform-box:fill-box;transform-origin:center;opacity:0;animation:onde 4.5s calc(var(--i) * .9s) infinite ease-out}

.blocs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,21rem),1fr));gap:3rem clamp(1.5rem,4vw,4rem);padding:3rem var(--bord);border-top:2px solid currentColor}
.bloc h2{margin-bottom:1.2rem;font:var(--g-titre) 1.3rem/1.15 var(--f-titre);text-transform:var(--casse);text-wrap:balance}
.bloc .grains{max-width:18rem}

/* ---------- Balance and pile ---------- */

.balance{position:relative;height:9.5rem;margin:0 6%}
.fleau{position:absolute;left:0;right:0;top:3.4rem;height:6px;background:var(--encre);transform-origin:center;animation:penche 1.8s .4s cubic-bezier(.3,1.5,.4,1) forwards}
.fleau i{position:absolute;top:-1.15rem;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--accent)}
.fleau i:first-child{left:-1.3rem}.fleau i:last-child{right:-1.3rem}
.pivot{position:absolute;left:50%;top:3.6rem;border:2.2rem solid transparent;border-top:0;border-bottom:4.2rem solid var(--encre);transform:translateX(-50%)}
.plateaux{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.plateaux div:last-child{text-align:right}
.plateaux b{display:block;font:var(--g-chiffre) clamp(1.3rem,2.6vw,2.2rem)/1 var(--f-chiffre);font-stretch:var(--etire);overflow-wrap:anywhere}
.plateaux small{display:block;margin:.2rem 0 .4rem;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}
.plateaux span{font-size:.9rem;line-height:1.25}
.pile{display:grid;grid-template-columns:repeat(var(--c),1fr);gap:clamp(2px,.5vw,6px)}
.pile i{aspect-ratio:1;background:var(--accent);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;transform:scale(0);animation:eclot .4s calc(.3s + var(--i) * 14ms) cubic-bezier(.2,1.4,.3,1) forwards}
.i-teeshirt{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8 3l4 2 4-2 5 4-3 3-2-1v12H8V9l-2 1-3-3z'/%3E%3C/svg%3E")}
.i-personne{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a3.2 3.2 0 110 6.4A3.2 3.2 0 0112 2zM6 22v-7a6 6 0 0112 0v7z'/%3E%3C/svg%3E")}
.i-piece{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 3a9 9 0 100 18 9 9 0 000-18zm0 4a5 5 0 110 10 5 5 0 010-10z'/%3E%3C/svg%3E")}
.i-goutte{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2c4 6 7 9 7 13a7 7 0 01-14 0c0-4 3-7 7-13z'/%3E%3C/svg%3E")}
.i-poisson{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M2 12c3-5 9-6 14-2l5-4v12l-5-4c-5 4-11 3-14-2z'/%3E%3C/svg%3E")}
.i-noix{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 3a9 9 0 100 18 9 9 0 000-18zM9 8a1.3 1.3 0 110 2.6A1.3 1.3 0 019 8zm6 0a1.3 1.3 0 110 2.6A1.3 1.3 0 0115 8zm-3 4.2a1.3 1.3 0 110 2.6 1.3 1.3 0 010-2.6z'/%3E%3C/svg%3E")}
.i-parapluie{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a10 10 0 0110 10H13v7a3 3 0 01-6 0h2a1 1 0 002 0v-7H2A10 10 0 0112 2z'/%3E%3C/svg%3E")}
.i-caisse{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M3 6h18v14H3zM5 8v2h14V8z'/%3E%3C/svg%3E")}

/* ---------- Ways around ---------- */

.etiquettes a{padding:.2em .7em;border:1px solid currentColor;text-decoration:none}
.etiquettes a:hover,.lieux a:hover{background:var(--encre);color:var(--fond)}
.lieux{display:flex;flex-wrap:wrap;gap:.3rem .9rem;margin-top:.6rem;font-size:.82rem}
.lieux a{text-decoration-style:dotted}
.rangs{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem 1.2rem;max-width:none!important;margin-top:1rem;font-size:.9rem}
.rangs b{flex:0 0 100%;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}
.rangs a{text-decoration-style:dotted}
.rangs a:hover{text-decoration-style:solid}
.rangs small{opacity:.65}
.rangs span[aria-current]{font-weight:700;border-bottom:2px solid currentColor}
.fil{margin-bottom:.9rem;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.fil a{text-decoration-style:dotted}
.annee h2 small,.mois h2 small{margin-left:.6em;opacity:.65;font-weight:400}
.annee h2 a,.mois h2 a{text-decoration:none}
.page.mois,.page.serre{padding-top:1.6rem;padding-bottom:.4rem}
.page.mois h2,.page.serre h2{margin-top:0}
.page.mois{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.4rem 1.5rem;padding-top:3rem;border-top:2px solid currentColor}
.page.mois h2{padding:0;border:0;font:var(--g-titre) clamp(1.9rem,4.5vw,3.4rem)/1.05 var(--f-titre);letter-spacing:0;text-transform:var(--casse)}
.page.mois h2 small{font:400 .9rem/1 var(--texte)}
.haut{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;text-decoration-style:dotted}
.page[id],.reparts section{scroll-margin-top:3.6rem}

/* ---------- Archive: contents, counts, year at a glance, calendars ---------- */

.sommaire{position:sticky;top:0;z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:.2rem 1.1rem;padding:.7rem var(--bord);border-block:1px solid color-mix(in srgb,var(--encre) 22%,transparent);background:var(--fond);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}
.sommaire a{padding:.2rem 0;border-bottom:2px solid transparent;text-decoration:none}
.sommaire a:hover,.sommaire a:focus-visible{border-bottom-color:currentColor}
.sommaire i{flex:none;width:1px;height:1.1em;background:currentColor;opacity:.35}
.chiffres{display:flex;flex-wrap:wrap;gap:1.2rem clamp(1.5rem,5vw,4rem);margin:1rem 0 0}
.chiffres dd{margin:0;font:var(--g-chiffre) clamp(2rem,5vw,3.6rem)/1 var(--f-chiffre)}
.chiffres dt{margin-top:.3rem;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.annee .chiffres dd{font-size:clamp(1.4rem,3vw,2rem)}
.annee{margin-top:2.4rem}
.an-grille{display:grid;gap:2px;margin-top:1.2rem;max-width:62rem}
.ag-ligne{display:grid;grid-template-columns:3.4rem repeat(31,minmax(0,1fr));gap:2px;align-items:center}
.ag-mois{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.ag-mois:hover{text-decoration:underline}
.ag-ligne>a:not(.ag-mois),.ag-ligne>i{aspect-ratio:1;background:var(--c,currentColor);transition:transform .15s,opacity .15s}
.ag-ligne>i{background:none;outline:1px dotted color-mix(in srgb,var(--encre) 30%,transparent);outline-offset:-1px}
.ag-ligne>a:not(.ag-mois):hover,.ag-ligne>a:not(.ag-mois):focus-visible{z-index:1;transform:scale(1.7);outline:2px solid var(--encre)}
.an-grille .estompe{opacity:.12}
.reparts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:0 clamp(1.5rem,4vw,3.5rem);align-items:start}
.repart{margin-top:.4rem;font-size:.88rem}
.repart a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 2.6rem;gap:.7rem;align-items:center;padding:.32rem 0;border-bottom:1px solid color-mix(in srgb,var(--encre) 18%,transparent);text-decoration:none}
.repart.nue a{grid-template-columns:minmax(0,1fr) auto}
.repart a:hover,.repart a:focus-visible{background:var(--encre);color:var(--fond)}
.rp-nom{overflow-wrap:anywhere}
.rp-barre{height:.7rem;width:max(2px,var(--p));background:var(--c,currentColor)}
.rp-n{text-align:right;font-weight:700}
.repart.nue .rp-n{font-weight:400;opacity:.8;white-space:nowrap}
.cal-tete,.mosaique.semaine{grid-template-columns:repeat(7,minmax(0,1fr))}
.cal-tete{display:grid;padding:.5rem 0;border-block:1px solid color-mix(in srgb,var(--encre) 22%,transparent);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;text-align:center}
.sem-nom{display:none}
.cal-vide{padding:1rem;font-size:.74rem;opacity:.45;outline:1px dotted color-mix(in srgb,var(--encre) 22%,transparent);outline-offset:-1px}
.cal-vide:empty{outline:0}
.cal .tuile{min-height:12rem}
.c-geographie{--c:#8C6D31}.c-sismique{--c:#C2371E}.c-ocean{--c:#1F5FA8}.c-meteo{--c:#4FA3D1}.c-ciel{--c:#2B2A6B}.c-economie{--c:#2E7D4F}.c-demographie{--c:#D9822B}
.c-energie{--c:#E3B505}.c-mobilite{--c:#7A4FA3}.c-numerique{--c:#17A398}.c-administration{--c:#6B6B6B}.c-environnement{--c:#8DB33A}.c-societe{--c:#D1478F}
@media (max-width:900px){
  .sommaire{position:static}
  .cal-tete,.cal-vide{display:none}
  .mosaique.semaine{grid-template-columns:repeat(auto-fill,minmax(min(50%,14rem),1fr))}
  .mosaique.semaine:not(:has(.tuile)){display:none}
  .sem-nom{display:block;grid-column:1/-1;padding:.9rem var(--bord) .4rem;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
  .ag-ligne{grid-template-columns:2.6rem repeat(31,minmax(0,1fr));gap:1px}
  .an-grille{gap:1px}
}
/* ---------- Home: banner of counts, ways in, board of current conditions ---------- */

.enseigne{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.3rem 2rem;padding:.7rem var(--bord);border-bottom:1px solid color-mix(in srgb,var(--encre) 22%,transparent);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}
.en-ligne{display:flex;flex-wrap:wrap;gap:.2rem 1.4rem}
.en-ligne a{text-decoration:none}
.en-ligne a:hover,.en-ligne a:focus-visible{text-decoration:underline}
.suite.une{grid-template-columns:1fr}
.suite.une .attente{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 2rem;border-right:0;border-bottom:0}
.suite.fin{border-bottom:0}
.tuile[aria-current]{z-index:1;outline:5px solid var(--encre);outline-offset:-5px}
.entrees .reparts p,.bureau p{margin-top:1.6rem}
.page.bureau{padding-bottom:2.5rem}
.bord{padding:2.5rem 0 2.5rem;border-top:2px solid currentColor}
.bord h2{padding:0 var(--bord) 1.2rem;font:var(--g-titre) clamp(1.5rem,3vw,2.4rem)/1.1 var(--f-titre);text-transform:var(--casse)}
.rail{display:grid;grid-template-columns:clamp(7rem,15vw,12rem) minmax(0,1fr);border-top:1px solid color-mix(in srgb,var(--encre) 30%,transparent)}
.rail[hidden]{display:none}
.rail-nom{display:flex;align-items:center;padding:.7rem .8rem .7rem var(--bord);background:var(--encre);color:var(--fond);font-size:.7rem;font-weight:700;line-height:1.2;letter-spacing:.08em;text-transform:uppercase}
.rail-fen{display:flex;overflow-x:auto;scrollbar-width:thin}
.rail-liste{display:flex;flex:none;font:500 .84rem/1 "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:nowrap}
.rail-liste li{display:flex}
.rail-liste a,.rail-liste .item{display:flex;align-items:center;gap:1rem;padding:.8rem 1.5rem;border-right:1px solid color-mix(in srgb,var(--encre) 30%,transparent);text-decoration:none}
.rail-liste a:hover,.rail-liste a:focus-visible{background:var(--encre);color:var(--fond);outline:0}
.rail-liste b{font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.rail-liste i{font-style:normal;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;opacity:.65}
.rail-liste em{font-style:normal}
.rail-liste [data-k=temp] em{font-weight:800}
.rail.defile .rail-fen{overflow:hidden}
.rail.defile .rail-liste{animation:rail-defile var(--duree,120s) linear infinite}
.rail.defile:hover .rail-liste,.rail.defile:focus-within .rail-liste{animation-play-state:paused}
@keyframes rail-defile{to{transform:translateX(-100%)}}
.bord-pied{padding:1rem var(--bord) 0;border-top:1px solid color-mix(in srgb,var(--encre) 30%,transparent);font-size:.78rem;opacity:.85}
@media (max-width:560px){
  .rail{grid-template-columns:minmax(0,1fr)}
  .rail-nom{padding:.45rem var(--bord)}
}
.interne{margin-left:.5em;font-size:.78em;opacity:.75;white-space:nowrap}
.page.large{max-width:none}
.lieu{display:grid;grid-template-columns:minmax(0,1fr) min(40vw,25rem);gap:2rem;align-items:center}
.lieu .globe{width:100%;aspect-ratio:1}
.v-milieu{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem}
button.v-tous,button.bouton{background:transparent;color:inherit;font-family:inherit;cursor:pointer}
.forme{position:relative;cursor:pointer}
.bulle{position:absolute;z-index:2;padding:.3rem .6rem;background:var(--encre);color:var(--fond);font:700 .78rem/1.2 var(--texte);white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-50%,calc(-100% - 8px));transition:opacity .15s}
.bulle.vue{opacity:1}
.curseur{stroke:currentColor;stroke-width:1.5;opacity:0;pointer-events:none}
.barres li{transition:opacity .2s,transform .2s}
.barres li:hover,.barres li:focus-visible{transform:translateX(.35rem)}
.barres li:hover .b-barre,.barres li:focus-visible .b-barre{filter:brightness(1.15)}
.barres:has(li:hover,li:focus-visible) li:not(:hover,:focus-visible){opacity:.35}
.marques circle{transition:r .2s}

/* Entrances wait for the element to come into view; the script lifts the hold. */
.attend,.attend *{animation-play-state:paused!important}
.rejoue,.rejoue *{animation:none!important}
.mosaique .tuile{animation:monte .55s both cubic-bezier(.2,.7,.2,1)}
.mosaique .tuile:nth-child(2){animation-delay:50ms}.mosaique .tuile:nth-child(3){animation-delay:.1s}.mosaique .tuile:nth-child(4){animation-delay:.15s}
.mosaique .tuile:nth-child(5){animation-delay:.2s}.mosaique .tuile:nth-child(6){animation-delay:.25s}.mosaique .tuile:nth-child(n+7){animation-delay:.3s}
@keyframes penche{to{transform:rotate(var(--a))}}

/* ---------- Below the reading ---------- */

.fiche{display:grid;grid-template-columns:2fr 1.2fr 1.6fr 1fr;gap:2rem;padding:2.5rem var(--bord);border-top:2px solid currentColor;font-size:.92rem}
.fiche h2{margin-bottom:.6rem;font-weight:700}
.fiche p+p{margin-top:.5rem}
.fiche li{margin-bottom:.3rem;overflow-wrap:anywhere}
.confiance i{display:inline-block;width:.85rem;height:.85rem;margin-right:3px;border:1.5px solid currentColor;vertical-align:-1px}
.c1 i:first-child,.c2 i:nth-child(-n+2),.c3 i{background:currentColor}

.voisins{display:grid;grid-template-columns:1fr auto 1fr;gap:1.5rem;align-items:center;padding:1.4rem var(--bord);border-top:1px solid color-mix(in srgb,var(--encre) 22%,transparent)}
.voisins a{text-decoration:none;font-weight:600;line-height:1.25}
.voisins a:hover{text-decoration:underline}
.voisins span{display:block;font-weight:400;opacity:.75}
.voisins>a:last-child{text-align:right}

/* Neighbours on the sides: a tab in each margin, which opens on hover and on focus. */
.cote{position:fixed;top:50%;z-index:5;display:flex;align-items:center;min-height:3.5rem;background:var(--encre);color:var(--fond);text-decoration:none;transform:translateY(-50%);animation:cote .5s .5s both;--de:-100% 0}
.c-prev{left:0}
.c-next{right:0;flex-direction:row-reverse;text-align:right;--de:100% 0}
.co-fleche{flex:none;display:grid;place-items:center;width:max(1.5rem,calc(var(--bord) - .9rem));height:3.5rem}
.co-fleche svg{width:.6rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:square}
.c-next svg{transform:scaleX(-1)}
.co-texte{max-width:0;overflow:hidden;font-size:.86rem;line-height:1.25;white-space:nowrap;transition:max-width .3s cubic-bezier(.2,.8,.2,1)}
.co-texte small,.co-texte span{display:block;overflow:hidden;text-overflow:ellipsis}
.co-texte small{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.c-prev .co-texte>*{padding-right:1rem}
.c-next .co-texte>*{padding-left:1rem}
.cote:hover .co-texte,.cote:focus-visible .co-texte{max-width:min(21rem,70vw)}
.v-tous,.bouton{display:inline-block;padding:.6rem 1.1rem;border:2px solid currentColor;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.v-tous:hover,.bouton:hover{background:var(--encre);color:var(--fond)}

.suite{display:grid;grid-template-columns:1fr 1fr;border-top:2px solid currentColor;border-bottom:2px solid currentColor}
.attente,.abo{padding:2.5rem var(--bord)}
.attente{border-right:2px solid currentColor}
.rebours{font:var(--g-chiffre) clamp(2.6rem,7.5vw,6rem)/1 var(--f-chiffre);font-stretch:var(--etire);color:var(--c-chiffre);letter-spacing:-.01em}
.rebours.fini{font-size:1.4rem;line-height:1.3;letter-spacing:0}
.annonce{margin-top:.8rem;font-size:.95rem}
.abo h2{font:var(--g-titre) 1.5rem/1.15 var(--f-titre);text-transform:var(--casse)}
.abo>p{margin-top:.5rem;max-width:40ch}
.abo.ferme input,.abo.ferme button{opacity:.45;cursor:not-allowed}
.pot{position:absolute;left:-9999px}
.champ{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
.champ label{flex:0 0 100%}
.champ input{flex:1 1 14rem;min-width:0;padding:.8rem .9rem;border:2px solid var(--encre);border-radius:0;background:transparent;color:inherit;font:inherit}
.champ input::placeholder{color:inherit;opacity:.5}
button{padding:.8rem 1.2rem;border:2px solid var(--encre);border-radius:0;background:var(--encre);color:var(--fond);font:700 .8rem/1.2 var(--texte);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
button:hover{background:transparent;color:var(--encre)}

.recents{padding:2.5rem 0 3rem}
.recents h2{padding:0 var(--bord) 1.2rem;font:var(--g-titre) clamp(1.5rem,3vw,2.4rem)/1.1 var(--f-titre);text-transform:var(--casse)}
.recents>p{padding:1.5rem var(--bord) 0}
.mosaique{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(50%,14rem),1fr))}
.tuile{position:relative;container-type:inline-size;display:flex;flex-direction:column;justify-content:space-between;gap:.8rem;min-height:13.5rem;padding:1rem;text-decoration:none;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.tuile:hover,.tuile:focus-visible{z-index:1;transform:scale(1.05)}
.tu-val{color:var(--c-chiffre);font:var(--g-chiffre) min(3rem,calc(92cqw / (var(--n) * var(--ratio))))/.95 var(--f-chiffre);font-stretch:var(--etire);letter-spacing:-.02em;white-space:nowrap}
.tu-val small{display:block;margin-top:.35rem;font:600 .8rem/1.1 var(--sans);letter-spacing:0;white-space:normal}
.tu-val .court{display:inline;margin:0 0 0 .2em;font-size:.42em}
.tu-titre{font-size:.86rem;line-height:1.22}

.page{max-width:48rem;margin:0 auto;padding:clamp(2rem,6vw,5rem) var(--bord)}
.page h1{max-width:none;margin:0 0 1.5rem;font-size:clamp(2.6rem,8vw,5.5rem)}
.page h2{margin:2.4rem 0 .7rem;padding-top:.7rem;border-top:2px solid currentColor;font-weight:700}
.page p{margin-top:.7rem;max-width:62ch}
.intro{font-size:1.15rem}
table{width:100%;margin-top:2rem;border-collapse:collapse}
th,td{padding:.7rem 0;border-bottom:1px solid currentColor;text-align:left;vertical-align:top}
td:last-child,th:last-child{text-align:right;font-weight:700}
td small{display:block;opacity:.7}
.message{font:var(--g-titre) clamp(1.3rem,3vw,2rem)/1.25 var(--f-titre)}

.pied{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem 3rem;padding:2rem var(--bord) 3rem;font-size:.8rem}
.pied p:first-child{max-width:60ch;opacity:.8}
.pied a{margin-right:1.2rem}

/* ---------- Motion ---------- */

@keyframes monte{from{opacity:0;transform:translateY(16px)}}
@keyframes trace{to{stroke-dashoffset:0}}
@keyframes arc{to{stroke-dashoffset:calc(1 - var(--r))}}
@keyframes voile{to{opacity:.17}}
@keyframes plein{to{opacity:1}}
@keyframes apparait{to{opacity:var(--f)}}
@keyframes pousse{to{transform:scaleX(1)}}
@keyframes eclot{to{transform:scale(1)}}
@keyframes pouls{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(3.4)}}
@keyframes onde{from{opacity:.9;transform:scale(.15)}to{opacity:0;transform:scale(1)}}
@keyframes tourne{to{transform:rotate(360deg)}}
@keyframes defile{to{stroke-dashoffset:-13}}
@keyframes cote{from{opacity:0;translate:var(--de)}}
@keyframes bat{50%{stroke-width:8;stroke-opacity:.35}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition:none!important}
  .ondes circle{opacity:.5;animation:none}
}

/* ---------- Narrow screens ---------- */

@media (max-width:900px){
  .releve{grid-template-columns:minmax(0,1fr);grid-template-areas:"tete" "forme" "pied";min-height:0;--larg:88vw}
  .lieu{grid-template-columns:minmax(0,1fr)}
  /* No margin left for the tabs: they become two half bars at the foot of the screen. */
  .cote{top:auto;bottom:0;width:50%;min-height:44px;transform:none;--de:0 100%}
  .co-fleche{width:2.2rem;height:44px}
  .co-texte,.cote:hover .co-texte,.cote:focus-visible .co-texte{max-width:none}
  .co-texte span{display:none}
  body:has(.cote){padding-bottom:44px}
  .lieu .globe{max-width:22rem}
  .r-pied{grid-template-columns:minmax(0,1fr)}
  .fiche{grid-template-columns:1fr 1fr}
  .suite{grid-template-columns:1fr}
  .attente{border-right:0;border-bottom:2px solid currentColor}
}
@media (max-width:560px){
  .fiche{grid-template-columns:1fr}
  .voisins{grid-template-columns:1fr 1fr}
  .v-milieu{grid-column:1/-1;grid-row:2}
  .frise{grid-template-columns:1fr}
  .frise li{padding:.2rem 0 .2rem .8rem;border-top:0;border-left:5px solid var(--accent)}
  .tuile{min-height:11rem}
  .tete nav{gap:.2rem 1rem}
}

/* ---------- Page to page ----------
   Going from one page to the next takes the page apart, section by section,
   then puts the next one together. Browsers without cross-document view
   transitions simply change page. */

@view-transition{navigation:auto}
.tete{view-transition-name:tete}
.r-tete .meta{view-transition-name:meta}
h1{view-transition-name:titre}
.chiffre{view-transition-name:chiffre}
.r-forme,.mosaique.pleine,.cal.pleine,.an-grille.pleine{view-transition-name:forme}
.commentaire{view-transition-name:observation}
.faits{view-transition-name:faits}
.fiche{view-transition-name:fiche}
.suite{view-transition-name:suite}
.suite.fin{view-transition-name:none}
.enseigne{view-transition-name:enseigne}
.jadis{view-transition-name:jadis}
.ce-mois{view-transition-name:mois}
.entrees{view-transition-name:entrees}
.bureau{view-transition-name:bureau}
.bord{view-transition-name:bord}

::view-transition-group(*){animation-duration:.55s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
::view-transition-image-pair(*){isolation:auto}
::view-transition-old(*),::view-transition-new(*){mix-blend-mode:normal}
::view-transition-old(root){animation:vt-fond-part .5s both}
::view-transition-new(root){animation:vt-fond-vient .5s .25s both}
::view-transition-old(tete),::view-transition-new(tete){animation-duration:.4s}

/* Taking apart: each section leaves its own way, one after the other. */
::view-transition-old(meta){animation:vt-part-haut .22s both cubic-bezier(.6,0,.9,.4)}
::view-transition-old(titre){animation:vt-part-gauche .26s .03s both cubic-bezier(.6,0,.9,.4)}
::view-transition-old(chiffre){animation:vt-eclate .3s .06s both cubic-bezier(.6,0,.9,.4)}
::view-transition-old(forme){animation:vt-part-droite .28s .09s both cubic-bezier(.6,0,.9,.4)}
::view-transition-old(observation){animation:vt-part-gauche .24s .12s both cubic-bezier(.6,0,.9,.4)}
::view-transition-old(faits){animation:vt-part-bas .24s .15s both cubic-bezier(.6,0,.9,.4)}
::view-transition-old(enseigne){animation:vt-part-haut .2s both cubic-bezier(.6,0,.9,.4)}
::view-transition-old(jadis),::view-transition-old(entrees){animation:vt-part-gauche .22s .18s both cubic-bezier(.6,0,.9,.4)}
::view-transition-old(mois),::view-transition-old(bureau){animation:vt-part-droite .22s .18s both cubic-bezier(.6,0,.9,.4)}
::view-transition-old(bord),::view-transition-old(fiche),::view-transition-old(suite){animation:vt-part-bas .22s .18s both cubic-bezier(.6,0,.9,.4)}

/* Putting together: the next page arrives in the same order. */
::view-transition-new(meta){animation:vt-vient-haut .4s .38s both cubic-bezier(.1,.7,.2,1)}
::view-transition-new(titre){animation:vt-vient-gauche .45s .42s both cubic-bezier(.1,.7,.2,1)}
::view-transition-new(chiffre){animation:vt-rassemble .5s .48s both cubic-bezier(.2,1.2,.3,1)}
::view-transition-new(forme){animation:vt-vient-droite .5s .54s both cubic-bezier(.1,.7,.2,1)}
::view-transition-new(observation){animation:vt-vient-gauche .45s .6s both cubic-bezier(.1,.7,.2,1)}
::view-transition-new(faits){animation:vt-vient-bas .45s .66s both cubic-bezier(.1,.7,.2,1)}
::view-transition-new(enseigne){animation:vt-vient-haut .4s .34s both cubic-bezier(.1,.7,.2,1)}
::view-transition-new(jadis),::view-transition-new(entrees){animation:vt-vient-gauche .45s .7s both cubic-bezier(.1,.7,.2,1)}
::view-transition-new(mois),::view-transition-new(bureau){animation:vt-vient-droite .45s .7s both cubic-bezier(.1,.7,.2,1)}
::view-transition-new(bord),::view-transition-new(fiche),::view-transition-new(suite){animation:vt-vient-bas .45s .7s both cubic-bezier(.1,.7,.2,1)}

@keyframes vt-fond-part{to{opacity:0}}
@keyframes vt-fond-vient{from{opacity:0}}
@keyframes vt-part-haut{to{opacity:0;transform:translateY(-36px)}}
@keyframes vt-part-bas{to{opacity:0;transform:translateY(48px)}}
@keyframes vt-part-gauche{to{opacity:0;transform:translateX(-80px) skewX(8deg)}}
@keyframes vt-part-droite{to{opacity:0;transform:translateX(90px) rotate(3deg) scale(.94)}}
@keyframes vt-eclate{to{opacity:0;transform:scale(1.35);filter:blur(10px)}}
@keyframes vt-vient-haut{from{opacity:0;transform:translateY(-36px)}}
@keyframes vt-vient-bas{from{opacity:0;transform:translateY(48px)}}
@keyframes vt-vient-gauche{from{opacity:0;transform:translateX(-80px) skewX(8deg)}}
@keyframes vt-vient-droite{from{opacity:0;transform:translateX(90px) rotate(3deg) scale(.94)}}
@keyframes vt-rassemble{from{opacity:0;transform:scale(.55);filter:blur(10px)}}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
}