/* #menu-1-c7d0ab6 > li:last-child > a {
    background: #2563eb;
    color: #fff !important;
    border-radius: 6px;
    font-weight: 700;
    transition: all 0.2s ease;
} */

/* #menu-1-c7d0ab6 > li:last-child > a:hover {
    background: #1d4ed8;
    color: #fff !important;
    transform: translateY(-2px);
} */

/* === Smart Sticky Header — 20/09/2026 ===
   Masqué au scroll down (100 % d'espace au contenu), réaffiché au
   moindre scroll up. CSS seul = état visible (no-JS safe) ; c'est le
   JS (inar-smart-header.js) qui pose/retire .inar-header-hidden.
   Volontairement : sticky + transform uniquement (aucun reflow, pas de
   saut de contenu), Elementor et ses réglages intacts.
   1) HFE pose .ehf-header #masthead (position:relative, z-index:99) qui
      battait notre sélecteur en spécificité -> pas de sticky. On passe
      par body.ehf-header #masthead, plus spécifique, qui gagne.
   2) Fond blanc opaque : le header reste lisible une fois collé au
      scroll (il était transparent). Pas de will-change:transform car
      cela casse les descendants en position:fixed (flyout mobile HFE).
   3) Offset barre d'admin UNIQUEMENT si elle est vraiment rendue
      (:has(#wpadminbar)) : une classe admin-bar sans barre visible
      (barre masquée, aperçu, cache) collait sinon le header 32/46px
      trop bas, avec le contenu qui passe au-dessus.
   4) Préfixe -webkit-sticky pour les vieux navigateurs mobiles. */
body.ehf-header #masthead,
#inar-header-desktop,
[id="#inar-header-desktop"]{
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 999;
  transition: transform 0.32s ease;
}
body.ehf-header #masthead{
  background-color: #ffffff;
}


/* ==============================
   Menu principal - élément actif
   Exception demandée (21/09/2026) à design.txt §0.1 qui interdit
   normalement tout CSS ciblant le header/menu Elementor : soulignement
   permanent de la page active.
   Correctif : le ::after restait invisible hors :hover car
   1) le <a> n'était pas positionné (absolute sans référent),
   2) HFE en hfe-pointer__none masque les ::after (opacity 0),
   3) sélecteurs trop étroits (WP ajoute aussi -ancestor/-parent/active).
   Animation (21/09/2026) : sur l'actif uniquement (pas de hover),
   le trait naît petit au centre puis s'étire doucement (scaleX 0 → 1,
   origine centre) à chaque chargement de page.
   ============================== */

/* Les liens sont le référent positionné du trait actif. */
.inar-header-menu .hfe-nav-menu > li > a {
    position: relative;
}

.inar-header-menu .hfe-nav-menu > li.current-menu-item > a,
.inar-header-menu .hfe-nav-menu > li.current_page_item > a,
.inar-header-menu .hfe-nav-menu > li.current-menu-ancestor > a,
.inar-header-menu .hfe-nav-menu > li.current-menu-parent > a,
.inar-header-menu .hfe-nav-menu > li.current_page_parent > a,
.inar-header-menu .hfe-nav-menu > li.current_page_ancestor > a,
.inar-header-menu .hfe-nav-menu > li.active > a,
.inar-header-menu .hfe-nav-menu > li > a.active,
.inar-header-menu .hfe-nav-menu > li > a[aria-current="page"] {
    position: relative;
    /* color: #2563eb !important; */
}

