@charset "UTF-8";

/* --- FAQ accordions --- */



.faq-btn {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.02),
    rgba(255, 255, 255, 0.12)
  );
  border-radius: 14px !important;
  margin-bottom: 14px;
  padding: 20px 24px;
  color: #fff;
  border: 1px solid rgba(232, 245, 106, 0.18);
  transition: all 0.3s ease;
  position: relative;
}

/* enlever le fond bleu bootstrap */
.faq-btn:not(.collapsed) {
  background: linear-gradient(
    135deg,
    rgba(232, 245, 106, 0.18),
    rgba(232, 245, 106, 0.06)
  );
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(232, 245, 106, 0.35),
    0 0 28px rgba(232, 245, 106, 0.22);
}


/* hover léger */
.faq-btn:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.09),
    rgba(255, 255, 255, 0.04)
  );
  box-shadow:
    0 0 20px rgba(232, 245, 106, 0.2);
}


/* icône chevron */
.accordion-button::after {
  filter: brightness(1.4);
}

/* contenu */
.accordion-body {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 0 0px;
  padding: 18px 24px;
  margin-top: 0px;
}



/* =====================================================
   PC MOCKUP – STRUCTURE
===================================================== */

.pc-wrapper {
    position: relative;
    display: inline-block;
    overflow: visible;
}

/* =====================================================
   GLOW DIFFUS (HALO LUMINEUX SANS BORDS)
===================================================== */

.pc-wrapper::before {
    content: "";
    position: absolute;
    inset: -30%;
    z-index: 0;

    background: radial-gradient(
        circle,
        rgba(232,245,106,0.18) 0%,
        rgba(232,245,106,0.12) 25%,
        rgba(232,245,106,0.05) 45%,
        rgba(232,245,106,0.00) 70%
    );

    filter: blur(80px);
    opacity: 0.8;

    animation: glowDiffuse 7s ease-in-out infinite;
    pointer-events: none;
}

/* =====================================================
   IMAGE PC – APPARITION
===================================================== */

.pc-mockup {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 720px;
    border-radius: 15px;

    opacity: 0;
    transform: translateY(40px) scale(0.96);
    animation: pcIntro 1.2s ease-out forwards;
}

/* Apparition douce */
@keyframes pcIntro {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* =====================================================
   ANIMATION GLOW (RESPIRATION)
===================================================== */

@keyframes glowDiffuse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.65;
    }
    50% {
        transform: scale(1.08);
        opacity: 1;
    }
}

/* =====================================================
   SHINE (REFLET DISCRET)
===================================================== */

.pc-shine {
    position: absolute;
    inset: 0;
    z-index: 1;

    border-radius: 15px;

    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.14),
        transparent
    );

    transform: translateX(-120%) skewX(-20deg);
    animation: shine 5s ease-in-out infinite;
    filter: blur(6px);

    pointer-events: none;
}

@keyframes shine {
    0% {
        transform: translateX(-120%) skewX(-20deg);
        opacity: 0;
    }
    30% {
        opacity: 0.35;
    }
    50% {
        transform: translateX(120%) skewX(-20deg);
        opacity: 0;
    }
    100% {
        transform: translateX(120%) skewX(-20deg);
        opacity: 0;
    }
}

/* =====================================================
   BLOCS TEXTE (OPTIONNEL – COHÉRENCE VISUELLE)
===================================================== */

.feature-block {
    margin-bottom: 28px;
    padding: 18px 20px;
    border-radius: 12px;

    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(232,245,106,0.12);

    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.8s ease-out forwards;
}

.feature-block:nth-child(1) { animation-delay: 0.2s; }
.feature-block:nth-child(2) { animation-delay: 0.4s; }
.feature-block:nth-child(3) { animation-delay: 0.6s; }

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =====================================================
   AMBIANCE LUMINEUSE SECTION
===================================================== */

.section-dark {
    position: relative;
    overflow: hidden;
}

.section-dark::after {
    content: "";
    position: absolute;
    inset: -50%;

    background: radial-gradient(
        circle at 30% 30%,
        rgba(232,245,106,0.04),
        transparent 60%
    );

    pointer-events: none;
}



