/* ResaHello — composants : cartes, boutons pilule, chips, champs, listes, fenêtres, toasts, menus */

/* ---------- Cartes ---------- */
.c-cR{ background:var(--surface); border-radius:var(--r-card); padding:24px; border:none; position:relative; min-width:0; }
.c-cR.m-tG{ padding:16px; }
.c-cR.m-fL{ padding:0; overflow:hidden; }
.c-cH{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.c-nS{ background:var(--surface-2); border-radius:var(--r-nested); padding:16px; }
.c-hR{ background:var(--hero); color:#fff; border-radius:28px; padding:28px 32px; position:relative; overflow:hidden; isolation:isolate; }
.c-hR::before{ content:""; position:absolute; inset:auto -10% -60% 40%; height:140%; z-index:-1; background:radial-gradient(closest-side, var(--hero-glow), transparent 70%); filter:blur(30px); opacity:.8; }
.c-hR .u-mT{ color:rgba(255,255,255,.65); }
@media (max-width:640px){ .c-hR{ padding:22px; border-radius:24px; } }

/* ---------- Appui (calque d'état) ---------- */
.c-pR{ position:relative; isolation:isolate; cursor:pointer; user-select:none; --ov:transparent; --ov-o:0;
  transition:transform var(--d-xs) var(--ease), background-color var(--d-sm) var(--ease), box-shadow var(--d-sm) var(--ease); }
.c-pR::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1; background:var(--ov); opacity:var(--ov-o); transition:opacity var(--d-sm) var(--ease); }
@media (hover:hover){ .c-pR:hover{ --ov:currentColor; --ov-o:.06; } }
.c-pR:active, .c-pR.s-pR{ transform:scale(.97); --ov:currentColor; --ov-o:.12; }
.c-pR[disabled], .c-pR[aria-disabled=true]{ opacity:.45; pointer-events:none; }

/* ---------- Boutons pilule ---------- */
.c-bT{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:var(--btn-h); padding:0 20px; border-radius:var(--pill); border:none;
  font-size:.875rem; font-weight:600; white-space:nowrap; background:var(--surface-2); color:var(--text); }
.c-bT.m-sM{ height:32px; padding:0 14px; font-size:13px; }
.c-bT.m-lG{ height:var(--btn-h-lg); padding:0 28px; font-size:1rem; }
.c-bT.m-bL{ width:100%; }
.c-bT.m-pR{ background:var(--accent-solid); color:#fff; }
.c-bT.m-dR{ background:var(--ink); color:var(--on-ink); }
.c-bT.m-sF{ background:rgb(var(--accent-rgb)/.12); color:var(--accent); }
.c-bT.m1-lG{ background:#fff; color:var(--accent-solid); }
.c-bT.m-dN{ background:rgb(var(--bad-rgb)/.1); color:var(--bad); }
.c-bT.m1-sC{ background:rgb(var(--ok-rgb)/.12); color:var(--ok); }
.c-bT.m-gH{ background:transparent; }
.c-bT.m-gL{ background:rgba(255,255,255,.14); color:#fff; }
.c-bT .u-iC{ --is:15px; }
.c1-iB{ width:40px; height:40px; border-radius:var(--pill); border:none; display:inline-grid; place-items:center; background:var(--surface-2); color:var(--text); flex:none; }
.c1-iB.m-sM{ width:32px; height:32px; } .c1-iB.m-sM .u-iC{ --is:13px; }
.c1-iB.m-pL{ background:transparent; }
.c-tF{ position:fixed; top:16px; right:16px; z-index:60; background:var(--glass); backdrop-filter:saturate(1.8) blur(16px); box-shadow:var(--sh-2); }
@media (max-width:719px){ .c-tF{ top:auto; bottom:calc(16px + env(safe-area-inset-bottom)); } }

/* ---------- Chips ---------- */
.c2-cH{ display:flex; gap:8px; flex-wrap:wrap; }
.c2-cH.m-sC{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 -4px; padding:2px 4px; }
.c2-cH.m-sC::-webkit-scrollbar{ display:none; }
.c1-cH{ display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; border-radius:var(--pill); max-width:100%;
  background:var(--surface-2); color:var(--text); font-size:13px; font-weight:500; white-space:nowrap; border:none; flex:none; }
.c1-cH.m-sT{ cursor:default; }
.c1-cH.m-mL{ white-space:normal; height:auto; min-height:32px; padding:6px 12px; text-align:left; line-height:1.35; }
.c1-cH .u-iC{ --is:12.5px; }
.c1-cH.s-oN{ background:var(--ink); color:var(--on-ink); }
.c-cC{ min-width:20px; height:20px; padding:0 6px; border-radius:var(--pill); display:inline-grid; place-items:center; font-size:11px; font-weight:700; background:var(--surface-3); }
.c1-cH.s-oN .c-cC{ background:rgb(255 255 255/.2); }
.c1-cH.m-xS{ height:24px; padding:0 9px; font-size:12px; gap:4px; }
.c1-cH.m-xS .u-iC{ --is:11px; }
.c-dT{ width:8px; height:8px; border-radius:50%; background:currentColor; flex:none; }
.c-bD{ min-width:18px; height:18px; padding:0 5px; border-radius:var(--pill); background:var(--bad); color:#fff; font-size:11px; font-weight:700; display:inline-grid; place-items:center; line-height:1; }
.c-iB{ width:30px; height:30px; border-radius:10px; display:inline-grid; place-items:center; flex:none; }
.c-iB .u-iC{ --is:13.5px; width:auto; }
.c-iB.m-lG{ width:52px; height:52px; border-radius:18px; } .c-iB.m-lG .u-iC{ --is:22px; }

/* ---------- Contrôle segmenté ---------- */
.c-sG{ display:inline-flex; padding:3px; gap:2px; border-radius:var(--pill); background:var(--seg-bg); }
.c-sG button{ border:none; background:transparent; height:34px; padding:0 16px; border-radius:var(--pill); font-size:13px; font-weight:600; color:var(--text-2); cursor:pointer; }
.c-sG button.s-oN{ background:var(--surface); color:var(--text); box-shadow:var(--sh-1); }

/* ---------- Champs ---------- */
.c-fL{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.c-fL > span{ font-size:13px; font-weight:500; color:var(--text-2); }
.c-iN, .c-sL, .c-tX{ width:100%; height:48px; padding:0 16px; border-radius:var(--r-input); border:none; outline:none;
  background:var(--surface-2); color:var(--text); font-size:15px; transition:box-shadow var(--d-sm) var(--ease), background var(--d-sm); }
.c-tX{ height:auto; min-height:96px; padding:12px 16px; resize:vertical; line-height:1.45; }
.c-sL{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:40px; }
.c-iN:focus, .c-sL:focus, .c-tX:focus{ box-shadow:0 0 0 2px var(--accent); background:var(--surface); }
.c-iN::placeholder, .c-tX::placeholder{ color:var(--text-3); }
.c-sR{ position:relative; }
.c-sR > .u-iC{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--text-2); }
.c-sR .c-iN{ padding-left:42px; border-radius:var(--pill); height:44px; background:var(--search-bg); }
.c-sW{ position:relative; width:48px; height:28px; flex:none; }
.c-sW input{ opacity:0; position:absolute; inset:0; margin:0; cursor:pointer; z-index:1; }
.c-sW i{ position:absolute; inset:0; border-radius:var(--pill); background:var(--surface-3); transition:background var(--d-sm) var(--ease); }
.c-sW i::after{ content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:var(--sh-2); transition:transform var(--d-sm) var(--ease); }
.c-sW input:checked + i{ background:var(--accent); }
.c-sW input:checked + i::after{ transform:translateX(20px); }
.c1-sT{ display:inline-flex; align-items:center; gap:4px; background:var(--surface-2); border-radius:var(--pill); padding:4px; }
.c1-sT b{ min-width:36px; text-align:center; font-size:16px; font-variant-numeric:tabular-nums; }
/* Zone éditable à la place d'un <input> (ville, adresse : pas de saisie auto du navigateur) */
.c-cI{ display:flex; align-items:center; white-space:nowrap; overflow:hidden; cursor:text; line-height:48px; -webkit-user-modify:read-write-plaintext-only; }
.c-cI:empty::before{ content:attr(data-placeholder); color:var(--text-3); pointer-events:none; }
.c-cI br{ display:none; }

/* ---------- Listes ---------- */
.c-lS{ display:flex; flex-direction:column; gap:2px; }
.c-cL{ display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:var(--r-nested); min-width:0; background:transparent; border:none; text-align:left; width:100%; color:var(--text); }
.c-cL .u1-gR{ display:flex; flex-direction:column; gap:2px; }
.c-cT{ font-weight:600; font-size:15px; }
.c-cS{ color:var(--text-2); font-size:13px; }
.c-dV{ height:1px; background:var(--line); margin:8px 0; border:none; }
.c-aV{ width:40px; height:40px; border-radius:50%; flex:none; display:grid; place-items:center; font-weight:700; font-size:14px; letter-spacing:.02em; }
.c-aV.m-lG{ width:64px; height:64px; font-size:22px; }
.c-aV.m-sQ{ border-radius:14px; }
.c-tP{ min-width:58px; height:40px; border-radius:14px; display:grid; place-items:center; background:var(--surface-2); font-weight:700; font-variant-numeric:tabular-nums; font-size:15px; flex:none; }
.s-eM{ text-align:center; padding:40px 16px; color:var(--text-2); display:flex; flex-direction:column; align-items:center; gap:10px; }
.c-eI{ width:56px; height:56px; border-radius:50%; background:var(--surface-2); display:grid; place-items:center; }
.c1-pR{ height:8px; border-radius:var(--pill); background:var(--surface-2); overflow:hidden; }
.c1-pR > i{ display:block; height:100%; border-radius:inherit; background:var(--accent); transition:width var(--d-lg) var(--ease); }

/* ---------- Squelettes de chargement ---------- */
.c-sK{ position:relative; overflow:hidden; background:var(--shimmer); border-radius:12px; color:transparent !important; }
.c-sK::after{ content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg, transparent, var(--on-shimmer), transparent); animation:k-sK 1.5s var(--ease) infinite; }
@keyframes k-sK{ to{ transform:translateX(100%); } }
.c1-sL{ height:14px; margin:6px 0; } .c-sT{ height:22px; width:45%; } .c1-sC{ border-radius:50%; }
@media (prefers-reduced-motion:reduce){ .c-sK::after{ animation:none; } }

/* ---------- Fenêtres ---------- */
.c-oV{ position:fixed; inset:0; background:var(--overlay); z-index:80; opacity:0; transition:opacity var(--d-md) var(--ease); backdrop-filter:blur(2px); }
.c-oV.s-oP{ opacity:1; }
.c-sH{ position:fixed; z-index:90; background:var(--surface); display:flex; flex-direction:column; left:50%; top:50%;
  width:min(560px, calc(100vw - 24px)); max-height:min(88vh, 780px); max-height:min(88dvh, 780px); border-radius:28px;
  box-shadow:var(--sh-pop); opacity:0; transform:translate(-50%, -46%) scale(.97); transition:transform var(--d-md) var(--ease), opacity var(--d-md) var(--ease); }
.c-sH.s-oP{ opacity:1; transform:translate(-50%, -50%); }
.c-sH.m-wD{ width:min(760px, calc(100vw - 24px)); }
.c1-sH{ display:flex; align-items:center; gap:12px; padding:20px 20px 12px 24px; }
.c-sB{ padding:4px 24px 24px; overflow-y:auto; flex:1; min-height:0; overscroll-behavior:contain; }
.c-sF{ padding:16px 24px 24px; display:flex; gap:10px; border-top:1px solid var(--line); }
.c-sF .c-bT{ flex:1; }
@media (max-width:719px){
  .c-sH{ width:calc(100vw - 20px); border-radius:24px; }
  .c1-sH{ padding:16px 14px 10px 18px; } .c-sB{ padding:4px 18px 18px; } .c-sF{ padding:12px 18px 18px; }
}

/* ---------- Toasts ---------- */
.c1-tS{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:120; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.c-tS{ background:var(--tip); color:#fff; padding:12px 18px; border-radius:var(--pill); font-weight:500; display:flex; gap:10px; align-items:center;
  box-shadow:var(--sh-4); animation:k-tS var(--d-lg) var(--ease-toast); pointer-events:auto; }
.c-tS.s-oT{ opacity:0; transform:translateY(12px); transition:all var(--d-md) var(--ease); }
@keyframes k-tS{ from{ opacity:0; transform:translateY(20px) scale(.9); } }
@media (max-width:719px){ .c1-tS{ bottom:calc(84px + env(safe-area-inset-bottom)); } }

/* ---------- Menu contextuel (clic droit / appui long) ---------- */
.c1-cB{ position:fixed; inset:0; z-index:130; }
.c-cM{ position:fixed; z-index:131; min-width:240px; max-width:300px; max-height:min(72vh, 560px); overflow-y:auto; overscroll-behavior:contain;
  background:var(--surface); border-radius:20px; padding:6px; box-shadow:0 0 0 1px var(--line), 0 18px 48px rgba(16,24,40,.22), 0 4px 12px rgba(16,24,40,.08);
  transform-origin:top left; animation:k-cT 160ms var(--ease); outline:none; }
[data-theme=dark] .c-cM{ background:#1d2632; box-shadow:0 0 0 1px rgba(226,232,240,.08), 0 18px 48px rgba(0,0,0,.5); }
.c-cM.s-oT{ opacity:0; transform:scale(.97); transition:opacity 120ms, transform 120ms; }
@keyframes k-cT{ from{ opacity:0; transform:scale(.96) translateY(-4px); } }
.c3-cH{ display:flex; flex-direction:column; gap:1px; padding:8px 12px; min-width:0; }
.c3-cH b{ font-size:15px; }
.c1-cL{ padding:8px 12px 4px; font-size:11.5px; font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:var(--text-3); }
.c1-cS{ height:1px; background:var(--line); margin:5px 8px; }
.c3-cI{ width:100%; display:flex; align-items:center; gap:10px; padding:7px 10px 7px 7px; border:0; background:none; color:var(--text);
  font:inherit; font-size:14px; font-weight:500; text-align:left; border-radius:12px; cursor:pointer; min-height:40px; }
.c3-cI:hover, .c3-cI:focus-visible{ background:var(--surface-2); outline:none; }
.c3-cI:active{ background:var(--surface-3); }
.c3-cI[disabled]{ cursor:default; opacity:.55; background:none; }
.c3-cI.s-cH{ font-weight:600; }
.c3-cI.m-dN{ color:var(--bad); }
.c3-cI.m-dN .c1-cI{ background:rgb(var(--bad-rgb)/.1); color:inherit; }
.c1-cI{ width:28px; height:28px; border-radius:9px; display:grid; place-items:center; flex:none; background:var(--surface-2); color:var(--text-2); }
.c1-cI .u-iC{ --is:13px; width:auto; }
.c4-cH{ font-size:12.5px; color:var(--text-3); white-space:nowrap; font-variant-numeric:tabular-nums; }
.c1-cC{ color:var(--accent); --is:12px; }
.c-cB{ color:var(--text-2); font-weight:600; }
.c-cB > .u-iC{ --is:12px; width:28px; text-align:center; }
.c1-cT{ box-shadow:inset 0 0 0 2px rgb(var(--accent-rgb)/.45) !important; }
.c1-cI.s-oN{ background:var(--ink); color:var(--on-ink); }
.c1-cI.s-dM{ opacity:.55; }
.c1-cR{ display:flex; align-items:center; gap:10px; padding:4px 8px 4px 15px; color:var(--text-3); }
.c2-cI{ flex:1; min-width:0; height:36px; border:0; border-radius:10px; padding:0 10px; background:var(--surface-2); color:var(--text); font:inherit; font-size:14px; }
.c2-cI:focus{ outline:2px solid rgb(var(--accent-rgb)/.35); }
@media (max-width:559px){
  .c1-cB{ background:rgba(10,14,20,.32); animation:k-fD 160ms; }
  .c-cM{ left:8px !important; right:8px; top:auto !important; bottom:calc(8px + env(safe-area-inset-bottom)); max-width:none; border-radius:24px; padding:8px;
    transform-origin:bottom center; animation:k-cU 220ms var(--ease); }
  .c3-cI{ min-height:46px; font-size:15px; }
}
@keyframes k-cU{ from{ transform:translateY(24px); opacity:0; } }

/* ---------- Sélecteur d'icônes ---------- */
.c-iG{ display:grid; grid-template-columns:repeat(auto-fill, minmax(48px, 1fr)); gap:6px; }
.c-iC{ aspect-ratio:1; border:0; border-radius:14px; background:var(--surface-2); color:var(--text); display:grid; place-items:center; cursor:pointer; }
.c-iC .u-iC{ --is:18px; width:auto; }
.c-iC:hover{ background:var(--surface-3); }
.c-iC.s-oN{ box-shadow:inset 0 0 0 2px currentColor; }
.c-sC{ aspect-ratio:1; border-radius:14px; height:auto; }

/* ---------- Tags (pastilles de couleur) ---------- */
.c1-cD{ display:flex; gap:6px; flex-wrap:wrap; }
.c-cD{ width:22px; height:22px; border-radius:50%; border:none; box-shadow:inset 0 0 0 2px rgba(255,255,255,.35); flex:none; }
.c-cD.s-oN{ box-shadow:0 0 0 2px var(--surface), 0 0 0 4px currentColor; color:var(--text); }
.c-tO{ font-weight:600; }

/* ---------- Assistant pas à pas ---------- */
.c-sH.m-wZ{ width:min(600px, calc(100vw - 24px)); }
.c-sH.m-wZ .c1-sH{ padding:18px 18px 14px; gap:10px; }
.c-wK{ font-size:12.5px; font-weight:600; color:var(--text-3); }
.c1-wT{ font-size:21px; letter-spacing:-.02em; }
.c-wB{ height:4px; margin:0 24px 6px; border-radius:var(--pill); background:var(--surface-2); overflow:hidden; flex:none; }
.c-wB > i{ display:block; height:100%; width:0; border-radius:inherit; background:var(--ink); transition:width var(--d-md) var(--ease); }
.c1-wS{ animation:k-wI 260ms var(--ease); }
.c1-wS.s-bC{ animation-name:k-wB; }
@keyframes k-wI{ from{ opacity:0; transform:translateX(18px); } }
@keyframes k-wB{ from{ opacity:0; transform:translateX(-18px); } }
.c-wR{ display:flex; flex-wrap:wrap; gap:6px; }
.c1-wD{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:6px; }
.c-wD{ border:0; cursor:pointer; border-radius:16px; background:var(--surface-2); padding:10px 4px; display:flex; flex-direction:column; align-items:center; gap:2px; color:var(--text); min-width:0; }
.c-wD.c-sK{ height:74px; }
.c-wD small{ font-size:11.5px; color:var(--text-2); text-transform:capitalize; white-space:nowrap; }
.c-wD b{ font-size:19px; line-height:1.15; }
.c-wL{ font-size:11px; font-weight:600; color:var(--ok); white-space:nowrap; }
.c-wD.s-fL .c-wL{ color:var(--bad); } .c-wD.s1-cL{ opacity:.5; } .c-wD.s1-cL .c-wL{ color:var(--text-3); }
.c-wD.s-oN{ background:var(--ink); color:var(--on-ink); } .c-wD.s-oN small, .c-wD.s-oN .c-wL{ color:inherit; opacity:.85; }
.c-wC{ border-radius:20px; background:var(--surface-2); padding:12px; }
.c-wH{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.c-wH b{ font-size:15px; }
.c-wG{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:4px; }
.c2-wD{ text-align:center; font-size:11.5px; font-weight:600; color:var(--text-3); padding:2px 0 4px; }
.c1-wC{ border:0; background:var(--surface); border-radius:12px; height:50px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; cursor:pointer; color:var(--text); min-width:0; }
.c1-wC[disabled]{ background:transparent; color:var(--text-3); cursor:default; }
.c1-wC b{ font-size:14.5px; line-height:1.1; }
.c1-wC small{ font-size:10.5px; font-weight:600; color:var(--ok); font-variant-numeric:tabular-nums; }
.c1-wC.s-lW small{ color:var(--warn); }
.c1-wC.s-fL small{ color:var(--bad); }
.c1-wC.s1-cL{ background:transparent; } .c1-wC.s1-cL b, .c1-wC.s1-cL small{ color:var(--text-3); } .c1-wC.s1-cL small{ font-weight:500; }
.c1-wC.s-tD{ box-shadow:inset 0 0 0 1.5px var(--ink); }
.c1-wC.s-oN{ background:var(--ink); color:var(--on-ink); } .c1-wC.s-oN small{ color:inherit; }
.c1-wC:not([disabled]):hover{ filter:brightness(.97); }
.c2-wS{ border-radius:20px; background:var(--surface-2); overflow:hidden; transition:background .2s; }
.c2-wS.s-oP{ background:var(--surface-3); }
.c1-wH{ width:100%; border:0; background:none; display:flex; align-items:center; gap:14px; padding:16px; text-align:left; cursor:pointer; color:var(--text); }
.c-wT{ padding:0 16px 16px; }
.c-wT .c1-cH{ background:var(--surface); min-width:64px; justify-content:center; }
.c-wT .c1-cH.s-oN{ background:var(--ink); color:var(--on-ink); }
.c-wP{ display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:8px; }
.c-wN{ border:0; height:58px; border-radius:16px; background:var(--surface-2); font:inherit; font-size:20px; font-weight:700; color:var(--text); cursor:pointer; }
.c-wN:hover{ background:var(--surface-3); }
.c-wN.s-oN{ background:var(--ink); color:var(--on-ink); }
.c-wN.s-oV{ color:var(--bad); }
.c1-wO{ border:0; width:100%; display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:18px; background:var(--surface-2); text-align:left; cursor:pointer; color:var(--text); font:inherit; }
.c1-wO:hover{ background:var(--surface-3); }
.c1-wO.s-oN{ box-shadow:inset 0 0 0 2px var(--ink); }
.c-wO{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:8px; }
.c-wS{ border:0; display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:16px; background:var(--surface-2); font:inherit; font-weight:600; font-size:14px; color:var(--text); cursor:pointer; text-align:left; }
.c-wS .u-iC{ color:var(--text-2); }
.c-wS.s-oN{ background:var(--ink); color:var(--on-ink); } .c-wS.s-oN .u-iC{ color:inherit; }
@media (max-width:719px){
  .c1-wD{ grid-template-columns:repeat(4, minmax(0,1fr)); } .c1-wD > :nth-child(n+5){ display:none; }
  .c1-wC{ height:46px; } .c-wP{ grid-template-columns:repeat(4, minmax(0,1fr)); } .c-wB{ margin:0 18px 6px; }
}

/* ---------- Passage : tables libres ---------- */
.c1-fT{ display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:8px; }
.c-fT{ border:0; cursor:pointer; border-radius:16px; background:var(--surface-2); padding:12px 8px; display:flex; flex-direction:column; align-items:center; gap:2px; color:var(--text); font:inherit; min-height:84px; }
.c-fT:hover{ background:var(--surface-3); }
.c-fT b{ font-size:20px; line-height:1.1; } .c-fT span{ font-size:12.5px; color:var(--text-2); }
.c-fT small{ font-size:11.5px; font-weight:600; color:var(--warn); }
.c-fT small.s-oK{ color:var(--ok); }
.c-fT.s-dM{ opacity:.6; }

/* ---------- Tutoriel guidé ---------- */
.c2-tS{ position:fixed; inset:0; z-index:140; background:rgba(10,14,20,.55); transition:background .25s; }
.c2-tS.s-cL{ background:transparent; }
.c4-tS{ position:fixed; z-index:141; border-radius:16px; pointer-events:none; opacity:0;
  box-shadow:0 0 0 3px var(--ink), 0 0 0 9999px rgba(10,14,20,.55); transition:left .3s var(--ease), top .3s var(--ease), width .3s var(--ease), height .3s var(--ease), opacity .2s; }
.c-tC{ position:fixed; z-index:142; width:min(380px, calc(100vw - 32px)); background:var(--surface); border-radius:24px; padding:20px; display:flex; flex-direction:column; gap:10px;
  box-shadow:0 24px 60px rgba(0,0,0,.28); transition:left .3s var(--ease), top .3s var(--ease); }
.c-tC p{ margin:0; line-height:1.5; }
.c3-tS{ border:0; background:none; color:var(--text-2); font:inherit; font-weight:600; font-size:13.5px; cursor:pointer; padding:6px 8px; border-radius:10px; }
.c3-tS:hover{ background:var(--surface-2); color:var(--text); }
.c-tB{ height:4px; border-radius:999px; background:var(--surface-2); overflow:hidden; margin:4px 0 6px; }
.c-tB > i{ display:block; height:100%; background:var(--ink); border-radius:inherit; transition:width .3s var(--ease); }

/* ---------- Recherche de villes / adresses ---------- */
.c-pW{ position:relative; }
.c-pL{ position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:150; background:var(--surface); border-radius:16px; padding:6px;
  box-shadow:0 0 0 1px var(--line), 0 16px 40px rgba(16,24,40,.18); max-height:300px; overflow-y:auto; }
.c-pO{ width:100%; border:0; background:none; text-align:left; display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:11px; cursor:pointer; color:var(--text); font:inherit; font-size:14px; }
.c-pO:hover, .c-pO.s-oN{ background:var(--surface-2); }
.c-pO .u-iC{ color:var(--text-3); }

/* Intégration (iframe sur un site tiers) : fond transparent */
.m-eM{ background:transparent; }
