#home-hero {
    height: 100svh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

#home-hero-navbar {
    height: 75px;

    background: rgba(200, 200, 200, 0.1);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;

    margin: 12px 16px;
}

#home-hero-body {
    padding-bottom: 42svh;
}

@media (max-width: 768px) {
    #home-hero-body {
        padding-bottom: 24svh;
    }
}

#content-nav {
    height: 75px;
}

/* Sur le home, pas de shadow par défaut */
body.home #sticky-navbar {
    position: relative;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(208, 208, 208, 0.5);
}

/* Fixée + shadow au scroll */
body.home #sticky-navbar.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15) !important;
    border-bottom: none;
}

#home-hero-body h1 {
    width: 75%;
}

#home-hero-body p {
    width: 60%;
}

#home-hero-illustration {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 45%;
}

#home-hero-illustration img {
    height: 100%;
    width: auto;
    display: block;
}

#hero-more-button {
    color: white;
    background-color: rgba(168, 168, 168, 0.2);
    border: 1px solid white;
    border-radius: 25px;
    padding: 6px 28px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: all 0.4s ease;
}

#hero-more-button:hover {
    color: white;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
    background-color: rgba(120, 120, 120, 0.2);
}

@media (max-width: 768px) {
    #home-hero-illustration {
        right: 30%;
        transform: translateX(30%);
        height: 40%;
    }

    .mobile-white-button.active {
        color: var(--isatis-warning);
        background: rgba(255,255,255,0.9) !important;
        box-shadow: 0 0.5rem 2rem rgba(0,0,0,0.2);
        border-color: white !important;
    }
}

@media (max-width: 576px) {
    #home-hero-navbar {
        margin: 12px 8px;
    }

    #home-hero-body h1,
    #home-hero-body p {
        width: 100%;
    }
}


/* =========================
    Bande de logos
========================= */

.logos-track-wrapper {
    overflow-x: hidden;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.logos-track {
    display: flex;
    width: max-content;
    will-change: transform;
    backface-visibility: hidden;
}


/* =========================
    Logo + carte entreprise
========================= */

.logo-item {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 3rem;
    cursor: pointer;
}

.logo-item img {
    display: block;
    filter: grayscale(100%) opacity(60%);
    transition: filter 0.3s ease;
}

.logo-item:hover img {
    filter: grayscale(0%) opacity(100%);
}


/* =========================
    Carte au hover
========================= */

.logo-card {
    position: fixed; /* ← plus de contribution à la hauteur du body */
    transform: translateX(-50%) translateY(-4px);
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px 16px;
    width: 220px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
    z-index: 2000;
}

.logo-card::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: #e5e7eb;
}

.logo-item:hover .logo-card {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.logo-card-title {
    font-size: 13px;
    color: var(--isatis-warning);
    font-weight: 600;
    margin: 0 0 4px;
}

.logo-card-desc {
    font-size: 12px;
    color: var(--isatis-muted);
    margin: 0;
    line-height: 1.5;
}


/* =========================
   CONTAINER GLOBAL
========================= */

#universes h2 {
    margin-bottom: -18px;
}

@media (max-width: 768px) {
    #universes h2 {
        margin-bottom: 0;
    }
}

#universes {
    position: relative;
    overflow: hidden;
}

#universes::before,
#universes::after {
    content: "";
    position: absolute;

    width: 100%;
    aspect-ratio: 1 / 1;

    background-image: url("../medias/images/home/universes/background-fS7_n_t.png");
    background-repeat: no-repeat;
    background-size: contain;

    opacity: .1;
    pointer-events: none;

    z-index: -1;
}

#universes::before {
    top: 0;
    left: 0;

    background-position: top left;
}

#universes::after {
    right: 0;
    bottom: 0;

    background-position: bottom right;
    transform: rotate(180deg);
}

#universes-container {
    position: relative;
    width: min(100vw, 100vh);
    aspect-ratio: 1 / 1;
    margin: auto;
    display: block;
}

/* étoile centrée */
#universes-star {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 24%;
    height: auto;

    z-index: 50;

    /* blanc */
    filter: brightness(0) invert(1);
}

#universes-star-2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 9%;
    height: auto;

    z-index: 55;

    filter: drop-shadow(0 0 8px rgba(var(--isatis-warning-rgb), 0.7));
}


/* =========================
   UNIVERS POSITIONNEMENT
========================= */

#universes-container > div {
    position: absolute;
    width: 45%;
    height: 45%;

    pointer-events: none;
    transition: transform 0.35s ease, opacity 0.35s ease, filter 0.35s ease;
    will-change: transform, opacity, filter;
}

