/**
 * Vivre Demain field-transect homepage.
 *
 * The sheet is loaded by template-parts/home-field.php only. Every rule is
 * scoped to .dn-field so the composition cannot reach another fleet site,
 * and every colour comes from the reviewed profile tokens.
 *
 * Signature: numbered markers set on a continuous survey rule. The rule runs
 * down the left margin from the first station to the end of the register.
 *
 * Geometrie du carnet ouvert. Une entree n est pas une ligne a cellules
 * fixes : c est un bloc pleine mesure ouvert par un grand quantieme pose sur
 * la ligne de base, suivi du titre. Aucune vignette de largeur fixe n y
 * figure, le carnet s ecrit. Les images de la page tiennent a la station 01,
 * sur la plaque de tete et sur les releves associes, montes en blocs.
 *
 * Contrastes releves sur la charte Vivre Demain, ratio par ratio :
 *   encre #24321d sur papier #ffffff ............... 13,56:1
 *   encre #24321d sur papier tendre #f4f8eb ........ 12,57:1
 *   papier #ffffff sur encre #24321d ............... 13,56:1
 *   vert fonce #3f712d sur papier .................. 5,82:1
 *   vert fonce #3f712d sur papier tendre ........... 5,39:1
 *   gris de service #607054 sur papier ............. 5,33:1
 *   gris de service #607054 sur papier tendre ...... 4,94:1
 *   vert clair #8dbb2d sur encre ................... 5,99:1
 *   bandeau, edition #24321d sur papier tendre ..... 12,57:1
 *   bandeau, date #607054 sur papier tendre ........ 4,94:1
 * La graduation du decametre emploie le trait de charte #c9d9ad, 1,39:1 sur
 * le papier tendre : c est un filet, jamais du texte.
 *   filet #c9d9ad sur encre ........................ 9,05:1
 * Une seule valeur est interdite en couleur de texte sur papier, et la
 * feuille ne l emploie qu en pastille ou sur l encre :
 *   vert clair #8dbb2d sur papier .................. 2,26:1
 */

.diginov-media .dn-field {
    --dn-field-pad: clamp(54px, 6.4vw, 86px);
    --dn-field-marge: 78px;
    --dn-field-gutter: clamp(26px, 3.2vw, 44px);
    background: var(--dn-paper);
    font-family: var(--dn-body);
}

.diginov-media .dn-field :is(h1, h2, h3, p, strong, time) {
    overflow-wrap: anywhere;
}

.diginov-media .dn-field a:focus-visible {
    outline: 3px solid var(--dn-ink);
    outline-offset: 3px;
}

