/* Le programme Digitalisation reprend l'habillage validé du blog.
   Les contenus et les destinations du parcours restent dans la page HTML. */
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { margin: 0; }
* { box-sizing: border-box; }
:focus-visible { outline: 2px solid var(--blue-pale); outline-offset: 5px; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 12px; background: #0f172a; color: #fff; }
.skip:focus { top: 16px; }
.nav-dropdown:focus-within .nav-dropdown-menu { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
footer a { overflow-wrap: anywhere; }

.wrap { width: min(1152px, calc(100% - 48px)); margin-inline: auto; }
#contenu { color: #94a3b8; font-weight: 300; line-height: 1.75; }
#contenu :is(h1,h2,h3) { color: #fff; font-family: 'Syne', sans-serif; font-weight: 600; }
#contenu h1 { font-size: clamp(2.5rem, 4.3vw, 3.5rem); line-height: 1.08; letter-spacing: -.035em; margin: 24px 0; font-weight: 700; }
#contenu h2 { font-size: clamp(1.85rem, 3.5vw, 2.75rem); line-height: 1.2; letter-spacing: -.025em; margin: 0 0 22px; text-wrap: balance; }
#contenu h3 { font-size: 1.25rem; line-height: 1.4; margin: 14px 0 12px; }
#contenu p { margin: 0 0 18px; }
#contenu strong { color: #e2e8f0; font-weight: 500; }
#contenu :is(section,article,aside,.hero>div,.preview>div,.section-top>*,.author>div) { min-width: 0; }
.hero { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: clamp(32px,5vw,64px); align-items: center; padding: 88px 0 72px; }
.hero .lead { font-size: 1.125rem; line-height: 1.7; color: rgba(203,213,225,.8); max-width: 620px; }
.accent { color: var(--blue-pale); background: linear-gradient(to bottom,#93c5fd,#2563eb); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-style: italic; filter: drop-shadow(0 0 20px rgba(59,130,246,.3)); }
/* Italic glyphs extend beyond their advance width. Keep painting room on
   every wrapped line without moving the text or changing its available width. */
#contenu h1 .accent {
  padding-inline: .04em .16em;
  margin-inline: -.04em -.16em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.eyebrow,.num { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-pale); line-height: 1.8; }
.hero>div>.eyebrow { display: inline-block; border: 1px solid rgba(59,130,246,.2); border-radius: 999px; background: rgba(59,130,246,.08); padding: 6px 14px; margin-bottom: 0 !important; }
.actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.revision-link { width: 100%; }
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px; border-radius: 999px; border: 1px solid rgba(59,130,246,.3); background: linear-gradient(135deg,rgba(51,65,85,.65),rgba(15,23,42,.65)); color: var(--blue-pale); font-size: 14px; line-height: 1.6; font-weight: 300; text-decoration: none; text-align: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.06),0 2px 16px rgba(59,130,246,.2); transition: box-shadow .3s,border-color .3s,transform .2s; }
.btn:hover { transform: translateY(-2px); border-color: rgba(59,130,246,.55); box-shadow: 0 8px 32px rgba(59,130,246,.25); }
.btn.secondary { background: linear-gradient(135deg,rgba(51,65,85,.4),rgba(15,23,42,.35)); border-color: rgba(59,130,246,.12); color: #cbd5e1; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.btn.secondary.revision-link:is(:hover, :focus-visible) {
  transform: none;
  border-color: rgba(59,130,246,.55);
  color: #bfdbfe;
  box-shadow: 0 8px 32px rgba(59,130,246,.4), 0 0 60px rgba(59,130,246,.15), inset 0 1px 0 rgba(255,255,255,.1);
}
.revision-link:focus-visible::before { background-position: 220% 0; }
.note { color: #8898ad; font-size: 12px; line-height: 1.8; }

.offer,.goal,.program-block,.annale-card,.author,.wordpress,.last-cta {
  background: rgba(15,23,42,.55);
  border: 1px solid rgba(59,130,246,.15);
  border-radius: 16px;
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05),0 8px 32px rgba(0,0,0,.4);
}
.offer { padding: 32px; border-color: rgba(59,130,246,.25); }
.offer-label { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--blue-pale); line-height: 1.6; }
.dot { display: inline-block; flex: 0 0 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 10px var(--blue-glow); }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 12px; font: 600 clamp(2.75rem,4.4vw,3.5rem)/1.2 'Syne',sans-serif; color: var(--blue-pale); letter-spacing: -.035em; margin: 24px 0 12px; }
.price span { font: 300 13px/1.6 'Inter',sans-serif; letter-spacing: 0; color: #94a3b8; }
.offer>p { font-size: 14px; }
.offer ul { list-style: disc; padding-left: 18px; margin: 24px 0; font-size: 14px; }
.offer li { margin-bottom: 9px; }
.offer li::marker { color: #60a5fa; }
.offer .btn { width: 100%; }
.offer .note { margin: 18px 0 0 !important; font-size: 12px; }
.facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid rgba(59,130,246,.16); border-bottom: 1px solid rgba(59,130,246,.16); margin-bottom: 88px; }
.fact { padding: 26px 28px; border-right: 1px solid rgba(59,130,246,.12); }
.fact:first-child { padding-left: 0; }
@media (min-width: 541px) {
  body[data-ndrc-subject="digitalisation"] .fact:first-child { padding-left: 28px; }
}
.fact:last-child { border: 0; }
.fact strong { display: block; font: 600 clamp(1.1rem,2vw,1.5rem)/1.4 'Syne',sans-serif; color: var(--blue-pale) !important; margin-bottom: 6px; }
.fact span { font-size: 13px; }

.section { padding-bottom: 88px; }
.section-top { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 40px; align-items: end; margin-bottom: 32px; }
.section-top :is(h2,p) { margin-bottom: 0 !important; }
.goals { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.goal { padding: 28px; }
.num { display: block; margin-bottom: 18px; }
.goal p { font-size: 14px; margin-bottom: 0 !important; }
.preview { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 40px; padding: 40px; border: 10px solid rgba(30,41,59,.45); border-radius: 32px; background: #020210; box-shadow: inset 0 0 0 1px rgba(59,130,246,.1); }
#contenu .preview h2 { font-size: clamp(1.6rem,3vw,2.25rem); text-wrap: balance; text-shadow: 0 0 20px rgba(59,130,246,.3); }
.preview>div { align-self: start; }
.preview>div>p:last-child { margin-bottom: 0 !important; }
.metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-bottom: 24px; }
.metric { min-width: 0; padding: 22px 18px; border: 1px solid rgba(59,130,246,.15); border-radius: 16px; background: rgba(15,23,42,.55); }
.metric strong { display: block; font: 600 clamp(1.2rem,2vw,1.6rem)/1.4 'Syne',sans-serif; color: var(--blue-pale) !important; margin: 14px 0; }
.metric span { display: block; font-size: 12px; }
.preview details { padding-top: 20px; border-top: 1px solid rgba(59,130,246,.15); font-size: 14px; }
.preview summary { color: var(--blue-pale); cursor: pointer; line-height: 1.7; }
body[data-ndrc-subject="digitalisation"] #apercu .preview summary {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 52px; padding: 13px 16px; list-style: none;
  border: 1px solid rgba(96,165,250,.34); border-radius: 10px;
  background: #0d1b31; color: #bfdbfe;
  transition: background-color .2s, border-color .2s;
}
body[data-ndrc-subject="digitalisation"] #apercu .preview summary::-webkit-details-marker { display: none; }
body[data-ndrc-subject="digitalisation"] #apercu .preview summary::before {
  content: ''; flex: 0 0 auto; width: 0; height: 0;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  border-left: 6px solid currentColor; transition: transform .2s;
}
body[data-ndrc-subject="digitalisation"] #apercu .preview details[open] > summary::before { transform: rotate(90deg); }
body[data-ndrc-subject="digitalisation"] #apercu .preview summary:hover,
body[data-ndrc-subject="digitalisation"] #apercu .preview summary:focus-visible {
  background: #142945; border-color: rgba(96,165,250,.65);
}
.preview details p { margin-top: 18px !important; }
.back-link,.chapter-link,.annale-card a { color: var(--blue-pale); text-decoration: none; font-size: 14px; line-height: 1.7; transition: color .2s; }
.back-link:hover,.chapter-link:hover,.annale-card a:hover { color: #fff; text-decoration: underline; text-underline-offset: 5px; }
.program-block { padding: 28px 32px; margin-top: 24px; }
.block-heading { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-bottom: 24px; }
.block-heading h3 { margin: 0 !important; }
.block-tag,.badge { display: inline-block; flex-shrink: 0; border: 1px solid rgba(59,130,246,.25); border-radius: 999px; padding: 5px 12px; background: rgba(59,130,246,.08); color: var(--blue-pale); font-size: 11px; line-height: 1.8; }
.chapters { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(59,130,246,.13); }
.chapter { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; gap: 16px; align-items: center; padding: 20px 0; border-bottom: 1px solid rgba(59,130,246,.1); scroll-margin-top: 110px; }
.chapter-no { color: #64748b; font-size: 12px; }
.chapter h3 { font: 400 14px/1.7 'Inter',sans-serif !important; color: #cbd5e1 !important; margin: 0 !important; }
.chapter-link { font-size: 12px; white-space: nowrap; }
.test-line { font-size: 12px; color: #8898ad; margin: 18px 0 0 !important; }
.final-test { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; border: 1px solid rgba(59,130,246,.2); border-radius: 16px; padding: 24px 28px; margin-top: 24px; background: rgba(59,130,246,.06); }
.final-test strong { font: 600 18px/1.5 'Syne',sans-serif; }
.final-test span { font-size: 13px; }
.annales { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.annale-card { display: flex; flex-direction: column; padding: 28px; }
.annale-card h3 { margin: 14px 0 24px !important; }
.annale-card a { margin-top: auto; }
.annale-card .eyebrow { font-size: 10px; }
.author { display: grid; grid-template-columns: 88px minmax(0,1fr); gap: 32px; padding: 40px; }
.author-mark { display: grid; place-items: center; width: 88px; height: 88px; border: 1px solid rgba(59,130,246,.2); border-radius: 50%; background: rgba(59,130,246,.08); color: var(--blue-pale); font: 500 28px 'Syne',sans-serif; }
.author p:last-child { margin-bottom: 0 !important; }
.wordpress { display: flex; justify-content: space-between; align-items: start; gap: 28px; padding: 28px 32px; }
.wordpress h3 { margin-top: 0 !important; }
.wordpress p { font-size: 14px; margin-bottom: 0 !important; }
.last-cta { padding: 48px 32px; text-align: center; }
.last-cta>p:not(.eyebrow) { max-width: 660px; margin-inline: auto !important; }
.last-cta .actions { justify-content: center; }

@media(min-width:768px) and (max-width:1040px) {
  .glass-nav form[role=search] { display: none; }
  .glass-nav .gap-6 { gap: 16px; }
  .glass-nav .gap-4 { gap: 8px; }
}
@media(max-width:1000px) {
  .hero { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 32px; padding-top: 64px; }
  #contenu h1 { font-size: clamp(2.45rem,4.8vw,3.25rem); }
  .offer { padding: 26px; }
  .goals { gap: 16px; }
  .goal,.annale-card { padding: 24px; }
  .preview { padding: 28px; gap: 28px; }
  .preview .metrics { gap: 10px; }
  .metric { padding: 20px 12px; }
}
@media(max-width:820px) {
  .hero { grid-template-columns: minmax(0,1fr); gap: 36px; padding: 56px 0; }
  #contenu h1 { font-size: clamp(2.5rem,6.5vw,3.6rem); max-width: 680px; }
  .hero .offer { width: 100%; }
  .offer { padding: 32px; }
  .offer ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 36px; }
  .goals { grid-template-columns: minmax(0,1fr); }
  .section-top { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .section-top>p { max-width: 620px; }
  .preview { grid-template-columns: minmax(0,1fr); padding: 32px; }
  .metrics .metric { padding: 22px; }
  .metrics .metric strong { font-size: 1.6rem; }
  .annales { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .wordpress { flex-direction: column; gap: 18px; }
}
@media(max-width:540px) {
  .wrap { width: calc(100% - 40px); }
  .hero { padding: 42px 0 40px; }
  #contenu h1 { font-size: clamp(2rem,8.8vw,2.9rem); text-wrap: balance; }
  #contenu h2 { font-size: clamp(1.55rem,6.6vw,2rem); }
  #contenu h3 { font-size: 1.15rem; }
  .hero .lead { font-size: 16px; }
  .hero>div>.eyebrow { font-size: 10px; padding: 6px 12px; letter-spacing: .08em; }
  .actions { flex-direction: column; gap: 12px; }
  .actions .btn { width: 100%; }
  .offer { padding: 24px; }
  .offer ul { display: block; }
  .price { font-size: 3.1rem; }
  .facts { grid-template-columns: minmax(0,1fr); margin-bottom: 56px; }
  .fact,.fact:first-child { padding: 18px 4px; border-right: 0; border-bottom: 1px solid rgba(59,130,246,.1); }
  .section { padding-bottom: 56px; }
  .goal { padding: 24px; }
  .preview { padding: 22px; border-width: 7px; border-radius: 24px; gap: 24px; }
  .metrics { gap: 10px; }
  .metrics .metric { padding: 16px 12px; }
  .metrics .metric strong { font-size: clamp(1rem,4.2vw,1.3rem); }
  .program-block { padding: 22px; }
  .block-heading { gap: 12px; }
  .chapter { grid-template-columns: 24px minmax(0,1fr); gap: 8px 10px; padding: 18px 0; }
  .chapter-link { grid-column: 2; white-space: normal; }
  .final-test { padding: 22px; }
  .annales { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .author { grid-template-columns: minmax(0,1fr); padding: 26px; gap: 22px; }
  .author-mark { width: 72px; height: 72px; font-size: 24px; }
  .wordpress,.last-cta { padding: 26px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  .retro-grid::before { animation: none; }
  .btn, .revision-link::before { transition: none; }
  .btn:hover { transform: none; }
}