/* ════════════════════════════════════════════════════════════════════════
   EN-TÊTE DU SITE VITRINE SUR TÉLÉPHONE ET TABLETTE — chargé par LES DOUZE
   PAGES, après leurs propres styles. Même règle que sur la vitrine Quentis.

   ⚠ SOUS 1080 px, LES LIENS DE LA BARRE DISPARAISSAIENT SANS REMPLAÇANT :
     sur un téléphone, impossible d'aller aux forfaits ou aux ressources
     autrement qu'en faisant défiler toute la page.

   Ici : un seul jeu de liens dans le HTML, pas de copie « mobile » à côté.
   C'est la MISE EN PAGE qui change, pas le contenu. Le bloc `.menu` regroupe
   les liens, FR/EN et « Se connecter » : au-dessus de 1080 px il s'efface de
   la mise en page (`display:contents`) et la barre reste celle d'avant ; en
   dessous, il devient le panneau qui s'ouvre avec ☰.
   ════════════════════════════════════════════════════════════════════════ */

.menu{display:contents}
.burger{display:none;align-items:center;justify-content:center;flex:none;width:44px;height:44px;
  margin-left:auto;padding:0;border:1px solid var(--ink-line);border-radius:3px;
  background:transparent;color:#fff;font-size:19px;line-height:1;cursor:pointer}
.burger:hover{border-color:var(--cyan)}

@media (max-width:1080px){
  /*  La barre garde DEUX choses : la marque, et de quoi ouvrir le reste. */
  .burger{display:inline-flex}

  /*  Elle s'efface en descendant, revient en remontant (assets/entete.js). */
  header{transition:transform .25s ease;will-change:transform}
  header.entete-cachee{transform:translateY(-100%)}

  /*  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. */
  header .menu{display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;padding:6px 32px 18px;
    background:var(--ink);border-bottom:1px solid var(--ink-line);
    box-shadow:0 14px 30px rgba(0,0,0,.3)}
  header .menu.ouvert{display:flex}
  header .menu nav.links{display:flex;flex-direction:column;gap:0;margin:0}

  /*  44 px de haut : la cible tactile recommandée pour un pouce. */
  header .menu nav.links a{min-height:44px;display:flex;align-items:center;
    padding:0 4px;font-size:16px;border-bottom:1px solid var(--ink-line)}
  header .menu nav.links a:last-child{border-bottom:none}
  header .menu .lang{align-self:flex-start;margin-top:14px}
  header .menu .lang button{min-width:52px;min-height:44px;font-size:12px}
  header .menu .cta-login{display:flex;align-items:center;justify-content:center;
    min-height:44px;margin-top:14px;font-size:15px}
}
@media (max-width:620px){
  header .menu{padding:6px 20px 18px}
}

/* ────────────────────────────────────────────────────────────────────────
   « SE CONNECTER » N'A RIEN À FAIRE SUR UN TÉLÉPHONE — demande de Hamza.

   Tous ces boutons mènent à la console web (app.dasp-technologies.com), qui
   se travaille sur ordinateur ; sur téléphone, les équipes ont l'application
   mobile. Trois endroits : le menu (12 pages), le bouton principal de
   l'accueil, l'appel à l'action en bas des sous-pages.

   ⚠ Ciblé par l'ADRESSE du lien plutôt que par une classe : un bouton de
     connexion ajouté plus tard disparaît lui aussi, sans y penser.
   ⚠ Téléphone = 620 px et moins (le seuil du site), ou un écran tactile de
     moins de 500 px de haut : le même téléphone, tourné à l'horizontale.
     La tablette garde le bouton.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width:620px), (max-height:500px) and (pointer:coarse){
  a[href^="https://app.dasp-technologies.com/login"]{display:none!important}
}
@media (prefers-reduced-motion:reduce){
  header{transition:none}
}