/* =====================================================
   SECTION CHIFFRES – STYLE & LISIBILITÉ
===================================================== */

.section-chiffre {
    padding: 120px 0 80px;
    position: relative;
}

.section-chiffre h3 {
    font-size: 48px;
    font-weight: 900;
    margin-bottom: 10px;
}

.section-chiffre p {
    font-size: 15px;
    line-height: 1.4;
    opacity: 0.9;
}

.headline-main {
    color: #fff;
    font-size: 36px;
    font-weight: 900;
    line-height: 1.2;
}

/* =====================================================
   COMPTEURS – TYPO & STABILITÉ
===================================================== */

.counter,
.counter-range {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    letter-spacing: -1px;
}

/* micro punch visuel à la fin */
.counter.done,
.counter-range.done {
    animation: punch 0.35s ease-out;
}

@keyframes punch {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.06); }
    100% { transform: scale(1); }
}

/* =====================================================
   NOTE BAS DE SECTION
===================================================== */

.chiffre-note {
    margin-top: 100px;
    margin-bottom: -100px;
}

.chiffre-note p {
    font-size: 11px;
    opacity: 0.6;
}



/* =====================================================
   DEVICES – CONTENEUR CENTRÉ
===================================================== */
.solution-layout {
    margin-top: 80px;
}
.solution-devices {
    position: relative;
    width: 100%;
    max-width: 520px;
    height: 280px;

    margin-left: -40px; /* ⬅️ décalage à gauche */
}}

/* =====================================================
   GLOW EXTERNE DIFFUS (HALO)
===================================================== */

.solution-devices::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 600px;
    height: 600px;

    background: radial-gradient(
        circle,
        rgba(232,245,106,0.18) 0%,
        rgba(232,245,106,0.10) 30%,
        rgba(232,245,106,0.04) 50%,
        rgba(232,245,106,0.00) 70%
    );

    filter: blur(90px);
    opacity: 0.7;
    pointer-events: none;
    z-index: 0;
}


/* =====================================================
   DEVICES – BASE
===================================================== */

.device {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;

    width: 330px;
    max-width: 45vw;

    transform-origin: center;
    filter: drop-shadow(0 25px 45px rgba(0,0,0,0.45));
    transition: transform 0.6s ease;
}

.device-front {
    transform: translate(-55%, -50%) rotate(-6deg) scale(1.05);
    z-index: 2;
}

.device-back {
    transform: translate(-45%, -50%) translateX(120px) rotate(10deg) scale(0.95);
    opacity: 0.9;
}

/* =====================================================
   POINTS – ESPACEMENT & IMPACT
===================================================== */

.solution-points {
    gap: 24px;
}

.solution-point {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(232,245,106,0.18);
    border-radius: 14px;
    padding: 18px 20px;

    font-size: 15px;
    font-weight: 500;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.solution-point:hover {
    transform: translateY(-6px);
    box-shadow: 0 0 25px rgba(232,245,106,0.25);
}
/* =====================================================
   POSITION INITIALE (PLUS SÉPARÉS MAIS SUPERPOSÉS)
===================================================== */

/* device principal */
.device-front {
    transform: translate(-55%, -50%) rotate(-6deg) scale(1.05);
    z-index: 2;
}

/* device secondaire */
.device-back {
    transform: translate(-45%, -50%) translateX(120px) rotate(10deg) scale(0.95);
    opacity: 0.9;
}

/* =====================================================
   HOVER – MOUVEMENT INDÉPENDANT
===================================================== */

.solution-devices:hover .device-front {
    transform: translate(-58%, -55%) rotate(-2deg) scale(1.08);
}

.solution-devices:hover .device-back {
    transform: translate(-42%, -45%) translateX(145px) rotate(14deg) scale(0.97);
}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 768px) {
    .solution-devices {
        height: 230px;
    }

    .device {
        width: 180px;
    }

    .device-back {
        transform: translate(-45%, -50%) translateX(80px) rotate(8deg) scale(0.92);
    }
}


.iphone-col {
    overflow: visible;
}

