:root {
    /* ===== Encre et texte ===== */
    --sh-ink: #0e2233;
    /* titres / texte fort */
    --sh-deep: #0e4e78;
    /* bleu profond */
    --sh-brand: #1184c4;
    /* bleu principal : aplats, bordures, pastilles (jamais du texte fin) */
    --sh-brand-text: #0e6ea3;
    /* meme bleu assombri, reserve au TEXTE : 4.97:1 sur --sh-surface */
    --sh-aqua: #16bbe0;
    /* accent aqua : aplats et points seulement */
    --sh-aqua-text: #6fdcf2;
    /* aqua eclairci, reserve au texte sur fond sombre : 5.55:1 sur --sh-deep */
    --sh-body: #55697c;
    /* texte courant : 5.68:1 sur blanc */
    --sh-body-soft: #5c7186;
    /* texte secondaire : 5.05:1 sur blanc */
    --sh-muted: #5b7085;
    /* libelles discrets, placeholders, etapes a venir : 4.58:1 sur le pire fond */

    /* ===== Fonds et filets ===== */
    --sh-paper: #fafcfd;
    /* fond de page : blanc casse tres legerement bleute, accorde a l'accent */
    --sh-surface: #edf3f8;
    /* fond de section alterne */
    --sh-field: #f6fafc;
    /* fond de champ */
    --sh-line: #e7eef4;
    /* filets clairs */
    --sh-line-soft: #e2eaf0;
    /* bordures cartes */
    --sh-field-border: #dce6ee;
    /* bordures champs */
    --sh-footer: #0b1620;
    /* pied de page : bleu nuit tres desature, dans la charte */

    /* ===== Statuts ===== */
    --sh-ok: #12794b;
    --sh-warn: #8a5a00;
    --sh-danger: #b3282d;

    /* ===== Tailles d'icone : trois, pas douze ===== */
    --sh-icon-sm: 14px;
    --sh-icon-md: 1.15rem;
    --sh-icon-lg: 1.5rem;

    /* ===== Rayons : trois niveaux, jamais de valeur en dur dans les vues =====
       sm = champs, boutons, pastilles | md = cartes | lg = deux surfaces
       seulement (carte de formulaire flottante, image du hero). */
    /* ===== Polices ===== */
    --sh-font-title: "Fraunces", Georgia, "Times New Roman", serif;
    --sh-font-body:
        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --sh-r-sm: 10px;
    --sh-r-md: 16px;
    --sh-r-lg: 20px;

    /* ===== Ombres : uniquement ce qui flotte au-dessus du flux =====
       menus deroulants, toasts, cartes de formulaire remontees, survol d'une
       carte cliquable. Une carte posee a plat dans le flux n'a pas d'ombre :
       elle se detache par sa valeur (blanc pur sur --sh-paper) et son filet. */
    --sh-shadow-hover: 0 18px 36px -22px rgba(14, 78, 120, 0.35);
    --sh-shadow-float: 0 20px 42px -26px rgba(14, 78, 120, 0.35);

    --bs-primary: #1184c4;
    --bs-primary-rgb: 17, 132, 196;
    --bs-link-color: #0e6ea3;
    --bs-link-hover-color: #0e4e78;

    /* alias conserves pour compat (anciennes classes) */
    --brand: #1184c4;
    --brand-deep: #0e4e78;
    --gray-50: #edf3f8;
    --gray-100: #eef3f8;
    --gray-200: #e2eaf0;
    --gray-300: #cbdbe8;
    --gray-500: #5b7085;
    --gray-900: #0e2233;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 20px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--sh-font-body);
    color: var(--sh-body);
    background: var(--sh-paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    text-decoration: none;
}

::placeholder {
    color: var(--sh-muted);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--sh-font-title);
    color: var(--sh-ink);
}

/* Echelle de titres. Les vues utilisent ces classes : aucune vue ne redeclare
   font-family, sinon un changement de police obligerait a repasser sur 34
   declarations inline. Un serif n'a pas besoin du crenage negatif serre que
   demandait le grotesque : le tracking revient pres de zero. */
.sh-h3 {
    font-family: var(--sh-font-title);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.25;
    color: var(--sh-ink);
}

