/* Palette figée en clair (blanc + bleu) : pas de variante sombre, c'est un choix de marque assumé. */ :root{ --paper:#F6F9FF; --paper-raised:#FFFFFF; --ink:#131B33; --muted:#57647F; --muted-2:#7C889E; --line:#DCE6F7; --blue:#2C6BDF; --blue-deep:#1E52B8; --blue-tint:#EAF1FE; --teal:#00C6A3; --teal-deep:#0CCDB0; --teal-ink:#04664F; --shadow: 0 1px 2px rgba(19,27,51,.05), 0 16px 40px -12px rgba(19,27,51,.14); --shadow-sm: 0 1px 2px rgba(19,27,51,.06), 0 6px 16px -8px rgba(19,27,51,.12); --radius-lg: 22px; --radius-md: 14px; --radius-sm: 10px; --header-bg: rgba(255,255,255,.88); --header-ink: #131B33; --header-line: rgba(19,27,51,.08); --header-muted: var(--muted); --hero-bg: #2C6BDF; --hero-ink: #FFFFFF; --hero-muted: rgba(255,255,255,.82); --footer-bg:#2C6BDF; --footer-ink:#FFFFFF; --footer-muted:rgba(255,255,255,.72); --footer-line: rgba(255,255,255,.22); --footer-accent:#00C6A3; } *{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;} body{ margin:0; background:var(--paper); color:var(--ink); font-family:'Inter',system-ui,sans-serif; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; } /* Le kit Elementor du site impose line-height:2px (+ color:#000, font-family:Poppins, font-size:14px) sur .elementor-kit-486 (classe posee sur ), avec une specificite qui bat notre reset ci-dessus et casse tout texte sans regle plus specifique (dont TOUS les titres h1-h4 qui s'appuient sur cet heritage). On neutralise avec une specificite egale + le tag body, meme technique que line-height ci-dessous. */ body.elementor-kit-486{ color:var(--ink);font-family:'Inter',system-ui,sans-serif;font-size:16px;font-weight:400; } body.elementor-kit-486{line-height:1.6;} /* Idem : le theme force overflow:hidden auto sur , ce qui casse tout position:sticky (sidebar article, etc.). On rend la main au scroll normal. */ body.elementor-kit-486{overflow:visible !important;} /* Troisieme source de collision, cette fois le theme parent stratusx (app.css) plutot qu'Elementor : des regles bateau "p{font-family:Lato,...}" et "body,p,li{color:#333}" s'appliquent sur tout texte de paragraphe/liste/gras qui n'a pas de regle plus specifique a nous (typiquement le contenu d'articles) -- d'ou le "grain" different observe entre les titres (correctement Plus Jakarta Sans/var(--ink)) et le corps de texte. Meme parade. */ body.elementor-kit-486 p, body.elementor-kit-486 li, body.elementor-kit-486 strong, body.elementor-kit-486 b, body.elementor-kit-486 em{ color:inherit;font-family:inherit; } html{overflow-y:auto;} img{max-width:100%;display:block;} a{color:inherit;} h1,h2,h3{text-wrap:balance;margin:0;} /* Meme collision Elementor que ci-dessus (.elementor-kit-486 h1/h2/h3/h4 impose Poppins + #1F0C7B). Deux cas : (a) un titre a deja une regle de couleur explicite a nous (ex. .hero h1) -- le passage de wp_head() avant ce bloc suffit a gagner l'egalite de specificite ; (b) un titre s'appuie sur l'heritage (ex. .price-card h3, .section-head h2, sans couleur declaree) -- l'heritage n'a AUCUNE specificite et perd toujours face a une regle Elementor explicite, meme apres reordonnancement. On force color:inherit avec la specificite body.elementor-kit-486 (gagne dans les deux cas ; quand un parent comme .hero fixe deja sa propre couleur, l'heritage la reprend telle quelle). */ body.elementor-kit-486 h1, body.elementor-kit-486 h2, body.elementor-kit-486 h3, body.elementor-kit-486 h4{ color:inherit; } body.elementor-kit-486 h1, body.elementor-kit-486 h2, body.elementor-kit-486 h3{ font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif; } p{margin:0;} .wrap{max-width:1180px;margin:0 auto;padding-left:24px;padding-right:24px;} section{padding:clamp(56px,8vw,108px) 0;} .eyebrow{ display:inline-flex;align-items:center;gap:8px; font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase; color:var(--teal-ink);background:color-mix(in srgb, var(--teal) 14%, transparent); padding:6px 12px;border-radius:999px; } .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.98rem; padding:13px 24px;border-radius:12px;text-decoration:none;border:1px solid transparent; transition:transform .15s ease, box-shadow .15s ease, background .15s ease; cursor:pointer; } .btn:hover{transform:translateY(-1px);} .btn-teal{background:var(--teal);color:#FFFFFF;box-shadow:0 10px 24px -10px color-mix(in srgb, var(--teal) 60%, transparent);} .btn-teal:hover{background:var(--teal-deep);} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line);} .btn-ghost:hover{border-color:var(--muted-2);} .btn-sm{padding:9px 16px;font-size:.88rem;border-radius:10px;} .link-arrow{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--blue);text-decoration:none;font-size:.92rem;} .link-arrow svg{width:15px;height:15px;transition:transform .15s ease;} .link-arrow:hover svg{transform:translateX(3px);} /* ---------- Header ---------- */ header.site{ position:sticky;top:0;z-index:90; background:var(--header-bg); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); border-bottom:1px solid var(--header-line); color:var(--header-ink); } .header-row{display:flex;align-items:center;gap:28px;padding:14px 0;position:relative;} .logo-link{display:flex;align-items:center;flex-shrink:0;} .logo-mark{height:34px;width:auto;flex-shrink:0;} nav.primary{display:flex;align-items:center;gap:4px;margin-left:8px;flex:1;} nav.primary > a, .nav-trigger{ font-size:.94rem;font-weight:600;text-decoration:none;color:var(--header-ink);opacity:.82; display:flex;align-items:center;gap:5px;white-space:nowrap; padding:9px 12px;border-radius:9px;cursor:pointer;background:none;border:none;font-family:'Inter',sans-serif; transition:opacity .15s ease, background .15s ease; } nav.primary > a:hover, .nav-trigger:hover{opacity:1;background:color-mix(in srgb, var(--ink) 5%, transparent);} nav.primary svg{width:13px;height:13px;opacity:.6;flex-shrink:0;} .header-actions{display:flex;align-items:center;gap:16px;} .lang-switch{font-size:.85rem;font-weight:600;color:var(--header-muted);text-decoration:none;} .lang-switch:hover{color:var(--header-ink);} .lang-switch-group{display:inline-flex;align-items:center;gap:6px;} .lang-switch-group .lang-switch{padding:0;} .lang-switch-group .lang-switch + .lang-switch{border-left:1px solid var(--header-muted);padding-left:6px;} .nav-lang-mobile-group{display:inline-flex;align-items:center;gap:8px;} /* -- Dropdowns / submenu (inspired by Rezdy's "Platform" submenu: category row with a short descriptor + chevron on the left, detail list on the right) -- */ .nav-item{position:relative;} /* Pont invisible qui comble le vide vertical entre le declencheur et le panneau (top:calc(100% + 10px) ci-dessous) : sans lui, sortir du survol pendant la traversee de ces 10px ferme le dropdown avant que la souris n'atteigne le contenu -- bug classique des menus deroulants CSS. Largeur genereuse pour couvrir le mega-panel le plus large. */ .nav-item::after{content:'';position:absolute;left:0;top:100%;width:600px;height:10px;} .nav-trigger .chev{transition:transform .18s ease;} .nav-item:hover .nav-trigger .chev, .nav-item:focus-within .nav-trigger .chev{transform:rotate(180deg);} .nav-item:hover .nav-trigger, .nav-item:focus-within .nav-trigger{opacity:1;background:color-mix(in srgb, var(--ink) 5%, transparent);} .dropdown-sm, .mega-panel{ position:absolute;top:calc(100% + 10px);left:0; background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius-md); box-shadow:var(--shadow); opacity:0;visibility:hidden;transform:translateY(6px);pointer-events:none; transition:opacity .16s ease, transform .16s ease, visibility .16s; z-index:60; } .nav-item:hover .dropdown-sm, .nav-item:focus-within .dropdown-sm, .nav-item:hover .mega-panel, .nav-item:focus-within .mega-panel{ opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto; } .dropdown-sm{min-width:260px;padding:10px;display:flex;flex-direction:column;gap:2px;} .dropdown-sm a{ display:block;padding:10px 12px;border-radius:8px;text-decoration:none;color:var(--ink); font-size:.9rem;font-weight:600;transition:background .12s ease; } .dropdown-sm a:hover{background:var(--blue-tint);color:var(--blue);} #nav-ressources .dropdown-sm{left:auto;right:0;} .mega-panel{padding:14px;} /* Category (left) + detail (right) flyout, e.g. "Fonctionnalités". Le survol (ou le clic/focus sur mobile) d'une ligne de gauche bascule .is-active en JS, qui pilote l'affichage du groupe de droite correspondant -- pas de mecanique radio/:checked. */ .feat-flyout{display:grid;grid-template-columns:230px 300px;} .feat-list{display:flex;flex-direction:column;gap:2px;padding-right:14px;border-right:1px solid var(--line);} .feat-row{ display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer; padding:11px 12px;border-radius:9px;transition:background .12s ease; } .feat-row strong{font-size:.9rem;font-weight:600;color:var(--ink);} .feat-row-link{display:contents;color:inherit;text-decoration:none;} .feat-row-link:hover strong{text-decoration:underline;} .feat-row svg{width:14px;height:14px;color:var(--muted-2);flex-shrink:0;} .feat-row.is-active{background:var(--blue-tint);} .feat-row.is-active strong{color:var(--blue);} .feat-detail{padding-left:16px;display:flex;flex-direction:column;gap:1px;} .feat-detail-group{display:none;flex-direction:column;gap:1px;} .feat-detail-group.is-active{display:flex;} .feat-sub{ display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink); font-size:.9rem;font-weight:600;padding:8px 10px;border-radius:8px;transition:background .12s ease,color .12s ease; } .feat-sub:hover{background:var(--blue-tint);color:var(--blue);} .feat-sub .ic{ width:26px;height:26px;border-radius:7px;flex-shrink:0;display:flex;align-items:center;justify-content:center; background:color-mix(in srgb, var(--blue) 12%, transparent);color:var(--blue); } .feat-sub .ic svg{width:14px;height:14px;stroke-width:1.8;} /* "Pour qui ?" : simple icon+label list, two columns */ .mega-pourqui{display:grid;grid-template-columns:repeat(2,190px);gap:2px 8px;} .pourqui-tile{ display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;text-decoration:none; color:var(--ink);font-size:.9rem;font-weight:600;transition:background .12s ease; } .pourqui-tile:hover{background:var(--blue-tint);} .pourqui-tile .ic{ width:28px;height:28px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center; background:color-mix(in srgb, var(--blue) 12%, transparent);color:var(--blue); } .pourqui-tile .ic svg{width:15px;height:15px;stroke-width:1.7;} /* Bouton hamburger : cache en desktop, seul point d'entree du menu mobile. */ .nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:38px;height:38px;background:none;border:none;cursor:pointer;padding:0;margin-left:auto;} nav.primary > a.nav-lang-mobile{display:none;} .nav-toggle span{width:22px;height:2px;background:var(--header-ink);border-radius:2px;transition:transform .18s ease,opacity .18s ease;} body.mobile-nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);} body.mobile-nav-open .nav-toggle span:nth-child(2){opacity:0;} body.mobile-nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} @media (max-width:900px){ .nav-toggle{display:flex;} .header-actions{margin-left:auto;} .logo-mark{height:26px;} .lang-switch{display:none;} .btn-sm{padding:9px 14px;font-size:.9rem;white-space:nowrap;} nav.primary > a.nav-lang-mobile{ display:block;margin-top:10px;padding:15px 2px;text-align:center; font-weight:700;font-family:'Plus Jakarta Sans',sans-serif;color:var(--blue);text-decoration:none; } .nav-item::after{display:none;} nav.primary{display:none;} /* Panneau plein ecran (sous le header) plutot qu'un accordeon qui poussait le contenu de page vers le bas -- comportement standard d'un menu mobile, avec son propre scroll et le scroll de la page bloque pendant qu'il est ouvert. */ body.mobile-nav-open{overflow:hidden;} body.mobile-nav-open nav.primary{ display:flex;flex-direction:column;align-items:stretch;gap:0; position:fixed;top:var(--header-h,60px);left:0;right:0;bottom:0; background:var(--paper-raised);overflow-y:auto;-webkit-overflow-scrolling:touch; padding:8px 20px 28px;margin:0;z-index:70; box-shadow:0 16px 32px -12px rgba(19,27,51,.2); } nav.primary > a, .nav-trigger{width:100%;justify-content:space-between;padding:15px 2px;font-size:1rem;} /* header.site a un backdrop-filter (effet verre depoli du header sticky), qui cree un nouveau containing block pour tout descendant position:fixed -- le menu mobile (fixed, descendant du header) se retrouvait donc contraint a la hauteur du header lui-meme au lieu du viewport entier. On desactive le filtre le temps que le menu est ouvert (pas besoin de l'effet verre derriere un panneau opaque de toute facon). */ body.mobile-nav-open header.site{-webkit-backdrop-filter:none;backdrop-filter:none;} .nav-item{width:100%;border-bottom:1px solid var(--line);} .nav-item:last-child{border-bottom:none;} .dropdown-sm, .mega-panel{ position:static;opacity:1;visibility:visible;transform:none;pointer-events:none; max-height:0;overflow:hidden;padding:0;border:none;box-shadow:none; transition:max-height .2s ease; } .nav-item.is-open .dropdown-sm, .nav-item.is-open .mega-panel{ pointer-events:auto;max-height:2000px;padding:0 2px 16px; } .dropdown-sm{min-width:0;} #nav-ressources .dropdown-sm{right:auto;} .feat-flyout{display:block;} .feat-list{border-right:none;padding-right:0;margin-bottom:6px;} .feat-detail{padding-left:0;} .feat-detail-group{padding-left:12px;border-left:2px solid var(--line);margin:2px 0 8px;} .mega-pourqui{grid-template-columns:1fr 1fr;} } /* ---------- Hero ---------- */ .hero{ padding-top:clamp(48px,7vw,88px); background:var(--hero-bg);color:var(--hero-ink); } .hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;} @media (max-width:940px){.hero-grid{grid-template-columns:1fr;}} .hero h1{font-size:clamp(2.3rem,3.6vw + 1rem,3.4rem);font-weight:800;letter-spacing:-.02em;line-height:1.08;color:var(--hero-ink);} .hero .lede{margin-top:22px;font-size:1.14rem;line-height:1.65;color:var(--hero-muted);max-width:52ch;} .hero .lede strong{color:var(--hero-ink);font-weight:700;} .hero-cta-row{display:flex;align-items:center;gap:20px;margin-top:32px;flex-wrap:wrap;} .rating{display:flex;align-items:center;gap:10px;} .rating img{height:30px;width:auto;border-radius:6px;} .rating span{font-size:.86rem;color:var(--muted);font-weight:600;} .hero .rating span{color:var(--hero-muted);} .hero-visual{position:relative;} .hero-visual .glow{ position:absolute;inset:-10% -10% -10% 6%; background:radial-gradient(closest-side, rgba(255,255,255,.4), transparent 70%), radial-gradient(closest-side at 80% 90%, color-mix(in srgb, var(--teal) 40%, transparent), transparent 70%); filter:blur(6px);z-index:0; } .hero-card{ position:relative;z-index:1;background:var(--paper-raised); border:1px solid var(--line);border-radius:var(--radius-lg); box-shadow:var(--shadow);overflow:hidden; animation:float 7s ease-in-out infinite alternate; } .hero-card img{width:100%;} .hero-card .cardbar{display:flex;gap:6px;padding:12px 14px;border-bottom:1px solid var(--line);} .hero-card .cardbar span{width:9px;height:9px;border-radius:50%;background:var(--line);} .hero-phone{ position:absolute;left:-6%;bottom:-14%;width:34%;z-index:2; border-radius:26px;border:6px solid var(--paper-raised);box-shadow:var(--shadow-sm); overflow:hidden;background:var(--paper-raised); transform:rotate(-6deg); } .hero-phone img{width:100%;display:block;} @media (prefers-reduced-motion: reduce){ .hero-card{animation:none;} } @keyframes float{ from{transform:translateY(0)} to{transform:translateY(-10px)} } @media (max-width:940px){ .hero-phone{display:none;} } /* ---------- Trust bar (client logos, marquee) ---------- */ .trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);} .trust .intro{max-width:640px;margin:0 auto 40px;text-align:center;} .trust .intro h2{font-size:1.5rem;font-weight:700;} .trust .intro p{margin-top:10px;color:var(--muted);} .logo-marquee{ overflow:hidden;width:100%; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); } .logo-track{ display:flex;align-items:center;width:max-content; gap:clamp(48px,6vw,84px); animation:marquee 28s linear infinite; } .logo-marquee:hover .logo-track{animation-play-state:paused;} .logo-track img{height:42px;width:auto;object-fit:contain;flex-shrink:0;filter:grayscale(1) opacity(.55);transition:filter .2s ease;} .logo-track img:hover{filter:grayscale(0) opacity(1);} @keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} } @media (prefers-reduced-motion: reduce){ .logo-track{animation:none;flex-wrap:wrap;justify-content:center;width:100%;} .logo-marquee{-webkit-mask-image:none;mask-image:none;} .logo-track .dup{display:none;} } /* ---------- Testimonials ---------- */ .testi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;} @media (max-width:980px){.testi-grid{grid-template-columns:1fr 1fr;}} @media (max-width:640px){.testi-grid{grid-template-columns:1fr;}} .testi-card{ background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius-md); padding:24px;display:flex;flex-direction:column;gap:14px; } .testi-stars{color:var(--teal);font-size:.95rem;letter-spacing:2px;} .testi-quote{font-size:.94rem;line-height:1.6;color:var(--ink);flex:1;} .testi-person{display:flex;align-items:center;gap:12px;} .testi-avatar{ width:38px;height:38px;border-radius:50%;flex-shrink:0; display:flex;align-items:center;justify-content:center; color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.82rem; } .testi-person div{display:flex;flex-direction:column;line-height:1.35;} .testi-person strong{font-size:.88rem;} .testi-person span{font-size:.8rem;color:var(--muted);} .testi-disclaimer{margin-top:24px;font-size:.8rem;color:var(--muted-2);text-align:center;} /* ---------- Section heads ---------- */ .section-head{max-width:680px;margin-bottom:44px;} .section-head h2{font-size:clamp(1.7rem,2vw + 1rem,2.3rem);font-weight:800;letter-spacing:-.01em;} .section-head p{margin-top:14px;color:var(--muted);font-size:1.05rem;line-height:1.65;} /* ---------- Feature grid ---------- */ .feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;} @media (max-width:980px){.feature-grid{grid-template-columns:1fr 1fr;}} @media (max-width:600px){.feature-grid{grid-template-columns:1fr;}} /* Variante a nombre de colonnes variable (donnees dynamiques, ex. les "highlights" d'une page Pour-qui) : la surcharge ne s'applique qu'au-dessus du premier point de rupture, pour ne jamais entrer en conflit avec le responsive mobile/tablette ci-dessus. */ @media (min-width:981px){ .feature-grid.cols-1{grid-template-columns:1fr;} .feature-grid.cols-2{grid-template-columns:repeat(2,1fr);} .feature-grid.cols-3{grid-template-columns:repeat(3,1fr);} } .feature-card{ background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius-md); padding:26px 24px;display:flex;flex-direction:column;gap:14px; transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm);border-color:transparent;} .icon-chip{ width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center; background:var(--blue-tint);color:var(--blue); } .feature-card:nth-child(1) .icon-chip{background:color-mix(in srgb, var(--teal) 16%, white);color:var(--teal-ink);} .icon-chip svg{width:22px;height:22px;stroke-width:1.6;} .feature-card h3{font-size:1.06rem;font-weight:700;} .feature-card p{color:var(--muted);font-size:.94rem;line-height:1.55;flex:1;} /* ---------- Why us (css tabs) ---------- */ .why-input{position:absolute;opacity:0;pointer-events:none;} .why-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:0;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--paper-raised);} @media (max-width:820px){.why-grid{grid-template-columns:1fr;}} .why-list{border-right:1px solid var(--line);} @media (max-width:820px){.why-list{border-right:none;border-bottom:1px solid var(--line);}} .why-row{ display:flex;align-items:center;gap:14px;padding:20px 22px;cursor:pointer; border-bottom:1px solid var(--line);font-weight:700;font-family:'Plus Jakarta Sans',sans-serif;font-size:.98rem; color:var(--muted);transition:background .15s ease, color .15s ease; } .why-row:last-child{border-bottom:none;} .why-row .num{ width:30px;height:30px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center; background:color-mix(in srgb, var(--ink) 6%, transparent);color:var(--muted); } .why-row svg{width:16px;height:16px;} .why-panel{display:none;padding:36px 40px;} .why-panel h3{font-size:1.2rem;font-weight:700;margin-bottom:12px;} .why-panel p{color:var(--muted);font-size:1rem;line-height:1.7;} #why1:checked ~ .why-grid .why-list label[for="why1"], #why2:checked ~ .why-grid .why-list label[for="why2"], #why3:checked ~ .why-grid .why-list label[for="why3"], #why4:checked ~ .why-grid .why-list label[for="why4"]{ color:var(--ink);background:var(--blue-tint); } #why1:checked ~ .why-grid .why-list label[for="why1"] .num, #why2:checked ~ .why-grid .why-list label[for="why2"] .num, #why3:checked ~ .why-grid .why-list label[for="why3"] .num, #why4:checked ~ .why-grid .why-list label[for="why4"] .num{background:var(--blue);color:#FFFFFF;} #why1:checked ~ .why-grid .why-panels #panel1, #why2:checked ~ .why-grid .why-panels #panel2, #why3:checked ~ .why-grid .why-panels #panel3, #why4:checked ~ .why-grid .why-panels #panel4{display:block;} .why-cta{margin-top:36px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;} .why-cta p{color:var(--muted);font-size:.92rem;} /* ---------- FAQ ---------- */ /* Format aligne sur celui deja utilise dans le corps des articles de blog (pastille bleue arrondie, texte blanc, reponse en texte simple en dessous) plutot que l'ancienne carte a fond clair -- un seul format FAQ sur tout le site. */ .faq-list{max-width:960px;margin:0 auto;display:flex;flex-direction:column;gap:14px;} details.faq-item{border-radius:999px;} details.faq-item summary{ list-style:none;cursor:pointer;padding:18px 28px;display:flex;justify-content:space-between;align-items:center;gap:16px; font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:1.02rem; background:var(--blue);color:#FFFFFF;border-radius:999px; } details.faq-item summary::-webkit-details-marker{display:none;} .chev{width:18px;height:18px;flex-shrink:0;color:#FFFFFF;transition:transform .18s ease;} details.faq-item[open] .chev{transform:rotate(180deg);} .faq-a{padding:16px 28px 4px;color:var(--muted);font-size:.96rem;line-height:1.7;} @media (max-width:600px){ .faq-list{gap:10px;} details.faq-item, details.faq-item summary{border-radius:18px;} details.faq-item summary{padding:15px 18px;font-size:.94rem;gap:10px;} .faq-a{padding:12px 18px 2px;font-size:.92rem;} } /* ---------- Closing CTA strip ---------- */ .cta-strip{ background:var(--blue);color:#fff;border-radius:var(--radius-lg); padding:40px clamp(24px,5vw,56px);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap; } .cta-strip h3{font-size:1.3rem;font-weight:800;color:#fff;} .cta-strip .rating{margin-top:10px;} .cta-strip .rating span{color:rgba(255,255,255,.82);} /* ---------- Footer (fixed dark, independent of theme) ---------- */ footer.site{background:var(--footer-bg);color:var(--footer-ink);} .footer-top{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:36px;padding-top:64px;padding-bottom:40px;border-bottom:1px solid var(--footer-line);} @media (max-width:980px){.footer-top{grid-template-columns:1fr 1fr;}} @media (max-width:560px){.footer-top{grid-template-columns:1fr;}} /* Le sous-titre doit ressortir davantage que les liens qu'il chapeaute (l'inverse de l'ancien reglage, ou le sous-titre etait plus terne que ses propres liens) : on joue sur le poids/la taille plutot que sur une nouvelle couleur, la palette du footer reste blanc-sur-bleu. */ .footer-top h4{font-size:.8rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--footer-ink);margin-bottom:16px;} .footer-top ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;} .footer-top a{color:var(--footer-muted);text-decoration:none;font-size:.92rem;font-weight:500;} .footer-top a:hover{color:var(--footer-accent);} .footer-about p{color:var(--footer-muted);font-size:.92rem;line-height:1.65;margin-top:14px;max-width:42ch;} .newsletter{margin-top:22px;display:flex;gap:8px;max-width:320px;} .newsletter input{ flex:1;background:rgba(255,255,255,.06);border:1px solid var(--footer-line);border-radius:10px; padding:10px 12px;color:var(--footer-ink);font-family:'Inter',sans-serif;font-size:.88rem; } .newsletter input::placeholder{color:var(--footer-muted);} .newsletter button{ background:var(--footer-accent);color:#FFFFFF;border:none;border-radius:10px;padding:0 16px; font-weight:700;font-size:.85rem;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif; } .footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:22px;padding-bottom:22px;flex-wrap:wrap;gap:12px;} .footer-bottom span{color:var(--footer-muted);font-size:.84rem;} .footer-bottom .langs{display:flex;gap:14px;} .footer-bottom a{color:var(--footer-muted);text-decoration:none;font-size:.84rem;} .footer-bottom a:hover{color:var(--footer-ink);} /* ---------- CTA sticky mobile (articles de blog) ---------- */ .sticky-cta-mobile{display:none;} @media (max-width:900px){ .sticky-cta-mobile{ display:flex;align-items:center;justify-content:center; position:fixed;left:16px;right:16px;bottom:16px;z-index:55; background:var(--teal);color:#fff;text-decoration:none; font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.96rem; padding:15px 20px;border-radius:14px;box-shadow:0 10px 28px -8px rgba(19,27,51,.35); opacity:0;pointer-events:none;transform:translateY(14px); transition:opacity .22s ease, transform .22s ease; } .sticky-cta-mobile.is-visible{opacity:1;pointer-events:auto;transform:translateY(0);} } /* ---------- Sommaire sticky mobile (articles de blog) : rangee de pastilles defilable horizontalement, avec la section active mise en avant au scroll. ---------- */ .mobile-toc{display:none;} @media (max-width:900px){ .mobile-toc{ display:block;position:fixed;top:var(--header-h,60px);left:0;right:0;z-index:50; background:var(--paper-raised);border-bottom:1px solid var(--line); overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none; opacity:0;pointer-events:none;transform:translateY(6px); transition:opacity .2s ease, transform .2s ease; box-shadow:0 8px 16px -12px rgba(19,27,51,.16); } .mobile-toc::-webkit-scrollbar{display:none;} .mobile-toc.is-visible{opacity:1;pointer-events:auto;transform:translateY(0);} .mobile-toc-track{display:flex;gap:8px;padding:10px 16px;width:max-content;} .mobile-toc a{ white-space:nowrap;padding:8px 14px;border-radius:999px; background:var(--paper);border:1px solid var(--line);color:var(--muted); font-size:.84rem;font-weight:600;text-decoration:none; transition:background .15s ease,color .15s ease,border-color .15s ease; } .mobile-toc a.is-active{background:var(--blue-tint);border-color:var(--blue);color:var(--blue);font-weight:700;} .article-body h2{scroll-margin-top:calc(var(--header-h,60px) + 60px);} }