.iphone-mockup {
    position: absolute;
    right: 150px;      /* ⬅️ colle au bord */
    bottom: -240px;   /* ⬇️ coupé volontairement */
    
    height: 440px;
    max-height: 80vh;

    filter: drop-shadow(0 30px 60px rgba(0,0,0,0.6));
}
@media (max-width: 991px) {

    .solution-layout {
        text-align: center;
    }

    .solution-devices {
        margin: 0 auto 40px;
    }

    .iphone-mockup {
        position: relative;
        right: 0;
        bottom: 0;
        height: 420px;
        margin-top: 40px;
    }
}

/* =====================================================
   VERSION MOBILE – DEVICES + IPHONE
===================================================== */

.solution-mobile {
    margin-top: 40px;
    overflow: hidden;       /* coupe l'iPhone qui dépasse en bas */
}

/* Caméras mobile : même logique que desktop mais centrées */
.solution-devices-mobile {
    position: relative;
    width: 100%;
    height: 220px;
    margin: 0 auto 0;
}

.solution-devices-mobile .device {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 160px;
    filter: drop-shadow(0 20px 35px rgba(0,0,0,0.5));
}

.solution-devices-mobile .device-front {
    transform: translate(-65%, -50%) rotate(-6deg) scale(1.05);
    z-index: 2;
}

.solution-devices-mobile .device-back {
    transform: translate(-35%, -50%) translateX(60px) rotate(10deg) scale(0.95);
    opacity: 0.9;
}

/* iPhone mobile : centré, bas de section */
.iphone-mobile {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.iphone-mobile img {
    height: 380px;
    filter: drop-shadow(0 30px 60px rgba(0,0,0,0.6));
    /* dépasse légèrement en bas, coupé par overflow:hidden du parent */
    margin-bottom: -80px;
}


/* =====================================================
   SECTION COMPARATIF
===================================================== */

.section-compare {
    padding: 140px 0;
    background: #000;
}

.compare-title {
    text-align: center;
    font-size: 48px;
    font-weight: 900;
    margin-bottom: 80px;
    color: #fff;
}

.compare-title span {
    color: #e8f56a;
}

/* =====================================================
   GRILLE
===================================================== */

.compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: stretch;
}

/* =====================================================
   COLONNE COMMUNE
===================================================== */

.compare-col {
    border-radius: 18px;
    padding: 40px 36px;
    font-size: 16px;
}

.compare-col h3 {
    font-size: 22px;
    margin-bottom: 30px;
}

/* =====================================================
   COLONNE CLASSIQUE (VOLONTAIREMENT FAIBLE)
===================================================== */

.compare-classic {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.6);
}

.compare-classic h3 {
    color: rgba(255,255,255,0.6);
}

.compare-classic li::before {
    content: "✕";
    color: #888;
    margin-right: 10px;
}

/* =====================================================
   COLONNE OKKIO (HÉROS)
===================================================== */

.compare-okkio {
    position: relative;
    background: linear-gradient(
        180deg,
        rgba(232,245,106,0.12),
        rgba(232,245,106,0.03)
    );
    border: 1px solid rgba(232,245,106,0.35);
    color: #fff;
    box-shadow: 0 0 60px rgba(232,245,106,0.25);
}

.compare-okkio h3 {
    color: #e8f56a;
}

.compare-okkio li::before {
    content: "✔";
    color: #e8f56a;
    margin-right: 10px;
}

/* =====================================================
   LISTES
===================================================== */

.compare-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.compare-col li {
    padding: 12px 0;
    display: flex;
    align-items: flex-start;
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 768px) {
    .compare-grid {
        grid-template-columns: 1fr;
    }

    .compare-title {
        font-size: 34px;
    }
}