/* Croix centrée */
#universe-1 {
    top: 4.5%;
    left: 50%;
    transform: translateX(-50%);
}

#universe-2 {
    right: 4.5%;
    top: 50%;
    transform: translateY(-50%);
}

#universe-3 {
    bottom: 4.5%;
    left: 50%;
    transform: translateX(-50%);
}

#universe-4 {
    left: 4.5%;
    top: 50%;
    transform: translateY(-50%);
}


/* =========================
   ROTATIONS DES PÉTALES
========================= */

#universe-2 .shape {
    transform: rotate(90deg);
}

#universe-3 .shape {
    transform: rotate(180deg);
}

#universe-4 .shape {
    transform: rotate(-90deg);
}


/* =========================
   SVG SETUP
========================= */

.shape {
    width: 100%;
    height: 100%;

    display: block;
    pointer-events: auto;
}

.shape path {
    pointer-events: visiblePainted;
}

/* IMPORTANT : évite le rendu visible du square */
path[id^="square"] {
    visibility: hidden;
    pointer-events: none;
}

/* sécurité SVG */
svg {
    overflow: visible;
}

/* centre transform pour morph propre */
path {
    transform-origin: center;
}


/* =========================
   HOVER EFFECTS (layout only)
   -> ne pas toucher aux paths ici
========================= */

#universes-container > div:hover {
    z-index: 100;
    filter: drop-shadow(0 0 8px var(--isatis-dark));
    cursor: pointer;
}

/* effet visuel de déplacement + scale */
#universe-1:hover {
    transform: translateX(-50%) scale(1.05) translateY(-4px);
}

#universe-2:hover {
    transform: translateY(-50%) scale(1.05) translateX(6px);
}

#universe-3:hover {
    transform: translateX(-50%) scale(1.05) translateY(7px);
}

#universe-4:hover {
    transform: translateY(-50%) scale(1.05) translateX(-6px);
}

/* aucun effet par défaut */
#universes-container > div {
    opacity: 1;
    transition: transform 0.35s ease, opacity 0.35s ease, filter 0.35s ease;
}

/* quand un univers est hover → on dim les autres */
#universes-container:has(#universe-1:hover) > div:not(#universe-1),
#universes-container:has(#universe-2:hover) > div:not(#universe-2),
#universes-container:has(#universe-3:hover) > div:not(#universe-3),
#universes-container:has(#universe-4:hover) > div:not(#universe-4) {
    opacity: 0.7;
}

#universes-container image {
    transition: filter 0.35s ease;
}


/* =========================
   TEXTS
========================= */

#universe-2 .universe-inner { transform: rotate(-90deg); }
#universe-3 .universe-inner { transform: rotate(-180deg); }
#universe-4 .universe-inner { transform: rotate(90deg); }

.universe-content {
    overflow: hidden;
}

.universe-inner {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    text-align: center;
    overflow: hidden;
}

.universe-title {
    display: block;
    font-weight: 600;
    font-size: 10px;
    line-height: 1.2;
    transform: translateY(0);
    transition: transform 0.4s ease;
}

.universe-desc {
    position: absolute;
    top: 50%;
    font-size: 6px;
    line-height: 1.2;
    opacity: 0;
    margin: 0 10px;
    transform: translateY(8px);
    transition: opacity 0.35s ease 0.1s, transform 0.35s ease 0.1s;
}

/* État hover — piloté par JS sur le div parent */
.universe-inner.is-hovered .universe-title {
    transform: translateY(-28px);
}

.universe-inner.is-hovered .universe-desc {
    opacity: 1;
    transform: translateY(0);
}

/* En dehors du media query : le hr vertical est masqué */
#customers-universes-divider {
    display: none;
}

#univers-sep {
    width: 100%;
    opacity: 100% !important;
    border-top: 1px solid rgba(208, 208, 208, 0.5);
    margin: 0;
}

#universes {
    border-top: 1px solid rgba(208, 208, 208, 0.5);
}

#customers {
    border-top: 1px solid rgba(208, 208, 208, 0.5);
    padding-bottom: 1rem;
}

#customers-col > #customers > h3 {
    padding: 1rem;
    margin: 5px 0.5rem 1rem;
}

