/* Catalogue 3 (Indépendants) : styles du moteur de scènes 3D (scene3d.js).
 * Couleurs de la catégorie : --c (couleur), --f (foncée, texte et fonds à texte blanc), --o (accent clair). */

.sc {
  --c: #6b6f76; --t: #fff; --b: #5b616c; --f: #4f535a; --o: #eceef1;
  --ui: #1d1d1f; --ui-doux: #6e6e73; --ui-faible: #9a9aa0; --ui-trait: #e8e8ec; --ui-fond: #f4f4f6;
  --ok: #397e55; --ok-f: #e5f0e9; --att: #94600d; --att-f: #f7ecd6; --ko: #a5433a; --ko-f: #f6e5e2;
  --c-f: color-mix(in srgb, var(--c) 13%, #fff);
  position: relative;
  font-family: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ui);
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
.sc *, .sc *::before, .sc *::after { box-sizing: border-box; }
.sc-cadre { position: relative; width: 100%; overflow: visible; overflow-x: clip; overflow-clip-margin: 0px; }
.sc-pos { position: absolute; left: 0; top: 0; }
.sc-stage { position: relative; transform-origin: 0 0; }
.sc-monde {
  --bx: 6deg; --by: -12deg; --mx: 0; --my: 0;
  position: absolute; inset: 0;
}
.sc-pc .sc-monde { --bx: 9deg; --by: -10deg; }
.sc-tab .sc-monde { --bx: 10deg; --by: -11deg; }
.sc[data-mode="etroit"] .sc-monde { --bx: 4deg; --by: -7deg; }

/* ---------- L'ombre portée, très douce, derrière l'appareil */
.sc-ombre {
  position: absolute; left: 50%; top: 50%; width: 420px; height: 600px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(40, 32, 18, .22), rgba(40, 32, 18, .08) 55%, transparent);
  transform: translate(calc(-50% + 36px), calc(-50% + 44px));
}
.sc-pc .sc-ombre, .sc-tab .sc-ombre { width: 820px; height: 520px; }

