/* La barre d'identité de Pioniera fixait six colonnes égales sans permettre
   leur réduction : le contenu le plus long faisait déborder toute la page. */
.adv .idbar dl{grid-template-columns:repeat(6,minmax(0,1fr));min-width:0;width:auto}
.adv .idbar .wrap{min-width:0}
@media(max-width:1100px){.adv .idbar dl{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.adv .idbar dl{grid-template-columns:repeat(2,minmax(0,1fr))}}
.adv .idbar div{min-width:0}
.adv .idbar dd{overflow-wrap:anywhere}

/* Les colonnes de grille doivent pouvoir rétrécir sous la largeur de leur
   contenu, sans quoi un libellé long fait déborder toute la page. */
.two>*,.engines>*,.corr>*,.gov>*,.cols>*,.masthead .grid>*,
.steps-h>li,.grille>*,#registry>*{min-width:0}
.spec div,.rules div{min-width:0}
.spec dd,.rules dd,.ident dd{overflow-wrap:anywhere}

/* Chargée en dernier : elle a le dernier mot sur les autres feuilles. */
/* ============ TENUE SUR PETIT ÉCRAN ============ */
@media(max-width:900px){
  /* la navigation tient sur une ligne et se fait glisser */
  .bar nav, .masthead-bar .nav{
    flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;gap:22px;padding-block:2px;
    mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent)}
  .bar nav::-webkit-scrollbar,.masthead-bar .nav::-webkit-scrollbar{display:none}
  .bar nav > *, .masthead-bar .nav > *{white-space:nowrap;scroll-snap-align:start;flex:0 0 auto}
  .bar .wrap, .masthead-bar .wrap{flex-wrap:nowrap;gap:20px;align-items:center}
  .wordmark{flex:0 0 auto}

  /* les tableaux annoncent qu'ils se font glisser */
  .scrollx{position:relative;
    mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent);
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent)}
  .scrollx table{width:max-content;min-width:100%}
  .scrollx td,.scrollx th{white-space:nowrap}

  /* on resserre la verticale : les pages font moins de dix écrans */
  .blk{padding-block:34px}
  .section{padding-block:34px}
  .masthead{padding-block:34px 30px}
  .m-block{margin-top:18px}
  .chartbox{margin-top:18px !important}


  /* les cibles tactiles atteignent la taille minimale */
  .presets button,.bar nav a,.masthead-bar .nav button,.docs a,.toc a{min-height:44px;
    display:inline-flex;align-items:center}
  .presets{gap:8px;flex-wrap:wrap}
  .presets button{padding-inline:14px}

  /* le curseur se manipule au doigt */
  input[type=range]{height:34px}
  input[type=range]::-webkit-slider-thumb{width:24px;height:24px}
}
@media(max-width:420px){
  .masthead h1{font-size:clamp(27px,8.6vw,33px)}
  .cv{font-size:clamp(34px,11vw,44px)}
}

@media(max-width:760px){
  /* la typographie gagne en présence */
  .masthead h1{font-size:clamp(30px,8.4vw,38px);line-height:1.08}
  .stitle.big{font-size:clamp(22px,6vw,27px)}
  .tagline{font-size:16px}
}

/* ---- fond animé du bandeau ---- */
.masthead{position:relative;overflow:hidden}
.masthead > .wrap{position:relative;z-index:2}
canvas.nb-fond{position:absolute;inset:0;z-index:1;pointer-events:none;
  display:block}
@media print{canvas.nb-fond{display:none}}

/* ---- AdHabilidade dans la navigation ---- */
.nv-marque{color:#F4F1EA !important;display:inline-flex;align-items:baseline;gap:0}
.nv-marque .nv-ad{color:#A85480}
.nv-marque .nv-i{width:.44em;height:1.06em;fill:#A85480;color:#A85480;
  display:inline-block;align-self:center;margin:0 .06em;transform:translateY(.07em)}
.bar nav .nv-marque:hover,.masthead-bar .nav .nv-marque:hover{color:#FFFFFF !important}

/* ---- schémas : on les fait glisser plutôt que de les écraser ---- */
@media(max-width:760px){
  .layout,.layout>*,.svc,.svc>*{min-width:0}
  .svc-svg,.schema{min-width:0;max-width:100%;width:100%;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent);
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent)}
  .svc-svg::-webkit-scrollbar,.schema::-webkit-scrollbar{display:none}
  .svc-svg > svg,.schema > svg{min-width:660px}
  .svc-svg figcaption,.schema figcaption{position:sticky;inset-inline-start:0}

  /* aucun texte sous 11 px */
  .t-items,.idx-groupe,.st-s,.csrc,.pv-t,.pv-n,.svc-adr,.sublist,.sublist li,.mono,
  .refc-l,.refc-a,.ref,.note,.m-k,.m-n,.rc-lab,.rc-cap,.rc-note,
  .svc-fig figcaption,.svc-svg figcaption,.schema figcaption{font-size:11px !important}
}

/* dans un SVG, la taille est en unités du dessin : il faut l'augmenter,
   puisque le dessin est ensuite réduit à l'échelle du téléphone */
@media(max-width:760px){
  .dg-k,.op-h,.op-h2,.fi-h,.fi-h2,.tr-h,.tr-h2,.sc-h,.sc-h2,
  .fi-m,.fi-m2,.tr-m,.fz-n,.ch-n,.cn-t2,.st-s,.cb-k{font-size:14px}
  .fi-v,.fi-v2,.fi-n,.sc-n2,.tr-t,.tr-t2,.ch-t,.cn-t,.fz-l,.sc-i,
  .op-g,.op-d,.fi-t,.fi-t2,.fi-k,.fi-k2,.fz-s,.cb-v{font-size:17px}
  .cn-ct{font-size:26px}
  .dg-n{font-size:44px}
}

/* les graphiques produit : mêmes règles que les schémas */
@media(max-width:760px){
  .plotwrap{min-width:0;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent);
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent)}
  .plotwrap::-webkit-scrollbar{display:none}
  .plotwrap > svg.plot{min-width:700px;width:700px}
  .tick{font-size:16px}
  .chartbox,.chartbox > *{min-width:0}
}

