/* =====================================================================
   Solid'Plugin — site vitrine (V1.14, refonte Bulma 16/10/2026)
   Bulma 1.0.4 local (vendor/bulma) + ce fichier. Aucune ressource externe.
   ===================================================================== */

/* ---------- Polices locales (mêmes que les panels) ---------- */
@font-face { font-family: 'Bricolage'; font-style: normal; font-weight: 700 800; font-display: swap; src: url(../assets/font-01.woff2) format('woff2'); }
@font-face { font-family: 'Instrument'; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/font-02.woff2) format('woff2'); }
@font-face { font-family: 'Instrument'; font-style: normal; font-weight: 600 700; font-display: swap; src: url(../assets/font-03.woff2) format('woff2'); }

/* ---------- Jetons ---------- */
:root {
    --ink: #0e1826;            /* texte principal, fonds sombres */
    --ink-2: #4a5868;          /* texte secondaire : 7.3:1 sur blanc */
    --ink-3: #5b6b7c;          /* texte tertiaire : 5.5:1 sur blanc */
    --line: #e2e8ee;
    --bg: #ffffff;
    --surface: #ffffff;       /* cartes, cadres */
    --surface-2: #f3f5f7;     /* barres de navigateur, boutons neutres */
    --night: #0e1826;         /* fonds sombres fixes (réseau, appel final, téléphone) */
    --hover: rgba(14, 24, 38, .045);
    --line-strong: #cfe2d6;
    --nav-bg: rgba(255, 255, 255, .86);
    --tint: #f4f7f5;
    --brand: #3fa368;          /* vert Solid'AM : décor, icônes, halos */
    --brand-strong: #287b4f;   /* vert texte / boutons : 5.2:1 sur blanc */
    --brand-soft: #e7f4ec;
    --brand-on-dark: #8fd4a8;  /* 10.3:1 sur --ink */
    --on-dark: #e8eef4;
    --on-dark-2: #b8c6d4;      /* 10.2:1 sur --ink */
    --on-dark-3: #9fb0c0;      /* 8:1 sur --ink */
    --radius: 16px;
    --radius-lg: 24px;
    --shadow-sm: 0 1px 2px rgba(14, 24, 38, .06), 0 2px 6px rgba(14, 24, 38, .04);
    --shadow-md: 0 1px 2px rgba(14, 24, 38, .05), 0 12px 32px -12px rgba(14, 24, 38, .18);
    --shadow-lg: 0 2px 4px rgba(14, 24, 38, .05), 0 30px 60px -20px rgba(14, 24, 38, .30);
    --font-display: 'Bricolage', 'Instrument', 'Segoe UI', system-ui, sans-serif;
    --font-text: 'Instrument', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
    --nav-h: 4.25rem;

    /* Bulma 1.x : thème */
    --bulma-primary-h: 148deg;
    --bulma-primary-s: 51%;
    --bulma-primary-l: 32%;
    --bulma-primary-invert-l: 100%;
    --bulma-link-h: 148deg;
    --bulma-link-s: 51%;
    --bulma-link-l: 32%;
    --bulma-family-primary: var(--font-text);
    --bulma-body-color: var(--ink);
    --bulma-strong-color: inherit;
    --bulma-radius: 10px;
    --bulma-navbar-height: var(--nav-h);
    --bulma-navbar-item-img-max-height: 2.25rem;
    color-scheme: light;
}

