/* PREVIX by MANAXIO — mini-site produit.
   Charte MANAXIO : nuit et or ; accent produit PREVIX en vert (#4fcf8b). Barlow Condensed (titres),
   IBM Plex Sans (texte), IBM Plex Mono (chiffres). Aucune ressource externe, aucun style en ligne,
   aucun script : compatible avec la politique de sécurité du portail MANAXIO (default-src 'self').
   Pas de long défilement : l'essentiel tient dans le premier écran, le reste est rangé en onglets
   (un panneau visible à la fois, en CSS seul avec :target). Classes préfixées « px- ». */

@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url(../fonts/barlow-condensed-600.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url(../fonts/barlow-condensed-700.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url(../fonts/ibm-plex-sans-400.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url(../fonts/ibm-plex-sans-500.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url(../fonts/ibm-plex-sans-600.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url(../fonts/ibm-plex-mono-500.woff2) format("woff2"); }

.px-page {
  --px-nuit: #08111d;
  --px-nuit-2: #0b1626;
  --px-carte: #122139;
  --px-trait: #2c4467;
  --px-ivoire: #eef3f8;
  --px-texte-2: #c3cfde;
  --px-gris: #8a9bb3;
  --px-or: #e3b964;
  --px-or-clair: #f0d08f;
  --px-sur-or: #1a1304;
  --px-vert: #4fcf8b;
  --px-alerte: #f17a6c;
  --px-titre: "Barlow Condensed", "Arial Narrow", sans-serif;
  --px-corps: "IBM Plex Sans", "Segoe UI", sans-serif;
  --px-mono: "IBM Plex Mono", Consolas, monospace;
  margin: 0;
  background: var(--px-nuit);
  color: var(--px-ivoire);
  font: 16px/1.55 var(--px-corps);
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
}
.px-page *, .px-page *::before, .px-page *::after { box-sizing: border-box; }
.px-page img { max-width: 100%; height: auto; display: block; }
.px-page a { color: var(--px-or); }
.px-page a:hover { color: var(--px-or-clair); }
.px-page :focus-visible { outline: 2px solid var(--px-or); outline-offset: 3px; }
/* en-tête (64 px) + onglets (54 px) restent visibles au-dessus du panneau ouvert */
html { scroll-padding-top: 126px; }

.px-conteneur { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.px-evitement { position: absolute; left: -999px; top: 8px; background: var(--px-or); color: var(--px-sur-or); padding: 8px 14px; border-radius: 8px; z-index: 50; }
.px-evitement:focus { left: 12px; }

/* ------------------------------------------------------------ titres */
.px-page h1, .px-page h2, .px-page h3 { font-family: var(--px-titre); font-weight: 700; line-height: 1.02; margin: 0; letter-spacing: 0.005em; }
.px-page h1 { font-size: clamp(44px, 5.4vw, 74px); }
.px-page h1 span { color: var(--px-vert); }
.px-page h2 { font-size: clamp(30px, 3.4vw, 42px); margin-bottom: 14px; }
.px-page h3 { font-size: 21px; margin-bottom: 4px; }
.px-surtitre { font-family: var(--px-titre); font-weight: 600; font-size: 15px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--px-or); margin: 0 0 12px; display: flex; align-items: center; gap: 12px; }
.px-surtitre::before { content: ""; width: 30px; height: 2px; background: var(--px-or); flex: none; }
.px-chapo { font-size: 18px; color: var(--px-texte-2); max-width: 34em; margin: 16px 0 22px; }
.px-intro { color: var(--px-texte-2); margin: 0 0 22px; max-width: 46em; }

/* ------------------------------------------------------------ boutons */
.px-bouton { display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; padding: 12px 22px; font: 600 16px/1.2 var(--px-corps); text-decoration: none; background: var(--px-or); border: 1px solid var(--px-or); }
.px-page a.px-bouton { color: var(--px-sur-or); }
.px-page a.px-bouton:hover { background: var(--px-or-clair); border-color: var(--px-or-clair); color: var(--px-sur-or); }
.px-page a.px-bouton-secondaire { background: transparent; color: var(--px-ivoire); border-color: var(--px-trait); }
.px-page a.px-bouton-secondaire:hover { background: transparent; color: var(--px-or); border-color: var(--px-or); }
.px-bouton-petit { padding: 9px 16px; font-size: 15px; }
.px-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ------------------------------------------------------------ en-tête */
.px-entete { position: sticky; top: 0; z-index: 30; height: 64px; background: rgba(11, 22, 38, 0.96); border-bottom: 1px solid var(--px-trait); }
.px-entete-ligne { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.px-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.px-logo img { width: 38px; height: 38px; }
.px-logo-texte b { display: block; font: 700 25px/1 var(--px-titre); letter-spacing: 0.08em; color: var(--px-ivoire); }
.px-logo-texte small { display: block; font: 600 12px/1.3 var(--px-corps); color: var(--px-or); letter-spacing: 0.04em; }

/* ------------------------------------------------------------ premier écran */
.px-heros { padding: 44px 0 36px; background: radial-gradient(900px 480px at 85% 0%, rgba(79, 207, 139, 0.10), transparent 60%), radial-gradient(700px 420px at 0% 100%, rgba(227, 185, 100, 0.07), transparent 60%), var(--px-nuit); }
.px-heros-grille { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 44px; align-items: center; }
.px-chiffres { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 14px 22px; }
.px-chiffres li { display: grid; gap: 2px; border-left: 2px solid var(--px-or); padding-left: 12px; }
.px-chiffres b { font: 700 34px/1 var(--px-titre); color: var(--px-ivoire); }
.px-chiffres span { font-size: 13px; color: var(--px-texte-2); }

.px-ecran { display: block; margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--px-trait); background: var(--px-nuit-2); box-shadow: 0 26px 50px -28px rgba(0, 0, 0, 0.9); }
.px-page a.px-ecran:hover { border-color: var(--px-or); }

/* ------------------------------------------------------------ onglets */
.px-onglets { position: sticky; top: 64px; z-index: 20; background: var(--px-nuit-2); border-block: 1px solid var(--px-trait); }
.px-onglets-ligne { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.px-onglets-ligne::-webkit-scrollbar { display: none; }
.px-page .px-onglets a { flex: none; padding: 15px 16px 13px; color: var(--px-texte-2); text-decoration: none; font-weight: 600; font-size: 15px; border-bottom: 3px solid transparent; white-space: nowrap; }
.px-page .px-onglets a:hover { color: var(--px-ivoire); }
/* onglet actif : celui du panneau ouvert, « Fonctionnalités » par défaut */
.px-page:not(:has(.px-panneau:target)) .px-onglets .px-onglet-fonctions,
.px-page:has(#fonctions:target) .px-onglets .px-onglet-fonctions,
.px-page:has(#images:target) .px-onglets .px-onglet-images,
.px-page:has(#transparence:target) .px-onglets .px-onglet-transparence,
.px-page:has(#demarrer:target) .px-onglets .px-onglet-demarrer,
.px-page:has(#createur:target) .px-onglets .px-onglet-createur,
.px-page:has(#questions:target) .px-onglets .px-onglet-questions { color: var(--px-or); border-bottom-color: var(--px-or); }

/* ------------------------------------------------------------ panneaux : un seul visible */
.px-panneaux { min-height: 58vh; }
.px-panneau { display: none; padding: 34px 0 48px; }
.px-panneau:target, .px-panneaux:not(:has(.px-panneau:target)) #fonctions { display: block; }

.px-fonctions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.px-fonction { display: flex; gap: 14px; align-items: flex-start; background: var(--px-carte); border: 1px solid var(--px-trait); border-radius: 12px; padding: 18px; }
.px-fonction svg { flex: none; width: 40px; height: 40px; padding: 8px; border-radius: 10px; background: rgba(79, 207, 139, 0.12); fill: none; stroke: var(--px-vert); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.px-fonction p { margin: 0; color: var(--px-texte-2); font-size: 15px; }

.px-galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.px-galerie figure { margin: 0; display: grid; gap: 10px; align-content: start; }
.px-galerie figcaption { color: var(--px-texte-2); font-size: 15px; }
.px-galerie figcaption b { color: var(--px-ivoire); }
.px-note { font-size: 13px; color: var(--px-gris); margin: 16px 0 0; }

.px-deux { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 40px; align-items: center; }
.px-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.px-points li { padding-left: 28px; position: relative; color: var(--px-texte-2); }
.px-points li::before { content: ""; position: absolute; left: 0; top: 6px; width: 13px; height: 13px; border-radius: 4px; border: 2px solid var(--px-vert); }
.px-points b { color: var(--px-ivoire); font-weight: 600; }

.px-etapes { list-style: none; padding: 0; margin: 0 0 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; counter-reset: etape; }
.px-etapes li { counter-increment: etape; background: var(--px-carte); border: 1px solid var(--px-trait); border-radius: 12px; padding: 20px; display: grid; gap: 6px; align-content: start; }
.px-etapes li::before { content: counter(etape); font: 700 19px/1 var(--px-mono); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--px-or); color: var(--px-sur-or); }
.px-etapes b { font: 700 22px/1.1 var(--px-titre); }
.px-etapes span { color: var(--px-texte-2); font-size: 15px; }

.px-cotes { border: 1px solid var(--px-trait); border-radius: 12px; background: var(--px-carte); padding: 0 18px; }
.px-cotes summary { cursor: pointer; padding: 14px 0; font-weight: 600; color: var(--px-or); }
.px-cotes p { color: var(--px-texte-2); margin: 0 0 14px; }
.px-page .px-mention { border: 1px solid var(--px-alerte); background: rgba(241, 122, 108, 0.08); color: #ffd9d3; border-radius: 10px; padding: 12px 14px; font-size: 14px; }

.px-createur { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: center; }
.px-portrait { border-radius: 14px; border: 1px solid var(--px-trait); box-shadow: 0 0 0 6px rgba(227, 185, 100, 0.12); }
.px-createur p { color: var(--px-texte-2); max-width: 40em; }
.px-createur blockquote { margin: 18px 0 0; font: 700 28px/1.1 var(--px-titre); color: var(--px-or); }

.px-faq { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; align-items: start; }
.px-faq details { background: var(--px-carte); border: 1px solid var(--px-trait); border-radius: 12px; padding: 0 16px; }
.px-faq summary { cursor: pointer; list-style: none; padding: 14px 28px 14px 0; position: relative; font-weight: 600; }
.px-faq summary::-webkit-details-marker { display: none; }
.px-faq summary::after { content: "+"; position: absolute; right: 0; top: 10px; font: 600 22px/1 var(--px-mono); color: var(--px-or); }
.px-faq details[open] summary::after { content: "−"; }
.px-faq p { margin: 0 0 14px; color: var(--px-texte-2); font-size: 15px; }

/* pied */
.px-pied { background: var(--px-nuit-2); border-top: 1px solid var(--px-trait); padding: 24px 0; font-size: 13px; color: var(--px-gris); }
.px-pied-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.px-pied p { margin: 0 0 5px; }
.px-pied-marque { font-size: 16px; color: var(--px-ivoire); }
.px-pied-marque b { font: 700 20px/1 var(--px-titre); letter-spacing: 0.08em; }
.px-pied-signature { color: var(--px-or); font-weight: 600; }

/* ------------------------------------------------------------ écrans étroits */
@media (max-width: 1020px) {
  .px-heros-grille, .px-deux { grid-template-columns: minmax(0, 1fr); }
  .px-ecran-heros { max-width: 640px; }
  .px-fonctions, .px-galerie, .px-etapes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .px-conteneur { padding: 0 16px; }
  html { scroll-padding-top: 150px; }
  .px-entete, .px-entete-ligne { height: 58px; }
  .px-onglets { top: 58px; }
  /* les six onglets visibles d'un coup : deux rangées de trois */
  .px-onglets-ligne { flex-wrap: wrap; overflow: visible; gap: 0; padding: 0 8px; }
  .px-page .px-onglets a { flex: 1 1 33%; text-align: center; padding: 10px 4px 8px; font-size: 14px; }
  .px-fonction { padding: 14px; }
  .px-fonction p { font-size: 14px; }
  .px-heros { padding: 26px 0 22px; }
  .px-chapo { font-size: 16px; margin: 12px 0 16px; }
  .px-ecran-heros { display: none; }
  .px-chiffres { gap: 10px 20px; margin-top: 18px; }
  .px-chiffres b { font-size: 28px; }
  .px-fonctions, .px-galerie, .px-etapes, .px-faq, .px-pied-grille { grid-template-columns: minmax(0, 1fr); }
  .px-createur { grid-template-columns: 110px minmax(0, 1fr); gap: 16px; align-items: start; }
  .px-createur blockquote { font-size: 22px; }
  .px-panneau { padding: 22px 0 32px; }
  .px-actions .px-bouton { flex: 1 1 auto; }
}