/* -------------------------------------------------------------------------- */
/* Sendiwaan Digital | Style Système Premium | Version 1.0                    */
/* -------------------------------------------------------------------------- */

/* 1. TYPOGRAPHIE ET PERFORMANCE GLOBALE */
html, body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

/* 2. BARRE DE DÉFILEMENT PREMIUM */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0b1120; }
::-webkit-scrollbar-thumb { 
    background: #1e3a8a; 
    border-radius: 99px;
    transition: background 0.3s;
}
::-webkit-scrollbar-thumb:hover { background: #06b6d4; }

/* 3. NAVIGATION (EFFET GLASSS) */
#navbar {
    will-change: padding, background;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar-scrolled {
    background: rgba(11, 17, 32, 0.75) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(6, 182, 212, 0.15);
    padding-top: 1rem !important; 
    padding-bottom: 1rem !important;
}

/* 4. CARTES BENTO / GRADIENT BORDERS */
.gradient-border-card {
    background: linear-gradient(#0b1120, #0b1120) padding-box,
                linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.01)) border-box;
    border: 1px solid transparent;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.gradient-border-card:hover {
    transform: translateY(-8px);
    background: linear-gradient(#111a30, #111a30) padding-box,
                linear-gradient(135deg, #06b6d4, #1e3a8a) border-box;
    box-shadow: 0 20px 40px -15px rgba(6, 182, 212, 0.15);
}

/* 5. TEXT GRADIENTS */
.text-gradient {
    background: linear-gradient(135deg, #fff 20%, #06b6d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 6. ANIMATIONS DE REVELATION (Optimisées pour le Scroll) */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* 7. PORTFOLIO FILTERING */
.filter-btn { transition: all 0.3s ease; }
.filter-active {
    background-color: #06b6d4 !important;
    color: #0b1120 !important;
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.3);
}
.portfolio-item { transition: opacity 0.5s ease, transform 0.5s ease; }
.hidden-item {
    opacity: 0;
    transform: scale(0.9);
    pointer-events: none;
    display: none !important;
}

/* 8. ANIMATIONS DU LOGO */
.tech-line {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: drawLine 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.tech-pulse {
    animation: pulseOrange 2.5s infinite ease-in-out;
}
.logo-fade-in {
    animation: fadeIn 1.5s ease-out forwards;
}

@keyframes drawLine {
    to { stroke-dashoffset: 0; }
}
@keyframes pulseOrange {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 9. HAMBURGER MENU */
.active-burger #line1 { transform: translateY(8px) rotate(45deg); }
.active-burger #line2 { transform: translateY(-2px) rotate(-45deg); width: 24px; }

/* 10.UTILS */
::selection { background: #06b6d4; color: #ffffff; }


/* Animation de fondu et zoom sur les images du carrousel */
.auto-carousel {
    position: relative;
    width: 100%;
    height: 100%;
}
.carousel-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: premiumFadeZoom 12s infinite; /* Boucle de 12 secondes totale */
}

/* On décale l'apparition de chaque image de 4 secondes */
.carousel-image:nth-child(1) { animation-delay: 0s; }
.carousel-image:nth-child(2) { animation-delay: 4s; }
.carousel-image:nth-child(3) { animation-delay: 8s; }

/* Si seulement 2 images sont uploadées, on accélère le rythme */
.carousel-count-2 .carousel-image { animation-duration: 8s; }
.carousel-count-2 .carousel-image:nth-child(1) { animation-delay: 0s; }
.carousel-count-2 .carousel-image:nth-child(2) { animation-delay: 4s; }

/* L'Animation magique du fondu croisé ultra doux */
@keyframes premiumFadeZoom {
    0%   { opacity: 0; transform: scale(1); }
    15%  { opacity: 1; transform: scale(1.02); } /* Finit d'apparaître et commence à zoomer */
    35%  { opacity: 1; transform: scale(1.06); } /* Garde son opacité un peu plus longtemps */
    50%  { opacity: 0; transform: scale(1.08); } /* Disparaît */
    100% { opacity: 0; transform: scale(1); }
}


/* Style personnalisé pour les blocs Gutenberg Premium (.portfolio-premium-content) */
.portfolio-premium-content h2 {
    font-size: 2.25rem; font-weight: 900; color: #fff; margin-top: 3.5rem; margin-bottom: 1.5rem; letter-spacing: -0.025em; line-height: 1.2;
}
.portfolio-premium-content h3 {
    font-size: 1.5rem; font-weight: 700; color: #cbd5e1; margin-top: 2rem; margin-bottom: 1rem;
}
.portfolio-premium-content p {
    font-size: 1.125rem; line-height: 1.8; color: #94a3b8; margin-bottom: 1.5rem; font-weight: 300;
}
.portfolio-premium-content strong {
    font-weight: 700; color: #fff;
}
.portfolio-premium-content ul {
    list-style-type: none; padding: 0; margin-bottom: 2rem;
}
.portfolio-premium-content ul li {
    position: relative; padding-left: 2rem; font-size: 1.125rem; color: #94a3b8; margin-bottom: 1rem; font-weight: 300;
}
.portfolio-premium-content ul li::before {
    content: '→'; position: absolute; left: 0; color: #06b6d4; font-weight: bold;
}
.portfolio-premium-content blockquote {
    border-left: 4px solid #06b6d4; padding-left: 1.5rem; margin-left: 0; font-style: italic; font-size: 1.25rem; color: #e2e8f0; background: rgba(255,255,255,0.03); padding: 2rem; border-radius: 0 1rem 1rem 0;
}
/* Style pour vos futures captures d'écran "Mac OS / Safari" importées par WP */
.portfolio-premium-content img, .portfolio-premium-content figure {
    width: 100%; border-radius: 1.5rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); margin: 3rem 0; border: 1px solid rgba(255,255,255,0.05);
}

/* ==============================================================
   ICÔNES SVG ANIMÉES "ULTRA PREMIUM" (Section Services)
   ============================================================== */

/* -- 1. Utilitaires Partagés -- */
.anim-glow-pulse { animation: pulseGlow 4s ease-in-out infinite; }
@keyframes pulseGlow {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.05); }
}

/* -- 2. Pôle Mobile -- */
.anim-float-phone { animation: floatPhone 6s ease-in-out infinite; transform-origin: center; }
.anim-ui-layer { animation: slideUpUI 4s cubic-bezier(0.16, 1, 0.3, 1) infinite; opacity: 0; }
.anim-ui-layer-1 { animation-delay: 0.2s; } .anim-ui-layer-2 { animation-delay: 0.4s; } .anim-ui-layer-3 { animation-delay: 0.6s; }
.anim-code-bracket-left { animation: floatBracketLeft 5s ease-in-out infinite; }
.anim-code-bracket-right { animation: floatBracketRight 5s ease-in-out infinite reverse; }
.anim-draw-line { stroke-dasharray: 100; stroke-dashoffset: 100; animation: drawStroke 4s ease-in-out infinite; }

@keyframes floatPhone { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } }
@keyframes slideUpUI { 0% { transform: translateY(15px); opacity: 0; } 20%, 80% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-10px); opacity: 0; } }
@keyframes floatBracketLeft { 0%, 100% { transform: translate(0px, 0px) rotate(-10deg); } 50% { transform: translate(-4px, -6px) rotate(-5deg); } }
@keyframes floatBracketRight { 0%, 100% { transform: translate(0px, 0px) rotate(10deg); } 50% { transform: translate(4px, 6px) rotate(5deg); } }
@keyframes drawStroke { 0% { stroke-dashoffset: 100; opacity: 0; } 20%, 80% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } }

