/* ===== BARTH Prospection — habillage « bulles » =====
   L'esprit : beaucoup de blanc, de grands titres nets, des formes rondes, une seule couleur d'accent (le doré BARTH),
   et un petit plaisir à chaque geste. Palette du cahier des charges : brun, doré champagne, ivoire. */
:root {
  --fond: #FBFAF7; --blanc: #FFFFFF; --creme: #F5F1EA; --sable: #EBE4D8; --trait: #EFEAE1;
  --or: #B8976A; --or-fonce: #8E6F3E; --champagne: #EADCC0; --or-pale: #F7F0E2;
  --brun: #2E211A; --brun-chaud: #5A3E2B; --texte: #1F1A17; --doux: #8A7D72;
  --alerte: #B4473A; --alerte-pale: #FBECE8; --vert: #4F8A5B; --vert-pale: #EAF3EA;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI Variable Display", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --rayon: 26px; --ombre: 0 1px 2px rgba(46, 33, 26, .04), 0 14px 34px -18px rgba(46, 33, 26, .2); --ombre-forte: 0 18px 50px -14px rgba(46, 33, 26, .38);
  --bas: env(safe-area-inset-bottom, 0px); --haut: env(safe-area-inset-top, 0px); --nav: 78px;
  --ressort: cubic-bezier(.2, .9, .25, 1.25); --doucement: cubic-bezier(.22, .8, .3, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; height: 100%; }
body { margin: 0; height: 100%; font: 16px/1.45 var(--sans); color: var(--texte); background: var(--fond); -webkit-font-smoothing: antialiased; overflow: hidden; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; text-align: inherit; touch-action: manipulation; }
button:disabled { cursor: default; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 2.15rem; line-height: 1.06; font-weight: 700; letter-spacing: -.035em; color: var(--texte); }
h2 { font-size: 1.3rem; line-height: 1.15; font-weight: 700; letter-spacing: -.025em; }
ul, ol { list-style: none; margin: 0; padding: 0; }
a { color: var(--or-fonce); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--or) 70%, transparent); outline-offset: 2px; border-radius: 12px; }
.ico { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.22em; }
.sur-titre { font-size: .82rem; color: var(--doux); font-weight: 600; margin-bottom: .25rem; letter-spacing: -.01em; }
.sur-titre::first-letter { text-transform: uppercase; }
.doux { color: var(--doux); } .petit { font-size: .86rem; } .centre { text-align: center; }

