/* ════════════════════════════════════════════════════════════════════════
   QUENTIS — LE SITE VITRINE SUR TÉLÉPHONE
   Fichier à part, chargé par LES QUATRE PAGES.

   ⚠ POURQUOI PAS DANS `pages.css` : l'accueil ne le charge pas (il porte ses
     propres styles), et y coller une copie aurait fait diverger les deux au
     premier changement. Une seule maison pour cette règle.
   ════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════
   EN-TÊTE MOBILE — demande de Hamza : « adapte le site vitrine pour mobile ».

   ⚠ CE N'ÉTAIT PAS UN DÉBORDEMENT, C'ÉTAIT UN EMPILEMENT. Le menu de bureau
   se contentait de `flex-wrap` : sur un téléphone, ses six entrées passaient
   sur TROIS RANGÉES et mangeaient le tiers du premier écran — celui-là même
   qui doit convaincre. Rien ne dépassait ; tout était simplement au mauvais
   endroit.

   ⚠ ET LES LIENS N'ÉTAIENT PAS CLIQUABLES AU DOIGT : douze cibles sous les
   40 px de haut recommandés. On lit avec les yeux, on navigue avec le pouce.

   Ici : un seul jeu de liens dans le HTML — pas de copie « mobile » à côté,
   qui divergerait au premier ajout de page. C'est la MISE EN PAGE qui change,
   pas le contenu.
   ════════════════════════════════════════════════════════════════════════ */

.q-burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;
  border:1px solid #D6D0C4;border-radius:11px;background:transparent;cursor:pointer;
  color:#0C1B2E;font-size:19px;line-height:1;padding:0;}
.q-burger:hover{border-color:#0C1B2E;}

@media (max-width:1080px){
  /* La barre garde DEUX choses : la marque, et de quoi ouvrir le reste. */
  .q-barre{flex-wrap:nowrap!important;padding:11px 18px!important;gap:10px!important;}
  /*  La barre s'efface en descendant, revient en remontant (script du menu). */
  .q-entete{transition:transform .25s ease;will-change:transform;}
  .q-entete.q-cachee{transform:translateY(-100%);}
  .q-burger{display:inline-flex;}

  /*  Le panneau tombe SOUS la barre plutôt que de la pousser : la barre est
      collante, la voir grandir ferait sauter la page sous le doigt. */
  .q-liens{display:none!important;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch!important;gap:0!important;
    background:#F5F1E9;border-bottom:1px solid #E7E3DB;
    box-shadow:0 14px 30px rgba(12,27,46,.10);padding:6px 18px 14px;}
  .q-liens.q-ouvert{display:flex!important;}

  /*  44 px de haut : la cible tactile recommandée. C'est ce qui manquait. */
  .q-liens > a{min-height:44px;display:flex!important;align-items:center;
    font-size:16px!important;padding:0 4px;border-bottom:1px solid #E7E3DB;}
  .q-liens > a:last-child{border-bottom:none;}
  .q-liens > a.q-ghost,
  .q-liens > a.q-primary{justify-content:center;margin-top:10px;padding:13px 18px!important;
    font-size:15px!important;border-bottom:none;}

  /*  Le logo rétrécit un peu : sur 320 px, 130 px de logo + un bouton de 44 px
      ne laissent plus d'air. */
  .q-barre img{height:30px!important;}
}

/*  Au-dessus de 1080 px, rien ne change : le panneau redevient la rangée de
    liens d'origine, et le bouton disparaît. (1080 et non plus 860 : avec
    « Sous-traitants » et « Entrepreneurs généraux », la rangée ne tient plus
    sur une ligne en dessous.) */
@media (min-width:1081px){
  .q-liens{display:flex!important;}
}

/* ────────────────────────────────────────────────────────────────────────
   LE PIED DE PAGE SE TOUCHE AUSSI

   ⚠ SES LIENS FAISAIENT 18 px DE HAUT. C'est la hauteur d'une ligne de
     texte, pas celle d'une cible tactile : sur un téléphone, on vise « Le
     produit » et on ouvre « Modules ». Ils passent à 40 px sans changer
     d'apparence — c'est la zone sensible qui grandit, pas le texte.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width:860px){
  footer a{min-height:40px;display:inline-flex;align-items:center;}
  /*  Le pied s'empile plutôt que de tasser deux colonnes sur 320 px. */
  footer{flex-direction:column;align-items:flex-start!important;}
}