/* -- 3. Pôle Web -- */
.anim-float-browser { animation: floatBrowser 6s ease-in-out infinite; transform-origin: center; }
.anim-ui-render { animation: renderUI 5s cubic-bezier(0.16, 1, 0.3, 1) infinite; opacity: 0; }
.anim-ui-render-1 { animation-delay: 0.2s; } .anim-ui-render-2 { animation-delay: 0.4s; } .anim-ui-render-3 { animation-delay: 0.6s; } .anim-ui-render-4 { animation-delay: 0.8s; }
.anim-cursor-interaction { animation: cursorInteraction 5s ease-in-out infinite; }
.anim-button-click { animation: buttonPulse 5s ease-in-out infinite; transform-origin: 137px 105px; }
.anim-float-badge-1 { animation: floatBadge1 5s ease-in-out infinite; }
.anim-float-badge-2 { animation: floatBadge2 6s ease-in-out infinite reverse; }

@keyframes floatBrowser { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-10px) rotate(0.5deg); } }
@keyframes renderUI { 0%, 5% { transform: translateY(10px); opacity: 0; } 15%, 85% { transform: translateY(0); opacity: 1; } 95%, 100% { transform: translateY(-5px); opacity: 0; } }
@keyframes cursorInteraction { 0%, 15% { transform: translate(40px, 40px); opacity: 0; } 25% { opacity: 1; transform: translate(40px, 40px); } 45% { transform: translate(0px, 0px); } 50% { transform: translate(0px, 0px) scale(0.85); } 55% { transform: translate(0px, 0px) scale(1); } 80% { transform: translate(0px, 0px); opacity: 1; } 90%, 100% { transform: translate(40px, 40px); opacity: 0; } }
@keyframes buttonPulse { 0%, 45% { filter: brightness(1); transform: scale(1); } 50% { filter: brightness(1.4) drop-shadow(0 0 8px rgba(249,115,22,0.8)); transform: scale(0.95); } 55%, 85% { filter: brightness(1) drop-shadow(0 0 15px rgba(249,115,22,0.4)); transform: scale(1); } 90%, 100% { filter: brightness(1); transform: scale(1); } }
@keyframes floatBadge1 { 0%, 100% { transform: translate(0px, 0px); } 50% { transform: translate(-5px, -8px); } }
@keyframes floatBadge2 { 0%, 100% { transform: translate(0px, 0px); } 50% { transform: translate(5px, 8px); } }