.sh-h4 {
    font-family: var(--sh-font-title);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.3;
    color: var(--sh-ink);
}

/* Chiffres et codes mis en avant (statistiques, code de suivi, codes IATA). */
.sh-display {
    font-family: var(--sh-font-title);
    font-weight: 700;
    line-height: 1;
    color: var(--sh-deep);
    font-variant-numeric: tabular-nums;
}

/* ===== Primitives de section ===== */
.sh-wrap {
    max-width: 1180px;
}

.sh-eyebrow {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sh-brand-text);
    display: block;
}

.sh-h1 {
    font-family: var(--sh-font-title);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--sh-ink);
    font-size: clamp(32px, 5vw, 54px);
    line-height: 1.05;
}

.sh-h2 {
    font-family: var(--sh-font-title);
    font-weight: 700;
    letter-spacing: -0.012em;
    color: var(--sh-ink);
    font-size: clamp(27px, 4vw, 42px);
    line-height: 1.08;
}

.sh-lead {
    font-size: clamp(15px, 1.6vw, 18px);
    line-height: 1.65;
    color: var(--sh-body);
}

.sh-ink {
    color: var(--sh-ink) !important;
}

.sh-deep {
    color: var(--sh-deep) !important;
}

.sh-brand {
    color: var(--sh-brand-text) !important;
}

.bg-sh-surface {
    background: var(--sh-surface);
}

/* Fond de page : les sections l'heritent, les cartes restent en blanc pur
   et se detachent donc par la valeur, sans avoir besoin d'une ombre. */
.bg-sh-paper {
    background: var(--sh-paper);
}

.sh-line-top {
    border-top: 1px solid var(--sh-line);
}

.sh-line-y {
    border-top: 1px solid var(--sh-line);
    border-bottom: 1px solid var(--sh-line);
}

/* Rythme vertical des sections : une seule regle au lieu d'un clamp()
   recopie dans chaque vue. */
.sh-section {
    padding: clamp(56px, 8vw, 90px) clamp(20px, 5vw, 40px);
}

.sh-section-sm {
    padding: clamp(40px, 6vw, 72px) clamp(20px, 5vw, 40px)
        clamp(32px, 5vw, 48px);
}

.sh-section-tail {
    padding: 0 clamp(20px, 5vw, 40px) clamp(56px, 8vw, 90px);
}

/* ===== Boutons ===== */
.sh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    font-size: 15px;
    border-radius: var(--sh-r-sm);
    padding: 13px 22px;
    border: 1px solid transparent;
    cursor: pointer;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}

/* Le bleu de marque pur (#1184C4) ne porte le blanc qu'a 4.10:1 : en aplat
   de bouton il passe donc sur la variante texte, mesuree a 5.56:1. Le jeton
   --sh-brand reste inchange, la charte partagee avec le back-office aussi. */
.sh-btn-primary {
    background: var(--sh-brand-text);
    color: #fff;
}

.sh-btn-primary:hover {
    background: var(--sh-deep);
    color: #fff;
}

.sh-btn-accent {
    background: var(--sh-aqua);
    color: #06324f;
}

.sh-btn-accent:hover {
    background: #0fb0d4;
    color: #06324f;
}

.sh-btn-ghost {
    background: transparent;
    color: var(--sh-deep);
    border-color: var(--sh-field-border);
}

.sh-btn-ghost:hover {
    border-color: var(--sh-brand);
    color: var(--sh-brand);
}

.sh-btn-light {
    background: #fff;
    color: var(--sh-deep);
    border-color: var(--sh-line);
}

.sh-btn-light:hover {
    border-color: var(--sh-brand);
    color: var(--sh-brand);
}

