/* ==========================================================================
   Winning Express — landing publique
   Hero, widget de suivi, grille des tarifs par ville, page /suivi/{code}.

   S'appuie sur les jetons du template Logistick (main.css) : --main-600 (rouge),
   --main-two-600 / --main-two-900 (bleu nuit), --heading-font (Satoshi).
   ⚠️ Le rouge du template (≈ #DF1118) tient 4,97:1 sous un texte blanc ; l'ancien
   #e52d27 codé en dur n'en tenait que 4,43 — sous le seuil AA pour un bouton.
   ========================================================================== */

:root {
    --we-red: var(--main-600);
    --we-red-700: var(--main-700);
    --we-navy: var(--main-two-600);
    --we-navy-900: var(--main-two-900);
    --we-muted-on-dark: #B0B8C4;
    --we-border: #E5E7EB;
    --we-text: #1F2937;
    --we-text-soft: #4B5563;
    --we-ease: 200ms ease;
    --we-shadow-card: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 15px rgba(0, 0, 0, 0.1);
}

/* Absente du template : laisse un enfant flex rétrécir au lieu de déborder. */
.min-w-0 {
    min-width: 0;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.we-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: 230px 96px;
    background:
        radial-gradient(ellipse 55% 45% at 90% 15%, hsl(var(--main) / 0.16), transparent 70%),
        radial-gradient(ellipse 50% 60% at 0% 100%, hsl(var(--main-two-h) 70% 28% / 0.45), transparent 70%),
        var(--we-navy-900);
}

/* L'en-tête du template est POSÉ sur le hero (position absolue, ≈ 255 px en
   desktop) : le haut du hero lui laisse sa hauteur + 32 px d'air, sinon le badge
   passe sous la navigation. */
@media (min-width: 992px) {
    .we-hero {
        padding-top: 288px;
    }
}

/* En mobile, l'en-tête empile bandeau + logo + barre « Inscription » (≈ 222 px). */
@media (max-width: 991.98px) {
    .we-hero {
        padding-block: 252px 64px;
    }
}

/* ── Conteneur : 1 540 px max (≈ max-w-screen-2xl), CALÉ sur celui de l'en-tête
   pour que le titre s'aligne sur le logo. Marges latérales progressives :
   16 px (conteneur) → 24 → 40 → 56 px, l'équivalent de px-4 sm:px-6 lg:px-10 xl:px-14. */
@media (min-width: 576px) {
    .we-hero-inner {
        padding-inline: 0.5rem;
    }
}

@media (min-width: 992px) {
    .we-hero-inner {
        padding-inline: 1.5rem;
    }
}

@media (min-width: 1200px) {
    .we-hero-inner {
        padding-inline: 2.5rem;
    }
}

/* ── Grille : une colonne, puis deux colonnes ÉGALES dès 992 px.
   `minmax(0, 1fr)` et non `1fr` : une colonne `1fr` ne descend pas sous la
   largeur de son contenu (le titre), et ferait déborder la grille.
   `stretch` (pas `center`) : le visuel prend la hauteur EXACTE de la colonne de
   texte ; c'est le texte qui se centre dans sa colonne. */
.we-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
    align-items: stretch;
}

@media (min-width: 992px) {
    .we-hero-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 3rem;
    }
}

@media (min-width: 1400px) {
    .we-hero-grid {
        gap: 4rem;
    }
}

.we-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.we-hero-media {
    min-width: 0;
}

.we-hero-badge {
    display: inline-flex;
    align-self: flex-start; /* sa largeur naturelle, pas celle de la colonne flex */
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    padding: 0.5rem 1.125rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
    font-size: 0.875rem;
    font-weight: 600;
}

/* Point de statut : sa forme EST l'information. */
.we-hero-badge__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--we-red);
    flex-shrink: 0;
}