#service {
    background-image: url('../assets/bg-fleur.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}


.text-secondary
{
color:#FFF !important;

}



.tellink{
color:#e8f56a;
text-decoration:none;

}

.feature {
    transition-delay: var(--delay, 0s);
}

:root{
    --yellow:#e8f56a;
    --dark:#0b0d10;
    --dark-soft:#12151b;
    --text:#cfd3da;
}

html{scroll-behavior:smooth; overflow-x:hidden;}
body{
    font-family:Inter,system-ui;
    background:var(--dark);
    color:var(--text);
    overflow-x:hidden;
}

.text-warning-jaune {
    --bs-text-opacity: 1;
    color: #e8f56a !important;
}
footer a {
    color: #e8f56a;
    text-decoration: none;
    font-weight: 500;
}

footer a:hover {
    text-decoration: underline;
    opacity: 0.9;
}
/* ================= SCROLL TO TOP ================= */

.scroll-top-btn {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(232,245,106,0.95);
    color: #000;
    border: none;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    /* caché par défaut */
    opacity: 0;
    transform: translateY(24px) scale(0.95);
    pointer-events: none;

    transition:
        opacity .35s ease,
        transform .35s ease,
        background .25s ease;
    z-index: 9999;
}

/* icône */
.scroll-top-btn i {
    font-size: 30px;
    line-height: 1;
    transition: transform .35s ease;
}

/* visible */
.scroll-top-btn.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* hover : micro lift + rotation */
.scroll-top-btn:hover {
    transform: translateY(-6px) scale(1.05);
}

.scroll-top-btn:hover i {
    transform: rotate(-12deg);
}

/* ---------------- HERO ---------------- */
.hero{
    min-height:100vh;
    background:
        radial-gradient(circle at 30% 30%, rgba(232,245,106,.15), transparent 40%),
        url('../assets/hero2.png') center/cover ;
    display:flex;
    align-items:center;
}
.hero h1{
    color:var(--yellow);
    font-weight:700;
}
.hero p{max-width:520px;}

/* ---------------- SECTIONS ---------------- */
.section{
    padding:100px 0;
}
.section-dark{
    background:var(--dark-soft);
}

/* ---------------- PARALLAX CIRCLES ---------------- */
.parallax-circle{
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    background:rgba(232,245,106,.12);
    filter:blur(1px);
    transform:translateY(0);
    transition:transform .2s linear;
}

/* ---------------- FEATURES ---------------- */
.feature{
    opacity:0;
    transform:translateY(40px);
    transition:.8s ease;
}
.feature.visible{
    opacity:1;
    transform:none;
}

/* ---------------- CONTACT ---------------- */
.form-control{
    background:#72878e;
    border:1px solid #222;
    color:#fff;
}
.form-control:focus{
    border-color:var(--yellow);
    box-shadow:none;
}
.btn-okkio{
    background:var(--yellow);
    color:#000;
    font-weight:600;
}
.btn-okkio:hover{opacity:.9}

/* ---------------- FOOTER ---------------- */
footer{
    background:#07090c;
    padding:40px 0;
    font-size:.9rem;
}


.device-img{
    max-width:260px;
    filter:drop-shadow(0 30px 60px rgba(0,0,0,.6));
    transition:transform .4s ease;
}
.device-front{
    transform:translateX(-40px) rotate(-6deg);
}
.device-back{
    position:absolute;
    right:10%;
    top:20%;
    transform:translateX(40px) rotate(6deg);
}
.device-img:hover{
    transform:translateY(-10px) scale(1.05);
}
.phone-real{
    max-width:380px;
    box-shadow:0 25px 60px rgba(0,0,0,.5);
    transition:transform .3s ease;
}

.phone-real:hover{
    transform:translateY(-6px);
}

/* ================= chiifre BACKGROUND ================= */
.section-chiffre{
    position: relative; /* 👈 indispensable */
    background:
        linear-gradient(rgba(0,0,0,0.60), rgba(0,0,0,0.60)),
        url('../assets/bg.jpg') center/cover no-repeat;
}


.section-chiffre::before{
    content:'';
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.60);
    z-index:0;
}

.section-chiffre .container{
    z-index:1;
}
@media (min-width:1024px){
    .section-chiffre{
        background-attachment: fixed;
    }
}

/* ================= ACCIDENT BACKGROUND ================= */
.section-accident{
    background:
        url('../assets/accident.jpg') center/cover no-repeat;

}

.section-accident::before{
    content:'';
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.75);
    z-index:0;
}