/* -- 4. Pôle Logiciel (Software/ERP) -- */
.anim-float-app { animation: floatApp 6s ease-in-out infinite; transform-origin: center; }
.anim-float-terminal { animation: floatTerminal 6s ease-in-out infinite reverse; transform-origin: center; }
.anim-data-bar { animation: growBar 4s cubic-bezier(0.16, 1, 0.3, 1) infinite; transform-origin: bottom; }
.anim-data-bar-1 { animation-delay: 0.1s; } .anim-data-bar-2 { animation-delay: 0.3s; } .anim-data-bar-3 { animation-delay: 0.5s; }
.anim-console-text { animation: consoleType 4s steps(20, end) infinite; overflow: hidden; white-space: nowrap; }
.anim-blink-cursor { animation: blink 1s step-end infinite; }
.anim-float-badge-db { animation: floatBadgeDB 5s ease-in-out infinite; }
.anim-float-badge-cli { animation: floatBadgeCLI 6s ease-in-out infinite reverse; }
.anim-process-line { stroke-dasharray: 50; stroke-dashoffset: 50; animation: processDash 3s linear infinite; }

@keyframes floatApp { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-8px) rotate(-0.5deg); } }
@keyframes floatTerminal { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-12px) rotate(1deg); } }
@keyframes growBar { 0%, 10% { transform: scaleY(0.1); opacity: 0.5; } 40%, 80% { transform: scaleY(1); opacity: 1; } 95%, 100% { transform: scaleY(0.1); opacity: 0.5; } }
@keyframes consoleType { 0%, 20% { clip-path: inset(0 100% 0 0); opacity: 0; } 30%, 80% { clip-path: inset(0 0 0 0); opacity: 1; } 90%, 100% { clip-path: inset(0 100% 0 0); opacity: 0; } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes floatBadgeDB { 0%, 100% { transform: translate(0px, 0px); } 50% { transform: translate(4px, -6px); } }
@keyframes floatBadgeCLI { 0%, 100% { transform: translate(0px, 0px); } 50% { transform: translate(-6px, 8px); } }
@keyframes processDash { to { stroke-dashoffset: -50; } }


/* ==============================================================
   ICÔNES SVG "PILIERS D'APPROCHE" (Socio, Info, Biz)
   ============================================================== */

/* -- 1. Pilier Sociologie -- */
.anim-float-center { animation: floatCenter 6s ease-in-out infinite; transform-origin: center; }
.anim-sonar-wave { animation: sonarPulse 4s cubic-bezier(0, 0, 0.2, 1) infinite; transform-origin: 100px 100px; }
.anim-sonar-wave-2 { animation-delay: 2s; }
.anim-network-flow { stroke-dasharray: 10 10; animation: networkFlow 20s linear infinite; }
.anim-node-pulse { animation: nodePulse 3s ease-in-out infinite; transform-origin: center; }
.anim-node-1 { animation-delay: 0.5s; transform-origin: 40px 60px; }
.anim-node-2 { animation-delay: 1.5s; transform-origin: 160px 70px; }
.anim-node-3 { animation-delay: 2.5s; transform-origin: 150px 150px; }
.anim-float-badge-research { animation: floatBadgeResearch 5s ease-in-out infinite; }
.anim-float-badge-local { animation: floatBadgeLocal 6s ease-in-out infinite reverse; }

@keyframes floatCenter { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-6px); } }
@keyframes sonarPulse { 0% { transform: scale(0.5); opacity: 0.8; stroke-width: 4px; } 100% { transform: scale(2.5); opacity: 0; stroke-width: 1px; } }
@keyframes networkFlow { to { stroke-dashoffset: -200; } }
@keyframes nodePulse { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.2); filter: brightness(1.5); } }
@keyframes floatBadgeResearch { 0%, 100% { transform: translate(0px, 0px) rotate(-5deg); } 50% { transform: translate(-5px, -8px) rotate(5deg); } }
@keyframes floatBadgeLocal { 0%, 100% { transform: translate(0px, 0px) rotate(5deg); } 50% { transform: translate(6px, 10px) rotate(-5deg); } }