.sh-btn-outline-white {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

.sh-btn-outline-white:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* ===== Cartes ===== */
.sh-card {
    background: #fff;
    border: 1px solid var(--sh-line);
    border-radius: var(--sh-r-md);
}

.sh-card-hover {
    transition:
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.sh-card-hover:hover {
    box-shadow: var(--sh-shadow-hover);
    transform: translateY(-3px);
}

/* ===== Icon tile ===== */
.sh-icon-tile {
    width: 52px;
    height: 52px;
    border-radius: var(--sh-r-sm);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eaf4fb;
    color: var(--sh-brand-text);
    font-size: var(--sh-icon-md);
}

.sh-icon-tile-lg {
    width: 64px;
    height: 64px;
    border-radius: var(--sh-r-md);
    font-size: var(--sh-icon-lg);
}

/* ===== Média illustratif de carte (image + icône flottante) ===== */
.sh-media {
    position: relative;
    height: 190px;
    overflow: hidden;
    border-radius: var(--sh-r-md) var(--sh-r-md) 0 0;
    background: linear-gradient(
        135deg,
        var(--sh-deep) 0%,
        var(--sh-brand) 100%
    );
}

.sh-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Icône affichée sous l'image : visible si l'image ne charge pas (fallback). */
.sh-media-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.85);
    font-size: 2.6rem;
}

/* ===== Spinner (boutons en chargement) ===== */
.sh-spinner {
    display: inline-block;
    width: 15px;
    height: 15px;
    vertical-align: -2px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: shSpin 0.6s linear infinite;
}

@keyframes shSpin {
    to {
        transform: rotate(360deg);
    }
}

/* ===== Champs ===== */
.sh-field {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 14px;
    background: var(--sh-field);
    border: 1px solid var(--sh-field-border);
    border-radius: var(--sh-r-sm);
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.sh-field:focus-within {
    border-color: var(--sh-brand);
    box-shadow: 0 0 0 3px rgba(17, 132, 196, 0.13);
}

.sh-field input {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    font-size: 15px;
    color: var(--sh-ink);
}

.sh-field.is-invalid {
    border-color: var(--sh-danger);
    background: #fdf5f5;
}

.sh-field-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--sh-ink);
    margin-bottom: 8px;
    display: block;
}

/* ===== Header ===== */
.sh-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(250, 252, 253, 0.96);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--sh-line);
}

.sh-nav-link {
    font-size: 14.5px;
    font-weight: 600;
    color: #33475b;
    padding: 8px 4px;
    white-space: nowrap;
    position: relative;
    transition: color 0.15s ease;
}

.sh-nav-link:hover {
    color: var(--sh-brand);
}

.sh-nav-link.active {
    color: var(--sh-brand);
    font-weight: 700;
}

/* Indicateur d'onglet actif (barre sous l'élément).
   En ::before pour ne pas entrer en collision avec le chevron ::after
   des toggles de liste déroulante. */
.sh-nav-link.active::before {
    content: "";
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: -7px;
    height: 3px;
    border-radius: 3px;
    background: var(--sh-brand);
}

.sh-dropdown .dropdown-menu {
    border: 1px solid var(--sh-line);
    border-radius: var(--sh-r-md);
    box-shadow: var(--sh-shadow-float);
    padding: 8px;
    margin-top: 10px;
    min-width: 240px;
}

.sh-dropdown .dropdown-item {
    border-radius: var(--sh-r-sm);
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 600;
    color: #33475b;
}

.sh-dropdown .dropdown-item:hover {
    background: var(--sh-surface);
    color: var(--sh-brand);
}

.sh-dropdown .dropdown-item i {
    color: var(--sh-brand-text);
    width: 20px;
}

.sh-dropdown .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 11px;
    vertical-align: middle;
    margin-left: 4px;
}

/* Desktop : ouverture des listes déroulantes au survol (sans supprimer
   le clic, conservé pour le tactile en menu replié). Marge annulée pour
   que le survol reste continu entre l'onglet et le menu. */
@media (min-width: 992px) {
    .sh-dropdown:hover > .dropdown-menu {
        display: block;
    }

    .sh-dropdown > .dropdown-menu {
        margin-top: 0;
    }
}

/* ===== Footer ===== */
.sh-footer {
    background: var(--sh-footer);
}

/* Cinq colonnes sur une seule ligne : la marque, puis les quatre rubriques.
   La colonne de marque est la plus large, les quatre autres se partagent le
   reste a parts egales. `minmax(0, 1fr)` empeche un intitule long d elargir
   sa colonne et de faire deborder la rangee. */
.sh-foot-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(28px, 4vw, 44px);
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.sh-foot-brand {
    max-width: 340px;
}

