/* Polices chargées via + dans le de chaque page. */
:root{
--ink:#0b1324;
--muted:#627189;
--line:#e8edf5;
--soft:#f7f9fd;
--soft-2:#f1f5fb;
--blue:#3156ff;
--violet:#6f4cff;
--navy:#071426;
--navy-2:#0a1930;
--navy-3:#121c37;
--shadow:0 18px 55px rgba(16, 27, 56, .10);
--shadow-lg:0 26px 80px rgba(15, 28, 60, .18);
--radius:28px;
--max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
color:var(--ink);
background:#fff;
line-height:1.55;
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
.container{width:min(var(--max), calc(100% - 40px)); margin:0 auto}
.site-header{
position:sticky; top:0; z-index:90;
background:rgba(255,255,255,.88);
backdrop-filter:blur(14px);
border-bottom:1px solid rgba(232,237,245,.9);
}
.header-inner{
height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.logo img{height:44px; width:auto}
.main-nav{display:flex; gap:26px; align-items:center; font-size:13px; font-weight:650; color:#3f4a61}
.main-nav a{position:relative}
.main-nav a:hover,
.main-nav a.active{color:var(--blue)}
.main-nav a.active:after{
content:""; position:absolute; left:0; right:0; bottom:-27px; height:2px; background:var(--blue); border-radius:2px;
}
.menu-btn{
display:none; width:42px; height:42px; border-radius:14px; border:0; background:var(--soft-2); font-size:20px;
}
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
border-radius:999px; padding:14px 20px; font-size:14px; font-weight:800;
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{
color:#fff;
background:linear-gradient(135deg, var(--blue), var(--violet));
box-shadow:0 14px 30px rgba(75,85,255,.23);
}
.btn-secondary{
border:1px solid #d7dce7; color:#26324a; background:#fff;
}
.section-kicker{
font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:800; color:#4b61ff; margin-bottom:14px;
}
.display{
margin:0;
font-family:"Cabinet Grotesk","Inter",sans-serif;
font-size:clamp(38px, 5vw, 64px);
line-height:1.02;
letter-spacing:-.05em;
}
.display .accent,
.title .accent{color:var(--violet)}
.title{
margin:0;
font-family:"Cabinet Grotesk","Inter",sans-serif;
font-size:clamp(30px, 4vw, 48px);
line-height:1.05;
letter-spacing:-.045em;
}
.lead{
font-size:18px; color:#4d5d75; max-width:610px; margin:22px 0 28px;
}
.copy{color:var(--muted)}
.hero{
position:relative;
overflow:hidden;
padding:56px 0 58px;
background:
radial-gradient(circle at 10% 14%, rgba(67,100,255,.10), transparent 28%),
radial-gradient(circle at 84% 8%, rgba(123,77,255,.10), transparent 24%),
linear-gradient(180deg, #f7f9fe 0%, #ffffff 100%);
}
.hero:before{
content:""; position:absolute; inset:auto auto -120px -80px; width:300px; height:300px;
background:radial-gradient(circle, rgba(109,93,255,.12), rgba(109,93,255,0) 70%);
pointer-events:none;
}
.hero-grid{
display:grid; grid-template-columns:1fr 1.05fr; gap:58px; align-items:center;
}
.hero .actions{display:flex; gap:12px; flex-wrap:wrap}
.hero-features{
display:flex; gap:24px; flex-wrap:wrap; margin-top:28px; font-size:13px; color:#5f6b82;
}
.hero-features span{display:flex; align-items:center; gap:8px}
.hero-visual{
position:relative; min-height:520px;
}
.hero-photo{
width:100%; height:100%; min-height:500px; object-fit:cover;
border-radius:30px; box-shadow:var(--shadow-lg);
}
.float-card{
position:absolute; background:rgba(255,255,255,.88);
border:1px solid rgba(255,255,255,.75);
backdrop-filter: blur(12px);
box-shadow:0 22px 60px rgba(20,34,70,.14);
}
.info-card{
top:30px; right:-8px; width:250px; border-radius:28px; padding:28px;
}
.info-card p{margin:0; color:#60708a; line-height:1.55}
.info-card strong{display:block; margin-top:24px; padding-top:18px; border-top:2px solid #111827; color:#111827; font-size:16px; line-height:1.45}
.impact-card{
right:18px; bottom:34px; border-radius:24px; background:#071426; color:#fff; padding:20px 22px; display:flex; gap:16px; align-items:center; max-width:320px;
border:1px solid rgba(115,132,255,.24);
}
.impact-card .mini{
width:66px; height:66px; border-radius:16px; background:#ffffff; display:grid; place-items:center; color:#5b57ff; font-size:28px; flex:0 0 auto;
}
.hero-hand{
position:absolute; left:42%; top:58px; transform:rotate(-10deg);
color:#fff; font-weight:700; font-size:18px; line-height:1.28;
text-shadow:0 2px 12px rgba(0,0,0,.28);
font-family:"Caveat","Segoe Script",cursive;
}
.section{padding:72px 0}
.dark{
position:relative; overflow:hidden; color:#fff;
background:linear-gradient(145deg, var(--navy), var(--navy-2) 70%, #1a0e43 100%);
}
.dark:before{
content:""; position:absolute; right:-80px; bottom:-80px; width:260px; height:260px;
background:radial-gradient(circle, rgba(127,88,255,.28), rgba(127,88,255,0) 68%);
}
.section-head{
display:grid; grid-template-columns:.95fr 1.05fr; gap:38px; align-items:end; margin-bottom:30px;
}
.section-head p{margin:0; color:#647189}
.dark .section-head p{color:#c4cede}
.services{
display:grid; grid-template-columns:repeat(6, 1fr); gap:14px;
}
.service-card{
background:rgba(255,255,255,.96); color:var(--ink);
border:1px solid rgba(238,241,246,1); border-radius:18px;
padding:18px 16px 20px;
box-shadow:0 12px 28px rgba(0,0,0,.06);
}
.service-card .icon{
width:44px; height:44px; border-radius:14px; display:grid; place-items:center;
font-size:19px; font-weight:800; margin-bottom:14px;
}
.service-card:nth-child(1) .icon{background:#efeaff;color:#5b4fff}
.service-card:nth-child(2) .icon{background:#e8fbf4;color:#17a77c}
.service-card:nth-child(3) .icon{background:#edf1ff;color:#4568ff}
.service-card:nth-child(4) .icon{background:#fff1e9;color:#ec6f3b}
.service-card:nth-child(5) .icon{background:#f1ebff;color:#7450ff}
.service-card:nth-child(6) .icon{background:#ebfaf1;color:#1f9f6f}
.service-card h3{
margin:0 0 8px; font-size:16px; line-height:1.2; font-family:"Cabinet Grotesk","Inter",sans-serif;
}
.service-card p{margin:0; font-size:13px; color:#687589}
.tech-section{
position:relative;
padding:76px 0;
background:
radial-gradient(circle at 8% 10%, rgba(67,100,255,.08), transparent 26%),
linear-gradient(180deg, #ffffff, #fbfcff);
}
.tech-wrap{
display:grid; grid-template-columns:.78fr 1.22fr; gap:34px; align-items:start;
}
.tech-intro .title{max-width:380px}
.tech-intro p{font-size:14px; color:#68758c; max-width:370px}
.tech-cards{
display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
.tech-card{
border:1px solid var(--line);
background:linear-gradient(180deg, #fff, #fbfcff);
border-radius:24px; padding:22px 22px 20px;
box-shadow:0 12px 34px rgba(25,37,66,.06);
}
.tech-card .topline{
display:flex; align-items:center; gap:12px; margin-bottom:14px;
}
.tech-card .icon{
width:42px; height:42px; border-radius:14px; display:grid; place-items:center; font-size:18px; font-weight:800;
flex:0 0 auto;
}
.tech-card:nth-child(1) .icon{background:#e9faf4;color:#18a57d}
.tech-card:nth-child(2) .icon{background:#edf1ff;color:#4c60ff}
.tech-card:nth-child(3) .icon{background:#eef7f0;color:#178f69}
.tech-card:nth-child(4) .icon{background:#fff2ea;color:#ef7139}
.tech-card h3{
margin:0; font-size:20px; line-height:1.15; font-family:"Cabinet Grotesk","Inter",sans-serif;
min-width:0; hyphens:auto;
}
.tech-card p{margin:0 0 14px; color:#6b778d; font-size:14px}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{
padding:7px 10px; border-radius:999px; border:1px solid #e6ebf4; background:#f9fbff;
font-size:13px; color:#334159;
}
.tech-note{
margin-top:20px; padding:0;
font-size:14px; color:#5f6d85;
}
.tech-note span{
display:inline-flex; align-items:center; gap:8px;
padding:10px 14px; border-radius:999px; background:#f2f5fd; border:1px solid #e9eef7;
}
.projects{
position:relative; overflow:hidden;
padding:70px 0;
background:linear-gradient(145deg, var(--navy), var(--navy-2) 74%, #130d35);
color:#fff;
}
.projects:after{
content:""; position:absolute; left:-70px; bottom:-90px; width:220px; height:220px;
background:radial-gradient(circle, rgba(74,96,255,.30), rgba(74,96,255,0) 70%);
}
.projects-layout{
display:grid; grid-template-columns:.72fr 1.28fr; gap:26px; align-items:start;
}
.projects-intro p{color:#c2cee0; max-width:340px}
.project-grid{
display:grid; grid-template-columns:1fr 1fr; gap:18px;
}
.project-card{
overflow:hidden; border-radius:20px; background:#fff; color:var(--ink);
box-shadow:0 22px 55px rgba(0,0,0,.18);
}
.project-media{
position:relative; overflow:hidden;
}
.project-media img{
width:100%; height:245px; object-fit:cover;
}
.project-body{padding:20px}
.badge{
display:inline-flex; align-items:center; gap:8px;
padding:6px 10px; border-radius:999px; background:#eef1ff; color:#5362ff; font-size:11px; font-weight:800; margin-bottom:10px;
}
.project-card h3{margin:0 0 8px; font-size:24px; line-height:1.08; font-family:"Cabinet Grotesk","Inter",sans-serif}
.project-card p{margin:0; color:#68768d; font-size:14px}
.tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.tag{padding:6px 10px; border-radius:999px; background:#f2f5f8; color:#536177; font-size:12px}
.approach{
padding:70px 0 48px;
background:#fff;
}
.approach-layout{
display:grid; grid-template-columns:.72fr 1.28fr; gap:34px; align-items:start;
}
.approach-copy p{font-size:14px; color:#6a778e; max-width:310px}
.steps{
position:relative;
display:grid; grid-template-columns:repeat(6, 1fr); gap:12px;
}
.steps:before{
content:""; position:absolute; left:18px; right:18px; top:18px; height:2px; background:#dce2ff;
}
.step{position:relative; z-index:1}
.step-num{
width:36px; height:36px; border-radius:50%;
display:grid; place-items:center;
background:linear-gradient(135deg, var(--blue), var(--violet));
color:#fff; font-size:12px; font-weight:800; margin-bottom:12px;
}
.step h3{margin:0 0 6px; font-size:15px; line-height:1.2; font-family:"Cabinet Grotesk","Inter",sans-serif}
.step p{margin:0; font-size:12px; color:#6a768b}
.why{
overflow:hidden;
background:#fff;
}
.why-grid{
display:grid; grid-template-columns:.82fr 1.18fr; align-items:stretch;
}
.why-visual{
position:relative; min-height:360px;
}
.why-visual img{
width:100%; height:100%; object-fit:cover;
}
.why-hand{
position:absolute; right:36px; bottom:28px;
color:#fff; font-size:18px; line-height:1.22; font-weight:700;
font-family:"Caveat","Segoe Script",cursive;
text-shadow:0 2px 12px rgba(0,0,0,.32);
transform:rotate(-6deg);
max-width:260px;
}
.why-copy{
padding:52px 56px 52px 52px; display:flex; flex-direction:column; justify-content:center;
}
.values{
display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; margin-top:18px;
}
.value .v-icon{
font-size:24px; color:#5d57ff; margin-bottom:8px;
}
.value h3{margin:0 0 4px; font-size:15px; font-family:"Cabinet Grotesk","Inter",sans-serif}
.value p{margin:0; font-size:12px; color:#68768d}
.cta-band{
position:relative; overflow:hidden;
padding:38px 0;
background:linear-gradient(135deg, #071426, #0b1830 65%, #281250);
color:#fff;
}
.cta-band:before{
content:""; position:absolute; inset:auto auto -90px -50px; width:240px; height:240px;
background:radial-gradient(circle, rgba(99,99,255,.35), rgba(99,99,255,0) 70%);
}
.cta-band-inner{
position:relative;
display:grid; grid-template-columns:1fr .8fr auto; gap:24px; align-items:center;
}
.cta-band p{margin:0; color:#c5cfe0; font-size:14px}
.footer{
background:#fff; padding:26px 0 24px;
}
.footer-top{
display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.footer-links{
display:flex; gap:18px; flex-wrap:wrap; font-size:12px; color:#5e6b81;
}
.footer-bottom{
display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
border-top:1px solid var(--line); margin-top:20px; padding-top:18px; font-size:11px; color:#7a879a;
}
.contact-hero{
padding:54px 0 34px;
background:
radial-gradient(circle at 10% 14%, rgba(67,100,255,.10), transparent 28%),
linear-gradient(180deg, #f7f9fe 0%, #ffffff 100%);
}
.contact-wrap{
display:grid; grid-template-columns:.66fr 1.34fr; gap:20px; padding:10px 0 72px;
}
.panel{
border:1px solid var(--line);
background:linear-gradient(180deg, #fff, #fbfcff);
border-radius:24px; padding:26px;
box-shadow:0 14px 40px rgba(24,35,64,.08);
}
.panel h2{
margin:0 0 12px;
font-family:"Cabinet Grotesk","Inter",sans-serif;
font-size:30px; line-height:1.08; letter-spacing:-.03em;
}
.info-item{
padding:18px 0; border-bottom:1px solid var(--line);
}
.info-item:last-child{border-bottom:none}
.info-item strong{display:block; margin-bottom:5px}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.field.full{grid-column:1 / -1}
label{display:block; font-size:13px; font-weight:700; margin-bottom:6px}
input, select, textarea{
width:100%; border:1px solid #d9dfeb; border-radius:14px; padding:13px 14px;
font:inherit; color:var(--ink); background:#fff;
}
textarea{min-height:150px; resize:vertical}
input:focus, select:focus, textarea:focus{
outline:none; border-color:#9eb0ff; box-shadow:0 0 0 4px rgba(74,96,255,.10);
}
.small{font-size:12px; color:#738095}
.consent{
display:flex; gap:10px; align-items:flex-start; margin:16px 0;
}
.consent input{width:auto; margin-top:4px}
.notice{
display:none; margin-top:14px; padding:12px 14px; border-radius:12px; font-size:13px;
}
.notice.ok{display:block; background:#eaf9f2; color:#17694d}
.notice.err{display:block; background:#fff1f1; color:#a43636}
.legal{
padding:56px 0 82px;
}
.legal article{max-width:860px}
.legal h1{
margin:0;
font-family:"Cabinet Grotesk","Inter",sans-serif;
font-size:48px; line-height:1.05; letter-spacing:-.04em;
}
.legal h2{
margin:28px 0 10px;
font-family:"Cabinet Grotesk","Inter",sans-serif;
font-size:24px; line-height:1.1; letter-spacing:-.03em;
}
.legal p, .legal li{color:#5d697f}
.pending{
margin-top:18px; padding:12px 14px; border-radius:12px; background:#fff7df; border:1px solid #f1d88a; color:#6a5713;
}
@media (max-width: 1080px){
.services{grid-template-columns:repeat(3, 1fr)}
.hero-grid, .section-head, .tech-wrap, .projects-layout, .approach-layout, .why-grid, .contact-wrap{grid-template-columns:1fr}
.tech-cards{grid-template-columns:1fr 1fr}
.values{grid-template-columns:1fr 1fr}
.cta-band-inner{grid-template-columns:1fr}
.approach-copy p{max-width:none}
}
@media (max-width: 820px){
.main-nav{display:none}
.menu-btn{display:block}
.site-header.open .main-nav{
display:flex; position:absolute; top:76px; left:0; right:0; padding:18px 20px;
background:#fff; border-bottom:1px solid var(--line); flex-direction:column; align-items:flex-start;
}
.main-nav a.active:after{display:none}
.hero{padding-top:38px}
.hero-visual{min-height:420px}
.hero-photo{min-height:380px}
.info-card{position:relative; top:auto; right:auto; width:100%; margin-top:16px}
.impact-card{position:relative; right:auto; bottom:auto; margin-top:16px; max-width:none}
.hero-hand{left:32px; top:28px}
.services, .project-grid, .form-grid, .tech-cards, .values{grid-template-columns:1fr}
.field.full{grid-column:auto}
.steps{grid-template-columns:1fr 1fr}
.steps:before{display:none}
}
@media (max-width: 560px){
.container{width:min(var(--max), calc(100% - 28px))}
.hero-features{gap:14px}
.section, .projects, .tech-section, .approach{padding:54px 0}
.display{font-size:42px}
.title{font-size:32px}
.steps, .values{grid-template-columns:1fr}
.why-copy{padding:36px 22px}
}
/* V3 — fluidité inspirée des compositions éditoriales de Marmelab */
@media (min-width:1081px){
.tech-wrap{
grid-template-columns:.78fr 1.22fr;
gap:48px;
}
}
.tech-cards{
display:grid;
grid-template-columns:repeat(4, minmax(0,1fr));
gap:0;
align-items:start;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
}
.tech-card{
border:0;
border-right:1px solid var(--line);
border-radius:0;
padding:24px 20px 26px;
background:transparent;
box-shadow:none;
min-height:100%;
}
.tech-card:first-child{padding-left:0}
.tech-card:last-child{border-right:0;padding-right:0}
.tech-card .topline{
align-items:flex-start;
gap:12px;
margin-bottom:14px;
}
.tech-card h3{
font-size:18px;
}
.tech-card p{
min-height:78px;
margin-bottom:16px;
}
.chips{
gap:7px;
}
.chip{
background:#fff;
border:1px solid #e6ebf4;
box-shadow:none;
padding:6px 9px;
font-size:12px;
}
.tech-note{display:none!important}
/* Hero: photo itself stays clean; all informational copy is now live HTML. */
.hero-visual{
min-height:510px;
padding-right:92px;
}
.hero-photo{
min-height:500px;
object-position:center center;
}
.info-card{
right:0;
top:28px;
width:235px;
padding:26px 24px;
}
.info-card p{
white-space:normal;
overflow:visible;
}
.info-card strong{
white-space:normal;
}
.impact-card{
right:8px;
bottom:28px;
max-width:290px;
}
.impact-card strong{
display:inline;
}
/* "Pourquoi" : texte manuscrit en HTML, plus aucune phrase importante dans l'image. */
.why-visual img{
object-position:left center;
}
/* Réduire la sensation de murs de blocs sur l'ensemble. */
.service-card{
box-shadow:none;
border-color:rgba(255,255,255,.10);
}
.project-card{
box-shadow:0 18px 42px rgba(0,0,0,.13);
}
.section-head,
.projects-layout,
.approach-layout{
column-gap:52px;
}
@media (max-width:1080px){
.tech-cards{
grid-template-columns:1fr 1fr;
}
.tech-card:nth-child(2){
border-right:0;
}
.tech-card:nth-child(1),
.tech-card:nth-child(2){
border-bottom:1px solid var(--line);
}
.tech-card:first-child{padding-left:20px}
.tech-card:last-child{padding-right:20px}
}
@media (max-width:820px){
.hero-visual{padding-right:0}
.tech-cards{grid-template-columns:1fr}
.tech-card{
border-right:0;
border-bottom:1px solid var(--line);
padding:20px 0;
}
.tech-card:last-child{border-bottom:0}
.tech-card:first-child{padding-left:0}
.tech-card:last-child{padding-right:0}
}
/* =========================================================
V3.2 — Final UI polish
========================================================= */
/* More editorial rhythm and less "stacked SaaS dashboard". */
section[id]{
scroll-margin-top:92px;
}
.section-kicker{
opacity:.95;
}
.hero-grid{
gap:64px;
}
.hero .lead{
max-width:590px;
}
.hero-photo{
filter:saturate(.96) contrast(1.02);
}
.float-card{
transition:transform .25s ease, box-shadow .25s ease;
}
.float-card:hover{
transform:translateY(-3px);
box-shadow:0 26px 70px rgba(20,34,70,.18);
}
/* Make service cards feel lighter and more editorial. */
.services{
gap:12px;
}
.service-card{
min-height:196px;
padding:20px 18px 22px;
transition:transform .2s ease, background .2s ease;
}
.service-card:hover{
transform:translateY(-3px);
background:#fff;
}
.service-card p{
line-height:1.55;
}
/* Technologies: open, calm and aligned. */
.tech-section{
padding-top:82px;
padding-bottom:82px;
}
.tech-wrap{
align-items:center;
}
.tech-intro{
align-self:start;
position:sticky;
top:112px;
}
.tech-intro p{
max-width:390px;
line-height:1.7;
}
.tech-cards{
background:transparent;
}
.tech-card{
min-height:285px;
}
.tech-card p{
line-height:1.55;
}
.chip{
transition:border-color .15s ease, background .15s ease;
}
.chip:hover{
border-color:#cfd8ff;
background:#f5f7ff;
}
/* Portfolio cards: image-led, with tighter content rhythm. */
.project-card{
border:1px solid rgba(255,255,255,.10);
}
.project-media img{
transition:transform .35s ease;
}
.project-card:hover .project-media img{
transform:scale(1.02);
}
.project-body{
padding:20px 22px 22px;
}
.project-card h3{
margin-top:0;
}
/* Method: make the progression line subtler and cleaner. */
.steps:before{
background:linear-gradient(90deg,#dce2ff 0%,#b8c2ff 50%,#dce2ff 100%);
}
.step-num{
box-shadow:0 6px 18px rgba(75,85,255,.18);
}
/* Why section: improve visual transition into white content. */
.why-copy{
background:linear-gradient(90deg,#fff 0%,#fff 80%,#fbfcff 100%);
}
.why-hand{
max-width:230px;
}
/* CTA feels like a conclusion, not another content block. */
.cta-band{
padding-top:42px;
padding-bottom:42px;
}
.cta-band .title{
max-width:560px;
}
/* Header/footer refinements */
.site-header{
box-shadow:0 1px 0 rgba(15,24,42,.03);
}
.footer-links a:hover{
color:var(--blue);
}
/* Better focus visibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
outline:3px solid rgba(49,86,255,.28);
outline-offset:3px;
}
/* Respect motion preferences */
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto}
*,
*:before,
*:after{
transition:none!important;
animation:none!important;
}
}
/* Tablet/mobile: remove sticky tech intro and keep the hero cards readable. */
@media (max-width:1080px){
.tech-intro{
position:static;
}
.tech-card{
min-height:auto;
}
}
@media (max-width:820px){
.hero-grid{
gap:34px;
}
.hero-visual{
min-height:auto;
}
.hero-photo{
min-height:360px;
}
.info-card,
.impact-card{
box-shadow:0 14px 36px rgba(20,34,70,.12);
}
.tech-section{
padding-top:58px;
padding-bottom:58px;
}
}
@media (max-width:560px){
.hero-photo{
min-height:310px;
}
.hero-hand{
font-size:15px;
left:22px;
}
.service-card{
min-height:auto;
}
.project-media img{
height:220px;
}
}
/* ===========================================================================
V4 — finition
Aucune modification d'identité : mêmes couleurs de marque, même composition,
même contenu. On corrige ce qui était sous le seuil, et on affine.
=========================================================================== */
/* --- Contraste : ces gris passaient sous 4,5:1 (mesuré) ------------------- */
.section-kicker{ color:#3a4fd8 } /* était 4,30:1 sur le hero */
.dark .section-kicker,
.projects .section-kicker,
.cta-band .section-kicker{ color:#a5b6ff } /* était 3,85:1 sur fond navy */
.service-card p{ color:#5d6a7d } /* était 4,31:1 */
.tech-card p{ color:#616d83 } /* était 4,47:1 */
.step p{ color:#616d81 } /* était 4,59:1, limite */
/* --- Focus : un anneau plein, et lisible sur les sections sombres --------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
outline:3px solid #2f49ff;
outline-offset:3px;
}
.dark a:focus-visible,
.dark button:focus-visible,
.projects a:focus-visible,
.cta-band a:focus-visible{
outline-color:#ffd45e;
}
/* --- Affordances honnêtes : ces éléments ne sont pas des liens ------------ */
.service-card{ transition:none }
.service-card:hover{ transform:none; background:rgba(255,255,255,.96) }
.float-card{ transition:none }
.float-card:hover{ transform:none; box-shadow:var(--shadow) }
.chip{ transition:none }
.chip:hover{ border-color:#e6ebf4; background:#f9fbff }
.project-media img{ transition:none }
.project-card:hover .project-media img{ transform:none }
/* --- La ligne de progression s'arrêtait après la sixième étape ------------ */
.steps:before{ right:calc(100% / 6 - 18px) }
/* --- Titres : équilibrer les rangées plutôt que forcer des
----------- */
.title, .display{ text-wrap:balance }
/* --- Rythme : plus d'air au-dessus d'un titre qu'en dessous --------------- */
.section-kicker{ margin-bottom:10px }
.section-head{ margin-bottom:44px }
/* --- Les visuels projets sont maintenant nets : on les laisse respirer ---- */
.project-media img{ image-rendering:auto }
/* --- Formulaire : états réels ------------------------------------------- */
.btn[disabled]{ opacity:.6; cursor:progress; transform:none }
.btn[disabled]:hover{ transform:none }
::placeholder{ color:#7b869a; opacity:1 }
.notice:empty{ display:none }
.notice.ok{ color:#177a55 }
.notice.err{ color:#b3402a }
/* --- Coordonnées visibles dans le pied de page ---------------------------- */
.footer-contact{
display:block; margin-top:8px; font-size:14px; color:#5d6a7d;
}
.footer-contact a{ color:#2f49ff; text-decoration:underline; text-underline-offset:3px }
/* --- Menu mobile : cibles tactiles conformes ----------------------------- */
@media (max-width:1080px){
.main-nav a{ padding-top:12px; padding-bottom:12px }
.menu-btn{ min-width:44px; min-height:44px }
}
/* --- Jeu d'icônes dessiné : un seul tracé, une seule graisse --------------- */
.service-card .icon svg,
.tech-card .icon svg{ width:22px; height:22px; display:block }
.value .v-icon svg{ width:24px; height:24px; display:block }
.hero-features span svg{
width:16px; height:16px; flex:0 0 auto; opacity:.85;
}
.hero-features span{ display:inline-flex; align-items:center; gap:7px }
/* --- Cartes technologies : l'icône passe au-dessus du titre, comme sur les
cartes de services, pour que le titre dispose de toute la colonne ---- */
.tech-card .topline{
flex-direction:column; align-items:flex-start; gap:10px;
}
.tech-card h3{ hyphens:manual }
/* --- Rappels du hero : deux colonnes régulières plutôt qu'un orphelin ----- */
@media (min-width:821px){
.hero-features{
display:grid; grid-template-columns:repeat(2, max-content); gap:10px 26px;
}
}
/* --- Coordonnées : lisibles aussi sur les fonds sombres ------------------- */
.cta-band .footer-contact{ color:#aab8d8 }
.cta-band .footer-contact a{ color:#c9d4ff }
/* --- Styles sortis des attributs HTML pour permettre une CSP stricte ------ */
.lead-etroit{ max-width:680px }
.hp{ position:absolute; left:-9999px }
.retour{ margin-top:26px }
/* --- Dans le corps de texte, un lien doit ressembler à un lien ------------
Le réglage global a{color:inherit;text-decoration:none} sert la navigation
et les boutons ; il rendait invisibles les liens de contenu, dont l'adresse
email de la page contact. */
.legal article p a,
.info-item a,
.consent a{
color:#2f49ff;
text-decoration:underline;
text-underline-offset:3px;
text-decoration-thickness:1px;
}
.legal article p a:hover,
.info-item a:hover,
.consent a:hover{ text-decoration-thickness:2px }
.legal article p a.btn{ color:#fff; text-decoration:none }