/* Typographie FLUIDE, en largeur ET en hauteur.
   · plancher 2,25 rem (36 px ≈ text-4xl) en mobile, plafond 4,5 rem (72 px ≈ text-7xl) ;
   · entre les deux, la PLUS PETITE de deux tailles : 1 rem + 3 vw (suit la largeur)
     et 7,2 vh (suit la HAUTEUR). Indexé sur la seule largeur, le titre restait à
     68 px sur un portable de 657 px de haut : il repoussait les boutons et le
     widget de suivi sous le bord de l'écran.
   · graisse 800 (font-extrabold) : Satoshi n'a pas de 800, le navigateur prend le
     900 « Black » chargé par le template ;
   · interlignage 1,06 et non `leading-tight` (1,25) : à 70 px, 1,25 écarte les
     lignes de 17 px et allonge le bloc de 40 px — les titres d'affichage se
     composent serrés (Tailwind donne d'ailleurs 1 à text-6xl/7xl). */
.we-hero-title {
    margin-bottom: 1.25rem;
    color: #FFFFFF;
    font-size: clamp(2.25rem, min(1rem + 3vw, 7.2vh), 4.5rem);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.we-hero-title__accent {
    color: var(--we-red);
}

/* Sous-titre : 16 px → 18 px (text-base → text-lg), graisse 500, gris clair
   (#D1D5DB ≈ text-gray-300, 12:1 sur le bleu nuit). Plafonné à 18 px et non 20
   (text-xl) : à 20 px la phrase passe sur TROIS lignes et le widget repasse
   sous le bord d'un écran 1080p. 38 rem de large ≈ 65 caractères par ligne. */
.we-hero-lead {
    max-width: 38rem;
    margin-bottom: 1.75rem;
    color: #D1D5DB;
    font-size: clamp(1rem, 0.9rem + 0.3vw, 1.125rem);
    font-weight: 500;
    line-height: 1.6;
}

/* 48 px d'air avant le widget : sa pastille rouge en déborde de 20 px vers le haut. */
.we-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
    margin-bottom: 3rem;
}

/* Survol des boutons : agrandissement de 5 % en 300 ms (hover:scale-105 duration-300). */
.we-cta,
.we-cta-outline,
.we-track-btn {
    transition: transform 300ms ease, box-shadow 300ms ease, background-color 300ms ease, border-color 300ms ease;
}

.we-cta:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 26px -10px hsl(var(--main) / 0.65);
}

.we-cta:active {
    transform: scale(0.98);
}

.we-cta-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 1.75rem;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 9999px;
    color: #FFFFFF;
    font-weight: 600;
}

.we-cta-outline:hover,
.we-cta-outline:focus-visible {
    border-color: #FFFFFF;
    background-color: rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
}

.we-cta-outline:hover {
    transform: scale(1.05);
}

.we-cta-outline:active {
    transform: scale(0.98);
}

.we-hero a:focus-visible,
.we-hero button:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 3px;
}

/* ── Visuel droit ─────────────────────────────────────────────────────────── */
.we-hero-visual {
    position: relative;
    height: 100%;
    min-height: 440px;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}

/* Un PLANCHER seulement : la grille étire le visuel à la hauteur de la colonne
   de texte, et `object-fit: cover` recadre la photo au lieu de la déformer. */
@media (min-width: 992px) {
    .we-hero-visual {
        min-height: 540px;
    }
}

.we-hero-visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 42% center;
}

.we-hero-visual__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top,
            hsl(var(--main-two-h) var(--main-two-s) 7% / 0.94) 0%,
            hsl(var(--main-two-h) var(--main-two-s) 7% / 0.55) 30%,
            transparent 60%),
        linear-gradient(to right, hsl(var(--main-two-h) var(--main-two-s) 7% / 0.35), transparent 45%);
}

.we-hero-guarantee {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    right: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    max-width: 21rem;
    padding: 0.875rem 1rem;
    border-radius: 16px;
    background: #FFFFFF;
    /* Ombre douce et diffuse : le badge « flotte » au-dessus de la photo. */
    box-shadow:
        0 1px 2px rgba(2, 12, 27, 0.06),
        0 14px 34px -10px rgba(2, 12, 27, 0.45);
    animation: we-pulse 2.8s ease-in-out infinite;
}