@media (min-width: 576px) {
    .sh-foot-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .sh-foot-grid {
        grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr));
        gap: clamp(22px, 2.4vw, 40px);
    }
}

.sh-footer .sh-foot-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 16px;
    overflow-wrap: break-word;
}

.sh-footer a {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
}

.sh-footer a:hover {
    color: #fff;
}

.sh-footer .sh-foot-desc {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
}

.sh-footer .sh-foot-note {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

.sh-social {
    width: 38px;
    height: 38px;
    border-radius: var(--sh-r-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    transition: background 0.15s ease;
}

.sh-social:hover {
    background: var(--sh-brand);
    color: #fff;
}

/* ===== Bandeau titre de page ===== */
.sh-pagehead {
    background: var(--sh-deep);
    color: #fff;
}

.sh-pagehead .sh-eyebrow {
    color: var(--sh-aqua-text);
}

.sh-breadcrumb {
    font-size: 13px;
}

.sh-breadcrumb a {
    color: rgba(255, 255, 255, 0.65);
}

.sh-breadcrumb a:hover {
    color: #fff;
}

.sh-breadcrumb .sep {
    color: rgba(255, 255, 255, 0.35);
    margin: 0 8px;
}

.sh-breadcrumb .cur {
    color: #fff;
}

/* breadcrumb clair (pages sans bandeau sombre) */
.sh-crumb {
    font-size: 13px;
    color: var(--sh-body-soft);
}

.sh-crumb a {
    color: var(--sh-body-soft);
}

.sh-crumb a:hover {
    color: var(--sh-brand-text);
}

.sh-crumb .sep {
    margin: 0 8px;
    color: var(--sh-field-border);
}

@keyframes shRing {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(17, 132, 196, 0.35);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(17, 132, 196, 0);
    }
}

/* ===== Notifications flash (toasts) ===== */
.toast-container {
    z-index: 1090;
}

.toast {
    position: relative;
    min-width: 300px;
    max-width: min(380px, calc(100vw - 2rem));
    border-radius: var(--sh-r-md);
    box-shadow: var(--sh-shadow-float);
    overflow: hidden;
}

.toast-body {
    padding: 0.9rem 1rem;
    font-weight: 500;
}

.toast-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
}

.toast-success {
    background: var(--sh-ok);
    color: #fff;
}

.toast-error {
    background: var(--sh-danger);
    color: #fff;
}

.toast-info {
    background: var(--sh-brand-text);
    color: #fff;
}

.toast-warning {
    background: #fff6e3;
    color: var(--sh-warn);
}

.toast-warning .toast-icon {
    background: rgba(138, 90, 0, 0.14);
    color: var(--sh-warn);
}

.toast-success a,
.toast-error a,
.toast-info a {
    color: #fff;
}

.toast-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.6);
    animation: toastProgress linear forwards;
}

.toast-warning .toast-progress {
    background: rgba(138, 90, 0, 0.35);
}

/* Bootstrap met en pause son minuteur d'auto-hide au survol/focus du toast
   (comportement natif, volontaire) ; sans ceci la barre continuait de se
   vider normalement et affichait "terminé" alors que le toast restait
   affiché, son minuteur réel ayant été repoussé. */
.toast:hover .toast-progress,
.toast:focus-within .toast-progress {
    animation-play-state: paused;
}

@keyframes toastProgress {
    from {
        width: 100%;
    }

    to {
        width: 0%;
    }
}

/* ===== Galerie des colis en attente ===== */
.sh-gallery-head,
.sh-gallery {
    background: var(--sh-paper);
}

.sh-gallery-head-inner {
    padding: clamp(40px, 6vw, 72px) clamp(20px, 5vw, 40px)
        clamp(32px, 5vw, 48px);
}

.sh-gallery-inner {
    padding: 0 clamp(20px, 5vw, 40px) clamp(56px, 8vw, 90px);
}

.sh-gallery-title {
    font-size: clamp(30px, 4.5vw, 46px);
}

.sh-gallery-lead {
    max-width: 620px;
}

.sh-gallery-count {
    font-size: 14px;
    color: var(--sh-body-soft);
}

.sh-gallery-note {
    font-size: 13.5px;
    color: var(--sh-body-soft);
}

