/* ═══════════════════════════════════════════════════════════════════════════════════════════════════ Mouvement façon Payoneer (relevé sur payoneer.com le 11/10/2026) — propriétaire : A. 1. sélecteur de langue 2. scène animée du haut 3. bandeau de logos qui défile 4. section « confiance » + Terre Tout mouvement s'arrête si l'appareil demande « réduire les animations ». ═══════════════════════════════════════════════════════════════════════════════════════════════════ */ /* ── 1. Sélecteur de langue : pastille #f3f2f9 arrondie, drapeau rond 20 px, menu blanc arrondi 16 px ── */ .langue{position:relative;z-index:5;display:inline-flex;flex:none} /* au-dessus du fond de l'en-tête (sinon caché sur téléphone, mesuré le 11/10) */ .langue-bouton{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 14px;border:0;border-radius:100px; background:#f3f5fa;color:#0f1b33;font:inherit;font-size:15px;font-weight:500;cursor:pointer;line-height:1} @media (hover:hover){.langue-bouton:hover{background:#e8edf6}} .langue-bouton img{width:20px;height:20px;display:block;border-radius:50%} .langue-code{display:none} .langue-chevron{transition:transform .2s ease;color:#5a6275} .langue-bouton[aria-expanded="true"] .langue-chevron{transform:rotate(180deg)} .langue-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:60;min-width:200px;margin:0;padding:8px;list-style:none; background:#fff;border-radius:16px;box-shadow:0 0 24px 7px rgba(15,27,51,.10);display:grid;gap:2px} .langue-menu[hidden]{display:none} .langue-option{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border-radius:10px;color:#0f1b33!important; text-decoration:none!important;font-size:15px;font-weight:500} .langue-option img{width:20px;height:20px;border-radius:50%} .langue-option:focus-visible{background:#f3f5fa}@media (hover:hover){.langue-option:hover{background:#f3f5fa}} .langue-option.is-selected{background:#f3f5fa} .langue-coche{margin-left:auto;color:#0f1b33} .wrap-cta-navbar .langue{margin-right:8px} .navbar-mobile > .langue{order:1;margin-left:auto;margin-right:6px} @media (max-width:991px){.langue-nom{display:none}.langue-code{display:inline}.langue-bouton{padding:10px 12px;font-size:14px;font-weight:600}} @media (max-width:991px){.langue-menu{right:-40px}} /* ── 2. Scène du haut : 5 cartes sur une piste, halo coloré qui respire derrière ── */ .scene{position:relative;width:100%;max-width:640px;margin-left:auto;aspect-ratio:640/560} .scene-statique{display:none} .scene-halo{position:absolute;inset:-6% -8%;z-index:0;pointer-events:none; background:radial-gradient(40% 32% at 62% 38%,rgba(57,102,205,.30),transparent 70%), radial-gradient(34% 28% at 40% 70%,rgba(112,76,232,.24),transparent 70%), radial-gradient(30% 26% at 78% 78%,rgba(0,170,200,.12),transparent 70%); filter:blur(18px);animation:halo-respire 9s ease-in-out infinite alternate} .scene-halo::after{content:"";position:absolute;left:8%;right:8%;top:46%;height:22%;border-radius:50%; background:linear-gradient(100deg,transparent,rgba(57,102,205,.34),rgba(112,76,232,.28),transparent);transform:rotate(-16deg);filter:blur(10px)} @keyframes halo-respire{from{transform:translate3d(-2%,1%,0) scale(1)}to{transform:translate3d(2%,-2%,0) scale(1.06)}} .scene-piste{position:absolute;inset:0;z-index:1} @media (min-width:992px){.scene-carte{left:58%}} .scene-carte{position:absolute;left:50%;top:50%;width:290px;height:400px;margin:0;padding:22px 20px 16px;box-sizing:border-box; background:#fff;border:1px solid #e6eaf2;border-radius:16px;box-shadow:8px 5px 18px rgba(15,27,51,.14); display:flex;flex-direction:column;gap:10px; transform:translate(-50%,-50%) scale(.72);opacity:0;visibility:hidden; transition:transform 1.5s cubic-bezier(.45,0,.25,1),opacity 1.5s cubic-bezier(.45,0,.25,1),visibility 0s linear 1.5s} .scene-carte figcaption strong{display:block;font-size:18px;font-weight:600;line-height:1.3;color:#0f1b33} .scene-carte figcaption span{display:block;margin-top:4px;font-size:14px;line-height:1.4;color:#5a6275} .scene-carte img{flex:1;min-height:0;width:100%;object-fit:contain;display:block} .scene-carte.is-active{transform:translate(-50%,-50%) scale(1);opacity:1;visibility:visible;z-index:3; transition:transform 1.5s cubic-bezier(.45,0,.25,1),opacity 1.5s cubic-bezier(.45,0,.25,1)} .scene-carte.is-prev{transform:translate(calc(-50% - 190px),-50%) scale(.72);opacity:.3;visibility:visible;z-index:2; transition:transform 1.5s cubic-bezier(.45,0,.25,1),opacity 1.5s cubic-bezier(.45,0,.25,1)} .scene-carte.is-next{transform:translate(calc(-50% + 205px),-50%) scale(.72);opacity:.3;visibility:visible;z-index:2; transition:transform 1.5s cubic-bezier(.45,0,.25,1),opacity 1.5s cubic-bezier(.45,0,.25,1)} /* les cartes voisines dépassent du cadre comme chez Payoneer : on coupe proprement aux bords de la colonne */ section.hero.home{overflow:hidden} @media (max-width:991px){.scene{max-width:520px;margin:32px auto 0}.scene-carte.is-prev{transform:translate(calc(-50% - 230px),-50%) scale(.72)} .scene-carte.is-next{transform:translate(calc(-50% + 230px),-50%) scale(.72)}} @media (max-width:479px){.scene{aspect-ratio:auto;height:380px}.scene-carte{width:250px;height:345px} .scene-carte.is-prev{transform:translate(calc(-50% - 205px),-50%) scale(.72)}.scene-carte.is-next{transform:translate(calc(-50% + 205px),-50%) scale(.72)}} /* ── 3. Bandeau de logos qui défile en continu (pause au survol), bords fondus ── */ .bandeau-logos{padding:28px 0 36px;border-bottom:1px solid #eef2f7;background:#fff} .bl-titre{margin:0 auto 18px!important;text-align:center;font-size:14px!important;font-weight:600;color:#5a6275!important;letter-spacing:.02em} .bl-fenetre{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)} .bl-rail{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center;width:max-content;margin:0;padding:0;list-style:none;animation:bl-defile 32s linear infinite} .bl-rail li{flex:none;display:flex!important;margin:0!important;align-items:center;justify-content:center;height:44px;padding:0 40px} .bl-rail img{height:30px;width:auto;max-width:150px;display:block} .bandeau-logos:hover .bl-rail{animation-play-state:paused} @keyframes bl-defile{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ── 4. Section sombre « Conçue pour la confiance » : Terre en points + 4 chiffres ── */ .confiance{position:relative;overflow:hidden;background:#0d1426;color:#fff;padding:120px 24px 112px} .confiance-terre{position:absolute;inset:0;width:100%;height:100%;display:block} .confiance-int{position:relative;z-index:1;max-width:1180px;margin:0 auto} .confiance-label{margin:0 0 18px!important;font-size:15px!important;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#9db6ee!important} .confiance-titre{margin:0 0 20px!important;max-width:720px;font-size:52px!important;line-height:1.15!important;font-weight:400!important;color:#fff!important;letter-spacing:-.01em} .confiance-texte{margin:0!important;max-width:600px;font-size:19px!important;line-height:1.6!important;color:#b9c3d6!important} .confiance-chiffres{margin-top:64px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:rgba(9,14,28,.86); border-radius:12px;border-left:1px solid #5b84dc;box-shadow:0 18px 40px rgba(31,74,170,.22);backdrop-filter:blur(2px)} .cc{padding:40px 16px 36px;text-align:center} .cc-nombre{margin:0!important;font-size:76px!important;line-height:1!important;font-weight:300!important;color:#c3d4f5!important;font-variant-numeric:tabular-nums;white-space:nowrap} .cc-unite{font-size:.62em;margin-left:2px} .cc-lib{margin:18px 0 0!important;font-size:17px!important;line-height:1.45!important;color:#eef2f8!important} .cc-lib span{color:#9aa6bd} @media (max-width:991px){.confiance{padding:88px 20px}.confiance-titre{font-size:40px!important}.confiance-chiffres{grid-template-columns:repeat(2,minmax(0,1fr))}.cc-nombre{font-size:60px!important}} @media (max-width:479px){.confiance{padding:72px 16px}.confiance-titre{font-size:32px!important}.confiance-texte{font-size:17px!important} .confiance-chiffres{margin-top:44px}.cc{padding:28px 10px 26px}.cc-nombre{font-size:46px!important}.cc-lib{font-size:15px!important}} /* ── Réduire les animations : tout se fige, la scène montre l'image fixe ── */ @media (prefers-reduced-motion:reduce){ .scene-halo{animation:none} .scene-piste{display:none}.scene-statique{display:block;position:relative;z-index:1;width:100%;height:auto} .bl-rail{animation:none;flex-wrap:wrap;justify-content:center;width:auto}.bl-rail li[aria-hidden]{display:none} .bl-fenetre{-webkit-mask-image:none;mask-image:none} } /* menu des langues : pas de puces héritées des listes du site (vues sur capture le 11/10) */ .langue-menu li{list-style:none!important;margin:0!important;padding:0!important} .langue-menu li::before,.langue-menu li::marker{content:none!important} /* ── Barre du haut : le script repris de fax.plus la remontait de 60 px au défilement (place de leur bandeau, retiré) → elle apparaissait coupée en deux (relevé par Lucas le 11/10). Elle reste entière et collée en haut. ── */ header.branding-navbar{transform:none!important} /* au défilement (ordinateur), un fond blanc légèrement voilé sur toute la largeur derrière la barre : le texte ne passe plus en biseau au-dessus et autour d'elle — comme la barre pleine largeur de Payoneer */ body::before{content:"";position:fixed;left:0;right:0;top:0;height:108px;z-index:2499;pointer-events:none; background:rgba(255,255,255,.98);-webkit-backdrop-filter:saturate(1.4) blur(8px);backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid #e6eaf2;opacity:0;transition:opacity .25s ease} body.defile::before{opacity:1} @media (max-width:991px){body::before{height:74px}} /* ── Survol animé sur tout ce qui se clique (Lucas 11/10 : « dès qu'on passe la souris, il y a des animations ») ── */ @media (hover:hover){ .navbar-desktop .wrap-link-navbar a,.navbar-desktop a.link-navbar,.navbar-desktop .dropdown-toggle,.ct-menu a{position:relative} .navbar-desktop .wrap-link-navbar a::after,.navbar-desktop a.link-navbar::after,.ct-menu a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px; background:#3966cd;transform:scaleX(0);transform-origin:left;transition:transform .22s ease} .navbar-desktop .wrap-link-navbar a:hover::after,.navbar-desktop a.link-navbar:hover::after,.ct-menu a:hover::after{transform:scaleX(1)} .navbar-desktop .wrap-link-navbar a,.navbar-desktop a.link-navbar{transition:color .2s ease} .navbar-desktop .wrap-link-navbar a:hover,.navbar-desktop a.link-navbar:hover{color:#3966cd!important} a.button,.button,.ct-bouton,.cta-btn,.langue-bouton,button.pc-btn,.pc-actions .button{transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,color .2s ease!important} a.button:hover,.ct-bouton:hover,.cta-btn:hover,.pc-actions .button:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(57,102,205,.22)} a.button.secondary:hover,a.button.ghost:hover{box-shadow:0 6px 14px rgba(15,27,51,.10)} a.card,.carte-simple,.carte-petite,.related-card,.af-carte,.scene-carte.is-active,.cc,.me-aide,.carte-contact{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease} a.card:hover,.carte-petite:hover,.related-card:hover,.carte-contact:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(15,27,51,.10)} .ct-pied a,.footer a,.aide-pied-lien{transition:color .2s ease,opacity .2s ease} .ct-pied a:hover{opacity:.8} .paiement-logos img{transition:transform .2s ease}.paiement-logos li:hover img{transform:translateY(-2px)} } @media (prefers-reduced-motion:reduce){a.button:hover,.ct-bouton:hover,a.card:hover,.carte-petite:hover,.related-card:hover{transform:none}body::before{transition:none}} /* ── Rangée « Paiement sécurisé » façon site marchand (cadenas + petits logos fixes) ── */ .paiement-logos{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:18px} .paiement-logos .pl-titre{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:#2b3345} .paiement-logos ul{display:flex!important;flex-wrap:wrap;gap:8px;margin:0!important;padding:0!important;list-style:none!important} .paiement-logos li{margin:0!important;padding:0!important;list-style:none!important} .paiement-logos li::before,.paiement-logos li::marker{content:none!important} .paiement-logos img{display:block;width:44px;height:28px;object-fit:contain;background:#fff;border:1px solid #dfe4ec;border-radius:6px;padding:3px 5px;box-sizing:border-box} .paiement-logos.sur-fonce{margin-top:22px} .paiement-logos.sur-fonce .pl-titre{color:#c6cbd8} .paiement-logos.sur-fonce img{border-color:transparent} section.hero.home .paiement-logos{margin-top:16px} @media (max-width:767px){section.hero.home .paiement-logos{justify-content:center}} /* ── Cartes flottantes (Garanties) et carte « équipe » de la scène : montent et descendent doucement ── */ .bandeau-flottant{position:relative} .carte-flottante,.scene-equipe{position:absolute;z-index:4;display:flex;align-items:center;gap:12px;background:#fff;border-radius:14px;padding:12px 16px; box-shadow:0 1px 2px rgba(15,27,51,.08),0 12px 30px rgba(15,27,51,.14);animation:flotte 4.5s ease-in-out infinite} .carte-flottante b,.scene-equipe b{display:block;font-size:15px;color:#0f1b33;line-height:1.3} .carte-flottante small,.scene-equipe small{display:block;font-size:13px;color:#5a6275;line-height:1.35} .cf-ico{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#0f7a3d;flex:none} .cf-1{left:6%;top:16%} .cf-2{right:6%;bottom:14%;animation-delay:-2.2s} .scene-equipe{left:-2%;bottom:4%;padding:10px 14px 10px 10px;animation-delay:-1.4s} .scene-equipe img{width:48px;height:58px;object-fit:cover;border-radius:10px;display:block} @keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} @media (max-width:767px){.cf-1{left:12px;top:12px}.cf-2{right:12px;bottom:12px}.carte-flottante{padding:9px 12px}.carte-flottante b{font-size:14px} .carte-flottante small{display:none}.scene-equipe{left:8px;bottom:0}} @media (prefers-reduced-motion:reduce){.carte-flottante,.scene-equipe{animation:none}} .paiement-logos ul{flex-direction:row!important;align-items:center} section.hero.home .paiement-logos{max-width:560px} .carte-flottante img{width:30px!important;height:20px!important;max-width:none!important;border-radius:3px;flex:none;object-fit:cover} .carte-flottante{max-width:300px} /* ── Grilles fixes à la place des carrousels (formalités : 12 cartes · formes d'entreprise : 12) ── */ .grille-formalites{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;transform:none!important;width:auto!important} .grille-formalites > .w-dyn-item{width:auto!important;min-width:0!important;margin:0!important;padding:0!important;flex:none!important} .grille-formalites .bg_image,.grille-formalites a.card{height:100%} .grille-formalites a.card{display:flex;flex-direction:column} .grille-formalites .wrap-card-parent-content,.grille-formalites .wrap-card-content{height:100%} .wrap-items-countrie,.col-list-logo,.wrap-relative-logo,.wrap-parent-logo{animation:none!important;transform:none!important} .wrap-relative-logo.second{display:none!important} .wrap-items-countrie{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;overflow:visible!important} .wrap-items-countrie > .w-dyn-item{width:auto!important;margin:0!important;padding:0!important} @media (max-width:991px){.grille-formalites{grid-template-columns:repeat(2,minmax(0,1fr))}.wrap-items-countrie{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:600px){.grille-formalites{grid-template-columns:1fr}.wrap-items-countrie{grid-template-columns:repeat(2,minmax(0,1fr))}} .grille-formalites{width:100%!important;max-width:1100px;margin:0 auto!important} *:has(> .grille-formalites){width:100%!important;max-width:none!important;overflow:visible!important;transform:none!important} .wrap-relative-logo.first,.wrap-relative-logo:not(.second){width:100%!important;max-width:1100px;margin:28px auto 0!important;padding:0 16px;box-sizing:border-box;overflow:visible!important} .wrap-parent-logo,.col-list-logo{width:100%!important;max-width:none!important;margin:0!important;left:auto!important;right:auto!important;position:relative!important;overflow:visible!important} .wrap-items-countrie a.card{height:100%} .slider:has(.grille-formalites){max-width:none!important;width:100%!important;flex:1 1 100%!important} .slider:has(.grille-formalites){margin-left:auto!important;margin-right:auto!important;left:auto!important;transform:none!important} .grille-formalites .opa-56{opacity:.88!important} /* ════ Correctifs de la relecture du 11/10 (33 défauts, audit-adversarial-2026-10-11/RAPPORT.md) ════ */ /* 1 · Garanties : la barre du haut n'est plus poussée hors de l'écran ; le menu de la page se range dessous */ .wrap-nav-main-features{transform:none!important} .sticky-menu-features{top:96px!important} @media (max-width:991px){.sticky-menu-features{top:76px!important}} /* 17 · une seule forme d'en-tête : au défilement, le fond de la barre devient pleine largeur (plus de pilule sur une bande) */ body::before{display:none!important} body.defile header.branding-navbar .background-navbar{position:fixed!important;left:0!important;right:0!important;top:0!important;width:auto!important;height:92px!important; border-radius:0!important;box-shadow:0 1px 0 #e6eaf2,0 6px 18px rgba(15,27,51,.06)!important;background:rgba(255,255,255,.97)!important} @media (max-width:991px){body.defile header.branding-navbar .background-navbar{height:74px!important}} /* 2 · accueil 768-991 : la scène passe sous le texte, sans cartes latérales ni carte « équipe » qui chevauchent */ @media (max-width:991px){.scene-carte.is-prev,.scene-carte.is-next{opacity:0!important;visibility:hidden!important}.scene-equipe{display:none!important}} /* 3 · pied : survol lisible sur fond bleu nuit */ @media (hover:hover){.alohi---main-style-guide--link-footer:hover,.alohi---main-style-guide--links-last-footer:hover,.ct-pied a:hover{color:#fff!important;text-decoration:underline!important;text-underline-offset:3px;opacity:1!important}} /* (relance 18/10 01:25) au doigt, la feuille d'origine (site.css) reprenait la main : lien du pied gris #5a6275 sur fond sombre après un tap → même couleur qu'au repos */ @media (hover:none){.alohi---main-style-guide--link-footer:hover{color:#eef2f7}} /* 4 · pied 768 : logo entier, ligne du bas sur toute la largeur */ .logo-pied{min-width:120px;width:auto!important;max-width:none!important} @media (max-width:991px){.alohi---main-style-guide--col-3-footer{width:100%!important;max-width:none!important} .alohi---main-style-guide--footer-copyright .alohi---main-style-guide--last-item-mobile{width:100%!important;max-width:none!important}} /* 5 · téléphone : la barre collée en bas se cache quand un bouton de la page est à l'écran (mouvement.js) */ .barre-signer.cache{transform:translateY(120%)!important;opacity:0!important;pointer-events:none} /* 9 · survol sur tout ce qui se clique */ @media (hover:hover){ .button-inline-navbar,.ct-connexion,.alohi---main-style-guide--button-inline,.link-blue,.alohi---main-style-guide--link-breadcrumb,.wrap-sitemap a,.breadcrumbs a, .faq-title,.faq-q,.mid-cta-btn,.text-card-popular,.lien-fleche{transition:color .2s ease,background-color .2s ease,opacity .2s ease} .button-inline-navbar:hover,.ct-connexion:hover,.alohi---main-style-guide--button-inline:hover,.wrap-sitemap a:hover,.breadcrumbs a:hover,.alohi---main-style-guide--link-breadcrumb:hover{color:#3966cd!important} .link-blue:hover,.lien-fleche:hover{text-decoration-thickness:2px} .menu-features-items-default,.tab-light-3,.tab-light-blue{transition:background-color .2s ease,color .2s ease} .menu-features-items-default:hover,.tab-light-3:not(.w--current):hover,.tab-light-blue:not(.w--current):hover{background:#f3f5fa!important} .faq-title:hover,.faq-q:hover{color:#3966cd!important} a.card:hover .text-card-popular{text-decoration:underline;text-underline-offset:3px} .logo-navbar,.logo-pied,.ct-logo img{transition:opacity .2s ease}.link-logo-navbar:hover .logo-navbar,.lien-logo-pied:hover .logo-pied,.ct-logo:hover img{opacity:.8} } /* 10 · Tarif : boutons des cartes de prix à la même largeur et alignés */ .fpt-btn{width:auto!important;min-width:0!important;padding:0 28px!important;white-space:nowrap} /* 11 · bouton + lien du bloc « Ce que vous recevez » espacés partout */ .recevez-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px} /* 12 · cartes « Le problème » : contenus alignés en haut, titres sur 2 lignes réservées */ .carte-simple{justify-content:flex-start!important} .carte-simple .dsp-md,.carte-simple h3{min-height:2.7em} /* 13 · en-tête téléphone/tablette aligné sur le contenu */ @media (max-width:991px){.navbar-mobile{padding-left:20px!important;padding-right:20px!important;box-sizing:border-box}} /* 14 · plus de forme d'œuf */ .tab-pane,.wrap-tabs-light,.tabs-menu-light{border-radius:16px!important} /* 15 · vignettes des guides entières */ .col-4-wrap .card-image{aspect-ratio:16/9;height:auto!important;object-fit:contain!important;background:#eef1f6} /* 20 · pictos des cartes de réassurance à taille lisible */ .mcp-usp-check{width:40px!important;height:40px!important} /* 7 · articles : ligne de réassurance du cadre d'appel lisible */ .cta-stats span,.cta-stats{color:#2b3345!important;opacity:1!important} /* 22 · articles liés : 6 cartes au plus (2 rangées pleines) */ .related-card:nth-of-type(n+7),.related-grid > a:nth-child(n+7){display:none!important} /* 26 · plus de mot seul en fin de titre */ h1,h2,h3,.dsp-md,.dsp-lg,.dsp-xl,.card-title{text-wrap:balance} /* langue dans l'en-tête des articles */ .ct-actions .langue{margin-right:4px} /* 17 (suite) · au défilement : une seule barre blanche pleine largeur, la pilule se fond dedans */ body.defile header.branding-navbar::before{content:"";position:fixed;left:0;right:0;top:0;height:108px;z-index:-1;background:#fff; box-shadow:0 1px 0 #e6eaf2,0 6px 18px rgba(15,27,51,.06)} body.defile header.branding-navbar .background-navbar{box-shadow:none!important} @media (max-width:991px){body.defile header.branding-navbar::before{height:75px}} /* 4 (suite) · pied 768 : colonnes en 2 × 2, ligne du bas sur toute la largeur */ @media (max-width:991px){ .alohi---main-style-guide--wrap-links-footer{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px;width:100%!important} .alohi---main-style-guide--wrap-links-footer > *{width:auto!important;max-width:none!important;margin:0!important} .alohi---main-style-guide--footer-copyright .alohi---main-style-guide--col-8{width:100%!important;max-width:none!important;flex:1 1 100%!important} .alohi---main-style-guide--wrap-left-last-footer{flex-wrap:wrap!important;gap:10px 20px!important} .alohi---main-style-guide--wrap-left-last-footer > :first-child{flex:1 1 100%!important;width:100%!important} } /* Garanties téléphone : le menu de la page (6 rubriques sur 2 lignes, coupé) est retiré ; la page se lit d'un trait */ @media (max-width:767px){.sticky-menu-features{display:none!important}} /* la barre a un « will-change » hérité : le fond se cale donc sur la largeur de l'écran à partir de la barre */ body.defile header.branding-navbar::before{left:calc(50% - 50vw)!important;right:auto!important;width:100vw!important;top:-16px!important} @media (max-width:991px){body.defile header.branding-navbar::before{top:0!important}} /* Chapeau sous le titre (ancien 2e grand titre de fax.plus, audit 11/10) : un seul h1 par page, la phrase d'accroche reste en texte */ p.chapo{font-size:21px!important;line-height:1.45!important;font-weight:500!important;color:#0d182e!important;margin:14px 0 10px!important;max-width:34ch;text-wrap:balance} @media (max-width:767px){p.chapo{font-size:18px!important}} /* Garanties, carrousel sombre « Sécurité » : fondu aux deux bords au lieu de cartes coupées net (défaut B4, 11/10) */ /* le masque va sur le conteneur large (flèches + points dedans) : posé sur .slider il rendait les flèches, placées hors de sa boîte, invisibles et incliquables (trouvé par B 11/10) */ .bg-gradient-grey .wrapper-col.center-vertical:has(.slider){-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)} /* Garanties, barre collante des rubriques (tablette) : fond blanc du site au lieu du gris beige hérité */ .sticky-menu-features{background:#fff!important;border-bottom:1px solid #e6e8f0!important} /* Onglets « Sur ordinateur / Sur téléphone » sur téléphone : 2 pilules côte à côte (elles s'empilaient, défaut B4) */ @media (max-width:767px){ .tab-menu-grey.w-tab-menu{display:flex!important;flex-direction:row!important;gap:4px;width:100%!important;max-width:360px;margin-left:auto;margin-right:auto} .tab-menu-grey.w-tab-menu > a{flex:1 1 50%!important;width:auto!important;min-width:0;padding-left:8px!important;padding-right:8px!important;text-align:center;white-space:nowrap;font-size:15px} } /* En-tête des articles et pages légales sur téléphone : « Se connecter » caché comme sur les autres pages (la cible 44 px de finition.css le réaffichait → bouton « Commencer » hors écran de 67 px, verifier-site 11/10) */ @media (max-width:991px){.ct-entete .ct-actions .ct-connexion{display:none!important}} @media (max-width:480px){.ct-entete .ct-actions{gap:8px!important}.ct-entete .ct-bouton{padding:0 16px!important;font-size:14px!important}} /* Pages formalités : liens « À lire aussi » sous les guides (maillage interne, 11/10) */ .liens-utiles{max-width:880px;margin:28px auto 0!important;text-align:center;font-size:16px;line-height:1.7;color:#2b3345} .liens-utiles span{color:#9aa3b2} /* téléphone : les cartes voisines ne montrent qu'un bord qui s'efface, plus de bouts de texte coupés (« nt s », « Us… ») */ /* (le bas du bloc, où se trouve le bouton « Lire la politique… », reste entièrement net : 2e calque plein) */ @media (max-width:767px){.bg-gradient-grey .wrapper-col.center-vertical:has(.slider){-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 4%,#000 17%,#000 83%,transparent 96%,transparent 100%),linear-gradient(#000,#000);mask-image:linear-gradient(90deg,transparent 0,transparent 4%,#000 17%,#000 83%,transparent 96%,transparent 100%),linear-gradient(#000,#000);-webkit-mask-size:100% calc(100% - 90px),100% 90px;mask-size:100% calc(100% - 90px),100% 90px;-webkit-mask-position:top,bottom;mask-position:top,bottom;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}} /* Logo définitif ClairSign (W2, 11/10) : SVG recadré au ras des lettres — hauteur réelle des lettres */ header img[src*="logo-clairsign"], .ct-logo img, .navbar-logo-link img{height:26px!important;width:auto!important} footer img[src*="logo-clairsign-blanc"], .logo-pied{height:28px!important;width:auto!important} .cx-logo img{height:32px!important;width:auto!important} @media (max-width:480px){header img[src*="logo-clairsign"], .ct-logo img{height:22px!important}} /* nom en texte : « Clair » dans la couleur du texte, « Sign » en bleu (clair sur fond sombre) */ .nom-marque .nom-sign{color:#3966cd} footer .nom-marque .nom-sign, .sur-fonce .nom-marque .nom-sign, .ct-pied .nom-marque .nom-sign{color:#6f95ea} /* « © 2026 ClairSign » : le nom reste sur la ligne (les règles flex du pied des articles l'éclataient) */ .ct-bas > span:first-child{display:block!important} .nom-marque, .nom-marque .nom-sign{display:inline!important;margin:0!important;padding:0!important;gap:0!important} /* « Sign » du © sur le pied sombre principal (section, pas