.section-accident .container{
    z-index:1;
}
@media (min-width:1024px){
    .section-accident{
        background-attachment: fixed;
    }
}
/* ---------------- PARALLAX LOGO ---------------- */
.parallax-logo{
    position:absolute;
    width:320px;
    max-width:40vw;

    /* VISIBILITÉ */
    opacity:0.2;
    filter:blur(1px);

    /* EMPILAGE */
    z-index:1;

    /* PARALLAX */
    transform:translateY(0);
    transition:transform .2s linear;

    /* DÉCO */
    pointer-events:none;
}
.section .container,
.section .row,
.section .feature{
    position:relative;
    z-index:2;
}
/* ================= STAT 86% LOGO ================= */
.stat-highlight{
    min-height:200px;
}

.stat-logo{
    position:absolute;
    inset:0;
    margin:auto;
    width:200px;
    opacity:0.3;
    z-index:0;
    pointer-events:none;
}

/* Le texte passe au-dessus */
.stat-highlight h5,
.stat-highlight p{
    position:relative;
    z-index:1;
}
/* menu */

/* Navbar */
.navbar {
    padding-top: 1rem;
}

/* Liens blancs */
.navbar-dark .nav-link {
    color: #fff;
    font-weight: 500;
}

.navbar-dark .nav-link:hover {
    color: var(--yellow);
}

/* Burger custom */
.custom-toggler {
    border: none;
    background: #000;
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-toggler .navbar-toggler-icon {
    background-image: none;
    width: 22px;
    height: 2px;
    background-color: #fff;
    position: relative;
}

.custom-toggler .navbar-toggler-icon::before,
.custom-toggler .navbar-toggler-icon::after {
    content: '';
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    background-color: #fff;
}

.custom-toggler .navbar-toggler-icon::before {
    top: -7px;
}

.custom-toggler .navbar-toggler-icon::after {
    top: 7px;
}

/* Menu mobile fond blanc */
@media (max-width: 991px) {
    .navbar-collapse {
        background: #fff;
        border-radius: 1rem;
        padding: 1rem 1.25rem;
        margin-top: 0.75rem;
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    }

    .navbar-dark .nav-link {
        color: #000;
    }
}
/* Transition navbar */
.navbar {
    background-color: transparent;
    transition: background-color 0.35s ease, box-shadow 0.35s ease;
}

/* Etat scrollé */
.navbar.scrolled {
    background-color: rgba(0, 0, 0, 0.92);
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
}

/* Logo navbar - caché par défaut */
.navbar-logo {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
}

/* Visible uniquement quand scroll */
.navbar.scrolled .navbar-logo {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Empêcher le logo de "pousser" le menu */
.navbar-brand {
    margin-right: auto;
}
.navbar.scrolled .navbar-logo img {
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.5));
}
/* ================= FORM Okkio – override Bootstrap ================= */

/* Champs input / textarea / select */
.form-control,
.form-select {
    background: #72878e;
    border: 1px solid #222;
    color: #fff;
}

.form-control::placeholder {
    color: #e0e0e0;
}

/* Focus (bleu -> jaune Okkio) */
.form-control:focus,
.form-select:focus {
    border-color: #e8f56a;
    box-shadow: 0 0 0 0.2rem rgba(232, 245, 106, 0.25);
    background: #72878e;
    color: #fff;
}

/* Checkbox & radio */
.form-check-input {
    border-color: #e8f56a;
}

.form-check-input:checked {
    background-color: #e8f56a;
    border-color: #e8f56a;
}

/* Focus checkbox */
.form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(232, 245, 106, 0.35);
}

/* Liens (politique de confidentialité) */
.form-check-label a {
    color: #e8f56a;
    text-decoration: underline;
}

.form-check-label a:hover {
    opacity: 0.85;
}

/* Messages de validation Bootstrap */
.was-validated .form-control:valid,
.form-control.is-valid {
    border-color: #e8f56a;
    background-image: none;
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
    border-color: #ff6b6b;
    background-image: none;
}

/* Bouton submit (sécurité si Bootstrap override) */
.btn-primary {
    background-color: #e8f56a !important;
    border-color: #e8f56a !important;
    color: #333 !important;
}

.btn-primary:hover {
    opacity: 0.9;
}

/* ================= FAQ Accordion – Flèche plus blanche ================= */

