/**
 * IcoMoon → Font Awesome 6 Compatibility Layer
 *
 * Corrige les icônes cassées des extensions tierces (RSTickets!Pro, modules...)
 * qui utilisent les anciennes classes IcoMoon de Joomla 3 (icon-*).
 * Chargé automatiquement par Helix Ultimate — résistant aux mises à jour.
 */

/* ---------------------------------------------------------------
   Base : toutes les classes icon-[nom] utilisent FA6 Free Solid
--------------------------------------------------------------- */
[class^="icon-"]::before,
[class*=" icon-"]::before {
    font-family: "FA Sub Solid"; /* [FA-SUBSET] repoint vers le sous-ensemble auto-hébergé */
    font-weight: 900;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
}

/* ---------------------------------------------------------------
   Actions principales
--------------------------------------------------------------- */
.icon-print::before        { content: "\f02f"; } /* fa-print          */
.icon-edit::before         { content: "\f044"; } /* fa-pen-to-square  */
.icon-delete::before       { content: "\f2ed"; } /* fa-trash-can      */
.icon-trash::before        { content: "\f1f8"; } /* fa-trash          */
.icon-save::before         { content: "\f0c7"; } /* fa-floppy-disk    */
.icon-apply::before        { content: "\f00c"; } /* fa-check          */
.icon-ok::before           { content: "\f00c"; } /* fa-check          */
.icon-check::before        { content: "\f00c"; } /* fa-check          */
.icon-cancel::before       { content: "\f05e"; } /* fa-ban            */
.icon-cancel-2::before     { content: "\f00d"; } /* fa-xmark          */
.icon-remove::before       { content: "\f00d"; } /* fa-xmark          */
.icon-close::before        { content: "\f00d"; } /* fa-xmark          */
.icon-times::before        { content: "\f00d"; } /* fa-xmark          */
.icon-refresh::before      { content: "\f021"; } /* fa-arrows-rotate  */
.icon-plus::before         { content: "\f067"; } /* fa-plus           */
.icon-minus::before        { content: "\f068"; } /* fa-minus          */
.icon-copy::before         { content: "\f0c5"; } /* fa-copy           */

/* ---------------------------------------------------------------
   Navigation
--------------------------------------------------------------- */
.icon-arrow-left::before   { content: "\f060"; } /* fa-arrow-left     */
.icon-arrow-right::before  { content: "\f061"; } /* fa-arrow-right    */
.icon-arrow-up::before     { content: "\f062"; } /* fa-arrow-up       */
.icon-arrow-down::before   { content: "\f063"; } /* fa-arrow-down     */
.icon-chevron-down::before { content: "\f078"; } /* fa-chevron-down   */
.icon-back::before         { content: "\f060"; } /* fa-arrow-left     */
.icon-next::before         { content: "\f061"; } /* fa-arrow-right    */
.icon-menu::before         { content: "\f0c9"; } /* fa-bars           */
.icon-menu-2::before       { content: "\f0c9"; } /* fa-bars           */
.icon-list::before         { content: "\f0ca"; } /* fa-list-ul        */
.icon-home::before         { content: "\f015"; } /* fa-house          */

/* ---------------------------------------------------------------
   Utilisateurs et sécurité
--------------------------------------------------------------- */
.icon-user::before         { content: "\f007"; } /* fa-user           */
.icon-users::before        { content: "\f0c0"; } /* fa-users          */
.icon-user-plus::before    { content: "\f234"; } /* fa-user-plus      */
.icon-register::before     { content: "\f234"; } /* fa-user-plus      */
.icon-lock::before         { content: "\f023"; } /* fa-lock           */
.icon-unlock::before       { content: "\f09c"; } /* fa-lock-open      */
.icon-key::before          { content: "\f084"; } /* fa-key            */

/* ---------------------------------------------------------------
   Fichiers et documents
--------------------------------------------------------------- */
.icon-file::before         { content: "\f15b"; } /* fa-file           */
.icon-doc-text::before     { content: "\f15c"; } /* fa-file-lines     */
.icon-folder::before       { content: "\f07b"; } /* fa-folder         */
.icon-folder-open::before  { content: "\f07c"; } /* fa-folder-open    */
.icon-attach::before       { content: "\f0c6"; } /* fa-paperclip      */
.icon-paperclip::before    { content: "\f0c6"; } /* fa-paperclip      */
.icon-clipboard::before    { content: "\f328"; } /* fa-clipboard      */
.icon-download::before     { content: "\f019"; } /* fa-download       */
.icon-upload::before       { content: "\f093"; } /* fa-upload         */
.icon-image::before        { content: "\f03e"; } /* fa-image          */

/* ---------------------------------------------------------------
   Communication
--------------------------------------------------------------- */
.icon-mail::before         { content: "\f0e0"; } /* fa-envelope       */
.icon-envelope::before     { content: "\f0e0"; } /* fa-envelope       */
.icon-comment::before      { content: "\f075"; } /* fa-comment        */
.icon-comments::before     { content: "\f086"; } /* fa-comments       */
.icon-broadcast::before    { content: "\f0a1"; } /* fa-bullhorn       */
.icon-reply::before        { content: "\f3e5"; } /* fa-reply          */
.icon-share::before        { content: "\f064"; } /* fa-share          */
.icon-feed::before         { content: "\f09e"; } /* fa-rss            */