.diginov-media .dn-field-log,
.diginov-media .dn-field-eyebrow,
.diginov-media .dn-field-plan__label,
.diginov-media .dn-field-plan__count {
    margin: 0;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

/* Running edition strip: un decametre de terrain -----------------------------
   Pas de bande justifiee a trois zones. Les deux libelles se tassent a
   l origine du releve, la bande graduee court sur toute la mesure restante et
   la date se lit a l autre extremite. La graduation est un ornement de filet,
   jamais du texte : elle emploie --dn-line, la valeur de trait de la charte. */

.diginov-media .dn-field-strip {
    color: var(--dn-ink);
    background: var(--dn-paper-soft);
    border-bottom: 1px solid var(--dn-line);
}

.diginov-media .dn-field-strip__inner {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    min-height: 44px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.diginov-media .dn-field-strip__tape {
    display: block;
    height: 9px;
    background-image: repeating-linear-gradient(
        90deg,
        var(--dn-line) 0 1px,
        transparent 1px 12px
    );
    border-bottom: 1px solid var(--dn-line);
}

.diginov-media .dn-field-strip p,
.diginov-media .dn-field-strip time {
    margin: 0;
}

.diginov-media .dn-field-strip p:first-child {
    display: flex;
    gap: 10px;
    align-items: center;
}

.diginov-media .dn-field-strip p:first-child span {
    width: 8px;
    height: 8px;
    background: var(--dn-accent);
    border-radius: 2px;
}

.diginov-media .dn-field-strip p:nth-child(2) {
    color: var(--dn-muted);
    text-align: left;
}

.diginov-media .dn-field-strip time {
    color: var(--dn-muted);
    text-align: right;
}

/* Masthead ----------------------------------------------------------------- */

.diginov-media .dn-field-mast {
    border-bottom: 1px solid var(--dn-line);
}

.diginov-media .dn-field-mast__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(200px, 0.5fr);
    grid-template-areas:
        "copy relief"
        "marks marks";
    gap: clamp(44px, 5vw, 72px) clamp(30px, 4vw, 60px);
    padding-top: clamp(58px, 6.6vw, 96px);
    padding-bottom: clamp(46px, 5vw, 70px);
}

.diginov-media .dn-field-mast__copy {
    grid-area: copy;
    align-self: center;
}

.diginov-media .dn-field-mast .dn-kicker {
    color: var(--dn-accent-2);
}

.diginov-media .dn-field-mast h1 {
    max-width: 15ch;
    margin: 16px 0 24px;
    color: var(--dn-ink);
    font-family: var(--dn-display);
    font-size: clamp(46px, 7.4vw, 100px);
    font-weight: 700;
    line-height: 0.94;
    letter-spacing: -0.04em;
}

.diginov-media .dn-field-mast h1 em {
    color: var(--dn-accent-2);
}

.diginov-media .dn-field-mast__lede {
    max-width: 60ch;
    margin: 0 0 18px;
    color: var(--dn-ink);
    font-size: clamp(16px, 1.6vw, 20px);
    line-height: 1.6;
}

.diginov-media .dn-field-mast__method {
    max-width: 52ch;
    margin: 0;
    padding-top: 16px;
    color: var(--dn-muted);
    border-top: 1px solid var(--dn-line);
    font-size: 14px;
    line-height: 1.6;
}

.diginov-media .dn-field-relief {
    position: relative;
    grid-area: relief;
    align-self: center;
    justify-self: end;
    width: min(23vw, 250px);
    aspect-ratio: 1;
}

.diginov-media .dn-field-relief span {
    position: absolute;
    border: 1px solid var(--dn-line);
    border-radius: 50%;
}

.diginov-media .dn-field-relief span:nth-child(1) {
    inset: 2% 5% 7% 0;
    transform: rotate(-11deg);
}

.diginov-media .dn-field-relief span:nth-child(2) {
    inset: 15% 27% 21% 7%;
    transform: rotate(-5deg);
}

.diginov-media .dn-field-relief span:nth-child(3) {
    inset: 31% 45% 33% 15%;
    border-color: color-mix(in srgb, var(--dn-accent-2) 42%, transparent);
}

.diginov-media .dn-field-relief span:nth-child(4) {
    inset: 43% 57% 43% 25%;
    border-color: color-mix(in srgb, var(--dn-accent-2) 60%, transparent);
}

.diginov-media .dn-field-relief i {
    position: absolute;
    top: 47%;
    left: 28%;
    width: 11px;
    height: 11px;
    background: var(--dn-accent);
    border-radius: 2px;
}

.diginov-media .dn-field-relief small {
    position: absolute;
    right: 0;
    bottom: 0;
    color: var(--dn-muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.diginov-media .dn-field-marks {
    display: grid;
    grid-area: marks;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px clamp(24px, 3vw, 46px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.diginov-media .dn-field-marks li {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 18px;
    border-top: 2px solid var(--dn-ink);
}

.diginov-media .dn-field-marks li::before {
    content: "";
    width: 9px;
    height: 9px;
    margin-top: -23px;
    background: var(--dn-accent);
    border-radius: 2px;
}

.diginov-media .dn-field-marks span {
    color: var(--dn-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.diginov-media .dn-field-marks strong {
    color: var(--dn-ink);
    font-family: var(--dn-display);
    font-size: clamp(19px, 2vw, 26px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

/* Plan of the survey ------------------------------------------------------- */

.diginov-media .dn-field-plan {
    background: var(--dn-paper-soft);
    border-bottom: 1px solid var(--dn-line);
}

.diginov-media .dn-field-plan__inner {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: 18px clamp(28px, 3.4vw, 52px);
    align-items: start;
    padding: clamp(26px, 3vw, 38px) 0 clamp(30px, 3.4vw, 42px);
}

.diginov-media .dn-field-plan__label {
    color: var(--dn-accent-2);
    padding-top: 20px;
}

.diginov-media .dn-field-plan ol {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0 clamp(18px, 2.4vw, 34px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.diginov-media .dn-field-plan li a {
    display: grid;
    gap: 9px;
    align-content: start;
    padding: 18px 0 4px;
    border-top: 2px solid var(--dn-ink);
}

.diginov-media .dn-field-plan li i {
    width: 9px;
    height: 9px;
    margin-top: -23px;
    background: var(--dn-ink);
    border-radius: 2px;
    transition: background-color 180ms ease;
}

.diginov-media .dn-field-plan li span {
    color: var(--dn-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.diginov-media .dn-field-plan li strong {
    color: var(--dn-ink);
    font-family: var(--dn-display);
    font-size: clamp(16px, 1.6vw, 19px);
    font-weight: 700;
    line-height: 1.2;
}

.diginov-media .dn-field-plan li a:hover i {
    background: var(--dn-accent-2);
}

.diginov-media .dn-field-plan li a:hover strong {
    color: var(--dn-accent-2);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.diginov-media .dn-field-plan__count {
    grid-column: 2;
    color: var(--dn-muted);
}

/* Station chrome ----------------------------------------------------------- */

/* Chaque station est la cible d une ancre du plan du releve : le titre ne
   doit pas venir se coller au bord haut de la fenetre a l arrivee. */
.diginov-media .dn-field-station {
    scroll-margin-top: clamp(12px, 6vw, 72px);
}

.diginov-media .dn-field-station__inner,
.diginov-media .dn-field-close__inner {
    display: grid;
    grid-template-columns: var(--dn-field-marge) minmax(0, 1fr);
    column-gap: var(--dn-field-gutter);
}

.diginov-media .dn-field-marge {
    display: flex;
    justify-content: flex-end;
    padding-top: var(--dn-field-pad);
    border-right: 1px solid var(--dn-line);
}

.diginov-media .dn-field-borne {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-right: -18px;
    color: var(--dn-paper);
    background: var(--dn-ink);
    border-radius: var(--dn-radius);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.diginov-media .dn-field-station__body {
    padding-block: var(--dn-field-pad);
}

.diginov-media .dn-field-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    gap: 14px clamp(24px, 3vw, 48px);
    align-items: end;
    padding-bottom: 18px;
    border-bottom: 2px solid var(--dn-ink);
}

.diginov-media .dn-field-eyebrow {
    color: var(--dn-accent-2);
}

.diginov-media .dn-field-eyebrow span {
    color: var(--dn-ink);
}

.diginov-media .dn-field-head h2 {
    margin: 12px 0 0;
    color: var(--dn-ink);
    font-family: var(--dn-display);
    font-size: clamp(30px, 3.6vw, 48px);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.035em;
}

.diginov-media .dn-field-head > strong,
.diginov-media .dn-field-head > p {
    margin: 0;
    max-width: 46ch;
    color: var(--dn-muted);
    font-size: 13px;
    line-height: 1.6;
    text-align: right;
}

.diginov-media .dn-field-head > strong {
    font-weight: 800;
    font-size: 10px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.diginov-media .dn-field-log {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 16px;
    align-items: center;
    color: var(--dn-muted);
}

.diginov-media .dn-field-log time {
    font-weight: 700;
}

/* Station 01: leading observation ------------------------------------------ */

.diginov-media .dn-field-observation {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(230px, 0.8fr);
    column-gap: clamp(28px, 3.2vw, 48px);
    margin-top: clamp(30px, 3.4vw, 44px);
}

.diginov-media .dn-field-lead__media,
.diginov-media .dn-field-related__media {
    display: block;
    overflow: hidden;
    background: var(--dn-paper-soft);
    border: 1px solid var(--dn-line);
    border-radius: var(--dn-radius);
}

.diginov-media .dn-field-lead__media {
    aspect-ratio: 16 / 9;
}

.diginov-media .dn-field-lead__body {
    padding-top: 24px;
}

.diginov-media .dn-field-lead .dn-category {
    display: inline-block;
    margin-top: 16px;
}

.diginov-media .dn-field-lead h2 {
    margin: 12px 0 16px;
    color: var(--dn-ink);
    font-family: var(--dn-display);
    font-size: clamp(28px, 3.4vw, 46px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.diginov-media .dn-field-lead__excerpt {
    max-width: 62ch;
    margin: 0;
    color: var(--dn-muted);
    font-size: 16px;
    line-height: 1.65;
}

.diginov-media .dn-field-related {
    align-content: start;
    padding-top: 18px;
    border-top: 2px solid var(--dn-ink);
}

.diginov-media .dn-field-related > .dn-field-eyebrow {
    color: var(--dn-accent-2);
}

/* Un releve associe est un bloc monte, jamais une ligne a vignette fixe :
   la plaque prend toute la mesure de la colonne, le texte se pose dessous. */
.diginov-media .dn-field-related article {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    padding: 20px 0 24px;
    border-bottom: 1px solid var(--dn-line);
}

.diginov-media .dn-field-related__media {
    aspect-ratio: 3 / 2;
}

.diginov-media .dn-field-related > article > div {
    padding-top: 16px;
}

.diginov-media .dn-field-related .dn-category {
    display: block;
    margin-top: 8px;
}

.diginov-media .dn-field-related h3 {
    margin: 8px 0 8px;
    color: var(--dn-ink);
    font-family: var(--dn-display);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -0.02em;
}

.diginov-media .dn-field-related time {
    color: var(--dn-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Station 02: the open notebook -------------------------------------------- */

.diginov-media .dn-field-spread {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    column-gap: clamp(26px, 3.2vw, 48px);
    margin-top: clamp(28px, 3.2vw, 42px);
    padding: clamp(16px, 2vw, 26px) clamp(20px, 2.6vw, 34px) clamp(20px, 2.4vw, 30px);
    background-color: var(--dn-paper-soft);
    background-image:
        linear-gradient(to right, transparent calc(50% - 1px), color-mix(in srgb, var(--dn-line) 70%, transparent) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
        linear-gradient(color-mix(in srgb, var(--dn-line) 34%, transparent) 1px, transparent 1px);
    background-size: 100% 100%, 100% 34px;
    background-repeat: no-repeat, repeat;
    border: 1px solid var(--dn-line);
    border-radius: var(--dn-radius);
}

.diginov-media .dn-field-spread.is-single {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-flow: row;
    background-image: linear-gradient(color-mix(in srgb, var(--dn-line) 34%, transparent) 1px, transparent 1px);
    background-size: 100% 34px;
    background-repeat: repeat;
}

/* L entree de carnet : un bloc, pas une ligne. Le quantieme, le numero de
   releve et la rubrique tiennent sur la meme ligne de base, dans le flux du
   texte, et le titre prend toute la mesure de la page du carnet. */
.diginov-media .dn-field-entry {
    display: block;
    padding: 18px 0 20px;
    border-top: 1px solid color-mix(in srgb, var(--dn-line) 78%, transparent);
}

.diginov-media .dn-field-spread .dn-field-entry:nth-child(3n + 1) {
    border-top: 2px solid var(--dn-ink);
}

.diginov-media .dn-field-spread.is-single .dn-field-entry {
    border-top: 1px solid color-mix(in srgb, var(--dn-line) 78%, transparent);
}

.diginov-media .dn-field-spread.is-single .dn-field-entry:first-child {
    border-top: 2px solid var(--dn-ink);
}

.diginov-media .dn-field-entry__head {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    align-items: baseline;
    margin: 0 0 6px;
}

.diginov-media .dn-field-entry__head time {
    display: inline-flex;
    gap: 8px;
    align-items: baseline;
}

.diginov-media .dn-field-entry__head b {
    color: var(--dn-ink);
    font-family: var(--dn-display);
    font-size: clamp(30px, 3.4vw, 44px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.035em;
}

.diginov-media .dn-field-entry__head time span {
    color: var(--dn-accent-2);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.diginov-media .dn-field-entry__seq {
    color: var(--dn-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.diginov-media .dn-field-entry h3 {
    margin: 0;
    color: var(--dn-ink);
    font-family: var(--dn-display);
    font-size: clamp(18px, 1.9vw, 24px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

/* Station 03: the surveyed grounds ----------------------------------------- */

.diginov-media .dn-field-station--terrains {
    color: var(--dn-paper);
    background: var(--dn-ink);
}

.diginov-media .dn-field-station--terrains .dn-field-marge {
    border-right-color: color-mix(in srgb, var(--dn-line) 34%, transparent);
}

.diginov-media .dn-field-station--terrains .dn-field-borne {
    color: var(--dn-ink);
    background: var(--dn-paper);
}

.diginov-media .dn-field-station--terrains .dn-field-head {
    border-bottom-color: color-mix(in srgb, var(--dn-line) 55%, transparent);
}

.diginov-media .dn-field-station--terrains .dn-field-eyebrow {
    color: var(--dn-accent);
}

.diginov-media .dn-field-station--terrains .dn-field-eyebrow span,
.diginov-media .dn-field-station--terrains .dn-field-head h2 {
    color: var(--dn-paper);
}

.diginov-media .dn-field-station--terrains .dn-field-head > p {
    color: var(--dn-line);
}

.diginov-media .dn-field-bornes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
    gap: 0 clamp(16px, 2vw, 30px);
    margin-top: clamp(36px, 4vw, 54px);
}

.diginov-media .dn-field-bornes a {
    display: grid;
    gap: 10px;
    align-content: start;
    padding: 22px 0 28px;
    border-top: 1px solid color-mix(in srgb, var(--dn-line) 45%, transparent);
}

.diginov-media .dn-field-bornes i {
    width: 10px;
    height: 10px;
    margin-top: -27px;
    background: var(--dn-accent);
    border-radius: 2px;
    transition: transform 180ms ease;
}

.diginov-media .dn-field-bornes span {
    color: var(--dn-line);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.diginov-media .dn-field-bornes strong {
    color: var(--dn-paper);
    font-family: var(--dn-display);
    font-size: clamp(19px, 1.9vw, 24px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.025em;
    transition: color 180ms ease;
}

.diginov-media .dn-field-bornes a:hover strong {
    color: var(--dn-accent);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.diginov-media .dn-field-bornes a:hover i {
    transform: scale(1.5);
}

.diginov-media .dn-field-station--terrains a:focus-visible {
    outline-color: var(--dn-paper);
}

/* Station 04: the rest of the register ------------------------------------- */

.diginov-media .dn-field-fil {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(32px, 4vw, 64px);
    margin-top: clamp(22px, 2.6vw, 34px);
}

.diginov-media .dn-field-fil article {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
    padding: 20px 0;
    border-bottom: 1px solid var(--dn-line);
}

.diginov-media .dn-field-fil__number {
    padding-top: 3px;
    color: var(--dn-muted);
    font-family: var(--dn-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.diginov-media .dn-field-fil h3 {
    margin: 9px 0 0;
    color: var(--dn-ink);
    font-family: var(--dn-display);
    font-size: clamp(18px, 1.8vw, 22px);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -0.025em;
}

/* Shared link behaviour ---------------------------------------------------- */

.diginov-media .dn-field :is(h2, h3) a {
    transition: color 180ms ease;
}

.diginov-media .dn-field :is(h2, h3) a:hover {
    color: var(--dn-accent-2);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}

.diginov-media .dn-field a.dn-category:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* End of the survey line --------------------------------------------------- */

.diginov-media .dn-field-close__inner {
    align-items: stretch;
    padding-bottom: clamp(58px, 6.4vw, 88px);
}

.diginov-media .dn-field-close .dn-field-marge {
    align-items: flex-end;
    padding-top: 0;
}

.diginov-media .dn-field-borne--end {
    width: 14px;
    height: 14px;
    margin-right: -7px;
    background: var(--dn-accent);
}

.diginov-media .dn-field-close p {
    align-self: end;
    max-width: 60ch;
    margin: 0;
    color: var(--dn-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.6;
}

/* Responsive --------------------------------------------------------------- */

@media (max-width: 1180px) {
    .diginov-media .dn-field { --dn-field-marge: 64px; }
    .diginov-media .dn-field-spread { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; background-image: linear-gradient(color-mix(in srgb, var(--dn-line) 34%, transparent) 1px, transparent 1px); background-size: 100% 34px; background-repeat: repeat; }
    .diginov-media .dn-field-spread .dn-field-entry:nth-child(3n + 1) { border-top: 1px solid color-mix(in srgb, var(--dn-line) 78%, transparent); }
    .diginov-media .dn-field-spread .dn-field-entry:first-child { border-top: 2px solid var(--dn-ink); }
}

@media (max-width: 1024px) {
    .diginov-media .dn-field-observation { grid-template-columns: minmax(0, 1fr); row-gap: clamp(30px, 4vw, 44px); }
    .diginov-media .dn-field-related { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(22px, 3vw, 38px); }
    .diginov-media .dn-field-related > .dn-field-eyebrow { grid-column: 1 / -1; }
    .diginov-media .dn-field-related article { align-content: start; }
}

@media (max-width: 940px) {
    .diginov-media .dn-field-mast__inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "relief" "marks"; }
    .diginov-media .dn-field-relief { justify-self: start; width: min(46vw, 210px); }
    .diginov-media .dn-field-relief small { display: none; }
    .diginov-media .dn-field-plan__inner { grid-template-columns: minmax(0, 1fr); }
    .diginov-media .dn-field-plan__label { padding-top: 0; }
    .diginov-media .dn-field-plan__count { grid-column: 1; }
}

@media (max-width: 880px) {
    .diginov-media .dn-field { --dn-field-pad: clamp(44px, 6vw, 62px); }
    .diginov-media .dn-field-station__inner,
    .diginov-media .dn-field-close__inner { grid-template-columns: minmax(0, 1fr); }
    .diginov-media .dn-field-marge { justify-content: flex-start; padding-top: var(--dn-field-pad); border-right: 0; }
    .diginov-media .dn-field-borne { margin-right: 0; }
    .diginov-media .dn-field-station__body { padding-top: 20px; }
    .diginov-media .dn-field-close .dn-field-marge { padding-top: 0; }
    .diginov-media .dn-field-close__inner { row-gap: 16px; }
    .diginov-media .dn-field-head { grid-template-columns: minmax(0, 1fr); }
    .diginov-media .dn-field-head > strong,
    .diginov-media .dn-field-head > p { max-width: 62ch; text-align: left; }
    .diginov-media .dn-field-fil { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
    /* Le decametre se raccourcit mais ne disparait pas : c est lui qui tient
       l identite du bandeau. Seul le second libelle cede la place. */
    .diginov-media .dn-field-strip__inner { grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; min-height: 40px; font-size: 9px; }
    .diginov-media .dn-field-strip p:nth-child(2) { display: none; }
    .diginov-media .dn-field-mast h1 { max-width: 100%; font-size: clamp(40px, 11.5vw, 66px); }
    .diginov-media .dn-field-marks { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .diginov-media .dn-field-marks li { flex-direction: row; align-items: baseline; gap: 14px; padding-top: 14px; }
    .diginov-media .dn-field-marks li::before { margin-top: 0; align-self: center; }
    .diginov-media .dn-field-plan ol { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .diginov-media .dn-field-plan li a { padding-bottom: 16px; }
    .diginov-media .dn-field-related { grid-template-columns: minmax(0, 1fr); }
    /* Le quantieme cesse de dominer la ligne de base et repasse au corps du
       carnet : l entree tient alors sur deux lignes au lieu de trois. */
    .diginov-media .dn-field-entry { padding: 15px 0 17px; }
    .diginov-media .dn-field-entry__head { gap: 3px 14px; }
    .diginov-media .dn-field-entry__head b { font-size: 26px; }
    .diginov-media .dn-field-bornes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .diginov-media .dn-field .dn-shell { width: min(1220px, calc(100% - 36px)); }
    .diginov-media .dn-field-mast__inner { padding-top: 44px; }
    .diginov-media .dn-field-relief { width: min(56vw, 176px); }
    .diginov-media .dn-field-lead__media { aspect-ratio: 3 / 2; }
    .diginov-media .dn-field-related__media { aspect-ratio: 16 / 9; }
    .diginov-media .dn-field-spread { padding-inline: 16px; }
    .diginov-media .dn-field-bornes { grid-template-columns: minmax(0, 1fr); }
    .diginov-media .dn-field-fil article { grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; }
    .diginov-media .dn-field-close p { font-size: 11px; letter-spacing: 0.08em; }
}

@media (max-width: 390px) {
    .diginov-media .dn-field-strip__inner { grid-template-columns: auto minmax(12px, 1fr) auto; gap: 10px; font-size: 8px; letter-spacing: 0.1em; }
    .diginov-media .dn-field-mast h1 { letter-spacing: -0.045em; }
    .diginov-media .dn-field-relief small { display: none; }
    .diginov-media .dn-field-log { gap: 4px 12px; font-size: 9px; }
    .diginov-media .dn-field-entry__head { gap: 2px 12px; }
    .diginov-media .dn-field-entry__head b { font-size: 23px; }
    .diginov-media .dn-field-entry__seq { font-size: 9px; letter-spacing: 0.1em; }
}

@media (prefers-reduced-motion: reduce) {
    .diginov-media .dn-field * { transition: none !important; }
    .diginov-media .dn-field-bornes a:hover i { transform: none; }
}