.inar-header-menu .hfe-nav-menu > li.current-menu-item > a::after,
.inar-header-menu .hfe-nav-menu > li.current_page_item > a::after,
.inar-header-menu .hfe-nav-menu > li.current-menu-ancestor > a::after,
.inar-header-menu .hfe-nav-menu > li.current-menu-parent > a::after,
.inar-header-menu .hfe-nav-menu > li.current_page_parent > a::after,
.inar-header-menu .hfe-nav-menu > li.current_page_ancestor > a::after,
.inar-header-menu .hfe-nav-menu > li.active > a::after,
.inar-header-menu .hfe-nav-menu > li > a.active::after,
.inar-header-menu .hfe-nav-menu > li > a[aria-current="page"]::after {
    content: "" !important;
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 3px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #2563eb, #8b5cf6) !important;
    display: block !important;
    visibility: visible !important;
    /* SANS !important sur opacity/transform : un !important écrase les
       @keyframes (cascade CSS) et le trait apparaissait d'un coup. */
    opacity: 1;
    transform: scaleX(1);
    transform-origin: center;
    pointer-events: none;
    animation: inar-menu-grow 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes inar-menu-grow {
    0% {
        opacity: 0;
        transform: scaleX(0);
    }
    25% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: scaleX(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .inar-header-menu .hfe-nav-menu > li.current-menu-item > a::after,
    .inar-header-menu .hfe-nav-menu > li.current_page_item > a::after,
    .inar-header-menu .hfe-nav-menu > li.current-menu-ancestor > a::after,
    .inar-header-menu .hfe-nav-menu > li.current-menu-parent > a::after,
    .inar-header-menu .hfe-nav-menu > li.current_page_parent > a::after,
    .inar-header-menu .hfe-nav-menu > li.current_page_ancestor > a::after,
    .inar-header-menu .hfe-nav-menu > li.active > a::after,
    .inar-header-menu .hfe-nav-menu > li > a.active::after,
    .inar-header-menu .hfe-nav-menu > li > a[aria-current="page"]::after {
        animation: none;
    }
}

/* ==============================
   Menu principal - survol (couleur seule, 21/09/2026)
   Fond arrondi retiré : seul le texte passe en #1D4ED8 avec transition
   douce 0,25s. Réservé aux NON actifs (l'actif garde son ::after 3px).
   Le ::after/::before de hover d'HFE/Elementor (gros soulignement) est
   neutralisé sur les items NON actifs uniquement.
   ============================== */
.inar-header-menu .hfe-nav-menu > li:not(.current-menu-item):not(.current_page_item):not(.current-menu-ancestor):not(.current-menu-parent):not(.current_page_parent):not(.current_page_ancestor):not(.active) > a:not(.active):not([aria-current="page"]) {
    transition: color 0.25s ease;
}
.inar-header-menu .hfe-nav-menu > li:not(.current-menu-item):not(.current_page_item):not(.current-menu-ancestor):not(.current-menu-parent):not(.current_page_parent):not(.current_page_ancestor):not(.active) > a:not(.active):not([aria-current="page"]):hover,
.inar-header-menu .hfe-nav-menu > li:not(.current-menu-item):not(.current_page_item):not(.current-menu-ancestor):not(.current-menu-parent):not(.current_page_parent):not(.current_page_ancestor):not(.active) > a:not(.active):not([aria-current="page"]):focus-visible {
    background-color: transparent;
    color: #1D4ED8;
}
/* Neutralise le gros soulignement de hover HFE sur les non-actifs. */
.inar-header-menu .hfe-nav-menu > li:not(.current-menu-item):not(.current_page_item):not(.current-menu-ancestor):not(.current-menu-parent):not(.current_page_parent):not(.current_page_ancestor):not(.active) > a:not(.active):not([aria-current="page"]):hover::after,
.inar-header-menu .hfe-nav-menu > li:not(.current-menu-item):not(.current_page_item):not(.current-menu-ancestor):not(.current-menu-parent):not(.current_page_parent):not(.current_page_ancestor):not(.active) > a:not(.active):not([aria-current="page"]):hover::before {
    content: none !important;
    display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    .inar-header-menu .hfe-nav-menu > li > a {
        transition: none;
    }
}

/* ==============================
fin   Menu principal - élément actif
   ============================== */


/* Barre d'admin WP connectée : le header colle sous elle, pas dessous.
   :has() = la barre doit exister dans le DOM, sinon top:0 (pas de
   bande vide avec le contenu qui défile au-dessus du header). */
body.admin-bar:has(#wpadminbar) header#masthead{ top: 32px; }
@media (max-width: 782px){
  body.admin-bar:has(#wpadminbar) header#masthead{ top: 46px; }
}
body.ehf-header #masthead.inar-header-hidden,
#inar-header-desktop.inar-header-hidden,
[id="#inar-header-desktop"].inar-header-hidden{
  transform: translateY(-110%);
}
@supports not (position: sticky){
  body.ehf-header #masthead,
  #inar-header-desktop,
  [id="#inar-header-desktop"]{ position: relative; }
}
@media (prefers-reduced-motion: reduce){
  body.ehf-header #masthead,
  #inar-header-desktop,
  [id="#inar-header-desktop"]{ transition: none; }
}

.elementor-heading-title {
  font-family: "Plus Jakarta Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-style: normal;
  font-weight: 700;
  color: rgb(255, 255, 255);
  font-size: 56px;
  line-height: 67px;
}

#inar-hero{position:relative;overflow:hidden}
#inar-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(500px 220px at 12% 0%,rgba(59,130,246,.22),transparent 70%),
radial-gradient(420px 200px at 88% 100%,rgba(129,140,248,.16),transparent 70%)}
#inar-hero .elementor-widget-wrap,#inar-hero .e-con{position:relative}

/* === Design System 2.0 (contenu uniquement — header/footer Elementor intacts) === */
:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --brand: #4f46e5;
    --brand-dark: #4338ca;
    --gradient-brand: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
    --gradient-navy: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    --ink: #0f172a;
    --muted: #64748b;
    --radius: 1rem;
    --radius-lg: 1.25rem;
    --shadow-soft: 0 16px 30px -8px rgba(15, 23, 42, 0.12);
    --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 25px -8px rgba(15, 23, 42, 0.10);
    --ring: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

/* Halo aurora sur les heroes (léger : 2 dégradés radiaux, 0 image) */
.doc-hero,
.contact-hero,
.support-hero,
.inar-catalog-header,
.inar-404-hero,
.inar-searchpage-hero,
.fs-pricing-hero {
    position: relative;
    overflow: hidden;
}
.doc-hero::before,
.contact-hero::before,
.support-hero::before,
.inar-catalog-header::before,
.inar-404-hero::before,
.inar-searchpage-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(500px 220px at 12% 0%, rgba(59, 130, 246, 0.22), transparent 70%),
        radial-gradient(420px 200px at 88% 100%, rgba(129, 140, 248, 0.16), transparent 70%);
}
.doc-hero-inner,
.contact-hero-inner,
.inar-404-hero-inner,
.inar-searchpage-hero-inner {
    position: relative;
}

/* Halo statique (la parallaxe a été retirée : elle créait une bande visible). */

/* Boutons : dégradé + relief au survol */
.doc-card-btn,
.contact-card .wpcf7-submit {
    background-image: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
    box-shadow: 0 8px 18px -8px rgba(37, 99, 235, 0.55);
}
.doc-card-btn:hover,
.contact-card .wpcf7-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 26px -8px rgba(37, 99, 235, 0.55);
}

/* Détails */
::selection {
    background: rgba(37, 99, 235, 0.2);
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
html {
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    .doc-card-btn:hover,
    .contact-card .wpcf7-submit:hover {
        transform: none;
    }
}

/* === Interactions (léger : CSS + 1 observer déjà présent) === */

/* Apparition de page (templates thème uniquement) */
.doc-wrapper,
.contact-wrapper {
    animation: inar-page-in 0.7s ease both;
}
@keyframes inar-page-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

/* Enfoncement des boutons */
.doc-card-btn:active,
.contact-card .wpcf7-submit:active,
.ca-btn:active {
    transform: translateY(0) scale(0.98);
}

/* Bouton retour en haut HFE (Elementor) : aligné au bleu du site.
   Elementor et ses réglages intacts : simple surcharge côté thème. */
.hfe-scroll-to-top-wrap .hfe-scroll-to-top-button {
    border-color: #2563eb !important;
    background-color: #ffffff !important;
}
.hfe-scroll-to-top-wrap .hfe-scroll-to-top-button i,
.hfe-scroll-to-top-wrap .hfe-scroll-to-top-button svg,
.hfe-scroll-to-top-wrap .hfe-scroll-to-top-button span {
    color: #2563eb !important;
    fill: #2563eb !important;
}
/* Garde-fou overflow horizontal (24/09/2026, accueil Elementor + responsive) :
   Constat : sur la page d'accueil Elementor uniquement, en mode responsive du
   navigateur, une scrollbar horizontale apparaît en bas une fois la page
   scrollée (moment où le bouton retour en haut HFE s'affiche, d'où la fausse
   corrélation). Le bouton est en position:fixed (n'étend jamais la zone de
   scroll) : le vrai coupable est un contenu Elementor de l'accueil qui dépasse
   (classique : full-bleed 100vw qui inclut la largeur de la scrollbar verticale
   en émulation, widget PixCompare/PixVisualize en overflow:visible, badge
   absolu). Sur appareil réel (Pixefy) rien ne dépasse : typique d'un dépassement
   de quelques px visible uniquement en émulation.
   Correctif volontairement NON visuel (Elementor/header/footer intacts) :
   1) html/body ne peuvent plus défiler horizontalement (clip préserve les
      sticky, hidden en repli vieux navigateurs) ;
   2) le wrapper HFE (div statique en fin de body, pilotée en display par le JS
      HFE) a une emprise nulle : même visible, il ne peut pas élargir la page ;
   3) le bouton reste ancré au viewport, jamais au flux (safe-area iOS incluse).
   Design du bouton (couleur, taille, réglages Elementor) inchangé. */
html,
body {
    overflow-x: clip;
}
@supports not (overflow: clip) {
    html,
    body {
        overflow-x: hidden;
    }
}
.hfe-scroll-to-top-wrap {
    position: static !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    pointer-events: none !important;
}
.hfe-scroll-to-top-wrap .hfe-scroll-to-top-button {
    position: fixed !important;
    top: auto !important;
    left: auto !important;
    right: 15px !important;
    right: max(15px, env(safe-area-inset-right)) !important;
    bottom: 15px !important;
    bottom: max(15px, env(safe-area-inset-bottom)) !important;
    max-width: calc(100vw - 30px) !important;
    pointer-events: auto !important;
}
button.inar-to-top {
    left: auto !important;
    right: 1.25rem !important;
    right: max(1.25rem, env(safe-area-inset-right)) !important;
    max-width: calc(100vw - 2.5rem) !important;
}
@media (prefers-reduced-motion: reduce) {
    .doc-wrapper,
    .contact-wrapper {
        animation: none;
    }
    .inar-to-top {
        transition: none;
    }
}

/* === Couche moderne partagée : boutons dégradés, pills, skeletons, reveal === */
.inar-btn-gradient,
.fs-btn:not(:disabled),
.contact-card .wpcf7-submit {
    background-image: var(--gradient-brand) !important;
    border: none !important;
    box-shadow: 0 8px 18px -8px rgba(79, 70, 229, 0.55);
}
.inar-btn-gradient:hover,
.fs-btn:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 26px -8px rgba(79, 70, 229, 0.6);
    filter: brightness(1.05);
}
/* Pastilles plateforme / statut */
.inar-pill {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    padding: 0.28rem 0.7rem; border-radius: 999px; border: 1px solid transparent;
}
.inar-pill-wp { background: #EFF6FF; color: #1D4ED8; border-color: #BFDBFE; }
.inar-pill-presta { background: #FEF3C7; color: #92400E; border-color: #FDE68A; }
.inar-pill-shopify { background: #E9F6EC; color: #1E7A34; border-color: #BFE6C9; }
.inar-pill-ok { background: #DCFCE7; color: #166534; border-color: #BBF7D0; }
/* Skeleton shimmer (pricing / catalogue) */
.inar-skeleton {
    position: relative; overflow: hidden; background: #E2E8F0; border-radius: 0.75rem; min-height: 1rem;
}
.inar-skeleton::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
    animation: inar-shimmer 1.4s infinite;
}
@keyframes inar-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
/* Barre d'achat sticky fiche produit */
.inar-stickybuy {
    position: sticky; bottom: 0; z-index: 30;
    background: rgba(255,255,255,0.55); backdrop-filter: blur(14px);
    border-top: 1px solid #E2E8F0; padding: 0.75rem 1rem;
    display: flex; align-items: center; gap: 1rem; justify-content: space-between;
}
/* Stats hero catalogue */
.inar-hero-stats { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; margin-top: 1.5rem; }
.inar-hero-stat { display: flex; flex-direction: column; align-items: center; }
.inar-hero-stat strong { font-size: 1.5rem; color: #fff; }
.inar-hero-stat span { font-size: 0.8rem; color: #94A3B8; }

/* Retour en haut du thème (pages sans bouton HFE uniquement) */
.inar-to-top {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    width: 2.75rem;
    height: 2.75rem;
    border: none;
    border-radius: 50%;
    background-color: #2563eb;
    color: #fff;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 18px -8px rgba(37, 99, 235, 0.55);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
    z-index: 60;
}
.inar-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}
.inar-to-top:hover {
    transform: translateY(-2px);
}

/* Tablette (<= 1024px) */
@media (max-width: 1024px) {
   .elementor-heading-title {
    font-size: 42px;
    line-height: 52px;
  }
}

/* Mobile (<= 767px) */
@media (max-width: 767px) {
   .elementor-heading-title {
    font-size: 32px;
    line-height: 40px;
  }
}

/* === Compatibilité PixVisualize : le radius du thème/Elementor ne doit
   arrondir que le CONTENEUR, jamais l'image (plugin intact) ===
   Constat (capture) : le border-radius posé sur le conteneur (Style Elementor
   / carte PixVisualize avec caption "Exemple d'utilisation") fuit vers les
   <img> internes -> double arrondi + liseré blanc en bas à gauche.
   Règle : conteneur = radius + overflow:hidden (découpe) ; images = radius 0.
   Le conteneur découpe les images carrées à la bonne forme, y compris avec
   caption (bas du slider carré, bas du caption arrondi côté plugin).
   Volontairement : pas d'overflow sur .pixvisualize-block-wrapper ni
   .pixvisualize-card (internes au plugin) pour ne jamais découper la
   bordure / l'ombre propres du shortcode. */
.elementor-widget-pixvisualize .elementor-widget-container {
    overflow: hidden;
    isolation: isolate;
}
.elementor-widget-pixvisualize .elementor-widget-container img,
.pixvisualize-block-wrapper img,
.pixvisualize-card img,
.pixvisualize-slider-container img,
.pixvisualize-image-layer img,
.pixvisualize-image-layer-before img,
.pixvisualize-image-layer-after img {
    border-radius: 0 !important;
}

/* === Artefact coins caption PixVisualize : trace d'ombre alors que la
   bordure est à 0 (plugin intact) ===
   Cas cadre hero du thème UNIQUEMENT : quand le cadre du thème habille le
   hero (toggle bordure ON), c'est lui qui porte l'ombre ; l'ombre interne de
   la carte / du slider (style inline du plugin, rayon plus petit) déborderait
   en croissant gris aux coins de la caption -> neutralisée (!important face
   à l'inline). Toggle OFF ou widget Elementor seul : le thème ne touche à
   rien, le style propre du shortcode (bordure, ombre) s'affiche en entier. */
.inar-hero-shortcode:not(.is-bare) .pixvisualize-card,
.inar-hero-shortcode:not(.is-bare) .pixvisualize-slider-container {
    box-shadow: none !important;
}

/* ==============================
   Menu mobile/tablette UAE (HFE flyout) — plein écran stylé
   Exception demandée (22/09/2026) à design.txt §0.1 (ne jamais toucher
   au header/menu).
   Historique : carte modale centrée abandonnée sur demande (problèmes de
   centrage en émulation + pattern moins standard) -> retour au panneau
   plein écran "comme avant", mais design des items conservé : texte
   compact gris centré, actif noir + pastille dégradée courte, hover bleu,
   croix de fermeture native Elementor (sans habillage).
   Robustesse (22/09/2026) : ancre .inar-header-menu (classe manuelle
   Elementor, stable) + structure HFE (.hfe-flyout-wrapper, .hfe-side,
   [id^="hfe-flyout-content-id-"]) au lieu de .elementor-element-a825034 /
   #hfe-flyout-content-id-a825034 (IDs auto-générés : un widget
   supprimé/recréé ou un header réimporté les change et casse tout).
   Pas de collision avec le widget desktop (même classe .inar-header-menu)
   car lui n'a ni .hfe-flyout-wrapper ni .hfe-side (il utilise .hfe-dropdown).
   ============================== */
@media (max-width: 1024px) {
    /* Voile HFE derrière le panneau (invisible une fois ouvert : le
       panneau couvre tout ; gardé pour le clic de fermeture). */
    .inar-header-menu .hfe-flyout-wrapper .hfe-flyout-overlay {
        background: rgba(15, 23, 42, 0.32) !important;
        z-index: 999998 !important;
    }
    /* Conteneur fullscreen ; aucun backdrop-filter ici. */
    .inar-header-menu .hfe-flyout-wrapper .hfe-flyout-container {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        max-width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        z-index: 999999 !important;
        display: flex !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        padding: 0 !important;
        background: transparent !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
        pointer-events: none;
    }
    /* Panneau plein écran blanc, sans coins ni ombre. */
    .inar-header-menu [id^="hfe-flyout-content-id-"].hfe-side {
        position: relative !important;
        z-index: 1000000 !important;
        isolation: isolate;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        max-height: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        background: #ffffff !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        pointer-events: auto;
    }
    .inar-header-menu [id^="hfe-flyout-content-id-"] .hfe-flyout-content {
        padding: max(54px, env(safe-area-inset-top)) 24px max(40px, env(safe-area-inset-bottom)) !important;
    }
    /* Liste verticale centrée (compacte). */
    .inar-header-menu [id^="hfe-flyout-content-id-"] .hfe-nav-menu {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 1.15rem !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }
    .inar-header-menu [id^="hfe-flyout-content-id-"] .hfe-nav-menu > li {
        width: 100% !important;
        margin: 0 !important;
        text-align: center !important;
    }
    /* Liens : gris, centrés, taille contenu (maquette Image 1 resserrée). */
    .inar-header-menu [id^="hfe-flyout-content-id-"] .hfe-nav-menu > li > a.hfe-menu-item,
    .inar-header-menu [id^="hfe-flyout-content-id-"] .hfe-nav-menu > li > a {
        display: inline-block !important;
        position: relative !important;
        font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
        font-size: clamp(1.1rem, 4.2vw, 1.3rem) !important;
        font-weight: 400 !important;
        line-height: 1.3 !important;
        letter-spacing: 0 !important;
        color: #525252 !important;
        background: transparent !important;
        padding: 0 0 14px !important;
        transition: color 0.25s ease;
    }
    .inar-header-menu [id^="hfe-flyout-content-id-"] .hfe-nav-menu > li > a:hover,
    .inar-header-menu [id^="hfe-flyout-content-id-"] .hfe-nav-menu > li > a:focus-visible {
        color: #2563eb !important;
        background: transparent !important;
    }
    /* Item actif : noir + pastille dégradée courte centrée (pas le trait 100 %). */
    .inar-header-menu [id^="hfe-flyout-content-id-"] .hfe-nav-menu > li.current-menu-item > a,
    .inar-header-menu [id^="hfe-flyout-content-id-"] .hfe-nav-menu > li.current_page_item > a,
    .inar-header-menu [id^="hfe-flyout-content-id-"] .hfe-nav-menu > li.current-menu-ancestor > a,
    .inar-header-menu [id^="hfe-flyout-content-id-"] .hfe-nav-menu > li.active > a,
    .inar-header-menu [id^="hfe-flyout-content-id-"] .hfe-nav-menu > li > a.active,
    .inar-header-menu [id^="hfe-flyout-content-id-"] .hfe-nav-menu > li > a[aria-current="page"] {
        color: #111111 !important;
        font-weight: 500 !important;
    }
    .inar-header-menu [id^="hfe-flyout-content-id-"] .hfe-nav-menu > li.current-menu-item > a::after,
    .inar-header-menu [id^="hfe-flyout-content-id-"] .hfe-nav-menu > li.current_page_item > a::after,
    .inar-header-menu [id^="hfe-flyout-content-id-"] .hfe-nav-menu > li.current-menu-ancestor > a::after,
    .inar-header-menu [id^="hfe-flyout-content-id-"] .hfe-nav-menu > li.current-menu-parent > a::after,
    .inar-header-menu [id^="hfe-flyout-content-id-"] .hfe-nav-menu > li.active > a::after,
    .inar-header-menu [id^="hfe-flyout-content-id-"] .hfe-nav-menu > li > a.active::after,
    .inar-header-menu [id^="hfe-flyout-content-id-"] .hfe-nav-menu > li > a[aria-current="page"]::after {
        content: "" !important;
        position: absolute !important;
        left: 50% !important;
        right: auto !important;
        bottom: 0 !important;
        width: 110px !important;
        max-width: 55% !important;
        height: 5px !important;
        border-radius: 999px !important;
        background: linear-gradient(90deg, #2563eb, #8b5cf6) !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1;
        transform: translateX(-50%) scaleX(1) !important;
        transform-origin: center;
        pointer-events: none;
        animation: inar-menu-grow 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    /* Neutralise le gros soulignement HFE sur les non-actifs du flyout. */
    .inar-header-menu [id^="hfe-flyout-content-id-"] .hfe-nav-menu > li:not(.current-menu-item):not(.current_page_item):not(.active) > a:not(.active):not([aria-current="page"]):hover::after,
    .inar-header-menu [id^="hfe-flyout-content-id-"] .hfe-nav-menu > li:not(.current-menu-item):not(.current_page_item):not(.active) > a:not(.active):not([aria-current="page"]):hover::before {
        content: none !important;
        display: none !important;
    }
    /* Bouton fermer : icône configurée dans Elementor, sans habillage
       (22/09/2026 : cercle custom retiré sur demande, il dédoublait
       l'icône window-close et rendait le bouton "bizarre"). On ne garde
       que le positionnement dans la carte. */
    .inar-header-menu [id^="hfe-flyout-content-id-"] .hfe-flyout-close {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        left: auto !important;
        width: auto !important;
        height: auto !important;
        display: block !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        cursor: pointer;
    }
    .inar-header-menu [id^="hfe-flyout-content-id-"] .hfe-flyout-close svg {
        width: 22px !important;
        height: 22px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .inar-header-menu [id^="hfe-flyout-content-id-"] .hfe-nav-menu > li > a {
        transition: none;
    }
}

/* ==========================================================================
   21. FOOTER #inar-footer (UAE Elementor) — accordéon mobile + sociaux.
   Exception à design.txt §0.1 sur demande explicite : scope strict #inar-footer,
   aucune ID Elementor ciblée, header intact.
   ========================================================================== */

/* Badge "Nouveau" : ajouter la classe CSS `inar-badge-new` sur l'item de menu WP. */
#inar-footer .inar-badge-new > a::after {
    content: "Nouveau";
    display: inline-block;
    margin-left: 0.5rem;
    background: #2563eb;
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    vertical-align: middle;
}

/* Neutralise la largeur inline posée par le JS dropdown HFE (layout vertical). */
#inar-footer .hfe-nav-menu__layout-vertical {
    width: auto !important;
    left: auto !important;
}

/* Réseaux sociaux : widget HTML .inar-social (icônes Bootstrap chargées globalement).
   <div class="inar-social">
     <a href="URL" aria-label="WordPress"><i class="bi bi-wordpress" aria-hidden="true"></i></a>
     <a href="URL" aria-label="GitHub"><i class="bi bi-github" aria-hidden="true"></i></a>
     <a href="URL" aria-label="X"><i class="bi bi-twitter-x" aria-hidden="true"></i></a>
     <a href="URL" aria-label="YouTube"><i class="bi bi-youtube" aria-hidden="true"></i></a>
   </div> */
#inar-footer .inar-social {
    display: flex;
    gap: 0.6rem;
}

#inar-footer a.inar-social-btn,
#inar-footer .inar-social a {
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 0.9rem;
    color: #0f172a;
    font-size: 1.15rem;
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

#inar-footer a.inar-social-btn:hover,
#inar-footer .inar-social a:hover {
    background-color: #ffffff;
    border-color: #c7d2fe;
    color: #0f172a;
    transform: translateY(-2px);
}

/* Sélecteur de langue (bouton statique en attendant Polylang, puis switcher).
   <button type="button" class="inar-lang"><i class="bi bi-globe"></i> FR <i class="bi bi-chevron-down"></i></button> */
#inar-footer button.inar-lang {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    color: #0f172a;
    font-size: 0.875rem;
    font-weight: 700;
    padding: 0.5rem 0.9rem;
    cursor: pointer;
}

#inar-footer button.inar-lang:hover {
    background-color: #ffffff;
    border-color: #c7d2fe;
    color: #0f172a;
}

/* Accordéon mobile uniquement : desktop inchangé. */
#inar-footer .inar-foot-chevron {
    display: none;
}

/* Barre du bas (copyright + liens légaux) : empilée et centrée sur mobile. */
@media (max-width: 767px) {
    #inar-footer > .e-con:last-child {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        text-align: center;
    }
    #inar-footer > .e-con:last-child p {
        text-align: center;
        margin: 0;
    }
    #inar-footer > .e-con:last-child > .e-con {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 0.5rem 1.5rem;
    }
    #inar-footer > .e-con:last-child > .e-con:first-child {
        order: 9;
    }
    #inar-footer .elementor-button {
        white-space: nowrap;
    }
}

