/* Page de suivi [sv_suivi] — police du thème ; couleurs réglables (WooCommerce → ShopValley Suivi). */
.sv-suivi{--sv-accent:#1d4ed8;--sv-btn-text:#fff;--sv-text:#1c1f24;--sv-muted:#6b7280;--sv-link:#1d4ed8;--sv-card-bg:#fff;--sv-input-bg:#fff;--sv-line:#e5e7eb;--sv-step-off:#d1d5db;--sv-problem:#9a3412;--sv-error-bg:#fcebdf;width:760px;max-width:100%;box-sizing:border-box;margin:0 auto;color:var(--sv-text);container-type:inline-size}
/* Largeur explicite : avec container-type, un thème qui dimensionne le contenu « à la taille du contenu » (flex centré…) réduirait sinon le bloc à 0. */
.sv-suivi.sv-has-result{width:1120px}
.sv-suivi a{color:var(--sv-link)}
/* Formulaire — carte d'accueil */
.sv-form{display:flex;flex-direction:column;gap:20px;margin:0 auto 24px;max-width:520px;padding:32px;box-sizing:border-box;background:var(--sv-card-bg);border:1px solid var(--sv-line);border-radius:20px;box-shadow:0 1px 2px rgba(22,25,30,.05)}
.sv-form-head{display:flex;align-items:center;gap:14px}
.sv-form-icon{flex:0 0 48px;width:48px;height:48px;border-radius:14px;color:var(--sv-accent);background:#eef2ff;background:color-mix(in srgb,var(--sv-accent) 10%,var(--sv-card-bg));display:flex;align-items:center;justify-content:center}
.sv-form-title{font-size:1.35em;font-weight:700;line-height:1.2;color:var(--sv-text)}
.sv-form-help{margin-top:2px;font-size:.88em;color:var(--sv-muted)}
.sv-field{display:flex;flex-direction:column;gap:6px}
.sv-field label{font-size:.9em;font-weight:600;color:var(--sv-text)}
.sv-input{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;border:1.5px solid var(--sv-line);border-radius:12px;background:var(--sv-input-bg);box-sizing:border-box;transition:border-color .15s,box-shadow .15s}
.sv-input:focus-within{border-color:var(--sv-accent);box-shadow:0 0 0 3px rgba(29,78,216,.15);box-shadow:0 0 0 3px color-mix(in srgb,var(--sv-accent) 18%,transparent)}
.sv-input-prefix{flex-shrink:0;display:flex;font-weight:600;color:var(--sv-muted)}
.sv-suivi .sv-input input{flex:1 1 auto;min-width:0;width:100%;min-height:44px;margin:0;padding:0;border:0;outline:0;box-shadow:none;background:transparent;font:inherit;font-size:16px;color:var(--sv-text)}
.sv-suivi .sv-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;padding:0 20px;border:0;border-radius:12px;background:var(--sv-accent);color:var(--sv-btn-text);font:inherit;font-size:1em;font-weight:700;text-transform:none;letter-spacing:normal;cursor:pointer}
.sv-btn:hover{filter:brightness(.92)}
.sv-error{padding:12px 16px;border-radius:8px;background:var(--sv-error-bg);color:var(--sv-problem)}
.sv-form + .sv-error{max-width:520px;margin:0 auto;box-sizing:border-box}
.sv-mono{font-family:ui-monospace,Menlo,Consolas,monospace}


/* Suivi affiché — P1 « deux colonnes » : formulaire à gauche, suivi à droite */
.sv-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.sv-side{display:flex;flex-direction:column;gap:12px;order:2}
.sv-result{display:flex;flex-direction:column;gap:20px;order:1;min-width:0}
.sv-suivi .sv-form-side{max-width:none;margin:0;padding:24px;border:0;box-shadow:none;background:#f7f7f5;background:color-mix(in srgb,var(--sv-text) 4%,var(--sv-card-bg))}
.sv-form-side .sv-form-title{font-size:1.25em}
.sv-note{display:flex;gap:10px;align-items:flex-start;margin:0;padding:0 6px;font-size:.88em;line-height:1.5;color:var(--sv-muted)}
.sv-note svg{flex-shrink:0;margin-top:1px}
.sv-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.sv-head-main{display:flex;flex-direction:column;gap:6px;min-width:0}
.sv-order{font-size:.8em;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--sv-muted)}
.sv-status{font-size:2.4em;line-height:1.05;font-weight:800;color:var(--sv-accent)}
.sv-problem .sv-status{color:var(--sv-problem)}
.sv-eta{display:flex;flex-direction:column;gap:3px;margin-left:auto;text-align:right}
.sv-eta span{font-size:.82em;color:var(--sv-muted)}
.sv-eta strong{font-size:1.2em;font-weight:700;color:var(--sv-text)}
.sv-hsteps{display:grid;list-style:none;margin:0;padding:8px 0 0}
.sv-hsteps li{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;position:relative;min-width:0}
.sv-hsteps li::after{content:"";position:absolute;top:6px;left:14px;right:0;height:3px;border-radius:2px;background:var(--sv-line)}
.sv-hsteps li:last-child::after{display:none}
.sv-hsteps li.done:not(.current)::after{background:var(--sv-accent)}
.sv-hdot{position:relative;z-index:1;width:14px;height:14px;border-radius:50%;box-sizing:border-box;background:var(--sv-card-bg);border:2px solid var(--sv-step-off)}
.sv-hsteps li.done .sv-hdot{background:var(--sv-accent);border-color:var(--sv-accent)}
.sv-hsteps li.current .sv-hdot{width:18px;height:18px;margin:-2px 0 -2px -2px;box-shadow:0 0 0 5px rgba(29,78,216,.14);box-shadow:0 0 0 5px color-mix(in srgb,var(--sv-accent) 15%,transparent)}
.sv-problem .sv-hsteps li.current .sv-hdot{background:var(--sv-problem);border-color:var(--sv-problem);box-shadow:0 0 0 5px var(--sv-error-bg)}
.sv-hlabel{padding-right:8px;font-size:.9em;line-height:1.3;color:var(--sv-muted)}
.sv-hsteps li.done .sv-hlabel{font-weight:700;color:var(--sv-text)}
.sv-short{display:none}
.sv-tiles{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.sv-tiles > :only-child{grid-column:1/-1}
.sv-tile{background:var(--sv-card-bg);border:1.5px solid var(--sv-line);border-radius:16px}
.sv-tile-label{font-size:.82em;color:var(--sv-muted)}
.sv-carrier{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 18px}
.sv-carrier-id{display:flex;align-items:center;gap:12px;min-width:0}
.sv-logo{flex:0 0 44px;width:44px;height:44px;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.sv-logo-txt{font-size:14px;font-weight:800;letter-spacing:-.01em;line-height:1}
.sv-logo-img{background:#fff;box-shadow:inset 0 0 0 1px var(--sv-line);padding:4px}
.sv-logo-img img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.sv-logo-default{color:var(--sv-accent);background:#eef2ff;background:color-mix(in srgb,var(--sv-accent) 10%,var(--sv-card-bg))}
.sv-carrier-text{display:flex;flex-direction:column;gap:1px;min-width:0;color:var(--sv-text)}
.sv-carrier-name{font-size:1.05em;font-weight:700}
.sv-carrier-text .sv-mono{font-size:.82em;color:var(--sv-muted);overflow-wrap:anywhere}
.sv-suivi a.sv-carrier-link{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex-shrink:0;text-decoration:none;font-size:.92em;font-weight:700;color:var(--sv-accent);white-space:nowrap}
.sv-suivi a.sv-carrier-link:hover{text-decoration:underline}
.sv-last{display:flex;flex-direction:column;justify-content:center;gap:3px;padding:16px 20px}
.sv-last-what{font-size:1.05em;font-weight:700;color:var(--sv-text)}
.sv-last-when{font-size:.85em;color:var(--sv-muted)}
.sv-events{list-style:none;margin:0;padding:4px 20px}
.sv-events li{display:flex;flex-direction:column;gap:2px;margin:0;padding:12px 0;border-top:1px solid var(--sv-line)}
.sv-events li:first-child{border-top:0}
.sv-when{order:2;font-size:.85em;color:var(--sv-muted)}
.sv-what{color:var(--sv-text);opacity:.85}
.sv-latest .sv-what{font-weight:700;opacity:1}
.sv-where{order:3;font-size:.85em;color:var(--sv-muted)}
@container (max-width:519px){
  .sv-form{padding:24px 20px;border-radius:16px}
  .sv-status{font-size:2.1em}
  .sv-eta{margin-left:0;text-align:left}
  .sv-hlabel{font-size:.78em;padding-right:4px}
  .sv-long{display:none}
  .sv-short{display:inline}
  .sv-carrier{flex-direction:column;align-items:stretch}
  .sv-suivi a.sv-carrier-link{min-height:46px;border-radius:12px;background:var(--sv-accent);color:var(--sv-btn-text)}
  .sv-suivi a.sv-carrier-link:hover{text-decoration:none;filter:brightness(.92)}
  .sv-events{padding:4px 16px}
}
@container (min-width:600px){
  .sv-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sv-events li{display:grid;grid-template-columns:140px minmax(0,1fr) auto;column-gap:16px;align-items:baseline}
  .sv-when{order:0}
  .sv-where{order:0;text-align:right}
}
@container (min-width:900px){
  .sv-cols{grid-template-columns:340px minmax(0,1fr);column-gap:40px;align-items:start}
  .sv-side{order:0}
  .sv-result{order:0}
}