/* ==========================================================================
   powergpu.io + cloud.powergpu.io — COUCHE APP MOBILE (03/09/2026).
   Fichier SÉPARÉ chargé en dernier (après site.css, et après console.css sur
   la console). Tout est additif : le bureau (> 720 px) ne change pas, sauf la
   section 0 (corrections de bugs valables à toute largeur).
   Conventions : mêmes tokens que site.css, aucun style inline (CSP 'self').
   ========================================================================== */

/* --- 0. Corrections globales (toute largeur) ------------------------------ */
/* [!] Un [hidden] doit toujours cacher : .btn/.callout/.pwmeter/.mtpl__i/.ctplc
   posent display:flex|grid et battaient l'attribut (jauge de mot de passe
   visible avant la saisie, filtre templates inopérant, « Show 30 more » affiché
   à 12 résultats, callout « Copy it now » toujours visible). */
[hidden]:not([hidden="until-found"]) { display: none !important; }

/* .mfield (support, settings, reset) n'existait dans aucune feuille : le
   libellé et le champ s'affichaient en ligne, sans style. */
.mfield { display: flex; flex-direction: column; gap: .3rem; }
.mfield > span {
  font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3);
}
.mfield > span small { font-weight: 500; text-transform: none; letter-spacing: 0; }
.mfield input:not([type="checkbox"]):not([type="radio"]), .mfield textarea {
  font: inherit; font-size: .92rem; width: 100%; padding: .55rem .7rem; color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: #fff;
}
.mfield input:focus, .mfield textarea:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-soft); }

/* Modal deploy : le drapeau (img.flag) héritait de .dm__head img { width: 84px }. */
.dm__head img.flag { width: 20px; height: 15px; }

/* Les chips de familles/catégories collaient à top:0 et passaient SOUS le
   header sticky (z 90 > 40) : elles suivent maintenant la hauteur du header. */
.famchips { top: var(--hdr-h, 64px); }

/* Grilles à colonne `1fr` : l'item hérite min-width:auto et sa table de 900 px
   élargissait la colonne au-delà du viewport (fiche GPU, pages produit). */
@media (max-width: 1080px) {
  .gfiche__grid { grid-template-columns: minmax(0, 1fr); }
  .gfiche__main, .gfiche__side { min-width: 0; }
  .prodsplit { grid-template-columns: minmax(0, 1fr); }
  .prodsplit > * { min-width: 0; }
}

/* Éléments réservés au mobile (rendus par PHP ou créés par app-mobile.js) :
   invisibles hors de la couche, pour ne rien changer au bureau. */
.gbar, .cnav, .rail-dots, .tbfilter, .mtoc, .dlay__sub { display: none; }
.drawer__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: .2rem 0 .3rem; }
.drawer__tile {
  display: flex; align-items: center; gap: .55rem; min-height: 50px; padding: .6rem .8rem;
  border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--bg-soft);
  font-weight: 620; font-size: .95rem; color: var(--ink); text-decoration: none !important;
}
.drawer__tile .ic { color: var(--brand); width: 20px; height: 20px; }

/* ==========================================================================
   1. TÉLÉPHONES (≤ 720 px) — la couche « app »
   ========================================================================== */
