/* ========================================================================= USA SCENE — immersion patriotique avec animations multiples - Photos USA en arrière-plan discret (8 lieux iconiques) - 3 aigles qui volent en boucle (trajectoires différentes) - Statue de la Liberté silhouette avec torche qui brille - Cloche de la Liberté qui se balance - Pluie de confettis étoilés rouge/blanc/bleu/or - Comètes étoilées qui traversent - Feux d'artifice multicolores - Étoiles scintillantes ========================================================================= */ /* Aucun décor par défaut */ .usa-scene { display: none; } html[data-theme="usa"] .usa-scene { display: block; position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } /* ──────── PHOTOS USA EN FOND DISCRET ──────── Masque très progressif : la photo est nette uniquement au centre et fond très tôt vers transparent — aucun bord visible. Filtre blur léger pour adoucir la texture. */ .usa-scene__bg { position: absolute; background-size: cover; background-position: center; background-repeat: no-repeat; pointer-events: none; filter: saturate(1.05) contrast(1) blur(.5px); -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, rgba(0,0,0,.85) 25%, rgba(0,0,0,.5) 45%, rgba(0,0,0,.2) 65%, transparent 85%); mask-image: radial-gradient(ellipse at center, #000 0%, rgba(0,0,0,.85) 25%, rgba(0,0,0,.5) 45%, rgba(0,0,0,.2) 65%, transparent 85%); } .usa-scene__bg--liberty { top: -40px; left: -60px; width: clamp(280px, 32vw, 540px); height: clamp(280px, 32vw, 540px); background-image: url("https://images.unsplash.com/photo-1485871981521-5b1fd3805eee?w=1200&q=80&auto=format&fit=crop"); opacity: .14; animation: usaBgFloat1 30s ease-in-out infinite; } .usa-scene__bg--nyc { top: 30%; left: -80px; width: clamp(260px, 30vw, 500px); height: clamp(260px, 30vw, 500px); background-image: url("https://images.unsplash.com/photo-1502920917128-1aa500764cbd?w=1200&q=80&auto=format&fit=crop"); opacity: .12; animation: usaBgFloat3 38s ease-in-out infinite; } .usa-scene__bg--canyon { top: 26%; right: -90px; width: clamp(280px, 32vw, 520px); height: clamp(280px, 32vw, 520px); background-image: url("https://images.unsplash.com/photo-1474044159687-1ee9f3a51722?w=1200&q=80&auto=format&fit=crop"); opacity: .12; animation: usaBgFloat4 32s ease-in-out infinite; } .usa-scene__bg--road { bottom: -50px; left: -70px; width: clamp(280px, 32vw, 520px); height: clamp(280px, 32vw, 520px); background-image: url("https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=1200&q=80&auto=format&fit=crop"); opacity: .13; animation: usaBgFloat5 36s ease-in-out infinite; } .usa-scene__bg--capitol { bottom: -50px; right: -60px; width: clamp(260px, 30vw, 500px); height: clamp(260px, 30vw, 500px); background-image: url("https://images.unsplash.com/photo-1554232456-8acdc5e1e07d?w=1200&q=80&auto=format&fit=crop"); opacity: .12; animation: usaBgFloat6 40s ease-in-out infinite; } .usa-scene__bg--bridge { top: 8%; left: 30%; width: clamp(220px, 26vw, 420px); height: clamp(220px, 26vw, 420px); background-image: url("https://images.unsplash.com/photo-1499092346589-b9b6be3e94b2?w=1200&q=80&auto=format&fit=crop"); opacity: .10; animation: usaBgFloat7 44s ease-in-out infinite; } .usa-scene__bg--rushmore { bottom: 10%; left: 40%; width: clamp(220px, 26vw, 420px); height: clamp(220px, 26vw, 420px); background-image: url("https://images.unsplash.com/photo-1564598519582-d49b4e8c5c5e?w=1200&q=80&auto=format&fit=crop"); opacity: .10; animation: usaBgFloat8 42s ease-in-out infinite; } @keyframes usaBgFloat1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(20px,14px) scale(1.04)} } @keyframes usaBgFloat3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(18px,-14px) scale(1.05)} } @keyframes usaBgFloat4 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-16px,-12px) scale(1.04)} } @keyframes usaBgFloat5 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(18px,-16px) scale(1.05)} } @keyframes usaBgFloat6 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-20px,-10px) scale(1.04)} } @keyframes usaBgFloat7 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(14px,10px) scale(1.03)} } @keyframes usaBgFloat8 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-12px,8px) scale(1.03)} } /* ──────── STATUE DE LA LIBERTÉ — silhouette dans le coin gauche ──────── */ .usa-scene__statue { position: absolute; bottom: 0; left: 1vw; width: clamp(110px, 14vw, 220px); height: clamp(180px, 24vw, 360px); pointer-events: none; background: url("data:image/svg+xml;utf8,") no-repeat bottom center/contain; filter: drop-shadow(0 -2px 12px rgba(255,215,0,.4)); opacity: .55; animation: usaStatueGlow 4s ease-in-out infinite; } @keyframes usaStatueGlow { 0%, 100% { filter: drop-shadow(0 -2px 12px rgba(255,215,0,.4)); } 50% { filter: drop-shadow(0 -2px 20px rgba(255,215,0,.7)); } } @media (max-width: 900px) { .usa-scene__statue { display: none; } } /* ──────── CLOCHE DE LA LIBERTÉ — qui se balance dans le coin droit ──────── */ .usa-scene__bell { position: absolute; bottom: 4%; right: 2vw; width: clamp(80px, 10vw, 140px); height: clamp(90px, 11vw, 160px); pointer-events: none; transform-origin: 50% 0%; animation: usaBellSwing 3s ease-in-out infinite; background: url("data:image/svg+xml;utf8,") no-repeat center/contain; filter: drop-shadow(0 6px 14px rgba(0,0,0,.4)); opacity: .75; } @keyframes usaBellSwing { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } } @media (max-width: 900px) { .usa-scene__bell { display: none; } } /* ──────── AIGLES QUI VOLENT (3 trajectoires) ──────── */ .usa-scene__eagle { position: absolute; width: 90px; height: 54px; background: url("data:image/svg+xml;utf8,") no-repeat center/contain; filter: drop-shadow(0 6px 14px rgba(10,31,102,.55)); opacity: 0; } .usa-scene__eagle--1 { top: 16%; animation: usaEagleFly1 22s linear infinite; } .usa-scene__eagle--2 { top: 38%; animation: usaEagleFly2 28s linear infinite; animation-delay: 8s; } .usa-scene__eagle--3 { top: 60%; animation: usaEagleFly3 26s linear infinite; animation-delay: 14s; } @keyframes usaEagleFly1 { 0% { left: -120px; transform: rotate(-2deg); opacity: 0; } 10% { opacity: .65; } 50% { transform: translateY(-20px) rotate(3deg); } 90% { opacity: .65; } 100% { left: calc(100vw + 50px); transform: rotate(-1deg); opacity: 0; } } @keyframes usaEagleFly2 { 0% { left: calc(100vw + 50px); transform: scaleX(-1) rotate(2deg); opacity: 0; } 10% { opacity: .55; } 50% { transform: scaleX(-1) translateY(-15px) rotate(-3deg); } 90% { opacity: .55; } 100% { left: -120px; transform: scaleX(-1) rotate(1deg); opacity: 0; } } @keyframes usaEagleFly3 { 0% { left: -120px; transform: rotate(-3deg); opacity: 0; } 10% { opacity: .6; } 50% { transform: translateY(15px) rotate(2deg); } 90% { opacity: .6; } 100% { left: calc(100vw + 50px); transform: rotate(-1deg); opacity: 0; } } /* ──────── PLUIE DE CONFETTIS ÉTOILÉS ──────── */ .usa-scene__confetti { position: absolute; width: 14px; height: 14px; pointer-events: none; opacity: 0; animation: usaConfettiFall 12s linear infinite; } .usa-scene__confetti--red { background: url("data:image/svg+xml;utf8,") no-repeat center/contain; } .usa-scene__confetti--blue { background: url("data:image/svg+xml;utf8,") no-repeat center/contain; } .usa-scene__confetti--white { background: url("data:image/svg+xml;utf8,") no-repeat center/contain; } .usa-scene__confetti--gold { background: url("data:image/svg+xml;utf8,") no-repeat center/contain; filter: drop-shadow(0 0 4px rgba(255,215,0,.7)); } .usa-scene__confetti:nth-child(1) { left: 5%; animation-delay: 0s; } .usa-scene__confetti:nth-child(2) { left: 15%; animation-delay: 1.2s; width: 12px; height: 12px; } .usa-scene__confetti:nth-child(3) { left: 25%; animation-delay: 2.4s; } .usa-scene__confetti:nth-child(4) { left: 35%; animation-delay: .6s; width: 10px; height: 10px; } .usa-scene__confetti:nth-child(5) { left: 45%; animation-delay: 3.5s; } .usa-scene__confetti:nth-child(6) { left: 55%; animation-delay: 1.8s; width: 16px; height: 16px; } .usa-scene__confetti:nth-child(7) { left: 65%; animation-delay: 4.2s; } .usa-scene__confetti:nth-child(8) { left: 75%; animation-delay: 2.8s; width: 11px; height: 11px; } .usa-scene__confetti:nth-child(9) { left: 85%; animation-delay: 5s; } .usa-scene__confetti:nth-child(10) { left: 95%; animation-delay: 3.2s; } .usa-scene__confetti:nth-child(11) { left: 10%; animation-delay: 6s; width: 13px; height: 13px; animation-duration: 14s; } .usa-scene__confetti:nth-child(12) { left: 30%; animation-delay: 7s; animation-duration: 13s; } .usa-scene__confetti:nth-child(13) { left: 50%; animation-delay: 8s; width: 15px; height: 15px; animation-duration: 16s; } .usa-scene__confetti:nth-child(14) { left: 70%; animation-delay: 9s; animation-duration: 13s; } .usa-scene__confetti:nth-child(15) { left: 90%; animation-delay: 10s; width: 12px; height: 12px; animation-duration: 14s; } @keyframes usaConfettiFall { 0% { transform: translateY(-30px) rotate(0deg); opacity: 0; } 5% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(110vh) rotate(720deg); opacity: 0; } } /* ──────── COMÈTES ÉTOILÉES (rare, traversent en diagonale) ──────── */ .usa-scene__comet { position: absolute; width: 4px; height: 4px; background: #FFD700; border-radius: 50%; box-shadow: 0 0 14px 4px rgba(255,215,0,.85), 0 0 30px 12px rgba(255,215,0,.45); opacity: 0; } .usa-scene__comet::before { content: ""; position: absolute; right: 100%; top: 50%; width: 80px; height: 1.5px; transform: translateY(-50%); background: linear-gradient(90deg, transparent, rgba(255,215,0,.8)); } .usa-scene__comet--1 { top: 8%; left: -10%; animation: usaCometCross 6s ease-out infinite; animation-delay: 4s; } .usa-scene__comet--2 { top: 22%; right: -10%; animation: usaCometCrossR 7s ease-out infinite; animation-delay: 11s; } @keyframes usaCometCross { 0%, 100% { left: -10%; top: 8%; opacity: 0; } 10% { opacity: 1; } 60% { left: 110%; top: 30%; opacity: 1; } 65%, 100%{ opacity: 0; } } @keyframes usaCometCrossR { 0%, 100% { right: -10%; top: 22%; opacity: 0; } 10% { opacity: 1; } 60% { right: 110%; top: 50%; opacity: 1; } 65%, 100%{ opacity: 0; } } /* ──────── FEUX D'ARTIFICE (4 coins) ──────── */ .usa-scene__firework { position: absolute; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, transparent 0%, transparent 14%, rgba(255,215,0,.55) 16%, transparent 19%), radial-gradient(circle, transparent 0%, transparent 24%, rgba(200,16,46,.45) 26%, transparent 30%), radial-gradient(circle, transparent 0%, transparent 34%, rgba(10,31,102,.4) 36%, transparent 40%); opacity: 0; animation: usaFireworkBurst 9s ease-out infinite; pointer-events: none; } .usa-scene__firework--1 { top: 12%; left: 18%; animation-delay: 0s; } .usa-scene__firework--2 { top: 22%; right: 22%; animation-delay: 3s; } .usa-scene__firework--3 { bottom: 22%; left: 24%; animation-delay: 5.5s; } .usa-scene__firework--4 { bottom: 14%; right: 18%; animation-delay: 7.5s; } @keyframes usaFireworkBurst { 0%, 100% { opacity: 0; transform: scale(0); } 4% { opacity: .9; transform: scale(.4); } 10% { opacity: .8; transform: scale(.9); } 20% { opacity: 0; transform: scale(1.3); } } /* ──────── ÉTOILES SCINTILLANTES (sur les bords) ──────── */ .usa-scene__star { position: absolute; width: 16px; height: 16px; background: url("data:image/svg+xml;utf8,") no-repeat center/contain; filter: drop-shadow(0 0 8px rgba(200,16,46,.7)); animation: usaStarSparkle 2.4s ease-in-out infinite; } .usa-scene__star--blue { background-image: url("data:image/svg+xml;utf8,"); filter: drop-shadow(0 0 8px rgba(10,31,102,.7)); } .usa-scene__star--gold { background-image: url("data:image/svg+xml;utf8,"); filter: drop-shadow(0 0 10px rgba(255,215,0,.85)); } .usa-scene__star--1 { top: 32%; left: 4%; animation-delay: 0s; } .usa-scene__star--2 { top: 18%; right: 4%; animation-delay: .6s; } .usa-scene__star--3 { top: 60%; left: 2%; animation-delay: 1.2s; } .usa-scene__star--4 { bottom: 28%; right: 3%; animation-delay: 1.8s; } .usa-scene__star--5 { top: 8%; left: 48%; animation-delay: .3s; width: 12px; height: 12px; } .usa-scene__star--6 { bottom: 8%; left: 52%; animation-delay: 2.1s; width: 12px; height: 12px; } @keyframes usaStarSparkle { 0%, 100% { opacity: .4; transform: scale(.85) rotate(0deg); } 50% { opacity: .95; transform: scale(1.15) rotate(15deg); } } /* ──────── RÉDUCTION MOUVEMENT ──────── */ @media (prefers-reduced-motion: reduce) { .usa-scene__bg, .usa-scene__statue, .usa-scene__bell, .usa-scene__eagle, .usa-scene__confetti, .usa-scene__comet, .usa-scene__firework, .usa-scene__star { animation: none !important; } .usa-scene__eagle, .usa-scene__confetti, .usa-scene__comet, .usa-scene__firework { opacity: 0; } } /* Mobile : on retire les éléments lourds */ @media (max-width: 720px) { .usa-scene__bg--bridge, .usa-scene__bg--rushmore, .usa-scene__bg--nyc, .usa-scene__bg--canyon { display: none; } .usa-scene__bg { opacity: .08; } .usa-scene__confetti:nth-child(n+8) { display: none; } } /* ═════════════════════════════════════════════════════════════════════ LISIBILITÉ TEXTES en mode USA Renforce le contraste sur les éléments qui se lisaient mal sur le fond bleu-rouge-blanc dilué. ═════════════════════════════════════════════════════════════════════ */ /* FAQ — questions trop pâles */ html[data-theme="usa"] .faq__item { background: rgba(255, 255, 255, .98) !important; border: 1px solid rgba(10, 31, 102, .25) !important; box-shadow: 0 4px 14px rgba(10, 31, 102, .08); } html[data-theme="usa"] .faq__q { color: #0A1F66 !important; font-weight: 700 !important; } html[data-theme="usa"] .faq__q::after { color: #C8102E !important; } html[data-theme="usa"] .faq__a, html[data-theme="usa"] .faq__a p, html[data-theme="usa"] .faq__item[open] .faq__a { color: #1F2D5C !important; } html[data-theme="usa"] .faq__item[open] { border-color: #C8102E !important; box-shadow: 0 8px 24px rgba(200, 16, 46, .15); } /* Sections — fond blanc opaque pour assurer la lisibilité du contenu */ html[data-theme="usa"] .section, html[data-theme="usa"] section.section { position: relative; background-color: rgba(255, 255, 255, .92) !important; } /* Titres/sub-titres : contrastés navy + accent rouge */ html[data-theme="usa"] .section__title, html[data-theme="usa"] h2, html[data-theme="usa"] h3 { color: #0A1F66 !important; text-shadow: 0 1px 2px rgba(255, 255, 255, .8); } html[data-theme="usa"] .section__title em, html[data-theme="usa"] em { color: #C8102E !important; } html[data-theme="usa"] .section__sub, html[data-theme="usa"] .section__lead, html[data-theme="usa"] p, html[data-theme="usa"] li { color: #1F2D5C !important; } html[data-theme="usa"] .section__label, html[data-theme="usa"] .section__eyebrow, html[data-theme="usa"] .kicker, html[data-theme="usa"] .eyebrow { color: #C8102E !important; font-weight: 700; } /* Boutons : couleurs USA contrastées */ html[data-theme="usa"] .btn--primary, html[data-theme="usa"] .btn-primary { background: linear-gradient(135deg, #C8102E 0%, #0A1F66 100%) !important; color: #FFFFFF !important; border: 0 !important; box-shadow: 0 8px 22px rgba(10, 31, 102, .35); } html[data-theme="usa"] .btn--primary:hover, html[data-theme="usa"] .btn-primary:hover { background: linear-gradient(135deg, #0A1F66 0%, #C8102E 100%) !important; box-shadow: 0 12px 30px rgba(200, 16, 46, .4); } /* Cards (plans, testimonials, etc.) */ html[data-theme="usa"] .plan, html[data-theme="usa"] .testimonial, html[data-theme="usa"] .step, html[data-theme="usa"] .ctheme-card { background-color: rgba(255, 255, 255, .96) !important; border-color: rgba(10, 31, 102, .15) !important; box-shadow: 0 8px 24px rgba(10, 31, 102, .08); } html[data-theme="usa"] .plan strong, html[data-theme="usa"] strong { color: #0A1F66 !important; } /* === CONFIGURATEUR — texte sombre lisible sur fond crème USA === */ html[data-theme="usa"] .cfg__step-title { color: #0A1F66 !important; } html[data-theme="usa"] .cfg__step-opt { color: #C8102E !important; font-weight: 600; } html[data-theme="usa"] .cfg__toggle-label { color: #0A1F66 !important; } html[data-theme="usa"] .cfg__toggle-sub { color: #4A5A8A !important; } html[data-theme="usa"] .cfg__radio-label, html[data-theme="usa"] .cfg__radio-title, html[data-theme="usa"] .cfg__radio-name { color: #0A1F66 !important; } html[data-theme="usa"] .cfg__radio-sub, html[data-theme="usa"] .cfg__radio-desc, html[data-theme="usa"] .cfg__radio-body { color: #4A5A8A !important; } html[data-theme="usa"] .cfg__opt { color: #0A1F66 !important; } html[data-theme="usa"] .cfg__opt-icon { color: #C8102E !important; } html[data-theme="usa"] .cfg__total, html[data-theme="usa"] .cfg__price { color: #C8102E !important; } html[data-theme="usa"] .cfg__step-num { background: linear-gradient(135deg, #C8102E 0%, #0A1F66 100%) !important; color: #FFFFFF !important; border: 1px solid #FFFFFF !important; box-shadow: 0 0 0 2px rgba(200, 16, 46, .35); } /* === MEDAL BADGE — version USA voyante (rouge/blanc/bleu) === */ html[data-theme="usa"] .medal-badge, html[data-theme="usa"] .medal-badge--float { background: linear-gradient(110deg, #C8102E 0%, #B40A26 50%, #0A1F66 100%) !important; border: 2px solid #FFFFFF !important; box-shadow: 0 0 0 2px rgba(200, 16, 46, .55), 0 8px 22px rgba(10, 31, 102, .45), 0 0 32px rgba(200, 16, 46, .35), inset 0 1px 0 rgba(255, 255, 255, .35) !important; backdrop-filter: none !important; } html[data-theme="usa"] .medal-badge__coin { background: conic-gradient( from 135deg, #C8102E 0deg, #FFFFFF 60deg, #0A1F66 120deg, #FFFFFF 180deg, #C8102E 240deg, #FFFFFF 300deg, #0A1F66 360deg ) !important; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px rgba(200, 16, 46, .65), 0 0 24px rgba(255, 255, 255, .55), inset 0 2px 3px rgba(255, 255, 255, .55), inset 0 -2px 3px rgba(10, 31, 102, .45) !important; color: #C8102E !important; } html[data-theme="usa"] .medal-badge__coin svg path { fill: #FFFFFF !important; stroke: #C8102E !important; stroke-width: 1 !important; filter: drop-shadow(0 1px 1px rgba(10, 31, 102, .4)); } html[data-theme="usa"] .medal-badge__name { color: #FFFFFF !important; text-shadow: 0 1px 2px rgba(10, 31, 102, .85), 0 0 8px rgba(0, 0, 0, .4) !important; font-weight: 900 !important; letter-spacing: .08em !important; } html[data-theme="usa"] .medal-badge__cat { color: #FFE89A !important; opacity: 1 !important; text-shadow: 0 1px 2px rgba(10, 31, 102, .85) !important; font-weight: 700 !important; } html[data-theme="usa"] .medal-badge__ribbons span:first-child { background: #C8102E !important; } html[data-theme="usa"] .medal-badge__ribbons span:last-child { background: #0A1F66 !important; } /* ═════════════════════════════════════════════════════════════════════ SOCIAL RAIL — couleurs adaptées au thème USA (red / white / navy) ═════════════════════════════════════════════════════════════════════ */ /* Boutons par défaut : navy profond, icône blanche, lueur rouge subtile */ html[data-theme="usa"] .social-rail__link { background: #0A1F66 !important; border: 2px solid #FFFFFF !important; color: #FFFFFF !important; box-shadow: 0 0 0 2px #C8102E, 0 8px 22px rgba(10, 31, 102, .55), 0 0 18px rgba(200, 16, 46, .35) !important; } html[data-theme="usa"] .social-rail__link svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); } /* Différenciation par bouton — chacun adopte une couleur du drapeau */ html[data-theme="usa"] .social-rail__link--fb { background: #0A1F66 !important; /* bleu marine */ } html[data-theme="usa"] .social-rail__link--ig { background: linear-gradient(135deg, #C8102E 0%, #FFFFFF 50%, #0A1F66 100%) !important; color: #FFFFFF !important; } html[data-theme="usa"] .social-rail__link--ig svg { filter: drop-shadow(0 1px 3px rgba(0,0,0,.7)); } html[data-theme="usa"] .social-rail__link--tw { background: #C8102E !important; /* rouge vif */ } /* Override des dégradés de hover ::before pour utiliser les couleurs USA */ html[data-theme="usa"] .social-rail__link--fb::before { background: linear-gradient(135deg, #0A1F66 0%, #1538AC 100%) !important; } html[data-theme="usa"] .social-rail__link--ig::before { background: linear-gradient(135deg, #C8102E 0%, #FFFFFF 50%, #0A1F66 100%) !important; } html[data-theme="usa"] .social-rail__link--tw::before { background: linear-gradient(135deg, #C8102E 0%, #8b0a1f 100%) !important; } /* Hover : transformation amplifiée + halo or/rouge */ html[data-theme="usa"] .social-rail__link:hover, html[data-theme="usa"] .social-rail__link:focus-visible { color: #FFFFFF !important; border-color: #FFD700 !important; transform: translateX(3px) scale(1.12); box-shadow: 0 0 0 2px #FFD700, 0 10px 28px rgba(200, 16, 46, .55), 0 0 28px rgba(255, 215, 0, .55) !important; } html[data-theme="usa"] .social-rail__link--fb:hover { box-shadow: 0 0 0 2px #FFFFFF, 0 10px 26px rgba(10,31,102,.7), 0 0 30px rgba(21,56,172,.5) !important; } html[data-theme="usa"] .social-rail__link--ig:hover { box-shadow: 0 0 0 2px #FFD700, 0 10px 26px rgba(200,16,46,.55), 0 0 30px rgba(255,215,0,.6) !important; } html[data-theme="usa"] .social-rail__link--tw:hover { box-shadow: 0 0 0 2px #FFFFFF, 0 10px 26px rgba(200,16,46,.7), 0 0 30px rgba(200,16,46,.5) !important; } /* Filets décoratifs ::before/::after du rail = rouge → bleu (drapeau) */ html[data-theme="usa"] .social-rail::before, html[data-theme="usa"] .social-rail::after { background: linear-gradient(to bottom, transparent, #C8102E 35%, #FFFFFF 50%, #0A1F66 65%, transparent) !important; filter: drop-shadow(0 0 4px rgba(200, 16, 46, .55)); } /* Footer socials même traitement */ html[data-theme="usa"] .footer__social-link { background: #0A1F66 !important; border: 2px solid #FFFFFF !important; color: #FFFFFF !important; box-shadow: 0 0 0 1px #C8102E !important; } html[data-theme="usa"] .footer__social-link:hover { background: linear-gradient(135deg, #C8102E, #FFFFFF, #0A1F66) !important; border-color: #FFD700 !important; color: #0A1F66 !important; }