/* Compléments du site rendu en PHP (styles auparavant injectés par les composants React). */

[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.no-js .reveal { opacity: 1 !important; transform: none !important; }

/* En-tête (ex-YO_HEADER_CSS) */
.nav-client-icon { display: none; width: 44px; height: 44px; border-radius: 999px; align-items: center; justify-content: center; background: var(--ink); color: var(--bg); border: 1px solid var(--ink); }
.nav-client-icon:hover { background: var(--yo-orange); border-color: var(--yo-orange); }
@media (max-width: 1100px) { .nav-client-icon { display: inline-flex; } }
.mobile-menu .mobile-menu-cta { display: flex; gap: 10px; flex-wrap: wrap; padding-bottom: 12px; }
.mobile-menu .mobile-menu-cta a { flex: 1 1 140px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 16px; border-radius: 999px; white-space: nowrap; font-family: var(--font-display); font-size: 17px; font-weight: 600; border: 1px solid var(--line); }
.mobile-menu .mobile-menu-cta a.mm-client { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.mobile-menu .mobile-menu-cta a.mm-devis { background: var(--yo-orange); color: #fff; border-color: var(--yo-orange); }
.mobile-menu .mobile-menu-cta a.mm-client:hover { color: var(--bg); opacity: .9; }
.mobile-menu .mobile-menu-cta a.mm-devis:hover { color: #fff; opacity: .9; }
.nav-drop-item { display: flex; flex-direction: column; padding: 12px 16px; border-radius: 10px; text-decoration: none; transition: background .2s; color: var(--ink); }
.nav-drop-item:hover, .nav-drop-item:focus-visible { background: var(--bg-2); }
.nav-drop-btn:not(.active):hover { color: var(--ink) !important; }

/* Réalisations */
.work-card .work-link { display: block; width: 100%; height: 100%; position: relative; }
.work-card .work-desc { color: rgba(255,255,255,.85); font-size: 14px; line-height: 1.45; margin-top: 6px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .35s ease, opacity .35s ease; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.work-card:hover .work-desc, .work-card:focus-within .work-desc { max-height: 6em; opacity: 1; }
.work-filter { padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--line-strong); background: transparent; color: var(--ink); cursor: pointer; font-weight: 500; font-family: inherit; font-size: inherit; transition: background .2s, color .2s; }
.work-filter.active { background: var(--ink); color: var(--bg); }

/* Maintenance : bascule annuel / mensuel */
.billing-toggle { display: inline-flex; background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px; gap: 4px; }
.billing-toggle button { padding: 10px 20px; border-radius: 999px; border: 0; cursor: pointer; background: transparent; color: var(--ink-1, var(--ink)); font-weight: 600; font-size: 14px; font-family: inherit; transition: all .2s; }
.billing-toggle button[aria-selected="true"] { background: var(--yo-orange); color: #fff; }
.billing-toggle .badge-reco { margin-left: 8px; font-size: 11px; font-weight: 700; background: var(--yo-orange); color: #fff; padding: 2px 8px; border-radius: 999px; }
.billing-toggle button[aria-selected="true"] .badge-reco { background: rgba(255,255,255,0.2); }
.billing-toggle .badge-plus { margin-left: 8px; font-size: 11px; font-weight: 700; color: var(--ink-2); }
.billing-toggle button[aria-selected="true"] .badge-plus { color: rgba(255,255,255,.85); }
[data-billing="annuel"] .bill-m, [data-billing="mensuel"] .bill-a { display: none; }

/* Blog : filtres et pagination devenus des liens */
a.filter-chip, a.page-num { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.blog-pagination a.btn { text-decoration: none; }

/* Formulaire de contact */
.form-error:empty { display: none; }

/* Assistant IA */
.yo-chat-fab { position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, #407696, #2d5a73); color: #fff; border: none; cursor: pointer; box-shadow: 0 4px 20px rgba(64,118,150,0.35); z-index: 1000; display: flex; align-items: center; justify-content: center; transition: transform .3s; }
.yo-chat-fab:hover { transform: scale(1.08); }
.yo-chat { position: fixed; right: 30px; bottom: 30px; width: 380px; max-width: 90vw; max-height: 520px; border-radius: 16px; box-shadow: 0 8px 40px rgba(0,0,0,0.15); z-index: 1000; overflow: hidden; display: flex; flex-direction: column; background: #fff; animation: fadeInUp .25s ease; }
.yo-chat-head { background: linear-gradient(135deg, #1a2a3a, #407696); height: 56px; color: #fff; font-size: 15px; font-weight: 600; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.yo-chat-head button { background: none; border: none; color: #fff; cursor: pointer; font-size: 22px; padding: 4px; line-height: 1; }
.yo-chat-dot { width: 8px; height: 8px; background: #1cc88a; border-radius: 50%; display: inline-block; }
.yo-chat-logs { flex: 1; padding: 16px; overflow-y: auto; background: #f8f9fc; max-height: 360px; }
.yo-msg { display: flex; gap: 8px; margin-bottom: 12px; align-items: flex-end; }
.yo-msg.user { flex-direction: row-reverse; }
.yo-msg img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.yo-msg .b { padding: 10px 14px; max-width: 80%; font-size: 14px; line-height: 1.5; border-radius: 14px 14px 14px 4px; background: #fff; color: #333; border: 1px solid #eef1f5; box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.yo-msg.user .b { background: linear-gradient(135deg, #407696, #2d5a73); color: #fff; border: none; border-radius: 14px 14px 4px 14px; }
.yo-msg.typing .b { color: #999; letter-spacing: 2px; }
.yo-msg .b a { color: #eb9222; }
.yo-chat-form { display: flex; border-top: 1px solid #eef1f5; flex-shrink: 0; }
.yo-chat-form input { flex: 1; padding: 14px 16px; border: none; outline: none; font-size: 14px; font-family: inherit; color: #1a1c2e; background: #fff; }
.yo-chat-form button { background: none; border: none; color: #407696; padding: 0 16px; cursor: pointer; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Chiffres clés : « 35 000+ » tient sur mobile */
@media (max-width: 560px) { .stats-grid { gap: 32px 20px; } .stat .num { font-size: clamp(2.2rem, 11vw, 3.5rem); } }
.stats-grid > .stat { min-width: 0; }

/* Liens vers les pages d'atterrissage (aussi utilisés hors landings) */
.lp-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.lp-link { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px 46px 20px 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); transition: border-color .2s, transform .2s; }
.lp-link:hover { border-color: var(--yo-orange); transform: translateY(-2px); }
.lp-link span { font-size: 14px; color: var(--ink-3); line-height: 1.45; }
.lp-link em { position: absolute; right: 20px; top: 20px; font-style: normal; color: var(--yo-orange); }
.lp-related { padding: clamp(48px, 6vw, 80px) 0; }
.lp-related h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); margin: 12px 0 28px; }

/* Recherche du blog */
.blog-search { display: flex; align-items: center; gap: 10px; max-width: 720px; margin: 0 0 22px; padding: 6px 6px 6px 18px; background: var(--card); border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-3); }
.blog-search:focus-within { border-color: var(--yo-orange); box-shadow: 0 0 0 4px rgba(235,146,34,.12); }
.blog-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--ink); padding: 10px 0; outline: none; }
.blog-search .btn { padding: 10px 20px; }
.blog-search-info { margin: -6px 0 18px; color: var(--ink-2); font-size: 15px; }
@media (max-width: 560px) { .blog-search .btn { padding: 10px 14px; font-size: 14px; } }

/* reCAPTCHA v3 : badge masqué, mention affichée sous les formulaires (autorisé par Google) */
.grecaptcha-badge { visibility: hidden !important; }