/* Site SB2 — charte des plaquettes PCard Solutions (présentation générale 2026-10).
   Un seul accent bleu SB2, aplat bleu nuit, titres en Light, filets fins.
   Police : Nunito Sans (licence OFL, fonts/OFL.txt), proche de l'Avenir Next des plaquettes, qui n'a pas de licence web.
   Fichiers hébergés avec le site : aucune requête vers Google Fonts (TKT-2026-9BE28BB4). */

@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/nunito-sans-latin-300-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/nunito-sans-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/nunito-sans-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/nunito-sans-latin-ext-300-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/nunito-sans-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/nunito-sans-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
    --navy: #1b2538;
    --ink: #36435a;
    --mute: #7d889a;
    --rule: #d5dbe3;
    --tint: #f1f6fa;
    --blue: #29a8e0;
    --blue-d: #1496d2;
    --soft: #c4ccd8;
    --ok: #1f8a5b;
    --err: #c0392b;
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body { font-family: "Nunito Sans", "Segoe UI", Arial, sans-serif; color: var(--ink); background: #fff; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
p a, td a, .sub a, .prose a, .notice a, .coords a { color: var(--blue-d); }
img { max-width: 100%; height: auto; }
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 32px; }
.wrap.narrow { max-width: 820px; }
.mute { color: var(--mute); }

/* Typographie */
.eyebrow { font-size: 11.5px; letter-spacing: 2.6px; text-transform: uppercase; color: var(--blue-d); }
.tick { width: 28px; height: 3px; background: var(--blue); margin-bottom: 18px; }
h1 { font-weight: 300; font-size: 50px; line-height: 1.14; color: var(--navy); letter-spacing: -.5px; margin-top: 14px; }
h1 b, h2 b { font-weight: 700; }
h2 { font-weight: 300; font-size: 36px; color: var(--navy); line-height: 1.2; letter-spacing: -.3px; }
h3 { color: var(--navy); font-size: 18px; font-weight: 700; line-height: 1.3; }
h3.big { font-weight: 300; font-size: 26px; }
.lead { font-size: 18px; max-width: 660px; margin-top: 22px; }
.intro { max-width: 660px; margin-top: 12px; }

