/* =====================================================================
   Roger v4 — style « verre liquide ».
   Le décor (ciel, saisons, météo) vit derrière ; l'interface flotte dessus en panneaux de verre.
   Deux teintes de verre, choisies par le moteur d'ambiance selon le décor (jour clair / nuit, orage…) :
   data-teinte="sombre" (par défaut) et data-teinte="claire".
   ===================================================================== */

:root {
  color-scheme: dark;
  --police: "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --encre: #f5f7fc;
  --encre-2: rgba(235, 241, 255, 0.74);
  --encre-3: rgba(225, 232, 250, 0.52);
  --verre: rgba(20, 30, 58, 0.38);
  --verre-fort: rgba(24, 36, 68, 0.58);
  --verre-clair: rgba(255, 255, 255, 0.08);
  --reflet: rgba(255, 255, 255, 0.22);
  --bord-verre: rgba(255, 255, 255, 0.14);
  --trait: rgba(255, 255, 255, 0.10);
  --axe: rgba(255, 255, 255, 0.22);
  --ombre: 0 18px 50px rgba(2, 8, 28, 0.35), 0 2px 8px rgba(2, 8, 28, 0.25);
  --flou: blur(26px) saturate(170%);
  --accent: #5ce1f0;                 /* lueur des yeux de Roger ; change selon l'univers */
  --accent-2: #2a78d6;
  --accent-encre: #04121f;
  --accent-doux: rgba(92, 225, 240, 0.16);
  --surface: rgba(22, 32, 60, 0.72);  /* surface des graphiques et fenêtres */
  --surface-2: rgba(255, 255, 255, 0.06);
  --serie-1: #3987e5;
  --serie-2: #d95926;
  --bon: #34d399;
  --bon-texte: #6ee7b7;
  --attention: #fbbf24;
  --critique: #f87171;
  --rayon: 26px;
  --rayon-moyen: 18px;
  --rayon-petit: 13px;
  --ciel-haut: #0b1630;
  --ciel-bas: #1c2c4f;
}
:root[data-teinte="claire"] {
  color-scheme: light;
  --encre: #0d1726;
  --encre-2: rgba(13, 23, 38, 0.72);
  --encre-3: rgba(13, 23, 38, 0.5);
  --verre: rgba(255, 255, 255, 0.42);
  --verre-fort: rgba(255, 255, 255, 0.62);
  --verre-clair: rgba(255, 255, 255, 0.35);
  --reflet: rgba(255, 255, 255, 0.85);
  --bord-verre: rgba(255, 255, 255, 0.55);
  --trait: rgba(13, 23, 38, 0.10);
  --axe: rgba(13, 23, 38, 0.24);
  --ombre: 0 18px 50px rgba(20, 40, 80, 0.18), 0 2px 8px rgba(20, 40, 80, 0.10);
  --accent: #1468c8;
  --accent-encre: #ffffff;
  --accent-doux: rgba(20, 104, 200, 0.12);
  --surface: rgba(255, 255, 255, 0.72);
  --surface-2: rgba(13, 23, 38, 0.05);
  --serie-1: #2a78d6;
  --serie-2: #eb6834;
  --bon-texte: #047857;
  --critique: #c62828;
}

/* ---------------------------------------------------------------- Base */
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { background: var(--ciel-bas); }
body {
  font-family: var(--police); font-size: 15px; line-height: 1.5; color: var(--encre); letter-spacing: -0.005em;
  background: linear-gradient(180deg, var(--ciel-haut), var(--ciel-bas)) fixed;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overflow-x: hidden;
}
#scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#decor { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; contain: strict; will-change: transform; }
#vitre { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 45; contain: strict; }
/* Téléphone : un flou un peu moins large (toujours l'effet verre), bien plus léger à calculer */
@media (pointer: coarse) { :root { --flou: blur(16px) saturate(150%); } }
/* Le vent se ressent aussi sur Roger */
[data-vent="fort"] .roger svg { animation: bourrasque 2.6s ease-in-out infinite; transform-origin: 50% 90%; }
[data-vent="moyen"] .roger svg { animation: bourrasque 4s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes bourrasque { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(4deg) translateX(1px); } 55% { transform: rotate(2deg); } 70% { transform: rotate(5deg) translateX(2px); } }
#app { position: relative; z-index: 2; min-height: 100vh; }
a { color: var(--accent); text-decoration: none; }
h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.15; font-weight: 650; letter-spacing: -0.02em; }
h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
h2 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }
h3 { font-size: 1rem; }
p { margin: .3rem 0 .6rem; }
.icone { flex: none; vertical-align: -0.2em; }
.demarrage { display: grid; place-items: center; min-height: 100vh; color: var(--encre-2); }
.muet { color: var(--encre-3); } .petit { font-size: .85rem; } .gras { font-weight: 600; }
.chiffres { font-variant-numeric: tabular-nums; }
.ligne { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.espace { flex: 1; }
.pile > * + * { margin-top: 1rem; }
.grille { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.grille-2 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.cache { display: none !important; }
.texte-pre { white-space: pre-wrap; word-break: break-word; }
::selection { background: var(--accent-doux); }

/* ---------------------------------------------------------------- Verre (le matériau de toute l'interface) */
.carte, .verre {
  position: relative; border-radius: var(--rayon); padding: 1.15rem 1.25rem;
  background: linear-gradient(160deg, var(--verre-clair), transparent 40%), var(--verre);
  backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou);
  box-shadow: var(--ombre), inset 0 1px 0 var(--reflet), inset 0 0 0 1px var(--bord-verre);
  isolation: isolate;
}
/* Reflet liquide qui glisse doucement sur le verre */
.carte::after, .verre::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(120% 60% at 15% -10%, rgba(255, 255, 255, .16), transparent 55%);
}
.carte.cliquable { cursor: pointer; transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s; }
.carte.cliquable:hover { transform: translateY(-3px) scale(1.005); }
.carte.cliquable:active { transform: scale(.985); }
.carte h2 { display: flex; align-items: center; gap: .55rem; color: var(--encre-2); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; margin-bottom: .8rem; }
.carte h2 .icone { color: var(--accent); }

/* ---------------------------------------------------------------- Mise en page */
.cadre { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.cadre > main { min-width: 0; }
.menu {
  position: sticky; top: 14px; height: calc(100vh - 28px); margin: 14px 0 14px 14px; padding: 1rem .7rem;
  border-radius: 30px; display: flex; flex-direction: column; gap: .15rem; overflow-y: auto;
  background: linear-gradient(170deg, var(--verre-clair), transparent 45%), var(--verre);
  backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou);
  box-shadow: var(--ombre), inset 0 1px 0 var(--reflet), inset 0 0 0 1px var(--bord-verre);
}
.menu .marque { display: flex; align-items: center; gap: .7rem; padding: .3rem .5rem 1.2rem; }
.menu .marque b { font-size: 1.15rem; letter-spacing: -.02em; }
.menu a.entree {
  display: flex; align-items: center; gap: .75rem; padding: .62rem .8rem; border-radius: 16px;
  color: var(--encre-2); font-weight: 500; position: relative; transition: background .2s, color .2s;
}
.menu a.entree:hover { background: var(--surface-2); color: var(--encre); }
.menu a.entree.actif { color: var(--encre); background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06)); box-shadow: inset 0 1px 0 var(--reflet), inset 0 0 0 1px var(--bord-verre); }
.menu a.entree.actif .icone { color: var(--accent); filter: drop-shadow(0 0 6px var(--accent)); }
.menu a.entree .pastille { margin-left: auto; }
.menu .separateur { height: 1px; background: var(--trait); margin: .6rem .6rem; }
.menu .pied { margin-top: auto; padding: .7rem .6rem 0; font-size: .75rem; color: var(--encre-3); }
.contenu { padding: 1.6rem clamp(1rem, 3.2vw, 2.6rem) 7rem; max-width: 1240px; width: 100%; animation: entree-page .55s cubic-bezier(.2, .8, .2, 1); }
.entete-page { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.4rem; flex-wrap: wrap; }
.entete-page h1 { margin: 0; }
.essai { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .65rem; border-radius: 999px; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--attention); background: rgba(251, 191, 36, .12); box-shadow: inset 0 0 0 1px rgba(251, 191, 36, .35); }