.we-hero-guarantee__icon {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--we-red);
    color: #FFFFFF;
    font-size: 1.375rem;
    flex-shrink: 0;
}

.we-hero-guarantee__title {
    margin: 0;
    color: var(--we-navy);
    font-size: 0.9375rem;
    font-weight: 700;
}

.we-hero-guarantee__text {
    margin: 0.125rem 0 0;
    color: var(--we-text-soft);
    font-size: 0.8125rem;
    line-height: 1.4;
}

@keyframes we-pulse {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 1; }
}

.we-hero-stats {
    position: absolute;
    left: 1.25rem;
    right: 1.25rem;
    bottom: 1.25rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.we-hero-stat {
    min-width: 0;
    padding: 0.875rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #FFFFFF;
}

.we-hero-stat__value {
    display: block;
    font-family: var(--heading-font);
    font-size: clamp(1.125rem, 0.85rem + 1.1vw, 1.75rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    white-space: nowrap;
}

.we-hero-stat__label {
    display: block;
    margin-top: 0.25rem;
    color: #D5DAE1;
    font-size: 0.8125rem;
    line-height: 1.3;
}

@media (max-width: 479.98px) {
    .we-hero-visual {
        min-height: 400px;
    }

    .we-hero-guarantee {
        top: 0.875rem;
        left: 0.875rem;
        right: 0.875rem;
    }

    .we-hero-stats {
        left: 0.875rem;
        right: 0.875rem;
        bottom: 0.875rem;
        gap: 0.5rem;
    }

    .we-hero-stat {
        padding: 0.75rem 0.625rem;
    }

    .we-hero-stat__label {
        font-size: 0.75rem;
    }
}

/* ==========================================================================
   SECTION « NOS SERVICES » — espacement seul (remplace `pt-140` du template)
   `pt-140` valait 80 → 110 → 140 px EN HAUT et rien en bas : trop d'air au-dessus
   du titre, et des descriptions collées au changement de fond de la section suivante.
   Le template n'offre pas de variante responsive de ses `tw-pt-*` : d'où cette classe.
   ========================================================================== */
.we-services {
    padding-block: 3rem 4rem;           /* mobile : 48 px / 64 px */
}

@media (min-width: 768px) {
    .we-services {
        padding-block: 4rem 5rem;       /* tablette : 64 px / 80 px */
    }
}

@media (min-width: 992px) {
    .we-services {
        padding-block: 5rem 6rem;       /* desktop : 80 px / 96 px */
    }
}

/* Camion en filigrane (remplace l'avion du template : l'agence livre par la route).
   Gris très clair, comme l'avion d'origine, et logé dans l'espace bas, SOUS les
   descriptions — un camion rouge pleine teinte y aurait concurrencé les cartes. */
.we-services__filigrane {
    width: 56px;
    height: auto;
    margin: 0 0 0.5rem 1rem;
    filter: grayscale(1);
    opacity: 0.18;
    pointer-events: none;
}

@media (min-width: 992px) {
    .we-services__filigrane {
        width: 76px;
        margin: 0 0 1rem 1.5rem;
    }
}

/* ==========================================================================
   WIDGET DE SUIVI
   ========================================================================== */
.we-track-card {
    position: relative;
    max-width: 40rem;
    padding: 1.75rem 1.5rem 1.375rem;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: var(--we-shadow-card);
}

.we-track-card__pin {
    position: absolute;
    top: -1.25rem;
    left: 1.5rem;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--we-red);
    color: #FFFFFF;
    font-size: 1.25rem;
    box-shadow: 0 6px 14px -4px hsl(var(--main) / 0.6);
}

.we-track-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.we-track-card__label {
    margin: 0;
    color: var(--we-navy);
    font-family: var(--body-font);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.we-track-card__live {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    background: #F3F4F6;
    color: #374151;
    font-size: 0.75rem;
    font-weight: 500;
}

/* Point « en direct » : sa forme EST l'information. */
.we-track-card__live-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #16A34A;
}

.we-track-form {
    display: flex;
    gap: 0.625rem;
}

@media (max-width: 575.98px) {
    .we-track-form {
        flex-direction: column;
    }
}

.we-track-input,
.we-search-input {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--we-border);
    border-radius: 12px;
    background: #FFFFFF;
    color: #111827;
    font-size: 1rem;
    transition: border-color var(--we-ease), box-shadow var(--we-ease);
}