/* Boutons */
.btn { display: inline-block; padding: 11px 22px; border-radius: 2px; font-size: 14.5px; font-weight: 700; border: 1px solid transparent; cursor: pointer; font-family: inherit; line-height: 1.4; }
.btn-blue { background: var(--blue); color: #fff; }
.btn-blue:hover { background: var(--blue-d); }
.btn-ghost { border-color: var(--rule); color: var(--navy); background: #fff; }
.btn-ghost:hover { border-color: var(--blue); }
.link { color: var(--blue-d); font-size: 14.5px; font-weight: 700; white-space: nowrap; }
.link::after { content: "  →"; }
.actions { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.ico { width: 24px; height: 24px; stroke: var(--blue); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* En-tête */
header.top { border-bottom: .75px solid var(--rule); background: #fff; position: sticky; top: 0; z-index: 10; transition: box-shadow .25s; }
header.top.scrolled { box-shadow: 0 6px 24px rgba(27, 37, 56, .08); }
header.top .wrap { display: flex; align-items: center; height: 76px; gap: 44px; }
header.top .logo img { height: 26px; width: auto; display: block; }
header.top nav { display: flex; align-items: center; gap: 32px; flex: 1; font-size: 15px; }
header.top nav .btn { margin-left: auto; }
header.top nav a:not(.btn):hover { color: var(--blue-d); }
header.top nav a.on { color: var(--navy); box-shadow: inset 0 -2px 0 var(--blue); padding-bottom: 4px; }
.menu-toggle, .menu-button { display: none; }

/* Héros de l'accueil */
.hero { padding: 96px 0 100px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(220px, 1fr); gap: 56px; align-items: end; }
.hero h1 { font-size: 54px; margin-top: 18px; }
.facts { border-left: .75px solid var(--rule); padding-left: 36px; display: grid; gap: 24px; }
.facts strong { display: block; font-weight: 300; font-size: 40px; color: var(--navy); line-height: 1; }
.facts span { font-size: 13.5px; color: var(--mute); }

/* Bandeau de page intérieure */
.pagehead { padding: 72px 0 64px; border-bottom: .75px solid var(--rule); }
.pagehead.flush { border-bottom: 0; padding-bottom: 0; }
.pagehead.tall { padding: 120px 0; border: 0; }
.crumb { font-size: 13px; color: var(--mute); margin-bottom: 22px; }
.crumb a { color: var(--blue-d); }
.grid2.bottom { align-items: end; }
.grid2.bottom .lead { margin: 0; }

/* Sections */
section.s { padding: 88px 0; }
section.s.slim { padding: 56px 0; }
.tint { background: var(--tint); }
.dark { background: var(--navy); color: var(--soft); }
.dark h2, .dark h3 { color: #fff; }
.head { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 40px; }
.head p { max-width: 560px; margin-top: 12px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
/* Cartes « L'essentiel » des pages produit, quel que soit leur nombre */
h2 + .grid2, h2 + .grid3, h2 + .grid4 { margin-top: 32px; }
h2 + .grid2 { gap: 22px; }
.spaced { margin-top: 36px; }

/* Piliers (« Ce que nous faisons ») */

/* Cartes à filet bleu */
.card { border-top: 3px solid var(--blue); background: #fff; padding: 24px 22px 26px; }
.card.t { background: var(--tint); }
.card h3 { margin-top: 12px; }
.card .sub { font-size: 14px; color: var(--mute); margin-top: 2px; }
.card .list { list-style: none; padding: 12px 0 0; margin-top: 14px; border-top: .75px solid var(--rule); font-size: 14.5px; }
.card .list li { padding: 5px 0; }
.card .list li a { color: var(--navy); }
.card .list li a:hover { color: var(--blue-d); }
.card .list li small { display: block; color: var(--mute); font-size: 12.5px; line-height: 1.4; }
.card.navy { background: var(--navy); color: var(--soft); }
.card.navy h3 { color: #fff; }
.card.navy .sub { color: var(--soft); }
.card.navy img { height: 22px; width: auto; }

.bar { margin-top: 16px; padding: 15px 22px; font-size: 14.5px; display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; }
.bar b { color: var(--navy); }
.bar span, .bar > a { color: var(--blue-d); }
.bar.light { background: #fff; border-left: 3px solid var(--blue); }
.tint .bar.light { background: #fff; }
a.bar:hover { box-shadow: 0 4px 16px rgba(27, 37, 56, .12); }
a.bar::after { content: "→"; margin-left: auto; color: var(--blue); transition: transform .15s; }
a.bar:hover::after { transform: translateX(3px); }

/* Chaîne de paiement */
.chain { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; margin-top: 40px; }
.chain li { position: relative; }
.chain li:not(:last-child)::after { content: "→"; position: absolute; right: -17px; top: 26px; color: var(--blue); }

/* Chiffres */
.nums { display: grid; grid-template-columns: repeat(4, 1fr); }
.nums div { padding-right: 24px; }
.nums strong { display: block; font-weight: 300; font-size: 42px; color: var(--navy); line-height: 1.05; }
.nums span { font-size: 13.5px; color: var(--mute); }
.dark .nums strong { color: #fff; }
.dark .nums span { color: var(--soft); }

/* Logos clients */
.logos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; align-items: center; }
.logos div { background: #fff; height: 84px; display: flex; align-items: center; justify-content: center; padding: 14px; }
.logos img { max-height: 50px; width: auto; filter: grayscale(1); opacity: .72; transition: filter .2s, opacity .2s; }
.logos div:hover img { filter: none; opacity: 1; }

/* Avis */
.quotes { gap: 22px; }
.quote { background: var(--tint); border-left: 3px solid var(--blue); padding: 26px 28px; }
.quote blockquote { font-weight: 300; font-size: 19px; color: var(--navy); line-height: 1.45; }
.quote figcaption { display: flex; gap: 14px; align-items: center; margin-top: 16px; font-size: 13.5px; color: var(--mute); }
.quote figcaption img { height: 34px; width: auto; filter: grayscale(1); }
.quote figcaption b { color: var(--navy); display: block; }

/* Repères */
.timeline { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 36px; border-top: 3px solid var(--blue); }
.timeline li { padding: 18px 24px 0 0; }
.timeline strong { font-weight: 300; font-size: 34px; color: var(--navy); }

/* Tableau */
.table-scroll { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.t th { text-align: left; font-size: 11.5px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--mute); font-weight: 400; padding: 0 16px 10px 0; border-bottom: .75px solid var(--rule); }
table.t td { padding: 14px 16px 14px 0; border-bottom: .75px solid var(--rule); vertical-align: top; }
table.t td:first-child { color: var(--navy); font-weight: 700; }

/* Formulaires */
.form { background: #fff; border-top: 3px solid var(--blue); box-shadow: 0 14px 40px rgba(27, 37, 56, .10); padding: 34px 36px 30px; display: grid; gap: 18px; align-content: start; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form label { font-size: 13.5px; font-weight: 700; color: var(--navy); display: block; margin-bottom: 6px; }
.form fieldset { border: 0; padding: 0; min-width: 0; }
.form input:not([type=checkbox]):not([type=radio]), .form select, .form textarea {
    width: 100%; background: #f7fafc; border: 1px solid var(--rule); border-radius: 4px; padding: 12px 14px;
    font: inherit; font-size: 15px; color: var(--navy); transition: border-color .15s, box-shadow .15s, background .15s;
}
.form ::placeholder { color: #a7b0bd; }
.form input:hover, .form textarea:hover { border-color: var(--soft); }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; background: #fff; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(41, 168, 224, .18); }
.form textarea { resize: vertical; min-height: 140px; }
.form .input-validation-error { border-color: var(--err); }
.req { color: var(--blue-d); }
/* Étapes numérotées du formulaire */
.fstep { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--navy); padding: 0; margin: 8px 0 2px; }
.fstep:first-of-type { margin-top: 0; }
.fstep > span:first-child { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 12.5px; letter-spacing: 0; flex: none; }
.fstep .req { letter-spacing: 0; }
legend.fstep { margin-bottom: 12px; }
/* Choix en tuiles cliquables (cases à cocher ou boutons radio masqués) */
.chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.form .chip { position: relative; display: flex; align-items: center; gap: 10px; margin: 0; padding: 9px 12px 9px 9px; border: 1px solid var(--rule); border-radius: 4px; background: #f7fafc; font-size: 14px; font-weight: 400; color: var(--navy); cursor: pointer; line-height: 1.3; transition: border-color .15s, background .15s, color .15s; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip .p-ico { background: #fff; }
.chip:hover { border-color: var(--blue); }
.chip:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(41, 168, 224, .3); }
.chip:has(input:checked) { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip:has(input:checked) .p-ico { background: rgba(41, 168, 224, .18); }
.chip:has(input:checked)::after { content: "✓"; margin-left: auto; color: var(--blue); font-weight: 700; }
.btn-go::after { content: "→"; margin-left: 10px; display: inline-block; transition: transform .15s; }
.btn-go:hover::after { transform: translateX(3px); }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Formulaire et colonne d'accompagnement */
.form-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.form-aside { display: grid; gap: 28px; }
.field-err { color: var(--err); font-size: 12.5px; }
.form-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: 12.5px; }
.notice { padding: 12px 16px; font-size: 14.5px; background: #fff; border-left: 3px solid var(--blue); }
.notice.ok { border-color: var(--ok); }
.notice.err { border-color: var(--err); }
.notice.err:empty, .validation-summary-valid { display: none; }
.notice ul { padding-left: 18px; }

.coords { display: grid; align-content: start; }
.coords > div { display: flex; gap: 16px; border-top: .75px solid var(--rule); padding: 20px 0; }
.coords > div:last-child { border-bottom: .75px solid var(--rule); }
.coords .eyebrow { color: var(--mute); }
.coords b { color: var(--navy); }

/* Texte long (mentions légales) */
.prose .wrap { max-width: 820px; }
.prose h2 { font-size: 26px; margin: 44px 0 14px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 16px; margin: 24px 0 6px; }
.prose p, .prose ul { margin-bottom: 10px; }

/* Appel à l'action */
.cta { background: var(--navy); color: var(--soft); padding: 64px 0; }
.cta .wrap { display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.cta h2 { color: #fff; }
.cta p { margin-top: 10px; }

/* Pied de page */
footer { background: var(--navy); color: #8f9ab0; padding: 48px 0 30px; font-size: 13px; border-top: 1px solid rgba(255, 255, 255, .08); }
footer .wrap { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; }
footer .logo { height: 24px; width: auto; margin-bottom: 14px; }
footer p { margin-bottom: 6px; }
footer h5 { color: #fff; font-size: 13px; margin-bottom: 8px; }
footer a { display: block; padding: 1px 0; }
footer a:hover { color: #fff; }
footer .bottom { grid-column: 1 / -1; border-top: .75px solid rgba(255, 255, 255, .12); padding-top: 14px; margin-top: 12px; display: flex; justify-content: space-between; gap: 20px; }
footer .bottom b { color: #fff; margin-right: 8px; }

/* ---------- Produits : liens, tuiles, icônes ---------- */
.p-ico { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--tint); flex: none; }
.p-ico .ico { width: 24px; height: 24px; }
.p-ico.sm { width: 30px; height: 30px; } .p-ico.sm .ico { width: 18px; height: 18px; }
.p-ico.on-dark { background: rgba(41, 168, 224, .14); }

/* Lignes cliquables dans les cartes de familles (accueil) */

/* Tuiles (page « Notre offre ») */
.tile { background: var(--tint); border-top: 3px solid var(--blue); padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 10px; transition: box-shadow .15s, transform .15s; }
.tile:hover { box-shadow: 0 10px 26px rgba(27, 37, 56, .12); transform: translateY(-2px); }
.tile .p-ico { background: #fff; }
.tile b { color: var(--navy); font-size: 17px; }
.tile p { color: var(--ink); font-size: 14px; flex: 1; }
.tile .more { color: var(--blue-d); font-weight: 700; font-size: 13.5px; }
.tile .more::after { content: "  →"; }
.tile.navy { background: var(--navy); }
.tile.navy b { color: #fff; } .tile.navy p { color: var(--soft); }
.tile.navy .p-ico { background: rgba(41, 168, 224, .14); }
.tile.navy .more { color: var(--blue); }

/* ---------- Page produit ---------- */
.p-hero { padding: 64px 0 56px; }
.p-hero h1 { font-size: 52px; max-width: 860px; margin-top: 26px; }
/* Nom du produit au-dessus de l'accroche */
.p-ico.lg { width: 56px; height: 56px; } .p-ico.lg .ico { width: 30px; height: 30px; }
.p-name { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.p-name-title { font-size: 26px; font-weight: 700; color: var(--navy); line-height: 1.15; }
.p-name-tags { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 14px; color: var(--mute); flex-wrap: wrap; }
.tag { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-d); background: var(--tint); padding: 3px 10px; border-radius: 99px; }
.p-hero .lead { max-width: 760px; }
.grid3 .card h3:first-child, .grid4 .card h3:first-child { margin-top: 0; }

.bignums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.bignums strong { display: block; font-weight: 300; font-size: 48px; color: #fff; line-height: 1; }
.bignums strong small { font-size: 18px; margin-left: 4px; color: var(--blue); font-weight: 400; }
.bignums span { font-size: 13px; color: var(--soft); display: block; margin-top: 8px; }
/* Caractéristiques : comme la dernière page des plaquettes, tous les groupes visibles, deux par ligne */
.specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 28px; }
.spec { background: var(--tint); border-top: 3px solid var(--blue); padding: 22px 26px 10px; }
.spec h3 { display: flex; align-items: center; gap: 12px; font-size: 18px; color: var(--navy); margin-bottom: 8px; }
.spec .p-ico { background: #fff; }
.spec dl > div { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 12px 0; border-top: .75px solid var(--rule); font-size: 14.5px; line-height: 1.5; }
.spec dt { color: var(--navy); font-weight: 700; }
.spec dd { margin: 0; }
.scope { margin-top: 28px; background: var(--tint); padding: 16px 20px; font-size: 14px; }
.scope b { color: var(--navy); }


.btn.small { padding: 6px 12px; font-size: 13px; margin: 6px 0; }
/* Antibot des formulaires : champ piège hors écran, widget ALTCHA aux couleurs du site */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
altcha-widget { --altcha-color-base: #f7fafc; --altcha-border-color: var(--rule); --altcha-border-radius: 4px; --altcha-color-text: var(--navy); --altcha-color-border-focus: var(--blue); max-width: 320px; }

/* Tablette */
@media (max-width: 1000px) {
    .grid4 { grid-template-columns: repeat(2, 1fr); }
    .chain { grid-template-columns: 1fr; gap: 26px; }
    .chain li:not(:last-child)::after { content: "↓"; right: auto; left: 22px; top: auto; bottom: -24px; }
    .logos { grid-template-columns: repeat(4, 1fr); }
    .nums, .timeline { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
    footer .wrap { grid-template-columns: 1fr 1fr; }
    .gamme, .rmap, .cases { grid-template-columns: repeat(2, 1fr); }
    .form-layout { grid-template-columns: 1fr; }
}

/* Mobile */
@media (max-width: 760px) {
    .wrap { padding: 0 16px; }
    h1, .hero h1 { font-size: 34px; }
    h2 { font-size: 28px; }
    .hero { padding: 56px 0; }
    .pagehead { padding: 48px 0 40px; }
    section.s { padding: 56px 0; }
    .hero-grid, .grid2, .grid3, .grid4, .form .row, .form-layout { grid-template-columns: 1fr; }
    .hero-grid { gap: 36px; }
    .grid2 > * { min-width: 0; }
    .form { padding: 24px 16px; }
    .form-foot { flex-direction: column-reverse; align-items: stretch; text-align: center; }
    .facts { border-left: 0; padding-left: 0; border-top: .75px solid var(--rule); padding-top: 24px; }
    .head, .cta .wrap { flex-direction: column; align-items: flex-start; }
    .logos { grid-template-columns: repeat(2, 1fr); }
    .nums, .timeline { grid-template-columns: 1fr; }
    footer .wrap { grid-template-columns: 1fr; }
    footer .bottom { flex-direction: column; }
    .p-hero h1 { font-size: 34px; }
    .gamme, .bignums, .rmap, .specs, .cases { grid-template-columns: 1fr; }
    .gsocle { flex-wrap: wrap; } .gsocle .more { margin-left: 0; }
    .spec { padding: 18px 16px 6px; }
    .spec dl > div { grid-template-columns: 1fr; gap: 2px; }

    header.top .wrap { height: 64px; gap: 0; justify-content: space-between; }
    .menu-button { display: block; width: 28px; height: 20px; position: relative; cursor: pointer; }
    .menu-button span, .menu-button span::before, .menu-button span::after { position: absolute; left: 0; width: 28px; height: 2px; background: var(--navy); content: ""; }
    .menu-button span { top: 9px; }
    .menu-button span::before { top: -8px; }
    .menu-button span::after { top: 8px; }
    header.top nav { display: none; position: absolute; top: 64px; left: 0; right: 0; background: #fff; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 16px 20px; border-bottom: .75px solid var(--rule); }
    header.top nav a:not(.btn) { padding: 12px 0; border-bottom: .75px solid var(--rule); }
    header.top nav a.on { box-shadow: none; color: var(--blue-d); }
    header.top nav .btn { margin: 16px 0 0; text-align: center; }
    .menu-toggle:checked ~ nav { display: flex; }
}

/* Animations (wwwroot/js/motion.js) : états de départ appliqués seulement sous html.motion, donc jamais sans
   JavaScript ni quand le visiteur demande à réduire les animations. */
.motion .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--reveal-delay, 0ms); }
.motion .reveal.in { opacity: 1; transform: none; }
.motion .tick.reveal { opacity: 1; transform: none; width: 0; transition: width .6s cubic-bezier(.2, .7, .2, 1) .1s; }
.motion .tick.reveal.in { width: 28px; }
.motion .chain > li.reveal:not(:last-child)::after { opacity: 0; transform: translateX(-8px); transition: opacity .4s, transform .4s; transition-delay: calc(var(--reveal-delay, 0ms) + .45s); }
.motion .chain > li.reveal.in:not(:last-child)::after { opacity: 1; transform: none; }
.motion .card.t.reveal.in, .motion .spec.reveal.in { transition: opacity .7s, transform .7s, box-shadow .2s; }
.card.t:hover, .spec:hover { box-shadow: 0 12px 30px rgba(27, 37, 56, .10); }

/* Bandeau de logos qui défile (accueil) */
.logos.marquee { display: block; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 16px; width: max-content; animation: marquee var(--marquee-duration, 40s) linear infinite; }
.marquee-track > div { width: 168px; flex: none; }
.logos.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-50% - 8px)); } }
@media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; flex-wrap: wrap; width: auto; }
}

/* Couleur : profondeur en bleu nuit et bleu SB2 (maquette validée le 04/11/2026). Ces règles complètent
   celles du dessus et l'emportent sur elles ; elles restent dans la charte, sans nouvelle couleur. */
/* Motifs : arcs concentriques et grille de points, au trait bleu, en filigrane. */
:root {
    --mq-arcs: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640' fill='none' stroke='%2329A8E0'%3E%3Ccircle cx='520' cy='120' r='120' stroke-opacity='.55'/%3E%3Ccircle cx='520' cy='120' r='190' stroke-opacity='.4'/%3E%3Ccircle cx='520' cy='120' r='260' stroke-opacity='.28'/%3E%3Ccircle cx='520' cy='120' r='330' stroke-opacity='.18'/%3E%3Ccircle cx='520' cy='120' r='400' stroke-opacity='.1'/%3E%3C/svg%3E");
    --mq-dots: radial-gradient(rgba(41, 168, 224, .22) 1.2px, transparent 1.3px);
    --mq-blue-l: #7fd0f2;
}

/* Accueil : bandeau d'ouverture en bleu nuit, halo bleu et motif */
.hero { position: relative; overflow: hidden; color: var(--soft);
    background: radial-gradient(900px 500px at 85% 10%, rgba(41, 168, 224, .28), transparent 60%),
                linear-gradient(135deg, #1b2538 0%, #1d2b45 55%, #1b3a5c 100%); }
.hero::before { content: ""; position: absolute; inset: 0; background-image: var(--mq-dots); background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000 100%); mask-image: linear-gradient(90deg, transparent 35%, #000 100%); }
.hero::after { content: ""; position: absolute; right: -120px; top: -140px; width: 640px; height: 640px; background: var(--mq-arcs) no-repeat; opacity: .9; }
.hero .wrap { position: relative; z-index: 1; }
.hero h1 { color: #fff; }
.hero h1 b { color: var(--mq-blue-l); }
.hero .lead { color: var(--soft); }
.hero .eyebrow { color: var(--blue); }
.hero .facts { border-left-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .04); padding: 28px 32px; border-radius: 8px; backdrop-filter: blur(2px); }
.hero .facts strong { color: #fff; }
.hero .facts span { color: var(--soft); }

/* Accueil : « Ce que nous faisons » passe en blanc, en cartes, pour ne pas enchaîner deux aplats sombres */

/* En-têtes des autres pages : dégradé bleu très clair et arcs en filigrane */
.pagehead { position: relative; overflow: hidden; border-bottom: 0;
    background: radial-gradient(700px 380px at 90% 0%, rgba(41, 168, 224, .16), transparent 65%),
                linear-gradient(180deg, #eef6fc 0%, #f7fbfe 70%, #fff 100%); }
.pagehead::after { content: ""; position: absolute; right: -160px; top: -200px; width: 640px; height: 640px; background: var(--mq-arcs) no-repeat; opacity: .55; pointer-events: none; }
.pagehead .wrap { position: relative; z-index: 1; }
.p-hero .p-ico.lg { background: #fff; box-shadow: 0 8px 20px rgba(41, 168, 224, .25); }
.p-hero .tag { background: #fff; box-shadow: inset 0 0 0 1px rgba(41, 168, 224, .35); }

/* Cartes : relief doux et coins légèrement arrondis */
.card, .tile, .spec, .quote, .chain li.card { border-radius: 8px; }
.card.t, .spec, .tile { background: #fff; box-shadow: 0 1px 2px rgba(27, 37, 56, .05), 0 14px 34px rgba(27, 37, 56, .07); }
section.s:not(.tint) .card.t, section.s:not(.tint) .spec { background: #fff; }
section.s:not(.tint):not(.dark) { background: linear-gradient(180deg, #fff 0%, #f8fbfe 100%); }
.card .ico, .spec h3 .p-ico, .tile .p-ico { color: var(--blue-d); }

/* Bandeaux sombres : chiffres clés avec motif de points et halo */
.dark { background: radial-gradient(700px 300px at 80% 0%, rgba(41, 168, 224, .22), transparent 60%), var(--mq-dots) 0 0 / 22px 22px, linear-gradient(135deg, #1b2538, #1d3150); }
.bignums strong { color: #fff; }

/* Appel au contact : dégradé bleu nuit vers bleu, arcs à droite */
.cta { position: relative; overflow: hidden; background: linear-gradient(110deg, #1b2538 0%, #1d3557 50%, #1f6593 100%); }
.cta::after { content: ""; position: absolute; right: -200px; top: -260px; width: 640px; height: 640px; background: var(--mq-arcs) no-repeat; opacity: .7; }
.cta .wrap { position: relative; z-index: 1; }

/* Accents */
.tick { width: 40px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--blue), var(--mq-blue-l)); }
.motion .tick.reveal.in { width: 40px; }
.btn-blue { box-shadow: 0 8px 20px rgba(41, 168, 224, .35); }
.btn-blue:hover { box-shadow: 0 10px 26px rgba(41, 168, 224, .45); }
.logos.marquee { padding: 10px 0 20px; }
.logos div { border-radius: 8px; box-shadow: 0 1px 2px rgba(27, 37, 56, .05), 0 8px 20px rgba(27, 37, 56, .05); }

/* La gamme (Notre offre) : grille de quatre colonnes, un panneau bleu nuit par famille suivi de ses produits */
.gamme { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 34px; }
.gfam { position: relative; overflow: hidden; border-radius: 10px; padding: 26px 24px 22px; display: flex; flex-direction: column; gap: 6px; color: var(--soft); scroll-margin-top: 100px;
    background: radial-gradient(360px 220px at 100% 0%, rgba(41, 168, 224, .32), transparent 62%), linear-gradient(155deg, #1b2538 0%, #1d3354 100%); }
.gfam::after { content: ""; position: absolute; right: -330px; bottom: -330px; width: 640px; height: 640px; background: var(--mq-arcs) no-repeat; opacity: .45; transform: rotate(180deg); pointer-events: none; }
.gfam > * { position: relative; z-index: 1; }
.gfam .p-ico { margin-bottom: 10px; }
.gfam-label { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }
.gfam h3 { color: #fff; font-size: 26px; font-weight: 300; line-height: 1.15; }
.gfam p { font-size: 14px; line-height: 1.5; }
.gfam-count { margin-top: auto; padding-top: 14px; font-size: 12.5px; font-weight: 700; color: var(--mq-blue-l); }
.gamme .tile { position: relative; overflow: hidden; border-top: 0; border-radius: 10px; background: #fff; padding: 26px 22px 20px; gap: 12px;
    box-shadow: 0 1px 2px rgba(27, 37, 56, .05), 0 14px 34px rgba(27, 37, 56, .07); transition: transform .2s, box-shadow .2s; }
.gamme .tile::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--blue), var(--mq-blue-l)); transform-origin: left; transition: height .2s; }
.gamme .tile .p-ico { width: 52px; height: 52px; background: linear-gradient(145deg, #e3f3fc, #f5fbfe); box-shadow: inset 0 0 0 1px rgba(41, 168, 224, .18); transition: background .2s, box-shadow .2s, transform .2s; }
.gamme .tile .p-ico .ico { width: 26px; height: 26px; }
.gamme .tile b { font-size: 18px; }
.gamme .tile:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(27, 37, 56, .05), 0 22px 44px rgba(41, 168, 224, .20); }
.gamme .tile:hover::before { height: 5px; }
.gamme .tile:hover .p-ico { background: linear-gradient(145deg, #d6eefb, #f5fbfe); box-shadow: inset 0 0 0 1.5px rgba(41, 168, 224, .55), 0 6px 16px rgba(41, 168, 224, .22); transform: scale(1.06); }
.gamme .tile:hover .more::after { margin-left: 4px; }
.gamme .tile .more::after { transition: margin .2s; }
.gsocle { grid-column: 1 / -1; position: relative; overflow: hidden; display: flex; align-items: center; gap: 18px; border-radius: 10px; padding: 22px 28px; color: var(--soft);
    background: radial-gradient(500px 200px at 85% 50%, rgba(41, 168, 224, .30), transparent 65%), linear-gradient(110deg, #1b2538 0%, #1d3354 60%, #1f4f78 100%); transition: box-shadow .2s, transform .2s; }
.gsocle::after { content: ""; position: absolute; right: -150px; top: -300px; width: 640px; height: 640px; background: var(--mq-arcs) no-repeat; opacity: .5; pointer-events: none; }
.gsocle > * { position: relative; z-index: 1; }
.gsocle .gfam-label { min-width: 120px; }
.gsocle-text b { display: block; color: #fff; font-size: 19px; }
.gsocle-text span { font-size: 14px; }
.gsocle .more { margin-left: auto; flex: none; background: #fff; color: var(--navy); font-weight: 700; font-size: 13.5px; padding: 9px 18px; border-radius: 99px; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); transition: background .2s, color .2s; }
.gsocle:hover .more { background: var(--blue); color: #fff; }
.gsocle .more::after { content: "  →"; }
.gsocle:hover { transform: translateY(-2px); box-shadow: 0 20px 44px rgba(27, 37, 56, .25); }

/* « Vous êtes dans quel cas ? » (Notre offre) : une carte par façon de vendre, les solutions en boutons */
.cases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 34px; }
.case { display: flex; flex-direction: column; gap: 12px; background: #fff; border-radius: 10px; padding: 26px 22px 22px;
    box-shadow: 0 1px 2px rgba(27, 37, 56, .05), 0 14px 34px rgba(27, 37, 56, .07); }
.case .p-ico { background: linear-gradient(145deg, #e3f3fc, #f5fbfe); box-shadow: inset 0 0 0 1px rgba(41, 168, 224, .18); }
.case .p-ico .ico { width: 26px; height: 26px; }
.case h3 { font-size: 17px; line-height: 1.35; color: var(--navy); }
.case p { font-size: 13.5px; color: var(--mute); line-height: 1.5; margin-top: auto; }
.case-sol { display: flex; flex-wrap: wrap; gap: 8px; }
.case-sol a { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 8px; border-radius: 99px; font-size: 13.5px; font-weight: 700;
    color: var(--navy); background: var(--tint); box-shadow: inset 0 0 0 1px rgba(41, 168, 224, .25); transition: background .2s, color .2s, box-shadow .2s; }
.case-sol a .ico { width: 16px; height: 16px; stroke: var(--blue-d); transition: stroke .2s; }
.case-sol a:hover { background: var(--blue); color: #fff; box-shadow: 0 6px 16px rgba(41, 168, 224, .35); }
.case-sol a:hover .ico { stroke: #fff; }
.case-help { position: relative; overflow: hidden; color: var(--soft); transition: transform .2s, box-shadow .2s;
    background: radial-gradient(320px 200px at 100% 0%, rgba(41, 168, 224, .32), transparent 62%), linear-gradient(155deg, #1b2538 0%, #1d3354 100%); }
.case-help::after { content: ""; position: absolute; right: -330px; bottom: -330px; width: 640px; height: 640px; background: var(--mq-arcs) no-repeat; opacity: .45; transform: rotate(180deg); pointer-events: none; }
.case-help > * { position: relative; z-index: 1; }
.case-help h3 { color: #fff; }
.case-help p { color: var(--soft); margin-top: 0; }
.case-help .p-ico { background: rgba(41, 168, 224, .14); box-shadow: none; }
.case-help .more { margin-top: auto; align-self: flex-start; background: #fff; color: var(--navy); font-weight: 700; font-size: 13.5px; padding: 8px 16px; border-radius: 99px; transition: background .2s, color .2s; }
.case-help .more::after { content: "  →"; }
.case-help:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(27, 37, 56, .25); }
.case-help:hover .more { background: var(--blue); color: #fff; }

/* La gamme sur l'accueil et les pages produit : colonnes ouvertes par un en-tête bleu nuit, reliées au socle */
.rmap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 30px; }
.rcol { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 10px;
    box-shadow: 0 1px 2px rgba(27, 37, 56, .05), 0 14px 34px rgba(27, 37, 56, .07); }
.rcol::after { content: ""; position: absolute; left: 50%; bottom: -18px; width: 2px; height: 18px; transform: translateX(-50%);
    background: linear-gradient(var(--blue), var(--mq-blue-l)); }
.rhead { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 18px 18px 16px; border-radius: 10px 10px 0 0;
    background: radial-gradient(260px 140px at 100% 0%, rgba(41, 168, 224, .34), transparent 65%), linear-gradient(155deg, #1b2538 0%, #1d3354 100%); }
.rhead::after { content: ""; position: absolute; right: -380px; top: -300px; width: 640px; height: 640px; background: var(--mq-arcs) no-repeat; opacity: .35; pointer-events: none; }
.rhead > * { position: relative; z-index: 1; }
.rhead { min-height: 86px; }
.rlbl { font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }
.rtag { color: var(--soft); font-size: 13px; line-height: 1.35; margin-top: 3px; }
.rlist { display: flex; flex-direction: column; gap: 2px; padding: 10px 10px 12px; }
.rprod { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 10px 28px 10px 10px; border-radius: 8px; transition: background .2s, transform .2s; }
.rprod::after { content: "→"; position: absolute; right: 10px; top: 50%; transform: translate(-4px, -50%); opacity: 0; color: var(--blue); font-weight: 700; transition: opacity .2s, transform .2s; }
.rprod:hover { background: var(--tint); transform: translateX(3px); }
.rprod:hover::after { opacity: 1; transform: translate(0, -50%); }
.rprod b, .rbase-text b { display: block; color: var(--navy); font-size: 15px; line-height: 1.3; }
.rprod small { display: block; color: var(--mute); font-size: 13px; line-height: 1.4; margin-top: 2px; }
.rprod .p-ico { background: linear-gradient(145deg, #e3f3fc, #f5fbfe); box-shadow: inset 0 0 0 1px rgba(41, 168, 224, .18); }
.rprod.cur { background: linear-gradient(90deg, rgba(41, 168, 224, .16), rgba(41, 168, 224, .04)); box-shadow: inset 3px 0 0 var(--blue); transform: none; }
.rprod.cur::after { content: "●"; opacity: 1; transform: translate(0, -50%); font-size: 9px; }
.rprod.cur .p-ico { background: linear-gradient(145deg, var(--blue), var(--mq-blue-l)); box-shadow: 0 6px 14px rgba(41, 168, 224, .35); }
.rprod.cur .p-ico .ico { stroke: #fff; }
.rbase { grid-column: 1 / -1; position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; padding: 20px 26px; border-radius: 10px; color: var(--soft);
    background: radial-gradient(500px 200px at 85% 50%, rgba(41, 168, 224, .30), transparent 65%), linear-gradient(110deg, #1b2538 0%, #1d3354 60%, #1f4f78 100%);
    box-shadow: inset 0 3px 0 var(--blue); transition: box-shadow .2s, transform .2s; }
.rbase::after { content: ""; position: absolute; right: -150px; top: -300px; width: 640px; height: 640px; background: var(--mq-arcs) no-repeat; opacity: .5; pointer-events: none; }
.rbase > * { position: relative; z-index: 1; }
.rbase .rlbl { min-width: 130px; }
.rbase-text b { color: #fff; font-size: 17px; }
.rbase-text small { display: block; color: var(--soft); font-size: 13.5px; margin-top: 2px; }
.rbase .more { margin-left: auto; flex: none; background: #fff; color: var(--navy); font-weight: 700; font-size: 13.5px; padding: 8px 16px; border-radius: 99px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18); transition: background .2s, color .2s; }
.rbase:not(.cur) .more::after { content: "  →"; }
.rbase:hover { transform: translateY(-2px); box-shadow: inset 0 3px 0 var(--blue), 0 20px 44px rgba(27, 37, 56, .25); }
.rbase:hover .more { background: var(--blue); color: #fff; }
.rbase.cur .more { background: var(--blue); color: #fff; }
@media (max-width: 1000px) { .rcol::after { display: none; } }
@media (max-width: 760px) { .rbase { flex-wrap: wrap; } .rbase .rlbl { min-width: 0; width: 100%; } .rbase .more { margin-left: 0; } }

/* Accueil : bouton secondaire sur fond sombre */
.btn-line { border: 1px solid rgba(255, 255, 255, .35); color: #fff; background: transparent; }
.btn-line:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }

/* Accueil : « La Carte Achat de Niveau 3, en deux mots » */
.explain { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 34px; counter-reset: explain; }
.explain-item { position: relative; background: #fff; border-radius: 10px; padding: 30px 28px 28px; border-top: 3px solid var(--blue);
    box-shadow: 0 1px 2px rgba(27, 37, 56, .05), 0 16px 40px rgba(27, 37, 56, .08); }
.explain-num { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-size: 18px; font-weight: 700; color: #fff;
    background: linear-gradient(145deg, var(--blue), var(--mq-blue-l)); box-shadow: 0 8px 18px rgba(41, 168, 224, .35); }
.explain-item h3 { margin-top: 16px; font-size: 19px; color: var(--navy); }
.explain-item p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--ink); }
@media (max-width: 1000px) { .explain { grid-template-columns: 1fr; } }

/* Pages produit : le parcours en étapes numérotées, reliées par un filet */
.journey { list-style: none; padding: 0; margin: 34px 0 0; display: grid; grid-template-columns: repeat(var(--steps, 5), 1fr); gap: 18px; position: relative; }
.journey::before { content: ""; position: absolute; left: 22px; right: 22px; top: 22px; height: 2px; background: linear-gradient(90deg, var(--blue), var(--mq-blue-l)); opacity: .6; }
.jstep { position: relative; background: #fff; border-radius: 10px; padding: 0 20px 22px; margin-top: 22px;
    box-shadow: 0 1px 2px rgba(27, 37, 56, .05), 0 14px 34px rgba(27, 37, 56, .07); }
.jnum { position: relative; top: -22px; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-size: 17px; font-weight: 700; color: #fff;
    background: linear-gradient(145deg, var(--blue), var(--mq-blue-l)); box-shadow: 0 0 0 5px var(--tint), 0 8px 18px rgba(41, 168, 224, .35); }
.jstep h3 { margin-top: -8px; font-size: 17px; color: var(--navy); }
.jstep p { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--ink); }
@media (max-width: 1000px) { .journey { grid-template-columns: repeat(2, 1fr); } .journey::before { display: none; } }
@media (max-width: 760px) { .journey { grid-template-columns: 1fr; } }

/* Chemin d'un paiement (accueil, _PaymentFlow) */
.pf-when { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-d); margin-bottom: 8px; }
.pf-chip { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 10px; background: #fff; font-size: 14px; line-height: 1.35; color: var(--ink);
    box-shadow: inset 0 0 0 1px rgba(41, 168, 224, .25), 0 8px 22px rgba(27, 37, 56, .06); }
.pf-chip b { color: var(--navy); }
.pf-chip .ico { width: 22px; height: 22px; flex: none; }
.pf-chip.pf-soft { background: repeating-linear-gradient(135deg, #f1f8fd 0 10px, #e6f3fb 10px 20px); }
.pf-chip.pf-strong { background: linear-gradient(110deg, var(--blue), var(--mq-blue-l)); color: #fff; box-shadow: 0 10px 24px rgba(41, 168, 224, .35); }
.pf-chip.pf-strong b { color: #fff; } .pf-chip.pf-strong .ico { stroke: #fff; }

/* Grille : entrées, flèches, SB2 au centre, résultats */
.pf-a { margin-top: 34px; display: grid; grid-template-columns: 1fr 150px 190px 120px 1fr; grid-template-rows: auto auto; align-items: center; row-gap: 26px;
    background: #fff; border-radius: 12px; padding: 30px 30px; box-shadow: 0 1px 2px rgba(27, 37, 56, .05), 0 16px 40px rgba(27, 37, 56, .08); }
.pf-a-r1 { grid-row: 1; } .pf-a-r2 { grid-row: 2; }
.pf-a-in { grid-column: 1; } .pf-a-out { grid-column: 5; }
.pf-a-arrow { grid-column: 2; position: relative; height: 2px; background: linear-gradient(90deg, rgba(41, 168, 224, .3), var(--blue)); margin: 0 10px; }
.pf-a-arrow.pf-a-right { grid-column: 4; }
.pf-a-arrow::after { content: ""; position: absolute; right: -2px; top: -5px; border: 6px solid transparent; border-left: 9px solid var(--blue); }
.pf-a-arrow span { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); width: max-content; max-width: 150px; text-align: center; font-size: 12px; font-weight: 700; color: var(--blue-d); line-height: 1.3; }

@media (max-width: 1000px) {
    .pf-a { grid-template-columns: 1fr; }
    .pf-a-arrow { display: none; }
    .pf-a-in, .pf-a-out { grid-column: auto; grid-row: auto; }
}

/* Bloc SB2 au centre, deux voyants pour les deux opérations */
.pf-a-hub { grid-column: 3; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: center; text-align: center; }
.pf-hub { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 12px; width: 150px; padding: 26px 16px 20px; border-radius: 16px;
    background: radial-gradient(160px 120px at 80% 0%, rgba(41, 168, 224, .45), transparent 65%), linear-gradient(160deg, #1b2538, #1f4f78);
    box-shadow: 0 18px 36px rgba(27, 37, 56, .3); }
.pf-hub::after { content: ""; position: absolute; right: -470px; top: -520px; width: 640px; height: 640px; background: var(--mq-arcs) no-repeat; opacity: .5; pointer-events: none; }
.pf-hub img { position: relative; z-index: 1; height: 26px; width: auto; margin-bottom: 4px; }
.pf-hub-led { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .08); }
.pf-hub-led::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mq-blue-l); box-shadow: 0 0 0 3px rgba(127, 208, 242, .25), 0 0 10px var(--mq-blue-l); }
.pf-a-hub b { margin-top: 14px; color: var(--navy); font-size: 15px; }
.pf-a-hub span:not(.pf-hub-led) { font-size: 12.5px; color: var(--mute); max-width: 190px; line-height: 1.4; }
@media (max-width: 1000px) { .pf-a-hub { grid-column: auto; grid-row: auto; } }
/* La facture de Niveau 3 transportée par la télécollecte */
.pf-a { grid-template-rows: auto auto auto; }
.pf-a-data { height: 4px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--blue) 0 10px, var(--mq-blue-l) 10px 20px); }
.pf-a-data::after { top: -4px; }
.pf-invoice { grid-column: 1 / -1; grid-row: 3; position: relative; display: grid; grid-template-columns: 260px 1fr; align-items: center; gap: 28px; margin-top: 18px;
    padding: 16px 20px; border-radius: 12px; background: linear-gradient(110deg, #f1f8fd, #fff); box-shadow: inset 0 0 0 1px rgba(41, 168, 224, .3); }
.pf-a-data::before { content: ""; position: absolute; left: 50%; top: 6px; height: 74px; border-left: 2px dashed var(--blue); opacity: .7; }
.pf-invoice-doc { position: relative; background: #fff; border-radius: 6px; padding: 10px 12px 12px; box-shadow: 0 10px 24px rgba(27, 37, 56, .12); transform: rotate(-2deg); }
.pf-invoice-doc::after { content: ""; position: absolute; right: 0; top: 0; border-width: 0 14px 14px 0; border-style: solid; border-color: var(--tint) var(--tint) #d6e6f2 #d6e6f2; border-radius: 0 6px 0 4px; }
.pf-inv-head b { display: block; font-size: 11.5px; color: var(--navy); }
.pf-inv-head span { display: block; font-size: 9.5px; color: var(--blue-d); margin-top: 1px; }
.pf-inv-row { display: grid; grid-template-columns: 2fr .6fr 1fr 1fr 1fr; gap: 6px; align-items: center; margin-top: 6px; }
.pf-inv-th { margin-top: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--rule); font-size: 8.5px; font-weight: 700; color: var(--mute); text-transform: uppercase; letter-spacing: .04em; }
.pf-inv-row i { display: block; height: 6px; border-radius: 3px; background: #dbe6ef; }
.pf-inv-row i.s { background: rgba(41, 168, 224, .35); }
.pf-invoice-text p { font-size: 14px; line-height: 1.55; color: var(--ink); }
.pf-invoice-text p b { color: var(--navy); }
@media (max-width: 1000px) { .pf-invoice { grid-column: auto; grid-row: auto; grid-template-columns: 1fr; } }
/* Animation : un paquet parcourt chaque flux à son tour (cycle de 6 s), les voyants et les résultats s'allument
   à son passage, les données de facture défilent vers la facture. Coupée si le visiteur réduit les animations. */
.pf-pulse { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; border-radius: 50%; opacity: 0; transform: translate(-50%, -50%);
    background: #fff; box-shadow: 0 0 0 3px var(--blue), 0 0 14px 4px rgba(41, 168, 224, .7); animation: pf-move 6s ease-in-out infinite; }
.pf-pulse.p2 { animation-delay: 1.5s; } .pf-pulse.p3 { animation-delay: 3s; } .pf-pulse.p4 { animation-delay: 4.5s; }
@keyframes pf-move { 0% { left: 0; opacity: 0; } 3% { opacity: 1; } 21% { opacity: 1; } 25% { left: 100%; opacity: 0; } 100% { left: 100%; opacity: 0; } }
.pf-hub-led { transition: background .3s; }
.pf-hub-led.l1 { animation: pf-led 6s infinite; } .pf-hub-led.l2 { animation: pf-led 6s infinite 3s; }
@keyframes pf-led { 0%, 15% { background: rgba(255, 255, 255, .08); } 22%, 45% { background: rgba(41, 168, 224, .45); } 52%, 100% { background: rgba(255, 255, 255, .08); } }
.pf-hub-led::before { animation: pf-blink 6s infinite; } .pf-hub-led.l2::before { animation-delay: 3s; }
@keyframes pf-blink { 0%, 15% { opacity: .45; } 22%, 45% { opacity: 1; } 52%, 100% { opacity: .45; } }
.pf-chip.o1 { animation: pf-glow-soft 6s infinite 1.5s; } .pf-chip.o2 { animation: pf-glow 6s infinite 4.5s; }
@keyframes pf-glow-soft { 0%, 18% { box-shadow: inset 0 0 0 1px rgba(41, 168, 224, .25), 0 8px 22px rgba(27, 37, 56, .06); }
    24%, 40% { box-shadow: inset 0 0 0 2px var(--blue), 0 0 0 6px rgba(41, 168, 224, .15); } 50%, 100% { box-shadow: inset 0 0 0 1px rgba(41, 168, 224, .25), 0 8px 22px rgba(27, 37, 56, .06); } }
@keyframes pf-glow { 0%, 18% { transform: none; } 24% { transform: scale(1.04); box-shadow: 0 0 0 8px rgba(41, 168, 224, .2), 0 14px 30px rgba(41, 168, 224, .45); } 34%, 100% { transform: none; } }
.pf-a-data { background-size: 20px 4px; animation: pf-dash .8s linear infinite; }
@keyframes pf-dash { to { background-position: 20px 0; } }
.pf-a-data::before { border-left: 0; width: 2px; background: repeating-linear-gradient(180deg, var(--blue) 0 6px, transparent 6px 12px); background-size: 2px 12px; animation: pf-down .8s linear infinite; }
@keyframes pf-down { to { background-position: 0 12px; } }
.pf-invoice-doc { animation: pf-float 6s ease-in-out infinite; }
@keyframes pf-float { 0%, 100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(-1deg) translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
    .pf-pulse { display: none; }
    .pf-hub-led, .pf-hub-led::before, .pf-chip.o1, .pf-chip.o2, .pf-a-data, .pf-a-data::before, .pf-invoice-doc { animation: none; }
}

/* Conditions générales de vente : sommaire collant à gauche, articles numérotés, définitions en cartes */
.cgv-validity { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 7px 14px 7px 10px; border-radius: 99px; background: #fff;
    font-size: 13.5px; font-weight: 700; color: var(--navy); box-shadow: inset 0 0 0 1px rgba(41, 168, 224, .35); }
.cgv-validity .ico { width: 18px; height: 18px; }
.cgv { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 48px; align-items: start; }
.cgv-toc { position: sticky; top: 100px; max-height: calc(100vh - 130px); overflow: auto; background: #fff; border-radius: 10px; padding: 20px 18px;
    box-shadow: 0 1px 2px rgba(27, 37, 56, .05), 0 14px 34px rgba(27, 37, 56, .07); border-top: 3px solid var(--blue); }
.cgv-toc-title { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-d); margin-bottom: 10px; }
.cgv-toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 13.5px; line-height: 1.4; }
.cgv-toc a { display: block; padding: 5px 10px; border-left: 2px solid transparent; border-radius: 0 6px 6px 0; color: var(--ink); }
.cgv-toc a:hover { color: var(--blue-d); background: var(--tint); border-left-color: var(--blue); }
.cgv-body { display: grid; gap: 22px; }
.cgv-article { background: #fff; border-radius: 10px; padding: 28px 32px; scroll-margin-top: 100px;
    box-shadow: 0 1px 2px rgba(27, 37, 56, .05), 0 14px 34px rgba(27, 37, 56, .06); }
.cgv-article h2 { font-size: 22px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 2px solid var(--tint); color: var(--navy); }
.cgv-article h3 { font-size: 16px; color: var(--navy); margin: 18px 0 6px; }
.cgv-article p { font-size: 14.5px; line-height: 1.7; color: var(--ink); margin: 0 0 10px; }
.cgv-article ul, .cgv-article ol { font-size: 14.5px; line-height: 1.7; color: var(--ink); }
.cgv-article strong { color: var(--navy); }
.cgv-def { background: var(--tint); border-left: 3px solid var(--blue); border-radius: 0 8px 8px 0; padding: 12px 16px; margin: 0 0 10px; font-size: 14.5px; line-height: 1.6; }
@media (max-width: 1000px) { .cgv { grid-template-columns: 1fr; } .cgv-toc { position: static; max-height: none; } }

.grid2.partners { gap: 22px; max-width: 820px; }

/* Confirmation d'envoi d'un formulaire (Views/Shared/_SentDialog.cshtml) */
dialog.sent { border: 0; border-top: 4px solid var(--ok); padding: 36px 32px 28px; max-width: 440px; width: calc(100% - 32px); text-align: center; color: var(--navy); background: #fff; box-shadow: 0 24px 60px rgba(27, 37, 56, .28); }
dialog.sent:not(:modal) { position: static; margin: 0 0 24px; width: auto; max-width: none; box-shadow: none; border: 1px solid var(--rule); border-top: 4px solid var(--ok); }
dialog.sent:modal { margin: auto; position: fixed; inset: 0; height: fit-content; }
dialog.sent::backdrop { background: rgba(27, 37, 56, .55); backdrop-filter: blur(2px); }
dialog.sent h2 { font-size: 24px; margin: 14px 0 8px; }
dialog.sent p { margin: 0 0 22px; color: #4a5568; }
.sent-check svg { width: 64px; height: 64px; fill: none; stroke: var(--ok); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sent-check circle { fill: rgba(31, 138, 91, .1); }
.sent-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.sent-actions form { margin: 0; }
@media (prefers-reduced-motion: no-preference) {
    dialog.sent:modal { animation: sent-in .35s cubic-bezier(.2, .8, .3, 1.2); }
    .sent-check path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: sent-tick .45s .25s ease-out forwards; }
}
@keyframes sent-in { from { opacity: 0; transform: translateY(16px) scale(.96); } }
@keyframes sent-tick { to { stroke-dashoffset: 0; } }

/* Case à cocher simple d'un formulaire (« Je préfère être rappelé ») */
.form .check { display: flex; align-items: flex-start; gap: 10px; margin: -4px 0 18px; font-size: 14px; font-weight: 400; color: var(--navy); cursor: pointer; }
.form .check input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--blue); }

/* Carte de l'interlocuteur commercial (page contact) */
.coords > .vcard { display: block; padding: 22px; margin-bottom: 8px; background: #fff; border: 1px solid var(--rule); border-top: 3px solid var(--blue); box-shadow: 0 14px 34px rgba(27, 37, 56, .08); }
.vcard-head { display: flex; gap: 16px; align-items: center; }
.vcard-av { flex: none; width: 68px; height: 68px; border-radius: 50%; box-shadow: 0 0 0 4px #fff, 0 0 0 5px #d3d8df, 0 6px 16px rgba(27, 37, 56, .14); }
.vcard-av svg { display: block; width: 100%; height: 100%; }
.vcard-name { margin: 2px 0 0; font-size: 19px; font-weight: 700; color: var(--navy); }
.vcard-role { margin: 2px 0 0; font-size: 14px; color: #5a6478; }
.vcard-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.vcard-acts .btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; font-size: 13.5px; }
.coords .vcard-acts .btn-blue { color: #fff; }
.coords .vcard-acts .btn-ghost { color: var(--navy); }
.vcard-acts svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vcard-note { margin: 16px 0 0; padding-top: 14px; border-top: 1px dashed var(--rule); font-size: 13.5px; color: #5a6478; }