/* ==========================================================================
   Aimek — design system (refonte 2026)
   1. Tokens  2. Base  3. Layout  4. Boutons  5. En-tête  6. Sections & composants
   7. Formulaires & RDV  8. Blog  9. Pied de page  10. Flottants & consentement
   11. Animations  12. Photographies  13. Mobile  14. Accueil et vitrines
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/inter-latin-wght-normal.woff2") format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;src:url("../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/instrument-serif-latin-400-italic.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2")}

:root{
	/* Encre et papier : un bleu nuit presque noir, un blanc légèrement froid. */
	--ink:#0b1020;--ink-2:#141b2f;--ink-3:#1e2740;
	--paper:#f8f9fc;--paper-2:#eff2f8;--paper-3:#e5e9f2;--white:#fff;
	--text:#232a3b;--muted:#596276;--muted-dark:#a6b0c5;
	--line:#e1e5ee;--line-2:#cbd2e0;--line-dark:#29334d;
	/* Indigo de marque. Le ton foncé porte le texte blanc (contraste AA), le
	   ton vif et le dégradé servent aux accents et aux fonds sombres. */
	--accent:#4f46e5;--accent-hover:#4338ca;--accent-bright:#6366f1;--accent-soft:#eef0ff;--accent-on-dark:#a5b4fc;
	--grad:linear-gradient(115deg,#7c83f7 0%,#5b53ee 50%,#4338ca 100%);
	/* Texte en dégradé sur fond sombre : des tons clairs, lisibles sur l'encre. */
	--grad-text:linear-gradient(115deg,#dfe6ff 0%,#a5b4fc 45%,#8b93ff 100%);
	--grad-btn:linear-gradient(180deg,#5b53ee 0%,#4338ca 100%);
	--wa:#0e7a43;--wa-hover:#0a5f34;--ok:#0e7a43;--err:#b42318;
	--font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
	--display:"Plus Jakarta Sans","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
	--serif:"Instrument Serif",Georgia,"Times New Roman",serif;
	--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
	--radius:18px;--radius-sm:12px;--radius-lg:28px;
	--shadow-sm:0 1px 2px rgba(11,16,32,.05),0 2px 8px -4px rgba(11,16,32,.08);
	--shadow:0 1px 2px rgba(11,16,32,.04),0 12px 32px -16px rgba(11,16,32,.2);
	--shadow-lg:0 2px 6px rgba(11,16,32,.05),0 28px 56px -24px rgba(11,16,32,.3);
	--shadow-xl:0 4px 10px rgba(11,16,32,.06),0 40px 80px -30px rgba(11,16,32,.45);
	--ease:cubic-bezier(.22,.61,.36,1);
	--wrap:1200px;--gutter:clamp(20px,4vw,40px);--section:clamp(64px,9vw,120px);
	--header-h:74px;
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--font);font-size:1.0625rem;line-height:1.68;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"cv11","ss01"}
img,svg{max-width:100%;height:auto;vertical-align:middle}
h1,h2,h3,h4{margin:0 0 .5em;font-family:var(--display);color:var(--ink);line-height:1.12;letter-spacing:-.025em;font-weight:760;text-wrap:balance}
h1{font-size:clamp(2.3rem,5.4vw,4.1rem);letter-spacing:-.04em;line-height:1.03;font-weight:800}
h2{font-size:clamp(1.85rem,3.7vw,2.9rem);letter-spacing:-.035em;line-height:1.07}
h3{font-size:1.2rem;line-height:1.28;letter-spacing:-.018em;font-weight:720}
h4{font-size:1.05rem}
/* Le mot-clé d'un titre, en italique serif : la signature de la marque. */
h1 em,h2 em,.cta-box h2 em{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.08em;letter-spacing:-.01em;color:var(--accent);padding-right:.04em}
p{margin:0 0 1.1em;text-wrap:pretty}
a{color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--accent-hover)}
ul,ol{margin:0 0 1.1em;padding-left:1.25em}
strong{font-weight:650;color:var(--ink)}
.nw{white-space:nowrap}
/* Ponctuation des titres, resserrée (voir aimek_typo). */
h1>.pct,h2>.pct,h3>.pct,h1 .nw+.pct,h2 .nw+.pct{margin-left:-.07em}
/* Après l'italique (plus grand, avec une marge droite) : l'écart est plus large. */
h1>.pct--em,h2>.pct--em,h3>.pct--em{margin-left:-.1em}
code{font-family:var(--mono);font-size:.86em;background:var(--paper-2);border:1px solid var(--line);border-radius:6px;padding:.1em .35em;word-break:break-word}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--ink);color:var(--paper)}
.skip-link{position:absolute;left:-999px;top:8px;z-index:1000;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px}
.skip-link:focus{left:8px}
.icon{flex:none}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* ---------- 3. Layout ---------- */
.wrap{width:100%;max-width:calc(var(--wrap) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:calc(780px + var(--gutter)*2)}
.section{padding-block:var(--section)}
.section--alt{background:var(--paper-2)}
.section--white{background:var(--white)}
.section--dark{background:var(--ink);color:#d5dbe8;background-image:radial-gradient(60% 70% at 100% 0%,rgba(99,102,241,.14),transparent 60%)}
.section--dark .section-intro,.section--dark p{color:var(--muted-dark)}
.section--dark h2,.section--dark h3,.section--dark strong{color:var(--white)}
.section--dark h2 em{color:var(--accent-on-dark)}
.section--dark .card{background:var(--ink-2);border-color:var(--line-dark);color:var(--paper);box-shadow:none}
/* Surtitres des cartes sur fond sombre : l'indigo de base y est illisible. */
.section--dark .card-kicker,.section--dark .case-meta,.card--feature .card-kicker{color:var(--accent-on-dark)}
.section--dark .card p{color:#c3cadb}
.section--dark .checklist li{color:var(--paper)}
.section-head{max-width:780px;margin-bottom:clamp(32px,4.5vw,56px)}
.section-head h2{margin-bottom:.4em}
.section-intro,.section-outro{font-size:1.14rem;line-height:1.6;color:var(--muted);margin:0}
.section-outro{margin-top:32px;max-width:760px;color:var(--text)}
/* Sur-titre : une pastille, repère de lecture de chaque section. */
.eyebrow{display:inline-flex;align-items:center;gap:9px;max-width:100%;margin:0 0 20px;padding:6px 13px 6px 11px;border:1px solid rgba(79,70,229,.16);border-radius:999px;background:var(--accent-soft);font-family:var(--mono);font-size:.7rem;font-weight:500;line-height:1.35;letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.eyebrow::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px rgba(79,70,229,.14)}
.eyebrow a{color:inherit;text-decoration:none}
.section--dark .eyebrow,.cta-box .eyebrow,.section-hero--home .eyebrow{color:#c7d2fe;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
.section--dark .eyebrow::before,.cta-box .eyebrow::before,.section-hero--home .eyebrow::before{box-shadow:0 0 0 3px rgba(165,180,252,.2)}
.grid{display:grid;gap:20px}
.grid>*{min-width:0}
@media (min-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}}
.prose{max-width:760px}
.prose>*:last-child{margin-bottom:0}
.prose h3{margin-top:1.8em}
.prose li{margin-bottom:.4em}
.prose table{width:100%;border-collapse:collapse;margin:1.5em 0;font-size:.95rem}
.prose th,.prose td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.prose th{background:var(--paper-2)}

/* ---------- 4. Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;min-height:52px;padding:13px 26px;border:1.5px solid transparent;border-radius:999px;font:inherit;font-size:1rem;font-weight:620;line-height:1.2;letter-spacing:-.005em;text-decoration:none;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s,transform .2s var(--ease),box-shadow .2s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--grad-btn);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 24px -10px rgba(79,70,229,.6)}
.btn-primary:hover{background:linear-gradient(180deg,#6660f2 0%,#4f46e5 100%);color:#fff;transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 16px 30px -12px rgba(79,70,229,.7)}
.btn-primary .icon{transition:transform .2s var(--ease)}
.btn-primary:hover .icon{transform:translateX(4px)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--ink-3);color:#fff;transform:translateY(-2px)}
.btn-ghost{background:var(--white);border-color:var(--line-2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-wa{background:var(--wa);color:#fff}
.btn-wa:hover{background:var(--wa-hover);color:#fff;transform:translateY(-2px)}
.btn-wa-ghost{border-color:var(--wa);color:var(--wa);background:transparent}
.btn-wa-ghost:hover{background:var(--wa);color:#fff}
.btn-wa-icon{min-height:44px;width:44px;padding:0;color:var(--wa);border-color:var(--line);background:var(--white)}
.btn-wa-icon:hover{background:var(--wa);border-color:var(--wa);color:#fff}
.btn-sm{min-height:44px;padding:9px 20px;font-size:.94rem}
.btn-block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.section--dark .btn-ghost,.section-cta .btn-ghost,.section-hero--home .btn-ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:#fff}
.section--dark .btn-ghost:hover,.section-cta .btn-ghost:hover,.section-hero--home .btn-ghost:hover{background:#fff;border-color:#fff;color:var(--ink)}
.link-btn{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
/* Lien fléché : secondaire, mais jamais anodin. */
.link-arrow{display:inline-flex;align-items:center;gap:7px;font-weight:650;font-size:.95rem;color:var(--ink);text-decoration:none}
.link-arrow .icon{transition:transform .2s var(--ease)}
.link-arrow:hover{color:var(--accent)}
.link-arrow:hover .icon{transform:translateX(4px)}

/* ---------- 5. En-tête ---------- */
/* Le flou est porté par un pseudo-élément : appliqué au header lui-même, il en ferait
   le bloc conteneur du menu mobile en position fixed, qui ne couvrirait plus l'écran. */
.site-header{position:sticky;top:0;z-index:100;border-bottom:1px solid rgba(203,210,224,.6)}
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(248,249,252,.82);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px)}
.header-inner{display:flex;align-items:center;gap:16px;min-height:var(--header-h)}
.site-header .wrap{max-width:calc(1320px + var(--gutter)*2)}
.logo{display:inline-flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none;margin-right:auto}
.logo:hover{color:var(--ink)}
.logo-mark{width:38px;height:38px}
.logo-text{display:flex;flex-direction:column;line-height:1.15}
.logo-text strong{font-family:var(--display);font-size:1.04rem;letter-spacing:-.02em;font-weight:780}
.logo-text em{font-family:var(--mono);font-style:normal;font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.header-actions{display:flex;align-items:center;gap:10px;flex:none}
.burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:var(--white);color:var(--ink);cursor:pointer}
.burger-close{display:none}
.burger[aria-expanded="true"] .burger-open{display:none}
.burger[aria-expanded="true"] .burger-close{display:block}
.nav-list{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.nav-item{position:relative}
.nav-link{display:inline-flex;align-items:center;gap:4px;padding:10px 11px;white-space:nowrap;border:0;border-radius:10px;background:none;font:inherit;font-size:.94rem;font-weight:560;color:var(--ink);text-decoration:none;cursor:pointer}
.nav-link:hover{background:rgba(11,16,32,.045);color:var(--ink)}
.nav-toggle .icon{transition:transform .15s}
.nav-toggle[aria-expanded="true"] .icon{transform:rotate(180deg)}
.sub{display:none;position:absolute;left:-12px;top:calc(100% + 10px);min-width:340px;padding:10px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-xl)}
.sub::before{content:"";position:absolute;inset:-12px 0 auto;height:12px}
.sub-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.sub-list a{display:block;padding:11px 13px;border-radius:var(--radius-sm);color:var(--ink);text-decoration:none;transition:background-color .15s}
.sub-list a:hover{background:var(--paper-2)}
.sub-list strong{display:block;font-size:.95rem;font-weight:650}
.sub-list span{display:block;font-size:.84rem;color:var(--muted);line-height:1.4}
.nav-cta-mobile{display:none}
@media (min-width:1101px){
	.sub-list--2{grid-template-columns:1fr 1fr;min-width:620px}
	.has-sub:hover .sub,.has-sub:focus-within .sub,.nav-toggle[aria-expanded="true"]+.sub{display:block}
}
@media (max-width:1100px){
	.burger{display:inline-flex}
	.site-nav{display:none;position:fixed;inset:var(--header-h) 0 0;z-index:99;overflow-y:auto;background:var(--paper);padding:16px var(--gutter) 120px;border-top:1px solid var(--line)}
	.nav-open .site-nav{display:block}
	.nav-open{overflow:hidden}
	.nav-list{flex-direction:column;align-items:stretch;gap:0}
	.nav-item{border-bottom:1px solid var(--line)}
	.nav-link{width:100%;justify-content:space-between;padding:17px 4px;font-family:var(--display);font-size:1.12rem;font-weight:700}
	.nav-link:hover{background:none}
	.sub{position:static;min-width:0;border:0;box-shadow:none;background:none;padding:0 0 12px}
	.nav-toggle[aria-expanded="true"]+.sub{display:block}
	.sub-list a{padding:9px 4px}
	.sub-list span{display:none}
	.nav-cta-mobile{display:grid;gap:10px;margin-top:24px}
}
@media (max-width:1240px){.logo-text em{display:none}}
@media (max-width:820px){.header-cta{display:none}}
.is-landing .logo{pointer-events:none}

/* Fil d'Ariane */
.breadcrumbs{padding-top:18px;font-size:.84rem;color:var(--muted)}
.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.breadcrumbs li+li::before{content:"/";margin-right:6px;color:var(--line-2)}
.breadcrumbs a{color:var(--muted);text-decoration:none}
.breadcrumbs a:hover{color:var(--ink);text-decoration:underline}
.breadcrumbs [aria-current]{color:var(--ink)}

/* ---------- 6. Sections & composants ---------- */
/* Hero : trame fine et halo chaud, rognés pour ne jamais créer de défilement
   horizontal (« clip » ne crée pas de zone de défilement). */
.section-hero{position:relative;isolation:isolate;overflow:hidden;overflow:clip;padding-block:clamp(44px,6.5vw,96px) clamp(56px,7.5vw,112px)}
.section-hero::after{content:"";position:absolute;inset:0;z-index:-2;background-image:linear-gradient(rgba(11,16,32,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(11,16,32,.055) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 75% 65% at 75% 0%,#000 15%,transparent 72%);mask-image:radial-gradient(ellipse 75% 65% at 75% 0%,#000 15%,transparent 72%)}
.section-hero::before{content:"";position:absolute;z-index:-1;width:min(820px,110vw);aspect-ratio:1;right:-18%;top:-55%;border-radius:50%;background:radial-gradient(circle,rgba(99,102,241,.2),rgba(99,102,241,0) 65%)}
.section-hero--simple{padding-block:clamp(28px,4vw,56px) clamp(20px,3vw,36px)}
.section-hero--simple+.section{padding-top:clamp(20px,3vw,40px)}
.hero-grid{display:grid;gap:44px;align-items:center}
@media (min-width:980px){.hero-grid:has(.hero-aside){grid-template-columns:minmax(0,1.45fr) minmax(320px,1fr);gap:64px}}
.hero-main{max-width:840px}
/* Pages intérieures : un titre un cran plus sobre que celui de l'accueil. */
.section-hero:not(.section-hero--home) h1{font-size:clamp(2.15rem,4.5vw,3.45rem)}
.lead{font-size:clamp(1.12rem,1.55vw,1.3rem);line-height:1.58;color:var(--muted);margin:22px 0 0;max-width:660px}
.hero-proof{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:30px 0 0;padding:0;font-size:.9rem;font-weight:560;color:var(--ink)}
.hero-proof li{display:flex;align-items:center;gap:7px;padding:7px 13px 7px 10px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.7)}
.hero-proof .icon{color:var(--ok);width:16px;height:16px}
.hero-logos{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;list-style:none;margin:30px 0 0;padding:0;font-size:.9rem;font-weight:600;color:var(--muted)}
.hero-logos li{display:inline-flex;align-items:center;gap:8px}

/* Encadré « En bref » : bord dégradé, lignes clé / valeur. */
.panel{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-lg)}
.panel::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(155deg,rgba(99,102,241,.55),rgba(99,102,241,0) 38%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}
.panel-title{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.panel-list{list-style:none;margin:0;padding:0}
.panel-list li{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:13px 0;border-top:1px solid var(--line);font-size:.95rem}
.panel-list li:first-child{border-top:0;padding-top:4px}
.panel-k{flex:none;color:var(--muted);font-size:.9rem}
.panel-v{font-weight:650;color:var(--ink);text-align:right}
@media (max-width:520px){
	.eyebrow{font-size:.64rem;letter-spacing:.06em;padding:5px 11px 5px 9px}
	.panel{padding:22px}
	.panel-list li{flex-direction:column;gap:2px}
	.panel-k{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}
	.panel-v{text-align:left}
}

/* Cartes */
.card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:28px;color:var(--text);text-decoration:none;box-shadow:var(--shadow-sm);transition:border-color .25s,box-shadow .3s var(--ease),transform .3s var(--ease)}
a.card:hover{border-color:var(--line-2);box-shadow:var(--shadow-lg);transform:translateY(-4px);color:var(--text)}
.card h3{margin-bottom:.45em}
.card p{font-size:.97rem;color:var(--muted);margin-bottom:0}
.card-icon{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;margin-bottom:20px;border-radius:14px;background:linear-gradient(145deg,#f3f4ff,#e3e6ff);color:var(--accent);box-shadow:inset 0 0 0 1px rgba(79,70,229,.12)}
.card-kicker,.case-meta{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.card-list{margin:12px 0 0;padding-left:1.1em;font-size:.95rem;color:var(--muted)}
.card-list li{margin-bottom:.35em}
.card-more{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:20px;font-size:.93rem;font-weight:650;color:var(--ink)}
.card-more .icon{transition:transform .2s var(--ease)}
a.card:hover .card-more{color:var(--accent)}
a.card:hover .card-more .icon{transform:translateX(4px)}
.tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:16px 0 0;padding:0}
.tags li{font-size:.76rem;padding:4px 11px;border:1px solid var(--line);border-radius:999px;color:var(--muted);background:var(--paper)}

/* Checklists */
.checklist{display:grid;gap:14px 32px;list-style:none;margin:0;padding:0}
@media (min-width:760px){.checklist-2{grid-template-columns:1fr 1fr}.checklist-3{grid-template-columns:repeat(3,1fr)}}
.checklist li{display:flex;gap:12px;align-items:flex-start;line-height:1.5}
.checklist .icon{margin-top:2px;color:var(--ok)}
.checklist--alert .icon{color:var(--accent)}
.checklist--alert li{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-sm);padding:15px 17px;box-shadow:var(--shadow-sm)}
.section--alt .checklist--alert li{background:var(--white)}
.section--dark .checklist--alert li{background:var(--ink-2);border-color:var(--line-dark)}

/* Étapes : des cartes numérotées, reliées par un filet sur grand écran. */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.step{position:relative;display:flex;flex-direction:column;gap:16px;padding:26px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.step-n{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:var(--ink);color:#fff;font-family:var(--mono);font-size:.88rem;font-weight:600;box-shadow:0 8px 18px -8px rgba(11,16,32,.55)}
.step h3{font-size:1.14rem;margin-bottom:.35em}
.step p{margin:0;color:var(--muted);font-size:.97rem}
.section--dark .step{background:var(--ink-2);border-color:var(--line-dark);box-shadow:none}
.section--dark .step-n{background:var(--grad);color:#fff}
@media (min-width:700px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){
	.steps--3{grid-template-columns:repeat(3,1fr)}
	.steps--4{grid-template-columns:repeat(4,1fr)}
	.steps--5,.steps--6{grid-template-columns:repeat(3,1fr)}
	.steps--3::before,.steps--4::before{content:"";position:absolute;left:48px;right:48px;top:48px;height:1px;background:linear-gradient(90deg,var(--line-2) 50%,transparent 50%);background-size:10px 1px;z-index:0}
	.steps--3,.steps--4{position:relative}
	.steps--3 .step,.steps--4 .step{z-index:1}
}

/* Tableaux */
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--white);box-shadow:var(--shadow-sm)}
.table{width:100%;min-width:640px;border-collapse:collapse;font-size:.95rem}
.table th,.table td{padding:15px 20px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.table thead th{background:var(--ink);color:var(--paper);font-weight:600;font-size:.82rem;letter-spacing:.02em}
.table tbody th{font-weight:650;width:24%;color:var(--ink)}
.table tbody th a{color:var(--ink)}
.table tbody tr:last-child th,.table tbody tr:last-child td{border-bottom:0}
.table tbody tr{transition:background-color .15s}
.table tbody tr:hover{background:var(--paper)}

/* Schéma de migration */
.flow{display:grid;gap:14px;align-items:stretch}
.flow-end{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:22px;border-radius:var(--radius);background:var(--ink);color:var(--paper);text-align:center}
.flow-to{background:var(--grad-btn)}
.flow-label{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.flow-end strong{font-family:var(--display);font-size:1.15rem;color:#fff}
.flow-stages{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:flow}
.flow-stages li{counter-increment:flow;position:relative;padding:14px 16px 14px 52px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm)}
.flow-stages li::before{content:counter(flow);position:absolute;left:14px;top:14px;width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-family:var(--mono);font-size:.8rem;font-weight:600;display:grid;place-items:center}
.flow-stages strong{display:block;font-size:.98rem}
.flow-stages span{display:block;font-size:.88rem;color:var(--muted);line-height:1.45}
@media (min-width:980px){
	.flow{grid-template-columns:170px 1fr 170px}
	.flow-stages{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:640px) and (max-width:979px){.flow-stages{grid-template-columns:1fr 1fr}}

/* Split / pricing */
.split,.pricing,.form-block{display:grid;gap:36px;align-items:start}
.split>*,.pricing>*,.form-block>*,.hero-grid>*,.steps>*,.flow>*,.flow-stages>*,.stats>*{min-width:0}
@media (min-width:980px){.split,.pricing{grid-template-columns:minmax(0,1.35fr) minmax(320px,1fr);gap:64px}.form-block{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:64px}}
.split .section-head,.pricing .section-head,.form-block .section-head{margin-bottom:20px}
.pricing-card{position:relative;overflow:hidden;background:var(--ink);color:var(--paper);border-radius:var(--radius-lg);padding:clamp(28px,3.4vw,40px);box-shadow:var(--shadow-xl);background-image:radial-gradient(80% 60% at 100% 0%,rgba(99,102,241,.32),transparent 60%)}
.pricing-label{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#c7d2fe;margin:0 0 10px}
.pricing-price{margin:0 0 24px;color:var(--muted-dark);font-size:.95rem}
.pricing-price strong{display:block;font-family:var(--display);font-size:clamp(3rem,6vw,4rem);font-weight:800;line-height:1;letter-spacing:-.05em;color:#fff;margin-top:4px}
.pricing-card .checklist li{color:#e3e8f2;font-size:.97rem}
.pricing-card .checklist .icon{color:#6ee7a8}
.pricing-card .btn-row{margin-top:28px}
.pricing-card .btn{width:100%}
.pricing-note{margin:18px 0 0;font-size:.86rem;color:var(--muted-dark)}
.pricing-note a{color:var(--accent-on-dark)}

/* Chiffres clés */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 24px;margin:0}
@media (min-width:860px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:8px;padding:22px 0 0;border-top:1px solid var(--line-2)}
.section--dark .stat{border-color:var(--line-dark)}
.stat dd{margin:0;font-family:var(--display);font-size:clamp(2.4rem,5vw,3.6rem);font-weight:800;letter-spacing:-.05em;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat dt{font-size:.95rem;color:var(--muted);line-height:1.45}
.section--dark .stat dt{color:var(--muted-dark)}
.section--dark .stat dd{background:var(--grad-text);-webkit-background-clip:text;background-clip:text}

/* FAQ */
.faq{max-width:880px;display:grid;gap:10px}
.faq-item{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);transition:border-color .2s,box-shadow .2s}
.faq-item[open]{border-color:var(--line-2);box-shadow:var(--shadow)}
.faq-item summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:19px 22px;cursor:pointer;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary h3{margin:0;font-size:1.05rem;font-weight:680;letter-spacing:-.012em}
.faq-item summary .icon{flex:none;width:32px;height:32px;padding:6px;border-radius:50%;background:var(--paper-2);color:var(--ink);transition:transform .25s var(--ease),background-color .2s,color .2s}
.faq-item[open] summary .icon{transform:rotate(180deg);background:var(--ink);color:#fff}
.faq-a{padding:0 22px 20px;color:var(--muted);max-width:780px}
.faq-a p:last-child{margin-bottom:0}
.article-body .faq-item summary h3{font-size:1.02rem}

/* CTA */
.section-cta{padding-block:clamp(40px,6vw,80px)}
.cta-box{position:relative;overflow:hidden;isolation:isolate;border-radius:calc(var(--radius-lg) + 4px);padding:clamp(36px,6.5vw,88px);color:var(--paper);background:radial-gradient(60% 90% at 100% 0%,rgba(99,102,241,.4),transparent 60%),radial-gradient(55% 80% at 0% 100%,rgba(34,211,238,.13),transparent 62%),var(--ink)}
.cta-box::after{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(ellipse 60% 80% at 80% 20%,#000,transparent 75%);mask-image:radial-gradient(ellipse 60% 80% at 80% 20%,#000,transparent 75%)}
.cta-box .section-head{margin-bottom:14px}
.cta-box h2{color:#fff;max-width:820px;font-size:clamp(2rem,4.4vw,3.3rem)}
.cta-box h2 em{color:var(--accent-on-dark)}
.cta-text{color:var(--muted-dark);font-size:1.15rem;max-width:640px;margin:0}
.cta-box>*{position:relative;z-index:1}

/* Références */
.refs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;list-style:none;margin:0;padding:0}
.ref{display:flex;flex-direction:column;gap:2px;padding:16px 18px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);transition:border-color .2s,transform .2s var(--ease)}
.ref:hover{border-color:var(--line-2);transform:translateY(-2px)}
.ref-name{font-family:var(--display);font-weight:700;color:var(--ink)}
.ref-meta{font-size:.84rem;color:var(--muted)}
.ref-domain{font-family:var(--mono);font-size:.72rem;color:var(--muted);opacity:.8}
.testimonial blockquote{margin:0 0 16px;font-size:1.05rem}
.testimonial figcaption span{display:block;font-size:.88rem;color:var(--muted)}

/* ---------- Visuels de carte ---------- */
/* Couverture d'étude de cas : ratio fixe pour ne provoquer aucun décalage. */
.card.has-cover{padding:0;overflow:hidden}
.card.has-cover>*:not(.card-media){padding-inline:26px}
.card.has-cover>.case-meta{padding-top:22px}
.card.has-cover>.card-more{padding-bottom:26px}
.card-media{display:block;margin-bottom:20px;background:var(--ink);aspect-ratio:1200/750;overflow:hidden}
.card-media picture{display:contents}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
a.card:hover .card-media img{transform:scale(1.04)}

/* Bandeau thématique des articles sans image : repère coloré, zéro requête. */
.card-band{display:flex;align-items:center;justify-content:center;height:112px;margin:-28px -28px 22px;color:#fff;background:linear-gradient(135deg,var(--ink) 0%,var(--ink-2) 100%);position:relative;overflow:hidden}
.card-band::after{content:"";position:absolute;inset:0;background:
	repeating-linear-gradient(135deg,rgba(255,255,255,.045) 0 2px,transparent 2px 13px)}
.card-band .icon{position:relative;z-index:1;opacity:.95;width:30px;height:30px}
.post-card{overflow:hidden}
.post-card[data-cat="shopify"] .card-band{background:linear-gradient(135deg,#0b1020 0%,#14532d 130%)}
.post-card[data-cat="prestashop"] .card-band{background:linear-gradient(135deg,#0b1020 0%,#312e81 130%)}
.post-card[data-cat="woocommerce"] .card-band{background:linear-gradient(135deg,#0b1020 0%,#581c87 130%)}
.post-card[data-cat="wordpress"] .card-band{background:linear-gradient(135deg,#0b1020 0%,#164e63 130%)}
.post-card[data-cat="migration"] .card-band{background:linear-gradient(135deg,#0b1020 0%,#3730a3 130%)}
.post-card[data-cat="business"] .card-band{background:linear-gradient(135deg,#0b1020 0%,#0e7490 130%)}

/* Couverture en tête d'une étude de cas. */
.case-cover{margin:0 0 clamp(24px,4vw,44px);border-radius:var(--radius-lg);overflow:hidden;background:var(--ink);aspect-ratio:1200/750;max-height:480px;box-shadow:var(--shadow-lg)}
.case-cover picture{display:contents}
.case-cover img{width:100%;height:100%;object-fit:cover}

/* ---------- 7. Formulaires & rendez-vous ---------- */
.aimek-form{display:grid;gap:16px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,3vw,32px);box-shadow:var(--shadow)}
/* Sans min-width:0, un enfant au contenu large (un prix en grande police)
   elargit toute la grille et fait deborder la page sur mobile. */
.aimek-form>*{min-width:0}
@media (min-width:560px){.aimek-form{grid-template-columns:1fr 1fr}.aimek-form>*{grid-column:1/-1}.aimek-form .field-text,.aimek-form .field-email,.aimek-form .field-select{grid-column:auto}}
.field label{display:block;margin-bottom:6px;font-size:.9rem;font-weight:600}
.optional{font-weight:400;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;min-height:50px;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--radius-sm);background:var(--paper);color:var(--ink);font:inherit;font-size:1rem;transition:border-color .15s,background-color .15s}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--ink);background:var(--white)}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:var(--err)}
.field-error{display:block;margin-top:5px;font-size:.84rem;color:var(--err)}
.field-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{margin:0;font-size:.84rem;color:var(--muted);text-align:center}
.form-status:empty{display:none}
.form-status{padding:14px 16px;border-radius:var(--radius-sm);font-size:.95rem;font-weight:520}
.form-status.is-ok{background:#e8f6ee;color:#0a5f34;border:1px solid #b7e1c8}
.form-status.is-err{background:#fdeceb;color:var(--err);border:1px solid #f5c2be}
.aimek-form.is-sending button[type=submit]{opacity:.6;pointer-events:none}
.aimek-form.is-done>*:not(.form-status){display:none}
.form-block-text ul{padding-left:1.2em}

.booking{display:grid;gap:28px;max-width:980px;min-width:0}
.booking-step,.booking-cal,.booking-types,.booking-type,.booking-type-body{min-width:0}
.booking-type-body small,.booking-type-body strong{overflow-wrap:anywhere}
.booking-step-title{display:flex;align-items:center;gap:12px;font-size:1.15rem;font-weight:650;margin:0 0 16px}
.booking-step-title span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:.85rem}
.booking-types{display:grid;gap:12px}
@media (min-width:760px){.booking-types{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.booking-types{grid-template-columns:repeat(3,1fr)}}
.booking-type{position:relative;cursor:pointer}
.booking-type input{position:absolute;opacity:0}
.booking-type-body{display:flex;flex-direction:column;gap:3px;height:100%;padding:16px 18px;background:var(--white);border:1.5px solid var(--line);border-radius:var(--radius-sm);transition:border-color .15s,box-shadow .15s}
.booking-type-body em{font-style:normal;font-family:var(--mono);font-size:.74rem;color:var(--accent)}
.booking-type-body small{font-size:.86rem;color:var(--muted);line-height:1.45}
.booking-type input:checked+.booking-type-body{border-color:var(--ink);box-shadow:0 0 0 1.5px var(--ink)}
.booking-type input:focus-visible+.booking-type-body{outline:2px solid var(--accent);outline-offset:3px}
.booking-tz{font-size:.88rem;color:var(--muted);margin:-6px 0 14px}
.booking-cal{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.booking-days{display:flex;gap:8px;overflow-x:auto;padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--line);scrollbar-width:thin}
.booking-day{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:68px;padding:10px 8px;border:1.5px solid var(--line);border-radius:var(--radius-sm);background:var(--paper);font:inherit;color:var(--ink);cursor:pointer}
.booking-day small{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.booking-day strong{font-size:1.2rem;line-height:1.1}
.booking-day[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.booking-day[aria-selected="true"] small{color:var(--muted-dark)}
.booking-times{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.booking-time{min-height:46px;border:1.5px solid var(--line);border-radius:var(--radius-sm);background:var(--white);font:inherit;font-weight:600;color:var(--ink);cursor:pointer}
.booking-time:hover{border-color:var(--ink)}
.booking-time[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.booking-empty{grid-column:1/-1;margin:0;color:var(--muted)}
.booking-recap{margin:0;padding:12px 16px;background:var(--accent-soft);border-radius:var(--radius-sm);font-weight:600}

/* ---------- 8. Blog ---------- */
.cat-nav{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:28px 0 0;padding:0}
.cat-nav a{display:inline-block;padding:8px 16px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--ink);font-size:.9rem;font-weight:520;text-decoration:none}
.cat-nav a:hover,.cat-nav a[aria-current]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.pagination{margin-top:48px}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pagination .page-numbers{display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--ink);text-decoration:none;font-weight:600}
.pagination .current,.pagination a.page-numbers:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.article-meta{margin:18px 0 0;font-size:.9rem;color:var(--muted)}
.article-meta a{color:var(--ink)}
.article-content{padding-bottom:var(--section)}
.article-content .prose{max-width:none}
.article-intro{font-size:1.14rem}
.quick-answer{margin:28px 0;padding:22px 24px;background:var(--white);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--radius-sm)}
.quick-answer-label{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 8px}
.quick-answer>*:last-child{margin-bottom:0}
.toc{margin:28px 0 40px;padding:22px 24px;background:var(--paper-2);border-radius:var(--radius-sm)}
.toc-title{font-weight:650;margin:0 0 10px}
.toc ol{margin:0;padding-left:1.3em;columns:1}
@media (min-width:720px){.toc ol{columns:2;column-gap:40px}}
.toc li{margin-bottom:6px;break-inside:avoid}
.toc a{color:var(--ink);text-decoration:none}
.toc a:hover{color:var(--accent);text-decoration:underline}
.article-body h2{margin-top:2em;font-size:clamp(1.45rem,2.6vw,1.85rem)}
.article-body .checklist{margin:1em 0 1.5em}
.article-body .faq{margin-top:1em}
.article-cta{margin:56px 0 0;padding:clamp(26px,4vw,40px);background:var(--ink);color:var(--paper);border-radius:var(--radius)}
.article-cta h2{color:#fff;font-size:1.6rem;margin-top:0}
.article-cta p{color:var(--muted-dark);margin:0}
.article-cta .btn-row{margin-top:24px}
.author-box{display:flex;gap:20px;align-items:flex-start;margin-top:40px;padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--white);font-size:.96rem}
.author-box>div{min-width:0}
/* Portrait : photo si elle existe, monogramme sinon. */
.portrait{flex:none;display:block;width:76px;height:76px;border-radius:50%;overflow:hidden;background:var(--ink)}
.portrait img{width:100%;height:100%;object-fit:cover}
.portrait--empty{display:grid;place-items:center;color:var(--paper);font-weight:700;letter-spacing:.04em;font-size:1.3rem;background:linear-gradient(135deg,var(--ink),var(--ink-2))}
@media (max-width:520px){.author-box{flex-direction:column}}
.author-name{font-weight:680;margin-bottom:6px}
.author-box p:last-child{margin:0}

/* ---------- 9. Pied de page ---------- */
.site-footer{position:relative;background:var(--ink);color:var(--muted-dark);padding-block:clamp(56px,7vw,96px) 28px;font-size:.94rem;background-image:radial-gradient(50% 60% at 100% 0%,rgba(99,102,241,.12),transparent 60%)}
.site-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad)}
.site-footer .logo,.site-footer .logo:hover{color:#fff}
.site-footer .logo-mark path:first-of-type{fill:var(--ink)}
.site-footer .logo-text em{color:var(--muted-dark)}
.footer-top{display:grid;gap:36px;padding-bottom:40px}
/* Sur mobile, les colonnes de liens vont par deux : le pied de page ne s'étire plus sur trois écrans. */
.footer-top{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
.footer-brand{grid-column:1/-1}
@media (min-width:720px){.footer-top{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.footer-top{grid-template-columns:1.6fr repeat(4,1fr)}.footer-brand{grid-column:auto}}
.footer-brand p{max-width:360px;margin:18px 0 0}
.footer-brand p.footer-zones{margin-top:10px;font-size:.86rem;color:var(--muted-dark)}
.site-footer .footer-zones a{text-decoration:underline;text-underline-offset:2px;color:inherit}
.site-footer .footer-zones a:hover{color:#fff}
.footer-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.site-footer .btn-wa-ghost{border-color:#3ddc84;color:#3ddc84}
.footer-mail a,.site-footer a{color:var(--paper);text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.footer-title{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin:0 0 16px}
.site-footer .logo-text strong{color:#fff}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.footer-col a{color:var(--muted-dark)}
.footer-bottom{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;padding-top:24px;border-top:1px solid var(--line-dark);font-size:.85rem}
.footer-bottom p{margin:0}
.footer-bottom ul{display:flex;gap:20px;list-style:none;margin:0;padding:0}

/* ---------- 10. Flottants & consentement ---------- */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:90;display:none;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--wa);color:#fff;box-shadow:var(--shadow-lg);transition:transform .15s,background-color .15s}
.wa-float:hover{background:var(--wa-hover);color:#fff;transform:scale(1.06)}
.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:grid;grid-template-columns:1fr auto;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(248,249,252,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .25s}
.mobile-bar.is-visible{transform:none}
.mobile-bar .btn{min-height:48px;padding:10px 14px;font-size:.95rem}
.mobile-bar .btn-primary{min-width:0;overflow:hidden;text-overflow:ellipsis;display:block;line-height:28px}
.mobile-bar .btn-wa{width:52px;padding:0}
.mobile-bar .btn-wa span{display:none}
@media (max-width:899px){body{padding-bottom:0}.site-footer{padding-bottom:96px}}
@media (min-width:900px){.wa-float{display:grid}.mobile-bar{display:none}}
.nav-open .mobile-bar{display:none}

.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:120;max-width:460px;padding:20px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);font-size:.9rem}
.consent p{margin:0 0 14px;color:var(--muted)}
.consent strong{display:block;margin-bottom:4px;color:var(--ink);font-size:1rem}
.consent-actions{display:flex;gap:8px}
.consent-actions .btn{flex:1;min-height:44px;padding:8px 14px;font-size:.92rem}
@media (max-width:899px){.consent{bottom:84px}}

/* ==========================================================================
   11. Animations — sobres, sans coût de rendu, désactivées si l'utilisateur
   demande à réduire les animations. Aucune n'est décorative sans raison :
   chacune sert la lecture (hiérarchie, progression) ou le retour d'action.
   ========================================================================== */

/* Apparition au défilement. L'état initial n'est posé que si le JS répond,
   pour ne jamais masquer du contenu en cas d'échec du script. */
.js-anim .reveal{opacity:0;transform:translateY(18px);transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1)}
.js-anim .reveal.is-in{opacity:1;transform:none}
.js-anim .reveal-stagger>*{opacity:0;transform:translateY(16px);transition:opacity .5s cubic-bezier(.22,.61,.36,1),transform .5s cubic-bezier(.22,.61,.36,1)}
.js-anim .reveal-stagger.is-in>*{opacity:1;transform:none}
.js-anim .reveal-stagger.is-in>*:nth-child(1){transition-delay:0s}
.js-anim .reveal-stagger.is-in>*:nth-child(2){transition-delay:.07s}
.js-anim .reveal-stagger.is-in>*:nth-child(3){transition-delay:.14s}
.js-anim .reveal-stagger.is-in>*:nth-child(4){transition-delay:.21s}
.js-anim .reveal-stagger.is-in>*:nth-child(5){transition-delay:.28s}
.js-anim .reveal-stagger.is-in>*:nth-child(6){transition-delay:.35s}
.js-anim .reveal-stagger.is-in>*:nth-child(n+7){transition-delay:.4s}

/* Hero : cascade à l'ouverture, sans attendre le défilement. */
@keyframes aimek-rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.js-anim .section-hero .eyebrow,
.js-anim .section-hero h1,
.js-anim .section-hero .lead,
.js-anim .section-hero .btn-row,
.js-anim .section-hero .hero-proof,
.js-anim .section-hero .hero-aside,
.js-anim .section-hero .hero-logos,
.js-anim .section-hero .hero-visual{animation:aimek-rise .6s cubic-bezier(.22,.61,.36,1) both}
.js-anim .section-hero h1{animation-delay:.06s}
.js-anim .section-hero .lead{animation-delay:.12s}
.js-anim .section-hero .btn-row{animation-delay:.18s}
.js-anim .section-hero .hero-proof{animation-delay:.24s}
.js-anim .section-hero .hero-aside{animation-delay:.16s}
.js-anim .section-hero .hero-logos{animation-delay:.3s}
.js-anim .section-hero .hero-visual{animation:aimek-rise .8s cubic-bezier(.22,.61,.36,1) .2s both}

/* Lueur d'ambiance du hero : respiration très lente, quasi imperceptible. */
@keyframes aimek-glow{0%,100%{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
.section-hero:not(.section-hero--home)::before{animation:aimek-glow 14s ease-in-out infinite}

/* Cartes : élévation au survol, et légère mise en avant de l'icône. */
a.card .card-icon,.card .card-icon{transition:background-color .2s,color .2s,transform .25s cubic-bezier(.22,.61,.36,1)}
a.card:hover .card-icon{background:var(--ink);color:var(--paper);transform:translateY(-2px) rotate(-3deg);box-shadow:none}

/* Liens de navigation : soulignement qui se déploie depuis la gauche. */
.nav-link{position:relative}
.nav-link::after{content:"";position:absolute;left:10px;right:10px;bottom:4px;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .22s cubic-bezier(.22,.61,.36,1)}
.nav-link:hover::after,.nav-item:focus-within>.nav-link::after{transform:scaleX(1)}
@media (max-width:1100px){.nav-link::after{display:none}}

/* Étapes numérotées : le numéro s'affirme quand la ligne entre dans l'écran. */
.step-n{transition:color .3s,transform .3s cubic-bezier(.22,.61,.36,1)}
.js-anim .step.is-in .step-n{animation:aimek-pop .5s cubic-bezier(.22,.61,.36,1) both}
@keyframes aimek-pop{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}

/* Schéma de migration : les étapes se révèlent de gauche à droite. */
.js-anim .flow-stages>li{opacity:0;transform:translateY(12px);transition:opacity .45s,transform .45s cubic-bezier(.22,.61,.36,1)}
.js-anim .flow.is-in .flow-stages>li{opacity:1;transform:none}
.js-anim .flow.is-in .flow-stages>li:nth-child(2){transition-delay:.09s}
.js-anim .flow.is-in .flow-stages>li:nth-child(3){transition-delay:.18s}
.js-anim .flow.is-in .flow-stages>li:nth-child(4){transition-delay:.27s}
.js-anim .flow.is-in .flow-stages>li:nth-child(5){transition-delay:.36s}
.js-anim .flow.is-in .flow-stages>li:nth-child(6){transition-delay:.45s}
.js-anim .flow.is-in .flow-stages>li:nth-child(n+7){transition-delay:.54s}

/* FAQ : ouverture fluide (les <details> ne s'animent pas nativement). */
.faq-item summary{transition:color .18s}
.faq-item summary:hover{color:var(--accent)}
.faq-a{overflow:hidden}
.js-anim .faq-item[open] .faq-a{animation:aimek-unfold .28s cubic-bezier(.22,.61,.36,1)}
@keyframes aimek-unfold{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* Chiffres clés : comptage à l'entrée dans l'écran. */
.stat dd{font-variant-numeric:tabular-nums}

/* Barre de progression de lecture (articles). */
.reading-bar{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:left;background:var(--accent);z-index:110;transition:transform .08s linear;pointer-events:none}

/* Bouton flottant WhatsApp : appel discret à la première apparition. */
@keyframes aimek-float-in{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
.js-anim .wa-float{animation:aimek-float-in .45s cubic-bezier(.34,1.3,.64,1) both;animation-delay:1.2s}

/* Formulaires : retour visuel à l'envoi et à la confirmation. */
@keyframes aimek-spin{to{transform:rotate(360deg)}}
.aimek-form.is-sending button[type=submit]{position:relative;color:transparent}
.aimek-form.is-sending button[type=submit] .icon{opacity:0}
.aimek-form.is-sending button[type=submit]::after{content:"";position:absolute;width:20px;height:20px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:aimek-spin .7s linear infinite}
.js-anim .form-status.is-ok,.js-anim .form-status.is-err{animation:aimek-rise .35s cubic-bezier(.22,.61,.36,1) both}
.booking-time,.booking-day{transition:background-color .15s,border-color .15s,color .15s,transform .15s}
.booking-time:active,.booking-day:active{transform:scale(.96)}

/* Images : fondu à l'arrivée, sans décalage de mise en page. */
.media img{opacity:0;transition:opacity .5s}
.media img.is-loaded,.no-js .media img{opacity:1}

/* Respect absolu du réglage système : aucune animation, aucun masquage. */
@media (prefers-reduced-motion:reduce){
	.js-anim .reveal,.js-anim .reveal-stagger>*,.js-anim .flow-stages>li{opacity:1!important;transform:none!important;transition:none!important}
	.js-anim .section-hero>*,.js-anim .section-hero .hero-aside,.js-anim .wa-float,
	.js-anim .faq-item[open] .faq-a,.js-anim .step.is-in .step-n,.home .section-hero::before{animation:none!important}
	.reading-bar{display:none}
	.media img{opacity:1}
}

/* Photo et portrait dans la colonne droite du hero (pages sans encadré). */
.hero-figure{margin:0}
.hero-aside--photo .photo{aspect-ratio:4/5;border-radius:calc(var(--radius) + 4px);overflow:hidden;background:var(--paper-2);box-shadow:var(--shadow-lg)}
.hero-aside--portrait .hero-figure{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.portrait--hero{width:min(100%,340px);height:auto;aspect-ratio:1;border-radius:calc(var(--radius) + 10px);box-shadow:var(--shadow-lg)}
.hero-aside--portrait figcaption strong{display:block;font-size:1.1rem}
.hero-aside--portrait figcaption span{display:block;margin-top:4px;color:var(--muted);font-size:.92rem}
@media (max-width:979px){
	.hero-aside--photo .photo{aspect-ratio:16/10}
	.portrait--hero{width:180px}
}

/* ==========================================================================
   12. Photographies
   Texte et photo côte à côte, bandeaux, cartes illustrées, portrait du hero.
   Toutes les photos réservent leur place (aspect-ratio) : la page ne bouge
   pas quand elles arrivent.
   ========================================================================== */
.photo{display:block;width:100%;height:100%}
.photo img{display:block;width:100%;height:100%;object-fit:cover}

.media-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.media-split--reverse .media-figure{order:-1}
.media-figure{margin:0;min-width:0}
.media-figure .photo{aspect-ratio:4/3;border-radius:var(--radius-lg);overflow:hidden;background:var(--paper-2);box-shadow:var(--shadow-xl)}
.media-figure figcaption{margin-top:12px;font-size:.85rem;color:var(--muted)}
.section--dark .media-figure figcaption{color:var(--muted-dark)}

.media-band{position:relative;margin:0;border-radius:var(--radius-lg);overflow:hidden;background:var(--ink);box-shadow:var(--shadow-lg)}
.media-band .photo{aspect-ratio:21/8;max-height:540px}
.media-band-quote{position:absolute;inset:auto 0 0 0;display:flex;flex-direction:column;gap:10px;padding:clamp(22px,5vw,56px);color:var(--paper);background:linear-gradient(to top,rgba(12,18,34,.88) 0%,rgba(12,18,34,.55) 55%,rgba(12,18,34,0) 100%)}
.media-band-quote span{max-width:28ch;font-size:clamp(1.25rem,2.6vw,2.05rem);font-weight:650;line-height:1.22;letter-spacing:-.01em}
.media-band-quote small{color:var(--muted-dark);font-size:.9rem}

.card--media{padding:0;overflow:hidden}
.card--media>:not(.card-media){margin-inline:26px}
.card--media>:last-child{margin-bottom:26px}
.card--media h3{margin-top:22px}
.card-media{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--paper-2)}
.card-media img{transition:transform .5s cubic-bezier(.22,.61,.36,1)}
a.card--media:hover .card-media img{transform:scale(1.035)}

.panel-person{display:flex;align-items:center;gap:14px;margin:0 0 18px;padding:0 0 18px;border-bottom:1px solid var(--line)}
.panel-person strong{display:block;font-size:1rem;line-height:1.3}
.panel-person span{display:block;margin-top:2px;font-size:.85rem;color:var(--muted)}
.portrait--panel{width:64px;height:64px;box-shadow:0 0 0 3px var(--white),0 0 0 4px var(--line)}

@media (max-width:899px){
	.media-split{grid-template-columns:1fr}
	.media-split--reverse .media-figure{order:0}
	.media-figure .photo{aspect-ratio:16/10}
	.media-band .photo{aspect-ratio:16/10;max-height:none}
	/* Sur petit écran, la phrase superposée couvrait presque toute la photo :
	   elle passe dessous, sur le fond sombre du bandeau. */
	.media-band--quote .media-band-quote{position:static;padding:20px 22px 24px;background:var(--ink)}
	.media-band-quote span{font-size:1.2rem}
}
@media (prefers-reduced-motion:reduce){
	.card-media img{transition:none}
	a.card--media:hover .card-media img{transform:none}
}

/* ==========================================================================
   13. Mobile : carrousels et références compactes
   Sous 640 px, une grille de trois cartes ou plus devenait une colonne de
   plusieurs écrans — l'accueil atteignait 25 écrans de défilement. Les
   grilles marquées « rail » deviennent un carrousel qu'on fait glisser du
   doigt ; la carte suivante dépasse à droite pour signaler qu'il y a une
   suite. Aucun JavaScript : le défilement natif et scroll-snap suffisent.
   ========================================================================== */
@media (max-width:639px){
	.grid.rail,.offers.rail{
		grid-auto-flow:column;grid-auto-columns:84%;grid-template-columns:none;gap:14px;
		overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
		scroll-padding-inline:var(--gutter);
		margin-inline:calc(var(--gutter) * -1);padding:6px var(--gutter) 18px;
		scrollbar-width:none
	}
	.grid.rail::-webkit-scrollbar,.offers.rail::-webkit-scrollbar{display:none}
	.grid.rail>*,.offers.rail>*{scroll-snap-align:start}

	/* Étapes : chaque étape devient une carte numérotée qu'on fait glisser. */
	.steps.rail{
		display:grid;grid-auto-flow:column;grid-auto-columns:84%;grid-template-columns:none;gap:14px;
		overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
		scroll-padding-inline:var(--gutter);
		margin-inline:calc(var(--gutter) * -1);padding:6px var(--gutter) 18px;
		scrollbar-width:none
	}
	.steps.rail::-webkit-scrollbar{display:none}
	.steps.rail .step{scroll-snap-align:start;padding:22px 20px}
	.section--dark .steps.rail .step{background:var(--ink-2);border-color:var(--line-dark)}
	.steps.rail .step-n{padding-top:0}

	/* Listes de problèmes : on les survole pour y chercher le sien, elles
	   restent verticales — mais plus serrées. */
	.checklist{gap:10px}
	.checklist li{font-size:.96rem;line-height:1.45}
	.checklist--alert li{padding:12px 14px}

	/* Références : deux colonnes, elles sont courtes. */
	.refs{grid-template-columns:1fr 1fr;gap:8px}
	.ref{padding:12px 13px}
	.ref-domain{overflow-wrap:anywhere}
}

@media print{.site-header,.site-footer,.wa-float,.mobile-bar,.consent,.section-cta{display:none!important}body{background:#fff}}

/* ==========================================================================
   14. Accueil et vitrines
   Hero sombre de l'accueil, cadres de navigateur, bandeau des références,
   grille asymétrique des services, carrousel des réalisations, portrait.
   ========================================================================== */

/* ---------- Hero de l'accueil : une carte sombre, bords arrondis ---------- */
.section-hero--home{padding:clamp(10px,1.2vw,16px) clamp(10px,1.2vw,16px) 0}
.section-hero--home::before,.section-hero--home::after{display:none}
.section-hero--home>.wrap{position:relative;isolation:isolate;overflow:hidden;max-width:1520px;border-radius:clamp(22px,2.6vw,36px);padding-block:clamp(52px,7vw,104px) clamp(56px,7vw,108px);padding-inline:clamp(22px,5vw,76px);color:#d5dbe8;
	background:
		radial-gradient(55% 70% at 100% 0%,rgba(99,102,241,.34),transparent 62%),
		radial-gradient(45% 60% at 0% 100%,rgba(34,211,238,.14),transparent 66%),
		linear-gradient(180deg,#0b1020 0%,#0e1427 100%)}
.section-hero--home>.wrap::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 70% 70% at 70% 30%,#000 10%,transparent 75%);mask-image:radial-gradient(ellipse 70% 70% at 70% 30%,#000 10%,transparent 75%)}
.section-hero--home h1{color:#fff;font-size:clamp(2.45rem,5.6vw,4.5rem)}
.section-hero--home h1 em{color:transparent;background:var(--grad-text);-webkit-background-clip:text;background-clip:text}
.section-hero--home .lead{color:#b9c2d6;max-width:600px}
.section-hero--home .hero-proof{color:#e7ebf3}
.section-hero--home .hero-proof li{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.section-hero--home .hero-proof .icon{color:var(--accent-on-dark)}
.section-hero--home .hero-logos{color:rgba(231,235,243,.72)}
.section-hero--home .hero-logos .platform-logo{opacity:.9}
@media (min-width:1100px){
	.hero-grid--showcase{grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:clamp(40px,4vw,72px)}
}

/* ---------- Cadre de navigateur ---------- */
.frame{margin:0;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(11,16,32,.08),var(--shadow-xl)}
.frame-bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#f1f3f8;border-bottom:1px solid #e1e5ee}
.frame-bar i{width:9px;height:9px;border-radius:50%;background:#ff5f57}
.frame-bar i:nth-child(2){background:#febc2e}
.frame-bar i:nth-child(3){background:#28c840}
.frame-bar span{flex:1;margin:0 40px 0 14px;padding:3px 10px;border-radius:7px;background:#fff;font-family:var(--mono);font-size:.62rem;letter-spacing:.02em;color:#7a8295;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frame-screen{display:block;aspect-ratio:1200/750;background:var(--paper-2);overflow:hidden}
.frame-screen picture{display:contents}
.frame-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}

/* ---------- Composition du hero : trois captures et deux pastilles ---------- */
.hero-visual{position:relative;min-width:0}
.hero-visual .frame--1{position:relative;z-index:3}
.hero-visual .frame--2,.hero-visual .frame--3{display:none}
.hero-chip{position:absolute;z-index:5;display:flex;align-items:center;gap:12px;padding:9px 16px 9px 9px;border-radius:16px;background:rgba(255,255,255,.97);box-shadow:0 18px 40px -16px rgba(0,0,0,.55);font-size:.8rem;line-height:1.3;color:var(--muted)}
.hero-chip strong{display:block;font-family:var(--display);font-size:.92rem;font-weight:750;color:var(--ink);letter-spacing:-.01em}
.hero-chip--person{left:-10px;bottom:-22px}
.hero-chip--badge{right:-8px;top:-18px;padding:10px 16px 10px 12px}
.hero-chip--badge .platform-logo{color:#5e8e3e}
.portrait--chip{width:44px;height:44px;border-radius:12px;overflow:hidden}
.portrait--chip img{width:100%;height:100%;object-fit:cover}
@media (min-width:1100px){
	.hero-visual{height:clamp(440px,36vw,540px)}
	.hero-visual .frame{position:absolute}
	.hero-visual .frame--1{width:84%;left:8%;top:14%;z-index:3}
	.hero-visual .frame--2{display:block;width:58%;left:-6%;top:0;z-index:2;transform:rotate(-4deg);opacity:.92}
	.hero-visual .frame--3{display:block;width:54%;right:-3%;bottom:2%;z-index:1;transform:rotate(3.5deg);opacity:.9}
	.hero-chip--person{left:0;bottom:4%}
	.hero-chip--badge{right:-2%;top:6%}
}
@keyframes aimek-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.js-anim .hero-chip--person{animation:aimek-bob 7s ease-in-out infinite}
.js-anim .hero-chip--badge{animation:aimek-bob 8s ease-in-out -3s infinite}
@media (max-width:1099px){
	.hero-visual{margin:8px 10px 28px}
	.hero-chip{font-size:.74rem}
	.hero-chip strong{font-size:.86rem}
}

/* ---------- Bandeau des références ---------- */
.section-marquee{padding-block:clamp(34px,4.5vw,56px) clamp(30px,4vw,50px);overflow:hidden}
.marquee-title{margin:0 0 22px;text-align:center;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marquee-track{display:flex;width:max-content;animation:aimek-marquee 80s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-list{display:flex;align-items:center;margin:0;padding:0;list-style:none}
.marquee-list li{display:flex;align-items:baseline;gap:10px;padding-right:30px;margin-right:30px;white-space:nowrap;position:relative}
.marquee-list li::after{content:"";position:absolute;right:-3px;top:50%;width:6px;height:6px;border-radius:50%;background:var(--line-2);transform:translateY(-50%)}
.marquee-list strong{font-family:var(--display);font-size:clamp(1.12rem,1.9vw,1.45rem);font-weight:750;letter-spacing:-.025em;color:var(--ink)}
.marquee-list span{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
@keyframes aimek-marquee{to{transform:translateX(-50%)}}

/* ---------- Cartes de plateforme : le logo, dans sa couleur ---------- */
.card-logo{display:inline-grid;place-items:center;width:56px;height:56px;margin-bottom:20px;border-radius:16px;background:var(--paper-2)}
.card--shopify .card-logo{background:#eef6e2;color:#5e8e3e}
.card--prestashop .card-logo{background:#fde9f2;color:#c3005a}
.card--woocommerce .card-logo{background:#f2ecfa;color:#7f54b3}
.card--wordpress .card-logo{background:#e6f1f6;color:#21759b}
/* Le logo WooCommerce est la bulle « Woo » seule : lisible même en petit, sans agrandissement. */
.card--platform{position:relative;overflow:hidden}
.card--platform::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:currentColor;opacity:0;transition:opacity .25s}
.card--shopify{--brand:#5e8e3e}.card--prestashop{--brand:#c3005a}.card--woocommerce{--brand:#7f54b3}.card--wordpress{--brand:#21759b}
.card--platform::after{background:var(--brand)}
a.card--platform:hover{border-color:var(--brand)}
a.card--platform:hover::after{opacity:1}
a.card--platform:hover .card-more{color:var(--brand)}
.card--platform .card-kicker{color:var(--muted)}

/* ---------- Services : grille asymétrique ---------- */
@media (min-width:980px){
	.grid--bento{grid-template-columns:repeat(4,1fr)}
	.grid--bento .card--feature{grid-column:span 2;grid-row:span 2}
}
@media (min-width:640px) and (max-width:979px){
	.grid--bento .card--feature{grid-column:span 2}
}
.card--feature{position:relative;overflow:hidden;isolation:isolate;justify-content:flex-end;min-height:280px;padding:clamp(28px,3vw,40px);background:var(--ink);border-color:var(--ink);color:#d5dbe8}
.card--feature::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 60% at 100% 0%,rgba(99,102,241,.38),transparent 62%),radial-gradient(60% 50% at 0% 100%,rgba(34,211,238,.13),transparent 65%)}
.card--feature::after{content:"</>";position:absolute;right:28px;top:18px;z-index:-1;font-family:var(--mono);font-size:clamp(4rem,9vw,7.5rem);font-weight:700;color:rgba(255,255,255,.05);letter-spacing:-.05em}
.card--feature .card-icon{width:58px;height:58px;background:rgba(255,255,255,.08);color:var(--accent-on-dark);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.card--feature h3{font-size:clamp(1.5rem,2.4vw,2rem);color:#fff;letter-spacing:-.03em}
.card--feature p{font-size:1.04rem;color:var(--muted-dark);max-width:44ch}
.card--feature .card-more{color:#fff;margin-top:26px}
a.card--feature:hover{border-color:var(--ink)}
a.card--feature:hover .card-more{color:var(--accent-on-dark)}
a.card--feature:hover .card-icon{background:var(--grad);color:#fff}

/* ---------- Carrousel des réalisations ---------- */
.showcase{position:relative}
.showcase-track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:24px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;border-radius:var(--radius-lg)}
.showcase-track::-webkit-scrollbar{display:none}
.showcase-track:focus-visible{outline-offset:6px}
.showcase-slide{scroll-snap-align:start;display:grid;gap:26px;align-items:center;padding:clamp(14px,2.2vw,28px);background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.showcase-media{display:block;border-radius:14px}
.showcase-media .frame{box-shadow:0 0 0 1px rgba(11,16,32,.07),var(--shadow-lg);transition:transform .5s var(--ease)}
.showcase-media:hover .frame{transform:translateY(-4px)}
.showcase-body{padding:0 clamp(6px,1.5vw,16px) 8px}
.showcase-body h3{font-size:clamp(1.5rem,2.6vw,2.2rem);letter-spacing:-.035em;margin-bottom:.4em}
.showcase-body h3 a{color:inherit;text-decoration:none}
.showcase-body h3 a:hover{color:var(--accent)}
.showcase-body p{color:var(--muted);font-size:1.02rem}
.showcase-body .tags{margin:0 0 24px}
.showcase-nav{display:flex;align-items:center;gap:14px;margin-top:26px}
.showcase-btn{display:grid;place-items:center;width:52px;height:52px;border:1.5px solid var(--line-2);border-radius:50%;background:var(--white);color:var(--ink);cursor:pointer;transition:background-color .2s,border-color .2s,color .2s,opacity .2s}
.showcase-btn:hover:not(:disabled){background:var(--ink);border-color:var(--ink);color:#fff}
.showcase-btn:disabled{opacity:.35;cursor:default}
.showcase-btn--prev .icon{transform:rotate(180deg)}
.showcase-count{font-family:var(--mono);font-size:.85rem;color:var(--muted);min-width:64px;text-align:center}
.showcase-count b{color:var(--ink);font-weight:600}
.showcase-progress{flex:1;max-width:340px;height:3px;margin-left:auto;border-radius:3px;background:var(--line);overflow:hidden}
.showcase-progress span{display:block;height:100%;border-radius:3px;background:var(--grad);transition:width .45s var(--ease),transform .45s var(--ease)}
@media (min-width:900px){
	.showcase-slide{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(32px,4vw,56px);padding:28px clamp(28px,3.5vw,48px) 28px 28px}
}
@media (max-width:639px){
	.showcase-track{grid-auto-columns:90%;gap:12px;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);border-radius:0}
	.showcase-body h3{font-size:1.35rem}
	.showcase-body p{font-size:.95rem}
	.showcase-btn{width:46px;height:46px}
}

/* ---------- Qui suis-je : portrait large ---------- */
.media-split--portrait{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.media-figure--portrait{position:relative;isolation:isolate;justify-self:center;width:min(100%,430px);margin:0 0 18px}
.media-figure--portrait::before{content:"";position:absolute;inset:22px -18px -18px 22px;z-index:-1;border-radius:var(--radius-lg);background:var(--grad)}
.portrait--split{display:block;width:100%;height:auto;aspect-ratio:4/5;border-radius:var(--radius-lg);box-shadow:var(--shadow-xl)}
.portrait--split img{width:100%;height:100%;object-fit:cover;object-position:center 25%}
.portrait-badges{position:absolute;left:-22px;bottom:36px;display:grid;gap:8px;justify-items:start;margin:0;padding:0;list-style:none}
.portrait-badges li{padding:9px 15px;border-radius:999px;background:#fff;box-shadow:0 14px 30px -14px rgba(11,16,32,.5);font-size:.84rem;font-weight:650;color:var(--ink)}
@media (max-width:899px){
	.media-split--portrait{grid-template-columns:1fr}
	.media-figure--portrait{order:-1;width:min(78%,340px)}
	.portrait-badges{left:-14px;bottom:22px}
	.portrait-badges li{font-size:.78rem;padding:7px 12px}
}

/* ---------- Titre centré (bandeaux, preuves) ---------- */
.section-head--center{margin-inline:auto;text-align:center}

@media (prefers-reduced-motion:reduce){
	.marquee-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;row-gap:14px}
	.marquee-list[aria-hidden]{display:none}
	.marquee-list{flex-wrap:wrap;justify-content:center;row-gap:14px}
	.marquee{-webkit-mask-image:none;mask-image:none}
	.js-anim .hero-chip--person,.js-anim .hero-chip--badge{animation:none}
}

/* ==========================================================================
   15. Logos des plateformes
   Chaque marque garde sa couleur ; sur fond sombre, un ton plus clair pour
   rester lisible. Les logos accompagnent un libellé, ils ne le remplacent
   pas (sauf dans le bandeau des références, où le nom reste lu à l'écran).
   ========================================================================== */
.platform-logo{flex:none}
.platform-logo--shopify{color:#5e8e3e}
.platform-logo--prestashop{color:#c3005a}
.platform-logo--woocommerce{color:#7f54b3}
.platform-logo--wordpress{color:#21759b}
:is(.section-hero--home,.site-footer,.section--dark,.cta-box,.card--feature,.offer--featured,.pricing-card) .platform-logo--shopify{color:#a3cf5c}
:is(.section-hero--home,.site-footer,.section--dark,.cta-box,.card--feature,.offer--featured,.pricing-card) .platform-logo--prestashop{color:#ff6fb0}
:is(.section-hero--home,.site-footer,.section--dark,.cta-box,.card--feature,.offer--featured,.pricing-card) .platform-logo--woocommerce{color:#c3a2f2}
:is(.section-hero--home,.site-footer,.section--dark,.cta-box,.card--feature,.offer--featured,.pricing-card) .platform-logo--wordpress{color:#6cc0ea}

/* Logos devant un libellé : menus, pied de page, études de cas, tableaux. */
.pmarks{display:inline-flex;align-items:center;gap:3px;margin-right:8px;vertical-align:-3px}
.pmarks-arrow{margin:0 2px;font-size:.85em;line-height:1;color:var(--muted)}
.site-footer .pmarks-arrow{color:var(--muted-dark)}
.case-meta .pmarks{vertical-align:-3px;margin-right:7px}
.table thead .pmarks{margin-right:7px}
.table thead :is(.platform-logo--shopify,.platform-logo--prestashop,.platform-logo--woocommerce,.platform-logo--wordpress){color:#fff}

/* En tête de page : une tuile par plateforme, une flèche pour une migration. */
.hero-brand{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 22px}
.hero-brand-tile{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow)}
.hero-brand-tile .platform-logo--woocommerce{transform:scale(1.35)}
.hero-brand-arrow{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent)}
@media (max-width:520px){.hero-brand-tile{width:48px;height:48px;border-radius:14px}}

/* Schéma de migration : logos en blanc sur les blocs source et cible. */
.flow-end .pmarks{justify-content:center;margin:6px 0 4px}
.flow-end .platform-logo{color:#fff!important}
.flow-end .pmarks-arrow{color:rgba(255,255,255,.7)}

/* Bandeau des références : le logo tient lieu de nom de plateforme. */
.marquee-platform{display:inline-flex;align-self:center}

/* Bandeaux des articles : le logo de la plateforme, en blanc. */
.card-band .platform-logo{position:relative;z-index:1;color:#fff}
.card-band .platform-logo--woocommerce{transform:scale(1.35)}
.card-band .pmarks{position:relative;z-index:1;gap:16px;margin:0}
.card-band .pmarks-arrow{color:rgba(255,255,255,.7)}

/* Catégories du blog et sous-menus. */
.cat-nav a{display:inline-flex;align-items:center}
.cat-nav a[aria-current] .platform-logo,.cat-nav a:hover .platform-logo{color:#fff}
.sub-list strong{display:flex;align-items:center}

/* Texte réservé aux lecteurs d'écran. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Schéma de migration sur fond sombre : les étapes passent en cartes sombres.
   Sur carte blanche, leur titre (strong, blanc en section sombre) disparaissait. */
.section--dark .flow-stages li{background:var(--ink-2);border-color:var(--line-dark);box-shadow:none}
.section--dark .flow-stages strong{color:#fff}
.section--dark .flow-stages span{color:var(--muted-dark)}
.section--dark .flow-stages li::before{background:rgba(165,180,252,.14);color:var(--accent-on-dark)}
.section--dark .flow-from{background:var(--ink-3);border:1px solid var(--line-dark)}

/* ==========================================================================
   16. Réalisations en images
   Captures de boutiques en production, logos clients, avis vérifiés.
   ========================================================================== */
/* Capture de hauteur libre (bloc de fiche produit, pied de page) */
.frame-screen--auto{aspect-ratio:auto}
.frame-screen--auto img{height:auto;object-fit:initial}
.shot{display:block;width:100%;height:100%}
.shot picture{display:contents}
.shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.card-media .shot img{object-position:top}

/* Bloc texte + capture */
.media-figure--shot{margin:0}
.media-figure--shot .frame{box-shadow:0 0 0 1px rgba(11,16,32,.07),var(--shadow-xl)}
.media-figure--shot figcaption{margin-top:14px;font-size:.86rem;color:var(--muted)}

/* Galerie commentée : un écran, ce qu'il fait */
.gallery{display:grid;gap:22px}
@media (min-width:900px){.gallery--2{grid-template-columns:repeat(2,minmax(0,1fr))}.gallery--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gallery-item{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.gallery-item:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.gallery-media{padding:18px 18px 0;background:linear-gradient(180deg,var(--paper-2),var(--white))}
.gallery-media .frame{box-shadow:0 0 0 1px rgba(11,16,32,.06),var(--shadow)}
.gallery-body{display:flex;flex-direction:column;flex:1;padding:22px 26px 26px}
.gallery-body h3{font-size:1.22rem;margin-bottom:.4em}
.gallery-body p{color:var(--muted);font-size:.97rem;margin:0}
.gallery-body .tags{margin-top:16px}
.gallery-body .link-arrow{margin-top:auto;padding-top:18px}
.gallery-item--text .gallery-body{padding-top:28px}

/* Portfolio : boutiques en vitrine */
.portfolio{display:grid;gap:22px}
@media (min-width:640px){.portfolio{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.portfolio{grid-template-columns:repeat(3,minmax(0,1fr))}}
.portfolio-item{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.portfolio-item:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.portfolio-media{display:block;padding:14px 14px 0;background:linear-gradient(180deg,var(--paper-2),var(--white))}
.portfolio-media .frame{transition:transform .5s var(--ease)}
.portfolio-item:hover .portfolio-media .frame{transform:translateY(-3px)}
.portfolio-body{display:flex;flex-direction:column;flex:1;padding:18px 22px 22px}
.portfolio-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin-bottom:12px}
.portfolio-logo{display:flex;align-items:center;height:40px;max-width:60%}
.portfolio-logo img{height:36px;max-height:40px;max-width:100%;width:auto;object-fit:contain;object-position:left center}
/* Une image absente ou pas encore chargée ne doit jamais élargir la grille. */
.portfolio-item,.gallery-item{min-width:0}
.frame--shot img{max-width:100%}
.portfolio-name{font-family:var(--display);font-size:1.05rem}
.portfolio-work{flex:none;padding:5px 11px;border-radius:999px;font-family:var(--mono);font-size:.64rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;background:var(--accent-soft);color:var(--accent)}
.portfolio-work--correction-de-bug{background:#fff4e5;color:#9a5b00}
.portfolio-work--creation{background:#e8f7ef;color:#0e7a43}
.portfolio-item h3{font-size:1.12rem;margin-bottom:.25em}
.portfolio-meta{margin:0 0 14px;font-size:.88rem;color:var(--muted)}
.portfolio-note{margin:0 0 14px;font-size:.92rem;color:var(--muted)}
.portfolio-item .link-arrow{margin-top:auto;font-size:.88rem;font-family:var(--mono);font-weight:500}

/* Bandeau : logos des clients, en gris, en couleur au survol */
.marquee-list li.has-logo{align-items:center}
.marquee-logo{display:flex;align-items:center;height:42px}
.marquee-logo img{max-height:42px;max-width:170px;width:auto;object-fit:contain;filter:grayscale(1) brightness(.5) contrast(1.3);opacity:.85;transition:filter .3s,opacity .3s}
.marquee-list li:hover .marquee-logo img{filter:none;opacity:1}

/* Grille des références : nature de l'intervention */
.ref-work{align-self:flex-start;margin-top:8px;padding:3px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:.72rem;font-weight:650}

/* Avis vérifiés */
.rating-badge{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:0 0 28px;padding:16px 22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--white);box-shadow:var(--shadow-sm)}
.rating-score{font-family:var(--display);font-size:2.2rem;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.rating-score small{font-size:.5em;color:var(--muted);font-weight:600;margin-left:2px}
.rating-stars{color:#f5b301;font-size:1.25rem;letter-spacing:2px}
.rating-text{display:flex;flex-direction:column;font-size:.86rem;color:var(--muted);line-height:1.4}
.rating-text strong{font-size:.98rem;color:var(--ink)}
.rating-badge .link-arrow{margin-left:auto;font-size:.9rem}
.testimonial{position:relative;gap:18px;margin:0;padding:30px 28px 24px}
.testimonial-mark{color:var(--accent);opacity:.25}
.testimonial blockquote{margin:0;font-size:1.02rem;line-height:1.62;color:var(--text)}
.testimonial blockquote p{margin:0}
.testimonial figcaption{display:flex;align-items:center;gap:12px;margin-top:auto}
.testimonial-avatar{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;background:var(--grad);color:#fff;font-family:var(--display);font-weight:800}
/* La règle générale « figcaption span » (bloc, gris, petit) ne doit pas atteindre l'initiale. */
.testimonial figcaption .testimonial-avatar{display:grid;font-size:1.05rem;line-height:1;color:#fff}
.testimonial figcaption strong{display:block;font-family:var(--display);color:var(--ink)}
.testimonial figcaption span span{display:block;font-size:.84rem;color:var(--muted);line-height:1.35}
.testimonial .testimonial-source{display:flex;align-items:center;gap:6px;margin:0;padding-top:14px;border-top:1px dashed var(--line-2);font-size:.78rem;line-height:1.4;color:var(--muted)}
.testimonial-source .icon{color:var(--ok)}
.section--dark .testimonial blockquote{color:#e3e8f2}
.testimonial-source .icon{flex:none}
/* Mobile : cartes plus denses, placées après les règles générales pour les emporter. */
@media (max-width:639px){.testimonial{gap:14px;padding:22px 20px 18px}.testimonial blockquote,.testimonial blockquote p{font-size:.97rem;line-height:1.58}.testimonial-mark{width:26px;height:26px}.testimonial .testimonial-source{font-size:.74rem;line-height:1.4}.testimonial figcaption span span{font-size:.8rem}}
@media (max-width:639px){.rating-badge .link-arrow{margin-left:0}}

/* ==========================================================================
   17. Intelligence artificielle : appel vers l'assistant, offre d'intégration
   ========================================================================== */
/* Dans la rangée de preuves du hero : la pastille qui ouvre l'assistant. */
.hero-proof .hero-proof-ai{padding:0;border:0;background:none}
.hero-ai{position:relative;display:inline-flex;align-items:center;gap:11px;padding:7px 16px 7px 8px;border-radius:999px;color:#fff;text-decoration:none;background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 55%,#d946ef 100%);box-shadow:0 10px 28px -10px rgba(139,92,246,.75),inset 0 1px 0 rgba(255,255,255,.28);transition:transform .25s var(--ease),box-shadow .25s var(--ease);isolation:isolate}
.hero-ai::after{content:"";position:absolute;inset:-3px;z-index:-1;border-radius:inherit;background:inherit;filter:blur(12px);opacity:.45;animation:ai-glow 3.2s ease-in-out infinite}
.hero-ai:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(139,92,246,.9),inset 0 1px 0 rgba(255,255,255,.3)}
.hero-ai:focus-visible{outline:2px solid #fff;outline-offset:3px}
.hero-ai-icon{position:relative;display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.18)}
.hero-ai-icon .icon-spark{color:#fff}
.hero-ai-dot{position:absolute;right:-1px;top:-1px;width:10px;height:10px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 2px #7c5cf2}
.hero-ai-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#22c55e;animation:ai-ping 1.8s cubic-bezier(0,0,.2,1) infinite}
.hero-ai-text{display:flex;flex-direction:column;line-height:1.15}
.hero-ai-text strong{font-family:var(--display);font-size:.95rem;font-weight:700;letter-spacing:-.01em;color:#fff}
.hero-ai-text small{font-size:.74rem;font-weight:500;color:rgba(255,255,255,.85)}
.hero-ai>.icon{width:16px;height:16px;transition:transform .25s var(--ease)}
/* Accueil : l'appel vers l'assistant est seul sur sa ligne, il respire davantage. */
.hero-proof:has(>.hero-proof-ai:only-child){gap:0;margin-top:26px}
.hero-proof:has(>.hero-proof-ai:only-child) .hero-ai{padding:9px 18px 9px 9px}
@media (max-width:639px){
	.hero-proof-ai{width:100%}
	.hero-ai{width:100%;max-width:420px;padding:11px 16px 11px 10px}
	.hero-ai-text strong{font-size:1rem}
	.hero-ai-text small{font-size:.78rem}
	.hero-logos{gap:12px 18px;margin-top:26px;font-size:.84rem}
	.hero-logos li{gap:7px}
}
.hero-ai:hover>.icon{transform:translateX(3px)}
@keyframes ai-ping{75%,100%{transform:scale(2.2);opacity:0}}
@keyframes ai-glow{0%,100%{opacity:.35}50%{opacity:.65}}

/* Bouton qui ouvre l'assistant, ailleurs sur le site. */
.btn-chat{gap:9px}
.btn-chat .icon-spark{flex:none}
.btn-primary.btn-chat{background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 60%,#c026d3 100%)}
.portfolio-note{display:flex;align-items:center;gap:8px;margin:0 0 20px;font-size:.88rem;color:var(--muted)}
.portfolio-note::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent)}