(boucle.css/.mjs) ou
(outils.css/.mjs).
Système V4 seulement : --b-blue #4458AC, --b-ink #263153, --b-lavender #EEF0FC, --b-lime #E4EE99, --b-muted #5C6480,
--b-paper #FCFCFF. Sur-titre : la forme .hf-kicker de la page Handoff refaite. Aucun appel hors du site.
*/
@font-face { font-family: UckHsJakarta; font-weight: 700; font-display: swap; src: url('/_home-v4/assets/plus-jakarta-sans-700.ttf') format('truetype'); }
@font-face { font-family: UckHsDM; font-weight: 400; font-display: swap; src: url('/_home-v4/assets/dm-sans-400.ttf') format('truetype'); }
@font-face { font-family: UckHsDM; font-weight: 500; font-display: swap; src: url('/_home-v4/assets/dm-sans-500.ttf') format('truetype'); }
@font-face { font-family: UckHsDM; font-weight: 600; font-display: swap; src: url('/_home-v4/assets/dm-sans-600.ttf') format('truetype'); }
@font-face { font-family: UckHsDM; font-weight: 700; font-display: swap; src: url('/_home-v4/assets/dm-sans-700.ttf') format('truetype'); }
.hs {
--b-blue: #4458AC; --b-ink: #263153; --b-lavender: #EEF0FC; --b-lime: #E4EE99; --b-muted: #5C6480; --b-paper: #FCFCFF;
/* Encres de la section : le fond pâle par défaut, le bleu profond les redéfinit. */
--hs-titre: var(--b-ink);
--hs-texte: var(--b-muted);
--hs-replie: #5C6480;
--hs-actif: var(--b-ink);
--hs-ligne: #2631531f;
--hs-barre: var(--b-blue);
--hs-kicker: var(--b-blue);
--hs-marque: var(--b-blue);
--hs-marque-fond: #ffffffb3;
--hs-vide: linear-gradient(150deg, #F6F7FE 0%, #E6EAFB 100%);
--hs-pad: 96px;
position: relative;
isolation: isolate;
color: var(--hs-titre);
font: 400 16px/1.55 UckHsDM, 'DM Sans', Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
.hs *, .hs *::before, .hs *::after { box-sizing: border-box; }
/* L'aplat et ses formes floues vivent sur le bloc collant : ils restent derrière le contenu pendant l'épinglage. */
.hs-inner {
position: relative;
overflow: hidden;
isolation: isolate;
padding: var(--hs-pad) 0;
}
.hs-inner::before, .hs-inner::after { content: ''; position: absolute; z-index: -1; border-radius: 999px; pointer-events: none; }
.hs--lavande .hs-inner {
background:
radial-gradient(ellipse 36% 55% at 100% 0%, #dde2fb 0%, #dde2fb00 70%),
radial-gradient(ellipse 32% 50% at 0% 100%, #F2F6CF 0%, #F2F6CF00 70%),
var(--b-lavender);
}
.hs--lavande .hs-inner::before { width: 520px; height: 160px; background: #fff; filter: blur(60px); opacity: .85; left: 26%; top: -50px; transform: rotate(-8deg); }
.hs--lime .hs-inner {
background:
radial-gradient(ellipse 38% 60% at 96% 4%, #ffffffd9 0%, #ffffff00 70%),
linear-gradient(165deg, #F6F9DE 0%, #EDF3BF 100%);
}
.hs--lime .hs-inner::before { width: 540px; height: 190px; background: #dfe4fb; filter: blur(60px); opacity: .9; left: -150px; bottom: 30px; transform: rotate(-12deg); }
.hs--lime .hs-inner::after { width: 360px; height: 120px; background: #fff; filter: blur(40px); opacity: .7; right: 8%; top: 52%; transform: rotate(18deg); }
.hs--lime { --hs-vide: linear-gradient(150deg, #FBFCEF 0%, #EEF1FC 100%); }
.hs--bleu {
--hs-titre: #fff;
--hs-texte: #D8DDF1;
--hs-replie: #AEB8DE;
--hs-actif: #fff;
--hs-ligne: #ffffff29;
--hs-barre: var(--b-lime);
--hs-kicker: var(--b-lime);
--hs-marque: var(--b-ink);
--hs-marque-fond: var(--b-lime);
--hs-vide: linear-gradient(150deg, #F4F6FF 0%, #DCE2FA 100%);
}
.hs--bleu .hs-inner {
background:
radial-gradient(ellipse 55% 45% at 0% 6%, #4458AC 0%, #4458ac00 72%),
radial-gradient(ellipse 48% 40% at 100% 90%, #3f52a0 0%, #3f52a000 72%),
linear-gradient(175deg, #263153 0%, #2B3863 50%, #263153 100%);
}
.hs--bleu .hs-inner::before { width: 620px; height: 150px; background: #6f82d6; filter: blur(90px); opacity: .35; right: -160px; top: 120px; transform: rotate(-16deg); }
.hs--bleu .hs-inner::after { width: 560px; height: 160px; background: #B9C4F4; filter: blur(90px); opacity: .16; left: -180px; bottom: 40px; transform: rotate(14deg); }
/* ---------- Mise en page : liste à gauche, carte à droite ---------- */
.hs-frame {
width: min(1200px, calc(100% - 112px));
margin-inline: auto;
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 6.4fr);
gap: 72px;
align-items: center;
}
.hs-kicker {
display: inline-flex; align-items: center; gap: 10px;
margin: 0 0 16px;
font: 700 12px/1.5 UckHsDM, 'DM Sans', Arial, sans-serif;
letter-spacing: .14em; text-transform: uppercase;
color: var(--hs-kicker);
}
/* 10/11 (Kevin, via LEAD) : plus de tiret devant les sur-titres ; le texte reste. */
.hs-titre {
margin: 0;
font: 700 46px/1.08 UckHsJakarta, 'Plus Jakarta Sans', Arial, sans-serif;
letter-spacing: -.035em;
color: var(--hs-titre);
text-wrap: balance;
}
.hs-chapo { margin: 18px 0 0; max-width: 40ch; font-size: 18px; line-height: 1.55; color: var(--hs-texte); }
/* ---------- La liste ---------- */
.hs-points { list-style: none; margin: 36px 0 0; padding: 0; }
.hs-point { position: relative; border-top: 1px solid var(--hs-ligne); }
.hs-point:last-child { border-bottom: 1px solid var(--hs-ligne); }
.hs-point h3 { margin: 0; font: inherit; }
.hs-bouton {
display: flex; align-items: center; gap: 14px;
inline-size: 100%;
padding: 18px 0;
border: 0; background: none; cursor: pointer; text-align: start;
font: 700 19px/1.3 UckHsJakarta, 'Plus Jakarta Sans', Arial, sans-serif;
letter-spacing: -.015em;
color: var(--hs-replie);
transition: color .3s ease;
}
.hs-bouton:hover { color: var(--hs-actif); }
.hs-bouton:focus-visible { outline: 3px solid var(--hs-barre); outline-offset: 4px; border-radius: 6px; }
.hs-point.is-actif .hs-bouton { color: var(--hs-actif); padding-bottom: 8px; }
/* La marque du point : numéro d'étape ou icône d'outil */
.hs-marque {
display: grid; place-items: center; flex: 0 0 34px;
inline-size: 34px; block-size: 34px; border-radius: 10px;
font: 700 12px/1 UckHsDM, 'DM Sans', Arial, sans-serif; letter-spacing: .04em;
color: currentColor; background: transparent;
box-shadow: inset 0 0 0 1.5px currentColor;
transition: background-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.hs-marque svg { inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hs-point.is-actif .hs-marque { background: var(--hs-marque-fond); color: var(--hs-marque); box-shadow: none; }
.hs--lime .hs-point.is-actif .hs-marque, .hs--lavande .hs-point.is-actif .hs-marque { background: var(--b-blue); color: #fff; }
/* Le dépli : une ligne de grille qui passe de 0 à sa hauteur ; replié, il sort de l'arbre d'accessibilité */
.hs-detail {
display: grid; grid-template-rows: 0fr;
visibility: hidden;
transition: grid-template-rows .45s cubic-bezier(.2,.7,.2,1), visibility 0s linear .45s;
}
.hs-detail > div { overflow: hidden; min-block-size: 0; }
.hs-detail p { margin: 0; padding: 0 0 20px 48px; max-width: 46ch; color: var(--hs-texte); font-size: 16px; line-height: 1.6; }
.hs-point.is-actif .hs-detail { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .45s cubic-bezier(.2,.7,.2,1), visibility 0s; }
.hs-lien {
display: inline-flex; align-items: center; gap: 6px;
margin: -8px 0 20px 48px;
font: 600 14px/1.3 UckHsDM, 'DM Sans', Arial, sans-serif;
color: var(--b-blue); text-decoration: none;
border-bottom: 1.5px solid currentColor;
}
.hs--bleu .hs-lien { color: var(--b-lime); }
.hs-lien:hover { border-bottom-color: transparent; }
.hs-lien:focus-visible { outline: 3px solid var(--hs-barre); outline-offset: 3px; border-radius: 3px; }
/* La barre de progression : posée sur le filet du bas du point actif */
.hs-barre { position: absolute; inset: auto 0 -1px 0; block-size: 2px; overflow: hidden; pointer-events: none; }
.hs-barre i { display: block; block-size: 100%; background: var(--hs-barre); transform: scaleX(0); transform-origin: left center; }
.hs-point.is-actif .hs-barre i { transform: scaleX(1); }
.hs-point.is-actif.is-joue .hs-barre i { transform: scaleX(0); animation: hs-barre var(--hs-duree, 6000ms) linear forwards; }
.hs.is-pause .hs-point.is-actif.is-joue .hs-barre i { animation-play-state: paused; }
@keyframes hs-barre { to { transform: scaleX(1); } }
/* ---------- Les cartes : empilées dans la même case, fondu croisé ---------- */
.hs-cartes {
position: relative;
display: grid;
align-items: center;
}
.hs-carte {
grid-area: 1 / 1;
min-inline-size: 0;
opacity: 0;
transform: scale(.985);
visibility: hidden;
transition: opacity .55s ease, transform .7s cubic-bezier(.2,.7,.2,1), visibility 0s linear .55s;
}
.hs-carte.is-actif { opacity: 1; transform: none; visibility: visible; transition: opacity .55s ease, transform .7s cubic-bezier(.2,.7,.2,1), visibility 0s; }
.hs-carte > .hb { display: block; inline-size: 100%; }
/* Un emplacement vide garde la taille des cartes (6/5, puis 4/5 sous 400 px) sur un fond V4 pâle. */
.hs-carte > .hb:empty { aspect-ratio: 6 / 5; border-radius: 28px; background: var(--hs-vide); box-shadow: inset 0 0 0 1px #ffffffcc; }
/* ---------- Épinglage au défilement (posé par sections.mjs, grand écran seulement) ---------- */
.hs.hs--epingle { block-size: var(--hs-hauteur); }
.hs.hs--epingle .hs-inner { position: sticky; top: 0; min-block-size: 100vh; display: grid; align-items: center; }
/* ---------- Tablette ---------- */
@media (max-width: 1100px) {
.hs-frame { gap: 48px; width: calc(100% - 64px); }
.hs-titre { font-size: 40px; }
}
/* ---------- Mobile : la carte passe sous la liste ---------- */
@media (max-width: 900px) {
.hs { --hs-pad: 64px; }
.hs-frame { grid-template-columns: minmax(0, 1fr); gap: 32px; width: calc(100% - 48px); }
.hs-titre { font-size: 32px; line-height: 1.12; }
.hs-chapo { font-size: 16px; margin-top: 14px; }
.hs-points { margin-top: 24px; }
.hs-bouton { font-size: 17px; padding: 15px 0; gap: 12px; }
.hs-marque { flex-basis: 30px; inline-size: 30px; block-size: 30px; border-radius: 9px; }
.hs-marque svg { inline-size: 18px; block-size: 18px; }
.hs-detail p { padding-left: 42px; font-size: 15px; }
.hs-lien { margin-left: 42px; }
}
@media (max-width: 400px) {
.hs-carte > .hb:empty { aspect-ratio: 4 / 5; border-radius: 20px; }
}
/* ---------- Mouvement réduit : ni barre animée ni fondu ; le clic change toujours de point ---------- */
@media (prefers-reduced-motion: reduce) {
.hs-bouton, .hs-marque, .hs-detail, .hs-point.is-actif .hs-detail, .hs-carte, .hs-carte.is-actif { transition: none; }
.hs-carte { transform: none; }
.hs-point.is-actif.is-joue .hs-barre i { animation: none; transform: scaleX(1); }
}
/* La carte Handoff (boucle « court ») prend la hauteur des cartes d'outils (6/5, puis 4/5 sous 400 px) :
passer d'un outil à l'autre ne change pas la taille de la carte. */
.hs-carte > .hb[data-handoff-boucle="court"] .hb-stage { aspect-ratio: 6 / 5; }
@container hb (max-width: 400px) {
.hs-carte > .hb[data-handoff-boucle="court"] .hb-stage { aspect-ratio: 4 / 5; }
}
/* ---------- ② How it works : la rangée des trois cartes qui s'élargissent (etapes.css), sous le titre ---------- */
/* Une colonne : le sur-titre et le titre au-dessus, la rangée .uck-etapes en dessous. La section tient dans 1440 × 900. */
.hs.hs--etapes { --hs-pad: 56px; }
.hs--etapes .hs-frame { display: block; }
.hs--etapes .hs-tete { margin: 0 0 32px; }
.hs--etapes .hs-kicker { margin-bottom: 12px; }
@media (max-width: 900px) {
.hs.hs--etapes { --hs-pad: 56px; }
.hs--etapes .hs-tete { margin-bottom: 24px; }
}
/* T3-A (Kevin, 10/11 16:3x, via LEAD) : la section tient l'écran (100svh), contenu centré verticalement ; en-tête centré
(sur-titre, titre, deux lignes de texte) ; la rangée prend 1320 px au plus (cartes repliées deux fois plus larges). */
.hs--etapes .hs-inner { min-block-size: 100svh; display: grid; align-content: center; padding-block: 40px; }
.hs--etapes .hs-frame { width: min(1320px, calc(100% - 112px)); }
.hs--etapes .hs-tete { text-align: center; }
.hs--etapes .hs-titre { margin-inline: auto; }
.hs--etapes .hs-chapo { max-width: 62ch; margin: 14px auto 0; text-wrap: balance; }
@media (min-width: 761px) { .hs--etapes .hs-chapo > span { display: block; } }
@media (max-width: 1100px) { .hs--etapes .hs-frame { width: calc(100% - 64px); } }
@media (max-width: 900px) {
.hs--etapes .hs-inner { padding-block: 56px; }
.hs--etapes .hs-frame { width: calc(100% - 48px); }
}