/* Layout côte-à-côte : customers | trèfle */
@media (min-aspect-ratio: 3/2) and (min-width: 900px) {
    #customers-universes-wrapper {
        position: relative;
        display: flex;
        flex-direction: row;
        min-height: 100svh;
        overflow: hidden; /* sécurité anti-débordement */

        max-width: calc(100svh * 2 / 1);
        margin-inline: auto;

        border-inline: 1px solid rgba(208, 208, 208, 0.5);
    }

    #customers-col {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-width: 0; /* permet au flex item de rétrécir sous son contenu */
        max-width: calc(100vw - 100svh);
        border-right: 1px solid rgba(208, 208, 208, 0.5);
    }

    #customers-col > h2 {
        padding: 1rem 2.5rem;
        margin: 2.5rem 1rem;
    }

    #universes {
        flex: 0 0 100svh;
        width: 100svh;
        display: flex;
        align-items: center;
        justify-content: center;
        border-top: none;
    }

    #universes-container {
        width: 100svh;
        height: 100svh;
        /* écrase le min(100vw, 100vh) par défaut */
    }
}


/* =========================
    Par où commencer
========================= */

.getting-started-track {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    position: relative;
}

.getting-started-track::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(208, 208, 208, 0.6) 5%, rgba(208, 208, 208, 0.6) 95%, transparent);
}

.getting-started-step {
    display: flex;
    width: 100%;
}

.step-left  { justify-content: flex-start; }
.step-right { justify-content: flex-end; }

.getting-started-card {
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-left: 4px solid var(--isatis-warning);
    border-radius: 12px;
    padding: 1.75rem 2rem;
    position: relative;
    transition: box-shadow 0.2s ease;
}

.getting-started-card:hover {
    box-shadow: 0 4px 24px rgba(8, 14, 44, 0.08);
}

/* --- Flèches entre les étapes + effets de lumière au survol ---

   Deux effets distincts, gérés par deux couches superposées :

   1. SPOTLIGHT (.getting-started-arrow-light) — un rond orange suit la
      souris en permanence dès qu'elle entre dans une zone hover ÉLARGIE
      (étendue via le pseudo ::before). Masqué par la silhouette du PNG,
      donc l'orange n'est visible que sur la flèche. Quand la souris est
      à côté mais pas dessus, on voit le bord du gradient effleurer la
      silhouette.

   2. GLOW global (.getting-started-arrow-glow) — la flèche entière se
      teinte en orange lentement (transition 0.7s) quand le JS détecte
      que la souris est PILE sur un pixel opaque. Effet "la flèche
      s'allume".

   Le JS pose une classe `.is-on-arrow` sur le wrapper pour piloter le
   glow ; le spotlight est piloté par le :hover CSS natif (qui inclut
   la zone étendue par ::before). */

.getting-started-arrow-wrapper {
    position: relative;
    display: inline-block;
    max-width: 80%;
    line-height: 0;
    /* transform: rotate(...) appliqué en inline-style sur chaque instance */
}

/* Zone hover INVISIBLE étendue : un pseudo-element qui dépasse les
   bords du wrapper, permettant à la souris d'activer l'effet sans
   être pile sur la flèche. La rotation du wrapper s'applique aussi
   à ce pseudo, donc la zone hover suit l'orientation de la flèche.
   Ajuste `inset: -Xpx` pour plus ou moins de marge. */
.getting-started-arrow-wrapper::before {
    content: '';
    position: absolute;
    inset: -45px;
}

.getting-started-arrow {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0.35;
    transition: opacity 0.6s ease-out;
}

/* pointer-events: none sur tous les enfants → le mousemove cible TOUJOURS
   le wrapper, donc e.offsetX/Y est cohérent (relatif au wrapper) peu
   importe quel descendant est physiquement sous la souris. */
.getting-started-arrow,
.getting-started-arrow-light,
.getting-started-arrow-glow {
    pointer-events: none;
}

/* SPOTLIGHT — radial gradient qui suit la souris.
   Le gradient peut être centré HORS de l'overlay (--mx/--my négatifs ou
   au-delà de la taille), c'est OK : la partie du gradient qui intersecte
   l'overlay reste visible, masquée par la silhouette. C'est ce qui
   permet à la souris d'"effleurer" la flèche depuis l'extérieur. */
.getting-started-arrow-light {
    --spotlight-color  : 255, 140, 0;
    --spotlight-radius : 110px;

    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.2s ease-out;

    -webkit-mask: var(--arrow-mask) center/contain no-repeat;
    mask: var(--arrow-mask) center/contain no-repeat;

    background: radial-gradient(
        circle var(--spotlight-radius) at var(--mx, 50%) var(--my, 50%),
        rgba(var(--spotlight-color), 1)   0%,
        rgba(var(--spotlight-color), 0.5) 35%,
        rgba(var(--spotlight-color), 0)   70%
    );
}

