/* DataFish V3 : extensions du système « carte marine ».
Chargé après v2.css. Mêmes jetons, mêmes polices, pas de cadre autour des blocs. */
:root {
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
/* 14/10 : ramenés au bleu d'accent et au bleu clair sur marine (avant : #3A8CC8 et #8EC1F0) ; le logo garde #3A8CC8 (plus bas) */
--fish: var(--b-accent);
--signal: var(--b-accent-dark);
}
/* L'attribut hidden l'emporte sur les display des composants */
body.v3 [hidden] { display: none !important; }
/* ---------- Surfaces du navigateur ---------- */
body.v3 ::selection { background: var(--tide-soft); color: var(--ink); }
html { scrollbar-color: #B7C8D6 transparent; }
body.v3 { caret-color: var(--tide); }
body.v3 a, body.v3 button { -webkit-tap-highlight-color: transparent; }
body.v3 .df-link { text-underline-offset: 5px; }
/* Menus : un fondu court, sans effet rebond */
@media (min-width: 769px) {
body.v3 .dropdown-menu { transition: opacity .18s var(--ease-out), transform .18s var(--ease-out), visibility .18s; }
}
/* 14/10 (L2-T6) : base.css, régénérée par purge.mjs, reprend la courbe de styles.css, à rebond (cubic-bezier(.68, -.55, .265, 1.55)),
pour le panneau du menu du téléphone ; l'ancienne base.css avait la courbe douce : elle est fixée ici. Le sous-menu n'en a pas
besoin : au téléphone, « .nav-item-with-dropdown .dropdown-menu » de base.css anime déjà max-height, padding et margin-top sans
rebond (14/10, relecture : la règle « body.v3 .dropdown-menu { transition: all .3s } » posée ici est retirée). */
@media (max-width: 768px) {
body.v3 .nav-links { transition: right .4s var(--ease-out); }
}
body.v3 header { transition: box-shadow .25s var(--ease-out); }
/* 14/10 : plus d'ombre sous l'en-tête au défilement (aucune ombre portée hors du menu déroulant) : le filet du bas suffit */
/* ---------- Accroche plein écran + poisson ---------- */
body.v3 .df-hero--fish {
min-height: 100vh;
min-height: 100svh;
display: flex;
align-items: center;
overflow: hidden;
padding-bottom: clamp(4.5rem, 9vw, 6.5rem);
}
body.v3 .df-hero--fish > .container { position: relative; z-index: 1; width: 100%; }
.mq-tank { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.df-scrollcue {
position: absolute; left: 50%; bottom: 1.6rem; z-index: 1; transform: translateX(-50%);
display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
color: var(--muted); text-decoration: none;
transition: color .2s, background-color .2s;
}
.df-scrollcue:hover { color: var(--ink); background: rgba(255, 255, 255, .7); }
.df-scrollcue svg { width: 18px; height: 18px; }
/* ---------- Confiance : logos en cases teintées ---------- */
.df-trust { padding: clamp(2.75rem, 5vw, 3.75rem) 0 0; }
.df-trust h2 { font: 600 16px/1.3 var(--f-body); color: var(--muted); margin: 0 0 1.25rem; letter-spacing: 0; }
.df-logogrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.df-logogrid a { display: grid; place-items: center; height: 104px; padding: 1rem 1.3rem; border-radius: var(--radius); background: var(--sea); transition: background-color .2s var(--ease-out); }
.df-logogrid a:hover { background: var(--tide-soft); }
.df-logogrid img { max-width: 100%; max-height: 52px; object-fit: contain; mix-blend-mode: multiply; }
/* ---------- Mini-scénarios (déclencheur → DataFish → résultat) ---------- */
.df-flows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.df-flows--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.df-flow {
display: flex; flex-direction: column; height: 100%;
padding: 1.5rem 1.5rem 1.6rem; border-radius: var(--radius); background: var(--sea);
color: var(--ink); text-decoration: none;
transition: background-color .25s var(--ease-out), box-shadow .25s var(--ease-out), transform .25s var(--ease-out);
}
.df-sea .df-flow { background: #fff; }
a.df-flow:hover, .df-flow.is-playing { box-shadow: none; transform: none; } /* 14/10 : sans ombre */
.df-sea a.df-flow:hover { background: #fff; }
.df-chain { position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; }
.df-chain::before {
content: ""; position: absolute; left: 28px; right: 28px; top: 50%; height: 2px; margin-top: -1px;
background-image: linear-gradient(90deg, #A9BDCE 50%, transparent 0); background-size: 9px 2px;
}
.df-flow.is-playing .df-chain::before, a.df-flow:hover .df-chain::before {
background-image: linear-gradient(90deg, var(--tide) 50%, transparent 0);
animation: df-dash 0.6s linear infinite;
}
@keyframes df-dash { to { background-position: 9px 0; } }
.df-knot {
position: relative; z-index: 1; display: grid; place-items: center;
width: 56px; height: 56px; border-radius: 50%;
background: #fff; color: var(--tide);
box-shadow: none;
transition: transform .35s var(--ease-out), background-color .35s var(--ease-out), color .35s var(--ease-out);
}
.df-sea .df-knot { background: var(--sea); box-shadow: none; }
.df-knot svg { width: 26px; height: 26px; }
.df-knot--df { width: 64px; height: 64px; background: var(--ink); color: #fff; }
.df-sea .df-knot--df { background: var(--ink); }
.df-knot--df svg { width: 38px; height: 19px; }
.df-flow.is-playing .df-knot--df, a.df-flow:hover .df-knot--df { transform: scale(1.06); }
.df-flow.is-playing .df-knot.is-lit { background: var(--tide); color: #fff; }
.df-chain-tags { display: flex; justify-content: space-between; gap: .5rem; margin: -.35rem 0 1rem; font-size: 13.5px; color: var(--muted); }
.df-chain-tags span { flex: 1; }
.df-chain-tags span:nth-child(2) { text-align: center; }
.df-chain-tags span:last-child { text-align: right; }
body.v3 .df-flow h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.25; margin: 0 0 .45rem; }
.df-flow p { margin: 0; color: var(--muted); font-size: 16.5px; line-height: 1.5; }
.df-flow .df-go { margin-top: auto; padding-top: 1rem; font-size: 15.5px; font-weight: 600; color: var(--tide); }
/* ---------- Scénario interactif de la démarche ---------- */
.sc { --node: 84px; --wire: #A9BDCE; }
.sc-board { position: relative; background: var(--sea); border-radius: var(--radius); }
.sc-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: 1rem 1.4rem; font-size: 16px; font-weight: 600; color: var(--ink); background: rgba(255, 255, 255, .55); border-radius: var(--radius) var(--radius) 0 0; }
.sc-bar p { margin: 0; display: flex; align-items: center; gap: .6rem; }
.sc-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--tide); }
.sc-board[data-state="running"] .sc-dot { animation: sc-blink 1.2s ease-in-out infinite; }
@keyframes sc-blink { 50% { opacity: .25; } }
.sc-bar small { font-size: 14px; font-weight: 500; color: var(--muted); }
.sc-canvas {
position: relative;
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
grid-template-rows: auto auto;
row-gap: 3.25rem;
padding: 4.5rem 1.5rem 3.25rem;
background-image: radial-gradient(circle, #C4D3DF 1.2px, transparent 1.3px);
background-size: 22px 22px;
background-position: 11px 11px;
}
.sc-wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.sc-wire { fill: none; stroke: var(--wire); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; }
.sc-wire.is-done { stroke: var(--tide); }
.sc-wire.is-live { stroke: var(--tide); animation: sc-flow .8s linear infinite; }
@keyframes sc-flow { to { stroke-dashoffset: -18; } }
/* performance (V4.2) : boucles en pause hors de l'écran (classe is-away posée par js/v3.js) */
.sc-board.is-away .sc-dot, .sc-board.is-away .sc-wire { animation-play-state: paused; }
.sc-wire-label { font: 600 12.5px var(--f-body); fill: var(--muted); }
.sc-node { position: relative; z-index: 1; justify-self: center; align-self: start; display: grid; justify-items: center; gap: .15rem; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--ink); text-align: center; }
.sc-disc {
position: relative; display: grid; place-items: center;
width: var(--node); height: var(--node); border-radius: 50%;
background: #fff; color: var(--tide);
box-shadow: none;
transition: background-color .35s var(--ease-out), color .35s var(--ease-out), transform .45s var(--ease-out), box-shadow .35s var(--ease-out);
margin-bottom: .55rem;
}
.sc-disc > svg { width: 44px; height: 44px; }
.sc-name { font: 600 18px/1.2 var(--f-display); letter-spacing: -0.01em; }
.sc-when { font-size: 14px; color: var(--muted); }
.sc-node:hover .sc-disc { transform: none; box-shadow: none; }
.sc-node:focus-visible { outline: none; }
.sc-node:focus-visible .sc-disc { outline: 2px solid var(--tide); outline-offset: 4px; }
.sc-node.is-active .sc-disc { background: var(--ink); color: #fff; transform: scale(1.08); }
.sc-check { position: absolute; top: -2px; right: -2px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--tide); color: #fff; outline: 3px solid var(--sea); transform: scale(0); transition: transform .4s var(--ease-out); }
.sc-check svg { width: 14px; height: 14px; }
.sc-node.is-done .sc-check { transform: scale(1); }
.sc-node.is-off { opacity: .45; }
.sc-gate { position: relative; z-index: 1; justify-self: center; display: grid; justify-items: center; gap: .15rem; text-align: center; }
.sc-diamond { width: 58px; height: 58px; margin: 13px 0 .9rem; transform: rotate(45deg); border-radius: var(--radius); background: #fff; box-shadow: none; display: grid; place-items: center; transition: background-color .35s var(--ease-out); }
.sc-diamond span { transform: rotate(-45deg); font: 600 15px var(--f-display); color: var(--tide); }
.sc-gate.is-active .sc-diamond { background: var(--ink); }
.sc-gate.is-active .sc-diamond span { color: #fff; }
.sc-gate .sc-name { font-size: 16px; }
.sc-choice { display: flex; flex-direction: column; gap: .45rem; margin-top: .75rem; opacity: 0; visibility: hidden; transform: translateY(6px); pointer-events: none; transition: opacity .35s var(--ease-out), transform .35s var(--ease-out), visibility 0s .35s; }
.sc-gate.is-asking .sc-choice { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
.sc-choice button { min-height: 40px; padding: .45rem 1rem; line-height: 1.2; border: 0; border-radius: var(--b-r-tag); font: 600 15px var(--f-body); cursor: pointer; transition: background-color .15s; }
.sc-go { background: var(--ink); color: #fff; }
.sc-go:hover { background: var(--tide); }
.sc-stop { background: #fff; color: var(--ink); }
.sc-stop:hover { background: var(--tide-soft); }
.sc-n-besoin { grid-column: 1; grid-row: 1; }
.sc-n-audit { grid-column: 2; grid-row: 1; }
.sc-n-proto { grid-column: 3; grid-row: 1; }
.sc-gate { grid-column: 4; grid-row: 1; }
.sc-n-projet { grid-column: 5; grid-row: 1; }
.sc-n-duree { grid-column: 6; grid-row: 1; }
.sc-n-stop { grid-column: 4 / span 2; grid-row: 2; }
.sc-n-stop .sc-disc { --node: 64px; }
.sc-n-stop .sc-disc > svg { width: 32px; height: 32px; }
.sc-n-stop .sc-name { font-size: 16px; }
.sc-fish { position: absolute; left: 0; top: 0; z-index: 2; width: 56px; height: 28px; margin: -14px 0 0 -28px; pointer-events: none; opacity: 0; transition: opacity .3s; }
.sc-fish.is-on { opacity: 1; }
.sc-fish svg { width: 100%; height: 100%; display: block; transition: transform .25s; }
.sc-fish.is-left svg { transform: scaleX(-1); }
.sc-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; padding: 1.1rem 1.4rem 1.3rem; background: rgba(255, 255, 255, .55); border-radius: 0 0 var(--radius) var(--radius); }
.sc-run { display: inline-flex; align-items: center; gap: .6rem; min-height: 48px; padding: 0 1.3rem; border: 0; border-radius: 6px; background: var(--ink); color: #fff; font: 600 16px var(--f-body); cursor: pointer; transition: background-color .15s; }
.sc-run:hover { background: var(--tide); }
.sc-run:disabled { background: #5C7186; cursor: default; }
.sc-run svg { width: 14px; height: 14px; }
.sc-toast { display: flex; align-items: center; gap: .9rem; min-height: 64px; padding: .75rem 1.1rem .75rem .85rem; background: #fff; border-radius: var(--radius); box-shadow: none; opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); max-width: 560px; }
.sc-toast.is-on { opacity: 1; transform: none; }
.sc-toast i { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--tide-soft); color: var(--tide); }
.sc-toast i svg { width: 18px; height: 18px; }
.sc-toast strong { display: block; font-size: 16px; }
.sc-toast span { display: block; font-size: 14.5px; color: var(--muted); }
.sc-detail { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.5rem 4rem; margin-top: 2.5rem; align-items: start; }
.sc-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.sc-steps button { width: 100%; display: flex; align-items: baseline; gap: .8rem; padding: .7rem .9rem; border: 0; border-radius: 8px; background: transparent; font: 500 17px var(--f-body); color: var(--muted); text-align: left; cursor: pointer; transition: background-color .15s, color .15s; }
.sc-steps button b { font: 600 17px var(--f-display); color: var(--ink); min-width: 7.5rem; }
.sc-steps button:hover, .sc-steps button[aria-current="true"] { background: var(--sea); color: var(--ink); }
.sc-panel + .sc-panel { margin-top: 2rem; }
.js .sc-panel:not(.is-shown) { display: none; }
.js .sc-panel + .sc-panel { margin-top: 0; }
.sc-panel { animation: sc-in .45s var(--ease-out); }
@keyframes sc-in { from { opacity: 0; transform: translateY(6px); } }
body.v3 .sc-panel h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 600; margin: 0 0 .4rem; }
.sc-panel strong { display: block; font-size: 19px; font-weight: 600; margin-bottom: .9rem; }
.sc-after { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; align-items: center; }
/* ---------- Réalisations : avant, aujourd'hui, repères ---------- */
.df-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.df-case { background: #fff; border-radius: var(--radius); padding: 1.75rem 1.8rem 1.6rem; display: flex; flex-direction: column; }
body.v3 .df-case h3 { font-size: 1.4rem; font-weight: 600; line-height: 1.2; margin: 0 0 1.1rem; }
.df-case dl { margin: 0 0 1.25rem; }
.df-case dt { font-size: 14px; font-weight: 600; color: var(--tide); margin-bottom: .15rem; }
.df-case dd { margin: 0 0 .85rem; font-size: 16.5px; line-height: 1.5; color: var(--ink); }
.df-marks { display: flex; flex-wrap: wrap; gap: .4rem; margin: auto 0 0; padding: 1rem 0 0; list-style: none; border-top: 1px solid var(--line); }
.df-marks li { padding: .35rem .7rem; border-radius: var(--b-r-tag); background: var(--sea); font-size: 14px; font-weight: 600; color: var(--ink); }
.df-case .df-link { margin-top: 1rem; align-self: flex-start; font-size: 16px; }
.df-case--product { background: var(--ink); color: #fff; }
body.v3 .df-case--product h3 { color: #fff; }
.df-case--product dt { color: var(--signal); }
.df-case--product dd { color: rgba(255, 255, 255, .86); }
.df-case--product .df-marks { border-top-color: rgba(255, 255, 255, .16); }
.df-case--product .df-marks li { background: rgba(255, 255, 255, .1); color: #fff; }
.df-case--product .df-link { color: var(--signal); }
.df-case--product .df-link:hover { color: #fff; }
/* ---------- Encart Diagnostic express ---------- */
.df-diag { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 2.5rem 4rem; align-items: center; }
body.v3 .df-diag h2 { font-size: clamp(2.1rem, 3.8vw, 3rem); font-weight: 500; margin: 0 0 1rem; }
.df-diag p { color: var(--muted); font-size: 19px; margin: 0 0 1.75rem; max-width: 48ch; }
.df-diag-shot { position: relative; border-radius: var(--radius); background: #fff; box-shadow: none; overflow: hidden; }
.df-diag-shot .dx-top { pointer-events: none; }
.df-diag-body { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 1.25rem; padding: 1.4rem; align-items: center; }
.df-diag-body svg { width: 100%; height: auto; }
.df-diag-bars { display: grid; gap: .7rem; }
.df-diag-bars div { display: grid; grid-template-columns: 5.5rem 1fr 2.4rem; gap: .6rem; align-items: center; font-size: 14px; }
.df-diag-bars b { font-weight: 600; }
.df-diag-bars i { height: 8px; border-radius: 4px; background: var(--sea); overflow: hidden; }
.df-diag-bars i::after { content: ""; display: block; height: 100%; width: var(--v); border-radius: 4px; background: var(--tide); }
.df-diag-bars span { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
/* ---------- Pages expertise : colonne fixe + contenu ---------- */
.df-body { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 0 clamp(2.5rem, 5vw, 5rem); max-width: 1200px; margin: 0 auto; padding: clamp(3rem, 6vw, 4.5rem) var(--gutter) 0; }
.df-aside { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; padding-bottom: 3rem; }
.df-aside-title { font: 600 1.3rem/1.2 var(--f-display); letter-spacing: -0.01em; color: var(--ink); margin: 0 0 .25rem; }
.df-aside-key { color: var(--tide); font-size: 16px; font-weight: 500; margin: 0 0 1.5rem; }
.df-toc { list-style: none; margin: 0 0 1.75rem; padding: 0; border-left: 2px solid var(--line); }
.df-toc a { display: block; padding: .42rem 0 .42rem 1rem; margin-left: -2px; border-left: 2px solid transparent; color: var(--muted); font-size: 15.5px; font-weight: 500; text-decoration: none; transition: color .15s, border-color .15s; }
.df-toc a:hover { color: var(--ink); }
.df-toc a.is-current { color: var(--ink); font-weight: 600; border-left-color: var(--tide); }
.df-aside .cta-button { width: 100%; }
.df-aside .df-note { display: block; margin-top: .75rem; font-size: 14.5px; }
.df-flowcol > .df-section { padding: 0 0 clamp(3.25rem, 6vw, 4.5rem); background: none; }
.df-flowcol > .df-section > .container { max-width: none; padding: 0; }
.df-flowcol .df-head { grid-template-columns: 1fr; gap: .6rem; }
.df-flowcol .df-head p { padding-top: 0; }
.df-flowcol .df-split { grid-template-columns: 1fr; gap: 1rem; }
.df-flowcol .df-blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.df-flowcol .df-blocks > li { background: var(--sea); border-radius: var(--radius); padding: 1.4rem 1.5rem; }
.df-flowcol .df-blocks--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.df-flowcol .df-sea .df-blocks > li { background: var(--sea); }
.df-flowcol .df-work > li { background: var(--sea); }
.df-flowcol .df-flows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.df-flowcol .df-calc { background: var(--sea); }
.df-flowcol .df-product { grid-template-columns: 1fr; }
.df-flowcol + .df-faqwrap .df-section { padding-top: clamp(1rem, 3vw, 2rem); }
/* ---------- Expertise suivante ---------- */
.df-next-wrap { padding: 0 0 clamp(3.5rem, 7vw, 5rem); }
.df-next { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 2rem; align-items: center; padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.5rem, 4vw, 3rem); border-radius: var(--radius); background: var(--sea); color: var(--ink); text-decoration: none; transition: background-color .25s var(--ease-out); }
.df-next small { display: block; font-size: 15px; font-weight: 600; color: var(--tide); margin-bottom: .35rem; }
.df-next strong { display: block; font: 600 clamp(1.8rem, 3.5vw, 2.8rem)/1.05 var(--f-display); letter-spacing: -0.025em; transition: color .2s; }
.df-next em { display: block; font-style: normal; color: var(--muted); font-size: 18px; margin-top: .45rem; }
.df-next .df-arrow { width: 64px; height: 64px; font-size: 26px; background: #fff; }
.df-next:hover { background: var(--tide-soft); }
.df-next:hover .df-arrow { background: var(--ink); color: #fff; }
/* ---------- Outils ---------- */
.df-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 4rem; }
.df-tools h3 { font: 600 16px/1.3 var(--f-body); color: var(--muted); margin: 0 0 .75rem; letter-spacing: 0; }
.df-tools ul { list-style: none; margin: 0; padding: 0; }
.df-tools li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 1rem; align-items: center; padding: .7rem 0; border-top: 1px solid var(--line); }
.df-tools li:last-child { border-bottom: 1px solid var(--line); }
.df-tool-logo { width: 96px; height: 60px; border-radius: var(--radius); background: #fff; display: grid; place-items: center; padding: 4px 8px; }
.df-tool-logo img { width: 100%; height: 100%; max-height: 52px; object-fit: contain; mix-blend-mode: multiply; }
.df-tools strong { font-size: 17px; }
.df-tools p { margin: 0; font-size: 15.5px; color: var(--muted); line-height: 1.45; }
.df-origin { display: inline-block; margin-left: .4rem; padding: .1rem .45rem; border-radius: 4px; background: var(--tide-soft); color: var(--tide); font-size: 12.5px; font-weight: 600; vertical-align: 2px; }
/* ---------- Glossaire ---------- */
.df-letters { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 1.1rem; padding: 0; list-style: none; }
.df-letters a, .df-letters span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 6px; font-weight: 600; font-size: 15px; text-decoration: none; }
.df-letters a { background: var(--sea); color: var(--ink); transition: background-color .15s, color .15s; }
.df-letters a:hover { background: var(--ink); color: #fff; }
.df-letters span { color: #C9D3DD; } /* 14/10 (relecture du lot 2) : lettre sans terme, gris de la palette (celui des points de la carte) ; avant, #9FB0BF */
.df-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2.25rem; }
.df-chips button { min-height: 40px; padding: 0 1rem; border: 0; border-radius: var(--b-r-tag); background: var(--sea); color: var(--ink); font: 600 15px var(--f-body); cursor: pointer; transition: background-color .15s, color .15s; }
.df-chips button:hover { background: var(--tide-soft); }
.df-chips button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.df-gloss-letter { font: 600 2.1rem/1 var(--f-display); color: var(--tide); margin: 2.25rem 0 .9rem; }
.df-gloss-letter:first-of-type { margin-top: 0; }
.df-terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.df-terms li { background: var(--sea); border-radius: var(--radius); padding: 1.4rem 1.5rem; scroll-margin-top: calc(var(--header-h) + 20px); }
.df-terms li[hidden] { display: none; }
body.v3 .df-terms h3 { font-size: 1.3rem; margin: 0 0 .5rem; }
.df-terms p { margin: 0 0 .9rem; color: var(--ink); font-size: 16.5px; line-height: 1.55; }
.df-term-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; font-size: 14.5px; }
.df-term-foot span { color: var(--muted); }
.df-term-foot a { font-weight: 600; color: var(--tide); }
.df-terms li:target { background: var(--tide-soft); }
/* ---------- Diagnostic express (MaturIA) ---------- */
.dx { border-radius: var(--radius); background: #fff; box-shadow: none; overflow: hidden; }
.dx-top { display: flex; align-items: center; gap: .9rem; padding: .85rem 1.2rem; background: var(--ink); color: #fff; }
/* 14/10 (relecture du lot 2) : plus de trois points de fenêtre ; aucune page ne rend plus .dx-dots. Avant : .dx-dots { display: flex;
gap: 6px; } et .dx-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .22); } */
.dx-brand { font: 600 16px var(--f-display); letter-spacing: -0.01em; }
.dx-brand span { font-family: var(--f-body); font-weight: 500; color: rgba(255, 255, 255, .6); margin-left: .5rem; font-size: 14px; }
.dx-top .dx-ext { margin-left: auto; color: var(--signal); font-size: 14px; font-weight: 600; text-decoration: none; }
.dx-top .dx-ext:hover { color: #fff; }
.dx-note { margin: 0; padding: .65rem 1.2rem; background: var(--tide-soft); color: var(--ink); font-size: 14.5px; }
.dx-note strong { font-weight: 600; }
.dx-shell { display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: 560px; }
.dx-side { background: var(--sea); padding: 1.4rem 1rem; display: flex; flex-direction: column; gap: .3rem; }
.dx-tab { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .7rem .8rem; border: 0; border-radius: 8px; background: none; color: var(--muted); font: 600 15.5px var(--f-body); text-align: left; cursor: pointer; transition: background-color .15s, color .15s; }
.dx-tab b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--ink); font-size: 13px; flex: none; transition: background-color .2s, color .2s; }
.dx-tab[aria-current="true"] { background: #fff; color: var(--ink); }
.dx-tab[aria-current="true"] b { background: var(--ink); color: #fff; }
.dx-tab.is-done b { background: var(--tide); color: #fff; }
.dx-tab:disabled { cursor: not-allowed; opacity: .55; }
.dx-side-foot { margin-top: auto; padding: 1rem .8rem 0; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.dx-side-soon { margin-top: 1.25rem; padding: .9rem .8rem 0; border-top: 1px solid var(--line); display: grid; gap: .35rem; font-size: 14px; color: #8497A9; }
.dx-side-soon span::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #B7C8D6; margin-right: .55rem; vertical-align: 2px; }
.dx-main { padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.25rem, 3.4vw, 2.6rem) 1.8rem; min-width: 0; }
.dx-screen[hidden] { display: none; }
.dx-screen { animation: sc-in .45s var(--ease-out); }
.dx-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1.25rem; }
body.v3 .dx-head h3 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin: 0; }
.dx-head span { color: var(--muted); font-size: 15px; font-variant-numeric: tabular-nums; }
.dx-progress { height: 6px; border-radius: 3px; background: var(--sea); overflow: hidden; margin-bottom: 1.75rem; }
.dx-progress i { display: block; height: 100%; width: 100%; background: var(--tide); border-radius: 3px; transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out); }
.dx-axis { display: none; }
.dx-axis.is-on { display: block; animation: sc-in .4s var(--ease-out); }
.dx-axis h4 { font: 600 1.2rem/1.2 var(--f-display); color: var(--ink); margin: 0 0 .25rem; }
.dx-axis > p { color: var(--muted); margin: 0 0 1.25rem; font-size: 16px; }
.dx-q { padding: 1rem 0; border-top: 1px solid var(--line); }
.dx-q:last-child { border-bottom: 1px solid var(--line); }
.dx-q legend { float: left; width: 100%; padding: 0; margin: 0 0 .7rem; font-size: 17px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.dx-q fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.dx-opts { clear: both; display: flex; flex-wrap: wrap; gap: .45rem; }
.dx-opts label { position: relative; }
.dx-opts input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.dx-opts span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 1rem; border-radius: var(--b-r-tag); background: var(--sea); color: var(--ink); font-size: 15.5px; font-weight: 500; transition: background-color .15s, color .15s; }
.dx-opts input:hover + span { background: var(--tide-soft); }
.dx-opts input:checked + span { background: var(--ink); color: #fff; }
.dx-opts input:focus-visible + span { outline: 2px solid var(--tide); outline-offset: 2px; }
.dx-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-top: 1.5rem; }
.dx-btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 46px; padding: 0 1.2rem; border: 0; border-radius: 6px; background: var(--ink); color: #fff; font: 600 16px var(--f-body); cursor: pointer; text-decoration: none; transition: background-color .15s; }
.dx-btn:hover { background: var(--tide); color: #fff; }
.dx-btn:disabled { background: #9FB0BF; cursor: not-allowed; }
.dx-btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.dx-btn--ghost:hover { background: var(--sea); color: var(--ink); }
.dx-hint { font-size: 14.5px; color: var(--muted); }
.dx-results { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 1.5rem 2.5rem; align-items: center; }
.dx-radar svg { width: 100%; height: auto; display: block; overflow: visible; }
.dx-radar .dx-ring { fill: none; stroke: var(--line); stroke-width: 1; }
.dx-radar .dx-spoke { stroke: var(--line); stroke-width: 1; }
.dx-radar .dx-area { fill: rgba(31, 111, 168, .16); stroke: var(--tide); stroke-width: 2; stroke-linejoin: round; transition: d .8s var(--ease-out); } /* 14/10 (relecture du lot 2) : #1F5F99 et #3A8CC8 au bleu d'accent */
.dx-radar .dx-vertex { fill: var(--tide); }
.dx-radar text { font: 600 13px var(--f-body); fill: var(--ink); }
.dx-radar .dx-val { font: 700 13px var(--f-body); fill: var(--tide); }
.dx-score { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .2rem; }
.dx-score strong { font: 600 clamp(2.6rem, 5vw, 3.4rem)/1 var(--f-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.dx-score span { font-size: 18px; color: var(--muted); }
.dx-level { display: inline-block; margin: .35rem 0 1rem; padding: .35rem .75rem; border-radius: var(--b-r-tag); background: var(--tide-soft); color: var(--tide); font-weight: 700; font-size: 15px; }
.dx-read { margin: 0 0 1.25rem; font-size: 17px; line-height: 1.55; }
.dx-bars { display: grid; gap: .85rem; }
.dx-bar { display: grid; grid-template-columns: 6.5rem 1fr 2.8rem; gap: .75rem; align-items: center; font-size: 15px; }
.dx-bar b { font-weight: 600; }
.dx-bar i { height: 10px; border-radius: 5px; background: var(--sea); overflow: hidden; }
.dx-bar i u { display: block; height: 100%; width: 100%; border-radius: 5px; background: var(--tide); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease-out); text-decoration: none; }
.dx-bar span { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.dx-bar small { grid-column: 1 / -1; color: var(--muted); font-size: 14.5px; margin-top: -.35rem; }
.dx-recos { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: .75rem; counter-reset: reco; }
.dx-recos li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: .25rem 1rem; padding: 1.1rem 1.2rem; border-radius: var(--radius); background: var(--sea); counter-increment: reco; }
.dx-recos li::before { content: counter(reco); display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--ink); color: #fff; font: 600 15px var(--f-display); grid-row: span 2; }
.dx-recos strong { font-size: 17px; }
.dx-recos p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.5; }
.dx-tag { display: inline-block; margin-left: .5rem; padding: .1rem .5rem; border-radius: 4px; background: #fff; color: var(--tide); font-size: 12.5px; font-weight: 700; vertical-align: 2px; }
.dx-actions { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; }
.dx-pdf-note { margin: .9rem 0 0; font-size: 14px; color: var(--muted); }
/* Synthèse d'une page (visible à l'écran en aperçu, imprimée seule) */
.dx-sheet { margin: 0 0 1.5rem; padding: 1.6rem 1.7rem; border-radius: var(--radius); background: #fff; box-shadow: 0 0 0 1px var(--line) inset; }
.dx-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.dx-sheet-head img { height: 24px; width: auto; }
.dx-sheet-head span { font-size: 13.5px; color: var(--muted); }
.dx-sheet h4 { font: 600 1.25rem/1.2 var(--f-display); margin: 0 0 .2rem; color: var(--ink); }
.dx-sheet-grid { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 1.25rem; align-items: center; margin: 1rem 0; }
.dx-sheet-grid svg { width: 100%; height: auto; overflow: visible; }
.dx-sheet ol { margin: .4rem 0 0; padding-left: 1.2rem; font-size: 15px; }
.dx-sheet ol li { margin-bottom: .35rem; }
.dx-sheet-foot { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
@media print {
body.dx-printing > *:not(main) { display: none !important; }
body.dx-printing main > *:not(#diagnostic) { display: none !important; }
body.dx-printing #diagnostic { padding: 0 !important; }
body.dx-printing #diagnostic > .container > *:not(.dx) { display: none !important; }
body.dx-printing .dx { box-shadow: none; }
body.dx-printing .dx-top, body.dx-printing .dx-note, body.dx-printing .dx-side, body.dx-printing .dx-screen:not([data-screen="recos"]) { display: none !important; }
body.dx-printing .dx-screen[data-screen="recos"] > *:not(.dx-sheet) { display: none !important; }
body.dx-printing .dx-shell { display: block; min-height: 0; }
body.dx-printing .dx-main { padding: 0; }
body.dx-printing .dx-sheet { box-shadow: none; padding: 0; }
@page { margin: 16mm; }
}
/* ---------- Page 404 ---------- */
.df-lost { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; background: var(--sea); overflow: hidden; padding: calc(var(--header-h) + 3rem) 0 4rem; }
.df-lost > .container { position: relative; z-index: 1; }
body.v3 .df-lost h1 { font-size: clamp(2.3rem, 4.3vw, 3.5rem); /* 07/10 au soir : taille des hauts de page (64 px avant) */ letter-spacing: -0.035em; margin: 0 0 1rem; max-width: 18ch; }
.df-lost p { color: var(--muted); font-size: clamp(1.15rem, 1.7vw, 1.35rem); max-width: 50ch; margin: 0 0 2rem; }
.df-lost p[lang="en"] { font-size: 17px; margin-top: -1rem; }
/* ---------- Bandeau final : le poisson de passage ---------- */
body.v3 .cta-banner { position: relative; overflow: hidden; }
body.v3 .cta-banner > .container { position: relative; z-index: 1; }
/* 14/10 (relecture du lot 2) : quand la page finit par le bandeau final (Notre approche, blog, glossaire : pas de questions après),
deux marines se suivent ; un filet fin sur marine sépare le bandeau du pied de page (organisation des pages inchangée) */
body.v3 .df-main:has(> .cta-banner:last-child) + footer { border-top: 1px solid var(--b-rule-dark); }
/* ---------- Réglages divers ---------- */
body.v3 .df-exp a { transition: background-color .2s var(--ease-out); }
body.v3 .df-exp a:hover { background: linear-gradient(90deg, transparent, var(--sea) 20%, var(--sea) 80%, transparent); }
/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
.df-flows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.df-cases { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1024px) {
.df-body { grid-template-columns: 1fr; }
.df-aside { position: static; padding-bottom: 2rem; }
.df-toc, .df-aside-title, .df-aside-key { display: none; }
.df-aside .cta-button { width: auto; }
.df-logogrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
.df-diag, .dx-results, .df-tools { grid-template-columns: 1fr; }
.sc { --node: 68px; }
.sc-disc > svg { width: 34px; height: 34px; }
.sc-canvas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; row-gap: 2.6rem; padding: 2.5rem 1rem 2.5rem; }
.sc-n-besoin, .sc-n-audit, .sc-n-proto, .sc-gate, .sc-n-projet, .sc-n-duree { grid-column: 1; grid-row: auto; }
.sc-n-besoin { grid-row: 1; } .sc-n-audit { grid-row: 2; } .sc-n-proto { grid-row: 3; } .sc-gate { grid-row: 4; } .sc-n-projet { grid-row: 5; } .sc-n-duree { grid-row: 6; }
.sc-n-stop { grid-column: 2; grid-row: 5; }
.sc-choice { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.sc-detail { grid-template-columns: 1fr; }
.dx-shell { grid-template-columns: 1fr; }
.dx-side { flex-direction: row; flex-wrap: wrap; padding: .75rem; }
.dx-tab { width: auto; }
.dx-side-foot, .dx-side-soon { display: none; }
}
@media (max-width: 700px) {
.df-flows, .df-flows--2, .df-flowcol .df-flows, .df-cases, .df-terms, .df-flowcol .df-blocks, .df-flowcol .df-blocks--4 { grid-template-columns: 1fr; }
.df-logogrid { grid-template-columns: 1fr 1fr; }
.df-logogrid a { height: 88px; }
.df-next .df-arrow { width: 48px; height: 48px; }
.df-diag-body { grid-template-columns: 1fr; }
.df-diag-body svg { max-width: 200px; margin: 0 auto; }
.dx-sheet-grid { grid-template-columns: 1fr; }
.dx-sheet-grid svg { max-width: 180px; }
.dx-tab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.df-scrollcue { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.df-flow.is-playing .df-chain::before, a.df-flow:hover .df-chain::before, .sc-wire.is-live, .sc-board[data-state="running"] .sc-dot { animation: none; }
.sc-disc, .sc-check, .sc-toast, .sc-choice, .df-knot, .df-flow, .dx-bar i u, .dx-progress i { transition-duration: .01s; }
.sc-panel, .dx-screen, .dx-axis.is-on { animation: none; }
}
/* ---------- Compléments ---------- */
/* Encart Diagnostic express : section sombre, l'aperçu de l'appli en lumière */
body.v3 .df-diag-sec { background: var(--ink); color: #fff; } /* 14/10 : sans lignes de niveau */
body.v3 .df-diag-sec h2 { color: #fff; }
.df-diag-sec .df-diag p { color: rgba(255, 255, 255, .8); }
body.v3 .df-diag-sec .cta-button { background: #fff; color: var(--ink); }
body.v3 .df-diag-sec .cta-button:hover { background: var(--tide-soft); color: var(--ink); }
body.v3 .df-diag-sec .df-link { color: var(--signal); }
body.v3 .df-diag-sec .df-link:hover { color: #fff; }
.df-diag-shot figcaption { padding: 0 1.4rem 1.2rem; font-size: 13.5px; color: var(--muted); }
.df-diag-shot .dx-radar svg { width: 100%; height: auto; }
/* Diagnostic : nom de l'entreprise, lien à copier */
.dx-company { display: grid; gap: .4rem; margin: 0 0 1.25rem; max-width: 420px; font-size: 15px; font-weight: 600; color: var(--ink); }
.dx-company input { min-height: 44px; border: 0; border-radius: 6px; background: var(--sea); padding: 0 .9rem; font: 500 16px var(--f-body); color: var(--ink); }
.dx-company input:focus { outline: 2px solid var(--tide); outline-offset: 1px; }
.dx-copy { border: 0; background: none; padding: 0; font: 600 14px var(--f-body); color: var(--tide); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.dx-sheet-meta { margin: 0 0 .25rem; font-size: 15px; color: var(--muted); }
.dx-sheet-meta strong { color: var(--ink); }
.dx-sheet-axes { list-style: none; margin: .4rem 0 0; padding: 0; font-size: 15px; display: grid; gap: .25rem; }
.dx-sheet-next { margin: 1rem 0 0; font-size: 15px; }
/* Logos d'outils : case blanche sur fond clair, claire sur fond blanc */
.df-tool-logo { background: var(--sea); }
.df-sea .df-tool-logo { background: #fff; }
/* Menus déroulants : fond plein, sans flou décoratif */
body.v3 .dropdown-menu { -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff; }
/* Aperçu du diagnostic sur fond sombre : texte sombre dans la fenêtre blanche */
body.v3 .df-diag-shot { color: var(--ink); }
.df-diag-body { grid-template-columns: 220px minmax(0, 1fr); gap: 1.75rem; padding: 1.75rem 1.75rem 1.25rem; }
.df-diag-bars { gap: .9rem; }
.df-diag-bars div { grid-template-columns: 6rem 1fr 2.4rem; font-size: 15px; }
.df-diag-shot figcaption { padding: 0 1.75rem 1.4rem; }
/* Mini-scénarios dans la colonne des pages expertise : cartes teintées, nœuds blancs */
.df-flowcol .df-sea .df-flow { background: var(--sea); }
.df-flowcol .df-sea .df-knot:not(.df-knot--df) { background: #fff; box-shadow: none; }
.dx-score strong { font-variant-numeric: normal; }
/* Sur fond sombre : une ombre neutre, pas de halo coloré */
body.v3 .df-diag-sec .df-diag-shot { box-shadow: none; }
/* Pied de page : sous-titres de colonnes (niveau h3, même allure qu'avant) */
body.v3 footer h3.df-foot-h { color: rgba(255, 255, 255, 0.6); font-family: var(--f-body); font-size: 16px; font-weight: 600; letter-spacing: 0; text-transform: none; margin: 0 0 1rem; }
/* Menus déroulants : pas de contour, l'ombre suffit */
@media (min-width: 769px) { body.v3 .dropdown-menu { border: 0; } }
/* ---------- Accessibilité et icônes (relecture) ---------- */
.df-skip { position: fixed; left: 16px; top: -60px; z-index: 3000; padding: .7rem 1rem; border-radius: 6px; background: var(--ink); color: #fff; font-weight: 600; text-decoration: none; transition: top .2s var(--ease-out); }
.df-skip:focus { top: 12px; outline: 2px solid var(--signal); outline-offset: 2px; }
/* 13/10 (relecture) : au clavier, la règle commune de v2.css (body.v2 :focus-visible, contour marée) l'emportait sur la ligne du
dessus : contour à 2,6:1 sur l'accroche marine de l'accueil. Même contour clair, redit avec un sélecteur plus précis. */
body.v2 .df-skip:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
main[tabindex="-1"]:focus { outline: none; }
body.v3 i.ico { display: inline-flex; width: 1em; height: 1em; vertical-align: -0.14em; flex: none; }
body.v3 i.ico svg { width: 100%; height: 100%; }
body.v3 .dropdown-icon svg { stroke-width: 2.2; }
.dx-head h3:focus { outline: none; }
@media (min-width: 769px) {
body.v3 .nav-item-with-dropdown:focus-within .dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
}
/* Entre 961 et 1180 px : étapes du scénario plus compactes */
@media (min-width: 961px) and (max-width: 1180px) {
.sc { --node: 72px; }
.sc-disc > svg { width: 36px; height: 36px; }
.sc-canvas { padding-left: .5rem; padding-right: .5rem; }
.sc-name { font-size: 16px; }
.sc-choice button { font-size: 14px; padding: .4rem .75rem; }
}
/* ---------- En-tête entre tablette et petit écran d'ordinateur ---------- */
.cta-short { display: none; }
@media (min-width: 769px) and (max-width: 1180px) {
body.v3 nav.container .logo-img { width: 128px; height: auto; }
body.v3 .nav-links { gap: .9rem; }
body.v3 .nav-links > li > a { font-size: 15px; white-space: nowrap; }
body.v3 .nav-links .nav-cta a.cta-button { padding: 10px 14px; font-size: 15px; white-space: nowrap; }
}
@media (min-width: 769px) and (max-width: 900px) {
body.v3 .nav-links { gap: .7rem; }
body.v3 .cta-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.v3 .cta-short { display: inline; }
}
@media (min-width: 769px) and (max-width: 860px) {
body.v3 .nav-lang { display: none; }
body.v3 nav.container .logo-img { width: 118px; }
body.v3 .nav-links { gap: .65rem; }
}
/* Flèches en icônes au trait (remplacent les caractères → et ←) */
body.v3 .df-go i, body.v3 .df-crumb i, body.v3 .df-term-foot a i, body.v3 .dx-ext i { display: inline-grid; width: 1em; height: 1em; margin-left: .35em; vertical-align: -0.14em; flex: none; }
body.v3 .df-crumb i { width: 18px; height: 18px; margin: 0; transition: transform .25s var(--ease-out); }
body.v3 .df-crumb:hover i { transform: translateX(-3px); }
@media (prefers-reduced-motion: reduce) { body.v3 .df-crumb i { transition: none; } body.v3 .df-crumb:hover i { transform: none; } }
/* 14/10 soir (Louis : liens de retour un peu plus grands) : icône 18 px (trait fin de 1,4 px gardé, section 7 plus bas), écartée
du texte par le seul gap de 8 px (la marge doublait l'écart : environ 18 px visibles), glisse de 3 px vers la gauche au survol
(pas en mouvement réduit). Avant : body.v3 .df-crumb i { margin: 0 .4em 0 0; }, icône à 1em (14 px), pas de mouvement. */
body.v3 .df-go i svg, body.v3 .df-crumb i svg, body.v3 .df-term-foot a i svg, body.v3 .dx-ext i svg { width: 100%; height: 100%; }
body.v3 .df-arrow svg { width: 40%; height: 40%; }
/* coordonnées du bandeau : espacées, sans points séparateurs */
body.v3 .cta-banner-contact { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.75rem; }
/* ---------- Nouveau logo : poisson en pixels + « DataFish » (Data marine, Fish bleu) ---------- */
/* 14/10 : le logotype garde sa police et ses couleurs de charte (Schibsted Grotesk 700, poisson et « Fish » #3A8CC8 sur clair,
#5FB0E8 sur marine) ; les titres du site passent en Plus Jakarta Sans */
body.v3 .df-logo { display: inline-flex; align-items: center; gap: .42em; font: 700 27px/1 var(--b-f-logo); letter-spacing: -.035em; color: var(--ink); text-decoration: none; white-space: nowrap; }
body.v3 .df-logo-fish { display: block; width: 1.62em; color: #3A8CC8; flex: none; }
body.v3 .df-logo-fish svg { display: block; width: 100%; height: auto; }
body.v3 .df-logo-word b { font-weight: 700; color: #3A8CC8; }
body.v3 .df-logo:hover .df-logo-fish { animation: df-logo-swim .9s var(--ease-out); }
@keyframes df-logo-swim { 40% { transform: translateX(3px); } }
body.v3 .df-logo--dark { font-size: 30px; color: #fff; margin-bottom: 1rem; }
body.v3 .df-logo--dark .df-logo-fish, body.v3 .df-logo--dark b { color: #5FB0E8; } /* 14/10 : #74C3EE avant, même bleu que l'en-tête sur marine */
@media (min-width: 769px) and (max-width: 1180px) { body.v3 nav.container .df-logo { font-size: 23px; } }
@media (max-width: 768px) { body.v3 nav.container .df-logo { font-size: 23px; } }
@media (prefers-reduced-motion: reduce) { body.v3 .df-logo:hover .df-logo-fish { animation: none; } }
/* ---------- Menus déroulants : rien ne bouge au survol (plus de décalage du texte), pas de retour à la ligne ---------- */
body.v3 .dropdown-menu { min-width: 350px; }
body.v3 .dropdown-menu a, body.v3 .dropdown-menu a:hover { padding-left: 1.2rem; padding-right: 1.2rem; }
body.v3 .dropdown-menu a span { white-space: nowrap; }
body.v3 .dropdown-menu a:hover i, body.v3 .dropdown-menu a i { transform: none; }
@media (max-width: 768px) { body.v3 .dropdown-menu { min-width: 0; } body.v3 .dropdown-menu a span { white-space: normal; } }
/* ---------- Page Contact ---------- */
.ct-head { margin: 0 0 var(--sec-head); } /* 07/10 au soir : même écart titre-contenu partout */
body.v2 .ct-head h2 { margin: 0; font-size: clamp(1.9rem, 3vw, 2.5rem); } /* 07/10 : même taille que les autres titres de section */
.ct-head p { margin: .6rem 0 0; max-width: 58ch; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.55; color: var(--muted); } /* 07/10 au soir : taille des sous-titres de section (.hm-sub) ; avant 1.1rem */
.ct-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.ct-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ct-card { display: flex; flex-direction: column; gap: .5rem; padding: 24px 24px 22px; border-radius: var(--radius); background: var(--sea); }
.df-sea .ct-card { background: #fff; }
.ct-card h3 { margin: .35rem 0 0; font: 600 1.15rem/1.25 var(--f-display); color: var(--ink); }
.ct-card p { margin: 0 0 .5rem; font-size: 15.5px; line-height: 1.55; color: var(--muted); }
.ct-card > .cta-button, .ct-card > .df-link { margin-top: auto; align-self: flex-start; }
.ct-card > .df-link { word-break: break-word; }
/* 14/10 (direction « premium sobre », section 7 : pictogrammes nus) : plus de carré blanc autour du pictogramme ni de la flèche.
Avant : .ct-ico 44 x 44 px, .ct-go 36 x 36 px, fond blanc (brume sur section brume), rayon var(--radius) ; .ct-go en marine. */
.ct-ico { display: grid; place-items: center start; width: 22px; height: 22px; background: none; color: var(--b-accent); }
.ct-ico svg { width: 22px; height: 22px; }
.ct-card--link { padding: 0; }
.ct-card--link a { position: relative; display: flex; flex-direction: column; gap: .5rem; height: 100%; padding: 24px 24px 22px; border-radius: var(--radius); color: inherit; text-decoration: none; transition: background-color .25s var(--ease-out); }
.ct-card--link a:hover { background: var(--tide-soft); }
.ct-go { position: absolute; top: 26px; right: 24px; display: grid; place-items: center; width: 18px; height: 18px; background: none; color: var(--b-accent); transition: transform .25s var(--ease-out); }
.ct-go svg { width: 18px; height: 18px; }
.ct-card--link a:is(:hover, :focus-visible) .ct-go { transform: translateX(3px); }
/* 14/10 : règle retirée (plus de fond derrière les pictogrammes) : .df-sea .ct-ico, .df-sea .ct-go { background: var(--sea); } */
.ct-cities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.ct-cities li { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center; padding: 26px 28px; border-radius: var(--radius); background: var(--sea); }
.df-sea .ct-cities li { background: #fff; }
/* LinkedIn, sous les bureaux (V4.2 : l'ancienne section « Comment nous joindre » est retirée) */
.ct-social { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; column-gap: 16px; row-gap: .35rem; margin: 16px 0 0; padding: 18px 28px; border-radius: var(--radius); background: var(--sea); font-size: 15.5px; line-height: 1.5; color: var(--muted); }
.ct-social .ct-ico { width: 58px; height: 44px; background: none; }
@media (max-width: 560px) { .ct-social { grid-template-columns: 58px minmax(0, 1fr); } .ct-social > a { grid-column: 2; justify-self: start; } }
.ct-social b { display: block; margin: 0 0 2px; font: 600 1.05rem/1.3 var(--f-display); color: var(--ink); } /* titre au-dessus du texte, comme les cartes des bureaux */
.df-sea .ct-social { background: #fff; }
/* 14/10 (section 9 : poisson des bureaux retiré) : le repère est le carré de 7 px de la preuve, à hauteur du nom de la ville.
Avant : .ct-pin { width: 58px; color: var(--fish); } et .ct-pin svg { display: block; width: 100%; height: auto; } (poisson). */
.ct-pin { grid-row: 1 / 4; align-self: start; display: block; width: 7px; height: 7px; margin-top: .65em; background: var(--b-accent); }
.ct-addr { margin-top: 8px; }
.ct-addr:empty { display: none; }
.ct-cities b { font: 600 1.5rem/1.2 var(--f-display); color: var(--ink); letter-spacing: -.02em; }
.ct-cities small { font-size: 15px; color: var(--muted); }
@media (max-width: 1000px) { .ct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ct-grid--3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .ct-grid, .ct-cities { grid-template-columns: minmax(0, 1fr); } }
/* En-tête V3.6 : une entrée de plus (Technologies) ; rien ne passe sur deux lignes */
@media (min-width: 769px) {
body.v3 .nav-links > li > a, body.v3 .nav-links .nav-cta a.cta-button { white-space: nowrap; }
}
@media (min-width: 769px) and (max-width: 1320px) {
body.v3 .nav-links { gap: .85rem; }
body.v3 .nav-links > li > a { font-size: 15px; }
body.v3 .nav-links .nav-cta a.cta-button { padding: 10px 14px; font-size: 15px; }
}
@media (min-width: 769px) and (max-width: 1060px) {
body.v3 .cta-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.v3 .cta-short { display: inline; }
}
/* V3.6 : les lignes de niveau reviennent derrière le poisson et l'algue de l'accueil ; le poisson nage en haut de toutes les pages */
body.v3 .df-hero--fish { background-position: right -260px center; background-size: min(980px, 115vw); }
body.v3 .df-page-hero { overflow: hidden; }
body.v3 .df-page-hero > .container { position: relative; z-index: 1; }
@media (min-width: 769px) and (max-width: 1520px) {
body.v3 .nav-links { gap: 1rem; }
body.v3 .nav-links > li > a { font-size: 15.5px; }
}
@media (min-width: 1521px) {
body.v3 .nav-links { gap: 1rem; }
body.v3 .nav-links > li > a { font-size: 15.5px; }
}
/* 07/10 : lien « English version » du pied de page, seulement là où le sélecteur FR / EN de l'en-tête est masqué */
body.v3 .df-foot-lang { display: none; }
@media (min-width: 769px) and (max-width: 980px) {
body.v3 .nav-links { gap: .6rem; }
body.v3 .nav-links > li > a { font-size: 14.5px; }
body.v3 .nav-lang { display: none; }
body.v3 .df-foot-lang { display: list-item; }
}
/* ================= Communs à toutes les pages (V4) : en-têtes de section, questions-réponses ================= */
.hm-head { margin: 0 0 var(--sec-head); } /* 07/10 au soir : même écart titre-contenu partout (--sec-head, fin de fichier) */
body.v2 .hm-h {
font-family: var(--f-display); font-weight: 500; /* 14/10 : Plus Jakarta Sans 500, interlettrage desserré (avant : 700, 1.08, -0.028em) */
font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1.1; letter-spacing: -0.022em; /* 07/10 : taille de l'accueil partout (40 px) */
margin: 0; text-wrap: balance;
}
.hm-sub { margin: .6rem 0 0; max-width: 58ch; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.55; color: var(--muted); text-wrap: pretty; }
body.v3 .hm-head[id], body.v3 .hm-head [id] { scroll-margin-top: calc(var(--header-h) + 20px); }
/* Questions fréquentes : la question à gauche, la réponse de DataFish à droite */
.hm-qa { background: #fff; }
.qa { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
/* 14/10 (direction « premium sobre ») : une liste à filets. La question choisie passe en 600, marquée d'un trait d'accent de 2 px
à gauche (indicateur d'état, pas un cadre) ; numéros en chiffres bleus, sans pavé. Réponse sur brume, rayon 6, sans avatar
(.qa-who n'est plus rendu par faqBlock) ; la question rappelée en gris, casse normale. Avant : pastilles à rayon 14, choisie en
marine pleine, numéros dans un carré écume, réponse à rayon 24, avatar poisson. */
.qa-list { display: grid; gap: 0; }
.qa-list button {
display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; padding: 13px 14px 13px 16px; border: 0; border-radius: 0;
background: none; box-shadow: inset 0 -1px 0 var(--b-rule); font: 500 16.5px/1.35 var(--f-body); color: var(--b-text); text-align: left; cursor: pointer; transition: color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.qa-list button:hover { background: none; color: var(--ink); }
.qa-list button[aria-selected="true"] { background: none; color: var(--ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--b-accent), inset 0 -1px 0 var(--b-rule); }
.qa-list button:focus-visible { outline: 2px solid var(--tide); outline-offset: 2px; }
.qa-n { display: block; width: auto; height: auto; border-radius: 0; background: none; font: 500 13px/1 var(--f-display); letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--b-accent); }
.qa-panels { position: sticky; top: calc(var(--header-h, 80px) + 24px); }
.qa-a { padding: clamp(24px, 2.4vw, 32px); border-radius: var(--radius); background: var(--sea); }
.qa-a + .qa-a { margin-top: 12px; }
.qa.is-ready .qa-a { display: none; margin: 0; }
.qa.is-ready .qa-a.is-on { display: block; animation: qa-in .45s var(--ease-out); }
@keyframes qa-in { from { opacity: 0; transform: translateY(8px); } }
.qa-who { display: none; } /* 14/10 : avatar poisson retiré (build.mjs ne le rend plus) ; règle de sûreté */
.qa-q { margin: 0 0 10px; font-size: 14px; font-weight: 500; color: var(--b-faint); }
.qa-txt { margin: 0 0 16px; font: 400 clamp(1.15rem, 1.7vw, 1.4rem)/1.5 var(--f-body); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .qa.is-ready .qa-a.is-on { animation: none; } }
@media (max-width: 860px) {
.qa { grid-template-columns: minmax(0, 1fr); gap: 16px; }
/* marge intérieure en haut et en bas (compensée) : le contour de focus n'est pas rogné par le défilement horizontal.
14/10 : puces horizontales sur brume, la choisie en marine */
.qa-list { display: flex; gap: 8px; margin: -14px -16px -10px; padding: 14px 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; }
.qa-list button { flex: none; width: 240px; grid-template-columns: 26px minmax(0, 1fr); padding: 12px; border-radius: var(--radius); background: var(--sea); box-shadow: none; font-size: 15px; scroll-snap-align: start; }
.qa-list button[aria-selected="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.qa-list button[aria-selected="true"] .qa-n { color: var(--b-accent-dark); }
.qa-panels { position: static; }
}
.df-faq-qa { background: #fff; }
.qa-ask { margin: 22px 0 0; font-size: 15px; }
/* Questions fréquentes sur fond brume (06/10, alternance des fonds : faqBlock de build.mjs avec sea, page Qui sommes-nous) :
panneau de réponse en blanc. Sur téléphone, puces blanches, la choisie reste marine. */
.df-faq-qa.df-sea { background: var(--sea); }
.df-sea .qa-list button:not([aria-selected="true"]):hover { background: none; }
.df-sea .qa-a { background: #fff; }
@media (max-width: 860px) {
.df-sea .qa-list button:not([aria-selected="true"]) { background: #fff; }
}
/* V4 : coordonnées du pied de page sans séparateur ; thèmes du glossaire en pastilles */
body.v2 .footer-bottom .df-coords { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
/* 14/10 (relecture du lot 2) : thèmes en texte gris nu, comme .xp-tags des expertises (direction, section 7 : termes techniques) ;
avant, étiquettes blanches : gap 5px, puis b { padding: 2px 10px; border-radius: var(--b-r-tag); background: #fff; font-weight: 600;
color: var(--muted); } */
.df-term-foot span { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; }
.df-term-foot span b { padding: 0; background: none; font: 500 12.5px/1.4 var(--f-body); letter-spacing: .01em; color: var(--b-faint); }
/* V4 : titres et accroches des pages intérieures sans mot isolé en fin de ligne */
body.v3 .df-page-hero h1 { text-wrap: balance; }
body.v3 .df-page-hero .df-lede { text-wrap: pretty; }
/* ================= Repère d'interaction (V5) : retiré le 14/10 (direction « premium sobre » : plus de gadgets) =================
Pastille en verre flouté avec main animée (.df-cue) et halo « ping » : v3-hint.mjs ne rend plus rien, build.mjs ne pose plus
data-ping. Les règles .df-cue* sont retirées (historique git) ; seule reste la classe .df-sr, partagée. */
/* consigne des simples boutons : lue par les lecteurs d'écran, jamais affichée. 09/10 (relecture) : .df-sr, la même règle pour tout
texte réservé aux lecteurs d'écran (au lieu d'une copie par page, comme l'ancienne .xn-sr de exp-data.css) */
.df-cue-sr, .df-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Tout ce qui se clique dans les zones interactives montre la main ; rien ne bouge au survol (fond ou couleur seulement) */
body.v3 :where(button, [role="tab"], [role="button"], [role="radio"], [role="checkbox"], summary, select, input[type="range"], input[type="checkbox"], input[type="radio"], label:has(> input[type="checkbox"], > input[type="radio"])):not(:disabled, [aria-disabled="true"]) { cursor: pointer; }
/* Focus clavier : celui de v2.css (trait marée de 2 px) partout ; sur fond sombre, le trait passe en clair */
body.v2 .df-zone--dark :focus-visible { outline-color: var(--b-accent-dark); }
/* « + » d'ouverture : dans le bouton (aria-expanded) ou le summary ; devient « − » une fois ouvert */
.df-plus { position: relative; display: inline-block; flex: none; width: 24px; height: 24px; border-radius: var(--b-r-tag); /* 14/10 : plus de rond */ background: var(--tide-soft); color: var(--tide); vertical-align: middle; transition: background-color .15s, color .15s; }
.df-plus::before, .df-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; margin: -1px 0 0 -5px; border-radius: 1px; background: currentColor; transition: transform .25s var(--ease-out); }
.df-plus::after { transform: rotate(90deg); }
[aria-expanded="true"] .df-plus::after, details[open] > summary .df-plus::after, .df-plus.is-open::after { transform: rotate(90deg) scaleX(0); }
:is(button, summary, [role="button"]):hover .df-plus { background: var(--tide); color: #fff; }
.df-sea .df-plus { background: #fff; }
@media (prefers-reduced-motion: reduce) { .df-plus::before, .df-plus::after { transition: none; } }
/* ================= V5 (socle) ================= */
/* Champs à compléter : V4.2 (25/09), plus aucune marque visible ; build.mjs les retire et les liste dans .claude/A-COMPLETER.md (styles .df-todo retirés). */
/* Menu (V4.2, point 1 ; V4.3, nuit du 06/10) : Expertises, Réalisations, Technologies, Qui nous sommes, Blog ; « Démarche » retirée du menu
(elle est sur l'accueil, lien gardé dans le pied de page) ; MaturIA et Contact hors du menu du haut.
Dans Expertises, après un simple espace, « Par où commencer : selon votre maturité ». Le bouton du menu mène à la page Contact. */
/* 10/10 (série 3, Louis : « "Vous ne savez pas par où commencer ?" : je le ferais ressortir dans le menu déroulant dans une autre
couleur, pour bien le faire ressortir par rapport au reste ») : la dernière ligne du déroulant reprend le parti du bouton flottant
(.df-float) : fond marée, texte et icônes blancs, coins arrondis, sur toute la largeur du menu. Au survol et au clavier : fond marine
(l'inverse des boutons du site, marine puis marée) et flèche qui avance ; la ligne ne bouge pas. Contour de focus marine, décollé de
2 px : le contour marée du site ne se verrait pas sur un fond marée. L'icône d'escalier reste à la taille et à l'aplomb des icônes
des sept expertises. Avant : simple lien en marée (color: var(--tide); font-weight: 600). */
body.v3 .dropdown-menu li.dd-more { margin-top: .5rem; }
body.v3 .dropdown-menu li.dd-more a { background: var(--tide); color: #fff; font-weight: 600; border-radius: var(--radius); transition: background-color .2s var(--ease-out); }
body.v3 .dropdown-menu li.dd-more a i { color: #fff; }
body.v3 .dropdown-menu li.dd-more a i:first-child svg { stroke-width: 2.3; } /* escalier de 16 px, blanc sur marée : trait un peu plus épais que sur le bouton flottant (20 px, trait de 1,9) pour rester lisible */
body.v3 .dropdown-menu li.dd-more a i.dd-go { margin-left: auto; transition: transform .2s var(--ease-out); }
body.v3 .dropdown-menu li.dd-more a:is(:hover, :focus-visible) { background: var(--ink); color: #fff; }
body.v3 .dropdown-menu li.dd-more a:is(:hover, :focus-visible) i.dd-go { transform: translateX(3px); }
body.v3 .dropdown-menu li.dd-more a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { body.v3 .dropdown-menu li.dd-more a:is(:hover, :focus-visible) i.dd-go { transform: none; } }
@media (min-width: 769px) and (max-width: 1320px) { body.v3 .nav-links { gap: .8rem; } }
@media (min-width: 769px) and (max-width: 1180px) { body.v3 .nav-links { gap: .7rem; } body.v3 .nav-links > li > a { font-size: 14.5px; } }
@media (min-width: 769px) and (max-width: 1060px) { body.v3 .nav-links { gap: .6rem; } body.v3 .nav-links > li > a { font-size: 14px; } }
/* petite tablette en paysage (769 à 860 px) : le menu touchait le logo (mesuré le 25/09, avec « Démarche ») ; « Blog », dernier lien
du menu depuis le 06/10, y est masqué et reste dans le pied de page et dans le menu du téléphone */
@media (min-width: 769px) and (max-width: 860px) { body.v3 .nav-blog { display: none; } }
/* Pas de bouton « Rendez-vous » dans l'en-tête du téléphone (V4.2, point 2, retour V4) : le bouton est dans le menu déroulant */
/* Les deux associés en petites photos (P10) : k.faces() ; plus dans les bandeaux ni en haut de Contact (V4.2, point 8) */
.df-faces { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 0 0 1.6rem; padding: 0; list-style: none; }
.df-faces li { display: flex; align-items: center; gap: 12px; min-width: 0; }
.df-faces img { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--sea); object-fit: cover; }
.df-faces li > span { display: grid; gap: 3px; min-width: 0; }
.df-faces b { font: 600 16px/1.25 var(--f-display); color: var(--ink); }
.df-faces small { font-size: 14px; line-height: 1.35; color: var(--muted); }
/* Contact (V4.2, point 37) : en haut, le bouton de rendez-vous, puis l'e-mail et le téléphone sur la même ligne, centrés sur le bouton */
.ct-direct { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.75rem; margin: 0; padding: 0; list-style: none; }
.ct-direct li { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.ct-direct-ico { display: grid; place-items: center; flex: none; width: 20px; height: 20px; background: none; color: var(--b-accent); } /* 14/10 : nu (avant : carré blanc de 36 px) */
.ct-direct-ico svg { width: 19px; height: 19px; }
@media (max-width: 560px) { .ct-direct { flex-direction: column; align-items: flex-start; gap: .25rem; } }
/* Sous les questions fréquentes : autre question, glossaire (P33) ; espacés, sans séparateur */
.qa-ask { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; }
/* Pied de page : mentions légales, confidentialité et CGV à côté du copyright (P08, V4.2 point 9), sans « · » */
body.v2 .footer-bottom .df-legal-line { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
/* Pages légales (P08) : haut de page simple, texte courant en largeur de lecture */
.lg-date { margin: 1rem 0 0; font-size: 16px; color: var(--muted); }
.lg-note { margin: .6rem 0 0; max-width: 60ch; font-size: 15.5px; color: var(--muted); }
.lg-doc-sec { padding-top: clamp(2rem, 4vw, 3rem); }
.lg-doc { max-width: 72ch; }
.lg-doc > .lg-sec:last-child > :last-child { margin-bottom: 0; } /* 07/10 au soir (intégration) : pas de marge sous le dernier paragraphe, l'espace du bas est celui de la section (--sec-y) */
.lg-intro { margin: 0 0 1.5rem; font-size: 18px; line-height: 1.6; color: var(--ink); }
.lg-sec + .lg-sec { margin-top: 2.25rem; }
body.v2 .lg-sec h2 { margin: 0 0 .75rem; font: 600 clamp(1.35rem, 2.2vw, 1.6rem)/1.25 var(--f-display); letter-spacing: -.015em; color: var(--ink); }
.lg-sec p, .lg-sec li { font-size: 17px; line-height: 1.65; color: var(--ink); }
.lg-sec p { margin: 0 0 .9rem; }
.lg-sec ul { margin: 0 0 .9rem; padding-left: 1.2rem; }
.lg-sec a { color: var(--tide); font-weight: 600; }
.lg-table { margin: .5rem 0 1.25rem; }
.lg-table table { width: 100%; border-collapse: separate; border-spacing: 0 6px; font-size: 15px; line-height: 1.5; }
.lg-table th { padding: 8px 12px; text-align: left; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lg-table td { padding: 12px; vertical-align: top; background: var(--sea); color: var(--ink); }
.lg-table td:first-child { border-radius: var(--radius) 0 0 var(--radius); font-weight: 600; }
.lg-table td:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
@media (min-width: 900px) { .lg-doc:has(.lg-table) { max-width: 980px; } .lg-doc .lg-sec > p, .lg-doc .lg-sec > ul, .lg-doc .lg-intro { max-width: 72ch; } }
@media (max-width: 760px) {
.lg-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.lg-table table, .lg-table tbody, .lg-table tr, .lg-table td { display: block; }
.lg-table tr { margin: 0 0 12px; padding: 14px 16px; border-radius: var(--radius); background: var(--sea); }
.lg-table td, .lg-table td:first-child, .lg-table td:last-child { padding: 4px 0; border-radius: 0; background: none; }
.lg-table td::before { content: attr(data-th); display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.lg-table td:first-child { font-size: 16px; }
}
/* Haut des pages intérieures plus court (P29) : l'élément marquant de la page apparaît plus tôt ; poisson et lignes de niveau gardés */
/* 07/10 au soir : hauteur, titre et chapeau repris en fin de fichier (« Hauts de page »), à la taille de l'accueil */
body.v3 .df-page-hero .df-crumb { position: relative; min-height: 32px; margin-bottom: 1.4rem; } /* 14/10 : simple lien (40 px et 1rem avant, pastille) */
body.v3 .df-page-hero .df-crumb::after { content: ""; position: absolute; inset: -6px 0; }
/* 14/10 soir (Louis : liens de retour un peu plus grands) : zone de clic de 44 px à toutes les largeurs (pseudo-élément, boîte de
32 px et marge inchangées). Avant : position: relative et ::after seulement sous 768 px (lot mobile, plus bas). */
/* ---------- Contact V4.2 (25/09, lot contact) : module Calendly en ligne, sous l'e-mail et le téléphone ----------
Le bouton du menu mène en haut de /contact depuis le 14/10 soir (avant : #rendez-vous / #book-a-call, ancres gardées pour les liens
externes ; scroll-margin-top déjà posé sur [id], v2.css). Carte blanche sans contour
(la fine bordure grise est dans l'iframe de Calendly). Hauteur réservée : l'ancre tombe juste et rien ne saute au chargement ;
resize: true (js/v42-contact.js) ajuste ensuite la hauteur par un style en ligne. Rien ne bouge au survol. */
body.v3 .ct-hero { background-position: right -260px top 20px; }
.ct-direct-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.5rem; margin: 0; }
.ct-direct-h { margin: 0; font: 600 1rem/1.4 var(--f-display); color: var(--ink); }
/* 14/10 soir (Louis : « gros espace » entre l'e-mail et Calendly) : marge ramenée à 1rem (avant : clamp(1.25rem, 2.5vw, 1.75rem)) et,
en grande mise en page, haut du cadre rogné de 32 px (voir .ct-cal-frame plus bas) : Calendly y laisse environ 65 px de vide
au-dessus de sa carte (mesure du 14/10 à 1366). */
.ct-book { margin-top: 1rem; }
/* Carte blanche seulement tant que le module n'est pas prêt (attente) ou en secours : une fois Calendly chargé, sa carte se pose
directement sur l'écume, sans double cadre (finition 25/09). */
.ct-cal { position: relative; border-radius: 0; background: transparent; overflow: hidden; }
.ct-cal:not(.is-ready), .ct-cal.is-failed { border-radius: var(--radius); background: #fff; }
.ct-cal-frame { position: relative; z-index: 1; height: 693px; }
.ct-cal-frame iframe { display: block; }
/* plancher (intégration V4.2, 25/09 soir) : avec l'ajustement automatique de Calendly (resize), le module a été relevé à 26 px
de haut juste après son chargement, à 390 px (cause non établie) ; il ne doit jamais s'écraser. Au-delà de 600 px,
la hauteur donnée par Calendly s'applique. */
.ct-cal-frame, .ct-cal-frame iframe { min-height: 693px; } /* hauteur finale mesurée à 1440 (grande mise en page) : rien ne saute au chargement */
.ct-cal-wait { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; margin: 0; padding: 24px; text-align: center; font-size: 16px; color: var(--muted); }
.ct-cal.is-ready .ct-cal-wait { visibility: hidden; }
.ct-cal.is-ready .ct-cal-dots i, .ct-cal.is-failed .ct-cal-dots i { animation: none; }
.ct-cal-dots { display: flex; gap: 8px; }
.ct-cal-dots i { width: 8px; height: 8px; border-radius: 2px; background: var(--fish); animation: ct-cal-pulse 1.2s ease-in-out infinite; }
.ct-cal-dots i:nth-child(2) { animation-delay: .15s; }
.ct-cal-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ct-cal-pulse { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }
.ct-cal-fallback { display: none; padding: clamp(1.5rem, 3vw, 2.25rem); }
.ct-cal-fallback p { margin: 0 0 1rem; max-width: 60ch; font-size: 1.05rem; line-height: 1.55; color: var(--muted); }
.ct-cal-fallback b { color: var(--ink); }
.ct-cal-fallback-acts { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin: 0; }
body.v2 .ct-cal-fallback .ct-cal-fallback-acts { max-width: none; margin: 0; }
.ct-cal.is-failed .ct-cal-frame, .ct-cal.is-failed .ct-cal-wait, html:not(.js) .ct-cal-frame, html:not(.js) .ct-cal-wait { display: none; }
.ct-cal.is-failed .ct-cal-fallback, html:not(.js) .ct-cal-fallback { display: block; }
.ct-cal-note { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin: .75rem 0 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.ct-cal-note a { color: var(--tide); }
@media (prefers-reduced-motion: reduce) { .ct-cal-dots i { animation: none; opacity: .6; } }
/* 14/10 soir : vide du haut de Calendly (grande mise en page) rogné de 32 px ; .ct-cal (overflow: hidden) coupe le haut du cadre,
rien ne passe sur la ligne de l'e-mail. La carte de Calendly et sa mention « Powered by Calendly » restent entières (environ
33 px de vide gardés). Seulement à partir de 1000 px : en dessous, la mise en page de Calendly change. Avant : pas de rognage. */
@media (min-width: 1000px) {
.ct-cal-frame { margin-top: -32px; }
}
@media (max-width: 700px) {
.ct-cal-frame { height: 811px; } /* petite mise en page de Calendly : 811 px une fois chargée (mesure du 25/09) */
.ct-cal-frame, .ct-cal-frame iframe { min-height: 811px; }
.ct-cal:not(.is-ready), .ct-cal.is-failed { border-radius: 0; }
.ct-cal { margin-inline: calc(-1 * var(--gutter)); border-radius: 0; }
.ct-direct-wrap { flex-direction: column; align-items: flex-start; }
.ct-cal-note { flex-direction: column; }
}
/* ---------- V4.3, lot mobile (phase 5, 06/10) : menu, zones de clic de 44 px, pied de page ----------
Rien ne change au-delà de 768 px. Les zones de clic grandissent sans déplacer le dessin (marge intérieure compensée par une
marge négative, ou pseudo-élément transparent), sauf dans le pied de page : rangées de 44 px sur téléphone. */
.nw { white-space: nowrap; display: contents; } /* mot composé à ne pas couper au trait d'union (prenez-la, faut-il) : classe posée par le générateur. display: contents (contrôle final, 06/10) : dans un bouton ou un lien en flex ou en grille (« Prendre rendez-vous »), le span devenait un élément à part (écart de 10 px, mots collés, ou mot renvoyé à la ligne) ; sans boîte, le texte reste d'un seul tenant et garde nowrap (hérité) */
@media (max-width: 768px) {
/* En-tête : logo et bouton du menu cliquables sur 44 px, dessin et hauteur de l'en-tête inchangés */
body.v3 nav.container .df-logo { padding-block: 11px; margin-block: -11px; }
body.v3 .menu-toggle { box-sizing: content-box; padding: 8px 6px; margin: -8px -6px; }
/* Rien ne bouge au survol : sur téléphone, le survol reste collé après un toucher (bouton grossi, lien décalé de 5 px) */
body.v3 .menu-toggle:hover, body.v3 .nav-links a:hover { transform: none; }
/* Panneau du menu et voile collés sous l'en-tête (51 px de haut, et non 60 : il restait une bande de 9 px non voilée) ;
hauteur de l'écran visible, pour que « Prendre rendez-vous » ne passe pas sous la barre du navigateur */
body.v3 .nav-links { top: 51px; height: calc(100vh - 51px); height: calc(100dvh - 51px); }
body.v3::before { top: 51px; height: calc(100vh - 51px); height: calc(100dvh - 51px); }
/* 13/10 (relecture) : menu ouvert, la page ne défile plus derrière le voile. base.css bloque le défilement sur body
(body.menu-open), mais html est en overflow-x: clip : le réglage de body n'est alors pas reporté sur la fenêtre et ne
bloquait rien. Navigateur sans :has() : règle ignorée, comportement d'avant. */
html:has(> body.menu-open) { overflow: hidden; }
/* Déroulant Expertises : 559 px de contenu à 390 px, coupé à 500 (la 7e entrée, « Par où commencer », était cachée) */
body.v3 .nav-item-with-dropdown.active .dropdown-menu { max-height: 1000px; }
/* Entrées du déroulant : l'icône collait au texte (le menu mobile repassait les liens en bloc) */
body.v3 .nav-links .dropdown-menu a { display: flex; align-items: flex-start; gap: .6rem; }
body.v3 .nav-links .dropdown-menu a i { margin-top: .3em; }
/* 10/10 (série 3) : « Vous ne savez pas par où commencer ? » dans le menu du téléphone : même bouton marée, en retrait dans le
cadre du déroulant (marge intérieure sur la ligne : elle fait 100 % de large, une marge extérieure la ferait déborder de 8 px).
Le déroulant ne fait que 200 px de large (panneau de 280 px, de 320 à 768 px d'écran) et « par où commencer ? » en demande
150 : marges serrées (texte de 152 px de large) et pas de flèche (comme le bouton flottant sur téléphone), pour deux lignes
équilibrées (« Vous ne savez pas » puis « par où commencer ? ») au lieu de trois ; icône centrée en hauteur. */
body.v3 .nav-links .dropdown-menu li.dd-more { margin: 0; padding: 0 .2rem; }
body.v3 .nav-links .dropdown-menu li.dd-more a { align-items: center; gap: .5rem; min-height: 48px; padding: .7rem .55rem; }
body.v3 .nav-links .dropdown-menu li.dd-more a i { margin-top: 0; }
body.v3 .nav-links .dropdown-menu li.dd-more a i.dd-go { display: none; }
body.v3 .nav-links .dropdown-menu li.dd-more a span { text-wrap: balance; }
/* Pied de page : liens sur des rangées de 44 px ; ligne légale centrée sur la même hauteur */
body.v2 .footer-links li { margin: 0; }
body.v2 .footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
body.v2 .footer-bottom .df-legal-line { align-items: center; }
body.v2 .footer-bottom .df-legal-line a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 7px; margin-inline: -7px; } /* « CGV » : 31 px de large */
body.v3 footer .df-logo-word { padding-block: 7px; margin-block: -7px; }
/* « prenez-la. » ne se coupe plus au trait d'union à 390 px : deux lignes équilibrées */
body.v2 .footer-tagline { text-wrap: balance; }
/* Retour (haut des pages intérieures), pastilles du glossaire ; lettres : écart de 8 px et zone de clic de 44 px, lettre inchangée */
/* 14/10 : le fil d'Ariane est un simple lien de 32 px ; sa zone de clic garde 44 px par un pseudo-élément (hauteur du haut de page inchangée) */
/* 14/10 soir : ces deux règles (position: relative, min-height 32px ; ::after inset -6px 0) valent désormais à toutes les
largeurs, plus haut (« Haut des pages intérieures plus court ») */
.df-chips button { min-height: 44px; }
.df-letters { gap: 8px; }
.df-letters a { position: relative; }
.df-letters a::after { content: ""; position: absolute; inset: -4px; }
/* Liens isolés (questions fréquentes, glossaire, bandeau de rendez-vous) : zone de clic de 44 px, ligne inchangée */
.qa-ask a, .df-term-foot a { padding-block: 11px; margin-block: -11px; }
body.v2 .cta-banner-contact a { position: relative; }
body.v2 .cta-banner-contact a::after { content: ""; position: absolute; inset: -8px -4px; }
}
/* V4.3 (intégration, 06/10) : position: sticky sur tout le site. base.css met overflow-x: hidden sur body, et html a overflow-x: clip :
le body devient alors un conteneur de défilement qui ne défile jamais, et les éléments sticky ne collent plus (panneau des réponses
de la FAQ, commandes du simulateur de Formations, sommaire du blog). « clip » coupe le débordement de la même façon sans créer ce
conteneur. Un navigateur qui ne connaît pas « clip » (Safari avant 16) garde « hidden ». */
body.v3 { overflow-x: clip; }
/* Contrôle final V4.3 (06/10) : un élément collant plus haut que la fenêtre cache son bas pendant qu'il colle. Sur un écran bas
(portable 1280 x 720 : environ 600 px de fenêtre utile), le panneau des réponses de la FAQ défile avec la page, comme avant
l'intégration : la plus longue réponse mesure 496 px, collée à 94 px du haut. Rien ne change sur un écran plus haut. */
@media (max-height: 620px) { .qa-panels { position: static; } }
/* 07/10 : un mot insécable ne devient jamais un bloc, même dans un titre dont les span sont en display: block (« prenez-la. » renvoyait le point à la ligne) */
span.nw { display: contents !important; }
/* ================= 07/10 au soir : règles communes de Louis (« j'en ai marre de tes marges qui ne sont pas les mêmes partout ») =================
1. Rythme vertical unique. Toutes les sections de contenu ont le même espace en haut et en bas : --sec-y, l'espace serré de
« Nos expertises » de l'accueil, un peu réduit (41 px dans une fenêtre de 1366 px, 36 à 48 px selon la largeur). Le titre de
section garde partout le même écart avec son contenu : --sec-head (28 px, sous le sous-titre quand il y en a un).
Jamais de double marge : pas de marge au-dessus du premier enfant d'une section ni sous le dernier. Les feuilles des lots
règlent leurs propres sections avec ces deux variables (sans ajouter de marge à celles-ci).
2. Hauts de page : même taille de titre et de chapeau que l'accueil, hauteur proche de la sienne.
3. Fin de page : bandeau « Par où commencer » (le même que l'accueil), puis questions fréquentes, puis pied de page.
4. Bouton flottant « selon votre maturité ». */
/* 09/10 (Louis : « c’était mieux avec des marges un peu plus grosses ») : rythme agrandi, 41 → 72 px en haut et en bas d’une section
sur un écran de 1366 px, 28 → 36 px sous les titres. --trust-y garde l’ancien espace pour le bandeau de logos (accueil, Qui nous sommes). */
:root { --sec-y: clamp(3rem, 5.25vw, 5rem); --sec-head: 36px; --trust-y: clamp(2.25rem, 3vw, 3rem); }
.df-section, body.v2 .cta-banner { padding-top: var(--sec-y); padding-bottom: var(--sec-y); }
.df-head { margin-bottom: var(--sec-head); }
.df-section > .container > :first-child, body.v2 .cta-banner > .container > :first-child { margin-top: 0; }
.df-section > .container > :last-child, body.v2 .cta-banner > .container > :last-child { margin-bottom: 0; }
/* --- 2. Hauts de page : titre et chapeau à la taille de l'accueil (.hm-hero, v3-home.css) ; même hauteur minimale que l'accueil
(fenêtre moins la hauteur du bandeau de logos, 2 x --trust-y + 64 px : 504 px sur un écran de 1366 x 650, réglage du 09/10), plafonnée à 640 px sur les grands écrans, contenu centré en hauteur.
Le poisson reste (js/v3.js), sans algue. Contact (calendrier dans le haut de page) et pages légales (documents) gardent leur
hauteur naturelle ; sur téléphone, hauteur naturelle partout. --- */
body.v3 .df-page-hero { display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--header-h) + clamp(1rem, 2vw, 1.75rem)); padding-bottom: clamp(2.25rem, 4vw, 3.5rem); }
body.v3 .df-page-hero > .container { width: 100%; }
@media (min-width: 641px) {
body.v3 .df-page-hero:not(.ct-hero):not(.df-page-hero--doc) { min-height: min(calc(100vh - 2 * var(--trust-y) - 64px), 640px); min-height: min(calc(100svh - 2 * var(--trust-y) - 64px), 640px); }
}
body.v2.v3 .df-page-hero h1 { font-size: clamp(2.3rem, 4.3vw, 3.5rem); font-weight: 500; letter-spacing: -0.028em; line-height: 1.08; max-width: 30ch; } /* 14/10 : 500, -0.028em, 1.08 (avant : 700 de Schibsted, -0.032em, 1.06) */
body.v3 .df-page-hero h1 span { margin-top: .2rem; }
body.v3 .df-page-hero .df-lede { max-width: 66ch; margin: 1.5rem 0 2rem; font-size: clamp(1.15rem, 1.7vw, 1.35rem); }
body.v3 .df-page-hero .df-lede:last-child { margin-bottom: 0; }
@media (max-width: 640px) { body.v3 .df-page-hero .df-lede { margin: 1rem 0 1.5rem; font-size: 1.1rem; } }
/* 14/10 (direction « premium sobre », section 6) : haut de page marine des pages principales (fond et nappe : v2.css). Titre blanc
sur une ligne, accroche (le span du h1) en dégradé sur la ligne suivante, le mot de l'accueil ; chapeau #A9BBCC (8,9:1) ; lien
secondaire blanc souligné à 45 % ; contour de focus blanc. Plus de poisson (js/v3.js). La hauteur (min-height plus haut) ne change pas. */
body.v2.v3 .df-page-hero:not(.ct-hero):not(.df-page-hero--doc) h1 { color: #fff; }
/* 14/10 (relecture) : le seul span direct du h1 qui n'est pas .nw (avant : h1 span, qui rendait transparent le .nw d'un titre,
« êtes-vous » de Selon votre maturité, « Garde-manger » : .nw est en display: contents, son dégradé ne se peignait pas). Le .nw
du titre garde le blanc du h1 ; celui de l'accroche (Automatisation) hérite du texte transparent et prend le dégradé du parent. */
body.v3 .df-page-hero:not(.ct-hero):not(.df-page-hero--doc) h1 > span:not(.nw) {
display: block; width: fit-content; max-width: 100%; padding-bottom: .08em; margin-bottom: -.08em; font-weight: 500; /* marge du bas compensée : le dégradé couvre les jambages sans grandir le haut de page */
background: var(--b-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* un .nw dans l'accroche hérite du texte transparent (sinon .df-hero h1 span de v2.css le peint en #1F6FA8 sur le marine) */
body.v3 .df-page-hero:not(.ct-hero):not(.df-page-hero--doc) h1 > span:not(.nw) .nw { color: inherit; }
body.v3 .df-page-hero:not(.ct-hero):not(.df-page-hero--doc) .df-lede { color: var(--b-on-dark-2); }
body.v3 .df-page-hero:not(.ct-hero):not(.df-page-hero--doc) .df-link { color: #fff; text-decoration-color: rgba(255, 255, 255, .45); }
body.v3 .df-page-hero:not(.ct-hero):not(.df-page-hero--doc) .df-link:hover { color: #fff; text-decoration-color: #fff; }
body.v2.v3 .df-page-hero:not(.ct-hero):not(.df-page-hero--doc) :focus-visible { outline-color: #fff; }
/* Contact et pages légales (haut de page clair) : l'accroche reste au bleu d'accent */
body.v3 :is(.ct-hero, .df-page-hero--doc) h1 span { color: var(--b-accent); }
@media (max-width: 640px) {
body.v2.v3 .df-page-hero h1 { font-size: 2.05rem; }
/* téléphone : le texte occupe toute la largeur. La nappe, calée à gauche et à taille fixe (le bouton aussi), reste sous les
boutons et ne monte qu'à leur droite, sous le chapeau (mesuré de 320 à 640 px de large) */
body.v2 .df-page-hero:not(.ct-hero):not(.df-page-hero--doc) { background-size: 560px auto; background-position: left 0 bottom -99px; }
}
@media (min-width: 481px) and (max-width: 640px) {
/* de 481 à 640 px, le lien secondaire passe à côté du bouton : la nappe reste entièrement dans la marge du bas (14/10 : vaut pour
les hauts de page avec lien secondaire ou sans bouton ; pages au bouton seul : règle :has() juste dessous) */
body.v2 .df-page-hero:not(.ct-hero):not(.df-page-hero--doc) { background-position: left 0 bottom -175px; }
/* 14/10 (nappe maillage) : avec le nouveau SVG, bottom -175px ne laissait plus voir aucune ligne. Les hauts de page avec un
bouton seul (pages d'expertise) remontent la nappe : sa crête passe à droite du bouton, à au moins 30 px (481, 560 et 640 px
de large, banc .claude/nappe/test-nappe.cjs). Avec le lien secondaire .df-link (Technologies, Qui nous sommes, Notre offre,
MaturIA), aucun cadrage ne montre la crête sans l'approcher à moins de 16 px du lien ; sans bouton (blog, garde-manger), rien
n'a été mesuré : la nappe y reste hors de vue, comme avant. Sans :has(), règle ignorée et bottom -175px partout. */
body.v2 .df-page-hero:not(.ct-hero):not(.df-page-hero--doc):has(.cta-button):not(:has(.df-link)) { background-position: left 0 bottom -110px; }
}
/* 14/10 (relecture du lot 1) : un bloc PROVISOIRE corrigeait ici deux hauts de page devenus marine (tuiles .mp-cyc de MaturIA ;
date, pictogrammes et bandeau de test .bl-meta, .bl-ico, .bl-test des articles de blog). 14/10 (L2-T6) : retiré, ces réglages
sont dans leurs feuilles (v3-maturia.css et blog.css, L2-T5). Les sélecteurs .mp-cyc et .bl-meta de l'impression restent. */
/* 14/10 (relecture) : impression. Le fond marine n'est pas imprimé par défaut (comme l'accroche de l'accueil, v3-home.css) : textes
du haut de page en sombre, accroche (texte transparent sur dégradé) en couleur pleine. Sélecteurs au moins aussi forts que ceux
du fond (v2.css) et des couleurs claires (plus haut). */
@media print {
body.v2 .df-page-hero:not(.ct-hero):not(.df-page-hero--doc) { background: none; color: var(--ink); }
body.v2.v3 .df-page-hero:not(.ct-hero):not(.df-page-hero--doc) h1 { color: var(--ink); }
body.v3 .df-page-hero:not(.ct-hero):not(.df-page-hero--doc) h1 > span:not(.nw) { background: none; color: var(--tide); }
body.v3 .df-page-hero:not(.ct-hero):not(.df-page-hero--doc) :is(.df-lede, .df-crumb, .mp-cyc small, .bl-meta) { color: var(--muted); }
body.v3 .df-page-hero:not(.ct-hero):not(.df-page-hero--doc) :is(.df-link, .df-link:hover) { color: var(--tide); }
body.v3 .df-page-hero:not(.ct-hero):not(.df-page-hero--doc) .mp-cyc b { color: var(--ink); }
}
/* 14/10 (Louis : la vague V12 sur toutes les pages) : la vague animée de l'accueil sur chaque haut de page marine
(canvas.df-hero-wave, posé par build.mjs pageHero ; js/v6-wave.js en mode « page »). Le canvas couvre la section, sous le
contenu (.container : z-index 1). Quand il tourne, le moteur pose data-wave-live sur la section : l'image de fond (nappe figée,
--b-lines) est masquée, pas de double vague ; sans JavaScript, elle reste. Écran étroit (moins de 760 px, même seuil que le
moteur) : 120 px de plus sous les boutons, la bande où se tient la nappe. Avant : pas de canvas, la nappe figée seule. */
.df-hero-wave { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
body.v2 .df-page-hero[data-wave-live]:not(.ct-hero):not(.df-page-hero--doc) { background-image: none; }
@media (max-width: 759.98px) {
body.v3 .df-page-hero:has(> .df-hero-wave) { padding-bottom: calc(clamp(2.25rem, 4vw, 3.5rem) + 120px); }
}
@media print { .df-hero-wave { display: none; } }
/* --- 3. Bandeau final commun « Par où commencer » (build.mjs, k.banner ; le même sur l'accueil) : fond marine et nappe de houle de
.cta-banner (v2.css) ; plus de poisson (14/10). Titre, puis une seule carte, compacte : titre et phrase à gauche,
bouton et adresse e-mail à droite (dessous sur téléphone). --- */
body.v2 .df-start h2 { margin: 0 0 var(--sec-head); }
.df-start-card {
position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.25rem 3rem;
max-width: 960px; padding: 28px 32px; border-radius: var(--radius); background: var(--b-night-2); /* 14/10 : carte #0F2740 pleine, rayon 6 (avant : blanc à 7 %, rayon 20) ; la nappe passe dessous sans la traverser */
}
body.v2 .df-start-card h3 { margin: 0 0 .4rem; font: 600 1.4rem/1.25 var(--f-display); letter-spacing: -0.012em; color: #fff; }
body.v2 .df-start-card p { margin: 0; max-width: 58ch; font-size: 16.5px; line-height: 1.55; color: rgba(255, 255, 255, .78); }
.df-start-act { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
.df-start-mail { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; color: #fff; font-size: 16px; font-weight: 600; text-decoration: none; }
.df-start-mail i { display: inline-grid; flex: none; width: 18px; height: 18px; color: var(--signal); }
.df-start-mail i svg { display: block; width: 100%; height: 100%; }
.df-start-mail:hover { text-decoration: underline; text-underline-offset: 4px; }
.df-start-mail:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }
@media (max-width: 760px) {
.df-start-card { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; }
.df-start-mail { min-height: 44px; }
}
/* --- 4. Bouton flottant « selon votre maturité » (.df-float) : retiré le 14/10 (plus de gadgets ; build.mjs, floatMat, ne le rend
plus). Ses règles sont dans l'historique git ; js/v3.js garde son comportement, inactif sans l'élément.
15/10 (Louis : bouton flottant Par où commencer remis) ; avant : retiré le 14/10, règles du 10/10 dans l'historique git (commit
avant 41569f3). Mêmes dimensions qu'avant, au style « premium sobre » : fond bleu (--b-accent, #1F6FA8), texte et icônes blancs,
rayon 6 px, sans ombre ni liseré (avant : ombre portée de 34 px et liseré blanc à 16 %), jamais en pilule (avant, sur téléphone :
rayons de 999 px). Lisibilité : texte blanc sur le bleu 5,4:1 (la question en blanc plein, avant à 85 % : 4,4:1) ; le bleu se
détache du marine des hauts de page, du bandeau final et du pied de page (3,3:1) et du blanc (5,4:1). Il n'apparaît qu'une fois le
haut de page presque passé (js/v3.js), en bas à droite, loin du bouton « Prendre rendez-vous » de l'en-tête. Au-dessus du contenu,
sous le bandeau cookies (960), qui le repousse vers le haut (section du bandeau), et sous l'en-tête et le menu du téléphone (1000).
Fin de page : le pied de page gagne une marge basse tant que le bouton est là. Téléphone : une ligne (la question reste lue par les
lecteurs d'écran). --- */
.df-float {
position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 950; display: flex; align-items: center; gap: 2px;
padding: 6px; border-radius: var(--radius); background: var(--b-accent); color: #fff; box-shadow: none;
opacity: 0; visibility: hidden; transform: translateY(8px);
transition: opacity .25s var(--ease-out), transform .25s var(--ease-out), visibility 0s linear .25s;
}
html:not(.js) .df-float { display: none; }
.df-float.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .25s var(--ease-out), transform .25s var(--ease-out), visibility 0s; }
.df-float-a { display: flex; align-items: center; gap: 11px; padding: 5px 10px 5px 5px; border-radius: var(--b-r-tag); color: #fff; text-decoration: none; transition: background-color .2s var(--ease-out); }
.df-float-a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.df-float-ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--b-r-tag); background: #fff; color: var(--b-accent); }
.df-float-ic svg { display: block; width: 20px; height: 20px; }
.df-float-t { display: grid; line-height: 1.25; }
.df-float-t small { font-size: 12.5px; color: #fff; }
.df-float-t b { font: 600 15px/1.3 var(--f-body); color: #fff; }
.df-float-go { display: inline-grid; flex: none; width: 16px; height: 16px; color: #fff; transition: transform .2s var(--ease-out); }
.df-float-go svg { display: block; width: 100%; height: 100%; }
.df-float-a:hover .df-float-go { transform: translateX(3px); }
.df-float-x { position: relative; display: grid; place-items: center; flex: none; align-self: flex-start; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--b-r-tag); background: none; color: rgba(255, 255, 255, .85); cursor: pointer; transition: background-color .2s var(--ease-out), color .2s var(--ease-out); }
.df-float-x svg { width: 14px; height: 14px; }
.df-float-x:hover { background: rgba(255, 255, 255, .14); color: #fff; }
body.v2 .df-float-a:focus-visible, body.v2 .df-float-x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
body.v2:has(> .df-float) footer { padding-bottom: calc(2rem + 72px); }
@media (prefers-reduced-motion: reduce) {
.df-float, .df-float.is-on { transform: none; }
.df-float-a:hover .df-float-go { transform: none; }
}
@media (max-width: 640px) {
.df-float { right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); padding: 3px; }
.df-float-a { gap: 8px; padding: 3px 8px 3px 3px; }
.df-float-ic { width: 30px; height: 30px; }
.df-float-ic svg { width: 17px; height: 17px; }
.df-float-t small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.df-float-t b { font-size: 14px; }
.df-float-go { display: none; }
.df-float-x { align-self: center; width: 30px; height: 30px; }
.df-float-x::after { content: ""; position: absolute; inset: -7px; }
body.v2:has(> .df-float) footer { padding-bottom: calc(2rem + 52px); }
}
/* 15/10 : sur la page Automatisation (téléphone et tablette, 980 px et moins), le rappel du montant du calculateur (.xa-float,
exp-automation.css) occupe le bas de l'écran pendant qu'on règle les champs : le bouton s'efface le temps qu'il est affiché, au
lieu de le recouvrir. Avant le 14/10, rien ne les départageait. */
@media (max-width: 980px) {
body.v2:has(.xa-float.is-on) .df-float.is-on { opacity: 0; visibility: hidden; transition: opacity .25s var(--ease-out), visibility 0s linear .25s; }
}
@media print { .df-float { display: none; } }
/* --- 5. Sélecteur FR / EN (10/10, retours de Louis : « ce n'est pas un bouton », « pas bien aligné en version mobile ») : un seul lien
(build.mjs, nav) ; tout le bouton mène à la même page dans l'autre langue, la langue de la page reste en surbrillance (FR | EN).
Au survol, le fond s'éclaire et l'autre langue passe en bleu ; le bouton ne bouge pas. Les deux pastilles sont des au même
style, centrées en hauteur l'une comme l'autre (avant, « EN » était un lien passé en bloc par base.css, texte collé en haut sur
téléphone). Règles de base.css (.lang-switch, .nav-links a) neutralisées ici : le lien est maintenant la pastille entière. --- */
body.v3 .nav-links a.lang-switch {
position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0; width: auto; padding: 2px;
border: 1px solid var(--line); border-radius: 999px; background: rgba(30, 58, 95, .04); color: var(--muted);
font-size: 16px; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transform: none;
transition: background-color .2s var(--ease-out);
}
body.v3 .nav-links a.lang-switch::after { display: none; }
/* 10/10 (relecture) : langue inactive en var(--muted) (#4A5E71, environ 6,4:1 sur le fond du bouton) au lieu de #6B7C8F (4,1:1,
sous le 4,5:1 demandé pour ce texte de 12,8 px). L'ancienne règle du téléphone (bloc 768 px plus haut, même sélecteur, entièrement
remplacée par celle de cette section) est retirée. */
body.v3 .nav-links .lang-switch .lang-option {
display: inline-flex; align-items: center; justify-content: center; padding: .3rem .65rem; border-radius: 999px;
font: 700 12.8px/1 var(--f-body); letter-spacing: .5px; color: var(--muted); cursor: pointer;
transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}
/* 11/10 (Louis, sur téléphone : « trop large et pas bien animé, pas dynamique comme les boutons ») : la surbrillance est une pastille
marine posée derrière les deux langues (::before), qui GLISSE vers l'autre langue quand on appuie (:active, puis .is-switching
posé par js/v3.js le temps que l'autre page arrive). Au survol, l'autre langue prend un fond clair, comme un bouton. Les deux
colonnes ont la même largeur (grille), la pastille en couvre une. data-cur = langue de la page (build.mjs). */
body.v3 .nav-links a.lang-switch { display: inline-grid; grid-template-columns: 1fr 1fr; isolation: isolate; -webkit-tap-highlight-color: transparent; }
body.v3 .nav-links a.lang-switch::before {
content: ""; position: absolute; z-index: -1; top: 2px; bottom: 2px; left: 2px; width: calc(50% - 2px); border-radius: 999px;
background: var(--ink); transition: transform .3s cubic-bezier(.3, 1.25, .5, 1);
}
body.v3 .nav-links a.lang-switch[data-cur="en"]::before { transform: translateX(100%); }
/* 13/10 (relecture) : background: none. base.css peint un dégradé bleu sur la langue active, par-dessus la pastille : pendant le
clic, la pastille partait sous l'autre langue et l'ancienne gardait son dégradé sous un texte gris (1,6:1). La pastille marine
est maintenant la seule surbrillance, sur toutes les pages et dans le menu du téléphone. */
body.v3 .nav-links .lang-switch .lang-option.is-active { background: none; color: #fff; }
@media (hover: hover) {
body.v3 .nav-links a.lang-switch:hover .lang-option:not(.is-active) { background: var(--tide-soft); color: var(--tide); }
}
body.v3 .nav-links a.lang-switch[data-cur="fr"]:is(:active, .is-switching)::before { transform: translateX(100%); }
body.v3 .nav-links a.lang-switch[data-cur="en"]:is(:active, .is-switching)::before { transform: translateX(0); }
body.v3 .nav-links a.lang-switch:is(:active, .is-switching) .lang-option.is-active { color: var(--muted); }
body.v3 .nav-links a.lang-switch:is(:active, .is-switching) .lang-option:not(.is-active) { background: transparent; color: #fff; }
@media (prefers-reduced-motion: reduce) { body.v3 .nav-links a.lang-switch::before { transition: none; } }
body.v2 .nav-links a.lang-switch:focus-visible { outline: 2px solid var(--tide); outline-offset: 3px; }
@media (max-width: 768px) {
/* menu du téléphone (11/10) : bouton compact, à la largeur de ses deux langues (plus sur toute la largeur du panneau), deux
zones de 44 px de haut, texte centré dans chacune */
body.v3 .nav-links a.lang-switch { display: inline-grid; width: auto; padding: 4px; border-radius: 999px; }
body.v3 .nav-links a.lang-switch::before { top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); }
body.v3 .nav-links .lang-switch .lang-option { min-width: 64px; min-height: 44px; padding: 0 1.15rem; font-size: 15.2px; }
}
/* --- Bandeau de consentement (13/10, décisions de Louis) : créé par js/consent.js, en bas de l'écran, sans voile (la page reste
lisible et utilisable). Fond marine plein, sans contour. Deux boutons de même taille, au même niveau : « Accepter » en blanc
plein, « Refuser » avec un liseré blanc, 48 px de haut ; sur téléphone, côte à côte sur toute la largeur. Sous le menu du
téléphone et son voile (z-index 999 et 1000), au-dessus du bouton flottant (950), que le bandeau repousse vers le haut : le
script écrit la hauteur du bandeau dans --df-consent-h, et la page gagne la même marge basse (la fin du pied de page reste
atteignable). --- */
.df-consent {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 960;
padding: 14px var(--gutter) max(14px, env(safe-area-inset-bottom));
background: var(--ink); color: #fff; box-shadow: none; /* 14/10 : sans ombre portée */
animation: df-consent-in .3s var(--ease-out);
}
@keyframes df-consent-in { from { transform: translateY(100%); } }
.df-consent-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; max-width: 1200px; margin: 0 auto; }
body.v2 .df-consent-t { margin: 0; max-width: 78ch; font-size: 16px; line-height: 1.5; color: #fff; }
body.v2 .df-consent-t a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.df-consent-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: none; }
body.v2 .df-consent .cta-button { min-width: 8.5rem; background: #fff; color: var(--ink); cursor: pointer; }
body.v2 .df-consent .cta-button:hover { background: var(--tide-soft); color: var(--ink); }
body.v2 .df-consent .df-consent-no { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .75); }
body.v2 .df-consent .df-consent-no:hover { background: rgba(255, 255, 255, .12); color: #fff; }
body.v2 .df-consent :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
body.v2 .df-consent:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
html.df-consent-on body { padding-bottom: var(--df-consent-h, 0px); }
/* 15/10 (Louis : bouton flottant Par où commencer remis) : le bandeau repousse à nouveau le bouton flottant au-dessus de lui ;
avant : règle retirée le 14/10 avec le bouton. */
html.df-consent-on .df-float { bottom: calc(var(--df-consent-h, 0px) + 12px); }
@media (max-width: 768px) {
.df-consent { padding-top: 12px; }
.df-consent-in { flex-direction: column; align-items: stretch; gap: 10px; }
body.v2 .df-consent-t { font-size: 15px; }
body.v2 .df-consent .cta-button { min-width: 0; padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) { .df-consent { animation: none; } }
@media print { .df-consent { display: none; } }
/* --- En-tête posé sur l'accroche marine de l'accueil (13/10, maquette V11 de Louis) ---
Un seul attribut, posé par build.mjs sur l'accueil quand HOME_HERO vaut "wave" : header[data-hero]. Même contenu, même
balisage ; seul l'habillage change, et seulement tant qu'on est en haut de page : en-tête transparent sur l'accroche, logo aux
couleurs du fond sombre, liens clairs (#C9D6E2, blancs au survol), « Prendre rendez-vous » en contour clair, sélecteur FR / EN et
icône du menu en clair. Dès que le titre de l'accroche arriverait sous l'en-tête, js/v3.js pose is-solid : retour à l'en-tête
clair et collant de tout le site, par une transition douce. Menu du téléphone ouvert (body.menu-open) : en-tête clair aussi (le
panneau est blanc). Menu déroulant : inchangé (panneau blanc). Les autres pages n'ont pas l'attribut : rien ne change pour elles.
Sans JavaScript, l'en-tête de l'accueil reste sur l'accroche et ne suit pas le défilement (il serait illisible sur les sections claires).
14/10 (direction « premium sobre ») : le même habillage pour les pages principales, dont le haut de page est marine :
build.mjs y pose header[data-hero="dark"] (pas sur Contact ni sur les pages légales, au haut de page clair). Toutes les règles
ci-dessous visent donc header[data-hero] (avant : [data-hero="wave"]) ; rien ici n'est propre à la vague (règles .hw* : v3-home.css).
Même bascule is-solid (js/v3.js), au même seuil : quand le titre ([data-header-edge]) arriverait sous l'en-tête. */
html:not(.js) body.v3 header[data-hero] { position: absolute; }
body.v3 header[data-hero] { transition: background-color .3s var(--ease-out), border-color .3s var(--ease-out), box-shadow .25s var(--ease-out); }
body.v3 header[data-hero] .df-logo, body.v3 header[data-hero] .df-logo-fish, body.v3 header[data-hero] .df-logo-word b { transition: color .3s var(--ease-out); }
body.v3 header[data-hero] .nav-links .nav-cta a.cta-button { transition: background-color .2s var(--ease-out), color .3s var(--ease-out), box-shadow .3s var(--ease-out); }
body.v3 header[data-hero] .nav-links a.lang-switch { transition: background-color .2s var(--ease-out), border-color .3s var(--ease-out); }
body.v3 header[data-hero] .nav-links a.lang-switch::before { transition: transform .3s cubic-bezier(.3, 1.25, .5, 1), background-color .3s var(--ease-out); }
body.v3 header[data-hero].is-instant, body.v3 header[data-hero].is-instant *, body.v3 header[data-hero].is-instant *::before { transition: none !important; }
/* 13/10 (relecture) : habillage clair réservé à l'écran (« @media screen » ici et sur les deux blocs suivants). À l'impression,
le fond sombre de l'accroche n'est pas imprimé : l'en-tête de l'accueil s'imprime comme celui des autres pages. */
@media screen {
body.v3:not(.menu-open) header[data-hero]:not(.is-solid) { background: transparent; border-bottom-color: transparent; box-shadow: none !important; }
body.v3:not(.menu-open) header[data-hero]:not(.is-solid) .df-logo { color: #fff; }
body.v3:not(.menu-open) header[data-hero]:not(.is-solid) .df-logo-fish,
body.v3:not(.menu-open) header[data-hero]:not(.is-solid) .df-logo-word b { color: #5FB0E8; }
body.v3:not(.menu-open) header[data-hero]:not(.is-solid) .hamburger-line { background: #fff; }
body.v3:not(.menu-open) header[data-hero]:not(.is-solid) :focus-visible { outline-color: #fff; }
}
@media screen and (min-width: 769px) and (hover: hover) {
/* avant les règles du clic (:active, is-switching) du bloc suivant, qui doivent l'emporter à poids égal */
body.v3 header[data-hero]:not(.is-solid) .nav-links a.lang-switch:hover .lang-option:not(.is-active) { background: rgba(255, 255, 255, .14); color: #fff; }
}
@media screen and (min-width: 769px) {
/* au-dessus de 768 px seulement : en dessous, .nav-links est le panneau blanc du menu, qui garde ses couleurs (y compris
pendant qu'il se referme) */
body.v3 header[data-hero]:not(.is-solid) .nav-links > li > a:not(.cta-button):not(.lang-switch) { color: #C9D6E2; }
body.v3 header[data-hero]:not(.is-solid) .nav-links > li > a:not(.cta-button):not(.lang-switch):hover,
body.v3 header[data-hero]:not(.is-solid) .nav-item-with-dropdown:is(:hover, :focus-within) > a { color: #fff; }
/* 14/10 soir (Louis : bouton Prendre rendez-vous bleu en permanence, à tester) ; avant : transparent, filet blanc, sur les hauts
de page marine. Le bouton garde partout le bleu plein de v2.css (body.v2 .nav-links .nav-cta a.cta-button, survol
--b-accent-hover). Pour revenir en arrière : retirer les marques de commentaire autour des deux règles ci-dessous.
body.v3 header[data-hero]:not(.is-solid) .nav-links .nav-cta a.cta-button { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
body.v3 header[data-hero]:not(.is-solid) .nav-links .nav-cta a.cta-button:hover { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); }
*/
body.v3 header[data-hero]:not(.is-solid) .nav-links a.lang-switch { border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .06); }
body.v3 header[data-hero]:not(.is-solid) .nav-links a.lang-switch::before { background: #fff; }
body.v3 header[data-hero]:not(.is-solid) .nav-links .lang-switch .lang-option { color: #C9D6E2; }
/* background: none : base.css peint un dégradé bleu sur la langue active, qui recouvrirait la pastille blanche */
body.v3 header[data-hero]:not(.is-solid) .nav-links .lang-switch .lang-option.is-active { background: none; color: var(--ink); }
body.v3 header[data-hero]:not(.is-solid) .nav-links a.lang-switch:is(:active, .is-switching) .lang-option.is-active { color: #C9D6E2; }
body.v3 header[data-hero]:not(.is-solid) .nav-links a.lang-switch:is(:active, .is-switching) .lang-option:not(.is-active) { background: transparent; color: var(--ink); }
body.v3 header[data-hero]:not(.is-solid) .dropdown-menu :focus-visible { outline-color: var(--tide); }
body.v3 header[data-hero]:not(.is-solid) .dropdown-menu li.dd-more a:focus-visible { outline-color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
body.v3 header[data-hero], body.v3 header[data-hero] * { transition-duration: .01s !important; }
/* 13/10 (relecture) : la pastille du sélecteur FR / EN (pseudo-élément, non atteint par « * ») ne glisse plus non plus sur
l'accueil ; la règle de transition de cette section, plus précise, annulait celle du sélecteur (plus haut) */
body.v3 header[data-hero] .nav-links a.lang-switch::before { transition: none; }
}
/* 13/10 au soir : animations réduites, pas de défilement doux vers une ancre. base.css pose scroll-behavior: smooth sur , et
la règle de v2.css (« body.v2 * ») n'atteint pas : un lien d'ancre suivi sans JavaScript défilait encore en douceur. */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* 14/10 (direction « premium sobre », section 7) : pictogrammes au trait fin de 1,4 px. Seules les icônes posées dans un sont
visées (icônes maison de build.mjs, flèche du fil d'Ariane) ; les graphiques et les schémas en SVG gardent leur trait. */
body.v3 main i > svg[stroke-width="1.8"], body.v3 main i > svg[stroke-width="2"] { stroke-width: 1.4; }