@media (max-width: 720px) {
  :root { --mnav-h: 58px; --sab: env(safe-area-inset-bottom, 0px); --hdr-h: 58px; }
  html { scroll-padding-top: calc(var(--hdr-h) + 12px); }
  body { padding-bottom: calc(var(--mnav-h) + var(--sab) + 6px); }
  a, button, summary, label, .btn { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  .mnav, .cnav, .drawer__bar, .ctop { user-select: none; -webkit-user-select: none; }
  .wrap { padding-inline: 16px; }

  /* --- Bandeau + header ------------------------------------------------- */
  .abar__in { min-height: 34px; padding-block: 3px; justify-content: space-between; gap: .6rem; }
  .abar__in::before { content: 'Every GPU ≥ 30% below market'; font-size: .76rem; font-weight: 600; color: #fff; white-space: nowrap; }
  .abar__link { font-size: .76rem; min-height: 32px; padding: 0 .1rem; }
  .hdr__in { min-height: var(--hdr-h); gap: .8rem; }
  .hdr .logo img, .drawer__bar .logo img { height: 34px; }
  .hdr__burger, .drawer__close { width: 40px; height: 40px; }
  .crumbs { padding-top: .7rem; font-size: .8rem; }
  .crumbs a { display: inline-block; padding: .25rem 0; }

  /* --- Barre d'onglets basse (vitrine) ------------------------------------ */
  .mnav {
    z-index: 210; grid-template-columns: repeat(5, 1fr);
    background: rgba(255, 255, 255, .97); border-top-color: var(--line);
    box-shadow: 0 -1px 0 rgba(16, 24, 40, .02); transition: transform .22s ease;
  }
  .mnav__i {
    padding: .4rem 0 .42rem; min-height: var(--mnav-h); justify-content: center;
    font-size: .6875rem; gap: .16rem; letter-spacing: .01em; font: inherit; font-weight: 600; color: var(--ink-2);
    background: none; border: 0; cursor: pointer; text-decoration: none !important;
  }
  .mnav__i .ic { width: 22px; height: 22px; }
  .mnav__i.is-on, .mnav__i[aria-expanded="true"] { color: var(--brand); }
  .mnav__go { width: 44px; height: 44px; margin-top: -20px; box-shadow: 0 6px 16px rgba(42, 45, 158, .38); }
  .mnav__go .ic { width: 21px; height: 21px; }
  html.kb-open .mnav { transform: translateY(120%); }

  /* --- Tiroir (menu) ------------------------------------------------------- */
  .drawer { padding-bottom: calc(var(--mnav-h) + var(--sab) + 28px); }
  .drawer__bar { min-height: var(--hdr-h); }
  .drawer__cta { margin-bottom: .6rem; }
  .drawer__cta .btn { padding: .75rem 1rem; font-size: .95rem; }
  .drawer__links li a { padding: .7rem .2rem; }
  .drawer__gpus li a { padding: .62rem .2rem; }

  /* --- Hero de l'accueil ---------------------------------------------------- */
  .hero__in { gap: 1.2rem; padding-block: 1.5rem 1.5rem; }
  .hero__eyebrow { font-size: .68rem; letter-spacing: .08em; margin-bottom: .7rem; line-height: 1.35; }
  .hero h1 { font-size: 2rem; }
  .hero__sub { font-size: .97rem; margin: .7rem 0 1rem; line-height: 1.5; }
  .hero__act { flex-direction: column; gap: .55rem; margin-bottom: .9rem; }
  .hero__act .btn { width: 100%; padding: .82rem 1rem; font-size: 1rem; }
  .hero__proof { gap: .3rem .9rem; font-size: .8rem; }
  .hero__ticker { padding: .8rem .85rem .7rem; }
  .ticker__head { font-size: .82rem; }
  .ticker__t th { padding: .25rem .3rem; }
  .ticker__t td { padding: .42rem .3rem; font-size: .86rem; }
  .ticker__ours .pill { margin-left: .25rem; }
  .ticker__foot { font-size: .7rem; margin-top: .5rem; }

  /* --- Bande de stats ------------------------------------------------------- */
  .stats__in { padding-block: 1rem; gap: .9rem .8rem; }
  .stat { padding-left: .75rem; }
  .stat strong { font-size: 1.3rem; }
  .stat span { font-size: .76rem; line-height: 1.3; display: block; }

  /* --- Sections ------------------------------------------------------------- */
  .sec { padding-block: 2.1rem; }
  .sec__head { margin-bottom: 1rem; gap: .8rem; }
  .sec__head--center { align-items: flex-start; text-align: left; }
  h2 { font-size: 1.38rem; }
  .sec__head p { font-size: .93rem; }
  .sec__foot { font-size: .8rem; line-height: 1.5; }
  .why__card { padding: 1rem 1.05rem; }
  .why__card p { font-size: .86rem; }
  .why__card h3 { font-size: 1rem; }
  .how__steps { gap: .9rem; margin: 1rem 0 1.2rem; }
  .how__act { flex-direction: column; }
  .how__act .btn { width: 100%; padding: .75rem; }
  .term__body { font-size: .78rem; padding: .85rem .9rem; }
  .how__templates { gap: .35rem; margin-top: .8rem; }
  .quote { padding: 1rem 1.05rem; }
  .faq__item summary { padding: .85rem 0; font-size: .95rem; }
  .faq__item p { font-size: .9rem; }
  .grid { gap: .75rem; }
  .grid--2 { gap: .75rem; }

  /* Rails horizontaux (défilement à crans) : cartes promotionnelles seulement.
     La classe est posée par app-mobile.js ; sans JS → pile verticale. */
  .is-rail {
    display: flex !important; grid-template-columns: none !important;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    gap: .65rem; margin-inline: -16px; padding: .15rem 16px .5rem; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .is-rail::-webkit-scrollbar { display: none; }
  .is-rail > * { flex: 0 0 min(78vw, 300px); scroll-snap-align: start; min-width: 0; }
  .is-rail .prod, .is-rail .work, .is-rail .quote, .is-rail .why__card { height: 100%; }
  .rail-dots { display: flex; justify-content: center; gap: .3rem; margin: .1rem 0 0; }
  .rail-dots i { width: 6px; height: 6px; border-radius: 99px; background: var(--line-2); transition: width .15s, background .15s; }
  .rail-dots i.is-on { width: 18px; background: var(--brand); }

  /* --- Tableaux → cartes ------------------------------------------------------
     app-mobile.js pose data-th sur chaque cellule, .tb-cards sur la table et
     .is-cards sur l'enveloppe .tblwrap. Sans JS : défilement horizontal natif. */
  .tblwrap.is-cards { overflow: visible; border: 0; border-radius: 0; background: transparent; }
  .tb-cards { display: block; min-width: 0 !important; width: 100%; }
  .tb-cards thead { display: none; }
  .tb-cards tbody { display: flex; flex-direction: column; gap: .6rem; }
  .tb-cards tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem .75rem; align-items: start;
    padding: .85rem .95rem; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
  }
  .tb-cards tbody tr:hover { background: #fff; }
  .tb-cards td, .tb-cards th {
    display: block; padding: 0 !important; border: 0 !important; background: none !important;
    font-size: .88rem; text-align: left !important; white-space: normal; min-width: 0; color: var(--ink);
  }
  .tb-cards td::before {
    content: attr(data-th); display: block; font-size: .62rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ink-3); margin-bottom: .08rem; font-family: var(--font);
  }
  .tb-cards td[data-th=""]::before, .tb-cards td:not([data-th])::before { display: none; }
  .tb-cards .tb-title, .tb-cards tbody th {
    grid-column: 1 / -1; font-size: 1.02rem; font-weight: 650; color: var(--ink);
    padding-bottom: .3rem !important; border-bottom: 1px solid var(--line) !important;
  }
  .tb-cards .tb-title::before { display: none; }
  .tb-cards .tb-title .pill { vertical-align: middle; }
  .tb-cards .tb-wide { grid-column: 1 / -1; }
  .tb-cards .tb-act { grid-column: 1 / -1; margin-top: .2rem; }
  .tb-cards .tb-act::before { display: none; }
  .tb-cards .tb-act .btn {
    display: flex; width: 100%; justify-content: center; padding: .66rem 1rem; font-size: .94rem;
    background: var(--brand); color: #fff; border-color: var(--brand-deep);
  }
  .tb-cards .tb-act .btn--tinydanger { background: #fff; color: #b42318; border-color: #fecdca; }
  .tb-cards .th__note { display: none; }
  /* Cellule prix des tables GPU : encadré accent, pleine largeur */
  .tb-cards td.gput__price, .tb-cards td.cmp__us {
    grid-column: 1 / -1; background: var(--brand-soft) !important; border: 1px solid var(--brand-line) !important;
    border-radius: var(--radius-sm); padding: .45rem .65rem !important;
  }
  .tb-cards td.gput__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; }
  .tb-cards td.gput__price::before, .tb-cards td.cmp__us::before { flex: 1 1 100%; color: var(--brand-deep); }
  .tb-cards .gput__val { font-size: 1.3rem; font-weight: 600; }
  .tb-cards .gput__price .pill { margin-left: 0; }
  .tb-cards td.gput__ref { color: var(--ink-3); text-decoration: none; }
  .tb-cards td.gput__ref .tb-val { text-decoration: line-through; }
  /* Catalogue /gpus : 9 colonnes → 3 cellules par rangée, carte plus courte */
  .tb-cards.gput--cat tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tb-cards.gput--cat td.gput__price { order: 1; }
  .tb-cards.gput--cat td.gput__ref, .tb-cards.gput--cat td:nth-child(7), .tb-cards.gput--cat td:nth-child(8) { order: 2; }
  .tb-cards.gput--cat td.tb-act { order: 3; }
  /* Tables de l'espace client : 3 cellules par rangée, titre discret (date / référence) */
  .tb-cards.atable tr { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem .6rem; }
  .tb-cards.atable .tb-title { font-size: .92rem; }
  .tb-cards.atable td { font-size: .84rem; }
  .tb-cards .avail { font-size: .88rem; }
  .tb-cards .gput__mo { font-size: .88rem; }
  /* Filtre rapide de la feuille de prix (inséré par JS sur /pricing) */
  .tbfilter { display: block; position: relative; margin: 0 0 .7rem; }
  .tbfilter input {
    width: 100%; font: inherit; font-size: 16px; padding: .62rem .9rem .62rem 2.3rem; color: var(--ink);
    border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: #fff;
  }
  .tbfilter input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
  .tbfilter .ic { position: absolute; left: .75rem; top: 50%; translate: 0 -50%; color: var(--ink-3); width: 17px; height: 17px; }
  .tbfilter__n { position: absolute; right: .75rem; top: 50%; translate: 0 -50%; font-size: .72rem; color: var(--ink-3); }
  tr.tb-hide { display: none !important; }

  /* --- Pages intérieures : héros, chips, fiches -------------------------------- */
  .phero { padding: 1.2rem 0 1.3rem; }
  .phero__in { gap: 1rem; }
  .phero__eyebrow { font-size: .68rem; line-height: 1.35; margin-bottom: .6rem; }
  .phero h1 { font-size: 1.62rem; margin-bottom: .7rem; }
  .phero__sub { font-size: .95rem; margin-bottom: .9rem; line-height: 1.55; }
  .phero__act { flex-direction: column; gap: .5rem; }
  .phero__act .btn { width: 100%; padding: .75rem 1rem; }
  .phero__aside { width: 100%; }
  .lmeta { grid-template-columns: 1fr 1fr 1fr; gap: .4rem; min-width: 0; }
  .lmeta li { flex-direction: column; align-items: flex-start; gap: .05rem; padding: .45rem .55rem; font-size: .7rem; }
  .lmeta li strong { font-size: .84rem; }
  .lmeta li:last-child { grid-column: 1 / -1; }
  .famchips__in { padding: .5rem 16px; gap: .4rem; }
  .famchip { min-height: 36px; padding: .3rem .8rem; }
  .sec--fam { scroll-margin-top: calc(var(--hdr-h) + 58px); }
  .sec__count { display: inline-block; margin-left: .3rem; }

  /* Fiche GPU */
  .gfiche { padding: 1.1rem 0 2rem; }
  .gfiche__grid { gap: 1.4rem; }
  .ghero h1 { font-size: 1.6rem; margin-bottom: .8rem; }
  .gstats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; margin-bottom: .9rem; }
  .gstat { padding: .5rem .6rem; }
  .gstat__v { font-size: .98rem; }
  .gstat:last-child { grid-column: 1 / -1; }
  .gmodes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .gmode--main { grid-column: 1 / -1; }
  .gmode { padding: .75rem .8rem; }
  .gmode__p { font-size: 1.25rem; }
  .gmode__k { font-size: .7rem; }
  .gmode__m { font-size: .72rem; }
  .ghero__note { font-size: .78rem; }
  .gfiche__main h2 { font-size: 1.15rem; margin: 1.7rem 0 .7rem; }
  .gmedia { padding: .9rem; gap: .8rem; margin-top: 1.2rem; }
  .gmedia img { width: 120px; height: auto; }
  .gmedia p { font-size: .88rem; }
  .gfiche__side { gap: .8rem; grid-template-columns: 1fr; }
  .buybox { padding: 1rem; }
  .buybox__price { font-size: 1.5rem; }
  .gregs__i { font-size: .8rem; padding: .28rem .65rem; }
  /* Barre d'achat collante (fiche GPU) : apparaît une fois les cartes de
     modes défilées, se range au-dessus de la barre d'onglets. */
  .gbar {
    position: fixed; left: 0; right: 0; bottom: calc(var(--mnav-h) + var(--sab)); z-index: 205;
    display: flex; align-items: center; gap: .7rem; padding: .5rem 14px;
    background: rgba(255, 255, 255, .97); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--line-2); box-shadow: 0 -6px 20px rgba(16, 24, 40, .08);
    transform: translateY(calc(100% + var(--mnav-h) + var(--sab) + 4px)); transition: transform .22s ease;
  }
  .gbar.is-on { transform: none; }
  html.kb-open .gbar { transform: translateY(200%); }
  .gbar__txt { flex: 1; min-width: 0; }
  .gbar__k { margin: 0; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gbar__p { margin: 0; font-size: 1.08rem; font-weight: 600; color: var(--ink); line-height: 1.15; }
  .gbar__p small { font-size: .7rem; font-weight: 500; color: var(--ink-3); margin-left: .2rem; font-family: var(--font); }
  .gbar .btn { flex: none; padding: .66rem 1rem; }

  /* Produits, use-cases, about, enterprise */
  .prodsplit { gap: 1.2rem; }
  .prodsplit h2 { font-size: 1.2rem; }
  .pitch { padding: .95rem 1rem; }
  .ticklist li { font-size: .9rem; }
  .uch__card, .doch__card { padding: 1rem 1.05rem; }
  .coinl { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .coinl__i { padding: .55rem .7rem; font-size: .86rem; }
  .formula__card { padding: 1rem 1.05rem; }
  .formula__big { font-size: 1.6rem; }

  /* Templates (vitrine) : cartes compactes */
  .tplc__card { padding: .8rem .9rem; gap: .4rem; }
  .tplc__img { display: none; }
  .tplc__d { font-size: .82rem; }
  .tplc__card .btn { align-self: stretch; justify-content: center; padding: .6rem; font-size: .9rem; background: var(--brand); color: #fff; border-color: var(--brand-deep); }

  /* --- Docs / guides / legal ---------------------------------------------------- */
  .dlay, .glay { padding: .9rem 0 2rem; gap: 1rem; }
  html.has-appjs .dlay__nav { padding: 0; background: #fff; display: block; border-color: var(--line-2); }
  html.has-appjs .dlay__brand {
    margin: 0; padding: .75rem .9rem; cursor: pointer; display: flex; align-items: center; gap: .45rem; font-size: .95rem;
  }
  html.has-appjs .dlay__brand::after {
    content: ''; margin-left: auto; width: 8px; height: 8px; flex: none;
    border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg); transition: transform .15s;
  }
  html.has-appjs .dlay__nav.is-open .dlay__brand::after { transform: rotate(-135deg); }
  html.has-appjs .dlay__nav:not(.is-open) > :not(.dlay__brand) { display: none; }
  html.has-appjs .dlay__nav.is-open { padding-bottom: .5rem; }
  html.has-appjs .dlay__nav .dlay__h { margin: .5rem .9rem .15rem; }
  html.has-appjs .dlay__links a { padding: .55rem .9rem; border-left-width: 3px; border-radius: 0; }
  html.has-appjs .dlay__links--rich a { padding: .55rem .9rem; }
  .dlay__nav .dlay__sub { display: inline; font-weight: 500; color: var(--ink-3); font-size: .84rem; }
  .dhead { margin-bottom: 1rem; padding-bottom: .9rem; }
  .dhead__eyebrow { display: flex; flex-wrap: wrap; gap: .2rem .45rem; font-size: .68rem; line-height: 1.4; }
  .prose { font-size: .95rem; }
  .prose h1 { font-size: 1.5rem; }
  .prose h2 { font-size: 1.15rem; margin-top: 1.7rem; }
  .prose__lead { font-size: 1rem; }
  .codeb pre { padding: .75rem .8rem; }
  .codeb code { font-size: .76rem; }
  .dlay__pn { flex-direction: column; gap: .6rem; margin-top: 1.8rem; }
  .dlay__pn-a--next { text-align: left; }
  .dlay__rail, .glay__rail { gap: .8rem; }
  .tldr { padding: .9rem 1rem .8rem; }
  .tldr li { font-size: .9rem; }
  /* Sommaire mobile : <details> inséré en tête d'article par app-mobile.js */
  .mtoc { display: block; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-soft); margin: 0 0 1.1rem; }
  .mtoc > summary {
    list-style: none; display: flex; align-items: center; gap: .45rem; padding: .7rem .9rem;
    font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); cursor: pointer;
  }
  .mtoc > summary::-webkit-details-marker { display: none; }
  .mtoc > summary .ic { color: var(--brand); }
  .mtoc > summary::after {
    content: ''; margin-left: auto; width: 8px; height: 8px; flex: none;
    border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg); transition: transform .15s;
  }
  .mtoc[open] > summary::after { transform: rotate(-135deg); }
  .mtoc .toc { display: block; border: 0; background: none; padding: 0 .9rem .5rem; font-size: .9rem; }
  .mtoc .toc__h { display: none; }
  .mtoc .toc ul { gap: 0; }
  .mtoc .toc a { padding: .42rem .55rem; margin-left: 0; border-left-width: 3px; }
  .ghero2 { padding: 1rem 0 1.2rem; }
  .ghero2 h1 { font-size: 1.5rem; }
  .ghero2__lead { font-size: .95rem; }
  .gfeat__body { padding: 1rem; gap: .5rem; }
  .gfeat__body h2 { font-size: 1.2rem; }
  .gcards { gap: .8rem; }
  .gcard__body { padding: .85rem .95rem 1rem; }
  .gchips { gap: .35rem; }
  .gnext .sec__head { align-items: flex-start; }

  /* --- Status ------------------------------------------------------------------- */
  .sthero { padding: 1.3rem 0 1.2rem; }
  .sthero h1 { font-size: 1.4rem; }
  .stkpi { grid-template-columns: 1fr 1fr; gap: .45rem; }
  .stkpi li { min-width: 0; padding: .5rem .7rem; }
  .stcomp__row { padding: .7rem .8rem; }
  .stmet__c { padding: .85rem .9rem .7rem; }
  .inc { padding: .85rem .95rem; }

  /* --- CTA + pied de page --------------------------------------------------------- */
  .cta__in { padding-block: 2rem; gap: 1.1rem; }
  .cta__txt h2 { font-size: 1.35rem; }
  .cta__txt p { font-size: .93rem; }
  .cta__act { flex-direction: column; width: 100%; gap: .5rem; }
  .cta__act .btn { width: 100%; padding: .8rem; }
  .ftr { padding-block: 1.8rem 1rem; }
  .ftr__top { grid-template-columns: 1fr; gap: 0; padding-bottom: .5rem; }
  .ftr__brand { padding-bottom: 1rem; margin-bottom: .2rem; border-bottom: 1px solid #1d2b52; }
  .ftr__tag { margin: .6rem 0 .8rem; }
  .ftr__facts { gap: .35rem; margin-bottom: .8rem; }
  .ftr__status { padding: .3rem 0; }
  .ftr__col { border-bottom: 1px solid #1d2b52; }
  html.has-appjs .ftr__h {
    margin: 0; padding: .9rem 0; display: flex; align-items: center; cursor: pointer; font-size: .78rem; color: #b9c3dc;
  }
  html.has-appjs .ftr__h::after {
    content: ''; margin-left: auto; width: 8px; height: 8px; flex: none;
    border-right: 2px solid #64749c; border-bottom: 2px solid #64749c; transform: rotate(45deg); transition: transform .15s;
  }
  html.has-appjs .ftr__col.is-open .ftr__h::after { transform: rotate(-135deg); }
  html.has-appjs .ftr__col ul { display: none; padding-bottom: .5rem; gap: 0; }
  html.has-appjs .ftr__col.is-open ul { display: flex; }
  .ftr__col li a { display: block; padding: .5rem 0; font-size: .92rem; }
  .ftr__pay { padding-block: .9rem; gap: .6rem; }
  .ftr__pay-list { gap: .5rem .9rem; }
  .ftr__pay-list li { min-height: 28px; }
  .ftr__bottom { font-size: .74rem; padding-top: 1rem; }
  .err__in { padding-block: 1.5rem; }
  .err__code { font-size: 3.2rem; }
  .err__act { flex-direction: column; }
  .err__act .btn { width: 100%; }

  /* ==========================================================================
     CONSOLE cloud.powergpu.io (≤ 720 px)
     ========================================================================== */
  body.p-console { padding-bottom: calc(var(--mnav-h) + var(--sab) + 6px); }
  .ctop { padding: .45rem 12px; min-height: 54px; gap: .6rem; }
  .ctop__burger { width: 40px; height: 40px; }
  .ctop .logo img { height: 28px; }
  .ctop__auth { padding: .46rem .8rem; font-size: .84rem; }
  .ctop__bal { font-size: .84rem; }

  /* Barre d'onglets basse de la console */
  .cnav {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 145;
    display: grid; grid-template-columns: repeat(5, 1fr);
    background: rgba(255, 255, 255, .97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--line); padding-bottom: var(--sab); transition: transform .22s ease;
  }
  .cnav__i {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .16rem;
    min-height: var(--mnav-h); padding: .4rem 0 .42rem; font: inherit; font-size: .6875rem; font-weight: 600;
    color: var(--ink-2); background: none; border: 0; cursor: pointer; text-decoration: none !important;
  }
  .cnav__i .ic { width: 22px; height: 22px; }
  .cnav__i.is-on, .cnav__i[aria-expanded="true"] { color: var(--brand); }
  .cnav__i--go { color: var(--brand-deep); }
  .cnav__go {
    display: grid; place-items: center; width: 44px; height: 44px; margin-top: -20px;
    background: var(--brand); color: #fff; border-radius: 50%; border: 3px solid #fff;
    box-shadow: 0 6px 16px rgba(42, 45, 158, .38);
  }
  .cnav__go .ic { width: 21px; height: 21px; }
  html.kb-open .cnav, html.kb-open .fab { transform: translateY(150%); }
  body.fil-open .cnav { display: none; }
  .fab { bottom: calc(var(--mnav-h) + var(--sab) + 12px); padding: .55rem 1rem; font-size: .86rem; transition: transform .22s ease; }

  /* Barre de déploiement */
  .deploy__in { padding: .5rem 12px .55rem; gap: .45rem .5rem; }
  .deploy__grp--tpl { flex: 1 1 130px; }
  .deploy__grp--sort { flex: 1.3 1 150px; }
  .tplsel { padding-block: .46rem; }
  .csel { font-size: 16px; padding-block: .42rem; }
  .cwrap { padding: .8rem 12px 6.5rem; }
  .cres__bar { margin-bottom: .55rem; gap: .5rem; }
  .cres__count { font-size: .86rem; }
  .achip { min-height: 30px; }

  /* Cartes d'offres compactes : 2 machines par écran, prix + Deploy toujours visibles */
  .card { border-radius: 12px; }
  .card__main { padding: .8rem .85rem .7rem; }
  .card__title { gap: .4rem; }
  .card__title h3 { font-size: 1rem; }
  .card__loc { font-size: .78rem; }
  .card__sub { margin: .25rem 0 .6rem; font-size: .76rem; line-height: 1.4; }
  .card__specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem .45rem; }
  .spec--score { min-width: 0; grid-column: span 2; }
  .spec__k { font-size: .6rem; letter-spacing: .04em; white-space: normal; }
  .spec__v { font-size: .78rem; white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
  .spec__v small { display: none; }
  .card__buy {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "price go" "est go" "mkt go";
    align-items: center; gap: .05rem .8rem; padding: .65rem .85rem; text-align: left;
  }
  .card__price { grid-area: price; font-size: 1.2rem; }
  .card__est { grid-area: est; font-size: .72rem; }
  .card__mkt { grid-area: mkt; font-size: .72rem; }
  .card__go { grid-area: go; padding: .66rem 1.15rem; margin: 0; width: auto; }
  .card__sec { display: none; }
  .cres__more .btn { width: 100%; padding: .75rem; }
  .cempty { padding: 2.2rem 1rem; }

  /* Tiroir de filtres */
  .cfil { padding-bottom: 0; }
  .cfil__apply { padding: .7rem 0 calc(.8rem + var(--sab)); }
  .cfil__apply .btn { padding: .78rem; font-size: .95rem; }
  .cinput { font-size: 16px; }
  .cinput--n { width: 100px; }
  .fset summary { padding: .8rem 0; }
  .gpul__row { padding: .42rem .3rem; min-height: 40px; }
  .gpul__row input { width: 18px; height: 18px; }
  .chip { min-height: 34px; padding: .3rem .75rem; }
  .fswitch { min-height: 40px; }
  .snav { padding-bottom: calc(var(--mnav-h) + var(--sab) + 12px); }
  .snav__i { padding: .7rem .7rem; }

  /* Modals → feuilles basses */
  .modal { padding: 0; place-items: end stretch; }
  .modal__box {
    width: 100%; max-width: none; border-radius: 18px 18px 0 0; border-bottom: 0;
    max-height: min(92dvh, 100%); padding: .9rem 1.05rem calc(1.1rem + var(--sab));
    animation: msheet .28s cubic-bezier(.2, .8, .2, 1);
  }
  .modal__box::before {
    content: ''; display: block; width: 38px; height: 4px; border-radius: 99px; background: var(--line-2); margin: 0 auto .8rem;
  }
  @keyframes msheet { from { transform: translateY(48px); opacity: .5; } to { transform: none; opacity: 1; } }
  .modal__box--auth { grid-template-columns: 1fr; padding: 0 0 var(--sab); max-height: 94dvh; }
  .modal__box--auth::before { display: none; }
  .modal__box--tpl { max-height: 88dvh; width: 100%; padding: .9rem 1rem calc(.8rem + var(--sab)); }
  .modal__x { top: .55rem; right: .55rem; }
  .modal__box--auth .modal__x { color: #fff; background: rgba(255, 255, 255, .12); }
  .mside { padding: .8rem 1rem; border-radius: 18px 18px 0 0; }
  .mmain { padding: 1.1rem 1.1rem 1rem; }
  .mpane h2 { font-size: 1.2rem; }
  .mpane__sub { margin-bottom: .9rem; }
  .mform { gap: .55rem; }
  .mfield2__in input { font-size: 16px; }
  .mform__go { padding: .82rem; }
  .mtpl__q { font-size: 16px; }
  .mtpl__i { min-height: 52px; }
  .dm__head img { width: 64px; }
  #dm-go { padding: .82rem; }

  /* Espace client */
  .apage { padding: .9rem 12px 2rem; }
  .apage__title { font-size: 1.25rem; margin-bottom: .8rem; }
  .tiles { gap: .55rem; margin-bottom: .9rem; }
  .tile { padding: .8rem .85rem; }
  .tile--big { padding: 1rem; }
  .tile__v { font-size: 1.25rem; }
  .tile__v--xl { font-size: 1.5rem; }
  .apanel { padding: .9rem .9rem; margin-bottom: .8rem; }
  .apanel__head { flex-wrap: wrap; gap: .5rem; margin-bottom: .6rem; }
  .callout { padding: .8rem .85rem; font-size: .86rem; }
  .bhero { gap: .7rem; margin-bottom: .9rem; }
  .bhero__side { flex-direction: column; align-items: stretch; gap: .4rem; padding: 1rem; }
  .bhero__bal { font-size: 1.7rem; margin: 0 0 .4rem; }
  .bhero__facts { min-width: 0; width: 100%; gap: .35rem; }
  .bhero__facts li { padding-bottom: .35rem; font-size: .8rem; }
  .bhero__note { padding-top: .6rem; font-size: .74rem; flex-basis: auto; margin: 0; }
  .bhero__topup { padding: 1rem .95rem; }
  .bh-head h2 { font-size: 1.05rem; }
  .bh-amounts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
  .bh-amt { padding: .62rem 0; text-align: center; }
  .bh-custom { grid-column: 1 / -1; padding-left: .8rem; }
  .bh-custom input { width: 100%; font-size: 16px; padding-block: .62rem; }
  .bh-coins { gap: .4rem; }
  .bh-coin { padding: .6rem .6rem .55rem; }
  .bh-coin__badge { font-size: .56rem; }
  .bh-go { padding: .82rem; }
  .bh-result { gap: .8rem; }
  .icard { grid-template-columns: 1fr; gap: .45rem; padding: .8rem .85rem; }
  .icard__img { display: none; }
  .icard__num { grid-column: 1; text-align: left; }
  .icard__act { grid-column: 1; }
  .icard__act .btn { flex: 1; justify-content: center; padding: .6rem; }
  .ihead { gap: .7rem; margin-bottom: .9rem; }
  .ihead__img { width: 64px; }
  .ihead__t h2 { font-size: 1.1rem; }
  .ihead__act { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-left: 0; width: 100%; }
  .ihead__act .btn { justify-content: center; }
  .ihead__act .btn:only-child { grid-column: 1 / -1; }
  .tiles--4 { grid-template-columns: 1fr 1fr; }
  .tiles--2col { grid-template-columns: 1fr; }
  .tile__a { min-height: 32px; align-items: center; }
  .hintl li { display: block; position: relative; padding-left: 1.35rem; line-height: 1.5; }
  .hintl li .ic--sm { position: absolute; left: 0; top: .3em; }
  .mfield input:not([type="checkbox"]):not([type="radio"]), .mfield textarea, input[type="range"] { font-size: 16px; }
  .codebar { padding: .5rem .7rem; flex-wrap: wrap; }
  .codebar code { white-space: normal; overflow-wrap: anywhere; word-break: break-all; flex: 1 1 200px; font-size: .8rem; }
  .codebar .btn { margin-left: auto; }
  .pay__net { display: block; position: relative; padding-left: 2.1rem; }
  .pay__net .ic--sm { position: absolute; left: .75rem; top: .7rem; }
  .pay__crumb { font-size: .84rem; }
  .pay__state { padding: .8rem .9rem; gap: .7rem; }
  .pay__card { padding: .95rem .9rem; }
  .pay__h { font-size: 1rem; }
  .pay__amt { font-size: 1.2rem; }
  .pay__acts { display: grid; grid-template-columns: 1fr; gap: .45rem; }
  .pay__acts .btn { width: 100%; }
  .pay__acts .paylnk { justify-self: center; padding: .5rem; }
  .chat__m { max-width: none; }
  .krow { flex-direction: column; }
  .krow .cinput { max-width: none; }
  .krow .btn { width: 100%; justify-content: center; padding: .7rem; }
  .mform--inline { max-width: none; }
  .mform .btn[type="submit"] { padding: .75rem; }
  .specgrid { gap: .6rem; }
  .hintl { font-size: .84rem; }
  .cftr__in { flex-direction: column; gap: .4rem; padding: .9rem 12px calc(.9rem + var(--mnav-h)); }
  .cftr__in nav { gap: .1rem; flex-wrap: wrap; justify-content: center; }
  .cftr__in nav a { padding: .5rem .55rem; }
  .ctpl__head { gap: .6rem; margin-bottom: .7rem; }
  .ctpl__head h1 { font-size: 1.25rem; }
  .ctpl__search { padding: .35rem .7rem; }
  .ctpl__search input { font-size: 16px; }
  .ctpl__chips { gap: .3rem; margin-bottom: .8rem; }
  .ctplc { padding: .8rem .85rem; gap: .4rem; }
  .ctplc__img { display: none; }
  .ctplc__act .btn { width: 100%; justify-content: center; padding: .6rem; }
}

/* --- Très petits écrans (≤ 360 px) ------------------------------------------ */
@media (max-width: 360px) {
  .hero h1 { font-size: 1.8rem; }
  .abar__in::before { content: '≥ 30% below market'; }
  .mnav__i, .cnav__i { font-size: .64rem; }
  .stats__in { grid-template-columns: 1fr 1fr; }
  .tb-cards tr { padding: .75rem .8rem; }
  .card__specs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .spec--score { grid-column: span 3; }
  .bh-amounts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lmeta { grid-template-columns: 1fr 1fr; }
}

/* --- Pointeur tactile : pas de survol collant, zones ≥ 44 px ------------------- */
@media (hover: none) and (pointer: coarse) {
  .btn--tiny { padding: .42rem .8rem; }
  .sidelinks a, .toc a { padding-block: .5rem; }
  .achip, .chip, .famchip { min-height: 34px; }
}

/* --- Mouvement réduit ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mnav, .cnav, .gbar, .fab, .modal__box { transition: none; animation: none; }
  .is-rail { scroll-behavior: auto; }
}