/* ---------------------------------------------------------------
   Recherche et informations
--------------------------------------------------------------- */
.icon-search::before       { content: "\f002"; } /* fa-magnifying-glass   */
.icon-info::before         { content: "\f129"; } /* fa-info               */
.icon-info-circle::before  { content: "\f05a"; } /* fa-circle-info        */
.icon-question::before     { content: "\f128"; } /* fa-question           */
.icon-question-sign::before { content: "\f059"; } /* fa-circle-question   */
.icon-warning::before      { content: "\f071"; } /* fa-triangle-exclamation */
.icon-help::before         { content: "\f059"; } /* fa-circle-question    */
.icon-star::before         { content: "\f005"; } /* fa-star               */
.icon-thumbs-up::before    { content: "\f164"; } /* fa-thumbs-up          */

/* ---------------------------------------------------------------
   Temps et localisation
--------------------------------------------------------------- */
.icon-calendar::before     { content: "\f133"; } /* fa-calendar       */
.icon-clock::before        { content: "\f017"; } /* fa-clock          */
.icon-time::before         { content: "\f017"; } /* fa-clock          */
.icon-location::before     { content: "\f3c5"; } /* fa-location-dot   */
.icon-map::before          { content: "\f279"; } /* fa-map            */

/* ---------------------------------------------------------------
   Paramètres et administration
--------------------------------------------------------------- */
.icon-cogs::before         { content: "\f085"; } /* fa-gears          */
.icon-cog::before          { content: "\f013"; } /* fa-gear           */
.icon-settings::before     { content: "\f013"; } /* fa-gear           */
.icon-dashboard::before    { content: "\f3fd"; } /* fa-gauge-high     */
.icon-database::before     { content: "\f1c0"; } /* fa-database       */
.icon-tag::before          { content: "\f02b"; } /* fa-tag            */
.icon-tags::before         { content: "\f02c"; } /* fa-tags           */
.icon-link::before         { content: "\f0c1"; } /* fa-link           */
.icon-eye::before          { content: "\f06e"; } /* fa-eye            */
.icon-eye-close::before    { content: "\f070"; } /* fa-eye-slash      */
.icon-eye-open::before     { content: "\f06e"; } /* fa-eye            */


/* ═══════════════════════════════════════════════════════════════
   RSTicketsPro — Modal frame styling (parent page, not iframe)
   ═══════════════════════════════════════════════════════════════ */
/* ═══ Magnific Popup modals (Notes, Historique) — Apple-style ═══ */

/* Popup container */
.rst-magnific-popup {
    background: #fff;
    border-radius: 14px !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .18), 0 0 0 1px rgba(0, 0, 0, .04);
    overflow: hidden;
    max-width: 640px;
    margin: 0 auto;
}

/* Header + title */
.rst-magnific-popup .magnific-header {
    padding: 14px 20px;
    border-bottom: 1px solid #f0f0f5;
}
.rst-magnific-popup .magnific-header h3 {
    font-size: .88rem;
    font-weight: 600;
    color: #1d1d1f;
    letter-spacing: -.01em;
    margin: 0;
}

/* Close button — visible round circle */
.rst-magnific-popup .mfp-close {
    opacity: 1 !important;
    width: 28px !important;
    height: 28px !important;
    line-height: 28px !important;
    border-radius: 50% !important;
    background: #f0f0f5 !important;
    color: #8e8e93 !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    right: 14px !important;
    top: 10px !important;
    padding: 0 !important;
    text-align: center !important;
    transition: all .15s !important;
}
.rst-magnific-popup .mfp-close:hover {
    background: #e5e5ea !important;
    color: #1d1d1f !important;
}

/* Body (iframe container) */
.rst-magnific-popup .magnific-popup-body {
    padding: 0;
}
.rst-magnific-popup .magnific-popup-body iframe {
    border: none;
    width: 100%;
}

/* Backdrop */
.mfp-bg {
    opacity: .4 !important;
}

/* ═══ Joomla Dialog (User field select popup) — Apple-style ═══ */

