/* ============================================================
   Bandeaux « Nous connaître » + « Focus Cybersécurité »
   (utilisés uniquement sur index.php)
   ============================================================ */

/* Propriété d'angle enregistrée pour la bordure gradient animée.
   Fallback silencieux si non supportée : la bordure reste statique. */
@property --fb-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* ---- Bande de section ---- */
.feature-band {
    position: relative;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    padding: 3.5rem 2rem;
}
/* Transition douce depuis la section Solutions (#2F455C) ... */
.feature-band--top {
    background: linear-gradient(180deg, #2F455C 0%, #24384d 100%);
    padding-bottom: 1.75rem;
}
/* ... vers la section CTA (#0d1b2a) */
.feature-band--bottom {
    background: linear-gradient(180deg, #24384d 0%, #0d1b2a 100%);
    padding-top: 1.75rem;
}

/* ---- Orbes lumineuses flottantes en fond ---- */
.feature-orb {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .5;
    pointer-events: none;
    z-index: 0;
}
.feature-orb--blue-a {
    width: 380px; height: 380px;
    top: -120px; left: -80px;
    background: radial-gradient(circle, rgba(28,147,202,.55), transparent 70%);
    animation: fbFloatA 15s ease-in-out infinite;
}
.feature-orb--blue-b {
    width: 300px; height: 300px;
    bottom: -110px; right: 8%;
    background: radial-gradient(circle, rgba(94,106,210,.42), transparent 70%);
    animation: fbFloatB 19s ease-in-out infinite;
}
.feature-orb--red-a {
    width: 360px; height: 360px;
    top: -110px; right: -70px;
    background: radial-gradient(circle, rgba(237,73,51,.45), transparent 70%);
    animation: fbFloatB 17s ease-in-out infinite;
}
.feature-orb--red-b {
    width: 260px; height: 260px;
    bottom: -90px; left: 6%;
    background: radial-gradient(circle, rgba(237,73,51,.28), transparent 70%);
    animation: fbFloatA 21s ease-in-out infinite;
}
@keyframes fbFloatA {
    0%,100% { transform: translate(0,0) scale(1); }
    50%     { transform: translate(40px,30px) scale(1.12); }
}
@keyframes fbFloatB {
    0%,100% { transform: translate(0,0) scale(1); }
    50%     { transform: translate(-35px,25px) scale(1.1); }
}

.feature-band-inner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
}

/* ---- Carte ---- */
.feature-card {
    position: relative;
    display: block;
    text-decoration: none;
    border-radius: 22px;
    padding: 2.75rem 3rem;
    background: rgba(13,27,42,.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.09);
    overflow: hidden;
    isolation: isolate;
    transition: transform .4s cubic-bezier(.22,1,.36,1),
                border-color .3s ease,
                box-shadow .4s ease;
}
.feature-card--blue { --fb-accent: #1C93CA; --fb-accent2: #5e6ad2; }
.feature-card--red  { --fb-accent: #ed4933; --fb-accent2: #f0883e; }

/* Bordure gradient animée (révélée au survol) */
.feature-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from var(--fb-angle),
                transparent 0deg,
                var(--fb-accent) 90deg,
                transparent 200deg,
                var(--fb-accent2) 300deg,
                transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
    opacity: 0;
    transition: opacity .4s ease;
    z-index: 0;
    pointer-events: none;
}
.feature-card:hover::before {
    opacity: 1;
    animation: fbBorderSpin 5s linear infinite;
}
@keyframes fbBorderSpin {
    to { --fb-angle: 360deg; }
}

.feature-card--blue:hover {
    transform: translateY(-8px);
    border-color: rgba(28,147,202,.5);
    box-shadow: 0 24px 60px rgba(28,147,202,.22), 0 8px 24px rgba(0,0,0,.35);
}
.feature-card--red:hover {
    transform: translateY(-8px);
    border-color: rgba(237,73,51,.5);
    box-shadow: 0 24px 60px rgba(237,73,51,.20), 0 8px 24px rgba(0,0,0,.35);
}

/* ---- Balayage lumineux (shine) au survol ---- */
.feature-card-shine {
    position: absolute;
    top: 0; left: -75%;
    width: 45%; height: 100%;
    background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.10) 50%, transparent 100%);
    transform: skewX(-18deg);
    pointer-events: none;
    z-index: 1;
    transition: left .75s cubic-bezier(.22,1,.36,1);
}
.feature-card:hover .feature-card-shine { left: 130%; }

/* ---- Filigrane icône en fond ---- */
.feature-card-watermark {
    position: absolute;
    right: -1.5rem; bottom: -2.5rem;
    font-size: 12rem;
    line-height: 1;
    color: var(--fb-accent);
    opacity: .06;
    z-index: 0;
    pointer-events: none;
    transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .4s ease;
}
.feature-card:hover .feature-card-watermark {
    transform: translate(-.6rem,-.9rem) rotate(-8deg) scale(1.06);
    opacity: .11;
}

.feature-card-content {
    position: relative;
    z-index: 2;
}

/* ---- En-tête (icône + titre) ---- */
.feature-card-head {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.4rem;
}
.feature-card-icon {
    position: relative;
    flex-shrink: 0;
    width: 62px; height: 62px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}
