[hidden] { display: none !important; }
:root {
color-scheme: light dark;
--navy: #2e4052;
--navy-dark: #202d3a;
--yellow: #ffc857;
--yellow-dark: #e6ac2e;
--white: #ffffff;
--surface: #ffffff;
--grey-bg: #f4f6f8;
--grey-border: #d9dfe4;
--text: #2e4052;
--muted-text: #5c6b7a;
--error-bg: #ffeded;
--error-text: #661d1d;
--danger-solid: #b3261e;
--success-bg: #e7faf0;
--success-text: #1d6636;
--orange-alerte: #c76b00;
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--surface: #1c232c;
--grey-bg: #10151b;
--grey-border: #313d4a;
--text: #e8ecf1;
--muted-text: #9aa7b5;
--error-bg: #3a1414;
--error-text: #ff8a8a;
--success-bg: #10321e;
--success-text: #6fe3a0;
--orange-alerte: #ffb45c;
}
}
:root[data-theme="light"] {
color-scheme: light;
}
:root[data-theme="dark"] {
color-scheme: dark;
--surface: #1c232c;
--grey-bg: #10151b;
--grey-border: #313d4a;
--text: #e8ecf1;
--muted-text: #9aa7b5;
--error-bg: #3a1414;
--error-text: #ff8a8a;
--success-bg: #10321e;
--success-text: #6fe3a0;
--orange-alerte: #ffb45c;
}
* { box-sizing: border-box; }
html { background: var(--grey-bg); scrollbar-gutter: stable; }
body {
margin: 0;
font-family: var(--font);
color: var(--text);
background: var(--grey-bg);
line-height: 1.5;
transition: background-color 0.15s ease, color 0.15s ease;
}
sup, sub {
font-size: 0.72em;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup { top: -0.45em; }
sub { bottom: -0.2em; }
a:has(sup):not([class*="btn"]):not(.bord-action) {
text-decoration: none;
background-image: linear-gradient(currentColor, currentColor);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: 0 100%;
}
a {
color: var(--text);
}
a:hover {
opacity: 0.8;
}
::selection {
background: var(--yellow);
color: var(--navy-dark);
}
p {
text-wrap: pretty;
}
.wrap {
max-width: 880px;
margin: 0 auto;
padding: 0 20px;
}
main.wrap-wide {
max-width: 1140px;
}
main.wrap-xwide {
max-width: 1320px;
}
main.wrap-dashboard {
max-width: 1750px;
}
main.wrap-full {
max-width: none;
}
main.wrap-tableau {
max-width: 1206px;
}
main.wrap-cartes {
--cartes-n: 1;
--cartes-utiles: min(var(--cartes-n), var(--cartes-max, 99));
--toc-languette: 0px;
max-width: calc(
var(--cartes-utiles) * 440px + (var(--cartes-utiles) - 1) * 18px + 2 * 33px + 2 * 20px + 8px
+ var(--toc-languette)
);
}
main.wrap-cartes:has(.page-with-toc) { --toc-languette: var(--tiroir-bord, 44px); }
@media (min-width: 1012px) { main.wrap-cartes { --cartes-n: 2; } }
@media (min-width: 1470px) { main.wrap-cartes { --cartes-n: 3; } }
@media (min-width: 1928px) { main.wrap-cartes { --cartes-n: 4; } }
@media (min-width: 2386px) { main.wrap-cartes { --cartes-n: 5; } }
@media (min-width: 1012px) and (max-width: 1055px) { main.wrap-cartes:has(.page-with-toc) { --cartes-n: 1; } }
@media (min-width: 1470px) and (max-width: 1513px) { main.wrap-cartes:has(.page-with-toc) { --cartes-n: 2; } }
@media (min-width: 1928px) and (max-width: 1971px) { main.wrap-cartes:has(.page-with-toc) { --cartes-n: 3; } }
@media (min-width: 2386px) and (max-width: 2429px) { main.wrap-cartes:has(.page-with-toc) { --cartes-n: 4; } }
@media (max-width: 560px) { main.wrap-cartes { max-width: none; } }
.dev-banner {
background: var(--yellow);
color: var(--navy);
text-align: center;
font-size: 0.85rem;
font-weight: 600;
padding: 6px 12px;
}
.site-header {
background: var(--navy);
color: var(--white);
position: sticky;
top: 0;
z-index: 60;
transition: transform 0.3s ease;
}
.site-header.header-env-dev { background: #1d6636; }
.site-header.header-env-local { background: #8f1d17; }
.site-header.header-hidden {
transform: translateY(-100%);
}
body.popover-ouvert .site-header {
transform: none;
}
.site-header .wrap {
max-width: none;
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
row-gap: 8px;
padding-top: 12px;
padding-bottom: 12px;
}
.brand {
display: flex;
align-items: center;
gap: 10px;
color: var(--white);
text-decoration: none;
font-weight: 700;
font-size: 1.1rem;
}
.brand-logo {
height: 38px;
width: auto;
display: block;
transition: transform .2s ease;
}
.brand:hover .brand-logo { transform: scale(1.04); }
.brand { position: relative; }
.brand-env {
position: absolute;
bottom: -2px;
left: 100%;
margin-left: -6px;
padding: 1px 5px;
border-radius: 4px;
background: var(--yellow);
color: #1c2733;
font-size: .58rem;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
line-height: 1.25;
white-space: nowrap;
pointer-events: none;
}
.brand-court .brand-env { font-size: .52rem; margin-left: -4px; }
.brand-mono {
display: flex;
align-items: center;
height: 38px;
color: var(--yellow);
}
.brand-mono svg { height: 30px; width: auto; }
@media (prefers-reduced-motion: reduce) {
.brand-logo { transition: none; }
.brand:hover .brand-logo { transform: none; }
}
.header-user-name {
color: var(--white);
text-decoration: none;
font-size: 0.95rem;
font-weight: 600;
padding: 7px 14px;
border-radius: 999px;
transition: background 0.15s ease;
}
.header-user-name:hover {
background: rgba(255, 255, 255, 0.12);
}
.header-user-admin { display: inline-flex; }
.lien-admin-badge-court { display: none; }
@media (max-width: 560px) {
.header-user-admin .lien-admin-badge-long { display: none; }
.header-user-admin .lien-admin-badge-court { display: inline; }
}
:root .site-header .header-user-admin .lien-admin {
background: var(--white);
border-color: var(--white);
color: var(--navy);
box-shadow: 0 2px 8px rgba(16, 21, 27, 0.30);
}
:root .site-header .header-user-admin .lien-admin-badge { background: var(--navy); color: var(--white); }
:root .site-header .header-user-admin .lien-admin-label { color: var(--navy); }
.header-user-admin .lien-admin:hover { box-shadow: 0 4px 12px rgba(16, 21, 27, 0.42); }
.header-right {
display: flex;
align-items: center;
margin-left: auto;
gap: 10px;
position: relative;
}
.theme-toggle {
background: none;
border: none;
border-radius: 12px;
min-width: 46px;
padding: 5px 8px;
line-height: 1;
cursor: pointer;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
color: var(--white);
text-decoration: none;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.theme-toggle:hover {
background: rgba(255, 255, 255, 0.12);
}
.theme-toggle[aria-expanded="true"],
.theme-toggle.is-active {
color: var(--yellow);
}
.theme-toggle .hicon {
width: 22px;
height: 22px;
display: block;
}
.theme-anim-ready .icon-sunmoon {
transition: transform 0.5s ease;
}
.theme-anim-ready .icon-sunmoon .sm-bite {
transition: transform 0.5s cubic-bezier(0.34, 0.02, 0.24, 1);
}
.theme-anim-ready .icon-sunmoon .sm-rays {
transition: transform 0.5s cubic-bezier(0.34, 0.02, 0.24, 1), opacity 0.4s ease;
}
.icon-sunmoon .sm-bite { transform: translateX(13px); }
.icon-sunmoon .sm-rays { transform-origin: 12px 12px; }
.icon-sunmoon {
-webkit-mask-image: radial-gradient(circle 6.4px at 50% 50%, transparent 6px, #000 6.6px);
mask-image: radial-gradient(circle 6.4px at 50% 50%, transparent 6px, #000 6.6px);
-webkit-mask-size: 66px 66px;
mask-size: 66px 66px;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: 0px -24.75px;
mask-position: 0px -24.75px;
}
.theme-anim-ready .icon-sunmoon {
transition: transform 0.5s ease, -webkit-mask-position 0.5s cubic-bezier(0.34, 0.02, 0.24, 1), mask-position 0.5s cubic-bezier(0.34, 0.02, 0.24, 1);
}
.theme-dark .icon-sunmoon {
-webkit-mask-position: -18.33px -24.75px;
mask-position: -18.33px -24.75px;
}
.theme-dark .icon-sunmoon {
transform: rotate(-25deg);
}
.theme-dark .icon-sunmoon .sm-bite {
transform: translateX(4px);
}
.theme-dark .icon-sunmoon .sm-rays {
transform: scale(0);
opacity: 0;
}
.theme-groupe {
display: flex;
align-items: stretch;
--sw-top: 5px;
--sw-decal: 0.8px; 
}
.site-header .wrap:has(.header-admin-tabs) .theme-groupe { --sw-decal: -1px; }
.theme-auto {
position: relative;
width: 16px;
padding: 0;
margin-left: -4px;
background: none;
border: none;
border-radius: 8px;
cursor: pointer;
color: var(--white);
}
.theme-auto:hover { background: rgba(255, 255, 255, 0.12); }
.theme-auto {
opacity: 0;
transition: opacity 0.2s ease;
}
.theme-groupe:focus-within .theme-auto,
.theme-groupe.est-revele .theme-auto {
opacity: 1;
}
@media (hover: hover) {
.theme-groupe:hover .theme-auto { opacity: 1; }
}
@media (hover: none) {
.theme-auto[aria-checked="false"] { opacity: 1; }
}
.theme-auto::before {
content: "";
position: absolute;
left: 5px;
top: var(--sw-top);
bottom: var(--sw-top);
width: 6px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.22);
}
.theme-auto::after {
content: "";
position: absolute;
left: 4px;
top: calc(var(--sw-top) - 1px);
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--yellow);
transition: top 0.5s cubic-bezier(0.34, 1.3, 0.24, 1), background-color 0.4s ease;
}
.theme-auto[aria-checked="false"]::after {
top: calc(100% - var(--sw-top) - var(--sw-decal) - 8px);
background: rgba(255, 255, 255, 0.82);
}
@media (prefers-reduced-motion: reduce) {
.theme-auto::after { transition: none; }
}
@keyframes bell-ring {
0%, 100% { transform: rotate(0); }
15% { transform: rotate(13deg); }
35% { transform: rotate(-11deg); }
55% { transform: rotate(7deg); }
75% { transform: rotate(-4deg); }
}
#notif-bell:hover .hicon {
transform-origin: 12px 4px;
animation: bell-ring 0.75s ease;
}
@keyframes bug-wiggle {
0%, 100% { transform: rotate(0); }
25% { transform: rotate(-8deg); }
75% { transform: rotate(8deg); }
}
#feedback-toggle:hover .hicon {
transform-origin: 12px 12px;
animation: bug-wiggle 0.5s ease;
}
@keyframes logout-step-out {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(-3px); }
}
#logout-link:hover .hicon {
animation: logout-step-out 0.5s ease;
}
@keyframes astre-rise {
0%, 100% { transform: translateY(0); }
45% { transform: translateY(-3px); }
}
@keyframes astre-rise-moon {
0%, 100% { transform: translateY(0) rotate(-25deg); }
45% { transform: translateY(-3px) rotate(-25deg); }
}
#theme-toggle:hover .hicon {
animation: astre-rise 0.55s ease;
}
.theme-dark #theme-toggle:hover .hicon {
animation: astre-rise-moon 0.55s ease;
}
@keyframes shield-pulse {
0%, 100% { transform: scale(1); }
40% { transform: scale(1.13); }
}
#confid-link:hover .hicon {
transform-origin: 12px 12px;
animation: shield-pulse 0.5s ease;
}
main.wrap {
padding-top: 32px;
padding-bottom: 48px;
min-height: 60vh;
}
.card {
background: var(--surface);
border: 1px solid var(--grey-border);
border-radius: 10px;
padding: 28px 32px;
}
.card-narrow {
max-width: 480px;
margin: 0 auto;
}
.card-wide {
max-width: 840px;
margin: 0 auto;
}
h1 {
margin-top: 0;
color: var(--text);
text-wrap: pretty;
}
h2 {
color: var(--text);
font-size: 1.15rem;
border-bottom: 2px solid var(--yellow);
padding-bottom: 6px;
text-wrap: pretty;
}
h3 {
color: var(--text);
font-size: 1.12rem;
font-weight: 700;
margin-bottom: 4px;
text-wrap: pretty;
}
.form-section {
margin-top: 32px;
scroll-margin-top: calc(var(--header-h, 90px) + var(--pastille-h, 0px) + 28px);
}
.page-with-toc {
max-width: calc(1900px + 22px + 190px);
margin-left: auto;
margin-right: auto;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 22px;
align-items: start;
}
.page-with-toc:has(.card-lecture) {
max-width: calc(800px + 22px + 190px);
margin-left: auto;
margin-right: auto;
}
@media (min-width: 901px) {
.page-with-toc:has([data-toc-auto]),
.page-with-toc:has(.page-toc-col) {
grid-template-columns: minmax(0, 1fr) 190px;
}
}
.page-with-toc:has(.page-toc-col-reduite) {
padding-left: 0;
grid-template-columns: minmax(0, 1fr) auto;
}
.page-with-toc:not(:has(.page-toc-col)) {
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
.page-with-toc > .card {
max-width: min(1900px, 100%);
width: 100%;
}
.page-with-toc > .card.card-sans-plafond { max-width: 100%; }
.page-with-toc > .card.card-lecture {
max-width: 800px;
}
.page-toc-col {
position: sticky;
top: calc(var(--header-h, 90px) + 12px);
}
.page-toc {
width: 190px;
background: none;
border: none;
padding: 0;
box-shadow: none;
}
.page-toc-head {
display: flex;
align-items: center;
gap: 8px;
}
.page-toc-head .page-toc-h {
margin: 0;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.page-toc-h {
margin: 0 0 8px;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--muted-text);
font-weight: 700;
}
.page-toc a {
display: block;
font-size: 0.8rem;
color: var(--muted-text);
text-decoration: none;
padding: 6px 0 6px 11px;
border-left: 2px solid var(--grey-border);
line-height: 1.25;
transition: color 0.15s, border-color 0.15s;
}
.page-toc a:hover {
color: var(--text);
border-left-color: var(--muted-text);
}
.page-toc a.active {
color: var(--text);
border-left-color: var(--yellow-dark);
border-left-width: 3px;
padding-left: 10px;
}
.page-toc a.toc-lien-h3.active {
border-left-color: var(--yellow-dark);
border-left-width: 2px;
padding-left: 22px;
}
.page-toc-poignee .toc-rail {
position: relative;
left: 0;
flex: 1;
width: 3px;
margin-top: 8px;
border-radius: 3px;
overflow: hidden;
background: color-mix(in srgb, var(--muted-text) 30%, transparent);
}
.page-toc-poignee .toc-rail-fill {
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
height: 0;
background: var(--yellow-dark);
border-radius: 3px;
transition: height 0.08s linear;
}
.page-toc { position: relative; }
.toc-rail {
position: absolute;
top: 0;
bottom: 0;
left: -12px;
width: 3px;
border-radius: 3px;
overflow: hidden;
background: var(--grey-border);
}
.toc-rail-fill {
display: block;
width: 100%;
height: 0;
background: var(--yellow-dark);
border-radius: 3px;
transition: height 0.08s linear;
}
.toc-toggle svg {
display: block;
fill: currentColor;
}
.intro-close.toc-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: 1px solid var(--grey-border);
border-radius: 8px;
font-size: 0;
color: var(--muted-text);
transition: border-color 0.15s ease, color 0.15s ease;
}
.intro-close.toc-toggle:hover {
border-color: var(--yellow-dark);
color: var(--text);
}
.page-toc-restore {
background: none;
border: 1px solid var(--grey-border);
border-radius: 8px;
width: 30px;
height: 30px;
font-size: 0.9rem;
line-height: 1;
color: var(--muted-text);
cursor: pointer;
transition: border-color 0.15s ease, color 0.15s ease;
}
.page-toc-restore:hover {
border-color: var(--yellow-dark);
color: var(--text);
}
@media (max-width: 900px) {
.page-with-toc {
grid-template-columns: 1fr;
gap: 0;
}
.page-with-toc:has(.page-toc-col-reduite) {
padding-left: 0;
grid-template-columns: 1fr;
}
}
label {
display: block;
font-weight: 600;
font-size: 0.9rem;
margin-top: 14px;
margin-bottom: 6px;
}
.center-btn {
text-align: center;
margin-top: 12px;
}
.text-justify p,
.text-justify li {
text-align: justify;
}
.text-justify p,
.lieu-desc,
.lieu-details p,
.field-col p.muted {
hyphens: auto;
-webkit-hyphens: auto;
}
a[href^="mailto:"],
.email {
hyphens: none;
-webkit-hyphens: none;
}
.qui-compteur {
text-align: right;
color: var(--muted-text);
font-size: 0.8rem;
opacity: 0.55;
margin-top: 28px;
font-variant-numeric: tabular-nums;
}
.mentions-legales {
background: var(--grey-bg);
border: 1px solid var(--grey-border);
border-left: 4px solid var(--yellow-dark);
border-radius: 10px;
padding: 16px 20px;
max-width: 640px;
}
.mentions-legales p {
margin: 0;
}
.confid-head {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 8px;
}
.confid-bouclier {
width: 56px;
height: 56px;
flex: 0 0 auto;
color: var(--navy);
view-transition-name: bouclier;
}
:root[data-theme="dark"] .confid-bouclier { color: var(--yellow); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .confid-bouclier { color: var(--yellow); }
}
.confid-titre h1 { margin: 0; }
.confid-titre .muted { margin: 4px 0 0; }
@media (max-width: 560px) {
.confid-bouclier { width: 44px; height: 44px; }
}
.cf-ancre,
.toc-ancre,
.page-toc[data-toc-arbre] ~ *,
.article-corps :is(h2, h3, h4, h5) {
scroll-margin-top: calc(var(--header-h, 90px) + var(--pastille-h, 0px) + 28px);
}
.page-toc a.toc-lien-h3 {
padding-left: 22px;
font-size: 0.76rem;
border-left-color: transparent;
}
.page-toc a.toc-lien-h3 { position: relative; }
.page-toc a.toc-lien-h3::before {
content: "";
position: absolute;
left: 11px;
top: 0;
bottom: 0;
width: 1px;
background: color-mix(in srgb, var(--muted-text) 55%, transparent);
}
.toc-cible { position: relative; }
.toc-cible::before {
content: "";
position: absolute;
left: -14px;
top: 2px;
bottom: 2px;
width: 4px;
border-radius: 4px;
background: var(--yellow-dark);
animation: toc-cible-fade 2s ease-out forwards;
}
@keyframes toc-cible-fade {
0% { opacity: 1; }
55% { opacity: 1; }
100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.toc-cible::before { animation: none; opacity: 0; }
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="tel"],
input[type="url"],
select,
textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--grey-border);
border-radius: 6px;
font-size: 1rem;
font-family: inherit;
background: var(--surface);
color: var(--text);
}
input:focus, select:focus, textarea:focus {
outline: 2px solid var(--yellow);
outline-offset: 1px;
border-color: var(--yellow-dark);
}
.checkbox-row {
display: flex;
align-items: flex-start;
gap: 10px;
font-weight: normal;
margin-top: 12px;
}
.checkbox-row input[type="checkbox"],
.checkbox-row input[type="radio"] {
margin-top: 4px;
flex-shrink: 0;
width: 18px;
height: 18px;
}
input[type="checkbox"],
input[type="radio"] {
accent-color: var(--yellow-dark);
}
.attentes-intro,
.stages-intro {
position: relative;
background: var(--grey-bg);
border: 1px solid var(--grey-border);
border-radius: 10px;
padding: 20px 24px;
margin: 8px 0 24px;
}
.attentes-intro-titre {
margin-top: 0;
border-bottom: none;
padding-bottom: 0;
}
.attentes-intro p,
.stages-intro p {
margin: 12px 0 0;
}
.exergue {
border-left: 4px solid var(--yellow);
background: var(--surface);
padding: 12px 16px;
border-radius: 0 8px 8px 0;
font-size: 1.02rem;
}
.velonomie-def {
font-size: 0.92rem;
color: var(--muted-text);
}
.affinage-block {
border-left: 3px solid var(--yellow);
padding-left: 18px;
margin-left: 2px;
}
.pills {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 12px;
}
.pill {
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
text-wrap: balance;
padding: 8px 16px;
border: 1px solid var(--grey-border);
border-radius: 1.6em;
cursor: pointer;
font-size: 0.92rem;
user-select: none;
}
.pill input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}
.pill:hover {
border-color: var(--yellow-dark);
}
.pill:has(input:checked) {
background: var(--yellow);
color: var(--navy-dark);
border-color: var(--yellow-dark);
font-weight: 600;
}
.pill:has(input:focus-visible) {
outline: 2px solid var(--yellow-dark);
outline-offset: 2px;
}
.pill-radio::before {
content: "\25CB"; 
margin-right: 7px;
opacity: 0.55;
}
.pill-radio:has(input:checked)::before {
content: "\25CF"; 
opacity: 1;
}
.stage-row {
border: 1px solid var(--grey-border);
border-radius: 8px;
padding: 12px 14px;
margin-top: 14px;
}
.stage-interest {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--grey-border);
}
.stage-interest p.muted {
margin-top: 6px;
}
.stage-reservation {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--grey-border);
}
.badge-full,
.badge-confirmed,
.badge-almost,
.badge-locked,
.badge-estime {
display: inline-block;
font-size: 0.8rem;
font-weight: 600;
padding: 2px 8px;
border-radius: 999px;
margin-left: 6px;
}
.badge-labo {
display: inline-block;
font-size: .64rem;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
padding: 1px 6px;
border-radius: 999px;
background: color-mix(in srgb, var(--orange-alerte) 15%, transparent);
color: var(--orange-alerte);
border: 1px solid color-mix(in srgb, var(--orange-alerte) 35%, transparent);
margin-right: 7px;
vertical-align: 1px;
}
.badge-beta {
display: inline-block;
font-size: .64rem;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
padding: 1px 7px;
border-radius: 999px;
background: color-mix(in srgb, var(--yellow-dark) 15%, transparent);
color: var(--yellow-dark);
border: 1px solid color-mix(in srgb, var(--yellow-dark) 35%, transparent);
vertical-align: 2px;
white-space: nowrap;
}
.badge-beta .badge-beta-lettre {
font-family: Georgia, 'Times New Roman', serif;
font-size: .78rem; font-weight: 700; text-transform: none;
margin-right: 3px; vertical-align: -1px;
}
.badge-full {
background: var(--error-bg);
color: var(--error-text);
}
.badge-confirmed {
background: var(--success-bg);
color: var(--success-text);
}
.badge-almost {
background: var(--yellow);
color: var(--navy-dark);
}
.badge-locked {
background: color-mix(in srgb, var(--yellow-dark) 28%, var(--surface));
color: var(--text);
}
.badge-estime {
background: color-mix(in srgb, var(--orange-alerte) 13%, transparent);
color: var(--orange-alerte);
border: 1px solid color-mix(in srgb, var(--orange-alerte) 32%, transparent);
}
.muted {
color: var(--muted-text);
font-size: 0.92rem;
text-wrap: pretty;
}
.dispo-row {
display: flex;
align-items: flex-end;
gap: 14px;
margin-bottom: 10px;
}
.dispo-row label {
margin-top: 0;
flex: 1;
}
.btn {
display: inline-block;
border: none;
border-radius: 6px;
padding: 11px 20px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
text-decoration: none;
font-family: inherit;
}
.btn-primary {
background: var(--yellow);
color: var(--navy-dark);
margin-top: 24px;
}
.btn-primary:hover {
background: var(--yellow-dark);
}
.btn-secondary {
background: var(--surface);
color: var(--text);
border: 1px solid var(--text);
margin-top: 24px;
margin-left: 10px;
}
.btn-secondary:first-child {
margin-left: 0;
}
.champ-valider {
display: flex;
align-items: stretch;
gap: 8px;
}
.champ-valider input,
.champ-valider textarea {
flex: 1 1 auto;
min-width: 0;
}
.champ-valider .btn {
display: inline-flex;
align-items: center;
flex-shrink: 0;
margin: 0;
padding: 0 14px;
}
.lancer-champs .est-modifie {
border-color: var(--yellow-dark);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--yellow) 45%, transparent);
}
.btn.est-inerte {
background: var(--grey-bg);
border-color: var(--grey-border);
color: var(--muted-text);
box-shadow: none;
cursor: not-allowed;
}
.btn.est-inerte:hover { background: var(--grey-bg); }
.lancer-champs label:has(> .titre-compte) { display: flex; align-items: baseline; gap: 10px; }
.titre-compte {
margin-left: auto;
color: var(--muted-text);
font-size: 0.85rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
white-space: nowrap;
cursor: help;
}
.titre-compte.est-trop-long { color: var(--danger-solid); }
#annuler .inline-form > .btn { margin-top: 0; }
.separateur-danger {
border: 0;
border-top: 1px solid var(--grey-border);
margin: 22px 0 14px;
}
.btn-delete {
background: var(--danger-solid);
color: var(--white);
}
.btn-delete:hover {
opacity: 0.9;
}
.delete-actions {
display: flex;
align-items: stretch;
gap: 12px;
margin-top: 24px;
flex-wrap: wrap;
}
.delete-actions .btn {
margin: 0;
display: inline-flex;
align-items: center;
}
.btn-remove-row {
background: transparent;
color: var(--error-text);
border: 1px solid var(--grey-border);
border-radius: 6px;
padding: 6px 10px;
cursor: pointer;
height: fit-content;
}
.btn-link {
background: none;
border: none;
padding: 0;
color: var(--text);
text-decoration: underline;
cursor: pointer;
font-size: inherit;
font-family: inherit;
}
.btn-danger {
color: var(--error-text);
}
.inline-form {
display: inline;
margin-left: 10px;
}
.wizard-step .btn-link {
display: inline-block;
margin-top: 10px;
font-size: 1rem;
}
.fork-tiles {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 12px;
align-items: stretch;
}
.fork-tile {
flex: 1 1 300px;
min-width: 0;
display: flex;
flex-direction: column;
gap: 6px;
padding: 20px 16px;
border: 1px solid var(--grey-border);
border-radius: 10px;
background: var(--surface);
}
.fork-tile-title {
font-weight: 700;
color: var(--text);
margin: 0;
text-wrap: pretty;
}
.fork-tile .muted {
margin: 0 0 6px;
}
.fork-tile .champ-valider {
margin-top: auto;
}
.veille-interets {
border: 0;
margin: 22px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.veille-interet { margin-top: 0; }
.veille-envoi { margin-top: 32px; text-align: center; }
.veille-envoi .btn-primary { margin-top: 0; }
.veille-interets legend {
padding: 0;
margin-bottom: 6px;
font-size: 0.9rem;
font-weight: 600;
color: var(--text);
}
.veille-interet {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
border: 1px solid var(--grey-border);
border-radius: 10px;
background: var(--surface);
cursor: pointer;
transition: border-color .15s ease, background-color .15s ease;
}
.veille-interet:hover {
border-color: var(--yellow-dark);
}
.veille-interet:focus-within {
border-color: var(--yellow-dark);
}
.veille-interet input {
margin: 3px 0 0;
flex: 0 0 auto;
width: auto;
accent-color: var(--yellow-dark);
}
.veille-interet > span {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
text-wrap: pretty;
}
.veille-confidentialite { margin: 10px 0 0; }
.veille-confidentialite a {
display: inline-flex;
align-items: baseline;
gap: 7px;
}
.veille-confidentialite svg { flex: 0 0 auto; transform: translateY(2px); }
.veille-vitrine {
margin: 26px 0 0;
padding-top: 18px;
border-top: 1px solid var(--grey-border);
text-wrap: pretty;
}
.notice {
padding: 12px 16px;
border-radius: 6px;
margin: 16px 0;
text-wrap: pretty;
}
.notice-error {
background: var(--error-bg);
color: var(--error-text);
}
.notice-success {
background: var(--success-bg);
color: var(--success-text);
}
.notice-warn,
.notice-theme {
background: color-mix(in srgb, var(--yellow) 22%, transparent);
color: var(--text);
}
.table-scroll {
overflow-x: auto;
margin-top: 12px;
}
.nom-famille { opacity: .72; font-weight: 400; }
.qp-liste { max-height: min(52svh, 560px); overflow-y: auto; }
.qp-bloc { border: 1px solid var(--grey-border); border-radius: 10px; padding: 14px 16px; margin: 0 0 14px; }
.qp-entete { margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.qp-source { font-size: .74rem; padding: 1px 8px; border-radius: 999px;
background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--muted-text); }
.qp-section { margin: 12px 0 6px; font-size: .74rem; text-transform: uppercase;
letter-spacing: .04em; color: var(--muted-text); }
.qp-ligne { display: flex; gap: 14px; align-items: baseline; justify-content: space-between;
padding: 5px 0; border-bottom: 1px solid color-mix(in srgb, var(--grey-border) 60%, transparent); }
.qp-lib { flex: 1 1 auto; }
.qp-note { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qp-sur { font-weight: 400; color: var(--muted-text); font-size: .82rem; }
.qp-basse { color: var(--error-text); }
.qp-ligne:has(.qp-texte) { flex-direction: column; gap: 4px; }
.qp-texte { white-space: pre-line; color: var(--muted-text); }
.fiche-avis-detail { margin: 4px 0 6px; font-size: .9rem; }
.fiche-avis-detail summary { cursor: pointer; }
.fiche-avis-detail .qp-bloc { margin: 8px 0 0; }
.stat-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 14px;
margin: 18px 0 8px;
}
.email-file {
display: flex;
flex-direction: column;
gap: 10px;
margin: 14px 0;
}
.email-file-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
border: 1px solid var(--grey-border);
border-radius: 12px;
background: var(--surface);
cursor: pointer;
}
.email-file-item:has(input:checked) {
border-color: var(--yellow-dark);
background: color-mix(in srgb, var(--yellow) 7%, var(--surface));
}
.email-file-item > input { margin-top: 4px; flex: 0 0 auto; }
.email-file-corps { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.email-file-tete { display: block; text-wrap: balance; }
.email-file-type {
display: inline-block;
margin-left: 8px;
font-size: 0.72rem;
font-weight: 600;
padding: 1px 8px;
border-radius: 999px;
background: var(--grey-bg);
color: var(--muted-text);
}
.email-file-item .date-bascule.est-en-retard { color: var(--danger-solid); }
.email-file-pour {
text-decoration: underline dotted;
text-underline-offset: 3px;
cursor: help;
}
.email-file-apercu summary { cursor: pointer; font-size: 0.85rem; color: var(--muted-text); }
.email-file-rendu {
margin-top: 8px;
padding: 12px;
border: 1px dashed var(--grey-border);
border-radius: 10px;
background: var(--grey-bg);
max-height: 420px;
overflow: auto;
}
.email-file-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 6px; }
.email-file-actions .btn {
margin: 0;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1.25;
}
.sel-rapide { display: inline-flex; gap: 6px; }
.sel-rapide button {
padding: 5px 12px;
border: 1px solid transparent;
border-radius: 7px;
background: none;
color: var(--muted-text);
font-family: inherit;
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
}
.sel-rapide button:hover {
background: var(--grey-bg);
border-color: var(--grey-border);
color: var(--text);
}
.emails-periodes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 22px;
align-items: start;
margin-top: 24px;
}
.emails-periodes h3 { margin: 0 0 8px; font-size: 1.05rem; }
.emails-periode-sous { font-weight: 400; font-size: 0.85rem; }
.emails-periodes table { width: 100%; }
.emails-periodes .col-n { text-align: right; font-variant-numeric: tabular-nums; }
.col-n-bulle {
text-decoration: underline dotted;
text-underline-offset: 3px;
cursor: help;
}
.emails-note { margin-top: 18px; font-size: 0.85rem; }
.email-file-cap { margin-top: 10px; font-variant-numeric: tabular-nums; }
.stat-card {
background: var(--grey-bg);
border-radius: 12px;
padding: 16px 18px;
}
.stat-card .stat-val {
font-size: 1.7rem;
font-weight: 700;
line-height: 1.1;
font-variant-numeric: tabular-nums;
color: var(--text);
}
.stat-card .stat-lbl {
display: block;
font-size: 0.82rem;
color: var(--muted-text);
margin-top: 4px;
}
.stat-card .stat-sub {
display: block;
font-size: 0.75rem;
color: var(--yellow-dark);
font-weight: 600;
margin-top: 6px;
}
.astuce-contact {
margin-top: 18px;
padding: 12px 16px;
background: color-mix(in srgb, var(--yellow) 16%, transparent);
border: 1px solid var(--yellow-dark);
border-radius: 10px;
font-size: 0.9rem;
line-height: 1.55;
text-align: justify;
hyphens: auto;
}
.admin-table {
width: 100%;
border-collapse: collapse;
}
@keyframes ligne-arrivee {
0%   { background-color: color-mix(in srgb, var(--yellow) 55%, transparent); box-shadow: 0 -10px 10px -8px color-mix(in srgb, var(--yellow) 70%, transparent), 0 10px 10px -8px color-mix(in srgb, var(--yellow) 70%, transparent); }
35%  { background-color: color-mix(in srgb, var(--yellow) 45%, transparent); box-shadow: 0 -10px 10px -8px color-mix(in srgb, var(--yellow) 60%, transparent), 0 10px 10px -8px color-mix(in srgb, var(--yellow) 60%, transparent); }
100% { background-color: transparent; box-shadow: 0 -10px 10px -8px transparent, 0 10px 10px -8px transparent; }
}
tr.ligne-visee > td { animation: ligne-arrivee 4s ease-out 1; }
tr.ligne-visee > td:first-child { border-radius: 8px 0 0 8px; }
tr.ligne-visee > td:last-child { border-radius: 0 8px 8px 0; }
table tr[id] { scroll-margin-top: calc(var(--header-h, 92px) + var(--pastille-h, 48px) + 24px); }
.wd-table tr { scroll-margin-top: calc(var(--header-h, 92px) + var(--pastille-h, 48px) + 24px); }
@media (prefers-reduced-motion: reduce) { tr.ligne-visee > td { animation: none; background-color: color-mix(in srgb, var(--yellow) 30%, transparent); } }
.admin-table th, .admin-table td {
text-align: left;
padding: 10px 8px;
border-bottom: 1px solid var(--grey-border);
font-size: 0.95rem;
}
.admin-table thead th {
background: var(--surface);
box-shadow: 0 1px 0 var(--grey-border);
}
.table-collante {
max-height: calc(100svh - 250px);
overflow: auto;
}
.table-collante thead th {
position: sticky;
top: 0;
z-index: 3;
background: var(--surface);
box-shadow: 0 -24px 0 0 var(--surface);
}
.table-collante thead th::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 1px;
background: var(--grey-border);
}
.table-fit {
width: auto;
max-width: 100%;
}
.table-fit th, .table-fit td {
white-space: nowrap;
}
.secu-mesures { width: 100%; }
.secu-mesures td:first-child { white-space: normal; }
.lien-url {
max-width: 74ch;
white-space: normal;
overflow-wrap: anywhere;
}
.liens-table th,
.liens-table td { padding: 14px 16px; vertical-align: middle; }
.liens-table th:first-child,
.liens-table td:first-child { padding-left: 12px; }
.stage-inactive { opacity: 0.55; }
.stage-inactive td {
color: var(--muted-text);
}
.stage-inactive td a {
color: var(--muted-text);
}
.stage-confirmed td:first-child a {
font-weight: 700;
}
.stage-statut {
display: inline-block;
padding: 2px 9px;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 600;
white-space: nowrap;
}
.h1-etat {
--part: 0.763;
background: color-mix(in srgb, var(--etat-teinte) 40%, transparent);
font-size: calc(var(--part) * 1em);
display: inline-block;
overflow: hidden;
height: calc(1.1055em / var(--part));
line-height: calc(1.1055em / var(--part));
vertical-align: calc(-0.1816em / var(--part));
padding: 0 0.46em;
}
.h1-etat-ico { margin-right: 0.3em; }
.stage-statut-embryon {
background-color: var(--surface);
background-image: radial-gradient(
circle at 1px 1px,
color-mix(in srgb, var(--text) 22%, transparent) 1px,
transparent 1.2px
);
background-size: 4px 4px;
border: 1px solid var(--grey-border);
color: var(--muted-text);
}
.stage-statut-remplissage { background: var(--grey-bg); color: var(--muted-text); }
.stage-statut-confirme,
.stage-statut-complet,
.stage-statut-verrouille,
.stage-statut-en_cours {
background: color-mix(in srgb, var(--yellow) 38%, transparent);
color: var(--text);
}
.stage-statut-tenu { background: color-mix(in srgb, var(--yellow) 22%, transparent); color: var(--text); }
.stage-statut-cloture { background: color-mix(in srgb, var(--yellow) 22%, transparent); color: var(--text); }
.stage-statut-annule {
background-color: var(--surface);
background-image: repeating-linear-gradient(
-45deg,
transparent 0 3.771px,
color-mix(in srgb, var(--text) 17%, transparent) 3.771px 4.714px
);
border: 1px solid var(--grey-border);
color: var(--muted-text);
}
.form-barre-haut {
position: sticky;
top: calc(var(--header-h, 90px) + 12px);
z-index: 55;
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 12px;
justify-content: flex-end;
width: fit-content;
max-width: 100%;
margin: 0 0 16px auto;
padding: 5px 6px 5px 16px;
border: 1px solid var(--navy);
border-radius: 999px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 10px 24px rgba(0, 0, 0, 0.16);
background: var(--surface);
transition: top 0.22s ease;
}
@media (prefers-reduced-motion: reduce) {
.form-barre-haut { transition: none; }
}
.form-modif-mention {
align-self: center;
font-size: 0.86rem;
font-weight: 600;
color: var(--yellow-dark);
display: none;
}
.est-modifie .form-modif-mention { display: inline; }
.form-barre-haut .btn-enregistrer { margin: 0; padding-block: 6px; }
.est-modifie .btn-enregistrer,
.est-modifie .form-actions .btn-primary { animation: bouton-respire 2s ease-in-out infinite; }
@keyframes bouton-respire {
0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--yellow) 60%, transparent); }
50%      { box-shadow: 0 0 0 7px color-mix(in srgb, var(--yellow) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
.est-modifie .btn-enregistrer,
.est-modifie .form-actions .btn-primary {
animation: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--yellow) 45%, transparent);
}
}
.bord-sessions {
display: grid;
grid-template-columns: repeat(auto-fill, min(440px, 100%));
justify-content: center;
gap: 14px;
margin-top: 12px;
}
.bord-session {
display: flex;
flex-direction: column;
gap: 10px;
padding: 14px;
border: 1px solid var(--grey-border);
border-radius: 12px;
background: var(--surface);
}
.bord-session-tete { display: flex; align-items: flex-start; gap: 12px; }
.bord-session-txt { flex: 1 1 auto; min-width: 0; }
.bord-session-txt h3 { margin: 0; font-size: 1rem; }
.bord-session-formation {
display: inline-flex;
align-items: center;
gap: 5px;
margin: 3px 0 0;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--muted-text);
}
.bord-session-formation svg { flex: 0 0 auto; opacity: 0.8; }
.bord-session-faits { margin: 4px 0 0; font-size: 0.86rem; }
.bord-session-pied {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 14px;
padding-top: 10px;
border-top: 1px solid var(--grey-border);
}
.bord-session-noms { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.bord-nom {
padding: 2px 9px;
border: 1px solid var(--grey-border);
border-radius: 999px;
background: var(--surface);
font-size: 0.8rem;
text-decoration: none;
}
.bord-nom:hover { border-color: var(--yellow-dark); }
.bord-nom-parti { color: var(--muted-text); border-style: dashed; }
.bord-places { margin: 10px 0 0; padding-left: 18px; }
.bord-places li { margin-bottom: 8px; }
.profil-manquants {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 8px;
margin: 10px 0 0;
padding: 10px 14px;
border: 1px solid var(--yellow-dark);
border-radius: 10px;
background: color-mix(in srgb, var(--yellow) 14%, transparent);
font-size: 0.9rem;
}
.profil-manquants[hidden] { display: none; }
.profil-manquants-tete { font-weight: 600; }
.profil-manquants-liste { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.profil-manquants-liste a {
padding: 2px 10px;
border: 1px solid var(--grey-border);
border-radius: 999px;
background: var(--surface);
text-decoration: none;
}
.profil-manquants-liste a:hover { border-color: var(--yellow-dark); }
:target.pastilles-choix, input:target { outline: 2px solid var(--yellow-dark); outline-offset: 3px; border-radius: 8px; }
.fiche-danger { margin-top: 28px; }
.fiche-danger h2 { border-bottom-color: var(--danger-solid, #c0392b); }
.inscrites-colonnes .table-collante,
.admin-colonnes .table-collante {
width: max-content;
max-width: 100%;
}
.inscrites-colonnes,
.admin-colonnes {
display: grid;
grid-template-columns: min-content minmax(320px, 1fr);
gap: 24px;
align-items: start;
margin-top: 12px;
}
.admin-colonnes > .table-scroll { min-width: 0; }
.colonnes-lieux { grid-template-columns: 620px minmax(320px, 1fr); }
.admin-table abbr { text-decoration: underline dotted; cursor: help; text-underline-offset: 2px; }
.colonnes-lieux .table-fit td:first-child,
.colonnes-lieux .table-fit th:first-child { white-space: normal; }
.colonnes-lieux td.col-nombre .bulle-porteur { display: block; padding: 6px 0; margin: -6px 0; }
.colonnes-lieux .admin-table tbody tr[data-lieu-etat]:nth-child(even) { background-color: transparent; }
.colonnes-lieux .admin-table tbody tr[data-lieu-etat].est-paire { background-color: color-mix(in srgb, var(--text) 3.5%, transparent); }
.colonnes-lieux tr[data-lieu-etat],
.colonnes-lieux .carte-pin { transition: opacity .22s ease; }
.colonnes-lieux .est-sortie { opacity: 0; pointer-events: none; }
.colonnes-lieux .est-cachee { display: none; }
@media (prefers-reduced-motion: reduce) {
.colonnes-lieux tr[data-lieu-etat], .colonnes-lieux .carte-pin { transition: none; }
}
.carte-pin-masque .carte-core { fill: var(--muted-text); stroke: var(--muted-text); opacity: 0.45; }
.carte-pin-masque .carte-halo { opacity: 0.12; }
.carte-pin-masque .carte-lbl { fill: var(--muted-text); opacity: 0.6; font-weight: 500; }
.carte-pin-masque.carte-pin-hi .carte-core,
.carte-pin-masque.carte-pin-hi .carte-lbl { opacity: 1; }
@media (max-width: 1100px) { .colonnes-lieux { grid-template-columns: minmax(0, 1fr); } }
.lieu-actions { display: inline-flex; gap: 10px; align-items: center; justify-content: center; }
.ico-lien { display: inline-flex; color: var(--muted-text); transition: color .15s ease, transform .15s ease; }
.ico-lien:hover, .ico-lien:focus-visible { color: var(--link, var(--text)); transform: translateY(-1px); }
.fr-cal { --vac-fond: color-mix(in srgb, var(--yellow) 16%, transparent);
--vac-fond-fort: color-mix(in srgb, var(--yellow) 34%, transparent); }
:root[data-theme="dark"] .fr-cal { --vac-fond: color-mix(in srgb, var(--yellow) 12%, transparent);
--vac-fond-fort: color-mix(in srgb, var(--yellow) 30%, transparent); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .fr-cal { --vac-fond: color-mix(in srgb, var(--yellow) 12%, transparent);
--vac-fond-fort: color-mix(in srgb, var(--yellow) 30%, transparent); }
}
.fr-cal[data-vacances=""] .fr-cell[data-vac],
.fr-cal[data-vacances="A"] .fr-cell[data-vac-zones~="A"],
.fr-cal[data-vacances="B"] .fr-cell[data-vac-zones~="B"],
.fr-cal[data-vacances="C"] .fr-cell[data-vac-zones~="C"] { background: var(--vac-fond); }
.fr-cal[data-we-feries] .fr-cell[data-we],
.fr-cal[data-we-feries] .fr-cell[data-ferie],
.fr-cal[data-we-feries] .fr-cell[data-pont] { background: var(--vac-fond); }
.fr-cal[data-vacances=""] .fr-sem[data-vac-zones][data-vac-plein],
.fr-cal[data-vacances="A"] .fr-sem[data-vac-zones~="A"][data-vac-plein],
.fr-cal[data-vacances="B"] .fr-sem[data-vac-zones~="B"][data-vac-plein],
.fr-cal[data-vacances="C"] .fr-sem[data-vac-zones~="C"][data-vac-plein] {
background: var(--vac-fond-fort);
color: var(--text);
border-radius: 4px;
font-weight: 700;
}
.fr-cal[data-vacances=""] .fr-sem[data-vac-zones]:not([data-vac-plein]),
.fr-cal[data-vacances="A"] .fr-sem[data-vac-zones~="A"]:not([data-vac-plein]),
.fr-cal[data-vacances="B"] .fr-sem[data-vac-zones~="B"]:not([data-vac-plein]),
.fr-cal[data-vacances="C"] .fr-sem[data-vac-zones~="C"]:not([data-vac-plein]) {
background-image: radial-gradient(circle at 50% 92%, var(--yellow-dark) 0 1.6px, transparent 1.6px);
}
.frise-zones { display: inline-flex; gap: 4px; align-items: center; margin-left: 6px; }
.frise-zones[hidden] { display: none; }
.frise-zone {
--vac-fond: color-mix(in srgb, var(--yellow) 16%, transparent);
padding: 3px 9px;
border: 1px solid var(--grey-border);
border-radius: 999px;
background: transparent;
color: var(--muted-text);
font: inherit;
font-size: .82rem;
line-height: 1.2;
cursor: pointer;
}
:root[data-theme="dark"] .frise-zone { --vac-fond: color-mix(in srgb, var(--yellow) 12%, transparent); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .frise-zone { --vac-fond: color-mix(in srgb, var(--yellow) 12%, transparent); }
}
.frise-zone:hover { border-color: var(--yellow-dark); color: var(--text); }
.frise-zone.est-active {
background: var(--vac-fond);
border-color: var(--yellow-dark);
color: var(--text);
font-weight: 600;
}
.frise-vacances[aria-pressed="true"] { background: var(--yellow); color: #1f2937; }
.fr-zone.fr-zone-embryon::before {
background-color: transparent;
background-image: radial-gradient(
circle at 1px 1px,
color-mix(in srgb, var(--text) 34%, transparent) 1px,
transparent 1.2px
);
background-size: 4px 4px;
background-origin: border-box;
border: 1px solid color-mix(in srgb, var(--text) 22%, transparent);
border-top-width: 0;
border-bottom-width: 0;
}
.fr-zone-embryon.fr-zm-h::before { border-top-width: 1px; }
.fr-zone-embryon.fr-zm-b::before { border-bottom-width: 1px; }
[data-vue="continu"] .fr-zone-embryon::before { border-top-width: 0; border-bottom-width: 0; }
[data-vue="continu"] .fr-zone-embryon.fr-zc-h::before { border-top-width: 1px; }
[data-vue="continu"] .fr-zone-embryon.fr-zc-b::before { border-bottom-width: 1px; }
.fr-cal:not([data-sans-zones]) .fr-zone.fr-zone-embryon > .nav-case,
.fr-cal:not([data-sans-zones]) .fr-zone.fr-zone-embryon > .nav-case.est-passe { --fond-vide: transparent; }
.fr-zone.fr-zone-annulee::before { background-color: color-mix(in srgb, var(--text) 8%, transparent); }
.fr-cal:not([data-sans-zones]) .fr-zone.fr-zone-annulee > .nav-case { --fond-vide: transparent; opacity: 0.5; }
.fr-cal:not([data-sans-zones]) .fr-zone.fr-zone-annulee > .nav-case,
.fr-cal:not([data-sans-zones]) .fr-zone.fr-zone-annulee > .nav-case.est-passe {
--fond-vide: color-mix(in srgb, var(--text) 22%, transparent);
}
.fr-zone.fr-zone-annulee.fr-zone-vive::before { background-color: color-mix(in srgb, var(--text) 16%, transparent); }
.fr-zone.fr-zone-annulee::before {
background-image: repeating-linear-gradient(
-45deg,
transparent 0 3.771px,
color-mix(in srgb, var(--text) 17%, transparent) 3.771px 4.714px
);
}
.fr-zone.fr-zone-danger::before {
background-image: repeating-linear-gradient(
-45deg,
transparent 0 7px,
color-mix(in srgb, var(--orange-alerte) 34%, transparent) 7px 14px
);
}
.fr-zone.fr-zone-cloture-ratee::before {
background-image: repeating-linear-gradient(
-45deg,
transparent 0 7px,
color-mix(in srgb, var(--error-text) 34%, transparent) 7px 14px
);
}
.carte-pin[data-lieu-pin] { cursor: pointer; }
.admin-table tbody tr[data-zone-cle].ligne-surlignee td { scroll-margin-top: 120px; }
.table-defilante {
max-height: min(58svh, 620px);
overflow: auto;
}
@media (max-height: 900px) { .table-defilante { max-height: 48svh; } }
.table-defilante thead th {
position: sticky;
top: 0;
z-index: 3;
background: var(--surface);
box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 14%, transparent);
}
.inscrites-carte { position: sticky; top: calc(var(--header-h, 90px) + 12px); }
@media (max-width: 1100px) {
.inscrites-colonnes, .admin-colonnes { grid-template-columns: minmax(0, 1fr); }
.inscrites-carte { position: static; }
}
.carte-lieux.carte-personnes { max-width: none; }
.carte-lbl-personne {
font-size: 8px;
paint-order: stroke;
stroke: var(--grey-bg);
stroke-width: 3px;
stroke-linejoin: round;
}
.carte-personnes .carte-nombre {
font-size: 9px;
font-weight: 700;
fill: var(--text);
pointer-events: none;
}
.carte-personnes .carte-pin-stagiaire .carte-nombre { fill: var(--navy-dark); }
.carte-lieux .carte-nombre {
font-size: 9px;
font-weight: 700;
fill: var(--text);
pointer-events: none;
}
.carte-lieux .carte-pin-favori .carte-nombre { fill: var(--navy-dark); }
.carte-personnes-legende {
display: flex;
flex-wrap: wrap;
gap: 6px 16px;
margin: 6px 0 0;
font-size: 0.82rem;
}
.carte-legende-item { display: inline-flex; align-items: center; gap: 6px; }
.carte-puce {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--surface);
border: 2px solid color-mix(in srgb, var(--text) 60%, transparent);
display: inline-block;
}
.carte-puce-stagiaire { background: var(--yellow-dark); border-color: var(--yellow-dark); }
.th-bascule {
border: none;
background: none;
padding: 0;
font: inherit;
color: inherit;
cursor: pointer;
text-decoration: underline dotted;
text-underline-offset: 3px;
}
.th-bascule:hover { color: var(--yellow-dark); }
.th-tri {
border: none;
background: none;
padding: 0;
font: inherit;
color: inherit;
text-align: inherit;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px;
}
.th-tri::after {
content: "▾";
font-size: 0.8em;
color: transparent;
transition: color 0.15s ease, transform 0.15s ease;
}
.th-tri:hover::after { color: var(--muted-text); }
th[aria-sort="ascending"] .th-tri::after { color: var(--yellow-dark); transform: rotate(180deg); }
th[aria-sort="descending"] .th-tri::after { color: var(--yellow-dark); }
th[aria-sort="ascending"] .th-tri,
th[aria-sort="descending"] .th-tri { color: var(--yellow-dark); }
@media (prefers-reduced-motion: reduce) {
.th-tri::after { transition: none; }
}
.inscrites-outils {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 8px;
margin: 0 0 10px;
font-size: 0.88rem;
}
.inscrites-colonnes .table-fit th,
.admin-colonnes .table-fit th { white-space: normal; vertical-align: bottom; }
.cell-date { white-space: nowrap; }
.date-pile { display: inline-grid; align-content: center; }
.date-pile > span { grid-area: 1 / 1; }
.date-pile > .date-relative { visibility: hidden; }
.dates-relatives .date-pile > .date-absolue { visibility: hidden; }
.dates-relatives .date-pile > .date-relative { visibility: visible; }
.table-fit td.inscrite-profil { white-space: nowrap; }
.profil-complet { color: var(--yellow-dark); display: inline-flex; }
.profil-part { font-weight: 700; }
.profil-resume { cursor: help; }
.card-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.card-head-actions .btn { margin-top: 0; }
h1 .titre-badge,
h2 .titre-badge {
margin-left: 10px;
font-size: 0.72rem;
font-weight: 600;
vertical-align: middle;
position: relative;
top: -2px;
}
.page-titre-admin {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
}
.page-titre-admin h1 { margin-bottom: 0; }
.admin-edit-titre { margin-bottom: 4px; }
.admin-edit-sous { font-size: 0.62em; font-weight: 400; white-space: nowrap; }
.formations-table th,
.formations-table td { text-align: center; }
.formations-table th:nth-child(2),
.formations-table td:nth-child(2) { text-align: left; }
.formations-ordre { width: 1%; white-space: nowrap; }
.formations-ordre-form { display: inline-flex; gap: 2px; margin: 0; }
.formations-interet { font-variant-numeric: tabular-nums; }
.formations-interet a { display: inline-flex; align-items: center; gap: 5px; }
.btn-ordre {
border: 1px solid var(--grey-border);
background: var(--surface);
color: var(--text);
border-radius: 8px;
width: 26px;
height: 26px;
line-height: 1;
cursor: pointer;
transition: border-color 0.15s ease, color 0.15s ease;
}
.btn-ordre:hover:not(:disabled) { border-color: var(--yellow-dark); color: var(--yellow-dark); }
.btn-ordre:disabled { opacity: 0.35; cursor: default; }
.form-groupe-titre {
margin: 26px 0 2px;
padding-top: 14px;
border-top: 1px solid var(--grey-border);
font-size: 1rem;
}
.form-groupe-titre:first-of-type { margin-top: 6px; padding-top: 0; border-top: 0; }
.form-groupe-aide { margin: 0 0 10px; font-size: 0.86rem; }
.admin-table.table-pleine { width: 100%; }
.stage-code-cell { white-space: nowrap; }
.stage-code-cell .stage-code { margin-right: 0; }
.stage-code {
margin-right: 7px;
color: inherit;
opacity: 0.62;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.74rem;
white-space: nowrap;
}
h1 .stage-code {
font-size: 0.738em;
margin-right: 0.5em;
}
.code-alerte {
display: block;
padding: 1px 0 1px 8px;
border-left: 2px solid var(--grey-border);
color: var(--muted-text);
font-size: 0.82rem;
line-height: 1.35;
}
.code-alerte + .code-alerte { margin-top: 4px; }
.code-alerte-info { opacity: 0.7; }
.code-alerte-erreur {
border-left-color: var(--danger-solid);
color: var(--text);
}
.admin-table.table-pleine td.stage-titre-cell { max-width: none; white-space: nowrap; }
.admin-table.table-pleine td.stage-com-cell { white-space: normal; min-width: 26ch; }
.table-fit td.stage-titre-cell { max-width: 34ch; white-space: normal; }
.table-fit td.stage-formation-cell { max-width: 24ch; white-space: normal; }
.stage-etat-cell, .stage-resa-cell { white-space: nowrap; }
.stage-resa-lien {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
font-variant-numeric: tabular-nums;
}
.stage-resa-lien:hover { text-decoration: underline; }
.remplit-place { white-space: nowrap; }
.remplit-valider { display: inline; margin-left: 8px; }
.remplit-accepter {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
padding: 0;
border: 1px solid var(--grey-border);
border-radius: 50%;
background: var(--surface);
color: var(--muted-text);
cursor: pointer;
vertical-align: middle;
transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.remplit-accepter:hover,
.remplit-accepter:focus-visible {
background: var(--success-bg);
border-color: var(--success-text);
color: var(--success-text);
transform: translateY(-1px);
}
.resa-part { display: inline-flex; align-items: center; gap: 4px; cursor: help; }
.resa-part .cell-ico { margin-right: 0; }
.card-head {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
}
.card-head h1 {
margin: 0;
}
.stages-synthese {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
margin: 16px 0 8px;
}
.stages-synthese .fil-filtres { margin: 0; gap: 6px; }
.stages-compte { margin-left: auto; font-weight: 600; white-space: nowrap; }
.stages-filtres .fil-filtre[data-st-filtre]:not([data-st-filtre=""]) { display: inline-flex; align-items: center; gap: 0.35rem; }
.st-point { display: inline-block; width: 0.6em; height: 0.6em; border-radius: 50%; flex: none; box-sizing: border-box; }
.st-point-embryon { border: 1px dashed var(--muted-text); }
.st-point-remplissage { background: var(--muted-text); opacity: .55; }
.st-point-confirme, .st-point-complet, .st-point-verrouille, .st-point-en_cours { background: var(--yellow); }
.st-point-tenu, .st-point-cloture { background: color-mix(in srgb, var(--yellow) 45%, var(--surface)); border: 1px solid color-mix(in srgb, var(--yellow) 70%, var(--text)); }
.st-point-annule { background: repeating-linear-gradient(-45deg, var(--muted-text) 0 1px, transparent 1px 3px); border: 1px solid var(--muted-text); }
button.stage-statut {
border: 1px solid var(--grey-border);
font: inherit;
cursor: pointer;
}
.stage-edit-status {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin: 0 0 20px;
padding: 12px 16px;
background: var(--grey-bg);
border-radius: 10px;
}
.stage-edit-status .btn { margin-left: auto; }
.char-counter {
margin-top: -6px;
font-size: 0.8rem;
}
.char-counter-full {
color: var(--danger-solid);
font-weight: 600;
}
.form-actions {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
margin-top: 8px;
}
.form-actions .btn { margin: 0; }
.stage-delete-form {
margin-top: 28px;
padding-top: 20px;
border-top: 1px solid var(--grey-border);
}
.header-admin-tabs {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
row-gap: 4px;
flex: 0 1 auto;
margin: 0 0 0 12px;
overflow: visible;
}
.header-admin-tab {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
min-width: 40px;
padding: 5px 7px;
border-radius: 12px;
color: rgba(255, 255, 255, 0.78);
text-decoration: none;
flex: 0 0 auto;
transition: color 0.15s ease, background 0.15s ease;
}
.header-admin-tab:hover {
color: var(--white);
background: rgba(255, 255, 255, 0.12);
}
.header-admin-tab.is-active {
color: var(--navy);
background: var(--yellow);
}
.header-admin-quit {
margin-left: 6px;
border-left: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 0 12px 12px 0;
padding-left: 9px;
}
.header-admin-quit:hover {
color: #ffd7d0;
background: rgba(230, 90, 70, 0.25);
}
.site-header .wrap:has(.header-admin-tabs) > .brand { order: 1; }
.site-header .wrap:has(.header-admin-tabs) > .header-right { order: 2; }
.site-header .wrap:has(.header-admin-tabs) > .header-admin-tabs {
order: 3;
flex-basis: 100%;
}
.site-header .wrap:has(.header-admin-tabs) .header-admin-tab {
padding-left: 4px;
padding-right: 4px;
}
.site-header .wrap:has(.header-admin-tabs) .header-admin-tabs { column-gap: 8px; }
.site-header .wrap:has(.header-admin-tabs) .header-admin-tab-label,
.site-header .wrap:has(.header-admin-tabs) .header-right .theme-toggle[data-hlabel]::after {
display: none;
}
@media (hover: hover) and (pointer: fine) and (min-width: 1120px) {
.site-header .wrap:has(.header-admin-tabs) .header-admin-tab {
position: relative;
width: 40px;
justify-content: center;
padding-left: 0;
padding-right: 0;
}
.site-header .wrap:has(.header-admin-tabs) .header-admin-tabs { column-gap: 6px; }
.site-header .wrap:has(.header-admin-tabs) .header-right .theme-toggle[data-hlabel] {
position: relative;
}
.site-header .wrap:has(.header-admin-tabs) .header-right .theme-toggle[data-hlabel]::after {
display: block;
position: absolute;
top: calc(100% + 6px);
left: 50%;
translate: -50% 0;
z-index: 5;
padding: 4px 8px;
border-radius: 6px;
background: var(--navy);
color: var(--white);
font-size: .68rem;
white-space: nowrap;
box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
opacity: 0;
visibility: hidden;
transition: opacity .12s ease;
pointer-events: none;
}
.site-header .wrap:has(.header-admin-tabs) .header-right .theme-toggle[data-hlabel]:hover::after,
.site-header .wrap:has(.header-admin-tabs) .header-right .theme-toggle[data-hlabel]:focus-visible::after {
opacity: 1;
visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
.site-header .wrap:has(.header-admin-tabs) .header-right .theme-toggle[data-hlabel]::after { transition: none; }
}
}
body:has(.header-admin-tabs) #confid-link { display: none; }
body:has(.header-admin-tabs) .footer-confid-mobile { display: inline; }
.header-admin-tab-icon {
display: flex;
width: 22px;
height: 22px;
}
.header-admin-tab-icon svg {
width: 100%;
height: 100%;
}
.header-admin-tab-icon.a-pastille { position: relative; overflow: visible; }
.tab-pastille {
position: absolute;
right: -3px;
bottom: -1px;
width: 9px;
height: 9px;
border-radius: 50%;
box-shadow: 0 0 0 2px rgba(12, 17, 22, .5);
}
.tab-pastille-ouvert { background: #4caf7d; }
.tab-pastille-sommeil { background: #d98218; }
.tab-compte { top: -8px; right: -10px; }
.header-admin-tab-label,
.theme-toggle[data-hlabel]::after {
color: inherit;
font-size: 0.6rem;
font-weight: 600;
line-height: 1;
white-space: nowrap;
flex: 0 0 auto;
}
.theme-toggle[data-hlabel]::after {
content: attr(data-hlabel);
color: rgba(255, 255, 255, 0.82);
}
@keyframes icon-pop {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.18); }
}
.header-admin-tab:hover .header-admin-tab-icon {
animation: icon-pop 0.4s ease;
}
@media (max-width: 1024px) {
.header-admin-tabs {
order: 3;
flex-basis: 100%;
margin: 0;
overflow-x: auto;
justify-content: flex-start;
}
.site-header .wrap:has(.header-admin-tabs) .header-admin-tab {
min-width: 36px;
padding: 7px 4px;
gap: 0;
}
.site-header .wrap:has(.header-admin-tabs) .header-admin-tabs { column-gap: 4px; }
}
@media (max-width: 700px) {
.site-header .wrap {
padding-left: 16px;
padding-right: 16px;
}
.brand-logo {
height: 28px;
}
.header-right {
gap: 6px;
}
.header-user-name {
padding: 6px 10px;
font-size: 0.85rem;
}
.theme-toggle {
min-width: 40px;
padding: 4px 5px;
}
.theme-groupe { --sw-top: 4px; --sw-decal: 0.4px; } 
.theme-toggle .hicon {
width: 20px;
height: 20px;
}
.theme-toggle[data-hlabel]::after,
.header-admin-tab-label {
font-size: 0.55rem;
}
}
.gamification-table td:first-child { width: 1%; white-space: nowrap; }
.pts {
display: inline-block;
min-width: 34px;
text-align: center;
padding: 3px 9px;
border-radius: 999px;
font-weight: 700;
font-size: 0.85rem;
color: #fff;
}
.pts-mineure { background: #3b9a5f; }
.pts-notable { background: var(--yellow-dark); color: var(--navy-dark); }
.pts-importante { background: var(--danger-solid); }
.pts-total { background: var(--navy); }
.journal-head {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
}
.journal-head h1 {
margin: 0;
}
.filtre-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
border: 1px solid var(--grey-border);
border-radius: 999px;
background: color-mix(in srgb, var(--yellow) 15%, transparent);
color: var(--text);
font-size: 0.78rem;
line-height: 1.4;
text-decoration: none;
cursor: pointer;
user-select: none;
}
.filtre-pill:hover { border-color: var(--muted-text); }
.filtre-off {
background: none;
border-style: dashed;
color: var(--muted-text);
opacity: 0.62;
}
.filtre-off:hover { opacity: 1; }
.filtre-on.filtre-mineure { background: #3b9a5f; border-color: #3b9a5f; color: #fff; }
.filtre-on.filtre-notable { background: var(--yellow-dark); border-color: var(--yellow-dark); color: var(--navy-dark); }
.filtre-on.filtre-importante { background: var(--danger-solid); border-color: var(--danger-solid); color: #fff; }
.filtre-n {
display: inline-block;
padding: 0 6px;
border-radius: 999px;
background: color-mix(in srgb, var(--text) 11%, transparent);
font-size: 0.72rem;
font-variant-numeric: tabular-nums;
}
.filtre-on.filtre-mineure .filtre-n,
.filtre-on.filtre-importante .filtre-n { background: rgba(255, 255, 255, 0.26); }
.filtre-on.filtre-notable .filtre-n { background: rgba(0, 0, 0, 0.14); }
.filtre-bouton {
flex: 0 0 auto;
padding: 3px 9px;
border: 1px solid var(--grey-border);
border-radius: 6px;
background: var(--grey-bg);
color: var(--muted-text);
font-size: 0.72rem;
line-height: 1.4;
text-decoration: none;
cursor: pointer;
}
.filtre-bouton:hover { color: var(--text); border-color: var(--muted-text); }
.filtre-bouton.est-actif { background: var(--navy); border-color: var(--navy); color: var(--white); }
:root[data-theme="dark"] .filtre-bouton.est-actif { background: var(--yellow); border-color: var(--yellow); color: var(--navy); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .filtre-bouton.est-actif { background: var(--yellow); border-color: var(--yellow); color: var(--navy); }
}
.time-toggle {
cursor: pointer;
font-variant-numeric: tabular-nums;
}
.imp-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
}
.imp-dot.imp-mineure { background: #3b9a5f; }
.imp-dot.imp-notable { background: var(--yellow-dark); }
.imp-dot.imp-importante { background: var(--danger-solid); }
.journal-clickable {
cursor: pointer;
}
.journal-clickable:hover {
background: var(--grey-bg);
}
.journal-open {
font-size: 1.4rem;
line-height: 1;
color: var(--muted-text);
text-decoration: none;
}
.journal-th-qui,
.journal-table td:nth-child(3) { white-space: nowrap; }
.journal-table th:nth-child(5),
.journal-table td:nth-child(5) {
white-space: nowrap;
min-width: 190px;
}
.journal-qui {
color: var(--yellow-dark);
text-decoration: none;
font-weight: 600;
}
.theme-dark .journal-qui {
color: var(--yellow);
}
.journal-qui:hover {
text-decoration: underline;
}
.site-footer {
border-top: 1px solid var(--grey-border);
padding: 12px 0;
color: var(--muted-text);
font-size: 0.78rem;
text-align: center;
}
.site-footer a {
color: var(--muted-text);
text-decoration: none;
}
.site-footer a:hover {
text-decoration: underline;
}
.footer-line {
margin: 0;
}
.footer-motto {
white-space: nowrap;
cursor: pointer;
user-select: none;
}
.footer-muscle {
display: inline-block;
margin-left: 4px;
opacity: 0;
transform: translateY(2px) scale(0.6);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.footer-motto:hover .footer-muscle {
opacity: 1;
transform: translateY(0) scale(1);
}
.egg-overlay {
position: fixed;
inset: 0;
z-index: 3000;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
background: rgba(16, 21, 27, 0.82);
padding: 24px;
animation: egg-fade 0.25s ease;
user-select: none;
-webkit-user-select: none;
}
.egg-overlay img {
-webkit-user-drag: none;
}
.egg-overlay .egg-close-hint a {
color: #ffd77a;
}
.egg-scene {
position: relative;
display: inline-block;
max-width: min(640px, 92vw);
line-height: 0;
}
.egg-close {
position: absolute;
top: 10px;
right: 10px;
width: 40px;
height: 40px;
border-radius: 999px;
border: none;
background: rgba(16, 21, 27, 0.55);
color: #fff;
font-size: 1.2rem;
cursor: pointer;
line-height: 1;
z-index: 1;
}
.egg-close:hover {
background: rgba(16, 21, 27, 0.8);
}
@keyframes egg-fade { from { opacity: 0; } to { opacity: 1; } }
.egg-scene img {
display: block;
width: 100%;
height: auto;
border-radius: 12px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.egg-overlay .egg-caption {
color: #fff;
font-weight: 700;
font-size: 1.1rem;
text-align: center;
text-wrap: pretty;
max-width: 640px;
}
.egg-overlay .egg-close-hint {
color: rgba(255, 255, 255, 0.6);
font-size: 0.85rem;
}
.petit-ecran-note {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 0 0 16px;
padding: 10px 12px;
background: color-mix(in srgb, var(--yellow) 20%, transparent);
border: 1px solid var(--yellow-dark);
border-radius: 10px;
font-size: 0.85rem;
color: var(--text);
}
.petit-ecran-note button {
flex: 0 0 auto;
border: none;
background: none;
color: var(--muted-text);
font-size: 1rem;
line-height: 1;
cursor: pointer;
padding: 2px 4px;
}
.paillette {
position: fixed;
top: 0;
z-index: 58;
pointer-events: none;
will-change: transform, opacity;
user-select: none;
}
.egg-emoji {
position: fixed;
z-index: 55;
pointer-events: none;
font-size: 1.6rem;
will-change: transform, opacity;
}
@media (max-width: 600px) {
.card { padding: 20px; }
.dispo-row { flex-direction: column; align-items: stretch; }
}
.toast-container {
position: fixed;
top: calc(var(--header-h, 90px) + 12px);
right: 16px;
z-index: 1000;
display: flex;
flex-direction: column;
gap: 8px;
max-width: calc(100vw - 32px);
}
.bell-alert .hicon {
transform-origin: 12px 4px;
animation: bell-ring 0.75s ease;
}
.toast {
background: var(--navy-dark);
color: var(--white);
padding: 10px 16px;
border-radius: 8px;
font-size: 0.9rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
opacity: 0;
transform: translateY(-8px);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast-visible {
opacity: 1;
transform: translateY(0);
}
.notif-badge {
position: absolute;
top: -4px;
right: -4px;
background: var(--danger-solid);
color: var(--white);
font-size: 0.65rem;
font-weight: 700;
min-width: 16px;
height: 16px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 3px;
line-height: 1;
}
.notif-dropdown {
position: absolute;
top: calc(100% + 20px);
right: 0;
width: 340px;
max-width: calc(100vw - 32px);
max-height: 400px;
overflow-y: auto;
background: var(--surface);
border: 1px solid var(--grey-border);
border-radius: 10px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
z-index: 1000;
}
.titre-avec-action {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
}
.titre-avec-action > h1,
.titre-avec-action > h2 {
margin-bottom: 0;
}
.titre-avec-action .tile-interest-btn { margin-top: 0; }
.titre-avec-action:has(> h1) { margin-bottom: 1.34em; }
.notif-filtre {
position: sticky;
top: 0;
z-index: 1;
display: flex;
gap: 4px;
padding: 8px 8px 7px;
background: var(--surface);
border-bottom: 1px solid var(--grey-border);
}
.notif-onglet {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 6px 10px;
border: 1px solid transparent;
border-radius: 7px;
background: none;
color: var(--muted-text);
font-family: inherit;
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
}
.notif-onglet:hover {
background: var(--grey-bg);
}
.notif-onglet.est-actif {
color: var(--text);
background: var(--grey-bg);
border-color: var(--grey-border);
}
.notif-onglet-n {
font-size: 0.74rem;
font-weight: 500;
opacity: 0.75;
font-variant-numeric: tabular-nums;
}
.notif-onglet.est-actif .notif-onglet-n {
color: var(--yellow-dark);
opacity: 1;
}
.notif-item {
display: block;
position: relative;
padding: 12px 16px;
border-bottom: 1px solid var(--grey-border);
border-left: 3px solid transparent;
color: var(--text);
text-decoration: none;
font-size: 0.9rem;
}
.notif-item:last-child {
border-bottom: none;
}
.notif-clickable {
cursor: pointer;
padding-right: 30px;
}
.notif-clickable:hover {
background: var(--grey-bg);
}
.notif-chevron {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--muted-text);
font-size: 1.3rem;
line-height: 1;
}
.notif-imp-mineure { border-left-color: #3b9a5f; }
.notif-imp-notable { border-left-color: var(--yellow-dark); }
.notif-imp-importante { border-left-color: var(--danger-solid); }
.notif-unread {
background: var(--grey-bg);
}
.notif-message {
display: block;
}
.notif-unread .notif-message {
font-weight: 600;
}
.notif-time {
display: block;
color: var(--muted-text);
font-size: 0.78rem;
font-weight: normal;
margin-top: 2px;
}
.notif-empty {
padding: 16px;
color: var(--muted-text);
font-size: 0.9rem;
margin: 0;
}
.notif-more {
display: block;
width: 100%;
padding: 10px;
border: none;
background: none;
color: var(--text);
font-size: 0.85rem;
font-weight: 600;
font-family: inherit;
cursor: pointer;
text-align: center;
}
.notif-more:hover {
background: var(--grey-bg);
}
.notif-more:disabled {
cursor: default;
opacity: 0.6;
}
.feedback-panel {
position: absolute;
top: calc(100% + 20px); 
right: 0;
width: 340px;
max-width: calc(100vw - 32px);
background: var(--surface);
border: 1px solid var(--grey-border);
border-radius: 10px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
z-index: 1000;
padding: 0 16px 16px;
max-height: calc(100svh - 110px);
overflow-y: auto;
overscroll-behavior: contain;
color: var(--text);
text-align: left;
font-weight: normal;
}
@media (max-width: 700px) {
.feedback-panel,
.notif-dropdown {
position: fixed;
top: calc(var(--fb-haut, 70px) + 8px);
right: 10px;
left: 10px;
width: auto;
max-width: none;
max-height: calc(100svh - var(--fb-haut, 70px) - 20px);
}
}
.feedback-panel h3 {
color: var(--text);
}
.feedback-panel .feedback-tete {
position: sticky;
top: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 0 -16px 8px;
padding: 14px 16px 10px;
background: var(--surface);
border-bottom: 1px solid var(--grey-border);
}
.feedback-panel .feedback-tete h3 { margin: 0; }
.feedback-envoi { flex: 0 0 auto; margin: 0; padding: 7px 14px; font-size: 0.88rem; }
.feedback-envoi[hidden] { display: none; }
.feedback-panel h3 {
margin: 0 0 8px;
}
.feedback-panel textarea {
width: 100%;
box-sizing: border-box;
margin: 6px 0 12px;
}
.feedback-panel .checkbox-row {
margin-top: 8px;
}
.feedback-panel > .muted {
text-align: justify;
}
.feedback-honeypot {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
opacity: 0;
}
.dashboard-intro {
color: var(--muted-text);
margin: 0 0 8px;
display: flex;
align-items: baseline;
gap: 10px;
width: fit-content;
}
.dashboard-intro-long {
align-items: flex-start;
width: 100%;
margin-bottom: 16px;
}
.dashboard-intro-long p { margin: 0 0 6px; }
.dashboard-intro-long p:last-child { margin-bottom: 0; }
.intro-close {
background: none;
border: 1px solid var(--grey-border);
border-radius: 999px;
width: 22px;
height: 22px;
font-size: 0.7rem;
line-height: 1;
color: var(--muted-text);
cursor: pointer;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.intro-close:hover {
border-color: var(--yellow-dark);
color: var(--text);
}
.profil-hint { display: block; }
.profil-hint > .intro-close { float: right; margin: 1px 0 6px 10px; }
.profil-hint-txt { display: inline; }
.field-row {
display: flex;
gap: 16px;
align-items: flex-start;
}
.field-col { flex: 1 1 0; min-width: 0; }
.field-col > label { display: block; }
.field-col-commune { flex: 3 1 0; }
.field-col-cp { flex: 0 0 120px; }
.field-col-pays { flex: 0 0 120px; }
.field-col-sigle { flex: 0 0 96px; }
@media (max-width: 560px) {
.field-row { flex-direction: column; gap: 0; align-items: stretch; }
.field-col-commune, .field-col-cp, .field-col-pays { flex: 1 1 auto; }
}
.input-readonly {
background: var(--grey-bg);
color: var(--muted-text);
border-style: dashed;
cursor: not-allowed;
user-select: none;
-webkit-user-select: none;
}
.field-prefilled {
color: color-mix(in srgb, var(--muted-text) 55%, var(--surface));
}
.tip-basque {
text-decoration: underline dotted;
text-underline-offset: 5px;
text-decoration-thickness: 1px;
cursor: help;
}
::placeholder {
color: color-mix(in srgb, var(--muted-text) 50%, var(--surface));
opacity: 1;
}
.field-empty {
border-color: var(--yellow-dark);
box-shadow: 0 0 0 1px var(--yellow-dark);
}
.input-readonly:focus {
outline: none;
border-color: var(--grey-border);
}
.seg {
display: inline-flex;
align-items: stretch;
border: 1px solid var(--grey-border);
border-radius: 999px;
overflow: hidden;
margin-top: 6px;
}
.seg-item {
display: flex;
align-items: stretch;
cursor: pointer;
}
.seg-item span {
display: flex;
align-items: center;
padding: 9px 20px;
font-size: 0.9rem;
}
.seg-item:not(:last-child) span {
border-right: 1px solid var(--grey-border);
}
.seg-item input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.seg-item:has(input:checked) span {
background: var(--yellow);
color: var(--navy);
font-weight: 600;
}
.seg-item input:focus-visible + span {
outline: 2px solid var(--yellow-dark);
outline-offset: -2px;
}
.pastilles-choix {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 8px;
}
.pastille-choix {
display: flex;
flex-direction: column;
gap: 2px;
padding: 9px 16px;
border: 1px solid var(--grey-border);
border-radius: 12px;
background: var(--surface);
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease;
margin: 0;
}
.field-row .pastilles-choix { margin-top: 6px; align-items: stretch; }
.field-row .pastille-choix { justify-content: center; padding: 10px 16px; }
.field-row .pastille-choix .pastille-choix-label { line-height: 1.2; }
.pastille-choix input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.pastille-choix-label {
font-size: 0.95rem;
font-weight: 600;
color: var(--text);
}
.pastille-choix-ex {
font-size: 0.72rem;
color: var(--muted-text);
}
.pastille-choix:has(input:checked) {
border-color: var(--yellow-dark);
background: color-mix(in srgb, var(--yellow) 16%, transparent);
}
.pastille-choix:has(input:focus-visible) {
outline: 2px solid var(--yellow-dark);
outline-offset: 2px;
}
.btn-balanced {
white-space: nowrap;
}
@media (max-width: 560px) {
.btn-balanced { white-space: normal; text-wrap: balance; max-width: 100%; }
}
.tel-check {
color: var(--danger-solid);
font-weight: 600;
margin-top: 6px;
}
.field-col p,
.account-col p {
text-align: justify;
}
.account-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
align-items: start;
}
@media (max-width: 640px) {
.account-cols { grid-template-columns: 1fr; }
}
.account-col h3 { margin-top: 0; }
.account-col .btn {
display: block;
width: 100%;
max-width: 320px;
margin: 0 auto;
text-align: center;
}
.account-data-actions {
display: flex;
flex-direction: column;
gap: 12px;
align-items: center;
}
.group-title {
font-size: 1.05rem;
border-bottom: 2px solid var(--yellow);
padding-bottom: 6px;
margin: 36px 0 16px;
}
.tiles {
display: grid;
grid-template-columns: repeat(auto-fill, min(350px, 100%));
justify-content: center;
gap: 16px;
align-items: start;
}
.tile {
display: flex;
flex-direction: column;
gap: 12px;
background: var(--surface);
border: 1px solid var(--navy);
border-radius: 12px;
padding: 22px;
text-decoration: none;
color: var(--text);
transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
position: relative;
aspect-ratio: 1 / 1;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .tile {
border-color: var(--yellow-dark);
}
}
:root[data-theme="dark"] .tile {
border-color: var(--yellow-dark);
}
.tile p {
text-align: justify;
hyphens: auto;
}
.tile:hover {
transform: translateY(-2px);
border-color: var(--yellow);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
opacity: 1;
}
.tile:focus-visible {
outline: 2px solid var(--yellow);
outline-offset: 2px;
}
.tile-icon {
width: 52px;
height: 52px;
border-radius: 12px;
background: var(--grey-bg);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.7rem;
}
.tile h2 {
margin: 0;
font-size: 1.05rem;
border-bottom: none;
padding-bottom: 0;
}
.tile p {
margin: 0;
color: var(--muted-text);
font-size: 0.9rem;
flex-grow: 1;
}
.tile-status {
display: inline-block;
font-size: 0.8rem;
font-weight: 600;
padding: 4px 12px;
border-radius: 12px;
width: fit-content;
text-wrap: balance;
text-align: center;
line-height: 1.35;
}
.tile-countdown {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
color: var(--text);
}
.tile-countdown .cd-time {
font-variant-numeric: tabular-nums;
font-weight: 700;
font-size: 1.25rem;
letter-spacing: 0.5px;
}
.tile-countdown .cd-sub {
font-size: 0.8rem;
color: var(--muted-text);
margin-top: 2px;
}
.theme-dark .tile-countdown { color: var(--yellow); }
.tile-deadline {
font-size: 0.85rem;
font-weight: 600;
color: var(--danger-solid);
}
.status-pill {
display: inline-flex;
align-items: center;
font-size: 0.82rem;
font-weight: 600;
line-height: 1.3;
padding: 3px 10px;
border-radius: 999px;
white-space: nowrap;
user-select: none;
}
.status-todo { background: color-mix(in srgb, var(--yellow) 25%, transparent); color: var(--text); }
.status-done { background: color-mix(in srgb, var(--yellow) 55%, transparent); color: var(--text); }
.status-info { background: var(--grey-bg); color: var(--muted-text); }
.status-progress { background: color-mix(in srgb, var(--yellow-dark) 22%, transparent); color: var(--text); }
.tile-progress {
display: flex;
align-items: center;
gap: 8px;
width: fit-content;
max-width: 100%;
}
.tile-progress-bar {
width: 90px;
height: 6px;
background: color-mix(in srgb, var(--yellow) 25%, transparent);
border-radius: 999px;
overflow: hidden;
}
.tile-progress-fill {
display: block;
height: 100%;
background: var(--yellow-dark);
transition: width 0.4s ease;
}
.tile-progress-label {
font-size: 0.78rem;
font-weight: 600;
color: var(--muted-text);
}
@media (prefers-reduced-motion: reduce) {
.tile-progress-fill {
transition: none;
}
}
.tile-nuage-ancre {
position: relative;
margin-top: auto;      
display: block;
min-height: 44px;
}
.capsule-resume-ancree .capsule-resume-corps {
gap: 4px 12px;
padding: 10px 12px;
flex-wrap: nowrap;
}
.tile-nuage-ancre > .capsule-avancement { min-height: 48px; }
.tile-nuage-ancre > .capsule-avancement > .capsule-resume-corps,
.tile-nuage-ancre > .capsule-avancement > .capsule-avancement-corps { flex: 1 1 auto; }
.capsule-avancement.capsule-resume-ancree,
.capsule-avancement.capsule-ancree {
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: auto;           
transform: none;       
}
@media (hover: hover) {
.capsule-avancement.capsule-resume-ancree:hover,
.capsule-avancement.capsule-ancree:hover { transform: none; }
}
.tile-progress2 {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: auto;
padding: 10px 14px;
background: var(--surface);
border: 1px solid var(--navy);
border-radius: 14px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 6px 14px rgba(0, 0, 0, 0.12);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .tile-progress2:not(:has(.status-done)) {
border-color: var(--yellow-dark);
}
}
:root[data-theme="dark"] .tile-progress2:not(:has(.status-done)) {
border-color: var(--yellow-dark);
}
.capsule-avancement-corps .tile-progress2 {
flex: 1 1 auto;
padding: 0;
background: none;
border: none;
box-shadow: none;
}
.tile-progress2-sansbarre {
justify-content: center;
}
.tile-progress2-sansbarre .tile-progress2-label {
white-space: normal;
min-width: 0;
text-wrap: balance;
}
@keyframes nuage-halo {
from {
box-shadow: 0 0 0 6px rgba(255, 200, 87, 0.45), 0 0 26px 6px rgba(255, 200, 87, 0.35);
border-color: var(--yellow);
}
to {
box-shadow: 0 0 0 0 rgba(255, 200, 87, 0);
}
}
.capsule-avancement.nuage-halo {
animation: nuage-halo 2s ease-out;
}
@media (prefers-reduced-motion: reduce) {
.capsule-avancement.nuage-halo {
animation: none;
}
}
.tile-progress2-label {
font-size: 0.82rem;
font-weight: 600;
padding: 3px 10px;
border-radius: 999px;
user-select: none;
white-space: nowrap;
min-width: 124px;
text-align: center;
}
.tile-progress2 .tile-progress-bar {
flex: 0 0 90px;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .tile-progress-bar {
background: color-mix(in srgb, var(--yellow) 45%, transparent);
}
:root:not([data-theme="light"]) .tile-progress2-label.status-todo,
:root:not([data-theme="light"]) .status-pill.status-todo {
background: color-mix(in srgb, var(--yellow) 45%, transparent);
}
:root:not([data-theme="light"]) .tile-progress2-label.status-progress,
:root:not([data-theme="light"]) .status-pill.status-progress {
background: color-mix(in srgb, var(--yellow-dark) 40%, transparent);
}
}
:root[data-theme="dark"] .tile-progress-bar {
background: color-mix(in srgb, var(--yellow) 45%, transparent);
}
:root[data-theme="dark"] .tile-progress2-label.status-todo,
:root[data-theme="dark"] .status-pill.status-todo {
background: color-mix(in srgb, var(--yellow) 45%, transparent);
}
:root[data-theme="dark"] .tile-progress2-label.status-progress,
:root[data-theme="dark"] .status-pill.status-progress {
background: color-mix(in srgb, var(--yellow-dark) 40%, transparent);
}
.capsule-resume-corps {
display: flex;
align-items: center;
gap: 4px 18px;
flex-wrap: wrap;
justify-content: center;
padding: 10px 18px;
}
.capsule-resume-item {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 0.95rem;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.capsule-resume-item b { font-weight: 700; }
.capsule-resume-detail-wrap {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition: grid-template-rows 0.24s ease, opacity 0.18s ease;
}
.capsule-resume-detail { overflow: hidden; min-height: 0; }
.capsule-resume-grille {
display: grid;
grid-template-columns: repeat(2, minmax(min-content, 1fr));
grid-template-rows: repeat(var(--resume-lignes, 3), auto);
grid-auto-flow: column;
justify-content: center;
gap: 5px 22px;
padding: 12px 18px 9px;
border-bottom: 1px solid var(--grey-border);
font-size: 0.8rem;
color: var(--muted-text);
}
.capsule-resume-detail-item { display: inline-flex; align-items: center; gap: 6px; }
.capsule-resume-detail-item svg { flex: 0 0 auto; opacity: 0.75; }
.capsule-resume-detail-txt { display: flex; flex-direction: column; line-height: 1.2; }
.capsule-resume-l1, .capsule-resume-l2 { white-space: nowrap; }
.capsule-resume-l2 { opacity: 0.85; }
@media (max-width: 380px) {
.capsule-resume-grille {
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-auto-flow: row;
}
}
.nuage-place-reservee { font-weight: 700; color: var(--text); }
.nuage-place-confirmee {
position: relative;
font-weight: 700;
color: var(--yellow-dark);
}
.nuage-place-confirmee::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 2px;
border-radius: 2px;
background-image: linear-gradient(90deg,
currentColor 0%,
color-mix(in srgb, currentColor 30%, #fff) 50%,
currentColor 100%);
background-size: 300% 100%;
background-position: 120% 0;
transform-origin: left center;
animation: nuage-place-trait 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both,
nuage-place-reflet 5s 1.4s ease-in-out infinite;
}
@keyframes nuage-place-trait {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
@keyframes nuage-place-reflet {
0%, 55% { background-position: 120% 0; }
85%, 100% { background-position: -20% 0; }
}
@media (prefers-reduced-motion: reduce) {
.nuage-place-confirmee::after { animation: none; }
}
@media (hover: hover) {
.capsule-resume:hover .capsule-resume-detail-wrap,
.capsule-ouvrable:hover .capsule-resume-detail-wrap { grid-template-rows: 1fr; opacity: 1; }
}
.capsule-ouvrable { cursor: pointer; }
.capsule-avancement:not(.capsule-ouvrable) .capsule-manque-grille { display: none; }
.capsule-manque-grille {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 6px 8px;
padding: 11px 16px 9px;
border-bottom: 1px solid var(--grey-border);
font-size: 0.8rem;
color: var(--muted-text);
}
.capsule-manque-tete { font-weight: 600; color: var(--text); }
.capsule-manque-liste {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 5px;
}
.capsule-manque-liste a,
.capsule-manque-liste span {
padding: 1px 9px;
border: 1px solid var(--grey-border);
border-radius: 999px;
background: var(--surface);
color: var(--text);
text-decoration: none;
white-space: nowrap;
}
.capsule-manque-liste a:hover { border-color: var(--yellow-dark); }
@keyframes manque-part-kf {
0%   { opacity: 1; transform: scale(1); }
25%  {
opacity: 1;
transform: scale(1.08);
border-color: var(--yellow-dark);
color: var(--yellow-dark);
box-shadow: 0 0 12px color-mix(in srgb, var(--yellow) 70%, transparent);
}
60%  { opacity: 0.6; transform: scale(1); }
100% { opacity: 0; transform: scale(0.6); }
}
.capsule-manque-liste .manque-parti {
animation: manque-part-kf 0.85s ease forwards;
text-decoration: line-through;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.capsule-manque-liste .manque-parti { animation: none; opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
.capsule-resume-detail-wrap { transition: none; }
}
.capsule-avancement {
position: fixed;
left: 50%;
bottom: calc(20px + env(safe-area-inset-bottom, 0px));
z-index: 60;
display: flex;
flex-direction: column;
align-items: stretch;
background: var(--surface);
border: 1px solid var(--navy);
border-radius: 16px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 14px 34px rgba(0, 0, 0, 0.2);
width: min(340px, calc(100% - 32px));
transform: translateX(-50%);
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
.capsule-avancement { transition: none; }
}
.capsule-resume { --nuage-or: var(--yellow-dark); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .capsule-resume { --nuage-or: var(--yellow); }
}
:root[data-theme="dark"] .capsule-resume { --nuage-or: var(--yellow); }
.capsule-resume.capsule-resume-ok {
--nuage-or: var(--yellow-dark);
border-color: var(--yellow-dark);
}
.capsule-resume.capsule-resume-ok .capsule-resume-item[data-resume="places"],
.capsule-resume.capsule-resume-ok .capsule-resume-item[data-acquis] {
color: var(--yellow-dark);
}
.capsule-resume.capsule-resume-ok .capsule-resume-item[data-resume="places"] b,
.capsule-resume.capsule-resume-ok .capsule-resume-item[data-acquis] b { color: inherit; }
.capsule-resume.capsule-resume-ok .capsule-resume-item[data-resume="places"] svg,
.capsule-resume.capsule-resume-ok .capsule-resume-item[data-acquis] svg { opacity: 1; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .capsule-resume.capsule-resume-ok {
--nuage-or: var(--yellow);
border-color: var(--yellow);
}
:root:not([data-theme="light"]) .capsule-resume.capsule-resume-ok .capsule-resume-item[data-resume="places"],
:root:not([data-theme="light"]) .capsule-resume.capsule-resume-ok .capsule-resume-item[data-acquis] {
color: var(--yellow);
}
}
:root[data-theme="dark"] .capsule-resume.capsule-resume-ok {
--nuage-or: var(--yellow);
border-color: var(--yellow);
}
:root[data-theme="dark"] .capsule-resume.capsule-resume-ok .capsule-resume-item[data-resume="places"],
:root[data-theme="dark"] .capsule-resume.capsule-resume-ok .capsule-resume-item[data-acquis] {
color: var(--yellow);
}
.capsule-resume.nuage-attention {
border-color: var(--nuage-or);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 14px 34px rgba(0, 0, 0, 0.2),
0 0 0 3px rgba(255, 200, 87, 0.35);
}
.capsule-resume-corps .capsule-resume-item {
transition: color 0.3s ease;
}
.capsule-resume-corps .capsule-resume-item.nuage-item-actif {
color: var(--nuage-or);
}
.capsule-avancement.capsule-ouvert-bref .capsule-resume-detail-wrap,
.capsule-avancement.capsule-ouvert .capsule-resume-detail-wrap {
grid-template-rows: 1fr;
opacity: 1;
}
.capsule-resume { cursor: pointer; }
@keyframes nuage-detail-glow-kf {
0%   { color: var(--muted-text); text-shadow: none; }
25%  { color: var(--nuage-or); text-shadow: 0 0 10px rgba(255, 200, 87, 0.85); }
100% { color: var(--muted-text); text-shadow: none; }
}
.capsule-resume-detail-item.nuage-detail-glow .capsule-resume-detail-txt {
animation: nuage-detail-glow-kf 1.1s ease;
}
@media (prefers-reduced-motion: reduce) {
.capsule-resume-detail-item.nuage-detail-glow .capsule-resume-detail-txt { animation: none; }
}
.multi-hint {
display: inline-block;
font-size: 0.82rem;
font-style: italic;
color: var(--muted-text);
}
@keyframes multi-hint-pop-kf {
0%   { transform: scale(1); color: var(--muted-text); }
30%  { transform: scale(1.08); color: var(--yellow-dark); }
100% { transform: scale(1); color: var(--muted-text); }
}
.multi-hint.multi-hint-pop { animation: multi-hint-pop-kf 0.7s ease; }
@media (prefers-reduced-motion: reduce) { .multi-hint.multi-hint-pop { animation: none; } }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .capsule-avancement:not(.capsule-resume-ok):not(.est-complet) {
border-color: var(--yellow-dark);
}
}
:root[data-theme="dark"] .capsule-avancement:not(.capsule-resume-ok):not(.est-complet) {
border-color: var(--yellow-dark);
}
.capsule-avancement-corps {
display: flex;
align-items: center;
justify-content: center;
padding: 10px 14px;
}
body:has(.capsule-avancement) {
padding-bottom: 76px;
}
.pastille-nav-shelf {
position: sticky;
top: calc(var(--header-h, 90px) + 12px);
height: 0;
z-index: 55;
}
.pastille-nav {
position: absolute;
top: 0;
left: 0;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px 8px 13px;
background: var(--surface);
border: 1px solid var(--navy);
border-radius: 999px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 10px 24px rgba(0, 0, 0, 0.16);
text-decoration: none;
color: var(--text);
font-size: 0.92rem;
max-width: 100%;
opacity: 0;
transform: translateY(-10px);
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.pastille-nav.est-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
@media (hover: hover) {
.pastille-nav.est-visible:hover {
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16), 0 16px 32px rgba(0, 0, 0, 0.2);
}
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .pastille-nav {
border-color: var(--yellow-dark);
}
}
:root[data-theme="dark"] .pastille-nav {
border-color: var(--yellow-dark);
}
.pastille-nav > svg,
.pastille-nav .cmd-retour > svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform 0.16s ease;
}
.pastille-nav:hover > svg,
.pastille-nav:hover .cmd-retour > svg {
transform: translateX(-3px);
}
.pastille-nav-icone {
display: inline-flex;
vertical-align: -3px;
}
.pastille-nav-icone svg {
width: 16px;
height: 16px;
}
.pastille-nav-retour-icone {
display: inline-flex;
vertical-align: -3px;
color: var(--muted-text);
}
.pastille-nav-retour-icone svg {
width: 16px;
height: 16px;
}
.pastille-nav-sep {
color: var(--muted-text);
}
.pastille-nav-titre {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
@media (prefers-reduced-motion: reduce) {
.pastille-nav,
.pastille-nav svg {
transition: none;
}
}
.tile-locked {
opacity: 0.55;
filter: grayscale(0.4);
cursor: default;
}
.tile-locked:hover {
transform: none;
border-color: var(--grey-border);
box-shadow: none;
opacity: 0.55;
}
.tile-lock {
position: absolute;
top: -11px;
right: -11px;
z-index: 2;
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--navy);
border: 1px solid var(--navy);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
color: #fff;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .tile-lock {
background: var(--yellow-dark);
border-color: var(--yellow-dark);
color: var(--navy);
}
}
:root[data-theme="dark"] .tile-lock {
background: var(--yellow-dark);
border-color: var(--yellow-dark);
color: var(--navy);
}
.tile-interest-btn {
position: relative;
z-index: 1;
margin-top: 10px;
padding: 6px 12px;
border-radius: 999px;
border: 1px solid var(--grey-border);
background: var(--surface);
color: var(--muted-text);
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
opacity: 1;
transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.tile-locked .tile-interest-btn {
margin-top: auto;
width: 100%;
padding: 10px 14px;
border-radius: 14px;
border: 1px solid var(--navy);
color: var(--text);
font-size: 0.85rem;
text-align: center;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 6px 14px rgba(0, 0, 0, 0.12);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .tile-locked .tile-interest-btn { border-color: var(--yellow-dark); }
}
:root[data-theme="dark"] .tile-locked .tile-interest-btn { border-color: var(--yellow-dark); }
.tile-interest-btn:hover {
border-color: var(--yellow-dark);
color: var(--text);
}
.tile-interest-btn.is-interested {
border-color: var(--yellow-dark);
color: var(--text);
background: color-mix(in srgb, var(--yellow) 18%, var(--surface));
}
.tile-interest-btn svg, .stage-interest-btn svg, .lieu-interest-btn svg, .formation-interest-btn svg {
vertical-align: -2px;
margin-right: 3px;
}
.carte-lieux {
max-width: 430px;
margin: 18px auto 6px;
}
.carte-lieux.carte-lieux-plein {
max-width: min(100%, calc((100svh - 150px) * 1.014));
aspect-ratio: 596 / 588;
max-height: calc(100svh - 150px);
margin-inline: auto;
}
.carte-lieux.carte-lieux-plein .carte-svg { max-height: 100%; }
.carte-svg {
width: 100%;
height: auto;
display: block;
user-select: none;
-webkit-user-select: none;
}
.carte-region {
fill: color-mix(in srgb, var(--text) 7%, transparent);
stroke: color-mix(in srgb, var(--text) 26%, transparent);
stroke-width: 1;
stroke-linejoin: round;
transition: fill 0.18s ease, stroke 0.18s ease;
}
.carte-region-off {
fill: color-mix(in srgb, var(--text) 4%, transparent);
stroke: color-mix(in srgb, var(--text) 14%, transparent);
}
.carte-pin { transition: opacity 0.18s ease; }
.carte-pin-off { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
.carte-region, .carte-pin { transition: none; }
}
.carte-pin { cursor: pointer; }
.carte-pin .carte-halo {
fill: color-mix(in srgb, var(--text) 30%, transparent);
opacity: 0;
transform-box: fill-box;
transform-origin: center;
}
.carte-pin .carte-core {
fill: var(--surface);
stroke: color-mix(in srgb, var(--text) 60%, transparent);
stroke-width: 2;
transition: r 0.12s ease, fill 0.12s ease, stroke 0.18s ease;
}
.carte-pin-favori .carte-core { fill: var(--yellow); stroke: var(--yellow-dark); }
.carte-pin-stagiaire .carte-core { fill: var(--yellow-dark); stroke: var(--yellow-dark); }
.carte-pin-fixe { cursor: default; }
.carte-pin-vers { cursor: pointer; }
.admin-table tbody tr.ligne-surlignee td,
.admin-table tbody tr.ligne-surlignee:nth-child(even) td {
background: color-mix(in srgb, var(--yellow) 30%, transparent);
}
.carte-personnes .carte-pin-hi .carte-halo { opacity: 0.45; }
.carte-pin-favori .carte-halo {
fill: var(--yellow);
opacity: 0.3;
animation: carte-pulse 2.6s ease-out infinite;
}
.carte-lbl { transition: fill 0.18s ease, font-weight 0.18s ease; }
.carte-pin-favori .carte-lbl { fill: var(--yellow-dark); font-weight: 700; }
.carte-pin:hover .carte-core,
.carte-pin:focus-visible .carte-core {
r: 8;
fill: var(--text);
stroke: var(--text);
}
.carte-pin-favori:hover .carte-core,
.carte-pin-favori:focus-visible .carte-core {
fill: var(--yellow-dark);
stroke: var(--yellow-dark);
}
.admin-colonnes .carte-lbl { font-size: 9.5px; font-weight: 600; stroke-width: 2.5px; }
.admin-colonnes .carte-lbl-sous { font-size: 8.5px; }
.admin-colonnes .carte-pin.carte-pin-hi .carte-core { r: 9; fill: var(--yellow-dark); stroke: var(--yellow-dark); }
.admin-colonnes .carte-pin.carte-pin-hi .carte-halo { opacity: 0.5; }
.admin-colonnes .carte-pin.carte-pin-hi .carte-lbl { fill: var(--yellow-dark); font-weight: 800; }
.carte-lbl {
fill: var(--text);
font-size: 12px;
font-weight: 600;
paint-order: stroke;
stroke: var(--surface);
stroke-width: 3px;
stroke-linejoin: round;
}
@keyframes carte-pulse {
0% { transform: scale(0.7); opacity: 0.35; }
70% { opacity: 0; }
100% { transform: scale(2.4); opacity: 0; }
}
.lieux-layout {
display: flex;
gap: 26px;
align-items: flex-start;
justify-content: center;
margin-top: 14px;
}
.lieux-carte {
flex: 1 1 auto;
min-width: 0;
max-width: calc((100svh - 190px) * 1.014);
}
.lieux-carte .carte-lieux {
max-width: none;
margin: 0;
}
.lieux-synthese {
flex: 0 1 320px;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0;
position: sticky;
top: 84px;
}
.lieux-groupe[hidden] { display: none; }
.lieux-groupe {
display: flex;
flex-direction: column;
gap: 7px;
}
.lieux-groupe + .lieux-groupe { margin-top: 14px; }
.lieux-groupe-tete {
margin: 14px 0 8px;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.lieux-groupe-tete .region-filtre { white-space: nowrap; }
.pill-filtre-inerte {
cursor: default;
opacity: 0.55;
}
.pill-filtre-inerte:hover { background: inherit; }
.region-filtre-inerte { cursor: default; }
.region-filtre-inerte:hover { background: inherit; }
.lieux-groupe-tete .region-filtre abbr {
text-decoration: underline dotted;
text-underline-offset: 2px;
cursor: inherit;
}
.lieux-groupe:first-child .lieux-groupe-tete { margin-top: 4px; }
.region-suivre {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 4px;
flex: 0 0 auto;
background: none;
border: none;
padding: 3px 2px;
cursor: pointer;
font-size: 0.78rem;
color: var(--muted-text);
white-space: nowrap;
transition: color 0.15s ease;
}
.region-suivre:hover { color: var(--yellow-dark); }
.region-suivre-plus,
.region-suivre-check,
.region-suivre-croix { display: inline-flex; align-items: center; }
.region-suivre .region-suivre-check,
.region-suivre .region-suivre-croix { display: none; }
.region-suivre.is-suivie { color: var(--yellow-dark); font-weight: 600; }
.region-suivre.is-suivie .region-suivre-plus { display: none; }
.region-suivre.is-suivie .region-suivre-check { display: inline-flex; }
.region-suivre-labels { display: inline-grid; }
.region-suivre-labels > * { grid-area: 1 / 1; }
.region-suivre-retirer { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
.region-suivre.is-suivie:hover .region-suivre-check { display: none; }
.region-suivre.is-suivie:hover .region-suivre-croix { display: inline-flex; }
.region-suivre.is-suivie:hover .region-suivre-txt { opacity: 0; }
.region-suivre.is-suivie:hover .region-suivre-retirer { opacity: 1; }
}
.region-suivre.is-suivie:focus-visible .region-suivre-check { display: none; }
.region-suivre.is-suivie:focus-visible .region-suivre-croix { display: inline-flex; }
.region-suivre.is-suivie:focus-visible .region-suivre-txt { opacity: 0; }
.region-suivre.is-suivie:focus-visible .region-suivre-retirer { opacity: 1; }
[data-bulle] { position: relative; }
[data-bulle]::after {
content: attr(data-bulle);
position: absolute;
bottom: calc(100% + 7px);
left: 50%;
transform: translateX(-50%) translateY(3px);
z-index: 40;
white-space: nowrap;
background: var(--navy-dark);
color: var(--white);
font-size: 0.72rem;
font-weight: 400;
letter-spacing: 0.01em;
padding: 5px 9px;
border-radius: 7px;
opacity: 0;
pointer-events: none;
transition: opacity 0.14s ease, transform 0.14s ease;
}
:root[data-theme="dark"] [data-bulle]::after,
html.theme-dark [data-bulle]::after { background: #0b1016; }
[data-bulle]:focus-visible::after {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
@media (hover: hover) and (pointer: fine) {
[data-bulle]:hover::after {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
[data-bulle]::after { transition: none; }
}
.lieu-mini-nom { display: flex; align-items: center; gap: 5px; }
.lieu-mini-nom svg { flex: 0 0 auto; opacity: 0.75; }
.lieu-mini-commune,
.lieu-mini-date { padding-left: 17px; }
.lieu-mini { position: relative; }
.lieu-mini-signet {
position: absolute;
top: 8px;
right: 9px;
display: none;
line-height: 0;
color: var(--yellow-dark);
}
.lieu-mini.est-suivie .lieu-mini-signet { display: block; }
.lieu-mini.est-suivie .lieu-mini-nom { padding-right: 16px; }
.mes-choix {
background: var(--surface);
border: 1px solid var(--grey-border);
border-left: 4px solid var(--yellow);
border-radius: 0 12px 12px 0;
padding: 14px 18px;
margin: 0 0 22px;
}
.mes-choix-tete {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 12px;
font-weight: 600;
color: var(--text);
}
.mes-choix-tete svg { color: var(--yellow-dark); flex: 0 0 auto; }
.mes-choix-corps { display: grid; gap: 10px; }
.mes-choix-ligne { display: flex; align-items: flex-start; gap: 10px; }
.mes-choix-ico { display: inline-flex; flex: 0 0 auto; color: var(--muted-text); }
.mes-choix-groupe { min-width: 0; }
.mes-choix-label { display: block; font-size: 0.8rem; color: var(--muted-text); margin-bottom: 5px; }
.mes-choix-pastilles { display: flex; flex-wrap: wrap; gap: 6px; }
.mes-choix-pastille {
font-size: 0.82rem;
border: 1px solid var(--grey-border);
border-radius: 999px;
padding: 3px 11px;
color: var(--text);
-webkit-user-select: none;
user-select: none;
}
.mes-choix-compteurs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.mes-choix-compteur { display: inline-flex; align-items: center; gap: 7px; font-size: 0.85rem; color: var(--text); }
.mes-choix-pastille-region { display: inline-flex; align-items: center; gap: 6px; padding-right: 6px; }
.mes-choix[hidden], .mes-choix-ligne[hidden] { display: none; }
.mes-choix.est-halo { animation: recap-halo 1.6s ease-out; }
@keyframes recap-halo {
0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--yellow) 70%, transparent); }
15%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--yellow) 55%, transparent); }
100% { box-shadow: 0 0 0 20px color-mix(in srgb, var(--yellow) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
.mes-choix.est-halo { animation: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--yellow) 60%, transparent); }
}
.mes-choix-pastille-x {
border: none;
background: none;
color: var(--muted-text);
cursor: pointer;
font-size: 0.7rem;
line-height: 1;
padding: 2px;
border-radius: 50%;
opacity: 0;
transition: opacity 0.15s ease, color 0.15s ease;
}
.mes-choix-pastille:hover .mes-choix-pastille-x,
.mes-choix-pastille:focus-within .mes-choix-pastille-x,
.mes-choix-pastille-x:focus-visible { opacity: 1; }
.mes-choix-pastille-x:hover { color: var(--yellow-dark); }
@media (prefers-reduced-motion: reduce) {
.mes-choix-pastille-x { transition: none; }
}
.mes-choix-pastille-place.est-confirmee { color: var(--yellow-dark); font-weight: 700; border-color: var(--yellow-dark); }
.mes-choix-pastille-place.est-reservee { font-weight: 700; }
.region-abo {
margin-top: 16px;
padding-top: 14px;
border-top: 1px dashed var(--grey-border);
}
.region-abo-toggle {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 4px 2px;
border: 0;
background: none;
font-size: 0.8rem;
color: var(--muted-text);
cursor: pointer;
text-align: left;
}
.region-abo-toggle:hover { color: var(--text); }
.region-abo-toggle-chevron { display: inline-flex; transition: transform 0.2s ease; }
.region-abo-toggle-chevron svg { display: block; }
.region-abo-toggle[aria-expanded="true"] .region-abo-toggle-chevron { transform: rotate(180deg); }
.region-abo-reveal {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
visibility: hidden;
transition: grid-template-rows 0.28s ease, opacity 0.2s ease, visibility 0s linear 0.28s;
}
.region-abo-toggle[aria-expanded="true"] ~ .region-abo-reveal {
grid-template-rows: 1fr;
opacity: 1;
visibility: visible;
transition: grid-template-rows 0.28s ease, opacity 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
.region-abo-toggle-chevron,
.region-abo-reveal { transition: none; }
}
.region-abo-reveal-inner { overflow: hidden; min-height: 0; }
.region-abo-ligne {
display: flex;
gap: 8px;
align-items: stretch;
padding: 8px 4px 4px;
}
.region-abo-select {
flex: 1 1 auto;
min-width: 0;
font-size: 0.85rem;
padding: 6px 8px;
border: 1px solid var(--grey-border);
border-radius: 8px;
background: var(--surface);
color: var(--text);
}
.region-abo-btn {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 4px;
background: none;
border: none;
padding: 3px 2px;
font: inherit;
font-size: 0.78rem;
color: var(--muted-text);
cursor: pointer;
white-space: nowrap;
transition: color 0.15s ease;
}
.region-abo-btn:hover { color: var(--yellow-dark); }
.region-abo-btn svg { flex: 0 0 auto; }
.region-abo-btn svg { flex: 0 0 auto; }
.lieu-mini[hidden] { display: none; }
.js-filtre-anim .lieu-mini {
transition: border-color 0.15s ease, box-shadow 0.15s ease,
opacity 0.25s ease, transform 0.25s ease,
display 0.25s allow-discrete;
}
.js-filtre-anim .lieu-mini[hidden] { opacity: 0; transform: translateY(-6px); }
@starting-style {
.js-filtre-anim .lieu-mini:not([hidden]) { opacity: 0; transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
.js-filtre-anim .lieu-mini { transition: none; }
}
.lieu-mini {
display: flex;
flex-direction: column;
gap: 2px;
padding: 10px 13px;
border: 1px solid var(--grey-border);
border-left: 3px solid var(--yellow);
border-radius: 10px;
background: var(--surface);
text-decoration: none;
color: var(--text);
transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.lieu-mini:hover,
.lieu-mini-hi {
border-color: var(--yellow-dark);
border-left-color: var(--yellow-dark);
box-shadow: 0 4px 14px rgba(46, 64, 82, 0.10);
transform: translateY(-1px);
}
.lieu-mini-nom { font-weight: 700; font-size: 0.95rem; }
.lieu-mini-commune {
font-size: 0.8rem;
color: var(--muted-text);
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.lieu-mini-date {
font-size: 0.8rem;
color: var(--muted-text);
display: inline-flex;
align-items: center;
gap: 4px;
}
.lieu-mini-plus {
flex: none;
font-size: 0.7rem;
font-weight: 700;
line-height: 1;
padding: 2px 5px;
border-radius: 999px;
background: var(--grey-bg);
color: var(--muted-text);
font-variant-numeric: tabular-nums;
}
.carte-pin-hi .carte-core {
r: 8;
fill: var(--text);
stroke: var(--text);
}
.carte-pin-favori.carte-pin-hi .carte-core {
fill: var(--yellow-dark);
stroke: var(--yellow-dark);
}
@media (max-width: 860px) {
.lieux-layout {
flex-direction: column;
}
.lieux-carte {
flex-basis: auto;
width: 100%;
max-width: none;
}
.lieux-carte .carte-lieux {
max-width: 430px;
margin: 0 auto;
}
.lieux-synthese {
position: static;
width: 100%;
}
}
.lieux-grid {
display: grid;
grid-template-columns: repeat(auto-fill, min(440px, 100%));
justify-content: start;
gap: 18px;
margin-top: 14px;
position: relative;
}
.lieu-card[hidden] { display: none; }
.lieu-card {
border: 1px solid var(--grey-border);
border-radius: 12px;
overflow: hidden;
background: var(--surface);
display: flex;
flex-direction: column;
scroll-margin-top: 90px;
}
.lieu-card[data-carte-href],
.formation-card[data-carte-href] {
cursor: pointer;
transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.lieu-card[data-carte-href]:hover,
.formation-card[data-carte-href]:hover {
border-color: var(--yellow-dark);
box-shadow: 0 8px 24px rgba(46, 64, 82, 0.12);
transform: translateY(-2px);
}
.lieu-card[data-carte-href] a,
.lieu-card[data-carte-href] button,
.formation-card[data-carte-href] a,
.formation-card[data-carte-href] button { cursor: pointer; }
.lieu-desc {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (max-width: 560px) {
.lieu-desc {
display: block;
-webkit-line-clamp: none;
overflow: visible;
}
}
.stage-row {
scroll-margin-top: 90px;
}
.lieu-card-photo {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
}
.lieu-card-body {
padding: 16px;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
.lieu-card-body h3 { margin: 0; }
.lieu-titre { margin: 0; font-weight: 600; color: var(--yellow-dark); }
.lieu-lieu {
margin: -3px 0 0;
font-size: 0.85rem;
}
.lieu-desc { margin: 6px 0; font-size: 0.92rem; text-align: justify; }
.lieu-prochaines { font-size: 0.9rem; margin-top: 8px; }
.lieu-prochaines {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"titre  autres"
"tuile  tuile";
align-items: baseline;
column-gap: 10px;
}
.lieu-prochaines-tete {
grid-area: titre;
margin: 0 0 6px;
}
.lieu-prochaines > .prochaine-item { grid-area: tuile; }
.lieu-prochaines > .prochaine-autres { grid-area: autres; margin-top: 0; }
@media (max-width: 560px) {
.lieu-prochaines {
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"titre"
"tuile"
"autres";
}
.lieu-prochaines > .prochaine-autres { margin-top: 8px; justify-self: end; }
}
.lieu-prochaines .prochaine-item { gap: 10px; padding: 8px 10px; align-items: center; }
.lieu-prochaines .prochaine-badge { width: 38px; }
.lieu-prochaines .prochaine-titre {
font-size: 0.9rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lieu-prochaines .prochaine-dates {
white-space: nowrap;   
}
.prochaine-vide .prochaine-dates {
white-space: normal;
text-overflow: clip;
overflow: hidden;
text-overflow: ellipsis;
}
.lieu-prochaines .prochaine-statut {
max-width: 92px;
white-space: normal;
text-wrap: balance;
line-height: 1.15;
}
.prochaine-autres {
display: inline-block;
margin-top: 6px;
font-size: 0.82rem;
text-decoration: none;
}
.lieu-prochaines .prochaine-item { min-height: 61px; }
.lieu-prochaines .prochaine-badge {
min-height: 34px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.prochaine-ico { display: inline-flex; vertical-align: -0.18em; margin-right: 6px; line-height: 0; opacity: 0.85; }
.prochaine-vide {
cursor: default;
border-style: dashed;
color: var(--muted-text);
}
.prochaine-vide:hover { border-color: var(--grey-border); box-shadow: none; }
.prochaine-vide .prochaine-badge { color: var(--muted-text); opacity: 0.55; }
.prochaine-vide .prochaine-badge svg { width: 26px; height: 26px; }
.prochaine-vide .prochaine-titre { font-weight: 600; }
.prochaine-autres:hover { text-decoration: underline; }
.lieu-details { margin-top: 8px; font-size: 0.9rem; }
.lieu-details summary { cursor: pointer; font-weight: 600; color: var(--text); }
.lieu-details p { margin: 8px 0; text-align: justify; }
.lieu-details ul { margin: 4px 0; padding-left: 18px; }
.formation-card-actions,
.lieu-actions {
margin-top: auto;
padding-top: 12px;
display: flex;
flex-direction: row;
gap: 8px;
}
.formation-card-actions .tile-interest-btn,
.formation-card-actions .btn-lieu-plus,
.lieu-actions .tile-interest-btn,
.lieu-actions .btn-lieu-plus,
.formation-annonce .tile-interest-btn,
.stage-actions .stage-interest-btn,
.stage-actions .btn-lieu-plus,
.stage-actions .btn-reserver {
margin: 0;
box-sizing: border-box;
width: 220px;
max-width: 100%;
min-height: 40px;
padding: 8px 12px;
border-radius: 999px;
font-size: 0.86rem;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
text-align: center;
line-height: 1.2;
white-space: nowrap;
}
.lieu-actions,
.formation-card-actions,
.stage-actions { flex-wrap: wrap; justify-content: center; }
.lieu-actions > *,
.formation-card-actions > *,
.stage-actions > * { min-width: min(max-content, 100%); }
.formation-card-actions .tile-interest-btn,
.formation-card-actions .btn-lieu-plus,
.lieu-actions .tile-interest-btn,
.lieu-actions .btn-lieu-plus {
flex: 1 1 0;
width: auto;
}
.formation-annonce .fav-bulle-zone > .tile-interest-btn,
.lieu-barre .lieu-actions .fav-bulle-zone > .tile-interest-btn,
.formation-annonce .tile-interest-btn {
flex: 0 0 auto;
width: 220px;
min-width: 0;
}
@media (max-width: 360px) {
.formation-card-actions,
.lieu-actions { flex-direction: column; }
}
.btn-lieu-plus {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 9px 18px;
border-radius: 999px;
background: var(--yellow);
color: var(--navy);
font-weight: 600;
font-size: 0.9rem;
text-decoration: none;
border: 1px solid var(--yellow-dark);
transition: background 0.15s ease;
}
.btn-lieu-plus:hover { background: var(--yellow-dark); }
.nombre-ico {
width: 1em;
height: 1em;
vertical-align: -0.13em;
flex: none;
margin: 0 0 0 0.22em;
}
.btn-lieu-plus { user-select: none; }
.btn-lieu-fleche { transition: transform 0.15s ease; }
.btn-lieu-plus:hover .btn-lieu-fleche { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
.btn-lieu-fleche { transition: none; }
.btn-lieu-plus:hover .btn-lieu-fleche { transform: none; }
}
.lieu-site { font-size: 0.85rem; font-weight: 600; }
.frise {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
font-size: 0.85rem;
margin: 18px 0;
}
.frise-sep {
color: var(--muted-text);
}
.frise .frise-current {
outline: 2px solid var(--yellow);
}
.feedback-intro { max-width: none; }
.feedback-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
gap: 20px;
margin-top: 16px;
align-items: start;
}
@media (max-width: 520px) {
.feedback-grid { grid-template-columns: 1fr; }
}
.feedback-card {
border: 1px solid var(--grey-border);
border-left: 3px solid var(--yellow-dark);
border-radius: 8px;
padding: 14px 16px;
margin: 0;
}
.feedback-card[hidden] { display: none; }
.feedback-card.feedback-nouveau { border-left-color: var(--danger-solid); }
.feedback-card.feedback-en_cours { border-left-color: var(--yellow); }
.feedback-card.feedback-traite {
border-left-color: var(--success-text);
opacity: 0.75;
}
.st-point-fb-nouveau { background: var(--danger-solid); }
.st-point-fb-en_cours { background: var(--yellow); }
.st-point-fb-traite { background: var(--success-text); }
.fil-filtre-inerte { cursor: default; opacity: 0.45; }
.fil-filtre-inerte:hover { color: var(--muted-text); }
.feedback-meta {
margin: 0 0 8px;
font-size: 0.9rem;
}
.feedback-meta strong,
.feedback-meta .feedback-meta-qui,
.feedback-meta .feedback-meta-page { display: block; }
.feedback-meta .feedback-meta-page { overflow-wrap: anywhere; }
.feedback-meta-quand { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
.feedback-card .feedback-tete {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin: 0 0 8px;
}
.feedback-card .feedback-tete .feedback-meta { margin: 0; flex: 1 1 auto; min-width: 0; }
.feedback-reponse .feedback-reply-ouvrir {
color: inherit;
opacity: 0.6;
text-decoration: none;
margin-left: 5px;
vertical-align: -1px;
white-space: nowrap;
}
.feedback-reponse .feedback-reply-ouvrir:hover,
.feedback-reponse .feedback-reply-ouvrir:focus-visible { opacity: 1; }
.feedback-statut {
display: inline-flex;
align-items: center;
gap: 7px;
flex: 0 0 auto;
}
.feedback-statut .st-point { width: 0.7em; height: 0.7em; }
.feedback-statut select {
width: auto;
margin: 0;
padding: 4px 8px;
font-size: 0.85rem;
border-radius: 999px;
}
.feedback-message {
margin: 0 0 10px;
}
.feedback-reponse {
background: color-mix(in srgb, var(--yellow) 16%, transparent);
border-left: 3px solid var(--yellow);
padding: 8px 12px;
border-radius: 0 8px 8px 0;
margin: 0 0 10px;
font-size: 0.92rem;
}
.feedback-reply .champ-valider {
margin: 6px 0 8px;
}
.feedback-reply textarea {
margin: 0;
}
.feedback-reply .btn {
margin-top: 0;
}
.fiche-liste {
margin: 6px 0;
padding-left: 20px;
}
.fiche-liste li {
margin-bottom: 4px;
}
.fiche-liste ul {
margin: 4px 0;
padding-left: 18px;
}
.fiche-surnom {
margin-left: 0.5rem; font-size: 0.62em; font-weight: 400; opacity: 0.65;
white-space: nowrap;
}
.fiche-mat { margin: 0 0 0.9rem; }
.fiche-mat:last-of-type { margin-bottom: 0.4rem; }
.fiche-mat h3 {
margin: 0 0 0.25rem; font-size: 0.98rem;
display: flex; align-items: baseline; gap: 0.45rem; flex-wrap: wrap;
}
.fiche-mat-code {
padding: 0.05rem 0.4rem; border-radius: 6px; background: var(--grey-bg);
font-size: 0.8rem; font-weight: 400; font-variant-numeric: tabular-nums;
}
.fiche-mat-desc { margin: 0 0 0.35rem; font-size: 0.88rem; }
.fiche-mat .fiche-liste li { margin-bottom: 0.15rem; }
.fiche-mat .muted { font-size: 0.88rem; }
.fiche-mat-pastille {
display: inline-block; font-size: 0.8rem;
padding: 0.05rem 0.45rem; border-radius: 6px;
background: color-mix(in srgb, var(--yellow) 28%, transparent);
}
.fiche-mat-hors { padding-top: 0.5rem; border-top: 1px dashed color-mix(in srgb, var(--text) 22%, transparent); }
.fiche-eggs {
list-style: none;
padding-left: 2px;
}
.fiche-eggs li.egg-ok {
color: var(--text);
}
.fiche-eggs li.egg-manquant {
color: color-mix(in srgb, var(--muted-text) 55%, var(--surface));
}
.fiche-liens {
margin-top: 10px;
}
.fiche-liens summary {
cursor: pointer;
}
.vp-chiffres {
background: var(--grey-bg);
border-radius: 10px;
padding: 10px 14px;
font-size: 0.9rem;
}
.vp-chart {
width: 100%;
height: auto;
display: block;
margin: 6px 0 18px;
background: var(--grey-bg);
border: 1px solid var(--grey-border);
border-radius: 12px;
}
.vp-axe { stroke: var(--grey-border); stroke-width: 1; }
.vp-barre { fill: var(--navy); opacity: 0.85; }
.vp-val { fill: var(--muted-text); font-size: 9px; }
.vp-lbl { fill: var(--muted-text); font-size: 9px; }
.vp-rupture { stroke: var(--yellow-dark); stroke-width: 1; stroke-dasharray: 4 3; }
.vp-rupture-lbl {
fill: var(--yellow-dark);
font-size: 8.5px;
font-weight: 700;
stroke: var(--grey-bg);
stroke-width: 2.5px;
paint-order: stroke fill;
}
.vp-bulle { fill: var(--navy); opacity: 0.5; }
.vp-bulle.vp-tactile { fill: var(--yellow-dark); opacity: 0.7; }
.vp-legende { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; }
.vp-puce { width: 11px; height: 11px; border-radius: 50%; background: var(--navy); opacity: 0.5; display: inline-block; }
.vp-puce-tactile { background: var(--yellow-dark); opacity: 0.7; }
.photo-apercu[hidden] { display: none; }
.photo-apercu {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 10px;
padding: 10px;
background: var(--grey-bg);
border: 1px solid var(--grey-border);
border-radius: 10px;
max-width: 100%;
overflow: hidden;
}
.photo-apercu img {
width: clamp(64px, calc(50% - 14px), 132px);
height: 72px;
object-fit: cover;
border-radius: 8px;
background: var(--grey-border);
flex: 0 1 auto;
min-width: 0;
}
.photo-apercu img:not([src]) { visibility: hidden; }
.photo-apercu-txt {
margin: 0;
font-size: 0.85rem;
color: var(--muted-text);
flex: 1 0 100%;
}
.photo-apercu-ko { border-color: var(--danger-solid); }
.photo-apercu-ko .photo-apercu-txt { color: var(--danger-solid); }
.feedback-capture-input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.feedback-depot {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
margin-top: 12px;
padding: 16px 12px;
border: 2px dashed var(--grey-border);
border-radius: 12px;
background: var(--grey-bg);
text-align: center;
cursor: pointer;
transition: border-color .18s ease, background-color .18s ease;
}
.feedback-depot:hover { border-color: var(--yellow-dark); }
.feedback-depot.est-survolee {
border-color: var(--yellow-dark);
background: color-mix(in srgb, var(--yellow) 16%, var(--surface));
}
.feedback-capture-input:focus-visible + .feedback-depot {
outline: 2px solid var(--yellow-dark);
outline-offset: 2px;
}
.feedback-depot-ic { color: var(--muted-text); line-height: 0; }
.feedback-depot-txt { font-weight: 600; font-size: 0.92rem; }
.feedback-depot-sous { font-size: 0.75rem; color: var(--muted-text); line-height: 1.4; }
.feedback-depot-sous kbd {
padding: 1px 4px;
border: 1px solid var(--grey-border);
border-radius: 4px;
background: var(--surface);
font-family: inherit;
font-size: 0.95em;
}
.feedback-depot[hidden] { display: none; }
.feedback-capture-retirer { margin-top: 8px; font-size: 0.82rem; }
.feedback-capture-retirer[hidden] { display: none; }
#feedback-message { min-height: 3.4em; resize: vertical; }
.feedback-contexte-note {
margin: 10px 0 0;
font-size: 0.72rem;
line-height: 1.45;
color: var(--muted-text);
}
.feedback-depot-tactile { display: none; }
@media (hover: none) {
.feedback-depot-sous:not(.feedback-depot-tactile) { display: none; }
.feedback-depot-tactile { display: block; }
}
#feedback-details .photo-apercu {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
#feedback-details .photo-apercu img {
width: 100%;
height: 130px;
object-fit: contain;
background: var(--grey-bg);
}
.feedback-capture {
display: block;
margin: 10px 0 0;
border: 1px solid var(--grey-border);
border-radius: 10px;
overflow: hidden;
line-height: 0;
}
.feedback-capture:hover { border-color: var(--yellow-dark); }
.feedback-capture img {
display: block;
width: 100%;
max-height: 260px;
object-fit: contain;
background: var(--grey-bg);
}
.feedback-captures .feedback-capture {
padding: 3px;
border-radius: 12px;
opacity: 1;
}
.feedback-captures .feedback-capture img { border-radius: 7px; }
.feedback-erreurs {
margin: 10px 0 0;
padding: 9px 11px;
border-left: 3px solid var(--danger-solid);
border-radius: 0 8px 8px 0;
background: var(--error-bg);
font-size: 0.84rem;
line-height: 1.5;
}
.feedback-erreurs code {
display: block;
margin-top: 4px;
font-size: 0.92em;
overflow-wrap: anywhere;
}
.feedback-contexte { margin-top: 10px; font-size: 0.84rem; }
.feedback-contexte summary { cursor: pointer; color: var(--muted-text); }
.feedback-contexte dl {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 2px 12px;
margin: 8px 0 0;
}
.feedback-contexte dt { color: var(--muted-text); }
.feedback-contexte dd { margin: 0; overflow-wrap: anywhere; }
.mon-signalement {
margin-top: 16px;
padding: 14px 16px;
border: 1px solid var(--grey-border);
border-radius: 12px;
background: var(--surface);
}
.mon-signalement-tete {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 12px;
margin: 0 0 8px;
font-size: 0.82rem;
}
.mon-signalement-type {
display: inline-flex;
align-items: center;
gap: 5px;
font-weight: 600;
}
.mon-signalement-page { font-family: inherit; overflow-wrap: anywhere; }
.mon-signalement-tete .status-pill { margin-left: auto; }
.mon-signalement-msg { margin: 0; }
.mon-signalement-capture {
display: block;
margin-top: 10px;
padding: 0;
border-width: 1px;
background: none;
cursor: zoom-in;
width: 100%;
text-align: left;
max-width: 320px;
border: 1px solid var(--grey-border);
border-radius: 10px;
overflow: hidden;
line-height: 0;
}
.mon-signalement-capture:hover { border-color: var(--yellow-dark); }
.mon-signalement-capture img {
display: block;
width: 100%;
max-height: 220px;
object-fit: contain;
background: var(--grey-bg);
}
.mon-signalement-reponse {
margin-top: 12px;
padding: 10px 13px;
border-left: 3px solid var(--yellow-dark);
border-radius: 0 10px 10px 0;
background: color-mix(in srgb, var(--yellow) 12%, var(--surface));
}
.mon-signalement-reponse p { margin: 0; }
.mon-signalement-reponse-qui {
margin: 0 0 4px !important;
font-size: 0.78rem;
font-weight: 600;
color: var(--muted-text);
}
.mon-signalement-sans-reponse { margin: 10px 0 0; font-size: 0.85rem; }
.stage-apercu {
margin: 22px 0 4px;
padding-top: 18px;
border-top: 1px solid var(--grey-border);
}
.stage-apercu h2 { margin: 0 0 4px; font-size: 1.05rem; }
.stage-apercu > p { margin: 0 0 12px; max-width: 70ch; }
.stage-apercu-carte { max-width: 440px; }
.formation-tete {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
gap: 24px;
align-items: stretch;
margin: 20px 0 6px;
}
.formation-tete-seule { grid-template-columns: minmax(320px, 440px); }
.formation-tete-interet { position: relative; min-width: 0; }
.formation-tete-interet-boite {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
}
.formation-tete-interet-boite > h2 { margin: 0 0 4px; font-size: 1.05rem; }
.formation-tete-interet-boite > p { margin: 0 0 10px; max-width: 70ch; }
.formation-tete-liste {
flex: 1 1 auto;
min-height: 0;
max-height: none;
margin-top: 0;
}
.formation-tete-apercu { margin: 0; padding-top: 0; border-top: 0; }
.formation-tete-apercu .stage-apercu-carte { max-width: 440px; }
.formation-modifier-titre { margin: 26px 0 0; }
@media (max-width: 1100px) {
.formation-tete { grid-template-columns: minmax(0, 1fr); }
.formation-tete-interet { position: static; }
.formation-tete-interet-boite { position: static; display: block; }
.formation-tete-liste { max-height: calc(100svh - 250px); }
}
.lieu-hero {
position: relative;
width: 100%;
aspect-ratio: 2 / 1;
min-height: 340px;
border-radius: 14px;
overflow: hidden;
background: var(--grey-bg);
margin-bottom: 14px;
}
@media (max-width: 700px) {
.lieu-hero { min-height: 200px; }
}
@media (max-width: 560px) {
.formation-card-actions { flex-direction: column; }
.formation-card-actions > * { width: 100%; }
}
.lieu-hero-photo {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 45%;
display: block;
}
@keyframes voile-balaye {
from { background-position: 160% 0; }
to   { background-position: -160% 0; }
}
img[data-voile]:not(.est-arrivee) {
background-color: var(--grey-bg);
background-image: linear-gradient(100deg, transparent 30%,
color-mix(in srgb, var(--text) 8%, transparent) 50%, transparent 70%);
background-size: 250% 100%;
background-repeat: no-repeat;
animation: voile-balaye 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
img[data-voile]:not(.est-arrivee) { animation: none; }
}
.hero-attente {
position: absolute;
inset: 0;
z-index: 1;
overflow: hidden;   
transition: opacity 0.35s ease;
}
.lieu-hero:not(.photo-arrivee) .lieu-hero-photo { color: transparent; }
.hero-attente-dessin {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--text);
opacity: 0.14;
}
@keyframes hero-attente-balaye {
from { transform: translateX(-100%); }
to   { transform: translateX(100%); }
}
.hero-attente::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(100deg, transparent 25%,
color-mix(in srgb, var(--text) 7%, transparent) 50%, transparent 75%);
animation: hero-attente-balaye 1.8s ease-in-out infinite;
}
.lieu-hero:not(.photo-arrivee) .lieu-hero-photo { opacity: 0; }
.lieu-hero.photo-arrivee .hero-attente { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
.hero-attente::after { animation: none; }
}
.lieu-hero-txt {
position: absolute;
inset: auto 0 0 0;
padding: 26px 28px 20px;
background: linear-gradient(to top, rgba(32, 45, 58, 0.88), rgba(32, 45, 58, 0.35) 55%, rgba(32, 45, 58, 0));
}
.lieu-hero-txt h1 {
margin: 0;
color: var(--white);
font-size: 2rem;
line-height: 1.1;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
.lieu-hero-sous {
margin: 5px 0 0;
color: var(--yellow);
font-weight: 600;
font-size: 1rem;
text-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
}
#portrait-fiche .lieu-hero-sous { font-style: italic; }
.lieu-hero-sans-photo { aspect-ratio: auto; min-height: 0; background: none; margin-bottom: 4px; }
.lieu-hero-sans-photo .lieu-hero-txt { position: static; padding: 0; background: none; }
.lieu-hero-sans-photo .lieu-hero-txt h1 { color: var(--text); text-shadow: none; }
.lieu-hero-sans-photo .lieu-hero-sous { color: var(--yellow-dark); text-shadow: none; }
@media (max-width: 560px) {
.lieu-hero {
aspect-ratio: auto;
min-height: 0;
overflow: visible;
background: none;
}
.lieu-hero-photo {
aspect-ratio: 3 / 2;
height: auto;
border-radius: 14px;
}
.lieu-hero-txt {
position: static;
padding: 10px 2px 0;
background: none;
}
.lieu-hero-txt h1 {
color: var(--text);
text-shadow: none;
font-size: 1.45rem;
}
.lieu-hero-sous {
color: var(--yellow-dark);
text-shadow: none;
font-size: 0.95rem;
}
}
.lieu-barre {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.lieu-barre-lieu { margin: -4px 0 0; color: var(--muted-text); font-size: 0.95rem; }
.lieu-barre .lieu-actions { margin: 0; }
.lieu-colonnes {
display: grid;
grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
gap: 32px;
align-items: start;
margin-top: 8px;
}
.lieu-colonnes-formation { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.lieu-colonnes > * > :first-child { margin-top: 0; }
.lieu-colonne-principale > .form-section:first-child { margin-top: 18px; }
.lieu-colonne-pratique {
background: var(--grey-bg);
border: 1px solid var(--grey-border);
border-radius: 12px;
padding: 17px 18px 18px;
}
.lieu-colonne-pratique h2 { font-size: 1.05rem; }
.lieu-bloc { margin-top: 16px; }
.lieu-bloc h3 {
font-size: 0.9rem;
margin: 0 0 4px;
color: var(--text);
}
.lieu-bloc p { margin: 0 0 6px; font-size: 0.92rem; }
.lieu-bloc .carte-lieux { max-width: none; margin: 6px 0 0; }
.lieu-liste { margin: 6px 0; padding-left: 20px; }
.lieu-liste li { margin-bottom: 5px; }
.lieu-plus { margin: 10px 0 0; font-size: 0.9rem; }
@media (max-width: 900px) {
.lieu-colonnes { grid-template-columns: 1fr; gap: 20px; }
}
.velo-photo { margin: 16px 0; }
.velo-photo img {
max-width: 420px;
width: 100%;
border-radius: 12px;
display: block;
border: 1px solid var(--grey-border);
}
.velo-photo figcaption { margin-top: 6px; font-size: 0.85rem; }
.velo-form { margin-top: 14px; }
.velo-boutons { margin-top: 12px; }
.velo-form-supprimer { margin-top: 10px; }
.velo-sans[hidden] { display: none; }
.velo-sans-intro { margin: 0 0 8px; }
.velo-types {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 12px;
margin-top: 8px;
}
.velo-type {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 12px;
border: 2px solid var(--grey-border);
border-radius: 12px;
background: var(--surface);
cursor: pointer;
text-align: center;
transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.velo-type:hover { border-color: var(--yellow-dark); transform: translateY(-2px); }
.velo-type:has(input:checked) {
border-color: var(--yellow-dark);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--yellow) 45%, transparent);
}
.velo-type:has(input:focus-visible) {
outline: 2px solid var(--navy);
outline-offset: 2px;
}
.velo-type input { position: absolute; opacity: 0; pointer-events: none; }
.velo-type-vignette {
width: 100%;
aspect-ratio: 4 / 3;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 8px;
background: color-mix(in srgb, var(--text) 6%, transparent);
}
.velo-type-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.velo-type-placeholder { color: var(--muted-text); font-size: 0.78rem; }
.velo-type-nom { font-weight: 600; font-size: 0.92rem; }
.velo-type-note { margin-top: 8px; font-size: 0.82rem; }
@media (prefers-reduced-motion: reduce) {
.velo-type { transition: none; }
}
.lieu-colonne-principale p,
.lieu-colonne-principale li,
.lieu-bloc p {
text-align: justify;
hyphens: auto;
-webkit-hyphens: auto;
}
.lieu-bloc p:has(> a:only-child),
.lieu-barre-lieu {
text-align: left;
hyphens: manual;
}
.lieu-vignettes {
display: flex;
gap: 8px;
margin: -6px 0 14px;
overflow-x: auto;
padding: 3px 3px 5px;
margin-left: -3px;
scroll-padding-left: 3px;
scrollbar-width: thin;
scroll-snap-type: x proximity;
scroll-behavior: smooth;
overscroll-behavior-x: contain;
}
.lieu-vignette {
flex: 0 0 auto;
scroll-snap-align: start;
width: 104px;
padding: 0;
border: 2px solid transparent;
border-radius: 9px;
background: none;
cursor: pointer;
overflow: hidden;
line-height: 0;
transition: border-color 0.15s ease, opacity 0.15s ease;
opacity: 0.72;
}
.lieu-vignette img {
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
display: block;
}
.lieu-vignette:hover { opacity: 1; }
.lieu-vignette.est-active {
border-color: var(--yellow-dark);
opacity: 1;
}
.lieu-vignette:focus-visible {
outline: 2px solid var(--yellow-dark);
outline-offset: 2px;
}
.lieu-hero-photo { transition: opacity 0.18s ease; cursor: zoom-in; }
.lieu-hero-photo.change { opacity: 0.35; }
@media (max-width: 700px) {
.lieu-vignette { width: 82px; }
}
.photo-apercu { flex-wrap: wrap; }
.photo-apercu .photo-apercu-txt { flex-basis: 100%; }
.admin-photos-aide { margin: 4px 0 0; font-size: 0.85rem; }
.admin-photos-sup {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin: 8px 0 12px;
}
@media (max-width: 900px) { .admin-photos-sup { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .admin-photos-sup { grid-template-columns: minmax(0, 1fr); } }
.admin-photos-sup figure {
margin: 0;
width: auto;
padding: 8px;
border: 1px solid var(--grey-border);
border-radius: 10px;
background: var(--grey-bg);
}
.admin-photo-ordre {
display: flex;
align-items: center;
gap: 4px;
margin-bottom: 6px;
}
.admin-photo-rang {
width: 46px;
padding: 3px 6px;
font-size: 0.85rem;
text-align: center;
}
.admin-photo-fleche {
flex: 1 1 auto;
padding: 3px 0;
border: 1px solid var(--grey-border);
border-radius: 7px;
background: var(--surface);
color: var(--text);
font-size: 0.85rem;
line-height: 1;
cursor: pointer;
}
.admin-photo-fleche:hover:not(:disabled) { border-color: var(--yellow-dark); color: var(--yellow-dark); }
.admin-photo-fleche:disabled { opacity: 0.35; cursor: default; }
.admin-photo-legende {
width: 100%;
margin-top: 6px;
padding: 4px 7px;
font-size: 0.82rem;
}
.admin-photos-sup img {
width: 100%;
max-height: 300px;
object-fit: contain;
border-radius: 8px;
display: block;
border: 1px solid var(--grey-border);
background:
repeating-conic-gradient(
color-mix(in srgb, var(--text) 5%, transparent) 0% 25%,
transparent 0% 50%) 50% / 14px 14px;
}
body.diaporama-ouvert .site-header {
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease;
}
@media (prefers-reduced-motion: reduce) {
body.diaporama-ouvert .site-header { transition: none; }
}
.photo-plein[hidden] { display: none; }
.photo-plein {
position: fixed;
inset: 0;
z-index: 200;
background: rgba(16, 21, 27, 0.92);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 10px;
padding: 14px;
overflow: hidden;
}
.photo-plein img {
width: 100%;
height: auto;
max-width: 100%;
max-height: 100%;
min-height: 0;
border-radius: 8px;
touch-action: pan-y;
}
.photo-plein-legende[hidden] { display: none; }
.photo-plein.a-legendes .photo-plein-legende { display: block; min-height: 2.6em; }
.photo-plein-legende {
flex: 0 0 auto;
max-width: min(140ch, calc(100vw - 64px));
width: max-content;
margin: 0;
text-align: center;
color: rgba(255, 255, 255, 0.88);
font-size: 0.9rem;
line-height: 1.4;
cursor: default;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.photo-plein-credit[hidden] { display: none; }
.photo-plein-coin {
position: absolute;
right: 10px;
bottom: 8px;
z-index: 3;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
max-width: calc(100% - 20px);
pointer-events: none;   
}
.photo-plein-credit {
margin: 0;
max-width: 100%;
text-align: right;
color: rgba(255, 255, 255, 0.85);
font-size: 0.75rem;
line-height: 1.35;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 2px 12px rgba(0, 0, 0, 0.8);
opacity: 0;
visibility: hidden;
transition: none;
}
.photo-plein-credit.est-visible {
opacity: 1;
visibility: visible;
transition: opacity 0.45s ease;
}
@media (prefers-reduced-motion: reduce) {
.photo-plein-credit.est-visible { transition: none; }
}
.photo-plein-credit a {
pointer-events: auto;
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
}
.photo-plein-credit a:hover,
.photo-plein-credit a:focus-visible { color: var(--yellow); }
.photo-plein-scene {
position: relative;
flex: 1 1 auto;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.photo-plein-cadre {
position: relative;
width: min(100%, calc((100svh - 150px) * var(--ratio, 1.5)));
max-width: 100%;
max-height: 100%;
line-height: 0;      
}
.photo-plein-vignettes {
flex: 0 0 auto;
align-self: flex-start;
display: flex;
gap: 6px;
max-width: 100%;
overflow-x: auto;
padding: 2px;
scrollbar-width: thin;
overscroll-behavior-x: contain;
}
.photo-plein-vignette {
flex: 0 0 auto;
width: 62px;
height: 44px;
padding: 0;
border: 2px solid transparent;
border-radius: 7px;
background: none;
cursor: pointer;
overflow: hidden;
line-height: 0;
opacity: 0.55;
transition: opacity 0.15s ease, border-color 0.15s ease;
}
.photo-plein-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-plein-vignette.est-active {
border-color: var(--yellow);
opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
.photo-plein-vignette:hover { opacity: 1; }
}
.photo-plein-vignette:focus-visible { outline: 2px solid var(--yellow); outline-offset: 1px; }
@media (max-width: 600px) {
.photo-plein-vignette { width: 48px; height: 34px; }
}
.photo-plein-fermer {
position: absolute;
z-index: 2;
top: 16px;
right: 18px;
width: 38px;
height: 38px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.45);
background: rgba(0, 0, 0, 0.35);
color: var(--white);
font-size: 1rem;
cursor: pointer;
}
.photo-plein-fermer:hover { border-color: var(--yellow); color: var(--yellow); }
.photo-plein-nav[hidden] { display: none; }
.photo-plein-nav {
position: absolute;
top: 0;
bottom: 0;
width: 50%;
border: 0;
background: transparent;
padding: 0;
cursor: pointer;
z-index: 1;
}
.photo-plein-prec { left: 0; }
.photo-plein-suiv { right: 0; }
.footer-confid-mobile { display: none; }
.footer-confid-mobile a,
.footer-cgv {
display: inline-flex;
align-items: center;
gap: 4px;
vertical-align: -2px;
}
@media (max-width: 700px) {
.footer-confid-mobile { display: inline; }
#confid-link { display: none; }
}
@media (max-width: 560px) {
.header-right { gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.theme-toggle {
min-width: 38px;
padding: 4px 3px;
}
.theme-groupe { --sw-top: 4px; --sw-decal: 0.16px; } 
.theme-toggle .hicon { width: 20px; height: 20px; }
.theme-toggle[data-hlabel]::after { font-size: 0.52rem; }
.header-user-name { padding: 5px 8px; font-size: 0.8rem; }
}
@media (max-width: 460px) {
.header-user-name { display: none; }
}
.lieu-adresse {
display: flex;
flex-direction: column;
gap: 1px;
font-style: normal;
background: var(--surface);
border: 1px solid var(--grey-border);
border-left: 3px solid var(--yellow-dark);
border-radius: 9px;
padding: 10px 13px;
margin: 4px 0 10px;
font-size: 0.92rem;
line-height: 1.45;
text-align: left;
}
.lieu-tarif {
font-size: 0.9rem;
margin: 4px 0 0;
}
.btn-carte {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 13px;
border: 1px solid var(--grey-border);
border-radius: 999px;
background: var(--surface);
color: var(--text);
text-decoration: none;
font-size: 0.85rem;
font-weight: 600;
transition: border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.btn-carte svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linejoin: round;
stroke-linecap: round;
flex: none;
}
.btn-carte:hover {
border-color: var(--yellow-dark);
color: var(--yellow-dark);
transform: translateY(-1px);
}
.section-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 10px 14px;
margin-bottom: 4px;
}
.section-head h2 { margin: 0; }
.section-head .region-filtres { margin-left: auto; }
.region-filtres { display: flex; flex-wrap: wrap; gap: 6px; }
.pill-filtre {
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid var(--grey-border);
background: var(--grey-bg);
color: var(--text);
font: inherit;
font-size: 0.82rem;
padding: 3px 11px;
border-radius: 999px;
cursor: pointer;
}
.pill-filtre[hidden] { display: none; }
.pill-filtre:hover { border-color: var(--yellow-dark); }
.pill-filtre-n { color: var(--muted-text); font-size: 0.76rem; }
.pill-filtre[aria-pressed="false"] {
filter: grayscale(1);
opacity: 0.55;
text-decoration: line-through;
}
.region-filtre-vide[hidden] { display: none; }
.lien-admin {
display: inline-flex;
align-items: stretch;
gap: 0;
font-size: 0.8rem;
border: 1px solid var(--navy);
border-radius: 999px;
overflow: hidden;
background: var(--surface);
color: var(--navy);
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
transition: box-shadow 0.15s ease, transform 0.12s ease;
}
.lien-admin-badge {
display: inline-flex;
align-items: center;
padding: 4px 9px 2px;
background: var(--navy);
color: var(--white);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.lien-admin-label {
display: inline-flex;
align-items: center;
padding: 3px 12px;
font-weight: 500;
}
.lien-admin-ext { display: inline-flex; align-items: center; padding-right: 10px; opacity: 0.7; }
.lien-admin:hover {
box-shadow: 0 3px 10px rgba(46, 64, 82, 0.22);
transform: translateY(-1px);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .lien-admin {
border-color: var(--yellow-dark);
color: var(--text);
}
:root:not([data-theme="light"]) .lien-admin-badge {
background: var(--yellow-dark);
color: var(--navy-dark);
}
}
:root[data-theme="dark"] .lien-admin {
border-color: var(--yellow-dark);
color: var(--text);
}
:root[data-theme="dark"] .lien-admin-badge {
background: var(--yellow-dark);
color: var(--navy-dark);
}
@media (prefers-reduced-motion: reduce) {
.lien-admin { transition: none; }
.lien-admin:hover { transform: none; }
}
.stages-grid {
display: grid;
grid-template-columns: repeat(auto-fill, min(440px, 100%));
justify-content: start;
gap: 18px;
margin-top: 14px;
}
.stages-liste-intro { margin: 6px 0 0; text-wrap: pretty; }
.stages-liste-prerequis { margin: 6px 0 0; text-wrap: pretty; }
.stage-card[hidden] { display: none; }
.stage-card {
display: flex;
flex-direction: column;
gap: 0;                    
margin-top: 0;              
padding: 0;                
border-radius: 12px;       
position: relative;
overflow: hidden;
background: var(--surface);
transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
max-width: min(440px, 100%);
}
.stage-card.carte-visee,
.stage-card.carte-arrivee {
outline: 2px solid var(--yellow-dark);
outline-offset: 2px;
}
.stage-card.carte-arrivee { animation: carte-arrivee 2s ease-out 1; }
@keyframes carte-arrivee {
0%   { outline-color: var(--yellow-dark); box-shadow: 0 0 0 6px color-mix(in srgb, var(--yellow) 35%, transparent); }
70%  { outline-color: var(--yellow-dark); box-shadow: 0 0 0 6px color-mix(in srgb, var(--yellow) 18%, transparent); }
100% { outline-color: transparent; box-shadow: 0 0 0 6px transparent; }
}
@media (prefers-reduced-motion: reduce) {
.stage-card.carte-arrivee { animation: none; }
}
.stage-card-chapeau {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 9px 18px;
border-radius: 0;
font-size: 0.85rem;
font-weight: 600;
}
.stage-card-chapeau .chapeau-ic { flex: 0 0 auto; display: inline-flex; line-height: 0; }
.stage-card-chapeau .chapeau-cadenas {
flex: 0 0 auto;
display: inline-flex;
line-height: 0;
opacity: 0.55;
}
.stage-card-chapeau .chapeau-cadenas svg { display: block; }
.stages-closes { margin-top: 22px; }
.stages-closes > summary {
cursor: pointer;
font-size: .92rem;
color: var(--muted-text);
padding: 6px 0;
}
.stages-closes > summary:hover { color: var(--text); }
.stages-closes > p { margin: 2px 0 14px; font-size: .88rem; }
.stage-card-chapeau .chapeau-ic svg { display: block; }
.stage-card-chapeau.etat-attente { background: color-mix(in srgb, var(--grey-border) 45%, var(--surface)); color: var(--text); }
.stage-card-chapeau.etat-encours { background: color-mix(in srgb, var(--navy) 16%, var(--surface)); color: var(--text); }
.stage-card-chapeau.etat-passee { background: color-mix(in srgb, var(--grey-border) 35%, var(--surface)); color: var(--muted-text); }
.stage-card-chapeau.etat-annulee { background: color-mix(in srgb, var(--error-text) 14%, var(--surface)); color: var(--muted-text); }
.stage-card.a-ma-place { box-shadow: inset 4px 0 0 var(--yellow-dark); }
.stage-card.ma-place-demandee { background: color-mix(in srgb, var(--yellow) 9%, var(--surface)); }
.stage-card.ma-place-reservee { background: color-mix(in srgb, var(--yellow) 16%, var(--surface)); }
.stage-card.ma-place-confirmee { background: color-mix(in srgb, var(--yellow) 24%, var(--surface)); }
.stage-card.ma-place-liberee {
background: color-mix(in srgb, var(--orange-alerte) 12%, var(--surface));
box-shadow: inset 4px 0 0 var(--orange-alerte);
}
.stage-card.ma-place-reservee {
box-shadow: inset 4px 0 0 var(--yellow-dark),
0 0 0 1px color-mix(in srgb, var(--yellow-dark) 30%, transparent),
0 4px 18px -4px color-mix(in srgb, var(--yellow-dark) 40%, transparent);
}
.stage-card.ma-place-confirmee {
box-shadow: inset 4px 0 0 var(--yellow-dark),
0 0 0 1px color-mix(in srgb, var(--yellow-dark) 45%, transparent),
0 6px 26px -4px color-mix(in srgb, var(--yellow-dark) 60%, transparent);
}
.stage-card.ma-place-reservee:hover,
.stage-card.ma-place-confirmee:hover {
box-shadow: inset 4px 0 0 var(--yellow-dark),
0 0 0 1px color-mix(in srgb, var(--yellow-dark) 55%, transparent),
0 10px 30px -4px color-mix(in srgb, var(--yellow-dark) 55%, transparent);
}
.stage-card-body {
display: flex;
flex-direction: column;
gap: 11px;
padding: 18px;
flex: 1;
}
.stage-card:hover {
border-color: var(--yellow-dark);
box-shadow: 0 8px 24px rgba(46, 64, 82, 0.12);
transform: translateY(-2px);
}
.stage-card-filigrane,
.carte-filigrane {
position: absolute;
right: 10px;
bottom: 40px;
color: var(--text);
opacity: 0.05;
pointer-events: none;
z-index: 0;
line-height: 0;
}
.stage-card > *:not(.stage-card-filigrane) { position: relative; z-index: 1; }
.lieu-card-body, .formation-card-body { position: relative; }
.formation-card-body .carte-filigrane,
.lieu-card-body .carte-filigrane {
right: -26px;
bottom: 34px;
}
.lieu-card-body .carte-filigrane { right: -46px; }
.formation-card-body, .lieu-card-body { overflow: hidden; }
.lieu-card-body > *:not(.carte-filigrane),
.formation-card-body > *:not(.carte-filigrane) { position: relative; z-index: 1; }
.est-suivie .carte-filigrane,
.est-suivie .stage-card-filigrane {
color: var(--yellow-dark);
opacity: 0.14;
}
.stage-card-titre {
margin: 0;
font-size: 1.05rem;
font-weight: 600;
overflow-wrap: anywhere;
}
.stage-card-facts {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 7px;
}
.stage-card-facts li {
display: flex;
align-items: flex-start;
gap: 9px;
font-size: 0.9rem;
}
.stage-card-facts li.grp-dates { padding-top: 11px; border-top: 1px dashed var(--grey-border); }
.stage-card-facts .fact-icone {
flex: 0 0 auto;
margin-top: 2px;
color: var(--muted-text);
line-height: 0;
}
.stage-card-facts .fact-icone svg { display: block; }
.stage-card-region { color: var(--muted-text); }
.stage-card-region abbr { text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; }
.stage-card-countdown.is-soon { color: var(--yellow-dark); font-weight: 600; }
.stage-card-countdown.is-far { color: var(--muted-text); }
.stage-card-desc {
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
font-style: italic;
}
.stage-card-desc {
font-size: 0.9rem;
line-height: 1.5;
min-height: calc(2 * 1.5 * 0.9rem);
}
.stage-card-desc-ico {
display: inline-flex;
vertical-align: -2px;
margin-right: 5px;
color: var(--yellow-dark);
font-style: normal;
}
.stage-actions {
margin-top: auto;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.stage-actions:has(.stage-reservation > .btn-reserver) > .stage-interest,
.stage-actions:has(.stage-reservation > .btn-reserver) > .stage-reservation {
flex: 1 1 0;
min-width: 0;
}
.stage-actions .stage-interest-btn,
.stage-actions .btn-lieu-plus,
.stage-actions .btn-reserver { width: 100%; }
.btn-reserver-cadenas { display: inline-flex; line-height: 0; opacity: 0.85; }
.btn[disabled],
.btn:disabled,
.btn[disabled]:hover,
.btn:disabled:hover {
opacity: .5;
cursor: not-allowed;
box-shadow: none;
transform: none;
filter: grayscale(1);
}
.btn-reserver.btn-reserver-clos,
.btn-reserver.btn-reserver-clos:hover {
background: var(--grey-bg);
color: var(--muted-text);
border: 1px solid var(--grey-border);
cursor: not-allowed;
box-shadow: none;
transform: none;
}
.stage-actions .stage-interest,
.stage-actions .stage-reservation {
flex: 1 1 175px;
margin: 0;
padding: 0;
border-top: 0;             
}
.stage-actions .stage-reservation:has(p) {
flex-basis: 100%;
display: flex;
flex-direction: column;
gap: 6px;
}
.stage-actions .stage-interest-btn,
.stage-actions .btn-lieu-plus,
.stage-actions .btn-reserver { font-size: 0.86rem; }
@media (max-width: 560px) {
.stage-actions {
flex-direction: column;
flex-wrap: nowrap;
}
.stage-actions > .stage-interest,
.stage-actions > .stage-reservation {
flex: 0 0 auto;
width: 100%;
}
}
.stage-actions .btn { width: 100%; }
.stage-interest-btn.is-interested {
border-color: var(--yellow-dark);
background: color-mix(in srgb, var(--yellow) 18%, var(--surface));
}
.page-retour {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px 16px;
margin-bottom: 16px;
}
.btn-retour {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 16px 7px 13px;
border: 1px solid var(--grey-border);
border-radius: 999px;
background: var(--surface);
color: var(--text);
text-decoration: none;
font-size: 0.92rem;
}
.btn-retour > svg,
.btn-retour .cmd-retour > svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform 0.16s ease;
}
.btn-retour:hover { border-color: var(--yellow-dark); color: var(--yellow-dark); }
.btn-retour:hover > svg,
.btn-retour:hover .cmd-retour > svg { transform: translateX(-3px); }
@media (prefers-reduced-motion: reduce) {
.btn-retour > svg,
.btn-retour .cmd-retour > svg { transition: none; }
.btn-retour:hover > svg,
.btn-retour:hover .cmd-retour > svg { transform: none; }
}
.fil-ariane {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
font-size: 0.78rem;
color: var(--muted-text);
}
.fil-ariane a {
color: inherit;
text-decoration: none;
}
.fil-ariane a:hover {
color: var(--yellow-dark);
text-decoration: underline;
}
.fil-ariane [aria-current="page"] { color: var(--text); }
.bandeau-migration {
margin: 12px auto;
padding: 10px 14px;
border: 1px solid var(--danger-solid);
border-radius: 10px;
background: color-mix(in srgb, var(--danger-solid) 12%, transparent);
font-size: 0.88rem;
}
.bandeau-migration code { font-size: 0.85rem; }
.bandeau-veille {
margin: 12px auto;
padding: 10px 14px;
border: 1px solid var(--accent);
border-radius: 10px;
background: color-mix(in srgb, var(--accent) 14%, transparent);
font-size: 0.88rem;
}
.bandeau-veille a { color: inherit; white-space: nowrap; }
.migration-etat { font-size: 0.86rem; white-space: nowrap; }
.migration-ok { color: var(--muted-text); }
.migration-due { color: var(--danger-solid); font-weight: 600; }
.bandeau-migration a { color: inherit; white-space: nowrap; }
.champ-aide {
margin: 3px 0 0;
font-size: 0.78rem;
}
select:disabled {
opacity: 1;
color: var(--text);
cursor: not-allowed;
}
.region-commande {
border-style: dashed;
font-variant: all-small-caps;
letter-spacing: 0.03em;
}
#region-tout { margin-right: 4px; }
#region-aucune { margin-left: 4px; }
.region-commande[aria-pressed="true"] {
border-style: solid;
border-color: var(--text);
color: var(--text);
font-weight: 700;
}
.region-commande[aria-pressed="false"] {
filter: none;
opacity: 1;
text-decoration: none;
}
.filtres-sessions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 18px;
margin: 4px 0 12px;
}
.filtre-groupe {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 5px;
}
.filtre-groupe-titre {
display: inline-flex;
align-items: center;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--muted-text);
font-weight: 700;
margin-right: 2px;
}
.pill-choix {
border: 1px solid var(--grey-border);
background: var(--grey-bg);
color: var(--text);
font: inherit;
font-size: 0.82rem;
padding: 3px 11px;
border-radius: 999px;
cursor: pointer;
transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.pill-choix:hover { border-color: var(--yellow-dark); }
.pill-choix[aria-pressed="true"] {
border-color: var(--yellow-dark);
background: color-mix(in srgb, var(--yellow) 24%, transparent);
color: var(--text);
font-weight: 600;
}
.pill-choix .pill-filtre-n { color: var(--muted-text); font-size: 0.76rem; }
.pill-choix[aria-pressed="true"] .pill-filtre-n { color: var(--yellow-dark); }
.pill-commande {
border: 1px dashed var(--grey-border);
background: none;
color: var(--muted-text);
font: inherit;
font-size: 0.8rem;
font-variant: all-small-caps;
letter-spacing: 0.03em;
padding: 3px 11px;
border-radius: 999px;
cursor: pointer;
}
.pill-commande:hover { border-color: var(--yellow-dark); color: var(--text); }
.pill-commande[hidden] { display: none; }
.lieux-tout-afficher {
display: block;
width: 100%;
margin-bottom: 10px;
border-style: solid;
border-color: var(--yellow-dark);
color: var(--text);
}
.filtres-resultat[hidden] { display: none; }
.filtres-resultat { margin: 0 0 12px; font-size: 0.85rem; }
.carte-moi { pointer-events: none; }
.carte-moi-point {
fill: none;
stroke: color-mix(in srgb, var(--text) 55%, transparent);
stroke-width: 1.6;
}
.carte-moi-onde {
fill: none;
stroke: var(--yellow-dark);
stroke-width: 2.6;
stroke-opacity: 0;
transform-box: fill-box;
transform-origin: center;
}
@keyframes carte-moi-onde {
0%   { transform: scale(1);    stroke-width: 2.6; stroke-opacity: 1; }
9%   { transform: scale(3.75); stroke-width: 0.7; stroke-opacity: 0; }
10%  { transform: scale(1);    stroke-width: 2.6; stroke-opacity: 1; }
19%  { transform: scale(3.75); stroke-width: 0.7; stroke-opacity: 0; }
20%, 100% { transform: scale(1); stroke-width: 2.6; stroke-opacity: 0; }
}
@keyframes carte-moi-coeur {
0%   { stroke: var(--yellow-dark); }
9%   { stroke: color-mix(in srgb, var(--text) 55%, transparent); }
10%  { stroke: var(--yellow-dark); }
19%  { stroke: color-mix(in srgb, var(--text) 55%, transparent); }
20%, 100% { stroke: color-mix(in srgb, var(--text) 55%, transparent); }
}
@media (prefers-reduced-motion: no-preference) {
.carte-moi-onde { animation: carte-moi-onde 4s ease-out infinite; }
.carte-moi-point { animation: carte-moi-coeur 4s ease-out infinite; }
}
.carte-moi-lbl {
font-size: 9px;
fill: var(--muted-text);
user-select: none;
}
.lieu-distance { white-space: nowrap; }
.lieu-distance-carte { font-size: 0.8rem; text-align: center; margin: 6px 0 0; }
.photo-plein-sortante {
object-fit: contain;
border-radius: 8px;
pointer-events: none;
z-index: 2;
}
.dev-dropdown {
width: 330px;
padding: 12px 14px;
font-size: 0.85rem;
max-height: calc(100dvh - 120px);
overflow-y: auto;
overscroll-behavior: contain;
color: var(--text);
}
.dev-ligne {
display: flex;
align-items: first baseline;
justify-content: space-between;
gap: 12px;
margin: 0 0 5px;
}
.dev-ligne strong { font-weight: 600; flex: 0 0 auto; white-space: nowrap; }
.dev-ligne[title] { cursor: help; }
.dev-ligne-corps {
flex: 1 1 auto;
display: flex;
align-items: first baseline;
justify-content: space-between;
gap: 12px;
cursor: help;
}
.dev-ligne-corps {
color: inherit;
text-align: inherit;
font-variant-numeric: normal;
}
.dev-ligne .fav-bulle,
.dev-ligne .fav-bulle-d {
text-align: left;
font-variant-numeric: normal;
}
.dev-ligne.dev-groupe {
margin-top: 10px;
padding-top: 9px;
border-top: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
}
.dev-ligne span {
color: var(--muted-text);
font-variant-numeric: tabular-nums;
text-align: right;
}
.dev-alerte { color: var(--danger-solid); font-weight: 600; }
.dev-liste {
margin: 4px 0 8px;
padding-left: 18px;
font-size: 0.8rem;
color: var(--muted-text);
}
.dev-liste li { margin-bottom: 2px; }
.dev-lien {
display: block;
margin-top: 4px;
font-size: 0.85rem;
color: var(--yellow-dark);
text-decoration: none;
}
.dev-lien:hover { text-decoration: underline; }
.admin-photo-vignette { position: relative; }
.admin-photo-badge { display: none; }
.admin-photos-sup figure.est-couverture { border-color: var(--yellow-dark); }
.admin-photos-sup figure.est-couverture .admin-photo-badge {
display: block;
position: absolute;
left: 4px;
bottom: 4px;
padding: 1px 7px;
border-radius: 999px;
background: var(--yellow);
color: var(--navy-dark);
font-size: 0.65rem;
font-weight: 600;
}
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 240ms;
}
::view-transition-group(*) { animation-duration: 300ms; }
@media (prefers-reduced-motion: reduce) {
::view-transition-group(*),
::view-transition-old(root),
::view-transition-new(root) { animation: none; }
}
.site-header { view-transition-name: bandeau; }
main { view-transition-name: var(--tuile-nom, none); }
main[style*="--filigrane"] > .card.filigrane-gauche {
background-position: left 40px bottom 40px;
}
@media (max-width: 720px) {
main[style*="--filigrane"] > .card.filigrane-gauche {
background-position: left 16px bottom 16px;
}
}
main[style*="--filigrane"] > .card,
main[style*="--filigrane"] .page-with-toc > .card {
background-image: var(--filigrane-clair);
background-repeat: no-repeat;
background-position: right 40px bottom 40px;
background-size: 230px 230px;
}
.card.carte-lieu {
transition: box-shadow 0.45s ease;
}
.card.carte-lieu-favorite {
box-shadow:
0 0 0 1.5px color-mix(in srgb, var(--yellow) 70%, transparent),
0 0 22px color-mix(in srgb, var(--yellow) 38%, transparent),
0 0 60px color-mix(in srgb, var(--yellow) 18%, transparent);
}
:root main[style*="--filigrane"] > .card.carte-lieu-favorite,
:root[data-theme="dark"] main[style*="--filigrane"] > .card.carte-lieu-favorite,
:root[data-theme="light"] main[style*="--filigrane"] > .card.carte-lieu-favorite {
background-image: var(--filigrane-jaune);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) main[style*="--filigrane"] > .card.carte-lieu-favorite {
background-image: var(--filigrane-jaune);
}
}
main[style*="--filigrane"] #portrait-fiche.est-suivie {
background-image: var(--filigrane-jaune);
}
#portrait-fiche.est-suivie {
box-shadow:
0 0 0 1.5px color-mix(in srgb, var(--yellow) 70%, transparent),
0 0 22px color-mix(in srgb, var(--yellow) 38%, transparent),
0 0 60px color-mix(in srgb, var(--yellow) 18%, transparent);
}
main[style*="--filigrane"] #portrait-fiche {
background-size: 150px 150px;
}
main[style*="--filigrane"] > .card.sans-filigrane,
main[style*="--filigrane"] .page-with-toc > .card.sans-filigrane { background-image: none; }
main[style*="--filigrane"] > .card.filigrane-pied,
main[style*="--filigrane"] .page-with-toc > .card.filigrane-pied {
padding-bottom: 210px;
background-position: right 40px bottom 26px;
background-size: 160px 160px;
}
@media (max-width: 720px) {
main[style*="--filigrane"] > .card.filigrane-pied,
main[style*="--filigrane"] .page-with-toc > .card.filigrane-pied {
padding-bottom: 150px;
background-position: center bottom 20px;
background-size: 110px 110px;
}
}
main[style*="--filigrane"] > .card.filigrane-espace {
background-size: 130px 130px;
}
.card.filigrane-espace { padding-bottom: 170px; }
@media (max-width: 720px) {
.card.filigrane-espace { padding-bottom: 60px; }
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) main[style*="--filigrane"] > .card,
:root:not([data-theme="light"]) main[style*="--filigrane"] .page-with-toc > .card {
background-image: var(--filigrane-sombre);
}
}
:root[data-theme="dark"] main[style*="--filigrane"] > .card,
:root[data-theme="dark"] main[style*="--filigrane"] .page-with-toc > .card {
background-image: var(--filigrane-sombre);
}
:root[data-theme="light"] main[style*="--filigrane"] > .card,
:root[data-theme="light"] main[style*="--filigrane"] .page-with-toc > .card {
background-image: var(--filigrane-clair);
}
@media (max-width: 720px) {
main[style*="--filigrane"] > .card,
main[style*="--filigrane"] .page-with-toc > .card {
background-size: 130px 130px;
background-position: right 16px bottom 16px;
}
}
:root main[style*="--filigrane"] > .card.sans-filigrane,
:root main[style*="--filigrane"] .page-with-toc > .card.sans-filigrane {
background-image: none;
}
.statut-icone {
display: inline-flex;
align-items: center;
vertical-align: -2px;
margin-right: 5px;
}
.tile-chantier {
position: absolute;
top: -11px;
right: -11px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 11px 4px 9px;
border-radius: 999px;
background: var(--navy);
border: 1px solid var(--navy);
color: #fff;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.01em;
white-space: nowrap;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .tile-chantier {
background: var(--yellow-dark);
border-color: var(--yellow-dark);
color: var(--navy);
}
}
:root[data-theme="dark"] .tile-chantier {
background: var(--yellow-dark);
border-color: var(--yellow-dark);
color: var(--navy);
}
main[style*="--icone-page"] h1::before {
content: "";
display: inline-block;
width: 1.05em;
height: 1.05em;
margin-right: 0.42em;
vertical-align: -0.14em;
background-color: currentColor;
-webkit-mask: var(--icone-page) center / contain no-repeat;
mask: var(--icone-page) center / contain no-repeat;
}
main:has(.confid-head) h1::before { content: none; }
.tile:not(.tile-locked) { contain: paint; }
.tile-filigrane {
transition: transform 0.18s ease, opacity 0.18s ease;
}
.tile:not(.tile-locked):hover .tile-filigrane {
transform: translateY(-8px);
opacity: 0.08;
}
@media (prefers-reduced-motion: reduce) {
.tile-filigrane { transition: none; }
.tile:not(.tile-locked):hover .tile-filigrane { transform: none; }
}
.tile-filigrane-zone {
position: absolute;
inset: 0;
overflow: hidden;
border-radius: 12px;
z-index: 0;
pointer-events: none;
}
.admin-photo-infos {
margin: 5px 0 0;
font-size: 0.72rem;
color: var(--muted-text);
font-variant-numeric: tabular-nums;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lieu-hero-zoom {
position: absolute;
top: 12px;
right: 12px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 9px;
border-radius: 9px;
border: 1px solid rgba(255, 255, 255, 0.3);
background: rgba(0, 0, 0, 0.42);
color: #fff;
font-size: 0.8rem;
line-height: 1;
pointer-events: none;   
}
.lieu-hero-zoom svg { width: 15px; height: 15px; }
.lieu-hero-zoom-n { font-variant-numeric: tabular-nums; }
@keyframes lieu-arrivee-halo {
from {
box-shadow: 0 0 0 6px rgba(255, 200, 87, 0.45), 0 0 26px 6px rgba(255, 200, 87, 0.35);
border-color: var(--yellow);
}
to {
box-shadow: 0 0 0 0 rgba(255, 200, 87, 0);
border-color: var(--grey-border);
}
}
.lieu-card-arrivee { animation: lieu-arrivee-halo 2s ease-out; }
@keyframes lieu-arrivee-halo-long {
0%, 60% {
box-shadow: 0 0 0 6px rgba(255, 200, 87, 0.45), 0 0 26px 6px rgba(255, 200, 87, 0.35);
border-color: var(--yellow);
}
100% {
box-shadow: 0 0 0 0 rgba(255, 200, 87, 0);
border-color: var(--grey-border);
}
}
.lieu-card-arrivee.est-longue { animation: lieu-arrivee-halo-long 4.5s ease-out; }
@keyframes pill-arrivee-halo {
from {
box-shadow: 0 0 0 4px rgba(255, 200, 87, 0.55), 0 0 16px 4px rgba(255, 200, 87, 0.45);
border-color: var(--yellow);
background: var(--yellow);
}
to { box-shadow: 0 0 0 0 rgba(255, 200, 87, 0); }
}
.pill-arrivee { animation: pill-arrivee-halo 2.4s ease-out; }
.pill-filtre.pill-arrivee { filter: none; opacity: 1; text-decoration: none; }
.region-filtre[id] { scroll-margin-top: 190px; }
@media (prefers-reduced-motion: reduce) {
.lieu-card-arrivee, .lieu-card-arrivee.est-longue { animation: none; border-color: var(--yellow-dark); }
.pill-arrivee { animation: none; border-color: var(--yellow-dark); }
}
.compteur-champ[hidden] { display: none; }
.compteur-champ {
display: block;
margin-top: 3px;
font-size: 0.72rem;
color: var(--muted-text);
}
.compteur-limite { color: var(--danger-solid); font-weight: 600; }
.lieu-hero-admin {
position: absolute;
left: 12px;
top: 12px;
z-index: 3;
}
:root .lieu-hero-admin .lien-admin {
background: var(--white);
border-color: var(--white);
color: var(--navy);
box-shadow: 0 2px 10px rgba(16, 21, 27, 0.35);
}
:root .lieu-hero-admin .lien-admin-badge { background: var(--navy); color: var(--white); }
.lieu-hero-admin .lien-admin:hover { box-shadow: 0 5px 16px rgba(16, 21, 27, 0.45); }
.lieu-hero-admin .badge-brouillon {
display: inline-block;
margin-left: 8px;
padding: 4px 10px;
border-radius: 999px;
background: var(--white);
color: var(--navy);
font-size: 0.78rem;
font-weight: 600;
box-shadow: 0 2px 10px rgba(16, 21, 27, 0.35);
}
.tri-lieux {
display: flex;
align-items: center;
gap: 6px;
}
.tri-lieux-label {
font-size: 0.78rem;
color: var(--muted-text);
}
.tri-option[aria-pressed="true"] {
background: var(--yellow);
border-color: var(--yellow-dark);
color: var(--navy-dark);
font-weight: 600;
}
.tri-option[aria-pressed="false"] {
filter: none;
opacity: 1;
text-decoration: none;
}
.section-intro {
margin: 6px 0 14px;
font-size: 0.92rem;
text-wrap: pretty;
}
.section-outils {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px 16px;
margin: 16px 0 14px;
}
.section-outils .region-filtres { margin-left: 0; }
.prochaines-liste {
display: flex;
flex-direction: column;
gap: 8px;
}
.prochaine-item {
display: flex;
align-items: center;
gap: 14px;
padding: 10px 12px;
border: 1px solid var(--grey-border);
border-radius: 10px;
background: var(--surface);
text-decoration: none;
color: var(--text);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.prochaine-item:hover {
border-color: var(--yellow-dark);
box-shadow: 0 4px 14px rgba(46, 64, 82, 0.10);
}
.prochaine-badge {
flex: 0 0 auto;
width: 44px;
text-align: center;
line-height: 1.1;
}
.prochaine-badge b {
display: block;
font-size: 1.1rem;
font-weight: 700;
}
.prochaine-badge span {
display: block;
font-size: 0.68rem;
color: var(--muted-text);
text-transform: uppercase;
}
.prochaine-corps {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.prochaine-titre { font-weight: 600; }
.prochaine-dates { font-size: 0.85rem; }
.prochaine-statut {
flex: 0 0 auto;
margin-left: 0;   
text-align: right;
max-width: 180px;
white-space: normal;
line-height: 1.25;
}
@media (max-width: 480px) {
.prochaine-item { flex-wrap: wrap; }
.lieu-prochaines .prochaine-item { flex-wrap: nowrap; }
.prochaine-statut { margin-left: 58px; max-width: none; text-align: left; }
}
.nav-frise { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nav-frise-mois {
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted-text);
margin-left: 8px;
}
.nav-frise-mois:first-child { margin-left: 0; }
.nav-jour {
font: inherit;
font-size: 0.78rem;
border: 1px solid var(--grey-border);
background: var(--grey-bg);
color: var(--text);
border-radius: 999px;
padding: 3px 10px;
cursor: pointer;
font-variant-numeric: tabular-nums;
}
.nav-jour:hover { border-color: var(--yellow-dark); }
.nav-jour.est-aujourdhui { border-color: var(--yellow-dark); box-shadow: inset 0 0 0 1px var(--yellow-dark); }
.nav-jour[aria-pressed="true"] {
background: var(--yellow);
border-color: var(--yellow-dark);
color: var(--navy);
}
.nav-jour-n { color: var(--muted-text); font-size: 0.72rem; }
.nav-jour[aria-pressed="true"] .nav-jour-n { color: var(--navy); }
.nav-cal { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.nav-cal-mois { display: flex; flex-direction: column; gap: 4px; }
.nav-cal-titre {
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted-text);
}
.nav-cal-grille {
display: grid;
grid-template-rows: repeat(7, 14px);
grid-auto-flow: column;
grid-auto-columns: 14px;
gap: 3px;
}
.portraits-grille {
display: grid;
gap: 20px;
grid-template-columns: repeat(auto-fill, min(280px, 100%));
justify-content: center;
margin-top: 14px;
}
.portrait-carte {
display: flex;
flex-direction: column;
border: 1px solid var(--grey-border);
border-radius: 14px;
overflow: hidden;
background: var(--surface);
text-decoration: none;
color: inherit;
transition: top 0.18s ease, box-shadow 0.18s ease;
}
a.portrait-carte:hover {
top: -2px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.09);
}
.portrait-carte.est-a-venir {
cursor: default;
border-style: dashed;
}
.portrait-carte img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
display: block;
background: var(--grey-bg);
}
.portrait-corps { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.portrait-prenom { margin: 0; font-weight: 700; font-size: 1.02rem; }
.portrait-accroche,
.apercu-accroche-rendu {
font-style: italic;
}
.portrait-accroche {
margin: 0;
font-size: 0.86rem;
line-height: 1.45;
color: var(--muted-text);
min-height: calc(4 * 1.45em);
}
.portrait-lieu,
.portrait-audio {
display: inline-flex;
align-items: center;
gap: 4px;
align-self: flex-start;
padding: 2px 9px;
border-radius: 999px;
background: var(--grey-bg);
color: var(--muted-text);
font-size: 0.74rem;
}
.portrait-marques { display: flex; flex-wrap: wrap; gap: 6px; align-self: flex-start; }
.portrait-audio { color: var(--yellow-dark); font-variant-numeric: tabular-nums; }
.portrait-audio svg { width: 12px; height: 12px; flex: 0 0 auto; }
.portrait-lire { margin-top: auto; font-size: 0.84rem; font-weight: 600; color: var(--yellow-dark); }
.portrait-bientot { margin-top: auto; font-size: 0.8rem; color: var(--muted-text); font-style: italic; }
.portrait-carte[hidden] { display: none; }
.portrait-hero-titre {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 6px 14px;
}
.portrait-hero-titre h1 { margin: 0; }
.portrait-texte { line-height: 1.7; max-width: 72ch; }
.temoignages-grille {
display: grid;
gap: 18px;
grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
margin-top: 14px;
}
.temoignage-mien {
box-shadow:
0 0 0 1.5px color-mix(in srgb, var(--yellow) 70%, transparent),
0 0 22px color-mix(in srgb, var(--yellow) 38%, transparent),
0 0 60px color-mix(in srgb, var(--yellow) 18%, transparent);
}
.temoignage { position: relative; top: 0; }
@media (hover: hover) and (pointer: fine) {
.temoignage:hover {
top: -2px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.09);
}
.temoignage-mien:hover {
box-shadow:
0 0 0 1.5px color-mix(in srgb, var(--yellow) 70%, transparent),
0 0 22px color-mix(in srgb, var(--yellow) 38%, transparent),
0 0 60px color-mix(in srgb, var(--yellow) 18%, transparent),
0 6px 20px rgba(0, 0, 0, 0.09);
}
}
.temoignage-tete {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
min-height: 26px;
margin-bottom: 6px;
}
.temoignage-mien-marque {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0;
padding: 3px 10px;
border-radius: 999px;
background: var(--yellow);
color: var(--navy);
font-size: 0.72rem;
font-weight: 700;
user-select: none;
}
.temoignage-tete > .temoignage-interest-btn,
.temoignage-fav > .temoignage-interest-btn { margin-left: auto; }
.temoignage-interest-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
padding: 0;
border: 0;
border-radius: 9px;
background: none;
color: var(--muted-text);
cursor: pointer;
transition: color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
.temoignage-interest-btn.is-interested { color: var(--yellow-dark); }
:root[data-theme="dark"] .temoignage-interest-btn.is-interested { color: var(--yellow); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .temoignage-interest-btn.is-interested { color: var(--yellow); }
}
@media (hover: hover) and (pointer: fine) {
.temoignage-interest-btn:hover {
color: var(--yellow-dark);
background: color-mix(in srgb, var(--yellow) 18%, transparent);
transform: translateY(-1px);
}
}
.temoignage-interest-btn:focus-visible {
outline: 2px solid var(--yellow-dark);
outline-offset: 2px;
}
.temoignage-qui-ligne {
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: 6px 12px;
}
.temoignage-qui-ligne .temoignage-qui,
.temoignage .temoignage-qui {
margin: 0;
font-size: 0.92rem;
font-weight: 400;
line-height: 1.4;
}
.temoignage .temoignage-qui strong { font-weight: 700; }
.temoignage-lien-btn {
display: inline-flex;
align-items: center;
gap: 6px;
flex: 0 0 auto;
padding: 4px 12px;
border: 1px solid var(--grey-border);
border-radius: 999px;
background: var(--surface);
color: var(--text);
text-decoration: none;
font-size: 0.76rem;
font-weight: 600;
white-space: nowrap;
transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
@media (hover: hover) and (pointer: fine) {
.temoignage-lien-btn:hover {
background: color-mix(in srgb, var(--yellow) 22%, var(--surface));
border-color: var(--yellow-dark);
transform: translateY(-1px);
}
}
.temoignage-lien-btn:focus-visible { outline: 2px solid var(--yellow-dark); outline-offset: 2px; }
.temoignage-mesure {
margin: 10px 0 0;
font-size: 0.68rem;
color: var(--muted-text);
font-variant-numeric: tabular-nums;
}
.temoignage {
margin: 0;
padding: 16px 18px;
transition: top 0.18s ease, box-shadow 0.18s ease;
border: 1px solid var(--grey-border);
border-radius: 14px;
background: var(--surface);
display: flex;
flex-direction: column;
}
.temoignage blockquote {
margin: 0 0 12px;
padding-left: 14px;
border-left: 3px solid color-mix(in srgb, var(--yellow) 60%, transparent);
font-size: 0.92rem;
line-height: 1.65;
text-align: justify;
hyphens: auto;
}
.temoignage figcaption { margin-top: auto; font-size: 0.84rem; }
.temoignage-qui { margin: 0; }
.temoignage-contexte { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.temoignage-tag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 9px;
border-radius: 999px;
background: var(--grey-bg);
color: var(--muted-text);
font-size: 0.74rem;
text-wrap: pretty;
}
.temoignage-tag { align-items: flex-start; }
.temoignage-tag svg { flex: 0 0 auto; margin-top: 2px; }
.temoignage-contexte-velo { margin-top: 6px; }
.photo-chiffres {
display: flex;
flex-wrap: wrap;
gap: 22px;
margin: 14px 0 22px;
font-size: 0.9rem;
color: var(--muted-text);
}
.photo-chiffres strong { color: var(--text); font-size: 1.4rem; margin-right: 4px; }
.photo-alertes {
margin: 0 0 24px;
padding: 14px 16px;
border-radius: 12px;
background: color-mix(in srgb, var(--yellow) 14%, var(--surface));
border: 1px solid color-mix(in srgb, var(--yellow-dark) 30%, transparent);
}
.photo-alertes h2 { margin: 0 0 8px; font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.photo-alertes p { margin: 8px 0 4px; font-size: 0.9rem; }
.photo-alertes ul { margin: 0 0 8px; padding-left: 20px; font-size: 0.84rem; }
.photo-alertes code { font-size: 0.82rem; }
.photo-orphelins summary { cursor: pointer; font-size: 0.84rem; }
.photo-orphelins ul { max-height: 260px; overflow-y: auto; margin-top: 6px; }
.photo-ok {
display: flex; align-items: center; gap: 8px;
margin: 0 0 24px; font-size: 0.9rem; color: var(--success-text);
}
.photo-grille {
display: grid;
gap: 18px;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
margin-bottom: 30px;
}
.photo-fiche {
margin: 0;
border: 1px solid var(--grey-border);
border-radius: 12px;
background: var(--surface);
display: flex;
flex-direction: column;
}
.photo-fiche-ouvrir {
display: block;
width: 100%;
height: 150px;
flex: none;
padding: 0;
margin: 0;
border: none;
border-radius: 0;
cursor: zoom-in;
background: var(--grey-bg);
overflow: hidden;
}
.photo-fiche img {
width: 100%;
height: 150px;
object-fit: cover;
display: block;
background: var(--grey-bg);
}
.photo-manquante {
height: 150px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
background: var(--grey-bg);
color: var(--muted-text);
font-size: 0.76rem;
}
.photo-fiche.est-cassee { border-color: color-mix(in srgb, var(--danger-solid) 40%, transparent); }
.photo-fiche figcaption { padding: 10px 12px 12px; font-size: 0.82rem; }
.photo-nom { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.photo-meta { margin: 2px 0 0; font-size: 0.76rem; font-variant-numeric: tabular-nums; }
.photo-legende { margin: 6px 0 0; line-height: 1.45; }
.photo-credit { margin: 2px 0 0; font-size: 0.74rem; }
.photo-liens { margin: 8px 0 0; font-size: 0.78rem; line-height: 1.5; }
.photo-partagee {
display: inline-block;
margin-right: 6px;
padding: 1px 7px;
border-radius: 999px;
background: color-mix(in srgb, var(--yellow) 32%, transparent);
color: var(--text);
font-size: 0.68rem;
font-weight: 600;
}
.photo-tags {
margin-top: 10px;
padding-top: 8px;
border-top: 1px dashed var(--grey-border);
}
.photo-tags-liste { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.photo-tags-liste li {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 4px 2px 9px;
transition: opacity 0.18s ease, transform 0.18s ease;
border-radius: 999px;
background: var(--grey-bg);
font-size: 0.74rem;
}
.photo-tags-liste form { display: inline; margin: 0; }
.photo-tags-liste button,
.photo-lien button {
border: none;
background: none;
cursor: pointer;
padding: 0 4px;
font-size: 0.9rem;
line-height: 1;
color: var(--muted-text);
border-radius: 999px;
}
.photo-tags-liste button:hover,
.photo-lien button:hover { color: var(--yellow-dark); }
.cherchable { position: relative; flex: 1 1 auto; min-width: 0; }
.cherchable-cache { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.cherchable-champ {
width: 100%;
box-sizing: border-box;
font: inherit;
font-size: 0.76rem;
padding: 5px 8px;
border: 1px solid var(--grey-border);
border-radius: 8px;
background: var(--surface);
color: var(--text);
}
.cherchable-champ:focus { outline: 2px solid var(--yellow-dark); outline-offset: 1px; }
@keyframes cherchable-secousse {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-3px); }
75% { transform: translateX(3px); }
}
.cherchable-champ.est-vide {
border-color: var(--danger-solid);
animation: cherchable-secousse 0.25s ease 2;
}
.cherchable-liste {
position: absolute;
z-index: 40;
left: 0;
right: 0;
top: calc(100% + 3px);
margin: 0;
padding: 4px;
list-style: none;
max-height: 220px;
overflow-y: auto;
background: var(--surface);
border: 1px solid var(--grey-border);
border-radius: 10px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}
.cherchable-liste li {
padding: 5px 8px;
border-radius: 6px;
font-size: 0.78rem;
cursor: pointer;
}
.cherchable-liste li:hover,
.cherchable-liste li.est-visee { background: var(--grey-bg); }
.cherchable-liste li.cherchable-famille {
padding: 8px 12px 3px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted);
cursor: default;
}
.cherchable-liste li.cherchable-famille:hover { background: none; }
.cherchable-liste li.cherchable-famille:first-child { padding-top: 4px; }
.cherchable-liste li.cherchable-reste {
color: var(--muted-text);
font-size: 0.72rem;
font-style: italic;
cursor: default;
}
.cherchable-liste li.cherchable-reste:hover { background: none; }
.photo-tag-ajout { display: flex; gap: 6px; align-items: center; }
.photo-tag-ajout select {
flex: 1 1 auto;
min-width: 0;
font-size: 0.76rem;
padding: 4px 6px;
}
.photo-tag-ajout .btn { padding: 5px 10px; font-size: 0.76rem; margin: 0; }
.photo-explication { max-width: 78ch; }
.photo-explication h3 { margin: 20px 0 6px; font-size: 0.98rem; }
.photo-explication p { margin: 8px 0; line-height: 1.6; }
@media (min-width: 1300px) {
.nouv-adm-scene {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 26px;
align-items: start;
}
.nouv-adm-colonne { min-width: 0; }
.nouv-adm-cote {
min-width: 0;
position: sticky;
top: calc(var(--header-h, 96px) + 14px);
max-height: calc(100svh - var(--header-h, 96px) - 40px);
overflow-y: auto;
padding-right: 6px;
}
.nouv-adm-cote > h2:first-child { margin-top: 0; }
}
.nav-cal-semaines {
grid-template-rows: auto;
margin-bottom: 2px;
}
.nav-cal-semaine {
font-size: 0.5rem;
line-height: 1;
text-align: center;
color: var(--muted-text);
opacity: 0.75;
font-variant-numeric: tabular-nums;
cursor: default;
}
.nav-cal-jours .nav-cal-semaines { visibility: hidden; }
.nav-cal-grille-jours {
grid-auto-flow: row;
grid-auto-columns: auto;
}
.nav-cal-jour {
display: flex;
align-items: center;
justify-content: center;
width: 13px;
height: 14px;
font-size: 0.58rem;
line-height: 1;
color: var(--muted-text);
cursor: default;
}
.nav-cal-jours { margin-right: 2px; }
.nav-case {
display: block;
text-decoration: none;
width: 14px;
height: 14px;
padding: 0;
border: 1px solid var(--grey-border);
border-radius: 3px;
background: color-mix(in srgb, var(--yellow) calc(var(--force, 0) * 1%), var(--fond-vide, var(--grey-bg)));
cursor: pointer;
}
.fr-titre.est-passe .fr-titre-m,
.fr-titre.est-passe .fr-titre-c { color: color-mix(in srgb, var(--muted-text) 36%, transparent); }
.fr-sem.est-passe { color: color-mix(in srgb, var(--muted-text) 32%, transparent); }
.fr-annee.est-passe .fr-annee-t { color: color-mix(in srgb, var(--muted-text) 25%, transparent); }
.frise-passe-efface .nav-case.est-aujourdhui {
--fond-vide: color-mix(in srgb, var(--grey-bg) 52%, transparent);
opacity: 1;
}
.frise-passe-efface .nav-case.est-aujourdhui.est-jour-avance {
--fond-vide: color-mix(in srgb, var(--grey-bg) 16%, transparent);
}
.frise-passe-efface .nav-case.est-passe,
.frise-passe-efface .nav-case[data-vide].est-passe,
.frise-passe-efface .fr-cal[data-sans-zones] .fr-zone > .nav-case.est-passe {
--fond-vide: var(--grey-bg);
border-color: var(--grey-border);
opacity: .16;
}
.nav-case.est-aujourdhui::after {
content: '';
position: absolute;
left: 1px;
right: 1px;
top: calc(var(--heure, .5) * 100%);
height: 2px;
margin-top: -1px;
border-radius: 1px;
background: var(--yellow-dark);
pointer-events: none;
}
.nav-case.est-aujourdhui {
border-width: 2px;
border-color: var(--jour-teinte, var(--yellow-dark));
z-index: 1;
}
@keyframes fr-halo {
0%  { box-shadow: 0 0 0 0 color-mix(in srgb, var(--jour-teinte, var(--yellow-dark)) 92%, transparent); }
9%  { box-shadow: 0 0 0 18px transparent; }
10% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--jour-teinte, var(--yellow-dark)) 92%, transparent); }
19% { box-shadow: 0 0 0 18px transparent; }
20%, 100% { box-shadow: 0 0 0 0 transparent; }
}
.fr-zone .nav-case.est-aujourdhui {
--jour-teinte: var(--text);
border-width: 3px;
}
.frise-cal-nue .fr-zone .nav-case.est-aujourdhui { --jour-teinte: var(--yellow-dark); }
.fr-zone-teintee .nav-case.est-aujourdhui { --jour-teinte: var(--yellow-dark); }
@media (prefers-reduced-motion: no-preference) {
.nav-case.est-aujourdhui { animation: fr-halo 4s ease-out infinite; }
}
.nav-case[data-vide],
.fr-cal[data-sans-zones] .fr-zone > .nav-case { cursor: default; opacity: 0.52; }
.nav-case:hover { outline: 1px solid var(--yellow-dark); outline-offset: -1px; }
.nav-case[data-vide]:hover,
.fr-cal[data-sans-zones] .fr-zone > .nav-case:hover { opacity: .82; }
.nav-case[data-vide].est-passe:hover,
.fr-cal[data-sans-zones] .fr-zone > .nav-case.est-passe:hover { opacity: .52; }
.fr-cell.fr-zone > .nav-case:hover { transition-delay: 0s; }
.nav-case[aria-pressed="true"] { border-color: var(--text); }
.nav-cal-legende {
font-size: 0.7rem;
color: var(--muted-text);
}
.nav-cal-legende .nav-case {
display: inline-block;
vertical-align: -0.2em;
margin: 0 1px;
}
.nav-fil-mois { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.nav-fil-jours {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
margin-top: 8px;
padding-left: 14px;
border-left: 2px solid var(--yellow);
}
.nav-fil-jours[hidden] { display: none; }
.frise-temps { margin: 4px 0 18px; }
.frise-temps .frise-cal { margin-bottom: 12px; }
.frise-resultat {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.frise-resultat { margin: 10px 0 0; font-size: 0.86rem; }
.frise-resultat:empty { display: none; }
.frise-tout {
font: inherit;
font-size: 0.74rem;
text-transform: uppercase;
letter-spacing: 0.04em;
border: 1px dashed var(--grey-border);
background: none;
color: var(--muted-text);
border-radius: 999px;
padding: 3px 11px;
margin-left: 8px;
cursor: pointer;
}
.frise-tout:hover { border-color: var(--yellow-dark); color: var(--yellow-dark); }
.frise-tout.est-cache { visibility: hidden; }
.nouv-mois {
display: flex;
align-items: center;
gap: 10px;
margin: 26px 0 10px;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--muted-text);
font-weight: 700;
}
.nouv-mois::after {
content: "";
flex: 1;
height: 1px;
background: var(--grey-border);
}
.nouv-neuf {
background: var(--yellow);
color: var(--navy-dark);
border-radius: 999px;
padding: 2px 9px;
font-size: 0.62rem;
letter-spacing: 0.02em;
text-transform: none;
}
.nouv-item {
display: flex;
gap: 14px;
padding: 13px 0;
border-bottom: 1px solid var(--grey-border);
}
.nouv-item:last-child { border-bottom: 0; }
.nouv-item[hidden] { display: none; }
.nouv-jour {
display: flex;
align-items: center;
gap: 9px;
margin: 18px 0 2px;
font-size: 0.86rem;
font-weight: 600;
}
.nouv-jour[hidden] { display: none; }
.nouv-jour-date::first-letter { text-transform: uppercase; }
.nouv-jour-n {
font-size: 0.72rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--muted-text);
background: var(--grey-bg);
border-radius: 999px;
padding: 1px 8px;
}
.nouv-emoji {
flex: 0 0 auto;
width: 38px;
height: 38px;
border-radius: 10px;
background: var(--grey-bg);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.nouv-corps h3 { margin: 0 0 3px; font-size: 1rem; }
.nouv-corps p { margin: 0; color: var(--muted-text); font-size: 0.9rem; line-height: 1.5; }
.nouv-bilan { margin: 4px 0 14px; font-size: 0.9rem; }
.nouv-bilan-alerte { display: block; margin-top: 2px; color: var(--orange-alerte); }
.nouv-adm-jour { margin: 0 0 22px; }
.nouv-adm-jour[hidden] { display: none; }
.nouv-adm-jour-tete {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
padding-bottom: 6px;
border-bottom: 1px solid var(--grey-border);
margin-bottom: 8px;
}
.nouv-adm-jour-tete h2 { margin: 0; font-size: 1.05rem; }
.nouv-adm-compte {
font-size: 0.78rem;
color: var(--muted-text);
font-variant-numeric: tabular-nums;
}
.nouv-adm-jour-tete .nouv-adm-form { margin: 0 0 0 auto; }
.nouv-adm-form { display: inline; margin: 0; }
.nouv-adm-item { border-bottom: 1px solid var(--grey-border); }
.nouv-adm-item:last-child { border-bottom: 0; }
.nouv-adm-item > summary {
display: flex;
align-items: center;
gap: 9px;
padding: 8px 2px;
cursor: pointer;
list-style: none;
}
.nouv-adm-item > summary::-webkit-details-marker { display: none; }
.nouv-adm-item > summary:hover { background: var(--grey-bg); }
.nouv-adm-emoji { font-size: 1.05rem; line-height: 1; }
.nouv-adm-titre { font-weight: 600; }
.est-brouillon > summary .nouv-adm-titre { color: var(--muted-text); font-weight: 500; }
.nouv-adm-corps { padding: 2px 2px 14px 30px; }
.nouv-adm-desc { margin: 0 0 10px; font-size: 0.9rem; line-height: 1.5; max-width: 90ch; }
.nouv-adm-note { margin: 0 0 12px; font-size: 0.82rem; color: var(--muted-text); }
.nouv-adm-note summary { cursor: pointer; }
.nouv-adm-note-corps { max-width: 72ch; margin-top: 6px; font-size: 0.86rem; line-height: 1.65; color: var(--text); }
.nouv-adm-note-corps p { margin: 0 0 0.7em; text-wrap: pretty; }
.nouv-adm-note-corps p:last-child { margin-bottom: 0; }
.nouv-adm-note-corps strong { font-weight: 600; letter-spacing: 0.01em; }
.nouv-adm-note-corps code { font-size: 0.92em; padding: 0 0.25em; border-radius: 4px; background: color-mix(in srgb, var(--text) 8%, transparent); }
.nouv-adm-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.nouv-adm-actions .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45em;
margin: 0;
border: 1px solid transparent;
line-height: 1.5;
padding: 6px 14px;
font-size: 0.86rem;
}
.nouv-adm-actions .btn-secondary { border-color: var(--text); }
.nouv-adm-actions .btn svg { flex: 0 0 auto; }
.feedback-nouv {
margin: 14px 0 0;
padding-top: 12px;
border-top: 1px solid var(--grey-border);
font-size: 0.85rem;
}
.feedback-nouv a {
color: var(--text);
text-decoration: none;
border-bottom: 1.5px solid var(--yellow);
}
.apercu-tuile {
width: 408px;
max-width: 100%;
font-family: var(--font);
font-size: 0.92rem;
line-height: 1.6;
}
.apercu-titre { width: 406px; max-width: 100%; }
.apercu-tuile-info {
margin: 4px 0 0;
font-size: 0.8rem;
color: var(--muted-text);
font-variant-numeric: tabular-nums;
}
.apercu-tuile-info.est-court {
color: var(--yellow-dark);
font-weight: 600;
}
.apercu-tuile-info.est-rouge { color: var(--error-text); }
.est-rouge { color: var(--error-text); }
.apercu-tuile-aide { margin: 8px 0 2px; font-size: 0.8rem; }
.champ-apercu {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0 28px;
align-items: start;
}
.champ-apercu-saisie { min-width: 0; }
.champ-libelle-info { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.champ-libelle-info .apercu-tuile-info { margin: 0; }
.champ-libelle-info .btn-link { flex: none; font-size: 0.8rem; }
.champ-apercu-saisie .apercu-titre,
.champ-apercu-saisie .apercu-tuile { width: 100%; }
.champ-apercu-legende {
display: block;
font-weight: 600;
font-size: 0.9rem;
margin: 14px 0 6px;
}
.champ-apercu-carte {
width: 440px;
max-width: 100%;
}
.champ-apercu-carte .formation-card,
.champ-apercu-carte .lieu-card,
.champ-apercu-carte .stage-card { transition: none; }
.champ-apercu-carte .formation-card:hover,
.champ-apercu-carte .lieu-card:hover,
.champ-apercu-carte .stage-card:hover {
border-color: var(--grey-border);
box-shadow: none;
transform: none;
}
.champ-apercu-carte .formation-card-body,
.champ-apercu-carte .lieu-card-body,
.champ-apercu-carte .stage-card-body { min-height: 3.4em; }
.champ-apercu-note { margin: 6px 0 0; font-size: 0.8rem; max-width: 440px; }
.form-cale-apercu {
--apercu-col: 440px;
--apercu-gap: 28px;
}
.form-cale-apercu .champ-apercu {
grid-template-columns: minmax(0, 1fr) var(--apercu-col);
gap: 0 var(--apercu-gap);
}
.form-cale-apercu > input:not([type="checkbox"]):not([type="radio"]),
.form-cale-apercu > textarea,
.form-cale-apercu > select,
.form-cale-apercu > .form-row,
.form-cale-apercu > .field-row {
max-width: calc(100% - var(--apercu-col) - var(--apercu-gap));
}
.form-cale-apercu > .champ-apercu ~ input:not([type="checkbox"]):not([type="radio"]),
.form-cale-apercu > .champ-apercu ~ textarea,
.form-cale-apercu > .champ-apercu ~ select,
.form-cale-apercu > .champ-apercu ~ .form-row,
.form-cale-apercu > .champ-apercu ~ .field-row {
max-width: 100%;
}
@media (max-width: 900px) {
.champ-apercu { grid-template-columns: minmax(0, 1fr); }
.champ-apercu-legende { margin-top: 12px; }
.form-cale-apercu .champ-apercu { grid-template-columns: minmax(0, 1fr); }
.form-cale-apercu > input:not([type="checkbox"]):not([type="radio"]),
.form-cale-apercu > textarea,
.form-cale-apercu > select,
.form-cale-apercu > .form-row,
.form-cale-apercu > .field-row {
max-width: 100%;
}
}
.apercu-accroche-rendu {
width: 250px;
max-width: 100%;
padding: 10px 0 0;
border-top: 1px dashed var(--grey-border);
font-size: 0.86rem;
line-height: 1.45;
color: var(--muted-text);
hyphens: auto;
-webkit-hyphens: auto;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.tile-icon:has(svg) {
width: 68px;
height: 68px;
}
.tile-filigrane {
position: absolute;
bottom: -12px;
right: -12px;
line-height: 0;
color: var(--text);
opacity: 0.05;
z-index: 0;
pointer-events: none;
}
.tile > *:not(.tile-filigrane):not(.tile-filigrane-zone):not(.tile-lock):not(.tile-chantier):not(.tile-halo):not(.intro-close) {
position: relative;
z-index: 1;
}
.stages-intro {
max-width: 820px;
}
.stages-entete {
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: flex-start;
margin: 8px 0 24px;
}
.stages-entete > .stages-intro { flex: 1 1 440px; margin: 0; }
.stages-entete > .mes-choix { flex: 1 1 300px; margin: 0; }
.stages-intro p {
text-align: justify;
hyphens: auto;
-webkit-hyphens: auto;
}
.lieu-lieu,
.lieu-barre-lieu {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 3px 14px;
}
.lieu-meta {
display: inline-flex;
align-items: center;
gap: 4px;
}
.lieu-meta svg {
flex: 0 0 auto;
opacity: 0.75;
}
.lieu-barre .temoignage-tag {
position: relative;
top: 1.5px;
}
.lieu-barre .lieu-actions {
flex: 0 0 auto;
}
.lieu-meta-region svg { margin-right: 2px; }
.filtre-pipe {
color: var(--grey-border);
user-select: none;
align-self: center;
}
.region-filtres { align-items: center; }
.pill-filtre-icone {
display: inline-flex;
flex: 0 0 auto;
margin-right: 4px;
vertical-align: -1px;
}
@media (max-width: 900px) {
.pill-filtre-icone { display: none; }
.filtre-label-long { display: none; }
}
.formations-intro { margin-bottom: 4px; text-wrap: pretty; }
.formations-grid {
display: grid;
grid-template-columns: repeat(auto-fill, min(440px, 100%));
justify-content: start;
gap: 18px;
margin-top: 14px;
}
.formation-card {
position: relative;      
display: flex;
flex-direction: column;
border: 1px solid var(--grey-border);
border-radius: 12px;
overflow: hidden;
background: var(--surface);
transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.formation-card:hover {
border-color: var(--yellow-dark);
box-shadow: 0 8px 24px rgba(46, 64, 82, 0.12);
transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
.formation-card { transition: none; }
.formation-card:hover { transform: none; }
}
.formation-card-bientot { border-style: dashed; }
.formation-card-photo {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
}
.formation-card-sans-photo {
display: flex;
align-items: center;
justify-content: center;
color: var(--muted-text);
opacity: 0.4;
background: color-mix(in srgb, var(--text) 6%, transparent);
}
.formation-card-body {
padding: 16px;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
.formation-card-body h3 { margin: 0; }
.formation-card-body h3 a { color: inherit; text-decoration: none; }
.formation-card-body h3 a:hover { text-decoration: underline; }
.formation-sous {
margin: 0;
font-weight: 600;
color: var(--yellow-dark);
font-size: 0.9rem;
text-align: left;
hyphens: auto;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
@media (max-width: 560px) {
.formation-sous { -webkit-line-clamp: 3; }
}
.carte-admin {
position: absolute;
top: 10px;
right: 10px;
z-index: 2;
}
.lieu-card, .stage-card { position: relative; }
.stage-card-chapeau .lien-admin { margin-left: auto; }
.stage-card-chapeau .lien-admin .lien-admin-label { font-weight: 600; }
.formation-bientot {
position: absolute;
top: 10px;
left: 10px;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0;
padding: 4px 9px;
border: 1px solid var(--grey-border);
border-radius: 999px;
background: var(--surface);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--muted-text);
}
.formation-bientot svg { flex: 0 0 auto; }
.formation-bientot,
.formation-card .tile-interest-btn { overflow: hidden; }
.formation-bientot::after,
.formation-card .tile-interest-btn::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;   
opacity: 0;
background: linear-gradient(100deg,
transparent 30%,
color-mix(in srgb, var(--yellow) 78%, transparent) 50%,
transparent 70%);
}
@keyframes balaye-lumiere {
from { opacity: 1; transform: translateX(-130%); }
to   { opacity: 1; transform: translateX(130%); }
}
@keyframes balaye-gonfle {
0%, 100% { transform: scale(1); }
45%      { transform: scale(1.04); }
}
.balaye::after { animation: balaye-lumiere 1300ms ease-in-out; }
.balaye { animation: balaye-gonfle 1300ms ease-in-out; }
.formation-bientot { transition: border-color 600ms ease; }
.formation-card .tile-interest-btn {
transition: border-color 600ms ease, color 0.15s ease, background 0.15s ease;
}
.formation-bientot.balaye,
.formation-card .tile-interest-btn.balaye { border-color: var(--yellow-dark); }
@media (prefers-reduced-motion: reduce) {
.balaye::after, .balaye { animation: none; }
.formation-bientot.balaye,
.formation-card .tile-interest-btn.balaye { border-color: var(--grey-border); }
}
.formation-meta {
display: flex;
flex-wrap: wrap;
gap: 4px 14px;
margin: 2px 0 0;
font-size: 0.85rem;
}
.formation-meta-item { display: inline-flex; align-items: center; gap: 5px; }
.formation-meta-item svg { flex: 0 0 auto; opacity: 0.75; }
.formation-sessions-n { margin: 6px 0 0; font-size: 0.9rem; }
.formation-annonce {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 16px 0 0;
padding: 12px 14px;
border: 1px dashed var(--grey-border);
border-radius: 10px;
}
.formation-annonce-ouverte { border-style: solid; }
.formation-annonce-txt {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
font-size: 0.92rem;
}
.formation-annonce-txt svg { flex: 0 0 auto; opacity: 0.75; }
.formation-bref { margin: 0 0 4px; }
.formation-bref dt {
font-size: 0.7rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--muted-text);
margin-top: 10px;
}
.formation-bref dd { margin: 2px 0 0; font-weight: 600; }
.formation-bref-detail {
display: block;
font-weight: 400;
font-size: 0.85rem;
margin-top: 2px;
text-align: justify;
hyphens: auto;
}
.formation-indic-titre { font-size: 0.95rem; margin: 18px 0 8px; }
.formation-indicateurs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
gap: 10px;
}
.formation-indic {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 2px;
padding: 10px 6px;
border: 1px solid var(--grey-border);
border-radius: 10px;
}
.formation-indic b {
font-size: 1.25rem;
line-height: 1.1;
color: var(--yellow-dark);
font-variant-numeric: tabular-nums;
}
.formation-indic span { font-size: 0.76rem; color: var(--muted-text); text-wrap: balance; }
.formation-indic-source { margin: 8px 0 0; font-size: 0.75rem; }
.formations-renvoi {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
border: 1px solid var(--grey-border);
border-radius: 10px;
}
.formations-renvoi-txt {
margin: 0;
flex: 1 1 36ch;
min-width: 0;
font-size: 0.94rem;
text-align: justify;
hyphens: auto;
text-wrap: wrap;
}
.formations-renvoi { gap: 20px; }
.formations-renvoi { contain: paint; }
.formations-renvoi .btn-lieu-plus { flex: 0 0 auto; }
.stage-card-formation {
display: inline-flex;
align-items: center;
gap: 5px;
margin: 3px 0 0;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--muted-text);
}
.stage-card-formation svg { flex: 0 0 auto; opacity: 0.8; }
.dev-bouton {
display: flex;
justify-content: center;
margin-top: 8px;
}
.dev-wrap { position: relative; }
@keyframes dev-jaillit {
0%   { transform: scale(0) rotate(0deg); opacity: 0; }
55%  { transform: scale(1.55) rotate(360deg); opacity: 1; }
100% { transform: scale(1) rotate(360deg); opacity: 1; }
}
.dev-wrap.dev-onde #dev-menu-btn { animation: dev-jaillit 560ms cubic-bezier(.2,.9,.3,1) both; }
.dev-anneau {
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
margin: -20px 0 0 -20px;
border-radius: 50%;
border: 2px solid color-mix(in srgb, var(--yellow) 90%, transparent);
opacity: 0;
pointer-events: none;
}
@keyframes dev-anneau {
0%   { transform: scale(0.35); opacity: 0.95; }
100% { transform: scale(5.5);  opacity: 0; }
}
.dev-wrap.dev-onde .dev-anneau { animation: dev-anneau 620ms ease-out both; }
.dev-wrap.dev-onde .dev-anneau-2 { animation: dev-anneau 620ms ease-out 130ms both; }
@keyframes dev-implose {
0%   { transform: scale(1) rotate(0deg); opacity: 1; }
25%  { transform: scale(1.18) rotate(-24deg); opacity: 1; }
100% { transform: scale(0) rotate(-360deg); opacity: 0; }
}
.dev-wrap.dev-implosion #dev-menu-btn { animation: dev-implose 420ms cubic-bezier(.55,.06,.68,.19) both; }
@keyframes dev-anneau-inverse {
0%   { transform: scale(4.2); opacity: 0; }
35%  { opacity: 0.9; }
100% { transform: scale(0.2); opacity: 0; }
}
.dev-wrap.dev-implosion .dev-anneau { animation: dev-anneau-inverse 420ms ease-in both; }
.dev-wrap.dev-implosion .dev-anneau-2 { animation: dev-anneau-inverse 420ms ease-in 90ms both; }
@keyframes dev-comble {
0%   { transform: translateX(0); }
60%  { transform: translateX(-7px) scale(0.97); }
100% { transform: translateX(0) scale(1); }
}
.site-header.dev-implosion-comble .header-right > *:not(.dev-wrap) {
animation: dev-comble 420ms ease-out both;
}
@keyframes dev-recul {
0%   { transform: translateX(0); }
35%  { transform: translateX(9px) scale(0.94); }
100% { transform: translateX(0) scale(1); }
}
.site-header.dev-onde-recul .header-right > *:not(.dev-wrap) {
animation: dev-recul 460ms cubic-bezier(.3,.8,.3,1) both;
}
.site-header.dev-onde-recul .header-right > *:nth-child(3) { animation-delay: 45ms; }
.site-header.dev-onde-recul .header-right > *:nth-child(4) { animation-delay: 90ms; }
@keyframes dev-vibre {
0%, 100% { transform: translateX(0); }
20%      { transform: translateX(-3px); }
60%      { transform: translateX(3px); }
}
.site-header.dev-onde-vibre .wrap { animation: dev-vibre 220ms ease-in-out 2; }
.dev-balayage {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
opacity: 0;
}
.dev-balayage::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 45%;
background: linear-gradient(90deg, transparent,
color-mix(in srgb, var(--yellow) 55%, transparent), transparent);
transform: translateX(-120%);
}
@keyframes dev-balaye { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }
@keyframes dev-teinte {
0%, 100% { background: transparent; }
30%      { background: color-mix(in srgb, var(--yellow) 16%, transparent); }
}
.site-header.dev-onde-balayage .dev-balayage { opacity: 1; animation: dev-teinte 620ms ease-out both; }
.site-header.dev-onde-balayage .dev-balayage::before { animation: dev-balaye 620ms cubic-bezier(.3,.7,.3,1) both; }
@media (prefers-reduced-motion: reduce) {
.dev-wrap.dev-onde #dev-menu-btn,
.dev-wrap.dev-onde .dev-anneau,
.dev-wrap.dev-implosion #dev-menu-btn,
.dev-wrap.dev-implosion .dev-anneau,
.site-header.dev-implosion-comble .header-right > *,
.site-header.dev-onde-recul .header-right > *,
.site-header.dev-onde-vibre .wrap,
.site-header.dev-onde-balayage .dev-balayage,
.site-header.dev-onde-balayage .dev-balayage::before { animation: none; }
}
.formation-card-titre {
display: flex;
align-items: flex-start;
gap: 8px;
}
.formation-titre-ico {
flex: 0 0 auto;
line-height: 0;
margin-top: 0.18em;
color: inherit;
}
.formation-titre-ico svg { display: block; }
.admin-icone-apercu {
display: inline-flex;
margin-left: 6px;
color: var(--yellow-dark);
vertical-align: -0.3em;
}
.admin-icone-apercu svg { display: block; }
.admin-photo-cadrage {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 6px;
}
.admin-photo-cadrage-apercu {
display: block;
width: 100%;
aspect-ratio: 2 / 1;      
border-radius: 8px;
overflow: hidden;
background: var(--grey-bg);
}
.admin-photo-cadrage-apercu img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.admin-photo-cadrage label {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.82rem;
color: var(--muted-text);
}
.admin-photo-cadrage input[type="range"] { flex: 1; }
.admin-photo-cadrage-val {
font-variant-numeric: tabular-nums;
font-weight: 600;
color: var(--text);
min-width: 3.2em;
}
.bord-participants { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.bord-cat { border-left: 2px solid var(--grey-border); padding-left: 10px; }
.bord-cat-a_valider { border-left-color: var(--yellow-dark); }
.bord-cat-reservees { border-left-color: #3b9a5f; }
.bord-cat-titre {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
margin: 0 0 3px; font-size: 0.82rem; font-weight: 600;
}
.bord-cat-n { font-weight: 400; font-size: 0.78rem; color: var(--muted-text); }
.bord-cat-gens { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; }
.bord-cat-lien { margin: 2px 0 0; font-size: 0.82rem; }
.carte-attente {
position: absolute;
top: 0;
left: 0;
right: 0;
aspect-ratio: 16 / 9;
z-index: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--grey-bg);
color: var(--text);
pointer-events: none;
}
.carte-attente svg { opacity: 0.16; }
.carte-attente.photo-arrivee { display: none; }
:has(> img[data-voile].est-arrivee) > .carte-attente { display: none; }
img[data-voile] {
position: relative;
z-index: 1;
}
img[data-voile]:not(.est-arrivee) {
background-color: transparent;
color: transparent;
}
.stage-actions { align-items: stretch; }
.stage-reservation { display: flex; align-items: stretch; min-height: 40px; }
.stage-reservation > button { width: 100%; }
.stage-actions .btn-reserver,
.stage-actions .stage-interest-btn {
height: 40px;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.stage-actions .btn-reserver { font-size: 0.78rem; padding-left: 8px; padding-right: 8px; }
.stage-actions .stage-interest-btn { font-size: 0.78rem; }
@media (max-width: 560px) {
.stage-actions .btn-reserver,
.stage-actions .stage-interest-btn {
font-size: 0.86rem;
padding-left: 12px;
padding-right: 12px;
}
}
.capsule-avancement.est-complet,
.capsule-resume.capsule-resume-ok {
background: color-mix(in srgb, var(--yellow) 22%, var(--surface));
border-color: var(--yellow-dark);
box-shadow:
0 0 0 4px color-mix(in srgb, var(--yellow) 30%, transparent),
0 0 22px 4px color-mix(in srgb, var(--yellow) 40%, transparent),
0 2px 6px rgba(0, 0, 0, 0.12);
}
.capsule-avancement.est-complet .tile-progress-fill { background: var(--yellow-dark); }
.capsule-avancement.est-complet .tile-progress-label { color: var(--text); }
.capsule-avancement.est-complet .tile-progress2 {
background: transparent;
border-color: transparent;
box-shadow: none;
}
.tile-progress2:has(.status-done) {
background: color-mix(in srgb, var(--yellow) 18%, var(--surface));
border-color: var(--yellow-dark);
box-shadow:
0 0 0 3px color-mix(in srgb, var(--yellow) 28%, transparent),
0 0 18px 3px color-mix(in srgb, var(--yellow) 35%, transparent),
0 2px 6px rgba(0, 0, 0, 0.1);
}
.tile-progress2:has(.status-done) .tile-progress-fill { background: var(--yellow-dark); }
.tile.est-recompense {
background: color-mix(in srgb, var(--yellow) 18%, var(--surface));
border-color: var(--yellow-dark);
box-shadow:
0 0 0 3px color-mix(in srgb, var(--yellow) 28%, transparent),
0 0 18px 3px color-mix(in srgb, var(--yellow) 35%, transparent),
0 2px 6px rgba(0, 0, 0, 0.1);
}
.dev-poids {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1px;
font-size: 0.58rem;
line-height: 1.25;
color: color-mix(in srgb, var(--white) 72%, transparent);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.dev-poids[title] { cursor: help; }
.dev-poids { min-width: 82px; }
.dev-poids b { font-weight: 700; color: var(--yellow); }
.dev-poids .mesure-admin {
margin-right: 0; line-height: 1; letter-spacing: 0.04em;
color: #fff; font-weight: 600;
}
:root[data-theme="dark"] .dev-poids .mesure-admin { color: var(--navy); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .dev-poids .mesure-admin { color: var(--navy); }
}
.dev-poids[hidden] { display: none; }
@media (max-width: 700px) { .dev-poids { display: none; } }
.tile-progress2 .nuage-bouton {
margin: 0;
padding: 3px 10px;
font-size: 0.82rem;
line-height: 1.5;
border: 0;
background: none;
width: 100%;
text-align: center;
color: inherit;
font-family: inherit;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tile-progress2:has(.nuage-bouton.is-interested) {
background: color-mix(in srgb, var(--yellow) 18%, var(--surface));
border-color: var(--yellow-dark);
}
.tile-progress2 .nuage-bouton.is-interested { color: var(--text); }
.stage-interest-btn.etat-confirmee {
background: color-mix(in srgb, var(--yellow) 45%, var(--surface));
border-color: var(--yellow-dark);
color: var(--text);
font-weight: 700;
}
.stage-interest-btn.etat-attente {
background: var(--grey-bg);
border-color: var(--grey-border);
color: var(--muted-text);
}
.tile-autre-place {
position: relative;
z-index: 1;
margin: 8px 0 0;
padding-left: 10px;
border-left: 2px solid var(--yellow-dark);
font-size: 0.72rem;
line-height: 1.35;
color: var(--muted-text);
text-align: left;
}
.tile-autre-place strong { color: var(--text); font-weight: 600; }
.btn-reserver.btn-liberer {
background: var(--surface);
border: 1px solid var(--grey-border);
color: var(--muted-text);
}
.btn-reserver.btn-liberer:hover,
.btn-reserver.btn-liberer:focus-visible {
background: var(--grey-bg);
border-color: var(--muted-text);
color: var(--text);
}
.stage-interest .stage-interest-btn[disabled] {
opacity: 1;
cursor: default;
}
.card.carte-lieu { padding-bottom: 260px; }
@media (max-width: 720px) {
.card.carte-lieu { padding-bottom: 150px; }
}
.reserv-aide {
margin: 22px 0 18px;
max-width: 660px;
border: 1px solid var(--grey-border);
border-radius: 12px;
background: var(--surface);
}
.reserv-aide > summary {
padding: 11px 16px;
font-weight: 600;
font-size: 0.92rem;
cursor: pointer;
border-radius: 12px;
display: flex;
align-items: center;
gap: 8px;
list-style: none;
}
.reserv-aide > summary::-webkit-details-marker { display: none; }
.reserv-aide:not([open]) > summary .tiroir-chevron { transform: rotate(-90deg); }
.reserv-aide > summary:hover { color: var(--yellow-dark); }
.reserv-aide[open] > summary { border-bottom: 1px solid var(--grey-border); border-radius: 12px 12px 0 0; }
.reserv-aide {
interpolate-size: allow-keywords;
}
.reserv-aide::details-content {
block-size: 0;
overflow: clip;
opacity: 0;
transition: block-size .3s ease, opacity .22s ease, content-visibility .3s allow-discrete;
}
.reserv-aide[open]::details-content {
block-size: auto;
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.reserv-aide::details-content { transition: none; }
}
.reserv-aide-corps { padding: 4px 18px 14px; max-width: 82ch; }
.reserv-aide-corps p { font-size: 0.9rem; }
.reserv-etapes { margin: 10px 0 14px; padding-left: 22px; font-size: 0.9rem; }
.reserv-etapes li { margin-bottom: 7px; }
.reserv-aide-regle {
margin: 12px 0 0;
padding-left: 12px;
border-left: 2px solid var(--yellow-dark);
}
.arbitrage {
margin: 0 0 22px;
padding: 18px 20px;
border: 1px solid var(--yellow-dark);
border-radius: 14px;
background: color-mix(in srgb, var(--yellow) 12%, var(--surface));
}
.arbitrage-titre {
display: flex;
align-items: center;
gap: 9px;
margin: 0 0 10px;
font-size: 1.05rem;
}
.arbitrage p { margin: 0 0 10px; }
.arbitrage-liste { margin: 0 0 12px; padding-left: 22px; }
.arbitrage-liste li { margin-bottom: 4px; }
.arbitrage-delai {
display: flex;
align-items: center;
gap: 7px;
font-size: 0.88rem;
color: var(--muted-text);
}
.arbitrage-delai.est-depasse { color: var(--error-text); font-weight: 600; }
.arbitrage-form { margin-top: 14px; }
.tile-choix {
position: relative;
z-index: 1;
display: flex;
align-items: flex-start;
gap: 7px;
margin: 4px 0 0;
padding: 6px 9px;
border-radius: 9px;
border: 1px solid var(--yellow-dark);
background: color-mix(in srgb, var(--yellow) 14%, var(--surface));
font-size: 0.72rem;
line-height: 1.3;
text-align: left;
color: var(--text);
}
.tile-choix svg { flex: 0 0 auto; margin-top: 1px; }
.tile p.tile-choix {
text-align: left;
hyphens: none;
}
.bord-rappels { margin: 16px 0 22px; }
.bord-rappels h2 {
display: flex;
align-items: center;
gap: 9px;
margin: 0 0 6px;
font-size: 1.1rem;
color: var(--error-text);
}
.bord-rappels > p { margin: 0 0 12px; max-width: 92ch; }
.bord-rappels-liste,
.bord-fragiles-liste {
display: grid;
grid-template-columns: repeat(auto-fill, min(440px, 100%));
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.bord-rappels-liste li,
.bord-fragiles-liste li {
padding: 12px 14px;
border: 1px solid var(--grey-border);
border-left-width: 4px;
border-radius: 12px;
line-height: 1.5;
}
.bord-rappels-liste li {
border-color: var(--danger-solid);
background: var(--error-bg);
}
.bord-rappel-nom { color: inherit; text-decoration: none; }
.bord-rappel-nom:hover { text-decoration: underline; }
.bord-rappel-tel {
margin-left: 8px;
font-variant-numeric: tabular-nums;
font-weight: 600;
}
.bord-rappel-quoi { display: block; font-size: 0.85rem; color: var(--muted-text); }
.bord-rappel-retirable { position: relative; }
.bord-rappel-retirer { position: absolute; top: 6px; right: 6px; margin: 0; }
.bord-rappel-retirer button {
display: flex; align-items: center; justify-content: center;
width: 26px; height: 26px; padding: 0;
border: 0; border-radius: 50%;
background: transparent; color: var(--muted-text);
cursor: pointer; opacity: 0; transition: opacity .15s, background .15s;
}
.bord-rappel-retirable:hover .bord-rappel-retirer button,
.bord-rappel-retirer button:focus-visible { opacity: 1; }
.bord-rappel-retirer button:hover { background: rgba(0,0,0,.08); color: var(--text); }
@media (hover: none) { .bord-rappel-retirer button { opacity: 1; } }
.bord-fragiles { margin: 0 0 22px; }
.bord-fragiles-liste li {
border-color: var(--yellow-dark);
background: color-mix(in srgb, var(--yellow) 12%, var(--surface));
}
.bord-fragiles h2 {
display: flex;
align-items: center;
gap: 9px;
margin: 0 0 6px;
font-size: 1.1rem;
}
.bord-fragiles > p { margin: 0 0 12px; max-width: 92ch; }
.bord-fragile-quoi { display: block; font-size: 0.85rem; color: var(--muted-text); }
.bord-fragile-quoi .relance-etat { margin-top: 6px; }
.bord-memo {
margin: 0 0 22px;
padding: 14px 16px;
border: 1px dashed var(--grey-border);
border-radius: 12px;
}
.bord-memo h2 {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 8px;
font-size: 0.95rem;
color: var(--muted-text);
}
.bord-memo-liste { margin: 0; padding-left: 20px; }
.bord-memo-liste li { margin-bottom: 6px; line-height: 1.5; }
.bord-memo-txt { display: block; font-size: 0.88rem; }
.bord-actions { margin: 0 0 20px; }
.bord-actions h2 { margin: 0 0 10px; font-size: 1.05rem; }
.bord-actions-liste {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
gap: 12px;
}
.bord-action {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
border: 1px solid var(--yellow-dark);
border-radius: 12px;
background: color-mix(in srgb, var(--yellow) 14%, var(--surface));
color: inherit;
text-decoration: none;
transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.bord-action-douce {
border-color: var(--grey-border);
background: var(--grey-bg);
}
.bord-actions-basse > summary {
cursor: pointer;
font-size: .92rem;
color: var(--muted-text);
padding: 6px 0;
}
.bord-actions-basse > summary:hover { color: var(--text); }
.bord-actions-basse > p { margin: 2px 0 14px; font-size: .88rem; }
.bord-action:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.bord-action-nb {
font-size: 2.1rem;
font-weight: 700;
line-height: 1;
color: var(--yellow-dark);
font-variant-numeric: tabular-nums;
}
.bord-action-quoi { font-size: 0.9rem; line-height: 1.35; }
.bord-action-quoi strong { display: block; }
.bord-rappel { align-items: center; }
.bord-rappel .bord-action-nb { font-size: 1.5rem; white-space: nowrap; display: inline-flex; align-items: center; }
.bord-rappel.est-retard { border-color: var(--danger-solid); }
.bord-rappel.est-retard .bord-action-nb { color: var(--danger-solid); }
.bord-actions-semaine h2 { color: var(--muted-text); font-size: 0.98rem; }
.bord-action-boite { padding: 0; }
.bord-action-lien {
display: flex; align-items: center; gap: 14px;
flex: 1; padding: 14px 16px;
color: inherit; text-decoration: none;
}
.bord-action-boite .bord-action-nb { font-size: 1.5rem; white-space: nowrap; }
.bord-actions-semaine > p { margin: -4px 0 10px; font-size: .88rem; }
.bord-memo-quand { display: block; font-size: 0.82rem; color: var(--muted-text); }
.bord-memo-quand.est-retard { color: var(--danger-solid); font-weight: 600; }
.region-abo-suivies {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 10px 0 0;
font-size: 0.85rem;
}
.titre-ico {
display: inline-flex;
align-items: center;
margin-right: 9px;
vertical-align: -0.12em;
line-height: 0;
color: inherit;
opacity: 0.85;
}
.titre-ico svg { width: 1em; height: 1em; }
.page-toc-col-reduite {
margin-right: -20px;
display: flex;
justify-content: flex-end;
}
.page-toc-col-reduite .page-toc-restore {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.admin-table tbody tr.lien-etat-a_revoir td,
.admin-table tbody tr.lien-etat-a_revoir:nth-child(even) td { background: color-mix(in srgb, var(--orange-alerte) 12%, transparent); }
.lien-etat-a_revoir td:first-child { box-shadow: inset 3px 0 0 var(--orange-alerte); }
.admin-table tbody tr.lien-etat-vieux td,
.admin-table tbody tr.lien-etat-vieux:nth-child(even) td { background: color-mix(in srgb, var(--error-text) 9%, transparent); }
.lien-etat-vieux td:first-child { box-shadow: inset 3px 0 0 var(--danger-solid); }
.lien-note { display: block; font-size: 0.74rem; }
.lien-form-verif { display: inline-block; margin: 0 0 4px; }
.lien-form-verif .btn { white-space: nowrap; }
.lien-corriger summary { cursor: pointer; font-size: 0.8rem; color: var(--muted-text); }
.lien-corriger label { display: block; margin: 8px 0 2px; font-size: 0.8rem; }
.lien-corriger input { width: min(100%, 420px); }
.feedback-origine {
margin: 0 0 6px;
font-size: 0.78rem;
color: var(--danger-solid);
}
.date-bascule {
background: none;
border: none;
padding: 0;
font: inherit;
color: inherit;
cursor: pointer;
border-bottom: 1px dotted currentColor;
}
.date-bascule:hover { color: var(--text); }
.date-bascule .date-absolue { display: none; }
.date-bascule.est-absolue .date-relative { display: none; }
.date-bascule.est-absolue .date-absolue { display: inline; }
.email-file {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
gap: 16px;
align-items: start;
}
.email-file-item {
display: flex;
flex-direction: column;
gap: 6px;
border: 1px solid var(--grey-border);
border-left: 3px solid var(--yellow-dark);
border-radius: 8px;
padding: 12px 14px;
background: var(--surface);
}
.email-file-choix { display: flex; align-items: baseline; gap: 8px; cursor: pointer; }
.email-file-meta { margin: 0; font-size: 0.82rem; }
.email-file-apercu summary,
.email-file-editer summary { cursor: pointer; font-size: 0.82rem; color: var(--muted-text); }
.email-file-rendu {
width: 100%;
height: 380px;
border: 1px solid var(--grey-border);
border-radius: 6px;
background: #fff;
margin-top: 8px;
}
.email-file-editer label { display: block; margin: 8px 0 2px; font-size: 0.82rem; }
.email-file-editer input[type="text"],
.email-file-editer textarea { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem; }
.email-modif-form { display: none; }
.bord-places-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.bord-places-puce {
width: 10px; height: 10px; border-radius: 3px;
background: var(--grey-border);
display: inline-block;
}
.bord-places-puce-ok { background: var(--success-text); }
.bord-places li.bord-place-ok {
background: color-mix(in srgb, var(--success-text) 10%, transparent);
box-shadow: inset 3px 0 0 var(--success-text);
border-radius: 4px;
padding-left: 10px;
}
.vp-zone { fill: var(--text); opacity: 0.03; }
.vp-zone-alt { opacity: 0.06; }
.vp-zone-lbl { fill: var(--muted-text); font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; }
.vp-grille { stroke: var(--grey-border); stroke-width: 0.5; }
.vp-bulle-lbl {
fill: var(--text);
font-size: 9px;
font-weight: 700;
stroke: var(--grey-bg);
stroke-width: 2.5px;
paint-order: stroke fill;
}
.apercu-grille {
display: grid;
grid-template-columns: repeat(auto-fill, min(440px, 100%));
justify-content: start;
gap: 18px;
margin: 10px 0 8px;
}
.apercu-reste { margin: 0 0 10px; font-size: 0.9rem; }
.filtre-saut { flex-basis: 100%; height: 0; margin: 0; }
.pill-filtre-n { color: var(--muted-text); font-size: 0.76rem; }
.fil-saisie { margin: 0; }
.fil-saisie-types { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.fil-type { position: relative; display: inline-flex; cursor: pointer; }
.fil-type input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.fil-type span {
display: inline-block;
padding: 5px 12px;
border: 1px solid var(--grey-border);
border-radius: 999px;
background: var(--surface);
font-size: 0.88rem;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.fil-type input:checked + span { background: var(--yellow); border-color: var(--yellow-dark); color: var(--navy); font-weight: 600; }
.fil-type input:focus-visible + span { outline: 2px solid var(--navy); outline-offset: 2px; }
.fil-saisie-quand {
padding: 4px 8px;
border: 1px solid var(--grey-border);
border-radius: 8px;
background: var(--surface);
color: inherit;
font: inherit;
font-size: 0.85rem;
}
.fil-saisie textarea {
width: 100%;
padding: 8px 10px;
border: 1px solid var(--grey-border);
border-radius: 8px;
background: var(--surface);
color: inherit;
font: inherit;
font-size: 0.92rem;
resize: vertical;
}
.fil-saisie .btn { margin-top: 8px; }
.fil-veille { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.fil-veille > span {
padding: 3px 10px;
border-radius: 999px;
font-size: 0.85rem;
background: var(--grey-bg);
color: var(--muted-text);
}
.fil-veille > .fil-veille-ok { background: var(--success-bg); color: var(--success-text); }
.fil-veille > .fil-veille-tiede { background: none; color: var(--orange-alerte); box-shadow: inset 0 0 0 1px var(--orange-alerte); }
.fil-veille > .fil-veille-froid { background: var(--error-bg); color: var(--error-text); }
.fil-filtres { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.fil-filtre {
padding: 4px 10px;
border: 1px solid var(--grey-border);
border-radius: 999px;
background: none;
color: var(--muted-text);
font: inherit;
font-size: 0.85rem;
cursor: pointer;
transition: background-color .22s ease, border-color .22s ease, color .22s ease, opacity .22s ease;
}
.fil-filtre { user-select: none; -webkit-user-select: none; }
.fil-filtre:hover { color: var(--text); }
.fil-filtre.est-actif { background: var(--navy); border-color: var(--navy); color: var(--white); }
:root[data-theme="dark"] .fil-filtre.est-actif { background: var(--yellow); border-color: var(--yellow); color: var(--navy); }
.fil-filtre-n { opacity: 0.75; margin-left: 3px; }
.fil-filtre[data-maj-ferait]::before {
content: attr(data-maj-ferait);
display: inline-block; width: 1.1em; margin-right: 2px; text-align: center;
font-weight: 700; opacity: 0;
transform: scale(.35);
transition: opacity .16s ease, transform .22s cubic-bezier(.2, .9, .3, 1.35);
}
.fil-filtres.maj-enfoncee .fil-filtre[data-maj-ferait]::before,
[data-groupe-p].maj-enfoncee .fil-filtre[data-maj-ferait]::before,
[data-groupe-fb].maj-enfoncee .fil-filtre[data-maj-ferait]::before { opacity: .85; transform: scale(1); }
.fil-filtres.maj-enfoncee .fil-filtre[data-fil-filtre=""],
[data-groupe-p].maj-enfoncee .fil-filtre[data-p-filtre=""],
[data-groupe-fb].maj-enfoncee .fil-filtre[data-fb-filtre=""] { opacity: .35; cursor: default; }
.fil-duo { display: inline-flex; align-items: stretch; border-radius: 999px; }
.fil-duo.est-orphelin { border: 1px dashed var(--grey-border); opacity: .78; }
.fil-duo.est-orphelin .fil-filtre { border-color: transparent; padding-right: 3px; }
.fil-duo.est-orphelin:has(.fil-filtre.est-actif) { border-style: solid; opacity: 1; }
.fil-duo:has(.fil-filtre[hidden]) { display: none; }
.tag-sug {
position: fixed;
z-index: 60;
margin: 0;
padding: 4px;
list-style: none;
max-height: 240px;
overflow-y: auto;
border: 1px solid var(--grey-border);
border-radius: 10px;
background: var(--surface);
box-shadow: 0 8px 26px color-mix(in srgb, var(--text) 18%, transparent);
}
.tag-sug li {
padding: 5px 8px;
border-radius: 7px;
font-size: .88rem;
cursor: pointer;
}
.tag-sug li:hover, .tag-sug li.est-vise { background: color-mix(in srgb, var(--yellow) 22%, transparent); }
.fil-filtre-croix {
padding: 0 9px 0 2px;
border: 0;
background: none;
color: var(--muted-text);
font: inherit;
line-height: 1;
cursor: pointer;
}
.fil-filtre-croix:hover { color: var(--yellow-dark); }
.fil { list-style: none; margin: 0; padding: 0 0 0 40px; position: relative; }
.fil::before {
content: '';
position: absolute;
left: 15px; top: 10px; bottom: 10px;
width: 2px;
background: var(--grey-border);
border-radius: 2px;
}
.fil-jour {
position: relative;
margin: 18px 0 10px -40px;
padding: 2px 10px;
font-size: 0.8rem;
font-weight: 600;
color: var(--muted-text);
background: var(--surface);
display: inline-block;
border-radius: 8px;
}
.fil-jour:first-child { margin-top: 0; }
.fil-jour[hidden] { display: none; }
.fil-item { position: relative; display: flex; gap: 10px; margin: 0 0 14px; }
.fil-item, .fil-jour {
transition: opacity .28s ease, translate .28s ease, display .28s allow-discrete,
background .12s ease, box-shadow .12s ease;   
}
.fil-item[hidden], .fil-jour[hidden] { display: none; opacity: 0; translate: -14px 0; }
@starting-style {
.fil-item:not([hidden]), .fil-jour:not([hidden]) { opacity: 0; translate: -14px 0; }
}
@media (prefers-reduced-motion: reduce) {
.fil-item, .fil-jour, .fil-filtre, .fil-filtre[data-maj-ferait]::before { transition: none; }
.fil-item[hidden], .fil-jour[hidden] { translate: none; }
@starting-style { .fil-item:not([hidden]), .fil-jour:not([hidden]) { translate: none; } }
}
.fil-puce {
position: absolute;
left: -40px; top: 1px;
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: var(--surface);
border: 1px solid var(--grey-border);
color: var(--muted-text);
}
.fil-item[data-canal="webinaire"] .fil-puce svg { width: 17px; height: 17px; }
.fil-sortant .fil-puce { border-color: var(--yellow-dark); color: var(--yellow-dark); }
.fil-entrant .fil-puce { border-color: var(--success-text); color: var(--success-text); }
.fil-discret { opacity: 0.6; }
.fil-corps { min-width: 0; flex: 1; }
.fil-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 2px; }
.fil-quand { font-variant-numeric: tabular-nums; font-size: 0.85rem; cursor: pointer; }
.stage-fil-item { align-items: start; }
.stage-fil-item .fil-quand {
flex: 0 0 auto;
width: 5.6rem;
line-height: 1.25;
color: var(--muted-text);
}
.fil-jour, .fil-heure { display: block; }
.fil-jour.est-repete { opacity: 0; }
.fil-heure { opacity: .72; }
.stage-fil-item .fil-texte { min-width: 0; }
.stage-fil-item .fil-texte strong { display: block; }
.fil-suite {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
line-clamp: 1;
overflow: hidden;
}
.fil-appoint {
font-size: 0.75rem;
padding: 1px 7px;
border-radius: 999px;
background: var(--grey-bg);
color: var(--muted-text);
}
.fil-apres-appel { margin-top: 10px; font-size: 0.9rem; }
.fil-apres-appel summary { cursor: pointer; color: var(--muted-text); }
.fil-apres-appel form { margin-top: 8px; }
.fiche-adresse-ouvrir { color: inherit; text-decoration: none; }
.fiche-adresse-ouvrir:hover strong, .fiche-adresse-ouvrir:focus-visible strong { text-decoration: underline; text-decoration-style: dotted; }
.fiche-adresse-tiroir summary.sr-only, .fiche-nom-tiroir summary.sr-only { pointer-events: none; }
.fiche-nom-corriger { color: var(--muted-text); vertical-align: -1px; margin-left: 4px; text-decoration: none; }
.fiche-nom-corriger:hover, .fiche-nom-corriger:focus-visible { color: var(--text); }
.fil-deja-prevu { font-size: 0.85rem; margin: 0 0 8px; }
.fil-deja-prevu .fil-rappel-retard { padding: 0 5px; border-radius: 999px; }
.fil-deja-prevu .bulle-porteur .fil-deja-date,
.fil-deja-prevu .bulle-porteur .fil-rappel-retard { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
.fil-rappel-fait { text-decoration: line-through; }
.fil-rappel-retard { background: var(--yellow); color: var(--navy); }
.fil-saisie-dates { display: grid; grid-template-columns: max-content max-content; column-gap: 12px; row-gap: 6px; align-items: center; margin: 0 0 8px; }
.fil-saisie-ligne { display: contents; font-size: 0.85rem; color: var(--muted-text); cursor: pointer; }
.fil-saisie-ligne > span { white-space: nowrap; }
.case-choix { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: start; margin: 12px 0 0; cursor: pointer; }
.case-choix input { margin: 4px 0 0; width: 16px; height: 16px; accent-color: var(--navy); }
.case-choix-txt { display: grid; gap: 2px; }
.case-choix-txt .muted { font-size: 0.85rem; }
.fiche-adresse { margin-top: 8px; }
.fiche-adresse .btn { margin-top: 8px; }
.fiche-carte-corps .carte-lieux { max-width: 360px; margin: 0 auto; }
.fiche-carte-corps:not(.avec-lieux) .carte-pin { display: none; }
.fiche-carte-corps.avec-lieux .carte-pin { opacity: 0.45; }
.fiche-carte-corps.avec-lieux .carte-lbl { font-size: 14px; font-weight: 500; }
.fiche-carte-corps.avec-lieux .carte-moi-lbl { display: none; }
.fiche-carte-lieux-toggle { display: flex; gap: 6px; align-items: center; justify-content: center; font-size: 0.8rem; margin-top: 4px; cursor: pointer; }
.carte-moi-nomme .carte-moi-lbl { font-size: 24px; font-weight: 700; fill: var(--text); paint-order: stroke; stroke: var(--surface); stroke-width: 5px; stroke-linejoin: round; }
.carte-moi-nomme .carte-moi-point { r: 6; }
.fil-saisie-titre { margin: 0 0 8px; }
.fil-type span svg { vertical-align: -0.1em; margin-right: 2px; }
.fil-type b { font-weight: inherit; }
.fil-saisie-types[hidden] { display: none; }
.fil-saisie-duo { display: inline-flex; gap: 6px; align-items: center; }
.fil-saisie-dates input.fil-saisie-quand[type] { width: auto; padding: 4px 8px; font-size: 0.85rem; font-weight: 400; border-radius: 8px; }
.fil-saisie-ligne[hidden] { display: none; }
.fil-saisie-ligne[hidden] > * { display: none; }
.fil-detail { margin: 0 0 4px; font-size: 0.92rem; }
.fil-texte {
margin: 4px 0 6px;
padding: 6px 10px;
border-left: 3px solid var(--grey-border);
font-size: 0.92rem;
white-space: normal;
}
.fil-entrant .fil-texte { border-left-color: var(--success-text); }
.fil-etapes { list-style: none; margin: 0 0 6px; padding: 0; font-size: 0.82rem; }
.fil-etapes li { margin: 1px 0; }
.fil-etape-ok { color: var(--success-text); }
.fil-etape-quand { color: var(--muted-text); opacity: 0.7; margin-left: 4px; }
.fil-item details summary { cursor: pointer; font-size: 0.82rem; color: var(--muted-text); }
.fil-item .email-file-rendu { height: 300px; max-width: 620px; }
.fil-actions { display: flex; gap: 4px; align-items: center; margin-top: 4px; }
.fil-edit { margin-top: 6px; max-width: 520px; }
.fil-edit[hidden] { display: none; }
.fil-action {
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px; border-radius: 50%; border: 0; background: transparent;
color: var(--muted-text); cursor: pointer; padding: 0;
}
.fil-action:hover, .fil-action:focus-visible { background: var(--grey-bg); color: var(--text); }
.fil-supprimer { margin-top: 0; }
.fil-modifier form { margin-top: 6px; min-width: min(420px, 100%); }
.fil-texte strong { font-weight: 700; }
.fil-supprimer { margin-top: 2px; }
.fil-supprimer .btn-link { font-size: 0.8rem; color: var(--muted-text); }
.fil-item[hidden] { display: none; }
@media (max-width: 600px) {
.fil-saisie-quand { margin-left: 0; }
}
.filtres-sessions { gap: 14px; margin: 18px 0 14px; }
.filtre-groupe { gap: 6px; }
.filtres-sessions { row-gap: 7px; }
.filtre-saut-bloc { margin-top: 13px; }
.btn-lien {
border: 0;
background: none;
padding: 0;
font: inherit;
color: var(--link, var(--text));
text-decoration: underline;
cursor: pointer;
}
.codes-secours {
list-style: none;
padding: 0;
margin: 14px 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
gap: 8px 18px;
max-width: 26rem;
}
.codes-secours code {
font-size: 1.25rem;
letter-spacing: 0.08em;
}
.secu-liste { list-style: none; padding: 0; margin: 10px 0 18px; }
.secu-liste li {
display: flex;
gap: 10px;
align-items: baseline;
padding: 7px 0;
border-bottom: 1px solid var(--grey-border);
}
.secu-liste li:last-child { border-bottom: 0; }
.secu-pastille {
flex: 0 0 auto;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--muted-text);
}
.secu-ok .secu-pastille { background: var(--success-text); }
.secu-alerte .secu-pastille,
.secu-dette .secu-pastille { background: var(--danger-solid); }
.secu-info .secu-pastille { background: var(--muted-text); }
.est-suivie {
border-color: var(--yellow-dark);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--yellow) 45%, transparent);
}
.section-suivis { margin-bottom: 26px; }
.section-suivis > h2 { margin-bottom: 4px; }
.section-titre-barre {
position: relative;
display: flex;
align-items: flex-end;
gap: 14px;
margin: 0.955rem 0;
}
.section-titre-barre > h2 { margin: 0; flex: 1 1 auto; min-width: 0; }
.section-titre-bouton {
flex: 0 0 auto;
transform: translateY(50%);
margin: 0;
white-space: nowrap;
}
@media (max-width: 700px) {
.section-titre-barre { flex-direction: column; align-items: stretch; }
.section-titre-bouton {
align-self: flex-start;
transform: none;
display: inline-flex;
margin-top: 10px;
}
}
@keyframes carte-deplacee {
from { opacity: 0.35; }
to   { opacity: 1; }
}
.carte-deplacee { animation: carte-deplacee 0.42s ease-out; }
@media (prefers-reduced-motion: reduce) { .carte-deplacee { animation: none; } }
.section-suivis { margin-bottom: 40px; }
.est-suivie { background: color-mix(in srgb, var(--yellow) 6%, var(--surface)); }
.section-titre-barre + p {
padding-right: 250px;
margin-top: 14px;
}
@media (max-width: 700px) {
.section-titre-barre + p { padding-right: 0; margin-top: 0; }
}
main[style*="--filigrane"] .page-with-toc > .card.filigrane-espace { padding-bottom: 360px; }
@media (max-width: 720px) {
main[style*="--filigrane"] .page-with-toc > .card.filigrane-espace { padding-bottom: 60px; }
}
.lieu-mini.est-suivie,
.pill-filtre.est-suivie {
background: color-mix(in srgb, var(--yellow) 14%, var(--surface));
border-color: var(--yellow-dark);
}
.pill-filtre.est-suivie[aria-pressed="false"] { filter: none; opacity: 0.6; }
.mes-choix-pastille {
background: color-mix(in srgb, var(--yellow) 14%, var(--surface));
border-color: var(--yellow-dark);
}
.mes-choix-pastille:hover { background: color-mix(in srgb, var(--yellow) 26%, var(--surface)); }
.carte-region-active {
fill: color-mix(in srgb, var(--text) 15%, transparent);
}
.carte-region-favorite {
fill: color-mix(in srgb, var(--yellow-dark) 30%, transparent);
}
.lieu-mini-plus { color: var(--muted-text); }
.lieu-mini.est-suivie .lieu-mini-plus { color: var(--yellow-dark); font-weight: 700; }
.lieu-card.est-suivie .prochaine-item,
.formation-card.est-suivie .prochaine-item {
background: color-mix(in srgb, var(--yellow) 6%, var(--surface));
border-color: color-mix(in srgb, var(--yellow-dark) 45%, var(--grey-border));
}
.carte-pin-pale .carte-core { opacity: 0.22; }
.carte-pin-pale .carte-lbl { opacity: 0.32; }
.carte-pin-pale .carte-nombre { opacity: 0.45; }
@media (hover: hover) and (pointer: fine) {
.carte-pin-pale:hover .carte-core { opacity: 0.6; }
.carte-pin-pale:hover .carte-lbl { opacity: 0.85; }
}
.carte-pin-pale.carte-pin-favori .carte-core,
.carte-pin-pale.carte-pin-favori .carte-nombre,
.carte-pin-pale.carte-pin-favori .carte-lbl { opacity: 1; }
.lieu-mini.est-pale:not(.est-suivie) { opacity: 0.62; }
.lieu-mini.est-pale:not(.est-suivie):hover { opacity: 1; }
.lieux-groupe-h {
margin: 26px 0 2px;
font-size: 1rem;
}
.lieux-groupe-intro { margin: 0 0 12px; }
.publication-bloc {
margin: 18px 0 6px;
padding: 12px 14px;
border-radius: 12px;
background: var(--grey-bg);
border: 1px solid var(--grey-border);
}
.publication-bloc.est-bloquee { opacity: 1; }
.publication-bloc .checkbox-row { margin: 0; }
.publication-raison,
.publication-pret {
margin: 8px 0 0;
font-size: 0.86rem;
display: flex;
align-items: flex-start;
gap: 7px;
}
.publication-raison svg,
.publication-pret svg { flex: 0 0 auto; margin-top: 0.18em; }
.publication-pret {
color: var(--text);
background: color-mix(in srgb, var(--yellow) 16%, transparent);
border-radius: 9px;
padding: 9px 11px;
}
.osm-note {
margin: 6px 0 0;
font-size: 0.8rem;
display: flex;
align-items: center;
gap: 7px;
flex-wrap: wrap;
}
.osm-note[hidden] { display: none; }
.osm-note-btn {
font: inherit;
font-size: 0.78rem;
background: none;
border: 1px solid var(--grey-border);
border-radius: 999px;
padding: 2px 10px;
color: var(--text);
cursor: pointer;
}
.osm-note-btn:hover { border-color: var(--yellow-dark); color: var(--yellow-dark); }
.champ-rempli-auto {
border-color: var(--yellow-dark) !important;
background: color-mix(in srgb, var(--yellow) 18%, transparent);
transition: background 0.4s ease, border-color 0.4s ease;
}
@media (max-width: 430px) {
.header-user-name,
.header-user-admin { display: none; }
}
.header-admin-sep {
flex: 0 0 auto;
width: 1px;
align-self: stretch;
margin: 4px 2px;
background: color-mix(in srgb, currentColor 28%, transparent);
}
.carte-region-clic { cursor: pointer; }
.carte-region-clic.carte-region-attend {
}
@keyframes carte-tache {
0%, 100% { transform: scale(0.45); opacity: 0.25; }
50%      { transform: scale(1.15); opacity: 0.95; }
}
.carte-taches circle {
transform-box: fill-box;
transform-origin: center;
animation-name: carte-tache;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
pointer-events: none;
}
.grad-clair .carte-tache-coeur { stop-color: var(--surface); stop-opacity: 0.95; }
.grad-clair .carte-tache-mi    { stop-color: var(--surface); stop-opacity: 0.55; }
.grad-clair .carte-tache-bord  { stop-color: var(--surface); stop-opacity: 0; }
.grad-jaune .carte-tache-coeur { stop-color: var(--yellow-dark); stop-opacity: 0.62; }
.grad-jaune .carte-tache-mi    { stop-color: var(--yellow-dark); stop-opacity: 0.34; }
.grad-jaune .carte-tache-bord  { stop-color: var(--yellow-dark); stop-opacity: 0; }
.carte-taches {
opacity: 0;
transition: opacity 0.42s ease;
}
.carte-taches.est-la { opacity: 1; transition-duration: 0.28s; }
@media (prefers-reduced-motion: reduce) {
.carte-taches circle { animation: none; opacity: 0.5; }
}
.carte-region-bulle { text-align: left; }
.carte-region-clic:focus-visible {
outline: none;
stroke: var(--yellow-dark);
stroke-width: 1.8;
}
.btn-retour-ico { display: inline-flex; align-items: center; line-height: 0; opacity: 0.8; }
.carte-lieux-mini .carte-lbl { font-size: 24px; stroke-width: 5px; }
.carte-lieux-mini .carte-lbl-sous { font-size: 20px; font-weight: 500; fill: var(--muted-text); }
.page-titre-admin { align-items: baseline; }
.card-head-actions .btn svg { margin-right: 6px; vertical-align: -2px; }
.petit-ecran-note.est-dure {
background: var(--error-bg);
border-color: var(--danger-solid);
color: var(--error-text);
}
.aide-raccourci { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; }
.apercu-en-tete { margin-bottom: 26px; }
.apercu-duo { display: flex; gap: 26px; align-items: flex-start; flex-wrap: wrap; }
.apercu-duo-carte { flex: 0 0 auto; max-width: 100%; }
.apercu-duo-cote { flex: 1 1 260px; min-width: 240px; }
.apercu-duo h2 { margin-top: 0; }
.abonnes-liste { margin: 8px 0 0; padding-left: 18px; }
.abonnes-liste li { margin-bottom: 4px; font-size: 0.9rem; }
.abonnes-liste .muted { font-size: 0.82rem; margin-left: 6px; }
.place-etat {
margin-left: 7px;
font-size: 0.72rem;
padding: 1px 8px;
border-radius: 999px;
background: var(--grey-bg);
color: var(--muted-text);
white-space: nowrap;
}
.place-etat-confirmee { background: var(--success-bg); color: var(--success-text); }
.place-etat-reservee { background: color-mix(in srgb, var(--yellow) 30%, transparent); color: var(--text); }
.carrousel { position: relative; }
.carrousel-piste {
display: flex;
gap: 18px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-inline: 2px;
padding: 4px 2px 12px;
overscroll-behavior-x: contain;
-webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 90px), transparent 100%);
mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 90px), transparent 100%);
scrollbar-width: thin;
}
.carrousel-piste.est-au-bout {
-webkit-mask-image: none;
mask-image: none;
}
.carrousel-piste:focus-visible { outline: 2px solid var(--yellow-dark); outline-offset: 3px; border-radius: 12px; }
.carrousel-item {
flex: 0 0 auto;
width: 440px;
max-width: calc(100% - 34px);
scroll-snap-align: start;
scroll-snap-stop: always;
}
.stage-card,
.lieu-card,
.formation-card { user-select: none; -webkit-user-select: none; }
.carrousel-item .formation-card { max-width: none; }
.carrousel-fleche {
position: absolute;
top: 40%;
z-index: 2;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--grey-border);
background: var(--surface);
color: var(--text);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 3px 12px rgba(16, 21, 27, 0.16);
transition: border-color 0.15s ease, color 0.15s ease;
}
.carrousel-fleche:hover { border-color: var(--yellow-dark); color: var(--yellow-dark); }
.carrousel-fleche[hidden] { display: none; }
.carrousel-prec { left: -14px; }
.carrousel-suiv { right: -14px; }
@media (hover: none) { .carrousel-fleche { display: none; } }
.carrousel-note { margin-top: 2px; }
.abonnes-colonnes { columns: 2; column-gap: 22px; column-fill: auto; }
.apercu-duo-cote { display: flex; flex-direction: column; min-height: 0; }
.apercu-duo-cote .abonnes-colonnes { flex: 1 1 0; min-height: 0; }
.apercu-duo > .apercu-duo-carte { flex: 0 0 auto; width: 440px; max-width: 100%; }
.abonnes-colonnes li { break-inside: avoid; }
@media (min-width: 1500px) { .abonnes-colonnes { columns: 3; } }
.abonnes-carte { margin-top: 0; max-width: 100%; }
.apercu-duo-france {
flex: 0 0 auto;
align-self: stretch;
display: flex;
min-width: 0;
}
.apercu-duo-france .abonnes-carte {
display: flex;
flex-direction: column;
width: auto;
max-width: none;
min-height: 0;
}
.apercu-duo-france .abonnes-carte svg {
flex: 1 1 0;
min-height: 0;
width: auto;
}
@media (max-width: 1100px) {
.apercu-duo-france { display: block; }
.apercu-duo-france .abonnes-carte { width: 100%; }
.apercu-duo-france .abonnes-carte svg { width: 100%; height: auto; }
}
.abonnes-carte .carte-personnes-legende { font-size: 0.76rem; }
.titre-modifier { margin: 26px 0 10px; }
.cell-ico { display: inline-flex; vertical-align: -2px; margin-right: 6px; color: var(--muted-text); line-height: 0; }
.admin-table { max-width: 1100px; }
.admin-table.table-fit { max-width: 100%; }
.admin-table td.col-nombre,
.admin-table th.col-nombre { text-align: center; font-variant-numeric: tabular-nums; }
.admin-table td.col-centre,
.admin-table th.col-centre { text-align: center; }
.signal-case.est-actuel { background: color-mix(in srgb, var(--yellow) 8%, var(--surface)); border-color: var(--yellow-dark); }
.stage-card-facts .fact-sous { padding-left: 22px; }
.stage-card-facts .fact-sous .fact-icone { opacity: 0.75; }
.carte-titre-ico {
display: inline-flex;
align-items: center;
line-height: 0;
margin-right: 8px;
vertical-align: -0.15em;
color: inherit;
opacity: 0.8;
}
.apercu-duo-carte { flex: 0 0 auto; width: 440px; max-width: 100%; }
.email-champ { display: block; margin-bottom: 12px; }
.email-champ-quoi {
display: inline-block;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--muted-text);
margin-bottom: 3px;
}
.email-champ-bouton .email-champ-quoi { color: var(--yellow-dark); font-weight: 700; }
.email-champ-lien .email-champ-quoi { color: var(--navy); font-weight: 600; }
.email-champ textarea { width: 100%; }
.bord-memo-fait { display: inline; margin-left: 8px; }
.bord-memo-fait button {
font: inherit;
font-size: 0.76rem;
background: none;
border: 1px solid var(--grey-border);
border-radius: 999px;
padding: 1px 9px;
color: var(--muted-text);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px;
}
.bord-memo-fait button:hover { border-color: var(--success-text); color: var(--success-text); }
.bord-memo-clos { margin-top: 10px; font-size: 0.84rem; color: var(--muted-text); }
.bord-memo-clos summary { cursor: pointer; }
.bord-memo-clos ul { margin: 6px 0 0; padding-left: 18px; }
.rappels-poser { margin: 0 0 22px; padding: 14px 16px; border: 1px dashed var(--grey-border); border-radius: 12px; }
.rappels-poser h2 { margin: 0 0 10px; font-size: 0.95rem; color: var(--muted-text); }
.rappels-poser .tiroir-titre { font-size: inherit; color: inherit; }
.rappels-poser .tiroir-corps[hidden] { display: none; }
.rappels-poser .fil-saisie { max-width: 560px; display: flex; flex-direction: column; }
.rappels-pourquoi-ligne { display: flex; align-items: stretch; gap: 10px; flex: 1; min-height: 0; }
.rappels-pourquoi-ligne textarea { flex: 1; height: auto; min-height: 58px; resize: vertical; }
.rappels-pourquoi-ligne .btn { margin: 0; flex: none; height: auto; align-self: stretch; display: inline-flex; align-items: center; gap: 8px; line-height: 1.25; text-align: left; }
@media (min-width: 900px) {
.rappels-poser-corps { display: grid; grid-template-columns: 3fr 2fr; column-gap: 24px; align-items: stretch; }
.rappels-poser .rappels-astuce { margin-top: 0; }
.rappels-poser .fil-saisie { height: 100%; }
}
.rappels-titre { display: block; width: 100%; margin: 0 0 8px; padding: 8px 10px; font: inherit; font-size: 0.92rem; border: 1px solid var(--grey-border); border-radius: 8px; background: var(--surface); color: inherit; }
.rappels-paquet { margin: 18px 0 0; }
.rappels-paquet h2 { margin: 0 0 2px; font-size: 1.05rem; }
.rappels-paquet > .muted { margin: 0 0 8px; font-size: 0.88rem; }
.rappels-paquet-retard h2 { color: var(--danger-solid); }
.rappels-liste { list-style: none; margin: 0; padding: 0; }
.rappels-liste li {
display: grid;
grid-template-columns: minmax(150px, 190px) 1fr auto;
gap: 4px 16px;
align-items: start;
padding: 10px 14px;
margin-left: -14px;
margin-right: -14px;
border-top: 1px solid var(--grey-border);
scroll-margin-top: calc(var(--header-h, 92px) + var(--pastille-h, 0px) + 20px);
}
.rappels-liste li:last-child { border-bottom: 1px solid var(--grey-border); }
.rappels-quand { display: flex; flex-direction: column; font-size: 0.9rem; line-height: 1.4; }
.rappels-delai { font-size: 0.8rem; color: var(--muted-text); }
.rappels-liste li.est-retard .rappels-quand strong,
.rappels-liste li.est-retard .rappels-delai { color: var(--danger-solid); }
.rappels-quoi { display: flex; flex-direction: column; gap: 2px; line-height: 1.45; min-width: 0; }
.rappels-txt { font-size: 0.88rem; }
.rappels-source { font-size: 0.78rem; color: var(--muted-text); }
.rappels-gestes { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.rappels-gestes { align-items: center; }
.rappels-gestes .bord-memo-fait { margin-left: 0; display: inline-flex; }
.rappels-gestes .bord-memo-fait button { height: 26px; padding: 0 10px; line-height: 1; align-items: center; }
.rappels-gestes .bord-memo-fait button svg { display: block; }
.rappels-gestes .rappels-supprimer:hover { border-color: var(--danger-solid); color: var(--danger-solid); }
.rappels-liste li.lieu-card-arrivee { border-radius: 8px; }
.rappels-liste li.carte-arrivee {
outline: 2px solid var(--yellow-dark);
outline-offset: 2px;
border-radius: 8px;
animation: carte-arrivee 2s ease-out 1, rappel-arrivee-fond 2s ease-out 1;
}
@keyframes rappel-arrivee-fond {
0%   { background: color-mix(in srgb, var(--yellow) 22%, transparent); }
100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
.rappels-liste li.carte-arrivee { animation: none; background: color-mix(in srgb, var(--yellow) 22%, transparent); }
}
.rappels-modifier { grid-column: 1 / -1; margin: 8px 0 2px; padding: 10px 12px; border: 1px dashed var(--grey-border); border-radius: 10px; max-width: 640px; }
.rappels-modifier[hidden] { display: none; }
.rappels-modifier textarea { min-height: 44px; }
.rappels-modifier-gestes { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.rappels-modifier-gestes .btn { margin: 0; }
.rappels-modifier-gestes .btn-delete { margin-left: auto; }
.rappels-vide { margin: 14px 0; }
.rappels-astuce { max-width: 560px; margin-top: 14px; text-align: left; hyphens: manual; }
.rappels-astuce > strong { display: block; margin-bottom: 4px; }
.rappels-astuce-texte { display: block; }
.rappels-astuce code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; padding: 0 0.3em; border-radius: 4px; background: color-mix(in srgb, var(--text) 8%, transparent); }
.rappels-kbd { font-family: -apple-system, system-ui, sans-serif; font-weight: 500; font-size: 0.9em; padding: 0 0.35em; border-radius: 4px; background: color-mix(in srgb, var(--text) 8%, transparent); white-space: nowrap; }
.rappels-exemple {
position: relative;
display: block;
height: 30px;
margin-top: 10px;
border: 1px solid var(--yellow-dark);
border-radius: 999px;
background: var(--surface);
overflow: hidden;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.8rem;
}
.rappels-exemple-mot {
position: absolute;
inset: 0;
display: flex;
align-items: center;
padding: 0 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transform: translateY(0);
opacity: 1;
transition: transform 0.6s ease, opacity 0.6s ease;
}
.rappels-exemple-txt { overflow: hidden; text-overflow: ellipsis; }
.rappels-exemple-entree {
margin-left: auto;
padding-left: 10px;
font-family: inherit;
font-size: 0.95em;
color: var(--muted-text);
flex: none;
}
.rappels-exemple-mot.est-haut { transform: translateY(-100%); opacity: 0; }
.rappels-exemple-mot.est-bas { transform: translateY(100%); opacity: 0; }
@media (prefers-reduced-motion: reduce) {
.rappels-exemple-mot { transition: none; }
}
.rappels-quand-dit { font-size: 0.85rem; color: var(--muted-text); white-space: nowrap; }
.rappels-quand-dit:empty { display: none; }
.rappels-hors-frise { margin: -8px 0 0; font-size: 0.82rem; }
.bord-rappels-porte { margin: -6px 0 20px; font-size: 0.88rem; }
.bord-rappels-porte a { display: inline-flex; align-items: center; gap: 6px; color: inherit; }
.bord-memo-tous { margin: -4px 0 8px; font-size: 0.82rem; }
.rappels-clos { margin-top: 18px; }
@media (max-width: 640px) {
.rappels-liste li { grid-template-columns: 1fr; gap: 4px; }
.rappels-gestes { justify-content: flex-start; }
}
.admin-table tbody tr:nth-child(even) {
background: color-mix(in srgb, var(--text) 3.5%, transparent);
}
.admin-table tbody tr.stage-annulee,
.admin-table tbody tr.stage-annulee:nth-child(even) {
background: repeating-linear-gradient(
-45deg,
transparent 0 3.771px,
color-mix(in srgb, var(--text) 17%, transparent) 3.771px 4.714px
);
}
.admin-table tbody tr.stage-brouillon,
.admin-table tbody tr.stage-brouillon:nth-child(even) {
background-image: radial-gradient(
circle at 1px 1px,
color-mix(in srgb, var(--text) 22%, transparent) 1px,
transparent 1.2px
);
background-size: 4px 4px;
}
body.fond-brouillon,
.admin-table tbody tr.stage-inactive,
.admin-table tbody tr[data-portrait-off="1"],
.admin-table tbody tr[data-portrait-off="1"]:nth-child(even),
.photo-fiche.est-orpheline {
background-image: radial-gradient(
circle at 1px 1px,
color-mix(in srgb, var(--text) 22%, transparent) 1px,
transparent 1.2px
);
background-size: 4px 4px;
}
body.fond-annulee {
background-image: repeating-linear-gradient(
-45deg,
transparent 0 7px,
color-mix(in srgb, var(--text) 17%, transparent) 7px 14px
);
}
body.fond-besoin-monde {
background-image: repeating-linear-gradient(
-45deg,
transparent 0 7px,
color-mix(in srgb, var(--orange-alerte) 24%, transparent) 7px 14px
);
}
body.fond-cloture-ratee {
background-image: repeating-linear-gradient(
-45deg,
transparent 0 7px,
color-mix(in srgb, var(--error-text) 24%, transparent) 7px 14px
);
}
.admin-table tbody tr.stage-passee td,
.admin-table tbody tr.stage-passee td a {
color: color-mix(in srgb, var(--muted-text) 52%, transparent);
}
.admin-table tbody tr.stage-passee.stage-confirmed td:first-child a { font-weight: 600; }
.relance-etat.conflit-chevauche {
background: color-mix(in srgb, var(--ch-violet) 14%, var(--surface));
color: color-mix(in srgb, var(--ch-violet) 70%, var(--text));
}
.relance-etat.conflit-enchaine {
background: color-mix(in srgb, var(--yellow) 32%, transparent);
color: var(--text);
}
.fiche-grille {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
gap: 18px;
align-items: start;
margin-top: 12px;
grid-auto-rows: minmax(100px, auto);
grid-auto-flow: row dense;
}
.fiche-grille > .form-section {
min-width: 0;   
margin: 0;
}
@media (min-width: 940px) {
.fiche-grille > .fiche-large { grid-column: span 2; }
}
.fiche-grille > .fiche-pleine { grid-column: 1 / -1; }
@media (min-width: 940px) {
.fiche-grille > .fiche-pleine { grid-column: 1 / span 2; }
}
.fiche-cachees { font-size: .82rem; margin: 0; }
.fiche-grille > .fiche-danger { grid-column-start: 1; }
.fiche-temoignage { margin-bottom: 14px; }
.fiche-temoignage .temoignage { margin: 0; }
.fiche-tem-dates { font-size: 0.82rem; color: var(--muted-text); margin: 6px 0 0; }
a.temoignage-tag-lien { text-decoration: none; color: inherit; transition: background-color .15s ease; }
a.temoignage-tag-lien:hover,
a.temoignage-tag-lien:focus-visible { background: color-mix(in srgb, var(--yellow) 30%, transparent); }
.tiroir-titre-h { margin: 0; }
.tiroir-titre {
display: flex; align-items: center; gap: 8px;
width: 100%; padding: 0; border: 0; background: none;
font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.tiroir-chevron { display: inline-flex; transition: transform 0.18s ease; }
.tiroirs-restauration .tiroir-chevron { transition: none; }
.tiroir-attente { position: relative; }
.tiroir-attente i {
position: absolute;
display: block;
border: 1px solid var(--grey-border);
border-radius: 12px;
background: transparent;
animation: trace-vague 2.4s ease-in-out infinite;
}
@keyframes trace-vague {
0%, 100% { border-color: var(--grey-border); }
50% { border-color: color-mix(in srgb, var(--yellow-dark) 60%, var(--grey-border)); }
}
@media (prefers-reduced-motion: reduce) {
.tiroir-attente i { animation: none; }
}
.tiroir-corps.tiroir-arrive { position: relative; }
.tiroir-corps.tiroir-arrive > :not(.ta-fantome) { opacity: 0; transition: opacity .34s ease; }
.tiroir-corps.tiroir-arrive.est-arrive > :not(.ta-fantome) { opacity: 1; }
.ta-fantome { position: absolute; inset: 0; pointer-events: none; transition: opacity .34s ease; }
.tiroir-arrive.est-arrive .ta-fantome { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
.tiroir-corps.tiroir-arrive > :not(.ta-fantome) { opacity: 1; transition: none; }
.ta-fantome { display: none; }
}
.tiroir-titre.est-en-attente .tiroir-titre-mot {
background-image: linear-gradient(95deg,
var(--text) 0%, var(--text) 36%,
color-mix(in srgb, var(--yellow-dark) 80%, var(--text)) 50%,
var(--text) 64%, var(--text) 100%);
background-size: 250% 100%;
background-repeat: no-repeat;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: titre-vague 2.4s linear infinite;
}
@keyframes titre-vague {
from { background-position: 100% 0; }
to   { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
.tiroir-titre.est-en-attente .tiroir-titre-mot {
animation: none; background-image: none;
color: color-mix(in srgb, var(--yellow-dark) 80%, var(--text));
}
}
.tiroir-titre[aria-expanded="false"] .tiroir-chevron { transform: rotate(-90deg); }
.tiroir-titre[aria-expanded="false"] { opacity: 0.72; }
.tiroir-corps { opacity: 1; translate: none; }
@media (prefers-reduced-motion: no-preference) {
.tiroir-corps {
transition: opacity .22s ease, translate .22s ease,
display .22s allow-discrete;
}
.tiroir-corps[hidden] { opacity: 0; translate: 0 -6px; }
@starting-style {
.tiroir-corps:not([hidden]) { opacity: 0; translate: 0 -6px; }
}
}
.tiroir-corps[hidden] { display: none; }
.fiche-titre { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.fiche-titre h1 { margin: 0; }
.fiche-titre > .btn { margin-top: 0; }
.tiroirs-actions { display: inline-flex; gap: 4px; }
.tiroirs-tout {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; padding: 0;
border: 1px solid var(--grey-border); border-radius: 8px;
background: none; color: var(--muted-text); cursor: pointer;
transition: color 0.15s ease, background-color 0.15s ease;
}
.tiroirs-tout:hover { color: var(--text); background: var(--grey-bg); }
.col-quand { white-space: nowrap; min-width: 19ch; }
.time-toggle { cursor: pointer; border-bottom: 1px dotted currentColor; }
.fiche-personne .table-defilante { max-height: min(52svh, 560px); }
.pill-filtre.pill-filtre-eteinte { opacity: 0.45; }
.conflits-titre { margin-bottom: 0; border-radius: 6px 6px 0 0; }
.conflits-liste {
margin: 0 0 16px;
padding: 4px 16px 12px 34px;
border-radius: 0 0 6px 6px;
font-size: 0.92rem;
}
.conflits-liste li { margin: 4px 0; }
.conflits-liste-error {
background: var(--error-bg);
color: var(--error-text);
}
.notice-chevauche,
.conflits-liste-chevauche {
background: color-mix(in srgb, var(--ch-violet) 14%, var(--surface));
color: color-mix(in srgb, var(--ch-violet) 70%, var(--text));
}
.conflits-liste-chevauche a { color: inherit; }
.conflits-liste-error a { color: inherit; }
.conflits-liste-warn {
background: color-mix(in srgb, var(--yellow) 22%, transparent);
color: var(--text);
}
.conflits-liste-warn a { color: inherit; }
.admin-table tbody tr.stage-chevauche,
.admin-table tbody tr.stage-chevauche:nth-child(even) {
background: repeating-linear-gradient(
-45deg,
transparent 0 7px,
color-mix(in srgb, var(--ch-violet) 26%, transparent) 7px 14px
);
}
.admin-table tbody tr.stage-enchaine,
.admin-table tbody tr.stage-enchaine:nth-child(even) {
background: repeating-linear-gradient(
-45deg,
transparent 0 7px,
color-mix(in srgb, var(--yellow) 30%, transparent) 7px 14px
);
}
.admin-table tbody tr.stage-besoin-monde,
.admin-table tbody tr.stage-besoin-monde:nth-child(even) {
background: repeating-linear-gradient(
-45deg,
transparent 0 7px,
color-mix(in srgb, var(--orange-alerte) 24%, transparent) 7px 14px
);
}
.admin-table tbody tr.stage-cloture-ratee,
.admin-table tbody tr.stage-cloture-ratee:nth-child(even) {
background: repeating-linear-gradient(
-45deg,
transparent 0 7px,
color-mix(in srgb, var(--error-text) 24%, transparent) 7px 14px
);
}
.stage-com-cell { min-width: 21ch; }
.stage-com { font-size: 0.82rem; }
.stage-com-super { color: var(--success-text); font-weight: 600; }
.stage-com-bien { color: var(--success-text); }
.stage-com-neutre { color: var(--muted-text); }
.stage-com-alerte {
color: var(--error-text);
font-weight: 600;
text-decoration: underline wavy var(--error-text);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.relance-etat {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
font-size: 0.74rem;
white-space: nowrap;
}
.relance-faite {
background: color-mix(in srgb, var(--success-text) 14%, transparent);
color: var(--success-text);
}
.relance-attente {
background: color-mix(in srgb, var(--yellow) 40%, transparent);
color: var(--text);
text-decoration: none;
font-weight: 600;
}
.relance-attente:hover { background: var(--yellow); }
.relance-a-faire {
background: color-mix(in srgb, var(--error-text) 12%, transparent);
color: var(--error-text);
}
.admin-table tbody tr:hover {
background: color-mix(in srgb, var(--yellow) 12%, transparent);
}
.signal-astre { display: flex; align-items: center; gap: 14px; margin: 10px 0 26px; }
.signal-astre-demo { cursor: default; }
.feedback-captures { display: flex; flex-wrap: wrap; gap: 8px; position: relative; }
.feedback-captures.est-voilee img { filter: blur(14px) saturate(0.4); }
.feedback-captures.est-voilee .feedback-capture { pointer-events: none; }
.feedback-voile {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
font: inherit;
font-size: 0.78rem;
border: 1px dashed var(--muted-text);
border-radius: 10px;
background: color-mix(in srgb, var(--surface) 70%, transparent);
color: var(--text);
cursor: pointer;
}
.feedback-voile:hover { border-color: var(--yellow-dark); color: var(--yellow-dark); }
.feedback-captures:not(.est-voilee) .feedback-voile { display: none; }
.photo-plein-dire[hidden] { display: none; }
.photo-plein-dire {
opacity: 0;
transition: opacity 0.5s ease;
max-width: 100%;
}
.photo-plein-dire.est-visible { opacity: 1; }
.photo-plein-dire-btn {
pointer-events: auto;
display: inline-flex;
text-wrap: balance;
align-items: center;
min-height: 44px;
padding: 0 16px;
border-radius: 22px;
font-size: 0.82rem;
color: #fff;
background: color-mix(in srgb, #000 55%, transparent);
border: 1px solid color-mix(in srgb, #fff 45%, transparent);
cursor: pointer;
backdrop-filter: blur(4px);
}
.photo-plein-dire-btn:hover,
.photo-plein-dire-btn:focus-visible {
background: var(--yellow);
color: var(--navy-dark);
border-color: var(--yellow);
}
@media (prefers-reduced-motion: reduce) {
.photo-plein-dire { transition: none; }
}
.feedback-photo-jointe[hidden] { display: none; }
.feedback-photo-jointe {
margin: 8px 0 4px;
display: flex;
align-items: center;
gap: 10px;
}
.feedback-photo-jointe img {
width: 68px;
height: 68px;
object-fit: cover;
border-radius: 8px;
flex: none;
}
.feedback-photo-jointe p { margin: 0; font-size: 0.8rem; }
.feedback-panel { overflow-x: hidden; }
.feedback-panel * { min-width: 0; }
.feedback-panel .feedback-tete h3 { min-width: 0; overflow-wrap: anywhere; }
.prochaine-badge {
width: 46px;
height: 46px;
flex: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.prochaine-badge-vide { opacity: 0.55; }
.btn-compte { display: inline; white-space: nowrap; }
.lieux-etat {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 5px;
margin: 0 0 10px;
}
.lieux-etat .pill-filtre { font-size: 0.72rem; padding: 4px 9px; }
.lieu-mini.etat-hors { display: none; }
.carte-pin.etat-hors { opacity: 0; pointer-events: none; }
.lieux-groupe.etat-groupe-vide { display: none; }
.photo-plein-fermer {
width: auto;
height: auto;
border-radius: 999px;
display: inline-flex;
align-items: center;
gap: 9px;
padding: 6px 12px 6px 8px;
}
.photo-plein-esc {
font-family: inherit;
font-size: 11px;
line-height: 1;
letter-spacing: 0.02em;
color: rgba(255, 255, 255, 0.9);
background: rgba(255, 255, 255, 0.13);
border: 1px solid rgba(255, 255, 255, 0.3);
border-bottom-width: 2px;
border-radius: 5px;
padding: 3px 7px 2px;
}
.photo-plein-croix { font-size: 16px; line-height: 1; }
@media (hover: none) {
.photo-plein-esc { display: none; }
.photo-plein-fermer { gap: 0; padding: 6px 10px; }
}
.fav-bulle-zone { display: contents; }
.fav-bulle-zone > .tile-interest-btn { width: 100%; }
.lieu-barre .lieu-actions { justify-content: flex-end; }
.fav-bulle {
position: fixed;
z-index: 65;
width: max-content;
max-width: min(300px, calc(100vw - 32px));
background: var(--surface);
border: 1px solid var(--grey-border);
border-radius: 14px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
padding: 12px 15px;
text-align: left;
opacity: 0;
visibility: hidden;
transition: opacity 0.16s ease, visibility 0s linear 0.16s;
}
.fav-bulle-sous { max-width: min(240px, calc(100vw - 32px)); }
.fav-bulle-sous::before,
.fav-bulle-sous::after {
content: "";
position: absolute;
left: var(--pointe-x, 50%);
width: 0;
height: 0;
transform: translateX(-50%);
border: 7px solid transparent;
pointer-events: none;
}
.fav-bulle-sous::before { bottom: 100%; border-bottom-color: var(--grey-border); }
.fav-bulle-sous::after  { bottom: calc(100% - 1px); border-width: 6px; border-bottom-color: var(--surface); }
.fav-bulle-sous.est-au-dessus::before,
.fav-bulle-sous.est-au-dessus::after { bottom: auto; }
.fav-bulle-sous.est-au-dessus::before { top: 100%; border-bottom-color: transparent; border-top-color: var(--grey-border); }
.fav-bulle-sous.est-au-dessus::after  { top: calc(100% - 1px); border-bottom-color: transparent; border-top-color: var(--surface); }
.fav-bulle-zone.est-ouverte .fav-bulle,
.fav-bulle.est-ouverte,
.fav-bulle.est-ouverte.est-ouverte {
opacity: 1;
visibility: visible;
transition: none;
transition-delay: 0s;
background-color: var(--surface);
backdrop-filter: none;
}
.fav-bulle, .fav-bulle-t, .fav-bulle-d { white-space: normal; }
.fav-bulle-t, .fav-bulle-d { display: block; hyphens: auto; }
.fav-bulle-d { text-align: left; }
.fav-bulle-t { text-align: left; margin: 0 0 5px; font-size: 0.82rem; color: var(--text); line-height: 1.5; }
.fav-bulle-d { margin: 0; font-size: 0.8rem; color: var(--muted-text); line-height: 1.5; }
.fav-bulle:has(.bulle-cles) { max-width: min(460px, calc(100vw - 32px)); }  
.fav-bulle .bulle-cles { display: grid; grid-template-columns: max-content 1fr; gap: 5px 12px; margin: 0; font-size: 0.8rem; line-height: 1.45; color: var(--muted-text); text-align: left; }
.fav-bulle .bulle-cles dt { font-weight: 600; color: var(--text); }
.fav-bulle .bulle-cles dd { margin: 0; text-wrap: pretty; }
.fav-bulle u.bulle-lien { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.fav-bulle-zone > button:first-child {
transition: color 0.22s ease, border-color 0.22s ease;
}
@keyframes fav-ondulation {
from { transform: translateX(0); }
to   { transform: translateX(-50%); }
}
.fav-bulle-zone > button:first-child { position: relative; }
.fav-bulle-zone.est-ouverte > button:first-child,
.fav-bulle-zone.fav-attend > button:first-child {
border-color: var(--yellow-dark);
color: var(--text);
position: relative;
overflow: hidden;
}
.fav-bulle-zone.est-ouverte > button:first-child::before,
.fav-bulle-zone.fav-attend > button:first-child::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 100%;
background-image: linear-gradient(110deg,
color-mix(in srgb, var(--yellow) 10%, var(--surface)) 0%,
color-mix(in srgb, var(--yellow) 30%, var(--surface)) 50%,
color-mix(in srgb, var(--yellow) 10%, var(--surface)) 100%);
background-size: 50% 100%;
background-repeat: repeat-x;
animation: fav-ondulation 4s linear infinite;   
z-index: 0;
opacity: 0.5;
transition: opacity 0.25s ease;
}
.fav-bulle-zone.fav-attend > button:first-child::before { opacity: 1; }
.fav-bulle-zone.fav-se-remplit > button:first-child::before {
animation-play-state: paused;
opacity: 0;
transition: opacity 0.4s ease;
}
.fav-bulle-zone.est-ouverte > button:first-child > *:not(.fav-confirme):not(.fav-libelle-sortant),
.fav-bulle-zone.fav-attend > button:first-child > *:not(.fav-confirme):not(.fav-libelle-sortant) {
position: relative;
z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
.fav-bulle-zone.est-ouverte > button:first-child::before,
.fav-bulle-zone.fav-attend > button:first-child::before {
animation: none;
background-image: none;
background-color: color-mix(in srgb, var(--yellow) 18%, var(--surface));
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.fav-bulle-zone > button:first-child { transition: none; }
.fav-bulle { transition: none; }
}
.dev-tactile { display: none; }
:root.mode-tactile .dev-tactile {
display: block;
position: absolute;
top: 100%;
left: 0;
right: 0;
margin-top: -1px;
text-align: center;
font-size: 0.52rem;
letter-spacing: 0.02em;
color: var(--muted);
line-height: 1;
white-space: nowrap;
pointer-events: none;
}
:root.mode-tactile .brand { position: relative; }
.fav-bulle-zone.fav-attend > button.region-suivre::before,
.fav-bulle-zone.fav-se-remplit > button.region-suivre::before { content: none; display: none; }
@keyframes fav-attente-souffle { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.fav-bulle-zone.fav-attend > .region-suivre {
animation: fav-attente-souffle 1.1s ease-in-out infinite;
border-color: transparent;
}
.fav-bulle-zone.fav-se-remplit > .region-suivre {
animation: none;
opacity: 1;
transition: opacity 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
.fav-bulle-zone.fav-attend > .region-suivre { animation: none; opacity: 0.6; }
}
.fav-libelle-sortant {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 0.34em;
pointer-events: none;
z-index: 2;
opacity: 1;
transition: opacity 0.3s ease;
}
.fav-libelle-sortant.est-parti { opacity: 0; }
@keyframes fav-libelle-entre { from { opacity: 0; } to { opacity: 1; } }
.fav-bulle-zone > button:first-child:has(> .fav-libelle-sortant) > .fav-libelle {
animation: fav-libelle-entre 0.3s ease both;
}
.fav-txt-glisse .fav-libelle-sortant { transition: opacity 0.26s ease, transform 0.26s ease; }
.fav-txt-glisse .fav-libelle-sortant.est-parti { transform: translateY(-7px); }
@keyframes fav-txt-glisse-entre { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.fav-bulle-zone > button.fav-txt-glisse:has(> .fav-libelle-sortant) > .fav-libelle {
animation: fav-txt-glisse-entre 0.26s ease both;
}
.fav-txt-echelle .fav-libelle-sortant { transition: opacity 0.24s ease, transform 0.24s ease; }
.fav-txt-echelle .fav-libelle-sortant.est-parti { transform: scale(0.94); }
@keyframes fav-txt-echelle-entre { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
.fav-bulle-zone > button.fav-txt-echelle:has(> .fav-libelle-sortant) > .fav-libelle {
animation: fav-txt-echelle-entre 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
.fav-txt-decale .fav-libelle-sortant { transition: opacity 0.13s ease; }
.fav-bulle-zone > button.fav-txt-decale:has(> .fav-libelle-sortant) > .fav-libelle {
animation: fav-libelle-entre 0.2s ease 0.12s both;
}
.fav-txt-flou .fav-libelle-sortant { transition: opacity 0.3s ease, filter 0.3s ease; }
.fav-txt-flou .fav-libelle-sortant.est-parti { filter: blur(4px); }
@keyframes fav-txt-flou-entre { from { opacity: 0; filter: blur(4px); } to { opacity: 1; filter: blur(0); } }
.fav-bulle-zone > button.fav-txt-flou:has(> .fav-libelle-sortant) > .fav-libelle {
animation: fav-txt-flou-entre 0.3s ease both;
}
.fav-txt-rideau { overflow: hidden; }
.fav-txt-rideau .fav-libelle-sortant { transition: opacity 0.28s ease, transform 0.28s ease; }
.fav-txt-rideau .fav-libelle-sortant.est-parti { transform: translateY(-115%); opacity: 0; }
@keyframes fav-txt-rideau-entre { from { opacity: 0; transform: translateY(115%); } to { opacity: 1; transform: none; } }
.fav-bulle-zone > button.fav-txt-rideau:has(> .fav-libelle-sortant) > .fav-libelle {
animation: fav-txt-rideau-entre 0.28s cubic-bezier(0.3, 0.8, 0.3, 1) both;
}
.fav-txt-rideau-bas { overflow: hidden; }
.fav-txt-rideau-bas .fav-libelle-sortant { transition: opacity 0.28s ease, transform 0.28s ease; }
.fav-txt-rideau-bas .fav-libelle-sortant.est-parti { transform: translateY(115%); opacity: 0; }
@keyframes fav-txt-rideau-bas-entre { from { opacity: 0; transform: translateY(-115%); } to { opacity: 1; transform: none; } }
.fav-bulle-zone > button.fav-txt-rideau-bas:has(> .fav-libelle-sortant) > .fav-libelle {
animation: fav-txt-rideau-bas-entre 0.28s cubic-bezier(0.3, 0.8, 0.3, 1) both;
}
.fav-passage-flou .fav-libelle-sortant { transition: opacity 0.3s ease, filter 0.3s ease; }
.fav-passage-flou .fav-libelle-sortant.est-parti { filter: blur(4px); }
.fav-bulle-zone > button.fav-passage-flou:has(> .fav-libelle-sortant) > .fav-libelle {
animation: fav-txt-flou-entre 0.3s ease both;
}
.fav-passage-rideau { overflow: hidden; }
.fav-passage-rideau .fav-libelle-sortant { transition: opacity 0.28s ease, transform 0.28s ease; }
.fav-passage-rideau .fav-libelle-sortant.est-parti { transform: translateY(115%); opacity: 0; }
.fav-bulle-zone > button.fav-passage-rideau:has(> .fav-libelle-sortant) > .fav-libelle {
animation: fav-txt-rideau-bas-entre 0.28s cubic-bezier(0.3, 0.8, 0.3, 1) both;
}
.zz-ralenti .fav-bulle-zone > button:first-child:has(> .fav-libelle-sortant) > .fav-libelle,
.zz-ralenti .fav-libelle-sortant { transition-duration: 3s; animation-duration: 3s; }
@media (prefers-reduced-motion: reduce) {
.fav-libelle-sortant { display: none; }
.fav-bulle-zone > button:first-child:has(> .fav-libelle-sortant) > .fav-libelle { animation: none; }
}
.zz-ralenti .fav-libelle-sortant { transition-duration: 3s; }
.zz-ralenti .fav-bulle-zone > button:first-child:has(> .fav-libelle-sortant) > .fav-libelle {
animation-duration: 3s;
}
.chantier-global { margin: 14px 0 22px; }
.chantier-global-txt { margin: 6px 0 0; }
.chantier-barre {
height: 8px;
border-radius: 99px;
background: color-mix(in srgb, var(--text) 10%, transparent);
overflow: hidden;
}
.chantier-barre > span {
display: block;
height: 100%;
border-radius: 99px;
background: var(--yellow);
transition: width 0.5s ease;
}
.chantier-priorite { margin-top: 30px; }
.chantier-grille {
display: grid;
gap: 18px;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}
@media (max-width: 460px) {
.chantier-grille { grid-template-columns: 1fr; }
}
.chantier {
border: 1px solid var(--grey-border);
border-radius: 14px;
padding: 16px 18px;
background: var(--surface);
display: flex;
flex-direction: column;
}
.chantier-tete {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.chantier.est-prochain { box-shadow: 0 0 0 2px var(--yellow); scroll-margin-top: calc(var(--header-h, 92px) + var(--pastille-h, 48px) + 24px); }
.chantier-prochain { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--yellow); color: var(--navy); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-right: 6px; }
.chantier-etat {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-size: 0.74rem;
font-weight: 600;
white-space: nowrap;
background: var(--grey-bg);
color: var(--muted-text);
}
.chantier-etat.est-attente {
background: color-mix(in srgb, var(--yellow) 35%, transparent);
color: var(--text);
}
.chantier-etat.est-cours {
background: var(--success-bg);
color: var(--success-text);
}
.chantier-etat.est-fait {
background: color-mix(in srgb, var(--navy) 18%, transparent);
color: var(--text);
}
.chantier-tete-txt {
font-size: 0.76rem;
color: var(--muted-text);
line-height: 1.3;
}
.chantier-titre {
margin: 0;
font-size: 1rem;
line-height: 1.3;
min-height: calc(2 * 1.3em);
display: flex;
align-items: flex-start;
}
.chantier-pourquoi {
font-size: 0.88rem;
color: var(--muted-text);
line-height: 1.5;
margin: 8px 0 12px;
min-height: calc(4 * 1.5em);
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.chantier-compte { font-size: 0.78rem; color: var(--muted-text); margin: 6px 0 10px; }
.chantier-etapes { list-style: none; margin: 0; padding: 0; font-size: 0.86rem; line-height: 1.6; }
.chantier-etapes li { display: flex; gap: 8px; align-items: baseline; }
.chantier-etapes li.est-faite { color: var(--muted-text); }
.chantier-coche { flex: 0 0 auto; width: 1em; color: var(--yellow-dark); }
.chantier-etapes li:not(.est-faite) .chantier-coche { color: var(--muted-text); }
.chantier-blocage {
margin: 12px 0 0;
min-height: 2.4em;
font-size: 0.84rem;
padding: 8px 10px;
border-radius: 10px;
box-sizing: border-box;
}
.chantier-blocage.est-bloque {
background: color-mix(in srgb, var(--yellow) 16%, var(--surface));
}
.chantier-etapes { margin-bottom: 0; }
.chantier-corps { --lignes: 15; --interligne: 1.6; }
.chantier-corps .chantier-etapes { max-height: calc(var(--lignes) * var(--interligne) * 1em); overflow: hidden; font-size: 0.86rem; }
.chantier-grille .chantier { cursor: pointer; }
.chantier-corps { position: relative; }
.chantier-corps.deborde::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2.2em; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--chantier-fond, var(--surface))); }
.dlg.chantier-dlg { max-width: 76rem; width: min(94vw, 76rem); padding: 0; display: flex; flex-direction: column; max-height: 92vh; }
.chantier-dlg .chantier > * { flex-shrink: 0; }
.chantier-dlg[open] { display: flex; }
.chantier-dlg .chantier { border: 0; border-radius: 0; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1.2rem 1.4rem; }
.chantier-dlg .chantier-etapes { max-height: none; overflow: visible; }
.chantier-dlg .chantier-pourquoi { -webkit-line-clamp: unset; overflow: visible; display: block; min-height: 0; }
.chantier-dlg .chantier-titre { min-height: auto; }
.chantier-dlg .chantier { cursor: default; }
.chantier-dlg .chantier-corps.deborde::after { display: none; }
.chantier.est-visee { box-shadow: 0 0 0 3px var(--yellow); transition: box-shadow .3s; }
.chantier { scroll-margin-top: calc(var(--header-h, 92px) + var(--pastille-h, 48px) + 24px); }
:root { --ch-rouge: #b3261e; --ch-jaune: #e6ac2e; --ch-vert: #2e9e5b; --ch-gris: #8a949e; --ch-violet: #7b5cb8; }
.chantier[data-ch-prio-val="1"] { --chantier-fond: color-mix(in srgb, var(--ch-rouge) 7%, var(--surface)); background: var(--chantier-fond); border-color: color-mix(in srgb, var(--ch-rouge) 35%, var(--grey-border)); }
.chantier[data-ch-prio-val="2"] { --chantier-fond: color-mix(in srgb, var(--ch-jaune) 10%, var(--surface)); background: var(--chantier-fond); border-color: color-mix(in srgb, var(--ch-jaune) 45%, var(--grey-border)); }
.chantier[data-ch-prio-val="3"] { --chantier-fond: color-mix(in srgb, var(--ch-vert) 8%, var(--surface)); background: var(--chantier-fond); border-color: color-mix(in srgb, var(--ch-vert) 35%, var(--grey-border)); }
.chantier[data-ch-etat-val="fait"] { --chantier-fond: color-mix(in srgb, var(--ch-gris) 12%, var(--surface)); background: var(--chantier-fond); border-color: color-mix(in srgb, var(--ch-gris) 40%, var(--grey-border)); color: var(--muted-text); }
.chantier[data-ch-etat-val="abandonne"] { --chantier-fond: color-mix(in srgb, var(--ch-violet) 10%, var(--surface)); background: var(--chantier-fond); border-color: color-mix(in srgb, var(--ch-violet) 40%, var(--grey-border)); }
.chantier-dlg .chantier { background: var(--surface); }
.ch-couleur { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: 0; }
.ch-couleur.est-p1 { background: var(--ch-rouge); }
.ch-couleur.est-p2 { background: var(--ch-jaune); }
.ch-couleur.est-p3 { background: var(--ch-vert); }
.ch-couleur.est-fait { background: var(--ch-gris); }
.ch-couleur.est-abandonne { background: var(--ch-violet); }
.chantier-sommaire-prio li[data-ch-etat-val="fait"] a { color: var(--muted-text); }
.chantier-sommaire-prio li[data-ch-etat-val="abandonne"] a { color: var(--ch-violet); }
.chantier-etat-mini.est-fait-mini { background: var(--ch-gris); }
.chantier-etat-mini.est-abandonne-mini { background: var(--ch-violet); }
.chantier-filtres { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 14px; }
.chantier-filtres-groupe { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chantier-sommaire { margin: 0 0 8px; }
.chantier-sommaire > summary { cursor: pointer; font-weight: 600; }
.chantier-sommaire-n { font-weight: 400; margin-left: 6px; font-size: 0.85rem; }
.chantier-sommaire-prio { margin: 10px 0 0; }
.chantier-sommaire-prio h3 { margin: 0 0 4px; font-size: 0.82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted-text); }
.chantier-sommaire-prio ul { list-style: none; margin: 0; padding: 0; columns: 3; column-gap: 28px; }
@media (max-width: 1100px) { .chantier-sommaire-prio ul { columns: 2; } }
@media (max-width: 640px) { .chantier-sommaire-prio ul { columns: 1; } }
.chantier-sommaire-prio li { break-inside: avoid; display: flex; gap: 8px; align-items: baseline; font-size: 0.88rem; line-height: 1.45; padding: 2px 0; }
.chantier-sommaire-prio li a { color: inherit; text-decoration: none; flex: 1 1 auto; }
.chantier-sommaire-prio li a:hover { text-decoration: underline; }
.chantier-sommaire-pc { font-size: 0.75rem; color: var(--muted-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chantier-etat-mini { flex: 0 0 auto; width: 9px; height: 9px; padding: 0; border-radius: 50%; font-size: 0; align-self: center; background: var(--grey-border); }
.chantier-attente-lien { color: inherit; text-decoration: none; }
.chantier-attente-lien:hover { text-decoration: underline; }
.chantier-bloc { margin: 22px 0; }
.chantier-bloc-attente { padding: 2px 0; }
.chantier-attentes { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.chantier-attentes li {
display: flex; flex-direction: column; gap: 6px;
padding: 10px 12px;
border: 1px solid var(--grey-border); border-left: 4px solid var(--yellow); border-radius: 12px;
line-height: 1.45;
}
.chantier-attente-lien { font-weight: 600; font-size: 0.92rem; }
.chantier-attente-quoi { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.84rem; color: var(--muted-text); }
.chantier-attentes .chantier-depuis { margin: auto 0 0; }
.chantier-attente-texte { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.88rem; }
.chantier-attente-aller { font-size: 0.84rem; }
.chantier-attente-pied { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.chantier-attente-pied .chantier-depuis { margin: 0; }
.chantier-attente-pied .bord-memo-fait { margin-left: auto; }
.chantier-depuis { font-size: 0.74rem; color: var(--muted-text); margin-left: auto; white-space: nowrap; }
.dev-bascule { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.dev-bascule input { margin: 0; }
.zz-ralenti .fav-bulle-zone.est-ouverte > button:first-child::before,
.zz-ralenti .fav-bulle-zone.fav-attend > button:first-child::before {
animation-duration: 40s;          
transition-duration: 2.5s;        
}
.zz-ralenti .fav-bulle-zone.fav-se-remplit > button:first-child::before {
transition-duration: 4s;          
}
.zz-ralenti .fav-bulle-zone > button:first-child {
transition-duration: 2.2s;        
}
.fav-confirme {
position: absolute;
inset: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
gap: 6px;
opacity: 0;
transform: translateY(4px);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.fav-a-confirmer { position: relative; }
.fav-libelle {
display: inline-flex;
align-items: center;
gap: 5px;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.fav-bulle-zone.est-ouverte .fav-a-confirmer .fav-libelle {
opacity: 0;
transform: translateY(-4px);
}
.fav-bulle-zone.est-ouverte .fav-confirme {
opacity: 1;
transform: translateY(0);
}
.fav-confirme-ic {
width: 11px;
height: 6px;
border-left: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(-45deg) translate(1px, -2px);
}
@media (prefers-reduced-motion: reduce) {
.fav-confirme, .fav-a-confirmer > :not(.fav-confirme) { transition: none; }
}
.tile-interest-btn { overflow: hidden; }
.fav-rideau {
position: absolute;
inset: 0;
border-radius: inherit;
background: color-mix(in srgb, var(--yellow) 18%, var(--surface));
pointer-events: none;
z-index: 0;
}
.tile-interest-btn > .fav-libelle { position: relative; z-index: 1; }
.tile-interest-btn > .fav-confirme { z-index: 2; }
.stage-actions > .stage-interest,
.stage-actions > .stage-reservation {
flex: 1 1 auto;
min-width: min(max-content, 100%);
}
.theme-sans-transition *:not(.icon-sunmoon, .icon-sunmoon *),
.theme-sans-transition *::before,
.theme-sans-transition *:not(.theme-auto)::after {
transition: none !important;
animation-duration: 0s !important;
}
.recherche-champ {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border: 1px solid var(--grey-border);
border-radius: 999px;
background: var(--surface);
}
.recherche-champ:focus-within { border-color: var(--yellow); }
.recherche-ico { display: flex; color: var(--muted-text); }
.recherche-champ input {
border: 0;
padding: 2px 0;
min-width: 190px;
background: transparent;
font-size: .9rem;
color: var(--text);
}
.recherche-champ input:focus { outline: none; }
.filtre-vide { margin-top: 8px; }
.cell-ico-nature { display: inline-flex; gap: 3px; margin-right: 6px; vertical-align: -2px; }
.cell-ico-nature .ico-compte { color: var(--muted-text); }
.cell-ico-nature .ico-portrait { color: var(--yellow-dark); }
.cell-ico-nature > span { display: flex; }
.cell-crayon {
margin-left: 6px;
color: var(--muted-text);
opacity: .55;
transition: opacity .15s;
}
.cell-crayon:hover { opacity: 1; color: var(--yellow-dark); }
.cell-sans-objet { color: var(--muted-text); opacity: .5; }
.portrait-edit-photos { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.portrait-edit-photos img {
width: 120px;
height: 120px;
object-fit: cover;
border-radius: 10px;
border: 1px solid var(--grey-border);
}
.journal-table tbody tr[hidden] { display: none; }
#journal-card .frise-temps { margin-bottom: 18px; }
.journal-ligne-outils {
display: flex;
align-items: flex-start;
gap: 6px;
flex-basis: 100%;
}
.journal-filtre-pastilles {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
flex: 1 1 0;
min-width: 0;
max-height: 7.4rem;
overflow-y: auto;
}
.journal-filtre-pastilles.est-defilable {
mask-image: linear-gradient(to bottom, #000 calc(100% - 1.1rem), transparent 100%);
}
.journal-filtre-titre {
display: inline-flex;
align-items: center;
gap: 5px;
flex: 0 0 auto;
min-width: 6.4rem;
min-height: 1.55rem;
font-size: .62rem;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--muted-text);
}
.journal-filtre-vide { font-size: .74rem; }
.journal-table th,
.journal-table td { text-align: center; }
.journal-table td:nth-child(4),
.journal-table th:nth-child(4) { text-align: left; }
.journal-table { max-width: 100%; width: 100%; }
.journal-table td:nth-child(4),
.journal-table th:nth-child(4) { width: 100%; }
.journal-table td:nth-child(2),
.journal-table th:nth-child(2) { white-space: nowrap; }
.frise-rangee { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.frise-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex-basis: 100%; }
.fr-cal {
display: grid;
position: relative;
grid-template-columns: auto repeat(var(--cols), 20px);
grid-template-rows: auto auto auto repeat(7, 20px);
align-items: stretch;
justify-content: start;
overflow-x: auto;
padding: 4px 20px 12px 0;
}
.fr-cal { --cols: var(--cols-mois); }
[data-vue="continu"] .fr-cal { --cols: var(--cols-continu); }
.fr-cal.fr-en-mouvement { overflow: visible; }
.fr-cal .nav-cal-jour {
grid-column: 1;
grid-row: calc(var(--r) + 3);
display: flex;
align-items: center;
justify-content: center;
width: 15px;
height: 20px;
font-size: 0.58rem;
line-height: 1;
color: var(--muted-text);
position: sticky;
left: var(--nom-colle, 0px);
z-index: 2;
background: var(--surface);
}
[data-focus-pose]:focus,
[data-focus-pose]:focus-visible { outline: none; box-shadow: none; }
.fr-cal .fr-coin {
grid-column: 1;
grid-row: 1 / 4;
position: sticky;
left: var(--nom-colle, 0px);
z-index: 2;
background: var(--surface);
}
.fr-annee { grid-row: 1; grid-column: calc(var(--cm) + 1) / span var(--sm); }
[data-vue="continu"] .fr-annee { grid-column: calc(var(--cc) + 1) / span var(--sc); }
.fr-titre { grid-row: 2; grid-column: calc(var(--cm) + 1) / span var(--sm); }
[data-vue="continu"] .fr-titre { grid-column: calc(var(--cc) + 1) / span var(--sc); }
.fr-sem { grid-row: 3; grid-column: calc(var(--cm) + 1); }
[data-vue="continu"] .fr-sem { grid-column: calc(var(--cc) + 1); }
.fr-cell { grid-row: calc(var(--r) + 3); grid-column: calc(var(--cm) + 1); }
[data-vue="continu"] .fr-cell { grid-column: calc(var(--cc) + 1); }
.fr-annee {
display: flex;
align-items: center;
gap: 6px;
padding: 0 3px 3px;
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.08em;
font-variant-numeric: tabular-nums;
line-height: 14px;
color: var(--muted-text);
}
.fr-annee-t {
flex: none;
position: sticky;
left: 22px;
z-index: 1;
padding-right: 4px;
background: var(--surface);
}
.fr-annee::after {
content: '';
flex: 1;
height: 1px;
background: color-mix(in srgb, var(--muted-text) 32%, transparent);
}
.fr-annee-sans-m { display: none; }
[data-vue="continu"] .fr-annee-sans-m { display: flex; }
[data-vue="continu"] .fr-annee-sans-c { display: none; }
.fr-sem-continu { display: none; }
[data-vue="continu"] .fr-sem-mois { display: none; }
[data-vue="continu"] .fr-sem-continu { display: block; }
[data-vue="continu"] .fr-titre-sans-c { display: none; }
.fr-titre {
font-size: 0.6rem;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 18px;
white-space: nowrap;
overflow: hidden;
padding: 0 3px;
color: var(--muted-text);
text-align: center;
}
.fr-sem {
font-size: 0.55rem;
line-height: 14px;
text-align: center;
color: var(--muted-text);
font-variant-numeric: tabular-nums;
}
.fr-cell { display: flex; align-items: center; justify-content: center; }
.fr-cadre.fr-t { border-top: 1px solid var(--grey-border); }
.fr-cadre.fr-b { border-bottom: 1px solid var(--grey-border); }
.fr-cadre.fr-g { border-left: 1px solid var(--grey-border); }
.fr-cadre.fr-d { border-right: 1px solid var(--grey-border); }
.fr-cadre.fr-t.fr-g { border-top-left-radius: 6px; }
.fr-cadre.fr-t.fr-d { border-top-right-radius: 6px; }
.fr-cadre.fr-b.fr-g { border-bottom-left-radius: 6px; }
.fr-cadre.fr-b.fr-d { border-bottom-right-radius: 6px; }
.fr-cell { position: relative; }
.fr-zone { --zh: 0; --zb: 0; }
.fr-zm-h { --zh: 9px; }
.fr-zm-b { --zb: 9px; }
[data-vue="continu"] .fr-zone { --zh: 0; --zb: 0; }
[data-vue="continu"] .fr-zc-h { --zh: 9px; }
[data-vue="continu"] .fr-zc-b { --zb: 9px; }
.fr-zone::before {
content: '';
position: absolute;
left: 1px;
right: 1px;
top: 0;
bottom: 0;
background: var(--zone-fond, var(--zone-teinte, color-mix(in srgb, var(--yellow) 38%, transparent)));
border-radius: var(--zh) var(--zh) var(--zb) var(--zb);
pointer-events: none;
}
.fr-zone-passee { --zone-fond: color-mix(in srgb, var(--yellow) 22%, transparent); }
.fr-zone-gris { --zone-fond: color-mix(in srgb, var(--text) 17%, transparent); }
.fr-zone-gris.fr-zone-passee { --zone-fond: color-mix(in srgb, var(--text) 10%, transparent); }
.fr-zone.fr-zone-vive { --zone-fond: color-mix(in srgb, var(--yellow) 78%, transparent); }
.fr-zone.fr-zone-passee.fr-zone-vive { --zone-fond: color-mix(in srgb, var(--yellow) 58%, transparent); }
.fr-zone.fr-zone-gris.fr-zone-vive { --zone-fond: color-mix(in srgb, var(--text) 34%, transparent); }
.fr-zone.fr-zone-gris.fr-zone-passee.fr-zone-vive { --zone-fond: color-mix(in srgb, var(--text) 24%, transparent); }
.fr-zone.fr-zone-teintee.fr-zone-vive {
--zone-fond: color-mix(in srgb, var(--zone-teinte) 100%, var(--text) 22%);
}
.fr-zone.fr-zone-teintee.fr-zone-visee {
--zone-fond: color-mix(in srgb, var(--zone-teinte) 100%, var(--text) 30%);
}
.fr-zone.fr-zone-visee::before {
box-shadow: 0 0 10px 3px color-mix(in srgb, var(--yellow) 70%, transparent),
0 0 18px 7px color-mix(in srgb, var(--yellow) 38%, transparent);
--gh: 0;
--gb: 0;
clip-path: inset(var(--gh) -22px var(--gb) -22px);
}
.fr-zone-visee.fr-zm-h::before { --gh: -22px; }
.fr-zone-visee.fr-zm-b::before { --gb: -22px; }
[data-vue="continu"] .fr-zone-visee::before { --gh: 0; --gb: 0; }
[data-vue="continu"] .fr-zone-visee.fr-zc-h::before { --gh: -22px; }
[data-vue="continu"] .fr-zone-visee.fr-zc-b::before { --gb: -22px; }
.fr-zone.fr-zone-visee { --zone-fond: color-mix(in srgb, var(--yellow) 70%, transparent); }
.fr-zone.fr-zone-gris.fr-zone-visee { --zone-fond: color-mix(in srgb, var(--text) 38%, transparent); }
tr[data-zone-cle]:hover { background: color-mix(in srgb, var(--yellow) 14%, transparent); }
@media (prefers-reduced-motion: reduce) {
.fr-zone.fr-zone-visee::before { box-shadow: 0 0 6px 3px var(--yellow); }
}
[data-vue="mois"] .fr-cell { --fr-balayage: calc(var(--cm) * 7ms); }
[data-vue="continu"] .fr-cell { --fr-balayage: calc(var(--cc) * 7ms); }
.fr-zone::before { transition: background .12s ease-out, opacity .3s ease var(--fr-balayage, 0s); }
.fr-cell.fr-zone > .nav-case {
transition: background-color .3s ease var(--fr-balayage, 0s),
border-color .3s ease var(--fr-balayage, 0s),
opacity .3s ease var(--fr-balayage, 0s);
}
@media (prefers-reduced-motion: reduce) {
.fr-zone::before,
.fr-cell.fr-zone > .nav-case { transition: none; }
}
.fr-cell > .nav-case { position: relative; }
.frise-temps, .fr-cal { scroll-margin-top: calc(var(--header-h, 90px) + var(--pastille-h, 0px) + 16px); }
.fr-annee, .fr-titre, .fr-sem { cursor: pointer; }
.fr-cal:not([data-sans-zones]) .fr-zone:not(.fr-zone-gris):not(.fr-zone-teintee) > .nav-case:not(.est-aujourdhui) {
--fond-vide: color-mix(in srgb, var(--yellow) 72%, transparent);
border-color: color-mix(in srgb, var(--yellow-dark) 65%, transparent);
}
.fr-cal:not([data-sans-zones]) .fr-zone:not(.fr-zone-gris):not(.fr-zone-teintee) > .nav-case.est-aujourdhui {
--fond-vide: color-mix(in srgb, var(--yellow) 72%, transparent);
}
.fr-cal:not([data-sans-zones]) .fr-zone-teintee > .nav-case:not(.est-aujourdhui) {
--fond-vide: transparent;
border-color: color-mix(in srgb, var(--text) 22%, transparent);
}
.fr-cal:not([data-sans-zones]) .fr-zone-teintee > .nav-case.est-aujourdhui { --fond-vide: transparent; }
.fr-cal:not([data-sans-zones]) .fr-zone:not(.fr-zone-gris):not(.fr-zone-teintee) > .nav-case.est-passe:not(.est-aujourdhui) {
--fond-vide: color-mix(in srgb, var(--yellow) 50%, transparent);
border-color: color-mix(in srgb, var(--yellow-dark) 48%, transparent);
}
.fr-cal:not([data-sans-zones]) .fr-zone-gris > .nav-case { --fond-vide: color-mix(in srgb, var(--text) 20%, transparent); }
.fr-cal:not([data-sans-zones]) .fr-zone-gris > .nav-case.est-passe { --fond-vide: color-mix(in srgb, var(--text) 30%, transparent); }
.fr-bloc {
grid-row: 2 / -1;
grid-column: calc(var(--cm) + 1) / span var(--sm);
border: 1px solid var(--grey-border);
border-radius: var(--rayon-m, 6px);
pointer-events: none;
}
[data-vue="continu"] .fr-bloc { display: none; }
[data-vue="mois"] .fr-cell.fr-cadre,
[data-vue="mois"] .fr-sem.fr-cadre {
border: none;
border-radius: 0;
}
[data-vue="mois"] .fr-titre.fr-titre-cadre { border: none; border-radius: 0; }
.fr-titre-cadre {
border: 1px solid var(--grey-border);
border-bottom: none;
border-radius: var(--rayon-m, 6px) var(--rayon-m, 6px) 0 0;
color: var(--text);
}
[data-vue="continu"] .fr-titre-cadre {
border-radius: var(--rayon, 6px) var(--rayon, 6px) 0 0;
}
@keyframes fr-cadre-apparait { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
.fr-cal.fr-en-mouvement .fr-cadre,
.fr-cal.fr-en-mouvement .fr-bloc,
.fr-cal.fr-en-mouvement .fr-titre-cadre {
animation: fr-cadre-apparait 0.25s ease-out 0.3s backwards;
}
}
.fr-bulle {
position: fixed;
z-index: 90;
width: max-content;
max-width: min(46ch, calc(100vw - 24px));
padding: 7px 10px;
border-radius: var(--rayon, 10px);
background: var(--navy);
color: #fff;
font-size: 0.76rem;
line-height: 1.35;
box-shadow: 0 6px 20px rgb(0 0 0 / 0.22);
pointer-events: none;
opacity: 0;
transition: opacity .12s ease-out;
}
.fr-bulle.est-vue { opacity: 1; }
.fr-bulle.fr-bulle-etroite { max-width: min(24ch, calc(100vw - 24px)); }
.fr-bulle::after {
content: '';
position: absolute;
width: 8px;
height: 8px;
background: inherit;
transform: rotate(45deg);
border-radius: 1px;
}
.fr-bulle[data-cote="haut"]::after   { bottom: -4px; left: var(--fleche-x, 50%); margin-left: -4px; }
.fr-bulle[data-cote="bas"]::after    { top: -4px;    left: var(--fleche-x, 50%); margin-left: -4px; }
.fr-bulle[data-cote="droite"]::after { left: -4px;   top: var(--fleche-y, 50%);  margin-top: -4px; }
.fr-bulle[data-cote="gauche"]::after { right: -4px;  top: var(--fleche-y, 50%);  margin-top: -4px; }
.fr-bulle strong { display: block; color: inherit; font-weight: 600; }
.fr-bulle em { display: block; font-style: normal; opacity: .88; }
.fr-bulle-ligne { display: grid; grid-template-columns: 16px 1fr; column-gap: 8px; align-items: center; opacity: .92; }
.fr-bulle-ligne-tete { margin-top: 0.75em; }
.fr-bulle-ico { display: inline-flex; width: 16px; height: 16px; }
.fr-bulle-ico svg { width: 14px; height: 14px; }
.fr-bulle em i, .fr-bulle strong i { font-style: italic; opacity: .8; }
.fr-bulle-touche {
display: flex;
align-items: center;
gap: 6px;
margin-top: 7px;
opacity: .74;
}
@media (hover: none) {
.fr-bulle-touche { display: none; }
}
.fr-bulle.est-session {
background: var(--navy);
color: #fff;
}
.fr-bulle-alerte {
display: flex;
align-items: flex-start;
gap: 5px;
margin-top: 3px;
font-style: normal;
font-weight: 600;
opacity: 1;
}
.fr-bulle-alerte::before {
content: '';
flex: 0 0 auto;
width: 12px;
height: 12px;
margin-top: 2px;
background-color: currentColor;
-webkit-mask: var(--icone-attention) center / contain no-repeat;
mask: var(--icone-attention) center / contain no-repeat;
}
.fr-bulle em.fr-bulle-lieu {
display: flex;
align-items: center;
gap: 5px;
}
.fr-bulle em.fr-bulle-lieu::before {
content: '';
flex: 0 0 auto;
width: 11px;
height: 11px;
background-color: currentColor;
-webkit-mask: var(--icone-lieu) center / contain no-repeat;
mask: var(--icone-lieu) center / contain no-repeat;
}
.fr-bulle.est-session-grise {
background: var(--navy);
color: #fff;
}
.fr-bulle.est-session em { opacity: .88; }
.fr-bulle.fr-bulle-claire,
.fr-bulle.est-session.fr-bulle-claire { color: #ffffff; }
@media (prefers-reduced-motion: reduce) {
.fr-bulle { transition: none; transform: none; }
}
.fr-repere { color: var(--text) !important; font-weight: 700; border-radius: 4px; }
.fr-cal .fr-sem.fr-repere,
.fr-cal .nav-cal-jour.fr-repere {
background: color-mix(in srgb, var(--yellow) 34%, var(--surface));
}
.fr-cell[data-zone-url],
.fr-cell[data-zone-url] .nav-case { cursor: pointer; }
.frise-session {
--zs-attente:          color-mix(in srgb, var(--text) 30%, transparent);
--zs-confirme:         color-mix(in srgb, var(--yellow) 46%, transparent);
--zs-close:            color-mix(in srgb, var(--text) 62%, transparent);
--zs-session:          color-mix(in srgb, var(--yellow) 95%, transparent);
--zs-apres:            color-mix(in srgb, var(--text) 26%, transparent);
--zs-demande:          color-mix(in srgb, var(--text) 78%, transparent);
--zs-validation:       var(--text);
--zs-attente-perso:    color-mix(in srgb, var(--text) 22%, transparent);
--zs-reservee:         color-mix(in srgb, var(--yellow) 30%, transparent);
--zs-confirmee-perso:  color-mix(in srgb, var(--yellow) 58%, transparent);
--zs-chaud:            color-mix(in srgb, var(--orange-alerte) 55%, transparent);
--zs-financement:      color-mix(in srgb, var(--text) 40%, transparent);
}
.remplissage-cadre { overflow-x: auto; padding-bottom: 6px; margin: 14px 0 10px; }
.remplissage-lignes { display: inline-block; min-width: 100%; }
.remplissage-ligne { display: flex; align-items: center; gap: var(--nom-ecart, 10px); }
.remplissage-cadre .fr-cal { overflow: visible; padding-bottom: 2px; }
.remplissage-ligne:not(.remplissage-session) .fr-titre,
.remplissage-ligne:not(.remplissage-session) .fr-sem { display: none; }
:root {
--zs-etat-brouillon:   color-mix(in srgb, var(--text) 12%, transparent);
--zs-etat-toute-neuve: color-mix(in srgb, var(--success-text) 58%, transparent);
--zs-etat-neuve:       color-mix(in srgb, var(--success-text) 32%, transparent);
--zs-etat-attente:     color-mix(in srgb, var(--text) 22%, transparent);
--zs-etat-presque:     color-mix(in srgb, var(--yellow) 62%, transparent);
--zs-etat-confirmee:   color-mix(in srgb, var(--yellow) 95%, transparent);
--zs-etat-complete:    color-mix(in srgb, var(--error-text) 40%, transparent);
--zs-etat-verrouillee: color-mix(in srgb, var(--yellow-dark) 70%, transparent);
--zs-etat-encours:     color-mix(in srgb, var(--navy) 55%, transparent);
--zs-etat-passee:      color-mix(in srgb, var(--text) 30%, transparent);
--zs-etat-annulee:     color-mix(in srgb, var(--error-text) 26%, transparent);
}
.frise-session { --nom-l: 148px; --nom-ecart: 10px; --nom-colle: 0px; }
.frise-session .remplissage-nom { position: static; }
.frise-cal-nue .fr-annee,
.frise-cal-nue .fr-titre,
.frise-cal-nue .fr-sem,
.frise-cal-nue .fr-coin { display: none; }
.remplissage-suite { margin-top: .35rem; }
.statuts-legende { max-width: 100%; }
.statuts-liste { list-style: none; margin: .2rem 0 .9rem; padding: 0; }
.statuts-liste li {
display: grid;
grid-template-columns: 26px 20px minmax(0, auto) minmax(0, 1fr);
gap: 0 10px;
align-items: baseline;
padding: 5px 0;
font-size: .88rem;
}
@media (max-width: 620px) {
.statuts-liste li { grid-template-columns: 26px 20px minmax(0, 1fr); }
.statuts-quand { grid-column: 3 / -1; }
}
.statuts-bande { height: 12px; border-radius: 999px; align-self: center; }
.statuts-ico { display: inline-flex; color: var(--muted-text); align-self: center; }
.statuts-mot { font-weight: 600; white-space: nowrap; }
.statuts-quand {
color: var(--muted-text);
font-size: .82rem;
justify-self: start;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 620px) { .statuts-quand { white-space: normal; } }
.statuts-liste li.est-projete {
border-top: 1px dashed var(--grey-border);
margin-top: .35rem;
padding-top: .5rem;
}
.remplissage-nom-quand {
display: block;
margin-top: .55rem;
font-weight: 400;
line-height: 1.15;
color: var(--muted-text);
}
.remplissage-nom {
flex: none;
width: var(--nom-l, 148px);
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: center;
position: sticky;
left: 0;
z-index: 3;
background: var(--surface);
font-size: 0.82rem;
font-weight: 600;
padding: var(--fr-nom-retrait, 2px) 8px 2px 0;
box-shadow: var(--nom-ecart, 0px) 0 0 var(--surface);
}
.remplissage-nom .muted { display: block; font-weight: 400; font-size: 0.7rem; }
.remplissage-session { padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--grey-border); }
.cloture-table th { font-size: 0.72rem; line-height: 1.2; }
.cloture-case { text-align: center; }
.cloture-ok { color: var(--success-text); font-weight: 700; }
.cloture-manque { color: var(--orange-alerte); font-size: 0.74rem; white-space: nowrap; }
.cloture-sans, .cloture-inconnu { color: var(--muted-text); }
.cloture-inconnu { font-size: 0.74rem; font-style: italic; }
.admin-table tr.est-bloquant td:first-child { box-shadow: inset 3px 0 0 var(--orange-alerte); }
.cloture-alerte { color: var(--orange-alerte); }
.frise-vues { display: inline-flex; gap: 4px; margin: 0 0 6px; }
.frise-vue {
font: inherit;
font-size: 0.7rem;
padding: 3px 10px;
border: 1px solid var(--grey-border);
border-radius: 999px;
background: var(--grey-bg);
color: var(--text);
cursor: pointer;
}
.frise-vue:hover { border-color: var(--yellow-dark); }
.frise-vue.est-active {
background: var(--yellow);
border-color: var(--yellow-dark);
color: var(--navy);
font-weight: 600;
}
.photo-fiche-ouvrir { position: relative; }
.photo-alerte {
position: absolute;
z-index: 2;
top: 6px;
right: 6px;
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--yellow);
color: var(--navy);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
pointer-events: auto;
}
.photo-meta.est-alerte { color: var(--yellow-dark); font-weight: 600; }
.frise-tete {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px 16px;
margin-bottom: 6px;
}
.frise-tete .frise-vues { margin: 0; }
.fr-titre-c { display: none; }
[data-vue="continu"] .fr-titre-m { display: none; }
[data-vue="continu"] .fr-titre-c { display: inline; }
.fr-cal.fr-en-mouvement { overflow: visible; }
.zzfrise {
display: grid;
grid-template-columns: auto minmax(0, max-content);
align-items: start;
gap: 0 4px;
margin: 10px 0 4px;
}
.zzlettres { display: grid; grid-template-rows: repeat(7, 20px); }
.zzlettres span {
display: flex; align-items: center; justify-content: center;
width: 13px; font-size: 0.58rem; line-height: 1; color: var(--muted-text);
}
.zzmois,
.zzcases { display: grid; grid-template-columns: repeat(var(--cols), 20px); }
.zzcases { grid-template-rows: repeat(7, 20px); grid-auto-flow: column; }
.zzmois span {
font-size: 0.6rem;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 17px;
white-space: nowrap;
overflow: hidden;
padding: 0 3px;
}
.zzc { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; }
.zzcase {
width: 14px; height: 14px;
border: 1px solid var(--grey-border);
border-radius: 3px;
background: color-mix(in srgb, var(--yellow) calc(var(--force, 0) * 1%), var(--grey-bg));
}
.zzA .zzc-b { background: color-mix(in srgb, var(--text) 20%, transparent); }
.zzA .zzm-b {
background: color-mix(in srgb, var(--text) 20%, transparent);
border-radius: 5px 5px 0 0;
color: var(--text);
}
.zzA .zzm-a { color: var(--muted-text); }
.zzB .zzc-b { background: color-mix(in srgb, var(--text) 12%, transparent); }
.zzB .zzc-b:first-child,
.zzB .zzm-b { box-shadow: inset 1px 0 0 color-mix(in srgb, var(--text) 22%, transparent); }
.zzB .zzm-a,
.zzB .zzm-b { color: var(--muted-text); }
.zzB .zzm-b { color: var(--text); }
.zzC .zzc-b { background: color-mix(in srgb, var(--text) 7%, transparent); }
.zzC .zzm-a,
.zzC .zzm-b {
border-radius: 999px;
text-align: center;
font-weight: 600;
}
.zzC .zzm-b { background: color-mix(in srgb, var(--text) 12%, transparent); color: var(--text); }
.zzC .zzm-a { background: color-mix(in srgb, var(--yellow) 26%, transparent); color: var(--text); }
.zzD .zzc-a,
.zzD .zzc-b { background: none; }
.zzD .zzc-b.zb-t { border-top: 1px solid var(--grey-border); }
.zzD .zzc-b.zb-b { border-bottom: 1px solid var(--grey-border); }
.zzD .zzc-b.zb-l { border-left: 1px solid var(--grey-border); }
.zzD .zzc-b.zb-r { border-right: 1px solid var(--grey-border); }
.zzD .zzm { color: var(--muted-text); text-align: center; }
.zzD .zzm-b {
border: 1px solid var(--grey-border);
border-bottom: none;
border-radius: 6px 6px 0 0;
}
.zzD .zzc-b.zb-t.zb-l { border-top-left-radius: 6px; }
.zzD .zzc-b.zb-t.zb-r { border-top-right-radius: 6px; }
.zzD .zzc-b.zb-b.zb-l { border-bottom-left-radius: 6px; }
.zzD .zzc-b.zb-b.zb-r { border-bottom-right-radius: 6px; }
.fiche-epingle { margin-top: 6px; }
.fiche-epingle-on { color: var(--yellow-dark); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.fiche-frise { margin: 14px 0 4px; }
.fil-boite {
max-height: min(58svh, 620px);
overflow-y: auto;
padding-right: 4px;
}
@media (max-height: 900px) { .fil-boite { max-height: 48svh; } }
.lab-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.nv {
display: inline-flex; align-items: center; gap: 6px;
user-select: none;
-webkit-user-select: none;
padding: 6px 14px;
border-radius: 999px;
font-size: 0.85rem;
font-weight: 600;
line-height: 1.4;
white-space: nowrap;
}
.nv-decouvre { background: var(--grey-bg); color: var(--muted-text); box-shadow: inset 0 0 0 1px var(--grey-border); }
.nv-engage   { background: color-mix(in srgb, var(--yellow) 35%, transparent); color: var(--text); box-shadow: inset 0 0 0 1px var(--yellow-dark); }
.nv-fait     { background: var(--success-bg); color: var(--success-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--success-text) 40%, transparent); }
.nv-donne    { background: var(--navy); color: var(--white); }
:root[data-theme="dark"] .nv-donne { background: var(--yellow); color: var(--navy); }
.nv-b svg { flex: none; }
.nv-c { padding-left: 3px; border-radius: 4px 999px 999px 4px; }
.nv-c b {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px; border-radius: 3px;
background: color-mix(in srgb, currentColor 16%, transparent);
font-variant-numeric: tabular-nums;
}
.nv-jauge { display: inline-flex; gap: 2px; }
.nv-jauge i { width: 3px; height: 11px; border-radius: 1px; background: color-mix(in srgb, currentColor 22%, transparent); }
.nv-jauge i.est-plein { background: currentColor; }
.lab-en-situation { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.lab-nom { font-size: 1.6rem; font-weight: 700; }
.nv-e { padding-left: 4px; }
.nv-rond {
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px; border-radius: 50%;
background: color-mix(in srgb, currentColor 15%, transparent);
flex: none;
}
.nv-donne .nv-rond { background: color-mix(in srgb, currentColor 22%, transparent); }
.nv-f { position: relative; overflow: hidden; }
.nv-f::after {
content: '';
position: absolute;
left: 0; bottom: 0;
height: 3px;
width: var(--avance, 0%);
background: currentColor;
opacity: 0.55;
}
.nv-g {
border-radius: 6px;
padding-right: 22px;
clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%);
}
.nv-encoche {
border-radius: 8px;
padding-right: 26px;
-webkit-mask-image: radial-gradient(circle 15px at calc(100% + 1px) 50%, transparent 99%, #000 100%);
mask-image: radial-gradient(circle 15px at calc(100% + 1px) 50%, transparent 99%, #000 100%);
}
.nv-ruban {
border-radius: 8px 999px 999px 8px;
padding-right: 22px;
}
.nv-pointe {
border-radius: 0;
padding-right: 24px;
clip-path: polygon(
3px 0, calc(100% - 1px) 0,
calc(100% - 11px) 50%,
calc(100% - 1px) 100%, 3px 100%,
1px calc(100% - 2px), 0 calc(100% - 6px),
0 6px, 1px 2px);
}
.nv-grand {
padding: 9px 26px 9px 14px;
font-size: 0.88rem;
gap: 8px;
background: var(--f-bg);
color: var(--f-fg);
box-shadow: none;
}
.nv-grand svg { flex: none; }
.nv-grand.est-halo {
box-shadow:
0 0 0 2px color-mix(in srgb, var(--f-bg) 45%, white),
0 2px 10px color-mix(in srgb, var(--f-bg) 85%, transparent),
0 4px 22px color-mix(in srgb, var(--f-bg) 60%, transparent),
0 6px 44px color-mix(in srgb, var(--f-bg) 32%, transparent);
}
:root[data-theme="dark"] .nv-grand.est-halo {
box-shadow:
0 0 0 1px color-mix(in srgb, var(--f-bg) 80%, white),
0 0 18px color-mix(in srgb, var(--f-bg) 80%, transparent),
0 0 40px color-mix(in srgb, var(--f-bg) 45%, transparent);
}
.nv-xl { padding: 11px 30px 11px 16px; }
.lab-barre {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
margin: 12px 0;
padding: 14px 18px;
border-radius: 12px;
background: var(--navy);
color: var(--white);
}
.lab-barre .lab-nom { color: var(--white); font-size: 1.25rem; }
.lab-barre-vide { flex: 1; }
.lab-nom-bloc { display: inline-flex; align-items: center; gap: 10px; }
.lab-forme-nom { margin: 18px 0 4px; font-weight: 600; }
.lab-barre-outils { display: inline-flex; align-items: center; gap: 18px; }
.lab-barre-btn {
display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
font-size: 0.72rem; font-weight: 600; color: var(--white); opacity: 0.9;
}
@media (max-width: 700px) {
.nv-grand { display: none; }
}
.nv-fanion {
position: relative;
border-radius: 9px;
padding-right: 26px;
background: var(--f-bg);
height: 36px;
padding-top: 0;
padding-bottom: 0;
box-sizing: border-box;
}
.nv-fanion.nv-compact {
height: 26px;
padding: 0 14px;
}
.nv-fanion.nv-compact::after { width: 12px; height: 12px; right: -2px; border-radius: 4px; }
.nv-fanion::after {
content: '';
position: absolute;
right: -3px;
top: 50%;
width: 22px;
height: 22px;
transform: translateY(-50%) rotate(45deg);
background: inherit;
border-radius: 6px;
}
.nv-fanion.est-halo,
.nv-fanion.est-halo::after {
box-shadow:
0 2px 10px color-mix(in srgb, var(--f-bg) 85%, transparent),
0 4px 22px color-mix(in srgb, var(--f-bg) 60%, transparent);
}
.fiche-niveau { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.fiche-niveau select {
padding: 4px 8px; border: 1px solid var(--grey-border); border-radius: 8px;
background: var(--surface); color: inherit; font: inherit; font-size: 0.85rem;
}
@media (min-width: 940px) {
.fiche-grille > .fiche-r1 { grid-row: span 1; }
.fiche-grille > .fiche-r2 { grid-row: span 2; }
.fiche-grille > .fiche-r3 { grid-row: span 3; }
.fiche-grille > .fiche-r4 { grid-row: span 4; }
.fiche-grille > .fiche-r6 { grid-row: span 6; }
.fiche-grille > .fiche-r8 { grid-row: span 8; }
.fiche-grille > section > .tiroir-corps {
overflow-y: auto;
padding-top: 12px;
max-height: calc(100% - 34px);   
}
.fiche-grille > section > .tiroir-corps > :first-child { margin-top: 0; }
.fiche-grille > section[data-replie] { grid-row: span 1 !important; }
}
.fiche-grille .tiroir-titre-h { cursor: grab; }
.fiche-grille section.est-attrapee { opacity: 0.45; }
.fiche-grille section.est-attrapee .tiroir-titre-h { cursor: grabbing; }
.liste-filtres { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 6px; }
.liste-filtres-sep { width: 1px; height: 20px; background: var(--grey-border); margin: 0 2px; }
.liste-filtres-aide { font-size: 0.82rem; margin: 0 0 10px; }
.ico-epingle { color: var(--yellow-dark); }
.photo-tag-ajout { display: flex; margin-top: 6px; }
.photo-tag-ajout .cherchable-champ,
.pan-rattacher .cherchable-champ,
.photo-etiquette-ajout input[type="text"] {
padding: 3px 10px;
border-radius: 999px;
font-size: 0.74rem;
background: color-mix(in srgb, var(--navy) 7%, var(--surface));
border: 1px dashed color-mix(in srgb, var(--navy) 45%, transparent);
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.photo-tag-ajout .cherchable-champ:focus,
.pan-rattacher .cherchable-champ:focus,
.photo-etiquette-ajout input[type="text"]:focus {
border-style: solid;
border-color: var(--yellow-dark);
background: color-mix(in srgb, var(--yellow) 26%, var(--surface));
}
.photo-tag-ajout .cherchable-liste,
.pan-rattacher .cherchable-liste { font-size: 0.85rem; }
.pan-rangee .cherchable-liste { max-height: 62vh; }
.photo-etiquette-ajout { display: flex; margin-top: 6px; }
.photo-etiquette-ajout input[type="text"] { flex: 1 1 auto; min-width: 0; }
.photo-tags-liste li.est-retiree { opacity: 0; transform: scale(0.85); }
.photo-lien { display: inline-flex; align-items: center; transition: opacity 0.18s ease, transform 0.18s ease; }
.photo-lien-ico { display: inline-flex; color: var(--muted-text); }
.photo-lien form { display: inline; margin: 0 0 0 4px; }
.photo-lien.est-retiree { opacity: 0; transform: scale(0.85); }
.fiche-photos { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.fiche-photo { display: block; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; border: 1px solid var(--grey-border); }
.fiche-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fiche-photo:hover { border-color: var(--yellow-dark); }
.fiche-photo-bloc { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 132px; }
.fiche-photo-bloc .fiche-photo { width: 132px; height: 99px; }
.fiche-photo-bloc.est-choisie .fiche-photo { border-color: var(--yellow-dark); box-shadow: 0 0 0 2px color-mix(in srgb, var(--yellow) 45%, transparent); }
.fiche-photo-choix { margin: 0; }
.fiche-photo-choisir, .fiche-photo-badge {
display: inline-flex; align-items: center; justify-content: center; gap: 4px;
width: 132px; box-sizing: border-box; padding: 2px 8px; border-radius: 999px;
font: inherit; font-size: 0.72rem; line-height: 1.4; white-space: nowrap;
}
.fiche-photo-choisir { border: 1px solid var(--grey-border); background: var(--surface); color: var(--text); cursor: pointer; }
.fiche-photo-choisir:hover { border-color: var(--yellow-dark); color: var(--yellow-dark); }
.fiche-photo-badge { border: 1px solid var(--yellow); background: var(--yellow); color: var(--navy-dark); font-weight: 600; cursor: help; }
.cherchable-liste li { display: flex; align-items: center; gap: 7px; }
.cherchable-ico { display: inline-flex; color: var(--muted-text); flex: none; }
.cherchable-deja { opacity: 0.55; cursor: default; }
.cherchable-mention { margin-left: auto; font-size: 0.72rem; color: var(--muted-text); font-style: italic; }
.photo-fiche {
transition: box-shadow 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}
.photo-fiche:hover {
background: color-mix(in srgb, var(--yellow) 7%, var(--surface));
box-shadow: 0 6px 18px color-mix(in srgb, var(--text) 14%, transparent);
border-color: color-mix(in srgb, var(--yellow-dark) 45%, var(--grey-border));
}
.lf-groupe { margin: 0 0 14px; }
.lf-tete { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.lf-titre {
font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.03em; color: var(--muted-text);
}
.lf-choix { display: flex; flex-wrap: wrap; gap: 8px; }
.fil-filtre-tout { font-size: 0.78rem; opacity: 0.85; }
.photo-recherche { max-width: 100%; }
.photo-recherche .recherche-champ { width: min(560px, 100%); }
.photo-recherche .recherche-champ input { flex: 1; min-width: 0; }
.lf-titre {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 4px;
border: 0;
border-radius: 6px;
background: transparent;
color: inherit;
font: inherit;
font-weight: 600;
cursor: pointer;
}
.lf-titre:hover { background: color-mix(in srgb, var(--grey-border) 40%, transparent); }
.lf-titre:focus-visible { outline: 2px solid var(--yellow-dark); outline-offset: 2px; }
.lf-n { font-variant-numeric: tabular-nums; color: var(--muted-text); }
.lf-chevron {
width: 0; height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid currentColor;
opacity: .55;
transition: transform .15s;
}
.lf-groupe.est-replie .lf-chevron { transform: rotate(-90deg); }
.lf-groupe.est-replie .lf-choix { display: none; }
.photo-filtres {
border: 1px solid var(--grey-border);
border-radius: 10px;
padding: 10px 14px 4px;
margin: 0 0 18px;
background: var(--surface);
}
.photo-filtres-tete {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 2px 0;
border: 0;
background: none;
font: inherit;
font-weight: 600;
color: inherit;
text-align: left;
cursor: pointer;
}
.photo-filtres-tete:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.photo-filtres.est-replie .lf-chevron { transform: rotate(-90deg); }
.photo-filtres.est-replie .photo-filtres-corps { display: none; }
.photo-filtres.est-replie { padding-bottom: 10px; }
.photo-filtres-resume {
margin-left: auto;
font-weight: 400;
font-size: .8rem;
color: var(--muted-text);
}
.photo-filtres.a-des-filtres .photo-filtres-tete { color: var(--yellow-dark); }
.photo-filtres.a-des-filtres .photo-filtres-resume { color: inherit; }
.photo-etiquettes {
display: flex;
flex-wrap: wrap;
gap: 6px;
list-style: none;
margin: 0 0 8px;
padding: 0;
}
.photo-etiquette {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 6px 2px 10px;
border: 1px solid var(--grey-border);
border-radius: 999px;
font-size: .82rem;
}
@media (max-width: 700px) {
.photo-recherche .recherche-champ { width: 100%; }
}
.photo-lien-legende { display: block; margin: 2px 0 6px 18px; }
.photo-lien-legende input {
width: 100%;
padding: 3px 8px;
font: inherit;
font-size: 0.76rem;
color: inherit;
border: 1px dashed color-mix(in srgb, var(--navy) 35%, transparent);
border-radius: 8px;
background: color-mix(in srgb, var(--navy) 5%, var(--surface));
}
.photo-lien-legende input:focus {
border-style: solid;
border-color: var(--yellow-dark);
background: color-mix(in srgb, var(--yellow) 20%, var(--surface));
}
.photo-espace { display: flex; align-items: flex-start; gap: 18px; }
.photo-espace > .photo-grille { flex: 1; min-width: 0; }
.photo-panneau {
flex: 0 0 400px;
position: sticky;
top: 78px;
max-height: calc(100svh - 96px);
overflow-y: auto;
padding: 14px 16px;
border: 1px solid var(--grey-border);
border-radius: 14px;
background: var(--surface);
box-shadow: 0 8px 26px color-mix(in srgb, var(--text) 10%, transparent);
}
@media (max-width: 1100px) {
.photo-espace { display: block; }
.photo-panneau { position: static; max-height: none; margin-top: 18px; }
.photo-grille > .photo-panneau {
grid-column: 1 / -1;
margin-top: 0;
position: relative;
top: auto;
}
}
.pan-tete { display: flex; align-items: center; gap: 10px; }
.pan-tete h2 { margin: 0; font-size: 1rem; word-break: break-all; flex: 1; }
.pan-fermer {
border: none; background: none; cursor: pointer; font-size: 1.3rem;
line-height: 1; color: var(--muted-text); padding: 0 4px;
}
.pan-fermer:hover { color: var(--yellow-dark); }
.pan-apercu {
width: 100%; max-height: 260px; height: auto;
object-fit: contain; object-position: center;
border-radius: 10px; margin: 10px 0 4px; display: block;
background: var(--grey-bg);
}
.pan-bandeau {
width: 100%; aspect-ratio: 2 / 1; object-fit: cover;
border-radius: 10px; display: block; margin: 6px 0 4px;
border: 1px solid var(--grey-border);
}
.pan-meta { font-size: 0.76rem; margin: 2px 0 8px; flex-wrap: wrap; }
.pan-form { display: grid; gap: 4px; margin-bottom: 4px; }
.pan-form label { font-size: 0.78rem; font-weight: 600; margin-top: 6px; }
.pan-form textarea, .pan-form input[type="text"], .pan-form input[type="url"] {
width: 100%; padding: 6px 9px; font: inherit; font-size: 0.85rem;
border: 1px solid var(--grey-border); border-radius: 8px;
background: var(--surface); color: inherit;
}
.pan-form .btn { margin-top: 10px; justify-self: start; }
.pan-section { padding-top: 4px; margin-top: 4px; }
.pan-section h3 { margin: 0; font-size: 0.82rem; }
.pan-lien { margin-bottom: 10px; }
.pan-lien-nom { display: flex; align-items: center; gap: 6px; margin: 0 0 3px; font-size: 0.85rem; }
.pan-rattacher { display: flex; gap: 8px; margin-top: 10px; }
.pan-rattacher select, .pan-rattacher .cherchable { flex: 1 1 auto; min-width: 0; }
.pan-rattacher .btn { margin: 0; flex: 0 0 auto; }
.photo-legende-2l {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.6em;
margin: 4px 0;
font-size: 0.82rem;
}
.photo-tags-lecture li { cursor: default; }
.photo-tags-lecture button, .photo-tags-lecture form { display: none; }
.photo-espace[data-taille="compact"] .photo-meta.est-alerte { display: block; font-size: 0.72rem; }
.photo-espace[data-taille="compact"] .photo-meta:not(.est-alerte),
.photo-espace[data-taille="compact"] .photo-liens,
.photo-espace[data-taille="compact"] .photo-legende-2l,
.photo-espace[data-taille="compact"] .photo-tags-lecture { display: none; }
.photo-espace[data-taille="compact"] .photo-nom { font-size: 0.76rem; margin: 4px 0 0; }
.photo-espace[data-taille="jointif"] .photo-fiche > *:not(.photo-fiche-ouvrir),
.photo-espace[data-taille="carre"] .photo-fiche > *:not(.photo-fiche-ouvrir) { display: none; }
.photo-espace[data-taille="jointif"] .photo-fiche::after,
.photo-espace[data-taille="carre"] .photo-fiche::after { content: none; }
.photo-espace[data-taille="jointif"] .photo-fiche-ouvrir,
.photo-espace[data-taille="carre"] .photo-fiche-ouvrir { cursor: pointer; }
body.maj-enfoncee .photo-espace[data-taille="jointif"] .photo-fiche-ouvrir,
body.maj-enfoncee .photo-espace[data-taille="carre"] .photo-fiche-ouvrir { cursor: zoom-in; }
.photo-espace[data-taille="jointif"] .photo-fiche,
.photo-espace[data-taille="carre"] .photo-fiche {
border: 0;
border-radius: 0;
background: none;
}
.photo-espace[data-taille="jointif"] .photo-fiche-ouvrir,
.photo-espace[data-taille="carre"] .photo-fiche-ouvrir,
.photo-espace[data-taille="jointif"] .photo-fiche-ouvrir img,
.photo-espace[data-taille="carre"] .photo-fiche-ouvrir img { border-radius: 0; }
.photo-espace[data-taille="jointif"] .photo-grille {
display: block;
columns: 220px 6;
column-gap: 0;
margin-bottom: 30px;
}
.photo-espace[data-taille="jointif"] .photo-fiche {
break-inside: avoid;
margin: 0;
display: block;
}
.photo-espace[data-taille="jointif"] .photo-fiche-ouvrir img {
display: block;
width: 100%;
height: auto;
}
.photo-espace[data-taille="carre"] .photo-grille {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 0;
}
.photo-espace[data-taille="carre"] .photo-fiche-ouvrir {
aspect-ratio: 1;
width: 100%;
height: auto;
}
.photo-espace[data-taille="carre"] .photo-fiche-ouvrir img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pan-croix {
border: none; background: none; cursor: pointer; padding: 0 4px;
font-size: 0.9rem; line-height: 1; color: var(--muted-text); border-radius: 999px;
}
.pan-croix:hover { color: var(--yellow-dark); }
.pan-cadrage-ligne { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.pan-cadrage-ligne input[type="range"] {
flex: 1;
min-width: 0;
accent-color: var(--yellow-dark);
}
.pan-cadrage-ligne input[type="range"]:focus,
.pan-cadrage-ligne input[type="range"]:focus-visible { outline: none; box-shadow: none; }
.pan-enregistrer {
border: 1px solid var(--grey-border); background: var(--grey-bg); color: inherit;
font: inherit; font-size: 0.76rem; padding: 3px 10px; border-radius: 999px; cursor: pointer;
white-space: nowrap;
}
.pan-enregistrer:hover { border-color: var(--yellow-dark); background: color-mix(in srgb, var(--yellow) 22%, var(--surface)); }
.pan-etat { font-size: 0.74rem; color: var(--success-text); white-space: nowrap; }
.photo-legende-2l { -webkit-line-clamp: 1; min-height: 1.3em; }
.liste-filtres-photo { flex-wrap: wrap; }
.liste-filtres-photo .liste-filtres-sep { flex-basis: 100%; height: 0; border: none; margin: 2px 0; }
.photo-densite {
display: inline-flex;
align-items: baseline;
gap: 6px;
position: relative;
top: -2.62px;
}
.fiche-grille > section {
transition: transform 0.18s ease, opacity 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.fiche-grille.est-en-deplacement > section {
border: 1px dashed color-mix(in srgb, var(--yellow-dark) 55%, transparent);
border-radius: 12px;
}
.fiche-grille > section.est-attrapee {
opacity: 0.5;
transform: scale(0.98);
border-style: solid !important;
border-color: var(--yellow-dark) !important;
box-shadow: 0 10px 26px color-mix(in srgb, var(--text) 18%, transparent);
}
.fiche-grille.est-en-deplacement > section:not(.est-attrapee).est-cible {
transform: translateY(4px);
border-color: var(--yellow-dark);
}
.photo-fiche { cursor: pointer; }
.photo-fiche .photo-fiche-ouvrir { cursor: zoom-in; }
.photo-fiche { position: relative; }
.photo-fiche::after {
content: '';
position: absolute;
top: 8px; left: 8px;
width: 22px; height: 22px;
border-radius: 50%;
background: color-mix(in srgb, var(--surface) 92%, transparent) center / 13px 13px no-repeat
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232e4052'%3E%3Cpath d='M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293z'/%3E%3C/svg%3E");
opacity: 0;
transition: opacity 0.15s ease;
pointer-events: none;
}
.photo-fiche:hover::after { opacity: 1; }
.pan-plus {
border: 1px solid var(--grey-border); background: var(--grey-bg); color: var(--muted-text);
font: inherit; font-size: 0.72rem; padding: 2px 9px; border-radius: 999px; cursor: pointer;
white-space: nowrap;
}
.pan-plus:hover { border-color: var(--yellow-dark); color: var(--text); }
.pan-plus[aria-pressed="true"] { background: color-mix(in srgb, var(--yellow) 30%, var(--surface)); border-color: var(--yellow-dark); color: var(--text); }
.pan-nom { display: flex; align-items: center; gap: 8px; }
.pan-nom[hidden], .pan-nom-form[hidden] { display: none; }
.pan-tete h2 { min-width: 8ch; }
.pan-credit-ligne { display: flex; align-items: center; gap: 6px; }
.pan-credit-ligne input { flex: 1; min-width: 0; }
.pan-yo { font-weight: 700; }
.pan-telecharger {
display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px; border-radius: 8px;
border: 1px solid var(--grey-border); color: var(--muted-text); flex: none;
padding: 0; background: none; font: inherit; cursor: pointer;
appearance: none; -webkit-appearance: none;
}
.pan-telecharger:hover { border-color: var(--yellow-dark); color: var(--text); background: var(--grey-bg); }
.pan-chaine { display: inline-flex; align-items: center; padding: 3px 8px; }
::selection { background: transparent; }
p::selection, li::selection, dd::selection, dt::selection,
blockquote::selection, figcaption::selection, td::selection, caption::selection,
h1::selection, h2::selection, h3::selection, h4::selection, h5::selection, h6::selection,
code::selection, pre::selection, address::selection, time::selection,
legend::selection, legend ::selection,
input::selection, textarea::selection,
.card-lecture::selection, .article-corps::selection, .q-verb::selection,
p ::selection, li ::selection, dd ::selection, dt ::selection,
blockquote ::selection, figcaption ::selection, td ::selection, caption ::selection,
h1 ::selection, h2 ::selection, h3 ::selection, h4 ::selection, h5 ::selection, h6 ::selection,
code ::selection, pre ::selection, address ::selection,
.card-lecture ::selection, .article-corps ::selection, .q-verb ::selection {
background: var(--yellow);
color: var(--navy-dark);
}
html::selection, body::selection, main::selection {
background: var(--grey-bg);
color: inherit;
}
body { user-select: none; -webkit-user-select: none; }
p, li, dd, dt, blockquote, figcaption, td, caption,
h1, h2, h3, h4, h5, h6,
code, pre, address, time,
legend,
input, textarea, select, [contenteditable],
.card-lecture, .article-corps, .q-verb {
user-select: text;
-webkit-user-select: text;
}
th { user-select: none; -webkit-user-select: none; }
.fil-filtre > span[aria-hidden] { display: inline-flex; margin-right: 5px; vertical-align: -2px; opacity: 0.75; }
.fil-filtre.est-actif > span[aria-hidden] { opacity: 1; }
.bulle-porteur { display: contents; }
.mot-bulle { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: currentColor; }
.fil-jour-rel { font-weight: 400; opacity: 0.72; }
.nav-case.est-survole {
box-shadow: 0 0 0 2px var(--yellow-dark);
z-index: 2;
}
.nav-jour.est-survole { border-color: var(--yellow-dark); background: color-mix(in srgb, var(--yellow) 30%, var(--grey-bg)); }
.fil-item.est-survole {
background: color-mix(in srgb, var(--yellow) 14%, transparent);
box-shadow: 0 0 0 5px color-mix(in srgb, var(--yellow) 14%, transparent);
border-radius: 6px;
}
.fil-jour.est-survole { color: var(--text); background: color-mix(in srgb, var(--yellow) 30%, var(--surface)); }
.aide-bulle {
display: inline-flex; align-items: center; justify-content: center;
width: 17px; height: 17px; margin-left: 7px;
border-radius: 50%;
border: 1px solid var(--grey-border);
background: var(--surface);
color: var(--muted-text);
font-size: 0.68rem; font-weight: 700; line-height: 1;
cursor: help; vertical-align: middle;
user-select: none;
}
.aide-bulle:hover, .aide-bulle:focus-visible { border-color: var(--yellow-dark); color: var(--text); }
.note-etoile {
color: var(--muted-text);
text-decoration: none;
font-weight: 700;
cursor: help;
padding: 0 3px;
margin: 0 -1px;
}
.note-etoile:hover, .note-etoile:focus-visible { color: var(--text); }
.tiroir-titre-h:has(> .bulle-porteur) { display: flex; align-items: center; }
.tiroir-titre-h:has(> .bulle-porteur) > .tiroir-titre { width: auto; }
@keyframes photo-visee-halo {
from {
box-shadow: 0 0 0 5px rgba(255, 200, 87, 0.55), 0 0 24px 6px rgba(255, 200, 87, 0.4);
border-color: var(--yellow);
}
to {
box-shadow: 0 0 0 0 rgba(255, 200, 87, 0);
border-color: var(--grey-border);
}
}
.photo-fiche.photo-visee { animation: photo-visee-halo 2.4s ease-out; }
@media (prefers-reduced-motion: reduce) {
.photo-fiche.photo-visee { animation: none; border-color: var(--yellow-dark); box-shadow: 0 0 0 3px var(--yellow); }
}
.carte-attente.attente-pleine { inset: 0; aspect-ratio: auto; }
.fiche-photo { position: relative; }
.fiche-photo .carte-attente svg { opacity: 0.22; }
.pan-tete > .pan-nom-form { flex: 1 1 auto; min-width: 0; }
.pan-nom-form { display: flex; align-items: center; gap: 4px; }
.pan-nom-form input.pan-nom-champ {
flex: 1 1 auto;
min-width: 0;
font: inherit;
font-size: 1rem;
font-weight: 700;
color: inherit;
padding: 3px 6px;
border: 1px solid transparent;
border-radius: 8px;
background: transparent;
margin-left: -6px;
}
.pan-nom-form input.pan-nom-champ:hover { border-color: var(--grey-border); }
.pan-nom-form input.pan-nom-champ:focus {
outline: none;
border-color: var(--yellow-dark);
background: var(--surface);
}
.pan-nom-ext { flex: none; font-size: 0.85rem; }
.pan-apercu-btn {
display: block; width: 100%; padding: 0; border: 0; background: none;
cursor: zoom-in; border-radius: 10px;
}
.pan-apercu-btn:focus-visible { outline: 2px solid var(--yellow-dark); outline-offset: 2px; }
.photo-fiche.est-ouverte:hover,
.photo-fiche.est-ouverte {
border-color: var(--yellow);
box-shadow: 0 0 20px 3px rgba(255, 200, 87, 0.38);
transform: scale(1.03);
z-index: 3;
}
.photo-fiche { transition: transform .16s ease, box-shadow .16s ease; }
@keyframes photo-visee-arrive {
from { box-shadow: 0 0 34px 10px rgba(255, 200, 87, 0.6); }
to   { box-shadow: 0 0 20px 3px rgba(255, 200, 87, 0.38); }
}
.photo-fiche.vient-d-arriver { animation: photo-visee-arrive .34s ease-out; }
@media (prefers-reduced-motion: reduce) {
.photo-fiche { transition: none; }
.photo-fiche.est-ouverte { transform: none; }
.photo-fiche.vient-d-arriver { animation: none; }
}
.pan-fermer {
position: absolute;
top: 10px; right: 12px;
z-index: 2;
display: inline-flex; align-items: center; gap: 7px;
padding: 4px 9px 4px 6px;
border: 1px solid var(--grey-border);
border-radius: 999px;
background: var(--surface);
color: var(--muted-text);
cursor: pointer;
line-height: 1;
}
.pan-fermer:hover { border-color: var(--yellow-dark); color: var(--text); }
.pan-esc {
font-family: inherit; font-size: 10px; line-height: 1; letter-spacing: 0.02em;
color: var(--muted-text);
background: var(--grey-bg);
border: 1px solid var(--grey-border);
border-radius: 5px;
padding: 3px 5px;
}
.pan-croix-signe { font-size: 0.95rem; }
.pan-tete { padding-right: 76px; }
.pan-meta { display: flex; align-items: center; gap: 2px; }
.pan-meta .pan-telecharger { padding: 2px 6px; }
.pan-meta-actions { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.photo-liens-liste, .photo-tags-mots { margin-top: 4px; }
.photo-liens-liste li, .photo-tags-mots li { background: var(--grey-bg); }
.photo-doublons { margin: 0 0 26px; }
.photo-doublons h2 { display: flex; align-items: center; gap: 8px; }
.photo-doublon-groupe {
border: 1px solid var(--grey-border);
border-radius: 12px;
padding: 12px 14px;
margin-top: 12px;
background: var(--surface);
}
.photo-doublon-tete { margin: 0 0 10px; font-size: .88rem; color: var(--muted-text); }
.photo-doublon-ou {
padding: 1px 8px;
border-radius: 999px;
background: var(--grey-bg);
color: var(--text);
}
.photo-doublon-ou.est-ailleurs {
background: color-mix(in srgb, var(--yellow) 30%, var(--surface));
border: 1px solid var(--yellow-dark);
}
.photo-doublon-liste {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
gap: 10px;
margin-bottom: 12px;
}
.photo-doublon-choix {
display: flex;
flex-direction: column;
gap: 5px;
padding: 8px;
border: 1px solid var(--grey-border);
border-radius: 10px;
cursor: pointer;
background: var(--grey-bg);
}
.photo-doublon-choix:has(input:checked) {
border-color: var(--yellow-dark);
background: color-mix(in srgb, var(--yellow) 14%, var(--surface));
}
.photo-doublon-choix:has(input:focus-visible) { outline: 2px solid var(--yellow-dark); outline-offset: 2px; }
.photo-doublon-choix img {
width: 100%;
height: 110px;
object-fit: cover;
border-radius: 6px;
display: block;
}
.photo-doublon-nom { font-size: .7rem; word-break: break-all; color: var(--muted-text); }
.photo-doublon-legende { font-size: .82rem; }
.photo-doublon-vide { font-size: .78rem; color: var(--muted-text); font-style: italic; }
.photo-doublon-git { font-size: .74rem; color: var(--muted-text); }
.photo-tags-lecture { flex-wrap: nowrap; overflow: hidden; }
.photo-tags-reste {
flex: none;
font-size: 0.72rem;
color: var(--muted-text);
background: var(--grey-bg);
border: 1px solid var(--grey-border);
border-radius: 999px;
padding: 1px 7px;
cursor: default;
}
.photo-lien.est-serre { font-size: 0.7rem; }
::view-transition-group(photo-zoom) { animation-duration: 340ms; }
::view-transition-old(photo-zoom),
::view-transition-new(photo-zoom) { animation-duration: 340ms; }
.nav-case.est-survole {
box-shadow: 0 0 0 2px var(--yellow-dark), 0 0 10px 3px rgba(255, 200, 87, 0.55);
z-index: 3;
}
.nav-cal-jour.est-survole,
.fr-sem.est-survole {
color: var(--text);
font-weight: 700;
background: color-mix(in srgb, var(--yellow) 45%, transparent);
border-radius: 4px;
}
.carte-lieux { cursor: zoom-out; }
.carte-lieux a, .carte-lieux button, .carte-lieux .carte-pin { cursor: pointer; }
.photo-tags-lecture li.est-rognee { flex: 0 1 auto; }
.photo-tags-lecture li,
.photo-liens .photo-lien {
flex: 0 0 auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.photo-tags-lecture li > span,
.photo-liens .photo-lien > span { flex: none; }
.photo-fiche { scroll-margin-top: 335px; scroll-margin-bottom: 330px; }
.mosaique {
display: grid;
grid-template-columns: repeat(auto-fill, min(var(--mos-tuile), 100%));
grid-auto-rows: var(--mos-tuile);
gap: var(--mos-gap, 18px);
justify-content: center;
--mos-tuile: 420px;
--mos-gap: 16px;
grid-auto-flow: dense;
margin: 8px 0 4px;
}
.mosaique[hidden] { display: none; }
.mosaique-cadre { display: block; }
.mosaique-cadre[hidden] { display: none; }
@media (max-width: 871px) {
.mos-2x1, .mos-2x2 { grid-column: span 1; }
.mos-2x1 { grid-row: span 1; }
}
@media (max-width: 700px) {
.mosaique { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; --mos-gap: 14px; }
.mosaique > .mos-tuile { grid-column: auto !important; grid-row: auto !important; aspect-ratio: auto; }
.mosaique > .mos-tuile .mos-photo { aspect-ratio: 16 / 9; }
.mosaique > .mos-sur-image .mos-photo { position: static; }
.mosaique > .mos-sur-image .mos-corps {
color: inherit; background: none; padding: 12px 14px 13px;
}
.mosaique > .mos-sur-image .mos-surtitre,
.mosaique > .mos-sur-image .mos-chapo,
.mosaique > .mos-sur-image .mos-pied { color: var(--muted-text); }
.mosaique > .mos-sur-image .mos-titre { font-size: 1.05rem; }
}
.mos-tuile {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 14px;
background: var(--surface);
border: 1px solid var(--grey-border);
color: inherit;
text-decoration: none;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.mos-tuile[hidden] { display: none; }
.mos-1x1 { grid-column: span 1; grid-row: span 1; }
.mos-2x1 { grid-column: span 2; grid-row: span 1; }
.mos-1x2 { grid-column: span 1; grid-row: span 2; }
.mos-2x2 { grid-column: span 2; grid-row: span 2; }
.mos-photo { display: block; overflow: hidden; flex: 1 1 auto; min-height: 0; }
.mos-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mos-corps { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px 13px; }
.mos-surtitre {
font-size: 0.62rem; letter-spacing: 0.09em; text-transform: uppercase;
color: var(--muted-text);
}
.mos-titre {
font-weight: 700; font-size: 1.02rem; line-height: 1.25;
text-wrap: balance;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mos-chapo {
font-size: 0.86rem; color: var(--muted-text); line-height: 1.4;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mos-pied { font-size: 0.74rem; color: var(--muted-text); margin-top: 2px; }
.mos-sur-image .mos-photo { position: absolute; inset: 0; }
.mos-sur-image .mos-corps {
position: relative; margin-top: auto; color: #fff;
padding: 40px 16px 16px;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.78));
}
.mos-sur-image .mos-surtitre,
.mos-sur-image .mos-chapo,
.mos-sur-image .mos-pied { color: rgba(255, 255, 255, 0.86); }
.mos-sur-image .mos-titre { font-size: 1.3rem; -webkit-line-clamp: 3; }
.mos-sans-image { background: var(--grey-bg); }
.mos-filigrane {
position: absolute; right: -14px; bottom: -18px;
color: var(--text); opacity: 0.07; pointer-events: none;
}
.mos-sans-image .mos-corps { margin-top: auto; }
@media (hover: hover) and (pointer: fine) {
.mos-tuile:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px color-mix(in srgb, var(--text) 18%, transparent);
}
.mos-tuile:hover .mos-titre { text-decoration: underline; text-decoration-color: var(--yellow); text-underline-offset: 3px; }
}
.mos-tuile:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.blog-intro { text-wrap: balance; }
.blog-outils { align-items: center; gap: 12px; flex-wrap: wrap; }
.blog-rubriques { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.blog-rubriques[hidden] { display: none; }
.pill-n {
margin-left: 5px; font-variant-numeric: tabular-nums; opacity: 0.7; font-size: 0.82em;
}
.blog-masquer-site {
display: inline-flex; align-items: center; gap: 7px;
font-size: 0.84rem; color: var(--muted-text); cursor: pointer; user-select: none;
}
.blog-masquer-site[hidden] { display: none; }
.blog-masquer-site input { accent-color: var(--yellow-dark); cursor: pointer; }
.blog-vide { margin: 22px 0; color: var(--muted-text); }
html.au-clavier .photo-fiche:hover {
background: var(--surface);
box-shadow: none;
border-color: var(--grey-border);
}
html.au-clavier .photo-fiche.est-ouverte:hover {
border-color: var(--yellow);
box-shadow: 0 0 20px 3px rgba(255, 200, 87, 0.38);
}
html.au-clavier .photo-fiche:hover::after { opacity: 0; }
.nav-indice { display: inline-flex; align-items: center; gap: 1px; margin-left: auto; opacity: 0.3; color: var(--muted-text); flex: none; }
.nav-indice svg { display: block; }
[tabindex="0"]:focus-visible .nav-indice, :focus-visible > .nav-indice { opacity: 0.85; color: var(--yellow-dark); }
.nouv-adm-item > summary:focus-visible .nav-indice { opacity: 0.85; color: var(--yellow-dark); }
table[data-nav-lignes] tbody tr:has(a:focus),
table[data-nav-lignes] tbody tr:has(a:focus-visible) {
background: color-mix(in srgb, var(--yellow) 12%, transparent);
box-shadow: inset 3px 0 0 var(--yellow-dark);
}
.article-rubrique {
display: flex; align-items: center; gap: 6px;
font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase;
color: var(--muted-text); margin: 0 0 6px;
}
.article-carte h1 { margin-top: 0; }
.article-chapo {
font-size: 1.16rem; line-height: 1.5; color: var(--text);
margin: 4px 0 14px; text-wrap: pretty;
}
.article-meta {
display: flex; flex-wrap: wrap; gap: 14px;
font-size: 0.82rem; color: var(--muted-text);
padding-bottom: 14px; border-bottom: 1px solid var(--grey-border); margin-bottom: 20px;
}
.article-corps { line-height: 1.65; }
.article-corps { hyphenate-limit-chars: 6 3 3; }
.article-corps p { margin: 0 0 1.05em; }
.illu { margin: 22px 0; }
.illu img { width: 100%; height: auto; display: block; border-radius: 12px; }
.illu figcaption { font-size: 0.82rem; color: var(--muted-text); margin-top: 7px; text-align: center; }
.article-carte { --illu-pad: 32px; }
@media (min-width: 1000px) {
.illu-large {
width: calc(100% + var(--illu-pad));
margin-inline: calc(-0.5 * var(--illu-pad));
}
.illu-pleine {
width: calc(100% + 2 * var(--illu-pad));
margin-inline: calc(-1 * var(--illu-pad));
}
}
.article-ea {
display: inline-block;
vertical-align: baseline;
margin-left: 0.22em;
color: var(--text);
opacity: 0.7;
white-space: nowrap;
transition: color 0.18s ease, opacity 0.18s ease;
}
.article-ea svg {
display: block;
height: 0.52em;
width: auto;
}
@media (hover: hover) and (pointer: fine) {
.article-ea:hover { color: var(--yellow); opacity: 1; }
}
.article-mur {
margin-top: 20px; padding: 20px 22px;
background: var(--grey-bg); border: 1px solid var(--grey-border); border-radius: 14px;
}
.article-mur h2 { margin-top: 0; font-size: 1.1rem; }
.article-mur-note { font-size: 0.82rem; margin-bottom: 0; }
.article-voisins {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
grid-template-areas: "prec tous suiv";
align-items: stretch; gap: 12px;
margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--grey-border);
}
.article-voisins[hidden] { display: none; }
@media (max-width: 700px) {
.article-voisins { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tous" "prec" "suiv"; }
}
.article-voisin-prec { grid-area: prec; }
.article-voisin-tous { grid-area: tous; }
.article-voisin-suiv { grid-area: suiv; }
.article-voisin-tous {
text-align: center; justify-content: center;
border-color: var(--yellow); background: var(--grey-bg);
}
.article-voisin {
display: flex; flex-direction: column; gap: 3px;
padding: 12px 14px; border: 1px solid var(--grey-border); border-radius: 12px;
color: inherit; text-decoration: none;
}
.article-voisin-suiv { text-align: right; }
.article-voisin-sens { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted-text); }
.article-voisin-titre { font-weight: 600; line-height: 1.3; }
@media (hover: hover) and (pointer: fine) {
.article-voisin:hover { border-color: var(--yellow-dark); }
}
.cmd-retour {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 3px 8px 3px 7px;
border: 1px solid var(--grey-border);
border-radius: 999px;
background: color-mix(in srgb, var(--grey-bg) 55%, transparent);
}
.cmd-esc {
font-family: inherit; font-size: 10px; line-height: 1; font-weight: 500;
padding: 3px 6px 2px;
border: 1px solid var(--grey-border);
border-bottom-width: 2px;
border-radius: 5px;
background: var(--grey-bg);
color: var(--muted-text);
}
.btn-retour:hover .cmd-retour,
.pastille-nav:hover .cmd-retour { border-color: var(--yellow-dark); }
@media (hover: none) {
.cmd-esc { display: none; }
.cmd-retour { border: 0; background: none; padding: 0; gap: 0; }
}
.btn-retour-esc {
font-family: inherit; font-size: 10px; line-height: 1; letter-spacing: 0.02em;
color: var(--muted-text);
background: var(--grey-bg);
border: 1px solid var(--grey-border);
border-radius: 5px;
padding: 3px 5px;
margin-left: 2px;
}
.btn-retour:hover .btn-retour-esc { border-color: var(--yellow-dark); color: var(--text); }
@media (hover: none) { .btn-retour-esc { display: none; } }
.blog-adm-recap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 16px; }
.blog-adm-recap .muted { font-size: 0.84rem; }
.blog-adm-item {
padding: 12px 14px;
border-bottom: 1px solid var(--grey-border);
border-radius: 6px;
}
.blog-adm-item:nth-of-type(even) {
background: color-mix(in srgb, var(--text) 3.5%, transparent);
}
.blog-adm-ligne { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.blog-adm-vignette {
width: 108px; height: 72px; object-fit: cover; border-radius: 8px; flex: 0 0 auto;
background: var(--grey-bg);
}
.blog-adm-sans {
display: flex; align-items: center; justify-content: center;
font-size: 0.7rem; color: var(--muted-text);
border: 1px dashed var(--grey-border);
}
.blog-adm-item { outline-offset: -2px; }
.blog-adm-item.est-choisie {
border-left: 3px solid var(--yellow);
background: color-mix(in srgb, var(--yellow) 9%, transparent);
}
.blog-adm-item:focus-visible { outline: 2px solid var(--yellow-dark); }
.blog-adm-texte { flex: 1 1 260px; min-width: 0; }
.blog-adm-texte p { margin: 3px 0; }
.blog-adm-badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 0.8rem; }
.blog-adm-form textarea { width: 100%; font-family: var(--font); }
.blog-adm-visible { display: flex; align-items: center; gap: 8px; margin: 10px 0; }
.carte-formations-liste { max-width: 1040px; margin-inline: auto; }
.formations-table { width: auto; max-width: min(1000px, 100%); }
.formations-table td { white-space: normal; }
.formations-table th:nth-child(2),
.formations-table td:nth-child(2) { min-width: 26ch; max-width: 44ch; }
.header-admin-tab:focus-visible,
html.au-clavier .header-admin-tab:focus {
outline: 2px solid var(--yellow);
outline-offset: 2px;
border-radius: 12px;
}
.theme-toggle:focus-visible,
html.au-clavier .theme-toggle:focus,
.theme-auto:focus-visible,
html.au-clavier .theme-auto:focus,
.header-icon:focus-visible,
html.au-clavier .header-icon:focus {
outline: 2px solid var(--yellow);
outline-offset: 2px;
border-radius: 12px;
}
table[data-nav-lignes] tbody tr a:focus,
table[data-nav-lignes] tbody tr a:focus-visible { outline: none; }
table[data-nav-lignes] tbody tr:hover { background: transparent; }
table[data-nav-lignes] tbody tr:hover:has(a:focus) {
background: color-mix(in srgb, var(--yellow) 12%, transparent);
}
.tile-blog-quoi {
font-size: 0.62rem; letter-spacing: 0.09em; text-transform: uppercase;
color: var(--muted-text);
}
.tile-blog h2 { font-size: 1.02rem; line-height: 1.25; }
.tile-blog p {
display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.tile-blog .intro-close { position: absolute; top: 8px; right: 10px; z-index: 3; }
html.au-clavier .photo-fiche::after,
html.au-clavier .photo-fiche figcaption:hover { opacity: 0; background: transparent; }
.photo-fiche-ouvrir:focus-visible,
html.au-clavier .photo-fiche-ouvrir:focus {
outline: 2px solid var(--yellow-dark);
outline-offset: -2px;
}
main.filigrane-sur-page > .card,
main.filigrane-sur-page .page-with-toc > .card { background-image: none; }
main.filigrane-sur-page[style*="--filigrane"] {
background-image: var(--filigrane-clair);
background-repeat: no-repeat;
background-position: right 40px bottom 40px;
background-size: 230px 230px;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) main.filigrane-sur-page[style*="--filigrane"] {
background-image: var(--filigrane-sombre);
}
}
:root[data-theme="dark"] main.filigrane-sur-page[style*="--filigrane"] { background-image: var(--filigrane-sombre); }
:root[data-theme="light"] main.filigrane-sur-page[style*="--filigrane"] { background-image: var(--filigrane-clair); }
.page-titre-outils { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.page-titre-outils h1, .page-titre-outils h2 { margin: 0; }
.page-titre-outils:has(h2) {
border-bottom: 2px solid var(--yellow);
padding-bottom: 6px;
}
.page-titre-outils h2 { border-bottom: 0; padding-bottom: 0; }
svg.icone-titre { width: auto; vertical-align: baseline; }
.photo-densite .th-bascule {
display: inline-flex;
align-items: center;
gap: 6px;
text-decoration: none;
}
.photo-densite .fil-filtre.est-actif .raccourci-touche {
border-color: currentColor;
color: inherit;
}
.photo-densite .th-bascule svg { display: block; opacity: 0.75; }
.photo-densite .th-bascule[aria-pressed="true"] svg { opacity: 1; }
.photo-espace { position: relative; }
.photo-depot {
position: absolute; inset: 0; z-index: 30;
display: flex; align-items: center; justify-content: center;
background: color-mix(in srgb, var(--yellow) 22%, var(--surface));
border: 2px dashed var(--yellow-dark);
border-radius: 14px;
font-weight: 600; color: var(--text);
pointer-events: none;
}
.photo-fiche.est-orpheline .photo-fiche-ouvrir { background: var(--grey-bg); }
.article-chemin { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.article-chemin .page-retour { margin-bottom: 0; }
.article-chemin-sep { color: var(--grey-border); }
.article-chemin-titre {
font-size: 0.82rem; color: var(--muted-text);
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 700px) { .article-chemin-sep, .article-chemin-titre { display: none; } }
.apercu-duo-carte .abonnes-carte > .carte-lieux {
flex: 1 1 0;
min-height: 0;
display: flex;
flex-direction: column;
}
.apercu-duo-carte .abonnes-carte > .carte-lieux > svg {
flex: 1 1 0;
min-height: 0;
width: auto;
max-width: 100%;
align-self: center;
}
.photo-fiche-ouvrir { border-radius: 12px 12px 0 0; overflow: hidden; }
.photo-fiche-ouvrir img { border-radius: 12px 12px 0 0; }
@media (min-width: 830px) {
.article-bloc { column-count: 2; column-gap: 42px; }
}
@media (min-width: 1400px) {
.article-bloc { column-count: 3; }
}
.article-corps > h2 { margin-top: 1.3em; }
.article-corps > .illu-large,
.article-corps > .illu-pleine { clear: both; }
.article-bloc p { orphans: 3; widows: 3; }
.article-bloc figure { break-inside: avoid; margin-top: 0; }
.article-bloc figcaption { break-inside: avoid; }
.page-with-toc:has(.article-carte) { max-width: none; }
.page-with-toc > .card.article-carte.card-lecture { max-width: none; }
.pan-aide-touche {
margin: 6px 0 0;
font-size: 0.76rem;
color: var(--muted-text);
display: flex; align-items: center; gap: 4px;
}
.pan-aide-touche kbd {
font-family: inherit; font-size: 0.72rem; line-height: 1;
padding: 3px 6px;
border: 1px solid var(--grey-border);
border-radius: 5px;
background: var(--grey-bg);
color: var(--text);
}
.header-fanion { display: inline-flex; align-items: center; margin-left: 7px; vertical-align: middle; }
@media (max-width: 1100px) { .header-fanion { display: none; } }
.header-fanion .fav-bulle-sous { max-width: min(380px, calc(100vw - 32px)); }
.footer-sigle {
display: inline-block;
vertical-align: baseline;
margin-right: 3px;
color: inherit;
transition: color 0.18s ease, transform 0.18s ease;
}
.footer-sigle svg { display: block; height: 0.62em; width: auto; }
.footer-sigle:hover {
color: var(--yellow);
transform: translateY(-1px) scale(1.08);
}
@media (prefers-reduced-motion: reduce) { .footer-sigle { transition: color 0.18s ease; } .footer-sigle:hover { transform: none; } }
.texte-fin {
display: inline-flex;
align-items: center;
vertical-align: -1px;
color: color-mix(in srgb, var(--text) 45%, transparent);
}
.photo-tag-nom { color: inherit; text-decoration: none; }
.photo-tag-nom:hover, .photo-tag-nom:focus-visible { text-decoration: underline; color: var(--yellow-dark); }
.admin-photo-meta-lue { margin: 4px 0 2px; font-size: 0.8rem; line-height: 1.4; }
.admin-photo-legende-lue { color: var(--text); }
.admin-photo-lien-theque { margin: 0 0 6px; font-size: 0.76rem; }
.admin-photo-lien-theque a { display: inline-flex; align-items: center; gap: 5px; color: var(--muted-text); text-decoration: none; }
.admin-photo-lien-theque a:hover { color: var(--yellow-dark); text-decoration: underline; }
.nouv-captures-titre { font-size: 0.95rem; margin: 22px 0 8px; }
.nouv-captures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .nouv-captures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nouv-capture { margin: 0; }
.nouv-capture img {
width: 100%; height: 110px; object-fit: contain;
background: color-mix(in srgb, var(--text) 5%, transparent);
border: 1px solid var(--grey-border); border-radius: 8px;
}
.nouv-capture figcaption { text-align: center; margin-top: 4px; font-size: 0.78rem; }
.nouv-depot {
display: flex; align-items: center; justify-content: center; gap: 8px;
margin: 14px 0 4px; padding: 14px;
border: 1px dashed var(--grey-border); border-radius: 10px;
color: var(--muted-text); font-size: 0.88rem; cursor: pointer;
}
.nouv-depot:hover { border-color: var(--yellow); color: var(--text); }
.nouv-depot input[type="file"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.article-carte { --marge-notes: 0px; }
.article-corps { position: relative; }
@media (min-width: 1180px) {
.article-carte { --marge-notes: 300px; }
.article-corps { padding-right: var(--marge-notes); }
}
@media (min-width: 1500px) {
.article-carte { --marge-notes: 340px; }
}
.note-appel {
border: 0; background: none; padding: 0 1px; margin: 0;
font: inherit; font-size: 0.72em; vertical-align: super; line-height: 0;
color: var(--yellow-dark); font-weight: 700; cursor: pointer;
font-variant-numeric: tabular-nums;
}
.note-appel:hover, .note-appel:focus-visible, .note-appel.est-ouverte {
color: var(--text);
background: color-mix(in srgb, var(--yellow) 45%, transparent);
border-radius: 3px;
}
.article-note {
position: absolute; right: 26px; width: calc(var(--marge-notes) - 48px);
text-wrap: pretty;
hyphens: auto;
font-size: 0.72rem; line-height: 1.5; color: var(--muted-text);
padding-left: 17px; text-indent: -17px;
opacity: 0; transform: translateY(-3px);
transition: opacity 0.18s ease, transform 0.18s ease;
pointer-events: none; z-index: 3;
}
.article-note.est-visible { opacity: 1; transform: none; }
.article-note[hidden] { display: none; }
.article-note b {
color: var(--yellow-dark); font-weight: 700; margin-right: 6px;
font-variant-numeric: tabular-nums;
}
.article-note.note-en-flux {
padding-left: 14px; text-indent: 0;
border-left: 2px solid var(--grey-border);
}
.article-note-lien { pointer-events: auto; }
.article-note-lien {
color: var(--yellow-dark); font-weight: 600; text-decoration: none;
border-bottom: 1px dotted currentColor;
}
.article-note-lien::before { content: ' '; }
.article-note-lien:hover { color: var(--text); }
.article-note.note-en-flux {
position: static; width: auto; margin: 10px 0 4px; transform: none;
}
.article-figure { margin: 1.8em 0; }
.article-figure img { width: 100%; height: auto; border-radius: 8px; }
.article-figure figcaption {
margin-top: 8px; font-size: 0.84rem; color: var(--muted-text); line-height: 1.45;
text-align: center;
}
.article-figure figcaption b { color: var(--text); }
.article-figure figcaption .fig-num { color: var(--yellow-dark); font-weight: 700; }
.article-corps .photo-ouvrable { cursor: zoom-in; }
.cit { margin: 1.8em 0; }
.cit blockquote { margin: 0; }
.cit blockquote p { margin: 0; }
.cit figcaption {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px;
margin-top: 10px; font-size: 0.84rem; color: var(--muted-text);
}
.cit-auteur { font-weight: 700; color: var(--text); }
.cit-role { font-style: normal; }
.cit-role::before { content: '· '; }
.cit-source::before { content: '· '; }
.cit-source cite { font-style: normal; }
.cit-source a { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.cit-source a:hover { color: var(--text); }
@media (max-width: 560px) { .cit-role { display: none; } }
.cit-filet {
padding-left: 16px;
padding-right: 19px;
border-left: 3px solid var(--yellow);
}
.cit-filet blockquote p {
font-style: italic;
font-size: 1.04rem;
line-height: 1.55;
}
.cit blockquote p:first-of-type::before { content: '\00AB\00A0'; }
.cit blockquote p:last-of-type::after { content: '\00A0\00BB'; }
.article-corps .article-demo {
background: color-mix(in srgb, var(--yellow) 16%, transparent);
border-left: 3px solid var(--yellow-dark);
border-radius: 0 6px 6px 0;
padding: 12px 16px;
margin: 0 0 1.4em;
font-size: 0.9rem;
text-align: left;
break-inside: avoid;
}
.page-toc[data-toc-arbre] ul { list-style: none; margin: 0; padding: 0; }
.page-toc[data-toc-arbre] a {
display: block; padding: 3px 0 3px 10px;
border-left: 2px solid transparent;
color: var(--muted-text); text-decoration: none; font-size: 0.84rem; line-height: 1.3;
}
.page-toc[data-toc-arbre] .toc-a-n3 a { padding-left: 20px; font-size: 0.8rem; }
.page-toc[data-toc-arbre] .toc-a-n4 a { padding-left: 30px; font-size: 0.78rem; }
.page-toc[data-toc-arbre] .toc-a-n5 a { padding-left: 40px; font-size: 0.76rem; }
.page-toc[data-toc-arbre] li.est-ouverte > a {
-webkit-text-stroke: 0.25px currentColor;
}
.page-toc[data-toc-arbre] a.est-active,
.page-toc[data-toc-arbre] li.est-ouverte > a.est-active {
color: var(--text);
border-left-color: var(--yellow);
-webkit-text-stroke: 0.6px currentColor;
}
@media (hover: hover) and (pointer: fine) {
.page-toc[data-toc-arbre] a:hover { color: var(--text); }
}
.page-toc[data-toc-arbre] .toc-a-n2 > a {
display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.toc-a-libelle { min-width: 0; }
.toc-a-ind { flex: none; display: flex; align-items: center; }
.toc-a-points { display: none; }          
.toc-a-fraction {
font-size: 0.72rem; font-variant-numeric: tabular-nums;
color: var(--muted-text); letter-spacing: 0.02em;
}
.toc-a-fraction b { color: var(--yellow-dark); font-weight: 700; }
.page-toc[data-toc-arbre] .toc-a-sous {
display: grid; grid-template-rows: 0fr; overflow: hidden; opacity: 0;
transition: grid-template-rows 0.26s ease, opacity 0.2s ease;
}
.page-toc[data-toc-arbre] li.est-ouverte > .toc-a-sous { grid-template-rows: 1fr; opacity: 1; }
.page-toc[data-toc-arbre] .toc-a-clip { min-height: 0; overflow: hidden; }
.page-toc[data-toc-arbre] .toc-a-sous { position: relative; }
.page-toc[data-toc-arbre] li.est-ouverte > .toc-a-sous::before {
content: "";
position: absolute;
top: 3px;
bottom: 3px;
width: 1px;
background: color-mix(in srgb, var(--muted-text) 55%, transparent);
left: 11px;
}
.page-toc[data-toc-arbre] .toc-a-n3.est-ouverte > .toc-a-sous::before { left: 21px; }
.page-toc[data-toc-arbre] .toc-a-n4.est-ouverte > .toc-a-sous::before { left: 31px; }
.toc-a-outils { display: inline-flex; align-items: center; gap: 2px; flex: none; margin-left: auto; }
.toc-a-outil {
border: 0; background: none; padding: 2px; margin: 0; cursor: pointer;
color: var(--muted-text); opacity: 0.6; line-height: 0;
transition: opacity 0.15s ease, transform 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
.toc-a-outil:hover { opacity: 1; color: var(--text); }
}
.toc-a-outil[aria-pressed="true"] { opacity: 1; color: var(--yellow-dark); }
.toc-a-outil[hidden] { display: none; }
[data-toc-tout][aria-pressed="true"] { transform: scaleY(-1); }
[data-toc-large][aria-pressed="true"] { transform: scaleX(-1); }
.page-with-toc.plan-large:has(.page-toc[data-toc-arbre]),
.page-with-toc.plan-large:has(.page-toc-col) { grid-template-columns: minmax(0, 1fr) 340px; }
@media (max-width: 900px) {
.page-with-toc.plan-large:has(.page-toc[data-toc-arbre]),
.page-with-toc.plan-large:has(.page-toc-col) { grid-template-columns: 1fr; }
}
.page-with-toc:has(.page-toc[data-toc-arbre]) { grid-template-columns: minmax(0, 1fr) 240px; }
.page-toc[data-toc-arbre] { width: 100%; box-sizing: border-box; padding-right: 14px; }
@media (max-width: 900px) {
.page-with-toc:has(.page-toc[data-toc-arbre]) { grid-template-columns: 1fr; }
}
.article-corps p[data-num],
.article-corps li[data-num] { position: relative; }
.article-corps .p-num {
position: absolute;
bottom: 100%;
left: 0;
margin-bottom: 1px;
font-size: 0.62rem;
letter-spacing: 0.04em;
font-variant-numeric: tabular-nums;
color: var(--muted-text);
white-space: nowrap;
pointer-events: none;
opacity: 0;
}
@media (hover: hover) and (pointer: fine) {
.article-corps .p-num { transition: opacity 0.25s ease; }
.article-corps p[data-num]:hover .p-num,
.article-corps li[data-num]:hover .p-num { opacity: 0.75; transition-delay: 2s; }
}
.article-corps p:target .p-num,
.article-corps li:target .p-num { opacity: 1; color: var(--yellow-dark); }
.article-corps li[data-num] .p-num { left: 0; }
.cit-ref {
margin-left: auto;
font-size: 0.74rem;
font-variant-numeric: tabular-nums;
color: var(--muted-text);
text-decoration: none;
border-bottom: 1px dotted currentColor;
white-space: nowrap;
opacity: 0;
}
@media (hover: hover) and (pointer: fine) {
.cit-ref { transition: opacity 0.25s ease; }
.cit:hover .cit-ref { opacity: 1; transition-delay: 2s; }
}
.cit-ref:hover { color: var(--yellow-dark); }
.cit:target .cit-ref { opacity: 1; }
@keyframes cit-arrivee {
from { background: color-mix(in srgb, var(--yellow) 22%, transparent); }
to   { background: transparent; }
}
.cit:target { border-radius: 4px; animation: cit-arrivee 2s ease-out 1; }
@media (prefers-reduced-motion: reduce) {
.cit:target { animation: none; background: color-mix(in srgb, var(--yellow) 12%, transparent); }
}
.article-corps .article-liste {
margin: 1em 0;
padding-left: 1.4em;
list-style: none;
}
.article-corps .article-liste li {
position: relative;
margin: 0 0 0.6em;
break-inside: avoid;
}
.article-corps .article-liste li::before {
content: '';
position: absolute;
left: -1em;
top: 0.6em;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--yellow-dark);
}
.article-corps .article-filler {
color: var(--muted-text);
font-style: italic;
border-left: 2px dotted var(--grey-border);
padding-left: 12px;
}
.article-corps :is(h2, h3, h4, h5)[data-rang] { position: relative; }
.article-corps :is(h2, h3, h4, h5)[data-rang]::before {
content: attr(data-rang);
display: block;
height: 1.1em;
margin-bottom: 1px;
margin-bottom: 4px;
font-size: 0.62rem;
letter-spacing: 0.11em;
text-transform: uppercase;
font-weight: 600;
color: var(--muted-text);
white-space: nowrap;
overflow: hidden;
pointer-events: none;
opacity: 0;
}
.article-corps h2[data-rang]::before { color: var(--yellow-dark); }
.article-corps :is(h2, h3, h4, h5)[data-rang].rang-visible::before {
opacity: 1;
transition: opacity 0.35s ease;
}
@media (hover: hover) and (pointer: fine) {
.article-corps :is(h2, h3, h4, h5)[data-rang]::before { transition: opacity 0.25s ease; }
.article-corps :is(h2, h3, h4, h5)[data-rang]:hover::before {
opacity: 1;
transition-delay: 2s;
}
}
.article-corps :is(h2, h3, h4, h5)[data-rang]:target::before { opacity: 1; }
.article-corps[data-mesure-blocs] .article-bloc { position: relative; }
.bloc-mesure {
position: absolute;
bottom: 100%;
margin-bottom: 3px;
right: 0;
z-index: 2;
padding: 1px 7px;
border-radius: 999px;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.04em;
font-variant-numeric: tabular-nums;
color: var(--muted-text);
background: color-mix(in srgb, var(--text) 8%, var(--surface));
border: 1px solid var(--grey-border);
pointer-events: none;
}
.bloc-mesure.est-limite {
color: var(--yellow-dark);
border-color: color-mix(in srgb, var(--yellow-dark) 45%, transparent);
background: color-mix(in srgb, var(--yellow) 16%, var(--surface));
}
.bloc-mesure.est-trop {
color: var(--error-text);
border-color: color-mix(in srgb, var(--error-text) 40%, transparent);
background: color-mix(in srgb, var(--error-text) 10%, var(--surface));
}
.article-corps .article-omis {
color: var(--muted-text);
font-style: italic;
font-size: 0.88rem;
text-align: center;
padding: 8px 0;
border-top: 1px dotted var(--grey-border);
border-bottom: 1px dotted var(--grey-border);
}
.blog-adm-taille { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.article-corps .article-bloc > p,
.article-corps .article-bloc > ul,
.article-corps .article-bloc > figure { margin-top: 0; }
.article-corps:has(h4) h2 {
font-size: 2rem;
font-weight: 800;
line-height: 1.15;
color: var(--text);
margin: 1.6em 0 0.5em;
padding: 0.45em 0 0.35em;
border-top: 2px solid var(--yellow);
border-bottom: 2px solid var(--yellow);
text-wrap: balance;
}
.article-corps:has(h4) h3 {
font-size: 1.5rem;
font-weight: 700;
line-height: 1.25;
color: var(--text);
margin: 2.6em 0 0.5em;
padding-top: 0.5em;
border-top: 3px solid var(--yellow);
text-wrap: balance;
}
.article-corps h3 .titre-num,
.article-corps h2 .titre-num { color: var(--yellow-dark); }
.article-corps:has(h4) h4 {
font-size: 1.12rem;
font-weight: 700;
color: var(--text);
margin: 2.2em 0 0.3em;
padding-top: 0.45em;
background-image: linear-gradient(var(--yellow), var(--yellow));
background-repeat: no-repeat;
background-size: 50% 2px;
background-position: left top;
}
.article-corps h4 .titre-num { color: var(--yellow-dark); }
.article-corps:has(h4) h5 {
font-size: 1.06rem;
font-weight: 700;
color: var(--text);
margin: 2.6em 0 0.3em;
padding-top: 0.4em;
background-image: linear-gradient(color-mix(in srgb, var(--yellow) 65%, transparent),
color-mix(in srgb, var(--yellow) 65%, transparent));
background-repeat: no-repeat;
background-size: 25% 2px;
background-position: left top;
}
.article-corps h2[data-rang]::before { color: var(--yellow-dark); }
.article-corps :is(h2, h3, h4, h5) {
break-after: avoid;
break-inside: avoid;
}
.article-corps figure { break-inside: avoid; }
.article-corps .article-bloc {
margin-bottom: 6rem;
position: relative;
}
.article-corps .article-bloc:not(:last-of-type)::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -3rem;
border-top: 1px dotted color-mix(in srgb, var(--text) 22%, transparent);
}
.article-corps .article-bloc:last-child { margin-bottom: 0; }
.article-corps .article-bloc h4 { break-before: column; }
.article-corps .article-bloc h4:first-child { break-before: auto; }
.article-corps figure.illu-pleine img,
.article-corps figure.illu img {
aspect-ratio: 21 / 9 !important;
width: 100%;
height: auto !important;
object-fit: cover !important;
object-position: center;
}
.article-corps .article-bloc :is(p, li) {
orphans: 3; widows: 3;
text-wrap: pretty;
}
.bloc-mesure.est-compromis {
color: var(--muted-text);
border-style: dashed;
}
.page-toc[data-toc-arbre] .toc-a-num { color: var(--yellow-dark); font-weight: 700; }
@keyframes titre-arrivee {
from { background: color-mix(in srgb, var(--yellow) 40%, transparent);
box-shadow: 0 0 0 10px color-mix(in srgb, var(--yellow) 40%, transparent); }
to   { background: transparent; box-shadow: 0 0 0 10px transparent; }
}
.titre-vise {
border-radius: 4px;
animation: titre-arrivee 2.2s ease-out 1;
}
@media (prefers-reduced-motion: reduce) {
.titre-vise { animation: none; background: color-mix(in srgb, var(--yellow) 22%, transparent); }
}
.ligne-cible { scroll-margin-top: calc(var(--header-h, 92px) + var(--pastille-h, 48px) + 24px); }
@keyframes ligne-arrivee {
0%   { background-color: color-mix(in srgb, var(--yellow) 55%, transparent); }
35%  { background-color: color-mix(in srgb, var(--yellow) 45%, transparent); }
100% { background-color: transparent; }
}
.ligne-cible:target > td,
.ligne-cible:target > th { animation: ligne-arrivee 4s ease-out 1; }
section.ligne-cible:target { animation: ligne-arrivee 4s ease-out 1; }
@media (prefers-reduced-motion: reduce) {
.ligne-cible:target > td,
.ligne-cible:target > th { animation: none; background-color: color-mix(in srgb, var(--yellow) 30%, transparent); }
}
.nouv-empreinte {
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
margin: 10px 0 0;
padding: 8px 10px;
border-radius: 10px;
background: color-mix(in srgb, var(--text) 5%, transparent);
font-size: 0.8rem;
color: var(--muted-text);
}
.nouv-empreinte strong { color: var(--text); font-weight: 600; }
.nouv-emp-part { white-space: nowrap; }
.nouv-empreinte-vide { background: transparent; border: 1px dashed color-mix(in srgb, var(--text) 20%, transparent); font-style: italic; }
.nouv-emp-estime { border-bottom: 1px dotted color-mix(in srgb, var(--text) 35%, transparent); }
.nouv-emp-jour {
font-size: 0.74rem;
color: var(--muted-text);
white-space: nowrap;
}
.nouv-emp-jour-part { white-space: nowrap; cursor: help; }
.nouv-empreinte .nouv-emp-part { cursor: help; }
.nouv-empreinte-champs {
margin-top: 14px;
padding: 10px 12px 12px;
border: 1px solid var(--border);
border-radius: 10px;
}
.nouv-empreinte-champs legend { padding: 0 6px; font-size: 0.8rem; color: var(--muted-text); }
.nouv-empreinte-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.nouv-empreinte-grille label { display: block; font-size: 0.78rem; font-weight: 400; }
.nouv-empreinte-grille input { width: 100%; }
.nouv-empreinte-aide { margin: 8px 0 0; font-size: 0.72rem; color: var(--muted-text); }
@media (max-width: 620px) {
.nouv-empreinte-grille { grid-template-columns: 1fr; }
}
.toc-a-cols { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; }
.toc-a-col {
display: inline-flex; align-items: stretch; gap: 1px;
width: 15px; height: 12px; padding: 1px;
border: 1px solid var(--grey-border); border-radius: 2px;
background: none; cursor: pointer; opacity: 0.55;
transition: opacity 0.15s ease, border-color 0.15s ease;
}
.toc-a-col i { flex: 1; background: var(--muted-text); border-radius: 1px; }
@media (hover: hover) and (pointer: fine) { .toc-a-col:hover { opacity: 1; } }
.toc-a-col[aria-pressed="true"] { opacity: 1; border-color: var(--yellow-dark); }
.toc-a-col[aria-pressed="true"] i { background: var(--yellow-dark); }
.toc-a-col.est-indispo { opacity: 0.25; cursor: not-allowed; border-style: dashed; }
.toc-a-col.est-indispo i { background: var(--muted-text); }
@media (hover: hover) and (pointer: fine) { .toc-a-col.est-indispo:hover { opacity: 0.4; } }
.toc-a-col[hidden] { display: none; }
.mesure-admin {
display: inline-block; margin-right: 5px; padding: 0 4px;
border-radius: 3px; background: var(--navy); color: #fff;
font-size: 0.85em; font-weight: 600; letter-spacing: 0.06em;
text-transform: uppercase; vertical-align: 1px;
}
:root[data-theme="dark"] .mesure-admin { background: var(--yellow); color: var(--navy); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .mesure-admin { background: var(--yellow); color: var(--navy); }
}
.toc-a-mesure {
display: block; margin: 0 0 8px;
font-size: 0.6rem; letter-spacing: 0.04em;
font-variant-numeric: tabular-nums; color: var(--muted-text);
}
.toc-a-mesure.est-limite { color: var(--error-text); }
@media (min-width: 900px) {
.article-bloc { column-count: var(--article-cols, 2); }
}
@media (min-width: 1400px) {
.article-bloc { column-count: var(--article-cols, 3); }
}
.article-corps .article-bloc { margin-bottom: 5rem; }
.cit-role { font-style: normal; color: var(--muted-text); opacity: 0.82; }
.cit figcaption {
display: flex; flex-direction: column; align-items: flex-end;
text-align: right; gap: 2px; flex-wrap: nowrap;
}
.cit figcaption .cit-role::before,
.cit figcaption .cit-source::before { content: none; }
.cit-ref { margin-left: 0; }
.note-attache { white-space: nowrap; }
.article-corps .article-bloc :is(h2, h3, h4, h5) { break-after: avoid; }
.article-corps .article-bloc :is(h2, h3, h4, h5) + :is(p, ul, ol, figure) { orphans: 4; }
.article-note.note-en-flux {
position: absolute; right: auto; margin: 0; padding: 10px 13px;
text-indent: 0; background: var(--surface);
border-left: 2px solid var(--yellow); border-radius: 8px;
box-shadow: 0 6px 22px rgba(0, 0, 0, 0.16);
}
.article-corps[style*="--article-cols: 2"] .cit-filet,
.article-corps[style*="--article-cols: 1"] .cit-filet {
padding-left: 34px; padding-right: 37px;
}
.article-apercu {
position: relative;
columns: 1;
padding-bottom: 40px;
}
.article-apercu::after {
content: '';
position: absolute; left: 0; right: 0; bottom: 0; height: 320px;
background: linear-gradient(to bottom,
color-mix(in srgb, var(--surface) 0%, transparent),
color-mix(in srgb, var(--surface) 55%, transparent) 45%,
color-mix(in srgb, var(--surface) 92%, transparent) 78%,
var(--surface));
pointer-events: none;
}
.article-apercu-reste {
position: relative; z-index: 1;
margin: 0; padding-top: 14px;
text-align: center; font-weight: 600; color: var(--muted-text);
}
.page-toc .toc-lien-n3 { padding-left: 14px; font-size: 0.82rem; }
.page-toc .toc-lien-n4 { padding-left: 28px; font-size: 0.78rem; }
.page-toc .toc-lien-n5 { padding-left: 42px; font-size: 0.76rem; opacity: 0.85; }
.article-carte {
--mesure-multi: 21.5em;
--mesure-1col: 30em;
--article-gap: 42px;
}
.article-bloc { column-gap: var(--article-gap); }
.page-with-toc > .card.article-carte.card-lecture {
max-width: calc(var(--article-cols, 3) * var(--mesure, 21.5em)
+ (var(--article-cols, 3) - 1) * var(--article-gap)
+ 4em
+ var(--marge-notes, 0px));
}
.btn > svg:first-child { margin-inline-end: 6px; }
.toc-signes { position: relative; width: 100%; height: 100%; }
.toc-a-outil .toc-signes { display: block; width: 20px; height: 15px; }
.toc-signe {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
.toc-signe-ico {
animation: toc-ea-1 16s 1 both, toc-ea-2 24s 16s 1 both, toc-ea-3 44s 40s infinite;
}
.toc-signe-touche {
animation: toc-p-1 16s 1 both, toc-p-2 24s 16s 1 both, toc-p-3 44s 40s infinite;
}
@keyframes toc-ea-1 { 0%, 75%   { opacity: 1 } 80%,   95%   { opacity: 0 } 100% { opacity: 1 } }
@keyframes toc-p-1  { 0%, 75%   { opacity: 0 } 80%,   95%   { opacity: 1 } 100% { opacity: 0 } }
@keyframes toc-ea-2 { 0%, 83.3% { opacity: 1 } 86.7%, 96.7% { opacity: 0 } 100% { opacity: 1 } }
@keyframes toc-p-2  { 0%, 83.3% { opacity: 0 } 86.7%, 96.7% { opacity: 1 } 100% { opacity: 0 } }
@keyframes toc-ea-3 { 0%, 90.9% { opacity: 1 } 92.7%, 98.2% { opacity: 0 } 100% { opacity: 1 } }
@keyframes toc-p-3  { 0%, 90.9% { opacity: 0 } 92.7%, 98.2% { opacity: 1 } 100% { opacity: 0 } }
.raccourci-connu .toc-signe { animation: none; }
.raccourci-connu .toc-signe-ico { opacity: 1; }
.raccourci-connu .toc-signe-touche { opacity: 0; }
.page-toc-col.est-ouvert .page-toc-poignee .toc-signe { animation: none; }
.page-toc-col.est-ouvert .page-toc-poignee .toc-signe-ico { opacity: 1; }
.page-toc-col.est-ouvert .page-toc-poignee .toc-signe-touche { opacity: 0; }
@media (hover: none) {
.toc-signe { animation: none; opacity: 1; }
.toc-signe-touche { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.toc-signe { animation: none; }
.toc-signe-touche { opacity: 0; }
}
.page-toc-poignee { display: none; }
.page-with-toc:has([data-toc-auto]),
.page-with-toc:has(.page-toc-col),
.page-with-toc:has(.page-toc-col-reduite),
.page-with-toc:has(.page-toc[data-toc-arbre]),
.page-with-toc.plan-large:has(.page-toc[data-toc-arbre]),
.page-with-toc.plan-large:has(.page-toc-col) {
grid-template-columns: minmax(0, 1fr);
}
:root { --tiroir-bord: 44px; }
@media (max-width: 560px) { :root { --tiroir-bord: 28px; } }
.page-with-toc:has(.page-toc-col) { max-width: 1900px; }
.page-with-toc:has(.article-carte):has(.page-toc-col) { max-width: 2000px; }
.page-with-toc:has(.card-lecture):not(:has(.article-carte)):has(.page-toc-col) { max-width: 800px; }
.page-with-toc:has(.page-toc-col) > .card { margin-inline: auto; }
.page-with-toc:has(.page-toc-col) { padding-right: var(--tiroir-bord, 44px); }
@media (max-width: 560px) { .page-with-toc:has(.page-toc-col) { padding-right: 0; } }
.page-toc-col {
--toc-larg: 220px;
position: fixed;                                  
top: calc(var(--header-bas, var(--header-h, 90px)) + 12px);
right: var(--tiroir-bord, 44px);
z-index: 40;
width: calc(var(--toc-larg) + 28px);
background: var(--surface);
border: 1px solid var(--navy);
border-radius: 10px;
padding: 12px 14px;
box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
transform: translateX(calc(100% + var(--tiroir-bord, 44px)));
transition: transform 0.24s ease;
}
.page-toc-col {
max-height: calc(100svh - var(--header-bas, var(--header-h, 90px)) - 26px);
overflow-y: auto;
overscroll-behavior: contain;
}
@media (max-width: 560px) {
body:has(.pastille-nav-shelf) .page-toc-col,
body:has(.pastille-nav-shelf) .page-toc-poignee {
top: calc(var(--header-bas, var(--header-h, 90px)) + 12px + 52px);
}
body:has(.pastille-nav-shelf) .page-toc-col {
max-height: calc(100svh - var(--header-bas, var(--header-h, 90px)) - 26px - 52px);
}
.page-toc-poignee .toc-signe-ico svg { height: 9px; width: auto; }
}
.page-with-toc:has(.page-toc[data-toc-arbre]) .page-toc-col { --toc-larg: 240px; }
.page-with-toc.plan-large:has(.page-toc[data-toc-arbre]) .page-toc-col,
.page-with-toc.plan-large .page-toc-col { --toc-larg: 340px; }
@media (max-width: 700px) {
.page-toc-col { width: min(300px, 84vw); }
}
.page-toc-col.est-ouvert { transform: translateX(0); }
.page-toc-poignee {
display: flex;
flex-direction: column;
align-items: center;
position: fixed;
right: 0;
top: calc(var(--header-bas, var(--header-h, 90px)) + 12px);
height: min(60vh, 460px);
z-index: 41;
width: var(--tiroir-bord, 44px);
padding: 9px 0 12px;
border: 0;
background: none;
color: var(--yellow-dark);
line-height: 1;
cursor: pointer;
}
.page-toc-poignee .toc-signes { width: 28px; height: 20px; flex: none; }
:root[data-theme="dark"] .page-toc-poignee { color: var(--yellow); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .page-toc-poignee { color: var(--yellow); }
}
:root[data-theme="dark"] .page-toc-col { border-color: var(--yellow-dark); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .page-toc-col { border-color: var(--yellow-dark); }
}
.page-toc-col .page-toc { width: 100%; }
.page-toc.toc-a-mesure * { transition: none !important; animation: none !important; }
.page-toc-col .toc-rail { left: -28px; top: 20px; }
.page-toc-col .intro-close.toc-toggle,
.page-toc-col .page-toc-restore { display: none; }
@media (prefers-reduced-motion: reduce) {
.page-toc-col { transition: none !important; }
}
.redim-voile {
position: fixed; inset: 0; z-index: 60;
display: grid; place-items: center;
background: color-mix(in srgb, var(--grey-bg) 78%, transparent);
-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
opacity: 0; visibility: hidden;
transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}
.redim-voile.est-la { opacity: 1; visibility: visible; transition-delay: 0s; }
.redim-carte {
max-width: min(480px, 86vw);
padding: 26px 30px 24px;
border: 1px solid var(--grey-border); border-radius: 14px;
background: var(--surface); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
text-align: center;
}
.redim-titre { margin: 14px 0 0; font-weight: 600; }
.redim-sous {
margin: 6px 0 0; color: var(--muted-text); font-size: 0.92rem;
text-wrap: balance;
}
.redim-mots {
margin: 14px 0 0; padding-top: 12px;
border-top: 1px solid var(--grey-border);
color: var(--text); font-size: 0.85rem;
font-variant-numeric: tabular-nums;
}
.redim-pages {
margin: 2px 0 0; color: var(--muted-text);
font-size: 0.8rem; font-variant-numeric: tabular-nums;
}
.redim-jauge { display: inline-flex; align-items: flex-end; gap: 5px; height: 26px; }
.redim-jauge i {
width: 7px; height: 100%; border-radius: 2px;
background: var(--yellow-dark);
animation: redim-onde 1.1s ease-in-out infinite;
transform-origin: bottom;
}
.redim-jauge i:nth-child(2) { animation-delay: 0.15s; }
.redim-jauge i:nth-child(3) { animation-delay: 0.3s; }
@keyframes redim-onde {
0%, 100% { transform: scaleY(0.35); opacity: 0.5; }
50%      { transform: scaleY(1);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.redim-voile { transition: none; }
.redim-jauge i { animation: none; transform: scaleY(0.7); opacity: 0.8; }
}
.admin-deux-colonnes {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
gap: 28px;
align-items: start;
}
@media (max-width: 1000px) {
.admin-deux-colonnes { grid-template-columns: 1fr; }
}
.apercu-temoignage { grid-template-columns: 1fr; margin-top: 0; }
.temoignage-admin { margin: 10px 0 0; }
.lien-discret { font-size: 0.78rem; color: var(--muted-text); }
.temoignages-appel { display: flex; justify-content: center; }
.portrait-carte { position: relative; }
.portrait-mien-marque {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
pointer-events: none;
box-shadow: 0 2px 8px rgba(16, 21, 27, 0.28);
}
.portrait-mien {
box-shadow:
0 0 0 1.5px color-mix(in srgb, var(--yellow) 70%, transparent),
0 0 22px color-mix(in srgb, var(--yellow) 38%, transparent),
0 0 60px color-mix(in srgb, var(--yellow) 18%, transparent);
}
@media (hover: hover) and (pointer: fine) {
a.portrait-mien:hover {
box-shadow:
0 0 0 1.5px color-mix(in srgb, var(--yellow) 70%, transparent),
0 0 22px color-mix(in srgb, var(--yellow) 38%, transparent),
0 0 60px color-mix(in srgb, var(--yellow) 18%, transparent),
0 6px 20px rgba(0, 0, 0, 0.09);
}
}
.titre-icone { display: flex; align-items: center; gap: 9px; }
.titre-icone > svg { flex: 0 0 auto; }   
.portrait-corps > *:not(.carte-filigrane):not(.fav-bulle-zone):not(.portrait-interest-btn),
.temoignage > *:not(.carte-filigrane):not(.portrait-mien-marque):not(.temoignage-tete) {
position: relative;
z-index: 1;
}
.temoignage-tete {
position: relative;
z-index: 5;
}
.temoignage:has(.fav-bulle-zone.est-ouverte),
.temoignage:has(.fav-bulle.est-ouverte),
.portrait-carte:has(.fav-bulle-zone.est-ouverte),
.portrait-carte:has(.fav-bulle.est-ouverte) {
z-index: 45;
}
.temoignage { overflow: hidden; }
.portrait-corps .carte-filigrane { right: 10px; bottom: 10px; }
.temoignage .carte-filigrane { right: 12px; bottom: 12px; opacity: 0.05; }
.admin-champs-grille {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 4px 24px;
}
@media (max-width: 900px) {
.admin-champs-grille { grid-template-columns: 1fr; }
}
.apercu-cadre {
padding: 14px 16px;
border: 1px solid var(--grey-border);
border-radius: 12px;
background: var(--grey-bg);
}
.apercu-cadre-titre {
margin: 0 0 10px;
font-size: 0.72rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted-text);
}
.apercu-cadre .apercu-accroche-rendu { border-top: 0; padding-top: 0; }
.usages-outils {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 4px 0 16px;
}
.usage-commande {
border-style: dashed;
text-transform: uppercase;
font-size: 0.68rem;
letter-spacing: 0.04em;
}
.usage-filtre[aria-pressed="false"] {
text-decoration: none;
opacity: 1;
filter: none;
}
.usage-filtre[aria-pressed="true"] {
background: var(--yellow);
border-color: var(--yellow-dark);
color: var(--navy);
font-weight: 700;
}
.temoignage-favcount {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.7rem;
color: var(--muted-text);
font-variant-numeric: tabular-nums;
}
.temoignage-favcount svg { flex: 0 0 auto; }
.champ-ordre-col { max-width: 130px; }
.champ-ordre {
width: 100%;
max-width: 110px;
text-align: center;
font-variant-numeric: tabular-nums;
}
@media (hover: hover) and (pointer: fine) {
.temoignage-tag-lien:hover {
background: color-mix(in srgb, var(--yellow) 26%, var(--grey-bg));
color: var(--text);
}
}
.temoignage-tag-lien { transition: background 0.16s ease, color 0.16s ease; }
.portrait-carte .fav-bulle-zone > .portrait-interest-btn {
position: absolute;
top: 0;
right: 0;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
background: var(--surface);
border: 0;
border-radius: 0 14px 0 16px;
color: var(--muted-text);
box-shadow: -1px 1px 0 color-mix(in srgb, var(--text) 8%, transparent);
filter: none;
}
.portrait-carte .fav-bulle-zone.est-ouverte > .portrait-interest-btn,
.portrait-carte .fav-bulle-zone.fav-attend > .portrait-interest-btn {
position: absolute;
top: 0;
right: 0;
}
.portrait-carte .fav-bulle-zone > .portrait-interest-btn:hover {
color: var(--yellow-dark);
background: var(--surface);
transform: none;
}
.portrait-carte .fav-bulle-zone > .portrait-interest-btn.is-interested { color: var(--yellow-dark, var(--yellow)); }
.tri-temoignages { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.tri-temoin { display: inline-flex; align-items: center; gap: 5px; }
.tri-temoin[aria-pressed="false"] { text-decoration: none; opacity: 1; filter: none; }
.tri-temoin[aria-pressed="true"] {
background: var(--yellow);
border-color: var(--yellow-dark);
color: var(--navy);
font-weight: 700;
}
.admin-table tbody tr[data-veille="1"] {
background-image: repeating-linear-gradient(
-45deg,
transparent 0 7px,
color-mix(in srgb, var(--text) 9%, transparent) 7px 14px
);
}
.admin-table tbody tr[data-veille="1"]:nth-child(even) {
background-color: color-mix(in srgb, var(--text) 9%, transparent);
}
.raccourci-touche {
font-family: inherit;
font-size: 0.62rem;
line-height: 1;
padding: 2px 5px 1px;
border: 1px solid var(--grey-border);
border-bottom-width: 2px;
border-radius: 4px;
color: var(--muted-text);
background: var(--surface);
font-variant-numeric: tabular-nums;
}
@media (hover: none) {
.raccourci-touche { display: none; }
}
.raccourci-touche { margin-right: 5px; }
.admin-table th[data-raccourci-tri]::before {
content: "⇧" attr(data-raccourci-tri);
display: block;
width: fit-content;
margin: 0 auto 4px;
font-family: inherit;
font-size: 0.62rem;
font-weight: 400;
line-height: 1;
padding: 2px 5px 1px;
border: 1px solid var(--grey-border);
border-bottom-width: 2px;
border-radius: 4px;
color: var(--muted-text);
background: var(--surface);
font-variant-numeric: tabular-nums;
text-transform: none;
pointer-events: none;
}
@media (hover: none) {
.admin-table th[data-raccourci-tri]::before { display: none; }
}
}
.champ-raccourci {
flex: 0 0 auto;
font-size: 0.58rem;
padding: 2px 4px 1px;
opacity: .75;
transition: opacity .15s;
}
.recherche-champ:focus-within .champ-raccourci { opacity: 0; }
@media (hover: none) { .champ-raccourci { display: none; } }
.temoignage-admin-zone {
display: inline-flex;
align-items: center;
gap: 8px;
margin-left: auto;
}
.temoignage-tete { align-items: center; }
.temoignage-tete > .temoignage-admin-zone + .temoignage-fav > .temoignage-interest-btn { margin-left: 0; }
.temoignage-favcount { display: inline-flex; align-items: center; gap: 3px; line-height: 1; }
.temoignage-admin-zone {
padding: 2px 7px 2px 3px;
border: 1px dashed color-mix(in srgb, var(--navy) 30%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--navy) 5%, transparent);
}
:root[data-theme="dark"] .temoignage-admin-zone {
border-color: color-mix(in srgb, var(--yellow) 35%, transparent);
background: color-mix(in srgb, var(--yellow) 8%, transparent);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .temoignage-admin-zone {
border-color: color-mix(in srgb, var(--yellow) 35%, transparent);
background: color-mix(in srgb, var(--yellow) 8%, transparent);
}
}
.temoignage-mesure .temoignage-admin-zone { margin-left: 0; }
.temoignage-admin-zone .mesure-admin {
background: transparent;
color: var(--muted-text);
border: 1px solid color-mix(in srgb, var(--muted-text) 30%, transparent);
font-size: 0.62em;
font-weight: 600;
padding: 0 3px;
margin-right: 3px;
vertical-align: 0;
}
.temoignage-admin-zone > * { display: inline-flex; align-items: center; line-height: 1; }
.temoignage-admin-zone .temoignage-admin-bouton a { line-height: 1; text-underline-offset: 2px; }
.temoignage-tag-velo { text-wrap: pretty; }
.portrait-carte .portrait-admin-edit {
position: absolute;
top: 0;
left: 0;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 4px;
height: 26px;
padding: 0 8px 0 6px;
border: 0;
border-radius: 14px 0 16px 0;
background: var(--surface);
color: var(--muted-text);
cursor: pointer;
box-shadow: 1px 1px 0 color-mix(in srgb, var(--text) 8%, transparent);
}
.portrait-carte .portrait-admin-edit {
transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.portrait-carte .portrait-admin-edit:hover,
.portrait-carte .portrait-admin-edit:focus-visible {
background: var(--yellow);
color: var(--navy);
box-shadow: 1px 1px 0 color-mix(in srgb, var(--text) 18%, transparent);
}
.portrait-carte .portrait-admin-edit:hover .mesure-admin,
.portrait-carte .portrait-admin-edit:focus-visible .mesure-admin {
color: var(--navy);
border-color: color-mix(in srgb, var(--navy) 45%, transparent);
}
.portrait-carte .portrait-admin-edit .mesure-admin {
font-size: 0.55rem;
padding: 0 3px;
margin: 0;
background: transparent;
color: color-mix(in srgb, var(--navy) 65%, transparent);
border: 1px solid color-mix(in srgb, var(--navy) 22%, transparent);
}
.portrait-carte .portrait-mien-marque.sous-le-bouton-admin { top: 32px; }
.usages-col-libelle { width: 100%; }
.usages-libelle { width: 100%; min-width: 22rem; }
.usages-col-ordre { width: 1%; white-space: nowrap; }
.usages-ordre { max-width: 4.5rem; }
.temoignage-note {
position: relative;
display: inline-block;
line-height: 0;
flex: 0 0 auto;
}
.temoignage-note .note-fond { color: color-mix(in srgb, var(--text) 22%, transparent); }
.temoignage-note .note-plein {
position: absolute;
top: 0;
left: 0;
overflow: hidden;      
white-space: nowrap;
color: var(--yellow-dark, var(--yellow));
}
:root[data-theme="dark"] .temoignage-note .note-plein,
:root:not([data-theme="light"]) .temoignage-note .note-plein { color: var(--yellow); }
.portrait-hero-titre {
display: flex;
align-items: baseline;   
gap: 10px;
flex-wrap: wrap;
}
.portrait-hero-titre h1 { line-height: 1; }
.portrait-hero-titre > .portrait-fiche-fav > .portrait-interest-btn {
flex: 0 0 auto;
display: inline-block;
width: 22px;
height: 22px;
padding: 0;
border: 0;
background: transparent;
color: var(--white);
filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.45));
align-self: baseline;
line-height: 0;
}
.portrait-hero-titre > .portrait-fiche-fav > .portrait-interest-btn svg {
display: block;
width: 22px;
height: 22px;
}
.lieu-hero-sans-photo .portrait-hero-titre > .portrait-fiche-fav > .portrait-interest-btn {
color: var(--muted-text);
filter: none;
}
.portrait-hero-titre > .portrait-fiche-fav > .portrait-interest-btn {
box-sizing: content-box;
padding: 5px;
margin: -5px;
border-radius: 50%;
position: relative;
top: calc(5px + 11px - 0.5234rem);
}
.portrait-hero-titre > .portrait-fiche-fav > .portrait-interest-btn:hover {
opacity: 1;
background: color-mix(in srgb, var(--white) 22%, transparent);
}
.lieu-hero-sans-photo .portrait-hero-titre > .portrait-fiche-fav > .portrait-interest-btn:hover {
background: color-mix(in srgb, var(--text) 10%, transparent);
}
.portrait-hero-titre > .portrait-fiche-fav > .portrait-interest-btn.is-interested {
color: var(--yellow);
}
:root[data-theme="dark"] .portrait-hero-titre > .portrait-fiche-fav > .portrait-interest-btn.is-interested,
:root:not([data-theme="light"]) .portrait-hero-titre > .portrait-fiche-fav > .portrait-interest-btn.is-interested {
color: var(--yellow);
}
.portrait-hero-titre > .portrait-fiche-mienne {
position: static;
margin: 0;
align-self: center;
flex: 0 0 auto;
position: relative;
top: 0.219rem;
}
:root[data-theme="dark"] .portrait-carte .portrait-admin-edit:not(:hover):not(:focus-visible) .mesure-admin,
:root:not([data-theme="light"]) .portrait-carte .portrait-admin-edit:not(:hover):not(:focus-visible) .mesure-admin {
color: var(--yellow);
border-color: color-mix(in srgb, var(--yellow) 45%, transparent);
}
:root[data-theme="dark"] .portrait-carte .portrait-admin-edit:hover .mesure-admin,
:root[data-theme="dark"] .portrait-carte .portrait-admin-edit:focus-visible .mesure-admin,
:root:not([data-theme="light"]) .portrait-carte .portrait-admin-edit:hover .mesure-admin,
:root:not([data-theme="light"]) .portrait-carte .portrait-admin-edit:focus-visible .mesure-admin {
color: var(--navy);
border-color: color-mix(in srgb, var(--navy) 45%, transparent);
}
.fiche-appel-attente {
display: flex;
align-items: center;
gap: 9px;
margin: 14px 0 0;
padding: 10px 14px;
border-radius: 10px;
border: 1px solid var(--yellow-dark);
background: color-mix(in srgb, var(--yellow) 14%, var(--surface));
font-size: 0.92rem;
}
.fiche-appel-attente svg { flex: 0 0 auto; color: var(--yellow-dark); }
.est-en-cours {
position: relative;
cursor: progress;
opacity: 0.75;
}
.est-en-cours::before {
content: "";
display: inline-block;
width: 0.85em;
height: 0.85em;
margin-right: 0.5em;
vertical-align: -0.1em;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: 50%;
animation: bouton-tourne 0.7s linear infinite;
}
@keyframes bouton-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.est-en-cours::before { animation: none; }
}
.capsule-resume-item[data-jaune] { color: var(--yellow-dark); }
.capsule-resume-item[data-jaune] b { color: inherit; }
.capsule-resume-item[data-jaune] svg { opacity: 1; }
.capsule-resume-detail-item[data-jaune] .capsule-resume-l1 { color: var(--yellow-dark); }
.capsule-resume-detail-item[data-jaune] svg { opacity: 1; color: var(--yellow-dark); }
:root[data-theme="dark"] .capsule-resume-item[data-jaune],
:root[data-theme="dark"] .capsule-resume-detail-item[data-jaune] .capsule-resume-l1,
:root[data-theme="dark"] .capsule-resume-detail-item[data-jaune] svg { color: var(--yellow); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .capsule-resume-item[data-jaune],
:root:not([data-theme="light"]) .capsule-resume-detail-item[data-jaune] .capsule-resume-l1,
:root:not([data-theme="light"]) .capsule-resume-detail-item[data-jaune] svg { color: var(--yellow); }
}
.depl-table code { font-size: 0.86rem; }
.depl-quand { white-space: nowrap; }
.depl-heure { color: var(--muted-text); }
.depl-cible {
display: inline-block;
padding: 1px 8px;
border-radius: 999px;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.02em;
background: color-mix(in srgb, var(--text) 8%, transparent);
color: var(--muted-text);
}
.depl-cible-prod {
background: color-mix(in srgb, var(--yellow) 30%, transparent);
color: var(--text);
}
.depl-duree {
text-align: right;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.depl-total { color: var(--muted-text); }
.depl-barre {
position: relative;
background-image: linear-gradient(
to right,
color-mix(in srgb, var(--yellow) 42%, transparent) 0 var(--part, 0%),
transparent var(--part, 0%)
);
background-repeat: no-repeat;
font-weight: 600;
}
.admin-table tbody tr.depl-echec td,
.admin-table tbody tr.depl-echec:nth-child(even) td {
background: color-mix(in srgb, var(--orange-alerte) 12%, transparent);
}
.depl-interrompu {
margin-left: 6px;
padding: 1px 7px;
border-radius: 999px;
font-size: 0.76rem;
font-weight: 600;
background: color-mix(in srgb, var(--orange-alerte) 22%, transparent);
color: var(--orange-alerte);
}
.migr-table code { font-size: 0.84rem; color: var(--muted-text); }
.migr-compte { font-size: 0.6em; font-weight: 400; margin-left: 10px; cursor: help; white-space: nowrap; }
.migr-posee { cursor: help; white-space: nowrap; }
.depl-nb { font-weight: 600; }
.depl-poids { color: var(--muted-text); }
.depl-inconnu { color: var(--muted-text); font-weight: 400; font-size: 0.85rem; }
.depl-complet {
margin-left: 5px;
padding: 0 6px;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 600;
vertical-align: 1px;
background: color-mix(in srgb, var(--text) 10%, transparent);
color: var(--muted-text);
}
.depl-debit { color: var(--muted-text); }
.depl-lent { color: var(--orange-alerte); font-weight: 600; }
.depl-detail { display: none; }
.depl-groupe:has(.depl-plier-case:checked) .depl-detail { display: table-row; }
.depl-plier {
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
user-select: none;
}
.depl-plier-inerte { cursor: default; }
.depl-plier-case {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
margin: 0;
pointer-events: none;
}
.depl-plier:has(.depl-plier-case:focus-visible) {
outline: 2px solid var(--yellow-dark);
outline-offset: 3px;
border-radius: 4px;
}
.depl-chevron {
display: inline-flex;
color: var(--muted-text);
transform: rotate(-90deg);
transition: transform 0.18s ease;
}
.depl-groupe:has(.depl-plier-case:checked) .depl-chevron { transform: none; }
.depl-chevron-vide { width: 13px; }
.depl-jour-date { font-weight: 600; }
.depl-groupe + .depl-groupe .depl-jour td { border-top: 2px solid var(--grey-border); }
.depl-quand-detail { padding-left: 27px; color: var(--muted-text); }
.depl-cible-n {
margin-left: 5px;
padding-left: 5px;
border-left: 1px solid color-mix(in srgb, currentColor 30%, transparent);
font-variant-numeric: tabular-nums;
}
.depl-charniere td {
padding: 14px 8px 10px;
border-top: 1px dashed var(--grey-border);
border-bottom: none;
color: var(--muted-text);
font-size: 0.86rem;
background: none;
}
.fv-mots { display: inline-grid; }
.fv-mots > span { grid-area: 1 / 1; text-align: center; }
.frise-vacances[aria-pressed="false"] .fv-on,
.frise-vacances[aria-pressed="true"] .fv-off { visibility: hidden; }
.fr-cell[data-vac],
.fr-cell[data-we],
.fr-cell[data-ferie],
.fr-cell[data-pont],
.fr-sem[data-vac-zones] {
transition: background-color .3s ease, background-image .3s ease, color .3s ease;
}
[data-vue="mois"] .fr-cell[data-vac],
[data-vue="mois"] .fr-cell[data-we],
[data-vue="mois"] .fr-cell[data-ferie],
[data-vue="mois"] .fr-cell[data-pont],
[data-vue="mois"] .fr-sem[data-vac-zones] { transition-delay: calc(var(--cm) * 7ms); }
[data-vue="continu"] .fr-cell[data-vac],
[data-vue="continu"] .fr-cell[data-we],
[data-vue="continu"] .fr-cell[data-ferie],
[data-vue="continu"] .fr-cell[data-pont],
[data-vue="continu"] .fr-sem[data-vac-zones] { transition-delay: calc(var(--cc) * 7ms); }
@media (prefers-reduced-motion: reduce) {
.fr-cell[data-vac],
.fr-cell[data-we],
.fr-cell[data-ferie],
.fr-cell[data-pont],
.fr-sem[data-vac-zones],
[data-vue="mois"] .fr-cell[data-vac],
[data-vue="mois"] .fr-cell[data-we],
[data-vue="mois"] .fr-cell[data-ferie],
[data-vue="mois"] .fr-cell[data-pont],
[data-vue="mois"] .fr-sem[data-vac-zones],
[data-vue="continu"] .fr-cell[data-vac],
[data-vue="continu"] .fr-cell[data-we],
[data-vue="continu"] .fr-cell[data-ferie],
[data-vue="continu"] .fr-cell[data-pont],
[data-vue="continu"] .fr-sem[data-vac-zones] { transition: none; transition-delay: 0s; }
}
.sessions-ikigai { max-width: 760px; margin: 8px auto 4px; }
@keyframes fr-halo-arrivee {
0%, 100% { box-shadow: 0 0 0 0 transparent; }
20%, 60% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--yellow) 70%, transparent); }
40%, 80% { box-shadow: 0 0 0 0 transparent; }
}
.fr-cell.fr-zone-halo { animation: fr-halo-arrivee 1.8s ease-in-out 1; z-index: 2; }
@media (prefers-reduced-motion: reduce) {
.fr-cell.fr-zone-halo { animation: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--yellow) 70%, transparent); }
}
.dlg {
border: 1px solid var(--grey-border);
border-radius: 14px;
background: var(--surface);
color: var(--text);
padding: 22px 24px;
max-width: 32rem;
width: calc(100% - 32px);
box-shadow: 0 18px 48px rgb(0 0 0 / .28);
}
.dlg::backdrop { background: rgb(16 21 27 / .55); }
.dlg-corps p { margin: 0 0 10px; text-wrap: pretty; }
.dlg-corps p:last-child { margin-bottom: 0; }
.dlg-corps ol {
margin: 0 0 12px;
padding-left: 1.4rem;
font-variant-numeric: tabular-nums;
}
.dlg-corps ol li { margin: 2px 0; }
.dlg-pied {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 18px;
}
@media (max-width: 480px) {
.dlg-pied { flex-direction: column-reverse; }
.dlg-pied .btn { width: 100%; }
}
.dlg-titre {
border: 0;
padding: 0;
margin: 0 0 12px;
font-size: 1.15rem;
line-height: 1.25;
text-wrap: balance;
}
.fr-bulle.est-passe {
background: color-mix(in srgb, var(--navy) 84%, var(--surface));
color: color-mix(in srgb, #fff 86%, transparent);
}
.fr-bulle[style*="--bulle-teinte"] {
background-image: linear-gradient(
color-mix(in srgb, var(--bulle-teinte) 45%, transparent),
color-mix(in srgb, var(--bulle-teinte) 45%, transparent)
);
}
.fr-bulle.est-vacances {
--bulle-vac: color-mix(in srgb, var(--yellow) 28%, transparent);
background-image: linear-gradient(var(--bulle-vac), var(--bulle-vac));
}
.fr-bulle.est-vacances[style*="--bulle-teinte"] {
background-image:
linear-gradient(var(--bulle-vac), var(--bulle-vac)),
linear-gradient(
color-mix(in srgb, var(--bulle-teinte) 30%, transparent),
color-mix(in srgb, var(--bulle-teinte) 30%, transparent)
);
}
.fr-bulle.est-vacances.est-vacances-entamee {
--bulle-vac: color-mix(in srgb, var(--yellow) 13%, transparent);
}
.pan-pied { margin-top: 18px; text-align: center; }
.pan-supprimer { margin-top: 16px; }
.pan-supprimer .btn { margin: 0; }
.pan-h3-aide { display: flex; align-items: baseline; gap: 6px; }
.pan-h3-aide .aide-bulle { position: relative; top: -1.52px; }
.pan-rangee { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; position: relative; }
.pan-rangee > .photo-tags-liste,
.pan-rangee > .photo-etiquettes,
.pan-rangee > .pan-liens { display: contents; }
.pan-rangee > form { flex: 1 1 auto; min-width: 40%; margin: 0; }
.pan-rangee .pan-lien,
.pan-rangee .photo-etiquette,
.pan-rangee .photo-tags-liste li { margin: 0; }
.pan-rangee .photo-tags-liste li,
.pan-rangee .photo-etiquette,
.pan-rangee .pan-lien-nom {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 2px 6px 2px 9px;
border: 1px solid var(--grey-border);
border-radius: 999px;
background: none;
font-size: 0.8rem;
line-height: 1.5;
}
.pan-rangee .cherchable { position: static; }
.pan-liens { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.pan-liens .pan-lien { flex: 0 0 auto; max-width: 100%; }
.pan-liens .pan-lien:has(.photo-lien-legende:not([hidden])) { flex: 1 1 100%; }
.pan-liens .pan-lien-nom { margin: 0; }
.pan-repli { display: grid; gap: 4px; min-width: 0; }
.pan-repli > summary {
cursor: pointer;
list-style: none;
display: flex;
align-items: baseline;
gap: 6px;
min-width: 0;
font-size: 0.82rem;
font-weight: 600;
color: var(--text);
padding: 2px 0;
}
.pan-repli > summary::-webkit-details-marker { display: none; }
.pan-repli > summary > h3 { font: inherit; margin: 0; display: flex; align-items: baseline; gap: 6px; }
.pan-repli > summary::before {
content: '';
display: inline-block;
width: 0;
height: 0;
flex: 0 0 auto;
align-self: baseline;
border: 4px solid transparent;
border-left-color: var(--muted);
transform: translateY(-1px);
transition: transform 0.15s ease;
}
.pan-repli[open] > summary::before { transform: translateY(1px) rotate(90deg); }
.pan-repli > summary:hover > :first-child { text-decoration: underline; }
.pan-repli > summary:hover .aide-bulle { text-decoration: none; }
.pan-supprimer { display: contents; }
.pan-suppr-declic { color: var(--danger-solid); cursor: pointer; margin: 0; }
.pan-suppr-declic:hover { color: color-mix(in srgb, var(--danger-solid) 80%, black); }
.pan-suppr-oui,
.pan-suppr-quoi { display: none; }
.pan-suppr-armer:checked ~ .pan-suppr-oui {
display: inline-flex;
align-items: center;
margin-left: 6px;
padding: 1px 8px;
border: 1px solid var(--danger-solid);
border-radius: 999px;
background: var(--danger-solid);
color: var(--white);
font-size: 0.72rem;
cursor: pointer;
}
.pan-suppr-armer:checked ~ .pan-suppr-quoi { display: block; flex: 1 1 100%; font-size: 0.72rem; margin-top: 3px; }
.pan-suppr-armer:checked ~ .pan-suppr-declic { color: var(--muted-text); }
.pan-credit-url-ligne { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pan-credit-url-ligne:has(> input[hidden]) { display: none; }
.pan-credit-url-ligne > input { flex: 1 1 auto; min-width: 0; }
.pan-credit-essai { flex: 0 0 auto; }
.pan-cadrage-bloc { display: grid; gap: 4px; }
.pan-cadrage-bloc > summary { cursor: pointer; list-style: none; display: block; }
.pan-cadrage-bloc > summary::-webkit-details-marker { display: none; }
.pan-cadrage-bloc > summary .pan-bandeau { transition: filter 0.15s ease; }
.pan-cadrage-bloc > summary:hover .pan-bandeau { filter: brightness(1.06); }
.pan-cadrage-bloc > summary:focus-visible { outline: 2px solid var(--yellow-dark); outline-offset: 2px; }
.pan-legende-bloc > summary { min-width: 0; }
.pan-legende-apercu {
flex: 1 1 auto;
min-width: 0;
font-weight: 400;
font-size: 0.76rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pan-legende-bloc[open] > summary .pan-legende-apercu { display: none; }
.pan-legende-bloc > summary:has(.pan-plus) .pan-legende-apercu { display: none; }
.pan-legende-bloc > summary .pan-legende-titre { flex: 0 0 auto; white-space: nowrap; }
.pan-legende-bloc > summary .pan-plus { flex: 0 0 auto; font-size: 0.68rem; padding: 2px 7px; }
.pan-credit-bloc { display: grid; gap: 4px; }
.pan-supprimer-note { margin: 8px 0 0; font-size: 0.78rem; line-height: 1.35; }
.pan-meta-fiche { display: inline-flex; margin-left: 7px; vertical-align: -1px; color: var(--muted-text); }
.pan-meta-fiche svg { display: block; }
.labo-plaques-choix { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 14px; }
.labo-plaques-choix .btn { margin: 0; }
.labo-plaque-btn.est-actif { box-shadow: inset 0 0 0 2px var(--yellow-dark); }
.labo-plaques-scene { margin: 0 0 8px; }
.labo-plaques-scene img { width: 100%; height: auto; display: block; border-radius: 10px; background: var(--grey-bg); }
.labo-plaques-scene figcaption { margin-top: 6px; font-size: 0.85rem; }
.labo-plaque-fiche { margin: 16px 0; }
.labo-plaque-fiche h3 { margin: 0 0 4px; font-size: 0.98rem; }
.labo-plaque-retenu {
margin-left: 8px; padding: 1px 7px; border-radius: 999px;
background: var(--yellow); color: var(--navy); font-size: 0.72rem; font-weight: 700;
}
.mails-liste { list-style: none; margin: 0 0 0.6rem; padding: 0; display: grid; gap: 0.35rem; }
.mails-liste li {
padding: 0.45rem 0; border-bottom: 1px solid var(--grey-border);
}
.mails-liste li:last-child { border-bottom: 0; }
.mails-nom { display: block; font-weight: 600; }
.mails-liste li > .muted { display: block; margin-top: 0.1rem; }
.devis-appel { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 0; }
.devis-appel .btn { margin-top: 0; }
.devis-appel .muted { font-size: 0.82rem; }
.devis-appel-notes { margin: 8px 0 4px; }
.devis-appel-notes .btn { margin: 8px 8px 0 0; }
.devis-appel-notes .muted { font-size: 0.82rem; }
.devis-dispos { display: block; font-size: 0.84rem; color: var(--muted-text); margin-top: 2px; }
.mail-relire { margin-top: 0.35rem; }
.mail-relire > summary {
display: inline-block;
cursor: pointer;
font-size: 0.84rem;
color: var(--muted-text);
list-style: none;
border-bottom: 1px dotted var(--grey-border);
}
.mail-relire > summary::-webkit-details-marker { display: none; }
.mail-relire > summary:hover { color: var(--text); }
.mail-cadre {
display: block;
width: 100%;
height: 420px;
margin-top: 0.5rem;
border: 1px solid var(--grey-border);
border-radius: 8px;
background: var(--white);
}
.mail-sans-corps { display: block; margin-top: 0.15rem; font-size: 0.84rem; font-style: italic; }
.tiroirs-mails { display: grid; margin-top: 28px; }
.tiroirs-mails .tiroir-titre-h { margin: 10px 0 0; }
.tiroirs-mails .tiroir-titre-h:first-child { margin-top: 0; }
.tiroirs-mails .tiroir-titre {
width: 100%; display: flex; align-items: center; gap: 10px;
padding: 11px 14px;
background: var(--grey-bg);
border: 1px solid var(--grey-border);
border-radius: 10px;
font-family: inherit; font-size: 0.95rem; font-weight: 600;
color: var(--text); text-align: left; cursor: pointer;
opacity: 1;   
transition: background 0.15s ease, border-color 0.15s ease;
}
.tiroirs-mails .tiroir-titre:hover { background: var(--surface); border-color: var(--yellow-dark); }
.tiroirs-mails .tiroir-titre:focus-visible { outline: 2px solid var(--yellow-dark); outline-offset: 2px; }
.tiroirs-mails .tiroir-chevron {
flex: 0 0 auto; width: 16px; display: inline-flex; justify-content: center;
color: var(--yellow-dark);
}
.tiroirs-mails .tiroir-compte {
margin-left: auto; font-size: 0.78rem; font-weight: 600;
padding: 0.05rem 0.5rem; border-radius: 999px;
background: var(--surface); border: 1px solid var(--grey-border); color: var(--muted-text);
flex: 0 0 auto; white-space: nowrap;
}
.tiroirs-mails .tiroir-titre[aria-expanded="true"] .tiroir-compte { background: var(--grey-bg); }
.tiroirs-mails .tiroir-compte-court { display: none; }
@media (max-width: 620px) {
.tiroirs-mails .tiroir-compte-long { display: none; }
.tiroirs-mails .tiroir-compte-court { display: inline; }
}
.tiroirs-mails .tiroir-titre[aria-expanded="true"] {
background: var(--surface);
border-bottom-color: transparent;
border-bottom-left-radius: 0; border-bottom-right-radius: 0;
box-shadow: inset 3px 0 0 var(--yellow);
}
.tiroirs-mails .tiroir-titre-h:has(.tiroir-titre[aria-expanded="true"]) + .tiroir-corps {
background: var(--surface);
border: 1px solid var(--grey-border); border-top: 0;
border-radius: 0 0 10px 10px;
box-shadow: inset 3px 0 0 var(--yellow);
padding: 2px 14px 14px;
margin-top: -1px;   
}
.tiroirs-mails .tiroir-corps > p:first-child { margin-top: 0.6rem; }
.tiroirs-mails .mails-liste li:first-child { padding-top: 0; }
.admin-table tbody tr.vac-en-cours th,
.admin-table tbody tr.vac-en-cours td,
.admin-table tbody tr.vac-en-cours:nth-child(even) th,
.admin-table tbody tr.vac-en-cours:nth-child(even) td {
background: color-mix(in srgb, var(--yellow) 26%, transparent);
}
.admin-table .badge-confirmed,
.admin-table .badge-almost,
.admin-table .badge-estime { margin-left: 0; }
.vac-saisie {
border: 1px solid var(--grey-border);
border-radius: 10px;
margin: 10px 0;
background: var(--surface);
}
.vac-saisie > summary {
cursor: pointer;
padding: 10px 14px;
font-weight: 600;
}
.vac-saisie[open] > summary { border-bottom: 1px solid var(--grey-border); }
.vac-form { padding: 12px 14px 14px; }
.vac-bloc {
border: 0;
border-top: 1px solid var(--grey-border);
padding: 6px 0 10px;
margin: 0;
}
.vac-bloc:first-of-type { border-top: 0; }
.vac-bloc > legend {
font-weight: 600;
font-size: 0.92rem;
padding: 0 6px 0 0;
}
.vac-ligne {
display: grid;
grid-template-columns: minmax(11rem, max-content) max-content max-content max-content max-content;
justify-content: start;
align-items: center;
gap: 6px 10px;
padding: 3px 0;
}
.vac-ligne .vac-nom { font-size: 0.94rem; }
.vac-ligne label { font-size: 0.86rem; color: var(--muted-text); }
.vac-ligne input[type="date"] { width: auto; margin: 0; }
@media (max-width: 720px) {
.vac-ligne { grid-template-columns: max-content max-content; }
.vac-ligne .vac-nom { grid-column: 1 / -1; font-weight: 600; }
}
.suivis-liste li { display: flex; align-items: baseline; gap: 0.6rem; }
.suivis-liste .mails-nom { flex: 1 1 auto; }
.suivi-mail { flex: 0 0 auto; }
.suivi-mail-btn,
.suivi-mail-marque {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; padding: 0;
border: 1px solid var(--grey-border); border-radius: 999px;
background: var(--surface); color: var(--muted-text);
cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.suivi-mail-btn:hover { border-color: var(--yellow-dark); color: var(--text); }
.suivi-mail-btn:focus-visible { outline: 2px solid var(--yellow-dark); outline-offset: 2px; }
.suivi-mail-marque { width: 22px; height: 22px; cursor: default; }
.suivi-mail-btn[aria-pressed="true"],
.suivi-mail-marque.est-actif {
background: var(--yellow); border-color: var(--yellow-dark); color: var(--navy);
}
.suivi-mail-btn[disabled] { opacity: 0.55; cursor: default; }
.mes-choix-duo { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.mes-choix-duo .suivi-mail-btn { width: 24px; height: 24px; }
.mes-choix-duo .suivi-mail-btn svg { width: 12px; height: 12px; }
.fr-cell[data-ferie]::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 4px;
height: 4px;
border-radius: 50%;
background: color-mix(in srgb, var(--text) 55%, transparent);
z-index: 1;
pointer-events: none;
}
.fr-cal[data-sans-zones] .fr-zone::before { opacity: 0; }
.fr-cal[data-sans-zones] .fr-marque { display: none; }
.fr-cal[data-sans-zones] .fr-cell[data-zone-url],
.fr-cal[data-sans-zones] .fr-cell[data-zone-url] .nav-case { cursor: default; }
.lancer-session { margin: 0 0 1.5rem; }
.lancer-titre { margin-top: 0; }
.lancer-session > .tiroir-corps,
#repousser > .tiroir-corps,
#le-fil-session > .tiroir-corps { padding-top: 1.1rem; }
.lancer-frise { margin: 0 0 1.8rem; }
.lancer-grille { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 1.8rem; align-items: start; }
@media (max-width: 1100px) { .lancer-grille { grid-template-columns: minmax(0, 1fr); } }
.lancer-carte { position: sticky; top: 90px; }
.lancer-carte-boite { margin: .4rem 0 .5rem; }
@keyframes carte-renouvelee { from { opacity: .35; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.lancer-carte-boite.vient-de-changer { animation: carte-renouvelee .22s ease-out; }
@media (prefers-reduced-motion: reduce) { .lancer-carte-boite.vient-de-changer { animation: none; } }
.lancer-carte-vide {
margin: .4rem 0 .5rem;
padding: 1.6rem 1.2rem;
border: 1px dashed var(--grey-border);
border-radius: 12px;
color: var(--muted-text);
font-size: .9rem;
line-height: 1.5;
}
.lancer-champs input[type="text"],
.lancer-champs input[type="date"],
.lancer-champs select,
.lancer-champs textarea {
width: 100%;
box-sizing: border-box;
height: 44px;
line-height: 1.4;
}
.lancer-champs textarea { height: auto; min-height: 88px; resize: vertical; }
.lancer-duree { margin-left: .5rem; font-weight: 400; font-size: .8rem; white-space: nowrap; }
.lancer-duree.est-court { color: var(--error-text); font-weight: 600; }
.lancer-champs input[type="date"].est-court {
border-color: var(--error-text);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--error-text) 18%, transparent);
}
.lancer-temps { margin: 0 0 1.5rem; }
.lancer-frise .fr-cell[data-lancer-apercu]::before { opacity: .35; }
.lancer-frise .fr-cell[data-lancer-apercu] > .nav-case { opacity: .5; }
.lancer-frise .fr-cell[data-jour],
.lancer-frise .fr-cell[data-jour] > .nav-case { cursor: cell; }
.lancer-temps .fr-cell[data-jour],
.lancer-temps .fr-cell[data-jour] > .nav-case { cursor: cell; }
.lancer-temps .fr-cell.est-interdit,
.lancer-temps .fr-cell.est-interdit > .nav-case { cursor: not-allowed; }
.lancer-frise .fr-cell.est-interdit,
.lancer-frise .fr-cell.est-interdit > .nav-case { cursor: not-allowed; }
.lancer-frise-collision { color: var(--error-text); }
#repousser .fr-cell[data-zone-cle^="depart-"]::before {
box-shadow: 0 0 0 2px var(--yellow-dark),
0 0 12px color-mix(in srgb, var(--yellow) 70%, transparent);
}
#repousser .fr-cell[data-zone-cle^="depart-"] { z-index: 1; }
#repousser .fr-cell[data-zone-cle^="avant-"]::before {
box-shadow: 0 0 0 1px color-mix(in srgb, var(--yellow-dark) 55%, transparent),
0 0 6px color-mix(in srgb, var(--yellow) 35%, transparent);
}
#repousser .fr-cell[data-zone-cle^="avant-"] { z-index: 1; }
.remplissage-nom .rn-bloc { display: block; }
.remplissage-nom .rn-bloc + .rn-bloc { margin-top: .5rem; }
.remplissage-nom .rn-quoi { display: block; }
.remplissage-nom .rn-quand { display: block; font-weight: 600; color: var(--text); }
.lancer-frise > .frise-temps { margin-bottom: .3rem; }
[data-report-ecart] {
margin: 0 0 .9rem;
text-align: center;
min-height: 1.5em;
min-height: 1lh;
}
[data-report-ecart].est-court { color: var(--error-text); }
.publier-grille { display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: 1.6rem; align-items: start; margin: .8rem 0 1.2rem; }
@media (max-width: 1100px) { .publier-grille { grid-template-columns: minmax(0, 1fr); } }
.publier-liste { max-height: 420px; overflow: hidden auto; border: 1px solid var(--grey-border); border-radius: 10px; }
.publier-table { margin: 0; width: 100%; table-layout: fixed; font-size: .86rem; }
.publier-table th, .publier-table td { padding: 6px 8px; }
.publier-table thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; font-size: .78rem; }
.publier-table th:first-child, .publier-table td:first-child {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card.card-wide.session-page { max-width: 900px; }
.publier-table th:first-child { width: 34%; }
.publier-table th:not(:first-child) { text-align: center; }
.publier-table td.publier-point { text-align: center; }
.publier-pastille {
display: inline-block;
width: 10px; height: 10px;
border-radius: 50%;
background: var(--yellow);
border: 1px solid var(--yellow-dark);
}
.publier-forme { margin-top: .4rem; }
.remplit-table { margin: .6rem 0 1rem; }
.remplit-etat {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
font-size: .8rem;
white-space: nowrap;
vertical-align: middle;
}
.remplit-etat.est-validee { background: color-mix(in srgb, var(--success-text) 14%, transparent); color: var(--success-text); }
.remplit-etat.est-demandee { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--muted-text); }
.remplit-etat.est-rendue {
background: color-mix(in srgb, var(--error-text) 12%, transparent);
color: var(--text);
border: 1px dashed color-mix(in srgb, var(--error-text) 45%, transparent);
}
.remplit-etat.est-attente { background: color-mix(in srgb, var(--yellow) 24%, transparent); color: var(--text); }
.texte-cogite { color: var(--muted-text); }
@supports (background-clip: text) or (-webkit-background-clip: text) {
.texte-cogite {
background: linear-gradient(90deg,
var(--muted-text) 0 35%,
color-mix(in srgb, var(--text) 90%, transparent) 50%,
var(--muted-text) 65% 100%);
background-size: 220% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: texte-cogite 1.4s linear infinite;
}
}
@keyframes texte-cogite {
from { background-position: 120% 0; }
to   { background-position: -120% 0; }
}
@media (prefers-reduced-motion: reduce) {
.texte-cogite { background: none; color: var(--muted-text); animation: none; }
}
.fr-bulle.est-recouvrement .fr-bulle-alerte { color: color-mix(in srgb, var(--error-text) 30%, #ff9a9a); }
.lancer-champs > div { margin-top: .2rem; }
.lancer-boutons { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 1.2rem 0 .4rem; }
.lancer-boutons .btn { margin: 0; }
.lancer-boutons .hint { margin: 0; }
@keyframes lancement-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.stage-apercu.est-lancee { animation: lancement-arrive .45s ease-out both; }
@media (prefers-reduced-motion: reduce) { .stage-apercu.est-lancee { animation: none; } }
.cgv-page h1 { margin-bottom: 4px; }
.cgv-article { margin-top: 28px; }
.cgv-article h2 { scroll-margin-top: 90px; }
.cgv-article h3 { margin: 18px 0 6px; font-size: 0.98rem; }
.cgv-article p { margin: 0 0 10px; }
.cgv-article p:has(+ ul) { margin-bottom: 2px; }
.cgv-article ul { margin: 0 0 12px; padding-left: 22px; }
.cgv-article li { margin-bottom: 4px; }
.cgv-formulaire {
margin-top: 32px;
padding: 18px 20px;
border: 1px dashed var(--grey-border);
border-radius: 10px;
}
.cgv-formulaire h2 { margin-top: 0; }
.cgv-formulaire > summary {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
list-style: none;
}
.cgv-formulaire > summary::-webkit-details-marker { display: none; }
.cgv-formulaire-titre { font-weight: 600; font-size: 1.05rem; }
.cgv-formulaire > summary::after {
content: "›";
margin-left: auto;
font-size: 1.2rem;
line-height: 1;
color: var(--muted-text);
transition: transform .15s ease;
}
.cgv-formulaire[open] > summary::after { transform: rotate(90deg); }
.cgv-formulaire[open] > summary { margin-bottom: 10px; }
.cgv-formulaire p { margin: 0 0 8px; }
.cgv-formulaire-note { color: var(--muted-text); font-style: italic; }
.cgv-manque {
margin: 18px 0;
padding: 10px 16px;
border-radius: 10px;
border: 1px solid var(--grey-border);
background: var(--grey-bg);
font-size: 0.9rem;
}
.cgv-manque > summary {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
list-style: none;
color: var(--muted-text);
}
.cgv-manque > summary::-webkit-details-marker { display: none; }
.cgv-manque > summary::after {
content: "›";
margin-left: auto;
font-size: 1.1rem;
line-height: 1;
transition: transform .15s ease;
}
.cgv-manque[open] > summary::after { transform: rotate(90deg); }
.cgv-manque[open] > summary { margin-bottom: 8px; }
.cgv-manque ul { margin: 8px 0 0; padding-left: 20px; }
.cgv-manque .mesure-admin { margin-right: 6px; vertical-align: 1px; }
.cgv-page .doc-mel,
.cgv-formulaire .doc-mel {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
}
.cgv-page .doc-mel:hover { color: var(--navy-dark); }
.parrain-code {
font-size: 1.6rem;
font-weight: 700;
letter-spacing: .08em;
font-variant-numeric: tabular-nums;
color: var(--navy);
margin: 4px 0 14px;
}
:root[data-theme="dark"] .parrain-code { color: var(--yellow); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .parrain-code { color: var(--yellow); }
}
.cagnotte-table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 0.92rem; }
.cagnotte-table th {
text-align: left;
font-size: 0.78rem;
font-weight: 600;
color: var(--muted-text);
padding: 0 10px 5px 0;
border-bottom: 1px solid var(--grey-border);
}
.cagnotte-table td { padding: 7px 10px 7px 0; border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent); }
.cagnotte-num { text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; padding-right: 10px !important; }
.cagnotte-table th.cagnotte-num, .cagnotte-table td.cagnotte-num { text-align: center; }
.cagnotte-bilan-pied {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin: 12px 0 0;
}
.cagnotte-part {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 10px 8px 9px;
border-radius: 10px;
border: 1px solid transparent;
text-align: center;
}
.cagnotte-part-somme { font-size: 1.35rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cagnotte-part-mot { font-size: .8rem; }
.cagnotte-part.est-dispo   { background: color-mix(in srgb, #4e9a86 22%, var(--surface)); border-color: color-mix(in srgb, #2f6d5c 45%, transparent); }
.cagnotte-part.est-attente { background: color-mix(in srgb, var(--yellow) 30%, var(--surface)); border-color: var(--yellow-dark); }
.cagnotte-part.est-depense { background: var(--grey-bg); border-color: var(--grey-border); color: var(--muted-text); }
@media (max-width: 520px) {
.cagnotte-bilan-pied { grid-template-columns: 1fr; }
}
.cagnotte-attente td { color: var(--muted-text); }
.cagnotte-table tfoot td { border-bottom: 0; padding-top: 10px; }
.cagnotte-table tfoot tr:first-child td { border-top: 2px solid var(--yellow-dark); font-weight: 600; }
.cagnotte-bilan { font-size: 1.05rem; margin: 0 0 22px; }
.cagnotte-bloc { margin: 0 0 26px; padding: 0 18px 14px; border: 1px solid var(--grey-border); border-radius: 12px; overflow: hidden; }
.cagnotte-bloc h3 {
display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
margin: 0 -18px 10px; padding: 11px 18px;
font-size: 1.02rem;
background: var(--grey-bg);
border-bottom: 1px solid var(--grey-border);
}
.cagnotte-bloc h3 .cagnotte-code { margin-left: auto; }
.cagnotte-grille {
display: grid;
grid-template-columns: repeat(auto-fill, min(580px, 100%));
justify-content: start;
gap: 14px;
align-items: start;
}
.cagnotte-grille > .cagnotte-bloc { margin: 0; min-width: 0; }
.cagnotte-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82rem; color: var(--muted-text); }
.cagnotte-somme { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.cagnotte-bloc .cagnotte-table { margin: 6px 0 0; }
.espace-beta { margin: 0 0 8px; }
.qsj-portrait {
float: right; width: 300px; max-width: 40%;
margin: 0 0 18px 22px; padding: 0;
}
.qsj-portrait img {
display: block; width: 100%; height: auto; border-radius: 12px;
}
.qsj-portrait .iki-scene { margin-top: 10px; }
.qsj-portrait figcaption {
font-size: .78rem; color: var(--muted-text); text-align: center; margin-top: 2px;
}
@media (max-width: 760px) {
.qsj-portrait { float: none; width: auto; max-width: 420px; margin: 0 auto 18px; }
}
.qsj-jeu { margin-top: 10px; }
.qsj-jeu > label { display: block; font-size: .82rem; color: var(--muted-text); margin-bottom: 5px; }
.qsj-jeu-ligne { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; }
.qsj-jeu-ligne input[type="text"] {
flex: 1 1 220px; min-width: 0;
border: 1px solid var(--grey-border); border-radius: 8px;
background: var(--surface); color: var(--text);
font-family: inherit; font-size: .9rem; padding: 7px 12px;
}
.qsj-jeu-ligne .btn { margin-top: 0; }
.qsj-jeu-msg { margin: 6px 0 0; font-size: .84rem; color: var(--muted-text); }
#lien-deconnexion { margin-top: 10px; }
.fiche-fin-condition {
border-color: var(--orange-alerte);
background: color-mix(in srgb, var(--orange-alerte) 10%, var(--surface));
align-items: flex-start;
}
.fiche-fin-condition svg { color: var(--orange-alerte); margin-top: 2px; }
.fiche-fin-autres { margin: 8px 0 0; font-size: .88rem; }
.alertes-liste { display: flex; flex-direction: column; gap: 2px; margin-top: 18px; }
.alertes-ligne {
display: grid; grid-template-columns: 1fr auto; gap: 4px 16px;
align-items: baseline;
padding: 12px 14px; border-radius: 10px;
background: color-mix(in srgb, var(--surface) 70%, transparent);
border: 1px solid var(--grey-border);
}
.alertes-ligne.est-vide { opacity: .55; }
.alertes-quoi strong { display: block; }
.alertes-quoi .muted { font-size: .82rem; }
.alertes-combien { text-align: right; white-space: nowrap; }
.alertes-envoi { grid-column: 1 / -1; margin-top: 8px; }
.alertes-envoi > summary { cursor: pointer; font-size: .88rem; width: fit-content; }
.alertes-envoi form { margin-top: 10px; }
.alertes-envoi label { display: block; font-size: .82rem; color: var(--muted-text); margin-bottom: 5px; }
.alertes-envoi textarea {
width: 100%; border: 1px solid var(--grey-border); border-radius: 8px;
background: var(--surface); color: var(--text);
font-family: inherit; font-size: .9rem; padding: 8px 10px; margin-bottom: 10px;
}
.vz-accepter-attente {
margin: 14px 0; padding: 12px 15px; border-radius: 10px;
border: 1px solid var(--grey-border);
background: color-mix(in srgb, var(--surface) 70%, transparent);
font-size: .92rem;
}
.vz-ech-bientot {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
margin: 0 0 18px;
}
.vz-ech-bientot .btn[disabled] { margin-top: 0; }
.vz-ech-bientot .muted { font-size: .84rem; }
.vz-ajust-etapes {
margin: 0 0 16px; padding-left: 22px;
font-size: .92rem; color: var(--text);
}
.vz-ajust-etapes li { margin-bottom: 7px; }
.vz-rappel {
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid var(--grey-border);
}
.vz-rappel-tel { margin: 0 0 10px; }
.vz-rappel input { max-width: 460px; }
.vz-manquantes {
margin: 18px 0 0;
padding-left: 12px;
border-left: 3px solid var(--grey-border);
font-size: .92rem;
}
.fiche-parr-code { margin: 0 0 12px; }
.parr-code {
font-size: .82rem;
padding: 1px 7px;
border-radius: 6px;
background: var(--grey-bg);
border: 1px solid var(--grey-border);
}
.fiche-parr-graphe { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.parr-noeud { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: .9rem; }
.parr-moi {
padding: 4px 10px;
border: 1px solid var(--yellow-dark);
border-radius: 8px;
background: color-mix(in srgb, var(--yellow) 14%, var(--surface));
}
.parr-fleche { color: var(--muted-text); line-height: 1; padding-left: 10px; }
.parr-aval { display: flex; flex-direction: column; gap: 6px; padding-left: 4px; }
.parr-etat { font-size: .78rem; }
.fiche-fin-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.fiche-fin-liste li { display: flex; align-items: baseline; gap: 10px; font-size: .9rem; }
.fiche-fin-etat {
flex: none;
width: 74px;
font-size: .74rem;
text-align: center;
padding: 2px 0;
border-radius: 999px;
background: var(--grey-bg);
color: var(--muted-text);
}
.fiche-fin-liste li.est-oui { font-weight: 600; }
.fiche-fin-liste li.est-oui .fiche-fin-etat {
background: color-mix(in srgb, var(--yellow) 34%, var(--surface));
border: 1px solid var(--yellow-dark);
color: var(--text);
font-weight: 600;
}
.fiche-fin-liste li.est-non { color: var(--muted-text); }
.code-session { font-size: .8rem; white-space: nowrap; }
.podium {
list-style: none;
margin: 18px auto 16px;
padding: 0;
display: flex;
justify-content: center;
align-items: flex-end;
gap: 10px;
max-width: 640px;
border-bottom: 2px solid var(--grey-border);
}
.podium-marche {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
flex: 1 1 0;
min-width: 0;
text-align: center;
}
.podium-1 { order: 2; }
.podium-2 { order: 1; }
.podium-3 { order: 3; }
.podium-qui { font-weight: 600; line-height: 1.25; }
.podium-qui a { text-decoration: none; }
.podium-qui a:hover { text-decoration: underline; }
.podium-nb { font-size: .86rem; font-variant-numeric: tabular-nums; }
.podium-bloc {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 2px;
padding-top: 10px;
border: 1px solid var(--grey-border);
border-bottom: none;
border-radius: 10px 10px 0 0;
background: var(--grey-bg);
box-sizing: border-box;
}
.podium-1 .podium-bloc { height: 112px; border-color: var(--yellow-dark); background: color-mix(in srgb, var(--yellow) 28%, var(--surface)); }
.podium-2 .podium-bloc { height: 84px; }
.podium-3 .podium-bloc { height: 62px; }
.podium-medaille { font-size: 1.5rem; line-height: 1; }
.podium-numero { font-size: 1.6rem; font-weight: 800; line-height: 1; color: var(--muted-text); }
.podium-1 .podium-numero { color: var(--text); }
.podium-reste { margin: 0 0 16px; font-size: .88rem; text-align: center; }
input[readonly] {
background: var(--grey-bg);
color: var(--muted-text);
cursor: not-allowed;
}
.champ-fige { margin: 4px 0 0; font-size: .8rem; }
.mar-arbres { display: flex; flex-direction: column; gap: 18px; margin-top: 16px; }
.mar-arbre, .mar-branche { list-style: none; margin: 0; padding: 0; }
.mar-arbre > .mar-noeud { padding-left: 0; }
.mar-arbre > .mar-noeud::before, .mar-arbre > .mar-noeud::after { display: none; }
.mar-branche { padding-left: 22px; }
.mar-branche > .mar-noeud { position: relative; padding-left: 20px; }
.mar-branche > .mar-noeud::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
border-left: 1px solid var(--grey-border);
}
.mar-branche > .mar-noeud:last-child::before { bottom: auto; height: .75em; }
.mar-branche > .mar-noeud::after {
content: '';
position: absolute;
left: 0; top: .75em;
width: 13px;
border-top: 1px solid var(--grey-border);
}
.mar-qui { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 2px 0; }
.mar-noeud.a-des-filleuls > .mar-qui .mar-nom { font-weight: 600; }
.mar-etat { font-size: .76rem; }
.mar-chiffres { margin: 10px 0 0; }
.labo-bascule { margin: 12px 0; }
.vz-ajust-etapes li::marker { color: var(--yellow-dark); font-weight: 700; }
.qsj-jeu-ouvrir {
background: none; border: 0; padding: 0; margin: 0;
font: inherit; color: var(--text);
text-decoration: underline dotted; text-underline-offset: 3px;
cursor: pointer;
}
.qsj-jeu-ouvrir:hover { color: var(--yellow-dark); }
.qsj-jeu-ouvrir:focus-visible {
outline: 2px solid var(--yellow-dark); outline-offset: 2px; border-radius: 3px;
}
.mail-echange { margin: 8px 0 4px; }
.mail-mot, .mail-reponse {
margin: 0 0 6px; padding: 7px 12px; font-size: .88rem;
border-left: 3px solid var(--grey-border); border-radius: 0 8px 8px 0;
background: color-mix(in srgb, var(--surface) 70%, transparent);
}
.mail-reponse { border-left-color: var(--yellow-dark); margin-left: 16px; }
.mail-echange-qui {
display: block; font-size: .72rem; text-transform: uppercase;
letter-spacing: .04em; color: var(--muted-text); margin-bottom: 2px;
}
.fiche-mot {
margin-bottom: 14px; padding: 11px 13px; border-radius: 10px;
border: 1px solid var(--grey-border);
background: color-mix(in srgb, var(--surface) 70%, transparent);
}
.fiche-mot:last-child { margin-bottom: 0; }
.fiche-mot-sujet { margin: 0 0 5px; font-size: .84rem; font-weight: 600; }
.fiche-mot-sujet .muted { font-weight: 400; margin-left: 6px; }
.fiche-mot-corps {
margin: 0 0 9px; padding-left: 11px; font-size: .92rem;
border-left: 3px solid var(--yellow-dark);
}
.fiche-mot-form label { display: block; font-size: .78rem; margin-bottom: 4px; }
.fiche-mot-form textarea {
width: 100%; border: 1px solid var(--grey-border); border-radius: 8px;
background: var(--surface); color: var(--text);
font-family: inherit; font-size: .88rem; padding: 7px 9px; margin-bottom: 8px;
}
.fiche-mot-form .btn { margin-top: 0; }
.email-groupes { margin: 0 0 16px; }
.email-groupes-mot { font-size: .84rem; margin: 0 0 9px; }
.email-groupes-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.email-groupe-bloc {
display: inline-flex; align-items: stretch;
border: 1px solid var(--grey-border); border-radius: 999px; overflow: hidden;
}
.email-groupe-btn {
border: 1px solid var(--grey-border); border-radius: 999px;
background: var(--surface); color: var(--text);
font: inherit; font-size: .84rem; padding: 5px 12px; cursor: pointer;
max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.email-groupe-bloc .email-groupe-btn { border: 0; border-radius: 0; }
.email-groupe-btn:hover { background: color-mix(in srgb, var(--yellow) 14%, var(--surface)); }
.email-groupe-btn.est-actif {
background: color-mix(in srgb, var(--yellow) 22%, var(--surface));
border-color: var(--yellow-dark); font-weight: 600;
}
.email-groupe-n {
display: inline-block; margin-left: 6px; padding: 0 6px;
border-radius: 999px; font-size: .76rem; font-weight: 700;
background: color-mix(in srgb, var(--yellow-dark) 18%, transparent);
}
.email-groupe-cocher {
border: 0; border-left: 1px solid var(--grey-border);
background: color-mix(in srgb, var(--surface) 60%, transparent);
color: var(--muted-text); font: inherit; font-size: .76rem;
padding: 5px 10px; cursor: pointer;
}
.email-groupe-cocher:hover { color: var(--text); background: var(--surface); }
.chapeau-cible {
display: inline-flex; align-items: center; gap: 8px;
padding: 9px 0; margin: -9px 0;
}
.filtres-facettes[data-filtre-mode="retenir"] .pill-filtre[aria-pressed="false"] {
text-decoration: none;
opacity: 1;
filter: none;
}
.filtres-facettes[data-filtre-mode="retenir"] .pill-filtre[aria-pressed="true"] {
background: var(--yellow);
border-color: var(--yellow-dark);
color: var(--navy);
font-weight: 700;
}
.filtres-signalements .pill-filtre.status-info { background: var(--grey-bg); }
.filtres-signalements .pill-filtre.status-progress { background: color-mix(in srgb, var(--yellow-dark) 22%, transparent); }
.filtres-signalements .pill-filtre.status-done { background: color-mix(in srgb, var(--yellow) 55%, transparent); }
.filtres-signalements[data-filtre-mode="retenir"] .pill-filtre::before {
content: "✓";
width: 0.85em;
font-weight: 700;
visibility: hidden;
}
.filtres-signalements[data-filtre-mode="retenir"] .pill-filtre[aria-pressed="true"] {
border-color: var(--navy);
box-shadow: inset 0 0 0 1px var(--navy);
color: var(--text);
font-weight: 400; 
}
.filtres-signalements[data-filtre-mode="retenir"] .pill-filtre[aria-pressed="true"]::before {
visibility: visible;
}
.filtres-signalements[data-filtre-mode="retenir"]:has(.pill-filtre[aria-pressed="true"]) .pill-filtre[aria-pressed="false"] {
opacity: 0.45;
filter: grayscale(1);
}
.filtres-signalements .pill-filtre {
transition: opacity 0.25s ease, filter 0.25s ease, border-color 0.2s ease,
box-shadow 0.2s ease, background-color 0.2s ease;
}
.filtres-signalements[data-filtre-mode="retenir"] .pill-filtre::before {
visibility: visible;
opacity: 0;
transform: scale(0.6);
transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.filtres-signalements[data-filtre-mode="retenir"] .pill-filtre[aria-pressed="true"]::before {
opacity: 1;
transform: none;
}
.card:has(.filtres-signalements.facettes-pretes) .mon-signalement {
transition: opacity 0.28s ease, filter 0.28s ease, transform 0.28s ease,
display 0.28s allow-discrete;
}
.card:has(.filtres-signalements.facettes-pretes) .mon-signalement[hidden] {
display: none;
opacity: 0;
filter: blur(3px);
transform: translateY(-6px);
}
@starting-style {
.card:has(.filtres-signalements.facettes-pretes) .mon-signalement:not([hidden]) {
opacity: 0;
filter: blur(3px);
transform: translateY(-6px);
}
}
@media (prefers-reduced-motion: reduce) {
.filtres-signalements .pill-filtre,
.filtres-signalements[data-filtre-mode="retenir"] .pill-filtre::before,
.card:has(.filtres-signalements.facettes-pretes) .mon-signalement { transition: none; }
}
.filtres-signalements .pill-filtre.status-info[aria-pressed="true"] { background: var(--grey-bg); }
.filtres-signalements .pill-filtre.status-progress[aria-pressed="true"] { background: color-mix(in srgb, var(--yellow-dark) 22%, transparent); }
.filtres-signalements .pill-filtre.status-done[aria-pressed="true"] { background: color-mix(in srgb, var(--yellow) 55%, transparent); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .filtres-signalements .pill-filtre.status-progress { background: color-mix(in srgb, var(--yellow-dark) 40%, transparent); }
:root:not([data-theme="light"]) .filtres-signalements .pill-filtre[aria-pressed="true"] { border-color: var(--yellow-dark); }
}
:root[data-theme="dark"] .filtres-signalements .pill-filtre.status-progress { background: color-mix(in srgb, var(--yellow-dark) 40%, transparent); }
:root[data-theme="dark"] .filtres-signalements .pill-filtre[aria-pressed="true"] { border-color: var(--yellow-dark); }
.fiche-appel-retirer { display: inline; margin-left: 8px; }
.fiche-appel-retirer .btn-link { font-size: .84rem; }
.stage-edit-obsolete { margin-bottom: 18px; }
.code-acces { margin-top: 18px; text-align: center; }
.code-acces-ouvrir { background: none; border: 0; padding: 6px 10px; font: inherit; color: var(--muted-text); cursor: pointer; border-radius: 6px; }
.code-acces-ouvrir:hover { color: var(--text); background: var(--grey-bg); }
.code-acces-ouvrir strong { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.code-acces-corps { margin: 12px auto 0; max-width: 720px; text-align: left; padding: 14px 16px; border: 1px solid var(--grey-border); border-radius: 10px; background: var(--surface); }
.code-acces-corps > p { margin: 0 0 12px; text-wrap: pretty; }
.code-acces-champs { display: grid; grid-template-columns: 1fr 1.4fr .8fr auto; gap: 10px; align-items: end; }
.code-acces-champs label { display: grid; gap: 4px; font-size: .9rem; color: var(--muted-text); }
.code-acces-champs input { width: 100%; box-sizing: border-box; font: inherit; padding: 9px 10px; border: 1px solid var(--grey-border); border-radius: 6px; background: var(--surface); color: var(--text); }
.code-acces-champs input[name="ca_code"] { font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.code-acces-champs .btn { margin: 0; }
@media (max-width: 640px) { .code-acces-champs { grid-template-columns: 1fr 1fr; } .code-acces-champs .btn { grid-column: 1 / -1; } }
.bord-action-direct { border-color: var(--yellow-dark); background: color-mix(in srgb, var(--yellow) 18%, var(--surface)); animation: bord-direct 2.4s ease-in-out infinite; }
@keyframes bord-direct { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--yellow) 45%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--yellow) 0%, transparent); } }
@media (prefers-reduced-motion: reduce) { .bord-action-direct { animation: none; } }