/* -- 2. Pilier Informatique -- */
.anim-float-core { animation: floatCore 6s ease-in-out infinite; transform-origin: center; }
.anim-core-pulse { animation: corePulse 2s ease-in-out infinite; transform-origin: center; }
.anim-data-stream { stroke-dasharray: 8 16; animation: dataStream 1s linear infinite; }
.anim-data-stream-reverse { stroke-dasharray: 8 16; animation: dataStreamReverse 1.5s linear infinite; }
.anim-float-badge-sec { animation: floatBadgeSec 5s ease-in-out infinite; }
.anim-float-badge-perf { animation: floatBadgePerf 6s ease-in-out infinite reverse; }
.anim-float-badge-code { animation: floatBadgeCode 7s ease-in-out infinite; }

@keyframes floatCore { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } }
@keyframes corePulse { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.15); filter: brightness(1.5) drop-shadow(0 0 10px rgba(6,182,212,0.8)); } }
@keyframes dataStream { to { stroke-dashoffset: -24; } }
@keyframes dataStreamReverse { to { stroke-dashoffset: 24; } }
@keyframes floatBadgeSec { 0%, 100% { transform: translate(0px, 0px) rotate(-5deg); } 50% { transform: translate(-4px, -8px) rotate(5deg); } }
@keyframes floatBadgePerf { 0%, 100% { transform: translate(0px, 0px) rotate(4deg); } 50% { transform: translate(6px, 8px) rotate(-4deg); } }
@keyframes floatBadgeCode { 0%, 100% { transform: translate(0px, 0px); } 50% { transform: translate(-5px, 6px); } }

