/* QTouch — passe « téléphone » n° 2 (chargée après mob7.css). Plus d'air, plus lisible, rien de coupé.
   Tout est limité au téléphone (html.qt-ph, posée par safe7.js) ou à des largeurs < 1000 px : le bureau ne change pas. */

/* ---------- QOYU · les écrans de l'app : rangée défilante, un téléphone centré, voisins qui dépassent
   (téléphone + tablette < 1000 px : la classe .cfm n'est posée que là par community-fx.js) ---------- */
.cfm{--cfw:min(68vw,300px,32vh)}
.cfm .qy-rail{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:auto;
  margin:26px calc(50% - 50vw) 0;padding:12px calc(50vw - var(--cfw) / 2) 30px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.cfm .qy-rail::-webkit-scrollbar{display:none}
.cfm .qy-shot{flex:0 0 var(--cfw);width:auto;margin:0;scroll-snap-align:center;scroll-snap-stop:always;
  transform:scale(.9);opacity:.62;transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .35s}
.cfm .qy-shot.on{transform:none;opacity:1}
.cfm .qy-shot img{width:100%!important;height:auto!important;aspect-ratio:9/19.5;border-radius:34px;border-width:6px;box-shadow:0 26px 44px -28px rgba(60,20,120,.6)}
.cfm .qy-shot figcaption{display:none}
.cfm .cf-desc{min-height:70px;margin:2px 0 0;padding:0 4px;text-align:center}
.cfm .cf-desc p{margin:0 auto;font-size:15px;line-height:1.5;color:var(--qy-mut,#6A6678)}
.cfm .cf-desc b{color:var(--qy-ink,#1D1B26)}
.cfm .cf-bar{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:16px}
.cfm .cf-dots{display:flex;gap:2px}
.cfm .cf-dots button{position:relative;width:24px;height:40px;padding:0;border:0;background:none;cursor:pointer}
.cfm .cf-dots button::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:99px;background:#DDD6FE;transition:width .3s,margin .3s,background .3s}
.cfm .cf-dots button.on::before{width:22px;margin-left:-11px;background:linear-gradient(90deg,#F97316,#EC4899,#7C3AED)}
.cfm .cf-dots button::after{display:none!important}
.cfm .qy-rail-btn{flex:none;width:44px;height:44px}

/* ---------- QOYU · divers ---------- */
.qt-ph .qy-gv-deco{display:none!important}                         /* cœurs flottants posés sur le texte */
.qt-ph .qy-vote-row small{font-size:11.5px}
.qt-ph .qq-t small{font-size:11px;letter-spacing:.06em}
.qt-ph .qq-rew small{font-size:10.5px;letter-spacing:.05em}
.qt-ph .qy-lc-f small{font-size:10.5px}
.qt-ph .qy-fg-rar{font-size:11.5px}
/* l'ancien pied de page (texte blanc sur fond transparent) laissait un grand vide au-dessus du nouveau */
@media (max-width:1279px){
  footer.qt-foot .qt-foot-cols,footer.qt-foot .qt-foot-divider,footer.qt-foot .qt-foot-logo{display:none!important}
  footer.qt-foot{padding:0!important;min-height:0!important}
}
/* « Chaque jour » (tablette) : la 2e carte n'est plus écrasée dans une colonne étroite */
@media (min-width:641px) and (max-width:1000px){
  .qy-day-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
  .qy-day-grid>:first-child{grid-column:1/-1!important}
}
.qt-ph #qyGoalForm input{min-height:44px}

/* ---------- « Un espace pour chacun » (spaces7.js) ---------- */
html.qt-ph .sp7 .cd{width:min(400px,84vw)}
html.qt-ph .sp7 .rl{grid-auto-columns:min(400px,84vw)!important;scroll-padding-left:20px}
html.qt-ph .sp7 .cd .go{font-size:14px;line-height:1.2;padding:8px 8px 8px 18px;gap:10px;white-space:nowrap}
html.qt-ph .sp7 .cd .go svg{width:34px;height:34px}
html.qt-ph .sp7 .cd.me .here,html.qt-ph .sp7 .nw{font-size:12px}
html.qt-ph .sp7 .ar button{width:48px;height:48px}

/* ---------- pied de page (ft7) : deux colonnes, liens plus faciles à toucher ---------- */
@media (max-width:700px){
  .f7-in{padding:40px 20px 22px}
  .f7-top{gap:34px}
  .f7-cols{grid-template-columns:1fr 1fr!important;gap:26px 16px}
  .f7-col:last-child{grid-column:1/-1}
  .f7-col:last-child ul{grid-template-columns:1fr 1fr;column-gap:16px}
  .f7-col h4{margin-bottom:6px}
  .f7-col ul{gap:0}
  .f7-col a{display:block;padding:9px 0;font-size:15px}
  .f7-col a:hover{padding-left:0}
  .f7-ct small{font-size:12px}
  .f7-ct a{display:inline-block;padding:6px 0}
  .f7-lg2 button{min-width:44px;min-height:40px;box-sizing:border-box;text-align:center;line-height:26px}
  .f7-word{margin-top:30px}.f7-word img{height:64px}
  .f7-bot{gap:10px}
  .f7-bot nav{gap:4px 18px}
  .f7-bot nav a{display:inline-block;padding:10px 0}
  .f7-legal{font-size:12px;line-height:1.5}
  .f7-grp a{padding:10px}
}

/* ---------- en-tête : cibles tactiles ---------- */
.qt-ph .n7 .lang{min-height:44px}
.qt-ph .n7 .lg{display:inline-flex;align-items:center;min-height:44px}
.qt-ph .st6-rot-d button{position:relative}
.qt-ph .st6-rot-d button::after{content:"";position:absolute;inset:-16px -6px}

/* ---------- marketplace : cartes plus larges, 1 carte et demie visible ---------- */
@media (max-width:600px){
  .mk-row{grid-auto-columns:calc((100% - 14px)/1.6)!important;gap:14px!important;margin:0 -16px;padding:0 16px;scroll-padding:0 16px}
  .mk-badge{font-size:12px!important}
}

/* ---------- concept · petites étiquettes ---------- */
.qt-ph .h7-ey{font-size:12px!important}

/* ---------- annonceurs · maquette « contacts » sur très petit écran : chiffres sur une ligne, légende du camembert retirée ---------- */
/* le clone du tour (stp9) perd l'id #a7Scr : on lui rend son conteneur de mesure */
.qt-ph .stp9-shot .a7-scr{container-type:inline-size}
@container (max-width:310px){
  .ld-top>div b{white-space:nowrap;font-size:1.45em}
  .ld-pie ul{display:none}
}

/* ---------- respirations entre sections : moins de « trous » vides sur téléphone ---------- */
.qt-ph .h6 .st6{padding-bottom:48px!important}
.qt-ph .h6 .h6-sec{padding-bottom:56px!important}
.qt-ph section#faq.sec{padding-top:56px!important;padding-bottom:56px!important}

/* ---------- établissements · boutique matériel : cartes moins hautes (téléphone), 2 colonnes (tablette) ---------- */
@media (min-width:641px) and (max-width:900px){
  .p6-tiles{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
  .p6-tile.wide{grid-column:1/-1}
  .p6-tile,.p6-tile.wide{min-height:460px!important}
  .p6-tile .nm{font-size:34px}
  .p6-tile .pv img{max-height:260px}
}
@media (max-width:640px){
  .p6-tile,.p6-tile.wide{min-height:470px!important;padding-top:36px}
  .p6-tile .pv{min-height:230px}
  .p6-tile .pv img{max-height:250px}
  .p6-tile .bt button{min-height:42px}
}
/* grande tuile QBOX (téléphone) : texte au-dessus, photo en dessous (plus de texte posé sur la borne) */
.qt-ph .p6-tile.wide{height:auto!important;min-height:0!important;padding-bottom:0}
.qt-ph .p6-tile.wide::after{display:none!important}
.qt-ph .p6-tile.wide>.pv.ph{position:relative!important;inset:auto!important;flex:none!important;height:340px!important;margin:22px -24px 0!important;width:calc(100% + 48px)!important;overflow:hidden}
.qt-ph .p6-tile.wide>.pv.ph img{object-fit:cover!important;object-position:84% 60%!important;transform:none!important}