/* Icône fermée */
.accordion-button::after {
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

/* Icône ouverte */
.accordion-button:not(.collapsed)::after {
    filter: brightness(0) invert(1);
    opacity: 1;
}
.accordion-button::after {
    filter: brightness(0) invert(1);
    opacity: 1;
    transform: scale(1.15);
}


/* ================= PILIERS OKKIO ================= */

.okkio-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    cursor: default;
}

/* état initial (avant reveal) */
.okkio-pill img {
    width: 110px;
    height: auto;

    opacity: 0;
    transform: scale(0.85) translateY(8px);

    transition:
        opacity .6s ease,
        transform .6s cubic-bezier(.4,.2,.2,1),
        filter .3s ease;
}

/* reveal on scroll */
.okkio-pill.visible img {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* hover : mouvement + micro rotation */
.okkio-pill:hover img {
    transform: translateY(-8px) scale(1.08) rotate(-4deg);
    filter: drop-shadow(0 12px 25px rgba(0,0,0,.35));
}

/* titre (si réactivé un jour) */
.okkio-pill h5 {
    color: #fff;
    letter-spacing: 0.18em;
    font-size: 0.85rem;
    margin: 0;
    transition: transform .3s ease, opacity .3s ease;
}

/* hover texte (optionnel, subtil) */
.okkio-pill:hover h5 {
    transform: translateY(-2px);
    opacity: 0.9;
}
.okkio-pill:hover img {
    animation: pill-float 0.6s ease;
}

@keyframes pill-float {
    0%   { transform: translateY(0) scale(1); }
    35%  { transform: translateY(-10px) scale(1.08) rotate(-5deg); }
    65%  { transform: translateY(-5px) scale(1.05) rotate(-3deg); }
    100% { transform: translateY(-8px) scale(1.08) rotate(-4deg); }
}


/* ================= ICONES – MICRO ANIMATIONS ================= */

.bi {
    display: inline-block;
    transition: transform 0.25s ease;
}

.bi:hover {
    animation: icon-float 0.6s ease;
}

@keyframes icon-float {
    0%   { transform: translateY(0) rotate(0); }
    30%  { transform: translateY(-6px) rotate(-8deg); }
    60%  { transform: translateY(-3px) rotate(-4deg); }
    100% { transform: translateY(0) rotate(0); }
}


/* hover plus doux dans footer & social */
footer .bi:hover,
.social-links .bi:hover {
    transform: translateY(-6px) rotate(-8deg) scale(1.1);
}

/* ============================================================
   LANGUAGE SWITCHER  (ajouté pour i18n FR / NL / EN)
   ============================================================ */

.lang-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
}

.lang-link {
  color: rgba(255,255,255,.55);
  text-decoration: none;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 3px 6px;
  border-radius: 4px;
  transition: color .2s, background .2s;
}

.lang-link:hover {
  color: #e8f56a;
  background: rgba(232,245,106,.1);
}

.lang-link.active {
  color: #e8f56a;
  background: rgba(232,245,106,.15);
  border: 1px solid rgba(232,245,106,.3);
}

.lang-sep {
  color: rgba(255,255,255,.2);
  font-size: .75rem;
  margin: 0 1px;
  user-select: none;
}

/* Sur mobile : lang switcher dans le menu collapse */
@media (max-width: 991.98px) {
  .lang-switcher {
    justify-content: flex-end;
    padding: .75rem 0 .25rem;
    border-top: 1px solid rgba(255,255,255,.07);
    margin-top: .25rem;
  }

  .lang-link {
    color: rgba(0,0,0,.85);   /* bien visible sur fond sombre mobile */
    font-size: 1rem;                /* même taille que les nav-link */
    padding: 6px 12px;             /* zone de tap confortable */
    border-radius: 6px;
  }

  .lang-link.active {
    color:  rgba(0,0,0,.85);
    background: rgba(232,245,106,.50);
    border: 1px solid rgba(232,245,106,.8);
  }

  .lang-link:hover {
    color: #e8f56a;
    background: rgba(232,245,106,.1);
  }

  .lang-sep {
    font-size: .9rem;
    margin: 0 2px;
  }
}