.barre-mobile, .onglets-mobile { display: none; }
@media (max-width: 860px), (max-height: 500px) and (orientation: landscape) and (max-width: 1000px) {
  .cadre { grid-template-columns: minmax(0, 1fr); }
  .menu { display: none; }
  .barre-mobile { display: flex; align-items: center; gap: .7rem; padding: calc(.7rem + env(safe-area-inset-top)) 1.1rem .3rem; }
  .barre-mobile b { font-size: 1.05rem; }
  .onglets-mobile {
    display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; z-index: 30;
    left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); padding: .45rem .3rem; border-radius: 28px;
    background: linear-gradient(170deg, var(--verre-clair), transparent 50%), var(--verre-fort);
    backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou);
    box-shadow: var(--ombre), inset 0 1px 0 var(--reflet), inset 0 0 0 1px var(--bord-verre);
  }
  .onglets-mobile a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: .3rem 0; font-size: .68rem; color: var(--encre-3); position: relative; border-radius: 20px; transition: color .2s; }
  .onglets-mobile a.actif { color: var(--encre); }
  .onglets-mobile a.actif .icone { color: var(--accent); filter: drop-shadow(0 0 6px var(--accent)); transform: translateY(-1px); }
  .onglets-mobile .pastille { position: absolute; top: 0; right: calc(50% - 20px); }
  .contenu { padding-top: .6rem; }
  h1 { font-size: 1.65rem; }
}
/* Tablette horizontale : menu fin (icônes + petits libellés) */
@media (min-width: 861px) and (max-width: 1199px) and (min-height: 501px) {
  .cadre { grid-template-columns: 100px minmax(0, 1fr); }
  .menu { padding: .9rem .4rem; }
  .menu .marque { flex-direction: column; padding: .2rem 0 .9rem; text-align: center; gap: .25rem; }
  .menu .marque > div { display: none; }
  .menu a.entree { flex-direction: column; gap: .2rem; padding: .55rem .2rem; font-size: .7rem; text-align: center; }
  .menu a.entree .pastille { position: absolute; top: 3px; right: 10px; margin: 0; }
  .menu .pied { display: none; }
}
@media (min-width: 600px) and (max-width: 860px) {
  .grille-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .onglets-mobile { max-width: 560px; margin: 0 auto; }
}

/* ---------------------------------------------------------------- Boutons « goutte » */
.bouton {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 42px; padding: .55rem 1.15rem; border-radius: 999px; border: 0; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--encre); text-decoration: none; white-space: nowrap;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
  box-shadow: inset 0 1px 0 var(--reflet), inset 0 0 0 1px var(--bord-verre), 0 4px 14px rgba(0,0,0,.12);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), filter .2s, box-shadow .2s;
}
.bouton:hover { filter: brightness(1.08); }
.bouton:active { transform: scale(.96); }
.bouton:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.bouton.principal {
  color: var(--accent-encre);
  background: radial-gradient(120% 90% at 30% 0%, rgba(255,255,255,.55), transparent 45%), linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 6px rgba(0,0,0,.18), 0 8px 24px color-mix(in srgb, var(--accent) 40%, transparent);
}
.bouton.danger { color: var(--critique); }
.bouton.danger.plein { color: #fff; background: radial-gradient(120% 90% at 30% 0%, rgba(255,255,255,.45), transparent 45%), linear-gradient(180deg, #f87171, #c62828); }
.bouton.discret { background: transparent; box-shadow: none; backdrop-filter: none; color: var(--encre-2); }
.bouton.discret:hover { background: var(--surface-2); color: var(--encre); }
.bouton.petit { min-height: 34px; padding: .3rem .85rem; font-size: .85rem; }
.bouton.rond { width: 42px; padding: 0; }
/* Petit éclat liquide au survol */
.bouton::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(60% 120% at var(--x, 50%) -20%, rgba(255,255,255,.35), transparent 60%); opacity: 0; transition: opacity .25s; }
.bouton:hover::after { opacity: 1; }

/* ---------------------------------------------------------------- Champs */
input, textarea, select {
  font: inherit; color: var(--encre); width: 100%; min-height: 44px; padding: .6rem .9rem; border: 0; border-radius: var(--rayon-petit);
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--bord-verre), inset 0 2px 6px rgba(0,0,0,.08);
  transition: box-shadow .2s, background .2s;
}
select option { background: #16213d; color: #fff; }
:root[data-teinte="claire"] select option { background: #fff; color: #0d1726; }
textarea { min-height: 90px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--encre-3); }
input:focus, textarea:focus, select:focus { outline: none; background: var(--verre-clair); box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 4px var(--accent-doux); }
.bouton:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
label.champ { display: block; }
label.champ > span { display: block; font-size: .8rem; color: var(--encre-2); margin-bottom: .35rem; font-weight: 500; }
.interrupteur { display: inline-flex; align-items: center; gap: .7rem; cursor: pointer; user-select: none; }
.interrupteur input { width: 48px; height: 28px; min-height: 0; appearance: none; border-radius: 14px; position: relative; padding: 0; cursor: pointer; flex: none; background: rgba(120, 130, 160, .35); box-shadow: inset 0 0 0 1px var(--bord-verre); }
.interrupteur input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: left .25s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.interrupteur input:checked { background: var(--accent); }
.interrupteur input:checked::after { left: 23px; }

/* Segments (filtres) façon Apple */
.onglets { display: inline-flex; gap: .2rem; flex-wrap: wrap; padding: .25rem; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--bord-verre); margin-bottom: 1rem; max-width: 100%; }
.onglets button { border: 0; background: transparent; color: var(--encre-2); border-radius: 999px; padding: .42rem .95rem; font: inherit; font-size: .88rem; cursor: pointer; transition: background .2s, color .2s; white-space: nowrap; }
.onglets button.actif { color: var(--encre); background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08)); box-shadow: inset 0 1px 0 var(--reflet), 0 2px 8px rgba(0,0,0,.12); font-weight: 600; }
@media (max-width: 600px) { .onglets { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } }

