/* ========================================================================
   Version cellulaire de l'accueil (4 oct. 2026), d'après :
   - l'audit de la copie de travail à 360 / 390 / 430 px ;
   - la recherche web (Carsfast.ca, Canada Drives : l'étape 1 du formulaire
     en grille 2 x 2 dès le premier écran ; cibles tactiles de 44-48 px ;
     texte d'au moins 12 px, champs à 16 px).
   Même structure et même message que l'ordinateur, pensés pour le pouce.
   Chargé APRÈS maquette.css et cartes.css. Pour revenir en arrière : retirer
   la ligne <link> de ce fichier.
   ======================================================================== */
@media(max-width:600px){
  /* Marges latérales uniformes (40 px sur ordinateur, trop sur un téléphone) */
  .wrap,.mq-in{padding-left:16px;padding-right:16px}

  /* --- Haut de page : tout le message, en moins de hauteur --- */
  .mq{padding-top:78px}
  .mq-mots{display:flex;margin:0 -4px;gap:4px 8px;font-size:12px;letter-spacing:0;color:#CFE0F2}
  .mq-mots span:nth-of-type(-n+2),.mq-mots b:nth-of-type(-n+2),.mq-mots span:nth-of-type(n+6),.mq-mots b:nth-of-type(n+5){display:none}
  .mq-mots{flex-wrap:nowrap;white-space:nowrap;justify-content:center;overflow:hidden}
  .mq-mots b{font-size:10px}
  .mq-autos{margin:8px -6px -46px}
  .mq-autos .g1{margin-top:8px}
  .mq-centre{margin-top:6px}
  .mq h1{font-size:clamp(31px,9vw,38px);line-height:.98;text-wrap:balance;position:relative}
  .mq-lead{font-size:14px;line-height:1.45;margin-top:10px;max-width:none}
  /* Garanties : 2 x 2, avec leur sous-texte (sinon « Aucun impact » perd son sens) */
  .mq-rassure{grid-template-columns:1fr 1fr;gap:10px 10px;margin-top:14px}
  .mq-rassure>div{gap:9px;align-items:center}
  .mq-ic{flex-basis:34px;width:34px;height:34px}
  .mq-rassure p span{display:block}
  .mq-rassure p b,.mq-rassure p span{font-size:12.5px;line-height:1.3}

  /* --- Le formulaire --- */
  .mq-panel{margin-top:14px;padding:14px 12px 14px;border-radius:18px;scroll-margin-top:70px}
  .mq-tete{gap:12px;padding:0 4px}
  .mq-tete h2{font-size:23px}
  .mq-etapes:before,.mq-etapes:after{top:27px}
  .mq-et .n{font-size:12px}
  .mq-et i{width:14px;height:14px;margin:6px auto 4px}
  .mq-et .l{font-size:12px;line-height:1.25}
  .mq-panel .qstep h3{font-size:18px;margin-top:12px}
  .mq-panel .qh{font-size:13.5px;margin-bottom:12px}
  /* Étape 1 : grille 2 x 2, photo au-dessus, toute la carte se touche */
  .mq-cartes{grid-template-columns:1fr 1fr;gap:10px}
  .mq-carte{flex-direction:column;height:auto;min-height:0}
  .mq-carte .ph,.mq-carte .ph.cover{flex:none;height:auto;aspect-ratio:12/7}
  .mq-carte .tx{padding:10px 12px 12px}
  .mq-carte .tx b{font-size:16.5px}
  .mq-carte .tx span{font-size:12.5px;line-height:1.35;margin-top:3px}
  html[lang=en] .mq-carte .tx span{max-width:none}
  .mq-carte .fl{display:none}
  /* Étapes 2 à 6 : options pleine largeur, bouton Retour assez grand pour le pouce */
  .mq-panel .opts{grid-template-columns:1fr}
  .mq-panel .opt{padding:16px 14px}
  .mq-panel .field input{font-size:16px}
  .mq-panel .qback{display:inline-block;min-height:44px;padding:12px 10px;margin-top:6px;font-size:14px}
  /* Le bandeau du bas du panneau répétait les garanties du haut */
  .mq-bas{display:none}
  .mq-fin{height:28px}

  /* --- Accès rapide : 2 x 2 au lieu de 4 cartes empilées (1 056 px) --- */
  .qcards{grid-template-columns:1fr 1fr!important;gap:10px}
  .maq .qcard{aspect-ratio:1/1}
  .qcard .lbl{left:12px;right:12px;bottom:12px}
  .qcard .lbl h4{font-size:15.5px;line-height:1.2}
  .qcard .lbl .go{font-size:13px;margin-top:4px}

  /* --- Inventaire : en-tête qui ne déborde plus, fiches à faire glisser --- */
  .invhead{flex-wrap:wrap;align-items:flex-start;gap:14px;margin-bottom:22px}
  .invhead h2{font-size:30px}
  #carGrid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:16px;gap:12px;margin:0 -16px;padding:0 16px 10px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  #carGrid::-webkit-scrollbar{display:none}
  #carGrid>.card{flex:0 0 84%;scroll-snap-align:start}
  .card h3{font-size:23px}
  .card .specs{gap:12px;font-size:13px}
  .card .cta .btn{padding:14px!important}

  /* --- Situations : 2 colonnes au lieu de 11 cartes empilées --- */
  .sitgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
  .sitcard{gap:10px;padding:12px}
  .sitcard .ic{width:38px;height:38px;font-size:19px;border-radius:11px}
  .sitcard{min-width:0}
  .sitcard .lb{font-size:13.5px;min-width:0;overflow-wrap:break-word}

  /* --- Opportunité : le texte d'abord, l'image ensuite et moins haute --- */
  .opp .media{order:0;min-height:200px}

  /* --- Pied de page : liens assez hauts pour le pouce --- */
  footer .fnav a,footer .fjoin a:not(.btn){padding:6px 0;margin-bottom:4px}
  footer .fjoin .btn{padding:15px 20px}
  section{padding:52px 0}
  .shead{margin-bottom:28px}
  .fbottom a{display:inline-block;padding:8px 2px}

  /* --- Barre du bas : cachée tant que le formulaire est à l'écran --- */
  .mobar{transition:transform .25s}
  body.form-visible .mobar{transform:translateY(110%)}
}
@media(max-width:380px){
  .mq-mots span:nth-of-type(5),.mq-mots b:nth-of-type(4){display:none}
  .mq-autos{margin-bottom:-34px}
  .mq-autos img{width:46%}
  .mq h1{font-size:30px}
  .mq-lead{font-size:13.5px}
  .mq-rassure{margin-top:10px;gap:8px}
  .mq-panel{margin-top:10px}
  .mq-panel .qstep[data-step="1"]>.qh{display:none}
}
/* Essai 3 (14 h 45) : 4 garanties en haut, plus petites ; accroche sous les cartes */
@media(max-width:600px){
  .mq-ligne{display:none!important}
  .mq-in>.mq-rassure:not(.mq-rassure-bas){display:grid;margin-top:12px;gap:8px 8px}
  .mq-in>.mq-rassure .mq-ic{flex-basis:28px;width:28px;height:28px;border-width:1.5px}
  .mq-in>.mq-rassure .mq-ic svg{width:14px;height:14px}
  .mq-in>.mq-rassure p b,.mq-in>.mq-rassure p span{font-size:12px;line-height:1.25}
  .mq-rassure-bas{display:none!important}
  .mq-centre>.mq-lead{display:none}
  .mq-panel .qstep[data-step="1"]>.qh{display:none}
  .mq-lead-bas{display:block;margin:16px 4px 2px;padding-top:14px;border-top:1px solid rgba(160,200,240,.16);font-size:14px;line-height:1.5;color:#C9D6E8;text-align:center}
  .mq-lead-bas b{color:#fff;font-weight:600}
}
/* Cartes de véhicule : une ligne de description, cartes plus basses (14 h 55) */
@media(max-width:600px){
  .mq-carte .tx .d-long{display:none}
  .mq-carte .tx .d-court{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mq-carte .ph,.mq-carte .ph.cover{aspect-ratio:2.3/1}
  .mq-carte .tx{padding:8px 11px 10px}
  .mq-carte .tx b{font-size:16px;line-height:1.15}
  .mq-carte .tx span.d-court{font-size:12.5px;margin-top:2px}
  .mq-panel .qstep[data-step="1"]>h3{margin-bottom:10px}
}
@media(max-width:600px){.mq-panel .qstep[data-step="1"]>h3{margin-top:6px}.mq-panel{padding-top:12px}.mq-tete{gap:8px}}
@media(max-width:380px){.mq-carte .ph,.mq-carte .ph.cover{aspect-ratio:2.8/1}.mq-autos img{width:42%}.mq-autos{margin-bottom:-40px}}
@media(max-width:600px){.mq-carte .tx b .t-long{display:none}.mq-carte .tx b .t-court{display:inline}.mq-carte .tx b span{font:inherit;color:inherit;margin:0}.mq-carte .tx b{white-space:nowrap}}
/* Fiche véhicule : un bouton au texte long (« Combien vaut mon véhicule d'échange ? »)
   élargissait toute la page sur cellulaire */
@media(max-width:600px){.vwrap>*{min-width:0}.vcta .btn{white-space:normal;text-align:center;line-height:1.3}}