/* ---------- Les appareils */
.sc-app { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.sc-app::before { /* l'épaisseur : une plaque sombre un peu en arrière */
  content: ""; position: absolute; left: 0; top: 0; right: 0; height: var(--hc, 100%);
  border-radius: var(--rc, 46px); background: #0b0b0d; transform: translate(3px, 4px);
}
.sc-coque {
  position: relative; width: 270px; height: 556px; padding: 9px; border-radius: 46px;
  background: linear-gradient(150deg, #3a3b40 0%, #17181b 38%, #0f1012 70%, #2b2c31 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .10), inset 0 0 0 3px #0a0a0c, 0 2px 3px rgba(0, 0, 0, .18), 0 30px 60px -24px rgba(30, 24, 12, .55);
}
.sc-tel .sc-app { --hc: 556px; --rc: 46px; width: 270px; }
.sc-ecran { position: relative; width: 100%; height: 100%; border-radius: 37px; overflow: hidden; background: var(--ui-fond); isolation: isolate; }
.sc-reflet {
  position: absolute; inset: 0; pointer-events: none; z-index: 5; border-radius: inherit;
  background: linear-gradient(112deg, transparent 32%, rgba(255, 255, 255, .20) 44%, rgba(255, 255, 255, .04) 50%, transparent 60%);
  background-size: 240% 100%; background-position: calc(42% - var(--mx) * 26%) 0;
  transition: background-position 1.4s cubic-bezier(.16, .8, .24, 1); mix-blend-mode: screen;
}
.sc-statut { position: relative; z-index: 4; height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 4px 22px 0 26px; font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; }
.sc-statut .ilot { position: absolute; left: 50%; top: 9px; width: 78px; height: 22px; margin-left: -39px; border-radius: 12px; background: #050506; }
.sc-ind { display: flex; align-items: flex-end; gap: 2px; height: 10px; }
.sc-ind i { display: block; width: 3px; background: var(--ui); border-radius: 1px; }
.sc-ind i:nth-child(1) { height: 4px; } .sc-ind i:nth-child(2) { height: 6.5px; } .sc-ind i:nth-child(3) { height: 9px; }
.sc-ind b { display: block; width: 20px; height: 10px; margin-left: 5px; border-radius: 3px; border: 1.2px solid rgba(29, 29, 31, .45); background: linear-gradient(90deg, var(--ui) 72%, transparent 72%) 1.5px 1.5px / calc(100% - 3px) calc(100% - 3px) no-repeat; }

/* ordinateur */
.sc-pc .sc-app { --hc: 404px; --rc: 16px; width: 640px; }
.sc-pc .sc-coque { width: 640px; height: 404px; padding: 12px 12px 14px; border-radius: 16px; background: linear-gradient(180deg, #2b2c30, #141517); }
.sc-pc .sc-ecran { border-radius: 5px; }
.sc-socle { position: relative; width: 780px; height: 15px; margin-left: -70px; border-radius: 2px 2px 14px 14px; background: linear-gradient(180deg, #e9e9eb 0%, #c9c9cd 55%, #a9a9ae 100%); box-shadow: 0 18px 30px -14px rgba(30, 24, 12, .5); }
.sc-socle i { position: absolute; left: 50%; top: 0; width: 120px; height: 6px; margin-left: -60px; border-radius: 0 0 8px 8px; background: linear-gradient(180deg, #b9b9be, #d6d6da); }
.sc-fenetre { height: 26px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: #ececef; border-bottom: 1px solid var(--ui-trait); }
.sc-fenetre i { width: 9px; height: 9px; border-radius: 50%; background: #d4d4d8; }
/* tablette */
.sc-tab .sc-app { --hc: 410px; --rc: 26px; width: 580px; }
.sc-tab .sc-coque { width: 580px; height: 410px; padding: 14px; border-radius: 26px; }
.sc-tab .sc-ecran { border-radius: 13px; }
/* téléphone : l'ordinateur devient une tablette debout, assez haute pour que l'écran reste lisible */
.sc[data-mode="etroit"].sc-pc .sc-app { --hc: 470px; --rc: 26px; width: 340px; }
.sc[data-mode="etroit"].sc-pc .sc-coque { width: 340px; height: 470px; padding: 12px; border-radius: 26px; background: linear-gradient(150deg, #3a3b40 0%, #17181b 38%, #0f1012 70%, #2b2c31 100%); }
.sc[data-mode="etroit"].sc-pc .sc-ecran { border-radius: 14px; }
.sc[data-mode="etroit"].sc-pc .sc-socle { display: none; }
.sc[data-mode="etroit"].sc-pc .sc-fenetre { height: 20px; }
.sc[data-mode="etroit"].sc-pc .sc-fenetre i { width: 6px; height: 6px; }
.sc[data-mode="etroit"].sc-tab .sc-app { --hc: 470px; width: 340px; }
.sc[data-mode="etroit"].sc-tab .sc-coque { width: 340px; height: 470px; padding: 12px; border-radius: 26px; }
.sc[data-mode="etroit"] .sc-app { top: 14px; transform: translate(-50%, 0); }
.sc[data-mode="etroit"] .sc-ombre { top: 300px; }

/* ---------- Les écrans (vues) */
.sc-vues { position: absolute; left: 0; right: 0; bottom: 0; top: 38px; }
.sc-pc .sc-vues { top: 26px; } .sc[data-mode="etroit"].sc-pc .sc-vues { top: 20px; }
.sc-tab .sc-vues { top: 0; }
.vue { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; }
.vue.actif { opacity: 1; visibility: visible; z-index: 2; }
.vue.actif[data-tr="glisse"]:not(.sec), .vue.actif[data-tr="entree"]:not(.sec) { animation: vueIn .9s cubic-bezier(.2, .8, .2, 1) both; }
.vue.sort { visibility: visible; z-index: 1; animation: vueOut .7s ease both; }
@keyframes vueIn { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes vueOut { from { opacity: 1; } to { opacity: 0; transform: translateX(-14px); } }
.sc-fin .vue.actif, .sc-fin .sc-carte { opacity: 0 !important; transition: opacity .5s ease !important; }

.v-tete { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 16px 11px; border-bottom: 1px solid var(--ui-trait); background: rgba(255, 255, 255, .72); }
.v-tete b { display: block; font-size: 14px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.v-tete small { display: block; font-size: 11px; color: var(--ui-doux); line-height: 1.3; }
.v-ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--b); color: var(--t); flex: none; }
.v-ic .ic { width: 16px; height: 16px; }
.v-tete.conv { padding-left: 8px; }
.v-tete.conv .ret { width: 18px; height: 18px; color: var(--f); }
.v-tete .av, .b .av { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(160deg, #d9d9de, #b9b9c0); color: #fff; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; }
.v-tete.url { justify-content: center; gap: 6px; margin: 4px 14px 8px; padding: 6px 12px; border: 0; border-radius: 10px; background: #e9e9ed; font-size: 11.5px; color: var(--ui-doux); }
.v-tete.url .ic { width: 12px; height: 12px; }
.sc-pc .v-tete, .sc-tab .v-tete { padding: 10px 16px; }
.sc-pc .v-tete.url, .sc-tab .v-tete.url { margin: 8px auto; width: 60%; padding: 5px 12px; }
.v-corps { position: relative; flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 9px; padding: 12px 12px 16px; }
.v-corps.bas { justify-content: flex-end; }
.v-corps.c2 { display: grid; grid-template-columns: var(--cols, 1fr 1fr); align-content: start; gap: 10px; }
.v-corps.c2 > .plein-l, .v-corps.c2 > .b-titre, .v-corps.c2 > .b-alerte { grid-column: 1 / -1; }
.sc[data-mode="etroit"] .v-corps.c2 { grid-template-columns: 1fr; }
.sc[data-mode="etroit"].sc-pc .v-corps { padding: 8px 9px; gap: 6px; font-size: 11px; }
.sc[data-mode="etroit"].sc-pc .v-corps.c2 > :nth-child(n + 5):not(.plein-l) { display: none; }
.sc[data-mode="etroit"].sc-pc .b-chiffre { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 11px !important; }
.sc[data-mode="etroit"].sc-pc .b-chiffre > b { font-size: 19px; margin: 0; }
.sc[data-mode="etroit"].sc-pc .b-chiffre > p { display: none; }

/* apparitions dans l'écran actif */
.vue.actif:not(.sec) .neuf { animation: blocIn .6s cubic-bezier(.2, .8, .2, 1) var(--d) both; }
@keyframes blocIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.vue.actif:not(.sec) .chg { animation: change 1.6s ease var(--d) both; }
@keyframes change { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 0%, transparent); } 25% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 28%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 0%, transparent); } }
.vue.actif:not(.sec) .nv { animation: blocIn .6s cubic-bezier(.2, .8, .2, 1) .35s both; }
.vue.actif:not(.sec) .ch, .vue.actif:not(.sec) .flash { animation: surligne 1.8s ease .3s both; }
@keyframes surligne { 0%, 100% { background-color: transparent; } 30% { background-color: color-mix(in srgb, var(--c) 20%, transparent); } }
.vue.actif:not(.sec) .pil.flash { animation: pilFlash 1s cubic-bezier(.2, .8, .2, 1) .3s both; }
@keyframes pilFlash { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: none; } }
/* le doigt qui touche un bouton */
.btn.tap { position: relative; }
.vue.actif:not(.sec) .btn.tap::after, .sc-carte.vu:not(.sec) .btn.tap::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  background: rgba(255, 255, 255, .55); box-shadow: 0 0 0 2px rgba(0, 0, 0, .12); animation: tap 1.1s ease calc(var(--d, 0s) + 1.2s) both;
}
@keyframes tap { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.8); } }

/* ---------- Les cartes qui flottent */
.sc-carte {
  position: absolute; left: 50%; top: 50%; width: var(--w); opacity: 0; pointer-events: none;
  transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--r)) scale(.94);
  transition: transform 1.3s cubic-bezier(.2, .8, .2, 1), opacity .8s ease;
}
.sc-carte.vu { opacity: 1; transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--r)); transition-delay: .7s; }
.sc-carte.sec { transition: none; }
.sc-carte-in { /* pas de flottement : un calque animé rend le texte flou */ }
@keyframes flotte { from { transform: translateY(-5px); } to { transform: translateY(5px); } }
.en-pause .sc-carte-in, .onglet-cache .sc-carte-in, .reduit .sc-carte-in { animation-play-state: paused; }
.sc-carte .b { background: #fff; border-radius: 16px; padding: 14px; border: 1px solid rgba(20, 20, 25, .06);
  box-shadow: 0 1px 2px rgba(20, 18, 12, .06), 0 14px 28px -10px rgba(30, 24, 12, .22), 0 36px 60px -30px rgba(30, 24, 12, .28); }
.sc-carte .b-bulle { background: transparent; border: 0; box-shadow: none; padding: 0; }
.sc-carte .b-bulle p { box-shadow: 0 14px 28px -12px rgba(30, 24, 12, .3); }
.sc-carte .b-notif { background: rgba(250, 250, 252, .96); }
.sc[data-mode="etroit"] .sc-carte { --w2: min(var(--w), 330px); width: var(--w2); top: auto; bottom: 10px; transform: translate(-50%, 24px) scale(.96); }
.sc[data-mode="etroit"] .sc-carte.vu.der { opacity: 1; transform: translate(-50%, 0); }
.sc[data-mode="etroit"] .sc-carte.vu:not(.der) { opacity: 0; transition-delay: 0s; }
.sc.toutes .sc-carte.vu { opacity: 1; }
.sc[data-mode="etroit"].toutes .sc-carte.vu:not(.der) { opacity: 0; }

/* ---------- La barre d'étapes sous la scène */
.sc-barre { position: relative; z-index: 3; max-width: 420px; margin: 6px auto 0; padding: 0 4px; }
.sc-segs { display: flex; gap: 6px; }
.sc-segs button { flex: 1; height: 22px; padding: 9px 0; border: 0; background: none; cursor: pointer; }
.sc-segs button i { display: block; height: 4px; border-radius: 2px; background: rgba(28, 27, 24, .14); overflow: hidden; position: relative; }
.sc-segs button i::after { content: ""; position: absolute; inset: 0; background: var(--c); transform: scaleX(0); transform-origin: left; }
.sc-segs button.fait i::after { transform: none; }
.sc-segs button.ici i::after { animation: seg var(--t, 3s) linear both; }
.en-pause .sc-segs button.ici i::after { animation-play-state: paused; }
.reduit .sc-segs button.ici i::after { animation: none; transform: none; }
@keyframes seg { to { transform: none; } }
.sc-segs button:focus-visible { outline: 2px solid var(--f); outline-offset: 2px; border-radius: 4px; }
.sc-leg { margin: 6px 0 0; text-align: center; font-size: 15px; line-height: 1.35; min-height: 2.7em; color: #1c1b18; }
.sc-leg .sc-num { display: block; font-size: 12.5px; color: #6a665d; }
.sc-leg b { font-weight: 600; }

/* ---------- Pastilles de statut, boutons */
.pil { display: inline-flex; align-items: center; gap: 4px; min-height: 20px; max-width: 100%; padding: 0 8px; border-radius: 10px; font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.pil.ok { color: var(--ok); background: var(--ok-f); } .pil.att { color: var(--att); background: var(--att-f); }
.pil.ko { color: var(--ko); background: var(--ko-f); } .pil.c { color: var(--f); background: var(--c-f); }
.pil.gris { color: #5c5e66; background: #ececef; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 10px; font-size: 12.5px; font-weight: 600; background: var(--b); color: var(--t); white-space: nowrap; }
.btn .ic { width: 14px; height: 14px; }
.btn.contour { background: #fff; color: var(--f); box-shadow: inset 0 0 0 1.4px color-mix(in srgb, var(--f) 45%, #fff); }
.btn.ok { background: var(--ok); } .btn.ko { background: var(--ko); }
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Les blocs */
.b { position: relative; font-size: 12.5px; line-height: 1.38; }
.v-corps > .b:not(.b-bulle):not(.b-ecrit):not(.b-titre):not(.b-bouton):not(.b-appel.plein):not(.b-texte.petit) { background: #fff; border-radius: 14px; padding: 11px 12px; box-shadow: 0 0 0 1px rgba(20, 20, 25, .05), 0 1px 2px rgba(20, 20, 25, .04); }
.b small { color: var(--ui-doux); }
.b b { font-weight: 600; }

/* bulles */
.b-bulle { display: flex; flex-direction: column; max-width: 82%; }
.b-bulle p { margin: 0; padding: 8px 12px; border-radius: 18px; background: #e7e7eb; font-size: 12.5px; line-height: 1.38; }
.b-bulle small { font-size: 10px; margin: 3px 8px 0; }
.b-bulle .nom { margin: 0 0 3px 10px; }
.b-bulle.out { align-self: flex-end; align-items: flex-end; }
.b-bulle.out p { background: var(--b); color: var(--t); border-bottom-right-radius: 6px; }
.b-bulle.in p { border-bottom-left-radius: 6px; }
.b-ecrit { display: none; align-self: flex-start; gap: 4px; padding: 11px 13px; border-radius: 18px; background: #e7e7eb; }
.b-ecrit i { width: 6px; height: 6px; border-radius: 50%; background: #9c9ca3; animation: point 1s ease-in-out infinite; }
.b-ecrit i:nth-child(2) { animation-delay: .15s; } .b-ecrit i:nth-child(3) { animation-delay: .3s; }
@keyframes point { 0%, 100% { opacity: .35; transform: none; } 50% { opacity: 1; transform: translateY(-2px); } }
.vue.actif:not(.sec) .b-ecrit.neuf { display: flex; animation: ecrit 1s ease var(--d) both; }
@keyframes ecrit { 0% { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; } 12% { opacity: 1; max-height: 40px; padding-top: 11px; padding-bottom: 11px; } 80% { opacity: 1; max-height: 40px; padding-top: 11px; padding-bottom: 11px; margin-bottom: 0; } 100% { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: -9px; } }

/* appel */
.b-appel:not(.plein) { display: flex; align-items: center; gap: 10px; }
.b-appel .ap-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ui-fond); color: var(--ui-doux); }
.b-appel .ap-ic.ko { background: var(--ko-f); color: var(--ko); }
.b-appel div { flex: 1; min-width: 0; } .b-appel span { display: block; font-size: 11.5px; color: var(--ui-doux); }
.b-appel:not(.plein) b { display: block; }
.b-appel.plein { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 34px; text-align: center; gap: 2px; }
.b-appel.plein .ap-av { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(160deg, #cfcfd5, #a7a7b0); color: #fff; font-size: 26px; font-weight: 500; margin-bottom: 14px; }
.b-appel.plein b { font-size: 20px; font-weight: 500; letter-spacing: -.01em; }
.b-appel.plein > span { font-size: 12px; color: var(--ui-doux); }
.b-appel.plein em { font-style: normal; font-size: 12.5px; margin-top: 8px; color: var(--ui-doux); }
.b-appel.plein em.ko { color: var(--ko); font-weight: 600; }
.ap-btns { display: flex; gap: 70px; margin-top: auto; padding-bottom: 46px; }
.ap-btns i { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; color: #fff; }
.ap-btns i.ko { background: #ce534a; } .ap-btns i.ko .ic { transform: rotate(135deg); } .ap-btns i.ok { background: #43a05c; }
.ap-btns .ic { width: 24px; height: 24px; }
.b-appel.manque .ap-btns { opacity: .35; }
.vue.actif:not(.sec) .b-appel.plein:not(.manque) .ap-btns i.ok { animation: sonne 1s ease-in-out infinite; }
@keyframes sonne { 0%, 100% { transform: none; } 20% { transform: rotate(-12deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } }
.v-corps:has(.b-appel.plein) { padding: 0; }

/* notification */
.b-notif { display: flex; gap: 10px; align-items: flex-start; border-radius: 18px !important; background: rgba(255, 255, 255, .9); }
.no-ic { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--b); color: var(--t); }
.no-ic .ic { width: 16px; height: 16px; }
.b-notif > div { flex: 1; min-width: 0; }
.b-notif p { margin: 0; color: #3a3a3f; }
.no-haut { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ui-doux) !important; margin-bottom: 1px !important; }
.no-haut small { font-size: 10.5px; }
.b-notif b { display: block; font-size: 12.5px; }

/* e-mail */
.b-mail .ml-objet { margin: 0 0 8px; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.ml-de { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ml-de div { flex: 1; min-width: 0; } .ml-de b { display: block; font-size: 12px; } .ml-de small { font-size: 10.5px; }
.ml-txt { margin: 0 0 8px; color: #33333a; }
.ml-pj { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 9px; background: var(--ui-fond); font-size: 11px; margin: 0 6px 8px 0; }
.ml-pj .ic { width: 14px; height: 14px; color: var(--ko); }
.b-mail .btn { margin-top: 2px; }

/* boîte de réception */
.b-boite { padding: 2px 0 !important; }
.bo-l { display: flex; gap: 9px; align-items: flex-start; padding: 9px 12px; border-bottom: 1px solid var(--ui-trait); }
.bo-l:last-child { border-bottom: 0; }
.bo-l > div { flex: 1; min-width: 0; }
.bo-l p { margin: 0; display: flex; justify-content: space-between; gap: 6px; }
.bo-l p b { font-weight: 500; } .bo-l.nonlu p b { font-weight: 650; }
.bo-l .av { width: 26px; height: 26px; font-size: 10px; }
.bo-o { font-size: 11.5px; display: block !important; overflow-wrap: break-word; }
.bo-l.nonlu .bo-o { font-weight: 550; }
.bo-t { font-size: 11px; color: var(--ui-doux); display: block !important; overflow-wrap: break-word; }
.bo-tag { align-self: center; }

/* facture */
.b-facture .fa-haut { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.fa-haut small { display: block; font-size: 10.5px; } .fa-haut b { font-size: 14px; font-family: inherit; font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: -.02em; }
.fa-cl { display: flex; justify-content: space-between; margin: 0 0 8px; font-weight: 600; }
.fa-cl span { font-weight: 400; color: var(--ui-doux); font-size: 11px; }
.fa-l p { display: flex; justify-content: space-between; gap: 10px; margin: 0; padding: 4px 0; border-top: 1px dashed var(--ui-trait); font-size: 11.5px; color: #3c3c42; }
.fa-l p span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fa-tot { display: flex; justify-content: space-between; margin: 6px 0 0; padding-top: 7px; border-top: 1.5px solid var(--ui); font-size: 13px; }
.fa-tot b { font-size: 15px; font-variant-numeric: tabular-nums; }
.fa-note { margin: 7px 0 0; font-size: 10.5px; color: var(--ui-doux); }
.b-facture .btn { margin-top: 10px; width: 100%; }

/* paiement reçu */
.b-paiement { text-align: center; }
.pa-ok { display: grid; place-items: center; width: 36px; height: 36px; margin: 2px auto 6px; border-radius: 50%; background: var(--ok); color: #fff; }
.pa-ok .ic { width: 20px; height: 20px; stroke-width: 2.2; }
.b-paiement > small { display: block; font-size: 11px; }
.b-paiement > b { display: block; font-size: 24px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: 1px 0 2px; }
.b-paiement > p { margin: 0; color: #3c3c42; }
.pa-bas { display: flex; justify-content: center; gap: 12px; margin-top: 8px !important; padding-top: 8px; border-top: 1px solid var(--ui-trait); font-size: 10.5px; color: var(--ui-doux) !important; }
.pa-bas span { display: inline-flex; align-items: center; gap: 4px; } .pa-bas .ic { width: 13px; height: 13px; }
.vue.actif:not(.sec) .neuf .pa-ok, .sc-carte.vu:not(.sec) .pa-ok { animation: pop .7s cubic-bezier(.2, .9, .3, 1.3) calc(var(--d, 0s) + .4s) both; }
@keyframes pop { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }

/* agenda */
.ag-j { margin: 0 0 7px; font-weight: 600; font-size: 12.5px; }
.ag-l { display: flex; flex-direction: column; gap: 5px; }
.ag-e { display: grid; grid-template-columns: 40px 1fr; gap: 8px; align-items: stretch; }
.ag-e small { font-size: 10.5px; padding-top: 5px; font-variant-numeric: tabular-nums; }
.ag-e > div { padding: 5px 9px; border-radius: 7px; border-left: 3px solid var(--c); background: var(--c-f); }
.ag-e b { display: block; font-size: 11.5px; } .ag-e span { display: block; font-size: 10.5px; color: var(--ui-doux); }
.ag-e.opt > div { background: repeating-linear-gradient(135deg, #fff 0 5px, var(--att-f) 5px 10px); border-left-color: var(--att); }
.ag-e.gris > div { background: var(--ui-fond); border-left-color: #c9c9cf; }
.ag-e.ko > div { background: var(--ko-f); border-left-color: var(--ko); }
.ag-e.ok > div { background: var(--ok-f); border-left-color: var(--ok); }

/* mois */
.mo-t { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 7px; }
.mo-t small { font-size: 10px; }
.mo-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.mo-g small { font-size: 9.5px; color: var(--ui-faible); }
.mo-g span { height: 22px; line-height: 22px; border-radius: 6px; font-size: 10.5px; font-variant-numeric: tabular-nums; }
.mo-g span.pris { background: var(--c-f); color: var(--f); font-weight: 600; }
.mo-g span.sel { background: var(--b); color: var(--t); font-weight: 600; }
.mo-g span.opt { background: var(--att-f); color: var(--att); font-weight: 600; }
.mo-g span.ko { background: var(--ko); color: #fff; font-weight: 600; }
.mo-g span.auj { box-shadow: inset 0 0 0 1.4px var(--ui); }

/* étoiles */
.b-etoiles { text-align: center; }
.b-etoiles > b { display: block; font-size: 13px; } .b-etoiles > p { margin: 2px 0 0; color: var(--ui-doux); font-size: 11.5px; }
.et-l { display: flex; justify-content: center; gap: 5px; margin: 10px 0 4px; }
.et-l i { color: #d4d4d9; } .et-l .ic { width: 26px; height: 26px; }
.et-l i.on { color: #e3a21a; } .et-l i.on .ic { fill: currentColor; }
.vue.actif:not(.sec) .neuf .et-l i.on, .sc-carte.vu:not(.sec) .et-l i.on { animation: pop .5s cubic-bezier(.2, .9, .3, 1.3) calc(var(--d, 0s) + .5s + var(--e) * .14s) both; }
.b-etoiles .btn { margin-top: 8px; }

/* tableau */
.ta-t { display: flex; align-items: center; gap: 7px; margin: 0 0 7px; }
.ta-t .ic { width: 15px; height: 15px; color: var(--f); } .ta-t small { margin-left: auto; font-size: 10.5px; }
.ta { display: flex; flex-direction: column; font-size: 11px; }
.ta p { display: grid; grid-template-columns: var(--g); gap: 8px; align-items: center; margin: 0; padding: 5px 4px; border-bottom: 1px solid var(--ui-trait); border-radius: 4px; }
.ta p span { min-width: 0; overflow-wrap: break-word; line-height: 1.3; }
.ta p span:not(:first-child) { font-variant-numeric: tabular-nums; }
.sc[data-mode="etroit"] .ta[data-g2] p { grid-template-columns: var(--g2); }
.sc[data-mode="etroit"] .ta .x { display: none; }
.ta .ta-h { font-size: 10px; color: var(--ui-faible); font-weight: 500; padding-top: 0; }
.ta p.hl { background: var(--c-f); }
.ta .ta-tot { border-bottom: 0; border-top: 1.5px solid var(--ui); font-weight: 600; }
.sc-pc .ta { font-size: 11.5px; } .sc-pc .ta p { padding: 6px 6px; }

/* jauge */
.ja-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 8px; }
.ja-h span { color: #3c3c42; } .ja-h b { font-variant-numeric: tabular-nums; font-size: 13px; }
.ja-b { position: relative; height: 9px; border-radius: 5px; background: #ececf0; }
.ja-b i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p) * 100%); border-radius: 5px; background: var(--c); }
.vue.actif:not(.sec) .ja-b i, .sc-carte.vu:not(.sec) .ja-b i { animation: jauge 1.3s cubic-bezier(.3, .7, .2, 1) calc(var(--d, 0s) + .3s) both; }
@keyframes jauge { from { width: calc(var(--p0) * 100%); } to { width: calc(var(--p) * 100%); } }
.ja-b.att i { background: #ba8830; } .ja-b.ko i { background: var(--ko); } .ja-b.ok i { background: var(--ok); }
.ja-b em { position: absolute; top: -3px; bottom: -3px; left: calc(var(--s) * 100%); width: 2px; background: var(--ui); border-radius: 1px; opacity: .55; }
.ja-t { margin: 8px 0 0; font-size: 11px; color: var(--ui-doux); }

/* chiffre */
.b-chiffre small { display: block; font-size: 11px; }
.b-chiffre > b { display: block; font-size: 26px; font-weight: 600; letter-spacing: -.025em; font-variant-numeric: tabular-nums; line-height: 1.15; margin: 2px 0; color: var(--ui); }
.b-chiffre > b.c { color: var(--f); } .b-chiffre > b.ok { color: var(--ok); } .b-chiffre > b.ko { color: var(--ko); } .b-chiffre > b.att { color: var(--att); }
.b-chiffre p { margin: 0; font-size: 11px; color: var(--ui-doux); }

/* liste à cocher */
.li-t { margin: 0 0 6px; font-weight: 600; }
.li { display: flex; align-items: center; gap: 9px; padding: 5px 2px; border-radius: 6px; }
.li + .li { border-top: 1px solid var(--ui-trait); }
.li i { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #c6c6cc; }
.li i .ic { width: 12px; height: 12px; stroke-width: 2.4; }
.li.ok i { background: var(--ok); box-shadow: none; color: #fff; }
.li.att i { box-shadow: inset 0 0 0 1.5px #ba8830; background: var(--att-f); }
.li.ko i { background: var(--ko); box-shadow: none; color: #fff; }
.li > div { flex: 1; min-width: 0; } .li span { display: block; } .li small { display: block; font-size: 10.5px; }
.li > b { font-size: 11.5px; font-variant-numeric: tabular-nums; }
.li.ok span { color: #3c3c42; }
.vue.actif:not(.sec) .li.ch.ok i { animation: pop .5s cubic-bezier(.2, .9, .3, 1.3) .4s both; }

/* fichiers */
.fi-ch { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 0 0 6px; font-size: 10.5px; color: var(--ui-doux); }
.fi-ch .ic { width: 14px; height: 14px; color: var(--f); } .fi-ch i { font-style: normal; color: var(--ui-faible); }
.fi-ch span:last-child { color: var(--ui); font-weight: 600; }
.fi { display: flex; align-items: center; gap: 9px; padding: 5px 0; }
.fi + .fi { border-top: 1px solid var(--ui-trait); }
.fi > i { display: grid; place-items: center; flex: none; width: 28px; height: 32px; border-radius: 5px; background: var(--ui-fond); color: var(--ui-doux); font-style: normal; font-size: 8.5px; font-weight: 700; letter-spacing: .03em; }
.fi > i.fi-pdf { background: #fbe9e7; color: #b23a30; } .fi > i.fi-xls { background: #e6f2ea; color: #397e55; }
.fi > i.fi-img { background: #e8eef7; color: #3b5f99; } .fi > i.fi-dossier { background: var(--c-f); color: var(--f); }
.fi > i .ic { width: 15px; height: 15px; }
.fi > div { flex: 1; min-width: 0; }
.fi span { display: block; font-size: 11.5px; overflow-wrap: anywhere; line-height: 1.3; }
.fi small { display: block; font-size: 10px; }

/* signature */
.b-signature > small { font-size: 10.5px; }
.si-zone { position: relative; height: 72px; margin: 6px 0; border-radius: 10px; background: #fafafb; box-shadow: inset 0 0 0 1px var(--ui-trait); }
.si-zone svg { position: absolute; inset: 4px 10px; width: calc(100% - 20px); height: calc(100% - 8px); }
.si-zone path { fill: none; stroke: #1f2a52; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.vue.actif:not(.sec) .neuf .si-zone path, .vue.actif:not(.sec) .chg .si-zone path, .sc-carte.vu:not(.sec) .si-zone path { animation: trace 1.6s ease-in-out calc(var(--d, 0s) + .4s) both; }
@keyframes trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.b-signature.vide .si-zone path { stroke-dashoffset: 1; animation: none !important; }
.si-ligne { position: absolute; left: 14px; right: 14px; bottom: 16px; border-bottom: 1px dashed #c9c9cf; }
.b-signature p { display: flex; justify-content: space-between; margin: 0; font-size: 11.5px; }

/* bouton seul */
.b-bouton { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.b-bouton .btn { height: 38px; border-radius: 12px; }
.b-bouton small { text-align: center; font-size: 10.5px; }

/* trajet */
.b-trajet { padding: 0 !important; overflow: hidden; }
.tr-plan { display: block; width: 100%; height: auto; }
.tr-fond { fill: #eceee9; } .tr-parc { fill: #dfe6d6; } .tr-eau { fill: #d6e2ea; }
.tr-rue { fill: none; stroke: #fff; stroke-width: 5; } .tr-rue.fine { stroke-width: 2.4; opacity: .85; }
.tr-route { fill: none; stroke: var(--c); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.vue.actif:not(.sec) .neuf .tr-route, .sc-carte.vu:not(.sec) .tr-route { animation: trace 1.8s ease-in-out calc(var(--d, 0s) + .3s) both; }
.tr-dep { fill: #fff; stroke: var(--f); stroke-width: 3; } .tr-arret { fill: #fff; stroke: var(--f); stroke-width: 2.5; }
.tr-pin { position: absolute; right: 18px; top: 10px; color: var(--ko); }
.tr-pin .ic { width: 24px; height: 24px; fill: #fff; stroke-width: 1.8; }
.tr-info { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 0 8px; padding: 9px 12px 11px; }
.tr-info b { font-size: 16px; color: var(--ok); } .tr-info span { font-size: 11px; color: var(--ui-doux); }
.tr-info p { grid-column: 1 / -1; margin: 1px 0 0; font-size: 11.5px; } .tr-info em { font-style: normal; color: var(--ui-faible); }

/* photos */
.ph-g { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 5px; }
.ph { position: relative; aspect-ratio: 1; border-radius: 7px; overflow: hidden; }
.ph small { position: absolute; left: 5px; bottom: 5px; padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, .88); color: var(--ui) !important; font-size: 9.5px; font-weight: 600; }
.ph i { position: absolute; right: 5px; top: 5px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--b); color: var(--t); }
.ph i .ic { width: 12px; height: 12px; stroke-width: 2.4; }
.ph.sel { box-shadow: inset 0 0 0 2.5px var(--c); }
.ph.flou::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .0) 0 14px, rgba(255, 255, 255, .28) 14px 16px); }
.ph em { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-24deg); font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .14em; color: rgba(255, 255, 255, .85); z-index: 1; }
.vue.actif:not(.sec) .ph.ch i { animation: pop .45s cubic-bezier(.2, .9, .3, 1.3) .5s both; }
.ph-t { margin: 7px 0 0; font-size: 11px; color: var(--ui-doux); }

/* barres */
.gr-t { display: flex; justify-content: space-between; margin: 0 0 8px; color: #3c3c42; } .gr-t b { color: var(--ui); }
.gr-b { display: flex; align-items: flex-end; gap: 7px; height: 92px; }
.gr-b > div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 3px; }
.gr-b i { display: block; width: 100%; height: calc(var(--h) * 62px + 4px); border-radius: 4px 4px 2px 2px; background: #d9d9de; transform-origin: bottom; }
.gr-b .c i { background: var(--c); } .gr-b .ko i { background: var(--ko); } .gr-b .ok i { background: var(--ok); } .gr-b .att i { background: #ba8830; }
.gr-b em { font-style: normal; font-size: 9.5px; font-weight: 600; color: #3c3c42; font-variant-numeric: tabular-nums; }
.gr-b small { font-size: 9.5px; }
.vue.actif:not(.sec) .neuf .gr-b i, .sc-carte.vu:not(.sec) .gr-b i { animation: barre .9s cubic-bezier(.2, .8, .2, 1) calc(var(--d, 0s) + .3s + var(--i) * .07s) both; }
@keyframes barre { from { transform: scaleY(0); } to { transform: none; } }

/* QR */
.b-qr { text-align: center; }
.b-qr svg { display: block; width: 104px; height: 104px; margin: 6px auto; fill: var(--ui); }
.b-qr > small { font-size: 10.5px; } .b-qr > b { font-family: inherit; font-variant-numeric: tabular-nums; font-weight: 500; }
.b-qr p { margin: 4px 0 0; font-size: 11px; color: var(--ui-doux); }

/* carte de fidélité */
.b-tampons { background: linear-gradient(150deg, color-mix(in srgb, var(--b) 88%, #fff), var(--b) 55%, color-mix(in srgb, var(--b) 82%, #000)) !important; color: var(--t); }
.tp-haut { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.tp-haut b { font-size: 13.5px; } .tp-haut small { color: inherit; opacity: .78; font-size: 10.5px; }
.tp-g { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.tp-g i { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; border: 1.4px dashed color-mix(in srgb, var(--t) 50%, transparent); color: color-mix(in srgb, var(--t) 50%, transparent); }
.tp-g i.on { background: var(--t); border: 0; color: var(--b); }
.tp-g .ic { width: 14px; height: 14px; stroke-width: 2.2; }
.vue.actif:not(.sec) .tp-g i.nv, .sc-carte.vu:not(.sec) .tp-g i.nv { animation: pop .5s cubic-bezier(.2, .9, .3, 1.3) .6s both; }
.tp-bas { display: flex; justify-content: space-between; margin: 10px 0 0; font-size: 10.5px; color: inherit; opacity: .85; }

/* chrono */
.b-chrono { text-align: center; }
.b-chrono > small { display: block; font-size: 11px; }
.b-chrono > b { display: block; font-family: inherit; font-variant-numeric: tabular-nums; font-weight: 400; font-size: 30px; letter-spacing: -.03em; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.b-chrono p { margin: 0 0 10px; color: var(--ui-doux); font-size: 11.5px; }
.b-chrono.actif > small::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--ko); vertical-align: 1px; animation: point 1.4s ease-in-out infinite; }

/* étiquette */
.b-etiquette { border: 1.5px solid var(--ui) !important; box-shadow: none !important; background: #fffefb !important; }
.b-etiquette > b { display: block; font-size: 14px; margin-bottom: 4px; }
.b-etiquette > p { margin: 0; font-size: 11px; color: #3c3c42; }
.b-etiquette > p b { font-weight: 700; color: var(--ui); text-decoration: underline; text-underline-offset: 2px; }
.et-bas { display: flex; justify-content: space-between; margin-top: 8px !important; padding-top: 6px; border-top: 1px solid var(--ui-trait); font-variant-numeric: tabular-nums; }

/* suivi de colis */
.su-n { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; }
.su-n .ic { width: 15px; height: 15px; color: var(--f); } .su-n b { font-family: inherit; font-variant-numeric: tabular-nums; font-weight: 500; font-size: 11.5px; } .su-n small { margin-left: auto; font-size: 10.5px; }
.su { position: relative; display: flex; gap: 10px; padding: 0 0 9px; }
.su:not(:last-child)::before { content: ""; position: absolute; left: 5px; top: 13px; bottom: 0; width: 2px; background: var(--ui-trait); }
.su.fait:not(:last-child)::before { background: var(--c); }
.su > i { flex: none; width: 12px; height: 12px; margin-top: 2px; border-radius: 50%; box-shadow: inset 0 0 0 2px #cdcdd2; background: #fff; }
.su.fait > i { background: var(--c); box-shadow: none; }
.su.ici > i { background: #fff; box-shadow: inset 0 0 0 3px var(--c), 0 0 0 4px var(--c-f); }
.su span { display: block; font-size: 11.5px; } .su small { display: block; font-size: 10px; }
.su:not(.fait):not(.ici) span { color: var(--ui-faible); }
.su.ici span { font-weight: 600; }

/* progression */
.pr-t { display: flex; justify-content: space-between; margin: 0 0 9px; } .pr-t small { font-size: 10.5px; }
.pr { display: grid; grid-template-columns: repeat(var(--n), 1fr); position: relative; }
.pr::before { content: ""; position: absolute; left: calc(50% / var(--n)); right: calc(50% / var(--n)); top: 8px; height: 2px; background: var(--ui-trait); }
.pr > div { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.pr i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #cdcdd2; color: #fff; }
.pr .fait i { background: var(--b); color: var(--t); box-shadow: none; } .pr .ici i { box-shadow: inset 0 0 0 5px var(--c); }
.pr i .ic { width: 11px; height: 11px; stroke-width: 2.6; }
.pr small { font-size: 9.5px; line-height: 1.2; } .pr .ici small { color: var(--ui); font-weight: 600; }

/* formulaire */
.fo-t { margin: 0 0 8px; font-weight: 600; font-size: 13px; }
.fo-c { padding: 6px 0; border-bottom: 1px solid var(--ui-trait); }
.fo-c small { display: block; font-size: 10px; } .fo-c span { display: block; font-size: 12px; }
.fo-c span.vide { color: var(--ui-faible); } .fo-c span.ok { color: var(--ok); font-weight: 600; }
.b-form .btn { width: 100%; margin-top: 10px; }

/* code */
.b-code { text-align: center; } .b-code small { font-size: 10.5px; }
.b-code > b { display: block; margin: 4px 0; font-family: inherit; font-variant-numeric: tabular-nums; font-weight: 500; font-size: 26px; letter-spacing: .02em; }
.b-code p { margin: 0; font-size: 11px; color: var(--ui-doux); }

/* alerte */
.b-alerte { display: flex; gap: 10px; align-items: flex-start; }
.b-alerte > i { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; }
.b-alerte > i .ic { width: 15px; height: 15px; }
.b-alerte > i.ko { background: var(--ko-f); color: var(--ko); } .b-alerte > i.att { background: var(--att-f); color: var(--att); }
.b-alerte > i.ok { background: var(--ok-f); color: var(--ok); } .b-alerte > i.c { background: var(--c-f); color: var(--f); }
.b-alerte b { display: block; font-size: 12.5px; } .b-alerte p { margin: 2px 0 0; color: #3c3c42; font-size: 11.5px; }
.v-corps > .b-alerte.ko { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ko) 30%, transparent) !important; }

/* lignes */
.lg-t { margin: 0 0 4px; font-weight: 600; }
.b-lignes > p { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0; padding: 5px 0; border-bottom: 1px solid var(--ui-trait); }
.b-lignes > p span { color: #3c3c42; } .b-lignes > p b { font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: break-word; }
.b-lignes > .lg-tot { border-bottom: 0; padding-top: 7px; font-size: 13.5px; } .lg-tot b { color: var(--f); }

/* texte */
.b-texte > b { display: block; margin-bottom: 3px; } .b-texte p { margin: 0; color: #3c3c42; }
.b-texte.petit { font-size: 11px; color: var(--ui-doux); text-align: center; padding: 0 8px; }

/* contact */
.b-contact { display: flex; align-items: center; gap: 10px; }
.b-contact > div { flex: 1; min-width: 0; } .b-contact b { display: block; } .b-contact small { display: block; font-size: 10.5px; }
.b-contact .av { background: var(--c-f); color: var(--f); }
.b-contact .av .ic { width: 16px; height: 16px; }

/* document */
.do-p { position: relative; padding: 12px 12px 14px; border-radius: 4px; background: #fff; box-shadow: 0 0 0 1px var(--ui-trait); }
.sc-carte .b-doc { padding: 10px; background: #f2f2f4; }
.do-p > b { display: block; font-size: 11.5px; } .do-p > small { display: block; font-size: 9.5px; margin-bottom: 8px; }
.do-l i { display: block; height: 4px; margin: 6px 0; border-radius: 2px; background: #e6e6ea; }
.do-sig { display: block; width: 90px; height: 24px; margin: 6px 0 0 auto; }
.do-sig path { fill: none; stroke: #1f2a52; stroke-width: 1.6; stroke-linecap: round; }
.do-tampon { position: absolute; right: 10px; top: 12px; padding: 3px 8px; border: 1.5px solid var(--ok); border-radius: 5px; color: var(--ok); font-size: 9.5px; font-weight: 700; letter-spacing: .06em; transform: rotate(-8deg); }
.do-nom { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 10.5px; color: #3c3c42; }
.do-nom .ic { width: 14px; height: 14px; color: var(--ko); }

/* météo */
.b-meteo { display: flex; align-items: center; gap: 10px; }
.b-meteo > i { color: #d99a1c; } .b-meteo > i .ic { width: 30px; height: 30px; }
.b-meteo > div { flex: 1; } .b-meteo b { display: block; font-size: 18px; } .b-meteo span { font-size: 11px; color: var(--ui-doux); }
.b-meteo > small { text-align: right; font-size: 10.5px; }

/* anneau */
.b-anneau { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 4px 12px; }
.b-anneau svg { grid-row: span 2; width: 74px; height: 74px; transform: rotate(-90deg); }
.b-anneau circle { fill: none; stroke: #ececf0; stroke-width: 7; }
.b-anneau .an-p { stroke: var(--c); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p)); }
.b-anneau .an-p.att { stroke: #ba8830; } .b-anneau .an-p.ko { stroke: var(--ko); } .b-anneau .an-p.ok { stroke: var(--ok); }
.vue.actif:not(.sec) .an-p, .sc-carte.vu:not(.sec) .an-p { animation: anneau 1.4s cubic-bezier(.3, .7, .2, 1) calc(var(--d, 0s) + .3s) both; }
@keyframes anneau { from { stroke-dashoffset: calc(1 - var(--p0)); } to { stroke-dashoffset: calc(1 - var(--p)); } }
.b-anneau > div { grid-column: 1; grid-row: 1 / span 2; text-align: center; align-self: center; }
.b-anneau > div b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; line-height: 1.1; } .b-anneau > div small { font-size: 9.5px; }
.an-l { grid-column: 2; grid-row: 1 / span 2; margin: 0; } .an-l b { display: block; font-size: 12.5px; } .an-l span { display: block; font-size: 11px; color: var(--ui-doux); margin-top: 2px; }

/* pastilles, titre */
.b-puces > small { display: block; font-size: 10.5px; margin-bottom: 6px; }
.b-puces > div { display: flex; flex-wrap: wrap; gap: 5px; }
.b-titre { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 4px 0; }
.b-titre b { font-size: 15px; letter-spacing: -.015em; } .b-titre small { font-size: 10.5px; }

/* ---------- Mini (cartes des logiciels) : tout est figé, l'appareil se coupe en bas */
.sc-mini { height: 100%; }
.sc-mini .sc-cadre { overflow: hidden; height: 100%; }
.sc-mini .sc-app { transform: translate(calc(-50% + var(--dx, 0px)), -50%); }
.sc-mini .sc-monde { --bx: 5deg; --by: -10deg; transition: none; }
.sc-mini .sc-carte { display: none; }
.sc-mini .sc-carte.der { display: block; transition: none; }
.sc-mini .sc-carte-in { animation: none; }
.sc-mini .v-corps.bas { justify-content: flex-start; }
.sc-mini .ap-btns i.ok { animation: none !important; }
.sc-mini .sc-ombre { display: none; }

/* ---------- Composition (visuel d'une catégorie) */
.sc-compo .sc-monde { --bx: 8deg; --by: -12deg; }
.sc-compo .sc-carte { transition: none; }
.sc-compo .sc-carte-in { animation-duration: 7s; }

/* ---------- Mouvement réduit : tout est montré, rien ne bouge */
.reduit .sc-monde, .reduit .sc-carte, .reduit .vue { transition: none !important; animation: none !important; }
.reduit * { animation-duration: 0s !important; animation-delay: 0s !important; }
@media (prefers-reduced-motion: reduce) { .sc *, .sc { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; transition-delay: 0s !important; } }

/* ---------- Mesure de l'emprise (scene3d.js) : toutes les cartes à leur place finale, sans transition ni mouvement */
.sc.mesure .sc-monde { transition: none !important; --mx: 0 !important; --my: 0 !important; }
.sc.mesure .sc-carte { transition: none !important; transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--r)) !important; }
.sc.mesure .sc-carte-in { animation: none !important; }
.sc[data-mode="etroit"].mesure .sc-carte { transform: translate(-50%, 0) !important; }
/* téléphone : les photos seules ne prennent plus toute la hauteur de l'écran */
.sc[data-mode="etroit"] .ph { aspect-ratio: 4 / 3; }

/* ---------- Retouches du 25/10 : appel entrant (l'avatar et les boutons gardent leur taille ; rien ne passe sous le haut de l'écran) */
.b-appel.plein > div { flex: none; }
.b-appel.plein .ap-av { flex: none; }
.b-appel.plein { padding-top: 30px; min-height: 0; }
.v-tete { position: relative; z-index: 2; }

/* ---------- Netteté : aucun flou, aucune ombre de texte, aucune 3D qui rastérise le texte des scènes */
.sc, .sc * { text-shadow: none !important; filter: none; -webkit-backdrop-filter: none; backdrop-filter: none; will-change: auto; }
.sc-monde, .sc-stage, .sc-app, .sc-carte, .sc-carte-in { transform-style: flat; perspective: none; backface-visibility: visible; }

/* ---------- Animations sans fin : arrêtées quand la scène est hors de l'écran (en-pause) et dans les vignettes (29/10) */
.en-pause .b-ecrit i, .en-pause .ap-btns i.ok, .en-pause .b-chrono.actif > small::before { animation-play-state: paused; }
.sc-mini .b-ecrit i, .sc-mini .b-chrono.actif > small::before { animation: none; }
/* ---------- Mode sombre : la légende sous l'appareil est posée sur le fond de la page, elle prend les couleurs du thème (29/10) */
html[data-theme="dark"] .sc-leg { color: var(--encre); }
html[data-theme="dark"] .sc-leg .sc-num { color: var(--doux); }
/* 02/11 : au doigt, les repères d'étape du bas de la scène se touchent sur 44 px de haut (le trait reste fin) */
@media (pointer: coarse) { .sc-segs button { height: 44px; padding: 20px 0; } }
/* mode léger (/commun/leger.js) : aucune animation sans fin dans les écrans de la scène */
html.leger .b-ecrit i, html.leger .b-appel .ap-btns i.ok, html.leger .b-chrono.actif > small::before { animation: none !important; }