.tourne { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; display: inline-block; animation: tourne .8s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
.chargement { display: flex; align-items: center; gap: .7rem; padding: 2rem 0; color: var(--encre-3); justify-content: center; }
.vide { display: grid; justify-items: center; gap: .8rem; padding: 2.5rem 1rem; text-align: center; color: var(--encre-2); }
.rond-vide { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); background: var(--accent-doux); box-shadow: inset 0 0 0 1px var(--bord-verre), 0 0 30px var(--accent-doux); }
.critique { color: var(--critique); } .bon { color: var(--bon-texte); }

/* ---------------------------------------------------------------- Pastilles de statut (point + texte) */
.badge { display: inline-flex; align-items: center; gap: .45rem; padding: .18rem .65rem .18rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--surface-2); color: var(--encre-2); box-shadow: inset 0 0 0 1px var(--bord-verre); white-space: nowrap; }
.badge .point { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.statut-attente { color: #a7b0c4; }
.statut-file { color: #a78bfa; }
.statut-cours { color: #fbbf24; }
.statut-valider { color: #60a5fa; }
.statut-publication { color: #2dd4bf; }
.statut-publiee { color: #34d399; }
.statut-erreur { color: #f87171; }
.statut-vendue { color: #facc15; }
.statut-abandonnee { color: #8a93a8; }
.badge[class*="statut-"] { color: var(--encre); }
.badge[class*="statut-"] .point { color: inherit; }
.badge.statut-attente .point { background: #a7b0c4; } .badge.statut-file .point { background: #a78bfa; } .badge.statut-cours .point { background: #fbbf24; animation: pouls 1.4s ease-in-out infinite; }
.badge.statut-valider .point { background: #60a5fa; } .badge.statut-publication .point { background: #2dd4bf; animation: pouls 1.4s ease-in-out infinite; } .badge.statut-publiee .point { background: #34d399; }
.badge.statut-erreur .point { background: #f87171; } .badge.statut-vendue .point { background: #facc15; } .badge.statut-abandonnee .point { background: #8a93a8; }
@keyframes pouls { 50% { opacity: .35; } }
.pastille { min-width: 19px; height: 19px; padding: 0 6px; border-radius: 10px; background: linear-gradient(180deg, #ff7b7b, #e23c3c); color: #fff; font-size: .7rem; font-weight: 700; display: inline-grid; place-items: center; box-shadow: 0 2px 8px rgba(226, 60, 60, .45); }
.bandeau { border-radius: var(--rayon-moyen); padding: .75rem 1rem; display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; font-weight: 500; background: var(--verre); backdrop-filter: var(--flou); box-shadow: inset 0 0 0 1px var(--bord-verre); }
.bandeau .icone { flex: none; }
.bandeau.rouge { box-shadow: inset 0 0 0 1px rgba(248, 113, 113, .5); background: rgba(127, 29, 29, .35); }
.bandeau.rouge .icone { color: var(--critique); }
.bandeau.info .icone { color: var(--accent); }
.bandeau.dev .icone { color: var(--attention); }

/* ---------------------------------------------------------------- Chiffres et instruments */
.tuile .etiquette { font-size: .8rem; color: var(--encre-2); letter-spacing: .02em; }
.tuile .valeur { font-size: 2rem; font-weight: 650; letter-spacing: -.03em; margin: .15rem 0; }
.tuile .delta { font-size: .82rem; font-weight: 600; }
.delta.monte { color: var(--bon-texte); } .delta.baisse { color: var(--critique); }
.heros { font-size: clamp(2.8rem, 7vw, 4.2rem); font-weight: 700; letter-spacing: -.045em; line-height: 1; }
.lueur { text-shadow: 0 0 24px color-mix(in srgb, var(--accent) 45%, transparent); }
.jauge { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; box-shadow: inset 0 0 0 1px var(--bord-verre); }
.jauge > div { height: 100%; border-radius: 4px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 60%, transparent), var(--accent)); box-shadow: 0 0 12px var(--accent); transition: width 1.2s cubic-bezier(.2, .8, .2, 1); }
.graphique { position: relative; }
.graphique svg { display: block; width: 100%; height: auto; overflow: visible; }
.graphique .grille-axe { stroke: var(--trait); stroke-width: 1; }
.graphique .ligne-base { stroke: var(--axe); stroke-width: 1; }
.graphique text { fill: var(--encre-3); font-size: 11px; font-family: var(--police); font-variant-numeric: tabular-nums; }
.infobulle { position: absolute; pointer-events: none; z-index: 5; background: var(--verre-fort); backdrop-filter: var(--flou); color: var(--encre); box-shadow: var(--ombre), inset 0 0 0 1px var(--bord-verre); border-radius: 12px; padding: .45rem .7rem; font-size: .82rem; white-space: nowrap; transform: translate(-50%, -112%); }
.legende { display: flex; gap: 1rem; font-size: .82rem; color: var(--encre-2); margin-bottom: .5rem; }
.legende i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .4rem; vertical-align: -1px; }

/* ---------------------------------------------------------------- Accueil */
.heros-accueil { display: flex; align-items: center; gap: 1.2rem; padding: .4rem 0 .6rem; }
.heros-accueil h1 { margin-bottom: .15rem; }
.tableau-bord { display: flex; align-items: center; gap: 1.5rem; justify-content: space-between; padding: 1.6rem 1.8rem; }
.bloc-mois { display: grid; gap: .55rem; justify-items: start; }
.bloc-mois .etiquette { font-size: .85rem; }
.bouton.grand { min-height: 52px; padding: .7rem 1.6rem; font-size: 1.02rem; margin-top: .6rem; }
.cadran { width: 170px; height: 170px; flex: none; }
.cadran .graduations line { stroke: var(--axe); stroke-width: 1.5; stroke-linecap: round; }
.cadran .piste { fill: none; stroke: var(--surface-2); stroke-width: 9; stroke-linecap: round; }
.cadran .aiguille { fill: none; stroke-width: 9; stroke-linecap: round; filter: drop-shadow(0 0 6px var(--accent)); transition: stroke-dasharray 1.4s cubic-bezier(.2, .8, .2, 1); }
.cadran .valeur-cadran { fill: var(--encre); font-size: 24px; font-weight: 700; text-anchor: middle; font-family: var(--police); letter-spacing: -.02em; }
.cadran .legende-cadran { fill: var(--encre-3); font-size: 9.5px; text-anchor: middle; font-family: var(--police); text-transform: uppercase; letter-spacing: .08em; }
.instruments .tuile { display: block; color: inherit; }
.instruments .tuile svg { margin-top: .5rem; }
.liste > a .icone-ligne, .liste > li .icone-ligne { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--surface-2); color: var(--accent); flex: none; }
.icone-ligne.critique { color: var(--critique); background: rgba(248, 113, 113, .12); }
.liste > a { transition: background .2s; border-radius: 12px; }
.liste > a:hover { background: var(--surface-2); }
@media (max-width: 600px) {
  .heros-accueil { flex-direction: column; text-align: center; gap: .6rem; }
  .tableau-bord { flex-direction: column-reverse; padding: 1.3rem; text-align: center; }
  .bloc-mois { justify-items: center; }
  .bloc-mois .bouton.grand { width: 100%; }
  .cadran { width: 150px; height: 150px; }
  .instruments { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
  .instruments .tuile { padding: .8rem .75rem; }
  .instruments .tuile .valeur { font-size: 1.3rem; }
  .instruments .tuile .petit { display: none; }
  .instruments .tuile svg { display: none; }
}

/* ---------------------------------------------------------------- Listes (lignes propres) */
.liste { list-style: none; margin: 0; padding: 0; }
.liste > li, .liste > a { display: flex; align-items: center; gap: .9rem; padding: .8rem .2rem; border-bottom: 1px solid var(--trait); color: inherit; }
.liste > :last-child { border-bottom: 0; }
.liste .titre-ligne { font-weight: 550; }
.fil { list-style: none; margin: 0; padding: 0; }
.fil li { display: grid; grid-template-columns: 30px 1fr; gap: .7rem; padding: .65rem 0; border-bottom: 1px solid var(--trait); }
.fil li:last-child { border-bottom: 0; }
.fil .icone-ligne { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--accent); }
.fil .quand { font-size: .74rem; color: var(--encre-3); }
.fil img.mini { max-width: 120px; border-radius: 12px; margin-top: .4rem; display: block; }

/* ---------------------------------------------------------------- Atelier */
.article-carte { display: grid; grid-template-columns: 72px 1fr; gap: .9rem; align-items: center; }
.article-carte .vignette { width: 72px; height: 90px; border-radius: 16px; background: var(--surface-2); display: grid; place-items: center; overflow: hidden; color: var(--encre-3); }
.article-carte .vignette img { width: 100%; height: 100%; object-fit: cover; }
.article-carte .nom { font-weight: 600; line-height: 1.25; margin-bottom: .35rem; word-break: break-word; }
.galerie { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.galerie figure { margin: 0; position: relative; border-radius: 18px; overflow: hidden; background: var(--surface-2); aspect-ratio: 2 / 3; box-shadow: inset 0 0 0 1px var(--bord-verre); }
.galerie figure img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.galerie figure:hover img { transform: scale(1.04); }
.galerie figure.capture { aspect-ratio: 1; }
.galerie figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: .4rem .55rem; font-size: .74rem; background: linear-gradient(transparent, rgba(0,0,0,.65)); color: #fff; }
.galerie .retirer { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(0,0,0,.45); backdrop-filter: blur(8px); color: #fff; cursor: pointer; display: grid; place-items: center; }
.depot { border-radius: var(--rayon-moyen); padding: 1.3rem; text-align: center; color: var(--encre-2); cursor: pointer; background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--bord-verre); border: 1.5px dashed var(--axe); transition: background .2s; }
.depot.survol { background: var(--accent-doux); border-color: var(--accent); }
.actions-article { position: sticky; top: .7rem; z-index: 6; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; padding: .55rem; border-radius: 999px; background: var(--verre-fort); backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou); box-shadow: var(--ombre), inset 0 1px 0 var(--reflet), inset 0 0 0 1px var(--bord-verre); }
@media (max-width: 860px) { .actions-article { top: calc(8px + env(safe-area-inset-top)); border-radius: 24px; } }
.recap dl { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.1rem; margin: 0; }
.recap dt { color: var(--encre-3); font-size: .88rem; } .recap dd { margin: 0; font-weight: 500; }
.description-annonce { background: var(--surface-2); border-radius: var(--rayon-moyen); padding: .9rem 1rem; white-space: pre-wrap; font-size: .92rem; box-shadow: inset 0 0 0 1px var(--bord-verre); }

/* ---------------------------------------------------------------- Tableaux */
.tableau { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tableau th { text-align: left; font-weight: 600; color: var(--encre-3); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; padding: .5rem .55rem; border-bottom: 1px solid var(--axe); }
.tableau td { padding: .6rem .55rem; border-bottom: 1px solid var(--trait); vertical-align: middle; }
.tableau td.nombre, .tableau th.nombre { text-align: right; font-variant-numeric: tabular-nums; }
.defile { overflow-x: auto; }
.vente { display: grid; grid-template-columns: 52px 1fr auto; gap: .9rem; align-items: center; padding: .8rem 0; border-bottom: 1px solid var(--trait); }
.vente:last-child { border-bottom: 0; }
.vente img, .vente .vignette { width: 52px; height: 52px; border-radius: 14px; object-fit: cover; background: var(--surface-2); display: grid; place-items: center; color: var(--encre-3); }
.journal-ligne { display: grid; grid-template-columns: 118px 80px 1fr; gap: .7rem; padding: .45rem 0; border-bottom: 1px solid var(--trait); font-size: .86rem; }
.journal-ligne.erreur { color: var(--critique); }
@media (max-width: 600px) { .journal-ligne { grid-template-columns: 1fr; gap: 0; } }

/* ---------------------------------------------------------------- Notifications et fenêtres */
.toasts { position: fixed; top: calc(14px + env(safe-area-inset-top)); right: 14px; z-index: 50; display: flex; flex-direction: column; gap: .6rem; width: min(380px, calc(100vw - 28px)); }
.toast { border-radius: 22px; padding: .8rem .9rem; display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: start;
  background: linear-gradient(170deg, var(--verre-clair), transparent 50%), var(--verre-fort); backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou);
  box-shadow: var(--ombre), inset 0 1px 0 var(--reflet), inset 0 0 0 1px var(--bord-verre); animation: goutte-arrivee .6s cubic-bezier(.2, 1.2, .3, 1); }
.toast .titre { font-weight: 650; }
.toast img { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; }
.toast .rond-icone { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-doux); color: var(--accent); }
@keyframes goutte-arrivee { 0% { transform: translateY(-14px) scale(.92); opacity: 0; } 60% { transform: translateY(2px) scale(1.01); opacity: 1; } 100% { transform: none; } }
.fond-modal { position: fixed; inset: 0; background: rgba(4, 10, 25, .45); backdrop-filter: blur(6px); z-index: 60; display: grid; place-items: center; padding: 1rem; animation: fondu .25s ease; }
.modal { border-radius: 28px; padding: 1.4rem; width: min(520px, 100%); max-height: 90vh; overflow: auto;
  background: linear-gradient(170deg, var(--verre-clair), transparent 50%), var(--verre-fort); backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou);
  box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 var(--reflet), inset 0 0 0 1px var(--bord-verre); animation: goutte-arrivee .5s cubic-bezier(.2, 1.2, .3, 1); }
@keyframes fondu { from { opacity: 0; } }

/* ---------------------------------------------------------------- Roger */
.roger { display: inline-block; touch-action: manipulation; cursor: pointer; user-select: none; }
.roger svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .35)) drop-shadow(0 0 18px color-mix(in srgb, var(--accent) 30%, transparent)); }
.roger .tete { transform-origin: 60px 80px; transition: transform .3s ease; }
.roger .flotte-doux { animation: flotter 5s ease-in-out infinite; }
.roger.saute .tete { animation: saut .6s ease; }
.roger.fete .tete { animation: fete 1s ease-in-out infinite; }
.roger.tape .tete { animation: tape 1.2s ease-in-out infinite; }
.roger.dort .tete, .roger.somnole .tete { animation: respire 4s ease-in-out infinite; }
.roger.inquiet .tete { animation: tremble 2.4s ease-in-out infinite; }
@keyframes flotter { 50% { transform: translateY(-6px); } }
@keyframes saut { 30% { transform: translateY(-14px) rotate(-4deg); } 60% { transform: translateY(0) rotate(3deg); } }
@keyframes fete { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-8px) rotate(-6deg); } 75% { transform: translateY(-8px) rotate(6deg); } }
@keyframes tape { 50% { transform: rotate(2deg) translateY(1px); } }
@keyframes respire { 50% { transform: scale(1.02) translateY(1px); } }
@keyframes tremble { 0%, 90%, 100% { transform: translateX(0); } 93% { transform: translateX(-2px); } 96% { transform: translateX(2px); } }
.bulle { position: relative; border-radius: 20px; padding: .75rem 1rem; max-width: 560px;
  background: linear-gradient(170deg, var(--verre-clair), transparent 50%), var(--verre); backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou);
  box-shadow: var(--ombre), inset 0 1px 0 var(--reflet), inset 0 0 0 1px var(--bord-verre); animation: goutte-arrivee .7s cubic-bezier(.2, 1.2, .3, 1); }

/* ---------------------------------------------------------------- Animations d'entrée */
/* Pas de fondu sur la page entière : un parent en fondu empêche le verre de flouter le décor (il « apparaît d'un coup »).
   La page glisse seulement ; chaque carte fait elle-même son fondu, verre compris. */
@keyframes entree-page { from { transform: translateY(8px); } }
@keyframes monte { from { opacity: 0; transform: translateY(18px) scale(.985); } }
.contenu .carte, .contenu .tuile, .contenu .bulle, .contenu .entete-page, .contenu .onglets, .contenu .sous-onglets, .contenu .titre-groupe, .contenu .recherche { animation: monte .5s cubic-bezier(.2, .8, .2, 1) backwards; }
.contenu .grille > :nth-child(2), .contenu .grille-2 > :nth-child(2) { animation-delay: .06s; }
.contenu .grille > :nth-child(3), .contenu .grille-2 > :nth-child(3) { animation-delay: .12s; }
.contenu .grille > :nth-child(4) { animation-delay: .18s; }
.contenu .grille > :nth-child(n+5) { animation-delay: .22s; }

/* Ouverture (4.4) : « décollage ». Roger monte depuis le bas avec une traînée de lumière, deux ondes s'élargissent
   comme une goutte qui touche l'eau, puis l'écran s'ouvre sur l'appli qui se pose en douceur. */
.lancement { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; pointer-events: none;
  background: radial-gradient(55% 45% at 50% 46%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), linear-gradient(180deg, var(--ciel-haut), var(--ciel-bas));
  animation: lancement-fin .75s cubic-bezier(.6, 0, .3, 1) 1.65s forwards; }
.lancement .centre { position: relative; display: grid; place-items: center; gap: .9rem; animation: lancement-roger 1.25s cubic-bezier(.16, 1.25, .3, 1) both, lancement-envol .75s cubic-bezier(.6, 0, .3, 1) 1.6s forwards; }
.lancement .centre::after { content: ""; position: absolute; left: 50%; top: 55%; width: 6px; height: 160px; margin-left: -3px; border-radius: 6px; z-index: -1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 70%, transparent), transparent); filter: blur(3px); animation: trainee 1.1s ease-out both; transform-origin: top; }
.lancement .nom { font-size: 2.3rem; font-weight: 700; letter-spacing: -.03em; opacity: 0; animation: fondu-monte .6s ease .55s forwards; text-shadow: 0 2px 20px rgba(0, 0, 0, .25); }
.lancement .anneau { position: absolute; width: 170px; height: 170px; border-radius: 50%; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 60%, transparent), 0 0 50px color-mix(in srgb, var(--accent) 35%, transparent); animation: anneau 1.5s cubic-bezier(.2, .7, .3, 1) .35s both; }
.lancement .anneau.deux { animation-delay: .6s; }
@keyframes lancement-roger { 0% { transform: translateY(70px) scale(.55); opacity: 0; filter: blur(10px); } 60% { opacity: 1; filter: none; } 100% { transform: none; opacity: 1; } }
@keyframes trainee { 0% { transform: scaleY(0); opacity: 0; } 30% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(.2); opacity: 0; } }
@keyframes lancement-envol { to { transform: translateY(-46px) scale(.82); opacity: 0; filter: blur(4px); } }
@keyframes anneau { 0% { transform: scale(.25); opacity: 0; } 35% { opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes fondu-monte { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes lancement-fin { to { opacity: 0; visibility: hidden; } }
/* Pendant l'ouverture, l'appli attend derrière puis se pose */
html.ouverture .cadre { animation: appli-pose .8s cubic-bezier(.2, .8, .2, 1) 1.75s backwards; }
@keyframes appli-pose { from { transform: translateY(14px) scale(.98); } } /* sans fondu : l'écran d'ouverture qui s'efface fait le fondu */
[data-animations="aucune"] .lancement, [data-animations="aucune"] .au-revoir { display: none; }

/* ---------------------------------------------------------------- Neige posée (Noël, hiver enneigé) */
[data-neige-posee="1"] .carte::before, [data-neige-posee="1"] .menu::before, [data-neige-posee="1"] .onglets-mobile::before, [data-neige-posee="1"] .bouton.principal::before, [data-neige-posee="1"] .actions-article::before {
  content: ""; position: absolute; left: 10px; right: 10px; top: -9px; height: 18px; pointer-events: none; z-index: 3;
  background:
    radial-gradient(14px 10px at 8% 70%, #fff 60%, transparent 62%), radial-gradient(22px 12px at 22% 62%, #fff 60%, transparent 62%),
    radial-gradient(18px 11px at 40% 72%, #fff 60%, transparent 62%), radial-gradient(26px 13px at 58% 60%, #fff 60%, transparent 62%),
    radial-gradient(16px 10px at 76% 70%, #fff 60%, transparent 62%), radial-gradient(22px 12px at 92% 64%, #fff 60%, transparent 62%),
    linear-gradient(#fff, #fff) bottom / 100% 6px no-repeat;
  border-radius: 10px 10px 4px 4px; filter: drop-shadow(0 2px 2px rgba(120, 150, 190, .35));
}
[data-neige-posee="1"] .bouton.principal::before { left: 6px; right: 6px; top: -7px; height: 13px; }

/* ---------------------------------------------------------------- Connexion */
.ecran-connexion { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.ecran-connexion .carte { width: min(440px, 100%); padding: 1.8rem; }
.choix-utilisateur { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.choix-utilisateur button { padding: 1.1rem; border-radius: 22px; border: 0; font: inherit; font-weight: 600; font-size: 1.05rem; cursor: pointer; color: var(--encre); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--bord-verre); transition: transform .2s, box-shadow .2s; }
.choix-utilisateur button:hover { transform: translateY(-2px); }
.choix-utilisateur button.actif { box-shadow: inset 0 0 0 2px var(--accent), 0 0 24px var(--accent-doux); }
.choix-utilisateur .sous { display: block; font-size: .78rem; font-weight: 500; color: var(--encre-3); margin-top: .2rem; }

[data-animations="aucune"] *, [data-animations="aucune"] *::before, [data-animations="aucune"] *::after { animation: none !important; transition: none !important; }
@media print { #decor, #scene, .menu, .onglets-mobile, .barre-mobile, .toasts { display: none !important; } body { background: #fff; color: #000; } }@media (min-width: 601px) { .instruments { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- Parcours guidé (une question par écran) */
.parcours { max-width: 620px; margin: 0 auto; min-height: calc(100vh - 8rem); display: flex; flex-direction: column; gap: 1.2rem; }
.parcours-haut { display: flex; align-items: center; gap: .8rem; }
.progression { flex: 1; display: flex; gap: 6px; }
.progression span { flex: 1; height: 4px; border-radius: 2px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--bord-verre); overflow: hidden; position: relative; }
.progression span::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 0 8px var(--accent); }
.progression span.faite::after, .progression span.active::after { transform: scaleX(1); }
.progression span.active::after { opacity: .65; }
.etape { flex: 1; display: flex; flex-direction: column; gap: .9rem; padding-top: 1.2rem; }
.etape h1 { font-size: clamp(1.7rem, 4.5vw, 2.3rem); margin: 0; }
.etape > .muet { margin: 0; font-size: 1.02rem; }
.etape .numero { margin: 0; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; }
.etape-avant { animation: etape-avant .55s cubic-bezier(.2, .8, .2, 1) backwards; }
.etape-arriere { animation: etape-arriere .55s cubic-bezier(.2, .8, .2, 1) backwards; }
@keyframes etape-avant { from { opacity: 0; transform: translateX(46px); } }
@keyframes etape-arriere { from { opacity: 0; transform: translateX(-46px); } }
.etape > * { animation: fondu-monte .6s cubic-bezier(.2, .8, .2, 1) backwards; }
.etape > :nth-child(2) { animation-delay: .05s; } .etape > :nth-child(3) { animation-delay: .1s; } .etape > :nth-child(4) { animation-delay: .16s; } .etape > :nth-child(5) { animation-delay: .22s; }
.apparait { animation: fondu-monte .45s cubic-bezier(.2, .8, .2, 1) backwards; }
.champ-lien { position: relative; display: flex; gap: .5rem; align-items: center; padding: .35rem .35rem .35rem .4rem; border-radius: 22px; background: var(--verre); backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou); box-shadow: var(--ombre), inset 0 1px 0 var(--reflet), inset 0 0 0 1px var(--bord-verre); }
.champ-lien input { background: transparent; box-shadow: none; font-size: 1.05rem; min-height: 50px; }
.champ-lien input:focus { box-shadow: none; background: transparent; }
.etape textarea { min-height: 130px; font-size: 1.02rem; border-radius: 20px; background: var(--verre); backdrop-filter: var(--flou); }
.grand-depot { width: 100%; display: grid; justify-items: center; gap: .55rem; padding: 2rem 1rem; border-radius: 26px; font: inherit; color: var(--encre); background: var(--verre); backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou); }
.grand-depot:hover { background: var(--accent-doux); }
.puces { display: flex; flex-wrap: wrap; gap: .45rem; }
.puce { padding: .3rem .8rem; border-radius: 999px; font-size: .84rem; color: var(--encre-2); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--bord-verre); }
.recap-parcours { border-radius: 24px; overflow: hidden; background: var(--verre); backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou); box-shadow: var(--ombre), inset 0 1px 0 var(--reflet), inset 0 0 0 1px var(--bord-verre); }
.ligne-recap { width: 100%; display: flex; align-items: center; gap: .8rem; padding: .95rem 1.1rem; border: 0; border-bottom: 1px solid var(--trait); background: transparent; font: inherit; color: var(--encre); text-align: left; cursor: pointer; }
.ligne-recap:last-child { border-bottom: 0; }
.ligne-recap:hover { background: var(--surface-2); }
.ligne-recap .icone { color: var(--accent); }
.parcours-bas { position: sticky; bottom: calc(14px + env(safe-area-inset-bottom)); padding-top: .6rem; z-index: 5; }
.bouton.large { width: 100%; }
.envoi { display: grid; gap: .5rem; justify-items: center; padding: .8rem 1rem; border-radius: 22px; background: var(--verre-fort); backdrop-filter: var(--flou); box-shadow: var(--ombre), inset 0 0 0 1px var(--bord-verre); }
.envoi .jauge { width: 100%; }
.fin-parcours { align-items: center; text-align: center; justify-content: center; gap: 1rem; }
.ligne.centre { justify-content: center; }
.cadre.en-parcours .onglets-mobile { display: none; }
@media (max-width: 860px) { .cadre.en-parcours .contenu { padding-bottom: 1.5rem; } }
.recherche { display: flex; align-items: center; gap: .45rem; padding: 0 .3rem 0 .85rem; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--bord-verre); color: var(--encre-3); min-width: 200px; }
.recherche input { background: transparent; box-shadow: none; min-height: 40px; padding-left: 0; }
.recherche input:focus { box-shadow: none; background: transparent; }
@media (max-width: 600px) { .recherche { width: 100%; } }
.tronque { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vente .detail-vente { grid-column: 1 / -1; display: grid; gap: .8rem; padding: .3rem 0 .4rem; }
.infos { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; font-size: .9rem; }
.infos dt { color: var(--encre-3); } .infos dd { margin: 0; }
.indice { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: 999px; font-size: .78rem; color: var(--encre-3); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--bord-verre); }
.indice.ok { color: var(--bon-texte); }
.autres-filtres { width: auto; min-height: 0; padding: .42rem .9rem; border-radius: 999px; background: transparent; box-shadow: none; color: var(--encre-2); font-size: .88rem; cursor: pointer; }
.autres-filtres.actif { color: var(--encre); background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08)); font-weight: 600; }
.accent { color: var(--accent); }
.alerte h3 { font-size: 1.05rem; }
.galons { flex: none; filter: drop-shadow(0 4px 10px rgba(0,0,0,.3)); }
.insigne { display: inline-flex; gap: 2px; color: #f6c453; filter: drop-shadow(0 0 6px rgba(246,196,83,.5)); }
.badges { display: flex; flex-wrap: wrap; gap: .5rem; }
.badge-gagne { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .8rem .35rem .6rem; border-radius: 999px; font-size: .82rem; font-weight: 550; color: var(--encre-3); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--bord-verre); opacity: .55; }
.badge-gagne.ok { opacity: 1; color: var(--encre); }
.badge-gagne.ok .icone { color: #f6c453; filter: drop-shadow(0 0 5px rgba(246,196,83,.6)); }
.classement { list-style: none; margin: 0; padding: 0; }
.classement li { display: flex; align-items: center; gap: .8rem; padding: .65rem 0; border-bottom: 1px solid var(--trait); }
.classement li:last-child { border-bottom: 0; }
.rang { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; background: var(--surface-2); flex: none; }
.rang-1 { background: linear-gradient(180deg, #ffe7a3, #c9952f); color: #3a2a05; } .rang-2 { background: linear-gradient(180deg, #f1f4f8, #a7b0bd); color: #2a2f38; } .rang-3 { background: linear-gradient(180deg, #f3c39a, #b06a35); color: #3a1f0a; }
.choix-mois { width: auto; min-height: 40px; border-radius: 999px; }
details summary { cursor: pointer; }
.titre-groupe { margin: .4rem 0 .5rem .9rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--encre-3); font-weight: 600; }
.groupe-reglages { padding: .2rem 1.1rem; }
.reglage { display: flex; align-items: center; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--trait); }
.reglage:last-child { border-bottom: 0; }
.texte-reglage { flex: 1; min-width: 0; }
.choix-reglage { width: auto; max-width: 52%; min-height: 38px; border-radius: 12px; }
.saisie-reglage { display: inline-flex; align-items: center; gap: .4rem; }
.saisie-reglage input { width: 110px; min-height: 38px; text-align: right; border-radius: 12px; }
.lien-defaut { border: 0; background: transparent; padding: 0; margin-top: .25rem; font: inherit; font-size: .78rem; color: var(--accent); cursor: pointer; }
@media (max-width: 600px) { .choix-reglage { max-width: 46%; } .saisie-reglage input { width: 84px; } }
.voyant { display: flex; align-items: center; gap: .6rem; }
.voyant .lampe { width: 10px; height: 10px; border-radius: 50%; flex: none; background: #7a8396; box-shadow: inset 0 1px 2px rgba(255,255,255,.4); }
.voyant.vert .lampe { background: radial-gradient(circle at 35% 35%, #b6ffd9, #22c55e 60%); box-shadow: 0 0 10px #22c55e; }
.voyant.orange .lampe { background: radial-gradient(circle at 35% 35%, #ffe8a8, #f59e0b 60%); box-shadow: 0 0 10px #f59e0b; animation: pouls 1.6s ease-in-out infinite; }
.voyant.rouge .lampe { background: radial-gradient(circle at 35% 35%, #ffc4c4, #ef4444 60%); box-shadow: 0 0 10px #ef4444; }
.nouvelle-version { display: grid; gap: .8rem; padding: 1rem; border-radius: 20px; background: var(--accent-doux); box-shadow: inset 0 0 0 1px var(--bord-verre); }
.rond-icone { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-doux); color: var(--accent); flex: none; }
.connexion { width: min(420px, 100%); }
.centre-colonne { display: grid; place-items: center; }
.choix-utilisateur button { display: grid; justify-items: center; gap: .55rem; padding: 1.4rem 1rem; }
.choix-utilisateur button .icone { color: var(--accent); }
/* Fermeture : l'interface se dissout doucement (déconnexion, rechargement) */
html.sortie #app > :not(.au-revoir) { animation: sortie .35s ease forwards; }
@keyframes sortie { to { opacity: 0; transform: scale(.97); filter: blur(8px); } }
/* Fermeture de l'appli (4.4) : le ciel recouvre l'écran, Roger fait un petit bond puis s'envole au loin */
.au-revoir { display: none; position: fixed; inset: 0; z-index: 101; place-items: center; pointer-events: none; background: linear-gradient(180deg, var(--ciel-haut), var(--ciel-bas)); }
html.sortie .au-revoir { display: grid; animation: au-revoir-ciel .25s ease both; }
html.sortie .au-revoir .roger-envol { animation: au-revoir-roger .62s cubic-bezier(.5, 0, .7, .2) .08s both; }
html.sortie .au-revoir .anneau { position: absolute; width: 150px; height: 150px; border-radius: 50%; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent); animation: anneau-retour .55s ease-in both; }
@keyframes au-revoir-ciel { from { opacity: 0; } }
@keyframes au-revoir-roger { 0% { transform: scale(.85); opacity: 0; } 25% { transform: scale(1.04); opacity: 1; } 100% { transform: translateY(-120px) scale(.25); opacity: 0; } }
@keyframes anneau-retour { from { transform: scale(2); opacity: 0; } 50% { opacity: 1; } to { transform: scale(.3); opacity: 0; } }
html.retour #app > :not(.au-revoir) { animation: retour .5s cubic-bezier(.2, .8, .2, 1); }
@keyframes retour { from { transform: scale(.985); } } /* sans fondu ni flou (le verre resterait vide) */
.jeton { display: block; padding: .7rem .9rem; border-radius: 14px; background: rgba(0,0,0,.25); font-family: ui-monospace, Consolas, monospace; font-size: .85rem; word-break: break-all; user-select: all; }
.versions-maj { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.nouveautes { display: grid; gap: .7rem; }
.nouveaute { padding: .9rem 1.1rem; border-radius: 18px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--bord-verre); }
.version-nouveaute { font-weight: 650; font-size: .95rem; margin-bottom: .45rem; color: var(--accent); }
.nouveaute ul { margin: 0; padding-left: 1.15rem; display: grid; gap: .35rem; }
.nouveaute li { line-height: 1.45; }
.nouveaute li::marker { color: var(--accent); }
/* Petit encart météo (PC) : discret, en bas à droite */
.encart-meteo { position: fixed; right: 18px; bottom: 16px; z-index: 20; display: flex; align-items: center; gap: .55rem; padding: .45rem .85rem .45rem .7rem; border-radius: 999px; font-size: .8rem; color: var(--encre); background: var(--verre); backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou); box-shadow: inset 0 1px 0 var(--reflet), inset 0 0 0 1px var(--bord-verre); opacity: .85; transition: opacity .2s; pointer-events: auto; }
.encart-meteo:hover { opacity: 1; }
.encart-meteo .icone { color: var(--accent); }
@media (max-width: 860px), (pointer: coarse) and (max-width: 1100px) { .encart-meteo { display: none; } }

/* ---------------------------------------------------------------- Cockpit (4.4) */
.grille-cockpit { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 1000px) { .grille-cockpit { grid-template-columns: minmax(0, 1fr); } }
.entete-carte h2 { color: var(--encre-2); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; }
.boutique { display: grid; gap: .55rem; padding: 1.3rem 1.4rem 1.4rem; }
.periodes { margin: .4rem 0 .5rem; }
.boutique .heros { font-size: clamp(2.8rem, 9vw, 3.6rem); animation: fondu-monte .35s cubic-bezier(.2, .8, .2, 1); }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: .3rem; }
.valeur-duo { font-size: clamp(1.7rem, 6vw, 2.1rem); font-weight: 700; letter-spacing: -.02em; }
.valeur-duo.or { color: #f6c453; }
.valeur-duo.vert { color: #4ade80; }
:root[data-teinte="claire"] .valeur-duo.or { color: #b7791f; }
:root[data-teinte="claire"] .valeur-duo.vert { color: #15803d; }
.puces-colis { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.puce-colis { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border-radius: 999px; font-size: .88rem; font-weight: 600; color: var(--encre); box-shadow: inset 0 0 0 1px var(--bord-verre); transition: transform .15s; }
.puce-colis:active { transform: scale(.97); }
.puce-colis.a-envoyer { background: rgba(124, 92, 240, .22); }
.puce-colis.en-route { background: rgba(45, 212, 191, .16); }
.puce-colis .icone { color: var(--accent); }
.lignes-briefing p { margin: .25rem 0; line-height: 1.5; }
.briefing .bouton { margin-top: .8rem; }
.cockpit .heros-accueil h1 { font-size: clamp(1.5rem, 4vw, 2rem); }
.sous-onglets a { border-radius: 999px; padding: .42rem 1.1rem; font-size: .9rem; color: var(--encre-2); }
.sous-onglets a.actif { color: var(--encre); background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08)); box-shadow: inset 0 1px 0 var(--reflet), 0 2px 8px rgba(0,0,0,.12); font-weight: 600; }
.onglets.periodes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; overflow: visible; }
.onglets.periodes button { padding: .45rem .2rem; text-align: center; }

/* ---------------------------------------------------------------- Mise en page 4.4 : barre fine en haut (PC, tablette en largeur) */
.cadre { display: block; min-height: 100vh; }
.menu { display: none !important; }
.barre-haut {
  position: sticky; top: 12px; z-index: 30; margin: 12px auto 0; width: min(1180px, calc(100% - 32px));
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: .4rem .5rem .4rem .8rem; border-radius: 24px;
  background: linear-gradient(170deg, var(--verre-clair), transparent 50%), var(--verre-fort);
  backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou);
  box-shadow: var(--ombre), inset 0 1px 0 var(--reflet), inset 0 0 0 1px var(--bord-verre);
}
.barre-haut .marque { display: flex; align-items: center; gap: .6rem; color: var(--encre); font-size: 1.05rem; justify-self: start; }
.barre-haut nav { display: flex; gap: .2rem; padding: .25rem; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--bord-verre); }
.barre-haut nav a { position: relative; display: flex; align-items: center; gap: .5rem; padding: .5rem 1.05rem; border-radius: 999px; color: var(--encre-2); font-weight: 550; font-size: .93rem; transition: background .2s, color .2s; white-space: nowrap; }
.barre-haut nav a:hover { color: var(--encre); }
.barre-haut nav a.actif { color: var(--encre); background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.07)); box-shadow: inset 0 1px 0 var(--reflet), 0 2px 10px rgba(0,0,0,.15); }
.barre-haut nav a.actif .icone { color: var(--accent); filter: drop-shadow(0 0 5px var(--accent)); }
.barre-haut nav .pastille { position: absolute; top: -4px; right: -2px; }
.barre-haut .droite { display: flex; align-items: center; gap: .4rem; justify-self: end; }
.barre-haut .encart-meteo { position: static; display: flex; opacity: 1; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; padding: .3rem .5rem; }
.contenu { margin: 0 auto; max-width: 1180px; padding: 1.6rem 16px 3rem; }
@media (min-width: 861px) and (max-width: 1100px) { .barre-haut nav a { padding: .5rem .75rem; } .barre-haut .encart-meteo .muet { display: none; } }
@media (max-width: 860px), (max-height: 500px) and (orientation: landscape) and (max-width: 1000px) {
  .barre-haut { display: none; }
  .contenu { padding: .6rem 16px 7rem; }
}
/* « À traiter » : ce qui demande ton attention, en premier */
.titre-groupe .pastille { margin-left: .35rem; vertical-align: 1px; }
.a-traiter { padding: .35rem .5rem; display: grid; }
.ligne-traiter { display: flex; align-items: center; gap: .8rem; width: 100%; padding: .7rem .6rem; border: 0; border-radius: 14px; background: transparent; font: inherit; color: var(--encre); text-align: left; cursor: pointer; border-left: 3px solid var(--accent); margin: .15rem 0; transition: background .2s; }
.ligne-traiter:hover { background: var(--surface-2); }
.ligne-traiter.urgent { border-left-color: var(--critique); background: rgba(248, 113, 113, .07); }
.ligne-traiter img, .ligne-traiter .vignette { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; flex: none; display: grid; place-items: center; background: var(--surface-2); color: var(--encre-3); }
.raisons { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.raison { font-size: .76rem; padding: .15rem .55rem; border-radius: 999px; background: var(--surface-2); color: var(--encre-2); box-shadow: inset 0 0 0 1px var(--bord-verre); }
.raison.urgent { color: #fff; background: rgba(239, 68, 68, .75); box-shadow: none; font-weight: 600; }
.vide-traiter { display: flex; align-items: center; gap: .6rem; padding: .9rem 1.1rem; }

/* ---------------------------------------------------------------- Lisibilité (4.4) : verre plus dense, titres détachés du ciel */
:root { --verre: rgba(18, 28, 56, 0.52); --verre-fort: rgba(20, 30, 60, 0.7); }
:root[data-teinte="claire"] { --verre: rgba(255, 255, 255, 0.58); --verre-fort: rgba(255, 255, 255, 0.74); }
:root:not([data-teinte="claire"]) .entete-page h1, :root:not([data-teinte="claire"]) .titre-groupe, :root:not([data-teinte="claire"]) .heros-accueil h1, :root:not([data-teinte="claire"]) .heros-accueil p { text-shadow: 0 1px 14px rgba(2, 8, 28, .55); }
:root[data-teinte="claire"] .entete-page h1, :root[data-teinte="claire"] .titre-groupe, :root[data-teinte="claire"] .heros-accueil h1 { text-shadow: 0 1px 14px rgba(255, 255, 255, .6); }
.entete-page .bouton.discret, .heros-accueil + .bouton.discret { background: var(--verre); backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou); box-shadow: inset 0 0 0 1px var(--bord-verre); }
/* Téléphone : barre du haut en verre (le soleil ou la lune passent derrière, sans jamais cacher un bouton) */
@media (max-width: 860px), (max-height: 500px) and (orientation: landscape) and (max-width: 1000px) {
  .barre-mobile { position: sticky; top: 0; z-index: 25; margin: 0 0 .3rem; padding: calc(.55rem + env(safe-area-inset-top)) 1rem .55rem;
    background: linear-gradient(180deg, var(--verre-fort), var(--verre)); backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou);
    box-shadow: 0 1px 0 var(--bord-verre), 0 8px 24px rgba(2, 8, 28, .18); }
}
/* Les lignes « À traiter » ne débordent jamais de la carte */
.a-traiter { overflow: hidden; }
.ligne-traiter { min-width: 0; overflow: hidden; }
.raison { white-space: normal; }

/* Point rouge discret : cette vente ou cette annonce demande ton attention (4.4) */
.photo-vente { position: relative; display: block; cursor: pointer; }
.point-attention { position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; border-radius: 50%; background: #ff453a; box-shadow: 0 0 0 2px var(--fond-carte, rgba(20, 30, 60, .9)), 0 0 10px rgba(255, 69, 58, .55); }
.vente .detail-vente .raisons { display: flex; flex-wrap: wrap; gap: .35rem; }

/* Mise à jour obligatoire du téléphone : écran bloquant, impossible à fermer (4.4) */
.maj-obligatoire { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--ciel-haut) 55%, rgba(4, 10, 28, .55)); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); animation: au-revoir-ciel .3s ease both; }
.maj-obligatoire .carte { width: min(400px, 100%); display: grid; justify-items: center; gap: .8rem; text-align: center; padding: 1.8rem 1.4rem; background: var(--verre-fort); }
.maj-obligatoire h2 { margin: .2rem 0 0; font-size: 1.35rem; }
.maj-obligatoire p { margin: 0; line-height: 1.45; }
.maj-obligatoire .bouton.grand { width: 100%; justify-content: center; padding: .95rem 1rem; font-size: 1.05rem; margin-top: .4rem; }