/* Selon votre maturité (07/10 au soir) : les trois sections ajoutées sous le bloc des niveaux (v3-maturity.mjs).
   Chargée par le socle (build.mjs charge v5-<clé>.css quand le fichier existe), après v3-home.css et v3-pages.css.
   Retour de Louis : la page « fait très vite » ; on la remplit avec du contenu simple, sans animation : seuls l'escalier miniature,
   les icônes et les flèches réagissent au survol, dans les cartes ; aucun bloc ne bouge. Pas de contour : les cartes prennent
   l'autre teinte que leur section. Aucune marge ni rembourrage de section propre (rythme commun, v3.css). */

/* 10/10 au matin : le Diagnostic express (venu de la page MaturIA) était sur cette page, avec ses règles (.mq-*) dans
   v3-maturia.css, que build.mjs charge ici par un <link>, juste avant cette feuille. La frise « Un parcours possible » est passée
   de mp-* à mr-* (v3-maturia.css a ses propres .mp-step, .mp-steps et .mp-n).
   10/10 au soir : le Diagnostic express est reparti sur la page MaturIA ; cette page n'utilise plus aucune règle de
   v3-maturia.css (le <link> de build.mjs peut être retiré ; le garde-manger la charge de son côté). Le test en cinq questions a ses
   propres règles, préfixe mc-, plus bas.
   10/10 soir (intégration) : <link> retiré de build.mjs. v3-maturia.css n'est plus chargée sur Selon votre maturité, seulement sur
   MaturIA et au garde-manger (une requête de moins ; aucune de ses règles ne s'appliquait ici). */

/* 10/10 (relecture) : sans JavaScript, les quatre niveaux sont lisibles l'un sous l'autre (le générateur pose hidden sur les niveaux
   2 à 4, que js/v3.js alterne ; sans script, seul le premier se voyait). Règle CSS plutôt que hidden posé par le script : pas de
   saut de mise en page au chargement. !important et sélecteur plus précis pour passer devant « body.v3 [hidden] » (v3.css). */
html:not(.js) body.v3 .mv-panel[hidden] { display: block !important; }
html:not(.js) .mv-panel + .mv-panel { margin-top: clamp(2rem, 4vw, 3rem); }

/* ---------- Comment vous situer (écume, cartes blanches) : 4 colonnes, celles des marches du bloc des niveaux ---------- */
.ms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.ms-card { display: flex; flex-direction: column; gap: 9px; padding: 15px 16px 14px; border-radius: var(--b-r-card); background: #fff; }
.ms-top { display: flex; align-items: center; gap: 12px; }
.ms-top p { display: grid; gap: 1px; margin: 0; }
.ms-top small { font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--tide); }
.ms-top b { font: 600 18px/1.2 var(--f-display); letter-spacing: -.01em; color: var(--ink); }
/* escalier miniature : la marche du niveau en marine ; au survol, la marche suivante s'allume */
.ms-mini { display: flex; flex: none; align-items: flex-end; gap: 3px; width: 42px; height: 34px; padding: 7px 7px 6px; border-radius: var(--b-r-card); background: var(--sea); }
.ms-mini i { flex: 1; border-radius: 2px 2px 1px 1px; background: var(--tide-soft); transition: background-color .3s var(--ease-out); }
.ms-mini i:nth-child(1) { height: 25%; }
.ms-mini i:nth-child(2) { height: 50%; }
.ms-mini i:nth-child(3) { height: 75%; }
.ms-mini i:nth-child(4) { height: 100%; }
.ms-card[data-n="1"] .ms-mini i:nth-child(1), .ms-card[data-n="2"] .ms-mini i:nth-child(2),
.ms-card[data-n="3"] .ms-mini i:nth-child(3), .ms-card[data-n="4"] .ms-mini i:nth-child(4) { background: var(--ink); }
.ms-card[data-n="1"]:hover .ms-mini i:nth-child(2), .ms-card[data-n="2"]:hover .ms-mini i:nth-child(3),
.ms-card[data-n="3"]:hover .ms-mini i:nth-child(4) { background: var(--fish); }
.ms-card[data-n="4"]:hover .ms-mini i:nth-child(4) { background: var(--tide); }
.ms-k { margin: 0; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--tide); }
.ms-crit { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.ms-crit li { margin: 0; font-size: 14px; line-height: 1.42; color: var(--ink); text-wrap: pretty; }
.ms-crit li b { display: flex; align-items: center; gap: 5px; margin-bottom: 1px; font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--muted); }
.ms-crit li b i { display: inline-grid; color: var(--tide); }
.ms-crit li b svg { width: 13px; height: 13px; }
.ms-next { padding: 10px 12px 11px; border-radius: var(--b-r-card); background: var(--sea); }
.ms-next p { margin: 0; font-size: 14px; line-height: 1.42; color: var(--ink); text-wrap: pretty; }
.ms-next .ms-k { margin-bottom: 2px; }
.ms-go { display: inline-flex; align-items: center; align-self: start; gap: 5px; margin-top: auto; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--tide); text-decoration: none; }
.ms-go:hover, .ms-go:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.ms-go i svg { display: block; width: 13px; height: 13px; transition: transform .25s var(--ease-out); }
.ms-card:hover .ms-go i svg { transform: translateX(3px); }
/* sur ordinateur, les repères, le pas suivant et le lien sont alignés d'une carte à l'autre */
@supports (grid-template-rows: subgrid) {
    @media (min-width: 1081px) {
        .ms { grid-template-rows: repeat(7, auto); row-gap: 0; }
        .ms-card { display: grid; grid-template-rows: subgrid; grid-row: span 7; row-gap: 9px; }
        .ms-crit { display: contents; }
        .ms-next { align-self: stretch; }
        .ms-go { align-self: end; }
    }
}