/* La bulle : la forme de base de toute l'application */
.bulle-rond { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--c, var(--or-fonce)); background: color-mix(in srgb, var(--c, var(--or-fonce)) 13%, #fff); font-weight: 700; transition: transform .3s var(--ressort), background .25s, color .25s; }
.bulle-rond .ico { width: 21px; height: 21px; }
.bulle-statut-mini { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 14%, #fff); } .bulle-statut-mini .ico { width: 20px; height: 20px; } .bulle-statut-mini.grand { width: 54px; height: 54px; } .bulle-statut-mini.grand .ico { width: 26px; height: 26px; }

/* ---------- Lever de rideau ---------- */
.lever { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 1.1rem; background: var(--fond); color: var(--texte); transition: opacity .5s ease, transform .6s var(--doucement); }
.lever.parti { opacity: 0; transform: scale(1.08); pointer-events: none; }
.lever-sceau, .sceau, .bienvenue-sceau, .avatar { display: grid; place-items: center; font-weight: 700; color: #fff; background: linear-gradient(145deg, #D9BE8E, #B8976A 50%, #8E6F3E); border-radius: 50%; box-shadow: 0 10px 24px -10px rgba(142, 111, 62, .8), inset 0 1px 0 rgba(255, 255, 255, .45); }
.lever-sceau { width: 96px; height: 96px; font-size: 2.8rem; animation: bulle-nait .9s var(--ressort) both; }
.lever-nom { font-weight: 700; font-size: 1.15rem; letter-spacing: .02em; animation: monte .7s .15s var(--doucement) both; text-align: center; } .lever-nom span { display: block; font-weight: 500; font-size: .85rem; color: var(--doux); margin-top: .15rem; }
@keyframes bulle-nait { from { transform: scale(0); opacity: 0; } } @keyframes monte { from { transform: translateY(14px); opacity: 0; } }

/* ---------- Charpente ---------- */
.app { height: 100%; display: flex; flex-direction: column; }
.ecran { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: calc(var(--haut) + 1.4rem) 1.15rem 0; outline: none; }
.ecran > * { max-width: 720px; margin-left: auto; margin-right: auto; }
.ecran.entree > * { animation: entree .42s var(--doucement) both; }
@keyframes entree { from { opacity: 0; transform: translateY(12px) scale(.985); } }
.bas-de-page { height: calc(var(--nav) + var(--bas) + 5rem); }
.barre { order: 2; position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--bas) + 12px); z-index: 30; display: flex; align-items: center; gap: 2px; padding: 6px; border-radius: 999px; background: rgba(255, 255, 255, .82); backdrop-filter: saturate(1.6) blur(22px); -webkit-backdrop-filter: saturate(1.6) blur(22px); box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 12px 36px -10px rgba(46, 33, 26, .35), 0 0 0 1px rgba(46, 33, 26, .05); max-width: calc(100% - 20px); }
.barre-marque { display: none; }
.onglet { position: relative; display: flex; align-items: center; justify-content: center; gap: 0; height: 48px; min-width: 46px; padding: 0 11px; border-radius: 999px; font-size: .86rem; font-weight: 650; color: var(--doux); transition: background .35s var(--doucement), color .25s, padding .35s var(--doucement); }
.onglet .ico { width: 23px; height: 23px; transition: transform .4s var(--ressort); } .onglet > span { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .4s var(--doucement), opacity .25s, margin .35s; }
.onglet.actif { background: var(--brun); color: #fff; padding: 0 16px 0 13px; } .onglet.actif > span { max-width: 120px; opacity: 1; margin-left: 7px; } .onglet.actif .ico { transform: scale(1.04); }
.onglet:active .ico { transform: scale(.82); }
.pastille { position: absolute; top: 3px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--alerte); color: #fff; font: 700 .62rem/17px var(--sans); text-align: center; font-style: normal; box-shadow: 0 0 0 2px #fff; animation: bulle-nait .5s var(--ressort) both; }
.pastille.or { background: var(--or-fonce); } .pastille.vive { min-width: 11px; width: 11px; height: 11px; padding: 0; background: var(--vert); animation: bat 1.6s infinite; } .onglet.actif .pastille { box-shadow: 0 0 0 2px var(--brun); }
@keyframes bat { 50% { transform: scale(1.35); opacity: .6; } }

.tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; } .tete-boutons { display: flex; gap: .5rem; }
.avatar { width: 46px; height: 46px; flex: none; font-size: 1.15rem; transition: transform .3s var(--ressort); } .avatar:active { transform: scale(.88); }
.rond { position: relative; width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--blanc); color: var(--texte); box-shadow: var(--ombre); transition: transform .3s var(--ressort), background .2s, color .2s; text-decoration: none; }
.code-mots { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin: 1rem 0; } .code-mots span { padding: .55rem 1rem; border-radius: 999px; background: var(--or-pale); color: var(--brun); font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; animation: bulle-nait .5s var(--ressort) both; } .code-mots span:nth-child(2) { animation-delay: .06s; } .code-mots span:nth-child(3) { animation-delay: .12s; } .code-mots span:nth-child(4) { animation-delay: .18s; } .code-mots span:nth-child(5) { animation-delay: .24s; } .code-mots span:nth-child(6) { animation-delay: .3s; }
.bulle-rond.tourne .ico { animation: tourne 1.2s linear infinite; }
.avatar { position: relative; } .avatar::after { content: ""; position: absolute; right: 0; bottom: 0; width: 13px; height: 13px; border-radius: 50%; border: 2.5px solid var(--fond); background: transparent; border-color: transparent; transition: background .3s; } html[data-synchro=a_jour] .avatar::after { background: var(--vert); border-color: var(--fond); } html[data-synchro=en_cours] .avatar::after, html[data-synchro=en_attente] .avatar::after { background: #E8A33B; border-color: var(--fond); animation: bat 1.2s infinite; } html[data-synchro=erreur] .avatar::after, html[data-synchro=hors_ligne] .avatar::after { background: var(--alerte); border-color: var(--fond); }
.rond:active { transform: scale(.86); } .rond.plein, .rond.actif { background: var(--brun); color: #fff; } .rond.tourne .ico { animation: tourne 1s linear infinite; } @keyframes tourne { to { transform: rotate(360deg); } }
.rond.grand { width: 60px; height: 60px; } .rond.grand .ico { width: 26px; height: 26px; } .rond.flottant, .bouton-outil.flottant { box-shadow: 0 8px 24px -8px rgba(46, 33, 26, .45); }
.rond.micro { position: absolute; right: 8px; bottom: 8px; width: 42px; height: 42px; background: var(--blanc); box-shadow: none; } .rond.micro.ecoute { background: var(--alerte); color: #fff; animation: bat 1.1s infinite; }

.bloc { margin-top: 2.1rem; } .bloc-tete { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin: 0 0 .9rem; }
.apparait { animation: entree .55s var(--doucement) both; } .apparait:nth-of-type(2) { animation-delay: .06s; } .apparait:nth-of-type(3) { animation-delay: .12s; } .apparait:nth-of-type(4) { animation-delay: .18s; } .apparait:nth-of-type(5) { animation-delay: .24s; }
.rubrique { font-size: .95rem; font-weight: 700; letter-spacing: -.015em; color: var(--texte); margin: 1.7rem 0 .7rem; } .champ-titre { font-size: .82rem; font-weight: 600; color: var(--doux); margin: 1rem 0 .45rem; }

.bouton { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .6rem 1.35rem; border-radius: 999px; background: var(--creme); font-weight: 650; color: var(--texte); letter-spacing: -.01em; transition: transform .25s var(--ressort), box-shadow .2s, background .2s; text-decoration: none; }
.bouton:active { transform: scale(.95); } .bouton:disabled { opacity: .4; }
.bouton.principal { background: var(--brun); color: #fff; box-shadow: 0 12px 26px -12px rgba(46, 33, 26, .75); }
.bouton.large { display: flex; width: 100%; margin-top: .7rem; min-height: 56px; font-size: 1.02rem; } .bouton.discret { background: transparent; color: var(--doux); }
.bouton.danger { background: var(--alerte); color: #fff; } .bouton.danger-doux { color: var(--alerte); background: var(--alerte-pale); margin-top: 1rem; width: 100%; }
.lien { color: var(--or-fonce); font-weight: 650; display: inline-flex; align-items: center; gap: .3rem; min-height: 34px; } .lien.clair { color: var(--champagne); }
.mini { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--doux); background: var(--creme); transition: transform .25s var(--ressort); } .mini:active { transform: scale(.82); } .mini:disabled { opacity: .3; } .mini .ico { width: 18px; height: 18px; }

.bandeau { display: flex; align-items: center; gap: .9rem; width: 100%; margin-top: 1.1rem; padding: 1rem 1.1rem; border-radius: var(--rayon); background: var(--blanc); box-shadow: var(--ombre); transition: transform .3s var(--ressort); }
.bandeau:active { transform: scale(.975); } .bandeau > .ico:first-child { width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: var(--or-pale); color: var(--or-fonce); } .bandeau > span { flex: 1; display: grid; min-width: 0; } .bandeau b { letter-spacing: -.015em; } .bandeau small { color: var(--doux); font-size: .86rem; } .bandeau > .ico:last-child { color: var(--sable); }
.bandeau.vif { background: var(--brun); color: #fff; } .bandeau.vif small { color: var(--champagne); } .bandeau.vif > .ico:first-child { background: rgba(255, 255, 255, .14); color: #fff; animation: bat 2s infinite; } .bandeau.vif > .ico:last-child { color: rgba(255, 255, 255, .4); }
.bandeau.discret { background: var(--creme); box-shadow: none; }

/* ---------- Champs ---------- */
.champ { display: block; margin-top: .9rem; } .champ > span { display: block; font-size: .82rem; font-weight: 600; color: var(--doux); margin: 0 0 .35rem .9rem; }
input[type=text], input[type=tel], input[type=email], input[type=number], input[type=date], input[type=datetime-local], input[type=search], select, textarea { width: 100%; min-height: 52px; padding: .7rem 1.05rem; border-radius: 20px; border: 2px solid transparent; background: var(--creme); transition: border-color .2s, box-shadow .2s, background .2s; appearance: none; -webkit-appearance: none; }
textarea { resize: vertical; line-height: 1.45; display: block; border-radius: 22px; } select { background-image: linear-gradient(45deg, transparent 50%, var(--doux) 50%), linear-gradient(135deg, var(--doux) 50%, transparent 50%); background-position: calc(100% - 23px) 55%, calc(100% - 18px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.4rem; text-overflow: ellipsis; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--or); background-color: #fff; box-shadow: 0 0 0 5px rgba(184, 151, 106, .16); }
.deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; align-items: end; }
.segments { display: flex; padding: 5px; border-radius: 999px; background: var(--creme); margin-top: 1rem; } .segments label { flex: 1; position: relative; } .segments input { position: absolute; opacity: 0; inset: 0; }
.segments span { display: block; text-align: center; padding: .62rem .3rem; border-radius: 999px; font-weight: 650; font-size: .9rem; color: var(--doux); transition: all .35s var(--doucement); } .segments input:checked + span { background: var(--blanc); color: var(--texte); box-shadow: var(--ombre); } .segments input:focus-visible + span { outline: 3px solid var(--or); }
.interrupteur { display: flex; align-items: center; gap: .85rem; margin-top: 1.1rem; font-weight: 600; min-height: 46px; } .interrupteur small { display: block; font-weight: 400; color: var(--doux); font-size: .84rem; }
.interrupteur input { flex: none; width: 54px; height: 32px; border-radius: 16px; appearance: none; -webkit-appearance: none; background: var(--sable); position: relative; transition: background .3s; cursor: pointer; margin: 0; }
.interrupteur input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .25); transition: transform .4s var(--ressort); } .interrupteur input:checked { background: var(--vert); } .interrupteur input:checked::after { transform: translateX(22px); }
.propositions { display: grid; gap: .35rem; margin-top: .4rem; } .propositions button { display: flex; gap: .6rem; align-items: center; padding: .7rem .95rem; border-radius: 18px; background: var(--blanc); box-shadow: var(--ombre); text-align: left; animation: entree .28s var(--doucement) both; } .propositions .ico { color: var(--or-fonce); }
.rangee-boutons { display: flex; gap: .65rem; margin-top: 1.4rem; } .rangee-boutons .bouton { flex: 1; } .rangee-boutons.collante { position: sticky; bottom: -1px; padding: .8rem 0 calc(.4rem + var(--bas)); background: var(--fond); box-shadow: 0 -18px 16px -6px var(--fond); margin-bottom: -.4rem; z-index: 2; }
.notes-boite { position: relative; } .notes-boite textarea { padding-right: 3.6rem; }

/* ---------- Puces ---------- */
.puces { display: flex; flex-wrap: wrap; gap: .45rem; } .puces.tags { margin-top: .7rem; } .puces-defilantes { display: flex; gap: .45rem; overflow-x: auto; margin: .9rem -1.15rem 0; padding: 3px 1.15rem .6rem; scrollbar-width: none; } .puces-defilantes::-webkit-scrollbar { display: none; }
.puce { --c: var(--brun); position: relative; flex: none; display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: .4rem .95rem; border-radius: 999px; background: var(--creme); font-size: .88rem; font-weight: 600; color: var(--texte); transition: transform .3s var(--ressort), background .25s, color .25s; cursor: pointer; }
.puce > i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); } .puce > b { font-weight: 700; color: var(--doux); font-size: .8rem; } .puce input { position: absolute; opacity: 0; pointer-events: none; } .puce .ico { width: 1.05em; height: 1.05em; }
.puce.active { background: var(--c); color: #fff; animation: pop .35s var(--ressort); } .puce.active > i { background: #fff; } .puce.active > b { color: rgba(255, 255, 255, .8); } .puce:active { transform: scale(.92); }
.puce.fixe { padding-right: .3rem; cursor: default; --c: var(--or-fonce); } .puce.fixe button { width: 28px; height: 28px; display: grid; place-items: center; color: #fff; opacity: .85; }
.puces.grandes .puce { min-height: 58px; padding: .5rem 1.2rem; flex-direction: column; gap: 0; align-items: flex-start; justify-content: center; font-size: .98rem; border-radius: 22px; flex: 1 1 40%; } .puces.grandes small { font-weight: 400; color: var(--doux); font-size: .78rem; } .puces.grandes .puce.active small { color: rgba(255, 255, 255, .8); }
@keyframes pop { 40% { transform: scale(1.1); } }
.statut { --c: var(--doux); display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem .2rem .45rem; border-radius: 999px; font-size: .78rem; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 13%, #fff); white-space: nowrap; } .statut .ico { width: 1.05em; height: 1.05em; } .statut:not(:has(span)) { padding: 0; width: 42px; height: 42px; justify-content: center; border-radius: 50%; flex: none; } .statut:not(:has(span)) .ico { width: 20px; height: 20px; }
.statut-texte { font-size: .78rem; font-weight: 700; color: var(--c); }
.dpe { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: 800 .72rem var(--sans); color: #fff; }
.dpe-A { background: #2E8B57; } .dpe-B { background: #55A84C; } .dpe-C { background: #9BBF3B; } .dpe-D { background: #D9B92B; color: #4a3b00; } .dpe-E { background: #E39A2B; } .dpe-F { background: #DB6A2A; } .dpe-G { background: #C4382C; }
.frais, .tag-mini { display: inline-flex; align-items: center; gap: .2rem; font-size: .74rem; font-weight: 650; padding: .16rem .55rem; border-radius: 999px; color: var(--doux); background: var(--creme); } .frais .ico { width: 1em; height: 1em; } .frais.n3 { color: #7A4B00; background: #FBE8B8; } .frais.n2 { color: var(--or-fonce); background: var(--or-pale); }
.averifier { display: inline-flex; align-items: center; gap: .2rem; font-size: .74rem; font-weight: 700; color: var(--alerte); }

/* ---------- Accueil ---------- */
.carte-jeu { display: flex; gap: 1.3rem; align-items: center; padding: 1.4rem; border-radius: 32px; background: var(--blanc); box-shadow: var(--ombre); }
.carte-jeu-texte { flex: 1; min-width: 0; } .carte-jeu-titre { font-size: 1.22rem; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; }
.bulles-mini { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; } .bulle-mini { display: inline-flex; align-items: center; gap: .3rem; padding: .28rem .7rem; border-radius: 999px; background: var(--creme); font-size: .82rem; color: var(--doux); font-weight: 600; } .bulle-mini b { color: var(--texte); } .bulle-mini .ico { width: 1.05em; height: 1.05em; } .bulle-mini.vive { background: #FDEBD3; color: #9A5B12; } .bulle-mini.vive .ico { color: #E8892B; animation: flamme 1.4s ease-in-out infinite; transform-origin: 50% 90%; } @keyframes flamme { 50% { transform: scale(1.22) rotate(-5deg); } }
.niveau { margin-top: .8rem; } .niveau p { font-size: .78rem; color: var(--doux); margin-top: .35rem; }
.jauge { height: 8px; border-radius: 4px; background: var(--creme); overflow: hidden; } .jauge i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #D9BE8E, #B8976A); transition: width .9s var(--doucement); animation: remplir 1.1s var(--doucement) both; } @keyframes remplir { from { width: 0 !important; } }
.semaine { display: flex; gap: 6px; margin-top: .85rem; } .semaine span { flex: 1; display: grid; justify-items: center; gap: 4px; } .semaine i { width: 100%; max-width: 22px; aspect-ratio: 1; border-radius: 50%; background: var(--creme); animation: bulle-nait .6s var(--ressort) both; } .semaine .entame i { background: var(--champagne); } .semaine .plein i { background: linear-gradient(145deg, #D9BE8E, #8E6F3E); } .semaine em { font: 600 .62rem var(--sans); font-style: normal; color: var(--doux); }
.semaine span:nth-child(2) i { animation-delay: .05s; } .semaine span:nth-child(3) i { animation-delay: .1s; } .semaine span:nth-child(4) i { animation-delay: .15s; } .semaine span:nth-child(5) i { animation-delay: .2s; } .semaine span:nth-child(6) i { animation-delay: .25s; } .semaine span:nth-child(7) i { animation-delay: .3s; }
.anneau { position: relative; flex: none; } .anneau svg { width: 100%; height: 100%; overflow: visible; } .anneau circle { fill: none; stroke-width: 10; stroke-linecap: round; } .anneau-fond { stroke: var(--creme); } .anneau-trait { stroke: var(--or); transition: stroke-dashoffset 1.1s var(--doucement); animation: anneau 1.3s var(--doucement) both; } .anneau-trait.plein { stroke: var(--vert); filter: drop-shadow(0 0 6px rgba(79, 138, 91, .45)); } @keyframes anneau { from { stroke-dashoffset: 277; } }
.anneau-centre { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; } .anneau-centre b { font-size: 2.5rem; line-height: 1; font-weight: 700; letter-spacing: -.04em; } .anneau-centre small { font-size: .76rem; color: var(--doux); font-weight: 600; }
.missions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; } .mission { --c: var(--or); display: grid; justify-items: center; align-content: start; gap: .55rem; padding: .3rem .1rem; font-size: .84rem; font-weight: 600; color: var(--texte); text-align: center; line-height: 1.2; }
.mission-bulle { width: min(100%, 104px); aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; justify-items: center; gap: 1px; background: var(--c); color: #fff; box-shadow: 0 16px 28px -14px var(--c), inset 0 2px 0 rgba(255, 255, 255, .22); transition: transform .4s var(--ressort); animation: bulle-nait .7s var(--ressort) both, flotte 5s ease-in-out infinite 1s; } .mission:nth-child(2) .mission-bulle { animation-delay: .08s, 1.6s; } .mission:nth-child(3) .mission-bulle { animation-delay: .16s, 2.2s; }
.mission-bulle .ico { width: 22px; height: 22px; opacity: .9; } .mission-bulle b { font-size: 1.9rem; line-height: 1; font-weight: 700; letter-spacing: -.04em; } .mission:active .mission-bulle { transform: scale(.88); } .mission:disabled { color: var(--doux); } .mission:disabled .mission-bulle { background: var(--creme); color: var(--sable); box-shadow: none; animation: bulle-nait .7s var(--ressort) both; }
@keyframes flotte { 50% { transform: translateY(-5px); } }
.rappels { margin-top: 1.1rem; display: grid; gap: .45rem; } .rappel { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .6rem .9rem .6rem .6rem; min-height: 60px; border-radius: 999px; background: var(--blanc); box-shadow: var(--ombre); transition: transform .3s var(--ressort); } .rappel span:nth-child(2) { flex: 1; display: grid; min-width: 0; } .rappel b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rappel small { color: var(--doux); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rappel > .ico { color: var(--sable); } .rappel:active { transform: scale(.97); }
.bulles-statuts { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: .7rem 0; padding: .4rem 0; } .bulle-statut { --c: var(--doux); --t: 60px; display: grid; justify-items: center; gap: .4rem; width: 33.3%; font-size: .74rem; font-weight: 600; color: var(--texte); text-align: center; line-height: 1.15; }
.bulle-statut .bulle-rond { width: var(--t); height: var(--t); background: color-mix(in srgb, var(--c) 16%, #fff); color: var(--c); animation: bulle-nait .7s var(--ressort) both; } .bulle-statut .bulle-rond b { font-size: calc(var(--t) * .36); letter-spacing: -.03em; } .bulle-statut em { font-style: normal; } .bulle-statut:active .bulle-rond { transform: scale(.85); } .bulle-statut.zero { color: var(--doux); } .bulle-statut.zero .bulle-rond { background: var(--creme); color: var(--sable); }
.bulle-statut:nth-child(2) .bulle-rond { animation-delay: .04s; } .bulle-statut:nth-child(3) .bulle-rond { animation-delay: .08s; } .bulle-statut:nth-child(4) .bulle-rond { animation-delay: .12s; } .bulle-statut:nth-child(5) .bulle-rond { animation-delay: .16s; } .bulle-statut:nth-child(6) .bulle-rond { animation-delay: .2s; } .bulle-statut:nth-child(7) .bulle-rond { animation-delay: .24s; } .bulle-statut:nth-child(8) .bulle-rond { animation-delay: .28s; } .bulle-statut:nth-child(9) .bulle-rond { animation-delay: .32s; }
.bienvenue { text-align: center; padding-top: 7vh; max-width: 430px !important; } .bienvenue h1 { font-size: 2.5rem; margin: 0 0 .9rem; } .bienvenue .champ { text-align: left; margin: 1.8rem 0 1.3rem; } .bienvenue-sceau { width: 84px; height: 84px; font-size: 2.5rem; margin: 0 auto 1.6rem; animation: bulle-nait .9s var(--ressort) both, flotte 5s ease-in-out infinite 1s; }
.fete { text-align: center; padding: .6rem 0 .2rem; } .fete-medaille { width: 100px; height: 100px; margin: 0 auto 1.1rem; border-radius: 50%; display: grid; place-items: center; font-size: 2.7rem; font-weight: 700; color: #fff; background: linear-gradient(145deg, #E2CA9C, #B8976A 50%, #8E6F3E); box-shadow: 0 18px 36px -14px rgba(142, 111, 62, .9), inset 0 2px 0 rgba(255, 255, 255, .45); animation: medaille 1s var(--ressort) both; } .fete-medaille .ico { width: 46px; height: 46px; } @keyframes medaille { from { transform: scale(0) rotate(-180deg); } } .fete .doux { margin: .5rem 0 1.2rem; } .fete.petit .fete-medaille { width: 68px; height: 68px; margin-bottom: .7rem; } .fete.petit .fete-medaille .ico { width: 30px; height: 30px; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: .6rem; } .badge-case { padding: 1rem .8rem; border-radius: var(--rayon); background: var(--blanc); box-shadow: var(--ombre); display: grid; justify-items: center; text-align: center; gap: .2rem; align-content: start; font-size: .8rem; color: var(--doux); } .badge-case .bulle-rond { width: 52px; height: 52px; background: var(--creme); color: var(--sable); margin-bottom: .35rem; } .badge-case b { color: var(--texte); font-size: .92rem; letter-spacing: -.01em; } .badge-case .jauge { margin-top: .5rem; height: 5px; width: 100%; }
.badge-case.gagne .bulle-rond { background: linear-gradient(145deg, #E2CA9C, #8E6F3E); color: #fff; box-shadow: 0 8px 16px -8px var(--or-fonce); }
.chiffres { display: flex; gap: .5rem; margin: 1rem 0; } .chiffres > div { flex: 1; min-width: 0; text-align: center; padding: .85rem .3rem; border-radius: 22px; background: var(--creme); display: grid; font-size: .76rem; color: var(--doux); line-height: 1.2; } .chiffres b { font-size: 1.55rem; line-height: 1.15; font-weight: 700; letter-spacing: -.03em; color: var(--texte); } .chiffres .fort { background: var(--brun); color: var(--champagne); } .chiffres .fort b { color: #fff; }
.semaines { display: flex; gap: 6px; height: 84px; align-items: flex-end; margin-top: .4rem; } .semaines span { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 5px; } .semaines i { width: 100%; max-width: 30px; border-radius: 10px; background: var(--champagne); animation: pousse .8s var(--ressort) both; transform-origin: bottom; } .semaines i.contact { background: linear-gradient(#D9BE8E, #8E6F3E); } .semaines em { font: 600 .58rem var(--sans); font-style: normal; color: var(--doux); white-space: nowrap; } @keyframes pousse { from { transform: scaleY(0); } }
.rues { display: grid; gap: .8rem; } .rues li { display: grid; gap: .35rem; } .rues span { display: grid; } .rues small { color: var(--doux); font-size: .8rem; }
.envol { position: fixed; z-index: 90; font-weight: 800; font-size: 1.2rem; color: var(--or-fonce); text-shadow: 0 1px 0 #fff, 0 0 12px #fff; pointer-events: none; animation: envol 1.15s var(--doucement) forwards; } @keyframes envol { from { transform: translateY(0) scale(.6); opacity: 0; } 20% { opacity: 1; transform: translateY(-14px) scale(1.2); } to { transform: translateY(-76px) scale(1); opacity: 0; } }
.confettis { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 95; pointer-events: none; }
.grande-coche { --c: var(--or-fonce); position: fixed; z-index: 94; left: 50%; top: 42%; width: 132px; height: 132px; margin: -66px 0 0 -66px; border-radius: 50%; background: var(--c); display: grid; place-items: center; pointer-events: none; box-shadow: 0 24px 60px -14px var(--c); animation: coche .9s var(--doucement) forwards; } .grande-coche svg { width: 72px; height: 72px; } .grande-coche path { stroke-dasharray: 50; stroke-dashoffset: 50; animation: trait-coche .35s .18s var(--doucement) forwards; }
@keyframes coche { 0% { transform: scale(0); opacity: 0; } 28% { transform: scale(1.12); opacity: 1; } 42% { transform: scale(1); } 78% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } } @keyframes trait-coche { to { stroke-dashoffset: 0; } }

/* ---------- Prospects ---------- */
.outils { display: flex; gap: .55rem; align-items: center; flex-wrap: wrap; } .recherche { flex: 1; position: relative; min-width: 190px; } .recherche .ico { position: absolute; left: 1.05rem; top: 50%; transform: translateY(-50%); color: var(--doux); pointer-events: none; } .recherche input { padding-left: 2.9rem; border-radius: 999px; }
.bouton-outil { display: inline-flex; align-items: center; gap: .45rem; min-height: 48px; padding: 0 1.15rem; border-radius: 999px; background: var(--blanc); font-weight: 650; font-size: .9rem; box-shadow: var(--ombre); transition: transform .3s var(--ressort); } .bouton-outil:active { transform: scale(.94); } .bouton-outil.actif { background: var(--brun); color: #fff; }
.tri-ligne { display: flex; justify-content: space-between; align-items: center; margin: .1rem 0 .6rem; } .tri-ligne select { background-color: transparent; min-height: 40px; font-weight: 600; font-size: .86rem; color: var(--doux); padding-left: .3rem; width: auto; box-shadow: none; border: 0; }
.prospects { display: grid; gap: .7rem; } .prospect { --c: var(--doux); --s: var(--or-fonce); position: relative; border-radius: var(--rayon); background: var(--blanc); box-shadow: var(--ombre); overflow: hidden; transition: transform .35s var(--doucement), opacity .35s, box-shadow .2s; animation: entree .4s var(--doucement) both; touch-action: pan-y; }
.prospect-dessus { position: relative; display: flex; align-items: stretch; background: var(--blanc); border-radius: var(--rayon); transition: transform .4s var(--ressort); } .prospect.glisse .prospect-dessus { transition: none; } .prospect.glisse { background: var(--s); } .prospect:not(.glisse) .prospect-dessous { visibility: hidden; } .prospect-dessous { position: absolute; inset: 0; display: flex; align-items: center; gap: .6rem; padding-left: 1.3rem; color: #fff; font-size: .92rem; } .prospect-dessous .ico { width: 26px; height: 26px; transition: transform .3s var(--ressort); } .prospect.pret .prospect-dessous .ico { transform: scale(1.4) rotate(-8deg); }
.prospect.clos { opacity: .62; box-shadow: none; } .prospect.choisi .prospect-dessus { background: var(--or-pale); } .prospect.choisi { box-shadow: 0 0 0 2.5px var(--or), var(--ombre); }
.prospect.valide, .lot.valide { animation: valide .5s var(--doucement) both; } @keyframes valide { 35% { transform: scale(1.035); box-shadow: 0 0 0 4px color-mix(in srgb, var(--s, var(--or)) 45%, transparent), var(--ombre-forte); } to { transform: scale(1); } }
.prospect-corps { flex: 1; display: flex; gap: .8rem; padding: .95rem .5rem .95rem .95rem; min-width: 0; align-items: flex-start; border-radius: var(--rayon); } .prospect-corps.statique { cursor: default; }
.prospect-texte { flex: 1; min-width: 0; display: grid; gap: .14rem; } .prospect-texte b { font-size: 1.02rem; letter-spacing: -.02em; } .prospect-texte small { color: var(--doux); font-size: .84rem; } .acces { display: flex !important; gap: .3rem; align-items: baseline; color: var(--texte) !important; font-weight: 600; } .acces .ico { width: 1em; height: 1em; color: var(--or-fonce); align-self: center; }
.prospect-puces { display: flex; flex-wrap: wrap; gap: .3rem .45rem; margin-top: .35rem; align-items: center; } .fils { display: inline-flex; gap: .5rem; } .fil { display: inline-flex; align-items: center; gap: .2rem; font-size: .74rem; font-weight: 650; color: var(--vert); } .fil .ico { width: 1.1em; height: 1.1em; }
.suite { flex: none; width: 86px; display: grid; justify-items: center; align-content: center; gap: .35rem; padding: .5rem .35rem; font-size: .7rem; font-weight: 650; line-height: 1.15; text-align: center; color: var(--doux); } .suite-bulle { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--s) 14%, #fff); color: var(--s); transition: transform .35s var(--ressort), background .2s, color .2s; } .suite-bulle .ico { width: 23px; height: 23px; } .suite:active .suite-bulle { transform: scale(.8); } .suite.urgent { color: var(--texte); } .suite.urgent .suite-bulle { background: var(--s); color: #fff; box-shadow: 0 10px 18px -9px var(--s); }
.coche { width: 42px; height: 42px; flex: none; border-radius: 50%; border: 2.5px solid var(--sable); display: grid; place-items: center; color: #fff; transition: all .3s var(--ressort); } .choisi .coche { background: var(--or-fonce); border-color: var(--or-fonce); transform: scale(1.08); }
.barre-selection { position: fixed; left: .7rem; right: .7rem; bottom: calc(var(--nav) + var(--bas) + .4rem); z-index: 25; display: flex; align-items: center; gap: .5rem; padding: .55rem .55rem .55rem 1.2rem; border-radius: 999px; background: var(--brun); color: #fff; box-shadow: var(--ombre-forte); animation: surgit .45s var(--ressort) both; max-width: 560px; margin: 0 auto; } .barre-selection > span { flex: 1; white-space: nowrap; } .barre-selection .bouton { min-height: 42px; padding: .4rem .95rem; font-size: .88rem; background: rgba(255, 255, 255, .16); color: #fff; } .barre-selection .bouton.principal { background: #fff; color: var(--brun); box-shadow: none; } @keyframes surgit { from { transform: translateY(40px); opacity: 0; } }
.rien { text-align: center; padding: 2.5rem 1rem; color: var(--doux); display: grid; gap: 1rem; justify-items: center; } .rien > .ico { width: 64px; height: 64px; padding: 18px; border-radius: 50%; background: var(--creme); color: var(--doux); }
.astuce { text-align: center; font-size: .82rem; color: var(--doux); margin-top: 1.2rem !important; animation: entree .6s 1s both; }
.radar-boutons { display: grid; align-content: center; justify-items: center; gap: .2rem; padding-right: .3rem; } .radar-boutons .mini { width: 34px; height: 34px; background: none; }

/* ---------- Feuilles ---------- */
.voile { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; background: rgba(31, 26, 23, 0); transition: background .35s, backdrop-filter .35s; } .voile.visible { background: rgba(31, 26, 23, .32); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .voile.visible ~ .voile.visible { background: rgba(31, 26, 23, .16); backdrop-filter: none; -webkit-backdrop-filter: none; }
.feuille { width: 100%; max-width: 620px; max-height: calc(100% - var(--haut) - 26px); display: flex; flex-direction: column; background: var(--fond); border-radius: 34px 34px 0 0; box-shadow: var(--ombre-forte); transform: translateY(100%); transition: transform .5s var(--doucement); } .voile.visible .feuille { transform: none; }
.feuille-poignee { flex: none; height: 26px; position: relative; touch-action: none; } .feuille-poignee::after { content: ""; position: absolute; top: 10px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: var(--sable); }
.feuille-corps { overflow-y: auto; padding: .2rem 1.3rem calc(1.5rem + var(--bas)); overscroll-behavior: contain; } .feuille-titre { font-size: 1.55rem; line-height: 1.12; font-weight: 700; letter-spacing: -.03em; margin-bottom: .3rem; overflow-wrap: anywhere; } .feuille-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .6rem; }
.voile.centre { align-items: center; padding: 1rem; } .voile.centre .feuille { border-radius: 34px; max-width: 420px; transform: translateY(30px) scale(.9); opacity: 0; transition: transform .45s var(--ressort), opacity .25s; } .voile.centre.visible .feuille { transform: none; opacity: 1; } .voile.centre .feuille-poignee { height: 22px; } .voile.centre .feuille-poignee::after { display: none; }
.fiche-tete { --c: var(--doux); display: flex; gap: .85rem; align-items: center; margin-bottom: 1rem; } .fiche-tete > div { flex: 1; min-width: 0; } .fiche-faits { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .84rem; color: var(--texte); margin-bottom: 1rem; } .fiche-faits > span { display: inline-flex; gap: .35rem; align-items: center; padding: .3rem .75rem; border-radius: 999px; background: var(--creme); font-weight: 600; } .fiche-faits .ico { color: var(--doux); width: 1.05em; height: 1.05em; }
.encart { display: flex; gap: .7rem; align-items: center; padding: .85rem 1rem; border-radius: 22px; font-size: .9rem; margin: .65rem 0; background: var(--creme); } .encart > .ico { flex: none; width: 22px; height: 22px; } .encart ul { margin-top: .2rem; font-size: .86rem; } .encart li::before { content: "· "; } .encart.or { background: #FBF0D6; color: #6B4A10; } .encart.vert { background: var(--vert-pale); color: #2F5E3A; } .encart.vert .bulle-rond { background: var(--vert); color: #fff; } .encart.alerte { background: var(--alerte-pale); color: var(--alerte); flex-wrap: wrap; } .encart.alerte .lien { margin-left: auto; color: var(--alerte); }
.acces-grand { background: var(--or-pale); } .acces-grand .ico { color: var(--or-fonce); } .acces-grand small { display: block; font-size: .74rem; color: var(--or-fonce); font-weight: 700; } .acces-grand b { font-size: 1.08rem; letter-spacing: -.015em; }
.suite-grande { justify-content: flex-start; text-align: left; gap: .9rem; padding: .7rem 1.3rem .7rem .7rem; margin-top: 1.1rem; min-height: 68px !important; } .suite-grande .bulle-rond { background: rgba(255, 255, 255, .16); color: #fff; width: 48px; height: 48px; } .suite-grande > span:last-child { display: grid; } .suite-grande small { font-weight: 400; font-size: .82rem; opacity: .75; }
.rangee-actions { display: flex; gap: .3rem; margin-top: 1rem; } .action { flex: 1; display: grid; justify-items: center; align-content: start; gap: .4rem; padding: .2rem; font-size: .76rem; font-weight: 600; color: var(--texte); text-decoration: none; text-align: center; min-width: 0; line-height: 1.15; } .action .bulle-rond { width: 56px; height: 56px; background: var(--blanc); box-shadow: var(--ombre); color: var(--or-fonce); } .action:active .bulle-rond { transform: scale(.82); background: var(--or-pale); }
.deux-fils { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; } .deux-fils > div { display: flex; gap: .6rem; align-items: center; padding: .55rem .8rem .55rem .55rem; border-radius: 999px; background: var(--creme); color: var(--doux); min-width: 0; } .deux-fils .bulle-rond { --c: var(--doux); width: 40px; height: 40px; background: #fff; } .deux-fils small { display: block; font-size: .72rem; font-weight: 600; } .deux-fils b { font-size: .8rem; color: var(--texte); display: block; line-height: 1.15; } .deux-fils .fait { background: var(--vert-pale); } .deux-fils .fait .bulle-rond { background: var(--vert); color: #fff; }
.statuts-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem .3rem; margin-top: 1rem; } .statut-choix { --c: var(--doux); display: grid; justify-items: center; align-content: start; gap: .4rem; font-size: .74rem; font-weight: 600; text-align: center; line-height: 1.15; color: var(--doux); } .statut-choix .bulle-rond { width: 58px; height: 58px; } .statut-choix .bulle-rond .ico { width: 25px; height: 25px; } .statut-choix:active .bulle-rond { transform: scale(.8); } .statut-choix.actif { color: var(--texte); font-weight: 700; } .statut-choix.actif .bulle-rond { background: var(--c); color: #fff; box-shadow: 0 12px 22px -10px var(--c); animation: pop .45s var(--ressort); transform: scale(1.08); }
.pli { margin-top: .7rem; border-radius: var(--rayon); background: var(--blanc); box-shadow: var(--ombre); padding: 0 1.05rem; } .pli summary { display: flex; align-items: center; gap: .6rem; min-height: 58px; font-weight: 650; cursor: pointer; list-style: none; letter-spacing: -.01em; } .pli summary::-webkit-details-marker { display: none; } .pli summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; flex: none; border-right: 2px solid var(--doux); border-bottom: 2px solid var(--doux); transform: rotate(45deg); transition: transform .3s var(--ressort); } .pli[open] summary::after { transform: rotate(-135deg); } .pli[open] { padding-bottom: 1.1rem; } .pli summary .ico { color: var(--or-fonce); } .pli.memo { background: var(--or-pale); box-shadow: none; } .pli.memo p { font-size: 1.02rem; line-height: 1.5; }
.prix { border-radius: var(--rayon); background: var(--blanc); box-shadow: var(--ombre); padding: 1.1rem; animation: entree .5s var(--doucement) both; } .prix-tete { display: flex; gap: .8rem; align-items: center; } .prix-tete > .ico { width: 48px; height: 48px; padding: 12px; border-radius: 50%; background: var(--or-pale); color: var(--or-fonce); } .prix-tete small { display: block; color: var(--doux); font-size: .78rem; } .prix-tete b { font-size: 1.5rem; letter-spacing: -.03em; display: block; line-height: 1.15; } .prix-tete span { font-size: .88rem; font-weight: 600; color: var(--or-fonce); } .prix ul { margin: .9rem 0 .6rem; display: grid; gap: .55rem; } .prix li { display: flex; justify-content: space-between; gap: .8rem; font-size: .86rem; } .prix li span { display: grid; min-width: 0; } .prix li b { text-transform: capitalize; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .prix li small, .prix em small { color: var(--doux); font-size: .76rem; display: block; font-weight: 400; } .prix em { font-style: normal; font-weight: 700; text-align: right; white-space: nowrap; }
.journal { margin-top: .8rem; border-left: 2px solid var(--trait); margin-left: 7px; } .journal li { --c: var(--sable); position: relative; padding: 0 0 1.1rem 1.2rem; } .journal i { position: absolute; left: -8px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--c); border: 3px solid var(--fond); } .journal b { font-size: .92rem; } .journal p { font-size: .88rem; } .journal small { color: var(--doux); font-size: .78rem; display: block; }
.liste-choix { display: grid; gap: .5rem; margin-top: .8rem; } .choix-ligne { position: relative; display: flex; align-items: center; gap: .85rem; width: 100%; padding: .7rem 1.05rem .7rem .7rem; min-height: 64px; border-radius: 999px; background: var(--blanc); box-shadow: var(--ombre); text-decoration: none; color: var(--texte); transition: transform .3s var(--ressort), box-shadow .2s; cursor: pointer; } button.choix-ligne:active, a.choix-ligne:active, label.choix-ligne:active { transform: scale(.97); } .choix-ligne > .ico:first-child { width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: var(--or-pale); color: var(--or-fonce); flex: none; } .choix-ligne > .ico:last-child { color: var(--sable); } .choix-ligne > span:not(.bulle-rond) { display: grid; flex: 1; min-width: 0; } .choix-ligne b { letter-spacing: -.015em; } .choix-ligne small { color: var(--doux); font-size: .82rem; line-height: 1.25; } .choix-ligne.radio input { position: absolute; opacity: 0; } .choix-ligne.actif { box-shadow: 0 0 0 2.5px var(--or), var(--ombre); } .choix-ligne.actif .bulle-rond { background: var(--or-fonce); color: #fff; } .choix-ligne .bulle-rond, .action .bulle-rond, .lieu .bulle-rond, .depot .bulle-rond { --c: var(--or-fonce); } .choix-ligne.danger .bulle-rond { --c: var(--alerte); } .choix-ligne.danger b { color: var(--alerte); } .choix-ligne:disabled { opacity: .5; box-shadow: none; } .choix-ligne.charge .bulle-rond, .choix-ligne.charge > .ico:first-child { animation: bat 1s infinite; } .choix-ligne.trajet { margin-top: 1rem; }
.liste-simple li { font-size: .86rem; padding: .3rem 0; } .apercu { display: grid; gap: .5rem; } .apercu li { display: flex; gap: .75rem; align-items: center; padding: .6rem .9rem .6rem .6rem; border-radius: 24px; background: var(--blanc); box-shadow: var(--ombre); animation: entree .4s var(--doucement) both; } .apercu li:nth-child(2) { animation-delay: .06s; } .apercu li:nth-child(3) { animation-delay: .12s; } .apercu li:nth-child(4) { animation-delay: .18s; } .apercu span:last-child { display: grid; min-width: 0; } .apercu small { color: var(--doux); font-size: .82rem; }
.pas { display: flex; gap: 6px; margin: .2rem 0 1.2rem; } .pas i { flex: 1; height: 6px; border-radius: 3px; background: var(--creme); transition: background .4s; } .pas i.fait { background: var(--or); }
.depot { display: grid; justify-items: center; gap: .35rem; width: 100%; padding: 2.4rem 1rem; border-radius: 34px; border: 2.5px dashed var(--sable); background: var(--blanc); text-align: center; transition: transform .3s var(--ressort), border-color .2s, background .2s; } .depot .bulle-rond { width: 76px; height: 76px; margin-bottom: .5rem; background: var(--brun); color: #fff; animation: flotte 3.5s ease-in-out infinite; } .depot .bulle-rond .ico { width: 32px; height: 32px; } .depot b { font-size: 1.15rem; letter-spacing: -.02em; } .depot small { color: var(--doux); } .depot:active { transform: scale(.97); } body.depose .depot, .depot:hover { border-color: var(--or); background: var(--or-pale); }
body.depose::after { content: "Lâchez le fichier ici"; position: fixed; inset: 14px; z-index: 98; display: grid; place-items: center; border-radius: 36px; border: 3px dashed var(--or); background: rgba(247, 240, 226, .9); font-size: 1.5rem; font-weight: 700; color: var(--or-fonce); pointer-events: none; } body.depose.feuille-ouverte::after { display: none; }
.rangement { text-align: center; padding-top: .5rem; } .etapes-import { display: grid; gap: .6rem; margin: 1.3rem 0; text-align: left; } .etapes-import li { display: flex; gap: .8rem; align-items: center; padding: .55rem 1rem .55rem .55rem; border-radius: 999px; background: var(--creme); color: var(--doux); font-weight: 600; font-size: .92rem; transition: background .4s, color .3s; } .etapes-import li > span:last-child { display: grid; min-width: 0; } .etapes-import small { font-weight: 400; font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .etapes-import .bulle-rond { --c: var(--sable); background: #fff; }
.etapes-import li.encours { background: var(--or-pale); color: var(--texte); } .etapes-import li.encours .bulle-rond { --c: var(--or-fonce); animation: bat 1s infinite; } .etapes-import li.fait { background: var(--vert-pale); color: #2F5E3A; } .etapes-import li.fait .bulle-rond { background: var(--vert); color: #fff; animation: pop .45s var(--ressort); } .etapes-import li.rate { background: var(--alerte-pale); color: var(--alerte); } .etapes-import li.rate .bulle-rond { --c: var(--alerte); }
.lieux { display: grid; gap: .5rem; } .lieu { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .85rem; align-items: center; padding: .65rem 1.1rem .65rem .65rem; border-radius: 999px; background: var(--blanc); box-shadow: var(--ombre); transition: transform .3s var(--ressort), box-shadow .2s; min-height: 64px; } .lieu .bulle-rond { grid-row: span 2; } .lieu b { align-self: end; letter-spacing: -.015em; } .lieu small { align-self: start; color: var(--doux); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lieu:active { transform: scale(.97); } .lieu.actif { box-shadow: 0 0 0 2.5px var(--or), var(--ombre); } .lieu.actif .bulle-rond { background: var(--or-fonce); color: #fff; animation: pop .4s var(--ressort); }

/* ---------- Messages ---------- */
.messages { position: fixed; left: 0; right: 0; bottom: calc(var(--nav) + var(--bas) + .6rem); z-index: 80; display: flex; justify-content: center; pointer-events: none; padding: 0 .8rem; }
.message { pointer-events: auto; display: flex; align-items: center; gap: .9rem; max-width: 520px; padding: .8rem 1.3rem; border-radius: 28px; background: var(--brun); color: #fff; font-size: .9rem; font-weight: 550; box-shadow: var(--ombre-forte); transform: translateY(30px) scale(.9); opacity: 0; transition: all .45s var(--ressort); } .message.visible { transform: none; opacity: 1; } .message.or { background: linear-gradient(145deg, #D9BE8E, #B8976A); color: var(--brun); font-weight: 650; } .message.alerte { background: var(--alerte); } .message-bouton { color: #EFD9A8; font-weight: 800; padding: .3rem; min-height: 32px; flex: none; } body.feuille-ouverte .messages { bottom: calc(1rem + var(--bas)); z-index: 99; }

/* ---------- Carte ---------- */
.ecran-carte { flex: 1; position: relative; min-height: 0; } .carte { position: absolute; inset: 0; background: var(--creme); font: inherit; z-index: 0; } .tuiles { filter: saturate(.55) sepia(.18) brightness(1.04); }
.leaflet-control-zoom { border: 0 !important; box-shadow: var(--ombre-forte) !important; margin: 0 .9rem calc(var(--nav) + var(--bas) + 1rem) 0 !important; border-radius: 999px !important; overflow: hidden; } .leaflet-control-zoom a { width: 46px !important; height: 46px !important; line-height: 46px !important; color: var(--texte) !important; background: #fff !important; border-color: var(--trait) !important; font-weight: 400 !important; } .leaflet-control-attribution { font-size: 10px !important; background: rgba(255, 255, 255, .7) !important; border-radius: 8px 0 0 0; }
.epingle-boite { background: none; border: 0; } .epingle { --c: var(--doux); position: relative; width: 38px; height: 38px; border-radius: 50%; background: var(--c); border: 3px solid #fff; box-shadow: 0 6px 14px -4px rgba(46, 33, 26, .55); display: grid; place-items: center; color: #fff; animation: bulle-nait .6s var(--ressort) both; transition: transform .3s var(--ressort); } .epingle .ico { width: 18px; height: 18px; } .epingle b { font: 800 .92rem var(--sans); }
.epingle i { position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 10px; background: var(--brun); color: #fff; font: 700 .68rem/20px var(--sans); font-style: normal; text-align: center; box-shadow: 0 0 0 2px #fff; } .epingle.numero { background: var(--brun); } .epingle.faite { background: var(--vert); opacity: .8; } .epingle.choisie { box-shadow: 0 0 0 5px var(--or), 0 6px 14px -4px rgba(46, 33, 26, .55); transform: scale(1.18); } .epingle.fraiche::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2.5px solid var(--c); animation: onde 2.2s infinite; } @keyframes onde { from { transform: scale(.7); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
.carte.loin .epingle-boite .epingle:not(.depart):not(.choisie) { transform: scale(.6); } .carte.loin .epingle i { display: none; }
.epingle.depart { width: 36px; height: 36px; background: linear-gradient(145deg, #D9BE8E, #8E6F3E); animation: none; } .moi { width: 20px; height: 20px; border-radius: 50%; background: #3F7FD9; border: 3px solid #fff; box-shadow: 0 0 0 7px rgba(63, 127, 217, .22); }
.trace { animation: trace 1.6s var(--doucement) both; stroke-dasharray: 4000; } @keyframes trace { from { stroke-dashoffset: 4000; } to { stroke-dashoffset: 0; } }
.carte-dessus { position: absolute; inset: 0; pointer-events: none; z-index: 5; } .carte-dessus > * { pointer-events: auto; } .carte-haut { position: absolute; top: calc(var(--haut) + .9rem); left: .9rem; right: .9rem; display: flex; gap: .5rem; flex-wrap: wrap; pointer-events: none; } .carte-haut > * { pointer-events: auto; }
.carte-cote { position: absolute; right: .9rem; bottom: calc(var(--nav) + var(--bas) + 7.6rem); display: grid; gap: .5rem; } .carte-alerte { position: absolute; top: calc(var(--haut) + 4.4rem); left: .9rem; display: inline-flex; gap: .4rem; align-items: center; padding: .5rem .95rem; border-radius: 999px; background: var(--alerte); color: #fff; font-size: .82rem; font-weight: 600; } .barre-selection.sur-carte { position: absolute; }
.carte-fiche { position: absolute; left: .6rem; right: .6rem; bottom: calc(var(--nav) + var(--bas) + .5rem); z-index: 10; max-width: 540px; margin: 0 auto; max-height: 56%; overflow-y: auto; padding: 0 .85rem .9rem; border-radius: 34px; background: var(--fond); box-shadow: var(--ombre-forte); transform: translateY(140%); transition: transform .5s var(--doucement); } .carte-fiche.ouverte { transform: none; } .prospects.serre { gap: .5rem; }

/* ---------- Tournée ---------- */
.idees { display: grid; gap: .55rem; } .idee { --c: var(--or); display: flex; align-items: center; gap: .9rem; width: 100%; padding: .7rem 1.2rem .7rem .7rem; min-height: 76px; border-radius: 999px; background: var(--blanc); box-shadow: var(--ombre); transition: transform .3s var(--ressort); animation: entree .45s var(--doucement) both; } .idee:nth-child(2) { animation-delay: .05s; } .idee:nth-child(3) { animation-delay: .1s; } .idee:nth-child(4) { animation-delay: .15s; } .idee:nth-child(5) { animation-delay: .2s; } .idee .bulle-rond { width: 56px; height: 56px; background: var(--c); color: #fff; box-shadow: 0 10px 18px -10px var(--c); } .idee .bulle-rond .ico { width: 25px; height: 25px; } .idee:active { transform: scale(.96); } .idee > span:nth-child(2) { flex: 1; display: grid; min-width: 0; } .idee b { letter-spacing: -.02em; font-size: 1.02rem; } .idee small { color: var(--doux); font-size: .84rem; line-height: 1.25; } .idee em { font-size: 1.6rem; font-weight: 700; font-style: normal; letter-spacing: -.03em; } .idee:disabled { opacity: .5; box-shadow: none; } .idee:disabled .bulle-rond { background: var(--creme); color: var(--sable); box-shadow: none; } .idee > .ico { color: var(--sable); }
.resume-tournee { display: flex; gap: .5rem; } .resume-tournee > div { flex: 1; min-width: 0; text-align: center; display: grid; align-content: center; font-size: .76rem; color: var(--doux); padding: 1.1rem .3rem; border-radius: 28px; background: var(--blanc); box-shadow: var(--ombre); animation: bulle-nait .6s var(--ressort) both; } .resume-tournee > div:nth-child(2) { animation-delay: .07s; background: var(--brun); color: var(--champagne); } .resume-tournee > div:nth-child(3) { animation-delay: .14s; } .resume-tournee b { font-size: 1.7rem; line-height: 1.15; font-weight: 700; letter-spacing: -.035em; color: var(--texte); } .resume-tournee > div:nth-child(2) b { color: #fff; }
.demarrer { margin-top: 1rem !important; min-height: 64px !important; font-size: 1.1rem !important; } .demarrer .ico { animation: bat 2s infinite; }
.etapes { margin-top: 1.6rem; position: relative; } .etapes::before { content: ""; position: absolute; left: 19px; top: 22px; bottom: 22px; width: 2px; background: repeating-linear-gradient(var(--sable) 0 4px, transparent 4px 10px); } .etape { position: relative; display: flex; gap: .85rem; align-items: flex-start; padding: .55rem 0; animation: entree .4s var(--doucement) both; } .etape > div { flex: 1; min-width: 0; display: grid; gap: .2rem; padding-top: .4rem; } .etape b { letter-spacing: -.015em; } .etape-n { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--brun); color: #fff; font-weight: 700; font-size: .92rem; z-index: 1; box-shadow: 0 0 0 5px var(--fond); } .etape.depart .etape-n { background: linear-gradient(145deg, #D9BE8E, #8E6F3E); } .etape-lot { display: flex; align-items: center; gap: .4rem; color: var(--doux); font-size: .84rem; } .etape-lot i { width: 8px; height: 8px; border-radius: 50%; flex: none; } .etape-boutons { display: flex; gap: .2rem; padding-top: .1rem; } .etape-boutons .mini { width: 34px; height: 34px; }
.guidee-haut { display: flex; justify-content: space-between; align-items: center; gap: .8rem; } .guidee-points { flex: 1; display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; } .guidee-points i { width: 9px; height: 9px; border-radius: 50%; background: var(--sable); transition: all .4s var(--ressort); } .guidee-points i.fait { background: var(--vert); } .guidee-points i.ici { background: var(--brun); transform: scale(1.5); }
.arret { padding-top: 1.6rem; } .arret h1 { font-size: 2.3rem; } .arret.sort { animation: sort .32s ease-in forwards; } @keyframes sort { to { transform: translateX(-70px) scale(.96); opacity: 0; } } .rangee-gps { display: flex; gap: .6rem; align-items: center; margin: 1.2rem 0 .5rem; } .bouton.gps { min-height: 60px; font-size: 1.03rem; margin: 0; flex: 1; }
.lot { --c: var(--doux); --s: var(--c); margin-top: .9rem; padding: 1.1rem; border-radius: 30px; background: var(--blanc); box-shadow: var(--ombre); } .lot.fait { opacity: .6; box-shadow: none; } .lot-tete { display: flex; justify-content: space-between; align-items: center; gap: .5rem; } .lot-tete > span { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; letter-spacing: -.015em; } .lot-resultat { color: var(--vert); font-weight: 700; margin-top: .5rem; animation: pop .4s var(--ressort); }
.resultats { display: flex; justify-content: space-around; gap: .4rem; margin-top: 1.1rem; } .resultat { --c: var(--doux); display: grid; justify-items: center; align-content: start; gap: .45rem; font-weight: 650; font-size: .84rem; text-align: center; color: var(--texte); flex: 1; min-width: 0; } .resultat .bulle-rond { width: 76px; height: 76px; background: var(--c); color: #fff; box-shadow: 0 14px 24px -12px var(--c), inset 0 2px 0 rgba(255, 255, 255, .22); } .resultat .bulle-rond .ico { width: 30px; height: 30px; } .resultat:active .bulle-rond { transform: scale(.8); } .resultat.grand .bulle-rond { width: 112px; height: 112px; animation: flotte 4s ease-in-out infinite; } .resultat.grand .bulle-rond .ico { width: 44px; height: 44px; } .resultat.grand { font-size: 1.08rem; }
.lien.passer { display: flex; justify-content: center; width: 100%; margin-top: .9rem; color: var(--doux); font-weight: 500; font-size: .88rem; }
.ensuite { text-align: center; color: var(--doux); font-size: .9rem; margin-top: 1.5rem !important; }
.radar-anime { position: relative; width: 130px; height: 130px; margin: .5rem auto; } .radar-anime i { position: absolute; inset: 0; border-radius: 50%; border: 2.5px solid var(--or); opacity: 0; animation: onde 2.4s infinite; } .radar-anime i:nth-child(2) { animation-delay: .8s; } .radar-anime i:nth-child(3) { animation-delay: 1.6s; } .radar-anime::after { content: ""; position: absolute; inset: 52px; border-radius: 50%; background: linear-gradient(145deg, #D9BE8E, #8E6F3E); } .radar-anime.fixe i { animation-duration: 4s; }

/* ---------- Grand écran : la barre passe à gauche ---------- */
@media (min-width: 900px) {
  :root { --nav: 0px; } .app { flex-direction: row; }
  .barre { position: static; transform: none; order: 0; flex-direction: column; align-items: stretch; width: 240px; max-width: none; height: auto; padding: 1.6rem 1rem; gap: .3rem; border-radius: 0; background: var(--fond); box-shadow: 1px 0 0 var(--trait); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .barre-marque { display: flex; align-items: center; gap: .75rem; padding: 0 .5rem 1.6rem; } .sceau { width: 44px; height: 44px; font-size: 1.35rem; } .barre-nom { font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em; } .barre-nom small { display: block; font-weight: 500; font-size: .78rem; color: var(--doux); }
  .onglet, .onglet.actif { justify-content: flex-start; padding: 0 1.1rem; height: 50px; font-size: .96rem; } .onglet > span, .onglet.actif > span { max-width: none; opacity: 1; margin-left: .85rem; } .pastille { position: static; margin-left: auto; box-shadow: none !important; }
  .ecran { padding: 2.8rem 2.5rem 0; } h1 { font-size: 2.7rem; } .ecran > * { max-width: 900px; } .prospects:not(.serre) { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); } .bulle-statut { width: 11%; min-width: 84px; } .missions { max-width: 520px; }
  .voile { align-items: stretch; justify-content: flex-end; padding: 14px; } .voile:not(.centre) .feuille { max-width: 500px; max-height: none; border-radius: 34px; transform: translateX(110%); } .voile.visible:not(.centre) .feuille { transform: none; } .voile:not(.centre) .feuille-poignee { height: 24px; } .voile:not(.centre) .feuille-poignee::after { display: none; }
  .voile.centre { justify-content: center; align-items: center; }
  .barre-selection { left: 260px; } .messages { left: 240px; } .carte-fiche { left: auto; right: 1rem; bottom: 1rem; width: 420px; } .leaflet-control-zoom { margin-bottom: 1rem !important; } .carte-cote { bottom: 8rem; }
}
@media (max-width: 370px) { .carte-jeu { flex-direction: column; text-align: center; } .bulles-mini { justify-content: center; } .onglet { min-width: 42px; padding: 0 9px; } .resultat .bulle-rond { width: 64px; height: 64px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; } }

/* ---------- Impression : feuille de route, étiquettes, lettres ---------- */
.a-imprimer { display: none; }
@media print {
  @page { margin: 12mm; } body { overflow: visible; background: #fff; height: auto; } .app, .messages, .voile, .lever, .grande-coche, .confettis { display: none !important; } .a-imprimer { display: block; font: 11pt/1.35 var(--sans); color: #000; }
  .a-imprimer h1 { font-size: 17pt; color: #000; margin-bottom: 4pt; letter-spacing: 0; } .a-imprimer p { margin-bottom: 10pt; color: #333; } .a-imprimer table { width: 100%; border-collapse: collapse; } .a-imprimer th, .a-imprimer td { border: .5pt solid #999; padding: 4pt 5pt; text-align: left; vertical-align: top; font-size: 9.5pt; } .a-imprimer th { background: #eee; } .a-imprimer .case { text-align: center; font-size: 14pt; } .a-imprimer .large { width: 26%; } .a-imprimer tr { break-inside: avoid; }
  .a-imprimer.etiquettes { display: grid; grid-template-columns: repeat(3, 63.5mm); grid-auto-rows: 38.1mm; column-gap: 2.5mm; margin: 3mm -5mm 0; } .etiquette { position: relative; padding: 5mm 5mm 3mm; display: grid; align-content: center; font-size: 10pt; line-height: 1.3; break-inside: avoid; overflow: hidden; } .etiquette small { position: absolute; top: 2mm; right: 3mm; font-size: 7pt; color: #999; } .etiquette b { font-size: 8.5pt; font-weight: 600; color: #444; }
  .lettre { break-after: page; padding: 8mm 6mm; font-size: 11.5pt; line-height: 1.55; } .lettre header { display: grid; margin-bottom: 18mm; } .lettre header b { font-size: 14pt; } .lettre header span { color: #555; font-size: 9.5pt; } .lettre address { font-style: normal; margin: 0 0 14mm 95mm; line-height: 1.4; } .lettre .date { color: #555; } .lettre p { color: #000; margin-bottom: 5mm; } .lettre .signature { margin-top: 12mm; }
}