/* ═══════════════════════════════════════════════════════════════════════
   Page unique — mise en page des parties.
   Le contenu vient des anciennes pages ; ce fichier ne fait que les
   enchaîner proprement sur une seule page qu'on fait défiler.
══════════════════════════════════════════════════════════════════════ */

/* La barre de navigation est collante : sans marge, une ancre ferait
   arriver le titre de la partie sous la barre. */
html { scroll-behavior: smooth; }
.op-part { scroll-margin-top: 76px; }
[id] { scroll-margin-top: 76px; }

/* Une limite nette entre deux parties, sans effet. */
.op-part + .op-part { border-top: 1px solid var(--border); }

/* Les anciens en-têtes de page deviennent des en-têtes de partie :
   plus compacts, alignés sur la grille. */
.op-head { padding: 96px 0 8px; }
.op-head .container > p:not(.label) { max-width: 640px; color: var(--txt2); }
.op-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); margin: 10px 0 14px; }

/* Les blocs avaient chacun leur grand rembourrage, pensé pour une page
   seule. Enchaînés, ils créaient des trous ; on les resserre un peu. */
.op-part > section { padding-top: 64px; padding-bottom: 64px; }
.op-part > section[style*="padding: 0 0 104px"] { padding-bottom: 72px !important; }

/* ─── News ─────────────────────────────────────────────────────────── */
.news-teaser { list-style: none; margin: 8px 0 28px; padding: 0; border-top: 1px solid var(--border); }
.news-teaser li { display: grid; grid-template-columns: 150px 1fr; gap: 28px; padding: 22px 0; border-bottom: 1px solid var(--border); }
.news-teaser time { color: var(--txt3); font-size: 14px; padding-top: 2px; }
.news-teaser h3 { margin: 0 0 6px; }
.news-teaser p { margin: 0; color: var(--txt2); font-size: 15px; }

.news-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.news-list li { display: grid; grid-template-columns: 170px 1fr; gap: 32px; padding: 32px 0; border-bottom: 1px solid var(--border); }
.news-list time { color: var(--txt3); font-size: 14px; padding-top: 4px; }
.news-list .news-version { display: inline-block; font-size: 12px; font-weight: 600; color: var(--txt2); border: 1px solid var(--border2); border-radius: 4px; padding: 2px 8px; margin-bottom: 10px; }
.news-list h2 { font-size: 1.35rem; margin: 0 0 10px; }
.news-list p { color: var(--txt2); margin: 0 0 8px; max-width: 680px; }
.news-list ul { margin: 6px 0 0 18px; color: var(--txt2); }
.news-list ul li { display: list-item; padding: 2px 0; border: 0; }

@media (max-width: 768px) {
  .op-head { padding: 64px 0 4px; }
  .op-part > section { padding-top: 48px; padding-bottom: 48px; }
  .news-teaser li, .news-list li { grid-template-columns: 1fr; gap: 6px; }
}

/* Les images portent leurs dimensions dans le HTML pour que la place soit
   reservee avant chargement : sans ca, un clic sur un lien du menu
   s'arretait 2 600 px trop haut, le temps que les captures chargent.
   height:auto garde les proportions quand le CSS change la largeur. */
.op-part img[width][height] { height: auto; max-width: 100%; }


/* Les deux videos cote a cote sur ordinateur, chacune sous son titre :
   meme contenu, moitie moins de hauteur. Empilees sous 900 px. */
.op-videos { display: grid; grid-template-columns: 1fr; gap: 56px; }
.op-video .section-header { margin-bottom: 24px; }
@media (min-width: 900px) {
  .op-videos { grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
  .op-video .section-header h2 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
}
.news-teaser .news-version { display: inline-block; font-size: 12px; font-weight: 600; color: var(--txt2); border: 1px solid var(--border2); border-radius: 4px; padding: 1px 7px; margin-bottom: 8px; }
.news-link { display: inline-block; margin-top: 2px; padding: 10px 0; font-size: 14px; font-weight: 600; color: var(--cyan); text-underline-offset: 3px; } /* zone de clic >= 40 px */

/* En préparation : les chantiers en cours, sans date. Trois cartes sobres,
   le trait de couleur reprend les deux voix du logo. */
.next-block { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--border); }
.next-block h2 { margin: 6px 0 12px; }
.next-intro { color: var(--txt2); max-width: 68ch; line-height: 1.65; }
.next-list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.next-item { position: relative; padding: 22px 22px 20px; border: 1px solid var(--border2); border-radius: var(--radius-lg); background: rgba(14, 20, 38, 0.72); overflow: hidden; }
.next-item::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--cyan), var(--purple)); opacity: .8; }
.next-item h3 { font-size: 1.05rem; margin: 0 0 8px; color: var(--txt); }
.next-item p { margin: 0; color: var(--txt2); font-size: 0.95rem; line-height: 1.6; }
.news-head + section .next-block { margin-top: 0; padding-top: 0; border-top: 0; margin-bottom: 56px; }
@media (max-width: 860px) { .next-list { grid-template-columns: 1fr; } }

/* Mention TTC a cote du prix. */
.pricing-ttc { font-size: 0.95rem; font-weight: 600; color: var(--txt2); letter-spacing: .02em; }

/* Prix barré et ligne de promotion. */
.pricing-was { color: var(--txt3); font-size: 1.15rem; text-decoration-thickness: 2px; }
.pricing-promo { margin: -14px 0 10px; color: var(--purple); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-family: 'JetBrains Mono', monospace; }
/* Date de fin de l'offre, à côté du prix. */
.pricing-until { align-self: center; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(192,96,236,.6);
  background: rgba(192,96,236,.12); color: #e3b3f7; font-size: 1.05rem; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }