/* ─────────────────────────────────────────────────────────────────────────
   ai-subscription.io — couche « application » des téléphones et tablettes
   (UX mobile, 23/09/2026).
   Chargée par inc/header.php APRÈS site.css et pages.css, avec
   media="(max-width: 1060px)" ; chaque règle est en plus dans une requête
   ≤ 1060 px. Au-dessus (écran de bureau), RIEN ici ne s'applique : le rendu
   PC ne peut pas bouger.
     1. Socle (≤ 1060) : zones sûres (encoche en paysage), rubans défilants,
        champs, textes ≥ 12 px, retours tactiles, cibles ≥ 44 px,
        transitions entre les pages.
     2. Barre d'onglets et tiroir (≤ 900) : Accueil, Offres, Panier, Compte,
        Menu ; barres d'action (fiche produit, panier), clavier ouvert.
     3. Téléphone (≤ 700) : fiche produit (visuel compact, offres en feuille),
        catalogue de l'accueil en carrousel, cartes compactes, pied de page.
     4. Petits téléphones (≤ 430, ≤ 374) : corrections de mise en page.
   Mêmes jetons que site.css. CSP : aucun style en ligne. Relever ASSET_V.
   ───────────────────────────────────────────────────────────────────────── */

/* ── 1. Socle ─────────────────────────────────────────────────────────── */
@media (max-width:1060px){
  html{-webkit-tap-highlight-color:transparent;background:var(--ink-900)}
  /* Téléphone en paysage : le contenu reste hors de l'encoche. */
  .wrap{padding-left:max(var(--gut),env(safe-area-inset-left));padding-right:max(var(--gut),env(safe-area-inset-right))}
  /* Rubans défilants : aucun élément ne rétrécit sous son contenu (Safari
     compressait les pastilles et le texte en sortait). */
  .hch__chips > *,.cl-cats > *,.tabs > *,.pr-nav__l > *,.stepnav__l > *,.blcats > *,.fq__nav li,.acx__nav li{flex-shrink:0}
  /* Invite trop longue pour le champ : « … » plutôt qu'un mot coupé net. */
  .hcs__in,.msrch__in,.mnu__q,.cl-q__in,.soon__q{text-overflow:ellipsis}
  /* Étiquettes : jamais sous 12 px. */
  .bpc__h,.bpc__pr small,.bcmp__p small,.kfacts dt,.acx__n,.otl small,.pay__steps i,.pay__cb small,.msg__new{font-size:.75rem}
  /* Champs de l'espace client et du panier : 16 px, sinon iOS zoome la page au toucher. */
  .cl__sel{font-size:16px}
}

/* Retours tactiles : l'élément touché répond tout de suite ; pas de carte qui
   reste « soulevée » après un appui (survol collant des écrans tactiles). */
@media (max-width:1060px) and (hover:none){
  .btn,.tab,.chip,.cl-cat,.pc__chip,.cpy,.ibtn,.burger,.pr-nav__a,.stepnav a,.xs__add,.qty__b,.seg span,.blcats__a,.fq__nav a,.tabbar__i{transition-property:background-color,border-color,color,box-shadow,scale;transition-duration:.15s}
  .btn:active,.tab:active,.chip:active,.cl-cat:active,.pc__chip:active,.cpy:active,.ibtn:active,.burger:active,.pr-nav__a:active,.stepnav a:active,.xs__add:active,.qty__b:active,.blcats__a:active,.fq__nav a:active{scale:.96}
  .pc,.pick,.plinks a,.ft__hc,.mnu__links a,.soon__links a,.blc__a,.oc,.bpc__l a,.sidec__l a,.quick__a{transition:scale .15s var(--ease),box-shadow .2s,border-color .2s,background-color .15s}
  .pc:active,.pick:active,.plinks a:active,.ft__hc:active,.mnu__links a:active,.soon__links a:active,.blc__a:active,.oc:active,.quick__a:active{scale:.985}
  .mnu__item:active,.mnu__cat summary:active,.pop__o:active,.bpc__l a:active,.sidec__l a:active,.faq__i summary:active,.ofr__o:active{background-color:rgba(127,133,153,.12)}
  .pc:hover,.oc:hover,.blc__a:hover{translate:none}
  .pc:hover{box-shadow:var(--sh-1);border-color:var(--line)}
  .pc:hover .pc__perf::before,.pc:hover .pc__perf::after{box-shadow:inset 0 0 0 1px var(--line)}
  .btn:hover .ic--arrow,.lnk:hover .ic,.pick:hover .pick__go,.plinks a:hover .plinks__go,.ft__hc:hover > .ic:last-child,.blc__a:hover .blc__go .ic{translate:none}
}

