/**
 * HelloBiz : la montée en charge.
 *
 * Feuille chargée par template-parts/home-venture.php seulement. Tout est
 * scopé sous .dn-venture, aucune règle ne peut atteindre un autre média.
 *
 * Signature de la composition : le board ne se lit pas en lignes mais en
 * blocs qui s'élargissent. Chaque cran occupe une portée plus longue que le
 * précédent sur une grille de douze, et le filet qui le ferme s'allonge
 * d'autant. L'escalier de filets qui en résulte est le dessin de la page.
 *
 * Deuxième règle de maison, tenue partout : une image de cette home est
 * toujours une bande de hauteur constante, jamais une vignette de largeur
 * fixe posée en tête de ligne.
 *
 * Contrastes relevés sur la charte HelloBiz, ratio par ratio :
 *   encre #171717 sur papier #ffffff ............ 17,93:1
 *   encre #171717 sur papier studio #f2f8f4 ..... 16,65:1
 *   encre #171717 sur ambre #f6a800 ............. 8,98:1
 *   encre #171717 sur vert #00c66b .............. 7,93:1
 *   papier #ffffff sur encre #171717 ............ 17,93:1
 *   vert #00c66b sur encre #171717 .............. 7,93:1
 *   gris de service #59635d sur papier .......... 6,24:1
 *   gris de service #59635d sur papier studio ... 5,79:1
 *   lede du masthead, papier à 78 % sur encre ... 10,61:1
 *   encre profonde #0f3d27 sur vert ............. 5,41:1
 *   dateline, ambre #f6a800 sur encre ........... 8,98:1
 *   dateline, papier a 78 % sur encre ........... 11,16:1
 * L'ambre n'ouvre plus la page en bandeau : HelloBiz n'en a pas. Il tient
 * l'edition dans la dateline de l'affiche, ou il est pose sur l'encre et non
 * sur le papier, a 8,98:1.
 *
 * Deux valeurs sont donc interdites en couleur de texte sur papier, et la
 * feuille ne les emploie qu'en aplat, en filet ou en pastille :
 *   ambre #f6a800 sur papier .................... 2,00:1  (1,86:1 sur studio)
 *   vert  #00c66b sur papier .................... 2,26:1
 */