.we-track-input {
    flex: 1 1 auto;
    height: 48px; /* même hauteur que « Suivre » */
    padding: 0 1rem;
}

.we-track-input::placeholder,
.we-search-input::placeholder {
    color: #6B7280;
}

/* Anneau rouge de 2px (bordure + 1px d'ombre pleine), puis l'ombre portée. */
.we-track-input:focus,
.we-search-input:focus {
    outline: none;
    border-color: var(--we-red);
    box-shadow: 0 0 0 1px var(--we-red), 0 8px 20px -10px hsl(var(--main) / 0.55);
}

.we-track-input[aria-invalid="true"] {
    border-color: #DC2626;
}

.we-track-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    height: 48px; /* h-12, aligné sur le champ */
    padding: 0 1.5rem; /* px-6 */
    border: 0;
    border-radius: 12px;
    background: var(--we-red);
    color: #FFFFFF;
    font-weight: 700;
}

.we-track-btn:hover {
    background: var(--we-red-700);
    transform: scale(1.05);
    box-shadow: 0 10px 22px -10px hsl(var(--main) / 0.7);
}

.we-track-btn:active {
    transform: scale(0.98);
}

.we-track-btn:focus-visible {
    outline: 2px solid var(--we-navy);
    outline-offset: 2px;
}

.we-track-btn[aria-busy="true"] {
    cursor: progress;
    transform: none;
}

.we-track-btn__spinner {
    display: none;
    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: we-spin 0.7s linear infinite;
}

.we-track-btn[aria-busy="true"] .we-track-btn__spinner {
    display: inline-block;
}

.we-track-btn[aria-busy="true"] .we-track-btn__icon {
    display: none;
}

@keyframes we-spin {
    to { transform: rotate(360deg); }
}

.we-track-help {
    margin: 0.625rem 0 0;
    color: #6B7280;
    font-size: 0.8125rem;
}

/* ==========================================================================
   GRILLE DES TARIFS PAR VILLE
   ========================================================================== */
.we-tarifs-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.we-tarifs-search {
    position: relative;
    flex: 1 1 18rem;
    max-width: 26rem;
}

.we-tarifs-search__icon {
    position: absolute;
    top: 50%;
    left: 1rem;
    color: #6B7280;
    transform: translateY(-50%);
    pointer-events: none;
}

.we-search-input {
    height: 48px;
    padding: 0 1rem 0 2.75rem;
}

.we-tarifs-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.we-chip {
    height: 40px;
    padding: 0 1rem;
    border: 1px solid var(--we-border);
    border-radius: 9999px;
    background: #FFFFFF;
    color: #374151;
    font-size: 0.875rem;
    font-weight: 600;
    transition: border-color var(--we-ease), color var(--we-ease), background-color var(--we-ease);
}

.we-chip:hover {
    border-color: var(--we-red);
    color: var(--we-red);
}

.we-chip[aria-pressed="true"] {
    border-color: var(--we-navy);
    background: var(--we-navy);
    color: #FFFFFF;
}

.we-chip:focus-visible,
.we-pager__btn:focus-visible,
.we-btn-order:focus-visible {
    outline: 2px solid var(--we-navy);
    outline-offset: 2px;
}

.we-tarifs-card {
    overflow: hidden;
    border: 1px solid var(--we-border);
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03), 0 10px 15px -5px rgba(0, 0, 0, 0.06);
}