.feature-card-icon--blue { background: rgba(28,147,202,.16); color: #1C93CA; }
.feature-card-icon--red  { background: rgba(237,73,51,.16);  color: #ed4933; }
/* Anneau pulsant autour de l'icône */
.feature-card-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid currentColor;
    opacity: .5;
    animation: fbPulseRing 2.8s ease-out infinite;
    pointer-events: none;
}
@keyframes fbPulseRing {
    0%   { transform: scale(1);    opacity: .5; }
    70%  { transform: scale(1.35); opacity: 0; }
    100% { transform: scale(1.35); opacity: 0; }
}

.feature-card-eyebrow {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-bottom: .3rem;
}
.feature-card-eyebrow--blue { color: #1C93CA; }
.feature-card-eyebrow--red  { color: #ed4933; }

.feature-card-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: -.02em;
    line-height: 1.15;
}

/* ---- Badges ---- */
.feature-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-bottom: 1.3rem;
}
.feature-badge {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: .34rem .8rem;
    border-radius: 30px;
    border: 1px solid transparent;
    transition: transform .25s ease, box-shadow .25s ease;
}
.feature-badge i { font-size: .9em; }
.feature-badge--blue   { background: rgba(28,147,202,.14); color: #4db4e0; border-color: rgba(28,147,202,.3); }
.feature-badge--green  { background: rgba(16,185,129,.12); color: #34d399; border-color: rgba(16,185,129,.28); }
.feature-badge--purple { background: rgba(94,106,210,.14); color: #8b95e8; border-color: rgba(94,106,210,.3); }
.feature-card:hover .feature-badge {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
.feature-card:hover .feature-badge--green  { transition-delay: .05s; }
.feature-card:hover .feature-badge--purple { transition-delay: .1s; }

/* ---- Paragraphe ---- */
.feature-card-p {
    color: #9aa6ba;
    font-size: 1rem;
    line-height: 1.75;
    margin: 0 0 1.75rem;
    max-width: 760px;
}
.feature-card-p strong { color: #dbe2ee; font-weight: 600; }

/* ---- Bouton CTA ---- */
.feature-card-cta {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .8rem 1.7rem;
    border-radius: 40px;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .02em;
    transition: gap .25s ease, background .3s ease, color .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.feature-card-cta--blue {
    background: #1C93CA;
    color: #fff;
    box-shadow: 0 6px 20px rgba(28,147,202,.35);
}
.feature-card-cta--red {
    background: transparent;
    color: #ed4933;
    border: 1.5px solid rgba(237,73,51,.5);
}
.feature-card-cta i { transition: transform .3s cubic-bezier(.22,1,.36,1); }
.feature-card:hover .feature-card-cta   { gap: 1rem; }
.feature-card:hover .feature-card-cta i { transform: translateX(5px); }
.feature-card--blue:hover .feature-card-cta--blue { box-shadow: 0 10px 28px rgba(28,147,202,.55); }
.feature-card--red:hover  .feature-card-cta--red  {
    background: #ed4933;
    color: #fff;
    border-color: #ed4933;
    box-shadow: 0 10px 28px rgba(237,73,51,.45);
}

/* ============================================================
   Reveal au scroll (classe .visible ajoutée par index-page.js)
   ============================================================ */
/* Masqué par défaut ; révélé par IntersectionObserver (classe .visible).
   Fallback sans JS via noscript.css (CSP : aucun script inline autorisé). */
.reveal-card {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .7s cubic-bezier(.22,1,.36,1),
                transform .7s cubic-bezier(.22,1,.36,1);
}
.reveal-card.visible {
    opacity: 1;
    transform: translateY(0);
}
/* Apparition en cascade des enfants */
.reveal-card .feature-card-head,
.reveal-card .feature-card-badges,
.reveal-card .feature-card-p,
.reveal-card .feature-card-cta {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);
}
.reveal-card.visible .feature-card-head   { opacity: 1; transform: translateY(0); transition-delay: .12s; }
.reveal-card.visible .feature-card-badges { opacity: 1; transform: translateY(0); transition-delay: .22s; }
.reveal-card.visible .feature-card-p      { opacity: 1; transform: translateY(0); transition-delay: .3s; }
.reveal-card.visible .feature-card-cta    { opacity: 1; transform: translateY(0); transition-delay: .4s; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 768px) {
    .feature-band { padding: 2.5rem 1.1rem; }
    .feature-band--top    { padding-bottom: 1.25rem; }
    .feature-band--bottom { padding-top: 1.25rem; }
    .feature-card { padding: 2rem 1.4rem; border-radius: 18px; }
    .feature-card-head { gap: .9rem; margin-bottom: 1.1rem; }
    .feature-card-icon { width: 52px; height: 52px; font-size: 1.3rem; border-radius: 13px; }
    .feature-card-title { font-size: 1.35rem; }
    .feature-card-p { font-size: .95rem; }
    .feature-card-watermark { font-size: 8rem; right: -1rem; bottom: -1.5rem; }
    .feature-orb { filter: blur(55px); opacity: .4; }
}

/* ============================================================
   Accessibilité : mouvement réduit
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .feature-orb,
    .feature-card-icon::after,
    .feature-card:hover::before { animation: none !important; }
    .reveal-card,
    .reveal-card .feature-card-head,
    .reveal-card .feature-card-badges,
    .reveal-card .feature-card-p,
    .reveal-card .feature-card-cta {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .feature-card,
    .feature-card-shine,
    .feature-card-watermark,
    .feature-badge,
    .feature-card-cta { transition: none !important; }
}