/*
 * GT7 TAXIS VTC — la marque, écrite une fois (2.186).
 *
 * ─── Pourquoi cette feuille existe ─────────────────────────────────────
 *
 * La marque validée par Mounir le 4 octobre 2026 (toile Design « GT7 TAXIS
 * VTC — la marque et le site ») tient en peu de choses : deux polices, cinq
 * couleurs, un nom complet d'une seule taille fermé par un point jaune. Le
 * thème (en-tête, pied de page) et l'extension (les blocs des pages, le
 * tunnel) s'en servent tous les deux. Écrites deux fois, ces valeurs
 * finiraient par ne plus dire la même chose — c'est arrivé avec les vingt
 * jetons de couleur du back-office. Elles vivent donc ici, et nulle part
 * ailleurs : `tests/test-site-marque.php` refuse un code couleur de la
 * marque recopié dans une autre feuille.
 *
 * Les polices sont servies par le site lui-même : aucun appel à Google
 * Fonts, donc rien qui parte chez un tiers à chaque visite, et rien qui
 * ralentisse le premier affichage. Seul le jeu latin est chargé (é, è, ç,
 * œ, €, l'espace fine insécable sont dedans) : 85 Ko pour les deux.
 */

@font-face{
  font-family:'Unbounded';
  font-style:normal;
  font-weight:200 900;
  font-display:swap;
  src:url(marque/unbounded.woff2) format('woff2-variations'),url(marque/unbounded.woff2) format('woff2');
}
@font-face{
  font-family:'Onest';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(marque/onest.woff2) format('woff2-variations'),url(marque/onest.woff2) format('woff2');
}

:root{
  /* Les couleurs. Noir, blanc, deux gris, et UNE couleur signature. */
  --gt7-noir:#0E0E10;
  --gt7-blanc:#FFFFFF;
  --gt7-brume:#F2F2F0;     /* les fonds de carte, les champs */
  --gt7-pierre:#E4E4E0;    /* les filets, les séparations */
  --gt7-ardoise:#55565B;   /* le texte second : 7,3 sur blanc, 6,5 sur brume */
  --gt7-signe:#FFC400;     /* le jaune GT7 — le point, le bouton principal */
  --gt7-sur-signe:#0E0E10; /* ce qui s'écrit sur le jaune : du noir, jamais du blanc */

  /* Leurs nuances, pour un survol ou un filet — jamais une couleur de plus. */
  --gt7-noir-survol:#2A2B2F;
  --gt7-signe-survol:#FFD13D;
  --gt7-filet-sur-brume:#D6D6D1;  /* un filet posé sur la brume */
  --gt7-texte-sur-noir:#C9CACE;   /* le texte second sur la bande noire */
  --gt7-indice:#626368;           /* le texte d'exemple, le texte de troisième rang : 4,7 sur pierre */
  --gt7-ombre:0 18px 40px rgba(14,14,16,.14);
  --gt7-voile:rgba(14,14,16,.6);  /* ce qui assombrit la page sous une fenêtre */
  --gt7-filet-fort:#808186;       /* le contour d'un champ : 3,9 sur blanc, 3,5 sur brume */

  /* L'aller-retour, au planning et au téléphone : la seule teinte hors palette. */
  --gt7-violet:#5B3E9E;           --gt7-violet-fond:#EEE8F8;

  /* Le petit plan de la bannière : l'eau et le chemin pas encore tracé. */
  --gt7-plan-eau:#DCE6F4;
  --gt7-plan-chemin:#C9C9C4;

  /* Les états : lisibles sur blanc (contraste ≥ 4,5). */
  --gt7-ok:#17663F;        --gt7-ok-fond:#E4F2EA;
  --gt7-attention:#8A5300; --gt7-attention-fond:#FFF3D6;
  --gt7-info:#1D4F91;      --gt7-info-fond:#E7EEF8;
  --gt7-erreur:#B3261E;    --gt7-erreur-fond:#FBE9E7;

  /* Les caractères. */
  --gt7-police-titre:'Unbounded',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --gt7-police-texte:'Onest',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  /* Les formes : des champs ronds, des cartes plus rondes, des pilules. */
  --gt7-r-champ:16px;
  --gt7-r-carte:24px;
  --gt7-r-bloc:32px;
  --gt7-r-pilule:999px;

  /* La mesure : le contenu tient dans 1 200 px, avec 40 px de marge. */
  --gt7-mesure:1200px;
  --gt7-gouttiere:40px;

  /* Le mouvement : une seule courbe pour tout ce qui arrive. */
  --gt7-arrivee:cubic-bezier(.2,.8,.2,1);

  /*
   * ─── Ce qui se lève, ce qui se signale ─────────────────────────────
   *
   * Le jaune se REMPLIT (un bouton, une pastille, l'élément choisi) ; il
   * ne s'écrit jamais en texte sur le blanc (1,6 de contraste). Son voile
   * marque une zone à regarder, son filet entoure ce qui sonne. Les deux
   * ombres : un bouton qui flotte, la barre du bas du téléphone.
   */
  --gt7-signe-voile:rgba(255,196,0,.16);
  --gt7-signe-filet:rgba(255,196,0,.5);
  --gt7-ombre-bouton:0 6px 18px rgba(14,14,16,.18);
  --gt7-ombre-haute:0 -8px 24px rgba(14,14,16,.08);
}
@media (max-width:640px){
  :root{--gt7-gouttiere:16px}
}

