/*=======================================================
  TCHOPER — DESIGN TOKENS
  ---------------------------------------------------
  Socle global de la charte. Chargé APRÈS Bootstrap et
  AVANT style.css : les règles scopées existantes des
  pages de référence (index, search-trip/*) gagnent donc
  toujours sur ce fichier. Il ne fait que combler ce qui
  n'était couvert par AUCUNE règle.

  Valeurs extraites de public/css/style.css :
    - encre #131311            style.css:9328, :9841, :10936
    - crème #FCF9F3            style.css:105, :10934
    - gradient signature       style.css:9338, :9813
    - radius pilule 40px       style.css:9330, :9827
    - radius carte 24px        style.css:10937, :11491
    - bordure 2px solid ink    style.css:9842, :10936
    - H1 Sequel100Black-75 40/48   style.css:13866, :12654
    - H2 Sequel100Black-75 32/40   style.css:12580
    - H3 Sequel100Black-65 20/24   style.css:13153
    - bouton Sequel100Black-55 16/19, padding 16px 24px  style.css:9824-9835

  Voir docs/frontend/audit-front-et-design-system.md
========================================================*/

:root {
    /* --- couleurs --- */
    --tch-ink: #131311;
    --tch-cream: #FCF9F3;
    --tch-white: #ffffff;
    --tch-muted: #6F6F6F;
    --tch-border-soft: #ECECEC;

    /* --- gradients de marque --- */
    --tch-gradient: linear-gradient(103.51deg, #00F0FF 14.02%, #FEFC53 59.43%, #FF8880 86.33%);
    --tch-gradient-radial: radial-gradient(81.25% 87.47% at 18.75% 12.53%, #00F0FF 9.38%, #FEFC53 63.02%, #FF8880 94.79%);
    --tch-gradient-border: linear-gradient(0.35turn, rgba(255, 136, 128, 1), rgba(254, 252, 83, 1), rgba(0, 240, 255, 1));

    /* --- formes --- */
    --tch-radius-pill: 40px;
    --tch-radius-pill-lg: 80px;
    --tch-radius-card: 24px;
    --tch-radius-card-lg: 32px;
    --tch-border: 2px solid var(--tch-ink);

    /* --- typographie --- */
    --tch-font-display: 'Sequel100Black-75';
    --tch-font-display-sm: 'Sequel100Black-65';
    --tch-font-button: 'Sequel100Black-55';
    --tch-font-body: 'DMSans-Regular';
    --tch-font-body-medium: 'DMSans-Medium';

    /* --- espacements bouton --- */
    --tch-btn-padding: 16px 24px;
}

/*-------------------------------------------------------
  TYPOGRAPHIE DE TITRE
  style.css ne contient AUCUNE règle globale h1/h2/h3 :
  chaque page redéfinit ses titres, et toute page nouvelle
  retombait sur Bootstrap + Barlow. Ces règles comblent ce
  trou sans écraser les rules scopées (chargées après).
--------------------------------------------------------*/

h1, .h1 {
    font-family: var(--tch-font-display);
    font-size: 40px;
    line-height: 48px;
    font-weight: normal;
    color: var(--tch-ink);
}

h2, .h2 {
    font-family: var(--tch-font-display);
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.01em;
    font-weight: normal;
    color: var(--tch-ink);
}

h3, .h3 {
    font-family: var(--tch-font-display-sm);
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -0.01em;
    font-weight: normal;
    color: var(--tch-ink);
}

/* NOTE — typographie de CORPS non appliquée ici volontairement.
   Le token cible est : font-family 'DMSans-Regular'; font-size 16px;
   line-height 24px; letter-spacing -.02em; color #131311.
   Il est aujourd'hui neutralisé par style.css:85 qui impose
   `body { font-family:"Barlow"; font-size:14px; color:#191919 }`.
   Basculer style.css:85 modifierait tout texte non explicitement
   stylé, y compris sur index.blade.php et search-trip/* : à faire
   en phase 3 après recette visuelle. Ne pas dupliquer la règle ici,
   elle serait inerte. */

/*-------------------------------------------------------
  BOUTON PRIMAIRE
  Réplique exacte du motif signature .show-more-btn
  (style.css:9811-9835) : pilule encre + halo gradient
  décalé de 5px en ::before.
  Remplace l'usage de .btn-bg-gradient SEUL, qui ne
  définit que le ::before et laisse le CTA sans fond,
  sans padding et sans couleur (audit bug #6).
--------------------------------------------------------*/

.btn-primary-tchoper {
    position: relative;
    display: inline-block;
    background: var(--tch-ink);
    border: 2px solid var(--tch-ink);
    border-radius: var(--tch-radius-pill);
    font-family: var(--tch-font-button);
    font-size: 16px;
    line-height: 19px;
    color: var(--tch-cream);
    padding: var(--tch-btn-padding);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.btn-primary-tchoper::before {
    content: "";
    position: absolute;
    top: 5px;
    right: -1px;
    width: 100%;
    height: 100%;
    background: var(--tch-gradient);
    border-radius: var(--tch-radius-pill);
    z-index: -1;
}

.btn-primary-tchoper:hover,
.btn-primary-tchoper:focus {
    color: var(--tch-cream);
    text-decoration: none;
    opacity: 0.92;
}

.btn-primary-tchoper[disabled],
.btn-primary-tchoper.disabled {
    opacity: 0.55;
    pointer-events: none;
    cursor: default;
}

/* Etat « requete en cours », applicable a n'importe quel CTA (y compris les
   boutons deja stylés par un selecteur d'id, ex. #passer-au-payment).
   Sert de verrou visuel au garde anti double-submit du paiement. */
.is-loading {
    opacity: 0.55;
    pointer-events: none;
    cursor: progress;
}

/* Variante sans halo : submit de formulaire dense
   (réplique .submit-search, style.css:9662-9670). */
.btn-secondary-tchoper {
    display: inline-block;
    background: var(--tch-ink);
    border: 2px solid var(--tch-ink);
    border-radius: var(--tch-radius-pill-lg);
    font-family: var(--tch-font-button);
    font-size: 16px;
    line-height: 19px;
    color: var(--tch-white);
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.btn-secondary-tchoper:hover,
.btn-secondary-tchoper:focus {
    color: var(--tch-white);
    text-decoration: none;
    opacity: 0.92;
}

/* Lien texte charte (réplique .text-link, style.css:10991). */
.link-tchoper {
    font-family: var(--tch-font-body);
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: var(--tch-ink);
    text-decoration: underline;
}

.link-tchoper:hover {
    color: var(--tch-ink);
    opacity: 0.75;
}

/*-------------------------------------------------------
  CARTE
  Réplique .trajet-box (style.css:10933-10939) :
  fond crème, bordure 2px encre, radius 24px.
  Remplace les .card Bootstrap nues des pages paiement
  et erreur (audit section 2.2).
--------------------------------------------------------*/

.card-tchoper {
    background: var(--tch-cream);
    border: var(--tch-border);
    border-radius: var(--tch-radius-card);
    position: relative;
}

.card-tchoper .card-tchoper-body {
    padding: 40px 32px;
}

.card-tchoper .card-tchoper-title {
    font-family: var(--tch-font-button);
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.01em;
    color: var(--tch-ink);
    margin-bottom: 12px;
}

.card-tchoper .card-tchoper-text {
    font-family: var(--tch-font-body);
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.02em;
    color: var(--tch-ink);
    margin-bottom: 24px;
}

/*-------------------------------------------------------
  TITRE DE PAGE SECONDAIRE
  Les 5 titres de pages secondaires étaient sortis du flux
  (position:absolute; top:114→135px, style.css:13752, 13867,
  13908, 14093, 14488) et recouvraient le contenu sur mobile.
  Ils repassent dans le flux avec cet espacement.
--------------------------------------------------------*/

.page-title-tchoper {
    font-family: var(--tch-font-display);
    font-size: 40px;
    line-height: 48px;
    text-align: center;
    color: var(--tch-ink);
    margin: 40px 0 32px;
}

@media (max-width: 767px) {
    .card-tchoper .card-tchoper-body { padding: 28px 20px; }
    .card-tchoper .card-tchoper-title { font-size: 20px; line-height: 26px; }
    .page-title-tchoper { font-size: 28px; line-height: 34px; margin: 24px 0 20px; }
    h1, .h1 { font-size: 28px; line-height: 34px; }
    h2, .h2 { font-size: 24px; line-height: 30px; }
}