/* Etats vide et indisponible : une seule grande tuile, jamais repetee. */
.sh-icon-tile-xl {
    width: 72px;
    height: 72px;
    font-size: 1.7rem;
}

.sh-gallery-state-title {
    font-size: clamp(20px, 2.6vw, 26px);
}

.sh-gallery-state-text {
    max-width: 460px;
    font-size: 15px;
}

/* La carte entiere est un <label> : on coche en cliquant n'importe ou, sauf
   sur la photo, qui s'agrandit. */
.sh-parcel-card {
    overflow: hidden;
    cursor: pointer;
    border: 1px solid var(--sh-line-soft);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sh-parcel-card:hover {
    border-color: var(--sh-brand);
}

.sh-parcel-card.is-selected {
    border-color: var(--sh-brand);
    box-shadow: 0 0 0 2px var(--sh-brand) inset;
}

/* Le clavier doit voir la carte que la case masquee designe. */
.sh-parcel-card:focus-within {
    border-color: var(--sh-brand);
    box-shadow: 0 0 0 3px rgba(17, 132, 196, 0.25);
}

.sh-parcel-photo {
    height: 220px;
}

.sh-parcel-zoom {
    position: absolute;
    inset: 0;
    display: block;
    cursor: zoom-in;
}

/* Pastille de selection : posee sur la photo, elle suit l'etat de la case. */
.sh-parcel-tick {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #fff;
    background: rgba(14, 34, 51, 0.35);
    border: 2px solid rgba(255, 255, 255, 0.85);
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease;
    pointer-events: none;
}

.sh-parcel-card:hover .sh-parcel-tick {
    opacity: 0.55;
    transform: scale(1);
}

.sh-parcel-card.is-selected .sh-parcel-tick {
    opacity: 1;
    transform: scale(1);
    background: var(--sh-brand);
}

/* Attente de la photo : les originaux sont relayes un par un depuis un disque
   prive, le squelette tient la place plutot que de faire sauter la grille. */
.sh-parcel-photo.is-loading .sh-parcel-zoom {
    opacity: 0;
}

.sh-parcel-photo.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        rgba(255, 255, 255, 0) 20%,
        rgba(255, 255, 255, 0.28) 50%,
        rgba(255, 255, 255, 0) 80%
    );
    background-size: 220% 100%;
    animation: shParcelShimmer 1.3s ease-in-out infinite;
}

@keyframes shParcelShimmer {
    from {
        background-position: 160% 0;
    }

    to {
        background-position: -60% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sh-parcel-photo.is-loading::after {
        animation: none;
    }
}

.sh-gallery-hint {
    display: block;
    font-size: 13.5px;
    margin-top: 4px;
}

/* Barre de validation : posee en bas d'ecran tant qu'une selection est en
   cours, elle reste atteignable sans remonter la grille. */
.sh-claim-bar {
    position: sticky;
    bottom: 0;
    z-index: 30;
    margin-top: 28px;
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid var(--sh-line-soft);
    box-shadow: var(--sh-shadow-float);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.sh-claim-bar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 14px clamp(4px, 2vw, 16px);
}

.sh-claim-count {
    font-size: 14px;
    color: var(--sh-body);
}

.sh-claim-count strong {
    color: var(--sh-ink);
}

/* Miniature d'un colis déjà demandé : assez grande pour reconnaitre, assez
   petite pour en aligner plusieurs sur une ligne. */
.sh-parcel-mini {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    border-radius: var(--sh-r-sm);
    overflow: hidden;
    background: var(--sh-surface);
    color: var(--sh-muted);
    cursor: zoom-in;
}

.sh-parcel-mini img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sh-parcel-description {
    font-size: 14px;
    line-height: 1.55;
    color: var(--sh-ink);
}

/* Metadonnees d'une carte (date, bureau) separees par un point median plutot
   que par une icone : elles se repetent sur chaque carte de la grille. */
.sh-parcel-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 12.5px;
    color: var(--sh-body-soft);
}

.sh-parcel-meta span + span::before {
    content: "·";
    margin: 0 8px;
    color: var(--sh-field-border);
}

/* ===== Ecrans a formulaire centre (reception, inscription, espace client) ===== */
.sh-pagehead-inner {
    padding: clamp(40px, 6vw, 64px) clamp(20px, 5vw, 40px)
        clamp(80px, 10vw, 120px);
}

