/* Page Technologies (V4, 24/09). Chargé après v3-pages.css, uniquement sur /technologies et /en/technology.
   Préfixe tk- partout. Sans JavaScript tout le détail est visible ; html.js replie les tiroirs.
   Pas de contours autour des blocs : les fonds suffisent à les distinguer.
   Alignements tenus par la grille (subgrid) plutôt que par des marges calculées à la main. */

/* 14/10 (direction « premium sobre », lot 2) : plus de vert ni de bleu ciel hors palette ; boucliers et bande SecNumCloud au bleu
   unique (sur clair) et au bleu clair des fonds marine. Avant : --tk-ok #2E9E5B, --tk-okd #4CC27E, --tk-sky #74C3EE.
   Rayons à 6 px (4 px pour les petites étiquettes), plus de pilule, de rond, d'ombre ni de dégradé ; pictogrammes nus. */
body.v3 .tk-pile-sec, body.v3 .tk-ai-sec, body.v3 .tk-host-sec, body.v3 .tk-tools-sec { --tk-ok: var(--b-accent); --tk-okd: var(--b-accent-dark); --tk-sky: var(--b-accent-dark); }
.tk-pile ul, .tk-ai-sec ul, .tk-ai-sec ol, .tk-host-sec ul, .tk-tools-sec ul { list-style: none; margin: 0; padding: 0; }
.tk-note { margin: 22px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.tk-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:is(.tk-pile-sec, .tk-ai-sec, .tk-host-sec, .tk-tools-sec) .hm-sub { text-wrap: balance; }
/* Passe de nuit du 06/10/2026 : chaque bloc de la page tient dans une fenêtre de 1366 x 650 px (titre compris) */
/* 07/10 (rythme vertical unique) : plus de marge propre sous les titres (24 px) : celle de .hm-head, la même partout */

/* Bouton « + » commun : devient une croix quand le tiroir est ouvert */
/* 14/10 : signe nu, sans rond de fond ; avant : border-radius 50 %, fond rgba(11, 34, 57, .07) */
.tk-plus { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--b-r-tag); background: transparent; color: var(--tide); transition: transform .3s var(--ease-out), color .2s; }
.tk-plus svg { width: 14px; height: 14px; }
html:not(.js) .tk-plus { visibility: hidden; }
[aria-expanded="true"] > .tk-plus { transform: rotate(45deg); }

/* ================= 1. Le schéma de la pile (refait le 10/10/2026, retours de Louis) =================
   « Vos équipes » retirée ; à gauche, vos outils actuels (ERP, CRM, SharePoint, Excel, messagerie), branchés sur
   l'environnement par un fil et une prise ; dans l'environnement, trois couches empilées (de haut en bas : applications et
   agents, modèle d'IA, vos données), posées sur l'identité et sécurité, puis sur l'hébergement. On lit donc de bas en haut.
   Grille du schéma : colonne 1 = vos outils, 2 = le fil, 3 = l'environnement ; rangée 1 = parois et couches,
   2 = identité et sécurité, 3 = hébergement. Vos outils et le fil couvrent les rangées 1 et 2 : même haut que les parois,
   même bas que la bande de sécurité.
   À partir de 1101 px, le tiroir de détail passe à droite du schéma : cinq couches empilées avec le tiroir dessous faisaient
   environ 635 px de contenu, plus que la fenêtre de 1366 x 650 px (575 px avant le 10/10). */
.tk-pile-sec { --tk-dw: 400px; --tk-dg: 28px; }
@media (min-width: 1101px) {
    .tk-pile { display: grid; grid-template-columns: minmax(0, 1fr) var(--tk-dw); column-gap: var(--tk-dg); align-items: start; }
    /* 14/10 : règle du repère d'interaction (.df-cue.tk-cue-pile) retirée avec le repère */
}
@media (min-width: 1101px) and (max-width: 1239px) {
    .tk-pile-sec { --tk-dw: 340px; --tk-dg: 22px; }
}
.tk-stage { display: grid; grid-template-columns: 184px 48px minmax(0, 1fr); grid-template-rows: auto auto auto; }
.tk-tools { grid-column: 1; grid-row: 1 / span 2; }
.tk-link { grid-column: 2; grid-row: 1 / span 2; }
.tk-wall { grid-column: 3; grid-row: 1; }
.tk-secband { grid-column: 3; grid-row: 2; }
.tk-ground { grid-column: 3; grid-row: 3; }

/* Le bouton de couche (toutes les couches) : bande, icône à gauche, titre et sous-titre sur une ligne (le sous-titre passe
   dessous s'il manque de place), « + » à droite */
.tk-layer {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
    width: 100%; margin: 0; padding: 12px 16px; border: 0; border-radius: var(--b-r-card);
    background: var(--sea); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
    transition: background-color .25s var(--ease-out), color .25s var(--ease-out);
}
.tk-layer:focus-visible { outline: 2px solid var(--tide); outline-offset: 3px; }
/* 14/10 : pictogramme nu au trait, sans carré de fond (même place réservée, les titres restent alignés) ; avant : carré blanc, rayon 11 */
.tk-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 0; background: transparent; color: var(--tide); flex: none; transition: color .25s; }
.tk-ic svg { width: 20px; height: 20px; stroke-width: 1.4; }
.tk-lt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-width: 0; }
.tk-lt b { display: block; font: 600 17px/1.2 var(--f-display); letter-spacing: -0.012em; }
.tk-lt small { display: block; margin: 0; font-size: 13.5px; line-height: 1.35; color: var(--muted); transition: color .25s; }