/* Cibles tactiles ≥ 40–44 px (écrans tactiles jusqu'à 1060 px, et tout écran ≤ 700 px). */
@media (max-width:1060px) and (pointer:coarse),(max-width:700px){
  .pc__offers{gap:.45rem}
  .pc__chip{height:40px;padding:0 .8rem}
  .sbar__chg{padding:.75rem 0}
  .tbl a:not(.btn){padding-left:.35rem;padding-right:.35rem;margin-left:-.35rem;margin-right:-.35rem}
  .cl-q__in,.cl-sel select{font-size:16px}
  .ft__col a{display:block}
  .ft__legal a{display:inline-block;padding:.75rem .15rem}
  .crumbs a{padding:.6rem .4rem;margin:0 -.4rem}
  .pp__brand a{display:inline-block;padding:.65rem 0}
  .cl-view__b{width:44px;height:40px}
  .cl-plan{min-height:44px}
  .xs__add{height:40px}
  .pgrp__open{min-height:44px}
  .brands__all{height:40px}
  .cl__sel{height:44px}
  .qty__in{width:44px}
  .dlv__show{height:40px}
  .csum__all summary{padding:.6rem 0}
  /* Petits boutons et liens posés dans une ligne de texte : zone de toucher
     agrandie sans rien déplacer (pseudo-élément autour). */
  .cpy--ghost,.pay__foot a,.xs__t a,.cks a{position:relative}
  .cpy--ghost::after,.pay__foot a::after,.xs__t a::after,.cks a::after{content:"";position:absolute;inset:-10px -6px}
}
/* Jusqu'à 900 px (téléphones, tablettes en portrait) : mêmes cibles que les
   écrans tactiles, même si le navigateur ne se déclare pas « tactile ». */
@media (max-width:900px){
  .brands__a,.chip,.brands__all{height:40px}
  .tab{height:44px}
  .ft__col ul{gap:.1rem}
  .ft__col a{display:block;padding:.55rem 0}
  .ft__legal a{display:inline-block;padding:.75rem .15rem}
  .crumbs a{display:inline-block;padding:.6rem .4rem;margin:0 -.4rem}
  .lnk{min-height:40px}
  .cpy{height:40px}
  .dlv__show,.xs__add{height:40px}
  .pgrp__t a{padding:0 .25rem;margin:0 -.25rem}
}
@media (max-width:700px){
  .xs__add{width:44px;height:44px}
}

/* Transitions entre les pages (Chrome, Safari 18.2+) : fondu court ; l'en-tête
   et la barre d'onglets, identiques d'une page à l'autre, restent immobiles. */
@media (max-width:1060px) and (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .hd{view-transition-name:app-hd}
  .tabbar{view-transition-name:app-tabbar}
  ::view-transition-group(root){animation-duration:.2s}
}

