/* --- GESTION DES MARGES INTERNES DES SECTIONS --- */
/* Desktop : 80px */
.inar-section {
    padding-top: 80px;
    padding-bottom: 80px;
}

/* Tablette : 40px */
@media (max-width: 991px) {
    .inar-section {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}

/* Mobile : 20px */
@media (max-width: 575px) {
    .inar-section {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

/* --- STRUCTURE CONTENEUR --- */
.inar-container {
    width: 100%;
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

.inar-bg-alt {
    background-color: #edf1f6;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

/* --- GRILLES RESPONSIVE --- */
.inar-grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
}

.inar-grid-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

/* --- GRILLE CAS D'USAGE 4 COLONNES (07/10/2026) ---
   1 col mobile / 2 cols tablette / 4 cols desktop.
   minmax(0,1fr) + min-width:0 = jamais de scrollbar horizontale. */
.inar-grid-4,
.inar-use-cases-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

.inar-grid-4 > *,
.inar-use-cases-grid > * {
    min-width: 0;
}

@media (min-width: 640px) {
    .inar-grid-4,
    .inar-use-cases-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .inar-grid-4,
    .inar-use-cases-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    /* Si moins de 4 cas : les cartes occupent toute la ligne (pas de trou).
       Classe posée en PHP (single-inar_product.php). */
    .inar-use-cases-grid.inar-use-cases--count-1 {
        grid-template-columns: minmax(0, 1fr);
    }
    .inar-use-cases-grid.inar-use-cases--count-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .inar-use-cases-grid.inar-use-cases--count-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Tablette (2 cols) : à 3 cas, la 3e carte prend toute la ligne. */
@media (min-width: 640px) and (max-width: 1023.98px) {
    .inar-use-cases-grid.inar-use-cases--count-3 > :last-child:nth-child(3),
    .inar-use-cases-grid:not([class*="inar-use-cases--count-"]):has(> :last-child:nth-child(3)):has(> :first-child:nth-last-child(3)) > :last-child {
        grid-column: 1 / -1;
    }
}

/* Repli sans la classe PHP (cache) : 3 enfants exacts => 3 colonnes desktop. */
@media (min-width: 1024px) {
    .inar-use-cases-grid:not([class*="inar-use-cases--count-"]):has(> :first-child:nth-last-child(3)):has(> :last-child:nth-child(3)) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .inar-use-cases-grid:not([class*="inar-use-cases--count-"]):has(> :first-child:nth-last-child(2)):has(> :last-child:nth-child(2)) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .inar-use-cases-grid:not([class*="inar-use-cases--count-"]):has(> :first-child:nth-last-child(1)):has(> :last-child:nth-child(1)) {
        grid-template-columns: minmax(0, 1fr);
    }
}

.inar-grid-specs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .inar-grid-2 {
        grid-template-columns: 1fr 1fr;
    }
    /* Hero fiche produit (Image 1, 15/09/2026) : texte 40% / image 60%. */
    body.single-inar_product .inar-section:first-of-type .inar-grid-2 {
        grid-template-columns: 2fr 3fr;
    }
    body.single-inar_product .inar-section:first-of-type .inar-grid-2 > * {
        min-width: 0;
    }
    .inar-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    .inar-grid-specs {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- TYPOGRAPHIE & ELEMENTS --- */
.inar-badge {
    display: inline-block;
    background-color: #e0e7ff;
    color: #4338ca;
    padding: 0.35rem 0.85rem;
    border-radius: 50rem;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.inar-title-primary span {
    color: #2563eb;
}

.inar-text-center {
    text-align: center;
}

.inar-mb-5 {
    margin-bottom: 3rem;
}

/* --- BOUTONS --- */
.inar-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.inar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

.inar-btn-primary {
    background-color: #2563eb;
    color: #ffffff !important;
}

.inar-btn-primary:hover {
    background-color: #1d4ed8;
}

.inar-btn-secondary {
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    color: #475569 !important;
}

.inar-btn-secondary:hover {
    background-color: #f1f5f9;
}

.inar-btn-light {
    background-color: #ffffff;
    color: #2563eb !important;
}

.inar-btn-outline-light {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: #ffffff !important;
}

/* --- CARTES ET ICONES --- */
.inar-card {
    background-color: #ffffff;
    padding: 1.75rem;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    height: 100%;
    box-sizing: border-box;
}

.inar-icon-box {
    font-size: 2.5rem;
    color: #2563eb;
    margin-bottom: 1rem;
}

/* --- ICONE CAS D'USAGE SANS FOND NI BORDURE (08/10/2026) ---
   Picto bleu charte #4f46e5, taille agrandie.
   Les visuels versés en noir sont teintés en bleu via filtre CSS
   (aucune retouche des médias en BO requise). */
.inar-use-case-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
    border: 1px solid #e2e8f0;
}

.inar-use-case-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -12px rgba(15, 23, 42, 0.18);
    border-color: #c7d2fe;
}

.inar-use-case-ico {
    margin: 0 auto 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    border-radius: 0;
    color: #4f46e5;
    transition: transform 0.2s ease-in-out;
}

.inar-use-case-card:hover .inar-use-case-ico {
    transform: scale(1.06);
}

.inar-use-case-ico img {
    width: 2.75rem;
    height: 2.75rem;
    object-fit: contain;
    display: block;
    border: 0;
    border-radius: 0;
    background: none;
    /* Noir -> bleu charte (#4f46e5). Les icônes déjà bleues restent bleues. */
    filter: brightness(0) saturate(100%) invert(27%) sepia(89%) saturate(2871%) hue-rotate(230deg) brightness(95%) contrast(92%);
}

@media (prefers-reduced-motion: reduce) {
    .inar-use-case-card,
    .inar-use-case-card:hover,
    .inar-use-case-ico,
    .inar-use-case-card:hover .inar-use-case-ico {
        transform: none;
        transition: none;
    }
}

.inar-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 1rem;
}

/* --- TABLEAU COMPARATIF --- */
.inar-table-wrapper {
    width: 100%;
    overflow-x: auto;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.inar-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #ffffff;
    min-width: 600px;
}

.inar-table th, .inar-table td {
    padding: 1rem 1.25rem;
    border: 1px solid #f1f5f9;
    text-align: center;
}

.inar-table th:first-child, .inar-table td:first-child {
    text-align: left;
}

.inar-table th.inar-th-pro {
    background-image: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
    color: #ffffff;
}

/* Icônes Oui/Non du comparatif (SVG inline, maquette 15/09/2026) */
.inar-table td .inar-check {
    vertical-align: middle;
}
.inar-sr {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --- BANNIERE CTA FINAL --- */
.inar-cta-box {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #312e81 100%);
    position: relative; overflow: hidden;
    color: #ffffff;
    border-radius: 1.5rem;
    padding: 3rem 1.5rem;
    text-align: center;
    box-shadow: 0 20px 45px -12px rgba(49, 46, 129, 0.5);
    border: 1px solid rgba(255,255,255,0.08);
}
.inar-cta-box::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(500px 220px at 12% 0%, rgba(59, 130, 246, 0.25), transparent 70%),
        radial-gradient(420px 200px at 88% 100%, rgba(129, 140, 248, 0.20), transparent 70%);
}
/* CTA final : groupe de boutons resserré et centré (15/09/2026) */
.inar-cta-box .inar-btn-group {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}
.inar-cta-box .inar-btn-group .inar-btn {
    flex: 1 1 0;
    min-width: 0;
}
@media (max-width: 575px) {
    .inar-cta-box .inar-btn-group .inar-btn {
        flex: 1 1 100%;
    }
}
/* Sticky buy : visibilité pilotée par produit (champ ACF « Barre fixe »).
   Masquée uniquement quand elle n'est plus collée (voir .is-parked). */
/* Sticky buy : masquée quand elle n'est plus collée (15/09/2026).
   La barre est collée (sticky bottom) pendant le scroll ; en bas de page elle
   reprend sa place naturelle : on la masque alors (sentinel visible).
   visibility (espace conservé) = pas de boucle d'oscillation au toggle. */
.inar-stickybuy {
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.inar-stickybuy.is-parked {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.inar-stickybuy-sentinel {
    height: 1px;
    overflow: hidden;
}
/* Variante « Petit rectangle » : coque fixe pleine largeur + .inar-container
   => la carte s'aligne EXACTEMENT sur la fiche (mêmes marges que le contenu),
   sans calcul 100vw (insensible à la barre de défilement). Position desktop
   via modificateur sur la coque (défaut : droite). Mobile = pleine largeur. */
.inar-stickybuy-pos {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 1.25rem;
    z-index: 40;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.inar-stickybuy-pos-inner {
    display: flex;
    pointer-events: none;
}
.inar-stickybuy-pos--right .inar-stickybuy-pos-inner {
    justify-content: flex-end;
}
.inar-stickybuy-pos--left .inar-stickybuy-pos-inner {
    justify-content: flex-start;
}
.inar-stickybuy-pos--center .inar-stickybuy-pos-inner {
    justify-content: center;
}
.inar-stickybuy-pos.is-parked {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.inar-stickybuy-pos .inar-stickybuy--rect {
    position: static;
    pointer-events: auto;
    width: auto;
    max-width: min(360px, 100%);
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.6rem;
    border: 1px solid #E2E8F0;
    border-radius: 1rem;
    padding: 0.6rem 0.75rem;
    box-shadow: 0 16px 30px -8px rgba(15,23,42,0.18);
    transform: none;
}
.inar-stickybuy--rect .inar-stickybuy-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    margin: 0;
    line-height: 1.25;
    align-self: center;
}
.inar-stickybuy--rect .inar-btn {
    margin: 0;
    flex-shrink: 0;
    align-self: center;
    line-height: 1.25;
    padding: 0.55rem 1.1rem;
}
@media (max-width: 575px) {
    /* Mobile : les 2 styles = pleine largeur collée en bas, sans espace dessous. */
    .inar-stickybuy-pos {
        bottom: 0;
    }
    .inar-stickybuy-pos .inar-stickybuy-pos-inner {
        display: block;
        padding-left: 0;
        padding-right: 0;
    }
    .inar-stickybuy-pos .inar-stickybuy--rect {
        position: static;
        width: 100%;
        max-width: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
        padding: 0.7rem 0.9rem calc(0.7rem + env(safe-area-inset-bottom));
        box-shadow: 0 -8px 24px -12px rgba(15,23,42,0.25);
    }
    body.single-inar_product .inar-stickybuy:not(.inar-stickybuy--rect) {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        max-width: none;
        border-radius: 0;
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
    }
}
@media (prefers-reduced-motion: reduce) {
    .inar-stickybuy,
    .inar-stickybuy-pos {
        transition: none;
    }
}
/* Sticky buy + retour en haut (15/09/2026, corrigé 24/09/2026) : la barre fixe
   reste (conversion), le bouton remonte au-dessus pour ne plus se superposer.
   Correctif : l'ancien sélecteur posait bottom sur .hfe-scroll-to-top-wrap qui
   est une div statique (bottom sans effet) ; on cible le bouton fixed, piloté
   par main.css (ancrage viewport + safe-area). */
body.single-inar_product .inar-to-top.visible {
    bottom: 5.5rem;
}
body.single-inar_product .hfe-scroll-to-top-wrap .hfe-scroll-to-top-button {
    bottom: 5.5rem !important;
    bottom: max(5.5rem, env(safe-area-inset-bottom)) !important;
}
/* Témoignages : étoiles + bordure douce */
.inar-card { border-radius: 1.1rem; }
.inar-card:hover { border-color: #c7d2fe; }
/* Hero fiche : image avec cadre glass */
.inar-grid-2 img { border-radius: 1.1rem; }

/* --- VIDEO HERO inline, controles natifs (1.3.5) --- */
.inar-hero-video { margin: 0; }
.inar-video-inline {
    position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;
    border-radius: 1.1rem; border: 1px solid #e2e8f0; background: #000;
    box-shadow: 0 10px 25px rgba(0,0,0,0.10);
}
.inar-video-inline iframe, .inar-video-inline video {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
}
.inar-video-label {
    position: absolute; right: 0.75rem; bottom: 0.75rem;
    background: rgba(15,23,42,0.8); color: #fff; font-size: 0.8rem; font-weight: 600;
    padding: 0.35rem 0.75rem; border-radius: 999px; pointer-events: none;
}
/* Shortcode hero : carte neutre qui laisse le shortcode respirer */
.inar-hero-shortcode {
    border-radius: 1.1rem; border: 1px solid #e2e8f0; background: #fff;
    box-shadow: 0 10px 25px rgba(0,0,0,0.10); overflow: hidden;
}
/* Hero fiche : cadre image (ex-style inline, piloté par le toggle Bordure) */
.inar-hero-media-frame {
    border-radius: 1rem; overflow: hidden; box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
/* Hero fiche : bordure masquée (toggle global image + vidéo + shortcode).
   Le média s'affiche à nu, sans cadre ni ombre. */
.inar-hero-media-frame.is-bare {
    border-radius: 0; overflow: visible; box-shadow: none;
}
.inar-hero-media-frame.is-bare img {
    border-radius: 0;
}
.inar-video-inline.is-bare,
.inar-hero-shortcode.is-bare {
    border: 0; border-radius: 0; box-shadow: none; background: transparent;
    /* Sans bordure, le thème s'efface complètement : overflow visible pour
       ne jamais découper la bordure / l'ombre propres du shortcode. */
    overflow: visible;
}

/* --- TYPOGRAPHIE FLUIDE fiche produit (22/09/2026) ---
   Les tailles fixes en inline (h1 2.5rem, h2 2rem — voir
   single-inar_product.php) écrasaient tout responsive : tailles
   rapatriées en classes clamp() — pleines à desktop, réduites à mobile.
   Rendu : 390px => h1 ~1.78rem / h2 ~1.61rem ; >=768px => 2.5 / 2rem. */
.inar-title-primary {
    font-size: clamp(1.65rem, 1.05rem + 3vw, 2.5rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-wrap: balance;
}
.inar-section-title {
    font-size: clamp(1.35rem, 1rem + 2.5vw, 2rem);
    line-height: 1.25;
    letter-spacing: -0.02em;
    text-wrap: balance;
}
.inar-hero-desc {
    font-size: clamp(1rem, 0.95rem + 1vw, 1.125rem);
    line-height: 1.6;
}
body.single-inar_product .inar-card h3 {
    font-size: clamp(1.05rem, 0.95rem + 1vw, 1.25rem);
    line-height: 1.35;
}

/* --- COMPACTAGE MOBILE fiche produit (22/09/2026) --- */
@media (max-width: 575px) {
    .inar-grid-2 {
        gap: 1.75rem;
    }
    .inar-mb-5 {
        margin-bottom: 2rem;
    }
    .inar-card {
        padding: 1.25rem;
    }
    .inar-cta-box {
        padding: 2rem 1.25rem;
        border-radius: 1.1rem;
    }
    /* Boutons hero pleine largeur : cibles tactiles + pas de débordement. */
    body.single-inar_product .inar-section:first-of-type .inar-btn-group .inar-btn {
        flex: 1 1 100%;
    }
}

/* --- ANIMATIONS (au scroll) --- */
.inar-anim-enabled .inar-section {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.inar-section.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* --- CASCADE fiche produit : fade in up 0/60/90/180/230 par bloc ---
   La section reste visible ; ce sont ses blocs (.inar-cascade > *,
   .inar-cascade-item) qui apparaissent en cascade (délais posés en JS). */
html.inar-anim-enabled body.single-inar_product .inar-section {
    opacity: 1;
    transform: none;
    transition: none;
}
html.inar-anim-enabled body.single-inar_product .inar-cascade > *,
html.inar-anim-enabled body.single-inar_product .inar-cascade-item {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
html.inar-anim-enabled body.single-inar_product .inar-cascade > *.in-view,
html.inar-anim-enabled body.single-inar_product .inar-cascade-item.in-view {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .inar-anim-enabled .inar-section {
        opacity: 1;
        transform: none;
        transition: none;
    }
    html.inar-anim-enabled body.single-inar_product .inar-cascade > *,
    html.inar-anim-enabled body.single-inar_product .inar-cascade-item {
        opacity: 1;
        transform: none;
        transition: none;
    }
}