.we-tarifs-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

.we-tarifs-table thead th {
    padding: 1rem 1.25rem;
    background: var(--we-navy);
    color: #FFFFFF;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.we-tarifs-table th:nth-child(3),
.we-tarifs-table td:nth-child(3),
.we-tarifs-table th:nth-child(4),
.we-tarifs-table td:nth-child(4) {
    text-align: right;
}

.we-tarifs-table tbody td {
    padding: 0.875rem 1.25rem;
    border-top: 1px solid #F1F2F4;
    color: var(--we-text);
    vertical-align: middle;
}

.we-tarifs-table tbody td:first-child {
    font-weight: 600;
}

/* Lignes alternées comptées sur les lignes VISIBLES : filtrer ne casse pas l'alternance. */
.we-tarifs-table tbody tr:nth-child(even of :not([hidden])) td {
    background: #F9FAFB;
}

.we-tarifs-table tbody tr:hover td {
    background: hsl(var(--main) / 0.05);
}

.we-tarifs-table tbody tr[hidden] {
    display: none !important;
}

.we-prix {
    color: var(--we-navy);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.we-prix small {
    margin-left: 0.125rem;
    color: var(--we-text-soft);
    font-size: 0.75rem;
    font-weight: 600;
}

.we-delai {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.we-delai--24h   { background: #ECFDF3; color: #067647; box-shadow: inset 0 0 0 1px #ABEFC6; }
.we-delai--48h   { background: #FFF6ED; color: #B93815; box-shadow: inset 0 0 0 1px #FDDCAB; }
.we-delai--72h   { background: #F2F4F7; color: #344054; box-shadow: inset 0 0 0 1px #D0D5DD; }
.we-delai--jours { background: #EFF4FF; color: #1849A9; box-shadow: inset 0 0 0 1px #C7D7FE; }
.we-delai--nc    { background: #FFFFFF; color: #667085; box-shadow: inset 0 0 0 1px #E4E7EC; }

.we-btn-order {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 36px;
    padding: 0 0.875rem;
    border: 1px solid var(--we-red);
    border-radius: 9999px;
    background: transparent;
    color: var(--we-red);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color var(--we-ease), color var(--we-ease), transform var(--we-ease);
}

.we-btn-order:hover,
.we-btn-order:focus-visible {
    background: var(--we-red);
    color: #FFFFFF;
}

.we-btn-order:active {
    transform: scale(0.98);
}

.we-tarifs-empty {
    padding: 2.5rem 1.25rem;
    color: var(--we-text-soft);
    text-align: center;
}

.we-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
}

.we-pager__info {
    margin: 0;
    color: #475467;
    font-size: 0.875rem;
}

.we-pager__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.we-pager__btn {
    min-width: 40px;
    height: 40px;
    padding: 0 0.75rem;
    border: 1px solid var(--we-border);
    border-radius: 10px;
    background: #FFFFFF;
    color: #344054;
    font-size: 0.875rem;
    font-weight: 600;
    transition: border-color var(--we-ease), color var(--we-ease), background-color var(--we-ease);
}

.we-pager__btn:hover:not(:disabled):not([aria-current="page"]) {
    border-color: var(--we-red);
    color: var(--we-red);
}

.we-pager__btn[aria-current="page"] {
    border-color: var(--we-red);
    background: var(--we-red);
    color: #FFFFFF;
}

.we-pager__btn:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.we-tarifs-note {
    margin: 1.25rem 0 0;
    color: var(--we-text-soft);
    font-size: 0.875rem;
}

/* Mobile : chaque ville devient une carte (ville + prix / délai + action). */
@media (max-width: 639.98px) {
    .we-tarifs-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .we-tarifs-table,
    .we-tarifs-table tbody {
        display: block;
    }

    .we-tarifs-table tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "ville prix"
            "delai action";
        gap: 0.625rem 0.75rem;
        align-items: center;
        padding: 1rem;
        border-top: 1px solid #F1F2F4;
    }

    .we-tarifs-table tbody tr:first-child {
        border-top: 0;
    }

    .we-tarifs-table tbody td {
        display: block;
        padding: 0;
        border: 0;
        background: transparent !important;
    }

    .we-tarifs-table tbody tr:nth-child(even of :not([hidden])) {
        background: #F9FAFB;
    }

    .we-tarifs-table tbody td:nth-child(1) { grid-area: ville; min-width: 0; }
    .we-tarifs-table tbody td:nth-child(2) { grid-area: delai; }
    .we-tarifs-table tbody td:nth-child(3) { grid-area: prix; }
    .we-tarifs-table tbody td:nth-child(4) { grid-area: action; }

    .we-tarifs-table tbody td.we-tarifs-empty {
        grid-column: 1 / -1;
    }

    .we-tarifs-search {
        max-width: none;
    }
}

/* ==========================================================================
   PAGE DE SUIVI /suivi/{code}
   ========================================================================== */
.we-suivi-top {
    padding-block: 1.25rem 7rem;
    background:
        radial-gradient(ellipse 55% 60% at 90% 0%, hsl(var(--main) / 0.16), transparent 70%),
        var(--we-navy-900);
    color: #FFFFFF;
}

.we-suivi-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 3rem;
}

.we-suivi-bar__logo {
    display: inline-block;
    width: 170px;
}

.we-suivi-bar__logo img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 50px;
    object-fit: contain;
}

.we-suivi-bar__back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #FFFFFF;
    font-weight: 600;
}

.we-suivi-bar__back:hover,
.we-suivi-bar__back:focus-visible {
    color: #FFFFFF;
    text-decoration: underline;
}

.we-suivi-top h1 {
    margin-bottom: 0.5rem;
    color: #FFFFFF;
    font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
}

.we-suivi-top p {
    margin: 0;
    color: var(--we-muted-on-dark);
}

.we-suivi-main {
    margin-top: -5rem;
    padding-bottom: 5rem;
}

/* Une seule colonne pour l'en-tête et la carte : titre et logo alignés sur elle. */
.we-suivi-colonne {
    max-width: 860px;
}

.we-suivi-card {
    overflow: hidden;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: var(--we-shadow-card);
}

.we-suivi-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--we-navy);
    color: #FFFFFF;
}

.we-suivi-card__ref {
    display: block;
    color: var(--we-muted-on-dark);
    font-size: 0.8125rem;
}

.we-suivi-card__code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.25rem;
    font-weight: 700;
    word-break: break-all;
}

