/* Coursiers Parisiens — espace client. Charte du logo.
   La typographie est celle du site public : l'espace client est une porte
   dérobée du même site, pas une application tierce, et une police système y
   trahirait aussitôt la couture. Les fichiers sont déjà déployés sous
   /assets/fonts/, on ne rapatrie donc rien de plus. */
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/hanken-grotesk-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/hanken-grotesk-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/hanken-grotesk-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/hanken-grotesk-latin-700-normal.woff2) format('woff2')}

:root{ --vert:#2E8B3D; --lime:#8CC63F; --ink:#0E1512; --line:#E4EBE5; --bg:#F5F8F4; --muted:#67766D;
       --cl-font:'Hanken Grotesk',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
*{box-sizing:border-box}
body.cl-app{margin:0;background:var(--bg);color:var(--ink);
  font:400 15px/1.5 var(--cl-font);-webkit-font-smoothing:antialiased}
a{color:var(--vert);text-decoration:none}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}

/* Tableau de bord */
.cl-top{display:flex;align-items:center;gap:12px;background:#fff;border-bottom:1px solid var(--line);padding:14px 18px}
.cl-brand{flex:1;display:flex;align-items:center;min-width:0}
.cl-brand img{height:36px;width:auto;display:block}
.cl-me{font-size:13.5px;color:var(--muted)}
.cl-logout{font-size:13px}
.cl-main{max-width:760px;margin:0 auto;padding:22px 16px 60px}
.cl-alert{background:rgba(140,198,63,.14);border:1px solid rgba(76,168,69,.3);color:#245c25;border-radius:12px;padding:12px 16px;margin-bottom:18px;font-size:14px}
.cl-sec{margin-bottom:30px}
.cl-sec h2{font-size:18px;margin:0 0 12px}
.cl-empty{color:var(--muted);font-size:14px}

.cl-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:10px}
.cl-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.cl-ref{font-weight:700}
.cl-route{font-size:14.5px}
.cl-meta{font-size:13px;color:var(--muted);margin-top:3px}
.cl-actions{display:flex;gap:14px;margin-top:8px}
.cl-link{font-size:13.5px;font-weight:600}
.cl-badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px}
.cl-nouvelle{background:#fff4d6;color:#8a6b12}.cl-attribuee{background:#e2f0ff;color:#1c5aa8}
.cl-acceptee{background:#e6e9ff;color:#4340a8}.cl-enlevee{background:#e9e2ff;color:#5a34a8}
.cl-livree,.cl-cloturee{background:rgba(140,198,63,.25);color:var(--vert)}.cl-annulee{background:#fde2e2;color:#a12626}

.cl-line{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:11px 14px;margin-bottom:8px;font-size:14px}
.cl-muted{color:var(--muted);font-size:13px}
.cl-del{background:none;border:0;color:#a12626;cursor:pointer;font-size:13px;text-decoration:underline}
.cl-addr-form{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.cl-addr-form input{flex:1;min-width:140px;border:1px solid #dcdcd5;border-radius:10px;padding:11px 13px;font-size:14px}

/* Panneau « mot de passe » du tableau de bord. Replié quand le compte en a
   déjà un, ouvert d'emblée sinon : c'est là qu'atterrit le client venu par le
   lien magique, et il ne doit pas avoir à le chercher. */
.cl-mdp{margin:0 0 26px}
.cl-mdp details{border:1px solid var(--cl-line,#E4EBE5);border-radius:14px;background:#fff}
.cl-mdp summary{cursor:pointer;padding:14px 18px;font-weight:500;list-style:none}
.cl-mdp summary::-webkit-details-marker{display:none}
.cl-mdp summary::after{content:"›";float:right;transform:rotate(90deg);opacity:.5}
.cl-mdp details[open] summary::after{transform:rotate(-90deg)}
.cl-mdp form{padding:0 18px 18px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.cl-mdp input{flex:1 1 220px;padding:12px 14px;border:1px solid var(--cl-line,#E4EBE5);border-radius:999px;font:inherit}

/* ============================================================
   Page de connexion — refonte
   Les champs étaient posés en ligne : le mot de passe partageait sa rangée
   avec le bouton, d'où la mise en page bancale. Ils sont désormais empilés,
   pleine largeur, avec la même pilule que le reste du site.

   Le fond reprend le dégradé de gris de la page d'accueil plutôt qu'un aplat :
   arriver ici ne doit pas donner l'impression d'avoir quitté le site.
   ============================================================ */
body.cl-app.cl-connexion{background:
  radial-gradient(118% 82% at 76% -6%, #ECF1EE 0%, rgba(236,241,238,0) 58%),
  linear-gradient(178deg, #F1F5F2 0%, #F7F9F8 46%, #fff 100%);
  background-attachment:fixed}

.cl-login{max-width:452px;margin:0 auto;padding:7vh 20px 40px}
/* L'en-tête est centré, le formulaire reste aligné à gauche : centrer aussi
   les champs obligerait l'œil à chercher le début de chaque libellé. */
.cl-logo{display:flex;justify-content:center;margin:0 0 30px}
.cl-logo img{height:54px;width:auto;display:block}
.cl-login h1{font:300 34px/1.15 var(--cl-font);letter-spacing:-.03em;margin:0 0 8px;text-align:center}
.cl-login > p{color:var(--muted);margin:0 0 26px;font-weight:300;font-size:16px;text-align:center}

.cl-card-login{background:#fff;border:1px solid var(--line);border-radius:22px;
  padding:26px 24px;box-shadow:0 20px 44px -34px rgba(14,21,18,.42)}
.cl-login form{display:flex;flex-direction:column;gap:11px;margin:0}
/* Un display: explicite l'emporte sur la règle [hidden]{display:none} du
   navigateur : sans ce rappel, le formulaire « lien magique » resterait
   visible en permanence. */
.cl-login [hidden]{display:none}
.cl-field{display:flex;flex-direction:column;gap:6px}
.cl-field label{font:500 12px var(--cl-font);text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.cl-login form input[type=email],
.cl-login form input[type=password]{
  width:100%;padding:14px 18px;border:1px solid var(--line);border-radius:999px;
  font:400 16px var(--cl-font);color:var(--ink);background:#fff;
  transition:border-color .18s ease,box-shadow .18s ease}
.cl-login form input::placeholder{color:#94A39A}
.cl-login form input:focus{outline:none;border-color:#3F9E42;box-shadow:0 0 0 3px rgba(63,158,66,.14)}
.cl-btn{width:100%;padding:15px 24px;margin-top:5px;border:0;border-radius:999px;cursor:pointer;
  background:var(--vert);color:#fff;font:500 15.5px var(--cl-font);transition:background .18s ease}
.cl-btn:hover{background:var(--ink)}
.cl-btn:disabled{opacity:.55;cursor:default}
.cl-status{margin:6px 0 0;font-size:14px;color:#a12626}
.cl-status.is-ok{color:var(--vert)}
.cl-alt{margin:16px 0 0;font-size:14.5px;color:var(--muted);text-align:center}
.cl-alt a{color:var(--vert)}
.cl-alt-foot{margin-top:22px}

/* Le véhicule traverse sous le formulaire, comme sur la page d'accueil : c'est
   le même geste, donc la même identité d'un bout à l'autre du site. Purement
   décoratif, donc masqué aux lecteurs d'écran.
   Nommé « piste » et non « route » : .cl-route désigne déjà le trajet affiché
   sur les cartes du tableau de bord, et réutiliser le nom lui aurait imposé
   une hauteur fixe et un débordement masqué. */
.cl-piste{position:relative;height:80px;margin-top:30px;overflow:hidden}
.cl-piste img{position:absolute;left:38%;bottom:0;width:177px;height:auto;
  transform:translateX(-340%);animation:cl-drive 2.6s cubic-bezier(.19,.72,.24,1) .45s forwards}
@keyframes cl-drive{to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.cl-piste img{transform:none;animation:none}}
@media(max-width:520px){
  .cl-login{padding-top:5vh}
  .cl-login h1{font-size:29px}
  .cl-card-login{padding:22px 18px}
}