joomla-dialog dialog {
    border: none !important;
    border-radius: 14px !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .18), 0 0 0 1px rgba(0, 0, 0, .04) !important;
    overflow: hidden !important;
    max-width: 820px !important;
    width: 90vw !important;
}
joomla-dialog .joomla-dialog-header {
    background: #fff !important;
    border-bottom: 1px solid #f0f0f5 !important;
    padding: 14px 20px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
joomla-dialog .joomla-dialog-header h3 {
    font-size: .88rem !important;
    font-weight: 600 !important;
    color: #1d1d1f !important;
    margin: 0 !important;
    letter-spacing: -.01em;
}
/* Close button — round gray circle with visible X */
joomla-dialog .button-close {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background-color: #f0f0f5 !important;
    opacity: 1 !important;
    transition: background-color .15s !important;
    border: none !important;
    flex-shrink: 0;
    background-size: 12px !important;
}
joomla-dialog .button-close:hover {
    background-color: #e5e5ea !important;
}
/* Body (iframe) */
joomla-dialog .joomla-dialog-body {
    padding: 0 !important;
}
joomla-dialog .joomla-dialog-body iframe {
    border: none !important;
}
/* Backdrop */
joomla-dialog::backdrop {
    background: rgba(0, 0, 0, .4) !important;
}

/* ---------------------------------------------------------------
   #sp-page-title — masquer quand vide
   Sur les pages Joomla standards (blog, catégorie), la section
   titre peut être vide (colonne sans contenu). On la cache via
   :has() pour éviter un grand espace vide.
--------------------------------------------------------------- */
#sp-page-title:has(.sp-column:empty) {
    display: none !important;
}

/* ---------------------------------------------------------------
   Padding #sp-main-body — ajustement global
   Le template met 100px de padding-top par défaut.
   On le réduit pour les vues standard (articles, RSTickets, etc.)
   mais on le supprime pour SP Page Builder (homepage, landing pages)
   car le page builder gère son propre espacement.
--------------------------------------------------------------- */
#sp-main-body {
    padding-top: 20px !important;
}
#sp-main-body > .container {
    padding-top: 20px !important;
}
.com-sppagebuilder #sp-main-body {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.com-sppagebuilder #sp-main-body > .container {
    padding-top: 0 !important;
}


/* ---------------------------------------------------------------
   Hero Slider — typographie responsive fluide
   Le slider conserve son layout 50/50 (image + texte) natif.
   On utilise clamp() pour un scaling fluide des tailles de police
   qui occupe au mieux l'espace disponible dans la moitie texte.
   Desktop  : h1=52px, h2=20px (definis par SP Page Builder).
   Tablette : hauteur 600px, texte dans ~50% de la largeur.
   Mobile   : hauteur 450px, texte dans ~50% de la largeur.
   clamp(min, preferred, max) — preferred en vw scale fluidement.
--------------------------------------------------------------- */

@media (max-width: 991.98px) {
    .sppb-addon-sp-slider .sp-slider-content-wrap h1.sppb-sp-slider-title {
        font-size: clamp(26px, 4.5vw, 44px) !important;
        line-height: 1.15 !important;
        margin-bottom: clamp(6px, 1vw, 12px) !important;
    }
    .sppb-addon-sp-slider .sp-slider-content-wrap h2.sppb-sp-slider-title {
        font-size: clamp(12px, 2vw, 18px) !important;
        line-height: 1.25 !important;
        margin-bottom: clamp(4px, 0.8vw, 8px) !important;
        text-transform: uppercase !important;
        letter-spacing: clamp(1px, 0.3vw, 3px) !important;
    }
    .sppb-addon-sp-slider .sp-slider-content-wrap .sppb-sp-slider-text,
    .sppb-addon-sp-slider .sp-slider-content-wrap .sppb-sp-slider-text p {
        font-size: clamp(11px, 1.8vw, 15px) !important;
        line-height: 1.45 !important;
        margin-bottom: clamp(6px, 1.2vw, 14px) !important;
    }
    .sppb-addon-sp-slider .sp-slider-content-wrap .sppb-sp-slider-button .sp-slider-btn-text {
        font-size: clamp(10px, 1.5vw, 14px) !important;
        padding: clamp(8px, 1.2vw, 14px) clamp(16px, 2.5vw, 28px) !important;
        letter-spacing: clamp(0.5px, 0.15vw, 2px) !important;
        white-space: normal !important;
        text-align: center !important;
    }
    .sppb-addon-sp-slider .sp-slider-content-wrap .sp-slider-content-align-left,
    .sppb-addon-sp-slider .sp-slider-content-wrap .sp-slider-content-align-right,
    .sppb-addon-sp-slider .sp-slider-content-wrap .sp-slider-content-align-center {
        padding: clamp(15px, 3vw, 35px) clamp(12px, 2.5vw, 30px) !important;
    }
}

