/* ========================================================= Chameleon Digital Studio — design system (kit officiel) ========================================================= */ :root { --bg-main: #031426; --bg-secondary: #061D31; --card: #08243A; --cyan: #00C9C8; --lime: #A8E61D; --orange: #FF7A16; --coral: #EF3B2D; --text: #FFFFFF; --text-muted: #B9C6D2; --text-soft: #8FB0C0; --text-bright: #EAF6F8; --border: rgba(255, 255, 255, 0.14); --radius: 18px; --font-display: "Sora", "Sora Fallback", sans-serif; --font-body: "Inter", "Inter Fallback", sans-serif; } body { font-family: var(--font-body); color: var(--text); background: var(--bg-main); font-size: 17px; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; line-height: 1.12; } a { color: var(--cyan); } .chameleon-wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; } .chameleon-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); margin-bottom: 18px; } .chameleon-eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--orange); display: inline-block; } /* ---------- Site header (GeneratePress) ---------- */ #masthead, .site-header, .main-navigation { background: rgba(3, 20, 38, 0.82) !important; backdrop-filter: blur(10px); border-bottom: 1px solid var(--border) !important; } .main-navigation a, .site-title a, .site-description { color: var(--text) !important; } .main-navigation a:hover { color: var(--cyan) !important; } .main-navigation .button-wrap a, .main-navigation .menu-item.button-wrap > a, .main-navigation ul.menu > li:last-child > a { background: var(--lime) !important; color: var(--bg-main) !important; border-radius: 999px !important; padding: 10px 22px !important; font-family: var(--font-display) !important; font-weight: 600 !important; } /* ---------- Buttons ---------- */ .chameleon-btn { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.03em; padding: 16px 30px; border-radius: 999px; display: inline-flex; align-items: center; gap: 10px; text-decoration: none !important; transition: transform 0.2s ease, box-shadow 0.2s ease; } .chameleon-btn:hover { transform: translateY(-2px); } .chameleon-btn.is-primary { background: var(--lime); color: var(--bg-main) !important; box-shadow: 0 10px 30px -8px rgba(168, 230, 29, 0.5); } .chameleon-btn.is-outline { background: transparent; color: var(--cyan) !important; border: 1.5px solid var(--cyan); } .chameleon-btn.is-outline:hover { background: rgba(0, 201, 200, 0.1); } /* ---------- Hero ---------- */ .chameleon-hero { position: relative; background: var(--bg-main); padding: 130px 0 0; overflow: hidden; } .chameleon-hero .chameleon-wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; position: relative; z-index: 2; padding-bottom: 70px; } .chameleon-hero-decor-points { position: absolute; top: 0; right: 0; width: 55%; opacity: 0.7; z-index: 1; pointer-events: none; } .chameleon-hero-decor-wave { position: absolute; left: 0; right: 0; bottom: -2px; width: 100%; z-index: 1; line-height: 0; } .chameleon-hero-decor-wave svg { width: 100%; height: auto; display: block; } .chameleon-hero h1 { font-size: clamp(2.3rem, 4vw, 3.4rem); color: var(--text); margin: 0 0 22px; } .chameleon-hero h1 .accent { color: var(--cyan); } .chameleon-hero p.chameleon-lede { font-size: 1.1rem; color: var(--text-muted); max-width: 46ch; margin-bottom: 32px; } .chameleon-hero-actions { display: flex; gap: 16px; flex-wrap: wrap; } /* ---------- Sections ---------- */ .chameleon-section { padding: 100px 0; position: relative; } .chameleon-section.is-secondary { background: var(--bg-secondary); } .chameleon-section.is-main { background: var(--bg-main); } .chameleon-split { display: grid; grid-template-columns: 3fr 5fr; gap: 60px; align-items: start; } .chameleon-split h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin: 0 0 18px; } .chameleon-split p { color: var(--text-muted); font-size: 1.05rem; } .chameleon-commits { display: flex; gap: 30px; margin-top: 30px; flex-wrap: wrap; } .chameleon-commit { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; display: flex; align-items: center; gap: 10px; } .chameleon-commit::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); display: inline-block; } /* ---------- Services ---------- */ .chameleon-section-head { max-width: 720px; margin: 0 auto 56px; text-align: center; } .chameleon-section-head h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin: 0; } .chameleon-section-head.is-left { margin: 0 0 56px; text-align: left; } .chameleon-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .chameleon-service-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 26px; } .chameleon-service-card svg { width: 40px; height: 40px; margin-bottom: 20px; } .chameleon-service-card h3 { font-size: 1.15rem; margin: 0 0 10px; } .chameleon-service-card p { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 16px; } .chameleon-service-card a { font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; text-decoration: none; } .chameleon-service-card a:hover { text-decoration: underline; } /* ---------- Méthode ---------- */ .chameleon-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; margin-top: 50px; } .chameleon-steps::before { content: ""; position: absolute; top: 22px; left: 6%; right: 6%; height: 1px; background: var(--border); } .chameleon-step { position: relative; padding-right: 20px; } .chameleon-step-num { width: 44px; height: 44px; border-radius: 50%; background: var(--card); border: 1px solid var(--cyan); color: var(--cyan); font-family: var(--font-display); font-weight: 700; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; position: relative; z-index: 2; } .chameleon-step h3 { font-size: 1.05rem; margin: 0 0 8px; } .chameleon-step p { margin: 0; color: var(--text-muted); font-size: 0.92rem; } /* ---------- Réalisations ---------- */ .chameleon-case { display: grid; grid-template-columns: 1.2fr 1fr; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .chameleon-case-visual { /* Source canonique unique du composant. Le camelon canonique est pose ici en decoration de fond, discret (220px, decale hors cadre en bas a droite). Il est volontairement neutralise plus bas sur .chameleon-preview.chameleon-case-visual, c'est-a-dire exactement sur les panneaux qui portent une capture cliente : aucune decoration Chameleon ne passe jamais derriere une capture client. */ background-image: linear-gradient(135deg, rgba(6,29,49,0.92), rgba(3,20,38,0.97)), url('https://chameleondigitalstudio.com/wp-content/uploads/2026/08/hero-chameleon-canonique-900.webp'); background-repeat: no-repeat; background-position: right -30px bottom -30px; background-size: 220px; padding: 50px 40px; min-height: 260px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--border); } .chameleon-case-info { padding: 46px 42px; } .chameleon-case-info h3 { font-size: 1.5rem; margin: 10px 0 14px; } .chameleon-case-info ul { list-style: none; margin: 18px 0; padding: 0; } .chameleon-case-info li { padding: 6px 0; color: var(--text-muted); } .chameleon-case-info li::before { content: "✓ "; color: var(--cyan); font-weight: 700; } .chameleon-case-info a.chameleon-case-link { font-weight: 700; text-decoration: none; } .chameleon-next-project { margin-top: 24px; border: 1px dashed var(--border); border-radius: var(--radius); padding: 28px; text-align: center; color: var(--text-muted); } .chameleon-next-project b { color: var(--text); font-family: var(--font-display); display: block; margin-bottom: 6px; } /* ---------- Réassurance ---------- */ .chameleon-reassurance { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; } .chameleon-reassurance-item { padding: 20px; } .chameleon-reassurance-item span { display: block; font-family: var(--font-display); font-weight: 700; } /* ---------- Contact ---------- */ .chameleon-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; } /* Lot C11 : les enfants de la grille de contact ne peuvent pas imposer leur largeur minimale (min-content) a la colonne. Sans cela, l option la plus longue du selecteur d offre etirait la colonne a 378 px sur mobile et le formulaire se faisait rogner a droite sous 440 px. Aucun effet au-dela. */ .chameleon-contact > * { min-width: 0; } .chameleon-contact h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); } .chameleon-contact p { color: var(--text-muted); } .chameleon-contact-info { margin-top: 26px; color: var(--text-muted); font-size: 0.95rem; } .chameleon-contact-info div { margin-bottom: 8px; } .chameleon-form { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 34px; } .chameleon-form label { display: block; font-family: var(--font-display); font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.06em; } .chameleon-form input, .chameleon-form select, .chameleon-form textarea { width: 100%; background: var(--bg-main); border: 1px solid var(--border); border-radius: 10px; padding: 13px 16px; color: var(--text); font-family: var(--font-body); margin-bottom: 18px; } .chameleon-form .chameleon-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .chameleon-form .chameleon-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 20px; } .chameleon-form .chameleon-consent input { width: 24px; height: 24px; flex: 0 0 auto; margin: 0; } /* ---------- Footer ---------- */ .chameleon-footer { background: var(--bg-secondary); border-top: 1px solid var(--border); padding: 50px 0 30px; color: var(--text-muted); font-size: 0.9rem; } .chameleon-footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; margin-bottom: 30px; } .chameleon-footer-top h4 { font-family: var(--font-display); color: var(--text); font-size: 0.95rem; margin: 0 0 14px; } .chameleon-footer-top ul { list-style: none; margin: 0; padding: 0; } .chameleon-footer-top li { margin-bottom: 8px; } .chameleon-footer-top a { color: var(--text-muted); text-decoration: none; } .chameleon-footer-top a:hover { color: var(--cyan); } .chameleon-footer-bottom { border-top: 1px solid var(--border); padding-top: 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; } /* ---------- Motion ---------- */ @keyframes chameleonRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .chameleon-hero h1, .chameleon-hero p, .chameleon-hero-actions { animation: chameleonRise 0.7s ease both; } .chameleon-hero p { animation-delay: 0.1s; } .chameleon-hero-actions { animation-delay: 0.2s; } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .chameleon-hero .chameleon-wrap, .chameleon-split, .chameleon-case, .chameleon-contact { grid-template-columns: 1fr; } .chameleon-services-grid { grid-template-columns: repeat(2, 1fr); } .chameleon-steps { grid-template-columns: repeat(2, 1fr); gap: 30px; } .chameleon-steps::before { display: none; } .chameleon-reassurance { grid-template-columns: repeat(2, 1fr); } .chameleon-footer-top { grid-template-columns: 1fr; } .chameleon-hero { padding: 100px 0 0; } .chameleon-section { padding: 64px 0; } } @media (max-width: 600px) { .chameleon-services-grid, .chameleon-reassurance { grid-template-columns: 1fr; } .chameleon-wrap { padding: 0 20px; } .chameleon-form .chameleon-row { grid-template-columns: 1fr; } } /* ---------- Kit visuels rels ---------- */ /* (le fond decoratif de .chameleon-case-visual est desormais declare une seule fois, dans la source canonique du composant plus haut dans ce fichier) */ /* --- Micro-lot CTA final : composition groupee (titre + phrase + CTA + mascotte) --- */ .chameleon-next-project { display: flex; align-items: center; justify-content: center; gap: 32px; max-width: 820px; margin-left: auto; margin-right: auto; padding: 26px 32px; text-align: left; } .chameleon-next-project::after { content: ""; flex: 0 0 auto; width: 100px; height: 92px; /* asset 384x353 : ratio respecte, aucune deformation */ background-image: url('https://chameleondigitalstudio.com/wp-content/uploads/2026/08/hero-chameleon-canonique-900-768x768.webp'); background-repeat: no-repeat; background-position: center; background-size: contain; } .cds-next-copy { min-width: 0; } .cds-next-copy > p { margin: 14px 0 0; } @media (max-width: 720px) { .chameleon-next-project { flex-direction: column; gap: 18px; padding: 24px 22px; text-align: center; } .chameleon-next-project::after { width: 72px; height: 66px; } } /* ---------- Carousel realisations ---------- */ .chameleon-carousel { position: relative; overflow: hidden; border-radius: var(--radius); } .chameleon-carousel-track { display: flex; transition: transform 0.5s cubic-bezier(.4,0,.2,1); } .chameleon-carousel-slide { min-width: 100%; flex-shrink: 0; display: grid; grid-template-columns: 1.2fr 1fr; background: var(--card); border: 1px solid var(--border); } .chameleon-carousel-slide .chameleon-case-visual { border-right: 1px solid var(--border); min-height: 320px; } .chameleon-carousel-slide .chameleon-case-info { padding: 46px 44px; } .chameleon-carousel-nav { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 24px; } .chameleon-carousel-arrow { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--cyan); background: transparent; color: var(--cyan); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .chameleon-carousel-dots { display: flex; gap: 10px; } .chameleon-carousel-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border); border: none; cursor: pointer; padding: 0; } .chameleon-carousel-dot.is-active { background: var(--lime); } @media (max-width: 900px) { .chameleon-carousel-slide { grid-template-columns: 1fr; } .chameleon-carousel-slide .chameleon-case-visual { border-right: none; border-bottom: 1px solid var(--border); min-height: 200px; } } /* ---------- Apercu navigateur (carousel) ---------- */ .chameleon-preview.chameleon-case-visual { background: linear-gradient(135deg, var(--bg-secondary), var(--bg-main)); display: flex; align-items: center; justify-content: center; padding: 40px 36px; } .chameleon-browser { width: 100%; max-width: 460px; border-radius: var(--radius); overflow: hidden; background: var(--card); border: 1px solid var(--border); box-shadow: 0 24px 60px -18px rgba(0,0,0,0.6); } .chameleon-browser-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: #0a1c2c; border-bottom: 1px solid var(--border); } .chameleon-browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--border); display: inline-block; } .chameleon-browser-bar i:nth-child(1) { background: #FF5F57; } .chameleon-browser-bar i:nth-child(2) { background: #FEBC2E; } .chameleon-browser-bar i:nth-child(3) { background: #28C840; } .chameleon-browser-bar em { margin-left: 10px; font-style: normal; font-size: 12px; color: var(--text-muted); font-family: var(--font-body); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* Apercus du portfolio — version unique. 19 aout 2026 (Lot 6). Le balisage est passe d'un a fond CSS a une vraie , dans le contenu des pages 6 (FR) et 83 (EN) : les 156 228 o des deux apercus quittent la fenetre critique. Les proprietes de fond n'ont donc plus d'objet. L'ancienne regle :hover (background-position top center -> bottom center, 3,5 s) a ete supprimee et NON transposee en object-position, parce qu'elle etait mesurablement sans effet : boite reelle 457,639 x 285,562 (ratio 0,62399) contre une image 1200 x 749 (ratio 0,62417), soit 0,082 px de debordement vertical disponible a 768 et 1440 px, et 0,064 px a 390 px. object-fit et object-position transposent a l'identique background-size: cover et background-position: top center, et protegent le cadrage si le ratio changeait. Rollback : retablir les deux regles d'origine ET le a style inline. */ .chameleon-browser-shot { display: block; width: 100%; aspect-ratio: 1200 / 749; object-fit: cover; object-position: top center; } @media (max-width: 900px) { .chameleon-preview.chameleon-case-visual { padding: 26px 22px; min-height: auto; } } /* ---------- Reassurance icones + descriptions ---------- */ .chameleon-reassurance-item svg { width: 40px; height: 40px; color: var(--cyan); margin-bottom: 16px; } .chameleon-reassurance-item span { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; margin-bottom: 8px; } .chameleon-reassurance-item p { color: var(--text-muted); font-size: 0.92rem; margin: 0; } /* ---------- Formulaire devis (messages + honeypot) ---------- */ .cds-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .cds-msg { border-radius: 12px; padding: 16px 18px; margin-bottom: 18px; font-size: 0.95rem; line-height: 1.5; } .cds-msg.is-ok { background: rgba(168,230,29,0.12); border: 1px solid var(--lime); color: var(--text); } .cds-msg.is-err { background: rgba(239,59,45,0.12); border: 1px solid var(--coral); color: var(--text); } /* ===================== PREMIUM POLISH ===================== */ /* Bug navigation "Realisations" : scroll-behavior smooth retire au profit de auto. Les cinq feuilles de style sont chargees en asynchrone par LiteSpeed (rel=preload as=style puis onload rel=stylesheet). Au moment ou le navigateur execute le saut d ancre d une URL de type /#realisations, seul le CSS critique inline est applique : le document mesure alors 25 949 px au lieu de 6 760 px et #realisations se situe a 13 353 px au lieu de 2 554 px. Avec scroll-behavior smooth ce saut est anime : le CSS arrive pendant l animation, le document se replie, la position est ecretee en bas de page et l internaute atterrit sur la section contact. En auto, le saut est instantane et le navigateur le rejoue a chaque reflow jusqu au load, ce qui corrige de lui-meme la position. La regle prefers-reduced-motion plus bas devient redondante mais reste sans effet de bord. */ html { scroll-behavior: auto; } /* Reveal au defilement (ne masque que si le JS est pret) */ .cds-reveal-ready .cds-reveal { opacity: 0; transform: translateY(26px); will-change: opacity, transform; } .cds-reveal-ready .cds-reveal.is-visible { opacity: 1; transform: none; transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1); } /* En-tete condense + ombre au scroll */ #masthead, .site-header { transition: box-shadow 0.3s ease, background 0.3s ease; } .inside-header { transition: padding 0.3s ease; } body.cds-scrolled #masthead, body.cds-scrolled .site-header { box-shadow: 0 12px 34px -14px rgba(0,0,0,0.65); background: rgba(3,20,38,0.94) !important; } body.cds-scrolled .inside-header { padding-top: 6px !important; padding-bottom: 6px !important; } /* Boutons : halo affine */ .chameleon-btn.is-primary:hover { box-shadow: 0 16px 42px -8px rgba(168,230,29,0.65); } .main-navigation ul.menu > li:last-child > a { transition: transform 0.2s ease, box-shadow 0.2s ease; display: inline-block; } .main-navigation ul.menu > li:last-child > a:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -8px rgba(168,230,29,0.55); } /* Cartes services : relief + halo + icone */ .chameleon-service-card { transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease, background 0.28s ease; } .chameleon-service-card:hover { transform: translateY(-6px); border-color: rgba(0,201,200,0.55); box-shadow: 0 26px 55px -24px rgba(0,201,200,0.35); background: #0a2942; } .chameleon-service-card svg { transition: transform 0.3s ease; } .chameleon-service-card:hover svg { transform: scale(1.12) rotate(-3deg); } /* Reassurance : survol icones */ .chameleon-reassurance-item { transition: transform 0.28s ease; } .chameleon-reassurance-item:hover { transform: translateY(-4px); } .chameleon-reassurance-item svg { transition: transform 0.3s ease; } .chameleon-reassurance-item:hover svg { transform: translateY(-3px) scale(1.1); } /* Etapes methode : survol numero */ .chameleon-step-num { transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease; } .chameleon-step:hover .chameleon-step-num { transform: translateY(-4px); background: var(--cyan); color: var(--bg-main); box-shadow: 0 12px 30px -10px rgba(0,201,200,0.5); } /* Carousel : fleches remplies au survol */ .chameleon-carousel-arrow { transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; } .chameleon-carousel-arrow:hover { background: var(--cyan); color: var(--bg-main); transform: scale(1.08); } /* Champs formulaire : focus */ .chameleon-form input:focus, .chameleon-form select:focus, .chameleon-form textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,201,200,0.15); } /* Case RGPD : la coche suit la marque au lieu du bleu systeme */ .chameleon-form input[type="checkbox"] { accent-color: var(--cyan); } /* Selects : meme traitement que les autres champs. La fleche est un SVG inline (data-URI), donc aucune requete supplementaire. appearance:none ne retire aucune fonctionnalite clavier : Espace / Entree / fleches restent operants. */ .chameleon-form select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23B9C6D2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px; } .chameleon-form select:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2300C9C8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Accents decoratifs (carres du kit) */ .chameleon-section { overflow: hidden; } .chameleon-section.is-secondary::before { content:''; position:absolute; top:44px; right:48px; width:12px; height:12px; border-radius:2px; background:var(--orange); box-shadow: 24px 12px 0 var(--lime), 46px -8px 0 var(--cyan), 12px 34px 0 var(--coral); opacity:0.55; transform: rotate(8deg); pointer-events:none; } .chameleon-contact::after { content:''; position:absolute; left:-6px; bottom:10px; width:10px; height:10px; border-radius:2px; background:var(--cyan); box-shadow: 20px 16px 0 var(--orange), -4px 34px 0 var(--lime); opacity:0.5; pointer-events:none; } .chameleon-contact { position: relative; } /* Respect des preferences de mouvement */ @media (prefers-reduced-motion: reduce) { .cds-reveal-ready .cds-reveal { opacity:1 !important; transform:none !important; } html { scroll-behavior: auto; } } /* ===== HERO — fond constellation (comme la maquette) ===== */ .chameleon-hero-decor-points, .chameleon-hero-decor-wave { display: none !important; } .chameleon-hero { background: radial-gradient(130% 110% at 72% 32%, #06243d 0%, #04182b 48%, #031426 100%) !important; } .chameleon-hero::before { content: ''; display: none; position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.82; z-index: 1; pointer-events: none; } /* 25 aout 2026, lots F5 et F5.1 : le raster constellation n existe qu en bureau. Mesure en trace Chrome (400 px, CPU x4, Slow 4G, cache desactive) : ce calque faisait tomber l Element Render Delay du hero de 1016-1115 ms a 37 ms une fois retire. C est un heritage du hero d avant la refonte, pose AU-DESSUS du nouveau systeme (z-index 1 contre 0 pour .hero-bg), en plein ecran et a 82 % d opacite. Comparaison visuelle a 390 px : hors quelques points tres faibles, le hero est inchange — la photo, le degrade, le camelon et les arcs portent deja la scene. F5.1 : la regle de base ci-dessus ne declare plus background-image du tout, et le calque y est en display:none. Le raster n est introduit qu ici. Declarer l URL dans la regle commune suffisait a la faire demander sur mobile, meme avec le calque masque et le preload correctement limite a (min-width: 901px). Un seul point de declaration, aucune propriete dupliquee, aucun bloc max-width. Le media DOIT rester synchronise avec celui du preload emis par cds_lcp_preload dans functions.php. Rollback : remettre background-image dans la regle de base et retirer ce bloc. */ @media (min-width: 901px) { .chameleon-hero::before { display: block; background-image: url('https://chameleondigitalstudio.com/wp-content/uploads/2026/07/hero-constellation.webp'); } } .chameleon-hero .chameleon-wrap { position: relative; z-index: 2; } /* ===== FOOTER premium (4 colonnes + marque) ===== */ .chameleon-footer-top { grid-template-columns: 1.7fr 1fr 1.2fr 1.2fr 1.25fr !important; gap: 34px; align-items: start; } .chameleon-footer-logo { height: 42px; width: auto; display: block; margin-bottom: 16px; } .chameleon-footer-brand p { max-width: 34ch; color: var(--text-muted); } .chameleon-footer-contact { font-size: 0.9rem; line-height: 1.9; color: var(--text-muted); } .chameleon-footer-contact a { color: var(--text-muted); text-decoration: none; } .chameleon-footer-contact a:hover { color: var(--cyan); } @media (max-width: 900px) { .chameleon-footer-top { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 600px) { .chameleon-footer-top { grid-template-columns: 1fr !important; } } /* ===== MENU premium (soulignement anime) ===== */ .main-navigation ul.menu > li > a { position: relative; } .main-navigation ul.menu > li:not(:last-child) > a::after { content: ''; position: absolute; left: 18px; right: 18px; bottom: 12px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--cyan), var(--lime)); transform: scaleX(0); transform-origin: left center; transition: transform 0.3s cubic-bezier(.2,.7,.2,1); } .main-navigation ul.menu > li:not(:last-child) > a:hover::after { transform: scaleX(1); } /* ===== FOOTER premium finitions ===== */ .chameleon-footer-top { grid-template-columns: 1.9fr 1.1fr 1.3fr 1.3fr !important; } .chameleon-footer-top h4 { text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.82rem; position: relative; padding-bottom: 12px; margin-bottom: 16px; } .chameleon-footer-top h4::after { content: ''; position: absolute; left: 0; bottom: 0; width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--cyan), var(--lime)); } .chameleon-footer-top li a { position: relative; transition: color 0.2s ease, padding-left 0.25s ease; } .chameleon-footer-top li a:hover { color: var(--cyan); padding-left: 6px; } .chameleon-footer-squares { margin-top: 22px; width: 12px; height: 12px; border-radius: 2px; background: var(--orange); box-shadow: 20px 0 0 var(--lime), 40px -6px 0 var(--cyan), 14px 20px 0 var(--coral); opacity: 0.7; } @media (max-width: 900px) { .chameleon-footer-top { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 600px) { .chameleon-footer-top { grid-template-columns: 1fr !important; } } /* ===== FAQ (accordéon) ===== */ .chameleon-faq { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; } .chameleon-faq-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color 0.25s ease, box-shadow 0.25s ease; } .chameleon-faq-item[open] { border-color: rgba(0,201,200,0.45); box-shadow: 0 18px 40px -24px rgba(0,201,200,0.3); } .chameleon-faq-item summary { list-style: none; cursor: pointer; padding: 22px 26px; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--text); display: flex; align-items: center; justify-content: space-between; gap: 16px; } .chameleon-faq-item summary::-webkit-details-marker { display: none; } .chameleon-faq-item summary:hover { color: var(--cyan); } .chameleon-faq-icon { flex-shrink: 0; width: 22px; height: 22px; position: relative; } .chameleon-faq-icon::before, .chameleon-faq-icon::after { content: ''; position: absolute; background: var(--cyan); border-radius: 2px; transition: transform 0.25s ease, opacity 0.25s ease; } .chameleon-faq-icon::before { top: 10px; left: 3px; right: 3px; height: 2px; } .chameleon-faq-icon::after { left: 10px; top: 3px; bottom: 3px; width: 2px; } .chameleon-faq-item[open] .chameleon-faq-icon::after { transform: scaleY(0); opacity: 0; } .chameleon-faq-answer { padding: 0 26px 24px; color: var(--text-muted); } .chameleon-faq-answer p { margin: 0; line-height: 1.7; font-size: 1rem; } /* ===== Pages légales / contenu ===== */ .chameleon-legal-wrap { max-width: 820px; } /* Lot 9J-D : courbe fluide unique du H1 de contenu. L ancienne valeur clamp(2rem, 4vw, 2.8rem) atteignait son minimum des 800 px : le H1 restait fige a 32 px de 800 px jusqu au mobile, alors que le H2 continuait de descendre en douceur. A 768 px le rapport tombait a 1,07 et la hierarchie disparaissait. La pente est recalculee pour passer par 35,5 px a 768 px sans deplacer ni 1024 px (40,96) ni 1440 px (44,8), inchanges au pixel pres. Une seule regle canonique, aucun correctif par breakpoint. */ .chameleon-legal h1 { font-size: clamp(2rem, 1.195rem + 2.133vw, 2.8rem); margin: 0 0 28px; } .chameleon-legal h2 { font-size: 1.3rem; margin: 38px 0 12px; color: var(--text); } .chameleon-legal p { color: var(--text-muted); line-height: 1.75; margin: 0 0 10px; } .chameleon-legal a { color: var(--cyan); } /* Lot 9D3 : le CTA lime doit rester lisible dans les sections legal. .chameleon-legal a (0,1,1) ecrasait la couleur de .cds-cta (0,1,0) : texte cyan sur fond lime, contraste 1,37:1. Bleu nuit de la charte : 12,37:1. */ .chameleon-legal a.cds-cta { color: var(--bg-main); } .chameleon-legal strong { color: var(--text); } /* ===== Page 404 ===== */ .chameleon-404 { text-align: center; padding: 130px 0 110px; } .chameleon-404 .chameleon-eyebrow { justify-content: center; } .chameleon-404 h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin: 0 0 18px; } .chameleon-404 p { color: var(--text-muted); max-width: 48ch; margin: 0 auto 34px; font-size: 1.05rem; } .chameleon-404-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } /* ===== Footer 2026 (badge + mot-signature) ===== */ .chameleon-footer { position: relative; overflow: hidden; padding-bottom: 0; } .chameleon-footer-lead { display: grid; grid-template-columns: 1.35fr 1fr; gap: 50px; align-items: start; } .chameleon-availability { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 0.8rem; font-weight: 600; color: var(--text); background: rgba(168,230,29,0.08); border: 1px solid rgba(168,230,29,0.32); padding: 7px 15px; border-radius: 999px; margin-bottom: 22px; } .chameleon-availability i { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); animation: cdsPulse 2.2s infinite; } @keyframes cdsPulse { 0%{box-shadow:0 0 0 0 rgba(168,230,29,0.5);} 70%{box-shadow:0 0 0 8px rgba(168,230,29,0);} 100%{box-shadow:0 0 0 0 rgba(168,230,29,0);} } .chameleon-footer-nav { display: grid; grid-template-columns: 1fr 1.35fr; gap: 40px; } .chameleon-footer h3 { text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.82rem; position: relative; padding-bottom: 12px; margin-bottom: 16px; } .chameleon-footer h3::after { content:''; position:absolute; left:0; bottom:0; width:26px; height:2px; border-radius:2px; background: linear-gradient(90deg, var(--cyan), var(--lime)); } .chameleon-footer-nav li a { position: relative; transition: color 0.2s ease, padding-left 0.25s ease; } .chameleon-footer-nav li a:hover { color: var(--cyan); padding-left: 6px; } .chameleon-footer-wordmark { position: relative; text-align: center; line-height: 0.7; margin-top: 24px; pointer-events: none; user-select: none; } .chameleon-footer-wordmark::before { content:''; position:absolute; left:50%; bottom:12%; width:70%; height:70%; transform:translateX(-50%); background: radial-gradient(ellipse at center, rgba(0,201,200,0.16), rgba(168,230,29,0.06) 45%, transparent 70%); filter: blur(30px); z-index:0; } .chameleon-footer-wordmark span { position: relative; z-index:1; display: inline-block; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.035em; font-size: clamp(4.5rem, 21vw, 18rem); white-space: nowrap; background: linear-gradient(180deg, rgba(0,201,200,0.22), rgba(168,230,29,0.10) 45%, rgba(255,255,255,0.02)); -webkit-background-clip: text; background-clip: text; color: transparent; transform: translateY(24%); } @media (max-width: 900px) { .chameleon-footer-lead { grid-template-columns: 1fr; gap: 34px; } .chameleon-footer-nav { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .chameleon-footer-nav { grid-template-columns: 1fr; } } /* Footer nav — retrait puces + liens propres */ .chameleon-footer-nav ul { list-style: none; margin: 0; padding: 0; } .chameleon-footer-nav li { margin-bottom: 9px; } .chameleon-footer-nav li a { color: var(--text-muted); text-decoration: none; } .chameleon-footer-nav li a:hover { color: var(--cyan); } /* ===================== Touches 2026 ===================== */ /* Monospace pour libellés / métadonnées (contraste éditorial) */ .chameleon-eyebrow, .chameleon-footer h3, .chameleon-availability, .chameleon-browser-bar em, .chameleon-service-card a, .chameleon-case-link, .chameleon-footer-bottom { font-family: 'Space Mono', monospace; } .chameleon-eyebrow { letter-spacing: 0.10em; } .chameleon-availability { letter-spacing: 0.01em; } .chameleon-footer h3 { letter-spacing: 0.06em; } /* Grain subtil premium */ body::after { content: ''; position: fixed; inset: 0; z-index: 9998; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27140%27%20height%3D%27140%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.9%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%2F%3E%3C%2Fsvg%3E"); background-size: 140px 140px; opacity: 0.05; mix-blend-mode: overlay; } /* Bandeau cinétique (marquee) */ .chameleon-marquee { overflow: hidden; background: var(--bg-secondary); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 18px 0; } .chameleon-marquee-track { display: flex; width: max-content; animation: cdsMarquee 30s linear infinite; } .chameleon-marquee-track span { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.05rem, 1.9vw, 1.55rem); color: var(--text); white-space: nowrap; padding: 0 26px; display: inline-flex; align-items: center; } .chameleon-marquee-track span.sep { color: var(--cyan); padding: 0 2px; } .chameleon-marquee:hover .chameleon-marquee-track { animation-play-state: paused; } @keyframes cdsMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .chameleon-marquee-track { animation: none; } } /* ===== CTA en-tete affine (plus compact) ===== */ .main-navigation ul.menu > li:last-child > a { padding: 6px 15px !important; font-size: 0.8rem !important; font-weight: 600 !important; line-height: 1.2 !important; align-self: center; } /* Footer wordmark fix haut (haut visible, bas qui deborde) */ .chameleon-footer-wordmark { font-size: clamp(4.5rem, 21vw, 18rem) !important; line-height: 1 !important; height: 0.74em !important; overflow: hidden !important; margin-top: 18px !important; } .chameleon-footer-wordmark span { font-size: inherit !important; transform: none !important; } .chameleon-footer-wordmark::before { bottom: 0 !important; height: 130% !important; } /* wordmark entier (mot complet visible) */ .chameleon-footer-wordmark { height: auto !important; overflow: visible !important; line-height: 0.82 !important; margin-top: 14px !important; } .chameleon-footer { padding-bottom: 28px !important; } /* Footer — legal en bas (comme les meilleurs sites) */ .chameleon-footer-lead { grid-template-columns: 1.5fr 1fr !important; } .chameleon-footer-nav { grid-template-columns: 1fr !important; } .chameleon-footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; } .chameleon-footer-legal a { color: var(--text-muted); text-decoration: none; position: relative; } .chameleon-footer-legal a:hover { color: var(--cyan); } .chameleon-footer-legal a::before { content: '·'; position: absolute; left: -12px; color: var(--text-muted); opacity: 0.5; } @media (max-width: 700px){ .chameleon-footer-legal a::before { display: none; } } /* Footer nav 2 colonnes equilibre */ .chameleon-footer-lead { grid-template-columns: 1.4fr 1.3fr !important; gap: 48px !important; } .chameleon-footer-nav { grid-template-columns: 1fr 1fr !important; gap: 30px !important; } @media (max-width: 900px){ .chameleon-footer-lead { grid-template-columns: 1fr !important; } .chameleon-footer-nav { grid-template-columns: 1fr 1fr !important; } } /* --- /* --- Micro-lot CTA final : l'ancien bloc mobile de repositionnement du fond mascotte est retire. La mascotte n'est plus un background du conteneur mais un element de la composition flex (.chameleon-next-project::after), donc ces surcharges !important n'avaient plus d'objet. --- */ /* --- A11y : agrandir les zones tactiles (cds-a11y-touch) --- */ .chameleon-footer-legal a{display:inline-block;padding:6px 3px;} .chameleon-carousel-dot{position:relative;} .chameleon-carousel-dot::after{content:'';position:absolute;inset:-9px;border-radius:50%;} /* ===== Pages Services & Études de cas (cds-svc-page / cds-case) ===== */ .chameleon-legal .cds-lead{color:var(--muted);font-size:1.08rem;max-width:65ch;margin:-.2em 0 1.4em} .cds-grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:18px 0 22px} .cds-block{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px} .cds-block h3{font-family:var(--font-display);font-size:1rem;margin:0 0 8px;color:#fff} .cds-block p,.cds-block ul{margin:0;color:var(--text-muted);font-size:.95rem} .cds-block ul{list-style:none;padding:0} .cds-block ul li{position:relative;padding:4px 0 4px 22px} .cds-block ul li::before{content:"→";position:absolute;left:0;color:var(--cyan);font-family:"Space Mono",monospace} .cds-steps{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0 24px} .cds-step{flex:1;min-width:150px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:14px;padding:15px 17px} .cds-step .n{font-family:"Space Mono",monospace;color:var(--lime);font-size:.8rem} .cds-step b{display:block;font-family:var(--font-display);margin:5px 0 3px;color:#fff} .cds-step span{color:var(--text-muted);font-size:.9rem} /* Lot 9D3 : timeline verticale sur mobile, une etape par ligne. */ @media (max-width: 700px){ .cds-steps .cds-step{ flex: 1 0 100%; } } /* Lot 9D3 : trois etapes par ligne sur grand ecran, pour une timeline reguliere. */ @media (min-width: 701px){ .cds-steps .cds-step{ flex: 1 1 30%; } } .cds-tags{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 18px} .cds-tag{font-family:"Space Mono",monospace;font-size:.68rem;letter-spacing:.05em;color:var(--cyan);border:1px solid var(--border);border-radius:999px;padding:4px 12px} .cds-cta{display:inline-flex;align-items:center;gap:10px;margin-top:6px;background:var(--lime);color:var(--bg-main);font-family:var(--font-display);font-weight:700;font-size:14px;line-height:1.5;letter-spacing:.03em;text-decoration:none;padding:16px 30px;border-radius:999px;box-shadow:0 10px 30px -8px rgba(168,230,29,.5)} .cds-cta:hover{filter:brightness(1.06)} .cds-note{font-size:.9rem;color:var(--text-muted)} .cds-case-img{width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--border);display:block;margin:0 0 22px;background:var(--card)} /* --- Micro-lot espacements portfolio : rythme vertical des etudes de cas --- Audit : trois enchainements avaient une gouttiere de 0 px, parce que le conteneur qui precede n a pas de marge basse (.chameleon-commits, .cds-block, .cds-swatches) et que l element suivant n a pas de marge haute. Tous les autres intervalles de ces pages sont deja sur une echelle reguliere : 10 / 12 / 18 / 22 / 38 px. Les valeurs ci-dessous reprennent cette echelle, aucune valeur nouvelle n est introduite. Regles d adjacence volontairement, pour ne viser que la relation defectueuse : .cds-block place dans .cds-grid2 n est jamais suivi d une image ni d un paragraphe, ces regles n ont donc aucun effet sur les grilles a deux colonnes. */ .chameleon-commits + .cds-case-img{margin-top:18px} .cds-block + .cds-case-img, .cds-block + p, .cds-swatches + p{margin-top:22px} /* Lot 9F2C : deux .cds-block consecutifs dans le corps de page (bloc + callout). Selecteur d enfant direct de .chameleon-legal-wrap, pour ne jamais toucher les .cds-block places dans .cds-grid2, qui sont des elements de grille. */ .chameleon-legal-wrap > .cds-block + .cds-block{margin-top:22px} .chameleon-legal .cds-back{font-family:"Space Mono",monospace;font-size:.8rem;color:var(--cyan);text-decoration:none} @media(max-width:640px){.cds-grid2{grid-template-columns:1fr}} /* ===== Fix bande blanche + effets premium (cds-fullbleed-fix) ===== */ .inside-article:has(.chameleon-section){background:transparent !important;padding:0 !important;box-shadow:none !important;border:0 !important} .site-main:has(.chameleon-section){margin-top:0 !important} .entry-content:has(.chameleon-section){margin-top:0 !important;margin-bottom:0 !important} .content-area:has(.chameleon-section),.site-content:has(.chameleon-section){background:transparent} /* Effet premium : lueur douce en haut de section + entrée */ .chameleon-section.is-main{position:relative;overflow:hidden} .chameleon-section.is-main::after{content:"";position:absolute;top:0;left:0;right:0;height:420px;background:radial-gradient(120% 90% at 82% -20%, rgba(0,201,200,.12), transparent 60%);pointer-events:none;z-index:0} .chameleon-legal-wrap{position:relative;z-index:1} .chameleon-legal h1{animation:cdsFadeUp .6s ease both} .chameleon-legal .cds-lead,.chameleon-legal .cds-tags{animation:cdsFadeUp .6s ease .08s both} @keyframes cdsFadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} /* Survols premium */ .cds-block,.cds-step{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease} .cds-block:hover,.cds-step:hover{transform:translateY(-4px);border-color:rgba(0,201,200,.55);box-shadow:0 12px 32px rgba(0,0,0,.28)} .cds-case-img{transition:transform .45s ease,box-shadow .45s ease;will-change:transform} .cds-case-img:hover{transform:scale(1.015);box-shadow:0 16px 44px rgba(0,0,0,.35)} .cds-cta{transition:transform .2s ease,box-shadow .2s ease} .cds-cta:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(168,230,29,.4)} .cds-tag{transition:border-color .2s ease,color .2s ease} .cds-tag:hover{border-color:var(--cyan)} /* cds-en-title-fix : masque le titre de page en double sur les pages traduites EN */ .page-id-83 .entry-header{display:none!important} /* cds-lang-switcher-premium : selecteur de langue compact type premium (toggle FR/EN) */ .main-navigation .lang-item{margin:0!important} .main-navigation li.lang-item-fr{margin-left:16px!important} .main-navigation .lang-item a{display:inline-block!important;padding:5px 11px!important;font-size:0!important;line-height:1.55!important;color:var(--text-bright)!important;border:1px solid rgba(255,255,255,.24)!important;background:transparent!important;transition:background .2s,color .2s!important} .main-navigation .lang-item a::before{font-size:12.5px;font-weight:700;letter-spacing:.05em} .main-navigation .lang-item-fr a::before{content:"FR"} .main-navigation .lang-item-en a::before{content:"EN"} .main-navigation li.lang-item-fr a{border-radius:7px 0 0 7px!important;border-right-width:0!important} .main-navigation li.lang-item-en a{border-radius:0 7px 7px 0!important} .main-navigation li.lang-item.current-lang a{background:#00C9C8!important;color:var(--bg-main)!important;border-color:#00C9C8!important} .main-navigation li.lang-item:not(.current-lang) a:hover{background:rgba(255,255,255,.10)!important;color:#fff!important} /* cds-lang-fix2 : force le masquage du texte sur la langue active + taille du code */ .main-navigation li.lang-item.current-lang a, .main-navigation li.lang-item.current-menu-item a{font-size:0!important} .main-navigation .lang-item a::before{font-size:12.5px!important;display:inline-block;line-height:1.55} /* cds-lang-fix3 : specificite ID pour battre le theme */ #site-navigation .lang-item{margin:0!important} #site-navigation li.lang-item-fr{margin-left:16px!important} #site-navigation .lang-item a{display:inline-block!important;padding:5px 11px!important;font-size:0!important;line-height:1.55!important;color:var(--text-bright)!important;border:1px solid rgba(255,255,255,.24)!important;background:transparent!important} #site-navigation .lang-item a::before{font-size:12.5px!important;font-weight:700;letter-spacing:.05em} #site-navigation .lang-item-fr a::before{content:"FR"} #site-navigation .lang-item-en a::before{content:"EN"} #site-navigation li.lang-item-fr a{border-radius:7px 0 0 7px!important;border-right-width:0!important} #site-navigation li.lang-item-en a{border-radius:0 7px 7px 0!important} #site-navigation li.lang-item.current-lang a{background:#00C9C8!important;color:var(--bg-main)!important;border-color:#00C9C8!important;font-size:0!important} #site-navigation li.lang-item:not(.current-lang) a:hover{background:rgba(255,255,255,.10)!important;color:#fff!important} /* cds-preview-tag : libelle d'apercu neutre (remplace la fausse barre de navigateur) */ .chameleon-browser-tag{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-soft);padding:9px 14px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.08)} /* cds-mobile-fixes : hamburger visible + selecteur FR/EN cote a cote sur mobile */ .main-navigation .menu-toggle,.main-navigation .menu-toggle span,.main-navigation .menu-toggle .gp-icon,.main-navigation .menu-toggle svg{color:var(--text-bright)!important;fill:var(--text-bright)!important} .main-navigation .menu-toggle{font-size:22px!important} .main-navigation .menu-toggle,.main-navigation .menu-toggle .mobile-menu,.main-navigation .menu-toggle .screen-reader-text{font-family:var(--font-display);font-weight:700;letter-spacing:.03em} .main-navigation .menu-toggle:hover,.main-navigation .menu-toggle:hover span,.main-navigation .menu-toggle:hover .gp-icon{color:#00C9C8!important;fill:#00C9C8!important} @media (max-width:768px){ #site-navigation .main-nav ul li.lang-item{display:inline-block!important;width:auto!important;vertical-align:middle} #site-navigation .main-nav ul li.lang-item-fr{margin-left:16px!important} #site-navigation .main-nav ul li.lang-item a{padding:6px 12px!important} } /* cds-back-link : lien retour en haut des etudes de cas */ .cds-back{display:block;width:-moz-fit-content;width:fit-content;margin:0 0 22px;color:var(--text-soft);font-size:.92rem;font-weight:600;letter-spacing:.02em;text-decoration:none;transition:color .2s,transform .2s} .cds-back:hover{color:#00C9C8;transform:translateX(-3px)} /* cds-tap-targets : cibles tactiles 24px pour les pastilles du carrousel (WCAG 2.5.8) */ .chameleon-carousel-dot{width:24px!important;height:24px!important;min-width:24px;padding:0!important;background:transparent!important;border:none!important;box-shadow:none!important;position:relative;margin:0 3px!important;cursor:pointer;display:inline-flex;align-items:center;justify-content:center} .chameleon-carousel-dot::after{content:none!important} .chameleon-carousel-dot::before{content:""!important;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.35);transition:background .2s,transform .2s} .chameleon-carousel-dot.is-active::before{background:#A8E61D;transform:translate(-50%,-50%) scale(1.15)} .chameleon-carousel-dot:hover::before{background:rgba(255,255,255,.6)} /* cds-back-sticky : lien retour collant sur etudes de cas */ .cds-back{position:sticky;top:14px;z-index:30;display:inline-flex;align-items:center;gap:6px;background:rgba(6,20,38,.72);border:1px solid rgba(255,255,255,.14);padding:8px 15px;border-radius:999px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 6px 18px rgba(0,0,0,.25)} .cds-back:hover{color:#A8E61D;border-color:rgba(168,230,29,.5);transform:translateX(-3px)} /* cds-back-float : bouton retour flottant, toujours visible sur etudes de cas */ .cds-back{position:fixed!important;left:22px;bottom:26px;top:auto!important;margin:0!important;z-index:60;background:rgba(6,20,38,.85)} @media(max-width:600px){.cds-back{left:14px;bottom:16px;padding:8px 13px!important;font-size:.85rem}} /* cds-hp-a11y : honeypot en display:none pour un arbre d'accessibilite bien forme (agents IA) */ .cds-hp{display:none!important} /* === Correction (cds) : caler le wordmark "Chameleon" sur la largeur des blocs du footer === */ /* cds-footer-wordmark-fit : le conteneur devient une unite de reference (cqi) ; le mot occupe ~100% de sa largeur a tous les ecrans, comme les autres colonnes. */ .chameleon-footer-wordmark { container-type: inline-size; overflow: hidden; } .chameleon-footer-wordmark span { font-size: 17.2cqi !important; line-height: 0.82 !important; } /* === cds-social : liens reseaux sociaux du footer (Instagram / Facebook) === */ .chameleon-social { display: flex; align-items: center; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; } .chameleon-social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: var(--text-muted); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); text-decoration: none !important; transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease; } .chameleon-social a svg { width: 20px; height: 20px; display: block; fill: currentColor; } .chameleon-social a:hover, .chameleon-social a:focus-visible { color: #fff; background: rgba(0, 201, 200, 0.14); border-color: rgba(0, 201, 200, 0.55); transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3); } .chameleon-social a:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .chameleon-social a { transition: none; } .chameleon-social a:hover, .chameleon-social a:focus-visible { transform: none; } } /* === cds-offers-contact : styles remontes depuis le contenu des pages 6 et 83 (1er aout 2026) === Etaient dupliques dans un