/* ==========================================================================
   TARIQ — compléments d'écran propres à account.tariq-ai.com
   Ne redéfinit AUCUN jeton : tout est emprunté à tariq.css.
   26/08/2026 — vérifié après le passage à la charte du site public : toutes
   les couleurs, tous les écarts et tous les rayons de ce fichier passent
   déjà par un jeton `--tq-*`, donc ils ont suivi le changement sans être
   touchés. Seule l'impression demandait un ajout (voir tout en bas).
   ========================================================================== */

/* ── Les cartes de forfait ────────────────────────────────────────────────
   Sur 375 × 667, la carte recommandée passe EN TÊTE : son prix doit être
   lisible sans aucun défilement. Sur écran large, l'ordre de lecture normal
   reprend — trimestre, semestre, année. */
.of-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--tq-e-4);
}
.of-carte { display: flex; flex-direction: column; min-width: 0; }
.of-carte > .of-pied { margin-top: auto; padding-top: var(--tq-e-4); }
.of-recommande { order: -1; }

@media (min-width: 900px) {
  .of-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tq-e-6); }
  .of-recommande { order: 0; }

  /* LES TROIS PRIX SE LISENT SUR LA MÊME LIGNE (01/09/2026).
     Le sur-titre de la carte recommandée porte un mot de plus
     (« Année · recommandée · offre de lancement ») : à trois colonnes il
     repassait à la ligne, et lui seul. Tout ce qui suivait descendait d'un
     cran — le prix le plus important de la page se retrouvait DÉCALÉ VERS LE
     BAS par rapport à ses deux voisins, et la carte que la maison recommande
     était la seule mal rangée. On réserve deux lignes à ce sur-titre dans les
     trois cartes : les prix retombent sur la même ligne de base, quel que soit
     le libellé qu'on y écrira demain. */
  .of-carte > .tq-etiquette {
    min-height: calc(var(--tq-t-etiquette) * var(--tq-i-serre) * 2);
  }
}

/* ── Les jalons en petit écran ────────────────────────────────────────────
   tariq.css empile les jalons verticalement sous 600 px. Empilés, ils
   occupent près de 230 px et repoussent le prix sous la ligne de flottaison
   sur 375 × 667 — or le prix doit s'y lire SANS défilement. On les remet à
   l'horizontale, avec leur nom conservé et leur suffixe d'état masqué : le
   nom reste, seul le commentaire disparaît. */
@media (max-width: 599px) {
  .tq-jalons { flex-direction: row; align-items: flex-start; gap: 0; }
  .tq-jalon {
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--tq-e-1);
    padding-inline: 2px;
    position: relative;
  }
  .tq-jalon + .tq-jalon::before {
    content: "";
    position: absolute;
    top: 11px; right: 50%; left: -50%;
    height: 2px;
    background: var(--tq-lisere);
    z-index: 0;
  }
  .tq-jalon--fait::before,
  .tq-jalon--courant::before { background: var(--tq-vert-clair) !important; }
  .tq-jalon__marque { position: relative; z-index: 1; margin-top: 0; }
  .tq-jalon__libelle { font-size: .6875rem; line-height: 1.25; }
  .ja-suffixe { display: none; }
}

/* ── L'en-tête en petit écran ─────────────────────────────────────────────
   Les entrées de navigation passeraient à la ligne au-dessus du sceau et
   décaleraient la marque. Sous 900 px, seul le geste de compte reste. Les
   deux connecteurs restent atteignables depuis le corps de la page. */
.en-nav { display: none; }
@media (min-width: 900px) {
  .en-nav { display: inline-flex; }
}

/* ── Les onglets de connecteur en petit écran ─────────────────────────────
   Le nom et la pastille côte à côte débordent la largeur : empilés, les deux
   onglets tiennent et l'état de l'AUTRE connecteur reste lisible d'un coup
   d'œil, ce qui est le but de la bascule. */
@media (max-width: 599px) {
  .tq-onglets .tq-onglet {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
  }
}

/* ── Le récapitulatif de commande ─────────────────────────────────────────
   Il porte, toujours : le connecteur, la durée, le montant hors taxes ET le
   montant toutes taxes comprises, et la date exacte du débit. */
.tq-recap { list-style: none; padding: 0; margin: 0; }
.tq-recap li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--tq-e-4);
  padding: var(--tq-e-2) 0;
  border-top: 1px solid var(--tq-lisere);
  font-size: var(--tq-t-mention);
  color: var(--tq-encre-70);
}
.tq-recap li:first-child { border-top: 0; }
.tq-recap b {
  font-weight: 600;
  color: var(--tq-encre);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.tq-recap li.est-total b { font-size: var(--tq-t-chapeau); }

/* ── La facture ───────────────────────────────────────────────────────── */
.fa-entete { display: flex; flex-wrap: wrap; gap: var(--tq-e-8); justify-content: space-between; }
.fa-bloc { min-width: 0; flex: 1 1 16rem; }
@media print {
  .fa-cacher { display: none !important; }
  body { background: #fff; }
  /* Le grain du papier (tariq.css § 27) est une texture d'écran : sur une
     facture imprimée il ne donne rien d'autre qu'un voile gris sur toute la
     page, et il coûte de l'encre. On le retire à l'impression. */
  html::before { display: none !important; }
}