{"id":15,"date":"2024-03-22T12:32:07","date_gmt":"2024-03-22T12:32:07","guid":{"rendered":"https:\/\/dummy.xtemos.com\/woodmart2\/pills-elementor\/?page_id=15"},"modified":"2026-01-17T20:39:11","modified_gmt":"2026-01-17T20:39:11","slug":"about-us","status":"publish","type":"page","link":"https:\/\/kativamorocco.com\/fr\/about-us\/","title":{"rendered":"A propos de nous"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"15\" class=\"elementor elementor-15\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bda8911 e-con-full wd-section-stretch e-flex e-con e-parent\" data-id=\"bda8911\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-50c1c60 elementor-widget elementor-widget-html\" data-id=\"50c1c60\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ===== KATIVA MOROCCO - ABOUT US PAGE (Removed \"Kativa Morocco Care\" Tag) ===== -->\r\n<!-- Paste this in ONE \"Custom HTML\" block in WordPress. It will NOT change your website styles. -->\r\n<div id=\"kativa-aboutus-page-mount\"><\/div>\r\n\r\n<script>\r\n(function () {\r\n  const mount = document.getElementById(\"kativa-aboutus-page-mount\");\r\n  if (!mount) return;\r\n\r\n  \/\/ Shadow DOM = isolated styles (no effect on your theme)\r\n  const root = mount.attachShadow({ mode: \"open\" });\r\n\r\n  \/* ===== IMAGES ===== *\/\r\n  const BANNER_BG   = \"http:\/\/kativamorocco.com\/wp-content\/uploads\/2026\/01\/kativa-morocco-2.png\";\r\n  const ABOUT_IMG   = \"http:\/\/kativamorocco.com\/wp-content\/uploads\/2026\/01\/banner.png\";\r\n\r\n  \/\/ WHY SECTION (3 images)\r\n  const WHY_IMG_1   = \"http:\/\/kativamorocco.com\/wp-content\/uploads\/2026\/01\/image-banner.png\";\r\n  const WHY_IMG_2   = \"http:\/\/kativamorocco.com\/wp-content\/uploads\/2026\/01\/USO-DIARIO-4.jpg\";\r\n  const WHY_IMG_3   = \"http:\/\/kativamorocco.com\/wp-content\/uploads\/2026\/01\/TRATAMIENTO.jpg\";\r\n\r\n  \/\/ WHY CHOOSE US HERO background\r\n  const WCU_BG      = \"http:\/\/kativamorocco.com\/wp-content\/uploads\/2026\/01\/diferenciales.png\";\r\n\r\n  \/\/ \u2705 FIXED: Using inline SVG icons instead of Font Awesome to work in Shadow DOM\r\n  const svgIcons = {\r\n    wand: `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"currentColor\"><path d=\"M15.5 3.5l-3-3L12 0a.5.5 0 0 0-.5.5l-.5 1.5-1-1L9.5 1a.5.5 0 0 0-.5.5l-.5 1.5-1-1L7 2a.5.5 0 0 0-.5.5L6 4 4.5 2.5 2 5 11 14l2.5-2.5L12 10l1.5-1.5-1-1 1.5-.5a.5.5 0 0 0 .5-.5l.5-1.5-1-1 1.5-.5a.5.5 0 0 0 .5-.5zM5.5 10.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z\"\/><\/svg>`,\r\n    star: `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"currentColor\"><path d=\"M8 1.5l1.75 3.54 3.91.57-2.83 2.76.67 3.89L8 11.23 4.5 13.26l.67-3.89L2.34 5.61l3.91-.57L8 1.5z\"\/><\/svg>`,\r\n    heart: `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"currentColor\"><path d=\"M8 2.5a5.5 5.5 0 0 0-5.5 5.5c0 1.43.56 2.74 1.47 3.7L8 14.5l4.03-3.8A5.46 5.46 0 0 0 13.5 8 5.5 5.5 0 0 0 8 2.5z\"\/><\/svg>`,\r\n    sparkles: `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 16 16\" fill=\"currentColor\"><path d=\"M7.5 1.5l1 2 2 .5-1.5 1.5.5 2-2-1-2 1 .5-2L4.5 4l2-.5 1-2zM13 9l-1 2-2 .5 1.5 1.5-.5 2 2-1 2 1-.5-2L16 11.5l-2-.5-1-2z\"\/><\/svg>`,\r\n    leaf: `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M17 8C8 10 5.9 16.17 3.82 21.34l1.89.66.95-2.29c.48.23 1.01.45 1.57.66L9 21.5l1.46-2.61c.54.14 1.08.27 1.61.39L13 21.5l1.39-2.75c.53.1 1.06.18 1.57.25L17 21.5l1.16-2.88c.52.06 1.03.1 1.51.13L21 21.5v-10c-1.91 0-3.5-.67-4-1.5zM4.55 2.55l3.89 3.89-1.41 1.41-3.89-3.89 1.41-1.41zm6.22 2.65l1.41-1.41 3.89 3.89-1.41 1.41-3.89-3.89z\"\/><\/svg>`,\r\n    droplet: `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z\"\/><\/svg>`,\r\n    flask: `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M15 2v2h-1v4.24c0 .46-.21.9-.57 1.19L8.27 13.7c-.55.42-.88 1.07-.88 1.77V20H6v2h12v-2h-1.39v-4.53c0-.7-.33-1.35-.88-1.77l-5.16-4.27c-.36-.3-.57-.73-.57-1.19V4H9V2h6z\"\/><\/svg>`,\r\n    clock: `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"\/><\/svg>`\r\n  };\r\n\r\n  root.innerHTML += `\r\n    <style>\r\n      :host{\r\n        \/* ===== KATIVA THEME ===== *\/\r\n        --primary:#f07b1f;        \/* orange *\/\r\n        --primaryDark:#d96512;\r\n        --soft:#fff4ea;           \/* soft background color *\/\r\n        --text:#1d1d1d;\r\n        --muted:#666;\r\n        --card:#fff;\r\n        --shadow:0 16px 45px rgba(0,0,0,.14);\r\n        --radius:18px;\r\n\r\n        font-family:\"Poppins\", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n        color:var(--text);\r\n        line-height:1.6;\r\n        display:block;\r\n      }\r\n      .kativa *{ box-sizing:border-box; }\r\n      .kativa{ width:100%; background:#fff; }\r\n\r\n      \/* ===== Banner ===== *\/\r\n      .km-banner{\r\n        min-height: 320px;\r\n        display:grid;\r\n        place-items:center;\r\n        text-align:center;\r\n        position:relative;\r\n        background:\r\n          linear-gradient(0deg, rgba(0,0,0,.62), rgba(0,0,0,.35)),\r\n          url('${BANNER_BG}');\r\n        background-size:cover;\r\n        background-position:center;\r\n        background-repeat:no-repeat;\r\n        padding: 56px 16px;\r\n        color:#fff;\r\n        overflow:hidden;\r\n      }\r\n      .km-banner .inner{\r\n        width:min(1100px, 92%);\r\n        margin:0 auto;\r\n      }\r\n      .km-banner .eyebrow{\r\n        display:inline-flex;\r\n        align-items:center;\r\n        gap:10px;\r\n        padding:10px 18px;\r\n        border-radius:999px;\r\n        background:rgba(255,255,255,.18);\r\n        border:1px solid rgba(255,255,255,.25);\r\n        backdrop-filter: blur(10px);\r\n        font-weight:800;\r\n        letter-spacing:.22em;\r\n        text-transform:uppercase;\r\n        font-size:12px;\r\n        margin-bottom:18px;\r\n      }\r\n      .km-banner h1{\r\n        margin:0 0 12px;\r\n        font-size: clamp(30px, 5vw, 54px);\r\n        line-height:1.08;\r\n        font-weight:900;\r\n        letter-spacing:-.02em;\r\n        text-shadow:0 10px 30px rgba(0,0,0,.35);\r\n      }\r\n      .km-banner p{\r\n        margin:0 auto;\r\n        width:min(820px, 100%);\r\n        font-size: clamp(15px, 2.1vw, 20px);\r\n        color:rgba(255,255,255,.92);\r\n      }\r\n\r\n      \/* ===== About section under banner (2 containers) ===== *\/\r\n      .wrap{\r\n        width:min(1200px, 92%);\r\n        margin:0 auto;\r\n      }\r\n      .about{\r\n        padding: 70px 0;\r\n        background:#fff;\r\n      }\r\n      .about-grid{\r\n        display:grid;\r\n        grid-template-columns: 1fr 1fr;\r\n        gap: 46px;\r\n        align-items:center;\r\n      }\r\n      .about-img{\r\n        border-radius: 22px;\r\n        overflow:hidden;\r\n        box-shadow: var(--shadow);\r\n        background:#fff;\r\n      }\r\n      .about-img img{\r\n        width:100%;\r\n        height:auto;\r\n        display:block;\r\n      }\r\n      .about h2{\r\n        margin:0 0 14px;\r\n        font-size: clamp(26px, 3.4vw, 44px);\r\n        line-height:1.12;\r\n        font-weight:900;\r\n        color:var(--text);\r\n      }\r\n      .about h2 span{ color: var(--primaryDark); }\r\n      .about .desc{\r\n        margin:0 0 18px;\r\n        color:var(--muted);\r\n        font-size:17px;\r\n        line-height:1.8;\r\n        max-width: 62ch;\r\n        position:relative;\r\n        padding-left:18px;\r\n      }\r\n      .about .desc:before{\r\n        content:'';\r\n        position:absolute;\r\n        left:0;\r\n        top:2px;\r\n        width:4px;\r\n        height: calc(100% - 4px);\r\n        background: var(--primary);\r\n        border-radius:4px;\r\n      }\r\n      .about .chips{\r\n        display:flex;\r\n        flex-wrap:wrap;\r\n        gap:10px;\r\n        margin-top:18px;\r\n      }\r\n      .chip{\r\n        display:inline-flex;\r\n        align-items:center;\r\n        gap:8px;\r\n        padding:10px 14px;\r\n        border-radius:999px;\r\n        background: rgba(240,123,31,.10);\r\n        border:1px solid rgba(240,123,31,.22);\r\n        font-weight:700;\r\n        font-size:13px;\r\n        color:var(--primaryDark);\r\n      }\r\n      .chip svg{\r\n        width:14px;\r\n        height:14px;\r\n        fill: var(--primaryDark);\r\n      }\r\n\r\n      \/* ===== WHY SECTION - FULL WIDTH BACKGROUND ===== *\/\r\n      .why-section-container {\r\n        width: 100%;\r\n        background: var(--soft); \/* ORIGINAL BACKGROUND COLOR (#fff4ea) *\/\r\n        padding: 90px 0;\r\n      }\r\n      \r\n      .why-section{\r\n        max-width:1300px;\r\n        margin:0 auto;\r\n        padding: 0 20px;\r\n        display:grid;\r\n        grid-template-columns:1.1fr 1fr;\r\n        gap:70px;\r\n        align-items:center;\r\n      }\r\n\r\n      \/* LEFT IMAGES *\/\r\n      .images-wrap{\r\n        position:relative;\r\n        display:grid;\r\n        grid-template-columns:1fr 1fr;\r\n        gap:30px;\r\n      }\r\n\r\n      .img-small,\r\n      .img-bottom{\r\n        border-radius:120px 120px 120px 0;\r\n        overflow:hidden;\r\n        height:280px;\r\n        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\r\n        transition: transform 0.4s ease;\r\n      }\r\n\r\n      .img-small:hover,\r\n      .img-bottom:hover{\r\n        transform: translateY(-8px);\r\n      }\r\n\r\n      .img-small img,\r\n      .img-bottom img{\r\n        width:100%;\r\n        height:100%;\r\n        object-fit:cover;\r\n        display:block;\r\n        transition: transform 0.6s ease;\r\n      }\r\n\r\n      .img-small:hover img,\r\n      .img-bottom:hover img{\r\n        transform: scale(1.05);\r\n      }\r\n\r\n      .img-tall{\r\n        grid-row:span 2;\r\n        border-radius:200px;\r\n        overflow:hidden;\r\n        height:590px;\r\n        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);\r\n        transition: transform 0.4s ease;\r\n      }\r\n\r\n      .img-tall:hover{\r\n        transform: translateY(-8px);\r\n      }\r\n\r\n      .img-tall img{\r\n        width:100%;\r\n        height:100%;\r\n        object-fit:cover;\r\n        transition: transform 0.8s ease;\r\n      }\r\n\r\n      .img-tall:hover img{\r\n        transform: scale(1.05);\r\n      }\r\n\r\n      \/* CONTENT *\/\r\n      .content h2{\r\n        font-size:46px;\r\n        line-height:1.15;\r\n        margin-bottom:25px;\r\n        color:#222;\r\n        font-weight:900;\r\n      }\r\n\r\n      .content h2 span{\r\n        color: var(--primaryDark);\r\n        position:relative;\r\n      }\r\n\r\n      .content h2 span::after{\r\n        content:'';\r\n        position:absolute;\r\n        bottom:-5px;\r\n        left:0;\r\n        width:100%;\r\n        height:3px;\r\n        background:linear-gradient(90deg, var(--primaryDark), var(--primary));\r\n        border-radius:2px;\r\n      }\r\n\r\n      .content p{\r\n        color:#666;\r\n        font-size:17px;\r\n        line-height:1.7;\r\n        max-width:520px;\r\n        margin-bottom:32px;\r\n        padding-right:20px;\r\n        position:relative;\r\n      }\r\n\r\n      .content p::before{\r\n        content:'';\r\n        position:absolute;\r\n        left:-15px;\r\n        top:0;\r\n        height:100%;\r\n        width:3px;\r\n        background: var(--primary);\r\n        border-radius:2px;\r\n      }\r\n\r\n      \/* SPECIAL BANNER (Kativa colors) *\/\r\n      .special-offer {\r\n        background: linear-gradient(135deg, #fffaf5, #ffe9d8);\r\n        border-radius: 16px;\r\n        padding: 25px;\r\n        margin-bottom: 30px;\r\n        border: 2px dashed var(--primaryDark);\r\n        position: relative;\r\n        overflow: hidden;\r\n      }\r\n\r\n      .special-offer::before {\r\n        content: '';\r\n        position: absolute;\r\n        inset: 0;\r\n        opacity: .35;\r\n        background:\r\n          radial-gradient(circle at 10% 20%, rgba(240,123,31,.22), transparent 40%),\r\n          radial-gradient(circle at 90% 60%, rgba(217,101,18,.18), transparent 44%);\r\n      }\r\n\r\n      .offer-content { position: relative; z-index: 2; }\r\n      .offer-content h3 {\r\n        color: var(--primaryDark);\r\n        font-size: 22px;\r\n        margin-bottom: 10px;\r\n        font-weight: 900;\r\n      }\r\n      .offer-content p { color: #666; font-size: 16px; margin-bottom: 15px; padding-left: 0; }\r\n      .offer-content p::before { display:none; }\r\n\r\n      .offer-timer {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n        font-weight: 700;\r\n        color: #222;\r\n        font-size: 15px;\r\n        margin-top: 15px;\r\n      }\r\n\r\n      .timer-numbers { display: flex; gap: 8px; }\r\n      .timer-unit {\r\n        background: white;\r\n        padding: 5px 12px;\r\n        border-radius: 8px;\r\n        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);\r\n        font-weight: 900;\r\n        color: var(--primaryDark);\r\n        min-width: 40px;\r\n        text-align: center;\r\n      }\r\n\r\n      \/* FEATURES *\/\r\n      .features{\r\n        display:grid;\r\n        grid-template-columns:1fr 1fr;\r\n        gap:20px;\r\n      }\r\n\r\n      .feature{\r\n        background: #ffffff;\r\n        padding:22px;\r\n        border-radius:16px;\r\n        display:flex;\r\n        align-items:center;\r\n        gap:16px;\r\n        border: 2px solid rgba(240,123,31,.18);\r\n        transition: all 0.3s ease;\r\n        cursor:pointer;\r\n      }\r\n\r\n      .feature:hover{\r\n        transform: translateY(-5px);\r\n        border-color: var(--primaryDark);\r\n        box-shadow: 0 10px 25px rgba(240, 123, 31, 0.12);\r\n      }\r\n\r\n      .feature .icon-wrapper{\r\n        width:55px;\r\n        height:55px;\r\n        border-radius:50%;\r\n        display:flex;\r\n        align-items:center;\r\n        justify-content:center;\r\n        transition: all 0.3s ease;\r\n        background: rgba(240,123,31,.12);\r\n      }\r\n\r\n      .feature:hover .icon-wrapper{\r\n        transform: scale(1.1);\r\n        background: var(--primaryDark);\r\n      }\r\n\r\n      .feature .icon-wrapper svg{\r\n        width:28px;\r\n        height:28px;\r\n        fill: var(--primaryDark);\r\n        transition: all 0.3s ease;\r\n      }\r\n\r\n      .feature:hover .icon-wrapper svg{\r\n        fill: white;\r\n      }\r\n\r\n      .feature span{\r\n        font-weight:800;\r\n        color:#222;\r\n        font-size:16px;\r\n        transition: color 0.3s ease;\r\n      }\r\n\r\n      .feature:hover span{ color: var(--primaryDark); }\r\n\r\n      \/* ===== Why Choose Us Hero ===== *\/\r\n      .wcu{\r\n        --wcuPrimary: var(--primaryDark);\r\n        --wcuSecondary: var(--primary);\r\n        position: relative;\r\n        isolation:isolate;\r\n        overflow:hidden;\r\n        background:#fff;\r\n      }\r\n      .wcu .hero{\r\n        min-height: 58vh;\r\n        display:grid;\r\n        place-items:center;\r\n        text-align:center;\r\n        position:relative;\r\n        background:\r\n          linear-gradient(0deg, rgba(0,0,0,0.68), rgba(0,0,0,0.42)),\r\n          url('${WCU_BG}');\r\n        background-size: cover;\r\n        background-position:center;\r\n        background-repeat:no-repeat;\r\n        padding: 56px 0 140px;\r\n        color:#fff;\r\n      }\r\n      .wcu .hero::before{\r\n        content:'';\r\n        position:absolute;\r\n        bottom:0; left:0; right:0;\r\n        height:120px;\r\n        background: linear-gradient(to bottom, transparent, #ffffff);\r\n        z-index:1;\r\n      }\r\n      .wcu .hero-content{\r\n        position:relative;\r\n        z-index:2;\r\n        width: min(900px, 90%);\r\n        margin:0 auto;\r\n      }\r\n      .wcu .eyebrow2{\r\n        display:inline-flex;\r\n        align-items:center;\r\n        gap: 8px;\r\n        padding: 10px 22px;\r\n        border-radius: 50px;\r\n        background: rgba(255,255,255,0.18);\r\n        color:#fff;\r\n        font-weight:800;\r\n        letter-spacing:1.5px;\r\n        text-transform:uppercase;\r\n        border:1px solid rgba(255,255,255,0.26);\r\n        backdrop-filter: blur(10px);\r\n        margin-bottom: 25px;\r\n        font-size:13px;\r\n      }\r\n      .wcu .title{\r\n        margin:0 0 18px;\r\n        font-weight: 900;\r\n        letter-spacing: -0.02em;\r\n        font-size: clamp(34px, 6vw, 52px);\r\n        line-height: 1.1;\r\n        text-shadow: 0 3px 10px rgba(0,0,0,0.4);\r\n      }\r\n      .wcu .title .part1{ display:block; color:#fff; }\r\n      .wcu .title .part2{ display:block; margin-top:6px; color: var(--wcuSecondary); }\r\n\r\n      .wcu .subtitle{\r\n        width:min(800px,100%);\r\n        margin:0 auto 30px;\r\n        color:#f0f0f0;\r\n        opacity:.95;\r\n        font-size: clamp(16px, 2.2vw, 21px);\r\n        line-height:1.6;\r\n      }\r\n      .wcu .btn{\r\n        display:inline-flex;\r\n        align-items:center;\r\n        gap:12px;\r\n        background: var(--wcuPrimary);\r\n        color:#fff;\r\n        font-weight:900;\r\n        padding: 16px 32px;\r\n        border-radius: 14px;\r\n        border:none;\r\n        text-decoration:none;\r\n        box-shadow: 0 10px 25px rgba(217,101,18,.35);\r\n        transition: all .25s ease;\r\n        font-size: 16px;\r\n        position:relative;\r\n        overflow:hidden;\r\n      }\r\n      .wcu .btn:hover{\r\n        background: var(--wcuSecondary);\r\n        transform: translateY(-4px);\r\n        box-shadow: 0 16px 34px rgba(240,123,31,.40);\r\n      }\r\n      .wcu .btn::after{\r\n        content:'';\r\n        position:absolute;\r\n        top:0; left:-100%;\r\n        width:100%; height:100%;\r\n        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);\r\n        transition:left .5s ease;\r\n      }\r\n      .wcu .btn:hover::after{ left:100%; }\r\n      .wcu .btn svg{ width:20px; height:20px; transition: transform .3s ease; }\r\n      .wcu .btn:hover svg{ transform: translateX(5px); }\r\n\r\n      .wcu .feature-bar{\r\n        width:min(1100px,94%);\r\n        margin-inline:auto;\r\n        margin-top:-100px;\r\n        position:relative;\r\n        z-index:2;\r\n        margin-bottom: 80px;\r\n      }\r\n      .wcu .feature-grid{\r\n        display:grid;\r\n        grid-template-columns: repeat(3, 1fr);\r\n        gap:28px;\r\n      }\r\n      .wcu .card{\r\n        background:#fff;\r\n        border:2px solid transparent;\r\n        border-radius: 20px;\r\n        box-shadow: 0 15px 35px rgba(0,0,0,0.08);\r\n        padding: 32px 26px;\r\n        display:grid;\r\n        gap:15px;\r\n        align-content:start;\r\n        transition: all .25s ease;\r\n        position:relative;\r\n        overflow:hidden;\r\n      }\r\n      .wcu .card::before{\r\n        content:'';\r\n        position:absolute;\r\n        top:0; left:0; width:100%; height:5px;\r\n        background: linear-gradient(90deg, var(--wcuPrimary), var(--wcuSecondary));\r\n      }\r\n      .wcu .card:hover{\r\n        transform: translateY(-10px);\r\n        box-shadow: 0 25px 50px rgba(0,0,0,0.15);\r\n        border-color: rgba(240,123,31,.35);\r\n      }\r\n      .wcu .icon-wrap{\r\n        width:70px; height:70px;\r\n        border-radius: 18px;\r\n        display:grid;\r\n        place-items:center;\r\n        background: linear-gradient(135deg, rgba(217,101,18,.10), rgba(240,123,31,.10));\r\n        border: 2px solid rgba(240,123,31,.22);\r\n        margin-bottom: 12px;\r\n        transition: all .25s ease;\r\n      }\r\n      .wcu .card:hover .icon-wrap{\r\n        transform: scale(1.12) rotate(4deg);\r\n        background: linear-gradient(135deg, rgba(217,101,18,.14), rgba(240,123,31,.14));\r\n      }\r\n      .wcu .card svg{\r\n        width:32px; height:32px;\r\n        stroke: var(--wcuPrimary);\r\n        fill:none; stroke-width:2;\r\n      }\r\n      .wcu .card h3{\r\n        margin:0 0 10px;\r\n        font-size: 22px;\r\n        font-weight: 900;\r\n        color: var(--text);\r\n        line-height:1.25;\r\n      }\r\n      .wcu .card p{\r\n        margin:0;\r\n        color: var(--muted);\r\n        font-size: 16px;\r\n        line-height:1.6;\r\n      }\r\n      .wcu .card-number{\r\n        position:absolute;\r\n        top:22px; right:22px;\r\n        width:34px; height:34px;\r\n        background: var(--wcuPrimary);\r\n        color:#fff;\r\n        border-radius:50%;\r\n        display:grid;\r\n        place-items:center;\r\n        font-weight:900;\r\n        font-size:15px;\r\n        opacity:.92;\r\n      }\r\n\r\n      \/* ===== Responsive ===== *\/\r\n      @media(max-width: 980px){\r\n        .about-grid{ grid-template-columns:1fr; gap:26px; }\r\n      }\r\n\r\n      @media(max-width:900px){\r\n        .why-section{\r\n          grid-template-columns:1fr;\r\n          gap:50px;\r\n          padding:0 15px;\r\n        }\r\n        .images-wrap{ grid-template-columns:1fr 1fr; gap:20px; }\r\n        .img-small, .img-bottom, .img-tall{ height:auto; }\r\n        .content h2{ font-size:34px; }\r\n        .features{ grid-template-columns:1fr; gap:15px; }\r\n        .feature{ padding:18px; }\r\n\r\n        .wcu .feature-grid{ grid-template-columns: repeat(2, 1fr); }\r\n        .wcu .feature-bar{ margin-top:-80px; margin-bottom:60px; }\r\n      }\r\n\r\n      @media(max-width:640px){\r\n        .wcu .feature-grid{ grid-template-columns: 1fr; gap:22px; }\r\n      }\r\n\r\n      @media(max-width:480px){\r\n        .content h2{ font-size:28px; }\r\n        .content p{ font-size:15px; padding-right:0; }\r\n        .content p::before{ left:-10px; }\r\n      }\r\n    <\/style>\r\n\r\n    <div class=\"kativa\">\r\n      <!-- ===== Banner ===== -->\r\n      <section class=\"km-banner\" aria-label=\"Kativa Morocco About Us Banner\">\r\n        <div class=\"inner\">\r\n          <div class=\"eyebrow\">Kativa Morocco<\/div>\r\n          <h1>About Us<\/h1>\r\n          <p>\r\n            Discover the Kativa Morocco story\u2014premium hair care designed for daily routines,\r\n            with a focus on quality, performance, and confidence.\r\n          <\/p>\r\n        <\/div>\r\n      <\/section>\r\n\r\n      <!-- ===== About (image + text) ===== -->\r\n      <section class=\"about\" aria-label=\"About Kativa Morocco\">\r\n        <div class=\"wrap\">\r\n          <div class=\"about-grid\">\r\n            <div class=\"about-img\">\r\n              <img decoding=\"async\" src=\"${ABOUT_IMG}\" alt=\"Kativa Morocco\" loading=\"lazy\">\r\n            <\/div>\r\n            <div>\r\n              <h2>Welcome to <span>Kativa Morocco<\/span><\/h2>\r\n              <p class=\"desc\">\r\n                Kativa Morocco is dedicated to modern hair care solutions that fit your lifestyle.\r\n                Our products are created to support smoothness, hydration, and healthier-looking hair\u2014every day.\r\n              <\/p>\r\n              <div class=\"chips\">\r\n                <div class=\"chip\">${svgIcons.wand} Modern Care<\/div>\r\n                <div class=\"chip\">${svgIcons.star} Premium Experience<\/div>\r\n                <div class=\"chip\">${svgIcons.heart} Hair-First Routine<\/div>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/section>\r\n\r\n      <!-- ===== WHY SECTION - WITHOUT \"KATIVA MOROCCO CARE\" TAG ===== -->\r\n      <section class=\"why-section-container\">\r\n        <div class=\"why-section\" aria-label=\"Kativa Morocco Section\">\r\n          <!-- LEFT IMAGES -->\r\n          <div class=\"images-wrap\">\r\n            <div class=\"img-small\">\r\n              <img decoding=\"async\" src=\"${WHY_IMG_1}\" alt=\"Kativa Morocco product\" loading=\"lazy\">\r\n            <\/div>\r\n\r\n            <div class=\"img-tall\">\r\n              <img decoding=\"async\" src=\"${WHY_IMG_2}\" alt=\"Kativa Morocco daily use\" loading=\"lazy\">\r\n            <\/div>\r\n\r\n            <div class=\"img-bottom\">\r\n              <img decoding=\"async\" src=\"${WHY_IMG_3}\" alt=\"Kativa Morocco treatment\" loading=\"lazy\">\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <!-- RIGHT CONTENT -->\r\n          <div class=\"content\">\r\n            <!-- REMOVED: The \"Kativa Morocco Care\" offer-tag is gone -->\r\n            \r\n            <h2>\r\n              Experience <span>Premium<\/span><br>\r\n              Hair Care Every Day\r\n            <\/h2>\r\n\r\n            <div class=\"special-offer\">\r\n              <div class=\"offer-content\">\r\n                <h3>\u2728 Your Hair Routine, Upgraded<\/h3>\r\n                <p>Discover hair care designed for smoothness, hydration, and confidence\u2014made to fit your daily life.<\/p>\r\n                <div class=\"offer-timer\">\r\n                  <div class=\"icon-wrapper\">${svgIcons.clock}<\/div>\r\n                  <span>Routine countdown:<\/span>\r\n                  <div class=\"timer-numbers\">\r\n                    <span class=\"timer-unit\">03<\/span>:\r\n                    <span class=\"timer-unit\">08<\/span>:\r\n                    <span class=\"timer-unit\">00<\/span>\r\n                  <\/div>\r\n                <\/div>\r\n              <\/div>\r\n            <\/div>\r\n\r\n            <p>\r\n              Kativa Morocco brings modern care and premium standards into every product.\r\n              From daily use to targeted treatments, we focus on results you can feel and shine you can see.\r\n            <\/p>\r\n\r\n            <div class=\"features\">\r\n              <div class=\"feature\">\r\n                <div class=\"icon-wrapper\">\r\n                  ${svgIcons.leaf}\r\n                <\/div>\r\n                <span>Quality Ingredients<\/span>\r\n              <\/div>\r\n\r\n              <div class=\"feature\">\r\n                <div class=\"icon-wrapper\">\r\n                  ${svgIcons.droplet}\r\n                <\/div>\r\n                <span>Hydration & Smoothness<\/span>\r\n              <\/div>\r\n\r\n              <div class=\"feature\">\r\n                <div class=\"icon-wrapper\">\r\n                  ${svgIcons.flask}\r\n                <\/div>\r\n                <span>Modern Formulas<\/span>\r\n              <\/div>\r\n\r\n              <div class=\"feature\">\r\n                <div class=\"icon-wrapper\">\r\n                  ${svgIcons.star}\r\n                <\/div>\r\n                <span>Premium Finish<\/span>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/section>\r\n\r\n      <!-- ===== Why Choose Us (Hero + 3 cards) ===== -->\r\n      <section class=\"wcu\" aria-label=\"Why Choose Kativa Morocco\">\r\n        <div class=\"hero\">\r\n          <div class=\"hero-content\">\r\n            <div class=\"eyebrow2\">Premium Hair Care Experience<\/div>\r\n            <h2 class=\"title\">\r\n              <span class=\"part1\">Why Choose<\/span>\r\n              <span class=\"part2\">Kativa Morocco<\/span>\r\n            <\/h2>\r\n            <p class=\"subtitle\">\r\n              A premium routine you can trust\u2014designed for daily use, targeted care, and a polished, salon-inspired finish.\r\n            <\/p>\r\n            <a class=\"btn\" href=\"https:\/\/kativamorocco.com\/contact-us\/\" onclick=\"return false;\" aria-label=\"Explore Kativa Morocco\">\r\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\r\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 12h14\"\/>\r\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 5l7 7-7 7\"\/>\r\n              <\/svg>\r\n              Explore Now\r\n            <\/a>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"feature-bar\" aria-label=\"Kativa advantages\">\r\n          <div class=\"feature-grid\">\r\n            <article class=\"card\">\r\n              <div class=\"card-number\">1<\/div>\r\n              <div class=\"icon-wrap\">\r\n                <svg viewBox=\"0 0 24 24\">\r\n                  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 10V3L4 14h7v7l9-11h-7z\"\/>\r\n                <\/svg>\r\n              <\/div>\r\n              <h3>Daily-Friendly Routine<\/h3>\r\n              <p>Simple steps that work with your lifestyle\u2014designed for consistent, visible results.<\/p>\r\n            <\/article>\r\n\r\n            <article class=\"card\">\r\n              <div class=\"card-number\">2<\/div>\r\n              <div class=\"icon-wrap\">\r\n                <svg viewBox=\"0 0 24 24\">\r\n                  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 11c0 3-2 5-5 5H6a4 4 0 01-4-4V9a4 4 0 014-4h1c3 0 5 2 5 5zm0 0c0 3 2 5 5 5h1a4 4 0 004-4V9a4 4 0 00-4-4h-1c-3 0-5 2-5 5z\"\/>\r\n                <\/svg>\r\n              <\/div>\r\n              <h3>Targeted Care<\/h3>\r\n              <p>Solutions that support hydration, smoothness, and healthier-looking hair.<\/p>\r\n            <\/article>\r\n\r\n            <article class=\"card\">\r\n              <div class=\"card-number\">3<\/div>\r\n              <div class=\"icon-wrap\">\r\n                <svg viewBox=\"0 0 24 24\">\r\n                  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z\"\/>\r\n                <\/svg>\r\n              <\/div>\r\n              <h3>Premium Standard<\/h3>\r\n              <p>Quality-driven products that deliver a polished finish and confident feel.<\/p>\r\n            <\/article>\r\n          <\/div>\r\n        <\/div>\r\n      <\/section>\r\n    <\/div>\r\n  `;\r\n\r\n  \/* ===== Timer (Shadow-safe: query inside root only) ===== *\/\r\n  function updateOfferTimer(){\r\n    const timerUnits = root.querySelectorAll('.timer-unit');\r\n    if(timerUnits.length < 3) return;\r\n\r\n    let hours = parseInt(timerUnits[0].textContent,10) || 3;\r\n    let minutes = parseInt(timerUnits[1].textContent,10) || 8;\r\n    let seconds = parseInt(timerUnits[2].textContent,10) || 0;\r\n\r\n    seconds--;\r\n\r\n    if(seconds < 0){\r\n      seconds = 59;\r\n      minutes--;\r\n      if(minutes < 0){\r\n        minutes = 59;\r\n        hours--;\r\n        if(hours < 0){\r\n          hours = 3; minutes = 8; seconds = 0;\r\n        }\r\n      }\r\n    }\r\n\r\n    timerUnits[0].textContent = String(hours).padStart(2,'0');\r\n    timerUnits[1].textContent = String(minutes).padStart(2,'0');\r\n    timerUnits[2].textContent = String(seconds).padStart(2,'0');\r\n  }\r\n\r\n  \/\/ Initialize\r\n  const t = root.querySelectorAll('.timer-unit');\r\n  if(t.length >= 3){\r\n    t[0].textContent = '03';\r\n    t[1].textContent = '08';\r\n    t[2].textContent = '00';\r\n  }\r\n  setInterval(updateOfferTimer, 1000);\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-15","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/kativamorocco.com\/fr\/wp-json\/wp\/v2\/pages\/15","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kativamorocco.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kativamorocco.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kativamorocco.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kativamorocco.com\/fr\/wp-json\/wp\/v2\/comments?post=15"}],"version-history":[{"count":28,"href":"https:\/\/kativamorocco.com\/fr\/wp-json\/wp\/v2\/pages\/15\/revisions"}],"predecessor-version":[{"id":1509,"href":"https:\/\/kativamorocco.com\/fr\/wp-json\/wp\/v2\/pages\/15\/revisions\/1509"}],"wp:attachment":[{"href":"https:\/\/kativamorocco.com\/fr\/wp-json\/wp\/v2\/media?parent=15"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}