.sh-pagehead-title {
    font-family: var(--sh-font-title);
    font-weight: 700;
    font-size: clamp(30px, 4.5vw, 46px);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: #fff;
    max-width: 600px;
}

.sh-pagehead-lead {
    font-size: clamp(15px, 1.6vw, 17px);
    line-height: 1.6;
    color: #a9cfe6;
    max-width: 520px;
}

.sh-form-shell {
    max-width: 560px;
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 40px);
    transform: translateY(-56px);
}

.sh-form-card {
    border-radius: var(--sh-r-lg);
    box-shadow: var(--sh-shadow-float);
}

.sh-form-intro {
    font-size: 14.5px;
    line-height: 1.6;
    color: #5b6b7a;
}

.sh-field-error {
    color: var(--sh-danger);
    font-size: 12.5px;
    margin: 6px 0 0;
}

.sh-field-tall {
    height: 52px;
}

.sh-field-icon {
    color: var(--sh-muted);
    font-size: var(--sh-icon-sm);
}

/* Code d'acces receptionniste : l'alphabet genere est en majuscules, la saisie
   est donc affichee ainsi et espacee pour se relire chiffre par chiffre. */
.sh-input-code {
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.sh-form-note {
    font-size: 13.5px;
}

.sh-textarea {
    display: block;
    width: 100%;
    border: 1px solid var(--sh-field-border);
    border-radius: var(--sh-r-sm);
    background: var(--sh-field);
    padding: 12px 14px;
    font-size: 15px;
    color: var(--sh-ink);
    font-family: inherit;
}

.sh-textarea:focus {
    outline: none;
    border-color: var(--sh-brand);
    box-shadow: 0 0 0 3px rgba(17, 132, 196, 0.13);
}

.sh-textarea.is-invalid {
    border-color: var(--sh-danger);
    background: #fdf5f5;
}

/* ===== Zone de prise de photo (reception d'un colis) ===== */
/* Carre 1:1 : la photo d'un colis se cadre de face, et le format fixe evite
   que la page saute entre l'etat vide, le direct camera et l'apercu. */
.sh-capture {
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-align: center;
    padding: 24px;
    background: var(--sh-field);
    border: 1px dashed var(--sh-field-border);
    border-radius: var(--sh-r-md);
    transition:
        border-color 0.15s ease,
        background 0.15s ease;
}

.sh-capture:hover,
.sh-capture:focus-within {
    border-color: var(--sh-brand);
    background: #f3f9fd;
}

.sh-capture.is-invalid {
    border-color: var(--sh-danger);
    background: #fdf5f5;
}

/* L'input couvre toute la zone en transparence : il reste focusable et
   validable nativement, tout en rendant le carre entier cliquable. */
.sh-capture-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.sh-capture.is-busy .sh-capture-input {
    pointer-events: none;
}

.sh-capture-idle {
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

.sh-capture-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--sh-ink);
}

.sh-capture-hint {
    font-size: 12.5px;
    color: var(--sh-body-soft);
}

.sh-capture-preview,
.sh-capture-live {
    position: absolute;
    inset: 0;
}

.sh-capture-preview img,
.sh-capture-live video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sh-capture-live {
    background: #0e2233;
}

.sh-capture-filename {
    font-size: 12.5px;
    color: var(--sh-body-soft);
    margin: 8px 0 0;
    word-break: break-all;
}

.sh-capture-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.sh-capture-actions .sh-btn {
    flex: 1 1 auto;
    padding: 11px 16px;
    font-size: 14px;
}

@media (max-width: 400px) {
    .sh-capture-actions .sh-btn {
        flex-basis: 100%;
    }
}

/* ===== Bandeau de chiffres de l'accueil =====
   Grille dediee : la valeur porte la police de titre, le libelle reste en
   Inter pour ne pas rivaliser avec elle. */
.sh-stat-value {
    font-size: clamp(22px, 2.6vw, 28px);
}

.sh-stat-label {
    font-size: 13.5px;
    color: var(--sh-body-soft);
    margin-top: 6px;
}

