/* ============================================================ POLICES AUTO-HEBERGEES Arimo et Raleway servis depuis /assets/fonts, plus aucune requete vers Google. Format WOFF2 uniquement, sous-ensemble latin (latin + latin-ext pour Raleway). Arimo n'existe pas en graisse 800 : la face 700 couvre la plage 700-800 pour eviter un faux gras synthetique. ============================================================ */ @font-face{ font-family:'Arimo'; font-style:normal; font-weight:400; font-display:swap; src:url('../assets/fonts/arimo-latin-400.woff2') format('woff2'); } @font-face{ font-family:'Arimo'; font-style:normal; font-weight:600; font-display:swap; src:url('../assets/fonts/arimo-latin-600.woff2') format('woff2'); } @font-face{ font-family:'Arimo'; font-style:normal; font-weight:700 800; font-display:swap; src:url('../assets/fonts/arimo-latin-700.woff2') format('woff2'); } @font-face{ font-family:'Raleway'; font-style:normal; font-weight:400; font-display:swap; src:url('../assets/fonts/raleway-latin-400.woff2') format('woff2'); } @font-face{ font-family:'Raleway'; font-style:normal; font-weight:500; font-display:swap; src:url('../assets/fonts/raleway-latin-500.woff2') format('woff2'); } @font-face{ font-family:'Raleway'; font-style:normal; font-weight:600; font-display:swap; src:url('../assets/fonts/raleway-latin-600.woff2') format('woff2'); } @font-face{ font-family:'Raleway'; font-style:normal; font-weight:700; font-display:swap; src:url('../assets/fonts/raleway-latin-700.woff2') format('woff2'); } :root{ color-scheme: light only; --orange-50:#FFF4EF; --orange-100:#FEE7DB; --orange-200:#FDCBB6; --orange-300:#F9AA85; --orange-400:#F58652; --orange-500:#EB6226; --orange-600:#D8561F; --orange-700:#BF4A1A; --orange-800:#9C3B14; --orange-900:#6F290D; --bg:#FAF9F7; --surface:#FFFFFF; --anthracite:#1F2937; --text-main:#222222; --text-soft:#666666; --font-head:'Arimo', Arial, sans-serif; --font-body:'Raleway', sans-serif; --radius:14px; /* Gouttiere laterale unique : toute page du site borne son contenu sur cette valeur. */ --gutter:28px; /* Coche blanche des listes a puces. L'ancienne valeur se referencait elle-meme (--check: var(--check)), donc invalide : les pastilles orange restaient vides. */ --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); --shadow-soft: 0 10px 30px -12px rgba(31,41,55,0.18); } :root{ /* Rythme vertical : une seule echelle fluide pour tout le site. */ --space-section: clamp(72px, 8.5vw, 112px); --space-block: clamp(64px, 7.5vw, 100px); /* Echelle typographique : trois niveaux, tous fluides. */ --h-section: clamp(1.85rem, 2.8vw, 2.4rem); --h-block: clamp(1.45rem, 2.1vw, 1.85rem); } *{margin:0; padding:0; box-sizing:border-box;} /* Le header est fixe (~100px) : sans cette marge, toute ancre atterrit CACHEE dessous. */ /* En em et non en px : l'en-tete fixe grandit avec le texte, un decalage fixe laisserait le titre vise cache derriere la barre. Critere 2.4.11. */ [id]{scroll-margin-top:7.5em;} /* Lien d'evitement (WCAG 2.4.1, niveau A) : invisible a la souris, apparait au premier appui sur Tab pour sauter la navigation. */ .skip-link{ position:fixed; top:-120px; left:16px; z-index:2000; background:var(--anthracite); color:#fff; font-family:var(--font-head); font-weight:700; font-size:.9rem; padding:13px 22px; border-radius:12px; box-shadow:0 10px 26px -8px rgba(31,41,55,.55); transition:top .25s ease; } .skip-link:focus{top:16px;} /* La cible recoit le focus sans afficher de contour disgracieux */ main[tabindex="-1"]:focus{outline:none;} html{scroll-behavior:smooth; overflow-x:hidden; overflow-x:clip; width:100%;} /* Filet de securite : une adresse e-mail ou une URL longue ne doit jamais pousser la largeur d'une colonne, y compris a fort grossissement. */ body{overflow-wrap:break-word; font-family:var(--font-body); color:var(--text-main); background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; overflow-x:clip; width:100%; } h1,h2,h3,h4{font-family:var(--font-head); color:var(--anthracite); line-height:1.15; font-weight:700;} /* ---- Protection anti dark-mode forcé (navigateurs mobiles) ---- Réaffirme explicitement le thème clair quand le système est en mode sombre, pour empêcher toute inversion automatique des couleurs. */ @media (prefers-color-scheme: dark){ html, body{background:var(--bg) !important; color:var(--text-main) !important;} h1,h2,h3,h4{color:var(--anthracite) !important;} .zone-section .section-head h2{color:#fff !important;} .service-cta h2,.svc-head h2,.svc-head h3,.hero-content h1,.plans-head h2,.plan h3,.network-intro h2,.svc-head h3 a,.about-engagements .method-head h2,.engagement h3,.formula-rank,.about-photo-label,.idcard-body h2,.aside-card-dark h2,.legal-identite h2{color:#fff !important;} .footer-col h3{color:var(--orange-300) !important;} .footer-identity strong{color:#fff !important;} .hero-content h1 .accent,.page-head h1 .accent,.method-head h2 .accent{color:var(--orange-500) !important;} .plans-head h2 .accent,.network-intro h2 .accent,.about-engagements .method-head h2 .accent{color:var(--orange-400) !important;} .plan-claim,.plan-list li,.plans-note,.plans-domains-note{color:inherit;} .hero-subtitle{color:rgba(255,255,255,.94) !important;} .svc-body p,.svc-list li,.page-intro, .method-head p,.method-steps li p,.service-cta p{color:inherit;} } a{text-decoration:none; color:inherit;} ul{list-style:none;} img{max-width:100%; display:block;} /* REGLE : tout contenu de page passe par .container (ou reprend --gutter), afin que toutes les pages, actuelles et futures, s'alignent sur la meme bordure. */ .container{max-width:1180px; margin:0 auto; padding:0 var(--gutter);} .eyebrow{ display:inline-block; max-width:100%; font-family:var(--font-head); font-weight:700; letter-spacing:.18em; text-transform:uppercase; font-size:.82rem; color:var(--orange-700); margin-bottom:14px; } :focus-visible{outline:3px solid var(--orange-700); outline-offset:3px;} /* ---------- HEADER ---------- */ header{ position:fixed; top:14px; left:50%; transform:translateX(-50%); width:calc(100% - 32px); max-width:1320px; z-index:1000; border-radius:20px; padding:14px 10px; background:rgba(30,22,18,.14); backdrop-filter:blur(24px) saturate(200%); -webkit-backdrop-filter:blur(24px) saturate(200%); border:1px solid rgba(255,255,255,.22); box-shadow:0 8px 32px -10px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.28); transition:background .4s ease, padding .4s ease, box-shadow .4s ease, border-color .4s ease, top .4s ease; } header .container{display:flex; align-items:center; justify-content:space-between; min-width:0;} /* Filet de derniere instance : sur une fenetre basse, une barre fixe qui a grandi avec le texte mangerait l'essentiel de l'ecran. Elle redevient alors une barre normale qui defile avec la page. Le seuil est en em, donc il se declenche quand le texte grandit, pas seulement sur petit ecran. */ @media (max-height:22em){ header{position:absolute; top:14px;} html.menu-open body{position:static;} } /* Texte tres agrandi sur ecran etroit : le CTA de la barre pousse le bouton du menu hors de l'ecran. Le seuil, en em, ne se declenche jamais a taille de texte normale, meme sur un 320 px. Le CTA reste accessible dans le menu, ou il figure deja avec le numero de telephone. */ /* Selecteur porte par header : le bloc mobile a 47.5em, plus loin dans le fichier, remet display:flex sur .header-actions. */ @media (max-width:15em){ header .header-actions{display:none;} } header.scrolled{ background:rgba(255,255,255,.32); backdrop-filter:blur(28px) saturate(200%); -webkit-backdrop-filter:blur(28px) saturate(200%); border-color:rgba(255,255,255,.5); box-shadow:0 8px 30px -10px rgba(31,41,55,.16), inset 0 1px 0 rgba(255,255,255,.55); } header.compact{ top:10px; padding:10px 10px; } /* ---- Mode page interne (fond blanc cassé) : header clair dès le chargement ---- Réutilise exactement l'apparence de .scrolled, indépendamment du défilement, car il n'y a pas de photo sombre derrière le header sur ces pages. */ body.theme-light header{ background:rgba(255,255,255,.32); backdrop-filter:blur(28px) saturate(200%); -webkit-backdrop-filter:blur(28px) saturate(200%); border-color:rgba(255,255,255,.5); box-shadow:0 8px 30px -10px rgba(31,41,55,.16), inset 0 1px 0 rgba(255,255,255,.55); } /* Pages claires : logo noir au repos, orange apres scroll (meme mecanique que l'accueil) */ body.theme-light .brand-logo-white{opacity:0;} body.theme-light nav.main-nav > ul > li > a{color:var(--anthracite);} /* Au repos, le survol du menu suit le logo et le CTA : surbrillance anthracite. Apres scroll, la regle header.scrolled reprend la main et repasse en orange. */ body.theme-light nav.main-nav > ul > li > a:hover{background:rgba(31,41,55,.10); color:var(--anthracite);} body.theme-light .header-actions .btn-primary{background:var(--anthracite); color:#fff; box-shadow:0 8px 20px -8px rgba(31,41,55,.45);} body.theme-light .header-actions .btn-primary:hover{background:#171F29;} body.theme-light .burger span{background:var(--anthracite);} /* Contenu des pages internes : dégage le header fixe */ .page-main{padding-top:130px; padding-bottom:80px; min-height:60vh;} @media (max-width:47.5em){ .page-main{padding-top:110px; padding-bottom:60px;} [id]{scroll-margin-top:6.25em;} } /* ---------- PAGE SERVICES ---------- */ .page-head{max-width:720px; margin:0 auto 72px; text-align:center;} /* ---------- ICONE DU PILIER, CHAPEAU DES PAGES PILIERS ---------- Rappel visuel de la carte cliquee sur l'accueil et sur la page mere. Portee strictement limitee a .page-head : les cartes de l'accueil et de la page Services ne sont pas touchees. Trois mouvements : la tuile se pose, la courbe se trace, un reflet balaie. Uniquement transform, opacity et stroke-dashoffset, donc aucun recalcul de mise en page et aucun decalage cumulatif. Le reflet ne boucle pas indefiniment, trois passages puis arret, pour rester hors du champ du critere 2.2.2 sur les contenus en mouvement. Pas d'animation-fill-mode sur la tuile : la valeur finale des images cles est identique au style declare, ce qui laisse le survol reprendre la main. */ .page-head .svc-icon{ margin:0 auto 18px; overflow:hidden; animation:pilierPose .9s cubic-bezier(.2,.9,.25,1.05); } .page-head .svc-icon::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(100deg, transparent 22%, rgba(255,255,255,.5) 50%, transparent 78%); transform:translateX(-150%); animation:pilierReflet 2.8s ease-in-out 1.15s 3; } .page-head .svc-icon svg{position:relative; z-index:3;} /* Les deux traces portent pathLength="100" dans le SVG : la longueur reelle du chemin est donc normalisee, et ces deux regles valent pour les quatre glyphes des pages piliers sans mesurer quoi que ce soit. */ .page-head .svc-icon .trace-1{ stroke-dasharray:100; stroke-dashoffset:100; animation:pilierTrace 1.05s cubic-bezier(.65,.05,.36,1) .5s forwards; } .page-head .svc-icon .trace-2{ stroke-dasharray:100; stroke-dashoffset:100; animation:pilierTrace .55s ease-out 1.4s forwards; } .page-head .svc-icon:hover{ transform:rotate(-8deg) scale(1.08); box-shadow:0 14px 30px -10px rgba(235,98,38,.75); } @keyframes pilierPose{ 0%{opacity:0; transform:translateY(16px) scale(.84) rotate(-12deg);} 55%{opacity:1;} 100%{opacity:1; transform:translateY(0) scale(1) rotate(0deg);} } @keyframes pilierTrace{to{stroke-dashoffset:0;}} @keyframes pilierReflet{ 0%{transform:translateX(-150%);} 50%,100%{transform:translateX(150%);} } /* ---------- NAVIGATION ---------- Aucun menu deroulant dans l'en-tete : il exigerait du JavaScript et le motif ARIA complet du bouton de menu, pour une portee que le pied de page et la barre laterale couvrent deja. Le menu burger, lui, est la navigation principale sur telephone : il doit exposer les pages piliers. */ /* Sous-groupe : meme fond opaque et meme rayon que les entrees principales, pour rester lisible sur le panneau translucide. La hierarchie est portee par le retrait, le filet orange et une taille de texte inferieure, pas par un gris plus clair, qui aurait fait chuter le contraste. */ .mobile-menu-sub{ display:flex; flex-direction:column; gap:6px; margin:6px 0 4px 16px; padding-left:14px; border-left:2px solid var(--orange-300); } .mobile-menu-sub a{ display:flex; align-items:center; width:100%; min-height:44px; font-family:var(--font-head); font-weight:600; font-size:.95rem; color:#111111; background:var(--bg); padding:10px 16px; border-radius:12px; box-shadow:0 3px 10px -5px rgba(0,0,0,.28); transition:transform .18s ease; } .mobile-menu-sub a:hover{transform:translateX(-3px);} .mobile-menu-sub a[aria-current="page"]{ color:#fff; background:var(--anthracite); box-shadow:none; } /* ---------- ACCORDEON DU MENU BURGER ----------
natif : ouverture au clavier, etat expose aux technologies d'assistance, et aucun JavaScript a charger ni a autoriser. La hauteur est animee par ::details-content, avec interpolate-size porte par l'accordeon seul et non par la racine, pour ne rien changer ailleurs. @supports : sans le support, l'accordeon s'ouvre d'un coup, jamais casse. */ .mobile-acc{width:100%;} .mobile-acc > summary{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:56px; padding:14px 20px; font-family:var(--font-head); font-weight:700; font-size:1.02rem; color:#111111; background:var(--bg); border-radius:14px; box-shadow:0 6px 18px -8px rgba(0,0,0,.34); cursor:pointer; list-style:none; } .mobile-acc > summary::-webkit-details-marker{display:none;} .mobile-acc > summary::marker{content:"";} .mobile-acc > summary:focus-visible{outline:3px solid var(--orange-700); outline-offset:3px;} .mobile-acc-chevron{ width:9px; height:9px; flex:0 0 auto; border-right:2px solid var(--orange-700); border-bottom:2px solid var(--orange-700); transform:rotate(45deg) translateY(-2px); transition:transform .32s cubic-bezier(.22,.9,.32,1); } .mobile-acc[open] > summary .mobile-acc-chevron{transform:rotate(-135deg) translateY(-2px);} @supports (interpolate-size:allow-keywords){ .mobile-acc{interpolate-size:allow-keywords;} .mobile-acc::details-content{ block-size:0; overflow:hidden; opacity:0; transition:block-size .34s cubic-bezier(.22,.9,.32,1), opacity .26s ease, content-visibility .34s allow-discrete; content-visibility:hidden; } .mobile-acc[open]::details-content{ block-size:auto; opacity:1; content-visibility:visible; } @media (prefers-reduced-motion:reduce){ .mobile-acc::details-content{transition:none;} } } /* Sous-groupe du pied de page : il ne doit surtout pas heriter des cartes blanches du menu mobile, illisibles sur l'anthracite. Meme grammaire que les liens voisins, avec retrait et filet orange pour marquer la dependance. */ .footer-villes{ display:flex; flex-direction:column; margin:2px 0 4px 2px; padding-left:12px; border-left:2px solid rgba(235,98,38,.55); } .footer-villes a{ display:flex; align-items:center; min-height:44px; padding:0; font-size:.92rem; color:rgba(255,255,255,.78); transition:color .2s ease, transform .2s ease; } .footer-villes a:hover{color:var(--orange-300); transform:translateX(3px);} .footer-villes a[aria-current="page"]{color:var(--orange-300); font-weight:700;} /* Page en cours dans la barre laterale : ancree en anthracite, non cliquable a l'oeil mais conservee comme lien pour rester un repere lisible. */ .pillar-nav a[aria-current="page"]{ background:var(--anthracite); border-color:var(--anthracite); color:#fff; } .pillar-nav a[aria-current="page"]:hover{transform:none; color:#fff;} /* ---------- VARIABLE GRADUEE PAR PILIER ---------- Reprise du principe deja present sur les quatre cartes de service : le second point du degrade anthracite s'assombrit d'un pilier au suivant, dans l'ordre canonique. L'ecart est imperceptible cote a cote, mais il empeche les quatre pages d'etre quatre fois la meme page, sans jamais introduire de hierarchie entre les piliers. */ .zone-section.pilier-finance{background:linear-gradient(135deg, var(--anthracite), #19212C);} .zone-section.pilier-web{background:linear-gradient(135deg, var(--anthracite), #18202A);} .zone-section.pilier-branding{background:linear-gradient(135deg, var(--anthracite), #171E29);} .zone-section.pilier-social{background:linear-gradient(135deg, var(--anthracite), #161D27);} /* ---------- ANIMATIONS D'ACCENT ---------- Regle que je m'impose ici : rien ne se cache et rien ne s'efface. Le texte est lisible a pleine opacite des la premiere image, meme pour un visiteur qui ne defilera jamais. Ne bougent que les elements d'accent de la charte, les filets orange et les numeros. Tout est en CSS, par animation-timeline : aucun JavaScript, donc rien a executer ni a autoriser dans une politique de securite. Seuls scaleX, translateY et scale sont animes, donc aucun recalcul de mise en page. Portee limitee aux classes .filet et .filet-num, qui n'existent que sur les pages ou elles sont posees. */ /* Survol : la ligne avance et sa puce grossit. Fonctionne partout, sans dependre du support des animations liees au defilement. */ .local-index.filet li{transition:transform .3s ease;} .local-index.filet li:hover{transform:translateX(5px);} .local-index.filet dfn::before{transition:transform .3s ease;} .local-index.filet li:hover dfn::before{transform:scale(1.7);} @supports (animation-timeline:view()){ @media (prefers-reduced-motion:no-preference){ /* Les filets se tracent de gauche a droite en cascade. Le filet declare devient transparent et un calque le remplace, uniquement ici. */ .local-index.filet li{position:relative; border-bottom-color:transparent;} .local-index.filet li::after{ content:""; position:absolute; bottom:-1px; left:0; right:0; height:1px; background:var(--orange-200); transform:scaleX(0); transform-origin:0 50%; animation:accentTrace .9s linear both; animation-timeline:view(); animation-range:entry 6% cover 30%; } .local-index.filet li:nth-child(2)::after{animation-range:entry 6% cover 38%;} .local-index.filet li:nth-child(3)::after{animation-range:entry 6% cover 46%;} .local-index.filet li:nth-child(4)::after{animation-range:entry 6% cover 54%;} /* Les numeros se levent, un par un. Le titre et le texte ne bougent pas. */ .filet-num .engagement-num{ animation:accentLeve .7s linear both; animation-timeline:view(); animation-range:entry 8% cover 30%; } .filet-num > *:nth-child(2) .engagement-num{animation-range:entry 8% cover 40%;} .filet-num > *:nth-child(3) .engagement-num{animation-range:entry 8% cover 50%;} /* Le mot accentue du titre se souligne une fois, apres le trace de l'icone. Le filet est un fond degrade et non un pseudo-element en absolu : un mot accentue qui passe a la ligne est decoupe en plusieurs fragments, et un pseudo-element en absolu ne sait pas les suivre. C'etait le cas de « pilotage d'entreprise » sur la page Finance, ou le soulignement ne s'affichait pas. Avec box-decoration-break:clone, chaque fragment recoit son propre filet et les deux se tracent ensemble. */ .page-head .svc-icon ~ h1 .accent{ background-image:linear-gradient(var(--orange-300), var(--orange-300)); background-repeat:no-repeat; background-position:0 100%; background-size:0% 3px; padding-bottom:3px; -webkit-box-decoration-break:clone; box-decoration-break:clone; animation:accentSouligne .9s cubic-bezier(.65,.05,.36,1) 2s forwards; } } } @keyframes accentTrace{to{transform:scaleX(1);}} @keyframes accentSouligne{to{background-size:100% 3px;}} @keyframes accentLeve{ from{transform:translateY(12px); opacity:.35;} to{transform:none; opacity:1;} } /* Mouvement reduit : etat final affiche d'emblee, courbe entierement tracee. */ @media (prefers-reduced-motion: reduce){ .page-head .svc-icon{animation:none;} .page-head .svc-icon::after{display:none;} .page-head .svc-icon .trace-1, .page-head .svc-icon .trace-2{animation:none; stroke-dashoffset:0;} } .page-head h1{font-size:clamp(2.1rem, 4.4vw, 2.9rem); margin:16px 0 22px; line-height:1.1; letter-spacing:-.02em;} .page-head .accent{color:var(--orange-500);} .page-intro{color:var(--text-soft); font-size:1.12rem; line-height:1.65;} /* Grille de cartes */ .services-cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; max-width:960px; margin:0 auto; } .svc-card{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--gris-clair, #E5E7EB); border-radius:22px; overflow:hidden; box-shadow:0 1px 2px rgba(31,41,55,.06), 0 8px 24px -16px rgba(31,41,55,.25); transition:transform .4s cubic-bezier(.22,.9,.32,1), box-shadow .4s ease, border-color .4s ease; } .svc-card:hover{ transform:translateY(-6px); box-shadow:0 2px 4px rgba(31,41,55,.08), 0 30px 60px -24px rgba(31,41,55,.4); border-color:var(--orange-200); } /* En-tête coloré : icône + titre sur la même ligne */ .svc-head{ display:flex; align-items:center; gap:16px; padding:24px 26px; position:relative; overflow:hidden; box-shadow:inset 0 -2px 0 rgba(235,98,38,.5); transition:box-shadow .4s ease; } .svc-card:hover .svc-head{box-shadow:inset 0 -2px 0 rgba(235,98,38,1);} /* Flux fluide horizontal : nappe orange discrète + fin voile lumineux */ .svc-head::before{ content:""; position:absolute; inset:-35% -14%; pointer-events:none; background: radial-gradient(40% 60% at 18% 45%, rgba(235,98,38,.20), transparent 70%), radial-gradient(36% 56% at 78% 60%, rgba(235,98,38,.12), transparent 72%); filter:blur(18px); animation:svcVapor 12s ease-in-out infinite; } .svc-head::after{ content:""; position:absolute; top:-20%; bottom:-20%; left:-70%; width:55%; pointer-events:none; background:linear-gradient(100deg, transparent, rgba(255,255,255,.10), transparent); transform:skewX(-16deg); filter:blur(8px); animation:svcSheen 8s ease-in-out infinite; } .svc-card:hover .svc-head::before{animation-duration:8s;} .svc-card:hover .svc-head::after{animation-duration:4.5s;} @keyframes svcVapor{ 0% {transform:translateX(-7%) translateY(0);} 50% {transform:translateX(7%) translateY(-3%);} 100% {transform:translateX(-7%) translateY(0);} } @keyframes svcSheen{ 0% {left:-70%;} 55% {left:125%;} 100% {left:125%;} } @media (prefers-reduced-motion: reduce){ .svc-cta-arrow, .svc-head::before, .svc-head::after, .zone-pulse::before, .zone-pulse::after, .footer-social a::after, .header-actions .btn-primary::after, .btn::after{animation:none;} } .svc-icon{ flex:0 0 auto; width:54px; height:54px; border-radius:15px; display:flex; align-items:center; justify-content:center; background:var(--orange-500); color:#fff; box-shadow:0 8px 20px -8px rgba(235,98,38,.6); transition:transform .35s cubic-bezier(.34,1.56,.64,1); position:relative; z-index:1; } .svc-card:hover .svc-icon{transform:rotate(-8deg) scale(1.08);} .svc-head h2, .svc-head h3{font-size:1.3rem; letter-spacing:-.01em; color:var(--bg); margin:0; position:relative; z-index:1;} /* En-têtes anthracite (charte : contraste premium) avec légère nuance par service */ /* Les 4 en-tetes partent tous de l'anthracite de la charte (#1F2937). Seule la profondeur d'arrivee varie, et chaque arrivee est un assombrissement pur de cette meme couleur : aucune teinte hors palette. */ .svc-finance .svc-head{background:linear-gradient(135deg, var(--anthracite), #19212C);} .svc-web .svc-head{background:linear-gradient(135deg, var(--anthracite), #18202A);} .svc-branding .svc-head{background:linear-gradient(135deg, var(--anthracite), #171E29);} .svc-social .svc-head{background:linear-gradient(135deg, var(--anthracite), #161D27);} /* Corps de carte */ .svc-body{flex:1 1 auto; display:flex; flex-direction:column; padding:24px 26px 28px; background:#F4F4F5; border-top:1px solid var(--orange-100);} .svc-body > p{color:var(--text-soft); font-size:.98rem; line-height:1.55; margin-bottom:20px;} .svc-list{list-style:none; display:flex; flex-direction:column; gap:11px;} .svc-list li{ position:relative; padding-left:28px; font-size:.92rem; color:var(--text-main); line-height:1.4; } .svc-list li::before{ content:""; position:absolute; left:0; top:1px; width:17px; height:17px; border-radius:50%; background:var(--orange-500); background-image:var(--check); background-repeat:no-repeat; background-position:center; background-size:11px; transform:scale(.85); opacity:.9; transition:transform .3s cubic-bezier(.34,1.56,.64,1), opacity .3s ease; } .svc-card:hover .svc-list li::before{transform:scale(1); opacity:1;} /* CTA contextuel en pied de carte (sortie de conversion par levier) */ .svc-cta{ margin-top:auto; padding-top:20px; align-self:flex-start; display:inline-flex; align-items:center; gap:8px; min-height:44px; font-family:'Arimo',sans-serif; font-weight:700; font-size:.95rem; color:var(--orange-700); text-decoration:none; } .svc-cta:hover{color:var(--orange-800);} .svc-cta-arrow{transition:transform .25s ease;} .svc-cta:hover .svc-cta-arrow{transform:translateX(4px);} /* Numéro de téléphone sous le bouton du bloc contact */ .cta-phone{ margin-top:16px; font-size:.95rem; color:var(--text-soft); } .cta-phone a{ display:inline-flex; align-items:center; min-height:44px; color:var(--orange-700); font-weight:700; text-decoration:none; } .cta-phone a:hover{color:var(--orange-800); text-decoration:underline;} .service-cta .cta-phone{color:rgba(255,255,255,.82);} .service-cta .cta-phone a{color:#fff;} /* Méthode en étapes */ .method{max-width:960px; margin:var(--space-block) auto 0;} .method-head{max-width:640px; margin:0 auto 44px; text-align:center;} .method-head h2{font-size:var(--h-section); margin:14px 0 16px; letter-spacing:-.01em;} .method-head .accent{color:var(--orange-500);} .method-head p{color:var(--text-soft); font-size:1.02rem; line-height:1.6;} /* Frise reliee : le fil orange materialise la progression d'une etape a l'autre. Plus de cartes a filet : l'orange redevient un accent, conformement a la charte. */ .method-steps{ list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; } .method-steps li{position:relative; padding:0 8px; text-align:center;} .method-steps li::after{ content:""; position:absolute; z-index:0; top:18px; height:2px; left:calc(50% + 27px); width:calc(100% - 34px); background:linear-gradient(90deg, var(--orange-300), var(--orange-200)); } .method-steps li:last-child::after{content:none;} .method-steps li:hover::after{background:linear-gradient(90deg, var(--orange-400), var(--orange-300));} .step-num{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; margin:0 auto 16px; box-shadow:0 0 0 6px var(--bg), 0 8px 18px -8px rgba(235,98,38,.55); transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease; background:var(--orange-500); color:#fff; font-family:var(--font-head); font-weight:800; font-size:1.2rem; } .method-steps h3{font-size:1.08rem; margin-bottom:6px;} .method-steps li p{color:var(--text-soft); font-size:.9rem; line-height:1.45;} /* Le livrable de chaque etape : rend la promesse tangible. Meme motif que les puces des formules (libelle orange en capitales, valeur en dessous). */ /* Le livrable n'est plus annonce par un mot repete quatre fois : la convention est posee une fois dans le chapeau, puis rappelee par un signal visuel (filet + icone). */ .method-steps li p.step-livrable{ margin-top:16px; padding-top:13px; border-top:1px solid var(--gris-clair, #E5E7EB); display:flex; align-items:flex-start; justify-content:center; gap:8px; font-size:.85rem; line-height:1.4; font-weight:600; color:var(--text-main); } .step-livrable-icon{ flex:0 0 auto; width:15px; height:15px; margin-top:2px; color:var(--orange-700); transition:transform .35s cubic-bezier(.34,1.56,.64,1); } .method-steps li:hover .step-livrable-icon{transform:scale(1.12);} .method-steps li:hover .step-livrable{border-top-color:var(--orange-200);} /* Reservee aux lecteurs d'ecran : conserve le lien semantique etape -> livrable */ .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* CTA final */ .service-cta{ max-width:960px; margin:var(--space-block) auto 0; text-align:center; background:var(--anthracite); color:#fff; padding:56px 40px; border-radius:28px; } .service-cta h2{color:#fff; font-size:var(--h-section); margin-bottom:12px; letter-spacing:-.01em;} .service-cta p{color:rgba(255,255,255,.82); margin-bottom:28px; font-size:1.05rem;} /* ---------- ACCOMPAGNEMENT MENSUEL (abonnements) ---------- */ .plans{max-width:960px; margin:var(--space-block) auto 0; background:var(--anthracite); border-radius:28px; padding:56px 40px;} .plans-head{max-width:640px; margin:0 auto 44px; text-align:center;} .plans-head .eyebrow{background:rgba(235,98,38,.16); color:var(--orange-300); padding:6px 14px; border-radius:999px;} .plans-head h2{color:#fff; font-size:var(--h-section); margin:14px 0 16px; letter-spacing:-.01em;} .plans-head .accent{color:var(--orange-400);} .plans-head p{color:rgba(255,255,255,.8); font-size:1.02rem; line-height:1.6;} .plans-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px;} .plan{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:20px; padding:30px 28px 32px; transition:transform .4s cubic-bezier(.22,.9,.32,1), background .4s ease, border-color .4s ease; } .plan:hover{transform:translateY(-5px); background:rgba(255,255,255,.1); border-color:var(--orange-400);} .plan-head{display:flex; align-items:center; gap:13px; margin-bottom:16px;} .plan-icon{ flex:0 0 auto; width:42px; height:42px; border-radius:13px; display:flex; align-items:center; justify-content:center; background:var(--orange-500); color:#fff; box-shadow:0 8px 18px -8px rgba(235,98,38,.7); transition:transform .35s cubic-bezier(.34,1.56,.64,1); } .plan:hover .plan-icon{transform:rotate(-8deg) scale(1.08);} .plan h3{color:var(--bg); font-size:1.15rem; margin:0; letter-spacing:-.01em;} .plan-claim{color:rgba(255,255,255,.78); font-size:.94rem; line-height:1.5; margin-bottom:18px;} .plan-list{list-style:none; display:flex; flex-direction:column; gap:15px;} .plan-list li{position:relative; padding-left:28px;} /* Le pilier en libelle, la promesse en dessous : les 4 activites se lisent d'un coup d'oeil */ .plan-list li strong{ display:block; margin-bottom:2px; color:var(--orange-300); font-family:var(--font-head); font-weight:700; font-size:.79rem; letter-spacing:.06em; text-transform:uppercase; } .plan-list li span{display:block; font-size:.91rem; line-height:1.45; color:rgba(255,255,255,.9);} .plan-list li::before{ content:""; position:absolute; left:0; top:0; width:16px; height:16px; border-radius:50%; background:var(--orange-500); background-image:var(--check); background-repeat:no-repeat; background-position:center; background-size:10px; transform:scale(.85); opacity:.9; transition:transform .3s cubic-bezier(.34,1.56,.64,1), opacity .3s ease; } .plan:hover .plan-list li::before{transform:scale(1); opacity:1;} /* Formules : rail comparatif, volontairement different des sous-cartes de la zone d'intervention de l'accueil qui reutilisent .plan. */ .formulas{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);} .formula{padding-right:44px;} .formula-plus{padding-right:0; padding-left:44px; border-left:1px solid rgba(255,255,255,.16);} .formula-rank{ font-family:var(--font-head); font-weight:800; font-size:1.45rem; color:#fff; letter-spacing:-.01em; margin-bottom:0; } .formula-plus .formula-rank{color:var(--orange-400);} .formula-rank::after{ content:""; display:block; width:38px; height:3px; border-radius:2px; background:var(--orange-500); margin:13px 0 16px; } .formula-claim{color:rgba(255,255,255,.82); font-size:.98rem; line-height:1.6; margin-bottom:24px;} .formula-list{list-style:none; display:flex; flex-direction:column; gap:15px;} .formula-list li{display:grid; gap:3px;} .formula-list strong{ font-family:var(--font-head); font-weight:700; font-size:.85rem; color:var(--orange-300); letter-spacing:.01em; } .formula-list span{color:rgba(255,255,255,.78); font-size:.92rem; line-height:1.5;} .plans-note{margin:32px auto 0; max-width:680px; text-align:center; color:rgba(255,255,255,.72); font-size:.94rem; line-height:1.6;} /* Passerelle depuis les 4 cartes : signale l'offre recurrente sans hierarchiser les services */ .plans-bridge{max-width:960px; margin:26px auto 0; text-align:center; color:var(--text-soft); font-size:.98rem; line-height:1.6;} .plans-bridge a{color:var(--orange-700); font-weight:700; border-bottom:1px solid var(--orange-200); transition:color .25s ease, border-color .25s ease;} .plans-bridge a:hover{color:var(--orange-800); border-color:var(--orange-500);} /* Domaines couverts : lecture immediate du perimetre */ /* Domaines couverts : information, pas action. Ces libelles etaient en pastilles arrondies avec bordure, graisse 700 et voile lumineux anime, soit exactement la signature des CTA du site : ils paraissaient cliquables sans l'etre, et cohabitaient sur la meme page avec la barre d'ancres, elle bel et bien cliquable. Nouvelle forme : icone + libelle sur une seule ligne, separes par un filet fin. Aucun fond, aucune bordure, aucun rayon, aucune animation. */ .plans-domains{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px 0; margin-bottom:14px; } .plan-domain{ display:inline-flex; align-items:center; gap:10px; padding:4px 22px; color:var(--bg); font-family:var(--font-head); font-weight:600; font-size:.92rem; letter-spacing:-.005em; } .plan-domain + .plan-domain{box-shadow:inset 1px 0 0 rgba(255,255,255,.22);} .plan-domain svg{width:17px; height:17px; flex:0 0 auto; color:var(--orange-400);} .plans-domains-note{text-align:center; color:rgba(255,255,255,.62); font-size:.86rem; margin:0 0 32px;} .plans-note strong{color:#fff;} @media (max-width:55em){ .plans-grid{grid-template-columns:minmax(0,1fr); gap:14px;} } @media (max-width:47.5em){ .page-head{margin-bottom:48px;} .page-intro{font-size:1rem;} .services-cards{grid-template-columns:minmax(0,1fr); gap:18px;} .svc-head{padding:20px 22px;} .svc-body{padding:22px 22px 24px;} /* Sur mobile la frise bascule a la verticale */ .method-steps{grid-template-columns:minmax(0,1fr); gap:28px;} .method-steps li{text-align:left; padding:0 0 0 58px;} .method-steps li::after{ top:44px; bottom:-28px; left:18px; width:2px; height:auto; background:linear-gradient(180deg, var(--orange-300), var(--orange-200)); } .step-num{position:absolute; left:0; top:0; margin:0;} .method-steps li p.step-livrable{justify-content:flex-start;} .service-cta{margin-top:56px; padding:40px 24px; border-radius:22px;} .plans{padding:40px 24px; border-radius:22px;} .plans-head{margin-bottom:30px;} .plans-note{margin-top:24px; font-size:.88rem;} .plan{padding:24px 20px 26px;} .plans-domains{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 8px; justify-items:center;} .plan-domain{font-size:.85rem; padding:0; gap:8px;} .plan-domain + .plan-domain{box-shadow:none;} .plans-domains-note{margin-bottom:24px;} .plans-bridge{font-size:.92rem;} } .brand{display:flex; align-items:center; gap:10px;} .brand-logo-swap{position:relative; display:inline-block; width:126px; height:58px; transition:width .35s ease, height .35s ease;} header.compact .brand-logo-swap{width:100px; height:46px;} .brand-logo-swap img{ position:absolute; top:0; left:0; width:126px; height:58px; max-width:none; transition:opacity .4s ease, width .35s ease, height .35s ease; } header.compact .brand-logo-swap img{width:100px; height:46px;} .brand-logo-white{opacity:1;} .brand-logo-black{opacity:1;} .brand-logo-orange{opacity:0;} header.scrolled .brand-logo-white{opacity:0;} header.scrolled .brand-logo-black{opacity:0;} header.scrolled .brand-logo-orange{opacity:1;} nav.main-nav{display:flex; align-items:center; gap:8px; min-width:0;} nav.main-nav > ul{display:flex; align-items:center; gap:4px; min-width:0; flex-wrap:wrap;} .mobile-menu{display:none;} .menu-backdrop{display:none;} /* Verrou de defilement, menu mobile ouvert. La regle est portee par : body{overflow:hidden} n'a aucun effet ici, car html porte deja overflow-x:hidden, ce qui coupe la propagation vers la fenetre. Le body passe en position fixe (seule methode fiable sur iOS Safari) et le JS memorise puis restitue la position de defilement. */ html.menu-open{overflow:hidden;} html.menu-open body{position:fixed; left:0; right:0; width:100%; overflow:hidden;} nav.main-nav > ul > li > a{ font-family:var(--font-head); font-weight:600; font-size:.92rem; color:#fff; padding:10px 16px; border-radius:999px; display:inline-flex; align-items:center; gap:6px; transition:background .3s ease, color .3s ease; } nav.main-nav > ul > li > a:hover{background:rgba(255,255,255,.16); color:#fff;} header.scrolled nav.main-nav > ul > li > a{color:var(--anthracite);} header.scrolled nav.main-nav > ul > li > a:hover{background:var(--orange-50); color:var(--orange-700);} .btn{ font-family:var(--font-head); font-weight:700; font-size:.9rem; padding:12px 24px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease; position:relative; overflow:hidden; isolation:isolate; /* Neutralisation des styles natifs : indispensable des qu'un CTA est un