/* ---------------------------------------------------------------
   Hero Slider — mobile overlay (< 768px)
   L'image passe en fond plein cadre (absolute inset) et le texte
   en overlay pleine largeur avec gradient sombre pour la lisibilite.
   Entre 768px et 991px le bloc tablette ci-dessus conserve le 50/50.
--------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .sppb-addon-sp-slider .sp-item .sp-slider-content-wrap > .sppb-row {
        position: relative !important;
        margin: 0 !important;
    }
    .sppb-addon-sp-slider .sp-item .sp-slider-content-wrap > .sppb-row > .sppb-col-xs-6:first-child {
        position: absolute !important;
        inset: 0 !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        z-index: 0 !important;
    }
    .sppb-addon-sp-slider .sp-item .sp-slider-content-wrap > .sppb-row > .sppb-col-xs-6:first-child .sppb-addon-image,
    .sppb-addon-sp-slider .sp-item .sp-slider-content-wrap > .sppb-row > .sppb-col-xs-6:first-child .sppb-image-holder,
    .sppb-addon-sp-slider .sp-item .sp-slider-content-wrap > .sppb-row > .sppb-col-xs-6:first-child a,
    .sppb-addon-sp-slider .sp-item .sp-slider-content-wrap > .sppb-row > .sppb-col-xs-6:first-child img {
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block !important;
    }
    .sppb-addon-sp-slider .sp-item .sp-slider-content-wrap > .sppb-row > .sppb-col-xs-6:last-child {
        position: relative !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        min-height: 450px !important;
        padding: 0 !important;
        z-index: 1 !important;
        display: flex !important;
        align-items: flex-end !important;
        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.15) 30%,
            rgba(0, 0, 0, 0.55) 65%,
            rgba(0, 0, 0, 0.85) 100%
        ) !important;
    }
    .sppb-addon-sp-slider .sp-item .sp-slider-content-wrap .sp-slider-content-align-left,
    .sppb-addon-sp-slider .sp-item .sp-slider-content-wrap .sp-slider-content-align-right,
    .sppb-addon-sp-slider .sp-item .sp-slider-content-wrap .sp-slider-content-align-center {
        width: 100% !important;
        max-width: 100% !important;
        /* padding-left eleve pour laisser la place aux dots verticaux (.sp-dots a x=30) */
        padding: 0 24px 32px 52px !important;
        text-align: left !important;
    }
    .sppb-addon-sp-slider .sp-item .sp-slider-content-wrap h1.sppb-sp-slider-title {
        font-size: 30px !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        margin: 0 0 12px 0 !important;
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35) !important;
    }
    .sppb-addon-sp-slider .sp-item .sp-slider-content-wrap h2.sppb-sp-slider-title {
        font-size: 12px !important;
        line-height: 1.3 !important;
        font-weight: 600 !important;
        color: #d4622a !important;
        margin: 0 0 10px 0 !important;
        text-transform: uppercase !important;
        letter-spacing: 2px !important;
    }
    .sppb-addon-sp-slider .sp-item .sp-slider-content-wrap .sppb-sp-slider-text,
    .sppb-addon-sp-slider .sp-item .sp-slider-content-wrap .sppb-sp-slider-text p {
        font-size: 15px !important;
        line-height: 1.5 !important;
        color: rgba(255, 255, 255, 0.95) !important;
        margin: 0 0 18px 0 !important;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3) !important;
    }
    .sppb-addon-sp-slider .sp-item .sp-slider-content-wrap .sppb-sp-slider-button {
        margin-top: 4px !important;
    }
    .sppb-addon-sp-slider .sp-item .sp-slider-content-wrap .sppb-sp-slider-button .sp-slider-btn-text {
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        padding: 12px 20px !important;
        letter-spacing: 1px !important;
        white-space: normal !important;
        display: inline-block !important;
    }
}

/* =================================================================
   OFF-CANVAS MENU — Redesign Apple-Style Minimaliste 2026
   Ambassade de Côte d'Ivoire — Charte : Orange #e07800, Vert #00ab68
   ================================================================= */