/* ===== Etapes numerotees (« Comment ca marche ») =====
   Liste, pas quatre cartes de gabarit identique : le numero porte la
   hierarchie, un filet separe les etapes, et la premiere colonne garde une
   largeur fixe pour que les numeros s'alignent. */
.sh-steps {
    display: grid;
    gap: 0;
    counter-reset: sh-step;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sh-step {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: clamp(12px, 2vw, 24px);
    align-items: baseline;
    padding: clamp(18px, 2.5vw, 26px) 0;
    border-top: 1px solid var(--sh-line);
}

.sh-step:first-child {
    border-top: 0;
    padding-top: 0;
}

.sh-step-num {
    font-family: var(--sh-font-title);
    font-weight: 700;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1;
    color: var(--sh-line-soft);
    font-variant-numeric: tabular-nums;
}

.sh-step-body {
    max-width: 62ch;
}

.sh-step-title {
    font-family: var(--sh-font-title);
    font-weight: 700;
    font-size: 17px;
    color: var(--sh-ink);
    margin: 0 0 4px;
}

.sh-step-text {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--sh-body);
    margin: 0;
}

@media (max-width: 575px) {
    .sh-step {
        grid-template-columns: 44px 1fr;
    }
}

/* ===== Carte itineraire de l'accueil =====
   Resume statique : elle n'annonce plus de temps reel qu'elle ne peut pas
   tenir. Les deux delais viennent des reglages du back-office. */
.sh-route {
    overflow: hidden;
}

.sh-route-head {
    background: var(--sh-deep);
    color: #fff;
    padding: 16px 22px;
    font-family: var(--sh-font-title);
    font-weight: 700;
    font-size: 15px;
}

.sh-route-body {
    padding: 24px 22px 10px;
}

.sh-route-city {
    font-family: var(--sh-font-title);
    font-weight: 700;
    font-size: 28px;
    color: var(--sh-ink);
    line-height: 1;
}

.sh-route-place {
    font-size: 12.5px;
    color: var(--sh-body-soft);
    margin-top: 6px;
}

.sh-route-country {
    font-size: 11.5px;
    color: var(--sh-muted);
}

/* Trait de liaison : un filet continu, pas un pointille anime. */
.sh-route-link {
    flex: 1;
    height: 1px;
    background: var(--sh-line-soft);
    margin: 0 14px;
}

.sh-route-mode {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 0;
    border-top: 1px solid var(--sh-line);
}

.sh-route-mode-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--sh-ink);
}

.sh-route-mode-note {
    font-size: 12.5px;
    color: var(--sh-body-soft);
}

.sh-route-delay {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--sh-deep);
    white-space: nowrap;
}

/* ===== Arguments en ligne (accueil) =====
   Texte simple : la coche est reservee aux validations reelles (frise de
   suivi, confirmation d'inscription). */
.sh-points {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

.sh-point {
    font-size: 15px;
    color: var(--sh-ink);
    padding-left: 16px;
    position: relative;
}

.sh-point::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 6px;
    height: 1px;
    background: var(--sh-brand);
}

/* ===== Pages legales ===== */
.sh-legal {
    max-width: 760px;
}

.sh-legal h2 {
    font-size: 21px;
    font-weight: 700;
    margin: 40px 0 10px;
}

.sh-legal h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 24px 0 6px;
}

.sh-legal p,
.sh-legal li {
    font-size: 15px;
    line-height: 1.65;
    color: var(--sh-body);
}

.sh-legal ul {
    padding-left: 20px;
}

.sh-legal li {
    margin-bottom: 6px;
}

/* Marqueur des informations que seul le client peut fournir. Volontairement
   visible : il doit sauter aux yeux a la relecture juridique. */
.sh-todo {
    background: #fff6e3;
    border-bottom: 1px solid rgba(138, 90, 0, 0.35);
    color: var(--sh-warn);
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
}

.sh-legal-note {
    font-size: 13.5px;
    color: var(--sh-body-soft);
}

/* ===== Mention de finalite sous un formulaire ===== */
.sh-form-legal {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--sh-body-soft);
    margin: 14px 0 0;
}

.sh-cta-final {
    padding: clamp(48px, 7vw, 80px) clamp(20px, 5vw, 40px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 32px;
    align-items: center;
}