/* Spotlight visible dès que la souris est dans la zone hover étendue
   (le :hover sur le wrapper inclut son ::before). */
.getting-started-arrow-wrapper:hover .getting-started-arrow-light {
    opacity: 1;
}

/* GLOW global — la flèche entière passe en orange.
   Activé par la classe .is-on-arrow posée par le JS quand le hit-test
   alpha confirme un pixel opaque sous la souris. Transition longue
   pour un effet en fondu progressif. */
.getting-started-arrow-glow {
    --glow-color : 255, 140, 0;

    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.7s ease-out;

    -webkit-mask: var(--arrow-mask) center/contain no-repeat;
    mask: var(--arrow-mask) center/contain no-repeat;

    background: rgb(var(--glow-color));
}

.getting-started-arrow-wrapper.is-on-arrow .getting-started-arrow-glow {
    opacity: 1;
}

/* Quand on est sur la silhouette, l'img passe doucement à pleine
   opacité — ça renforce l'effet "la flèche s'allume". Sans ça,
   le gris à 0.35 transparaissait à travers le glow. */
.getting-started-arrow-wrapper.is-on-arrow .getting-started-arrow {
    opacity: 1;
}

/* --- Contenu des cartes --- */

.step-number {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--isatis-warning);
    text-transform: uppercase;
    margin-bottom: .5rem;
}

.step-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--isatis-primary);
    margin: 0 0 .75rem;
}

.step-problem {
    font-size: .9rem;
    font-weight: 600;
    color: var(--isatis-primary);
    margin: 0 0 .5rem;
}

.step-apport {
    font-size: .875rem;
    color: #4b5563;
    line-height: 1.6;
    margin: 0 0 .75rem;
}

.step-meta {
    font-size: .78rem;
    color: #9ca3af;
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0 0 1rem;
}

.step-cta {
    display: inline-block;
    font-size: .85rem;
    font-weight: 600;
    color: var(--isatis-primary);
    text-decoration: none;
    border: 2px solid var(--isatis-primary);
    border-radius: 25px;
    padding: 7px 20px;
    transition: background .2s, color .2s;
}

.step-cta:hover {
    background: var(--isatis-primary);
    color: #fff;
}

@media (max-width: 768px) {
    .step-left,
    .step-right { justify-content: center; }
    .getting-started-card { width: 100%; }
}


/* =========================
    Articles
========================= */

.article-image-wrapper {
    overflow: hidden;
}

.article-image {
    transition:
        transform .45s cubic-bezier(.2,.65,.3,1),
        filter .3s ease;
}

article:hover .article-image {
    transform: scale(1.04);
}


/* =========================
    Learn more buttons
========================= */

.btn-learn-more__arrow {
    display: inline-grid;
}

.btn-learn-more__arrow > * {
    grid-area: 1 / 1;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.btn-learn-more__hover {
    opacity: 0;
    transform: translateX(-4px);
}

.btn-learn-more:hover .btn-learn-more__default {
    opacity: 0;
    transform: translateX(4px);
}

.btn-learn-more:hover .btn-learn-more__hover {
    opacity: 1;
    transform: translateX(3px);
}


/* =========================
    @todo - transformer un max de css en bootstrap
========================= */

.section-img-left__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 768px) {
    .section-img-left__media {
        position: absolute;
        top: 0; left: 0; bottom: 0;
        width: 33%;
        min-height: unset;
    }
    .section-img-left__content {
        margin-left: 33%;
    }
}

@media (min-width: 992px) {
    .section-img-left__media { width: 50%; }
    .section-img-left__content { margin-left: 50%; }
}

.cta-section {
    border-radius: 1.5rem;
}

@media (max-width: 576px) {
    .cta-section {
        border-radius: 0;
    }
}


/* =========================
    NC Manager
========================= */

.mb-5r {
    margin-bottom: 5rem;
}

.nc-manager-floating-card {
    position: absolute;
    bottom: -0.5rem;
    right: -1rem;
    padding: .9rem 1.2rem;
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.nc-manager-card {
    transition: box-shadow 0.2s ease;
}

.nc-manager-card:hover {
    box-shadow: 0 4px 24px rgba(8, 14, 44, 0.08) !important;
}

@media (max-width: 768px) {
    .before-after-arrow {
        transform: rotate(90deg);
    }
}