/*
 * cyberphiles.com — CSS custom.
 * Version nettoyée de l'ancien custom.css (les styles e-commerce/wishlist
 * hérités du template ont été supprimés) + helpers pour les effets vanilla
 * qui remplacent les plugins jQuery du thème Porto.
 */

/* ------------------------------------------------------------------ */
/* Animations d'entrée : toujours actives                              */
/* ------------------------------------------------------------------ */
/* animate.compat.css force les animations .animated à 1 ms quand l'OS
   demande moins de mouvement (prefers-reduced-motion) : les titres et
   textes apparaissaient d'un coup. On restaure la durée normale — ce
   fichier est chargé en dernier, il gagne la cascade. */
@media (prefers-reduced-motion: reduce) {
    .animated {
        -webkit-animation-duration: var(--animate-duration, 1s) !important;
        animation-duration: var(--animate-duration, 1s) !important;
    }
}

/* ------------------------------------------------------------------ */
/* Navigation fluide                                                   */
/* ------------------------------------------------------------------ */
html {
    scroll-behavior: smooth;
}

#main,
.offset-anchor {
    scroll-margin-top: 90px;
}

/* ------------------------------------------------------------------ */
/* Footer ribbon                                                       */
/* ------------------------------------------------------------------ */
.footer-ribbon {
    background: #006da6;
    position: absolute;
    left: 6%;
    top: -15px;
    margin: 0;
    padding: 10px 20px 6px 20px;
}

.footer-ribbon:before {
    border-right: 10px solid #646464;
    border-top: 16px solid transparent;
    content: "";
    display: block;
    height: 0;
    right: 100%;
    position: absolute;
    top: 0;
    width: 7px;
}

#footer .footer-ribbon span {
    color: #FFF;
    font-family: "Shadows Into Light", cursive;
}

/* ------------------------------------------------------------------ */
/* Navbar                                                              */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* Header sticky : effet shrink (ex theme.js stickyEffect: 'shrink')   */
/* ------------------------------------------------------------------ */
#header .header-container {
    height: 100px;
    transition: height 300ms ease;
}

html.sticky-header-active #header .header-container {
    height: 70px;
    min-height: 0;
}

/* ------------------------------------------------------------------ */
/* Menu mobile                                                         */
/* ------------------------------------------------------------------ */
@media (max-width: 991px) {
    /* Le panneau du menu est positionné en absolu sous le header ;
       la règle `html #header.header-transparent .header-body { overflow:
       hidden }` du thème le rognait entièrement (menu invisible). */
    #header .header-body,
    html #header.header-transparent .header-body {
        overflow: visible;
    }

    /* Liens du panneau : le thème les met en #CCC (illisible sur blanc) */
    #header .header-nav-main nav > ul > li > a {
        color: #444;
    }
}

/* ------------------------------------------------------------------ */
/* Cartes R&D (home + à propos) : pleine largeur sur petit écran      */
/* (en col-6, « Automatisation » etc. cassaient au milieu des mots)   */
/* ------------------------------------------------------------------ */
@media (max-width: 575.98px) {
    .row-gutter-sm > .col-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .row-gutter-sm > .col-6:not(:last-child) .card {
        margin-bottom: 1rem;
    }
}

/* ------------------------------------------------------------------ */
/* Hero particles                                                      */
/* ------------------------------------------------------------------ */
.particles-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
}

#particles-4,
#particles-4 canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* ------------------------------------------------------------------ */
/* Carrousel clients (home) : seul le logo centré est net              */
/* ------------------------------------------------------------------ */
#partners-clients .owl-carousel.carousel-center-active-item .owl-item {
    opacity: 0.075;
}

#partners-clients .owl-carousel.carousel-center-active-item .owl-item.current {
    opacity: 1 !important;
}

/* ------------------------------------------------------------------ */
/* Word rotator : transition de largeur (ex jQuery animate)            */
/* ------------------------------------------------------------------ */
.word-rotator .word-rotator-words {
    transition: width 300ms ease;
}

/* ------------------------------------------------------------------ */
/* Blocs « En savoir plus » repliables                                 */
/* ------------------------------------------------------------------ */
.cp-readmore {
    transition: height 300ms ease;
}

/* ------------------------------------------------------------------ */
/* Carrousel en fondu (page À propos)                                  */
/* ------------------------------------------------------------------ */
[data-carousel-fade] {
    position: relative;
}

[data-carousel-fade] > * {
    opacity: 0;
    transition: opacity 800ms ease;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

[data-carousel-fade] > .cp-fade-visible {
    opacity: 1;
    position: relative;
}

/* Sans JS, le carrousel owl est masqué par le CSS vendor ;            */
/* pour le fondu maison on montre au moins la première image.          */