{"id":102,"date":"2024-07-10T09:02:11","date_gmt":"2024-07-10T09:02:11","guid":{"rendered":"https:\/\/huilerie-houali.com\/2024\/?page_id=102"},"modified":"2026-10-07T09:23:06","modified_gmt":"2026-10-07T09:23:06","slug":"accueil","status":"publish","type":"page","link":"https:\/\/huilerie-houali.com\/2024\/","title":{"rendered":"Accueil"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"102\" class=\"elementor elementor-102\">\n\t\t\t\t<div class=\"elementor-element elementor-element-459afce e-con-full e-flex e-con e-parent\" data-id=\"459afce\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-88d669c elementor-widget elementor-widget-html\" data-id=\"88d669c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ============================================================\n     HOUALI \u2014 HERO LUXURY \/ MAISON D'HUILE D'OLIVE\n     VERSION CLAIRE & PREMIUM\n     ============================================================ -->\n\n<section class=\"houali-luxury-hero\">\n\n    <!-- ===== SLIDES ===== -->\n    <div class=\"houali-luxury-slides\">\n\n        <div class=\"houali-luxury-slide slide-1\"><\/div>\n        <div class=\"houali-luxury-slide slide-2\"><\/div>\n        <div class=\"houali-luxury-slide slide-3\"><\/div>\n\n    <\/div>\n\n\n    <!-- ===== LUMI\u00c8RE \/ OVERLAY ===== -->\n    <div class=\"houali-luxury-light\"><\/div>\n\n\n    <!-- ===== CONTENU PRINCIPAL ===== -->\n    <div class=\"houali-luxury-content\">\n\n        <div class=\"houali-eyebrow\">\n            <span><\/span>\n            MAISON HOUALI\n            <span><\/span>\n        <\/div>\n\n\n        <div class=\"houali-origin\">\n            DEPUIS 1952 \u00b7 KABYLIE \u00b7 ALG\u00c9RIE\n        <\/div>\n\n\n        <h1>\n            <small>L'H\u00c9RITAGE<\/small>\n            <strong>HOUALI<\/strong>\n        <\/h1>\n\n\n        <div class=\"houali-gold-line\"><\/div>\n\n\n        <p class=\"houali-main-text\">\n            L'\u00e9l\u00e9gance d'une huile d'olive n\u00e9e<br>\n            d'un savoir-faire transmis de g\u00e9n\u00e9ration en g\u00e9n\u00e9ration.\n        <\/p>\n\n\n        <!-- ===== BOUTONS ===== -->\n        <div class=\"houali-actions\">\n\n            <a href=\"\/2024\/boutique\/\" class=\"houali-btn-primary\">\n                <span>D\u00e9couvrir la collection<\/span>\n                <b>\u2192<\/b>\n            <\/a>\n\n            <a href=\"https:\/\/tafraht-olive-oil-la-mzdg.bolt.host\" class=\"houali-btn-secondary\" target=\"_blank\" rel=\"noopener\">\n                Commander\n            <\/a>\n\n        <\/div>\n\n    <\/div>\n\n\n    <!-- ===== MARQUE LAT\u00c9RALE ===== -->\n    <div class=\"houali-side-mark\">\n\n        <span>H<\/span>\n\n        <i><\/i>\n\n        <span>1952<\/span>\n\n    <\/div>\n\n\n    <!-- ===== BAS HERO ===== -->\n    <div class=\"houali-bottom\">\n\n        <div class=\"houali-bottom-left\">\n\n            <span class=\"scroll-line\"><\/span>\n\n            <span>EXPLORER<\/span>\n\n        <\/div>\n\n\n        <div class=\"houali-counter\">\n\n            <span class=\"current\">01<\/span>\n\n            <span class=\"slash\">\/<\/span>\n\n            <span>03<\/span>\n\n        <\/div>\n\n    <\/div>\n\n\n    <!-- ===== DOTS ===== -->\n    <div class=\"houali-dots\">\n\n        <button class=\"active\" aria-label=\"Slide 1\"><\/button>\n\n        <button aria-label=\"Slide 2\"><\/button>\n\n        <button aria-label=\"Slide 3\"><\/button>\n\n    <\/div>\n\n<\/section>\n\n\n\n<style>\n\n\/* ============================================================\n   VARIABLES\n   ============================================================ *\/\n\n.houali-luxury-hero {\n\n    --ivory: #f6f1e8;\n    --cream: #eee5d5;\n\n    --olive: #303722;\n    --olive-soft: #596043;\n\n    --gold: #b59a68;\n    --gold-light: #d8c49b;\n\n    position: relative;\n\n    width: 100%;\n\n    height: 92vh;\n\n    min-height: 680px;\n\n    max-height: 920px;\n\n    overflow: hidden;\n\n    isolation: isolate;\n\n    background: #eee9df;\n\n}\n\n\n\/* ============================================================\n   SLIDES\n   ============================================================ *\/\n\n.houali-luxury-slides {\n\n    position: absolute;\n\n    inset: 0;\n\n    z-index: 1;\n\n}\n\n\n.houali-luxury-slide {\n\n    position: absolute;\n\n    inset: 0;\n\n    background-position: center;\n\n    background-size: cover;\n\n    background-repeat: no-repeat;\n\n    opacity: 0;\n\n    animation:\n        houaliLuxurySlide 18s infinite;\n\n    transform: scale(1.03);\n\n}\n\n\n\/* ============================================================\n   IMAGE 1\n   ============================================================ *\/\n\n.houali-luxury-slide.slide-1 {\n\n    background-image:\n        url(\"https:\/\/huilerie-houali.com\/2024\/wp-content\/uploads\/2025\/10\/chaba-1.jpg\");\n\n    animation-delay: 0s;\n\n}\n\n\n\/* ============================================================\n   IMAGE 2\n   ============================================================ *\/\n\n.houali-luxury-slide.slide-2 {\n\n    background-image:\n        url(\"https:\/\/huilerie-houali.com\/2024\/wp-content\/uploads\/2026\/06\/epicee.jpg\");\n\n    animation-delay: 6s;\n\n}\n\n\n\/* ============================================================\n   IMAGE 3\n   ============================================================ *\/\n\n.houali-luxury-slide.slide-3 {\n\n    background-image:\n        url(\"https:\/\/huilerie-houali.com\/2024\/wp-content\/uploads\/2026\/06\/photo_5881874355606719856_y.jpg\");\n\n    animation-delay: 12s;\n\n}\n\n\n\/* ============================================================\n   ANIMATION\n   ============================================================ *\/\n\n@keyframes houaliLuxurySlide {\n\n    0% {\n\n        opacity: 0;\n\n        transform: scale(1.04);\n\n    }\n\n    5% {\n\n        opacity: 1;\n\n    }\n\n    30% {\n\n        opacity: 1;\n\n    }\n\n    36% {\n\n        opacity: 0;\n\n    }\n\n    100% {\n\n        opacity: 0;\n\n        transform: scale(1);\n\n    }\n\n}\n\n\n\/* ============================================================\n   OVERLAY LUMI\u00c8RE\n   ============================================================ *\/\n\n.houali-luxury-light {\n\n    position: absolute;\n\n    inset: 0;\n\n    z-index: 2;\n\n    pointer-events: none;\n\n    background:\n\n        linear-gradient(\n            90deg,\n\n            rgba(247,243,235,.98) 0%,\n\n            rgba(247,243,235,.92) 22%,\n\n            rgba(247,243,235,.68) 38%,\n\n            rgba(247,243,235,.20) 58%,\n\n            rgba(247,243,235,0) 78%\n        ),\n\n        linear-gradient(\n            0deg,\n\n            rgba(30,35,20,.20),\n\n            transparent 35%\n        );\n\n}\n\n\n\/* ============================================================\n   CONTENU\n   ============================================================ *\/\n\n.houali-luxury-content {\n\n    position: relative;\n\n    z-index: 5;\n\n    height: 100%;\n\n    width: min(1250px, 90%);\n\n    margin: auto;\n\n    display: flex;\n\n    flex-direction: column;\n\n    justify-content: center;\n\n    align-items: flex-start;\n\n    padding-left: 4%;\n\n}\n\n\n\/* ============================================================\n   MAISON HOUALI\n   ============================================================ *\/\n\n.houali-eyebrow {\n\n    display: flex;\n\n    align-items: center;\n\n    gap: 13px;\n\n    margin-bottom: 15px;\n\n    color: var(--olive);\n\n    font-family:\n        Arial,\n        sans-serif;\n\n    font-size: 10px;\n\n    font-weight: 600;\n\n    letter-spacing: 5px;\n\n}\n\n\n.houali-eyebrow span {\n\n    width: 28px;\n\n    height: 1px;\n\n    background: var(--gold);\n\n}\n\n\n.houali-eyebrow span:last-child {\n\n    width: 12px;\n\n}\n\n\n\/* ============================================================\n   ORIGINE\n   ============================================================ *\/\n\n.houali-origin {\n\n    margin-bottom: 27px;\n\n    color: #666956;\n\n    font-family:\n        Arial,\n        sans-serif;\n\n    font-size: 9px;\n\n    font-weight: 500;\n\n    letter-spacing: 4px;\n\n    text-shadow:\n        0 1px 6px rgba(255,255,255,.4);\n\n}\n\n\n\/* ============================================================\n   TITRE\n   ============================================================ *\/\n\n.houali-luxury-content h1 {\n\n    margin: 0;\n\n    padding: 0;\n\n    display: flex;\n\n    flex-direction: column;\n\n    line-height: .88;\n\n}\n\n\n.houali-luxury-content h1 small {\n\n    margin-left: 4px;\n\n    margin-bottom: 8px;\n\n    color: #454936;\n\n    font-family:\n        \"Times New Roman\",\n        Georgia,\n        serif;\n\n    font-size:\n        clamp(26px, 3vw, 43px);\n\n    font-weight: 400;\n\n    letter-spacing: 9px;\n\n}\n\n\n.houali-luxury-content h1 strong {\n\n    color: var(--olive);\n\n    font-family:\n        \"Times New Roman\",\n        Georgia,\n        serif;\n\n    font-size:\n        clamp(70px, 9vw, 138px);\n\n    font-weight: 500;\n\n    letter-spacing: -4px;\n\n}\n\n\n\/* ============================================================\n   LIGNE OR\n   ============================================================ *\/\n\n.houali-gold-line {\n\n    position: relative;\n\n    width: 105px;\n\n    height: 1px;\n\n    margin: 30px 0 25px;\n\n    background: var(--gold);\n\n}\n\n\n.houali-gold-line::after {\n\n    content: \"\";\n\n    position: absolute;\n\n    width: 5px;\n\n    height: 5px;\n\n    right: -1px;\n\n    top: -2px;\n\n    border-radius: 50%;\n\n    background: var(--gold);\n\n}\n\n\n\/* ============================================================\n   TEXTE PRINCIPAL \u2014 PLUS LISIBLE\n   ============================================================ *\/\n\n.houali-main-text {\n\n    margin: 0;\n\n    color: #3f4237;\n\n    font-family:\n        Arial,\n        sans-serif;\n\n    font-size: 15.5px;\n\n    font-weight: 400;\n\n    line-height: 1.8;\n\n    letter-spacing: .4px;\n\n    text-shadow:\n        0 1px 8px rgba(255,255,255,.25);\n\n}\n\n\n\/* ============================================================\n   BOUTONS\n   ============================================================ *\/\n\n.houali-actions {\n\n    display: flex;\n\n    align-items: center;\n\n    gap: 28px;\n\n    margin-top: 34px;\n\n}\n\n\n\/* ============================================================\n   BOUTON PRINCIPAL\n   ============================================================ *\/\n\n.houali-btn-primary {\n\n    display: inline-flex;\n\n    align-items: center;\n\n    gap: 30px;\n\n    padding: 15px 20px 15px 22px;\n\n    color: #fff !important;\n\n    background: var(--olive);\n\n    border: 1px solid var(--olive);\n\n    text-decoration: none !important;\n\n    font-family:\n        Arial,\n        sans-serif;\n\n    font-size: 10px;\n\n    font-weight: 600;\n\n    letter-spacing: 2px;\n\n    text-transform: uppercase;\n\n    transition:\n        .35s ease;\n\n}\n\n\n.houali-btn-primary b {\n\n    font-size: 18px;\n\n    font-weight: 300;\n\n    line-height: 1;\n\n    transition: .35s ease;\n\n}\n\n\n.houali-btn-primary:hover {\n\n    color: var(--olive) !important;\n\n    background: transparent;\n\n    border-color: var(--olive);\n\n}\n\n\n.houali-btn-primary:hover b {\n\n    transform: translateX(5px);\n\n}\n\n\n\/* ============================================================\n   BOUTON COMMANDER \u2014 PLUS VISIBLE\n   ============================================================ *\/\n\n.houali-btn-secondary {\n\n    position: relative;\n\n    display: inline-flex;\n\n    align-items: center;\n\n    justify-content: center;\n\n    padding: 12px 18px;\n\n    color: #4b5139 !important;\n\n    background:\n        rgba(255,255,255,.55);\n\n    border:\n        1px solid rgba(181,154,104,.80);\n\n    text-decoration: none !important;\n\n    font-family:\n        Arial,\n        sans-serif;\n\n    font-size: 10px;\n\n    font-weight: 600;\n\n    letter-spacing: 2px;\n\n    text-transform: uppercase;\n\n    backdrop-filter: blur(8px);\n\n    -webkit-backdrop-filter: blur(8px);\n\n    box-shadow:\n        0 4px 15px rgba(60,50,30,.06);\n\n    transition:\n        all .35s ease;\n\n}\n\n\n.houali-btn-secondary::after {\n\n    display: none;\n\n}\n\n\n.houali-btn-secondary:hover {\n\n    color: #ffffff !important;\n\n    background:\n        #596043;\n\n    border-color:\n        #596043;\n\n    transform:\n        translateY(-2px);\n\n    box-shadow:\n        0 8px 22px rgba(48,55,34,.18);\n\n}\n\n\n\/* ============================================================\n   MARQUE LAT\u00c9RALE\n   ============================================================ *\/\n\n.houali-side-mark {\n\n    position: absolute;\n\n    z-index: 6;\n\n    right: 38px;\n\n    top: 50%;\n\n    transform:\n        translateY(-50%)\n        rotate(90deg);\n\n    display: flex;\n\n    align-items: center;\n\n    gap: 13px;\n\n    color:\n        rgba(48,55,34,.65);\n\n    font-family:\n        Arial,\n        sans-serif;\n\n    font-size: 8px;\n\n    letter-spacing: 4px;\n\n}\n\n\n.houali-side-mark span:first-child {\n\n    font-family:\n        Georgia,\n        serif;\n\n    font-size: 20px;\n\n    letter-spacing: 0;\n\n}\n\n\n.houali-side-mark i {\n\n    width: 35px;\n\n    height: 1px;\n\n    background:\n        var(--gold);\n\n}\n\n\n\/* ============================================================\n   BAS HERO\n   ============================================================ *\/\n\n.houali-bottom {\n\n    position: absolute;\n\n    z-index: 7;\n\n    bottom: 30px;\n\n    left: 5%;\n\n    right: 5%;\n\n    display: flex;\n\n    align-items: center;\n\n    justify-content: space-between;\n\n}\n\n\n\/* ============================================================\n   EXPLORER\n   ============================================================ *\/\n\n.houali-bottom-left {\n\n    display: flex;\n\n    align-items: center;\n\n    gap: 12px;\n\n    color:\n        rgba(255,255,255,.9);\n\n    font-family:\n        Arial,\n        sans-serif;\n\n    font-size: 8px;\n\n    letter-spacing: 3px;\n\n}\n\n\n.scroll-line {\n\n    display: block;\n\n    width: 38px;\n\n    height: 1px;\n\n    background:\n        rgba(255,255,255,.7);\n\n}\n\n\n\/* ============================================================\n   COMPTEUR\n   ============================================================ *\/\n\n.houali-counter {\n\n    color:\n        rgba(255,255,255,.85);\n\n    font-family:\n        Arial,\n        sans-serif;\n\n    font-size: 9px;\n\n    letter-spacing: 3px;\n\n}\n\n\n.houali-counter .current {\n\n    color: #fff;\n\n    font-size: 13px;\n\n}\n\n\n.houali-counter .slash {\n\n    margin: 0 7px;\n\n    color:\n        var(--gold-light);\n\n}\n\n\n\/* ============================================================\n   DOTS\n   ============================================================ *\/\n\n.houali-dots {\n\n    position: absolute;\n\n    z-index: 8;\n\n    right: 5%;\n\n    bottom: 30px;\n\n    display: none;\n\n    gap: 7px;\n\n}\n\n\n.houali-dots button {\n\n    width: 20px;\n\n    height: 1px;\n\n    padding: 0;\n\n    border: none;\n\n    background:\n        rgba(255,255,255,.5);\n\n}\n\n\n.houali-dots button.active {\n\n    width: 38px;\n\n    background: #fff;\n\n}\n\n\n\/* ============================================================\n   ANIMATION CONTENU\n   ============================================================ *\/\n\n.houali-luxury-content > * {\n\n    animation:\n        houaliContentAppear 1.2s ease both;\n\n}\n\n\n.houali-luxury-content .houali-origin {\n\n    animation-delay: .15s;\n\n}\n\n\n.houali-luxury-content h1 {\n\n    animation-delay: .25s;\n\n}\n\n\n.houali-luxury-content .houali-gold-line {\n\n    animation-delay: .4s;\n\n}\n\n\n.houali-luxury-content .houali-main-text {\n\n    animation-delay: .5s;\n\n}\n\n\n.houali-luxury-content .houali-actions {\n\n    animation-delay: .65s;\n\n}\n\n\n@keyframes houaliContentAppear {\n\n    from {\n\n        opacity: 0;\n\n        transform:\n            translateY(18px);\n\n    }\n\n    to {\n\n        opacity: 1;\n\n        transform:\n            translateY(0);\n\n    }\n\n}\n\n\n\/* ============================================================\n   TABLETTE\n   ============================================================ *\/\n\n@media (max-width: 900px) {\n\n    .houali-luxury-hero {\n\n        height: 82vh;\n\n        min-height: 620px;\n\n    }\n\n\n    .houali-luxury-light {\n\n        background:\n\n            linear-gradient(\n                90deg,\n\n                rgba(247,243,235,.97) 0%,\n\n                rgba(247,243,235,.87) 40%,\n\n                rgba(247,243,235,.35) 70%,\n\n                transparent 100%\n            );\n\n    }\n\n\n    .houali-luxury-content {\n\n        padding-left: 2%;\n\n    }\n\n\n    .houali-luxury-content h1 strong {\n\n        font-size:\n            clamp(62px, 12vw, 100px);\n\n    }\n\n\n    .houali-side-mark {\n\n        right: 15px;\n\n    }\n\n}\n\n\n\/* ============================================================\n   MOBILE\n   ============================================================ *\/\n\n@media (max-width: 600px) {\n\n    .houali-luxury-hero {\n\n        height: 88vh;\n\n        min-height: 650px;\n\n        max-height: none;\n\n    }\n\n\n    .houali-luxury-slides {\n\n        height: 100%;\n\n    }\n\n\n    .houali-luxury-slide {\n\n        background-position:\n            62% center;\n\n    }\n\n\n    .houali-luxury-light {\n\n        background:\n\n            linear-gradient(\n                180deg,\n\n                rgba(247,243,235,.95) 0%,\n\n                rgba(247,243,235,.88) 42%,\n\n                rgba(247,243,235,.35) 72%,\n\n                rgba(30,35,20,.20) 100%\n            );\n\n    }\n\n\n    .houali-luxury-content {\n\n        width: 90%;\n\n        padding: 0;\n\n        justify-content: center;\n\n        align-items: flex-start;\n\n    }\n\n\n    .houali-eyebrow {\n\n        font-size: 8px;\n\n        letter-spacing: 3px;\n\n        gap: 8px;\n\n    }\n\n\n    .houali-eyebrow span {\n\n        width: 18px;\n\n    }\n\n\n    .houali-origin {\n\n        font-size: 7px;\n\n        letter-spacing: 2.5px;\n\n        margin-bottom: 20px;\n\n    }\n\n\n    .houali-luxury-content h1 small {\n\n        font-size: 24px;\n\n        letter-spacing: 6px;\n\n    }\n\n\n    .houali-luxury-content h1 strong {\n\n        font-size: 68px;\n\n        letter-spacing: -2px;\n\n    }\n\n\n    .houali-gold-line {\n\n        width: 75px;\n\n        margin: 22px 0 20px;\n\n    }\n\n\n    .houali-main-text {\n\n        font-size: 13px;\n\n        line-height: 1.65;\n\n        max-width: 310px;\n\n    }\n\n\n    .houali-actions {\n\n        margin-top: 28px;\n\n        gap: 20px;\n\n        flex-wrap: wrap;\n\n    }\n\n\n    .houali-btn-primary {\n\n        padding: 14px 16px;\n\n        gap: 20px;\n\n        font-size: 8px;\n\n    }\n\n\n    .houali-btn-secondary {\n\n        padding: 11px 15px;\n\n        font-size: 8px;\n\n    }\n\n\n    .houali-side-mark {\n\n        display: none;\n\n    }\n\n\n    .houali-bottom {\n\n        left: 5%;\n\n        right: 5%;\n\n        bottom: 22px;\n\n    }\n\n\n    .houali-bottom-left {\n\n        font-size: 7px;\n\n        letter-spacing: 2px;\n\n    }\n\n\n    .houali-counter {\n\n        font-size: 8px;\n\n    }\n\n}\n\n\n\/* ============================================================\n   ACCESSIBILIT\u00c9\n   ============================================================ *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n    .houali-luxury-slide {\n\n        animation: none;\n\n    }\n\n\n    .houali-luxury-slide.slide-1 {\n\n        opacity: 1;\n\n    }\n\n\n    .houali-luxury-content > * {\n\n        animation: none;\n\n    }\n\n}\n\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-58f5cd9 e-flex e-con-boxed e-con e-parent\" data-id=\"58f5cd9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-43f7969 elementor-widget elementor-widget-html\" data-id=\"43f7969\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ========================================================== -->\n<!-- ===== SECTION PRODUITS - VERSION CHIC & PREMIUM ===== -->\n<!-- ========================================================== -->\n\n<div class=\"hh-produits\">\n\n    <!-- ===== HEADER ===== -->\n    <div class=\"hh-header\">\n        <span class=\"hh-eyebrow\">\u2726 Collection Signature \u2726<\/span>\n        <h2>Nos huiles d'exception<\/h2>\n        <p class=\"hh-sous-titre\">\n            Une s\u00e9lection rare, press\u00e9e \u00e0 froid, au c\u0153ur de la Kabylie\n        <\/p>\n        <div class=\"hh-sep\"><span><\/span><\/div>\n    <\/div>\n\n    <!-- ===== SLIDER ===== -->\n    <div class=\"hh-wrapper\">\n\n        <button class=\"hh-arrow hh-prev\" aria-label=\"Pr\u00e9c\u00e9dent\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\"\n                 stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M15 18l-6-6 6-6\"\/>\n            <\/svg>\n        <\/button>\n\n        <div class=\"hh-container\">\n\n            <div class=\"hh-track\">\n\n                <!-- PRODUIT 1 -->\n                <article class=\"hh-card\">\n\n                    <div class=\"hh-img\">\n                        <img decoding=\"async\"\n                            src=\"https:\/\/huilerie-houali.com\/2024\/wp-content\/uploads\/2026\/06\/bouteilles.jpg\"\n                            alt=\"Huile d'olive vierge\"\n                            loading=\"lazy\"\n                        >\n\n                        <span class=\"hh-badge\">\n                            Best-seller\n                        <\/span>\n                    <\/div>\n\n                    <div class=\"hh-info\">\n\n                        <h3>Huile d'olive vierge<\/h3>\n\n                        <p>Pure & authentique<\/p>\n\n                        <div class=\"hh-prix-row\">\n\n                            <span class=\"hh-prix\">\n                                800 <small>DA<\/small>\n                            <\/span>\n\n                            <span class=\"hh-arrow-ico\">\n                                \u2192\n                            <\/span>\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/article>\n\n\n                <!-- PRODUIT 2 -->\n                <article class=\"hh-card\">\n\n                    <div class=\"hh-img\">\n\n                        <img decoding=\"async\"\n                            src=\"https:\/\/huilerie-houali.com\/2024\/wp-content\/uploads\/2025\/05\/entisco.jpg\"\n                            alt=\"Huile de lentisque\"\n                            loading=\"lazy\"\n                        >\n\n                        <span class=\"hh-badge hh-badge-rare\">\n                            Rare\n                        <\/span>\n\n                    <\/div>\n\n                    <div class=\"hh-info\">\n\n                        <h3>Huile de lentisque<\/h3>\n\n                        <p>Rare & pr\u00e9cieuse<\/p>\n\n                        <div class=\"hh-prix-row\">\n\n                            <span class=\"hh-prix\">\n                                1000 <small>DA<\/small>\n                            <\/span>\n\n                            <span class=\"hh-arrow-ico\">\n                                \u2192\n                            <\/span>\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/article>\n\n\n                <!-- PRODUIT 3 -->\n                <article class=\"hh-card\">\n\n                    <div class=\"hh-img\">\n\n                        <img decoding=\"async\"\n                            src=\"https:\/\/huilerie-houali.com\/2024\/wp-content\/uploads\/2025\/09\/88.jpg\"\n                            alt=\"Extra vierge\"\n                            loading=\"lazy\"\n                        >\n\n                    <\/div>\n\n                    <div class=\"hh-info\">\n\n                        <h3>Extra vierge<\/h3>\n\n                        <p>L'excellence \u00e0 l'\u00e9tat pur<\/p>\n\n                        <div class=\"hh-prix-row\">\n\n                            <span class=\"hh-prix\">\n                                500 <small>DA<\/small>\n                            <\/span>\n\n                            <span class=\"hh-arrow-ico\">\n                                \u2192\n                            <\/span>\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/article>\n\n\n                <!-- PRODUIT 4 -->\n                <article class=\"hh-card\">\n\n                    <div class=\"hh-img\">\n\n                        <img decoding=\"async\"\n                            src=\"https:\/\/huilerie-houali.com\/2024\/wp-content\/uploads\/2026\/06\/epicee.jpg\"\n                            alt=\"Huile \u00e9pic\u00e9e\"\n                            loading=\"lazy\"\n                        >\n\n                        <span class=\"hh-badge hh-badge-new\">\n                            Nouveau\n                        <\/span>\n\n                    <\/div>\n\n                    <div class=\"hh-info\">\n\n                        <h3>Huile d'olive \u00e9pic\u00e9e<\/h3>\n\n                        <p>Explosion de saveurs<\/p>\n\n                        <div class=\"hh-prix-row\">\n\n                            <span class=\"hh-prix\">\n                                500 <small>DA<\/small>\n                            <\/span>\n\n                            <span class=\"hh-arrow-ico\">\n                                \u2192\n                            <\/span>\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/article>\n\n\n                <!-- PRODUIT 5 -->\n                <article class=\"hh-card\">\n\n                    <div class=\"hh-img\">\n\n                        <img decoding=\"async\"\n                            src=\"https:\/\/huilerie-houali.com\/2024\/wp-content\/uploads\/2026\/06\/tapenade.jpg\"\n                            alt=\"Tapenade\"\n                            loading=\"lazy\"\n                        >\n\n                    <\/div>\n\n                    <div class=\"hh-info\">\n\n                        <h3>Tapenade<\/h3>\n\n                        <p>Tradition proven\u00e7ale<\/p>\n\n                        <div class=\"hh-prix-row\">\n\n                            <span class=\"hh-prix\">\n                                400 <small>DA<\/small>\n                            <\/span>\n\n                            <span class=\"hh-arrow-ico\">\n                                \u2192\n                            <\/span>\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/article>\n\n\n                <!-- PRODUIT 6 -->\n                <article class=\"hh-card\">\n\n                    <div class=\"hh-img\">\n\n                        <img decoding=\"async\"\n                            src=\"https:\/\/huilerie-houali.com\/2024\/wp-content\/uploads\/2026\/06\/photo_5881874355606719856_y.jpg\"\n                            alt=\"Coffrets\"\n                            loading=\"lazy\"\n                        >\n\n                        <span class=\"hh-badge hh-badge-cadeau\">\n                            Cadeau\n                        <\/span>\n\n                    <\/div>\n\n                    <div class=\"hh-info\">\n\n                        <h3>Coffrets<\/h3>\n\n                        <p>Id\u00e9e cadeau raffin\u00e9e<\/p>\n\n                        <div class=\"hh-prix-row\">\n\n                            <span class=\"hh-prix\">\n                                1500 <small>DA<\/small>\n                            <\/span>\n\n                            <span class=\"hh-arrow-ico\">\n                                \u2192\n                            <\/span>\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/article>\n\n\n                <!-- PRODUIT 7 : SAVONS -->\n                <article class=\"hh-card\">\n\n                    <div class=\"hh-img\">\n\n                        <img decoding=\"async\"\n                            src=\"https:\/\/huilerie-houali.com\/2024\/wp-content\/uploads\/2026\/07\/savon-waw.png\"\n                            alt=\"Savons Huilerie Houali\"\n                            loading=\"lazy\"\n                        >\n\n                    <\/div>\n\n                    <div class=\"hh-info\">\n\n                        <h3>Savons<\/h3>\n\n                        <p>Douceur naturelle<\/p>\n\n                        <div class=\"hh-prix-row\">\n\n                            <span class=\"hh-prix\">\n                                350 <small>DA<\/small>\n                            <\/span>\n\n                            <span class=\"hh-arrow-ico\">\n                                \u2192\n                            <\/span>\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/article>\n\n            <\/div>\n\n        <\/div>\n\n\n        <button class=\"hh-arrow hh-next\" aria-label=\"Suivant\">\n\n            <svg viewBox=\"0 0 24 24\" fill=\"none\"\n                 stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M9 18l6-6-6-6\"\/>\n            <\/svg>\n\n        <\/button>\n\n    <\/div>\n\n\n    <!-- ===== INDICATEURS ===== -->\n    <div class=\"hh-dots\"><\/div>\n\n\n    <!-- ===== BOUTON ===== -->\n    <div class=\"hh-footer\">\n\n        <a href=\"\/2024\/produits\/\" class=\"hh-btn\">\n\n            <span>\n                D\u00e9couvrir toute la boutique\n            <\/span>\n\n            <svg viewBox=\"0 0 24 24\"\n                 fill=\"none\"\n                 stroke=\"currentColor\"\n                 stroke-width=\"2\">\n\n                <path d=\"M5 12h14M13 6l6 6-6 6\"\/>\n\n            <\/svg>\n\n        <\/a>\n\n    <\/div>\n\n<\/div>\n\n\n<!-- ========================================================== -->\n<!-- ===== JAVASCRIPT ===== -->\n<!-- ========================================================== -->\n\n<script>\n\ndocument.addEventListener('DOMContentLoaded', function() {\n\n    const track = document.querySelector('.hh-track');\n    const cards = document.querySelectorAll('.hh-card');\n    const prevBtn = document.querySelector('.hh-prev');\n    const nextBtn = document.querySelector('.hh-next');\n    const dotsContainer = document.querySelector('.hh-dots');\n    const container = document.querySelector('.hh-container');\n\n    let currentIndex = 0;\n    let cardsPerView = 4;\n    let autoplayTimer = null;\n\n\n    \/* ===============================\n       NOMBRE DE CARTES\n       =============================== *\/\n\n    function updateCardsPerView() {\n\n        if (window.innerWidth >= 1200) {\n            return 4;\n        }\n\n        if (window.innerWidth >= 992) {\n            return 3;\n        }\n\n        if (window.innerWidth >= 640) {\n            return 2;\n        }\n\n        return 1;\n    }\n\n\n    cardsPerView = updateCardsPerView();\n\n\n    \/* ===============================\n       ESPACEMENT\n       =============================== *\/\n\n    function getGap() {\n\n        return window.innerWidth < 640\n            ? 14\n            : 22;\n\n    }\n\n\n    \/* ===============================\n       NOMBRE DE GROUPES\n       =============================== *\/\n\n    function getTotalDots() {\n\n        return Math.ceil(\n            cards.length \/ cardsPerView\n        );\n\n    }\n\n\n    \/* ===============================\n       DOTS\n       =============================== *\/\n\n    function renderDots() {\n\n        const total = getTotalDots();\n\n        dotsContainer.innerHTML = '';\n\n        for (let i = 0; i < total; i++) {\n\n            const dot = document.createElement('button');\n\n            dot.classList.add('hh-dot');\n\n            if (i === 0) {\n                dot.classList.add('active');\n            }\n\n            dot.dataset.index = i;\n\n            dot.setAttribute(\n                'aria-label',\n                'Aller au groupe ' + (i + 1)\n            );\n\n            dot.addEventListener(\n                'click',\n                () => goToSlide(i)\n            );\n\n            dotsContainer.appendChild(dot);\n\n        }\n\n    }\n\n\n    \/* ===============================\n       UPDATE DOTS\n       =============================== *\/\n\n    function updateDots() {\n\n        document\n            .querySelectorAll('.hh-dot')\n            .forEach((dot, index) => {\n\n                dot.classList.toggle(\n                    'active',\n                    index === currentIndex\n                );\n\n            });\n\n    }\n\n\n    \/* ===============================\n       LARGEUR CARTE\n       =============================== *\/\n\n    function getCardWidth() {\n\n        const cw = container.offsetWidth;\n\n        const gap = getGap();\n\n        return (\n            cw -\n            (cardsPerView - 1) * gap\n        ) \/ cardsPerView;\n\n    }\n\n\n    \/* ===============================\n       SLIDE\n       =============================== *\/\n\n    function goToSlide(index) {\n\n        const maxIndex =\n            getTotalDots() - 1;\n\n        if (index < 0) {\n            index = maxIndex;\n        }\n\n        if (index > maxIndex) {\n            index = 0;\n        }\n\n        currentIndex = index;\n\n        const cardWidth =\n            getCardWidth();\n\n        const gap =\n            getGap();\n\n        const offset =\n            index *\n            (cardWidth + gap) *\n            cardsPerView;\n\n        track.style.transform =\n            'translateX(-' +\n            offset +\n            'px)';\n\n        updateDots();\n\n    }\n\n\n    \/* ===============================\n       NEXT \/ PREVIOUS\n       =============================== *\/\n\n    function nextSlide() {\n\n        goToSlide(\n            currentIndex + 1\n        );\n\n    }\n\n\n    function prevSlide() {\n\n        goToSlide(\n            currentIndex - 1\n        );\n\n    }\n\n\n    \/* ===============================\n       BOUTONS\n       =============================== *\/\n\n    prevBtn.addEventListener(\n        'click',\n        () => {\n\n            prevSlide();\n\n            resetAutoplay();\n\n        }\n    );\n\n\n    nextBtn.addEventListener(\n        'click',\n        () => {\n\n            nextSlide();\n\n            resetAutoplay();\n\n        }\n    );\n\n\n    \/* ===============================\n       AUTOPLAY\n       =============================== *\/\n\n    function startAutoplay() {\n\n        autoplayTimer =\n            setInterval(\n                nextSlide,\n                5000\n            );\n\n    }\n\n\n    function resetAutoplay() {\n\n        clearInterval(\n            autoplayTimer\n        );\n\n        startAutoplay();\n\n    }\n\n\n    \/* ===============================\n       SWIPE MOBILE\n       =============================== *\/\n\n    let touchStartX = 0;\n\n\n    track.addEventListener(\n        'touchstart',\n        e => {\n\n            touchStartX =\n                e.touches[0].clientX;\n\n        },\n        {\n            passive: true\n        }\n    );\n\n\n    track.addEventListener(\n        'touchend',\n        e => {\n\n            const diff =\n                touchStartX -\n                e.changedTouches[0].clientX;\n\n            if (Math.abs(diff) > 50) {\n\n                diff > 0\n                    ? nextSlide()\n                    : prevSlide();\n\n                resetAutoplay();\n\n            }\n\n        },\n        {\n            passive: true\n        }\n    );\n\n\n    \/* ===============================\n       INITIALISATION\n       =============================== *\/\n\n    renderDots();\n\n    goToSlide(0);\n\n    startAutoplay();\n\n\n    \/* ===============================\n       RESIZE\n       =============================== *\/\n\n    let resizeTimer;\n\n\n    window.addEventListener(\n        'resize',\n        () => {\n\n            clearTimeout(\n                resizeTimer\n            );\n\n            resizeTimer =\n                setTimeout(\n                    () => {\n\n                        cardsPerView =\n                            updateCardsPerView();\n\n                        renderDots();\n\n                        goToSlide(0);\n\n                    },\n                    200\n                );\n\n        }\n    );\n\n});\n\n<\/script>\n\n\n<!-- ========================================================== -->\n<!-- ===== STYLES CHIC & PREMIUM ===== -->\n<!-- ========================================================== -->\n\n<style>\n\n\/* ==========================================================\n   ROOT\n   ========================================================== *\/\n\n.hh-produits {\n\n    --or: #c9a227;\n    --or-clair: #e8d27a;\n    --or-fonce: #8a6d10;\n\n    --noir: #14110d;\n\n    --creme: #faf7f1;\n    --creme-2: #f2ebdd;\n\n    --texte: #2c2418;\n    --texte-doux: #7a6d5a;\n\n    --border:\n        rgba(201, 162, 39, 0.15);\n\n    position: relative;\n\n    max-width: 1280px;\n\n    margin: 70px auto;\n\n    padding: 60px 30px;\n\n    font-family:\n        'Segoe UI',\n        Tahoma,\n        sans-serif;\n\n    background:\n        linear-gradient(\n            135deg,\n            #fdfbf6 0%,\n            #f7f1e3 100%\n        );\n\n    border-radius: 28px;\n\n    overflow: hidden;\n}\n\n\n\/* ==========================================================\n   TEXTURE\n   ========================================================== *\/\n\n.hh-produits::before {\n\n    content: '';\n\n    position: absolute;\n\n    inset: 0;\n\n    background-image:\n        radial-gradient(\n            circle at 1px 1px,\n            rgba(201,162,39,0.08) 1px,\n            transparent 0\n        );\n\n    background-size: 24px 24px;\n\n    pointer-events: none;\n\n    opacity: 0.6;\n}\n\n\n\/* ==========================================================\n   HEADER\n   ========================================================== *\/\n\n.hh-header {\n\n    text-align: center;\n\n    margin-bottom: 45px;\n\n    position: relative;\n\n    z-index: 1;\n}\n\n\n.hh-eyebrow {\n\n    display: inline-block;\n\n    font-size: 11px;\n\n    letter-spacing: 3px;\n\n    text-transform: uppercase;\n\n    color: var(--or-fonce);\n\n    font-weight: 600;\n\n    margin-bottom: 14px;\n\n    opacity: 0.85;\n}\n\n\n.hh-header h2 {\n\n    font-family:\n        'Georgia',\n        serif;\n\n    font-size: 42px;\n\n    font-weight: 400;\n\n    color: var(--noir);\n\n    margin: 0 0 12px;\n\n    letter-spacing: -0.5px;\n\n    line-height: 1.15;\n}\n\n\n.hh-header h2::after {\n\n    content: '';\n\n    display: block;\n\n    width: 60px;\n\n    height: 2px;\n\n    background:\n        linear-gradient(\n            90deg,\n            transparent,\n            var(--or),\n            transparent\n        );\n\n    margin: 16px auto 0;\n}\n\n\n.hh-sous-titre {\n\n    font-size: 14px;\n\n    color: var(--texte-doux);\n\n    font-weight: 400;\n\n    max-width: 520px;\n\n    margin: 0 auto;\n\n    line-height: 1.6;\n\n    letter-spacing: 0.2px;\n}\n\n\n.hh-sep {\n\n    display: none;\n}\n\n\n\/* ==========================================================\n   SLIDER\n   ========================================================== *\/\n\n.hh-wrapper {\n\n    position: relative;\n\n    padding: 0 50px;\n\n    z-index: 1;\n}\n\n\n.hh-container {\n\n    overflow: hidden;\n\n    padding: 20px 0 30px;\n}\n\n\n.hh-track {\n\n    display: flex;\n\n    gap: 22px;\n\n    transition:\n        transform 0.55s\n        cubic-bezier(\n            0.25,\n            0.8,\n            0.25,\n            1\n        );\n\n    will-change: transform;\n}\n\n\n\/* ==========================================================\n   CARTE\n   ========================================================== *\/\n\n.hh-card {\n\n    flex: 0 0\n        calc(25% - 17px);\n\n    background: #ffffff;\n\n    border-radius: 20px;\n\n    overflow: hidden;\n\n    position: relative;\n\n    transition:\n        all 0.45s\n        cubic-bezier(\n            0.25,\n            0.8,\n            0.25,\n            1\n        );\n\n    box-shadow:\n        0 1px 2px\n            rgba(20,17,13,0.03),\n\n        0 8px 24px\n            rgba(20,17,13,0.06);\n\n    border:\n        1px solid\n        rgba(201,162,39,0.08);\n\n    cursor: pointer;\n}\n\n\n.hh-card:hover {\n\n    transform:\n        translateY(-8px);\n\n    box-shadow:\n        0 4px 8px\n            rgba(20,17,13,0.04),\n\n        0 24px 48px\n            rgba(201,162,39,0.18),\n\n        0 0 0 1px\n            rgba(201,162,39,0.25);\n}\n\n\n\/* ==========================================================\n   IMAGE\n   ========================================================== *\/\n\n.hh-img {\n\n    position: relative;\n\n    width: 100%;\n\n    aspect-ratio: 4 \/ 5;\n\n    overflow: hidden;\n\n    background:\n        linear-gradient(\n            135deg,\n            #f8f3e8,\n            #ece2cc\n        );\n}\n\n\n.hh-img::after {\n\n    content: '';\n\n    position: absolute;\n\n    inset: 0;\n\n    background:\n        linear-gradient(\n            180deg,\n            transparent 55%,\n            rgba(20,17,13,0.35) 100%\n        );\n\n    opacity: 0;\n\n    transition:\n        opacity 0.4s ease;\n}\n\n\n.hh-card:hover\n.hh-img::after {\n\n    opacity: 1;\n}\n\n\n.hh-img img {\n\n    width: 100%;\n\n    height: 100%;\n\n    object-fit: cover;\n\n    display: block;\n\n    transition:\n        transform 0.8s\n        cubic-bezier(\n            0.25,\n            0.8,\n            0.25,\n            1\n        );\n}\n\n\n.hh-card:hover\n.hh-img img {\n\n    transform:\n        scale(1.08);\n}\n\n\n\/* ==========================================================\n   BADGES\n   ========================================================== *\/\n\n.hh-badge {\n\n    position: absolute;\n\n    top: 14px;\n\n    left: 14px;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--or),\n            var(--or-fonce)\n        );\n\n    color: #fff;\n\n    font-size: 10px;\n\n    font-weight: 700;\n\n    letter-spacing: 1px;\n\n    text-transform: uppercase;\n\n    padding: 5px 11px;\n\n    border-radius: 50px;\n\n    z-index: 2;\n\n    box-shadow:\n        0 4px 12px\n        rgba(201,162,39,0.35);\n}\n\n\n.hh-badge-rare {\n\n    background:\n        linear-gradient(\n            135deg,\n            #4a3a6b,\n            #2d2145\n        );\n\n    box-shadow:\n        0 4px 12px\n        rgba(74,58,107,0.35);\n}\n\n\n.hh-badge-new {\n\n    background:\n        linear-gradient(\n            135deg,\n            #2d7a4f,\n            #1c4f32\n        );\n\n    box-shadow:\n        0 4px 12px\n        rgba(45,122,79,0.35);\n}\n\n\n.hh-badge-cadeau {\n\n    background:\n        linear-gradient(\n            135deg,\n            #b84545,\n            #7a2b2b\n        );\n\n    box-shadow:\n        0 4px 12px\n        rgba(184,69,69,0.35);\n}\n\n\n\/* ==========================================================\n   INFO\n   ========================================================== *\/\n\n.hh-info {\n\n    padding:\n        18px\n        18px\n        20px;\n\n    position: relative;\n}\n\n\n.hh-info h3 {\n\n    font-family:\n        'Georgia',\n        serif;\n\n    font-size: 16px;\n\n    font-weight: 500;\n\n    color: var(--noir);\n\n    margin: 0 0 4px;\n\n    line-height: 1.3;\n\n    letter-spacing: -0.2px;\n}\n\n\n.hh-info p {\n\n    font-size: 12px;\n\n    color: var(--texte-doux);\n\n    font-style: italic;\n\n    margin: 0 0 14px;\n\n    font-weight: 300;\n}\n\n\n.hh-prix-row {\n\n    display: flex;\n\n    align-items: center;\n\n    justify-content: space-between;\n\n    padding-top: 12px;\n\n    border-top:\n        1px solid\n        rgba(201,162,39,0.15);\n}\n\n\n.hh-prix {\n\n    font-family:\n        'Georgia',\n        serif;\n\n    font-size: 19px;\n\n    font-weight: 700;\n\n    color: var(--or-fonce);\n\n    letter-spacing: -0.3px;\n}\n\n\n.hh-prix small {\n\n    font-size: 11px;\n\n    font-weight: 500;\n\n    color: var(--texte-doux);\n\n    margin-left: 2px;\n}\n\n\n.hh-arrow-ico {\n\n    display: inline-flex;\n\n    align-items: center;\n\n    justify-content: center;\n\n    width: 30px;\n\n    height: 30px;\n\n    border-radius: 50%;\n\n    background: var(--creme-2);\n\n    color: var(--or-fonce);\n\n    font-size: 14px;\n\n    transition:\n        all 0.35s ease;\n}\n\n\n.hh-card:hover\n.hh-arrow-ico {\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--or),\n            var(--or-fonce)\n        );\n\n    color: #fff;\n\n    transform:\n        translateX(4px);\n}\n\n\n\/* ==========================================================\n   FLECHES\n   ========================================================== *\/\n\n.hh-arrow {\n\n    position: absolute;\n\n    top: 50%;\n\n    transform:\n        translateY(-50%);\n\n    width: 44px;\n\n    height: 44px;\n\n    border-radius: 50%;\n\n    background:\n        rgba(255,255,255,0.7);\n\n    backdrop-filter:\n        blur(12px);\n\n    -webkit-backdrop-filter:\n        blur(12px);\n\n    border:\n        1px solid\n        rgba(201,162,39,0.25);\n\n    color: var(--or-fonce);\n\n    cursor: pointer;\n\n    z-index: 10;\n\n    display: flex;\n\n    align-items: center;\n\n    justify-content: center;\n\n    transition:\n        all 0.35s\n        cubic-bezier(\n            0.25,\n            0.8,\n            0.25,\n            1\n        );\n\n    box-shadow:\n        0 8px 24px\n        rgba(20,17,13,0.08);\n\n    padding: 0;\n}\n\n\n.hh-arrow svg {\n\n    width: 18px;\n\n    height: 18px;\n\n    stroke-linecap: round;\n\n    stroke-linejoin: round;\n}\n\n\n.hh-arrow:hover {\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--or),\n            var(--or-fonce)\n        );\n\n    color: #fff;\n\n    border-color: transparent;\n\n    transform:\n        translateY(-50%)\n        scale(1.1);\n\n    box-shadow:\n        0 12px 28px\n        rgba(201,162,39,0.4);\n}\n\n\n.hh-prev {\n    left: 0;\n}\n\n\n.hh-next {\n    right: 0;\n}\n\n\n\/* ==========================================================\n   DOTS\n   ========================================================== *\/\n\n.hh-dots {\n\n    display: flex;\n\n    justify-content: center;\n\n    align-items: center;\n\n    gap: 10px;\n\n    margin-top: 30px;\n\n    position: relative;\n\n    z-index: 1;\n}\n\n\n.hh-dot {\n\n    width: 28px;\n\n    height: 3px;\n\n    border-radius: 3px;\n\n    background:\n        rgba(201,162,39,0.2);\n\n    border: none;\n\n    cursor: pointer;\n\n    padding: 0;\n\n    transition:\n        all 0.4s\n        cubic-bezier(\n            0.25,\n            0.8,\n            0.25,\n            1\n        );\n}\n\n\n.hh-dot.active {\n\n    width: 48px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--or),\n            var(--or-fonce)\n        );\n\n    box-shadow:\n        0 2px 8px\n        rgba(201,162,39,0.4);\n}\n\n\n.hh-dot:hover:not(.active) {\n\n    background:\n        rgba(201,162,39,0.4);\n}\n\n\n\/* ==========================================================\n   BOUTON\n   ========================================================== *\/\n\n.hh-footer {\n\n    text-align: center;\n\n    margin-top: 40px;\n\n    position: relative;\n\n    z-index: 1;\n}\n\n\n.hh-btn {\n\n    display: inline-flex;\n\n    align-items: center;\n\n    gap: 12px;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--noir),\n            #2c2418\n        );\n\n    color: #fff !important;\n\n    padding:\n        15px 34px;\n\n    border-radius: 50px;\n\n    font-size: 13px;\n\n    font-weight: 600;\n\n    letter-spacing: 1.2px;\n\n    text-transform: uppercase;\n\n    text-decoration: none !important;\n\n    transition:\n        all 0.4s\n        cubic-bezier(\n            0.25,\n            0.8,\n            0.25,\n            1\n        );\n\n    box-shadow:\n        0 12px 32px\n        rgba(20,17,13,0.2);\n\n    position: relative;\n\n    overflow: hidden;\n}\n\n\n.hh-btn::before {\n\n    content: '';\n\n    position: absolute;\n\n    inset: 0;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--or),\n            var(--or-fonce)\n        );\n\n    opacity: 0;\n\n    transition:\n        opacity 0.4s ease;\n\n    z-index: -1;\n}\n\n\n.hh-btn:hover {\n\n    transform:\n        translateY(-3px);\n\n    box-shadow:\n        0 18px 40px\n        rgba(201,162,39,0.35);\n}\n\n\n.hh-btn:hover::before {\n\n    opacity: 1;\n}\n\n\n.hh-btn svg {\n\n    width: 16px;\n\n    height: 16px;\n\n    stroke-linecap: round;\n\n    stroke-linejoin: round;\n\n    transition:\n        transform 0.4s ease;\n}\n\n\n.hh-btn:hover svg {\n\n    transform:\n        translateX(4px);\n}\n\n\n\/* ==========================================================\n   RESPONSIVE 1200\n   ========================================================== *\/\n\n@media (max-width: 1200px) {\n\n    .hh-produits {\n\n        padding: 50px 25px;\n\n        margin: 60px auto;\n    }\n\n    .hh-header h2 {\n        font-size: 36px;\n    }\n\n    .hh-card {\n        flex: 0 0\n            calc(33.333% - 15px);\n    }\n\n}\n\n\n\/* ==========================================================\n   RESPONSIVE 992\n   ========================================================== *\/\n\n@media (max-width: 992px) {\n\n    .hh-header h2 {\n        font-size: 32px;\n    }\n\n    .hh-card {\n        flex: 0 0\n            calc(33.333% - 15px);\n    }\n\n    .hh-wrapper {\n        padding: 0 45px;\n    }\n\n}\n\n\n\/* ==========================================================\n   RESPONSIVE 768\n   ========================================================== *\/\n\n@media (max-width: 768px) {\n\n    .hh-produits {\n\n        padding: 40px 18px;\n\n        margin: 40px auto;\n\n        border-radius: 20px;\n    }\n\n    .hh-header h2 {\n        font-size: 26px;\n    }\n\n    .hh-eyebrow {\n\n        font-size: 10px;\n\n        letter-spacing: 2px;\n    }\n\n    .hh-sous-titre {\n        font-size: 13px;\n    }\n\n    .hh-card {\n\n        flex: 0 0\n            calc(50% - 11px);\n    }\n\n    .hh-wrapper {\n        padding: 0 40px;\n    }\n\n    .hh-info {\n\n        padding:\n            14px\n            14px\n            16px;\n    }\n\n    .hh-info h3 {\n        font-size: 14px;\n    }\n\n    .hh-prix {\n        font-size: 16px;\n    }\n\n    .hh-arrow {\n\n        width: 38px;\n\n        height: 38px;\n    }\n\n    .hh-arrow svg {\n\n        width: 16px;\n\n        height: 16px;\n    }\n\n    .hh-btn {\n\n        padding:\n            13px 26px;\n\n        font-size: 11px;\n    }\n\n}\n\n\n\/* ==========================================================\n   RESPONSIVE 480\n   ========================================================== *\/\n\n@media (max-width: 480px) {\n\n    .hh-produits {\n\n        padding: 35px 14px;\n\n        margin: 30px auto;\n\n        border-radius: 16px;\n    }\n\n    .hh-header h2 {\n        font-size: 22px;\n    }\n\n    .hh-header {\n        margin-bottom: 30px;\n    }\n\n    .hh-card {\n        flex: 0 0 100%;\n    }\n\n    .hh-wrapper {\n        padding: 0 38px;\n    }\n\n    .hh-img {\n        aspect-ratio: 1 \/ 1;\n    }\n\n    .hh-dots {\n        margin-top: 20px;\n    }\n\n    .hh-footer {\n        margin-top: 28px;\n    }\n\n    .hh-btn {\n\n        padding:\n            12px 22px;\n\n        font-size: 10px;\n\n        letter-spacing: 0.8px;\n    }\n\n}\n\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-46ab86c e-flex e-con-boxed e-con e-parent\" data-id=\"46ab86c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8289035 elementor-widget elementor-widget-html\" data-id=\"8289035\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ==========================================================\n     HUILERIE HOUALI \u2014 QUALITY RECORD 2026\n     Section qualit\u00e9 \/ certificat\n========================================================== -->\n\n<section class=\"hh-quality\">\n\n    <!-- ===== HEADER ===== -->\n    <div class=\"hh-quality-header\">\n\n        <div class=\"hh-quality-label\">\n            HUILERIE HOUALI\n        <\/div>\n\n        <div class=\"hh-quality-year\">\n            2026\n        <\/div>\n\n        <div class=\"hh-quality-caption\">\n            QUALIT\u00c9 \u00b7 ANALYSE \u00b7 TRA\u00c7ABILIT\u00c9\n        <\/div>\n\n    <\/div>\n\n\n    <!-- ===== MAIN ===== -->\n    <div class=\"hh-quality-main\">\n\n\n        <!-- ===== LEFT ===== -->\n        <div class=\"hh-quality-copy\">\n\n            <div class=\"hh-quality-index\">\n                \n            <\/div>\n\n            <h2>\n                La qualit\u00e9<br>\n                <em>se prouve.<\/em>\n            <\/h2>\n\n            <div class=\"hh-quality-line\"><\/div>\n\n            <p class=\"hh-quality-intro\">\n                Notre huile d'olive fait l'objet d'analyses rigoureuses\n                afin de garantir sa qualit\u00e9, sa puret\u00e9 et sa conformit\u00e9.\n            <\/p>\n\n            <p class=\"hh-quality-text\">\n                Pour chaque r\u00e9colte, notre production est soumise \u00e0 des\n                contr\u00f4les r\u00e9alis\u00e9s en laboratoire agr\u00e9\u00e9. Les r\u00e9sultats de\n                la <strong>r\u00e9colte 2026<\/strong> confirment les exigences\n                de qualit\u00e9 que nous appliquons \u00e0 notre huile.\n            <\/p>\n\n\n            <!-- ===== STATS ===== -->\n            <div class=\"hh-quality-stats\">\n\n                <div class=\"hh-stat\">\n                    <strong>&lt;0,8%<\/strong>\n                    <span>ACIDIT\u00c9<\/span>\n                <\/div>\n\n                <div class=\"hh-stat\">\n                    <strong>2026<\/strong>\n                    <span>R\u00c9COLTE<\/span>\n                <\/div>\n\n                <div class=\"hh-stat\">\n                    <strong>100%<\/strong>\n                    <span>TRA\u00c7ABILIT\u00c9<\/span>\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n\n\n        <!-- ===== CERTIFICATE ===== -->\n        <div class=\"hh-quality-document\">\n\n            <div class=\"hh-document-background\">\n                CERTIFIED\n            <\/div>\n\n            <div class=\"hh-document-frame\">\n\n                <div class=\"hh-document-top\">\n\n                    <span>\n                        DOCUMENT OFFICIEL\n                    <\/span>\n\n                    <span>\n                        HH \u00b7 2026\n                    <\/span>\n\n                <\/div>\n\n\n                <div class=\"hh-document-image\">\n\n                    <img decoding=\"async\"\n                        src=\"https:\/\/huilerie-houali.com\/2024\/wp-content\/uploads\/2026\/03\/123.jpg\"\n                        alt=\"Certificat d'analyse r\u00e9colte 2026 - Huilerie Houali\"\n                    >\n\n                <\/div>\n\n\n                <div class=\"hh-document-bottom\">\n\n                    <div>\n                        <span class=\"hh-doc-small\">\n                            ANALYSE\n                        <\/span>\n\n                        <strong>\n                            R\u00c9COLTE 2026\n                        <\/strong>\n                    <\/div>\n\n                    <div class=\"hh-doc-mark\">\n                        H\n                    <\/div>\n\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n\n\n    <!-- ===== FOOTER ===== -->\n    <div class=\"hh-quality-footer\">\n\n        <div>\n            EXTRA VIERGE\n        <\/div>\n\n        <div class=\"hh-quality-footer-line\"><\/div>\n\n        <div>\n            CONFORMIT\u00c9 \u00b7 EXCELLENCE \u00b7 TRANSPARENCE\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n\n\n<style>\n\n\/* ==========================================================\n   HOUALI \u2014 QUALITY RECORD\n========================================================== *\/\n\n.hh-quality,\n.hh-quality * {\n    box-sizing: border-box;\n}\n\n.hh-quality {\n\n    --hh-ivory: #f5f3ec;\n    --hh-paper: #faf9f5;\n    --hh-olive: #626a55;\n    --hh-dark: #20231e;\n    --hh-muted: #898a80;\n    --hh-line: #dddcd3;\n\n    width: 100%;\n\n    margin: 80px 0;\n\n    padding: 0 5vw;\n\n    background: var(--hh-ivory);\n\n    color: var(--hh-dark);\n\n    font-family:\n        \"Helvetica Neue\",\n        Helvetica,\n        Arial,\n        sans-serif;\n\n    overflow: hidden;\n}\n\n\n\/* ==========================================================\n   HEADER\n========================================================== *\/\n\n.hh-quality-header {\n\n    height: 100px;\n\n    display: grid;\n\n    grid-template-columns: 1fr auto 1fr;\n\n    align-items: center;\n\n    border-bottom: 1px solid var(--hh-line);\n\n}\n\n.hh-quality-label {\n\n    font-size: 9px;\n\n    letter-spacing: 4px;\n\n    color: var(--hh-olive);\n\n}\n\n.hh-quality-year {\n\n    font-family:\n        Georgia,\n        \"Times New Roman\",\n        serif;\n\n    font-size: 26px;\n\n    letter-spacing: 2px;\n\n}\n\n.hh-quality-caption {\n\n    justify-self: end;\n\n    font-size: 8px;\n\n    letter-spacing: 2px;\n\n    color: var(--hh-muted);\n\n}\n\n\n\/* ==========================================================\n   MAIN\n========================================================== *\/\n\n.hh-quality-main {\n\n    min-height: 650px;\n\n    display: grid;\n\n    grid-template-columns: 43% 57%;\n\n    align-items: center;\n\n}\n\n\n\/* ==========================================================\n   TEXT\n========================================================== *\/\n\n.hh-quality-copy {\n\n    padding: 80px 8% 80px 3%;\n\n}\n\n.hh-quality-index {\n\n    font-size: 9px;\n\n    letter-spacing: 3px;\n\n    color: var(--hh-muted);\n\n    margin-bottom: 28px;\n\n}\n\n.hh-quality-index span {\n\n    margin: 0 8px;\n\n    color: var(--hh-olive);\n\n}\n\n.hh-quality-copy h2 {\n\n    margin: 0;\n\n    font-family:\n        Georgia,\n        \"Times New Roman\",\n        serif;\n\n    font-weight: 400;\n\n    font-size: clamp(50px, 5vw, 76px);\n\n    line-height: .9;\n\n    letter-spacing: -3px;\n\n}\n\n.hh-quality-copy h2 em {\n\n    color: var(--hh-olive);\n\n    font-style: italic;\n\n}\n\n.hh-quality-line {\n\n    width: 55px;\n\n    height: 1px;\n\n    background: var(--hh-olive);\n\n    margin: 35px 0 28px;\n\n}\n\n.hh-quality-intro {\n\n    max-width: 390px;\n\n    margin: 0 0 20px;\n\n    font-family:\n        Georgia,\n        \"Times New Roman\",\n        serif;\n\n    font-size: 18px;\n\n    line-height: 1.5;\n\n    color: #41443d;\n\n}\n\n.hh-quality-text {\n\n    max-width: 440px;\n\n    margin: 0;\n\n    font-size: 12px;\n\n    line-height: 1.8;\n\n    color: var(--hh-muted);\n\n}\n\n.hh-quality-text strong {\n\n    color: var(--hh-dark);\n\n    font-weight: 500;\n\n}\n\n\n\/* ==========================================================\n   STATS\n========================================================== *\/\n\n.hh-quality-stats {\n\n    display: flex;\n\n    gap: 0;\n\n    margin-top: 45px;\n\n    border-top: 1px solid var(--hh-line);\n\n    max-width: 450px;\n\n}\n\n.hh-stat {\n\n    width: 33.333%;\n\n    padding: 19px 18px 0 0;\n\n    border-right: 1px solid var(--hh-line);\n\n    margin-right: 18px;\n\n}\n\n.hh-stat:last-child {\n\n    border-right: none;\n\n}\n\n.hh-stat strong {\n\n    display: block;\n\n    font-family:\n        Georgia,\n        \"Times New Roman\",\n        serif;\n\n    font-size: 25px;\n\n    font-weight: 400;\n\n    color: var(--hh-olive);\n\n    margin-bottom: 6px;\n\n}\n\n.hh-stat span {\n\n    font-size: 7px;\n\n    letter-spacing: 2px;\n\n    color: var(--hh-muted);\n\n}\n\n\n\/* ==========================================================\n   CERTIFICATE AREA\n========================================================== *\/\n\n.hh-quality-document {\n\n    position: relative;\n\n    height: 600px;\n\n    display: flex;\n\n    align-items: center;\n\n    justify-content: center;\n\n}\n\n\n\/* BIG BACKGROUND WORD *\/\n\n.hh-document-background {\n\n    position: absolute;\n\n    font-family:\n        Georgia,\n        \"Times New Roman\",\n        serif;\n\n    font-size: clamp(100px, 13vw, 190px);\n\n    color: rgba(98,106,85,.055);\n\n    letter-spacing: -10px;\n\n    transform: rotate(-90deg);\n\n    user-select: none;\n\n}\n\n\n\/* DOCUMENT *\/\n\n.hh-document-frame {\n\n    width: min(440px, 75%);\n\n    position: relative;\n\n    z-index: 2;\n\n    background: var(--hh-paper);\n\n    padding: 14px;\n\n    box-shadow:\n        0 25px 70px rgba(40,40,30,.10);\n\n    transform: rotate(1deg);\n\n    transition:\n        transform .5s ease,\n        box-shadow .5s ease;\n\n}\n\n.hh-document-frame:hover {\n\n    transform:\n        rotate(0deg)\n        translateY(-6px);\n\n    box-shadow:\n        0 35px 80px rgba(40,40,30,.14);\n\n}\n\n\n\/* DOCUMENT TOP *\/\n\n.hh-document-top {\n\n    height: 42px;\n\n    display: flex;\n\n    align-items: center;\n\n    justify-content: space-between;\n\n    padding: 0 8px;\n\n    border-bottom: 1px solid var(--hh-line);\n\n    font-size: 7px;\n\n    letter-spacing: 2px;\n\n    color: var(--hh-muted);\n\n}\n\n\n\/* CERTIFICATE IMAGE *\/\n\n.hh-document-image {\n\n    padding: 18px 12px;\n\n    background: #fff;\n\n}\n\n.hh-document-image img {\n\n    display: block;\n\n    width: 100%;\n\n    height: auto;\n\n    object-fit: contain;\n\n}\n\n\n\/* DOCUMENT BOTTOM *\/\n\n.hh-document-bottom {\n\n    height: 62px;\n\n    border-top: 1px solid var(--hh-line);\n\n    display: flex;\n\n    align-items: center;\n\n    justify-content: space-between;\n\n    padding: 0 10px;\n\n}\n\n.hh-doc-small {\n\n    display: block;\n\n    font-size: 6px;\n\n    letter-spacing: 2px;\n\n    color: var(--hh-muted);\n\n    margin-bottom: 5px;\n\n}\n\n.hh-document-bottom strong {\n\n    font-family:\n        Georgia,\n        \"Times New Roman\",\n        serif;\n\n    font-size: 13px;\n\n    font-weight: 400;\n\n}\n\n.hh-doc-mark {\n\n    width: 30px;\n\n    height: 30px;\n\n    border: 1px solid var(--hh-olive);\n\n    border-radius: 50%;\n\n    display: flex;\n\n    align-items: center;\n\n    justify-content: center;\n\n    font-family:\n        Georgia,\n        \"Times New Roman\",\n        serif;\n\n    font-size: 14px;\n\n    color: var(--hh-olive);\n\n}\n\n\n\/* ==========================================================\n   FOOTER\n========================================================== *\/\n\n.hh-quality-footer {\n\n    height: 70px;\n\n    display: flex;\n\n    align-items: center;\n\n    gap: 25px;\n\n    border-top: 1px solid var(--hh-line);\n\n    font-size: 7px;\n\n    letter-spacing: 2px;\n\n    color: var(--hh-muted);\n\n}\n\n.hh-quality-footer-line {\n\n    width: 50px;\n\n    height: 1px;\n\n    background: var(--hh-olive);\n\n}\n\n\n\/* ==========================================================\n   TABLET\n========================================================== *\/\n\n@media(max-width: 900px) {\n\n    .hh-quality-main {\n\n        grid-template-columns: 1fr;\n\n    }\n\n    .hh-quality-copy {\n\n        padding:\n            65px 5%\n            35px;\n\n    }\n\n    .hh-quality-document {\n\n        height: 570px;\n\n    }\n\n}\n\n\n\/* ==========================================================\n   MOBILE\n========================================================== *\/\n\n@media(max-width: 600px) {\n\n    .hh-quality {\n\n        margin: 50px 0;\n\n        padding: 0 20px;\n\n    }\n\n    .hh-quality-header {\n\n        height: 75px;\n\n        grid-template-columns: 1fr auto;\n\n    }\n\n    .hh-quality-caption {\n\n        display: none;\n\n    }\n\n    .hh-quality-year {\n\n        font-size: 21px;\n\n    }\n\n    .hh-quality-copy {\n\n        padding:\n            50px 5px\n            25px;\n\n    }\n\n    .hh-quality-copy h2 {\n\n        font-size: 51px;\n\n        letter-spacing: -2px;\n\n    }\n\n    .hh-quality-intro {\n\n        font-size: 16px;\n\n    }\n\n    .hh-quality-stats {\n\n        margin-top: 35px;\n\n    }\n\n    .hh-stat {\n\n        margin-right: 10px;\n\n        padding-right: 8px;\n\n    }\n\n    .hh-stat strong {\n\n        font-size: 20px;\n\n    }\n\n    .hh-quality-document {\n\n        height: 480px;\n\n    }\n\n    .hh-document-frame {\n\n        width: 90%;\n\n    }\n\n    .hh-document-background {\n\n        font-size: 90px;\n\n    }\n\n    .hh-quality-footer {\n\n        height: 60px;\n\n        justify-content: center;\n\n    }\n\n    .hh-quality-footer > div:last-child {\n\n        display: none;\n\n    }\n\n}\n\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ac96290 e-flex e-con-boxed e-con e-parent\" data-id=\"ac96290\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7c89ee8 elementor-widget elementor-widget-html\" data-id=\"7c89ee8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ========================================================== -->\n<!-- ===== POURQUOI NOUS CHOISIR - VERSION PREMIUM ===== -->\n<!-- ========================================================== -->\n\n<div class=\"hh-pourquoi\">\n    \n    <!-- ===== HEADER ===== -->\n    <div class=\"hh-pourquoi-header\">\n        <span class=\"hh-pourquoi-eyebrow\"> Nos engagements <\/span>\n        <h2>Qualit\u00e9, tradition<br>et proximit\u00e9<\/h2>\n        <p class=\"hh-pourquoi-sous-titre\">Trois raisons de faire confiance \u00e0 l'Huilerie Houali<\/p>\n        <div class=\"hh-pourquoi-sep\"><\/div>\n    <\/div>\n    \n    <!-- ===== GRILLE ===== -->\n    <div class=\"hh-pourquoi-grid\">\n        \n        <!-- ===== 1. QUALIT\u00c9 NATURELLE ===== -->\n        <article class=\"hh-pourquoi-card\">\n            <span class=\"hh-pourquoi-num\">01<\/span>\n            \n            <div class=\"hh-pourquoi-img\">\n                <img decoding=\"async\" src=\"https:\/\/huilerie-houali.com\/2024\/wp-content\/uploads\/2026\/01\/photo_2026-01-09_10-46-19.jpg\" alt=\"Qualit\u00e9 naturelle\" loading=\"lazy\">\n                <div class=\"hh-pourquoi-icone\">\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\">\n                        <path d=\"M12 2L4 8v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-8-6z\"\/>\n                        <path d=\"M12 22V12M12 12l4-2M12 12l-4-2\"\/>\n                    <\/svg>\n                <\/div>\n            <\/div>\n            \n            <div class=\"hh-pourquoi-content\">\n                <h3>Qualit\u00e9 naturelle<\/h3>\n                <p>Huile 100% pure, sans additif ni conservateur. La nature dans sa plus simple expression.<\/p>\n                <span class=\"hh-pourquoi-line\"><\/span>\n            <\/div>\n        <\/article>\n        \n        <!-- ===== 2. SAVOIR-FAIRE ===== -->\n        <article class=\"hh-pourquoi-card hh-pourquoi-featured\">\n            <span class=\"hh-pourquoi-num\">02<\/span>\n            \n            <div class=\"hh-pourquoi-img\">\n                <img decoding=\"async\" src=\"https:\/\/huilerie-houali.com\/2024\/wp-content\/uploads\/2025\/10\/octobre1.jpg\" alt=\"Savoir-faire traditionnel\" loading=\"lazy\">\n                <div class=\"hh-pourquoi-icone\">\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\">\n                        <circle cx=\"12\" cy=\"12\" r=\"9\"\/>\n                        <path d=\"M12 3v18M3 12h18\" opacity=\"0.3\"\/>\n                        <path d=\"M8 12l2 4 4-8 2 4\"\/>\n                    <\/svg>\n                <\/div>\n            <\/div>\n            \n            <div class=\"hh-pourquoi-content\">\n                <h3>Savoir-faire traditionnel<\/h3>\n                <p>Press\u00e9e \u00e0 froid, sans traitement thermique. Les ar\u00f4mes et nutriments sont int\u00e9gralement pr\u00e9serv\u00e9s.<\/p>\n                <span class=\"hh-pourquoi-line\"><\/span>\n            <\/div>\n        <\/article>\n        \n        <!-- ===== 3. LIVRAISON ===== -->\n        <article class=\"hh-pourquoi-card\">\n            <span class=\"hh-pourquoi-num\">03<\/span>\n            \n            <div class=\"hh-pourquoi-img\">\n                <img decoding=\"async\" src=\"https:\/\/huilerie-houali.com\/2024\/wp-content\/uploads\/2026\/06\/livraison.jpg\" alt=\"Livraison 68 wilayas\" loading=\"lazy\">\n                <div class=\"hh-pourquoi-icone\">\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\">\n                        <path d=\"M1 3h13v13H1z\"\/>\n                        <path d=\"M14 8h4l3 3v5h-7V8z\"\/>\n                        <circle cx=\"5.5\" cy=\"18.5\" r=\"2\"\/>\n                        <circle cx=\"17.5\" cy=\"18.5\" r=\"2\"\/>\n                    <\/svg>\n                <\/div>\n            <\/div>\n            \n            <div class=\"hh-pourquoi-content\">\n                <h3>Livraison 68 wilayas<\/h3>\n                <p>De Tamanrasset \u00e0 Alger, nous livrons partout en Alg\u00e9rie avec un emballage s\u00e9curis\u00e9.<\/p>\n                <span class=\"hh-pourquoi-line\"><\/span>\n            <\/div>\n        <\/article>\n        \n    <\/div>\n    \n    <!-- ===== BANDEAU BAS ===== -->\n    <div class=\"hh-pourquoi-band\">\n        <div class=\"hh-pourquoi-stat\">\n            <strong>+15<\/strong>\n            <span>ans d'exp\u00e9rience<\/span>\n        <\/div>\n        <div class=\"hh-pourquoi-divider\"><\/div>\n        <div class=\"hh-pourquoi-stat\">\n            <strong>100%<\/strong>\n            <span>huile pure<\/span>\n        <\/div>\n        <div class=\"hh-pourquoi-divider\"><\/div>\n        <div class=\"hh-pourquoi-stat\">\n            <strong>68<\/strong>\n            <span>wilayas livr\u00e9es<\/span>\n        <\/div>\n        <div class=\"hh-pourquoi-divider\"><\/div>\n        <div class=\"hh-pourquoi-stat\">\n            <strong>0,8%<\/strong>\n            <span>acidit\u00e9 max<\/span>\n        <\/div>\n    <\/div>\n    \n<\/div>\n\n<!-- ========================================================== -->\n<!-- ===== STYLES PREMIUM ===== -->\n<!-- ========================================================== -->\n<style>\n\/* ================= ROOT ================= *\/\n.hh-pourquoi {\n    --or: #c9a227;\n    --or-clair: #e8d27a;\n    --or-fonce: #8a6d10;\n    --noir: #14110d;\n    --creme: #faf7f1;\n    --creme-2: #f2ebdd;\n    --texte: #2c2418;\n    --texte-doux: #7a6d5a;\n    \n    position: relative;\n    width: 100%;\n    max-width: 1280px;\n    margin: 70px auto;\n    padding: 70px 30px 60px;\n    background: linear-gradient(135deg, #ffffff 0%, #fdfbf6 60%, #f7f1e3 100%);\n    border-radius: 28px;\n    font-family: 'Segoe UI', Tahoma, sans-serif;\n    overflow: hidden;\n}\n\n\/* Texture subtile *\/\n.hh-pourquoi::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background-image: radial-gradient(circle at 1px 1px, rgba(201,162,39,0.06) 1px, transparent 0);\n    background-size: 26px 26px;\n    pointer-events: none;\n    opacity: 0.7;\n}\n\n\/* Halo dor\u00e9 en haut \u00e0 gauche *\/\n.hh-pourquoi::after {\n    content: '';\n    position: absolute;\n    top: -180px;\n    left: -180px;\n    width: 450px;\n    height: 450px;\n    background: radial-gradient(circle, rgba(201,162,39,0.10) 0%, transparent 70%);\n    border-radius: 50%;\n    pointer-events: none;\n}\n\n\/* ================= HEADER ================= *\/\n.hh-pourquoi-header {\n    text-align: center;\n    margin-bottom: 55px;\n    position: relative;\n    z-index: 1;\n}\n\n.hh-pourquoi-eyebrow {\n    display: inline-block;\n    font-size: 11px;\n    font-weight: 700;\n    letter-spacing: 3px;\n    text-transform: uppercase;\n    color: var(--or-fonce);\n    margin-bottom: 16px;\n    opacity: 0.85;\n}\n\n.hh-pourquoi-header h2 {\n    font-family: 'Georgia', serif;\n    font-size: 44px;\n    font-weight: 400;\n    color: var(--noir);\n    line-height: 1.1;\n    letter-spacing: -0.8px;\n    margin: 0 0 14px;\n}\n\n.hh-pourquoi-sous-titre {\n    font-size: 15px;\n    color: var(--texte-doux);\n    font-weight: 400;\n    max-width: 520px;\n    margin: 0 auto;\n    line-height: 1.6;\n}\n\n.hh-pourquoi-sep {\n    width: 60px;\n    height: 2px;\n    background: linear-gradient(90deg, transparent, var(--or), transparent);\n    margin: 22px auto 0;\n}\n\n\/* ================= GRILLE ================= *\/\n.hh-pourquoi-grid {\n    max-width: 1180px;\n    margin: 0 auto;\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 26px;\n    position: relative;\n    z-index: 1;\n}\n\n\/* ================= CARTE ================= *\/\n.hh-pourquoi-card {\n    position: relative;\n    background: #ffffff;\n    border-radius: 22px;\n    overflow: hidden;\n    transition: all 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);\n    box-shadow: \n        0 1px 2px rgba(20,17,13,0.03),\n        0 8px 24px rgba(20,17,13,0.06);\n    border: 1px solid rgba(201,162,39,0.08);\n}\n\n.hh-pourquoi-card:hover {\n    transform: translateY(-8px);\n    box-shadow: \n        0 4px 8px rgba(20,17,13,0.04),\n        0 28px 56px rgba(201,162,39,0.18),\n        0 0 0 1px rgba(201,162,39,0.25);\n}\n\n\/* Carte mise en avant (milieu) *\/\n.hh-pourquoi-featured {\n    border: 1px solid rgba(201,162,39,0.25);\n}\n\n.hh-pourquoi-featured::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(180deg, transparent 60%, rgba(201,162,39,0.04) 100%);\n    pointer-events: none;\n    z-index: 1;\n}\n\n\/* ================= NUM\u00c9RO ================= *\/\n.hh-pourquoi-num {\n    position: absolute;\n    top: 18px;\n    right: 20px;\n    font-family: 'Georgia', serif;\n    font-size: 34px;\n    font-weight: 700;\n    color: rgba(201,162,39,0.25);\n    line-height: 1;\n    letter-spacing: -1px;\n    z-index: 3;\n    transition: all 0.4s ease;\n}\n\n.hh-pourquoi-card:hover .hh-pourquoi-num {\n    color: var(--or);\n    transform: scale(1.08);\n}\n\n\/* ================= IMAGE ================= *\/\n.hh-pourquoi-img {\n    position: relative;\n    width: 100%;\n    aspect-ratio: 4 \/ 3;\n    overflow: hidden;\n    background: linear-gradient(135deg, #f8f3e8, #ece2cc);\n}\n\n.hh-pourquoi-img::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(180deg, transparent 50%, rgba(20,17,13,0.35) 100%);\n    z-index: 1;\n    transition: opacity 0.4s ease;\n}\n\n.hh-pourquoi-img img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    display: block;\n    transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n\n.hh-pourquoi-card:hover .hh-pourquoi-img img {\n    transform: scale(1.08);\n}\n\n\/* ================= IC\u00d4NE FLOTTANTE ================= *\/\n.hh-pourquoi-icone {\n    position: absolute;\n    bottom: -22px;\n    left: 24px;\n    width: 52px;\n    height: 52px;\n    border-radius: 50%;\n    background: linear-gradient(135deg, var(--or), var(--or-fonce));\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: #ffffff;\n    z-index: 3;\n    box-shadow: 0 8px 20px rgba(201,162,39,0.4);\n    transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n\n.hh-pourquoi-card:hover .hh-pourquoi-icone {\n    transform: translateY(-4px) scale(1.08);\n}\n\n.hh-pourquoi-icone svg {\n    width: 24px;\n    height: 24px;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* ================= CONTENU ================= *\/\n.hh-pourquoi-content {\n    padding: 38px 24px 26px;\n    position: relative;\n    z-index: 2;\n}\n\n.hh-pourquoi-content h3 {\n    font-family: 'Georgia', serif;\n    font-size: 20px;\n    font-weight: 500;\n    color: var(--noir);\n    margin: 0 0 10px;\n    line-height: 1.25;\n    letter-spacing: -0.2px;\n}\n\n.hh-pourquoi-content p {\n    font-size: 13.5px;\n    line-height: 1.65;\n    color: var(--texte-doux);\n    margin: 0 0 18px;\n    font-weight: 400;\n}\n\n.hh-pourquoi-line {\n    display: block;\n    width: 30px;\n    height: 2px;\n    background: linear-gradient(90deg, var(--or), transparent);\n    border-radius: 2px;\n    transition: width 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n\n.hh-pourquoi-card:hover .hh-pourquoi-line {\n    width: 60px;\n}\n\n\/* ================= BANDEAU STATS ================= *\/\n.hh-pourquoi-band {\n    max-width: 1080px;\n    margin: 55px auto 0;\n    padding: 26px 40px;\n    background: linear-gradient(135deg, var(--noir), #2c2418);\n    border-radius: 20px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 20px;\n    position: relative;\n    z-index: 1;\n    box-shadow: 0 20px 50px rgba(20,17,13,0.18);\n    overflow: hidden;\n}\n\n.hh-pourquoi-band::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(135deg, transparent 40%, rgba(201,162,39,0.10) 100%);\n    pointer-events: none;\n}\n\n.hh-pourquoi-stat {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n    gap: 4px;\n    flex: 1;\n    position: relative;\n    z-index: 1;\n}\n\n.hh-pourquoi-stat strong {\n    font-family: 'Georgia', serif;\n    font-size: 30px;\n    font-weight: 700;\n    color: var(--or);\n    letter-spacing: -0.5px;\n    line-height: 1;\n}\n\n.hh-pourquoi-stat span {\n    font-size: 11px;\n    color: rgba(255,255,255,0.7);\n    text-transform: uppercase;\n    letter-spacing: 1.5px;\n    font-weight: 500;\n}\n\n.hh-pourquoi-divider {\n    width: 1px;\n    height: 40px;\n    background: linear-gradient(180deg, transparent, rgba(201,162,39,0.4), transparent);\n    flex-shrink: 0;\n}\n\n\/* ========================================================== *\/\n\/* ================= RESPONSIVE ================= *\/\n\/* ========================================================== *\/\n\n@media (max-width: 992px) {\n    .hh-pourquoi { padding: 55px 24px 50px; margin: 55px auto; }\n    .hh-pourquoi-header h2 { font-size: 34px; }\n    .hh-pourquoi-grid { gap: 20px; }\n    .hh-pourquoi-content h3 { font-size: 18px; }\n    .hh-pourquoi-stat strong { font-size: 24px; }\n}\n\n@media (max-width: 768px) {\n    .hh-pourquoi { padding: 45px 18px 40px; margin: 40px auto; border-radius: 20px; }\n    .hh-pourquoi-header { margin-bottom: 40px; }\n    .hh-pourquoi-header h2 { font-size: 28px; }\n    .hh-pourquoi-sous-titre { font-size: 13.5px; }\n    .hh-pourquoi-grid {\n        grid-template-columns: 1fr;\n        gap: 24px;\n        max-width: 420px;\n    }\n    .hh-pourquoi-img { aspect-ratio: 16 \/ 10; }\n    .hh-pourquoi-band {\n        flex-direction: column;\n        padding: 24px 20px;\n        gap: 18px;\n    }\n    .hh-pourquoi-divider {\n        width: 60px;\n        height: 1px;\n        background: linear-gradient(90deg, transparent, rgba(201,162,39,0.4), transparent);\n    }\n    .hh-pourquoi-stat strong { font-size: 26px; }\n}\n\n@media (max-width: 480px) {\n    .hh-pourquoi { padding: 38px 14px 34px; margin: 30px auto; border-radius: 16px; }\n    .hh-pourquoi-header h2 { font-size: 24px; }\n    .hh-pourquoi-eyebrow { font-size: 10px; letter-spacing: 2px; }\n    .hh-pourquoi-content { padding: 34px 20px 22px; }\n    .hh-pourquoi-content h3 { font-size: 17px; }\n    .hh-pourquoi-content p { font-size: 12.5px; }\n    .hh-pourquoi-num { font-size: 28px; top: 14px; right: 16px; }\n    .hh-pourquoi-icone { width: 46px; height: 46px; bottom: -20px; left: 18px; }\n    .hh-pourquoi-icone svg { width: 20px; height: 20px; }\n}\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ada146a e-flex e-con-boxed e-con e-parent\" data-id=\"ada146a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-43e55af elementor-widget elementor-widget-html\" data-id=\"43e55af\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ========================================================== -->\n<!-- ===== CATALOGUE ===== -->\n<!-- ========================================================== -->\n\n<div class=\"section-catalogue\">\n    <div class=\"catalogue-contenu\">\n        <h2>\ud83d\udcc4 Catalogue des prix 2026<\/h2>\n        <p>Consultez notre gamme compl\u00e8te et nos tarifs.<\/p>\n        <a href=\"https:\/\/huilerie-houali.com\/2024\/wp-content\/uploads\/2025\/11\/catalogue-des-prix.jpg\" target=\"_blank\" class=\"catalogue-btn\">\n            Voir le catalogue\n        <\/a>\n    <\/div>\n<\/div>\n\n<style>\n.section-catalogue {\n    max-width: 700px;\n    margin: 40px auto;\n    padding: 30px 20px;\n    text-align: center;\n    background: #faf8f4;\n    border-radius: 16px;\n    border: 1px solid #eeece8;\n}\n.section-catalogue h2 {\n    font-size: 26px;\n    font-weight: 700;\n    color: #1a1a1a;\n    font-family: 'Georgia', serif;\n    margin-bottom: 6px;\n}\n.section-catalogue p {\n    font-size: 16px;\n    color: #4a4a4a;\n    margin-bottom: 18px;\n}\n.catalogue-btn {\n    display: inline-block;\n    background: #b8860b;\n    color: #fff !important;\n    padding: 12px 32px;\n    border-radius: 30px;\n    font-weight: 600;\n    text-decoration: none !important;\n    transition: 0.3s ease;\n}\n.catalogue-btn:hover {\n    background: #d4a017;\n    transform: translateY(-2px);\n}\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3a8a162 e-flex e-con-boxed e-con e-parent\" data-id=\"3a8a162\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-329ab27 e-con-full e-flex e-con e-child\" data-id=\"329ab27\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5f7013f elementor-widget elementor-widget-elementskit-heading\" data-id=\"5f7013f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"elementskit-heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"ekit-wid-con\" ><div class=\"ekit-heading elementskit-section-title-wraper text_center   ekit_heading_tablet-   ekit_heading_mobile-\"><h2 class=\"ekit-heading--title elementskit-section-title \"><span>Ils parlent de nous<\/span><\/h2><div class=\"ekit_heading_separetor_wraper ekit_heading_elementskit-border-divider ekit-dotted\"><div class=\"elementskit-border-divider ekit-dotted\"><\/div><\/div><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4089fe9 e-con-full e-flex e-con e-child\" data-id=\"4089fe9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-28a0b3a e-con-full e-flex e-con e-child\" data-id=\"28a0b3a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-73751ff elementor-widget elementor-widget-image\" data-id=\"73751ff\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/www.elmoudjahid.com\/fr\/regions\/tizi-ouzou-campagne-oleicole-ca-ne-baigne-pas-dans-l-huile-192436\" target=\"_blank\" rel=\"noopener\">\n\t\t\t\t\t\t\t<img decoding=\"async\" width=\"300\" height=\"150\" src=\"https:\/\/huilerie-houali.com\/2024\/wp-content\/uploads\/2024\/08\/Ils-parlent-de-nous-Elmoudjahid.png\" class=\"attachment-large size-large wp-image-907\" alt=\"\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c7d4733 e-con-full e-flex e-con e-child\" data-id=\"c7d4733\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-332f129 elementor-widget elementor-widget-image\" data-id=\"332f129\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/pasa-algerie.org\/une-selection-de-15-huileries-algeriennes-participe-au-salon-international-de-lagroalimentaire-sial-de-paris-2022\/\" target=\"_blank\" rel=\"noopener\">\n\t\t\t\t\t\t\t<img decoding=\"async\" width=\"300\" height=\"150\" src=\"https:\/\/huilerie-houali.com\/2024\/wp-content\/uploads\/2024\/08\/Ils-parlent-de-nous-Pasa.png\" class=\"attachment-large size-large wp-image-911\" alt=\"\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-78f1d85 e-con-full e-flex e-con e-child\" data-id=\"78f1d85\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8ab38a2 e-flex e-con-boxed e-con e-parent\" data-id=\"8ab38a2\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c717ded e-flex e-con-boxed e-con e-parent\" data-id=\"c717ded\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b304884 elementor-widget elementor-widget-video\" data-id=\"b304884\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=FOQnq_u-_M0&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8ae0233 e-flex e-con-boxed e-con e-parent\" data-id=\"8ae0233\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-de740b2 elementor-widget elementor-widget-spacer\" data-id=\"de740b2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-aa76265 e-flex e-con-boxed e-con e-parent\" data-id=\"aa76265\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e6cdef2 elementor-widget elementor-widget-text-editor\" data-id=\"e6cdef2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<section class=\"section-premium-compact\">\n\n    <div class=\"container-luxury\">\n\n        <!-- PETITE SIGNATURE -->\n        <div class=\"badge-heritage\">\n            <span class=\"line\"><\/span>\n            <span class=\"label\">MAISON HOUALI<\/span>\n            <span class=\"line\"><\/span>\n        <\/div>\n\n\n        <!-- TITRE -->\n        <h2 class=\"title-display\">\n            L&rsquo;Art de l&rsquo;Olive,\n            <span class=\"italic-serif\">\n                le Prestige du Terroir\n            <\/span>\n        <\/h2>\n\n\n        <!-- TEXTE -->\n        <div class=\"text-manifesto\">\n\n            Au c\u0153ur d&rsquo;A\u00eft Frah, une pression \u00e0 froid rigoureuse\n            pour une huile\n            <strong>pure et sans compromis.<\/strong>\n\n        <\/div>\n\n\n        <!-- CTA -->\n        <div class=\"button-wrap\">\n\n            <div class=\"cta-bg\"><\/div>\n\n            <i class=\"fas fa-file-invoice-dollar\"><\/i>\n\n            <span class=\"btn-text\">\n                CATALOGUE DES PRIX 2026\n            <\/span>\n\n            <span class=\"btn-arrow\">\n                \u2192\n            <\/span>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n\n<style>\n\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');\n\n\n\/* ==========================================================\n   SECTION\n   ========================================================== *\/\n\n.section-premium-compact {\n\n    position: relative;\n\n    width: 100%;\n\n    padding: 85px 20px 90px;\n\n    background: #ffffff;\n\n    font-family:\n        'Plus Jakarta Sans',\n        sans-serif;\n\n    text-align: center;\n\n    overflow: hidden;\n\n}\n\n\n\/* petite signature verticale *\/\n\n.section-premium-compact::before {\n\n    content: \"\";\n\n    position: absolute;\n\n    top: 0;\n\n    left: 50%;\n\n    width: 1px;\n\n    height: 35px;\n\n    background: #c9b375;\n\n}\n\n\n\/* ==========================================================\n   CONTAINER\n   ========================================================== *\/\n\n.container-luxury {\n\n    width: 100%;\n\n    max-width: 850px;\n\n    margin: 0 auto;\n\n}\n\n\n\/* ==========================================================\n   LABEL MAISON\n   ========================================================== *\/\n\n.badge-heritage {\n\n    display: flex;\n\n    justify-content: center;\n\n    align-items: center;\n\n    gap: 15px;\n\n    margin-bottom: 25px;\n\n}\n\n\n.badge-heritage .line {\n\n    display: block;\n\n    width: 38px;\n\n    height: 1px;\n\n    background: #c9b375;\n\n}\n\n\n.badge-heritage .label {\n\n    font-family:\n        'Plus Jakarta Sans',\n        sans-serif;\n\n    font-size: 9px;\n\n    font-weight: 800;\n\n    letter-spacing: 4px;\n\n    color: #b49a5e;\n\n    text-transform: uppercase;\n\n}\n\n\n\/* ==========================================================\n   TITRE PRINCIPAL\n   ========================================================== *\/\n\n.title-display {\n\n    margin: 0;\n\n    font-family:\n        'Playfair Display',\n        Georgia,\n        serif;\n\n    font-size:\n        clamp(\n            2.7rem,\n            5vw,\n            4.2rem\n        );\n\n    line-height: 1.02;\n\n    font-weight: 500;\n\n    letter-spacing: -2px;\n\n    color: #181818;\n\n}\n\n\n\/* ==========================================================\n   SOUS-TITRE\n   ========================================================== *\/\n\n.italic-serif {\n\n    display: block;\n\n    margin-top: 7px;\n\n    font-family:\n        'Playfair Display',\n        Georgia,\n        serif;\n\n    font-style: italic;\n\n    font-weight: 500;\n\n    color: #4d6626;\n\n}\n\n\n\/* ==========================================================\n   MANIFESTE\n   ========================================================== *\/\n\n.text-manifesto {\n\n    max-width: 590px;\n\n    margin: 28px auto 0;\n\n    font-size: 14px;\n\n    line-height: 1.85;\n\n    color: #696969;\n\n    font-weight: 400;\n\n}\n\n\n.text-manifesto strong {\n\n    color: #30382a;\n\n    font-weight: 700;\n\n}\n\n\n\/* ==========================================================\n   ESPACE CTA\n   ========================================================== *\/\n\n.button-wrap {\n\n    position: relative;\n\n    display: inline-flex;\n\n    align-items: center;\n\n    justify-content: center;\n\n    gap: 15px;\n\n    min-height: 54px;\n\n    margin-top: 34px;\n\n    padding: 0 30px;\n\n    background: #191919;\n\n    color: #ffffff;\n\n    cursor: pointer;\n\n    overflow: hidden;\n\n    transition:\n        transform .35s ease,\n        box-shadow .35s ease;\n\n}\n\n\n\/* fond vert au hover *\/\n\n.cta-bg {\n\n    position: absolute;\n\n    inset: 0;\n\n    background: #4d6626;\n\n    transform: translateX(-101%);\n\n    transition:\n        transform .45s\n        cubic-bezier(.77,0,.18,1);\n\n}\n\n\n\/* ==========================================================\n   ICONE\n   ========================================================== *\/\n\n.button-wrap i {\n\n    position: relative;\n\n    z-index: 2;\n\n    color: #c9b375;\n\n    font-size: 13px;\n\n    transition:\n        color .35s ease;\n\n}\n\n\n\/* ==========================================================\n   TEXTE BOUTON\n   ========================================================== *\/\n\n.btn-text {\n\n    position: relative;\n\n    z-index: 2;\n\n    font-size: 9px;\n\n    font-weight: 800;\n\n    letter-spacing: 2px;\n\n    white-space: nowrap;\n\n}\n\n\n\/* ==========================================================\n   FL\u00c8CHE\n   ========================================================== *\/\n\n.btn-arrow {\n\n    position: relative;\n\n    z-index: 2;\n\n    color: #c9b375;\n\n    font-size: 17px;\n\n    line-height: 1;\n\n    transition:\n        transform .35s ease,\n        color .35s ease;\n\n}\n\n\n\/* ==========================================================\n   HOVER\n   ========================================================== *\/\n\n.button-wrap:hover {\n\n    transform:\n        translateY(-3px);\n\n    box-shadow:\n        0 15px 35px\n        rgba(77,102,38,.18);\n\n}\n\n\n.button-wrap:hover .cta-bg {\n\n    transform:\n        translateX(0);\n\n}\n\n\n.button-wrap:hover i {\n\n    color: #ffffff;\n\n}\n\n\n.button-wrap:hover .btn-arrow {\n\n    color: #ffffff;\n\n    transform:\n        translateX(7px);\n\n}\n\n\n\/* ==========================================================\n   PETIT D\u00c9TAIL FINAL\n   ========================================================== *\/\n\n.container-luxury::after {\n\n    content: \"\u2726\";\n\n    display: block;\n\n    margin-top: 34px;\n\n    font-size: 9px;\n\n    color: #c9b375;\n\n}\n\n\n\/* ==========================================================\n   MOBILE\n   ========================================================== *\/\n\n@media (max-width: 768px) {\n\n    .section-premium-compact {\n\n        padding:\n            60px 18px\n            65px;\n\n    }\n\n\n    .container-luxury {\n\n        max-width: 100%;\n\n    }\n\n\n    .badge-heritage {\n\n        gap: 10px;\n\n        margin-bottom: 20px;\n\n    }\n\n\n    .badge-heritage .line {\n\n        width: 25px;\n\n    }\n\n\n    .badge-heritage .label {\n\n        font-size: 8px;\n\n        letter-spacing: 2.8px;\n\n    }\n\n\n    .title-display {\n\n        font-size: 2.45rem;\n\n        letter-spacing: -1px;\n\n        line-height: 1.05;\n\n    }\n\n\n    .text-manifesto {\n\n        max-width: 350px;\n\n        font-size: 13px;\n\n        line-height: 1.75;\n\n        margin-top: 22px;\n\n    }\n\n\n    .button-wrap {\n\n        width: 100%;\n\n        max-width: 350px;\n\n        margin-top: 28px;\n\n        padding:\n            0 18px;\n\n    }\n\n\n    .btn-text {\n\n        font-size: 8px;\n\n        letter-spacing: 1.5px;\n\n    }\n\n}\n\n\n\/* ==========================================================\n   PETIT MOBILE\n   ========================================================== *\/\n\n@media (max-width: 380px) {\n\n    .title-display {\n\n        font-size: 2.15rem;\n\n    }\n\n    .button-wrap {\n\n        gap: 10px;\n\n    }\n\n    .btn-text {\n\n        font-size: 7px;\n\n        letter-spacing: 1.2px;\n\n    }\n\n}\n\n<\/style>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-67b34ec e-flex e-con-boxed e-con e-parent\" data-id=\"67b34ec\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6755aaa elementor-widget elementor-widget-spacer\" data-id=\"6755aaa\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f9706d1 e-flex e-con-boxed e-con e-parent\" data-id=\"f9706d1\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2097a4e elementor-widget elementor-widget-text-editor\" data-id=\"2097a4e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n\n<section class=\"valeurs-ligne\">\n    <div class=\"container-ligne\">\n        \n        <div class=\"header-minimal\">\n            <span class=\"sub-titre\">Engagement &#038; Excellence<\/span>\n            <h2>Nos Valeurs Fondamentales<\/h2>\n        <\/div>\n\n        <div class=\"grille-horizontale\">\n            <div class=\"item-valeur\">\n                <div class=\"icon-cercle\">\n                    <i class=\"fas fa-leaf\"><\/i>\n                <\/div>\n                <div class=\"texte-valeur\">\n                    <h3>Puret\u00e9 Absolue<\/h3>\n                    <p>100% naturelle et sans additif. Nous pr\u00e9servons l&rsquo;essence brute de l&rsquo;olive.<\/p>\n                <\/div>\n                <div class=\"ligne-connecteur\"><\/div>\n            <\/div>\n\n            <div class=\"item-valeur\">\n                <div class=\"icon-cercle\">\n                    <i class=\"fas fa-microscope\"><\/i>\n                <\/div>\n                <div class=\"texte-valeur\">\n                    <h3>S\u00e9rieux &#038; Rigueur<\/h3>\n                    <p>Une tra\u00e7abilit\u00e9 totale et des analyses strictes du champ \u00e0 la bouteille.<\/p>\n                <\/div>\n                <div class=\"ligne-connecteur\"><\/div>\n            <\/div>\n\n            <div class=\"item-valeur\">\n                <div class=\"icon-cercle\">\n                    <i class=\"fas fa-award\"><\/i>\n                <\/div>\n                <div class=\"texte-valeur\">\n                    <h3>Premi\u00e8re Pression<\/h3>\n                    <p>Extraction \u00e0 froid uniquement pour une huile riche en antioxydants.<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n\n    <\/div>\n<\/section>\n\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@700&family=Plus+Jakarta+Sans:wght@400;600&display=swap');\n\n.valeurs-ligne {\n    background: #ffffff;\n    padding: 50px 20px;\n    font-family: 'Plus Jakarta Sans', sans-serif;\n}\n\n.container-ligne {\n    max-width: 1200px;\n    margin: 0 auto;\n}\n\n.header-minimal {\n    text-align: center;\n    margin-bottom: 40px;\n}\n\n.sub-titre {\n    color: #C9B375;\n    text-transform: uppercase;\n    letter-spacing: 4px;\n    font-size: 12px;\n    font-weight: 700;\n}\n\n.header-minimal h2 {\n    font-family: 'Playfair Display', serif;\n    color: #2d3e1a;\n    font-size: 32px;\n    margin-top: 5px;\n}\n\n\/* --- LE SECRET DE LA LIGNE UNIQUE --- *\/\n.grille-horizontale {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 0; \/* On utilise les connecteurs au lieu du gap *\/\n}\n\n.item-valeur {\n    flex: 1; \/* Chaque item prend exactement un tiers *\/\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n    padding: 0 20px;\n    position: relative;\n}\n\n\/* --- Ic\u00f4nes --- *\/\n.icon-cercle {\n    width: 65px;\n    height: 65px;\n    background: #fdfcf8;\n    border: 2px solid #C9B375;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: 20px;\n    z-index: 2;\n    transition: all 0.3s ease;\n}\n\n.icon-cercle i {\n    font-size: 26px;\n    color: #4d6626;\n}\n\n.item-valeur:hover .icon-cercle {\n    background: #4d6626;\n    border-color: #4d6626;\n    transform: scale(1.1);\n}\n\n.item-valeur:hover .icon-cercle i {\n    color: #ffffff;\n}\n\n\/* --- Textes --- *\/\n.texte-valeur h3 {\n    font-family: 'Playfair Display', serif;\n    color: #2d3e1a;\n    font-size: 18px;\n    margin-bottom: 10px;\n}\n\n.texte-valeur p {\n    color: #666;\n    font-size: 14px;\n    line-height: 1.5;\n    margin: 0;\n}\n\n\/* --- Ligne de connection dor\u00e9e entre les points --- *\/\n.ligne-connecteur {\n    position: absolute;\n    top: 32px; \/* Align\u00e9 au centre de l'ic\u00f4ne *\/\n    left: 60%; \/* Part de l'ic\u00f4ne *\/\n    width: 80%; \/* S'\u00e9tend vers la suivante *\/\n    height: 1px;\n    background: #C9B375;\n    z-index: 1;\n    opacity: 0.4;\n}\n\n\/* --- Responsive : On passe en colonne seulement sur petit mobile --- *\/\n@media (max-width: 768px) {\n    .grille-horizontale {\n        flex-direction: column;\n        gap: 40px;\n    }\n    .ligne-connecteur { display: none; }\n}\n<\/style>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-bc21f16 e-flex e-con-boxed e-con e-parent\" data-id=\"bc21f16\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5b37a33 e-flex e-con-boxed e-con e-parent\" data-id=\"5b37a33\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>MAISON HOUALI DEPUIS 1952 \u00b7 KABYLIE \u00b7 ALG\u00c9RIE L&rsquo;H\u00c9RITAGE HOUALI L&rsquo;\u00e9l\u00e9gance d&rsquo;une huile d&rsquo;olive n\u00e9e d&rsquo;un savoir-faire transmis de g\u00e9n\u00e9ration en g\u00e9n\u00e9ration. D\u00e9couvrir la collection \u2192 Commander H 1952 EXPLORER 01 \/ 03 \u2726 Collection Signature \u2726 Nos huiles d&rsquo;exception Une s\u00e9lection rare, press\u00e9e \u00e0 froid, au c\u0153ur de la Kabylie Best-seller Huile d&rsquo;olive vierge&#8230;<\/p>\n","protected":false},"author":1,"featured_media":680,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"default","_kad_post_title":"hide","_kad_post_layout":"fullwidth","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"hide","_kad_post_feature":"hide","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-102","page","type-page","status-publish","has-post-thumbnail","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/huilerie-houali.com\/2024\/wp-json\/wp\/v2\/pages\/102","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/huilerie-houali.com\/2024\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/huilerie-houali.com\/2024\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/huilerie-houali.com\/2024\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/huilerie-houali.com\/2024\/wp-json\/wp\/v2\/comments?post=102"}],"version-history":[{"count":747,"href":"https:\/\/huilerie-houali.com\/2024\/wp-json\/wp\/v2\/pages\/102\/revisions"}],"predecessor-version":[{"id":2365,"href":"https:\/\/huilerie-houali.com\/2024\/wp-json\/wp\/v2\/pages\/102\/revisions\/2365"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/huilerie-houali.com\/2024\/wp-json\/wp\/v2\/media\/680"}],"wp:attachment":[{"href":"https:\/\/huilerie-houali.com\/2024\/wp-json\/wp\/v2\/media?parent=102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}