/* ---------- Un parcours possible (blanc, cartes écume) : bandeau des niveaux, puis cinq étapes reliées par un trait ---------- */
.mr { --gap: 14px; }
.mr-lv { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); margin: 0 0 14px; }
.mr-lv span { grid-column: var(--a) / var(--b); display: flex; align-items: baseline; gap: 8px; padding: 0 0 7px; border-bottom: 4px solid var(--tide-soft); font: 600 15.5px/1.25 var(--f-display); color: var(--ink); }
.mr-lv span + span { border-bottom-color: var(--tide); }
.mr-lv small { font: 600 12.5px/1.3 var(--f-body); color: var(--tide); }
.mr-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.mr-step { position: relative; display: flex; flex-direction: column; gap: 12px; margin: 0; }
.mr-step:not(:last-child)::after { content: ""; position: absolute; top: 15px; left: 40px; right: calc(-1 * var(--gap)); height: 2px; border-radius: 1px; background: var(--tide-soft); }
.mr-n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--b-r-tag); background: var(--ink); color: #fff; font: 600 14.5px/1 var(--f-display); transition: background-color .25s var(--ease-out); }
.mr-step:hover .mr-n { background: var(--tide); }
.mr-card { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 14px 15px 13px; border-radius: var(--b-r-card); background: var(--sea); }
.mr-t { margin: 0; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--tide); }
body.v2 .mr-card h3 { margin: 0; font: 600 16.5px/1.25 var(--f-display); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.mr-p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink); text-wrap: pretty; }
.mr-e { margin: auto 0 0; padding-top: 4px; font-size: 13.5px; line-height: 1.35; }
.mr-e a { font-weight: 600; color: var(--tide); text-decoration: none; }
.mr-e a:hover, .mr-e a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
/* flèche collée au dernier mot quand le nom de l'expertise passe sur deux lignes */
.mr-e a i { display: inline-block; margin-left: 5px; vertical-align: -1px; }
.mr-e a i svg { display: block; width: 13px; height: 13px; transition: transform .25s var(--ease-out); }
.mr-step:hover .mr-e a i svg { transform: translateX(3px); }
.mr-e span { display: inline-block; padding: 3px 10px; border-radius: var(--b-r-tag); background: #fff; font-size: 13px; font-weight: 600; color: var(--ink); }

/* ---------- Ce que regarde l'audit de maturité (écume, cartes blanches) : quatre axes, puis comment et ce que vous recevez ---------- */
.ma { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ma-axes { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.ma-ax { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 15px 16px 16px; border-radius: var(--b-r-card); background: #fff; }
.ma-ic { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 4px; border-radius: var(--b-r-card); background: var(--sea); color: var(--tide); transition: background-color .25s var(--ease-out), color .25s var(--ease-out); }
.ma-ic svg { width: 17px; height: 17px; transition: transform .35s var(--ease-out); }
.ma-ax:hover .ma-ic { background: var(--tide); color: #fff; }
.ma-ax:hover .ma-ic svg { transform: scale(1.12) rotate(-8deg); }
body.v2 .ma h3 { margin: 0; font: 600 17px/1.25 var(--f-display); letter-spacing: -.01em; color: var(--ink); }
.ma-ax p, .ma-how p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink); text-wrap: pretty; }
.ma-how { grid-column: span 2; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 18px 20px; border-radius: var(--b-r-card); background: #fff; }
.ma-get { grid-column: span 2; display: grid; grid-template-columns: 172px minmax(0, 1fr); align-items: center; gap: 18px; padding: 14px 20px 14px 12px; border-radius: var(--b-r-card); background: #fff; }
.ma-get ul { display: grid; gap: 5px; margin: 8px 0 0; padding: 0; list-style: none; }
.ma-get li { position: relative; margin: 0; padding-left: 16px; font-size: 14px; line-height: 1.4; color: var(--ink); }
.ma-get li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 6px; height: 6px; background: var(--fish); } /* 14/10 : carré plein, écho du pixel (avant : rond, border-radius 50 %) */
.ma-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 10px 0 0; font-size: 14px; }
.ma-fig { margin: 0; }
/* valeurs du radar : un exemple, dit comme tel (rien d'inventé) */
.ma-fig figcaption { margin-top: 2px; font-size: 12px; line-height: 1.3; color: var(--muted); text-align: center; }
.ma-radar { display: block; width: 100%; height: auto; overflow: visible; }
.ma-ring { fill: none; stroke: var(--tide-soft); stroke-width: 1; }
.ma-axis { stroke: var(--tide-soft); stroke-width: 1; transition: stroke .25s var(--ease-out); }
.ma-area { fill: rgba(31, 111, 168, .2); stroke: var(--tide); stroke-width: 1.6; stroke-linejoin: round; }
.ma-dot { fill: var(--tide); transform-box: fill-box; transform-origin: center; transition: transform .25s var(--ease-out), fill .25s var(--ease-out); }
.ma-lab { font: 600 11px var(--f-body); fill: var(--muted); transition: fill .25s var(--ease-out); }
/* au survol d'un axe, son trait, son point et son nom s'allument sur le radar */
.ma:has(.ma-ax[data-ax="1"]:hover) .ma-axis[data-ax="1"],
.ma:has(.ma-ax[data-ax="2"]:hover) .ma-axis[data-ax="2"],
.ma:has(.ma-ax[data-ax="3"]:hover) .ma-axis[data-ax="3"],
.ma:has(.ma-ax[data-ax="4"]:hover) .ma-axis[data-ax="4"] { stroke: var(--tide); stroke-width: 2; }
.ma:has(.ma-ax[data-ax="1"]:hover) .ma-dot[data-ax="1"],
.ma:has(.ma-ax[data-ax="2"]:hover) .ma-dot[data-ax="2"],
.ma:has(.ma-ax[data-ax="3"]:hover) .ma-dot[data-ax="3"],
.ma:has(.ma-ax[data-ax="4"]:hover) .ma-dot[data-ax="4"] { transform: scale(1.6); fill: var(--fish); }
.ma:has(.ma-ax[data-ax="1"]:hover) .ma-lab[data-ax="1"],
.ma:has(.ma-ax[data-ax="2"]:hover) .ma-lab[data-ax="2"],
.ma:has(.ma-ax[data-ax="3"]:hover) .ma-lab[data-ax="3"],
.ma:has(.ma-ax[data-ax="4"]:hover) .ma-lab[data-ax="4"] { fill: var(--ink); }

/* ---------- Tablette ---------- */
@media (max-width: 1080px) {
    .ms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ma-axes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ma-how, .ma-get { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
    /* frise verticale : la pastille à gauche, le trait descend d'une étape à l'autre */
    .mr-lv { display: flex; flex-wrap: wrap; gap: 8px 14px; }
    .mr-lv span { flex: 1 1 160px; }
    .mr-steps { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .mr-step { flex-direction: row; gap: 14px; }
    .mr-step:not(:last-child)::after { top: 40px; bottom: -6px; left: 15px; right: auto; width: 2px; height: auto; }
    .mr-n { flex: none; }
}

/* ---------- Téléphone ---------- */
@media (max-width: 760px) {
    .ms { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .ma, .ma-axes { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .ma-axes { grid-column: 1; }
    .ma-how, .ma-get { grid-column: 1; }
    .ma-get { grid-template-columns: minmax(0, 1fr); justify-items: start; padding: 16px; }
    .ma-fig { width: 150px; }
    .ms-go { min-height: 44px; }
    .mr-e a { display: inline-block; padding: 12px 0; }
    .ma-links { gap: 0 18px; }
    .ma-links a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .ms-mini i, .ms-go i svg, .mr-n, .mr-e a i svg, .ma-ic, .ma-ic svg, .ma-axis, .ma-dot, .ma-lab { transition: none; }
}
/* ================= 10/10 au matin (retours de Louis) : page recentrée =================
   Les sections « Comment vous situer », « Un parcours possible » et « Ce que regarde l'audit » ne sont plus qu'au garde-manger :
   leurs règles plus haut restent pour lui (v5-maturity.css à charger au garde-manger, PANTRY_CSS de build.mjs).
   Ordre et fonds de la page : voir le bloc du 10/10 au soir, en fin de feuille. */

/* MaturIA : une carte écume sur la section blanche ; le texte et les liens à gauche (10/10 au soir : la démonstration et la page,
   .mz-act en fin de feuille), les trois temps du cycle à droite (cartes blanches). Au survol d'un temps, seule son icône s'anime ;
   rien ne bouge. */
.mz { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: clamp(20px, 3vw, 44px); padding: clamp(22px, 3vw, 40px); border-radius: var(--b-r-card); background: var(--b-mist); }
.mz-k { margin: 0 0 10px; font: 600 12px/1.3 var(--f-body); letter-spacing: .09em; text-transform: uppercase; color: var(--b-faint); } /* 14/10 : étiquette de rubrique */
.mz-p { margin: 14px 0 0; max-width: 54ch; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.mz-act { margin: 22px 0 0; }
.mz-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.mz-steps li { display: flex; align-items: center; gap: 14px; margin: 0; padding: 14px 18px; border-radius: var(--b-r-card); background: #fff; }
/* 14/10 (lot 2) : pictogramme nu, au trait, en accent, sans carré de fond ni rotation au survol */
.mz-ic { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 0; background: none; color: var(--b-accent); }
.mz-ic svg { width: 22px; height: 22px; }
.mz-steps span { display: grid; gap: 1px; font-size: 14.5px; line-height: 1.4; color: var(--muted); }
.mz-steps small { font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--b-faint); }
.mz-steps b { font: 600 17px/1.25 var(--f-display); letter-spacing: -.012em; color: var(--ink); }
@media (max-width: 900px) {
    .mz { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
    .mz { padding: 20px 16px; }
    .mz-steps li { padding: 12px 14px; }
}

/* Garde-manger : les sections retirées prennent le fond que leur donne l'alternance ; leurs cartes prennent l'autre teinte */
.ms-sec:not(.df-sea) .ms-card { background: var(--sea); }
.ms-sec:not(.df-sea) .ms-mini, .ms-sec:not(.df-sea) .ms-next { background: #fff; }
.mr-sec.df-sea .mr-card { background: #fff; }
.mr-sec.df-sea .mr-e span { background: var(--sea); }
.ma-sec:not(.df-sea) .ma-ax, .ma-sec:not(.df-sea) .ma-how, .ma-sec:not(.df-sea) .ma-get { background: var(--sea); }
.ma-sec:not(.df-sea) .ma-ic { background: #fff; }
@media (prefers-reduced-motion: reduce) {
    .mc-opt, .mc-prog i { transition: none; }
}

/* ================= 10/10 au soir (Louis se ravise) : les niveaux d'abord, puis un test en cinq questions =================
   « Dans Selon votre maturité, j'ai peur que ça fasse peur aux gens. D'abord le bloc : est-ce que vous êtes novice, expert, etc.,
   et après un lien qui pousse : vous ne savez pas, allez faire le test », une conversation simple comme sur maturia.info.
   Fonds : haut de page (écume), niveaux (blanc), test (écume), MaturIA (blanc), bandeau (marine), questions (blanc).
   Le Diagnostic express est reparti sur la page MaturIA : ses réglages (« #diagnostic ») ont quitté cette feuille pour
   v3-maturia.css. Les niveaux, de nouveau sur blanc, reprennent leurs règles de base (v3-pages.css : cartes écume) : les règles
   « .mv-sec.df-sea » du matin sont retirées. */

/* Haut de page : dans « Où en êtes-vous ? », le générateur entoure le mot composé d'un <span class="nw"> (pas de coupure au trait
   d'union), et la règle de la ligne-clé (« .df-hero h1 span », v2.css : couleur marée, graisse 500) s'y appliquait : « êtes-vous »
   sortait en bleu et en maigre. Ici il garde la couleur et la graisse du titre. */
body.v2 .df-page-hero h1 .nw { color: inherit; font-weight: inherit; }

/* Le lien qui pousse vers le test : une carte écume à droite du titre des niveaux (la question, puis le lien). Au survol, seule
   la flèche descend. Sur tablette et téléphone, la carte passe sous le titre. */
.mv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px 32px; }
.mv-ask { display: grid; flex: none; gap: 2px; margin: 0; padding: 12px 18px 13px; border-radius: var(--b-r-card); background: var(--sea); }
.mv-ask span { font-size: 14px; line-height: 1.35; color: var(--muted); }
.mv-ask a { display: inline-flex; align-items: center; gap: 7px; font: 600 17px/1.3 var(--f-display); color: var(--tide); text-decoration: none; }
.mv-ask a:hover, .mv-ask a:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.mv-ask a i { display: inline-grid; }
.mv-ask a i svg { width: 16px; height: 16px; transition: transform .25s var(--ease-out); }
.mv-ask:hover a i svg { transform: translateY(3px); }

/* Le test (#test, écume) : le texte à gauche, la conversation à droite (carte blanche, sans contour). La carte a une hauteur
   fixe : la conversation défile en dedans et prend la place que lui laissent l'en-tête, les réponses et le pied, si bien que rien
   ne bouge sur la page d'une question à l'autre, ni à l'affichage du résultat. À 1366 x 650, la section tient dans l'écran
   (carte de 420 px, marges de section comprises : 563 px pour 583 px utiles sous l'en-tête). */
.mc-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; gap: clamp(24px, 4vw, 64px); }
.mc-txt { display: flex; flex-direction: column; min-width: 0; }
.mc-txt .hm-sub { max-width: 42ch; }
/* petits repères des quatre niveaux, en bas de la colonne de texte : le niveau obtenu s'allume (js/v5-maturity.js).
   14/10 (lot 2) : plus d'escalier ; quatre colonnes de même hauteur, un filet d'un pixel en tête, filet d'accent de 2 px et nom en
   marine pour le niveau obtenu. 14/10 (relecture du lot 2) : sous le texte, et non plus calés en bas de la colonne (margin: auto 0 0),
   ce qui laissait un vide au premier écran. */
.mc-stairs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 10px; max-width: 400px; margin: 0; padding: 28px 0 0; list-style: none; }
.mc-stairs li { display: grid; gap: 8px; margin: 0; }
.mc-stairs i { display: block; height: 2px; border-radius: 0; background: var(--b-rule); transition: background-color .35s var(--ease-out); }
.mc-stairs span { font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--b-faint); transition: color .35s var(--ease-out); }
.mc-stairs li.is-on i { background: var(--b-accent); }
.mc-stairs li.is-on span { font-weight: 600; color: var(--ink); }

.mc { display: flex; flex-direction: column; min-width: 0; height: clamp(400px, calc(100vh - 230px), 480px); padding: 20px 24px 12px; border-radius: var(--b-r-card); background: #fff; }
/* 14/10 (lot 2, direction « premium sobre ») : plus de conversation dessinée. Le mot d'accueil est un chapeau en texte en tête de
   la carte (à la place de la ligne « DataFish » et de son avatar poisson, règles .mc-who retirées) ; les questions et les réponses
   s'enchaînent en lignes à filets, sans bulles : la question en texte, sa rubrique en petites capitales grises, la réponse choisie
   en bleu, marquée d'un trait de 2 px à gauche. */
.mc-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px 20px; margin: 0 0 14px; }
.mc-lede { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--b-text); text-wrap: pretty; }
.mc-count { margin: 0; padding-top: 3px; font: 500 13px/1.3 var(--f-display); letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--b-accent); white-space: nowrap; }
.mc-prog { grid-column: 1 / -1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 5px; margin: 0; }
.mc-prog i { height: 2px; border-radius: 0; background: var(--b-rule); transition: background-color .3s var(--ease-out); }
.mc-prog i.is-on { background: var(--b-accent); }
/* 14/10 (relecture du lot 2) : les échanges prennent leur hauteur (flex: 0 1 auto, avant 1 1 0) et ne défilent qu'au-delà de la
   place libre : les réponses suivent la question au lieu d'être poussées en bas de la carte ; le vide passe sous elles, au-dessus du
   pied (.mc-foot, margin-top: auto), et la carte garde sa hauteur fixe. */
.mc-log { display: flex; flex: 0 1 auto; flex-direction: column; gap: 0; min-height: 0; overflow-y: auto; padding: 0 6px 2px 0; scrollbar-width: thin; scrollbar-color: var(--b-rule) transparent; }
.mc-log:focus-visible { outline: 2px solid var(--b-accent); outline-offset: 4px; border-radius: var(--b-r-tag); }
.mc-b { flex: none; max-width: none; margin: 0; padding: 0; border-radius: 0; background: none; font-size: 16px; line-height: 1.45; color: var(--ink); text-wrap: pretty; }
.mc-b--bot { align-self: stretch; padding: 14px 0 0; }
.mc-b--bot + .mc-b--bot, .mc-b--me + .mc-b--bot { margin-top: 14px; box-shadow: inset 0 1px 0 var(--b-rule); }
.mc-b--bot + .mc-b--bot[data-step] { margin-top: 0; padding-top: 8px; box-shadow: none; } /* résultat : sa seconde phrase suit la première */
.mc-b--me { align-self: flex-start; margin-top: 10px; padding: 1px 0 1px 12px; box-shadow: inset 2px 0 0 var(--b-accent); font-weight: 600; color: var(--b-accent); }
.mc-b small { display: block; margin-bottom: 4px; font: 600 11.5px/1.4 var(--f-body); letter-spacing: .09em; text-transform: uppercase; color: var(--b-faint); }
.mc-b small em { display: inline; margin: 0; padding: 0; border-radius: 0; background: none; font-style: normal; color: inherit; }
.mc-b b { font-family: var(--f-display); font-weight: 600; }
@keyframes mc-in { from { opacity: 0; } }
.mc-b[data-step] { animation: mc-in .3s var(--ease-out) both; }
/* réponses à choisir : de vrais boutons, rectangles nets sur brume, 44 px de haut ; marine au survol */
.mc-opts { display: flex; flex: none; flex-wrap: wrap; justify-content: flex-start; gap: 8px; margin: 14px 0 0; }
.mc-opt { min-height: 44px; padding: 9px 20px; border: 0; border-radius: var(--b-r-card); background: var(--b-mist); color: var(--ink); font: 600 16px/1.2 var(--f-body); cursor: pointer; transition: background-color .2s var(--ease-out), color .2s var(--ease-out); }
.mc-opt:hover { background: var(--b-night); color: #fff; }
.mc-opt:focus-visible, .mc-back:focus-visible, .mc-reset:focus-visible { outline: 2px solid var(--tide); outline-offset: 2px; }
/* résultat : le niveau est dit dans les deux dernières bulles ; ici, d'où il vient, puis les deux suites */
.mc-end { flex: none; margin: 12px 0 0; }
.mc-note { margin: 0 0 8px; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.mc-act { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin: 0; }
body.v2 .mc-go { padding: 11px 18px; font-size: 16px; text-align: left; cursor: pointer; }
.mc-go:focus-visible { outline: 2px solid var(--tide); outline-offset: 3px; }
body.v2 .mc-act .df-link { font-size: 16.5px; }
.mc-cal { margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
.mc-foot { display: flex; flex: none; justify-content: space-between; gap: 12px; min-height: 30px; margin: auto 0 0; padding-top: 8px; } /* 14/10 (relecture) : avant, margin 8px 0 0 */
.mc-back, .mc-reset { padding: 6px 0; border: 0; background: none; font: 600 13.5px/1.3 var(--f-body); color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mc-reset { margin-left: auto; }
.mc-back:hover, .mc-reset:hover { color: var(--ink); }
/* sans JavaScript : la première bulle et le message (noscript) ; pas de compteur, de réponses ni de pied ; hauteur libre */
html:not(.js) .mc { height: auto; }
html:not(.js) .mc-count, html:not(.js) .mc-prog, html:not(.js) .mc-opts, html:not(.js) .mc-foot { display: none; }

/* MaturIA : le bouton de la démonstration et le lien vers la page, côte à côte */
.mz-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }

@media (max-width: 960px) {
    .mv-head { flex-direction: column; align-items: flex-start; }
    .mc-wrap { grid-template-columns: minmax(0, 1fr); gap: var(--sec-head); }
    .mc-txt .hm-sub { max-width: 58ch; }
    .mc-stairs { display: none; }
}
@media (max-width: 760px) {
    .mv-ask { width: 100%; }
    .mv-ask a { min-height: 44px; }
    .mc { height: clamp(430px, 78vh, 540px); padding: 14px 14px 10px; border-radius: var(--b-r-card); }
    .mc-b { font-size: 15.5px; }
    .mc-opts { justify-content: stretch; }
    .mc-opt { flex: 1 1 auto; padding-inline: 12px; }
    body.v2 .mc-go { width: 100%; }
    .mc-back, .mc-reset { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .mv-ask a i svg, .mc-stairs i, .mc-stairs span, .mc-prog i, .mc-opt { transition: none; }
    .mc-b[data-step] { animation: none; }
}

/* ================= 14/10 (Louis : « simplifie ça et passe-le en dessous de "faites le point en 5 min" ; vire les exemples d'actions
   par niveau ») : le test d'abord, puis les niveaux, sans chantiers (SHOW_LEVEL_IDEAS = false dans v3-maturity.mjs) =================
   Fonds : haut de page (marine), test (blanc), niveaux (brume), MaturIA (blanc), bandeau (marine), questions (blanc).
   Le test, sur blanc : sa carte prend la brume et ses réponses le blanc (sur brume, elles reprennent le blanc au repos, le marine au
   survol, comme avant). Les règles de base (carte blanche sur brume) restent pour SHOW_LEVEL_IDEAS = true. */
.mc-sec:not(.df-sea) .mc { background: var(--b-mist); }
.mc-sec:not(.df-sea) .mc-opt { background: #fff; }
.mc-sec:not(.df-sea) .mc-opt:hover { background: var(--b-night); }
/* Les niveaux, sur brume : sous les quatre colonnes, le niveau choisi ne montre plus qu'une bande blanche pleine largeur, « Premier pas »
   (étiquette en petites capitales, la phrase en titre) à gauche, le rendez-vous à droite. Pas de contour, pas d'ombre, rayon de la carte.
   Les règles .mv-start de v3-pages.css (carte marine d'un quart de largeur, dans la grille des chantiers) restent pour le drapeau. */
.mv--lean .mv-start { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 32px; padding: 22px 26px; border-radius: var(--b-r-card); background: #fff; color: var(--ink); }
body.v2 .mv--lean .mv-start h3 { grid-column: 1; margin: 0; font: 600 11.5px/1.3 var(--f-body); letter-spacing: .09em; text-transform: uppercase; color: var(--b-faint); }
.mv--lean .mv-start p { grid-column: 1; margin: 0; max-width: 60ch; font: 500 18px/1.4 var(--f-display); letter-spacing: -.01em; color: var(--ink); text-wrap: pretty; }
body.v2 .mv--lean .mv-start .cta-button { grid-column: 2; grid-row: 1 / span 2; width: auto; margin: 0; padding: 12px 20px; font-size: 15.5px; background: var(--b-accent); color: #fff; }
body.v2 .mv--lean .mv-start .cta-button:hover { background: var(--b-accent-hover); color: #fff; }
@media (max-width: 760px) {
    .mv--lean .mv-start { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 16px; }
    .mv--lean .mv-start p { font-size: 16.5px; }
    body.v2 .mv--lean .mv-start .cta-button { grid-column: 1; grid-row: auto; width: 100%; margin-top: 10px; }
}

/* ================= 14/10 (Louis : « pas très fan du chatbot en assistance pour déterminer son niveau ; sur une page dédiée, celle-ci ;
   à peine un peu plus large que la carte du test, centré ») : la section #test ne porte plus que le chat MaturIA (js/prediag.js,
   data-prediag="inline"), à la place de la colonne de texte et du test local (SHOW_LOCAL_TEST = false dans v3-maturity.mjs).
   Largeur : 680 px, la carte du test mesurait 621 px à 1366 (relevé du 14/10). Hauteur : tient sous l'en-tête fixe, pour que
   js/v5-maturity.js puisse centrer le chat dans la fenêtre à l'arrivée. prediag.js pose son propre style (.pd-inline : contour,
   ombre, rayon 18 px) dans <head> au chargement, donc APRÈS cette feuille : d'où l'id #test dans les sélecteurs, pour passer devant
   sans modifier prediag.js. Règles du site : rayon 6 px, ni ombre ni contour ; la section est blanche (sous le haut de page marine),
   le cadre prend la brume. ================= */
/* le chat de maturia.info a un fond blanc opaque : sur la section blanche, il ne se distinguerait pas ; le cadre brume l'entoure donc
   d'une marge (comme l'ancienne carte du test, brume, réponses blanches). */
#test .mc-chat { display: block; width: 100%; max-width: 680px; margin: 0 auto; padding: 14px; border-radius: var(--b-r-card); background: var(--b-mist); }
#test .mc-chat .pd-inline { display: block; width: 100%; max-width: none; height: clamp(410px, calc(100vh - var(--header-h) - 76px), 592px); margin: 0; border: 0; border-radius: var(--b-r-card); background: #fff; box-shadow: none; }
@media (max-width: 760px) { #test .mc-chat { padding: 8px; } #test .mc-chat .pd-inline { height: clamp(420px, calc(100vh - var(--header-h) - 64px), 600px); } }
/* 21/10 (Constantin, maquette B) : le chat et la fiche « Ce que nous retenons » côte à côte, à l'habillage DataFish (data-layout,
   data-brand : js/prediag.js) ; plus large, sans le fond brume (la fiche porte déjà le marine), hauteur fixe. */
#test .mc-chat[data-layout="fiche"] { max-width: 1120px; padding: 0; background: none; }
#test .mc-chat[data-layout="fiche"] .pd-inline { height: clamp(560px, calc(100vh - var(--header-h) - 60px), 660px); border-radius: 0; background: transparent; }
@media (max-width: 760px) { #test .mc-chat[data-layout="fiche"] .pd-inline { height: clamp(560px, calc(100dvh - var(--header-h) - 32px), 720px); } }
#test .mc-chat noscript p { margin: 0; padding: 28px 24px; text-align: center; }