/* schémas et graphiques des sous-pages */
@media(max-width:760px){
  .chartbox,.chartbox > *{min-width:0;max-width:100%}
  .chartbox svg[viewBox]{min-width:700px}
  /* ce graphique porte des tailles en ligne : on l'élargit au lieu de les contrer */
  #hist{min-width:1000px}
  .chartbox > svg[viewBox]{display:block}
  .chartbox:has(> svg[viewBox]){overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none}
  .sc-cap,.sc-lab,.sc-labv,.sc-eg,.pt-r,.fr-cap,.fr-cap2,.fr-num{font-size:16px}
  .sc-n,.sc-ex,.sc-warn,.sc-good,.pt-p,.fr-lib{font-size:17px}
  .sc-t,.sc-warn2,.sc-good2{font-size:20px}
  .sc-mt{font-size:26px}
  .sc-big{font-size:38px}
}

/* derniers textes fins : en-têtes de tableau et panneau de risque */
@media(max-width:760px){
  table th,table th.num,table th.ytd,.months th{font-size:11px !important}
  .risk-panel p{font-size:11.5px !important}
}

/* ---- Formation dans la navigation ---- */
.nv-form{white-space:nowrap}
.nv-form::before{content:"";display:inline-block;width:1px;height:1em;
  background:currentColor;opacity:.28;margin-inline-end:.9em;vertical-align:-.15em}
.bar nav .nv-form,.masthead-bar .nav .nv-form{color:var(--steel)}
.bar nav .nv-form:hover,.masthead-bar .nav .nv-form:hover{color:var(--paper)}
@media(max-width:900px){.nv-form::before{display:none}}

/* ---- Trading cashback dans la navigation ---- */
/* le lien reprend exactement la typographie des onglets, qui sont des boutons */
.nav .nv-cb,.bar nav .nv-cb{white-space:nowrap;font-family:var(--sans);font-size:13.5px;
  font-weight:400;color:rgba(242,239,232,.88);letter-spacing:normal;
  padding-block:6px;border-bottom:1px solid transparent;text-decoration:none}
/* la barre des sous-pages utilise un pas de 5 px */
.bar nav .nv-cb{padding-block:5px}
.nav .nv-cb:hover,.bar nav .nv-cb:hover{color:#fff;border-bottom-color:var(--steel)}
.nav .nv-cb[aria-current],.bar nav .nv-cb[aria-current]{color:#fff;border-bottom-color:var(--paper)}
@media(max-width:900px){.nav .nv-cb,.bar nav .nv-cb{font-size:13px}}
.nv-cb::before{content:"";display:inline-block;width:1px;height:1em;
  background:currentColor;opacity:.28;margin-inline-end:.9em;vertical-align:-.15em}
@media(max-width:900px){.nv-cb::before{display:none}}

/* ---- barre des langues : la langue active garde sa casse ---- */
.langbar span,.langbar a{text-transform:none}

/* ---- barre des langues : elle débordait de l'écran sur mobile ----
   Le bandeau utilitaire tenait sur une ligne de hauteur fixe ; en dessous
   de 620 px les quatre langues n'y entrent plus et poussaient la page de
   quinze pixels vers la droite. Elles passent à la ligne. */
@media(max-width:620px){
  .utility .wrap{flex-wrap:wrap;row-gap:6px;height:auto;padding-block:8px;min-height:0}
  .utility .sep{display:none}
  .utility .langbar{width:100%;margin-inline-start:0;justify-content:flex-start;
    flex-wrap:wrap;gap:8px 16px}
}

/* ---- tableaux larges : ils poussaient la page de huit pixels ----
   Plutôt que de comprimer les colonnes jusqu'à l'illisible, le tableau
   défile seul sous le doigt, comme les schémas. */
@media(max-width:620px){
  table.cmp, table.grille{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
    max-width:100%;scrollbar-width:none}
  table.cmp::-webkit-scrollbar, table.grille::-webkit-scrollbar{display:none}
  table.cmp thead, table.grille thead,
  table.cmp tbody, table.grille tbody{display:table;width:max-content;min-width:100%}
}

/* ---- tableaux larges : la bande 701–900 px n'était pas couverte ----
   nextbridge.css et produit.css déclarent tous deux .scrollx{overflow-x:auto},
   mais à l'intérieur d'un @media(max-width:700px). Au-dessus de ce seuil le
   conteneur ne contenait plus rien : sur une tablette de 820 px, le tableau
   des entités de la fiche Vantage poussait la page de quarante-huit pixels
   vers la droite, et toute la mise en page glissait avec lui.
   La règle est posée sans condition. Sur un grand écran le tableau tient dans
   la largeur, donc aucune barre n'apparaît et rien ne change à l'œil. */
.scrollx{overflow-x:auto;max-width:100%}

/* Un libellé de téléchargement long ne tient pas sur une ligne au téléphone.
   La règle est posée ici parce que produit.css redéfinit « .dl » après
   nextbridge.css : mobile.css est la dernière feuille chargée sur les
   vingt et une pages, donc la seule qui gagne à coup sûr. */
@media(max-width:600px){
  .dl{white-space:normal;display:inline;line-height:1.75}
}