.dn-venture {
    --v-ink: var(--dn-ink, #171717);
    --v-paper: var(--dn-paper, #ffffff);
    --v-studio: var(--dn-paper-soft, #f2f8f4);
    --v-green: var(--dn-accent, #00c66b);
    --v-amber: var(--dn-accent-2, #f6a800);
    --v-line: var(--dn-line, #c8d8cf);
    --v-muted: var(--dn-muted, #59635d);
    --v-band: clamp(112px, 13vw, 176px);
    overflow: clip;
    color: var(--v-ink);
    background: var(--v-paper);
    font-family: var(--dn-body, Inter, ui-sans-serif, system-ui, sans-serif);
}
.dn-venture *, .dn-venture *::before, .dn-venture *::after { box-sizing: border-box; }
.dn-venture .dn-shell { width: min(1220px, calc(100% - 48px)); margin-inline: auto; }
.dn-venture :is(h1, h2, h3, p, ol, ul) { margin-top: 0; }
.dn-venture :is(article, aside, div, header, section, nav) { min-width: 0; }
.dn-venture :is(h1, h2, h3, p, a, strong, time) { overflow-wrap: anywhere; }
.dn-venture a { color: inherit; text-decoration: none; }
.dn-venture a:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.dn-venture i { font-style: normal; }
.dn-venture .dn-cover { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .3s ease; }
.dn-venture a:hover .dn-cover { opacity: .86; }
.dn-venture .dn-image-placeholder { display: block; width: 100%; height: 100%; background: repeating-linear-gradient(135deg, var(--v-studio) 0 10px, var(--v-paper) 10px 20px); }
.dn-venture :is(h2, h3) a { transition: color .2s ease; }

/* Vocabulaire commun --------------------------------------------------- */

.dn-venture .dn-category { display: inline-flex; gap: 8px; align-items: center; color: var(--v-ink); font-size: 10px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.dn-venture .dn-category::before { width: 7px; height: 7px; flex: 0 0 7px; background: var(--v-green); content: ""; }
.dn-venture .dn-venture-tag { display: inline-block; margin-bottom: 0; padding: 5px 10px 4px; color: var(--v-ink); background: var(--v-amber); font-size: 9px; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.dn-venture .dn-meta { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; margin-bottom: 0; color: var(--v-muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.dn-venture .dn-meta a { color: var(--v-ink); border-bottom: 2px solid var(--v-green); }
.dn-venture .dn-meta a:hover { border-bottom-color: var(--v-ink); }

/* Le masthead est une affiche d'encre, en une seule colonne. ------------
   HelloBiz n'a pas de bandeau d'édition : l'affiche ouvre la page. Ce qu'une
   bande aurait porté se replie dans la dateline, une seule ligne courante au
   pied de l'affiche, jamais une cellule justifiée à trois zones. */

.dn-venture-mast { color: var(--v-paper); background: var(--v-ink); }
.dn-venture-mast__inner { display: grid; grid-template-columns: minmax(0, 1fr); padding-top: clamp(52px, 7vw, 108px); padding-bottom: clamp(38px, 4.6vw, 66px); }
.dn-venture-mast__eyebrow { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin-bottom: 26px; color: var(--v-paper); font-size: 10px; font-weight: 850; letter-spacing: .18em; text-transform: uppercase; }
.dn-venture-mast__eyebrow span { color: var(--v-green); }
.dn-venture-mast h1 { max-width: 17ch; margin-bottom: 30px; color: var(--v-paper); font-family: var(--dn-display, Inter, ui-sans-serif, system-ui, sans-serif); font-size: clamp(44px, 8.2vw, 116px); font-weight: 850; letter-spacing: -.05em; line-height: .88; }
.dn-venture-mast h1 em { color: var(--v-paper); padding-bottom: .05em; background-image: linear-gradient(var(--v-green), var(--v-green)); background-position: 0 94%; background-repeat: no-repeat; background-size: 100% .09em; font-style: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.dn-venture-mast__lede { max-width: 56ch; margin-bottom: 0; color: color-mix(in srgb, var(--v-paper) 78%, var(--v-ink)); font-size: clamp(16px, 1.6vw, 21px); line-height: 1.58; }
/* Dateline : l'édition en ambre (8,98:1 sur l'encre), puis la promesse et la
   date, tout en une seule ligne courante qui se replie d'elle-même. */
.dn-venture-mast__dateline { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; margin: clamp(30px, 3.4vw, 46px) 0 0; padding-top: 18px; border-top: 2px solid color-mix(in srgb, var(--v-paper) 26%, var(--v-ink)); font-size: 10px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.dn-venture-mast__dateline b { color: var(--v-amber); font-weight: 850; }
.dn-venture-mast__dateline span { color: color-mix(in srgb, var(--v-paper) 78%, var(--v-ink)); }
.dn-venture-mast__dateline time { color: color-mix(in srgb, var(--v-paper) 78%, var(--v-ink)); font-variant-numeric: tabular-nums; }

/* Le fil des trois temps : une ligne, trois arrêts, un filet qui épaissit. */

.dn-venture-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding-bottom: clamp(26px, 3vw, 40px); }
.dn-venture-track a { display: grid; grid-template-columns: 13px auto minmax(0, auto) minmax(14px, 1fr); gap: 0 12px; align-items: center; padding: 22px 0; }
.dn-venture-track a::after { height: 2px; background: color-mix(in srgb, var(--v-paper) 40%, var(--v-ink)); content: ""; }
.dn-venture-track a:nth-child(2)::after { height: 4px; background: var(--v-green); }
.dn-venture-track a:last-child::after { display: none; }
.dn-venture-track i { width: 13px; height: 13px; background: var(--v-paper); border-radius: 50%; transition: background-color .2s ease; }
.dn-venture-track span { color: var(--v-green); font-size: 10px; font-weight: 850; letter-spacing: .1em; }
.dn-venture-track strong { font-size: clamp(13px, 1.3vw, 16px); font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.dn-venture-track a:hover i { background: var(--v-green); }
.dn-venture-track a:hover strong { color: var(--v-green); }

/* Têtes de section ------------------------------------------------------ */

.dn-venture-head { display: grid; grid-template-columns: minmax(0, 1fr); padding-top: clamp(48px, 6vw, 92px); padding-bottom: clamp(24px, 3vw, 40px); }
.dn-venture-eyebrow { display: flex; flex-wrap: wrap; gap: 13px; align-items: center; margin-bottom: 16px; color: var(--v-ink); font-size: 11px; font-weight: 850; letter-spacing: .17em; text-transform: uppercase; }
.dn-venture-eyebrow span { display: grid; place-items: center; min-width: 36px; height: 27px; padding-inline: 6px; color: var(--v-ink); background: var(--v-green); font-size: 11px; }
.dn-venture-head h2 { margin-bottom: 0; font-family: var(--dn-display, Inter, ui-sans-serif, system-ui, sans-serif); font-size: clamp(32px, 4.8vw, 68px); font-weight: 850; letter-spacing: -.05em; line-height: .93; }
.dn-venture-head__note { max-width: 58ch; margin: 22px 0 0; color: var(--v-muted); font-size: clamp(14px, 1.3vw, 17px); line-height: 1.55; }
.dn-venture-head--index .dn-venture-eyebrow span { min-width: 15px; width: 15px; height: 15px; padding-inline: 0; color: transparent; }

/* Étape 01 : l'ouverture, sur papier. ---------------------------------- */

.dn-venture-open { background: var(--v-paper); border-top: 1px solid var(--v-line); }
.dn-venture-lead { display: grid; grid-template-columns: minmax(0, 1fr); }
.dn-venture-lead__media { display: block; overflow: hidden; order: 1; height: clamp(230px, 30vw, 420px); background: var(--v-studio); border: 1px solid var(--v-line); }
.dn-venture-lead__body { order: 2; padding-top: clamp(22px, 2.6vw, 34px); }
.dn-venture-lead__body .dn-category { display: inline-flex; margin-top: 18px; }
.dn-venture-lead__body h3 { margin: 14px 0 18px; max-width: 20ch; font-family: var(--dn-display, Inter, ui-sans-serif, system-ui, sans-serif); font-size: clamp(30px, 4.6vw, 66px); font-weight: 850; letter-spacing: -.05em; line-height: .96; }
.dn-venture-lead__intro { max-width: 62ch; margin-bottom: 22px; color: var(--v-muted); font-size: clamp(15px, 1.45vw, 18px); line-height: 1.62; }
.dn-venture-lead h3 a:hover { color: var(--v-muted); }

.dn-venture-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 3vw, 44px); margin-top: clamp(42px, 5vw, 72px); padding-bottom: clamp(56px, 7vw, 104px); }
.dn-venture-notes > .dn-venture-eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.dn-venture-notes > .dn-venture-eyebrow span { display: grid; place-items: center; min-width: 15px; width: 15px; height: 15px; padding-inline: 0; color: transparent; }
.dn-venture-notes > article { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; padding-top: 20px; border-top: 3px solid var(--v-ink); }
.dn-venture-notes__media { display: block; overflow: hidden; height: clamp(140px, 16vw, 208px); background: var(--v-studio); border: 1px solid var(--v-line); }
.dn-venture-notes > article > div { padding-top: 18px; }
.dn-venture-notes .dn-venture-tag { margin-bottom: 12px; }
.dn-venture-notes .dn-category { display: block; margin-bottom: 8px; }
.dn-venture-notes h3 { margin: 8px 0 12px; font-size: clamp(19px, 2vw, 27px); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; }
.dn-venture-notes h3 a:hover { color: var(--v-muted); }
.dn-venture-notes time { color: var(--v-muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

/* Étape 02 : l'escalier de filets. ------------------------------------- */

.dn-venture-build { background: var(--v-studio); border-top: 1px solid var(--v-line); }
.dn-venture-ladder { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); padding-bottom: clamp(56px, 7vw, 104px); }
.dn-venture-step { display: grid; grid-template-columns: minmax(0, 1fr); grid-column: 1 / span 12; align-content: start; padding: clamp(22px, 2.4vw, 32px) 0 clamp(26px, 2.8vw, 38px); border-bottom: 3px solid var(--v-ink); }
.dn-venture-step:nth-child(1) { grid-column: 1 / span 7; }
.dn-venture-step:nth-child(2) { grid-column: 1 / span 8; }
.dn-venture-step:nth-child(3) { grid-column: 1 / span 9; }
.dn-venture-step:nth-child(4) { grid-column: 1 / span 10; }
.dn-venture-step:nth-child(5) { grid-column: 1 / span 11; }
.dn-venture-step:nth-child(6) { grid-column: 1 / span 12; }
.dn-venture-step__media { display: block; overflow: hidden; order: 1; height: var(--v-band); background: var(--v-paper); border: 1px solid var(--v-line); }
.dn-venture-step__index { order: 2; justify-self: start; margin-top: 20px; }
.dn-venture-step__body { order: 3; padding-top: 14px; }
.dn-venture-step__body .dn-category { display: block; margin-bottom: 10px; }
.dn-venture-step__body h3 { margin: 0 0 12px; font-family: var(--dn-display, Inter, ui-sans-serif, system-ui, sans-serif); font-size: clamp(21px, 2.4vw, 34px); font-weight: 800; letter-spacing: -.04em; line-height: 1.04; }
.dn-venture-step__body h3 a:hover { color: var(--v-muted); }
.dn-venture-step__body time { color: var(--v-muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.dn-venture-step__go { order: 4; justify-self: start; margin-top: 18px; padding-bottom: 3px; color: var(--v-ink); border-bottom: 2px solid var(--v-green); font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.dn-venture-step__go:hover { border-bottom-color: var(--v-ink); }

/* Étape 03 : l'impact, en aplat vert. ---------------------------------- */

.dn-venture-impact { color: var(--v-ink); background: var(--v-green); }
.dn-venture-impact .dn-venture-eyebrow span { color: var(--v-green); background: var(--v-ink); }
.dn-venture-impact .dn-venture-head__note { color: #0f3d27; }
.dn-venture-terrains { display: grid; padding-bottom: clamp(52px, 6.5vw, 96px); border-top: 3px solid var(--v-ink); }
.dn-venture-terrains a { display: grid; grid-template-columns: 46px minmax(0, 1fr) 26px; gap: 16px; align-items: center; min-height: 76px; border-bottom: 1px solid color-mix(in srgb, var(--v-ink) 42%, transparent); transition: padding-left .22s ease, background-color .22s ease; }
.dn-venture-terrains a:hover { padding-left: 12px; background: color-mix(in srgb, var(--v-ink) 10%, transparent); }
.dn-venture-terrains span { font-size: 10px; font-weight: 850; letter-spacing: .1em; }
.dn-venture-terrains strong { font-size: clamp(18px, 2vw, 28px); font-weight: 850; letter-spacing: -.025em; text-transform: uppercase; }
.dn-venture-terrains i { text-align: right; }

/* Le fil, index de clôture. -------------------------------------------- */

.dn-venture-thread { padding-bottom: clamp(64px, 8vw, 116px); }
.dn-venture-thread__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(30px, 5vw, 72px); border-top: 3px solid var(--v-ink); }
.dn-venture-thread__list > article { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 22px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--v-line); }
.dn-venture-thread__list h3 { margin: 9px 0 0; font-size: clamp(18px, 1.75vw, 25px); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; }
.dn-venture-thread__list h3 a:hover { color: var(--v-muted); }
.dn-venture-thread__list time { color: var(--v-muted); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }

/* Effondrements -------------------------------------------------------- */

@media (max-width: 1024px) {
    .dn-venture-step:nth-child(1) { grid-column: 1 / span 9; }
    .dn-venture-step:nth-child(2) { grid-column: 1 / span 10; }
    .dn-venture-step:nth-child(3) { grid-column: 1 / span 10; }
    .dn-venture-step:nth-child(4) { grid-column: 1 / span 11; }
    .dn-venture-step:nth-child(5) { grid-column: 1 / span 11; }
    .dn-venture-track a { gap: 0 10px; }
}

@media (max-width: 768px) {
    .dn-venture .dn-shell { width: min(1220px, calc(100% - 40px)); }
    .dn-venture-mast h1 { max-width: none; }
    .dn-venture-mast__dateline { gap: 6px 14px; font-size: 9px; }
    /* Le fil des temps se redresse : trois lignes empilées, plus de filet
       horizontal à tirer entre les arrêts. */
    .dn-venture-track { grid-auto-flow: row; grid-auto-columns: auto; }
    .dn-venture-track a { grid-template-columns: 13px auto minmax(0, 1fr); padding: 14px 0; border-top: 1px solid color-mix(in srgb, var(--v-paper) 26%, var(--v-ink)); }
    .dn-venture-track a::after { display: none; }
    .dn-venture-lead__media { height: clamp(190px, 42vw, 280px); }
    .dn-venture-notes { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    /* Toutes les portées tombent à la pleine largeur : l'escalier ne se lit
       plus en largeur, il ne reste que la cadence des filets. */
    .dn-venture-ladder { grid-template-columns: minmax(0, 1fr); }
    .dn-venture-step:nth-child(1),
    .dn-venture-step:nth-child(2),
    .dn-venture-step:nth-child(3),
    .dn-venture-step:nth-child(4),
    .dn-venture-step:nth-child(5),
    .dn-venture-step:nth-child(6) { grid-column: 1 / -1; }
    .dn-venture-step { border-bottom-width: 2px; }
    .dn-venture-thread__list { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 390px) {
    .dn-venture .dn-shell { width: min(1220px, calc(100% - 32px)); }
    .dn-venture-mast h1 { letter-spacing: -.04em; }
    .dn-venture-mast__dateline { font-size: 8px; letter-spacing: .1em; }
    .dn-venture-mast__eyebrow { gap: 4px 8px; letter-spacing: .12em; }
    .dn-venture-lead__media { height: 190px; }
    .dn-venture-notes__media { height: 148px; }
    .dn-venture-step { --v-band: 132px; }
    .dn-venture-terrains a { grid-template-columns: 34px minmax(0, 1fr) 18px; gap: 12px; min-height: 66px; }
    .dn-venture-thread__list > article { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
    .dn-venture .dn-cover,
    .dn-venture :is(h2, h3) a,
    .dn-venture-track i,
    .dn-venture-terrains a { transition: none; }
    .dn-venture a:hover .dn-cover { opacity: 1; }
    .dn-venture-terrains a:hover { padding-left: 0; }
}