:root, .nuit{
  --bg:#14151a; --fg:#e9e7e2; --muted:#8d8b86; --line:#2a2c34; --card:#1c1e25;

  --ombre-bulle:rgb(0 0 0 / .6);
  --tap:44px;

  --icone:var(--tap);

  --rythme:8px;
  --pad:16px;
  --col:34rem;

  --fin: calc(64px + env(safe-area-inset-bottom));

  --blanc-axe:20vh;
}


@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){ --bg:#eceae4; --fg:#1b1c20; --muted:#5f5d58; --line:#cfccc4; --card:#fdfcfa;
                                   --ombre-bulle:rgb(59 74 107 / .32); }
}
:root[data-theme="light"]{ --bg:#eceae4; --fg:#1b1c20; --muted:#5f5d58; --line:#cfccc4; --card:#fdfcfa;
                            --ombre-bulle:rgb(59 74 107 / .32); }

.nuit{ background:var(--bg); color:var(--fg); }

:root{ --fond-du-theme:var(--bg); }
.view.nuit{ isolation:isolate; }
.voile-de-pile{ position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0; }
.voile-de-pile.voile-de-jour{ background:var(--fond-du-theme); }
.voile-de-pile.voile-de-page{ position:fixed; will-change:opacity; }
.view.pile-bouge > .voile-de-pile, .view.pile-vole > .voile-de-pile{ will-change:opacity; }

#topbar.nuit{ background:transparent; }
*{ box-sizing:border-box; }

textarea{ resize:none; }


html, body, body *, body *::before, body *::after{
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
}
input, textarea, [contenteditable="true"]{
  -webkit-user-select:text; user-select:text;
}

[hidden]{ display:none !important; }

#view-year[hidden], #view-trophees[hidden]{ display:block !important; visibility:hidden; pointer-events:none; }
html,body{ height:100%; }
body{

  height:100vh; height:100dvh; height:min(100dvh, 100svh);
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  display:flex; flex-direction:column; overflow:hidden;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  -webkit-text-size-adjust:100%;
}

#topbar{
  display:flex; align-items:center; gap:8px; padding:6px 8px;
  border-bottom:1px solid var(--line); flex:0 0 auto;

  position:relative;
}


#titre-bloc{
  flex:1 1 auto; min-width:0; min-height:var(--icone);
  display:flex; flex-direction:column; justify-content:center;
}

#topbar.pile-bouge{ will-change:transform, opacity; }
#topbar.pile-vole{
  transition:transform .26s cubic-bezier(.22,.9,.28,1), opacity .26s ease;
}

#topbar.barre-suit{ transition:none; }
@media (prefers-reduced-motion: reduce){
  #topbar.pile-vole{ transition:none; }
}

#title{
  margin:0; text-align:center; font-weight:600;
  font-size:clamp(15px, 1.2vw + 12px, 19px);

  line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;

  position:relative;
}

.titre-mot{
  display:block;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.titre-arrive{ position:absolute; inset:0; }

#title.titre-vole .titre-mot{
  transition:transform .26s cubic-bezier(.22,.9,.28,1);
}
@media (prefers-reduced-motion: reduce){
  #title.titre-vole .titre-mot{ transition:none; }
}
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
button.icon{
  display:grid; place-items:center;
  min-width:var(--icone); min-height:var(--icone); border-radius:12px;
}
button.icon:active{ background:var(--card); }


.est-appuye{ box-shadow:inset 0 0 0 999px color-mix(in srgb, var(--fg) 12%, transparent); }

.est-appuye img{ opacity:.72; }
button.icon svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }

button.icon svg circle{ fill:currentColor; stroke:none; }


#shell{ position:relative; flex:1 1 auto; display:flex; flex-direction:column; min-height:0; min-width:0; }
#stage{ flex:1 1 auto; position:relative; min-height:0; min-width:0; }

.view{ position:absolute; inset:0; overflow:hidden; }

#view-settings{ position:fixed; inset:0; z-index:8; background:var(--bg); }

.vue-qui-part{ position:absolute; inset:0; z-index:30; pointer-events:none; background:var(--bg); transform-origin:50% 40%; }
.boot-error{ margin:24px 12px; color:var(--muted); text-align:center; }

#intro{ position:fixed; inset:0; width:100%; height:100%; z-index:50; touch-action:none; opacity:1; }
#intro.intro-sort{ opacity:0; transition:opacity .7s ease; }


#view-month{ display:grid; place-items:center; }

svg.map{ display:block; touch-action:pinch-zoom; }

#regle-texte{
  position:absolute; left:-9999px; top:0; width:1px; height:1px;
  overflow:hidden; pointer-events:none;
}

svg.map .branch{ stroke-linecap:round; }



svg.map .link{ stroke:none; }

svg.map .ombres{ pointer-events:none; }

svg.map .ombre-fil{ stroke-linecap:round; stroke-linejoin:round; }
svg.map .node{ cursor:pointer; outline:none; }
svg.map .node .halo{ opacity:0; fill:none; stroke-width:2.5; transition:opacity .12s ease; }

svg.map .jauge-arc{ animation-name:jauge-repentir; animation-timing-function:linear; animation-fill-mode:both;
                    pointer-events:none; }
svg.map .jauge-repentir{ pointer-events:none; }
@keyframes jauge-repentir{ from{ stroke-dashoffset:var(--tour); } to{ stroke-dashoffset:0; } }
svg.map .node--locked .halo,
svg.map .node:focus-visible .halo{ opacity:.7; }

@media (hover: hover) and (pointer: fine){
  svg.map .node:hover .halo{ opacity:.7; }
}

svg.map .node .halo,
svg.map .node .ring,
svg.map .node image,
svg.map .node text{ pointer-events:none; }
svg.map text{ font:500 11px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
svg.map .more{ text-anchor:middle; font-size:10px; font-weight:600; }

svg.map .node-cadenas{
  fill:none; stroke:var(--bg); stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round;
  vector-effect:non-scaling-stroke; pointer-events:none;
}

svg.map .cut{ text-anchor:middle; font-size:9.5px; font-weight:600; fill-opacity:.75; }


svg.map .axis-name{
  font-weight:600;
  paint-order:stroke; stroke:var(--bg); stroke-width:4.5px; stroke-linejoin:round;
}
svg.map .hub circle, svg.cadran .hub circle{ fill:var(--card); stroke:var(--line); }
svg.map .hub text, svg.cadran .hub text{ text-anchor:middle; fill:var(--fg); }
svg.map .hub-year, svg.cadran .hub-year{ font-size:11px; fill:var(--muted); }
svg.map .hub-month, svg.cadran .hub-month{ font-size:14px; font-weight:600; }



#sheet{
  position:absolute; z-index:6; left:var(--sheet-x, 50%); top:var(--sheet-y, 50%);
  width:min(360px, calc(100% - 32px)); max-height:min(32dvh, 210px); min-height:0;

  height:auto;
  overflow:auto; overscroll-behavior:contain;

  padding:14px 16px 12px;
  background:color-mix(in srgb, var(--card) 92%, transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius:16px;
  box-shadow:0 10px 34px color-mix(in srgb, #000 14%, transparent);
  opacity:0; transform:translate(-50%, 8px) scale(.985); pointer-events:none;
  transition:opacity .2s ease, transform .26s cubic-bezier(.22,.9,.28,1);
}
#sheet.is-visible{ opacity:1; transform:translate(-50%, 0) scale(1); }

#sheet.is-visible.is-locked .sheet-item,
#sheet.is-visible.is-locked .sheet-close{ pointer-events:auto; }
#sheet::before{ display:none; }


@media (hover: hover) and (pointer: fine){
  #sheet[hidden]{ display:block !important; visibility:hidden; }
}

.sheet-close{
  position:absolute; z-index:1; top:6px; right:6px; display:flex;
  min-width:34px !important; min-height:34px !important; border-radius:50% !important;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
}
#sheet-list{ list-style:none; margin:0; padding:0; }
.sheet-item{
  --sheet-accent:var(--fg);
  position:relative; overflow:hidden; padding:2px 30px 2px 14px;
  border:0; border-radius:0; background:transparent; box-shadow:none;
  animation:sheet-arrive .22s cubic-bezier(.22,.9,.28,1) both;
}

.sheet-item::before{
  content:""; position:absolute; inset:10px auto 10px 0; width:3px;
  border-radius:0 999px 999px 0;
  background:color-mix(in srgb, var(--sheet-accent) 78%, transparent);
}

.sheet-item.axe-brouillon{
  border:1px dashed color-mix(in srgb, var(--sheet-accent) 60%, transparent);
  border-radius:12px; padding:8px 14px; margin:4px 0 8px; cursor:pointer;
}
.sheet-item.axe-brouillon .sheet-text{ color:var(--muted); font-style:italic; }
.axe-brouillon-mot{ color:var(--sheet-accent); text-transform:uppercase; letter-spacing:.06em; }
.axe-brouillons{ margin-bottom:var(--blanc-axe, 20vh); }
.sheet-item + .sheet-item{ margin-top:8px; padding-top:14px; border-top:1px solid color-mix(in srgb, var(--line) 72%, transparent); }
.sheet-meta{
  display:flex; align-items:center; gap:7px; margin:0 0 8px;
  font-size:11px; font-weight:600; letter-spacing:.015em; color:var(--muted);
}
.sheet-meta .dot{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; box-shadow:0 0 0 4px color-mix(in srgb, var(--sheet-accent) 12%, transparent); }

.sheet-meta .dot--barre{ width:20px; border-radius:4px; }

.sheet-heure{ font-weight:500; opacity:.7; font-variant-numeric:tabular-nums; }

.sheet-marque{
  padding:1px 7px; border-radius:999px; border:1px solid var(--line);
  font-size:11.5px; font-weight:500; color:var(--muted);
}
.sheet-axis{
  margin-left:auto; max-width:48%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  padding:3px 8px; border-radius:999px;

  background:color-mix(in srgb, var(--fg) 7%, transparent);
}
.sheet-text{ margin:0; font-size:clamp(16px, 1.05vw + 11px, 18px); line-height:1.52; letter-spacing:-.012em; overflow-wrap:anywhere; text-shadow:0 1px 10px color-mix(in srgb, var(--bg) 60%, transparent); }


.sheet-cadenas{
  position:absolute; bottom:0; right:1px;
  width:28px; height:28px; display:grid; place-items:center;
  color:var(--muted); background:transparent; border:0; border-radius:8px;
}
.sheet-cadenas svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#sheet-list.sans-arrivee .sheet-item{ animation:none; }
@keyframes sheet-arrive{
  from{ opacity:0; transform:translateY(5px); }
  to{ opacity:1; transform:translateY(0); }
}




#view-add{
  display:flex; flex-direction:column; gap:12px; overflow:auto;
  width:100%; max-width:var(--col); margin-inline:auto;
  padding:12px var(--pad) var(--fin);
}
.add-bar{ display:flex; align-items:center; gap:8px; }
.pill{
  min-height:36px; padding:0 14px; border-radius:999px;
  border:1px solid var(--line); background:var(--card); font-size:14px;
}
.pill.ghost{ background:none; color:var(--muted); align-self:flex-start; }
.add-bar .pill{ margin-left:auto; }
.add-text{
  width:100%; min-height:clamp(72px, 18vh, 132px); resize:none;
  padding:12px; border-radius:14px;
  border:1px solid var(--line); background:var(--card); color:var(--fg);
  font:16px/1.45 inherit; font-family:inherit;
}
.add-text:focus{ outline:2px solid var(--muted); outline-offset:-1px; }
.add-hint{ margin:0; font-size:13px; color:var(--muted); }

.evoquer{
  display:flex; align-items:center; gap:12px; width:100%; min-height:56px;
  padding:8px 14px 8px 12px; border-radius:14px; text-align:left;
  border:1px dashed color-mix(in srgb, var(--fg) 28%, transparent);
}
.evoquer[hidden]{ display:none; }
.evoquer-anneau{ flex:0 0 auto; width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.4; }
.evoquer-titre{ font-size:15px; font-weight:600; }
.evoquer-raconte{ font-size:13px; line-height:1.3; color:var(--muted); }
.evoquer-raconte b{ display:block; font-size:16px; font-weight:700; color:var(--fg); }
.evoquer-raconte b::first-letter{ text-transform:uppercase; }
.evoquer-droite{ margin-left:auto; font-size:13px; color:var(--muted); }
.evoquer.ouvert{
  border-style:solid; border-color:color-mix(in srgb, var(--fg) 22%, transparent);
  background:color-mix(in srgb, var(--fg) 4%, var(--bg));
}
.evoquer.ouvert .evoquer-droite{ font-size:14px; font-weight:600; color:var(--fg); padding:6px 2px; border-bottom:1px dashed var(--muted); }
.evoquer:not(.ouvert) .evoquer-raconte, .evoquer.ouvert .evoquer-titre{ display:none; }



.sheet-from{
  display:flex; align-items:center; gap:6px; min-width:0;
  margin:2px 0 0; color:var(--muted); font-size:12px;
}
.sheet-from .dot{ width:6px; height:6px; border-radius:50%; flex:0 0 auto; }
.sheet-from-label{ flex:0 0 auto; }
.sheet-from-text{
  flex:1 1 auto; min-width:0; font-style:italic;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}


.add-parent{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin:0; padding:8px 10px;
  border-left:3px solid var(--muted); border-radius:0 8px 8px 0;
  background:color-mix(in srgb, var(--fg) 6%, transparent);
  color:var(--muted); font-size:13px;
}
.add-parent-text{
  flex:1 1 140px; min-width:0; color:var(--fg);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}


svg.map .hub{ cursor:pointer; }
svg.map .hub-plus{ text-anchor:middle; font-size:15px; font-weight:400; opacity:.55; }

@media (hover: hover) and (pointer: fine) {
  svg.map .hub:hover .hub-plus{ opacity:1; }
}


#offline-tag{
  display:flex; align-items:center; gap:5px; width:max-content;
  font-size:12px; font-style:italic; color:var(--muted); opacity:.85;

  padding:2px 6px; -webkit-tap-highlight-color:transparent;
}
#offline-tag svg{
  width:13px; height:13px; flex:0 0 auto;
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round;
  stroke-linejoin:round;
}
#offline-tag[data-gravite="grave"]{ color:#c96a6a; opacity:1; }


