/* ============================================================
   AMX DIGITAL — Espace client (v6.0)
   Direction : le fil de production comme colonne vertébrale,
   l'ambre ne signifie qu'une chose : « quelque chose vous attend ».
   Pour changer la charte, il suffit de modifier les variables ci-dessous.
   ============================================================ */

.amx-portal{
  --encre:#0E1116; --graphite:#5A6470; --gris:#9AA3AC;
  --trait:#DFE3E6; --fond:#F3F5F6; --blanc:#fff;
  --vert:#0B7A55; --vert-fond:#E6F4EE;
  --ambre:#FFB020; --ambre-ink:#8A5A00; --ambre-fond:#FFF6E5;
  --rail:34px;

  max-width:780px; margin:0 auto; padding:0 20px 150px;
  color:var(--encre); font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.amx-portal *{box-sizing:border-box}
body.amx-portal-page{background:#F3F5F6}

.amx-portal .mono, .amx-portal .amx-num{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums;
}
.amx-portal .amx-eyebrow{
  font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--graphite); margin:0;
}
.amx-portal button{font:inherit; cursor:pointer; border-radius:999px; border:1.5px solid transparent; transition:.15s}
.amx-portal button:focus-visible, .amx-portal a:focus-visible, .amx-portal input:focus-visible,
.amx-portal textarea:focus-visible, .amx-portal select:focus-visible{outline:2.5px solid var(--encre); outline-offset:2px}
.amx-btn{background:var(--encre); color:#fff; padding:10px 18px; font-size:14px; font-weight:600; border:0; border-radius:999px}
.amx-btn:hover{background:#000; color:#fff}
.amx-b2{background:transparent; color:var(--encre); border-color:var(--trait); padding:10px 18px; font-size:14px; font-weight:600}
.amx-b2:hover{border-color:var(--graphite)}
.amx-ba{background:transparent; color:var(--ambre-ink); border-color:rgba(138,90,0,.35); padding:10px 18px; font-size:14px; font-weight:600}
.amx-ba:hover{border-color:var(--ambre-ink); background:rgba(255,176,32,.14)}
.amx-lien{background:none; border:0; padding:0; font-size:13px; font-weight:600; color:var(--graphite);
  text-decoration:underline; text-underline-offset:3px}
.amx-lien:hover{color:var(--encre)}
.amx-portal .amx-champ{width:100%; border:1.5px solid var(--trait); border-radius:12px; padding:11px 14px;
  font:inherit; font-size:14px; background:var(--blanc); resize:vertical}
.amx-portal .amx-champ:focus{outline:none; border-color:var(--encre)}
.amx-portal label.amx-f{display:block; font-size:13px; font-weight:600; margin-bottom:12px}
.amx-portal label.amx-f > span{display:block; margin-bottom:5px}
.amx-portal .amx-muted{color:var(--graphite); font-size:13.5px}
.amx-cache{display:none}

/* ---------- en-tête ---------- */
.amx-portal .amx-hero{padding:58px 0 36px}
.amx-portal h1.amx-title{
  font-family:"Bricolage Grotesque",Inter,sans-serif; font-weight:800; letter-spacing:-.035em; line-height:.98;
  font-size:clamp(34px,7vw,58px); margin:16px 0 0;
}
.amx-portal h1.amx-title .amx-vous{
  background:linear-gradient(transparent 62%, rgba(255,176,32,.55) 62%); white-space:nowrap;
}
.amx-jetons{display:flex; gap:9px; flex-wrap:wrap; margin-top:26px}
.amx-jeton{display:inline-flex; align-items:baseline; gap:8px; background:var(--blanc);
  border:1px solid var(--trait); border-radius:999px; padding:8px 15px 8px 13px}
.amx-jeton .n{font-family:"IBM Plex Mono",monospace; font-size:15px; font-weight:600}
.amx-jeton .t{font-size:12.5px; color:var(--graphite)}
.amx-jeton.att{background:var(--ambre-fond); border-color:rgba(255,176,32,.5)}
.amx-jeton.att .n{color:var(--ambre-ink)}
.amx-jeton .pt{width:7px; height:7px; border-radius:50%; background:var(--ambre); align-self:center}

/* ---------- le fil ---------- */
.amx-fil{position:relative; padding-left:var(--rail)}
.amx-fil::before{content:""; position:absolute; left:6px; top:6px; bottom:0; width:2px;
  background:var(--trait); transform-origin:top; animation:amx-tracer .9s cubic-bezier(.65,0,.35,1) both}
@keyframes amx-tracer{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.amx-noeud{position:relative}
.amx-noeud::before{content:""; position:absolute; left:calc(-1 * var(--rail) + 1px); top:7px;
  width:12px; height:12px; border-radius:50%; background:var(--fond); border:2px solid var(--trait)}
.amx-noeud.fait::before{background:var(--vert); border-color:var(--vert)}
.amx-noeud.encours::before{background:var(--blanc); border-color:var(--vert); border-width:3px;
  animation:amx-souffle 2.6s ease-in-out infinite}
@keyframes amx-souffle{0%,100%{box-shadow:0 0 0 0 rgba(11,122,85,.28)}50%{box-shadow:0 0 0 7px rgba(11,122,85,0)}}
.amx-noeud.att::before{background:var(--ambre); border-color:var(--ambre)}

.amx-projet{margin-top:42px}
.amx-projet-tete{position:relative; padding-bottom:12px}
.amx-projet-tete::before{content:""; position:absolute; left:calc(-1 * var(--rail) - 3px); top:2px;
  width:20px; height:20px; border-radius:50%; background:var(--encre); border:4px solid var(--fond)}
.amx-projet-tete.livre::before{background:var(--vert)}
.amx-portal .amx-projet h2{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:23px;
  letter-spacing:-.02em; line-height:1.2; margin:0}
.amx-projet .amx-desc{color:var(--graphite); font-size:14px; margin-top:5px}
.amx-projet-meta{display:flex; align-items:center; gap:12px; margin-top:9px; flex-wrap:wrap}
.amx-pct{font-family:"IBM Plex Mono",monospace; font-size:13px; font-weight:600; color:var(--vert)}
.amx-jauge{flex:1; min-width:80px; height:3px; background:var(--trait); border-radius:2px; overflow:hidden}
.amx-jauge i{display:block; height:100%; background:var(--vert); transition:width .6s cubic-bezier(.65,0,.35,1)}
.amx-statut{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--graphite)}
.amx-etape{padding:8px 0}
.amx-etape .lib{font-size:15px}
.amx-etape.fait .lib{color:var(--graphite)}
.amx-etape.encours .lib{font-weight:600}
.amx-etape.avenir .lib{color:var(--gris)}

.amx-sous{margin:22px 0 6px; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.amx-compteur{font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:600;
  background:#EDF0F2; color:var(--graphite); border-radius:999px; padding:2px 9px}
.amx-compteur.reste{background:var(--ambre-fond); color:var(--ambre-ink)}
.amx-compteur.plein{background:var(--vert-fond); color:var(--vert)}

/* ---------- cartes ---------- */
.amx-carte{background:var(--blanc); border:1px solid var(--trait); border-radius:14px; padding:14px 16px; margin-bottom:9px}
.amx-carte.att{background:var(--ambre-fond); border-color:rgba(255,176,32,.45); animation:amx-apparait .45s ease both}
.amx-carte.ok{background:#FBFDFC; border-color:rgba(11,122,85,.22)}
@keyframes amx-apparait{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
.amx-carte-tete{display:flex; align-items:flex-start; gap:9px}
.amx-coche{width:19px; height:19px; border-radius:50%; border:2px solid var(--trait); flex:none;
  display:grid; place-items:center; font-size:11px; color:#fff; margin-top:2px}
.amx-coche.ok{background:var(--vert); border-color:var(--vert)}
.amx-coche.att{background:var(--ambre); border-color:var(--ambre); color:var(--encre)}
.amx-portal .amx-carte h3{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:16px;
  letter-spacing:-.01em; flex:1; margin:0}
.amx-carte .amx-desc{font-size:13.5px; color:var(--graphite); margin-top:3px}
.amx-carte.att .amx-desc{color:#6B5B3A}
.amx-etat{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px; white-space:nowrap}
.amx-etat.ok{background:var(--vert-fond); color:var(--vert)}
.amx-etat.attente{background:rgba(255,176,32,.28); color:var(--ambre-ink)}
.amx-etat.neutre{background:#EDF0F2; color:var(--graphite)}
.amx-etat.info{background:#EAF1FB; color:#2b5aa8}
.amx-valeur{background:#F1F3F6; border-radius:9px; padding:8px 11px; margin-top:9px; font-size:13.5px; white-space:pre-wrap}
.amx-carte.att .amx-valeur{background:rgba(255,255,255,.65)}
.amx-pj{display:inline-flex; align-items:center; gap:6px; margin-top:8px; font-size:13.5px; color:var(--graphite)}
.amx-quota{font-family:"IBM Plex Mono",monospace; font-size:12px; margin-top:9px; color:var(--graphite)}
.amx-quota.chaud{color:var(--ambre-ink)}
.amx-quota.epuise{color:#8a2b2b; background:#FBE9E9; border-radius:8px; padding:7px 10px;
  font-family:inherit; font-size:13px}
.amx-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:13px; align-items:center}

/* ---------- registres ---------- */
.amx-section{margin-top:56px}
.amx-section-tete{display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap}
.amx-section-tete .plus{margin-left:auto}
.amx-ligne{display:flex; align-items:center; gap:12px; padding:14px 2px; border-top:1px solid var(--trait);
  flex-wrap:wrap; cursor:pointer; background:none; border-left:0; border-right:0; border-bottom:0;
  width:100%; text-align:left; border-radius:0}
.amx-ligne:last-of-type{border-bottom:1px solid var(--trait)}
.amx-ligne:hover{background:rgba(255,255,255,.6)}
.amx-ligne .ref{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--graphite)}
.amx-ligne .obj{flex:1; min-width:150px; font-size:14.5px; font-weight:500}
.amx-ligne .sub{display:block; font-size:12.5px; color:var(--graphite); font-weight:400}
.amx-ligne .mt{font-family:"IBM Plex Mono",monospace; font-size:14px; font-weight:600}
.amx-vide{color:var(--graphite); font-size:14px; padding:16px 0}

/* ---------- panneau latéral ---------- */
.amx-voile{position:fixed; inset:0; background:rgba(14,17,22,.42); opacity:0; pointer-events:none;
  transition:opacity .25s; z-index:99990}
.amx-voile.on{opacity:1; pointer-events:auto}
.amx-panneau{position:fixed; top:0; right:0; bottom:0; width:min(560px,100vw); background:#F3F5F6;
  transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1); z-index:99991;
  overflow-y:auto; box-shadow:-16px 0 50px rgba(14,17,22,.18); color:#0E1116;
  font-family:Inter,system-ui,sans-serif; font-size:15px; line-height:1.6}
.amx-panneau.on{transform:none}
.amx-pan-tete{position:sticky; top:0; background:#F3F5F6; padding:20px 24px 14px;
  border-bottom:1px solid #DFE3E6; z-index:2}
.amx-panneau h2{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:23px;
  letter-spacing:-.025em; line-height:1.15; margin:8px 0 0}
.amx-pan-corps{padding:20px 24px 40px}
.amx-fermer{position:absolute; top:16px; right:18px; background:#fff; border:1px solid #DFE3E6;
  width:34px; height:34px; border-radius:50%; font-size:15px; color:#5A6470; line-height:1; cursor:pointer}
.amx-fermer:hover{color:#0E1116; border-color:#5A6470}
.amx-echange{display:flex; flex-direction:column; gap:11px; margin-bottom:20px}
.amx-msg{max-width:88%; padding:11px 14px; border-radius:15px; font-size:14px; line-height:1.55; white-space:pre-wrap}
.amx-msg .qui{display:block; font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; opacity:.75; margin-bottom:4px; white-space:normal}
.amx-msg.moi{background:#0E1116; color:#fff; align-self:flex-end; border-bottom-right-radius:5px}
.amx-msg.eq{background:#fff; border:1px solid #DFE3E6; align-self:flex-start; border-bottom-left-radius:5px}
.amx-msg.sys{background:#E6F4EE; color:#0B7A55; align-self:center; font-size:12.5px; text-align:center;
  border-radius:999px; padding:6px 14px}
.amx-lignes-doc{width:100%; border-collapse:collapse; font-size:13.5px; margin-top:6px}
.amx-lignes-doc th{text-align:left; font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:#5A6470; font-weight:500; padding-bottom:8px}
.amx-lignes-doc td{padding:9px 0; border-top:1px solid #DFE3E6}
.amx-lignes-doc td:last-child, .amx-lignes-doc th:last-child{text-align:right;
  font-family:"IBM Plex Mono",monospace}
.amx-totaux{text-align:right; margin-top:14px; font-size:14px}
.amx-totaux .ttc{font-family:"IBM Plex Mono",monospace; font-size:19px; font-weight:600; display:block; margin-top:4px}

/* ---------- connexion ---------- */
.amx-login{background:#fff; border:1px solid var(--trait); border-radius:16px; padding:24px; max-width:420px}
.amx-login input[type=text], .amx-login input[type=password]{width:100%; border:1.5px solid var(--trait);
  border-radius:12px; padding:11px 14px; font:inherit}
.amx-login input[type=submit]{background:var(--encre); color:#fff; border:0; border-radius:999px;
  padding:11px 20px; font-weight:600; cursor:pointer}

@media (max-width:600px){
  .amx-portal{--rail:26px; padding-bottom:120px}
  .amx-portal .amx-hero{padding:40px 0 26px}
  .amx-projet-tete::before{width:16px; height:16px; left:calc(-1 * var(--rail) - 1px)}
  .amx-actions .amx-btn, .amx-actions .amx-ba, .amx-actions .amx-b2{flex:1; text-align:center}
  .amx-panneau{width:100vw}
}
@media (prefers-reduced-motion:reduce){
  .amx-portal *, .amx-portal *::before, .amx-panneau, .amx-voile{animation:none !important; transition:none !important}
}

/* ---------- v6.2 : heures de maintenance ---------- */
.amx-temps-jauge{ height:6px; background:#EFF1F5; border-radius:3px; overflow:hidden; }
.amx-temps-jauge i{ display:block; height:100%; background:linear-gradient(90deg,var(--vert),#2fbf8b); transition:width .5s; }
.amx-carte.att .amx-temps-jauge i{ background:var(--ambre); }
.amx-temps-l{ display:flex; align-items:baseline; gap:10px; padding:6px 0; font-size:13px; border-top:1px solid #F0F1F4; }
.amx-temps-l:first-of-type{ border-top:0; }
.amx-temps-l .d{ font-family:"IBM Plex Mono",monospace; font-weight:600; min-width:58px; }
.amx-temps-l .q{ flex:1; min-width:0; }
.amx-temps-l .w{ color:var(--graphite); font-size:11.5px; }