/* DataFish V3.1 : accueil (retours de Louis du 23/09). Chargé après v3.css, sur l'accueil seulement.
   Mêmes jetons (v2.css / v3.css), mêmes polices, pas de contours autour des blocs.
   14/10 (direction « premium sobre », .claude/DIRECTION-STYLE-14-10.md, blocs G1 à G3 de .claude/style-retenu.css) : dans tout le
   fichier sauf l'accroche "wave" (.hw*, intacte), pilules 999px ramenées à 4 px (var(--b-r-tag)), rayons de 10 à 39 px ramenés à
   6 px (var(--radius)), ombres portées retirées (anneaux de focus et filets inset gardés), titres en 700 ramenés à 600, bleus clairs
   #74C3EE et #8CCBF0 ramenés à var(--b-accent-dark), survol #16395C à var(--b-night-2). Les valeurs d'avant sont dans git (0da9ab6).
   Accueil (section « 14/10 » en fin de fichier, avant l'accroche "wave") : grille 3 x 3, vidéo marine, « Comment nous travaillons »
   en chiffres, réalisations sans dessin. Cette feuille est aussi chargée par les expertises, Notre offre, Qui nous sommes,
   Technologies, MaturIA et Notre approche : chaque règle reste limitée à ses classes. */

/* ---------- Titres de section : un titre court, une phrase dessous (pas de colonnes « titre à gauche, texte à droite ») ---------- */
.hm-exp .hm-sub { color: rgba(255, 255, 255, .68); }