/* ---------- Base ---------- */
html { scroll-padding-top: calc(var(--nav-h) + 1rem); background: var(--bg); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html, body { overflow-x: clip; }
body { font-family: var(--font-text); color: var(--ink); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
strong { color: inherit; }
img { max-width: 100%; height: auto; }
a { color: var(--brand-strong); }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
main:focus { outline: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 1.25rem; height: 1.25rem; flex: none; display: inline-block; vertical-align: middle; }

.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--night); color: #fff; padding: .7rem 1.1rem; border-radius: 10px; font-weight: 600; transition: top .15s ease; }
.skip-link:focus { top: 1rem; color: #fff; }

.container { max-width: 1180px; }
.container.is-narrow { max-width: 860px; }

/* ---------- Typographie ---------- */
.display { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.5rem, 5.6vw, 4.4rem); line-height: 1.02; letter-spacing: -.035em; color: var(--ink); margin: 0 0 1.25rem; text-wrap: balance; }
.display .hl { color: var(--brand-strong); }
.title-sp { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.1; letter-spacing: -.028em; color: var(--ink); margin: 0 0 1rem; text-wrap: balance; }
.title-sp.is-3 { font-size: clamp(1.55rem, 2.5vw, 2.05rem); }
.title-sp.is-4 { font-size: clamp(1.35rem, 2vw, 1.6rem); }
.title-sp.is-on-dark { color: #fff; }
.kicker { font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-strong); margin: 0 0 .85rem; }
.section-lead { font-size: clamp(1.05rem, 1.4vw, 1.18rem); color: var(--ink-2); line-height: 1.65; max-width: 62ch; margin: 0; text-wrap: pretty; }
.section-lead.is-on-dark { color: var(--on-dark-2); }
.section-head { margin: 0 auto clamp(2.5rem, 5vw, 3.75rem); max-width: 760px; }
.section-head .section-lead { margin-inline: auto; }

/* ---------- Boutons (sur base Bulma) ---------- */
.button { font-weight: 600; border-radius: 12px; gap: .5rem; transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease; }
.button .ic { width: 1.1em; height: 1.1em; transition: transform .15s ease; }
.button:hover .ic { transform: translateX(3px); }
.button.is-primary { box-shadow: 0 10px 24px -12px rgba(40, 123, 79, .75); }
.button.is-primary:hover { transform: translateY(-1px); }
.button.is-medium { font-size: 1.05rem; padding-inline: 1.4em; }
.button.is-ghost-sp { background: var(--surface); border: 1px solid var(--line); color: var(--ink); box-shadow: var(--shadow-sm); }
.button.is-ghost-sp:hover { border-color: #c7d1db; color: var(--ink); }
.button.is-ghost-dark { background: transparent; border: 1px solid rgba(255, 255, 255, .28); color: #fff; }
.button.is-ghost-dark:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .45); color: #fff; }
.button.is-outlined-sp { background: var(--surface); border: 1.5px solid var(--brand-strong); color: var(--brand-strong); }
.button.is-outlined-sp:hover { background: var(--brand-soft); color: var(--brand-strong); }
.button.is-static-sp { background: var(--surface-2); border: 1px solid transparent; color: var(--ink-2); cursor: default; pointer-events: none; box-shadow: none; }

/* ---------- Navigation ---------- */
.site-header .navbar { background: var(--nav-bg); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s ease, box-shadow .2s ease; min-height: var(--nav-h); }
.site-header.is-scrolled .navbar { border-bottom-color: var(--line); box-shadow: 0 6px 20px -16px rgba(14, 24, 38, .35); }
.site-header .navbar > .container { padding-inline: 1.25rem; }
.brand { display: inline-flex; align-items: center; gap: .65rem; font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em; color: var(--ink); }
.brand:hover, .navbar-brand a.navbar-item.brand:hover, .navbar-brand a.navbar-item.brand:focus { color: var(--ink); background: transparent; }
.brand img { width: 36px; height: 36px; border-radius: 9px; max-height: none; }
.navbar-brand .navbar-item.brand { padding-left: 0; }
.navbar-item.nav-link { color: var(--ink-2); font-weight: 600; font-size: .97rem; border-radius: 8px; }
.navbar-item.nav-link:hover, .navbar-item.nav-link:focus-visible { color: var(--ink); background: var(--hover); }
.navbar-burger { color: var(--ink); margin-inline-end: -.35rem; border-radius: 10px; }
.navbar-burger:hover { background: var(--hover); }
@media (min-width: 1024px) {
    .navbar-end { align-items: center; gap: .15rem; }
    .navbar-item.nav-link { padding: .5rem .85rem; }
    .nav-cta { padding-right: 0; margin-left: .75rem; }
}
@media (max-width: 1023px) {
    .navbar-menu { background: var(--surface); box-shadow: 0 18px 32px -18px rgba(14, 24, 38, .35); border-top: 1px solid var(--line); padding: .5rem 1.25rem 1.25rem; margin-inline: -1.25rem; }
    .navbar-item.nav-link { padding: .85rem .25rem; border-bottom: 1px solid var(--line); border-radius: 0; font-size: 1.05rem; }
    .nav-cta { padding: 1rem 0 0; }
    .nav-cta .button { width: 100%; }
}

/* ---------- Sections ---------- */
.sp-section { padding: clamp(4.5rem, 9vw, 7.5rem) 1.25rem; position: relative; }
.sp-section--tint { background: var(--tint); }

/* ---------- Hero ---------- */
.hero-sp { position: relative; padding: clamp(3rem, 7vw, 6rem) 1.25rem clamp(3.5rem, 7vw, 6rem); overflow: hidden; isolation: isolate; }
.hero-sp__bg { position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(55% 60% at 82% 28%, rgba(63, 163, 104, .20), transparent 70%),
        radial-gradient(40% 45% at 8% 0%, rgba(14, 24, 38, .06), transparent 70%),
        linear-gradient(180deg, var(--hero-top, #fbfdfc) 0%, var(--bg) 100%); }
.hero-sp__bg::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(14, 24, 38, .09) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(70% 60% at 70% 30%, #000, transparent 75%); mask-image: radial-gradient(70% 60% at 70% 30%, #000, transparent 75%); }
.hero-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3.5rem; } }
.eyebrow { display: inline-flex; align-items: center; gap: .55rem; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); border-radius: 999px; padding: .35rem .9rem .35rem .7rem; font-size: .88rem; font-weight: 600; color: var(--ink-2); margin: 0 0 1.5rem; }
@media (max-width: 400px) { .eyebrow { font-size: .78rem; } }
.eyebrow__dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px rgba(63, 163, 104, .18); }
.hero-sp .lead { font-size: clamp(1.08rem, 1.5vw, 1.22rem); color: var(--ink-2); line-height: 1.65; max-width: 40ch; margin: 0 0 2rem; text-wrap: pretty; }
.hero-sp__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero-sp__note { margin: 1.5rem 0 0; font-size: .9rem; color: var(--ink-3); }
.hero-sp__visual { position: relative; }
.hero-sp__visual::before { content: ""; position: absolute; inset: 8% -4% -6% 6%; z-index: -1; background: radial-gradient(closest-side, rgba(63, 163, 104, .35), transparent); filter: blur(30px); }
.shot-caption { text-align: center; font-size: .85rem; color: var(--ink-3); margin: 1rem 0 0; }
@media (min-width: 1024px) {
    .browser--hero { transform: perspective(2200px) rotateY(-7deg) rotateX(3deg); transform-origin: left center; transition: transform .5s ease; }
    .hero-sp__visual:hover .browser--hero { transform: perspective(2200px) rotateY(-3deg) rotateX(1deg); }
}
@media (max-width: 1023px) { .hero-sp__copy { text-align: left; } }
@media (max-width: 480px) { .hero-sp__actions .button { width: 100%; } }

/* ---------- Cadre « navigateur » ---------- */
.browser { margin: 0; background: var(--surface); border: 1px solid rgba(14, 24, 38, .09); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; }
.browser__bar { display: flex; align-items: center; gap: .75rem; height: 2.1rem; padding: 0 .8rem; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.browser__dots { display: inline-flex; gap: .4rem; flex: none; }
.browser__dots i { width: .62rem; height: .62rem; border-radius: 50%; background: #f26b61; }
.browser__dots i:nth-child(2) { background: #f5bd4f; }
.browser__dots i:nth-child(3) { background: #5ec26a; }
.browser__url { flex: 1; min-width: 0; max-width: 22rem; margin-inline: auto; transform: translateX(-1.5rem); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; font-size: .72rem; line-height: 1.35rem; color: var(--ink-3); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browser__shot { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #fff; cursor: zoom-in; overflow: hidden; border-radius: 0; }
.browser__shot img { display: block; width: 100%; }
.browser--hero .browser__shot, .browser--main .browser__shot, .gallery .browser__shot { aspect-ratio: 16 / 11; }
.browser--hero .browser__shot img, .browser--main .browser__shot img, .gallery .browser__shot img, .browser--sub .browser__shot img { height: 100%; object-fit: cover; object-position: top center; }
.browser__shot:focus-visible { outline-offset: -4px; }
.zoom-hint { position: absolute; right: .75rem; bottom: .75rem; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: rgba(14, 24, 38, .78); color: #fff; opacity: 0; transform: translateY(4px); transition: opacity .2s ease, transform .2s ease; }
.zoom-hint .ic { width: 1.15rem; height: 1.15rem; }
.browser__shot:hover .zoom-hint, .browser__shot:focus-visible .zoom-hint { opacity: 1; transform: none; }
@media (hover: none) { .zoom-hint { opacity: .9; transform: none; width: 2rem; height: 2rem; } }

/* ---------- Bandeau de réassurance ---------- */
.trust { background: var(--tint); border-block: 1px solid var(--line); padding: 1.4rem 1.25rem; }
.trust__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.trust__list li { display: flex; align-items: center; gap: .7rem; font-weight: 600; font-size: .97rem; color: var(--ink); line-height: 1.35; }
.trust__list .ic { width: 1.5rem; height: 1.5rem; color: var(--brand-strong); }
@media (min-width: 900px) { .trust__list { grid-template-columns: repeat(4, auto); justify-content: space-between; } }
@media (max-width: 420px) { .trust__list { grid-template-columns: 1fr; } }

/* ---------- Parcours ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; position: relative; counter-reset: none; }
.step { position: relative; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: 1rem; align-items: start; }
.step__icon { grid-row: span 2; width: 3.5rem; height: 3.5rem; border-radius: 16px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--brand-strong); box-shadow: var(--shadow-md); position: relative; z-index: 1; }
.step__icon .ic { width: 1.6rem; height: 1.6rem; }
.step__num { position: absolute; z-index: 2; left: 2.55rem; top: -.45rem; min-width: 1.45rem; height: 1.45rem; padding: 0 .3rem; border-radius: 999px; background: var(--brand-strong); color: #fff; font-family: var(--font-display); font-size: .78rem; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--bg); }
.step__title { font-weight: 700; font-size: 1.1rem; color: var(--ink); margin: .2rem 0 .15rem; }
.step__text { color: var(--ink-2); font-size: .97rem; margin: 0; }
/* fil vertical (mobile) */
.steps::before { content: ""; position: absolute; left: 1.75rem; top: 1.75rem; bottom: 1.75rem; width: 2px; background: linear-gradient(var(--brand-soft), #cfe7d9, var(--brand-soft)); }
@media (min-width: 900px) {
    .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; }
    .steps::before { left: 10%; right: 10%; top: 1.75rem; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, transparent, #bfe0cc 12%, #bfe0cc 88%, transparent); }
    .step { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .step__icon { grid-row: auto; margin-bottom: .85rem; }
    .step__num { left: calc(50% + 1.05rem); }
    .step__text { max-width: 22ch; }
}

/* ---------- Fonctionnalités : blocs alternés ---------- */
.features { display: grid; gap: clamp(4rem, 9vw, 7rem); }
.feature { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) {
    .feature { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4.5rem; }
    .feature--rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
    .feature--rev .feature__copy { order: 2; }
}
.feature__text { color: var(--ink-2); font-size: 1.07rem; margin: 0 0 1.5rem; max-width: 52ch; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.checklist li { display: flex; gap: .7rem; align-items: flex-start; color: var(--ink); font-size: 1rem; line-height: 1.5; }
.checklist .ic { width: 1.4rem; height: 1.4rem; padding: .22rem; border-radius: 50%; background: var(--brand-soft); color: var(--brand-strong); margin-top: .05rem; stroke-width: 2.4; }

/* Composition à deux captures */
.duo { position: relative; }
.duo .browser--sub { display: none; }
@media (min-width: 640px) {
    .duo { padding-bottom: 3rem; }
    .duo .browser--main { width: 88%; }
    .duo .browser--sub { display: block; position: absolute; right: 0; bottom: 0; width: 46%; box-shadow: 0 30px 60px -18px rgba(14, 24, 38, .38); }
    .duo .browser--sub .browser__shot { aspect-ratio: 4 / 3; }
    .duo--portrait .browser--sub { width: 32%; bottom: -1rem; }
    .duo--portrait .browser--sub .browser__shot { aspect-ratio: 3 / 4; }
    .feature--rev .duo .browser--main { margin-left: auto; }
    .feature--rev .duo .browser--sub { right: auto; left: 0; }
}

/* Galerie d'e-mails */
.mail-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 640px) { .mail-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mail-tile { display: flex; flex-direction: column; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; cursor: zoom-in; box-shadow: var(--shadow-md); text-align: left; font: inherit; color: inherit; transition: transform .2s ease, box-shadow .2s ease; }
.mail-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.mail-tile__img { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.mail-tile__img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.mail-tile__cap { padding: .6rem .75rem; font-size: .85rem; font-weight: 600; color: var(--ink); line-height: 1.3; }

/* Grille « tout le reste » + partenaires */
.more { margin-top: clamp(4.5rem, 9vw, 7rem); }
.more__title { margin-bottom: 2rem; }
.ftile-grid, .part-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .ftile-grid, .part-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ftile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .part-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ftile { display: flex; flex-direction: column; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-sm); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.ftile:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.ftile__icon { width: 2.6rem; height: 2.6rem; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-strong); margin-bottom: 1rem; }
.ftile__icon .ic { width: 1.35rem; height: 1.35rem; }
.ftile__title { font-weight: 700; font-size: 1.06rem; color: var(--ink); margin: 0 0 .35rem; line-height: 1.35; }
.ftile__text { color: var(--ink-2); font-size: .97rem; margin: 0; }
.link-zoom { display: inline-flex; align-items: center; gap: .4rem; margin-top: .9rem; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; font-size: .93rem; color: var(--brand-strong); cursor: pointer; text-decoration: underline; text-decoration-color: rgba(40, 123, 79, .35); text-underline-offset: 3px; }
.link-zoom:hover { color: var(--ink); text-decoration-color: currentColor; }
.link-zoom .ic { width: 1.05rem; height: 1.05rem; }

/* ---------- Carte bénéficiaire ---------- */
.triptych { display: grid; gap: 2.75rem; justify-items: center; align-items: end; }
@media (min-width: 900px) { .triptych { grid-template-columns: 1fr auto 1fr; gap: 2.5rem; } .triptych__item--center { transform: translateY(-1.25rem); } }
.triptych__item { margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; }
.triptych__item figcaption { margin-top: 1.1rem; display: grid; gap: .15rem; }
.triptych__item figcaption strong { font-weight: 700; color: var(--ink); }
.triptych__item figcaption span { font-size: .93rem; color: var(--ink-2); }
.device { display: block; padding: 0; border: 0; cursor: zoom-in; font: inherit; }
.device img { display: block; width: 100%; }
.device--screen { width: 100%; max-width: 340px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: .75rem; box-shadow: var(--shadow-lg); }
.device--screen img { border-radius: 12px; }
.device--phone { width: 100%; max-width: 240px; background: var(--night); border-radius: 2.4rem; padding: .55rem; box-shadow: 0 0 0 1px #2a3a4e inset, var(--shadow-lg), 0 40px 70px -30px rgba(14, 24, 38, .45); }
.device--phone img { border-radius: 1.95rem; }
.device:hover { transform: translateY(-3px); transition: transform .25s ease; }

/* ---------- Galerie back-office ---------- */
.gallery__tabs { display: flex; gap: .25rem; width: max-content; max-width: 100%; margin: 0 auto 2rem; padding: .3rem; background: var(--hover); border-radius: 999px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.gallery__tabs::-webkit-scrollbar { display: none; }
.gallery__tab { flex: none; scroll-snap-align: center; padding: .55rem 1.05rem; border: 0; border-radius: 999px; background: transparent; font: inherit; font-weight: 600; font-size: .95rem; color: var(--ink-2); cursor: pointer; white-space: nowrap; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; }
.gallery__tab:hover { color: var(--ink); }
.gallery__tab[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.gallery__tab:focus-visible { outline-offset: -2px; }
.gallery__panel { max-width: 1040px; margin: 0 auto; }
.gallery__panel[hidden] { display: none; }
.gallery__panel:focus-visible { outline-offset: 6px; border-radius: 16px; }
.gallery__caption { text-align: center; color: var(--ink-2); margin: 1.25rem auto 0; max-width: 60ch; }
.gallery__caption strong { color: var(--ink); }
@media (scripting: none) { .gallery__tabs { display: none; } .gallery__panel[hidden] { display: block; } .gallery__panel + .gallery__panel { margin-top: 3rem; } }

/* ---------- Réseau (fond sombre) ---------- */
.sp-dark { background: var(--night); color: var(--on-dark); overflow: clip; isolation: isolate; }
.sp-dark__glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 60% at 15% 10%, rgba(63, 163, 104, .22), transparent 70%), radial-gradient(40% 50% at 95% 90%, rgba(63, 163, 104, .12), transparent 70%); }
.sp-dark a:not(.button) { color: var(--brand-on-dark); }
.split { display: grid; gap: 3rem; }
@media (min-width: 1024px) {
    .split--net { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: start; }
    .split--sec { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 4rem; align-items: start; }
    .split__head, .sticky-head { position: sticky; top: calc(var(--nav-h) + 2rem); }
}
.split__head .section-lead { margin-bottom: 2rem; }
.pill { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid rgba(143, 212, 168, .35); background: rgba(63, 163, 104, .14); color: var(--brand-on-dark); border-radius: 999px; padding: .35rem .85rem .35rem .65rem; font-size: .86rem; font-weight: 600; margin: 0 0 1.4rem; }
.pill .ic { width: 1.1rem; height: 1.1rem; }
.fine-print { font-size: .88rem; color: var(--on-dark-3); margin: 1.5rem 0 0; max-width: 46ch; }
.net-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 640px) { .net-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.net-item { background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .09); border-radius: var(--radius); padding: 1.5rem; }
.net-item__icon { width: 2.6rem; height: 2.6rem; border-radius: 12px; display: grid; place-items: center; background: rgba(63, 163, 104, .16); color: var(--brand-on-dark); margin-bottom: 1rem; }
.net-item__icon .ic { width: 1.35rem; height: 1.35rem; }
.net-item__title { font-weight: 700; font-size: 1.06rem; color: #fff; margin: 0 0 .4rem; line-height: 1.35; }
.net-item p { color: var(--on-dark-2); font-size: .97rem; margin: 0; }

/* ---------- Sécurité ---------- */
.sec-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
@media (min-width: 640px) { .sec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; } }
.sec-item { display: flex; gap: 1rem; align-items: flex-start; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.sec-item__icon { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-strong); }
.sec-item__icon .ic { width: 1.35rem; height: 1.35rem; }
.sec-item__title { font-weight: 700; font-size: 1.06rem; color: var(--ink); margin: .1rem 0 .3rem; line-height: 1.35; }
.sec-item p { color: var(--ink-2); font-size: .97rem; margin: 0; }

/* ---------- Tarifs ---------- */
.price-grid { display: grid; gap: 1.25rem; align-items: stretch; }
@media (min-width: 900px) { .price-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
.price { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2rem 1.75rem 1.75rem; box-shadow: var(--shadow-sm); }
.price--featured { border: 2px solid var(--brand-strong); box-shadow: 0 30px 60px -30px rgba(40, 123, 79, .45); }
.price__icon { width: 2.8rem; height: 2.8rem; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-strong); margin-bottom: 1.25rem; }
.price__icon .ic { width: 1.45rem; height: 1.45rem; }
.price__name { font-weight: 700; font-size: 1.1rem; color: var(--ink); margin: 0 0 .25rem; }
.price__value { font-family: var(--font-display); font-weight: 800; font-size: 2.1rem; letter-spacing: -.03em; color: var(--ink); line-height: 1.15; margin: 0 0 .75rem; }
.price__value--soon { color: var(--ink-2); }
.price__desc { color: var(--ink-2); margin: 0 0 1.4rem; }
.price .checklist { margin-bottom: 1.75rem; }
.price .button { margin-top: auto; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: .75rem; }
.faq__item { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); transition: border-color .2s ease, box-shadow .2s ease; }
.faq__item[open] { border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.faq__item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.35rem; cursor: pointer; font-weight: 700; font-size: 1.05rem; color: var(--ink); border-radius: 14px; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--brand-strong); }
.faq__chev { width: 1.25rem; height: 1.25rem; color: var(--ink-3); transition: transform .2s ease; }
.faq__item[open] .faq__chev { transform: rotate(180deg); color: var(--brand-strong); }
.faq__body { padding: 0 1.35rem 1.25rem; }
.faq__body p { margin: 0; color: var(--ink-2); max-width: 68ch; }
.faq__body a { color: var(--brand-strong); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- À propos ---------- */
.about { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 769px) { .about { grid-template-columns: 220px minmax(0, 1fr); gap: 3.5rem; } }
.about__logo { width: 100%; max-width: 220px; height: auto; }
@media (max-width: 768px) { .about__logo { max-width: 140px; } }
.about__text p:not(.kicker) { color: var(--ink-2); font-size: 1.07rem; margin: 0 0 1rem; max-width: 60ch; }

/* ---------- Appel final ---------- */
.cta-final { padding: 0 1.25rem clamp(4.5rem, 9vw, 7rem); }
.cta-final__box { position: relative; overflow: hidden; isolation: isolate; text-align: center; border-radius: 28px; padding: clamp(2.75rem, 7vw, 5rem) clamp(1.5rem, 5vw, 4rem); background: radial-gradient(60% 90% at 50% 0%, rgba(63, 163, 104, .35), transparent 70%), var(--night); box-shadow: var(--shadow-lg); }
.cta-final__box::after { content: ""; position: absolute; z-index: -1; right: -40px; bottom: -50px; width: 340px; height: 214px; background: url(../assets/img-03.png) no-repeat center / contain; opacity: .07; filter: grayscale(1) brightness(3); }
.cta-final__box .section-lead { margin: 0 auto 2rem; }
.cta-final__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
@media (max-width: 480px) { .cta-final__actions .button { width: 100%; } }

/* ---------- Pied de page ---------- */
.site-footer { background: #0a121d; color: var(--on-dark-3); padding: 3.5rem 1.25rem 2rem; }
.site-footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.brand--footer { color: #fff; }
.brand--footer:hover { color: #fff; }
.brand--footer img { width: 32px; height: 32px; }
.site-footer__brand p { margin: .75rem 0 0; font-size: .95rem; }
.site-footer__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; max-width: 560px; }
.site-footer__nav a { color: #c9d4de; font-size: .95rem; }
.site-footer__nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.site-footer__copy { margin: 1.5rem 0 0; font-size: .88rem; }

/* ---------- Agrandissement (<dialog>) ---------- */
.lightbox { padding: 0; border: 0; background: transparent; max-width: min(1240px, 94vw); max-height: 94vh; overflow: visible; }
.lightbox::backdrop { background: rgba(6, 12, 20, .84); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.lightbox__inner { position: relative; }
.lightbox__img { display: block; max-width: 100%; max-height: 84vh; width: auto; height: auto; margin: 0 auto; border-radius: 12px; background: #fff; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6); }
.lightbox__cap { color: var(--on-dark); text-align: center; font-size: .92rem; margin: .85rem auto 0; max-width: 70ch; }
.lightbox__close { position: absolute; top: .6rem; right: .6rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); background: rgba(14, 24, 38, .82); color: #fff; display: grid; place-items: center; cursor: pointer; }
.lightbox__close:hover { background: var(--night); }
.lightbox__close .ic { width: 1.25rem; height: 1.25rem; }
.lightbox[open] { animation: lb-in .2s ease; }
@keyframes lb-in { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }


/* =====================================================================
   V1.14 — 16/10 : accroche écosystème, paramétrage, écosystème, thème
   ===================================================================== */
.tagline { display: flex; align-items: center; gap: .85rem; margin: 2rem 0 0; font-weight: 600; font-size: 1.02rem; color: var(--ink); max-width: 44ch; line-height: 1.45; }
.tagline__bar { flex: none; width: 2.25rem; height: 3px; border-radius: 3px; background: var(--brand); }

/* Bouton de thème */
.theme-toggle { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink-2); cursor: pointer; transition: color .15s ease, border-color .15s ease, background-color .15s ease; }
.theme-toggle:hover { color: var(--ink); border-color: var(--line-strong); }
.theme-toggle .ic { width: 1.15rem; height: 1.15rem; }
.theme-toggle .ic--sun { display: none; }
[data-theme="dark"] .theme-toggle .ic--sun { display: inline-block; }
[data-theme="dark"] .theme-toggle .ic--moon { display: none; }
.navbar-brand .theme-toggle { margin: auto .5rem auto auto; align-self: center; }
.navbar-brand .theme-toggle + .navbar-burger { margin-left: 0; }

/* Capture seule */
.browser--single .browser__shot { aspect-ratio: auto; }

/* Paramétrage : profils */
.profiles { display: grid; gap: 1.25rem; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
@media (min-width: 769px) { .profiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } }
.profile { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2rem 1.9rem; box-shadow: var(--shadow-md); overflow: hidden; }
.profile::after { content: ""; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(closest-side, rgba(63, 163, 104, .16), transparent); pointer-events: none; }
.profile__icon { width: 3rem; height: 3rem; border-radius: 14px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-strong); margin-bottom: 1.1rem; }
.profile__icon .ic { width: 1.55rem; height: 1.55rem; }
.profile__tag { font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 .2rem; }
.profile__title { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; letter-spacing: -.02em; color: var(--ink); margin: 0 0 .6rem; }
.profile__text { color: var(--ink-2); margin: 0; max-width: 52ch; }
.param { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .param { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; } }

/* Écosystème */
.eco-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .eco-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .eco-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.eco { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.5rem; box-shadow: var(--shadow-sm); }
.eco::before { content: ""; position: absolute; left: 1.5rem; right: 1.5rem; top: -1px; height: 3px; border-radius: 0 0 3px 3px; background: var(--brand); opacity: .85; }
.eco__icon { width: 2.8rem; height: 2.8rem; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-strong); margin-bottom: 1rem; }
.eco__icon .ic { width: 1.45rem; height: 1.45rem; }
.eco__title { font-weight: 700; font-size: 1.1rem; color: var(--ink); margin: 0 0 .4rem; line-height: 1.35; }
.eco__text { color: var(--ink-2); font-size: .97rem; margin: 0; }
.tag-sp { display: inline-block; vertical-align: middle; margin-left: .3rem; padding: .1rem .5rem; border-radius: 999px; background: var(--brand-soft); color: var(--brand-strong); font-size: .72rem; font-weight: 600; letter-spacing: .02em; }
.part-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .part-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }

/* ---------- Mode sombre ---------- */
[data-theme="dark"] {
    --ink: #e8eef4;
    --ink-2: #b4c2d0;          /* 9.6:1 sur --bg */
    --ink-3: #93a4b5;          /* 6.9:1 sur --bg */
    --line: #233243;
    --line-strong: #2f5a42;
    --bg: #0b131d;
    --surface: #121d2a;
    --surface-2: #192635;
    --tint: #0f1924;
    --hover: rgba(255, 255, 255, .06);
    --nav-bg: rgba(11, 19, 29, .82);
    --hero-top: #0d1a20;
    --brand-strong: #6cc795;   /* 8.6:1 sur --bg */
    --brand-soft: rgba(63, 163, 104, .16);
    --night: #070d14;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -12px rgba(0, 0, 0, .6);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, .3), 0 30px 60px -20px rgba(0, 0, 0, .75);
    --bulma-primary-l: 36%;
    --bulma-link-l: 60%;
    --bulma-body-color: var(--ink);
    color-scheme: dark;
}
[data-theme="dark"] body { background: var(--bg); color: var(--ink); }
[data-theme="dark"] a:hover { color: #fff; }
[data-theme="dark"] .hero-sp__bg::after { background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px); }
[data-theme="dark"] .browser { border-color: var(--line); }
[data-theme="dark"] .browser__shot { background: var(--surface); }
[data-theme="dark"] .steps::before { background: linear-gradient(90deg, transparent, #24543a 12%, #24543a 88%, transparent); }
@media (max-width: 899px) { [data-theme="dark"] .steps::before { background: #24543a; } }
[data-theme="dark"] .button.is-primary { color: #fff; }
[data-theme="dark"] .button.is-outlined-sp { border-color: var(--brand-strong); }
[data-theme="dark"] .button.is-ghost-sp:hover { border-color: var(--line-strong); }
[data-theme="dark"] .sp-dark { border-block: 1px solid var(--line); }
[data-theme="dark"] .cta-final__box { border: 1px solid var(--line); }
[data-theme="dark"] .site-footer { background: #060b11; }
[data-theme="dark"] .lightbox__img { background: var(--surface); }
[data-theme="dark"] .about__logo { filter: brightness(1.05); }
[data-theme="dark"] .navbar-burger { color: var(--ink); }

/* ---------- Page Contact (16/10) ---------- */
:root {
    --warn-bg: #fdf3dc;  --warn-line: #f0d48f;  --warn-fg: #6b4708;   /* 8.4:1 */
    --error-bg: #fde9e6; --error-line: #f1b3aa; --error-fg: #8f2316;  /* 8.1:1 */
}
[data-theme="dark"] {
    --warn-bg: rgba(217, 164, 65, .14);  --warn-line: rgba(217, 164, 65, .38); --warn-fg: #f0c674;
    --error-bg: rgba(229, 96, 80, .16);  --error-line: rgba(229, 96, 80, .42); --error-fg: #f6aca2;
}
.navbar-item.nav-link.is-current { color: var(--brand-strong); }
.contact-page { padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.contact-page .section-head { margin-bottom: 2rem; }
.contact-page h1.title-sp { margin-bottom: .75rem; }
.contact-notice, .contact-noscript { display: flex; gap: .85rem; align-items: flex-start; background: var(--warn-bg); color: var(--warn-fg); border: 1px solid var(--warn-line); border-radius: var(--radius); padding: 1rem 1.2rem; margin: 0 0 1.5rem; }
.contact-notice .ic { width: 1.4rem; height: 1.4rem; margin-top: .1rem; }
.contact-notice p, .contact-noscript p { margin: 0; color: inherit; }
.contact-noscript a { color: inherit; text-decoration: underline; }
.contact-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: clamp(1.25rem, 4vw, 2.5rem); }
.contact-required { font-size: .9rem; color: var(--ink-3); margin: 0 0 1.25rem; }
.contact-form .field:not(:last-child) { margin-bottom: 1.15rem; }
.contact-form .label { color: var(--ink); font-weight: 600; font-size: .97rem; margin-bottom: .4rem; }
.contact-opt { font-weight: 400; color: var(--ink-3); font-size: .9em; }
.contact-form .input, .contact-form .textarea, .contact-form .select select {
    background: var(--surface); color: var(--ink); border: 1px solid #c3ccd6; border-radius: 10px; box-shadow: none; font-size: 1rem;
}
[data-theme="dark"] .contact-form .input, [data-theme="dark"] .contact-form .textarea, [data-theme="dark"] .contact-form .select select { background: var(--surface-2); border-color: #34475b; }
.contact-form .select:not(.is-multiple):not(.is-loading)::after { border-color: var(--ink-2); }
.contact-form .input::placeholder, .contact-form .textarea::placeholder { color: var(--ink-3); }
.contact-form .input:hover, .contact-form .textarea:hover, .contact-form .select select:hover { border-color: var(--ink-3); }
.contact-form .input:focus-visible, .contact-form .textarea:focus-visible, .contact-form .select select:focus-visible,
.contact-form .input:focus, .contact-form .textarea:focus, .contact-form .select select:focus {
    border-color: var(--brand-strong); outline: 3px solid var(--brand); outline-offset: 1px; box-shadow: none;
}
.contact-form [aria-invalid="true"] { border-color: var(--error-fg) !important; }
.contact-form .select optgroup { font-weight: 700; color: var(--ink); background: var(--surface); }
.contact-form .select option { color: var(--ink); background: var(--surface); font-weight: 400; }
.contact-form .textarea { min-height: 11rem; resize: vertical; line-height: 1.55; }
.contact-form .help { color: var(--ink-3); font-size: .87rem; margin-top: .4rem; }
.contact-help-security { color: var(--warn-fg) !important; }
.contact-grid { display: grid; gap: 0 1.25rem; }
.contact-grid > .field { margin-bottom: 1.15rem; }
@media (min-width: 700px) { .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Champ piège (robots) : hors écran, ignoré des lecteurs d'écran (aria-hidden) et du clavier (tabindex -1). */
.contact-hp { position: absolute !important; left: -10000px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }
.contact-privacy { background: var(--tint); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.15rem; margin: .5rem 0 1rem; font-size: .93rem; color: var(--ink-2); }
.contact-privacy p { margin: 0; }
.contact-privacy p + p { margin-top: .4rem; }
.contact-privacy__title { display: flex; align-items: center; gap: .5rem; color: var(--ink); }
.contact-privacy__title .ic { width: 1.1rem; height: 1.1rem; color: var(--brand-strong); }
.contact-consent { display: flex; gap: .65rem; align-items: flex-start; color: var(--ink); line-height: 1.5; cursor: pointer; }
.contact-consent:hover { color: var(--ink); }
.contact-consent input { width: 1.15rem; height: 1.15rem; margin-top: .2rem; flex: none; accent-color: var(--brand-strong); }
.contact-altcha { display: flex; align-items: center; gap: .6rem; font-size: .92rem; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: .7rem .95rem; margin: 1.25rem 0 1rem; }
.contact-altcha .ic { width: 1.2rem; height: 1.2rem; color: var(--ink-3); }
.contact-altcha[data-state="pending"] .ic { color: var(--brand); }
@media (prefers-reduced-motion: no-preference) { .contact-altcha[data-state="pending"] .ic { animation: contact-pulse 1.2s ease-in-out infinite; } }
@keyframes contact-pulse { 50% { opacity: .35; } }
.contact-altcha[data-state="ok"] { color: var(--brand-strong); border-color: var(--line-strong); background: var(--brand-soft); }
.contact-altcha[data-state="ok"] .ic { color: var(--brand-strong); }
.contact-altcha[data-state="error"] { color: var(--warn-fg); border-color: var(--warn-line); background: var(--warn-bg); }
.contact-altcha[data-state="error"] .ic { color: var(--warn-fg); }
.contact-alert { background: var(--error-bg); color: var(--error-fg); border: 1px solid var(--error-line); border-radius: 12px; padding: .8rem 1rem; margin: 0 0 1rem; font-weight: 600; }
.contact-alert[hidden] { display: none; }
.contact-actions { display: flex; justify-content: flex-end; }
@media (max-width: 480px) { .contact-actions .button { width: 100%; } }
.contact-success { text-align: center; padding: 1.5rem .5rem; }
.contact-success[hidden] { display: none; }
.contact-success:focus { outline: none; }
.contact-success__icon { width: 3.2rem; height: 3.2rem; padding: .6rem; border-radius: 50%; background: var(--brand-soft); color: var(--brand-strong); margin-bottom: 1rem; }
.contact-success .title-sp { margin-bottom: .5rem; }
.contact-success p { color: var(--ink-2); margin: 0 0 .75rem; }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .browser--hero, .hero-sp__visual:hover .browser--hero { transform: none !important; }
    .ftile:hover, .mail-tile:hover, .device:hover, .button.is-primary:hover, .button:hover .ic { transform: none; }
}

/* ---------- Impression ---------- */
@media print {
    .site-header, .skip-link, .zoom-hint, .lightbox, .cta-final__actions, .gallery__tabs { display: none !important; }
    html.has-navbar-fixed-top { padding-top: 0; }
    .gallery__panel[hidden] { display: block; }
    .sp-dark, .cta-final__box { background: #fff !important; color: #000; }
}