.we-statut {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 700;
}

.we-statut--neutre    { background: #F2F4F7; color: #344054; }
.we-statut--info      { background: #EFF4FF; color: #1849A9; }
.we-statut--succes    { background: #ECFDF3; color: #067647; }
.we-statut--attention { background: #FFF6ED; color: #B93815; }
.we-statut--danger    { background: #FEF3F2; color: #B42318; }

.we-suivi-card__body {
    padding: 1.75rem 1.5rem;
}

.we-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.we-step {
    position: relative;
    padding: 0 0.25rem;
    color: #667085;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
}

/* Le trait qui relie une étape à la précédente. */
.we-step + .we-step::before {
    position: absolute;
    top: 1.25rem;
    right: 50%;
    width: 100%;
    height: 2px;
    background: var(--we-border);
    content: "";
    z-index: 0;
}

.we-step.is-done + .we-step::before,
.we-step.is-done + .we-step.is-current::before {
    background: var(--we-red);
}

/* Pastille d'étape : sa forme EST l'information. */
.we-step__dot {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 auto 0.625rem;
    border: 2px solid var(--we-border);
    border-radius: 50%;
    background: #FFFFFF;
    color: #98A2B3;
    font-size: 1.125rem;
}

.we-step.is-done,
.we-step.is-current {
    color: var(--we-navy);
}

.we-step.is-done .we-step__dot {
    border-color: var(--we-red);
    background: var(--we-red);
    color: #FFFFFF;
}

.we-step.is-current .we-step__dot {
    border-color: var(--we-red);
    color: var(--we-red);
    box-shadow: 0 0 0 4px hsl(var(--main) / 0.12);
}

.we-step.is-warning {
    color: #B54708;
}

.we-step.is-warning .we-step__dot {
    border-color: #DC6803;
    background: #DC6803;
    color: #FFFFFF;
}

.we-suivi-infos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.we-suivi-info {
    padding: 1rem 1.125rem;
    border: 1px solid var(--we-border);
    border-radius: 12px;
    background: #F9FAFB;
}

.we-suivi-info dt {
    margin-bottom: 0.25rem;
    color: var(--we-text-soft);
    font-size: 0.8125rem;
    font-weight: 500;
}

.we-suivi-info dd {
    margin: 0;
    color: var(--we-text);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.we-suivi-section-title {
    margin-bottom: 1rem;
    color: var(--we-navy);
    font-family: var(--body-font);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.we-timeline {
    margin: 0;
    padding: 0;
    list-style: none;
}

.we-timeline__item {
    position: relative;
    padding: 0 0 1.25rem 1.75rem;
}

.we-timeline__item:not(:last-child)::after {
    position: absolute;
    top: 1rem;
    bottom: 0;
    left: 0.4375rem;
    width: 2px;
    background: var(--we-border);
    content: "";
}

/* Point de chronologie : sa forme EST l'information. */
.we-timeline__item::before {
    position: absolute;
    top: 0.3125rem;
    left: 0.125rem;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: #D0D5DD;
    content: "";
}

.we-timeline__item:first-child::before {
    background: var(--we-red);
    box-shadow: 0 0 0 4px hsl(var(--main) / 0.15);
}

.we-timeline__etat {
    display: block;
    color: var(--we-text);
    font-weight: 600;
}

.we-timeline__date {
    display: block;
    color: #667085;
    font-size: 0.8125rem;
}

.we-suivi-aide {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--we-border);
    background: #F9FAFB;
    color: var(--we-text-soft);
    font-size: 0.9375rem;
}

.we-suivi-aide a {
    color: var(--we-red);
    font-weight: 700;
}

.we-suivi-vide {
    padding: 2.5rem 1.5rem;
    text-align: center;
}

.we-suivi-vide__icon {
    display: inline-grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: #FEF3F2;
    color: #B42318;
    font-size: 1.75rem;
}

/* Enfants DIRECTS : le widget de suivi imbriqué garde ses propres titres et textes. */
.we-suivi-vide > h2 {
    margin-bottom: 0.5rem;
    font-size: 1.375rem;
}

.we-suivi-vide > p {
    max-width: 32rem;
    margin: 0 auto 2.5rem;
    color: var(--we-text-soft);
}

.we-suivi-vide .we-track-card {
    margin-inline: auto;
    text-align: left;
}

/* ==========================================================================
   TOASTS (composant .toast de Bootstrap)
   ========================================================================== */
.we-toasts {
    z-index: 1090;
}

.we-toast {
    border: 0;
    border-left: 4px solid var(--we-red);
    border-radius: 12px;
    box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.35);
}

.we-toast--info {
    border-left-color: var(--we-navy);
}

.we-toast .toast-body {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: var(--we-text);
    font-size: 0.9375rem;
}

.we-toast .toast-body i {
    margin-top: 0.125rem;
    color: var(--we-red);
    font-size: 1.25rem;
}

.we-toast--info .toast-body i {
    color: var(--we-navy);
}

/* ==========================================================================
   Mouvement réduit
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .we-hero-guarantee {
        animation: none;
        opacity: 1;
    }

    .we-cta:hover,
    .we-track-btn:hover,
    .we-cta:active,
    .we-track-btn:active,
    .we-btn-order:active {
        transform: none;
    }
}