/* AppWire Web — site vitrine. Feuille unique, sans build.
   Identité reprise d'Instagram @appwire : marine #0a1430, dégradé cyan → bleu → indigo,
   Bricolage Grotesque (titres), Inter (texte), JetBrains Mono (repères). */
:root {
    --bg: #f5f8ff;
    --surface: #ffffff;
    --surface-2: #eaf0fb;
    --ink: #0a1430;
    --muted: #4d5b7c;
    --line: #dbe3f3;
    --accent: #1f6fd6;
    --accent-soft: #e3eeff;
    --navy: #0a1430;
    --navy-2: #121e45;
    --on-navy: #f3f6ff;
    --on-navy-muted: #aebbdc;
    --on-navy-line: rgba(255, 255, 255, .1);
    --cyan: #41c2fc;
    --blue: #2d94f0;
    --indigo: #5b7cff;
    --grad: linear-gradient(100deg, #41c2fc, #2d94f0 55%, #5b7cff);
    --grad-texte: linear-gradient(100deg, #1492d6, #2a78e0 55%, #4b5ff0);
    --ok: #0f8a5f;
    --err: #c0262d;
    --radius: 16px;
    --shadow: 0 1px 2px rgba(10, 20, 48, .05), 0 12px 32px rgba(10, 20, 48, .08);
    --f-titre: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
    --f-texte: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0b1433;
        --surface: #111c40;
        --surface-2: #17244f;
        --ink: #edf2ff;
        --muted: #a3b2d6;
        --line: #22305e;
        --accent: #5cc8fd;
        --accent-soft: #14295a;
        --navy: #060c22;
        --navy-2: #0e1838;
        --grad-texte: var(--grad);
        --ok: #3ccf9a;
        --err: #ff7a6b;
        --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 36px rgba(0, 0, 0, .35);
        color-scheme: dark;
    }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--f-texte); overflow-x: clip; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-titre); letter-spacing: -.03em; line-height: 1.05; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.5rem, 6.4vw, 4.6rem); font-weight: 800; }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); font-weight: 800; }
h3 { font-size: 1.22rem; font-weight: 700; letter-spacing: -.02em; }
p { margin: 0; }
:focus-visible { outline: 2.5px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 20px; }
.mono { font-family: var(--f-mono); font-size: .84em; letter-spacing: .01em; }
.muted { color: var(--muted); }
.kicker { font: 600 .78rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .16em; color: var(--accent); }
.label { font: 600 .74rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--muted); max-width: 60ch; }
.grad { background-image: var(--grad-texte); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.passer { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--surface); color: var(--ink); padding: 10px 14px; border-radius: 10px; font-weight: 600; }
.passer:focus { top: 12px; }

/* Sections sombres (comme les visuels Instagram) */
.sombre { --grad-texte: var(--grad); --accent: var(--cyan); --muted: var(--on-navy-muted); --line: var(--on-navy-line);
    position: relative; isolation: isolate; background: var(--navy); color: var(--on-navy); overflow: hidden; }