@media (max-width: 767px) {
    #inar-footer .inar-foot-section {
        border-bottom: 1px solid #e2e8f0;
    }
    #inar-footer .inar-foot-section > h2 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        margin: 0;
        padding: 0.9rem 0;
        font-size: 1rem;
        cursor: pointer;
    }
    #inar-footer .inar-foot-section > h2:focus-visible {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
        border-radius: 0.25rem;
    }
    #inar-footer .inar-foot-section nav {
        display: none;
        padding-bottom: 1rem;
    }
    #inar-footer .inar-foot-section.open nav {
        display: block;
    }
    #inar-footer .inar-foot-chevron {
        flex: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.75rem;
        height: 1.75rem;
        border-radius: 999px;
        background: #f1f5f9;
    }
    #inar-footer .inar-foot-chevron::after {
        content: "";
        width: 0.5rem;
        height: 0.5rem;
        border-right: 2px solid #475569;
        border-bottom: 2px solid #475569;
        transform: rotate(45deg) translate(-1px, -1px);
        transition: transform 0.2s ease;
    }
    #inar-footer .inar-foot-section.open .inar-foot-chevron::after {
        transform: rotate(225deg) translate(-1px, -1px);
    }
}

/* === Sélecteur de langue header — shortcode [inar_lang_switcher] (09/10/2026) ===
   Remplace la Liste d'icônes UAE en dur. Pilule [globe FR] + dropdown natif
   <details> (zéro JS) : desktop + flyout mobile/tablette HFE, même widget. */