/* ---------- Accroche : plus courte, le bandeau de logos reste dans le premier écran ---------- */
/* V4.3 (maquette A) : accroche raccourcie, pas plein écran ; le poisson reste, sans l'algue */
/* 07/10, retour de Louis (« trop petit, c’était mieux avant ») : hauteur de la V4.2 rétablie (presque plein écran) */
/* 09/10, retour de Louis : le bandeau de logos (2 x --trust-y + 64 px de logos) finit pile en bas du premier écran */
body.v3 .hm-hero { min-height: calc(100vh - 2 * var(--trust-y) - 64px); min-height: calc(100svh - 2 * var(--trust-y) - 64px); padding-top: calc(var(--header-h) + clamp(2rem, 4vw, 3.5rem)); padding-bottom: clamp(2.5rem, 4vw, 3.5rem); }
body.v2 .hm-hero h1 { font-size: clamp(2.3rem, 4.3vw, 3.5rem); max-width: none; letter-spacing: -0.032em; line-height: 1.06; }
.hm-hero h1 span { margin-top: .2rem; }
.hm-hero .df-lede { max-width: none; margin: 1.5rem 0 2rem; }
/* V4.3 (décision de Louis du 06/10) : phrase du premier échange sous le bouton, puis lien discret vers le questionnaire de MaturIA */
.hm-hero .hm-hero-note { margin: .9rem 0 0; font-size: .95rem; line-height: 1.5; color: var(--muted); }
.hm-hero .hm-hero-diag { display: block; width: fit-content; margin-top: .3rem; color: var(--tide); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.hm-hero .hm-hero-diag:hover { text-decoration-thickness: 2px; }

/* ---------- Logos qui défilent ---------- */
.hm-trust { background: #fff; padding: var(--trust-y) 0; } /* 09/10 : espace propre au bandeau (--trust-y de v3.css), indépendant des marges des sections */ /* 07/10 au soir (intégration) : rythme commun (--sec-y de v3.css), 25 px avant ; accueil et Qui nous sommes */
.hm-trust-in { display: flex; align-items: center; gap: 2.5rem; }
.hm-trust h2 { flex: none; margin: 0; font: 600 15px/1.3 var(--f-body); color: var(--muted); letter-spacing: 0; }
.hm-marquee {
    flex: 1; min-width: 0; overflow: hidden;
    padding: 6px; margin: -6px; /* 13/10 : place de l'anneau de focus des logos, sans rien déplacer (voir .hw-marquee, fin du fichier) */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.hm-logos { display: flex; align-items: center; gap: 3.5rem; width: max-content; margin: 0; padding: 0; list-style: none; animation: hm-marquee 46s linear infinite; }
.hm-marquee:hover .hm-logos, .hm-marquee:focus-within .hm-logos { animation-play-state: paused; }
@keyframes hm-marquee { to { transform: translateX(calc(-100% / 3)); } }
.hm-logos a { display: flex; align-items: center; height: 64px; padding: 0 .25rem; border-radius: 8px; }
.hm-logos img { height: 46px; width: auto; max-width: 150px; object-fit: contain; mix-blend-mode: multiply; filter: saturate(.85); transition: filter .25s var(--ease-out); }
.hm-logos a:hover img { filter: none; }

/* ---------- Expertises : cartes illustrées sur fond marine ---------- */
.hm-exp { background: var(--ink); color: #fff; }
body.v2 .hm-exp .hm-h { color: #fff; }
.hm-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.hm-card { grid-column: span 6; }
.hm-card--dashboards, .hm-card--applications { grid-column: span 7; }
.hm-card--forecasting, .hm-card--automation { grid-column: span 5; }
.hm-card > a {
    position: relative; display: flex; flex-direction: column; height: 100%;
    border-radius: var(--radius); background: #10304E; color: #fff; text-decoration: none; overflow: hidden;
    transition: background-color .35s var(--ease-out);
}
.hm-card > a:hover, .hm-card > a:focus-visible { background: #143A5E; }
.hm-card > a:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.hm-art { padding: 22px 22px 0; }
.hm-art .il { display: block; width: 100%; height: auto; max-height: 230px; }
.hm-txt { padding: 22px 26px 0; }
body.v2 .hm-card h3 { margin: 0 0 .45rem; font: 600 1.3rem/1.2 var(--f-display); color: #fff; letter-spacing: -0.01em; padding-right: 3rem; }
.hm-card p { margin: 0; font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, .7); max-width: 58ch; }
.hm-card p strong { color: #fff; font-weight: 600; }
.hm-ex { margin: auto 26px 24px; padding-top: 20px; }
.hm-ex-l { display: block; margin-bottom: .55rem; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .5); }
.hm-ex-c { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hm-ex-n { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: var(--b-r-tag); background: rgba(255, 255, 255, .07); font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .88); }
.hm-ex-n i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: var(--signal); }
.hm-ex-n i svg { width: 15px; height: 15px; }
.hm-ex-df i { background: #fff; color: var(--fish); }
.hm-ex-df i svg { width: 18px; height: 9px; }
.hm-ex-w { width: 16px; height: 2px; background-image: linear-gradient(90deg, rgba(255, 255, 255, .35) 50%, transparent 0); background-size: 6px 2px; }
/* au survol ou au clavier, les pointillés de la chaîne « Par exemple » s'allument (et défilent, sauf mouvement réduit). Voulu par Louis (25/09) : ne pas retirer. */
.hm-card > a:hover .hm-ex-w, .hm-card > a:focus-visible .hm-ex-w { background-image: linear-gradient(90deg, var(--signal) 50%, transparent 0); }
@media (prefers-reduced-motion: no-preference) {
    .hm-card > a:hover .hm-ex-w, .hm-card > a:focus-visible .hm-ex-w { animation: hm-dash .6s linear infinite; }
}
@keyframes hm-dash { to { background-position: 12px 0; } }
.hm-go {
    position: absolute; top: 20px; right: 20px; display: grid; place-items: center;
    width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .09); color: #fff;
    transition: background-color .3s var(--ease-out), color .3s var(--ease-out), transform .3s var(--ease-out);
}
.hm-go svg { width: 18px; height: 18px; }
.hm-card > a:hover .hm-go, .hm-card > a:focus-visible .hm-go { background: var(--signal); color: var(--ink); }

/* Illustrations : couleurs selon le fond */
.il { overflow: visible; }
.il [class*="-s"] { stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.il .il-tick { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14; stroke-dashoffset: 0; }
.hm-exp .il-panel { fill: rgba(255, 255, 255, .035); }
.hm-exp .il-tile { fill: rgba(255, 255, 255, .07); }
.hm-exp .il-hi { fill: rgba(111, 184, 232, .16); } /* 14/10 (relecture du lot 2) : #8EC1F0 au bleu clair sur marine #6FB8E8 */
.hm-exp .il-soft { fill: rgba(255, 255, 255, .2); }
.hm-exp .il-strong { fill: rgba(255, 255, 255, .8); }
.hm-exp .il-accent, .hm-exp .il-bar { fill: var(--signal); }
.hm-exp .il-soft-s { stroke: rgba(255, 255, 255, .13); }
.hm-exp .il-strong-s { stroke: rgba(255, 255, 255, .82); }
.hm-exp .il-accent-s { stroke: var(--signal); }
.hm-exp .il-band { fill: rgba(111, 184, 232, .15); } /* 14/10 (relecture du lot 2) : #8EC1F0 au bleu clair sur marine #6FB8E8 */
.hm-exp .il-core { fill: #fff; }
.hm-exp .il-onCore { fill: var(--fish); }
.hm-exp .il-tick { stroke: #fff; }
.hm-exp .il-tick-dark { stroke: var(--ink); }
.hm-exp .il-bubble { fill: rgba(255, 255, 255, .13); }
.hm-exp .il-area { fill: rgba(111, 184, 232, .26); stroke: var(--signal); stroke-width: 1.6; } /* 14/10 (relecture du lot 2) : #8EC1F0 au bleu clair sur marine #6FB8E8 */

/* au survol, l'illustration s'anime (repos = image complète, jamais vide). Exception voulue par Louis (25/09) à la règle « rien ne bouge au survol » : ne pas retirer. */
.il-bar, .il-grow, .il-grow-c { transform-box: fill-box; }
.il-bar { transform-origin: 50% 100%; }
.il-grow { transform-origin: 0 50%; }
.il-grow-c { transform-origin: 50% 50%; }
.il-run { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
    .hm-card > a:is(:hover, :focus-visible) .il-bar { animation: il-rise .9s var(--ease-out) both; animation-delay: calc(var(--i) * 45ms); } /* 14/10 : sans « .hm-wcard:is(:hover, :focus-within) .il-bar » (plus de dessin dans les réalisations) */
    .hm-card > a:is(:hover, :focus-visible) .il-grow { animation: il-widen 1.1s var(--ease-out) both; }
    .hm-card > a:is(:hover, :focus-visible) .il-grow-c { animation: il-scale 1s var(--ease-out) both; }
    .hm-card--dashboards > a:is(:hover, :focus-visible) .il-draw { animation: il-donut 1.2s var(--ease-out) both; }
    .hm-card--forecasting > a:is(:hover, :focus-visible) .il-draw { animation: il-march 1s linear infinite; }
    .hm-card > a:is(:hover, :focus-visible) .il-pulse { animation: il-pulse 1.4s var(--ease-out) infinite; transform-box: fill-box; transform-origin: center; }
    .hm-card > a:is(:hover, :focus-visible) .il-run { animation: il-run 1.3s var(--ease-out) infinite; }
    .hm-card > a:is(:hover, :focus-visible) .il-run2 { animation-delay: .65s; }
    .hm-card > a:is(:hover, :focus-visible) .il-tick { animation: il-tick .5s var(--ease-out) both; }
    .hm-card > a:is(:hover, :focus-visible) g:nth-of-type(n) .il-tick, .hm-card > a:is(:hover, :focus-visible) .il-tick:nth-of-type(2) { animation-delay: .15s; }
    .hm-card > a:is(:hover, :focus-visible) .il-pop { animation: il-pop .6s var(--ease-out) both; }
}
@keyframes il-rise { from { transform: scaleY(.25); } }
@keyframes il-widen { from { transform: scaleX(.3); } }
@keyframes il-scale { from { transform: scale(.55); opacity: .4; } }
@keyframes il-donut { from { stroke-dasharray: 0 100; } }
@keyframes il-march { to { stroke-dashoffset: -22; } }
@keyframes il-pulse { 50% { transform: scale(1.7); opacity: .45; } }
@keyframes il-run { 0% { opacity: 0; transform: translateX(0); } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(34px); } }
@keyframes il-tick { from { stroke-dashoffset: 14; } }
@keyframes il-pop { from { transform: translateY(6px); opacity: 0; } }

/* ---------- Schéma : données, outils, modèle d'IA, hébergement ---------- */
.hm-arch { background: #fff; }
.ar-stage {
    position: relative; display: grid;
    grid-template-columns: minmax(200px, 240px) minmax(0, 1fr) minmax(260px, 300px);
    grid-template-rows: 1fr auto auto;
    column-gap: clamp(3rem, 6vw, 5.5rem); row-gap: 26px;
    padding: 70px clamp(1.5rem, 3.5vw, 2.75rem) 34px;
    border-radius: var(--radius); background: var(--sea);
}
.ar-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.ar-wire { fill: none; stroke: #A9BDCE; stroke-width: 1.6; stroke-dasharray: 4 5; transition: stroke .3s; }
.ar-wire.is-model { stroke: #7FA3C2; }
.ar-pkt { fill: var(--fish); }
.ar-pkt.is-small { fill: var(--tide); }
.ar-fence {
    position: absolute; z-index: 0; border: 2px dashed #93AFC7; border-radius: var(--radius); pointer-events: none;
    transition: left .7s var(--ease-out), top .7s var(--ease-out), width .7s var(--ease-out), height .7s var(--ease-out), border-color .3s, background-color .3s;
}
.ar-fence-l, .ar-fence-r {
    position: absolute; top: -14px; display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: var(--b-r-tag); background: var(--sea); font-size: 13.5px; font-weight: 600; color: var(--tide); white-space: nowrap;
}
.ar-fence-l { left: 16px; }
.ar-fence-r { right: 16px; color: var(--muted); font-weight: 500; }
.ar-fence-l i { display: inline-grid; width: 16px; height: 16px; }
.ar-tools, .ar-core, .ar-team, .ar-host, .ar-model { position: relative; z-index: 1; transition: opacity .3s var(--ease-out); }
.ar-tools { grid-column: 1; grid-row: 1 / 3; display: flex; flex-direction: column; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ar-tool { display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 10px; border-radius: var(--radius); background: #fff; font-size: 15px; font-weight: 500; color: var(--ink); box-shadow: none; transition: box-shadow .3s, transform .3s var(--ease-out); } /* 14/10 (relecture) : sans ombre ; avant, 0 1px 2px rgba(11, 34, 57, .05) */
.ar-tool i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--sea); color: var(--tide); flex: none; }
.ar-tool i svg { width: 17px; height: 17px; }
.ar-tool.is-on { box-shadow: none; transform: translateX(3px); }
.ar-core { grid-column: 2; grid-row: 1; align-self: center; justify-self: center; display: grid; justify-items: center; gap: 4px; padding: 26px 30px 24px; border-radius: var(--radius); background: var(--ink); color: #fff; text-align: center; box-shadow: none; max-width: 280px; }
.ar-core-fish { display: block; width: 76px; color: var(--b-accent-dark); margin-bottom: 10px; }
.ar-core-fish svg { display: block; width: 100%; height: auto; }
.ar-core strong { font: 600 18px/1.25 var(--f-display); }
.ar-core small, .ar-team small { font-size: 14px; line-height: 1.4; }
.ar-core small { color: rgba(255, 255, 255, .7); }
.ar-team { grid-column: 2; grid-row: 2; justify-self: center; display: grid; grid-template-columns: auto auto; column-gap: 10px; align-items: center; padding: 10px 16px 10px 10px; border-radius: var(--radius); background: #fff; }
.ar-team i { grid-row: 1 / 3; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--sea); color: var(--tide); }
.ar-team i svg { width: 19px; height: 19px; }
.ar-team strong { font-size: 15px; color: var(--ink); }
.ar-team small { color: var(--muted); }
.ar-host { grid-column: 1 / 3; grid-row: 3; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--radius); background: rgba(255, 255, 255, .7); font-size: 15px; color: var(--ink); }
.ar-host i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: #fff; color: var(--tide); flex: none; }
.ar-host i svg { width: 17px; height: 17px; }
.ar-model { grid-column: 3; grid-row: 1 / 4; align-self: center; padding: 22px 22px 20px; border-radius: var(--radius); background: #fff; box-shadow: none; }
.ar-model-head strong { display: block; font: 600 18px/1.25 var(--f-display); color: var(--ink); }
.ar-model-head small { display: block; margin-top: 3px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.ar-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 16px; }
.ar-chips button {
    min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--b-r-tag); background: var(--sea);
    font: 600 14px/1 var(--f-body); color: var(--ink); cursor: pointer;
    transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.ar-chips button:hover { background: var(--tide-soft); }
.ar-chips button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.ar-chips button:focus-visible, .ar-promises button:focus-visible, .hm-nav button:focus-visible { outline: 2px solid var(--tide); outline-offset: 2px; }
.ar-card { display: grid; gap: 2px; min-height: 150px; }
.ar-card strong { font: 600 22px/1.2 var(--f-display); color: var(--ink); margin-top: 8px; }
.ar-card small { font-size: 14px; color: var(--muted); }
.ar-card p { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
.ar-badge { justify-self: start; padding: 4px 10px; border-radius: var(--b-r-tag); background: var(--tide-soft); font-size: 12.5px; font-weight: 600; color: var(--tide); }
.ar-badge.is-in { background: var(--ink); color: #fff; }
.ar-where { margin-top: 8px; line-height: 1.45; font-size: 13.5px; font-weight: 600; color: var(--tide); }
.ar-card:not([hidden]) { animation: ar-in .45s var(--ease-out); }
@keyframes ar-in { from { opacity: 0; transform: translateY(4px); } }
.ar-cost { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.5; color: var(--muted); }
/* point de passage : là où le fil franchit la clôture (seul ce qui est utile à la requête sort) */
.ar-api {
    position: absolute; z-index: 2; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%;
    background: #fff; box-shadow: 0 0 0 3px var(--tide) inset, 0 0 0 5px var(--sea);
    opacity: 0; transform: translate(-50%, -50%) scale(.6); transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.ar[data-inside="0"] .ar-api { opacity: 1; transform: translate(-50%, -50%); }

/* engagements : survol ou clic = la partie du schéma concernée ressort */
.ar-promises { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.ar-promises button {
    display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 3px; align-items: start; width: 100%; height: 100%;
    padding: 16px 16px 18px; border: 0; border-radius: var(--radius); background: transparent; text-align: left; cursor: pointer; font-family: var(--f-body); color: var(--ink);
    transition: background-color .25s var(--ease-out);
}
.ar-promises button:hover, .ar-promises button[aria-pressed="true"] { background: var(--sea); }
.ar-promises i { grid-row: 1 / 3; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius); background: var(--sea); color: var(--tide); transition: background-color .25s, color .25s; }
.ar-promises button:hover i, .ar-promises button[aria-pressed="true"] i { background: var(--ink); color: #fff; }
.ar-promises i svg { width: 19px; height: 19px; }
.ar-promises strong { font: 600 16px/1.3 var(--f-display); }
.ar-promises span { font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.ar[data-focus] .ar-tools, .ar[data-focus] .ar-core, .ar[data-focus] .ar-team, .ar[data-focus] .ar-host, .ar[data-focus] .ar-model { opacity: .35; }
.ar[data-focus="zone"] .ar-tools, .ar[data-focus="zone"] .ar-core, .ar[data-focus="zone"] .ar-team, .ar[data-focus="zone"] .ar-host,
.ar[data-focus="tools"] .ar-tools, .ar[data-focus="tools"] .ar-core, .ar[data-focus="tools"] .ar-team,
.ar[data-focus="model"] .ar-model, .ar[data-focus="model"] .ar-core,
.ar[data-focus="host"] .ar-host, .ar[data-focus="host"] .ar-model { opacity: 1; }
.ar[data-focus="zone"] .ar-fence, .ar[data-focus="host"] .ar-fence { border-color: var(--tide); background: rgba(31, 111, 168, .045); } /* 14/10 (relecture du lot 2) : #1F5F99 et #3A8CC8 au bleu d'accent */
.ar[data-focus="zone"][data-inside="1"] .ar-model { opacity: 1; }
.ar[data-focus="tools"] .ar-wire:not(.is-model), .ar[data-focus="model"] .ar-wire.is-model { stroke: var(--tide); }

/* ---------- Démarche : journal des livrables sous le scénario ---------- */
.sc-lower { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding: 18px; background: #fff; }
.sc-log, .sc-panels { border-radius: var(--radius); background: var(--sea); padding: 22px 24px; }
body.v2 .sc-log h3 { margin: 0 0 .9rem; font: 600 18px/1.25 var(--f-display); color: var(--ink); }
.sc-log-empty { margin: 0; font-size: 15px; color: var(--muted); }
.sc-log.has-items .sc-log-empty { display: none; }
.sc-log ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sc-log li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--radius); background: #fff; }
.sc-log li:not([hidden]) { animation: sc-log-in .5s var(--ease-out); }
@keyframes sc-log-in { from { opacity: 0; transform: translateY(6px); } }
.sc-log li i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; }
.sc-log li i svg { width: 13px; height: 13px; }
.sc-log li b { display: block; font-size: 14.5px; color: var(--ink); }
.sc-log li span { display: block; font-size: 14.5px; line-height: 1.4; color: var(--muted); }
.sc-log li em { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--tide); padding: 3px 9px; border-radius: var(--b-r-tag); background: var(--tide-soft); white-space: nowrap; }
.sc-log li.is-last { box-shadow: none; }
.sc-panels .sc-panel h3 { margin-top: 0; }
.sc-board .sc-foot { justify-content: flex-start; }

/* questions fréquentes, rangées sous la démarche */
.hm-faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 1rem 4rem; margin-top: clamp(3.5rem, 7vw, 5rem); }
body.v2 .hm-faq h3 { margin: 0; font: 600 clamp(1.4rem, 2.2vw, 1.75rem)/1.2 var(--f-display); color: var(--ink); }

/* ---------- Réalisations : carrousel ---------- */
.hm-work-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.hm-work-top .hm-head { margin-bottom: var(--sec-head); }
.hm-work-top .hm-sub { max-width: none; } /* 07/10 au soir : sous-titre sur toute la largeur laissée par les flèches */
.hm-nav { display: flex; gap: 8px; margin-bottom: var(--sec-head); flex: none; }
.hm-nav button { display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer; transition: background-color .2s, color .2s, opacity .2s; }
.hm-nav button:hover:not(:disabled) { background: var(--ink); color: #fff; }
.hm-nav button:disabled { opacity: .35; cursor: default; }
.hm-nav svg { width: 20px; height: 20px; }
.hm-works {
    display: grid; grid-auto-flow: column; grid-auto-columns: min(430px, 84vw); gap: 18px;
    margin: 0 calc(50% - 50vw) 0 0; padding: 4px calc(50vw - 50%) 8px 0; list-style: none;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-padding-left: 0;
}
.hm-works::-webkit-scrollbar { display: none; }
.hm-works:focus-visible { outline: 2px solid var(--tide); outline-offset: 4px; border-radius: var(--radius); }
.hm-wcard { scroll-snap-align: start; display: flex; flex-direction: column; padding: 14px 14px 24px; border-radius: var(--radius); background: #fff; }
/* 14/10 (L2-T6, règles mortes) : plus de dessin dans les cartes des réalisations (div.hm-art retiré de v3-home-build.mjs au lot 1).
   Retirées : .hm-wcard .hm-art { padding: 0; border-radius: var(--radius); overflow: hidden; } et
   .hm-wcard .il { display: block; width: 100%; height: auto; }. */
body.v2 .hm-wcard h3 { margin: 20px 10px 6px; font: 600 20px/1.25 var(--f-display); color: var(--ink); }
.hm-wcard p { margin: 0 10px; font-size: 16px; line-height: 1.55; color: var(--muted); }
.hm-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: auto 10px 0; padding: 16px 0 0; list-style: none; }
.hm-tags li { padding: 5px 11px; border-radius: var(--b-r-tag); background: var(--sea); font-size: 13.5px; font-weight: 600; color: var(--ink); }
.hm-work .il-panel { fill: #F2F6F9; }
.hm-work .il-tile, .hm-work .il-bubble { fill: #fff; }
.hm-work .il-doc { fill: #fff; filter: drop-shadow(0 2px 3px rgba(8, 26, 46, .08)); } /* 14/10 (relecture du lot 2) : ancien marine #0B2239 au marine du site */
.hm-work .il-soft { fill: #C8D6E2; }
.hm-work .il-soft-f { fill: #DCE6EE; }
.hm-work .il-strong { fill: var(--ink); }
.hm-work .il-accent, .hm-work .il-bar { fill: var(--fish); }
.hm-work .il-hi2 { fill: var(--tide-soft); }
.hm-work .il-core { fill: var(--ink); }
.hm-work .il-onCore-r { fill: rgba(255, 255, 255, .5); }
.hm-work .il-onCore-s { stroke: #fff; }
.hm-work .il-soft-s { stroke: #C3D2DF; }
.hm-work .il-accent-s { stroke: var(--fish); }
.hm-work .il-tick { stroke: var(--tide); }
.hm-all { margin-top: 1.25rem; gap: 8px; }
.hm-all i { display: inline-grid; width: 18px; height: 18px; transition: transform .25s var(--ease-out); }

/* ---------- Par où commencer : deux portes ---------- */
body.v2 .hm-start { text-align: left; padding: clamp(4.5rem, 8vw, 6.5rem) 0; }
body.v2 .hm-start h2 { margin: 0 0 clamp(2rem, 4vw, 2.75rem); font-size: clamp(2rem, 3.6vw, 2.9rem); }
.hm-doors { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; }
.hm-door { display: flex; flex-direction: column; padding: clamp(1.6rem, 3vw, 2.25rem); border-radius: var(--radius); background: rgba(255, 255, 255, .06); }
.hm-door--diag { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 1.5rem; align-items: center; background: rgba(255, 255, 255, .1); }
body.v2 .hm-door h3 { margin: 0 0 .6rem; font: 600 1.45rem/1.2 var(--f-display); color: #fff; }
.hm-door p { margin: 0 0 1.6rem; font-size: 16.5px; line-height: 1.6; color: rgba(255, 255, 255, .75); max-width: 52ch; }
.hm-door .df-actions { gap: .75rem 1.5rem; }
.hm-door .df-link { color: var(--signal); }
.hm-door .df-link:hover { color: #fff; }
.hm-radar svg { display: block; width: 100%; height: auto; }
.hm-radar .dx-ring { fill: none; stroke: rgba(255, 255, 255, .16); }
.hm-radar .dx-spoke { stroke: rgba(255, 255, 255, .12); }
.hm-radar .dx-area { fill: rgba(111, 184, 232, .28); stroke: var(--signal); stroke-width: 2; } /* 14/10 (relecture du lot 2) : #8EC1F0 au bleu clair sur marine #6FB8E8 */
.hm-radar .dx-vertex { fill: var(--signal); }
.hm-contact { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: auto 0 0; padding: 1.5rem 0 0; list-style: none; }
.hm-contact li { display: inline-flex; align-items: center; gap: 8px; }
.hm-contact i { display: inline-grid; width: 18px; height: 18px; color: var(--signal); }
.hm-contact a { color: #fff; text-decoration: none; font-weight: 500; }
.hm-contact a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Écrans intermédiaires et mobiles ---------- */
@media (max-width: 1100px) {
    .hm-card, .hm-card--dashboards, .hm-card--applications, .hm-card--forecasting, .hm-card--automation { grid-column: span 6; }
    .ar-stage { grid-template-columns: minmax(180px, 210px) minmax(0, 1fr) minmax(240px, 270px); column-gap: 2.5rem; }
    .ar-promises { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .hm-trust-in { flex-direction: column; align-items: stretch; gap: .75rem; }
    .hm-card, .hm-card--dashboards, .hm-card--applications, .hm-card--forecasting, .hm-card--automation { grid-column: 1 / -1; }
    .ar-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 22px; padding: 58px 16px 22px; }
    .ar-tools { grid-column: 1; grid-row: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; order: 1; }
    .ar-tool { font-size: 14px; padding: 8px 10px 8px 8px; }
    .ar-core { grid-column: 1; grid-row: auto; order: 2; }
    .ar-team { grid-column: 1; grid-row: auto; order: 3; }
    .ar-host { grid-column: 1; grid-row: auto; order: 4; }
    .ar-model { grid-column: 1; grid-row: auto; order: 5; }
    .sc-lower { grid-template-columns: minmax(0, 1fr); padding: 12px; }
    .hm-faq { grid-template-columns: minmax(0, 1fr); }
    .hm-doors { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .ar-promises { grid-template-columns: minmax(0, 1fr); }
    .hm-door--diag { grid-template-columns: minmax(0, 1fr); }
    .hm-radar { max-width: 180px; }
    .hm-work-top { display: block; }
    .hm-nav { display: none; }
    .hm-ex-w { width: 10px; }
    .sc-log li { grid-template-columns: 26px minmax(0, 1fr); }
    .sc-log li em { grid-column: 2; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
    .hm-logos { animation: none; flex-wrap: wrap; width: auto; gap: 1.5rem 2.5rem; }
    .hm-logos li[aria-hidden="true"] { display: none; }
    .hm-marquee { -webkit-mask-image: none; mask-image: none; }
    .ar-fence { transition: none; }
}

/* détail de l'étape, à côté du journal : même échelle que le journal */
body.v2 .sc-panels .sc-panel h3 { margin: 0 0 .35rem; font: 600 18px/1.25 var(--f-display); color: var(--ink); }
.sc-panels .sc-panel > strong { display: block; margin-bottom: .75rem; font-size: 16px; }
.sc-panels .df-ticks li { font-size: 15.5px; }

/* ---------- Schéma : environnement sécurisé et choix de l'hébergement ---------- */
/* la clôture change d'aspect selon l'hébergement : souverain (trait plein, fond teinté), Europe (tirets), hors UE (gris) */
.ar-fence { border-width: 2px; }
.ar[data-level="sov"] .ar-fence { border-style: solid; border-color: rgba(31, 111, 168, .55); background: rgba(31, 111, 168, .05); } /* 14/10 (relecture du lot 2) : #1F5F99 et #3A8CC8 au bleu d'accent */
.ar[data-level="eu"] .ar-fence { border-style: dashed; border-color: rgba(31, 111, 168, .5); background: rgba(31, 111, 168, .025); } /* 14/10 (relecture du lot 2) : #1F5F99 et #3A8CC8 au bleu d'accent */
.ar[data-level="out"] .ar-fence { border-style: dashed; border-color: #B9C6D1; background: none; }
.ar-fence-l, .ar-fence-r { top: -15px; padding: 5px 12px; background: #fff; box-shadow: none; font-size: 13.5px; }
.ar-fence-l { color: var(--ink); }
.ar-fence-l i { color: var(--tide); }
.ar[data-level="out"] .ar-fence-l { color: var(--muted); }
.ar-fence-r { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; }
.ar-fence-lvl { padding: 2px 8px; border-radius: var(--b-r-tag); background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; }

/* choix de l'hébergement, dans le bas de la clôture */
.ar-host { align-items: flex-start; background: #fff; box-shadow: none; } /* 14/10 (relecture) : sans ombre ; avant, 0 1px 2px rgba(11, 34, 57, .05), comme .ar-tool */
.ar-host > i { margin-top: 2px; }
.ar-host-in { flex: 1; min-width: 0; }
.ar-host-in > strong { display: block; margin-bottom: 8px; font: 600 15px/1.2 var(--f-display); color: var(--ink); }
.ar-hchips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ar-hchips button {
    display: grid; gap: 1px; padding: 8px 10px; border: 0; border-radius: var(--radius); background: var(--sea);
    text-align: left; cursor: pointer; color: var(--ink); transition: background-color .2s, color .2s;
}
.ar-hchips button b { font: 600 13.5px/1.25 var(--f-body); }
.ar-hchips button small { font-size: 12px; line-height: 1.3; color: var(--muted); }
.ar-hchips button:hover { background: var(--tide-soft); }
.ar-hchips button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.ar-hchips button[aria-pressed="true"] small { color: rgba(255, 255, 255, .7); }
.ar-hchips button:focus-visible { outline: 2px solid var(--tide); outline-offset: 2px; }
.ar-hnote { margin: 8px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); }

/* badge du modèle selon l'endroit où il tourne */
.ar-badge.is-sov { background: var(--ink); color: #fff; }
.ar-badge.is-eu { background: var(--tide-soft); color: var(--tide); }
.ar-badge.is-out { background: #E7ECF0; color: var(--muted); }
/* 14/10 : plus d'ambre (avant : fond #FBEFE3, texte #8A5A22) ; l'alerte se dit en texte, sur le gris de survol */
.ar-badge.is-api { background: var(--b-hover); color: var(--b-text); }
.ar[data-inside="0"] .ar-where { color: var(--b-text); }

@media (max-width: 1100px) { .ar-hchips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .ar-fence-l, .ar-fence-r { font-size: 12.5px; padding: 4px 10px; } .ar-fence-r { right: 10px; } .ar-fence-l { left: 10px; } }
@media (max-width: 480px) { .ar-fence-r .ar-fence-host { display: none; } }

/* ancres « Démarche » et « Vos données » : le titre arrive juste sous le menu, le schéma tient dans l'écran */
body.v3 .hm-head[id], body.v3 .hm-head [id] { scroll-margin-top: calc(var(--header-h) + 20px); }
.hm-work .il-onCore-f { fill: #fff; }

.ar-more { margin: 20px 0 0; }

/* ================= Accueil V3.5 ================= */
/* Schéma « données et IA » sur fond écume, intérieur blanc : il se détache de la démarche qui suit, sur fond blanc */
.hm-arch.df-sea { background: var(--sea); }
.hm-arch.df-sea .ar-stage { background: #fff; box-shadow: none; }
.hm-arch.df-sea .ar-tool, .hm-arch.df-sea .ar-team, .hm-arch.df-sea .ar-host { background: var(--sea); box-shadow: none; }
.hm-arch.df-sea .ar-tool i, .hm-arch.df-sea .ar-team i, .hm-arch.df-sea .ar-host i { background: #fff; }
.hm-arch.df-sea .ar-model { background: var(--sea); box-shadow: none; }
.hm-arch.df-sea .ar-chips button, .hm-arch.df-sea .ar-hchips button { background: #fff; }
.hm-arch.df-sea .ar-chips button:hover, .hm-arch.df-sea .ar-hchips button:hover { background: var(--tide-soft); }
.hm-arch.df-sea .ar-chips button[aria-pressed="true"], .hm-arch.df-sea .ar-hchips button[aria-pressed="true"] { background: var(--ink); }
.hm-arch.df-sea .ar-cost { border-top-color: rgba(8, 26, 46, .1); } /* 14/10 (relecture du lot 2) : ancien marine #0B2239 au marine du site */
.hm-arch.df-sea .ar-api { box-shadow: 0 0 0 3px var(--tide) inset, 0 0 0 5px #fff; }
.hm-arch.df-sea .ar-promises button:hover, .hm-arch.df-sea .ar-promises button[aria-pressed="true"] { background: #fff; }
.hm-arch.df-sea .ar-promises i { background: #fff; }

.ar-fam { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--tide); text-underline-offset: 4px; }

/* Accueil V3.6 : pastilles de modèles groupées, hébergement épuré, accès vers Technologies */
.ar-chips .ar-chip-l { flex-basis: 100%; margin: 4px 0 -2px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.ar-chips .ar-chip-l:first-child { margin-top: 0; }
.ar-hchips button { place-items: center; min-height: 40px; padding: 8px 6px; text-align: center; }
.ar-hchips button b { white-space: nowrap; }
.ar-deep { display: flex; align-items: center; gap: 16px; margin-top: 22px; padding: 18px 22px; border-radius: var(--radius); background: var(--ink); color: #fff; text-decoration: none; transition: background-color .25s var(--ease-out); }
.ar-deep:hover { background: #143A5E; }
.ar-deep > i { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: var(--radius); background: rgba(255, 255, 255, .1); color: var(--b-accent-dark); }
.ar-deep > i svg { width: 22px; height: 22px; }
.ar-deep > span { display: grid; gap: 2px; flex: 1; min-width: 0; }
.ar-deep b { font: 600 18px/1.25 var(--f-display); }
.ar-deep small { font-size: 14.5px; line-height: 1.4; color: rgba(255, 255, 255, .72); }
.ar-deep > em { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--ink); transition: background-color .25s var(--ease-out); }
.ar-deep:hover > em { background: var(--signal); }
.ar-deep > em svg { width: 18px; height: 18px; }
.ar-deep:focus-visible { outline: 2px solid var(--tide); outline-offset: 3px; }

/* V4 : l'exemple de chaque expertise tient sur une ligne */
.hm-ex-c { flex-wrap: nowrap; }
.hm-ex-n { white-space: nowrap; font-size: 13.5px; padding-right: 11px; }
@media (max-width: 560px) { .hm-ex-c { flex-wrap: wrap; } }

/* V4 : bloc « Le modèle d'IA » compact, le détail en bulle */
.ar-model { padding: 18px 18px 16px; }
.ar-model .ar-chips { margin: 10px 0 12px; }
.ar-card { position: relative; min-height: 0; gap: 3px; }
.ar-card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; }
.ar-card-h strong { margin: 0; font-size: 20px; }
.ar-card .ar-badge { justify-self: auto; }
.ar-where { margin-top: 4px; }
.ar-more-btn { justify-self: start; display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; padding: 0; border: 0; background: none; font: 600 13.5px/1.3 var(--f-body); color: var(--tide); cursor: pointer; }
.ar-more-btn .df-plus { width: 20px; height: 20px; }
.ar-more-btn .df-plus::before, .ar-more-btn .df-plus::after { width: 9px; margin-left: -4.5px; }
.ar-more-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.ar-more-btn:focus-visible { outline: 2px solid var(--tide); outline-offset: 2px; border-radius: 4px; }
.ar-pop { position: absolute; left: -8px; right: -8px; bottom: calc(100% + 10px); z-index: 6; display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--radius); background: var(--ink); color: #fff; box-shadow: none; animation: ar-in .25s var(--ease-out); }
.ar-pop[hidden] { display: none; }
.ar-pop b { font: 600 16px/1.25 var(--f-display); }
.ar-pop span { font-size: 12.5px; color: var(--b-accent-dark); }
.ar-pop p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .88); }
.ar-hchips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ar-pop { bottom: auto; top: calc(100% + 10px); }

/* V4 : sur grand écran, le carrousel des réalisations reste dans la largeur du contenu (trois cartes visibles, centré avec le titre) */
@media (min-width: 1360px) {
    .hm-works { grid-auto-columns: calc((100% - 36px) / 3); margin: 0; padding: 4px 0 8px; }
}

/* V4 : sur téléphone, les libellés d'hébergement passent à la ligne plutôt que d'être coupés */
@media (max-width: 480px) { .ar-hchips button { padding: 8px 4px; } .ar-hchips button b { white-space: normal; font-size: 13px; } }


/* Repère d'interaction (encart à cheval sur le haut du schéma) : sous 900 px, les libellés de la clôture (calculée à 32 px
   au-dessus des outils) remonteraient sous l'encart ; 16 px de plus en haut de la carte */
@media (max-width: 900px) { .df-cue + .ar .ar-stage { padding-top: 74px; } }

/* ================= V5 (audit) : accueil. Règles limitées à l'accueil (main.hm ou classes hm-, ar-, tr-) ================= */
/* V4.2 (point 15, puis retour de Louis du 25/09 soir) : encart « selon votre maturité », DÉTACHÉ des six cartes (ce n'est pas une
   expertise, il est à part) et mis en exergue : écart nettement plus grand que l'écart entre cartes, fond clair (écume) au lieu du
   marine des cartes, titre plus grand. Classes .hm-mat* non limitées à l'accueil : composant réutilisable (v3-home.css est aussi chargé
   sur les pages d'expertise). Quatre marches cliquables (chacune mène à son niveau) ; le poisson en pixels monte sur la marche
   survolée ou choisie au clavier (animation à l'intérieur de l'encart, l'encart lui-même ne bouge pas). Pas de contour. */
.hm-mat {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 476px); grid-template-areas: "txt stairs" "btn stairs";
    align-items: center; column-gap: 3rem; row-gap: 1.75rem;
    margin: clamp(44px, 5.2vw, 76px) 0 0; padding: clamp(1.75rem, 3.4vw, 2.75rem) clamp(1.4rem, 3.6vw, 3rem);
    border-radius: var(--radius); background: var(--sea); color: var(--ink);
}
.hm-mat-txt { grid-area: txt; align-self: end; }
body.v2 .hm-mat h3 { margin: 0 0 .7rem; font: 600 clamp(1.65rem, 2.9vw, 2.3rem)/1.12 var(--f-display); letter-spacing: -0.02em; color: var(--ink); }
.hm-mat p { margin: 0; max-width: 44ch; font-size: 17px; line-height: 1.55; color: var(--muted); }
body.v2 .hm-mat-btn { grid-area: btn; align-self: start; justify-self: start; gap: 10px; text-align: left; }
@media (min-width: 1200px) { body.v2 .hm-mat-btn { white-space: nowrap; } }
.hm-mat-btn i { display: inline-grid; flex: none; width: 18px; height: 18px; }
.hm-mat-btn i svg { display: block; width: 100%; height: 100%; }

/* les marches : --a = marche où se tient le poisson (1 au repos), --g = écart, --pt = place au-dessus des marches, --bh = hauteur de la plus haute */
.hm-mat-stairs { grid-area: stairs; position: relative; --a: 1; --g: 6px; --pt: 34px; --bh: 104px; }
/* marge de -8 px : les marches (dans des liens de 8 px de marge intérieure) s'alignent sur le bord du texte et de l'encart */
.hm-mat-stairs ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); margin: 0 -8px; padding: 0; list-style: none; }
.hm-mat-stairs li { display: flex; }
.hm-mat-stairs a {
    display: flex; flex-direction: column; width: 100%; padding: var(--pt) 8px 14px; border-radius: var(--radius);
    color: var(--ink); text-decoration: none; transition: background-color .25s var(--ease-out);
}
.hm-mat-bar { position: relative; display: block; height: var(--bh); margin-bottom: 14px; }
.hm-mat-bar::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--n) * 25%);
    border-radius: 8px 8px 4px 4px; background: #CFE0EE; transition: background-color .3s var(--ease-out);
}
.hm-mat-stairs small { font-size: 13px; font-weight: 600; color: var(--muted); }
.hm-mat-stairs b { margin: 2px 0 4px; font: 600 16px/1.2 var(--f-display); color: var(--ink); }
.hm-mat-stairs a > span:last-child { font-size: 14px; line-height: 1.4; color: var(--muted); }
.hm-mat-stairs a:hover, .hm-mat-stairs a:focus-visible { background: #fff; }
.hm-mat-stairs a:hover b, .hm-mat-stairs a:focus-visible b { color: var(--tide); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.hm-mat-stairs a:focus-visible { outline: 2px solid var(--tide); outline-offset: 2px; }
/* marche du poisson : marée ; marches déjà franchies : signal ; au repos, le poisson est sur la première */
@media (min-width: 601px) {
    .hm-mat-stairs li:first-child .hm-mat-bar::before { background: var(--tide); }
    /* au repos, un dégradé du plus foncé (marche du poisson) au plus clair : les marches 2 à 4 ne ressemblent plus à des blocs vides */
    .hm-mat-stairs li:nth-child(2) .hm-mat-bar::before { background: #5E97C7; }
    .hm-mat-stairs li:nth-child(3) .hm-mat-bar::before { background: #9CC0DF; }
    .hm-mat-stairs:has(a:is(:hover, :focus-visible)) li .hm-mat-bar::before { background: #CFE0EE; }
    .hm-mat-stairs:has(li:nth-child(2) a:is(:hover, :focus-visible)) { --a: 2; }
    .hm-mat-stairs:has(li:nth-child(3) a:is(:hover, :focus-visible)) { --a: 3; }
    .hm-mat-stairs:has(li:nth-child(4) a:is(:hover, :focus-visible)) { --a: 4; }
    .hm-mat-stairs:has(li:nth-child(2) a:is(:hover, :focus-visible)) li:nth-child(-n+1) .hm-mat-bar::before,
    .hm-mat-stairs:has(li:nth-child(3) a:is(:hover, :focus-visible)) li:nth-child(-n+2) .hm-mat-bar::before,
    .hm-mat-stairs:has(li:nth-child(4) a:is(:hover, :focus-visible)) li:nth-child(-n+3) .hm-mat-bar::before { background: var(--signal); }
    .hm-mat-stairs:has(li a:is(:hover, :focus-visible)) li a:is(:hover, :focus-visible) .hm-mat-bar::before { background: var(--tide); }
}
.hm-mat-fish {
    position: absolute; z-index: 1; width: 32px; height: 16px; color: var(--fish); pointer-events: none;
    left: calc(-8px + (100% + 16px - 3 * var(--g)) / 4 * (var(--a) - .5) + (var(--a) - 1) * var(--g));
    top: calc(var(--pt) + var(--bh) - var(--a) * var(--bh) / 4 - 22px);
    transform: translateX(-50%);
}
.hm-mat-fish svg { display: block; width: 100%; height: 100%; }
@media (prefers-reduced-motion: no-preference) {
    .hm-mat-fish { transition: left .5s cubic-bezier(.3, .7, .4, 1), top .35s cubic-bezier(.3, 1.4, .5, 1) .08s; }
}
@media (max-width: 1199px) {
    .hm-mat { grid-template-columns: minmax(0, 1fr); grid-template-areas: "txt" "stairs" "btn"; row-gap: 1.5rem; }
    .hm-mat-txt { align-self: start; }
    .hm-mat-stairs { max-width: 640px; }
}
/* téléphone : les marches deviennent une liste (une ligne par niveau, sa marche à gauche), fond blanc pour montrer ce qui se touche */
@media (max-width: 600px) {
    .hm-mat { padding: 1.5rem 1.1rem; row-gap: 1.25rem; }
    .hm-mat p { font-size: 16px; }
    .hm-mat-stairs { --bh: 40px; }
    .hm-mat-stairs ol { grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0; }
    .hm-mat-stairs a { display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 14px; align-items: center; padding: 10px 14px; background: #fff; }
    .hm-mat-bar { grid-row: 1 / span 3; margin: 0; }
    .hm-mat-stairs small { grid-column: 2; font-size: 12.5px; }
    .hm-mat-stairs b { grid-column: 2; margin: 0; font-size: 16px; }
    .hm-mat-stairs a > span:last-child { grid-column: 2; font-size: 14px; }
    .hm-mat-fish { display: none; }
    .hm-mat-bar::before { background: var(--signal); }
    .hm-mat-stairs a:is(:hover, :focus-visible) .hm-mat-bar::before { background: var(--tide); }
    body.v2 .hm-mat-btn { justify-self: stretch; text-align: center; }
}

/* P17 : sur téléphone (sous 700 px) : de la place au-dessus du titre pour le poisson (js/poissons.js), repères empilés,
   illustrations des cartes plus basses, chaîne « Par exemple » resserrée sur une ligne (sa taille suit la largeur de la carte) */
@media (max-width: 700px) {
    body.v3 main.hm .hm-hero { padding-top: calc(var(--header-h) + 94px); }
    .hm-exp .hm-bento { gap: 12px; }
    .hm-exp .hm-card .hm-art { padding: 14px 18px 0; }
    .hm-exp .hm-card .hm-art .il { width: auto; height: 120px; max-width: 100%; max-height: none; }
    .hm-exp .hm-card .hm-txt { padding: 14px 18px 0; }
    body.v2 .hm-exp .hm-card h3 { font-size: 1.2rem; margin-bottom: .35rem; }
    .hm-exp .hm-card p { font-size: 15px; line-height: 1.5; }
    .hm-exp .hm-go { top: 14px; right: 14px; width: 38px; height: 38px; }
    /* largeur de la chaîne = 52 px fixes (marges, pointillés) + 22 fois la taille du texte : le texte vaut au plus 12 px, 11 px à 360 px de large */
    .hm-exp .hm-ex { container-type: inline-size; margin: auto 14px 16px; padding-top: 10px; }
    .hm-exp .hm-ex-l { margin: 0 0 .35rem 4px; font-size: 12.5px; }
    .hm-exp .hm-ex-c { flex-wrap: nowrap; gap: 3px; }
    .hm-exp .hm-ex-n { flex: none; gap: 3px; padding: 2px 5px 2px 2px; font-size: 12px; font-size: min(12px, calc((100cqi - 56px) * .0452)); letter-spacing: -.01em; }
    .hm-exp .hm-ex-n i { width: 16px; height: 16px; width: min(16px, calc((100cqi - 56px) * .0603)); height: min(16px, calc((100cqi - 56px) * .0603)); }
    .hm-exp .hm-ex-n i svg { width: 70%; height: 70%; }
    .hm-exp .hm-ex-df i svg { width: 80%; height: 40%; }
    .hm-exp .hm-ex-w { flex: none; width: 5px; background-size: 3px 2px; }
}

/* ================= V5 (audit), corrections du lot accueil ================= */
/* Issue 16 (P18) : logos de poids voisins, hauteur réglée logo par logo (data-logo posé par v3-home-build.mjs).
   Les fichiers restent ceux fournis : SAGE n'existe qu'en version verticale, MILPA et MYPE ont un fond plein (plus petits pour compenser). */
.hm-logos a[data-logo="fortifika"] img { height: 34px; }
.hm-logos a[data-logo="alto"] img { height: 50px; }
.hm-logos a[data-logo="yourban"] img { height: 40px; }
.hm-logos a[data-logo="mype"] img { height: 42px; }
.hm-logos a[data-logo="milpa"] img { height: 36px; }
.hm-logos a[data-logo="sage"] img { height: 60px; }
/* Issue 8 (P18) : sous 900 px, pas de défilement : les six logos à la suite, sur plusieurs lignes (comme avec « moins d'animations ») */
@media (max-width: 900px) {
    .hm-logos { animation: none; flex-wrap: wrap; width: auto; gap: .75rem 2rem; }
    .hm-logos li[aria-hidden="true"] { display: none; }
    .hm-marquee { -webkit-mask-image: none; mask-image: none; }
    .hm-logos a { height: 56px; }
    /* V4.3 (finition) : deux rangées de trois logos au lieu de 2 / 3 / 1 (environ 150 px de haut au lieu de 271) */
    .hm-logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; align-items: center; gap: .5rem 1rem; }
    .hm-logos li { min-width: 0; max-width: 100%; }
    .hm-logos a { height: 44px; max-width: 100%; padding: 0; }
    .hm-logos img { max-width: 100%; }
    .hm-logos a[data-logo="alto"] img { height: 40px; }
    .hm-logos a[data-logo="mype"] img { height: 36px; }
    .hm-logos a[data-logo="sage"] img { height: 44px; }
}

/* Issue 12 : même hauteur d'illustration pour toutes les cartes d'expertise, les titres d'une même rangée partent au même niveau */
@media (min-width: 701px) {
    .hm-exp .hm-card .hm-art .il { width: 100%; height: 230px; max-height: none; }
}


/* ================= V4.2 (point 19) : bandeau final de la V4 (Diagnostic express à gauche, échange à droite), sans photos.
   La carte du Diagnostic n'a plus d'enveloppe : titre, texte et boutons dans sa première colonne, le radar dans la seconde.
   Au-dessus de 900 px, les deux cartes partagent les rangées de .hm-doors (sous-grille) : titres, textes et boutons à la même
   hauteur, les deux boutons pleins sur la même ligne ; les coordonnées occupent la 4e rangée. ================= */
main.hm .hm-door--diag { grid-template-columns: minmax(0, 1fr) 180px; grid-auto-rows: auto; column-gap: 1.5rem; row-gap: 0; align-items: start; align-content: start; }
main.hm .hm-door--diag > h3, main.hm .hm-door--diag > p, main.hm .hm-door--diag > .df-actions { grid-column: 1; }
main.hm .hm-door--diag > .hm-radar { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
main.hm .hm-door .df-actions { align-self: start; }
/* Même disposition dans les deux cartes, à toutes les largeurs : le lien secondaire sous son bouton (la colonne du Diagnostic est trop étroite à côté du radar pour les deux sur une ligne). */
main.hm .hm-door .df-actions { flex-direction: column; align-items: flex-start; gap: .75rem; }
@media (min-width: 901px) {
    /* V4.3 (finition) : trois rangées (titre, texte, boutons) ; l'adresse e-mail se cale en bas de la troisième, sur la ligne de « Découvrir MaturIA » */
    main.hm .hm-doors { grid-template-rows: repeat(3, auto); row-gap: 0; }
    main.hm .hm-door { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
    main.hm .hm-door--diag > .hm-radar { grid-row: 1 / span 3; }
    main.hm .hm-door--talk > .hm-contact { grid-row: 3; align-self: end; margin: 0; padding: 0; }
    main.hm .hm-door--talk .hm-contact li { min-height: 44px; }
}
@media (max-width: 560px) {
    main.hm .hm-door--diag { grid-template-columns: minmax(0, 1fr); }
    /* V4.3 (finition) : radar masqué sur téléphone (il ajoutait environ 270 px avant la prise de rendez-vous) ; le code reste */
    main.hm .hm-door--diag > .hm-radar { display: none; }
    /* « Faire le Diagnostic express » tient sur une ligne à 390 px (296 px avec 24 px de marge intérieure, 288 disponibles) */
    main.hm .hm-door .cta-button { padding-left: 18px; padding-right: 18px; }
}


/* ================= V4.3 (06/10, phase 1 de .claude/PLAN-V43.md) : accueil simplifié ================= */
/* Accroche sur téléphone (maquette A) ; la place au-dessus du titre pour le poisson (P17, règle « max-width: 700px ») est gardée */
@media (max-width: 640px) {
    body.v3 .hm-hero { padding-bottom: 2.5rem; background-position: right -330px top 30px; background-size: 700px; }
    .hm-hero .df-lede { margin: 1rem 0 1.5rem; font-size: 1.1rem; }
    .hm-hero .df-actions { gap: .5rem 1.5rem; }
}

/* --- « Nos expertises » : grille claire de .claude/maquette-expertises-a.html (préfixe xa) ; 4 x 2 depuis le 07/10 (décision B de Louis,
   sept expertises et la case « Vous ne savez pas par où commencer ? », règles en fin de fichier), 3 x 2 avant (xa-grid--six, garde-manger).
   Cartes écume sur fond blanc, petite illustration animée au survol, titre, une phrase, « Découvrir l'offre ».
   Lignes des cartes alignées d'une colonne à l'autre (sous-grille : dessin, titre, phrase, lien). --- */
/* 07/10 au soir : espace haut et bas de --sec-y et écart titre-contenu de --sec-head (v3.css), comme toutes les sections du site */
.xa { background: #fff; padding: var(--sec-y) 0; }
/* V4.3 (finition) : même taille pour tous les titres de section de l'accueil (celle de la maquette A) */
body.v2 main.hm .hm-h, body.v2 main.hm .hm-start h2 { font-size: clamp(1.9rem, 3vw, 2.5rem); }
.xa-grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 16px; row-gap: 0;
    margin: 0; padding: 0; list-style: none;
}
.xa-card { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; padding-bottom: 16px; }
.xa-card:nth-last-child(-n+4) { padding-bottom: 0; } /* l'écart entre les deux rangées est porté par la carte : les lignes internes (sous-grille) restent sans écart */
.xa-card > a {
    grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; row-gap: 0;
    padding: 18px 22px 18px; border-radius: var(--radius); background: var(--sea); color: var(--ink); text-decoration: none;
    transition: background-color .25s var(--ease-out);
}
.xa-card > a:hover, .xa-card > a:focus-visible { background: var(--tide-soft); }
.xa-card > a:focus-visible { outline: 2px solid var(--tide); outline-offset: 3px; }
.xa-art { display: block; margin-bottom: 14px; }
.xa-art .il { display: block; height: 92px; width: auto; }
/* 09/10 (Louis) : titres alignés en haut d’une carte à l’autre, la phrase suit son titre (titre et phrase dans .xa-txt).
   10/10 : essai des phrases alignées entre elles (.xa-txt { display: contents; }, span 4) écarté par Louis : un blanc séparait la
   phrase de son titre d’une ligne. Les liens « Découvrir l’offre » restent alignés en bas. */
.xa-txt { align-self: start; }
body.v2 .xa-card h3 { margin: 0 0 6px; font: 600 18px/1.25 var(--f-display); letter-spacing: -0.01em; color: var(--ink); }
.xa-card p { margin: 0; font-size: 15px; line-height: 1.47; color: var(--muted); }
.xa-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; align-self: end; justify-self: start;
    font-size: 15px; font-weight: 600; color: var(--tide); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.xa-more i, .xa-go { display: inline-grid; flex: none; width: 16px; height: 16px; }
.xa-more svg, .xa-go svg { display: block; width: 100%; height: 100%; }
.xa-card > a:hover .xa-more, .xa-card > a:focus-visible .xa-more { color: var(--ink); }
.xa-go { display: none; }

.xa-start { margin: clamp(1.1rem, 2.6vh, 1.5rem) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .6rem; font-size: 17px; color: var(--ink); }
.xa-start b { font-weight: 600; }
.xa-start .df-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.xa-start .df-link i { display: inline-grid; width: 17px; height: 17px; }
.xa-start .df-link svg { width: 100%; height: 100%; }

/* Illustrations en clair (carte écume, fenêtre blanche). 14/10 : garde-manger seulement (grille 3 x 2) */
.xa .il { overflow: visible; }
.xa .il [class*="-s"] { stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.xa .il circle[stroke-width="9"] { stroke-width: 11; }
.xa .il .il-tick { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14; stroke-dashoffset: 0; }
.xa .il-panel { fill: #fff; }
.xa .il-tile { fill: #E9F0F6; }
.xa .il-hi { fill: var(--tide-soft); }
.xa .il-soft { fill: #C8D6E2; }
.xa .il-strong { fill: var(--ink); }
.xa .il-accent, .xa .il-bar { fill: var(--fish); }
.xa .il-soft-s { stroke: #D3DEE7; }
.xa .il-strong-s { stroke: var(--ink); }
.xa .il-accent-s { stroke: var(--fish); }
.xa .il-band { fill: rgba(31, 111, 168, .14); } /* 14/10 (relecture du lot 2) : #1F5F99 et #3A8CC8 au bleu d'accent */
.xa .il-core { fill: var(--ink); }
.xa .il-onCore { fill: var(--b-accent-dark); }
.xa .il-tick { stroke: var(--tide); }
.xa .il-tick-dark { stroke: #fff; }
.xa .il-bubble { fill: var(--tide-soft); }
.xa .il-area { fill: rgba(31, 111, 168, .2); stroke: var(--fish); stroke-width: 2; } /* 14/10 (relecture du lot 2) : #1F5F99 et #3A8CC8 au bleu d'accent */

/* 14/10 (demande de Louis du 14/10 : moins de dessin, moins « cartoon » ; elle remplace celle du 07/10, « ne jamais retirer ») :
   plus de dessin dans la grille de l'accueil (v3-home-build.mjs), donc plus d'animation au survol. Les couleurs ci-dessus ne
   servent plus qu'à la grille 3 x 2 du garde-manger (xa-grid--six), dont les dessins restent fixes. Bloc retiré (récupérable
   dans git, 0da9ab6) : animations il-rise, il-widen, il-scale, il-donut, il-march, il-pulse, il-run, il-tick, il-pop sur
   .xa-card > a:is(:hover, :focus-visible, .is-play), sous prefers-reduced-motion: no-preference. La classe is-play de
   js/v3-home.js n'a plus d'effet. */

/* Tablette : deux colonnes (07/10 : sous 1100 px, la grille ayant quatre colonnes) */
@media (max-width: 1100px) {
    .xa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .xa-card:nth-last-child(-n+4) { padding-bottom: 16px; }
    .xa-card:nth-last-child(-n+2) { padding-bottom: 0; }
}

/* Téléphone : une colonne ; dessin à gauche du titre, phrase dessous, la carte entière est le lien */
@media (max-width: 640px) {
    .xa-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .xa-card, .xa-card:nth-last-child(-n+4), .xa-card:nth-last-child(-n+3) { display: block; grid-row: auto; padding-bottom: 0; }
    .xa-card > a {
        display: grid; grid-template-columns: 84px minmax(0, 1fr); grid-template-areas: "art h" "p p";
        align-items: center; column-gap: 14px; padding: 14px 16px 15px; border-radius: var(--radius);
    }
    .xa-txt { display: contents; } /* 10/10 : titre et phrase reprennent leurs zones (h, p) ; depuis le bloc .xa-txt du 09/10, la phrase passait à droite du dessin */
    .xa-art { grid-area: art; margin: 0; }
    .xa-art .il { width: 84px; height: auto; }
    body.v2 .xa-card h3 { grid-area: h; display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0; font-size: 17px; line-height: 1.25; align-self: center; }
    .xa-go { display: inline-grid; color: var(--tide); }
    .xa-card p { grid-area: p; margin-top: 9px; font-size: 15px; line-height: 1.45; }
    .xa-more { display: none; }
    .xa-start { display: block; font-size: 16px; line-height: 1.6; }
    .xa-start b { display: block; margin-bottom: 2px; }
    .xa-start .df-link { display: inline; min-height: 0; }
    .xa-start .df-link i { display: inline-block; margin-left: 6px; vertical-align: -3px; } /* la flèche suit le dernier mot au lieu de partir à droite */
}

/* --- Réalisations : même carrousel, en plus petit (cartes, visuels et textes plus compacts ; quatre cartes visibles sur grand écran) --- */
.hm-works { grid-auto-columns: min(340px, 80vw); gap: 16px; }
.hm-wcard { padding: 12px 12px 18px; border-radius: var(--radius); }
/* 14/10 (L2-T6) : retirée, plus de dessin dans les réalisations : .hm-wcard .hm-art { border-radius: var(--radius); } */
body.v2 .hm-wcard h3 { margin: 14px 8px 4px; font-size: 17px; line-height: 1.3; }
.hm-wcard p { margin: 0 8px; font-size: 15px; line-height: 1.5; }
.hm-tags { gap: 5px; margin: auto 8px 0; padding-top: 12px; }
.hm-tags li { padding: 4px 10px; font-size: 12.5px; }
@media (min-width: 1360px) {
    .hm-works { grid-auto-columns: calc((100% - 48px) / 4); }
}

/* --- V4.3 (06/10 au soir) : cartes des réalisations au discours métier. Accroche (la question du client) au-dessus du titre, discrète ;
   pastilles techniques après les pastilles métier, en marine (sans contour), sur l'accueil et sur Réalisations --- */
body.v2 .hm-wcard .hm-hook { margin: 14px 8px 0; font: 600 14px/1.4 var(--f-body); color: var(--tide); }
body.v2 .hm-wcard .hm-hook + h3 { margin-top: 6px; }
.hm-tags li.hm-tag-tech { background: var(--ink); color: #fff; } /* 07/10 : plus utilisée sur l'accueil ni sur Réalisations (pastilles techniques seules, style clair ci-dessus) ; garde-manger seulement */

/* --- Bandeau de rendez-vous : plus de « Nous écrire » ni de téléphone (V4.3, phases 1.6 et 2.2 : téléphone sur Contact et dans le pied de page
   seulement) ; l'adresse e-mail reste affichée en clair --- */
main.hm .hm-contact .hm-mail a { font-weight: 600; }

/* --- Garde-manger : l'encart des quatre marches dans sa propre section (plus d'écart au-dessus, il n'est plus sous la grille) --- */
.hm-mat-sec .hm-mat { margin-top: 0; }

/* --- Questions fréquentes : « commence-t-on », « passe-t-il » ne se coupent pas au trait d'union (span posé par v3-home-build.mjs) --- */
.hm-qa .nw { white-space: nowrap; }

/* --- Démarche V4.3 : maquette G validée par Louis le 06/10 (.claude/maquette-demarche-g.html), règles reprises telles quelles.
   Trois temps sur une ligne du temps (seule animation : la ligne se trace une fois à l’arrivée à l’écran), arbre V4.2 dans un tiroir,
   bandeau des valeurs sans bouton. Espacement vertical de la section : celui de .df-section. --- */
.xc { --gap: 16px; --pad: 22px; --card-h3: 20px; background: #fff; }
/* --- Les trois temps : ligne du temps + cartes (lignes internes alignées d'une carte à l'autre, subgrid) --- */
.xc-steps { position: relative; z-index: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 0; margin: 0; padding: 0; list-style: none; }
.xc-step { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
/* ligne de rétroplanning : la durée au-dessus, un carré sur la ligne (aligné sur les pictogrammes de la carte), le jalon de décision dessous */
.xc-when { position: relative; height: 54px; padding: 0 var(--pad); } /* 07/10 au soir : 54 px (62 avant), démarche plus compacte */
.xc-when b { display: block; font: 600 15px/20px var(--f-body); color: var(--tide); white-space: nowrap; }
.xc-when::before { /* segment : du point de ce temps au point du suivant (largeur de la colonne + écart) */
    content: ""; position: absolute; left: calc(var(--pad) + 5px); top: 32px; width: calc(100% + var(--gap)); height: 2px; border-radius: 1px;
    background: var(--ink); transform-origin: 0 50%;
}
.xc-step:last-child .xc-when::before { width: calc(100% - var(--pad) - 5px); } /* 14/10 (relecture) : filet plein ; avant, fondu linear-gradient(90deg, var(--ink) 55%, rgba(11, 34, 57, 0)) */
.xc-when::after { /* le rail gris dessous, toujours visible */
    content: ""; position: absolute; z-index: -1; left: calc(var(--pad) + 5px); top: 32px; width: calc(100% + var(--gap)); height: 2px; border-radius: 1px; background: #DCE5ED;
}
.xc-step:last-child .xc-when::after { width: calc(100% - var(--pad) - 5px); background: linear-gradient(90deg, #DCE5ED 55%, rgba(220, 229, 237, 0)); }
.xc-when > i { position: absolute; z-index: 1; left: var(--pad); top: 28px; width: 10px; height: 10px; border-radius: 2px; background: var(--ink); box-shadow: 0 0 0 4px #fff; }
/* jalon « Vous décidez » : un losange sur la ligne, au milieu de l'écart entre deux temps, et son libellé centré dessous */
.xc-card {
    grid-row: 2 / span 3; display: grid; grid-template-rows: subgrid; row-gap: 0;
    margin-top: 10px; padding: 18px var(--pad) 22px; border-radius: var(--radius); background: var(--sea); color: var(--ink);
}
.xf-dur { display: none; }
body.v2 .xc-card h3 { margin: 0 0 14px; font: 600 var(--card-h3)/1.25 var(--f-display); letter-spacing: -0.012em; color: var(--ink); }
.xc-item { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; align-items: start; margin: 0; }
.xc-item + .xc-item { padding-top: 14px; }
.xc-item svg { display: block; width: 22px; height: 22px; margin-top: 1px; color: var(--tide); }
.xc-item b { display: block; font: 600 16px/1.35 var(--f-body); color: var(--ink); }
.xc-item .xc-txt { margin: 0; color: inherit; }
.xc-item .xc-txt > span { display: block; margin-top: 2px; font-size: 15px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
/* « Premier échange » ouvre le rendez-vous (Calendly) : soulignement discret, couleur de lien au survol */
.xc-item a.xf-cal { color: var(--ink); text-decoration: underline; text-decoration-color: var(--tide); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.xc-item a.xf-cal:hover { color: var(--tide); }
.xc-item a.xf-cal:focus-visible { outline: 2px solid var(--tide); outline-offset: 3px; border-radius: 3px; }
/* --- Accès au détail : un bouton qui déplie le tiroir, rattaché aux cartes --- */
.xc-foot { margin: 4px 0 0; }
.xc-toggle {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
    font: 600 16px/1.3 var(--f-body); color: var(--tide); text-align: left;
}
.xc-toggle .xc-toggle-l { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; text-wrap: balance; }
.xc-toggle:hover { color: var(--ink); }
.xc-toggle:focus-visible { outline: 2px solid var(--tide); outline-offset: 3px; border-radius: 4px; }
.xc-toggle i { display: inline-grid; flex: none; width: 18px; height: 18px; }
.xc-toggle i.xf-hand { width: 20px; height: 20px; }
@media (prefers-reduced-motion: no-preference) { .xc-toggle i.xf-chev { transition: transform .3s var(--ease-out); } }
.xc-toggle i svg { display: block; width: 100%; height: 100%; }
.xc-toggle[aria-expanded="true"] i.xf-chev { transform: rotate(180deg); }
/* tiroir : replié, il garde sa mise en page réelle (l'arbre se mesure au chargement) mais est masqué et rogné */
.xc-detail { max-height: 0; overflow: hidden; visibility: hidden; }
.xc-detail.is-open { max-height: none; overflow: visible; visibility: visible; padding: 18px 0 8px; }
body.v2 .xc-detail-h { margin: 0 0 6px; font: 600 20px/1.3 var(--f-display); color: var(--ink); outline: none; scroll-margin-top: calc(var(--header-h) + 72px); }
.xc-detail .tr-canvas { padding-bottom: 64px; }
/* --- Animation unique : la ligne du temps se trace une fois, temps après temps --- */
@media (prefers-reduced-motion: no-preference) {
    html.js .xc-when::before { transform: scaleX(0); transition: transform .7s cubic-bezier(.45, 0, .25, 1); transition-delay: calc(var(--i) * .7s + .2s); }
    html.js .xc-when > i { background: #fff; box-shadow: inset 0 0 0 2px #C3D1DD, 0 0 0 4px #fff; transition: background-color .35s, box-shadow .35s; transition-delay: calc(var(--i) * .7s); }
    html.js .xc-steps.is-in .xc-when::before { transform: none; }
    html.js .xc-steps.is-in .xc-when > i { background: var(--ink); box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 4px #fff; }
}
/* --- Conclusion : bandeau marine, trois engagements alignés sur les colonnes des cartes, puis l'action --- */
/* --- Tablette : la ligne et les cartes restent sur trois colonnes jusqu'à 900 px --- */
@media (max-width: 900px) {
    .xc { --pad: 18px; --gap: 12px; }
}
/* --- Téléphone : plus de ligne du temps ; la durée passe en tête de carte ; cartes et bandeau sur le même bord gauche --- */
@media (max-width: 640px) {
    .xc { --pad: 18px; }
    .xc-steps { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
    .xc-step { display: block; grid-row: auto; }
    .xc-when { display: none; }
    .xc-card { display: block; margin-top: 0; padding: 16px var(--pad) 18px; border-radius: var(--radius); }
    .xf-dur { display: block; margin: 0 0 4px; font: 600 14px/20px var(--f-body); color: var(--tide); }
    body.v2 .xc-card h3 { margin-bottom: 12px; }
    .xc-item + .xc-item { padding-top: 12px; }
    .xc-foot { margin-top: 6px; }
    .xc-detail.is-open { padding-top: 12px; }
}
/* G : bandeau des valeurs de la B, sans appel à l'action */
.xb-val { margin: 16px 0 0; padding: 20px 28px 22px; border-radius: var(--radius); background: var(--ink); color: #fff; } /* 07/10 au soir : plus serré (22 / 24 / 26 avant) */
body.v2 .xb-val h3 { margin: 0 0 14px; font: 600 22px/1.25 var(--f-display); letter-spacing: -0.015em; color: #fff; }
body.v2 .xb-val h3 span { color: var(--b-accent-dark); }
.xb-val ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; margin: 0; padding: 0; list-style: none; }
.xb-val li { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; }
.xb-val li i { display: block; width: 24px; height: 24px; margin-top: 1px; color: var(--b-accent-dark); }
.xb-val li svg { display: block; width: 100%; height: 100%; }
.xb-val b { display: block; font: 600 16px/1.35 var(--f-body); color: #fff; }
.xb-val p { margin: 3px 0 0; font-size: 15px; line-height: 1.47; color: rgba(255, 255, 255, .74); }
@media (max-width: 900px) { .xb-val ul { grid-template-columns: minmax(0, 1fr); row-gap: 16px; } }
@media (max-width: 640px) { .xb-val { margin-top: 18px; padding: 20px 18px 22px; border-radius: var(--radius); } body.v2 .xb-val h3 { margin-bottom: 16px; font-size: 20px; } }

/* --- 10/10 (Louis) : « Comment nous travaillons avec vous » (.claude/v45-how.mjs), à la place de la démarche G sur l'accueil et sur
   Qui nous sommes : trois temps (Comprendre, Prouver, Déployer) en texte courant, pictogrammes numérotés reliés par un pointillé
   (il s'allume au survol de la liste ; seuls les pictogrammes changent de couleur, rien ne bouge). Règles reprises de v5-about.css
   (07/10), où elles ne servaient qu'à Qui nous sommes : cette feuille est chargée sur l'accueil, Qui nous sommes et le garde-manger
   (ancien bloc du 07/10, titres en <b>). Pictogrammes de l'autre teinte que la section (écume sur blanc, blanc sur écume).
   Aucune marge de section propre : celles de .df-section et de .hm-head. --- */
/* 14/10 (direction « premium sobre », sections 7 et 9) : trois colonnes éditoriales. Filet fin en tête de chaque temps, puis son
   numéro « 01 » en bleu (compteur CSS : le <em> du balisage, « 1 », est masqué), le titre, la durée et le texte. Plus de pictogramme
   (le chiffre suffit : svg masqué, balisage de .claude/v45-how.mjs inchangé), plus de pavé de fond, de pastille ni de pointillé, rien
   ne change au survol. Avant le 14/10 : pictogramme de 56 px sur un pavé (écume sur blanc, blanc sur écume, marine au survol),
   numéro en pastille marine sur son coin, pointillé #C9DBEA d'un temps au suivant (vertical sous 760 px, le pictogramme à gauche
   du texte), durée en 600 bleu. Même rendu sur l'accueil, Qui nous sommes et le garde-manger. */
.ab-how { --ab-how-gap: clamp(20px, 3vw, 40px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ab-how-gap); margin: 0; padding: 0; list-style: none; counter-reset: ab-how; }
.ab-how li { position: relative; min-width: 0; padding-top: 18px; border-top: 1px solid var(--b-rule); counter-increment: ab-how; }
.ab-how-ic { display: block; margin: 0 0 14px; color: var(--b-accent); }
.ab-how-ic svg { display: none; }
.ab-how-ic em { display: block; font-size: 0; font-style: normal; }
.ab-how-ic em::before { content: counter(ab-how, decimal-leading-zero); font: 500 15px/1 var(--b-f-head); letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--b-accent); }
.ab-how b, body.v2 .ab-how h3 { display: block; margin: 0; font: 600 19px/1.3 var(--f-display); letter-spacing: -0.012em; color: var(--ink); }
/* durée du temps (facts.mjs, via TREE[L].g.steps[i].dur), sous le titre. 14/10 (textes raccourcis, Louis : « manque d'impact ») : en
   encre, car en --b-faint (#55687B) la durée était plus pâle que la phrase en --muted (#4A5E71) sous elle, le fait le plus net de
   chaque colonne en ligne la plus faible ; taille et graisse inchangées, le bleu reste réservé au numéro. Avant : color: var(--b-faint). */
.ab-how-dur { display: block; margin-top: 4px; font: 500 14.5px/1.35 var(--f-body); color: var(--ink); }
.ab-how p { margin: 8px 0 0; max-width: 40ch; font-size: 15.5px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.ab-how b + p { margin-top: 6px; }
.ab-how-more { margin: 24px 0 0; line-height: 1.3; }
@media (max-width: 760px) {
    .ab-how { grid-template-columns: minmax(0, 1fr); --ab-how-gap: 22px; }
    .ab-how p { max-width: none; }
}

/* V4.3, lot mobile (06/10) : zones de clic de 44 px sur téléphone, sans rien déplacer (marge intérieure compensée) */
@media (max-width: 900px) {
    .hm-logos a { min-width: 44px; justify-content: center; }
}
@media (max-width: 768px) {
    .hm-hero .hm-hero-diag { padding-block: 11px; margin-top: calc(.3rem - 11px); margin-bottom: -11px; }
    .hm-contact a { padding-block: 9px; margin-block: -9px; }
    .xc-item a.xf-cal { padding-block: 13px; }
    .ar-chips button, .ar-hchips button { min-height: 44px; }
    .ar-more-btn { padding-block: 12px; margin-top: -4px; margin-bottom: -12px; }
    /* 10/10 (relecture) : « Voir notre approche en détail » (bloc « Comment nous travaillons », accueil et Qui nous sommes) ne faisait
       que 20 px de haut à 390 px : 44 px de zone de toucher, marge compensée (le bas de la section ne bouge pas) */
    .ab-how-more a { display: inline-block; padding-block: 12px; margin-block: -12px; }
}

/* ================= V4.3 (06/10 au soir) : alternance des fonds de l'accueil, et vidéo « DataFish en une minute » =================
   Règle de Louis : deux sections voisines n'ont jamais le même fond (blanc et écume en alternance, marine pour les bandeaux),
   et les cartes prennent l'autre teinte que leur section. Chaque section porte ou non la classe df-sea (v3-home-build.mjs) ;
   ses cartes suivent : retirer ou remettre df-sea suffit à inverser une section. Ordre actuel : accroche écume, logos blanc,
   « Nos expertises » écume, vidéo blanc, démarche écume, réalisations blanc, bandeau marine, questions fréquentes blanc.
   .xa et .xc fixent leur fond blanc après v2.css : la variante écume est donc redonnée ici (.xa.df-sea, .xc.df-sea). */

/* --- « Nos expertises » sur écume : cartes blanches (survol inchangé) ; dans le dessin, panneau écume et tuiles blanches.
   Les animations du dessin au survol ne changent pas. --- */
.xa.df-sea { background: var(--sea); }
.xa.df-sea .xa-card > a { background: #fff; }
.xa.df-sea .xa-card > a:hover, .xa.df-sea .xa-card > a:focus-visible { background: var(--tide-soft); }
.xa.df-sea .il-panel { fill: var(--sea); }
.xa.df-sea .il-tile:not(.il-hi) { fill: #fff; }

/* --- Vidéo (à l'essai) : section blanche ; vidéo carrée à gauche (440 px au plus), titre, phrase et rendez-vous à droite.
   Sur téléphone, la vidéo passe au-dessus du texte, sur toute la largeur du conteneur. --- */
.hm-vid { background: #fff; }
.hm-vid-in { display: grid; grid-template-columns: minmax(0, 440px) minmax(15rem, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hm-vid-v { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--radius); background: var(--ink); object-fit: cover; }
/* 07/10 au soir : lecteur explicite. Affiche, voile marine léger, gros bouton rond au centre et mention « Voir la vidéo, 1 min 12 ».
   Le bouton couvre toute l'affiche (clic n'importe où) ; caché sans JavaScript (la vidéo garde alors ses commandes natives) et dès
   le lancement (js/v3-home.js : la vidéo démarre avec le son, commandes natives). Au survol, le rond change de couleur, rien ne bouge. */
.hm-vid-box { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--ink); }
.hm-vid-play { display: none; }
html.js .hm-vid-box.is-ready .hm-vid-play {
    position: absolute; inset: 0; z-index: 1; display: grid; place-items: center;
    width: 100%; padding: 0; border: 0; border-radius: 0; background: rgba(8, 26, 46, .32); color: var(--ink); cursor: pointer; font: inherit; /* 14/10 (relecture du lot 2) : ancien marine #0B2239 au marine du site */
}
html.js .hm-vid-box.is-playing .hm-vid-play { display: none; }
.hm-vid-btn { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: #fff; color: var(--ink); box-shadow: none; transition: background-color .2s var(--ease-out), color .2s var(--ease-out); }
/* 11/10 (Louis, sur téléphone : « lecture pas centrée ») : plus de marge à gauche. Le tracé du triangle est déjà décalé dans sa boîte
   (son centre de gravité tombe au milieu du rond) ; les 5 px en plus le poussaient à droite. */
.hm-vid-btn svg { display: block; width: 40px; height: 40px; margin-left: 0; }
.hm-vid-lab { position: absolute; left: 50%; top: calc(50% + 62px); transform: translateX(-50%); padding: 8px 16px; border-radius: var(--b-r-tag); background: rgba(7, 26, 44, .78); font: 600 16px/1.25 var(--f-body); color: #fff; white-space: nowrap; }
.hm-vid-play:hover .hm-vid-btn { background: var(--fish); color: #fff; }
.hm-vid-play:focus-visible { outline: 3px solid #fff; outline-offset: -8px; }
.hm-vid-play:focus-visible .hm-vid-btn { background: var(--fish); color: #fff; box-shadow: 0 0 0 4px #fff; }
@media (max-width: 640px) { .hm-vid-box { border-radius: var(--radius); } .hm-vid-btn { width: 76px; height: 76px; } .hm-vid-btn svg { width: 34px; height: 34px; } .hm-vid-lab { top: calc(50% + 54px); font-size: 15px; } }
.hm-vid-txt { max-width: 34rem; }
body.v2 .hm-vid .hm-h { margin: 0; }
.hm-vid-p { margin: 1rem 0 0; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.hm-vid-lang { margin: .6rem 0 0; font-size: 14px; font-weight: 600; color: var(--tide); }
.hm-vid .df-actions { margin-top: 1.75rem; }
@media (max-width: 640px) {
    .hm-vid-in { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    .hm-vid-v { border-radius: var(--radius); }
}

/* --- Démarche sur écume : cartes des trois temps blanches ; ligne du temps : rail plus soutenu (#DCE5ED trop pâle sur écume),
   anneau des petits carrés de la couleur du fond ; bandeau des valeurs inchangé (marine). --- */
.xc.df-sea { background: var(--sea); }
.xc.df-sea .xc-card { background: #fff; }
.xc.df-sea .xc-when::after { background: #C9D6E2; }
.xc.df-sea .xc-step:last-child .xc-when::after { background: linear-gradient(90deg, #C9D6E2 55%, rgba(201, 214, 226, 0)); }
.xc.df-sea .xc-when > i { box-shadow: 0 0 0 4px var(--sea); }
@media (prefers-reduced-motion: no-preference) {
    html.js .xc.df-sea .xc-when > i { box-shadow: inset 0 0 0 2px #C3D1DD, 0 0 0 4px var(--sea); }
    html.js .xc.df-sea .xc-steps.is-in .xc-when > i { box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 4px var(--sea); }
}
/* tiroir de l'arbre sur écume : les blocs écume passent en blanc (et ce qui était blanc dessus passe en écume) ; tracés, rail et
   anneaux suivent le fond. v3-tree.css est chargée après cette feuille : chaque règle est préfixée par .xc.df-sea pour l'emporter,
   et les survols sont redonnés. */
.xc.df-sea .tr { --line: #C9D6E2; }
.xc.df-sea .tr-wire.is-stop { stroke: #B3C4D3; }
.xc.df-sea .tr-end { fill: var(--sea); }
.xc.df-sea .tr-loop-l { background: var(--sea); }
.xc.df-sea .tr-head.is-on .tr-dot { box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 4px var(--sea); }
.xc.df-sea .tr-audit { background: #fff; }
.xc.df-sea .tr-audit:hover, .xc.df-sea .tr-audit[aria-expanded="true"] { background: var(--tide-soft); }
.xc.df-sea .tr-audit > i, .xc.df-sea .tr-audit > .tr-more { background: var(--sea); }
.xc.df-sea .tr-audit:hover > .tr-more, .xc.df-sea .tr-audit[aria-expanded="true"] > .tr-more { background: var(--tide); color: #fff; }
.xc.df-sea .tr.is-running .tr-audit li:not(.is-on) > span { background: var(--sea); }
.xc.df-sea .tr-reco { background: rgba(255, 255, 255, .55); }
.xc.df-sea .tr-reco:hover, .xc.df-sea .tr-reco.is-picked { background: #fff; }
.xc.df-sea .tr-plus { background: var(--sea); }
.xc.df-sea .tr .tr-prio { box-shadow: 0 0 0 3px var(--sea); }
.xc.df-sea .tr-proto { background: #fff; }
.xc.df-sea .tr-meter { background: var(--sea); }
.xc.df-sea .tr.is-running .tr-proj li:not(.is-done), .xc.df-sea .tr-proj.is-growing li:not(.is-done) { background: #fff; }
.xc.df-sea .tr-replay:hover { background: #fff; }
.xc.df-sea .tr-list li:not(:last-child)::before { background: #C9D6E2; }

/* --- Réalisations sur fond blanc (accueil, et page Réalisations qui reprend .hm-work) : cartes écume, pastilles métier blanches
   (pastilles techniques marine inchangées), flèches du carrousel en écume ; dans le dessin, panneau blanc et tuiles écume soutenu.
   Avec df-sea (fond écume), les règles d'origine plus haut s'appliquent : cartes blanches. --- */
.hm-work:not(.df-sea) .hm-wcard { background: var(--sea); }
/* 14/10 : plus de pastille blanche sous les termes techniques (texte gris, bloc « 14/10 » en fin de fichier) ; avant :
   .hm-work:not(.df-sea) .hm-tags li:not(.hm-tag-tech) { background: #fff; } */
.hm-work:not(.df-sea) .hm-nav button { background: var(--sea); }
.hm-work:not(.df-sea) .hm-nav button:hover:not(:disabled) { background: var(--ink); color: #fff; }
.hm-work:not(.df-sea) .il-panel { fill: #fff; }
.hm-work:not(.df-sea) .il-tile, .hm-work:not(.df-sea) .il-bubble { fill: #E9F0F6; }

/* ================= V4.3 (07/10, décisions B et C de Louis) : « Nos expertises » en 4 x 2, case maturité, lien vers « Notre approche » =================
   Grille de quatre colonnes (règles .xa-grid plus haut ; deux colonnes sous 1100 px, une sur téléphone) : dessins moins hauts et
   cartes un peu plus serrées pour que la section entière tienne dans une fenêtre de 1366 x 650 (583 px utiles sous l'en-tête).
   Les animations des dessins au survol ne changent pas (voulues par Louis : ne pas retirer).
   14/10 : grille 3 x 3 sans dessin (bloc « 14/10 » ci-dessous) ; réglages du 07/10 au soir pour 641 px et plus : cartes à 14 px 20 px
   de marge intérieure, numéro (alors dessin) à 10 px du titre, dessins à 60 px de haut, lien « Découvrir l'offre » à 10 px. */
@media (min-width: 641px) {
    .xa-grid:not(.xa-grid--six) .xa-card > a { padding: 18px 22px; }
    .xa-grid:not(.xa-grid--six) .xa-art { margin-bottom: 12px; }
}
/* Arrivée par le lien « Expertises » (menu, fil d'Ariane des pages d'expertise : /#services, /en/#expertise) : la section se cale
   pour que son titre arrive juste sous l'en-tête (marge haute de la section cachée sous lui). Ainsi la grille entière tient dans
   une fenêtre de 1366 x 650 (avant : 100 px en FR, 82 en EN, la 2e rangée était coupée de 69 et 29 px). Mise en page inchangée. */
@media (min-width: 641px) {
    body.v2 main.hm > #services, body.v2 main.hm > #expertise { scroll-margin-top: calc(var(--header-h) - 2px - var(--sec-y)); } /* 07/10 au soir : - 2 px (+ 4 avant), la grille entière tient encore à 1366 x 650 avec l'écart de titre commun */
}
/* quatre colonnes étroites : pas de mot seul en fin de phrase (titres : dernier mot court lié au précédent, v3-home-build.mjs) */
.xa-grid:not(.xa-grid--six) .xa-card p { text-wrap: pretty; }

/* 13/10 (huitième expertise, « Relation client ») : la grille compte huit tuiles d'expertise (deux rangées de quatre ; deux
   colonnes sous 1100 px, une sur téléphone) : aucune règle de la grille ne change (toujours huit cases). La question « Vous ne savez
   pas par où commencer ? » n'est plus une case : elle repasse en ligne sous la grille (p.xa-start, règles plus haut, écrites pour la
   grille 3 x 2 du 06/10). Les règles .xa-card--start ci-dessous ne servent plus sur la page ; elles sont gardées pour pouvoir
   remettre la case (v3-home-build.mjs, xaStart). Mesures à 1366 x 650 : grille inchangée (470 px, 589 px du haut du titre au bas de
   la grille) ; avec la ligne, la section passe de 732 à 794 px (650 px du haut du titre au bas de la ligne).
   14/10 : la case revient (neuvième, grille 3 x 3) et la ligne disparaît : bloc « 14/10 » avant l'accroche "wave". */
/* --- 8e case « Vous ne savez pas par où commencer ? » : même gabarit que les cartes, fond marine (ce n'est pas une expertise) ;
   dessin des quatre marches (elles montent au survol) et du poisson en pixels sur la dernière. Survol : marine un peu plus clair.
   14/10 : elle revient en neuvième case, sans dessin, avec la nappe de houle (bloc « 14/10 » ci-dessous). Les règles .il-step*
   et .il-fishc ne servent plus (dessin ILLUS.maturity gardé dans v3-illus.mjs). Survol : background-color seulement (avant :
   background, qui aurait effacé la nappe). --- */
.xa .xa-grid .xa-card--start > a { background: var(--ink); color: #fff; }
.xa .xa-grid .xa-card--start > a:hover, .xa .xa-grid .xa-card--start > a:focus-visible { background-color: var(--b-night-2); }
body.v2 .xa .xa-card--start h3 { color: #fff; text-wrap: balance; } /* « commencer ? » pas seul sur sa ligne */
.xa .xa-card--start p { color: var(--b-on-dark-2); } /* 14/10 : avant, blanc à 74 % */
.xa .xa-card--start .xa-go { color: var(--b-accent-dark); }
/* 14/10 (L2-T6, règles mortes) : la case n'a plus ni lien « Voir les quatre niveaux » (.xa-more) ni dessin (.il-*). Retirées :
   .xa-more en #6FB8E8 (blanc au survol) ; .il-panel rgba(255, 255, 255, .06) ; .il-step1 #2B4D6E ; .il-step2 #3D6B94 ;
   .il-step3 #5592C2 ; .il-step4 #6FB8E8 ; .il-steplab rgba(255, 255, 255, .55) ; .il-fishc #fff (toutes sous .xa .xa-card--start). */

/* --- Garde-manger : grille 3 x 2 du 06/10 (six expertises, dessins à 92 px, ligne « Vous ne savez pas par où commencer ? » dessous) --- */
.xa-grid--six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.xa-grid--six .xa-card:nth-last-child(-n+4) { padding-bottom: 16px; }
.xa-grid--six .xa-card:nth-last-child(-n+3) { padding-bottom: 0; }
@media (max-width: 960px) {
    .xa-grid--six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .xa-grid--six .xa-card:nth-last-child(-n+3) { padding-bottom: 16px; }
    .xa-grid--six .xa-card:nth-last-child(-n+2) { padding-bottom: 0; }
}
@media (max-width: 640px) {
    .xa-grid--six { grid-template-columns: minmax(0, 1fr); }
    .xa-grid--six .xa-card:nth-last-child(n) { padding-bottom: 0; }
}

/* --- Démarche de l'accueil : lien discret « Découvrir notre approche » sur la ligne du bouton du tiroir, à droite (rien de plus en
   hauteur) ; sur téléphone, il passe sous le bouton, à gauche. --- */
.xc-foot--2 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 24px; }
.xc-approach {
    display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
    font: 600 15px/1.3 var(--f-body); color: var(--muted); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.xc-approach:hover { color: var(--ink); }
.xc-approach:focus-visible { outline: 2px solid var(--tide); outline-offset: 3px; border-radius: 4px; }
.xc-approach i { display: inline-grid; flex: none; width: 16px; height: 16px; }
.xc-approach svg { display: block; width: 100%; height: 100%; }

/* --- 13/10 (Louis : partenariat Sellsy) : une ligne de texte sous les logos de l'accueil (v3-home-build.mjs, trustNote). Elle occupe
   34 px (14 px de marge et une ligne de 20 px) ; au-dessus de 900 px, où le bandeau tient sur une rangée, ces 34 px sont repris
   aux marges du bandeau (17 px en haut, 17 px en bas) : sa hauteur ne change pas et il finit toujours en bas du premier écran
   (réglage du 09/10, .hm-hero). Pour retirer la ligne : trustPartner à null dans v3-home.mjs, ces règles ne s'appliquent plus. --- */
.hm-trust-note { margin: 14px 0 0; font: 400 14px/20px var(--f-body); color: var(--muted); }
@media (min-width: 901px) {
    .hm-trust--note { padding: calc(var(--trust-y) - 17px) 0; }
}
/* 13/10 au soir (Louis) : Sellsy mêlé aux logos du bandeau, avec son logo complet (/partenaire-sellsy.png, 1200 x 450 : le dessin
   occupe 59 % de la hauteur et 90 % de la largeur du fichier, d'où une image plus haute que les autres pour un dessin de même
   poids, et des marges négatives sur les côtés). Bandeau blanc de l'accroche "classic", logo en couleur.
   .hm-logo-w : nom écrit à côté d'un logo dont on n'aurait que le symbole (option word de v3-home-build.mjs), plus utilisé. */
.hm-logos a[data-logo="sellsy"] img { height: 52px; margin: 0 -6px; }
.hm-logo-w { font: 600 21px/1 var(--f-display); letter-spacing: -.02em; }
@media (max-width: 480px) {
    .hm-logos a[data-logo="sellsy"] img { height: 40px; margin: 0; }
}

/* ================= 14/10 (direction « premium sobre », .claude/DIRECTION-STYLE-14-10.md, sections 5, 8 et 9) : accueil =================
   Demande de Louis du 14/10 : moins enfantin, moins dessiné, plus soigné ; grille des expertises en 3 x 3 avec la neuvième case
   « Selon votre maturité ». Rendu de référence : .claude/style-retenu.css (sections 11 et 12), capture .claude/cap-style/R-1. */

/* --- « Nos expertises » en 3 x 3 : huit cartes « numéro, titre et flèche, phrase » (toute la carte est le lien), puis la case 9
   marine en bas à droite. Le numéro 01 à 08 (gris, bleu au survol) est un compteur CSS dans le span.xa-art vide ; au survol, le
   titre passe au bleu, le fond ne change pas et rien ne bouge. Cartes blanches sur brume, 14 px d'écart. Deux rangées par carte
   dans la sous-grille (numéro, puis titre et phrase) : les titres d'une même rangée partent au même niveau. Tout est limité à
   .xa-grid:not(.xa-grid--six) : la grille 3 x 2 du garde-manger garde ses dessins. Mesures à 1366 x 650 : voir le rapport du lot 1. --- */
.xa-grid:not(.xa-grid--six) { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 14px; counter-reset: xa-n; }
.xa-grid:not(.xa-grid--six) .xa-card { grid-row: span 2; padding-bottom: 14px; }
.xa-grid:not(.xa-grid--six) .xa-card:nth-last-child(-n+3) { padding-bottom: 0; }
.xa-grid:not(.xa-grid--six) .xa-card:not(.xa-card--start) { counter-increment: xa-n; }
.xa.df-sea .xa-grid:not(.xa-grid--six) .xa-card:not(.xa-card--start) > a:is(:hover, :focus-visible) { background: #fff; }
.xa-grid:not(.xa-grid--six) .xa-art::before {
    content: counter(xa-n, decimal-leading-zero); display: block;
    font: 500 13px/1 var(--b-f-head); letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--b-faint); transition: color .2s var(--ease-out);
}
.xa-grid:not(.xa-grid--six) .xa-card > a:is(:hover, :focus-visible) .xa-art::before { color: var(--b-accent); }
body.v2 .xa-grid:not(.xa-grid--six) .xa-card h3 {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 6px;
    font: 600 19px/1.25 var(--b-f-head); letter-spacing: -0.012em; transition: color .2s var(--ease-out);
}
body.v2 .xa-grid:not(.xa-grid--six) .xa-card:not(.xa-card--start) > a:is(:hover, :focus-visible) h3 { color: var(--b-accent); }
.xa-grid:not(.xa-grid--six) .xa-card p { font-size: 15px; line-height: 1.5; color: var(--b-text); }
.xa-grid:not(.xa-grid--six) .xa-go { display: inline-grid; width: 18px; height: 18px; color: var(--b-accent); transform: translateY(3px); }
/* case 9 : marine, sans nappe depuis le 14/10 (voir la fin de ce commentaire ; avant : la nappe, img/houle.svg, var(--b-lines) de
   v2.css, calée en bas à droite), survol #0F2740 ; étiquette en
   petites capitales #6FB8E8 (texte écrit ici, FR et EN : la case n'a pas d'autre étiquette dans le balisage), titre blanc, phrase
   #A9BBCC, flèche blanche. Cadrage de la nappe (728 px de large, crête hors de la case à droite) : on voit sa partie qui
   monte, du bas de la case vers la droite ; l'étiquette et le début du titre restent sur le marine seul.
   14/10 (relecture du lot 1) : la flèche #6FB8E8 se perdait dans les lignes, du même bleu ; elle passe au blanc, et la nappe
   descend de 40 px (avant : right -120px bottom -135px) pour libérer le coin haut droit.
   14/10 (relecture du lot 2) : les lignes passaient encore derrière la phrase et la flèche (la nappe ne passe jamais derrière un
   texte, direction section 3). Nappe réduite à 480 px et calée plus bas : seule sa crête reste, dans le coin bas droit, sous la
   phrase. Cadrage cherché en mesurant les tracés du SVG contre les boîtes des textes (FR, 1366, 900 et 390 px de large : aucun
   tracé sur un texte) ; avant : right -160px bottom -175px / 728px auto.
   14/10 (nappe refaite d'après le maillage de l'accueil) : la crête du nouveau SVG est plus basse dans son cadre (elle doit rester
   sous les accroches des hauts de page) ; avec l'ancien cadrage, rien n'était plus visible dans la case. Nappe à 360 px, remontée :
   les sommets de la crête affleurent dans le coin bas droit, sous la phrase (mesuré FR et EN, de 390 à 1366 px de large : aucun
   tracé à moins de 9 px d'un texte) ; avant : right -40px bottom -160px / 480px auto.
   14/10 (relecture de la nappe maillage) : la case laisse 21 px sous la phrase ; il n'en restait que trois pointes de crête coupées
   par le bord bas, qui se lisaient comme des taches. Nappe retirée de la case : marine seul. Pour la remettre :
   background: var(--b-night) var(--b-lines) no-repeat right -60px bottom -105px / 360px auto; */
.xa .xa-grid:not(.xa-grid--six) .xa-card--start > a,
.xa .xa-grid:not(.xa-grid--six) .xa-card--start > a:is(:hover, :focus-visible) {
    background: var(--b-night);
}
.xa .xa-grid:not(.xa-grid--six) .xa-card--start > a:is(:hover, :focus-visible) { background-color: var(--b-night-2); }
.xa .xa-grid:not(.xa-grid--six) .xa-card--start .xa-art::before {
    content: "Selon votre maturité"; font: 600 11.5px/1 var(--f-body); letter-spacing: .09em; text-transform: uppercase; color: var(--b-accent-dark);
}
html[lang="en"] .xa .xa-grid:not(.xa-grid--six) .xa-card--start .xa-art::before { content: "By maturity level"; }
.xa .xa-grid:not(.xa-grid--six) .xa-card--start .xa-go { color: #fff; } /* 14/10 (relecture) : avant, #6FB8E8 */
.xa .xa-grid:not(.xa-grid--six) .xa-card--start p { color: var(--b-on-dark-2); } /* la règle des phrases ci-dessus (#4A5E71) passerait sinon sur le marine */
/* tablette : deux colonnes, la case 9 sur toute la largeur (elle tombe en dernier) */
@media (max-width: 1100px) {
    .xa-grid:not(.xa-grid--six) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .xa-grid:not(.xa-grid--six) .xa-card:nth-last-child(-n+3) { padding-bottom: 14px; }
    .xa-grid:not(.xa-grid--six) .xa-card:last-child { grid-column: 1 / -1; padding-bottom: 0; }
}
/* téléphone : une colonne, numéro au-dessus du titre (avant le 14/10 : dessin de 84 px à gauche du titre) */
@media (max-width: 640px) {
    .xa-grid:not(.xa-grid--six) { grid-template-columns: minmax(0, 1fr); }
    .xa-grid:not(.xa-grid--six) .xa-card, .xa-grid:not(.xa-grid--six) .xa-card:nth-last-child(-n+3), .xa-grid:not(.xa-grid--six) .xa-card:last-child { grid-column: auto; grid-row: auto; padding-bottom: 0; }
    .xa-grid:not(.xa-grid--six) .xa-card > a { grid-template-columns: minmax(0, 1fr); grid-template-areas: "art" "h" "p"; padding: 16px 18px; }
    .xa-grid:not(.xa-grid--six) .xa-art { margin: 0 0 8px; }
    body.v2 .xa-grid:not(.xa-grid--six) .xa-card h3 { align-items: baseline; margin: 0; font-size: 17px; }
    .xa-grid:not(.xa-grid--six) .xa-card p { margin-top: 6px; }
}

/* --- « DataFish en une minute » : la section signature de l'accueil, sur marine (une seule au milieu de la page). Titre blanc,
   phrase #A9BBCC, mention de langue #6FB8E8 (le bleu d'accent #1F6FA8 n'est jamais un texte sur marine), cadre de la vidéo
   #0F2740, bouton de rendez-vous bleu (règle commune). Avant le 14/10 : section blanche. --- */
.hm-vid { background: var(--b-night); color: #fff; }
body.v2 .hm-vid .hm-h { color: #fff; }
.hm-vid .hm-vid-p { color: var(--b-on-dark-2); }
.hm-vid .hm-vid-lang { color: var(--b-accent-dark); }
.hm-vid .hm-vid-box, .hm-vid .hm-vid-v { background: var(--b-night-2); }
body.v2 .hm-vid :focus-visible { outline-color: #fff; }
/* 14/10 (relecture) : impression, le fond marine n'est pas imprimé (comme l'accroche, plus bas) : titre et phrase en sombre */
@media print {
    .hm-vid { background: none; color: var(--ink); }
    body.v2 .hm-vid .hm-h { color: var(--ink); }
    .hm-vid .hm-vid-p { color: var(--muted); }
    .hm-vid .hm-vid-lang { color: var(--tide); }
}

/* --- Réalisations : cartes texte. La citation du client ouvre la carte (Plus Jakarta Sans 500, marine, sans italique), puis le
   titre, la phrase et les termes techniques en texte gris (plus de pastilles). Plus de dessin (v3-home-build.mjs). Flèches du
   carrousel : carrés à rayon 6 au lieu de ronds. Avant le 14/10 : dessin en tête, citation en 600 bleu de 14 px, marges de 8 px. --- */
.hm-wcard { padding: 22px 22px 20px; }
body.v2 .hm-wcard .hm-hook { margin: 0 0 10px; font: 500 1.12rem/1.4 var(--b-f-head); color: var(--b-night); }
body.v2 .hm-wcard .hm-hook + h3, body.v2 .hm-wcard h3 { margin: 0 0 6px; }
.hm-work .hm-wcard p:not(.hm-hook) { margin: 0; }
.hm-wcard .hm-tags { margin: auto 0 0; padding-top: 14px; }
.hm-nav button { border-radius: var(--radius); }
/* termes techniques (accueil et Notre offre) : du texte gris, séparé par l'espace ; la pastille marine .hm-tag-tech reste au garde-manger */
.hm-tags { gap: 4px 14px; }
.hm-tags li:not(.hm-tag-tech) { padding: 0; border-radius: 0; background: none; font: 500 12.5px/1.4 var(--f-body); letter-spacing: .01em; color: var(--b-faint); }

/* ================= 13/10 : accroche "wave" de l'accueil (maquette V11 de Louis, « mot qui change et vague animée ») =================
   Balisage : heroWave de .claude/v3-home-build.mjs ; choix "wave" ou "classic" : HOME_HERO de .claude/v3-home.mjs. Mot qui change :
   fin de js/v3-home.js ; vague : js/v6-wave.js (autre lot, canvas[data-wave]) ; en-tête transparent au-dessus : v3.css.
   - Fond marine #081A2E, un écran de haut (100svh, 920 px au plus, 600 px au moins), le bandeau de clients collé en bas.
   - Grille de deux rangées : le contenu (centré en hauteur) et le bandeau. Le canvas et le dégradé sont en position absolue, sous
     le contenu : toute la section au-dessus de 760 px ; en dessous, la vague occupe les 340 px du bas de la première rangée, juste
     au-dessus du bandeau (la grille sert de repère : grid-row sur un élément en position absolue), sans dégradé.
   - Aucun saut de mise en page quand le mot change : sa ligne a une hauteur fixe (1,15 em), les mots y sont posés en absolu.
   - Police du titre : UNE variable, --hw-font. Pour revenir à Schibsted Grotesk : --hw-font: var(--f-display); (et vider
     HERO_FONT dans .claude/build.mjs pour ne plus charger Plus Jakarta Sans). */
.hw {
    --hw-font: 'Plus Jakarta Sans', var(--f-display);
    --hw-bg: #081A2E;
    /* téléphone : hauteur de la bande de la vague, 340 px comme la maquette ; moins sur un écran court (220 px au moins), pour que
       l'accroche et le bandeau tiennent dans le premier écran (texte et boutons : 410 px environ, bandeau : 112 px) */
    --hw-wave-h: clamp(220px, calc(100vh - 444px), 340px);
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto;
    min-height: clamp(600px, 100vh, 920px); min-height: clamp(600px, 100svh, 920px);
    background: var(--hw-bg); color: #fff;
}
@supports (height: 100svh) { .hw { --hw-wave-h: clamp(220px, calc(100svh - 444px), 340px); } }
.hw-canvas { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; }
/* 14/10 (houle) : plus de voile sur toute la gauche, qui éteignait la couleur derrière le sous-titre et les boutons (demande de
   Louis). Le titre reste net par construction : js/v6-wave.js lit sa place et ne fait monter la nappe qu'à sa droite. Le voile
   ne garde qu'un léger assombrissement du haut, sous l'en-tête transparent. */
.hw-scrim { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8, 26, 46, .5) 0, rgba(8, 26, 46, 0) 90px); }
.hw-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.hw-in { position: relative; z-index: 1; grid-row: 1; align-self: center; width: 100%; padding-top: calc(var(--header-h) + clamp(1.25rem, 4vh, 2.5rem)); padding-bottom: clamp(1.25rem, 4vh, 2.5rem); }
body.v2 .hw :focus-visible { outline-color: #fff; }

/* Titre : deux lignes fixes (500, blanc), puis le mot qui change (700, dégradé, même taille et même casse que les lignes) */
body.v2 .hw-h {
    position: relative; margin: 0; max-width: none;
    font-family: var(--hw-font); font-weight: 500; font-size: clamp(1.5rem, 7.4vw, 2.25rem); line-height: 1.08;
    letter-spacing: -.028em; word-spacing: .08em; color: #fff;
}
.hw-l { display: block; }
/* 14/10 (retour de Louis : mot trop gros, mal intégré) : plus de capitales. Le mot est écrit comme dans data-w (« Agent IA »,
   « Tableau de bord »), à la taille des deux lignes du dessus, avec l'interlettrage du titre à peine desserré pour le gras.
   Graisse 700 : seules 500 et 700 sont chargées (HERO_FONT de .claude/build.mjs), une graisse 600 serait donc rendue en 700.
   Pour revenir aux capitales : sur .hw-word, remettre text-transform: uppercase; et letter-spacing: .005em;
   Marge intérieure de .hw-w : le dégradé n'est peint que dans la boîte du mot (background-clip: text), haute de 1,08 em ; sans
   elle, le bas des g et des p serait coupé. Le mot est en position absolue : cette marge ne déplace rien. */
.hw-word { position: relative; display: block; height: 1.15em; font-weight: 700; letter-spacing: -.02em; }
.hw-w {
    position: absolute; left: 0; top: 0; padding: 0 .06em .24em 0; white-space: nowrap;
    background: linear-gradient(90deg, #3498DB 0%, #8FDBFF 85%); -webkit-background-clip: text; background-clip: text; color: transparent;
    opacity: 0; filter: blur(6px); transform: translateY(14px);
    transition: opacity .45s ease, filter .45s ease, transform .45s ease;
}
.hw-w::before { content: attr(data-w); }
.hw-w.is-on { opacity: 1; filter: none; transform: none; }
.hw-w.is-out { transform: translateY(-10px); }

.hw-lede { margin: 28px 0 0; font: 400 20px/1.5 var(--f-body); color: #A9BBCC; }
.hw-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 30px; margin-top: 44px; animation: hw-fade .7s ease-out .2s both; }
@keyframes hw-fade { from { opacity: 0; } }
/* 14/10 (retour de Louis : bouton trop gros) : hauteur standard des boutons du site, celle de body.v2 .cta-button dans v2.css
   (48 px au moins, marges 12 px 24 px), au lieu de 54 px et 16 px 26 px. Texte laissé à 16 px, comme le lien d'à côté. */
body.v2 .hw .hw-cta { min-height: 48px; padding: 12px 24px; background: #1F6FA8; color: #fff; font: 600 16px/1.2 var(--f-body); transition: background-color .2s var(--ease-out); }
/* 13/10 (relecture) : #2679B6 au survol (4,67:1 avec le texte blanc) ; #2B82C2 ne donnait que 4,14:1 */
body.v2 .hw .hw-cta:hover { background: #2679B6; color: #fff; }
.hw-more { display: inline-flex; align-items: center; gap: .5em; min-height: 44px; color: #fff; font: 500 16px/1.2 var(--f-body); text-decoration: none; }
.hw-more span { padding-bottom: 3px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .3s var(--ease-out); }
.hw-more:hover { color: #fff; }
.hw-more:hover span, .hw-more:focus-visible span { background-size: 100% 1px; }
.hw-more i { display: inline-grid; flex: none; width: 18px; height: 18px; transition: transform .25s var(--ease-out); }
.hw-more svg { display: block; width: 100%; height: 100%; }
.hw-more:hover i { transform: translateX(4px); }

/* Bandeau « Ils nous font confiance » : filet très discret, fond marine à 92 %, logos qui défilent en boucle (liste triplée :
   un tiers de la largeur par tour, l'écart de fin compris, donc sans saut). Arrêt au survol et au clavier ; js/v3.js l'arrête
   aussi hors de l'écran. Logos en clair d'une seule teinte : filtres SVG de la section (v3-home-build.mjs, HW_FILTERS), choisis
   par data-tone ; un peu estompés, pleins au survol. Hauteur réglée logo par logo (poids visuels voisins) ; MYPE et Sellsy sont
   des carrés dont le dessin n'occupe que le centre : marges négatives pour reprendre le vide. */
.hw-trust { position: relative; z-index: 1; grid-row: 2; border-top: 1px solid rgba(255, 255, 255, .08); background: rgba(8, 26, 46, .92); }
.hw-trust-in { display: flex; align-items: center; gap: 40px; padding-top: 22px; padding-bottom: 24px; }
body.v2 .hw-trust h2 { flex: none; margin: 0; font: 500 13px/1.3 var(--f-body); letter-spacing: 1px; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.hw-marquee {
    flex: 1 1 auto; min-width: 0; overflow: hidden;
    padding: 6px; margin: -6px; /* place de l'anneau de focus des logos (2 px à 3 px du bord), sans rien déplacer */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* 13/10 (relecture, clavier) : pendant le focus d'un logo, pas de fondu sur les bords (le logo ramené au bord gauche par js/v3.js
   et son anneau restaient dans le fondu). Règle à part : un navigateur sans :has() l'ignore sans perdre le reste. */
.hw-marquee:has(a:focus-visible), .hm-marquee:has(a:focus-visible) { -webkit-mask-image: none; mask-image: none; }
.hw-logos { display: flex; align-items: center; gap: 64px; width: max-content; margin: 0; padding: 0 64px 0 0; list-style: none; animation: hw-marquee 38s linear infinite; }
.hw-marquee:hover .hw-logos, .hw-marquee:focus-within .hw-logos { animation-play-state: paused; }
@keyframes hw-marquee { to { transform: translateX(calc(-100% / 3)); } }
.hw-logos li { flex: none; }
.hw-logos a { display: flex; align-items: center; height: 44px; border-radius: 6px; color: #fff; text-decoration: none; opacity: .62; transition: opacity .25s var(--ease-out); }
.hw-logos a:hover, .hw-logos a:focus-visible { opacity: 1; }
.hw-logos img { display: block; width: auto; height: 30px; max-width: none; }
.hw-logos a[data-tone="ink"] img { filter: url(#hw-ink); }
.hw-logos a[data-tone="light"] img { filter: url(#hw-light); }
.hw-logos a[data-logo="fortifika"] img { height: 23px; }
.hw-logos a[data-logo="alto"] img { height: 40px; }
.hw-logos a[data-logo="yourban"] img { height: 36px; }
.hw-logos a[data-logo="mype"] img { height: 64px; margin: -10px -15px; }
.hw-logos a[data-logo="milpa"] img { height: 42px; margin: 0 -6px; }
.hw-logos a[data-logo="sage"] img { height: 44px; }
.hw-logos a[data-logo="sellsy"] img { height: 48px; margin: -2px -6px; } /* logo complet : dessin de 28 px de haut dans une image de 48 */
.hw-logos .hm-logo-w { font: 700 20px/1 var(--hw-font); letter-spacing: -.02em; }

/* 13/10 au soir (décision de Louis) : « Nos réalisations » mène au carrousel de l'accueil (section.hm-work, #realisations ou
   #projects). Arrivée : le haut de la section juste sous l'en-tête collant (67 px de haut au-dessus de 768 px, 51 px en dessous ;
   --header-h vaut 70 et 62), le titre à son écart habituel dessous (--sec-y), sans bande de la section précédente au-dessus.
   La règle commune (v2.css, [id] : --header-h + 12 px) laissait 15 à 23 px de la section d'avant. Le focus posé par
   js/v3-home.js sur la section ne dessine pas de contour autour d'elle. */
body.v2 main.hm > .hm-work { scroll-margin-top: calc(var(--header-h) - 3px); }
@media (max-width: 768px) { body.v2 main.hm > .hm-work { scroll-margin-top: calc(var(--header-h) - 11px); } }
body.v2 main.hm > .hm-work:focus { outline: none; }

@media (min-width: 760px) {
    body.v2 .hw-h { font-size: clamp(2.25rem, 3.9vw + 6px, 4rem); }
}
@media (max-width: 759.98px) {
    /* téléphone : texte en haut, la vague dans une bande au-dessus du bandeau (elle passe un peu derrière les boutons, haut estompé),
       pas de dégradé ; bandeau en colonne */
    /* grid-row: 1 / 2 (les deux lignes sont dites : pour un élément en position absolue, une ligne « auto » vaut le bord de la section) */
    .hw-canvas { inset: auto 0 0 0; grid-row: 1 / 2; height: var(--hw-wave-h); -webkit-mask-image: linear-gradient(180deg, transparent, #000 34%); mask-image: linear-gradient(180deg, transparent, #000 34%); }
    .hw-scrim { display: none; }
    .hw-in { align-self: start; padding-top: calc(var(--header-h) + 2.5rem); padding-bottom: calc(var(--hw-wave-h) - 80px); }
    .hw-lede { margin-top: 20px; font-size: 18px; }
    .hw-actions { margin-top: 30px; }
    /* 14/10 (bouton « Commencer par un pré-diagnostic gratuit », plus long que « Réserver un pré-audit gratuit ») : sur deux lignes au
       téléphone, texte centré et lignes équilibrées (sinon « gratuit » restait seul à gauche). Avant : pas de règle ici. */
    body.v2 .hw .hw-cta { justify-content: center; text-align: center; text-wrap: balance; }
    .hw-trust-in { flex-direction: column; align-items: stretch; gap: 12px; padding-top: 18px; padding-bottom: 20px; }
    .hw-logos { gap: 44px; padding-right: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    /* pas de défilement : les logos une seule fois, sur une ou plusieurs rangées ; mot fixe (js/v3-home.js ne le change pas) */
    .hw-logos { animation: none; flex-wrap: wrap; width: auto; gap: 8px 44px; padding-right: 0; }
    .hw-logos li[aria-hidden="true"] { display: none; }
    .hw-marquee { -webkit-mask-image: none; mask-image: none; }
    .hw-w, .hw-more span, .hw-more i { transition: none; }
    .hw-more:hover i { transform: none; }
    .hw-actions { animation: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 759.98px) {
    /* téléphone, sans défilement : sept logos sur deux rangées (quatre puis trois) au lieu de trois, un peu plus petits */
    .hw-logos { zoom: .84; gap: 4px 26px; }
}
@media print {
    .hw { min-height: 0; }
    .hw-canvas, .hw-scrim { display: none; }
    .hw-logos { animation: none; }
    /* 13/10 (relecture) : le fond marine n'est pas imprimé par défaut ; textes de l'accroche en sombre, et le mot qui change
       (texte transparent sur dégradé, invisible sans fond) en couleur pleine. Ne pas forcer l'impression du fond marine
       (print-color-adjust: exact) : l'en-tête, imprimé comme sur les autres pages, serait en marine sur marine. */
    .hw { background: none; color: var(--ink); }
    body.v2 .hw-h, .hw-more { color: var(--ink); }
    .hw-lede { color: var(--muted); }
    .hw-w { background: none; color: var(--tide); }
    /* imprimé pendant un changement de mot : le mot qui sort reste net et entier (sinon ligne floue ou vide) */
    .hw-w { transition: none; }
    .hw-w.is-out { opacity: 1; filter: none; transform: none; }
    /* téléphone et papier en portrait : plus de place réservée à la vague sous les boutons */
    .hw-in { padding-bottom: 1.5rem; }
    /* fond non imprimé, suite : le bouton principal garde le sien (texte blanc), le titre du bandeau passe en sombre, et les
       logos sont imprimés tels quels (le filtre les passait en blanc), une seule fois, comme avec « moins d'animations » */
    body.v2 .hw .hw-cta { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    body.v2 .hw-trust h2 { color: var(--muted); }
    .hw-marquee { -webkit-mask-image: none; mask-image: none; }
    .hw-logos { flex-wrap: wrap; width: auto; gap: 8px 44px; padding-right: 0; }
    .hw-logos li[aria-hidden="true"] { display: none; }
    .hw-logos a { opacity: 1; color: var(--ink); }
    .hw-logos a[data-tone] img { filter: none; }
}