/* ── 2. Barre d'onglets, tiroir, barres d'action (≤ 900 px) ──────────────── */
@media (max-width:900px){
  :root{--tb-h:58px}
  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:47;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);padding:0 max(4px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px,env(safe-area-inset-left));background:rgba(10,12,22,.95);border-top:1px solid var(--lnd-2);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);transition:translate .26s var(--ease),visibility 0s linear 0s}
  html:not(.js) .tabbar__menu{display:none}
  .tabbar__a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:var(--tb-h);min-width:0;padding:0 2px;color:var(--od-3);font-size:.75rem;font-weight:600;line-height:1.15;letter-spacing:.005em;white-space:nowrap;cursor:pointer;transition:color .15s}
  .tabbar__i{position:relative;display:grid;place-items:center;width:54px;height:30px;border-radius:var(--pill)}
  .tabbar__i .ic{width:22px;height:22px}
  .tabbar__a[aria-current="page"],.tabbar__a[aria-expanded="true"]{color:#fff}
  .tabbar__a[aria-current="page"] .tabbar__i,.tabbar__a[aria-expanded="true"] .tabbar__i{background:rgba(60,242,165,.15);color:var(--mint)}
  html.has-menu .tabbar__a[aria-current="page"]{color:var(--od-3)}
  html.has-menu .tabbar__a[aria-current="page"] .tabbar__i{background:none;color:inherit}
  .tabbar__a:active .tabbar__i{scale:.9}
  .tabbar__a:focus-visible{outline:none}
  .tabbar__a:focus-visible .tabbar__i{outline:2px solid var(--mint);outline-offset:2px}
  .tabbar__n{position:absolute;top:-3px;right:5px;min-width:18px;height:18px;padding:0 5px;border-radius:var(--pill);background:var(--mint);color:var(--ink-900);font-size:.75rem;font-weight:800;line-height:18px;text-align:center;box-shadow:0 0 0 2px var(--ink-900)}
  /* Masquée : barre d'action d'une fiche, clavier ouvert, paiement ou feuille ouverts. */
  html.ctx-bar .tabbar,html.kb-open .tabbar,html.pm-open .tabbar,html.sheet-open .tabbar{translate:0 110%;visibility:hidden;transition:translate .26s var(--ease),visibility 0s linear .26s}
  /* L'en-tête s'allège : panier et menu sont dans la barre d'onglets. */
  .hd .ibtn--cart,.hd .burger{display:none}
  /* Le bas de chaque page reste lisible au-dessus de la barre. */
  .ft{padding-bottom:calc(2rem + var(--tb-h) + env(safe-area-inset-bottom))}
  .p-product .ft{padding-bottom:calc(2rem + 80px + env(safe-area-inset-bottom))}
  /* Tiroir (Menu) et suggestions de recherche : entre l'en-tête et la barre. */
  .mnu{bottom:calc(var(--tb-h) + env(safe-area-inset-bottom))}
  .mnu__in{padding-bottom:1.5rem}
  .msrch .pop{max-height:calc(100dvh - var(--bar-h) - 110px - var(--tb-h) - env(safe-area-inset-bottom))}
  /* Notifications : au-dessus de la barre (ou de la barre d'achat). */
  .toast{bottom:calc(var(--tb-h) + 12px + env(safe-area-inset-bottom))}
  html.ctx-bar .toast,html.kb-open .toast{bottom:calc(24px + env(safe-area-inset-bottom))}
  .p-product .toast.is-up{bottom:calc(92px + env(safe-area-inset-bottom))}
  /* Fiche produit : la barre d'achat se pose à la place de la barre d'onglets. */
  .sbar{z-index:48}
  /* Commande : barre de paiement (total + « Pay with … ») tant que le bouton de
     paiement est hors de l'écran ; elle prend la place de la barre d'onglets. */
  .ckbar{position:fixed;left:0;right:0;bottom:0;z-index:48;display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0;padding:.7rem max(16px,env(safe-area-inset-right)) calc(.7rem + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:rgba(10,12,22,.96);border-top:1px solid var(--lnd-2);color:#fff;translate:0 110%;visibility:hidden;transition:translate .26s var(--ease),visibility 0s linear .26s}
  .ckbar.is-on{translate:0 0;visibility:visible;transition-delay:0s}
  .ckbar[hidden],html.pm-open .ckbar{display:none}
  .ckbar__t{display:flex;flex-direction:column;margin:0;line-height:1.15}
  .ckbar__t small{font-size:.75rem;color:var(--od-3)}
  .ckbar__t b{font-family:var(--display);font-size:1.4rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
  .ckbar__go{flex:0 1 auto;min-width:0;height:48px;padding:0 1.2rem}
  .ckbar__go span{overflow:hidden;text-overflow:ellipsis}
  .ckbar__go.is-wait{background:rgba(255,255,255,.1);color:var(--od-2);box-shadow:none}
  .p-checkout .ft{padding-bottom:calc(2rem + 80px + env(safe-area-inset-bottom))}
}
@media (max-width:700px){
  /* Panier : la barre du total se pose AU-DESSUS de la barre d'onglets. */
  .cbar{bottom:calc(var(--tb-h) + env(safe-area-inset-bottom));padding-bottom:.75rem}
  html.kb-open .cbar{bottom:0}
  html.has-cbar .p-cart .ft{padding-bottom:calc(6rem + var(--tb-h) + env(safe-area-inset-bottom))}
  html.has-cbar .p-cart .toast{bottom:calc(var(--tb-h) + 86px + env(safe-area-inset-bottom))}
}

/* Tablette en portrait (601–900 px) : les onglets se regroupent au centre. */
@media (min-width:601px) and (max-width:900px){
  .tabbar{grid-auto-columns:minmax(0,120px);justify-content:center}
}
/* Téléphone en paysage (écran bas) : en-tête et onglets compacts, pour laisser
   la place au contenu (icône et libellé côte à côte). */
@media (max-width:1060px) and (max-height:500px) and (orientation:landscape){
  :root{--bar-h:54px}
  .brand__name{font-size:1rem}
}
@media (max-width:900px) and (max-height:500px) and (orientation:landscape){
  :root{--tb-h:46px}
  .tabbar__a{flex-direction:row;gap:6px}
  .tabbar__i{width:36px;height:30px}
}

/* ── 3. Téléphone (≤ 700 px) ─────────────────────────────────────────── */
@media (max-width:700px){
  /* Fiche produit : visuel compact, le nom et le choix de l'offre remontent. */
  .pp__media{padding:.75rem}
  .pp__stage{padding:.5rem 0 .6rem}
  .pp__pass{width:min(300px,100%)}
  .pp__facts{display:none}
  /* Choix de l'offre : une feuille qui monte du bas de l'écran. */
  .ofr__list{position:fixed;left:0;right:0;top:auto;bottom:0;z-index:92;max-height:min(82dvh,640px);padding:0 max(.75rem,env(safe-area-inset-right)) calc(1rem + env(safe-area-inset-bottom)) max(.75rem,env(safe-area-inset-left));border:0;border-radius:24px 24px 0 0;box-shadow:0 -30px 70px -24px rgba(5,6,12,.6);animation:app-sheet .28s var(--ease)}
  .ofr__list::before{content:attr(data-title);position:sticky;top:0;z-index:1;display:block;margin:0 -.75rem .4rem;padding:1.45rem 1.25rem .8rem;border-bottom:1px solid var(--line);background:linear-gradient(var(--line-2),var(--line-2)) 50% .6rem / 38px 4px no-repeat,#fff;font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:-.015em;color:var(--tx)}
  .ofr__o{grid-template-columns:minmax(0,1fr) auto 22px;min-height:72px;padding:.7rem .85rem}
  .ofr__ok{display:block}
  .scrim{position:fixed;inset:0;z-index:91;background:rgba(5,6,12,.55);opacity:0;transition:opacity .22s var(--ease)}
  .scrim.is-on{opacity:1}
  html.sheet-open{overflow:hidden}

  /* Accueil : le catalogue devient un carrousel (la carte suivante dépasse). */
  .p-home .plans{display:flex;gap:.75rem;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);margin:0 calc(-1 * var(--gut));padding:.25rem var(--gut) 1rem;scrollbar-width:none;contain:inline-size}
  .p-home .plans::-webkit-scrollbar{display:none}
  .p-home .plans > .pc{flex:0 0 min(85%,330px);scroll-snap-align:start}

  /* Cartes-pass compactes : accroche sur deux lignes, prix et flèche sur une
     ligne ; toute la carte ouvre la fiche (le délai est dans l'en-tête). */
  .pc__blurb{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:.85rem}
  .pc__buy{padding:.8rem 1.05rem .95rem}
  .pc__buy .pc__del,.pc__acts{display:none}
  .pc__row{gap:.75rem}
  .pc__n{margin-left:auto}
  .pc__row::after{content:"";flex:none;width:34px;height:34px;border-radius:50%;background:var(--ink-900) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") 50% 50% / 16px no-repeat}

  /* Fiche produit, « Compare » : une carte sans étiquette ni « Selected » ne
     garde pas une ligne d'en-tête vide. */
  .oc:not(.is-sel) .oc__top:not(:has(.badge)){display:none}
  /* Tarifs : « Open page » devient un bouton rond (le nom du produit reste sur
     sa ligne, le lien ne passe plus seul à la ligne). */
  .pgrp__open{justify-content:center;width:40px;height:40px;min-height:40px;border-radius:50%;border:1px solid var(--line-2);font-size:0;gap:0}
  .pgrp__open .ic{width:16px;height:16px}
  /* Page 404 : le champ de recherche gardait une hauteur nulle en colonne. */
  .soon__search .soon__q{flex:none;height:50px}

  /* Pied de page plus court : raccourcis sans sous-titre, colonne « Popular »
     retirée (les produits sont dans le ruban des marques et l'onglet Offres). */
  .ft__help{gap:.6rem;padding:1.75rem 0}
  .ft__hc{padding:.8rem .95rem;gap:.85rem}
  .ft__hi{width:40px;height:40px;border-radius:12px}
  .ft__hc small{display:none}
  .ft__col[aria-labelledby="ft-popular"]{display:none}
}
@keyframes app-sheet{from{translate:0 100%}to{translate:0 0}}

/* ── 4. Petits téléphones ─────────────────────────────────────────────── */
@media (max-width:430px){
  /* Deux boutons du héros : ils se partagent la largeur, sans jamais l'élargir. */
  .hero .btns{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero .btns .btn{min-width:0;padding:0 .7rem}
  .nums > div{padding:1.15rem 1rem}
  .nums dt{letter-spacing:.06em}
}
@media (max-width:374px){
  .hero .btns{grid-template-columns:minmax(0,1fr)}
  .hero__kicker{font-size:.76rem}
  .hero__facts{grid-template-columns:minmax(0,1fr)}
  /* Comment ça marche : la durée passe sous l'étape ; maquettes à l'étroit. */
  .jny__i{grid-template-columns:38px minmax(0,1fr)}
  .jny__d{grid-column:2;justify-self:start;margin-top:-.4rem}
  .mk__prog{grid-template-columns:repeat(3,auto);justify-content:space-between;gap:.4rem}
  .stage{padding:.85rem .5rem}
  .stage .rcpt{padding:.85rem .75rem}
  .rcpt__top{flex-wrap:wrap;gap:.55rem .7rem}
  .rcpt__rows > div{grid-template-columns:60px minmax(0,1fr) auto;gap:.45rem;padding:.45rem .55rem}
  /* À propos : les chiffres en liste (libellé | valeur), une ligne chacun. */
  .nums{grid-template-columns:minmax(0,1fr)}
  .nums > div,.nums > div:nth-child(4),.nums > div:last-child{grid-column:auto;order:0;display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.85rem 1rem}
  .nums dt{margin:0}
  .nums dd{font-size:1.6rem}
  /* Entreprises : la feuille de livraison de l'équipe. */
  .teamc{padding:1rem .9rem .9rem}
  .teamc__l li{gap:.5rem;padding:.5rem}
  .teamc__r b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}