.inar-langbox {
    position: relative;
    display: inline-block;
}
.inar-langbox > summary.inar-langbox-btn {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background: #fff;
    color: #0f172a;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.55rem 0.75rem;
    cursor: pointer;
}
.inar-langbox > summary.inar-langbox-btn::-webkit-details-marker {
    display: none;
}
.inar-langbox > summary.inar-langbox-btn:hover {
    border-color: #c7d2fe;
    background: #f8fafc;
    color: #0f172a;
}
.inar-langbox > summary.inar-langbox-btn:focus-visible {
    outline: 3px solid rgba(79, 70, 229, 0.35);
    outline-offset: 2px;
}
.inar-langbox > summary.inar-langbox-btn > i.bi-globe {
    color: #2563eb;
    font-size: 1rem;
}
.inar-langbox > summary.inar-langbox-btn > i.inar-langbox-chev {
    color: #64748b;
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}
.inar-langbox[open] > summary.inar-langbox-btn {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #0f172a;
}
.inar-langbox[open] > summary.inar-langbox-btn > i.inar-langbox-chev {
    transform: rotate(180deg);
}
/* Le dropdown passe AU-DESSUS du hero (header sticky + overflow visible
   sur la chaîne du widget langue, classe BO stable). */
#inar-header-desktop .inar-header-lang,
#inar-header-desktop .inar-header-lang .elementor-widget-container {
    overflow: visible;
}
.inar-langbox-list {
    position: absolute;
    top: calc(100% + 0.55rem);
    right: 0;
    z-index: 1000;
    margin: 0;
    padding: 0.35rem;
    list-style: none;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    box-shadow: 0 16px 30px -12px rgba(15, 23, 42, 0.25);
    min-width: 11rem;
    max-width: calc(100vw - 2rem);
}
/* Petite flèche de la maquette mobile, centrée sur le haut du dropdown. */
.inar-langbox[open] > ul.inar-langbox-list::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    width: 12px;
    height: 12px;
    background: #fff;
    border-top: 1px solid #e2e8f0;
    border-left: 1px solid #e2e8f0;
    transform: translateX(-50%) rotate(45deg);
}
.inar-langbox-list a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    border-radius: 0.5rem;
    color: #334155;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
}
.inar-langbox-list a:hover {
    background: #eef2ff;
    color: #0f172a;
}
.inar-langbox-list a:focus-visible {
    outline: 3px solid rgba(79, 70, 229, 0.35);
    outline-offset: -1px;
}
.inar-langbox-code {
    color: #334155;
    min-width: 1.75rem;
}
.inar-langbox-name {
    color: #64748b;
    font-weight: 500;
}
.inar-langbox-item.is-current a {
    background: #eef2ff;
}
.inar-langbox-item.is-current .inar-langbox-code {
    color: #2563eb;
    font-weight: 800;
}
.inar-langbox-item.is-current .inar-langbox-name {
    color: #0f172a;
    font-weight: 600;
}
.inar-langbox-check {
    margin-left: auto;
    color: #2563eb;
    font-size: 1rem;
}
@media (max-width: 767px) {
    .inar-langbox > summary.inar-langbox-btn {
        padding: 0.45rem 0.6rem;
        font-size: 0.82rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    .inar-langbox > summary.inar-langbox-btn,
    .inar-langbox > summary.inar-langbox-btn > i.inar-langbox-chev,
    .inar-langbox-list,
    .inar-langbox-list a,
    .inar-langbox--flags > summary.inar-langbox-btn,
    .inar-langbox--flags .inar-langbox-flag,
    .inar-langbox--flags .inar-langbox-flagbtn {
        transition: none;
    }
}

/* === Variante flags — [inar_lang_switcher style="flags"] (10/10/2026) ===
   Maquette : bouton = drapeau seul SANS contour (ni bordure ni fond,
   hover/open inclus), dropdown carte blanche radius 0.75rem + flèche haute
   centrée, lignes = [coche bleue][drapeau plat][nom natif].
   Équilibre blanc : la colonne coche (1.25rem + gap 0.7rem) creuse la zone
   blanche de gauche ; le padding-right des lignes la compense à l'identique
   (0.6 + 1.25 + 0.7) pour des zones blanches gauche/droite strictement égales.
   Si checkslot ou gap changent, ajuster le padding-right en miroir.
   Drapeau EN = GB (SVG local, voir shortcode). Zéro JS (<details> natif). */
details.inar-langbox.inar-langbox--flags {
    display: inline-block;
    vertical-align: middle;
}
details.inar-langbox.inar-langbox--flags > summary.inar-langbox-btn {
    border: 0;
    background: transparent;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Même boîte 44px que les blocs voisins (compte/recherche/burger,
       header-responsive.txt §3-5) : le drapeau est centré dans son bloc
       et le bloc se comporte comme les autres dans le cluster.
       Pilotée par les attributs size/unit du shortcode (défaut 44px). */
    width: var(--inar-langbox-size, 44px);
    height: var(--inar-langbox-size, 44px);
    margin: 0;
    padding: 0;
    gap: 0;
}
details.inar-langbox.inar-langbox--flags > summary.inar-langbox-btn:hover,
details.inar-langbox.inar-langbox--flags[open] > summary.inar-langbox-btn {
    border: 0;
    background: transparent;
    box-shadow: none;
}
.inar-langbox--flags .inar-langbox-flagbtn {
    display: block;
    width: 30px;
    height: 20px;
    object-fit: cover;
    border-radius: 3px;
    border: 0;
    box-shadow: none;
}
.inar-langbox--flags > ul.inar-langbox-list {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    min-width: 0;
    width: max-content;
    max-width: calc(100vw - 2rem);
    padding: 0.4rem;
    border-radius: 0.75rem;
    box-shadow: 0 16px 30px -8px rgba(15, 23, 42, 0.18);
}
.inar-langbox--flags .inar-langbox-list a {
    gap: 0.7rem;
    padding: 0.5rem 0.6rem;
    /* Miroir de la colonne coche : zone blanche droite = zone blanche gauche
       (0.4 UL + 0.6 lien + 1.25 coche + 0.7 gap = 0.4 UL + 2.55 lien). */
    padding-right: calc(0.6rem + 1.25rem + 0.7rem);
    border-radius: 0.5rem;
}
.inar-langbox--flags .inar-langbox-checkslot {
    flex: 0 0 1.25rem;
    width: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    font-size: 1.05rem;
    font-weight: 800;
}
.inar-langbox--flags .inar-langbox-flag {
    flex: 0 0 auto;
    width: 36px;
    height: 24px;
    object-fit: cover;
    border-radius: 3px;
    border: 0;
    box-shadow: none;
}
.inar-langbox--flags .inar-langbox-name {
    color: #0f172a;
    font-size: 1rem;
    font-weight: 600;
}
.inar-langbox--flags .inar-langbox-item.is-current a {
    background: transparent;
}
.inar-langbox--flags .inar-langbox-item.is-current .inar-langbox-name {
    font-weight: 700;
}
.inar-langbox--flags .inar-langbox-list a:hover {
    background: #f1f5f9;
}

/* Header responsive (logo + cluster mobile/tablette) : 100% Elementor BO,
   voir header-responsive.txt (démarches). Le thème ne pose ici aucun style
   de header : seul .inar-langbox du shortcode [inar_lang_switcher] reste
   en CSS (contenu généré, non stylable en BO), plus l'anti-rogne du
   dropdown sous le hero. */

/* === Fil d'Ariane Rank Math sous les heros (SEO) ===
   Bandeau blanc discret, tokens du design system uniquement. */
.inar-breadcrumbs {
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
}
.inar-breadcrumbs .rank-math-breadcrumb p {
    margin: 0;
    padding: 0.6rem 0;
    font-size: 0.85rem;
    color: #64748b;
}
.inar-breadcrumbs .rank-math-breadcrumb a {
    color: #475569;
    text-decoration: none;
}
.inar-breadcrumbs .rank-math-breadcrumb a:hover {
    color: #2563eb;
    text-decoration: underline;
}
.inar-breadcrumbs .rank-math-breadcrumb .separator {
    margin: 0 0.4rem;
    color: #cbd5e1;
}
.inar-breadcrumbs .rank-math-breadcrumb .last {
    color: #0f172a;
    font-weight: 600;
}