/* V5 puis V4.2 : Réalisations (lot maturia) ; 10/10 soir : la page s'appelle « Notre offre » (clé projects, d'où le nom de cette
   feuille, inchangé). Chargée après v3-pages.css par le socle.
   V4.2 (point 31) : mise en page de la V4 ; les preuves de chaque cas (P09) s'y glissent discrètement, sans bloc de plus. */

/* Repère « secteur, taille, année » sur la ligne de la catégorie */
.rz-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; }
.rz-meta { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--muted); }
/* Chiffre mesuré : à la suite de « Ce que ça change », dans la même case */
.rz-result { display: block; margin-top: 8px; font-weight: 600; }
/* Citation du client : une ligne discrète sous les trois colonnes */
.rz-quote { margin: 12px 0 0; padding: 0; font-size: 14px; font-style: normal; line-height: 1.5; color: var(--muted); }
.rz-quote p { margin: 0; }

/* P12 (V5) : MaturIA en carte courte ; rendue seulement si SHOW_SCREEN = false dans v3-pages-build.mjs */
.rzp-card--short { grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem clamp(2rem, 5vw, 4rem); padding: clamp(1.5rem, 4vw, 2.75rem) clamp(1.5rem, 4.5vw, 3.5rem); }
.rzp-card--short .rzp-lead { max-width: 52ch; margin: 0; }
.rzp-card--short .rzp-actions { justify-content: flex-end; }
@media (max-width: 860px) {
    .rzp-card--short { grid-template-columns: minmax(0, 1fr); }
    .rzp-card--short .rzp-actions { justify-content: flex-start; }
}

/* V4.3 (06/10, règle de Louis : deux sections voisines n'ont jamais le même fond ; v3-pages-build.mjs) : haut de page écume,
   « Clients » sur blanc (fiches et filtres en écume, cases et compteurs blancs ; pastilles et dessins : v3-home.css,
   .hm-work:not(.df-sea)), « Nos produits » sur écume (carte MaturIA blanche), bandeau final marine. Avec df-sea sur « Clients »,
   les règles d'origine (fiches blanches) s'appliquent de nouveau. */
.rz:not(.df-sea) .rz-case { background: var(--sea); }
.rz:not(.df-sea) .rz-dl div { background: #fff; }
.rz:not(.df-sea) .rz-filters button { background: var(--sea); }
.rz:not(.df-sea) .rz-filters button:hover { background: var(--tide-soft); }
.rz:not(.df-sea) .rz-filters button[aria-pressed="true"] { background: var(--ink); }
.rz:not(.df-sea) .rz-count { background: #fff; }
.df-sea .rzp-card { background: #fff; }


/* ================= V4.2 : le labo DataFish (lot labo) =================
   Section « Le labo DataFish » (id labo, générée par v3-pages-build.mjs) : papier de plan quadrillé sur le fond sea,
   fiches d'expérience numérotées, fioles en pixels dans la grammaire du poisson. Aucun contour : les fiches se
   distinguent par leur fond. La fenêtre cachée du pied de page a sa propre feuille (v42-labo.css). */
.rzl {
    /* 14/10 (lot 2, direction « premium sobre ») : plus de papier quadrillé (quatre dégradés linéaires en grille de 120 et 24 px,
       historique git) ; le labo, en pause, garde le fond de sa section. */
    background-image: none;
}
.rzl-bench { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1rem, 2.5vw, 1.5rem); align-items: stretch; margin: 0; padding: 0; list-style: none; }
.rzl-bench:has(> :nth-child(3)) { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.rzl-card { display: flex; flex-direction: column; margin: 0; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--b-r-card); background: #fff; }
.rzl-card--free { background: rgba(255, 255, 255, .5); }
.rzl-top { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 1.1rem; } /* finition 25/09 : numéros à la même hauteur d'une carte à l'autre */
.rzl-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0; padding-top: 10px; }
.rzl-n { font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: .04em; color: var(--tide); font-variant-numeric: tabular-nums; }
.rzl-tag { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: var(--b-r-tag); background: var(--tide-soft); color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.3; }
.rzl-tag i { width: 6px; height: 6px; border-radius: 1px; background: var(--fish); flex: none; } /* un pixel témoin, immobile */
body.v2 .rzl-name { margin: 0 0 .6rem; font: 600 clamp(1.9rem, 3vw, 2.4rem)/1 var(--f-display); letter-spacing: -.03em; color: var(--ink); }
.rzl-lead { max-width: 46ch; margin: 0 0 1.25rem; font-size: 17px; line-height: 1.55; color: var(--ink); }
.rzl-card--free .rzl-lead, body.v2 .rzl-card--free .rzl-name { color: var(--muted); }
.rzl-card--free .rzl-lead { margin-bottom: 0; }
.rzl-dl { display: grid; gap: .6rem; margin: 0 0 1.25rem; }
.rzl-dl > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 0 1rem; align-items: baseline; }
.rzl-dl dt { font-size: 14px; font-weight: 600; color: var(--tide); }
.rzl-dl dd { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--muted); }
.rzl-go { margin-top: auto; align-self: flex-start; }
.rzl-go i { display: inline-grid; width: 1em; height: 1em; margin-left: .35em; vertical-align: -.14em; flex: none; }
.rzl-go i svg { width: 100%; height: 100%; }
.rzl-clue { margin: 1.5rem 0 0; font-size: 15px; color: var(--muted); }