#offline-tag{ margin:0 auto; padding:0; }


#topbar[data-vue="axe"] #offline-tag{
  position:absolute; left:10px; top:50%; transform:translateY(-50%); margin:0;
}


.media-bar{ display:flex; flex-wrap:wrap; gap:8px; }
.strip{ display:flex; flex-wrap:wrap; gap:10px; }

#sheet .strip{ gap:6px; margin-top:8px; }
#sheet .thumb{ width:52px; height:52px; border-width:1px; border-radius:10px; }
#sheet .thumb .badge{ display:none; }
#sheet .thumb img{ animation:thumb-fade .25s ease both; }
@keyframes thumb-fade{ from{ opacity:0; } to{ opacity:1; } }
.strip:empty{ display:none; }
.thumb{
  position:relative; width:76px; height:76px; border-radius:12px; overflow:hidden;
  border:2px solid var(--line); background:var(--card); padding:0;
}
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.thumb.is-vignette{ border-color:var(--fg); }
.thumb .badge{
  position:absolute; inset:auto 0 0 0; padding:2px 0;
  background:rgba(0,0,0,.55); color:#fff; font-size:10px; text-align:center;
}

#add-strip{
  --thumb:76px;
  max-height:calc(3 * var(--thumb) + 2 * 10px + 4px); overflow-y:auto; overscroll-behavior:contain;
  padding:2px;
}
#add-strip .thumb{
  width:var(--thumb); height:var(--thumb);
  -webkit-touch-callout:none; user-select:none; touch-action:pan-y;
  transition:transform .12s ease, box-shadow .12s ease;
}
#add-strip .thumb img{ pointer-events:none; }
#add-strip .thumb.est-tenue{ transform:scale(1.08); box-shadow:0 8px 22px rgba(0,0,0,.45); z-index:2; }
.thumb-croix{
  position:absolute; top:3px; right:3px; width:24px; height:24px; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:none; border-radius:50%; background:rgba(0,0,0,.6); color:#fff;
}
.thumb-croix svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; }
.mini{
  min-height:28px; padding:0 8px; border-radius:8px;
  border:1px solid var(--line); background:var(--card);
  font-size:12px; color:var(--muted); white-space:nowrap;
}


#lightbox{
  position:fixed; inset:0; z-index:20; background:rgba(0,0,0,.92);
  display:grid; place-items:center; padding:max(12px, env(safe-area-inset-top)) 12px;
}
#lightbox img{ max-width:100%; max-height:100%; object-fit:contain; }
#lightbox .icon{ position:absolute; top:8px; right:8px; color:#fff; }



.add-actions{ display:flex; align-items:center; gap:10px; }

#btn-delete{ margin-left:auto; }
.pill.primary{
  min-height:46px; padding:0 24px; font-weight:600;
  background:var(--fg); color:var(--bg); border-color:var(--fg);
}
.pill.primary:disabled{ opacity:.35; }





@media (max-height: 560px){

  :root{ --icone:38px; }
  #topbar{ padding:2px 6px; }
  #view-add{ gap:8px; padding-top:8px; }
  .add-text{ min-height:64px; }
  .thumb{ width:56px; height:56px; }
  #add-strip{ --thumb:56px; }
}


@media (max-width: 380px){
  :root{ --pad:12px; }
    .thumb{ width:64px; height:64px; }
    #add-strip{ --thumb:64px; }
  .mini{ font-size:11px; padding:0 6px; }
}


@media (min-width: 768px){
  :root{ --pad:24px; }
  .thumb{ width:88px; height:88px; }
  #add-strip{ --thumb:88px; }
}


@media (hover: none){
    .mini{ min-height:36px; padding:0 12px; }
}


@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; }
  .sheet-item, #view-axe .sheet-item.est-visee,
  .axe-bloc-titre.fait-le-pas{ animation:none; }
  #sheet .thumb img{ animation:none; }
  #sheet{ transition:opacity .1s linear; }
}



.settings-scroll{
  position:absolute; inset:0; overflow:auto; overscroll-behavior:contain;
  padding:14px var(--pad) var(--fin);

  padding-inline:max(var(--pad), calc((100% - 640px) / 2 + var(--pad)));
}


.settings-scroll .pill{ border-radius:10px; padding:0 12px; min-height:38px; }


.tirage{
  position:absolute; z-index:9; left:50%; top:0;
  width:38px; height:38px; margin-left:-19px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--card); border:1px solid var(--line);
  box-shadow:0 6px 18px color-mix(in srgb, #000 22%, transparent);

  transform:translateY(-56px);
  opacity:0; pointer-events:none;
}
.tirage svg{
  width:19px; height:19px; fill:none; stroke:var(--muted);
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}

.tirage.is-arme{ border-color:var(--fg); }
.tirage.is-arme svg{ stroke:var(--fg); }

.tirage.is-rendu{ transition:transform .3s cubic-bezier(.22,.9,.28,1), opacity .3s ease; }
.tirage.is-tourne svg{ animation:tirage-tourne .8s linear infinite; }
@keyframes tirage-tourne{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .tirage.is-rendu{ transition:none; }
  .tirage.is-tourne svg{ animation:none; }
}

.set-theme .mini{ border-radius:10px; padding:0 12px; min-height:38px; font-size:13px; }


.set-title{ font-size:20px; font-weight:600; margin:0; }


.set-tete{ display:flex; align-items:center; justify-content:space-between; gap:12px; }


.aide-h{ font-size:15px; font-weight:600; margin:28px 0 10px; }


.sheet-verrou{ color:var(--muted); font-style:italic; }
.aide-p{ margin:0; color:var(--muted); line-height:1.5; overflow-wrap:anywhere; }


.set-h{
  font-size:12px; font-weight:600; letter-spacing:.6px; text-transform:uppercase;
  color:var(--muted); margin:28px 0 10px;
}

.set-tete-h{ display:flex; align-items:center; gap:6px; margin:28px 0 10px; }
.set-tete-h .set-h{ margin:0; }

.set-h-cadenas{ display:inline-flex; align-items:center; color:var(--muted); }
.set-h-cadenas svg{
  width:17px; height:17px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}


.set-i{
  --i:26px;
  position:relative; flex:0 0 auto; padding:0;
  width:var(--i); height:var(--i); display:grid; place-items:center;
  border:0; background:none; color:var(--muted); border-radius:50%;
}
.set-i::after{
  content:''; position:absolute;
  inset:calc((var(--tap) - var(--i)) / -2);
}
.set-i svg{
  width:100%; height:100%; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}

.set-i[aria-expanded="true"]{
  color:var(--fg); background:color-mix(in srgb, var(--fg) 11%, transparent);
}

.set-list{
  --gouttiere:var(--rythme);
  list-style:none; margin:0 0 var(--rythme); padding:0;
  display:flex; flex-direction:column; gap:var(--gouttiere);
}

.set-row{
  position:relative;
  display:flex; align-items:center; gap:10px;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:8px 10px;
}

.set-row::after{
  content:''; position:absolute; z-index:-1;

  inset:calc(var(--gouttiere) / -2) 0;
}

.set-row:last-child::after{ bottom:0; }

.set-name{
  flex:1 1 auto; min-width:0;
  background:transparent; border:0;

  color:color-mix(in srgb, var(--encre, var(--axe, var(--fg))) 55%, var(--fg));
  font:inherit; font-size:15px; font-weight:500; padding:6px 2px; min-height:36px;
}

.set-name{ pointer-events:none; }
.set-name:focus{ pointer-events:auto; }
.set-name:focus{ outline:2px solid var(--line); outline-offset:2px; border-radius:6px; }
.set-name--static{ padding:6px 2px; opacity:.7; }



.set-zone-liee{ position:relative; }

#set-axes-zone{ max-height:min(52dvh, 380px); overflow-y:auto;
  margin-bottom:var(--rythme); }

#set-axes-zone > .set-list{ margin-bottom:0; }

#set-axes-zone{
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 var(--fondu-debut, 0px), #000 calc(100% - var(--fondu-fin, 0px)), transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 var(--fondu-debut, 0px), #000 calc(100% - var(--fondu-fin, 0px)), transparent 100%);
}
.set-liens{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; overflow:visible; z-index:1;
}
.set-lien{ fill:none; stroke-linecap:round; }


.set-bulle{
  --lumiere-bulle:radial-gradient(78% 78% at 35% 30%,
    rgb(255 255 255 / .30), transparent 58%, rgb(0 0 0 / .20));
  position:relative; z-index:2;

  touch-action:none;
  flex:0 0 auto; width:24px; height:24px; padding:0; cursor:pointer;
  border:0; border-radius:50%;
  background:var(--lumiere-bulle), var(--axe, var(--line));
  box-shadow:4px 4px 5px var(--ombre-bulle);
}
.set-bulle--fixe{ cursor:default; }

.set-bulle--tenue{
  cursor:grabbing;
  box-shadow:7px 9px 12px var(--ombre-bulle);
}

.set-count{
  flex:0 0 auto; min-width:20px; text-align:right;
  font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums;

  display:flex; flex-direction:column; align-items:flex-end; line-height:1.15;
}
.set-count b{ font-weight:600; }
.set-count small{ font-size:10.5px; opacity:.8; white-space:nowrap; }

.set-endormis{ margin-top:18px; }
.set-endormis-tete{
  font:inherit; font-size:13px; color:var(--muted); background:none; border:none; padding:8px 0;
  display:flex; align-items:center; gap:8px; cursor:pointer;
}
.set-endormis-tete::after{
  content:""; width:6px; height:6px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:rotate(-45deg); transition:transform .15s ease;
}
.set-endormis-tete[aria-expanded="true"]::after{ transform:rotate(45deg); }
.set-row--endormi{ opacity:.62; }
.set-bulle--fixe{ display:inline-block; width:22px; height:22px; border-radius:50%; flex:0 0 auto; }
.set-name--fixe{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }


