{"id":901,"date":"2025-06-09T15:06:06","date_gmt":"2025-06-09T15:06:06","guid":{"rendered":"https:\/\/afcomauritania.com\/?page_id=901"},"modified":"2025-07-09T18:16:03","modified_gmt":"2025-07-09T18:16:03","slug":"suivi-de-commande","status":"publish","type":"page","link":"https:\/\/afcomauritania.com\/en\/home\/suivi-de-commande\/","title":{"rendered":"Suivi de commande"},"content":{"rendered":"<p><!-- HTML Content - Paste this in WordPress Custom HTML Block --><\/p>\n<div id=\"afco-order-tracking\">\n<div class=\"afco-tracking-form\">\n        <!-- Header Section --><\/p>\n<header class=\"afco-header\">\n<h2 class=\"afco-main-title\">\n                Suivi de Votre Commande<br \/>\n                <span class=\"afco-brand\">AFCO<\/span><br \/>\n            <\/h2>\n<p class=\"afco-subtitle\">\n                Entrez votre num\u00e9ro de suivi pour consulter l&rsquo;\u00e9tat de votre commande en temps r\u00e9el.\n            <\/p>\n<\/header>\n<p>        <!-- Input Section --><\/p>\n<section class=\"afco-input-section\">\n<div class=\"afco-input-group\">\n<div class=\"afco-input-wrapper\">\n                    <input \n                        type=\"text\" \n                        id=\"afco-suivi-input\" \n                        class=\"afco-input\"\n                        placeholder=\"AFCO1234567\" \n                        maxlength=\"11\"\n                        autocomplete=\"off\"\n                        spellcheck=\"false\"\n                    >\n                <\/div>\n<p>                <button id=\"afco-track-btn\" class=\"afco-track-button\"><br \/>\n                    <span class=\"afco-btn-text\">Suivre<\/span><br \/>\n                <\/button>\n            <\/div>\n<\/section>\n<p>        <!-- Status Messages --><\/p><\/div>\n<p>    <!-- Results Section --><\/p>\n<div id=\"afco-result\" class=\"afco-result\"><\/div>\n<\/div>\n<style>\n\/* ===== VARIABLES CSS ===== *\/\n:root {\n    \/* Couleurs principales *\/\n    --afco-primary: #2563eb;\n    --afco-primary-dark: #1d4ed8;\n    --afco-primary-light: #3b82f6;\n    --afco-secondary: #64748b;\n    --afco-accent: #0ea5e9;<\/p>\n<p>    \/* \u00c9tats *\/\n    --afco-success: #10b981;\n    --afco-warning: #f59e0b;\n    --afco-error: #ef4444;\n    --afco-info: #06b6d4;<\/p>\n<p>    \/* Surfaces *\/\n    --afco-background: #f8fafc;\n    --afco-surface: #ffffff;\n    --afco-surface-elevated: #f1f5f9;\n    --afco-border: #e2e8f0;\n    --afco-border-light: #f1f5f9;<\/p>\n<p>    \/* Texte *\/\n    --afco-text-primary: #3a41a1;\n    --afco-text-secondary: #64748b;\n    --afco-text-muted: #94a3b8;\n    --afco-text-inverse: #ffffff;<\/p>\n<p>    \/* Ombres *\/\n    --afco-shadow-sm: 0 1px 2px 0 rgb(0 0 0 \/ 0.05);\n    --afco-shadow-md: 0 4px 6px -1px rgb(0 0 0 \/ 0.1), 0 2px 4px -2px rgb(0 0 0 \/ 0.1);\n    --afco-shadow-lg: 0 10px 15px -3px rgb(0 0 0 \/ 0.1), 0 4px 6px -4px rgb(0 0 0 \/ 0.1);\n    --afco-shadow-xl: 0 20px 25px -5px rgb(0 0 0 \/ 0.1), 0 8px 10px -6px rgb(0 0 0 \/ 0.1);<\/p>\n<p>    \/* Rayons de bordure *\/\n    --afco-radius-sm: 6px;\n    --afco-radius: 8px;\n    --afco-radius-md: 12px;\n    --afco-radius-lg: 16px;\n    --afco-radius-xl: 20px;<\/p>\n<p>    \/* Espacement *\/\n    --afco-space-xs: 0.5rem;\n    --afco-space-sm: 0.75rem;\n    --afco-space: 1rem;\n    --afco-space-md: 1.25rem;\n    --afco-space-lg: 1.5rem;\n    --afco-space-xl: 2rem;\n    --afco-space-2xl: 2.5rem;<\/p>\n<p>    \/* Typographie *\/\n    --afco-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n    --afco-font-mono: 'JetBrains Mono', 'Fira Code', 'Monaco', monospace;<\/p>\n<p>    \/* Transitions *\/\n    --afco-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n    --afco-transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}<\/p>\n<p>\/* ===== BASE STYLES ===== *\/\n#afco-order-tracking {\n    font-family: var(--afco-font-primary);\n    font-feature-settings: 'cv11', 'ss01';\n    font-variation-settings: 'slnt' 0;\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: var(--afco-space-lg);\n    background: var(--afco-background);\n    color: var(--afco-text-primary);\n    line-height: 1.6;\n}<\/p>\n<p>\/* ===== TRACKING FORM ===== *\/\n.afco-tracking-form {\n    background: linear-gradient(135deg, var(--afco-surface) 0%, var(--afco-surface-elevated) 100%);\n    border: 1px solid var(--afco-border);\n    border-radius: var(--afco-radius-xl);\n    padding: var(--afco-space-2xl);\n    margin-bottom: var(--afco-space-xl);\n    box-shadow: var(--afco-shadow-xl);\n    position: relative;\n    overflow: hidden;\n}<\/p>\n<p>.afco-tracking-form::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 4px;\n    background: linear-gradient(90deg, var(--afco-primary), var(--afco-accent), var(--afco-success));\n    border-radius: var(--afco-radius-xl) var(--afco-radius-xl) 0 0;\n}<\/p>\n<p>\/* ===== HEADER ===== *\/\n.afco-header {\n    text-align: center;\n    margin-bottom: var(--afco-space-xl);\n}<\/p>\n<p>.afco-main-title {\n    font-weight: 900;\n    font-size: clamp(1.75rem, 4vw, 2.25rem);\n    line-height: 1.1;\n    color: #000000;\n    margin: 0 0 var(--afco-space-sm) 0;\n    letter-spacing: -0.025em;\n}<\/p>\n<p>.afco-brand {\n    background: #003366;\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    background-clip: text;\n    font-weight: 900;\n}<\/p>\n<p>.afco-subtitle {\n    font-size: 1.125rem;\n    color: var(--afco-text-secondary);\n    margin: 0;\n    font-weight: 400;\n    max-width: 500px;\n    margin-left: auto;\n    margin-right: auto;\n}<\/p>\n<p>\/* ===== INPUT SECTION ===== *\/\n.afco-input-section {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    margin-bottom: var(--afco-space-lg);\n}<\/p>\n<p>.afco-input-group {\n    display: flex;\n    flex-direction: row;\n    gap: var(--afco-space);\n    align-items: stretch;\n    width: 100%;\n    max-width: 500px;\n    justify-content: center;\n}<\/p>\n<p>.afco-input-wrapper {\n    flex: 1;\n    position: relative;\n    max-width: 300px;\n}<\/p>\n<p>.afco-input {\n    width: 100%;\n    padding: var(--afco-space) var(--afco-space-md);\n    font-family: var(--afco-font-mono);\n    font-size: 1.125rem;\n    font-weight: 500;\n    border: 2px solid var(--afco-border);\n    border-radius: var(--afco-radius-md);\n    background: var(--afco-surface);\n    color: var(--afco-text-primary);\n    transition: var(--afco-transition-slow);\n    box-shadow: var(--afco-shadow-sm);\n    letter-spacing: 0.05em;\n    text-align: center;\n    text-transform: uppercase;\n    box-sizing: border-box;\n}<\/p>\n<p>.afco-input:focus {\n    outline: none;\n    border-color: var(--afco-primary);\n    box-shadow: 0 0 0 4px rgb(37 99 235 \/ 0.1), var(--afco-shadow-lg);\n    transform: translateY(-2px);\n}<\/p>\n<p>.afco-input::placeholder {\n    color: var(--afco-text-muted);\n    font-weight: 400;\n    opacity: 0.7;\n    text-transform: none;\n}<\/p>\n<p>\/* ===== TRACK BUTTON ===== *\/\n.afco-track-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--afco-space-sm);\n    padding: var(--afco-space) var(--afco-space-lg);\n    font-family: var(--afco-font-primary);\n    font-size: 1rem;\n    font-weight: 600;\n    background: linear-gradient(135deg, var(--afco-primary), var(--afco-primary-light));\n    color: var(--afco-text-inverse);\n    border: none;\n    border-radius: var(--afco-radius-md);\n    cursor: pointer;\n    transition: var(--afco-transition-slow);\n    box-shadow: var(--afco-shadow-lg);\n    position: relative;\n    overflow: hidden;\n    min-width: 120px;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    height: auto;\n    flex-shrink: 0;\n}<\/p>\n<p>.afco-track-button::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: -100%;\n    width: 100%;\n    height: 100%;\n    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);\n    transition: left 0.5s;\n}<\/p>\n<p>.afco-track-button:hover {\n    background: linear-gradient(135deg, var(--afco-primary-dark), var(--afco-primary));\n    transform: translateY(-3px);\n    box-shadow: var(--afco-shadow-xl);\n}<\/p>\n<p>.afco-track-button:hover::before {\n    left: 100%;\n}<\/p>\n<p>.afco-track-button:active {\n    transform: translateY(-1px);\n}<\/p>\n<p>.afco-track-button:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n    transform: none !important;\n}<\/p>\n<p>.afco-track-button.loading {\n    pointer-events: none;\n}<\/p>\n<p>.afco-track-button.loading .afco-btn-icon {\n    animation: afco-spin 1s linear infinite;\n}<\/p>\n<p>.afco-btn-icon {\n    font-size: 1.125rem;\n    transition: var(--afco-transition);\n}<\/p>\n<p>.afco-btn-text {\n    font-weight: 700;\n}<\/p>\n<p>\/* ===== STATUS MESSAGES ===== *\/\n.afco-status-messages {\n    min-height: 20px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    margin-top: var(--afco-space);\n}<\/p>\n<p>.afco-loading {\n    display: none;\n    text-align: center;\n    padding: var(--afco-space-lg);\n    border-radius: var(--afco-radius-md);\n    background: rgba(37, 99, 235, 0.05);\n    border: 1px solid rgba(37, 99, 235, 0.1);\n    max-width: 400px;\n    width: 100%;\n    opacity: 0;\n    transform: translateY(20px);\n    transition: var(--afco-transition-slow);\n}<\/p>\n<p>.afco-loading.show {\n    opacity: 1;\n    transform: translateY(0);\n}<\/p>\n<p>.afco-loading p {\n    color: var(--afco-primary);\n    font-weight: 600;\n    font-size: 1rem;\n    margin: var(--afco-space-sm) 0 0 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--afco-space-sm);\n}<\/p>\n<p>.afco-spinner {\n    width: 32px;\n    height: 32px;\n    border: 3px solid rgba(37, 99, 235, 0.2);\n    border-radius: 50%;\n    border-top-color: var(--afco-primary);\n    animation: afco-spin 1s linear infinite;\n    margin: 0 auto var(--afco-space-sm) auto;\n}<\/p>\n<p>@keyframes afco-spin {\n    to { transform: rotate(360deg); }\n}<\/p>\n<p>.afco-error {\n    display: none;\n    color: var(--afco-error);\n    background: rgba(239, 68, 68, 0.05);\n    border: 1px solid rgba(239, 68, 68, 0.2);\n    padding: var(--afco-space-lg);\n    border-radius: var(--afco-radius-md);\n    text-align: center;\n    font-weight: 600;\n    font-size: 0.9375rem;\n    max-width: 400px;\n    width: 100%;\n    opacity: 0;\n    transform: translateY(20px);\n    transition: var(--afco-transition-slow);\n}<\/p>\n<p>.afco-error.show {\n    opacity: 1;\n    transform: translateY(0);\n}<\/p>\n<p>\/* ===== RESULTS SECTION ===== *\/\n.afco-result {\n    display: none;\n    margin-top: var(--afco-space-xl);\n    opacity: 0;\n    transform: translateY(30px);\n    transition: var(--afco-transition-slow);\n}<\/p>\n<p>.afco-result.show {\n    opacity: 1;\n    transform: translateY(0);\n}<\/p>\n<p>\/* ===== ORDER DETAILS ===== *\/\n.afco-order-details {\n    background: var(--afco-surface);\n    border: 1px solid var(--afco-border);\n    border-radius: var(--afco-radius-xl);\n    padding: var(--afco-space-xl);\n    box-shadow: var(--afco-shadow-xl);\n    margin-top: var(--afco-space-xl);\n}<\/p>\n<p>.afco-order-header {\n    text-align: center;\n    margin-bottom: var(--afco-space-xl);\n    padding-bottom: var(--afco-space-lg);\n    border-bottom: 2px solid var(--afco-border);\n}<\/p>\n<p>.afco-order-title {\n    font-weight: 700;\n    font-size: clamp(1.5rem, 3vw, 1.875rem);\n    color: var(--afco-text-primary);\n    margin: 0 0 var(--afco-space) 0;\n    letter-spacing: -0.025em;\n}<\/p>\n<p>\/* ===== STATUS BADGES ===== *\/\n.afco-status-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--afco-space-sm);\n    padding: var(--afco-space-sm) var(--afco-space-lg);\n    border-radius: 2rem;\n    font-weight: 700;\n    font-size: 0.875rem;\n    text-transform: uppercase;\n    letter-spacing: 0.1em;\n    color: var(--afco-text-inverse);\n    box-shadow: var(--afco-shadow-md);\n    position: relative;\n    overflow: hidden;\n}<\/p>\n<p>\/* Status colors *\/\n.afco-status-preparation { background: linear-gradient(135deg, #f59e0b, #d97706); }\n.afco-status-validated { background: linear-gradient(135deg, #10b981, #059669); }\n.afco-status-ready_for_shipping { background: linear-gradient(135deg, #3b82f6, #2563eb); }\n.afco-status-shipped { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }\n.afco-status-gate_in { background: linear-gradient(135deg, #f97316, #ea580c); }\n.afco-status-loaded { background: linear-gradient(135deg, #6b7280, #4b5563); }\n.afco-status-completed { background: linear-gradient(135deg, #10b981, #047857); }\n.afco-status-waiting_production { background: linear-gradient(135deg, #eab308, #ca8a04); }\n.afco-status-rejected { background: linear-gradient(135deg, #ef4444, #dc2626); }\n.afco-status-canceled { background: linear-gradient(135deg, #6b7280, #374151); }<\/p>\n<p>\/* ===== PROGRESS STEPS ===== *\/\n.afco-progress-steps {\n    margin: var(--afco-space-xl) 0;\n    padding: var(--afco-space-xl);\n    background: linear-gradient(135deg, var(--afco-surface-elevated), var(--afco-border-light));\n    border-radius: var(--afco-radius-md);\n    border: 1px solid var(--afco-border);\n    box-shadow: var(--afco-shadow-md);\n}<\/p>\n<p>.afco-progress-title {\n    font-weight: 600;\n    font-size: 1.25rem;\n    color: var(--afco-text-primary);\n    margin: 0 0 var(--afco-space-lg) 0;\n    text-align: center;\n    letter-spacing: -0.025em;\n}<\/p>\n<p>.afco-steps-container {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n    gap: var(--afco-space-lg);\n    position: relative;\n    margin: var(--afco-space-lg) 0;\n}<\/p>\n<p>.afco-step {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n    position: relative;\n}<\/p>\n<p>.afco-step-circle {\n    width: 60px;\n    height: 60px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 1.5rem;\n    margin-bottom: var(--afco-space-sm);\n    transition: var(--afco-transition-slow);\n    border: 3px solid;\n    box-shadow: var(--afco-shadow-md);\n    position: relative;\n    z-index: 2;\n}<\/p>\n<p>.afco-step-label {\n    font-size: 0.875rem;\n    font-weight: 600;\n    margin-bottom: var(--afco-space-xs);\n    letter-spacing: -0.025em;\n    color: var(--afco-text-primary);\n}<\/p>\n<p>.afco-step-description {\n    font-size: 0.75rem;\n    color: var(--afco-text-secondary);\n    font-weight: 400;\n}<\/p>\n<p>\/* Step states *\/\n.afco-step.completed .afco-step-circle {\n    background: var(--afco-success);\n    color: var(--afco-text-inverse);\n    border-color: var(--afco-success);\n    transform: scale(1.05);\n}<\/p>\n<p>.afco-step.current .afco-step-circle {\n    background: var(--afco-primary);\n    color: var(--afco-text-inverse);\n    border-color: var(--afco-primary);\n    animation: afco-pulse 2s infinite;\n    transform: scale(1.1);\n}<\/p>\n<p>.afco-step.pending .afco-step-circle {\n    background: var(--afco-surface);\n    color: var(--afco-text-muted);\n    border-color: var(--afco-border);\n}<\/p>\n<p>.afco-step.pending .afco-step-label,\n.afco-step.pending .afco-step-description {\n    color: var(--afco-text-muted);\n}<\/p>\n<p>@keyframes afco-pulse {\n    0%, 100% { \n        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4), var(--afco-shadow-md);\n    }\n    50% { \n        box-shadow: 0 0 0 10px rgba(37, 99, 235, 0), var(--afco-shadow-lg);\n    }\n}<\/p>\n<p>\/* ===== INFO GRID ===== *\/\n.afco-info-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n    gap: var(--afco-space-lg);\n    margin-top: var(--afco-space-xl);\n}<\/p>\n<p>.afco-info-card {\n    background: linear-gradient(135deg, var(--afco-surface), var(--afco-surface-elevated));\n    padding: var(--afco-space-lg);\n    border-radius: var(--afco-radius-md);\n    border: 1px solid var(--afco-border);\n    box-shadow: var(--afco-shadow-md);\n    transition: var(--afco-transition-slow);\n    position: relative;\n    overflow: hidden;\n}<\/p>\n<p>.afco-info-card::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 4px;\n    height: 100%;\n    background: linear-gradient(135deg, var(--afco-primary), var(--afco-accent));\n}<\/p>\n<p>.afco-info-card:hover {\n    transform: translateY(-4px);\n    box-shadow: var(--afco-shadow-xl);\n}<\/p>\n<p>.afco-info-card h4 {\n    font-weight: 600;\n    font-size: 1.125rem;\n    color: var(--afco-text-primary);\n    margin: 0 0 var(--afco-space) 0;\n    display: flex;\n    align-items: center;\n    gap: var(--afco-space-sm);\n    letter-spacing: -0.025em;\n}<\/p>\n<p>.afco-info-item {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin: var(--afco-space-sm) 0;\n    padding: var(--afco-space-sm) 0;\n    border-bottom: 1px solid rgba(226, 232, 240, 0.5);\n    gap: var(--afco-space);\n}<\/p>\n<p>.afco-info-label {\n    font-weight: 500;\n    color: var(--afco-text-secondary);\n    font-size: 0.875rem;\n    flex-shrink: 0;\n}<\/p>\n<p>.afco-info-value {\n    color: var(--afco-text-primary);\n    font-weight: 600;\n    font-size: 0.875rem;\n    text-align: right;\n    font-family: var(--afco-font-mono);\n}<\/p>\n<p>\/* ===== ITEMS TABLE ===== *\/\n.afco-items-table {\n    width: 100%;\n    border-collapse: collapse;\n    margin: var(--afco-space) 0;\n    background: var(--afco-surface);\n    border-radius: var(--afco-radius-md);\n    overflow: hidden;\n    box-shadow: var(--afco-shadow-md);\n    border: 1px solid var(--afco-border);\n}<\/p>\n<p>.afco-items-table th {\n    background: linear-gradient(135deg, var(--afco-primary), var(--afco-primary-dark));\n    color: var(--afco-text-inverse);\n    padding: var(--afco-space);\n    font-weight: 600;\n    font-size: 0.875rem;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n}<\/p>\n<p>.afco-items-table td {\n    padding: var(--afco-space);\n    border-bottom: 1px solid var(--afco-border);\n    color: var(--afco-text-primary);\n    font-size: 0.875rem;\n}<\/p>\n<p>.afco-items-table tr:hover {\n    background: rgba(37, 99, 235, 0.02);\n}<\/p>\n<p>.afco-items-table tr:last-child td {\n    border-bottom: none;\n}<\/p>\n<p>\/* ===== ANIMATIONS ===== *\/\n.afco-fade-in {\n    animation: afcoFadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n}<\/p>\n<p>@keyframes afcoFadeInUp {\n    from {\n        opacity: 0;\n        transform: translateY(30px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}<\/p>\n<p>\/* ===== RESPONSIVE DESIGN ===== *\/\n@media (max-width: 768px) {\n    :root {\n        --afco-space-lg: 1rem;\n        --afco-space-xl: 1.5rem;\n        --afco-space-2xl: 2rem;\n    }<\/p>\n<p>    #afco-order-tracking {\n        padding: var(--afco-space);\n    }<\/p>\n<p>    .afco-tracking-form {\n        padding: var(--afco-space-xl) var(--afco-space-lg);\n    }<\/p>\n<p>    .afco-input-group {\n        flex-direction: column;\n        gap: var(--afco-space-lg);\n        align-items: center;\n    }<\/p>\n<p>    .afco-input-wrapper {\n        max-width: 100%;\n        width: 100%;\n    }<\/p>\n<p>    .afco-track-button {\n        width: 100%;\n        max-width: 300px;\n    }<\/p>\n<p>    .afco-steps-container {\n        grid-template-columns: repeat(2, 1fr);\n        gap: var(--afco-space);\n    }<\/p>\n<p>    .afco-info-grid {\n        grid-template-columns: 1fr;\n        gap: var(--afco-space);\n    }<\/p>\n<p>    .afco-info-item {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: var(--afco-space-xs);\n    }<\/p>\n<p>    .afco-info-value {\n        text-align: left;\n    }<\/p>\n<p>    .afco-items-table {\n        font-size: 0.75rem;\n    }<\/p>\n<p>    .afco-items-table th,\n    .afco-items-table td {\n        padding: var(--afco-space-sm);\n    }\n}<\/p>\n<p>@media (max-width: 480px) {\n    .afco-tracking-form {\n        padding: var(--afco-space-lg) var(--afco-space);\n    }<\/p>\n<p>    .afco-steps-container {\n        grid-template-columns: 1fr;\n        gap: var(--afco-space);\n    }<\/p>\n<p>    .afco-step-circle {\n        width: 50px;\n        height: 50px;\n        font-size: 1.25rem;\n    }<\/p>\n<p>    .afco-info-card {\n        padding: var(--afco-space);\n    }<\/p>\n<p>    .afco-items-table th,\n    .afco-items-table td {\n        padding: var(--afco-space-xs);\n        font-size: 0.6875rem;\n    }\n}<\/p>\n<p>\/* ===== ACCESSIBILITY ===== *\/\n@media (prefers-reduced-motion: reduce) {\n    *,\n    *::before,\n    *::after {\n        animation-duration: 0.01ms !important;\n        animation-iteration-count: 1 !important;\n        transition-duration: 0.01ms !important;\n    }\n}<\/p>\n<p>*:focus-visible {\n    outline: 2px solid var(--afco-primary);\n    outline-offset: 2px;\n}<\/p>\n<p>\/* ===== PERFORMANCE OPTIMIZATIONS ===== *\/\n.afco-order-details,\n.afco-tracking-form {\n    contain: layout style;\n}<\/p>\n<p>.afco-step-circle,\n.afco-info-card,\n.afco-track-button,\n.afco-input {\n    will-change: transform;\n}<\/p>\n<p>\/* ===== DEMO FUNCTIONALITY (Remove in production) ===== *\/\n<\/style>\n<p><script>\n\/\/ Demo functionality for testing loading state\n(function() {\n    'use strict';<\/p>\n<p>    const trackBtn = document.getElementById('afco-track-btn');\n    const loading = document.getElementById('afco-loading');\n    const error = document.getElementById('afco-error');\n    const input = document.getElementById('afco-suivi-input');<\/p>\n<p>    if (!trackBtn || !loading || !error || !input) return;<\/p>\n<p>    function showLoading() {\n        loading.style.display = 'block';\n        setTimeout(() => {\n            loading.classList.add('show');\n        }, 10);<\/p>\n<p>        \/\/ Add loading state to button\n        trackBtn.classList.add('loading');\n        trackBtn.disabled = true;\n        trackBtn.querySelector('.afco-btn-icon').textContent = '\u27f3';\n    }<\/p>\n<p>    function hideLoading() {\n        loading.classList.remove('show');\n        setTimeout(() => {\n            loading.style.display = 'none';\n        }, 300);<\/p>\n<p>        \/\/ Remove loading state from button\n        trackBtn.classList.remove('loading');\n        trackBtn.disabled = false;\n        trackBtn.querySelector('.afco-btn-icon').textContent = '\ud83d\udd0d';\n    }<\/p>\n<p>    function showError(message) {\n        error.textContent = message;\n        error.style.display = 'block';\n        setTimeout(() => {\n            error.classList.add('show');\n        }, 10);\n    }<\/p>\n<p>    function hideError() {\n        error.classList.remove('show');\n        setTimeout(() => {\n            error.style.display = 'none';\n        }, 300);\n    }<\/p>\n<p>    function animateShake(element) {\n        element.style.animation = 'none';\n        element.offsetHeight; \/\/ Trigger reflow\n        element.style.animation = 'afcoShake 0.5s cubic-bezier(0.4, 0, 0.2, 1)';<\/p>\n<p>        \/\/ Add shake animation if not exists\n        if (!document.querySelector('#afco-shake-styles')) {\n            const shakeStyles = document.createElement('style');\n            shakeStyles.id = 'afco-shake-styles';\n            shakeStyles.textContent = `\n                @keyframes afcoShake {\n                    0%, 100% { transform: translateX(0); }\n                    25% { transform: translateX(-8px); }\n                    75% { transform: translateX(8px); }\n                }\n            `;\n            document.head.appendChild(shakeStyles);\n        }\n    }<\/p>\n<p>    \/\/ Input validation and formatting\n    input.addEventListener('input', function(e) {\n        let value = e.target.value.toUpperCase().replace(\/[^A-Z0-9]\/g, '');\n        if (value.length > 4 && !value.startsWith('AFCO')) {\n            value = 'AFCO' + value.substring(4);\n        }\n        e.target.value = value;<\/p>\n<p>        \/\/ Visual feedback\n        if (value.length === 11 && value.startsWith('AFCO')) {\n            e.target.style.borderColor = 'var(--afco-success)';\n            e.target.style.boxShadow = '0 0 0 4px rgba(16, 185, 129, 0.1)';\n        } else if (value.length > 0) {\n            e.target.style.borderColor = 'var(--afco-warning)';\n            e.target.style.boxShadow = '0 0 0 4px rgba(245, 158, 11, 0.1)';\n        } else {\n            e.target.style.borderColor = 'var(--afco-border)';\n            e.target.style.boxShadow = 'var(--afco-shadow-sm)';\n        }\n    });<\/p>\n<p>    \/\/ Enter key support\n    input.addEventListener('keypress', function(e) {\n        if (e.key === 'Enter') {\n            e.preventDefault();\n            trackBtn.click();\n        }\n    });<\/p>\n<p>    \/\/ Demo tracking functionality\n    trackBtn.addEventListener('click', function(e) {\n        e.preventDefault();<\/p>\n<p>        const trackingId = input.value.trim().toUpperCase();<\/p>\n<p>        \/\/ Validation\n        if (!trackingId) {\n            showError('\u26a0\ufe0f Veuillez entrer un num\u00e9ro de suivi');\n            animateShake(input);\n            return;\n        }<\/p>\n<p>        if (trackingId.length !== 11 || !trackingId.startsWith('AFCO')) {\n            showError('\u274c Format invalide. Le num\u00e9ro doit commencer par AFCO et contenir 11 caract\u00e8res');\n            animateShake(input);\n            return;\n        }<\/p>\n<p>        \/\/ Start loading\n        hideError();\n        showLoading();<\/p>\n<p>        \/\/ Simulate API call\n        setTimeout(() => {\n            hideLoading();<\/p>\n<p>            \/\/ Demo: Show error for testing (replace with actual API call)\n            if (trackingId === 'AFCO1234567') {\n                showError('\u274c Commande non trouv\u00e9e. V\u00e9rifiez votre num\u00e9ro de suivi.');\n                animateShake(input);\n            } else {\n                \/\/ In real implementation, show actual results\n                showError('\u2705 D\u00e9mo: Int\u00e9grez votre API ici pour afficher les r\u00e9sultats r\u00e9els.');\n            }\n        }, 2000); \/\/ 2 second demo delay\n    });<\/p>\n<p>})();\n<\/script><\/p>","protected":false},"excerpt":{"rendered":"<p>Suivi de Votre Commande AFCO Entrez votre num\u00e9ro de suivi pour consulter l&rsquo;\u00e9tat de votre commande en temps r\u00e9el. Suivre<\/p>","protected":false},"author":1,"featured_media":0,"parent":104,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"disabled","ast-main-header-display":"disabled","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"disabled","site-post-title":"disabled","ast-breadcrumbs-content":"disabled","ast-featured-img":"disabled","footer-sml-layout":"disabled","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-901","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/afcomauritania.com\/en\/wp-json\/wp\/v2\/pages\/901","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/afcomauritania.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/afcomauritania.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/afcomauritania.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/afcomauritania.com\/en\/wp-json\/wp\/v2\/comments?post=901"}],"version-history":[{"count":19,"href":"https:\/\/afcomauritania.com\/en\/wp-json\/wp\/v2\/pages\/901\/revisions"}],"predecessor-version":[{"id":959,"href":"https:\/\/afcomauritania.com\/en\/wp-json\/wp\/v2\/pages\/901\/revisions\/959"}],"up":[{"embeddable":true,"href":"https:\/\/afcomauritania.com\/en\/wp-json\/wp\/v2\/pages\/104"}],"wp:attachment":[{"href":"https:\/\/afcomauritania.com\/en\/wp-json\/wp\/v2\/media?parent=901"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}