/* 0. Touch mobile — supprime le délai 300ms et les gestes parasites */
.offcanvas-menu,
.offcanvas-menu a,
.offcanvas-menu span,
.offcanvas-menu .menu-toggler {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* 1. Panneau */
.offcanvas-menu {
    width: 340px !important;
    background-color: #ffffff !important;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.08) !important;
    transition: right 0.45s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
body.ltr.offcanvs-position-right .offcanvas-menu { right: -340px; }
body.ltr.offcanvs-position-right.offcanvas-active .offcanvas-menu { right: 0; }

/* 2. Header Orange — d-flex conservé, logo + croix sur la même ligne */
.offcanvas-menu > .d-flex {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background-color: #e07800 !important;
    padding: 20px 16px 20px 20px !important;
    border-radius: 0 !important;
    position: relative;
    z-index: 2;
}

/* 3. Logo : prend toute la place restante */
.offcanvas-menu > .d-flex .logo {
    flex: 1 1 auto !important;
    min-width: 0;
}
.offcanvas-menu .logo-image-phone {
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}

/* 4. Bouton fermer : positionné en haut à droite du header */
.offcanvas-menu .close-offcanvas {
    position: absolute !important;
    top: 8px !important;
    right: 12px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
    transition: background-color 0.2s ease !important;
    border: none !important;
    cursor: pointer;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 3;
}
.offcanvas-menu .close-offcanvas:hover {
    background: rgba(255, 255, 255, 0.35) !important;
}

/* Masquer le burger-icon d'origine */
.offcanvas-menu .close-offcanvas .burger-icon {
    display: none !important;
}

/* Croix pure CSS blanche */
.offcanvas-menu .close-offcanvas::before,
.offcanvas-menu .close-offcanvas::after {
    content: '' !important;
    position: absolute;
    width: 20px;
    height: 2px;
    background-color: #fff !important;
    top: 50%;
    left: 50%;
}
.offcanvas-menu .close-offcanvas::before {
    transform: translate(-50%, -50%) rotate(45deg);
}
.offcanvas-menu .close-offcanvas::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* 5. Zone des liens */
.offcanvas-inner {
    padding: 12px 0 40px 0 !important;
}
.offcanvas-inner ul.menu {
    margin: 0 !important;
    padding: 0 !important;
}
.offcanvas-inner ul.menu > li {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
    overflow: visible !important;
}
.offcanvas-inner ul.menu > li:last-child {
    border-bottom: none !important;
}

/* 6. Liens du menu principal */
.offcanvas-inner ul.menu > li > a,
.offcanvas-inner ul.menu > li > span,
.offcanvas-inner ul.menu > li > .nav-header {
    display: block !important;
    padding: 18px 60px 18px 24px !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    color: #1d1d1f !important;
    line-height: 1.4 !important;
    letter-spacing: -0.01em !important;
    background-color: transparent !important;
    transition: color 0.2s ease, background-color 0.2s ease, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    text-decoration: none !important;
    position: relative !important;
    opacity: 1 !important;
}

/* 7. Micro-interactions */
@media (hover: hover) {
    .offcanvas-inner ul.menu > li > a:hover,
    .offcanvas-inner ul.menu > li > span:hover {
        transform: translateX(6px) !important;
        color: #e07800 !important;
        background-color: transparent !important;
    }
}
.offcanvas-inner ul.menu > li > a:active,
.offcanvas-inner ul.menu > li > span:active {
    background-color: rgba(0, 0, 0, 0.03) !important;
    transform: scale(0.98) !important;
    transition-duration: 0.1s !important;
}

/* Lien actif (page courante) */
.offcanvas-inner ul.menu > li.active > a,
.offcanvas-inner ul.menu > li.active > span {
    color: #e07800 !important;
    font-weight: 500 !important;
}

/* 8. Liens et chevrons : flex pour alignement parfait */
.offcanvas-menu .offcanvas-inner ul.menu li > a,
.offcanvas-menu .offcanvas-inner ul.menu li > span,
.offcanvas-menu .offcanvas-inner ul.menu li > .nav-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Le toggler n'est plus en position absolute : il est dans le flux flex */
.offcanvas-menu .offcanvas-inner .menu-toggler {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    min-height: 20px !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    cursor: pointer;
    background: transparent !important;
    margin-left: auto !important;
    margin-right: -36px !important;
    align-self: center !important;
}

/* Chevron vers le bas (fermé) */
.offcanvas-menu .offcanvas-inner .menu-toggler::after {
    font-family: "FA Sub Solid" !important; /* [FA-SUBSET] repoint */
    content: "\f078" !important;
    font-weight: 900 !important;
    font-size: 11px !important;
    color: #86868b !important;
    display: inline-block !important;
    transition: color 0.2s ease, transform 0.3s ease;
}

/* Chevron orange au survol */
.offcanvas-menu .offcanvas-inner li:hover > * > .menu-toggler::after,
.offcanvas-menu .offcanvas-inner li:hover > .menu-separator > .menu-toggler::after {
    color: #e07800 !important;
}

/* Chevron vers le haut (ouvert) */
.offcanvas-menu .offcanvas-inner li.menu-parent-open > * > .menu-toggler::after,
.offcanvas-menu .offcanvas-inner li.menu-parent-open > .menu-separator > .menu-toggler::after {
    content: "\f077" !important;
    color: #e07800 !important;
}

/* 9. Sous-menus */
.offcanvas-inner ul.menu > li > ul {
    background-color: transparent !important;
    border-radius: 0 !important;
    padding: 0 0 8px 0 !important;
    margin: 0 0 0 10px !important;
}
.offcanvas-inner ul.menu li ul li {
    border-bottom: none !important;
    overflow: visible !important;
}
.offcanvas-menu .offcanvas-inner ul.menu li ul li > a,
.offcanvas-menu .offcanvas-inner ul.menu li ul li > span,
.offcanvas-menu .offcanvas-inner ul.menu li ul li > .menu-separator {
    font-size: 15px !important;
    padding: 14px 56px 14px 36px !important;
    color: #6e6e73 !important;
    opacity: 1 !important;
    font-weight: 400 !important;
    display: block !important;
    position: relative !important;
    transition: color 0.2s ease !important;
}
.offcanvas-menu .offcanvas-inner ul.menu li ul li > a:hover,
.offcanvas-menu .offcanvas-inner ul.menu li ul li > span:hover {
    color: #1d1d1f !important;
}

/* 10. Contact / Social */
.offcanvas-inner .sp-contact-info,
.offcanvas-inner .social-icons {
    padding: 0 24px;
    margin-top: 24px;
}

/* 11. Overlay */
.offcanvas-overlay {
    background: rgba(0, 0, 0, 0.4) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
}

/* 12. Responsive */
@media (max-width: 576px) {
    .offcanvas-menu {
        width: 300px !important;
    }
    body.ltr.offcanvs-position-right .offcanvas-menu {
        right: -300px;
    }
    .offcanvas-menu > .d-flex {
        padding: 16px 12px 16px 16px !important;
    }
    .offcanvas-inner ul.menu > li > a,
    .offcanvas-inner ul.menu > li > span {
        padding: 16px 56px 16px 20px !important;
        font-size: 16px !important;
    }
    .offcanvas-menu .offcanvas-inner ul.menu li ul li > a,
    .offcanvas-menu .offcanvas-inner ul.menu li ul li > span {
        padding: 13px 52px 13px 28px !important;
        font-size: 14px !important;
    }
}
/* =================================================================
   MEGA MENU — Sous-menu actif : style minimaliste (couleur + graisse)
   Cible uniquement les liens dans les dropdowns du mega menu.
   ================================================================= */
.sp-megamenu-parent .sp-mega-group-child li.sp-menu-item.active > a,
.sp-megamenu-parent .sp-mega-group-child li.sp-menu-item.current-item > a,
.sp-megamenu-parent .sp-mega-group-child li.sp-menu-item.active > a:hover,
.sp-megamenu-parent .sp-mega-group-child li.sp-menu-item.current-item > a:hover {
    background-color: transparent !important;
    background: none !important;
    color: #e07800 !important;
    font-weight: 500 !important;
    border: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}
.sp-megamenu-parent .sp-mega-group-child li.sp-menu-item.active > a::before,
.sp-megamenu-parent .sp-mega-group-child li.sp-menu-item.active > a::after,
.sp-megamenu-parent .sp-mega-group-child li.sp-menu-item.current-item > a::before,
.sp-megamenu-parent .sp-mega-group-child li.sp-menu-item.current-item > a::after {
    display: none !important;
    content: none !important;
}

/* =================================================================
   OFF-CANVAS MENU MOBILE — Alignement vertical des chevrons (2026-05-27)
   Contexte : le SCSS original (offcanvas.scss) cible
   `.off-canvas-menu ul.menu .menu-toggler` mais le markup réel rendu par
   Joomla (mod_menu nav-pills) place les togglers dans `.offcanvas-inner
   .mod-menu` — donc ces règles ne s'appliquent plus. Résultat :
   `position: static` au lieu d'absolute, et `transform: translateY(-50%)`
   part de la position en flow naturel, remontant les chevrons de 10 px
   au-dessus du centre du label.
   Fix : restaurer le pattern absolute + top:50% + translateY(-50%) avec
   le bon sélecteur, et neutraliser le line-height hérité pour aligner
   correctement la glyphe FontAwesome. Couvre les 2 niveaux (parent
   direct + sous-parent). Garde les chevrons à l'extrême droite du
   conteneur (look natif menu mobile).
   ================================================================= */
.offcanvas-inner .mod-menu li.menu-parent > a,
.offcanvas-inner .mod-menu li.menu-parent > .menu-separator {
    position: relative !important;
}
.offcanvas-inner .mod-menu .menu-toggler {
    position: absolute !important;
    top: 50% !important;
    /* Marge confortable du bord droit, chevron clairement dans la zone
       visible de l'offcanvas. Le padding 12px crée une zone cliquable
       d'au moins 44×44 px (recommandation WCAG 2.5.5 Target Size). */
    right: 12px !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    -webkit-transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    /* Zone cliquable confortable (>= 44px) sans dépasser visuellement. */
    width: 40px !important;
    height: 40px !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    cursor: pointer !important;
    z-index: 2 !important;
}
.offcanvas-inner .mod-menu .menu-toggler::after {
    display: block !important;
    line-height: 1 !important;
}

/* =====================================================================
   Flux RSS — hiérarchie de lecture (titre / date / description)
   Pages SP Page Builder · module RSS Joomla (ul.newsfeed)
   2026-05-31 — charte ambassade : orange foncé #b36000 / clair #e07800
   ===================================================================== */
.sppb-addon-module .newsfeed { list-style: none; margin: 0; padding: 0; }
.sppb-addon-module .newsfeed > li {
    padding: 11px 0;
    border-bottom: 1px solid #ededed;
}
.sppb-addon-module .newsfeed > li:last-child { border-bottom: 0; padding-bottom: 0; }

/* Titre de l'article */
.sppb-addon-module .newsfeed .feed-link a {
    color: #282e3f;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.4;
    text-decoration: none;
    transition: color .15s ease;
}
.sppb-addon-module .newsfeed .feed-link a:hover,
.sppb-addon-module .newsfeed .feed-link a:focus {
    color: #e07800;
    text-decoration: underline;
}

/* Date de publication */
.sppb-addon-module .newsfeed .feed-item-date {
    margin: 4px 0 5px;
    color: #8a8f98;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* Description / chapô */
.sppb-addon-module .newsfeed .feed-item-description {
    color: #555b66;
    font-size: 13.5px;
    line-height: 1.55;
    margin: 0;
}
.sppb-addon-module .newsfeed .feed-item-description img { max-width: 100%; height: auto; }

/* =====================================================================
   Raccourci « Actualité des pays couverts » — bas de l'offcanvas mobile
   Aligné sur les items du menu (Inter 16/400 #1d1d1f, -.16px). Trait
   neutre + symétrie verticale autour du trait. 2026-05-31
   ===================================================================== */
.offcanvas-inner .offcanvas-actu {
    margin-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.offcanvas-menu .offcanvas-inner .offcanvas-actu a {
    display: flex;
    align-items: center;
    gap: 10px;                        /* icone juste apres le texte */
    padding: 35px 20px 16px;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 22.4px;
    letter-spacing: -0.16px;
    color: #1d1d1f !important;
    text-decoration: none;
}
.offcanvas-menu .offcanvas-inner .offcanvas-actu a:hover,
.offcanvas-menu .offcanvas-inner .offcanvas-actu a:focus {
    color: #1d1d1f !important;
}
.offcanvas-menu .offcanvas-inner .offcanvas-actu i {
    font-size: 16px !important;
    color: #86868b !important;
    line-height: 1;
    flex-shrink: 0;
    position: relative;
    top: -1px;                        /* ~1px plus haut */
    left: 2px;                        /* ~2px vers la droite */
}

/* =====================================================================
   Page « Actualité des pays couverts » (menu itemid-400) — mobile
   Corrige le débordement horizontal (texte rogné à droite) en ≤767px :
   - gouttière négative du .row Helix (#sp-component) non absorbée,
   - breakout des sections SP Page Builder + section imbriquée régionale
     (padding latéral 30px) qui dépassaient le viewport (~26 à 69px).
   Scopé à la page + au breakpoint mobile : aucun impact desktop/tablette
   ni sur les autres pages. 2026-05-31
   ===================================================================== */
@media (max-width: 767.98px) {
    /* 1. Neutralise la gouttière négative du composant Helix sur cette page */
    body.itemid-400 #sp-component.col-lg-12 { padding-left: 0 !important; padding-right: 0 !important; }
    body.itemid-400 #sp-main-body > .row { margin-left: 0 !important; margin-right: 0 !important; }

    /* 2. Sections / rangées / colonnes SPPB : jamais plus larges que l'écran */
    body.itemid-400 .sppb-section,
    body.itemid-400 .sppb-row-container,
    body.itemid-400 .sppb-row,
    body.itemid-400 .sppb-nested-row,
    body.itemid-400 .sppb-container-inner,
    body.itemid-400 [class*="sppb-col"],
    body.itemid-400 .sppb-column,
    body.itemid-400 .sppb-column-addons {
        max-width: 100% !important;
        min-width: 0 !important;
    }
    body.itemid-400 .sppb-row-container > .sppb-row,
    body.itemid-400 .sppb-nested-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 3. Section imbriquée du bloc régional : padding latéral 30px -> 0
          (la colonne fournit déjà la gouttière) */
    body.itemid-400 .sppb-column-addons .sppb-section {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 4. Coupe-circuit + retour à la ligne propre des titres/descriptions */
    body.itemid-400 .page-content { overflow-x: clip; }
    body.itemid-400 .sppb-addon-module .newsfeed * { overflow-wrap: anywhere; }
}

/* =====================================================================
   iOS Safari — neutralise la détection automatique (dates/numéros) qui
   colorait les liens en bleu hors charte. Complète le meta
   format-detection ajouté dans index.php. Renforce la couleur des titres
   d'articles pour primer sur d'éventuels styles UA. 2026-05-31
   ===================================================================== */
.sppb-addon-module .newsfeed a[x-apple-data-detectors],
body.itemid-400 a[x-apple-data-detectors] {
    color: inherit !important;
    text-decoration: none !important;
}
.sppb-addon-module .newsfeed .feed-link a:link,
.sppb-addon-module .newsfeed .feed-link a:visited {
    color: #282e3f !important;
}
.sppb-addon-module .newsfeed .feed-link a:hover,
.sppb-addon-module .newsfeed .feed-link a:active {
    color: #e07800 !important;
}
.sppb-addon-module .newsfeed .feed-item-date { color: #8a8f98 !important; }

/* =====================================================================
   Page « Actualité des pays couverts » (itemid-400) — mobile
   Resserre l'écart vertical entre la section d'intro (margin-bottom 90px)
   et le 1er bloc régional (padding-top 40px), trop grand sur mobile.
   Desktop/tablette inchangés. 2026-05-31
   ===================================================================== */
@media (max-width: 767.98px) {
    body.itemid-400 #section-id-7231def6-4df3-4be3-ad78-10201f7ad3b5 { margin-bottom: 24px !important; }
    body.itemid-400 #section-id-8a6092b7-ddb2-492d-b8a2-1855163ae062 { padding-top: 16px !important; }
}

/* =====================================================================
   Optimisation du CLS (Cumulative Layout Shift) — Header & Logo
   Réserve l'espace nécessaire pour le logo et le bouton hamburger
   pendant le chargement asynchrone des styles, évitant les sauts d'écran.
   ===================================================================== */
#sp-header {
    min-height: 108px; /* Hauteur par défaut sur desktop */
}
@media (max-width: 991.98px) {
    #sp-header {
        min-height: 75px; /* Hauteur du header mobile */
    }
}

/* Logo : la hauteur pilote la largeur, le ratio natif est préservé (évite la déformation) */
.logo-image {
    width: auto;
    height: 80px;
    max-width: 100%;
}
@media (max-width: 991.98px) {
    .logo-image-phone, .logo-image {
        width: auto;
        height: 57px; /* était 68 — voir note « aération » ci-dessous */
        max-width: 100%;
    }
}
@media (max-width: 575.98px) {
    .logo-image-phone, .logo-image {
        width: auto;
        height: 47px; /* était 56 — voir note « aération » ci-dessous */
        max-width: 100%;
    }
}
/* Aération du logo (option A, 2026-07-16) : l'ancien webp contenait ~17 % de marges
   transparentes (dessin 58 px dans une boîte de 70). Le SVG plein cadre paraissait
   donc plus gros et plus bas à boîte égale ; les hauteurs de ce bloc et des deux
   media queries ci-dessus reproduisent l'encombrement visuel d'origine.
   Par ailleurs le thème (responsive.scss ≤1440px) force height:auto !important sur
   .logo-image (pensé pour un raster pré-dimensionné) : sélecteur plus spécifique
   pour reprendre la main, sinon le SVG s'affiche en 958×201. */
@media (max-width: 1440px) {
    #sp-header .logo .logo-image,
    #sp-header.header-sticky .logo .logo-image {
        height: 58px !important;
        width: auto !important;
    }
}
@media (min-width: 1440.02px) {
    #sp-header .logo .logo-image,
    #sp-header.header-sticky .logo .logo-image {
        height: 54px !important;
        width: auto !important;
    }
}
/* Centrage vertical du header mobile/tablette : la rangée interne (50 px) est calée
   en haut du bandeau (75 px) et l'ancre du logo génère une ligne inline fantôme ;
   le centrage apparent d'avant reposait sur le débordement de l'ancien logo (56 px).
   Centrage structurel plutôt que marges magiques. */
@media (max-width: 991.98px) {
    #sp-header {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    #sp-logo {
        display: flex;
        align-items: center;
    }
    #sp-logo .logo > a {
        display: flex;
        align-items: center;
    }
    /* Neutralise le margin-top:1rem inline du template (compensation taillée
       pour l'ancien logo qui débordait de sa rangée) */
    #sp-logo .logo-image-phone {
        margin-top: 0;
    }
}