/* -- 3. Pilier Entrepreneuriat -- */
.anim-float-chart { animation: floatChart 6s ease-in-out infinite; transform-origin: center; }
.anim-grow-bar { animation: growBarBiz 4s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
.anim-grow-bar-1 { animation-delay: 0.1s; } .anim-grow-bar-2 { animation-delay: 0.4s; } .anim-grow-bar-3 { animation-delay: 0.7s; }
.anim-draw-trend { stroke-dasharray: 150; stroke-dashoffset: 150; animation: drawTrend 4s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.anim-rotate-gear { animation: rotateGear 10s linear infinite; transform-origin: 16px 16px; }
.anim-pulse-target { animation: pulseTarget 3s ease-in-out infinite; transform-origin: 20px 20px; }
.anim-float-badge-leads { animation: floatBadgeLeads 5s ease-in-out infinite reverse; }
.anim-float-badge-process { animation: floatBadgeProcess 6s ease-in-out infinite; }
.anim-particle-up { animation: particleUp 3s ease-in infinite; }
.anim-particle-1 { animation-delay: 0s; } .anim-particle-2 { animation-delay: 1.2s; } .anim-particle-3 { animation-delay: 2.4s; }

@keyframes floatChart { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } }
@keyframes growBarBiz { 0%, 10% { transform: scaleY(0.1); opacity: 0; } 40%, 80% { transform: scaleY(1); opacity: 1; } 95%, 100% { transform: scaleY(0.1); opacity: 0; } }
@keyframes drawTrend { 0%, 20% { stroke-dashoffset: 150; opacity: 0; } 40% { opacity: 1; } 60%, 80% { stroke-dashoffset: 0; opacity: 1; } 95%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes rotateGear { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes pulseTarget { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.1); filter: brightness(1.5) drop-shadow(0 0 10px rgba(6,182,212,0.8)); } }
@keyframes floatBadgeLeads { 0%, 100% { transform: translate(0px, 0px) rotate(4deg); } 50% { transform: translate(6px, -6px) rotate(-4deg); } }
@keyframes floatBadgeProcess { 0%, 100% { transform: translate(0px, 0px) rotate(-5deg); } 50% { transform: translate(-5px, 6px) rotate(5deg); } }
@keyframes particleUp { 0% { transform: translateY(20px); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 0.8; } 100% { transform: translateY(-40px) scale(0.5); opacity: 0; } }


/* ==============================================================
   ANIMATIONS HERO SVG (L'UNIVERS CONNECTÉ)
   ============================================================== */

/* Flottaison des planètes */
.float-slow { animation: floatHero 6s ease-in-out infinite; }
.float-med { animation: floatHero 5s ease-in-out infinite reverse; }
.float-fast { animation: floatHero 4s ease-in-out infinite 1s; }

@keyframes floatHero {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
}

/* Rotation Anneaux */
.spin-slow { animation: spinHero 20s linear infinite; transform-origin: center; }
.spin-slow-reverse { animation: spinHero 25s linear infinite reverse; transform-origin: center; }
@keyframes spinHero { 100% { transform: rotate(360deg); } }

/* Flux de Données */
.data-stream { stroke-dasharray: 10 30; animation: flowHero 2s linear infinite; }
.data-stream-orange { stroke-dasharray: 15 40; animation: flowReverseHero 3s linear infinite; }
@keyframes flowHero { to { stroke-dashoffset: -40; } }
@keyframes flowReverseHero { to { stroke-dashoffset: 55; } }

/* Glow Neon */
.pulse-neon { animation: pulseNeonHero 3s ease-in-out infinite; }
@keyframes pulseNeonHero {
    0%, 100% { filter: brightness(1); transform: scale(1); }
    50% { filter: brightness(1.4); transform: scale(1.05); }
}

/* Typing Effect */
.svg-typing { stroke-dasharray: 50; stroke-dashoffset: 50; animation: typeCodeHero 3s steps(20, end) infinite; }
@keyframes typeCodeHero {
    0%, 20% { stroke-dashoffset: 50; opacity: 0; }
    50%, 80% { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Effet Bouton et Texte Hero */
.text-shine { background-size: 200% auto; animation: shineHero 5s linear infinite; }
@keyframes shineHero { to { background-position: 200% center; } }

/* Interactivité Souris (Parallaxe SVG fluide) */
#parallax-container svg > g { transition: transform 0.1s linear; }


/* Navigation Premium Scrolled State */
.navbar-scrolled {
    background: rgba(7, 11, 20, 0.7) !important; /* sdNight avec transparence */
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
}

/* Animation Mobile Menu Link Entrance (Utilisée par le JS) */
.mobile-menu-enter .mobile-link {
    transform: translateY(0) !important;
    opacity: 1 !important;
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.5s ease;
}
.mobile-menu-enter #mobile-menu-footer {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

/* ==============================================================
   OPTIMISATIONS CONTACT FORM 7
   ============================================================== */

/* Fix: Forcer la pleine largeur pour les balises invisibles créées par CF7 */
.wpcf7-form-control-wrap {
    display: block !important;
    width: 100%;
}

/* Cacher le contour pointillé par défaut et uniformiser le fond transparent dans le menu déroulant sur macOs */
.wpcf7 select {
    -webkit-appearance: none;
    appearance: none;
    background-color: #0b1120;
}
.wpcf7 select option { background-color: #0b1120; }

/* -- Styling Premium des Notifications d'Erreur et de Succès -- */
.wpcf7 form .wpcf7-response-output {
    margin-top: 2rem !important;
    border-radius: 1rem !important;
    padding: 1rem 1.5rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    background: rgba(11, 17, 32, 0.8) !important;
    color: #cbd5e1 !important;
}

/* Mail envoyé avec Succès */
.wpcf7 form.sent .wpcf7-response-output {
    border-color: #06b6d4 !important; /* sdCyan */
    background: rgba(6, 182, 212, 0.1) !important;
    color: #fff !important;
}

/* Mail ayant échoué ou Validation Erreur (ex: Champs manquants) */
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output {
    border-color: #ef4444 !important; /* Tailwind Red 500 */
    background: rgba(239, 68, 68, 0.1) !important;
    color: #fff !important;
}

/* Micro-texte erreur sous les champs rouges */
.wpcf7-not-valid-tip {
    font-size: 0.7rem !important;
    color: #ef4444 !important;
    margin-top: 0.25rem;
    font-weight: 600;
}


/* ==============================================================
   COMPOSANT PREMIUM "FORMULAIRE DE CONTACT & CALL LINKS" 
   ============================================================== */

/* -- Encadré Principal du form -- */
.contact-glass-panel {
    background: linear-gradient(135deg, rgba(255,255,255,0.02) 0%, rgba(11, 17, 32, 0.4) 100%);
    box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.8),
                inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* Bordure colorée orbitale */
.animate-slow-spin-card {
    animation: rotateGradient 8s linear infinite;
    z-index: 0;
}
@keyframes rotateGradient {
    0% { transform: rotate(0deg) scale(0.95); }
    50% { transform: rotate(180deg) scale(1); }
    100% { transform: rotate(360deg) scale(0.95); }
}

/* 
 * IMPORTANT : Améliorations profondes sur le Formulaire généré par l'Extension "CF7".
 * Sans quoi les CSS des boutons/shortcodes précédents risquaient d'avoir sauté! 
 */
.contact-premium-wrapper form {
    position: relative;
    z-index: 50;
}

/* S'assure que le background hover du submit respecte notre beau btn ! */
.contact-premium-wrapper input[type="submit"], 
.contact-premium-wrapper button[type="submit"] {
    background: linear-gradient(to right, #06b6d4, #1e3a8a) !important;
    cursor: pointer !important;
    border: none !important;
    position: relative;
    /* Nettoyage WP default */
}
.contact-premium-wrapper input[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px -10px rgba(6,182,212, 0.8);
    opacity: 0.95;
}

/* Gérer le placeholder clair */
.contact-premium-wrapper ::placeholder { 
    color: #475569 !important; /* Tailwind slate-600 */ 
}
.contact-premium-wrapper input:-ms-input-placeholder, 
.contact-premium-wrapper textarea:-ms-input-placeholder {
  color: #475569 !important;
}


/* ==============================================================
   FAB SOCIAL (Floating Social Buttons Bottom-Right)
   ============================================================== */
   
/* L'état OPEN contrôlé par main.js du Footer flottant : Le conteneur apparait !*/
#fab-menu.fab-is-open {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
}

/* Modifie l'Apparence de notre croix 'Fermer' */
#fab-trigger.fab-is-open #fab-icon-default {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}
#fab-trigger.fab-is-open #fab-icon-close {
    opacity: 1;
    transform: rotate(0) scale(1);
}
#fab-trigger.fab-is-open {
   /* Rend le fond Noir givré au cas ou le client regrette son "Contact" */
    background: #0b1120;
    border-color: rgba(239, 68, 68, 0.4); /* Légèrement rougeâtre  */
    box-shadow: 0 0px 20px -5px rgba(239, 68, 68, 0.3); 
    color : #cbd5e1;
}

/* ==============================================================
   TEXTE & HISTOIRE WP : PREMIUM PORTFOLIO ( single-portfolio.php )
   ============================================================== */

/* -- Espacements Gutenberg Modérés -- */
.premium-wp-content h2 {
    color: #ffffff;
    font-size: 2.25rem;
    font-weight: 900;
    margin-top: 5rem;
    margin-bottom: 2rem;
    line-height: 1.2;
    letter-spacing: -0.025em;
    display: flex;
    align-items: center;
    gap: 1rem;
}
/* Décoration point bleue à coté de vos Sous titres */
.premium-wp-content h2::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #06b6d4; /* sdCyan */
    box-shadow: 0 0 10px rgba(6,182,212, 0.8);
}

.premium-wp-content h3 {
    color: #cbd5e1;
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 3rem;
    margin-bottom: 1.25rem;
}

.premium-wp-content p {
    font-size: 1.125rem; /* Un texte ample (18px) qui repose les yeux */
    line-height: 1.9;
    color: #94a3b8;
    margin-bottom: 1.5rem;
    font-weight: 300;
}
.premium-wp-content p strong { color: #f8fafc; font-weight: 700; }

.premium-wp-content ul {
    margin-bottom: 2rem;
    list-style: none;
    padding-left: 0;
}
.premium-wp-content ul li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 1rem;
    color: #94a3b8;
    font-size: 1.1rem;
    font-weight: 300;
}
/* Icônes check stylisés pour liste à puce (Premium!) */
.premium-wp-content ul li::before {
    content: "▹";
    position: absolute;
    left: 0;
    top: -2px;
    color: #1e3a8a; /* sdBlue */
    font-size: 1.3rem;
    font-weight: black;
}

.premium-wp-content blockquote {
    border-left: 3px solid #06b6d4;
    background: linear-gradient(90deg, rgba(6,182,212,0.05), transparent);
    padding: 2rem 2rem 2rem 1.5rem;
    font-size: 1.25rem;
    font-style: italic;
    color: #cbd5e1;
    margin: 3rem 0;
    border-radius: 0 1rem 1rem 0;
}


/* ==============================================================
   VIDÉOS YOUTUBE & EMBEDS GUTENBERG (Portfolio & Blog)
   ============================================================== */

/* Cibler le conteneur principal du bloc embarqué généré par WP */
.premium-wp-content .wp-block-embed {
    margin: 4rem 0; /* Bien aérer la vidéo par rapport au texte */
    position: relative;
    border-radius: 1.5rem; /* Coins très arrondis, comme nos cartes (24px) */
    overflow: hidden; /* Coupe ce qui dépasse des coins arrondis */
    background-color: #0b1120;
    /* Un ombrage Premium qui simule l'écran lumineux (Halo Cyan discret) */
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.8),
                0 0 0 1px rgba(255, 255, 255, 0.05),
                0 0 40px rgba(6, 182, 212, 0.1); /* sdCyan Glow */
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
}

