/* Qui nous sommes, V5 (audit P10, P23, P09) : chargée après v3-pages.css (gelée), seulement sur /qui-sommes-nous et /en/about */

/* P10 : les deux associés, cartes sans contour distinguées par le fond.
   Photo à gauche ; nom, rôle, trois lignes de parcours et LinkedIn à droite (sous 760 px : parcours sous la photo). */
/* 07/10 (rythme vertical unique) : plus de marges propres à la section des associés ni à son titre (celles de .df-section et de .hm-head) */
.ab-team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.ab-person { display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-areas: "photo id" "photo path" "photo in"; grid-template-rows: auto auto 1fr; column-gap: 26px; padding: clamp(22px, 2.4vw, 30px); border-radius: var(--b-r-card); background: var(--sea); }
.ab-photo { grid-area: photo; display: block; width: 112px; height: 112px; border-radius: var(--b-r-card); background: #fff; box-shadow: 0 0 0 4px #fff; object-fit: cover; }
.ab-person-id { grid-area: id; }
body.v2 .ab-person-id h3 { margin: 0 0 4px; font: 600 clamp(1.2rem, 1.7vw, 1.4rem)/1.3 var(--f-display); letter-spacing: -.01em; color: var(--ink); }
.ab-role { margin: 0; font-size: 15.5px; font-weight: 600; line-height: 1.4; color: var(--tide); }
.ab-person-path { grid-area: path; margin-top: 14px; }
.ab-person-path ul { margin: 0; padding: 0; list-style: none; }
.ab-person-path li { padding: 7px 0; border-top: 1px solid rgba(8, 26, 46, .1); font-size: 15px; line-height: 1.45; color: var(--ink); }
.ab-person-in { grid-area: in; align-self: end; display: flex; align-items: center; gap: 10px; margin: 10px 0 0; font-size: 15px; color: var(--ink); }
.ab-person-in i { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--b-r-card); background: #fff; color: var(--tide); }
.ab-person-in i svg { width: 17px; height: 17px; }


@media (max-width: 760px) {
    .ab-team { grid-template-columns: minmax(0, 1fr); }
    .ab-person { grid-template-columns: 76px minmax(0, 1fr); grid-template-areas: "photo id" "path path" "in in"; grid-template-rows: auto; align-items: center; column-gap: 16px; }
    .ab-photo { width: 76px; height: 76px; }
}

/* ---------- Correction V5 (contrôles du 24/09) ---------- */
.ab-person-id h3 { line-height: 1.5; }

/* Issue 31 : « Ce qui nous guide » resserré */
.ab-rules > li { padding: clamp(16px, 2vw, 22px) 0; }
body.v2 .ab-rules h3 { margin-bottom: 6px; }
.ab-rules p { margin-bottom: 8px; }
.ab-rules .ab-steps { margin-bottom: 10px; }

/* V4.2 point 10 : pastilles numérotées des règles 04 et 05. Les règles de .ab-rules li (v3-pages.css, et la ligne ci-dessus
   avant correction) s'appliquaient aussi aux pastilles imbriquées : padding horizontal à 0 (le rond sortait du bord gauche,
   le texte touchait le bord droit) et trait du haut ou du bas hérité (défaut déjà présent en V4). Pastille remise à plat :
   rond à l'intérieur, même marge à gauche (autour du rond) qu'en haut et en bas, texte centré verticalement. */
.ab-rules .ab-steps { align-items: flex-start; }
.ab-rules .ab-steps li, .ab-rules .ab-steps li:last-child { display: inline-flex; align-items: center; gap: 9px; min-height: 36px; padding: 6px 16px 6px 6px; border: 0; box-sizing: border-box; line-height: 1.3; }
.ab-rules .ab-steps li::before { flex: none; line-height: 1; }

/* Issue 21 : deux partenaires sur toute la largeur, logo en tête de carte */
.ab-partners { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ab-part-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; margin-bottom: 6px; }
.ab-part-logo { display: block; flex: none; width: 56px; height: 56px; border-radius: var(--b-r-card); object-fit: cover; }

@media (max-width: 960px) {
    .ab-partners { grid-template-columns: minmax(0, 1fr); }
}

/* Issue 20 : sur téléphone, les cinq repères en liste (chiffre à gauche, libellé à droite), sans orphelin ni trait ouvert */
@media (max-width: 560px) {
    .ab-figs { grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 0; }
    .ab-figs li, .ab-figs li:nth-child(n) { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; row-gap: 0; column-gap: 16px; padding: 12px 0; border-left: 0; border-top: 1px solid var(--line); }
    .ab-figs li:first-child { padding-top: 0; border-top: 0; }
    .ab-figs li:last-child { padding-bottom: 0; }
    .ab-figs b { grid-column: 1; grid-row: 1 / span 2; font-size: 2rem; }
    .ab-figs span, .ab-figs small { grid-column: 2; }
    .ab-figs span { margin-top: 0; }
}

/* V4.2 alternance des fonds : « Les associés » passe sur fond écume (df-sea) pour séparer la bande des chiffres (blanche)
   et « Ce qui nous guide » (blanche). Cartes des associés en blanc sur écume ; pastille LinkedIn en écume ;
   marge basse égale à la marge haute ; plus de trait sous la bande des chiffres (le changement de fond suffit). */
.df-sea .ab-person { background: #fff; }
.df-sea .ab-photo { background: var(--sea); box-shadow: 0 0 0 4px var(--sea); }
.df-sea .ab-person-in i { background: var(--sea); }
/* V4.2 : filet de la V4 sous les repères, sauf quand la section des associés (fond écume) suit */
.ab-figs-sec:has(+ .ab-team-sec) { border-bottom: 0; }

/* V4.3 (06/10, règle de Louis : deux sections voisines n'ont jamais le même fond). Les fonds alternent d'après les sections présentes
   (v3-about.mjs, ORDER) : chiffres blanc, puis écume et blanc ; chaque section a donc ses deux variantes, et les cartes prennent
   l'autre teinte que leur section. Plus de filet sous les chiffres quand une section écume suit (le changement de fond suffit). */
.ab-figs-sec:has(+ .df-sea) { border-bottom: 0; }
/* « Ce qui nous guide » sur écume : filets un peu plus soutenus, pastilles des étapes en blanc */
.df-sea .ab-rules > li { border-top-color: rgba(8, 26, 46, .1); }
.df-sea .ab-rules > li:last-child { border-bottom-color: rgba(8, 26, 46, .1); }
.df-sea .ab-steps li { background: #fff; }
/* Bureaux sur blanc : cartes des villes en écume ; le liseré des noms sur la carte prend le fond blanc */
.ab-map-sec:not(.df-sea) .ab-cities li { background: var(--sea); }
.ab-map-sec:not(.df-sea) .ab-pin text { stroke: #fff; }
/* Secteurs sur écume : cartes blanches, pictogrammes sur écume (survol marine inchangé) */
.df-sea .ab-sectors li { background: #fff; }
.df-sea .ab-sectors i { background: var(--sea); }
/* Partenaires sur blanc : cartes écume, étiquette blanche */
.ab-part-sec:not(.df-sea) .ab-partners li:not(.is-product) { background: var(--sea); }
.ab-part-sec:not(.df-sea) .ab-partners li:not(.is-product) .ab-tag { background: #fff; }

/* ---------- V4.3, passe de nuit du 06/10 (Louis : réduire la surface, une page utile au dirigeant client) ----------
   Ordre : haut de page, logos « Ils nous font confiance » (styles de v3-home.css, comme l'accueil), associés (dès que leurs noms sont
   renseignés), « Nos valeurs » (marine), bureaux, secteurs, questions fréquentes. « Ce qui nous guide », « Nos partenaires » et la bande
   des repères V4.2 sont au garde-manger (pantryAbout, v3-about.mjs). */

/* Bandeau « Nos valeurs : des humains à vos côtés. » : rendu de .xb-val (v3-home.css, démarche de l'accueil) reproduit ici, sans
   dépendre de cette feuille ; bandeau marine pleine largeur au lieu d'une carte dans une section (il sépare deux sections claires). */
/* 14/10 (nappe refaite d'après le maillage de l'accueil) : la crête claire du nouveau img/houle.svg traversait les textes de la
   troisième valeur à 1366 px, et les valeurs empilées à 900 et 390 px. Nappe à 600 px, calée en bas à droite, et 520 px jusqu'à
   640 px de large (à 600 px, la crête touchait la dernière ligne anglaise à 390 px) : aucun tracé à moins de 16 px d'un texte (FR et
   EN, 390, 760, 900 et 1366 px, banc .claude/nappe/test-nappe.cjs) ; avant : right -120px center / 760px auto */
.ab-val-sec { padding: var(--sec-y, clamp(2.25rem, 4vw, 3rem)) 0; background: var(--b-night) var(--b-lines) no-repeat right -80px bottom -135px / 600px auto; color: #fff; } /* 14/10 (lot 2) : section signature marine de la page, avec la nappe */ /* 07/10 : rythme commun (--sec-y) */
@media (max-width: 640px) { .ab-val-sec { background-size: 520px auto; } }
body.v2 .ab-val-sec h2 { margin: 0 0 var(--sec-head); font: 500 22px/1.25 var(--f-display); letter-spacing: -.015em; color: #fff; }
body.v2 .ab-val-sec h2 span { color: transparent; background: var(--b-grad); -webkit-background-clip: text; background-clip: text; } /* 14/10 : le mot coloré en dégradé, comme les accroches (sur marine seulement) */
.ab-val { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; margin: 0; padding: 0; list-style: none; }
.ab-val li { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; }
.ab-val li i { display: block; width: 24px; height: 24px; margin-top: 1px; color: var(--b-accent-dark); }
.ab-val li svg { display: block; width: 100%; height: 100%; }
.ab-val b { display: block; font: 600 16px/1.35 var(--f-body); color: #fff; }
.ab-val p { margin: 3px 0 0; font-size: 15px; line-height: 1.47; color: var(--b-on-dark-2); }
@media (max-width: 900px) { .ab-val { grid-template-columns: minmax(0, 1fr); row-gap: 16px; } }
@media (max-width: 640px) { body.v2 .ab-val-sec h2 { font-size: 20px; } } /* 07/10 au soir (intégration) : écart titre-contenu commun (--sec-head), 18 et 16 px avant */

/* Associés : marges de .df-section (07/10, rythme commun) */

/* Repères d'expérience (facts.mjs, EXPERIENCE) : affichés seuls dès qu'ils sont renseignés, trois chiffres sur une ligne ;
   bande blanche ou écume selon son rang (ORDER), sans filet (le changement de fond suffit) */
.ab-figs-sec.df-sea { background: var(--sea); border-bottom: 0; }
.ab-figs-sec--exp { border-bottom: 0; }
@media (min-width: 561px) {
    .ab-figs-sec--exp .ab-figs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ab-figs-sec--exp .ab-figs li + li { padding-left: clamp(12px, 2vw, 28px); border-left: 1px solid var(--line); }
}

/* Garde-manger : étiquette d'origine au-dessus de chaque bloc retiré (page cachée, noindex) */
.ab-gm { margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--muted); }

/* Bureaux : carte de France plafonnée à 470 px de large (560 avant) : section moins haute (environ 660 px au lieu de 758 à 1 366 px),
   la carte et les deux villes restent dans un écran de 14 pouces */
.ab-map { max-width: 470px; }

/* ---------- V4.3, 07/10 (Louis : « la page fait vide ») : « Pourquoi DataFish ? » (#pourquoi) et « Comment nous travaillons avec vous »
   (#travailler), v3-about.mjs. Aucune marge de section propre : celles de .df-section et de .hm-head (rythme commun).
   Fonds d'après ORDER : les cartes et les pictogrammes prennent l'autre teinte que leur section. Au survol, seuls les pictogrammes
   et le pointillé changent de couleur : les blocs ne bougent pas. ---------- */
.ab-why { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 4.5vw, 4rem); align-items: start; }
.ab-why-txt p { margin: 0; max-width: 56ch; font-size: clamp(1.08rem, 1.35vw, 1.2rem); line-height: 1.6; color: var(--ink); }
.ab-why-txt p + p { margin-top: 1rem; color: var(--muted); }
.ab-why-card { padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.4vw, 28px); border-radius: var(--b-r-card); background: var(--sea); }
.df-sea .ab-why-card { background: #fff; }
body.v2 .ab-why-card h3 { margin: 0 0 14px; font: 600 15px/1.3 var(--f-body); letter-spacing: 0; color: var(--muted); }
.ab-why-list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.ab-why-list li { display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 14px; align-items: start; }
.ab-why-list i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--b-r-card); background: #fff; color: var(--tide); transition: background-color .25s, color .25s; }
.df-sea .ab-why-list i { background: var(--sea); }
.ab-why-list i svg { width: 21px; height: 21px; }
.ab-why-list li:hover i { background: var(--ink); color: #fff; }
.ab-why-list b { display: block; font: 600 17px/1.3 var(--f-display); color: var(--ink); }
.ab-why-list p { margin: 3px 0 0; font-size: 15px; line-height: 1.5; color: var(--muted); }

/* 10/10 : les règles de « Comment nous travaillons avec vous » (.ab-how*) sont passées dans v3-home.css (partie démarche) : le bloc
   est commun à l'accueil et à cette page (v45-how.mjs), et v3-home.css est chargée sur les deux (et sur le garde-manger). */
@media (max-width: 860px) {
    .ab-why { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .ab-why-list i { transition: none; }
}

/* 10/10 (Louis : « le texte et le cube sont mal centrés ; remonter un peu l'ensemble par rapport au titre ») : la conviction est
   centrée en hauteur sur la carte « Ce qui nous distingue » (au lieu d'être collée en haut), et l'ensemble remonte sous le titre :
   écart titre-contenu de 20 px au lieu de --sec-head (36 px), seule exception au rythme commun, demandée par Louis. Sous 860 px
   (une colonne), le texte reprend sa place au-dessus de la carte. */
.ab-why { align-items: center; }
.ab-why-sec .hm-head { margin-bottom: 20px; }

/* 10/10 (Louis : « Nos valeurs » en police très petite par rapport au reste) : titre à la taille des autres titres de section
   (.hm-h, v3.css : 30 à 40 px), engagements à la taille des autres cartes de la page (titres 19 px, texte 16 px) */
body.v2 .ab-val-sec h2 { font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1.08; letter-spacing: -0.028em; text-wrap: balance; }
.ab-val { column-gap: clamp(24px, 3vw, 40px); }
.ab-val li { grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px; }
.ab-val li i { width: 30px; height: 30px; margin-top: 0; }
.ab-val b { font: 600 19px/1.3 var(--f-display); letter-spacing: -.012em; }
.ab-val p { margin-top: 5px; font-size: 16px; line-height: 1.55; }
@media (max-width: 900px) { .ab-val { row-gap: 22px; } }
@media (max-width: 640px) { body.v2 .ab-val-sec h2 { font-size: clamp(1.9rem, 3vw, 2.5rem); } }
/* 14/10 (relecture du lot 2) : à l'impression, les fonds ne sortent pas : la section marine passe au texte sombre sur blanc, et le
   mot en dégradé (texte transparent sur fond découpé) retrouve une couleur pleine, sinon il disparaît */
@media print {
    .ab-val-sec { background: none; color: var(--ink); }
    body.v2 .ab-val-sec h2, .ab-val b { color: var(--ink); }
    body.v2 .ab-val-sec h2 span { background: none; color: var(--tide); }
    .ab-val p { color: var(--muted); }
}

/* 10/10 (Louis : secteurs regroupés par familles) : six cartes-liens vers « Notre offre » filtrée (v3-about.mjs, .ab-fam), trois
   colonnes, deux sous 960 px, une sous 560 px. Cartes de l'autre teinte que la section ; au survol, seuls le pictogramme et la
   flèche changent, la carte ne bouge pas. Flèche : .ab-sec-arr (plus haut). */
.ab-fam { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.ab-fam a { display: grid; grid-template-columns: 44px minmax(0, 1fr) 16px; align-items: center; column-gap: 14px; height: 100%; min-height: 84px; padding: 16px 18px 16px 16px; border-radius: var(--b-r-card); background: var(--sea); color: var(--ink); text-decoration: none; box-sizing: border-box; }
.df-sea .ab-fam a { background: #fff; }
.ab-fam i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--b-r-card); background: #fff; color: var(--tide); transition: background-color .25s, color .25s; }
.df-sea .ab-fam i { background: var(--sea); }
.ab-fam i svg { width: 21px; height: 21px; }
.ab-fam-t { min-width: 0; }
.ab-fam b { display: block; font: 600 17px/1.3 var(--f-display); color: var(--ink); }
.ab-fam small { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.ab-fam a:is(:hover, :focus-visible) i { background: var(--ink); color: #fff; }
.ab-fam a:is(:hover, :focus-visible) .ab-sec-arr { transform: translateX(3px); }
.ab-fam a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.ab-fam a:focus-visible { outline: 2px solid var(--tide); outline-offset: 3px; }
@media (max-width: 960px) { .ab-fam { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ab-fam { grid-template-columns: minmax(0, 1fr); gap: 8px; } .ab-fam a { min-height: 72px; padding: 12px 14px 12px 12px; } }
@media (prefers-reduced-motion: reduce) { .ab-fam i { transition: none; } }

/* ---------- 09/10 (Louis : offre par secteur pour les professions locales) : « Les secteurs où nos solutions s'appliquent » en deux
   groupes (v3-about.mjs, section #secteurs) : « Professions et commerces de proximité » (sept liens vers les pages Secteurs, puis un
   lien vers la page d'entrée) et « PME, ETI et groupes » (les six cartes d'avant, resserrées). Côte à côte dès 961 px, l'un sous
   l'autre en dessous ; deux colonnes de cartes par groupe, une seule sur téléphone. Aucune marge de section propre (rythme commun).
   Cartes de l'autre teinte que la section (écume aujourd'hui : cartes blanches, pictogrammes écume). Au survol d'un métier, seuls le
   pictogramme et la flèche changent : la carte ne bouge pas. ---------- */
.ab-sec-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px clamp(24px, 3.5vw, 44px); align-items: start; }
body.v2 .ab-sec-group h3 { margin: 0; font: 600 19px/1.3 var(--f-display); letter-spacing: -.01em; color: var(--ink); }
.ab-sec-gp { margin: 4px 0 14px; font-size: 15px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.ab-sec-local { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.ab-sec-local a { display: grid; grid-template-columns: 38px minmax(0, 1fr) 16px; align-items: center; column-gap: 12px; min-height: 58px; padding: 10px 14px 10px 10px; border-radius: var(--b-r-card); background: var(--sea); color: var(--ink); text-decoration: none; }
.ab-sec-local i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--b-r-card); background: #fff; color: var(--tide); transition: background-color .25s, color .25s; }
.ab-sec-local i svg { width: 19px; height: 19px; }
.ab-sec-local b { font: 600 15.5px/1.3 var(--f-display); }
.ab-sec-arr { display: inline-grid; width: 16px; height: 16px; color: var(--tide); transition: transform .2s; }
.ab-sec-arr svg { width: 100%; height: 100%; }
.ab-sec-local a:is(:hover, :focus-visible) i { background: var(--ink); color: #fff; }
.ab-sec-local a:is(:hover, :focus-visible) .ab-sec-arr { transform: translateX(3px); }
.ab-sec-local a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.df-sea .ab-sec-local a { background: #fff; }
.df-sea .ab-sec-local i { background: var(--sea); }
.ab-sec-more { margin: 14px 0 0; line-height: 1.3; }
/* PME, ETI et groupes : les six cartes d'avant (v3-pages.css), plus serrées, en deux colonnes à côté du premier groupe */
.ab-sec-group .ab-sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ab-sec-group .ab-sectors li { grid-template-columns: 38px minmax(0, 1fr); align-content: center; column-gap: 12px; min-height: 58px; padding: 10px 14px 10px 10px; border-radius: var(--b-r-card); } /* nom et description serrés l'un contre l'autre quand la carte voisine est plus haute */
.ab-sec-group .ab-sectors i { width: 38px; height: 38px; border-radius: var(--b-r-card); }
.ab-sec-group .ab-sectors i svg { width: 19px; height: 19px; }
.ab-sec-group .ab-sectors b { font-size: 15.5px; }
.ab-sec-group .ab-sectors small { font-size: 13.5px; }
/* 09/10 (relecture) : ces six cartes ne sont pas des liens : pas de survol hérité (.ab-sectors li:hover i de v3-pages.css), qui les
   faisait passer pour cliquables à côté des métiers voisins ; pictogramme inchangé, sur blanc comme sur écume */
.ab-sec-group .ab-sectors li:hover i { background: #fff; color: var(--tide); }
.df-sea .ab-sec-group .ab-sectors li:hover i { background: var(--sea); }
@media (max-width: 960px) {
    .ab-sec-groups { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .ab-sec-local, .ab-sec-group .ab-sectors { grid-template-columns: minmax(0, 1fr); }
    .ab-sec-local a { min-height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
    .ab-sec-local i, .ab-sec-arr { transition: none; }
}

/* ---------- 14/10 (lot 2, direction « premium sobre », .claude/DIRECTION-STYLE-14-10.md) ----------
   Moins de dessin, plus de typographie. Les cartes restent à plat, sans contour, de l'autre teinte que leur section ; au survol, le
   titre passe au bleu et rien ne bouge. Les pictogrammes sont nus, au trait fin, en #1F6FA8, sans carré de fond. */
/* logos « Ils nous font confiance » : gris et estompés, en couleur au survol. Règle de cette page seulement : à reprendre dans
   v3-home.css (.hm-logos img) pour l'accueil, puis à retirer d'ici. */
.hm-trust .hm-logos img { filter: grayscale(1) contrast(1.1); opacity: .62; transition: filter .2s ease, opacity .2s ease; }
.hm-trust .hm-logos a:is(:hover, :focus-visible) img { filter: none; opacity: 1; }
/* « Pourquoi DataFish ? » : pictogrammes nus dans la carte « Ce qui nous distingue », titre de la carte en étiquette */
body.v2 .ab-why-card h3 { font: 600 12px/1.3 var(--f-body); letter-spacing: .09em; text-transform: uppercase; color: var(--b-faint); }
.ab-why-list li { grid-template-columns: 24px minmax(0, 1fr); }
.ab-why-list i, .df-sea .ab-why-list i, .ab-why-list li:hover i { width: 24px; height: 24px; margin-top: 1px; border-radius: 0; background: none; color: var(--b-accent); }
.ab-why-list i svg { width: 20px; height: 20px; }
.ab-why-list b { font-weight: 600; letter-spacing: -.012em; }
/* « Nos partenaires » : la catégorie en petites capitales grises, sans pastille */
.ab-partners .ab-tag, .ab-part-sec:not(.df-sea) .ab-partners li:not(.is-product) .ab-tag { padding: 0; border-radius: 0; background: none; font: 600 11.5px/1.3 var(--f-body); letter-spacing: .09em; text-transform: uppercase; color: var(--b-faint); }
.ab-partners .is-product .ab-tag { color: var(--b-accent-dark); }
.ab-partners .is-product p { color: var(--b-on-dark-2); }
body.v2 .ab-partners b { font-weight: 600; letter-spacing: -.012em; }
/* Bureaux : les villes en texte, sans tuile au poisson (v3-about.mjs) ; carte de France en points gris bleutés, deux repères
   carrés d'accent, sans cercle qui pulse ni poisson */
.ab-cities li { display: block; padding: 18px 20px; }
.ab-cities b { font-weight: 600; letter-spacing: -.012em; }
.ab-cities small { color: var(--b-faint); font-weight: 500; }
.ab-dots rect { fill: #C9D3DD; }
.ab-pin .ab-tile { fill: var(--b-accent); }
.ab-pin text { font: 600 .44px var(--f-display); fill: var(--b-night); }
/* Secteurs : six cartes-liens, pictogramme nu, flèche bleue ; au survol, le titre passe au bleu */
.ab-fam a { grid-template-columns: 24px minmax(0, 1fr) 16px; }
.ab-fam i, .df-sea .ab-fam i, .ab-fam a:is(:hover, :focus-visible) i { width: 24px; height: 24px; border-radius: 0; background: none; color: var(--b-accent); }
.ab-fam i svg { width: 20px; height: 20px; }
.ab-fam b { font-weight: 600; letter-spacing: -.012em; transition: color .2s ease; }
.ab-fam a:hover b { color: var(--b-accent); text-decoration: none; }
.ab-fam a:focus-visible { outline-color: var(--b-accent); }
.ab-sec-local a { grid-template-columns: 24px minmax(0, 1fr) 16px; }
.ab-sec-local i, .df-sea .ab-sec-local i, .ab-sec-local a:is(:hover, :focus-visible) i { width: 24px; height: 24px; border-radius: 0; background: none; color: var(--b-accent); }
.ab-sec-group .ab-sectors li { grid-template-columns: 24px minmax(0, 1fr); }
.ab-sec-group .ab-sectors i, .df-sea .ab-sec-group .ab-sectors i, .ab-sec-group .ab-sectors li:hover i, .df-sea .ab-sec-group .ab-sectors li:hover i { width: 24px; height: 24px; border-radius: 0; background: none; color: var(--b-accent); }
/* Associés (dès que leurs noms sont renseignés) : pictogramme LinkedIn nu */
.ab-person-in i, .df-sea .ab-person-in i { width: 20px; height: 20px; border-radius: 0; background: none; color: var(--b-accent); }
/* 14/10 soir (Louis : logo de Sellsy sur la carte partenaire, v3-about.mjs partnersNow) : mot-image (nuage et nom, marine officiel,
   1200 x 450, fond transparent, marges vides du fichier compensées par les marges négatives) à hauteur optique fixe et largeur libre,
   sans cadre, sans ombre, sans rayon, sans fond ; il garde ses couleurs (une seule carte, pas un mur de logos). Il ouvre la rangée du
   haut, l'étiquette reste à droite ; la rangée est un peu plus écartée du titre que sans logo. */
.ab-part-mark { display: block; flex: none; width: auto; height: 40px; margin: -8px 0 0 -5px; border-radius: 0; object-fit: contain; }
.ab-part-top:has(.ab-part-mark) { margin-bottom: 8px; }
@media (max-width: 420px) { .ab-part-mark { height: 34px; margin-top: -6px; } }
@media (prefers-reduced-motion: reduce) {
    .hm-trust .hm-logos img, .ab-fam b { transition: none; }
}