/* Cible tactile du burger — 2026-07-16.
   L'ancre ne mesurait que 44×24 px effectifs : la règle thème
   `.header-has-modules #offcanvas-toggler { height: auto }` (responsive.scss,
   ≤575px) bat `#offcanvas-toggler` seul par spécificité, et le contenu (icône
   25×16) fixait la hauteur. Résultat : ~4 mm utiles sous le doigt, taps ratés
   « aléatoires » sur iPhone (minimum Apple HIG : 44×44 pt). Le sélecteur
   ci-dessous égale la spécificité du thème et custom.css est chargé en dernier,
   donc il gagne par ordre — pas de !important. Le ::after étend la zone
   tactile de 8 px tout autour sans impact visuel ni layout, et
   touch-action:manipulation supprime le délai double-tap d'iOS. */
#offcanvas-toggler,
.header-has-modules #offcanvas-toggler {
    position: relative;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}
#offcanvas-toggler::after {
    content: "";
    position: absolute;
    inset: -8px;
}
.burger-icon {
    width: 25px;
    height: 16px;
}

/* ============================================================================
   [FA-SUBSET] Allègement de la police d'icônes Font Awesome — 2026-06-01
   ----------------------------------------------------------------------------
   But : remplacer les polices FA complètes (~294 Ko : solid 154 + brands 115
   + regular 25) chargées par SP Page Builder / le core, par des sous-ensembles
   auto-hébergés ne contenant QUE les glyphes réellement utilisés (~21 Ko).
   Les codepoints FA d'origine sont PRÉSERVÉS (pyftsubset) : aucune classe fa-*
   ni règle ::before n'est modifiée. On repointe juste la FAMILLE des classes
   (!important bat l'ordre de cascade, donc insensible à la recombinaison JCH).
   Régénérer après ajout d'icônes : images/site-fonts/regen-fa-subset.sh
   puis purger le cache JCH Optimize. NE PAS éditer les @font-face à la main.
   ============================================================================ */
@font-face{font-family:'FA Sub Solid';font-style:normal;font-weight:900;font-display:block;src:url('https://ambaciaddis.org/images/site-fonts/fa-solid-900.subset.woff2') format('woff2');}
@font-face{font-family:'FA Sub Regular';font-style:normal;font-weight:400;font-display:block;src:url('https://ambaciaddis.org/images/site-fonts/fa-regular-400.subset.woff2') format('woff2');}
@font-face{font-family:'FA Sub Brands';font-style:normal;font-weight:400;font-display:block;src:url('https://ambaciaddis.org/images/site-fonts/fa-brands-400.subset.woff2') format('woff2');}
.fa,.fas,.fa-solid{font-family:'FA Sub Solid'!important}
.far,.fa-regular{font-family:'FA Sub Regular'!important}
.fab,.fa-brands{font-family:'FA Sub Brands'!important}
/* fin [FA-SUBSET] */