/* Léger effet de soulèvement (Hover) avant même de cliquer play */
.premium-wp-content .wp-block-embed:hover {
    transform: translateY(-5px);
    box-shadow: 0 40px 70px -20px rgba(0, 0, 0, 0.9),
                0 0 0 1px rgba(6, 182, 212, 0.3), /* La bordure s'allume au survol */
                0 0 60px rgba(6, 182, 212, 0.15);
}

/* 
 * Gestion de l'aspect ratio (Pour être responsive sur tous les écrans) 
 * WordPress met déjà 'wp-embed-aspect-16-9', mais ce code s'assure
 * que l'iframe remplisse parfaitement notre belle boite sans marge noire.
 */
.premium-wp-content .wp-block-embed-youtube .wp-block-embed__wrapper {
    position: relative;
    width: 100%;
    /* Utilisation du ratio natif 16/9, très solide sur mobile et desktop */
    aspect-ratio: 16 / 9; 
    overflow: hidden;
    /* Optionnel: donne l'illusion qu'on est sur MacOS */
    border-top: 1px solid rgba(255, 255, 255, 0.1); 
}

/* Cible précisément le vrai lecteur Iframe embarqué par YT */
.premium-wp-content .wp-block-embed-youtube .wp-block-embed__wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0 0 1.5rem 1.5rem; /* Épouse l'arrondi du bas de notre boite mère */
}



/* Décoration "Fenêtre MacOS" simulée au-dessus des vidéos YouTube */
.premium-wp-content .wp-block-embed-youtube::before {
    content: '';
    display: block;
    width: 100%;
    height: 36px;
    background: linear-gradient(to bottom, #111a30, #0a0f1c); /* Notre couleur dark thème */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Les fameux 3 petits boutons Mac au-dessus de la vidéo */
.premium-wp-content .wp-block-embed-youtube::after {
    content: '';
    position: absolute;
    top: 13px; /* Centré verticalement dans la barre de 36px */
    left: 16px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    /* Couleurs macOS (Rouge - Jaune - Vert) dessinées via boxShadow Multiple! */
    background-color: #ff5f56;
    box-shadow: 18px 0 0 #ffbd2e, 
                36px 0 0 #27c93f;
    z-index: 10;
}