/* Les trois couches de l'environnement */
.tk-l-block { padding: 9px 12px; border-radius: var(--b-r-card); }
.tk-l-block .tk-ic { width: 34px; height: 34px; }
.tk-l-block .tk-ic svg { width: 18px; height: 18px; }
.tk-l-block .tk-plus { width: 28px; height: 28px; }
/* Au survol, la couche prend le gris de survol et rien ne bouge */
.tk-l-block:hover { background: var(--b-hover); }
html.js .tk-l-block.is-on { background: var(--ink); color: #fff; }
html.js .tk-layer.is-on .tk-lt small { color: var(--b-on-dark-2); }
html.js .tk-layer.is-on .tk-ic { color: var(--tk-sky); }
html.js .tk-layer.is-on .tk-plus { color: #fff; }

/* Vos outils actuels : carte fixe (pas une couche), sur fond brume, sans contour ; chaque outil nommé, expliqué dessous */
.tk-tools { display: grid; align-content: start; gap: 14px; padding: 16px 16px 18px; border-radius: var(--b-r-card); background: var(--sea); }
.tk-tools-h { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; margin: 0; }
.tk-tools-h .tk-ic { width: 34px; height: 34px; }
.tk-tools-h .tk-ic svg { width: 18px; height: 18px; }
.tk-tools-h b { display: block; font: 600 16.5px/1.2 var(--f-display); letter-spacing: -0.012em; color: var(--ink); }
.tk-tools-h small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.3; color: var(--muted); }
.tk-tools-l { display: grid; gap: 10px; }
.tk-tools-l li { display: grid; justify-items: start; gap: 3px; }
.tk-tools-l small { font-size: 13px; line-height: 1.35; color: var(--muted); }
/* Un terme (outil du client, ou API et MCP dans le tiroir des données) : 14/10, texte en 600, sans pastille ;
   avant : pastille blanche, padding 2px 10px, rayon 999px */
.tk-term { display: inline; padding: 0; border-radius: 0; background: none; font: 600 13.5px/1.45 var(--f-body); color: var(--ink); white-space: nowrap; }

/* Le fil entre vos outils et l'environnement, et la prise posée sur la paroi bleue (identité et sécurité)
   14/10 : les deux points qui parcouraient le fil (.tk-wire i, animations tk-go et tk-back) sont retirés ; le fil, immobile,
   passe au filet clair pour rester visible sur blanc (avant : --tide-soft). La prise devient un carré à rayon 6, sans ombre
   (avant : rond, box-shadow 0 2px 10px). */
.tk-link { position: relative; min-height: 60px; }
.tk-wire { position: absolute; left: 0; right: 10px; top: 50%; height: 2px; margin-top: -1px; background: var(--b-rule); }
.tk-door { position: absolute; z-index: 2; top: 50%; right: -24px; width: 36px; height: 36px; margin-top: -18px; display: grid; place-items: center; border-radius: var(--b-r-card); background: #fff; color: var(--tide); }
.tk-door svg { width: 18px; height: 18px; stroke-width: 1.4; }

/* L'environnement sécurisé : un champ brume, marqué par son étiquette et un filet d'accent de 2 px en tête, posé sur la bande
   « identité et sécurité » puis sur l'hébergement. 14/10 (relecture du lot 2) : plus de parois bleues, que l'œil lisait comme un
   cadre épais autour des couches ; avant : .tk-wall { padding: 10px 10px 0; background: var(--tide); } et .tk-in { padding: 12px
   14px 14px; border-radius: var(--b-r-tag); background: #fff; }, couches sur brume. */
.tk-wall { padding: 0; border-radius: var(--b-r-card) var(--b-r-card) 0 0; background: var(--b-mist); box-shadow: inset 0 2px 0 var(--b-accent); }
.tk-in { padding: 14px 14px 14px; border-radius: 0; background: none; }
.tk-wall .tk-l-block { background: #fff; }
.tk-wall .tk-l-block:hover { background: var(--b-hover); }
/* 14/10 : étiquette de rubrique (capitales de 12 px) */
.tk-env { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 12px; line-height: 18px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--tide); }
.tk-env span { display: inline-grid; width: 16px; height: 16px; }
.tk-env svg { width: 16px; height: 16px; stroke-width: 1.4; }
.tk-blocks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }

.tk-secband { padding: 8px 10px 10px; border-radius: 0 0 var(--b-r-card) var(--b-r-card); background: var(--tide); }
.tk-l-sec, .tk-l-host { color: #fff; }
.tk-l-sec { background: transparent; padding: 8px 12px; }
.tk-l-sec:hover { background: rgba(255, 255, 255, .08); }
html.js .tk-l-sec.is-on { background: rgba(8, 26, 46, .28); }
.tk-l-sec .tk-ic, .tk-l-host .tk-ic { color: #fff; }
.tk-l-sec .tk-lt small { color: rgba(255, 255, 255, .9); }
.tk-l-host .tk-lt small { color: var(--b-on-dark-2); }
.tk-l-sec .tk-plus, .tk-l-host .tk-plus { color: #fff; }

.tk-ground { margin: 10px 0 0; }
.tk-l-host { background: var(--ink); padding: 9px 22px; border-radius: var(--b-r-card); }
.tk-l-host:hover { background: var(--b-night-2); }
html.js .tk-l-host.is-on { background: var(--b-night-2); }

/* Le tiroir de détail : en-tête (icône, titre, phrase), puis les quatre points. À droite du schéma à partir de 1101 px
   (points les uns sous les autres) ; dessous, sur une rangée de quatre, entre 901 et 1100 px. */
.tk-drawer { margin-top: 16px; scroll-margin-top: calc(var(--header-h) + 20px); }
.tk-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 18px 22px 20px; border-radius: var(--b-r-card); background: var(--sea); }
.tk-panel + .tk-panel { margin-top: 12px; }
html.js .tk-panel { display: none; margin: 0; }
html.js .tk-panel.is-on { display: grid; animation: tk-in .45s var(--ease-out); }
@keyframes tk-in { from { opacity: 0; transform: translateY(8px); } }
.tk-panel-h { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-items: start; }
/* 14/10 : pictogramme nu en bleu ; avant : carré marine, pictogramme bleu ciel */
.tk-panel-h .tk-ic { width: 36px; height: 36px; color: var(--tide); }
.tk-panel-h .tk-ic svg { width: 20px; height: 20px; }
body.v2 .tk-panel h3 { margin: 0 0 2px; font-size: 19px; font-weight: 600; letter-spacing: -0.012em; }
.tk-panel-h p { margin: 0; font-size: 15.5px; line-height: 1.45; color: var(--muted); }
.tk-panel-h .df-link { display: inline-block; margin-top: 6px; font-size: 15px; }
.tk-panel-l { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 22px; align-content: start; }
.tk-panel-l li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 1px 10px; align-content: start; }
/* 14/10 : pictogramme nu ; avant : carré blanc de 30 px, rayon 9 */
.tk-mi { grid-row: span 2; display: grid; place-items: start center; width: 30px; height: 30px; padding-top: 1px; color: var(--tide); }
.tk-mi svg { width: 18px; height: 18px; stroke-width: 1.4; }
.tk-panel-l b { font-size: 15px; font-weight: 600; line-height: 1.3; padding-top: 1px; }
.tk-panel-l p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.tk-panel-l .tk-term { font-size: inherit; line-height: inherit; color: var(--ink); }
@media (min-width: 1101px) {
    .tk-drawer { margin-top: 0; }
    .tk-panel { gap: 14px; padding: 16px 20px 18px; }
    .tk-panel-h p { font-size: 15px; }
    .tk-panel-l { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* Assemblage de la pile à l'arrivée (une seule fois, jamais en mouvement réduit) : l'hébergement monte, les parois montent,
   les couches se posent de bas en haut (--i : 0 pour vos données), puis vos outils arrivent par la gauche et le fil apparaît */
html.js .tk-pile.tk-wait :is(.tk-ground, .tk-wall, .tk-secband, .tk-l-block, .tk-tools, .tk-link) { opacity: 0; }
.tk-pile.tk-play .tk-ground { animation: tk-rise .6s var(--ease-out) both; }
.tk-pile.tk-play :is(.tk-wall, .tk-secband) { animation: tk-rise .6s .15s var(--ease-out) both; }
.tk-pile.tk-play .tk-l-block { animation: tk-drop .55s calc(.45s + var(--i, 0) * .12s) var(--ease-out) both; }
.tk-pile.tk-play .tk-tools { animation: tk-side .6s .9s var(--ease-out) both; }
.tk-pile.tk-play .tk-link { animation: tk-fade .5s 1.1s var(--ease-out) both; }
@keyframes tk-rise { from { opacity: 0; transform: translateY(22px); } }
@keyframes tk-drop { from { opacity: 0; transform: translateY(-26px); } }
@keyframes tk-side { from { opacity: 0; transform: translateX(-22px); } }
@keyframes tk-fade { from { opacity: 0; } }

/* ================= 2. L'IA : le grand bloc des LLM, puis les familles ================= */
/* 14/10 : rayons à 6 px, pictogrammes nus, titres en 600 (bloc au garde-manger seulement) */
.tk-llm { padding: clamp(24px, 4vw, 48px); border-radius: var(--b-r-card); background: var(--ink); color: #fff; }
.tk-llm-h { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 20px; align-items: start; }
.tk-llm-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 0; background: transparent; color: var(--tk-sky); }
.tk-llm-ic svg { width: 28px; height: 28px; stroke-width: 1.4; }
body.v2 .tk-llm h3 { margin: 4px 0 10px; color: #fff; font-size: clamp(1.45rem, 2.6vw, 2rem); font-weight: 500; letter-spacing: -0.022em; text-wrap: balance; }
.tk-llm-h p { margin: 0; max-width: 60ch; font-size: 17px; line-height: 1.55; color: var(--b-on-dark-2); }
.tk-models { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.tk-llm .tk-models { margin-top: 30px; }
.tk-models li { display: grid; }
.tk-model {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; align-items: start; gap: 3px 10px;
    width: 100%; height: 100%; min-height: 74px; margin: 0; padding: 14px 12px 14px 16px; border: 0; border-radius: var(--b-r-card);
    background: var(--b-night-2); color: #fff; font: inherit; text-align: left; cursor: pointer;
    transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.tk-model b { grid-column: 1; font: 600 17.5px/1.2 var(--f-display); letter-spacing: -0.012em; }
.tk-model small { grid-column: 1; font-size: 13px; line-height: 1.3; color: var(--b-on-dark-2); }
.tk-model .tk-plus { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 26px; height: 26px; color: #fff; }
.tk-model:hover { background: rgba(255, 255, 255, .13); }
.tk-model:focus-visible { outline: 2px solid var(--tk-sky); outline-offset: 2px; }
html.js .tk-model.is-on { background: #fff; color: var(--ink); }
html.js .tk-model.is-on small { color: var(--muted); }
html.js .tk-model.is-on .tk-plus { color: var(--tide); }
.tk-mpanels { margin-top: 12px; scroll-margin-top: calc(var(--header-h) + 20px); }
.tk-mp { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 6px 28px; align-items: start; padding: 18px 22px; border-radius: var(--b-r-card); background: var(--b-night-2); scroll-margin: calc(var(--header-h) + 20px) 0 24px; }
.tk-mp + .tk-mp { margin-top: 6px; }
html.js .tk-mp { display: none; margin: 0; }
html.js .tk-mp.is-on { display: grid; animation: tk-in .4s var(--ease-out); }
.tk-mp p { margin: 0; }
.tk-mp-n b { display: block; font: 600 19px/1.2 var(--f-display); }
.tk-mp-n span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.45; color: var(--b-on-dark-2); }
.tk-mp-w { font-size: 16.5px; line-height: 1.55; color: rgba(255, 255, 255, .9); }
.tk-mp-w span { display: block; margin-bottom: 3px; font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--tk-sky); }
/* 14/10 : filet de tête en vrai filet (avant : dégradé d'un pixel en fond) ; numéros en chiffres bleus, sans rond */
.tk-choose { margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--b-rule-dark); }
body.v2 .tk-choose h4 { margin: 0 0 16px; font: 600 12px/1.3 var(--f-body); letter-spacing: .09em; text-transform: uppercase; color: var(--tk-sky); }
.tk-choose ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 28px; }
.tk-choose li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; }
.tk-num { display: block; width: auto; height: auto; padding-top: 2px; border-radius: 0; background: none; font: 500 15px/1.2 var(--f-display); font-variant-numeric: tabular-nums; color: var(--tk-sky); }
.tk-choose b { display: block; font-size: 16.5px; font-weight: 600; line-height: 1.3; color: #fff; }
.tk-choose p { margin: 3px 0 0; font-size: 15px; line-height: 1.45; color: var(--b-on-dark-2); }

/* Familles : chaque carte reprend les rangées de la grille (icône, titre, texte, tiroir), les titres et les textes
   commencent donc à la même hauteur dans une rangée de cartes, même quand un titre passe sur deux lignes. */
body.v2 .tk-fam-h { margin: clamp(3rem, 6vw, 4.25rem) 0 20px; font-size: clamp(1.35rem, 2.3vw, 1.75rem); font-weight: 500; letter-spacing: -0.022em; text-wrap: balance; }
.tk-fams { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 14px; row-gap: 0; }
.tk-fam { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; margin-bottom: 14px; }
.tk-fam-b {
    grid-row: span 3; display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ic plus" "t t" "p p"; row-gap: 0; column-gap: 10px; align-items: start;
    width: 100%; margin: 0; padding: 20px 20px 22px; border: 0; border-radius: var(--b-r-card);
    background: #fff; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: color .2s;
}
/* 14/10 : au survol, le titre passe au bleu et rien d'autre ne bouge (avant : fond #F7FAFC) */
.tk-fam-b:hover .tk-fam-t { color: var(--tide); }
html:not(.js) .tk-fam-b { border-radius: var(--b-r-card) var(--b-r-card) 0 0; }
/* Avec JavaScript : la carte n'a plus que trois rangées, son détail part dans le panneau pleine largeur (.tk-fam-slot) */
html.js .tk-fam { grid-row: span 3; }
html.js .tk-fam > .tk-fam-d { display: none; }
html.js .tk-fam.is-open .tk-fam-b { background: var(--ink); color: #fff; }
html.js .tk-fam.is-open .tk-fam-b:hover .tk-fam-t { color: #fff; }
html.js .tk-fam.is-open .tk-fam-p { color: var(--b-on-dark-2); }
html.js .tk-fam.is-open .tk-fam-ic { color: var(--tk-sky); }
html.js .tk-fam.is-open .tk-plus { color: #fff; }
.tk-fam-b:focus-visible { outline: 2px solid var(--tide); outline-offset: 2px; }
/* 14/10 : pictogramme nu (avant : carré écume de 44 px, rayon 12) */
.tk-fam-ic { grid-area: ic; display: grid; place-items: center start; width: 44px; height: 44px; border-radius: 0; background: none; color: var(--tide); }
.tk-fam-ic svg { width: 24px; height: 24px; stroke-width: 1.4; }
.tk-fam-b .tk-plus { grid-area: plus; }
.tk-fam-t { grid-area: t; align-self: end; display: block; margin-top: 16px; font: 600 18px/1.2 var(--f-display); letter-spacing: -0.012em; transition: color .2s; }
.tk-fam-p { grid-area: p; display: block; margin-top: 7px; font-size: 15.5px; line-height: 1.5; color: var(--muted); }
/* Détail d'une famille : sans JavaScript, sous le texte de la carte ; avec, dans le panneau glissé sous la rangée
   14/10 : le filet de tête est un pseudo-élément (avant : dégradé d'un pixel en fond) */
.tk-fam-d { position: relative; display: grid; align-content: start; gap: 14px; padding: 16px 20px 22px; border-radius: 0 0 var(--b-r-card) var(--b-r-card); background: #fff; }
.tk-fam-d::before { content: ""; position: absolute; top: 0; left: 20px; right: 20px; height: 1px; background: var(--b-rule); }
.tk-fam-d p { margin: 0; font-size: 15.5px; line-height: 1.5; }
.tk-fam-d .tk-fd-l { margin-bottom: 5px; font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; line-height: 1.35; color: var(--b-faint); }
.tk-fam-slot { grid-column: 1 / -1; margin-bottom: 14px; }
.tk-fam-slot .tk-fam-d { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 20px clamp(24px, 3vw, 44px); padding: 24px 28px 26px; border-radius: var(--b-r-card); background: #fff; animation: tk-in .4s var(--ease-out); }
.tk-fam-slot .tk-fam-d::before { display: none; }
/* 14/10 : termes techniques en texte gris, séparés par l'espace (avant : pastilles écume, rayon 999px) */
.tk-chips { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.tk-chips span { padding: 0; border-radius: 0; background: none; font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--b-text); }

/* ================= 3. Où vos solutions tournent : une seule grille, lignes alignées =================
   06/10 (nuit) : section sur fond écume, colonnes blanches (la colonne « Cloud France » reste marine), marges resserrées. */
.tk-hosts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(var(--rows, 4), auto); grid-auto-flow: column; column-gap: 12px; row-gap: 0; }
.tk-hcol, .tk-hcol ul { display: contents; }
.tk-hh, .tk-hcol li { position: relative; padding: 11px 20px; background: #fff; }
.tk-hcol.is-dark :is(.tk-hh, li) { background: var(--ink); color: #fff; }
/* 14/10 (tableau à filets) : l'étiquette de colonne devient une étiquette de rubrique en capitales grises, sans pastille
   (avant : pastille écume, rayon 999px, texte bleu) ; filets d'un pixel entre les lignes ; la colonne « Cloud France »
   (par défaut) reste marine, ramenée aux jetons ; boucliers au trait, bleus. */
.tk-hh { padding-top: 18px; padding-bottom: 14px; border-radius: var(--b-r-card) var(--b-r-card) 0 0; }
body.v2 .tk-hh h3 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.012em; }
.tk-hcol.is-dark .tk-hh h3 { color: #fff; }
.tk-hh span { display: block; margin-bottom: 6px; padding: 0; border-radius: 0; background: none; font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .09em; text-transform: uppercase; color: var(--b-faint); }
.tk-hcol.is-dark .tk-hh span { background: none; color: var(--b-accent-dark); }
.tk-hcol li::before { content: ""; position: absolute; top: 0; left: 20px; right: 20px; height: 1px; background: var(--b-rule); }
.tk-hcol.is-dark li::before { background: var(--b-rule-dark); }
.tk-hcol li.tk-hfill::before { display: none; }
.tk-hcol li:last-child { padding-bottom: 16px; border-radius: 0 0 var(--b-r-card) var(--b-r-card); }
.tk-hcol li p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.tk-hcol.is-dark li p { color: var(--b-on-dark-2); }
.tk-hcol li .tk-hn { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; font-size: 16.5px; line-height: 1.3; color: inherit; }
.tk-hn b { font-weight: 600; }
.tk-snc { display: inline-grid; place-items: center; flex: none; width: 18px; height: 20px; color: var(--tk-ok); cursor: help; }
.tk-snc svg { width: 18px; height: 20px; }
.tk-hcol.is-dark .tk-snc { color: var(--tk-okd); }
/* 14/10 : la bande SecNumCloud passe sur blanc (la section est en brume), rayon 6 ; avant : vert pâle #EAF5EE, rayon 18 */
.tk-sncbox { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 12px; padding: 14px 20px; border-radius: var(--b-r-card); background: #fff; }
.tk-snc--lg { width: 24px; height: 26px; margin-top: 1px; cursor: default; }
.tk-snc--lg svg { width: 24px; height: 26px; }
.tk-sncbox p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); }

/* ================= 4. Les outils : une grille de tuiles par usage ================= */
/* Chaque tuile : une ligne de marque d'au moins 48 px (symbole du logo dans une case de 32 px et nom, ou le logo seul quand il
   est le nom), le rôle, puis l'origine. Les tuiles d'une même rangée partagent ces trois rangées (subgrid) : si un nom passe
   sur deux lignes, les rôles et les pastilles de toute la rangée restent alignés. */
.tk-tgroups { display: grid; gap: 30px; }
.tk-tg { display: grid; gap: 14px; }
body.v2 .tk-tg h3 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.012em; line-height: 1.25; }
.tk-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.tk-tiles li { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; min-width: 0; padding: 16px 10px 18px 16px; border-radius: var(--b-r-card); background: #fff; }
.tk-mark { display: flex; align-items: flex-start; gap: 8px; min-width: 0; min-height: 48px; margin: 0; }
/* Case du symbole : largeur fixe, symbole centré dedans ; le nom commence toujours au même endroit */
.tk-slot { flex: none; display: grid; place-items: center; width: 34px; height: 48px; }
.tk-slot--word { width: auto; }
/* Première ligne du nom centrée sur la case (48 px) ; un nom sur deux lignes descend, il ne remonte pas */
.tk-mark b { min-width: 0; padding-top: 13.65px; font: 600 18px/20.7px var(--f-display); letter-spacing: -0.015em; color: var(--ink); }
/* Mot de 12 lettres dans un nom en deux mots (Great Expectations) : même taille, lettres à peine resserrées. */
.tk-mark--tight b { letter-spacing: -0.035em; }
.tk-sym { position: relative; flex: none; display: block; overflow: hidden; }
.tk-sym img { display: block; max-width: none; mix-blend-mode: multiply; }
/* SVG : fond transparent, l'image remplit exactement sa boîte (pas de recadrage) */
.tk-sym--svg img { width: 100%; height: 100%; mix-blend-mode: normal; }
.tk-tiles small { display: block; margin-top: 10px; font-size: 13.5px; line-height: 1.35; color: var(--muted); text-wrap: balance; }
/* 14/10 : origine en petites capitales grises, sans pastille (avant : pastille bleu pâle, rayon 999px) */
.tk-origin { justify-self: start; align-self: start; margin-top: 6px; padding: 0; border-radius: 0; background: none; font-size: 11.5px; font-weight: 600; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; color: var(--b-faint); }

/* ================= Écrans moyens et petits ================= */
@media (max-width: 1100px) {
    .tk-fams { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tk-models { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .tk-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* Hébergement sur deux colonnes : chaque paire de colonnes partage les mêmes rangées (subgrid), les séparateurs restent alignés */
    .tk-hosts { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-flow: row; column-gap: 12px; row-gap: 0; }
    .tk-hcol { display: grid; grid-row: span var(--rows, 4); grid-template-rows: subgrid; row-gap: 0; }
    .tk-hcol:nth-child(n + 3) { margin-top: 12px; }
}
@media (max-width: 900px) {
    /* 14/10 : règle du repère d'interaction (.df-cue.tk-cue-pile + .tk-pile, bande libre de 32 px) retirée avec le repère */
    .tk-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
    .tk-tools, .tk-link, .tk-wall, .tk-secband, .tk-ground { grid-column: auto; grid-row: auto; }
    .tk-tools-l { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
    .tk-link { min-height: 0; height: 56px; }
    .tk-wire { left: 50%; right: auto; top: 0; bottom: 12px; width: 2px; height: auto; margin: 0 0 0 -1px; }
    .tk-door { top: auto; bottom: -24px; right: auto; left: 50%; margin: 0 0 0 -18px; }
    .tk-in { padding: 22px 12px 12px; }
    .tk-wall { padding: 0; border-radius: var(--b-r-card) var(--b-r-card) 0 0; } /* 14/10 (relecture du lot 2) : avant, padding 10px 10px 0 */
    .tk-secband { padding: 8px 10px 10px; border-radius: 0 0 var(--b-r-card) var(--b-r-card); }
    .tk-l-host { padding: 12px 16px; }
    .tk-panel-l { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tk-choose ol { grid-template-columns: minmax(0, 1fr); }
    .tk-mp { grid-template-columns: minmax(0, 1fr); }
    .tk-fam-slot .tk-fam-d { grid-auto-flow: row; grid-auto-columns: auto; padding: 20px 20px 22px; }
    .tk-models { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* 14/10 : animations tk-go-v et tk-back-v (points le long du fil vertical) retirées avec les points */
@media (max-width: 640px) {
    .tk-panel-l { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    /* Familles sur une colonne : plus besoin d'aligner les rangées */
    .tk-fams { grid-template-columns: minmax(0, 1fr); }
    .tk-fam { display: block; grid-row: auto; margin-bottom: 10px; }
    .tk-fam-b { grid-row: auto; grid-template-rows: none; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ic t plus" "ic p plus"; column-gap: 14px; padding: 18px 16px 20px 18px; }
    .tk-fam-t { margin-top: 0; align-self: end; }
    .tk-fam-p { margin-top: 4px; }
    .tk-fam-b .tk-plus { align-self: center; }
    .tk-fam-ic { width: 40px; height: 40px; }
    .tk-fam-d { padding: 16px 18px 20px; }
    .tk-fam-d::before { left: 18px; right: 18px; }
    .tk-fam-slot { margin-bottom: 10px; }
    /* Hébergement sur une colonne : chaque fournisseur à la suite, sans rangées vides */
    .tk-hosts { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
    .tk-hcol { display: block; grid-row: auto; overflow: hidden; border-radius: var(--b-r-card); background: #fff; }
    .tk-hcol:nth-child(n + 3) { margin-top: 0; }
    .tk-hcol.is-dark { background: var(--ink); }
    .tk-hcol ul { display: block; }
    .tk-hcol li.tk-hfill { display: none; }
    .tk-hcol li:last-child { border-radius: 0; }
    .tk-hh { border-radius: 0; }
    .tk-llm-h { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .tk-models { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .tk-model { padding: 12px 10px 12px 14px; }
    /* Outils compacts : le nom (et son symbole) sur une ligne, le rôle et l'origine sur la suivante */
    .tk-tgroups { gap: 22px; }
    .tk-tg { gap: 10px; }
    .tk-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .tk-tiles li { display: block; grid-row: auto; min-height: 62px; padding: 9px 11px 10px; border-radius: var(--b-r-card); font-size: 12.5px; line-height: 18px; }
    .tk-mark { align-items: center; gap: 7px; height: 22px; min-height: 0; margin-bottom: 3px; }
    .tk-mark b { overflow: hidden; padding-top: 0; font-size: 15px; line-height: 22px; white-space: nowrap; text-overflow: ellipsis; }
    /* Noms de 16 caractères et plus (Microsoft Purview, Great Expectations...) : un peu plus petits pour tenir sur la ligne */
    .tk-mark--wide b { font-size: 13.5px; letter-spacing: -0.03em; }
    /* Case et symbole réduits d'un quart : case de 25,2 px de large, 22 px de haut */
    .tk-slot { zoom: .74; height: 29.73px; }
    .tk-tiles small { display: inline; margin: 0; font-size: 12.5px; line-height: 18px; }
    /* Une espace (dans le HTML) sépare l'origine du rôle ; si l'origine passe à la ligne, elle part du bord comme le rôle */
    .tk-origin { display: inline-block; margin: 0; padding: 0 0 0 2px; font-size: 10.5px; line-height: 16px; vertical-align: 1px; }
    .tk-note { margin-top: 18px; }
    /* 10/10 : toutes les couches (et non plus seulement identité et hébergement) : titre, puis sous-titre dessous */
    .tk-layer .tk-lt { display: block; }
    .tk-layer .tk-lt small { margin-top: 3px; }
}

@media (prefers-reduced-motion: reduce) {
    .tk-pile.tk-play :is(.tk-ground, .tk-wall, .tk-secband, .tk-l-block, .tk-tools, .tk-link) { animation: none; }
    html.js .tk-pile.tk-wait :is(.tk-ground, .tk-wall, .tk-secband, .tk-l-block, .tk-tools, .tk-link) { opacity: 1; }
    html.js .tk-panel.is-on, html.js .tk-mp.is-on, .tk-fam-slot .tk-fam-d { animation: none; }
    .tk-plus { transition: none; }
}


/* ---------- Correction V5 (contrôles du 24/09) ---------- */
/* Issue 26 : ligne de marque de même hauteur dans toutes les rangées de tuiles (nom sur une ou deux lignes) */
@media (min-width: 641px) {
    .tk-mark { min-height: 55px; }
}
/* Issue 27 : familles de modèles repliées sur téléphone (3 visibles), dépliées par la case « Voir les N autres familles » */
.tk-fams-cb, .tk-fams-more { display: none; }
@media (max-width: 640px) {
    .tk-fams-cb { display: block; position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
    .tk-fams-cb:not(:checked) ~ .tk-fams .tk-fam--more { display: none; }
    .tk-fams-more { display: flex; align-items: center; justify-content: center; width: fit-content; min-height: 44px; margin: 6px auto 0; padding: 0 20px; border-radius: var(--b-r-card); background: var(--ink); font: 600 15px/1 var(--f-body); color: #fff; cursor: pointer; }
    .tk-fams-more:hover { background: var(--tide); }
    .tk-fams-cb:focus-visible ~ .tk-fams-more { outline: 2px solid var(--tide); outline-offset: 3px; }
    .tk-fams-cb:checked ~ .tk-fams-more { display: none; }
}
/* Issue 23 : marque « à vérifier » sur une question de la FAQ, sur une ligne et à la taille des autres marques */
.qa-qt .df-todo { white-space: nowrap; font-size: 13.5px; }

/* V4.3, lot mobile (06/10) : origine lisible (10,5 px avant) ; à 360 px, « DeepSeek » et « Command » débordaient de leur bouton */
@media (max-width: 640px) {
    .tk-origin { font-size: 12px; }
}
@media (max-width: 400px) {
    .tk-model { padding-left: 12px; column-gap: 6px; }
    .tk-model b { font-size: 16px; }
}
/* à 360 px, « Microsoft Purview », « Great Expectations », « Microsoft Copilot » et « Power Automate » finissaient en points de suspension */
@media (max-width: 380px) {
    .tk-tiles li { padding-left: 8px; padding-right: 8px; }
    .tk-mark { gap: 5px; }
    .tk-mark b { font-size: 14px; }
    .tk-mark--wide b { font-size: 13px; }
    .tk-mark--tight b { font-size: 12.5px; } /* « Great Expectations » (115 px à 13 px pour 113 de place) */
}

/* ================= V4.3, passe de nuit du 06/10 : les outils en matrice (section #outils, classes tk-mx*) =================
   6 colonnes (un usage par colonne, les outils métier sur deux), un titre puis 4 rangées de tuiles partagées (subgrid) :
   un rôle sur deux lignes agrandit toute la rangée, les tuiles restent alignées. Section blanche, tuiles écume.
   Tuile : logo et nom sur une ligne (case du symbole réduite d'un quart, comme les tuiles du téléphone), origine
   au bout (FR, UE, expliquées dans le sous-titre), rôle dessous. La section d'origine (.tk-tiles, .tk-mark) est au garde-manger. */
/* 13/10 (retours de Louis : 41 tuiles au lieu de 24) : deux matrices l'une sous l'autre, trois groupes de deux colonnes chacune
   (toujours six colonnes de 178 px à 1120 px de large, tuiles inchangées). Le nombre de rangées de tuiles vient du générateur
   (--mxr, 5 puis 3) : chaque groupe occupe toutes les rangées de sa matrice (1 / -1), sa liste toutes sauf celle du titre (2 / -1).
   Avant : .tk-mx { grid-template-rows: auto repeat(4, auto) }, .tk-mxg { grid-row: span 5 }, ul.tk-mxl { grid-row: span 4 }. */
.tk-mx { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: auto repeat(var(--mxr, 4), auto); gap: 8px 10px; }
.tk-mx + .tk-mx { margin-top: 26px; }
.tk-mxg { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.tk-mxg--wide { grid-column: span 2; grid-template-columns: subgrid; }
/* 07/10 (Louis : une catégorie n'était pas alignée) : titres toujours sur une ligne, donc tous à la même hauteur au pixel.
   « Automatisation et agents » est devenu « Automatisation » ; « Données et plateformes », le plus long (177 px), tient dans
   une colonne de 178 px. Sous 1240 px de large, les colonnes rétrécissent : la matrice passe sur 3 colonnes (voir plus bas). */
body.v2 .tk-mxg h3 { grid-column: 1 / -1; align-self: end; margin: 0 0 2px; font-size: 15px; /* 07/10 : 15,5 px laissait 1 px de marge à « Données et plateformes » (177 px sur 178) */ font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; white-space: nowrap; }
/* 14/10 (tableau : en-têtes en petites capitales grises) : le titre de groupe devient une étiquette de rubrique, Public Sans 600 de 12 px
   en capitales ; « Données et plateformes » y fait environ 190 px, dans un groupe de deux colonnes (366 px) ou d'une seule (au moins
   230 px sous 1239 px). La règle du dessus (15 px, 700, Plus Jakarta Sans) est gardée pour y revenir. */
body.v2 .tk-mx-sec .tk-mxg h3 { font: 600 12px/1.4 var(--f-body); letter-spacing: .09em; text-transform: uppercase; color: var(--b-faint); }
.tk-mx-sec ul.tk-mxl { grid-column: 1 / -1; grid-row: 2 / -1; display: grid; grid-template-rows: subgrid; }
.tk-mxg--wide .tk-mxl { grid-template-columns: subgrid; }
.tk-mxl li { min-width: 0; padding: 9px 10px 10px 11px; border-radius: var(--b-r-card); background: var(--sea); }
/* 14/10 : logos en gris estompé, en couleur au survol de la tuile (le nom passe alors au bleu, rien ne bouge) */
.tk-mxl img { filter: grayscale(1) contrast(1.05); opacity: .62; transition: filter .25s ease, opacity .25s ease; }
/* les logos-noms (Sage, Cegid, Odoo, SAP) portent le nom de l'outil : moins estompés, pour rester lisibles */
.tk-mxl .tk-slot--word img { opacity: .82; }
.tk-mxl li:hover img, .tk-mxl li:hover .tk-slot--word img { filter: none; opacity: 1; }
.tk-mxm b { transition: color .2s; }
.tk-mxl li:hover .tk-mxm b { color: var(--tide); }
.tk-mxm { display: flex; align-items: center; gap: 7px; min-width: 0; height: 22px; margin: 0 0 3px; }
.tk-mxm .tk-slot { zoom: .74; height: 29.73px; }
.tk-mxm b { min-width: 0; overflow: hidden; font: 600 15px/22px var(--f-display); letter-spacing: -0.015em; white-space: nowrap; text-overflow: ellipsis; color: var(--ink); }
/* Noms de 16 caractères et plus (Microsoft Fabric, Microsoft Copilot) : un peu plus petits pour tenir sur la ligne */
.tk-mxm--wide b { font-size: 13.5px; letter-spacing: -0.03em; }
/* 14/10 : origine (FR, UE) en texte gris, sans pastille ; avant : pastille blanche, rayon 999px, texte bleu */
.tk-org { flex: none; margin-left: auto; padding: 0 0 0 6px; border-radius: 0; background: none; font: 600 11px/18px var(--f-body); letter-spacing: .06em; color: var(--b-faint); text-decoration: none; cursor: help; }
.tk-mxl small { display: block; font-size: 12px; line-height: 17px; color: var(--muted); }
.tk-mx-sec .tk-note { margin-top: 16px; }
.tk-mx-sec .tk-note + .tk-note { margin-top: 6px; } /* 13/10 : trois lignes de note (Sellsy, Qwen et DeepSeek, exemples) */
/* 07/10 : 3 colonnes dès 1239 px (et non plus 1100) : entre 1101 et 1239 px, à 6 colonnes, « Données et plateformes » passait
   sur deux lignes et des noms finissaient par « … » (DataGalaxy, Microsoft Copilot, Power Automate). */
@media (max-width: 1239px) {
    /* trois colonnes d'usages ; les outils métier sur deux colonnes, à côté du développement
       13/10 : les six groupes sont « doubles » à 6 colonnes ; ici chacun revient sur une colonne (grid-column: auto) et ses tuiles
       sur une seule (306 px à 1024 px de large : à deux, elles feraient 148 px et les noms seraient coupés).
       Avant : .tk-mxg--wide .tk-mxl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; } */
    .tk-mx { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; gap: 24px 12px; }
    .tk-mx + .tk-mx { margin-top: 24px; }
    .tk-mxg, .tk-mxg--wide { grid-column: auto; grid-row: auto; grid-template-rows: none; grid-template-columns: minmax(0, 1fr); align-content: start; }
    body.v2 .tk-mxg h3 { margin-bottom: 8px; }
    .tk-mx-sec ul.tk-mxl { grid-row: auto; grid-template-rows: none; gap: 8px; }
    .tk-mxg--wide .tk-mxl { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
@media (max-width: 640px) {
    .tk-mx { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .tk-mx + .tk-mx { margin-top: 20px; }
    .tk-mxg--wide { grid-column: auto; }
    .tk-mx-sec ul.tk-mxl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    /* 07/10 : noms entiers sur téléphone (« Power Automate » et « DataGalaxy » finissaient par « … » à 390 px) :
       un point plus petits, et retour à la ligne plutôt que coupure sur les écrans les plus étroits */
    .tk-mxm { height: auto; min-height: 22px; }
    .tk-mxm b { font-size: 14px; line-height: 18px; white-space: normal; text-overflow: clip; }
    .tk-mxm--wide b { font-size: 13.5px; }
}
/* 10/10, série 3 (intégration, relevé du lot D) : « Agent de code d'Anthropic », libellé dicté par Louis pour Claude Code, passait
   sur deux lignes dans une fenêtre de 381 à 395 px avec une barre de défilement classique (largeur utile de 366 à 380 px, il manquait
   1,9 px) : la rangée Claude Code / Codex faisait 78 px au lieu de 61. Sur un téléphone (barre superposée), 375 et 390 px tenaient
   déjà sur une ligne. Les marges latérales de 8 px, déjà en place sous 380 px, s'appliquent jusqu'à 400 px ; les tailles de texte
   ne changent pas. À 360 px le libellé reste sur deux lignes, comme « Données à grande échelle » et « Données, modèles, scripts ». */
@media (max-width: 400px) {
    .tk-mxl li { padding-left: 8px; padding-right: 8px; }
}
@media (max-width: 380px) {
    .tk-mxl li { padding-left: 8px; padding-right: 8px; }
    .tk-mxm { gap: 5px; }
    .tk-mxm b { font-size: 14px; letter-spacing: -0.025em; }
    .tk-mxm--wide b { font-size: 13px; }
    /* 07/10 : à 360 px, « DataGalaxy » et sa pastille FR dépassaient de 4 px */
    .tk-org { padding: 0 0 0 4px; }
}

/* ================= 14/10 : solutions en rangées (#outils, classes sl-*) =================
   Louis, devant le mur de 41 cartes : « Ça, je ne trouve pas ça extrêmement joli. » Maquette A (.claude/PLAN-SOLUTIONS-14-10.md) :
   la bande des trois solutions de référence (fond brume, filets verticaux, logos en couleur), puis six rangées par usage (intitulé
   à gauche, solutions en ligne à droite, filet fin entre deux rangées, aucune carte). Une colonne d'intitulés (--sl-lab) commune
   à la bande et aux rangées. Les règles tk-mx* au-dessus restent pour le retour arrière (SOL_ROWS = false dans v3-tech-more.mjs).
   Les transitions sont déjà coupées par prefers-reduced-motion (v2.css, body.v2 *). */
/* --sl-bleed : la bande déborde de la colonne de texte, mais garde au moins 16 px jusqu'au bord de la fenêtre
   (maquette : min(32px, var(--gutter)), le fond brume arrivait à 8 px du bord à 1190 px) */
.sl-sec { --sl-lab: 190px; --sl-gap: 40px; --sl-bleed: min(32px, calc(var(--gutter) - 16px)); }

/* Bande des trois solutions de référence */
.sl-refs { display: grid; grid-template-columns: var(--sl-lab) minmax(0, 1fr); column-gap: var(--sl-gap); margin: 0 calc(-1 * var(--sl-bleed)); padding: 30px var(--sl-bleed) 32px; border-radius: var(--b-r-card); background: var(--b-mist); }
/* intitulé : sans le padding-top de 2 px de la maquette, pour que ses capitales s'alignent sur celles des petites capitales d'usage */
body.v2 .sl-sec .sl-refs-h { margin: 0; padding-top: 0; font: 600 16px/1.35 var(--f-display); letter-spacing: -0.01em; color: var(--ink); }
/* 14/10 (Louis : pas Sellsy sur un piédestal ; Azure, OVHcloud, Mistral souverain) : trois colonnes égales, les trois phrases sont
   courtes ; avant, pour la phrase de Sellsy, la plus longue, en 3e colonne :
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); */
.sl-refs-l { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.sl-ref { min-width: 0; padding: 0 28px; }
.sl-ref:first-child { padding-left: 0; }
.sl-ref:last-child { padding-right: 0; }
.sl-ref + .sl-ref { border-left: 1px solid var(--b-rule); }
/* 14/10 (Azure, OVHcloud, Mistral) : intitulé, logo et phrase partagent trois rangées d'une colonne à l'autre (subgrid) ; « Hébergement,
   cloud d'entreprise » passe sur deux lignes à 1024 et 781 px (mesuré), les logos restent alignés. Avant : pas de règle (blocs simples) */
.sl-ref { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.sl-ref-use { margin: 0 0 12px; font: 600 11.5px/1.4 var(--f-body); letter-spacing: .09em; text-transform: uppercase; color: var(--b-faint); }
.sl-ref-m { display: flex; align-items: center; gap: 12px; height: 40px; margin: 0 0 10px; }
/* spécificité (0,2,0) : l'emporte sur .tk-slot { zoom: .74 } sous 640 px */
.sl-ref-m .tk-slot { zoom: 1.12; height: 36px; }
.sl-ref-m .tk-slot, .sl-m .tk-slot { place-items: center start; }
.sl-ref-m b { font: 600 22px/1.2 var(--f-display); letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; }
/* origine (FR, UE) collée au nom : sans la marge automatique ni le retrait des tuiles (le curseur d'aide reste) */
.sl-ref-m .tk-org, .sl-m .tk-org { margin: 0; padding: 0; font: 600 10.5px/1 var(--f-body); letter-spacing: .08em; color: var(--b-faint); }
.sl-ref-m .tk-org { align-self: center; margin-top: 3px; font-size: 11px; }
.sl-ref-t { margin: 0; max-width: 38ch; font-size: 15px; line-height: 1.55; color: var(--b-text); }
/* Logos de la bande en couleur au repos (seule exception au gris du lot 2), sans survol. Pour les passer en gris :
.sl-ref-m img { filter: grayscale(1) contrast(1.05); opacity: .72; } */

/* Rangées : intitulé de l'usage à gauche, solutions en ligne à droite, filet fin entre deux rangées */
.sl-rows { margin-top: 36px; border-bottom: 1px solid var(--b-rule); }
/* 14/10 (relecture) : rangées resserrées (avant : padding 26px 0 28px, écart vertical des solutions 22 px), le bloc était passé
   de 1020 à 1600 px de haut à 1366 px */
.sl-row { display: grid; grid-template-columns: var(--sl-lab) minmax(0, 1fr); column-gap: var(--sl-gap); padding: 22px 0 24px; border-top: 1px solid var(--b-rule); }
body.v2 .sl-sec .sl-use { margin: 0; padding-top: 5px; font: 600 16px/1.35 var(--f-display); letter-spacing: -0.01em; color: var(--ink); }
.sl-items { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px 24px; margin: 0; padding: 0; list-style: none; }
.sl-items li { min-width: 0; }
.sl-m { display: flex; align-items: center; gap: 9px; height: 28px; margin: 0 0 4px; }
.sl-m .tk-slot { zoom: .8; height: 35px; }
/* jamais de nom coupé (ni « … » ni overflow: hidden) : sur une ligne au-dessus de 760 px (vérifié à 1366 et 1190 px), retour
   à la ligne en dessous ; les <wbr> de nm() (DataGalaxy, ElevenLabs) restent */
.sl-m b { min-width: 0; font: 600 14.5px/1.25 var(--f-display); letter-spacing: -0.015em; white-space: nowrap; color: var(--ink); }
/* 14/10 (relecture) : le nom ne change plus de couleur au survol (rien n'est cliquable, le bleu faisait croire à un lien) ;
   avant : transition: color .2s ici et .sl-items li:hover b { color: var(--tide); } plus bas.
   14/10 soir (Louis : « une main » au survol, lien vers le site de la solution) : chaque solution est un lien (SOL_URL de
   v3-tech-more.mjs, nouvel onglet). Rangées : le lien .sl-a enveloppe toute la tuile, sans marge ni retrait (mise en page
   inchangée) ; bande : le lien .sl-ref-a (logo, nom, origine) reprend la disposition de .sl-ref-m et s'étend à toute la case.
   Survol et clavier : main, nom en bleu, logo gris en couleur ; contour de focus commun (body.v2 :focus-visible, v2.css).
   Pour revenir aux solutions non cliquables : const SOL_URL = {} dans v3-tech-more.mjs (ces règles restent sans effet). */
.sl-a { display: block; color: inherit; text-decoration: none; border-radius: var(--b-r-card); }
.sl-ref { position: relative; }
.sl-ref-a { display: flex; align-items: center; gap: 12px; min-width: 0; color: inherit; text-decoration: none; border-radius: var(--b-r-card); }
.sl-ref-a::after { content: ""; position: absolute; inset: 0; }
/* origine (FR, UE) : au-dessus de la case étendue pour garder son infobulle ; main comme le reste du lien */
.sl-ref-a .tk-org { position: relative; z-index: 1; }
.sl-a .tk-org, .sl-ref-a .tk-org { cursor: inherit; }
.sl-m b, .sl-ref-m b { transition: color .2s ease; }
.sl-a:is(:hover, :focus-visible) b, .sl-ref:hover .sl-ref-a b, .sl-ref-a:focus-visible b { color: var(--tide); }
.sl-m--wide b { letter-spacing: -0.025em; }
.sl-items small { display: block; font-size: 12.5px; line-height: 1.45; color: var(--b-text); }
.sl-rownote { margin: 20px 0 0; max-width: 88ch; font-size: 13px; line-height: 1.55; color: var(--b-faint); }
.sl-sec .sl-note { margin-top: 18px; font-size: 13px; color: var(--b-faint); }
.sl-sec .sl-note + .sl-note { margin-top: 6px; } /* SOL_NOTES_MOVED = false : les trois notes sous le bloc, comme le 13/10 */

/* Logos des rangées : gris au repos (lot 2), un peu moins estompés que les tuiles (0,72 au lieu de 0,62, et 0,9 au lieu de 0,82
   pour les logos-noms SAP, Sage, Cegid, Odoo : à 80 % de leur taille ils paraissaient délavés, Sage surtout) ; couleur au survol */
.sl-items img { filter: grayscale(1) contrast(1.05); opacity: .72; transition: filter .25s ease, opacity .25s ease; }
/* 14/10 (relecture) : logos-noms à pleine opacité, Sage restait délavé à 0,9 à côté de SAP, Cegid et Odoo (avant : opacity: .9) */
.sl-items .tk-slot--word img { opacity: 1; }
/* Sage (vert clair) restait pâle même à pleine opacité : son gris est assombri pour rejoindre SAP, Cegid et Odoo */
.sl-items img[src$="/sage.svg"] { filter: grayscale(1) brightness(.62) contrast(1.1); }
.sl-items li:hover img, .sl-items li:hover .tk-slot--word img { filter: none; opacity: 1; }
/* 14/10 soir : même couleur au clavier (lien .sl-a) */
.sl-items .sl-a:focus-visible img { filter: none; opacity: 1; }
/* 14/10 (relecture) : pas de solution seule sur sa ligne. Classes sl-row--k<c>-<k> posées par toolsRows (v3-tech-more.mjs) : au
   palier de c colonnes, k solutions par ligne sur la même grille (les colonnes restent alignées d'une rangée à l'autre) */
@media (min-width: 1181px) {
    .sl-row--k5-3 .sl-items > li:nth-child(3n+1), .sl-row--k5-4 .sl-items > li:nth-child(4n+1) { grid-column-start: 1; }
}
@media (min-width: 981px) and (max-width: 1180px) {
    .sl-row--k4-3 .sl-items > li:nth-child(3n+1) { grid-column-start: 1; }
}
@media (min-width: 761px) and (max-width: 980px) {
    .sl-row--k3-2 .sl-items > li:nth-child(2n+1) { grid-column-start: 1; }
}

@media (max-width: 1180px) {
    .sl-sec { --sl-lab: 170px; --sl-gap: 32px; }
    .sl-items { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sl-ref { padding: 0 22px; }
    /* 14/10 (relecture) : trois colonnes égales et noms en 20 px dès 1180 px, et non plus dès 980 px. Avec 1fr 1fr 1,3fr, de 981 à
       environ 1046 px (1024 compris), « Microsoft Azure » (environ 208 px en 22 px, symbole compris) sortait de sa colonne. */
    .sl-refs-l { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sl-ref-m b { font-size: 20px; }
}
@media (max-width: 980px) {
    .sl-refs { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
    .sl-items { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; }
    /* 14/10 (relecture) : colonne d'intitulés et écarts resserrés (avant : 170 px, 32 px et 24 px) : à 761 px, les colonnes de
       150 px coupaient « Microsoft Copilot » (mesuré) ; elles font maintenant environ 160 px */
    .sl-sec { --sl-lab: 150px; --sl-gap: 28px; }
    /* 14/10 (non prévu par la maquette) : bande empilée, trois colonnes égales et noms en 20 px (règles du palier 1180 px, plus
       haut). Avec 1fr 1fr 1,3fr, à 780 px la première colonne laissait environ 195 px à « Microsoft Azure » : le nom sortait. */
}
@media (max-width: 760px) {
    .sl-refs { margin: 0 calc(-1 * var(--gutter)); padding: 26px var(--gutter) 6px; border-radius: 0; row-gap: 6px; }
    .sl-refs-l { grid-template-columns: minmax(0, 1fr); }
    .sl-ref, .sl-ref:first-child, .sl-ref:last-child { padding: 18px 0 20px; }
    .sl-ref + .sl-ref { border-left: 0; border-top: 1px solid var(--b-rule); }
    .sl-ref-use { margin-bottom: 8px; }
    .sl-ref-m { height: 36px; margin-bottom: 6px; }
    .sl-ref-m .tk-slot { zoom: 1; }
    .sl-ref-m b { font-size: 20px; }
    .sl-ref-t { font-size: 14.5px; }
    .sl-rows { margin-top: 28px; }
    .sl-row { grid-template-columns: minmax(0, 1fr); row-gap: 14px; padding: 20px 0 22px; }
    body.v2 .sl-sec .sl-use { padding-top: 0; }
    .sl-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 16px; }
    .sl-m { height: auto; min-height: 28px; gap: 8px; }
    .sl-m b { font-size: 14px; line-height: 1.25; white-space: normal; overflow-wrap: anywhere; }
    .sl-items small { font-size: 12px; }
}

/* ================= Garde-manger (passe de nuit du 06/10) : copies figées des blocs retirés de Technologies (classe tk-gm) =================
   Rendues par pantryTech (.claude/v3-tech.mjs) : tout le détail visible, sans bouton ni script (js/tech.js n'est pas chargé au
   garde-manger) ; sur fond blanc, les cartes blanches d'origine passent en écume. */
/* 14/10 : étiquette en capitales grises, sans pastille (avant : pastille bleu pâle, rayon 999px) */
.tk-gm-note { display: inline-block; margin: 0 0 14px; padding: 0; border-radius: 0; background: none; font-size: 12px; font-weight: 600; line-height: 1.5; letter-spacing: .09em; text-transform: uppercase; color: var(--b-faint); }
.tk-gm .tk-plus { visibility: hidden; }
.tk-gm :is(.tk-model, .tk-fam-b) { cursor: default; }
.tk-ai-sec.tk-gm .tk-mp { display: grid; margin-top: 6px; }
.tk-ai-sec.tk-gm .tk-mp:first-child { margin-top: 0; }
.tk-ai-sec.tk-gm .tk-fam > .tk-fam-d { display: grid; }
.tk-ai-sec.tk-gm .tk-fam-b { border-radius: var(--b-r-card) var(--b-r-card) 0 0; }
.tk-ai-sec.tk-gm .tk-fam-b:hover .tk-fam-t { color: inherit; }
@media (min-width: 641px) {
    .tk-ai-sec.tk-gm .tk-fam { grid-row: span 4; }
}
.tk-ai-sec.tk-gm:not(.df-sea) .tk-fam-b, .tk-ai-sec.tk-gm:not(.df-sea) .tk-fam-b:hover { background: var(--sea); }
.tk-ai-sec.tk-gm:not(.df-sea) .tk-fam-d { background: var(--sea); }
.tk-ai-sec.tk-gm:not(.df-sea) .tk-fam-d::before { background: var(--b-rule); }
.tk-tools-sec.tk-gm:not(.df-sea) .tk-tiles li { background: var(--sea); }

/* ================= 07/10 : textes explicatifs (Louis : « c'est juste des schémas, pour les gens ce n'est pas très clair ») =================
   Hébergement et outils : sous-titres de deux ou trois lignes, plus larges que le sous-titre par défaut (58ch).
   (Le mode de lecture du schéma, .tk-read, est parti le 10/10 : une seule phrase, sous le titre du schéma.) */
:is(.tk-host-sec, .tk-mx-sec, .sl-sec) .hm-sub { max-width: 94ch; } /* 14/10 : .sl-sec (solutions en rangées) */
/* l'encart SecNumCloud se resserre de 8 px pour que la section, avec son sous-titre de deux lignes, tienne dans 583 px à 1366 x 650 */
.tk-host-sec .tk-sncbox { margin-top: 8px; padding-top: 12px; padding-bottom: 12px; }

/* Garde-manger (10/10) : textes d'origine du schéma, points de chaque tiroir sous la phrase de la carte */
.tk-gm-was { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.tk-gm-was b { font-weight: 600; }