.fond { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse 85% 75% at 78% 12%, #000 0, transparent 72%); mask-image: radial-gradient(ellipse 85% 75% at 78% 12%, #000 0, transparent 72%); }
.fond::before { content: ""; position: absolute; inset: -64px; background-image: linear-gradient(rgba(65, 194, 252, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(65, 194, 252, .09) 1px, transparent 1px);
    background-size: 64px 64px; animation: grille 18s linear infinite; }
.fond.bas { -webkit-mask-image: radial-gradient(ellipse 70% 90% at 15% 100%, #000 0, transparent 70%); mask-image: radial-gradient(ellipse 70% 90% at 15% 100%, #000 0, transparent 70%); }
.halo { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; width: min(900px, 120vw); aspect-ratio: 1; max-width: none;
    background: radial-gradient(circle, rgba(45, 148, 240, .34), transparent 64%); right: -28%; top: -55%; animation: flotte 14s ease-in-out infinite alternate; }
.halo.b { background: radial-gradient(circle, rgba(91, 124, 255, .2), transparent 64%); width: min(640px, 100vw); left: -22%; right: auto; top: auto; bottom: -60%; animation-duration: 18s; animation-direction: alternate-reverse; }
@keyframes grille { to { transform: translate(64px, 64px); } }
@keyframes flotte { to { transform: translate(-6%, 8%) scale(1.08); } }

/* En-tête */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; color: var(--on-navy); background: #0a1430;
    border-bottom: 1px solid rgba(255, 255, 255, .08); transition: background-color .3s ease, box-shadow .3s ease; }
.top.colle { background: rgba(10, 20, 48, .86); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 10px 30px rgba(4, 10, 30, .25); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.marque { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 800 1.32rem/1 var(--f-titre); letter-spacing: -.035em; color: #fff; }
.marque .logo-a { height: 30px; width: auto; transition: transform .4s var(--ease); }
.marque:hover .logo-a { transform: rotate(-6deg) scale(1.06); }
.marque small { font: 600 .62rem/1 var(--f-mono); letter-spacing: .14em; color: var(--cyan); border: 1.5px solid rgba(65, 194, 252, .45); border-radius: 6px; padding: 4px 6px; }
.marque.trace .logo-a path { animation: trace 1.4s var(--ease) .1s both; stroke: #6fd3ff; stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; }
@keyframes trace { 60% { stroke-dashoffset: 0; fill-opacity: 0; } 100% { stroke-dashoffset: 0; fill-opacity: 1; stroke-width: 0; } }
.nav { display: flex; align-items: center; gap: 6px; }
.liens { display: flex; gap: 4px; }
.liens a { text-decoration: none; padding: 9px 14px; border-radius: 999px; font-weight: 500; font-size: .95rem; color: var(--on-navy-muted); transition: color .2s ease, background .2s ease; }
.liens a:hover, .liens a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .09); }
.liens a[aria-current="page"] { box-shadow: inset 0 0 0 1px rgba(65, 194, 252, .35); }
.nav > .btn { margin-left: 6px; padding: 10px 18px; font-size: .92rem; }
.acces-client { display: inline-flex; align-items: center; gap: 8px; margin-left: 4px; padding: 8px 14px; border-radius: 999px; text-decoration: none; font-weight: 500; font-size: .92rem; white-space: nowrap;
    flex: none; color: var(--on-navy); border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); transition: border-color .2s ease, background .2s ease; }
.acces-client svg { color: var(--cyan); flex: none; }
.acces-client:hover, .acces-client[aria-current="page"] { border-color: rgba(65, 194, 252, .55); background: rgba(65, 194, 252, .1); }
@media (max-width: 1100px) {
    .acces-client { width: 40px; height: 40px; padding: 0; justify-content: center; }
    .acces-libelle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.menu { display: none; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); color: #fff; border-radius: 10px; width: 42px; height: 40px; cursor: pointer; place-items: center; }
.menu span { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; transition: box-shadow .2s ease, transform .2s ease; }
.nav.ouvert .menu span { box-shadow: none; transform: rotate(45deg); }
.nav.ouvert .menu span::after { content: ""; display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transform: rotate(-90deg); }
.txt-court { display: none; }
@media (max-width: 760px) {
    .liens { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 2px; padding: 10px 16px 18px; background: #0a1430; border-bottom: 1px solid rgba(255, 255, 255, .08); }
    .liens a { padding: 12px 14px; font-size: 1rem; }
    .nav.ouvert .liens { display: flex; animation: deroule .25s var(--ease); }
    .menu { display: inline-grid; }
    .txt-long { display: none; }
    .txt-court { display: inline; }
    .acces-client { width: 42px; border-radius: 10px; margin-left: 0; }
}
@media (max-width: 380px) {
    .top .wrap { gap: 8px; padding-inline: 14px; }
    .nav { gap: 4px; }
    .acces-client, .menu { width: 38px; }
    .nav > .btn { margin-left: 2px; padding-inline: 12px; }
}
@keyframes deroule { from { opacity: 0; transform: translateY(-8px); } }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; padding: 14px 24px; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer;
    font: 600 1rem/1 var(--f-texte); transition: transform .2s var(--ease), box-shadow .25s ease, background-position .45s ease, border-color .2s ease, background-color .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-plein { background-image: var(--grad); background-size: 180% 100%; background-position: 0 0; color: #0a1430 !important; box-shadow: 0 6px 20px rgba(45, 148, 240, .28); }
.btn-plein:hover { background-position: 100% 0; box-shadow: 0 10px 32px rgba(45, 148, 240, .5); }
.btn-ligne { border-color: var(--line); background: var(--surface); color: var(--ink); }
.btn-ligne:hover { border-color: var(--accent); }
.sombre .btn-ligne { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .22); color: var(--on-navy); }
.sombre .btn-ligne:hover { border-color: var(--cyan); background: rgba(65, 194, 252, .08); }
.btn .fl { transition: transform .25s var(--ease); }
.btn:hover .fl { transform: translateX(4px); }

/* Sections */
section { padding-block: clamp(64px, 9vw, 112px); }
.entete { display: grid; gap: 16px; margin-bottom: clamp(32px, 5vw, 52px); max-width: 780px; }
.entete.centre { margin-inline: auto; text-align: center; justify-items: center; }

/* Apparition au défilement (activée par site.js) */
.js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js [data-reveal].vu { opacity: 1; transform: none; }

/* Héros */
.heros { padding-block: clamp(56px, 8vw, 112px) clamp(64px, 8vw, 104px); }
.heros .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(40px, 6vw, 80px); align-items: center; }
.heros .texte { display: grid; gap: 26px; min-width: 0; }
.heros h1 .l { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.heros h1 .l > span { display: inline-block; animation: monte .9s var(--ease) both; animation-delay: calc(.15s + var(--i, 0) * .12s); }
@keyframes monte { from { transform: translateY(105%); } }
.heros .kicker, .heros .lead, .heros .actions, .heros .preuves { animation: apparait .8s var(--ease) both; }
.heros .lead { animation-delay: .5s; } .heros .actions { animation-delay: .62s; } .heros .preuves { animation-delay: .74s; }
@keyframes apparait { from { opacity: 0; transform: translateY(14px); } }
.heros .actions { display: flex; gap: 12px; flex-wrap: wrap; }
.preuves { display: flex; gap: 10px 22px; flex-wrap: wrap; padding: 0; margin: 0; list-style: none; font-size: .93rem; color: var(--on-navy-muted); }
.preuves li { display: flex; align-items: center; gap: 9px; }
.preuves li::before { content: ""; width: 18px; height: 18px; border-radius: 6px; flex: none;
    background: var(--grad); }
.preuves li { position: relative; }
.preuves li::after { content: ""; position: absolute; left: 5px; top: 50%; width: 8px; height: 4px; margin-top: -3px; border: solid #0a1430; border-width: 0 0 2px 2px; transform: rotate(-45deg); }
@media (max-width: 920px) { .heros .wrap { grid-template-columns: 1fr; } }

/* Le chantier : un site qui se construit en 7 jours */
.chantier { display: grid; gap: 14px; min-width: 0; animation: apparait 1s var(--ease) .35s both; }
.fenetre { position: relative; background: #f5f8ff; color: #0a1430; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .08); transform: perspective(1400px) rotateY(-5deg) rotateX(2deg); transition: transform .8s var(--ease); }
.chantier:hover .fenetre { transform: none; }
.barre { display: flex; align-items: center; gap: 7px; padding: 12px 14px; background: #e3e9f6; }
.barre > i { width: 10px; height: 10px; border-radius: 50%; background: #c3cde3; flex: none; }
.barre > i:first-child { background: #ff8b7b; } .barre > i:nth-child(2) { background: #ffd166; } .barre > i:nth-child(3) { background: #5fd49a; }
.url { margin-left: 10px; flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; background: #fff; border-radius: 8px; padding: 6px 10px; font: 500 .78rem/1 var(--f-mono); color: #4d5b7c; white-space: nowrap; overflow: hidden; }
.url svg { width: 12px; height: 12px; flex: none; color: #9aa8c6; transition: color .3s ease; }
.ecran { padding: 16px; display: grid; gap: 12px; min-height: 290px; }
.bk { border-radius: 10px; transition: opacity .5s var(--ease), transform .5s var(--ease), background-color .5s ease, outline-color .4s ease; outline: 1.5px dashed transparent; outline-offset: -1.5px; }
.bk span, .bk b { display: block; border-radius: 6px; transition: background .5s ease, width .6s var(--ease); }
.b-nav { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #0a1430; }
.b-nav b { width: 22px; height: 22px; border-radius: 7px; background: var(--grad); }
.b-nav span { height: 8px; width: 46px; background: rgba(255, 255, 255, .35); }
.b-nav span:last-child { margin-left: auto; width: 64px; height: 20px; border-radius: 99px; background: var(--grad); }
.b-heros { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; padding: 16px; background: #fff; box-shadow: 0 6px 18px rgba(10, 20, 48, .06); }
.b-heros > div:first-child { display: grid; gap: 9px; align-content: center; }
.b-heros .t1 { height: 14px; width: 92%; background: #0a1430; } .b-heros .t2 { height: 14px; width: 70%; background: #2d7fe0; }
.b-heros .t3 { height: 7px; width: 85%; background: #c9d4ea; } .b-heros .bt { height: 22px; width: 46%; border-radius: 99px; background: var(--grad); margin-top: 4px; }
.b-heros .img { min-height: 104px; border-radius: 10px; background: radial-gradient(circle at 70% 30%, #ffd166 0 12%, transparent 13%), linear-gradient(160deg, #bfe6ff, #6aa8f7 60%, #4b6ff0); }
.b-cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.b-cartes span { height: 58px; border-radius: 10px; background: #fff; box-shadow: 0 6px 18px rgba(10, 20, 48, .06); position: relative; }
.b-cartes span::before { content: ""; position: absolute; left: 10px; top: 12px; width: 18px; height: 18px; border-radius: 6px; background: var(--grad); }
.b-cartes span::after { content: ""; position: absolute; left: 10px; right: 14px; bottom: 12px; height: 6px; border-radius: 4px; background: #d5deef; }
.en-ligne { position: absolute; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 99px; background: #0f8a5f; color: #fff; font: 600 .85rem/1 var(--f-texte); box-shadow: 0 10px 26px rgba(15, 138, 95, .4); transition: opacity .4s ease, transform .5s var(--ease); }
.en-ligne::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #9ff5cf; box-shadow: 0 0 0 4px rgba(159, 245, 207, .25); }
/* États animés : sans JavaScript (ou avec mouvement réduit), le site apparaît fini. */
.anime .bk { opacity: 0; transform: translateY(8px); }
.anime .bk.vu { opacity: 1; transform: none; }
.anime .bk.vu:not(.plein) { background: transparent; box-shadow: none; outline-color: #9fb2d9; }
.anime .bk.vu:not(.plein) span, .anime .bk.vu:not(.plein) b, .anime .bk.vu:not(.plein) .img { background: #dfe7f6; }
.anime .bk.vu:not(.plein) .b-cartes span::before { background: #c9d4ea; }
.anime .en-ligne { opacity: 0; transform: translateY(10px) scale(.9); }
.anime.fini .en-ligne { opacity: 1; transform: none; }
.anime.fini .url svg, .chantier:not(.anime) .url svg { color: #0f8a5f; }
.jours { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 18px; align-items: center; padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid var(--on-navy-line); }
.compteur { display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.compteur small { font: 500 .8rem var(--f-mono); color: var(--on-navy-muted); text-transform: uppercase; letter-spacing: .1em; }
.compteur b { font: 800 2.6rem/1 var(--f-titre); background-image: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; min-width: 1ch; text-align: center; }
.rail { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; gap: 6px; font: 500 .74rem/1.2 var(--f-mono); color: var(--on-navy-muted); }
.rail li { display: flex; align-items: center; gap: 6px; white-space: nowrap; transition: color .3s ease; }
.rail li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .2); transition: background .3s ease, box-shadow .3s ease; flex: none; }
.rail li.fait { color: #fff; }
.rail li.fait::before { background: var(--cyan); box-shadow: 0 0 0 4px rgba(65, 194, 252, .18); }
.progres { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.progres i { display: block; height: 100%; width: var(--p, 100%); background: var(--grad); border-radius: inherit; transition: width .8s var(--ease); }
.jours .note { grid-column: 1 / -1; font-size: .84rem; color: var(--on-navy-muted); }
.jours .note strong { color: #fff; font-weight: 600; }
@media (max-width: 520px) { .rail li:nth-child(3) { display: none; } .ecran { min-height: 0; } .fenetre { transform: none; } }

/* Bandeau des outils */
.outils { padding-block: 22px; background: var(--navy); border-top: 1px solid var(--on-navy-line); color: var(--on-navy-muted); overflow: hidden; }
.outils .piste { display: flex; width: max-content; gap: 44px; animation: defile 42s linear infinite; }
.outils:hover .piste { animation-play-state: paused; }
.outils span { font: 600 .95rem/1 var(--f-mono); letter-spacing: .02em; white-space: nowrap; display: flex; align-items: center; gap: 44px; }
.outils span::after { content: "✦"; color: var(--cyan); font-size: .7rem; }
@keyframes defile { to { transform: translateX(-50%); } }

/* Cartes prestations */
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 18px; }
.carte { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; gap: 14px; min-width: 0;
    transition: transform .35s var(--ease), box-shadow .35s ease, border-color .35s ease; }
.carte::before { content: ""; position: absolute; left: 22px; right: 22px; top: -1px; height: 3px; border-radius: 0 0 3px 3px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
a.carte, .carte.survol { text-decoration: none; color: inherit; }
a.carte:hover, .carte.survol:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
a.carte:hover::before, .carte.survol:hover::before { transform: scaleX(1); }
.ico { align-self: flex-start; flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: #0a1430; background: var(--grad); box-shadow: 0 8px 20px rgba(45, 148, 240, .28); transition: transform .45s var(--ease); }
.ico svg { width: 24px; height: 24px; }
a.carte:hover .ico, .carte.survol:hover .ico { transform: rotate(-8deg) scale(1.06); }
.carte .prix { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 16px; margin-top: auto; border-top: 1px solid var(--line); }
.carte .prix strong { font: 800 1.6rem var(--f-titre); letter-spacing: -.03em; }
.carte .prix small { color: var(--muted); }
.carte ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; color: var(--muted); font-size: .95rem; }
.carte li { padding-left: 26px; position: relative; }
.carte li::before { content: ""; position: absolute; left: 0; top: .3em; width: 16px; height: 16px; border-radius: 5px; background: var(--accent-soft); }
.carte li::after { content: ""; position: absolute; left: 5px; top: calc(.3em + 5px); width: 6px; height: 3px; border: solid var(--accent); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.carte .lien { align-self: flex-start; }
.carte .pousse { margin-top: auto; }
.carte .lien, .lien { font-weight: 600; color: var(--accent); text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.carte .lien .fl, .lien .fl { transition: transform .25s var(--ease); }
.carte:hover .lien .fl, .lien:hover .fl { transform: translateX(4px); }
/* Carte entièrement cliquable (lien étiré), avec un lien secondaire au-dessus */
.etire { color: inherit; text-decoration: none; }
.etire::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.etire:focus-visible { outline: none; }
.carte:has(.etire:focus-visible) { outline: 2.5px solid var(--cyan); outline-offset: 3px; }
.carte-pied { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.carte-pied .detail { position: relative; z-index: 2; font-size: .88rem; color: var(--muted); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--muted) 45%, transparent); text-underline-offset: 3px; }
.carte-pied .detail:hover { color: var(--accent); text-decoration-color: currentColor; }
.badge { position: absolute; top: 22px; right: 22px; font: 600 .7rem/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; padding: 7px 9px; border-radius: 7px; color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); }

/* Visibilité IA */
.ia .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 80px); align-items: center; }
.ia .texte { display: grid; gap: 22px; min-width: 0; }
.leviers { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: lv; }
.leviers li { counter-increment: lv; display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid var(--on-navy-line); font-weight: 600; }
.leviers li::before { content: counter(lv); flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font: 800 1rem var(--f-titre); color: #0a1430; background: var(--grad); }
.ia .actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.ia .actions small { color: var(--on-navy-muted); }
.chat { border-radius: 24px; background: #f5f8ff; color: #0a1430; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); overflow: hidden; min-width: 0; }
.chat-h { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: #e3e9f6; font: 600 .95rem var(--f-texte); color: #2b3a5e; }
.chat-h b { width: 30px; height: 30px; border-radius: 9px; background: var(--grad); display: grid; place-items: center; color: #0a1430; font: 800 .8rem var(--f-texte); }
.chat-h .ias { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.chat-h .ias i { font: 600 .68rem/1 var(--f-mono); font-style: normal; padding: 5px 7px; border-radius: 6px; background: #fff; color: #4d5b7c; }
.chat-b { padding: 20px; display: grid; gap: 14px; min-height: 340px; align-content: start; }
.moi { justify-self: end; max-width: 86%; background: #2d7fe0; color: #fff; font: 500 1rem/1.45 var(--f-texte); padding: 13px 16px; border-radius: 18px 18px 6px 18px; }
.moi .curseur { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -2px; background: #fff; animation: clignote .8s steps(1) infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.bot { justify-self: start; width: 92%; background: #fff; border: 1.5px solid #dde5f5; border-radius: 18px 18px 18px 6px; padding: 14px 16px; display: grid; gap: 10px; }
.bot p { font-size: .95rem; color: #2b3a5e; }
.points { display: inline-flex; gap: 5px; padding: 6px 0; }
.points i { width: 8px; height: 8px; border-radius: 50%; background: #9fb2d9; animation: rebond 1s ease-in-out infinite; }
.points i:nth-child(2) { animation-delay: .15s; } .points i:nth-child(3) { animation-delay: .3s; }
@keyframes rebond { 50% { transform: translateY(-5px); opacity: .5; } }
.noms { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.noms li, .vous { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; background: #f1f5fd; font-weight: 600; transition: opacity .45s var(--ease), transform .45s var(--ease); }
.noms i, .vous i { font: 600 .78rem var(--f-mono); font-style: normal; color: #2d7fe0; }
.vous { border: 2px dashed #41a6f6; background: #e8f4ff; color: #0a1430; animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(65, 166, 246, .16); } }
.chat.attente:not(.repond) .bot { opacity: 0; transform: translateY(8px); }
.bot { transition: opacity .4s var(--ease), transform .4s var(--ease); }
.chat.attente .points, .chat.attente .noms li, .chat.attente .vous, .chat.attente .bot p { opacity: 0; transform: translateY(8px); }
.chat .points { display: none; }
.chat.reflechit .points { display: inline-flex; opacity: 1; transform: none; }
.chat .noms li.vu, .chat .vous.vu, .chat .bot p.vu { opacity: 1; transform: none; }
@media (max-width: 920px) { .ia .wrap { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .chat-h .ias { display: none; } .chat-b { min-height: 300px; padding: 16px; } }

/* Méthode */
.etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; position: relative; }
.etape { position: relative; padding: 24px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); display: grid; gap: 10px; align-content: start; min-width: 0; }
.etape .n { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font: 800 1.05rem var(--f-titre); color: #0a1430; background: var(--grad); }
.etape p { color: var(--muted); font-size: .95rem; }
.etape .j { position: absolute; top: 24px; right: 24px; font: 500 .74rem var(--f-mono); color: var(--muted); }
@media (max-width: 900px) { .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 580px) { .etapes { grid-template-columns: 1fr; } }
.engagements { margin-top: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-radius: var(--radius); overflow: hidden; background: var(--navy); color: var(--on-navy); }
.engagements div { padding: 24px; display: grid; gap: 6px; border-right: 1px solid var(--on-navy-line); min-width: 0; }
.engagements div:last-child { border-right: 0; }
.engagements strong { font: 700 1.08rem var(--f-titre); letter-spacing: -.01em; }
.engagements span { color: var(--on-navy-muted); font-size: .93rem; }
@media (max-width: 760px) { .engagements { grid-template-columns: 1fr; } .engagements div { border-right: 0; border-bottom: 1px solid var(--on-navy-line); } .engagements div:last-child { border-bottom: 0; } }

/* Réalisations (une seule : carte en largeur, visuel à gauche) */
.grille:has(> .realisation:only-child) { grid-template-columns: minmax(0, 1fr); }
.realisation:only-child { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.realisation:only-child .visuel { aspect-ratio: auto; min-height: 280px; }
.realisation:only-child .corps { padding: clamp(24px, 4vw, 44px); align-content: center; gap: 14px; }
.realisation:only-child h3 { font-size: 1.6rem; }
@media (max-width: 760px) { .realisation:only-child { grid-template-columns: 1fr; } .realisation:only-child .visuel { aspect-ratio: 16 / 10; min-height: 0; } }
/* Réalisations */
.realisation { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: grid; align-content: start; min-width: 0; transition: transform .35s var(--ease), box-shadow .35s ease; }
.realisation:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.realisation .visuel { position: relative; aspect-ratio: 16 / 10; max-width: 100%; overflow: hidden; display: grid; place-items: center; background: #0a1430; color: #fff; isolation: isolate; }
.realisation .visuel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 80% 10%, rgba(45, 148, 240, .45), transparent 60%), linear-gradient(rgba(65, 194, 252, .09) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, rgba(65, 194, 252, .09) 1px, transparent 1px) 0 0 / 32px 32px; }
.realisation .visuel .logo-a { height: 38%; width: auto; transition: transform .6s var(--ease); }
.realisation:hover .visuel .logo-a { transform: scale(1.08) rotate(-4deg); }
.realisation .visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.realisation:hover .visuel img { transform: scale(1.04); }
.realisation .corps { padding: 20px 22px 24px; display: grid; gap: 10px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font: 500 .74rem/1 var(--f-mono); padding: 6px 8px; border-radius: 6px; background: var(--surface-2); color: var(--muted); }

/* Appel à l'action */
.appel .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; }
.appel .texte { display: grid; gap: 18px; min-width: 0; }
.appel h2 { font-size: clamp(2.2rem, 5.4vw, 4rem); }
.appel .actions { display: grid; gap: 12px; justify-items: start; }
.appel .grand-a { position: absolute; right: -4%; top: 50%; height: 150%; width: auto; transform: translateY(-50%); z-index: -1; opacity: .16; }
.appel .grand-a path { fill: none; stroke: var(--cyan); stroke-width: .6; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.6s var(--ease); }
.appel.vu .grand-a path, .appel:not(.anime) .grand-a path { stroke-dashoffset: 0; }
@media (max-width: 760px) { .appel .wrap { grid-template-columns: 1fr; } .appel .grand-a { height: 90%; right: -20%; } }

/* En-tête des pages intérieures */
.page-tete { padding-block: clamp(56px, 8vw, 96px) clamp(48px, 6vw, 72px); }
.page-tete .entete { margin-bottom: 0; }
.page-tete h1 { font-size: clamp(2.2rem, 5.4vw, 3.8rem); }
.page-tete .kicker, .page-tete h1, .page-tete .lead, .page-tete .recap { animation: apparait .8s var(--ease) both; }
.page-tete .recap { animation-delay: .26s; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.recap .puce { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 999px; background: rgba(65, 194, 252, .1); border: 1px solid rgba(65, 194, 252, .35); font: 600 .9rem/1 var(--f-texte); color: #fff; }
.recap .puce .ico { width: 26px; height: 26px; border-radius: 8px; box-shadow: none; }
.recap .puce .ico svg { width: 15px; height: 15px; }
.recap .puce small { font: 500 .8rem var(--f-mono); color: var(--on-navy-muted); }
.page-tete .recap a { color: var(--on-navy-muted); font-size: .88rem; text-underline-offset: 3px; }
.page-tete .recap a:hover { color: #fff; }
.page-tete h1 { animation-delay: .08s; } .page-tete .lead { animation-delay: .18s; }

/* Questions fréquentes */
.faq { display: grid; gap: 10px; max-width: 860px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; transition: border-color .25s ease, box-shadow .25s ease; }
.faq details[open] { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow: var(--shadow); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; font: 700 1.05rem var(--f-titre); letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 9px; background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d7fe0' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 20px 20px; color: var(--muted); max-width: 70ch; }

/* Formulaire */
.contact .wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); gap: 40px; align-items: start; }
@media (max-width: 900px) { .contact .wrap { grid-template-columns: 1fr; } }
form.formulaire { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: clamp(20px, 4vw, 34px); display: grid; gap: 18px; box-shadow: var(--shadow); }
.champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 560px) { .champs { grid-template-columns: 1fr; } }
.champ { display: grid; gap: 7px; }
.champ label { font-weight: 600; font-size: .92rem; }
.champ label small { color: var(--muted); font-weight: 400; }
.champ input, .champ select, .champ textarea { width: 100%; font: inherit; color: var(--ink); background: var(--bg); border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; transition: border-color .2s ease, box-shadow .2s ease; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 18%, transparent); }
.champ textarea { min-height: 170px; resize: vertical; }
.erreur { color: var(--err); font-size: .85rem; }
.case { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--muted); }
.case input { margin-top: 4px; accent-color: var(--blue); }
/* Champ piège masqué (display: none) : les navigateurs ne le remplissent pas en saisie automatique, les robots si. */
.pot { display: none; }
.merci { background: color-mix(in srgb, var(--ok) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); border-radius: var(--radius); padding: 24px; display: grid; gap: 8px; animation: apparait .6s var(--ease) both; }
.aside { display: grid; gap: 16px; }
.aside .bloc { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: grid; gap: 8px; background: var(--surface); }
.aside .bloc.sombre { border: 0; background: var(--navy); color: var(--on-navy); }
.aside ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--muted); }

/* Page de paiement d'une facture */
.paiement .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 28px; align-items: start; }
@media (max-width: 900px) { .paiement .wrap { grid-template-columns: 1fr; } }
.paiement .resume-facture, .paiement .regler { display: grid; gap: 16px; min-width: 0; }
.bloc-facture, .aside-bloc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: grid; gap: 10px; }
.aside-bloc.ok { border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); }
.ligne-tot { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-variant-numeric: tabular-nums; }
.ligne-tot strong { font: 800 1.35rem var(--f-titre); letter-spacing: -.02em; }
.ligne-tot.reste { padding-top: 10px; border-top: 1px solid var(--line); }
.ligne-tot.reste strong { font-size: 1.7rem; }
.petit { font-size: .88rem; }
.bloc-facture .btn { justify-self: start; margin-top: 4px; }
.echeancier { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-variant-numeric: tabular-nums; }
.echeancier li { display: grid; grid-template-columns: 3.2em minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: .93rem; }
.echeancier .r { font: 600 .8rem var(--f-mono); color: var(--muted); }
.echeancier .m { font-weight: 600; }
.echeancier .s { font: 600 .7rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .05em; padding: 6px 8px; border-radius: 6px; background: var(--surface); color: var(--muted); }
.echeancier .ok .s { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.echeancier .ko .s { color: var(--err); background: color-mix(in srgb, var(--err) 12%, transparent); }
.echeancier .attente .s { color: var(--accent); background: var(--accent-soft); }
@media (max-width: 480px) { .echeancier li { grid-template-columns: 2.6em minmax(0, 1fr) auto; } .echeancier .s { grid-column: 2 / -1; justify-self: start; } }
.a-regler { display: grid; gap: 6px; padding-bottom: 6px; }
.a-regler strong { font: 800 2.4rem/1 var(--f-titre); letter-spacing: -.03em; }
.element { min-height: 120px; }
.mandat { font-size: .84rem; color: var(--muted); padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.securite { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--muted); }
.merci.attente { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
#payer { justify-self: start; }
#payer:disabled { opacity: .55; cursor: wait; transform: none; }

/* Texte long */
.prose { max-width: 72ch; display: grid; gap: 16px; }
.prose h2 { font-size: 1.45rem; margin-top: 18px; }

/* Blog */
.blog-titre { font-size: 1.22rem; line-height: 1.25; text-wrap: balance; }
.blog-meta { color: var(--muted); font-size: .8rem; margin: 0; }
.blog-liste .carte { gap: 10px; }
.blog-liste .blog-meta { margin-top: auto; padding-top: 10px; }
.blog-cadre { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 48px; align-items: start; }
.blog-cote { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 96px); display: grid; gap: 20px; font-size: .9rem; }
.blog-cote .fil a { color: var(--accent); text-decoration: none; }
.sommaire { display: grid; gap: 8px; padding-left: 14px; border-left: 2px solid var(--line); }
.sommaire h2 { font: 600 .74rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.sommaire a { color: var(--muted); text-decoration: none; line-height: 1.35; }
.sommaire a:hover { color: var(--accent); }
.blog-texte { font-size: 1.04rem; line-height: 1.7; }
.blog-texte h2 { scroll-margin-top: 96px; }
.blog-texte h3 { font-size: 1.12rem; margin-top: 8px; }
.blog-texte ul, .blog-texte ol { padding-left: 1.3em; display: grid; gap: 6px; }
.blog-texte table { width: 100%; border-collapse: collapse; font-size: .95rem; display: block; overflow-x: auto; }
.blog-texte th, .blog-texte td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.blog-texte th { background: var(--surface-2); }
.blog-texte blockquote { margin: 0; padding: 14px 18px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 12px 12px 0; }
.blog-texte a { color: var(--accent); }
.blog-encart { margin-top: 18px; padding: 24px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); display: grid; gap: 10px; }
.blog-encart strong { font: 700 1.2rem var(--f-titre); }
.blog-encart p { margin: 0; color: var(--muted); }
.blog-encart-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.blog-autres { padding-top: 0; }
.blog-autres h2 { margin-bottom: 18px; }
@media (max-width: 860px) {
    .blog-cadre { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .blog-cote { position: static; }
}

/* Pied */
.pied-site { padding-block: 56px 40px; font-size: .92rem; }
.pied-site .wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 32px; }
.pied-site .marque { margin-bottom: 14px; }
.pied-site p { color: var(--on-navy-muted); max-width: 42ch; }
.pied-site h2 { font: 600 .74rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); margin-bottom: 14px; }
.pied-site nav { display: grid; gap: 9px; align-content: start; }
.pied-site nav a { text-decoration: none; color: var(--on-navy-muted); transition: color .2s ease; }
.pied-site nav a:hover { color: #fff; }
.pied-site .bas { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid var(--on-navy-line); color: var(--on-navy-muted); font-size: .84rem; }
@media (max-width: 760px) { .pied-site .wrap { grid-template-columns: 1fr 1fr; } .pied-site .wrap > div:first-child { grid-column: 1 / -1; } }

/* Mouvement réduit : tout est affiché d'emblée, sans animation */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .js [data-reveal] { opacity: 1; transform: none; }
    .outils .piste { flex-wrap: wrap; width: auto; justify-content: center; row-gap: 14px; }
    .outils span:nth-child(n+13) { display: none; }
    .fenetre { transform: none; }
}

/* Espace client */
.espace .wrap { display: grid; gap: 22px; }
.espace .wrap.etroit { max-width: 620px; }
.espace .alerte { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--accent-soft); }
.barre-espace { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.lien-bouton { font: inherit; font-size: .9rem; font-weight: 600; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.retour { font-weight: 600; text-decoration: none; }
.titre-bloc { font-size: 1.3rem; margin: 8px 0 0; }
.grille-espace { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 900px) { .grille-espace { grid-template-columns: 1fr; } }
.grille-espace .colonne { display: grid; gap: 16px; min-width: 0; }
.contrat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: grid; gap: 12px; }
.contrat.termine { opacity: .7; }
.contrat header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.contrat h3 { margin: 0; font-size: 1.2rem; }
.etiquette { font: 600 .72rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .05em; padding: 6px 8px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); }
.infos { margin: 0; display: grid; gap: 8px; font-size: .93rem; }
.infos div { display: grid; grid-template-columns: minmax(0, 12em) minmax(0, 1fr); gap: 12px; }
@media (max-width: 520px) { .infos div { grid-template-columns: 1fr; gap: 2px; } }
.infos dt { color: var(--muted); }
.infos dd { margin: 0; }
.pastille { font: 600 .72rem/1 var(--f-mono); text-transform: uppercase; padding: 4px 7px; border-radius: 6px; margin-right: 6px; }
.pastille.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.pastille.ko { color: var(--err); background: color-mix(in srgb, var(--err) 12%, transparent); }
.action-contrat { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.factures-espace { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-variant-numeric: tabular-nums; }
.factures-espace li { display: grid; grid-template-columns: 8.5em minmax(0, 1fr) auto 10em auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); font-size: .93rem; }
.factures-espace .n { font-weight: 600; font-size: .85rem; }
.factures-espace .o { display: grid; gap: 2px; min-width: 0; }
.factures-espace .o small { font-size: .8rem; }
.factures-espace .m { font-weight: 600; }
.factures-espace .s { font: 600 .7rem/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .04em; padding: 6px 8px; border-radius: 6px; background: var(--surface-2); color: var(--muted); justify-self: start; }
.factures-espace .ok .s { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.factures-espace .ko .s { color: var(--err); background: color-mix(in srgb, var(--err) 12%, transparent); }
.factures-espace .attente .s { color: var(--accent); background: var(--accent-soft); }
.factures-espace .a { display: flex; gap: 12px; font-weight: 600; }
@media (max-width: 760px) { .factures-espace li { grid-template-columns: minmax(0, 1fr) auto; } .factures-espace .n, .factures-espace .s { grid-column: auto; } .factures-espace .o { grid-column: 1 / -1; order: -1; } }

/* Apporteurs d'affaires */
.recommande { display: grid; gap: 6px; padding: 20px 22px; border-radius: var(--radius); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); }
.recommande strong { font: 700 1.15rem var(--f-titre); letter-spacing: -.01em; }
.btn-google { justify-self: start; }
.ou { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: .85rem; }
.ou::before, .ou::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.lien-email { display: grid; gap: 12px; }
.lien-email .btn { justify-self: start; }
.aside .bloc .btn-google { width: 100%; }
.lien-perso { display: grid; gap: 14px; padding: clamp(20px, 3vw, 28px); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.lien-perso .copie { display: flex; gap: 10px; flex-wrap: wrap; }
.lien-perso .copie input { flex: 1 1 260px; min-width: 0; font-size: 1rem; color: var(--ink); background: var(--bg); border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.lien-perso .partage { display: flex; gap: 10px; flex-wrap: wrap; }
.message-type summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.message-type textarea { display: block; width: 100%; margin: 10px 0 8px; font: inherit; font-size: .93rem; color: var(--ink); background: var(--bg); border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; resize: vertical; }
.chiffres-apporteur { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; font-variant-numeric: tabular-nums; }
.chiffres-apporteur div { display: grid; gap: 4px; align-content: start; padding: 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.chiffres-apporteur span { color: var(--muted); font-size: .86rem; }
.chiffres-apporteur strong { font: 800 1.5rem var(--f-titre); letter-spacing: -.02em; }
.chiffres-apporteur small { font-size: .78rem; }
@media (max-width: 760px) { .chiffres-apporteur { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.factures-espace.recos li { grid-template-columns: 7em minmax(0, 1fr) auto 12em; }
.factures-espace .gris .s { color: var(--muted); }
@media (max-width: 760px) { .factures-espace.recos li { grid-template-columns: minmax(0, 1fr) auto; } }
.engagements b { white-space: nowrap; color: var(--on-navy); }