/*
 * ─── Le nom complet, d'une seule taille ────────────────────────────────
 *
 * « GT7 TAXIS VTC » : GT7 en 800, TAXIS VTC en 500, le même corps — c'est
 * la demande de Mounir (« TAXIS VTC même taille pour un nom complet »).
 * Le point jaune ferme le nom. La taille se règle d'une seule variable,
 * --gt7-nom-taille ; tout le reste (écart, point) suit en em.
 *
 * Le balisage vient de GT7_Marque::nom(), jamais d'une copie à la main.
 */
.gt7-nom{
  display:inline-flex;align-items:baseline;
  font-family:var(--gt7-police-titre);font-size:var(--gt7-nom-taille,26px);
  line-height:1;white-space:nowrap;color:inherit;
}
.gt7-nom-gt7{font-weight:800;letter-spacing:-.05em}
.gt7-nom-suite{margin-left:.3em;font-weight:500;letter-spacing:-.03em;word-spacing:.08em}
.gt7-nom-point{
  display:inline-block;flex:none;width:.24em;height:.24em;margin-left:.08em;
  border-radius:50%;background:var(--gt7-signe);
}
/* En bloc : GT7 au-dessus, TAXIS VTC dessous, toujours la même taille. */
.gt7-nom-bloc{flex-direction:column;align-items:flex-start;gap:.08em}
.gt7-nom-bloc .gt7-nom-ligne{display:inline-flex;align-items:baseline}
.gt7-nom-bloc .gt7-nom-suite{margin-left:0}
/* Sur un fond jaune, le point passe au noir. */
.gt7-nom-sur-signe .gt7-nom-point{background:var(--gt7-sur-signe)}
/* Le nom court, celui de l'application : GT7 en 800, TV en 400, le point. */
.gt7-nom-tv{font-weight:400;letter-spacing:-.04em;margin-left:.04em}
.gt7-nom-court .gt7-nom-point{margin-left:.14em}

/* Le point arrive en rebondissant, une fois — et pas du tout si le
   téléphone demande de réduire les animations. */
@media (prefers-reduced-motion:no-preference){
  .gt7-nom-anime .gt7-nom-point{animation:gt7-rebond 1s .45s cubic-bezier(.3,.7,.3,1) both}
}
@keyframes gt7-rebond{
  0%{opacity:0;transform:translateY(-240%) scale(.7)}
  45%{opacity:1;transform:translateY(0) scale(1.25,.75)}
  62%{transform:translateY(-40%) scale(.92,1.08)}
  80%{transform:translateY(0) scale(1.06,.94)}
  100%{opacity:1;transform:none}
}