/* Fiole en pixels : verre en marée, liquide couleur poisson, bulles blanches */
.rzl-flask { display: block; width: 64px; height: auto; flex: none; color: var(--tide); }
.rzl-flask .g { fill: currentColor; }
.rzl-flask .l { fill: var(--fish); }
.rzl-flask .b { fill: #fff; }
.rzl-flask.is-empty .g { opacity: .45; }
/* Petite animation d'illustration : au survol ou au focus de la fiche, les bulles montent case par case
   (4 px par pas, comme le poisson) ; la fiche elle-même ne bouge pas. Immobiles hors survol. */
@keyframes rzl-bub {
    from { transform: translateY(0); opacity: 1; }
    80% { opacity: 1; }
    to { transform: translateY(calc(var(--r, 4) * -4px)); opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) {
    .rzl-card:hover .rzl-flask .b, .rzl-card:focus-within .rzl-flask .b { animation: rzl-bub 2.4s steps(var(--r, 4), jump-end) var(--d, 0s) infinite; }
}

@media (max-width: 768px) {
    .rzl-bench, .rzl-bench:has(> :nth-child(3)) { grid-template-columns: minmax(0, 1fr); }
    .rzl-flask { width: 48px; }
}
@media (max-width: 560px) {
    .rzl-dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}


/* ================= V4.3, passe de nuit du 06/10 : matrice des réalisations (préfixe rzm-) et MaturIA court (classe rzq) =================
   v3-pages-build.mjs (projectsPage). Repère de Louis : chaque bloc, titre compris, tient dans une fenêtre de 1366 x 650 (en-tête de
   66 px compris). Fonds : haut de page écume, matrice sur blanc (cases écume, pastilles métier blanches : v3-home.css,
   .hm-work:not(.df-sea)), MaturIA sur écume (carte blanche), bandeau final marine. Aucun contour : les cases se distinguent par leur fond.
   L'ancienne présentation (règles .rz et .rzp plus haut, et v3-pages.css) sert au garde-manger (pantryProjects). */

/* en-têtes des deux blocs : même taille que sur l'accueil, marge resserrée */
body.v2 .rzm .hm-h, body.v2 .rzq .hm-h { font-size: clamp(1.9rem, 3vw, 2.5rem); }
/* 07/10 (rythme vertical unique) : plus de marge propre sous les titres de ces blocs (celle de .hm-head, la même partout) */
.rzq .hm-sub { max-width: none; margin-top: .45rem; }

/* La matrice : cinq colonnes ; les lignes (dessin, titre, accroche, ce que ça change, pastilles) restent alignées d'une case à l'autre */
.rzm-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-rows: repeat(5, auto); gap: 0 12px; margin: 0; padding: 0; list-style: none; }
.rzm-case { position: relative; display: grid; grid-template-rows: subgrid; grid-row: span 5; padding: 10px 10px 54px; border-radius: var(--b-r-card); background: var(--sea); transition: background-color .2s; }
.rzm-case:hover { background: var(--b-hover); }
.rzm-case:target { background: var(--tide-soft); } /* arrivée depuis une autre page (realisations#erp...) : la case visée ressort */
.rzm-art { margin-bottom: 12px; border-radius: var(--b-r-card); overflow: hidden; }
.rzm-art .il { display: block; width: 100%; height: auto; }
body.v2 .rzm-case h3 { margin: 0 4px 6px; font: 600 17px/1.25 var(--f-display); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
body.v2 .rzm-case .hm-hook { margin: 0 4px 10px; font: 600 14px/1.4 var(--f-body); color: var(--tide); }
.rzm-gain { margin: 0 4px 12px; font-size: 14px; line-height: 1.45; color: var(--ink); }
.rzm-l { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--muted); }
.rzm-res { display: block; margin-top: 4px; font-weight: 600; }
.rzm-case .hm-tags { align-self: start; gap: 4px; margin: 0 4px; padding: 0; }
.rzm-case .hm-tags li { padding: 3px 7px; font-size: 12px; line-height: 1.35; white-space: nowrap; } /* 07/10 : une pastille ne passe plus sur deux lignes (« Application sur mesure » : 145 px) */

/* Toute la case ouvre la bulle (bouton posé dessus) ; « Le détail » + en est la partie visible, en bas de la case.
   Repère d'interaction en mode « bouton » : surbrillance de la première pastille « Le détail » (data-ping, js/v3.js). */
.rzm-open { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; margin: 0; padding: 0; border: 0; border-radius: inherit; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.rzm-open:focus-visible { outline: 2px solid var(--tide); outline-offset: 3px; }
.rzm-more { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 9px 0 12px; border-radius: var(--b-r-tag); background: #fff; font: 600 13.5px/1 var(--f-body); color: var(--ink); transition: background-color .2s, color .2s; }
.rzm-more i { display: inline-grid; width: 15px; height: 15px; }
.rzm-more svg { width: 100%; height: 100%; }
.rzm-case:hover .rzm-more, .rzm-open:focus-visible .rzm-more { background: var(--ink); color: #fff; }
.rzm-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* petite animation d'illustration au survol (voulue par Louis, 25/09 : ne pas retirer) ; la case elle-même ne bouge pas */
@media (prefers-reduced-motion: no-preference) {
    .rzm-case:is(:hover, :focus-within) .il-bar { animation: il-rise .9s var(--ease-out) both; animation-delay: calc(var(--i) * 45ms); }
}

/* La bulle du détail (popover natif, sans script : clic à côté ou Échap pour fermer) */
.rzd { width: min(880px, calc(100vw - 32px)); max-height: calc(100vh - 48px); margin: auto; padding: clamp(1.1rem, 3vw, 1.75rem) clamp(1.1rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2rem); border: 0; border-radius: var(--b-r-card); background: #fff; color: var(--ink); box-shadow: none; overflow: auto; overscroll-behavior: contain; }
.rzd::backdrop { background: rgba(8, 26, 46, .45); }
.rzd-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rzd-x { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin: -6px -8px -6px 0; padding: 0; border: 0; border-radius: var(--b-r-card); background: var(--sea); color: var(--ink); cursor: pointer; transition: background-color .2s; }
.rzd-x:hover { background: var(--tide-soft); }
.rzd-x:focus-visible { outline: 2px solid var(--tide); outline-offset: 2px; }
.rzd-x svg { width: 20px; height: 20px; }
body.v2 .rzd h3 { margin: 12px 0 4px; font: 600 clamp(1.35rem, 2.2vw, 1.65rem)/1.2 var(--f-display); letter-spacing: -.015em; color: var(--ink); }
body.v2 .rzd .hm-hook { margin: 0 0 18px; font: 600 15px/1.45 var(--f-body); color: var(--tide); }
.rzd .rz-dl { gap: 12px; }
.rzd .rz-foot { margin-top: 16px; }
.rzd .hm-tags { margin: 0; padding: 0; }
body.v2 .rzd .hm-tags li:not(.hm-tag-tech) { background: var(--sea); } /* 07/10 : body.v2 pour passer devant .hm-work:not(.df-sea) (v3-home.css), qui rendait les pastilles blanches sur la bulle blanche */

/* MaturIA court : mêmes éléments que la version d'origine (garde-manger), resserrés ; survol point / zone inchangé.
   Écran : score sur une ligne et quatre axes en deux colonnes ; priorités plus larges que la zone des progrès. */
.rzq .rzp-card { gap: clamp(1.5rem, 3.5vw, 3rem); padding: clamp(1.1rem, 2vw, 1.25rem) clamp(1.25rem, 3.4vw, 2.5rem); border-radius: var(--b-r-card); }
.rzq .rzp-label { margin-bottom: .35rem; font-size: 13.5px; }
body.v2 .rzq .rzp-name { margin: 0 0 .5rem; font-size: clamp(2.1rem, 3.2vw, 2.6rem); }
.rzq .rzp-lead { margin: 0 0 1.1rem; font-size: clamp(1.02rem, 1.25vw, 1.1rem); }
.rzq .rzp-pts { gap: 10px; margin: 0 0 1.35rem; }
.rzq .rzp-pts li { grid-template-columns: 24px minmax(0, 1fr); gap: 12px; font-size: 15px; line-height: 1.45; }
.rzq .rzp-pts b { margin-bottom: 0; font-size: 15.5px; }
.rzq .rzp-pts .rzp-n { width: 24px; height: 24px; font-size: 12px; }
body.v2 .rzq .rzp-cta { min-height: 48px; padding: 11px 20px 11px 22px; font-size: 16.5px; }
.rzq .rzp-bar { padding: 9px 14px; font-size: 13px; }
.rzq .rzp-body { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 10px; padding: 10px; }
.rzq .rzp-z { padding: 10px 12px 12px; }
.rzq .rzp-z > .rzp-n { top: 10px; right: 10px; }
.rzq .rzp-zh { margin-bottom: 6px; }
.rzq .rzp-z1in { grid-template-columns: auto minmax(0, 1fr); gap: 10px clamp(18px, 2.5vw, 32px); }
.rzq .rzp-score { grid-template-columns: auto auto auto; gap: 6px 8px; }
.rzq .rzp-score b { font-size: 38px; }
.rzq .rzp-score em { grid-column: auto; align-self: center; }
.rzq .rzp-bars { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 22px; }
.rzq .rzp-bars li { grid-template-columns: 64px minmax(0, 1fr) 24px; gap: 8px; font-size: 13px; }
.rzq .rzp-recos { gap: 6px; }
.rzq .rzp-recos li { gap: 2px; padding: 6px 10px; }
.rzq .rzp-recos b { font-size: 13.5px; }
.rzq .rzp-delta { margin-bottom: 8px; }
.rzq .rzp-prog li:not(.rzp-next) i { height: calc(var(--h) * .5); }
.rzq .rzp-prog .rzp-next i { height: 22px; }
.rzq .rzp-shot figcaption { margin-top: 6px; font-size: 12.5px; }

/* Sous 1180 px, cinq colonnes seraient trop étroites : la matrice défile de côté (la case suivante dépasse, comme sur l'accueil) */
@media (max-width: 1179px) {
    .rzm-grid { grid-auto-columns: min(300px, 80vw); margin-right: calc(50% - 50vw); padding: 0 calc(50vw - 50%) 6px 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .rzm-grid::-webkit-scrollbar { display: none; }
    .rzm-case { scroll-snap-align: start; }
}
/* Téléphone : MaturIA tient en un écran ; on garde le nom, la phrase, le bouton et la zone du score (les trois points, les
   priorités et les progrès restent sur la page MaturIA, et sur ordinateur) */
@media (max-width: 600px) {
    .rzd { width: calc(100vw - 20px); max-height: calc(100vh - 24px); border-radius: var(--b-r-card); }
    .rzq .rzp-pts, .rzq .rzp-z2, .rzq .rzp-z3, .rzq .rzp-z1 > .rzp-n { display: none; }
    .rzq .rzp-body { grid-template-columns: minmax(0, 1fr); }
    .rzq .rzp-z1in { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .rzq .rzp-zh { margin-right: 0; }
    .rzq .rzp-bars { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .rzq .rzp-lead { margin-bottom: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
    .rzm-case, .rzm-more, .rzd-x { transition: none; }
}

/* ================= 07/10 : nouvelle offre (remise en ordre des documents), case à part de la matrice =================
   v3-pages-build.mjs (offerCell, offerPop). Ce n'est pas une réalisation : elle vient après les cinq cases, avec un écart plus
   large (colonne vide de 8 px, en plus des deux écarts de 12 px), un fond bleu clair (--tide-soft) au lieu de l'écume et la
   pastille « Nouvelle offre » en marine sur le coin du dessin. Mêmes lignes que les autres cases (sous-grille), même bouton
   « Le détail » qui ouvre sa bulle. Pastilles techniques : style unique, clair (v3-home.css). */
@media (min-width: 1180px) {
    .rzm-grid:has(> .rzm-case--offer) { grid-template-columns: repeat(5, minmax(0, 1fr)) 8px minmax(0, 1fr); }
    .rzm-case--offer { grid-column: 7; }
}
.rzm-case--offer { background: var(--tide-soft); }
.rzm-case--offer:hover { background: var(--b-hover); }
/* contrôle final du 07/10 : la pastille quitte le dessin (153 x 72 px à 1366, elle en cachait les deux tiers) et se pose à cheval
   sur le bord haut de la case, alignée sur « Le détail » ; elle laisse passer le clic vers le bouton de la case */
.rzm-new { position: absolute; top: -11px; left: 14px; z-index: 2; padding: 4px 9px; border-radius: var(--b-r-tag); background: var(--ink); color: #fff; font: 600 12px/1.3 var(--f-body); letter-spacing: .01em; white-space: nowrap; pointer-events: none; }
.rz-cat.rz-cat--new { background: var(--ink); color: #fff; }
/* défilement de côté (sous 1180 px) : un peu plus d'écart avant la case de l'offre */
@media (max-width: 1179px) {
    .rzm-case--offer { margin-left: 8px; }
    .rzm-grid:has(> .rzm-case--offer) { padding-top: 12px; } /* place pour la pastille à cheval, dans la zone qui défile */
}

/* ================= 07/10 au soir : « Nos offres et produits » (préfixe rzo-, v3-pages-build.mjs, section #produits) =================
   Louis : l'offre de remise en ordre de la base documentaire quitte la matrice, n'est plus « nouvelle » et rejoint MaturIA.
   Deux cartes blanches sur écume, côte à côte dès 900 px ; leurs rangées sont partagées (sous-grille) : visuel de même hauteur,
   étiquette, nom, phrase, étapes en pastilles, boutons, alignés d'une carte à l'autre. Aucun contour. Au survol, seuls les visuels
   s'animent (barres de l'écran, documents du dessin) : les cartes ne bougent pas. Tout le bloc tient dans 583 px à 1366 x 650. */
.rzo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); column-gap: 16px; margin: 0; padding: 0; list-style: none; }
.rzo-card { display: grid; grid-template-rows: subgrid; grid-row: span 6; row-gap: 0; min-width: 0; padding: 20px 24px 22px; border-radius: var(--b-r-card); background: #fff; }
.rzo-card:target { background: var(--tide-soft); } /* arrivée depuis Données & documents (realisations#offre-documents) : la carte ressort par son fond, sans contour, comme .rzm-case:target */
.rzo-art { display: grid; place-items: center; height: 168px; margin-bottom: 16px; padding: 0 18px; border-radius: var(--b-r-card); background: var(--b-mist); overflow: hidden; }
.rzo-art--il { padding: 0; }
.rzo-art--il .il { display: block; width: auto; max-width: 100%; height: 168px; } /* hauteur explicite : un pourcentage ne se résout pas dans la case de grille */
.rzo-shot { width: 100%; max-width: 470px; margin: 0; }
.rzo-shot .rzp-win { border-radius: var(--b-r-card); box-shadow: none; }
.rzo-shot .rzp-bar { padding: 8px 12px; font-size: 12.5px; }
.rzo-shot .rzp-brand { font-size: 14px; }
.rzo-shot .rzp-co { padding: 2px 9px; font-size: 11.5px; }
.rzo-shot .rzp-body { padding: 8px; }
.rzo-shot .rzp-z { padding: 8px 12px 10px; box-shadow: none; }
.rzo-shot .rzp-zh { margin: 0 0 4px; line-height: 18px; }
.rzo-shot .rzp-z1in { grid-template-columns: auto minmax(0, 1fr); gap: 8px clamp(16px, 2.2vw, 28px); }
.rzo-shot .rzp-score { grid-template-columns: auto auto; gap: 4px 6px; }
.rzo-shot .rzp-score b { font-size: 34px; }
.rzo-shot .rzp-score em { grid-column: 1 / -1; padding: 2px 9px; font-size: 11.5px; }
.rzo-shot .rzp-bars { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
.rzo-shot .rzp-bars li { grid-template-columns: 58px minmax(0, 1fr) 22px; gap: 7px; font-size: 12.5px; }
.rzo-label { display: block; margin-bottom: 4px; font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--tide); }
body.v2 .rzo-name { margin: 0 0 8px; font: 600 clamp(1.35rem, 1.8vw, 1.55rem)/1.2 var(--f-display); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.rzo-lead { margin: 0 0 14px; font-size: 16px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.rzo-steps { display: flex; flex-wrap: wrap; align-self: start; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; }
.rzo-steps li { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 4px; border-radius: var(--b-r-tag); background: var(--sea); font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--ink); white-space: nowrap; }
.rzo-steps span { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: var(--b-r-tag); background: var(--ink); color: #fff; font: 600 11px/1 var(--f-display); }
.rzo-actions { display: flex; flex-wrap: wrap; align-items: center; align-self: end; gap: 10px 16px; }
body.v2 .rzo .rzp-cta { min-height: 48px; padding: 11px 20px 11px 22px; font-size: 16.5px; }
.rzo-more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 0; padding: 0 12px 0 16px; border: 0; border-radius: var(--b-r-tag); background: var(--sea); font: 600 14.5px/1 var(--f-body); color: var(--ink); cursor: pointer; transition: background-color .2s, color .2s; }
.rzo-more i { display: inline-grid; width: 15px; height: 15px; }
.rzo-more svg { width: 100%; height: 100%; }
.rzo-more:hover, .rzo-more:focus-visible { background: var(--ink); color: #fff; }
.rzo-more:focus-visible { outline: 2px solid var(--tide); outline-offset: 2px; }
@keyframes rzo-fill { from { transform: scaleX(.08); } }
@media (prefers-reduced-motion: no-preference) {
    .rzo-card--docs:is(:hover, :focus-within) .il-bar { animation: il-rise .9s var(--ease-out) both; animation-delay: calc(var(--i) * 45ms); }
    .rzo-card--maturia:is(:hover, :focus-within) .rzp-bars i::after { animation: rzo-fill .8s var(--ease-out) both; }
}
@media (max-width: 899px) {
    .rzo-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 14px; }
    .rzo-card { grid-row: auto; grid-template-rows: none; }
}
@media (max-width: 600px) {
    .rzo-card { padding: 14px 14px 20px; border-radius: var(--b-r-card); }
    .rzo-art { height: auto; min-height: 130px; padding: 12px; }
    .rzo-art--il { padding: 0; }
    .rzo-art--il .il { width: 100%; height: auto; }
    /* écran réduit : le score à gauche, les quatre axes en colonne à droite (moins haut que les règles du téléphone de v3-pages.css) */
    .rzo-shot .rzp-page { display: none; }
    .rzo-shot .rzp-z1in { grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; }
    .rzo-shot .rzp-score { grid-template-columns: auto auto; }
    .rzo-shot .rzp-score b { font-size: 30px; }
    .rzo-shot .rzp-score em { grid-column: 1 / -1; margin-left: 0; }
    .rzo-shot .rzp-bars { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .rzo-shot .rzp-bars li { grid-template-columns: 62px minmax(0, 1fr) 22px; }
    .rzo-steps li { white-space: normal; }
}

/* Garde-manger : la case « Nouvelle offre » seule dans sa grille (07/10 au soir), à sa largeur d'origine ; place pour la pastille à cheval */
.rzm-grid.rzm-grid--solo, .rzm-grid.rzm-grid--solo:has(> .rzm-case--offer) { grid-template-columns: minmax(0, 230px); padding-top: 12px; }
.rzm-grid--solo > .rzm-case--offer { grid-column: auto; margin-left: 0; }
/* Garde-manger (09/10) : les deux grandes cartes du 07/10 au soir peuvent tomber sur une section blanche (alternance du garde-manger) :
   cartes écume, puis pastilles, bouton « Le détail » et fond des visuels en blanc */
.rzo:not(.df-sea) .rzo-card { background: var(--sea); }
.rzo:not(.df-sea) .rzo-steps li, .rzo:not(.df-sea) .rzo-more, .rzo:not(.df-sea) .rzo-art { background: #fff; }


/* ================= 09/10 (Louis : « avoir des cases un peu plus petites ») : « Nos offres et produits » en trois petites cartes =================
   v3-pages-build.mjs (section #produits, préfixe rzo2-). Cartes blanches sur écume, côte à côte dès 900 px, rangées partagées
   (sous-grille) : pictogramme et nature, nom, étiquette, phrase, bouton, alignés d'une carte à l'autre. Aucun contour. Au survol, seul
   le pictogramme change de couleur : la carte ne bouge pas. Mesuré à 1366 x 650 : le bloc tient dans 583 px (voir le compte rendu). */
.rzo2-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); column-gap: 14px; margin: 0; padding: 0; list-style: none; }
.rzo2-card { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 0; min-width: 0; padding: 18px 22px 22px; border-radius: var(--b-r-card); background: #fff; }
.rzo2-card:target { background: var(--tide-soft); } /* arrivée depuis Données & documents (realisations#offre-documents) : la carte ressort par son fond */
.rzo2-top { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.rzo2-ic { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: var(--b-r-card); background: var(--sea); color: var(--tide); transition: background-color .25s, color .25s; }
.rzo2-ic svg { width: 21px; height: 21px; }
.rzo2-card:hover .rzo2-ic, .rzo2-card:focus-within .rzo2-ic { background: var(--ink); color: #fff; }
.rzo2-kind { padding: 3px 10px; border-radius: var(--b-r-tag); background: var(--sea); font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--tide); white-space: nowrap; }
.rzo2-card:target .rzo2-kind, .rzo2-card:target .rzo2-ic { background: #fff; }
/* « Le détail » de l'offre documentaire : en haut à droite de la carte (même bouton que les grandes cartes, plus petit) */
.rzo-more.rzo2-more { min-height: 40px; margin-left: auto; padding: 0 10px 0 14px; font-size: 13.5px; }
body.v2 .rzo2-name { margin: 0 0 4px; font: 600 clamp(1.2rem, 1.6vw, 1.38rem)/1.2 var(--f-display); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.rzo2-label { margin: 0 0 10px; font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--tide); }
.rzo2-lead { margin: 0 0 18px; font-size: 15px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.rzo2-actions { display: flex; flex-wrap: wrap; align-items: center; align-self: end; gap: 8px 12px; }
body.v2 .rzo2 .rzp-cta { min-height: 44px; padding: 10px 16px 10px 18px; font-size: 15.5px; }
@media (max-width: 899px) {
    .rzo2-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 12px; }
    .rzo2-card { display: flex; flex-direction: column; grid-row: auto; }
    .rzo2-actions { margin-top: auto; }
}
@media (max-width: 600px) {
    .rzo2-card { padding: 16px 16px 18px; border-radius: var(--b-r-card); }
    .rzo-more.rzo2-more { min-height: 44px; }
}


/* ================= 09/10 (Louis) : catalogue d'applications (section #catalogue, préfixe rzc-) =================
   v3-pages-build.mjs (idées de v44-sectors-data.mjs) et js/v5-projects.js (filtres à deux dimensions, repli à douze idées).
   Section blanche entre « Nos offres et produits » (écume) et le bandeau final (marine) : cartes et boutons de filtre en écume,
   filtre choisi en marine, pastilles et étiquette « Idée d'application » en blanc. Aucun contour. Au survol d'une carte : fond un peu
   plus soutenu et flèche du lien qui avance ; la carte ne bouge pas. Grille dense : quatre cartes par rangée à 1366 px, trois vers
   1000 px, une seule sur téléphone. Ce bloc dépasse forcément un écran de 14 pouces (filtres sur quatre lignes, trois rangées de cartes). */
.rzc-bar { display: grid; gap: 10px; margin: 0 0 24px; }
/* 09/10 (relecture) : sans script, toutes les idées sont visibles ; les filtres (inertes) et leur consigne pour lecteurs d'écran
   disparaissent (classe js posée sur <html> par le script en ligne du <head>) */
html:not(.js) .rzc-bar, html:not(.js) .rzc .df-cue-sr { display: none; }
.rzc-filters { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); align-items: start; column-gap: 12px; }
.rzc-fl { padding-top: 9px; font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--muted); }
.rzc-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.rzc-btns button { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; margin: 0; padding: 0 8px 0 13px; border: 0; border-radius: var(--b-r-tag); background: var(--sea); font: 600 14px/1.2 var(--f-body); color: var(--ink); white-space: nowrap; cursor: pointer; transition: background-color .2s, color .2s, opacity .2s; }
.rzc-btns button:hover { background: var(--tide-soft); }
.rzc-btns button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.rzc-btns button:focus-visible { outline: 2px solid var(--tide); outline-offset: 2px; }
/* aucun résultat avec l'autre filtre : texte atténué, toujours cliquable. 09/10 (relecture) : couleur atténuée (environ 6:1 sur
   écume) au lieu d'opacity: .5 (environ 3:1, sous le minimum de 4,5:1) */
.rzc-btns button.is-zero:not([aria-pressed="true"]) { color: var(--muted); }
.rzc-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--b-r-tag); background: #fff; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.rzc-btns button[aria-pressed="true"] .rzc-count { background: rgba(255, 255, 255, .16); color: #fff; }

.rzc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.rzc-card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 16px 16px 10px; border-radius: var(--b-r-card); background: var(--sea); transition: background-color .2s; }
.rzc-card[hidden] { display: none !important; }
.rzc-card:hover { background: var(--b-hover); }
.rzc-card.is-in { animation: rz-in .45s var(--ease-out) both; } /* même apparition que les anciennes fiches filtrées (v3-pages.css) */
.rzc-tag { margin: 0 0 10px; padding: 3px 9px; border-radius: var(--b-r-tag); background: #fff; font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--tide); }
body.v2 .rzc-card h3 { margin: 0 0 6px; font: 600 16.5px/1.25 var(--f-display); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.rzc-p { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.rzc-pills { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; padding: 0; list-style: none; }
.rzc-pills li { padding: 3px 8px; border-radius: var(--b-r-tag); background: #fff; font-size: 12px; font-weight: 600; line-height: 1.35; color: var(--ink); }
/* lien en ligne (pas en flex) : un nom d'expertise sur deux lignes garde sa flèche juste après le dernier mot */
.rzc-go { display: inline-block; margin-top: auto; padding: 7px 0; font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--tide); text-decoration: none; }
.rzc-go:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.rzc-go i { display: inline-block; width: 15px; height: 15px; margin-left: 6px; vertical-align: -3px; transition: transform .2s; }
.rzc-nw { white-space: nowrap; } /* dernier mot et flèche ensemble */
.rzc-go svg { width: 100%; height: 100%; }
.rzc-card:hover .rzc-go i, .rzc-go:focus-visible i { transform: translateX(3px); }
.rzc-empty { margin: 0; padding: 18px 20px; border-radius: var(--b-r-card); background: var(--sea); font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.rzc-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 20px; }
.rzc-more { display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0 20px; border: 0; border-radius: var(--b-r-tag); background: var(--ink); color: #fff; font: 600 15px/1.2 var(--f-body); cursor: pointer; transition: background-color .2s; }
.rzc-more:hover { background: var(--tide); }
.rzc-more:focus-visible { outline: 2px solid var(--tide); outline-offset: 2px; }
.rzc-more[hidden] { display: none; }
.rzc-cta { margin-left: auto; font-size: 15.5px; }
/* 09/10 (relecture) : idées sorties du catalogue, au garde-manger (section .rzc-gm, pantryProjects) ; sur écume, cartes blanches et
   étiquettes écume (sur blanc, mêmes cartes que la page) */
.rzc-gm.df-sea .rzc-card { background: #fff; }
.rzc-gm.df-sea :is(.rzc-tag, .rzc-pills li) { background: var(--sea); }
/* Téléphone : libellé au-dessus de chaque groupe, boutons sur une ligne qui défile de côté (le bouton suivant dépasse, comme la
   matrice des réalisations) ; boutons et liens de 44 px de haut */
@media (max-width: 600px) {
    .rzc-filters { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
    .rzc-fl { padding-top: 0; }
    .rzc-btns { flex-wrap: nowrap; margin-right: calc(50% - 50vw); padding: 2px calc(50vw - 50%) 4px 2px; overflow-x: auto; scrollbar-width: none; }
    .rzc-btns::-webkit-scrollbar { display: none; }
    .rzc-btns button { flex: none; min-height: 44px; }
    .rzc-go { padding: 12px 0; }
    .rzc-cta { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .rzc-card, .rzc-btns button, .rzc-go i, .rzc-more, .rzo2-ic { transition: none; }
    .rzc-card.is-in { animation: none; }
}

/* ================= 10/10 (Louis : « fusionner les trois et juste faire nos offres et produits de manière claire ») =================
   Section unique de la page (#catalogue, classe rzx ; v3-pages-build.mjs, données .claude/v45-offers-data.mjs, script
   js/v5-projects.js). Section blanche entre le haut de page (écume) et le bandeau final (marine) : cartes en écume, aucun
   contour. Deux parties : « Pour qui ? » (préfixe rzw-, trois grandes cartes illustrées qui filtrent) puis les cartes par catégorie
   (préfixe rzx-). Animations au survol seulement DANS les cartes (dessins, flèche) : les cartes ne bougent pas.
   10/10 soir (Louis : « c'est notre offre », « qu'on le divise en trois ») : la page s'appelle « Notre offre ». « Pour qui ? » est le
   titre de la section (h2 du modèle commun, .hm-head) ; les types de métier passent en rangées, une par type. */

/* ---------- « Pour qui ? » ---------- */
/* sans script, le choix ne filtrerait rien : toutes les cartes sont visibles, les trois cartes « Pour qui ? » sont masquées.
   10/10 soir (relecture) : le titre « Pour qui ? » n'est plus retiré (display: none), seulement caché à l'écran : c'est le seul h2 de la
   section (cible d'aria-labelledby de #catalogue) ; sans lui, le plan de titres passait de h1 à h3 pour les lecteurs d'écran. */
html:not(.js) .rzw { display: none; }
html:not(.js) .rzw-head { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* 10/10, série 3 (relecture) : sans script, « Pour qui ? » est masqué et le premier bloc de cartes ouvre la section : sa marge haute
   s'ajoutait au retrait de la section (double marge, contraire au rythme vertical unique). */
html:not(.js) .rzx-blocks > :first-child { margin-top: 0; }
.rzw { margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); }
/* 10/10 soir : plus de petit titre .rzw-h (« Pour qui ? » en gris sous « Nos offres et produits ») : c'est le h2 de la section */
.rzw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
/* 14/10 (lot 2, direction « premium sobre ») : trois choix typographiques, sans dessin (scènes WHO_ILLUS, poissons, fenêtres qui
   s'allument, fumée), sans coche ronde ni repère. Nom en 600 de 20 px, public dessous. Le choix actif est marine, avec un filet
   #6FB8E8 de 2 px en tête (indicateur d'état, pas un cadre). Pas de numéros : ces choix n'ont pas d'ordre. Règles des dessins
   (.rzw-art, .w-*, @keyframes rzw-*) et de la coche (.rzw-tick) retirées : historique git. */
/* 14/10 soir (Louis : « on ne sait même pas que c'est sélectionnable », « dommage d'avoir perdu les petits dessins ») : une consigne
   écrite au-dessus (.rzw-cue), un pictogramme au trait bleu en tête de chaque choix (.rzw-art, WHO_ICON de v3-pages-build.mjs, blanc
   bleuté sur marine quand le choix est actif), une marque d'état en haut à droite (.rzw-mark : rond vide au repos, rond plein coché
   quand le choix est actif). « Indépendants et TPE » est présélectionné par le script. Avant : nom et public seuls,
   grid-template-rows: auto 1fr; align-content: start. */
.rzw-cue { margin: 0 0 12px; font: 500 15.5px/1.4 var(--f-body); color: var(--b-text); }
.rzw-card {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "art mark" "txt txt"; align-items: start; align-content: start; row-gap: 14px; min-width: 0; margin: 0; padding: 22px 24px;
    border: 0; border-radius: var(--b-r-card); background: var(--b-mist); box-shadow: inset 0 2px 0 transparent; color: var(--ink);
    font: inherit; text-align: left; cursor: pointer;
    transition: background-color .25s var(--ease-out), color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.rzw-card:hover { background: var(--b-hover); }
.rzw-card:focus-visible { outline: 2px solid var(--b-accent); outline-offset: 3px; }
.rzw-card[aria-pressed="true"] { background: var(--b-night); box-shadow: inset 0 2px 0 var(--b-accent-dark); color: #fff; }
.rzw-art { grid-area: art; display: block; width: 46px; height: 46px; color: var(--b-accent); transition: color .25s var(--ease-out); }
.rzw-art svg { display: block; width: 100%; height: 100%; }
.rzw-card[aria-pressed="true"] .rzw-art { color: var(--b-accent-dark); }
.rzw-txt { grid-area: txt; display: block; min-width: 0; }
.rzw-mark { grid-area: mark; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px var(--b-faint); color: var(--b-night); transition: background-color .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.rzw-mark svg { width: 13px; height: 13px; opacity: 0; transition: opacity .2s; }
.rzw-card:hover .rzw-mark { box-shadow: inset 0 0 0 1.5px var(--b-accent); }
.rzw-card[aria-pressed="true"] .rzw-mark { background: var(--b-accent-dark); box-shadow: none; }
.rzw-card[aria-pressed="true"] .rzw-mark svg { opacity: 1; }
.rzw-name { display: block; margin: 0 0 4px; font: 600 20px/1.25 var(--f-display); letter-spacing: -.012em; }
.rzw-who { display: block; margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--b-text); transition: color .25s var(--ease-out); }
.rzw-card[aria-pressed="true"] .rzw-who { color: var(--b-on-dark-2); }

/* ---------- Les cartes, par catégorie ----------
   10/10, série 3 : trois blocs dans .rzx-blocks (« Pour toutes les entreprises », « Pilotage et gestion », les types de métier),
   déplacés par le script selon le choix « Pour qui ? ». .rzx-blocks reste un bloc simple : la marge haute de son premier enfant se
   fond avec la marge basse de « Pour qui ? », comme avant, quel que soit le bloc placé en tête. */
.rzx-group { margin-top: clamp(1.5rem, 2.6vw, 2rem); }
.rzx-group[hidden] { display: none; }
.rzx-gh { margin: 0 0 12px; }
.rzx-ght { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
body.v2 .rzx-gh h3 { margin: 0; font: 600 clamp(1.2rem, 1.7vw, 1.4rem)/1.25 var(--f-display); letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.rzx-gh p { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--b-faint); } /* 14/10 (lot 2) : public du bloc en gris, plus en bleu */
.rzx-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
/* 14/10 soir (Louis : « ce n'est pas exhaustif », « vous ne trouvez pas ce que vous cherchez ? discutons-en ») : ligne sous les
   trois choix (marge basse négative : elle se rapproche du premier bloc, dont la marge haute la traverse) et case marine après
   tous les blocs, traitée comme la case 9 de l'accueil (marine, titre blanc, phrase #A9BBCC, flèche blanche, survol #0F2740),
   sur toute la largeur. Avant : rien. */
.rzx-sample { margin: 0 0 calc(-1 * clamp(.5rem, 1vw, .75rem)); font-size: 15px; line-height: 1.5; color: var(--b-text); }
.rzx-else { display: block; margin-top: clamp(1.5rem, 2.6vw, 2rem); padding: 22px 24px; border-radius: var(--b-r-card); background: var(--b-night); color: #fff; text-decoration: none; transition: background-color .2s; }
.rzx-else:hover, .rzx-else:focus-visible { background: var(--b-night-2); color: #fff; }
.rzx-else:focus-visible { outline: 2px solid var(--tide); outline-offset: 2px; }
body.v2 .rzx-else h3 { margin: 0 0 6px; font: 600 clamp(1.2rem, 1.7vw, 1.4rem)/1.25 var(--f-display); letter-spacing: -.015em; color: #fff; text-wrap: balance; }
.rzx-else p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--b-on-dark-2); }
.rzx-else-go { display: inline-grid; width: 18px; height: 18px; margin-left: 10px; color: #fff; vertical-align: -2px; }
.rzx-else-go svg { display: block; width: 100%; height: 100%; }
/* Types de métier. 10/10 soir (Louis : « tu fais par type ») : une rangée par type. Le nom du type à gauche, ses cartes à droite,
   sur la même grille de quatre colonnes que les autres catégories : les cartes gardent la même largeur d'un bout à l'autre de la
   page. Le nom est calé sur le haut du texte des cartes (même retrait haut de 14 px). */
.rzx-trades { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: clamp(1.1rem, 2vw, 1.5rem); margin-top: clamp(1.5rem, 2.6vw, 2rem); }
.rzx-trades .rzx-group { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 12px; align-items: start; margin: 0; min-width: 0; }
.rzx-trades .rzx-group[hidden] { display: none; }
/* 10/10 (relecture) : choix « PME » ou « ETI et groupes » : tous les types sont masqués, le conteneur aussi (sa marge haute
   s'ajoutait à l'écart suivant) */
.rzx-trades:not(:has(> .rzx-group:not([hidden]))) { display: none; }
.rzx-trades .rzx-gh { margin: 0; padding: 14px 8px 0 0; }
.rzx-trades .rzx-ght { display: block; }
.rzx-trades .rzx-gh p { margin-top: 4px; }
/* sans script : les cartes d'un type en grille de trois colonnes, toutes visibles */
.rzx-trades .rzx-grid { grid-column: 2 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* 10/10, série 3 (Louis : « garder une ligne par type de commerce indépendant, et éventuellement tu mets une flèche : en gros un
   carrousel par type de business ») : avec script, la liste d'un type tient sur UNE ligne qui défile de côté (défilement natif,
   accrochage carte par carte, glissement au doigt). Trois cartes visibles sur ordinateur, de la largeur des cartes des autres
   catégories ; les suivantes arrivent par les deux boutons ronds placés sous le nom du type. Aucun défilement automatique.
   Marge négative et retrait de 4 px : le cadre de focus d'une carte n'est pas rogné par la zone qui défile.
   min-width: 0 : sans lui, la liste s'élargirait à la somme de ses cartes au lieu de défiler. */
html.js .rzx-trades .rzx-grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 24px) / 3); min-width: 0;
    margin: -4px; padding: 4px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 4px;
    scrollbar-width: none;
}
html.js .rzx-trades .rzx-grid::-webkit-scrollbar { display: none; }
html.js .rzx-trades .rzx-card { scroll-snap-align: start; }
/* boutons précédent et suivant (flèches dessinées, pas de caractère) : rendus cachés (attribut hidden), montrés par le script quand
   la ligne dépasse ; en bout de course, aria-disabled (le bouton garde le focus) */
.rzx-nav { display: flex; gap: 6px; margin-top: 12px; }
.rzx-nav[hidden] { display: none; }
.rzx-nav button { display: grid; place-items: center; flex: none; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: var(--b-r-card); background: var(--sea); color: var(--ink); cursor: pointer; transition: background-color .2s, color .2s, opacity .2s; }
/* 10/10, série 3 (relecture) : le bouton utilisable passe en marine. En écume sur fond blanc, le rond ne se voyait presque pas
   (contraste de 1,12 pour 1), alors que la carte suivante est entièrement hors cadre sur ordinateur : seul indice qu'il y en a
   d'autres. Règle « ce qui se clique doit se voir ». Le bouton en bout de course reste en écume, estompé. */
.rzx-nav button:not([aria-disabled="true"]) { background: var(--ink); color: #fff; }
.rzx-nav button:hover:not([aria-disabled="true"]) { background: var(--tide); color: #fff; }
.rzx-nav button[aria-disabled="true"] { opacity: .4; cursor: default; }
.rzx-nav button:focus-visible { outline: 2px solid var(--tide); outline-offset: 2px; }
.rzx-nav svg { width: 18px; height: 18px; }

/* 10/10, série 3 : position relative, pour le bouton « En savoir plus » étendu à toute la carte (plus bas).
   14/10 (lot 2, direction « premium sobre ») : carte à plat, fond seul, rayon 6 ; au survol, le titre passe au bleu, rien ne bouge. */
.rzx-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 18px 20px 14px; border-radius: var(--b-r-card); background: var(--b-mist); transition: background-color .2s; }
.rzx-card[hidden] { display: none !important; }
.rzx-card:hover { background: var(--b-hover); }
.rzx-card:target { background: var(--b-hover); } /* arrivée depuis une autre page (notre-offre#budget, #offre-documents...) : la carte ressort par son fond */
.rzx-card.is-in { animation: rz-in .45s var(--ease-out) both; } /* même apparition que les anciennes fiches filtrées (v3-pages.css) */
/* statut. 14/10 (lot 2) : une catégorie en petites capitales grises, sans pastille ; la preuve (réalisation client, produit DataFish)
   en marine, précédée d'un carré plein de 7 px en #1F6FA8, le pixel du poisson. Avant : pastilles marine, marée, bleu clair et
   blanche. Reprise telle quelle dans la fenêtre de détail. */
.rzx-kind { margin: 0 0 10px; 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); }
.rzx-kind--case, .rzx-kind--product { display: inline-flex; align-items: center; gap: 8px; color: var(--b-night); }
.rzx-kind--case::before, .rzx-kind--product::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--b-accent); }
body.v2 .rzx-card h4 { margin: 0 0 6px; font: 600 17px/1.25 var(--f-display); letter-spacing: -.012em; color: var(--ink); text-wrap: balance; transition: color .2s ease; }
.rzx-card:hover h4 { color: var(--b-accent); }
.rzx-p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.5; color: var(--b-text); text-wrap: pretty; }
/* termes techniques, chacun relié à son explication (glossaire, ou page de l'expertise pour Application et Site web).
   Posés au-dessus de la zone cliquable de la carte (z-index) : ils restent des liens, avec leur explication au survol.
   14/10 (lot 2) : texte gris de 12,5 px dans sa casse d'origine, séparé par l'espace ; plus de pastille. */
.rzx-pills { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 10px; padding: 0; list-style: none; }
.rzx-pills a { position: relative; z-index: 1; display: inline-block; padding: 0; border-radius: 0; background: none; font: 500 12.5px/1.4 var(--f-body); letter-spacing: .01em; color: var(--b-faint); text-decoration: none; transition: color .2s; }
.rzx-pills a:hover, .rzx-pills a:focus-visible { background: none; color: var(--b-accent); text-decoration: underline; text-underline-offset: 3px; }
/* 14/10 soir (Louis : les étiquettes portent le nom exact des expertises, « Applications & sites web sur mesure ») : deux noms
   complets ne tiennent plus sur une ligne et passent l'un sous l'autre. La ligne de chaque étiquette prend la hauteur de son texte
   (12,5 px), pas celle du texte courant (18 px, interligne 28,8 px), sinon 15 px de vide entre deux noms. Avant : rien. */
.rzx-pills li { font-size: 12.5px; line-height: 1.4; }
.rzx-act { margin-top: auto; }
/* 10/10, série 3 (Louis : « que chacune des tuiles soit cliquable ») : « En savoir plus » ouvre la fenêtre de détail. Le bouton
   reste dans le texte de la carte (ce qui se clique se voit, sur téléphone aussi) et sa zone cliquable couvre toute la carte
   (::after). Montré seulement quand le script a pu préparer la fenêtre (classe is-live sur la section) : sans script, la carte
   garde son titre, sa phrase et ses pastilles, sans bouton mort.
   14/10 (lot 2) : un lien simple, bleu, souligné d'un pixel décalé de 5 px (marine au survol de la carte), sans pastille ; le « + »
   reste et fait un quart de tour au survol ; la carte ne bouge pas. */
.rzx-open { display: none; }
.rzx.is-live .rzx-open { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin: 0 0 2px; padding: 0; border: 0; border-radius: 0; background: none; font: 600 14px/1 var(--f-body); color: var(--b-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; cursor: pointer; transition: color .2s; }
.rzx-open::after { content: ""; position: absolute; inset: 0; border-radius: var(--b-r-card); }
.rzx-open i { display: inline-grid; width: 15px; height: 15px; transition: transform .3s var(--ease-out); }
.rzx-open svg { width: 100%; height: 100%; }
.rzx-card:hover .rzx-open, .rzx-open:focus-visible { background: none; color: var(--b-night); }
.rzx-card:hover .rzx-open i, .rzx-open:focus-visible i { transform: rotate(90deg); }
.rzx-open:focus-visible { outline: none; }
.rzx-open:focus-visible::after { outline: 2px solid var(--b-accent); outline-offset: 2px; }
/* « Voir plus (n) » d'une catégorie : rectangle net sur brume (contrôle de la page), marine au survol */
.rzx-more { display: inline-flex; align-items: center; justify-self: start; align-self: start; min-height: 40px; margin: 12px 0 0; padding: 0 16px; border: 0; border-radius: var(--b-r-card); background: var(--b-mist); font: 600 14px/1.2 var(--f-body); color: var(--ink); cursor: pointer; transition: background-color .2s, color .2s; }
.rzx-more:hover { background: var(--b-night); color: #fff; }
.rzx-more:focus-visible { outline: 2px solid var(--b-accent); outline-offset: 2px; }
.rzx-more[hidden] { display: none; }

/* ---------- 10/10, série 3 : la fenêtre de détail (dialog natif .rzy ; contenu : v3-pages-build.mjs, ouverture : js/v5-projects.js) ----------
   Une seule fenêtre pour toutes les cartes. Fond blanc, blocs en écume, aucun contour. Sur ordinateur, deux colonnes : à gauche le
   dessin, puis le rendez-vous et les expertises ; à droite le texte, puis les pastilles expliquées. Métiers du droit et de la santé
   (classe has-host posée par le script) : la colonne de droite porte la ligne « Hébergement et modèle », les pastilles passent à
   gauche, sous le dessin. Ainsi chaque fenêtre tient dans 1366 x 650 sans défiler (mesuré carte par carte, en français
   et en anglais). Sur téléphone : le dessin, le texte, les pastilles, puis le rendez-vous. La fenêtre ne
   dépasse jamais l'écran : son contenu défile en dedans, la croix reste en haut à droite. Derrière, la page ne défile pas
   (classe rzy-lock posée par le script ; la place de la barre de défilement est gardée, la page ne saute pas de côté). */
html.rzy-lock { overflow: hidden; scrollbar-gutter: stable; }
.rzy { width: min(920px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0; border-radius: var(--b-r-card); background: #fff; color: var(--ink); box-shadow: none; overflow: auto; overscroll-behavior: contain; }
/* 14/10 soir (capture de Louis : la fenêtre s'affichait collée en bas de l'écran) : depuis que la zone des dessins (.rzy-arts) n'est
   plus rendue, la fenêtre est le dernier enfant de .container, et la règle commune « .df-section > .container > :last-child
   { margin-bottom: 0 } » (v3.css, plus forte que .rzy) lui retirait sa marge basse : la marge haute « auto » prenait toute la place.
   Position et marges redites ici avec un sélecteur plus fort : centrée dans la fenêtre du navigateur, quel que soit le défilement. */
.df-section > .container > dialog.rzy { position: fixed; inset: 0; margin: auto; }
.rzy::backdrop { background: rgba(8, 26, 46, .45); }
.rzy-in { padding: clamp(1rem, 2.6vw, 1.6rem); }
/* la croix : collée en haut à droite pendant que le contenu défile ; marge basse négative, elle ne prend pas de hauteur */
.rzy-x { position: sticky; top: 12px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; margin: 0 0 -44px auto; padding: 0; border: 0; border-radius: var(--b-r-card); background: var(--sea); color: var(--ink); cursor: pointer; transition: background-color .2s; }
.rzy-x:hover { background: var(--tide-soft); }
.rzy-x:focus-visible { outline: 2px solid var(--tide); outline-offset: 2px; }
.rzy-x svg { width: 20px; height: 20px; }
/* 14/10 (lot 2, direction « premium sobre ») : plus de dessin dans la fenêtre (SHOW_DETAIL_ART de v3-pages-build.mjs ; règles du
   dessin, .rzy-art et ses aplats il-*, dans l'historique git, commit 41569f3). Deux colonnes : à gauche le rendez-vous, sa précision
   et les expertises (et, pour le droit et la santé, les termes expliqués) ; à droite le texte, puis les termes expliqués. */
.rzy-body { display: grid; grid-template-columns: 268px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 16px clamp(1.1rem, 2.8vw, 1.9rem); }
.rzy-main { grid-column: 2; grid-row: 1; min-width: 0; }
.rzy-pills { grid-column: 2; grid-row: 2; }
.rzy-foot { grid-column: 1; grid-row: 1 / span 2; padding-top: 2px; }
/* droit et santé : termes expliqués et rendez-vous à gauche ; le texte et la ligne « Hébergement et modèle » sur toute la hauteur à droite */
.rzy-body.has-host .rzy-main { grid-row: 1 / span 2; }
.rzy-body.has-host .rzy-foot { grid-row: 1; }
.rzy-body.has-host .rzy-pills { grid-column: 1; grid-row: 2; }
/* 21/10 : vidéo d'une réalisation (carte Plateforme d'entreprise) : colonne de gauche, au-dessus du rendez-vous, qui descend d'une ligne.
   Carrée comme le lecteur de l'accueil ; marine sous l'affiche le temps du chargement. */
.rzy-media { grid-column: 1; grid-row: 1; align-self: start; }
.rzy-body:has(.rzy-media) .rzy-foot { grid-row: 2; }
.rzy-video { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--b-r-card); background: var(--b-night-2); object-fit: cover; }
.rzy-media-p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--b-text); }
/* le statut et le titre laissent à droite la place de la croix (44 px + écart) */
.rzy-top { display: flex; align-items: center; margin: 0 56px 8px 0; }
.rzy-top .rzx-kind { margin: 0; }
body.v2 .rzy-h { margin: 0 0 6px; padding-right: 56px; font: 600 clamp(1.35rem, 2.2vw, 1.65rem)/1.2 var(--f-display); letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
body.v2 .rzy .hm-hook { margin: 0; font: 500 15.5px/1.45 var(--f-display); color: var(--b-night); }
.rzy-lead { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
/* les trois lignes : au quotidien, relié à, qui s'en sert (ou le besoin, ce qu'on a construit, ce que ça change) */
.rzy-dl { display: grid; gap: 6px; margin: 12px 0 0; }
.rzy-dl > div { padding: 10px 14px 11px; border-radius: var(--b-r-card); background: var(--b-mist); }
.rzy-dl dt { margin-bottom: 2px; font: 600 11.5px/1.4 var(--f-body); letter-spacing: .09em; text-transform: uppercase; color: var(--b-faint); }
.rzy-dl dd { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--ink); text-wrap: pretty; }
.rzy .rz-quote { margin-top: 10px; }
/* « Hébergement et modèle » (métiers du droit et de la santé) : le seul bloc marine de la fenêtre */
.rzy-host { margin-top: 6px; padding: 10px 14px 11px; border-radius: var(--b-r-card); background: var(--b-night); color: #fff; }
.rzy-host p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--b-on-dark-2); }
.rzy-host .rzy-host-h { margin-bottom: 2px; font: 600 11.5px/1.4 var(--f-body); letter-spacing: .09em; text-transform: uppercase; color: var(--b-accent-dark); }
/* rendez-vous (lien vers la page Contact), sa précision, puis les expertises liées */
.rzy-foot { align-self: start; display: grid; justify-items: start; gap: 8px; }
.rzy-foot .cta-button { white-space: nowrap; } /* 14/10 : « Prendre rendez-vous » sur une ligne dans la colonne de 268 px */
.rzy-note { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--b-text); }
.rzy .rz-exp { margin-top: 4px; }
/* les termes, chacun suivi de son explication simple, sur la même ligne. 14/10 (lot 2) : le terme en lien marine souligné, sans pastille */
.rzy-pills { align-self: start; display: grid; gap: 7px; margin: 0; }
.rzy-pills > div { font-size: 13.5px; line-height: 1.5; color: var(--b-text); }
.rzy-pills dt { display: inline; margin: 0 6px 0 0; }
.rzy-pills dt a { display: inline; padding: 0; border-radius: 0; background: none; font-size: 13.5px; font-weight: 600; line-height: 1.5; color: var(--b-night); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .2s; }
.rzy-pills dt a:hover, .rzy-pills dt a:focus-visible { background: none; color: var(--b-accent); }
.rzy-pills dd { display: inline; margin: 0; }
@keyframes rzy-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes rzy-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
    /* la fenêtre arrive en fondu */
    .rzy[open] { animation: rzy-in .28s var(--ease-out) both; }
    .rzy[open]::backdrop { animation: rzy-fade .28s ease both; }
}

/* Tablette : trois cartes par rangée ; types de métier : le nom repasse au-dessus de ses cartes (10/10 soir), les boutons du
   carrousel à sa droite (série 3) */
@media (max-width: 1100px) {
    .rzx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rzx-trades { row-gap: clamp(1.5rem, 2.6vw, 2rem); }
    .rzx-trades .rzx-group { grid-template-columns: minmax(0, 1fr); }
    .rzx-trades .rzx-gh { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 0 0 12px; padding: 0; }
    .rzx-trades .rzx-ght { display: flex; min-width: 0; }
    .rzx-trades .rzx-gh p { margin-top: 0; }
    .rzx-trades .rzx-grid { grid-column: auto; }
    .rzx-nav { margin-top: 0; }
    .rzx-nav button { width: 44px; height: 44px; }
}
@media (max-width: 800px) {
    .rzx-grid, .rzx-trades .rzx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* carrousel : deux cartes et le début de la troisième */
    html.js .rzx-trades .rzx-grid { grid-template-columns: none; grid-auto-columns: calc((100% - 24px) / 2.2); }
    .rzw-grid { gap: 10px; }
    .rzw-card { padding: 18px 18px; }
    .rzw-name { font-size: 18px; }
    .rzw-who { font-size: 13.5px; }
    /* fenêtre de détail : une colonne (texte, termes expliqués, rendez-vous) */
    .rzy-body, .rzy-body.has-host { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
    .rzy-body .rzy-media, .rzy-body .rzy-main, .rzy-body .rzy-pills, .rzy-body .rzy-foot, .rzy-body:has(.rzy-media) .rzy-foot,
    .rzy-body.has-host .rzy-main, .rzy-body.has-host .rzy-pills, .rzy-body.has-host .rzy-foot { grid-column: 1; grid-row: auto; }
    .rzy-top { margin: 0 0 6px; }
    body.v2 .rzy-h { padding-right: 0; }
}
/* Téléphone : « Pour qui ? » en trois rangées (14/10 : nom et public l'un sous l'autre, sans dessin), cartes sur une colonne, boutons de 44 px */
@media (max-width: 600px) {
    /* 10/10 (relecture) : trois cartes de même hauteur (en anglais, « Mid-sized companies and large groups » passe sur deux lignes) */
    .rzw-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; gap: 8px; }
    /* 14/10 soir : pictogramme à gauche, nom et public au milieu, marque d'état à droite, sur une seule rangée */
    .rzw-card { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "art txt mark"; align-items: center; align-content: center; column-gap: 14px; padding: 14px 16px; }
    .rzw-art { width: 38px; height: 38px; }
    .rzw-name { margin: 0 0 2px; font-size: 1.08rem; }
    .rzx-grid, .rzx-trades .rzx-grid { grid-template-columns: minmax(0, 1fr); }
    /* carrousel : une carte et le début de la suivante */
    html.js .rzx-trades .rzx-grid { grid-template-columns: none; grid-auto-columns: min(82%, 320px); }
    .rzx.is-live .rzx-open, .rzx-more { min-height: 44px; }
    .rzx-pills a { padding: 4px 0; }
    .rzy { width: calc(100vw - 20px); max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); border-radius: var(--b-r-card); }
}
@media (prefers-reduced-motion: reduce) {
    .rzw-card, .rzw-who, .rzw-art, .rzw-mark, .rzw-mark svg, .rzx-card, .rzx-card h4, .rzx-open, .rzx-open i, .rzx-more, .rzx-pills a, .rzx-nav button, .rzy-x, .rzy-pills dt a { transition: none; }
    .rzx-card.is-in { animation: none; }
}

/* ---------- Garde-manger (10/10) : la matrice des réalisations et les trois petites cartes peuvent tomber sur l'autre fond
   (alternance du garde-manger) : cases et cartes passent au blanc sur écume, à l'écume sur blanc ---------- */
.rzm.df-sea .rzm-case { background: #fff; }
.rzm.df-sea .rzm-case:hover { background: var(--b-mist); }
.rzm.df-sea .rzm-more { background: var(--sea); }
body.v2 .rzm.df-sea .rzm-case .hm-tags li { background: var(--sea); }
.rzo2:not(.df-sea) .rzo2-card { background: var(--sea); }
.rzo2:not(.df-sea) :is(.rzo2-ic, .rzo2-kind, .rzo-more) { background: #fff; }