/* Take Up : annuaire public des chauffeurs. Les cartes reprennent la carte « Sarah Martin » du site chauffeurs (profile__*). */

/* En-tête de page */
.dir-head{padding-bottom:clamp(24px,3vw,40px)}
.dir-head h1{font-size:clamp(38px,6vw,72px)}

/* Filtres */
.dir-filters{margin:0;padding:0;border:0}
.dir-filters__head,.dir-filters__foot{display:none}
.dir-filters__body{display:grid;grid-template-columns:minmax(220px,1.15fr) auto auto;gap:18px 26px;align-items:start;padding:20px 22px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.dir-group{min-width:0;margin:0;padding:0;border:0}
.dir-group legend,.dir-city label{display:block;margin-bottom:8px;padding:0;font-size:14px;font-weight:640;letter-spacing:.1em;text-transform:uppercase;color:var(--mint-hi)}
.dir-group--wide{grid-column:1/3}
.dir-chips{display:flex;flex-wrap:wrap;gap:8px}
.dir-chip{position:relative;display:block;cursor:pointer}
.dir-chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.dir-chip>span{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 15px;border:1px solid var(--line);border-radius:999px;background:#071c20;font-size:15px;font-weight:600;line-height:1.2;white-space:nowrap;transition:background .18s,border-color .18s,color .18s}
.dir-chip svg{width:15px;height:15px;color:#ffd27a}
.dir-chip:hover>span{border-color:var(--white-soft)}
.dir-chip input:checked+span{border-color:var(--mint);background:var(--mint);color:#04261f}
.dir-chip input:checked+span svg{color:#04261f}
.dir-chip input:focus-visible+span{outline:3px solid var(--white);outline-offset:3px}
.dir-reset{justify-self:end;align-self:center;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;border:0;background:none;font-size:15px;font-weight:600;text-decoration:underline;text-underline-offset:4px}
.dir-reset:hover{color:var(--mint-hi)}
.dir-reset svg{width:17px;height:17px}

/* Ville : liste de suggestions au clavier (modèle combobox) */
.dir-city{position:relative;min-width:0}
.dir-city__field{position:relative}
.dir-city__field>svg{position:absolute;left:14px;top:50%;width:19px;height:19px;color:var(--mint-hi);transform:translateY(-50%);pointer-events:none}
.dir-city input{width:100%;min-height:48px;padding:10px 46px 10px 42px;border:1px solid var(--field-line);border-radius:10px;background:var(--field-bg);color:var(--white);font:inherit;font-size:16px;transition:border-color .15s,box-shadow .15s}
.dir-city input::placeholder{color:var(--white-soft);opacity:.7}
.dir-city input:focus{outline:none;border-color:var(--mint);box-shadow:0 0 0 3px #00c4ae44}
.dir-city__clear{position:absolute;right:5px;top:50%;display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;border-radius:8px;background:none;color:var(--white-soft);transform:translateY(-50%)}
.dir-city__clear:hover{background:#ffffff14;color:var(--white)}
.dir-city__clear svg{width:18px;height:18px}
.dir-city__list{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 6px);max-height:320px;padding:6px;overflow-y:auto;border:1px solid #4f8a80;border-radius:12px;background:#061618;box-shadow:0 24px 48px -20px #000}
.dir-city__list li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;min-height:44px;padding:10px 12px;border-radius:8px;cursor:pointer;line-height:1.3}
.dir-city__list li small{flex-shrink:0;font-size:14px;color:var(--white-soft)}
.dir-city__list li[aria-selected=true],.dir-city__list li:hover{background:#00c4ae26}
.dir-city__list li[aria-selected=true]{box-shadow:inset 3px 0 0 var(--mint)}
.dir-city__list .dir-city__note{justify-content:flex-start;cursor:default;color:var(--white-soft)}
.dir-city__list .dir-city__note:hover{background:none}

/* Barre de résultats : nombre, bouton des filtres (téléphone), affichage */
.dir-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:22px}
.dir-count{min-width:0;margin-right:auto;font-size:17px;font-weight:600}
.dir-count:empty::before{content:"\00a0"}
.dir-bar__filters{display:none;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid #5d8783;border-radius:10px;background:none;font-size:15px;font-weight:650}
.dir-bar__filters svg{width:18px;height:18px}
.dir-bar__filters b{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--mint);color:#04261f;font-size:13px}
.dir-view{display:inline-flex;flex-shrink:0;padding:3px;border:1px solid var(--line);border-radius:999px;background:#061618}
.dir-view button{display:grid;place-items:center;width:44px;height:38px;padding:0;border:0;border-radius:999px;background:none;color:var(--white-soft);transition:background .18s,color .18s}
.dir-view button:hover{color:var(--white)}
.dir-view button[aria-pressed=true]{background:#00c4ae2e;color:var(--mint-hi)}
.dir-view svg{width:20px;height:20px}

/* Liste : un seul flux continu, cartes ou lignes */
.dir-results{padding-bottom:clamp(56px,7vw,96px)}
.dir-list{margin-top:18px}
.dir-list[data-view=cartes]{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,318px),1fr));gap:22px}
.dir-list[data-view=liste]{display:grid;gap:10px}
.dir-list>li{min-width:0;content-visibility:auto;contain-intrinsic-size:auto 540px}
.dir-list[data-view=liste]>li{contain-intrinsic-size:auto 92px}
.dir-loader,.dir-end,.dir-more{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:28px;font-size:15px;color:var(--white-soft);text-align:center}
.dir-loader i{width:20px;height:20px;border:2.5px solid #00c4ae44;border-top-color:var(--mint-hi);border-radius:50%;animation:dir-spin .8s linear infinite}
@keyframes dir-spin{to{transform:rotate(360deg)}}
.dir-end{gap:14px}
.dir-end::before,.dir-end::after{content:"";width:min(80px,14vw);height:1px;background:var(--line)}
.dir-more{flex-wrap:wrap}
.dir-more button,.dir-link{padding:0;border:0;background:none;font-weight:640;color:var(--white);text-decoration:underline;text-underline-offset:4px}
.dir-sentinel{height:1px}

/* États vide et erreur */
.dir-state{display:grid;justify-items:start;gap:10px;max-width:640px;margin-top:22px;padding:clamp(22px,3vw,32px);border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.dir-state>svg{width:34px;height:34px;color:var(--mint-hi)}
.dir-state h3{font-family:var(--display);font-size:clamp(22px,2.4vw,28px);font-weight:660;letter-spacing:-.01em;line-height:1.2}
.dir-state p{color:var(--white-soft)}
.dir-state p a{font-weight:640;color:var(--white);text-decoration:underline;text-underline-offset:3px}
.dir-state .btn{margin-top:8px}
.dir-state--error{border-color:#b5604f}
.dir-state--error>svg{color:#ffb4a3}

/* Boutons ronds d'action rapide (appel, SMS, QR code) */
.dquick{display:flex;align-items:center;gap:6px}
.dquick a,.dquick button{display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid #64dcc666;border-radius:50%;background:#061618d9;color:var(--mint-hi);transition:background .18s,border-color .18s,color .18s,transform .18s var(--ease)}
.dquick a:hover,.dquick button:hover{border-color:var(--mint-hi);background:var(--mint);color:#04261f}
.dquick a:active,.dquick button:active{transform:scale(.94)}
.dquick svg{width:17px;height:17px}

/* Médaille et nom du pack (repris de DriverPackBadge de l'espace chauffeur) */
.dmedal{position:absolute;z-index:2;left:70%;bottom:-8px;width:36px;height:41px;filter:drop-shadow(0 2px 2px #061714bf)}
.dmedal svg{display:block;width:100%;height:100%}
.dpack{display:inline-block;font-size:14px;font-weight:750;line-height:1.3;white-space:nowrap}
.dpack[data-tier=bronze]{color:#edbb95;--pack-text-light:#ffe7ce;--pack-text-mid:#c88b57}
.dpack[data-tier=silver]{color:#d5e4ee;--pack-text-light:#f5fcff;--pack-text-mid:#9db3c8}
.dpack[data-tier=gold]{color:#f4d78d;--pack-text-light:#fff2b0;--pack-text-mid:#e3b94e}
.dpack[data-tier=diamond]{color:#a1e9fc;--pack-text-light:#eaffff;--pack-text-mid:#69c8ed}
@supports ((background-clip:text) or (-webkit-background-clip:text)){.dpack[data-tier]{background-image:linear-gradient(110deg,var(--pack-text-light),var(--pack-text-mid) 50%,var(--pack-text-light));background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}}

/* Portrait : photo ou initiales */
.dface{position:relative;z-index:1;display:grid;place-items:center;width:100%;height:100%;border:4px solid #0d2b30;border-radius:50%;background:#b2d4ca;box-shadow:0 0 0 2px var(--mint);object-fit:cover;overflow:hidden}
.dface--initials{background:linear-gradient(150deg,#0e8577,#00695d);font-family:var(--display);font-weight:700;letter-spacing:.02em;color:#effffb}

/* Carte chauffeur (affichage « Cartes ») */
.dcard{position:relative;display:flex;flex-direction:column;height:100%;border-radius:22px;overflow:hidden;background:linear-gradient(165deg,#0d2b30,#071c20 58%,#0a2428);color:var(--white);box-shadow:0 40px 70px -38px #0f3a36cc,0 0 0 1px #00c4ae55;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.dcard:hover{transform:translateY(-3px);box-shadow:0 44px 70px -34px #0f3a36,0 0 0 1px #64dcc6aa}
.dcard :focus-visible{outline-color:var(--white)}
.dcard__top{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:56px;padding:10px 14px 10px 24px;font-size:15px;font-weight:600}
.dcard__cover{position:relative;height:164px;background:radial-gradient(120% 130% at 16% 0,#123f41,#082326 64%)}
.dcard__map{position:absolute;inset:0;width:100%;height:100%}
.dcard__map--flip{transform:scaleX(-1)}
.dcard__streets path{fill:none;stroke:#1d4447;stroke-width:1}
.dcard__road{fill:none;stroke:#1b5a56;stroke-width:5;stroke-linecap:round}
.dcard__trace{fill:none;stroke:var(--mint-hi);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:14 86;animation:dcard-trace 7s linear infinite;animation-delay:var(--dcard-delay,0s)}
.dcard__trace--late{opacity:.7;animation-delay:calc(var(--dcard-delay,0s) - 3.5s)}
@keyframes dcard-trace{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.dcard__dot{fill:var(--mint-hi)}
.dcard__ping{fill:none;stroke:var(--mint-hi);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:dcard-radar 3s ease-out infinite;animation-delay:var(--dcard-delay,0s)}
.dcard__ping--late{animation-delay:calc(var(--dcard-delay,0s) + 1.5s)}
@keyframes dcard-radar{from{transform:scale(1);opacity:.35}to{transform:scale(3.2);opacity:0}}
.dcard__place{position:absolute;z-index:3;left:16px;top:14px;display:inline-flex;align-items:center;gap:6px;max-width:calc(100% - 32px);min-height:36px;padding:0 14px 0 9px;border:1px solid #64dcc666;border-radius:999px;background:#061618d9;font-size:15px;font-weight:600;color:var(--white);transition:border-color .18s}
.dcard__place>span:first-of-type{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dcard__place:hover,.dcard__place[data-open=true]{border-color:var(--mint-hi)}
.dcard__place svg{flex-shrink:0;width:17px;height:17px;color:var(--mint-hi)}
.dcard__tip{position:absolute;left:0;top:calc(100% + 8px);display:flex;align-items:center;gap:10px;width:max-content;max-width:min(260px,calc(100vw - 80px));padding:10px 14px;border:1px solid #4f8a80;border-radius:11px;background:#061618f7;box-shadow:0 14px 30px -14px #000;font-size:14px;font-weight:500;line-height:1.35;text-align:left;white-space:normal;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .16s,transform .16s,visibility .16s;pointer-events:none}
.dcard__tip svg{width:22px;height:22px}
.dcard__tip strong{display:block;font-size:15px;font-weight:660}
.dcard__tip small{display:block;margin-top:2px;font-size:14px;color:var(--white-soft)}
.dcard__place:hover .dcard__tip,.dcard__place:focus-visible .dcard__tip,.dcard__place[data-open=true] .dcard__tip{opacity:1;visibility:visible;transform:none}
.dcard__car{position:absolute;z-index:2;right:10px;bottom:16px;width:min(60%,236px);height:auto;filter:drop-shadow(0 10px 10px #0009)}
.dcard__content{position:relative;display:flex;flex:1;flex-direction:column;align-items:flex-start;padding:0 24px 22px}
.dcard__portrait{position:relative;display:block;flex-shrink:0;width:100px;height:100px;margin-top:-50px;font-size:34px}
.dcard__status{position:absolute;top:16px;right:22px;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.dcard__content h3{margin-top:14px;font-family:var(--display);font-size:28px;font-weight:680;letter-spacing:-.012em;line-height:1.1;overflow-wrap:anywhere}
.dcard__vehicle{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:17px;font-weight:640;line-height:1.35}
.dcard__swatch,.drow__swatch{flex-shrink:0;width:18px;height:18px;border:1px solid #fff5;border-radius:50%;background:var(--swatch,#8a9399)}
.dcard__rating{display:flex;align-items:center;gap:7px;margin-top:8px;font-size:16px;color:var(--white-soft)}
.dcard__rating svg{width:18px;height:18px;flex-shrink:0;color:#ffd27a}
.dcard__rating strong{color:var(--white)}
.dcard__rating--new svg{color:var(--mint-hi)}
.dcard__offers{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;font-size:15px}
.dcard__offers>span{margin-right:2px;font-weight:560;color:var(--white-soft)}
.dchip{padding:3px 12px;border:1px solid #00c4ae66;border-radius:999px;background:#00c4ae1f;font-weight:600;line-height:1.4;color:#8ff3dd;white-space:nowrap}
.dcard__zone{display:flex;align-items:center;gap:12px;width:100%;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:15px;line-height:1.4;color:var(--white-soft)}
.dcard__zone svg,.drow__zone svg{flex-shrink:0;width:40px;height:40px}
.dzone circle{fill:#00c4ae14;stroke:#00c4ae99}
.dzone .dzone__center{fill:var(--mint-hi);stroke:none}
.dcard__zone strong{display:block;font-size:16px;color:var(--white)}
.dcard__foot{display:flex;justify-content:flex-end;width:100%;margin-top:auto;padding-top:18px}
.dpage{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid #5d8783;border-radius:10px;font-size:15px;font-weight:650;white-space:nowrap;transition:background .18s,border-color .18s,color .18s}
.dpage:hover{border-color:var(--mint);background:var(--mint);color:#04261f}
.dpage svg{width:17px;height:17px}

/* Ligne chauffeur (affichage « Liste ») */
/* Colonnes fixes : chaque ligne est sa propre grille, les colonnes restent alignées d'une ligne à l'autre. */
.drow{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1.05fr) minmax(0,1.2fr) 118px 272px;gap:10px 18px;align-items:center;min-height:84px;padding:12px 14px 12px 16px;border:1px solid var(--line);border-radius:14px;background:var(--panel);transition:border-color .18s,background .18s}
.drow:hover{border-color:#4f8a80;background:#0d282c}
.drow__id{display:flex;align-items:center;gap:14px;min-width:0}
.drow__portrait{position:relative;flex-shrink:0;width:58px;height:58px;font-size:20px}
.drow__portrait .dface{border-width:3px;box-shadow:0 0 0 1.5px var(--mint)}
.drow__portrait .dmedal{left:62%;bottom:-6px;width:22px;height:25px}
.drow__id h3{font-family:var(--display);font-size:19px;font-weight:680;letter-spacing:-.01em;line-height:1.2;overflow-wrap:anywhere}
.drow__id .dpack{font-size:13px}
.drow__cell{display:flex;align-items:center;gap:8px;min-width:0;font-size:15px;line-height:1.35}
.drow__cell>span{min-width:0}
.drow__cell small{display:block;display:-webkit-box;font-size:14px;color:var(--white-soft);overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.drow__zone svg{width:24px;height:24px}
.drow__offers{display:flex;flex-wrap:wrap;gap:6px;font-size:14px}
.drow__offers .dchip{padding:2px 10px}
.drow__rating svg{width:17px;height:17px;flex-shrink:0;color:#ffd27a}
.drow__rating--new svg{color:var(--mint-hi)}
.drow__actions{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.drow__actions .dpage{min-height:40px;padding:0 14px}

/* Fiche ouverte par un lien direct (QR code, « Voir la page ») */
.dir-feature{margin-bottom:clamp(28px,4vw,48px);scroll-margin-top:calc(var(--header) + 12px)}
.dir-feature__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 20px;margin-bottom:18px}
.dir-feature__head h2{font-family:var(--display);font-size:clamp(26px,3vw,38px);font-weight:680;letter-spacing:-.015em;line-height:1.15}
.dir-feature__head h2:focus{outline:none}
.dir-feature__body{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.dir-feature__aside{display:grid;gap:14px;padding:clamp(20px,2.6vw,28px);border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.dir-feature__aside h3{font-family:var(--display);font-size:24px;font-weight:660;line-height:1.2}
.dir-feature__aside p{color:var(--white-soft)}
.dir-feature__aside p a{font-weight:640;color:var(--white);text-decoration:underline;text-underline-offset:3px}
.dir-feature__actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.dir-feature__qr{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding-top:16px;border-top:1px solid var(--line)}
.dir-feature__qr img{width:132px;height:132px;padding:8px;border-radius:12px;background:#fff}
.dir-feature__qr div{display:grid;gap:8px;flex:1;min-width:160px}
.dir-feature .dcard{max-width:560px}
.dir-feature .dcard__cover{height:190px}
.dir-feature .dcard__portrait{width:112px;height:112px;margin-top:-56px}
.dir-feature .dcard__content h3{font-size:32px}
.dir-note{max-width:68ch;padding:16px 20px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--white-soft)}
.dir-note strong{display:block;color:var(--white)}
.dir-note button{margin-top:8px}

/* Fiche ouverte : l'introduction se resserre pour montrer le chauffeur dès l'arrivée (QR code scanné). */
[data-annuaire][data-fiche=open] .dir-head{padding-block:clamp(24px,3.4vw,44px) 20px}
[data-annuaire][data-fiche=open] .dir-head h1{font-size:clamp(32px,4.4vw,52px)}
[data-annuaire][data-fiche=open] .dir-head .lead{display:none}

/* QR code d'un chauffeur Pro Plus */
.dir-qr{width:min(400px,calc(100vw - 32px));padding:0;border:1px solid var(--line);border-radius:18px;background:var(--panel);color:var(--white)}
.dir-qr::backdrop{background:#020809c4}
.dir-qr__inner{display:grid;justify-items:center;gap:14px;padding:26px 24px 24px;text-align:center}
.dir-qr__close{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:10px;background:none;color:var(--white-soft)}
.dir-qr__close:hover{background:#ffffff14;color:var(--white)}
.dir-qr__close svg{width:20px;height:20px}
.dir-qr h2{padding-inline:30px;font-family:var(--display);font-size:24px;font-weight:660;line-height:1.2}
.dir-qr img{width:min(240px,100%);height:auto;aspect-ratio:1;padding:12px;border-radius:14px;background:#fff}
.dir-qr p{font-size:15px;color:var(--white-soft)}
.dir-qr .btn{width:100%}

/* Fond derrière la feuille des filtres (téléphone) */
.dir-backdrop{position:fixed;z-index:59;inset:0;background:#020809b3;opacity:0;transition:opacity .25s}
.dir-backdrop[data-show=true]{opacity:1}
body.dir-sheet-open{overflow:hidden}

@media(max-width:1180px){
  .drow{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr) 272px;grid-template-areas:"id zone vehicle actions" "id offers rating actions";row-gap:6px}
  .drow__id{grid-area:id}
  .drow__zone{grid-area:zone}
  .drow__vehicle{grid-area:vehicle}
  .drow__offers{grid-area:offers}
  .drow__rating{grid-area:rating}
  .drow__actions{grid-area:actions}
}
@media(max-width:1023px){
  .dir-filters__body{grid-template-columns:minmax(0,1fr) auto}
  .dir-city{grid-column:1/-1}
  .dir-group--wide{grid-column:1/-1}
  .dir-reset{grid-column:1/-1;justify-self:start}
  .dir-feature__body{grid-template-columns:minmax(0,1fr)}
  .dir-feature .dcard{max-width:none}
}
@media(max-width:860px){
  .drow{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"id actions" "zone vehicle" "offers rating";align-items:center}
  .drow__rating{justify-self:end}
}
/* Téléphone : les filtres passent dans une feuille qui monte du bas de l'écran. */
@media(max-width:760px){
  .dir-bar{flex-wrap:wrap;margin-top:0}
  .dir-bar__filters{display:inline-flex;order:1}
  .dir-view{order:2;margin-left:auto}
  .dir-count{order:3;flex-basis:100%;margin-right:0;font-size:15px}
  /* La feuille devient visible dès l'ouverture (le focus peut y entrer) et ne se cache qu'une fois redescendue. */
  .dir-filters{position:fixed;z-index:60;left:0;right:0;bottom:0;display:flex;flex-direction:column;max-height:88dvh;border-radius:20px 20px 0 0;background:var(--panel);box-shadow:0 -24px 60px #000b;transform:translateY(100%);visibility:hidden;transition:transform .32s var(--ease),visibility 0s linear .32s}
  .dir-filters[data-open=true]{transform:none;visibility:visible;transition:transform .32s var(--ease),visibility 0s}
  .dir-filters__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 12px 10px 20px;border-bottom:1px solid var(--line)}
  .dir-filters__head h2{font-family:var(--display);font-size:22px;font-weight:660}
  .dir-filters__head h2:focus{outline:none}
  .dir-filters__close{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:10px;background:none;color:var(--white-soft)}
  .dir-filters__close svg{width:22px;height:22px}
  .dir-filters__body{display:flex;flex-direction:column;align-items:stretch;gap:22px;padding:18px 20px 22px;overflow-y:auto;overscroll-behavior:contain;border:0;border-radius:0;background:none}
  .dir-filters__foot{display:grid;padding:12px 20px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
  .dir-city__list{position:static;margin-top:8px;max-height:none;box-shadow:none}
  .dir-reset{align-self:flex-start}
  .dir-list[data-view=cartes]{gap:18px}
  .drow{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"id id" "zone vehicle" "offers rating" "actions actions";gap:10px 12px;padding:14px}
  .drow__cell:empty{display:none}
  .drow__rating{justify-self:start}
  .drow__actions{justify-content:space-between;padding-top:10px;border-top:1px solid var(--line)}
  .drow__actions .dpage{margin-left:auto}
}
@media(max-width:599px){
  .dcard__top{padding-left:20px;font-size:14px}
  .dcard__content{padding:0 18px 20px}
  .dcard__status{right:18px}
  .dcard__content h3,.dir-feature .dcard__content h3{font-size:26px}
  .dir-feature .dcard__cover{height:164px}
  .dir-feature .dcard__portrait{width:100px;height:100px;margin-top:-50px}
}
@media(max-width:360px){
  .dcard__top>span{font-size:13px}
  .dquick{gap:4px}
  .dcard__status .dpack{font-size:13px}
  .dcard__portrait{width:88px;height:88px;margin-top:-44px;font-size:30px}
}
@media(prefers-reduced-motion:reduce){
  .dcard__trace,.dcard__ping,.dir-loader i{animation:none}
  .dcard__ping{opacity:0}
  .dcard,.dcard:hover{transform:none}
  .dir-filters{transition:none}
}

/* Rendus automobiles du référentiel : peinture et plaque calculées à partir de la fiche. */
.vehicle-art{display:block;aspect-ratio:3/2;pointer-events:none}
.vehicle-art canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity .2s}
.vehicle-art[data-state=ready] canvas{opacity:1}
.dcard__car.vehicle-art{right:4px;bottom:0;width:min(70%,330px);filter:drop-shadow(0 10px 7px #0007)}
.dcard__cover{height:184px}
.drow__car.vehicle-art{flex-shrink:0;width:82px;filter:drop-shadow(0 3px 4px #0005)}
.drow__vehicle>span:last-child{overflow-wrap:anywhere}
.dir-feature .dcard__cover{height:210px}
@media(max-width:760px){.dir-feature .dcard__cover{height:184px}}
@media(prefers-reduced-motion:reduce){.vehicle-art canvas{transition:none}}

/* Statut en direct : pastille verte « Disponible maintenant », orange « En course » ; rien hors ligne. */
.dlive{display:inline-flex;align-items:center;gap:8px;padding:3px 12px 3px 10px;border:1px solid #2fd47a66;border-radius:999px;background:#2fd47a1f;font-size:14px;font-weight:650;line-height:1.4;color:#8ff0b7;white-space:nowrap}
.dlive i,.dir-chip--live i{position:relative;flex-shrink:0;width:9px;height:9px;border-radius:50%;background:#35e083}
.dlive[data-status=available] i::after,.dir-chip--live i::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:dlive-pulse 1.8s ease-out infinite}
.dlive[data-status=busy]{border-color:#f5a62366;background:#f5a6231f;color:#ffd08a}
.dlive[data-status=busy] i{background:#f5a623}
@keyframes dlive-pulse{from{transform:scale(1);opacity:.7}to{transform:scale(2.6);opacity:0}}
.dcard__live{margin-top:8px}
.drow__live{display:block;margin-top:5px}
.drow__live .dlive{padding:1px 10px 1px 8px;font-size:13px}
.dir-chip--live span{display:inline-flex;align-items:center;gap:8px}
.dir-chip--live i{width:8px;height:8px}
.dir-chip--live input:checked+span i{background:#04261f}
.dcard[data-status=available] .dcard__portrait::after,.drow[data-status=available] .drow__portrait::after,.dcard[data-status=busy] .dcard__portrait::after,.drow[data-status=busy] .drow__portrait::after{content:"";position:absolute;z-index:2;top:6%;right:6%;width:18px;height:18px;border:3px solid #0d2b30;border-radius:50%;background:#35e083}
.dcard[data-status=busy] .dcard__portrait::after,.drow[data-status=busy] .drow__portrait::after{background:#f5a623}
.drow[data-status] .drow__portrait::after{width:13px;height:13px;border-width:2px;top:2%;right:2%}
@media(min-width:1024px){.dir-reset{grid-column:-2/-1}}
@media(prefers-reduced-motion:reduce){.dlive i::after,.dir-chip--live i::after{animation:none;opacity:0}}