.set-act{
  flex:0 0 auto; display:grid; place-items:center;
  width:34px; height:34px; border-radius:9px; color:var(--muted);
}
.set-act svg{
  width:18px; height:18px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.set-act:disabled{ opacity:.28; }

.set-act.is-danger{ color:color-mix(in srgb, var(--danger, #d85858) 42%, var(--muted)); }

@media (hover: hover) and (pointer: fine) {
  .set-act.is-danger:hover:not(:disabled){ color:var(--danger, #d85858); }
  .set-act:hover:not(:disabled){ background:color-mix(in srgb, var(--fg) 8%, transparent); }
}


.set-row--tenue{ cursor:grabbing; }
.set-row{ transition:transform .16s cubic-bezier(.22,.9,.28,1); }

.set-list--fige .set-row{ transition:none; }

.set-row--tenue{
  transition:none; position:relative; z-index:3;
  background:color-mix(in srgb, var(--fg) 11%, transparent);
  box-shadow:0 10px 24px rgba(0,0,0,.30),
             0 0 0 1.5px color-mix(in srgb, var(--axe, var(--fg)) 45%, transparent);
}

.set-champ{
  width:100%; min-height:var(--tap); padding:0 12px;
  border-radius:10px; border:1px solid var(--line);
  background:var(--card); color:var(--fg);
  font:16px/1.45 inherit; font-family:inherit;
}
.set-champ + .set-champ{ margin-top:var(--rythme); }

.set-champ + .set-actions{ margin-top:var(--rythme); }


.set-ligne{ display:flex; align-items:stretch; gap:var(--rythme); margin:0 0 2px; }
.set-ligne .set-champ{ flex:1 1 auto; width:auto; min-width:0; }
.set-ligne .pill{ flex:0 0 auto; min-height:var(--tap); align-self:auto; }
.set-colonne{ display:flex; flex-direction:column; flex:1 1 auto; min-width:0; }
#coffre-ouverture .pill{ align-self:flex-end; }

#coffre-ouverture:has(#coffre-confirme:not([hidden])){ flex-wrap:wrap; }
#coffre-ouverture:has(#coffre-confirme:not([hidden])) .set-colonne{ flex-basis:100%; }
#coffre-ouverture:has(#coffre-confirme:not([hidden])) .pill{ margin-left:auto; }
.set-lien{ background:none; border:0; padding:6px 0; color:var(--muted); font:inherit; font-size:13px;
  text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
#coffre-recommence{ margin-top:12px; }
#coffre-recommence .set-hint{ margin:0 0 var(--rythme); }


#coffre-rephrase{ margin-top:20px; }


.set-actions{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--rythme); margin:0 0 2px;
}
.set-hint{ color:var(--muted); font-size:13px; margin:0 0 10px; }
.set-status{ margin:16px 0 0; font-size:13px; color:var(--muted); }

.set-mesure{ margin:12px 0 0; color:var(--muted); font-size:12.5px; font-variant-numeric:tabular-nums; }
.set-mesure + .set-mesure{ margin-top:4px; }

.set-zone-rouge{ margin:36px 0 0; padding-top:16px; border-top:1px solid var(--line); }
.set-forget-hint{ margin:6px 0 0; color:var(--muted); font-size:12px; line-height:1.35; }

.set-status.is-error,
.set-mesure.is-error{ color:#e8908c; }



.modal{
  position:fixed; inset:0; z-index:20;
  display:flex; align-items:center; justify-content:center; padding:var(--pad);
  background:rgba(0,0,0,.55);
}
.modal-card{
  width:100%; max-width:420px; max-height:80dvh; overflow:auto;
  background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px;
}
.modal-card h2{ font-size:16px; margin:0 0 6px; }

.ask-text{ margin:2px 0 18px; font-size:15px; line-height:1.45; }
.del-choice{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  padding:10px 0; font-size:14px; cursor:pointer;
}
.del-choice input[type=radio]{ width:20px; height:20px; flex:0 0 auto; accent-color:var(--fg); }
#del-target{
  flex:1 1 140px; min-height:38px; padding:0 8px;
  background:var(--bg); color:var(--fg);
  border:1px solid var(--line); border-radius:8px; font:inherit;
}


.set-theme{ display:flex; flex-wrap:wrap; gap:8px; }

.set-theme + .set-theme{ margin-top:8px; }

.set-theme .mini{ color:var(--muted); }
.set-theme .mini[aria-pressed="true"]{
  background:color-mix(in srgb, var(--fg) 15%, transparent);
  color:var(--fg); font-weight:600;
}


.settings-scroll .set-row,
.settings-scroll .pill,
.settings-scroll .mini,
.settings-scroll .set-champ,
.settings-scroll .set-name:focus{
  border:0;
  background:color-mix(in srgb, var(--fg) 6%, transparent);
}


.settings-scroll .pill.ghost:not(.is-danger){
  background:color-mix(in srgb, var(--fg) 3.5%, transparent);
  color:var(--fg);
}
.settings-scroll .pill.ghost.is-danger{
  background:color-mix(in srgb, var(--danger, #d85858) 10%, transparent);
}
.settings-scroll .pill:active,
.settings-scroll .mini:active{ background:color-mix(in srgb, var(--fg) 13%, transparent); }


.settings-scroll .set-champ{
  background:color-mix(in srgb, var(--fg) 4%, transparent);
}
.settings-scroll .set-champ:focus{
  outline:2px solid color-mix(in srgb, var(--fg) 30%, transparent); outline-offset:-2px;
}


.settings-scroll .set-name:focus{
  outline:2px solid color-mix(in srgb, var(--axe, var(--fg)) 45%, var(--fg));
  outline-offset:2px; border-radius:6px;
}


.settings-scroll .set-zone-rouge{
  border-top:1px solid color-mix(in srgb, var(--fg) 10%, transparent);
}


.set-hint{ margin:0 0 8px; color:var(--muted); font-size:13px; overflow-wrap:anywhere; }


.pill.is-danger{ color:var(--danger, #d85858); border-color:color-mix(in srgb, var(--danger, #d85858) 45%, transparent); }

.pill.primary.is-danger{
  background:var(--danger, #d85858); color:#fff; border-color:transparent;
}

.modal-card .pill:focus-visible{ outline:2px solid var(--fg); outline-offset:2px; }
.mini.is-danger{ color:var(--danger, #d85858); border-color:color-mix(in srgb, var(--danger, #d85858) 45%, transparent); }

.map .node{ cursor:pointer; }


.carte-bande{ position:absolute; inset:0; }
.carte-couche{ position:absolute; inset:0; }
.carte-couche.cote-avant{ transform:translateX(-100%); }
.carte-couche.cote-apres{ transform:translateX(100%); }

.carte-couche.cote-loin-avant{ transform:translateX(-200%); }
.carte-couche.cote-loin-apres{ transform:translateX(200%); }

.carte-bande.en-vol{ transition:transform .26s cubic-bezier(.22,.9,.28,1); }
.carte-bande.is-dragging,
.carte-bande.en-vol{ will-change:transform; }
@media (prefers-reduced-motion: reduce){
  .carte-bande.en-vol{ transition:none; }
}


svg.map{ -webkit-touch-callout:none; }

.map .node:focus,
.map .hub:focus{ outline:none; }
.map .node:focus-visible{ outline:2px solid var(--fg); outline-offset:3px; border-radius:50%; }
.map .hub:focus-visible{ outline:2px solid var(--fg); outline-offset:3px; border-radius:50%; }



#view-month{ touch-action:pinch-zoom; }

#view-month{ overflow:clip; }
.carte-couche.is-ghost{ pointer-events:none; }





*{ -webkit-tap-highlight-color:transparent; }

svg.map *{ user-select:none; -webkit-user-select:none; }




@media (hover: hover) and (pointer: fine){

  .thumb{ transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease; }
  .thumb:hover{
    transform:translateY(-2px); border-color:var(--fg);
    box-shadow:0 6px 16px color-mix(in srgb, #000 22%, transparent);
  }

  .pill:hover, .mini:hover{ background:color-mix(in srgb, var(--fg) 9%, transparent); }
  .pill.ghost:hover{ color:var(--fg); }
  .pill.primary:hover{ filter:brightness(1.08); }
  .pill.is-danger:hover, .mini.is-danger:hover{
    background:color-mix(in srgb, var(--danger, #d85858) 14%, transparent);
  }
  .pill:disabled:hover, .mini:disabled:hover{ background:none; filter:none; }

  button.icon:hover{ background:var(--card); }
  .set-row:hover{ background:color-mix(in srgb, var(--fg) 5%, transparent); }
}



#view-year{ touch-action:pinch-zoom; }
.annee-page{ position:absolute; inset:0; pointer-events:none; }
.annee-page .mois .hit, .annee-page .etoile-trophee .hit{ pointer-events:auto; }
.annee-page.is-ghost .hit{ pointer-events:none; }

.annee-bande{ position:absolute; inset:0; }
.annee-page.cote-avant{ transform:translateX(-100%); }
.annee-page.cote-apres{ transform:translateX(100%); }
.annee-bande.en-vol{ transition:transform .26s cubic-bezier(.22,.9,.28,1); }
.annee-bande.is-dragging, .annee-bande.en-vol{ will-change:transform; }
@media (prefers-reduced-motion: reduce){ .annee-bande.en-vol{ transition:none; } }
svg.annee .etoile-trophee{ cursor:pointer; }

svg.annee .etoile-attend{ visibility:hidden; }
svg.annee .etoile-corps, svg.annee .etoile-halo, svg.annee .annee-arrivee *{ transform-box:view-box; transform-origin:0 0; }
svg.annee .annee-arrivee{ pointer-events:none; }
svg.annee .arrivee-voile{ fill:var(--bg); fill-opacity:0; }
svg.annee .annee-arrivee text{ paint-order:stroke; stroke:var(--bg); stroke-width:3px; stroke-linejoin:round; }
svg.annee .arrivee-nom{ font-weight:600; letter-spacing:.02em; }
svg.annee .arrivee-titre{ fill:var(--muted); font-weight:500; letter-spacing:.16em; text-transform:uppercase; }

svg.annee .etoile-lien{ fill:none; stroke:#fff; stroke-opacity:.2; stroke-linecap:round; }
svg.annee{ display:block; touch-action:pinch-zoom; user-select:none; -webkit-user-select:none; }

svg.annee .fil{ stroke:none; }

svg.annee .fil-ligne{ fill:none; stroke-linecap:round; stroke-linejoin:round; }
svg.annee text{ font:500 11px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
svg.annee .nom{ fill:var(--muted); font-size:11px; letter-spacing:.02em; }

svg.annee .nom, svg.annee .compte{ paint-order:stroke; stroke:var(--bg); stroke-width:3px; stroke-linejoin:round; }

svg.annee .compte{ fill:var(--muted); font-size:11px; font-weight:400;
                   font-variant-numeric:tabular-nums; }

svg.annee .nom-fil{ letter-spacing:.03em; }
svg.annee .nom-fil .compte{ fill-opacity:.75; }

svg.cadran{ display:block; }
svg.cadran .ombres{ pointer-events:none; }
svg.cadran .ombre-fil{ stroke-linecap:round; stroke-linejoin:round; }
svg.cadran .cadran-piste{ stroke:var(--line); stroke-width:1.5; stroke-linecap:round; }
svg.cadran .cadran-tic{ stroke:var(--line); stroke-width:1; }
svg.cadran .cadran-tic--nomme{ stroke-width:1.5; }

svg.cadran .cadran-heure{
  fill:color-mix(in srgb, var(--fg) 72%, var(--bg));
  font-size:13px; font-weight:600; font-variant-numeric:tabular-nums;
}

svg.cadran .cadran-arc{ stroke-linecap:round; }
svg.cadran .cadran-aiguille{
  stroke:var(--fg); stroke-width:1.5; stroke-opacity:.45; stroke-linecap:round;
}

svg.cadran .cadran-secondes{
  fill:var(--fg); transform-origin:0 0; transform-box:view-box;
  animation:secondes-tour 60s linear infinite;
}
@keyframes secondes-tour{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ svg.cadran .cadran-secondes{ animation:none; } }
svg.cadran .cours-titre{ font-size:12px; font-weight:600; }
svg.cadran .cours-detail{
  fill:var(--muted); font-size:10px; font-variant-numeric:tabular-nums;
}
svg.cadran .compte{ fill:var(--muted); font-size:11px; font-weight:600; }

svg.cadran .cadran-horaire{
  fill:var(--muted); font-size:15px; font-variant-numeric:tabular-nums;
}
svg.cadran .cadran-intitule{ font-size:17px; font-weight:600; }

svg.cadran .cadran-salle{ fill:var(--muted); font-size:13px; }



#view-cours,
.cours-page,
svg.cadran,
svg.ruban{ touch-action:none; }


.view.pile-bouge{ will-change:transform; }
.view.pile-vole{ transition:transform .26s cubic-bezier(.22,.9,.28,1); }
@media (prefers-reduced-motion: reduce){
  .view.pile-vole{ transition:none; }
}


.repere{
  position:fixed; z-index:44; top:50%; pointer-events:none; overflow:visible;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transform:translate(calc(-50% + 10px), -50%);
  transition:opacity var(--repere-fondu, .22s) cubic-bezier(.72,0,.78,.1),
             transform var(--repere-fondu, .22s) cubic-bezier(.72,0,.78,.1);
}
.repere.is-vu{
  opacity:.9; transform:translate(-50%, -50%);
  transition:opacity var(--repere-fondu, .22s) cubic-bezier(.22,.9,.28,1),
             transform var(--repere-fondu, .22s) cubic-bezier(.22,.9,.28,1);
}
.repere-cadre{ fill:var(--card); fill-opacity:.35; stroke:none; }
.repere-lien{ fill:none; stroke:var(--muted); stroke-linecap:round; stroke-linejoin:round; }
.repere-cran{ fill:var(--muted); stroke:var(--card); transition:fill .12s ease, opacity .12s ease; }

.repere-cran.est-vise{ fill:var(--fg); opacity:.75; }
.repere-ici{ fill:var(--fg); transform-box:fill-box; transform-origin:center; }

.repere-ici.arrive{ animation:repere-pouls .3s cubic-bezier(.22,.9,.28,1); }
@keyframes repere-pouls{ 0%{ transform:scale(1); } 35%{ transform:scale(1.45); } 100%{ transform:scale(1); } }
@media (prefers-reduced-motion: reduce){
  .repere, .repere.is-vu{ transform:translate(-50%, -50%); }
  .repere-ici.arrive{ animation:none; }
}


.cours-page{
  position:absolute; inset:0;
  transition:transform .26s cubic-bezier(.22,.9,.28,1);
}
.cours-page.is-dragging{ transition:none; }
.cours-page.is-ghost{ pointer-events:none; }
.cours-page.is-dragging, .cours-page.is-ghost, .cours-page.en-vol{ will-change:transform; }

.ruban-mobile, .ruban-dates{ will-change:transform, opacity; }
.cours-page.en-vol .ruban-mobile{
  transition:transform .26s cubic-bezier(.22,.9,.28,1);
}
.cours-page.en-vol .ruban-dates{ transition:opacity .26s ease; }

.cours-page.sans-grille .ruban-grille{ display:none; }
@media (prefers-reduced-motion: reduce){
  .cours-page.en-vol .ruban-mobile, .cours-page.en-vol .ruban-dates{ transition:none; }
}
@media (prefers-reduced-motion: reduce){
  .cours-page{ transition:none; }
}

svg.ruban{ display:block; }
svg.ruban .ruban-mois{
  fill:var(--muted); font-size:12px; font-weight:600;
  text-transform:capitalize; letter-spacing:.2px;
}
svg.ruban .ruban-heure{ stroke:var(--line); stroke-width:1; }

svg.ruban .ruban-demi{
  stroke:var(--line); stroke-width:1; stroke-opacity:.45; stroke-dasharray:2 5;
}
svg.ruban .ruban-chiffre{
  fill:var(--muted); font-size:10px; font-variant-numeric:tabular-nums;
}

svg.ruban .ruban-choisi{ fill:var(--card); }
svg.ruban .ruban-jour{
  fill:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.4px;
}
svg.ruban .ruban-jour--ici{ fill:var(--fg); font-weight:600; }
svg.ruban .ruban-date{
  fill:var(--muted); font-size:13px; font-variant-numeric:tabular-nums;
}
svg.ruban .ruban-date--ici{ fill:var(--fg); font-weight:700; }
svg.ruban .ruban-titre{ fill:var(--bg); font-size:9.5px; font-weight:600; }
svg.ruban .ruban-salle{ fill:var(--bg); font-size:8.5px; fill-opacity:.8; }
.cadran-vide{
  position:absolute; left:0; right:0; bottom:38%; margin:0;
  text-align:center; color:var(--muted); font-size:14px;
}

.cours-maj{ position:absolute; left:2px; top:2px; padding:0; color:var(--muted); }

.cours-ajout{
  position:absolute; right:16px; bottom:calc(18px + env(safe-area-inset-bottom, 0px)); z-index:6;
  width:56px; height:56px; padding:0; border:0; border-radius:50%;
  display:grid; place-items:center;
  background:var(--fg); color:var(--bg);
  box-shadow:0 6px 18px rgb(0 0 0 / .35);
}
.cours-ajout svg{ width:26px; height:26px; }

.cours-ajout svg{ fill:currentColor; stroke:var(--fg); stroke-width:1.8; stroke-linecap:round; }

svg.ruban .ruban-case.perso{ stroke:var(--fg); stroke-width:1.5; stroke-opacity:.85; }
svg.cadran .cadran-pastille.perso{ stroke:var(--fg); stroke-width:1.5; }
[data-perso]{ cursor:pointer; }

svg.ruban .ruban-parti{ opacity:.3; }

svg.ruban .ruban-ebauche rect{ fill:var(--fg); stroke:var(--fg); stroke-width:1.5; }

svg.ruban .ruban-ebauche{ transition:opacity .16s ease; }
.ebauche-attend svg.ruban .ruban-ebauche{ opacity:0; transition:none; }
svg.ruban .ruban-ebauche text{ fill:var(--bg); font-size:9.5px; font-weight:700; }
svg.ruban .ruban-porte{ filter:drop-shadow(0 4px 8px rgb(0 0 0 / .45)); }
svg.ruban .ruban-porte .ruban-case{ stroke:var(--fg); stroke-width:2; }
svg.cadran .ruban-parti{ opacity:.3; }
svg.cadran .cadran-porte{ filter:drop-shadow(0 3px 6px rgb(0 0 0 / .45)); }



#agenda{ background:rgb(0 0 0 / .25); }
#agenda{ align-items:flex-end; padding-bottom:calc(var(--pad) + var(--clavier, 0px)); }
.agenda-carte{ display:grid; gap:8px; padding:12px;
  max-height:calc(100dvh - var(--clavier, 0px) - 2 * var(--pad)); overflow:auto;

  transition:opacity .16s ease; }
.agenda-carte h2{ margin:0; font-size:13px; color:var(--muted); font-weight:600; }

.agenda-quand{ display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:6px; }
.agenda-quand .set-champ{ min-width:0; padding-left:8px; padding-right:4px; }
.agenda-actions{ margin-top:2px; }

.cours-fiche{ display:grid; gap:6px; }
.cours-fiche h2{ margin:0 0 2px; font-size:17px; line-height:1.25; }
.fiche-quand{ margin:0; font-variant-numeric:tabular-nums; }
.fiche-lieu{ margin:0; color:var(--muted); }
.fiche-detail{ margin:4px 0 0; white-space:pre-line; color:var(--muted); font-size:13px; }
.fiche-deplace{ margin:4px 0 0; font-size:13px; font-style:italic; color:var(--muted); }
.fiche-actions{ margin-top:8px; }

.agenda-horloge{ position:fixed; z-index:2; box-sizing:border-box; padding:10px;
  display:grid; gap:8px; background:var(--card); border:1px solid var(--line);
  border-radius:16px; box-shadow:0 8px 24px rgb(0 0 0 / .45); }
.horloge-heures{ display:grid; grid-template-columns:repeat(8, 1fr); gap:4px; }
.horloge-minutes{ display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; }
.horloge-choix{ min-width:0; padding:8px 0; border-radius:10px; border:1px solid var(--line);
  background:transparent; color:var(--fg); font:inherit; font-size:14px;
  font-variant-numeric:tabular-nums; }
.horloge-choix.est-choisi{ background:var(--fg); color:var(--bg); border-color:var(--fg); }
.agenda-quand .set-champ.est-edite{ outline:2px solid var(--fg); outline-offset:1px; }
.agenda-actions .is-danger{ margin-left:auto; }
.cours-maj svg{ width:17px; height:17px; }

.cours-maj.est-occupe{ opacity:.55; animation:cours-tourne 1.1s linear infinite; }
@keyframes cours-tourne{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .cours-maj.est-occupe{ animation:none; }
}



.cours-voile.est-appuye{ box-shadow:none; }

.cours-voile.sur-la-page{ position:fixed; inset:0; z-index:20; }
.cours-voile{
  position:absolute; inset:0; z-index:6;

  display:grid; justify-items:center; align-items:end;
  padding:12px 12px calc(var(--clavier, 0px) + 12px);
  background:color-mix(in srgb, #000 42%, transparent);
}
.cours-voile > .cours-secret{ max-height:100%; overflow:auto; }

.cours-source-titre{ margin:0; font-weight:600; }
.cours-source-aide{ margin:0; font-size:13px; color:var(--muted); }
.cours-source-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.cours-fichier{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.cours-secret{
  width:min(320px, calc(100% - 32px));
  display:flex; flex-direction:column; gap:8px;
  padding:16px; border-radius:16px;
  background:var(--card); border:1px solid var(--line);

  transition:opacity .16s ease;
}




.cours-ligne{ position:relative; }
.cours-anneau{
  display:none;
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:17px; height:17px; border-radius:50%;
  border:2px solid color-mix(in srgb, currentColor 28%, transparent);
  border-top-color:currentColor;
  animation:cours-tourne .8s linear infinite;
}
.cours-secret.est-en-attente .cours-dit{ display:none; }
.cours-secret.est-en-attente .cours-anneau{ display:block; }

.cours-secret.est-en-attente input{ opacity:.55; }

.cours-secret.a-reussi .cours-dit{ font-weight:600; }

.cours-dit{ margin:0; font-size:13px; font-weight:600; text-align:left; }
.cours-secret.a-rate .cours-dit{ color:var(--danger, #d85858); }
.cours-secret.a-rate{ animation:cours-sursaut .34s cubic-bezier(.36,.07,.19,.97); }
@keyframes cours-sursaut{
  10%, 90%{ transform:translateX(-3px); }
  30%, 70%{ transform:translateX(5px); }
  50%     { transform:translateX(-6px); }
  100%    { transform:translateX(0); }
}

@media (prefers-reduced-motion: reduce){
  .cours-secret.a-rate{ animation:none; }
  .cours-secret.a-rate input{ border-color:var(--danger, #d85858); }
}
.cours-secret input{
  width:100%; padding:10px 40px 10px 12px; border-radius:10px;
  border:1px solid var(--line); background:var(--bg); color:var(--fg);
  font:inherit;
}

.cours-secret input:focus{
  outline:2px solid color-mix(in srgb, var(--fg) 30%, transparent); outline-offset:-2px;
}

svg.annee .creux{ stroke-width:1.4; opacity:.45; }
svg.annee .mois{ cursor:pointer; outline:none; }
svg.annee .mois text, svg.annee .mois circle{ pointer-events:none; }
svg.annee .annee-noms{ pointer-events:none; }
svg.annee .mois-etiquette.mois--foyer .nom{ fill:var(--fg); }
svg.annee .mois .hit{ pointer-events:auto; }
svg.annee .mois--ici .nom{ fill:var(--fg); font-weight:600; }
svg.annee .mois--ici .compte{ fill:var(--fg); fill-opacity:1; }

#btn-year.is-on{ background:var(--card); }




.sheet-item.est-menante{ cursor:pointer; }

.sheet-item.est-menante.est-choisi{ background:color-mix(in srgb, var(--fg) 10%, transparent); border-radius:8px; }


.add-axe{ position:relative; display:flex; gap:8px; align-items:center; min-width:0; }

.prismes-suite{ position:absolute; right:-6px; top:50%; transform:translateY(-50%); z-index:1;
  width:34px; height:44px; display:grid; place-items:center; color:var(--fg); }
.prismes-suite[hidden]{ display:none; }
.prismes-suite svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

.add-texte-boite{ position:relative; }
.add-texte-boite .add-text{ padding-bottom:48px; }
.add-photo-icone{ position:absolute; right:8px; bottom:8px; width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; color:var(--muted); background:color-mix(in srgb, var(--fg) 6%, transparent); }
.add-photo-icone svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linejoin:round; }

.prismes-rapides{
  display:flex; gap:8px; flex:1 1 auto; min-width:0;
  overflow-x:auto; scrollbar-width:none; touch-action:pan-x pan-y;
  scroll-snap-type:x mandatory;
}

.prismes-rapides .prisme-pastille{
  flex:0 0 var(--pastille, calc((100% - 16px) / 3)); max-width:none; min-width:0; scroll-snap-align:center;
}
.prismes-rapides::-webkit-scrollbar{ display:none; }
.prismes-rapides{
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 var(--fondu-debut, 0px), #000 calc(100% - var(--fondu-fin, 0px)), transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, #000 var(--fondu-debut, 0px), #000 calc(100% - var(--fondu-fin, 0px)), transparent 100%);
}
.prisme-pastille, .prisme-ligne{
  display:flex; align-items:center; gap:8px; box-sizing:border-box;
  font:inherit; text-align:left; color:var(--fg);
  background:var(--card); border:1px solid var(--line);
}
.prisme-pastille{
  flex:0 0 auto; max-width:72%; min-height:42px; padding:6px 14px 6px 10px;
  border-radius:999px; white-space:nowrap;
}
.prisme-pastille .dot, .prisme-ligne .dot{ width:11px; height:11px; border-radius:50%; flex:0 0 auto; }
.prisme-nom{
  flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:color-mix(in srgb, var(--encre, var(--axe, currentColor)) 72%, var(--fg));
}

.prisme-pastille[aria-pressed="true"], .prisme-ligne[aria-pressed="true"]{
  border-color:var(--axe); box-shadow:inset 0 0 0 1px var(--axe); font-weight:650;
}

.prisme-tous{ flex:0 0 auto; max-width:none; padding:6px 14px; color:var(--muted); }

.prismes-rapides .prisme-tous{ flex:0 0 var(--pastille, auto); width:auto; max-width:none; padding:4px 12px; white-space:normal;
  font-size:12.5px; line-height:1.15; text-align:center; justify-content:center; scroll-snap-align:none; }
.prisme-tous:disabled{ opacity:.45; }

.prisme-pastille.est-verrou, .prisme-ligne.est-verrou{ opacity:.38; }

.prismes-rapides .prisme-pastille.est-verrou{ opacity:.6; }
.prisme-cadenas{ flex:0 0 auto; width:15px; height:15px; fill:none; stroke:var(--muted); stroke-width:2; stroke-linejoin:round; }
.prisme-pastille:disabled:not(.est-verrou){ opacity:1; color:inherit; cursor:default; }


.cal-carte{ gap:0; padding-top:18px; }
.cal-surtitre{ display:flex; align-items:center; gap:8px; margin:0; color:var(--muted); font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
#cal-icone{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.4; }
.modal-card h2.cal-jour{ margin:6px 0 0; font-size:27px; font-weight:700; letter-spacing:-.015em; line-height:1.15; }
.cal-jour::first-letter, .cal-nom::first-letter{ text-transform:uppercase; }
.cal-depuis{ margin:3px 0 0; color:var(--muted); font-size:13.5px; }
.cal-depuis[hidden]{ display:none; }
.cal-mois{ display:flex; align-items:center; justify-content:space-between; margin-top:12px; }
.cal-nom{ font-size:17px; font-weight:650; }
.cal-an{ color:var(--muted); font-weight:400; }
.cal-fleche{ width:var(--tap); height:var(--tap); display:grid; place-items:center; border-radius:50%; }
.cal-fleche svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.cal-fleche.est-absente{ visibility:hidden; }
.cal-semaine{ display:grid; grid-template-columns:repeat(7, 1fr); margin-top:8px; color:var(--muted); font-size:11px; font-weight:600; letter-spacing:.08em; text-align:center; text-transform:uppercase; }
.cal-fenetre{ overflow:hidden; touch-action:none; margin-top:4px; }
.cal-bande{ display:flex; width:300%; transform:translateX(calc(-100% / 3)); }
.cal-bande.en-vol{ transition:transform .24s cubic-bezier(.2,.8,.2,1); }
.cal-grille{ flex:0 0 calc(100% / 3); display:grid; grid-template-columns:repeat(7, 1fr); grid-auto-rows:46px; }
.cal-case{ position:relative; display:grid; place-items:center; }
.cal-jour-case{ font-size:15px; font-variant-numeric:tabular-nums; border-radius:12px; }
.cal-jour-case.est-hors{ color:color-mix(in srgb, var(--fg) 20%, transparent); cursor:default; }
.cal-jour-case.est-aujourdhui::before{ content:''; position:absolute; left:50%; top:50%; width:36px; height:36px; transform:translate(-50%, -50%); border-radius:50%; box-shadow:inset 0 0 0 1.1px color-mix(in srgb, var(--fg) 45%, transparent); }
.cal-jour-case:has(.cal-anneau)::before, .cal-jour-case:has(.cal-anneau) .cal-points{ display:none; }
.cal-jour-case:has(.cal-anneau) .cal-chiffre{ font-weight:700; }
.cal-anneau{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); pointer-events:none; overflow:visible; }
.cal-anneau circle{ fill:none; stroke:var(--fg); }

.cal-points{ position:absolute; left:0; right:0; top:calc(50% + 11px); display:flex; flex-direction:column; align-items:center; gap:1.6px; pointer-events:none; }
.cal-rang{ display:flex; gap:2.6px; }
.cal-points i{ width:3.2px; height:3.2px; border-radius:50%; background:var(--muted); }

.cal-apercu{ min-height:52px; max-height:118px; margin-top:6px; display:flex; flex-direction:column; gap:6px;
  overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; touch-action:pan-x pan-y;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 var(--fondu-debut, 0px), #000 calc(100% - var(--fondu-fin, 0px)), transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 var(--fondu-debut, 0px), #000 calc(100% - var(--fondu-fin, 0px)), transparent 100%); }
.cal-apercu::-webkit-scrollbar, .cal-souvenir-texte::-webkit-scrollbar{ display:none; }
.cal-souvenir{ margin:0; display:flex; align-items:center; gap:10px; font-size:14.5px; line-height:1.3; min-width:0; flex:0 0 auto; }
.cal-souvenir-point{ flex:0 0 auto; width:8px; height:8px; border-radius:50%; }
.cal-souvenir-texte{ flex:1 1 auto; min-width:0; overflow-x:auto; white-space:nowrap; scrollbar-width:none; overscroll-behavior-x:contain;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 var(--fondu-debut, 0px), #000 calc(100% - var(--fondu-fin, 0px)), transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, #000 var(--fondu-debut, 0px), #000 calc(100% - var(--fondu-fin, 0px)), transparent 100%); }
.cal-rien{ margin:0; color:var(--muted); font-size:14px; }
.cal-actions{ display:flex; justify-content:flex-end; margin-top:10px; min-height:46px; }

.cal-carte.entre{ animation:cal-monte .36s cubic-bezier(.2,.9,.25,1.15) both; }
@keyframes cal-monte{ from{ transform:translateY(48px); opacity:.4; } to{ transform:none; opacity:1; } }
.cal-anneau.entre{ animation:cal-anneau .34s cubic-bezier(.2,.8,.2,1) both; }
@keyframes cal-anneau{ from{ transform:translate(-50%, -50%) rotate(-120deg) scale(.55); opacity:0; } to{ transform:translate(-50%, -50%); opacity:1; } }
.cal-souvenir.entre{ animation:cal-souvenir .28s ease-out both; }
@keyframes cal-souvenir{ from{ transform:translateY(6px); opacity:0; } to{ transform:none; opacity:1; } }
.cal-envol{ position:fixed; inset:0; width:100%; height:100%; z-index:40; pointer-events:none; overflow:visible; }
.cal-envol circle{ stroke:var(--fg); }

.evoquer-anneau.en-voyage, .cal-anneau.en-voyage{ visibility:hidden; }


.modal.feuille-du-bas{ align-items:flex-end; padding:0; }
.feuille-carte{
  max-width:640px; max-height:78dvh; border-radius:18px 18px 0 0; border-bottom:none;
  padding:16px var(--pad) calc(16px + env(safe-area-inset-bottom, 0px));
  display:flex; flex-direction:column; gap:10px;
}
.prismes-liste{ display:flex; flex-direction:column; gap:8px; overflow:auto; min-height:0; }
.prisme-ligne{ width:100%; min-height:52px; padding:8px 14px; border-radius:12px; flex:0 0 auto; }
.prisme-compte{ flex:0 0 auto; color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums; }

.couleur-nom-boite{ position:relative; }
.couleur-nom-boite .set-champ{ padding-right:88px; }

.couleur-nom-aide{
  position:absolute; right:2px; top:0; bottom:0; padding:0 10px;
  font:13px/1 inherit; font-family:inherit; color:var(--muted);
  background:none; border:0; cursor:pointer;
}
.couleur-nom-aide.est-appuye{ box-shadow:none; }
#couleur-nom:not(:focus) + .couleur-nom-aide{ display:none; }

.prisme-ajout{ justify-content:center; color:var(--muted); background:transparent; border-style:dashed; }

.prismes-liste{
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 var(--fondu-debut, 0px), #000 calc(100% - var(--fondu-fin, 0px)), transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 var(--fondu-debut, 0px), #000 calc(100% - var(--fondu-fin, 0px)), transparent 100%);
}

.couleur-grille{ display:grid; grid-template-columns:repeat(6, 1fr); gap:12px; padding:4px 2px 8px; }
.couleur-pastille{
  position:relative; aspect-ratio:1; width:100%; max-width:56px; justify-self:center;
  border-radius:50%; border:none; padding:0; background:var(--teinte);
  box-shadow:inset -3px -4px 8px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.35);
}
.couleur-pastille[aria-pressed="true"]{ outline:2px solid var(--fg); outline-offset:3px; }
.couleur-pastille.est-prise::after{
  content:""; position:absolute; left:50%; top:50%; width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
  border-radius:50%; background:rgba(0,0,0,.55);
}
#couleur-choisir{ align-self:flex-end; }

.couleur-hasard{ background:conic-gradient(#e0605a, #e0b45a, #9ad85a, #5ad8a8, #5aa8e0, #8a6ae0, #e05ab4, #e0605a); }

.atelier{ display:flex; align-items:center; gap:14px; padding:4px 2px; }
.atelier:empty{ display:none; }
.atelier-apercu{
  flex:0 0 auto; width:56px; height:56px; border-radius:50%; background:var(--teinte);
  box-shadow:inset -4px -5px 10px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.35);
}
.atelier-reglettes{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:10px; }
.atelier-piste{
  -webkit-appearance:none; appearance:none; width:100%; height:22px; margin:0;
  background:transparent; touch-action:pan-y;
}
.atelier-piste::-webkit-slider-runnable-track{ height:12px; border-radius:6px; background:var(--degrade); }
.atelier-piste::-moz-range-track{ height:12px; border-radius:6px; background:var(--degrade); }
.atelier-piste::-webkit-slider-thumb{
  -webkit-appearance:none; width:22px; height:22px; margin-top:-5px; border-radius:50%;
  background:#fff; border:2px solid rgba(0,0,0,.35); box-shadow:0 1px 4px rgba(0,0,0,.4);
}
.atelier-piste::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background:#fff; border:2px solid rgba(0,0,0,.35); }


.pill--axe{
  border-color:color-mix(in srgb, var(--axe, var(--line)) 55%, var(--line));
  color:color-mix(in srgb, var(--encre, var(--axe, currentColor)) 72%, var(--fg));
}

.add-detruire{ display:flex; justify-content:flex-end; margin-top:22px; }



.rech-scroll{
  position:absolute; inset:0; overflow:auto; overscroll-behavior:contain;
  padding:14px var(--pad) var(--fin);
  padding-inline:max(var(--pad), calc((100% - 640px) / 2 + var(--pad)));
}

.rech-champ{
  position:sticky; top:0; z-index:2; width:100%; box-sizing:border-box;
  font:17px/1.3 inherit; color:inherit;
  padding:12px 14px; border-radius:12px;
  border:1px solid var(--line); background:var(--card);
}

.rech-champ:focus{
  outline:2px solid color-mix(in srgb, var(--fg) 30%, transparent); outline-offset:-2px;
}
.rech-aide{ margin:8px 2px 0; color:var(--muted); font-size:.8rem; }
.rech-vide{ margin:26px 2px; color:var(--muted); }

.rech-diese{ cursor:pointer; }
.rech-diese-mot{ color:var(--fg); font-weight:600; }
.rech-diese.est-choisi .rech-diese-mot{ text-decoration:underline; }

#view-recherche .sheet-item{ cursor:pointer; }

.rech-commandes{
  font:14px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  margin:0 0 14px; padding:6px 0; border-bottom:1px solid var(--line);
}

#view-recherche .surligne{
  background:none;
  color:color-mix(in srgb, var(--sheet-accent) 55%, var(--fg));

  font-weight:800;
}

#view-recherche .axe-bloc:first-child{ margin-top:14px; padding-top:14px; border-top:0; }




#view-axe{ touch-action:pan-y; }
.axe-scroll.is-dragging{ transition:none; }

.axe-scroll.is-ghost{ pointer-events:none; }

.sonde{
  position:absolute; z-index:8; left:8px; bottom:var(--fin);
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; font-size:19px; line-height:1;
  color:var(--fg); background:var(--card);
  border:1px solid var(--line); opacity:.75;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.sonde.a-reussi{ opacity:1; color:var(--fg); border-color:var(--fg); }
.sonde.a-echoue{ opacity:1; color:var(--danger, #d85858); border-color:currentColor; }

.axe-scroll.is-ghost,
.axe-scroll.is-dragging,
.axe-scroll.sans-ascenseur,
#view-axe.pile-bouge .axe-scroll,
#view-axe.pile-vole .axe-scroll{ scrollbar-color:transparent transparent; }
.axe-scroll.is-ghost::-webkit-scrollbar-thumb,
.axe-scroll.is-dragging::-webkit-scrollbar-thumb,
.axe-scroll.sans-ascenseur::-webkit-scrollbar-thumb,
#view-axe.pile-bouge .axe-scroll::-webkit-scrollbar-thumb,
#view-axe.pile-vole .axe-scroll::-webkit-scrollbar-thumb{ background:transparent; }
@media (prefers-reduced-motion: reduce){
  .axe-scroll{ transition:none; }
}
.axe-scroll{
  position:absolute; inset:0; overflow:auto; overscroll-behavior:contain;

  touch-action:pan-y;

  transition:transform .26s cubic-bezier(.22,.9,.28,1);

  padding:14px var(--pad) max(var(--blanc-axe), var(--fin));
  padding-inline:max(var(--pad), calc((100% - 640px) / 2 + var(--pad)));
}

.axe-bloc{ padding-top:24px; border-top:1px solid var(--line); }

.axe-bloc.est-cale{ content-visibility:auto; }
.axe-bloc + .axe-bloc{ margin-top:var(--blanc-axe); }

@keyframes cran-pas{
  0%{ transform:none; }
  35%{ transform:translateY(-3px) scale(1.045); }
  100%{ transform:none; }
}
.axe-bloc-titre.fait-le-pas{ animation:cran-pas .22s ease-out; transform-origin:left center; }
.axe-bloc-titre{
  display:flex; align-items:center; gap:7px;
  margin:0 0 14px; font-size:.92rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.09em;
}


.axe-ajout{
  --i:26px;
  position:relative; flex:0 0 auto; padding:0;
  width:var(--i); height:var(--i); display:grid; place-items:center;
  border:0; border-radius:50%; background:none;
  color:var(--axe, var(--muted));
}
.axe-ajout::after{
  content:''; position:absolute;
  inset:calc((var(--tap) - var(--i)) / -2);
}
.axe-ajout svg{
  width:82%; height:82%;
  fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round;
}
#view-axe .sheet-list{ margin:0; padding:0; list-style:none; }

#view-axe .sheet-item{ margin-left:var(--retrait, 0px); animation:none; }

@keyframes souvenir-vise{
  from{ box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--sheet-accent) 85%, transparent); }
  to{ box-shadow:inset 0 0 0 2px transparent; }
}

#view-axe .sheet-item.est-visee{ animation:souvenir-vise 1s linear; }


@media (hover: hover) and (pointer: fine){
  #view-axe .sheet-item.est-au-centre{
    box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--sheet-accent) 40%, transparent);
  }
}



svg.map .is-pale{ opacity:.10; }

svg.map [data-branche]{ transition:opacity .08s ease; }




.axe-vide{
  margin:0; padding:24px var(--pad); color:var(--muted);
  text-align:center; font-size:14px;
}



#palette{
  position:fixed; z-index:19; left:50%; top:calc(var(--icone) + 20px);
  transform:translateX(-50%); width:min(560px, calc(100vw - 32px));
  max-height:calc(100dvh - var(--icone) - 40px);
  display:flex; flex-direction:column;
  background:var(--card); color:var(--fg); border:1px solid var(--line);
  border-radius:12px; box-shadow:0 18px 48px rgba(0,0,0,.35);
  font:14px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow:hidden;
}
#palette[hidden]{ display:none; }
.palette-titre{
  margin:0; padding:10px 14px 0; color:var(--muted);
  font-size:12px; text-transform:uppercase; letter-spacing:.08em;
}
.palette-ligne{
  display:flex; align-items:center; gap:8px; padding:12px 14px;
  border-bottom:1px solid var(--line); white-space:pre;
}
.palette-invite{ color:var(--muted); }
.palette-curseur{
  display:inline-block; width:8px; height:1.1em; background:var(--fg);
  opacity:.8; animation:palette-cligne 1.1s steps(2, start) infinite;
}
@keyframes palette-cligne{ to{ opacity:0; } }
.palette-liste{
  list-style:none; margin:0; padding:6px 0; overflow-y:auto;
  overscroll-behavior:contain;
}
.palette-item{
  display:flex; align-items:baseline; gap:14px; padding:7px 14px;
  cursor:pointer;
}
.palette-item.est-choisi{ background:color-mix(in srgb, var(--fg) 10%, transparent); }
.palette-item.est-loin{ opacity:.45; }
.palette-nom{ flex:0 0 11em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.palette-detail{
  flex:1; color:var(--muted); font-family:system-ui, sans-serif; font-size:13px;
  min-width:0;
}
.est-manuel .palette-item{ padding:9px 14px; }
.est-manuel .palette-detail{ white-space:normal; }
.palette-vide{ padding:10px 14px; color:var(--muted); }


.secret-masque{ -webkit-text-security:disc; }


.curseurs{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; flex-direction:column; max-height:85dvh;
  padding-bottom:env(safe-area-inset-bottom);
  background:color-mix(in srgb, var(--card) 94%, transparent);
  border-top:1px solid var(--line); border-radius:16px 16px 0 0;
  box-shadow:0 -8px 24px rgba(0,0,0,.35); color:var(--fg);
  transition:height .18s ease-out;
  user-select:none; -webkit-user-select:none;
}
.curseurs.is-tiree{ transition:none; }
.curseurs-poignee{ flex:none; touch-action:none; cursor:grab; padding:6px 16px 8px; }
.curseurs-barre{ display:block; width:40px; height:4px; margin:0 auto 6px;
                 border-radius:2px; background:var(--muted); opacity:.6; }
.curseurs-tete{ display:flex; align-items:baseline; gap:8px; min-height:24px; }
.curseurs-titre{ font-weight:600; font-size:14px; }
.curseurs-cas{ flex:1; min-width:0; font-size:12px; color:var(--muted);
               white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.curseurs-liste{ flex:1; min-height:0; overflow-y:auto; padding:0 16px 16px;
                 overscroll-behavior:contain; touch-action:pan-y; }
.curseurs-groupe{ display:flex; align-items:center; gap:8px; width:100%; margin:0;
                  padding:14px 0; border:0; border-top:1px solid var(--line); background:none;
                  font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
                  color:var(--fg); text-align:left; }
.curseurs-groupe::after{ content:'›'; margin-left:auto; font-size:18px; color:var(--muted);
                         transition:transform .15s; }
.curseurs-groupe[aria-expanded="true"]::after{ transform:rotate(90deg); }
.curseurs-groupe-compte{ min-width:20px; padding:0 6px; border-radius:10px; font-size:11px;
                         line-height:20px; text-align:center; background:var(--line); color:var(--fg); }
.curseur{ padding:10px 0 12px; border-top:1px solid var(--line); }
.curseur-haut{ display:flex; align-items:center; gap:10px; font-size:14px; }
.curseur-nom{ flex:1; min-width:0; }
.curseur-valeur{ font-variant-numeric:tabular-nums; color:var(--muted); }
.curseur.is-retouche .curseur-valeur{ color:var(--fg); font-weight:600; }
.curseur-remise{ visibility:hidden; width:32px; height:32px; border-radius:50%;
                 border:1px solid var(--line); background:none; color:var(--fg); font-size:16px; }
.curseur.is-retouche .curseur-remise{ visibility:visible; }
.curseur-aide{ margin:4px 0 8px; font-size:12px; line-height:1.35; color:var(--muted); }
.curseur.is-inactif{ opacity:.4; }

.curseur-piste{ position:relative; height:32px; touch-action:pan-y; outline:none; }
.curseur-piste::before{ content:''; position:absolute; left:0; right:0; top:14px; height:4px;
                        border-radius:2px; background:var(--line); }
.curseur-rempli{ position:absolute; left:0; top:14px; height:4px; border-radius:2px;
                 background:var(--muted); }
.curseur-pouce{ position:absolute; top:6px; width:20px; height:20px; margin-left:-10px;
                border-radius:50%; background:var(--fg); box-shadow:0 1px 4px rgba(0,0,0,.4);
                transition:transform .1s; }
.curseur-piste.is-reglee .curseur-pouce,
.curseur-piste:focus-visible .curseur-pouce{ transform:scale(1.25); }
.curseur-bascule{ width:46px; height:28px; border-radius:14px; border:1px solid var(--line);
                  background:var(--line); position:relative; padding:0; flex:none; }
.curseur-bascule::after{ content:''; position:absolute; top:3px; left:3px; width:20px; height:20px;
                         border-radius:50%; background:var(--muted); transition:left .15s; }
.curseur-bascule[aria-checked="true"]{ background:var(--muted); }
.curseur-bascule[aria-checked="true"]::after{ left:21px; background:var(--fg); }
.curseurs-tout{ margin-top:18px; }
.curseurs-alerte{ margin:4px 0 0; font-size:12px; color:var(--fg); }
.curseurs-alerte:empty{ display:none; }

.curseur-piste.is-bloquee .curseur-pouce{ background:var(--muted); transform:scale(1.1); }

.curseurs-selectionnable{ user-select:text; -webkit-user-select:text; word-break:break-all; color:var(--fg); }

svg.map .ellipses-supports ellipse{ fill:none; stroke:var(--muted); stroke-opacity:.35; stroke-width:.6; }



#view-month.sol-grain::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:var(--sol-image); background-repeat:var(--sol-repeat);
  background-size:var(--sol-size); will-change:transform;
}


#view-trophees{ touch-action:pinch-zoom; }
svg.trophees{ display:block; user-select:none; -webkit-user-select:none; }
svg.trophees .trophee{ cursor:pointer; }
svg.trophees .trophee-secret{ text-anchor:middle; font:700 1em system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
.trophee-panneau{
  position:absolute; left:16px; right:16px; bottom:16px; padding:16px 18px 14px;
  background:color-mix(in srgb, var(--card) 96%, transparent);
  border:1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius:16px;
  box-shadow:0 10px 34px color-mix(in srgb, #000 14%, transparent);
}
.trophee-ferme{ position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:50%;
  border:none; background:var(--bg); color:var(--fg); font-size:18px; line-height:1; }
.trophee-nom{ font-size:17px; font-weight:700; margin:0 36px 2px 0; }

.trophee-regle{ font-size:13px; line-height:1.35; color:var(--muted); margin:0 36px 0 0; }
.trophee-souvenir{ margin:12px 0 0; padding-left:10px; border-left:2px solid var(--line); }
.trophee-souvenir-titre, .trophee-souvenir-date{ display:block; font-size:11px; color:var(--muted); }
.trophee-souvenir-titre{ text-transform:uppercase; letter-spacing:.08em; margin-bottom:3px; }
.trophee-souvenir-texte{ font-size:14px; margin:0 0 3px; line-height:1.4; min-height:5.6em;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }

.trophee-rail{ display:flex; gap:16px; margin-top:12px; overflow-x:auto; scroll-snap-type:x mandatory;
  touch-action:pan-x; overscroll-behavior-x:contain; scrollbar-width:none; }
.trophee-rail::-webkit-scrollbar{ display:none; }
.trophee-rail > .trophee-souvenir{ flex:0 0 100%; box-sizing:border-box; margin:0; scroll-snap-align:start; }
.trophee-points{ display:flex; justify-content:center; gap:6px; margin-top:8px; }
.trophee-points span{ width:6px; height:6px; border-radius:50%; background:var(--line); }
.trophee-points span.est-la{ background:var(--fg); }
.trophee-essai{ margin-top:12px; padding:7px 14px; border-radius:16px; border:1px solid var(--line);
  background:var(--bg); color:var(--fg); font-size:13px; font-weight:600; }
.trophee-tout{ position:absolute; top:10px; left:12px; margin:0; }
.trophee-ruban{ position:absolute; top:10px; left:50%; transform:translateX(-50%); margin:0; }
.trophee-arrivee{ position:absolute; top:10px; right:12px; margin:0; }
.trophee-palier{ position:absolute; bottom:12px; right:12px; margin:0; }
.trophee-tout-gagner{ position:absolute; bottom:56px; left:12px; margin:0; }

#view-trophees:has(> #trophee-panneau:not([hidden])) > .trophee-essai,
#view-trophees:has(> #trophee-panneau:not([hidden])) > .medailles-reglages{ display:none; }
.trophee-bac{ display:flex; gap:8px; }
.trophee-spirale{ position:absolute; bottom:12px; left:50%; transform:translateX(-50%); margin:0; }
.trophee-palier-ligne{ font-size:13px; color:var(--fg); margin:4px 0 0; font-variant-numeric:tabular-nums; }

@keyframes palier-souffle{ 0%,100%{ stroke-opacity:.7; } 50%{ stroke-opacity:1; } }
@keyframes palier-pouls{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.7); } }
@keyframes palier-tour{ to{ transform:rotate(360deg); } }
.palier-proche .palier-arc{ animation:palier-souffle 1.6s ease-in-out infinite; }
.palier-tete{ transform-box:view-box; animation:palier-pouls 1.6s ease-in-out infinite; }
.palier-reflet{ transform-box:view-box; animation:palier-tour 3.2s linear infinite; }
@media (prefers-reduced-motion: reduce){ .palier-arc, .palier-tete, .palier-reflet{ animation:none; } }

#view-trophees svg.trophees-arrivee{ position:absolute; left:0; top:0; pointer-events:none; overflow:visible; }
svg.trophees-arrivee *{ transform-box:view-box; transform-origin:0 0; }
svg.trophees-arrivee .arrivee-voile{ fill:var(--bg); fill-opacity:0; }
svg.trophees-arrivee text{ font:600 14px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  paint-order:stroke; stroke:var(--bg); stroke-width:3px; stroke-linejoin:round; }
svg.trophees-arrivee .arrivee-titre{ fill:var(--muted); font-weight:500; letter-spacing:.16em; text-transform:uppercase; }
svg.trophees .trophee-compte{ transform-box:fill-box; transform-origin:center; }
.arrivees-essai .trophee-essai[aria-pressed="true"]{ border-color:var(--fg); }
.arrivees-essai-aide{ font-size:12px; color:var(--muted); margin:8px 0 0; }
.medailles-reglages{ position:absolute; z-index:5; top:48px; left:12px; right:12px; padding:10px 14px;
  border-radius:14px; border:1px solid var(--line); background:var(--bg); touch-action:none; }
.medailles-reglages[hidden]{ display:none; }
.medailles-reglage{ display:grid; grid-template-columns:1fr auto; gap:2px 8px; margin-bottom:8px;
  font-size:13px; color:var(--fg); }
.medailles-reglage input{ grid-column:1 / -1; width:100%; }
.medailles-valeur{ color:var(--muted); font-variant-numeric:tabular-nums; }
.medailles-reglages .trophee-essai{ margin-top:4px; }


#topbar[data-vue="month"] #btn-year{ order:0; color:var(--muted); }
#topbar[data-vue="month"] #btn-search{ order:1; }
#topbar[data-vue="month"] #titre-bloc{ order:2; flex:0 1 auto; margin:0 auto; }
#topbar[data-vue="month"] #btn-coffre{ order:3; }
#topbar[data-vue="month"] #btn-cours{ order:4; }
#topbar[data-vue="month"] #btn-menu{ order:5; }
#topbar button.suit-le-doigt{ will-change:transform; }
#view-trophees .medaille{ position:absolute; transform-origin:50% 0; touch-action:none; pointer-events:none; }
#view-trophees .medaille.est-vivante{ pointer-events:auto; cursor:grab; }

#view-trophees .medaille:has(> .astuce-cadre){ z-index:41; }

.trophee-palier-tete{ display:flex; align-items:center; gap:10px; margin:0 0 10px; padding:0 0 10px;
  border-bottom:1px solid var(--line); }
.trophee-palier-pastille{ flex:none; display:inline-flex; align-items:center; gap:6px; margin-top:1px;
  padding:3px 9px 3px 7px; border-radius:999px; font-size:11px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--fg); background:color-mix(in srgb, var(--fg) 8%, transparent); }
.trophee-palier-pastille::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--metal, var(--muted)); }
.trophee-palier-pastille.est-diamant::before{ content:none; }
.trophee-palier-losange{ display:block; flex:none; }
.trophee-palier-regle{ margin:0; font-size:15px; font-style:italic; font-weight:500; line-height:1.3; color:var(--fg); }

.trophee-complet{ margin-left:10px; font-size:.62em; font-style:italic; font-weight:500; color:var(--muted); }

#view-trophees .medaille-regardee{ position:absolute; pointer-events:none; border-radius:50%; box-sizing:border-box;
  border:2px solid color-mix(in srgb, var(--fg) 80%, transparent);
  box-shadow:0 0 12px color-mix(in srgb, var(--fg) 35%, transparent); }
#view-trophees .medaille.en-attente{ pointer-events:auto; cursor:pointer; }

#view-trophees .medaille.est-appuye{ box-shadow:none; }
#view-trophees .medaille.bouge{ will-change:transform; }
#view-trophees .medaille svg{ display:block; overflow:visible; }
#view-trophees svg.trophees-clous{ position:absolute; left:0; top:0; pointer-events:none; }
#view-trophees .ruban-mou{ position:absolute; pointer-events:none; }

#view-trophees svg [data-trophee]{ transform-box:fill-box; transform-origin:center; }
#view-trophees .ruban-mou.bouge{ will-change:transform; }
#view-trophees .ruban-mou svg{ display:block; overflow:visible; }
svg.trophees .tringle{ stroke:var(--line); stroke-width:2; stroke-linecap:round; }
svg.trophees .crochet{ fill:var(--muted); }

svg.trophees .trophee-compte{ text-anchor:middle; font:600 12px system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  letter-spacing:.2em; text-transform:uppercase; }
svg.trophees .trophee-compte.ombre{ fill:#000; fill-opacity:.55; }
svg.trophees .trophee-compte.lumiere{ fill:#fff; fill-opacity:.07; }
svg.trophees .trophee-compte.creux{ fill:var(--muted); fill-opacity:.6; }
svg.trophees .trophee-moyeu{ fill:var(--card); stroke:var(--line); }
svg.trophees .trophee-attente{ fill:var(--bg); stroke-opacity:.28; stroke-width:1.2; }
.trophee-tout{ top:auto; bottom:12px; }


.astuce{
  position:fixed; z-index:45; left:16px; right:16px; margin:0 auto; max-width:480px;


  bottom:calc(16px + env(safe-area-inset-bottom, 0px) + var(--clavier-carte, var(--clavier, 0px)));
  background:var(--card); color:var(--fg); border:1px solid var(--line); border-radius:16px;
  padding:12px 14px; box-shadow:0 10px 30px rgba(0,0,0,.35); animation:astuce-entre .28s ease-out;
}


.astuce, .astuce-fini{ --bg:#d9d6cf; --fg:#1b1c20; --muted:#55534e; --line:#c2beb5; --card:#e2dfd8; }
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) :is(.astuce, .astuce-fini){ --bg:#14151a; --fg:#e9e7e2; --muted:#8d8b86; --line:#2a2c34; --card:#1c1e25; }
}
:root[data-theme="light"] :is(.astuce, .astuce-fini){ --bg:#14151a; --fg:#e9e7e2; --muted:#8d8b86; --line:#2a2c34; --card:#1c1e25; }
.astuce, .astuce-fini{ color:var(--fg); }


.astuce-fete{ position:fixed; inset:0; z-index:46; pointer-events:none; overflow:visible;
  --fete-fond:#e2dfd8; --fete-trait:#1b1c20; }
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .astuce-fete{ --fete-fond:#1c1e25; --fete-trait:#e9e7e2; } }
:root[data-theme="light"] .astuce-fete{ --fete-fond:#1c1e25; --fete-trait:#e9e7e2; }
.astuce-fete-disque{ fill:var(--fete-fond); filter:drop-shadow(0 8px 22px rgb(0 0 0 / .35)); }
.astuce-fete-coche{ fill:none; stroke:var(--fete-trait); stroke-width:9; stroke-linecap:round; stroke-linejoin:round; }
.astuce-fete-voile{ fill:rgb(0 0 0 / .45); }

.astuce.astuce-bravo{ z-index:47; }


.astuce{ transition:opacity .16s ease-out; }
.astuce.astuce-attend-la-page{ opacity:0; pointer-events:none; transition-duration:0s; animation:none; }
.astuce.astuce-en-haut{ bottom:auto; top:calc(16px + env(safe-area-inset-top, 0px) + var(--vue-haut, 0px)); }

.astuce.astuce-au-milieu{ bottom:auto; }
.astuce-cachee, .astuce-doigt-tu{ display:none !important; }

.astuce-cadre{
  position:absolute; z-index:40; pointer-events:none; box-sizing:border-box;
  border:2px solid color-mix(in srgb, var(--fg) 55%, transparent);
  box-shadow:0 0 0 200vmax color-mix(in srgb, var(--bg) 84%, transparent);
}

.astuce-active #sheet, .astuce-active .trophee-panneau{ z-index:42; }

.astuce-voile{ position:fixed; inset:0; width:100%; height:100%; z-index:43; pointer-events:none; }

.astuce-trou{ fill:color-mix(in srgb, var(--bg) 84%, transparent); }
.astuce-ligne{ display:flex; gap:10px; align-items:flex-start; }
.astuce-texte{ margin:0; flex:1; font-size:15px; line-height:1.4; }

.astuce-indice{ margin:6px 0 0; font-size:13px; font-weight:600; color:var(--muted); }
.astuce-croix{ background:none; border:0; color:var(--muted); font-size:24px; line-height:1; padding:0 4px; cursor:pointer; }
.astuce-pied{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; }
.astuce-compte{ color:var(--muted); font-size:12px; }

.astuce-ou{ margin:6px 0 0; color:var(--muted); font-size:12px; }

.astuce-choix-boutons{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; }
.astuce-choix-boutons .pill{ min-height:46px; padding:0 12px; font-size:15px; font-weight:600; }
.astuce-choix-boutons .pill.ghost{
  grid-column:1 / -1; justify-self:center; min-height:36px; border:0;
  font-size:14px; font-weight:400; text-decoration:underline; text-underline-offset:3px;
}
.astuce-suite:disabled{ opacity:.35; }
.astuce.astuce-arrivee{ pointer-events:none; }

.astuce-fini{
  position:fixed; z-index:45; left:50%; bottom:calc(24px + env(safe-area-inset-bottom, 0px) + var(--clavier, 0px));
  display:flex; align-items:center; gap:10px; padding:8px 18px 8px 8px; border-radius:999px;
  background:var(--card); color:var(--fg); border:1px solid var(--line); box-shadow:0 10px 30px rgba(0,0,0,.35);
  pointer-events:none; white-space:nowrap; animation:astuce-fini 1.2s ease both;
}

.astuce-fini.astuce-coche{ bottom:auto; }
.astuce-fini-signe{
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  background:var(--fg); color:var(--bg); font-size:18px; font-weight:700; line-height:1;
}
.astuce-fini-nom{ font-size:15px; font-weight:600; }
@keyframes astuce-fini{
  0%{ opacity:0; transform:translate(-50%, 14px) scale(.96); }
  12%{ opacity:1; transform:translate(-50%, 0) scale(1); }
  82%{ opacity:1; transform:translate(-50%, 0) scale(1); }
  100%{ opacity:0; transform:translate(-50%, 0) scale(1); }
}

.astuce-doigt.astuce-montre{ display:none; }
.astuce-terminer{ background:none; border:0; color:var(--muted); font-size:12px; text-decoration:underline; padding:6px 4px; cursor:pointer; }
.astuce-cadre.astuce-cadre-leger{ box-shadow:none; }
.astuce-doigt{
  --course:110px; position:absolute; z-index:41; width:34px; height:34px; margin:-17px 0 0 -17px;
  border-radius:50%; background:var(--fg); opacity:0; pointer-events:none;
  box-shadow:0 0 0 6px color-mix(in srgb, var(--fg) 18%, transparent), 0 0 24px color-mix(in srgb, var(--fg) 30%, transparent);
}
.astuce-appui{ animation:astuce-appui 1.6s ease-in-out infinite; }
.astuce-maintien{ animation:astuce-maintien 2s ease-in-out infinite; }
.astuce-bas{ animation:astuce-bas 1.8s ease-in-out infinite; }
.astuce-haut{ animation:astuce-haut 1.8s ease-in-out infinite; }
.astuce-cote{ animation:astuce-cote 1.3s ease-in-out infinite; }
.astuce-double{ animation:astuce-double 1.8s ease-in-out infinite; }
.astuce-tirer{ animation:astuce-tirer 2.8s ease-in-out infinite; }

.astuce-maintien::after, .astuce-tirer::after{
  content:''; position:absolute; inset:-10px; border-radius:50%;
  border:3px solid var(--fg); opacity:0; transform:scale(.6);
}
.astuce-maintien::after{ animation:astuce-anneau-maintien 2s linear infinite; }
.astuce-tirer::after{ animation:astuce-anneau-tirer 2.8s linear infinite; }
@keyframes astuce-anneau-maintien{ 0%,15%{ opacity:0; transform:scale(.6); } 30%{ opacity:.8; transform:scale(.6); } 70%{ opacity:.8; transform:scale(1.25); } 85%,100%{ opacity:0; transform:scale(1.25); } }
@keyframes astuce-anneau-tirer{ 0%,10%{ opacity:0; transform:scale(.6); } 18%{ opacity:.8; transform:scale(.6); } 45%{ opacity:.8; transform:scale(1.25); } 55%,100%{ opacity:0; transform:scale(1.25); } }
.astuce-libre{ animation:astuce-appui 1.6s ease-in-out infinite; }
@keyframes astuce-double{
  0%,100%{ opacity:0; transform:scale(1.4); } 12%{ opacity:.6; transform:scale(1); }
  20%{ opacity:.75; transform:scale(.72); } 28%{ opacity:.6; transform:scale(1); }
  36%{ opacity:.75; transform:scale(.72); } 46%{ opacity:.6; transform:scale(1); } 70%{ opacity:0; transform:scale(1); }
}

@keyframes astuce-tirer{
  0%{ opacity:0; transform:translate(0,0) scale(1.4); } 10%{ opacity:.6; transform:translate(0,0) scale(1); }
  18%,45%{ opacity:.8; transform:translate(0,0) scale(.72); }
  80%{ opacity:.8; transform:translate(var(--tx), var(--ty)) scale(.72); }
  94%,100%{ opacity:0; transform:translate(var(--tx), var(--ty)) scale(.72); }
}
@keyframes astuce-entre{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@keyframes astuce-appui{
  0%,100%{ opacity:0; transform:scale(1.4); } 20%{ opacity:.55; transform:scale(1); }
  35%{ opacity:.7; transform:scale(.72); } 55%{ opacity:.55; transform:scale(1); } 75%{ opacity:0; transform:scale(1); }
}
@keyframes astuce-maintien{
  0%,100%{ opacity:0; transform:scale(1.4); } 15%{ opacity:.55; transform:scale(1); }
  30%,70%{ opacity:.75; transform:scale(.72); } 85%{ opacity:0; transform:scale(1); }
}
@keyframes astuce-bas{
  0%{ opacity:0; transform:translateY(0); } 15%{ opacity:.6; transform:translateY(0); }
  70%{ opacity:.6; transform:translateY(var(--course)); } 90%,100%{ opacity:0; transform:translateY(var(--course)); }
}
@keyframes astuce-haut{
  0%{ opacity:0; transform:translateY(0); } 15%{ opacity:.6; transform:translateY(0); }
  70%{ opacity:.6; transform:translateY(calc(-1 * var(--course))); } 90%,100%{ opacity:0; transform:translateY(calc(-1 * var(--course))); }
}
@keyframes astuce-cote{
  0%{ opacity:0; transform:translateX(calc(.6 * var(--course))); } 12%{ opacity:.6; transform:translateX(calc(.6 * var(--course))); }
  45%{ opacity:.6; transform:translateX(calc(-.6 * var(--course))); } 55%{ opacity:0; transform:translateX(calc(-.6 * var(--course))); }
  60%{ opacity:0; transform:translateX(calc(-.6 * var(--course))); } 68%{ opacity:.6; transform:translateX(calc(-.6 * var(--course))); }
  95%{ opacity:.6; transform:translateX(calc(.6 * var(--course))); } 100%{ opacity:0; transform:translateX(calc(.6 * var(--course))); }
}
@media (prefers-reduced-motion: reduce){
  .astuce, .astuce-doigt{ animation:none !important; }
  .astuce-doigt{ opacity:.55; }
}
.plan{ margin:0 0 28px; }
.plan-dessin{ display:block; width:100%; max-width:420px; margin:10px auto 6px; }
.plan-lien{ stroke:var(--line); stroke-width:2; }
.plan-groupe{ fill:none; stroke:var(--line); stroke-width:1.5; stroke-dasharray:4 4; }
.plan-rejeu{ cursor:pointer; }
.plan-tout{ margin-top:10px; }
.plan-tout-aide{ margin-top:6px; font-size:13px; color:var(--muted); }
.plan-rejeu circle{ fill:var(--line); }
.plan-rejeu text{ fill:var(--fg); font-size:13px; }
.plan-geste{ fill:var(--muted); font-size:11px; paint-order:stroke; stroke:var(--bg); stroke-width:5px; stroke-linejoin:round; }
.plan-noeud{ cursor:pointer; outline:none; }
.plan-noeud rect{ fill:var(--card); stroke:var(--line); stroke-width:1.5; }
.plan-noeud text{ fill:var(--fg); font-size:12px; }
.plan-noeud.est-choisi rect{ stroke:var(--fg); }
.plan-detail{ min-height:120px; }
.plan-lieu{ margin:12px 0 6px; font-size:15px; }
.plan-gestes{ list-style:none; margin:0 0 14px; padding:0; }
.plan-gestes li{ display:flex; align-items:baseline; margin:8px 0; line-height:1.4; }
.plan-autres{ margin:4px 0 4px; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.plan-signe{ flex:none; width:22px; color:var(--muted); text-align:center; margin-right:8px; }


.offre-pastille{ margin-left:auto; margin-right:6px; display:inline-flex; align-items:center; gap:7px; padding:6px 12px 6px 9px; border-radius:999px;
  font-size:13.5px; font-weight:650; color:var(--fg);
  background:linear-gradient(135deg, color-mix(in srgb, #e3b65a 20%, var(--card)), var(--card));
  border:1px solid color-mix(in srgb, #e3b65a 45%, transparent); }
.offre-pastille[hidden]{ display:none; }
.offre-pastille small{ color:var(--muted); font-weight:500; font-size:12.5px; }
.offre-anneau{ width:14px; height:14px; flex:0 0 auto; }
.offre-anneau circle{ fill:none; stroke:#e3b65a; }
.offre-page{ position:fixed; inset:0; z-index:25; overflow-y:auto; overscroll-behavior:contain; background:var(--bg); color:var(--fg);
  padding:calc(10px + env(safe-area-inset-top, 0px)) 18px calc(28px + env(safe-area-inset-bottom, 0px)); }
.offre-page[hidden]{ display:none; }
.offre-page > *{ max-width:34rem; margin-left:auto; margin-right:auto; }
.offre-fermer{ display:grid; margin-left:0; }
.offre-niveau{ display:flex; align-items:center; gap:16px; margin-top:4px; }
.offre-niveau h1{ margin:0; font-size:30px; font-weight:750; letter-spacing:-.02em; line-height:1.1; }
.offre-niveau p{ margin:4px 0 0; color:var(--muted); font-size:14px; line-height:1.4; }
.offre-jauge{ width:80px; height:80px; flex:0 0 auto; }
.offre-jauge-fond{ fill:none; stroke:color-mix(in srgb, var(--fg) 12%, transparent); }
.offre-jauge-plein{ fill:none; stroke:#e3b65a; stroke-linecap:round; }
.offre-jauge-n{ text-anchor:middle; fill:var(--fg); font-size:17px; font-weight:750; }
.offre-jauge-u{ text-anchor:middle; fill:var(--muted); font-size:8.5px; }
.offre-h{ margin:24px auto 10px; color:var(--muted); font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.offre-stock{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.offre-tuile{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:12px; display:flex; flex-direction:column; gap:8px; min-width:0; }
.offre-tuile-titre{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; }
.offre-tuile b{ font-size:22px; font-weight:750; letter-spacing:-.01em; }
.offre-tuile b small{ font-size:13px; color:var(--muted); font-weight:500; }
.offre-evo{ width:16px; height:16px; flex:0 0 auto; }
.offre-evo circle{ fill:none; stroke:var(--fg); }
.offre-traits{ display:flex; gap:4px; flex-wrap:wrap; }
.offre-traits i{ width:16px; height:5px; border-radius:3px; background:var(--fg); }
.offre-traits i.vide{ background:color-mix(in srgb, var(--fg) 16%, transparent); }
.offre-note{ color:var(--muted); font-size:12.5px; line-height:1.3; }
.offre-ligne{ margin:0; display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:13px; color:var(--muted); }
.offre-ligne b{ font-size:16px; color:var(--fg); }
.offre-carte{ border-radius:18px; padding:16px; margin-bottom:12px; background:var(--card); border:1px solid var(--line); }
.offre-carte.est-plus{ background:linear-gradient(160deg, color-mix(in srgb, #e3b65a 15%, var(--card)) 0%, var(--card) 60%);
  border-color:color-mix(in srgb, #e3b65a 50%, transparent); }
.offre-carte-tete{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.offre-carte h3{ margin:0; font-size:20px; font-weight:750; }
.offre-prix{ font-size:20px; font-weight:750; text-align:right; }
.offre-prix small{ display:block; font-size:12px; color:var(--muted); font-weight:500; }
.offre-carte ul{ list-style:none; padding:0; margin:10px 0 14px; display:flex; flex-direction:column; gap:7px; font-size:14px; }
.offre-carte li{ display:flex; gap:9px; align-items:baseline; }
.offre-carte li::before{ content:'✓'; color:var(--muted); font-weight:700; }
.offre-carte.est-plus li::before{ color:#e3b65a; }
.offre-acheter{ width:100%; min-height:48px; justify-content:center; font-weight:700; font-size:15.5px; }
.offre-merci, .offre-pied{ color:var(--muted); font-size:13.5px; line-height:1.45; margin:8px auto 0; }


.champ-masque{ -webkit-text-security:disc; text-security:disc; }